/* Faubourg55 V6.2 : carte plein écran, bandeaux et commandes en surimpression translucide. */
:root {
  --bg: #0B1020;
  --sea: #0B1020;
  --panel: #151C31;
  --panel-2: #1D2642;
  --glass: rgba(11, 16, 32, .72);
  --line: #2A3558;
  --text: #EEF1F8;
  --muted: #8E98B5;
  --land: #474B57;
  --land-line: #0B1020;
  --accent: #F2C14E;
  --danger: #E5484D;
  --ok: #3DD68C;
  --player: #F08C21;
  --radius: 14px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); overflow: hidden; }
body { font: 15px/1.35 var(--font); overscroll-behavior: none; -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
#root { position: fixed; inset: 0; overflow: hidden; background: var(--bg); }

/* Paysage forcé (Gouverner) sur un navigateur tenu en portrait : #root pivote d'un quart de tour. */
@media (orientation: portrait) {
  html[data-orient="landscape"] #root { width: 100vh; height: 100vw; inset: auto; top: 0; left: 100vw; transform: rotate(90deg); transform-origin: top left; }
}

/* ---------- Écrans de menu (défilants) ---------- */
.screen { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.home { min-height: 100%; max-width: 560px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px;
  padding: calc(22px + var(--safe-top)) calc(20px + var(--safe-right)) calc(24px + var(--safe-bottom)) calc(20px + var(--safe-left)); }
.logo { font-size: 40px; font-weight: 800; letter-spacing: -1px; margin: 14px 0 0; }
.logo span { color: var(--accent); }
.tag { color: var(--muted); margin: -10px 0 0; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.field input { font: inherit; font-size: 18px; font-weight: 700; color: var(--text); background: var(--panel); border: 2px solid var(--line); border-radius: var(--radius); padding: 12px 14px; outline: none; }
.field input:focus { border-color: var(--player); }
.swatches { display: flex; gap: 10px; flex-wrap: wrap; }
.swatch { width: 40px; height: 40px; border-radius: 50%; border: 3px solid transparent; box-shadow: inset 0 0 0 2px rgba(0,0,0,.25); }
.swatch[aria-pressed="true"] { border-color: var(--text); transform: scale(1.08); }
.rivals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rival { background: var(--panel); border-radius: 12px; padding: 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 12px; text-align: center; color: var(--muted); }
.rival b { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; }
.cta { background: var(--player); color: #111; font-weight: 800; font-size: 18px; border-radius: 999px; padding: 16px 20px; text-align: center; box-shadow: 0 6px 24px color-mix(in srgb, var(--player) 40%, transparent); }
.cta:disabled, .ghost:disabled { opacity: .4; box-shadow: none; }
.ghost { border: 2px solid var(--line); border-radius: 999px; padding: 12px 18px; font-weight: 700; text-align: center; }
.spacer { flex: 1; }
.hint { color: var(--muted); font-size: 13px; text-align: center; margin: 0; }

.modes { display: grid; gap: 12px; }
.mode { display: grid; grid-template-columns: 52px 1fr; gap: 4px 12px; align-items: center; text-align: left; background: var(--panel); border: 2px solid var(--line); border-radius: 18px; padding: 14px; }
.mode .mi { grid-row: span 2; font-size: 34px; text-align: center; }
.mode b { font-size: 17px; }
.mode small { color: var(--muted); font-size: 13px; line-height: 1.35; }
.mode.main { border-color: var(--player); background: color-mix(in srgb, var(--player) 12%, var(--panel)); }
.diffs { display: grid; gap: 8px; }
.diff { display: grid; grid-template-columns: 40px 1fr; gap: 2px 10px; text-align: left; background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.diff .mi { grid-row: span 2; font-size: 26px; text-align: center; align-self: center; }
.diff small { color: var(--muted); font-size: 12px; }
.diff:active, .mode:active { border-color: var(--accent); }

/* ---------- Partie : carte plein écran ---------- */
.game { position: absolute; inset: 0; }
.stage { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 45%, #13203F 0%, var(--sea) 70%); }
.map { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; cursor: grab; }
.map path { fill: var(--land); stroke: var(--land-line); stroke-width: 1.1; stroke-linejoin: round; transition: fill .9s ease; }
.map .t-out { fill: var(--land-line); stroke: var(--land-line); stroke-width: 2.4; pointer-events: none; }
.map .t-in { stroke: none; }
.map .me path, .map .me .zone { stroke: none; pointer-events: none; fill-opacity: 0; transition: fill-opacity .9s ease; }
.map path.hit, .map .zone.hit { stroke: var(--accent); stroke-width: 3; animation: pulse 1.4s ease-in-out infinite; }
.map path.home { stroke: #fff; stroke-width: 2.4; }
.map path.sel, .map .zone.sel { stroke: #fff; stroke-width: 3; }
.map .t-in.hit, .map .t-in.home, .map .t-in.sel { stroke-width: 2.6; }
@keyframes pulse { 50% { stroke-opacity: .25; } }
.map .zone { fill: var(--land); stroke: var(--land-line); stroke-width: 1.2; transition: fill .9s ease; }
.map .zlabel { font-size: 15px; font-weight: 800; fill: rgba(255,255,255,.88); text-anchor: middle; pointer-events: none; }
.map .zlabel tspan.ic { font-size: 22px; }
.map .net polyline { fill: none; stroke: rgba(255,255,255,.10); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 6; pointer-events: none; }
.map .net line { stroke: rgba(120,170,255,.16); stroke-width: 2; stroke-dasharray: 6 8; pointer-events: none; }
.map .net circle { fill: rgba(255,255,255,.22); pointer-events: none; }
.map .clabel { font-size: 13px; font-weight: 800; fill: rgba(255,255,255,.75); text-anchor: middle; pointer-events: none; paint-order: stroke; stroke: rgba(0,0,0,.45); stroke-width: 3px; }
.setup-map path, .setup-map .zone { cursor: pointer; }
.bubble { cursor: pointer; }
.bubble circle { fill: var(--accent); stroke: #fff; stroke-width: 3; }
.bubble text { font-size: 22px; font-weight: 900; fill: #111; text-anchor: middle; dominant-baseline: central; pointer-events: none; }
.bubble.new { animation: pop .35s ease-out; transform-box: fill-box; transform-origin: center; }
@keyframes pop { from { transform: scale(0); } 70% { transform: scale(1.25); } }
.float { font-size: 26px; font-weight: 900; fill: var(--accent); text-anchor: middle; animation: rise 1s ease-out forwards; pointer-events: none; }
@keyframes rise { to { transform: translateY(-50px); opacity: 0; } }
.veh { pointer-events: none; }
.veh text { font-size: 18px; text-anchor: middle; dominant-baseline: central; }
.veh circle { stroke: rgba(0,0,0,.55); stroke-width: 2; }
.map .trail { fill: none; stroke-width: 2.5; stroke-opacity: .5; stroke-dasharray: 5 6; stroke-linecap: round; pointer-events: none; }
.map .trail.plane { stroke-dasharray: 2 7; }
.map .trail.ferry { stroke-dasharray: 8 5; }
.arrive { fill: none; stroke-width: 3; animation: ring .9s ease-out forwards; pointer-events: none; }
@keyframes ring { from { r: 4; stroke-opacity: .9; } to { r: 34; stroke-opacity: 0; } }

/* Surimpressions : haut (bandeau, tableau de bord, scores) et bas (InfoPresse, commandes) */
.top { position: absolute; left: 0; right: 0; top: 0; z-index: 5; display: grid; gap: 6px; padding-top: var(--safe-top); pointer-events: none; }
.top > * { pointer-events: auto; }
.bottom { position: absolute; left: 0; right: 0; bottom: 0; z-index: 5; display: grid; gap: 8px; padding: 0 calc(10px + var(--safe-right)) calc(10px + var(--safe-bottom)) calc(10px + var(--safe-left)); pointer-events: none; }
.bottom .actions { pointer-events: auto; }

/* Bandeau FLASH INFO : gros et très lisible */
.ticker { display: flex; align-items: stretch; height: 46px; background: rgba(4,6,14,.92); border-bottom: 2px solid #E5232A; overflow: hidden; }
.ticker .flash { flex: none; background: linear-gradient(#F0353B, #C21F26); color: #fff; font-weight: 900; font-size: 13px; letter-spacing: .06em; padding: 0 12px; display: grid; place-items: center; line-height: 1.05; text-align: center; z-index: 1; }
.ticker .lane { position: relative; flex: 1; overflow: hidden; }
.ticker .strip { position: absolute; top: 0; left: 0; height: 100%; display: flex; align-items: center; white-space: nowrap; will-change: transform; }
.ticker .item { padding: 0 24px 0 0; font-size: 17px; font-weight: 700; }
.ticker .item::after { content: "•"; color: var(--muted); padding-left: 24px; }
.ticker .item.event { color: var(--accent); }
.ticker .item.bad { color: #FF8A8E; }
.ticker .item.player { color: var(--player); }
.ticker .item.world { color: #9FC3FF; }
.ticker .item.poll { color: var(--text); }
.ticker .item.alert::before { content: "ALERTE "; color: #FF5A5F; font-weight: 900; }

.hud { display: flex; align-items: center; gap: 8px; margin: 0 calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left)); }
.pill { display: flex; align-items: center; gap: 6px; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.08); border-radius: 999px; padding: 6px 12px; height: 38px; }
.day { font-weight: 800; font-variant-numeric: tabular-nums; flex-direction: column; align-items: flex-start; justify-content: center; gap: 0; line-height: 1.05; padding: 4px 12px; white-space: nowrap; }
.day small { color: var(--muted); font-weight: 600; }
.day .ph { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; }
.speeds { padding: 3px; margin-left: auto; gap: 1px; }
.speeds button { width: 31px; height: 30px; border-radius: 999px; font-size: 12px; }
.speeds button[aria-pressed="true"] { background: var(--panel-2); box-shadow: inset 0 0 0 1px var(--line); }
.momentum { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--accent); min-width: 66px; justify-content: center; }
.momentum.bump { animation: bump .35s ease; }
@keyframes bump { 50% { transform: scale(1.18); } }
.menu-btn { width: 38px; justify-content: center; padding: 0; font-size: 18px; }

.standings { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left)); }
.chip { background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-radius: 12px; padding: 5px 8px; display: grid; gap: 1px; min-width: 0; border-top: 3px solid var(--c); }
.chip .name { font-size: 11px; color: var(--muted); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chip .val { font-size: 19px; font-weight: 900; font-variant-numeric: tabular-nums; display: flex; align-items: baseline; gap: 4px; }
.chip .val small { font-size: 11px; color: var(--muted); font-weight: 700; }
.chip.me { box-shadow: inset 0 0 0 2px var(--player); }
.chip.out { opacity: .35; }
.seatline { margin: 0 calc(10px + var(--safe-right)) 0 calc(10px + var(--safe-left)); background: var(--glass); border-radius: 10px; padding: 5px 8px; display: grid; gap: 3px; font-size: 11px; color: var(--muted); }
.seats { position: relative; height: 10px; border-radius: 5px; overflow: hidden; display: flex; background: var(--land); }
.seats i { height: 100%; transition: width .6s ease; }
.seats .cut { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff; }

/* Fiche d'un territoire */
.card { position: absolute; left: calc(10px + var(--safe-left)); right: calc(10px + var(--safe-right)); top: calc(var(--safe-top) + 168px); z-index: 6; background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; display: grid; gap: 6px; backdrop-filter: blur(6px); box-shadow: 0 10px 30px rgba(0,0,0,.4); max-width: 480px; margin: 0 auto; }
.card h3 { margin: 0; font-size: 16px; display: flex; justify-content: space-between; gap: 8px; }
.card h3 small { color: var(--muted); font-weight: 600; font-size: 12px; }
.card .shares { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.card .shares span { display: flex; align-items: center; gap: 4px; }
.dot { flex: none; width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sens { display: flex; gap: 10px; font-size: 13px; color: var(--muted); flex-wrap: wrap; }
.sens b { color: var(--text); }

/* Fil InfoPresse : dépêches d'agence qui défilent seules, sans capter les touchers */
.infopresse { position: relative; height: 92px; pointer-events: none; overflow: hidden; }
.ip-card { position: absolute; left: 0; right: 0; bottom: 0; max-width: 560px; margin: 0 auto; background: rgba(7,10,22,.86); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); border-left: 5px solid var(--ip); border-radius: 4px 12px 12px 4px; padding: 6px 10px 8px; display: grid; gap: 2px; animation: ipin .5s ease-out; transition: transform .55s ease, opacity .55s ease; }
.ip-card.out { transform: translateY(-110%); opacity: 0; }
@keyframes ipin { from { transform: translateY(100%); opacity: 0; } }
.ip-head { display: flex; gap: 8px; align-items: center; font-size: 10px; font-weight: 900; letter-spacing: .12em; color: var(--muted); }
.ip-head b { color: #fff; background: #1B2650; padding: 1px 6px; border-radius: 3px; }
.ip-head em { font-style: normal; color: #fff; background: #E5232A; padding: 1px 6px; border-radius: 3px; animation: blink 1.2s steps(2) infinite; }
.ip-head i { font-style: normal; color: var(--accent); }
.ip-title { font-weight: 900; font-size: 14px; text-transform: uppercase; letter-spacing: .02em; }
.ip-text { font-size: 13px; color: #D6DBEA; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.actions { display: flex; gap: 10px; align-items: center; max-width: 560px; width: 100%; margin: 0 auto; }
.big { flex: 1; display: flex; align-items: center; justify-content: center; gap: 10px; background: var(--player); color: #111; font-weight: 900; font-size: 17px; border-radius: 999px; height: 56px; position: relative; box-shadow: 0 8px 24px rgba(0,0,0,.45); }
.big .badge { position: absolute; top: -6px; right: 14px; background: var(--danger); color: #fff; font-size: 11px; border-radius: 999px; padding: 2px 7px; }
.round { width: 56px; height: 56px; border-radius: 50%; background: var(--glass); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 2px solid var(--line); font-size: 24px; position: relative; }
.round:disabled { opacity: .4; }

/* ---------- Arbre en harpe ---------- */
.sheet { position: absolute; inset: 0; background: rgba(5,7,15,.6); z-index: 10; display: flex; align-items: flex-end; justify-content: center; animation: fade .2s ease; }
.sheet .panel { width: 100%; max-width: 600px; max-height: 94%; background: var(--panel); border-radius: 22px 22px 0 0; padding: 12px 12px calc(14px + var(--safe-bottom)); display: grid; gap: 10px; animation: up .25s ease-out; overflow: auto; }
@keyframes up { from { transform: translateY(40px); opacity: .4; } }
@keyframes fade { from { opacity: 0; } }
.sheet header { display: flex; align-items: center; gap: 10px; }
.sheet header h3 { margin: 0; font-size: 17px; }
.sheet header .close { margin-left: auto; width: 40px; height: 40px; border-radius: 50%; background: var(--panel-2); font-size: 18px; }
.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; background: var(--bg); border-radius: 14px; padding: 4px; }
.tabs button { height: 44px; border-radius: 11px; font-size: 20px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.tabs button span { font-size: 13px; font-weight: 800; color: var(--muted); }
.tabs button[aria-pressed="true"] { background: var(--panel-2); }
.tabs button[aria-pressed="true"] span { color: var(--text); }
.harp { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(9, 48px); }
.harp svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.harp line { stroke: var(--line); stroke-width: 4; stroke-linecap: round; }
.harp line.on { stroke: var(--player); }
.harp line.half { stroke: color-mix(in srgb, var(--player) 45%, var(--line)); }
.harp .core-band { position: absolute; left: 0; right: 0; top: calc(4 * 48px); height: 48px; background: color-mix(in srgb, var(--accent) 12%, transparent); border-radius: 12px; }
.harp .lname { position: absolute; font-size: 10px; font-weight: 800; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; transform: translateX(-50%); white-space: nowrap; pointer-events: none; }
.node { justify-self: center; align-self: center; width: 42px; height: 42px; border-radius: 50%; background: var(--bg); border: 3px solid var(--line); font-size: 19px; position: relative; z-index: 1; transition: transform .15s ease; }
.node.core { width: 46px; height: 46px; border-style: double; border-width: 4px; }
.node.avail { border-color: var(--accent); }
.node.afford { box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 25%, transparent); }
.node.owned { background: var(--player); border-color: var(--player); }
.node.locked { opacity: .35; filter: grayscale(1); }
.node[aria-pressed="true"] { transform: scale(1.12); border-color: #fff; }
.node .price { position: absolute; bottom: -9px; left: 50%; transform: translateX(-50%); font-size: 10px; font-weight: 900; background: var(--panel-2); color: var(--accent); border-radius: 999px; padding: 1px 6px; white-space: nowrap; }
.node.owned .price { display: none; }
.node .lvl { position: absolute; top: -7px; right: -7px; font-size: 9px; font-weight: 900; background: var(--panel-2); color: var(--muted); border-radius: 999px; padding: 1px 4px; }
.detail { background: var(--bg); border-radius: 16px; padding: 12px; display: grid; gap: 8px; min-height: 112px; }
.detail h4 { margin: 0; font-size: 17px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.detail .desc { margin: 0; font-size: 14px; line-height: 1.4; }
.detail .who { margin: 0; font-size: 13px; color: var(--muted); }
.detail .who b { color: var(--text); }
.tagl { font-size: 10px; background: var(--panel-2); color: var(--muted); border-radius: 6px; padding: 2px 6px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.tagl.core { background: var(--accent); color: #111; }
.tagl.radical { background: #5B1E28; color: #FF9AA2; }
.radbar { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--muted); }
.radbar .track { flex: 1; height: 6px; background: var(--panel-2); border-radius: 3px; overflow: hidden; }
.radbar .track i { display: block; height: 100%; background: linear-gradient(90deg, var(--ok), var(--accent), var(--danger)); }
.buy { background: var(--accent); color: #111; font-weight: 900; border-radius: 999px; height: 48px; font-size: 16px; }
.buy:disabled { background: var(--panel-2); color: var(--muted); }

/* ---------- Modales ---------- */
.modal { position: absolute; inset: 0; z-index: 20; background: rgba(5,7,15,.84); display: grid; place-items: center; padding: calc(16px + var(--safe-top)) calc(14px + var(--safe-right)) calc(16px + var(--safe-bottom)) calc(14px + var(--safe-left)); animation: fade .3s ease; overflow-y: auto; }
.modal .box { width: 100%; max-width: 440px; background: var(--panel); border-radius: 22px; padding: 20px 16px; display: grid; gap: 12px; text-align: center; }
.modal .box.wide { max-width: 560px; }
.modal .big-ic { font-size: 50px; }
.modal h2 { margin: 0; font-size: 22px; }
.modal p { margin: 0; }
.bars { display: grid; gap: 8px; text-align: left; }
.bars .row { display: grid; grid-template-columns: 26px 1fr 58px; gap: 8px; align-items: center; font-weight: 800; font-variant-numeric: tabular-nums; }
.bars .row .track { height: 14px; background: var(--bg); border-radius: 7px; overflow: hidden; }
.bars .row .track i { display: block; height: 100%; border-radius: 7px; transition: width .8s ease; }
.bars .row.out { opacity: .4; }
.bars .row .votes { grid-column: 2 / 4; font-size: 12px; color: var(--muted); font-weight: 700; margin-top: -4px; }
.scandal-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.scandal-pick button { background: var(--bg); border-radius: 14px; padding: 12px 6px; display: grid; gap: 6px; justify-items: center; font-weight: 800; }
.scandal-pick button b { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; }

/* Crises : chaîne d'info, aucune étoile ni indice */
.modal .box.tvbox { padding: 0 0 16px; overflow: hidden; gap: 12px; }
.tvbox .postures { padding: 0 14px; }
.tv { background: #0A0F22; text-align: left; }
.tv-top { display: flex; align-items: center; gap: 10px; padding: 8px 12px; font-size: 11px; font-weight: 900; letter-spacing: .08em; color: #fff; background: #131B38; }
.tv-live { color: #FF4B51; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .35; } }
.tv-ch { background: #E5232A; padding: 2px 6px; }
.tv-clock { margin-left: auto; font-variant-numeric: tabular-nums; }
.tv-alert { background: #FFD400; color: #111; font-weight: 900; font-size: 13px; letter-spacing: .14em; padding: 5px 12px; animation: l3in .3s ease-out; }
.tv-alert.red { background: #E5232A; color: #fff; }
@keyframes l3in { from { transform: translateX(-30px); opacity: 0; } }
.tv-title { background: #E5232A; color: #fff; font-weight: 900; font-size: 21px; line-height: 1.15; text-transform: uppercase; padding: 10px 12px; display: flex; gap: 10px; align-items: center; }
.tv-ic { font-size: 28px; }
.tv-sub { background: #fff; color: #0B1020; font-weight: 700; font-size: 15px; padding: 8px 12px; }
.tv-where { color: var(--accent); font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; padding: 8px 12px; }
.tv-ask { margin: 0; font-weight: 800; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.tv-mini { display: inline-block; justify-self: center; background: #E5232A; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .1em; padding: 3px 8px; }
.postures { display: grid; gap: 8px; text-align: left; }
.postures button { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; text-align: left; background: var(--bg); border: 2px solid var(--line); border-radius: 14px; padding: 10px 12px; }
.postures button:active, .postures button[aria-pressed="true"] { border-color: var(--player); }
.postures .pic { font-size: 22px; }
.postures .pt { display: grid; gap: 3px; }
.postures .pt b { font-size: 14px; }
.postures .pt small { color: var(--muted); font-size: 12px; line-height: 1.3; }
.verdict { display: grid; gap: 6px; text-align: left; }
.verdict .row { display: grid; grid-template-columns: 24px 1fr auto; gap: 8px; align-items: center; background: var(--bg); border-radius: 12px; padding: 8px 10px; font-size: 13px; }
.verdict .row.mine { box-shadow: inset 0 0 0 2px var(--player); }
.mood { font-weight: 900; font-size: 12px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
.mood.m2 { color: var(--ok); } .mood.m1 { color: #A8E6C3; } .mood.m0 { color: var(--muted); } .mood.m-1 { color: #FFB27A; } .mood.m-2 { color: #FF8A8E; }
.quote { font-style: italic; color: var(--muted); font-size: 13px; }

/* Négociations, accords, Matignon */
.deals { display: grid; gap: 10px; text-align: left; max-height: 52vh; overflow: auto; }
.deal { background: var(--bg); border-radius: 14px; padding: 10px; display: grid; gap: 6px; }
.deal-h { display: flex; align-items: center; gap: 8px; font-weight: 800; }
.deal-h b { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; }
.deal-h small { margin-left: auto; color: var(--accent); font-size: 11px; text-align: right; }
.offer { display: flex; gap: 8px; align-items: center; justify-content: space-between; text-align: left; background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; }
.offer span:first-child { display: grid; gap: 2px; }
.offer small { color: var(--muted); font-size: 12px; }
.offer .price { font-weight: 900; color: var(--accent); white-space: nowrap; }
.offer:disabled { opacity: .4; }
.status { font-size: 12px; font-weight: 900; text-transform: uppercase; }
.status.ok { color: var(--ok); } .status.refused { color: #FF8A8E; } .status.pending { color: var(--accent); }

/* Qualification et débat */
.qual h2 { font-size: 20px; }
.duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.duel .side { display: grid; gap: 4px; justify-items: center; }
.duel .face { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; box-shadow: 0 0 0 3px #fff; }
.duel .vs { font-weight: 900; color: var(--muted); }
.poll { display: grid; gap: 4px; }
.poll .track { height: 22px; border-radius: 11px; overflow: hidden; display: flex; background: var(--bg); position: relative; }
.poll .track i { height: 100%; transition: width .8s ease; }
.poll .track .mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: #fff; opacity: .8; }
.poll .lbl { display: flex; justify-content: space-between; font-weight: 900; font-variant-numeric: tabular-nums; font-size: 15px; }
.delta { font-weight: 900; font-size: 18px; }
.delta.up { color: var(--ok); } .delta.down { color: #FF8A8E; }
.steps { display: flex; gap: 6px; justify-content: center; }
.steps i { width: 26px; height: 6px; border-radius: 3px; background: var(--panel-2); }
.steps i.done { background: var(--accent); }
.steps i.now { background: #fff; }
.alert20 { background: #000; animation: flash20 .9s steps(2) 3; }
@keyframes flash20 { 50% { background: #E5232A; } }

/* Soirée des 20 h */
.ceremony { position: absolute; inset: 0; z-index: 40; background: #000; color: #fff; display: flex; flex-direction: column; overflow: auto; animation: fade .4s ease; }
.c-top { display: flex; gap: 12px; padding: calc(10px + var(--safe-top)) 14px 10px; font-size: 12px; font-weight: 900; letter-spacing: .1em; background: #0A0F22; }
.c-count { flex: 1; display: grid; place-content: center; gap: 16px; text-align: center; padding: 20px; }
.c-clock { font-size: 68px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .04em; text-shadow: 0 0 30px rgba(255,255,255,.35); }
.c-count p { color: #aab; margin: 0; }
.c-reveal { display: grid; gap: 12px; padding: 18px 16px calc(24px + var(--safe-bottom)); text-align: center; justify-items: center; animation: reveal .8s ease-out; }
@keyframes reveal { from { opacity: 0; transform: scale(.96); } }
.c-face { width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; box-shadow: 0 0 0 4px #fff, 0 0 40px rgba(255,255,255,.4); }
.c-name { font-size: 28px; font-weight: 900; text-transform: uppercase; }
.c-party { font-size: 18px; font-weight: 800; margin-top: -6px; }
.c-reveal .bars { width: 100%; max-width: 420px; }
.c-reveal h2 { margin: 0; }
.elysee { width: 100%; max-width: 460px; border-radius: 14px; }
.elysee .flag { transform-origin: 221px 30px; animation: wave 2s ease-in-out infinite; }
.elysee .lit { animation: lit 2.4s ease-out forwards; }
@keyframes lit { from { opacity: 0; } }
@keyframes wave { 50% { transform: skewY(4deg); } }

/* Législatives */
.hemi { width: 100%; max-width: 420px; }
.seat-legend { display: flex; flex-wrap: wrap; gap: 6px 12px; justify-content: center; font-size: 13px; font-weight: 800; }
.seat-legend span { display: flex; align-items: center; gap: 5px; }
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.kpis div { background: var(--bg); border-radius: 12px; padding: 8px; display: grid; gap: 2px; }
.kpis b { font-size: 20px; font-variant-numeric: tabular-nums; }
.kpis small { color: var(--muted); font-size: 11px; }

/* Toast */
.toast { position: absolute; left: 50%; bottom: calc(176px + var(--safe-bottom)); transform: translateX(-50%); z-index: 30; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: 10px 16px; font-weight: 800; font-size: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: fade .2s ease; max-width: 90%; text-align: center; pointer-events: none; }

/* Salon */
.room-code { font-size: 54px; font-weight: 900; letter-spacing: .25em; text-align: center; color: var(--accent); font-variant-numeric: tabular-nums; }
.players { display: grid; gap: 8px; }
.pl { display: grid; grid-template-columns: 38px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; background: var(--panel); border-radius: 14px; padding: 10px 12px; }
.pl b { grid-row: span 2; width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--panel-2); }
.pl span { font-weight: 800; }
.pl small { color: var(--muted); font-size: 12px; }
.pl.mine { box-shadow: inset 0 0 0 2px var(--player); }
.pl.empty { opacity: .55; }

/* Écran du fief (choix du département de départ) */
.setup { position: absolute; inset: 0; }
.setup .top { padding: calc(10px + var(--safe-top)) 14px 0; text-align: center; pointer-events: none; }
.setup .top h2 { margin: 0; font-size: 20px; text-shadow: 0 2px 8px #000; }
.setup .bottom .actions { flex-direction: column; align-items: stretch; }
.setup .pickcard { background: var(--glass); backdrop-filter: blur(8px); border-radius: 14px; padding: 10px 12px; font-weight: 700; text-align: center; pointer-events: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ---------- V5 : menu à deux modes, création du parti, choix des adversaires ---------- */
.modes.duo { gap: 14px; }
.modes.duo .mode { padding: 20px 16px; grid-template-columns: 60px 1fr; }
.modes.duo .mode .mi { font-size: 40px; }
.modes.duo .mode b { font-size: 21px; }
.hint.src { font-size: 11px; letter-spacing: .02em; opacity: .85; }
.field label b { color: var(--text); }
.rivals.pick { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rivals.pick .rival { border: 2px solid var(--line); align-items: flex-start; text-align: left; display: grid; grid-template-columns: 30px 1fr; gap: 1px 8px; padding: 9px 10px; }
.rivals.pick .rival b { grid-row: span 3; align-self: start; width: 30px; height: 30px; }
.rivals.pick .rival span { color: var(--text); font-weight: 800; font-size: 13px; }
.rivals.pick .rival em { font-style: normal; font-size: 11px; line-height: 1.3; }
.rivals.pick .rival[aria-pressed="true"] { border-color: var(--player); background: color-mix(in srgb, var(--player) 14%, var(--panel)); }
.rivals.pick .rival[aria-pressed="true"]::after { content: "✓"; position: absolute; }
.rivals.pick .rival { position: relative; }
.rivals.pick .rival[aria-pressed="true"]::after { top: 6px; right: 8px; color: var(--player); font-weight: 900; }

/* Bouton Quitter : toujours accessible, au-dessus des modales */
/* Croix discrète, ancrée dans l'angle supérieur droit */
.quit-btn { position: absolute; z-index: 30; top: calc(var(--safe-top) + 4px); right: calc(var(--safe-right) + 4px); width: 28px; height: 28px; padding: 0; display: grid; place-items: center;
  border-radius: 50%; background: rgba(4,6,14,.55); border: 1px solid rgba(255,255,255,.16); color: rgba(255,255,255,.8); font-size: 13px; font-weight: 900; line-height: 1; opacity: .8;
  transition: opacity .15s ease, background .15s ease; }
.quit-btn:hover, .quit-btn:focus-visible { opacity: 1; background: rgba(4,6,14,.9); }
.modal.quit-ask { z-index: 40; animation: fade .15s ease; }

/* Pause et vitesse */
.speeds .pp { width: 38px; font-size: 15px; background: var(--panel-2); }
.speeds .pp[aria-pressed="true"] { background: var(--accent); color: #111; }
.speeds .spd { width: 38px; font-size: 13px; font-weight: 900; font-variant-numeric: tabular-nums; }
.paused-tag { position: absolute; z-index: 4; left: 50%; top: 46%; transform: translate(-50%, -50%); padding: 10px 20px; border-radius: 999px; background: rgba(4,6,14,.8);
  border: 2px solid var(--accent); color: var(--accent); font-weight: 900; letter-spacing: .2em; pointer-events: none; animation: blink 1.6s steps(2) infinite; }
.game.paused .map *, .game.paused .ip-card, .game.paused .ip-card * { animation-play-state: paused !important; }
.game.paused .ticker { opacity: .75; }

/* Classement Doxa Nostrum : les cartes glissent selon le rang, la tête à gauche */
.standings { --n: 4; --gap: 6px; display: block; position: relative; height: 50px; }
.standings .chip { position: absolute; top: 0; left: 0; height: 100%; width: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n));
  transform: translateX(calc(var(--r, 0) * (100% + var(--gap)))); transition: transform .8s cubic-bezier(.34, 1.25, .5, 1), filter .4s ease; }
.standings .chip:not(.me) { filter: saturate(.7) brightness(.78); }
.standings .chip.me { z-index: 2; background: color-mix(in srgb, var(--player) 34%, rgba(11,16,32,.82)); box-shadow: 0 0 0 2px var(--player), 0 0 22px color-mix(in srgb, var(--player) 60%, transparent); }
.standings .chip.me .name { color: #fff; }
.standings .chip.me .val b { color: #fff; text-shadow: 0 0 12px color-mix(in srgb, var(--player) 80%, transparent); }
.standings .chip .name em { font-style: normal; font-size: 8px; font-weight: 900; letter-spacing: .1em; margin-left: 4px; padding: 1px 4px; border-radius: 4px; background: var(--player); color: #111; vertical-align: 1px; }
.standings .chip .val b { font-weight: 900; }
.standings .chip.up { animation: chipUp .8s ease; }
.standings .chip.down { animation: chipDown .8s ease; }
@keyframes chipUp { 30% { box-shadow: 0 0 0 2px var(--ok), 0 0 18px var(--ok); } }
@keyframes chipDown { 30% { box-shadow: 0 0 0 2px var(--danger), 0 0 14px var(--danger); } }
.pollsrc { justify-self: end; margin: -3px calc(12px + var(--safe-right)) 0 0; font-size: 9px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--muted);
  background: var(--glass); padding: 1px 7px; border-radius: 6px; }

/* Arbre : paliers à choix (2 ou 3 nœuds dans une case) */
.harp .cell { position: relative; z-index: 1; justify-self: stretch; align-self: center; display: flex; justify-content: center; align-items: center; gap: 6px; }
.harp .cell.alt { margin: 0 4px; padding: 2px 4px; border-radius: 999px; border: 2px dashed color-mix(in srgb, var(--accent) 45%, transparent); background: rgba(11,16,32,.65); }
.harp .cell.alt .node { width: 36px; height: 36px; font-size: 16px; border-width: 2px; }
.harp .cell.alt.n3 { gap: 3px; }
.harp .cell.alt.n3 .node { width: 33px; height: 33px; font-size: 15px; }
.harp .cell.alt .node .lvl { display: none; }
.node.excluded { opacity: .22; }
.node.excluded::after { content: ""; position: absolute; left: 12%; right: 12%; top: 50%; height: 2px; background: var(--muted); transform: rotate(-35deg); }
.tagl.altl { background: color-mix(in srgb, var(--accent) 22%, var(--panel-2)); color: var(--accent); }

/* Débat du 20 h : lettres de réponse au même dessin */
.postures .pic.letter { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; font-size: 15px; font-weight: 900; color: #fff;
  background: linear-gradient(#2E4AA8, #1B2E73); box-shadow: inset 0 0 0 2px rgba(255,255,255,.18); }

/* ---------- V6.2 ---------- */
/* Bulles d'aide (survol, focus, appui long) */
.tip { position: absolute; z-index: 60; max-width: min(300px, calc(100% - 16px)); padding: 9px 12px; border-radius: 12px; background: #0B1226; border: 1px solid rgba(255,255,255,.18);
  color: #E8ECF7; font-size: 13px; line-height: 1.35; box-shadow: 0 8px 24px rgba(0,0,0,.5); pointer-events: none; animation: fade .12s ease; }
[data-tip] { -webkit-touch-callout: none; }
.consigne { margin: -4px 0 10px; font-size: 15px; font-weight: 800; color: var(--accent); }
.ghost.small { min-height: 0; height: 38px; font-size: 13px; }
/* Menus épurés : une ligne courte, le détail en bulle */
.mode.main small, .diff small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rivals.pick .rival { min-height: 0; }
.role { background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 10px; margin-bottom: 12px; text-align: left; }
.role h3 { display: flex; align-items: center; gap: 8px; margin: 2px 4px 8px; font-size: 16px; }
.role .scenarios { display: grid; gap: 8px; }
.role .diff { margin: 0; }
/* Trois boutons d'arbre : Programme, Diffusion, Manœuvres */
.actions .big.trio { flex: 1 1 0; min-width: 0; padding: 0 6px; gap: 6px; font-size: 15px; position: relative; }
.actions .big.trio i { font-style: normal; font-size: 17px; }
.actions .big.trio span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.actions .big.trio .badge { position: absolute; top: -7px; right: -4px; font-style: normal; }
/* Téléphone en portrait : icône au-dessus du libellé, pour ne jamais rogner « Manœuvres ». */
@media (max-width: 440px) {
  .actions .big.trio { flex-direction: column; gap: 1px; padding: 0 4px; font-size: 13.5px; line-height: 1.1; }
  .actions .big.trio i { font-size: 19px; line-height: 1; }
}
/* Outre-mer : nom lisible au-dessus de chaque encart */
.map .zname { font-size: 25px; font-weight: 900; fill: #fff; paint-order: stroke; stroke: rgba(4,6,14,.85); stroke-width: 5px; stroke-linejoin: round; pointer-events: none; letter-spacing: -.01em; }
.map .zlabel { font-size: 30px; }
/* Tutoriel */
.tuto { position: absolute; inset: 0; z-index: 35; }
.tuto-hole { position: absolute; border-radius: 16px; box-shadow: 0 0 0 9999px rgba(3,5,12,.72); border: 2px solid var(--accent); transition: all .25s ease; pointer-events: none; }
.tuto-card { position: absolute; left: 12px; right: 12px; max-width: 420px; margin: 0 auto; background: var(--panel); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px; box-shadow: 0 12px 40px rgba(0,0,0,.6); animation: up .2s ease-out; }
.tuto-card h3 { margin: 2px 0 6px; font-size: 18px; }
.tuto-card p { margin: 0 0 12px; font-size: 14px; line-height: 1.4; color: #D6DBEA; }
.tuto-step { font-size: 11px; font-weight: 900; letter-spacing: .1em; color: var(--muted); }
.tuto-btns { display: flex; gap: 8px; }
.tuto-btns button { flex: 1; margin: 0; height: 44px; min-height: 0; }