/* =====================================================================
   Fichly · Formation White Belt Lean — feuille de style commune
   CHARTE V2 (charte graphique Fichly v1.0, octobre 2026 ; Fichly-Hub,
   02-marque/charte-graphique.md), alignée sur la landing landing/site-charte-v2 :
   · Inter Regular et Bold seulement, auto-hébergée (assets/fonts/, licence OFL).
   · Sept couleurs en trois nuances (forte, moyenne, claire), encre #231f20,
     blanc cassé #f9f8f8 et sa texture « points fins » ; jamais d'opacité pour
     éclaircir, jamais de lettres en couleur (sauf les liens, en bleu Fichly) ;
     texte blanc seulement sur le bleu Fichly fort.
   · Trois arrondis : 12 px (blocs), 8 px (dedans), la pilule (titres, étiquettes,
     boutons). Pas d'ombre portée. Écarts en multiples de 8.
   · Ligne des séquences : bleu Fichly, bleu clair, vert, jaune, orange, rouge, violet.
   Les anciens noms de jetons (--navy, --blue, --lane…) sont gardés et reçoivent
   les valeurs de la charte. Choix et écarts : white-belt-1h/CHARTE-V2.md.
   ===================================================================== */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/inter-latin-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/inter-latin-700.woff2") format("woff2"); }

/* Thème clair (par défaut) ; .doc-clair : l’attestation reste un document clair, même en mode sombre */
:root, .doc-clair, .wb-apercu-doc, .wa-doc {
  /* Sept couleurs × trois nuances (forte / moyenne / claire) */
  --bf: #3c4399;  --bf-m: #afbaef; --bf-c: #f0f3ff;   /* bleu Fichly */
  --vf: #80ae66;  --vm: #c3e0b4;   --vc: #edf7e7;     /* vert : à faire */
  --rf: #ea7773;  --rm: #ffc5c1;   --rc: #ffefee;     /* rouge : à éviter */
  --jf: #f3cb46;  --jm: #ffe79e;   --jc: #fbf3dd;     /* jaune : à retenir */
  --bcf: #5ea6dd; --bcm: #b1dcfe;  --bcc: #eaf5ff;    /* bleu clair */
  --of: #e1902c;  --om: #fecb98;   --oc: #fff1e3;     /* orange */
  --vif: #b88bc4; --vim: #e7caee;  --vic: #faeffd;    /* violet */
  /* Ligne des séquences (sans parcours) : les sept couleurs, toutes égales, dans l'ordre */
  --seq: linear-gradient(90deg, var(--bf) 0 14.2857%, var(--bcf) 0 28.5714%, var(--vf) 0 42.8571%, var(--jf) 0 57.1429%, var(--of) 0 71.4286%, var(--rf) 0 85.7143%, var(--vif) 0);
  --texture: url("texture-points-fins.jpg");
  --white: #ffffff;          /* bloc blanc posé dans un encart (données, dessins) */
  --line-strong: #cfcbcb;    /* trait neutre marqué (gris chaud tiré de l'encre) */
  --line-ui: #8a8485;        /* contour d'un champ ou d'une place vide : 3,4:1 sur le blanc cassé (WCAG 1.4.11) */
  --pill: 999px;
  /* Pictos d'étiquette (14 px dans une pastille de 24 px en nuance moyenne, trait encre) */
  --pic-q: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23afbaef'/%3E%3Cg fill='none' stroke='%23231f20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.6 9.6a2.5 2.5 0 1 1 3.4 2.3c-.6.3-1 .8-1 1.5v.3'/%3E%3Cpath d='M12 16.9v.1'/%3E%3C/g%3E%3C/svg%3E");
  --pic-star: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ffe79e'/%3E%3Cg fill='none' stroke='%23231f20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 6.6l1.7 3.4 3.7.5-2.7 2.6.7 3.7L12 15l-3.4 1.8.7-3.7-2.7-2.6 3.7-.5z'/%3E%3C/g%3E%3C/svg%3E");
  --pic-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23c3e0b4'/%3E%3Cg fill='none' stroke='%23231f20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.6 12.4l3 3 5.8-6.4'/%3E%3C/g%3E%3C/svg%3E");
  --pic-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23ffc5c1'/%3E%3Cg fill='none' stroke='%23231f20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8.6 8.6l6.8 6.8M15.4 8.6l-6.8 6.8'/%3E%3C/g%3E%3C/svg%3E");
  --pic-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%23afbaef'/%3E%3Cg fill='none' stroke='%23231f20' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 7.6v8.8M7.6 12h8.8'/%3E%3C/g%3E%3C/svg%3E");

  /* Marque (anciens noms, valeurs de la charte) */
  --navy: #231f20;           /* titres : encre */
  --blue: #3c4399;           /* bleu Fichly : contours au survol, états actifs (jamais pour du texte) */
  /* Couleurs des fiches → les couleurs fortes de la charte (turquoise, brun et citron retirés) */
  --f-rouge: #ea7773; --f-jaune: #f3cb46; --f-bleu-clair: #5ea6dd; --f-turquoise: #5ea6dd; --f-violet: #b88bc4;
  --f-vert: #80ae66; --f-citron: #f3cb46; --f-brun: #e1902c; --f-bleu-logo: #3c4399;
  --on-fill: #231f20;        /* texte posé sur une couleur : toujours l'encre */
  /* Texte posé sur la nuance forte de chaque couleur : blanc seulement sur le bleu Fichly */
  --bf-on: #ffffff; --vf-on: #231f20; --rf-on: #231f20; --jf-on: #231f20; --bcf-on: #231f20; --of-on: #231f20; --vif-on: #231f20;
  /* Couleur du module (forte, moyenne, claire) : chStyle() d'app.js ; bleu Fichly par défaut */
  --module: var(--bf); --on-module: var(--bf-on); --module-m: var(--bf-m); --module-c: var(--bf-c);

  --paper: #f9f8f8;          /* blanc cassé : fond par défaut (texturé sur la page) */
  --paper-img: var(--texture);
  --ink: #231f20;            /* encre : tout le texte et les icônes */
  --brand: #3c4399;          /* liens */
  --brand-fill: #3c4399;     /* aplats bleu Fichly, texte blanc */
  --brand-soft: #f0f3ff;     /* bleu Fichly clair */
  --on-brand: #ffffff;
  --soft: #231f20;           /* plus de texte gris : la hiérarchie passe par la taille et le gras */
  --line: #e3e0e0;           /* trait neutre de 1 px */
  --lane: #ffffff;           /* bloc posé dans un encart */
  --card: #f9f8f8;           /* bloc uni sur le fond texturé */
  --hero: #f0f3ff;
  --header: #f9f8f8;
  --btn: #3c4399; --btn-hover: #3c4399; --btn-ink: #ffffff;
  --dark-bar: #3c4399; --dark-bar-ink: #ffffff; --dark-bar-soft: #ffffff;
  --va: #80ae66;             /* VA, à faire : vert */
  --nvao: #f3cb46;           /* NVAO : jaune */
  --nva: #ea7773;            /* NVA, à éviter : rouge */
  /* États : fond clair ; --ok, --warn, --bad = couleur forte, pour les traits, contours et aplats
     (le texte reste en encre : voir les règles « color »). */
  --ok-bg: #edf7e7;   --ok: #80ae66;
  --warn-bg: #fbf3dd; --warn: #f3cb46;
  --bad-bg: #ffefee;  --bad: #ea7773;
  --clair-bg: #f0f3ff; --resume-bg: #faeffd;
  --focus: #3c4399;
  --shadow: none;
  --shadow-hover: none;
  --band: var(--seq);
  --band-modules: var(--seq);
  --radius: 12px;
  --radius-sm: 8px;
  --title: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  color-scheme: light;
}

