/* Empire Binaire — interface « jeu de gestion ».
   Mise en page : garage 3D plein écran avec HUD (ressources en haut, objectif en bas à gauche, dock d'actions en bas),
   fiches contextuelles à droite (feuille en bas sur mobile) ; pages secondaires en colonne centrée avec la même barre.
   Un seul thème sombre assumé : la nuit dans le garage, lumières chaudes et matériel qui clignote. */
:root {
  color-scheme: dark;
  --night: #100f1a;        /* fond : la nuit autour du garage */
  --panel: #1c1a2b;        /* panneaux */
  --panel-2: #26233a;      /* éléments surélevés */
  --edge: #3a3553;         /* bordures */
  --ink: #f4f1ff;          /* texte */
  --ink-2: #aca6c8;        /* texte secondaire */
  --brand: #9d6bff;        /* violet Empire Binaire (Twitch) */
  --brand-deep: #6a3fd6;
  --gold: #ffc94d;         /* Crédits */
  --ok: #4cd99a; --warn: #f2b544; --bad: #f2706a;
  --p-calcul: #4da3ff; --p-reseau: #33d1c0; --p-securite: #ff7a59; --p-resilience: #ffd24d;
  --shadow: 0 10px 30px rgba(0, 0, 0, .45);
  --f-display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --f-body: "Nunito", "Segoe UI", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
  --r: 14px;
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { height: 100% }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--f-body); font-size: 15px; line-height: 1.45 }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; margin: 0; text-wrap: balance; letter-spacing: .005em }
p { margin: 0 }
a { color: var(--ink) }
.num { font-family: var(--f-display); font-variant-numeric: tabular-nums; font-weight: 600 }
code, .mono { font-family: var(--f-mono); font-size: .82em; font-variant-numeric: tabular-nums }
.muted { color: var(--ink-2) }
.ic { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px }

/* ---------- boutons « jeu » : épais, avec une tranche dessous ---------- */
.btn { --b: var(--panel-2); --b-edge: #15131f; --t: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; font: 600 .95rem/1 var(--f-display); letter-spacing: .01em;
  color: var(--t); background: var(--b); border: 2px solid rgba(255, 255, 255, .08); border-radius: 12px; padding: 11px 16px;
  box-shadow: 0 4px 0 var(--b-edge); cursor: pointer; text-decoration: none; transition: transform .08s, box-shadow .08s, filter .15s; white-space: nowrap }
