/* ==========================================================================
   KLIGNOO — feuille de style unique
   Mobile first. Aucune dépendance, aucun framework.

   Sommaire
     1. Variables et réinitialisation
     2. Typographie et mise en page
     3. Marque KLIGNOO
     4. Boutons
     5. Cartes de réponse
     6. Curseurs (sliders)
     7. Champs texte et cases à cocher
     8. Barre de progression
     9. Écrans du questionnaire
    10. Landing page
    11. Page merci et pages légales
    12. Back-office
    13. Graphiques SVG
    14. Utilitaires, mouvement réduit, impression
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables et réinitialisation
   -------------------------------------------------------------------------- */
:root {
  /* ------------------------------------------------------------------------
     PALETTE DE MARQUE KLIGNOO
     Les cinq couleurs de la charte, plus le dégradé de l'arc du logo.
     C'EST LE SEUL ENDROIT À MODIFIER si les valeurs officielles diffèrent :
     tout le reste de la feuille passe par ces variables.
     ------------------------------------------------------------------------ */
  --k-marine: #1d1d3e;      /* Marine     — couleur principale, texte et formes */
  --k-lavande: #6b5bc4;     /* Lavande    — actions, sélection, progression     */
  --k-clementine: #e5a03c;  /* Clémentine — appel à l'action, mise en avant     */
  --k-flamingo: #d06a94;    /* Flamingo   — accent, ponctuation graphique       */
  --k-azurin: #cfe3f5;      /* Azurin     — fonds clairs, aplats calmes         */

  /* Dégradé de l'arc du logo. Les sept arrêts sont relevés au pixel sur le
     fichier officiel : ce n'est pas un simple orange → violet. Il reste chaud
     sur toute la première moitié, bascule en magenta au sommet de l'arc, puis
     plonge vers un violet très sombre. Les trois --k-grad-* sont les couleurs
     d'ancrage, utilisables seules. */
  --k-grad-1: #e7722b;      /* orange, départ gauche de l'arc  */
  --k-grad-2: #e24e86;      /* magenta, sommet de l'arc        */
  --k-grad-3: #5d419c;      /* violet, descente droite         */
  --k-grad-end: #312b60;    /* violet profond, extrémité       */
  --k-gradient: linear-gradient(96deg,
    var(--k-grad-1), #e55f4b 25%, #e35173 41%, var(--k-grad-2) 50%,
    #9c489d 66%, var(--k-grad-3) 82%, var(--k-grad-end));

  /* Déclinaisons — teintes claires et sombres dérivées de la charte. */
  --k-lavande-dark: #56489f;
  --k-lavande-soft: #ece9f8;
  --k-clementine-dark: #bd7f22;
  --k-clementine-soft: #fdf1de;
  --k-flamingo-soft: #fbeaf1;
  --k-azurin-soft: #eaf3fc;

  /* Couleurs FONCTIONNELLES, hors charte : réussite et erreur. La palette
     KLIGNOO n'en comporte pas, et signaler une erreur en Flamingo ou une
     bonne réponse en Lavande serait illisible. Elles sont accordées aux
     teintes de la marque mais restent des couleurs de service. */
  --k-mint: #12a67c;
  --k-mint-soft: #e3f6f0;
  --k-coral: #d93a52;
  --k-coral-soft: #fceaed;

  --k-logo-ink: var(--k-marine);   /* anneaux du symbole « oo » */
  --k-ink: var(--k-marine);
  --k-ink-soft: #4d4a70;
  --k-muted: #7d7a99;
  --k-line: #e2e5ef;
  --k-surface: #ffffff;
  --k-surface-alt: #f4f7fc;
  --k-bg: #eff3f9;

  --k-radius-sm: 10px;
  --k-radius: 16px;
  --k-radius-lg: 24px;
  --k-radius-pill: 999px;

  --k-shadow-sm: 0 1px 2px rgba(29, 29, 62, .06), 0 2px 8px rgba(29, 29, 62, .04);
  --k-shadow: 0 2px 4px rgba(29, 29, 62, .06), 0 12px 28px rgba(29, 29, 62, .08);
  --k-shadow-lg: 0 24px 60px rgba(29, 29, 62, .16);

  --k-space: 1rem;
  --k-max: 34rem;          /* largeur de lecture du questionnaire */
  --k-max-wide: 78rem;     /* back-office */

  --k-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;

  --k-ease: cubic-bezier(.22, .68, .36, 1);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Le mode sombre descend de Marine : c'est la couleur de marque qui
       devient le fond, et non un gris neutre. Marine, Lavande, Clémentine,
       Flamingo et Azurin gardent leurs valeurs de charte. */
    --k-logo-ink: #f2f4fb;
    --k-ink: #f2f4fb;
    --k-ink-soft: #c6c4de;
    --k-muted: #918eb0;
    --k-line: #383163;
    --k-surface: #201c45;
    --k-surface-alt: #2a2455;
    --k-bg: #16132f;
    --k-lavande: #8d7fd8;        /* éclairci pour rester lisible sur Marine */
    --k-lavande-dark: #a396e4;
    --k-clementine-soft: #3d2c11;
    --k-lavande-soft: #2d2660;
    --k-flamingo-soft: #3c1f2c;
    --k-azurin: #7fa8cf;
    --k-azurin-soft: #23304a;
    --k-mint-soft: #10352d;
    --k-coral-soft: #3d1b22;
    --k-shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --k-shadow: 0 12px 28px rgba(0, 0, 0, .45);
    --k-shadow-lg: 0 24px 60px rgba(0, 0, 0, .55);
  }
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--k-font);
  font-size: 1rem;
  line-height: 1.55;
  color: var(--k-ink);
  background: var(--k-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; height: auto; display: block; }