/* ---------- Mode sombre ----------
   La charte n'a pas de mode sombre : variante tirée des mêmes jetons (choix : CHARTE-V2.md).
   Fond encre #231f20 et surfaces un peu plus claires (jamais de noir pur), texte blanc cassé #f9f8f8,
   pas de texture ni d'ombre. Les nuances fortes restent (aplats avec texte encre, traits) ; le bleu Fichly
   s'éclaircit pour les traits et les liens ; les nuances moyennes et claires deviennent des teintes foncées
   de la même couleur, pour garder le texte blanc cassé lisible (AA) sur toutes. Les aplats bleu Fichly
   avec texte blanc (boutons, pilules-titres) gardent #3c4399.
   Activé par data-theme="dark" (bouton de l'en-tête, assets/theme.js) ou, sans choix enregistré, par la
   préférence du système. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bf: #8d95e0;  --bf-m: #3f4685; --bf-c: #272a40;
    --vf: #80ae66;  --vm: #3c5a2e;   --vc: #1f2b1b;
    --rf: #ea7773;  --rm: #7a3533;   --rc: #33201f;
    --jf: #f3cb46;  --jm: #6b5716;   --jc: #2e2819;
    --bcf: #5ea6dd; --bcm: #25507a;  --bcc: #1a2733;
    --of: #e1902c;  --om: #714718;   --oc: #2f2418;
    --vif: #b88bc4; --vim: #5a3e62;  --vic: #2b2230;
    --bf-on: #231f20;
    --texture: none; --paper-img: none;
    --white: #353031; --line-strong: #5a5354; --line-ui: #948d8e;
    --navy: #f9f8f8; --blue: #8d95e0; --f-bleu-logo: #8d95e0;
    --paper: #231f20; --ink: #f9f8f8; --brand: #b4bcf2; --brand-fill: #3c4399; --brand-soft: #272a40; --on-brand: #ffffff;
    --soft: #f9f8f8; --line: #443e3f; --lane: #353031; --card: #2c2829; --hero: #272a40; --header: #231f20;
    --ok-bg: #1f2b1b; --warn-bg: #2e2819; --bad-bg: #33201f; --clair-bg: #272a40; --resume-bg: #2b2230;
    --focus: #b4bcf2;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bf: #8d95e0;  --bf-m: #3f4685; --bf-c: #272a40;
  --vf: #80ae66;  --vm: #3c5a2e;   --vc: #1f2b1b;
  --rf: #ea7773;  --rm: #7a3533;   --rc: #33201f;
  --jf: #f3cb46;  --jm: #6b5716;   --jc: #2e2819;
  --bcf: #5ea6dd; --bcm: #25507a;  --bcc: #1a2733;
  --of: #e1902c;  --om: #714718;   --oc: #2f2418;
  --vif: #b88bc4; --vim: #5a3e62;  --vic: #2b2230;
  --bf-on: #231f20;
  --texture: none; --paper-img: none;
  --white: #353031; --line-strong: #5a5354; --line-ui: #948d8e;
  --navy: #f9f8f8; --blue: #8d95e0; --f-bleu-logo: #8d95e0;
  --paper: #231f20; --ink: #f9f8f8; --brand: #b4bcf2; --brand-fill: #3c4399; --brand-soft: #272a40; --on-brand: #ffffff;
  --soft: #f9f8f8; --line: #443e3f; --lane: #353031; --card: #2c2829; --hero: #272a40; --header: #231f20;
  --ok-bg: #1f2b1b; --warn-bg: #2e2819; --bad-bg: #33201f; --clair-bg: #272a40; --resume-bg: #2b2230;
  --focus: #b4bcf2;
  color-scheme: dark;
}

/* Couleur de chaque module (version longue ; la White Belt passe par chStyle) */
[data-module="1"] { --module: #3c4399; --on-module: #ffffff; --module-m: #afbaef; --module-c: #f0f3ff; }
[data-module="2"] { --module: #80ae66; --on-module: #231f20; --module-m: #c3e0b4; --module-c: #edf7e7; }
[data-module="3"] { --module: #ea7773; --on-module: #231f20; --module-m: #ffc5c1; --module-c: #ffefee; }
[data-module="4"] { --module: #f3cb46; --on-module: #231f20; --module-m: #ffe79e; --module-c: #fbf3dd; }
[data-module="5"] { --module: #5ea6dd; --on-module: #231f20; --module-m: #b1dcfe; --module-c: #eaf5ff; }
[data-module="6"] { --module: #5ea6dd; --on-module: #231f20; --module-m: #b1dcfe; --module-c: #eaf5ff; }
[data-module="7"] { --module: #b88bc4; --on-module: #231f20; --module-m: #e7caee; --module-c: #faeffd; }
[data-module="8"] { --module: #e1902c; --on-module: #231f20; --module-m: #fecb98; --module-c: #fff1e3; }
[data-module="9"] { --module: #f3cb46; --on-module: #231f20; --module-m: #ffe79e; --module-c: #fbf3dd; }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0;
  background: var(--paper) var(--texture) top center / 1080px auto repeat;
  color: var(--ink);
  font: 400 17px/1.55 var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4 { font-family: var(--title); line-height: 1.25; margin: 0 0 .5em; color: var(--ink); text-wrap: balance; }
h3 { font-size: 1.18rem; font-weight: 700; }
h4 { font-size: 1.02rem; font-weight: 700; }
p { margin: 0 0 1em; }
p, li, dd { overflow-wrap: break-word; }
a { color: var(--brand); text-underline-offset: .18em; text-decoration-thickness: .08em; }
a:hover { text-decoration-thickness: .14em; }
strong, b { font-weight: 700; }
sup { font-size: .65em; line-height: 0; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection { background: var(--bf-m); color: var(--ink); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.muted { color: var(--soft); }
.small { font-size: .9rem; }
/* Mot mis en avant : surligné en bleu Fichly moyen, texte en encre, environ 0,9 fois la taille */
.key { background: var(--bf-m); color: var(--ink); font-size: .9em; padding: 0 .16em; border-radius: var(--radius-sm); -webkit-box-decoration-break: clone; box-decoration-break: clone; }

.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--btn); color: var(--btn-ink); padding: 12px 16px; border-radius: var(--pill); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- Barre du haut (blanche, comme fichly.com) ---------- */
.topbar { position: sticky; top: 0; z-index: 20; background: var(--header); border-bottom: 1px solid var(--line); }
.topbar-inner { max-width: 1152px; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; gap: 14px; }
.brand-link { display: inline-flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); min-width: 0; }
.logo { display: block; width: 92px; height: auto; }
.brand-name { font: 700 .9rem/1.2 var(--title); color: var(--ink); border-left: 1px solid var(--line); padding-left: 14px; white-space: nowrap; }
.topbar-nav { margin-left: auto; display: flex; align-items: center; gap: 18px; }
.topbar-nav a { font: 700 .95rem/1.2 var(--title); color: var(--ink); text-decoration: none; padding: 6px 0; }
.topbar-nav a:hover { color: var(--ink); }
.pill { display: inline-flex; align-items: center; gap: 6px; font: 700 .8rem/1 var(--title); color: var(--on-brand); background: var(--brand-fill); padding: 8px 12px; border-radius: var(--pill); white-space: nowrap; }
@media (max-width: 560px) { .brand-name { display: none; } .logo { width: 76px; } .topbar-nav { gap: 12px; } }
/* Bouton « Aller plus loin » (toutes les pages → aller-plus-loin.html) : .btn.small dans la barre.
   Sous-titre « Yellow & Green Belt » visible sur grand écran, lu par les lecteurs d’écran partout.
   Téléphone : le lien « Le parcours » s’efface (le logo ramène à l’accueil), puis la pastille de progression. */
.topbar-nav .btn { color: var(--btn-ink); white-space: nowrap; }
.topbar-nav .btn:hover { color: var(--btn-ink); }
.topbar-cta-sub { font-weight: 400; }
.pill[hidden] { display: none; }
@media (max-width: 959px) { .topbar-cta-sub { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } }
@media (max-width: 560px) { .topbar-nav > a:not(.btn) { display: none; } }
@media (max-width: 359px) { .topbar-nav .pill { display: none; } }

/* ---------- Mise en page ---------- */
.page { max-width: 1152px; margin: 0 auto; padding: 0 16px 56px; }

/* Bandeau pervenche pleine largeur (astuce ombre + découpe : pas de défilement horizontal) */
.hero {
  padding: 56px 0 48px; text-align: center;
  background: var(--hero); box-shadow: 0 0 0 100vmax var(--hero); clip-path: inset(0 -100vmax);
}
.hero .chapeau { margin-left: auto; margin-right: auto; }
.hero .hero-facts, .hero .hero-actions { justify-content: center; }
.hero .eyebrow { justify-content: center; }

/* Petite étiquette au-dessus d'un titre : pilule-étiquette (fond clair, contour 1 px fort, le point dans une pastille moyenne) */
.eyebrow { font: 700 .78rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 0 0 16px; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 4px 16px 4px 4px; min-height: 32px; border-radius: var(--pill); background: var(--module-c); border: 1px solid var(--module); }
.eyebrow::before { content: ""; width: 24px; height: 24px; border-radius: 50%; background: radial-gradient(circle, var(--module) 0 4px, var(--module-m) 4.5px); flex: none; }
/* Dans le bandeau : étiquette « onglet de fiche » à la couleur du module */
.hero .eyebrow { margin-bottom: 24px; }

/* Titre principal : bleu nuit, mots clés en bleu roi (.key, ou .l2 pour l’ancienne écriture) */
.title { font-size: clamp(2rem, 1.35rem + 2.9vw, 3.3rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.1; margin: 0 auto 20px; max-width: 24ch; color: var(--navy); }
.title .key { color: var(--ink); }
.title .l1 { display: block; color: var(--navy); }
.title .l2 { display: block; color: var(--ink); font-size: .8em; line-height: 1.2; margin-top: .2em; }
.chapeau { font-size: clamp(1.05rem, 1rem + .3vw, 1.18rem); line-height: 1.5; max-width: 62ch; color: var(--ink); }
.hero-facts { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hero-facts li { display: flex; align-items: baseline; gap: 6px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 9px 14px; font-weight: 400; font-size: .95rem; }
.hero-facts b { font: 700 1.02rem/1 var(--title); color: var(--ink); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 28px 0 8px; padding: 0; list-style: none; }
.hero + .toc { justify-content: center; }
.toc a { display: inline-block; text-decoration: none; font: 700 .88rem/1.2 var(--title); padding: 9px 13px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); color: var(--ink); }
.toc a:hover { border-color: var(--blue); color: var(--ink); }

.section { padding: 48px 0 8px; }
.section > h2, .h2 { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.15rem); font-weight: 700; letter-spacing: -.025em; line-height: 1.1; color: var(--navy); }
/* Section sur fond gris clair pleine largeur (fichly.com alterne blanc et #f0f2f6) */
.section.tinted, .section.quiz {
  margin-top: 48px; padding: 48px 0 44px;
  background: var(--paper); box-shadow: 0 0 0 100vmax var(--paper); clip-path: inset(0 -100vmax);
}
.lead { font-size: 1.08rem; color: var(--soft); max-width: 70ch; }

.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 24px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.grid-4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.split { display: grid; gap: 32px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 900px) { .split { grid-template-columns: 1.35fr 1fr; } }

/* ---------- Encadrés (charte du blog Fichly) ---------- */
/* Encart (charte) : fond en nuance claire, contour de 1 px en nuance forte, arrondi 12 px, sans ombre,
   une pilule-étiquette en haut (fond blanc, contour fort, picto dans une pastille moyenne) qui dit le sens. */
.callout { --cf: var(--bf); --cm: var(--bf-m); --cc: var(--bf-c); --pic: var(--pic-q);
  position: relative; border-radius: var(--radius); padding: 16px; margin: 16px 0; border: 1px solid var(--cf); background: var(--cc); color: var(--ink); }
.callout::before { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 16px 4px 36px; margin-bottom: 8px; border-radius: var(--pill); border: 1px solid var(--cf);
  background: var(--pic) 4px center / 24px 24px no-repeat, var(--white); font: 700 .76rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); }
.callout > :last-child { margin-bottom: 0; }
.callout ul { margin: 0; padding-left: 1.2em; }
.callout li + li { margin-top: 6px; }
.callout.clair { --cf: var(--bf); --cm: var(--bf-m); --cc: var(--bf-c); --pic: var(--pic-q); }
.callout.clair::before { content: "En clair"; }
.callout.retenir { --cf: var(--jf); --cm: var(--jm); --cc: var(--jc); --pic: var(--pic-star); }
.callout.retenir::before { content: "À retenir"; }
.callout.attention { --cf: var(--rf); --cm: var(--rm); --cc: var(--rc); --pic: var(--pic-x); }
.callout.attention::before { content: "Attention"; }
.callout.defi { --cf: var(--vf); --cm: var(--vm); --cc: var(--vc); --pic: var(--pic-ok); }
.callout.defi::before { content: "Défi terrain"; }
.callout.resume { --cf: var(--vif); --cm: var(--vim); --cc: var(--vic); --pic: var(--pic-plus); }
.callout.resume::before { content: "En résumé"; }
.callout[data-label]::before { content: attr(data-label); }

/* ---------- Boutons, étiquettes ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 12px 24px; border-radius: var(--pill); border: 1px solid var(--btn);
  font: 700 .98rem/1.2 var(--title); text-decoration: none; cursor: pointer; text-align: center;
  background: var(--btn); color: var(--btn-ink); transition: box-shadow .15s ease;
}
.btn:hover { box-shadow: 0 0 0 4px var(--bf-m); }
.btn.ghost { background: var(--card); color: var(--ink); border-color: var(--line-ui); }
.btn.ghost:hover { border-color: var(--bf); background: var(--card); box-shadow: 0 0 0 3px var(--bf-m); }
.btn.small { min-height: 40px; padding: 8px 16px; font-size: .88rem; }
.btn[disabled], .btn[aria-disabled="true"] { cursor: not-allowed; }
.btn[disabled]:hover { box-shadow: none; }
.btn.ghost[disabled]:hover { background: var(--card); border-color: var(--line); }
.btn svg { width: 18px; height: 18px; flex: none; }
.linklike { background: none; border: 0; padding: 0; color: var(--soft); font: inherit; text-decoration: underline; cursor: pointer; }

.chip { display: inline-flex; align-items: center; gap: 6px; font: 700 .76rem/1 var(--title); padding: 8px 12px; border-radius: var(--pill); background: var(--lane); color: var(--ink); border: 1px solid var(--line-strong); white-space: nowrap; }
.chip.mod::before { content: ""; width: 12px; height: 12px; border-radius: 50%; background: var(--module); flex: none; }
.card .chip, .section.tinted .chip, .section.quiz .chip { background: var(--card); border: 1px solid var(--line); }
.tag { display: inline-block; font: 700 .76rem/1 var(--title); padding: 4px 8px; border-radius: var(--pill); color: var(--on-fill); vertical-align: .1em; }
.tag.va { background: var(--va); }
.tag.nvao { background: var(--nvao); }
.tag.nva { background: var(--nva); }

/* ---------- Vidéo 16:9 ---------- */
.video { margin: 0; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; background: var(--ink); border: 1px solid var(--line); }
.video-frame video { display: block; width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.video-missing { display: none; }
.video-frame.is-missing { background: var(--bf-c); }
.video-frame.is-missing video { display: none; }
.video-frame.is-missing .video-missing {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  padding: 20px; text-align: center; color: var(--soft);
}
.video-missing .vm-icon { width: 64px; height: 64px; border-radius: 50%; display: grid; place-items: center; background: var(--bf-m); color: var(--ink); margin-bottom: 8px; }
.video-missing .vm-icon svg { width: 24px; height: 24px; margin-left: 3px; }
.video-missing strong { font: 700 1.1rem/1.3 var(--title); color: var(--ink); }
.video-missing span { max-width: 44ch; font-size: .92rem; }
.video figcaption { margin-top: 10px; color: var(--soft); font-size: .9rem; }
@media (max-width: 480px) { .video-missing .vm-icon { width: 46px; height: 46px; } .video-missing span { display: none; } }

/* ---------- Fiche interactive, schémas ---------- */
.fiche { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--module); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px; overflow: hidden; }
.fiche-empty { border: 2px dashed var(--line); border-radius: var(--radius-sm); padding: 36px 16px; text-align: center; color: var(--soft); }
.schema { margin: 20px 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.schema svg { display: block; width: 100%; height: auto; }
.schema figcaption { margin-top: 10px; font-size: .9rem; color: var(--soft); }
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.simple { border-collapse: collapse; width: 100%; font-size: .94rem; }
table.simple th, table.simple td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
table.simple th { font: 700 .82rem/1.3 var(--title); color: var(--ink); background: var(--lane); }

/* ---------- Lexique, méthode, pièges ---------- */
.lexique { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin: 0; }
.lexique > div { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.lexique dt { font: 700 1.02rem/1.3 var(--title); color: var(--ink); margin-bottom: 4px; }
.lexique dd { margin: 0; }

.steps { list-style: none; counter-reset: step; margin: 0; padding: 0; display: grid; gap: 12px; }
.steps > li { counter-increment: step; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px 16px 68px; min-height: 64px; }
.steps > li::before { content: counter(step); position: absolute; left: 18px; top: 15px; width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; background: var(--module); color: var(--on-module); font: 700 1rem/1 var(--title); }
.steps > li > strong:first-child { display: block; font-family: var(--title); font-weight: 700; margin-bottom: 2px; }
.steps > li > p:last-child { margin-bottom: 0; }

.pieges { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.pieges > li { display: grid; grid-template-columns: 1fr; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
@media (min-width: 760px) { .pieges > li { grid-template-columns: 1fr 1fr; } }
.piege, .reflexe { margin: 0; padding: 14px 16px 14px 18px; border-left: 5px solid; }
.piege { background: var(--bad-bg); border-color: var(--f-rouge); }
.reflexe { background: var(--ok-bg); border-color: var(--f-vert); }
.piege::before, .reflexe::before { display: block; font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 4px; color: var(--ink); }
.piege::before { content: "Le piège"; }
.reflexe::before { content: "Le bon réflexe"; }

/* ---------- Quiz de module ---------- */
.quiz-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; }
.quiz-body { display: grid; gap: 16px; }
.q { margin: 0; padding: 24px; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); min-width: 0; }
.q legend { padding: 0; float: left; width: 100%; margin-bottom: 12px; }
.q legend + * { clear: both; }
.q-num { display: block; font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin-bottom: 4px; }
.q-text { display: block; font: 700 1.05rem/1.45 var(--title); }
.q-choices { display: grid; gap: 8px; }
.q-choice {
  display: flex; align-items: flex-start; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-ui); background: var(--white); color: var(--ink);
  font: 400 .98rem/1.45 var(--body); transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;
}
.q-choice:hover { border-color: var(--bf); box-shadow: 0 0 0 2px var(--bf-m); }
.q-letter { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--bf-m); color: var(--ink); font: 700 .85rem/1 var(--title); }
.q-choice[aria-disabled="true"] { cursor: default; }
.q-choice[aria-disabled="true"]:hover { border-color: var(--line-ui); box-shadow: none; }
.q-choice.is-answer { border-color: var(--vf); background: var(--vc); }
.q-choice.is-answer .q-letter { background: var(--vm); color: var(--ink); }
.q-choice.is-wrong { border-color: var(--rf); background: var(--rc); }
.q-choice.is-wrong .q-letter { background: var(--rm); color: var(--ink); }
.q-choice.is-picked { border-color: var(--bf); background: var(--bf-c); box-shadow: inset 0 0 0 1px var(--bf); }
.q-choice.is-picked .q-letter { background: var(--brand-fill); color: var(--on-brand); }
.q-feedback:empty { display: none; }
/* Correction : un encart (fond clair, contour 1 px fort) ; le mot « Bonne réponse » ou « Pas tout à fait » porte le sens */
.q-feedback { margin-top: 16px; padding: 16px; border-radius: var(--radius); border: 1px solid; }
.q-feedback.ok { background: var(--vc); border-color: var(--vf); }
.q-feedback.ko { background: var(--jc); border-color: var(--jf); }
.q-feedback strong { display: block; font-family: var(--title); }
.q-feedback.ok strong { color: var(--ink); }
.q-feedback.ko strong { color: var(--ink); }
.q-feedback p { margin: 4px 0 0; }
.quiz-result { border-radius: var(--radius); padding: 24px; border: 1px solid; border-left-width: 5px; animation: rise .35s ease both; }
.quiz-result.pass { background: var(--ok-bg); border-color: var(--f-vert); }
.quiz-result.fail { background: var(--warn-bg); border-color: var(--f-jaune); }
.quiz-result h3 { margin-bottom: 6px; }
.quiz-score { font: 700 2.2rem/1 var(--title); color: var(--navy); margin: 0 0 10px; }
.actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Défi terrain (vert) ---------- */
.defi { position: relative; border-radius: var(--radius); padding: 24px 24px 24px 26px; background: var(--ok-bg); border-left: 5px solid var(--f-vert); }
.defi-label { display: inline-flex; align-items: center; gap: 8px; font: 700 .78rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--ink); margin-bottom: 10px; }
.defi-label svg { width: 22px; height: 22px; color: var(--ink); }
.defi-mission { font: 700 1.1rem/1.5 var(--title); margin-bottom: 16px; }
.defi-check { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.defi-check label { display: flex; gap: 12px; align-items: flex-start; padding: 11px 13px; border-radius: var(--radius-sm); background: var(--card); border: 1px solid var(--line); cursor: pointer; }
.defi-check input { flex: none; width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--brand-fill); }
.defi-check input:checked + span { text-decoration: line-through; color: var(--soft); }
.defi-tip { margin: 0; color: var(--ink); font-size: .94rem; }

/* ---------- Navigation entre modules ---------- */
.module-nav { display: grid; gap: 12px; grid-template-columns: 1fr; margin-top: 48px; }
@media (min-width: 760px) { .module-nav { grid-template-columns: 1fr auto 1fr; align-items: stretch; } }
.module-nav a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; color: var(--ink); }
.module-nav a:hover { border-color: var(--blue); }
.module-nav small { display: flex; align-items: center; gap: 8px; font: 700 .74rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.module-nav a[style] small::before { content: ""; width: 18px; height: 7px; border-radius: var(--pill); background: var(--module); flex: none; }
.module-nav span { font: 700 .98rem/1.35 var(--title); }
.module-nav .nav-next { text-align: right; }
.module-nav .nav-next small { justify-content: flex-end; }
.module-nav .nav-home { justify-content: center; align-items: center; background: var(--btn); border-color: var(--btn); }
.module-nav .nav-home span { color: var(--btn-ink); }
.module-nav .nav-home:hover { background: var(--btn-hover); border-color: var(--btn-hover); }
.module-nav .nav-empty { visibility: hidden; }
@media (max-width: 759px) { .module-nav .nav-next { text-align: left; } .module-nav .nav-next small { justify-content: flex-start; } .module-nav .nav-empty { display: none; } }

/* ---------- Pied de page (barre bleu nuit) ---------- */
/* Pied de page : blanc cassé uni, trait fin au-dessus, logo tel quel */
.site-footer { margin-top: 56px; background: var(--paper); color: var(--ink); border-top: 1px solid var(--line); }
.footer-inner { max-width: 1152px; margin: 0 auto; padding: 24px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; }
.footer-inner .logo { width: 80px; }
.footer-inner p { margin: 0; color: var(--ink); font-size: .9rem; }
.footer-inner .linklike { color: var(--ink); }
.footer-inner .footer-site { margin-left: auto; font: 700 .95rem/1 var(--title); text-decoration: none; color: var(--brand); }
.footer-inner .footer-site:hover { text-decoration: underline; }
/* Ligne des séquences : segments collés, bouts arrondis, jamais collée au bord */
.band { height: 4px; margin: 0 16px 16px; border-radius: var(--pill); background: var(--band); }

/* ---------- Accueil : comment ça marche ---------- */
.how { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); counter-reset: how; }
.how li { counter-increment: how; position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.how-icon { width: 48px; height: 48px; display: grid; place-items: center; color: var(--ink); margin: -4px 0 10px -6px; }
.how-icon svg { width: 32px; height: 32px; stroke-width: 1.6; }
.how li::after { content: counter(how); position: absolute; top: 18px; right: 20px; font: 700 1.5rem/1 var(--title); color: var(--line); }
.how h3 { margin-bottom: 6px; }
.how p { margin: 0; color: var(--soft); font-size: .96rem; }

/* ---------- Accueil : progression et modules ---------- */
.progress-card { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 760px) { .progress-card { grid-template-columns: 1fr auto; } }
.progress-card h3 { margin: 0 0 4px; }
.progress-card p { margin: 0; color: var(--soft); }
.bar { height: 10px; border-radius: var(--pill); background: var(--lane); overflow: hidden; margin-top: 14px; }
.bar > span { display: block; height: 100%; width: 0; border-radius: var(--pill); background: var(--brand-fill); transition: width .5s ease; }
.part { margin-top: 40px; }
.part-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 6px 16px; margin-bottom: 16px; }
.part-head h3 { font-size: 1.35rem; margin: 0; }
.part-head .eyebrow { margin-bottom: 6px; }
.part-head .eyebrow::before { background: var(--band); width: 30px; }
.part-head p { margin: 4px 0 0; color: var(--soft); max-width: 60ch; }
.module-grid { list-style: none; margin: 0; padding: 18px 0 0; display: grid; gap: 30px 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
/* Carte module = une fiche Fichly : onglet arrondi à la couleur du module */
.module-card {
  position: relative; height: 100%; display: flex; flex-direction: column; gap: 4px;
  text-decoration: none; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 20px 18px; box-shadow: var(--shadow); transition: border-color .15s ease, box-shadow .15s ease;
}
.module-card::before { content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 6px; border-radius: var(--radius) var(--radius) 0 0; background: var(--module); }
.module-card:hover { border-color: var(--module); box-shadow: var(--shadow-hover); }
.mc-tab { position: absolute; top: -15px; left: 18px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 14px; border-radius: 8px; background: var(--module); color: var(--on-module); font: 700 .8rem/1 var(--title); letter-spacing: .02em; }
.mc-kicker { font: 700 .76rem/1.3 var(--title); letter-spacing: .06em; text-transform: uppercase; color: var(--soft); }
.mc-title { font: 700 1.1rem/1.3 var(--title); color: var(--navy); }
.mc-pitch { color: var(--soft); font-size: .93rem; margin: 4px 0 16px; }
.mc-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); }
.mc-go { font: 700 .9rem/1 var(--title); color: var(--ink); }
.status { display: inline-flex; align-items: center; gap: 6px; font: 700 .76rem/1 var(--title); padding: 4px 8px; border-radius: var(--pill); border: 1px solid var(--line-strong); }
.status svg { width: 14px; height: 14px; }
.status.todo { background: var(--white); color: var(--ink); }
.status.done { background: var(--vc); border-color: var(--vf); color: var(--ink); }
.status.done svg { box-sizing: content-box; padding: 2px; border-radius: 50%; background: var(--vm); }

/* Carte de l’examen : barre bleu nuit */
.exam-card { display: grid; gap: 18px; grid-template-columns: 1fr; align-items: center; background: var(--dark-bar); border-color: var(--dark-bar); color: var(--dark-bar-ink); }
@media (min-width: 760px) { .exam-card { grid-template-columns: auto 1fr auto; padding: 28px 32px; } }
.exam-medal { width: 72px; height: 72px; border-radius: var(--radius); display: grid; place-items: center; background: #3c4399; color: #fff; }
.exam-medal svg { width: 40px; height: 40px; }
.exam-card h3 { margin: 0 0 6px; font-size: 1.3rem; color: var(--dark-bar-ink); }
.exam-card p { margin: 0; color: var(--dark-bar-soft); }
.exam-card .btn { background: #fff; color: #231f20; border-color: #fff; }
.exam-card .btn:hover { background: #ecedf7; border-color: #ecedf7; }
.exam-card .status.todo { background: rgba(255, 255, 255, .12); color: #fff; }
.exam-card .status.done { background: var(--vm); color: var(--ink); }
.exam-card :focus-visible { outline-color: #fff; }

/* ---------- Examen final ---------- */
.exam-panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 26px; }
.exam { margin-top: 32px; }
.exam-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; font: 700 .88rem/1.3 var(--title); color: var(--soft); }
.exam-q { font: 700 clamp(1.12rem, 1rem + .5vw, 1.38rem)/1.45 var(--title); margin: 18px 0 16px; }
.exam-q:focus { outline: none; }
.exam-nav { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; margin-top: 20px; }
.score-big { font: 700 clamp(2.6rem, 2rem + 3vw, 4rem)/1 var(--title); color: var(--navy); margin: 6px 0 4px; }
.review { margin-top: 20px; }
.review summary { cursor: pointer; font: 700 .98rem/1.3 var(--title); color: var(--ink); padding: 8px 0; }
.review ol { margin: 10px 0 0; padding-left: 1.3em; display: grid; gap: 12px; }
.review li p { margin: 2px 0; }
.review .r-ok { color: var(--ink); font-weight: 700; }
.review .r-ko { color: var(--ink); font-weight: 700; }
.att-form { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); align-items: end; margin-top: 12px; }
.field label { display: block; font: 700 .88rem/1.3 var(--title); margin-bottom: 6px; }
.field input { width: 100%; min-height: 48px; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line-ui); background: var(--white); color: var(--ink); font: 400 1rem/1.3 var(--body); }
.field input:focus-visible { border-color: var(--bf); outline-offset: 1px; }

/* Attestation : document Fichly, toujours clair (pensé pour une capture d'écran) */
.attestation {
  --a-ink: #231f20; --a-blue: #231f20; --a-soft: #231f20; --a-line: #e3e0e0;
  position: relative; max-width: 880px; margin: 18px auto 0; color: var(--a-ink);
  background: #fff; border-radius: var(--radius); overflow: hidden;
  box-shadow: none; border: 1px solid var(--a-line); text-align: center;
  font-family: var(--body); animation: rise .45s ease both;
}
.att-band { height: 10px; background: var(--band-modules); }
.att-inner { padding: clamp(22px, 4vw, 44px) clamp(18px, 5vw, 56px) clamp(22px, 3vw, 34px); }
.att-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(18px, 3vw, 30px); }
.att-top img { width: 104px; }
.att-top span { font: 700 .74rem/1.3 var(--title); letter-spacing: .12em; text-transform: uppercase; color: #fff; background: var(--a-ink); padding: 7px 11px; border-radius: var(--radius-sm); }
.att-title { font: 700 clamp(1.8rem, 1.2rem + 3vw, 3rem)/1.1 var(--title); color: var(--a-ink); margin: 0 0 6px; letter-spacing: -.015em; }
.att-title span { color: var(--a-blue); }
.att-sub { font: 700 1rem/1.4 var(--title); color: var(--a-blue); margin: 0 0 clamp(18px, 3vw, 28px); }
.att-to { margin: 0; color: var(--a-soft); }
.att-name { font: 700 clamp(1.6rem, 1.1rem + 2.6vw, 2.5rem)/1.2 var(--title); margin: 6px auto 12px; padding-bottom: 12px; border-bottom: 2px solid var(--a-line); max-width: 30ch; overflow-wrap: anywhere; }
.att-text { max-width: 58ch; margin: 0 auto 18px; }
.att-belt { width: min(220px, 60%); margin: 0 auto 16px; display: block; }
.att-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; text-align: left; font-size: .9rem; border-top: 1px solid var(--a-line); padding-top: 14px; }
.att-foot span { display: block; color: var(--a-soft); font-size: .78rem; }
.att-foot strong { font-family: var(--title); }
.att-foot div:last-child { text-align: right; }
.att-note { max-width: 880px; margin: 14px auto 0; text-align: center; color: var(--soft); font-size: .9rem; }

/* =====================================================================
   Lecteur de module (formation.js, initLessonPlayer)
   Desktop ≥ 1024 px : barre latérale collante + colonne de contenu.
   Mobile : barre d’étapes collante en haut, navigation collante en bas.
   ===================================================================== */
.lesson-pending #contenu { visibility: hidden; }
.status.doing { background: var(--bf-c); border-color: var(--bf); color: var(--ink); }

body.has-lesson .topbar-inner { max-width: 1280px; }
.page.lesson-ready { max-width: 1280px; padding-bottom: 0; }
.lesson { display: grid; grid-template-columns: minmax(0, 1fr); }
.lesson-main { min-width: 0; }
.lesson-step[hidden], .acc-panel[hidden], .lesson-ready > .toc[hidden], .lesson-ready > [data-module-nav][hidden] { display: none !important; }
/* La vidéo tient dans la hauteur de l’écran (portables à 768 px de haut) */
.lesson-step .video-frame { max-width: max(320px, calc((100vh - 250px) * 16 / 9)); }
/* backwards (et non both) : aucune transformation ne reste sur l’étape après l’entrée (fantômes de glisser en position fixe) */
.lesson-step { animation: step-in .18s ease-out backwards; }
@keyframes step-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Bandeau du module : carte pervenche compacte ; le chapeau n’apparaît qu’à l’étape Regarder */
.lesson .lesson-hero {
  padding: 22px 24px; margin: 18px 0 0; text-align: left; border-radius: var(--radius);
  box-shadow: none; clip-path: none; background: var(--hero); border-top: 6px solid var(--module);
}
.lesson .lesson-hero .eyebrow { justify-content: flex-start; margin-bottom: 12px; font-size: .72rem; padding: 6px 10px; }
.lesson .lesson-hero .title { font-size: clamp(1.4rem, 1.05rem + 1.5vw, 2.05rem); margin: 0; max-width: 34ch; }
.lesson .lesson-hero .chapeau { margin: 12px 0 0; max-width: 70ch; font-size: 1.02rem; }
.lesson .lesson-hero .hero-facts { display: none; }
.lesson:not([data-current="regarder"]) .lesson-hero .chapeau { display: none; }
.lesson .lesson-hero .title .key { display: inline-block; }
/* Après l’étape Regarder, le bandeau devient un simple rappel du module : l’étape reste le titre principal */
.lesson:not([data-current="regarder"]) .lesson-hero { padding: 14px 20px; border-top-width: 4px; }
.lesson:not([data-current="regarder"]) .lesson-hero .title { font-size: clamp(1.05rem, .95rem + .45vw, 1.28rem); max-width: none; line-height: 1.3; }
.lesson:not([data-current="regarder"]) .lesson-hero .eyebrow { margin-bottom: 8px; font-size: .66rem; padding: 4px 8px; }
.lesson:not([data-current="regarder"]) .lesson-step > .section:first-child { padding-top: 24px; }

/* Sections dans une étape */
.lesson-step > .section { padding: 28px 0 0; }
.lesson-step > .section + .section { padding-top: 40px; }
.lesson-step > .section.quiz, .lesson-step > .section.tinted { margin-top: 0; padding: 28px 0 0; background: none; box-shadow: none; clip-path: none; }
.lesson-step > .section.quiz + .section { padding-top: 40px; }
.lesson-step .section > h2 { scroll-margin-top: 90px; }
.lesson-step > #retenir-contenu > h2 + .callout.retenir::before { display: none; }
.lesson-step > #retenir-contenu > h2 + .callout.retenir { padding-top: 18px; padding-bottom: 18px; }
.step-h:focus { outline: none; }
.step-h:focus-visible { outline: 3px solid var(--focus); outline-offset: 6px; }
.step-kicker {
  display: flex; align-items: center; gap: 8px; margin-bottom: 8px;
  font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft);
}
.step-kicker::before { content: ""; width: 22px; height: 8px; border-radius: var(--pill); background: var(--module); flex: none; }

/* Accordéons de l’étape Retenir */
.lesson-step > .section.acc { padding: 0; margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.lesson-step > #retenir-contenu + .section.acc { margin-top: 26px; }
.lesson-step > .section.acc > h2.acc-h { margin: 0; font-size: 1.12rem; letter-spacing: 0; }
.acc-btn {
  display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; min-height: 64px;
  background: none; border: 0; border-radius: var(--radius); cursor: pointer; text-align: left;
  font: 700 1.08rem/1.3 var(--title); color: var(--navy);
}
.acc-btn:hover .acc-label { color: var(--ink); }
.acc-label { min-width: 0; }
.acc-ico { flex: none; width: 36px; height: 36px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--brand-soft); color: var(--ink); }
.acc-ico svg { width: 20px; height: 20px; }
.acc-meta { margin-left: auto; flex: none; font: 700 .76rem/1 var(--title); color: var(--soft); background: var(--lane); padding: 6px 9px; border-radius: var(--radius-sm); white-space: nowrap; }
.acc-chev { flex: none; width: 22px; height: 22px; color: var(--soft); transition: transform .18s ease; }
.acc-chev svg { width: 22px; height: 22px; display: block; }
.acc-btn[aria-expanded="true"] .acc-chev { transform: rotate(180deg); }
.acc-panel { padding: 4px 18px 20px; border-top: 1px solid var(--line); }
.acc-panel > :first-child { margin-top: 14px; }
.acc-panel > :last-child { margin-bottom: 0; }
.acc .steps > li, .acc .lexique > div { background: var(--paper); }
@media (max-width: 560px) { .acc-btn { gap: 10px; padding: 12px; font-size: 1rem; } .acc-ico { width: 32px; height: 32px; } .acc-panel { padding: 4px 12px 16px; } }

/* Fin de module (étape Appliquer) */
.lesson-end { margin-top: 28px; border-top: 6px solid var(--module); }
.lesson-end h3 { margin-bottom: 6px; }
.lesson-end p { color: var(--soft); }
.lesson-end .actions { margin-top: 16px; }
.le-k { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 10px; font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.le-k.is-ok { color: var(--ink); }
.le-k svg { width: 18px; height: 18px; }

/* Navigation Précédent / Suivant */
.lesson-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); }
.lesson-nav .ln-next { margin-left: auto; }

/* ----- Barre latérale (desktop) ----- */
.lesson-side { display: none; }
.lesson-side > * { flex: none; }
.ls-back { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 2px; font: 700 .9rem/1.2 var(--title); color: var(--ink); text-decoration: none; }
.ls-back svg { width: 18px; height: 18px; }
.ls-back:hover { color: var(--ink); }
.ls-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.ls-head { padding: 16px 18px 16px; border-top: 6px solid var(--module); border-bottom: 1px solid var(--line); }
.ls-tab { display: inline-flex; margin: 0 0 10px; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--module); color: var(--on-module); font: 700 .72rem/1 var(--title); letter-spacing: .06em; text-transform: uppercase; }
.ls-title { margin: 0 0 14px; font: 700 1.06rem/1.3 var(--title); color: var(--navy); }
.ls-prog-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 0; font: 700 .8rem/1.2 var(--title); color: var(--soft); }
.ls-prog-row strong { color: var(--ink); }
.ls-prog .bar { height: 8px; margin-top: 8px; }
.ls-valid { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font: 700 .8rem/1.3 var(--title); color: var(--soft); }
.ls-valid.is-ok { color: var(--ink); }
.ls-valid svg { width: 16px; height: 16px; }
.ls-steps { list-style: none; margin: 0; padding: 8px; }
.ls-steps li { position: relative; }
.ls-steps li + li::before { content: ""; position: absolute; left: 24px; top: -9px; width: 2px; height: 18px; background: var(--line); z-index: 1; pointer-events: none; }
.ls-step {
  display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center;
  width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; color: var(--ink);
  text-align: left; cursor: pointer; font: inherit; position: relative;
}
.ls-step:hover { background: var(--lane); }
.ls-step.is-current { background: var(--brand-soft); }
.ls-step.is-current::after { content: ""; position: absolute; right: 8px; top: 50%; width: 4px; height: 24px; margin-top: -12px; border-radius: var(--pill); background: var(--module); }
.ls-ico {
  grid-row: 1 / span 2; position: relative; z-index: 2; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--line); background: var(--card); color: var(--soft); font: 700 .8rem/1 var(--title);
}
.ls-ico svg, .lm-ico svg { width: 15px; height: 15px; }
.ls-step.is-current .ls-ico { border-color: var(--brand-fill); background: var(--brand-fill); color: var(--on-brand); }
.ls-step.is-done .ls-ico { border-color: var(--ok); background: var(--ok); color: var(--card); }
.ls-step-name { font: 700 .95rem/1.25 var(--title); }
.ls-state { font: 700 .74rem/1.3 var(--title); color: var(--soft); }
.ls-step.is-current .ls-state { color: var(--ink); }
.ls-step.is-done .ls-state { color: var(--ink); }

