/* BlokWall — l'habillage : la charte de BlokTrain (voir son DESIGN.md), avec le logo du BlokWall. */
/* La charte de BlokTrain (jetons repris à l'identique) ; seul le logo est celui du BlokWall.
   Les couleurs des prises (START, MAIN, PIED, TOP) sont des données, pas des couleurs d'interface. */
:root{
  --bg:#f2f2f7; --card:#ffffff; --card2:#ffffff;
  --fill:rgba(118,118,128,.12); --fill2:rgba(118,118,128,.2);
  --sep:rgba(60,60,67,.29); --sep2:rgba(60,60,67,.18);
  --text:#000000; --text2:rgba(60,60,67,.78); --text3:rgba(60,60,67,.57);
  --tint:#ffb400; --tint-text:#8f6500; --on-tint:#000;
  --green:#34c759; --green-text:#22803a; --red:#ff3b30; --red-text:#d70015;
  --danger-bg:#d70015; --on-danger:#ffffff; --ok-bg:#34c759; --on-ok:#000000;
  --shadow:0 12px 40px rgba(0,0,0,.18);
  --seg-on:#ffffff; --seg-shadow:0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04);
  --toast-act:#ffb400;
  --glass:rgba(255,255,255,.62); --glass-edge:rgba(255,255,255,.75); --glass-on:rgba(0,0,0,.07);
  --h-s:#30d158; --h-m:#0a84ff; --h-r:#bf5af2; --h-l:#ff9f0a; --h-f:#ffd60a; --h-t:#ff2d55;
  --spring:cubic-bezier(.34,1.56,.64,1); --ease:cubic-bezier(.22,1,.36,1);
  --t-xs:.6471rem; --t-s:.7647rem; --t-m:.8824rem; --t-base:1rem; --t-l:1.2353rem; --t-xl:1.5294rem; --t-xxl:1.8824rem;
  --r-xs:6px; --r-s:8px; --r-m:12px; --r-l:22px;
}
:root[data-theme="dark"]{
  --bg:#000000; --card:#1c1c1e; --card2:#1c1c1e;
  --fill:rgba(118,118,128,.24); --fill2:rgba(118,118,128,.36);
  --sep:rgba(84,84,88,.65); --sep2:rgba(84,84,88,.45);
  --text:#ffffff; --text2:rgba(235,235,245,.6); --text3:rgba(235,235,245,.5);
  --tint:#ffb400; --tint-text:#ffb400; --on-tint:#000;
  --green:#30d158; --green-text:#30d158; --red:#ff453a; --red-text:#ff6961;
  --danger-bg:#d70015; --on-danger:#ffffff; --ok-bg:#30d158; --on-ok:#000000;
  --shadow:0 12px 40px rgba(0,0,0,.6);
  --seg-on:#636366; --seg-shadow:none;
  --toast-act:#8f6500;
  --glass:rgba(40,40,44,.6); --glass-edge:rgba(255,255,255,.14); --glass-on:rgba(255,255,255,.14);
}
html{ color-scheme:light; font-size:17px; -webkit-text-size-adjust:100%; text-size-adjust:100%; } html[data-theme="dark"]{ color-scheme:dark; }
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
*{ touch-action:manipulation; }
[hidden]{ display:none !important; }
html,body{ height:100%; overflow:hidden; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Helvetica Neue',system-ui,Roboto,sans-serif;
  line-height:1.35; -webkit-font-smoothing:antialiased; -webkit-tap-highlight-color:transparent; }
body{ display:flex; flex-direction:column; }
button,label.btn{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; text-align:inherit; }
input,textarea,select{ font-family:inherit; font-size:max(16px,1rem); color:inherit; }
textarea{ resize:none; }
svg.ic{ width:20px; height:20px; flex-shrink:0; stroke-width:2.1; }
:focus{ outline:none; }
:focus-visible{ outline:2px solid var(--tint-text); outline-offset:2px; border-radius:var(--r-s); }

/* ── Page ───────────────────────────────────────────────────────────── */
main{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior-y:contain;
  width:100%; max-width:760px; margin:0 auto;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(120px + env(safe-area-inset-bottom)); }