button, input, select, textarea { font: inherit; color: inherit; }

a { color: var(--k-lavande); text-underline-offset: 3px; }
a:hover { color: var(--k-lavande-dark); }

:focus-visible {
  outline: 3px solid var(--k-lavande);
  outline-offset: 2px;
  border-radius: 6px;
}

/* --------------------------------------------------------------------------
   2. Typographie et mise en page
   -------------------------------------------------------------------------- */
h1, h2, h3, h4 {
  margin: 0 0 .5em;
  line-height: 1.2;
  letter-spacing: -.02em;
  font-weight: 800;
}

h1 { font-size: clamp(1.9rem, 7vw, 2.9rem); }
h2 { font-size: clamp(1.4rem, 5vw, 1.9rem); }
h3 { font-size: 1.15rem; }

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

.lead { font-size: 1.075rem; color: var(--k-ink-soft); }
.muted { color: var(--k-muted); }
.small { font-size: .875rem; }
.tiny { font-size: .8125rem; }

.shell {
  width: 100%;
  max-width: var(--k-max);
  margin-inline: auto;
  padding-inline: 1.25rem;
}

.shell--wide { max-width: var(--k-max-wide); }

.stack > * + * { margin-top: 1rem; }
.stack-sm > * + * { margin-top: .5rem; }
.stack-lg > * + * { margin-top: 1.75rem; }

/* --------------------------------------------------------------------------
   3. Marque KLIGNOO
   -------------------------------------------------------------------------- */
.brand {
  display: inline-block;
  line-height: 0;
  text-decoration: none;
}

/* Le logo est une image : on la dimensionne par sa HAUTEUR, la largeur suit.
   Les attributs width/height du HTML réservent la place avant le chargement. */
.brand__img {
  height: 1.55rem;
  width: auto;
  max-width: none;
}

.brand--lg .brand__img { height: 2.4rem; }

@media (min-width: 40rem) {
  .brand__img { height: 1.75rem; }
  .brand--lg .brand__img { height: 3rem; }
}

/* En-tête de la landing sur mobile : le logo occupe toute la largeur utile.
   Ailleurs il reste petit — dans le questionnaire il partage sa ligne avec la
   barre de progression, dans le back-office avec la navigation. */
.landing__header .brand { display: block; }

.landing__header .brand__img {
  width: 100%;
  height: auto;
}

@media (min-width: 30rem) {
  /* Passé la largeur d'un téléphone, une pleine largeur deviendrait
     démesurée : on replafonne. */
  .landing__header .brand__img { width: auto; height: 2.6rem; }
}

/* Symbole seul — les « oo » surmontés de l'arc, en vectoriel.
   Sert au favicon et partout où l'encre doit suivre le thème. */
