/* ─────────────────────────────────────────────────────────────────────────────
   LE CAHIER — habillage de l'écran des questions.

   Feuille à part, enfilée APRÈS `quiz.css`, et pas fondue dedans : `quiz.css`
   existe en version minifiée que rien ne régénère automatiquement ici. Toute
   retouche du fichier source y serait invisible en production, où c'est le
   `.min.css` qui est servi. Une feuille de plus, non minifiée, évite ce piège
   et se retire d'un trait si la direction ne convient pas.

   Elle ne redéfinit ni couleurs ni polices : tout vient de `faf-tokens.css`,
   déjà chargé pour le hero.
   ───────────────────────────────────────────────────────────────────────────── */

/* ── L'avertissement du hero ─────────────────────────────────────────────────
   Une phrase, avant la première question. Le filet doré la signale sans en
   faire une alerte : ce n'est pas une erreur, c'est un cadrage. */
.faf-page.faf-quiz-hero--court .faf-quiz-avert {
    display: block;
    max-width: 62ch;
    margin: 0 0 24px;
    padding: 13px 18px;
    background: rgba(252, 248, 241, .7);
    border: 1px solid var(--nude-deep);
    border-left: 3px solid var(--gold);
    border-radius: 14px;
    font-family: var(--sans);
    font-size: 13px;
    line-height: 1.6;
    color: var(--ink-soft);
}
.faf-page.faf-quiz-hero--court .faf-quiz-avert strong {
    color: var(--ink);
    font-weight: 600;
}

/* La colonne du hero s'élargit : l'accroche et l'avertissement tombaient sinon
   sur cinq lignes étroites à côté d'une photo de 330 px. */
.faf-page.faf-quiz-hero--court .hero-copy { max-width: 640px; }
.faf-page.faf-quiz-hero--court .hero-lead { max-width: 60ch; }
.faf-page.faf-quiz-hero--court .hero-in { grid-template-columns: 1.35fr 1fr; }
.faf-page.faf-quiz-hero--court .hero-in--seul { grid-template-columns: 1fr; }

/* ── L'écran des questions ───────────────────────────────────────────────────
   Un écran, une question, rien d'autre. */
.faf-quiz .faf-quiz__screen--questions {
    /* 940 et non 720. À l'ancienne mesure, une question de quatre-vingts signes
       tombait sur trois lignes là où deux suffisent : la colonne était réglée
       pour du texte courant, alors qu'il s'agit d'une seule phrase en grand. */
    max-width: 940px;
    margin: 0 auto;
    padding: 30px 30px 56px;
    background: none;
    border: 0;
    box-shadow: none;
}

/* L'avancement. Collant, mais sous le menu du site — qui fait 78 px et se pose
   par-dessus tout le reste. */