.btn:hover:not(:disabled) { filter: brightness(1.12) }
.btn:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--b-edge) }
.btn:disabled { filter: grayscale(.7) brightness(.7); cursor: not-allowed; box-shadow: 0 2px 0 var(--b-edge) }
.btn.go { --b: var(--brand); --b-edge: var(--brand-deep); --t: #fff }
.btn.gold { --b: var(--gold); --b-edge: #b8862a; --t: #2b1d00 }
.btn.okb { --b: var(--ok); --b-edge: #2b9a69; --t: #062015 }
.btn.danger { --b: #4a1f25; --b-edge: #2a1014; --t: #ffd9d5; border-color: rgba(242, 112, 106, .5) }
.btn.sm { padding: 7px 11px; font-size: .85rem; border-radius: 10px; box-shadow: 0 3px 0 var(--b-edge) }
.btn.lg { padding: 15px 22px; font-size: 1.1rem }
.btn.wide { width: 100%; white-space: normal; text-align: center; line-height: 1.2 }
.linkbtn { background: none; border: 0; padding: 0; color: var(--brand); font: inherit; font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 3px }
input, select, textarea { font: inherit; color: var(--ink); background: #12101d; border: 2px solid var(--edge); border-radius: 10px; padding: 8px 11px; min-width: 0 }
input:focus, select:focus, textarea:focus { border-color: var(--brand); outline: none }

/* ---------- HUD : marque, ressources, navigation ---------- */
.hud { display: flex; align-items: center; gap: 10px 14px; flex-wrap: nowrap; min-width: 0 }
.brandmark { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink) }
.brandmark b { font: 700 1.25rem/1 var(--f-display); display: block }
.brandmark small { display: block; color: var(--ink-2); font-size: .74rem; margin-top: 3px }
.res { display: flex; align-items: center; gap: 2px; min-width: 0; background: rgba(20, 18, 32, .82); border: 2px solid var(--edge); border-radius: 999px; padding: 5px 8px; backdrop-filter: blur(8px) }
.res .r { display: inline-flex; align-items: center; gap: 6px; padding: 3px 12px; white-space: nowrap; cursor: default }
.res .r + .r { border-left: 1px solid var(--edge) }
.res .r .ic { width: 17px; height: 17px; color: var(--c); flex: none }
.res .r b { font: 600 1.02rem/1 var(--f-display); font-variant-numeric: tabular-nums; display: inline-flex; align-items: baseline; gap: 6px }
.res .cd { font: 600 .8rem var(--f-mono, monospace); color: var(--ink-2) }
.meal-badge { font: 700 .74rem/1 var(--f-body, inherit); font-style: normal; color: var(--gold); background: color-mix(in srgb, var(--gold) 16%, transparent); border-radius: 999px; padding: 3px 7px }
.brandmark svg { flex: none }
.nav { margin-left: auto; display: flex; gap: 4px; background: rgba(20, 18, 32, .82); border: 2px solid var(--edge); border-radius: 16px; padding: 4px; backdrop-filter: blur(8px) }
.nav a { position: relative; display: flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 11px; text-decoration: none; color: var(--ink-2); font: 600 .9rem/1 var(--f-display) }
.nav a:hover { color: var(--ink); background: rgba(255, 255, 255, .05) }
.nav a[aria-current="page"] { color: #fff; background: var(--brand); box-shadow: 0 3px 0 var(--brand-deep) }
.nav .badge { position: absolute; top: 3px; right: 4px; width: 9px; height: 9px; border-radius: 50%; background: var(--gold); box-shadow: 0 0 0 2px #1a1726 }
.nav a.gear { padding: 8px 10px }

/* ---------- garage : couches au-dessus de la 3D ---------- */
.garage-page { overflow: hidden }
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none }
#labels, #pins { position: fixed; inset: 0; pointer-events: none; overflow: hidden }
#app.over { position: fixed; inset: 0; pointer-events: none; padding-top: calc(12px + env(safe-area-inset-top, 0px)); padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column }
#app.over > *, #app.over .hud > * { pointer-events: auto }
#app.over .hud { pointer-events: none }
.g-bottom { margin-top: auto; display: flex; align-items: end; gap: 12px; pointer-events: none }
.g-bottom > * { pointer-events: auto }
.goal { font: inherit; color: var(--ink); text-align: left; cursor: pointer; transition: border-color .15s; background: rgba(20, 18, 32, .88); border: 2px solid var(--edge); border-radius: var(--r); padding: 10px 14px; width: min(300px, 100%); backdrop-filter: blur(8px); display: grid; gap: 6px }
.goal small { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: var(--gold); font-weight: 800 }
.goal b { font: 600 1rem/1.2 var(--f-display) }
.steps { display: flex; gap: 4px }
.steps i { flex: 1; height: 6px; border-radius: 3px; background: var(--edge) }
.steps i.on { background: var(--ok) }
.dock { margin-left: auto; margin-right: auto; display: flex; gap: 8px; align-items: end; flex-wrap: wrap; justify-content: center }
.dock-r { display: flex; gap: 6px }
.with-sheet .g-bottom { padding-right: 420px }
.with-sheet .away { margin-right: 420px }

/* navigation compacte : seule la page courante garde son libellé sous 1500 px */
@media (max-width: 1500px) { .nav a:not([aria-current]) span { display: none } .nav a:not([aria-current]) { padding: 8px 10px } }
/* épingles au-dessus des objets cliquables */
.pin { position: absolute; left: 0; top: 0; pointer-events: auto; display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border-radius: 999px; background: rgba(20, 18, 32, .9); border: 2px solid var(--c); color: var(--ink); font: 600 .78rem/1 var(--f-display); cursor: pointer; white-space: nowrap; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); transition: filter .15s }
.pin::after { content: ""; position: absolute; left: 50%; bottom: -8px; width: 2px; height: 7px; background: var(--c); transform: translateX(-50%) }
.pin-ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: var(--c); color: #1a1426 }
.pin-ic .ic { width: 14px; height: 14px; stroke-width: 2.4 }
.pin-lb { max-width: 120px; overflow: hidden; text-overflow: ellipsis }
.pin:hover { filter: brightness(1.2); z-index: 2 }
.pin-ready { animation: bob 1.6s ease-in-out infinite; border-width: 3px }
.pin-compact .pin-lb { display: none }
.pin-compact { padding-right: 3px }
.pin-compact:hover .pin-lb { display: inline }
.pin-compact:hover { padding-right: 10px }
.pin-compact.pin-ready .pin-ic { box-shadow: 0 0 0 3px var(--night), 0 0 0 5px var(--gold) }
.pin-compact.pin-ready::before { content: "+"; position: absolute; top: -9px; right: -7px; width: 17px; height: 17px; border-radius: 50%; background: var(--gold); color: #2b1d00; font: 700 .8rem/17px var(--f-display); text-align: center }
.pin-ready .pin-lb { color: #fff }
.pin-idle { opacity: .82 }
.pin-idle .pin-lb { display: none }
.pin-idle:hover .pin-lb { display: inline }
.pin-idle { padding-right: 3px }
.pin-idle:hover { padding-right: 10px }
@keyframes bob { 0%, 100% { margin-top: 0 } 50% { margin-top: -5px } }

/* fiche contextuelle */
.sheet { position: fixed; top: calc(var(--hud-h, 72px) + 10px + env(safe-area-inset-top, 0px)); right: max(16px, env(safe-area-inset-right, 0px)); bottom: calc(16px + env(safe-area-inset-bottom, 0px)); width: min(390px, calc(100% - 32px)); background: var(--panel); border: 2px solid var(--edge); border-radius: 18px; box-shadow: var(--shadow); display: flex; flex-direction: column; overflow: hidden; pointer-events: auto; animation: slide .18s ease-out; z-index: 5 }
@keyframes slide { from { transform: translateX(20px); opacity: 0 } }
.sheet-head { position: relative; display: flex; gap: 12px; align-items: center; padding: 16px 16px 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--c) 34%, var(--panel)), var(--panel) 75%); border-bottom: 2px solid var(--edge) }
.sheet-head .big { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; background: var(--c); color: #1a1426; box-shadow: 0 4px 0 rgba(0, 0, 0, .3); flex: none }
.sheet-head .big .ic { width: 28px; height: 28px }
.sheet-head h2 { font-size: 1.3rem }
.sheet-head p { color: var(--ink-2); font-size: .84rem; margin-top: 2px }
.sheet-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 10px; border: 2px solid var(--edge); background: rgba(0, 0, 0, .25); color: var(--ink); display: grid; place-items: center; cursor: pointer }
.sheet-body { padding: 14px 16px 18px; overflow-y: auto; flex: 1; min-height: 0; display: grid; gap: 14px; align-content: start }
.sheet-foot { padding: 12px 16px calc(14px + env(safe-area-inset-bottom, 0px)); border-top: 2px solid var(--edge); display: grid; gap: 8px; background: #191726 }

/* blocs réutilisables */
.box { background: var(--panel-2); border: 2px solid var(--edge); border-radius: 12px; padding: 12px 13px; display: grid; gap: 8px }
.box h3 { font-size: 1rem }
.kv { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; font-size: .9rem }
.kv dt { color: var(--ink-2) }
.kv dd { margin: 0; font-weight: 700 }
.lvl { display: flex; gap: 5px; align-items: center }
.lvl i { width: 26px; height: 10px; border-radius: 4px; background: var(--edge) }
.lvl i.on { background: var(--c); box-shadow: 0 0 8px var(--c) }
.hw-step { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 8px; align-items: start; font-size: .9rem }
.hw-step .dotc { width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--edge); margin-top: 2px }
.hw-step.done .dotc { background: var(--c); border-color: var(--c) }
.hw-step.next .dotc { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 30%, transparent) }
.hw-step.next b { color: var(--ink) }
.hw-step span { color: var(--ink-2) }
.cost { display: flex; align-items: center; gap: 6px; font: 600 1.05rem var(--f-display) }
.note { font-size: .84rem; color: var(--ink-2) }
.note.warn { color: var(--warn) }
.note.bad { color: var(--bad) }
.chip { display: inline-flex; align-items: center; gap: 5px; font-size: .74rem; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1.5px solid var(--edge); color: var(--ink-2) }
.chip.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 55%, transparent) }
.chip.bad { color: var(--bad); border-color: color-mix(in srgb, var(--bad) 55%, transparent) }
.chip.gold { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 55%, transparent) }
.progress { height: 12px; border-radius: 6px; background: #12101d; border: 2px solid var(--edge); overflow: hidden }
.progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--brand), var(--p-reseau)) }
.list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.client { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--panel-2); border: 2px solid var(--edge); border-radius: 12px; padding: 8px 10px }
.client .av { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; font: 700 .95rem var(--f-display); background: color-mix(in srgb, var(--c) 30%, var(--panel)); color: var(--ink); border: 2px solid var(--c) }
.client b { display: block; font-size: .92rem }
.client span { display: block; font-size: .78rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.client em { font-style: normal; font: 600 .9rem var(--f-display); color: var(--ok); white-space: nowrap }
.client.free { border-style: dashed; background: transparent }
.client.free .av { border-style: dashed; background: transparent; color: var(--ink-2) }
.vote-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; background: var(--panel-2); border: 2px solid var(--edge); border-radius: 12px; padding: 10px 12px }
.vote-row.mine { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 30%, transparent) }
.vote-row b { display: block }
.vote-row small { color: var(--ink-2) }