.vin{ animation:vin .25s var(--ease); }
@keyframes vin{ from{ opacity:0 } to{ opacity:1 } }
.top{ display:flex; align-items:center; gap:12px; min-height:44px; margin:4px 0 8px; }
.top .logo{ height:30px; width:auto; display:block; }
.top .sp{ flex:1; }
h1.big{ font-size:var(--t-xxl); font-weight:700; letter-spacing:-.5px; margin:4px 0 12px; display:flex; align-items:baseline; gap:12px; }
h1.big .n{ font-size:var(--t-l); font-weight:400; color:var(--text2); letter-spacing:0; }
.lab{ font-size:var(--t-s); color:var(--text2); text-transform:uppercase; letter-spacing:.02em; margin:24px 4px 8px; }
.hint{ font-size:var(--t-s); color:var(--text2); line-height:1.45; padding:8px 4px 0; }
.hint b{ color:var(--text); }
.empty{ color:var(--text2); font-size:var(--t-m); padding:20px 4px; line-height:1.5; text-align:center; }
.empty b{ color:var(--text); }

/* Boîtes et lignes, façon Réglages */
.box{ background:var(--card); border-radius:var(--r-m); overflow:hidden; }
.cell{ display:flex; align-items:center; gap:12px; min-height:48px; padding:8px 16px; width:100%; position:relative; font-size:var(--t-base); }
.cell + .cell::before, .cell + .rt::before, .rt + .rt::before, .rt + .cell::before{ content:''; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--sep); }
button.cell, label.cell, a.cell{ cursor:pointer; color:inherit; text-decoration:none; transition:background .15s; }
button.cell:active, label.cell:active{ background:var(--fill); }
.cell .lbl{ flex:1; min-width:0; }
.cell .val{ color:var(--text2); font-variant-numeric:tabular-nums; }
.cell .chev{ color:var(--text3); width:16px; height:16px; }
.cell input[type=text], .cell input[type=password], .cell input[type=search], .cell textarea{ flex:1; min-width:0; border:none; background:none; padding:6px 0; }
.cell textarea{ min-height:72px; line-height:1.4; }
.rowbtn{ color:var(--tint-text); font-weight:600; justify-content:flex-start; }
.rowbtn.red{ color:var(--red-text); }
.rowbtn.center{ justify-content:center; }
.bigbtn{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; min-height:50px; border-radius:var(--r-m);
  background:var(--tint); color:var(--on-tint); font-weight:600; font-size:var(--t-base);
  transition:transform .35s var(--spring), opacity .15s; }
.bigbtn:active{ transform:scale(.97); }
.bigbtn[disabled]{ opacity:.55; pointer-events:none; }
.bigbtn.light{ background:var(--fill); color:var(--text); }

/* Segments et pastilles */
.seg{ display:flex; background:var(--fill); border-radius:10px; padding:2px; }
.seg button{ flex:1; text-align:center; font-size:var(--t-s); font-weight:500; min-height:32px; border-radius:var(--r-s); position:relative; }
.seg button::before{ content:''; position:absolute; inset:-6px 0; }
.seg button.on{ background:var(--seg-on); box-shadow:var(--seg-shadow); font-weight:700; }
.picks{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 -16px 12px; padding:2px 16px; }
.picks::-webkit-scrollbar{ display:none; }
.pk{ flex-shrink:0; min-height:36px; padding:0 12px; border-radius:999px; background:var(--fill); font-size:var(--t-m); font-weight:500;
  display:inline-flex; align-items:center; gap:6px; position:relative; transition:transform .3s var(--spring); }
.pk::before{ content:''; position:absolute; inset:-5px 0; }
.pk:active{ transform:scale(.92); }
.pk.on{ background:var(--text); color:var(--bg); font-weight:600; }

/* La cotation : une étiquette noire, comme celles du mur */
.gr{ display:inline-flex; align-items:center; justify-content:center; width:52px; height:36px; padding:0 4px; border-radius:var(--r-s);
  background:var(--c, var(--fill2)); color:var(--text); font-weight:700; font-size:var(--t-base); flex-shrink:0; font-variant-numeric:tabular-nums; }
.gr.big{ width:64px; height:44px; font-size:var(--t-l); border-radius:var(--r-m); }
.gr.out{ background:none; color:var(--text); box-shadow:inset 0 0 0 1.5px var(--text); }