.ls-mods { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); }
.ls-mods summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font: 700 .92rem/1.2 var(--title); border-radius: var(--radius); }
.ls-mods summary::-webkit-details-marker { display: none; }
.ls-mods summary:hover { color: var(--ink); }
.ls-mods-count { margin-left: auto; font: 700 .76rem/1 var(--title); color: var(--soft); background: var(--lane); padding: 5px 8px; border-radius: var(--radius-sm); }
.ls-chev { width: 20px; height: 20px; color: var(--soft); transition: transform .18s ease; }
.ls-chev svg { width: 20px; height: 20px; display: block; }
.ls-mods[open] .ls-chev { transform: rotate(180deg); }
.ls-mods ol { list-style: none; margin: 0; padding: 0 8px 8px; }
.ls-mods a { display: grid; grid-template-columns: 26px 1fr auto; align-items: center; gap: 10px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--ink); text-decoration: none; font: 700 .84rem/1.3 var(--title); }
.ls-mods a:hover { background: var(--lane); }
.ls-mods a[aria-current="page"] { background: var(--brand-soft); color: var(--navy); font-weight: 700; }
.ls-num { width: 26px; height: 26px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--module); color: var(--on-module); font: 700 .76rem/1 var(--title); }
.ls-num.is-exam { background: var(--dark-bar); color: var(--dark-bar-ink); }
.ls-num svg { width: 14px; height: 14px; }
.ls-ok { color: var(--ink); display: inline-flex; }
.ls-ok svg { width: 16px; height: 16px; }

