/* AlmostCanadian : système visuel « Pin » (almostcanadian-design/DESIGN.md).
   Les valeurs viennent des maquettes : les changer ici, c'est s'écarter du design. */

@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("/static/fonts/archivo-latin.woff2") format("woff2");
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/static/fonts/jetbrains-mono-latin.woff2") format("woff2");
}

:root {
  --rouge-logo: #C8102E;     /* uniquement « Canadian » dans le logo */
  --vert: #17714A;           /* bouton principal */
  --vert-survol: #125E3D;
  --pin: #0F2A1F;            /* sections sombres, texte sur bouton or */
  --or: #F2B33D;             /* bouton d'achat sur fond sombre, garantie */
  --or-survol: #E6A52E;
  --encre: #111111;
  --texte-2: #4D4A46;
  --texte-3: #3A3733;
  --libelle: #5E5A55;
  --grise: #6E6A65;
  --gris-score: #8C867F;     /* « /20 » : #9C968F dans la maquette, sous 3:1 */
  --fond-clair: #F7F5F2;
  --teinte-verte: #EEF5F0;
  --bordure: #E6E3DF;
  --bordure-2: #DCD8D3;
  --piste: #EFECE8;
  --bon: #1F6B45;
  --bon-fond: #EEF6F1;
  --mauvais: #B3122B;
  --mauvais-fond: #FBEDEE;
  --moyen: #B07A0B;
  --quebec: #0B3D91;
  --quebec-survol: #08307A;
  --quebec-fond: #EAF0FA;
  --quebec-texte: #2B3A55;
  --sur-sombre: #D6D3CE;
  --sur-sombre-2: #B9B4AE;
  --lien-survol: #A50D25;
  --police: Archivo, "Helvetica Neue", Arial, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #FFFFFF;
  color: var(--encre);
  font-family: var(--police);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: var(--encre); text-underline-offset: 0.15em; }
a:hover { color: var(--lien-survol); }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--encre); outline-offset: 2px; }
main:focus, [tabindex="-1"]:focus { outline: none; }
.mono { font-family: var(--mono); }
.petit { font-size: 13px; color: var(--libelle); }
.visuellement-cache {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.evitement {
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: #FFFFFF; padding: 10px 16px; border: 2px solid var(--encre); border-radius: 8px;
}
.evitement:focus { top: 12px; }
.icone { flex: 0 0 auto; }

/* Textes courts sur téléphone (maquette mobile), longs ailleurs. */
.ecran-petit { display: none; }

/* ── Mise en page ─────────────────────────────────────────────────────────── */
.conteneur, .conteneur-texte {
  margin-left: auto; margin-right: auto;
  padding-left: 24px; padding-right: 24px;
}
.conteneur { max-width: 1200px; }
.conteneur-resultat { max-width: 1100px; }
.conteneur-test { max-width: 720px; }
.conteneur-texte { max-width: 820px; }

/* ── En-tête ──────────────────────────────────────────────────────────────── */
.entete { border-bottom: 1px solid var(--bordure); }
.entete-int {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
  gap: 12px 24px; padding-top: 14px; padding-bottom: 14px;
}
.logo { text-decoration: none; font-weight: 800; font-size: 18px; letter-spacing: -0.01em; }
.logo:hover { color: var(--encre); }
.logo span { color: var(--rouge-logo); }
.nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; font-size: 15px; font-weight: 500; }
.nav a { text-decoration: none; padding: 4px 0; }
.nav .nav-bouton { border: 1px solid var(--encre); padding: 9px 15px; border-radius: 8px; }
.entete-droite { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }

/* Sélecteur de langue : les deux langues, celle de la page en pastille pleine. */
.langues {
  display: flex; gap: 2px; margin: 0; padding: 3px; list-style: none;
  border: 1px solid var(--bordure-2); border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: 0.03em; line-height: 1;
}
.langue { display: block; padding: 7px 10px; border-radius: 999px; text-decoration: none; color: var(--libelle); }
a.langue:hover { color: var(--encre); background: var(--fond-clair); }
.langue-active { background: var(--piste); color: var(--encre); }
.entete-lien { font-size: 15px; font-weight: 500; padding: 8px 0; }