.logo-oo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Mascotte — illustration optionnelle, voir app/Views/partials/mascotte.php. */
.mascotte {
  width: min(11rem, 45vw);
  height: auto;
  margin-inline: auto;
  filter: drop-shadow(0 12px 24px rgba(29, 29, 62, .18));
}

.mascotte--sm { width: 4.5rem; margin-inline: 0; flex: none; }

.minitest-result__message {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Symbole employé seul, hors lockup (favicon de secours, page merci). */
.logo-oo {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* --------------------------------------------------------------------------
   4. Boutons
   -------------------------------------------------------------------------- */
.btn {
  --btn-bg: var(--k-lavande);
  --btn-fg: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 3.25rem;
  padding: .75rem 1.5rem;
  border: 2px solid transparent;
  border-radius: var(--k-radius-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-weight: 700;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  transition: transform .16s var(--k-ease), box-shadow .16s var(--k-ease),
    background-color .16s var(--k-ease);
  box-shadow: var(--k-shadow-sm);
  -webkit-tap-highlight-color: transparent;
}

.btn:hover { transform: translateY(-1px); box-shadow: var(--k-shadow); color: var(--btn-fg); }
.btn:active { transform: translateY(0); box-shadow: var(--k-shadow-sm); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; transform: none; }

.btn--primary { --btn-bg: var(--k-lavande); }
.btn--primary:hover { --btn-bg: var(--k-lavande-dark); }

.btn--cta {
  --btn-bg: var(--k-clementine);
  --btn-fg: var(--k-marine);
  font-size: 1.05rem;
  min-height: 3.75rem;
  letter-spacing: .02em;
}
.btn--cta:hover { --btn-bg: var(--k-clementine-dark); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--k-ink-soft);
  border-color: var(--k-line);
  box-shadow: none;
  font-weight: 600;
}
.btn--ghost:hover { --btn-bg: var(--k-surface-alt); --btn-fg: var(--k-ink); }

.btn--quiet {
  --btn-bg: var(--k-surface);
  --btn-fg: var(--k-ink);
  border-color: var(--k-line);
  box-shadow: none;
}
.btn--quiet:hover { --btn-bg: var(--k-surface-alt); }

.btn--block { width: 100%; }
.btn--sm { min-height: 2.5rem; padding: .35rem 1rem; font-size: .9rem; }

/* --------------------------------------------------------------------------
   5. Cartes de réponse
   -------------------------------------------------------------------------- */
.card {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-lg);
  padding: 1.5rem;
  box-shadow: var(--k-shadow-sm);
}

.choices { display: grid; gap: .625rem; margin: 0; padding: 0; border: 0; }
.choices--dense { gap: .5rem; }

@media (min-width: 34rem) {
  .choices--two { grid-template-columns: 1fr 1fr; }
}

/* L'input natif reste dans le flux (accessibilité, navigation clavier),
   il est simplement rendu invisible : le <label> devient la surface tactile. */
.choice { position: relative; display: block; }

.choice__input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
  pointer-events: none;
}

.choice__label {
  display: flex;
  align-items: center;
  gap: .875rem;
  min-height: 3.5rem;
  padding: .875rem 1rem;
  background: var(--k-surface);
  border: 2px solid var(--k-line);
  border-radius: var(--k-radius);
  cursor: pointer;
  font-weight: 600;
  transition: border-color .14s var(--k-ease), background-color .14s var(--k-ease),
    transform .14s var(--k-ease);
  -webkit-tap-highlight-color: transparent;
}

.choice__label:hover { border-color: var(--k-lavande); background: var(--k-surface-alt); }
.choice__label:active { transform: scale(.985); }

.choice__box {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border: 2px solid var(--k-line);
  border-radius: 50%;
  display: grid;
  place-items: center;
  transition: border-color .14s var(--k-ease), background-color .14s var(--k-ease);
}

.choice--multi .choice__box { border-radius: 7px; }

.choice__box::after {
  content: "";
  width: .625rem;
  height: .625rem;
  border-radius: 50%;
  background: #fff;
  transform: scale(0);
  transition: transform .16s var(--k-ease);
}

