/* pépin — design system « Potager »
   Chaleureux et artisanal, comme l’épicerie de quartier : la donnée se cultive.
   1 couleurs (potager, kraft, abricot, pousse, tomate, pierre) · 2 Fraunces Soft + DM Sans
   3 rayons doux · 4 mouvements en ressort · 8 mode nuit « serre » */
:root{
  /* — 1. palette — */
  --potager:#1E3A2B; --kraft:#FBF5EA; --kraft-2:#F3E7CF; --abricot:#FF7A45; --pousse:#8FC27A; --tomate:#E0483B; --pierre:#6E7F6F;

  /* — 1. rôles — */
  --page:#FBF5EA; --card:#FFFDF8; --ink:#1E3A2B; --muted:#6E7F6F; --muted2:#4C5F50;
  --line:#EFE6D3; --soft:#F5ECDB; --track:#E8DFCB;
  --accent:var(--abricot); --accent-soft:#FFE6D8; --accent-ink:#B14D20;
  --on-accent:#FFFFFF; /* texte posé sur l’abricot ou le vert plein */
  /* états des compétences et des messages privés */
  --mastered:var(--success); --on-mastered:#FFFFFF; --review:var(--success-soft); --priv-soft:#EEF4E8;
  --success:#2F6B2A; --success-soft:#E3F1DB;
  --danger:#E0483B; --danger-ink:#B23A2E; --danger-soft:#FCE3DD;
  --hero:#1E3A2B;
  --inv-bg:#1E3A2B; --inv-fg:#FBF5EA; --inv-accent:#FF7A45;
  --cta-bg:#1E3A2B; --cta-fg:#FBF5EA; --cta-i:#FF7A45; --cta-ifg:#1E3A2B;
  --code-bg:#1E3A2B;
  --plate:#FFFDF8; --plate-line:#E8DFCB;
  --ig:#1E3A2B; --ip:#8FC27A; --ia:#FF7A45; --ik:#FBF5EA; --is:#B98A5A; --ist:#3D7A3A;
  /* anciens noms, gardés pour compatibilité */
  /* sur fond potager (cartes héros) : jamais de couleur écrite à la main */
  --on-hero:#FBF5EA; --on-hero-body:var(--on-hero-body); --on-hero-muted:var(--on-hero-muted); --on-hero-kicker:#8FC27A; --on-hero-tint:rgba(251,245,234,.08);
  /* 4. états : mémoire et réponses, toujours vert → abricot → tomate */
  --state-fresh:var(--success); --state-fresh-soft:var(--success-soft);
  --state-watch:var(--abricot); --state-watch-ink:var(--accent-ink); --state-watch-soft:var(--accent-soft);
  --state-fade:var(--danger); --state-fade-ink:var(--danger-ink); --state-fade-soft:var(--danger-soft);

  /* couleurs des modules */
  --tint-stats:#F3E7CF; --tint-xp:#FFE6D8; --tint-ml:#E3F1DB; --tint-sql:#E6ECE4;
  --cink-stats:#8A5A2B; --cink-xp:#B14D20; --cink-ml:#2F6B2A; --cink-sql:#1E3A2B;

  /* — 7. data-viz — */
  /* graphiques : la couleur dit le message, le reste se tait */
  --viz-focus:#FF7A45; --viz-context:#D9CDB4; --viz-good:#8FC27A; --viz-bad:#E0483B; --viz-ink:#1E3A2B; --viz-soft:#C9D9BE;

  /* — 2. typographie — */
  --serif:Fraunces,Georgia,'Times New Roman',serif;
  --sans:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --hand:Caveat,'Bradley Hand','Segoe Print',cursive;
  /* huit tailles, pas une de plus : quatre en Fraunces (titres), quatre en DM Sans (interface) */
  --fs-display:40px; --fs-1:30px; --fs-2:22px; --fs-3:17px;
  --fs-body:15px; --fs-label:13.5px; --fs-caption:12px; --fs-over:10.5px;

  /* — 3. formes — */
  /* cinq rayons ; dedans, rayon intérieur = rayon extérieur − marge */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-pill:999px;
  --e1:0 1px 0 #E8DFCB;
  --e2:0 1px 0 #E8DFCB,0 18px 36px -24px rgba(30,58,43,.35);
  --e3:0 1px 0 #E8DFCB,0 26px 50px -20px rgba(30,58,43,.45);
  /* quatre niveaux : e0 plat, e1 posé (listes, options), e2 levé (cartes), e3 héros — une seule carte héros par écran */
  --e0:none;
  --shadow:var(--e2);
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;

  /* — 4. mouvement — */
  --ease-galet:cubic-bezier(.3,1.5,.5,1);   --d-galet:320ms;
  --ease-goutte:cubic-bezier(.5,1.8,.5,.8); --d-goutte:180ms;
  --ease-brise:cubic-bezier(.2,.7,.2,1);    --d-brise:480ms;
  --ease-net:linear;                         --d-net:120ms;
  color-scheme:light;
}

/* — 8. mode nuit : la serre, le soir — */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --page:#101C15; --card:#18291F; --ink:#F3EEDF; --muted:#93A394; --muted2:#B9C4B5;
    --line:#22372A; --soft:#1F3326; --track:#2C4535;
    --accent:#FF8A5B; --accent-soft:#3A2A20; --accent-ink:#FFB08C; --on-accent:#12221A; --on-mastered:#12221A; --priv-soft:#1C3324;
    --success:#9BD08A; --success-soft:#1F3A26;
    --danger:#FF7A6A; --danger-ink:#FF9C8E; --danger-soft:#3D2220;
    --hero:#22402F; --inv-bg:#F3EEDF; --inv-fg:#12221A; --inv-accent:#B14D20; --code-bg:#0B140F;
    --cta-bg:#F3EEDF; --cta-fg:#12221A; --cta-i:#FF7A45; --cta-ifg:#12221A;
    --plate:#18291F; --plate-line:#2C4535; --ig:#F3EEDF; --ik:#18291F; --is:#8C6A45; --ist:#9BD08A;
    --tint-stats:#2E2A1E; --tint-xp:#3A2A20; --tint-ml:#1F3A26; --tint-sql:#1F3326;
    --cink-stats:#E8C98F; --cink-xp:#FFB08C; --cink-ml:#9BD08A; --cink-sql:#DCE6D6;
    --viz-focus:#FF8A5B; --viz-context:#3C5A45; --viz-good:#9BD08A; --viz-bad:#FF7A6A; --viz-ink:#DCE6D6; --viz-soft:#3C5A45;
    --e1:0 0 0 1px var(--line);
    --e2:0 0 0 1px var(--line),0 14px 34px -20px rgba(0,0,0,.7);
    --e3:0 0 0 1px var(--line),0 26px 50px -18px rgba(0,0,0,.8);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --page:#101C15; --card:#18291F; --ink:#F3EEDF; --muted:#93A394; --muted2:#B9C4B5;
  --line:#22372A; --soft:#1F3326; --track:#2C4535;
  --accent:#FF8A5B; --accent-soft:#3A2A20; --accent-ink:#FFB08C; --on-accent:#12221A; --on-mastered:#12221A; --priv-soft:#1C3324;
  --success:#9BD08A; --success-soft:#1F3A26;
  --danger:#FF7A6A; --danger-ink:#FF9C8E; --danger-soft:#3D2220;
  --hero:#22402F; --inv-bg:#F3EEDF; --inv-fg:#12221A; --inv-accent:#B14D20; --code-bg:#0B140F;
  --cta-bg:#F3EEDF; --cta-fg:#12221A; --cta-i:#FF7A45; --cta-ifg:#12221A;
  --plate:#18291F; --plate-line:#2C4535; --ig:#F3EEDF; --ik:#18291F; --is:#8C6A45; --ist:#9BD08A;
  --tint-stats:#2E2A1E; --tint-xp:#3A2A20; --tint-ml:#1F3A26; --tint-sql:#1F3326;
  --cink-stats:#E8C98F; --cink-xp:#FFB08C; --cink-ml:#9BD08A; --cink-sql:#DCE6D6;
  --viz-focus:#FF8A5B; --viz-context:#3C5A45; --viz-good:#9BD08A; --viz-bad:#FF7A6A; --viz-ink:#DCE6D6; --viz-soft:#3C5A45;
  --e1:0 0 0 1px var(--line);
  --e2:0 0 0 1px var(--line),0 14px 34px -20px rgba(0,0,0,.7);
  --e3:0 0 0 1px var(--line),0 26px 50px -18px rgba(0,0,0,.8);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;background:var(--page);color:var(--ink);font-family:var(--sans);font-variation-settings:'SOFT' 100;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
body{min-height:100dvh;transition:background var(--d-brise) var(--ease-brise)}
button{font:inherit;color:inherit;cursor:pointer}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}
[hidden]{display:none!important}

#app{max-width:480px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top,0px);
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.view{flex:1;display:flex;flex-direction:column;padding-bottom:var(--s5)}
.view.has-tabs{padding-bottom:calc(40px + env(safe-area-inset-bottom,0px))}

/* — 2. échelle typographique — */
.kk{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.tt{font:700 var(--fs-1)/1.08 var(--serif);letter-spacing:-.015em;margin:3px 0 0;text-wrap:balance}
.tt.md{font-size:var(--fs-2)}.tt.sm{font-size:var(--fs-2);line-height:1.22}
.display{font:600 var(--fs-display)/1 var(--serif);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.aha{font:italic 600 var(--fs-2)/1.25 var(--serif);color:var(--accent-ink);margin:0}
.lede{margin:6px 0 0;font-size:var(--fs-label);font-weight:500;line-height:1.45;color:var(--muted)}
.num,.stats3,.big2 b,.hb .l,.ring b{font-variant-numeric:tabular-nums}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--s3);padding:22px 18px 14px}
.sh{display:flex;justify-content:space-between;align-items:baseline;padding:18px 18px 8px}
.sh span+span{font-size:var(--fs-caption);font-weight:800}

/* — 3. surfaces — */
.card{margin:0 14px;background:var(--card);border-radius:var(--r-lg);padding:var(--s4) 18px;box-shadow:var(--e2)}
.card + .card{margin-top:var(--s3)}
.card.flush{padding-top:4px;padding-bottom:4px}
.card.hero{background:var(--hero);color:var(--on-hero);box-shadow:var(--e3)}
.stack{display:flex;flex-direction:column;gap:var(--s3)}

.chipc{width:44px;height:44px;border-radius:var(--r-sm);background:var(--card);display:grid;place-items:center;box-shadow:var(--e1);color:var(--ink);flex:none;border:0;text-decoration:none;transition:transform var(--d-goutte) var(--ease-goutte)}
.chipc:active{transform:scale(.9)}
.streak{display:flex;align-items:center;gap:6px;height:44px;padding:0 14px 0 8px;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--e1);font-weight:800;font-size:var(--fs-body);flex:none;border:0}
.streak .fl{width:30px;height:30px;border-radius:50%;background:var(--accent-soft);display:grid;place-items:center}

.row{display:flex;align-items:center;gap:var(--s3);padding:11px 0;width:100%;background:none;border:0;text-align:left;text-decoration:none;color:var(--ink);transition:transform var(--d-goutte) var(--ease-goutte)}
.row:not(:disabled):active{transform:scale(.98)}
.row + .row{border-top:2px solid var(--line)}
.row .tx{flex:1;min-width:0}
.row b{display:block;font-size:var(--fs-body);font-weight:800}
.row small{display:block;font-size:var(--fs-caption);font-weight:500;color:var(--muted);margin-top:1px}
.row.lock b{color:var(--muted)}
.row.lock{cursor:default}
.pt{width:40px;height:40px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none}
.pt.inv{background:var(--inv-bg);color:var(--inv-accent)}
.num{font:700 var(--fs-2)/1 var(--serif);text-align:right}
.num small{display:block;font:800 var(--fs-over) var(--sans);letter-spacing:.1em;color:var(--muted);margin-top:4px}
.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:800 var(--fs-caption) var(--sans);white-space:nowrap;background:var(--soft);color:var(--ink)}
.pill.good,.pill.okp{background:var(--success-soft);color:var(--success)}
.pill.warn,.pill.accent{background:var(--accent-soft);color:var(--accent-ink)}

/* — 5. boutons et leurs états — */
.cta{display:flex;align-items:center;justify-content:space-between;width:100%;height:56px;border-radius:var(--r-md);background:var(--cta-bg);padding:0 8px 0 22px;font:800 var(--fs-body) var(--sans);color:var(--cta-fg);text-decoration:none;border:0;
  transition:transform var(--d-goutte) var(--ease-goutte),background var(--d-brise) var(--ease-brise)}
.cta:not(:disabled):active{transform:scale(.96)}
.cta i{width:42px;height:42px;border-radius:var(--r-sm);background:var(--cta-i);color:var(--cta-ifg);display:grid;place-items:center;transition:transform var(--d-goutte) var(--ease-goutte)}
.cta:not(:disabled):active i{transform:translateX(3px)}
.cta:disabled{opacity:.42;cursor:default}
.cta:disabled i{background:var(--track);color:var(--muted)}
.cta.hero{background:var(--cta-bg);color:var(--cta-fg)}.cta.hero i{background:var(--cta-i);color:var(--cta-ifg)}
.cta.loading{justify-content:center;gap:7px;pointer-events:none;font-size:0}
.cta.loading > :not(.dots){display:none}
.cta .dots{display:none}
.cta.loading .dots{display:flex;gap:7px}
.dots span{width:9px;height:9px;border-radius:50%;background:currentColor;animation:dots 1s infinite}
.dots span:nth-child(2){animation-delay:.15s}.dots span:nth-child(3){animation-delay:.3s}
.ghost{display:flex;align-items:center;justify-content:center;width:100%;height:56px;border:0;border-radius:var(--r-md);background:none;box-shadow:inset 0 0 0 2px var(--line);font:800 var(--fs-body) var(--sans);color:var(--ink);transition:transform var(--d-goutte) var(--ease-goutte)}
.ghost:active{transform:scale(.96)}
.dock{margin-top:auto;padding:var(--s4) 14px calc(18px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:4px}

.bar{height:8px;border-radius:var(--r-pill);background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;border-radius:var(--r-pill);background:var(--inv-bg);transition:width var(--d-brise) var(--ease-brise)}
.steps{flex:1;display:grid;gap:5px}
.steps i{height:8px;border-radius:var(--r-pill);background:var(--track);transition:background var(--d-brise) var(--ease-brise)}
.steps i.on{background:var(--inv-bg)}.steps i.ok{background:var(--success)}.steps i.ko{background:var(--danger)}

/* tabs */
.tabs{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(12px + env(safe-area-inset-bottom,0px));width:calc(100% - 28px);max-width:452px;background:var(--card);border-radius:var(--r-lg);display:flex;justify-content:space-between;align-items:center;padding:9px 10px;box-shadow:var(--e3);z-index:5}
.tab{height:46px;min-width:46px;padding:0 12px;border-radius:var(--r-md);color:var(--muted);display:flex;align-items:center;justify-content:center;gap:7px;font:800 var(--fs-label) var(--sans);border:0;background:none;transition:transform var(--d-goutte) var(--ease-goutte)}
.tab:active{transform:scale(.9)}
.tab span{display:inline}.tab svg{display:none}
.tab.on{background:var(--inv-bg);color:var(--inv-fg);padding:0 16px;animation:pop var(--d-galet) var(--ease-galet)}.tab.on svg{display:block}

/* leçon */
.seg{display:flex;background:var(--soft);border-radius:var(--r-pill);padding:3px}
.seg button{flex:1;height:38px;border:0;border-radius:var(--r-pill);background:none;font:800 var(--fs-label) var(--sans);color:var(--muted2);transition:background var(--d-goutte) var(--ease-goutte)}
.seg button.on{background:var(--inv-bg);color:var(--inv-fg)}
.hb{display:flex;flex-direction:column;gap:5px}
.hb .l{display:flex;justify-content:space-between;font-size:var(--fs-label);font-weight:800}.hb .l span+span{color:var(--muted)}
.trk{position:relative;height:18px;background:var(--soft);border-radius:var(--r-pill);overflow:hidden}
.trk i{display:block;height:100%;border-radius:var(--r-pill);transition:width var(--d-brise) var(--ease-galet)}
.trk .ref{position:absolute;top:0;bottom:0;width:3px;background:var(--danger);border-radius:var(--r-xs);z-index:1}
.keys{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.keys span{display:flex;align-items:center;gap:6px}.key{width:11px;height:11px;border-radius:var(--r-xs);display:inline-block}
.opts{display:flex;flex-direction:column;gap:var(--s2)}
.opt{display:flex;align-items:center;gap:var(--s3);min-height:56px;padding:9px 14px 9px 9px;border:0;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e2);text-align:left;font:700 var(--fs-body)/1.35 var(--sans);color:var(--ink);
  transition:transform var(--d-goutte) var(--ease-goutte),box-shadow var(--d-goutte) var(--ease-goutte)}
.opt:not(:disabled):active{transform:scale(.98)}
.opt .lt{width:36px;height:36px;border-radius:var(--r-sm);display:grid;place-items:center;flex:none;font:700 var(--fs-body) var(--serif);background:var(--kraft-2);color:var(--potager);transition:background var(--d-goutte),color var(--d-goutte)}
.opt.sel{box-shadow:0 0 0 2.5px var(--ink);animation:sel var(--d-goutte) var(--ease-goutte)}
.opt.sel .lt{background:var(--inv-bg);color:var(--inv-fg)}
.opt.ok{background:var(--success-soft);box-shadow:0 0 0 2px var(--success);animation:pop var(--d-galet) var(--ease-galet)}.opt.ok .lt{background:var(--success);color:var(--on-accent)}
.opt.ko{background:var(--danger-soft);box-shadow:0 0 0 2px var(--danger);animation:shake 300ms ease-in-out}.opt.ko .lt{background:var(--danger);color:var(--on-accent)}
.opt.dim{opacity:.5}
.opt:disabled{cursor:default}
.soft-opts .opt{background:var(--soft);box-shadow:none}
.soft-opts .opt.ok{background:var(--success-soft);box-shadow:0 0 0 2px var(--success)}
.soft-opts .opt.ko{background:var(--danger-soft);box-shadow:0 0 0 2px var(--danger)}
.story{font-size:var(--fs-body);font-weight:500;line-height:1.55;margin:0}
.tip{display:flex;gap:var(--s3);align-items:flex-start;background:var(--soft);border-radius:var(--r-md);padding:12px 14px;font-size:var(--fs-label);font-weight:500;line-height:1.5}
.tip b{font-weight:800}
.tip .pt{width:32px;height:32px;background:var(--accent-soft);color:var(--ink)}
pre.code{margin:0;background:var(--code-bg);color:#EAF2E4;border-radius:var(--r-md);padding:14px;overflow-x:auto;font:600 var(--fs-caption)/1.6 ui-monospace,Menlo,Consolas,monospace}
pre.code .c{color:#9DB8A0}
.range{width:100%;accent-color:var(--accent)}
.big2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.big2 div{background:var(--soft);border-radius:var(--r-md);padding:12px 14px}
.big2 b{display:block;font:700 var(--fs-2)/1.1 var(--serif);margin-top:4px}
.note{font-size:var(--fs-label);font-weight:500;line-height:1.5;color:var(--muted2);margin:0}

/* sheet */
.scrim{position:fixed;inset:0;background:rgba(30,58,43,.38);z-index:9;animation:fade var(--d-brise) var(--ease-brise)}
.sheet{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;background:var(--card);border-radius:30px 30px 0 0;padding:10px 18px calc(22px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:14px;z-index:10;box-shadow:var(--e3);animation:up var(--d-brise) var(--ease-galet)}
.sheet.ok{background:linear-gradient(180deg,var(--success-soft),var(--card) 55%)}
.sheet.ko{background:linear-gradient(180deg,var(--danger-soft),var(--card) 55%)}
.grab{width:44px;height:5px;border-radius:var(--r-pill);background:var(--track);margin:0 auto 2px}
.verdict{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--r-pill);font-size:var(--fs-caption);font-weight:800;animation:pop var(--d-galet) var(--ease-galet) .12s both}
.verdict.ok{background:var(--success-soft);color:var(--success)}.verdict.ko{background:var(--danger-soft);color:var(--danger-ink)}
.sheet h2{margin:8px 0 0;font:700 var(--fs-1)/1.1 var(--serif);letter-spacing:-.01em}
.sheet p{margin:0;font-size:var(--fs-body);font-weight:500;line-height:1.5;color:var(--muted2)}

/* fin & progrès */
.stats3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));text-align:center;padding:18px 8px}
.stats3 > div{font:700 var(--fs-2)/1 var(--serif)}
.stats3 > div + div{border-left:2px solid var(--line)}
.stats3 small{display:block;font:800 var(--fs-over) var(--sans);letter-spacing:.1em;color:var(--muted);margin-top:5px}
.week{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.week span{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:var(--fs-over);font-weight:800;color:var(--muted)}
.week i{width:34px;height:34px;border-radius:var(--r-sm);display:grid;place-items:center;background:var(--soft)}
.week .on i{background:var(--inv-bg);color:var(--inv-accent)}.week .today{color:var(--ink)}.week .today i{box-shadow:0 0 0 2px var(--ink)}
.week .today.on i{background:var(--accent);color:var(--potager);box-shadow:none;animation:pop var(--d-galet) var(--ease-galet) .3s both}
.center{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:28px 18px 0}

/* onboarding */
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.field input{height:54px;border-radius:var(--r-md);border:0;background:var(--soft);padding:0 16px;font:800 var(--fs-3) var(--sans);color:var(--ink)}
.field input::placeholder{color:var(--muted)}

/* défi */
.ring{position:relative;width:84px;height:84px;flex:none}
.ring svg{transform:rotate(-90deg)}
.ring b{position:absolute;inset:0;display:grid;place-items:center;font:600 var(--fs-2) var(--serif)}
.ring circle{transition:stroke-dashoffset 1s var(--ease-net)}
.ring.hurry{animation:shake .25s infinite}
.combo{animation:pop var(--d-galet) var(--ease-galet)}
.feed{margin:12px 14px 0;padding:12px 14px;border-radius:var(--r-md);font-size:var(--fs-label);font-weight:700;line-height:1.45;animation:rise var(--d-galet) var(--ease-galet)}
.feed.ok{background:var(--success-soft);color:var(--success)}.feed.ko{background:var(--danger-soft);color:var(--danger-ink)}

.confirm{display:flex;gap:var(--s2);margin-top:10px}
.confirm button{flex:1;height:44px;border-radius:var(--r-pill);border:0;font:800 var(--fs-label) var(--sans)}

/* — 4. arrivées en « galet » à chaque changement d'écran — */
.view.enter > *{animation:rise var(--d-galet) var(--ease-galet) both}
.view.enter > *:nth-child(2){animation-delay:40ms}.view.enter > *:nth-child(3){animation-delay:80ms}
.view.enter > *:nth-child(4){animation-delay:120ms}.view.enter > *:nth-child(5){animation-delay:160ms}
.view.enter > *:nth-child(n+6){animation-delay:200ms}
.view.enter > .dock{animation-name:fade}
.view.enter .opts > .opt{animation:rise var(--d-galet) var(--ease-galet) both}
.view.enter .opts > .opt:nth-child(2){animation-delay:60ms}.view.enter .opts > .opt:nth-child(3){animation-delay:120ms}.view.enter .opts > .opt:nth-child(4){animation-delay:180ms}

@keyframes rise{from{transform:translateY(18px);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(.92)}60%{transform:scale(1.04)}100%{transform:scale(1)}}
@keyframes sel{0%{transform:scale(1)}50%{transform:scale(1.02,.96)}100%{transform:scale(1)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-6px)}40%{transform:translateX(5px)}60%{transform:translateX(-3px)}80%{transform:translateX(2px)}}
@keyframes dots{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:1;transform:translateY(-4px)}}
@keyframes up{from{transform:translate(-50%,100%)}to{transform:translate(-50%,0)}}
@keyframes fade{from{opacity:0}to{opacity:1}}