/* ----- Barre d’étapes (mobile) ----- */
.lesson-mbar {
  position: sticky; top: 0; z-index: 15; display: flex; align-items: center; gap: 8px;
  margin: 0 -16px; padding: 4px 0 4px 12px; background: var(--header); border-bottom: 1px solid var(--line);
}
.lm-home { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--card); color: var(--ink); }
.lm-home svg { width: 20px; height: 20px; }
.lm-pills { position: relative; flex: 1; min-width: 0; display: flex; gap: 6px; margin: 0; padding: 6px 14px 6px 6px; list-style: none; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent); mask-image: linear-gradient(90deg, transparent 0, #000 10px, #000 calc(100% - 18px), transparent); }
.lm-pills::-webkit-scrollbar { display: none; }
.lm-pill:focus-visible { border-radius: var(--pill); outline-offset: 2px; }
.lm-home:focus-visible { border-radius: var(--radius-sm); }
.ls-step:focus-visible, .ls-mods a:focus-visible { border-radius: var(--radius-sm); outline-offset: -3px; }
.ls-mods summary:focus-visible { border-radius: var(--radius); outline-offset: -3px; }
.acc-btn:focus-visible { border-radius: var(--radius); outline-offset: -3px; }
.lm-pills li { flex: none; }
.lm-pill {
  display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 5px 13px 5px 5px; white-space: nowrap; cursor: pointer;
  border-radius: var(--pill); border: 1px solid var(--line); background: var(--card); color: var(--ink); font: 700 .86rem/1 var(--title);
}
.lm-ico { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--lane); color: var(--soft); font: 700 .78rem/1 var(--title); }
.lm-pill.is-done .lm-ico { background: var(--ok); color: var(--card); }
.lm-pill.is-current { background: var(--btn); border-color: var(--btn); color: var(--btn-ink); }
.lm-pill.is-current .lm-ico { background: var(--btn-ink); color: var(--btn); }
.lm-pill.is-current.is-done .lm-ico { background: var(--va); color: var(--on-fill); }
.lm-bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: transparent; }
.lm-bar > span { display: block; height: 100%; width: 0; background: var(--module); transition: width .3s ease; }

