/* Bon Réflexe, l'entraînement.
   Concept : un carnet d'entraînement. Six disciplines comme six encres de tampon ;
   les onomatopées en grandes lettres sont la signature, le tampon qui s'imprime est le seul moment fort. */
:root{
  --fond:#F1F2F7; --surface:#FFFFFF; --encre:#16171E; --doux:#555A6A; --trait:#D7DAE4; --calme:#E4E6EF;
  --bon:#11764A; --bon-doux:#DDF1E6; --presque:#875800; --presque-doux:#F7EBCF; --mal:#B0281F; --mal-doux:#F8E0DD;
  --focus:#1D4ED8;
  --bip:#F2641A;     --sur-bip:#1B0D04;
  --allo:#1D4ED8;    --sur-allo:#FFFFFF;
  --alerte:#A56BFF;  --sur-alerte:#15082A;
  --coucou:#D1236B;  --sur-coucou:#FFFFFF;
  --toctoc:#6E3B1E;  --sur-toctoc:#FFFFFF;
  --jackpot:#F4B400; --sur-jackpot:#1E1600;
  --f-titre:"Bricolage Grotesque Variable","Bricolage Grotesque","Arial Rounded MT Bold",system-ui,sans-serif;
  --f-texte:"Atkinson Hyperlegible Next Variable","Atkinson Hyperlegible Next",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --encrage:multiply;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --fond:#0E0F16; --surface:#181A24; --encre:#F0F1F6; --doux:#A9ACBB; --trait:#2C2F3E; --calme:#232634;
  --bon:#4FCB8C; --bon-doux:#13301F; --presque:#E7B54A; --presque-doux:#33280F; --mal:#F07A70; --mal-doux:#3A1A17;
  --focus:#8DB0FF; --allo:#3366F0; --toctoc:#8A4B27; --encrage:normal; color-scheme:dark}}
:root[data-theme="dark"]{
  --fond:#0E0F16; --surface:#181A24; --encre:#F0F1F6; --doux:#A9ACBB; --trait:#2C2F3E; --calme:#232634;
  --bon:#4FCB8C; --bon-doux:#13301F; --presque:#E7B54A; --presque-doux:#33280F; --mal:#F07A70; --mal-doux:#3A1A17;
  --focus:#8DB0FF; --allo:#3366F0; --toctoc:#8A4B27; --encrage:normal; color-scheme:dark}

*{box-sizing:border-box}
html{font-size:18px;-webkit-text-size-adjust:100%}
html[data-taille="1"]{font-size:20.5px} html[data-taille="2"]{font-size:23px}
html,body{min-height:100%}
body{margin:0;background:var(--fond);color:var(--encre);font-family:var(--f-texte);line-height:1.45}
button,input{font:inherit;color:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
a{color:inherit}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
h1:focus,h2:focus{outline:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

#app{max-width:34rem;margin:0 auto;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
.page{flex:1;display:flex;flex-direction:column;gap:1.4rem;
  padding-block:1rem 1.5rem;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}

/* ---------- En-tête ---------- */
.entete{display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;row-gap:.6rem}
.marque{display:flex;align-items:center;gap:.45rem;margin-right:auto;white-space:nowrap;font:750 1.05rem/1 var(--f-titre);letter-spacing:-.01em}
.marque svg{flex:none}
.marque small{display:block;font:500 .74rem/1.2 var(--f-texte);color:var(--doux);letter-spacing:0;margin-top:.2rem}
.btn-rond{min-height:3rem;min-width:3rem;padding:0 .75rem;white-space:nowrap;border-radius:999px;border:1.5px solid var(--trait);background:var(--surface);
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;font-weight:700;font-size:.95rem}
.btn-rond.actif{border-color:var(--encre)}
.aa{font:800 1rem/1 var(--f-titre)} .aa b{font-size:1.3rem}
.retour{margin-right:auto}

/* ---------- Gros bouton : le prochain entraînement ---------- */
.surtitre{font:700 1rem/1.2 var(--f-texte);margin:0 0 -.6rem;color:var(--doux)}
.prochain{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:flex-start;gap:.25rem;
  width:100%;text-align:left;border:0;border-radius:2rem;padding:1.3rem 1.3rem 1.2rem;
  background:var(--c);color:var(--sur);min-height:15rem}
.prochain .geant{font:820 clamp(4rem,21vw,5.6rem)/.86 var(--f-titre);font-stretch:80%;letter-spacing:-.035em;margin:.2rem 0 .35rem;
  transform:rotate(-3deg);transform-origin:left bottom;white-space:nowrap}
.prochain .geant.long{font-size:clamp(3rem,14.5vw,4.1rem)}
.prochain .sujet{font:700 1.25rem/1.2 var(--f-titre)}
.prochain .meta{font-size:1rem;opacity:.92}
.prochain .pastille{margin-top:.9rem;display:inline-flex;align-items:center;gap:.5rem;background:var(--surface);color:var(--encre);
  border-radius:999px;padding:.75rem 1.3rem;font-weight:700;font-size:1.1rem}
.prochain .filigrane{position:absolute;right:-2.2rem;bottom:-2.6rem;width:10rem;height:10rem;opacity:.13;transform:rotate(-12deg)}
.prochain .etiquette{display:inline-flex;align-items:center;gap:.35rem;font-weight:700;font-size:.95rem;background:color-mix(in srgb,var(--sur) 14%,transparent);border-radius:999px;padding:.3rem .7rem}
.prochain.neutre{background:var(--surface);color:var(--encre);border:1.5px solid var(--trait);min-height:0}
.prochain.neutre .pastille{background:var(--encre);color:var(--surface)}
@media (prefers-reduced-motion:no-preference){
  html:not([data-anim="0"]) .prochain .geant{animation:pop .6s cubic-bezier(.3,1.6,.5,1) both .1s}
}
@keyframes pop{from{transform:rotate(-3deg) scale(.82);opacity:0}to{transform:rotate(-3deg) scale(1);opacity:1}}

/* ---------- Carnet (résumé) ---------- */
.carte{background:var(--surface);border:1.5px solid var(--trait);border-radius:1.4rem;padding:1.1rem 1.15rem}
.resume-carnet{display:grid;grid-template-columns:1fr auto;gap:.35rem .8rem;align-items:center;width:100%;text-align:left;color:inherit}
.resume-carnet h2{font:750 1.25rem/1.15 var(--f-titre);margin:0}
.resume-carnet .compte{font:800 1.25rem/1 var(--f-titre);font-variant-numeric:tabular-nums}
.resume-carnet .compte small{font:600 .9rem var(--f-texte);color:var(--doux)}
.resume-carnet p{grid-column:1/-1;margin:0;color:var(--doux);font-size:.95rem}
.points{grid-column:1/-1;display:flex;gap:.45rem;flex-wrap:wrap;margin:.35rem 0 .1rem}
.points span{display:flex;gap:3px}
.points i{width:.72rem;height:.72rem;border-radius:50%;border:2px solid var(--c);display:block}
.points i.plein{background:var(--c)}
.rappel{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap}
.rappel .ico-cal{flex:none;width:2.6rem;height:2.6rem;border-radius:.8rem;background:var(--calme);display:grid;place-items:center}
.rappel p{margin:0;flex:1 1 12rem;font-size:1rem}
.rappel p b{display:block}
.btn-second{min-height:3rem;padding:.6rem 1rem;border-radius:999px;border:1.5px solid var(--encre);background:transparent;font-weight:700;font-size:.95rem;display:inline-flex;align-items:center;gap:.45rem;justify-content:center}

/* ---------- Tuiles des six disciplines ---------- */
.titre-section{font:750 1.3rem/1.2 var(--f-titre);margin:.4rem 0 -.5rem}
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:.75rem}
.tuile{position:relative;display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:.1rem;min-height:9.2rem;
  border:0;border-radius:1.4rem;padding:.95rem .9rem .85rem;background:var(--c);color:var(--sur);overflow:hidden}
.tuile .nom{font:800 1.75rem/.95 var(--f-titre);font-stretch:85%;letter-spacing:-.02em;margin-top:auto}
.tuile .nom.long{font-size:1.38rem}
.tuile .sujet{font-size:.92rem;font-weight:600;opacity:.95}
.tuile .ico{position:absolute;top:.8rem;right:.8rem;opacity:.95}
.tuile .marques{display:flex;gap:4px;margin-top:.45rem}
.tuile .marques i{width:.8rem;height:.8rem;border-radius:50%;border:2px solid currentColor;display:block;opacity:.85}
.tuile .marques i.plein{background:currentColor;opacity:1}
.tuile .bientot{position:absolute;top:.75rem;left:.8rem;font-size:.78rem;font-weight:700;background:color-mix(in srgb,var(--sur) 16%,transparent);border-radius:999px;padding:.15rem .55rem}

.lien-bas{align-self:center;background:none;border:0;display:inline-flex;align-items:center;gap:.5rem;font-weight:700;font-size:1rem;padding:.8rem 1rem;min-height:3rem;text-decoration:underline;text-underline-offset:4px}

/* Bouton d'aide, toujours visible */
.barre-aide{position:sticky;bottom:0;z-index:5;padding-top:.6rem;
  padding-bottom:max(.8rem,env(safe-area-inset-bottom,0px));
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  background:linear-gradient(to bottom,transparent,var(--fond) 35%)}
.btn-aide{width:100%;min-height:3.4rem;border-radius:1.1rem;border:1.5px solid var(--trait);background:var(--surface);
  display:flex;align-items:center;justify-content:center;gap:.6rem;font-weight:700;font-size:1.05rem}

/* ---------- Bouton principal générique ---------- */
.btn-principal{width:100%;min-height:3.8rem;border:0;border-radius:1.2rem;background:var(--c,var(--encre));color:var(--sur,var(--surface));
  font:750 1.2rem/1.2 var(--f-titre);display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem 1.2rem;text-decoration:none}
.btn-principal:disabled{opacity:.45;cursor:not-allowed}

/* ---------- Fiche « Comprendre » ---------- */
.bandeau{background:var(--c);color:var(--sur);border-radius:0 0 2rem 2rem;margin-top:-1rem;
  padding:1rem max(16px,env(safe-area-inset-right,0px)) 1.4rem max(16px,env(safe-area-inset-left,0px));
  margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)));
  display:flex;flex-direction:column;gap:.4rem;position:relative;overflow:hidden}