/* — modules et missions — */
.pill.soon{background:var(--soft);color:var(--muted)}
.soonrow{opacity:.75}
.mtile{display:block;width:calc(100% - 28px);text-align:left;border:0;background:var(--hero);color:var(--on-hero);box-shadow:var(--e3);position:relative;overflow:hidden;margin-bottom:12px}
.mtile::after{content:"";position:absolute;right:-26px;bottom:-40px;width:150px;height:170px;opacity:.13;background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'%3E%3Cpath d='M60 30c17 12 26 28 26 44a26 26 0 0 1-52 0c0-16 9-32 26-44z' fill='%23FBF5EA'/%3E%3Cpath d='M60 30c-2-8 2-15 10-19 2 8-2 15-10 19z' fill='%23FBF5EA'/%3E%3C/svg%3E")}
.mtile-top{display:flex;align-items:center;gap:12px}
.mtile-t{font:700 var(--fs-2)/1.15 var(--serif);margin-top:2px}
.mtile p{margin:12px 0 0;font-size:var(--fs-label);font-weight:500;line-height:1.45;color:var(--on-hero-body)}
.mtile-meta{display:flex;align-items:center;gap:14px;margin-top:14px;font-size:var(--fs-caption);font-weight:800;color:var(--on-hero-muted)}
.mtile-meta span{display:inline-flex;align-items:center;gap:5px}
.mtile .newp{margin-left:auto;background:var(--abricot);color:var(--potager);border-radius:var(--r-pill);padding:4px 10px}
.mtile .stars{margin-left:auto}
.mtile.soonm{background:var(--card);color:var(--ink);box-shadow:var(--e1);opacity:.8}
.mtile.soonm p{color:var(--muted)}.mtile.soonm::after{display:none}
.pepin{flex:none;display:grid}
.mtile:not(.soonm):active{transform:scale(.98)}
.mtile{transition:transform var(--d-goutte) var(--ease-goutte)}

.mhero{position:relative;background:#1E3A2B;color:var(--on-accent);padding:26px 22px 54px;border-radius:0 0 36px 36px;overflow:hidden}
.mhero::after{content:"";position:absolute;right:-60px;top:40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,69,.28),transparent 70%)}
.mh-name{font:700 var(--fs-2) var(--serif)}
.mh-tag{font-size:var(--fs-caption);font-weight:600;color:var(--on-hero-muted)}
.mh-p{position:relative;z-index:1;margin:10px 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.5;color:var(--on-hero-body)}
.mfacts{display:flex;flex-direction:column;gap:12px}
.mfacts > div{display:flex;gap:12px;align-items:flex-start}
.mfacts svg{flex:none;margin-top:2px;color:var(--accent-ink)}
.mfacts b{display:block;font-size:var(--fs-body)}.mfacts small{display:block;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px}
.chips span{background:var(--card);box-shadow:var(--e1);border-radius:var(--r-pill);padding:8px 13px;font-size:var(--fs-label);font-weight:800}

.mbar{display:flex;align-items:center;gap:10px;padding:22px 14px 12px 18px}
.clock{display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 12px;border:0;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--e1);font:800 var(--fs-label) var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;flex:none}
.clock.low{background:var(--danger-soft);color:var(--danger-ink)}
.clock.hit{animation:shake 400ms ease-in-out}
.thread{display:flex;flex-direction:column;gap:10px;padding:0 14px}
.msg{display:flex;gap:10px;align-items:flex-start;animation:rise var(--d-galet) var(--ease-galet) both}
.av{flex:none;border-radius:50%;display:grid;place-items:center;font:700 var(--fs-body) var(--serif);color:#1E3A2B;overflow:hidden}
.av svg{display:block}
.bubble{flex:1;background:var(--card);border-radius:6px 22px 22px 22px;padding:10px 14px 12px;box-shadow:var(--e1)}
.who{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.who b{font-size:var(--fs-label)}.who span{font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.bubble p{margin:3px 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.45}
.exhibit{margin-top:12px}
.ex-h{display:flex;align-items:center;gap:8px;font-size:var(--fs-label);font-weight:800;margin-bottom:10px}
.ex-h svg{color:var(--accent-ink)}.ex-h em{margin-left:auto;font-style:normal;font-size:var(--fs-caption);color:var(--muted)}
.ex-after{margin:10px 0 0;font-size:var(--fs-label);font-weight:700;color:var(--muted2);line-height:1.45}
.dtw{overflow-x:auto;margin:0 -4px}
.dt{width:100%;border-collapse:collapse;font-size:var(--fs-label);font-variant-numeric:tabular-nums}
.dt th,.dt td{padding:9px 6px;text-align:right;white-space:nowrap}
.dt thead th{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border-bottom:2px solid var(--line)}
.dt tbody th,.dt tfoot th{text-align:left;font-weight:800}
.dt tbody td{font-weight:700}
.dt tbody tr + tr > *{border-top:2px solid var(--line)}
.dt tfoot > tr > *{border-top:2px solid var(--ink);font-weight:800}
.dt .pos{color:var(--success)}.dt .neg{color:var(--danger-ink)}
.chart{display:block;overflow:visible}
.chart .cv{font:800 var(--fs-over) var(--sans);fill:var(--ink)}
.chart .cv.muted{fill:var(--muted)}
.chart .cx{font:800 var(--fs-over) var(--sans);fill:var(--muted)}
.chart .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--ease-brise) .1s forwards}
.chart .grow{transform-box:fill-box;transform-origin:bottom;animation:barup 600ms var(--ease-galet) both}
@keyframes barup{from{transform:scaleY(0)}to{transform:none}}
.mq{padding:18px 18px 10px}
.mq .kk{display:flex;align-items:center;gap:6px;color:var(--accent-ink)}
.mq-q{font:700 var(--fs-2)/1.25 var(--serif);margin-top:4px}
.opt.long{align-items:flex-start;font-size:var(--fs-label);line-height:1.45;padding-top:10px;padding-bottom:12px}
.opt.long .lt{margin-top:-2px}
.feed.info{background:var(--soft);color:var(--muted2)}
.mfeed{scroll-margin:90px}
.mfeed .lost{display:inline-block;margin-left:6px;background:var(--danger);color:var(--on-accent);border-radius:var(--r-pill);padding:1px 8px;font-size:var(--fs-caption);font-weight:800;animation:pop var(--d-galet) var(--ease-galet) both}
.exopen{scroll-margin:80px}
.carnetb{gap:7px}
.notes{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:10px;font-size:var(--fs-label);font-weight:700;line-height:1.45}
.notes li::marker{font:700 var(--fs-label) var(--serif);color:var(--accent-ink)}
.sheet .notes{max-height:50vh;overflow:auto}
.bigstars{display:flex;gap:6px}
.bigstars svg{width:44px;height:44px;animation:pop var(--d-galet) var(--ease-galet) both}
.bigstars svg:nth-child(2){animation-delay:.15s}.bigstars svg:nth-child(3){animation-delay:.3s}


/* — démos du module 1 — */
.rvs{display:flex;flex-direction:column;gap:8px}
.rv{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;width:100%;text-align:left;border:0;border-radius:var(--r-md);background:var(--soft);padding:12px 14px;font:800 var(--fs-body)/1.35 var(--sans);color:var(--ink);transition:transform var(--d-goutte) var(--ease-goutte),background var(--d-brise)}
.rv:not(:disabled):active{transform:scale(.98)}
.rv:disabled{opacity:.5;cursor:default}
.rv-q svg{display:block}.rv-q{width:30px;height:30px;border-radius:50%;background:var(--card);display:grid;place-items:center;font:600 var(--fs-body) var(--serif);color:var(--muted)}
.rv.on{background:var(--card);box-shadow:var(--e2)}
.rv-tag{justify-self:end;border-radius:var(--r-pill);padding:4px 10px;font-size:var(--fs-caption);color:var(--ink);font-weight:800;animation:pop var(--d-galet) var(--ease-galet) both}
.rv-e{grid-column:1/-1;font-size:var(--fs-label);font-weight:700;line-height:1.45;color:var(--muted2);animation:rise var(--d-galet) var(--ease-galet) both}
.dt-demo{font-size:var(--fs-caption)}
.dt-demo tbody tr{cursor:pointer;transition:background var(--d-goutte)}
.dt-demo tbody tr.hl > *{background:var(--accent-soft)}
.dt-demo tbody tr.hl > th{box-shadow:inset 3px 0 0 var(--accent)}


/* — tableau de cohortes (mission 2) — */
.cohort td.hc{background:color-mix(in srgb,var(--viz-ink) calc(var(--h) * 1.6%),var(--card));color:var(--ink);text-align:center;border-radius:var(--r-xs);font-weight:800}
.cohort td.hc{color:color-mix(in srgb,var(--ink) 100%,transparent)}
.cohort td.empty{text-align:center;color:var(--track)}
.cohort tbody tr + tr > *{border-top:3px solid var(--card)}
.cohort th,.cohort td{padding:8px 6px}
.cohort tr.focus > th,.cohort tr.focus > td:nth-child(2){color:var(--danger-ink)}
.cohort tr.focus > td.hc{box-shadow:inset 0 0 0 2px var(--danger)}
.feed.warm{background:var(--accent-soft);color:var(--accent-ink)}


/* — 2. messages vivants — */
.chan{display:flex;align-items:center;gap:7px;padding:0 18px 10px;font-size:var(--fs-label);color:var(--muted)}
.chan b{color:var(--ink)}
.skip{margin-left:auto;border:0;background:var(--card);box-shadow:var(--e1);border-radius:var(--r-pill);padding:6px 12px;font:800 var(--fs-caption) var(--sans);color:var(--muted2)}
.msg.wait,.after.wait{display:none}
.msg.appear,.after.appear{animation:rise var(--d-galet) var(--ease-galet) both}
.thread.still .msg{animation:none}
.bwrap{flex:1;min-width:0}
.reacts{display:flex;gap:5px;margin-top:5px}
.reacts span{background:var(--card);box-shadow:var(--e1);border-radius:var(--r-pill);padding:2px 8px;font-size:var(--fs-caption);font-weight:800;animation:pop var(--d-galet) var(--ease-galet) .35s both}
.msg.typing{align-items:center}
.msg.typing .bubble{flex:none;display:flex;gap:5px;padding:13px 16px}
.msg.typing .bubble span{width:8px;height:8px;border-radius:50%;background:var(--muted);animation:dots 1s infinite}
.msg.typing .bubble span:nth-child(2){animation-delay:.15s}.msg.typing .bubble span:nth-child(3){animation-delay:.3s}
.msg.typing em{font-style:normal;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.replies{margin-top:12px}
.msg.me{justify-content:flex-end}
.msg.me .bwrap{flex:0 1 auto;max-width:86%;display:flex;flex-direction:column;align-items:flex-end}
.msg.me .bubble{background:var(--inv-bg);color:var(--inv-fg);border-radius:22px 22px 6px 22px;box-shadow:none}
.msg.me .bubble p{margin:0;font-size:var(--fs-label)}
.sent{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:var(--fs-over);font-weight:800;color:var(--muted)}
.replies .msg{animation:rise var(--d-galet) var(--ease-galet) both}
.replies .msg + .msg{animation-delay:.35s}
.msg.fb-ok .bubble{box-shadow:0 0 0 2px var(--success)}
.msg.fb-ko .bubble{box-shadow:0 0 0 2px var(--danger)}
.msg.fb-ok .bubble p b{color:var(--success)}.msg.fb-ko .bubble p b{color:var(--danger-ink)}

/* — 9. glossaire — */
.gl{all:unset;cursor:pointer;color:inherit;border-bottom:2px dashed var(--accent);text-decoration:none;font-weight:inherit}
.gl:hover,.gl:focus-visible{background:var(--accent-soft);border-radius:var(--r-xs);outline:none}
.msg.me .gl{border-bottom-color:currentColor}
.gwrap .scrim{z-index:30}
.gwrap .sheet{z-index:31}
.gdef{font-size:var(--fs-body)!important;color:var(--ink)!important;line-height:1.55!important}
.gex{display:flex;gap:12px;align-items:flex-start;background:var(--success-soft);border-radius:var(--r-md);padding:12px 14px}
.gex svg{flex:none}
.gex p{margin:2px 0 0;font-size:var(--fs-label);color:var(--ink)!important}


/* — déroulé v2 des leçons — */
.phase{display:inline-flex;align-items:center;gap:6px;background:var(--accent-soft);color:var(--accent-ink);border-radius:var(--r-pill);padding:5px 11px;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pari{padding:22px 18px}
.pv{text-align:center;font:700 var(--fs-display)/1 var(--serif);color:var(--accent-ink);font-variant-numeric:tabular-nums}
.range.big{-webkit-appearance:none;appearance:none;height:10px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--track),var(--accent));margin:22px 0 8px;outline-offset:6px}
.range.big::-webkit-slider-thumb{-webkit-appearance:none;width:34px;height:34px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--card),0 6px 14px -4px rgba(30,58,43,.4);cursor:grab}
.range.big::-moz-range-thumb{width:34px;height:34px;border:0;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px var(--card),0 6px 14px -4px rgba(30,58,43,.4)}
.range.big:disabled{opacity:.6}
.pl{display:flex;justify-content:space-between;font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.pans{margin-top:14px;text-align:center;font-weight:800;color:var(--success)}
.lstack{position:relative;margin:0 14px}
.lstack::before,.lstack::after{content:"";position:absolute;left:10px;right:10px;border-radius:var(--r-lg);background:var(--soft);z-index:0}
.lstack::before{top:14px;bottom:-14px;transform:rotate(2.2deg)}
.lstack::after{top:7px;bottom:-7px;left:4px;right:4px;transform:rotate(1deg);background:var(--track);opacity:.6}
.lcard{position:relative;z-index:1;margin:0;min-height:290px;display:flex;flex-direction:column;gap:12px;padding:22px;animation:cardin var(--d-galet) var(--ease-galet)}
@keyframes cardin{from{transform:translateX(40px) rotate(3deg);opacity:0}to{transform:none;opacity:1}}
.lt2{font:700 var(--fs-2)/1.15 var(--serif);letter-spacing:-.01em}
.lcard p{margin:auto 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.55;color:var(--muted2)}
.cdots{display:flex;justify-content:center;gap:6px;margin-top:22px}
.cdots i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--track);transition:width var(--d-galet) var(--ease-galet)}
.cdots i.on{width:24px;background:var(--inv-bg)}
.vchips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vchips div{background:var(--soft);border-radius:var(--r-md);padding:10px 12px;animation:pop var(--d-galet) var(--ease-galet) both}
.vchips div:nth-child(2){animation-delay:.08s}.vchips div:nth-child(3){animation-delay:.16s}.vchips div:nth-child(4){animation-delay:.24s}
.vchips span{display:block;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.vchips b{display:block;font:600 var(--fs-3)/1.2 var(--serif);margin-top:3px}
.vbig{background:var(--soft);border-radius:var(--r-md);padding:18px;text-align:center}
.vbig b{display:block;font:700 var(--fs-display)/1.05 var(--serif);color:var(--accent-ink);animation:pop .5s var(--ease-galet) both}
.vbig span{display:block;margin-top:6px;font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.lcard .code{font-size:var(--fs-caption)}
.xfer{margin:0 14px 14px;background:var(--accent-soft);border-radius:var(--r-md);padding:12px 16px;display:flex;flex-direction:column;gap:2px;animation:pop var(--d-galet) var(--ease-galet)}
.xfer .kk{color:var(--danger-ink)}
.xfer b{font:700 var(--fs-2) var(--serif)}
.tfdots{display:flex;gap:6px;justify-content:center;padding:0 0 14px}
.tfdots i{width:34px;height:8px;border-radius:var(--r-pill);background:var(--track)}
.tfdots i.on{background:var(--inv-bg)}.tfdots i.ok{background:var(--success)}.tfdots i.ko{background:var(--danger)}
.tfcard{min-height:170px;display:flex;flex-direction:column;gap:8px;animation:cardin var(--d-galet) var(--ease-galet)}
.tfcard p{margin:0;font:700 var(--fs-2)/1.3 var(--serif)}
.tfcard.ok{box-shadow:0 0 0 2.5px var(--success),var(--e2)}
.tfcard.ko{box-shadow:0 0 0 2.5px var(--danger),var(--e2);animation:shake 300ms ease-in-out}
.tfres{margin-top:auto;font-size:var(--fs-label);font-weight:700;line-height:1.45;color:var(--muted2)}
.tfcard.ok .tfres b{color:var(--success)}.tfcard.ko .tfres b{color:var(--danger-ink)}
.tfbtns{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:16px 14px 0}
.tfbtns button{height:76px;border:0;border-radius:var(--r-md);font:800 var(--fs-3) var(--sans);background:var(--card);color:var(--ink);box-shadow:var(--e2);transition:transform var(--d-goutte) var(--ease-goutte)}
.tfbtns button:active{transform:scale(1.04,.9)}
.tfbtns button:first-child{box-shadow:inset 0 -4px 0 var(--success),var(--e2)}
.tfbtns button:last-child{box-shadow:inset 0 -4px 0 var(--danger),var(--e2)}
.ordi .lt{font-family:var(--sans);font-weight:800}
.ordi.sel .lt{background:var(--inv-bg);color:var(--inv-fg);animation:pop var(--d-galet) var(--ease-galet)}
.ordi .should{margin-left:auto;font-style:normal;font-size:var(--fs-caption);font-weight:800;color:var(--danger-ink);background:var(--danger-soft);border-radius:var(--r-pill);padding:3px 9px}
.calc{padding:18px}
.calcrow{display:flex;align-items:center;gap:10px;margin-top:8px}
.calcrow input{flex:1;min-width:0;height:62px;border:0;border-radius:var(--r-md);background:var(--soft);padding:0 18px;font:600 var(--fs-1) var(--serif);color:var(--ink);font-variant-numeric:tabular-nums}
.calcrow input:focus{outline:3px solid var(--accent-ink);outline-offset:2px}
.calcrow span{font:600 var(--fs-2) var(--serif);color:var(--muted)}
.fbb{display:flex;flex-direction:column;gap:10px}
.fbb > div{background:var(--card);border-radius:var(--r-md);padding:11px 14px;box-shadow:var(--e1);animation:rise var(--d-galet) var(--ease-galet) both}
.fbb > div:nth-child(2){animation-delay:.1s}.fbb > div:nth-child(3){animation-delay:.2s}
.fbb p{margin:3px 0 0!important;font-size:var(--fs-label)!important;color:var(--ink)!important}
.fb-t .kk{color:var(--accent-ink)}.fb-f .kk{color:var(--danger-ink)}
.fb-r{background:var(--success-soft)!important;box-shadow:none!important}.fb-r .kk{color:var(--success)}
.fiche{color:var(--ink);box-shadow:var(--e3);transform:rotate(-1.2deg);animation:pop .6s var(--ease-galet) both;padding:22px}
.fiche .kk{color:var(--ink);opacity:.65}
.fiche .lt2{margin-top:4px;color:var(--ink)}
.fiche ul{margin:12px 0 0;padding-left:18px;font-size:var(--fs-body);font-weight:500;line-height:1.55}
.fiche .gl{border-bottom-color:currentColor}
.fkey{margin:14px 0 0;font:italic 600 var(--fs-3)/1.35 var(--serif);color:var(--accent-ink)}
.gsheet .fiche{transform:none}
.saved{display:flex;align-items:center;justify-content:center;gap:6px;margin:16px 0 0;font-size:var(--fs-label);font-weight:800;color:var(--success)}

/* — 15. révision espacée — */
.mring{position:relative;flex:none;border-radius:50%;background:conic-gradient(var(--ring,var(--state-watch)) calc(var(--p) * 1%),var(--soft) 0);display:grid;place-items:center;animation:pop var(--d-galet) var(--ease-galet) both}
.mring i{width:70%;height:70%;border-radius:50%;background:var(--card)}
.sheet .mring i{background:var(--card)}
.review .row{padding:8px 0}
.curve path{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.4s var(--ease-brise) .2s forwards}
.curve circle{transform-box:fill-box;transform-origin:center;animation:pop var(--d-galet) var(--ease-galet) both}
.curve circle:nth-of-type(1){animation-delay:.55s}.curve circle:nth-of-type(2){animation-delay:.95s}
.memjump{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:var(--r-md);padding:12px}
.memjump .arrow{color:var(--muted)}
.memjump p{margin:0 0 0 4px;font-size:var(--fs-label);line-height:1.4}
.memjump .mring:last-of-type{animation-delay:.25s}
@keyframes draw{to{stroke-dashoffset:0}}

/* — 11. écran de lancement : la graine pousse — */
.splash{position:fixed;inset:0;z-index:50;background:#1E3A2B;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .45s var(--ease-brise)}
.splash.out{opacity:0}
.splash::before{content:"";position:absolute;width:520px;height:520px;border-radius:50%;background:radial-gradient(circle,rgba(255,122,69,.22),transparent 65%);transform:scale(.4);opacity:0;transition:transform 1.2s var(--ease-brise),opacity 1s ease}
.splash.go::before{transform:scale(1);opacity:1}
.sp-seed{width:118px;height:118px;transform:scale(.2) translateY(60px);opacity:0;transition:transform 700ms cubic-bezier(.3,1.6,.45,1) 150ms,opacity 300ms ease 150ms}
.splash.go .sp-seed{transform:none;opacity:1}
.sp-seed .leaf{transform-origin:60px 30px;transform:scale(0) rotate(-40deg);transition:transform 600ms cubic-bezier(.3,1.8,.4,1) 750ms}
.splash.go .sp-seed .leaf{transform:none}
.sp-seed .pip{transform-origin:51px 70px;transform:scale(0);transition:transform 450ms cubic-bezier(.3,1.8,.4,1) 1000ms}
.splash.go .sp-seed .pip{transform:rotate(20deg)}
.sp-word{text-align:center;color:#FBF5EA;opacity:0;transform:translateY(12px);transition:opacity 500ms ease 1050ms,transform 500ms var(--ease-galet) 1050ms}
.sp-word span{display:block;font:700 var(--fs-display)/1 var(--serif);letter-spacing:-.03em}
.sp-word small{display:block;margin-top:10px;font:italic 600 var(--fs-3) var(--serif);color:#FF7A45}
.splash.go .sp-word{opacity:1;transform:none}

/* Respecte « réduire les animations » : les ressorts deviennent de simples fondus */
@media (prefers-reduced-motion:reduce){
  *{transition-duration:1ms!important}
  *,.view.enter > *{animation:fade 160ms ease both!important}
  .dots span{animation:none!important;opacity:.6}
}


/* — marque, accueil — */
.brand{display:flex;justify-content:space-between;align-items:center;padding:20px 18px 0}
.brand .wm{display:flex;align-items:center;gap:9px;font:700 var(--fs-2)/1 var(--serif);letter-spacing:-.02em;color:var(--ink)}
.brand .wm svg{border-radius:var(--r-xs)}
.streak{gap:5px;padding:0 13px 0 9px;background:var(--accent-soft);box-shadow:none;color:var(--accent-ink);height:36px}
.streak .fl{width:24px;height:24px;background:none}
.tt-sub{display:block;font:italic 700 var(--fs-1)/1.08 var(--serif);color:var(--accent-ink);letter-spacing:-.015em;margin-top:2px;text-wrap:balance}
.top .tt-sub{font-size:var(--fs-2)}
.illus{border-radius:var(--r-md);height:118px;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:0 20px 16px}
.illus i{width:20px;border-radius:10px 10px 4px 4px;animation:barup 700ms var(--ease-galet) both}
.team{margin:0 14px;border-radius:var(--r-lg);background:var(--kraft-2);padding:14px 10px 0;overflow:hidden}
.team p{margin:2px 8px 12px;font-size:var(--fs-label);font-weight:500;color:#4C5F50;text-align:center}

/* — une image, un pourquoi — */
.vplate{margin:0 14px;background:var(--plate);border-radius:var(--r-lg);box-shadow:var(--e2);padding:18px 10px;min-height:250px;display:flex;align-items:center;justify-content:center}
.vplate svg{display:block;width:100%;height:auto;max-height:300px;overflow:visible}
.vplate svg text{font-family:var(--sans);font-weight:700}
.vplate svg .hd{font-family:var(--hand);font-weight:700}
.vwhy{padding:18px 22px 0;animation:rise .6s var(--ease-brise) .9s both}
.vwhy p{margin:6px 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.55;color:var(--muted2)}
.vwhy p b{font-weight:800;color:var(--ink)}
.vkeep{margin:16px 22px 0;padding-top:14px;border-top:2px solid var(--line);font:italic 600 var(--fs-3)/1.3 var(--serif);color:var(--ink);animation:rise .6s var(--ease-brise) 1.3s both}
.gvis{background:var(--plate);border-radius:var(--r-md);padding:10px 6px;box-shadow:inset 0 0 0 1px var(--plate-line)}
.gvis svg{display:block;width:100%;height:auto}
.gvis svg text{font-family:var(--sans);font-weight:700}.gvis svg .hd{font-family:var(--hand);font-weight:700}
.vfi{animation:v-fi .7s both}
.vdr{stroke-dasharray:500;stroke-dashoffset:500;animation:v-dr 1.2s .3s forwards}
.tomdone{width:110px;margin:0 auto}
@keyframes v-fi{from{opacity:0}to{opacity:1}}
@keyframes v-dr{to{stroke-dashoffset:0}}
@keyframes v-drop{0%,10%{transform:translateY(-120px);opacity:0}30%{opacity:1}45%{transform:translateY(0)}52%{transform:translateY(-10px)}60%,100%{transform:translateY(0)}}
@keyframes v-slide{0%,40%{transform:translateX(0)}70%,100%{transform:translateX(var(--d))}}
@keyframes v-tilt{0%,40%{transform:rotate(-7deg)}70%,100%{transform:rotate(0)}}
@keyframes v-sway{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(6deg)}}
@keyframes v-bobA{0%,100%{transform:translateY(-34px)}50%{transform:translateY(30px)}}
@keyframes v-bobB{0%,100%{transform:translateY(-3px)}50%{transform:translateY(3px)}}
@keyframes v-wave{from{transform:translateX(0)}to{transform:translateX(-40px)}}
@keyframes v-rain2{0%{transform:translateY(-4px);opacity:0}25%{opacity:1}100%{transform:translateY(34px);opacity:0}}
@keyframes v-spin{to{transform:rotate(360deg)}}
@keyframes v-stamp{0%,50%{transform:scale(2.2) rotate(-14deg);opacity:0}62%{transform:scale(.9) rotate(-14deg);opacity:1}70%,100%{transform:scale(1) rotate(-14deg);opacity:1}}
@keyframes v-fall{0%{transform:translateY(-160px);opacity:0}20%{opacity:1}60%,100%{transform:translateY(0);opacity:1}}
@keyframes v-ring{0%,100%{transform:rotate(0)}20%{transform:rotate(14deg)}40%{transform:rotate(-12deg)}60%{transform:rotate(6deg)}80%{transform:rotate(-3deg)}}
@keyframes v-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes v-pop{0%,35%{transform:scale(0)}50%{transform:scale(1.35)}60%,100%{transform:scale(1)}}
@keyframes v-nod{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
@keyframes v-idle{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}

/* — 1. la barre d'onglets ne cache plus rien — */
.tabfade{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:480px;height:calc(116px + env(safe-area-inset-bottom,0px));background:linear-gradient(to top,var(--page) 56%,transparent);z-index:4;pointer-events:none}

/* — 8. icônes maison — */
.ni{display:block;flex:none}
.ni .ig{fill:var(--ig)}.ni .igS{stroke:var(--ig)}.ni .ip{fill:var(--ip)}.ni .ia{fill:var(--ia)}.ni .iaS{stroke:var(--ia)}
.ni .ik{fill:var(--ik)}.ni .ikS{stroke:var(--ik)}.ni .is{fill:var(--is)}.ni .istS{stroke:var(--ist)}.ni .iwS{stroke:var(--ip)}
.tab.on .ni{--ig:var(--inv-fg);--ik:var(--inv-bg)}
.pt .ni{width:28px;height:28px}

/* — 4. la leçon se montre sur l'accueil — */
.vthumb{background:var(--plate);border-radius:var(--r-md);padding:8px 4px 0;overflow:hidden;box-shadow:inset 0 0 0 1px var(--plate-line)}
.vthumb svg{display:block;width:100%;height:auto;max-height:190px}
.vthumb svg text,.vplate svg text{font-family:var(--sans);font-weight:700}
.vthumb svg .hd{font-family:var(--hand);font-weight:700}
.tease{display:flex;gap:10px;align-items:flex-start}
.tease p{margin:0;flex:1;background:var(--page);border-radius:6px 18px 18px 18px;padding:9px 12px;font-size:var(--fs-label);font-weight:500;line-height:1.42}

/* — 5. Tom réagit — */
.tompeek{position:absolute;right:12px;top:-94px;width:118px;pointer-events:none;animation:peek .55s var(--ease-galet) .12s both}
.tompeek svg{display:block;width:100%;height:auto}
.tomq{margin:6px 0 0!important;max-width:22ch;font:italic 600 var(--fs-3)/1.3 var(--serif)!important;color:var(--ink)!important}
.sheet.ko h2{color:var(--danger)}.sheet.ok h2{color:var(--success)}
@keyframes peek{from{transform:translateY(40px);opacity:0}to{transform:none;opacity:1}}

/* — 6. des cartes pleines — */
.vwho{display:flex;gap:12px;align-items:flex-start;animation:rise var(--d-galet) var(--ease-galet) both}
.vsay{flex:1;background:var(--soft);border-radius:6px 18px 18px 18px;padding:10px 13px}
.vsay b{font-size:var(--fs-label)}.vsay span{font-size:var(--fs-caption);font-weight:600;color:var(--muted);margin-left:6px}
.lcard .vsay p{margin:4px 0 0;font:italic 600 var(--fs-3)/1.3 var(--serif);color:var(--ink)}
.vtom{display:flex;gap:10px;align-items:center;background:var(--success-soft);border-radius:var(--r-md);padding:6px 14px 6px 6px}
.vtom-f{width:92px;flex:none;border-radius:50%;overflow:hidden;background:var(--plate)}
.vtom-f svg{display:block;width:100%;height:auto}
.lcard .vtom p{margin:6px 0 0;font-size:var(--fs-label);font-weight:600;color:var(--muted2)}
.crowd{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 4px}
.cw{display:flex;flex-direction:column;align-items:center;animation:rise var(--d-galet) var(--ease-galet) both}
.cw svg{display:block;width:100%;max-width:56px;height:auto}
.cw b{font-size:var(--fs-caption);font-weight:800;background:var(--kraft-2);color:var(--potager);border-radius:var(--r-xs);padding:2px 7px;margin-top:-4px;position:relative}
.cw.hl b{background:var(--abricot);color:var(--on-accent)}
.cw.gone svg{opacity:.38;filter:grayscale(.7)}.cw.gone b{background:var(--soft);color:var(--muted)}

/* — 9. micro-célébrations — */
.sprpop{position:relative;height:0;align-self:flex-end;margin-right:26px}
.sprpop svg{position:absolute;right:0;bottom:-22px;transform-origin:50% 100%;animation:sprpop 1.4s var(--ease-galet) .25s both}
@keyframes sprpop{0%{transform:translateY(16px) scale(0)}55%{transform:translateY(-6px) scale(1.15)}75%,100%{transform:none}}
.newfiche{display:flex;align-items:center;gap:12px;padding:12px 16px}
.newfiche b{display:block;font:italic 600 var(--fs-body)/1.3 var(--serif);color:var(--accent-ink);margin-top:3px}
.newfiche small{display:block;font-size:var(--fs-caption);font-weight:600;color:var(--muted);margin-top:4px}
.growp{transform-box:fill-box;transform-origin:50% 100%;animation:growp 1.1s var(--ease-galet) .45s both}
@keyframes growp{from{transform:scale(0)}to{transform:none}}
.seedrain{position:fixed;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.seedrain i{position:absolute;top:-30px;border-radius:50% 50% 50% 50%/60% 60% 40% 40%;animation:seedfall 2.4s linear both}
@keyframes seedfall{from{transform:translateY(0) rotate(0);opacity:1}85%{opacity:1}to{transform:translateY(105vh) rotate(540deg);opacity:0}}

/* — 10. les scènes vivent la nuit : on recolore le décor, jamais les visages — */
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene){background:radial-gradient(circle at 78% 12%,rgba(255,176,140,.14),transparent 55%),#18291F}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#1E3A2B"]:not(.pp *){fill:#F3EEDF}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#1E3A2B"]:not(.pp *){stroke:#F3EEDF}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#6E7F6F"]:not(.pp *){fill:#93A394}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#6E7F6F"]:not(.pp *){stroke:#93A394}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#B14D20"]:not(.pp *){fill:#FFB08C}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#B14D20"]:not(.pp *){stroke:#FFB08C}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#E8DFCB"]:not(.pp *){fill:#2C4535}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#E8DFCB"]:not(.pp *){stroke:#2C4535}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#FFFDF8"]:not(.pp *){fill:#22372A}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#FFFDF8"]:not(.pp *){stroke:#22372A}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#FBF5EA"]:not(.pp *){fill:#12221A}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#FBF5EA"]:not(.pp *){stroke:#12221A}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#FFF1E8"]:not(.pp *){fill:#3A2A20}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#FFF1E8"]:not(.pp *){stroke:#3A2A20}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#EEF4E8"]:not(.pp *){fill:#1F3A26}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#EEF4E8"]:not(.pp *){stroke:#1F3A26}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#E9EEF2"]:not(.pp *){fill:#1F2B33}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#E9EEF2"]:not(.pp *){stroke:#1F2B33}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#FFF5DD"]:not(.pp *){fill:#3A3220}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#FFF5DD"]:not(.pp *){stroke:#3A3220}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#D8C8A6"]:not(.pp *){fill:#3C4A37}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#D8C8A6"]:not(.pp *){stroke:#3C4A37}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#2F6B2A"]:not(.pp *){fill:#9BD08A}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#2F6B2A"]:not(.pp *){stroke:#9BD08A}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [fill="#F3E7CF"]:not(.pp *){fill:#22372A}
[data-dark="1"] :is(.vplate,.vthumb,.gvis,.pscene) [stroke="#F3E7CF"]:not(.pp *){stroke:#22372A}
@media (prefers-reduced-motion:reduce){.seedrain{display:none}}

/* — 1. premier jour — */
.onb{padding-top:22px}
.obdots{display:flex;justify-content:center;gap:6px}
.obdots i{width:8px;height:8px;border-radius:var(--r-pill);background:var(--track);transition:width var(--d-galet) var(--ease-galet)}
.obdots i.on{width:26px;background:var(--inv-bg)}
.obart{position:relative;margin:16px 14px 0;height:230px;border-radius:var(--r-lg);background:var(--kraft-2);overflow:hidden}
.obart.small{height:196px}
.obart > div{position:absolute;left:50%;bottom:-6px;width:240px;transform:translateX(-50%)}
.obart.small > div{width:200px}
.obart svg{display:block;width:100%;height:auto}
.obsay{position:relative;margin:-26px 22px 0;border-radius:6px 24px 24px 24px;animation:rise var(--d-galet) var(--ease-galet) .15s both}
.obsay .who b{font-size:var(--fs-body)}
.obsay p{margin:6px 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.5;color:var(--muted2)}
.obsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:0 14px}
.obsteps .card{margin:0;padding:10px;border-radius:var(--r-md);opacity:.75}
.obsteps .card.on{opacity:1;box-shadow:0 0 0 2px var(--ink)}
.obsteps b{display:block;font-size:var(--fs-caption);margin-top:6px}.obsteps small{display:block;font-size:var(--fs-over);font-weight:600;color:var(--muted)}
.opt.long b{font-weight:800}
.card.field{padding:12px 16px}

/* — 2. message du jour — */
.daily{margin:0 14px 12px;border-radius:var(--r-lg);background:var(--hero);color:var(--on-hero);padding:14px 16px;box-shadow:var(--e3);animation:rise .6s var(--ease-galet) .2s both}
.daily .dh{display:flex;gap:10px;align-items:center}
.daily .dh b{font-size:var(--fs-label)}.daily .dh span{font-size:var(--fs-caption);color:var(--on-hero-muted);font-weight:600}
.daily .dh em{display:block;font-style:normal;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-hero-kicker);margin-top:1px}
.daily .dot{width:9px;height:9px;border-radius:50%;background:var(--abricot);animation:pop 1.6s var(--ease-galet) infinite}
.daily p{margin:10px 0 0;font:italic 600 var(--fs-3)/1.32 var(--serif)}
.daily .db{display:flex;gap:8px;margin-top:12px}
.daily .db button{height:44px;border:0;border-radius:var(--r-sm);font:800 var(--fs-label) var(--sans);padding:0 14px}
.daily .db button:first-child{flex:1;background:var(--abricot);color:#1E3A2B}
.daily .db button:last-child{background:rgba(251,245,234,.12);color:#FBF5EA}

/* — 3. le pari s'allume — */
.pcrowd.faces{display:grid;grid-template-columns:repeat(5,1fr);gap:4px 6px;margin:-6px 0 8px}
.pcrowd.faces span{position:relative;opacity:.32;filter:grayscale(.6);transition:opacity .25s,filter .25s,transform .3s var(--ease-galet)}
.pcrowd.faces span svg{display:block;width:100%;height:auto}
.pcrowd.faces span.on{opacity:1;filter:none;transform:translateY(-2px)}
.pcrowd.faces span.on::after{content:"✓";position:absolute;right:4px;top:2px;width:16px;height:16px;border-radius:50%;background:var(--abricot);color:var(--on-accent);font:800 var(--fs-over)/16px var(--sans);text-align:center}
.pcrowd.grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px;margin:0 auto 10px;max-width:220px}
.pcrowd.grid span{aspect-ratio:1;border-radius:var(--r-xs);background:var(--track);transition:background .2s,transform .25s var(--ease-galet)}
.pcrowd.grid span.on{background:var(--abricot);transform:scale(1.06)}
.pcrowd.grid.ppl span{background:none;color:var(--track);aspect-ratio:auto}
.pcrowd.grid.ppl span svg{display:block;width:100%;height:auto;fill:currentColor}
.pcrowd.grid.ppl span.on{color:var(--abricot)}
.pv small{font:700 var(--fs-3) var(--sans);color:var(--muted)}

/* — 5. pavé et calculatrice — */
.cdisp{display:flex;align-items:center;gap:6px;margin-top:6px;padding:6px 2px 8px;border-bottom:3px solid var(--accent);min-height:66px}
.cdisp.done{border-bottom-color:var(--track)}
.cdisp.bad{animation:shake 300ms ease-in-out}
.cexpr{font:700 var(--fs-display)/1.1 var(--serif);font-variant-numeric:tabular-nums;word-break:break-all}
.cexpr i{font-style:normal;color:var(--track)}
.caret{width:3px;height:36px;background:var(--accent);animation:caret 1s steps(1) infinite}
.cunit{margin-left:auto;font:700 var(--fs-2) var(--serif);color:var(--muted)}
.cres{margin-top:8px;font:700 var(--fs-2) var(--serif);color:var(--accent-ink)}.cres small{font:600 var(--fs-caption) var(--sans);color:var(--muted);margin-left:4px}
@keyframes caret{50%{opacity:0}}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-bottom:8px}
.keypad button{height:46px;border:0;border-radius:var(--r-sm);background:var(--card);box-shadow:var(--e1);font:700 var(--fs-2) var(--serif);color:var(--ink);transition:transform var(--d-goutte) var(--ease-goutte)}
.keypad button:active{transform:scale(.92)}
.keypad .op{background:var(--accent-soft);color:var(--accent-ink)}
.keypad .fn{background:var(--soft)}
.keypad [data-key="="]{background:var(--inv-bg);color:var(--inv-fg)}

/* — 6. le bureau de Pépin — */
.chan{justify-content:space-between}
.chn{font:700 var(--fs-3) var(--serif);color:var(--ink)}
.avs{display:flex}.avs .av{margin-left:-8px;box-shadow:0 0 0 2px var(--page)}
.online{display:flex;align-items:center;gap:6px;padding:0 18px 10px;font-size:var(--fs-caption);font-weight:700;color:var(--success)}
.online i{width:8px;height:8px;border-radius:50%;background:#5CB85C}
.online .skip{margin-left:auto}
.pin{display:flex;gap:12px;align-items:flex-start;margin:0 14px 12px;border-radius:var(--r-md);background:#FFF1C9;padding:10px 12px 10px 14px;color:#1E3A2B}
.pin .kk{color:#8A5A1E}.pin p{margin:3px 0 0;font-size:var(--fs-label);font-weight:700;line-height:1.4}
.calp{flex:none;width:62px;border-radius:var(--r-sm);overflow:hidden;background:#FFFDF8;box-shadow:var(--e1);text-align:center;display:flex;flex-direction:column}
.calp b{background:var(--tomate);color:var(--on-accent);font-size:var(--fs-over);letter-spacing:.1em;text-transform:uppercase;padding:2px 0}
.calp span{font:700 var(--fs-3)/1.15 var(--serif);padding-top:2px;color:#1E3A2B}
.calp em{font-style:normal;font-size:var(--fs-over);font-weight:800;color:#B14D20;padding-bottom:3px}
[data-dark="1"] .pin{background:#3A3220;color:#F3EEDF}[data-dark="1"] .pin .kk{color:#E8C98F}

/* — 7. graphiques signés — */
.chart .cv{font:700 var(--fs-caption) var(--serif);fill:var(--ink)}
.chart .cv.hot{fill:var(--accent-ink);font-size:var(--fs-label)}
.chart .hd{font-family:var(--hand);font-weight:700;font-size:var(--fs-3);fill:var(--accent-ink)}

/* — 8. la collection — */
.packs{display:grid;grid-template-columns:repeat(3,1fr);gap:12px 10px;padding:4px 14px 6px}
.pack{display:flex;flex-direction:column;border:0;padding:0;text-align:left;background:var(--card);border-radius:var(--r-sm);overflow:hidden;box-shadow:var(--e2);transform:rotate(var(--r));animation:rise var(--d-galet) var(--ease-galet) both;transition:transform var(--d-goutte) var(--ease-goutte);color:var(--ink)}
.pack:active{transform:rotate(0) scale(.96)}
.pband{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;color:var(--potager)}
.pband span{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pscene{margin:6px;border-radius:var(--r-sm);background:var(--plate);overflow:hidden;aspect-ratio:1.45;display:grid;place-items:center}
.pscene svg{display:block;width:100%;height:auto}
.pscene.picon svg{width:auto}
.ptitle{font:700 var(--fs-caption)/1.2 var(--serif);padding:2px 8px 10px}
.pperf{display:block;height:6px;margin-top:auto;background:repeating-linear-gradient(90deg,var(--track) 0 6px,transparent 6px 12px)}
.packsheet{gap:16px}
.packbig{position:relative;margin:4px auto 0;width:min(300px,82%);aspect-ratio:.68;perspective:1200px;cursor:pointer}
.packbig > div{position:absolute;inset:0;display:flex;flex-direction:column;background:var(--card);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e3),0 0 0 1px var(--line);backface-visibility:hidden;transition:transform .6s var(--ease-brise)}
.packbig .pb{transform:rotateY(180deg)}
.packbig.flipped .pf{transform:rotateY(-180deg)}.packbig.flipped .pb{transform:rotateY(0)}
.packbig .pband{padding:12px 14px}.packbig .pband span{font-size:var(--fs-over)}
.packbig .pscene{margin:10px 12px 0;border-radius:var(--r-sm)}
.packbig .ptitle{font-size:var(--fs-2);padding:10px 14px 0}
.packbig .pkey{margin:6px 14px 0;font:italic 600 var(--fs-body)/1.35 var(--serif);color:var(--accent-ink)}
.packbig .pmeta{display:block;margin:8px 14px 10px;font-size:var(--fs-over);font-weight:700;color:var(--muted)}
.packbig ul{margin:10px 14px 0;padding-left:18px;font-size:var(--fs-label);font-weight:500;line-height:1.5}
.packbig .pperf{height:8px}
[data-dark="1"] .pband{color:var(--ink)}

/* — 9. duel contre Tom — */
.duel{padding:4px 16px 14px;position:relative}
.duel svg{display:block;margin:0 -8px}
.sunr{animation:v-spin 9s linear infinite}
.dtime{position:absolute;right:18px;top:12px;font:700 var(--fs-body) var(--serif);color:#FFC93C}
.drow{display:flex;align-items:center;gap:10px;margin-top:8px}
.drow .me{width:34px;height:34px;border-radius:50%;background:var(--abricot);color:#1E3A2B;display:grid;place-items:center;font-weight:800;flex:none}
.dtrk{flex:1;height:14px;border-radius:var(--r-pill);background:rgba(251,245,234,.12);overflow:hidden}
.dtrk i{display:block;height:100%;border-radius:var(--r-pill);transition:width .5s var(--ease-galet)}
.drow b{font:700 var(--fs-2) var(--serif);width:28px;text-align:right}
.dlbl{display:flex;justify-content:space-between;margin-top:8px;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-hero-muted)}
.tomsay{margin:10px 14px 0 auto;width:fit-content;max-width:80%;background:var(--card);box-shadow:var(--e1);border-radius:18px 18px 6px 18px;padding:8px 13px;display:flex;gap:6px;align-items:baseline}
.tomsay b{font-size:var(--fs-caption)}.tomsay span{font:italic 600 var(--fs-body) var(--serif)}
.tomsay.hidden{display:none}.tomsay.pop{animation:pop var(--d-galet) var(--ease-galet)}

/* — 10. états vides — */
.offline{display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.offline > svg{border-radius:var(--r-md)}
.empty{display:flex;gap:12px;align-items:center}
.empty b{display:block;font:700 var(--fs-3) var(--serif);margin-top:2px}.empty small{display:block;font-size:var(--fs-caption);font-weight:600;color:var(--muted);margin-top:2px}
.eart{width:120px;flex:none;border-radius:var(--r-md);background:var(--kraft-2);overflow:hidden}
.eart svg{display:block;width:100%;height:auto}
.eart.wide{width:100%;max-width:300px;margin:0 auto}

/* — 1. le pari révélé — */
.pcrowd.reveal span{opacity:.35;filter:grayscale(.6);transform:none}
.pcrowd.reveal span.on{opacity:1;filter:none}
.pcrowd.faces.reveal span.on{background:radial-gradient(circle at 50% 46%,rgba(255,122,69,.28) 60%,transparent 62%)}
.pcrowd.faces.reveal span.g{box-shadow:inset 0 0 0 2px transparent;outline:2px dashed var(--ink);outline-offset:-4px;border-radius:50%}
.pcrowd.faces.reveal span.on::after{display:none}
.pcrowd.grid.reveal span{background:var(--track)}
.pcrowd.grid.reveal span.on{background:var(--abricot);transform:none}
.pcrowd.grid.reveal span.g{box-shadow:inset 0 0 0 2px var(--ink)}
.pcrowd.grid.ppl.reveal span{background:none}.pcrowd.grid.ppl.reveal span.on{color:var(--abricot)}
.pcrowd.grid.ppl.reveal span.g{box-shadow:none;border-bottom:2px solid var(--ink)}
.key.rk-a{background:var(--abricot)}.key.rk-g{background:none;box-shadow:inset 0 0 0 2px var(--ink);border-radius:50%}
.rscale{position:relative;height:74px;margin:6px 10px 0}
.rscale .track{position:absolute;left:0;right:0;top:34px;height:8px;border-radius:var(--r-pill);background:var(--track)}
.rscale .gap{position:absolute;top:34px;height:8px;background:var(--abricot);border-radius:var(--r-pill);animation:growx .8s var(--ease-galet) .3s both;transform-origin:left}
@keyframes growx{from{transform:scaleX(0)}}
.rscale .mk{position:absolute;top:38px;width:0}
.rscale .mk::before{content:"";position:absolute;left:-11px;top:-11px;width:22px;height:22px;border-radius:50%;box-sizing:border-box}
.rscale .me::before{background:var(--card);border:3px solid var(--ink)}
.rscale .ans::before{background:var(--abricot);animation:pop .5s var(--ease-galet) .5s both}
.rscale em{position:absolute;white-space:nowrap;font:italic 600 var(--fs-label) var(--serif);transform:translateX(-50%)}
.rscale .me em{bottom:16px;color:var(--ink)}.rscale .ans em{top:16px;color:var(--accent-ink)}
.rscale .mk[style*="left:0%"] em,.rscale .mk[style^="left:1"] em{transform:none}
.rscale small{position:absolute;bottom:0;font-size:var(--fs-over);font-weight:800;color:var(--muted)}.rscale .lo{left:0}.rscale .hi{right:0}

/* — 2. le badge et l'avatar — */
.badge{position:relative;margin:0 auto 6px;width:250px}
.badge .lan{display:block;width:12px;height:56px;margin:0 auto -14px;background:var(--abricot);border-radius:var(--r-xs)}
.bcard{position:relative;background:var(--card);border-radius:var(--r-lg);box-shadow:var(--e3);overflow:hidden;transform:rotate(-2deg);animation:swing 3.6s ease-in-out infinite;transform-origin:50% -60px;text-align:center;padding-bottom:14px}
@keyframes swing{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(1.5deg)}}
.bclip{height:18px;background:var(--potager);position:relative}
.bclip::after{content:"";position:absolute;left:50%;top:5px;width:34px;height:8px;margin-left:-17px;border-radius:var(--r-pill);background:var(--page)}
.bhead{display:flex;justify-content:space-between;align-items:center;padding:10px 14px 0}
.bhead span{display:flex;align-items:center;gap:6px;font:700 var(--fs-3) var(--serif)}
.bhead small{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;color:var(--muted)}
.bav{position:relative;display:block;margin:10px auto 0;width:122px;height:122px;border:0;padding:0;border-radius:var(--r-lg);background:var(--success-soft);overflow:hidden}
.bav svg{display:block}
.bav i{position:absolute;right:6px;bottom:6px;width:28px;height:28px;border-radius:var(--r-sm);background:var(--card);display:grid;place-items:center;box-shadow:var(--e1)}
.bname{font:700 var(--fs-2) var(--serif);margin-top:8px}
.brole{font-size:var(--fs-caption);font-weight:700;color:var(--muted);padding:2px 12px 0}
.btags{display:flex;justify-content:center;gap:6px;margin-top:10px}
.btags span{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-pill);padding:5px 11px;font-size:var(--fs-caption);font-weight:800;background:var(--accent-soft);color:var(--accent-ink)}
.btags span+span{background:var(--success-soft);color:var(--success)}
.avprev{width:180px;height:180px;margin:0 auto 14px;border-radius:50%;background:var(--success-soft);overflow:hidden;display:grid;place-items:center}
.avbuild{gap:16px}
.sws{display:flex;flex-wrap:wrap;gap:9px;margin-top:8px}
.sw{width:34px;height:34px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.sw.on{box-shadow:0 0 0 3px var(--card),0 0 0 5px var(--ink)}
.avchips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.avchip{display:flex;flex-direction:column;align-items:center;gap:2px;border:0;border-radius:var(--r-md);background:var(--soft);padding:4px 6px 6px;font:700 var(--fs-caption) var(--sans);color:var(--ink)}
.avchip svg{border-radius:var(--r-sm);background:var(--success-soft)}
.avchip.on{background:var(--inv-bg);color:var(--inv-fg)}
.avchips.txt .avchip{flex-direction:row;padding:9px 13px;font-size:var(--fs-label)}
.drow .me{overflow:hidden;background:var(--success-soft)!important}
.drow .me svg{display:block}

/* — 8. la démo médiane avec Max — */
.seesaw{position:relative;height:150px;margin:4px 0 0}
.seesaw .plank{position:absolute;left:2%;right:2%;top:98px;height:9px;border-radius:var(--r-xs);background:#B97A4B}
.crowd9{position:absolute;left:3%;top:30px;width:30%;display:flex;flex-wrap:wrap;justify-content:center}
.crowd9 span{width:30%;margin:0 -2% -14px}
.crowd9 svg,.maxp svg{display:block;width:100%;height:auto}
.seesaw .flag{position:absolute;top:2px;width:0}
.seesaw .flag i{position:absolute;left:0;top:0;width:2px;height:30px;background:var(--ink)}
.seesaw .flag i::after{content:"";position:absolute;left:2px;top:0;border-left:16px solid #8FC27A;border-top:6px solid transparent;border-bottom:6px solid transparent}
.maxp{position:absolute;top:44px;width:58px;margin-left:-29px;transition:left .25s var(--ease-galet)}
.maxp b{position:absolute;left:50%;top:-14px;transform:translateX(-50%);white-space:nowrap;font:700 var(--fs-label) var(--serif);color:var(--accent-ink)}
.fulcrum{position:absolute;top:106px;width:0;transition:left .45s var(--ease-galet)}
.fulcrum i{position:absolute;left:-15px;top:0;width:30px;height:30px;border-radius:50%;background:#C29A66;box-shadow:inset 0 0 0 5px #B97A4B}
.fulcrum em{position:absolute;left:0;top:32px;transform:translateX(-50%);font:700 var(--fs-3) var(--hand);color:var(--accent-ink)}
.maxrange{accent-color:var(--abricot)}
.big2 small{display:block;font-size:var(--fs-caption);font-weight:800;color:var(--danger-ink);margin-top:2px}

/* — 10. le mode ordinateur — */
#side{display:none}
@media (min-width:1100px){
  body{background:var(--page)}
  #app{max-width:620px}
  .tabs{left:calc(50% - 310px - 230px);transform:none;bottom:auto;top:24px;width:200px;flex-direction:column;align-items:stretch;gap:4px;padding:14px 10px;border-radius:var(--r-lg)}
  .tabs::before{content:"pépin";font:700 var(--fs-2) var(--serif);color:var(--ink);padding:4px 12px 12px}
  .tab{justify-content:flex-start;padding:0 14px}.tab svg{display:block}.tab.on{padding:0 14px}
  .tabfade{display:none}
  .view.has-tabs{padding-bottom:40px}
  .sheet{max-width:560px}
  #side{display:block;position:fixed;top:24px;left:calc(50% + 330px);width:260px;max-height:calc(100vh - 48px);overflow:auto;z-index:2}
  #side .card{margin:12px 0 0}
  .badge.mini{display:flex;gap:12px;align-items:center;width:auto;background:var(--card);border-radius:var(--r-md);padding:10px;box-shadow:var(--e2)}
  .badge.mini svg{border-radius:var(--r-md);background:var(--success-soft)}
  .badge.mini b{display:block;font:700 var(--fs-3) var(--serif)}.badge.mini small{font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
  .sterms{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .sterms button{border:0;border-radius:var(--r-pill);background:var(--card);box-shadow:var(--e1);padding:6px 12px;font:800 var(--fs-caption) var(--sans);color:var(--ink)}
  .skeys{display:flex;flex-direction:column;gap:6px;margin-top:8px;font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
  .skeys kbd{display:inline-block;min-width:44px;margin-right:8px;padding:2px 7px;border-radius:var(--r-xs);background:var(--card);box-shadow:var(--e1);font:800 var(--fs-caption) var(--sans);color:var(--ink);text-align:center}
}

/* — v3 : à toi de faire — */
.bcomp{min-height:96px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:7px;padding:14px;border:2px dashed var(--track);box-shadow:none;background:var(--card)}
.bcomp.sql{background:var(--code-bg);border-color:transparent}
.bcomp.done{border-style:solid;border-color:var(--success)}
.bcomp.sql.done{border-color:var(--success)}
.sheet .bcomp{margin:0;min-height:0}
.bph{font-size:var(--fs-label);font-weight:600;color:var(--muted);align-self:center}
.bpiece,.bchip{border:0;border-radius:var(--r-sm);padding:8px 11px;font:700 var(--fs-label)/1.3 var(--sans);text-align:left;color:var(--ink);animation:pop var(--d-galet) var(--ease-galet)}
.bpiece{background:var(--accent-soft);color:var(--accent-ink)}
.bcomp.sql .bpiece{background:rgba(255,255,255,.1);color:#EAF2E4}
.bchip{background:var(--card);box-shadow:var(--e2);transition:transform var(--d-goutte) var(--ease-goutte)}
.bchip:active{transform:scale(.95)}
.mono{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:var(--fs-caption);font-weight:600}
.bbank{display:flex;flex-wrap:wrap;gap:8px;padding:14px 14px 0}

/* — v3 : données à fouiller — */
.dexp{padding:14px 12px 10px;margin-bottom:12px}
.dxrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:0 2px 8px}
.dxrow span{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-right:2px}
.dxrow button{border:0;border-radius:var(--r-pill);padding:6px 11px;background:var(--soft);font:800 var(--fs-caption) var(--sans);color:var(--ink)}
.dxrow button.on{background:var(--inv-bg);color:var(--inv-fg)}
.dexp .dtw{max-height:250px;overflow:auto;border-radius:var(--r-sm);box-shadow:inset 0 0 0 2px var(--line)}
.dexp .dt{font-size:var(--fs-label)}
.dexp .dt thead th{position:sticky;top:0;background:var(--card);z-index:1;padding:0}
.dexp .dt thead th button{all:unset;cursor:pointer;display:block;padding:9px 6px;text-align:inherit;width:calc(100% - 12px)}
.dexp .dt thead th:first-child button{text-align:left}
.nul{font-style:normal;font-size:var(--fs-over);font-weight:800;color:var(--danger-ink);background:var(--danger-soft);border-radius:var(--r-xs);padding:1px 6px}
.dxstats{display:grid;grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:6px;margin-top:10px}
.dxstats span{background:var(--soft);border-radius:var(--r-sm);padding:7px 8px;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.dxstats b{display:block;font:700 var(--fs-body) var(--serif);letter-spacing:0;text-transform:none;color:var(--ink);font-variant-numeric:tabular-nums}

/* — v3 : histoires vraies, fiches de réunion, récit — */
.vstory{display:flex;align-items:center;gap:12px;background:var(--accent-soft);border-radius:var(--r-md);padding:12px 14px}
.vstory b{font:700 var(--fs-2) var(--serif);color:var(--accent-ink);flex:none}
.vstory span{font-size:var(--fs-caption);font-weight:700;color:var(--muted2);line-height:1.35}
.fask{display:grid;gap:8px;margin-top:14px}
.fask > div{background:rgba(255,253,248,.6);border-radius:var(--r-sm);padding:9px 12px}
[data-dark="1"] .fask > div{background:rgba(0,0,0,.18)}
.fask span{display:block;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.fask p{margin:2px 0 0;font:italic 600 var(--fs-body)/1.35 var(--serif)}
.packbig .fask{margin:10px 14px 0}
.ep{display:flex;align-items:center;gap:10px;margin:0 14px 12px;padding:8px 12px 8px 8px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e1);font-size:var(--fs-label);font-weight:500;color:var(--muted2);line-height:1.35}
.ep b{display:block;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.arc{margin-bottom:12px;background:var(--card);color:var(--ink);box-shadow:var(--e2)}
.arc .ah{display:flex;align-items:center;gap:12px}
.arc .kk{color:var(--accent-ink)}.arc b{display:block;font:700 var(--fs-2) var(--serif);margin-top:2px}
.arc p{margin:10px 0 0;font-size:var(--fs-body);font-weight:500;line-height:1.5;color:var(--muted2)}
.arc .aend{font:italic 600 var(--fs-body)/1.35 var(--serif);color:var(--accent-ink)}

/* — accueil allégé : la prochaine étape — */
.nstep{margin:0 14px 12px;border-radius:var(--r-lg);background:var(--hero);color:var(--on-hero);padding:16px;box-shadow:var(--e3);animation:rise .6s var(--ease-galet) .1s both}
.nstep .nh{display:flex;gap:10px;align-items:center}
.nstep .nh b{font-size:var(--fs-label)}.nstep .nh span{font-size:var(--fs-caption);color:var(--on-hero-muted);font-weight:600}
.kk.onhero{display:block;font-style:normal;color:var(--on-hero-kicker);margin-top:1px}
.nstep .dot{width:9px;height:9px;border-radius:50%;background:var(--abricot);animation:pop 1.6s var(--ease-galet) infinite;flex:none}
.nq{margin:12px 0 0;font:italic 600 var(--fs-3)/1.3 var(--serif)}
.nl{margin-top:14px;border-radius:var(--r-md);background:var(--on-hero-tint);padding:10px 12px;display:flex;gap:12px;align-items:center}
.nl small{display:block;font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--on-hero-muted)}
.nl b{display:block;font:700 var(--fs-3)/1.2 var(--serif);margin-top:2px}
.nth{width:70px;height:50px;border-radius:var(--r-sm);background:#F3E7CF;overflow:hidden;flex:none;display:grid;place-items:center}
.nth svg{width:100%;height:100%;display:block}.nth.ic svg{width:auto;height:auto}
.hrow{display:flex;align-items:center;gap:12px;width:calc(100% - 28px);border:0;text-align:left;padding:12px 14px;margin-bottom:12px;color:var(--ink)}
.hrow .tx{flex:1;min-width:0}.hrow .tx b{display:block;font-size:var(--fs-body)}.hrow .tx small{display:block;font-size:var(--fs-caption);color:var(--muted);font-weight:600;margin-top:2px}
.hrow .bar{display:block;margin-top:6px;height:6px}
.hrow .pt{width:42px;height:42px}

/* — onglet Révise — */
.rhero{position:relative;margin:0 14px 12px;border-radius:var(--r-lg);background:var(--hero);color:var(--on-hero);padding:16px;box-shadow:var(--e3);overflow:hidden;min-height:206px;display:flex;flex-direction:column}
.rhero .rtx{max-width:52%;position:relative;z-index:1}
.rhero .rtx b{display:block;font:700 var(--fs-2)/1.1 var(--serif);margin-top:4px}
.rhero .rtx p{font-size:var(--fs-label);color:var(--on-hero-body);line-height:1.4;margin:6px 0 0}
.rhero .cta{width:auto;align-self:flex-start;margin-top:auto;gap:12px;position:relative;z-index:1}
.rstack{position:absolute;right:12px;top:22px;width:150px;height:150px}
.rstack .pack{position:absolute;width:94px;animation:none}
.rstack .ptitle{font-size:var(--fs-over);padding-bottom:6px}
.rtiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 14px 12px}
.rtiles:has(> :only-child){grid-template-columns:1fr}
.rtile{display:flex;flex-direction:column;align-items:flex-start;gap:2px;border:0;text-align:left;padding:12px 14px;border-radius:var(--r-md);color:var(--ink);margin:0;width:auto}
.rtile b{font-size:var(--fs-label);margin-top:8px}.rtile small{font-size:var(--fs-caption);color:var(--muted);font-weight:600}
.rtile .pt{width:34px;height:34px}
.rtile.hero{background:var(--hero);color:var(--on-hero)}.rtile.hero small{color:var(--on-hero-muted)}
.rfresh{display:flex;flex-direction:column;gap:4px}
.rfresh .eart{border-radius:var(--r-md);overflow:hidden;background:var(--plate);margin-bottom:8px}
.rfresh .eart svg{display:block;width:100%;height:auto}
.rseg{display:flex;gap:6px}
.rseg button{height:28px;padding:0 11px;border-radius:var(--r-pill);border:0;background:var(--card);box-shadow:0 1px 0 var(--line);font:800 var(--fs-caption) var(--sans);color:var(--ink)}
.rseg button.on{background:var(--inv-bg);color:var(--inv-fg)}
.pmem{display:block;padding:0 8px 8px}
.pmb{display:block;height:5px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}
.pmb i{display:block;height:100%;border-radius:var(--r-pill);background:var(--state-fresh)}
.pmem small{display:block;font-size:var(--fs-over);font-weight:800;margin-top:3px;color:var(--state-fresh)}
.pmem.mid .pmb i{background:var(--state-watch)}.pmem.mid small{color:var(--state-watch-ink)}
.pmem.lo .pmb i{background:var(--state-fade)}.pmem.lo small{color:var(--state-fade-ink)}
.packs .pack .ptitle{padding-bottom:6px}

/* révision : la fiche revient dans la réponse */
.memjump .rpk{width:96px;flex:none;animation:pop var(--d-galet) var(--ease-galet) both}
.memjump .rpk .ptitle{font-size:var(--fs-over);padding-bottom:6px}
.memjump .mj{display:flex;align-items:center;gap:8px}
.memjump > div:last-child p{margin:8px 0 0}
.mring.ko{--ring:var(--state-fade)}
.pill.bad,.pill.kop{background:var(--state-fade-soft);color:var(--state-fade-ink)}
.rcal{display:grid;grid-template-columns:repeat(7,1fr);gap:6px;padding:12px}
.rcal div{text-align:center}
.rcal small{display:block;font-size:var(--fs-over);font-weight:800;color:var(--muted);text-transform:capitalize}
.rcal b{display:grid;place-items:center;height:44px;margin-top:4px;border-radius:var(--r-sm);background:var(--soft);color:var(--accent-ink);font-weight:800}
.rcal .has b{background:var(--accent-soft)}
.rcal .today b{background:var(--success);color:var(--on-accent)}
.rtiles .card + .card{margin-top:0}
.rfresh{margin-bottom:12px}
.rfresh .eart{display:grid;place-items:center}
.rfresh .eart svg{max-height:150px;width:auto}
.hrow + .hrow,.nstep + .hrow{margin-top:0}
.rstack{right:6px;top:20px;width:140px}
.rstack .pack{width:86px}
.rstack .pscene{margin:4px}
.mring.okr{--ring:var(--state-fresh)}.mring.lo{--ring:var(--state-fade)}.mring.mid{--ring:var(--state-watch)}.mring.hi{--ring:var(--state-fresh)}
.rfresh .eart{align-self:stretch;width:100%}

/* — 6. boutons : trois rangs, deux tailles — */
.cta.onhero{background:var(--abricot);color:var(--potager)}.cta.onhero i{background:var(--potager);color:var(--abricot)}
.nstep .cta{margin-top:12px}
.cta.m,.ghost.m{height:44px;border-radius:var(--r-sm);font-size:var(--fs-label)}
.cta.m{padding-left:16px}.cta.m i{width:32px;height:32px;border-radius:var(--r-xs)}
.dock .ghost{margin-top:8px}

/* — 7. étiquettes : surtitre (.kk) + pastille (.pill) en quatre tons : neutre, accent, good, bad — */
.pill.accent{background:var(--accent-soft);color:var(--accent-ink)}

/* — 8. portraits : toujours un cercle, cinq tailles (24 · 34 · 42 · 64 · 110), un fond par personnage — */
.av.speaking{box-shadow:0 0 0 2px var(--ring-bg,var(--card)),0 0 0 4px var(--abricot)}
.nstep .av.speaking{--ring-bg:var(--hero)}
.av.away{filter:grayscale(1);opacity:.5}
.av.me,.drow .me svg{border-radius:50%;box-shadow:0 0 0 2px var(--ring-bg,var(--card)),0 0 0 4px var(--ink)}
.duel{--ring-bg:var(--hero)}.duel .drow .me svg{box-shadow:0 0 0 2px var(--hero),0 0 0 4px var(--on-hero)}
.rtile.hero{--ig:var(--on-hero)}

/* — histoire : mission d'abord, puis le débrief — */
.ep.racc{align-items:flex-start;background:var(--kraft-2);box-shadow:none}
.debrief{margin:18px 14px 10px;padding:16px;border-radius:var(--r-lg);background:var(--card);box-shadow:var(--e2)}
.debrief .dbh{display:flex;gap:12px;align-items:center}

/* — leçon-conversation — */
.view.chat{padding-bottom:0}
.chhead{position:sticky;top:0;z-index:5;display:grid;grid-template-columns:auto auto 1fr;grid-template-rows:auto auto;column-gap:10px;row-gap:10px;align-items:center;padding:16px 16px 10px;background:var(--page);border-bottom:2px solid var(--line)}
.chhead .chipc{width:40px;height:40px}
.chavs{display:flex}.chavs .av{box-shadow:0 0 0 2px var(--page)}.chavs .av + .av{margin-left:-9px}
.chti{min-width:0;line-height:1.2}.chti b{display:block;font-size:var(--fs-label);font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.chti small{font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.chbar{grid-column:1/-1;height:4px;border-radius:var(--r-pill);background:var(--track);overflow:hidden}.chbar i{display:block;height:100%;background:var(--ink);border-radius:inherit;transition:width var(--d-brise) var(--ease-brise)}
.chthread{flex:1;padding:6px 12px 22px;display:flex;flex-direction:column;gap:10px}
.chsys{align-self:center;display:inline-flex;align-items:center;gap:6px;font-size:var(--fs-caption);font-weight:700;color:var(--muted);margin:6px 0 0}
.chsys b{color:var(--ink)}
.chm{display:flex;gap:8px;align-items:flex-start}
.chm > .av{margin-top:2px}
.chcol{min-width:0;max-width:86%}
.chb{background:var(--card);border-radius:4px 18px 18px 18px;padding:8px 12px;box-shadow:var(--e1)}
.chn{font-family:var(--sans);font-size:var(--fs-caption);line-height:1.3}.chn b{font-weight:800}.chn span{color:var(--muted);font-weight:600}
.cht{font-size:var(--fs-body);line-height:1.45;font-weight:500;margin-top:1px}
.cht.mono,.chsug .mono{font-family:ui-monospace,Menlo,monospace;font-size:var(--fs-label);font-weight:700}
.chr{display:flex;gap:5px;margin-top:5px}.chr span{border-radius:var(--r-pill);background:var(--soft);padding:2px 8px;font-size:var(--fs-caption);font-weight:700}
.chm.me{justify-content:flex-end}.chm.me .chb{background:var(--accent-soft);border-radius:18px 4px 18px 18px;box-shadow:none}
.chm.me .av.me{box-shadow:none;background:var(--accent-soft)}
.chm.draft .chb{background:transparent;box-shadow:inset 0 0 0 2px var(--accent-soft);border-style:dashed}
.chm.fb .chb{background:var(--success-soft);box-shadow:none}.chm.fb.ko .chb{background:var(--danger-soft)}
.chm.fb .cht{font-weight:600}
.typing{display:flex;gap:4px;align-items:center;height:36px;padding:0 14px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--muted);animation:tdot 1s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tdot{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.chlong{background:var(--card);border-radius:4px 20px 20px 20px;padding:13px 15px;box-shadow:var(--e1);font-size:var(--fs-body);line-height:1.62;font-weight:500}
.chlong small{font-size:var(--fs-caption);color:var(--muted);font-weight:700}
.chdiv{display:flex;align-items:center;gap:10px;margin:12px 4px 2px}.chdiv::before,.chdiv::after{content:"";flex:1;height:2px;background:var(--line)}
.chdiv span{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--success)}
.hole{display:inline-block;min-width:58px;border-radius:var(--r-xs);padding:0 6px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--track);text-align:center}
.hole.cur{box-shadow:inset 0 0 0 2px var(--abricot)}
.hole.ok{background:var(--success-soft);color:var(--success);font-weight:800;box-shadow:none}
.chtray{position:sticky;bottom:0;z-index:4;background:var(--card);border-radius:24px 24px 0 0;box-shadow:0 -10px 28px -16px rgba(30,58,43,.45);padding:12px 14px calc(16px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;gap:10px}
.view.chat > .dock{position:sticky;bottom:0;background:linear-gradient(transparent,var(--page) 30%)}
.chnums{display:grid;grid-template-columns:repeat(11,1fr);gap:4px}
.chnums button{height:42px;border-radius:var(--r-sm);border:0;background:var(--soft);color:var(--ink);font:800 var(--fs-body) var(--sans)}
.chnums button.on{background:var(--abricot);color:var(--on-accent)}
.chnums.wide{gap:6px}.chnums.wide button{height:auto;min-height:44px;padding:8px 6px;font-size:var(--fs-label);line-height:1.15}
.chsug{display:flex;flex-direction:column;gap:7px;align-items:flex-end}
.chsug button{max-width:92%;text-align:left;border:0;border-radius:18px 4px 18px 18px;padding:10px 13px;background:var(--accent-soft);color:var(--ink);font:600 var(--fs-label)/1.4 var(--sans)}
.chsug button:disabled{opacity:.4;text-decoration:line-through}
.chchips{display:flex;flex-wrap:wrap;gap:7px}
.chchips button{border:0;border-radius:var(--r-sm);padding:9px 13px;background:var(--soft);color:var(--ink);font:800 var(--fs-label) var(--sans)}
.chchips button:disabled{opacity:.3}
.chnote{display:flex;gap:8px;align-items:flex-start;margin:0;padding:8px 10px;border-radius:var(--r-sm);background:var(--danger-soft);font-size:var(--fs-label);font-weight:600;line-height:1.4}
.chnote.ok{background:var(--success-soft)}
.chproof{display:flex;gap:7px}
.chproof button{flex:1;display:flex;flex-direction:column;align-items:flex-start;gap:4px;border:0;border-radius:var(--r-sm);padding:9px;background:var(--page);box-shadow:var(--e1);color:var(--ink);text-align:left;font:700 var(--fs-caption)/1.3 var(--sans)}
.chproof button small{font-size:var(--fs-over);font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.1em}
.chproof button:disabled{opacity:.35}
.minib{display:flex;align-items:flex-end;gap:3px}.minib i{width:7px;border-radius:var(--r-xs);background:var(--ink)}.minib i.hi{background:var(--abricot)}
.chatt{margin-top:7px;border-radius:var(--r-sm);background:var(--card);padding:8px 10px;display:flex;align-items:flex-end;gap:10px}
.chatt small{font-size:var(--fs-over);font-weight:800;color:var(--muted);margin-left:auto;align-self:flex-start}
.chatt.res{align-items:stretch}.chatt.res span{flex:1;display:flex;flex-direction:column}.chatt.res small{margin:0}.chatt.res b{font:700 var(--fs-3) var(--serif);white-space:nowrap}
.chgame{background:var(--card);border-radius:var(--r-md);padding:12px 12px 14px;box-shadow:var(--e2);display:flex;flex-direction:column;gap:10px}
.chgame.done{box-shadow:var(--e1);gap:6px}
.chgh{display:flex;align-items:center;gap:8px}.chgh b{font-size:var(--fs-label);font-weight:800;flex:1}
.mj{border-radius:var(--r-pill);background:var(--ink);color:var(--page);font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px}
.okmark{color:var(--success)}
.chgs{margin:-6px 0 0;font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.chsum{margin:0;font-size:var(--fs-label);font-weight:500;line-height:1.45}
.chrows{display:flex;flex-direction:column;gap:5px}
.chrows button{display:flex;align-items:center;gap:10px;border:0;border-radius:var(--r-sm);padding:9px 12px;background:var(--page);color:var(--ink);font:600 var(--fs-label) var(--sans);text-align:left}
.chrows .t{width:52px;color:var(--muted);font-size:var(--fs-caption)}.chrows b{flex:1;font-weight:700}.chrows .v{font-weight:800}
.chrows button.ko{background:var(--danger-soft);opacity:.6}
.kk.sm{font-size:var(--fs-over)}
.chsorted,.chpool{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.chsorted button,.chpool button,.chsorted .slot{height:40px;border-radius:var(--r-sm);border:0;font:800 var(--fs-label) var(--sans);color:var(--ink)}
.chsorted button{background:var(--success-soft)}.chsorted .slot{box-shadow:inset 0 0 0 1.5px var(--track)}
.chsorted.pick button{background:var(--soft);box-shadow:inset 0 0 0 2px var(--abricot)}
.chsorted button.mid{background:var(--pousse)!important;box-shadow:inset 0 0 0 2.5px var(--success)!important}
.chpool button{background:var(--soft)}
.chsorted.mini{grid-template-columns:repeat(10,1fr);gap:3px}.chsorted.mini span{height:26px;border-radius:var(--r-xs);display:grid;place-items:center;background:var(--soft);font-size:var(--fs-caption);font-weight:800}.chsorted.mini span.mid{background:var(--pousse)}
.chdsvg{width:100%;height:auto;display:block}.chdsvg rect{fill:var(--viz-context)}.chdsvg rect.md{fill:var(--viz-good)}.chdsvg rect.hi{fill:#9DB7C9}
.chdsvg .mean{stroke:var(--cink-stats);stroke-width:2.5;stroke-dasharray:6 4}.chdsvg .med{stroke:var(--success);stroke-width:2.5}
.chread{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}.chread span{border-radius:var(--r-sm);padding:7px 10px;font-size:var(--fs-caption);font-weight:700}
.chread b{display:block;font:700 var(--fs-3) var(--serif)}.chread .m{background:var(--tint-stats);color:var(--cink-stats)}.chread .d{background:var(--success-soft);color:var(--success)}
.chread b{color:var(--ink)}
.chdrag{display:flex;align-items:center;gap:10px}.chdrag input{flex:1;accent-color:#6E8DA3}.chdrag b{font-size:var(--fs-label);min-width:52px;text-align:right}
.mx{font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.chsw-wrap{display:flex;justify-content:center;padding:4px 0}
.chsw{position:relative;width:100%;min-height:150px;border-radius:var(--r-md);background:var(--page);box-shadow:var(--e2);padding:16px;touch-action:pan-y;user-select:none;transition:transform var(--d-galet) var(--ease-galet)}
.chsw .q{font:700 var(--fs-2)/1.25 var(--serif);padding-right:60px}.chsw p{margin:8px 0 0;font-size:var(--fs-label);color:var(--muted);font-weight:600}
.chsw .stamp{position:absolute;right:12px;top:12px;font-size:var(--fs-caption);font-weight:800;text-transform:uppercase;letter-spacing:.1em;border-radius:var(--r-xs);padding:2px 8px}
.chsw .stamp:not(:empty){border:2px solid var(--success);color:var(--success)}.chsw.ko{animation:shake .4s}
.chswb{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.chswb button{height:48px;border-radius:var(--r-sm);border:0;font:800 var(--fs-label) var(--sans);background:var(--accent-soft);color:var(--accent-ink)}
.chswb button + button{background:var(--success-soft);color:var(--success)}
.chswd{display:flex;gap:5px;justify-content:center}.chswd i{width:22px;height:5px;border-radius:var(--r-pill);background:var(--track)}.chswd i.ok{background:var(--success)}.chswd i.ko{background:var(--danger)}.chswd i.cur{outline:2px solid var(--ink);outline-offset:1px}
.chfile{display:flex;align-items:center;gap:10px;border:0;border-radius:var(--r-md);background:var(--hero);color:var(--on-hero);padding:12px 14px;text-align:left}
.chfile .ic{width:36px;height:36px;border-radius:var(--r-sm);background:var(--abricot);color:#1E3A2B;display:grid;place-items:center}
.chfile .tx{flex:1}.chfile b{display:block;font-size:var(--fs-label)}.chfile small{font-size:var(--fs-caption);opacity:.75;font-weight:600}
.chfile .go{display:flex;align-items:center;gap:4px;font-weight:800;font-size:var(--fs-label)}
.xsheet{max-height:97dvh;overflow:auto;gap:10px}
.xsh-h{display:flex;align-items:center;justify-content:space-between}.xsh-h b{display:flex;align-items:center;gap:6px;font-size:var(--fs-label)}
.chipc.sm{width:34px;height:34px}
.xgoal{display:flex;flex-direction:column;gap:2px}.xgoal b{font:700 var(--fs-3) var(--serif)}
.fxbar{display:flex;flex-wrap:wrap;align-items:center;gap:3px;min-height:40px;padding:6px 10px;border-radius:var(--r-sm);background:var(--soft);font:700 var(--fs-label) ui-monospace,Menlo,monospace}
.fxbar i{color:var(--accent-ink);margin-right:4px}.fxbar .ph{color:var(--muted);font-family:var(--sans);font-weight:600;font-size:var(--fs-label)}
.fxbar span.fn{color:var(--ink)}.fxbar span.rng{background:var(--success-soft);color:var(--success);border-radius:var(--r-xs);padding:0 4px}.fxbar span.p{color:var(--muted)}
.fxbar .bk{margin-left:auto;border:0;background:none;font-size:var(--fs-3);color:var(--muted)}
.xtw{max-height:46dvh;overflow:auto;border-radius:var(--r-sm);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.xt{width:100%;border-collapse:collapse;font-size:var(--fs-label)}
.xt td{padding:3px 8px;border-top:1px solid var(--line)}.xt .hd td{background:var(--soft);font-size:var(--fs-over);font-weight:800;color:var(--muted);border-top:0}
.xt .rn{width:24px;background:var(--soft);color:var(--muted);font-size:var(--fs-over);font-weight:800;text-align:center}
.xt .nm{text-align:right}.xt .nm.sel{background:var(--success-soft)}.xt .nm.hi{color:var(--accent-ink);font-weight:800}
.xt tr.res td{border-top:2px solid var(--ink)}.xt tr.res + tr.res td{border-top:1px solid var(--line)}
.xt .nm.new{box-shadow:inset 0 0 0 2px var(--abricot);border-radius:var(--r-xs)}
.xbank{display:flex;flex-wrap:wrap;gap:6px}
.tok{border:0;border-radius:var(--r-sm);padding:9px 11px;font:800 var(--fs-label) ui-monospace,Menlo,monospace}
.tok.fn{background:var(--ink);color:var(--page)}.tok.rng{background:var(--success-soft);color:var(--success)}.tok.p{background:var(--soft);color:var(--ink)}
.chkeep{margin:8px 2px 0;padding:6px 0 6px 14px;border-left:4px solid var(--abricot)}
.chkeep p{margin:4px 0 0;font:700 var(--fs-2)/1.3 var(--serif)}
/* liste plate des leçons */
.llist{padding-top:2px;padding-bottom:2px}
.ln{width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;font:800 var(--fs-caption) var(--sans);color:var(--muted);box-shadow:inset 0 0 0 2px var(--track)}
.ln.done{background:var(--success-soft);color:var(--success);box-shadow:none}
.ln.cur{background:var(--ink);color:var(--page);box-shadow:none}
.lrow.next b{color:var(--ink)}

.chviz{margin-top:8px;border-radius:var(--r-sm);background:var(--page);padding:8px 6px 4px}
.chviz svg{width:100%;height:auto;display:block}
.chviz rect{fill:var(--viz-context)}.chviz rect.tail{fill:var(--viz-bad)}
.chviz .med{stroke:var(--success);stroke-width:2.5}.chviz .p90{stroke:var(--danger);stroke-width:2.5}
.chviz text{font:700 var(--fs-over) var(--sans)}.chviz .tm{fill:var(--success)}.chviz .tp{fill:var(--danger-ink)}.chviz .ax{fill:var(--muted);text-anchor:middle}
.chsw-wrap{position:relative;flex-direction:column}
.chsw-wrap .side{display:none}
.chsw-wrap.live{padding-top:24px}
.chsw-wrap.live .side{display:block;position:absolute;top:0;font-size:var(--fs-caption);font-weight:800}
.chsw-wrap .side.l{left:4px;color:var(--accent-ink)}.chsw-wrap .side.r{right:4px;color:var(--success)}
.chsw.to-l{box-shadow:0 0 0 3px var(--abricot),var(--e2)}.chsw.to-r{box-shadow:0 0 0 3px var(--success),var(--e2)}
.swhint{position:absolute;left:0;right:0;bottom:10px;text-align:center;font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.chsw-wrap.hint .chsw{animation:swhint 1.6s 1s 2 var(--ease-brise)}
@keyframes swhint{0%,100%{transform:none}25%{transform:translateX(-26px) rotate(-3deg)}75%{transform:translateX(26px) rotate(3deg)}}

.chnew{display:contents}
.chnew > *{animation:rise var(--d-galet) var(--ease-galet) both}
.chswb button{background:var(--tint-stats);color:var(--cink-stats)}
.chswb button + button{background:var(--tint-sql);color:var(--ink)}
.chsw.to-l{box-shadow:0 0 0 3px var(--cink-stats),var(--e2)}.chsw.to-r{box-shadow:0 0 0 3px var(--ink),var(--e2)}
.chsw{animation:rise var(--d-galet) var(--ease-galet) backwards}
.chdsvg text{font:800 var(--fs-over) var(--sans)}.chdsvg .tmn{fill:var(--accent-ink)}.chdsvg .tmd{fill:var(--success)}.chdsvg .tmx{fill:var(--ink)}

/* messages groupés */
.chm.cont{margin-top:-6px}
.avsp{width:30px;flex:none}
.chm.cont .chb{border-radius:6px 18px 18px 18px}
.chn span{font-weight:600}
/* notions */
.chnot{background:var(--card);border-radius:var(--r-md);padding:14px;box-shadow:0 0 0 2px var(--success),var(--e2)}
.chnot.inth{margin-left:38px}
.chnot .tag{display:inline-block;border-radius:var(--r-pill);background:var(--success-soft);color:var(--success);font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;padding:3px 8px}
.chnot .nm{font:700 var(--fs-1)/1.15 var(--serif);margin-top:6px}
.chnot p{margin:4px 0 0;font-size:var(--fs-label);line-height:1.45;font-weight:500;color:var(--muted2)}
.chnot .nv{margin-top:10px}.chnot .nv svg{width:100%;height:auto;display:block}
.chnot .nf{margin-top:8px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.nrow{display:flex;gap:3px}.nrow span{flex:1;height:26px;border-radius:var(--r-xs);display:grid;place-items:center;font-size:var(--fs-over);font-weight:800;background:var(--soft)}.nrow span.mid{background:var(--pousse);color:#1E3A2B}
.nfx{display:flex;align-items:center;justify-content:center;gap:8px;padding:10px;border-radius:var(--r-sm);background:var(--soft);font:700 var(--fs-3) var(--serif)}
.nlab{display:flex;justify-content:space-between;margin-top:6px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}.nlab b{color:var(--success)}
u[data-n]{text-decoration:none;border-bottom:2px dotted var(--success);cursor:pointer;font-weight:700}
.notsheet{gap:14px}.notsheet .chnot{box-shadow:none;padding:4px 0 0}
/* mini-jeu en scène */
.chstage{position:fixed;left:50%;transform:translateX(-50%);top:0;bottom:0;width:100%;max-width:480px;z-index:8;background:rgba(18,34,26,.97);display:flex;flex-direction:column;padding:0 10px 12px}
.chstage.in{animation:fade var(--d-brise) var(--ease-brise)}
.chstage.in .chst-card{animation:stup var(--d-brise) var(--ease-galet)}
@keyframes stup{from{transform:translateY(60px);opacity:0}to{transform:none;opacity:1}}
.chst-top{display:flex;align-items:center;gap:10px;padding:16px 6px 12px;color:#FBF5EA;font-size:var(--fs-label);font-weight:600;min-height:28px}
.chst-card{flex:1;min-height:0;overflow:auto;background:var(--card);border-radius:var(--r-lg);padding:16px 14px 18px}
.chst-card .chgame{box-shadow:none;padding:0;background:none;gap:10px}
.chst-t{font:700 var(--fs-2)/1.15 var(--serif);margin-top:-2px}
.chst-card .chrows button{padding:12px 14px;font-size:var(--fs-body)}
.chst-card .chsorted button,.chst-card .chpool button,.chst-card .chsorted .slot{height:48px}
.chmin{margin-left:auto;border:0;background:none;font:800 var(--fs-caption) var(--sans);color:var(--muted)}
/* tableur */
.colb{border:0;border-radius:var(--r-xs);padding:3px 8px;font:800 var(--fs-over) var(--sans);background:var(--card);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--track)}
.colb.on{background:var(--success);color:var(--on-accent);box-shadow:none}
.colb.pulse{box-shadow:inset 0 0 0 2px var(--abricot);animation:pulse 1.2s infinite}
@keyframes pulse{50%{box-shadow:inset 0 0 0 2px var(--abricot),0 0 0 5px var(--accent-soft)}}
.xhint{margin:0;font-size:var(--fs-caption);font-weight:700;color:var(--accent-ink)}
.xbank{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.xbank .tok{padding:11px 0;text-align:center}
.fxbar .caret{display:inline-block;width:2px;height:17px;background:var(--abricot);animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* fin épinglée */
.chpin{background:var(--card);border-radius:var(--r-md);padding:14px;box-shadow:var(--e2)}
.chpin .ph{font-size:var(--fs-caption);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink)}
.chpin .pk{margin:8px 0 0;font:700 var(--fs-3)/1.3 var(--serif)}
.pns{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin-top:12px}
.pn{border-radius:var(--r-sm);padding:10px;display:flex;flex-direction:column;gap:2px;min-width:0}
.pn small{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.pn b{font:700 var(--fs-3) var(--serif)}.pn span{font-size:var(--fs-caption);font-weight:600;line-height:1.3;color:var(--muted2)}
.pn.moy{background:var(--tint-stats)}.pn.moy small{color:var(--cink-stats)}
.pn.med{background:var(--success-soft)}.pn.med small{color:var(--success)}
.pn.p90{background:var(--danger-soft)}.pn.p90 small{color:var(--danger-ink)}
.chpin .pr{display:flex;align-items:center;gap:6px;margin-top:12px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}

/* 1 · une couleur par personnage, sur les avatars seulement */
:root{--who-tom-bg:#F3E7CF;--who-tom:#8A5A2B;--who-lea-bg:#FFE6D8;--who-lea:#B14D20;--who-ines-bg:#E3F1DB;--who-ines:#2F6B2A;--who-karim-bg:#FFF1C9;--who-karim:#8A6A10;--who-nadia-bg:#E6ECE4;--who-nadia:#3D5A4A;--who-hugo-bg:#E5EDF4;--who-hugo:#3F5E78;--who-samir-bg:#FFE6D8;--who-samir:#B14D20;--who-bastien-bg:#E3F1DB;--who-bastien:#2F6B2A}
:root[data-dark="1"]{--who-tom:#E8C98F;--who-lea:#FFB08C;--who-ines:#9BD08A;--who-karim:#F0D27A;--who-nadia:#B9CDBF;--who-hugo:#A9C3DA;--who-samir:#FFB08C;--who-bastien:#9BD08A}
.who-tom{--wbg:var(--who-tom-bg);--wink:var(--who-tom)}.who-lea{--wbg:var(--who-lea-bg);--wink:var(--who-lea)}.who-ines{--wbg:var(--who-ines-bg);--wink:var(--who-ines)}
.who-karim{--wbg:var(--who-karim-bg);--wink:var(--who-karim)}.who-nadia{--wbg:var(--who-nadia-bg);--wink:var(--who-nadia)}.who-hugo{--wbg:var(--who-hugo-bg);--wink:var(--who-hugo)}.who-samir{--wbg:var(--who-samir-bg);--wink:var(--who-samir)}.who-bastien{--wbg:var(--who-bastien-bg);--wink:var(--who-bastien)}
.av[class*="who-"]{background:var(--wbg)!important;box-shadow:0 0 0 2px var(--wink)}
.chavs .av[class*="who-"]{box-shadow:0 0 0 2px var(--wink),0 0 0 4px var(--page)}
.chavs .av + .av{margin-left:-6px}
/* 3 · rythme du fil : 3 px même personne, 14 px autre personne, 26 px nouveau moment */
.chthread{gap:14px}
.chm.cont{margin-top:-11px}
.chnot.inth{margin-top:-8px}
.chthread > .chsys,.chnew > .chsys,.chthread > .chgame,.chnew > .chgame,.chthread > .chfile,.chnew > .chfile,.chthread > .chpin,.chnew > .chpin{margin-top:12px}
/* 4 · famille de bulles */
:root{--bub-aside:#EEF3EA;--bub-aside-line:#B9D3AD;--bub-retry:#FFF3E0;--bub-retry-line:var(--abricot)}
:root[data-dark="1"]{--bub-aside:#1C3324;--bub-aside-line:#2F4A38;--bub-retry:#33261C;--bub-retry-line:#FF8A5B}

.chm.fb.ko .chb,.chnote:not(.ok){background:var(--bub-retry);box-shadow:inset 3px 0 0 var(--bub-retry-line)}
/* 6 · tempo */
@keyframes flipin{from{transform:perspective(600px) rotateX(-70deg);opacity:0}to{transform:none;opacity:1}}
@keyframes pop{0%{transform:scale(.9)}60%{transform:scale(1.04)}100%{transform:none}}
.chnew > .chnot{animation:flipin 420ms var(--ease-brise) both;transform-origin:top}
.chnew > .chm.fb.ok .chb{animation:pop var(--d-goutte) var(--ease-goutte) both}
:root[data-calm="1"] *,:root[data-calm="1"] *::before{animation:none!important;transition:none!important}
/* 7 · pictos */
.chfile .ic{background:var(--card)}
.chnot .tag,.mj,.chpin .ph{display:inline-flex;align-items:center;gap:5px}
.mj .ni{width:16px;height:16px}
.chproof small{display:flex;align-items:center;gap:4px}
.fxbar i .ni{display:block}
/* 8 · graphiques */
.chdsvg .tmn{fill:var(--cink-stats)}.chdsvg .tmd{fill:var(--success)}
.chviz{cursor:zoom-in}
.vizsheet .chviz.big{cursor:default;padding:14px 6px}
/* 9 · jetons de formule */
.ft{font-family:ui-monospace,Menlo,monospace;font-weight:800}
.ft.fn{color:var(--ink)}.ft.rng{background:var(--success-soft);color:var(--success);border-radius:var(--r-xs);padding:0 4px}.ft.val{background:var(--accent-soft);color:var(--accent-ink);border-radius:var(--r-xs);padding:0 3px}.ft.p{color:var(--muted);font-weight:600}
.chsug .mono .ft.fn,.chm.me .ft.fn{color:var(--ink)}
.tok.fn{background:var(--ink);color:var(--page)}.tok.p{background:var(--soft);color:var(--muted)}
/* 10 · confort de lecture */
:root{--chat-fs:15px}:root[data-fs="s"]{--chat-fs:13.5px}:root[data-fs="l"]{--chat-fs:18px}
.cht,.chlong{font-size:var(--chat-fs)}
.chnot p,.chnote,.chsum{font-size:calc(var(--chat-fs) - 1.5px)}
.chnot .nm{font-size:calc(var(--chat-fs) + 11px)}
.seg.fsz .fs{font-size:var(--fs-label)}.seg.fsz .fm{font-size:var(--fs-body)}.seg.fsz .fl{font-size:var(--fs-2)}
.tgl{width:42px;height:24px;border-radius:var(--r-pill);background:var(--track);position:relative;flex:none;transition:background var(--d-goutte)}
.tgl i{position:absolute;left:3px;top:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform var(--d-goutte) var(--ease-goutte)}
.tgl.on{background:var(--success)}.tgl.on i{transform:translateX(18px)}
.mj .ni .ig{fill:var(--page)}.mj .ni .ip{fill:var(--pousse)}

/* tableau croisé */
.pvdims{display:flex;flex-wrap:wrap;gap:6px}
.pvdims button{border:0;border-radius:var(--r-sm);padding:9px 12px;font:800 var(--fs-label) var(--sans);background:var(--soft);color:var(--ink)}
.pvdims button.on{background:var(--ink);color:var(--page)}
.pvt{border-radius:var(--r-sm);box-shadow:inset 0 0 0 1.5px var(--line);overflow:hidden}
.pvt table{width:100%;border-collapse:collapse;font-size:var(--fs-label)}
.pvt th,.pvt td{padding:8px 10px;text-align:right;border-top:1px solid var(--line)}
.pvt tr:first-child th,.pvt tr:first-child td{border-top:0;background:var(--soft);font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.pvt th:first-child,.pvt tr th{text-align:left}
.pvt td{font-weight:800}.pvt td small{display:block;font-size:var(--fs-over);font-weight:600;color:var(--muted)}
.pvempty{margin:0;font-size:var(--fs-label);font-weight:600;color:var(--muted2)}
/* droite de tendance */
.trsvg{width:100%;height:auto;display:block}
.trsvg .ax{stroke:var(--track);stroke-width:1.5}.trsvg .pt{fill:var(--ink)}
.trsvg .tl{stroke:var(--abricot);stroke-width:3;stroke-linecap:round}.trsvg .tl.ok{stroke:var(--success)}
.trsvg .lb{font:700 var(--fs-over) var(--sans);fill:var(--muted)}

/* rythme du fil, plus net : 4 px même personne, 18 px autre personne, 32 px nouveau moment */
.chthread{gap:18px}
.chm.cont{margin-top:-14px}
.chnot.inth{margin-top:-10px}
.chthread > .chsys,.chnew > .chsys,.chthread > .chgame,.chnew > .chgame,.chthread > .chfile,.chnew > .chfile,.chthread > .chpin,.chnew > .chpin,.chthread > .chlaunch,.chnew > .chlaunch{margin-top:14px}
.chm.fb.ok .chb{background:var(--card);box-shadow:var(--e1)}
.chnote.ok{background:var(--soft)}
/* le mini-jeu s'annonce */
.chlaunch{background:var(--card);border-radius:var(--r-md);padding:14px;box-shadow:0 0 0 2px var(--ink),var(--e2);display:flex;flex-direction:column;gap:8px}
.chlaunch .lt{font:700 var(--fs-2)/1.15 var(--serif)}
.chlaunch .chgs{margin:-4px 0 4px}
/* glisser la carte */
.chsw{touch-action:none;will-change:transform}
.pn b{overflow-wrap:anywhere}

/* tirage au sort */
.shw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.shg{border-radius:var(--r-sm);background:var(--page);padding:10px}
.shl{display:flex;justify-content:space-between;font-size:var(--fs-caption);font-weight:800;color:var(--muted)}.shl b{color:var(--success)}
.shd{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.shd i,.shleg i{display:block;aspect-ratio:1;border-radius:50%;background:var(--viz-context)}
.shd i.f,.shleg i.f{background:var(--success)}.shd i.e{background:none;box-shadow:inset 0 0 0 1.5px var(--track)}
.shleg{display:flex;flex-wrap:wrap;gap:12px;align-items:center;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.shleg span{display:flex;align-items:center;gap:5px}.shleg i{width:10px;height:10px}
.shc{margin-left:auto;color:var(--ink)}
/* test A/A */
.aat{display:flex;flex-direction:column;gap:6px}
.aah,.aar{display:grid;grid-template-columns:52px 1fr 1fr 44px;gap:8px;align-items:center;font-size:var(--fs-caption)}
.aah b{font-weight:800;color:var(--muted);text-align:center}.aah b:last-child{text-align:right}
.aar > span:first-child{font-weight:700;color:var(--muted)}
.aar .bar{position:relative;height:22px;border-radius:var(--r-xs);background:var(--soft);overflow:hidden}
.aar .bar i{position:absolute;inset:0 auto 0 0;background:var(--viz-context)}
.aar .bar em{position:relative;font-style:normal;font-weight:800;font-size:var(--fs-caption);padding-left:6px;line-height:22px}
.aar > b{text-align:right;font-weight:800}.aar > b.big{color:var(--accent-ink)}
.chnew .aar:last-child,.aar:last-child{animation:rise var(--d-galet) var(--ease-galet) both}
/* taille d'échantillon */
.nssvg{width:100%;height:auto;display:block}
.nssvg rect.a{fill:var(--viz-context)}.nssvg rect.b{fill:var(--accent-soft);stroke:var(--abricot);stroke-width:1.5}.nssvg rect.b.sep{fill:var(--success-soft);stroke:var(--success)}
.nssvg .dot{fill:var(--ink)}.nssvg .lb{font:700 var(--fs-over) var(--sans);fill:var(--muted)}.nssvg .ax{font:700 var(--fs-over) var(--sans);fill:var(--muted)}
.nsstate{margin-top:6px;font-size:var(--fs-caption);font-weight:800;color:var(--accent-ink)}.nsstate.ok{color:var(--success)}

/* machine à hasard */
.simc{font-size:var(--fs-caption);font-weight:700;color:var(--muted)}.simc b{font:700 var(--fs-2) var(--serif);color:var(--ink);margin-right:4px}
.simsvg{width:100%;height:auto;display:block}
.simsvg rect{fill:var(--viz-context);transition:height var(--d-brise) var(--ease-brise),y var(--d-brise) var(--ease-brise)}.simsvg rect.tail{fill:var(--abricot)}
.simsvg .obs{stroke:var(--accent-ink);stroke-width:2;stroke-dasharray:4 3}.simsvg .ol{font:800 var(--fs-over) var(--sans);fill:var(--accent-ink)}.simsvg .ax{font:700 var(--fs-over) var(--sans);fill:var(--muted)}
.simx{text-align:center;font-size:var(--fs-caption);font-weight:700;color:var(--muted);margin-top:-4px}
.simt{text-align:center;font-size:var(--fs-label);font-weight:700}.simt b{color:var(--accent-ink)}
/* signal sur bruit */
.snrow{display:flex;align-items:stretch;gap:6px}
.snrow > span{flex:1;border-radius:var(--r-sm);background:var(--page);padding:8px;text-align:center;font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.snrow > span b{display:block;font:700 var(--fs-3) var(--serif);color:var(--ink);margin-top:2px}
.snrow > span.sdiv{flex:none;background:none;padding:0;display:grid;place-items:center;font:700 var(--fs-2) var(--serif);color:var(--muted)}
.snrow > span.ok{background:var(--success-soft);color:var(--success)}
.snsvg{width:100%;height:auto;display:block;margin-top:6px}
.snsvg .zone{fill:var(--success-soft)}.snsvg .trk{fill:var(--track)}.snsvg .val{fill:var(--accent-ink)}.snsvg .val.ok{fill:var(--success)}
.snsvg .knob{fill:var(--card);stroke:var(--accent-ink);stroke-width:2.5}.snsvg .knob.ok{stroke:var(--success)}
.snsvg .ax{font:700 var(--fs-over) var(--sans);fill:var(--muted)}.snsvg .zl{font:800 var(--fs-over) var(--sans);fill:var(--success)}
/* puissance */
.pwz{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pwz button{border:0;border-radius:var(--r-sm);padding:9px 4px;background:var(--soft);color:var(--ink);font:800 var(--fs-body) var(--sans)}
.pwz button small{display:block;font-size:var(--fs-over);font-weight:700;color:var(--muted);margin-top:2px}
.pwz button.on{background:var(--ink);color:var(--page)}.pwz button.on small{color:var(--page);opacity:.75}
.pwg{display:grid;grid-template-columns:repeat(10,1fr);gap:5px}
.pwg i{aspect-ratio:1;border-radius:var(--r-xs);background:var(--soft);box-shadow:inset 0 0 0 1.5px var(--track)}
.pwg i.y{background:var(--success);box-shadow:none;animation:pop var(--d-goutte) var(--ease-goutte) both}.pwg i.n{background:var(--viz-context);box-shadow:none}
.pwl{font-size:var(--fs-label);font-weight:600;color:var(--muted2)}.pwl b{color:var(--ink)}

/* triage des métriques */
.chswb.tg{grid-template-columns:repeat(3,1fr)}
.chswb.tg button{font-size:var(--fs-caption);padding-inline:6px}
.tgsum{display:flex;flex-direction:column;gap:6px}
.tgsum span{display:flex;gap:10px;align-items:baseline;font-size:var(--fs-caption)}
.tgsum small{flex:0 0 78px;font-weight:800;color:var(--muted)}.tgsum b{font-weight:700}
/* durée */
.dub{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;height:74px;margin-top:8px}
.dub div{position:relative;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;border-radius:var(--r-sm);background:var(--soft);overflow:hidden}
.dub i{display:block;width:100%;background:var(--viz-context);transition:height var(--d-galet) var(--ease-galet)}
.dub div.on i{background:var(--success)}
.dub span{position:absolute;top:6px;font-size:var(--fs-caption);font-weight:800}
.chrows.du button{justify-content:flex-start}
/* plan de test */
.chdoc{margin:0 auto;width:min(100%,360px);background:var(--card);border-radius:var(--r-md);box-shadow:inset 0 0 0 1.5px var(--track);padding:14px 16px;display:flex;flex-direction:column;gap:8px}
.chdoc .dh{display:flex;gap:8px;align-items:center;font-size:var(--fs-body);padding-bottom:6px;border-bottom:1.5px dashed var(--track)}
.chdoc .dr{display:grid;grid-template-columns:96px 1fr;gap:10px;font-size:var(--fs-caption);line-height:1.35}
.chdoc .dr small{font-weight:800;color:var(--muted)}.chdoc .dr span{font-weight:600}
.chdoc .df{font-size:var(--fs-caption);font-weight:700;color:var(--muted);text-align:right}
.chrows button.ok{background:var(--success-soft);opacity:1}
.chsw.tg{min-height:112px}
.nhyp{display:block;padding:2px 4px;font:500 var(--fs-label)/1.45 var(--sans);color:var(--ink);text-align:left}
.nhyp b{font-weight:800;color:var(--success)}
/* sections de leçons */
.secs{display:flex;flex-direction:column;gap:10px}
.sec{overflow:hidden}
.sech{display:flex;align-items:center;gap:12px;width:100%;border:0;background:none;color:var(--ink);padding:14px 16px;text-align:left;font:inherit;cursor:pointer}
.sech .tx{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.sech .tx b{font:700 var(--fs-3)/1.2 var(--serif)}
.sech .tx small{font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.sech .chev{display:grid;color:var(--muted);transition:transform var(--d-galet) var(--ease-galet)}
.sec.open .sech .chev{transform:rotate(180deg)}
.secring{position:relative;width:40px;height:40px;flex:none;display:grid;place-items:center}
.secring svg{position:absolute;inset:0;transform:rotate(-90deg)}
.secring circle{fill:none;stroke-width:3.5}
.secring .tr{stroke:var(--track)}.secring .pg{stroke:var(--success);stroke-linecap:round}
.secring b{position:relative;font:800 var(--fs-label) var(--sans)}
.sec.soon .sech{opacity:.7}
.secb{border-top:1.5px solid var(--track);padding:2px 0;animation:rise var(--d-galet) var(--ease-galet) both}
.secb .lrow + .lrow{border-top:1.5px solid var(--track)}
.lrow.soonr{opacity:.55}
.soonl{font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
[data-calm] .secb{animation:none}

/* seau de cohortes : une couleur fixe par cohorte */
.stsvg{width:100%;height:auto;display:block}
.stsvg .c0{fill:var(--ink)}.stsvg .c1{fill:var(--success)}.stsvg .c2{fill:#8FC27A}.stsvg .c3{fill:#9DB7C9}.stsvg .c4{fill:#E8C66A}.stsvg .c5{fill:var(--abricot)}
.stsvg .fl{opacity:.18}
.stsvg .tt{font:800 var(--fs-over) var(--sans);fill:var(--ink)}.stsvg .ax{font:700 var(--fs-over) var(--sans);fill:var(--muted)}
.stleg{display:flex;flex-wrap:wrap;gap:6px 12px;margin:8px 0 4px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.stleg span{display:flex;align-items:center;gap:5px}.stleg i{width:10px;height:10px;border-radius:var(--r-xs)}
.stleg .c0{background:var(--ink)}.stleg .c1{background:var(--success)}.stleg .c2{background:#8FC27A}.stleg .c3{background:#9DB7C9}.stleg .c4{background:#E8C66A}.stleg .c5{background:var(--abricot)}
.stl{display:flex;flex-direction:column;gap:2px;font-size:var(--fs-caption);font-weight:700;color:var(--muted);margin:4px 0 10px}
.stl b{color:var(--ink);font-weight:800}
/* tableau de cohortes */
.cgq{display:flex;flex-direction:column;gap:3px;margin-bottom:10px}.cgq b{font-size:var(--fs-label);line-height:1.35}
.cgw{overflow-x:auto;margin:0 -4px 10px}
.cgt{border-collapse:separate;border-spacing:3px;width:100%;table-layout:fixed}
.cgt th{font:800 var(--fs-over) var(--sans);color:var(--muted);text-align:center;padding:2px 0}
.cgt tr th:first-child{text-align:right;padding-right:4px;width:38px}
.cgt td{padding:0}.cgt td.e{background:none}
.cgt button{width:100%;height:30px;border:0;border-radius:var(--r-xs);font:800 var(--fs-caption) var(--sans);font-variant-numeric:tabular-nums;padding:0;transition:transform 120ms}
.cgt button:active{transform:scale(.94)}
.cgt button.m0{color:var(--muted)!important;font-weight:700}
.cgt button.ko{box-shadow:inset 0 0 0 2px var(--danger);animation:shake 300ms}
.cgt button.hit{box-shadow:inset 0 0 0 2.5px var(--ink),0 0 0 2px var(--page);transform:scale(1.06)}
.cgt button.dg{background:var(--abricot)!important;color:var(--page)!important}
/* lecture ligne / colonne / diagonale */
.cohlr{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;text-align:center}
.cohlr b{font-size:var(--fs-caption)}.cohlr small{font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.cohlr svg{width:100%;height:auto;display:block}

/* carte de rafale avec mini graphique */
.swv{margin-top:8px}.swv svg{width:100%;max-width:220px;height:auto;display:block}
/* courbe de rétention */
.cvsvg,.pbsvg{width:100%;height:auto;display:block}
.cvsvg .gr,.pbsvg .gr{stroke:var(--track);stroke-width:1}
.cvsvg .ax,.pbsvg .ax{font:700 var(--fs-over) var(--sans);fill:var(--muted)}
.cvsvg .mn{fill:none;stroke:var(--success);stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.cvsvg .ot{fill:none;stroke:var(--abricot);stroke-width:3;stroke-linejoin:round;opacity:.9}
.cvsvg .dt{fill:var(--success)}
.cvsvg .gs{stroke:var(--ink);stroke-width:1.8;stroke-dasharray:5 4}
.cvsvg .gsl{font:800 var(--fs-over) var(--sans);fill:var(--ink)}
.cvsvg .ol{font:800 var(--fs-over) var(--sans);fill:var(--accent-ink)}.cvsvg .ml{font:800 var(--fs-over) var(--sans);fill:var(--success)}
/* mélange */
.mxw{display:flex;flex-direction:column;gap:7px}
.mxr{display:grid;grid-template-columns:96px 1fr 40px;gap:8px;align-items:center;font-size:var(--fs-caption);font-weight:700}
.mxr i{height:16px;border-radius:var(--r-xs);background:var(--soft);overflow:hidden}
.mxr i b{display:block;height:100%;border-radius:var(--r-xs);transition:width 120ms}
.mxr b.a{background:var(--abricot)}.mxr b.b{background:var(--success)}.mxr b.all{background:var(--ink)}
.mxr em{font-style:normal;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.mxsep{height:1.5px;background:var(--track);margin:2px 0}
.mxmix{height:10px;border-radius:var(--r-pill);background:var(--success);overflow:hidden;margin-top:12px}.mxmix i{display:block;height:100%;background:var(--abricot)}
.mxleg{display:flex;justify-content:space-between;font-size:var(--fs-caption);font-weight:700;color:var(--muted);margin:4px 0 2px}
/* remboursement */
.pbsvg .cost{stroke-width:1.6;stroke-dasharray:5 4}
.pbsvg .cl{font:800 var(--fs-over) var(--sans)}
.pbsvg .pl{fill:none;stroke-width:3;stroke-linejoin:round;stroke-linecap:round}
.pbsvg .hit{fill:var(--card);stroke-width:3}
.pbsvg .vl{font:800 var(--fs-over) var(--sans)}
.pbleg{display:flex;flex-direction:column;gap:3px;margin:6px 0 10px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.pbleg span{display:flex;align-items:center;gap:6px}.pbleg i{width:10px;height:10px;border-radius:var(--r-xs)}.pbleg b{color:var(--success)}

.chswb.tg.four{grid-template-columns:1fr 1fr}
.kpic{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.kpic div{background:var(--card);border-radius:var(--r-sm);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.kpic b{font-size:var(--fs-caption);color:var(--success)}.kpic small{font-size:var(--fs-caption);font-weight:600;color:var(--muted);line-height:1.3}
/* promesse */
.prr{margin-bottom:8px}.prh{display:flex;justify-content:space-between;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.prh b{color:var(--ink)}.prh span.ok{color:var(--success);font-weight:800}
.prsvg{width:100%;height:auto;display:block}.prsvg .late{fill:var(--danger-soft);opacity:.7}.prsvg .pl{stroke:var(--ink);stroke-width:2}
.prax{display:flex;justify-content:space-between;font-size:var(--fs-over);font-weight:700;color:var(--muted);padding:0 4px;margin-bottom:4px}
/* yoyo */
.yoyo{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;height:170px;align-items:end;margin-bottom:12px}
.yb{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:4px}
.yb i{display:block;width:70%;border-radius:10px 10px 4px 4px;background:var(--viz-context);transition:height var(--d-galet) var(--ease-galet);animation:rise var(--d-galet) var(--ease-galet) both}
.yb.now i{background:var(--abricot)}.yb.ghost i{height:30%;background:none;box-shadow:inset 0 0 0 2px var(--track);animation:none}
.yb em{font-style:normal;font:800 var(--fs-label) var(--sans)}.yb small{font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
/* classement */
.rkt{display:flex;flex-direction:column;gap:6px}
.rkr{display:grid;grid-template-columns:22px 92px 1fr 52px;gap:8px;align-items:center;border:0;border-radius:var(--r-sm);background:var(--page);padding:8px 10px;color:var(--ink);font:inherit;text-align:left;transition:transform var(--d-galet) var(--ease-galet)}
.rkr .rkn{font:800 var(--fs-caption) var(--sans);color:var(--muted)}
.rkr .rkl{display:flex;flex-direction:column;font-weight:800;font-size:var(--fs-label)}.rkr .rkl small{font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.rkr .rkb{height:12px;border-radius:var(--r-xs);background:var(--soft);overflow:hidden}.rkr .rkb i{display:block;height:100%;background:var(--abricot);border-radius:var(--r-xs);transition:width var(--d-galet) var(--ease-galet)}
.rkr em{font-style:normal;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}
.rkr.ko{box-shadow:inset 0 0 0 2px var(--danger);animation:shake 300ms}.rkr.hit{box-shadow:inset 0 0 0 2.5px var(--success)}
/* petits nombres */
.snw{display:flex;flex-direction:column;gap:6px}
.snl{display:grid;grid-template-columns:70px 1fr;gap:6px;align-items:center}
.snl span{display:flex;flex-direction:column;font-size:var(--fs-caption);font-weight:800}.snl small{font-size:var(--fs-over);font-weight:600;color:var(--muted)}
.snsvg{width:100%;height:auto;display:block;background:var(--soft);border-radius:var(--r-xs)}
.snsvg .tr{stroke:var(--ink);stroke-width:1.5;stroke-dasharray:3 2}
.snsvg circle{fill:var(--viz-context);stroke:var(--card);stroke-width:1}.snsvg circle.last{fill:var(--abricot)}
.snax{display:flex;justify-content:space-between;margin-left:76px;font-size:var(--fs-over);font-weight:700;color:var(--muted)}

/* visualiser */
.vzq{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.vzq div{background:var(--card);border-radius:var(--r-sm);padding:8px 10px;display:flex;flex-direction:column;gap:2px}
.vzq b{font-size:var(--fs-caption);color:var(--success)}.vzq small{font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.anw{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.anp{background:var(--page);border-radius:var(--r-sm);padding:8px 10px;min-height:118px;display:flex;flex-direction:column;gap:4px}
.anp b{font-size:var(--fs-caption);font-weight:800}
.anp svg{width:100%;height:auto;display:block;animation:rise var(--d-galet) var(--ease-galet) both}
.anp svg circle{fill:var(--success)}.anp svg .ax{stroke:var(--track);stroke-width:1.5}.anp svg .fit{stroke:var(--abricot);stroke-width:1.5;stroke-dasharray:3 3}
.ans{font-size:var(--fs-caption);font-weight:600;color:var(--muted);line-height:1.6}.ans em{font-style:normal;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums}
.axsvg,.dcsvg{width:100%;height:auto;display:block}
.axsvg .ax,.dcsvg .ax{stroke:var(--ink);stroke-width:1.5}
.axsvg .al,.dcsvg .al{font:700 var(--fs-over) var(--sans);fill:var(--muted)}
.axsvg rect.a{fill:var(--viz-context)}.axsvg rect.b{fill:var(--abricot)}
.axsvg .vl,.dcsvg .vl{font:800 var(--fs-caption) var(--sans);fill:var(--ink)}.axsvg .vl.w{fill:var(--page)}.dcsvg .vl.hi{fill:var(--accent-ink)}
.axr{font-size:var(--fs-caption);font-weight:600;color:var(--muted);margin:4px 0 8px}.axr b{color:var(--ink)}
.dcl{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0}
.dcl button{border:0;border-radius:var(--r-pill);padding:8px 12px;background:var(--accent-soft);color:var(--accent-ink);font:800 var(--fs-caption) var(--sans)}
.dcl button.on{background:var(--success-soft);color:var(--success)}
.ordg{display:flex;flex-direction:column;gap:6px;margin-bottom:8px}
.ordc{display:flex;gap:10px;align-items:flex-start;background:var(--success-soft);border-radius:var(--r-sm);padding:9px 12px;font-size:var(--fs-caption);font-weight:600;animation:rise var(--d-galet) var(--ease-galet) both}
.ordc b{width:22px;height:22px;border-radius:50%;background:var(--success);color:var(--page);display:grid;place-items:center;flex:none;font-size:var(--fs-caption)}
.ordc em{display:block;font-style:normal;font-weight:800;color:var(--success)}
.ordp{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ordp button{border:0;border-radius:var(--r-sm);padding:10px 12px;background:var(--page);color:var(--ink);font:600 var(--fs-label) var(--sans);text-align:left;line-height:1.35}
.ordp button.ko{box-shadow:inset 0 0 0 2px var(--danger);animation:shake 300ms}

/* « pourquoi ? » sous les messages de Tom */
/* fil « pourquoi ? » : replié sous le message, indenté quand il s'ouvre */
.chwhy{margin:-6px 0 0 42px;display:flex;flex-direction:column;align-items:flex-start;gap:4px}.chwhy:empty{display:none}
.whyh{display:inline-flex;align-items:center;gap:6px;border:0;background:none;padding:4px 0;color:var(--accent-ink,#B14D20);font:800 var(--fs-caption) var(--sans);cursor:pointer}
.whyh .chface{flex:none}
.whyh i{font-style:normal;color:var(--muted);font-weight:700;transition:transform .2s}
.whyh i.up{transform:rotate(90deg)}
.chwhy .wbody{align-self:stretch;margin:0 0 0 4px;border-left:2.5px solid var(--track);padding:2px 0 2px 12px;display:flex;flex-direction:column;gap:6px}
.wq{display:flex;justify-content:flex-end}
.wq span{border-radius:14px 14px 4px 14px;padding:6px 10px;background:var(--bub-retry,#FFE6D8);font:700 calc(var(--chat-fs,15px) - 2px) var(--sans);color:var(--ink)}
.wa{display:flex;gap:6px;align-items:flex-start}
.wa p{margin:0;background:var(--card);box-shadow:0 1px 0 var(--track);border-radius:4px 14px 14px 14px;padding:7px 10px;font:500 calc(var(--chat-fs,15px) - 2px)/1.4 var(--sans);color:var(--ink)}
.wc{display:flex;flex-wrap:wrap;gap:6px}
.wc button,.wclose{border:0;border-radius:var(--r-pill);padding:6px 11px;background:var(--card);box-shadow:inset 0 0 0 1.5px var(--track);color:var(--ink);font:800 var(--fs-caption) var(--sans);cursor:pointer}
.wc button:active,.wclose:active{transform:scale(.96)}
/* canal #data */
.feed .top{align-items:flex-end}
.fcount{margin-left:auto;align-self:center;border-radius:var(--r-pill);background:var(--accent-soft);color:var(--accent-ink);font:800 var(--fs-caption) var(--sans);padding:4px 10px}
.fpin{display:flex;gap:10px;background:var(--card);border-radius:var(--r-md);padding:12px 14px;box-shadow:inset 3px 0 0 var(--success)}
.fpin b,.fph b{font-size:var(--fs-label)}.fpin span,.fph span{font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.fpin p{margin:3px 0 0;font-size:var(--fs-label);line-height:1.45;font-weight:500}
.fpost{margin-top:14px;background:var(--card);border-radius:var(--r-md);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.fpost.new{box-shadow:inset 0 0 0 2px var(--accent-soft)}
.fph{display:flex;align-items:center;gap:10px}.fph > div{flex:1;line-height:1.25}
.fnew{font-style:normal;font:800 var(--fs-over) var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--r-pill);padding:3px 8px}
.fpt{font-size:var(--chat-fs,16px);line-height:1.45;font-weight:500}
.fpv{margin:0}
.fpl{display:flex;align-items:center;gap:5px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.fopts{display:flex;flex-direction:column;align-items:flex-end;gap:6px;margin-top:2px}
.fopts button{border:0;border-radius:16px 16px 4px 16px;padding:9px 13px;background:var(--accent-soft);color:var(--ink);font:700 var(--fs-label) var(--sans);text-align:left;max-width:88%;cursor:pointer}
.fopts button:active{transform:scale(.97)}
.fme{display:flex;justify-content:flex-end;align-items:flex-end;gap:6px}
.fme span{border-radius:16px 16px 4px 16px;padding:8px 12px;background:var(--accent-soft);font-weight:700;font-size:var(--fs-label);max-width:84%}
.ftom{display:flex;gap:8px;align-items:flex-start;border-radius:var(--r-sm);padding:9px 11px;font-size:var(--fs-label);font-weight:600;line-height:1.4;background:var(--success-soft)}
.ftom.ko{background:var(--bub-retry,var(--accent-soft))}
.fsep{display:flex;align-items:center;gap:10px;margin:18px 4px 0;font:800 var(--fs-caption) var(--sans);color:var(--accent-ink)}
.fsep::before,.fsep::after{content:"";flex:1;height:1.5px;background:var(--accent-soft)}
.fcalm{display:flex;gap:10px;align-items:center;margin-top:14px;padding:12px 14px;border-radius:var(--r-md);background:var(--soft);font-size:var(--fs-label);font-weight:600;color:var(--muted)}
.fav{display:flex;flex:none}.fav .av + .av{margin-left:-10px;box-shadow:0 0 0 2px var(--card)}
.tab{position:relative}.tbadge{position:absolute;top:-4px;right:calc(50% - 26px);min-width:18px;height:18px;border-radius:var(--r-pill);background:var(--abricot);color:var(--on-accent);font:800 var(--fs-caption)/18px var(--sans);font-style:normal;text-align:center;padding:0 4px}

/* entonnoir et seuil d'activation */
.fnt{display:flex;flex-direction:column;gap:4px}
.fns{display:grid;grid-template-columns:104px 1fr 54px;gap:8px;align-items:center;font-size:var(--fs-caption);font-weight:800}
.fnl{line-height:1.2}
.fnb{height:18px;border-radius:var(--r-xs);background:var(--soft);overflow:hidden}.fnb i{display:block;height:100%;background:var(--success);border-radius:var(--r-xs)}
.fns em{font-style:normal;text-align:right;font-variant-numeric:tabular-nums}
.fng{align-self:flex-start;margin-left:112px;border:0;border-radius:var(--r-pill);padding:4px 10px;background:var(--page);box-shadow:inset 0 0 0 1.5px var(--track);color:var(--muted);font:700 var(--fs-caption) var(--sans);cursor:pointer}
.fng b{color:var(--ink);font-weight:800}
.fng.ko{box-shadow:inset 0 0 0 2px var(--danger);animation:shake 300ms}.fng.hit{box-shadow:inset 0 0 0 2.5px var(--success);background:var(--success-soft)}.fng.hit b{color:var(--success)}
.acgap{font-size:var(--fs-caption);font-weight:700;color:var(--muted);margin:-2px 0 0 104px}.acgap b{color:var(--ink)}

/* repérer le message qui cloche dans #data */
.spw{display:flex;flex-direction:column;gap:8px}
.sph{font:700 var(--fs-3) var(--serif);color:var(--ink)}
.spp{display:flex;gap:10px;align-items:flex-start;text-align:left;border:0;border-radius:var(--r-sm);background:var(--page);padding:10px 12px;color:var(--ink);font:inherit;cursor:pointer;transition:transform var(--d-galet) var(--ease-galet)}
.spp > span:last-child{display:flex;flex-direction:column;gap:2px;min-width:0}
.spp b{font-size:var(--fs-label)}.spp em{font-style:normal;font-size:var(--fs-label);line-height:1.4;font-weight:500}
.spp:active{transform:scale(.98)}
.spp.ko{box-shadow:inset 0 0 0 2px var(--danger);animation:shake 300ms}.spp.hit{box-shadow:inset 0 0 0 2.5px var(--success);background:var(--success-soft)}

/* le pari révélé */
.rvl{padding:4px 2px 2px}
.chviz .rvl .rvs,.rvl .rvs{display:flex;flex-direction:row;justify-content:space-between;font:800 var(--fs-caption) var(--sans);color:var(--muted)}
.rvt{position:relative;height:34px;margin-top:4px}
.rvt::before{content:"";position:absolute;left:0;right:0;top:20px;height:8px;border-radius:var(--r-xs);background:var(--track)}
.rvt .fill{position:absolute;left:0;top:20px;height:8px;border-radius:var(--r-xs);background:linear-gradient(90deg,#8FC27A,var(--success))}
.rvt .me{position:absolute;top:0;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center}
.rvt .me em{font:800 var(--fs-over) var(--sans);font-style:normal;color:var(--accent-ink);white-space:nowrap}
.rvt .me::after{content:"";width:14px;height:14px;border-radius:50%;background:var(--abricot);box-shadow:0 0 0 3px var(--card);margin-top:1px}
.rvt .re{position:absolute;top:15px;width:4px;height:18px;margin-left:-2px;border-radius:var(--r-xs);background:var(--success)}
.rvn{display:flex;align-items:baseline;gap:6px;margin-top:2px}
.rvn strong{font:700 var(--fs-1) var(--serif);color:var(--success);font-variant-numeric:tabular-nums}
.rvn span{font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.rvn em{font-style:normal;margin-left:auto;font-size:var(--fs-2)}
.rvl.ch{display:flex;flex-wrap:wrap;gap:6px}
.rvl.ch span{display:flex;flex-direction:column;align-items:center;border-radius:var(--r-sm);padding:7px 11px;background:var(--soft);font:800 var(--fs-label) var(--sans);color:var(--muted)}
.rvl.ch span small{font:800 var(--fs-over) var(--sans);margin-top:1px}
.rvl.ch span.me{background:var(--bub-retry,#FFE6D8);color:var(--ink);box-shadow:inset 0 0 0 2px var(--abricot)}
.rvl.ch span.ok{background:var(--success-soft);color:var(--success);box-shadow:inset 0 0 0 2px var(--success)}
.chnew .rvt .fill{animation:rvfill .8s cubic-bezier(.2,.8,.2,1) both}
.chnew .rvt .re{animation:rvpop .3s .75s both}
.chnew .rvn em{animation:rvpop .4s .8s both}
.chnew .rvl.ch span.ok{animation:rvpop .35s .25s both}
@keyframes rvfill{from{width:0}}
@keyframes rvpop{from{transform:scale(.4);opacity:0}}
[data-calm="1"] .rvl *{animation:none!important}
/* un collègue cite ta réponse */
.chq{margin:0 0 6px;border-left:3px solid var(--abricot);background:color-mix(in srgb,var(--abricot) 9%,var(--card));border-radius:var(--r-xs);padding:5px 9px;font-size:calc(var(--chat-fs,15px) - 3px);line-height:1.35;font-weight:600;color:var(--muted)}
.chq b{color:var(--accent-ink)}
.chnew .chq{animation:chqin .5s cubic-bezier(.2,.8,.2,1) both}
@keyframes chqin{from{transform:translateX(24px);opacity:0}}
[data-calm="1"] .chq{animation:none!important}

.slcap{font-size:var(--fs-caption);font-weight:700;color:var(--muted);line-height:1.4;margin-top:2px}

/* petits tableaux de données dans les messages */
.kt{width:100%;border-collapse:collapse;font:600 var(--fs-caption) var(--sans);font-variant-numeric:tabular-nums}
.kt th{text-align:left;font:800 var(--fs-over) var(--sans);letter-spacing:.1em;color:var(--muted);text-transform:uppercase;padding:4px 6px;border-bottom:1.5px solid var(--track)}
.kt td{padding:5px 6px;border-bottom:1px solid var(--track);color:var(--ink)}
.kt tr:last-child td{border-bottom:0}
.kt tr.hi td{background:color-mix(in srgb,var(--abricot) 12%,transparent)}
.xbank .tok.wide{font-size:var(--fs-caption);line-height:1.2;padding:9px 4px}

/* ---------- l’espace Pépin : projets, canaux de leçons, #data ---------- */
.ws .wsec{margin:18px 0 0}
.ws .wsh{display:flex;justify-content:space-between;align-items:baseline;padding:0 18px 6px;font-size:var(--fs-caption);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.ws .wsh span{letter-spacing:0;font-size:var(--fs-caption)}
.wch{display:flex;align-items:center;gap:10px;width:100%;min-height:44px;padding:6px 18px;background:none;border:0;text-align:left;color:var(--muted);font:600 var(--fs-body)/1.2 var(--sans);cursor:pointer;border-radius:0}
.wch:active{background:var(--soft)}
.wch .wic{width:22px;flex:none;text-align:center;font-weight:800;font-size:var(--fs-body);color:inherit}
.wch .wic.emo{font-size:var(--fs-body)}
.wch .wn{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wch.live{color:var(--ink);font-weight:800}
.wch.dim{opacity:.62}
.wch .wct{font-size:var(--fs-caption);font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.wring{width:20px;height:20px;flex:none;transform:rotate(-90deg)}
.wring .tr{fill:none;stroke:var(--track);stroke-width:3}
.wring .pg{fill:none;stroke:var(--success);stroke-width:3;stroke-linecap:round}
.wbadge{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-sm);background:var(--accent);color:var(--on-accent);font-size:var(--fs-caption);font-weight:800;display:grid;place-items:center}
.wck{width:20px;height:20px;border-radius:var(--r-xs);background:var(--success-soft);color:var(--success);display:grid;place-items:center}
.wnew{font-size:var(--fs-caption);font-weight:800;color:var(--accent-ink);background:var(--accent-soft);border-radius:var(--r-pill);padding:3px 9px}
.wlater{display:inline-flex;align-items:center;gap:4px;font-size:var(--fs-caption);font-weight:800;color:var(--muted)}
.wsub{font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.wneeds{margin:2px 18px 8px 50px;padding:10px 12px;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e1);display:flex;flex-direction:column;gap:6px}
.wneeds p{margin:0 0 2px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.wneeds span{display:flex;align-items:center;gap:7px;font-size:var(--fs-label);font-weight:700;color:var(--muted)}
.wneeds span.ok{color:var(--ink)}
.wneeds span i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--track);flex:none}
.wneeds span svg{color:var(--success);flex:none}
.wneeds small{font-weight:700;color:var(--muted);margin-left:auto}
/* « plus tard » : la suite du canal */
.later{display:flex;align-items:center;gap:10px;margin:14px 0 0;align-self:stretch}
.later::before,.later::after{content:"";flex:1;height:1.5px;background:var(--line)}
.later span{font-size:var(--fs-caption);font-weight:800;color:var(--muted);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line);padding:3px 11px}
.laterp{display:flex;gap:10px;align-items:flex-start;margin:10px 0 0;font-size:var(--fs-label);font-weight:700;color:var(--muted);line-height:1.4;opacity:.75}
.laterp.on{opacity:1;color:var(--ink)}
.laterp small{display:block;font-weight:600;margin-top:2px}
.laterp + .cta{margin-top:12px}
.later-card{margin-top:14px;display:flex;flex-direction:column}
.later-card .later{margin-top:0}
.chipc.back svg{transform:rotate(90deg)}
.wtop{display:flex;align-items:center;gap:10px}
.wme{padding:0;border:0;background:none;border-radius:50%;cursor:pointer;display:grid;box-shadow:0 0 0 2px var(--page),0 0 0 3.5px var(--line)}
.wme:active{transform:scale(.94)}
/* en-tête commun des canaux, séparateurs de leçons, « tous les canaux » */
.chhead.nobar{row-gap:0}
.view.feed{margin:0}
.view.feed > .chhead{margin:-12px -14px 12px}
.chti small .chnewc{display:inline;font-size:inherit;font-weight:800;color:var(--accent-ink)}
.chles{display:flex;align-items:center;gap:10px;margin:18px 0 4px;font-size:var(--fs-caption);font-weight:700;color:var(--muted);align-self:stretch;white-space:nowrap}
.chles::before,.chles::after{content:"";flex:1;height:1.5px;background:var(--line)}
.chles b{color:var(--ink);overflow:hidden;text-overflow:ellipsis}
.wall{border:0;background:none;padding:0;font:800 var(--fs-caption)/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--accent-ink);cursor:pointer}
.wmore{display:block;width:100%;border:0;background:none;text-align:left;padding:8px 18px 0 50px;font:700 var(--fs-caption)/1.3 var(--sans);color:var(--muted);cursor:pointer}
.chipc.wsbtn{position:relative;padding:0;background:none;box-shadow:none}
.chipc.wsbtn svg{border-radius:var(--r-sm)}
.wsdot{position:absolute;top:-3px;right:-4px;min-width:17px;height:17px;padding:0 4px;border-radius:var(--r-xs);background:var(--accent);color:var(--on-accent);font-size:var(--fs-over);font-weight:800;display:grid;place-items:center;box-shadow:0 0 0 2px var(--page)}
/* profil : les compétences */
.skills{padding:6px 16px 14px}
.sksec{padding:12px 0 2px;border-bottom:1.5px solid var(--line)}
.sksec:last-of-type{border-bottom:0}
.skh{display:flex;justify-content:space-between;align-items:baseline;margin:0 0 8px}
.skh span{font-size:var(--fs-label);font-weight:800;color:var(--ink)}
.skh small{font-size:var(--fs-caption);font-weight:800;color:var(--muted);font-variant-numeric:tabular-nums}
.skw{display:flex;flex-wrap:wrap;gap:7px;padding-bottom:10px}
.skc{display:inline-flex;align-items:center;border:0;border-radius:var(--r-pill);padding:7px 12px;font:800 var(--fs-label)/1.1 var(--sans);cursor:pointer}
.skc small{font-weight:700;font-size:inherit;opacity:.85;white-space:pre}
.skc.ok{background:var(--mastered);color:var(--on-mastered)}
.skc.rev{background:var(--review);color:var(--success);box-shadow:inset 0 0 0 1.5px var(--success)}
.skc.todo{background:none;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--line);cursor:default}
.skc:disabled{opacity:1}
.sklg{display:flex;gap:6px;flex-wrap:wrap;padding-top:12px}
.sklg .skc{font-size:var(--fs-caption);padding:4px 9px;cursor:default}
.skmore{display:block;width:100%;border:0;background:none;text-align:left;padding:12px 0 0;font:800 var(--fs-label)/1.3 var(--sans);color:var(--accent-ink);cursor:pointer;border-top:1.5px solid var(--line)}
/* le fil d’un message */
.whylink{display:inline-flex;align-items:center;gap:7px;max-width:100%;border:0;background:none;padding:4px 0;cursor:pointer;font:800 var(--fs-caption)/1.2 var(--sans);color:var(--accent-ink)}
.whylink .wf{display:flex}.whylink .wf .av + .av{margin-left:-6px;box-shadow:0 0 0 2px var(--page)}
.whylink .wl{font-weight:600;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.filw{position:fixed;inset:0;z-index:60;background:var(--page);display:flex;flex-direction:column;animation:filin var(--d-galet) var(--ease-galet)}
@keyframes filin{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
.filh{display:flex;align-items:center;gap:12px;padding:16px 16px 12px;border-bottom:2px solid var(--line)}
.filh .chipc{width:40px;height:40px}
.filh .chti b{font-size:var(--fs-2);font-family:var(--serif)}
.filb{flex:1;overflow-y:auto;padding-bottom:12px}
.filn{font-size:var(--fs-caption);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:8px 0 0 4px}
.filmore{display:flex;align-items:center;gap:8px;margin:12px 0 0;padding:10px 12px;border-radius:var(--r-md);background:var(--success-soft);font-size:var(--fs-label);font-weight:800;color:var(--ink)}
.filb .chwhy{align-self:flex-start;margin-left:0}
.fild{padding:12px 16px calc(16px + env(safe-area-inset-bottom,0px));border-top:2px solid var(--line)}
@media (prefers-reduced-motion:reduce){.filw{animation:none}}
.whylink b{white-space:nowrap;flex:none}.whylink .wf{flex:none}
/* rafales : les piles sous le jeu, et le bilan */
.gpiles{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px}
.gpile{border-radius:var(--r-md);background:var(--soft);padding:8px;display:flex;flex-direction:column;gap:5px;min-width:0}
.gpile:nth-child(even){background:color-mix(in srgb,var(--success-soft) 55%,var(--soft))}
.gph{font-size:var(--fs-over);font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding:2px 2px 2px}
.gmini{display:flex;gap:6px;align-items:flex-start;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 1.5px var(--success);padding:6px 8px;font:700 var(--fs-caption)/1.3 var(--sans);color:var(--ink);text-align:left;animation:rise var(--d-galet) var(--ease-galet)}
.gmini b{flex:none;color:var(--success)}
.gmini span{min-width:0}
.gmini small{display:block;font-size:var(--fs-caption);font-weight:800;margin-top:2px}
.gmini.ko{background:var(--danger-soft);box-shadow:inset 0 0 0 1.5px var(--danger)}
.gmini.ko b,.gmini.ko small{color:var(--danger-ink)}
.gmini.re{border:0;width:100%;cursor:pointer;box-shadow:inset 0 0 0 1.5px var(--accent)}
.gmini.re b,.gmini.re small{color:var(--accent-ink)}
.gmini em{display:block;font-style:normal;font-weight:600;color:var(--ink);margin-top:5px;line-height:1.4}
.gend .chsw,.chsw-wrap.gend .chsw{opacity:.55}
.chswb.gend button{opacity:.45}
.gbil{display:flex;align-items:center;gap:12px;border-radius:var(--r-md);background:var(--success-soft);padding:12px 14px}
.gbil b{font:700 var(--fs-1)/1 var(--serif);color:var(--success);white-space:nowrap}
.gbil span{font-size:var(--fs-label);font-weight:700;line-height:1.35}

/* ====== composants communs (design system v3) ====== */
/* Compteur : un nombre sur fond abricot */
.wbadge,.wsdot,.tbadge,.chip-n{min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-pill);background:var(--accent);color:var(--on-accent);font:800 var(--fs-over)/1 var(--sans);letter-spacing:0;display:inline-grid;place-items:center}
.wsdot{min-width:18px;height:18px;padding:0 5px}
/* Pastille : quatre tons, plein ou contour */
.chip,.wnew,.fnew,.fcount,.pill{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px;border-radius:var(--r-pill);font:800 var(--fs-caption)/1 var(--sans);letter-spacing:0;text-transform:none;white-space:nowrap;background:var(--soft);color:var(--ink)}
.chip.accent,.wnew,.fnew,.fcount,.pill.accent,.pill.warn{background:var(--accent-soft);color:var(--accent-ink)}
.chip.ok,.pill.good,.pill.okp{background:var(--success-soft);color:var(--success)}
.chip.ko,.pill.bad,.pill.kop{background:var(--danger-soft);color:var(--danger-ink)}
.chip.line{background:none;box-shadow:inset 0 0 0 1.5px var(--line);color:var(--muted)}
.pill.soon{background:var(--soft);color:var(--muted)}
/* Boutons : mêmes états partout */
.ghost:disabled{opacity:.42;cursor:default}
.chsug button,.wc button{transition:transform var(--d-goutte) var(--ease-goutte)}
.chsug button:not(:disabled):active,.wc button:active{transform:scale(.96)}
.wall,.wmore,.skmore,.whylink{transition:opacity var(--d-net)}
.wall:active,.wmore:active,.skmore:active,.whylink:active{opacity:.6}
/* Ligne de liste : 44 px minimum, pour le pouce */
.row,.wch{min-height:44px}
.wch small,.row small{font-size:var(--fs-caption)}
/* Avatars : piles à −8 px, contour de la surface */
.chavs .av + .av{margin-left:-8px}
/* Séparateur : un trait, une étiquette */
.chdiv,.chles,.later{display:flex;align-items:center;gap:10px;align-self:stretch;margin:14px 0 2px;white-space:nowrap}
.chdiv::before,.chdiv::after,.chles::before,.chles::after,.later::before,.later::after{content:"";flex:1;height:1.5px;background:var(--line)}
.chdiv > span,.chles > span,.later > span{font:800 var(--fs-caption)/1 var(--sans);letter-spacing:0;text-transform:none;color:var(--muted);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--line);padding:5px 11px;overflow:hidden;text-overflow:ellipsis;max-width:80%}
.chles > span{color:var(--ink)}
.chles > span b{font-weight:800}
.fsep{margin:18px 0 0}
.fsep::before,.fsep::after{background:var(--line)}
.fsep > span{font:800 var(--fs-caption)/1 var(--sans);color:var(--accent-ink);border-radius:var(--r-pill);box-shadow:inset 0 0 0 1.5px var(--accent);padding:5px 11px;letter-spacing:0;text-transform:none}
/* Panneaux : une action en haut à droite */
.sheethd{display:flex;align-items:center;justify-content:space-between;gap:10px}
.sheethd .chipc{width:36px;height:36px}
.notsheet{position:fixed}
.notsheet .nclose{position:absolute;top:12px;right:14px;width:36px;height:36px}
.notsheet .grab{position:relative;touch-action:none;cursor:grab}
.notsheet .grab::before{content:"";position:absolute;inset:-14px -70px}
.chdiv + .chsys{margin-top:2px}
.chti small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chavs .av.more{width:30px;height:30px;border-radius:50%;background:var(--soft);color:var(--ink);font:800 var(--fs-over)/30px var(--sans);text-align:center;margin-left:-8px;box-shadow:0 0 0 2px var(--page)}
/* ====== onboarding : l’invitation, le badge, la visite ====== */
.obinv{padding:0;min-height:100dvh;background:linear-gradient(180deg,var(--potager) 0 48%,var(--page) 48%)}
.obhero{padding:64px 26px 0;text-align:center;color:var(--on-hero)}
.oblogo{display:inline-block;border-radius:var(--r-md);box-shadow:0 0 0 6px rgba(251,245,234,.08)}
.obhero .kk{margin-top:18px}
.obhero h1{margin:6px 0 0;font:700 var(--fs-1)/1.15 var(--serif);letter-spacing:-.01em}
.obcard{margin:26px 18px 0;padding:18px;box-shadow:var(--e3)}
.obq{display:flex;gap:12px;align-items:flex-start}
.obq p{margin:0;font-size:var(--fs-label);line-height:1.5}
.obq p span{color:var(--muted);font-weight:600}
.obcrew{display:flex;align-items:center;gap:10px;margin-top:16px;padding-top:14px;border-top:1.5px solid var(--line);font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.obcrew .av{box-shadow:0 0 0 2px var(--card)}
.obfine{margin:10px 0 0;text-align:center;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.obbadge .top{align-items:flex-start}
.obbdg{width:220px;margin:6px auto 0;border-radius:var(--r-md);background:var(--card);box-shadow:var(--e3);overflow:hidden;text-align:center;animation:rise var(--d-galet) var(--ease-galet)}
.obbdg .bh{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;background:var(--potager);color:var(--on-hero);font:800 var(--fs-over)/1 var(--sans);letter-spacing:.1em;text-transform:uppercase}
.obbdg .bh span{display:flex;align-items:center;gap:6px}
.obbdg .bp{width:100px;height:100px;margin:14px auto 0;border-radius:var(--r-md);background:var(--success-soft);display:grid;place-items:center;overflow:hidden}
.obbdg .bn{display:block;margin-top:10px;font:700 var(--fs-2)/1.1 var(--serif)}
.obbdg small{display:block;margin:4px 0 16px;font-size:var(--fs-caption);font-weight:700;color:var(--muted)}
.obavs{display:flex;gap:8px;flex-wrap:wrap}
.obavs button{width:60px;height:60px;border:0;border-radius:var(--r-sm);background:var(--card);box-shadow:inset 0 0 0 2px var(--line);display:grid;place-items:center;padding:0;overflow:hidden}
.obavs button.on{box-shadow:inset 0 0 0 2.5px var(--ink)}
/* la règle du jeu, épinglée */
.chpin.rules{box-shadow:inset 0 0 0 2px var(--pousse)}
.chpin.rules .ph{color:var(--success)}
.chpin.rules .rl{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.chpin.rules .rl span{font-size:var(--fs-3)}
.chpin.rules .rl p{margin:0;font-size:var(--fs-label);line-height:1.4}
.chpin.rules .rl b{display:block}
.chpin.rules .rl small{display:block;font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
/* les notifications, après la première leçon */
.obnot{padding:14px;align-self:stretch}
.obnot .h{display:flex;gap:10px;align-items:center}
.obnot .h span{width:40px;height:40px;border-radius:var(--r-sm);background:var(--accent-soft);display:grid;place-items:center;font-size:var(--fs-2);flex:none}
.obnot .h b{font-size:var(--fs-label);line-height:1.3}
.obnot p{margin:6px 0 10px;font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.obnot .seg{margin:0}
.obno{display:block;margin:10px auto 0;border:0;background:none;font:800 var(--fs-caption) var(--sans);color:var(--muted)}
/* la visite */
.tourw{position:fixed;inset:0;z-index:70}
.tspot{position:fixed;border-radius:var(--r-sm);box-shadow:0 0 0 2.5px var(--accent),0 0 0 9999px rgba(16,28,21,.62);transition:all var(--d-galet) var(--ease-galet);pointer-events:none}
.tbub{position:fixed;left:24px;right:24px;max-width:420px;margin:0 auto;border-radius:var(--r-md);background:var(--card);padding:14px 16px;box-shadow:0 14px 34px rgba(0,0,0,.28);animation:rise var(--d-galet) var(--ease-galet)}
.tbub p{margin:4px 0 0;font-size:var(--fs-label);font-weight:700;line-height:1.45}
.tbub .tb{display:flex;justify-content:space-between;align-items:center;margin-top:12px}
.tbub .tb button{border:0;background:none;font:800 var(--fs-label) var(--sans);color:var(--muted)}
.tbub .tb .go{background:var(--cta-bg);color:var(--cta-fg);border-radius:var(--r-sm);padding:9px 16px}
.kk.accent{color:var(--accent-ink)}

/* ---------- compte : code par e-mail ---------- */
.auth .top{align-items:flex-start}
.auth .lede b{color:var(--ink)}
.aulea{display:flex;gap:9px;margin:14px 14px 0}
.aulea p{margin:0;flex:1;border-radius:4px var(--r-md) var(--r-md) var(--r-md);background:var(--card);box-shadow:var(--e1);padding:9px 12px;font-size:var(--fs-label);line-height:1.45}
.aulea small{color:var(--muted);font-weight:700}
.aunote{margin:0;padding:12px 14px;background:var(--success-soft);font-size:var(--fs-caption);line-height:1.5;font-weight:600;box-shadow:none}
.ausmall{margin:12px 18px 0;font-size:var(--fs-caption);line-height:1.5}
.auth form .ausmall{margin:2px 4px 0}
.auerr{margin:10px 18px 0;font-size:var(--fs-caption);font-weight:800;color:var(--danger-ink);line-height:1.45}
.auth form .auerr{margin:0 4px}
.aucode{position:relative;display:flex;gap:7px;margin:22px 14px 0}
.aucode span{flex:1;aspect-ratio:.8;border-radius:14px;background:var(--card);box-shadow:inset 0 0 0 2px var(--track);display:grid;place-items:center;font:700 26px/1 ui-monospace,Menlo,monospace;color:var(--ink)}
.aucode span.cur{box-shadow:inset 0 0 0 2px var(--accent)}
.aucode span.bad{background:var(--danger-soft);box-shadow:inset 0 0 0 2px var(--danger-ink);color:var(--danger-ink)}
.aucode input{position:absolute;inset:0;width:100%;height:100%;opacity:0;border:0;font-size:16px;caret-color:transparent;color:transparent;background:transparent}
.aurow{display:flex;justify-content:space-between;align-items:center;margin:14px 18px 0;font-size:var(--fs-caption);font-weight:700}
.auexp{color:var(--accent-ink)}
.aulink{border:0;background:none;padding:6px 0;font:800 var(--fs-caption) var(--sans);color:var(--accent-ink);cursor:pointer}
.aulink:disabled{color:var(--muted);cursor:default}
.oblog{border:0;background:none;cursor:pointer;padding:8px 0;font-family:var(--sans)}
.oblog b{color:var(--accent-ink)}
.cta.danger{background:var(--danger-ink)}
.acid{display:flex;gap:12px;align-items:center;margin:8px 14px 0;padding:14px}
.acid b{display:block;font-size:var(--fs-3)}
.acid small{font-size:var(--fs-caption);font-weight:600;color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,monospace}
.account .row .aulink{margin-left:auto;flex:none}

/* ---------- ordinateur : barre latérale à gauche, canal à droite ---------- */
#wsnav{display:none}
body.desk{padding-left:300px}
body.desk #wsnav{display:block;position:fixed;left:0;top:0;bottom:0;width:300px;overflow-y:auto;background:var(--soft);border-right:1.5px solid var(--line);padding-bottom:28px;z-index:5;overscroll-behavior:contain}
body.desk #app{max-width:760px}
body.desk #wsnav .wch.on{background:var(--accent-soft)}
body.desk #wsnav .wch.on .wn{color:var(--ink);font-weight:800}
body.desk #wsnav .wme.on{box-shadow:0 0 0 2.5px var(--accent);border-radius:50%}
body.desk .wsbtn{display:none}
body.desk .tabs,body.desk .tabfade{display:none}
body.desk .sheet,body.desk .chstage{left:calc(50% + 150px)}
body.desk .filw{left:300px}
.dkhome{padding:56px 32px 40px}
.dkhome .tt{font-size:var(--fs-1);margin-top:6px}
.dkcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-top:24px}
.dkc{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0;padding:18px;border:0;text-align:left;cursor:pointer;font-family:var(--sans);color:var(--ink);transition:transform var(--d-goutte) var(--ease-goutte)}
.dkc:hover{transform:translateY(-2px)}
.dkc b{font:700 var(--fs-3)/1.25 var(--serif)}
.dkc small{font-size:var(--fs-caption);font-weight:600;color:var(--muted);line-height:1.45}
.dkgo{display:flex;align-items:center;gap:6px;margin-top:auto;padding-top:10px;font-weight:800;font-size:var(--fs-label);color:var(--accent-ink)}

/* ---------- mise à jour disponible ---------- */
.updbar{position:fixed;right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));z-index:80;display:flex;align-items:stretch;border-radius:var(--r-pill);background:var(--potager);color:var(--on-hero);box-shadow:0 0 0 2px var(--kraft),var(--e3);animation:rise var(--d-galet) var(--ease-galet)}
.updgo{display:flex;align-items:center;gap:10px;border:0;background:none;color:inherit;padding:10px 6px 10px 16px;font-family:var(--sans);text-align:left;cursor:pointer;min-height:48px}
.updgo svg{flex:none;color:var(--accent)}
.updgo b{display:block;font-size:var(--fs-label);font-weight:800}
.updgo small{display:block;font-size:var(--fs-caption);font-weight:600;opacity:.75}
.updx{border:0;background:none;color:inherit;opacity:.6;padding:0 14px 0 8px;cursor:pointer;min-width:44px}
.updx:hover{opacity:1}
@media (max-width:600px){.updbar{bottom:calc(92px + env(safe-area-inset-bottom,0px))}}