.choice--multi .choice__box::after {
  width: .75rem;
  height: .75rem;
  border-radius: 2px;
  background: none;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) scale(0);
  margin-bottom: .18rem;
}

.choice__text { flex: 1; }

.choice__input:checked + .choice__label {
  border-color: var(--k-lavande);
  background: var(--k-lavande-soft);
}

.choice__input:checked + .choice__label .choice__box {
  border-color: var(--k-lavande);
  background: var(--k-lavande);
}

.choice__input:checked + .choice__label .choice__box::after { transform: scale(1); }
.choice--multi .choice__input:checked + .choice__label .choice__box::after {
  transform: rotate(-45deg) scale(1);
}

.choice__input:focus-visible + .choice__label {
  outline: 3px solid var(--k-lavande);
  outline-offset: 2px;
}

.choice__input:disabled + .choice__label {
  opacity: .42;
  cursor: not-allowed;
  background: var(--k-surface-alt);
}

/* Compteur « 3 sur 5 » des questions à choix multiples */
.choices-counter {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--k-muted);
  background: var(--k-surface-alt);
  border-radius: var(--k-radius-pill);
  padding: .25rem .75rem;
}

.choices-counter[data-full="true"] { color: var(--k-clementine-dark); background: var(--k-clementine-soft); }

/* --------------------------------------------------------------------------
   6. Curseurs (sliders)
   -------------------------------------------------------------------------- */
.slider { padding: .5rem 0 0; }

.slider__value {
  display: block;
  text-align: center;
  font-size: 3.25rem;
  font-weight: 900;
  line-height: 1;
  color: var(--k-lavande);
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
}

.slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 2.5rem;
  background: transparent;
  margin: .75rem 0 .25rem;
  cursor: grab;
}
.slider__input:active { cursor: grabbing; }

.slider__input::-webkit-slider-runnable-track {
  height: .625rem;
  border-radius: var(--k-radius-pill);
  background: linear-gradient(90deg, var(--k-lavande) var(--k-fill, 50%), var(--k-line) var(--k-fill, 50%));
}

.slider__input::-moz-range-track {
  height: .625rem;
  border-radius: var(--k-radius-pill);
  background: var(--k-line);
}
.slider__input::-moz-range-progress {
  height: .625rem;
  border-radius: var(--k-radius-pill);
  background: var(--k-lavande);
}

.slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2rem;
  height: 2rem;
  margin-top: -.6875rem;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--k-lavande);
  box-shadow: var(--k-shadow);
  transition: transform .14s var(--k-ease);
}
.slider__input::-webkit-slider-thumb:hover { transform: scale(1.1); }

.slider__input::-moz-range-thumb {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background: #fff;
  border: 4px solid var(--k-lavande);
  box-shadow: var(--k-shadow);
}

.slider__scale {
  display: flex;
  justify-content: space-between;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--k-muted);
}

/* --------------------------------------------------------------------------
   7. Champs texte et cases à cocher
   -------------------------------------------------------------------------- */
.field { display: block; }

.field__label {
  display: block;
  font-weight: 700;
  margin-bottom: .375rem;
}

.input,
.textarea {
  width: 100%;
  min-height: 3.25rem;
  padding: .875rem 1rem;
  border: 2px solid var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  transition: border-color .14s var(--k-ease);
}

.textarea { min-height: 7rem; resize: vertical; line-height: 1.5; }

.input:hover, .textarea:hover { border-color: var(--k-muted); }
.input:focus, .textarea:focus { outline: none; border-color: var(--k-lavande); }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--k-coral); }

.input::placeholder, .textarea::placeholder { color: var(--k-muted); }

.consent {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  padding: 1rem;
  background: var(--k-surface-alt);
  border: 2px solid var(--k-line);
  border-radius: var(--k-radius);
  cursor: pointer;
  font-size: .9375rem;
  line-height: 1.45;
}

.consent input[type="checkbox"] {
  flex: 0 0 auto;
  width: 1.375rem;
  height: 1.375rem;
  margin: .1rem 0 0;
  accent-color: var(--k-lavande);
  cursor: pointer;
}

.consent:hover { border-color: var(--k-lavande); }

