:root{
  --encre:#0C1512;
  --ardoise:#14211C;
  --ardoise2:#1B2B25;
  --trait:#26372F;
  --craie:#E9EEEA;
  --craie2:#A2B2AA;
  --papier:#EFE9DA;
  --papier2:#E2D9C2;
  --papier-trait:#C3B694;
  /* Vert Faso : le vert du drapeau pour les actions, l'or de l'étoile pour
     les accents. Le nom --laterite est gardé pour ne rien casser. */
  --laterite:#13805A;          /* boutons, 4,9:1 sous un texte blanc */
  --laterite-txt:#E9B44C;      /* accent en petit texte sur fond sombre */
  --erreur:#C2392E;            /* réponse fausse, alerte : rouge, jamais la marque */
  --cachet:#0E7A54;
  --or:#E3A82B;
  --survol:#3F5A4F;
  --vert-fond:#0F241C; --vert-bord:#1D5442; --vert-texte:#4FC28F; --vert-plein:#14503B;
  --rouge-fond:#241010; --rouge-bord:#5C2420; --rouge-texte:#EF7B6E; --rouge-plein:#3D1714;
  --ambre-fond:#221D0F; --ambre-bord:#4E4222; --ambre-texte:#C9A94A;
  --or-fond:#241F10; --or-texte:#D9CFB4; --or-bord:#3A3520; --or-encre:#1A1405;
  --ombre:0 30px 70px -20px rgba(0,0,0,.7);
  --d:'Bricolage Grotesque',system-ui,sans-serif;
  --b:'IBM Plex Sans',system-ui,sans-serif;
  --m:'IBM Plex Mono',ui-monospace,monospace;
  --barre:#0F1A16;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:#080B0A;color:var(--craie);font-family:var(--b);-webkit-font-smoothing:antialiased}
body{min-height:100vh;padding:28px 20px 60px}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:transform .1s ease, filter .15s ease, background-color .18s ease, border-color .18s ease}
button:active:not([disabled]){transform:scale(.975)}
.rep:active:not([disabled]),.pastille-op:active:not([disabled]){transform:scale(.93)}
.nav button:active,.rail button:active{transform:scale(.94)}
:focus-visible{outline:2px solid var(--or);outline-offset:2px}

/* ---------- MISE EN PAGE ---------- */
html,body{height:100%}
body{background:var(--encre);padding:0;overflow:hidden}
.app{height:100vh;height:100dvh;display:flex;flex-direction:column;background:var(--encre)}
.rail{display:none}
.vue{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.vue::-webkit-scrollbar{width:8px}
.vue::-webkit-scrollbar-thumb{background:var(--trait);border-radius:4px}
.vue:focus{outline:none}
.pad{padding:16px 18px 40px;max-width:760px;margin:0 auto;width:100%}
.hero,.qzone,.copie,.diag{max-width:760px;margin:0 auto;width:100%}

/* tablette et ordinateur : rail latéral, colonne centrée */
@media(min-width:760px){
  .app{display:grid;grid-template-columns:236px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr)}
  .apptete{grid-column:1 / -1}
  .rail{display:flex;flex-direction:column;gap:3px;padding:20px 14px;
    border-right:1px solid var(--trait);overflow-y:auto;background:var(--barre)}
  .rail button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 13px;
    border-radius:11px;font-size:14px;color:var(--craie2);transition:.14s}
  .rail button .g{display:grid;place-items:center;width:22px}
  .rail button:hover{background:var(--ardoise);color:var(--craie)}
  .rail button.on{background:var(--ardoise2);color:var(--craie);font-weight:600}
  .rail button.on .g{color:var(--laterite)}
  .rail button .g svg{display:block}
  .rail .pastille{margin-left:auto;background:var(--laterite);color:#fff;font-family:var(--m);
    font-size:10px;min-width:19px;height:19px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
  .rail .bas{margin-top:auto;padding-top:16px;border-top:1px solid var(--trait);font-size:11.5px;
    color:var(--craie2);line-height:1.5}
  .nav{display:none !important}
  .pad{padding:26px 34px 60px}
  .hero{padding:34px 34px 40px}
  .qzone{padding:26px 34px 50px}
  .copie{padding:30px 34px 50px}
  .titre{font-size:32px}
  .serment{font-size:46px}
  .qtexte{font-size:24px}
  .opt{font-size:15px;padding:14px 15px}
  .gr-tete,.gr-consigne,.gr-pied,.gr-corps{padding-left:max(18px,calc((100% - 820px)/2));padding-right:max(18px,calc((100% - 820px)/2))}
  .gr-corps.avec-scrub{padding-right:max(56px,calc((100% - 820px)/2))}
  .gr-q .tx{font-size:15px}
  .bulle{width:40px;height:29px}
  .deux-col{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start}
}
@media(min-width:1280px){
  .app{grid-template-columns:288px minmax(0,1fr)}
  .pad{padding:32px 40px 70px}
}

/* ---------- NAV ---------- *//* ---------- NAV ---------- */
.nav{flex:none;display:grid;grid-template-columns:repeat(5,1fr);border-top:1px solid var(--trait);
  background:var(--barre);padding:7px 4px calc(10px + env(safe-area-inset-bottom))}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:9.5px;
  letter-spacing:.03em;color:var(--craie2);padding:4px 0;position:relative}
.nav button .g{display:grid;place-items:center;height:20px}
.nav button.on{color:var(--craie)}
.nav button.on::before{content:'';position:absolute;top:-8px;width:22px;height:2px;background:var(--laterite)}
.nav .pastille{position:absolute;top:0;right:calc(50% - 20px);background:var(--laterite);color:#fff;
  font-family:var(--m);font-size:8.5px;min-width:14px;height:14px;border-radius:8px;display:grid;place-items:center;padding:0 3px}

/* ---------- BLOCS ---------- */
.eyebrow{font-family:var(--m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--craie2)}
.titre{font-family:var(--d);font-weight:800;font-size:25px;line-height:1.05;letter-spacing:-.025em;margin:6px 0 3px}
.sous{color:var(--craie2);font-size:14px;line-height:1.55}
.carte{background:var(--ardoise);border:1px solid var(--trait);border-radius:14px;padding:14px}
.carte+.carte{margin-top:10px}
.bloc{margin-top:22px}
.libelle{font-family:var(--m);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--craie2);margin-bottom:9px;display:flex;justify-content:space-between;align-items:baseline;gap:14px}
.cta{width:100%;background:var(--laterite);color:#fff;font-weight:600;font-size:14.5px;border-radius:11px;
  padding:14px;text-align:center;transition:transform .12s,filter .12s}
.cta:hover{filter:brightness(1.09)}.cta:active{transform:scale(.985)}
.cta.vert{background:var(--cachet)}
.cta.creux{background:none;border:1px solid var(--trait);color:var(--craie)}
.cta small{display:block;font-weight:400;font-size:12px;margin-top:3px;color:#fff}
.num{font-family:var(--m);font-variant-numeric:tabular-nums}

/* tampons */
.tampon{display:inline-flex;align-items:center;gap:5px;font-family:var(--m);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;padding:3px 7px;border-radius:4px;border:1px solid;white-space:nowrap}
.t-ok{color:var(--vert-texte);border-color:var(--vert-bord);background:var(--vert-fond)}
.t-att{color:var(--ambre-texte);border-color:var(--ambre-bord);background:var(--ambre-fond)}
.t-feu{color:var(--rouge-texte);border-color:var(--rouge-bord);background:var(--rouge-fond)}

/* ---------- DIAGNOSTIC ---------- */
.diag{padding:26px 20px}
.progression{display:flex;gap:5px;margin-bottom:26px}
.progression i{height:3px;flex:1;background:var(--trait);border-radius:2px;transition:background .35s ease, flex .45s cubic-bezier(.2,.8,.3,1)}
.progression i.on{background:var(--laterite)}
.choix{display:block;width:100%;text-align:left;background:var(--ardoise);border:1px solid var(--trait);
  border-radius:12px;padding:13px 14px;margin-bottom:9px;transition:border-color .15s,background .15s}
.choix:hover{border-color:var(--survol);background:var(--ardoise2)}
.choix b{display:block;font-size:14.5px;font-weight:600}
.choix span{display:block;font-size:11.5px;color:var(--craie2);margin-top:2px}

.marquehero{display:flex;align-items:center;gap:11px;margin-bottom:20px}
.marquehero .mot{font-family:var(--d);font-weight:800;font-size:17px;letter-spacing:.01em}
.marquehero .mot i{font-style:normal;color:var(--laterite-txt)}
.marquehero .devise{font-size:11.5px;color:var(--craie2);margin-top:2px}

/* ---------- NOTE DE COPIE ---------- */
.bloc-note{display:flex;align-items:center;gap:18px;margin:6px 0 4px}
.marque-note{flex:none;display:flex;align-items:baseline;justify-content:center;gap:1px;
  border:3px solid var(--laterite);border-radius:50%;width:104px;height:78px;
  transform:rotate(-5deg);color:var(--laterite);position:relative}
.marque-note::after{content:'';position:absolute;inset:-5px -7px;border:1.5px solid var(--laterite);
  border-radius:50%;opacity:.35;transform:rotate(3deg)}
.marque-note.ok{border-color:var(--cachet);color:var(--cachet)}
.marque-note.ok::after{border-color:var(--cachet)}
.marque-note .v{font-family:var(--d);font-weight:800;font-size:42px;letter-spacing:-.04em;line-height:1}
.marque-note .d{font-family:var(--d);font-weight:700;font-size:19px;opacity:.75}
.note-legende .l1{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--craie2)}
.note-legende .l2{font-size:15px;font-weight:600;margin:5px 0 6px;line-height:1.3}
.note-legende .l3{display:inline-block;font-family:var(--m);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--rouge-texte);border:1px solid var(--rouge-bord);
  background:var(--rouge-fond);border-radius:5px;padding:3px 8px}
.note-legende .l3.ok{color:var(--vert-texte);border-color:var(--vert-bord);background:var(--vert-fond)}

.echelle{margin-top:20px;border:1px solid var(--trait);border-radius:13px;padding:14px;background:var(--ardoise)}
.ec-tete{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--craie2);margin-bottom:12px}
.ec-tete .num{color:var(--craie);font-size:14px}
.echelle .barre-seuil{margin:0 0 6px;height:14px}
.echelle .barre-seuil .piste{top:4px}
.echelle .barre-seuil .moi{top:4px}
.echelle .barre-seuil .seuil{top:0;height:14px}
.ec-pied{position:relative;height:30px;font-family:var(--m);font-size:10.5px;color:var(--craie2)}
.ec-pied .num{position:absolute;top:0}
.ec-pied .num:first-child{left:0}
.ec-pied .num:last-child{right:0}
.ec-pied .marqueur{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  color:var(--or);font-size:10px;text-align:center;max-width:190px}
@media(max-width:400px){.ec-pied .marqueur{font-size:9.5px}}

/* ---------- ENGAGEMENT / RÉSULTAT ---------- */
.hero{display:block;padding:20px 22px 34px}
.serment{font-family:var(--d);font-weight:800;font-size:38px;line-height:1.02;letter-spacing:-.035em}
.serment em{font-style:normal;color:var(--laterite)}
.hero-texte{color:var(--craie2);font-size:14.5px;line-height:1.55;margin-top:14px}
.compteur-place{border:1px solid var(--trait);border-radius:12px;padding:12px 13px;margin-top:20px;
  display:flex;align-items:center;gap:12px;background:var(--ardoise)}
.compteur-place .gros{font-family:var(--d);font-weight:800;font-size:30px;letter-spacing:-.03em;color:var(--or);line-height:1}
.compteur-place p{font-size:11.5px;color:var(--craie2);line-height:1.45}
.reveal{animation:monte .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes monte{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.pastille-etape{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--craie2)}
.domaine{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--trait)}
.domaine:last-child{border-bottom:none}
.domaine .n{flex:1;font-size:14px}
.domaine .pts{display:flex;gap:3px}
.domaine .pts i{width:9px;height:9px;border-radius:50%;background:var(--trait)}
.domaine .pts i.j{background:var(--cachet)}
.domaine .pts i.f{background:var(--laterite)}
.verdict{border-radius:13px;border:1px solid;padding:16px;margin-top:16px;line-height:1.6;font-size:14.5px}
.verdict.solide{border-color:var(--vert-bord);background:var(--vert-fond)}
.verdict.fragile{border-color:var(--rouge-bord);background:var(--rouge-fond)}
.verdict b{display:block;font-family:var(--d);font-weight:700;font-size:16px;margin-bottom:6px;letter-spacing:-.01em}
.bonne-nouvelle{border-left:2px solid var(--or);padding-left:13px;margin-top:20px}
.bonne-nouvelle h2{font-family:var(--d);font-weight:700;font-size:17px;letter-spacing:-.02em;margin-bottom:5px}
.bonne-nouvelle p{font-size:12.5px;color:var(--craie2);line-height:1.55}

.tete-jour{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.pastille-j{display:inline-flex;align-items:baseline;gap:6px;font-family:var(--m);font-size:10px;
  letter-spacing:.04em;color:var(--craie2);border:1px solid var(--trait);background:var(--ardoise);
  border-radius:20px;padding:5px 11px;white-space:nowrap}
.pastille-j b{font-family:var(--d);font-weight:800;font-size:13px;color:var(--laterite-txt);letter-spacing:-.02em}
.sous-titre{font-size:13.5px;color:var(--craie2);margin-top:5px}
@media(max-width:360px){.pastille-j{font-size:9px;padding:4px 9px}}

.ligne-direct{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-top:7px}
.direct{display:inline-flex;align-items:center;gap:7px;font-family:var(--m);font-size:10.5px;
  letter-spacing:.09em;text-transform:uppercase;color:var(--laterite-txt)}
.direct i{width:8px;height:8px;border-radius:50%;background:var(--laterite);
  box-shadow:0 0 0 0 rgba(19,128,90,.6);animation:pulseDirect 1.8s ease-out infinite}
@keyframes pulseDirect{0%{box-shadow:0 0 0 0 rgba(19,128,90,.65)}70%{box-shadow:0 0 0 10px rgba(19,128,90,0)}100%{box-shadow:0 0 0 0 rgba(19,128,90,0)}}
.ligne-direct .sous-titre{margin-top:0}

.bandeau-actu{overflow:hidden;border-top:1px solid var(--trait);border-bottom:1px solid var(--trait);
  padding:7px 0;margin-bottom:12px;background:var(--ardoise)}
.bandeau-actu span{display:inline-block;white-space:nowrap;font-family:var(--m);font-size:10.5px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--craie2);padding-left:100%;
  animation:defileActu 26s linear infinite}
