/* Plateforme « L'IA mon Alliée » — charte LIAMA, validée le 06/08/2026.
   Fond clair intégral : le cockpit est un outil de travail, pas une page de vente.

   AUCUNE couleur hors de la charte. Surtout pas l'or ni le bleu nuit : ils sont la
   signature de Studio LANFANT, qui est une AUTRE marque. La charte les nomme parmi ce
   qu'on évite, et ils s'affichaient pourtant ici — voir `--laiton` plus bas. */
:root{
  /* --- les couleurs de marque, telles quelles ------------------------------- */
  --corail:#FF5A3C;      /* accent principal : boutons, nombres, étiquettes, filets */
  --corail-d:#D6431F;    /* survol et état actif du corail */
  --lagon:#17C3B2;       /* accent secondaire : liens, contours de cartes, pastilles */
  --lagon-d:#0E8F82;     /* texte de lien sur fond clair */
  --graphite:#15181C;    /* texte principal sur fond clair */
  --graphite-l:#1D2126;
  --ecume:#FAF7F2;       /* fond crème — jamais un blanc pur */
  --blanc:#FFFFFF;
  --gris-texte:#5B6675;
  --bordure:#E3E0DA;
  --nuit:#0D0F12;

  /* --- teintes claires : des MÉLANGES de la palette, jamais des couleurs de plus.
         Valeurs calculées et figées ici plutôt qu'en `color-mix()` : la version
         statique remise au formateur doit s'afficher partout, sans condition. --- */
  --corail-soft:#FFEAE6;   /* corail à 13 % sur blanc */
  /* Ce qui s'écrit SUR un aplat d'accent. Le blanc n'y tient pas — 3,10 sur le
     corail, 2,21 sur le lagon, quand il en faut 4,5. Le graphite de la charte
     donne 5,75 et 8,90 : le seuil se tient sans ajouter une seule couleur. */
  --sur-accent:var(--graphite);
  --corail-mid:#FFD1C8;    /* corail à 28 % sur blanc */
  --lagon-soft:#E3F8F6;    /* lagon à 12 % sur blanc */

  /* --- les anciens noms, conservés : toute la feuille de style les appelle.
         Ils désignent désormais la charte LIAMA. --- */
  --cuivre:var(--corail); --cuivre-d:var(--corail-d);
  --cuivre-soft:var(--corail-soft); --cuivre-mid:var(--corail-mid);
  /* `--laiton` n'était NULLE PART déclaré : les quinze règles qui l'appelaient tombaient
     toutes sur leur repli, `#C8A84B` — l'or de Studio LANFANT, affiché pour de vrai dans
     le produit LIAMA. Il désigne maintenant le lagon, l'accent secondaire de la charte. */
  --laiton:var(--lagon);
  --noir:var(--graphite); --gris:var(--gris-texte);
  --gris-l:#646E7D; --creme:var(--ecume); --paper-2:#F7F4EF;
  --bord:var(--bordure); --bord-2:#BABBBC;

  /* --- les états sont des SIGNAUX, pas de la marque. Le succès rejoint le lagon de la
         charte ; l'alerte et l'erreur restent distinctes, sinon plus rien ne se lit — mais
         l'ambre quitte l'or de Studio LANFANT pour un brun neutre. --- */
  --vert:var(--lagon-d); --vert-bg:var(--lagon-soft);
  --rouge:#B3261E; --rouge-bg:#FBEAEA;
  --ambre:#8A5A00; --ambre-bg:#FBF1DD;
  --ombre:0 1px 2px rgba(21,24,28,.06), 0 4px 14px rgba(21,24,28,.08);
  --ombre-md:0 6px 22px rgba(21,24,28,.12), 0 2px 6px rgba(21,24,28,.06);
  /* Alias utilisés par les blocs « import de site », « plan DNS » et « passer sur Hostinger ».
     Ils étaient référencés sans jamais être déclarés : un var() non résolu et sans repli
     invalide toute la déclaration, si bien que ces cartes s'affichaient sans bordure ni fond
     — sur la bascule vers l'espace apprenant, justement (audit 2026-07-28). */
  --border:var(--bord); --card:var(--blanc); --bg:var(--creme); --muted:var(--gris);
  /* Les trois dégradés de gamme de la charte, à 150°. process a déjà ses deux stops
     (--lagon / --lagon-d) ; business et cockpit reçoivent leur fin ici. */
  --g-business:linear-gradient(150deg,var(--corail),#C93F22);
  --g-cockpit:linear-gradient(150deg,var(--graphite),#2A3138);
  --g-process:linear-gradient(150deg,var(--lagon),var(--lagon-d));
  --gamme:var(--g-business);   /* défaut ; #app[data-espace] le surcharge */
}
/* Couleur de gamme (vague 4) : la bande prend la gamme de l'espace actif. Un seul accent
   vif par écran — la bande est fine (4 px), elle oriente le staff qui bascule d'espace et
   le néophyte qui ne sait pas encore où il est. */
#app[data-espace="apprenant"]{--gamme:var(--g-business)}
#app[data-espace="abonne"]{--gamme:var(--g-process)}
#app[data-espace="formateur"]{--gamme:var(--g-cockpit)}
.bande-gamme{height:4px;background:var(--gamme);flex:none}
.bande-gamme-titre{border-radius:2px;margin:0 0 16px}
/* Les deux polices de la charte, SERVIES PAR NOUS. Pas d'appel à Google : le cockpit
   tourne aussi en application de bureau, et une police distante le laisserait sans
   typographie hors ligne — en plus d'annoncer chaque ouverture à un tiers. */
@font-face{
  font-family:"Space Grotesk"; src:url("/fonts/SpaceGrotesk.ttf") format("truetype");
  font-weight:400 500; font-display:swap;
}
@font-face{
  font-family:"Space Grotesk"; src:url("/fonts/SpaceGroteskMed.ttf") format("truetype");
  font-weight:600 700; font-display:swap;
}
@font-face{
  font-family:"Public Sans"; src:url("/fonts/PublicSans.ttf") format("truetype");
  font-weight:400 500; font-display:swap;
}
@font-face{
  font-family:"Public Sans"; src:url("/fonts/PublicSansBold.ttf") format("truetype");
  font-weight:600 700; font-display:swap;
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:"Public Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--creme); color:var(--noir); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
/* Interlettrage des titres : −0,01em, comme le prescrit la charte. */
h1,h2,h3{font-family:"Space Grotesk","Public Sans",sans-serif;letter-spacing:-.01em;font-weight:700}
button{font-family:inherit;cursor:pointer}
a{color:var(--cuivre);text-decoration:none}

/* ---------------- LOGIN — fond clair ---------------- */
#login{
  position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:var(--creme);color:var(--noir);gap:28px;
}
/* Le logo de la marque, pas son nom composé en lettres : la charte le veut complet sur
   fond clair, et c'est la première chose que voit l'apprenant. */
/* Le logo suit la hauteur de l'écran : sur un portable de 13 pouces il ne mange pas
   le formulaire, sur un écran de bureau il garde sa présence. */
#login .brand-logo{display:block;width:auto;height:clamp(170px,32vh,340px);margin:0 auto}
#login .brand-gamme{margin-top:10px;text-align:center;font-family:"Space Grotesk","Public Sans",sans-serif;
  font-size:15px;font-weight:700;letter-spacing:.3em;text-transform:uppercase;color:var(--corail)}
#login .tag{color:var(--gris);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin-top:-14px}
#login .roles{display:flex;gap:20px;margin-top:10px}
#login .role{
  width:230px;padding:28px 24px;background:var(--blanc);border:1.5px solid var(--bord);
  border-radius:14px;text-align:center;transition:.18s;box-shadow:var(--ombre);
}
#login .role:hover{background:var(--cuivre-soft);border-color:var(--cuivre);transform:translateY(-3px)}
#login .role .ic{font-size:30px;margin-bottom:10px}
#login .role h3{font-size:16px;margin-bottom:6px;color:var(--noir)}
#login .role p{color:var(--gris-l);font-size:12px}

/* ---------------- APP SHELL — sidebar claire ---------------- */
.hidden{display:none!important}
/* L'ATTRIBUT `hidden` doit cacher, toujours. La règle du navigateur (`[hidden]{display:none}`)
   vient de sa feuille par défaut : n'importe quelle règle d'AUTEUR qui repose `display` sur le
   même élément la bat, quelle que soit sa spécificité. `#hdIdent` porte `hidden` dans
   index.html et `.hd-ident{display:flex}` ici même : la carte d'en-tête ne s'est donc JAMAIS
   cachée, et `el.hidden = true` (app.js, majIdentiteEntete) laissait à l'écran une boîte
   blanche bordée et VIDE en espace apprenant et en espace « Abonnement actif » — constaté à la
   capture le 22/08/2026. Posée ici, la règle vaut pour tout élément à venir qui utilisera
   l'attribut : le piège ne se retend pas. */
[hidden]{display:none!important}
#app{display:flex;height:100vh}
#side{
  width:248px;background:var(--paper-2);color:var(--noir);display:flex;flex-direction:column;flex-shrink:0;
  border-right:1px solid var(--bord);
}
#side .logo{padding:18px 22px 14px;border-bottom:1px solid var(--bord);text-align:center}
/* 120 px dans un en-tête, 78 px en petit — les deux bornes de la charte. Entre les
   deux, il suit la hauteur de la fenêtre : la barre latérale porte une navigation à
   quinze entrées, et un logo fixe la repousse hors de l'écran sur un portable. */
#side .logo img{display:block;width:auto;height:clamp(96px,14vh,150px);margin:0 auto}
/* L'étiquette de gamme, seule chose qui bouge : « le nom ne change jamais ; seule
   l'étiquette de gamme suit » (charte). */
#side .logo-gamme{display:block;margin-top:2px;font-family:"Space Grotesk","Public Sans",sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--graphite)}
#side .role-badge{margin:14px 22px;padding:5px 10px;border-radius:6px;font-size:10px;letter-spacing:1.5px;text-transform:uppercase;align-self:flex-start;font-weight:700}
.badge-admin{background:var(--cuivre);color:var(--sur-accent)}
.badge-apprenant{background:var(--cuivre-soft);color:var(--graphite)}
/* Badge de compte réel (non-staff) : jusqu'à trois pastilles, un état par rôle réellement
   porté. « actif » = l'espace ouvert · « vrai » = un autre rôle réel de ce compte, non ouvert
   ici · « off » = jamais vrai pour ce compte. */
.role-badge-row{margin:14px 22px 6px}
.role-pills{display:flex;gap:4px;flex-wrap:wrap}
.pill-role{padding:5px 10px;border-radius:9px;font-size:11px;font-weight:600}
.pill-role.actif{background:var(--cuivre);color:var(--sur-accent)}
.pill-role.vrai{background:none;border:1px solid var(--cuivre);color:var(--cuivre)}
.pill-role.off{background:none;border:1px solid var(--bord);color:var(--gris-l)}
#side nav{flex:1;overflow:auto;padding:4px 12px}
#side nav button{
  display:flex;align-items:center;gap:11px;width:100%;text-align:left;background:none;border:none;color:var(--gris);
  padding:11px 12px;border-radius:9px;font-size:13.5px;margin-bottom:2px;transition:.12s;
}
#side nav button:hover{background:var(--cuivre-soft);color:var(--cuivre-d)}
#side nav button.active{background:var(--cuivre);color:var(--sur-accent);font-weight:600}
#side nav button .ic{width:18px;text-align:center}
#side .foot{padding:14px 22px;border-top:1px solid var(--bord);font-size:11px;color:var(--gris-l)}
#side .foot button{background:none;border:1px solid var(--bord-2);color:var(--gris);padding:6px 12px;border-radius:7px;font-size:11px;margin-top:8px;width:100%}
#side .foot button:hover{border-color:var(--cuivre);color:var(--cuivre)}

#main{flex:1;overflow:auto;padding:28px 34px;scrollbar-gutter:stable}
#demoBanner{background:var(--ambre-bg);border:1px solid #E6C36A;color:var(--ambre);
  padding:10px 16px;border-radius:10px;font-size:12.5px;margin-bottom:18px;line-height:1.45}
#main header{margin-bottom:22px}
#main header h1{font-size:23px;color:var(--noir)}
#main header .sub{color:var(--gris);font-size:13px;margin-top:4px}

/* cards / grid */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--blanc);border:1px solid var(--bord);border-radius:13px;padding:18px 20px;box-shadow:var(--ombre)}
.card h3{font-size:13px;letter-spacing:.4px;color:var(--noir);margin-bottom:12px;font-family:"Space Grotesk";font-weight:700;text-transform:uppercase}
.kpi{display:flex;flex-direction:column;gap:3px}
.kpi .val{font-family:"Space Grotesk","Public Sans",sans-serif;font-size:30px;color:var(--cuivre);line-height:1}
.kpi .lab{color:var(--gris);font-size:12px}