@media (max-width: 1023px) {
  body.has-lesson .topbar { position: relative; }
  .lesson-nav {
    position: sticky; bottom: 0; z-index: 14; margin: 36px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
    background: var(--header); border-top: 1px solid var(--line);
  }
  .lesson-nav .btn { min-height: 46px; padding: 10px 14px; }
  .lesson-nav .ln-prev { flex: none; white-space: nowrap; }
  .lesson-nav .ln-next { flex: 1 1 auto; max-width: 260px; white-space: nowrap; }
  body.has-lesson .site-footer { margin-top: 0; }
}
@media (max-width: 380px) { .ln-what { display: none; } }

@media (min-width: 1024px) {
  .lesson { grid-template-columns: 280px minmax(0, 1fr); column-gap: 48px; align-items: start; padding-top: 28px; }
  .lesson-mbar { display: none; }
  .lesson-side {
    display: flex; flex-direction: column; gap: 14px; position: sticky; top: calc(var(--top-h, 74px) + 20px);
    max-height: calc(100vh - var(--top-h, 74px) - 36px); overflow-y: auto; padding: 0 6px 16px 4px; margin-left: -4px; scrollbar-width: thin;
  }
  .lesson .lesson-hero { margin-top: 0; }
  .lesson .lesson-hero .eyebrow { display: none; }
  .lesson-main { padding-bottom: 8px; }
}