@keyframes defileActu{from{transform:translateX(0)}to{transform:translateX(-100%)}}
.tag-neuf{display:inline-block;font-family:var(--m);font-size:9px;letter-spacing:.12em;text-transform:uppercase;
  background:#E3A82B;color:#1B1503;border-radius:4px;padding:3px 7px;margin-left:5px}

/* ---------- REPRISE DE COMPOSITION ---------- */
.reprise-compo{display:block;width:100%;text-align:left;border:1.5px solid var(--laterite);
  background:var(--rouge-fond);border-radius:15px;padding:16px;margin:18px 0 4px;transition:transform .12s}
.reprise-compo:active{transform:scale(.99)}
.rc-tete{font-family:var(--m);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--rouge-texte)}
.rc-sujet{font-family:var(--d);font-weight:800;font-size:21px;letter-spacing:-.02em;margin:7px 0 4px}
.rc-nb{font-size:13px;color:var(--craie2)}
.rc-cta{display:inline-flex;align-items:center;gap:8px;margin-top:13px;background:var(--laterite);
  color:#fff;font-size:14px;font-weight:600;padding:10px 16px;border-radius:9px}

/* ---------- BULLETIN ---------- */
.info{border-left:2px solid var(--trait);padding:2px 0 2px 13px;margin-bottom:18px}
.info h2{font-size:16px;font-weight:600;line-height:1.35;margin:7px 0 5px}
.info p{font-size:14px;color:var(--craie2);line-height:1.55}
.info.ok{border-color:var(--cachet)}
.info.att{border-color:var(--ambre-bord)}

/* ---------- MATIÈRES ---------- */
.mat{display:flex;align-items:center;gap:11px;padding:9px 0;border-bottom:1px solid var(--trait)}
.mat:last-child{border-bottom:none}
.mat .nom{flex:1;font-size:14px}
.mat .nom em{display:block;font-style:normal;font-size:12.5px;line-height:1.4;color:var(--craie2);margin-top:2px}
.jauge{width:74px;height:4px;background:var(--trait);border-radius:2px;overflow:hidden}
.jauge i{display:block;height:100%;background:var(--craie2);transition:width .6s cubic-bezier(.2,.8,.3,1)}
.jauge.bas i{background:var(--laterite)}
.jauge.haut i{background:var(--cachet)}
.mat .val{font-family:var(--m);font-size:13px;min-width:36px;flex:none;text-align:right}

/* ---------- ÉTAPES ---------- */
.etape{display:flex;gap:11px;padding:11px 0;border-bottom:1px solid var(--trait);align-items:flex-start}
.etape:last-child{border-bottom:none}
.puce{width:21px;height:21px;flex:none;border-radius:50%;border:1px solid var(--trait);display:grid;place-items:center;
  font-family:var(--m);font-size:10px;color:var(--craie2);margin-top:1px}
.etape.fait .puce{background:var(--cachet);border-color:var(--cachet);color:#fff}
.etape.actif .puce{border-color:var(--laterite-txt);color:var(--laterite-txt)}
.etape h3{font-size:13.5px;font-weight:600}
.etape p{font-size:11.5px;color:var(--craie2);margin-top:2px;line-height:1.45}
.etape .dur{font-family:var(--m);font-size:10px;color:var(--craie2);margin-top:4px;display:block}
.etape.fait h3{color:var(--craie2);text-decoration:line-through;text-decoration-color:var(--trait)}

/* ---------- SÉANCE ---------- */
.qzone{padding:18px}
.qmeta{display:flex;justify-content:space-between;font-family:var(--m);font-size:10px;color:var(--craie2);letter-spacing:.06em;margin-bottom:16px}
.qtexte{font-family:var(--d);font-weight:700;font-size:20px;line-height:1.25;letter-spacing:-.02em;margin-bottom:18px}
.opt{display:flex;gap:10px;align-items:center;width:100%;text-align:left;background:var(--ardoise);
  border:1px solid var(--trait);border-radius:11px;padding:12px 13px;margin-bottom:8px;font-size:13.5px;transition:.15s}
.opt .lettre{font-family:var(--m);font-size:11px;width:20px;height:20px;flex:none;border:1px solid var(--trait);
  border-radius:50%;display:grid;place-items:center;color:var(--craie2)}
.opt:hover{border-color:var(--survol)}
.opt.juste{border-color:var(--cachet);background:var(--vert-fond)}
.opt.juste .lettre{background:var(--cachet);border-color:var(--cachet);color:#fff}
.opt.faux{border-color:var(--erreur);background:var(--rouge-fond)}
.opt.faux .lettre{background:var(--erreur);border-color:var(--erreur);color:#fff}
.opt.choisi{border-color:var(--craie2,#8A9490)}
.opt.choisi .lettre{background:var(--craie2,#8A9490);color:#fff}
.opt[disabled]{cursor:default}
.retour{border-radius:12px;padding:13px;font-size:13.5px;line-height:1.55;margin-top:12px;border:1px solid;
  animation:apparait .32s cubic-bezier(.2,.8,.3,1) both}
@keyframes apparait{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.retour.mal{animation:apparait .32s cubic-bezier(.2,.8,.3,1) both, attention 1.1s .3s ease-in-out 2}
@keyframes attention{0%,100%{border-color:var(--rouge-bord)}50%{border-color:var(--erreur)}}
.opt.juste{animation:pulseJuste .5s ease-out}
@keyframes pulseJuste{0%{transform:scale(1)}35%{transform:scale(1.02)}100%{transform:scale(1)}}
.opt.faux{animation:secousse .34s ease-in-out}
@keyframes secousse{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.retour.bien{border-color:var(--vert-bord);background:var(--vert-fond)}
.retour.mal{border-color:var(--rouge-bord);background:var(--rouge-fond)}
.retour b{display:block;font-size:12px;margin-bottom:4px;font-family:var(--m);letter-spacing:.06em;text-transform:uppercase}

.grille{background:var(--papier);color:#221F17;height:100%;display:flex;flex-direction:column;position:relative}
.scrub{position:absolute;right:8px;top:16%;height:58%;width:30px;z-index:4;touch-action:none;
  display:flex;justify-content:center}
.scrub .rail-s{width:6px;height:100%;background:var(--papier2);border:1px solid var(--papier-trait);
  border-radius:4px;transition:background .2s}
.scrub.actif .rail-s{background:#DDD2B6}
.scrub .poignee{position:absolute;left:0;width:28px;height:38px;border-radius:14px;
  background:#221F17;color:#FBF7EA;display:grid;place-items:center;font-family:var(--m);font-size:12px;
  box-shadow:0 3px 9px rgba(34,31,23,.25);cursor:grab;user-select:none;opacity:.65;
  transition:transform .14s ease, box-shadow .14s ease, opacity .2s ease}
.scrub:hover .poignee{opacity:1}
.scrub .poignee::before{content:'';position:absolute;inset:-14px -18px;border-radius:26px}
.scrub.actif .poignee{transform:scale(1.18);opacity:1;box-shadow:0 6px 20px rgba(34,31,23,.45);cursor:grabbing}
.scrub .bulle-q{position:absolute;right:46px;top:50%;transform:translateY(-50%) scale(.9);
  background:#221F17;color:#FBF7EA;font-family:var(--m);font-size:12.5px;padding:8px 12px;border-radius:9px;
  white-space:nowrap;opacity:0;transition:opacity .18s, transform .18s;pointer-events:none;
  box-shadow:0 4px 14px rgba(34,31,23,.35)}
.scrub.actif .bulle-q{opacity:1;transform:translateY(-50%) scale(1)}
.scrub .bulle-q::after{content:'';position:absolute;right:-5px;top:50%;margin-top:-5px;
  border:5px solid transparent;border-left-color:#221F17}
.gr-tete{background:#20211C;color:var(--papier);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;flex:none}
.gr-tete .t{font-family:var(--d);font-weight:800;font-size:14px;letter-spacing:.02em;text-transform:uppercase}
.gr-chrono{font-family:var(--m);font-size:18px;font-weight:600;letter-spacing:.04em}
.gr-chrono.chaud{color:#FF8A5C;animation:battement 1s ease-in-out infinite}
@keyframes battement{0%,100%{opacity:1}50%{opacity:.45}}
.sonnerie{flex:none;max-height:0;overflow:hidden;background:var(--laterite);color:#fff;
  font-family:var(--m);font-size:12px;letter-spacing:.06em;text-align:center;transition:max-height .3s,padding .3s;padding:0}
.sonnerie.vu{max-height:44px;padding:10px}
.gr-consigne{background:var(--papier2);border-bottom:1px solid var(--papier-trait);padding:8px 16px;
  font-family:var(--m);font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#4E4835;flex:none;display:flex;justify-content:space-between;gap:10px}
.gr-corps{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:14px 16px 20px;position:relative}
.gr-corps.avec-scrub{padding-right:50px}
.gr-entete-copie{display:flex;justify-content:space-between;font-family:var(--m);font-size:10.5px;color:#6B6350;
  border-bottom:1px solid var(--papier-trait);padding-bottom:9px;margin-bottom:12px;letter-spacing:.07em}

.gr-q{background:#FBF7EA;border:1px solid var(--papier-trait);border-radius:12px;padding:13px 13px 8px;margin-bottom:11px}
.gr-q .en{display:flex;gap:10px;align-items:flex-start;margin-bottom:8px}
.gr-q .no{font-family:var(--m);font-size:12px;font-weight:600;color:#fff;background:#3A342A;
  width:25px;height:25px;border-radius:7px;display:grid;place-items:center;flex:none}
.gr-q .tx{font-size:15px;line-height:1.35;font-weight:600;color:#1E1B14;padding-top:2px}
.reponses{display:flex;flex-direction:column}
.rep{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:6px 6px;border-radius:9px;transition:background .12s}
.rep:hover{background:#F1E9D5}
.rep .lib{font-size:14px;color:#302B21;line-height:1.3}
.bulle{width:28px;height:28px;flex:none;border:1.6px solid #8C826A;border-radius:50%;display:grid;place-items:center;
  font-family:var(--m);font-size:12px;color:#6B6350;background:#fff;transition:.12s;padding:0;line-height:1}
.rep:hover .bulle{border-color:#4A4436}
.bulle.noirci{background:#221F17;border-color:#221F17;color:#F4EFE0}
.bulle.ok{background:var(--cachet);border-color:var(--cachet);color:#fff}
.bulle.ko{background:var(--erreur);border-color:var(--erreur);color:#fff}
.bulle.vraie{border-color:var(--cachet);border-width:2.4px;color:var(--cachet);font-weight:600;background:#EAF6F0}
.rep.juste-rep .lib{color:var(--cachet);font-weight:600}
.gr-pied{flex:none;border-top:1px solid var(--papier-trait);background:var(--papier2);padding:11px 16px}
.gr-pied .compte{font-family:var(--m);font-size:10.5px;color:#5A5442;margin-bottom:9px;display:flex;justify-content:space-between}
.remettre{width:100%;background:#221F17;color:var(--papier);font-weight:600;font-size:14px;border-radius:9px;padding:13px}
.scan{position:absolute;left:0;right:0;height:70px;pointer-events:none;
  background:linear-gradient(180deg,rgba(14,122,84,0) 0%,rgba(14,122,84,.22) 60%,rgba(14,122,84,.6) 100%);
  border-bottom:2px solid var(--cachet);animation:scanner 1.5s ease-in-out forwards}
@keyframes scanner{from{top:-70px}to{top:100%}}
.copie{padding:22px 18px}
.copie .cachet-note{border:2px solid var(--laterite);border-radius:10px;padding:16px;text-align:center;
  transform:rotate(-2.2deg);margin:0 auto 18px;max-width:250px;color:var(--erreur);background:var(--rouge-fond)}
.copie .cachet-note.admis{border-color:var(--cachet);color:var(--vert-texte);background:var(--vert-fond)}
.copie .cachet-note .n{font-family:var(--d);font-weight:800;font-size:44px;line-height:1;letter-spacing:-.03em}
.copie .cachet-note .l{font-family:var(--m);font-size:11.5px;letter-spacing:.18em;text-transform:uppercase;margin-top:6px}
.barre-seuil{position:relative;height:34px;margin:16px 0 8px}
.barre-seuil .piste{position:absolute;top:14px;left:0;right:0;height:6px;background:var(--trait);border-radius:3px}
.barre-seuil .moi{position:absolute;top:14px;left:0;height:6px;background:var(--laterite);border-radius:3px;
  transition:width .8s cubic-bezier(.2,.8,.3,1)}
.barre-seuil .seuil{position:absolute;top:6px;width:2px;height:22px;background:var(--or)}
.barre-seuil .etq{position:absolute;top:-2px;font-family:var(--m);font-size:10.5px;color:var(--or);transform:translateX(-50%);white-space:nowrap}

.gr-onglets{display:flex;background:var(--papier2);border-bottom:1px solid var(--papier-trait);flex:none}
.gr-onglets button{flex:1;padding:11px 6px;font-size:13px;font-weight:600;color:#6B6350;
  border-bottom:2px solid transparent;display:flex;align-items:center;justify-content:center;gap:7px;position:relative}
.gr-onglets .ico-tab{display:grid;place-items:center}
.gr-onglets button.appel{color:#fff;background:var(--laterite);animation:appelFond 1.35s ease-in-out infinite}
.gr-onglets button.appel .ico-tab{color:#fff}
@keyframes appelFond{0%,100%{background:var(--laterite);color:#fff}50%{background:#0A5A3E;color:#E6F4EC}}
.gr-onglets .point{position:absolute;top:6px;right:9px;width:8px;height:8px;border-radius:50%;
  background:#fff;box-shadow:0 0 0 0 rgba(255,255,255,.7);animation:pointOnde 1.35s ease-out infinite}
@keyframes pointOnde{0%{box-shadow:0 0 0 0 rgba(255,255,255,.75)}70%{box-shadow:0 0 0 9px rgba(255,255,255,0)}100%{box-shadow:0 0 0 0 rgba(255,255,255,0)}}
.appel-note{flex:none;background:var(--laterite);color:#fff;font-family:var(--m);font-size:11px;
  letter-spacing:.05em;text-align:center;padding:7px 10px}

.sujet-tete{border-bottom:2px solid #221F17;padding-bottom:10px;margin-bottom:11px}
.sujet-tete .ref{font-family:var(--m);font-size:14px;font-weight:600;letter-spacing:.08em;color:#221F17}
.sujet-tete .sous{font-size:12px;color:#6B6350;margin-top:4px}
.barre-sujet{position:sticky;top:-14px;z-index:3;background:var(--papier);padding:8px 0 10px;
  border-bottom:1px solid var(--papier-trait);margin-bottom:14px;display:flex;justify-content:flex-end}
.bs-ref{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:#8A806A}
.bs-go{background:#221F17;color:#FBF7EA;font-size:12.5px;font-weight:600;padding:8px 13px;border-radius:8px;white-space:nowrap}
.bs-go:hover{background:#3A342A}
.cta-feuille{width:100%;background:#221F17;color:#FBF7EA;font-size:14.5px;font-weight:600;
  padding:14px;border-radius:10px;margin-top:16px}

.apercu{flex:none;background:#FFFDF7;border-top:2px solid #221F17;padding:12px 16px}
.ap-tete{display:flex;justify-content:space-between;align-items:center;font-family:var(--m);
  font-size:10.5px;letter-spacing:.1em;color:#8A806A;margin-bottom:6px}
.ap-x{font-size:14px;color:#6B6350;padding:2px 6px}
.ap-tx{font-size:14.5px;font-weight:600;line-height:1.35;color:#1E1B14;margin-bottom:7px}
.ap-props{display:grid;grid-template-columns:1fr 1fr;gap:3px 12px;margin-bottom:9px}
.ap-props span{font-size:13px;color:#3B372C;line-height:1.3}
.ap-props span.pris{color:#221F17;font-weight:600}
.ap-props b{font-family:var(--m);font-size:11.5px;color:#8A806A}
.ap-nav{display:flex;justify-content:space-between;align-items:center;border-top:1px dashed var(--papier-trait);padding-top:8px}
.ap-nav button{font-family:var(--m);font-size:11.5px;color:#544D3D;padding:4px 8px;border-radius:6px;border:1px solid var(--papier-trait);background:#F6F1E4}
.ap-nav .num{font-family:var(--m);font-size:11px;color:#8A806A}
@media(max-width:400px){.ap-props{grid-template-columns:1fr}}
.sujet-q{border-bottom:1px solid var(--papier-trait);padding:16px 0 18px}
.sujet-q:last-of-type{border-bottom:none}
.sq-tete{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:5px}
.sq-no{font-family:var(--m);font-size:12px;font-weight:700;letter-spacing:.09em;color:#221F17;
  background:#EDE4CC;border:1px solid var(--papier-trait);padding:4px 10px;border-radius:6px}
.sq-fait{font-family:var(--m);font-size:10.5px;color:var(--cachet)}
.sq-tx{font-size:17.5px;font-weight:700;line-height:1.3;color:#14120C;margin:9px 0 10px;letter-spacing:-.01em}
.props{display:flex;flex-direction:column;gap:7px}
.prop{font-size:15px;line-height:1.35;color:#2A2619;display:flex;gap:10px;align-items:center;
  background:#FFFDF7;border:1px solid var(--papier-trait);border-radius:9px;padding:9px 11px}
.prop b{font-family:var(--m);font-size:12.5px;font-weight:700;color:#221F17;flex:none;
  border:1.4px solid #A99C7E;border-radius:5px;padding:2px 7px;background:#F3ECDA;line-height:1.25}
@media(min-width:620px){.props{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px}}
.fin-sujet{text-align:center;font-family:var(--m);font-size:10.5px;letter-spacing:.1em;
  color:#8A806A;border-top:2px solid #221F17;margin-top:14px;padding-top:10px}
.remettre.alt{background:#FFFDF7;color:#221F17;border:1.5px solid #221F17}
@media(max-width:420px){.props{grid-template-columns:1fr}}
.gr-onglets button.on{color:#221F17;border-bottom-color:#221F17;background:rgba(255,255,255,.5)}
.gr-note{font-size:12px;font-style:italic;color:#6B6350;margin-bottom:12px;line-height:1.45}

.feuille{background:#FFFDF7;border:1px solid var(--papier-trait);border-radius:8px;padding:14px 10px}
.feuille-tete{display:flex;justify-content:space-between;font-family:var(--m);font-size:10px;color:#6B6350;
  letter-spacing:.07em;padding-bottom:9px;border-bottom:2px solid #221F17;margin-bottom:9px}
.feuille-consigne{font-size:11.5px;font-style:italic;text-align:center;color:#544D3D;line-height:1.4;
  padding-bottom:11px;border-bottom:1px solid var(--papier-trait);margin-bottom:11px}
.opt-grille{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;grid-template-rows:repeat(25,auto);gap:2px 8px;
  background-image:linear-gradient(to right,transparent calc(50% - .5px),var(--papier-trait) calc(50% - .5px),
    var(--papier-trait) calc(50% + .5px),transparent calc(50% + .5px));background-repeat:no-repeat}
.ligne-op{display:flex;align-items:center;gap:4px;padding:2px 1px;border-radius:6px;min-width:0}
.ligne-op.faite{background:#F6F1E2}
.ligne-op .n{font-family:var(--m);font-size:11px;color:#6B6350;width:21px;text-align:right;flex:none;
  padding:2px 1px;border-radius:5px}
.ligne-op .n:hover{background:#EFE7D3;color:#221F17}
.ligne-op .n.ouvert{background:#221F17;color:#FBF7EA}
.pastille-op{width:22px;height:22px;flex:none;border:1.4px solid #8C826A;border-radius:50%;
  font-family:var(--m);font-size:9.5px;color:#7A7364;display:grid;place-items:center;background:#fff;
  padding:0;line-height:1;transition:.1s}
.pastille-op:hover:not([disabled]){border-color:#3B372C;transform:scale(1.08)}
.pastille-op[disabled]{cursor:default}
.rep[disabled]{cursor:default}
.pastille-op.noirci{background:#221F17;border-color:#221F17;color:#FBF7EA}
.pastille-op.ok{background:var(--cachet);border-color:var(--cachet);color:#fff}
.pastille-op.ko{background:var(--erreur);border-color:var(--erreur);color:#fff}
.pastille-op.vraie{border-color:var(--cachet);border-width:2.2px;color:var(--cachet);font-weight:600}
.feuille-pied{margin-top:14px;padding-top:9px;border-top:2px solid #221F17;font-family:var(--m);
  font-size:9.5px;letter-spacing:.1em;color:#8A806A;text-align:center}
@media(min-width:430px){.pastille-op{width:25px;height:25px;font-size:10.5px}
  .ligne-op{gap:6px}.ligne-op .n{width:24px;font-size:11.5px}}
@media(min-width:700px){
  .opt-grille{grid-template-rows:repeat(17,auto);gap:3px 22px;
    background-image:linear-gradient(to right,transparent calc(33.33% - .5px),var(--papier-trait) calc(33.33% - .5px),
      var(--papier-trait) calc(33.33% + .5px),transparent calc(33.33% + .5px)),
      linear-gradient(to right,transparent calc(66.66% - .5px),var(--papier-trait) calc(66.66% - .5px),
      var(--papier-trait) calc(66.66% + .5px),transparent calc(66.66% + .5px))}
  .pastille-op{width:26px;height:26px;font-size:10.5px}}

/* ---------- CAHIER ---------- */
.err{background:var(--ardoise);border:1px solid var(--trait);border-radius:13px;padding:13px;margin-bottom:10px}
.err .q{font-size:15.5px;font-weight:600;line-height:1.35;margin-bottom:9px}
.err .ligne{font-size:13.5px;color:var(--craie2);line-height:1.55}
.err .ligne b{color:var(--vert-texte);font-weight:600}
.err .pied{display:flex;justify-content:space-between;align-items:center;margin-top:12px;
  font-family:var(--m);font-size:10.5px;color:var(--craie2);letter-spacing:.05em}
.acquis{display:flex;gap:3px}
.acquis i{width:16px;height:4px;border-radius:2px;background:var(--trait)}
.acquis i.on{background:var(--cachet)}
.err.close{opacity:.5}
.err .reprendre{background:var(--ardoise2);border:1px solid var(--trait);border-radius:8px;padding:8px 13px;font-size:13px;font-weight:600}
.vide{text-align:center;padding:36px 18px;color:var(--craie2);font-size:14px;line-height:1.65}
.vide .g{font-family:var(--d);font-size:34px;font-weight:800;color:var(--cachet);margin-bottom:8px}

/* ---------- PARCOURS ---------- */
.phase{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--trait)}
.phase:last-child{border-bottom:none}
.phase .n{width:22px;height:22px;flex:none;border-radius:6px;border:1px solid var(--trait);display:grid;place-items:center;
  font-family:var(--m);font-size:10px;color:var(--craie2)}
.phase.faite .n{background:var(--cachet);border-color:var(--cachet);color:#fff}
.phase.ici .n{background:var(--laterite);border-color:var(--laterite);color:#fff}
.phase h5{font-size:13.5px;font-weight:600}
.phase p{font-size:11.5px;color:var(--craie2);margin-top:2px;line-height:1.45}
.rang{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait);font-size:14px}
.rang:last-child{border-bottom:none}
.rang .p{font-family:var(--m);font-size:12px;color:var(--craie2);width:20px}
.rang .av{width:26px;height:26px;border-radius:50%;background:var(--ardoise2);border:1px solid var(--trait);
  display:grid;place-items:center;font-family:var(--m);font-size:11px}
.rang .n{flex:1}
.rang .n em{display:block;font-style:normal;font-size:11.5px;color:var(--craie2);margin-top:2px}
.rang .s{font-family:var(--m);font-size:14px}
.rang.moi{background:var(--ardoise2);margin:0 -8px;padding:8px;border-radius:8px;border-bottom:none}
.rang.moi .n{font-weight:600}

/* ---------- COLONNE NOTE ---------- */
.note{position:sticky;top:28px}
.note .kicker{font-family:var(--m);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--laterite-txt)}
.note h3{font-family:var(--d);font-weight:800;font-size:30px;line-height:1.06;letter-spacing:-.03em;margin:8px 0 12px}
.note .lede{font-size:14.5px;line-height:1.62;color:#C3CCC7;max-width:56ch}
.note .lede strong{color:var(--craie);font-weight:600}
.deux{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:22px}
@media(max-width:600px){.deux{grid-template-columns:1fr}}
.pan{border:1px solid var(--trait);border-radius:12px;padding:14px;background:#121A18}
.pan h6{font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--craie2);margin-bottom:9px}
.pan ul{list-style:none;font-size:12.5px;line-height:1.55;color:#B6C0BB}
.pan li{padding-left:15px;position:relative;margin-bottom:7px}
.pan li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:1px;background:var(--laterite)}
.pan.garde li::before{background:var(--cachet)}
.pan li b{color:var(--craie);font-weight:600}
.principes{margin-top:26px;border-top:1px solid var(--trait);padding-top:22px}
.principe{display:grid;grid-template-columns:34px 1fr;gap:14px;padding:14px 0;border-bottom:1px solid var(--trait)}
.principe:last-child{border-bottom:none}
.principe .k{font-family:var(--d);font-weight:800;font-size:19px;color:var(--trait);letter-spacing:-.03em}
.principe h5{font-size:15px;font-weight:600;margin-bottom:5px}
.principe p{font-size:13px;line-height:1.6;color:#A9B4AF}
.principe p em{font-style:normal;color:var(--craie);border-bottom:1px solid var(--trait)}
.chapo{font-family:var(--m);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--craie2);margin-bottom:14px}
.fin{margin-top:30px;border-top:1px solid var(--trait);padding-top:20px;font-size:13px;line-height:1.65;color:#A9B4AF}
.fin b{color:var(--craie)}

/* ---------- ACTUALITÉ ---------- */
.onglets{display:flex;gap:6px;margin:14px 0 4px}
.onglets button{flex:1;padding:9px;border-radius:9px;border:1px solid var(--trait);font-size:12.5px;font-weight:600;color:var(--craie2)}
.onglets button.on{background:var(--ardoise2);border-color:var(--survol);color:var(--craie)}
.voirplus{width:100%;margin-top:10px;padding:10px;border:1px dashed var(--trait);border-radius:10px;
  font-size:12px;font-family:var(--m);letter-spacing:.08em;color:var(--craie2)}
.voirplus:hover{border-color:var(--survol);color:var(--craie)}
/* Le retour doit se voir et se toucher sans viser : cible de 44 px,
   contour visible, position constante en haut à gauche de chaque écran. */
.retourhaut{display:inline-flex;align-items:center;gap:9px;
  font-family:var(--d);font-size:13.5px;font-weight:700;letter-spacing:.01em;
  text-transform:none;color:var(--craie);
  min-height:44px;padding:9px 16px 9px 12px;margin:0 0 16px -2px;
  border:1px solid var(--trait);border-radius:999px;background:var(--ardoise2);
  transition:background .16s ease,border-color .16s ease,transform .12s ease}
.retourhaut::before{content:'←';font-size:17px;line-height:1;margin-right:1px}
.retourhaut:active{transform:scale(.97);background:var(--trait)}
.retourhaut:focus-visible{outline:2px solid var(--or);outline-offset:2px}
.pourquoi{margin-top:8px;font-family:var(--m);font-size:10.5px;letter-spacing:.05em;color:var(--craie2);
  border-top:1px dotted var(--trait);padding-top:7px}

/* ---------- RÉVISIONS ---------- */
.niveaux{display:flex;gap:7px;margin-bottom:16px}
.niveaux button{flex:1;padding:10px 4px;border-radius:10px;border:1px solid var(--trait);font-size:12.5px;font-weight:600;color:var(--craie2)}
.niveaux button.on{background:var(--cachet);border-color:var(--cachet);color:#fff}
.cours{display:flex;align-items:center;gap:11px;background:var(--ardoise);border:1px solid var(--trait);
  border-radius:13px;padding:12px 13px;margin-bottom:9px;width:100%;text-align:left;transition:.15s}
.cours:hover{border-color:var(--survol);background:var(--ardoise2)}
.cours .ic{width:34px;height:34px;flex:none;border-radius:9px;background:var(--ardoise2);display:grid;place-items:center;font-size:16px}
.cours .co{flex:1;min-width:0}
.cours .co b{display:block;font-size:13.5px;font-weight:600}
.cours .bar{height:4px;background:var(--trait);border-radius:2px;margin-top:7px;overflow:hidden}
.cours .bar i{display:block;height:100%;background:var(--cachet);transition:width .6s cubic-bezier(.2,.8,.3,1)}
.cours .pc{font-size:12.5px;line-height:1.4;color:var(--craie2);margin-top:5px;display:block}
.cours .fl{font-family:var(--m);font-size:10px;color:var(--craie2);flex:none;text-align:right}

.bandeau-niveau{display:flex;align-items:center;gap:10px;justify-content:space-between;
  background:var(--ardoise2);border:1px solid var(--trait);border-radius:12px;padding:11px 13px;margin-bottom:14px}
.bandeau-niveau b{display:block;font-size:12.5px;font-weight:600}
.bandeau-niveau span{font-size:11.5px;color:var(--craie2)}
.cours .ic{width:36px;height:36px;flex:none;border-radius:9px;background:var(--ardoise2);border:1px solid var(--trait);
  display:grid;place-items:center;font-family:var(--m);font-size:12px;font-weight:600;color:var(--craie2);letter-spacing:.04em}
.fascicule{background:var(--ardoise);border:1px solid var(--trait);border-radius:13px;padding:13px;margin-bottom:9px}
.fascicule .ligne1{display:flex;align-items:center;gap:11px}
.fascicule .ic{width:36px;height:36px;flex:none;border-radius:9px;background:var(--ardoise2);border:1px solid var(--trait);
  display:grid;place-items:center;font-family:var(--m);font-size:12px;font-weight:600;color:var(--craie2)}
.fascicule .co{flex:1;min-width:0}
.fascicule .co b{display:block;font-size:13.5px;font-weight:600}
.fascicule .co span{font-size:11.5px;color:var(--craie2)}
.fascicule .cad{margin-left:auto;color:var(--craie2)}
.paire{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:11px}
.mini{display:flex;align-items:center;justify-content:center;gap:7px;border:1px solid var(--trait);
  border-radius:9px;padding:9px;font-size:12.5px;font-weight:600;color:var(--craie);width:100%}
.mini:hover{border-color:var(--survol);background:var(--ardoise2)}
.mini.bloquee{margin-top:11px;color:var(--craie2)}
.fascicule.verrou{opacity:.62}

/* ---------- QCM ---------- */
.qcm-tete{display:flex;justify-content:space-between;align-items:center;padding:14px 18px 0}
.qcm-tete .q{font-family:var(--m);font-size:10.5px;letter-spacing:.08em;color:var(--craie2)}
.qcm-tete .x{font-family:var(--m);font-size:14px;color:var(--craie2)}
.motiv{border:1px solid var(--or);background:var(--or-fond);border-radius:13px;padding:14px;margin-top:14px}
.motiv b{display:block;font-family:var(--d);font-weight:700;font-size:16px;color:var(--or);margin-bottom:4px}
.motiv p{font-size:12.5px;color:var(--or-texte);line-height:1.5}

/* ---------- COLLECTION DE RÉCOMPENSES ---------- */
.collection{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
@media(min-width:620px){.collection{grid-template-columns:repeat(3,1fr)}}
.badge-carte{position:relative;border:1px solid var(--trait);border-radius:12px;padding:12px 10px;
  text-align:center;background:var(--ardoise2)}
.badge-carte .jeton{margin:0 auto 8px;width:42px;height:34px;font-size:11.5px}
.badge-carte .bt{font-size:12.5px;font-weight:600;line-height:1.25}
.badge-carte .bd{font-size:11px;color:var(--craie2);margin-top:4px;line-height:1.3}
.badge-carte.off{opacity:.5}
.badge-carte.off .bt{color:var(--craie2)}
.badge-carte .cadena{position:absolute;top:8px;right:8px;color:var(--craie2)}

/* ---------- MON COMPTE ---------- */
.profil .av{font-family:var(--d);font-weight:800;font-size:22px;letter-spacing:.02em;color:var(--craie)}
.classement .t{display:flex;align-items:center;gap:7px}
.classement .rangbig{font-family:var(--d);font-weight:800;font-size:26px;letter-spacing:-.02em;line-height:1.1;color:var(--craie)}
.classement .calcul{margin-top:14px;border-top:1px solid var(--or-bord);padding-top:11px}
.classement .calcul .l{font-family:var(--m);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--craie2);margin-bottom:8px}
.classement .calcul .r{display:flex;justify-content:space-between;align-items:baseline;font-size:13.5px;
  color:var(--craie2);padding:4px 0}
.classement .calcul .r b{color:var(--vert-texte);font-size:13.5px}
.classement .calcul .r b.neg{color:var(--rouge-texte)}
.coupure{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;color:var(--craie2);text-align:center;padding:7px 0}
.jeton{width:34px;height:26px;flex:none;border-radius:7px;border:1px solid var(--trait);background:var(--ardoise2);
  display:grid;place-items:center;font-family:var(--m);font-size:10px;font-weight:600;color:var(--craie2);letter-spacing:.02em}
.jeton.gagne{background:var(--vert-plein);border-color:var(--vert-bord);color:var(--vert-texte)}
.grande .ic{display:grid;place-items:center;width:22px;color:var(--craie2)}
.badge{align-items:center}

.profil{display:flex;flex-direction:column;align-items:center;padding:18px 0 14px}
.profil .av{width:62px;height:62px;border-radius:50%;background:var(--ardoise2);border:1px solid var(--trait);
  display:grid;place-items:center;font-size:28px;margin-bottom:10px}
.profil h1{font-family:var(--d);font-weight:800;font-size:21px;letter-spacing:-.02em}
.profil span{font-family:var(--m);font-size:12px;color:var(--craie2);letter-spacing:.06em;margin-top:3px}
.duo{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.stat{background:var(--ardoise);border:1px solid var(--trait);border-radius:12px;padding:12px;text-align:center}
.stat .v{font-family:var(--d);font-weight:800;font-size:24px;letter-spacing:-.03em}
.stat .l{font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--craie2);margin-top:4px}
.classement{background:var(--or-fond);border:1px solid var(--or-bord);border-radius:14px;padding:15px;margin-top:10px}
.classement .t{font-family:var(--m);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--or);margin-bottom:10px}
.classement .rangbig{font-family:var(--d);font-weight:800;font-size:32px;letter-spacing:-.03em;line-height:1}
.classement .pts{font-family:var(--m);font-size:13.5px;color:var(--craie2);margin-top:5px}
.classement .up{font-family:var(--m);font-size:12.5px;color:var(--vert-texte);margin-top:3px}
.grande{display:flex;align-items:center;gap:11px;background:var(--ardoise);border:1px solid var(--trait);
  border-radius:13px;padding:14px;width:100%;text-align:left;margin-top:9px}
.grande:hover{border-color:var(--survol)}
.grande .ic{font-size:19px}
.grande b{display:block;font-size:14.5px;font-weight:600}
.grande span{display:block;font-size:12.5px;color:var(--craie2);margin-top:3px}
.grande .fl{margin-left:auto;color:var(--craie2);font-family:var(--m)}
.badge{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait);font-size:13.5px}
.badge:last-child{border-bottom:none}
.badge em{font-style:normal;color:var(--craie2);font-size:12px;display:block;margin-top:2px}
.badge.off{opacity:.4}
.semaine{display:flex;gap:6px;margin-top:11px}
.semaine div{flex:1;text-align:center}
.semaine .j{font-family:var(--m);font-size:10.5px;color:var(--craie2);margin-bottom:6px}
.semaine .c{height:30px;border-radius:7px;background:var(--trait);display:grid;place-items:center;font-size:13px}
.semaine .c.vert{background:var(--vert-plein);color:var(--vert-texte)}
.semaine .c.rouge{background:var(--rouge-plein);color:var(--rouge-texte)}
.semaine .c.vide{background:transparent;border:1px dashed var(--trait)}
.reglages button{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 0;
  border-bottom:1px solid var(--trait);font-size:14.5px;color:var(--craie)}
.reglages button:last-child{border-bottom:none}
.reglages button span{font-size:16px;color:var(--craie2)}
.reglages button.sortie{color:var(--laterite-txt)}


/* ---------- ACCESSIBILITÉ ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.vue:focus{outline:none}

/* ---------- EN-TÊTE D'APPLICATION ---------- */
.apptete{flex:none;display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--trait);background:var(--barre)}
@media(min-width:860px){.apptete{padding:14px 24px}.apptete .mot{font-size:16px}}
.apptete .mot{font-family:var(--d);font-weight:800;font-size:14px;letter-spacing:.02em;white-space:nowrap;margin-left:4px}
.apptete .mot i{font-style:normal;color:var(--laterite-txt)}
.apptete .droite{margin-left:auto;font-family:var(--m);font-size:10px;letter-spacing:.06em;color:var(--craie2)}
.bouton-tete{display:flex;align-items:center;gap:6px;border:1px solid var(--trait);border-radius:9px;
  padding:6px 10px;min-height:40px;min-width:40px;justify-content:center;font-size:11.5px;color:var(--craie2);white-space:nowrap;background:var(--ardoise)}
.bouton-tete:hover{border-color:var(--survol);color:var(--craie)}
.bouton-tete svg{display:block;flex:none}
.bouton-tete span{display:none}
@media(min-width:700px){.bouton-tete span{display:inline}}
@media(max-width:520px){.apptete .droite{display:none}}
.logo{flex:none;display:block}

/* ---------- SURCOUCHE ---------- */
.voile[hidden]{display:none !important}
.voile{position:fixed;inset:0;z-index:60;display:flex;align-items:flex-end;justify-content:center;
  background:rgba(8,12,10,.28);
  animation:voileIn .3s ease both;padding:16px}
body[data-theme="clair"] .voile{background:rgba(120,110,85,.18)}
@keyframes voileIn{from{opacity:0}to{opacity:1}}
.panneau{width:100%;max-width:460px;background:var(--encre);border:1px solid var(--trait);
  border-radius:20px;padding:20px 18px 18px;max-height:88vh;overflow-y:auto;
  box-shadow:var(--ombre);animation:monte .34s cubic-bezier(.2,.8,.3,1) both}
.panneau h3{font-family:var(--d);font-weight:800;font-size:23px;letter-spacing:-.025em;line-height:1.1}
.panneau .intro{font-size:13px;color:var(--craie2);line-height:1.5;margin:8px 0 16px}
.panneau .plustard{display:block;width:100%;text-align:center;margin-top:12px;font-size:12.5px;color:var(--craie2)}
.poignee{width:38px;height:4px;border-radius:2px;background:var(--trait);margin:0 auto 14px}
@media(min-width:860px){.voile{align-items:center}}

/* ---------- FORMULAIRES ---------- */
.champ{margin-bottom:12px}
.champ label{display:block;font-family:var(--m);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--craie2);margin-bottom:6px}
.champ input,.champ select{width:100%;background:var(--ardoise);border:1px solid var(--trait);border-radius:11px;
  padding:13px 14px;color:var(--craie);font-family:var(--b);font-size:15px}
.champ input::placeholder{color:var(--craie2)}
.champ input:focus{outline:2px solid var(--cachet);outline-offset:1px;border-color:var(--cachet)}
.champ .aide{font-size:11px;color:var(--craie2);margin-top:5px;line-height:1.45}
.prefixe{display:flex;align-items:center;gap:0}
.prefixe .ind{font-family:var(--m);font-size:14px;color:var(--craie2);background:var(--ardoise2);border:1px solid var(--trait);
  border-right:none;border-radius:11px 0 0 11px;padding:13px 11px}
.prefixe input{border-radius:0 11px 11px 0}
.alerte{border:1px solid var(--erreur);background:var(--rouge-fond);border-radius:10px;padding:11px 13px;
  font-size:12.5px;color:var(--rouge-texte);margin-bottom:12px;line-height:1.45}
.lien{display:block;width:100%;text-align:center;margin-top:14px;font-size:12.5px;color:var(--craie2);text-decoration:underline;text-underline-offset:3px}

/* ---------- ABONNEMENT ---------- */
.formule{border:1px solid var(--trait);border-radius:14px;padding:15px;margin-bottom:10px;background:var(--ardoise);
  width:100%;text-align:left;transition:.15s}
.formule:hover{border-color:var(--survol)}
.formule.on{border-color:var(--cachet);background:var(--vert-fond)}
.formule.reco{border-color:var(--or)}
.formule .haut{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.formule .nom{font-family:var(--d);font-weight:700;font-size:17px;letter-spacing:-.02em}
.formule .prix{font-family:var(--m);font-size:15px;color:var(--craie);white-space:nowrap}
.formule .prix em{font-style:normal;font-size:10px;color:var(--craie2)}
.formule ul{list-style:none;margin-top:10px}
.formule li{font-size:12.5px;color:var(--craie2);padding-left:16px;position:relative;margin-bottom:5px;line-height:1.4}
.formule li::before{content:'✓';position:absolute;left:0;color:var(--cachet);font-size:11px}
.formule li.non{color:var(--craie2)}
.formule li.non::before{content:'—';color:var(--survol)}
.ruban{display:inline-block;font-family:var(--m);font-size:8.5px;letter-spacing:.12em;text-transform:uppercase;
  background:var(--or);color:var(--or-encre);padding:2px 7px;border-radius:4px;margin-bottom:8px}
.operateur{display:flex;align-items:center;gap:11px;border:1px solid var(--trait);border-radius:12px;
  padding:13px;margin-bottom:9px;width:100%;text-align:left;background:var(--ardoise)}
.operateur.on{border-color:var(--cachet);background:var(--vert-fond)}
.operateur .pastille{width:32px;height:32px;border-radius:8px;display:grid;place-items:center;font-family:var(--d);
  font-weight:800;font-size:12px;flex:none}
.operateur .om{background:#FF6B00;color:#fff}
.operateur .mm{background:#0A4EA2;color:#fff}
.operateur .wv{background:#1DC8E0;color:#0A2A2E}
.operateur b{font-size:13.5px;display:block}
.operateur span{font-size:11.5px;color:var(--craie2)}
.ussd{background:var(--ardoise2);border:1px solid var(--trait);border-radius:12px;padding:18px;text-align:center;font-family:var(--m)}
.ussd .code{font-size:20px;letter-spacing:.06em;color:var(--craie);margin:10px 0}
.ussd p{font-size:11.5px;color:var(--craie2);line-height:1.6;font-family:var(--b)}
.attente{width:34px;height:34px;border:2px solid var(--trait);border-top-color:var(--cachet);border-radius:50%;
  margin:0 auto 14px;animation:tourne .9s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.verrou{opacity:.55;position:relative}
.verrou .cad{position:absolute;right:13px;top:50%;transform:translateY(-50%);font-size:15px}
.echeance{font-family:var(--m);font-size:10.5px;letter-spacing:.05em;color:var(--craie2)}
.echeance.du{color:var(--rouge-texte)}


/* ---------- THÈME CLAIR ---------- */
body[data-theme="clair"]{
  --encre:#F5F5F0;
  --ardoise:#FFFFFF;
  --ardoise2:#ECEFEA;
  --trait:#DDE3DC;
  --craie:#13201A;
  --craie2:#4F5D56;
  --barre:#FFFFFF;
  --survol:#A9B7AF;
  --laterite:#0B6B4A;
  --laterite-txt:#0B6B4A;
  --erreur:#B3261E;
  --cachet:#0A6141;
  --or:#8A6510;
  --vert-fond:#E6F2EB; --vert-bord:#A6D2BC; --vert-texte:#0A6141; --vert-plein:#CFE8DB;
  --rouge-fond:#FBEAEA; --rouge-bord:#E8B4B0; --rouge-texte:#A3241C; --rouge-plein:#F5D5D2;
  --ambre-fond:#FAF1DB; --ambre-bord:#DCC689; --ambre-texte:#755509;
  --or-fond:#FBF6EA; --or-texte:#5A4614; --or-bord:#DFCFA6; --or-encre:#FFFFFF;
  --papier:#F6F1E4; --papier2:#EBE4D2; --papier-trait:#D4CAB1;
  --ombre:0 20px 50px -22px rgba(60,50,30,.35);
}
/* profondeur douce : les cartes se détachent par l'ombre, pas par un trait dur */
body[data-theme="clair"] .carte,
body[data-theme="clair"] .cours,
body[data-theme="clair"] .fascicule,
body[data-theme="clair"] .stat,
body[data-theme="clair"] .grande,
body[data-theme="clair"] .formule,
body[data-theme="clair"] .operateur,
body[data-theme="clair"] .err,
body[data-theme="clair"] .theme-carte,
body[data-theme="clair"] .compteur-place{border-color:#E3E8E2;box-shadow:0 1px 2px rgba(20,45,32,.05),0 8px 20px -14px rgba(20,45,32,.18)}
body[data-theme="clair"] .apptete{background:var(--barre);border-bottom-color:#DDE3DC;
  box-shadow:0 1px 0 rgba(20,45,32,.05)}
body[data-theme="clair"] .nav{background:var(--barre);border-top-color:#DDE3DC}
body[data-theme="clair"] .rail{background:#F0F3EE;border-right-color:#DDE3DC}
body[data-theme="clair"] .rail button:hover{background:#FFFFFF}
body[data-theme="clair"] .rail button.on{background:#FFFFFF;box-shadow:0 1px 2px rgba(20,45,32,.06)}
body[data-theme="clair"] .nav button{color:#5F5A4F}
body[data-theme="clair"] .nav button.on{color:var(--craie)}
body[data-theme="clair"] .bouton-tete{background:#FFFFFF;border-color:#DDE3DC}

body[data-theme="clair"] .cta:not(.creux){color:#fff;box-shadow:0 6px 16px -8px rgba(11,107,74,.6)}
body[data-theme="clair"] .cta.creux{color:var(--craie);border-color:var(--survol);background:#FFFFFF}
body[data-theme="clair"] .cta.creux small{color:var(--craie2)}
body[data-theme="clair"] .cta.vert{box-shadow:0 6px 16px -8px rgba(10,97,65,.55)}

body[data-theme="clair"] .classement{background:linear-gradient(165deg,#FDF8EC,#F6EFDD);border-color:#E3D3A9}
body[data-theme="clair"] .classement .calcul{border-top-color:#E3D3A9}
body[data-theme="clair"] .rang.moi{background:#FFFFFF}
body[data-theme="clair"] .rang .av{background:var(--ardoise2)}

body[data-theme="clair"] .champ input{background:#FFFFFF}
body[data-theme="clair"] .semaine .c{background:var(--ardoise2)}
body[data-theme="clair"] .semaine .c.vide{background:transparent}
body[data-theme="clair"] .jeton{background:var(--ardoise2)}
body[data-theme="clair"] .ussd{background:#FFFFFF;border-color:#DDE3DC}
body[data-theme="clair"] .ussd .code{color:var(--craie)}
body[data-theme="clair"] .cachet-note{background:var(--rouge-fond)}
body[data-theme="clair"] .cachet-note.admis{background:var(--vert-fond)}
body[data-theme="clair"] .ruban{color:#fff;background:#8A6510}
body[data-theme="clair"] .operateur .wv{color:#08272B}
body[data-theme="clair"] .jauge{background:var(--ardoise2)}
body[data-theme="clair"] .acquis i{background:var(--ardoise2)}
body[data-theme="clair"] .progression i{background:var(--ardoise2)}
body[data-theme="clair"] .voile{background:rgba(60,52,36,.22)}
body[data-theme="clair"] .panneau{background:#FFFFFF}
body[data-theme="clair"] .vue::-webkit-scrollbar-thumb{background:#DCD5C4}

/* la feuille de composition reste du papier dans les deux thèmes */
body[data-theme="clair"] .gr-tete{background:#26241D}
body[data-theme="clair"] .gr-q,
body[data-theme="clair"] .feuille{background:#FFFDF7}
body[data-theme="clair"] .bulle,
body[data-theme="clair"] .pastille-op{background:#fff;border-color:#9C927C;color:#6B6350}
body[data-theme="clair"] .bulle.noirci,
body[data-theme="clair"] .pastille-op.noirci{background:#221F17;border-color:#221F17;color:#FBF7EA}
body[data-theme="clair"] .rep:hover{background:#F5EFE0}
body[data-theme="clair"] .gr-q .no{background:#3A342A}

.theme-carte{border:1px solid var(--trait);border-radius:14px;padding:16px;margin-bottom:11px;width:100%;text-align:left;background:var(--ardoise)}
.theme-carte.on{border-color:var(--cachet);background:var(--vert-fond)}
body[data-theme="clair"] .theme-carte.on{background:#E9F5EF}
.theme-carte .demo{height:52px;border-radius:9px;margin-bottom:11px;display:flex;overflow:hidden;border:1px solid var(--trait)}
.theme-carte .demo i{flex:1}
.theme-carte b{display:block;font-size:14.5px;font-weight:600}
.theme-carte span{font-size:12px;color:var(--craie2)}
.theme-carte .coche{float:right;font-family:var(--m);font-size:11px;color:var(--cachet)}
body.en-transition,
body.en-transition *{transition:background-color .4s ease, color .4s ease, border-color .4s ease, fill .4s ease !important}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- jauge des places ---------- */
.jauge-places{position:relative;height:12px;margin:14px 0 6px}
.jauge-places .piste{position:absolute;inset:3px 0;background:var(--trait);border-radius:3px}
.jauge-places .admis{position:absolute;top:3px;left:0;height:6px;background:var(--cachet);border-radius:3px}
.jauge-places .curseur{position:absolute;top:0;width:3px;height:12px;background:var(--laterite);
  border-radius:2px;transition:left .8s cubic-bezier(.2,.8,.3,1)}
.legende-places{display:flex;justify-content:space-between;font-family:var(--m);font-size:10px;color:var(--craie2)}
.classement .up.baisse{color:var(--rouge-texte)}

/* ---------- message flottant ---------- */
.message-flottant{position:fixed;left:50%;bottom:96px;transform:translate(-50%,20px);
  background:var(--cachet);color:#fff;font-size:14px;padding:12px 18px;border-radius:11px;
  box-shadow:0 10px 30px -10px rgba(0,0,0,.5);z-index:80;opacity:0;transition:opacity .3s,transform .3s;
  max-width:88%;text-align:center}
.message-flottant.vu{opacity:1;transform:translate(-50%,0)}

/* ---------- panneau : titre et œil ---------- */
.titre-panneau{font-family:var(--d);font-weight:800;font-size:25px;letter-spacing:-.025em;line-height:1.1}
.avec-oeil{position:relative}
.avec-oeil input{padding-right:78px}
.oeil{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--m);
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--craie2);
  border:1px solid var(--trait);border-radius:7px;padding:5px 9px;background:var(--ardoise2)}
.oeil:hover{color:var(--craie);border-color:var(--survol)}
.champ select{width:100%;background:var(--ardoise);border:1px solid var(--trait);border-radius:11px;
  padding:13px 14px;color:var(--craie);font-size:15px;margin-bottom:14px}

.err .reprendre.valider{background:var(--vert-fond);border-color:var(--vert-bord);color:var(--vert-texte)}
.err .reprendre.valider:hover{background:var(--vert-plein)}

/* ============================================================
   GRANDS ÉCRANS — l'espace est utilisé, pas laissé vide
   ============================================================ */
@media(min-width:1100px){
  .app{grid-template-columns:280px minmax(0,1fr)}
  .pad{max-width:1080px;padding:30px 40px 70px}
  .hero{max-width:900px;padding:44px 40px}
  .qzone,.copie{max-width:860px}
  .titre{font-size:36px}
  .serment{font-size:54px}
  .sous{font-size:15px}

  /* l'accueil se met sur deux colonnes : actualité à gauche, tâches à droite */
  .pad .colonnes{display:grid;grid-template-columns:1.35fr 1fr;gap:26px;align-items:start;margin-top:22px}
  .pad .colonnes .bloc{margin-top:0}

  /* les listes respirent */
  .compteurs{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
  .collection{grid-template-columns:repeat(4,1fr)}
  .cours{padding:15px 16px}
  .cours .co b{font-size:15px}
  .fascicule{padding:16px}
  .info h2{font-size:17px}
  .info p{font-size:15px}
}

@media(min-width:1500px){
  .pad{max-width:1240px}
  .pad .colonnes{grid-template-columns:1.4fr 1fr;gap:34px}
}

/* tablette en portrait : deux colonnes de contenu, rail visible */
@media(min-width:760px) and (max-width:1099px){
  .pad{max-width:900px;padding:26px 30px 60px}
  .collection{grid-template-columns:repeat(3,1fr)}
}

/* écrans très étroits : rien ne déborde */
@media(max-width:340px){
  .titre{font-size:22px}
  .serment{font-size:29px}
  .pad{padding:14px 13px 40px}
  .compteurs{grid-template-columns:1fr}
}

/* on respecte l'encoche et la barre de gestes */
.app{padding-bottom:env(safe-area-inset-bottom)}
@media(min-width:760px){.app{padding-bottom:0}}

/* ---------- animations discrètes ---------- */
.carte, .compteur, .cours, .fascicule, .err, .info{
  animation:entree .38s cubic-bezier(.2,.8,.3,1) both}
@keyframes entree{from{opacity:0;transform:translateY(7px)}to{opacity:1;transform:none}}
.vue > .pad > .bloc:nth-child(2){animation-delay:.04s}
.vue > .pad > .bloc:nth-child(3){animation-delay:.08s}
.compteur:hover,.cours:hover,.fascicule:hover{transform:translateY(-1px)}
.compteur,.cours,.fascicule{transition:transform .16s ease,border-color .16s ease}
@media(prefers-reduced-motion:reduce){
  .carte,.compteur,.cours,.fascicule,.err,.info{animation:none}
}

/* ---------- LECTURE D'UN COURS ----------
   Le candidat doit pouvoir lire longtemps sans fatigue :
   ligne aérée, titres qui découpent, formules détachées. */
.lecon{font-size:16px;line-height:1.8}
.lecon p{margin:0 0 14px}
.lecon p:last-child{margin-bottom:0}
.lecon h3{font-family:var(--d);font-size:12px;font-weight:800;letter-spacing:.09em;
  color:var(--craie2);margin:26px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--trait)}
.lecon h3:first-child{margin-top:0}
.lecon h3.cible{color:var(--or);border-bottom-color:var(--or-bord)}
.lecon ol{margin:0 0 14px 22px}
.lecon ol li{margin:0 0 7px;padding-left:4px}
.lecon .formule{font-family:var(--m);font-size:15px;font-weight:600;
  background:var(--ardoise2);border:1px solid var(--trait);border-radius:10px;
  padding:10px 14px;margin:0 0 14px}
@media(min-width:700px){ .lecon{font-size:17px;line-height:1.85} }

/* ---------- MESSAGE COURT EN BAS D'ÉCRAN ---------- */
#toast{position:fixed;left:50%;bottom:84px;transform:translate(-50%,14px);
  max-width:min(92vw,420px);padding:12px 16px;border-radius:12px;
  background:var(--ardoise2);border:1px solid var(--trait);color:var(--craie);
  font-size:14px;line-height:1.45;text-align:center;z-index:400;
  opacity:0;pointer-events:none;transition:opacity .22s ease,transform .22s ease;
  box-shadow:0 10px 30px rgba(0,0,0,.35)}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* ---------- PROGRESSION DE LECTURE ---------- */
.jauge-lecture{position:sticky;top:0;height:3px;background:var(--trait);
  border-radius:2px;margin:0 0 10px;overflow:hidden;z-index:5}
.jauge-lecture i{display:block;height:100%;width:0;background:var(--or);
  transition:width .12s linear}
.chapitre{border-top:1px solid var(--trait);padding-top:20px}
.chapitre:first-of-type{border-top:0;padding-top:0}

/* ---------- SQUELETTES DE CHARGEMENT ---------- */
.squelette{background:linear-gradient(90deg,var(--ardoise2) 25%,var(--trait) 37%,var(--ardoise2) 63%);
  background-size:400% 100%;animation:glisse 1.3s ease infinite;border-radius:8px;height:14px;margin:0 0 10px}
.squelette.large{height:22px;width:62%}
.squelette.court{width:38%}
@keyframes glisse{0%{background-position:100% 50%}100%{background-position:0 50%}}
@media(prefers-reduced-motion:reduce){.squelette{animation:none}}

/* ---------- LIENS DANS LA LISTE DES RÉGLAGES ---------- */
.carte.reglages a{display:flex;align-items:center;justify-content:space-between;
  width:100%;padding:13px 0;border-bottom:1px solid var(--trait);
  color:inherit;text-decoration:none;font:inherit}
.carte.reglages a:last-child{border-bottom:0}

/* ---------- LECTURE : CONFORT SUR GRAND ÉCRAN ---------- */
@media(min-width:900px){ .lecon{max-width:68ch} }

/* ---------- ÉLÉMENT RÉSERVÉ AUX LECTEURS D'ÉCRAN ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ---------- IDENTITÉ EN FIN DE COMPOSITION ---------- */
.carte-identite{display:flex;align-items:center;gap:12px;margin:0 0 18px;
  padding:12px 14px;border:1px solid var(--trait);border-radius:14px;background:var(--ardoise2)}
.carte-identite .av{width:44px;height:44px;flex:0 0 auto;border-radius:12px;
  display:grid;place-items:center;font-family:var(--d);font-weight:800;font-size:15px;
  background:var(--laterite);color:#fff;letter-spacing:.03em}
.carte-identite .qui{flex:1;min-width:0}
.carte-identite .qui b{display:block;font-size:15px;line-height:1.25}
.carte-identite .qui span{display:block;font-size:12px;color:var(--craie2);margin-top:2px}
.carte-identite .note-mini{text-align:right;flex:0 0 auto}
.carte-identite .note-mini b{font-size:26px;line-height:1;font-weight:800}
.carte-identite .note-mini i{display:block;font-style:normal;font-size:11px;color:var(--craie2)}

/* ---------- HIÉRARCHIE DES BOUTONS ----------
   Une seule action principale par écran. Le reste s'efface. */
.cta{position:relative;transition:transform .12s ease,box-shadow .18s ease,background .18s ease}
.cta:active{transform:scale(.985)}
.cta:not(.creux){box-shadow:0 6px 18px -8px var(--laterite)}
.cta.creux{background:transparent;box-shadow:none;opacity:.94}
.cta.creux:hover{opacity:1;border-color:var(--craie2)}
.cta.creux small{color:var(--craie2)}
/* troisième niveau : discret, pour les actions annexes */
.cta.discret{background:transparent;border:1px dashed var(--trait);color:var(--craie2);
  font-size:14px;padding:11px 14px}
.cta.discret small{display:block;font-size:11px;opacity:.7}

/* ---------- BOUTON MUSIQUE ---------- */
.bouton-tete.actif{color:var(--or);border-color:var(--or-bord)}
.bouton-tete.actif svg{animation:pulseMusique 2.4s ease-in-out infinite}
@keyframes pulseMusique{0%,100%{opacity:1}50%{opacity:.45}}

/* ---------- ANIMATIONS D'ENTRÉE ----------
   RÈGLE ABSOLUE : aucun contenu ne doit dépendre d'une animation pour
   être visible. En mode économie de batterie, Android coupe les
   animations : un bloc parti d'une opacité nulle ne réapparaîtrait
   jamais. Tout est donc visible par défaut, l'animation se contente
   d'un léger glissement. */
.pad>*,.copie>*{opacity:1}
@media(prefers-reduced-motion:no-preference){
  .pad>*,.copie>*{animation:monte .3s cubic-bezier(.22,.8,.3,1)}
  .cachet-note{animation:tampon .4s cubic-bezier(.2,1.5,.4,1)}
}
@keyframes monte{from{transform:translateY(8px)}to{transform:none}}
@keyframes tampon{from{transform:scale(.86) rotate(-3deg)}to{transform:none}}
.cachet-note{opacity:1}

/* ---------- BOUTON COMPOSITION : LE CŒUR DE LA BARRE ----------
   Il est au milieu, il est plus gros, il appelle le doigt. */
.nav{position:relative;overflow:visible}
.nav button.pivot{position:relative;margin-top:-20px;color:#fff;font-weight:700}
.nav button.pivot .g{width:56px;height:56px;border-radius:50%;
  background:var(--laterite);
  color:#fff;display:grid;place-items:center;margin-bottom:3px;
  border:4px solid var(--barre);
  box-shadow:0 2px 6px rgba(0,0,0,.25);
  transition:transform .16s cubic-bezier(.2,1.4,.4,1),box-shadow .16s ease}
.nav button.pivot:active .g{transform:scale(.93)}
.nav button.pivot.on .g{box-shadow:0 0 0 2px var(--craie2)}
.nav button.pivot.on::before{display:none}

/* ---------- FEUILLE DE PARTAGE ---------- */
.partages{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.pt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  min-height:82px;padding:12px 4px;border-radius:14px;border:1px solid var(--trait);
  background:var(--ardoise2);color:var(--craie);font-size:11.5px;text-decoration:none;
  transition:transform .12s ease,border-color .16s ease}
.pt:active{transform:scale(.96)}
.pt.wa{color:#25D366;border-color:rgba(37,211,102,.35)}
.pt.fb{color:#1877F2;border-color:rgba(24,119,242,.35)}
.pt span{color:var(--craie2);letter-spacing:.02em}

@media(max-width:340px){
  .nav button.pivot .g{width:50px;height:50px}
  .partages{grid-template-columns:repeat(2,1fr)}
}

/* ---------- LIENS RÉSEAUX ---------- */
.lien-reseau{display:flex;align-items:center;gap:12px;width:100%;
  padding:13px 14px;margin-bottom:8px;border-radius:14px;
  border:1px solid var(--trait);background:var(--ardoise2);
  color:var(--craie);text-decoration:none;text-align:left;
  transition:transform .12s ease,border-color .16s ease}
.lien-reseau:last-child{margin-bottom:0}
.lien-reseau:active{transform:scale(.985)}
.lien-reseau svg{flex:0 0 auto}
.lien-reseau span{display:block;min-width:0}
.lien-reseau b{display:block;font-size:14.5px;font-weight:600;line-height:1.3}
.lien-reseau i{display:block;font-style:normal;font-size:12px;color:var(--craie2);margin-top:2px}
.lien-reseau.wa{color:#25D366;border-color:rgba(37,211,102,.3)}
.lien-reseau.fb{color:#1877F2;border-color:rgba(24,119,242,.3)}
.lien-reseau.yt{color:#FF0000;border-color:rgba(255,0,0,.3)}
.lien-reseau.wa b,.lien-reseau.fb b,.lien-reseau.yt b{color:var(--craie)}

/* ---------- COMPTE À REBOURS ---------- */
.pastille-j.urgent{border-color:var(--erreur);background:rgba(194,57,46,.12)}
.pastille-j.urgent .num{color:var(--laterite-txt)}

/* ---------- SWIPE ENTRE SUJET ET FEUILLE ---------- */
.gr-corps.glisse-gauche{animation:glisseGauche .26s ease}
.gr-corps.glisse-droite{animation:glisseDroite .26s ease}
@keyframes glisseGauche{from{opacity:.4;transform:translateX(16px)}to{opacity:1;transform:none}}
@keyframes glisseDroite{from{opacity:.4;transform:translateX(-16px)}to{opacity:1;transform:none}}

/* ---------- DÉMONSTRATION DU SWIPE (une seule fois) ---------- */
#demo-swipe{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:14px;background:rgba(12,21,18,.88);
  pointer-events:none;opacity:0;transition:opacity .25s ease}
#demo-swipe.joue{opacity:1}
#demo-swipe span{color:var(--craie);font-size:13px;letter-spacing:.04em;
  font-family:var(--d);font-weight:700}
#demo-swipe .doigt{width:30px;height:30px;border-radius:50%;background:var(--or);
  box-shadow:0 0 0 8px rgba(224,168,88,.18);
  animation:doigtGlisse 1.8s ease-in-out .3s 1}
@keyframes doigtGlisse{
  0%{transform:translateX(46px);opacity:0}
  15%{opacity:1}
  50%{transform:translateX(-46px)}
  85%{opacity:1}
  100%{transform:translateX(-46px);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .gr-corps.glisse-gauche,.gr-corps.glisse-droite,#demo-swipe .doigt{animation:none}
}

/* ---------- EN-TÊTE REPLIABLE DE LA COMPOSITION ---------- */
.gr-tete{transition:padding .22s ease,gap .22s ease}
.gr-tete .t,.gr-tete .eyebrow{transition:font-size .22s ease,opacity .22s ease,max-height .22s ease,margin .22s ease}
.gr-tete.replie{padding-top:8px;padding-bottom:8px}
.gr-tete.replie .t{font-size:12.5px;max-height:0;opacity:0;margin:0;overflow:hidden}
.gr-tete.replie .eyebrow{font-size:11px}
.gr-tete.replie .gr-chrono{transform:scale(.82);transform-origin:right center}

/* ---------- « OÙ SE CONCENTRENT MES ERREURS ? » ----------
   Hiérarchie forte : la matière la plus touchée saute aux yeux avant
   même de lire un chiffre. */
.carte.concentration{margin:14px 0 4px;padding:16px}
.conc-ligne{margin-bottom:16px}
.conc-ligne:last-child{margin-bottom:0}
.conc-tete{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:6px}
.conc-tete b{font-family:var(--d);font-size:15.5px;font-weight:800;letter-spacing:.01em}
.conc-tete .num{font-family:var(--m);font-size:13px;color:var(--laterite-txt);font-weight:700}
.conc-barre{height:8px;border-radius:5px;background:var(--trait);overflow:hidden}
.conc-barre i{display:block;height:100%;border-radius:5px;
  background:linear-gradient(90deg,var(--laterite),#D9713F);min-width:6%}
.conc-notions{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.conc-notions span{font-size:11.5px;color:var(--craie2);background:var(--ardoise2);
  border:1px solid var(--trait);border-radius:999px;padding:4px 10px}

/* ---------- ERREUR RÉCEMMENT VALIDÉE : confirmation avant disparition ---------- */
.err-validee{opacity:.62;border-color:var(--vert-bord);background:var(--vert-fond)}
.echeance.ok{color:var(--vert,#0E7A54);font-weight:700}

/* Plus de lisibilité générale sur le cahier : titres, contrastes, respiration */
.err .q{font-size:15px;line-height:1.4;font-weight:600;margin-bottom:8px}
.libelle{font-family:var(--d);font-size:13px;font-weight:800;letter-spacing:.02em}

/* ---------- DÉPÔT DE LA PREUVE DE PAIEMENT ---------- */
.depot-preuve{display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:34px 20px;border:2px dashed var(--trait);border-radius:16px;
  color:var(--craie2);cursor:pointer;text-align:center;transition:border-color .16s ease}
.depot-preuve:active{border-color:var(--laterite)}
.depot-preuve b{color:var(--craie);font-size:14.5px;font-weight:600}
.depot-preuve span{font-size:12px}
.apercu-preuve{border-radius:16px;overflow:hidden;border:1px solid var(--trait);background:var(--ardoise2)}
.apercu-preuve img{display:block;width:100%;max-height:360px;object-fit:contain;background:#000}

/* ---------- OPÉRATEUR INDISPONIBLE ---------- */
.operateur.indispo{opacity:.42;pointer-events:none}

/* ---------- CLOCHE DE NOTIFICATIONS ---------- */
.bouton-tete.cloche{position:relative}
.pastille-cloche{position:absolute;top:2px;right:2px;min-width:15px;height:15px;
  padding:0 3px;border-radius:999px;background:var(--laterite);color:#fff;
  font-size:9.5px;font-weight:800;line-height:15px;text-align:center}

.notif-ligne{display:flex;align-items:flex-start;gap:11px;width:100%;
  padding:12px 4px;border-bottom:1px solid var(--trait);background:none;
  text-align:left;position:relative}
.notif-ligne:last-child{border-bottom:0}
.notif-ligne.non-lue{background:var(--ardoise2)}
.notif-ligne .ic{flex:0 0 auto;width:34px;height:34px;border-radius:10px;
  display:grid;place-items:center;background:var(--ardoise2);color:var(--craie2)}
.notif-ligne.non-lue .ic{background:var(--laterite);color:#fff}
.notif-ligne .co{flex:1;min-width:0}
.notif-ligne .co b{display:block;font-size:14px;font-weight:600}
.notif-ligne .co span{display:block;font-size:12.5px;color:var(--craie2);margin-top:2px;line-height:1.4}
.notif-ligne .co i{display:block;font-style:normal;font-size:11px;color:var(--craie2);margin-top:4px;opacity:.75}
.notif-ligne .point{position:absolute;top:14px;right:6px;width:7px;height:7px;
  border-radius:50%;background:var(--laterite)}

/* ---------- RETOUCHES DE DESIGN · octobre 2026 ---------- */
/* la bonne réponse se lit comme une phrase, pas comme une étiquette */
.retour .bonne-rep{font-weight:600;color:var(--vert-texte)}
/* écrans de première visite : pleine largeur, sans colonne vide */
@media(min-width:760px){
  .app.sans-rail{grid-template-columns:minmax(0,1fr)}
}
/* compte à rebours : le nom du concours ne pousse plus la mise en page */
.pastille-j{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.pastille-j b{flex:none}

/* cours : une carte par matière, deux actions côte à côte */
.cours-mat{margin-top:12px;padding:16px}
.cm-tete{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.cm-tete h2{font-family:var(--d);font-weight:800;font-size:18px;letter-spacing:-.02em}
.cm-tete .num{font-size:11px;color:var(--craie2)}
.cm-prog{font-size:13px;color:var(--craie2);line-height:1.5;margin:6px 0 14px;text-wrap:pretty}
.cm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cm-actions .cta{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 10px;font-size:14px}
.cm-actions .cta svg{flex:none}
@media(max-width:340px){.cm-actions{grid-template-columns:1fr}}
.cours-mat .fascicule{margin-top:10px}

/* apparence : le choix actif est une étiquette posée sur l'aperçu */
.theme-carte{position:relative}
.theme-carte .coche{float:none;position:absolute;top:24px;right:24px;z-index:1;
  background:var(--cachet);color:#fff;font-size:10px;letter-spacing:.1em;padding:3px 7px;border-radius:4px}

/* « dernière mise à jour » : une date, pas un direct qui clignote */
.direct i{animation:none;box-shadow:none;width:7px;height:7px}

/* compteur de la feuille : « 12 / 50 questions traitées » sur une ligne */
.compteur-copie{display:flex;align-items:baseline;gap:4px;margin-bottom:9px;color:#221F17}
.compteur-copie .cc-v{font-size:20px;font-weight:600}
.compteur-copie .cc-s{font-size:13px;color:#5A5442;margin-right:6px}
.compteur-copie .cc-l{font-size:12.5px;color:#5A5442}

/* barre du bas : libellés lisibles (10,5 px minimum) */
.nav button{font-size:10.5px;letter-spacing:.01em}

/* actualité : les tampons sur une ligne, la source sur la suivante */
.info-tete{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.info .info-source{display:block;margin:8px 0 2px;line-height:1.5}
.info .info-pourquoi{margin-top:8px;font-size:12px;color:var(--craie2);line-height:1.5}
.info .info-pourquoi b{font-family:var(--m);font-size:10px;letter-spacing:.1em;text-transform:uppercase;margin-right:7px;color:var(--craie)}

/* ---------- SUJET EN PILE ET GESTE VERS LA FEUILLE ---------- */
.gr-corps.pile{scroll-snap-type:y mandatory;scroll-padding-top:10px}
.gr-corps.pile .sujet-q{scroll-snap-align:start;transform-origin:top center;
  transition:opacity .12s linear}
.gr-corps.pile .cta-feuille,.gr-corps.pile .fin-sujet{scroll-snap-align:end}
.grille{position:relative}
.geste-feuille{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;
  background:#221F17;color:#FBF7EA;font-size:13px;font-weight:600;padding:9px 14px;border-top:1px solid #000}
.geste-feuille .fleche{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;
  background:#FBF7EA;color:#221F17;font-size:14px;animation:flecheGauche 1.6s ease-in-out infinite}
@keyframes flecheGauche{0%,100%{transform:translateX(0)}50%{transform:translateX(-5px)}}

/* démonstration du geste à la première entrée */
#demo-swipe small{color:var(--craie2);font-size:12px}
#demo-swipe .piste-doigt{width:140px;height:34px;position:relative}
#demo-swipe .piste-doigt .doigt{position:absolute;top:2px;left:55px}
#demo-swipe.vers-droite .doigt{animation-name:doigtDroite;animation-iteration-count:2}
#demo-swipe.vers-gauche .doigt{animation-iteration-count:2}
@keyframes doigtDroite{
  0%{transform:translateX(-46px);opacity:0}
  15%{opacity:1}
  50%{transform:translateX(46px)}
  85%{opacity:1}
  100%{transform:translateX(46px);opacity:0}
}
@media(prefers-reduced-motion:reduce){.geste-feuille .fleche{animation:none}}
#demo-swipe.joue{pointer-events:auto}

/* =====================================================================
   14 octobre — chrono en couleurs, outils de l'épreuve, accueil
   « Ta préparation aujourd'hui », fil Pour toi, question du jour,
   composition collective et gagnants, signalement, rappels.
   ===================================================================== */
.gr-chrono{transition:color .6s ease, background .6s ease;border-radius:8px;padding:2px 7px}
.gr-chrono.c-vert{color:#5FD39C}
.gr-chrono.c-orange{color:#F2A93B}
.gr-chrono.c-rouge{color:#FF6B57;background:rgba(255,80,60,.12)}
.gr-chrono.c-urgent{color:#fff;background:#D93A28;animation:urgence .9s ease-in-out infinite}
@keyframes urgence{0%,100%{box-shadow:0 0 0 0 rgba(217,58,40,.6)}50%{box-shadow:0 0 0 7px rgba(217,58,40,0)}}
@media(prefers-reduced-motion:reduce){.gr-chrono.c-urgent{animation:none}}
.gr-outils{display:flex;gap:6px;margin-top:7px}
.gr-outil{display:inline-flex;align-items:center;gap:5px;font-family:var(--m);font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:#D8D0BC;border:1px solid #4A4A40;border-radius:999px;padding:5px 10px;min-height:30px}
.gr-outil:active{transform:scale(.96)}
.gr-outil[aria-pressed="false"]{color:#FF9D8A;border-color:#6B3A30}

.titre-section{font-family:var(--d);font-weight:800;font-size:20px;letter-spacing:-.02em;margin:26px 0 4px}
.prochaine{margin-top:14px;border:1.5px solid var(--laterite);border-radius:16px;padding:16px;
  background:linear-gradient(160deg,var(--vert-fond),var(--ardoise) 70%)}
.pr-titre{font-family:var(--d);font-weight:800;font-size:21px;letter-spacing:-.02em;line-height:1.15;margin:6px 0 6px}
.pr-raison{font-size:13.5px;line-height:1.5;color:var(--craie2);margin-bottom:12px}
.stat.lien-stat{cursor:pointer;width:100%;color:inherit;font:inherit}
.stat .v small{font-size:13px;color:var(--craie2);font-weight:400}
.jauge-obj,.jauge-defi{height:5px;border-radius:3px;background:var(--trait);overflow:hidden;margin:8px 0 6px}
.jauge-obj i,.jauge-defi i{display:block;height:100%;background:var(--cachet);border-radius:3px;transition:width .6s cubic-bezier(.2,.8,.3,1)}
.jauge-defi i{background:var(--or)}
.objectifs{display:flex;gap:4px;justify-content:center;flex-wrap:wrap}
.objectifs button{font-family:var(--m);font-size:11px;padding:4px 8px;border-radius:999px;border:1px solid var(--trait);color:var(--craie2);min-height:28px}
.objectifs button.on{background:var(--laterite);border-color:var(--laterite);color:#fff}
.objectifs.grands{justify-content:flex-start;gap:7px}
.objectifs.grands button{font-size:12.5px;padding:7px 13px;min-height:36px}
.raccourcis{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}
.raccourcis button{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:var(--ardoise);
  border:1px solid var(--trait);border-radius:13px;padding:12px;color:var(--craie);min-height:84px}
.raccourcis button svg{color:var(--laterite-txt);margin-bottom:3px}
.raccourcis b{font-size:14px;font-weight:600}
.raccourcis span{font-size:12px;color:var(--craie2)}
.raccourcis button:active{transform:scale(.98)}
@media(min-width:860px){.raccourcis{grid-template-columns:repeat(4,1fr)}}
.direct-ligne{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:12.5px;color:var(--craie2)}
.direct-ligne i{width:8px;height:8px;border-radius:50%;background:#3DDC84;box-shadow:0 0 0 3px rgba(61,220,132,.18);animation:battement 1.6s ease-in-out infinite}
.carte.collective{margin-top:14px;border-color:var(--or-bord);background:linear-gradient(160deg,var(--or-fond),var(--ardoise) 75%)}
.carte.collective .libelle span:first-child{display:inline-flex;align-items:center;gap:6px;color:var(--or)}
.col-titre{font-family:var(--d);font-weight:800;font-size:19px;letter-spacing:-.02em;line-height:1.2}

.fil-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.fil-raison{display:flex;gap:6px;align-items:flex-start;font-size:12.5px;line-height:1.45;color:var(--craie2);margin-bottom:12px}
.fil-raison svg{flex:none;margin-top:2px}
.actions-q{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px}
.lien-mini{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--craie2);text-decoration:underline;text-underline-offset:3px;min-height:32px}

.felicitations{margin-top:16px;border:1px solid var(--or-bord);background:var(--or-fond);border-radius:14px;padding:14px;font-size:14px;line-height:1.55}
.felicitations p{margin-top:4px}
.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;align-items:end}
.marche{background:var(--ardoise);border:1px solid var(--trait);border-radius:14px;padding:12px 8px;text-align:center;position:relative;min-width:0}
.marche.r1{order:2;border-color:var(--or);padding-top:20px;box-shadow:0 10px 30px -18px var(--or)}
.marche.r2{order:1}.marche.r3{order:3}
.marche.moi{outline:2px solid var(--laterite);outline-offset:2px}
.marche .medaille{position:absolute;top:-11px;left:50%;transform:translateX(-50%);width:24px;height:24px;border-radius:50%;
  display:grid;place-items:center;font-family:var(--m);font-size:12px;font-weight:700;color:#1A1405;background:#C9C9C9}
.marche.r1 .medaille{background:var(--or)}
.marche.r3 .medaille{background:#C98A55}
.marche .av{width:46px;height:46px;border-radius:50%;margin:4px auto 8px;display:grid;place-items:center;font-family:var(--d);font-weight:800;
  background:var(--ardoise2);border:2px solid var(--trait)}
.marche.r1 .av{width:56px;height:56px;border-color:var(--or);font-size:18px}
.marche b{display:block;font-size:12.5px;overflow-wrap:anywhere}
.marche .note{font-family:var(--d);font-weight:800;font-size:22px;margin-top:4px}
.marche .note small{font-size:12px;color:var(--craie2)}
.marche .duree{font-size:11px;color:var(--craie2)}
.ma-place{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-top:16px;padding:12px 14px;border-radius:12px;
  border:1.5px solid var(--laterite);background:var(--vert-fond);font-size:13px}
.ma-place b{font-family:var(--d);font-size:22px}
.ligne-rang{display:grid;grid-template-columns:34px 1fr auto;gap:4px 10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--trait)}
.ligne-rang.moi{background:var(--vert-fond);border-radius:8px;padding-left:6px}
.ligne-rang .p{font-family:var(--m);color:var(--craie2)}
.ligne-rang .n{font-size:14px}.ligne-rang .n em{display:block;font-style:normal;font-size:11.5px;color:var(--craie2)}
.ligne-rang .s{font-family:var(--m);font-weight:600}
.ligne-rang .reactions{grid-column:2 / 4}
.reactions{display:flex;gap:5px;flex-wrap:wrap;justify-content:center;margin-top:8px}
.ligne-rang .reactions{justify-content:flex-start;margin-top:2px}
.reac{font-size:11px;padding:4px 9px;border-radius:999px;border:1px solid var(--trait);color:var(--craie2);min-height:28px}
.reac.on{background:var(--or-fond);border-color:var(--or);color:var(--or)}
.reac.lu{cursor:default}

.motifs{display:flex;flex-direction:column;gap:6px}
.motif{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--trait);border-radius:10px;font-size:14px;cursor:pointer}
.motif input{accent-color:var(--laterite);width:18px;height:18px}
.motif:has(input:checked){border-color:var(--laterite);background:var(--vert-fond)}
.panneau textarea{width:100%;background:var(--ardoise);border:1px solid var(--trait);border-radius:11px;padding:10px;color:var(--craie);font:inherit;font-size:14px;resize:vertical}

.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.trio b{display:block;font-family:var(--d);font-weight:800;font-size:22px}
.trio span{font-size:11.5px;color:var(--craie2)}
.barres{display:flex;align-items:flex-end;gap:4px;height:70px;margin-top:12px;border-bottom:1px solid var(--trait)}
.barres i{flex:1;background:var(--laterite);border-radius:3px 3px 0 0;min-width:4px}
.barres i.col{background:var(--or)}
.barres.fines{height:46px;gap:3px}
.barres.fines i{background:var(--cachet)}

/* ---------- suite : niveaux, mission, citation, défis, cahier, concentration ---------- */
.qcm-tete .x-mode{margin-left:auto;margin-right:12px;width:32px;height:32px;display:grid;place-items:center;border-radius:50%;color:var(--craie2);border:1px solid var(--trait)}
.qcm-tete .x-mode.on{color:#fff;background:var(--laterite);border-color:var(--laterite)}
body.concentration .apptete,body.concentration .nav,body.concentration .rail{display:none !important}
body.concentration .app{grid-template-columns:minmax(0,1fr) !important;grid-template-rows:minmax(0,1fr) !important}
.bandeau-accueil{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:4px 0 2px;font-size:13px;color:var(--craie2)}
.bandeau-accueil span{display:inline-flex;align-items:center;gap:5px}
.bandeau-accueil svg{color:var(--or)}
.bandeau-accueil b{color:var(--craie)}
.bandeau-accueil .niv{font-family:var(--m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--or);border:1px solid var(--or-bord);border-radius:999px;padding:3px 9px}
.niv-chemin{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.niv-etape{font-size:12px;padding:5px 10px;border-radius:999px;border:1px solid var(--trait);color:var(--craie2)}
.niv-etape.on{border-color:var(--or);color:var(--or);background:var(--or-fond)}
.niv-trait{width:14px;height:1px;background:var(--trait)}
.carte.mission{border-color:var(--vert-bord)}
.carte.mission .libelle span{display:inline-flex;align-items:center;gap:6px;color:var(--vert-texte)}
.citation{margin:18px 0 0;padding:14px 16px;border-left:3px solid var(--or);background:var(--ardoise);border-radius:0 12px 12px 0}
.citation blockquote{font-family:var(--d);font-size:17px;line-height:1.35;letter-spacing:-.01em}
.citation figcaption{margin-top:6px;font-size:12.5px;color:var(--craie2)}
.citation figcaption::before{content:'— '}
.resultat-q{display:block;width:100%;text-align:left;background:var(--ardoise);border:1px solid var(--trait);border-radius:12px;padding:11px 13px;margin-bottom:8px;color:var(--craie)}
.resultat-q b{display:block;font-weight:500;font-size:14px;line-height:1.4;margin-top:3px}
.choix-mat{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choix-mat button{background:var(--ardoise);border:1px solid var(--trait);border-radius:12px;padding:13px 10px;font-size:13.5px;font-weight:600;color:var(--craie);min-height:52px}
.choix-mat button:first-child{grid-column:1 / -1;border-color:var(--laterite)}
.defi-tete{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:#20211C;color:#D8D0BC}
.defi-tete .gr-chrono{font-size:20px}
.defi-q{margin-bottom:20px;padding-bottom:14px;border-bottom:1px solid var(--trait)}
.defi-q .sq-no{font-family:var(--m);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--craie2);margin-bottom:6px}
.defi-corr{font-size:13px;padding:8px 0;border-bottom:1px solid var(--trait);line-height:1.45}
.defi-corr span{display:block;margin-top:3px;font-size:12.5px}
.defi-corr.ok span{color:var(--vert-texte)}.defi-corr.ko span{color:var(--rouge-texte)}
.alerte-err{display:flex;align-items:center;gap:6px;margin-top:8px;font-size:12.5px;color:var(--rouge-texte)}
.note-perso{margin-top:8px}
.note-perso textarea{width:100%;background:var(--ardoise2);border:1px solid var(--trait);border-radius:10px;padding:8px 10px;color:var(--craie);font:inherit;font-size:13.5px;margin-bottom:6px}
.note-perso.lue{font-size:13px;background:var(--or-fond);border:1px solid var(--or-bord);border-radius:10px;padding:8px 10px;line-height:1.45}
.note-perso.lue b{color:var(--or);margin-right:4px}
.glisser-info{text-align:center;font-size:11.5px;margin-top:10px}
@media(hover:hover){.glisser-info{display:none}}
.bascule-graph{display:inline-flex;gap:4px}
.bascule-graph button{font-family:var(--m);font-size:10.5px;padding:3px 8px;border-radius:999px;border:1px solid var(--trait);color:var(--craie2)}
.bascule-graph button.on{background:var(--ardoise2);color:var(--craie)}
.actions-diag{margin:8px 0 0 18px;font-size:13px;line-height:1.55;color:var(--craie2)}
.actions-diag li{margin-bottom:6px}.actions-diag b{color:var(--craie)}
.prop-opt .oeil{min-width:76px}
.prop-opt .oeil.bonne{color:#fff;background:var(--cachet);border-color:var(--cachet)}
.carte.annales{border-color:var(--or-bord)}
#concours-vise{width:100%;background:var(--ardoise2);border:1px solid var(--trait);border-radius:10px;padding:10px;color:var(--craie);font:inherit}
.champ textarea{width:100%;background:var(--ardoise);border:1px solid var(--trait);border-radius:11px;padding:12px 13px;color:var(--craie);font:inherit;font-size:15px;line-height:1.45;resize:vertical}
.champ textarea::placeholder{color:var(--craie2)}
.champ textarea:focus{outline:2px solid var(--cachet);outline-offset:1px;border-color:var(--cachet)}
.reglages button[aria-pressed]{text-align:left}

/* =====================================================================
   14 octobre (3) — composition nationale, onglet Actualité,
   révisions fusionnées, départ 3-2-1, feuille plus compacte,
   cahier d'erreurs, niveaux et rappels.
   ===================================================================== */
/* tâches faites : barrées, lisiblement */
.etape.fait h3,.etape.fait p{text-decoration:line-through;text-decoration-color:currentColor;text-decoration-thickness:1.5px;color:var(--craie2)}

/* carte de la composition nationale */
.carte.nationale{margin-top:16px;border:1.5px solid var(--or-bord);background:linear-gradient(160deg,var(--or-fond),var(--ardoise) 78%);padding:16px}
.cn-tete{display:flex;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase}
.cn-tete span:first-child{display:inline-flex;align-items:center;gap:6px;color:var(--or)}
.cn-samedi{color:var(--craie2);white-space:nowrap}
.cn-tete span:first-child{white-space:nowrap}
.cn-quand{margin-top:4px;font-size:14px;font-weight:600;text-transform:none}
.cn-quand::first-letter{text-transform:uppercase}
.cn-faits{margin-top:8px;font-size:12.5px}
.cn-inscrit{display:flex;align-items:center;gap:7px;margin-top:12px;padding:10px 12px;border-radius:10px;background:var(--vert-fond);border:1px solid var(--vert-bord);color:var(--vert-texte);font-weight:600;font-size:13.5px}
.cn-direct{display:inline-flex;align-items:center;gap:6px;color:var(--rouge-texte);margin-right:6px}
.cn-direct i{width:8px;height:8px;border-radius:50%;background:var(--rouge-texte);animation:battement 1.2s ease-in-out infinite}
.rebours{display:flex;gap:6px;margin-top:10px}
.rebours span{flex:1;max-width:76px;text-align:center;background:var(--encre);border:1px solid var(--or-bord);border-radius:10px;padding:7px 4px}
.rebours b{display:block;font-family:var(--m);font-size:21px;font-weight:600;color:var(--or);line-height:1.1}
.rebours small{font-family:var(--m);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--craie2)}

/* la question « Voulez-vous participer ? » */
.pop-nat h3{font-family:var(--d);font-size:21px;margin-top:4px}
.pop-nat .rebours{margin:0 0 12px}
.pn-q{font-weight:700;font-size:15px;margin:4px 0 10px}
.pn-nom{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;color:var(--craie2);margin-bottom:14px;line-height:1.4}
.pn-nom input{margin-top:2px;accent-color:var(--cachet)}
.pn-ok{display:grid;place-items:center;color:var(--vert-texte);margin:6px 0 4px}

/* résultats : statut personnel */
.statut-nat{margin-top:16px;border-radius:14px;padding:14px 16px;border:1.5px solid var(--trait);background:var(--ardoise);font-size:13.5px;line-height:1.5}
.statut-nat.sn-admis{border-color:var(--vert-bord);background:var(--vert-fond)}
.statut-nat.sn-attente{border-color:var(--ambre-bord);background:var(--ambre-fond)}
.statut-nat.sn-echoue{border-color:var(--rouge-bord);background:var(--rouge-fond)}
.sn-tampon{display:inline-block;font-family:var(--m);font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;border:2px solid currentColor;border-radius:6px;padding:3px 9px;transform:rotate(-2deg)}
.statut-nat.sn-admis .sn-tampon{color:var(--vert-texte)}
.statut-nat.sn-attente .sn-tampon{color:var(--ambre-texte)}
.statut-nat.sn-echoue .sn-tampon{color:var(--rouge-texte)}
.sn-titre{font-family:var(--d);font-weight:800;font-size:18px;margin:8px 0 4px;letter-spacing:-.01em}

/* bas de l'accueil */
.defis-duo{display:grid;gap:10px;margin-top:10px}
@media(min-width:620px){.defis-duo{grid-template-columns:1fr 1fr}}
.defis-duo .carte{margin-top:0}

/* révisions : une carte par matière, cours et QCM ensemble */
.mat-rev{background:var(--ardoise);border:1px solid var(--trait);border-radius:14px;padding:13px;margin-top:10px}
.mr-tete{display:flex;gap:11px;align-items:flex-start}
.mr-tete .ic{width:36px;height:36px;flex:none;border-radius:9px;background:var(--ardoise2);border:1px solid var(--trait);display:grid;place-items:center;font-family:var(--m);font-size:11px;font-weight:600}
.mr-co{flex:1;min-width:0}
.mr-co b{display:block;font-size:14.5px;font-weight:600}
.mr-co .bar{display:block;height:4px;background:var(--trait);border-radius:2px;margin-top:7px;overflow:hidden}
.mr-co .bar i{display:block;height:100%;background:var(--cachet)}
.mr-co .pc{display:block;font-size:12px;color:var(--craie2);margin-top:5px;line-height:1.4}
.mr-actions{display:flex;gap:6px;margin-top:11px}
.mr-actions button{flex:1;display:flex;align-items:center;justify-content:center;gap:5px;min-height:40px;padding:6px 8px;border-radius:10px;border:1px solid var(--trait);font-size:12.5px;font-weight:600;color:var(--craie);background:none}
.mr-actions button.plein{background:var(--cachet);border-color:var(--cachet);color:#fff}
.mr-actions button:active{transform:scale(.97)}
@media(max-width:360px){.mr-actions button svg{display:none}}

/* départ de l'épreuve : 3, 2, 1, c'est parti */
.decompte{position:absolute;inset:0;z-index:30;display:grid;place-items:center;background:rgba(20,18,13,.86);pointer-events:none}
.decompte span{font-family:var(--d);font-weight:800;font-size:110px;color:#FBF7EA;animation:decompte .8s ease-out both}
.decompte span.parti{font-size:46px;color:#5FD39C;text-align:center;padding:0 20px}
@keyframes decompte{0%{transform:scale(1.6);opacity:0}30%{opacity:1}100%{transform:scale(.9);opacity:.95}}
.gr-chrono{font-size:21px;border:1.5px solid currentColor;padding:3px 9px}
.gr-chrono.chrono-allume{animation:allume .65s ease-in-out 4}
@keyframes allume{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(95,211,156,.55)}50%{transform:scale(1.14);box-shadow:0 0 0 9px rgba(95,211,156,0)}}
@media(prefers-reduced-motion:reduce){.decompte span,.gr-chrono.chrono-allume{animation:none}}

/* barre « Glisser vers la feuille » et pied de copie : fins, le sujet respire */
.geste-feuille{padding:4px 12px;font-size:11.5px;gap:7px}
.geste-feuille .fleche{width:18px;height:18px;font-size:11px;animation-name:flecheDroite}
@keyframes flecheDroite{0%,100%{transform:translateX(0)}50%{transform:translateX(4px)}}
.gr-pied.compact{display:flex;align-items:center;gap:10px;padding-top:6px;padding-bottom:calc(6px + env(safe-area-inset-bottom,0px))}
.gr-pied.compact .compteur-copie{margin:0;flex:1;min-width:0;white-space:nowrap}
.gr-pied.compact .compteur-copie .cc-v{font-size:16px}
.gr-pied.compact .compteur-copie .cc-l{font-size:11.5px;overflow:hidden;text-overflow:ellipsis}
.gr-pied.compact .remettre{width:auto;flex:none;padding:9px 14px;font-size:13px}

/* cahier d'erreurs */
.conseil-err{display:flex;gap:9px;align-items:flex-start;margin-top:10px;padding:10px 12px;border-radius:10px;border:1px solid var(--ambre-bord);background:var(--ambre-fond);font-size:12.5px;line-height:1.5}
.conseil-err svg{flex:none;margin-top:2px;color:var(--ambre-texte)}
.btn-cahier{font-weight:600;border-width:1.5px;border-color:var(--craie2)}

/* niveaux : ce qui reste, en barres */
.nd-titre{font-size:15px;margin-bottom:10px}
.nd-palier{margin-top:16px;padding-top:12px;border-top:1px solid var(--trait)}
.nd-nom{font-family:var(--m);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--or);margin-bottom:6px}
.nd-crit{margin-top:10px}
.nd-l{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.nd-barre{height:8px;border-radius:5px;background:var(--trait);overflow:hidden;margin-top:5px}
.nd-barre i{display:block;height:100%;background:var(--or);border-radius:5px;transition:width .8s cubic-bezier(.2,.8,.3,1)}
.nd-barre.ok i{background:var(--cachet)}
.nd-s{font-size:12px;color:var(--craie2);margin-top:4px}

/* mes dernières copies */
.copie-l{display:grid;grid-template-columns:minmax(0,1.3fr) 1fr auto auto;gap:10px;align-items:center;padding:9px 0;border-bottom:1px solid var(--trait)}
.copie-l:last-of-type{border-bottom:none}
.cl-g b{display:block;font-size:13px;font-weight:600}
.cl-g span{font-size:11.5px;color:var(--craie2)}
.cl-barre{height:6px;border-radius:4px;background:var(--trait);overflow:hidden}
.cl-barre i{display:block;height:100%;background:var(--or)}
.cl-barre i.haut{background:var(--cachet)}.cl-barre i.bas{background:var(--rouge-texte)}
.cl-n{font-size:13px}
.copie-l .mini{padding:6px 8px;min-height:32px}

/* rappels : une ligne de choix */
.puces-rappel{display:flex;flex-wrap:wrap;gap:6px}
.puces-rappel button{font-size:12px;padding:6px 10px;border-radius:999px;border:1px solid var(--trait);color:var(--craie);min-height:34px}
.puces-rappel button.on{border-color:var(--cachet);background:var(--vert-fond);color:var(--vert-texte);font-weight:600}
.rappel-heure{display:flex;gap:8px;margin-top:9px;align-items:center}
.rappel-heure select{font:inherit;padding:7px 10px;border-radius:9px;border:1px solid var(--trait);background:var(--encre);color:var(--craie)}
.mr-actions button{white-space:nowrap;font-size:12px;padding:6px 4px;gap:4px}

/* =====================================================================
   15 octobre — tâches avec leur état, bouton « Voir les informations »,
   chemin des niveaux, notifications, défis entre amis, copie.
   ===================================================================== */
.etape.fait h3,.etape.fait p{text-decoration:none!important;color:inherit}
.etape.fait p{color:var(--craie2)}
.etat-tache{display:inline-flex;align-items:center;gap:4px;margin-top:6px;font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:999px;border:1px solid var(--trait);color:var(--craie2)}
.etat-tache.fait{border-color:var(--vert-bord);background:var(--vert-fond);color:var(--vert-texte)}
.voir-tout{display:flex;align-items:center;justify-content:space-between;width:100%;margin-top:10px;padding:13px 16px;border:1.5px solid var(--craie2);border-radius:12px;background:none;color:var(--craie);font-weight:700;font-size:14.5px}
.voir-tout b{font-size:18px;transition:transform .2s}
.voir-tout:hover b{transform:translateX(3px)}
.voir-tout:active{transform:scale(.99)}
.sim{font-size:.82em;font-weight:500;letter-spacing:.02em;text-transform:none;opacity:.85}
.copie-retenir{margin-top:12px;padding-top:12px;border-top:1px solid var(--trait)}
.copie-retenir b{display:block;font-size:13px;margin-bottom:4px}
.copie-retenir p{font-size:12.5px;color:var(--craie2);line-height:1.5}

/* le chemin des niveaux, avec des flèches */
.niv-route{display:flex;align-items:stretch;gap:4px;margin-bottom:4px}
.niv-pas{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;padding:10px 4px;border-radius:12px;border:1px solid var(--trait);background:var(--ardoise2)}
.niv-pas b{font-size:12px;line-height:1.25;font-weight:600}
.niv-pas em{font-style:normal;font-size:10px;font-family:var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--or)}
.niv-rond{width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;font-weight:700;border:1.5px solid var(--trait);color:var(--craie2)}
.niv-pas.passe{border-color:var(--vert-bord);background:var(--vert-fond)}
.niv-pas.passe .niv-rond{background:var(--cachet);border-color:var(--cachet);color:#fff}
.niv-pas.actuel{border:1.5px solid var(--or);background:var(--or-fond)}
.niv-pas.actuel .niv-rond{background:var(--or);border-color:var(--or);color:#1a1405}
.niv-pas.avenir{opacity:.7}
.niv-fleche{align-self:center;font-size:20px;font-weight:800;color:var(--craie2)}
.niv-fleche.on{color:var(--cachet)}

/* bandeau d'une nouvelle notification */
.bandeau-notif{position:fixed;left:50%;top:10px;z-index:200;width:min(440px,calc(100% - 24px));transform:translate(-50%,-140%);transition:transform .35s cubic-bezier(.2,.8,.3,1);
  display:flex;gap:11px;align-items:flex-start;text-align:left;padding:12px 14px;border-radius:14px;border:1px solid var(--or-bord);background:var(--encre);color:var(--craie);box-shadow:0 12px 32px rgba(0,0,0,.35)}
.bandeau-notif.vu{transform:translate(-50%,0)}
.bandeau-notif .ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--or-fond);color:var(--or)}
.bandeau-notif .co{min-width:0}
.bandeau-notif b{display:block;font-size:13.5px}
.bandeau-notif span span,.bandeau-notif .co>span{display:block;font-size:12.5px;color:var(--craie2);margin-top:2px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.bandeau-notif i{display:block;font-style:normal;font-size:11px;color:var(--or);margin-top:4px}
@media(prefers-reduced-motion:reduce){.bandeau-notif{transition:none}}

/* défis */
.choix-mat button.on{border-color:var(--cachet);background:var(--vert-fond);color:var(--vert-texte)}
.choix-mat button:first-child.on{border-color:var(--cachet)}
.numeros .num-ami{margin-bottom:10px}
.invite-l{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px solid var(--trait);font-size:13px}
.invite-l:last-child{border-bottom:none}
.invite-l span{color:var(--craie2);text-align:right}
.invite-l .st-refuse{color:var(--rouge-texte)}
.invite-l .st-termine{color:var(--vert-texte)}
.invite-l .st-accepte{color:var(--or)}
.btn-defier{flex:none;padding:6px 10px;min-height:32px;font-size:12px}
.ligne-rang .n em.num{font-style:normal}
.cn-tete{flex-wrap:wrap;row-gap:4px}

/* =====================================================================
   15 octobre (2) — tâches cliquables et animations
   ===================================================================== */
button.etape{width:100%;text-align:left;align-items:center;border-radius:10px;padding-left:4px;padding-right:4px;color:inherit}
button.etape:hover{background:var(--ardoise2)}
button.etape > div:nth-child(2){flex:1;min-width:0}
.fl-tache{flex:none;font-size:17px;color:var(--craie2);transition:transform .2s}
button.etape:hover .fl-tache{transform:translateX(3px)}
button.etape.fait .fl-tache{opacity:.45}

/* une tâche qui vient d'être faite */
.etape.vient .puce{animation:pop-puce .45s cubic-bezier(.3,1.6,.5,1)}
@keyframes pop-puce{0%{transform:scale(.4)}60%{transform:scale(1.18)}100%{transform:scale(1)}}

/* la bulle noircie : l'encre se répand */
.pastille-op.encre{animation:encre-op .24s cubic-bezier(.3,.7,.3,1)}
@keyframes encre-op{0%{transform:scale(.7);box-shadow:0 0 0 0 rgba(34,31,23,.45)}65%{transform:scale(1.12)}100%{transform:scale(1);box-shadow:0 0 0 7px rgba(34,31,23,0)}}

/* bonne réponse : léger rebond ; mauvaise : petit tremblement */
.opt.juste{animation:rebond-rep .42s cubic-bezier(.3,1.6,.5,1)}
.opt.faux{animation:tremble-rep .38s ease}
@keyframes rebond-rep{0%{transform:scale(1)}40%{transform:scale(1.03)}100%{transform:scale(1)}}
@keyframes tremble-rep{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}

/* la copie corrigée : le cachet se pose */
.copie .cachet-note.pose{animation:cachet-pose .5s cubic-bezier(.2,1.4,.4,1) .85s both}
@keyframes cachet-pose{0%{transform:rotate(-6deg) scale(1.25)}60%{transform:rotate(1deg) scale(.98)}100%{transform:none}}
.statut-nat.pose .sn-tampon{animation:tampon-pose .45s cubic-bezier(.2,1.4,.4,1) .2s both}
@keyframes tampon-pose{0%{transform:rotate(-14deg) scale(2);opacity:0}60%{opacity:1}100%{transform:rotate(-2deg) scale(1);opacity:1}}

/* le podium monte */
.podium.monte .marche{animation:marche-monte .55s cubic-bezier(.2,1.2,.4,1) both}
.podium.monte .marche.r3{animation-delay:.05s}
.podium.monte .marche.r2{animation-delay:.2s}
.podium.monte .marche.r1{animation-delay:.4s}
@keyframes marche-monte{0%{transform:translateY(40px);opacity:0}100%{transform:none;opacity:1}}
canvas.confettis{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
.statut-nat,.podium{position:relative}

/* barres de niveau qui se remplissent */
.nd-barre i{transition:width 1s cubic-bezier(.2,.8,.3,1)}

/* tout s'arrête si le téléphone ou le candidat le demande */
body.sans-anim .etape.vient .puce,body.sans-anim .pastille-op.encre,body.sans-anim .opt.juste,body.sans-anim .opt.faux,
body.sans-anim .cachet-note.pose,body.sans-anim .statut-nat.pose .sn-tampon,body.sans-anim .podium.monte .marche{animation:none!important}
body.sans-anim .nd-barre i{transition:none}
@media (prefers-reduced-motion: reduce){
  .etape.vient .puce,.pastille-op.encre,.opt.juste,.opt.faux,.cachet-note.pose,.statut-nat.pose .sn-tampon,.podium.monte .marche{animation:none!important}
}

/* réponse envoyée, correction en route : un petit cercle tourne sur la réponse choisie */
.opt.attente{position:relative}
.opt.attente::after{content:"";position:absolute;right:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid currentColor;border-right-color:transparent;opacity:.55;animation:tourne .7s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){.opt.attente::after{animation-duration:2s}}

/* ---------- badges, chances, révision hors ligne ---------- */
.badges{display:flex;flex-wrap:wrap;gap:10px}
.badge-m{width:74px;display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center}
.badge-m .num{width:52px;height:52px;border-radius:50%;display:grid;place-items:center;font-weight:800;font-size:17px;
  color:var(--or-encre, #1b1406);background:radial-gradient(circle at 35% 30%, #F4CC6A, var(--or) 60%, #B98516);
  box-shadow:0 0 0 3px var(--or-fond), 0 2px 6px rgba(0,0,0,.25)}
.badge-m i{font-style:normal;font-size:10.5px;line-height:1.25;color:var(--craie2)}
.chances.sn-admis{border-color:var(--vert-bord);background:var(--vert-fond)}
.chances.sn-attente{border-color:var(--ambre-bord);background:var(--ambre-fond)}
.chances.sn-echoue{border-color:var(--rouge-bord);background:var(--rouge-fond)}
.chances-phrase{margin:0;font-size:14.5px;line-height:1.5}
.chances.sn-admis .chances-phrase b:not(.num){color:var(--vert-texte)}
.chances.sn-attente .chances-phrase b:not(.num){color:var(--ambre-texte)}
.chances.sn-echoue .chances-phrase b:not(.num){color:var(--rouge-texte)}
.hl-carte{display:flex;align-items:center;gap:12px;width:100%;text-align:left;margin-top:12px;padding:12px 14px;border-radius:14px;
  border:1.5px dashed var(--or-bord);background:var(--or-fond);color:inherit;font:inherit;cursor:pointer}
.hl-carte .ic{flex:0 0 36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--or);color:#1b1406}
.hl-carte .co{display:flex;flex-direction:column;gap:2px;min-width:0}
.hl-carte .co b{font-size:14.5px}.hl-carte .co span{font-size:12.5px;color:var(--craie2)}
.pack-etat{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:12.5px;color:var(--craie2);margin:4px 0 12px}
.pack-etat .en-ligne{color:var(--vert-texte)}.pack-etat .hors-ligne{color:var(--ambre-texte)}
.ou-wa{margin-top:18px;padding-top:14px;border-top:1px solid var(--trait)}
.ou-wa > span{display:block;font-size:13.5px;color:var(--craie2);margin-bottom:8px}

/* ---------- confidentialité et suppression du compte ---------- */
.reglages a{display:flex;justify-content:space-between;align-items:center;width:100%;padding:13px 0;
  border-bottom:1px solid var(--trait);font-size:14.5px;color:var(--craie);text-decoration:none}
.reglages a span{font-size:16px;color:var(--craie2)}
.lien-suppr{display:block;margin:18px auto 4px;padding:6px 10px;font-size:12px;color:var(--craie2);opacity:.7;text-decoration:underline;background:none;border:0;cursor:pointer}
.suppr-liste{margin:0;padding-left:20px;font-size:14px;line-height:1.55}
.cta.danger{background:var(--rouge-plein, #B4231C);border-color:var(--rouge-bord, #B4231C);color:#fff}
.sous a{color:var(--vert-texte)}