/* table — zéro fond sombre */
table{width:100%;border-collapse:collapse;font-size:13px;background:var(--blanc);border-radius:11px;overflow:hidden;box-shadow:var(--ombre)}
/* Tout tableau de #view voyage dans ce cadre (posé automatiquement, ui/app.js) : sur écran
   étroit, le tableau garde sa mise en page et DÉFILE dans son cadre au lieu de se comprimer
   jusqu'à l'illisible puis d'être coupé par l'overflow:hidden des coins arrondis. Le cadre
   reprend rayon et ombre ; la table y renonce, sinon l'ombre se double. */
.table-wrap{overflow-x:auto;border-radius:11px;box-shadow:var(--ombre)}
.table-wrap table{box-shadow:none}
@media(max-width:880px){.table-wrap table{min-width:760px}}
@media print{.table-wrap{overflow-x:visible;box-shadow:none}}
th{background:var(--paper-2);color:var(--noir);text-align:left;padding:11px 14px;font-size:11px;letter-spacing:.5px;text-transform:uppercase;font-weight:700;border-bottom:1px solid var(--bord-2)}
td{padding:11px 14px;border-bottom:1px solid var(--bord);vertical-align:middle}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--creme)}

/* feux / pills */
.dot{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:5px;vertical-align:-1px}
.dot.on{background:var(--vert)} .dot.off{background:#D9534F;opacity:.5}
.pill{display:inline-block;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.ice-edit{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid var(--cuivre);border-radius:8px;font-size:13px;font-family:inherit;resize:vertical;line-height:1.4}
.pill.ok{background:var(--vert-bg);color:var(--graphite)}
.pill.warn{background:var(--ambre-bg);color:var(--graphite)}
.pill.ko{background:var(--rouge-bg);color:var(--graphite)}
.pill.neutre{background:var(--paper-2);color:var(--gris)}

/* buttons */
/* L'arrêt d'urgence : fond rouge, texte BLANC. Le graphite de `--sur-accent` vaut pour
   les accents de la marque, pas pour le rouge — il y tombe à 2,74, et ce bouton est
   précisément celui qu'on doit lire du premier coup. */
.btn.stop{background:var(--rouge);color:var(--blanc);border-color:var(--rouge)}
.btn.stop:hover{background:#8E1E17;border-color:#8E1E17}
.btn{background:var(--cuivre);color:var(--sur-accent);border:none;padding:9px 16px;border-radius:9px;font-size:13px;font-weight:600;transition:.12s}
.btn:hover{background:var(--cuivre-d)}
.btn.ghost{background:none;border:1px solid var(--bord);color:var(--noir)}
.btn.ghost:hover{border-color:var(--cuivre);color:var(--cuivre)}
.btn.sm{padding:5px 11px;font-size:12px}

/* progress */
.bar{height:9px;background:var(--paper-2);border-radius:6px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--cuivre)}

/* forms */
label.fld{display:block;margin-bottom:12px}
label.fld span{display:block;font-size:12px;color:var(--gris);margin-bottom:4px;font-weight:600}
input,textarea,select{width:100%;padding:9px 11px;border:1px solid var(--bord);border-radius:8px;font-family:inherit;font-size:13px;background:var(--blanc);color:var(--noir)}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--cuivre)}
textarea{resize:vertical;min-height:64px}

/* misc */
.muted{color:var(--gris-l)}
.section-title{font-size:12px;text-transform:uppercase;letter-spacing:1px;color:var(--gris);margin:24px 0 10px;font-weight:700}
.note{background:var(--cuivre-soft);border-left:3px solid var(--cuivre);padding:10px 14px;border-radius:0 8px 8px 0;font-size:12.5px;margin:10px 0}
.spacer{height:18px}
.row-between{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tag-plat{display:inline-block;background:var(--cuivre);color:var(--sur-accent);font-size:9px;letter-spacing:.5px;padding:2px 7px;border-radius:5px;text-transform:uppercase;font-weight:700}
.empty{padding:40px;text-align:center;color:var(--gris-l)}
/* F8 — l'état vide qui enseigne : ce que c'est, pourquoi c'est vide, le prochain geste. */
.empty-guide{padding:30px 24px;text-align:center;color:var(--noir);background:var(--paper-2);border:1px dashed var(--bord-2);border-radius:11px;margin:10px 0}
/* F1 — terme défini : pointillé lagon sous le mot, bulle de définition au survol/tap. */
.terme-def{border-bottom:1px dashed var(--laiton);cursor:help;border-radius:2px}
.terme-def:focus-visible{outline:2px solid var(--cuivre);outline-offset:1px}
#termeBulle{position:absolute;z-index:2100;max-width:340px;background:var(--blanc);border:1px solid var(--bord);border-left:3px solid var(--laiton);border-radius:10px;box-shadow:var(--ombre-md);padding:12px 14px;font-size:12.5px;line-height:1.5;color:var(--noir)}
#termeBulle b{display:block;margin-bottom:3px;font-family:"Space Grotesk","Public Sans",sans-serif}
#termeBulle .tb-lien{display:inline-block;margin-top:8px;background:none;border:none;padding:0;font-size:12px;font-weight:600;color:var(--vert);cursor:pointer}
#termeBulle .tb-lien:hover{text-decoration:underline}
/* F1 — l'ancre atteinte se signale, puis s'efface. */
.glo-cible{background:var(--lagon-soft);border-radius:8px;transition:background 1.2s ease}
/* F6 — la modale de confirmation maison : deux boutons explicites, jamais un OK ambigu. */
.confirm-overlay{position:fixed;inset:0;background:rgba(13,15,18,.45);z-index:2200;display:flex;align-items:center;justify-content:center;padding:20px}
.confirm-card{background:var(--blanc);border-radius:13px;box-shadow:var(--ombre-md);padding:20px 22px;max-width:460px;width:100%}
.confirm-card b{font-family:"Space Grotesk","Public Sans",sans-serif;font-size:15px}
.confirm-corps{font-size:13px;line-height:1.55;margin:8px 0 14px;white-space:pre-line;color:var(--noir)}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
/* Vague 3 — « Mes prospects » : les panneaux groupés par étage du travail. */
.pr-grps{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:8px}
.pr-grp{display:flex;flex-direction:column;gap:5px}
.pr-grp-lab{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gris-l)}
.pr-grp > button{margin-right:4px}
/* F4 — la visite guidée ancrée : l'élément décrit passe AU-DESSUS du voile, halo corail ;
   la carte se range en bas à droite pour laisser voir l'écran. #side ne crée aucun
   contexte d'empilement : le z-index du bouton surligné est global. */
.onb-spot{position:relative;z-index:9001;box-shadow:0 0 0 3px var(--cuivre),0 0 0 9px rgba(255,90,60,.22);border-radius:9px;background:var(--blanc)}
#assistFab.onb-spot{z-index:9001}
.onb-overlay.ancree{align-items:flex-end;justify-content:flex-end;background:rgba(28,24,20,.35);padding:24px 28px}
.onb-overlay.ancree .onb-card{text-align:left;max-width:400px}
.onb-overlay.ancree .onb-ic-xl{font-size:32px;margin-bottom:4px}
/* F2 — la chaîne de prospection : fait = lagon, courant = corail + halo, à venir = gris.
   Réutilise le gabarit .pc-* de la bande de parcours ; seules les couleurs d'état changent. */
.pc-step.ch-fait .pc-num{background:var(--laiton);border-color:var(--laiton);color:#fff}
.pc-step.ch-fait .pc-lab{color:var(--noir)}
.pc-step.ch-cur .pc-num{border-color:var(--cuivre);color:var(--cuivre-d);box-shadow:0 0 0 4px rgba(255,90,60,.18)}
.pc-step.ch-cur .pc-lab{color:var(--noir);font-weight:600}
.pc-step.ch-encours .pc-num{border-color:var(--cuivre);color:var(--cuivre-d)}
.pc-step.ch-lock .pc-num{background:var(--paper-2);color:var(--gris-l)}
.pc-step.ch-lock .pc-lab{color:var(--gris-l)}
/* F10 — l'autruche aux bons moments, et le liseré bicolore qui signe les moments. */
.autruche{display:block;margin:0 auto;max-width:100%}
.lisere-liama{height:4px;border-radius:2px;margin-top:12px;background:linear-gradient(90deg,var(--corail) 0 38%,var(--lagon) 38% 100%)}
/* F7 — carte de progression persistante des opérations longues. */
#opCard{position:fixed;right:22px;bottom:22px;z-index:1900;max-width:360px;background:var(--blanc);border:1px solid var(--bord);border-left:3px solid var(--cuivre);border-radius:12px;box-shadow:var(--ombre-md);padding:14px 16px;font-size:13px}
#opCard b{font-family:"Space Grotesk","Public Sans",sans-serif;font-size:13.5px}
#opCard #opDetail{font-size:12.5px;margin-top:4px}
@media print{#opCard{display:none}}
.steps{display:flex;gap:8px;flex-wrap:wrap}
.step{flex:1;min-width:120px;padding:12px;border-radius:10px;border:1px solid var(--bord);background:var(--blanc);text-align:center}
.step.done{border-color:var(--vert);background:var(--vert-bg)}
.step .ic{font-size:20px}
.step .t{font-size:11px;font-weight:600;margin-top:4px}

/* ============ SLIDES / MODE PRÉSENTATION — tout clair ============ */
.slides-bar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.slides-bar .prog{flex:1;min-width:160px}
.slide-stage{position:relative;width:100%;max-width:1040px;margin:0 auto;aspect-ratio:16/9;
  background:var(--blanc);
  border:1px solid var(--bord);border-radius:18px;box-shadow:var(--ombre-md);
  overflow:hidden;display:flex;flex-direction:column}
.slide-top{height:7px;background:var(--cuivre)}
.slide-top.warn{background:var(--ambre)} .slide-top.neutre{background:var(--gris-l)}
.slide-inner{flex:1;display:grid;grid-template-columns:1.45fr 1fr;gap:0;min-height:0;overflow:hidden}
.slide-left{padding:30px 28px 22px 36px;display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden}
.slide-kicker{font-family:"Space Grotesk";font-size:11px;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--cuivre);font-weight:700;margin-bottom:6px}
.slide-h1{font-family:"Space Grotesk","Public Sans",sans-serif;font-size:27px;line-height:1.06;
  color:var(--noir);margin:0 0 10px}
.slide-accroche{font-size:14px;font-style:italic;color:var(--gris);border-left:3px solid var(--cuivre);
  padding-left:11px;margin-bottom:14px;line-height:1.35}
.slide-points{list-style:none;padding:0;margin:4px 0 0 0;display:flex;flex-direction:column;gap:8px;justify-content:center;flex:1}
.slide-points li{position:relative;padding-left:19px;font-size:13.5px;line-height:1.34;margin:0;color:var(--noir)}
.slide-points li b{color:var(--noir)}
.slide-points li::before{content:"";position:absolute;left:0;top:7px;width:8px;height:8px;border-radius:2px;background:var(--cuivre);transform:rotate(45deg)}
/* Zone droite — fond parchemin chaleureux (plus sombre) */
.slide-right{background:var(--paper-2);padding:24px 22px;display:flex;flex-direction:column;position:relative;min-width:0;min-height:0;overflow:hidden;border-left:1px solid var(--bord)}
.slide-illu{flex:1;display:flex;align-items:center;justify-content:center;min-height:120px}
.slide-illu svg{width:130px;height:130px}
.slide-right{position:relative;justify-content:flex-start}
.slide-scene{flex:1;min-height:120px;width:100%;display:flex;align-items:center;justify-content:center}
.slide-scene .scene-photo{width:100%;height:100%;min-height:120px;object-fit:cover;border-radius:11px;
  box-shadow:0 4px 14px rgba(40,28,14,.18);filter:saturate(1.02)}
.slide-badge{position:absolute;top:12px;right:14px;width:30px;height:30px;opacity:.7;
  background:rgba(250,246,238,.8);border-radius:7px;padding:4px;z-index:2}
.slide-badge svg{width:22px;height:22px}
/* Layout inverse */
.slide-inner.inv{grid-template-columns:1fr 1.45fr}
.slide-inner.inv .slide-left{order:2;padding:30px 36px 22px 28px}
.slide-inner.inv .slide-right{order:1}

/* Layout focus — fond parchemin foncé avec voile chaud */
.slide-focus{flex:1;position:relative;overflow:hidden;display:flex;min-height:0}
.focus-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.focus-veil{position:absolute;inset:0;background:linear-gradient(100deg,rgba(250,246,238,.97) 0%,rgba(243,236,223,.94) 46%,rgba(243,236,223,.70) 100%)}
.focus-inner{position:relative;z-index:2;color:var(--noir);padding:30px 38px;width:64%;display:flex;flex-direction:column;justify-content:center;min-width:0}
.focus-inner .slide-kicker{color:var(--cuivre)}
.focus-h1{font-family:"Space Grotesk","Public Sans",sans-serif;font-size:33px;line-height:1.06;color:var(--noir);margin:0 0 10px}
.focus-accroche{font-size:14.5px;font-style:italic;color:var(--gris);border-left:3px solid var(--cuivre);padding-left:11px;margin-bottom:12px;line-height:1.35}
.focus-inner .slide-points{flex:0 1 auto}
.focus-inner .slide-points li{color:var(--noir)}
.focus-inner .slide-points li b{color:var(--noir)}
.focus-inner .slide-memo{background:rgba(197,86,47,.08);border-color:rgba(197,86,47,.3)}
.focus-inner .slide-memo div>span{color:var(--noir)}
.focus-inner .slide-memo b{color:var(--cuivre-d)}
.focus-inner .slide-exemple{color:var(--gris);border-left-color:var(--bord)}
.focus-terms{position:absolute;right:16px;top:16px;z-index:2;width:236px;display:flex;flex-direction:column;gap:5px}
/* La Question flash était posée PAR-DESSUS le bas de la zone de focus (position:absolute) :
   elle masquait la fin du contenu sans que rien ne l'indique (J3-z). Elle vit désormais dans
   le flux, à la suite du contenu, à l'intérieur de `.focus-inner` — elle pousse ce qui la
   précède au lieu de le recouvrir, et le filet de débordement la compte comme du contenu. */
.slide-focus .focus-inner .quiz-pill{align-self:flex-end;margin-top:12px}

/* Exemple */
.slide-exemple{margin-top:9px;display:flex;gap:9px;align-items:baseline;font-size:12px;line-height:1.35;color:var(--gris);border-left:3px solid var(--bord);padding-left:10px}
.slide-exemple b{font-size:9px;letter-spacing:1.8px;text-transform:uppercase;color:var(--gris-l);font-family:"Space Grotesk";flex:none}
.slide-exemple span{font-style:italic}

/* À retenir */
.slide-memo{margin-top:10px;display:flex;gap:11px;align-items:center;background:rgba(197,86,47,.08);
  border:1px solid rgba(197,86,47,.28);border-left:4px solid var(--cuivre);border-radius:10px;padding:8px 13px}
.slide-memo .memo-ic{color:var(--cuivre);font-size:17px;line-height:1}
.slide-memo b{display:block;font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--cuivre-d);font-family:"Space Grotesk"}
.slide-memo div>span{font-size:13px;font-weight:600;color:var(--noir);line-height:1.3}

/* Schéma conceptuel — fond parchemin */
.slide-scene .scene-schema{width:100%;height:100%;min-height:120px;display:flex;align-items:center;justify-content:center;
  background:var(--creme);border:1px solid var(--bord);border-radius:11px;padding:8px}
.slide-scene .scene-schema svg{width:100%;height:100%;max-height:100%}

/* Question flash — fond clair */
.quiz-pill{margin-top:10px;align-self:center;flex:none;background:var(--cuivre);color:var(--sur-accent);border:0;border-radius:999px;
  padding:7px 16px;font-size:12px;font-weight:700;font-family:"Space Grotesk";letter-spacing:.4px;
  box-shadow:0 2px 10px rgba(197,86,47,.35);transition:.15s}
.quiz-pill:hover{background:var(--cuivre-d);transform:translateY(-1px)}
/* Quiz overlay — fond blanc/crème, texte sombre */
.slide-quiz{position:absolute;inset:0;z-index:5;background:rgba(250,246,238,.98);color:var(--noir);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:13px;padding:30px 46px;text-align:center}
.slide-quiz.hidden{display:none}
.slide-quiz .qz-close{position:absolute;top:12px;right:16px;width:34px;height:34px;border-radius:50%;
  border:1px solid var(--bord-2);background:transparent;color:var(--gris);font-size:17px}
.slide-quiz .qz-close:hover{border-color:var(--cuivre);color:var(--cuivre)}
.qz-kicker{font-family:"Space Grotesk";font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cuivre);font-weight:700}
.qz-q{font-family:"Space Grotesk","Public Sans",sans-serif;font-size:18px;line-height:1.25;max-width:780px;color:var(--noir)}
.qz-opts{display:flex;flex-direction:column;gap:9px;width:100%;max-width:640px}
.qz-opt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--blanc);
  border:1px solid var(--bord);border-radius:10px;padding:10px 15px;color:var(--noir);font-size:13.5px;transition:.15s;cursor:pointer}
.qz-opt:hover:not(:disabled){border-color:var(--cuivre);background:var(--cuivre-soft)}
.qz-opt:disabled{cursor:default;opacity:.75}
.qz-opt .qz-letter{flex:none;width:26px;height:26px;border-radius:50%;border:1px solid var(--bord-2);
  display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;font-family:"Space Grotesk";color:var(--gris)}
.qz-opt.good{border-color:var(--cuivre);background:var(--cuivre-soft);opacity:1}
.qz-opt.good .qz-letter{background:var(--cuivre);border-color:var(--cuivre);color:var(--sur-accent)}
.qz-opt.bad{border-color:var(--bord);opacity:.38;text-decoration:line-through}
.qz-fb{min-height:36px;max-width:640px;font-size:13.5px;line-height:1.4;font-weight:600}
.qz-fb.good{color:var(--cuivre-d);animation:qzPop .35s ease}
.qz-fb.bad{color:var(--gris)}
@keyframes qzPop{0%{transform:scale(.85);opacity:0}100%{transform:scale(1);opacity:1}}

/* Animations mode présentation */
.deck-overlay .slide-points li{animation:ptIn .4s both;animation-delay:calc(.15s + var(--i,0)*.1s)}
.deck-overlay .slide-memo{animation:memoIn .45s both;animation-delay:.75s}
.deck-overlay .slide-scene .scene-photo,.deck-overlay .slide-scene .scene-schema{animation:sceneIn .5s both .1s}
.deck-overlay .quiz-pill{animation:memoIn .4s both 1s}
@keyframes ptIn{0%{opacity:0;transform:translateY(9px)}100%{opacity:1;transform:none}}
@keyframes memoIn{0%{opacity:0;transform:scale(.96)}100%{opacity:1;transform:scale(1)}}
@keyframes sceneIn{0%{opacity:0}100%{opacity:1}}

/* Lexique — zone droite slides */
.slide-terms{margin-top:11px;min-height:0;overflow:hidden}
.slide-terms .lbl{font-size:9.5px;letter-spacing:2px;text-transform:uppercase;color:var(--cuivre);font-weight:700;margin-bottom:6px}
.slide-term{background:var(--blanc);border:1px solid var(--bord);border-radius:8px;padding:6px 10px;margin-bottom:5px}
.slide-term b{color:var(--noir);font-size:12px;font-family:"Space Grotesk"}
.slide-term span{display:block;color:var(--gris);font-size:11px;line-height:1.28;margin-top:1px}

/* Pied de slide */
.slide-foot{display:flex;align-items:center;justify-content:space-between;padding:10px 22px;
  border-top:1px solid var(--bord);background:var(--blanc);font-size:11px;color:var(--gris)}
.slide-foot .phase-name{font-weight:700;color:var(--noir)}
.slide-dots{display:flex;gap:5px;flex-wrap:wrap;max-width:55%}
.slide-dots i{width:7px;height:7px;border-radius:50%;background:var(--bord);cursor:pointer}
.slide-dots i.on{background:var(--cuivre)} .slide-dots i.done{background:var(--gris-l)}
.slide-nav{display:flex;gap:8px}
.slide-nav button{width:38px;height:38px;border-radius:50%;border:1px solid var(--bord);background:var(--blanc);font-size:16px;cursor:pointer;color:var(--gris)}
.slide-nav button:hover{border-color:var(--cuivre);color:var(--cuivre)}
.slide-nav button:disabled{opacity:.3;cursor:default}
.slide-progress{height:6px;background:var(--paper-2);border-radius:6px;overflow:hidden}
.slide-progress>i{display:block;height:100%;background:var(--cuivre);transition:width .25s}

/* Miniature slide */
.slide-mini{width:1000px;zoom:.54;box-shadow:var(--ombre-md);margin:12px 0 4px}
/* La vignette est exclue de l'auto-fit JS (fit.js) : elle gardait donc 540px de large sur
   un téléphone de 390px et débordait. Repli d'échelle à la main (audit 2026-07-28). */
@media(max-width:620px){.slide-mini{zoom:.36}}
@media(max-width:430px){.slide-mini{zoom:.28}}
.tl-visual{margin-top:12px}
.tl-visual .row-between{margin-bottom:0}
.btn-illu{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;color:var(--cuivre);background:none;border:1px solid var(--bord);border-radius:7px;padding:5px 10px;cursor:pointer}
.btn-illu:hover{border-color:var(--cuivre)}

/* Overlay mode présentation — fond crème presque opaque */
.deck-overlay{position:fixed;inset:0;background:rgba(250,246,238,.97);z-index:999;display:flex;
  flex-direction:column;align-items:center;justify-content:flex-start;padding:20px 28px 28px;gap:12px;overflow-y:auto}
.deck-overlay .slide-stage{max-width:1000px;width:100%}
.deck-overlay .closex{position:fixed;top:16px;right:22px;z-index:8;font-size:30px;line-height:1;color:var(--gris);background:none;border:none;cursor:pointer}
.deck-overlay .closex:hover{color:var(--cuivre)}
.deck-row{display:flex;align-items:center;gap:20px;width:100%;max-width:1180px;justify-content:center}
.deck-arrow{width:62px;height:62px;flex-shrink:0;border-radius:50%;border:2px solid var(--bord-2);
  background:var(--blanc);color:var(--gris);font-size:30px;line-height:1;cursor:pointer;transition:.15s}
.deck-arrow:hover:not(:disabled){background:var(--cuivre);border-color:var(--cuivre);color:var(--sur-accent)}
.deck-arrow:disabled{opacity:.22;cursor:default}
.deck-overlay .esc-hint{color:var(--gris-l);font-size:11px;letter-spacing:.5px}
/* Barre d'outils du haut — collée en haut de l'overlay : elle reste sous la main même
   quand on fait défiler une longue antisèche (projection en cours au vidéoprojecteur). */
.deck-overlay .deckbar{width:100%;max-width:1000px;display:flex;align-items:center;gap:14px;color:var(--gris);
  position:sticky;top:-20px;z-index:6;padding:20px 0 10px;margin-top:-20px;
  background:linear-gradient(to bottom,var(--creme) 0,var(--creme) calc(100% - 10px),rgba(250,246,238,0) 100%)}
.deck-overlay .deckbar .slide-progress{flex:1;background:var(--paper-2)}

/* ============ BOÎTE À OUTILS DYNAMIQUE — fond clair ============ */
.pill.plat{background:var(--cuivre-soft);color:var(--graphite)}
.boite-hero{background:linear-gradient(135deg,var(--cuivre-soft),var(--paper-2));border-color:var(--cuivre-mid)}
.boite-hero h2{color:var(--noir)}
.boite-accroche{font-size:13px;font-style:italic;color:var(--gris);border-left:3px solid var(--cuivre);padding-left:11px;margin:6px 0 12px;line-height:1.4}
.boite-intro{color:var(--gris);font-size:13px;line-height:1.6}
.boite-intro p{margin:0 0 9px} .boite-intro b{color:var(--noir)}
.boite-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 4px}
.boite-chip{background:var(--blanc);border:1px solid var(--bord);color:var(--gris);font-size:12px;font-weight:600;padding:6px 12px;border-radius:20px;cursor:pointer;transition:.12s}
.boite-chip:hover{border-color:var(--cuivre);color:var(--cuivre)}
.boite-card{display:flex;flex-direction:column}
.boite-tags{display:flex;flex-wrap:wrap;gap:6px;margin:9px 0 4px}
.boite-tag{background:var(--creme);border:1px solid var(--bord);color:var(--gris);font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:6px}
.boite-tag-new{background:var(--cuivre-soft);border-color:var(--cuivre-mid);color:var(--cuivre-d)}
.boite-body{font-size:13px;line-height:1.55;color:var(--noir);margin-top:6px}
.boite-body p{margin:0 0 8px} .boite-body ul{margin:6px 0 8px 18px;padding:0} .boite-body li{margin:3px 0}
/* Prompts — fond parchemin foncé mais lisible */
.boite-prompt{margin-top:11px;background:var(--paper-2);border:1px solid var(--bord-2);border-radius:10px;padding:12px 13px}
.boite-prompt pre{margin:0 0 9px;white-space:pre-wrap;word-break:break-word;font-family:"SFMono-Regular",ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;color:var(--gris)}
.boite-copy{background:var(--cuivre)}
.boite-aide{margin-top:11px;background:var(--creme);border:1px solid var(--bord);border-radius:9px;padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.boite-aide-line{display:flex;gap:8px;font-size:12px;line-height:1.5;color:var(--gris)}
.boite-aide-line b{color:var(--noir)}
.boite-aide-ic{flex-shrink:0;font-size:13px;line-height:1.4}

/* ============ ASSISTANT (chatbot apprenant) — fond clair ============ */
#assistFab{position:fixed;right:22px;bottom:22px;width:56px;height:56px;border-radius:50%;
  background:var(--cuivre);color:var(--sur-accent);font-size:24px;border:none;cursor:pointer;z-index:900;
  box-shadow:0 6px 20px rgba(197,86,47,.35);transition:.15s}
#assistFab:hover{background:var(--cuivre-d);transform:translateY(-2px)}
#assistPanel{position:fixed;right:22px;bottom:88px;width:370px;max-width:calc(100vw - 44px);
  height:520px;max-height:calc(100vh - 130px);background:var(--blanc);border:1px solid var(--bord);
  border-radius:16px;box-shadow:var(--ombre-md);z-index:900;display:flex;flex-direction:column;overflow:hidden}
#assistPanel.hidden{display:none}
.assist-head{display:flex;justify-content:space-between;align-items:center;padding:13px 16px;
  background:var(--cuivre-soft);border-bottom:1px solid var(--bord)}
.assist-head b{font-size:14px;color:var(--noir)} .assist-sub{display:block;color:var(--gris);font-size:10.5px;margin-top:1px}
.assist-x{background:none;border:none;color:var(--gris);font-size:22px;cursor:pointer;line-height:1}
.assist-x:hover{color:var(--cuivre)}
.assist-msgs{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px;background:var(--creme)}
.assist-msg{display:flex} .assist-msg.u{justify-content:flex-end}
.assist-msg .bubble{max-width:84%;padding:9px 12px;border-radius:13px;font-size:12.7px;line-height:1.5}
.assist-msg.a .bubble{background:var(--blanc);border:1px solid var(--bord);color:var(--noir);border-bottom-left-radius:4px}
.assist-msg.u .bubble{background:var(--cuivre);color:var(--sur-accent);border-bottom-right-radius:4px}
.assist-key{padding:11px 14px;border-top:1px solid var(--bord);background:var(--blanc);display:flex;flex-direction:column;gap:7px}
.assist-key.hidden{display:none}
.assist-key-lbl{font-size:11.5px;color:var(--gris)}
.assist-input{display:flex;gap:8px;padding:11px 12px;border-top:1px solid var(--bord);background:var(--blanc);align-items:flex-end}
.assist-input textarea{flex:1;resize:none;min-height:38px;max-height:110px;font-size:13px;padding:9px 11px}
.assist-input .btn{flex-shrink:0;padding:9px 13px}

/* ============ VUE SCINDÉE FORMATEUR (deck) + PRÉSENTATION EN DIRECT APPRENANT ============ */
.deck-pane{display:flex;flex-direction:column;gap:9px;min-width:0}
.deck-pane-lbl{font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--gris);
  display:flex;align-items:center;justify-content:center;gap:6px}
.deck-pane-live{display:none}
.deck-row.split{align-items:flex-start;gap:18px;max-width:1340px;width:100%}
.deck-row.split .deck-pane{flex:1;align-items:center}
.deck-row.split .deck-pane-live{display:flex}
/* Slides rendues à leur taille de design (1000px) puis mises à l'échelle par JS (fitDeckStages)
   pour que TOUT le contenu tienne dans chaque panneau, sans troncature. */
.deck-row.split .slide-stage{width:1000px;max-width:none;flex:none}
.deck-row.split .deck-pane-live .slide-stage{outline:2px solid var(--cuivre-mid);outline-offset:2px}

/* point « en direct » pulsant */
.live-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--cuivre);
  box-shadow:0 0 0 0 rgba(197,86,47,.45);animation:livePulse 1.6s infinite}
@keyframes livePulse{0%{box-shadow:0 0 0 0 rgba(197,86,47,.45)}70%{box-shadow:0 0 0 7px rgba(197,86,47,0)}100%{box-shadow:0 0 0 0 rgba(197,86,47,0)}}

/* Apprenant — barre + scène présentation en direct */
.live-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.live-state{display:inline-flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;
  color:var(--cuivre-d);background:var(--cuivre-soft);padding:6px 13px;border-radius:999px}
.live-state.off{color:var(--gris);background:var(--paper-2)}
.live-state.off .live-dot{background:var(--gris-l);animation:none;box-shadow:none}
.live-modes{display:flex;gap:8px}
.live-bar .muted{margin-left:auto;font-size:12px;font-weight:600}
.live-stage{max-width:1040px;margin:0 auto;width:100%}
.live-stage.live-stage--masquee{aspect-ratio:unset;min-height:0}
.live-masquee{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;padding:22px 20px;text-align:center;border:1px dashed var(--bord-2);border-radius:14px;
  background:var(--paper-2)}
.live-masquee .lm-ic{font-size:26px;line-height:1}
.live-masquee p{margin:0;font-size:13.5px;color:var(--gris-texte)}
.live-masquee p.muted{font-size:12px}
.live-nav{justify-content:center;margin-top:16px;gap:10px}
.live-nav button{width:auto;height:auto;border-radius:9px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--noir)}
.live-nav button:disabled{opacity:.32;cursor:default}

/* Case facilitatrice — action guidée chez l'apprenant */
.facil-host{max-width:1040px;margin:14px auto 0}
.facil-host:empty{margin:0}

/* ===== Antisèche formateur — pense-bête privé adossé à la slide (volet formateur SEUL) ===== */
.antiseche-host{width:100%;max-width:1000px;margin:12px auto 0}
.antiseche-host:empty{margin:0}
.antiseche{background:var(--blanc);border:1.5px dashed var(--cuivre-mid);border-radius:14px;
  padding:14px 16px 13px;box-shadow:0 6px 18px rgba(28,24,20,.06);text-align:left}
.anti-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.anti-nav{display:flex;align-items:center;gap:8px;font-size:12px}
.anti-navbtn{width:26px;height:26px;border-radius:8px;border:1px solid var(--bord);background:var(--blanc);
  font-size:15px;line-height:1;cursor:pointer;color:var(--noir)}
.anti-navbtn:disabled{opacity:.32;cursor:default}
.anti-badge{font-weight:800;font-size:12.5px;letter-spacing:.3px;color:var(--cuivre-d);
  display:inline-flex;align-items:center;gap:6px}
.anti-private{font-size:10.5px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;
  color:var(--gris-l);background:var(--paper-2);border:1px solid var(--bord);border-radius:20px;padding:3px 9px;white-space:nowrap}
.anti-hor{font-size:11.5px;color:var(--gris);font-weight:600;margin-bottom:4px}
.anti-but{font-size:12.5px;color:var(--noir);margin-bottom:10px}
.anti-but b{color:var(--cuivre-d)}
.anti-sec{margin-top:11px}
.anti-sec-h{font-size:11px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;margin-bottom:6px;color:var(--noir)}
.anti-sec ol,.anti-sec ul{margin:0;padding-left:18px;font-size:13px;line-height:1.5;color:var(--noir)}
.anti-sec li{margin:2px 0}
.anti-chips{display:flex;flex-wrap:wrap;gap:7px}
.anti-chip{background:var(--cuivre-soft);color:var(--cuivre-d);border:1px solid var(--cuivre-mid);
  border-radius:20px;padding:4px 11px;font-size:12px;font-weight:600}
.anti-faire{border-left:3px solid var(--cuivre);padding-left:11px}
.anti-oubli{background:var(--ambre-bg);border-radius:10px;padding:9px 12px 9px 11px}
.anti-oubli .anti-sec-h{color:var(--ambre)}
.anti-oubli ul{color:var(--ambre);font-size:12.5px}
.anti-qualiopi{margin-top:11px;font-size:11.5px;color:var(--gris-l);border-top:1px dashed var(--bord);padding-top:9px}
.anti-empty{font-size:12.5px;color:var(--gris-l);font-style:italic}
.anti-sec p{margin:0;font-size:13px;line-height:1.5;color:var(--noir)}
.anti-projete{background:var(--cuivre-soft);border-radius:10px;padding:9px 12px}
.anti-projete .anti-sec-h{color:var(--cuivre-d)}
/* Bannière incrustée sur le slide PROJETÉ (1 seul VP) — consigne d'action visible au mur. */
/* Élément de FLUX (pas absolu) : il réserve sa place en bas du slide et pousse le
   contenu vers le haut au lieu de le recouvrir. Bande fine sur une ligne (qui peut passer
   à deux si le texte est long). */
.slide-projete{flex:none;z-index:6;
  background:linear-gradient(90deg,var(--cuivre-d),var(--cuivre));color:#fff;
  padding:7px 22px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  box-shadow:0 -4px 14px rgba(28,24,20,.16)}
.slide-projete .sp-tag{font-size:10.5px;font-weight:800;letter-spacing:.5px;text-transform:uppercase;opacity:.9;flex:none;align-self:center}
.slide-projete b{font-size:15px;line-height:1.18;flex:none}
.slide-projete .sp-aide{font-size:12px;opacity:.9}
/* Jamais dans la vue formés : ceinture/bretelles si un host se glissait côté apprenant. */
.deck-pane-live .antiseche-host,.live-stage ~ .antiseche-host{display:none}
.facil-card{background:var(--cuivre-soft);border:1px solid var(--cuivre-mid);border-left:4px solid var(--cuivre);
  border-radius:12px;padding:14px 16px;box-shadow:var(--ombre)}
.facil-head{display:flex;align-items:center;gap:9px;font-size:14px;color:var(--noir)}
.facil-head b{font-size:14px}
.facil-ic{font-size:17px;line-height:1}
.facil-titre{font-weight:700;color:var(--noir);font-size:13.5px;margin-top:2px}
.facil-aide{color:var(--gris);font-size:12.5px;line-height:1.45;margin-top:6px}
.facil-body{display:flex;flex-wrap:wrap;align-items:center;gap:9px;margin-top:11px}
.facil-body input[type=text],.facil-body input[type=password],.facil-body input:not([type]){
  flex:1;min-width:200px;background:var(--blanc)}
.facil-body .btn{flex:none}
.facil-check{display:inline-flex;align-items:center;gap:9px;font-size:13px;font-weight:600;color:var(--noir);cursor:pointer}
.facil-check input{width:auto}
.facil-msg{font-size:12.5px;color:var(--gris);margin-top:9px;line-height:1.45;min-height:1px}
.facil-msg b{color:var(--noir)}
/* Modèle inerte de la page apprenant dans la « vue formés » du formateur :
   apparence réelle de leur carte (cuivre), légèrement atténuée pour signaler
   qu'elle n'est pas vivante. `inert` (HTML) bloque déjà toute interaction. */
.facil-model{opacity:.96}
.facil-model input,.facil-model select,.facil-model textarea,.facil-model .btn{cursor:default}

/* Builder site (étape Hostinger) — prompts + questionnaire d'accompagnement */
.facil-sb{width:100%;display:flex;flex-direction:column;gap:12px}
.sb-sec{font-size:12px;font-weight:700;color:var(--cuivre-d);text-transform:uppercase;letter-spacing:.4px;margin-top:4px}
.sb-sec .muted{text-transform:none;letter-spacing:0;font-weight:600}
.sb-prompts{display:flex;flex-direction:column;gap:9px}
.sb-prompt{background:var(--paper-2);border:1px solid var(--bord-2);border-radius:10px;padding:10px 12px}
.sb-prompt-h{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:6px}
.sb-prompt-h b{font-size:12.5px;color:var(--noir)}
.sb-prompt pre{margin:0;white-space:pre-wrap;word-break:break-word;font-family:"SFMono-Regular",ui-monospace,Menlo,monospace;font-size:11.5px;line-height:1.5;color:var(--gris)}
.sb-form{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sb-form .fld{margin-bottom:0}
.sb-form .fld:last-child{grid-column:1 / -1}
.sb-out:empty{display:none}
@media(max-width:760px){.sb-form{grid-template-columns:1fr}}

/* Filigrane nominatif — discret à l'écran, jamais cliquable, jamais dans le flux. */
#filigrane{position:fixed;right:10px;bottom:6px;z-index:1;pointer-events:none;user-select:none;
  font-size:10px;letter-spacing:.3px;color:var(--gris-l);opacity:.42}
.deck-overlay ~ #filigrane{z-index:1000}

@media print {
  /* À l'impression et à l'export PDF — les vrais vecteurs de diffusion — la marque devient
     franche et se répète en diagonale : un document qui circule reste rattachable au compte
     qui l'a sorti. */
  #filigrane{position:fixed;inset:0;right:auto;bottom:auto;width:100%;height:100%;
    display:flex;align-items:center;justify-content:center;opacity:.13;font-size:26px;
    transform:rotate(-30deg);color:#000}
  #filigrane span{white-space:nowrap}
  #side,#demoBanner,.slides-bar,.slide-foot .slide-nav,.tl-visual .row-between,.btn-illu,.tl-head .tl-caret,.tl-head input,.quiz-pill,.slide-quiz{display:none !important}
  .tl-body{display:block !important}
  .slide-mini{max-width:100%;page-break-inside:avoid}
  .slide-stage{box-shadow:none}
  #side, #demoBanner, .note button, .btn { display:none !important; }
  #main { padding:0 !important; overflow:visible !important; }
  .tl-body { display:block !important; }
  .tl-caret, .tl-head input { display:none !important; }
  .card { box-shadow:none !important; break-inside:avoid; }
}

/* ===== Pipeline formateur — outils ouvrables + coffre démo ===== */
.anti-tools{display:flex;flex-direction:column;gap:6px}
.anti-tool{display:flex;align-items:center;flex-wrap:wrap;gap:8px;background:var(--cuivre-soft);
  border:1px solid var(--cuivre-mid);border-radius:9px;padding:6px 9px}
.anti-toolname{font-size:12.5px;font-weight:700;color:var(--cuivre-d);flex:1;min-width:120px}
.anti-open{background:var(--cuivre);color:var(--sur-accent);border:0;border-radius:7px;padding:5px 11px;font-size:12px;
  font-weight:700;cursor:pointer;white-space:nowrap;transition:.12s}
.anti-open:hover{background:var(--cuivre-d)}
.anti-mini{background:var(--blanc);color:var(--cuivre-d);border:1px solid var(--cuivre-mid);border-radius:6px;
  padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap}
.anti-mini:hover{border-color:var(--cuivre);color:var(--cuivre)}
.anti-mini.ghost{background:transparent;color:var(--gris);border-color:var(--bord-2)}
/* (Coffre démo privé retiré de l'antisèche le 28/07/2026 — plus aucun identifiant affiché ici.) */
/* Bandeau « nouvelle version du code servi » — visible partout, y compris par-dessus le
   déroulé en plein écran : personne ne doit rester sur une version périmée sans le savoir. */
#majBanner{position:fixed;top:0;left:0;right:0;z-index:2500;display:flex;align-items:center;
  justify-content:center;flex-wrap:wrap;gap:12px;padding:10px 18px;background:var(--cuivre);
  color:var(--sur-accent);font-size:13.5px;box-shadow:0 4px 18px rgba(0,0,0,.22)}
#majBanner .maj-txt{max-width:760px}
#majBanner .btn{background:var(--blanc);color:var(--graphite);border-color:var(--blanc)}
#majBanner .btn.ghost{background:transparent;color:var(--sur-accent);border-color:rgba(21,24,28,.45)}
/* Toast */
#mvToast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(14px);z-index:2000;
  background:var(--noir);color:#fff;padding:9px 18px;border-radius:999px;font-size:13px;font-weight:600;
  box-shadow:0 6px 22px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:.18s}
#mvToast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Bascule d'affichage formateur (slide / antisèche / sandbox) ===== */
.dk-viewswitch{display:inline-flex;background:var(--paper-2);border:1px solid var(--bord-2);border-radius:9px;padding:2px;gap:2px}
.dk-vbtn{background:transparent;border:0;border-radius:7px;padding:5px 11px;font-size:12px;font-weight:600;color:var(--gris);cursor:pointer;white-space:nowrap;transition:.12s}
.dk-vbtn:hover{color:var(--cuivre-d)}
.dk-vbtn.active{background:var(--cuivre);color:var(--sur-accent)}
.antiseche-host.dk-full{max-width:1100px}
.antiseche-host.dk-full .antiseche{border-style:solid}
/* Barre de pilotage des slides — prend le relais du pied de slide quand cet écran affiche
   l'antisèche ou la sandbox (slide projetée au mur) : on continue de naviguer et de régler.
   Collée en bas de l'overlay : une antisèche longue ne doit jamais la pousser hors de vue. */
.deck-navbar{width:100%;max-width:1100px;margin:4px auto 0;position:sticky;bottom:-28px;z-index:6;
  padding-bottom:28px;background:linear-gradient(to bottom,rgba(250,246,238,0) 0,var(--creme) 14px)}
.deck-navbar .slide-foot{border:1px solid var(--bord);border-radius:12px;box-shadow:var(--ombre-md)}
/* Projection active : le bouton reste allumé pour rappeler que le mur affiche la slide. */
.deck-overlay .deckbar .btn.wall-on{background:var(--cuivre);border-color:var(--cuivre);color:var(--sur-accent)}
/* Sandbox */
.sandbox-host{width:100%;max-width:1100px;margin:0 auto}
.sb-wrap{display:flex;flex-direction:column;gap:12px}
.sb-bar{display:flex;align-items:center;flex-wrap:wrap;gap:10px;background:var(--cuivre-soft);border:1px solid var(--cuivre-mid);border-radius:12px;padding:10px 14px}
.sb-badge{font-weight:800;color:var(--cuivre-d);font-size:13px}
.sb-sub{font-size:12px;color:var(--gris)}
.sb-screen{background:var(--blanc);border:1.5px solid var(--bord);border-radius:14px;padding:22px 24px;box-shadow:var(--ombre-md);min-height:220px}
.sb-step-h{font-size:17px;font-weight:800;color:var(--noir);font-family:"Space Grotesk";margin-bottom:6px}
.sb-aide{font-size:13px;color:var(--gris);margin-bottom:16px;line-height:1.5}
.sb-step{display:flex;flex-direction:column;gap:10px;max-width:560px}
.sb-step input{width:100%}
.sb-idle{color:var(--gris-l);font-style:italic;font-size:13.5px}
.sb-ok{background:var(--vert-bg);border:1px solid #BFE3CE;color:var(--vert);border-radius:9px;padding:11px 14px;font-size:13.5px;font-weight:600}
.sb-list{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.sb-li{background:var(--paper-2);border:1px solid var(--bord);border-radius:8px;padding:8px 12px;font-size:13px;color:var(--noir)}
.sb-tip{font-size:12px;color:var(--gris-l);font-style:italic}

/* ===== Mode MUR (VP) — page de projection plein écran ===== */
body.wall-mode{background:var(--creme);overflow:hidden}
#wall{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;padding:30px}
#wall .wall-stage{margin:0 auto}
.wall-demo{width:100%;max-width:1000px;background:var(--blanc);border:1.5px solid var(--bord);border-radius:18px;
  box-shadow:var(--ombre-md);padding:42px 54px}
.wall-demo-tag{font-size:13px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--cuivre);margin-bottom:14px}
.wall-demo-h{font-size:30px;font-weight:800;color:var(--noir);font-family:"Space Grotesk";margin-bottom:10px}
.wall-demo-aide{font-size:17px;color:var(--gris);margin-bottom:26px;line-height:1.5}
.wall-demo-body{display:flex;flex-direction:column;gap:14px;max-width:680px;font-size:17px}
.wall-demo-body input{font-size:17px;padding:13px 15px}
.wall-demo-body .btn{font-size:16px;padding:12px 20px}
.wall-demo-body .sb-ok{font-size:17px;padding:16px 18px}
/* bouton « Montrer sur VP » actif */
#sbProject.on{background:var(--cuivre);color:var(--sur-accent);border-color:var(--cuivre)}

/* ===== Points concrets d'une manip (7 règles de la charte, étapes…) — apprenant + sandbox + mur ===== */
.facil-points{list-style:none;padding:0;margin:0 0 12px;display:flex;flex-direction:column;gap:6px}
.facil-points li{position:relative;padding:9px 12px 9px 30px;background:var(--paper-2);border:1px solid var(--bord);border-radius:9px;font-size:13px;color:var(--noir);line-height:1.4}
.facil-points li::before{content:"";position:absolute;left:12px;top:14px;width:7px;height:7px;background:var(--cuivre);transform:rotate(45deg)}
.dk-vbtn.disabled,.dk-vbtn:disabled{opacity:.38;cursor:not-allowed;color:var(--gris-l)}
.dk-vbtn.disabled:hover{color:var(--gris-l)}
/* Plus gros sur le mur (VP) */
.wall-demo-body .facil-points li{font-size:16px;padding:12px 14px 12px 38px}
.wall-demo-body .facil-points li::before{left:15px;top:18px;width:9px;height:9px}
.wall-demo-body .facil-check{font-size:17px}

/* ===== Sessions de démo (formations) — barre session + archives datées ===== */
.sb-sessionbar{display:flex;align-items:center;flex-wrap:wrap;gap:9px;background:var(--paper-2);border:1px solid var(--bord);border-radius:11px;padding:8px 13px}
.sb-session{font-size:13px;color:var(--noir)}
.sb-archives{background:var(--blanc);border:1px solid var(--bord);border-radius:11px;padding:11px 14px}
.sb-arch-h{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--cuivre-d);margin-bottom:8px}
.sb-arch-row{display:flex;align-items:center;flex-wrap:wrap;gap:9px;padding:7px 0;border-bottom:1px solid var(--bord)}
.sb-arch-row:last-child{border-bottom:none}
.sb-arch-info{display:flex;flex-direction:column;min-width:200px}
.sb-arch-info b{font-size:13px;color:var(--noir)}
.sb-arch-date{font-size:11.5px;color:var(--gris)}
.sb-arch-stats{font-size:12.5px;color:var(--gris);margin-left:auto}
.sb-arch-empty{font-size:12.5px;color:var(--gris-l);font-style:italic}

/* Case « signer » du sandbox / mur — pastille signable propre (pas de retour à la ligne disgracieux) */
.sb-step .facil-check,.wall-demo-body .facil-check{display:inline-flex;align-items:center;gap:10px;align-self:flex-start;
  background:var(--cuivre-soft);border:1px solid var(--cuivre-mid);border-radius:10px;padding:10px 15px;font-weight:700;color:var(--cuivre-d);cursor:pointer}
.sb-step .facil-check span,.wall-demo-body .facil-check span{white-space:nowrap}
.sb-step .facil-check input,.wall-demo-body .facil-check input{width:18px;height:18px;cursor:pointer}