/* Champ piège anti-robot : masqué visuellement ET pour les lecteurs d'écran. */
.honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Note discrète sous une case à cocher — rappel RGPD sur le consentement. */
.field__note {
  margin: .5rem 0 0;
  padding-left: 2.1rem;   /* aligné sur le texte du label, pas sur la case */
  line-height: 1.45;
}

.field__note a { color: var(--k-lavande); }

.field-error {
  display: flex;
  align-items: center;
  gap: .375rem;
  margin-top: .5rem;
  color: var(--k-coral);
  font-size: .875rem;
  font-weight: 600;
}

.alert {
  padding: .875rem 1rem;
  border-radius: var(--k-radius);
  font-size: .9375rem;
  font-weight: 600;
  border: 1px solid transparent;
}

.alert--error { background: var(--k-coral-soft); color: var(--k-coral); border-color: currentColor; }
.alert--success { background: var(--k-mint-soft); color: var(--k-mint); border-color: currentColor; }
.alert--info { background: var(--k-lavande-soft); color: var(--k-lavande); border-color: currentColor; }

/* --------------------------------------------------------------------------
   8. Barre de progression
   -------------------------------------------------------------------------- */
.progress {
  position: sticky;
  top: 0;
  z-index: 20;
  background: color-mix(in srgb, var(--k-bg) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--k-line);
}

.progress__inner {
  max-width: var(--k-max);
  margin-inline: auto;
  padding: .75rem 1.25rem;
  display: flex;
  align-items: center;
  gap: .875rem;
}

.progress__track {
  flex: 1;
  height: .5rem;
  border-radius: var(--k-radius-pill);
  background: var(--k-line);
  overflow: hidden;
}

.progress__bar {
  height: 100%;
  width: 4%;
  border-radius: var(--k-radius-pill);
  background: var(--k-gradient);
  transition: width .45s var(--k-ease);
}

.progress__label {
  font-size: .8125rem;
  font-weight: 700;
  color: var(--k-muted);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* --------------------------------------------------------------------------
   9. Écrans du questionnaire
   -------------------------------------------------------------------------- */
.survey {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  padding-bottom: 2rem;
}

.survey__main { flex: 1; padding-block: 1.5rem 1rem; }

.step { animation: step-in .34s var(--k-ease) both; }

.step[data-leaving="true"] { animation: step-out .18s var(--k-ease) both; }

@keyframes step-in {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}

@keyframes step-out {
  from { opacity: 1; transform: none; }
  to { opacity: 0; transform: translateY(-10px); }
}

.step__eyebrow {
  display: inline-block;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--k-clementine-dark);
  background: var(--k-clementine-soft);
  padding: .25rem .625rem;
  border-radius: var(--k-radius-pill);
  margin-bottom: .875rem;
}

.step__title {
  font-size: clamp(1.35rem, 5.2vw, 1.75rem);
  margin-bottom: .375rem;
}

.step__help { color: var(--k-muted); font-size: .9375rem; margin-bottom: 1.25rem; }
.step__title + .step__body { margin-top: 1.25rem; }
.step__body > * + * { margin-top: 1.5rem; }

.step__actions {
  display: flex;
  gap: .75rem;
  align-items: center;
  margin-top: 1.75rem;
}

.step__actions .btn--primary { flex: 1; }

.step__autosave {
  display: block;
  margin-top: 1rem;
  text-align: center;
  font-size: .75rem;
  color: var(--k-muted);
  min-height: 1.1rem;
  transition: opacity .3s var(--k-ease);
}

/* --- Matrice (Q17) --- */
.matrix { display: grid; gap: .75rem; }

.matrix__row {
  background: var(--k-surface-alt);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: .875rem;
}

.matrix__label { font-weight: 700; margin-bottom: .625rem; font-size: .9375rem; }

.matrix__options { display: grid; grid-template-columns: repeat(3, 1fr); gap: .375rem; }

.matrix__option { position: relative; }

.matrix__option input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

.matrix__option span {
  display: grid;
  place-items: center;
  min-height: 2.75rem;
  padding: .25rem .5rem;
  text-align: center;
  font-size: .875rem;
  font-weight: 700;
  border: 2px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  background: var(--k-surface);
  cursor: pointer;
  transition: all .14s var(--k-ease);
}

.matrix__option span:hover { border-color: var(--k-lavande); }