/* bandeaux et messages */
.banner { border-radius: 14px; padding: 11px 14px; border: 2px solid var(--c, var(--brand)); background: color-mix(in srgb, var(--c, var(--brand)) 15%, var(--panel)); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; pointer-events: auto }
.banner b { font-family: var(--f-display); font-weight: 600 }
.away { align-self: center; margin-top: 12px; max-width: min(620px, 100%); box-shadow: var(--shadow) }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(96px + env(safe-area-inset-bottom, 0px)); background: #f4f1ff; color: #15102a; padding: 11px 18px; border-radius: 12px; font-weight: 800; max-width: calc(100% - 32px); z-index: 60; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); border-bottom: 4px solid #c9c1ea }
.toast.ok { background: var(--ok); color: #062015; border-bottom-color: #2b9a69 }
.toast.bad { background: var(--bad); color: #2a0806; border-bottom-color: #a8423d }
.tip { position: fixed; pointer-events: none; background: #1e1a33; border: 2px solid #5a4f8a; color: var(--ink); padding: 6px 10px; border-radius: 9px; font-size: .82rem; z-index: 20; max-width: 280px }
.name-tag { position: absolute; left: 0; top: 0; background: var(--brand); color: #fff; font: 600 .8rem/1 var(--f-display); padding: 4px 9px; border-radius: 8px; white-space: nowrap; box-shadow: 0 3px 0 var(--brand-deep) }
.floater { position: absolute; left: 0; top: 0; font: 700 1rem var(--f-display); white-space: nowrap; text-shadow: 0 2px 8px #000 }
.err { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); max-width: min(420px, calc(100% - 32px)); background: #3a1418; border: 2px solid var(--bad); color: #ffe3e0; padding: 10px 12px; border-radius: 12px; font-size: .84rem; z-index: 40 }
.maint { background: var(--warn); color: #2a1b00; font-weight: 800; padding: 8px 14px; border-radius: 10px; align-self: center; margin-top: 10px }

/* connexion */
.login-wrap { position: fixed; inset: 0; display: grid; place-items: center; padding-block: 24px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-y: auto; pointer-events: auto; background: radial-gradient(ellipse at 50% 40%, rgba(16, 15, 26, .35), rgba(16, 15, 26, .9)) }
.login { width: min(460px, 100%); background: var(--panel); border: 2px solid var(--edge); border-radius: 20px; padding: 26px; display: grid; gap: 14px; box-shadow: var(--shadow) }
.login h1 { font-size: 2.2rem }
.login .lead { color: var(--ink-2) }
.login label { font-size: .74rem; text-transform: uppercase; letter-spacing: .08em; color: var(--ink-2); font-weight: 800 }
.login input { font-size: 1.05rem; padding: 11px 13px }
.btn.twitch { --b: #8a45ff; --b-edge: #5b25c0; --t: #fff }
.login .fine { font-size: .8rem; color: var(--ink-2); border: 2px dashed var(--edge); border-radius: 12px; padding: 10px 12px }

/* ---------- pages secondaires ---------- */
.page { min-height: 100%; background:
  radial-gradient(ellipse 80% 50% at 50% -10%, rgba(157, 107, 255, .16), transparent 70%),
  repeating-linear-gradient(30deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 34px),
  repeating-linear-gradient(-30deg, rgba(255, 255, 255, .018) 0 1px, transparent 1px 34px), var(--night) }
.page-top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 10; background: rgba(16, 15, 26, .9); backdrop-filter: blur(10px); border-bottom: 2px solid var(--edge); padding-block: 10px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.page-top .hud { max-width: 1600px; margin: 0 auto }
body.page::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--night) }
.page-main { max-width: 1180px; margin: 0 auto; padding-block: 26px 90px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); display: grid; gap: 22px }
.page-title { display: flex; gap: 14px; align-items: center; flex-wrap: wrap }
.page-title .big { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; background: var(--c, var(--brand)); color: #1a1426; box-shadow: 0 5px 0 rgba(0, 0, 0, .35) }
.page-title .big .ic { width: 30px; height: 30px }
.page-title h1 { font-size: 2rem }
.page-title p { color: var(--ink-2); max-width: 62ch }
.section-h { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap }
.section-h h2 { font-size: 1.3rem }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px }
.card { background: var(--panel); border: 2px solid var(--edge); border-radius: 18px; padding: 16px; display: grid; gap: 12px; align-content: start; min-width: 0 }

/* appels d'offres */
.flyer { position: relative; background: var(--panel); border: 2px solid var(--edge); border-radius: 18px; overflow: hidden; display: grid; align-content: start; min-width: 0 }
.flyer.mine { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 28%, transparent) }
.flyer-top { padding: 16px; background: linear-gradient(160deg, color-mix(in srgb, var(--c) 30%, var(--panel)), var(--panel) 80%); display: grid; gap: 10px }
.flyer-top .av { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font: 700 1.3rem var(--f-display); background: var(--c); color: #1a1426; box-shadow: 0 4px 0 rgba(0, 0, 0, .3) }
.flyer-top h3 { font-size: 1.25rem }
.flyer-body { padding: 0 16px 16px; display: grid; gap: 12px }
.flyer .persona { color: var(--ink-2); font-size: .92rem }
.flyer .money { font: 600 1.6rem/1 var(--f-display); color: var(--ok) }
.flyer .money small { font-size: .85rem; color: var(--ink-2); font-family: var(--f-body); font-weight: 700 }
.voters { display: flex; gap: 5px; flex-wrap: wrap; min-height: 26px }
.voter { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; font-weight: 800; padding: 3px 9px 3px 3px; border-radius: 999px; background: color-mix(in srgb, var(--c) 22%, transparent); border: 1.5px solid var(--c) }
.voter i { width: 18px; height: 18px; border-radius: 50%; background: var(--c); display: grid; place-items: center; font-style: normal; font-size: .62rem; color: #1a1426 }
.votebar { height: 10px; border-radius: 5px; background: #12101d; overflow: hidden }
.votebar i { display: block; height: 100%; background: var(--c) }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px }
.timeline li { display: grid; grid-template-columns: 54px 38px minmax(0, 1fr); gap: 10px; align-items: center; background: var(--panel); border: 2px solid var(--edge); border-radius: 14px; padding: 9px 12px }
.timeline .d { font: 600 .9rem var(--f-display); color: var(--ink-2) }
.timeline .tic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; background: color-mix(in srgb, var(--c) 25%, var(--panel-2)); color: var(--c); border: 2px solid color-mix(in srgb, var(--c) 50%, transparent) }
.timeline .tic .ic { width: 20px; height: 20px }
.filters { display: flex; gap: 6px; flex-wrap: wrap }
.fchip { font: 600 .86rem var(--f-display); padding: 7px 13px; border-radius: 999px; border: 2px solid var(--edge); background: var(--panel); color: var(--ink-2); cursor: pointer }
.fchip[aria-pressed="true"] { background: var(--brand); color: #fff; border-color: var(--brand) }

/* équipe */
.me-card { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 20px; align-items: start }
.avatar-stage { background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--brand) 30%, var(--panel-2)), var(--panel) 70%); border: 2px solid var(--edge); border-radius: 18px; padding: 16px 10px 12px; display: grid; justify-items: center; gap: 6px }
.avatar-svg { width: 170px; height: auto }
.avatar-stage b { font: 600 1.2rem var(--f-display) }
.opts { display: grid; gap: 14px }
.opts h3 { font-size: .95rem; color: var(--ink-2) }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 7px }
.swatch { width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--c); border: 3px solid rgba(255, 255, 255, .14); cursor: pointer }
.swatch[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 3px var(--brand) }
.choices { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 7px }
.choice { font: 600 .88rem var(--f-display); padding: 8px 13px; border-radius: 11px; border: 2px solid var(--edge); background: var(--panel-2); color: var(--ink); cursor: pointer; box-shadow: 0 3px 0 #15131f }
.choice[aria-pressed="true"] { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-deep) }
.roster { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px }
.mate { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; background: var(--panel); border: 2px solid var(--edge); border-radius: 16px; padding: 10px 12px }
.mate.me { border-color: var(--brand) }
.mate .avatar-svg { width: 62px }
.mate b { display: block; font: 600 1.02rem var(--f-display); overflow: hidden; text-overflow: ellipsis }
.mate small { display: block; color: var(--ink-2); font-size: .78rem }
.mate .chips { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 5px }