.faf-quiz .faf-quiz__screen--questions .faf-quiz__progress {
    position: sticky;
    /* 96px = le bandeau d'annonce (32) plus l'entête (64). À zéro, la barre se
       collait au haut de la fenêtre, c'est-à-dire DERRIÈRE l'entête du site, qui
       s'y pose par-dessus : l'avancement disparaissait dès le premier défilement. */
    top: 96px;
    z-index: 12;
    display: flex;
    align-items: center;
    gap: 18px;
    margin: 0 0 46px;
    padding: 16px 0 14px;
    background: linear-gradient(var(--paper) 72%, transparent);
    border: 0;
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__progress-bar {
    order: 2;
    flex: 1;
    height: 4px;
    border-radius: 4px;
    background: var(--nude-deep);
    overflow: hidden;
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__progress-fill {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, var(--teal), var(--gold));
    transition: width .45s cubic-bezier(.2, .7, .2, 1);
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__progress-text {
    order: 1;
    margin: 0;
    white-space: nowrap;
    font-family: var(--display);
    font-size: 17px;
    color: var(--ink-muted);
    font-variant-numeric: tabular-nums;
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__current {
    font-size: 21px;
    font-weight: 600;
    color: var(--clay-deep);
}

/* La question. Pas de `text-wrap: balance`, contrairement aux titres :
   équilibrer, c'est égaliser la longueur des lignes, et sur une phrase qui tient
   tout juste en deux le navigateur préfère alors trois lignes courtes. */
.faf-quiz .faf-quiz__screen--questions .faf-quiz__question-container {
    background: none;
    border: 0;
    box-shadow: none;
    padding: 0;
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__question-text {
    font-family: var(--display);
    font-weight: 400;
    font-size: clamp(27px, 4.1vw, 41px);
    line-height: 1.22;
    color: var(--ink);
    margin: 0 0 38px;
    text-align: left;
    text-wrap: pretty;
}

/* Les réponses sont écrites une par une — « Je ne bronche pas », « Je bondis
   littéralement ». Ce sont des phrases, pas les cinq crans d'une échelle : elles
   se lisent, donc chacune a sa ligne et de quoi respirer.

   ⚠️ `!important` partout dans ce bloc, à contrecœur. `quiz.css` marque ainsi la
   totalité de ses déclarations sur les réponses — fond, bordure, rayon, jusqu'au
   rond de la puce. Un `!important` l'emporte sur n'importe quelle spécificité :
   sans le même marquage, rien de ce qui suit ne s'appliquerait. Le jour où
   `quiz.css` sera nettoyé, ces marques pourront tomber d'un coup. */
.faf-quiz .faf-quiz__answers {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 11px !important;
    margin: 0 0 34px !important;
}
.faf-quiz .faf-quiz__answer {
    gap: 16px !important;
    padding: 19px 24px !important;
    background: var(--cream) !important;
    border: 1px solid var(--nude-deep) !important;
    border-radius: 18px !important;
    font-family: var(--sans) !important;
    font-size: 16.5px !important;
    color: var(--ink) !important;
    box-shadow: 0 10px 26px -24px rgba(120, 80, 45, .8) !important;
    transition: .22s !important;
}
.faf-quiz .faf-quiz__answer:hover:not(:disabled) {
    border-color: var(--teal) !important;
    background: var(--cream) !important;
    transform: translateX(3px) !important;
    box-shadow: 0 10px 26px -24px rgba(120, 80, 45, .8) !important;
}
.faf-quiz .faf-quiz__answer:focus-visible {
    outline: 2px solid var(--teal) !important;
    outline-offset: 3px;
}

/* La puce. C'est le `::before` du bouton qui la dessine — le chiffre de 1 à 5,
   lui, est masqué par `quiz.css` depuis longtemps, et c'est très bien : personne
   ne répond « 3 », on répond « je lève la tête ».

   Le rond gris devient la feuille des listes du site. Le dessin est obtenu par
   les seuls rayons, sans rotation : `quiz.css` pose un `transform` sur le bouton
   au survol, et une rotation posée ici serait emportée avec. */
.faf-quiz .faf-quiz__answer::before {
    width: 17px !important;
    height: 17px !important;
    border: 1.5px solid var(--nude-deep) !important;
    border-radius: 100% 0 100% 100% !important;
    background: transparent !important;
    box-shadow: none !important;
    transition: .22s !important;
}
.faf-quiz .faf-quiz__answer:hover:not(:disabled)::before {
    border-color: var(--teal) !important;
}
.faf-quiz .faf-quiz__answer.selected,
.faf-quiz .faf-quiz__answer:active:not(:disabled) {
    border-color: var(--teal) !important;
    background: rgba(88, 172, 159, .07) !important;
    transform: none !important;
    box-shadow: 0 10px 26px -24px rgba(120, 80, 45, .8) !important;
}
.faf-quiz .faf-quiz__answer.selected::before {
    border-color: var(--teal) !important;
    background: var(--teal) !important;
    box-shadow: 0 0 0 4px rgba(88, 172, 159, .14) !important;
}
.faf-quiz .faf-quiz__answer-label {
    font-size: inherit !important;
    font-weight: 400 !important;
    color: inherit !important;
}

/* La navigation. « Précédent » reste en retrait : c'est un recours, pas une
   étape — le passage à la question suivante se fait tout seul. */
.faf-quiz .faf-quiz__screen--questions .faf-quiz__navigation {
    display: flex;
    justify-content: flex-start;
    padding-top: 24px;
    border-top: 1px solid var(--line-soft);
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__prev {
    background: transparent;
    color: var(--clay-deep);
    border: 1px solid var(--nude-deep);
    border-radius: 100px;
    padding: 13px 26px;
    font-family: var(--sans);
    font-size: 13.5px;
    font-weight: 600;
    box-shadow: none;
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__prev:hover:not(:disabled) {
    background: var(--sand);
    color: var(--clay-deep);
}
.faf-quiz .faf-quiz__screen--questions .faf-quiz__prev:disabled { opacity: .35; }

/* ── La carte d'entrée ───────────────────────────────────────────────────────
   Vidée de son titre, de sa description et de ses pastilles — tous dans le hero
   —, elle n'a plus à occuper un écran entier pour porter un bouton. */
.faf-quiz .faf-quiz__intro--hero {
    padding: 38px 34px 34px;
    text-align: center;
}
.faf-quiz .faf-quiz__intro-microcopy {
    max-width: 46ch;
    margin: 16px auto 0;
    font-size: 13px;
    color: var(--ink-muted);
}
.faf-quiz .faf-quiz__disclaimer--soft {
    max-width: 62ch;
    margin: 26px auto 0;
    text-align: left;
}
.faf-quiz .faf-quiz__disclaimer--soft p {
    font-size: 12.5px;
    line-height: 1.66;
    color: var(--ink-muted);
}

@media (max-width: 767px) {
    /* Sous 768px l'entête devient un bouton et le bandeau d'annonce se replie :
       la hauteur à dégager n'est plus la même. */
    .faf-quiz .faf-quiz__screen--questions .faf-quiz__progress { top: 64px; }
}

@media (max-width: 600px) {
    .faf-quiz .faf-quiz__screen--questions { padding: 20px 20px 44px; }
    .faf-quiz .faf-quiz__screen--questions .faf-quiz__progress { gap: 12px; margin-bottom: 32px; }
    .faf-quiz .faf-quiz__answer { padding: 16px 18px; font-size: 15.5px; gap: 13px; }
    .faf-quiz .faf-quiz__screen--questions .faf-quiz__navigation { justify-content: stretch; }
    .faf-quiz .faf-quiz__screen--questions .faf-quiz__prev { width: 100%; }
}


/* ── Pendant le test ─────────────────────────────────────────────────────────
   Le hero se retire dès que la première question s'affiche. Il pèse cinq cents
   pixels — titre, accroche, avertissement, photo — et la question suivante
   tombait donc sous le pli après chaque réponse.

   Le retirer plutôt que faire défiler la page : `html` porte
   `scroll-behavior: smooth`, tout défilement programmé est donc animé, et une
   animation de ce type s'annule au moindre défilement concurrent — le
   déplacement s'arrêtait en chemin. Voir la note dans faf-quiz-cahier.js. Ici la
   question vient d'elle-même sous l'entête, sans que rien ne bouge. Le hero
   revient si l'on retourne à l'accueil du cahier. */
.faf-quiz.faf-quiz--en-cours .faf-quiz-hero--court { display: none; }

/* Sans le hero au-dessus, l'écran des questions ouvre la page : il lui faut de
   quoi respirer sous l'entête, que le hero fournissait jusqu'ici. */
.faf-quiz.faf-quiz--en-cours .faf-quiz__screen--questions { padding-top: 54px; }

/* Les deux disques décoratifs de `quiz.css` — 500 et 380 pixels — étaient dessinés
   pour la carte d'accueil, où ils débordaient joliment derrière elle. Pendant le
   test, ils passent derrière la question et les réponses : un rond turquoise de
   la taille d'un écran juste derrière le texte qu'on demande de lire. On répond
   mieux devant une page calme. */
.faf-quiz.faf-quiz--en-cours::before,
.faf-quiz.faf-quiz--en-cours::after { display: none !important; }

/* ── LE CONTENU DE LA PAGE ──────────────────────────────────────────────────
   Il vit sous le bouton, dans la même mesure que le reste du cahier. Rien d'une
   colonne de blog : c'est la fin d'une page de test, pas un article — d'où une
   mesure resserrée et une hiérarchie plate, deux niveaux, sans encadrés. */
.faf-quiz-seo {
    background: var(--faf-cream, #FBF6EE);
    padding: clamp(40px, 6vw, 72px) 20px clamp(48px, 7vw, 88px);
}
.faf-quiz-seo__in { max-width: 720px; margin: 0 auto; }

.faf-quiz-seo p {
    font-family: 'Raleway', sans-serif;
    font-size: 16.5px;
    line-height: 1.72;
    color: var(--faf-ink-soft, #6B6660);
    margin: 0 0 16px;
}
.faf-quiz-seo__intro p {
    font-size: 18px;
    color: var(--faf-ink, #5E5347);
}

.faf-quiz-seo h2 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: clamp(24px, 3vw, 31px);
    line-height: 1.2;
    color: var(--faf-clay-deep, #95633A);
    margin: clamp(34px, 4vw, 48px) 0 14px;
}
.faf-quiz-seo h3 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 600;
    font-size: 20px;
    line-height: 1.3;
    color: var(--faf-ink, #5E5347);
    margin: 26px 0 6px;
}
.faf-quiz-seo strong { color: var(--faf-ink, #5E5347); font-weight: 600; }

/* Un filet avant les questions fréquentes : c'est un changement de registre, on
   passe de l'explication à la réponse brève. */
.faf-quiz-seo__faq { border-top: 1px solid rgba(149, 99, 58, .18); margin-top: clamp(38px, 5vw, 56px); }

/* LE BLOC SE RETIRE PENDANT LE TEST, comme le héros : personne n'a besoin d'une
   FAQ sous la question 12. Il reste rendu au chargement, donc lu par les moteurs. */
.faf-quiz.faf-quiz--en-cours .faf-quiz-seo { display: none; }

/* La mention légale ferme la page : plus petite, plus grise, détachée par un filet.
   Elle doit être lisible et trouvable, pas mise en avant. */
.faf-quiz-seo__mention {
    margin-top: clamp(34px, 4vw, 48px);
    padding-top: 22px;
    border-top: 1px solid rgba(149, 99, 58, .18);
    font-size: 13.5px !important;
    line-height: 1.65;
    color: rgba(107, 102, 96, .82) !important;
}

/* ── LA SECTION S'ANNONCE ET RESPIRE ────────────────────────────────────────
   Elle était collée sous le bouton, dans la même teinte et la même mesure que le
   reste : on ne savait pas si l'on changeait de partie. Un fond distinct, un filet
   et un intitulé la posent comme une section à part entière. */
/* LA TRANSITION NE DOIT PAS ÊTRE UNE LIGNE. La section commençait exactement où
   finit la carte de démarrage : ses coins arrondis étaient coupés net par le
   changement de couleur, et le blanc tombait d'un coup sous la crème. D'où
   l'impression d'un arrondi qui dépasse — c'est la carte qui était tranchée, pas
   elle qui débordait.

   Le fond part donc de la couleur de la page — transparent, pour ne pas avoir à la
   deviner — et devient blanc sur deux cents pixels. Plus de filet, plus d'arête :
   la page glisse d'une zone à l'autre. Le rembourrage du haut donne à la carte la
   place de finir ses coins avant que le blanc ne s'installe. */
.faf-quiz-seo {
    background: linear-gradient(180deg, rgba(255, 253, 250, 0) 0, rgb(255, 253, 250) 200px);
    padding-top: clamp(96px, 10vw, 150px);
}
.faf-quiz-seo__in { max-width: 880px; }

.faf-quiz-seo__eyebrow {
    font-family: 'Cormorant Garamond', Georgia, serif !important;
    font-style: italic;
    font-size: 13px !important;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #B78D5C !important;
    margin: 0 0 26px !important;
    display: flex; align-items: center; gap: 14px;
}
.faf-quiz-seo__eyebrow::before {
    content: ''; display: inline-block; width: 32px; height: 1px; background: #B78D5C;
}

/* Une énumération se parcourt : cinq lignes, cinq puces, pas une coulée de texte. */
.faf-quiz-seo__liste { margin: 0 0 18px; padding: 0; list-style: none; }
.faf-quiz-seo__liste li {
    font-family: 'Raleway', sans-serif;
    font-size: 16.5px;
    line-height: 1.65;
    color: var(--faf-ink-soft, #6B6660);
    padding: 9px 0 9px 22px;
    position: relative;
    border-bottom: 1px solid rgba(149, 99, 58, .10);
}
.faf-quiz-seo__liste li:last-child { border-bottom: 0; }
.faf-quiz-seo__liste li::before {
    content: '';
    position: absolute; left: 2px; top: 1.05em;
    width: 6px; height: 6px; border-radius: 50%;
    background: #B78D5C;
}
.faf-quiz-seo__liste strong { color: var(--faf-ink, #5E5347); }

/* LA MICROCOPIE PREND TOUTE LA LARGEUR. Bornée à 46 caractères, elle se cassait en
   deux lignes au milieu d'une carte trois fois plus large — une coupure que rien
   ne justifiait. */
.faf-quiz .faf-quiz__intro-microcopy {
    max-width: 100%;
    /* `quiz.css` la met à gauche. Sous un bouton centré, dans une carte centrée, une
       ligne alignée à gauche fait penser qu'elle appartient à autre chose. */
    text-align: center;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* UN LIEN DOIT SE VOIR. Ceux du contenu héritaient d'un gris plus pâle que le texte
   qui les entoure : invisibles à la lecture, et un lien qu'on ne voit pas ne mène
   nulle part. Couleur d'accent, soulignement discret qui s'affirme au survol. */
.faf-quiz-seo a {
    color: #95633A;
    text-decoration: underline;
    text-decoration-color: rgba(149, 99, 58, .35);
    text-underline-offset: 3px;
    transition: text-decoration-color .2s, color .2s;
}
.faf-quiz-seo a:hover {
    color: #7A4F2C;
    text-decoration-color: currentColor;
}

/* ── LA SECTION VA D'UN BORD À L'AUTRE ──────────────────────────────────────
   Elle était bridée à 1040 px par `.faf-quiz`, son conteneur : un rectangle blanc
   posé au milieu du crème, avec deux bandes vides de part et d'autre. Un bloc de
   contenu qui s'arrête avant les bords ne se lit pas comme une section, il se lit
   comme un encadré — et c'est ce qui faisait « carré ».

   On reprend exactement la technique du thème, celle que `.faf-page` utilise pour
   le héros juste au-dessus : `--sb` est la largeur de la barre de défilement, posée
   par `faf-tools.js`, sans laquelle `100vw` compte la barre en trop et la page
   défile en largeur. La mesure de lecture, elle, reste bornée à l'intérieur : c'est
   la bande qui s'élargit, pas les lignes de texte. */
.faf-quiz-seo {
    width: calc(100vw - var(--sb, 0px));
    max-width: calc(100vw - var(--sb, 0px));
    margin-left: calc(50% - 50vw + var(--sb, 0px) / 2);
    margin-right: calc(50% - 50vw);
}