.matrix__option input:checked + span {
  border-color: var(--k-lavande);
  background: var(--k-lavande);
  color: #fff;
}

.matrix__option input:focus-visible + span { outline: 3px solid var(--k-lavande); outline-offset: 2px; }

/* --- Écran concept --- */
.concept__hero {
  background: linear-gradient(150deg, var(--k-grad-end), var(--k-grad-3) 22%, var(--k-grad-2) 58%, var(--k-grad-1));
  color: #fff;
  border-radius: var(--k-radius-lg);
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--k-shadow);
}

.concept__hero h2 { color: #fff; margin-bottom: .5rem; }
.concept__hero p { color: rgba(255, 255, 255, .92); margin: 0; }

.feature-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }

.feature-list li {
  display: flex;
  align-items: center;
  gap: .875rem;
  padding: .875rem 1rem;
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  font-weight: 600;
  font-size: .9375rem;
}

.feature-list .emoji { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }

.concept__punch {
  text-align: center;
  font-weight: 800;
  font-size: 1.05rem;
  padding: 1.25rem;
  background: var(--k-clementine-soft);
  border-radius: var(--k-radius);
  color: var(--k-ink);
}

/* --- Mini test --- */
.minitest__badge {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--k-lavande);
  background: var(--k-lavande-soft);
  padding: .25rem .625rem;
  border-radius: var(--k-radius-pill);
  margin-bottom: .875rem;
}

.minitest__image {
  border-radius: var(--k-radius);
  border: 1px solid var(--k-line);
  margin-bottom: 1.25rem;
  width: 100%;
}

.minitest-result__score {
  text-align: center;
  padding: 2rem 1.5rem;
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-lg);
  box-shadow: var(--k-shadow-sm);
}

.minitest-result__number {
  font-size: 4rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -.04em;
  background: var(--k-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.review { display: grid; gap: .75rem; }

.review__item {
  border: 1px solid var(--k-line);
  border-left: 4px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: 1rem;
  background: var(--k-surface);
}

.review__item[data-correct="1"] { border-left-color: var(--k-mint); }
.review__item[data-correct="0"] { border-left-color: var(--k-coral); }

.review__verdict {
  display: inline-flex;
  align-items: center;
  gap: .375rem;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}

.review__item[data-correct="1"] .review__verdict { color: var(--k-mint); }
.review__item[data-correct="0"] .review__verdict { color: var(--k-coral); }

.review__question { font-weight: 700; font-size: .9375rem; margin-bottom: .375rem; }
.review__answer { font-size: .875rem; color: var(--k-ink-soft); margin-bottom: .5rem; }
.review__explanation { font-size: .875rem; color: var(--k-muted); line-height: 1.5; }

/* --------------------------------------------------------------------------
   10. Landing page
   -------------------------------------------------------------------------- */
.landing { min-height: 100dvh; display: flex; flex-direction: column; }

.landing__header { padding: 1.25rem 0; }

.landing__hero {
  flex: 1;
  display: flex;
  align-items: center;
  padding-block: 2rem 3rem;
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .8125rem;
  font-weight: 700;
  color: var(--k-lavande);
  background: var(--k-lavande-soft);
  padding: .375rem .875rem;
  border-radius: var(--k-radius-pill);
  margin-bottom: 1.25rem;
}

.hero__title { margin-bottom: 1rem; }

.hero__text { font-size: 1.075rem; color: var(--k-ink-soft); margin-bottom: 2rem; }
.hero__text strong { color: var(--k-ink); }

.hero__cta { margin-bottom: 1.5rem; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: .625rem; }

.facts li {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-size: .9375rem;
  color: var(--k-ink-soft);
}

.facts .tick {
  flex: 0 0 auto;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 50%;
  background: var(--k-mint-soft);
  color: var(--k-mint);
  display: grid;
  place-items: center;
  font-size: .8rem;
  font-weight: 900;
}

.site-footer {
  padding: 2rem 0 2.5rem;
  border-top: 1px solid var(--k-line);
  font-size: .8125rem;
  color: var(--k-muted);
}

.site-footer a { color: var(--k-muted); }
.site-footer a:hover { color: var(--k-lavande); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: .75rem; }

/* --------------------------------------------------------------------------
   11. Page merci et pages légales
   -------------------------------------------------------------------------- */
.thanks {
  min-height: 100dvh;
  display: flex;
  align-items: center;
  padding-block: 3rem;
  text-align: center;
}

.thanks__emoji { font-size: 3.5rem; line-height: 1; margin-bottom: .5rem; }

.thanks__beta {
  margin-top: 1.5rem;
  padding: 1.25rem;
  background: var(--k-mint-soft);
  border-radius: var(--k-radius);
  color: var(--k-ink);
  font-weight: 600;
  font-size: .9375rem;
}

.share {
  display: grid;
  gap: .625rem;
  margin-top: 2rem;
}

@media (min-width: 30rem) {
  .share { grid-template-columns: 1fr 1fr; }
  .share .btn--copy { grid-column: 1 / -1; }
}

.legal { padding-block: 2.5rem 4rem; }
.legal h2 { margin-top: 2rem; font-size: 1.25rem; }
.legal h2:first-of-type { margin-top: 1rem; }
.legal ul { padding-left: 1.25rem; }
.legal li { margin-bottom: .375rem; }

.legal table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
  margin: 1rem 0;
}

.legal th, .legal td {
  text-align: left;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--k-line);
  vertical-align: top;
}

