/* ─────────────────────────────────────────────────────────────
   OULA — Écrans du quiz
   Mise en page calée sur _references/Q1.png : bandeau-thème floral,
   grille de cartes-réponses, colonne de droite persistante
   (score, poche de jean, « Suivant », « Le savais-tu ? »).
   ───────────────────────────────────────────────────────────── */
@layer components {
  .quiz {
    padding-block: var(--sp-md) var(--sp-xl);

    /* Gabarit des deux colonnes, déclaré une seule fois. */
    --quiz-aside-width: clamp(18rem, 26vw, 27rem);
    --quiz-column-gap: clamp(var(--sp-lg), 4vw, var(--sp-2xl));

    /* Encre du quiz : #141471, la teinte du denim de la poche, un poil plus
       claire que l'indigo du reste du site. Porte les QUESTIONS — prompts,
       aide, encart « Le savais-tu ? ». Une seule valeur à changer. */
    --quiz-ink: var(--c-indigo-pocket);

    /* Encre neutre des éléments de SAISIE et de mesure : réponses, score,
       bloc de l'interrupteur. Le noir les détache de l'indigo des questions
       — on distingue d'un coup d'œil ce qu'on lit de ce sur quoi on agit. */
    --quiz-ink-neutral: #000000;
  }

  /* Le quiz respire plus large que le reste du site : 14 cartes-réponses
     à gauche ET la colonne score/poche à droite ne tiennent pas à l'aise
     dans les 75rem du `--container` global (qui, lui, cadre l'accueil).
     Surcharge locale plutôt que changement du token partagé. */
  .quiz .container {
    width: min(100% - 2 * var(--sp-md), var(--container-quiz, 88rem));
  }

  /* ═══════════════════════════════════════════════════════════
     Bandeau-thème (« Les protections »)
     ═══════════════════════════════════════════════════════════ */
  /* Cadre arrondi à filet coral, motif floral en fond, titre display
     centré par-dessus. Le bandeau floral du site sert de texture :
     il est étiré sur toute la surface du cadre. */
  /* La hauteur suit celle du motif floral (1440×68 → ~2 rangées de
     fleurs) : au-delà, la texture serait agrandie et les fleurs
     deviendraient bien plus grosses que sur la maquette. */
  .quiz-banner {
    position: relative;
    display: grid;
    place-items: center;
    min-height: clamp(4.25rem, 3.4rem + 3.8vw, 6.5rem);
    padding: var(--sp-xs) var(--sp-lg);
    border: 1px solid var(--c-coral);
    border-radius: var(--radius-lg);
    overflow: hidden;
  }

  /* Le snippet floral occupe tout le cadre, en repli derrière le titre.
     Les règles de `.floral-border` (largeur plafonnée, ratio) ne
     s'appliquent pas ici : on veut une texture pleine surface. */
  /* Le bandeau est recomposé fleur par fleur (cf. main.css). Le cadre
     est bien plus haut que la bande d'origine : comme sur petit écran,
     on garde le ratio du bandeau sur le calque interne (dimensionné par
     sa HAUTEUR) et on rogne le débord, sinon les fleurs — posées en %
     sur les deux axes — s'ovaliseraient. */
  .quiz-banner .floral-border {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
    overflow: hidden;
    /* Décor : il ne doit pas concurrencer le titre. */
    opacity: 0.2;
  }

  .quiz-banner .floral-border__inner {
    position: absolute;
    top: 0;
    left: 50%;
    width: auto;
    height: 100%;
    aspect-ratio: 1440 / 68;
    translate: -50% 0;
  }

  /* Le survol périwinkle est propre au hero de l'accueil : ici le motif
     est une texture de fond derrière un titre, il reste corail et ne
     capte pas la souris. */
  .quiz-banner .floral-border__flower {
    pointer-events: none;
  }

  .quiz-banner .floral-border__flower:hover {
    background-color: var(--floral-color);
  }

  .quiz-banner__title {
    position: relative; /* au-dessus du motif */
    margin: 0;
    color: var(--c-coral);
    font-family: var(--font-display);
    font-size: clamp(2rem, 1.3rem + 3.1vw, 3.5rem);
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
  }

  /* ═══════════════════════════════════════════════════════════
     Gabarit deux colonnes
     ═══════════════════════════════════════════════════════════ */
  /* Colonne principale souple, colonne de droite de largeur fixe :
     le score et la poche gardent la même place d'une question à
     l'autre (colonne « persistante », CLAUDE.md §11).
     L'en-tête de question (progression, prompt, aide) occupe la
     PREMIÈRE rangée sur les deux colonnes : le bloc « Ton score »
     démarre donc sous la question, à droite des réponses, comme sur
     `_references/Q1.png`. */
  .quiz__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--quiz-aside-width);
    /* Gouttière horizontale généreuse, verticale resserrée : l'en-tête ne
       doit pas flotter loin des réponses (`gap` unique = trop d'air en y). */
    column-gap: var(--quiz-column-gap);
    row-gap: var(--sp-md);
    align-items: start;
    margin-top: var(--sp-lg);
  }

  /* L'en-tête occupe les deux colonnes : la question court ainsi sous la
     carte de score comme sur `_references/Q1.png`. Il en va de même pour
     les questions à plusieurs groupes (Q2) : le prompt principal n'est
     PAS bridé sur la colonne de réponses. */
  .quiz__head {
    grid-column: 1 / -1;
  }

  /* ─── Question hors score (Q8 « Avant de voir tes résultats ») ───
     Ni carte de score ni poche : la colonne de droite n'a plus de raison
     d'être. On repasse sur UNE colonne et l'écran se centre — réponses
     comprises, comme sur `_references/Q8.png`. L'aside n'est pas retiré
     du DOM (le bouton « Suivant » y vit) : il redevient simplement une
     rangée sous les réponses. */
  .quiz__layout--solo {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
  }

  /* Les colonnes tiennent la largeur du texte, pas celle de la grille :
     sans cette bride, les pilules de réponse s'étireraient sur toute la
     page une fois la colonne de droite disparue. */
  .quiz__layout--solo .quiz__main {
    width: min(100%, 26rem);
  }

  .quiz__layout--solo .quiz__head {
    width: 100%;
  }

  /* Sous 62rem, tout s'empile. Le score et la poche remontent AVANT les
     réponses (`order`) : sinon il faudrait franchir les 14 cartes pour
     voir l'effet de son choix, alors que c'est le cœur du parcours. */
  @media (width < 62rem) {
    .quiz__layout {
      grid-template-columns: minmax(0, 1fr);
    }

    /* `display: contents` a fait remonter les enfants des DEUX colonnes
       au même niveau : ils sont donc réordonnés un par un. L'annonce
       `aria-live` (visually-hidden) doit être numérotée elle aussi,
       sinon son `order: 0` implicite la placerait avant tout le reste. */
    .quiz__progress { order: 1; }
    .quiz__prompt   { order: 2; }
    .score-card     { order: 5; }
    .quiz__aside > .visually-hidden { order: 5; }
    .pocket         { order: 6; justify-self: center; }
    /* Groupes de réponses ET interrupteurs partagent le même rang : ils se
       suivent alors dans leur ORDRE DU DOCUMENT, ce qui préserve l'appariement
       de chaque interrupteur avec son groupe (Q2 : réponses 1 → interrupteur →
       réponses 2). Deux rangs distincts les auraient au contraire regroupés
       par nature, en dissociant l'interrupteur de la sous-question. */
    .answer-group,
    .double-toggle  { order: 7; }
    /* « Suivant » et l'encart restent APRÈS les réponses : on ne valide
       qu'une fois son choix fait. */
    .quiz__next     { order: 8; justify-self: center; }
    .fun-fact       { order: 9; }

    /* En pile, `.answer-group` remonte au niveau de la grille : la marge
       de séparation entre groupes ne s'applique donc plus par adjacence
       (le premier groupe est précédé de la poche, pas d'un autre groupe).
       On la reporte sur chaque groupe sauf le premier du flux. */
    .answer-group ~ .answer-group {
      margin-top: 0;
    }
    .answer-group {
      margin-top: var(--sp-lg);
    }

    /* ─── Questions AVEC score, sur mobile ───────────────────────────
       Demande client : pour chaque question qui porte un score (toutes
       sauf Q8, hors score), on répond D'ABORD, puis on voit le score et
       la poche se remplir, puis « Le savais-tu ? », et enfin « Suivant »
       en bas. Q8 (`hideAside`) ne reçoit pas la classe et garde son
       centrage par défaut. */
    .quiz__layout--answers-first .answer-group,
    .quiz__layout--answers-first .double-toggle { order: 4; }
    .quiz__layout--answers-first .score-card,
    .quiz__layout--answers-first .quiz__aside > .visually-hidden { order: 5; }
    .quiz__layout--answers-first .pocket { order: 6; }
    /* « Le savais-tu ? » AVANT « Suivant » : on lit l'astuce, puis on valide. */
    .quiz__layout--answers-first .fun-fact { order: 7; }
    .quiz__layout--answers-first .quiz__next { order: 8; }

    /* En pile, l'interrupteur remonte au niveau de la grille : sa marge
       haute s'ajoute alors au `row-gap`, ce qui l'éloigne des réponses qu'il
       prolonge. On la résorbe — l'écart de la grille suffit. */
    .double-toggle {
      margin-top: calc(-1 * var(--sp-xl) + var(--sp-sm));
    }

    /* Un peu plus d'air avant le bloc score/poche. La marge porte sur le
       DERNIER SLOT et non sur `.answer-group:last-of-type` : une fois la
       pile aplatie, groupes et interrupteurs sont tous des `div` frères,
       et `:last-of-type` désignerait le dernier div quel qu'il soit — le
       groupe en Q2, l'interrupteur en Q1. Le slot, lui, est toujours le
       bon conteneur, et sa marge s'applique malgré `display: contents`
       via son dernier enfant visible. */
    .quiz__layout--answers-first .answer-group-slot:last-child > *:last-child {
      margin-bottom: var(--sp-lg);
    }

    /* « Suivant » pleine largeur et un cran plus gros : c'est l'action
       principale de l'écran, elle mérite d'occuper toute la colonne. */
    .quiz__next {
      width: 100%;
      justify-self: stretch;
      font-size: var(--fs-lead);
    }

    /* Titre du bandeau-thème (« Les protections ») : plus imposant sur
       mobile. En dessous de 62rem, le terme `vw` du clamp global le
       ramenait quasiment à son plancher (2rem) ; on relève ce plancher. */
    .quiz-banner__title {
      font-size: clamp(2.5rem, 1.9rem + 4vw, 3.5rem);
    }
  }


  .quiz__progress {
    color: var(--c-muted);
    font-size: var(--fs-ui);
    margin-bottom: var(--sp-2xs);
  }

  /* La question occupe toute la largeur de l'en-tête, elle-même à cheval
     sur les DEUX colonnes : elle court donc bien au-delà de la grille de
     réponses, comme sur `_references/Q1.png`. `text-wrap: balance` est
     écarté à dessein — il égaliserait les lignes en les raccourcissant,
     soit l'inverse de l'effet recherché. */
  .quiz__prompt {
    max-width: none;
    text-wrap: pretty;
    color: var(--quiz-ink);
    font-family: var(--font-body);
    font-size: var(--quiz-prompt-size, var(--fs-h2));
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 0; /* l'écart avec les réponses vient du row-gap */
  }

  /* ─── Échelle de texte selon la densité de l'écran ──────────────
     Les prompts gardent la MÊME taille sur tous les types de question
     (--fs-h2) : l'écran à deux sous-questions (Q2) est plus aéré que la
     grille de Q1, mais un prompt plus gros y faisait basculer la
     hiérarchie d'un écran à l'autre. Seule l'aide de saisie profite de
     ce vide et monte d'un cran. */
  .quiz__layout--grouped {
    --quiz-help-size: var(--fs-h3);
  }

  /* Réponses en liste (Q2 à Q8) : des phrases centrées sur toute la largeur.
     Le libellé d'interface (--fs-ui) y serait trop petit, mais --fs-lead
     pesait trop face au prompt : on se cale un cran plus bas, sur le corps
     de texte courant. */
  .answer-grid--list {
    --quiz-answer-size: var(--fs-body);
  }

  /* L'aide se place SOUS la question, sur sa propre ligne (cf. Q2.png) :
     c'est une consigne de saisie, pas une suite de phrase. D'où `block` —
     et le poids normal, qui la distingue du prompt en gras. */
  .quiz__help {
    display: block;
    color: var(--quiz-ink);
    font-family: var(--font-body);
    font-size: var(--quiz-help-size, var(--fs-lead));
    font-weight: 400;
    line-height: 1.3;
    margin-top: var(--sp-2xs);
  }

  /* ═══════════════════════════════════════════════════════════
     Interrupteur « double protection »
     ═══════════════════════════════════════════════════════════ */
  .double-toggle {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--radius-lg);
    background: var(--c-lavender);
    /* L'interrupteur SUIT désormais le groupe qu'il concerne (§11) : la
       respiration passe donc au-dessus du bloc, plus en dessous. */
    margin-top: var(--sp-xl);
  }

  .double-toggle__text {
    display: grid;
    gap: 0.15em;
  }

  /* Textes de l'interrupteur : toute la strate monte d'un cran par rapport
     à l'échelle d'interface (le bloc était nettement trop discret face aux
     cartes-réponses). La hiérarchie interne — libellé > sous-titre >
     exemple — est conservée telle quelle, seulement décalée vers le haut. */
  .double-toggle__label {
    color: var(--quiz-ink-neutral);
    font-size: var(--fs-lead);
    font-weight: 700;
    line-height: 1.25;
  }

  .double-toggle__hint {
    color: var(--quiz-ink-neutral);
    font-size: var(--fs-body);
    line-height: 1.3;
  }

  /* L'exemple reste la précision secondaire du bloc, plus discret que le
     libellé — mais à l'échelle du corps de texte, plus à celle des
     mentions légales. Gris NEUTRE et non `--c-muted` (gris violacé) : il
     resterait sinon le seul texte teinté du bloc passé au noir. */
  .double-toggle__example {
    color: #4A4A4A;
    font-size: var(--fs-ui);
    line-height: 1.35;
    margin-top: var(--sp-2xs);
  }

  /* Interrupteur — un vrai bouton `role="switch"`, pas une case à
     cocher déguisée : l'état vit dans Alpine (CLAUDE.md §12). */
  .switch {
    flex: none;
    padding: var(--sp-2xs);
    border-radius: var(--radius-pill);
  }

  /* `flex` + `align-items: center` plutôt qu'un padding seul : la bordure
     d'1px s'ajoutait à la boîte et décalait la pastille vers le bas. Le
     centrage vertical est ici calculé, non réglé à la main. */
  .switch__track {
    display: flex;
    align-items: center;
    width: 3.25rem;
    height: 1.75rem;
    padding-inline: 0.1875rem;
    border-radius: var(--radius-pill);
    background: var(--c-bg);
    border: 1px solid var(--c-border);
    box-sizing: border-box;
    transition: background-color var(--dur-fast) var(--ease-out);
  }

  .switch__thumb {
    display: block;
    width: 1.375rem;
    height: 1.375rem;
    border-radius: 50%;
    background: var(--c-periwinkle);
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out);
  }

  .switch[aria-checked="true"] .switch__track {
    background: var(--c-periwinkle);
    border-color: var(--c-periwinkle);
  }

  .switch[aria-checked="true"] .switch__thumb {
    background: var(--c-indigo);
    transform: translateX(1.5rem);
  }

  /* ═══════════════════════════════════════════════════════════
     Groupes de réponses
     ═══════════════════════════════════════════════════════════ */
  /* Un écran peut porter plusieurs groupes (Q2 : fréquence, puis état de
     la protection). Ils s'empilent dans la colonne de gauche, séparés
     nettement — la maquette laisse un vrai blanc entre les deux.
     La séparation porte sur le SLOT et non sur `.answer-group` : chaque
     groupe est désormais apparié à son interrupteur dans un conteneur, les
     groupes ne sont donc plus adjacents entre eux. */
  .answer-group-slot + .answer-group-slot {
    margin-top: var(--sp-xl);
  }

  /* Prompt d'un groupe secondaire : même traitement que la question
     principale (`.quiz__prompt`), mais en `h3` puisqu'il en dépend. */
  .answer-group__prompt {
    max-width: none;
    text-wrap: pretty;
    color: var(--quiz-ink);
    font-family: var(--font-body);
    font-size: var(--quiz-prompt-size, var(--fs-h2));
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--sp-md);
  }

  /* ═══════════════════════════════════════════════════════════
     Grille de cartes-réponses
     ═══════════════════════════════════════════════════════════ */
  /* `auto-fill` plutôt qu'un nombre fixe de colonnes : la grille passe
     de 4 à 1 colonne toute seule, sans media query. */
  .answer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(11.25rem, 1fr));
    gap: var(--sp-md) var(--sp-sm);
  }

  /* Disposition « liste » (Q2) : une pilule pleine largeur par réponse,
     libellé centré, pas d'icône ni de gouttes. Les cartes n'ont donc plus
     besoin de la gouttière verticale généreuse de la grille illustrée
     (qui, elle, ménageait la place des gouttes en débord). */
  .answer-grid--list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--sp-sm);
  }

  /* Sur petit écran, la piste minimale descend pour garder DEUX colonnes
     plutôt qu'une seule très étirée. Déclaré après la règle de base :
     à spécificité égale, c'est l'ordre qui tranche. */
  /* La variante « liste » est exclue : ses réponses sont des phrases, elles
     restent sur une colonne quelle que soit la largeur. */
  @media (width < 40rem) {
    .answer-grid:not(.answer-grid--list) {
      grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
    }
  }

  /* Carte blanche bordée, en DEUX COLONNES :
     - colonne 1 (`auto`) : le visuel — icône, gouttes empilées dessous ;
     - colonne 2 (`1fr`)  : le texte, qui occupe les DEUX rangées.
     Le texte s'étendant sur toute la hauteur de la grille, il se centre
     verticalement sur la carte entière et non sur la seule ligne de
     l'icône : c'est ce qui le pose à mi-hauteur, quel que soit le nombre
     de gouttes. Les gouttes restent dans le flux (plus de positionnement
     absolu), donc contenues par le rembourrage bas. */
  .answer-card {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    gap: var(--sp-2xs) var(--sp-sm);
    min-height: 4.5rem;
    padding: var(--sp-sm) var(--sp-md);
    border: 1px solid var(--c-indigo);
    border-radius: var(--radius-lg);
    background: var(--c-bg);
    color: var(--quiz-ink-neutral);
    text-align: start;
    transition:
      background-color var(--dur-fast) var(--ease-out),
      border-color var(--dur-fast) var(--ease-out),
      box-shadow var(--dur-fast) var(--ease-out);
  }

  /* Variante « liste » : la carte devient une barre centrée. Le sélecteur
     descend de la grille plutôt que d'une classe posée sur le bouton — le
     gabarit de carte reste ainsi unique (un seul snippet, §15).
     Le rayon reste celui du design system (`--radius-lg`, comme la carte de
     score et les cartes de Q1) : sur la maquette ces réponses sont des
     rectangles arrondis, pas des pilules. */
  .answer-grid--list .answer-card {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto;
    justify-items: center;
    min-height: 0;
    padding-block: var(--sp-md);
    text-align: center;
  }

  /* Ces réponses n'ont pas de gouttes : le texte reprend l'unique colonne,
     sinon il resterait calé sur la colonne 2 d'une grille qui n'existe plus
     ici. `grid-row: auto` annule l'extension sur deux rangées héritée de la
     grille illustrée — la carte n'en a plus qu'une. */
  .answer-grid--list .answer-card__text {
    grid-column: 1;
    grid-row: auto;
  }

  /* ─── Réponse illustrée EN LISTE (Q3 : la pièce de 1 €) ──────────
     Une pilule peut porter une icône (`answer.icon`) : elle se pose alors
     à côté du libellé, sur la même ligne, et non par-dessus. Sans cette
     règle l'icône garderait le `grid-column: 1 / grid-row: 1` de la grille
     illustrée et se superposerait au texte, qui occupe la même cellule.
     Le déclencheur est la PRÉSENCE de l'icône dans le DOM (`:has()`, cf.
     §10.4) : une même liste peut mêler réponses illustrées et réponses nues
     (Q3 n'en illustre qu'une sur trois), et le gabarit du snippet reste
     unique. Le snippet monte l'enveloppe en `x-if` justement pour que ce
     sélecteur soit exact. */
  .answer-grid--list .answer-card:has(.answer-card__icon) {
    /* Le couple icône + libellé reste centré comme les pilules voisines :
       c'est la PAIRE qui se centre dans la carte, pas chaque élément dans sa
       colonne. Les deux pistes sont donc dimensionnées SUR LEUR CONTENU
       (`max-content`, borné pour que les longs libellés puissent encore se
       replier) : une piste en `1fr` absorberait tout l'espace restant, les
       colonnes rempliraient la carte et `justify-content` n'aurait plus rien
       à distribuer — le couple resterait calé à gauche. */
    grid-template-columns: auto minmax(0, max-content);
    justify-content: center;
    justify-items: start;
  }

  .answer-grid--list .answer-card:has(.answer-card__icon) .answer-card__icon {
    grid-column: 1;
    grid-row: 1;
    /* Un peu plus petite que dans la grille illustrée : ici elle accompagne
       une ligne de texte, elle ne la surplombe pas. */
    width: 1.5rem;
    height: 1.5rem;
  }

  .answer-grid--list .answer-card:has(.answer-card__icon) .answer-card__text {
    grid-column: 2;
  }

  /* Colonne du visuel, rangée haute. */
  .answer-card__icon {
    grid-column: 1;
    grid-row: 1;
    flex: none;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
  }

  /* Les icônes sont des SVG d'environ 30 px de côté, aux proportions
     variables (la culotte est large et plate, la cup haute et étroite).
     On borne donc les DEUX dimensions et on laisse `object-fit: contain`
     inscrire chaque tracé dans le carré sans le déformer. */
  .answer-card__icon img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* Bloc texte : colonne 2, à cheval sur les DEUX rangées. C'est cette
     extension (`grid-row: 1 / -1`) qui lui donne toute la hauteur de la
     carte comme boîte de référence — `align-items: center` le centre
     alors sur la carte, pas sur la ligne de l'icône. */
  .answer-card__text {
    grid-column: 2;
    grid-row: 1 / -1;
    display: grid;
    gap: var(--sp-2xs);
    min-width: 0;
  }

  .answer-card__label {
    font-size: var(--quiz-answer-size, var(--fs-ui));
    font-weight: 700;
    line-height: 1.2;
  }

  /* ─── Réponses avec exemples (Q5, Q6) ───────────────────────────
     Ces cartes portent un titre PUIS des exemples. Comme les pilules
     courtes de la même liste (« Non pas trop »), elles restent CENTRÉES :
     libellé et exemples partagent le même axe, la carte garde son unité.
     Seul le rembourrage change — les exemples ont besoin de plus d'air
     qu'une pilule d'une ligne.
     Le déclencheur est la PRÉSENCE du bloc d'exemples (`:has()`), pas une
     classe : une même liste peut mêler réponses courtes et détaillées. */
  .answer-grid--list .answer-card:has(.answer-card__detail) {
    padding: var(--sp-md) var(--sp-lg);
  }

  /* Le bloc texte s'étire pour que les lignes d'exemple se centrent sur
     toute la largeur de la carte, et non sur leur propre boîte rétrécie. */
  .answer-grid--list .answer-card:has(.answer-card__detail) .answer-card__text {
    width: 100%;
    justify-items: center;
  }

  .answer-card__detail {
    display: grid;
    /* Le bloc prend toute la largeur de la carte : ses lignes se centrent
       alors sur la carte (via le `text-align` hérité) plutôt que sur une
       boîte rétrécie au plus long des exemples. */
    width: 100%;
    gap: 0.15em;
    color: var(--quiz-ink-neutral);
    font-size: var(--fs-ui);
    font-weight: 400;
    line-height: 1.4;
    /* Les exemples sont une glose du libellé : ils respirent en dessous. */
    margin-top: var(--sp-2xs);
  }

  /* Une ligne saisie = une ligne affichée (`display: block` via la grille) :
     l'éditeur maîtrise le découpage depuis le panel, sans balisage. */
  .answer-card__detail-line {
    text-wrap: pretty;
  }

  /* Gouttes : sous l'icône, dans la MÊME colonne — elles font bloc avec
     elle, et le texte occupe la colonne d'à côté sur toute la hauteur.
     La rangée n'est pas bornée à la largeur de l'icône : quatre gouttes
     sont plus larges qu'un carré de 2.25rem, et c'est cette rangée qui
     donne alors sa largeur à la colonne. */
  .answer-card__droplets {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    gap: 0.125rem;
    justify-self: center;
  }

  .answer-card__droplet {
    width: 12px;
    height: 17px;
    flex: none;
  }

  .answer-card:hover {
    background: var(--c-pink-hover);
  }

  /* État sélectionné : aplat corail. Le filet garde son épaisseur d'origine
     (pas de `box-shadow` en doublure) — c'est le fond qui porte l'état, et
     `aria-pressed` le porte pour les lecteurs d'écran (CLAUDE.md §11), donc
     le repère ne repose pas uniquement sur la couleur. */
  .answer-card--selected,
  .answer-card--selected:hover {
    background: var(--c-cta-active);
    border-color: var(--c-indigo);
  }

  /* ═══════════════════════════════════════════════════════════
     Colonne de droite : score, poche, suivant, savais-tu
     ═══════════════════════════════════════════════════════════ */
  /* Colonne fixe, NON sticky : sur la maquette le bloc score/poche est
     posé en haut de la colonne de droite, au même niveau que la première
     rangée de réponses, et défile avec la page. */
  .quiz__aside {
    display: grid;
    justify-items: center;
    gap: var(--sp-lg);
  }

  /* En pile, les colonnes s'effacent pour que leurs enfants soient
     réordonnés au niveau de `.quiz__layout` (cf. les `order` plus haut).
     Déclaré APRÈS `.quiz__aside { display: grid }` : à spécificité égale,
     c'est l'ordre des règles qui tranche. */
  @media (width < 62rem) {
    .quiz__head,
    .quiz__main,
    .quiz__aside,
    /* Le groupe et son interrupteur doivent atteindre la grille EUX-MÊMES :
       c'est sur eux que portent les `order` de la pile mobile, pas sur le
       conteneur qui les apparie en deux colonnes. */
    .answer-group-slot {
      display: contents;
    }

    /* `display: contents` ne génère aucune boîte : la View Transition n'a
       alors rien à capturer sous ces noms. On les retire pour retomber sur
       la transition de racine (fondu de la page), plutôt que de laisser des
       noms orphelins. Le titre du bandeau, lui, garde sa boîte. */
    .quiz__head,
    .quiz__main {
      view-transition-name: none;
    }
  }

  .score-card {
    display: block;
    width: 100%;
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--radius-lg);
    background: var(--c-periwinkle);
    color: var(--quiz-ink-neutral);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
  }

  /* ⚠️ « Original Quality » ne contient PAS les chiffres 4 et 5 (fonte
     incomplète, cf. CLAUDE.md §16.8) : un score de 4, 5, 14 ou « 9,5 »
     retombait donc partiellement sur League Spartan, et la valeur
     s'affichait dans deux fontes à la fois. Tant que la fonte complète
     n'est pas fournie, les VALEURS numériques sont rendues en fonte de
     corps — homogènes quel que soit le chiffre. Le libellé, lui, reste
     en display. */
  .score-card__value {
    font-family: var(--font-body);
    font-size: 0.92em; /* League Spartan a un œil plus grand : on recale */
    font-weight: 700;
  }

  /* ─── Poche de jean (cf. CLAUDE.md §9.3) ──────────────────── */
  /* La poche est un peu moins large que la carte de score : sur la
     maquette elle laisse respirer la colonne de chaque côté. */
  .pocket {
    width: min(84%, 16.5rem);
  }

  .pocket--result {
    margin-inline: auto;
  }

  /* ─── Poche par paliers (cf. CLAUDE.md §9.3) ──────────────────
     Sept visuels COMPLETS (denim + surpiqûres + sang) empilés dans un
     conteneur en grille : chacun occupe la même cellule, donc se
     superpose exactement, sans positionnement absolu ni hauteur codée
     en dur — le conteneur se dimensionne sur les images.

     ⚠️ RÉVÉLATION, pas fondu croisé. Le palier `n` est visible dès que
     `bloodStage >= n` : un nouvel état apparaît PAR-DESSUS le précédent,
     qui reste opaque en dessous. En fondu croisé, les deux images étant
     des poches ENTIÈRES, le DENIM perdrait lui aussi en opacité au
     milieu de la transition et la poche clignoterait (mesuré sur un
     passage 4 → 5 : le denim passerait de rgb(25,25,112) à
     rgb(82,82,148) à mi-course). Ici, il y a toujours au moins une image
     pleinement opaque sous celle qui apparaît — le jean ne bouge jamais. */
  .blood-pocket {
    display: grid;
    width: 100%;
  }

  .blood-pocket__state {
    grid-area: 1 / 1;
    width: 100%;
    height: auto;
  }

  /* Les états 1 à 6 portent `--overlay` et sont masqués au repos ; l'état
     0 (poche vide) ne l'a pas et reste toujours opaque — c'est le socle
     de la pile, ce qui garantit un denim visible en permanence.

     La classe est posée par le snippet, et non déduite d'un sélecteur
     d'attribut sur `:class` : Alpine RETIRE ses attributs du DOM à
     l'initialisation, un `[\:class]` cesserait donc de matcher. */
  .blood-pocket__state--overlay {
    opacity: 0;
    transition: opacity var(--dur-pocket) var(--ease-out);
  }

  .blood-pocket__state--overlay.is-visible {
    opacity: 1;
  }

  @media (prefers-reduced-motion: reduce) {
    .blood-pocket__state--overlay {
      transition: opacity var(--dur-fast) linear;
    }
  }

  .quiz__next {
    min-width: 10rem;
  }

  /* ─── Encart « Le savais-tu ? » ───────────────────────────── */
  .fun-fact {
    width: 100%;
    padding: var(--sp-lg);
    border-radius: var(--radius-lg);
    background: var(--c-lavender);
    color: var(--quiz-ink);
  }

  /* Titre en League Spartan (corps), pas en display : l'encart est une
     note de lecture dans la colonne de droite, pas un titre de section.
     Le gras compense la fonte moins typée. */
  .fun-fact__title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--sp-xs);
    font-family: var(--font-body);
    font-size: var(--fs-lead);
    font-weight: 700;
    margin-bottom: var(--sp-md);
  }

  .fun-fact__icon {
    width: 1.25rem;
    height: 1.25rem;
    flex: none;
  }

  /* Le corps vient de Kirbytext (cf. controllers/quiz.php) : il porte donc
     des <p> et d'éventuels <strong> saisis au panel. On neutralise les
     marges du dernier paragraphe pour que l'encart reste bien calé. */
  .fun-fact__body {
    font-size: var(--fs-ui);
    line-height: 1.6;
  }

  .fun-fact__body > :last-child {
    margin-bottom: 0;
  }

  .fun-fact__body strong {
    font-weight: 700;
  }

  /* ═══════════════════════════════════════════════════════════
     Transition entre questions (View Transitions API)
     ═══════════════════════════════════════════════════════════ */
  /* Le passage d'une question à l'autre est une mutation du DOM en place
     (mono-route, §4) : `document.startViewTransition()` est appelé depuis
     `next()` / `restart()` — cf. assets/js/quiz.js.
     Les navigateurs sans l'API ignorent tout ce bloc et gardent la bascule
     instantanée : c'est un enrichissement, pas un prérequis. */

  /* Chaque zone porte son propre nom : sans cela, la page entière est
     capturée comme une seule image et TOUT clignote — y compris le bandeau
     et la colonne de droite, qui doivent au contraire rester stables. */
  .quiz__head   { view-transition-name: quiz-head; }
  .quiz__main   { view-transition-name: quiz-main; }
  .quiz-banner__title { view-transition-name: quiz-banner-title; }

  /* Le titre du bandeau et l'en-tête se substituent en fondu simple :
     ils changent de texte mais gardent leur place. */
  ::view-transition-old(quiz-banner-title),
  ::view-transition-new(quiz-banner-title),
  ::view-transition-old(quiz-head),
  ::view-transition-new(quiz-head) {
    animation-duration: var(--dur-med);
    animation-timing-function: var(--ease-out);
  }

  /* Les réponses, elles, glissent : l'ancienne question sort vers la gauche,
     la nouvelle entre par la droite. Le sens matérialise l'avancée dans le
     parcours — on va « vers la suite ». */
  ::view-transition-old(quiz-main) {
    animation: quiz-slide-out var(--dur-med) var(--ease-out) both;
  }

  ::view-transition-new(quiz-main) {
    animation: quiz-slide-in var(--dur-med) var(--ease-out) both;
  }

  @keyframes quiz-slide-out {
    to {
      opacity: 0;
      transform: translateX(-2.5rem);
    }
  }

  @keyframes quiz-slide-in {
    from {
      opacity: 0;
      transform: translateX(2.5rem);
    }
  }

  /* Mouvement réduit : la substitution reste, le déplacement disparaît.
     Le JS court-circuite déjà l'appel, ce bloc couvre le cas où la
     préférence change entre-temps. */
  @media (prefers-reduced-motion: reduce) {
    ::view-transition-old(quiz-main),
    ::view-transition-new(quiz-main),
    ::view-transition-old(quiz-head),
    ::view-transition-new(quiz-head),
    ::view-transition-old(quiz-banner-title),
    ::view-transition-new(quiz-banner-title) {
      animation: none;
    }
  }

  /* ═══════════════════════════════════════════════════════════
     Écran résultat (cf. _references/Resultat_low|Medium|High.png)
     ═══════════════════════════════════════════════════════════ */
  /* Les trois maquettes partagent EXACTEMENT la même structure : seule la
     teinte change. Une seule mise en page, donc, et trois jeux de variables
     posés par `.result--{tone}` — ajouter une tranche ne demandera qu'un
     quatrième triplet, pas un nouveau gabarit. */
  /* Le résultat ne reprend PAS la largeur élargie du quiz (`--container-quiz`,
     dimensionnée pour 14 cartes-réponses + la colonne de score) : c'est une
     page de lecture, cadrée comme le reste du site. */
  .quiz .container.result-screen {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-lg);
    width: min(100% - 2 * var(--sp-md), var(--container));
  }

  .result {
    /* Défaut = ton rassurant, au cas où une tranche n'aurait pas de `tone`. */
    --result-tint:   #DBEFDC;
    --result-accent: #4CAF50;
    --result-border: #56B775;

    width: 100%;
    /* `overflow: hidden` : les bandes teintées vont bord à bord et doivent
       être rognées par le rayon de la carte, sinon leurs angles droits
       dépassent du filet arrondi. */
    overflow: hidden;
    border: 2px solid var(--result-border);
    border-radius: var(--radius-lg);
    background: var(--c-bg);
  }

  /* Vigilance — rose pâle, titre terracotta. */
  .result--watch {
    --result-tint:   #FFE9E5;
    --result-accent: #BF6B5F;
    --result-border: #FFA399;
  }

  /* Consulter — rose plus soutenu, titre brun profond : le ton monte
     sans virer à l'alarme rouge (cf. CLAUDE.md §13). */
  .result--consult {
    --result-tint:   #FFDEDF;
    --result-accent: #470C00;
    --result-border: var(--c-indigo);
  }

  /* ─── Bande haute : « Score total : 9 points » ─────────────── */
  .result__score {
    padding: var(--sp-md) var(--sp-lg);
    background: var(--result-tint);
    color: var(--c-indigo);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.1;
    text-align: center;
  }

  /* Même raison que `.score-card__value` : la fonte display n'a ni le 4
     ni le 5, la valeur numérique est donc rendue en fonte de corps pour
     rester d'une seule fonte (« 9,5 » s'affichait « 9, » + « 5 »).
     L'unité (« points ») reste, elle, en display. */
  .result__score-value {
    font-family: var(--font-body);
    font-size: 0.92em;
    font-weight: 700;
  }

  /* ─── Bande blanche : la poche remplie au niveau final ─────── */
  .result__figure {
    display: flex;
    justify-content: center;
    padding-block: var(--sp-lg);
    background: var(--c-bg);
  }

  .pocket--result {
    width: min(60%, 14rem);
  }

  /* ─── Bande basse : interprétation de la tranche ───────────── */
  .result__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-sm);
    padding: var(--sp-lg) clamp(var(--sp-md), 6vw, 5rem) var(--sp-xl);
    background: var(--result-tint);
    text-align: center;
  }

  .result__title {
    color: var(--result-accent);
    font-family: var(--font-display);
    /* Un cran au-dessus de `--fs-h2` sans aller jusqu'au `--fs-h1` du hero :
       c'est le titre d'une carte, pas celui de la page. */
    font-size: calc(var(--fs-h2) * 1.12);
    font-weight: 400;
    line-height: 1.1;
  }

  /* Rappel de la tranche (« Score : 0-7 ») : même teinte que le titre,
     en corps de texte gras — c'est une légende, pas un sous-titre. */
  .result__range {
    margin-top: calc(-1 * var(--sp-xs));
    color: var(--result-accent);
    font-size: var(--fs-lead);
    font-weight: 700;
  }

  /* Texte de référence de l'écran : calé sur le corps de la home
     (`--fs-body`), les autres textes du résultat suivent à l'échelle. */
  .result__text {
    max-width: min(60ch, 100%);
    color: var(--c-periwinkle-dark);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  .result__link {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-xs);
    margin-top: var(--sp-xs);
    color: var(--result-accent);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    text-decoration: none;
  }

  .result__link:hover,
  .result__link:focus-visible {
    text-decoration: underline;
  }

  .result__arrow {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
    stroke-linejoin: round;
    /* La flèche accompagne le libellé : elle glisse au survol du lien. */
    transition: transform var(--dur-fast) var(--ease-out);
  }

  .result__link:hover .result__arrow {
    transform: translateX(0.2em);
  }

  /* ─── Encart de vigilance « anémie » ───────────────────────── */
  /* Déclenché par les symptômes cochés en Q7, indépendamment de la
     tranche : sa teinte est donc fixe, et non liée au `tone`. */
  .result-alert {
    display: flex;
    /* Sur une seule ligne (desktop) le centrage et l'alignement haut se
       confondent ; dès que le texte passe à la ligne (mobile), la pastille
       doit rester en regard de la PREMIÈRE ligne, pas flotter au milieu. */
    align-items: flex-start;
    gap: var(--sp-md);
    /* La pastille est un carré, le texte une ligne de 1.5 d'interligne :
       alignés par le haut de leur boîte, le texte paraissait retomber sous
       le centre du cercle. On aligne les deux sur le CENTRE OPTIQUE de la
       première ligne (cf. `.result-alert__icon` et `__text`). */
    width: 100%;
    padding: var(--sp-md) var(--sp-lg);
    border-radius: var(--radius-lg);
    background: var(--c-pink);
    color: var(--c-periwinkle-dark);
    font-size: var(--fs-body);
    line-height: 1.5;
  }

  /* La PREMIÈRE ligne du texte doit être centrée sur la pastille (2.1em) :
     on lui donne la même hauteur de boîte que la pastille en marge haute
     répartie, plutôt qu'un décalage en `dur` qui casserait au retour à la
     ligne. Les lignes suivantes gardent l'interligne normal. */
  .result-alert__text {
    /* (hauteur pastille − interligne) / 2 → recentre la 1re ligne. */
    padding-block-start: calc((2.1em - 1.5em) / 2);
  }

  .result-alert__icon {
    flex: none;
    display: grid;
    place-items: center;
    /* En `em` : la pastille suit la taille du texte de l'encart. */
    width: 2.1em;
    height: 2.1em;
    border-radius: 50%;
    background: var(--c-bg);
    color: var(--c-cta-active);
  }

  .result-alert__icon svg {
    width: 1.15em;
    height: 1.15em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
  }

  /* Le point du « i » est plein, pas un cercle vide. */
  .result-alert__dot {
    fill: currentColor;
    stroke: none;
  }

  /* Sur mobile, le texte passe sur plusieurs lignes : la pastille calée sur
     la première ligne paraît alors « collée en haut » de la carte. On la
     recentre verticalement dans la carte et on retire le décalage optique de
     première ligne, qui n'a de sens que sur une ligne unique. */
  @media (width < 40rem) {
    .result-alert {
      align-items: center;
    }

    .result-alert__text {
      padding-block-start: 0;
    }
  }

  /* ─── Boutons « Refaire le test » / « Retour à l'accueil » ─── */
  .result-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: clamp(var(--sp-md), 6vw, var(--sp-2xl));
  }

  .result-actions .btn {
    min-width: 12rem;
    /* Ce sont les deux seules actions de fin de parcours : elles portent
       un cran de plus que le corps de texte, comme le CTA de la home. */
    font-size: var(--fs-lead);
  }

  /* Le bloc « Tu veux en savoir plus ? » qui suit vit dans main.css
     (`.more-link`) : il est partagé avec la page « Explication du test ». */

  /* ═══════════════════════════════════════════════════════════
     FAQ — accordéon <details> (bas de l'écran résultat)
     ═══════════════════════════════════════════════════════════ */
  /* Composant repris du projet Hemogyn (_references/faq/assets/css/faq.css),
     réduit à sa mise en page « texte simple » — pas d'encadré, d'image, de
     bouton ni de vignette média sur ce site — et remappé sur les tokens OULA :
     liseré corail, question indigo en fonte display, icône +/− dessinée en CSS.
     Sur la maquette, le fond de l'item est BLANC (Hemogyn le posait en lilas),
     seul le liseré porte la couleur. */
  .faq {
    display: flex;
    flex-direction: column;
    gap: var(--sp-lg);
    width: 100%;
  }

  .faq__title {
    color: var(--c-indigo);
    font-family: var(--font-display);
    font-size: var(--fs-h2);
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
  }

  .faq__list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-md);
  }

  .faq__item {
    /* `overflow: hidden` : la zone de réponse s'ouvre en hauteur, ses angles
       droits doivent être rognés par le rayon du liseré. */
    overflow: hidden;
    /* Rayon franc, proche de la pilule sur un item fermé (cf. maquette) :
       les items de la maquette sont bien plus arrondis que les cartes du
       quiz, d'où une valeur propre au composant plutôt que `--radius-lg`. */
    border: 1px solid var(--c-coral);
    border-radius: 2rem;
    background: var(--c-bg);
  }

  .faq__q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-md);
    padding: var(--sp-lg) clamp(var(--sp-lg), 4vw, var(--sp-xl));
    color: var(--c-indigo);
    font-family: var(--font-display);
    font-size: var(--fs-h3);
    font-weight: 400;
    line-height: 1.2;
    cursor: pointer;
    /* Le marqueur natif (triangle) est remplacé par `.faq__icon`. */
    list-style: none;
  }

  .faq__q::-webkit-details-marker {
    display: none;
  }

  /* Icône +/− dessinée en CSS : deux barres, la verticale pivote et
     s'efface à l'ouverture. */
  .faq__icon {
    position: relative;
    flex: none;
    /* En `em` : l'icône suit la taille de la question. */
    width: 1.1em;
    height: 1.1em;
  }

  .faq__icon::before,
  .faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 2px;
    background: var(--c-indigo);
    transform: translate(-50%, -50%);
    transition:
      transform var(--dur-med) var(--ease-out),
      opacity var(--dur-med) var(--ease-out);
  }

  .faq__icon::before { width: 100%; height: 0.16em; } /* barre horizontale */
  .faq__icon::after  { width: 0.16em; height: 100%; } /* barre verticale */

  .faq__item[open] .faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg);
  }

  /* Zone de réponse : ouverture animée en hauteur via `grid-template-rows`
     (0fr → 1fr), la seule façon d'animer une hauteur `auto` sans JS. */
  .faq__a {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--dur-med) var(--ease-out);
  }

  .faq__item[open] .faq__a {
    grid-template-rows: 1fr;
  }

  .faq__a-inner {
    /* Indispensable au gabarit 0fr : sans lui le contenu déborderait de la
       piste de hauteur nulle au lieu d'être rogné. */
    overflow: hidden;
    /* Aligné sur le retrait latéral de la question. */
    padding: 0 clamp(var(--sp-lg), 4vw, var(--sp-xl)) var(--sp-lg);
  }

  .faq__text {
    color: var(--c-periwinkle-dark);
    font-size: var(--fs-body);
    line-height: 1.6;
  }

  /* Espacement entre blocs, posé sur le frère qui SUIT : « `ul` + `p` » compte
     autant que « `p` + `p` » — sans quoi le paragraphe de reprise sous une
     liste vient se coller au dernier `<li>`. */
  .faq__text > * + * { margin-top: var(--sp-sm); }

  .faq__text ul { padding-left: 1.2em; list-style: disc; }
  .faq__text li + li { margin-top: var(--sp-2xs); }
  .faq__text li::marker { color: var(--c-indigo); }

  /* Amorce en gras (chapô de réponse, intitulé d'un item de liste) : passée
     en indigo, elle se détache du corps périwinkle sans changer de taille. */
  .faq__text strong {
    color: var(--c-indigo);
    font-weight: 700;
  }

  .faq__text a { color: var(--c-indigo); }
}