/* academy */
.news li, .rules li { font-size: .92rem; color: var(--ink-2) }
.news, .rules { margin: 0; padding-left: 18px; display: grid; gap: 6px }
details.faq { background: var(--panel); border: 2px solid var(--edge); border-radius: 14px; padding: 12px 14px }
details.faq summary { cursor: pointer; font: 600 1rem var(--f-display); list-style: none; display: flex; justify-content: space-between; gap: 10px }
details.faq summary::after { content: "+"; color: var(--brand); font-weight: 700 }
details.faq[open] summary::after { content: "−" }
details.faq p { margin-top: 8px; color: var(--ink-2) }
.missions { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.missions li { display: flex; gap: 10px; align-items: center; background: var(--panel-2); border: 2px solid var(--edge); border-radius: 12px; padding: 9px 12px; font-weight: 700 }
.missions li .tick { width: 26px; height: 26px; border-radius: 8px; border: 2px solid var(--edge); display: grid; place-items: center; flex: none; font: 700 .85rem var(--f-display); color: var(--ink-2) }
.missions li.done { color: var(--ink-2) }
.missions li.done .tick { background: var(--ok); border-color: var(--ok); color: #062015 }
.howto { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.howto li { counter-increment: s; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start }
.howto li::before { content: counter(s); width: 34px; height: 34px; border-radius: 10px; background: var(--brand); color: #fff; display: grid; place-items: center; font: 700 1rem var(--f-display); box-shadow: 0 3px 0 var(--brand-deep) }
.howto b { font-family: var(--f-display); font-weight: 600 }

/* console d'administration */
.adm-tabs { display: flex; gap: 6px; flex-wrap: wrap }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px }
.tile { background: var(--panel); border: 2px solid var(--edge); border-radius: 14px; padding: 11px 13px; display: grid; gap: 3px; min-width: 0 }
.tile span { font-size: .7rem; color: var(--ink-2); text-transform: uppercase; letter-spacing: .07em; font-weight: 800 }
.tile b { font: 600 1.1rem var(--f-display); overflow-wrap: anywhere }
.tbl { overflow-x: auto; border: 2px solid var(--edge); border-radius: 14px; background: var(--panel) }
table { border-collapse: collapse; width: 100%; font-size: .84rem }
th, td { text-align: left; padding: 7px 10px; border-bottom: 1px solid var(--edge); vertical-align: top }
th { color: var(--ink-2); font-weight: 800; position: sticky; top: 0; background: var(--panel-2) }
tr.sel td { background: color-mix(in srgb, var(--brand) 16%, transparent) }
code.data { color: var(--ink-2); word-break: break-all }
.afilters { display: flex; gap: 10px; flex-wrap: wrap; align-items: end }
.afilters label { display: grid; gap: 3px; font-size: .76rem; color: var(--ink-2); font-weight: 800 }
.afilters input { width: 96px }
.csv { width: 100%; height: 130px; font-family: var(--f-mono); font-size: .76rem }
.alerts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px }
.alerts li { padding: 9px 12px; border-radius: 12px; border: 2px solid var(--warn); background: var(--panel); font-size: .88rem }
.alerts li.alert-haute { border-color: var(--bad) }
.chart { width: 100%; height: auto }
.chart .axis { stroke: var(--edge) }
.chart .tick { fill: var(--ink-2); font-size: 11px; font-family: var(--f-mono) }
.chart .val { fill: var(--ink); font-size: 12px; font-family: var(--f-mono); font-weight: 600 }
.legend { display: flex; gap: 14px; font-size: .8rem; color: var(--ink-2); flex-wrap: wrap }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px }
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px }
.cfg { display: grid; gap: 4px; font-size: .8rem; color: var(--ink-2) }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center }
.row input { flex: 1 1 140px }