.legal th { font-weight: 700; background: var(--k-surface-alt); }

/* --------------------------------------------------------------------------
   12. Back-office
   -------------------------------------------------------------------------- */
.admin { min-height: 100dvh; background: var(--k-bg); }

.admin__bar {
  background: var(--k-ink);
  color: #fff;
  padding: .875rem 0;
  position: sticky;
  top: 0;
  z-index: 30;
}

@media (prefers-color-scheme: dark) {
  .admin__bar { background: #0d0c1c; }
}

.admin__bar-inner {
  max-width: var(--k-max-wide);
  margin-inline: auto;
  padding-inline: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

/* Le bandeau est Marine : admin-nav.php demande explicitement la version
   blanche du logo (variant 'dark'), plutôt que de la déduire du thème. */
.admin__bar .brand { color: #fff; }

.admin__nav { display: flex; gap: .25rem; flex: 1; flex-wrap: wrap; }

.admin__nav a {
  color: rgba(255, 255, 255, .72);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 600;
  padding: .375rem .75rem;
  border-radius: var(--k-radius-pill);
}

.admin__nav a:hover { color: #fff; background: rgba(255, 255, 255, .1); }
.admin__nav a[aria-current="page"] { color: var(--k-ink); background: var(--k-clementine); }

.admin__main { padding-block: 1.75rem 4rem; }

.admin__title { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.25rem; }
.admin__title h1 { font-size: 1.6rem; margin: 0; }

.kpis {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
  gap: .75rem;
  margin-bottom: 1.75rem;
}

.kpi {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: 1rem;
  box-shadow: var(--k-shadow-sm);
}

.kpi__label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--k-muted);
  margin-bottom: .375rem;
}

.kpi__value {
  font-size: 1.75rem;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -.03em;
  font-variant-numeric: tabular-nums;
}

.kpi__hint { font-size: .75rem; color: var(--k-muted); margin-top: .25rem; }
.kpi--accent .kpi__value { color: var(--k-lavande); }
.kpi--amber .kpi__value { color: var(--k-clementine-dark); }
.kpi--mint .kpi__value { color: var(--k-mint); }

.panels {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr));
}

.panel {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: 1.25rem;
  box-shadow: var(--k-shadow-sm);
  min-width: 0;
}

.panel__head { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; margin-bottom: 1rem; }
.panel__title { font-size: .9375rem; font-weight: 800; margin: 0; }
.panel__meta { font-size: .75rem; color: var(--k-muted); }
.panel--full { grid-column: 1 / -1; }

.filters {
  background: var(--k-surface);
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.filters__grid {
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.filters label { display: block; font-size: .75rem; font-weight: 700; color: var(--k-muted); margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .04em; }

.filters select,
.filters input {
  width: 100%;
  min-height: 2.5rem;
  padding: .375rem .625rem;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius-sm);
  background: var(--k-surface);
  font-size: .875rem;
}

.filters__actions { display: flex; gap: .5rem; margin-top: .875rem; flex-wrap: wrap; }

.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

.table { width: 100%; border-collapse: collapse; font-size: .875rem; }

.table th, .table td {
  text-align: left;
  padding: .625rem .75rem;
  border-bottom: 1px solid var(--k-line);
  white-space: nowrap;
}

.table th {
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--k-muted);
  font-weight: 800;
  background: var(--k-surface-alt);
  position: sticky;
  top: 0;
}

