/* Élysée24 — habillage « plateau TV d'info » (chaîne fictive). PC d'abord : scène adaptative
   de 900 px de haut (design), large de 1280 px ou plus selon la fenêtre (--stage-w), mise à
   l'échelle par fitStage() (app.js) pour remplir toute la fenêtre. Les mises en page s'étirent
   en largeur (flex/grid, max-width sur les textes). La page ne défile jamais : seuls certains
   blocs internes (.scroll) peuvent défiler. */
:root {
  --bg: #0b1226;
  --bar: #0f1a3a;
  --panel: #111c3f;
  --panel2: #16224a;
  --line: #2c3a6b;
  --text: #f4f6fb;
  --text2: #b9c3e0;
  --text3: #8e9ac0;
  --red: #e4002b;
  --gold: #ffc400;
  --green: #5be08b;
  --closed: #3a4466;
  --fav: #2f8f4e;
  --neu: #4a5680;
  --dif: #a33a3a;
  --cond: "Barlow Condensed", "Arial Narrow", sans-serif;
  --body: "Barlow", system-ui, sans-serif;
  /* Marges de sécurité (encoche, barre d'accueil) : variables, surchargées par les tests. */
  --sat: env(safe-area-inset-top, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  --sar: env(safe-area-inset-right, 0px);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; background: #070c1c; color: var(--text); font-family: var(--body); height: 100vh; height: 100dvh; overflow: hidden; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
/* Scène : origine en haut à gauche ; largeur, hauteur et scale posés par fitStage(). */
div.app { --stage-w: 1440px; position: absolute; left: 0; top: 0; width: 1440px; height: 900px; transform-origin: 0 0; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(120% 90% at 50% 0%, #142454 0%, #0b1530 45%, #060b1a 100%); isolation: isolate; }
main { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
/* Bloc interne qui peut défiler (jamais la page). */
.scroll { overflow-y: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
.scroll::-webkit-scrollbar { width: 8px; }
.scroll::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
.grow { flex-grow: 1; }
.gold { color: var(--gold); }
.pink { color: #ffb4c0; font-weight: 700; }
.hint { font-size: 15px; color: var(--text3); margin: 0; max-width: 460px; }
.small { font-size: 13.5px; }
.row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.row.end { justify-content: flex-end; }
.label { font-size: 14px; font-weight: 600; letter-spacing: 1.5px; color: var(--text2); text-transform: uppercase; }
.k { font-size: 13.5px; letter-spacing: 1.5px; color: var(--text3); text-transform: uppercase; }
.k2 { font-size: 14.5px; color: var(--text3); }

/* Barre du haut */
.topbar { flex: none; position: relative; z-index: 2; display: flex; align-items: center; gap: 16px; height: 74px; padding: 0 40px; background: linear-gradient(180deg, #13214a, var(--bar)); border-bottom: 4px solid var(--red); box-shadow: 0 6px 20px rgba(0, 0, 0, .4); }
/* Logo de chaîne (fictive) posé en permanence : ÉLYSÉE + 24, EN DIRECT, point qui pulse, horloge. */
.logo { display: flex; align-items: center; gap: 10px; flex: none; }
.brand { display: flex; align-items: stretch; font-family: var(--cond); font-weight: 800; font-size: 27px; letter-spacing: 1.5px; line-height: 1; box-shadow: 0 4px 14px rgba(228, 0, 43, .35), inset 0 1px 0 rgba(255, 255, 255, .25); border-radius: 3px; overflow: hidden; }
.brand-name { background: linear-gradient(180deg, #ff2a4f, var(--red) 55%, #b80023); color: #fff; padding: 4px 10px 3px 12px; }
.brand-num { background: linear-gradient(180deg, #fff, #dfe5f5); color: var(--red); padding: 4px 9px 3px; }
.live-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; background: #ff2d4f; box-shadow: 0 0 10px #ff2d4f; animation: live-blink 1.6s ease-in-out infinite; }
@keyframes live-blink { 0%, 100% { opacity: 1; } 50% { opacity: .15; } } /* fondu (v66), plus de coupure sèche */
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .45; } }
@keyframes blink { 50% { opacity: .35; } }
.top-info { display: flex; align-items: center; gap: 28px; }
.top-turn { font-family: var(--cond); font-weight: 700; font-size: 24px; color: var(--gold); text-transform: uppercase; letter-spacing: 1px; }
.top-turn small { color: var(--text3); font-size: 18px; }
.top-budget { text-align: right; line-height: 1; }
.top-budget span { color: var(--text3); font-size: 13px; letter-spacing: 1px; }
.top-budget b { font-size: 26px; font-family: var(--cond); color: var(--gold); }
.top-code { font-size: 16px; color: var(--text2); }
.top-code b { color: var(--gold); letter-spacing: 4px; font-size: 22px; margin-left: 6px; }
/* En surimpression sous la barre du haut : ne prend pas de hauteur à l'écran courant. */
.status, .error { position: absolute; left: 0; right: 0; top: var(--topbar-h, 74px); z-index: 5; margin: 0; padding: 8px 40px; font-weight: 600; box-shadow: 0 6px 16px rgba(0, 0, 0, .35); }
.status { background: var(--panel2); color: var(--text2); }
.error { background: #4a0d18; color: #ffd2da; }

/* Écrans en colonnes */
.screen { padding: 26px 40px; flex: 1; min-height: 0; overflow: hidden; width: 100%; max-width: 2100px; align-self: center; }
.cols { display: flex; flex-wrap: nowrap; gap: 40px; align-items: stretch; }
.col { display: flex; flex-direction: column; gap: 20px; min-width: 0; min-height: 0; }
.col-1 { flex: 1 1 380px; }
.col-2 { flex: 2 1 420px; }
.col-3 { flex: 3 1 600px; }
.col-map { flex: 1 1 600px; }
.col-actions { flex: 1 1 440px; }

.mega { font-family: var(--cond); font-weight: 800; font-size: 76px; line-height: .95; text-transform: uppercase; margin: 0; }
.giant { font-family: var(--cond); font-weight: 800; font-size: 92px; line-height: .95; text-transform: uppercase; margin: 0; }
.lead { font-size: 20px; line-height: 1.5; color: #d5dcf2; max-width: 880px; margin: 0; }
.panel { background: var(--panel); border-radius: 6px; padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.panel.mini { padding: 12px 14px; gap: 4px; }
.big { font-family: var(--cond); font-weight: 700; font-size: 34px; line-height: 1; }
.flash { display: inline-flex; align-self: flex-start; background: var(--red); color: #fff; font-family: var(--cond); font-weight: 800; font-size: 28px; letter-spacing: 3px; padding: 6px 20px; }

/* Boutons */
.btn { height: 56px; padding: 0 40px; border: 0; border-radius: 4px; cursor: pointer; font-family: var(--cond); font-weight: 800; font-size: 26px; letter-spacing: 2px; text-transform: uppercase; display: inline-flex; align-items: center; justify-content: center; }
.btn:disabled { opacity: .4; cursor: default; }
.btn-red { background: var(--red); color: #fff; }
.btn-gold { background: var(--gold); color: var(--bg); }
.btn-ghost { background: var(--panel2); color: var(--text2); border: 1px solid var(--line); font-size: 18px; height: 44px; padding: 0 24px; }
.btn.small { align-self: flex-start; }
/* Écran de fin : « Rejouer » (hôte) ou attente de l'hôte, et « Quitter la salle ». */
.end-actions { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.end-wait { font-family: var(--cond); font-weight: 700; font-size: 24px; letter-spacing: 1px; text-transform: uppercase; color: var(--gold); }
.btn-x { background: none; border: 1px solid var(--line); color: var(--text2); border-radius: 4px; cursor: pointer; padding: 2px 10px; }

/* Formulaires */
.form { max-width: 520px; gap: 14px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field.narrow { max-width: 420px; }
.field input, select { height: 52px; border: 2px solid var(--line); background: var(--panel); color: #fff; font-size: 20px; padding: 0 14px; border-radius: 4px; }
select { height: 40px; font-size: 16px; -webkit-appearance: none; appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--text2) 50%), linear-gradient(135deg, var(--text2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 55%, calc(100% - 12px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.sep { color: var(--text3); text-align: center; font-family: var(--cond); letter-spacing: 2px; text-transform: uppercase; }

/* Lobby */
.list { max-width: 460px; }
.list-head { display: flex; justify-content: space-between; font-size: 14px; font-weight: 600; letter-spacing: 1.5px; color: var(--text2); text-transform: uppercase; }
.player-row { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.player-row .who2 { color: var(--text3); flex-grow: 1; }
.player-row.offline { opacity: .5; }
.diamond { width: 14px; height: 14px; display: inline-block; transform: rotate(45deg); flex: none; }
.tag-host { font-size: 14.5px; color: var(--gold); font-weight: 600; }
.tag-ready { color: var(--green); }
.tag-wait { color: var(--text3); font-size: 14px; }
.block { display: flex; flex-direction: column; gap: 10px; }
.grid { display: grid; gap: 10px; }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.choice { padding: 14px 12px; font-size: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 4px; text-align: left; cursor: pointer; }
.choice.party { text-align: center; border-top-width: 5px; }
.choice .pers-party { display: block; margin-top: 2px; font-family: var(--cond); font-size: 12px; letter-spacing: .06em; color: var(--text2); }
.choice.taken { opacity: .4; text-decoration: line-through; cursor: default; }
.choice.mine { border: 2px solid var(--gold); background: #2a2410; color: var(--gold); font-weight: 600; }
.choice.party.mine { border-top-width: 5px; }
.host-options { background: var(--panel); border-radius: 6px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; max-width: 720px; }
.host-options label { color: var(--text2); display: flex; align-items: center; gap: 10px; }
.check input { width: 20px; height: 20px; }
.actions-row { margin-top: 6px; flex-wrap: nowrap; }
.actions-row .hint { flex: 1 1 0; min-width: 0; }
#screen-lobby .choice { padding: 11px 12px; }
#screen-lobby .col { gap: 16px; }

/* Événement */
.event-title { font-family: var(--cond); font-weight: 800; font-size: 92px; line-height: .95; text-transform: uppercase; margin: 0; }
.event-title.mid-title { font-size: 72px; }
.event-title.small-title { font-size: 50px; }
.two-events { gap: 14px; }
.two-events .lead { font-size: 17px; }
.two-events .facts { flex-wrap: nowrap; gap: 12px; }
.two-events .fact { padding: 8px 14px; flex: 0 1 auto; }
.two-events .fact:first-child { flex-shrink: 0; }
.two-events .fact .k { white-space: nowrap; }
.two-events .fact b { font-size: 19px; }
.two-events .event-title:not(:first-of-type) { margin-top: 14px; }
.facts { display: flex; gap: 16px; flex-wrap: wrap; }
.fact { background: var(--panel); border-radius: 6px; padding: 14px 20px; }
.fact b { font-size: 22px; display: block; }
.mood { padding: 22px 24px; display: flex; flex-direction: column; gap: 6px; border-left: 8px solid; }
.mood .k3 { font-size: 14.5px; font-weight: 700; letter-spacing: 1.5px; }
.mood b { font-family: var(--cond); font-size: 34px; text-transform: uppercase; line-height: 1.05; }
.mood span:last-child { font-size: 17px; color: #d5dcf2; }
.mood-favorable { background: #10301c; border-color: #35b15b; } .mood-favorable .k3 { color: #7be6a0; }
.mood-défavorable { background: #3a1016; border-color: var(--red); } .mood-défavorable .k3 { color: #ff9aa0; }
.mood-neutre { background: var(--panel2); border-color: var(--text3); } .mood-neutre .k3 { color: var(--text2); }
.money-row { display: flex; justify-content: space-between; font-size: 18px; }
.money-total { border-top: 1px solid var(--line); padding-top: 12px; font-size: 22px; align-items: baseline; }
.money-total b { color: var(--gold); font-family: var(--cond); font-size: 30px; }

/* Carte */
.map-row { display: flex; gap: 24px; align-items: flex-start; flex-wrap: nowrap; }
/* Cartes : grandissent avec la largeur de la scène (530 px à 1440 de large), dans des bornes qui
   tiennent toujours en hauteur. */
.map { width: clamp(450px, calc(var(--stage-w) * .5 - 190px), 700px); max-width: 100%; flex: none; }
.map svg { width: 100%; height: auto; display: block; }
.map .rg { stroke: var(--bg); stroke-width: 1.5; stroke-linejoin: round; transition: fill .7s ease; }
.map.clickable .rg { cursor: pointer; }
.map .rg:hover { filter: brightness(1.15); }
.map .rg.sel { stroke: var(--gold); stroke-width: 4; }
/* Pas de rectangle de focus du navigateur autour d'une région cliquée (v59) ; au clavier, liseré clair. */
.map .rg:focus { outline: none; }
.map .rg:focus-visible { stroke: #fff; stroke-width: 3; }
.map text { font-family: var(--body); font-weight: 800; fill: #fff; stroke: var(--bg); stroke-width: 3; paint-order: stroke; pointer-events: none; }
.map { position: relative; }
.map .om-name { font-family: var(--body); font-weight: 600; fill: var(--text2); stroke: none; letter-spacing: .2px; }
.map-bubble { position: absolute; transform: translate(-50%, calc(-100% - 6px)); background: var(--panel2); border: 1px solid var(--gold); border-radius: 6px; padding: 5px 10px; font-size: 15px; font-weight: 600; color: var(--text); white-space: nowrap; pointer-events: none; box-shadow: 0 6px 20px rgba(0, 0, 0, .5); z-index: 2; }
.map .om-label { font-weight: 400; fill: var(--text3); stroke: none; letter-spacing: 1px; }
.map-side { flex: 1 1 160px; display: flex; flex-direction: column; gap: 12px; min-width: 160px; }
.legend { display: flex; gap: 14px; font-size: 14px; color: var(--text2); }
.sw-fav { color: var(--fav); } .sw-neu { color: var(--neu); } .sw-dif { color: var(--dif); }
.region-card { background: var(--panel2); border-left: 6px solid var(--gold); padding: 12px 18px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.region-card .name { font-family: var(--cond); font-size: 28px; text-transform: uppercase; font-weight: 700; display: block; line-height: 1.1; }
.region-card .nums { display: flex; gap: 22px; text-align: right; flex-wrap: wrap; }
.region-card .nums b { font-size: 20px; }
.aff-favorable { color: #7be6a0; } .aff-neutre { color: var(--text2); } .aff-défavorable { color: #ff9aa0; }
.region-card .aff { font-weight: 700; } .region-card .trend { font-size: 15px; }

/* Cartes d'action */
.cards { display: flex; flex-direction: column; gap: 12px; }
.card { display: flex; align-items: center; gap: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 4px; padding: 14px 18px; color: var(--text); text-align: left; cursor: pointer; width: 100%; }
.card:hover:not(:disabled):not(.off) { border-color: var(--gold); }
.card:disabled { opacity: .45; cursor: default; }
/* Action impossible (budget, sondage déjà prévu) : grisée, inerte, raison au survol ou au toucher. */
.card { position: relative; }
.card.off { cursor: not-allowed; border-color: var(--line); }
.card.off > * { opacity: .45; }
.card.off .btn-x { cursor: not-allowed; }
.card.off[data-why]:hover::after, .card.off.show-why::after { content: attr(data-why); position: absolute; right: 10px; top: -12px; z-index: 3; background: var(--red); color: #fff; font-size: 14px; font-weight: 700; padding: 3px 10px; border-radius: 4px; white-space: nowrap; pointer-events: none; box-shadow: 0 4px 12px rgba(0, 0, 0, .4); }
/* Deux groupes d'actions : « National » et « Régions » (région choisie), deux cartes par ligne. */
.act-group { display: flex; flex-direction: column; gap: 6px; }
.act-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
/* Titre d'un groupe d'actions + sélecteur « Sujet » compact sur la même ligne (aucune hauteur en plus). */
.act-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.act-head .label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.topic-pick { display: inline-flex; align-items: center; gap: 6px; flex: 0 1 auto; min-width: 0; font-family: var(--cond); font-size: 14px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: var(--text2); }
/* Menu déroulant sombre (« Sujet », cible de l'attaque) : aucun select natif, même style partout. */
.drop { position: relative; display: inline-flex; min-width: 0; text-transform: none; letter-spacing: 0; }
.drop-btn { display: inline-flex; align-items: center; gap: 8px; height: 28px; min-width: 0; max-width: 260px; padding: 0 8px 0 10px; border: 1px solid var(--line); border-radius: 4px; background: var(--panel2); color: var(--text); font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer; }
.drop-btn:disabled { opacity: .5; cursor: default; }
.drop-btn:hover:not(:disabled), .drop-btn[aria-expanded="true"] { border-color: var(--text2); }
.drop-val { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.drop small { font-size: .82em; font-weight: 500; color: var(--text3); }
.drop-chev { flex: none; font-size: 11px; color: var(--text2); }
.topic-pick.on .drop-btn { border-color: var(--gold); color: var(--gold); }
.drop-list { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; min-width: 100%; width: max-content; max-width: 320px; margin: 0; padding: 4px 0; list-style: none; background: #16224A; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
.drop-list[hidden] { display: none; }
.drop-list [role="option"] { padding: 7px 12px; font-family: var(--body); font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; white-space: nowrap; outline: none; }
.drop-list [role="option"]:hover, .drop-list [role="option"]:focus { background: rgba(255, 255, 255, .08); }
.drop-list [aria-selected="true"] { color: var(--gold); }
.drop-help { margin-top: 4px; padding: 7px 12px 5px; border-top: 1px solid var(--line); font-family: var(--body); font-size: 12px; font-weight: 400; line-height: 1.35; color: var(--text3); white-space: normal; cursor: default; user-select: none; }
.atk-target { display: flex; align-items: center; gap: 6px; margin-top: 6px; }
.atk-target .drop-list { left: 0; right: auto; }
/* Débat ÉLYSÉE24 : annonce (Flash spécial), posture secrète (Actions), résultat (journal). */
.debate-flash { display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 16px; background: rgba(255, 196, 0, .08); border: 1px solid rgba(255, 196, 0, .45); border-left: 4px solid var(--gold); border-radius: 4px; font-size: 19px; width: fit-content; max-width: 100%; }
.debate-flash .tag, .dseq-top .tag { background: var(--red); color: #fff; font-family: var(--cond); font-weight: 800; letter-spacing: 1.5px; padding: 2px 8px; border-radius: 3px; font-size: 15px; flex: none; }
.debate-res { display: flex; flex-direction: column; gap: 3px; background: var(--panel2); border: 1px solid var(--line); border-left: 4px solid var(--gold); border-radius: 4px; padding: 10px 14px; font-size: 17px; }
.debate-res .k2 { font-size: 14px; }
/* Séquence télé du débat (≤ 3 s) par-dessus l'écran du journal : pupitres, postures, verdict. */
/* Journal : accusation de récupération politique (vue privée). */
.recup-note { display: flex; flex-direction: column; gap: 4px; background: rgba(228, 0, 43, .14); border: 1px solid var(--red); border-left: 4px solid var(--red); border-radius: 4px; padding: 10px 14px; }
.recup-note .k3 { color: #ff6b81; }
.recup-note b { font-size: 18px; }
.recup-note span:last-child { font-size: 15px; color: var(--text2); }
.act-grid .card { align-items: stretch; flex-direction: column; gap: 4px; }
.act-grid .card .c { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 8px; }
.act-grid .card-attack .c { align-items: center; }
.poll-none { margin: 8px 0 0; font-size: 16px; color: #d5dcf2; }
.card .t { flex-grow: 1; display: flex; flex-direction: column; line-height: 1.25; }
.card .t b { font-size: 19px; }
.card .t span { font-size: 15px; color: var(--text2); }
.card .c { display: flex; flex-direction: column; align-items: flex-end; }
.card .c b { color: var(--gold); font-size: 20px; }
.imp { font-size: 14.5px; }
.imp-fort { color: #7be6a0; } .imp-moyen { color: #f2b600; } .imp-faible { color: var(--text2); }
.plan { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.plan-panel { flex: 0 1 auto; min-height: 90px; }
.plan-panel > .label { flex: none; }
#screen-actions .col-actions > :not(.plan-panel) { flex: none; }
#screen-actions .col { gap: 14px; }
#screen-actions .cards { gap: 12px; }
#screen-actions .card { padding: 10px 16px; }
#screen-actions .panel { padding: 14px 18px; }
.plan li { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 16px; color: #d5dcf2; }
.rest { flex-direction: row; justify-content: space-between; flex-wrap: wrap; font-size: 16px; color: #d5dcf2; }
.rest b { color: var(--gold); }

/* Journal */
.unes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.stack-unes { grid-template-columns: 1fr; gap: 12px; align-content: start; }
.rumors { background: var(--panel); border-left: 6px solid var(--gold); padding: 16px 20px; display: flex; flex-direction: column; gap: 6px; }
.rumors .k3 { font-size: 14.5px; font-weight: 600; letter-spacing: 1.5px; color: var(--gold); }
.rumors span:not(.k3) { font-size: 18px; line-height: 1.4; }
.more { margin: 0; padding-left: 18px; color: var(--text2); display: flex; flex-direction: column; gap: 6px; }
.poll-big { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.poll-big b { font-family: var(--cond); font-size: 72px; line-height: 1; color: var(--gold); }
.trend { font-size: 20px; font-weight: 700; }
.trend-up { color: var(--green); } .trend-down { color: #ff7a85; } .trend-flat { color: var(--text2); }
.scale { position: relative; height: 26px; background: var(--bg); border-radius: 3px; margin-bottom: 22px; }
.scale .band { position: absolute; top: 0; bottom: 0; border-radius: 3px; }
.scale .ticks { position: absolute; left: 0; right: 0; top: 30px; display: flex; justify-content: space-between; font-size: 14.5px; color: var(--text3); }
.best-row { display: flex; justify-content: space-between; font-size: 17px; }

/* Soirée électorale */
.night-head { display: flex; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.night-title { font-family: var(--cond); font-weight: 800; font-size: 54px; line-height: 1; text-transform: uppercase; flex-grow: 1; margin: 0; }
.phase-tag { padding: 8px 14px; border-radius: 3px; font-size: 15px; font-weight: 700; letter-spacing: 1.5px; white-space: nowrap; }
.phase-1 { background: #1f7a3e; color: #fff; }
.phase-2 { background: var(--panel2); color: #ffb4c0; }
.phase-3 { background: var(--gold); color: var(--bg); }
.night-stats { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.stat { background: var(--panel); border-radius: 6px; padding: 12px 18px; }
.stat b { font-family: var(--cond); font-size: 32px; }
.grow-stat { flex: 1 1 300px; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.track { height: 12px; background: var(--bg); border-radius: 6px; overflow: hidden; }
.track-fill { height: 100%; width: 100%; background: var(--red); transform-origin: 0 0; transform: scaleX(0); will-change: transform; }
#screen-night { display: flex; flex-direction: column; }
.night-body { margin-top: 16px; flex: 1; min-height: 0; }
.night-body .col-actions { gap: 16px; }
.night-after { flex: 1 1 auto; display: flex; flex-direction: column; gap: 12px; }
.night-after .panel { flex: none; padding: 14px 18px; gap: 8px; }
.consignes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 16px; }
.night-legend { display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--text2); width: 170px; }
#night-map { width: clamp(380px, calc(var(--stage-w) * .49 - 247px), 680px); }
.night-body .col-map { flex: none; flex-direction: row; flex-wrap: nowrap; }
.grad { height: 12px; background: linear-gradient(90deg, #9ed9ad, #145c2e); border-radius: 2px; }
.sq { width: 18px; height: 18px; display: inline-block; }
.sq-closed { background: var(--closed); }
.tip { font-size: 14.5px; gap: 3px; padding: 10px 12px; color: var(--text2); }
.tip b { font-size: 15px; color: var(--text); }
.stack { position: relative; height: 34px; border-radius: 3px; overflow: hidden; background: var(--panel2); }
/* Segments animés en JS par transform (translateX + scaleX) : aucune mise en page dans la boucle. */
.stack div { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; transform-origin: 0 0; transform: scaleX(0); will-change: transform; }
.stack .wait { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 14.5px; letter-spacing: 1.5px; color: var(--text3); }
.ranking { display: flex; flex-direction: column; gap: 10px; }
.rank-row { display: flex; align-items: center; gap: 12px; font-size: 20px; }
.rank-row .n { font-family: var(--cond); font-weight: 800; width: 22px; color: var(--text3); }
.rank-row .n.top { color: var(--gold); }
.rank-row .sqp { width: 14px; height: 14px; display: inline-block; flex: none; }
.rank-row .nm { flex-grow: 1; }
.rank-row b { font-family: var(--cond); font-size: 32px; min-width: 90px; text-align: right; }
.after { display: flex; flex-direction: column; gap: 10px; }
.ranking.two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: column; gap: 6px 24px; }
.ranking.two .rank-row { font-size: 16px; gap: 9px; min-width: 0; }
.ranking.two .rank-row .nm { min-width: 0; overflow: hidden; white-space: nowrap; }
.ranking.two .rank-row b { font-size: 26px; min-width: 72px; }

/* Proclamation */
.proclaim { font-family: var(--cond); font-weight: 800; font-size: 110px; line-height: .92; text-transform: uppercase; margin: 0; }
.duel { display: flex; height: 44px; border-radius: 3px; overflow: hidden; max-width: 720px; }
.duel div { display: flex; align-items: center; padding: 0 14px; font-family: var(--cond); font-weight: 800; font-size: 26px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.duel div:last-child { justify-content: flex-end; }

/* Bandeau des brèves */
.ticker { position: relative; z-index: 2; display: flex; align-items: center; background: linear-gradient(180deg, #ffd23d, var(--gold) 60%, #e9b200); color: var(--bg); font-weight: 700; font-size: 17px; height: 44px; overflow: hidden; white-space: nowrap; flex: none; box-shadow: 0 -6px 20px rgba(0, 0, 0, .35); }
.ticker-clock { background: var(--red); color: #fff; height: 100%; display: flex; align-items: center; padding: 0 16px; font-family: var(--cond); font-weight: 800; font-size: 24px; letter-spacing: 1px; flex: none; z-index: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.ticker-tag { background: var(--bg); color: var(--gold); padding: 0 18px; font-family: var(--cond); font-size: 19px; font-weight: 800; height: 100%; display: flex; align-items: center; letter-spacing: 2px; flex: none; z-index: 1; }
.ticker-window { overflow: hidden; flex-grow: 1; }
.ticker-info { background: var(--red); color: #fff; padding: 0 16px; height: 100%; display: flex; align-items: center; flex: none; z-index: 1; font-family: var(--cond); font-size: 17px; letter-spacing: 1px; text-transform: uppercase; }
.ticker-track { display: inline-flex; will-change: transform; } /* défilement en JS (vitesse constante, position gardée) */
.ticker-track span, .ticker-flash span { padding: 0 28px; }
.ticker-track .sep-dot, .ticker-flash .sep-dot { color: var(--red); padding: 0; }
/* FLASH : nouvelle brève en tête, en rouge, une fois ; étiquette rouge clignotante 2 s. */
.ticker-window { position: relative; height: 100%; display: flex; align-items: center; }
.ticker-window.flashing .ticker-track { visibility: hidden; }
.ticker-flash { position: absolute; left: 0; top: 0; height: 100%; display: inline-flex; align-items: center; color: var(--red); font-weight: 800; white-space: nowrap; will-change: transform; }
.ticker-tag.flash { background: var(--red); color: #fff; animation: flash-blink .5s steps(1, end) infinite; }
@keyframes flash-blink { 50% { background: #fff; color: var(--red); } }

/* Soirée : couleurs animées image par image en JS, sans transition CSS (pas de double lissage). */
#night-map .rg { transition: none; }
@media (prefers-reduced-motion: reduce) {
  .dmod-say.pop, .db-say.pop, .ticker-track, .ticker-tag.flash, .live-dot, .panel::after, .fact::after, .stat::after, .rumors::after, .mood::after, .studio .halo { animation: none !important; }
  .map .rg { transition: none; }
}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.col > .btn { align-self: flex-start; }
/* Soirée : départements en traits fins, régions en trait épais par-dessus. */
.map .dp { stroke-width: .6; }
.map .region-border { fill: none; stroke: var(--bg); stroke-width: 2.2; stroke-linejoin: round; pointer-events: none; }

/* ===================================================================================
   Mobile (maquettes M-*, 390 × 844) : classe « m » sur <html> (fitStage, app.js).
   Plein écran sans mise à l'échelle ; barre du haut 48 px, contenu qui défile, barre
   d'action (#cta) et bandeau en bas, marges de sécurité iOS.
   =================================================================================== */
.m-only, .cta { display: none; }
.m .pc-only { display: none !important; }
.m .m-only { display: revert; }
.m .cta:not([hidden]) { display: flex; }

.m div.app { position: fixed; inset: 0; width: auto; height: auto; transform: none;
  padding: 0 var(--sar) var(--sab) var(--sal); }
/* Barre du haut sous l'encoche (sa couleur remplit la zone, son contenu reste dessous), puis le
   bandeau BRÈVES fin (26 px) ; en bas : barre d'action, onglets, marge de la barre d'accueil. */
.m .topbar { order: -2; height: calc(48px + var(--sat)); padding: var(--sat) 16px 0; gap: 10px; border-bottom-width: 3px; }
.m .brand { font-size: 17px; letter-spacing: 1px; }
.m .brand-name { padding: 3px 5px 2px 7px; }
.m .brand-num { padding: 3px 5px 2px; }
.m .logo { gap: 7px; }
.m .live-dot { width: 8px; height: 8px; }
.m .top-info { gap: 12px; }
.m .top-turn { font-size: 17px; }
.m .top-turn small { font-size: 13px; }
.m .top-budget b { font-size: 18px; }
.m .top-budget span { font-size: 9px; }
.m .top-code { font-size: 12px; }
.m .top-code b { font-size: 17px; letter-spacing: 3px; margin-left: 2px; }
.m .top-info .btn-x { font-size: 12px; padding: 4px 8px; color: var(--text); }
.m .status, .m .error { top: calc(74px + var(--sat)); padding: 8px 16px; font-size: 14px; }

/* Écrans : une seule colonne qui défile ; les colonnes PC s'effacent (display: contents). */
.m .screen { padding: 14px 16px 16px; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; }
.m .screen > *, .m .col > * { flex-shrink: 0; }
.m .cols { flex-direction: column; gap: 12px; }
.m .col, .m .map-row { display: contents; }
.m .label { font-size: 12px; letter-spacing: 1.3px; }
.m .k { font-size: 10px; letter-spacing: 1px; }
.m .k2 { font-size: 13px; }
.m .hint { font-size: 13px; max-width: none; }
.m .lead { font-size: 16px; line-height: 1.45; }
.m .mega { font-size: 40px; }
.m .mega br { display: none; }
.m .giant { font-size: 44px; }
.m .panel { padding: 12px 14px; gap: 8px; }
.m .flash { font-size: 18px; letter-spacing: 2px; padding: 4px 12px; }
.m .btn { height: 52px; font-size: 22px; letter-spacing: 1.5px; border-radius: 6px; padding: 0 16px; }
.m .btn-ghost { height: 44px; font-size: 16px; }
.m .end-actions { width: 100%; gap: 10px; flex-wrap: nowrap; }
.m .end-actions > * { flex: 1; }
.m .end-wait { font-size: 16px; text-align: center; }
.m .field input, .m select { height: 48px; font-size: 17px; border-radius: 6px; }
.m .field.narrow, .m .form, .m .list, .m .host-options { max-width: none; }

/* Barre d'action : bouton pleine largeur sur fond dégradé. */
.cta { flex: none; flex-wrap: wrap; gap: 6px; padding: 10px 16px; background: linear-gradient(0deg, var(--bg) 70%, rgba(11, 18, 38, 0)); }
.cta > * { flex: 1 1 100%; }
.cta > .btn { flex: 1 1 0; min-width: 0; }
.cta .row { flex-wrap: nowrap; gap: 6px; margin: 0; }
.cta .row > .btn { flex: 1 1 0; min-width: 0; }
.cta .hint { text-align: center; }
.m .cta .btn-ghost { height: 40px; font-size: 16px; }

/* Bandeau BRÈVES : 26 px, sous la barre du haut. */
.m .ticker { order: -1; height: 26px; font-size: 12.5px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); }
.m .ticker-clock { display: none; }
.m .ticker-tag { font-size: 13px; }
.m .ticker-tag { padding: 0 8px; letter-spacing: 1px; }
.m .ticker-info { background: none; color: var(--bg); font-family: var(--body); font-size: 12px; letter-spacing: 0; text-transform: none; padding: 0 8px; border-right: 2px solid var(--bg); }
.m .ticker-track span, .m .ticker-flash span { padding: 0 18px; }
.m .ticker-track .sep-dot { padding: 0; }

/* Accueil */
.m #screen-home .lead { order: 0; }

/* Lobby (M-Main) */
.m #screen-lobby .lead, .m #lobby-info { font-size: 13px; color: var(--text3); }
.m #screen-lobby .lead { display: none; }
.m .m-summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; background: var(--panel); border: 0; border-radius: 6px; padding: 12px 14px; color: var(--text); font-size: 15px; text-align: left; cursor: pointer; }
.m .m-summary span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.m #screen-lobby .list { display: none; }
.m #screen-lobby.players-open .list { display: flex; }
.m .player-row { font-size: 15px; gap: 8px; }
.m #screen-lobby .block { gap: 12px; }
.m .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.m .grid-5, .m .grid-6 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.m #screen-lobby .choice { min-height: 44px; padding: 8px 10px; font-size: 15px; border-radius: 6px; }
.m .choice.party { border-top-width: 4px; padding: 8px 4px; }
.m .grid.collapsed > :nth-child(n + 9) { display: none; }
.m .m-more { background: none; border: 0; color: var(--text3); font-size: 13px; cursor: pointer; padding: 0; }
.m .host-options { padding: 12px 14px; gap: 10px; }
.m #host-head { display: flex; justify-content: space-between; font-size: 14px; letter-spacing: 0; text-transform: none; color: var(--text); font-weight: 400; cursor: pointer; }
.m .host-options:not(.open) > :not(#host-head) { display: none; }
.m .host-options .row { flex-direction: column; align-items: stretch; gap: 10px; }
.m #screen-lobby .actions-row { order: 10; }
.m #btn-leave { order: 11; align-self: center; }

/* Événement (M-Evenement) */
.m #screen-event { gap: 12px; }
.m .event-title, .m .event-title.mid-title, .m .event-title.small-title { font-size: 38px; }
.m .two-events .event-title:not(:first-of-type) { margin-top: 12px; }
.m .two-events .event-title { font-size: 32px; }
.m .chips { display: flex; gap: 8px; flex-wrap: wrap; }
.m .chips span { background: var(--panel); border-radius: 4px; padding: 6px 10px; font-size: 13px; }
.m .mood { padding: 14px 16px; gap: 4px; border-left-width: 6px; }
.m .mood .k3 { font-size: 11px; letter-spacing: 1.3px; }
.m .mood b { font-size: 24px; }
.m .mood span:last-child { font-size: 14px; }
.m .money-row { font-size: 15px; }
.m .money-total { padding-top: 8px; font-size: 15px; align-items: center; }
.m .money-total b { font-size: 22px; }
.m #event-side > .grow { display: none; }

/* Carte et actions (M-Carte, M-Actions) */
.m #screen-actions:not([data-tab="carte"]) [data-pane="carte"],
.m #screen-actions:not([data-tab="actions"]) [data-pane="actions"],
.m #screen-actions:not([data-tab="score"]) [data-pane="score"] { display: none !important; }
.m #screen-actions { gap: 10px; position: relative; touch-action: pan-y; }
.m #screen-actions[data-tab="carte"] { padding-bottom: 96px; }
.m .legend { font-size: 12px; gap: 12px; }
.m #action-map { width: 100%; }
.m .map text { stroke-width: 2.5; }
.m .map .rg.sel { stroke-width: 2.5; }
.m .map .rg { stroke-width: 1; }
.m .map-side { gap: 10px; min-width: 0; }
.m .map-side .big { font-size: 40px; }
/* Fiche région en bottom sheet, au-dessus de la barre d'action. */
/* Fiche région : carte compacte « Région choisie » en bas ; ouverte, feuille au-dessus d'un fond assombri. */
.m .region-card { position: fixed; left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(var(--sab) + var(--tab-h, 0px) + var(--cta-h, 0px) + 8px); z-index: 4; display: flex; flex-direction: column; align-items: stretch; gap: 10px;
  background: var(--panel2); border: 0; border-radius: 14px; padding: 0; box-shadow: 0 -6px 24px rgba(0, 0, 0, .45); }
.m .region-card.open { left: var(--sal); right: var(--sar); bottom: calc(var(--sab) + var(--tab-h, 0px) + var(--cta-h, 0px)); z-index: 41; border-top: 2px solid var(--gold); border-radius: 22px 22px 0 0; padding: 10px 18px 18px; box-shadow: 0 -24px 60px rgba(0, 0, 0, .55); }
.rc-compact { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 64px; padding: 8px 14px; border: 0; background: none; color: var(--text); text-align: left; cursor: pointer; }
.rc-compact > span:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rc-compact b { font-family: var(--cond); font-size: 21px; text-transform: uppercase; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rc-compact b span { font-weight: 600; text-transform: none; font-family: var(--body); font-size: 14px; color: var(--text2); }
.rc-compact .gold { flex: none; font-size: 13px; font-weight: 700; }
.sheet-act { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 0 16px; border: 0; border-radius: 12px; background: var(--bar); color: var(--text); font-family: var(--cond); font-weight: 800; font-size: 19px; text-transform: uppercase; letter-spacing: .5px; cursor: pointer; }
.sheet-act .c { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.sheet-act .c b { font-size: 18px; }
.sheet-act .imp { font-family: var(--body); font-size: 12px; font-weight: 600; text-transform: none; letter-spacing: 0; }
.sheet-act.sheet-meet { background: var(--gold); color: var(--bg); }
.sheet-act.sheet-meet .imp { color: #1a5c2e; }
.sheet-act:disabled { opacity: .4; }
.sheet-act.off { opacity: .45; cursor: not-allowed; }
.sheet-act.off.show-why::after { content: attr(data-why); position: absolute; right: 10px; top: -14px; background: var(--red); color: #fff; font-size: 13px; padding: 3px 10px; border-radius: 4px; font-family: var(--body); text-transform: none; }
.sheet-handle { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: #4a5680; border: 0; padding: 0; cursor: pointer; box-sizing: content-box; border-top: 8px solid transparent; border-bottom: 8px solid transparent; background-clip: padding-box; margin: -8px 0; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.sheet-handle, .sheet-head { touch-action: none; } /* le glissé vers le bas ferme la fiche (dragSheet) : pas de défilement qui l'annule */
.sheet-head b { font-family: var(--cond); font-size: 26px; text-transform: uppercase; line-height: 1.05; }
.sheet-head span { font-size: 13px; }
.sheet-head .aff-défavorable { color: #ff9aa0; }
.sheet-nums .trend { font-size: 12px; }
.sheet-nums { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; font-size: 12px; color: var(--text3); }
.sheet-nums b { font-size: 17px; color: var(--text); }
.sheet-range { display: flex; justify-content: space-between; align-items: center; background: var(--bar); border-radius: 6px; padding: 8px 12px; }
.sheet-range span { font-size: 13px; color: var(--text2); }
.sheet-range b { font-family: var(--cond); font-size: 24px; color: var(--gold); }
/* Cartes d'action */
.m .cards { gap: 12px; }
.m .card { min-height: 56px; padding: 12px 14px; gap: 10px; border-radius: 6px; }
.m .card.on { border: 2px solid var(--gold); }
.m .card .t b { font-size: 16px; }
.m .card .t span { font-size: 13px; }
.m .card .t .link { font-size: 12px; color: var(--gold); cursor: pointer; }
.m .card .c b { font-size: 17px; }
.m .card .imp { font-size: 11px; }
.m .card .tick { color: var(--gold); font-size: 18px; margin-left: 4px; }
/* Mobile : grille d'actions compacte (tout l'onglet Actions tient sans défiler). */
.m .act-group { gap: 4px; }
.m .act-grid { gap: 8px; }
.m .debate-flash { font-size: 14px; gap: 8px; padding: 8px 10px; margin-top: 10px; }
.m .debate-flash .tag { font-size: 11px; }
.m .debate-res { font-size: 14px; padding: 8px 10px; }
.m .debate-res .k2 { font-size: 12px; }
.m .act-head { gap: 6px; }
.m .topic-pick { font-size: 11px; gap: 4px; letter-spacing: .5px; }
.m .drop-btn { height: 26px; font-size: 12px; max-width: 170px; padding: 0 6px 0 8px; gap: 6px; }
.m .drop-list { max-width: 260px; }
.m .drop-list [role="option"] { padding: 10px 12px; font-size: 14px; }
.m .recup-note b { font-size: 15px; }
.m .recup-note span:last-child { font-size: 13px; }
.m .act-grid .card { min-height: 0; padding: 9px 11px; gap: 3px; }
.m .act-grid .card .sub:not(.keep) { display: none; }
.m .act-grid .card .tick { position: absolute; top: 6px; right: 8px; margin: 0; }
.m .act-grid .card .c b { font-size: 16px; }
.m .act-grid .card .btn-x { padding: 2px 8px; }
.m .card.off.show-why::after { top: -10px; font-size: 12px; }
.m .plan-panel { background: var(--panel2); gap: 6px; }
.m .plan-panel > .label { text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 14px; }
.m .plan { overflow: visible; }
.m .plan li { font-size: 14px; }
.m .cta .rest { background: none; padding: 0; flex-direction: row; justify-content: space-between; font-size: 13px; }
.m .cta .rest .k2 { display: none; }

/* Journal (M-Journal) : unes en carrousel. */
.m .dots { display: flex; justify-content: center; gap: 6px; }
.m .dots:empty { display: none; }
.m .dots span { width: 6px; height: 6px; border-radius: 3px; background: #4a5680; transition: width .2s; }
.m .dots span.on { width: 18px; background: var(--gold); }
.m .rumors { border-left-width: 4px; padding: 10px 12px; gap: 2px; }
.m .rumors .k3 { font-size: 11px; letter-spacing: 1.2px; }
.m .rumors span:not(.k3) { font-size: 14px; line-height: 1.35; }
.m .poll-big { gap: 10px; }
.m .poll-big b { font-size: 52px; }
.m .scale { height: 18px; margin-bottom: 0; }
.m .scale .ticks { display: none; }
.m #j-poll > .grow { display: none; }

/* Soirée électorale (M-Resultats) */
.m #screen-night { position: relative; padding-top: 10px; gap: 8px; }
.m .night-head { flex-wrap: nowrap; justify-content: space-between; align-items: center; gap: 8px; }
.m .night-title { font-size: 21px; white-space: nowrap; flex-grow: 0; }
.m .phase-tag { font-size: 10px; letter-spacing: 1px; padding: 5px 8px; }
.m .night-stats { margin-top: 0; gap: 6px; flex-wrap: nowrap; }
.m .stat { flex: 1; padding: 6px 8px; }
.m .stat b { font-size: 20px; }
.m .grow-stat { flex: 1; gap: 0; display: block; }
.m .grow-stat .row { display: block; }
.m .grow-stat .pink { display: block; font-family: var(--cond); font-weight: 700; font-size: 20px; color: var(--text); letter-spacing: 0; }
.m .grow-stat .track { display: none; }
.m .night-body { margin-top: 0; }
.m #night-map { width: 100%; }
.m .night-legend { display: contents; }
.m .night-legend > :not(#n-tip) { display: none; }
.m #n-tip:not(.float), .m #n-tip[hidden] { display: none; }
.m #n-tip.float { position: absolute; z-index: 3; display: block; width: max-content; max-width: 240px; background: var(--panel2); border: 1px solid var(--gold); border-radius: 6px; padding: 6px 10px; font-size: 12px; line-height: 1.35; color: var(--text); box-shadow: 0 6px 20px rgba(0, 0, 0, .5); pointer-events: none; }
.m #n-tip.float b { font-size: 12px; }
.m .stack { height: 22px; }
.m .stack .wait { font-size: 10px; }
.m .ranking { gap: 6px; }
.m .rank-row { font-size: 15px; gap: 8px; }
.m .rank-row .n { width: 14px; }
.m .rank-row .sqp { width: 10px; height: 10px; }
.m .rank-row b { font-size: 22px; min-width: 0; }
.m .night-after { flex: none; }
.m .night-after .panel { padding: 12px 14px; }
.m .night-after .big { font-size: 24px; }
.m .consignes { grid-template-columns: 1fr; }
.m .night-after .row { gap: 8px; }
.m .night-after .row .btn { flex: 1 1 0; padding: 0 8px; font-size: 15px; }
.m #screen-night > .grow, .m .night-body .grow { display: none; }

/* Proclamation (M-Bilan) */
.m .proclaim { font-size: 56px; }
.m #screen-end .flash { font-size: 16px; }
.m .duel { height: 34px; max-width: none; }
.m .duel div { font-size: 19px; padding: 0 8px; }
.m .facts { gap: 8px; }
.m #screen-end .facts { display: grid; grid-template-columns: 1fr 1fr; }
.m #screen-end .fact { padding: 8px 10px; }
.m #screen-end .fact .k { font-size: 12px; color: var(--text3); }
.m #screen-end .fact b { font-size: 17px; }
.m #end-main > .grow { display: none; }

/* Spectateur */
.m #screen-wait .flash { font-size: 16px; }
.m #j-more:empty { display: none; }
.m #screen-home .btn { align-self: stretch; }
/* Onglet Carte : barre d'action réduite au bouton (44 px), comme M-Carte. */
.m div.app:has(#screen-actions[data-tab="carte"]:not([hidden])) .cta { padding: 4px 16px 8px; }
.m div.app:has(#screen-actions[data-tab="carte"]:not([hidden])) .cta .rest { display: none; }
.m div.app:has(#screen-actions[data-tab="carte"]:not([hidden])) .cta .btn { height: 44px; font-size: 20px; }
.m .card .c { flex: none; white-space: nowrap; }
.m .map-side { flex-direction: column-reverse; justify-content: flex-end; }
.m .night-after .row { flex-direction: column; align-items: stretch; }
.m #screen-lobby .list-head { display: none; }
.m .host-options label:not(.check) { justify-content: space-between; } .m .host-options select { flex: 1; }
/* Proclamation (PC) : duel sur toute la largeur. */
html:not(.m) .duel { max-width: none; }
/* Accueil et lobby (PC) : contenu centré verticalement, choix un peu plus grands. */
html:not(.m) #screen-lobby, html:not(.m) #screen-home { align-items: center; }
html:not(.m) #screen-lobby .choice { padding: 15px 14px; font-size: 17px; }
.reduced-note { align-self: center; font-style: italic; }
.m .night-head { flex-wrap: wrap; }
.m .reduced-note { order: 3; width: 100%; font-size: 11px; }

/* ===================================================================================
   Unes « papier » : journal posé sur la table, plié sous le gros titre. Aucun logo, aucune
   police ni mise en page des vrais titres : polices du jeu ; seule la couleur dominante de
   chaque journal (bandeau, accent : --band, --band-fg, --accent) rappelle le titre. Papier crème
   à grain (bruit SVG feTurbulence), vignette, ombre portée, légère rotation propre à chaque une.
   =================================================================================== */
.une {
  --ink: #1a1a1a;
  --paper: #f1ebdc;
  position: relative; overflow: hidden; isolation: isolate;
  display: flex; flex-direction: column; gap: 7px; padding: 10px 12px 0;
  color: var(--ink); border-radius: 1px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .3 0 0 0 0 .22 0 0 0 .13 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(170deg, #f6f1e4, #ebe4d2);
  transform: rotate(var(--rot, 0deg));
  box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 6px 10px rgba(0, 0, 0, .25), 0 16px 32px rgba(0, 0, 0, .35);
}
/* Vignette (bords plus sombres). */
.une::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; mix-blend-mode: multiply;
  background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(90, 70, 35, .22) 100%);
}
.une .mast { display: flex; justify-content: center; background: var(--band); color: var(--band-fg); padding: 5px 8px 4px; border-bottom: 3px solid var(--accent); box-shadow: inset 0 -4px 0 -1px var(--band); }
.une .paper { font-family: var(--cond); font-weight: 800; font-size: 22px; line-height: 1.05; text-transform: uppercase; letter-spacing: 1px; }
.une .meta { display: flex; justify-content: space-between; gap: 8px; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; color: #3b352a; border-bottom: 1px solid var(--accent); padding-bottom: 3px; white-space: nowrap; }
.une .meta span:first-child { overflow: hidden; text-overflow: ellipsis; }
.une .txt { font-family: var(--body); font-weight: 700; font-size: 19px; line-height: 1.17; text-shadow: 0 0 .5px rgba(26, 26, 26, .55); }
/* Pliure horizontale (ombre douce) puis moitié basse en raccourci : lignes grisées floues. */
.une .fold { position: relative; margin: 2px -12px 0; height: 62px; perspective: 260px; flex: none; }
.une .fold::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 14px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(70, 52, 25, .28), rgba(70, 52, 25, .08) 45%, transparent); }
.une .fold::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(255, 255, 255, .7); box-shadow: 0 -1px 0 rgba(60, 45, 20, .25); }
.une .fold-lower { position: absolute; inset: 0 0 -24px; padding: 10px 14px 0; transform-origin: 50% 0; transform: rotateX(38deg);
  background: linear-gradient(to bottom, rgba(60, 45, 20, .10), rgba(60, 45, 20, .02) 60%); }
.une .cols2 { columns: 2; column-gap: 14px; column-rule: 1px solid rgba(26, 26, 26, .18); filter: blur(.7px); }
.une .cols2 i { display: block; height: 4px; margin: 0 0 6px; border-radius: 2px; background: rgba(40, 34, 26, .32); break-inside: avoid; }
.une .cols2 i:first-child { height: 6px; background: rgba(40, 34, 26, .5); }

/* Journal (PC) : grille de 2 à 4 unes selon leur nombre (--n), compactes, au-dessus des rumeurs. */
html:not(.m) #j-unes { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 20px; padding: 6px 6px 14px; align-items: stretch; }
html:not(.m) #j-unes .une .fold { flex: 1 0 62px; }
/* Journal (PC) : la colonne des unes prend la place, celle des sondages reste étroite. */
html:not(.m) #screen-journal > .col-3 { flex: 7 1 640px; }
html:not(.m) #screen-journal > .col-2 { flex: 3 1 340px; }
html:not(.m) #j-unes.solo { grid-template-columns: minmax(0, 460px); }
/* Mobile : une colonne d'unes. */
.m .unes { display: flex; flex-direction: column; gap: 16px; padding: 4px 6px 10px; }
.m .une { width: auto; flex: none; padding: 9px 11px 0; gap: 6px; }
.m .une .paper { font-size: 19px; }
.m .une .meta { font-size: 9px; }
.m .une .txt { font-size: 17px; }
.m .une .fold { height: 48px; margin: 2px -11px 0; }

/* Avertissement au lancement (jeu de fiction) et lien pour le relire depuis l'accueil. */
.warning { display: flex; align-items: center; justify-content: center; }
.warning-box { max-width: 860px; display: flex; flex-direction: column; gap: 22px; background: var(--panel); border-left: 8px solid var(--red); border-radius: 6px; padding: 36px 44px; }
.warning-title { font-family: var(--cond); font-weight: 800; font-size: 64px; line-height: 1; text-transform: uppercase; margin: 0; }
.warning-text { font-size: 20px; line-height: 1.6; color: #d5dcf2; margin: 0; }
.warning-box .btn { align-self: flex-start; }
.link-about { align-self: flex-start; background: none; border: 0; padding: 4px 0; color: var(--text3); font-size: 14px; text-decoration: underline; cursor: pointer; }
.link-about:hover { color: var(--text2); }
.m .warning { justify-content: flex-start; }
.m .warning-box { padding: 20px 18px; gap: 14px; border-left-width: 6px; }
.m .warning-title { font-size: 34px; }
.m .warning-text { font-size: 16px; line-height: 1.5; }
.m .link-about { align-self: center; font-size: 13px; }
/* Partis (PC) : 6 colonnes (11 partis sur 2 lignes) ; cases resserrées pour les noms longs. */
html:not(.m) #screen-lobby .grid-6 .choice { padding: 15px 6px; font-size: 16px; }

/* ===================================================================================
   Habillage « plateau » et animations de la chaîne (fx.js). Seulement transform / opacity.
   =================================================================================== */
/* Fond : halos de projecteurs flous (dégradés radiaux, aucun filtre), points lumineux, vignettage. */
.studio { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.studio .halo { position: absolute; border-radius: 50%; opacity: .55; }
.studio .h1 { width: 70%; height: 90%; left: -18%; top: -30%; background: radial-gradient(closest-side, rgba(70, 120, 255, .30), rgba(70, 120, 255, .08) 60%, transparent); animation: drift 26s ease-in-out infinite alternate; }
.studio .h2 { width: 60%; height: 80%; right: -15%; top: -25%; background: radial-gradient(closest-side, rgba(228, 0, 43, .16), rgba(228, 0, 43, .05) 60%, transparent); animation: drift 32s ease-in-out -9s infinite alternate-reverse; }
.studio .h3 { width: 80%; height: 60%; left: 15%; bottom: -35%; background: radial-gradient(closest-side, rgba(255, 196, 0, .10), transparent 70%); animation: drift 40s ease-in-out -4s infinite alternate; }
.studio .dots { position: absolute; inset: 0; opacity: .7; background:
  radial-gradient(2px 2px at 12% 18%, rgba(255, 255, 255, .55), transparent),
  radial-gradient(1.5px 1.5px at 27% 72%, rgba(170, 200, 255, .5), transparent),
  radial-gradient(2px 2px at 46% 9%, rgba(255, 255, 255, .45), transparent),
  radial-gradient(1.5px 1.5px at 63% 58%, rgba(255, 220, 160, .4), transparent),
  radial-gradient(2px 2px at 78% 26%, rgba(255, 255, 255, .5), transparent),
  radial-gradient(1.5px 1.5px at 90% 80%, rgba(170, 200, 255, .45), transparent),
  radial-gradient(1.5px 1.5px at 6% 88%, rgba(255, 255, 255, .35), transparent),
  radial-gradient(2px 2px at 55% 92%, rgba(255, 255, 255, .3), transparent); }
.studio::after { content: ""; position: absolute; inset: 0; background: radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(0, 0, 0, .55) 100%); }
@keyframes drift { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(6%, 4%, 0) scale(1.08); } }
.m .studio .h2, .m .studio .h3 { display: none; }
.m .studio .halo { animation: none; }
.m .studio .h1 { width: 140%; height: 60%; left: -30%; top: -20%; }

/* Panneaux « télé » : dégradé vertical, liseré lumineux en haut, ombre portée, reflet toutes les ~8 s. */
.panel, .fact, .stat, .rumors, .host-options, .warning-box, html:not(.m) .region-card { position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(0, 0, 0, .38), inset 0 1px 0 rgba(255, 255, 255, .08); }
.panel, .fact, .stat, .host-options, .warning-box { background: linear-gradient(180deg, #1a2856 0%, var(--panel) 55%, #0d1735 100%); }
.panel::before, .fact::before, .stat::before, .host-options::before, .warning-box::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(140, 180, 255, .75) 30%, rgba(255, 255, 255, .9) 50%, rgba(140, 180, 255, .75) 70%, transparent); opacity: .8; pointer-events: none; }
.panel::after, .fact::after, .stat::after, .rumors::after, .mood::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .13) 50%, rgba(255, 255, 255, .07) 55%, transparent);
  transform: translateX(-130%) skewX(-18deg); animation: sheen 8s ease-in-out infinite; }
.mood { position: relative; overflow: hidden; box-shadow: 0 10px 26px rgba(0, 0, 0, .38); }
.panel:nth-child(2n)::after, .fact:nth-child(2n)::after, .stat:nth-child(2n)::after { animation-delay: -2.7s; }
.panel:nth-child(3n)::after, .fact:nth-child(3n)::after, .stat:nth-child(3n)::after { animation-delay: -5.3s; }
@keyframes sheen { 0%, 82% { transform: translateX(-130%) skewX(-18deg); } 100% { transform: translateX(330%) skewX(-18deg); } }
.m #n-tip.float { overflow: visible; }
.m #n-tip.float::after, .m #n-tip.float::before, .tip::after { display: none; }
.m .panel::before, .m .fact::before, .m .stat::before { height: 1px; }

/* 1. Jingles (ne bloquent aucun clic) : COURT = volet rouge en biais + puce ; COMPLET = trois bandes
   bleu / blanc / rouge en diagonale (cadre tourné de −14°, taillé en JS), logo et « TOUR 2 / 5 ». */
.fx-jingle { position: fixed; inset: 0; z-index: 100; pointer-events: none; overflow: hidden; }
.fx-jingle[data-type="court"] .jg-rot, .fx-jingle[data-type="court"] .jg-logo,
.fx-jingle[data-type="complet"] .jg-wipe, .fx-jingle[data-type="complet"] .jg-chip { display: none; }
.jg-wipe { position: absolute; top: 0; bottom: 0; left: -30%; width: 160%; display: flex; transform: translateX(-110%) skewX(-12deg); will-change: transform; }
.jg-wipe i { flex: 1; background: var(--red); }
.jg-wipe i + i { flex: .35; background: var(--bg); }
.jg-chip { position: absolute; left: 50%; top: 50%; margin: -32px 0 0 -110px; width: 220px; height: 64px; display: flex; justify-content: center; font-family: var(--cond); font-weight: 800; font-size: 54px; line-height: 64px; opacity: 0; }
.jg-chip .brand-name { background: var(--red); color: #fff; padding: 0 14px; }
.jg-chip .brand-num { background: #fff; color: var(--red); padding: 0 12px; }
.jg-rot { position: absolute; left: 50%; top: 50%; display: flex; flex-direction: column; transform: translate(-50%, -50%) rotate(-14deg); }
.jg-rot i { flex: 1; margin: -1px 0; transform: translateX(-105%); will-change: transform; }
.jg-rot i:nth-child(1) { background: #1f3b8a; }
.jg-rot i:nth-child(2) { background: #f2f2f2; }
.jg-rot i:nth-child(3) { background: var(--red); }
.jg-logo { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; opacity: 0; }
.jg-brand { display: flex; font-family: var(--cond); font-weight: 800; font-size: 120px; line-height: 1; box-shadow: 0 30px 80px rgba(0, 0, 0, .45); }
.jg-brand .brand-name { background: var(--red); color: #fff; padding: 14px 26px; }
.jg-brand .brand-num { background: #fff; color: var(--red); padding: 14px 22px; }
.jg-sub { background: var(--bg); color: var(--gold); padding: 10px 22px; font-family: var(--cond); font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: .22em; text-transform: uppercase; white-space: nowrap; }
.m .jg-chip { margin: -22px 0 0 -75px; width: 150px; height: 44px; font-size: 36px; line-height: 44px; }
.m .jg-brand { font-size: 58px; }
.m .jg-brand .brand-name { padding: 8px 14px; } .m .jg-brand .brand-num { padding: 8px 12px; }
.m .jg-sub { font-size: 16px; letter-spacing: .14em; padding: 8px 12px; }
.fx-flash { position: fixed; inset: 0; z-index: 99; background: #fff; pointer-events: none; opacity: 0; }

/* 2. Bandeaux « nom » (tiers inférieur), au-dessus du bandeau des brèves. */
.fx-lower { position: absolute; left: 40px; bottom: 60px; z-index: 6; pointer-events: none; display: flex; flex-direction: column; gap: 8px; }
.l3 { display: flex; align-items: stretch; max-width: min(760px, 80vw); box-shadow: 0 12px 30px rgba(0, 0, 0, .5); will-change: transform; }
.l3-tag { color: #fff; font-family: var(--cond); font-weight: 800; font-size: 22px; letter-spacing: 1px; padding: 8px 14px; display: flex; align-items: center; text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.l3-txt { background: linear-gradient(180deg, #fff, #e3e8f5); color: var(--bg); font-family: var(--cond); font-weight: 700; font-size: 26px; padding: 8px 18px; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 4px solid var(--red); }
.l3-txt b { font-weight: 800; color: var(--red); }
.m .fx-lower { left: calc(10px + var(--sal)); right: calc(10px + var(--sar)); bottom: calc(var(--sab) + var(--cta-h, 0px) + var(--tab-h, 0px) + 12px); }
.m .l3 { max-width: 100%; }
.m .l3-tag { font-size: 14px; padding: 5px 8px; }
.m .l3-txt { font-size: 15px; padding: 5px 10px; border-bottom-width: 3px; }

/* 3. ALERTE INFO : page à elle seule (calque opaque entre la barre du haut et le bandeau), avant le Flash spécial. */
.fx-alert { position: absolute; left: 0; right: 0; top: 74px; bottom: 44px; z-index: 6; pointer-events: none; display: flex; align-items: center;
  background: radial-gradient(70% 70% at 50% 45%, #15275a, #0a1330 70%, #060b1a); }
.al-band { flex: 1; display: flex; align-items: center; height: 150px; background: linear-gradient(180deg, #ff1f47, var(--red) 50%, #b30022); box-shadow: 0 18px 50px rgba(0, 0, 0, .55); transform-origin: 0 50%; }
.al-tag { flex: none; height: 100%; display: flex; align-items: center; padding: 0 36px 0 48px; background: #fff; color: var(--red); font-family: var(--cond); font-weight: 800; font-size: 64px; letter-spacing: 3px; }
.al-text { padding: 0 40px; color: #fff; font-family: var(--cond); font-weight: 800; font-size: 60px; line-height: 1; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.m .al-band { height: auto; flex-direction: column; align-items: stretch; }
.m .al-tag { height: 44px; font-size: 28px; padding: 0 16px; letter-spacing: 2px; }
.m .al-text { font-size: 30px; padding: 14px 16px; min-height: 2.4em; -webkit-line-clamp: 4; }

/* 5. Compte à rebours « 20 h 00 » (aucun nom : flash blanc puis la carte). */
.fx-countdown { --pc: var(--gold); position: absolute; left: 0; right: 0; top: 74px; bottom: 44px; z-index: 5; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px;
  background: radial-gradient(70% 70% at 50% 45%, #15275a, #0a1330 70%, #060b1a); }
.cd-head { font-family: var(--cond); font-weight: 700; font-size: 26px; letter-spacing: 4px; text-transform: uppercase; color: var(--text2); }
.cd-clock { display: flex; align-items: center; font-family: var(--cond); font-weight: 800; font-size: 210px; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 40px rgba(110, 150, 255, .35); }
.cd-clock i { font-style: normal; opacity: .55; margin: 0 6px; transform: translateY(-8%); }
.cd-clock.at20 { color: var(--gold); text-shadow: 0 0 50px rgba(255, 196, 0, .45); }
.cd-sec { position: relative; display: inline-block; width: 1.08em; height: 1em; }
.cd-sec b { position: absolute; left: 0; right: 0; top: 0; text-align: center; color: var(--red); font-weight: 800; }
.at20 .cd-sec b { color: var(--gold); }
.cd-sub { font-size: 22px; color: var(--text3); letter-spacing: 2px; text-transform: uppercase; min-height: 1.2em; }
.m .cd-head { font-size: 15px; letter-spacing: 2px; }
.m .cd-clock { font-size: 72px; }
.m .cd-sub { font-size: 14px; }
/* Hôte : « Passer » le compte à rebours (seul élément cliquable du calque). */
.cd-skip { position: absolute; right: 40px; bottom: 28px; pointer-events: auto; }
.m .cd-skip { right: 16px; left: 16px; bottom: 16px; }
/* Lobby (PC) : tient à 8 joueurs sans défilement dès 1280 px de large (bouton « Lancer » visible) :
   personnalités sur 5 colonnes, cases resserrées, réglages de l'hôte sur une ligne. */
html:not(.m) #screen-lobby .col { gap: 12px; }
html:not(.m) #screen-lobby .block { gap: 8px; }
html:not(.m) #screen-lobby .grid { gap: 8px; }
html:not(.m) #screen-lobby .grid-4 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
html:not(.m) #screen-lobby .choice { padding: 8px 10px; font-size: 15.5px; line-height: 1.2; min-height: 44px; }
html:not(.m) #screen-lobby .grid-6 .choice { padding: 8px 4px; font-size: 15px; }
html:not(.m) #screen-lobby .field input { height: 44px; font-size: 18px; }
html:not(.m) #screen-lobby .host-options { padding: 10px 16px; gap: 6px; max-width: none; }
html:not(.m) #screen-lobby .host-options .row { gap: 8px 16px; }
html:not(.m) #screen-lobby .host-options select { height: 36px; }
html:not(.m) #screen-lobby .actions-row { margin-top: 2px; }
html:not(.m) #screen-lobby .player-row { font-size: 17px; }
html:not(.m) #screen-lobby .list { gap: 6px; }
/* PC : l'espace vertical libre est utilisé (scène de 900 px de haut à toutes les tailles). */
/* Actions : la carte grandit avec la hauteur disponible (proportions du tracé), le plan remplit la colonne. */
html:not(.m) #screen-actions .col-map > .map-row { flex: 1 1 0; min-height: 0; }
html:not(.m) #action-map { height: 100%; width: auto; aspect-ratio: 650 / 550; max-width: calc(100% - 184px); }
html:not(.m) #action-map svg { width: 100%; height: 100%; }
html:not(.m) #screen-actions .col-actions .plan-panel { flex: 1 1 auto; }
/* Journal : les unes occupent toute la hauteur libre ; événement : contenu centré verticalement. */
html:not(.m) #j-unes { max-height: none; }
html:not(.m) #event-main { justify-content: center; }
html:not(.m) #screen-actions .actions-row .btn { padding: 0 22px; white-space: nowrap; }

/* Soirée : carte des communes (canvas WebGL sous le SVG, qui garde traits fins et frontières). */
#night-map { position: relative; }
#night-map svg { position: relative; }
.commune-canvas { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; }
#night-map .commune-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#night-map.communes-on svg, #night-map.communes-on svg * { pointer-events: none !important; }
#night-map.communes-on .dp { fill-opacity: 0; stroke-width: .45; stroke: rgba(11, 18, 38, .8); }
#night-map.communes-on svg:not(.commune-bg) rect { fill-opacity: 0; }

/* ===================================================================================
   v42 — mode appli, navigation d'appli sur téléphone, transitions
   =================================================================================== */

/* Mobile : glissé entre deux écrans d'un même tour (fx.js). */
.fx-leaving { position: absolute !important; inset: 0; z-index: 0; pointer-events: none; }
.fx-entering { position: relative; z-index: 2; box-shadow: -20px 0 40px rgba(0, 0, 0, .5); background: radial-gradient(ellipse at 50% 0, #1b2b60, #0b1226 60%); }
.fx-dim { position: absolute; inset: 0; z-index: 1; background: #000; opacity: 0; pointer-events: none; }
.fx-progress { position: absolute; left: 0; right: 0; top: 0; z-index: 3; height: 3px; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); pointer-events: none; }

/* Onglets du bas (Carte / Actions / Mon score) : icônes au trait, pastille dorée qui glisse. */
.tabbar { display: none; }
.m .tabbar:not([hidden]) { position: relative; flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: 64px; padding: 0 10px; background: var(--panel); border-top: 1px solid rgba(255, 255, 255, .08); }
.tab-pill { position: absolute; left: 10px; top: 6px; width: calc((100% - 20px) / 3); height: 52px; display: block; pointer-events: none; }
.tab-pill::before { content: ""; position: absolute; inset: 0 6px; border-radius: 14px; background: rgba(255, 196, 0, .14); }
.tabbar button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 0; background: none; color: #7e8db5; font-family: var(--cond); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tabbar button.on { color: var(--gold); }

/* Fiche région : fond assombri, cercle doré au toucher, pastille « ajouté au plan ». */
.sheet-dim { position: fixed; inset: 0; z-index: 40; background: rgba(4, 8, 20, .55); }
.tap-ring { position: fixed; z-index: 39; width: 64px; height: 48px; margin: -24px 0 0 -32px; border: 3px solid var(--gold); border-radius: 50%; pointer-events: none; }
.m-toast { position: fixed; left: 50%; z-index: 45; transform: translate(-50%, 0); background: #2bb24c; color: #fff; padding: 9px 16px; border-radius: 20px; font-weight: 700; font-size: 15px; white-space: nowrap; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); pointer-events: none; }

/* Journal : ombre des unes qui tombent (calque animé en opacité seulement). */
#screen-journal, #screen-journal .col-3 { position: relative; }
.une-shade { position: absolute; z-index: 0; pointer-events: none; box-shadow: 0 30px 50px rgba(0, 0, 0, .55); opacity: 0; }
.poll-big b { display: inline-block; }

#night-map { overflow: hidden; }

/* Soirée : 20 h sans nom ; résultat définitif à 100 % (cadre doré, bandeau rouge qui monte du bas). */
.cd-sub.on { color: #fff; }
.final-frame { outline: 3px solid var(--gold); outline-offset: -3px; box-shadow: 0 0 40px rgba(255, 196, 0, .3); }
.fx-final { pointer-events: none; position: absolute; left: 0; right: 0; bottom: 44px; z-index: 7; display: flex; align-items: center; gap: 30px; min-height: 150px; padding: 0 60px; background: linear-gradient(90deg, var(--red), #b8001f); color: #fff; box-shadow: 0 -12px 40px rgba(0, 0, 0, .45); }
.fn-k { flex: none; width: 230px; display: flex; align-items: center; justify-content: space-between; gap: 10px; font-family: var(--cond); font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.fn-buzz { display: none; flex: none; }
.fn-main { font-family: var(--cond); font-weight: 800; font-size: 58px; line-height: 1.02; text-transform: uppercase; }
.fn-vs { font-weight: 600; font-size: .6em; color: var(--gold); }
.m .fx-final { left: calc(12px + var(--sal)); right: calc(12px + var(--sar)); bottom: calc(var(--sab) + var(--cta-h, 0px) + 12px); flex-direction: column; align-items: stretch; gap: 8px; min-height: 0; padding: 18px 18px 20px; border-radius: 20px; background: linear-gradient(160deg, var(--red), #a3001c); box-shadow: 0 -10px 50px rgba(0, 0, 0, .5); }
.m .fn-k { width: auto; font-size: 13px; }
.m .fn-buzz { display: block; }
.m .fn-main { font-size: 32px; }
.m .fn-main b { display: block; }
.m .fn-vs { display: block; font-family: var(--body); font-size: 16px; color: #ffd9df; text-transform: none; }

/* Proclamation : noir, phrase mot par mot, trois points dorés, nom en or lettre par lettre. */
.fx-proclaim { --pc: var(--gold); position: fixed; inset: 0; z-index: 95; background: #000; color: #fff; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.pr-glow { position: absolute; left: 50%; top: 52%; width: 1200px; height: 700px; margin: -350px 0 0 -600px; background: radial-gradient(ellipse, color-mix(in srgb, var(--pc) 45%, transparent), transparent 65%); opacity: 0; pointer-events: none; }
.pr-stage { position: relative; display: grid; place-items: center; width: 100%; perspective: 900px; }
.pr-words, .pr-win { grid-area: 1 / 1; display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; }
.pr-line { font-family: var(--cond); font-weight: 700; font-size: 52px; letter-spacing: .04em; text-transform: uppercase; }
.pr-w { display: inline-block; opacity: 0; }
.pr-dots { display: flex; gap: 16px; margin-top: 30px; opacity: 0; }
.pr-dots i { width: 14px; height: 14px; border-radius: 50%; background: var(--gold); animation: pr-blink .6s ease-in-out infinite alternate; }
.pr-dots i:nth-child(2) { animation-delay: .2s; } .pr-dots i:nth-child(3) { animation-delay: .4s; }
@keyframes pr-blink { to { opacity: .2; transform: scale(.7); } }
.pr-name { font-family: var(--cond); font-weight: 800; font-size: 190px; line-height: .92; color: var(--gold); letter-spacing: .01em; }
.pr-l { display: inline-block; opacity: 0; }
.pr-bar { width: 900px; max-width: 80vw; height: 10px; margin-top: 26px; background: var(--pc); transform: scaleX(0); }
.pr-sub { margin-top: 26px; padding: 0 24px; font-size: 28px; font-weight: 600; color: #dce3f5; opacity: 0; }
.pr-skip { position: absolute; right: calc(24px + var(--sar)); bottom: calc(20px + var(--sab)); color: var(--text3); }
.m .pr-glow { width: 690px; height: 520px; margin: -260px 0 0 -345px; }
.m .pr-line { font-size: 30px; line-height: 1.15; padding: 0 24px; }
.m .pr-dots { gap: 12px; } .m .pr-dots i { width: 11px; height: 11px; }
.m .pr-name { font-size: 74px; line-height: .95; }
.m .pr-bar { width: auto; align-self: stretch; margin: 20px 40px 0; height: 8px; }
.m .pr-sub { font-size: 17px; line-height: 1.4; font-weight: 500; }
.m .pr-sep { display: block; font-size: 0; }

/* Mode appli : écran de lancement (logo qui rebondit, barre rouge, EN DIRECT). */
.fx-splash { position: fixed; inset: 0; z-index: 200; }
.sp-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 42%, #1b2b60, #0b1226 70%); }
.sp-logo { position: absolute; left: 50%; top: 44%; display: flex; margin: -32px 0 0 -110px; width: 220px; height: 64px; justify-content: center; font-family: var(--cond); font-weight: 800; font-size: 54px; line-height: 64px; }
.sp-logo .brand-name { background: var(--red); color: #fff; padding: 0 14px; }
.sp-logo .brand-num { background: #fff; color: var(--red); padding: 0 12px; }
.sp-load { position: absolute; left: 50%; top: calc(44% + 72px); width: 200px; height: 4px; margin-left: -100px; border-radius: 2px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.sp-load i { display: block; height: 100%; background: var(--red); transform-origin: 0 50%; transform: scaleX(0); }
.sp-live { position: absolute; left: 0; right: 0; top: calc(44% + 96px); display: flex; justify-content: center; align-items: center; gap: 8px; font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .24em; color: #9fb0d8; }
.sp-live .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: pulse 1s ease-in-out infinite; }

/* Navigateur mobile : invitation « Jouez en plein écran » (feuille en bas de l'accueil). */
.install { position: fixed; inset: 0; z-index: 80; }
.install-dim { position: absolute; inset: 0; background: rgba(4, 8, 20, .6); }
.install-sheet { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px calc(20px + var(--sar)) calc(30px + var(--sab)) calc(20px + var(--sal)); background: var(--panel); border-top: 2px solid var(--gold); border-radius: 22px 22px 0 0; box-shadow: 0 -20px 60px rgba(0, 0, 0, .5); }
.ins-grip { width: 40px; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .3); margin: 0 auto 18px; }
.ins-head { display: flex; gap: 16px; align-items: center; margin-bottom: 16px; }
.ins-head h2 { margin: 0; font-family: var(--cond); font-weight: 800; font-size: 28px; line-height: 1.05; text-transform: uppercase; }
.ins-head p { margin: 4px 0 0; font-size: 15px; line-height: 1.35; color: #9fb0d8; }
.ins-icon { flex: none; width: 72px; height: 72px; border-radius: 17px; background: linear-gradient(160deg, #1b2b60, #0b1226); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; box-shadow: 0 8px 20px rgba(0, 0, 0, .4); font-family: var(--cond); font-weight: 800; font-size: 18px; line-height: 1; }
.ins-icon span:first-child { background: var(--red); padding: 3px 6px; }
.ins-icon span:last-child { background: #fff; color: var(--red); padding: 3px 6px; }
.ins-steps { list-style: none; margin: 0 0 18px; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ins-steps li { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--panel2); border-radius: 12px; font-size: 16px; line-height: 1.3; color: #dce3f5; }
.ins-steps b { color: #fff; }
.ins-steps svg { color: var(--gold); vertical-align: -3px; }
.ins-steps .num { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--gold); color: var(--bg); display: flex; align-items: center; justify-content: center; font-family: var(--cond); font-weight: 800; font-size: 17px; }
.ins-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ins-btns .btn { height: 52px; font-size: 20px; border-radius: 12px; }
.ins-later { background: var(--panel2); color: #9fb0d8; }
.install-arrow { display: none; position: absolute; left: 50%; bottom: calc(4px + var(--sab)); margin-left: -14px; color: var(--gold); pointer-events: none; }
.install.ios .install-arrow { display: block; }
.install-arrow svg { animation: ins-bob .8s ease-in-out infinite alternate; }
@keyframes ins-bob { to { transform: translateY(8px); } }
@media (prefers-reduced-motion: reduce) {
  .pr-dots i, .install-arrow svg, .sp-live .dot { animation: none !important; }
}

/* --- Spectateur (éliminé pendant l'entre-deux-tours) : carte neutre en lecture seule (v43) --- */
.spec-banner { display: flex; align-items: center; gap: 14px; font-family: var(--cond); font-size: 30px; font-weight: 700; text-transform: uppercase; line-height: 1.1; flex: none; }
.spec-banner .tag { background: var(--red); color: #fff; font-weight: 800; letter-spacing: 2px; padding: 4px 12px; font-size: 18px; border-radius: 3px; flex: none; }
.spec-banner .k2 { font-size: .7em; }
#wait-map { position: relative; }
#wait-map .rg { cursor: pointer; }
.spec-flash .flash { font-size: 20px; letter-spacing: 2px; padding: 4px 14px; }
.spec-flash .debate-flash { margin-top: 4px; font-size: 17px; }
.spec-event { display: flex; flex-direction: column; gap: 2px; }
.spec-event b { font-family: var(--cond); font-size: 24px; line-height: 1.15; }
html:not(.m) #screen-wait .col-map { flex: 3 1 600px; }
html:not(.m) #wait-map { flex: 1 1 0; min-height: 0; width: 100%; }
html:not(.m) #wait-map svg { width: 100%; height: 100%; }
html:not(.m) #wait-side > .btn { align-self: flex-start; }
/* Passage automatique : bandeau doré au centre de la barre du haut (PC), chez tout le monde. */
.auto-banner { position: absolute; left: 50%; top: 16px; transform: translateX(-50%); z-index: 30; background: var(--gold); color: #0B1226; font-family: var(--cond); font-weight: 800; font-size: 24px; letter-spacing: .5px; padding: 8px 22px; border-radius: 4px; box-shadow: 0 10px 26px rgba(0, 0, 0, .45); white-space: nowrap; pointer-events: none; }
.m .auto-banner { position: fixed; top: auto; bottom: calc(var(--sab) + var(--cta-h, 0px) + var(--tab-h, 0px) + 10px); font-size: 17px; padding: 7px 14px; max-width: calc(100% - 24px - var(--sal) - var(--sar)); white-space: normal; text-align: center; }
.m .spec-banner { font-size: 20px; gap: 10px; }
.m .spec-banner .tag { font-size: 14px; padding: 3px 8px; }
.m .spec-tabs { display: flex; gap: 6px; background: var(--panel); border-radius: 22px; padding: 4px; flex: none; }
.m .spec-tabs button { flex: 1; height: 36px; border-radius: 18px; background: none; border: 0; color: var(--text2); font-family: var(--cond); font-size: 18px; font-weight: 700; text-transform: uppercase; }
.m .spec-tabs button.on { background: var(--gold); color: #0B1226; }
.m #screen-wait { display: flex; flex-direction: column; gap: 10px; }
.m #screen-wait:not([data-tab="carte"]) [data-pane="carte"],
.m #screen-wait:not([data-tab="info"]) #wait-side > * { display: none !important; }
.m #wait-map { width: 100%; }
.m #wait-region { position: static; left: auto; right: auto; bottom: auto; z-index: auto; padding: 12px 16px; border-radius: 12px; }
.m #wait-region .nums { text-align: left; gap: 26px; }
.m .spec-event b { font-size: 19px; }
.m .cta .rest .forget-note { display: block; flex-basis: 100%; font-size: 12px; }

/* --- Quitter la partie (v46) : bouton discret (PC), menu « ⋯ » (mobile), boîte de confirmation --- */
.top-leave { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-left: 24px; background: none; border: 1px solid transparent; border-radius: 4px; color: var(--text3); font-family: var(--body); font-size: 14px; font-weight: 600; cursor: pointer; }
.top-leave[hidden], .top-menu[hidden] { display: none !important; }
.top-leave:hover, .top-leave:focus-visible { color: var(--text); border-color: var(--line); background: rgba(255, 255, 255, .06); }
.top-menu { position: relative; flex: none; margin-left: 4px; }
.top-menu-btn { width: 36px; height: 32px; background: none; border: 1px solid var(--line); border-radius: 4px; color: var(--text); font-size: 20px; line-height: 1; cursor: pointer; }
.top-menu-list { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 190px; padding: 4px 0; background: #16224A; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 28px rgba(0, 0, 0, .5); }
.top-menu-list[hidden] { display: none; }
.top-menu-list button { display: block; width: 100%; padding: 12px 16px; background: none; border: 0; color: var(--text); font-family: var(--body); font-size: 16px; font-weight: 600; text-align: left; cursor: pointer; }
.top-menu-list button:hover, .top-menu-list button:focus-visible { background: rgba(255, 255, 255, .08); }
.leave-dialog { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(5, 9, 22, .72); }
.leave-dialog[hidden] { display: none; }
.leave-box { width: min(440px, 100%); padding: 26px 28px; background: var(--panel2); border: 1px solid var(--line); border-top: 4px solid var(--red); border-radius: 6px; box-shadow: 0 20px 50px rgba(0, 0, 0, .6); }
.leave-box h2 { margin: 0 0 10px; font-family: var(--cond); font-size: 30px; text-transform: uppercase; letter-spacing: 1px; }
.leave-box p { margin: 0 0 22px; font-size: 17px; line-height: 1.4; color: var(--text2); }
.leave-actions { display: flex; gap: 12px; justify-content: flex-end; }
.leave-actions .btn { height: 46px; font-size: 20px; padding: 0 26px; }
.notice { position: absolute; left: 50%; top: calc(var(--topbar-h, 74px) + 10px); z-index: 6; transform: translateX(-50%); margin: 0; max-width: 90%; padding: 8px 18px; background: var(--panel2); border: 1px solid var(--gold); border-radius: 4px; color: var(--text); font-weight: 600; box-shadow: 0 6px 16px rgba(0, 0, 0, .4); }
.notice[hidden] { display: none; }
.notice.persist { top: calc(var(--topbar-h, 74px) + 52px); border-color: var(--red); }
.m .notice { top: calc(74px + var(--sat)); font-size: 14px; }
.m .notice.persist { top: calc(112px + var(--sat)); }
.left-tag { color: var(--text3); font-weight: 500; font-size: .75em; letter-spacing: 0; text-transform: none; }

/* --- Boutons (v46) : survol, appui, focus clavier. Couleur seulement par défaut (mouvements réduits) ;
   mouvement (transform / box-shadow / opacity, ≤ 200 ms) sur PC uniquement. --- */
html:not(.m) .btn:hover:not(:disabled), html:not(.m) .btn:focus-visible { filter: brightness(1.08); }
html:not(.m) .btn-ghost:hover:not(:disabled), html:not(.m) .btn-ghost:focus-visible { filter: none; background: #1f2f62; }
html:not(.m) .btn-x:hover:not(:disabled), html:not(.m) .btn-x:focus-visible { background: rgba(255, 255, 255, .09); color: var(--text); }
html:not(.m) .btn:active:not(:disabled) { filter: brightness(.92); }
html:not(.m) .card:hover:not(.off):not(:disabled) { background: #16224a; }
.btn:focus-visible, .btn-x:focus-visible, .card:focus-visible, .top-leave:focus-visible, .top-menu-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.btn-sent { position: absolute; gap: 10px; background: #1f9d55; color: #fff; }
.sent-check { display: inline-block; }
.fx-ripple { position: absolute; border-radius: 50%; background: rgba(255, 196, 0, .35); pointer-events: none; transform: scale(.05); opacity: 0; }
.fx-clip { overflow: hidden; }
.li-ghost { pointer-events: none; transform-origin: top; }
.rg-pulse { fill: none; stroke: var(--gold); stroke-width: 7; stroke-linejoin: round; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.m) .btn, html:not(.m) .btn-x { transition: transform .2s cubic-bezier(.3, 1.7, .5, 1), box-shadow .15s ease, background-color .15s ease, filter .15s ease; }
  html:not(.m) .btn-red:hover:not(:disabled), html:not(.m) .btn-red:focus-visible,
  html:not(.m) .btn-gold:hover:not(:disabled), html:not(.m) .btn-gold:focus-visible { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(255, 196, 0, .35), 0 0 0 1px rgba(255, 196, 0, .45); }
  html:not(.m) .btn:active:not(:disabled), html:not(.m) .btn-x:active:not(:disabled) { transform: scale(.97); box-shadow: inset 0 2px 8px rgba(0, 0, 0, .4); transition-duration: .08s; }
  html:not(.m) .drop-chev { display: inline-block; transition: transform .18s ease; }
  html:not(.m) .drop-btn[aria-expanded="true"] .drop-chev { transform: rotate(180deg); }
  html:not(.m) .drop-list:not([hidden]), html:not(.m) .top-menu-list:not([hidden]) { animation: drop-open .18s ease-out; }
  .leave-box { animation: drop-open .18s ease-out; }
}
@keyframes drop-open { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }
.topbar { z-index: 8; } /* au-dessus du bandeau des brèves : le menu « ⋯ » déborde sur lui */

/* ===================================================================================
   ÉLYSÉE24 Prime (v49), étape 1 : fondations PC (maquettes « 1 · ÉLYSÉE24 Prime » du canvas).
   Jetons ci-dessous (couleurs, police d'affiche, rayons, ombres, courbes), fond plateau, panneaux
   « verre », boutons, barre du haut et bandeau des brèves. Seulement sur PC (html:not(.m)) : le
   mobile garde l'habillage précédent jusqu'à son étape. Les écrans (lobby, actions, soirée…)
   réutilisent ces jetons et les classes .glass / .cap / .disp.
   =================================================================================== */
:root {
  --ink: #060914;          /* fond le plus sombre */
  --ink2: #0a1124;         /* haut du dégradé de fond */
  --ink3: #0a1022;         /* bandeau des brèves */
  --glass: linear-gradient(180deg, rgba(28, 40, 86, .58), rgba(13, 20, 46, .78));
  --glass-hi: linear-gradient(180deg, rgba(36, 52, 110, .62), rgba(16, 24, 54, .8));
  --stroke: rgba(150, 172, 255, .11);
  --stroke2: rgba(150, 172, 255, .22);
  --gold-line: rgba(255, 196, 0, .5);
  --text-p: #e9eeff;       /* texte courant Prime */
  --cap: #8f9bc2;          /* petites capitales */
  --red2: #ff2d4f;         /* rouge vif (direct, alertes) */
  --display: "Big Shoulders Display", "Barlow Condensed", "Arial Narrow", sans-serif;
  --r-sm: 8px; --r: 12px; --r-lg: 16px;
  --sh-panel: inset 0 1px 0 rgba(255, 255, 255, .07), 0 24px 60px -28px rgba(0, 0, 0, .85);
  --sh-lift: inset 0 1px 0 rgba(255, 255, 255, .08), 0 14px 28px -16px rgba(0, 0, 0, .9);
  --ease: cubic-bezier(.2, .8, .2, 1);      /* sortie douce */
  --spring: cubic-bezier(.3, 1.5, .5, 1);   /* léger rebond */
}
/* Classes utilitaires réutilisées par les étapes suivantes. */
.glass { position: relative; background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--sh-panel); }
.cap { font: 600 12px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: var(--cap); }
.disp { font-family: var(--display); font-weight: 800; text-transform: uppercase; letter-spacing: .02em; }
.num { font-variant-numeric: tabular-nums; }

/* Fond plateau : dégradé nuit, projecteur bleu en haut à gauche, reflet or en bas à droite, grain. */
html:not(.m) div.app { --topbar-h: 64px; color: var(--text-p);
  background: radial-gradient(1000px 560px at 26% -14%, rgba(70, 100, 210, .26), transparent 62%),
    radial-gradient(700px 480px at 104% 104%, rgba(255, 196, 0, .06), transparent 60%),
    linear-gradient(180deg, var(--ink2) 0%, var(--ink) 72%); }
html:not(.m) .studio .h1 { opacity: .45; }
html:not(.m) .studio .h2 { opacity: .3; }
html:not(.m) .studio .dots { opacity: .45; }
html:not(.m) .studio::before { content: ""; position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
html:not(.m) .studio::after { background: radial-gradient(130% 110% at 50% 40%, transparent 60%, rgba(0, 0, 0, .5) 100%); }

/* Titres et chiffres : police d'affiche. */
html:not(.m) :is(.mega, .giant, .big, .proclaim, .top-turn, .top-budget b, .stat b, .rank-row b, .end-wait) { font-family: var(--display); }
html:not(.m) :is(.mega, .giant, .proclaim) { font-weight: 900; letter-spacing: .01em; }
html:not(.m) .lead { color: #c9d2f2; }
html:not(.m) :is(.label, .k) { font-family: var(--cond); font-weight: 600; letter-spacing: .18em; color: var(--cap); }
html:not(.m) .label { font-size: 13px; }
html:not(.m) .flash { font-family: var(--display); font-weight: 800; letter-spacing: .08em; border-radius: var(--r-sm); padding: 6px 16px; box-shadow: 0 8px 22px -8px rgba(228, 0, 43, .7); }

/* Panneaux « verre » : dégradé translucide, filet fin, grande ombre douce ; liseré et reflet adoucis. */
html:not(.m) :is(.panel, .host-options, .warning-box) { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-lg); box-shadow: var(--sh-panel); }
html:not(.m) :is(.fact, .stat) { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r); box-shadow: var(--sh-panel); }
html:not(.m) :is(.panel, .fact, .stat, .host-options, .warning-box)::before { opacity: .28; }
html:not(.m) :is(.panel, .fact, .stat, .rumors, .mood)::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .04) 45%, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, .04) 55%, transparent); }
html:not(.m) :is(.rumors, .region-card, .mood) { border-radius: var(--r); }
html:not(.m) :is(.rumors, .region-card) { background: var(--glass-hi); box-shadow: var(--sh-panel); }
html:not(.m) .card { border-radius: var(--r); border-color: var(--stroke); background: linear-gradient(180deg, rgba(32, 46, 98, .5), rgba(16, 24, 54, .66)); }
html:not(.m) .card:hover:not(.off):not(:disabled) { border-color: var(--gold-line); background: linear-gradient(180deg, rgba(40, 56, 116, .56), rgba(18, 28, 62, .72)); }
html:not(.m) .field input, html:not(.m) select { border-radius: var(--r-sm); }

/* Boutons : coins arrondis, police d'affiche ; or = action principale, rouge = direct, fantôme = secondaire. */
html:not(.m) .btn:not(.cd-skip, .btn-sent) { position: relative; }
html:not(.m) .btn { overflow: hidden; border-radius: var(--r); font-family: var(--display); font-weight: 900; letter-spacing: .06em; }
html:not(.m) .btn-red { background: linear-gradient(180deg, #ff2a4f, var(--red) 55%, #c30025); box-shadow: 0 10px 26px -12px rgba(228, 0, 43, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
html:not(.m) .btn-gold { background: linear-gradient(180deg, #ffd23d, var(--gold) 60%, #e9b200); color: #0b1226; box-shadow: 0 10px 26px -12px rgba(255, 196, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }
html:not(.m) .btn-ghost { background: rgba(255, 255, 255, .03); color: #dde4ff; border: 1px solid var(--stroke2); font-family: var(--body); font-weight: 600; letter-spacing: .02em; text-transform: none; border-radius: 10px; }
html:not(.m) .btn-ghost:hover:not(:disabled), html:not(.m) .btn-ghost:focus-visible { background: rgba(255, 255, 255, .07); border-color: var(--gold-line); }
html:not(.m) .btn-x { border-radius: var(--r-sm); border-color: var(--stroke2); }
html:not(.m) .top-leave { border-radius: 10px; border-color: var(--stroke2); color: #c9d2f2; height: 34px; padding: 0 12px; }
html:not(.m) .top-leave:hover, html:not(.m) .top-leave:focus-visible { border-color: var(--gold-line); }
/* Reflet qui traverse le bouton au survol (pleins seulement). */
html:not(.m) :is(.btn-red, .btn-gold)::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .42) 50%, transparent 65%); transform: translateX(-120%); }

/* Barre du haut : verre sombre, filet fin, logo « ÉLYSÉE24 » + puce PRIME, pastille EN DIRECT. */
html:not(.m) .topbar { height: 64px; padding: 0 24px; gap: 18px; background: rgba(6, 9, 20, .55); border-bottom: 1px solid rgba(150, 172, 255, .09); box-shadow: 0 10px 30px -18px rgba(0, 0, 0, .9); }
html:not(.m) .topbar::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 30%; height: 2px; background: linear-gradient(90deg, var(--gold), rgba(255, 196, 0, 0)); pointer-events: none; }
html:not(.m) .logo { flex-direction: row; align-items: center; gap: 14px; }
html:not(.m) .brand { height: 32px; align-items: stretch; font-family: var(--display); font-size: 20px; letter-spacing: .05em; border-radius: 6px; box-shadow: 0 8px 22px -8px rgba(228, 0, 43, .7); }
html:not(.m) .brand-name { display: flex; align-items: center; background: var(--red); padding: 0 4px 0 10px; }
html:not(.m) .brand-num { display: flex; align-items: center; background: var(--red); color: #fff; padding: 0 10px 0 2px; }
/* Logo (v62) : « ÉLYSÉE24 » d'un seul bloc rouge, sans PRIME ni EN DIRECT ; point rouge du direct qui clignote à côté. */
html:not(.m) .brand { background: var(--red); padding: 0 10px; gap: .18em; }
html:not(.m) .brand-name, html:not(.m) .brand-num { background: none; padding: 0; }
@keyframes ping { 0% { transform: scale(.45); opacity: .95; } 100% { transform: scale(1.7); opacity: 0; } }
html:not(.m) .top-turn { font-weight: 800; font-size: 22px; letter-spacing: .04em; color: #fff; }
html:not(.m) .top-turn small { color: #7f8bb3; font-size: 18px; }
html:not(.m) .top-budget { display: flex; align-items: center; gap: 14px; height: 44px; padding: 0 16px; border-radius: var(--r); background: rgba(255, 196, 0, .07); border: 1px solid rgba(255, 196, 0, .3); }
html:not(.m) .top-budget span { font: 600 12px/1 var(--cond); letter-spacing: .18em; text-transform: uppercase; color: #e8c766; }
html:not(.m) .top-budget b { font-weight: 800; font-size: 26px; font-variant-numeric: tabular-nums; }
html:not(.m) .top-code b { font-family: var(--display); font-weight: 800; }

/* Bandeau des brèves : bande sombre, étiquettes rouge (direct) et or (BRÈVES), texte clair, losanges or. */
html:not(.m) .ticker { background: var(--ink3); color: #dde4ff; font-weight: 600; font-size: 15px; border-top: 1px solid rgba(150, 172, 255, .1); box-shadow: 0 -10px 30px -16px rgba(0, 0, 0, .9); }
html:not(.m) .ticker-clock { font-family: var(--display); font-size: 20px; letter-spacing: .06em; box-shadow: none; font-variant-numeric: tabular-nums; }
html:not(.m) .ticker-tag { position: relative; background: var(--gold); color: #0b1226; font-family: var(--display); font-size: 17px; letter-spacing: .08em; padding: 0 16px; margin-right: 26px; }
html:not(.m) .ticker-tag::after { content: ""; position: absolute; left: 100%; top: 0; bottom: 0; width: 34px; pointer-events: none; background: linear-gradient(90deg, var(--gold) 0%, rgba(255, 196, 0, .78) 18%, rgba(255, 196, 0, .45) 42%, rgba(255, 196, 0, .18) 68%, rgba(255, 196, 0, .05) 88%, rgba(255, 196, 0, 0) 100%); } /* fondu doux (v66) */
html:not(.m) .ticker-tag.flash::after { background: none; }
html:not(.m) .ticker-info { font-family: var(--display); font-weight: 800; font-size: 16px; letter-spacing: .06em; }
html:not(.m) .ticker-track span, html:not(.m) .ticker-flash span { padding: 0 24px; }
html:not(.m) :is(.ticker-track, .ticker-flash) .sep-dot { color: var(--gold); }
html:not(.m) .ticker-flash { color: var(--red2); } /* rouge vif : lisible sur la bande sombre */

/* Micro-animations (PC, mouvements autorisés) : seulement transform / opacity. */
@media (prefers-reduced-motion: no-preference) {
  html:not(.m) :is(.btn-red, .btn-gold)::after { transition: transform .7s var(--ease); }
  html:not(.m) :is(.btn-red, .btn-gold):hover:not(:disabled)::after, html:not(.m) :is(.btn-red, .btn-gold):focus-visible::after { transform: translateX(120%); }
  /* Survol des boutons pleins : soulèvement −1 px + lueur dorée (règle v46, plus haut), reflet en plus. */
  html:not(.m) .btn:active:not(:disabled) { transform: translateY(1px) scale(.97); }
  html:not(.m) .btn-ghost, html:not(.m) .top-leave, html:not(.m) .card { transition: transform .15s var(--ease), background-color .2s, border-color .2s, box-shadow .2s; }
  html:not(.m) .card:hover:not(.off):not(:disabled) { transform: translateX(3px); box-shadow: var(--sh-lift); }
  html:not(.m) .card:active:not(.off):not(:disabled) { transform: scale(.975); transition-duration: .1s; }
  html:not(.m) .top-leave:active, html:not(.m) .btn-ghost:active:not(:disabled) { transform: scale(.96); }
  html:not(.m) :is(.panel, .fact, .stat) { transition: border-color .25s, box-shadow .25s; }
}
@media (prefers-reduced-motion: reduce) {
  .live-dot { animation: none !important; }
}

/* ===================================================================================
   ÉLYSÉE24 Prime (v50), étape 2 : transitions et séquences de fx.js sur PC (maquettes
   « Transitions » et « Flash spécial »). Mêmes durées et mêmes calques ; seul l'habillage change.
   Éléments ajoutés (accroche et frise du jingle, liseré or de l'ALERTE, barre du compte à
   rebours) : masqués sur mobile.
   =================================================================================== */
.jg-kick, .jg-segs, .al-gold, .cd-bar { display: none; }
.jg-sub i { font-style: normal; }

/* Jingle court (même tour) : volet bleu nuit à bord rouge et or, puce ÉLYSÉE24 PRIME. */
html:not(.m) .jg-wipe i:first-child { background: linear-gradient(90deg, var(--ink) 0%, #16224a 78%, var(--red) 92%, var(--gold) 100%); }
html:not(.m) .jg-wipe i + i { flex: .25; background: radial-gradient(600px 400px at 30% 50%, #16224a, var(--ink)); }
html:not(.m) .jg-chip { width: 300px; margin-left: -150px; border-radius: 8px; overflow: hidden; font-family: var(--display); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .8), 0 0 0 1px rgba(255, 255, 255, .08); }
html:not(.m) .jg-chip .brand-num { background: var(--red); color: #fff; padding: 0 12px 0 2px; }
html:not(.m) .jg-chip::after { content: "PRIME"; display: flex; align-items: center; background: var(--gold); color: #0b1226; font: 700 12px/1 var(--cond); letter-spacing: .24em; padding: 0 10px; }

/* Jingle complet (nouveau tour, soirée) : volet or, volet nuit à bord rouge, puis bleu nuit, titre géant. */
html:not(.m) .jg-rot { transform: translate(-50%, -50%); }
html:not(.m) .jg-rot { display: grid; }
html:not(.m) .jg-rot i { grid-area: 1 / 1; margin: 0; }
html:not(.m) .jg-rot i:nth-child(1) { background: var(--gold); }
html:not(.m) .jg-rot i:nth-child(2) { background: linear-gradient(90deg, var(--ink) 0%, #16224a 88%, var(--red) 96%, #ff2a4f 100%); }
html:not(.m) .jg-rot i:nth-child(3) { background: radial-gradient(900px 520px at 50% 42%, #1a2a5c, #0a1124 55%, var(--ink)); }
html:not(.m) .jg-logo { gap: 22px; }
html:not(.m) .jg-brand { font-family: var(--display); font-size: 30px; border-radius: 6px; overflow: hidden; box-shadow: 0 10px 26px -10px rgba(228, 0, 43, .7); }
html:not(.m) .jg-brand .brand-name { padding: 6px 4px 6px 12px; }
html:not(.m) .jg-brand .brand-num { background: var(--red); color: #fff; padding: 6px 12px 6px 2px; }
html:not(.m) .jg-kick { display: block; font: 600 18px/1 var(--cond); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
html:not(.m) .jg-sub { display: flex; flex-direction: column; align-items: center; gap: 26px; background: none; padding: 0; color: #fff; }
html:not(.m) .jg-big { font: 900 180px/.85 var(--display); text-transform: uppercase; letter-spacing: .01em; color: #fff; text-shadow: 0 20px 60px rgba(0, 0, 0, .5); white-space: nowrap; }
html:not(.m) .jg-big i { color: #7f8bb3; }
html:not(.m) .jg-dot { display: none; }
html:not(.m) .jg-tag { font: 800 34px/1 var(--display); letter-spacing: .14em; text-transform: uppercase; color: #0b1226; background: var(--gold); padding: 10px 20px; border-radius: 6px; box-shadow: 0 14px 30px -14px rgba(255, 196, 0, .7); }
html:not(.m) .jg-segs:not(:empty) { display: flex; gap: 6px; margin-top: 4px; }
html:not(.m) .jg-segs i { position: relative; width: 44px; height: 6px; border-radius: 3px; background: #26305a; overflow: hidden; }
html:not(.m) .jg-segs i.on { background: var(--gold); }
html:not(.m) .jg-segs b { position: absolute; inset: 0; background: var(--gold); transform-origin: 0 50%; }

/* Bandeaux « nom » : verre sombre, pastille du parti arrondie, nom en or, filet or qui se dessine. */
html:not(.m) .fx-lower { left: 32px; bottom: 64px; gap: 10px; }
html:not(.m) .l3 { position: relative; align-items: center; gap: 12px; padding: 8px 18px 8px 8px; border-radius: var(--r); background: linear-gradient(180deg, rgba(22, 32, 72, .92), rgba(9, 14, 34, .94)); border: 1px solid var(--stroke2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); overflow: hidden; }
html:not(.m) .l3::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, var(--gold), rgba(255, 196, 0, 0)); }
html:not(.m) .l3-tag { border-radius: var(--r-sm); font-family: var(--display); font-size: 18px; letter-spacing: .08em; padding: 8px 12px; }
html:not(.m) .l3-txt { background: none; border: 0; padding: 0; color: var(--text-p); font-family: var(--display); font-weight: 700; font-size: 25px; letter-spacing: .03em; }
html:not(.m) .l3-txt b { color: var(--gold); }

/* ALERTE INFO : nuit traversée d'un projecteur rouge, liseré or, bandeau rouge, titre d'affiche. */
html:not(.m) .fx-alert { background: radial-gradient(900px 620px at 80% 10%, rgba(228, 0, 43, .28), transparent 62%), radial-gradient(1000px 600px at 10% -20%, rgba(70, 100, 210, .22), transparent 60%), linear-gradient(180deg, #0b0f22, var(--ink) 72%); }
html:not(.m) .al-gold { display: block; position: absolute; left: 0; right: 0; top: 50%; height: 232px; margin-top: -116px; background: var(--gold); }
html:not(.m) .al-band { position: relative; height: 220px; gap: 0; background: linear-gradient(180deg, #ff1f47, var(--red) 55%, #b8001f); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, .8); }
html:not(.m) .al-tag { gap: 22px; padding: 0 44px 0 60px; background: none; color: #fff; font-family: var(--display); font-weight: 900; font-size: 96px; letter-spacing: .04em; border-right: 2px solid rgba(255, 255, 255, .35); }
html:not(.m) .al-tag::before { content: ""; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8px rgba(255, 255, 255, .25); }
html:not(.m) .al-text { padding: 0 48px; font-family: var(--display); font-weight: 900; font-size: 58px; line-height: 1.02; letter-spacing: .02em; }

/* Flash spécial : projecteur rouge, deux étiquettes, titre d'affiche (fin du titre en rouge vif). */
html:not(.m) #screen-event { background: radial-gradient(900px 620px at 88% 10%, rgba(228, 0, 43, .2), transparent 62%); }
.flash-row { display: flex; align-items: center; gap: 8px; }
html:not(.m) .flash-gold { background: var(--gold); color: #0b1226; box-shadow: 0 8px 22px -8px rgba(255, 196, 0, .6); }
html:not(.m) .event-title { font-family: var(--display); font-weight: 900; letter-spacing: .01em; line-height: .9; }
html:not(.m) .event-title .gold { color: var(--red2); }
html:not(.m) #event-main .lead { max-width: 760px; font-size: 20px; line-height: 1.5; color: #c9d2f2; }
html:not(.m) #event-main .fact .k { font-size: 11px; }
html:not(.m) #event-main .fact b { font-family: var(--display); font-weight: 800; font-size: 24px; letter-spacing: .02em; }
html:not(.m) .mood { border: 1px solid var(--stroke); border-left-width: 6px; border-radius: var(--r-lg); box-shadow: var(--sh-panel); }
html:not(.m) .mood b { font-family: var(--display); font-weight: 900; }
html:not(.m) .mood-défavorable { background: linear-gradient(180deg, rgba(110, 10, 30, .55), rgba(50, 8, 20, .75)); border-color: rgba(255, 45, 79, .35); border-left-color: var(--red2); }
html:not(.m) .mood-favorable { background: linear-gradient(180deg, rgba(20, 90, 50, .5), rgba(10, 40, 26, .75)); border-color: rgba(124, 240, 192, .25); border-left-color: #35b15b; }
html:not(.m) .mood-neutre { background: var(--glass); border-left-color: var(--cap); }
html:not(.m) #event-side > .btn { height: 68px; font-size: 26px; }
html:not(.m) .debate-flash { border-radius: var(--r); border: 1px solid rgba(255, 196, 0, .4); border-left: 4px solid var(--gold); background: linear-gradient(90deg, rgba(255, 196, 0, .12), rgba(255, 196, 0, .03)); }
html:not(.m) :is(.debate-flash, .dseq-top) .tag { border-radius: 6px; font-family: var(--display); letter-spacing: .1em; padding: 4px 10px; }

/* Séquence du débat : plateau nuit, pupitres en verre aux couleurs du parti, verdict d'affiche. */

/* Compte à rebours « 20 h 00 » : horloge d'affiche, secondes rouges, barre or qui se vide. */
html:not(.m) .fx-countdown { gap: 22px; background: radial-gradient(900px 560px at 50% 40%, #16224a, #0a1124 55%, var(--ink)); }
html:not(.m) .cd-head { display: flex; align-items: center; gap: 12px; font: 600 18px/1 var(--cond); letter-spacing: .26em; color: var(--cap); }
html:not(.m) .cd-head::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--red2); box-shadow: 0 0 0 5px rgba(255, 45, 79, .2); }
html:not(.m) .cd-clock { font-family: var(--display); font-weight: 900; font-size: 230px; letter-spacing: .01em; text-shadow: 0 0 60px rgba(110, 150, 255, .3); }
html:not(.m) .cd-sec b { color: var(--red2); font-weight: 900; }
html:not(.m) .cd-bar { display: block; width: 520px; height: 6px; border-radius: 3px; background: #26305a; overflow: hidden; }
html:not(.m) .cd-bar i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; }
html:not(.m) .cd-sub { font: 600 20px/1 var(--cond); letter-spacing: .2em; color: #8f9bc2; }
html:not(.m) .cd-sub.on { color: var(--gold); }

/* ===================================================================================
   ÉLYSÉE24 Prime (v51), étape 3 : lobby, carte et actions, journal sur PC (maquettes
   « Lobby », « Actions » et « Journal »). Seulement de l'habillage : mêmes ids, même structure ;
   les cartes d'action portent `data-k` (type d'action) pour leur pictogramme.
   =================================================================================== */

/* Titres de section : petites capitales avec un filet or qui s'efface. */
html:not(.m) :is(#screen-actions, #screen-journal, #screen-lobby) .label { display: flex; align-items: center; gap: 10px; font: 600 13px/1 var(--cond); letter-spacing: .22em; text-transform: uppercase; color: var(--cap); }
html:not(.m) :is(.act-head, .plan-panel, #j-poll) .label::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--gold-line), transparent); }

/* Lobby : cartes de candidat en verre, survol qui soulève, choix bordé d'or. */
html:not(.m) #screen-lobby .choice { border-radius: var(--r); }
html:not(.m) #screen-lobby .choice:not(.mine) { border-color: var(--stroke); background: linear-gradient(180deg, rgba(32, 46, 98, .5), rgba(16, 24, 54, .66)); }
html:not(.m) #screen-lobby .choice.mine { background: linear-gradient(180deg, rgba(255, 196, 0, .2), rgba(255, 196, 0, .06)); box-shadow: 0 0 0 1px var(--gold), 0 12px 28px -14px rgba(255, 196, 0, .6); }
html:not(.m) #screen-lobby .choice:not(.mine):hover:not(:disabled) { border-color: var(--gold-line); }
html:not(.m) #screen-lobby .panel.list { border-radius: var(--r-lg); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.m) #screen-lobby .choice { transition: transform .2s var(--spring), border-color .15s ease, box-shadow .2s ease; }
  html:not(.m) #screen-lobby .choice:hover:not(:disabled) { transform: translateY(-2px); box-shadow: var(--sh-lift); }
}

/* Carte de campagne : panneau de verre titré, légende en pastilles. */
html:not(.m) #screen-actions .col-map { padding: 16px 18px 18px; border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--sh-panel); }
html:not(.m) #screen-actions .col-map > .row:first-child { align-items: center; }
html:not(.m) #screen-actions .col-map > .row:first-child::before { content: "Carte de campagne"; font: 800 22px/1 var(--display); letter-spacing: .04em; text-transform: uppercase; color: var(--text-p); }
html:not(.m) #screen-actions .legend { gap: 8px; font-size: 13px; }
html:not(.m) #screen-actions .legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .05); border: 1px solid var(--stroke); }
html:not(.m) #screen-actions .legend .sw { font-size: 0; width: 10px; height: 10px; border-radius: 3px; background: currentColor; }
html:not(.m) #screen-actions .region-card { border-radius: var(--r); }

/* Cartes d'action : pictogramme dans une tuile, prix d'affiche en or. */
html:not(.m) #screen-actions .act-grid .card { padding: 10px 14px 10px 56px; }
html:not(.m) .act-grid .card::before { content: ""; position: absolute; left: 12px; top: 12px; width: 32px; height: 32px; border-radius: 9px; border: 1px solid var(--gold-line);
  background: linear-gradient(180deg, rgba(255, 196, 0, .16), rgba(255, 196, 0, .04)); }
html:not(.m) .act-grid .card[data-k]::after { content: ""; position: absolute; left: 19px; top: 19px; width: 18px; height: 18px; background: var(--gold); -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
html:not(.m) .card[data-k="tv"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Cpath d='M8 2l4 4 4-4M8 22h8'/%3E%3C/svg%3E"); }
html:not(.m) .card:is([data-k="poll"], [data-k="poll_region"]) { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M5 20V12M12 20V5M19 20v-9M3 20h18'/%3E%3C/svg%3E"); }
html:not(.m) .card[data-k="meeting"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10v4h3l6 4V6L6 10H3zM16 9a4 4 0 010 6M19 6a8 8 0 010 12'/%3E%3C/svg%3E"); }
html:not(.m) .card[data-k="social"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9l-5 4z'/%3E%3C/svg%3E"); }
html:not(.m) .card[data-k="attack"] { --ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M13 2L4 14h7l-1 8 9-12h-7z'/%3E%3C/svg%3E"); }
html:not(.m) .act-grid .card[data-k="attack"]::before { border-color: rgba(255, 45, 79, .45); background: linear-gradient(180deg, rgba(255, 45, 79, .2), rgba(255, 45, 79, .05)); }
html:not(.m) .act-grid .card[data-k="attack"]::after { background: var(--red2); }
html:not(.m) .card .t b { font-family: var(--display); font-weight: 800; font-size: 20px; line-height: 1.15; letter-spacing: .02em; }
html:not(.m) .card .c b { font-family: var(--display); font-weight: 900; font-size: 24px; line-height: 1; letter-spacing: .02em; }
html:not(.m) .card .imp { font: 600 11px/1 var(--cond); letter-spacing: .14em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .06); }
html:not(.m) .card.off[data-why]:hover::after, html:not(.m) .card.off.show-why::after { left: auto; top: -12px; width: auto; height: auto; -webkit-mask: none; mask: none; background: var(--red); }

/* Plan du tour et reste : verre, plan vide en pointillés. */
html:not(.m) .plan-panel { border-radius: var(--r-lg); }
html:not(.m) .plan li.k2 { justify-content: center; padding: 8px 12px; border: 1px dashed var(--stroke2); border-radius: var(--r); color: var(--cap); font-style: italic; }
html:not(.m) .plan li:not(.k2) { padding: 8px 10px; border-radius: var(--r-sm); background: rgba(255, 255, 255, .04); border: 1px solid var(--stroke); }
html:not(.m) .rest { border-radius: var(--r); }
html:not(.m) .rest b { font-family: var(--display); font-weight: 900; font-size: 20px; }

/* Journal : titre d'affiche « À la une ce soir » et pastille « Revue de presse ». */
html:not(.m) #screen-journal .col-3 > .label { gap: 14px; font: 900 40px/1 var(--display); letter-spacing: .02em; color: var(--text-p); }
html:not(.m) #screen-journal .col-3 > .label::after { content: "Revue de presse"; padding: 5px 10px; border-radius: 6px; background: var(--gold); color: #0b1226; font: 700 12px/1 var(--cond); letter-spacing: .2em; }
html:not(.m) #j-rumors { border: 1px solid var(--stroke); border-left: 0; border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--sh-panel); padding: 18px 22px 18px 64px; position: relative; }
html:not(.m) #j-rumors::before { content: "«"; position: absolute; left: 18px; top: 8px; font: 900 64px/1 var(--display); color: var(--gold); opacity: .8; }
html:not(.m) #j-rumors span:not(.k3) { font-family: var(--display); font-weight: 700; font-style: italic; font-size: 24px; line-height: 1.2; color: var(--text-p); }
html:not(.m) #j-poll .panel { border-radius: var(--r-lg); }
html:not(.m) .poll-big b { font-family: var(--display); font-weight: 900; font-size: 76px; text-shadow: 0 0 30px rgba(255, 196, 0, .25); }
html:not(.m) .scale { height: 10px; border-radius: 5px; background: #26305a; margin: 6px 0 30px; }
html:not(.m) .scale .ticks { top: 16px; font-size: 12px; letter-spacing: .08em; }
html:not(.m) .best-row b { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--gold); }
html:not(.m) .recup-note { border-radius: var(--r-lg); }

/* ===================================================================================
   ÉLYSÉE24 Prime (v52), étape 4 : soirée électorale et écran final sur PC (maquettes
   « Soirée » et « Président élu »). Barre de chaque candidat dans le classement (`.rbar`,
   mise à l'échelle par drawNight) ; écran final : le second tour région par région à droite.
   =================================================================================== */
.rbar, .end-side { display: none; }

/* Soirée : carte et légende dans un panneau de verre, dépouillement en or, classement en lignes. */
html:not(.m) .night-body .col-map { padding: 14px 16px; border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--sh-panel); }
html:not(.m) .night-stats .track { height: 8px; border-radius: 4px; background: #26305a; }
html:not(.m) #n-count-bar { border-radius: 4px; background: linear-gradient(90deg, #e9b200, var(--gold) 70%, #ffe27a); box-shadow: 0 0 14px rgba(255, 196, 0, .45); }
html:not(.m) #n-count { font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--gold); letter-spacing: .02em; }
html:not(.m) .stack { border-radius: var(--r-sm); overflow: hidden; }
html:not(.m) .rank-row { position: relative; padding-bottom: 8px; }
html:not(.m) .rank-row .cand { font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
html:not(.m) .rank-row b { font-family: var(--display); font-weight: 900; }
html:not(.m) .rbar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 4px; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0); opacity: .9; }
html:not(.m) .night-after .final-frame { border-radius: var(--r-lg); }

/* Écran final : proclamation à gauche, carte du second tour et bilan des régions à droite. */
html:not(.m) .end-side { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; border: 1px solid var(--stroke); border-radius: var(--r-lg); background: var(--glass); box-shadow: var(--sh-panel); }
html:not(.m) #end-map { flex: 1 1 auto; min-height: 0; }
html:not(.m) #end-map svg { width: 100%; height: 100%; }
html:not(.m) #end-map .rg { cursor: default; }
html:not(.m) .end-regions { display: flex; flex-direction: column; gap: 8px; }
html:not(.m) .end-won { display: flex; align-items: baseline; gap: 10px; padding: 8px 12px; border-radius: var(--r); background: rgba(255, 255, 255, .04); border: 1px solid var(--stroke); }
html:not(.m) .end-won .sqp { width: 12px; height: 12px; border-radius: 3px; align-self: center; }
html:not(.m) .end-won .nm { flex: 1; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .02em; }
html:not(.m) .end-won b { font-family: var(--display); font-weight: 900; font-size: 30px; color: var(--gold); }
html:not(.m) .end-close { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 16px; font-size: 15px; color: #d5dcf2; }
html:not(.m) .end-close .k { width: 100%; }
html:not(.m) .proclaim { font-family: var(--display); font-weight: 900; letter-spacing: .01em; }
html:not(.m) #screen-end .duel { border-radius: var(--r-sm); }
html:not(.m) #screen-end .duel div { font-family: var(--display); font-weight: 900; }

/* ===================================================================================
   ÉLYSÉE24 Prime (v53), étape 5 : mobile. Mêmes jetons et même matière que le PC (fond nuit,
   panneaux « verre », coins arrondis, police d'affiche, boutons, bandeau des brèves sombre),
   aux tailles du mobile ; aucune règle de mise en page ni de hauteur ne change.
   =================================================================================== */
.m div.app { color: var(--text-p);
  background: radial-gradient(520px 380px at 20% -10%, rgba(70, 100, 210, .28), transparent 62%), linear-gradient(180deg, var(--ink2) 0%, var(--ink) 72%); }
.m .topbar { background: rgba(6, 9, 20, .72); border-bottom-color: var(--red); }
.m .brand { font-family: var(--display); border-radius: 5px; overflow: hidden; }
.m .brand-num { background: var(--red); color: #fff; }
.m .brand { background: var(--red); padding: 0 7px; gap: .18em; }
.m .brand-name, .m .brand-num { background: none; padding: 3px 0 2px; }
.m :is(.mega, .giant, .big, .proclaim, .top-turn, .top-budget b, .stat b, .rank-row b) { font-family: var(--display); }
.m :is(.mega, .giant, .proclaim) { font-weight: 900; letter-spacing: .01em; }
.m :is(.label, .k) { font-family: var(--cond); font-weight: 600; letter-spacing: .16em; color: var(--cap); }
.m .flash { font-family: var(--display); border-radius: 6px; }

/* Panneaux et cartes : verre, filet fin, coins arrondis. */
.m :is(.panel, .host-options, .warning-box) { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r); box-shadow: var(--sh-panel); }
.m :is(.fact, .stat) { background: var(--glass); border: 1px solid var(--stroke); border-radius: var(--r-sm); }
.m :is(.rumors, .region-card, .mood, .recup-note) { border-radius: var(--r); }
.m :is(.rumors, .region-card) { background: var(--glass-hi); }
.m .card { border-radius: var(--r); border-color: var(--stroke); background: linear-gradient(180deg, rgba(32, 46, 98, .5), rgba(16, 24, 54, .66)); }
.m .card .t b { font-family: var(--display); font-weight: 800; letter-spacing: .02em; }
.m .card .c b { font-family: var(--display); font-weight: 900; }
.m .choice { border-radius: var(--r-sm); }
.m .choice:not(.mine) { border-color: var(--stroke); background: linear-gradient(180deg, rgba(32, 46, 98, .5), rgba(16, 24, 54, .66)); }
.m .field input, .m select { border-radius: var(--r-sm); }

/* Boutons : mêmes dégradés que le PC, coins arrondis. */
.m .btn { border-radius: var(--r); font-family: var(--display); font-weight: 900; }
.m .btn-red { background: linear-gradient(180deg, #ff2a4f, var(--red) 55%, #c30025); box-shadow: 0 10px 22px -12px rgba(228, 0, 43, .8), inset 0 1px 0 rgba(255, 255, 255, .25); }
.m .btn-gold { background: linear-gradient(180deg, #ffd23d, var(--gold) 60%, #e9b200); color: #0b1226; box-shadow: 0 10px 22px -12px rgba(255, 196, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .4); }
.m .btn-ghost { background: rgba(255, 255, 255, .03); color: #dde4ff; border: 1px solid var(--stroke2); font-family: var(--body); font-weight: 600; letter-spacing: .02em; text-transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .m :is(.btn, .card, .choice) { transition: transform .12s var(--ease); }
  .m :is(.btn, .card, .choice):active:not(:disabled) { transform: scale(.97); }
}

/* Bandeau des brèves : bande sombre, BRÈVES en or, brèves FLASH en rouge vif (comme le PC). */
.m .ticker { background: var(--ink3); color: #dde4ff; border-bottom: 1px solid rgba(150, 172, 255, .1); }
.m .ticker-tag { background: var(--gold); color: #0b1226; font-family: var(--display); }
.m .ticker-info { color: #dde4ff; border-right-color: rgba(150, 172, 255, .2); }
.m :is(.ticker-track, .ticker-flash) .sep-dot { color: var(--gold); }
.m .ticker-flash { color: var(--red2); }

/* Soirée : barres des candidats aussi sur mobile. */
.m .rank-row { position: relative; padding-bottom: 5px; }
.m .rbar { display: block; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; transform-origin: 0 50%; transform: scaleX(0); }

/* iPhone (Safari 26, appli écran d'accueil) : sans fond uni sous la barre d'état, Safari floute et
   assombrit le haut de la page (logo, tour, budget). Fond de l'appli et barre du haut en couleur
   unie ; le dégradé nuit passe sur un calque. La fiche région (feuille) reste opaque. */
.m div.app { background: var(--ink2); }
.m div.app::before { content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(520px 380px at 20% -10%, rgba(70, 100, 210, .28), transparent 62%), linear-gradient(180deg, var(--ink2) 0%, var(--ink) 72%); }
.m .topbar { background: #0b1226; }
.m .region-card.open { background: linear-gradient(180deg, #17244e, #0e1736); }

/* ===================================================================================
   Aide « Comment jouer » et premier tour guidé (v56, guide.js).
   =================================================================================== */
.link-help { color: var(--gold); }
.lobby-links { gap: 10px; flex-wrap: wrap; }
.m .lobby-links { order: 11; justify-content: center; }
.top-help { margin-left: 12px; }
.top-help b { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid currentColor; font-size: 12px; }
.help-box { width: min(680px, 100%); max-height: min(86vh, 860px); display: flex; flex-direction: column; gap: 14px; border-top-color: var(--gold); background: linear-gradient(180deg, #17244e, #0e1736); border-radius: var(--r-lg); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.help-box h2 { margin: 0; font-family: var(--display); font-weight: 900; letter-spacing: .03em; }
.help-body { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 16px; }
.help-body h3 { margin: 0 0 6px; font: 600 13px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.help-body p, .help-body li { margin: 0 0 6px; font-size: 16px; line-height: 1.45; color: #d5dcf2; }
.help-body ul { margin: 0 0 6px; padding-left: 20px; }
.help-body b { color: var(--text-p); }
.help-box > .btn { align-self: flex-start; }
.m .help-dialog { padding: calc(10px + var(--sat)) 10px calc(10px + var(--sab)); }
.m .help-box { max-height: 100%; padding: 18px 16px; }
.m .help-body p, .m .help-body li { font-size: 15px; }

/* Premier tour guidé : anneau or autour de l'élément montré, bulle d'explication (ne bloque rien). */
.coach { position: fixed; inset: 0; z-index: 150; pointer-events: none; }
.coach[hidden], .coach-ring[hidden] { display: none; }
.coach-ring { position: fixed; border: 2px solid var(--gold); border-radius: var(--r); box-shadow: 0 0 0 4px rgba(255, 196, 0, .18), 0 0 28px rgba(255, 196, 0, .35); transition: left .25s var(--ease), top .25s var(--ease), width .25s var(--ease), height .25s var(--ease); }
.coach-box { position: fixed; width: min(360px, calc(100vw - 16px)); padding: 14px 16px 12px; pointer-events: auto; border-radius: var(--r); border: 1px solid var(--gold-line); background: linear-gradient(180deg, #1c2c5e, #101a3c); box-shadow: 0 20px 50px -12px rgba(0, 0, 0, .8); color: var(--text-p); }
.coach-box b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; color: var(--gold); }
.coach-box p { margin: 6px 0 12px; font-size: 15px; line-height: 1.4; color: #d5dcf2; }
.coach-count { font: 600 11px/1 var(--cond); letter-spacing: .2em; color: var(--cap); margin-bottom: 6px; }
.coach-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.coach-actions .btn { height: 40px; font-size: 18px; padding: 0 16px; }
@media (prefers-reduced-motion: no-preference) {
  .coach-ring { animation: coach-pulse 1.6s ease-in-out infinite; }
  .coach-box { animation: drop-open .2s ease-out; }
}
@keyframes coach-pulse { 50% { box-shadow: 0 0 0 8px rgba(255, 196, 0, .08), 0 0 36px rgba(255, 196, 0, .45); } }

/* Sondage régional enrichi (v57) : score par département, activité des rivaux dans la région. */
.poll-depts { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0 6px; font-size: 13px; color: var(--text2); }
.poll-depts b { color: var(--text); font-weight: 700; }
.poll-sub { margin-top: 2px; }
.poll-rivals { list-style: none; margin: 2px 0 10px; padding: 0; display: grid; gap: 4px; font-size: 13px; line-height: 1.35; color: var(--text2); }
.poll-rivals li > b:first-child { color: var(--text); }
.poll-rivals .neg { color: #ff6b81; font-weight: 700; }

/* Débat ÉLYSÉE24 en direct (v62, debate.js) : écran à part sur le plateau (mur LED, écran ÉLYSÉE24,
   sol brillant, projecteurs, pupitres aux couleurs du parti, personnages en pixel art `pxSprite`,
   animatrice au centre). s1 : entrée ; .talking : réplique ; s2 : coups révélés ; s3 : points ;
   .done : classement. Panneau du bas : coups à choisir, récap de manche, classement. */
.debate-screen { position: relative; padding: 0; display: flex; flex-direction: column; overflow: hidden; background: radial-gradient(120% 80% at 50% 0%, #1b2a66 0%, #0a1230 45%, #04060e 100%); }
.dst-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.dst-wall { position: absolute; inset: 0 0 34% 0; display: flex; justify-content: space-between; padding: 0 6%; pointer-events: none; }
.dst-wall i { width: 2.2%; height: 100%; background: linear-gradient(180deg, transparent, rgba(80, 130, 255, .35) 30%, rgba(255, 255, 255, .55) 50%, rgba(80, 130, 255, .35) 70%, transparent); filter: blur(1px); opacity: .6; animation: dst-led 2.4s ease-in-out infinite alternate; }
.dst-wall i:nth-child(2n) { animation-delay: -1.2s; }
.dst-wall i:nth-child(3), .dst-wall i:nth-child(4) { opacity: 0; }
@keyframes dst-led { from { opacity: .25; } to { opacity: .75; } }
.dst-floor { position: absolute; left: -20%; right: -20%; bottom: 0; height: 44%; transform: perspective(500px) rotateX(55deg); transform-origin: 50% 0; pointer-events: none; background: linear-gradient(180deg, rgba(120, 160, 255, .22), rgba(8, 12, 30, .1) 70%), repeating-linear-gradient(90deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg, rgba(255, 255, 255, .06) 0 2px, transparent 2px 60px), #0b1433; }
.db-head { position: relative; z-index: 2; flex: none; display: flex; justify-content: center; padding: 18px 20px 0; }
.dst-screen { position: relative; width: min(760px, 70%); padding: 14px 20px 12px; border-radius: 14px; display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(180deg, #121c48, #0a1230); border: 3px solid #26346a; box-shadow: 0 0 0 6px #0a0f22, 0 20px 60px rgba(0, 0, 0, .6), inset 0 0 40px rgba(0, 0, 0, .5); }
.dst-screen::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(circle, rgba(0, 0, 0, .35) 1px, transparent 1.5px) 0 0 / 5px 5px; pointer-events: none; }
.dseq-top { display: flex; align-items: center; gap: 12px; font: 700 17px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #dfe6ff; }
.db-rounds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: 100%; }
.db-round { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px; border-radius: 8px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); opacity: .55; transition: opacity .3s, background .3s, border-color .3s; }
.db-round .k3 { font-size: 11px; letter-spacing: .18em; }
.db-round b { font: 800 18px/1.1 var(--cond); color: #fff; text-align: center; }
.db-round.past { opacity: .8; }
.db-round.on { opacity: 1; background: rgba(255, 196, 0, .14); border-color: var(--gold); box-shadow: 0 0 24px rgba(255, 196, 0, .25); }
.db-round.on b { color: var(--gold); }
.db-clock { display: flex; align-items: center; gap: 12px; width: 100%; }
.db-phase { flex: none; font: 700 15px/1 var(--cond); letter-spacing: .08em; color: #dfe6ff; min-width: 160px; }
.db-bar { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.db-bar i { display: block; height: 100%; background: var(--gold); transform-origin: 0 50%; transition: transform .2s linear; }
.db-bar.hot i { background: var(--red); }
.db-stage { position: relative; z-index: 1; flex: 1 1 auto; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: clamp(8px, 2.4vw, 40px); padding: 0 3% 18px; }
.db-arrows { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; color: #ff3b5c; z-index: 3; }
.db-arrows path.arr { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 59, 92, .6)); stroke-dasharray: 900; stroke-dashoffset: 900; animation: db-draw .5s ease-out forwards; }
.db-arrows path.arr.repelled { stroke: #9fb3ff; stroke-dasharray: 8 8; stroke-dashoffset: 0; filter: none; opacity: .8; animation: db-fade .4s ease-out; }
@keyframes db-draw { to { stroke-dashoffset: 0; } }
@keyframes db-fade { from { opacity: 0; } }
.dpod { --cs: 150px; position: relative; display: flex; flex-direction: column; align-items: center; opacity: 0; transform: translateY(30px); transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .45s, filter .4s; }
.debate-screen.s1 .dpod { opacity: 1; transform: none; }
.db-stage.many .dpod { --cs: 96px; }
.dspot { position: absolute; left: 50%; bottom: 60px; width: calc(var(--cs) * 2.2); height: 900px; transform: translateX(-50%); background: linear-gradient(180deg, transparent, rgba(255, 246, 214, .06) 40%, rgba(255, 246, 214, .18)); clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); -webkit-mask-image: linear-gradient(180deg, #000 80%, transparent); mask-image: linear-gradient(180deg, #000 80%, transparent); pointer-events: none; transition: background .4s, opacity .4s; }
.dchar { position: relative; width: var(--cs); height: var(--cs); margin-bottom: calc(var(--cs) * -.25); image-rendering: pixelated; filter: drop-shadow(0 8px 0 rgba(0, 0, 0, .25)); transition: transform .3s; }
.dchar .fr { display: none; }
.dchar .fr-idle { display: inline; }
.talking .dchar .fr-idle, .s3 .dpod.win .dchar .fr-idle, .s3 .dpod.lose .dchar .fr-idle { display: none; }
.talking .dchar .fr-talk { display: inline; }
.s3 .dpod.win .dchar .fr-win { display: inline; }
.s3 .dpod.lose .dchar .fr-lose { display: inline; }
.talking .dchar { transform: translateY(-3px); }
.s3 .dpod.win .dchar { animation: dst-jump .45s steps(2) 3; }
@keyframes dst-jump { 50% { transform: translateY(-10px); } }
.s3 .dpod.win .dspot { background: linear-gradient(180deg, transparent, rgba(255, 196, 0, .12) 40%, rgba(255, 196, 0, .38)); }
.s3 .dpod.lose { filter: brightness(.5) saturate(.6); }
.s3 .dpod.lose .dspot { opacity: 0; }
.ddesk { position: relative; z-index: 1; width: calc(var(--cs) * 1.15); height: calc(var(--cs) * .6); display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, color-mix(in srgb, var(--pc) 85%, #fff) 0 8px, var(--pc) 8px, color-mix(in srgb, var(--pc) 50%, #000)); clip-path: polygon(0 0, 100% 0, 92% 100%, 8% 100%); box-shadow: inset 0 -12px 0 rgba(0, 0, 0, .25); }
.ddesk span { font: 900 calc(var(--cs) * .17)/1 var(--display, var(--cond)); color: #fff; letter-spacing: .06em; text-shadow: 0 3px 0 rgba(0, 0, 0, .3); }
.dname { margin-top: 8px; font: 900 calc(12px + var(--cs) * .09)/1.05 var(--display, var(--cond)); text-align: center; color: #fff; text-shadow: 0 4px 20px rgba(0, 0, 0, .8); max-width: calc(var(--cs) * 1.5); }
.dname small { display: block; margin-top: 4px; font: 700 13px/1.2 var(--cond); letter-spacing: .12em; text-transform: uppercase; color: var(--text2); }
.dname .dtot { color: var(--gold); font-size: 15px; }
.dpod.me .dname { color: var(--gold); }
.dbub { position: absolute; top: -18px; left: 50%; display: flex; gap: 5px; padding: 8px 10px; background: #fff; transform: translateX(-50%) scale(0); transition: transform .14s; box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); z-index: 2; }
.dbub i { width: 6px; height: 6px; background: #0b1226; animation: dst-dots .6s steps(1) infinite; }
.dbub i:nth-child(2) { animation-delay: .2s; }
.dbub i:nth-child(3) { animation-delay: .4s; }
@keyframes dst-dots { 50% { opacity: .2; } }
.talking .dbub { transform: translateX(-50%) scale(1); }
.dchk { position: absolute; top: calc(var(--cs) * .05); right: calc(var(--cs) * .05); z-index: 2; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--gold); color: #0b1226; font-weight: 900; transform: scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.dpod.chosen .dchk { transform: scale(1); }
.dpst { position: absolute; top: -34px; left: 50%; z-index: 2; transform: translateX(-50%) scale(.4); opacity: 0; transition: transform .35s cubic-bezier(.3, 1.6, .5, 1), opacity .25s; }
.dpst span { display: block; padding: 7px 12px; background: #fff; color: #0b1226; font: 900 18px/1 var(--display, var(--cond)); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); }
.s2 .dpst { opacity: 1; transform: translateX(-50%); }
.dpod[data-move="attack"] .dpst span { background: #ff3b5c; color: #fff; }
.dpod[data-move="defend"] .dpst span { background: #9fb3ff; }
.dpod[data-move="eclat"] .dpst span, .dpod.win[data-move="rank"] .dpst span { background: var(--gold); }
.dpod[data-move="silence"] .dpst span { background: #59607a; color: #dfe6ff; }
.dpod.blocked .dpst span { text-decoration: line-through; opacity: .75; }
.dpts { position: absolute; top: -72px; left: 50%; z-index: 3; font: 900 30px/1 var(--display, var(--cond)); color: #fff; text-shadow: 0 3px 0 rgba(0, 0, 0, .4); transform: translate(-50%, 16px); opacity: 0; transition: transform .45s cubic-bezier(.2, 1.4, .4, 1), opacity .3s; pointer-events: none; }
.dpts.up { color: #4ade80; }
.dpts.down { color: #ff6b81; }
.s3:not(.done) .dpts { opacity: 1; transform: translate(-50%, 0); }
.db-stage.many .dpst span { font-size: 13px; padding: 5px 7px; }
.db-stage.many .dpts { font-size: 22px; top: -58px; }
.db-stage.many .dname small { font-size: 11px; }
.dmod { position: relative; display: flex; flex-direction: column; align-items: center; margin: 0 6px; opacity: 0; transform: translateY(20px); transition: opacity .4s .15s, transform .4s .15s; }
.debate-screen.s1 .dmod { opacity: 1; transform: none; }
.dmod .dchar { --cs: 92px; }
.db-stage.many .dmod .dchar { --cs: 64px; }
.dmod-desk { position: relative; width: 150px; padding: 12px 0 18px; text-align: center; font: 900 15px/1 var(--display, var(--cond)); letter-spacing: .14em; color: #0b1226; background: linear-gradient(180deg, #ffe07a 0 6px, var(--gold) 6px, #c99400); clip-path: polygon(0 0, 100% 0, 94% 100%, 6% 100%); }
.db-stage.many .dmod-desk { width: 100px; font-size: 11px; }
/* L'animatrice commente (v63) : bulle au-dessus d'elle (PC), ligne sous les manches (mobile). */
.dmod-say { position: absolute; bottom: calc(100% + 6px); left: 50%; z-index: 4; width: max-content; max-width: 260px; padding: 8px 12px; border-radius: 10px; background: #fff; color: #0b1226; font: 700 15px/1.25 var(--cond); text-align: center; box-shadow: 4px 4px 0 rgba(0, 0, 0, .35); transform: translateX(-50%); }
.dmod-say:empty { display: none; }
.dmod-say::after { content: ""; position: absolute; left: 50%; bottom: -10px; border: 6px solid transparent; border-top: 6px solid #fff; border-left-width: 0; }
.dmod-say.pop, .db-say.pop { animation: db-say .35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes db-say { from { opacity: 0; transform: translateX(-50%) scale(.6); } }
.db-say { display: none; }
.db-stage.many .dmod-say { max-width: 200px; font-size: 13px; }
.db-panel { position: relative; z-index: 2; flex: none; align-self: center; width: min(1100px, calc(100% - 40px)); min-height: 172px; margin: 0 0 18px; padding: 14px 18px; display: flex; flex-direction: column; gap: 10px; border-radius: 14px; background: rgba(6, 10, 26, .82); border: 1px solid rgba(255, 255, 255, .12); backdrop-filter: blur(8px); box-shadow: 0 20px 50px -20px rgba(0, 0, 0, .8); }
.db-q { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.db-q b { font: 800 22px/1.1 var(--cond); color: #fff; }
.db-moves { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.dmove { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 10px 12px; text-align: left; border-radius: 10px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); color: var(--text); cursor: pointer; transition: background .15s, border-color .15s, transform .15s; }
.dmove > b { font: 800 19px/1 var(--cond); letter-spacing: .02em; }
.dmove small { font-size: 13px; line-height: 1.3; color: var(--text2); }
.dmove small b { font: inherit; font-weight: 800; color: var(--text); }
.dmove:hover:not(:disabled) { background: rgba(255, 255, 255, .1); transform: translateY(-1px); }
.dmove.on { border: 2px solid var(--gold); padding: 9px 11px; background: rgba(255, 196, 0, .12); }
.dmove.on > b { color: var(--gold); }
.dmove[data-move="attack"] > b { color: #ff6b81; }
.dmove[data-move="defend"] > b { color: #9fb3ff; }
.dmove[data-move="eclat"] > b { color: var(--gold); }
.dmove:disabled { opacity: .45; cursor: default; }
.db-targets { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dtarget { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 6px 12px; border-radius: 8px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-left: 4px solid var(--pc); color: var(--text); font: 700 16px/1.1 var(--cond); cursor: pointer; }
.dtarget small { font: 500 12px/1.2 var(--body, inherit); color: var(--text3); }
.dtarget.on { border-color: #ff3b5c; background: rgba(255, 59, 92, .14); border-left-color: var(--pc); }
.db-status { font-size: 14px; }
.db-recap { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 18px; }
.db-line { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: baseline; font-size: 15px; padding: 3px 0; border-bottom: 1px solid rgba(255, 255, 255, .06); }
.db-line > span:first-child { font-weight: 700; }
.db-line.me > span:first-child { color: var(--gold); }
.db-line b { font: 800 17px/1 var(--cond); }
.db-panel .up { color: #4ade80; }
.db-panel .down { color: #ff6b81; }
.db-host { align-self: flex-end; }
.dconf { position: absolute; z-index: 4; width: 10px; height: 10px; pointer-events: none; }


/* Mobile : même plateau en plus petit, pupitres sur deux rangées au-delà de 4, coups en 2 × 2. */
.m .debate-screen { padding: 0; gap: 0; overflow-y: auto; }
.m .db-head { padding: 8px 10px 0; }
.m .dst-screen { width: 100%; padding: 8px 8px 8px; gap: 6px; border-width: 2px; box-shadow: 0 0 0 3px #0a0f22, 0 10px 30px rgba(0, 0, 0, .6); }
.m .dseq-top { font-size: 11px; gap: 8px; letter-spacing: .12em; }
.m .db-rounds { gap: 4px; }
.m .db-round { padding: 4px 4px; }
.m .db-round .k3 { font-size: 9px; letter-spacing: .1em; }
.m .db-round b { font-size: 13px; }
.m .db-phase { font-size: 12px; min-width: 112px; }
.m .db-stage { flex: none; min-height: 0; flex-wrap: wrap; align-content: flex-end; gap: 44px 6px; padding: 46px 6px 6px; }
.m .dpod { --cs: 72px; }
.m .db-stage.many .dpod { --cs: 52px; flex: 0 0 22%; }
.m .db-stage.many { min-height: 0; }
.m .db-say.pop { animation: db-say-m .35s ease-out; }
@keyframes db-say-m { from { opacity: 0; transform: translateY(4px); } }
.m .dname { font-size: 15px; }
.m .db-stage.many .dname { font-size: 12px; }
.m .dname small { font-size: 10px; letter-spacing: .06em; }
.m .dname .dtot { font-size: 12px; }
.m .dpst { top: -26px; }
.m .dpst span { font-size: 12px; padding: 4px 6px; }
.m .db-stage.many .dpst span { font-size: 10px; padding: 3px 4px; }
.m .dpts { font-size: 20px; top: -50px; }
.m .db-stage.many .dpts { font-size: 16px; top: -42px; }
.m .db-stage.many .dpst { top: -22px; }
.m .dchk { width: 20px; height: 20px; font-size: 12px; }
.m .dbub { top: -12px; padding: 5px 6px; gap: 3px; }
.m .dbub i { width: 4px; height: 4px; }
.m .db-panel { width: auto; min-height: 0; margin: 0 10px calc(var(--sab) + 10px); padding: 10px 12px; gap: 8px; }
.m .db-q { gap: 8px; }
.m .db-q b { font-size: 17px; }
.m .db-moves { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.m .dmove { padding: 8px 9px; }
.m .dmove.on { padding: 7px 8px; }
.m .dmove > b { font-size: 16px; }
.m .dmove small { font-size: 11.5px; }
.m .db-targets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.m .db-targets > .k2 { grid-column: 1 / -1; }
.m .dtarget { font-size: 14px; padding: 5px 8px; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.m .dhab { display: none; }
.m .db-status { font-size: 12px; }
.m .db-recap { grid-template-columns: 1fr; }
.m .db-line { font-size: 13px; }
.m .dconf { width: 6px; height: 6px; }

/* Arène (v64, maquette « A · Arène » du canevas « Plateau du débat — propositions ») : écran LED
   (chrono en anneau, grand thème, barres des 3 manches), pupitres en arc autour de l'animatrice sur
   un sol d'arène lumineux (positions `--ax`, `--ay`, `--az` calculées par debate.js), bandeau
   « En tête du débat » en bas. */
.dst-screen { flex-direction: row; align-items: center; gap: 22px; width: min(760px, 72%); padding: 16px 24px; border-radius: 22px; background: linear-gradient(180deg, #131f52, #0a1230); }
.ar-timer { position: relative; flex: none; width: 92px; height: 92px; }
.ar-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ar-timer circle { fill: none; stroke: rgba(255, 255, 255, .12); stroke-width: 8; }
.ar-timer .ar-arc { stroke: var(--gold); stroke-linecap: round; stroke-dasharray: 100; transition: stroke-dashoffset .2s linear, stroke .3s; }
.ar-timer.hot .ar-arc { stroke: #ff2d4f; }
.ar-num { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font: 900 30px/1 var(--display, var(--cond)); color: var(--gold); }
.ar-timer.hot .ar-num { color: #ff6b81; }
.ar-info { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.ar-kick { display: flex; align-items: center; gap: 10px; }
.ar-kick .tag { background: var(--red); color: #fff; font: 800 12px/1 var(--cond); letter-spacing: .14em; padding: 4px 8px; border-radius: 4px; }
.db-phase { min-width: 0; font: 700 14px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: #b9c3e0; }
.ar-theme { font: 900 46px/1 var(--display, var(--cond)); letter-spacing: .02em; text-transform: uppercase; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dst-screen .db-rounds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 360px; }
.dst-screen .db-round { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 0; background: none; border: 0; box-shadow: none; opacity: 1; }
.db-round i { display: block; width: 100%; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .18); transition: background .3s, box-shadow .3s; }
.db-round.past i { background: rgba(255, 196, 0, .55); }
.db-round.on i { background: var(--gold); box-shadow: 0 0 12px rgba(255, 196, 0, .6); }
.dst-screen .db-round b { font: 600 11px/1.1 var(--cond); letter-spacing: .06em; color: var(--text3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.dst-screen .db-round.on b { color: var(--gold); }
.ar-tag { flex: none; align-self: flex-start; font: 700 12px/1 var(--cond); letter-spacing: .2em; text-transform: uppercase; color: var(--text3); }
/* Sol de l'arène : ellipse lumineuse et anneau doré en pointillés autour de l'animatrice. */
.db-stage { --lift: 90px; --base: 18px; display: block; padding: 0; }
.db-stage.many { --lift: 64px; --base: 14px; }
.ar-floor { position: absolute; left: 6%; right: 6%; bottom: -46%; height: 120%; border-radius: 50%; background: radial-gradient(closest-side, rgba(120, 160, 255, .28), rgba(40, 60, 140, .12) 60%, transparent); border: 2px solid rgba(160, 190, 255, .22); pointer-events: none; }
.ar-ring { position: absolute; left: 34%; right: 34%; bottom: -22%; height: 52%; border-radius: 50%; border: 2px dashed rgba(255, 196, 0, .35); pointer-events: none; }
.db-stage .dpod { position: absolute; left: var(--ax); bottom: calc(var(--base) + var(--ay) * var(--lift)); z-index: var(--az); transform: none; translate: -50% 26px; scale: calc(1 - var(--ay) * .1); transform-origin: 50% 100%; transition: translate .55s cubic-bezier(.2, .8, .2, 1), opacity .45s, filter .4s; }
.debate-screen.s1 .db-stage .dpod { transform: none; translate: -50% 0; }
.db-stage .dmod { position: absolute; left: 50%; bottom: 4px; z-index: 11; margin: 0; transform: none; translate: -50% 20px; transition: opacity .4s .15s, translate .4s .15s; }
.debate-screen.s1 .db-stage .dmod { transform: none; translate: -50% 0; }
.dpod.me .dchar { border-radius: 50%; box-shadow: 0 0 0 4px var(--gold), 0 0 40px rgba(255, 196, 0, .5); }
.dpod.me .dname { color: var(--gold); }
.db-say { display: none; }
.db-panel { margin-bottom: 12px; }
.ar-rank { flex: none; height: 46px; display: flex; align-items: center; gap: 22px; padding: 0 28px; background: rgba(4, 6, 14, .85); border-top: 2px solid var(--red); overflow: hidden; white-space: nowrap; position: relative; z-index: 2; }
.ar-rank-tag { flex: none; padding: 5px 10px; background: var(--red); font: 800 13px/1 var(--cond); letter-spacing: .14em; }
.ar-rank-list { display: flex; gap: 22px; min-width: 0; font: 700 17px/1 var(--cond); }
.ar-rank-list .me { color: var(--gold); }
.ar-rank-list b { font-weight: 800; }

/* Arène sur mobile : écran compact, arc de 4 au plus (au-delà, deux rangées), animatrice au centre,
   sa phrase dans une bulle sous l'arène, bandeau du classement en bas. */
.m .dst-screen { width: 100%; gap: 12px; padding: 10px 12px; border-radius: 14px; }
.m .ar-timer { width: 54px; height: 54px; }
.m .ar-num { font-size: 20px; }
.m .ar-kick .tag { display: none; }
.m .db-phase { font-size: 11px; letter-spacing: .14em; }
.m .ar-theme { font-size: 27px; }
.m .dst-screen .db-rounds { gap: 5px; }
.m .dst-screen .db-round b { font-size: 9px; }
.m .ar-tag { display: none; }
.m .db-stage { --lift: 50px; --base: 10px; height: 236px; min-height: 0; padding: 0; display: block; }
.m .db-stage .dpod { --cs: 58px; }
.m .db-stage .dmod { display: flex; }
.m .db-stage .dmod .dchar { --cs: 38px; }
.m .db-stage .dmod-desk { width: 64px; font-size: 8px; padding: 5px 0 8px; }
.m .db-stage .dmod-say { display: none; }
.m .db-stage.many { display: flex; height: auto; flex-wrap: wrap; align-content: flex-end; gap: 44px 6px; padding: 46px 6px 6px; }
.m .db-stage.many .dpod { position: relative; left: auto; bottom: auto; translate: none; scale: none; }
.m .db-stage.many .dmod, .m .db-stage.many .ar-floor, .m .db-stage.many .ar-ring { display: none; }
.m .db-say { display: block; flex: none; margin: 6px 10px 0; padding: 7px 10px; border-radius: 10px; background: #fff; color: #0b1226; font: 700 14px/1.25 var(--cond); text-align: center; min-height: 1.25em; }
.m .db-say:empty { display: none; }
.m .db-panel { margin-top: 8px; }
.m .ar-rank { height: 34px; gap: 12px; padding: 0 10px; margin-top: auto; }
.m .ar-rank-tag { font-size: 10px; padding: 4px 6px; }
.m .ar-rank-list { gap: 12px; font-size: 13px; }

/* --- Visuel v66 : repères de carte, portée, budget, frise, tampons, attente, soirée, personnages --- */
/* 1. Signe d'affinité sur la carte (jamais la couleur seule) ; 10. pictos du dernier tour */
.mk-layer { pointer-events: none; }
.mk circle { stroke: #0b1226; stroke-width: 1.4; }
.mk .mk-fav { fill: #1f9d63; }
.mk .mk-dif { fill: #c8102e; }
.mk-t { fill: #fff; font-family: var(--cond); font-weight: 800; }
.mk-ic { color: #0b1226; fill: #0b1226; }
.mk-ic .mk-bg { fill: #ffc400; stroke: #0b1226; stroke-width: .8; }
.mk-ic.mk-attack .mk-bg { fill: #ff5a6e; }
.mk-ic.mk-social .mk-bg { fill: #8fd3ff; }
.legend .mk-sign { display: inline-block; font-family: var(--cond); font-size: 11px; line-height: 16px; min-width: 18px; text-align: center; border-radius: 9px; color: #fff; padding: 0 3px; }
.mk-sign-fav { background: #1f9d63; }
.mk-sign-dif { background: #c8102e; }
.legend-acts { display: inline-flex; gap: 8px; align-items: center; }
.legend-acts > span { display: inline-flex; align-items: center; gap: 4px; }
.lgi { display: inline-block; width: 13px; height: 13px; border-radius: 3px; background: #ffc400; }
.lgi-social { background: #8fd3ff; }
.lgi-attack { background: #ff5a6e; }
/* 2. Portée d'une action au survol (PC) */
/* Relief (v73, proposition 4 du canevas « Survol des actions ») : la région visée se soulève en or avec
   son ombre, les régions touchées en plus se soulèvent un peu, le reste s'enfonce et pâlit ; TV : vague
   de régions soulevées d'ouest en est. Seulement transform / filter / opacity. */
.map svg .rg { transition: fill .7s ease, opacity .18s ease, filter .18s ease; }
.map svg.reaching .rg { opacity: .45; filter: saturate(.4); }
.map svg.reaching .rg.reach { opacity: 1; fill: #7f8cc8; transform: translateY(-3px); filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .5)); }
.map svg.reaching .rg.reach-main { opacity: 1; fill: var(--gold); stroke: #fff3c4; stroke-width: 2; transform: translateY(-9px); filter: drop-shadow(0 12px 6px rgba(0, 0, 0, .6)); }
.map svg.reaching-all .rg { opacity: 1; filter: none; }
@media (prefers-reduced-motion: no-preference) {
  .map svg.reaching .rg.reach { animation: rlf-s 2s ease-in-out infinite; }
  .map svg.reaching .rg.reach-main { animation: rlf-l 2s ease-in-out infinite; }
  .map svg.reaching-all .rg { animation: rlf-tv 2.4s ease-in-out var(--d, 0s) infinite; }
}
@keyframes rlf-l { 0%, 100% { transform: translateY(-9px); filter: drop-shadow(0 12px 6px rgba(0, 0, 0, .6)); } 50% { transform: translateY(-13px); filter: drop-shadow(0 18px 8px rgba(0, 0, 0, .55)); } }
@keyframes rlf-s { 0%, 100% { transform: translateY(-3px); filter: drop-shadow(0 5px 3px rgba(0, 0, 0, .5)); } 50% { transform: translateY(-5px); filter: drop-shadow(0 8px 4px rgba(0, 0, 0, .45)); } }
@keyframes rlf-tv { 0%, 60%, 100% { transform: none; filter: none; } 20% { transform: translateY(-7px); filter: brightness(1.25) drop-shadow(0 10px 5px rgba(0, 0, 0, .55)); } }
/* 4. Budget du début de tour */
.wallet-pop { position: absolute; z-index: 30; right: 36px; bottom: 150px; width: min(380px, calc(100% - 24px)); padding: 12px 16px 14px; border-radius: 12px;
  background: #111c3f; isolation: isolate; border: 1px solid rgba(255, 196, 0, .45); box-shadow: 0 18px 40px rgba(0, 0, 0, .5); cursor: pointer; display: flex; flex-direction: column; gap: 5px; }
.wp-head { display: flex; justify-content: space-between; align-items: center; color: var(--gold); font-family: var(--cond); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.wp-x { padding: 0 8px; }
.wp-row { display: flex; justify-content: space-between; gap: 12px; font-size: 15px; }
.wp-row b { font-family: var(--cond); font-size: 18px; }
.wp-row.neg b { color: #ff8a96; }
.wp-row.pos b { color: #7ee2a8; }
.wp-row.tot { border-top: 1px solid rgba(255, 255, 255, .15); padding-top: 5px; margin-top: 2px; }
.wp-row.tot b { color: var(--gold); font-size: 22px; }
.wp-infl { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; font-size: 13px; color: var(--text2); margin-top: 4px; }
.wp-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.wp-bar > i { display: block; height: 100%; background: linear-gradient(90deg, #4f7bff, #8fb0ff); transform-origin: 0 50%; transform: scaleX(var(--keep)); }
.wp-infl b { color: #ff8a96; font-family: var(--cond); font-size: 16px; }
.m .wallet-pop { position: fixed; right: auto; bottom: auto; left: 50%; translate: -50% 0; top: calc(var(--sat, 0px) + 96px); }
/* 3. Frise des sondages */
.poll-trend { display: flex; flex-direction: column; gap: 4px; margin-top: 10px; }
.poll-trend svg { width: 100%; height: auto; display: block; overflow: visible; }
.tr-axis { stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.tr-mid { stroke: rgba(255, 255, 255, .12); stroke-width: 1; stroke-dasharray: 3 3; }
.tr-v { fill: #fff; font-family: var(--cond); font-weight: 700; font-size: 12px; }
.tr-t { fill: var(--text2); font-family: var(--cond); font-size: 10px; }
.trend-panel .poll-trend { margin-top: 0; }
/* 5. Tampons des unes */
.une-stamp { position: absolute; z-index: 3; right: 12px; bottom: 16px; transform: rotate(-11deg); padding: 3px 10px; border: 3px solid currentColor; border-radius: 4px;
  font-family: var(--cond); font-weight: 800; font-size: 20px; letter-spacing: .12em; color: #c8102e; background: rgba(241, 235, 220, .55); mix-blend-mode: multiply; opacity: .9; pointer-events: none; }
.une-stamp.stamp-debat { color: #1d3d8f; }
.une-stamp.stamp-attaque { color: #8a5a00; }
.m .une-stamp { font-size: 15px; bottom: 12px; right: 8px; }
/* 6. Plateau d'attente (plan envoyé) */
.cards.studio-on > .act-group { display: none; }
.studio-wait { display: flex; flex-direction: column; gap: 10px; padding: 14px; border-radius: 12px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 0%, rgba(70, 120, 255, .25), transparent 60%), linear-gradient(180deg, #16224a, #0d1633); border: 1px solid rgba(255, 196, 0, .3); }
.sw-top { display: flex; justify-content: space-between; align-items: center; }
.sw-logo { background: var(--red); color: #fff; font-family: var(--cond); font-weight: 800; padding: 2px 8px; letter-spacing: .05em; }
.sw-live { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cond); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--text2); }
.sw-live i { width: 8px; height: 8px; border-radius: 50%; background: var(--red); }
.sw-stage { display: flex; align-items: center; gap: 14px; min-height: 92px; }
.sw-mod { width: 84px; height: 84px; flex: none; border-radius: 50%; background: radial-gradient(circle at 50% 70%, rgba(255, 196, 0, .25), transparent 70%); display: grid; place-items: center; }
.sw-mod .dchar { width: 68px; height: 68px; }
.sw-lines { position: relative; flex: 1; height: 2.6em; font-family: var(--cond); font-size: 22px; line-height: 1.2; }
.sw-lines span { position: absolute; inset: 0; opacity: 0; }
.sw-lines span:first-child { opacity: 1; }
.sw-band { display: flex; justify-content: space-between; align-items: center; background: var(--gold); color: var(--bg); padding: 6px 12px; font-family: var(--cond); font-size: 17px; border-radius: 4px; }
.sw-who { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.sw-who li { display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 5px 8px; border-radius: 6px; background: rgba(255, 255, 255, .05); color: var(--text2); }
.sw-who li b { margin-left: auto; color: var(--text2); }
.sw-who li.ok { color: var(--text); }
.sw-who li.ok b { color: #7ee2a8; }
.sw-who .sqp { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.m .sw-stage { min-height: 70px; }
.m .sw-mod { width: 64px; height: 64px; }
.m .sw-mod .dchar { width: 52px; height: 52px; }
.m .sw-lines { font-size: 18px; }
/* 7. Jauge de l'écart (soirée) */
.gap-meter { display: grid; grid-template-columns: auto 1fr auto auto; gap: 10px; align-items: center; font-size: 13px; }
.gap-track { position: relative; height: 10px; border-radius: 5px; overflow: hidden; background: linear-gradient(90deg, #c8102e 0 10%, #ff9f1c 10% 30%, #3a4a7a 30% 100%); }
.gap-zone { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(25% - 1px), rgba(255, 255, 255, .25) calc(25% - 1px) 25%); }
.gap-needle { position: absolute; inset: 0; will-change: transform; }
.gap-needle::before { content: ""; position: absolute; left: 0; top: -2px; bottom: -2px; width: 4px; border-radius: 2px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
.gap-meter b { font-family: var(--cond); font-size: 18px; color: var(--gold); min-width: 64px; text-align: right; }
.gap-tag { font-family: var(--cond); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 10px; background: rgba(255, 255, 255, .1); }
.gap-meter[data-tag="coude à coude"] .gap-tag { background: #c8102e; color: #fff; }
.m .gap-meter { grid-template-columns: 1fr auto auto; font-size: 12px; }
.m .gap-meter .gap-track { grid-column: 1 / -1; grid-row: 2; }
/* 8. Proclamation : palais en pixel art, confettis */
.pr-elysee { position: absolute; left: 50%; bottom: 0; width: min(470px, 60vw); height: auto; transform: translate(-50%, 0); opacity: .9; z-index: 0; image-rendering: pixelated; -webkit-mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .35)); mask-image: linear-gradient(180deg, #000 55%, rgba(0, 0, 0, .35)); }
.fx-proclaim .pr-stage { position: relative; z-index: 1; }
.pr-conf { position: absolute; left: 50%; top: 42%; width: 12px; height: 12px; z-index: 2; pointer-events: none; }
.m .pr-elysee { width: 96vw; }
.m .pr-conf { width: 8px; height: 8px; }
/* 9. Personnages : lobby (le sien s'anime) et écran final */
.choice-px { display: inline-block; vertical-align: -5px; margin-right: 6px; }
.choice-px .dchar { width: 22px; height: 22px; display: block; }
.choice.taken .choice-px { filter: grayscale(1); }
.end-px { display: flex; align-items: flex-end; gap: 28px; margin: 6px 0 2px; }
html:not(.m) #end-main { position: relative; }
html:not(.m) .end-px { position: absolute; right: 24px; top: 70px; margin: 0; }
.epx { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: var(--cond); font-size: 15px; color: var(--text2); }
.epx .dchar { width: 76px; height: 76px; }
.epx-win { color: var(--gold); }
.epx-win .dchar { width: 104px; height: 104px; filter: drop-shadow(0 0 14px var(--pc)); }
.epx-win .fr-idle, .epx-lose .fr-idle { display: none; }
.epx-win .fr-win, .epx-lose .fr-lose { display: inline; }
.epx-lose { opacity: .75; }
.m .end-px { justify-content: center; gap: 18px; }
.m .epx-win .dchar { width: 76px; height: 76px; }
.m .epx .dchar { width: 56px; height: 56px; }
@media (prefers-reduced-motion: no-preference) {
  .mk-ic { animation: mk-bob 2.4s ease-in-out var(--d, 0s) infinite; transform-box: fill-box; }
  .choice.mine .choice-px { animation: px-hop 1.1s ease-in-out infinite; }
  .choice.mine .choice-px .fr-idle { animation: px-show-a .5s steps(1) infinite; }
  .choice.mine .choice-px .fr-talk { display: inline; animation: px-show-b .5s steps(1) infinite; }
  .sw-mod .fr-idle { animation: px-show-a .6s steps(1) infinite; }
  .sw-mod .fr-talk { display: inline; animation: px-show-b .6s steps(1) infinite; }
  .sw-lines span { animation: sw-line 15s ease-in-out infinite; }
  .sw-lines span:first-child { opacity: 0; }
  .sw-lines span:nth-child(2) { animation-delay: 3s; }
  .sw-lines span:nth-child(3) { animation-delay: 6s; }
  .sw-lines span:nth-child(4) { animation-delay: 9s; }
  .sw-lines span:nth-child(5) { animation-delay: 12s; }
  .sw-live i { animation: live-blink 1.6s ease-in-out infinite; }
  .epx-win { animation: px-hop 1.4s ease-in-out infinite; }
}
@keyframes mk-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -1.5px; } }
@keyframes px-hop { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-4px); } }
@keyframes px-show-a { 0% { visibility: visible; } 50% { visibility: hidden; } }
@keyframes px-show-b { 0% { visibility: hidden; } 50% { visibility: visible; } }
@keyframes sw-line { 0% { opacity: 0; transform: translateY(8px); } 3%, 17% { opacity: 1; transform: none; } 20%, 100% { opacity: 0; transform: translateY(-8px); } }
.m .legend { flex-wrap: wrap; gap: 6px 12px; }
.m .legend > span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.m .legend-acts { gap: 8px; flex-wrap: wrap; }
/* Logo de la barre du haut (v66) : « ÉLYSÉE24 » sur fond jaune, texte bleu nuit ; le point rouge du direct reste à côté. */
html .topbar .brand { background: linear-gradient(180deg, #ffd23d, var(--gold) 60%, #e9b200); box-shadow: 0 8px 22px -8px rgba(255, 196, 0, .6); padding: 0 10px; gap: .18em; }
html .topbar .brand-name, html .topbar .brand-num { background: none; color: var(--bg); padding: 0; }
html.m .topbar .brand { padding: 3px 7px 2px; }

/* --- Bandeau « chaîne info » (v67, proposition C) : bloc logo + heure à gauche, étage rouge « À la une »,
   étage clair des brèves qui défilent. Mêmes id/classes (ticker-tag, ticker-window, ticker-track, ticker-info). --- */
html .ticker { align-items: stretch; height: 64px; background: #f4f6fb; color: var(--bg); padding: 0; border-top: 0; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, .8); }
.tk-side { flex: none; width: 92px; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, #ff2a4f, var(--red) 55%, #b80023); color: #fff; }
html .tk-side .ticker-clock { background: none; box-shadow: none; color: #fff; height: auto; padding: 0; font-family: var(--cond); font-weight: 800; font-size: 26px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.tk-floors { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tk-une { flex: none; height: 38px; display: flex; align-items: center; gap: 14px; padding: 0 0 0 20px; background: linear-gradient(180deg, #ff2a4f, var(--red) 55%, #b80023); color: #fff; overflow: hidden; }
.tk-une-tag { flex: none; font-family: var(--cond); font-weight: 800; font-size: 12px; letter-spacing: .14em; padding: 2px 7px; border: 1.5px solid #fff; border-radius: 3px; line-height: 1.2; }
.tk-une-box { flex: 1; min-width: 0; overflow: hidden; }
.tk-une-text { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; letter-spacing: .02em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html .tk-une .ticker-info { flex: none; height: 100%; background: rgba(0, 0, 0, .22); color: #fff; padding: 0 16px; font-family: var(--cond); font-weight: 800; font-size: 15px; letter-spacing: .06em; text-transform: uppercase; border: 0; }
.tk-row { flex: 1; min-height: 0; display: flex; align-items: stretch; background: #f4f6fb; color: var(--bg); }
html .tk-row .ticker-tag { background: none; color: var(--red); font-family: var(--cond); font-weight: 800; font-size: 14px; letter-spacing: .12em; padding: 0 4px 0 20px; margin: 0; height: auto; }
html .tk-row .ticker-tag::after { content: none; }
html .tk-row .ticker-tag.flash { background: var(--red); color: #fff; padding: 0 12px; margin-left: 8px; }
html .tk-row .ticker-window { height: auto; }
html .ticker-track, html .ticker-flash { font-family: var(--body); font-weight: 600; font-size: 15px; color: var(--bg); }
html .ticker-track span, html .ticker-flash span { padding: 0 16px; }
html :is(.ticker-track, .ticker-flash) .sep-dot { color: var(--red); padding: 0; }
html .ticker-flash { color: var(--red); font-weight: 800; }
/* Mobile : sous la barre du haut, sans bloc logo (le logo est dans la barre), deux étages fins. */
html.m .ticker { height: 48px; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); border-bottom: 0; }
html.m .tk-side { display: none; }
html.m .tk-une { height: 26px; gap: 8px; padding-left: 10px; }
html.m .tk-une-tag { font-size: 9.5px; padding: 1px 5px; border-width: 1px; }
html.m .tk-une-text { font-size: 14px; }
html.m .tk-une .ticker-info { font-family: var(--body); font-size: 11px; font-weight: 600; letter-spacing: 0; text-transform: none; padding: 0 8px; }
html.m .tk-row .ticker-tag { font-size: 11px; padding: 0 2px 0 10px; }
html.m .ticker-track, html.m .ticker-flash { font-size: 12.5px; }
html.m .ticker-track span, html.m .ticker-flash span { padding: 0 12px; }
html.m .wallet-pop { top: calc(var(--sat, 0px) + 118px); }

/* Logo « Chaîne info » (v67) : bloc jaune ÉLYSÉE24 collé au bord gauche, sur toute la hauteur de la
   barre, suivi d'un bloc rouge « EN DIRECT » (« DIRECT » sur mobile) dont le point clignote en fondu. */
html .topbar .logo { align-self: stretch; gap: 0; margin-left: -24px; }
html.m .topbar .logo { margin-left: -16px; }
html .topbar .brand { height: auto; align-self: stretch; align-items: center; border-radius: 0; padding: 0 22px; font-size: 28px; box-shadow: none; }
html.m .topbar .brand { padding: 0 12px; font-size: 20px; }
.brand-live { align-self: stretch; display: flex; align-items: center; gap: 8px; padding: 0 16px; background: var(--red); color: #fff; font-family: var(--cond); font-weight: 800; font-size: 15px; letter-spacing: .14em; white-space: nowrap; }
html .brand-live .live-dot { width: 9px; height: 9px; background: #fff; box-shadow: 0 0 8px rgba(255, 255, 255, .8); }
html.m .brand-live { gap: 5px; padding: 0 9px; font-size: 11px; letter-spacing: .12em; }
html.m .brand-live .live-dot { width: 6px; height: 6px; }
html.m .bl-en { display: none; }
html .ticker .ticker-window .sep-dot { color: var(--red); } /* sur l'étage clair des brèves */

/* Attaque (v71) : un clic sur la carte ouvre les candidats en lice, un clic sur l'un d'eux ajoute l'attaque. */
.act-grid { position: relative; }
.card-attack { text-align: left; }
.card-attack .atk-go { font-family: var(--cond); font-weight: 700; font-size: 14px; letter-spacing: .04em; color: #ff8a96; }
.card-attack.picking { border-color: #ff5a6e; box-shadow: 0 0 0 1px #ff5a6e, 0 10px 26px -10px rgba(228, 0, 43, .6); }
.rival-pop { position: absolute; left: 0; right: 0; z-index: 12; padding: 12px; border-radius: 12px; background: #111c3f; border: 1px solid rgba(255, 90, 110, .55); box-shadow: 0 22px 44px rgba(0, 0, 0, .55); display: flex; flex-direction: column; gap: 10px; }
.rp-head { display: flex; justify-content: space-between; align-items: center; font-family: var(--cond); font-size: 16px; letter-spacing: .03em; color: #dde4ff; }
.rp-head b { color: #ff8a96; }
.rp-x { padding: 0 9px; }
.rp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.rp-rival { position: relative; display: grid; grid-template-columns: 44px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 10px; cursor: pointer;
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(150, 172, 255, .18); border-left: 4px solid var(--pc); color: var(--text); font: inherit; }
.rp-rival .dchar { grid-row: 1 / 3; width: 44px; height: 44px; }
.rp-name { font-family: var(--cond); font-weight: 800; font-size: 17px; line-height: 1.1; }
.rp-party { font-size: 12px; color: var(--text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rp-n { position: absolute; top: 4px; right: 6px; font-family: var(--cond); font-size: 11px; font-weight: 700; color: #ff8a96; }
.rp-rival:hover, .rp-rival:focus-visible { background: rgba(255, 90, 110, .14); border-color: #ff5a6e; outline: none; }
@media (prefers-reduced-motion: no-preference) {
  .rp-rival { transition: transform .12s ease, background .12s ease; }
  .rp-rival:hover { transform: translateY(-1px); }
  .rp-rival:active { transform: scale(.97); }
  .rp-rival:hover .dchar .fr-idle { display: none; }
  .rp-rival:hover .dchar .fr-lose { display: inline; }
}
.m .rp-grid { grid-template-columns: 1fr 1fr; }
.m .rp-rival { grid-template-columns: 36px 1fr; padding: 7px 8px; }
.m .rp-rival .dchar { width: 36px; height: 36px; }
.m .rp-name { font-size: 15px; }
/* Vainqueur bras levés (v74) : l'étiquette « Vainqueur » passe au-dessus des mains, devant le personnage. */
.s3 .dpod.win .dpst { top: -60px; z-index: 6; }
.s3 .db-stage.many .dpod.win .dpst, .db-stage.many.s3 .dpod.win .dpst { top: -48px; }
.m .s3 .dpod.win .dpst { top: -40px; }
/* Accès anticipé (v1.0) : pastille discrète au-dessus du titre de l'accueil. */
.early-badge { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255, 196, 0, .55); background: rgba(255, 196, 0, .1); color: var(--gold); font-family: var(--cond); font-weight: 800; font-size: 14px; letter-spacing: .12em; text-transform: uppercase; }
.early-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }
.m .early-badge { font-size: 11px; padding: 3px 9px; margin-bottom: 8px; }

/* Compte joueur (facultatif) et partage de fin de partie */
.account-form { display: flex; flex-direction: column; gap: 12px; }
.account-form input { width: 100%; }
.acc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.acc-tile { display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: var(--r-md, 10px); background: rgba(255,255,255,.06); border-left: 3px solid var(--gold); }
.acc-tile .k { font: 600 11px/1.2 var(--cond); letter-spacing: .14em; text-transform: uppercase; color: #9fb0dc; }
.acc-tile b { font: 900 24px/1.1 var(--display); color: #fff; }
.acc-sub { margin-top: 4px; }
.acc-games { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.acc-games li { display: grid; grid-template-columns: 64px 1fr auto auto; gap: 12px; align-items: baseline; padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.04); font-size: 15px; }
.acc-games li span { color: #b9c4e6; }
.acc-win { font-style: normal; color: var(--gold); font-weight: 700; }
.acc-ok { color: #7fe0a0; font-weight: 600; }
.end-extra { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 12px; }
.end-account { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 14px; }
.end-account[hidden] { display: none; }
.m .end-extra { width: 100%; }
.m .end-extra #btn-share { flex: 1; }
@media (max-width: 560px) {
  .acc-grid { grid-template-columns: repeat(2, 1fr); }
  .acc-games li { grid-template-columns: 52px 1fr; }
}
.acc-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.acc-actions .btn.small { align-self: auto; }
.acc-danger { color: #ff8a9a; border-color: rgba(255,138,154,.45); }
.acc-legal { font-size: 13.5px !important; color: #9fb0dc !important; }
.acc-legal a, .link-legal { color: var(--gold); }