.bandeau .btn-rond{background:color-mix(in srgb,var(--surface) 92%,transparent);color:var(--encre);border-color:transparent;align-self:flex-start}
.bandeau h1{font:820 clamp(3.6rem,19vw,5rem)/.9 var(--f-titre);font-stretch:80%;letter-spacing:-.035em;margin:.6rem 0 0;transform:rotate(-2.5deg);transform-origin:left bottom}
.bandeau h1.long{font-size:clamp(2.8rem,13vw,3.6rem)}
.bandeau .sujet{font:700 1.3rem/1.2 var(--f-titre);margin:0}
.bandeau .filigrane{position:absolute;right:-1.8rem;top:5.5rem;width:9rem;height:9rem;opacity:.16;transform:rotate(-10deg)}
.niveaux{display:flex;gap:.4rem;flex-wrap:wrap;margin-top:.6rem}
.niveaux button{min-height:2.75rem;padding:.35rem .7rem;border-radius:999px;border:2px solid currentColor;background:transparent;color:inherit;font-weight:700;font-size:.92rem;display:inline-flex;align-items:center;gap:.35rem}
.niveaux button[aria-pressed="true"]{background:var(--sur);color:var(--c)}
.niveaux button:disabled{opacity:.6;cursor:not-allowed;border-style:dashed}
.bloc h2{font:750 1.2rem/1.2 var(--f-titre);margin:0 0 .6rem}
.bloc p{margin:0}
.signes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7rem}
.signes li{display:grid;grid-template-columns:auto 1fr;gap:.2rem .8rem;align-items:start}
.signes .puce{grid-row:span 2;width:2.3rem;height:2.3rem;border-radius:.75rem;background:var(--c);color:var(--sur);display:grid;place-items:center;margin-top:.1rem}
.signes b{font-size:1.05rem}
.signes span{color:var(--doux);font-size:.98rem}
.geste{display:flex;gap:.8rem;align-items:flex-start;border-radius:1.2rem;padding:1rem;background:var(--bon-doux)}
.geste svg{flex:none;color:var(--bon);margin-top:.1rem}
.geste b{display:block;font:750 1.1rem/1.25 var(--f-titre);margin-bottom:.15rem}
.rassure{display:flex;gap:.6rem;align-items:flex-start;color:var(--doux);font-size:.95rem;margin:0}
.rassure svg{flex:none;margin-top:.15rem}
.actions{display:flex;flex-direction:column;gap:.7rem;margin-top:auto}