.table tbody tr:hover { background: var(--k-surface-alt); }
.table td.wrap { white-space: normal; min-width: 16rem; }

.tag {
  display: inline-block;
  padding: .125rem .5rem;
  border-radius: var(--k-radius-pill);
  font-size: .75rem;
  font-weight: 700;
  background: var(--k-surface-alt);
  color: var(--k-ink-soft);
}

.tag--completed { background: var(--k-mint-soft); color: var(--k-mint); }
.tag--progress { background: var(--k-clementine-soft); color: var(--k-clementine-dark); }
.tag--started { background: var(--k-line); color: var(--k-muted); }
.tag--suspect { background: var(--k-coral-soft); color: var(--k-coral); }

.pagination { display: flex; gap: .5rem; align-items: center; justify-content: center; margin-top: 1.25rem; flex-wrap: wrap; }

.login {
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 1.5rem;
}

.login__card { width: 100%; max-width: 24rem; }

.export-card { display: grid; gap: .75rem; }

.export-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--k-line);
  border-radius: var(--k-radius);
  background: var(--k-surface);
  flex-wrap: wrap;
}

.export-item__text { flex: 1; min-width: 12rem; }
.export-item h3 { font-size: .9375rem; margin-bottom: .25rem; }
.export-item p { font-size: .8125rem; color: var(--k-muted); margin: 0; }

/* --------------------------------------------------------------------------
   13. Graphiques SVG
   -------------------------------------------------------------------------- */
.chart { width: 100%; overflow: visible; }
.chart text { font-family: var(--k-font); fill: var(--k-muted); font-size: 11px; }
.chart .chart__value { fill: var(--k-ink-soft); font-weight: 700; }
.chart .chart__grid { stroke: var(--k-line); stroke-width: 1; }
.chart .chart__bar { fill: var(--k-lavande); transition: opacity .15s; }
.chart .chart__bar:hover { opacity: .78; }
.chart .chart__bar--amber { fill: var(--k-clementine); }
.chart .chart__bar--mint { fill: var(--k-mint); }
.chart .chart__line { fill: none; stroke: var(--k-lavande); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.chart .chart__area { fill: var(--k-lavande); opacity: .1; }
.chart .chart__dot { fill: var(--k-lavande); }

.hbar { display: grid; gap: .5rem; }

.hbar__row { display: grid; grid-template-columns: minmax(6rem, 11rem) 1fr auto; gap: .625rem; align-items: center; font-size: .8125rem; }

.hbar__label { color: var(--k-ink-soft); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hbar__track { height: 1.375rem; background: var(--k-surface-alt); border-radius: var(--k-radius-sm); overflow: hidden; }

.hbar__fill {
  /* C'est un <span> : sans display:block, ni width ni height ne s'appliquent
     et la barre se réduit à rien. */
  display: block;
  height: 100%;
  border-radius: var(--k-radius-sm);
  background: linear-gradient(90deg, var(--k-lavande-dark), var(--k-lavande));
  min-width: 2px;
  transition: width .5s var(--k-ease);
}

.hbar--clementine .hbar__fill { background: linear-gradient(90deg, var(--k-clementine-dark), var(--k-clementine)); }
.hbar--mint .hbar__fill { background: linear-gradient(90deg, #0d8a66, var(--k-mint)); }

.hbar__value { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--k-ink); min-width: 3.5rem; text-align: right; }

.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--k-muted); font-size: .9375rem; }

/* --------------------------------------------------------------------------
   14. Utilitaires, mouvement réduit, impression
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.mt-1 { margin-top: .5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mb-2 { margin-bottom: 1rem; }
.flex-row { display: flex; gap: .75rem; flex-wrap: wrap; align-items: center; }

[hidden] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .progress, .step__actions, .admin__bar, .filters, .site-footer { display: none !important; }
  body { background: #fff; }
}