/* ── Boutons ──────────────────────────────────────────────────────────────── */
.bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  text-align: center; text-decoration: none; cursor: pointer;
  font-family: inherit; font-size: 17px; font-weight: 600; line-height: 1.3;
  padding: 15px 24px; border-radius: 10px; border: 1px solid transparent;
}
.bouton-grand { font-size: 18px; padding: 18px 28px; }
.bouton-bloc { display: flex; width: 100%; }
.bouton-principal { background: var(--vert); color: #FFFFFF; }
.bouton-principal:hover { background: var(--vert-survol); color: #FFFFFF; }
.bouton-or { background: var(--or); color: var(--pin); font-weight: 700; padding: 17px 24px; }
.bouton-or:hover { background: var(--or-survol); color: var(--pin); }
.bouton-noir { background: var(--encre); color: #FFFFFF; }
.bouton-noir:hover { background: #2E2E2E; color: #FFFFFF; }
.bouton-contour { background: transparent; color: var(--encre); border-color: var(--encre); }
.bouton-contour:hover { background: var(--fond-clair); color: var(--encre); }
.bouton-contour-clair { background: transparent; color: #FFFFFF; border-color: #FFFFFF; }
.bouton-contour-clair:hover { background: rgba(255, 255, 255, 0.08); color: #FFFFFF; }
.bouton-quebec { background: var(--quebec); color: #FFFFFF; }
.bouton-quebec:hover { background: var(--quebec-survol); color: #FFFFFF; }
.form-achat { margin: 0; }
/* Seconde offre : un lien souligné, pas un second bouton. */
.bouton.bouton-lien {
  display: inline; padding: 6px 0; border: 0; border-radius: 0; background: none;
  color: inherit; font-size: 15px; font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em;
}
.bouton.bouton-lien:hover { color: var(--lien-survol); }
.option-3-mois { margin-top: 12px; text-align: center; font-size: 14px; color: var(--texte-2); }
.option-3-mois .form-achat { display: inline; }
.option-3-mois span { display: block; }
.option-3-mois-sombre { color: var(--sur-sombre-2); }
.option-3-mois-sombre .bouton-lien { color: #FFFFFF; }
.option-3-mois-sombre .bouton.bouton-lien:hover { color: var(--or); }
.bande-offre-actions .option-3-mois { margin-top: 0; text-align: left; }
.compte-prolonger { display: flex; flex-wrap: wrap; gap: 10px; }
.lien-simple { font-size: 15px; font-weight: 500; }

/* ── Carte du quiz ────────────────────────────────────────────────────────── */
.carte-quiz { border: 1px solid var(--bordure-2); border-radius: 16px; padding: 28px; background: #FFFFFF; }
.quiz-entete {
  display: flex; justify-content: space-between; gap: 12px;
  font-family: var(--mono); font-size: 13px; color: var(--libelle); margin-bottom: 10px;
}
.quiz-progres { height: 4px; background: var(--piste); border-radius: 2px; margin-bottom: 22px; }
.quiz-progres span { display: block; height: 4px; background: var(--encre); border-radius: 2px; }
.quiz-question { margin: 0 0 18px; font-size: 24px; line-height: 1.3; font-weight: 600; }
.quiz-choix { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.choix {
  width: 100%; display: flex; gap: 14px; align-items: center; text-align: left;
  font-family: inherit; font-size: 17px; line-height: 1.4; color: var(--encre);
  background: #FFFFFF; border: 1px solid var(--bordure-2); border-radius: 10px; padding: 13px 16px;
}
button.choix { cursor: pointer; }
button.choix:not(:disabled):hover { border-color: var(--encre); }
button.choix:disabled { cursor: default; opacity: 1; }
.choix .lettre { flex: 0 0 auto; font-family: var(--mono); font-size: 14px; color: var(--libelle); }
.choix .libelle { flex: 1 1 auto; min-width: 0; }
.choix .etat { flex: 0 0 auto; font-size: 14px; }
.choix.est-bonne { font-weight: 600; background: var(--bon-fond); border: 2px solid var(--bon); padding: 12px 15px; }
.choix.est-bonne .lettre, .choix.est-bonne .etat { color: var(--bon); }
.choix.est-mauvaise { font-weight: 600; background: var(--mauvais-fond); border: 2px solid var(--mauvais); padding: 12px 15px; }
.choix.est-mauvaise .lettre, .choix.est-mauvaise .etat { color: var(--mauvais); }
.choix.est-grisee, .choix.est-grisee .lettre { color: var(--grise); }
.choix.est-grisee { border-color: var(--piste); }
.quiz-retour {
  margin-top: 18px; background: var(--fond-clair); border-radius: 10px;
  padding: 14px 16px; font-size: 15px; color: var(--texte-3);
}
.quiz-retour .ok { color: var(--bon); }
.quiz-retour .ko { color: var(--mauvais); }
.quiz-reference { display: block; margin-top: 8px; font-size: 14px; color: var(--libelle); }
.quiz-suivante { margin-top: 14px; padding: 15px 20px; }
.quiz-aide { margin: 18px 0 0; font-size: 15px; color: var(--libelle); }
.quiz-alerte { margin-top: 12px; font-size: 15px; font-weight: 500; color: var(--mauvais); }
.quiz-form[aria-busy="true"] .choix { cursor: progress; }

/* ── Accueil ──────────────────────────────────────────────────────────────── */
.heros { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; padding-top: 64px; padding-bottom: 64px; }
.heros-texte { flex: 1 1 500px; min-width: 0; }
.heros h1 { margin: 0 0 20px; font-size: clamp(38px, 5vw, 60px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.souligne-or {
  text-decoration: underline; text-decoration-color: var(--or);
  text-decoration-thickness: 0.14em; text-underline-offset: 0.12em;
}
.heros-intro { margin: 0 0 28px; font-size: 20px; color: var(--texte-2); max-width: 540px; }
.heros-action { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; }
.heros-note { font-size: 15px; color: var(--texte-2); }
.heros-quiz { flex: 1 1 420px; min-width: 0; }

.bandeau-confiance { background: var(--teinte-verte); border-top: 1px solid var(--bordure); border-bottom: 1px solid var(--bordure); }
.bandeau-confiance ul {
  list-style: none; display: flex; flex-wrap: wrap; gap: 10px 36px;
  padding-top: 18px; padding-bottom: 18px; font-size: 15px; font-weight: 500;
}
.bandeau-confiance li { display: flex; gap: 8px; align-items: center; }

.section-intro { padding-top: 104px; padding-bottom: 40px; }
.section-intro h2, .titre-section {
  font-size: clamp(32px, 4vw, 48px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em;
}
.section-intro h2 { margin: 0 0 16px; max-width: 760px; }
.section-intro p { font-size: 19px; color: var(--texte-2); max-width: 640px; }

.apercus { display: flex; flex-wrap: wrap; gap: 32px; padding-top: 32px; padding-bottom: 104px; }
.carte { border: 1px solid var(--bordure); border-radius: 16px; padding: 28px; }
.carte-scores { flex: 1 1 520px; min-width: 0; }
.carte-plan { flex: 1 1 420px; min-width: 0; }
.carte h3 { margin: 0 0 4px; font-size: 20px; font-weight: 600; }
.carte-sous-titre { margin: 0 0 22px; font-size: 15px; color: var(--libelle); }
.carte-plan-tete { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 18px; }
.carte-plan-tete h3 { margin: 0; }
.plan-apercu { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.plan-apercu li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 10px; background: var(--fond-clair); }
.plan-apercu .plan-aujourdhui { background: transparent; border: 2px solid var(--encre); }
.plan-apercu .plan-fait span:last-child { color: var(--libelle); text-decoration: line-through; }
.case {
  flex: 0 0 auto; width: 18px; height: 18px; margin-top: 3px;
  border: 1.5px solid #767676; border-radius: 3px; background: #FFFFFF;
}
.case-cochee {
  border-color: var(--bon);
  background: var(--bon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E") center / 13px no-repeat;
}

/* Barres de score : 8 px, vert ≥ 80 %, ambre 50-79 %, rouge < 50 %. */
.barres { display: flex; flex-direction: column; gap: 16px; font-size: 15px; }
.barre-tete { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.barre-tete .mono { font-family: var(--mono); }
.barre { height: 8px; background: var(--piste); border-radius: 4px; }
.barre span { display: block; height: 8px; border-radius: 4px; }
.barre-bon { background: var(--bon); }
.barre-moyen { background: var(--moyen); }
.barre-faible { background: var(--mauvais); }

/* Prix (fond pin foncé) */
.section-prix { background: var(--pin); color: #FFFFFF; }
.section-prix-int { padding-top: 104px; padding-bottom: 104px; }
.section-prix .titre-section { margin: 0 0 12px; }
.section-prix-intro { margin: 0 0 48px; font-size: 19px; color: var(--sur-sombre); max-width: 600px; }
.section-prix :focus-visible, .offre :focus-visible { outline-color: #FFFFFF; }
.section-prix .offre-complete :focus-visible { outline-color: var(--encre); }
.offres { display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.offre-gratuite, .offre-complete { border-radius: 16px; padding: 32px; display: flex; flex-direction: column; }
.offre-gratuite { flex: 1 1 340px; border: 1px solid rgba(255, 255, 255, 0.22); }
.offre-complete { flex: 1 1 420px; background: #FFFFFF; color: var(--encre); }
.offre-gratuite h3, .offre-complete h3 { margin: 0 0 6px; font-size: 22px; font-weight: 600; }
.offre-montant { margin: 0 0 24px; font-size: 44px; font-weight: 800; }
.offre-montant-grand { font-size: 44px; font-weight: 800; }
.offre-prix { margin: 0 0 24px; }
.prix-details { font-size: 17px; color: var(--texte-2); }
.offre-gratuite ul, .offre-complete ul { padding-left: 20px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.offre-gratuite ul { margin: 0 0 32px; color: var(--sur-sombre); }
.offre-complete ul { margin: 0 0 28px; color: var(--texte-3); }
.offre-complete .bouton { padding: 17px 24px; }
.offre-note { margin: 12px 0 0; text-align: center; font-size: 14px; color: var(--texte-2); }
.garantie {
  margin-top: 24px; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 16px;
  padding: 24px 28px; display: flex; flex-wrap: wrap; gap: 12px 20px; align-items: center;
}
.garantie p { flex: 1 1 400px; color: var(--sur-sombre); }
.garantie strong { color: var(--or); }
.lien-clair { color: #FFFFFF; }
.lien-clair:hover { color: var(--or); }

.faq { padding-top: 96px; padding-bottom: 104px; }
.faq h2, .section-quebec h2, .section-chapitres h2 {
  font-size: clamp(30px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em;
}
.faq h2 { margin: 0 0 28px; }
.faq-item { border-top: 1px solid var(--bordure); padding: 22px 0; }
.faq-item:last-child { border-bottom: 1px solid var(--bordure); }
.faq-item h3 { margin: 0 0 6px; font-size: 19px; font-weight: 600; }
.faq-item p { color: var(--texte-2); }

.section-quebec { background: var(--quebec-fond); }
.section-quebec-int {
  padding-top: 80px; padding-bottom: 80px; display: flex; flex-wrap: wrap;
  gap: 32px 64px; align-items: flex-end; justify-content: space-between;
}
.section-quebec-texte { flex: 1 1 520px; min-width: 0; }
.section-quebec h2 { margin: 0 0 16px; color: var(--quebec); }
.section-quebec p { font-size: 19px; color: var(--quebec-texte); max-width: 620px; }
.section-quebec .bouton { flex: 0 0 auto; padding: 17px 28px; }

.section-chapitres { padding-top: 96px; padding-bottom: 96px; }
.section-chapitres h2 { margin: 0 0 36px; }
.chapitres-colonnes { display: flex; flex-wrap: wrap; column-gap: 48px; }
.liste-chapitres { flex: 1 1 420px; margin: 0; padding: 0; list-style: none; font-size: 19px; font-weight: 500; }
.liste-chapitres li { border-top: 1px solid var(--encre); }
.liste-chapitres li:last-child { border-bottom: 1px solid var(--encre); }
.liste-chapitres a { display: block; padding: 12px 0; text-decoration: none; }

/* ── Pied de page ─────────────────────────────────────────────────────────── */
.pied { border-top: 1px solid var(--bordure); }
.pied-int {
  padding-top: 28px; padding-bottom: 28px; display: flex; flex-wrap: wrap; gap: 16px;
  justify-content: space-between; font-size: 14px; color: var(--libelle);
}
.pied-liens { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }

/* ── Écran de test ────────────────────────────────────────────────────────── */
.page-test { padding-top: 40px; padding-bottom: 72px; }

/* ── Résultat ─────────────────────────────────────────────────────────────── */
.resultat-haut { padding-top: 64px; padding-bottom: 40px; }
.resultat-tete { display: flex; flex-wrap: wrap; gap: 24px 56px; align-items: flex-end; }
.resultat-score { flex: 0 0 auto; }
.libelle-score { margin: 0 0 4px; font-family: var(--mono); font-size: 14px; color: var(--libelle); }
.score-geant { margin: 0; font-size: clamp(96px, 12vw, 152px); line-height: 0.85; font-weight: 800; letter-spacing: -0.05em; }
.score-reussi { color: var(--bon); }
.score-sur { color: var(--gris-score); }
.resultat-message { flex: 1 1 380px; min-width: 0; }
.resultat-message h1 { margin: 0 0 10px; font-size: clamp(30px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.resultat-message p { font-size: 19px; color: var(--texte-2); max-width: 520px; }
.resultat-corps { padding-top: 24px; padding-bottom: 72px; display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }
.resultat-chapitres { flex: 1 1 520px; min-width: 0; }
.resultat-chapitres h2, .resultat-suite h2 { margin: 0 0 22px; font-size: 20px; font-weight: 600; }
.verrou { position: relative; }
.verrou-flou { filter: blur(5px); user-select: none; pointer-events: none; }
.verrou-centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.pastille {
  display: flex; align-items: center; gap: 8px; background: #FFFFFF; border: 1px solid var(--bordure-2);
  border-radius: 999px; padding: 8px 16px; font-size: 14px; font-weight: 500;
}
.lien-correction { display: inline-block; margin-top: 24px; font-size: 15px; font-weight: 500; }
.offre {
  flex: 1 1 380px; min-width: 0; align-self: stretch; background: var(--pin); color: #FFFFFF;
  border-radius: 16px; padding: 32px; display: flex; flex-direction: column;
}
.offre h2 { margin: 0 0 12px; font-size: 30px; line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; }
.offre-texte { margin: 0 0 20px; color: var(--sur-sombre); }
.offre ul { margin: 0 0 28px; padding-left: 20px; color: var(--sur-sombre); display: flex; flex-direction: column; gap: 6px; flex-grow: 1; }
.offre .offre-prix { margin: 0 0 14px; }
.offre .offre-montant { margin: 0; font-size: 36px; font-weight: 800; }
.offre .prix-details { font-size: inherit; color: var(--sur-sombre); }
.offre .offre-note { margin: 12px 0 0; font-size: 14px; color: var(--sur-sombre-2); }
.resultat-suite { flex: 1 1 380px; min-width: 0; }
.resultat-suite > p { color: var(--texte-2); }
.actions-pile { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; }
.actions-pile form { margin: 0; }
.barre-achat { display: none; }

/* ── Correction ───────────────────────────────────────────────────────────── */
.page-correction { padding-top: 48px; padding-bottom: 72px; }
.page-correction h1, .page-erreur h1 {
  font-size: clamp(30px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em;
}
.page-correction h1 { margin: 0 0 8px; }
.correction-score { margin: 0 0 32px; font-family: var(--mono); font-size: 14px; color: var(--libelle); }
.correction-liste { display: flex; flex-direction: column; gap: 24px; }
.correction-liste .quiz-question { font-size: 20px; }
.correction-cachees { margin-top: 24px; color: var(--texte-2); }
.correction-suite { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--bordure); }
.correction-suite p { margin-bottom: 20px; color: var(--texte-2); }

/* ── Formulaires ──────────────────────────────────────────────────────────── */
.page-etroite { max-width: 560px; padding-top: 72px; padding-bottom: 96px; }
.page-etroite h1, .compte-tete h1, .page-plan h1 {
  margin: 0 0 14px; font-size: clamp(30px, 3.5vw, 40px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em;
}
.intro { margin: 0 0 16px; font-size: 19px; color: var(--texte-2); }
.page-etroite p { margin-bottom: 14px; }
.note { font-size: 15px; color: var(--libelle); }
.formulaire { display: flex; flex-direction: column; gap: 18px; margin: 28px 0 20px; }
.champ { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.champ label { font-size: 15px; font-weight: 600; }
.champ input, .champ select {
  width: 100%; font-size: 17px; padding: 13px 14px; background: #FFFFFF;
  border: 1px solid var(--gris-score); border-radius: 10px;
}
.champ input:focus-visible, .champ select:focus-visible { outline: 3px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }
.champ input[aria-invalid="true"] { border-color: var(--mauvais); }
.champ-erreur { margin: 0; font-size: 15px; font-weight: 500; color: var(--mauvais); }
.case-ligne { display: flex; gap: 10px; align-items: flex-start; font-size: 16px; cursor: pointer; }
.case-ligne input { width: 18px; height: 18px; margin: 3px 0 0; accent-color: var(--bon); flex: 0 0 auto; }
.actions-ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; }
.form-ligne { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; }
.form-ligne .champ { flex: 1 1 220px; }
.form-ligne .bouton { padding: 13px 20px; }
.lien-bouton {
  background: none; border: 0; padding: 8px 0; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--encre); text-decoration: underline; text-underline-offset: 0.15em;
}
.lien-bouton:hover { color: var(--lien-survol); }
.bouton-petit { font-size: 15px; padding: 9px 16px; }
.bouton-contour-quebec { background: transparent; color: var(--quebec); border-color: var(--quebec); }
.bouton-contour-quebec:hover { background: var(--quebec-fond); color: var(--quebec); }
.bandeau-succes, .bandeau-info { margin: 0 0 18px; padding: 14px 16px; border-radius: 10px; font-size: 16px; }
.bandeau-succes { background: var(--bon-fond); color: var(--bon); border: 1px solid #CDE3D6; }
.bandeau-info { background: var(--fond-clair); color: var(--texte-3); border: 1px solid var(--bordure); }

/* ── Espace membre ────────────────────────────────────────────────────────── */
.compte-tete { padding-top: 56px; padding-bottom: 28px; }
.compte-acces { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font-size: 18px; }
.compte-acces p { margin: 0; }
.compte-grille { display: flex; flex-wrap: wrap; gap: 24px; padding-bottom: 48px; align-items: flex-start; }
.compte-grille > * { flex: 1 1 440px; min-width: 0; }
.compte-grille h2 { margin: 0 0 18px; font-size: 20px; font-weight: 600; }
.compte-entrainement { display: flex; flex-direction: column; gap: 24px; }
.compte-entrainement form { margin: 0; }
.compte-entrainement .en-cours { margin: 0; }
.en-cours a { font-weight: 600; margin-left: 6px; }
.compte-aide { margin: 8px 0 0; }
.compte-plan .carte-plan-tete h2 { margin: 0; }
.lien-plan { display: inline-block; margin-top: 16px; }
.liste-tests { list-style: none; padding: 0; display: flex; flex-direction: column; }
.liste-tests li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 12px 0; border-top: 1px solid var(--bordure); }
.liste-tests li:last-child { border-bottom: 1px solid var(--bordure); }
.liste-tests a { flex: 1 1 auto; font-weight: 500; }
.compte-pied { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding-bottom: 72px; }
.compte-pied p, .compte-pied form { margin: 0; }

/* ── Plan de révision ─────────────────────────────────────────────────────── */
.page-plan { padding-top: 48px; padding-bottom: 96px; }
.retour { margin: 0 0 18px; font-size: 15px; font-weight: 500; }
.plan-jours { list-style: none; padding: 0; margin: 32px 0; display: flex; flex-direction: column; gap: 10px; }
.plan-jour { padding: 16px 18px; border-radius: 12px; background: var(--fond-clair); }
.plan-jour-actuel { background: #FFFFFF; border: 2px solid var(--encre); padding: 14px 16px; }
.plan-jour-titre { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--libelle); }
.plan-jour-actuel .plan-jour-titre { color: var(--encre); }
.plan-etapes { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.plan-etape { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; }
.plan-etape form { margin: 0; }
.plan-etape.plan-fait .plan-etape-texte { color: var(--libelle); text-decoration: line-through; }
button.case { display: block; cursor: pointer; padding: 0; margin: 0; }
.plan-etape button.case { width: 22px; height: 22px; }
.plan-modifier { margin-top: 24px; border-top: 1px solid var(--bordure); padding-top: 18px; }
.plan-modifier summary { cursor: pointer; font-weight: 500; }

.champ textarea {
  width: 100%; font-size: 17px; padding: 13px 14px; background: #FFFFFF; resize: vertical;
  border: 1px solid var(--gris-score); border-radius: 10px; line-height: 1.5;
}
.champ textarea:focus-visible { outline: 3px solid var(--encre); outline-offset: 1px; border-color: var(--encre); }
.piege { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ── Pages chapitres, Québec, légales ─────────────────────────────────────── */
.page-chapitre { padding-top: 48px; padding-bottom: 72px; }
.page-chapitre h1, .page-legale h1, .quebec-tete h1 {
  margin: 0 0 14px; font-size: clamp(38px, 5vw, 56px); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em;
}
.chapitre-source { margin: 0 0 24px; font-size: 15px; color: var(--libelle); }
.chapitre-section { margin-top: 40px; }
.chapitre-section h2, .chapitre-questions > h2, .page-legale h2 {
  margin: 0 0 14px; font-size: clamp(24px, 3vw, 30px); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em;
}
.chapitre-section ul { padding-left: 22px; display: flex; flex-direction: column; gap: 10px; }
.chapitre-section li { padding-left: 4px; }
.chapitre-section p { margin-top: 14px; color: var(--texte-2); }
.chapitre-questions { margin-top: 56px; }
.questions-libres { display: flex; flex-direction: column; gap: 20px; }
.questions-libres .quiz-question { font-size: 21px; }
.reponse-sans-js { margin-top: 16px; font-size: 15px; }
.reponse-sans-js summary { cursor: pointer; font-weight: 600; }
.reponse-sans-js p { margin-top: 8px; color: var(--texte-3); }
.bande-offre { background: var(--pin); color: #FFFFFF; }
.bande-offre-int { padding-top: 64px; padding-bottom: 64px; }
.bande-offre h2 { margin: 0 0 12px; font-size: clamp(28px, 3.5vw, 36px); line-height: 1.1; font-weight: 800; letter-spacing: -0.02em; }
.bande-offre p { color: var(--sur-sombre); max-width: 600px; }
.bande-offre .offre-prix { margin: 20px 0 18px; }
.bande-offre .offre-montant { margin: 0; font-size: 36px; font-weight: 800; color: #FFFFFF; }
.bande-offre .prix-details { font-size: inherit; color: var(--sur-sombre); }
.bande-offre-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.bande-offre :focus-visible { outline-color: #FFFFFF; }
.lien-clair { color: #FFFFFF; font-weight: 500; }
.lien-clair:hover { color: var(--or); }
.chapitres-voisins { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 40px; padding-bottom: 72px; }
.chapitres-voisins a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; font-weight: 600; font-size: 18px; }
.chapitres-voisins a:hover { text-decoration: underline; }
.chapitres-voisins .voisin-suivant { text-align: right; margin-left: auto; }
.quebec-tete .conteneur-texte { padding-top: 72px; padding-bottom: 56px; }
.quebec-tete h1 { color: var(--quebec); }
.quebec-tete .intro { color: var(--quebec-texte); }
.quebec-tete p { color: var(--quebec-texte); max-width: 640px; }
.page-legale { padding-top: 56px; padding-bottom: 96px; }
.page-legale section { margin-top: 36px; }
.page-legale p { margin-top: 10px; color: var(--texte-3); }

/* ── Erreur ───────────────────────────────────────────────────────────────── */
.page-erreur { padding-top: 96px; padding-bottom: 104px; }
.page-erreur h1 { margin: 0 0 16px; }
.page-erreur p { margin: 0 0 28px; color: var(--texte-2); }

/* ── Tablette : les deux listes de chapitres s'empilent ───────────────────── */
@media (max-width: 935px) {
  .chapitres-colonnes .liste-chapitres:first-child li:last-child { border-bottom: 0; }
}

/* ── Téléphone (maquette resultat-mobile.html, 390 px) ────────────────────── */
@media (max-width: 640px) {
  body { font-size: 16px; line-height: 1.5; }
  .conteneur, .conteneur-texte { padding-left: 16px; padding-right: 16px; }
  .ecran-large { display: none; }
  .ecran-petit { display: inline; }

  .logo { font-size: 17px; }
  .nav { gap: 8px 20px; font-size: 14px; }
  .nav .nav-ancre, .nav .nav-bouton { display: none; }
  .nav a, .entete-lien { padding: 12px 0; font-size: 14px; }
  /* Logo, « Se connecter » et FR/EN sur une seule ligne jusqu'à 360 px de large. */
  .entete-int, .entete-droite { gap: 8px 12px; }
  .langues { letter-spacing: 0.02em; }
  .langue { padding: 9px 8px; }

  .carte, .carte-quiz { border-radius: 14px; padding: 20px; }
  .quiz-question { font-size: 21px; }
  .choix { font-size: 16px; }

  .heros { padding-top: 32px; padding-bottom: 56px; gap: 32px; }
  .heros-intro { font-size: 18px; margin-bottom: 24px; }
  .heros-action .bouton { width: 100%; }
  .section-intro { padding-top: 64px; padding-bottom: 24px; }
  .section-intro p, .section-prix-intro, .section-quebec p { font-size: 17px; }
  .apercus { gap: 24px; padding-top: 24px; padding-bottom: 64px; }
  .section-prix-int { padding-top: 64px; padding-bottom: 64px; }
  .section-prix-intro { margin-bottom: 32px; }
  .offre-gratuite, .offre-complete { padding: 24px 20px; border-radius: 14px; }
  .offre-montant, .offre-montant-grand { font-size: 38px; }
  .garantie { padding: 20px; border-radius: 14px; }
  .garantie p { flex-basis: 100%; }
  .faq { padding-top: 64px; padding-bottom: 64px; }
  .faq-item h3 { font-size: 18px; }
  .section-quebec-int { padding-top: 56px; padding-bottom: 56px; }
  .section-quebec .bouton { width: 100%; }
  .section-chapitres { padding-top: 64px; padding-bottom: 64px; }
  .section-chapitres h2 { margin-bottom: 24px; }
  .liste-chapitres { font-size: 18px; }
  .pied-liens a { display: inline-block; padding: 8px 0; }

  .page-test { padding-top: 16px; padding-bottom: 32px; }

  .resultat-haut { padding-top: 32px; padding-bottom: 24px; }
  .resultat-tete { display: block; }
  .libelle-score { font-size: 13px; }
  .score-geant { font-size: 104px; margin-bottom: 18px; }
  .resultat-message h1 { margin-bottom: 8px; font-size: 28px; line-height: 1.15; }
  .resultat-message p { font-size: 17px; }
  .resultat-corps { padding-top: 0; padding-bottom: 24px; gap: 24px; }
  .resultat-chapitres h2, .resultat-suite h2 { margin-bottom: 18px; font-size: 18px; }
  .resultat-chapitres .barres { gap: 14px; }
  .verrou-flou .barre-ligne:nth-child(n+3) { display: none; }
  .pastille { padding: 7px 14px; font-size: 13px; }
  .pastille .icone { width: 14px; height: 14px; }
  .lien-correction { margin-top: 16px; padding: 10px 0; }
  .offre { border-radius: 14px; padding: 24px 20px; }
  .offre h2 { margin-bottom: 10px; font-size: 26px; }
  .offre-texte { margin-bottom: 16px; }
  .offre ul { gap: 4px; margin-bottom: 22px; }
  .offre .offre-montant { font-size: 32px; }
  .offre .offre-prix { margin-bottom: 12px; }
  .offre .offre-note { margin-top: 10px; font-size: 13px; }

  /* Barre d'achat collante : score à gauche, bouton à droite. Masquée quand
     le bouton de l'offre est à l'écran (un seul bouton d'achat visible). */
  .barre-achat {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    gap: 12px; align-items: center; background: #FFFFFF; border-top: 1px solid var(--bordure);
    padding: 12px 16px calc(20px + env(safe-area-inset-bottom, 0px));
    transition: transform 0.2s ease, visibility 0s linear 0s;
  }
  .barre-achat.cachee { transform: translateY(110%); visibility: hidden; transition: transform 0.2s ease, visibility 0s linear 0.2s; }
  .barre-achat-score { flex: 1 1 auto; font-size: 14px; line-height: 1.3; }
  .barre-achat-score span { color: var(--libelle); }
  .barre-achat .bouton { flex: 0 0 auto; padding: 14px 18px; font-size: 15px; }
  .avec-barre-achat .pied { padding-bottom: 88px; }

  .page-etroite { padding-top: 40px; padding-bottom: 64px; }
  .intro { font-size: 17px; }
  .compte-tete { padding-top: 32px; padding-bottom: 20px; }
  .compte-acces { font-size: 17px; }
  .compte-grille { gap: 16px; }
  .compte-grille > * { flex-basis: 100%; }
  .compte-grille h2 { font-size: 18px; }
  .page-plan { padding-top: 32px; padding-bottom: 64px; }
  /* Sur téléphone, le bouton « Commencer » passe sous le texte de l'étape. */
  .plan-etape { grid-template-columns: 22px minmax(0, 1fr); }
  .plan-etape > form:last-child:not(:first-child) { grid-column: 2; }

  .page-chapitre { padding-top: 32px; padding-bottom: 48px; }
  .chapitre-section { margin-top: 32px; }
  .chapitre-questions { margin-top: 40px; }
  .questions-libres .quiz-question { font-size: 19px; }
  .bande-offre-int { padding-top: 48px; padding-bottom: 48px; }
  .bande-offre-actions .form-achat, .bande-offre-actions > .bouton { width: 100%; }
  .bande-offre-actions .bouton { width: 100%; }
  .quebec-tete .conteneur-texte { padding-top: 40px; padding-bottom: 40px; }
  .page-legale { padding-top: 32px; padding-bottom: 64px; }

  .page-correction { padding-top: 32px; padding-bottom: 48px; }
  .correction-liste { gap: 16px; }
  .correction-liste .quiz-question { font-size: 19px; }
  .page-erreur { padding-top: 56px; padding-bottom: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .barre-achat, .barre-achat.cachee { transition: none; }
}