/* ---------- Le faux téléphone (entraînement) ---------- */
.exo{position:fixed;inset:0;z-index:20;display:flex;flex-direction:column;background:#000;color:#fff;
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Roboto,"Segoe UI",sans-serif}
.exo-bande{display:flex;align-items:center;gap:.6rem;background:var(--c);color:var(--sur);font:700 .95rem/1.2 var(--f-texte);
  padding:max(.5rem,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) .5rem max(12px,env(safe-area-inset-left,0px))}
.exo-bande span{margin-right:auto}
.exo-bande button{border:0;border-radius:999px;background:color-mix(in srgb,var(--sur) 16%,transparent);padding:.45rem .9rem;font-weight:700;min-height:2.6rem}
.tel{flex:1;position:relative;overflow:hidden;display:flex;flex-direction:column}
.tel-max{width:100%;max-width:30rem;margin:0 auto;flex:1;display:flex;flex-direction:column;position:relative}

.verrou{background:radial-gradient(140% 90% at 30% 0%,#3d4f7a 0%,#1a1f33 45%,#07080d 100%)}
.verrou .heure{text-align:center;margin-top:3.2rem;font:300 5.2rem/1 -apple-system,BlinkMacSystemFont,"SF Pro Display",Roboto,sans-serif;letter-spacing:-.02em}
.verrou .date{text-align:center;font-size:1.1rem;opacity:.85;margin-top:.4rem}
.notif{margin:2rem .8rem 0;border:0;width:calc(100% - 1.6rem);text-align:left;color:#111;background:rgba(245,245,247,.92);border-radius:1.3rem;padding:.8rem .95rem;
  display:grid;grid-template-columns:auto 1fr auto;gap:.1rem .7rem;align-items:center;box-shadow:0 10px 30px rgba(0,0,0,.35);font-size:.98rem}
.notif .app{width:2.3rem;height:2.3rem;border-radius:.6rem;background:#34c759;display:grid;place-items:center;grid-row:span 3;color:#fff}
.notif .qui{font-weight:700} .notif .quand{font-size:.8rem;color:#666;grid-column:3;grid-row:1}
.notif .txt{grid-column:2/4;color:#222;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.notif .ouvrir{grid-column:2/4;font-size:.8rem;color:#666;margin-top:.2rem}
@media (prefers-reduced-motion:no-preference){html:not([data-anim="0"]) .notif{animation:descend .45s cubic-bezier(.2,1.3,.4,1) both}}
@keyframes descend{from{transform:translateY(-140%);opacity:0}to{transform:none;opacity:1}}
.astuce{position:absolute;left:.8rem;right:.8rem;bottom:1rem;background:#fff;color:#111;border-radius:1rem;padding:.8rem 1rem;font:600 .98rem/1.35 var(--f-texte);
  box-shadow:0 10px 30px rgba(0,0,0,.35);display:flex;gap:.6rem;align-items:flex-start;z-index:3}
.astuce svg{flex:none;color:#875800}

.fil{background:#fff;color:#111}
.fil-tete{display:grid;grid-template-columns:3rem 1fr 3rem;align-items:center;padding:.5rem .4rem;border-bottom:1px solid #e5e5ea;background:#f9f9fb}
.fil-tete .qui{text-align:center;font-size:.85rem;color:#666}
.fil-tete .qui b{display:block;color:#111;font-size:1rem}
.fil-tete .avatar{width:2.3rem;height:2.3rem;border-radius:50%;background:#b8bcc6;margin:0 auto .2rem;display:grid;place-items:center;color:#fff}
.fil-tete button{border:0;background:none;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;color:#0a6cff}
.inconnu{font-size:.88rem;color:#555;text-align:center;padding:.8rem 1rem .2rem}
.inconnu button{border:0;background:none;color:#0a6cff;font-weight:600;padding:.5rem;min-height:2.75rem}
.fil-corps{flex:1;overflow-y:auto;padding:.6rem .9rem 1rem;display:flex;flex-direction:column;gap:.4rem}
.fil-corps .heure-msg{text-align:center;font-size:.78rem;color:#8a8a8e;margin:.4rem 0}
.bulle{align-self:flex-start;max-width:82%;background:#e9e9eb;color:#111;border-radius:1.2rem 1.2rem 1.2rem .35rem;padding:.65rem .9rem;font-size:1.02rem;line-height:1.38}
.bulle .lienmsg{color:#0a6cff;text-decoration:underline;background:none;border:0;padding:0;font:inherit;text-align:left;word-break:break-all;cursor:pointer}
.saisie{display:flex;gap:.5rem;align-items:center;padding:.5rem .7rem max(.6rem,env(safe-area-inset-bottom,0px));border-top:1px solid #e5e5ea;background:#f9f9fb}
.saisie span{flex:1;border:1px solid #d1d1d6;border-radius:999px;padding:.45rem .9rem;color:#8a8a8e;font-size:.95rem}

.feuille-os{position:absolute;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:flex-end;z-index:4}
.feuille-os .panneau{width:100%;padding:.6rem .6rem max(.8rem,env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:.5rem}
.feuille-os .groupe{background:rgba(250,250,252,.97);border-radius:1rem;overflow:hidden;color:#111}
.feuille-os .groupe p{margin:0;padding:.9rem 1rem;text-align:center;font-size:.88rem;color:#555;border-bottom:1px solid #ddd}
.feuille-os button{display:block;width:100%;border:0;background:none;min-height:3.4rem;font-size:1.1rem;color:#0a6cff}
.feuille-os button.rouge{color:#e5372f;font-weight:600}
.feuille-os .groupe button+button{border-top:1px solid #ddd}
.feuille-os .annuler{background:#fff;border-radius:1rem;font-weight:700}

.nav{background:#fff;color:#111}
.nav-barre{display:flex;align-items:center;gap:.5rem;padding:.5rem .6rem;background:#f2f2f5;border-bottom:1px solid #ddd}
.nav-barre .url{flex:1;background:#e3e3e8;border-radius:.7rem;padding:.5rem .7rem;font-size:.9rem;display:flex;align-items:center;gap:.35rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#333}
.nav-barre button{border:0;background:none;color:#0a6cff;font-weight:600;min-height:2.75rem;padding:0 .4rem;font-size:.95rem}
.site{flex:1;overflow-y:auto;font-family:Arial,Helvetica,sans-serif}
.site-tete{background:#ffcc00;color:#c8102e;padding:.9rem 1rem;font:900 1.4rem/1 Arial Black,Arial,sans-serif;letter-spacing:-.02em;display:flex;align-items:center;gap:.5rem}
.site-tete small{font:700 .7rem Arial;color:#333;letter-spacing:0}
.site-corps{padding:1rem;display:flex;flex-direction:column;gap:.75rem;font-size:.98rem}
.site-corps h3{margin:.2rem 0 0;font-size:1.25rem}
.site-corps .montant{background:#fff7d6;border:1px solid #f0d36b;border-radius:.4rem;padding:.6rem .8rem;display:flex;justify-content:space-between;font-weight:700}
.site-corps label{min-width:0;display:flex;flex-direction:column;gap:.25rem;font-size:.85rem;color:#444}
.site-corps input{min-width:0;width:100%;border:1px solid #bbb;border-radius:.35rem;padding:.7rem;font-size:1rem;background:#fff;color:#111}
.site-corps .ligne2{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
.site-corps .payer{border:0;background:#c8102e;color:#fff;font-weight:700;font-size:1.1rem;border-radius:.4rem;min-height:3.2rem}
.site-corps .petit{font-size:.75rem;color:#777}

/* ---------- Retenir ---------- */
.verdict{border-radius:2rem;padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.5rem}
.verdict.gagne{background:var(--bon-doux)} .verdict.presque{background:var(--presque-doux)} .verdict.perdu{background:var(--mal-doux)}
.verdict .tag{font-weight:700;font-size:1rem;display:inline-flex;align-items:center;gap:.4rem}
.verdict.gagne .tag{color:var(--bon)} .verdict.presque .tag{color:var(--presque)} .verdict.perdu .tag{color:var(--mal)}
.verdict h1{font:800 1.85rem/1.1 var(--f-titre);margin:0;text-wrap:balance}
.verdict p{margin:0}
.puces{display:flex;flex-wrap:wrap;gap:.5rem}
.puces button{min-height:3rem;padding:.5rem 1rem;border-radius:999px;border:1.5px solid var(--trait);background:var(--surface);font-weight:600;display:inline-flex;align-items:center;gap:.4rem}
.puces button[aria-pressed="true"]{border-color:var(--encre);background:var(--encre);color:var(--surface)}
.reproduction{background:#e9e9eb;color:#111;border-radius:1.2rem 1.2rem 1.2rem .35rem;padding:.75rem .95rem;font-size:1rem;line-height:1.5;margin:0 0 .9rem;max-width:30rem}
.reproduction .exp{display:block;font-size:.8rem;color:#555;margin-bottom:.3rem}
.reproduction mark{background:transparent;color:inherit;border-bottom:3px solid var(--c);padding-bottom:1px}
.reproduction sup,.liste-signes .num{font:800 .72rem/1 var(--f-texte);background:var(--c);color:var(--sur);border-radius:999px;min-width:1.25rem;height:1.25rem;display:inline-grid;place-items:center;padding:0 .3rem;vertical-align:.35em;margin-left:.15rem}
.liste-signes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.75rem}
.liste-signes li{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem}
.liste-signes .num{grid-row:span 2;margin:.2rem 0 0;vertical-align:0}
.liste-signes b{font-size:1.02rem}
.liste-signes .vu{display:inline-flex;align-items:center;gap:.25rem;font-size:.85rem;font-weight:700;color:var(--bon);margin-left:.35rem}
.liste-signes span{color:var(--doux);font-size:.97rem}
.phrase{background:var(--c);color:var(--sur);border-radius:2rem;padding:1.4rem 1.3rem;display:flex;flex-direction:column;gap:.8rem;align-items:flex-start}
.phrase .q{font:800 1.75rem/1.12 var(--f-titre);margin:0;text-wrap:balance}
.phrase .consigne{margin:0;font-weight:600;opacity:.95}
.phrase .btn-rond{background:var(--surface);color:var(--encre);border-color:transparent}

.carnet-cadre{display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center}
.emplacement{width:9.5rem;height:9.5rem;border-radius:50%;border:2.5px dashed var(--trait);display:grid;place-items:center;position:relative;color:var(--doux);font-size:.9rem;font-weight:600}
.emplacement.rempli{border-color:transparent}
.emplacement .tampon{position:absolute;inset:0;width:100%;height:100%}
.etoiles{display:flex;gap:.25rem;justify-content:center;min-height:1.4rem;color:var(--jackpot)}
.etoiles svg{fill:currentColor}
@media (prefers-reduced-motion:no-preference){
  html:not([data-anim="0"]) .frappe{animation:frappe .62s cubic-bezier(.2,.9,.25,1) both}
  html:not([data-anim="0"]) .frappe-ombre{animation:onde .62s ease-out both}
  html:not([data-anim="0"]) .etoile-neuve{animation:brille .7s ease-out both}
}
@keyframes frappe{0%{transform:scale(1.9) rotate(var(--r,0deg));opacity:0}55%{transform:scale(.94) rotate(var(--r,0deg));opacity:1}75%{transform:scale(1.03) rotate(var(--r,0deg))}100%{transform:scale(1) rotate(var(--r,0deg));opacity:1}}
@keyframes onde{0%{transform:scale(.6);opacity:0}50%{opacity:.35}100%{transform:scale(1.35);opacity:0}}
@keyframes brille{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.25);opacity:1}100%{transform:scale(1)}}
.frappe-ombre{position:absolute;inset:-6%;border-radius:50%;background:var(--c);pointer-events:none;opacity:0}
.tampon{mix-blend-mode:var(--encrage)}
.tampon text{font-family:var(--f-titre)}

details.vraie-vie{border:1.5px solid var(--trait);border-radius:1.2rem;background:var(--surface)}
details.vraie-vie summary{list-style:none;cursor:pointer;padding:1rem 1.1rem;font:750 1.1rem/1.25 var(--f-titre);display:flex;align-items:center;gap:.6rem;min-height:3.4rem}
details.vraie-vie summary::-webkit-details-marker{display:none}
details.vraie-vie summary::after{content:"+";margin-left:auto;font-size:1.5rem;line-height:1}
details.vraie-vie[open] summary::after{content:"−"}
details.vraie-vie ol{margin:0;padding:0 1.1rem 1.1rem 2.4rem;display:flex;flex-direction:column;gap:.5rem}

/* ---------- Carnet complet ---------- */
.titre-page{font:800 2.1rem/1.05 var(--f-titre);margin:0;letter-spacing:-.02em}
.sous-titre{margin:-.8rem 0 0;color:var(--doux)}
.page-carnet{display:flex;flex-direction:column;gap:.9rem}
.disc{background:var(--surface);border:1.5px solid var(--trait);border-radius:1.4rem;padding:.9rem 1rem 1rem}
.disc-tete{display:flex;align-items:center;gap:.6rem;margin-bottom:.6rem}
.disc-tete .rond{width:2.2rem;height:2.2rem;border-radius:.7rem;background:var(--c);color:var(--sur);display:grid;place-items:center;flex:none}
.disc-tete b{font:800 1.2rem/1.1 var(--f-titre)} .disc-tete span{color:var(--doux);font-size:.9rem;display:block}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem}
.case{display:flex;flex-direction:column;align-items:center;gap:.25rem;text-align:center;font-size:.8rem;color:var(--doux);font-weight:600}
.case .rond-case{width:100%;max-width:5.6rem;aspect-ratio:1;border-radius:50%;border:2px dashed var(--trait);display:grid;place-items:center;position:relative}
.case .rond-case .tampon{position:absolute;inset:-4%;width:108%;height:108%}
.case .etoiles{min-height:1rem}
.case .etoiles svg{width:.85rem;height:.85rem}
.diplomes{display:flex;flex-direction:column;gap:.7rem}
.diplome-ligne{display:flex;gap:.9rem;align-items:center}
.diplome-ligne .medaille{flex:none;width:3.2rem;height:3.2rem;border-radius:50%;display:grid;place-items:center;background:var(--calme);color:var(--doux)}
.diplome-ligne.obtenu .medaille{background:var(--jackpot);color:var(--sur-jackpot)}
.diplome-ligne b{display:block;font:750 1.1rem/1.2 var(--f-titre)}
.diplome-ligne span{color:var(--doux);font-size:.93rem}
.jauge{height:.55rem;border-radius:999px;background:var(--calme);overflow:hidden;margin-top:.35rem}
.jauge i{display:block;height:100%;background:var(--encre);border-radius:999px}
.code{font:800 1.6rem/1 var(--f-titre);letter-spacing:.18em;font-variant-numeric:tabular-nums}

/* ---------- Diplôme ---------- */
.voile{position:fixed;inset:0;z-index:40;background:rgba(10,11,18,.55);display:flex;align-items:center;justify-content:center;
  padding:1rem max(16px,env(safe-area-inset-right,0px)) 1rem max(16px,env(safe-area-inset-left,0px))}
.diplome{width:100%;max-width:26rem;background:var(--surface);color:var(--encre);border-radius:1.6rem;padding:1.6rem 1.3rem 1.3rem;text-align:center;display:flex;flex-direction:column;gap:.7rem;
  border:6px double var(--jackpot);max-height:100%;overflow-y:auto}
.diplome .ruban{font:700 .95rem var(--f-texte);color:var(--doux)}
.diplome h2{font:820 2.4rem/1 var(--f-titre);margin:0;letter-spacing:-.02em}
.diplome .niveau{font:800 1.5rem/1 var(--f-titre);color:var(--sur-jackpot);background:var(--jackpot);align-self:center;padding:.4rem 1rem;border-radius:999px}
.diplome p{margin:0}
.mini-tampons{display:flex;flex-wrap:wrap;justify-content:center;gap:.1rem}
.mini-tampons svg{width:3.6rem;height:3.6rem}
@media (prefers-reduced-motion:no-preference){html:not([data-anim="0"]) .diplome{animation:monte .5s cubic-bezier(.2,1.2,.4,1) both}}
@keyframes monte{from{transform:translateY(30px) scale(.94);opacity:0}to{transform:none;opacity:1}}
canvas.confettis{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:50}

/* ---------- Feuilles (réglages, aide) ---------- */
.feuille{position:fixed;inset:0;z-index:30;background:rgba(10,11,18,.45);display:flex;align-items:flex-end;justify-content:center}
.feuille .panneau{width:100%;max-width:34rem;background:var(--surface);color:var(--encre);border-radius:1.6rem 1.6rem 0 0;max-height:92vh;overflow-y:auto;
  padding:1.2rem max(16px,env(safe-area-inset-right,0px)) max(1.2rem,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;gap:1.1rem}
@media (prefers-reduced-motion:no-preference){html:not([data-anim="0"]) .feuille .panneau{animation:glisse .28s ease-out both}}
@keyframes glisse{from{transform:translateY(40%)}to{transform:none}}
.feuille h2{font:800 1.5rem/1.15 var(--f-titre);margin:0}
.feuille .haut-feuille{display:flex;align-items:center;gap:.6rem}
.feuille .haut-feuille h2{margin-right:auto}
.reglage{display:flex;flex-direction:column;gap:.5rem}
.reglage>b{font-size:1.05rem}
.segments{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.4rem;background:var(--calme);border-radius:1rem;padding:.3rem}
.segments button{min-height:3.2rem;border:0;border-radius:.8rem;background:transparent;font-weight:700}
.segments button[aria-pressed="true"]{background:var(--surface);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.segments .t0{font-size:1rem}.segments .t1{font-size:1.2rem}.segments .t2{font-size:1.45rem}
.etapes{margin:0;padding-left:1.4rem;display:flex;flex-direction:column;gap:.8rem}
.etapes li{padding-left:.2rem}
.etapes .numero{display:block;font:800 1.3rem/1.2 var(--f-titre);margin-top:.15rem;user-select:all}
.etapes small{color:var(--doux);display:block}

/* ---------- Bienvenue ---------- */
.bienvenue{justify-content:center;text-align:left}
.bienvenue .pile{position:relative;height:13rem;margin:.5rem 0 1rem}
.bienvenue .pile svg{position:absolute;width:8.2rem;height:8.2rem}
.bienvenue h1{font:820 2.6rem/1 var(--f-titre);margin:0;letter-spacing:-.03em;text-wrap:balance}
.bienvenue p{font-size:1.15rem;margin:0}

/* ---------- Démo (maquette uniquement) ---------- */
.demo{border:2px dashed var(--trait);border-radius:1.2rem;padding:1rem;display:flex;flex-direction:column;gap:.6rem;margin-top:1rem}
.demo b{font-size:.95rem}
.demo p{margin:0;color:var(--doux);font-size:.88rem}
.demo .boutons{display:flex;flex-wrap:wrap;gap:.45rem}
.demo button{min-height:2.75rem;border-radius:.8rem;border:1.5px solid var(--trait);background:var(--surface);padding:.4rem .8rem;font-size:.88rem;font-weight:600}

.toast{position:fixed;left:50%;bottom:calc(5.5rem + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;background:var(--encre);color:var(--surface);
  padding:.8rem 1.1rem;border-radius:1rem;font-weight:600;max-width:calc(100% - 32px);width:max-content;text-align:center}
.lien-discret{align-self:center;color:var(--doux);font-size:.92rem;padding:.4rem .6rem;text-underline-offset:3px}