/* =====================================================================
   Accueil : bandeau avec progression, vidéo d’intro, parcours, examen
   ===================================================================== */
.hub-hero { text-align: left; padding: 48px 0 44px; }
.hub-hero-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "body" "card" "facts"; }
.hub-hero-head { grid-area: head; }
.hub-hero-body { grid-area: body; }
.hub-hero .hero-facts { grid-area: facts; margin: 0; justify-content: flex-start; }
.hub-hero .hub-progress { grid-area: card; }
.hub-hero .eyebrow { justify-content: flex-start; }
.hub-hero .title { margin: 0; max-width: 20ch; }
.hub-hero .chapeau { margin: 0; }
@media (min-width: 900px) {
  .hub-hero { padding: 64px 0 56px; }
  .hub-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); grid-template-areas: "head card" "body card" "facts card"; column-gap: 56px; row-gap: 20px; align-items: start; }
  .hub-hero .hub-progress { align-self: center; }
}
.hub-progress { padding: 22px; display: grid; gap: 18px; border-top: 6px solid var(--brand-fill); box-shadow: var(--shadow-hover); }
.hp-top { display: flex; align-items: center; gap: 18px; }
.hp-ring { position: relative; flex: none; width: 112px; height: 112px; }
.hp-ring svg { width: 100%; height: 100%; display: block; }
.ring-bg { fill: none; stroke: var(--lane); stroke-width: 10; }
.ring-fg { fill: none; stroke: var(--brand-fill); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset .6s ease; }
.hp-num { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; font: 700 1rem/1 var(--title); color: var(--soft); }
.hp-num > span { white-space: nowrap; }
.hp-num b { font: 700 1.9rem/1 var(--title); color: var(--navy); }
.hp-num small { margin-top: 4px; font: 700 .66rem/1 var(--title); letter-spacing: .06em; text-transform: uppercase; }
.hp-k { margin: 0 0 4px; font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.hp-h { margin: 0 0 6px; font-size: 1.22rem; color: var(--navy); }
.hp-sub { margin: 0; color: var(--soft); font-size: .92rem; line-height: 1.5; }
.hp-next { padding: 14px 16px; border-radius: var(--radius-sm); background: var(--lane); border-left: 5px solid var(--module); }
.hp-next p { margin: 0; }
.hp-next-k { font: 700 .72rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin-bottom: 6px !important; }
.hp-next-t { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font: 700 1rem/1.35 var(--title); color: var(--navy); }
.hp-tab { display: inline-flex; padding: 5px 8px; border-radius: var(--radius-sm); background: var(--module); color: var(--on-module); font: 700 .72rem/1 var(--title); }
.hp-next-s { margin-top: 6px !important; font: 700 .84rem/1.3 var(--title); color: var(--soft); }
.hp-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hp-actions .btn { white-space: nowrap; }
.hp-actions .btn { flex: 1 1 auto; }
@media (max-width: 420px) { .hp-ring { width: 92px; height: 92px; } .hp-num b { font-size: 1.6rem; } .hp-top { gap: 14px; } }

.intro-card { display: grid; gap: 24px; grid-template-columns: minmax(0, 1fr); padding: 18px; }
@media (min-width: 900px) { .intro-card { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 32px; padding: 22px; align-items: start; } }
.intro-card h3 { font-size: 1.05rem; margin: 18px 0 4px; }
.intro-card p { margin: 0 0 .6em; }
.intro-card .callout { margin-top: 0; }

.how.how-5 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: 12px; }
.how.how-5 li { padding: 18px; }
.how.how-5 .how-icon { margin: -2px 0 6px -4px; width: 40px; height: 40px; }
.how.how-5 .how-icon svg { width: 28px; height: 28px; }
.how.how-5 li::after { top: 16px; right: 16px; font-size: 1.3rem; }
.how.how-5 h3 { font-size: 1.05rem; }
.how.how-5 p { font-size: .92rem; }

