/* Layout concept: a French maths exercise book (carreaux) on which monsters show up with a sum.
   Solve it to capture the monster; captured monsters fill a bestiary. Stickers, thick ink outlines, highlighter yellow. */
:root{
  --bg:#f3f7ff; --grid:#d3ddf4; --surface:#ffffff; --surface-2:#e8eefc; --ink:#1d2547; --ink-2:#4f5a85; --line:#1d2547;
  --shadow:#1d2547; --accent:#ff7a1a; --accent-ink:#1d2547; --hl:#ffe14d;
  --scene:#fffaf0; --ground:#eadfc2;
  --good:#17803f; --good-bg:#d6f3df; --bad:#c2352a; --bad-bg:#fde1dd; --gold:#ffc83d;
  --f-display:'Lilita One','Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif;
  --f-body:'Nunito',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'DM Mono',ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#111733; --grid:#212b55; --surface:#1b2347; --surface-2:#252f5c; --ink:#eef1ff; --ink-2:#aab4de; --line:#c9d1f5;
    --shadow:#070b1c; --accent:#ff9a45; --accent-ink:#1d2547; --hl:#ffe14d;
    --good:#6fe0a0; --good-bg:#153a28; --bad:#ff9d92; --bad-bg:#432220;
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#111733; --grid:#212b55; --surface:#1b2347; --surface-2:#252f5c; --ink:#eef1ff; --ink-2:#aab4de; --line:#c9d1f5;
  --shadow:#070b1c; --accent:#ff9a45; --accent-ink:#1d2547; --hl:#ffe14d;
  --good:#6fe0a0; --good-bg:#153a28; --bad:#ff9d92; --bad-bg:#432220;
  color-scheme:dark;
}
*{box-sizing:border-box}
body{
  background-color:var(--bg);
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:28px 28px;
  color:var(--ink); font-family:var(--f-body); font-size:17px; line-height:1.5;
  margin:0; padding-block:18px 48px;
  padding-left:max(16px,env(safe-area-inset-left,0px)); padding-right:max(16px,env(safe-area-inset-right,0px));
}
button{font:inherit; color:inherit}
:focus-visible{outline:3px solid var(--accent); outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.wrap{max-width:1260px; margin:0 auto}

/* Menu des niveaux : colonne à gauche sur grand écran, tiroir ouvert par un bouton sur téléphone. */
.shell{display:grid; grid-template-columns:190px minmax(0,1fr); gap:24px; align-items:start}
.levels{position:sticky; top:18px; background:var(--surface); border:2.5px solid var(--line); border-radius:16px; padding:12px}
.lv-title{margin:0 0 8px; font-weight:800; font-size:.85rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2)}
.lv-list{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.lv{display:flex; justify-content:space-between; align-items:center; gap:8px; width:100%; min-height:48px; padding:8px 14px; border-radius:12px; border:2.5px solid var(--line); background:var(--surface); font-weight:800; font-size:1.15rem; text-align:left; cursor:pointer}
.lv:hover{background:var(--surface-2)}
.lv[aria-current="true"]{background:var(--hl); color:#1d2547; border-color:#1d2547}
.lv.off{border-style:dashed; background:var(--surface-2); color:var(--ink-2); cursor:default}
.lv small{font-size:.72rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.lvbtn{display:none; align-items:center; gap:8px; padding:8px 14px}
.scrim{display:none}
@media (max-width:899px){
  .shell{display:block}
  .lvbtn{display:inline-flex}
  .levels{position:fixed; z-index:20; top:0; bottom:0; left:0; width:min(280px,84vw); overflow-y:auto; border-radius:0 16px 16px 0; border-left:0;
    padding:20px 16px 20px max(16px,env(safe-area-inset-left,0px)); transform:translateX(-105%); visibility:hidden; transition:transform .25s ease, visibility .25s}
  body.lv-open .levels{transform:none; visibility:visible}
  body.lv-open .scrim{display:block; position:fixed; inset:0; z-index:19; background:rgb(7 11 28 / .5)}
}
@media (prefers-reduced-motion:reduce){ .levels{transition:none} }

.top{display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:20px}
.brand{font-family:var(--f-display); font-size:1.6rem; background:none; border:0; padding:2px 0; cursor:pointer; color:var(--ink); text-align:left}
.brand span{background:linear-gradient(transparent 58%,var(--hl) 58%)}
.rank{display:grid; gap:4px; min-width:210px; background:var(--surface); border:2.5px solid var(--line); border-radius:12px; padding:8px 12px}
.rank-top{display:flex; justify-content:space-between; gap:10px; font-weight:800; font-size:.92rem}
.rank-top span:last-child{font-family:var(--f-mono); font-weight:500; color:var(--ink-2)}
.xpbar{height:8px; border-radius:4px; background:var(--surface-2); overflow:hidden}
.xpbar i{display:block; height:100%; background:var(--accent); transition:width .4s}

.h1{font-family:var(--f-display); font-weight:400; font-size:clamp(1.9rem,4.6vw,2.8rem); line-height:1.12; margin:0 0 10px; text-wrap:balance}
.h1 span{background:linear-gradient(transparent 58%,var(--hl) 58%)}
.lead{margin:0 0 20px; max-width:62ch; font-size:1.08rem; color:var(--ink-2)}
.opts{display:flex; align-items:center; flex-wrap:wrap; gap:12px 20px; margin:0 0 20px}
.chk{display:inline-flex; align-items:center; gap:8px; font-weight:700; cursor:pointer}
.chk input{width:20px; height:20px; accent-color:var(--accent)}

.topics{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:12px}
.topic{display:grid; gap:2px; text-align:left; padding:14px 16px; border-radius:14px; background:var(--surface); border:2.5px solid var(--line); cursor:pointer; align-content:start; min-width:0}
.topic:hover{background:var(--surface-2)}
.topic.wide{grid-column:1/-1; background:var(--hl); color:#1d2547; border-color:#1d2547}
.topic.wide:hover{background:var(--hl); filter:brightness(.96)}
.tp-t{font-weight:800; font-size:1.12rem}
.tp-ex{font-family:var(--f-mono); font-size:.95rem; color:var(--ink-2)}
.topic.wide .tp-ex{color:#3b3f2a}
.tp-n{font-size:.82rem; color:var(--ink-2); margin-top:2px}
.topic.wide .tp-n{color:#3b3f2a}

.btn{border-radius:12px; padding:11px 20px; font-weight:800; cursor:pointer; border:2.5px solid var(--line); background:var(--surface); color:var(--ink)}
.btn.primary{background:var(--accent); color:var(--accent-ink); box-shadow:0 4px 0 var(--shadow)}
.btn.primary:hover{filter:brightness(1.06)}
.btn.primary:active{transform:translateY(3px); box-shadow:0 1px 0 var(--shadow)}
.btn.ghost:hover{background:var(--surface-2)}
.link{background:none; border:0; padding:4px 0; color:var(--ink-2); cursor:pointer; text-decoration:underline; text-underline-offset:3px; font-weight:700}

.hud{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:10px}
.hud-mid{font-weight:800; background:var(--surface); border:2px solid var(--line); border-radius:999px; padding:2px 14px}
.combo{font-family:var(--f-mono); font-size:.95rem}
.combo b{font-size:1.25rem; color:var(--accent)}
.dots{display:flex; gap:8px; margin:0 0 12px}
.dot{width:15px; height:15px; border-radius:50%; border:2.5px solid var(--line); background:var(--surface); display:block}
.dot.cur{background:var(--hl)}
.dot.first{background:var(--good); border-color:var(--good)}
.dot.second{border-color:var(--good); background:linear-gradient(90deg,var(--good) 50%,var(--surface) 50%)}
.dot.miss{background:var(--bad); border-color:var(--bad)}
.timer{height:10px; border-radius:5px; border:2px solid var(--line); background:var(--surface); overflow:hidden; margin-bottom:14px}
.timer i{display:block; height:100%; width:100%; background:var(--good)}
.timer.low i{background:var(--bad)}

.arena{display:grid; grid-template-columns:250px minmax(0,1fr); gap:22px; align-items:start}
@media (max-width:760px){ .arena{grid-template-columns:minmax(0,1fr)} }
.scene{background:var(--scene); border:2.5px solid var(--line); border-radius:16px; padding:14px 14px 12px; text-align:center; color:#1d2547}
.monster{width:200px; max-width:100%; margin:0 auto; position:relative}
.monster svg{display:block; width:100%; height:auto; overflow:visible}
.ground{height:14px; width:150px; max-width:70%; margin:-8px auto 8px; border-radius:50%; background:var(--ground)}
.mname{font-family:var(--f-display); font-size:1.35rem; margin:0; line-height:1.1}
.mtopic{margin:2px 0 0; font-size:.85rem; color:#5b5a52; font-weight:700}
.tag{display:inline-block; margin-top:6px; font-size:.78rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:2px 10px; border-radius:999px; border:2px solid #1d2547; background:#fff}
.tag.rare{background:#ffe14d}
.tag.legend{background:#ffc83d}
@media (max-width:760px){ .monster{width:150px} }

.bubble{position:relative; background:var(--surface); border:2.5px solid var(--line); border-radius:16px; padding:18px 20px 20px}
.b-prompt{margin:0 0 6px; font-weight:800; font-size:.85rem; letter-spacing:.07em; text-transform:uppercase; color:var(--ink-2)}
.b-q{margin:0 0 16px; font-family:var(--f-mono); font-weight:500; font-size:clamp(1.8rem,5.6vw,3rem); line-height:1.25; overflow-wrap:anywhere}
.b-q.sent{font-family:var(--f-body); font-weight:800; font-size:clamp(1.2rem,3vw,1.6rem); line-height:1.4}
.b-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
#ans,.ans2{font-family:var(--f-mono); font-size:1.7rem; width:8ch; padding:6px 12px; border:2.5px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink)}
.ans2{width:4ch; padding:6px 8px; text-align:center}
.is-good #ans,.is-good .ans2{border-color:var(--good)}
.is-bad #ans,.is-bad .ans2{border-color:var(--bad)}
#ans[readonly],.ans2[readonly]{opacity:.85}
.pair{display:inline-flex; align-items:center; gap:6px; font-family:var(--f-mono); font-size:1.7rem}

/* Grille du thème Repérage */
.g-wrap{margin:0 0 14px}
.grid{display:block; width:100%; max-width:440px; height:auto; background:var(--surface); border-radius:12px; touch-action:manipulation; user-select:none; -webkit-user-select:none}
.grid.pickable{cursor:crosshair}
.g-l{stroke:var(--ink-2); stroke-opacity:.6; stroke-width:1}
.g-ax{stroke:var(--ink); stroke-width:2.5}
.g-arr{fill:var(--ink)}
.g-t{fill:var(--ink); font:500 12px var(--f-mono); paint-order:stroke; stroke:var(--surface); stroke-width:4px}
.g-name{fill:var(--ink); font:800 17px var(--f-body); paint-order:stroke; stroke:var(--surface); stroke-width:5px}
.g-pt{fill:var(--accent); stroke:var(--line); stroke-width:2.5}
.g-ok{fill:var(--good); stroke:var(--line); stroke-width:2.5}
.g-no{fill:none; stroke:var(--ink-2); stroke-width:2.5; stroke-dasharray:4 3}
.g-guide{stroke:var(--good); stroke-width:2.5; stroke-dasharray:6 5}
.g-live{margin:6px 0 0; min-height:1.5em; font-weight:700; color:var(--ink-2)}
.under{margin-top:12px}
.fr{display:inline-flex; flex-direction:column; align-items:center; vertical-align:middle; line-height:1.05; margin:0 .08em; font-size:.82em}
.fr span:first-child{border-bottom:.08em solid currentColor; padding:0 .18em .06em}
.fr span:last-child{padding:.06em .18em 0}

@media (min-width:761px){
  .bubble::before{content:""; position:absolute; left:-12px; top:46px; width:20px; height:20px; background:var(--surface); border-left:2.5px solid var(--line); border-bottom:2.5px solid var(--line); transform:rotate(45deg)}
}

.fb{display:none; margin-top:14px; border-radius:12px; padding:14px 16px; border:2.5px solid var(--line)}
.fb.show{display:block}
.fb.good{background:var(--good-bg)}
.fb.bad{background:var(--bad-bg)}
.fb.hint{background:var(--surface-2)}
.fb-title{margin:0; font-weight:800}
.fb.good .fb-title{color:var(--good)}
.fb.bad .fb-title{color:var(--bad)}
.fb-body{margin:4px 0 0}
.fb-method{font-family:var(--f-mono); font-size:.95rem; margin:8px 0 0}
.meth{margin-top:8px}
.meth summary{cursor:pointer; color:var(--ink-2); font-size:.92rem; font-weight:700}
.bonus{margin:10px 0 0; padding-top:10px; border-top:2px dashed var(--line); font-weight:700}

@media (prefers-reduced-motion:no-preference){
  .monster.appear{animation:pop .35s ease-out}
  .monster.caught{animation:hop .7s ease-out}
  .monster.flee{animation:flee .6s ease-in forwards}
  @keyframes pop{from{transform:scale(.6) translateY(10px)} to{transform:none}}
  @keyframes hop{0%{transform:scale(1)} 25%{transform:translateY(-18px) scale(1.06)} 55%{transform:translateY(0) scale(.96)} 100%{transform:none}}
  @keyframes flee{to{transform:translateX(60px) scale(.7); opacity:0}}
}

.end h2,.coll h2{font-family:var(--f-display); font-weight:400; font-size:clamp(1.7rem,4vw,2.4rem); margin:0 0 8px}
.card{background:var(--surface); border:2.5px solid var(--line); border-radius:16px; padding:18px 20px}
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:14px 0}
.stat{background:var(--surface-2); border-radius:12px; padding:10px 14px}
.stat b{display:block; font-family:var(--f-display); font-weight:400; font-size:1.7rem; line-height:1.1}
.stat span{font-size:.85rem; color:var(--ink-2); font-weight:700}
.actions{display:flex; flex-wrap:wrap; gap:10px; margin-top:16px}
.herd{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:10px; margin-top:12px}
.mini{background:var(--scene); border:2.5px solid var(--line); border-radius:14px; padding:8px 8px 10px; text-align:center; color:#1d2547; min-width:0}
.mini svg{display:block; width:100%; max-width:110px; height:auto; margin:0 auto; overflow:visible}
.mini b{display:block; font-family:var(--f-display); font-weight:400; font-size:1rem; line-height:1.15}
.mini small{display:block; font-size:.75rem; color:#5b5a52; font-weight:700}
.mini.rare{border-color:#d99a00; box-shadow:0 0 0 3px #ffe14d}
.mini.legend{border-color:#c47a00; box-shadow:0 0 0 3px #ffc83d, 0 0 0 6px #ffe14d}
.empty{padding:26px; text-align:center; color:var(--ink-2); font-weight:700}

/* Chapitres, carte de progression, bestiaire par espèce */
.h2{font-family:var(--f-display); font-weight:400; font-size:clamp(1.7rem,4vw,2.4rem); margin:6px 0 6px; line-height:1.15}
.pbar{display:block; height:10px; border-radius:5px; background:var(--surface-2); border:2px solid var(--line); overflow:hidden; margin:6px 0 2px}
.pbar i{display:block; height:100%; background:var(--clan,var(--accent))}
.topic.clan{border-left:10px solid var(--clan)}
.clan-ic{color:var(--clan); margin-right:6px; vertical-align:-2px}
.clan-n{display:inline-block; font-family:var(--f-body); font-size:.78rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-2)}
.map .pbar{max-width:520px; margin-bottom:18px}
.path{list-style:none; margin:0; padding:0; display:grid; gap:12px; max-width:640px; position:relative}
.path::before{content:""; position:absolute; left:31px; top:20px; bottom:20px; border-left:4px dashed var(--ink-2); opacity:.45}
.path>li{position:relative}
.path>li:nth-child(even){margin-left:clamp(12px,6vw,56px)}
li.node{width:auto}
.node{position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:12px; width:100%; text-align:left; padding:10px 14px; border-radius:16px; border:2.5px solid var(--line); background:var(--surface); color:var(--ink)}
button.node{cursor:pointer}
button.node:hover{background:var(--surface-2)}
.n-num{display:grid; place-items:center; width:40px; height:40px; border-radius:50%; background:var(--clan,var(--accent)); color:#fff; font-family:var(--f-display); font-size:1.3rem; border:2.5px solid var(--line); text-shadow:0 1px 0 rgb(0 0 0 / .35)}
.n-body{display:grid; gap:3px; min-width:0}
.n-t{font-weight:800}
.n-s{font-size:.88rem; color:var(--ink-2); font-weight:700}
.n-dots{display:flex; gap:3px; flex-wrap:wrap}
.n-dots i{width:11px; height:11px; border-radius:50%; border:2px solid var(--line); background:var(--surface)}
.n-dots i.on{background:var(--good); border-color:var(--good)}
.n-go{font-weight:800; font-size:.9rem; padding:6px 12px; border-radius:999px; background:var(--hl); color:#1d2547; border:2px solid #1d2547; white-space:nowrap}
.node.full .n-go{background:var(--good-bg); color:var(--good); border-color:var(--good)}
.node.locked{border-style:dashed; background:var(--surface-2); color:var(--ink-2); grid-template-columns:auto 1fr}
.node.locked .n-num{background:var(--surface); font-size:1rem; text-shadow:none}
.badge{display:inline-block; margin-left:4px; padding:0 8px; border-radius:999px; background:var(--hl); color:#1d2547; font-size:.78rem; font-weight:800}
.news{margin:6px 0; padding:8px 12px; border-radius:12px; background:var(--hl); color:#1d2547; font-weight:800}
.gold-card{display:flex; align-items:center; gap:16px; margin:12px 0 18px; padding:12px 16px; border-radius:16px; border:2.5px dashed var(--line); background:var(--surface-2)}
.gold-card.on{border-style:solid; background:var(--scene); color:#1d2547}
.gold-card.on p{color:#3b3f2a}
.gold-card p{margin:2px 0 0; color:var(--ink-2)}
.gold-art{flex:0 0 auto; width:96px}
.gold-art svg{display:block; width:100%; height:auto; overflow:visible}
.species{margin:0 0 16px}
.species h3{margin:0 0 8px; font-size:1.05rem}
.species h3 small{font-weight:700; color:var(--ink-2)}
.cells{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px}
@media (max-width:640px){ .cells{grid-template-columns:repeat(5,minmax(0,1fr))} }
.cell{aspect-ratio:1; display:grid; place-items:center; border-radius:12px; border:2px solid var(--line); background:var(--scene); padding:3px}
.cell svg{display:block; width:100%; height:auto; overflow:visible}
.cell.empty{background:var(--surface-2); border-style:dashed; color:var(--ink-2); font-family:var(--f-display); font-size:1.4rem}
.coll .topics{margin-top:8px}

/* Éclat d'un enchaînement de réussites (rien n'est enregistré) */
.scene.eclat{box-shadow:0 0 0 4px var(--hl), 0 0 28px 6px rgb(255 225 77 / .7)}
@media (prefers-reduced-motion:no-preference){
  .scene.eclat{animation:eclat 1.1s ease-out}
  @keyframes eclat{0%{box-shadow:0 0 0 0 var(--hl), 0 0 0 0 rgb(255 225 77 / 0)} 40%{box-shadow:0 0 0 8px var(--hl), 0 0 40px 14px rgb(255 225 77 / .8)} 100%{box-shadow:0 0 0 4px var(--hl), 0 0 28px 6px rgb(255 225 77 / .7)}}
}
.g-fix{fill:var(--surface); stroke:var(--ink); stroke-width:3}
.g-o{font-family:var(--f-body); font-weight:800}

/* Avatar, niveaux et garde-robe */
.rank{display:flex; align-items:center; gap:10px}
.rank-txt{display:grid; gap:4px; flex:1; min-width:0}
.rank-av{position:relative; flex:0 0 auto; width:46px; height:52px; padding:0; border:2px solid var(--line); border-radius:10px; background:var(--scene); cursor:pointer}
.rank-av svg{display:block; width:100%; height:100%}
.pend{position:absolute; top:-8px; right:-8px; min-width:20px; height:20px; padding:0 5px; border-radius:999px; background:var(--accent); color:var(--accent-ink); border:2px solid var(--line); font-size:.75rem; font-weight:800; line-height:16px; text-align:center}
.offer{margin:14px 0; padding:12px 14px; border-radius:14px; border:2.5px solid var(--line); background:var(--hl); color:#1d2547}
.offer h3{margin:0 0 8px; font-size:1.1rem}
.offer .n-s{color:#3b3f2a}
.wears{display:grid; grid-template-columns:repeat(auto-fill,minmax(104px,1fr)); gap:8px}
.wear{display:grid; gap:4px; justify-items:center; padding:8px 6px; border-radius:12px; border:2.5px solid var(--line); background:var(--scene); color:#1d2547; cursor:pointer; font-weight:700; font-size:.85rem; line-height:1.2; text-align:center}
.wear svg{display:block; width:72px; height:auto}
.wear:hover{filter:brightness(.97)}
.wear[aria-pressed="true"]{outline:4px solid var(--accent); outline-offset:1px}
.wear[aria-pressed="true"]::after{content:"porté ✓"; font-size:.75rem; color:#17803f; font-weight:800}
.w-grid{display:grid; grid-template-columns:220px minmax(0,1fr); gap:20px; align-items:start}
@media (max-width:700px){ .w-grid{grid-template-columns:minmax(0,1fr)} }
.w-me{position:sticky; top:18px; background:var(--scene); border:2.5px solid var(--line); border-radius:16px; padding:12px; text-align:center}
.w-me svg{display:block; width:100%; max-width:200px; margin:0 auto}
.w-me .n-s{color:#3b3f2a}
@media (max-width:700px){ .w-me{position:static} .w-me svg{max-width:140px} }
.wslot{margin:0 0 16px}
.wslot h3{margin:0 0 8px; font-size:1.05rem}
.wslot h3 small{font-weight:700; color:var(--ink-2)}
.swatches{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:10px}
.swatch{width:40px; height:40px; border-radius:50%; border:3px solid var(--line); cursor:pointer}
.swatch[aria-pressed="true"]{outline:4px solid var(--accent); outline-offset:2px}
.warn{margin:0 0 16px; padding:10px 14px; border-radius:12px; border:2.5px solid var(--bad); background:var(--bad-bg); font-weight:700}
.record{font-weight:700; color:var(--ink-2)}
.leave{margin:0 0 8px; font-weight:800; color:var(--bad)}
.leave:empty{display:none}
.pseudo{font:inherit; font-size:1.3rem; width:100%; max-width:320px; padding:8px 12px; border:2.5px solid var(--line); border-radius:10px; background:var(--surface); color:var(--ink)}
#pseudo-err{color:var(--bad); margin-top:6px}

/* Page de suivi du professeur */
.suivi .card{margin-bottom:16px}
.classement{margin:0; padding-left:22px; font-size:1.05rem}
.eleves{display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:10px}
.eleve{border:2px dashed var(--line); border-radius:12px; padding:10px 12px}
.eleve.on{border-style:solid; border-color:var(--good); background:var(--good-bg)}
.eleve p{margin:4px 0}
.lien{font:inherit; font-size:.8rem; width:100%; max-width:220px}
.flux{width:100%; border-collapse:collapse; font-size:.92rem}
.flux th,.flux td{text-align:left; padding:6px 8px; border-bottom:1px solid var(--grid); vertical-align:top}
.flux tr.ok td:last-child{color:var(--good); font-weight:800}
.flux tr.ko td:last-child{color:var(--bad); font-weight:800}
.suivi .card{overflow-x:auto}