/* Quiz d'entrainement a l'examen civique - styles partages.
 *
 * Pourquoi une feuille dans /public et pas un <style> de composant Astro :
 * une bonne partie des elements (les 4 propositions, la grille des 40 numeros,
 * les lignes du bilan, l'historique) est CREEE en JavaScript. Les styles
 * scopes d'Astro ne les atteindraient pas. Ici, le JS ne pose plus que des
 * classes ; toute la mise en forme vit dans ce fichier.
 *
 * Design : refonte mobile d'abord (390 px), septembre 2026. Palette et rayons
 * inchanges par rapport au reste du site.
 */

:root {
  --nfq-nuit:   #0a0a2e;
  --nfq-bleu:   #000091;
  --nfq-vif:    #1212ff;
  --nfq-texte:  #1b1b35;
  --nfq-gris:   #4a4a68;
  --nfq-gris2:  #6a6a8a;
  --nfq-bord:   #e3e3fd;
  --nfq-bord2:  #f0f0fc;
  --nfq-fond:   #f5f5fe;
  --nfq-vert:   #18753c;
  --nfq-vertf:  #e8f5ed;
  --nfq-rouge:  #c9191e;
  --nfq-rougef: #fceeee;
  --nfq-ambre:  #8a6116;
  --nfq-ambref: #fdf6e8;
}

/* ── Carte porteuse ──────────────────────────────────────────────────── */
.nfq-card {
  background: #fff;
  border: 1px solid var(--nfq-bord);
  border-radius: 18px;
  box-shadow: 0 2px 10px rgba(10, 10, 46, .05);
  overflow: hidden;
}
.nfq-head {
  padding: 14px 20px 12px;
  border-bottom: 1px solid var(--nfq-bord2);
  display: flex; flex-direction: column; gap: 10px;
}
.nfq-head-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nfq-outils { display: flex; align-items: center; gap: 8px; }
.nfq-outil {
  flex: none; display: grid; place-items: center; width: 36px; height: 36px;
  border-radius: 10px; border: 1px solid var(--nfq-bord); background: #fff;
  color: var(--nfq-gris2); cursor: pointer; font-family: inherit; padding: 0;
}
.nfq-outil:hover { border-color: var(--nfq-bleu); color: var(--nfq-bleu); }
.nfq-outil:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.nfq-outil[aria-pressed="true"] { background: var(--nfq-bleu); border-color: var(--nfq-bleu); color: #fff; }
.nfq-outil-ic { width: 19px; height: 19px; }
.nfq-compteur { font-size: 14px; font-weight: 600; color: var(--nfq-gris); }
.nfq-compteur strong { color: var(--nfq-nuit); font-weight: 700; }

/* Chrono : pastille grise. 45 minutes de rouge n'aident personne ; il ne
   devient urgent que sous 5 minutes, et alors seulement il se voit. */
.nfq-chrono {
  font-family: ui-monospace, 'SF Mono', monospace;
  font-variant-numeric: tabular-nums;
  font-size: 15px; font-weight: 600;
  color: var(--nfq-gris2);
  background: var(--nfq-fond);
  border: 1px solid var(--nfq-bord);
  border-radius: 999px; padding: 4px 12px;
  display: inline-flex; align-items: center; gap: 7px;
}
.nfq-chrono--urgent { color: var(--nfq-rouge); background: var(--nfq-rougef); border-color: #f6cfd0; }
.nfq-chrono--urgent::before {
  content: ''; width: 7px; height: 7px; border-radius: 999px;
  background: var(--nfq-rouge); flex: none;
}

.nfq-jauge { height: 4px; border-radius: 999px; background: var(--nfq-bord); overflow: hidden; }
.nfq-jauge > i { display: block; height: 100%; border-radius: 999px; background: var(--nfq-bleu); transition: width .25s; }

/* ── Corps de la question ────────────────────────────────────────────── */
.nfq-body { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 15px; }
/* Une vignette par theme, au trait bleu. Elle donne un repere visuel immediat
   a quelqu'un qui lit le francais avec effort : avant meme de lire le libelle,
   on sait de quoi parle la question. Cinq images de 3 a 6 Ko, mises en cache
   des la premiere question. */
.nfq-entete { display: flex; align-items: center; gap: 14px; }
.nfq-illu {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 12px;
  background: var(--nfq-fond); border: 1px solid var(--nfq-bord);
}
/* Icone du SUJET quand il est identifie (88 % des questions), sinon on retombe
   sur l'illustration du theme. Le trait prend la couleur du bloc, donc le bleu
   Republique, sans avoir a toucher au fichier source. */
.nfq-icone { width: 30px; height: 30px; color: var(--nfq-bleu); }
.nfq-theme {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--nfq-rouge); margin: 0; line-height: 1.4;
}
.nfq-situation {
  padding: 14px 16px; background: var(--nfq-fond);
  border-left: 3px solid var(--nfq-gris2); border-radius: 0 14px 14px 0;
  display: flex; flex-direction: column; gap: 5px; margin: 0;
}
.nfq-situation-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--nfq-gris2);
}
.nfq-situation-txt { margin: 0; font-size: 16px; line-height: 1.5; color: var(--nfq-texte); text-wrap: pretty; }
.nfq-question {
  margin: 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; letter-spacing: -.02em; font-size: 24px; line-height: 1.22;
  color: var(--nfq-nuit); text-wrap: pretty;
}

/* ── Les 4 propositions ──────────────────────────────────────────────── */
.nfq-choix { display: flex; flex-direction: column; gap: 10px; }
.eb-choix-btn {
  display: flex; align-items: center; gap: 14px;
  width: 100%; min-height: 60px; padding: 12px 14px;
  text-align: left; background: #fff;
  border: 1.5px solid var(--nfq-bord); border-radius: 14px;
  cursor: pointer; font-family: inherit;
  font-size: 16px; line-height: 1.4; color: var(--nfq-texte);
  transition: border-color .12s, background .12s;
}
.eb-choix-btn:hover:not(:disabled) { border-color: var(--nfq-bleu); background: var(--nfq-fond); }
.eb-choix-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.eb-choix-btn > .nfq-lettre {
  flex: none; width: 34px; height: 34px; border-radius: 9px;
  background: var(--nfq-fond); color: var(--nfq-gris);
  font-size: 16px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.eb-choix-btn > .nfq-txt { flex: 1; }
.eb-choix-btn > .nfq-tag { flex: none; font-size: 12px; font-weight: 700; }

/* Selectionne, pas encore valide */
.eb-choix-btn.is-choisi {
  background: var(--nfq-fond); border-color: var(--nfq-bleu);
  box-shadow: 0 0 0 3px rgba(18, 18, 255, .14);
}
.eb-choix-btn.is-choisi > .nfq-lettre { background: var(--nfq-bleu); color: #fff; }
.eb-choix-btn.is-choisi > .nfq-txt { color: var(--nfq-nuit); font-weight: 600; }

/* Apres validation */
.eb-choix-btn.is-juste { background: var(--nfq-vertf); border-color: var(--nfq-vert); }
.eb-choix-btn.is-juste > .nfq-lettre { background: var(--nfq-vert); color: #fff; }
.eb-choix-btn.is-juste > .nfq-tag { color: var(--nfq-vert); }
.eb-choix-btn.is-faux { background: var(--nfq-rougef); border-color: var(--nfq-rouge); }
.eb-choix-btn.is-faux > .nfq-lettre { background: var(--nfq-rouge); color: #fff; }
.eb-choix-btn.is-faux > .nfq-tag { color: var(--nfq-rouge); }
.eb-choix-btn:disabled { cursor: default; }
.eb-choix-btn.is-eteint { opacity: .55; }

/* ── Correction ──────────────────────────────────────────────────────── */
.nfq-correction {
  padding: 16px; border-radius: 14px;
  background: var(--nfq-fond); border: 1px solid var(--nfq-bord);
  display: flex; flex-direction: column; gap: 8px;
}
.nfq-correction-label {
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--nfq-gris2);
}
.nfq-correction p { margin: 0; font-size: 15px; line-height: 1.55; color: var(--nfq-texte); }
.nfq-correction .nfq-source { font-size: 13px; font-style: italic; color: var(--nfq-gris2); }

/* ── Niveau de confiance ─────────────────────────────────────────────── */
.nfq-confiance {
  padding: 16px; border-radius: 14px;
  background: #fff; border: 1px solid var(--nfq-bord);
}
.nfq-confiance-label {
  display: block; margin-bottom: 9px; font-size: 12px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--nfq-gris2);
}
.nfq-conf-liste { display: flex; gap: 8px; flex-wrap: wrap; }
.eb-conf {
  border: 1px solid var(--nfq-bord); background: #fff; color: var(--nfq-gris);
  border-radius: 999px; padding: 9px 15px; font-size: 14px; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: .12s;
}
.eb-conf:hover { border-color: var(--nfq-bleu); }
.eb-conf:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.eb-conf[data-conf="sur"].is-actif      { background: var(--nfq-vertf);  border-color: var(--nfq-vert);  color: var(--nfq-vert); }
.eb-conf[data-conf="hesitant"].is-actif { background: var(--nfq-ambref); border-color: var(--nfq-ambre); color: var(--nfq-ambre); }
.eb-conf[data-conf="revoir"].is-actif   { background: var(--nfq-rougef); border-color: var(--nfq-rouge); color: var(--nfq-rouge); }

/* ── Barre d'action ──────────────────────────────────────────────────── */
.nfq-actions {
  display: flex; align-items: center; gap: 12px;
  padding-top: 14px; border-top: 1px solid var(--nfq-bord2);
}
.nfq-btn {
  border: 0; border-radius: 12px; font-family: inherit;
  font-size: 16px; font-weight: 700; cursor: pointer; padding: 15px 22px;
}
.nfq-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.nfq-btn--principal { flex: 1; background: var(--nfq-bleu); color: #fff; }
.nfq-btn--principal:disabled { opacity: .4; cursor: default; }
.nfq-btn--fantome {
  background: none; color: var(--nfq-gris2); font-weight: 600;
  font-size: 15px; text-decoration: underline; padding: 15px 4px;
}

/* ── Grille des 40 ───────────────────────────────────────────────────── */
.nfq-grille-wrap {
  padding: 18px 20px 20px; background: #fff;
  border: 1px solid var(--nfq-bord); border-radius: 18px;
  box-shadow: 0 2px 10px rgba(10, 10, 46, .05);
}
.nfq-grille-head { display: flex; flex-direction: column; gap: 3px; margin-bottom: 12px; }
.nfq-grille-titre { font-size: 14px; font-weight: 700; color: var(--nfq-nuit); }
.nfq-grille-sous { font-size: 13px; color: var(--nfq-gris2); }
.nfq-grille { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 6px; }
.nfq-cell {
  /* Pas de min-height ici : combine a aspect-ratio, il imposait une largeur
     minimale de 38px par case, soit 346px pour 8 colonnes dans une colonne qui
     n'en offre que 280. La case s'adapte a la largeur disponible, le carre est
     tenu par aspect-ratio, et la zone tactile reste confortable sur telephone
     ou la grille occupe toute la largeur. */
  aspect-ratio: 1; min-width: 0; padding: 0; border-radius: 9px;
  font-size: 13px; font-weight: 700; font-family: inherit;
  cursor: pointer; border: 1px solid var(--nfq-bord);
  background: #fff; color: var(--nfq-gris2);
}
.nfq-cell:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.nfq-cell.is-juste  { background: var(--nfq-vert);  border-color: var(--nfq-vert);  color: #fff; }
.nfq-cell.is-fausse { background: var(--nfq-rouge); border-color: var(--nfq-rouge); color: #fff; }
.nfq-cell.is-courante { box-shadow: 0 0 0 3px rgba(18, 18, 255, .3); border-color: var(--nfq-bleu); }
.nfq-legende { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 12px; font-size: 12.5px; color: var(--nfq-gris2); }
.nfq-legende span { display: inline-flex; align-items: center; gap: 6px; }
.nfq-legende i { width: 12px; height: 12px; border-radius: 4px; display: inline-block; }
.nfq-legende .l-juste  { background: var(--nfq-vert); }
.nfq-legende .l-fausse { background: var(--nfq-rouge); }
.nfq-legende .l-afaire { background: #fff; border: 1px solid var(--nfq-bord); }

/* ── Resultat ────────────────────────────────────────────────────────── */
.nfq-verdict { border-radius: 20px; padding: 30px 24px; color: #fff; text-align: center; }
.nfq-verdict--ok { background: linear-gradient(135deg, #0f6b35, #18753c); }
.nfq-verdict--ko { background: linear-gradient(135deg, #8f1216, #c9191e); }
.nfq-verdict-sur { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.nfq-verdict-titre {
  margin: 10px 0 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 26px; line-height: 1.15; letter-spacing: -.02em;
}
.nfq-verdict-score {
  margin: 12px 0 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 64px; line-height: .95; letter-spacing: -.04em;
}
.nfq-verdict-score small { font-size: 26px; opacity: .75; font-weight: 700; }
.nfq-verdict-detail { margin: 12px 0 0; font-size: 15px; line-height: 1.5; opacity: .92; }

.nfq-bloc { border: 1px solid var(--nfq-bord); border-radius: 16px; overflow: hidden; background: #fff; }
.nfq-bloc-titre {
  margin: 0; padding: 15px 18px; background: var(--nfq-fond);
  font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--nfq-bleu);
}
.nfq-theme-row { padding: 13px 18px; border-bottom: 1px solid var(--nfq-bord2); }
.nfq-theme-row:last-child { border-bottom: 0; }
.nfq-theme-line { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 15px; }
.nfq-theme-nom { color: var(--nfq-texte); }
.nfq-theme-val { font-weight: 700; font-variant-numeric: tabular-nums; }
.nfq-theme-val.v-ok { color: var(--nfq-vert); }
.nfq-theme-val.v-moyen { color: var(--nfq-ambre); }
.nfq-theme-val.v-ko { color: var(--nfq-rouge); }
.nfq-theme-bar { height: 6px; border-radius: 999px; background: var(--nfq-bord2); margin-top: 8px; overflow: hidden; }
.nfq-theme-bar > i { display: block; height: 100%; border-radius: 999px; }
.nfq-theme-bar > i.v-ok { background: var(--nfq-vert); }
.nfq-theme-bar > i.v-moyen { background: #c8a53a; }
.nfq-theme-bar > i.v-ko { background: var(--nfq-rouge); }

.nfq-plan { border: 1px solid var(--nfq-bord); border-radius: 16px; padding: 18px; background: var(--nfq-fond); }
.nfq-plan-label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nfq-gris2); }
.nfq-plan p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--nfq-texte); }

.nfq-corrige-card { border: 1px solid #f6cfd0; border-radius: 14px; padding: 16px; background: #fff; }
.nfq-corrige-meta { margin: 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nfq-rouge); }
.nfq-corrige-sc { margin: 8px 0 0; font-size: 14px; color: var(--nfq-gris2); line-height: 1.55; }
.nfq-corrige-q { margin: 8px 0 0; font-weight: 700; font-size: 15.5px; line-height: 1.4; color: var(--nfq-nuit); }
.nfq-corrige-b { margin: 8px 0 0; font-size: 14.5px; color: var(--nfq-vert); font-weight: 600; }
.nfq-corrige-e { margin: 6px 0 0; font-size: 14px; color: var(--nfq-gris); line-height: 1.55; }

/* ── Tableau de bord de /entrainement ────────────────────────────────── */
.nfe-next {
  border-radius: 18px; padding: 22px; color: #fff;
  background: linear-gradient(135deg, #161642, #0a0a2e);
}
.nfe-next-label {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; opacity: .8;
  display: flex; align-items: center; gap: 8px;
}
.nfe-next-ic { width: 17px; height: 17px; flex: none; }
.nfe-next-titre {
  margin: 10px 0 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 22px; line-height: 1.25; letter-spacing: -.02em;
}
.nfe-next-sous { margin: 8px 0 0; font-size: 14.5px; line-height: 1.5; color: #c9c9ee; }
.nfe-next-btn {
  display: block; width: 100%; margin-top: 16px; border: 0; border-radius: 12px;
  background: #fff; color: var(--nfq-nuit); padding: 15px; font-family: inherit;
  font-size: 16px; font-weight: 700; cursor: pointer; text-align: center;
}
.nfe-next-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.nfe-next-second {
  display: block; width: 100%; margin-top: 10px; border: 0; background: none;
  color: #c9c9ee; font-family: inherit; font-size: 14.5px; font-weight: 600;
  text-decoration: underline; cursor: pointer; padding: 6px;
}
.nfe-next-second:hover { color: #fff; }
.nfe-next-second:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }

.nfe-action {
  display: flex; align-items: center; gap: 14px;
  width: 100%; text-align: left; padding: 16px 18px; cursor: pointer;
  border: 1px solid var(--nfq-bord); border-radius: 14px; background: #fff;
  font-family: inherit;
}
.nfe-action:hover { border-color: var(--nfq-bleu); }
.nfe-action:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.nfe-action--fort { background: var(--nfq-bleu); border-color: var(--nfq-bleu); color: #fff; }
/* Un reperage visuel a gauche de chaque action : le nombre de questions pour
   l'examen, une fleche circulaire pour le rejeu. Le texte reste seul porteur du
   sens, l'icone n'est qu'un repere. */
.nfe-action-num {
  flex: none; display: grid; place-items: center; width: 46px; height: 46px;
  border-radius: 11px; background: rgba(255, 255, 255, .14); color: #fff;
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 17px;
}
.nfe-action-num--err { background: var(--nfq-rougef); color: var(--nfq-rouge); }
.nfe-action-num svg { width: 22px; height: 22px; }
.nfe-action > span:nth-child(2) { flex: 1; min-width: 0; }
.nfe-action-titre { display: block; font-size: 16px; font-weight: 700; }
.nfe-action-sous { display: block; margin-top: 3px; font-size: 13.5px; color: var(--nfq-gris2); }
.nfe-action--fort .nfe-action-sous { color: #c9c9ee; }
.nfe-badge {
  flex: none; font-size: 13px; font-weight: 700; border-radius: 999px;
  padding: 5px 11px; background: var(--nfq-rougef); color: var(--nfq-rouge);
}

/* Les statistiques se lisent, elles ne se cliquent pas : pas de carte. */
.nfe-stats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--nfq-bord); border-radius: 14px; overflow: hidden; background: #fff;
}
.nfe-stat { padding: 14px 16px; border-right: 1px solid var(--nfq-bord2); border-bottom: 1px solid var(--nfq-bord2); }
.nfe-stat:nth-child(2n) { border-right: 0; }
.nfe-stat:nth-child(n+3) { border-bottom: 0; }
.nfe-stat-val { margin: 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 26px; line-height: 1; color: var(--nfq-nuit); }
.nfe-stat-lab { margin: 5px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--nfq-gris2); }

.nfe-theme-btn {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 3px 13px; align-items: center;
  width: 100%; text-align: left; padding: 14px 16px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--nfq-bord); border-radius: 12px; background: #fff;
}
.nfe-theme-btn:hover { border-color: var(--nfq-bleu); }
.nfe-theme-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.nfe-theme-nom { font-size: 15.5px; font-weight: 700; color: var(--nfq-nuit); }
.nfe-theme-sous { grid-column: 2 / -1; font-size: 13px; color: var(--nfq-gris2); }
.nfe-theme-illu {
  grid-row: 1 / span 2; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 10px;
  background: var(--nfq-fond); border: 1px solid var(--nfq-bord);
  color: var(--nfq-bleu);
}
.nfe-theme-illu svg { width: 22px; height: 22px; }
.nfe-theme-pct { font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; }

.nfe-hist-row { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding: 13px 16px; border-bottom: 1px solid var(--nfq-bord2); font-size: 14.5px; }
.nfe-hist-row:last-child { border-bottom: 0; }
.nfe-hist-nom { color: var(--nfq-texte); }
.nfe-hist-date { display: block; font-size: 12.5px; color: var(--nfq-gris2); margin-top: 2px; }
.nfe-hist-val { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ── Confort de lecture au-dela du telephone ─────────────────────────── */
@media (min-width: 720px) {
  .nfq-illu { width: 68px; height: 68px; border-radius: 14px; }
  .nfq-icone { width: 36px; height: 36px; }
  .nfq-question { font-size: 27px; }
  .nfq-body { padding: 22px 24px 24px; }
  .nfe-stats { grid-template-columns: repeat(4, 1fr); }
  .nfe-stat { border-bottom: 0; }
  .nfe-stat:nth-child(2n) { border-right: 1px solid var(--nfq-bord2); }
  .nfe-stat:last-child { border-right: 0; }
}


/* ── Mise en page des scenes ─────────────────────────────────────────────
   Telephone : une colonne, la grille passe sous la question.
   A partir de 1000 px : DEUX colonnes. La question a gauche, la grille de
   progression collee a droite. L'espace lateral, qui etait perdu, sert enfin,
   et l'examen tient sans defiler sur un ecran d'ordinateur. */
.nfq-scene {
  max-width: 620px; margin: 0 auto; padding: 18px 16px 8px;
  display: grid; gap: 16px; align-items: start;
}
.nfq-scene--res { max-width: 620px; }
.nfq-res-cols { display: grid; gap: 16px; }
.nfq-res-side { display: grid; gap: 16px; align-content: start; }
.nfq-res-actions { display: grid; gap: 10px; }
.nfq-res-actions .nfq-btn { width: 100%; }
.nfq-btn--clair { background: #fff; border: 1px solid var(--nfq-bord); color: var(--nfq-bleu); }
.nfq-corrige { display: grid; gap: 12px; }

.nfq-capture {
  border-radius: 18px; padding: 22px;
  background: linear-gradient(135deg, #161642, #0a0a2e); color: #fff;
}
.nfq-capture h2 {
  margin: 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 21px; line-height: 1.2; letter-spacing: -.02em;
}
.nfq-capture > p { margin: 10px 0 0; font-size: 14.5px; line-height: 1.55; color: #c9c9ee; }
.nfq-capture strong { color: #fff; }
.nfq-capture form { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.nfq-capture input {
  flex: 1; min-width: 190px; border: 0; border-radius: 12px;
  padding: 15px 16px; font-size: 16px; font-family: inherit;
}
.nfq-capture button {
  border: 0; border-radius: 12px; background: #c8a53a; color: var(--nfq-nuit);
  padding: 15px 20px; font-size: 16px; font-weight: 800; cursor: pointer;
  white-space: nowrap; font-family: inherit;
}
.nfq-capture-msg { margin: 10px 0 0; font-size: 13.5px; font-weight: 600; }

@media (min-width: 1000px) {
  /* La carte occupe la colonne de gauche sur toute la hauteur ; la correction,
     l'auto-evaluation et la grille s'empilent a droite. Sans cela, la
     correction poussait le bouton « Question suivante » sous la ligne de
     flottaison et il fallait defiler apres CHAQUE reponse. */
  .nfq-scene {
    max-width: 1180px; padding: 24px 24px 8px;
    grid-template-columns: minmax(0, 1fr) 380px; gap: 22px;
    grid-template-rows: auto auto 1fr;
  }
  /* La GRILLE en haut : elle est toujours la, sa hauteur ne bouge pas. La
     correction et l'auto-evaluation, qui apparaissent et disparaissent, se
     placent dessous : rien ne saute quand on valide une reponse.
     Sur telephone l'ordre du document s'applique (carte, correction,
     confiance, grille), qui est le bon ordre de lecture. */
  .nfq-scene > .nfq-card { grid-column: 1; grid-row: 1 / -1; align-self: start; }
  .nfq-scene > .nfq-grille-wrap { grid-column: 2; grid-row: 1; }
  .nfq-scene > #eb-correction { grid-column: 2; grid-row: 2; }
  .nfq-scene > #eb-confiance  { grid-column: 2; grid-row: 3; }
  /* Plus de sticky : la colonne de droite change de contenu a chaque reponse,
     la figer donnerait un saut visuel a chaque question. */
  /* Le resultat garde son bandeau pleine largeur, puis passe en deux colonnes. */
  .nfq-scene--res { max-width: 1120px; grid-template-columns: minmax(0, 1fr); }
  .nfq-res-cols { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; }
  /* Fin de seance : le bilan par theme est masque, la colonne restante ne doit
     pas rester coincee a 380 px avec un grand vide a sa gauche. */
  .nfq-res-cols:has(#eb-themes-bloc[hidden]) {
    grid-template-columns: minmax(0, 1fr);
    max-width: 620px; margin-inline: auto;
  }
  .nfq-corrige { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}


/* ── Mode examen : on efface le decor ────────────────────────────────────
   Quarante-cinq minutes d'epreuve ne se passent pas au milieu d'un menu, d'un
   fil de parcours et de trois blocs de texte. Tout ce qui porte
   data-nfq-hors-examen s'efface le temps de l'epreuve, et revient a la fin.
   Aucun bloc pilote par `hidden` n'est concerne : ce sont d'autres elements. */
body.nfq-en-examen [data-nfq-hors-examen] { display: none !important; }
/* Le menu RESTE pendant l'epreuve : on ne prive pas quelqu'un de la navigation
   du site. Seul le pied de page s'efface, il n'a rien a faire sous une question
   chronometree et il rallonge la page pour rien. */
body.nfq-en-examen > footer,
body.nfq-en-examen footer[data-pagefind-ignore] { display: none !important; }
/* Les barres collantes de promotion, guide et SMS, disparaissent aussi. Elles
   sont utiles sur une page de lecture ; pendant une epreuve chronometree elles
   ne sont qu'une sortie accidentelle a portee de pouce. */
body.nfq-en-examen [id^="nf-guide-sticky"],
body.nfq-en-examen [id^="nf-sms-sticky"] { display: none !important; }
body.nfq-en-examen .nfq-scene { padding-top: 20px; }


/* ── Plein ecran ─────────────────────────────────────────────────────────
   Bouton, pas comportement impose : le menu reste par defaut, et c'est la
   personne qui decide de le faire disparaitre pour se concentrer. Le mode
   utilise l'API Fullscreen quand elle est disponible, et retombe sinon sur un
   simple masquage, ce qui donne le meme resultat visuel. */
body.nfq-plein > header,
body.nfq-plein > footer,
body.nfq-plein header[data-pagefind-ignore],
body.nfq-plein footer[data-pagefind-ignore],
body.nfq-plein [data-nfq-hors-examen],
body.nfq-plein [id^="nf-guide-sticky"],
body.nfq-plein [id^="nf-sms-sticky"] { display: none !important; }
body.nfq-plein .nfq-scene { padding-top: 14px; }
body.nfq-plein { background: #fbfbff; }

/* ── Ecran de choix de /examen-blanc-gratuit ─────────────────────────────
   Deux colonnes sur ordinateur : le texte et les DEUX boutons de lancement a
   gauche, l'illustration et la repartition officielle a droite. Les boutons
   sont ainsi visibles sans defiler, ce qui n'etait pas le cas quand l'image
   les repoussait sous la ligne de flottaison. */
.ebc { max-width: 1120px; margin: 0 auto; padding: 26px 20px 8px; display: grid; gap: 26px; }
.ebc-badge {
  display: inline-flex; align-items: center; gap: 8px; margin: 0;
  background: var(--nfq-bord); color: var(--nfq-bleu); border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700;
}
.ebc-pastille {
  width: 7px; height: 7px; border-radius: 999px; background: var(--nfq-vert);
  box-shadow: 0 0 0 3px rgba(24, 117, 60, .18);
}
.ebc-h1 {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800;
  font-size: clamp(30px, 5vw, 40px); line-height: 1.05; letter-spacing: -.03em;
  margin: 16px 0 0; text-wrap: pretty; color: var(--nfq-nuit);
}
.ebc-h1 span { color: var(--nfq-vif); }
.ebc-intro { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: var(--nfq-gris); text-wrap: pretty; }
.ebc-intro strong { color: var(--nfq-nuit); }
.ebc-note { margin: 14px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--nfq-gris2); }

.ebc-boutons { display: grid; gap: 10px; margin-top: 22px; }
.ebc-btn {
  display: grid; grid-template-columns: 56px 1fr auto; align-items: center; gap: 16px;
  width: 100%; text-align: left; padding: 18px; cursor: pointer; font-family: inherit;
  border: 1px solid var(--nfq-bord); border-radius: 16px; background: #fff;
  transition: transform .14s, box-shadow .14s, border-color .14s;
}
.ebc-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(10, 10, 46, .12); border-color: var(--nfq-bleu); }
.ebc-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
.ebc-btn--fort { background: var(--nfq-nuit); border-color: var(--nfq-nuit); color: #fff; padding: 20px 18px; box-shadow: 0 6px 18px rgba(10, 10, 46, .22); }
.ebc-btn-num {
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 12px;
  background: var(--nfq-fond); color: var(--nfq-bleu);
  font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 800; font-size: 20px;
}
.ebc-btn--fort .ebc-btn-num { background: rgba(255, 255, 255, .12); color: #fff; }
.ebc-btn-titre { display: block; font-family: 'Bricolage Grotesque', system-ui, sans-serif; font-weight: 700; font-size: 18px; }
.ebc-btn--fort .ebc-btn-titre { font-size: 19px; }
.ebc-btn-sous { display: block; margin-top: 3px; font-size: 13.5px; color: var(--nfq-gris2); }
.ebc-btn--fort .ebc-btn-sous { color: #c9c9ee; }
.ebc-btn-fleche { font-size: 20px; font-weight: 700; color: var(--nfq-vif); }
.ebc-btn--fort .ebc-btn-fleche { color: #fff; }

.ebc-cote { display: grid; gap: 14px; align-content: start; }
.ebc-image { border-radius: 18px; overflow: hidden; border: 1px solid var(--nfq-bord); background: var(--nfq-fond); }
.ebc-image img { display: block; width: 100%; height: 200px; object-fit: cover; }
.ebc-repartition { border: 1px solid var(--nfq-bord); border-radius: 14px; padding: 16px 18px; background: #fbfbff; }
.ebc-rep-titre { margin: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--nfq-gris2); }
.ebc-rep-ligne { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; font-size: 13.5px; padding: 3px 0; }
.ebc-rep-ligne span { color: var(--nfq-gris); }
.ebc-rep-ligne b { color: var(--nfq-nuit); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ebc-rep-source { margin: 12px 0 0; font-size: 12.5px; color: var(--nfq-gris2); line-height: 1.5; }

@media (min-width: 1000px) {
  .ebc { grid-template-columns: minmax(0, 1fr) 380px; gap: 34px; align-items: start; padding-top: 32px; }
  .ebc-image img { height: 230px; }
}

/* ── Page /entrainement ──────────────────────────────────────────────────
   La personne a paye : aucune barre de promotion ne doit s'afficher ici, ni
   pendant l'examen ni sur le tableau de bord. On lui a deja vendu. */
body:has(.ent) [id^="nf-guide-sticky"],
body:has(.ent) [id^="nf-sms-sticky"] { display: none !important; }

.ent { font-family: 'DM Sans', system-ui, sans-serif; color: var(--nfq-texte); }

.ent-load { max-width: 640px; margin: 0 auto; padding: 70px 20px; text-align: center; color: var(--nfq-gris2); }
.ent-load p { margin: 16px 0 0; font-size: 15px; }
.ent-spin {
  display: inline-block; width: 34px; height: 34px; border-radius: 999px;
  border: 3px solid var(--nfq-bord); border-top-color: var(--nfq-bleu);
  animation: ent-spin .9s linear infinite;
}
@keyframes ent-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ent-spin { animation-duration: 3s; } }

.ent-ko { max-width: 560px; margin: 0 auto; padding: 46px 20px; }
.ent-ko-ic {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px;
  background: var(--nfq-ambref); font-size: 20px;
}
.ent-ko h1 {
  margin: 18px 0 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -.03em; color: var(--nfq-nuit);
}
.ent-ko > p { margin: 14px 0 0; font-size: 16px; line-height: 1.6; color: var(--nfq-gris); }
/* Moment de vente : une seule action pleine. L'or ne sert qu'en filet et en
   libelle, jamais en bouton, pour ne pas crier. */
.ent-ko-offre {
  margin-top: 26px; border: 1px solid var(--nfq-bord); border-top: 3px solid #c8a53a;
  border-radius: 14px; padding: 18px; background: #fbfbff;
}
.ent-ko-eyebrow { margin: 0 0 8px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #8a6116; }
.ent-ko-offre p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--nfq-gris); }
.ent-ko-btn {
  display: block; margin-top: 16px; border-radius: 12px; background: var(--nfq-bleu);
  color: #fff; padding: 15px; font-size: 16px; font-weight: 700; text-decoration: none; text-align: center;
}
.ent-ko-second { display: block; margin-top: 14px; text-align: center; font-size: 15px; color: var(--nfq-bleu); }

.ent-board { max-width: 720px; margin: 0 auto; padding: 26px 18px 8px; display: grid; gap: 22px; }
.ent-head { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.ent-head h1 {
  margin: 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 30px; line-height: 1.08; letter-spacing: -.03em; color: var(--nfq-nuit);
}
.ent-echeance {
  margin: 0; font-size: 13px; font-weight: 600; color: var(--nfq-vert);
  background: var(--nfq-vertf); border-radius: 999px; padding: 5px 12px;
}
.ent-echeance.is-court { color: var(--nfq-ambre); background: var(--nfq-ambref); }
.ent-actions { display: grid; gap: 10px; }
.ent-h2 {
  margin: 6px 0 -8px; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--nfq-nuit);
}
.ent-themes { display: grid; gap: 8px; }
.ent-pied { margin: 6px 0 44px; font-size: 13px; color: var(--nfq-gris2); }
.ent-pied a { color: var(--nfq-bleu); }

@media (min-width: 900px) {
  .ent-board { max-width: 880px; }
}


/* ── Les PDF achetes, depuis l'espace ────────────────────────────────────
 * Promesse produit : les PDF ne dependent pas de l'abonnement. Elle etait
 * ecrite en petit en pied de page ; personne ne lit un pied de page. Ici
 * c'est une ligne avec son bouton, presente aussi sur l'ecran d'acces
 * perime, ou elle rassure le plus. */
.ent-pdf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap;
  margin: 22px 0 10px; padding: 16px 18px;
  background: var(--nfq-fond); border: 1px solid var(--nfq-bord);
  border-radius: 14px;
}
.ent-pdf-ic {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 11px;
  background: #fff; border: 1px solid var(--nfq-bord); color: var(--nfq-bleu);
}
.ent-pdf-ic svg { width: 22px; height: 22px; }
.ent-pdf-txt { flex: 1 1 260px; }
.ent-pdf-titre { margin: 0; font-weight: 800; font-size: 15px; color: var(--nfq-nuit); }
.ent-pdf-sous  { margin: 3px 0 0; font-size: 13.5px; color: #5b5b7a; line-height: 1.5; }
.ent-pdf-btn {
  display: inline-block; padding: 11px 20px; border-radius: 10px;
  background: var(--nfq-bleu); color: #fff;
  font-weight: 800; font-size: 14.5px; text-decoration: none; white-space: nowrap;
}
.ent-pdf-btn:hover { background: #1212b0; }
.ent-pdf-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 2px; }
/* Sur l'ecran d'acces perime le bouton est seul, centre sous le texte. */
.ent-ko .ent-pdf-btn { margin-top: 14px; }
@media (max-width: 620px) {
  .ent-pdf { flex-direction: column; align-items: stretch; text-align: left; }
  .ent-pdf-btn { text-align: center; }
}


/* ── Calendrier de revision ──────────────────────────────────────────────
 * La grille rend visible ce qu'un compteur ne montre pas : le chemin deja
 * parcouru et celui qui reste. C'est elle qui donne envie de ne pas casser
 * la serie, bien plus que le score. */
.ent-cal {
  margin: 26px 0 8px; padding: 20px;
  background: #fff; border: 1px solid var(--nfq-bord); border-radius: 16px;
}
.ent-cal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; margin-bottom: 16px;
}
.ent-cal-titre { margin: 0; font-size: 18px; font-weight: 800; color: var(--nfq-nuit); }
.ent-cal-sous  { margin: 3px 0 0; font-size: 13.5px; color: #5b5b7a; }
.ent-cal-compte {
  margin: 0; padding: 5px 12px; border-radius: 999px; white-space: nowrap;
  background: var(--nfq-fond); color: var(--nfq-bleu);
  font-size: 12.5px; font-weight: 800;
}

/* La seance du jour : un seul bouton, jamais deux actions concurrentes. */
.ent-cal-jour {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
  padding: 16px 18px; border-radius: 13px;
  background: var(--nfq-nuit); color: #fff;
}
.ent-cal-jour-titre { margin: 0; font-size: 16px; font-weight: 800; }
.ent-cal-jour-sous  { margin: 3px 0 0; font-size: 13.5px; color: #c9c9ee; }
.ent-cal-btn {
  padding: 12px 22px; border: 0; border-radius: 10px;
  background: #fff; color: var(--nfq-bleu);
  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
  white-space: nowrap;
}
.ent-cal-btn:hover:not(:disabled) { background: #eaeaff; }
.ent-cal-btn:disabled { background: rgba(255,255,255,.16); color: #c9c9ee; cursor: default; }
.ent-cal-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 3px; }

/* Une case par seance. auto-fill plutot qu'un nombre fixe de colonnes : la
 * grille compte 36 cases, elle doit tenir sur un telephone comme sur un
 * ecran large sans jamais deborder. */
.ent-cal-grille {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr));
  gap: 7px; margin-top: 16px;
}
.ent-cal-case {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 1; border-radius: 9px;
  background: #f2f2f7; border: 1px solid #e3e3fd;
  color: #9a9ab5; font-size: 13px; font-weight: 700;
}
.ent-cal-case.is-faite {
  background: var(--nfq-vertf); border-color: #9fdfba; color: var(--nfq-vert);
}
.ent-cal-case.is-active {
  background: var(--nfq-bleu); border-color: var(--nfq-bleu);
  color: #fff; box-shadow: 0 0 0 3px color-mix(in srgb, var(--nfq-bleu) 18%, transparent);
}
.ent-cal-note { margin: 14px 0 0; font-size: 12.5px; color: #7a7a95; }

@media (max-width: 560px) {
  .ent-cal-jour { flex-direction: column; align-items: stretch; }
  .ent-cal-btn { width: 100%; }
}


/* ── Fin de seance : le pont vers l'epreuve reelle ───────────────────────
 * Une seance apprend, elle ne dit pas si on passerait l'examen. Ce bloc
 * n'apparait qu'au bout d'une seance de calendrier : apres un examen de 40,
 * il ferait doublon avec « Refaire un examen ». */
.nfq-vers-examen {
  margin: 0 0 14px; padding: 18px;
  background: var(--nfq-nuit); border-radius: 13px; color: #fff;
}
.nfq-vers-examen-titre { margin: 0; font-size: 16px; font-weight: 800; }
.nfq-vers-examen-sous  { margin: 5px 0 14px; font-size: 13.5px; line-height: 1.5; color: #c9c9ee; }
.nfq-vers-examen-btn {
  display: block; width: 100%; padding: 13px 20px; border: 0; border-radius: 10px;
  background: #fff; color: var(--nfq-bleu);
  font-family: inherit; font-size: 15px; font-weight: 800; cursor: pointer;
}
.nfq-vers-examen-btn:hover { background: #eaeaff; }
.nfq-vers-examen-btn:focus-visible { outline: 3px solid var(--nfq-vif); outline-offset: 3px; }

/* Verdict d'une seance de calendrier : ni reussite ni echec, un compte rendu.
   Le rouge « ajourne » d'un examen decouragerait quelqu'un qui vient
   d'apprendre dix questions neuves. */
.nfq-verdict--neutre {
  background: var(--nfq-nuit);
  color: #fff;
}
.nfq-verdict--neutre .nfq-verdict-sur,
.nfq-verdict--neutre .nfq-verdict-detail { color: #c9c9ee; }

/* ── Pont vers la plateforme (page gratuite, ecran de resultat) ─────────────
 * Sous la capture d'email, en clair : la capture reste l'action principale
 * (gratuite), l'entrainement est la suite pour qui veut progresser. */
.nfq-suite {
  border: 1px solid var(--nfq-bord); border-left: 4px solid var(--nfq-bleu);
  border-radius: 14px; padding: 16px 18px; background: var(--nfq-fond);
}
.nfq-suite-titre {
  margin: 0; font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-weight: 800; font-size: 17px; line-height: 1.25; letter-spacing: -.01em; color: var(--nfq-nuit);
}
.nfq-suite-sous { margin: 8px 0 0; font-size: 14px; line-height: 1.55; color: var(--nfq-gris); }
.nfq-suite-sous strong { color: var(--nfq-nuit); }
.nfq-suite-btn {
  display: inline-block; margin-top: 12px; border: 2px solid var(--nfq-bleu); border-radius: 10px;
  padding: 10px 16px; font-size: 14.5px; font-weight: 700; color: var(--nfq-bleu);
  text-decoration: none; background: #fff;
}

/* Compteur d'examens passes (preuve sociale, page gratuite) */
.ebc-compteur { margin: 10px 0 0; font-size: 13.5px; color: var(--nfq-gris2); }
.ebc-compteur strong { color: var(--nfq-bleu); font-weight: 800; }

/* Echeance + prolongation, en-tete de /entrainement */
.ent-head-droite { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ent-prolonger {
  font-size: 13px; font-weight: 700; color: var(--nfq-bleu); text-decoration: none;
  border: 1.5px solid var(--nfq-bleu); border-radius: 999px; padding: 4px 12px; background: #fff;
}
.ent-prolonger:hover { background: var(--nfq-fond); }