.module-card.is-doing { border-color: var(--module); }
.mc-prog { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.mc-steps { display: flex; gap: 4px; flex: 1; max-width: 150px; }
.mc-steps i { flex: 1; height: 6px; border-radius: var(--pill); background: var(--lane); border: 1px solid var(--line); }
.mc-steps i.on { background: var(--module); border-color: var(--module); }
.mc-count { font: 700 .76rem/1 var(--title); color: var(--soft); white-space: nowrap; }
.mc-pitch { margin-bottom: 14px; }
.mc-foot { margin-top: 14px; }

.exam-count { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 14px 0 0; color: var(--dark-bar-soft); font: 700 .88rem/1.4 var(--title); }
.mods-dots { display: inline-flex; gap: 4px; }
.mods-dots i { width: 16px; height: 8px; border-radius: var(--pill); background: rgba(255, 255, 255, .18); }
.mods-dots i.on { background: var(--module); }
.exam-card .actions { margin-top: 0; }
.exam-card .exam-kicker { margin: 0 0 10px; }
.exam-card .exam-count { margin-top: 16px; }

/* Bandeau d’accueil : les 4 chiffres clés en une bande (2 × 2 sur téléphone) */
.hub-hero .hero-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.hub-hero .hero-facts li { flex-direction: column; align-items: flex-start; gap: 3px; border: 0; border-radius: 0; background: none; padding: 12px 16px; font-size: .86rem; line-height: 1.3; color: var(--soft); }
.hub-hero .hero-facts li:nth-child(even) { border-left: 1px solid var(--line); }
.hub-hero .hero-facts li:nth-child(n+3) { border-top: 1px solid var(--line); }
.hub-hero .hero-facts b { font-size: 1.3rem; line-height: 1.1; white-space: nowrap; }
@media (min-width: 560px) {
  .hub-hero .hero-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hub-hero .hero-facts li + li { border-left: 1px solid var(--line); }
  .hub-hero .hero-facts li:nth-child(n+3) { border-top: 0; }
}

/* Page d’examen : même en-tête compact que les modules */
.page-narrow { max-width: 920px; }
.crumbs { margin: 18px 0 0; }
.crumbs a { display: inline-flex; align-items: center; gap: 8px; font: 700 .9rem/1.2 var(--title); color: var(--ink); text-decoration: none; padding: 6px 2px; }
.crumbs a:hover { color: var(--ink); }
.crumbs svg { width: 18px; height: 18px; }
.hero.hero-compact { margin-top: 12px; padding: 26px 26px 24px; text-align: left; border-radius: var(--radius); box-shadow: none; clip-path: none; border-top: 6px solid var(--brand-fill); }
.hero-compact .eyebrow { justify-content: flex-start; margin-bottom: 14px; }
.hero-compact .title { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.2rem); margin: 0 0 12px; max-width: 30ch; }
.hero-compact .chapeau { margin: 0; font-size: 1.02rem; }
.hero-compact .exam-count { color: var(--soft); }
.hero-compact .mods-dots i { background: var(--card); border: 1px solid var(--line); }
.hero-compact .mods-dots i.on { background: var(--module); border-color: var(--module); }
.exam { margin-top: 24px; }
/* Pendant l’examen, le bandeau se réduit au titre : la question reste en haut de l’écran */
.exam-running .hero-compact { padding: 16px 22px; border-top-width: 4px; }
.exam-running .hero-compact .chapeau, .exam-running .hero-compact .exam-count, .exam-running .hero-compact .eyebrow { display: none; }
.exam-running .hero-compact .title { font-size: clamp(1.1rem, 1rem + .5vw, 1.35rem); margin: 0; max-width: none; }

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

/* Vidéo en cours de téléchargement (repli quand la lecture directe est refusée) */
.video-frame { position: relative; }
.video-frame.is-loading::after {
  content: "Chargement de la vidéo…";
  position: absolute; inset: 0; display: grid; place-items: center;
  background: var(--lane); color: var(--soft); border-radius: inherit;
  font: 700 1rem/1.4 var(--body);
  animation: fichly-pulse 1.4s ease-in-out infinite;
}
@keyframes fichly-pulse { 50% { background: var(--bf-m); } }
@media (prefers-reduced-motion: reduce) { .video-frame.is-loading::after { animation: none; } }

/* =====================================================================
   Accès (formulaire Tally obligatoire) : page d’accès de l’accueil,
   renvoi des modules et de l’examen, message de bienvenue
   ===================================================================== */
/* La page à montrer est choisie dès l’en-tête par assets/acces.js (pas de « flash ») :
   inscrit → la formation [data-formation] ; sinon → la page d’accès, la formation restant hidden. */
html.acces-ouvert [data-acces-page] { display: none; }
html.acces-ouvert [data-formation][hidden] { display: block; }

/* Page d’accès : bandeau (promesse, bouton, vidéo) */
.acces-bar { position: static; }
.acces-hero { text-align: left; padding: 44px 0 52px; }
.acces-hero-grid { display: grid; gap: 32px; grid-template-columns: minmax(0, 1fr); align-items: center; }
@media (min-width: 960px) {
  .acces-hero { padding: 64px 0 72px; }
  .acces-hero-grid.has-video:not(.has-no-video) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 56px; }
}
.acces-hero .eyebrow { justify-content: flex-start; }
.acces-hero .title { margin: 0 0 18px; max-width: 14ch; }
.acces-hero .chapeau { margin: 0 0 28px; max-width: 46ch; }
.acces-cta { display: grid; gap: 12px; justify-items: start; }
.btn-lg { min-height: 56px; padding: 16px 32px; font-size: 1.06rem; border-radius: var(--pill); }
.btn-lg svg { width: 20px; height: 20px; }
.acces-rassure { margin: 0; display: flex; align-items: flex-start; gap: 8px; font-size: .92rem; line-height: 1.5; color: var(--ink); }
.acces-rassure svg { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--ink); }
.acces-deja { margin: 26px 0 0; max-width: 52ch; display: flex; align-items: flex-start; gap: 12px; padding: 13px 16px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); color: var(--soft); font-size: .9rem; line-height: 1.5; }
.acces-deja svg { flex: none; width: 22px; height: 22px; margin-top: 1px; color: var(--ink); }
.acces-video { position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover); padding: 20px 14px 12px; }
.acces-video::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--band); }
.acces-video .video-frame { border-radius: var(--radius-sm); }
@media (max-width: 560px) {
  .acces-cta { justify-items: stretch; }
  .acces-cta .btn-lg { width: 100%; }
}

/* Ce qui vous attend */
.acces-section { padding-top: 56px; }
.acces-benefits { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.acces-benefits li { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 22px 22px 20px; }
.acces-benefits h3 { margin: 14px 0 6px; font-size: 1.08rem; color: var(--navy); }
.acces-benefits p { margin: 0; color: var(--soft); font-size: .95rem; line-height: 1.55; }
.ab-ico { width: 46px; height: 46px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--f-bleu-clair); color: var(--on-fill); }
.acces-benefits li:nth-child(2) .ab-ico { background: var(--f-vert); }
.acces-benefits li:nth-child(3) .ab-ico { background: var(--f-jaune); }
.ab-ico svg { width: 24px; height: 24px; }
@media (max-width: 560px) {
  .acces-benefits li { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 14px; padding: 18px 16px; }
  .ab-ico { grid-row: span 2; }
  .acces-benefits h3 { margin: 2px 0 4px; }
}

/* Le programme en un coup d’œil (3 parties, titres des modules, sans liens) */
.acces-programme { margin-top: 56px; }
.ap-parts { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); margin-top: 8px; }
.ap-part { display: flex; flex-direction: column; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 18px 18px; }
.ap-k { margin: 0 0 4px; font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); }
.ap-part h3 { margin: 0 0 6px; font-size: 1.15rem; color: var(--navy); }
.ap-pitch { margin: 0 0 14px; color: var(--soft); font-size: .92rem; line-height: 1.5; }
.ap-mods { list-style: none; margin: auto 0 0; padding: 0; display: grid; gap: 8px; }
.ap-mods li { display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 8px; border-radius: var(--radius-sm); background: var(--lane); font: 700 .94rem/1.35 var(--title); color: var(--ink); }
.ap-num { flex: none; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-items: center; background: var(--module); color: var(--on-module); font: 700 .88rem/1 var(--title); }
.ap-exam { margin: 16px 0 0; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: var(--radius); background: var(--dark-bar); color: var(--dark-bar-soft); font-size: .95rem; line-height: 1.5; }
.ap-exam b { color: var(--dark-bar-ink); font-family: var(--title); }
.ap-exam-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .12); color: #fff; }
.ap-exam-ico svg { width: 22px; height: 22px; }

/* Dernier appel */
.acces-final { position: relative; overflow: hidden; margin-top: 56px; display: grid; gap: 22px; align-items: center; padding: 32px 22px 26px; border-radius: var(--radius); background: var(--dark-bar); color: var(--dark-bar-ink); }
.acces-final::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--band); }
.acces-final h2 { margin: 0 0 6px; color: var(--dark-bar-ink); font-size: clamp(1.4rem, 1.2rem + .8vw, 1.8rem); }
.acces-final p { margin: 0; color: var(--dark-bar-soft); max-width: 56ch; }
.acces-final .btn { background: #fff; color: #231f20; border-color: #fff; }
.acces-final .btn:hover { background: #ecedf7; border-color: #ecedf7; }
.acces-final .acces-rassure { color: var(--dark-bar-soft); }
.acces-final .acces-rassure svg { color: var(--f-vert); }
.acces-final :focus-visible { outline-color: #fff; }
@media (min-width: 860px) { .acces-final { grid-template-columns: minmax(0, 1fr) auto; gap: 40px; padding: 38px 40px 34px; } .acces-final .acces-cta { justify-items: center; } }

/* Module ou examen sans inscription : pendant le renvoi vers la page d’accès (acces.js), et sans JavaScript,
   la page ne montre que ce message [data-acces-renvoi] ; le reste du temps, il est masqué. */
.acces-renvoi-page { display: none; min-height: 100vh; place-items: center; background: var(--hero); }
html.acces-renvoi-en-cours body > :not(.acces-renvoi-page) { display: none !important; }
html.acces-renvoi-en-cours .acces-renvoi-page { display: grid; }
.acces-renvoi-page ~ .acces-renvoi-page { display: none !important; }
.acces-renvoi { width: 100%; padding: 32px 16px; display: grid; place-items: center; }
.acces-renvoi-card { position: relative; overflow: hidden; width: 100%; max-width: 520px; padding: 34px 24px 28px; text-align: center; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-hover); }
.acces-renvoi-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--band); }
.acces-renvoi-card .logo { width: 96px; margin: 0 auto 18px; }
.acces-renvoi-h { margin: 0 0 10px; font: 700 clamp(1.3rem, 1.15rem + .8vw, 1.65rem)/1.25 var(--title); color: var(--navy); text-wrap: balance; }
.acces-renvoi-card p:not(.acces-renvoi-h) { margin: 0 0 20px; color: var(--soft); }