/* ---------- téléphone ---------- */
@media (max-width: 860px) {
  .nav a span { display: none }
  .nav a { padding: 9px 10px }
  .grid-3 { grid-template-columns: minmax(0, 1fr) }
  .grid-2 { grid-template-columns: minmax(0, 1fr) }
  .me-card { grid-template-columns: minmax(0, 1fr) }
}
@media (max-width: 640px) {
  .res { flex: 1 1 auto; gap: 0; padding: 4px 4px; overflow-x: auto; scrollbar-width: none }
  .res .r { padding: 3px 7px; gap: 4px }
  .res .r b { font-size: .9rem }
  .res .r .ic { width: 15px; height: 15px }
  .res .cd, .meal-badge { font-size: .7rem }
  .nav { position: fixed; left: max(10px, env(safe-area-inset-left, 0px)); right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(10px + env(safe-area-inset-bottom, 0px)); justify-content: space-around; z-index: 30; margin: 0 }
  .nav a { flex: 1; justify-content: center }
  .garage-page .g-bottom { margin-bottom: 64px; flex-direction: column; align-items: stretch }
  .goal { width: 100% }
  .dock { width: 100% }
  .sheet { top: auto; left: max(8px, env(safe-area-inset-left, 0px)); right: max(8px, env(safe-area-inset-right, 0px)); width: auto; height: 62%; bottom: calc(8px + env(safe-area-inset-bottom, 0px)); animation-name: rise; z-index: 40 }
  @keyframes rise { from { transform: translateY(30px); opacity: 0 } }
  .page-title h1 { font-size: 1.6rem }
  .page-top { backdrop-filter: none; background: var(--night) }
  .nav { backdrop-filter: none; background: #171523 }
  .page-main { padding-bottom: 110px }
  .toast { bottom: calc(80px + env(safe-area-inset-bottom, 0px)) }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important } }

/* v0.1.9 : objectif guidé, atelier, série de cafés, chargement, sauvegarde */
.goal:hover { border-color: var(--gold) }
.pin-goal { border-color: var(--gold); border-width: 3px; z-index: 3; animation: bob 1.2s ease-in-out infinite }
.pin-goal .pin-ic { background: var(--gold) }
.pin-goal .pin-lb { display: inline !important; color: var(--gold) }
.atelier-row { font: inherit; color: var(--ink); cursor: pointer; width: 100%; transition: border-color .15s }
.atelier-row:hover { border-color: var(--c) }
.cups { display: flex; gap: 6px; flex-wrap: wrap }
.cup { display: grid; justify-items: center; gap: 2px; width: 38px; padding: 6px 0 4px; border-radius: 10px; border: 2px dashed var(--edge); color: var(--ink-2) }
.cup small { font-size: .62rem; font-weight: 800 }
.cup.on { border: 2px solid var(--gold); background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--gold) }
.cup.today { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 40%, transparent) }
.loader { position: fixed; inset: 0; display: grid; place-items: center; z-index: 50; background: var(--night); color: var(--ink-2); font: 600 1.05rem var(--f-display); pointer-events: none }
.loader div { display: grid; justify-items: center; gap: 14px }
.loader i { width: 46px; height: 46px; border-radius: 50%; border: 5px solid var(--edge); border-top-color: var(--brand); animation: spin .9s linear infinite }
@keyframes spin { to { transform: rotate(360deg) } }
.savebox { width: 100%; min-height: 90px; font-family: var(--f-mono); font-size: .74rem; resize: vertical }
.mate .streak { color: var(--gold); font-weight: 800 }

