:root{
  --paper:#f4f3ee; --ink:#1f2320; --muted:#848a80; --accent:#3b5f8a; --line:#dfe0d6;
  --fond:var(--paper); --texte:var(--ink); --faible:var(--muted); --ligne:var(--line);
  --marque:var(--accent); --sur-marque:#f4f7fb; --sur-accent:#f4f7fb;
  --accent-vif:#4c73a2;
  --accent-faible:rgba(59,95,138,.09); --accent-ligne:rgba(59,95,138,.34);
  --surface:#ffffff; --doux:#4c4a5c;
  --ok:#3f7d4e; --ok-fond:#e9f2e9; --ok-ligne:#c6ddc6;
  --attente:#a8752e; --attente-fond:#f8eeda; --attente-ligne:#ecd6a6;
  --alerte:#ab4330; --alerte-fond:#fbe9e4; --alerte-ligne:#efc3b6;
  --ease:cubic-bezier(.2,.8,.3,1);
}

/* signature : catalogue façon chapitres de cahier */
.grille-modules{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.carte-module{background:var(--surface);border:1px solid var(--ligne);border-radius:6px;padding:16px;position:relative;cursor:pointer;transition:transform .15s,box-shadow .15s}
.carte-module:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(40,49,107,.09)}
.carte-module .num{font-family:"Plex Sans",sans-serif;font-size:11px;color:var(--faible);letter-spacing:.06em}
.carte-module h3{font-size:15px;margin:6px 0 8px}
.carte-module .meta{font-size:11.5px;color:var(--faible);margin-bottom:12px}
.ligne-progres{height:6px;border-radius:3px;background:var(--fond);border:1px solid var(--ligne);overflow:hidden}
.ligne-progres i{display:block;height:100%;background:var(--accent);border-radius:3px;transition:width .5s var(--ease)}
.carte-module .pct{font-family:"Plex Sans",sans-serif;font-size:11px;color:var(--faible);margin-top:6px;display:block}
.carte-module .etat-icone{position:absolute;top:14px;right:14px;width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.carte-module .etat-icone.fait{background:var(--ok-fond);color:var(--ok)}

/* lecteur vidéo simulé */
.lecteur{background:#181c30;border-radius:8px;overflow:hidden;color:#fff;aspect-ratio:16/9;position:relative;display:flex;align-items:center;justify-content:center}
.lecteur svg.onde{width:70%;opacity:.4}
.lecteur .surcouche{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.bouton-lecture{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.14);border:1.6px solid rgba(255,255,255,.5);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;backdrop-filter:blur(2px)}
.bouton-lecture:hover{background:rgba(255,255,255,.22)}
.barre-lecteur{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;display:flex;align-items:center;gap:10px;background:linear-gradient(transparent,rgba(0,0,0,.55))}
.piste{flex:1;height:4px;border-radius:2px;background:rgba(255,255,255,.25);position:relative;overflow:hidden}
.piste i{display:block;height:100%;background:#fff;border-radius:2px;width:0%}
.temps{font-family:"Plex Sans",sans-serif;font-size:11px;color:#fff}

/* quiz */
.question-quiz{border:1px solid var(--ligne);border-radius:6px;background:var(--surface);padding:16px;margin-bottom:12px}
.question-quiz h4{font-size:14px;margin-bottom:10px}
.option-quiz{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--ligne);border-radius:6px;margin-bottom:8px;cursor:pointer;font-size:13.5px}
.option-quiz:hover{border-color:var(--accent-ligne)}
.option-quiz.choisi{border-color:var(--accent);background:var(--accent-faible)}
.option-quiz.correct{border-color:var(--ok-ligne);background:var(--ok-fond);color:var(--ok)}
.option-quiz.incorrect{border-color:var(--alerte-ligne);background:var(--alerte-fond);color:var(--alerte)}
.option-quiz input{accent-color:var(--accent)}

/* attestation */
.page-attestation{background:#fff;border:1px solid var(--ligne);max-width:720px;margin:0 auto;padding:56px 50px;position:relative;font-family:"Plex Sans",sans-serif}
.page-attestation .filet{border:2px solid var(--marque);padding:36px;text-align:center}
.page-attestation h1{font-size:26px;color:var(--marque);margin-bottom:6px}
.page-attestation .nomstage{font-size:20px;font-weight:700;margin:18px 0 6px}
.page-attestation .cachet{position:absolute;bottom:60px;right:70px;width:104px;height:104px;border:2px solid var(--marque);border-radius:50%;display:flex;align-items:center;justify-content:center;transform:rotate(-8deg);color:var(--marque);font-family:"Plex Sans",sans-serif;font-size:9.5px;text-align:center;line-height:1.3;padding:6px}
/* aperçu vivant — écran de connexion */
.av-chapitre{font-family:"Plex Sans",sans-serif;font-size:11px;color:var(--faible);margin-bottom:10px}
.av-barre{height:8px;border-radius:4px;background:var(--surface);border:1px solid var(--ligne);overflow:hidden;margin-bottom:16px}
.av-remplit{display:block;height:100%;background:var(--accent);border-radius:4px;width:8%}
.av-hero-actif .av-remplit{animation:avRemplirBarre 1.3s .4s var(--ease) both}
@keyframes avRemplirBarre{0%{width:8%}100%{width:100%}}
.av-coche{width:34px;height:34px;border-radius:50%;background:var(--ok-fond);color:var(--ok);display:flex;align-items:center;justify-content:center;margin:0 auto;opacity:0;transform:scale(.5)}
.av-hero-actif .av-coche{animation:avApparaitreCoche .6s 1.7s var(--ease) both}
@keyframes avApparaitreCoche{0%{opacity:0;transform:scale(.5)}70%{opacity:1;transform:scale(1.15)}100%{opacity:1;transform:scale(1)}}
.av-legende{margin-top:16px;font-size:12px;color:var(--faible);text-align:center}
@media(prefers-reduced-motion:reduce){.av-hero-actif .av-remplit{animation:none;width:100%}.av-hero-actif .av-coche{animation:none;opacity:1;transform:scale(1)}}
@media print{
  body *{visibility:hidden}
  #zone-impression, #zone-impression *{visibility:visible}
  #zone-impression{position:absolute;left:0;top:0;width:100%}
  .reset-demo,.bandeau-demo{display:none!important}
}