/* Message de bienvenue, juste après le formulaire */
.welcome {
  position: relative; overflow: hidden; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px 18px; align-items: center;
  margin: 0 0 28px; padding: 24px 56px 20px 20px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-hover); animation: fichly-welcome .45s ease both;
}
.welcome::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px; background: var(--band); }
.wl-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--f-vert); color: var(--on-fill); }
.wl-ico svg { width: 26px; height: 26px; }
.wl-h { margin: 0 0 4px; font-size: clamp(1.2rem, 1.05rem + .6vw, 1.5rem); color: var(--navy); }
.wl-h:focus { outline: none; }
.wl-text p { margin: 0; color: var(--soft); font-size: .96rem; line-height: 1.55; }
.wl-actions { grid-column: 1 / -1; display: flex; }
.wl-actions .btn { flex: 1 1 auto; }
@media (min-width: 760px) { .welcome { grid-template-columns: auto minmax(0, 1fr) auto; padding: 26px 60px 24px 24px; } .wl-actions { grid-column: auto; } }
.wl-close { position: absolute; top: 12px; right: 10px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: var(--radius-sm); background: none; color: var(--soft); cursor: pointer; }
.wl-close:hover { background: var(--lane); color: var(--ink); }
.wl-close svg { width: 20px; height: 20px; }
@keyframes fichly-welcome { from { opacity: 0; transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) { .welcome { animation: none; } }

/* =====================================================================
   Offres Fichly (formation.js, section g ; données : parcours.js › offres)
   Fiches imprimées, formations Yellow et Green Belt. Une carte par endroit,
   jamais de pop-up. La couleur d’une ceinture arrive par --belt / --on-belt.
   ===================================================================== */
.offers { display: grid; gap: 30px; margin-top: 30px; }
.offers + .lesson-end { margin-top: 30px; }

/* Carte d’une fiche imprimée */
.offer-product {
  display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 12px 16px; align-items: start;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px;
}
.op-ico { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--module-m); color: var(--ink); }
.op-ico svg { width: 26px; height: 26px; }
.op-k, .bc-k { font: 700 .74rem/1.3 var(--title); letter-spacing: .08em; text-transform: uppercase; color: var(--soft); margin: 0 0 4px; }
.op-title { font: 700 1.08rem/1.3 var(--title); color: var(--navy); margin: 0 0 4px; }
.op-badge { display: inline-block; vertical-align: .12em; margin-left: 4px; font: 700 .74rem/1 var(--title); padding: 4px 8px; border-radius: var(--pill); background: var(--rm); color: var(--ink); }
.op-text { margin: 0; color: var(--soft); font-size: .94rem; line-height: 1.5; }
.op-buy { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px 14px; flex-wrap: wrap; padding-top: 12px; border-top: 1px solid var(--line); }
.op-price { margin: 0; font: 700 1.15rem/1.2 var(--title); color: var(--navy); }
.op-price small { display: block; margin-top: 3px; font: 400 .8rem/1.3 var(--body); color: var(--soft); }
.op-buy .btn { flex: none; }
@media (min-width: 720px) {
  .offer-product { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: center; gap: 18px; padding: 20px 22px; }
  .op-ico { width: 52px; height: 52px; }
  .op-buy { grid-column: auto; flex-direction: column; align-items: flex-end; text-align: right; border-top: 0; padding: 0 0 0 20px; border-left: 1px solid var(--line); min-width: 170px; }
}

/* Carte d’une ceinture */
.belt-card {
  --belt: #3c4399; --on-belt: #ffffff;
  position: relative; display: flex; flex-direction: column; gap: 16px; min-width: 0;
  background: var(--card); border: 1px solid var(--belt); border-radius: var(--radius); padding: 32px 24px 24px;
}
.belt-card.is-white { border-color: var(--line-ui); }
.bc-flag {
  position: absolute; top: -15px; left: 18px; margin: 0; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 12px; border-radius: var(--pill); background: var(--belt); color: var(--on-belt); font: 700 .76rem/1 var(--title); letter-spacing: .02em; white-space: nowrap;
}
.bc-flag svg { width: 14px; height: 14px; }
.is-white .bc-flag { background: var(--brand-fill); color: var(--on-brand); }
.bc-head { display: flex; align-items: center; gap: 14px; }
.bc-belt { flex: none; width: 58px; height: 34px; color: var(--ink); }
.belt-ico { display: block; width: 100%; height: 100%; }
.bc-title { margin: 0; font: 700 1.18rem/1.25 var(--title); color: var(--navy); }
.bc-tag { margin: 3px 0 0; color: var(--soft); font-size: .93rem; line-height: 1.45; }
.bc-pitch { margin: 0; color: var(--ink); font-size: .98rem; line-height: 1.55; }
.bc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.bc-points li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 8px; font-size: .93rem; line-height: 1.45; }
.bc-points svg { box-sizing: content-box; width: 12px; height: 12px; margin-top: 2px; padding: 3px; border-radius: 50%; background: var(--vm); color: var(--ink); }
.bc-foot { margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.bc-price { margin: 0; }
.bc-price strong { display: block; font: 700 1.2rem/1.2 var(--title); color: var(--navy); }
.bc-price span { display: block; margin-top: 2px; font-size: .82rem; line-height: 1.35; color: var(--soft); }
.bc-foot .btn { flex: 1 1 auto; padding-left: 16px; padding-right: 16px; }
.bc-more { margin: auto 0 0; }
.bc-link { display: inline-flex; align-items: center; gap: 5px; font: 700 .92rem/1.3 var(--title); color: var(--ink); }
.bc-link svg { width: 14px; height: 14px; flex: none; }
.bc-next { margin: 0; font-size: .9rem; color: var(--soft); }
.bc-next .bc-link { display: inline; font-size: inherit; }
.bc-next .bc-link svg { display: none; }

/* Carte large (fin de partie, dans un module) */
@media (min-width: 720px) {
  .belt-card.is-wide { padding: 28px 26px 22px; }
  .belt-card.is-wide .bc-title { font-size: 1.3rem; }
  .belt-card.is-wide .bc-points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
  .belt-card.is-wide .bc-foot .btn { flex: 0 0 auto; }
}

/* Petite carte (Black Belt : présente dans l’échelle, sans mise en avant) */
.belt-card.is-small { background: var(--card); padding: 24px 16px 16px; gap: 12px; }
.belt-card.is-small .bc-title { font-size: 1.05rem; }
.belt-card.is-small .bc-belt { width: 48px; height: 28px; }

/* Accueil : l’échelle des ceintures */
.belt-ladder { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 30px 16px; grid-template-columns: minmax(0, 1fr); }
.belt-ladder > li { position: relative; display: flex; min-width: 0; }
.belt-ladder > li > .belt-card { flex: 1; }
.belt-ladder > li.is-small { align-items: flex-start; }
@media (min-width: 700px) { .belt-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1060px) {
  .belt-ladder { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr) minmax(0, 1.3fr) minmax(0, .72fr); gap: 16px 22px; }
  .belt-ladder > li:not(:last-child)::after {
    content: "→"; position: absolute; z-index: 1; right: -19px; top: 34px; width: 16px; text-align: center;
    font: 700 1rem/1 var(--title); color: var(--soft);
  }
  /* Colonnes étroites : la ceinture au-dessus du nom */
  .belt-ladder .bc-head { flex-direction: column; align-items: flex-start; gap: 10px; }
}
#aller-plus-loin .offer-product { margin-top: 22px; }

/* Examen réussi : la suite du parcours */
.offer-next { margin-top: 32px; padding: 32px 24px 24px; border-radius: var(--radius); background: var(--bf-c); border: 1px solid var(--bf); }
.offer-next .h2 { margin-bottom: 10px; }
.offer-next .lead { margin: 0; font-size: 1rem; }
.offer-duo { display: grid; gap: 30px 16px; margin-top: 32px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.offer-aside { display: flex; align-items: flex-start; gap: 10px; margin: 20px 0 0; font-size: .92rem; color: var(--soft); }
.offer-aside > svg { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--ink); }
.offer-aside .bc-link { display: inline; }
.offer-aside .bc-link svg { display: none; }
@media (min-width: 760px) { .offer-next { padding: 34px 32px 28px; } }
.offer-next .offer-product { margin-top: 24px; }

/* Formations : liens secondaires sous le bouton principal (« En savoir plus », échange de 30 min) */
.bc-sec { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.bc-more.bc-sec { margin-top: auto; }
/* Carte détaillée (aller-plus-loin.html) : chiffres clés (.hero-facts) et « Pour qui ? » (.callout.clair) */
.belt-card .hero-facts { margin: 0; }
.belt-card .callout { margin: 0; }

/* Pack illustré : le visuel fourni par Fichly remplace l’icône */
.op-img { display: block; width: 100%; height: auto; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--white); }
.offer-product.has-img { grid-template-columns: 96px minmax(0, 1fr); }
@media (min-width: 720px) { .offer-product.has-img { grid-template-columns: 132px minmax(0, 1fr) auto; } }
/* Grande carte (aller-plus-loin.html) : le visuel, puis le contenu du pack et l’achat */
.offer-product.is-large { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 20px; }
.offer-product.is-large .op-img { max-width: 360px; margin: 0 auto; }
.offer-product.is-large .op-title { font-size: 1.3rem; }
.offer-product.is-large .bc-points { margin-top: 14px; }
.offer-product.is-large .op-buy { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; min-width: 0; padding: 14px 0 0; border-left: 0; border-top: 1px solid var(--line); }
@media (min-width: 860px) {
  .offer-product.is-large { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); column-gap: 36px; padding: 28px; }
  .offer-product.is-large .op-img { grid-row: 1 / span 2; max-width: none; margin: 0; }
  .offer-product.is-large .op-buy { grid-column: 2; }
}

/* Fin du parcours (examen réussi) : la vidéo de fin, sous l’attestation */
.exam-outro { margin-top: 28px; }
.exam-outro .video { margin-top: 18px; }

/* Appel final sur fond bleu nuit : second bouton en contour blanc */
.acces-final .btn.ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.acces-final .btn.ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }