/* Magasin-École · web app élèves — charte C OCF-EST
   Mise en page : application mobile, en-tête de 56 px, contenu sur une colonne (max 760 px), barre d'onglets en bas.
   Niveaux : même brique, plus foncée quand le niveau monte (règle du site), toujours accompagnée du sigle et des marches. */
@font-face{font-family:"Inter";src:url(fonts/inter-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Inter";src:url(fonts/inter-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Space Grotesk";src:url(fonts/space-grotesk-latin-700-normal.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  --brick:#B21E14;--orange:#E49141;--cream:#FAF4EE;
  --bg:#FAF4EE;--tile:#FFFFFF;--tile2:#F3E8DF;--ink:#1E1B1C;--soft:#5A4A44;--line:rgba(30,27,28,.13);
  --acc:#B21E14;--acc-ink:#FAF4EE;--acc-soft:#FBE3DF;
  --band:#1E1B1C;--band-ink:#FAF4EE;--band-soft:#D9C9BE;--band-line:rgba(250,244,238,.14);
  --ec:#C8301F;--cv:#B21E14;--mem:#8E170F;--lvl-ink:#FAF4EE;
  --ok:#1F6B45;--ok-bg:#E1F0E6;--ko:#B21E14;--ko-bg:#FBE3DF;--warn-bg:#FCEBD6;--warn:#7A4A0C;
  --f-d:"Space Grotesk","Inter",system-ui,sans-serif;
  --f-b:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --r:12px;--tab-h:64px;--head-h:56px;
  --t:200ms;--e:cubic-bezier(.2,0,0,1);
  --fs:1rem;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#211A1B;--tile:#2B2224;--tile2:#352B2D;--ink:#FAF4EE;--soft:#D2C2B7;--line:rgba(250,244,238,.14);
    --acc:#F08A6E;--acc-ink:#1E1B1C;--acc-soft:#4A2622;
    --band:#171213;--band-line:rgba(250,244,238,.12);
    --ec:#FFB39F;--cv:#F08A6E;--mem:#D9604E;--lvl-ink:#1E1B1C;
    --ok:#8FD3A8;--ok-bg:#1F3428;--ko:#FF9A85;--ko-bg:#4A2220;--warn-bg:#43301C;--warn:#F2B57C;
    color-scheme:dark}
}
:root[data-theme="dark"]{
  --bg:#211A1B;--tile:#2B2224;--tile2:#352B2D;--ink:#FAF4EE;--soft:#D2C2B7;--line:rgba(250,244,238,.14);
  --acc:#F08A6E;--acc-ink:#1E1B1C;--acc-soft:#4A2622;
  --band:#171213;--band-line:rgba(250,244,238,.12);
  --ec:#FFB39F;--cv:#F08A6E;--mem:#D9604E;--lvl-ink:#1E1B1C;
  --ok:#8FD3A8;--ok-bg:#1F3428;--ko:#FF9A85;--ko-bg:#4A2220;--warn-bg:#43301C;--warn:#F2B57C;
  color-scheme:dark}
:root[data-texte="grand"]{font-size:112.5%}
:root[data-proj="1"]{font-size:137.5%}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--head-h) + 12px);scroll-padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 16px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 1rem/1.6 var(--f-b);min-height:100vh}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:40;background:var(--band)}
h1,h2,h3{font-family:var(--f-d);letter-spacing:-.015em;line-height:1.15;margin:0;text-wrap:balance;font-weight:600}
h1{font-size:1.75rem;font-weight:700}h2{font-size:1.25rem}h3{font-size:1.0625rem}
p{margin:0}ul,ol{margin:0;padding-left:1.25rem}li+li{margin-top:.3rem}
a{color:var(--acc)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:6px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:100;background:var(--orange);color:#1E1B1C;padding:12px 16px;border-radius:8px;font-weight:600;text-decoration:none}
.skip:focus{top:calc(env(safe-area-inset-top,0px) + 8px)}
b,strong{font-weight:600}

/* ---------- En-tête ---------- */
.head{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--band);color:var(--band-ink);border-bottom:1px solid var(--band-line)}
.head-in{max-width:760px;margin:0 auto;min-height:var(--head-h);display:flex;align-items:center;gap:6px;padding-left:max(8px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.hb{flex:none;display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;border:0;background:transparent;color:var(--band-ink);text-decoration:none}
.hb:hover{background:rgba(250,244,238,.08)}
.hb svg{width:22px;height:22px}
.head-t{flex:1;min-width:0;min-height:44px;display:flex;align-items:center;gap:10px}
.head-t .logo{width:30px;height:30px;flex:none}
.head-t span{font:600 1.0625rem/1.2 var(--f-d);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lvbtn{flex:none;display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--band-line);background:transparent;color:var(--band-ink);font-weight:600;font-size:.875rem;text-decoration:none}

/* ---------- Contenu ---------- */
main{max-width:760px;margin:0 auto;padding-top:20px;padding-bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 32px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
main:focus{outline:none}
.stack{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
.stack-s{display:grid;gap:8px;grid-template-columns:minmax(0,1fr)}
.stack > *,.q > *,.opts > *,.doc,.tblw{min-width:0}
.q,.opts{grid-template-columns:minmax(0,1fr)}
.sec-t{font:600 .75rem/1.2 var(--f-b);letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin:22px 0 8px}
.lede{color:var(--soft);font-size:1rem}
.small{font-size:.875rem;color:var(--soft)}
.card{background:var(--tile);border:1px solid var(--line);border-radius:var(--r);padding:16px;min-width:0}
.card.flat{background:var(--tile2);border-color:transparent}
.card > * + *{margin-top:10px}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.spacer{flex:1}
.grid2{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.tblw{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:-4px;padding-inline:4px}
.tbl{border-collapse:collapse;width:100%;font-size:.9375rem;font-variant-numeric:tabular-nums}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.tbl th{font-weight:600;background:var(--tile2);white-space:nowrap}
.tbl td:first-child,.tbl th:first-child{position:sticky;left:0;background:var(--tile);z-index:1}
.tbl th:first-child{background:var(--tile2)}
.tbl td{min-width:5.5rem}
.doc{background:var(--tile2);border-radius:10px;padding:12px}
.doc > * + *{margin-top:8px}
.doc .tbl td:first-child{background:var(--tile2)}

/* Boutons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 18px;border-radius:10px;border:1px solid transparent;background:var(--acc);color:var(--acc-ink);font-weight:600;font-size:1rem;text-decoration:none;text-align:center;line-height:1.2}
.btn:hover{filter:brightness(1.06)}
.btn.sec{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.sec:hover{background:var(--tile2)}
.btn.ghost{background:transparent;color:var(--acc);padding:0 10px}
.btn.block{width:100%}
.btn.sm{min-height:44px;padding:0 14px;font-size:.9375rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn svg{width:20px;height:20px}
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg button{min-height:44px;padding:0 14px;border-radius:22px;border:1px solid var(--line);background:var(--tile);font-weight:600;font-size:.9375rem}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}

/* Niveau : sigle + marches */
.lv{display:inline-flex;align-items:center;gap:5px;font:700 .75rem/1 var(--f-b);letter-spacing:.04em;padding:5px 8px 5px 6px;border-radius:6px;background:var(--lvc,var(--cv));color:var(--lvl-ink);white-space:nowrap}
.lv-EC{--lvc:var(--ec)}.lv-CV{--lvc:var(--cv)}.lv-MEM{--lvc:var(--mem)}
.steps{display:inline-grid;grid-template-columns:repeat(3,4px);align-items:end;gap:2px;height:12px}
.steps i{display:block;background:currentColor;opacity:.35;border-radius:1px}
.steps i:nth-child(1){height:4px}.steps i:nth-child(2){height:8px}.steps i:nth-child(3){height:12px}
.steps i.on{opacity:1}
.lvbtn .steps{color:var(--band-ink)}
.lvbar{border-left:4px solid var(--lvc,var(--cv));padding-left:12px}

/* ---------- Barre d'onglets ---------- */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--tile);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px);padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
.tabs ul{list-style:none;margin:0 auto;padding:0;max-width:760px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.tabs li{margin:0}
.tabs a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;height:var(--tab-h);color:var(--soft);text-decoration:none;font-size:.75rem;font-weight:600;position:relative}
.tabs a svg{width:24px;height:24px}
.tabs a[aria-current="page"]{color:var(--acc)}
.tabs a[aria-current="page"]::before{content:"";position:absolute;top:0;left:28%;right:28%;height:3px;border-radius:0 0 3px 3px;background:var(--acc)}

/* ---------- Listes de navigation ---------- */
.nav-l{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.nav-l li{margin:0}
.ni{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;min-height:64px;padding:12px 14px;border-radius:var(--r);background:var(--tile);border:1px solid var(--line);color:inherit;text-decoration:none}
.ni:hover{border-color:var(--acc)}
.ni-num{display:grid;place-items:center;width:40px;height:40px;border-radius:10px;background:var(--tile2);font:700 1.0625rem var(--f-d);font-variant-numeric:tabular-nums}
.ni-num svg{width:22px;height:22px;color:var(--acc)}
.ni-t{min-width:0}
.ni-t b{display:block;font-weight:600;line-height:1.3}
.ni-t span{display:block;font-size:.875rem;color:var(--soft);line-height:1.4}
.chev{width:20px;height:20px;color:var(--soft)}
.prog{display:block;height:6px;border-radius:3px;background:var(--tile2);overflow:hidden;margin-top:6px}
.prog i{display:block;height:100%;background:var(--ok);border-radius:3px}
.done-mark{color:var(--ok);font-weight:600;font-size:.8125rem}

/* Accueil */
.hello{background:var(--band);color:var(--band-ink);border-radius:var(--r);padding:20px;display:grid;gap:12px}
.hello h1{font-size:1.625rem}
.hello p{color:var(--band-soft)}
.hello .lv{background:var(--lvc);}
.stairs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;align-items:end;margin-top:4px}
.stairs div{border-radius:8px;padding:8px 10px;font-size:.8125rem;line-height:1.3;color:var(--band-soft);background:rgba(250,244,238,.06);border:1px solid var(--band-line)}
.stairs div b{display:block;color:var(--band-ink);font-size:.875rem}
.stairs .s1{min-height:58px}.stairs .s2{min-height:78px}.stairs .s3{min-height:98px}
.stairs .me{background:var(--brick);border-color:var(--brick);color:#FAF4EE}.stairs .me b{color:#FAF4EE}
.kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.kpi{background:var(--tile);border:1px solid var(--line);border-radius:10px;padding:12px;text-align:left}
.kpi b{display:block;font:700 1.5rem/1.1 var(--f-d);font-variant-numeric:tabular-nums}
.kpi span{font-size:.8125rem;color:var(--soft);line-height:1.3;display:block}
.resume{display:grid;gap:4px;border-left:4px solid var(--orange)}

/* Onboarding */
.choose{display:grid;gap:10px;grid-template-columns:minmax(0,1fr)}
.choose button{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:center;text-align:left;padding:16px;border-radius:var(--r);border:2px solid var(--line);background:var(--tile);min-height:80px}
.choose button:hover,.choose button[aria-pressed="true"]{border-color:var(--acc)}
.choose .lv{grid-row:1/span 2;font-size:.875rem;padding:8px 10px}
.choose b{font-size:1.0625rem}
.choose span.small{grid-column:2}

/* Onglets de module */
.subtabs{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h));z-index:20;background:var(--bg);margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:8px max(16px,env(safe-area-inset-left,0px));display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid var(--line)}
.subtabs::-webkit-scrollbar{display:none}
.subtabs a{flex:none;display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:20px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.9375rem;border:1px solid var(--line);background:var(--tile)}
.subtabs a[aria-current="page"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.subtabs a .ck{width:16px;height:16px;margin-left:6px;color:var(--ok)}
.subtabs a[aria-current="page"] .ck{color:var(--bg)}
.mod-h{display:grid;gap:6px;margin-bottom:12px}
.mod-h .kick{font:600 .8125rem var(--f-b);color:var(--acc)}

/* Questions */
.sit{font-weight:600;background:var(--tile2);border-left:4px solid var(--orange);border-radius:8px;padding:12px 14px}
.q{display:grid;gap:10px}
.q-t{font-weight:600;font-size:1.0625rem;line-height:1.4}
.opts{display:grid;gap:8px}
.opt{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 12px;text-align:left;border-radius:10px;border:1.5px solid var(--line);background:var(--tile);font-size:1rem;line-height:1.35}
.opt:hover:not([disabled]){border-color:var(--soft)}
.opt .k{display:grid;place-items:center;width:28px;height:28px;border-radius:7px;background:var(--tile2);font-weight:700;font-size:.8125rem}
.opt[aria-pressed="true"],.opt[aria-checked="true"]{border-color:var(--ink);background:var(--tile2)}
.opt[aria-pressed="true"] .k,.opt[aria-checked="true"] .k{background:var(--ink);color:var(--bg)}
.opt.good{border-color:var(--ok);background:var(--ok-bg)}
.opt.good .k{background:var(--ok);color:var(--tile)}
.opt.bad{border-color:var(--ko);background:var(--ko-bg)}
.opt.bad .k{background:var(--ko);color:var(--tile)}
.opt[disabled]{cursor:default;opacity:1}
.opt .tag{font-size:.75rem;font-weight:700;display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
.opt.good .tag{color:var(--ok)}.opt.bad .tag{color:var(--ko)}
.tag svg{width:16px;height:16px}
.fb{border-radius:10px;padding:12px 14px;display:grid;gap:4px}
.fb.ok{background:var(--ok-bg)}.fb.ko{background:var(--ko-bg)}.fb.neutral{background:var(--tile2)}
.fb b{display:flex;align-items:center;gap:6px}
.fb.ok b{color:var(--ok)}.fb.ko b{color:var(--ko)}
.fb b svg{width:18px;height:18px}
.chk{display:grid;grid-template-columns:24px 1fr;gap:12px;align-items:start;min-height:48px;padding:12px;border-radius:10px;border:1.5px solid var(--line);background:var(--tile);cursor:pointer;line-height:1.4}
.chk input{width:22px;height:22px;margin:1px 0 0;accent-color:var(--acc)}
.chk.good{border-color:var(--ok);background:var(--ok-bg)}.chk.bad{border-color:var(--ko);background:var(--ko-bg)}
.chk .tag{grid-column:2;font-size:.75rem;font-weight:700}
.chk.good .tag{color:var(--ok)}.chk.bad .tag{color:var(--ko)}
.field{display:grid;gap:6px}
.field label{font-weight:600}
.inp{min-height:48px;border-radius:10px;border:1.5px solid var(--line);background:var(--tile);padding:0 14px;font-size:1.0625rem;width:100%;max-width:220px;font-variant-numeric:tabular-nums}
.inp:focus{border-color:var(--acc);outline:none;box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 40%,transparent)}
textarea.inp{max-width:none;min-height:140px;padding:12px 14px;line-height:1.5;font-size:1rem;resize:vertical}
.unit{font-weight:600;color:var(--soft)}
details.more{border:1px solid var(--line);border-radius:var(--r);background:var(--tile)}
details.more > summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;gap:10px;padding:0 16px;font-weight:600}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:"";margin-left:auto;width:10px;height:10px;border-right:2px solid var(--soft);border-bottom:2px solid var(--soft);transform:rotate(45deg) translateY(-3px);transition:transform var(--t) var(--e)}
details.more[open] > summary::after{transform:rotate(225deg) translateY(-3px)}
details.more > div{padding:0 16px 16px;display:grid;gap:12px}
.note{font-size:.875rem;color:var(--warn);background:var(--warn-bg);border-radius:10px;padding:10px 12px}

/* Sigles */
.sig{border:0;background:none;padding:0 1px;font:inherit;color:inherit;text-decoration:underline dotted;text-decoration-color:var(--acc);text-underline-offset:3px;text-decoration-thickness:2px;cursor:help;min-height:0}
.sheet{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--tile);border-top:1px solid var(--line);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.18);padding:18px max(16px,env(safe-area-inset-left,0px)) calc(env(safe-area-inset-bottom,0px) + 20px);max-width:760px;margin:0 auto;display:grid;gap:8px}
.sheet h2{font-size:1.25rem}
.scrim{position:fixed;inset:0;z-index:55;background:rgba(0,0,0,.35)}

/* Fiche */
.pts{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.pt{display:grid;gap:8px;padding:12px 14px;border-radius:10px;background:var(--tile);border:1px solid var(--line)}
.pt li{margin:0}
.pt .seg button{min-height:44px;font-size:.8125rem;padding:0 12px}
.pt.su{border-color:var(--ok)}
.pt.rev{border-color:var(--orange)}
.formule{font:600 .9375rem/1.45 var(--f-b);background:var(--tile2);border-radius:8px;padding:10px 12px;font-variant-numeric:tabular-nums}

/* Ordre */
.ord{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ord li{margin:0;display:grid;grid-template-columns:32px 1fr auto;gap:8px;align-items:center;padding:8px 8px 8px 10px;border-radius:10px;border:1.5px solid var(--line);background:var(--tile)}
.ord li.sel{border-color:var(--orange);box-shadow:0 0 0 3px color-mix(in srgb,var(--orange) 35%,transparent)}
.ord li.good{border-color:var(--ok);background:var(--ok-bg)}.ord li.bad{border-color:var(--ko);background:var(--ko-bg)}
.ord .n{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--tile2);font-weight:700;font-variant-numeric:tabular-nums}
.ord .txt{border:0;background:none;text-align:left;padding:6px 0;min-height:44px;line-height:1.35}
.ord .mv{display:flex;gap:6px}
.ord .mv button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line);background:var(--tile2);display:grid;place-items:center}
.ord .mv svg{width:20px;height:20px}

/* Chrono */
.timer{font:700 2.25rem/1 var(--f-d);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.timer.warn{color:var(--orange)}.timer.end{color:var(--ko)}
.exbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + var(--head-h));z-index:20;background:var(--bg);border-bottom:1px solid var(--line);margin:0 calc(-1 * max(16px,env(safe-area-inset-left,0px)));padding:8px max(16px,env(safe-area-inset-left,0px));display:grid;gap:8px}
.exbar .timer{font-size:1.5rem}
.parts{display:flex;gap:6px;overflow-x:auto;scrollbar-width:none}
.parts::-webkit-scrollbar{display:none}
.parts button{flex:none;min-height:44px;min-width:44px;padding:0 12px;border-radius:20px;border:1px solid var(--line);background:var(--tile);font-weight:600;font-size:.875rem}
.parts button[aria-current="step"]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.parts button .c{font-size:.75rem;opacity:.75;margin-left:4px;font-variant-numeric:tabular-nums}
.banner{border-radius:10px;padding:12px 14px;font-weight:600;display:flex;gap:10px;align-items:center}
.banner.warn{background:var(--warn-bg);color:var(--warn)}.banner.end{background:var(--ko-bg);color:var(--ko)}.banner.info{background:var(--tile2);color:var(--ink)}
.qn{display:inline-grid;place-items:center;min-width:28px;height:28px;border-radius:7px;background:var(--tile2);font-weight:700;font-size:.8125rem;margin-right:6px;font-variant-numeric:tabular-nums}
.pts-l{font-size:.8125rem;color:var(--soft);font-weight:600}
.score-big{font:700 3rem/1 var(--f-d);font-variant-numeric:tabular-nums}
.phases{display:flex;flex-wrap:wrap;gap:6px}
.phases span{font-size:.8125rem;padding:6px 10px;border-radius:16px;background:var(--tile2);color:var(--soft)}
.phases span.on{background:var(--acc);color:var(--acc-ink);font-weight:600}
.phases span.done{text-decoration:line-through}
.draw{background:var(--band);color:var(--band-ink);border-radius:var(--r);padding:16px;display:grid;gap:10px}
.draw .small{color:var(--band-soft)}
.draw b{color:var(--band-ink)}

/* Recherche */
.search{position:relative}
.search input{max-width:none;padding-left:44px}
.search svg{position:absolute;left:14px;top:50%;width:20px;height:20px;transform:translateY(-50%);color:var(--soft)}
.lex{list-style:none;margin:0;padding:0;display:grid;gap:0;background:var(--tile);border:1px solid var(--line);border-radius:var(--r)}
.lex li{margin:0;padding:12px 16px;border-bottom:1px solid var(--line);display:grid;gap:2px}
.lex li:last-child{border-bottom:0}
.lex b{font-weight:600}
.lex .letter{background:var(--tile2);padding:6px 16px;font:700 .8125rem var(--f-d);color:var(--soft)}

/* Score équipes */
.team{display:grid;grid-template-columns:1fr 48px 56px 48px;gap:8px;align-items:center}
.team input{max-width:none}
.team b{text-align:center;font:700 1.5rem var(--f-d);font-variant-numeric:tabular-nums}
.team button{height:48px;border-radius:10px;border:1px solid var(--line);background:var(--tile2);font-size:1.25rem;font-weight:700}

.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + env(safe-area-inset-bottom,0px) + 14px);transform:translateX(-50%);z-index:70;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:10px;font-weight:600;max-width:calc(100% - 32px);box-shadow:0 6px 20px rgba(0,0,0,.2)}
.foot{margin-top:28px;font-size:.8125rem;color:var(--soft)}

h1,h2,h3,.q-t,.ni-t b{overflow-wrap:break-word;hyphens:auto}
.mod-h,.hello{grid-template-columns:minmax(0,1fr)}
/* Texte agrandi à 200 % ou petit écran : on garde une seule colonne et l'essentiel dans l'en-tête */
@media (max-width:340px){
  main{hyphens:auto;overflow-wrap:anywhere}
  .ord li{padding:8px}
  .hb.opt-head,.head-t .logo{display:none}
  .head-in{gap:2px;padding-left:4px;padding-right:4px}
  .lvbtn{padding:0 6px}
  .stairs,.kpis{grid-template-columns:minmax(0,1fr)}
  .stairs .s1,.stairs .s2,.stairs .s3{min-height:0}
  .tabs a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .ord li{grid-template-columns:32px minmax(0,1fr)}
  .ord .mv{grid-column:1/-1;justify-content:flex-end}
  .opt{grid-template-columns:28px minmax(0,1fr)}
  .opt .tag{grid-column:2}
  .team{grid-template-columns:minmax(0,1fr) 44px 40px 44px}
  .grid2{grid-template-columns:minmax(0,1fr)}
  .choose button{grid-template-columns:minmax(0,1fr)}
  .choose .lv{grid-row:auto;justify-self:start}
  .choose span.small{grid-column:auto}
  .ni{grid-template-columns:auto minmax(0,1fr);padding:10px}
  .ni .chev{display:none}
}
@media (min-width:700px){
  h1{font-size:2rem}
  main{padding-top:28px}
}
@media (prefers-reduced-motion:no-preference){
  .opt,.btn,.ni,.chk,.ord li{transition:border-color var(--t) var(--e),background-color var(--t) var(--e),box-shadow var(--t) var(--e)}
  .sheet{animation:up 240ms var(--e)}
  @keyframes up{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}
}
@media (prefers-contrast:more){:root{--line:rgba(30,27,28,.45);--soft:#3D302B}}
@media print{.head,.tabs,.btn,.subtabs,.exbar{display:none!important}main{padding:0}}