/* ===== Anti-surimpression : barres en flex/wrap (jamais de float qui chevauche) ===== */
.cond-bar{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.cond-bar-text{flex:1;min-width:240px;line-height:1.5}
.cond-bar-actions{display:flex;gap:6px;flex-wrap:wrap}
.row-between{flex-wrap:wrap}
#main header{display:flex;flex-direction:column}
/* La barre du mode présentation peut s'enrouler si la fenêtre est étroite */
.deck-overlay .deckbar{flex-wrap:wrap;max-width:1180px;row-gap:8px}
.deck-overlay .deckbar .slide-progress{min-width:120px}

/* ===== Adaptation aux résolutions d'écran (responsive) ===== */
@media (max-width:1240px){
  .g4{grid-template-columns:repeat(2,1fr)}
}
/* Action 15 (Cap Cockpit) — le grand écran (27 pouces) : plus d'air autour du contenu et
   des tableaux qui respirent, au lieu d'un CRM tassé à gauche. Le contenu ne s'étire pas à
   l'infini (au-delà, les lignes de tableau deviennent illisibles) : il se centre dans une
   largeur confortable, l'écran garde ses marges. */
@media (min-width:1441px){
  #main{padding:34px 48px}
  #view{max-width:1600px;margin-inline:auto}
  .g4{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:1080px){
  .g3{grid-template-columns:repeat(2,1fr)}
  #side{width:214px}
  #main{padding:24px 22px}
  .deck-overlay .esc-hint{display:none}
}
@media (max-width:880px){
  #side{width:186px}
  #main{padding:20px 15px}
  .g4,.g3,.g2{grid-template-columns:1fr}
  #main header h1{font-size:20px}
  .deck-row{gap:10px}
  .deck-arrow{width:48px;height:48px;font-size:24px;flex-shrink:0}
  .dk-viewswitch .dk-vbtn{padding:5px 8px}
}
@media (max-width:680px){
  #app{flex-direction:column;height:auto;min-height:100vh}
  #side{width:100%;flex-direction:row;align-items:center;border-right:none;border-bottom:1px solid var(--bord);overflow-x:auto;flex-shrink:0}
  #side .logo,#side .role-badge,#side .foot{display:none}
  #side nav{display:flex;flex-direction:row;gap:6px;padding:8px;overflow-x:auto}
  #side nav button{white-space:nowrap;width:auto}
  #main{height:auto;flex:1;overflow:auto}
  .card{padding:14px 15px}
}

/* ===== Glossaire « les mots à connaître » ===== */
.facil-gloss{background:var(--cuivre-soft);border:1px solid var(--cuivre-mid);border-radius:11px;padding:12px 15px;margin-bottom:14px}
.facil-gloss-h{font-size:12px;font-weight:800;letter-spacing:.4px;text-transform:uppercase;color:var(--cuivre-d);margin-bottom:8px}
.facil-gloss ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.facil-gloss li{font-size:13px;color:var(--noir);line-height:1.4}
.facil-gloss li b{color:var(--cuivre-d)}
.wall-demo-body .facil-gloss li{font-size:15px}
.wall-demo-body .facil-gloss-h{font-size:13px}

/* ===== Sélecteur de projection (Slide / Vue apprenant) dans la barre sandbox ===== */
.sb-project{display:inline-flex;align-items:center;gap:5px;background:var(--paper-2);border:1px solid var(--bord-2);border-radius:9px;padding:3px 5px 3px 11px}
.sb-project-lbl{font-size:12px;color:var(--gris);font-weight:600;white-space:nowrap}

/* ===== Glossaire (formateur + apprenant) — vocabulaire technique ===== */
.glo-bar{display:flex;align-items:center;gap:14px;margin:0 0 16px}
.glo-bar input{flex:1;padding:11px 14px;border:1px solid var(--bord-2);border-radius:10px;background:var(--blanc);font:inherit;font-size:14px;color:var(--noir)}
.glo-bar input::placeholder{color:var(--gris-l)}
.glo-bar input:focus{outline:none;border-color:var(--cuivre);box-shadow:0 0 0 3px var(--cuivre-soft)}
.glo-lettre{font-size:13px;font-weight:800;letter-spacing:.06em;color:var(--cuivre-d);margin:20px 0 8px;padding-bottom:5px;border-bottom:1px solid var(--bord)}
.glo-lettre:first-child{margin-top:0}
.glo-item{padding:11px 0;border-bottom:1px solid var(--bord)}
.glo-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.glo-terme{font-size:14.5px;color:var(--noir)}
.glo-ou{font-size:11px;font-weight:700;color:var(--graphite);background:var(--cuivre-soft);border-radius:20px;padding:2px 9px;white-space:nowrap}
.glo-def{font-size:13px;line-height:1.5;color:var(--gris);margin-top:3px}

/* ===== Claude — copilote intégré (espace apprenant) ===== */
.cstart{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.cstart-chip{font-size:12.5px;padding:7px 12px;border:1px solid var(--bord-2);background:var(--blanc);border-radius:20px;color:var(--noir);cursor:pointer}
.cstart-chip:hover{border-color:var(--cuivre);color:var(--cuivre-d)}
.cchat{border:1px solid var(--bord);border-radius:12px;background:var(--paper-2);min-height:200px;max-height:46vh;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.cchat-empty{margin:auto;color:var(--gris-l);font-size:13px;text-align:center}
.cmsg{display:flex}
.cmsg.me{justify-content:flex-end}
.cmsg.ai{justify-content:flex-start}
.cbubble{max-width:78%;padding:10px 13px;border-radius:13px;font-size:13.5px;line-height:1.5}
.cmsg.me .cbubble{background:var(--cuivre);color:var(--sur-accent);border-bottom-right-radius:4px}
.cmsg.ai .cbubble{background:var(--blanc);border:1px solid var(--bord);color:var(--noir);border-bottom-left-radius:4px}
.cchat-bar{display:flex;gap:10px;align-items:flex-end;margin-top:12px}
.cchat-bar textarea{flex:1;resize:none;padding:11px 14px;border:1px solid var(--bord-2);border-radius:10px;background:var(--blanc);font:inherit;font-size:14px;color:var(--noir);max-height:140px}
.cchat-bar textarea:focus{outline:none;border-color:var(--cuivre);box-shadow:0 0 0 3px var(--cuivre-soft)}

/* ===== Onboarding — visite guidée (overlay apprenant) + script (formateur) ===== */
.onb-overlay{position:fixed;inset:0;z-index:9000;background:rgba(28,24,20,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.onb-card{position:relative;background:var(--creme);border:1px solid var(--bord);border-radius:18px;box-shadow:var(--ombre-md);max-width:460px;width:100%;padding:34px 30px 24px;text-align:center}
.onb-close{position:absolute;top:10px;right:14px;border:none;background:transparent;font-size:24px;line-height:1;color:var(--gris-l);cursor:pointer}
.onb-ic-xl{font-size:46px;line-height:1;margin-bottom:8px}
.onb-title{margin:0 0 10px;font-size:21px;color:var(--noir)}
.onb-survol{margin:0 0 18px;font-size:14.5px;line-height:1.55;color:var(--gris)}
.photos-widget{margin-top:8px}
.photos-grid{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}
.photo-item{position:relative;width:64px;height:64px;border-radius:8px;overflow:hidden;border:1px solid var(--bord)}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-del{position:absolute;top:2px;right:2px;width:18px;height:18px;border-radius:50%;border:none;
  background:rgba(28,24,20,.65);color:#fff;font-size:12px;line-height:1;cursor:pointer;padding:0}
.live-picks{display:flex;flex-direction:column;gap:2px;max-height:340px;overflow-y:auto}
.live-pick{display:flex;align-items:center;gap:10px;padding:8px 6px;border-radius:8px;cursor:pointer;text-align:left}
.live-pick:hover{background:var(--blanc)}
/* width:auto contre la règle globale `input{width:100%}` (ligne ~207) : sans lui, la
   case à cocher (flex:0 0 auto) prend `width:100%` comme base flexible, avale toute la
   largeur de la ligne et pousse/clippe le nom hors zone visible — trouvé en contre-revue
   du 12/08/2026 (case cochable mais SANS AUCUN nom affiché à côté). Même correctif déjà
   posé ailleurs pour le même bug (.facil-check input, ligne ~541). */
.live-pick input{flex:0 0 auto;width:auto}
.live-pick-txt{display:flex;flex-direction:column}
.live-pick-nom{font-size:14.5px;color:var(--noir)}
.live-pick-sub{font-size:11.5px;color:var(--gris-l);margin-top:1px}
.onb-dots{display:flex;justify-content:center;gap:7px;margin-bottom:18px}
.onb-dots i{width:8px;height:8px;border-radius:50%;background:var(--bord-2);cursor:pointer;transition:.2s}
.onb-dots i.on{background:var(--cuivre);transform:scale(1.25)}
.onb-nav{display:flex;align-items:center;justify-content:space-between;gap:10px}
.onb-count{font-size:12.5px;color:var(--gris-l)}
.onb-script{display:flex;flex-direction:column;gap:12px}
.onb-script-card{border:1px solid var(--bord);border-radius:12px;background:var(--blanc);padding:14px 16px}
.onb-script-head{display:flex;align-items:center;gap:9px;font-size:15px;color:var(--noir);margin-bottom:6px}
.onb-script-head .onb-ic{font-size:20px}
.onb-script-survol,.onb-script-oral{font-size:13px;line-height:1.5;color:var(--noir);padding:7px 0}
.onb-script-oral{color:var(--cuivre-d);border-top:1px dashed var(--bord)}
.onb-lbl{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--gris-l);margin-right:8px}
.onb-script-oral .onb-lbl{color:var(--graphite)}

/* ===== Déverrouillage progressif (gating par dates) ===== */
#nav button.nav-locked{opacity:.45;cursor:not-allowed}
#nav button.nav-locked:hover{background:transparent;color:inherit}
.prog-locked{opacity:.65;background:repeating-linear-gradient(135deg,var(--paper-2),var(--paper-2) 10px,var(--creme) 10px,var(--creme) 20px)}
.prog-locked h3{color:var(--gris-l)}
.prog-resume{font-size:13px;line-height:1.5;color:var(--gris);margin-top:8px;border-top:1px solid var(--bord);padding-top:8px}
.cal{display:flex;flex-direction:column;gap:8px}
.cal-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 14px;border:1px solid var(--bord);border-radius:10px;background:var(--blanc);flex-wrap:wrap}
.cal-row input[type=date]{padding:7px 10px;border:1px solid var(--bord-2);border-radius:8px;background:var(--creme);font:inherit;color:var(--noir)}

/* ===== Glossaire de la page (par slide) ===== */
.gloss-pill{position:absolute;top:12px;right:14px;z-index:5;font-size:12px;padding:6px 11px;border:1px solid var(--bord-2);background:var(--blanc);border-radius:20px;color:var(--cuivre-d);cursor:pointer;box-shadow:var(--ombre)}
.gloss-pill:hover{border-color:var(--cuivre)}
.slide-gloss{position:absolute;right:14px;bottom:14px;z-index:6;width:min(380px,86%);max-height:72%;overflow:auto;background:var(--creme);border:1px solid var(--bord);border-radius:14px;box-shadow:var(--ombre-md);padding:16px}
.slide-gloss.hidden{display:none}
.gz-close{position:absolute;top:8px;right:12px;border:none;background:transparent;font-size:20px;line-height:1;color:var(--gris-l);cursor:pointer}
.gz-kicker{font-size:11.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--cuivre-d);margin-bottom:10px}
.gz-list{display:flex;flex-direction:column;gap:11px}
.gz-item{font-size:13px;line-height:1.5}
.gz-item b{display:block;color:var(--cuivre-d);font-size:13.5px;margin-bottom:2px}
.gz-item span{color:var(--gris)}

/* ===== En-têtes de section de la nav (simplification) ===== */
.nav-sec{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--gris-l);padding:15px 22px 6px;margin-top:2px}

/* ===== Sessions de formation + prérequis J1 ===== */
.sess-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:12px}
.sess-card{background:var(--blanc);border:1px solid var(--bord);border-radius:12px;padding:14px;cursor:pointer;transition:border-color .12s,transform .12s}
.sess-card:hover{border-color:var(--cuivre);transform:translateY(-2px)}
.sess-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:5px}
.sess-card-top b{font-size:14.5px}
.sess-add{display:flex;flex-wrap:wrap;gap:8px}
.pq-table{width:100%}
.pq-table th{text-align:center;font-size:15px;padding:8px 6px}
.pq-table th:first-child{text-align:left}
.pq-table td{text-align:center;vertical-align:middle}
.pq-table td:first-child,.pq-table td:last-child{text-align:left}
.pq{width:20px;height:20px;border-radius:50%;border:none;cursor:pointer;background:#e0604a;transition:background .12s}
.pq:hover{outline:2px solid var(--cuivre-soft)}
.pq.on{background:#3a9d5d}
.pq-legende{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:10px;font-size:11.5px;color:var(--gris)}
.pq-leg{white-space:nowrap}
.btn.danger{background:#c0392b}
.btn.danger:hover{background:#a02d22}
.btn.danger:disabled{background:var(--bord-2);cursor:default}

/* ===== Règles essentielles IA — bouton déroulable sur la slide ===== */
.slide-regles{margin:10px 0 0;border:1px solid var(--bord-2);border-radius:10px;background:var(--blanc);overflow:hidden}
.slide-regles summary{cursor:pointer;padding:10px 14px;font-weight:700;font-size:13px;color:var(--cuivre-d);list-style:none;display:flex;align-items:center;gap:7px}
.slide-regles summary::-webkit-details-marker{display:none}
.slide-regles summary::after{content:"▸";margin-left:auto;transition:transform .15s;color:var(--gris-l)}
.slide-regles[open] summary::after{transform:rotate(90deg)}
.slide-regles[open] summary{border-bottom:1px solid var(--bord)}
.rg-list{padding:8px 14px 12px;display:flex;flex-direction:column;gap:11px;max-height:240px;overflow:auto}
.rg-item{display:flex;gap:10px;align-items:flex-start;font-size:12.5px;line-height:1.45}
.rg-num{flex-shrink:0;width:20px;height:20px;border-radius:50%;background:var(--cuivre);color:var(--sur-accent);font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;margin-top:1px}
.rg-item b{color:var(--noir);display:block;margin-bottom:1px}
.rg-item span{color:var(--gris)}

/* ===== Onglets internes (fusion de pages) ===== */
.tabbar{display:flex;gap:4px;margin-bottom:16px;border-bottom:1px solid var(--bord)}
.tab{background:none;border:none;padding:9px 16px;font-size:13px;font-weight:600;color:var(--gris);cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab:hover{color:var(--cuivre-d)}
.tab.on{color:var(--graphite);border-bottom-color:var(--cuivre);font-weight:700}

/* ===== Calendrier cliquable (pose des 7 dates : J1·J2·J3 → atelier → J4·J5 → J6) ===== */
.cal-wrap{display:grid;grid-template-columns:1fr 290px;gap:18px;align-items:start}
/* Seule grille du fichier qui n'avait aucun repli : sous 760px la colonne fixe de 290px ne
   laissait plus la place à la grille des dates, qui débordait de #main (audit 2026-07-28). */
@media(max-width:760px){.cal-wrap{grid-template-columns:1fr}}
.cal-cur{background:var(--blanc);border:1px solid var(--bord);border-radius:14px;padding:14px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font-size:15px}
.cal-dow{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-bottom:5px}
.cal-dow span{text-align:center;font-size:11px;font-weight:700;color:var(--gris-l)}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.cal-cell{position:relative;min-height:48px;border:1px solid var(--bord);border-radius:9px;padding:5px 6px;cursor:pointer;background:var(--creme);transition:border-color .12s,background .12s}
.cal-cell.empty{border:none;background:transparent;cursor:default}
.cal-cell:not(.empty):hover{border-color:var(--cuivre)}
.cal-cell.picked{background:var(--cuivre);border-color:var(--cuivre)}
.cal-d{font-size:12.5px;color:var(--noir)}
.cal-cell.picked .cal-d{color:var(--sur-accent);opacity:1}
.cal-badge{position:absolute;left:5px;bottom:4px;font-size:10px;font-weight:800;color:#fff;background:var(--cuivre-d);padding:1px 6px;border-radius:6px}
.cal-hint{margin-top:11px;font-size:12.5px;color:var(--gris)}
.cal-side{background:var(--paper-2);border:1px solid var(--bord);border-radius:14px;padding:14px}
.cal-side-h{font-size:11.5px;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--cuivre-d);margin-bottom:6px}
.cal-seq-row{display:flex;justify-content:space-between;align-items:center;gap:8px;padding:8px 0;border-bottom:1px solid var(--bord);font-size:12.5px}
.cal-seq-row:last-of-type{border-bottom:none}
.cal-seq-row b{color:var(--noir);font-weight:600}
.cal-seq-row span{color:var(--gris);font-size:11.5px;text-align:right}
.cal-seq-row.done b{color:var(--cuivre-d)}
.cal-seq-row.next{background:var(--cuivre-soft);margin:0 -8px;padding:8px;border-radius:7px;border-bottom:none}
.cal-seq-row.next span{color:var(--cuivre-d);font-weight:700}
.cal-actions{display:flex;gap:8px;margin-top:14px}

/* ===== Fiche apprenant (overlay éditable) ===== */
.fiche-overlay{position:fixed;inset:0;background:rgba(28,24,20,.45);z-index:1500;display:flex;align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.fiche-card{background:var(--blanc);border-radius:16px;box-shadow:var(--ombre-md);width:100%;max-width:640px;padding:26px 30px;position:relative}
.fiche-close{position:absolute;top:12px;right:16px;background:none;border:none;font-size:26px;line-height:1;color:var(--gris);cursor:pointer}
.fiche-close:hover{color:var(--cuivre)}
.fiche-h{font-size:18px;font-weight:700;color:var(--noir);margin-bottom:4px}
.fiche-sec{font-size:11px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--cuivre-d);margin:18px 0 9px;border-top:1px solid var(--bord);padding-top:14px}
.fiche-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.fiche-grid .fld{margin-bottom:0}
.fiche-prq{display:flex;flex-wrap:wrap;gap:7px}
.fpq{display:inline-flex;align-items:center;gap:6px;background:var(--rouge-bg);color:var(--rouge);border:1px solid #efc9c9;border-radius:9px;padding:7px 11px;font-size:12.5px;font-weight:600;cursor:pointer;transition:.12s}
.fpq.on{background:var(--vert-bg);color:var(--vert);border-color:#bfe3ce}
.fiche-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:2px}
@media(max-width:560px){.fiche-grid{grid-template-columns:1fr}}

/* Sélecteur « + client » en haut du tableau prérequis */
.sess-pick{padding:9px 13px;background:var(--cuivre-soft);border:1px solid var(--cuivre-mid);border-radius:10px;font-size:13px;color:var(--cuivre-d)}
.sess-pick .btn{margin:3px 3px 0 0}

/* Bouton suppression (armé) + 🗑 dans les cartes session */
.btn.danger{background:var(--rouge)!important;color:#fff!important;border-color:var(--rouge)!important}
.sess-del{padding:3px 8px;font-size:13px;line-height:1}
.sess-card-top{display:flex;align-items:center;justify-content:space-between;gap:8px}

/* ----- Mon site : import d'un site existant + checklist DNS ----- */
.imp-card{border:1px solid var(--border);border-radius:12px;padding:14px 16px;background:var(--card);display:flex;flex-direction:column;gap:8px}
.imp-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.imp-row input{flex:1;min-width:240px;padding:9px 12px;border:1px solid var(--border);border-radius:9px;font-size:14px;background:var(--bg)}
.imp-prog{color:var(--laiton);font-size:13.5px;padding:4px 0}
.imp-err{color:var(--rouge,#c0392b);font-size:13.5px;padding:4px 0}
.imp-done{border-top:1px dashed var(--border);margin-top:6px;padding-top:10px;font-size:13.5px}
.imp-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}
.dns-plan{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.dns-step{display:flex;gap:12px;align-items:flex-start;border:1px solid var(--border);border-radius:10px;padding:10px 12px;background:var(--card)}
.dns-step.dns-hot{border-color:var(--laiton);box-shadow:inset 3px 0 0 var(--laiton)}
.dns-when{min-width:78px;font-weight:600;font-size:12.5px;color:var(--muted);white-space:nowrap;padding-top:1px}
.dns-body{flex:1}
.dns-tag{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.06em;color:var(--sur-accent);background:var(--laiton);border-radius:6px;padding:1px 6px;vertical-align:middle;margin-left:4px}

/* « Passer sur Hostinger » — bascule finale, garde-fou zéro coupure */
.golive-card{border:1px solid var(--border);border-left:4px solid var(--laiton);border-radius:12px;padding:14px 16px;background:var(--card)}
.golive-card.is-live{border-left-color:#2e9e5b;background:rgba(46,158,91,.06)}
.golive-check{display:flex;gap:9px;align-items:flex-start;font-size:13px;line-height:1.4;margin:2px 0 12px;cursor:pointer}
.golive-check input{margin-top:2px;flex:0 0 auto}
.golive-btn{font-size:14px;padding:11px 20px}
.golive-btn:disabled{opacity:.45;cursor:not-allowed;background:var(--cuivre)}
.golive-done{font-size:13px;font-weight:600;color:#2e9e5b}
.golive-step{margin-top:12px;border:1px solid var(--laiton);border-radius:10px;padding:10px 12px;background:rgba(23,195,178,.07)}

/* --- Authentification : login / création de compte par code --- */
#loginMount{width:min(380px,90vw);margin-top:6px}
.login-form{display:flex;flex-direction:column;gap:11px;text-align:left}
.login-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600;color:var(--noir)}
.login-form input,.login-form textarea{padding:9px 11px;border:1px solid var(--bord,#d9d3c7);border-radius:9px;font-size:14px;font-family:inherit}
.login-form textarea{resize:vertical;min-height:56px}
.login-form .btn{margin-top:2px}
.login-msg{font-size:12.5px;color:#c0392b;min-height:15px}
.login-msg.ok{color:#1e7a4a}
.login-alt{margin-top:14px;display:flex;flex-direction:column;gap:8px}
/* Champ de mot de passe avec bouton « Afficher ». Le bouton se pose DANS le champ ;
   le rembourrage à droite de l'input lui réserve sa place, sans quoi il recouvrirait
   les derniers caractères saisis. */
.mdp-champ{position:relative;display:block}
.mdp-champ input{width:100%;padding-right:74px !important;box-sizing:border-box}
.mdp-oeil{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:0;padding:4px 6px;cursor:pointer;font-family:inherit;
  font-size:11.5px;font-weight:600;letter-spacing:.02em;color:var(--gris,#6b6b6b)}
.mdp-oeil:hover{color:var(--cuivre)}
.btn.lien{background:none;border:0;padding:4px;color:var(--gris,#6b6b6b);
  font-size:12.5px;text-decoration:underline;cursor:pointer}
.btn.lien:hover{color:var(--cuivre)}
.note.ok{border-left:3px solid #1e7a4a}
/* --- Équipe & Accès --- */
.equipe-form{display:flex;flex-direction:column;gap:10px;max-width:460px;margin-bottom:8px}
.equipe-form label{display:flex;flex-direction:column;gap:4px;font-size:12.5px;font-weight:600}
.equipe-form input{padding:8px 10px;border:1px solid var(--bord,#d9d3c7);border-radius:8px;font-size:13.5px}
.equipe-roles{display:flex;gap:16px;margin:2px 0}
.equipe-roles .chk{display:flex;align-items:center;gap:6px;font-weight:600;font-size:13px}
.equipe-out{margin-top:6px}
.equipe-tbl{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:6px}
.equipe-tbl th,.equipe-tbl td{text-align:left;padding:7px 9px;border-bottom:1px solid var(--bord,#e6e0d4)}
.equipe-tbl th{font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:var(--gris,#6b6b6b)}
.code-box{margin-top:8px;border:1px dashed var(--laiton);border-radius:9px;padding:9px 11px;background:rgba(23,195,178,.06)}
.code-box pre{white-space:pre-wrap;word-break:break-all;font-size:12px;margin:0 0 8px;font-family:var(--mono,ui-monospace,monospace)}
.ok-line{color:#2e9e5b;font-weight:600;font-size:13px}
.warn-line{color:#B7791F;font-weight:600;font-size:12.5px}

/* Suivi du groupe : 5e KPI (migration) responsive + badge migration cliquable */
.g5{grid-template-columns:repeat(5,1fr)}
@media (max-width:1100px){.g5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:760px){.g5{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.g5{grid-template-columns:1fr}}
/* Le badge de migration est un <select> (menu de choix, vague 4) : il garde l'aspect
   pastille mais reçoit une largeur auto et retire le chrome natif du select. */
.mig-badge{cursor:pointer;border:none;font:inherit;line-height:1.4;-webkit-appearance:none;appearance:none;padding-right:9px}
select.mig-badge{width:auto;max-width:130px}

/* Fiche apprenant : site existant à migrer (prérequis scrape) */
.fiche-check{display:flex;align-items:center;gap:8px;font-size:13.5px;margin:2px 0 8px;cursor:pointer}
.fiche-check input{width:16px;height:16px}
.prq-warn{background:var(--rouge-bg,#fbeaea);border:1px solid var(--rouge,#c0392b);border-radius:9px;padding:8px 12px;font-size:13px}

/* Champs manquants à compléter après scrap (questions posées à l'apprenant) */
.fld.gap span{color:var(--laiton)}
.fld.gap input,.fld.gap select,.fld.gap textarea{border-color:var(--laiton);background:rgba(23,195,178,.06)}
.gap-tag{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;color:var(--sur-accent);background:var(--laiton);border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:middle}

/* ===== Parcours guidé (carte tableau de bord) ===== */
.pc-card{padding:18px 18px 16px}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.pc-head b{font-size:15px;color:var(--noir)}
.pc-bar{height:7px;border-radius:5px;background:var(--paper-2);overflow:hidden;margin-bottom:14px}
.pc-bar i{display:block;height:100%;background:var(--cuivre);border-radius:5px;transition:width .4s ease}
.pc-track{display:flex;align-items:stretch;gap:0;overflow-x:auto;padding:2px 0 6px}
.pc-line{flex:1 0 14px;align-self:center;height:2px;background:var(--bord);min-width:14px}
.pc-step{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:2px 4px;min-width:78px;font:inherit}
.pc-num{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%;font-weight:700;font-size:14px;border:2px solid var(--bord);background:#fff;color:var(--gris-l)}
.pc-lab{font-size:11.5px;line-height:1.2;text-align:center;color:var(--gris);max-width:88px}
.pc-tag{font-size:9.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--cuivre-d);background:rgba(23,195,178,.14);border-radius:4px;padding:1px 5px}
.pc-step.done .pc-num{background:var(--vert,#3E7C5A);border-color:var(--vert,#3E7C5A);color:#fff}
.pc-step.done .pc-lab{color:var(--noir)}
.pc-step.cur .pc-num{border-color:var(--cuivre);color:var(--cuivre-d);box-shadow:0 0 0 4px rgba(23,195,178,.16)}
.pc-step.cur .pc-lab{color:var(--noir);font-weight:600}
/* « à valider » : le travail est constaté, il ne manque que le contrôle. Volontairement
   plus visible que l'étape courante — c'est le geste le plus court pour avancer. */
.pc-step.ready .pc-num{background:var(--cuivre);border-color:var(--cuivre);color:var(--sur-accent);box-shadow:0 0 0 4px rgba(23,195,178,.22)}
.pc-step.ready .pc-lab{color:var(--noir);font-weight:600}
.pc-step.lock{cursor:help}
.pc-step.lock .pc-num{background:var(--paper-2);color:var(--gris-l)}
.pc-step.lock .pc-lab{color:var(--gris-l)}
.pc-next{font-size:12.5px;margin-top:4px}

/* ── Questions entre formateurs (2026-07-29) ─────────────────────────────────────
   Bandeau d'arbitrage affiché à l'ouverture de l'espace formateur. Volontairement
   sobre : il informe, il n'alarme pas — ce n'est pas une erreur, c'est une question. */
#questionsBanner{margin:0 0 14px;border-left:3px solid var(--cuivre)}
.q-titre{font-weight:700;margin-bottom:10px}
.q-carte{padding:10px 0;border-top:1px solid var(--bord)}
.q-carte:first-of-type{border-top:none;padding-top:0}
.q-sujet{font-weight:600;font-size:14px}
.q-texte{margin:4px 0 2px;line-height:1.45}
.q-ctx{font-size:12.5px;line-height:1.4;margin-bottom:6px}
.q-rep{width:100%;font:inherit;font-size:13.5px;padding:7px 9px;border:1px solid var(--bord);
       border-radius:6px;resize:vertical;box-sizing:border-box}
.q-actions{display:flex;align-items:center;gap:10px;margin-top:6px}

/* ===== Séquences de relance (chantier campagnes) ============================
   Trois classes seulement : la carte d'une étape, le bouton d'insertion d'une
   variable de modèle, et le compteur de la navigation. Tout le reste réutilise
   card / note / pill / equipe-tbl / btn ghost sm. */
.seq-etape{border:1px solid var(--bord);border-radius:8px;padding:12px;margin-top:10px}
.seq-etape textarea{width:100%;font:inherit;font-size:13.5px;padding:7px 9px;
       border:1px solid var(--bord);border-radius:6px;resize:vertical;box-sizing:border-box}
/* « variable » et non « jeton » : dans ce projet, jeton est réservé aux secrets
   et aux tokens d'URL. Ces boutons insèrent {prenom}, {entreprise}… au curseur. */
.seq-variable{font:inherit;font-size:11.5px;padding:2px 7px;margin:2px 3px 0 0;cursor:pointer;
       border:1px solid var(--bord);border-radius:20px;background:transparent;color:inherit}
.seq-variable:hover{background:rgba(23,195,178,.14)}
.badge-attente{display:inline-block;min-width:17px;padding:0 5px;margin-left:6px;font-size:11px;
       line-height:17px;text-align:center;border-radius:9px;background:var(--cuivre);color:var(--graphite)}
/* La règle globale `input,textarea,select{width:100%}` (ligne 118) étire aussi les cases
   à cocher et les boutons radio : le glyphe se dessine alors au milieu d'une zone vide et
   le libellé part à l'autre bout de la ligne. Même remède que `.facil-check`. */
.seq-choix{display:flex;gap:9px;align-items:flex-start;cursor:pointer;font-weight:400}
.seq-choix input,.seq-etape input[type=checkbox]{width:auto;flex:0 0 auto;margin-top:3px}

/* ---------- Filet de troncature (lot 0.3 — J2-w, J3-z, J4-ag, J4-al) ----------
   Constat : quatre endroits différents, une seule cause — on masque au lieu de signaler.
   Les conteneurs de slide sont en overflow:hidden ; dès qu'une slide porte plus que la
   toile de référence n'affiche, la fin du texte disparaît sans ellipse, sans défilement,
   sans le moindre indice. Projeté au mur, personne ne peut deviner qu'il manque du texte.

   Remède en deux temps, piloté par fit.js :
   1. `--dens` resserre la typographie et les espacements de la slide, par paliers, jusqu'à
      ce que le contenu tienne. À 1 (le défaut), les valeurs sont EXACTEMENT celles d'avant :
      une slide qui tenait déjà ne bouge pas d'un pixel.
   2. Si le palier le plus serré ne suffit pas, le bloc fautif devient défilable — le bas
      redevient atteignable en séance, et l'antisèche du formateur le signale nommément.
   Le vrai remède reste éditorial : ce filet sert à SAVOIR quelles slides débordent. */
.slide-stage{--dens:1}
.slide-h1{font-size:calc(27px * var(--dens))}
.slide-accroche{font-size:calc(14px * var(--dens));margin-bottom:calc(14px * var(--dens))}
.slide-points{gap:calc(8px * var(--dens))}
.slide-points li{font-size:calc(13.5px * var(--dens))}
.slide-exemple{font-size:calc(12px * var(--dens));margin-top:calc(9px * var(--dens))}
.slide-memo{margin-top:calc(10px * var(--dens));padding:calc(8px * var(--dens)) calc(13px * var(--dens))}
.slide-terms{margin-top:calc(11px * var(--dens))}
.slide-term{padding:calc(6px * var(--dens)) calc(10px * var(--dens));margin-bottom:calc(5px * var(--dens))}
.slide-term b{font-size:calc(12px * var(--dens))}
.slide-term span{font-size:calc(11px * var(--dens))}
.focus-h1{font-size:calc(33px * var(--dens))}
.focus-accroche{font-size:calc(14.5px * var(--dens));margin-bottom:calc(12px * var(--dens))}
.slide-left{padding:calc(30px * var(--dens)) 28px calc(22px * var(--dens)) 36px}
.slide-inner.inv .slide-left{padding:calc(30px * var(--dens)) 36px calc(22px * var(--dens)) 28px}
.focus-inner{padding:calc(30px * var(--dens)) 38px}
.slide-right{padding:calc(24px * var(--dens)) 22px}
/* Dernier recours : le bloc défile plutôt que de rogner. Le liseré dit qu'il y a une suite —
   « rien n'est masqué en silence » vaut aussi pour ce qui est simplement plus bas. */
.slide-deborde{overflow:auto;scrollbar-width:thin;
  box-shadow:inset 0 -14px 12px -12px rgba(197,86,47,.55)}
.slide-deborde::-webkit-scrollbar{width:6px;height:6px}
.slide-deborde::-webkit-scrollbar-thumb{background:var(--cuivre);border-radius:3px}
/* Le signalement au formateur — dans l'antisèche, jamais sur la slide projetée. */
.anti-tronc{background:var(--ambre-bg);border-radius:10px;padding:9px 12px 9px 11px}
.anti-tronc .anti-sec-h{color:var(--ambre)}
.anti-tronc ul,.anti-tronc p{color:var(--ambre);font-size:12.5px}
.anti-tronc-ok{background:var(--creme);border-radius:10px;padding:9px 12px 9px 11px}
.anti-tronc-ok .anti-sec-h{color:var(--gris)}
/* Résultat du contrôle sur tout le support. */
.tronc-overlay{position:fixed;inset:0;background:rgba(28,24,20,.45);z-index:1600;display:flex;
  align-items:flex-start;justify-content:center;padding:40px 20px;overflow:auto}
.tronc-panel{background:var(--blanc);border-radius:16px;box-shadow:var(--ombre-md);width:100%;
  max-width:720px;padding:26px 30px;position:relative}
.tronc-res p{font-size:13px;line-height:1.5;color:var(--noir);margin:10px 0}
.tronc-res ul{margin:0;padding-left:18px;font-size:12.5px;line-height:1.55}
.tronc-res li{margin:3px 0}
/* Slide sans étape appariée (J4-k) : on le dit, on n'affiche la procédure de personne. */
.anti-orphelin{background:var(--ambre-bg);border-radius:10px;padding:9px 12px 9px 11px}
.anti-orphelin .anti-sec-h{color:var(--ambre)}
.anti-orphelin p{color:var(--ambre);font-size:12.5px}
/* Libération de l'abonnement (lot 3.4) — liste cochée par défaut, on décoche. */
.lib-list{max-height:46vh;overflow:auto;margin-top:10px;border:1px solid var(--bord);border-radius:10px}
.lib-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:1px solid var(--bord);font-weight:400}
.lib-row:last-child{border-bottom:none}
.lib-row input{width:auto}
/* Le composant unique de suivi (lot 4) — trois états, jamais deux. */
.anti-suivi{background:var(--creme);border-radius:10px;padding:9px 11px}
.sv-tbl{width:100%;border-collapse:collapse;font-size:12px;margin-top:4px}
.sv-tbl th{font-size:10px;text-transform:uppercase;letter-spacing:.4px;color:var(--gris);font-weight:700;padding:2px 3px;text-align:center}
.sv-tbl td{padding:3px;text-align:center;border-top:1px solid var(--bord)}
.sv-tbl td.sv-nom{text-align:left;font-weight:600;color:var(--noir);white-space:nowrap}
.sv-tbl tr.sv-pret td.sv-nom{color:var(--vert,#2E7D32)}
.sv-sub{display:block;font-size:10px;font-weight:400;color:var(--gris-l)}
.sv-vert{color:var(--vert,#2E7D32);font-size:14px}
.sv-attente{color:var(--ambre,#B8860B);font-size:14px}
.sv-absent{color:var(--gris-l);font-size:14px}
.sv-nul{color:var(--bord-2);font-size:14px}
.sv-legende{margin-top:6px;font-size:11px;color:var(--gris)}
.sv-etats{list-style:none;padding:0;margin:0;font-size:13px}
.sv-etats li{margin:3px 0}

/* ---------------- En-tête : la société et l'avancement ----------------
   Demande de Thomas du 09/08/2026 : « ça permet, quand on ouvre, d'avoir tout de suite
   où on est ». La société d'abord, l'avancement ensuite. */
/* `flex-direction:row` est OBLIGATOIRE ici : une règle anti-surimpression plus haut pose
   `column` sur ce même sélecteur, et la cascade ne remplace que les propriétés redéclarées
   — sans cette ligne, le bandeau se range sous le titre au lieu de lui faire face. */
#main header{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;gap:20px;flex-wrap:wrap}
.hd-txt{min-width:0}
.hd-ident{
  display:flex;flex-direction:column;align-items:flex-end;gap:6px;
  border:1px solid var(--bord);border-radius:12px;background:var(--blanc);
  padding:10px 14px;min-width:190px;
}
.hd-ident .hd-soc{
  font-family:"Space Grotesk","Public Sans",sans-serif;font-weight:700;font-size:14px;
  color:var(--graphite);line-height:1.15;text-align:right;
}
.hd-ident .hd-etapes{
  font-family:"Space Grotesk","Public Sans",sans-serif;font-size:11.5px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--graphite);
  background:var(--cuivre-soft);border-radius:999px;padding:3px 10px;white-space:nowrap;
}
.hd-ident .hd-etapes.fini{background:var(--lagon-soft)}
@media (max-width:900px){ .hd-ident{align-items:flex-start;min-width:0} .hd-ident .hd-soc{text-align:left} }

/* ---------------- Bac à sable formateur (17-18/08/2026) ----------------
   Même carte que ci-dessus, contenu formateur : 7 pastilles compactes (mêmes états que
   `.pc-step` de « Mon parcours », resserrés pour tenir dans l'en-tête) + repositionnement
   sur les slides. */
.hd-sb-dots{display:flex;gap:4px}
.hd-sb-dot{width:22px;height:22px;border-radius:50%;font-size:11px;font-weight:700;
  border:2px solid var(--bord);background:#fff;color:var(--gris-l);cursor:pointer;padding:0;
  display:flex;align-items:center;justify-content:center;font:inherit}
.hd-sb-dot.done{background:var(--vert,#3E7C5A);border-color:var(--vert,#3E7C5A);color:#fff}
.hd-sb-dot.cur{border-color:var(--cuivre);color:var(--cuivre-d)}
.hd-sb-dot.ready{background:var(--cuivre);border-color:var(--cuivre);color:var(--sur-accent)}
.hd-sb-dot.lock{background:var(--paper-2);color:var(--gris-l);cursor:help}
.hd-sb-row{display:flex;gap:6px;align-items:center}
.hd-sb-jour,.hd-sb-num{font-size:11.5px;border:1px solid var(--bord);border-radius:7px;
  padding:4px 6px;background:#fff;color:var(--graphite);font:inherit}
.hd-sb-num{width:64px}
@media (max-width:900px){ .hd-sb-dots,.hd-sb-row{justify-content:flex-start} }

/* ---------------- Le palier : free / premium ----------------
   Sous l'étiquette de gamme. L'apprenant lit le sien ; le formateur voit les deux et
   bascule d'un clic, pour éprouver le parcours dans l'un puis dans l'autre.
   Demande de Thomas du 09/08/2026. */
.logo-plan{margin-top:7px;display:flex;justify-content:center;align-items:center;gap:5px;
  font-family:"Space Grotesk","Public Sans",sans-serif;font-size:10.5px;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase}
.logo-plan .pl{color:var(--gris-texte);background:none;border:0;padding:2px 7px;border-radius:999px;
  font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:default}
.logo-plan .pl.on{color:var(--graphite);background:var(--cuivre-soft)}
.logo-plan.commutable .pl{cursor:pointer}
.logo-plan.commutable .pl:not(.on):hover{color:var(--graphite);background:var(--paper-2)}
.logo-plan .sep{color:var(--bord-2)}

/* Les associés d'une même société : ils partagent le site et le domaine, jamais le
   parcours ni la certification. Le dire évite deux malentendus — le formateur qui lit un
   doublon, l'apprenant qui croit que l'autre refait son travail à côté. */
.hd-ident .hd-asso{font-size:11.5px;color:var(--gris-texte);text-align:right;line-height:1.25}
@media (max-width:900px){ .hd-ident .hd-asso{text-align:left} }