/* console d'administration complète */
.motif-bar { position: sticky; top: calc(var(--page-top-h, 66px) + env(safe-area-inset-top, 0px)); z-index: 8; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; background: color-mix(in srgb, var(--gold) 12%, var(--panel)); border: 2px solid color-mix(in srgb, var(--gold) 55%, var(--edge)); border-radius: 14px; padding: 10px 12px }
.motif-bar label { display: flex; gap: 6px; align-items: center; font: 600 .92rem var(--f-display); color: var(--gold); white-space: nowrap }
.motif-bar input { flex: 1 1 260px }
.adm-layout { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 18px; align-items: start }
.adm-nav { position: sticky; top: calc(var(--page-top-h, 66px) + 74px); display: grid; gap: 4px; background: var(--panel); border: 2px solid var(--edge); border-radius: 16px; padding: 6px }
.adm-nav button { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 11px; border: 0; background: none; color: var(--ink-2); font: 600 .92rem var(--f-display); cursor: pointer; text-align: left }
.adm-nav button:hover { background: rgba(255, 255, 255, .05); color: var(--ink) }
.adm-nav button[aria-current="true"] { background: var(--brand); color: #fff; box-shadow: 0 3px 0 var(--brand-deep) }
.adm-nav .cnt { margin-left: auto; font-style: normal; font-size: .72rem; background: var(--warn); color: #2b1d00; border-radius: 999px; padding: 1px 7px }
.adm-main { display: grid; gap: 16px; min-width: 0 }
.adm-main h3 { font-size: 1rem; margin-top: 4px }
.confirm { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; padding: 4px 8px; border-radius: 10px; background: color-mix(in srgb, var(--bad) 14%, transparent) }
tr.off td { opacity: .55 }
.voter .linkbtn { text-decoration: none; color: var(--bad); font-weight: 800; padding: 0 2px }
@media (max-width: 860px) {
  .adm-layout { grid-template-columns: minmax(0, 1fr) }
  .adm-nav { position: static; display: flex; overflow-x: auto; scrollbar-width: none }
  .adm-nav button { white-space: nowrap }
  .motif-bar { position: static }
}

/* v0.2 : incidents, énigmes, roue de sanction, améliorations, fiches */
.nav .badge.red { background: var(--bad) }
.inc-banner { animation: alarm 1.6s ease-in-out infinite }
@keyframes alarm { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 112, 106, .0) } 50% { box-shadow: 0 0 0 6px rgba(242, 112, 106, .25) } }
.gauge { height: 18px; border-radius: 9px; background: #12101d; border: 2px solid var(--edge); overflow: hidden }
.gauge i { display: block; height: 100%; background: linear-gradient(90deg, var(--bad), var(--warn) 50%, var(--ok)); transition: width .4s }
.box.locked { opacity: .55 }
.box.ok-box { border-color: color-mix(in srgb, var(--ok) 55%, var(--edge)) }
.act-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 9px 0; border-top: 1px solid var(--edge) }
.act-row.done b { color: var(--ink-2) }
.act-row small { display: block; margin-top: 3px }
.puzzle { border-color: var(--gold) }
.term { margin: 0; background: #05070c; color: #b8f7c8; border: 2px solid #1d2a22; border-radius: 10px; padding: 10px 12px; font: .74rem/1.55 var(--f-mono); overflow-x: auto; white-space: pre-wrap; overflow-wrap: anywhere }
.switch { display: grid; gap: 6px; background: #2a2f37; border-radius: 10px; padding: 10px }
.port { display: grid; grid-template-columns: 30px 70px minmax(0, 1fr); gap: 8px; align-items: center }
.port .pn { width: 30px; height: 24px; border-radius: 4px; background: #0d0e11; color: #c9a227; display: grid; place-items: center; font: 700 .8rem var(--f-mono) }
.cab { display: block; height: 8px; border-radius: 4px }
.cab-bleu { background: #3d8bff } .cab-jaune { background: #f2d22e } .cab-gris { background: #9aa0a8 } .cab-rouge { background: #e5484d }
.port .tag { background: #f4f1e8; color: #1d1b2b; font-weight: 800; font-size: .74rem; padding: 2px 7px; border-radius: 4px; justify-self: start }
.feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: .88rem }
.feed .pos { color: var(--ok); font-weight: 800 } .feed .neg { color: var(--bad); font-weight: 800 }
.feed.sanc li { background: color-mix(in srgb, var(--bad) 12%, var(--panel-2)); border: 2px solid color-mix(in srgb, var(--bad) 40%, var(--edge)); border-radius: 10px; padding: 8px 10px; font-weight: 700 }
.overlay { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; background: rgba(10, 9, 18, .72); backdrop-filter: blur(4px); padding-block: 20px; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); overflow-y: auto; pointer-events: auto }
.out-card { width: min(560px, 100%); background: var(--panel); border: 3px solid var(--edge); border-radius: 22px; padding: 22px; display: grid; gap: 14px; text-align: center; box-shadow: var(--shadow); animation: pop .25s ease-out }
@keyframes pop { from { transform: scale(.92); opacity: 0 } }
.out-card .box { text-align: left }
.out-card h2 { font-size: 1.7rem }
.out-card .lead { color: var(--ink-2) }
.out-card.win { border-color: var(--ok) }
.out-card.lose { border-color: var(--bad) }
.out-ic { width: 64px; height: 64px; border-radius: 50%; margin: 0 auto; display: grid; place-items: center; background: var(--ok); color: #062015 }
.out-ic .ic { width: 36px; height: 36px; stroke-width: 3 }
.wheel { position: relative; width: 210px; height: 210px; margin: 4px auto }
.wheel-disc { position: absolute; inset: 0; border-radius: 50%; border: 6px solid #12101d; box-shadow: 0 0 0 3px var(--edge), inset 0 0 0 2px rgba(255, 255, 255, .15); transition: transform 3.2s cubic-bezier(.12, .7, .1, 1) }
.wheel-pin { position: absolute; left: 50%; top: -8px; width: 0; height: 0; transform: translateX(-50%); border-left: 13px solid transparent; border-right: 13px solid transparent; border-top: 24px solid #fff; filter: drop-shadow(0 2px 2px #000) }
.mono { font-family: var(--f-mono); font-size: .76rem; overflow-wrap: anywhere }
.upg .big-ic { width: 34px; height: 34px }
.upg .big-ic .ic { width: 20px; height: 20px }
.riskrow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.5fr) 44px; gap: 10px; align-items: center; font-size: .9rem }
.fiche { background: var(--panel-2); border: 2px solid var(--edge); border-radius: 14px; padding: 13px 14px; display: grid; gap: 7px; font-size: .9rem }
.fiche h3 { font-size: 1.02rem; display: flex; gap: 6px; align-items: center }
.fiche.locked { border-style: dashed; background: transparent }
.fiche a { color: var(--brand); font-weight: 700 }

.box.hilite { border-color: var(--gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 25%, transparent) }

/* fenêtres basses : le dock reste visible sur une ligne compacte */
@media (max-height: 700px) and (min-width: 641px) {
  .g-bottom { align-items: center }
  .goal { padding: 6px 10px; gap: 3px; width: min(250px, 100%) }
  .goal .steps { display: none }
  .dock { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 4px }
  .dock .btn, .dock .btn.lg { padding: 8px 12px; font-size: .86rem }
}
/* v0.3 métiers */
.chip.job, .chip[class*="scope-"] { color: var(--c); border-color: color-mix(in srgb, var(--c) 55%, transparent) }
.chip.job svg, .chip[class*="scope-"] svg { width: 13px; height: 13px }
.chip.scope-pole { opacity: .85; border-style: dashed }
.chip.scope-hors { color: var(--ink-2); border-color: var(--edge); border-style: dashed }
.metiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px }
.metier { background: var(--panel-2); border: 2px solid var(--edge); border-radius: 14px; padding: 12px; display: grid; gap: 7px; align-content: start }
.metier.mine { border-color: var(--c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c) 22%, transparent) }
.metier.locked { opacity: .6; border-style: dashed }
.metier-h { display: flex; gap: 9px; align-items: center }
.metier-h b { display: block; font: 600 1rem var(--f-display) }
.metier-h small { color: var(--ink-2); font-size: .76rem }
.metier .btn { justify-self: start }
.btn small { display: block; font-size: .7rem; font-weight: 700; opacity: .8 }
.sheet .metiers { grid-template-columns: 1fr }
.btn:has(small) { flex-direction: column; gap: 1px; line-height: 1.15 }

.dock .btn .lbl { display: inline }
@media (max-width: 1500px) { .with-sheet .dock .btn:not(.gold) .lbl { display: none } .with-sheet .dock .btn:not(.gold) { padding-left: 12px; padding-right: 12px } }
body:has(.overlay) .toast { bottom: auto; top: calc(14px + env(safe-area-inset-top, 0px)) }
.cfg-h { margin: 14px 0 6px; font-size: .95rem; color: var(--ink-2) }
.json-edit { min-height: 340px; font-size: .8rem; line-height: 1.45; white-space: pre; tab-size: 2 }

.save-fail { position: fixed; left: 50%; top: 10px; transform: translateX(-50%); z-index: 80; max-width: min(640px, calc(100% - 24px)); background: var(--bad); color: #2a0806; font-weight: 800; padding: 10px 14px; border-radius: 12px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5) }
.sup-banner .muted { line-height: 1.45 }
.prev-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid var(--edge) }
.prev-row:first-child { border-top: 0 }
.sup-sig { font-family: var(--f-mono, 'JetBrains Mono', monospace); font-size: .82rem; color: var(--warn) }
.steps-v { display: grid; gap: 6px }
.cnt-ok { color: var(--ok) } .cnt-warn { color: var(--warn) } .cnt-bad { color: var(--bad) }

.spark { display: flex; align-items: end; gap: 3px; height: 46px; margin: 6px 0 }
.spark i { flex: 1; background: color-mix(in srgb, var(--gold) 70%, transparent); border-radius: 3px 3px 0 0; min-width: 4px }

.pi.wx { font-size: 1rem; line-height: 1; color: #1a1426 }

/* v0.3.9 : barre du haut, messages, accessibilité, mobile */
.wx-inline { font: 600 .82rem var(--f-body, inherit); color: var(--ink-2); margin-left: 4px }
.toast-stack { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(150px + env(safe-area-inset-bottom, 0px)); display: grid; gap: 6px; z-index: 59; pointer-events: none; width: max-content; max-width: calc(100% - 32px) }
.toast.old { position: static; transform: none; opacity: .72; font-size: .86rem; padding: 8px 14px }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; border-radius: 6px }
.btn:focus-visible, .pin:focus-visible { outline-offset: 3px }
@media (max-width: 640px) {
  .wx-inline { font-size: .74rem }
  .toast { top: calc(var(--hud-h, 96px) + 8px); bottom: auto }
  .toast-stack { top: calc(var(--hud-h, 96px) + 56px); bottom: auto }
  .garage-page .banner .muted { display: none }
  .garage-page .banner { padding: 8px 10px }
  .garage-page .dock .btn:not(.gold) .lbl { display: none }
  .garage-page .goal { padding: 6px 10px } .garage-page .goal .steps { display: none } .garage-page .goal small { font-size: .62rem }
}
.up-group { display: grid; gap: 10px; margin-bottom: 8px }
.up-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px }
.upc { background: var(--panel); border: 2px solid var(--edge); border-radius: 16px; padding: 12px 14px; display: grid; gap: 8px; align-content: start }
.upc.dispo { border-color: color-mix(in srgb, var(--gold) 60%, var(--edge)) }
.upc.max { opacity: .82 }
.upc.bloque { border-style: dashed }
.upc-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center }
.upc-h h3 { font: 600 1.02rem var(--f-display); margin: 0 }
.lvl-dots { display: flex; align-items: center; gap: 4px; margin-top: 3px }
.lvl-dots i { width: 16px; height: 6px; border-radius: 3px; background: var(--edge) }
.lvl-dots i.on { background: var(--p-reseau) }
.lvl-dots small { color: var(--ink-2); font-size: .72rem; margin-left: 4px }
.upc-all summary { cursor: pointer; color: var(--ink-2); font-size: .82rem; font-weight: 700 }
.upc-all ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: .82rem }
.upc-all li.done b { color: var(--ok) }
details.card > summary { cursor: pointer; list-style: none }
details.card > summary::-webkit-details-marker { display: none }
.tl-days { gap: 6px }
.tl-days li { grid-template-columns: 38px minmax(0, 1fr); padding: 8px 12px }
.tl-days li.day-h { display: flex; gap: 8px; align-items: center; background: transparent; border: 0; padding: 12px 2px 2px; font: 600 1rem var(--f-display); color: var(--ink-2) }