/* La liste des voies */
.search{ display:flex; align-items:center; gap:8px; background:var(--fill); border-radius:10px; padding:0 10px; min-height:38px; margin:0 0 10px; color:var(--text2); }
.search input{ flex:1; border:none; background:none; min-width:0; color:var(--text); }
.rt{ display:flex; align-items:center; gap:12px; width:100%; min-height:60px; padding:8px 16px; position:relative; transition:background .15s; }
.rt:active{ background:var(--fill); }
.rt .tx{ flex:1; min-width:0; display:flex; flex-direction:column; }
.rt .tx b{ font-weight:600; font-size:var(--t-base); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rt .tx small{ font-size:var(--t-s); color:var(--text2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rt .ok{ width:24px; height:24px; border-radius:50%; background:var(--green); color:#000; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.rt .ok svg{ width:15px; height:15px; stroke-width:3; }
.rt .meta{ display:flex; align-items:center; gap:4px; color:var(--text3); font-size:var(--t-s); font-variant-numeric:tabular-nums; }
.rt .meta svg{ width:14px; height:14px; }
.compte{ font-size:var(--t-s); color:var(--text2); margin:0 4px 8px; }

/* Cloche */
.circ{ width:40px; height:40px; border-radius:50%; background:var(--card); display:flex; align-items:center; justify-content:center; position:relative; flex-shrink:0;
  box-shadow:0 2px 10px rgba(0,0,0,.08); transition:transform .3s var(--spring); }
.circ:active{ transform:scale(.88); }
.circ.flat{ box-shadow:none; background:var(--fill); }
.bulle{ position:absolute; top:-3px; right:-3px; min-width:19px; height:19px; padding:0 5px; border-radius:999px; background:var(--red); color:#fff;
  font-size:var(--t-xs); font-weight:700; display:flex; align-items:center; justify-content:center; font-variant-numeric:tabular-nums; }

/* ── Dock : la pilule de verre et le + ─────────────────────────────── */
.dock{ position:fixed; left:0; right:0; bottom:0; z-index:30; display:flex; align-items:center; justify-content:center; gap:10px;
  padding:0 16px calc(12px + env(safe-area-inset-bottom)); pointer-events:none; }
.pill, .plus{ pointer-events:auto; background:var(--glass); box-shadow:0 8px 32px rgba(0,0,0,.22), inset 0 1px 0 var(--glass-edge), 0 0 0 .5px rgba(0,0,0,.08);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); }
.pill{ display:flex; border-radius:999px; padding:4px; }
.pill button{ display:flex; flex-direction:column; align-items:center; gap:1px; min-width:66px; padding:6px 8px 5px; border-radius:999px;
  font-size:var(--t-xs); font-weight:600; color:var(--text2); position:relative; transition:background .2s, color .2s; text-align:center; }
.pill button.on{ background:var(--glass-on); color:var(--text); box-shadow:inset 0 1px 0 var(--glass-edge); }
.pill button svg{ width:22px; height:22px; }
.pill .bulle{ top:0; right:12px; }
.plus{ width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; color:var(--text);
  transition:transform .3s var(--spring); }
.plus:active{ transform:scale(.9); }
.plus svg{ width:28px; height:28px; stroke-width:2.4; }

/* ── Feuilles plein écran ──────────────────────────────────────────── */
.sheet{ position:fixed; inset:0; z-index:50; background:var(--bg); display:flex; flex-direction:column;
  transform:translateY(100%); transition:transform .35s var(--ease); }
.sheet.in{ transform:none; }
.sheet.side{ transform:translateX(100%); }
.sheet.side.in{ transform:none; }
.snav{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; min-height:52px;
  padding:calc(4px + env(safe-area-inset-top)) 8px 4px; background:var(--glass); border-bottom:.5px solid var(--sep);
  -webkit-backdrop-filter:saturate(180%) blur(20px); backdrop-filter:saturate(180%) blur(20px); position:relative; z-index:2; }
.snav b{ font-size:var(--t-base); font-weight:700; text-align:center; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:56vw; }
.snav .l, .snav .r{ display:flex; }
.snav .r{ justify-content:flex-end; }
.snav button{ min-height:44px; padding:0 10px; font-size:var(--t-base); color:var(--tint-text); display:inline-flex; align-items:center; gap:2px; }
.snav button.ok{ font-weight:700; }
.snav button[disabled]{ opacity:.3; }
.sbody{ flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:16px 16px calc(32px + env(safe-area-inset-bottom)); }
.sbody > :first-child{ margin-top:0; }

/* ── Le mur : photo, zoom, prises ──────────────────────────────────── */
.wallhost{ position:relative; overflow:hidden; background:#0b0b0c; touch-action:none; flex:1; min-height:0; user-select:none; -webkit-user-select:none; }
.wallhost.fixe{ flex:none; height:min(62vh, 560px); border-radius:var(--r-m); }
.stage{ position:absolute; left:0; top:0; transform-origin:0 0; will-change:transform; }
.stage img{ display:block; width:100%; height:100%; pointer-events:none; -webkit-user-drag:none; }
.stage svg{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.stage .ho{ fill:none; stroke:rgba(0,0,0,.6); stroke-width:calc(var(--sw) * 3); }
.stage .hi{ fill:none; stroke:#fff; stroke-width:var(--sw); }
.wv-create .stage .hi:not(.on){ stroke:rgba(255,255,255,.75); }
.wv-create .stage .ho:not(.on){ stroke:rgba(0,0,0,.35); }
.stage .hi.on{ stroke-width:calc(var(--sw) * 1.9); }
.stage .ho.on{ stroke-width:calc(var(--sw) * 4.2); }
.stage .hi.sel{ stroke:var(--h-f); stroke-width:calc(var(--sw) * 2); }
.stage .hi.t-s{ stroke:var(--h-s); } .stage .hi.t-m{ stroke:var(--h-m); } .stage .hi.t-r{ stroke:var(--h-r); } .stage .hi.t-l{ stroke:var(--h-l); } .stage .hi.t-f{ stroke:var(--h-f); } .stage .hi.t-t{ stroke:var(--h-t); }
.stage .lb{ stroke:#000; stroke-width:calc(var(--sw) * .8); } .stage .lb.t-r{ fill:var(--h-r); } .stage .lb.t-l{ fill:var(--h-l); }
.stage .hl{ stroke:var(--h-f); stroke-width:calc(var(--sw) * .9); stroke-dasharray:calc(var(--sw) * 3) calc(var(--sw) * 2); }
.stage .hd{ fill:#fff; stroke:#000; stroke-width:calc(var(--sw) * 1.2); }
.stage .hd.b{ fill:var(--h-f); }
.stage .lt{ fill:#000; font-weight:800; font-family:-apple-system,system-ui,sans-serif; pointer-events:none; }
.stage .hi.t-t.on{ stroke-dasharray:none; }
.zoomhint{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); background:rgba(0,0,0,.6); color:#fff; font-size:var(--t-s);
  padding:6px 12px; border-radius:999px; pointer-events:none; white-space:nowrap; transition:opacity .4s; }
.wvreset{ position:absolute; right:10px; top:10px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:2; }
.wvreset svg{ width:20px; height:20px; }
.wvplein{ position:absolute; left:10px; top:10px; width:40px; height:40px; border-radius:50%; background:rgba(0,0,0,.55); color:#fff;
  display:flex; align-items:center; justify-content:center; z-index:2; }
.wvplein svg{ width:20px; height:20px; }
.wvplein::before, .wvreset::before{ content:''; position:absolute; inset:-4px; }

/* Barre d'outils sous le mur */
.bar{ background:var(--card); padding:12px 16px calc(12px + env(safe-area-inset-bottom)); border-top:.5px solid var(--sep); display:flex; flex-direction:column; gap:10px; }
.bar .tip{ font-size:var(--t-s); color:var(--text2); text-align:center; min-height:20px; }
.bar .tools{ display:flex; align-items:center; gap:10px; }
.bar .tools .sp{ flex:1; }
.roles{ display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.roles button{ min-height:46px; white-space:nowrap; border-radius:var(--r-m); background:var(--fill); display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:var(--t-s); font-weight:700; text-transform:uppercase; letter-spacing:.03em; position:relative; transition:transform .3s var(--spring); text-align:center; }
.roles button:active{ transform:scale(.95); }
.roles button.on{ background:var(--text); color:var(--bg); }
.roles button i{ width:16px; height:16px; border-radius:50%; border:3px solid var(--c); display:flex; align-items:center; justify-content:center; font-style:normal; font-size:9px; font-weight:900; line-height:1; }
.roles button small{ font-size:var(--t-xs); font-weight:600; opacity:.7; letter-spacing:0; font-variant-numeric:tabular-nums; }
.dot{ width:12px; height:12px; border-radius:50%; border:2.5px solid var(--c); display:inline-block; flex-shrink:0; }
.legend{ display:flex; flex-wrap:wrap; gap:6px 14px; font-size:var(--t-s); color:var(--text2); margin:10px 4px 0; }
.legend span{ display:inline-flex; align-items:center; gap:6px; }

/* Choix de la cotation */
.gg{ display:grid; grid-template-columns:repeat(5,1fr); gap:8px; }
.gg button{ min-height:52px; border-radius:var(--r-m); background:var(--card); font-weight:700; font-size:var(--t-l); text-align:center; transition:transform .3s var(--spring); }
.gg button:active{ transform:scale(.94); }
.gg button.on{ background:var(--text); color:var(--bg); }
.gg.small button{ min-height:40px; font-size:var(--t-base); background:var(--fill); }
.gg.small button.on{ background:var(--text); }

/* Fiche d'une voie */
.vhead{ display:flex; align-items:center; gap:14px; margin:16px 4px 4px; }
.vhead .tx{ flex:1; min-width:0; }
.vhead h2{ font-size:var(--t-xl); font-weight:800; letter-spacing:-.3px; line-height:1.15; overflow-wrap:anywhere; }
.vhead small{ display:block; color:var(--text2); font-size:var(--t-m); margin-top:2px; }
.info{ margin:10px 4px 0; font-size:var(--t-m); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.hstat{ display:grid; grid-template-columns:repeat(4,1fr); background:var(--card); border-radius:var(--r-m); margin-top:16px; }
.hstat div{ padding:12px 4px; text-align:center; display:flex; flex-direction:column; gap:2px; }
.hstat b{ font-size:var(--t-l); font-weight:800; font-variant-numeric:tabular-nums; }
.hstat small{ font-size:var(--t-xs); color:var(--text2); text-transform:uppercase; letter-spacing:.03em; }
.myline{ display:flex; align-items:center; gap:10px; }
.myline .tx{ flex:1; }
.myline small{ display:block; color:var(--text2); font-size:var(--t-s); }
.okc{ width:30px; height:30px; border-radius:50%; background:var(--green); color:#000; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.okc svg{ width:18px; height:18px; stroke-width:3; }
.stars{ display:inline-flex; gap:2px; color:var(--text); }
.stars svg{ width:15px; height:15px; }
.stars .off{ opacity:.22; }
.starpick{ display:flex; gap:6px; }
.starpick button{ width:44px; height:44px; display:flex; align-items:center; justify-content:center; border-radius:var(--r-m); background:var(--fill); }
.starpick button svg{ width:24px; height:24px; }
.starpick button.on{ background:var(--tint); color:var(--on-tint); }
.step{ display:flex; align-items:center; gap:14px; }
.step button{ width:40px; height:40px; border-radius:50%; background:var(--fill); display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:600; }
.step b{ min-width:34px; text-align:center; font-size:var(--t-l); font-variant-numeric:tabular-nums; }
.mot{ padding:12px 16px; position:relative; }
.mot + .mot::before{ content:''; position:absolute; top:0; left:16px; right:0; border-top:.5px solid var(--sep); }
.mot .who{ display:flex; align-items:center; gap:8px; font-size:var(--t-s); color:var(--text2); }
.mot .who b{ color:var(--text); font-size:var(--t-m); }
.mot .who button{ margin-left:auto; color:var(--text3); font-size:var(--t-s); min-height:32px; padding:0 4px; }
.mot p{ margin-top:4px; font-size:var(--t-m); line-height:1.45; white-space:pre-wrap; overflow-wrap:anywhere; }
.ecrire{ display:flex; align-items:flex-end; gap:8px; padding:8px 8px 8px 16px; }
.ecrire textarea{ flex:1; border:none; background:none; padding:8px 0; max-height:120px; line-height:1.4; }
.ecrire button{ width:36px; height:36px; border-radius:50%; background:var(--tint); color:var(--on-tint); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-bottom:4px; }
.ecrire button[disabled]{ opacity:.25; }
.ecrire button svg{ width:18px; height:18px; stroke-width:2.6; }
.av{ width:30px; height:30px; border-radius:50%; background:var(--fill2); color:var(--text); display:flex; align-items:center; justify-content:center;
  font-size:var(--t-s); font-weight:800; flex-shrink:0; text-transform:uppercase; }

/* Classement */
.rank{ width:26px; text-align:center; font-weight:800; font-variant-numeric:tabular-nums; color:var(--text2); }
.rank.p1{ color:var(--tint-text); }
.cell.moi{ background:var(--fill); }
.pts{ font-weight:800; font-variant-numeric:tabular-nums; }
.sub{ display:block; font-size:var(--t-s); color:var(--text2); }

/* Mur (onglet) */
.wallcard{ position:relative; display:block; width:100%; border-radius:var(--r-m); overflow:hidden; background:#0b0b0c; }
.wallcard img{ display:block; width:100%; max-height:52vh; object-fit:contain; }
.wallcard .wc-n{ position:absolute; left:10px; bottom:10px; background:rgba(0,0,0,.65); color:#fff; font-size:var(--t-s); font-weight:600; padding:5px 10px; border-radius:999px; }
.code{ font-family:ui-monospace,'SF Mono',Menlo,monospace; font-weight:700; letter-spacing:.12em; font-size:var(--t-l); }
.tog{ width:51px; height:31px; border-radius:999px; background:var(--fill2); position:relative; flex-shrink:0; transition:background .2s; }
.tog::after{ content:''; position:absolute; top:2px; left:2px; width:27px; height:27px; border-radius:50%; background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.2); transition:transform .25s var(--ease); }
.tog.on{ background:var(--green); }
.tog.on::after{ transform:translateX(20px); }

/* Connexion (comme BlokTrain ; le logo du BlokWall à la place de l'icône) */
.auth{ position:fixed; inset:0; z-index:80; background:var(--bg); overflow-y:auto; display:flex; justify-content:center;
  padding:calc(40px + env(safe-area-inset-top)) 16px calc(40px + env(safe-area-inset-bottom)); }
.auth .in{ width:100%; max-width:400px; display:flex; flex-direction:column; gap:12px; }
.auth .logo{ width:min(64vw, 240px); align-self:center; margin:8px 0 0; }
.auth .tag{ text-align:center; color:var(--text2); font-size:var(--t-m); margin:4px 0 12px; }
.auth .err{ color:var(--red-text); font-size:var(--t-m); text-align:center; min-height:1.3em; }
.auth .hint{ text-align:center; }
/* Toast et demande */
.toast{ position:fixed; left:50%; bottom:calc(92px + env(safe-area-inset-bottom)); z-index:90; transform:translate(-50%, 20px); opacity:0; pointer-events:none;
  background:#1c1c1e; color:#fff; border-radius:20px; padding:10px 8px 10px 18px; display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px);
  font-size:var(--t-m); box-shadow:var(--shadow); transition:opacity .25s, transform .3s var(--ease); }
.toast.on{ opacity:1; transform:translate(-50%, 0); pointer-events:auto; }
.toast.sans{ padding-right:18px; }
.toast button{ color:var(--toast-act); font-weight:700; min-height:36px; padding:0 10px; flex-shrink:0; }
.voile{ position:fixed; inset:0; z-index:85; background:rgba(0,0,0,.4); opacity:0; transition:opacity .25s; }
.voile.in{ opacity:1; }
.ask{ position:fixed; left:8px; right:8px; bottom:calc(8px + env(safe-area-inset-bottom)); z-index:86; max-width:520px; margin:0 auto;
  display:flex; flex-direction:column; gap:8px; transform:translateY(120%); transition:transform .3s var(--ease); }
.ask.in{ transform:none; }
.ask .box{ text-align:center; }
.ask .q{ padding:16px 16px 12px; }
.ask .q b{ display:block; font-size:var(--t-base); }
.ask .q p{ font-size:var(--t-s); color:var(--text2); margin-top:4px; line-height:1.4; }
.ask .box button{ display:flex; justify-content:center; width:100%; min-height:54px; align-items:center; font-size:var(--t-base); color:var(--tint-text); position:relative; }
.ask .box button::before{ content:''; position:absolute; top:0; left:0; right:0; border-top:.5px solid var(--sep); }
.ask .box button.red{ color:var(--red-text); font-weight:600; }
.ask .box.cancel button{ font-weight:700; }
.ask .box.cancel button::before{ display:none; }

/* Animations de geste (BlokTrain) */
.neuf{ animation:pose .3s var(--ease); }
@keyframes pose{ from{ opacity:0; transform:translateY(5px); } to{ opacity:1; transform:none; } }
.mal{ animation:secoue .35s; }
@keyframes secoue{ 20%,60%{ transform:translateX(-6px); } 40%,80%{ transform:translateX(6px); } }
@media (prefers-reduced-motion:reduce){ *,*::before,*::after{ animation:none !important; transition:none !important; } }
.loading{ padding:60px 0; text-align:center; color:var(--text2); }

/* Texte au plus gros (iPhone) : rien ne déborde */
.pill button{ white-space:nowrap; }
.rt .meta{ flex-shrink:0; }
@media (max-width:340px){ .pill button{ min-width:48px; padding:6px 3px 5px; font-size:11px !important; } .plus{ width:52px; height:52px; } .dock{ gap:6px; } }
.pill button{ font-size:min(var(--t-xs), 12px); }
.pill button svg{ width:min(22px, 1.3rem); height:min(22px, 1.3rem); }