.lbl-short { display: none }
@media (max-width: 640px) {
  .toast-stack { display: none }
  .garage-page .dock { flex-wrap: nowrap; gap: 6px }
  .garage-page .dock .btn.lg { padding: 10px 16px; font-size: 1rem }
  .garage-page .lbl-long { display: none } .garage-page .lbl-short { display: inline }
}

/* v0.3.10 : onglets de fiche (Coin pause) */
.tabs { display: flex; gap: 4px; background: var(--panel-2); border: 2px solid var(--edge); border-radius: 12px; padding: 3px }
.tab { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 9px; padding: 8px 10px; background: transparent; color: var(--ink-2); font: 600 .9rem var(--f-display); cursor: pointer }
.tab .ic { width: 16px; height: 16px }
.tab.on { background: var(--gold); color: #1a1426 }
@media (max-width: 1000px) and (min-width: 641px) { .res { overflow-x: auto; scrollbar-width: none } .res .r { padding: 3px 8px } .wx-inline { display: none } }
@media (max-width: 640px) {
  .page-top .brandmark, #app .hud .brandmark { display: none }
  .res { justify-content: space-between }
  .res .r { padding: 3px 6px }
  .cd-i, .wx-t { display: none }
  .res .r.day .ic { display: none }
  .res .r .ic { width: 14px; height: 14px }
}
@media (max-width: 640px) { .mb-v { display: none } }
/* v0.4.0 : console, listes longues dans les cartes */
.adm-main .box .row select, .adm-main .row select { max-width: 100%; min-width: 0; flex: 1 1 140px; text-overflow: ellipsis }
.adm-main .grid-2 > *, .adm-main .box { min-width: 0 }
.adm-main .box > * { min-width: 0 }
/* v0.4.1 : atelier personnage */
.atelier-page { margin: 0; background: var(--night); overflow: hidden }
#at-scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block }
.at-panel { position: fixed; top: max(12px, env(safe-area-inset-top, 0px)); left: max(12px, env(safe-area-inset-left, 0px)); bottom: 12px; width: min(340px, calc(100% - 24px)); overflow-y: auto; display: grid; gap: 10px; align-content: start; background: rgba(20, 18, 32, .9); border: 2px solid var(--edge); border-radius: 16px; padding: 14px; backdrop-filter: blur(8px) }
.at-head { display: grid; gap: 2px } .at-head b { font: 600 1.15rem var(--f-display) }
.at-panel select { width: 100% }
@media (max-width: 640px) { .at-panel { top: auto; height: 46%; width: auto; right: 12px } }

/* v0.4.1 — création simple du personnage et aperçu 3D */
.perso-ed { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 18px; align-items: start }
.perso-ed.compact { grid-template-columns: minmax(0, 1fr); gap: 12px }
.pv-slot { position: relative; height: 320px; border-radius: 18px; border: 2px solid var(--edge); background: radial-gradient(circle at 50% 72%, color-mix(in srgb, var(--brand) 32%, var(--panel-2)), var(--panel) 72%); overflow: hidden; touch-action: none }
.perso-ed.compact .pv-slot { height: 240px }
.pv-slot.sm { height: 210px; width: 100%; min-width: 160px }
.avatar-stage .pv-slot { width: 100%; border: 0; background: transparent }
.pv-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab }
.pv-canvas:active { cursor: grabbing }
.pv-status { position: absolute; inset: auto 8px 8px; text-align: center; font-size: .8rem; color: var(--ink-2) }
.pv-hint { position: absolute; right: 10px; top: 8px; font-size: .72rem; color: var(--ink-2); pointer-events: none; z-index: 1 }
.perso-ed .choices { flex-wrap: wrap }
@media (max-width: 640px) { .perso-ed { grid-template-columns: minmax(0, 1fr) } .pv-slot { height: 260px } }
.box.place.cur { border-color: var(--ok, #4cc38a) }
.box.place.off { opacity: .55 }
.box.place .tiles { margin: 0 }