/* =============================================================
   49trois — v3 : styles du mandat animé
   S'appuie sur les variables déjà définies dans index.html
   (--bleu, --papier, --ligne, --gris…). Rien n'est redéfini.
   ============================================================= */
:root{
  /* Cinq encres d'atlas. Aucune ne reprend une couleur de parti. */
  --ax-eco:#8a6412; --ax-secu:#2b4a6f; --ax-social:#7d3f66;
  --ax-envir:#177245; --ax-public:#a34a2a;
  --tr:600ms;
}
@media (prefers-reduced-motion:reduce){:root{--tr:1ms}}

/* ================= HUD + horloge =================
     La barre bleue existante reçoit la date et les commandes de temps. */
  .hud{position:sticky;top:0;z-index:20;margin:10px 0 14px}
  .hud-bar{display:flex;align-items:center;gap:9px;background:var(--bleu);color:#fff;
    border-radius:14px 14px 0 0;padding:9px 12px;box-shadow:0 8px 22px rgba(0,0,80,.20);user-select:none}
  .hud-date{display:flex;flex-direction:column;line-height:1.15;cursor:pointer}
  .hud-date .an{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;opacity:.62;font-weight:700}
  .hud-date .mo{font-weight:900;font-size:15px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .hud-minis{display:flex;gap:6px;flex:1;overflow-x:auto;scrollbar-width:none;cursor:pointer}
  .hud-minis::-webkit-scrollbar{display:none}
  .mini{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.15);
    border-radius:999px;padding:3px 9px;font-size:13px;white-space:nowrap}
  .mini b{font-weight:800;font-variant-numeric:tabular-nums}
  .horloge{display:flex;gap:3px;flex:none}
  .horloge button{font-family:'Archivo';font-weight:800;font-size:11px;color:#fff;
    background:rgba(255,255,255,.14);border:none;border-radius:7px;height:28px;min-width:30px;
    cursor:pointer;transition:background .14s,color .14s;padding:0 6px}
  .horloge button[aria-pressed="true"]{background:#fff;color:var(--bleu)}
  .horloge button:focus-visible{outline:2px solid #fff;outline-offset:2px}
  /* ruban des 60 mois : hairline, jamais une barre de jeu vidéo */
  .ruban{height:3px;background:var(--papier2);position:relative;overflow:hidden}
  .ruban i{position:absolute;inset:0 auto 0 0;background:var(--rouge);width:0;transition:width var(--tr) linear}
  .ruban u{position:absolute;top:0;bottom:0;width:1px;background:var(--ligne)}

  /* ================= LA PLANCHE D'ATLAS =================
     Signature : la carte est présentée comme une planche imprimée —
     filet, titre en petites capitales, source composée dessous. */
  .planche{background:#fff;border:1px solid var(--ligne);border-radius:14px;
    padding:14px 14px 11px;margin:10px 0;box-shadow:0 1px 2px rgba(20,16,8,.05),0 6px 16px rgba(20,16,8,.04)}
  .planche-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
    padding-bottom:9px;border-bottom:1px solid var(--ligne);margin-bottom:11px}
  .planche-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gris)}
  .planche-n{font-family:'Spectral',serif;font-size:15px;font-weight:600}
  .atlas{position:relative}
  svg.fr{width:100%;height:auto;display:block;max-height:min(52vh,430px)}
  svg.fr path.reg{stroke:#fff;stroke-width:1.1;cursor:pointer;transition:fill var(--tr) ease}
  svg.fr path.reg:hover{stroke:var(--encre);stroke-width:1.6}
  svg.fr path.reg:focus-visible{outline:none;stroke:var(--bleu);stroke-width:2.4}
  .bulle{position:absolute;pointer-events:none;opacity:0;transform:translateY(4px);
    transition:opacity .16s,transform .16s;background:var(--encre);color:#fff;
    border-radius:9px;padding:7px 10px;z-index:5;min-width:120px;box-shadow:0 8px 22px rgba(0,0,0,.28)}
  .bulle[data-on="1"]{opacity:1;transform:translateY(0)}
  .bulle b{display:block;font-size:12px;margin-bottom:2px}
  .bulle .v{font-size:18px;font-weight:900;font-variant-numeric:tabular-nums}
  .bulle .s{font-size:10px;opacity:.6;text-transform:uppercase;letter-spacing:.1em;font-weight:700}
  /* sélecteur d'axe — repris du style .chip du jeu */
  .axes{display:flex;gap:6px;margin-top:12px;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  @media(min-width:560px){.axes{flex-wrap:wrap;overflow-x:visible}}
  .axes::-webkit-scrollbar{display:none}
  .axe{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;font-family:'Archivo';
    font-size:11.5px;font-weight:700;padding:5px 11px 5px 8px;border-radius:999px;
    background:var(--papier2);color:#4a4636;border:1.5px solid transparent;cursor:pointer;transition:all .15s}
  .axe .pt{width:9px;height:9px;border-radius:2px;background:currentColor;flex:none}
  .axe[aria-pressed="true"]{background:#fff;border-color:currentColor}
  /* échelle imprimée */
  .echelle{display:flex;align-items:center;gap:8px;margin-top:11px}
  .echelle .pav{display:flex;flex:1;height:8px;border:1px solid var(--ligne)}
  .echelle .pav i{flex:1;border-right:1px solid rgba(255,255,255,.7)}
  .echelle .pav i:last-child{border-right:none}
  .echelle span{font-size:10px;font-weight:700;color:var(--gris);font-variant-numeric:tabular-nums}
  .prov{font-size:10.5px;color:var(--gris);margin-top:8px;line-height:1.4}
  .prov .avert{display:inline-block;margin-top:6px;padding:3px 7px;border-radius:4px;
    background:#f2ead6;color:#8a6412;font-weight:700;font-size:10px}

  /* ================= LES CINQ PLUMES ================= */
  .bandes{margin-top:14px;padding-top:12px;border-top:1px solid var(--ligne)}
  .bandes-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--gris);margin-bottom:9px}
  /* règle des cinq années, alignée sur les pistes */
  .bandes-ax{display:flex;align-items:center;gap:9px;margin-bottom:3px}
  .bandes-ax .nm{width:104px;flex:none}
  .bandes-ax .sc{flex:1;display:flex}
  .bandes-ax .sc span{flex:1;font-size:9.5px;font-weight:700;letter-spacing:.06em;
    text-transform:uppercase;color:var(--gris);text-align:center;border-left:1px solid var(--ligne)}
  .bandes-ax .sc span:first-child{border-left:none}
  .bandes-ax .vl{width:52px;flex:none}
  .bande{display:flex;align-items:center;gap:9px;height:34px}
  .bande .nm{width:104px;font-size:11px;font-weight:700;color:#4a4636;flex:none;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .bande svg{flex:1;height:28px;display:block}
  .bande .vl{width:52px;text-align:right;font-size:13px;font-weight:900;
    font-variant-numeric:tabular-nums;flex:none;white-space:nowrap}
  .bande .vl em{font-style:normal;font-size:10.5px;font-weight:700;opacity:.62;margin-left:3px}
  .bande .pl{fill:none;stroke-width:2;stroke-linejoin:round;stroke-linecap:round}
  /* la part du mandat encore à vivre, en creux : le vide devient lisible */
  .bande .futur{fill:var(--papier2);opacity:.5}
  .bande .ref{stroke-dasharray:3 3;stroke-width:1;opacity:.45}

  /* bascule d'année : un filet qui balaie la planche, rien de plus */
  .balai{position:absolute;inset:0;pointer-events:none;opacity:0;
    background:linear-gradient(90deg,transparent,rgba(0,0,145,.09),transparent)}
  .balai[data-go="1"]{animation:sw 900ms ease-out}
  @keyframes sw{from{opacity:1;transform:translateX(-100%)}to{opacity:0;transform:translateX(100%)}}
  @media (prefers-reduced-motion:reduce){.balai[data-go="1"]{animation:none}}

  /* ================= BANDEAU DE PAUSE ================= */
  .halte{background:var(--bleu);color:#fff;border-radius:14px;padding:15px 16px;margin:12px 0;
    box-shadow:0 8px 22px rgba(0,0,80,.2)}
  .halte .kick{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:#b9b9ff;font-weight:700}
  .halte h3{font-size:17px;margin:4px 0 5px}
  .halte p{color:#e7e7ff;font-size:14.5px;margin:0 0 11px}
  .halte button{width:100%;background:#fff;color:var(--bleu);border:none;padding:12px;
    font-family:'Archivo';font-weight:800;font-size:15px;border-radius:11px;cursor:pointer}

/* =============================================================
   Panneaux d'événement — la décision se pose SUR la carte,
   elle ne remplace plus l'écran. Une couleur par type.
   ============================================================= */
.panneau{border-radius:16px;margin:12px 0 14px;overflow:hidden;
  box-shadow:0 10px 30px rgba(20,16,8,.16);animation:panIn .32s cubic-bezier(.2,.8,.2,1)}
@keyframes panIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.panneau{animation:none}}
.pan-h{padding:14px 16px 13px;color:#fff}
.pan-k{font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;font-weight:700;opacity:.72}
.pan-h h3{font-size:18px;margin:4px 0 5px;color:#fff}
.pan-h p{font-size:14.5px;margin:0;opacity:.92;line-height:1.42}
.pan-b{background:#fff;padding:13px 14px 15px}
.pan-b .card{margin:8px 0}
.pan-b .card:first-child{margin-top:0}
.pan-consigne{font-size:12.5px;color:var(--gris);margin:0 0 10px}
/* crise : rouge · occasion : or · chantier : bleu République */
.pan-crise    .pan-h{background:var(--rouge)}
.pan-crise    {border:1px solid #f0bcbc}
.pan-occasion .pan-h{background:#8a6412}
.pan-occasion {border:1px solid #ddc99a}
.pan-chantier .pan-h{background:var(--bleu)}
.pan-chantier {border:1px solid #b9b9dd}
.pan-etape{margin:12px 0 4px}
.pan-etape .etape-t{margin-bottom:2px}

/* =============================================================
   Fil d'actualité — déduit de l'état du modèle, jamais inventé
   ============================================================= */
.fil{margin-top:12px;padding-top:11px;border-top:1px solid var(--ligne)}
.fil-t{font-size:11px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;
  color:var(--gris);margin-bottom:9px;display:flex;justify-content:space-between;align-items:baseline}
.fil-t em{font-style:normal;font-size:10px;letter-spacing:0;text-transform:none;opacity:.8}
.fil-l{display:flex;flex-direction:column;gap:6px}
.dep{display:flex;gap:9px;align-items:flex-start;background:var(--papier);
  border-left:3px solid var(--ligne);border-radius:0 8px 8px 0;padding:8px 11px;
  animation:depIn .3s ease-out}
@keyframes depIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dep{animation:none}}
.dep .q{font-size:9.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;padding-top:2px;min-width:52px}
.dep .x{font-size:13px;line-height:1.4;font-family:'Spectral',serif;color:#2a2a2a}
.dep.bon{border-left-color:var(--vert)}
.dep.mauvais{border-left-color:var(--rouge)}
.dep.signal{border-left-color:var(--ambre);background:#faf5e8}
.dep.signal .x{font-weight:600;font-family:'Archivo',sans-serif;font-size:12.5px}

/* =============================================================
   Consultations — trois panneaux ouvrables à tout moment.
   Ouvrir met le temps en pause ; fermer le relance.
   ============================================================= */
.consult{display:flex;gap:6px;margin:10px 0 0;overflow-x:auto;scrollbar-width:none}
.consult::-webkit-scrollbar{display:none}
.consult button{flex:1;min-width:0;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  font-family:'Archivo';font-size:12px;font-weight:700;color:var(--bleu);background:#fff;
  border:1.5px solid var(--ligne);border-radius:11px;padding:9px 8px;cursor:pointer;
  transition:border-color .15s,background .15s;white-space:nowrap}
.consult button:hover{border-color:var(--bleu);background:#fbfaf6}
.consult button[aria-pressed="true"]{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.consult button .ic{font-size:15px;flex:none}
.pan-consult .pan-h{background:#33404f}
.pan-consult{border:1px solid #c3ccd6}
/* chaîne budgétaire : chaque ligne dit d'où sort le chiffre */
.chaine{margin:2px 0 4px}
.chaine .lg{display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  padding:7px 0;border-bottom:1px solid var(--ligne);font-size:14px}
.chaine .lg.tot{border-bottom:none;border-top:2px solid var(--encre);margin-top:2px;font-weight:800}
.chaine .lg .d{font-size:11.5px;color:var(--gris);display:block;font-weight:400;margin-top:1px}
.chaine .lg b{font-variant-numeric:tabular-nums;white-space:nowrap}
.chaine h4{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--gris);
  margin:14px 0 2px;font-weight:700}
.chaine h4:first-child{margin-top:0}
/* baromètre des acteurs */
.baro{display:grid;grid-template-columns:104px 1fr 74px;gap:9px;align-items:center;margin-bottom:9px}
.baro .n{font-size:12.5px;font-weight:700}
.baro .s{font-size:11px;font-weight:700;text-align:right}

/* =============================================================
   MODALE D'ÉVÉNEMENT — au premier plan, le pays flouté derrière
   ============================================================= */
#ev-root:empty{display:none}
.ev-ov{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(30,26,18,.44);
  -webkit-backdrop-filter:blur(7px) saturate(.85);backdrop-filter:blur(7px) saturate(.85);
  animation:ovFade .22s ease-out}
@keyframes ovFade{from{opacity:0}to{opacity:1}}
.ev-boite{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;border-radius:18px;
  background:var(--papier);box-shadow:0 30px 80px rgba(0,0,0,.45);
  animation:evIn .3s cubic-bezier(.2,.85,.25,1)}
@keyframes evIn{from{opacity:0;transform:translateY(18px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.ev-ov,.ev-boite{animation:none}}
.ev-boite::-webkit-scrollbar{width:8px}
.ev-boite::-webkit-scrollbar-thumb{background:var(--ligne);border-radius:8px}
.ev-corps{padding:0 18px 18px}
.ev-corps .card{margin:9px 0}
.ev-x{position:sticky;top:0;z-index:2;display:flex;justify-content:flex-end;
  padding:8px 10px 0;background:linear-gradient(var(--papier) 70%,transparent)}
.ev-x button{background:none;border:none;font-size:18px;color:var(--gris);cursor:pointer;
  line-height:1;padding:4px 8px;border-radius:8px}
.ev-x button:hover{background:var(--papier2)}

/* ---------- 1. DÉPÊCHE D'AGENCE : le fil qui tombe ---------- */
.msg{margin:0 18px 4px}
.dp{background:#fff;border:1px solid var(--ligne);border-left:4px solid var(--rouge);
  border-radius:3px;padding:12px 14px 13px}
.dp-h{font-family:ui-monospace,'Courier New',monospace;font-size:11px;letter-spacing:.04em;
  color:var(--gris);display:flex;justify-content:space-between;gap:10px;
  padding-bottom:8px;margin-bottom:9px;border-bottom:1px dashed var(--ligne)}
.dp-h b{color:var(--rouge);font-weight:700}
.dp-t{font-family:'Archivo';font-weight:900;font-size:19px;line-height:1.12;
  text-transform:uppercase;letter-spacing:-.01em;margin-bottom:6px}
.dp-x{font-family:'Spectral',serif;font-size:15px;line-height:1.5;color:#2a2a2a}

/* ---------- 2. NOTE DE CABINET : papier à en-tête ---------- */
.nt{background:#fffdf7;border:1px solid var(--ligne);border-radius:3px;padding:14px 16px 15px;
  box-shadow:2px 3px 0 rgba(20,16,8,.05)}
.nt-h{border-bottom:2px solid var(--bleu);padding-bottom:8px;margin-bottom:10px}
.nt-h .r{font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--bleu);font-weight:800}
.nt-h .o{font-size:10.5px;color:var(--gris);margin-top:3px}
.nt-t{font-family:'Spectral',serif;font-weight:600;font-size:18px;line-height:1.22;margin-bottom:6px}
.nt-x{font-family:'Spectral',serif;font-size:15px;line-height:1.5;color:#2a2a2a}
.nt-s{margin-top:10px;font-size:11px;color:var(--gris);font-style:italic;text-align:right}

/* ---------- 3. SMS DU DIRECTEUR DE CABINET ---------- */
.sm{display:flex;gap:9px;align-items:flex-end}
.sm .av{width:30px;height:30px;border-radius:50%;background:var(--bleu);color:#fff;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900}
.sm .bl{background:#e9edf6;border-radius:14px 14px 14px 4px;padding:9px 13px;max-width:82%}
.sm .qui{font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--bleu);margin-bottom:2px}
.sm .x{font-size:14px;line-height:1.42;color:#1c2430}
.sm .h{font-size:10px;color:var(--gris);margin-top:3px;text-align:right}

/* ---------- 4. UNE DE PRESSE ---------- */
.pr{background:#fff;border:1px solid var(--ligne);border-radius:3px;padding:12px 14px 13px;
  border-top:3px double var(--encre)}
.pr-h{font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--gris);
  font-weight:700;margin-bottom:6px}
.pr-t{font-family:'Spectral',serif;font-weight:600;font-size:17px;line-height:1.24;color:#141414}
.pr-x{font-size:13px;line-height:1.45;color:#4a4636;margin-top:4px}

/* le fil reprend les mêmes formes, en réduction */
.fil-l .msg{margin:0}
.fil-l .dp,.fil-l .nt,.fil-l .pr{padding:9px 11px}
.fil-l .dp-t{font-size:14px}
.fil-l .nt-t,.fil-l .pr-t{font-size:14.5px}
.fil-l .dp-x,.fil-l .nt-x{font-size:13.5px}
.fil-l .sm .bl{max-width:100%}

/* =============================================================================
   LE CADRE DE JEU — le pays occupe l'écran, l'interface se pose dessus.
   Plus rien ne défile : c'est ce qui sépare un document d'un jeu.
   ============================================================================= */
body.mode-jeu{overflow:hidden;padding-bottom:0}
body.mode-jeu .flag,body.mode-jeu header.top{display:none}
body.mode-jeu .wrap{max-width:none;padding:0}
.cadre{position:fixed;inset:0;display:flex;flex-direction:column;background:var(--papier)}

/* --- bandeau supérieur --- */
.gj-haut{flex:none;background:var(--bleu);color:#fff;padding:9px 12px 8px;
  padding-top:calc(9px + env(safe-area-inset-top));box-shadow:0 4px 18px rgba(0,0,80,.22);z-index:6}
.gj-l1{display:flex;align-items:center;gap:10px}
.gj-sig{font-weight:900;font-size:12px;letter-spacing:-.01em;flex:none;opacity:.9}
.gj-sig b{color:#ff8a90}
.gj-date{display:flex;flex-direction:column;line-height:1.12;flex:none}
.gj-date .a{font-size:9px;letter-spacing:.16em;text-transform:uppercase;opacity:.6;font-weight:700}
.gj-date .m{font-size:15px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.gj-j{display:flex;gap:5px;margin-left:auto;overflow-x:auto;scrollbar-width:none}
.gj-j::-webkit-scrollbar{display:none}
.gj-j .m{display:inline-flex;align-items:center;gap:4px;background:rgba(255,255,255,.15);
  border-radius:999px;padding:3px 9px;font-size:12.5px;white-space:nowrap}
.gj-j .m b{font-weight:800;font-variant-numeric:tabular-nums}
.gj-ruban{height:3px;background:rgba(255,255,255,.2);margin-top:8px;border-radius:2px;position:relative;overflow:hidden}
.gj-ruban i{position:absolute;inset:0 auto 0 0;background:#fff;width:0;transition:width .6s linear}
.gj-ruban u{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35)}

/* --- scène : la carte occupe tout --- */
.gj-scene{flex:1;min-height:0;position:relative;display:flex;align-items:center;justify-content:center;
  padding:6px 8px 0;overflow:hidden}
.gj-scene svg.fr{width:100%;height:100%;max-height:none;display:block}
.gj-scene svg.fr path.reg{stroke:var(--papier);stroke-width:1.1;cursor:pointer;
  transition:fill var(--tr) ease}
.gj-scene svg.fr path.reg:hover{stroke:var(--encre);stroke-width:1.6}
/* pictogrammes : le pays se peuple ou se vide sous les yeux */
#sim-pictos{pointer-events:none}
#sim-pictos g{transition:opacity .55s ease}
#sim-pictos .pi{opacity:.92}
#sim-pictos .halo{opacity:.28}

/* la dernière dépêche, posée en bas de la carte */
.gj-flash{position:absolute;left:8px;right:8px;bottom:6px;max-width:430px;margin:0 auto;
  cursor:pointer;animation:flashIn .4s cubic-bezier(.2,.85,.25,1)}
@keyframes flashIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.gj-flash{animation:none}}
.gj-flash .msg{margin:0}
.gj-flash .dp,.gj-flash .nt,.gj-flash .pr{padding:8px 11px;box-shadow:0 8px 26px rgba(20,16,8,.18)}
.gj-flash .dp-t,.gj-flash .nt-t,.gj-flash .pr-t{font-size:13.5px}
.gj-flash .dp-x,.gj-flash .nt-x,.gj-flash .pr-x{font-size:12.5px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.gj-flash .sm .bl{max-width:100%;box-shadow:0 8px 26px rgba(20,16,8,.18)}

/* --- les cinq plumes, en bande fine et permanente --- */
.gj-plumes{flex:none;background:#fff;border-top:1px solid var(--ligne);padding:5px 10px 3px}
.gj-plumes .bande{height:17px;gap:7px}
.gj-plumes .bande .nm{width:74px;font-size:9.5px}
.gj-plumes .bande svg{height:15px}
.gj-plumes .bande .vl{width:44px;font-size:11px}
.gj-plumes .bande .vl em{font-size:9px}

/* --- barre d'outils : uniquement des icônes --- */
.gj-bas{flex:none;background:#fff;border-top:1px solid var(--ligne);
  padding:7px 8px calc(7px + env(safe-area-inset-bottom));
  box-shadow:0 -6px 22px rgba(20,16,8,.10);z-index:6}
.gj-axes{display:flex;gap:4px;margin-bottom:6px}
.gj-axes button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:1px;
  background:none;border:1.5px solid transparent;border-radius:10px;padding:4px 2px;cursor:pointer;
  transition:background .15s,border-color .15s}
.gj-axes button .ic{font-size:19px}
.gj-axes button .lb{font-size:8.5px;font-weight:800;letter-spacing:.02em;text-transform:uppercase;
  color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.gj-axes button[aria-pressed="true"]{border-color:currentColor;background:#faf8f2}
.gj-axes button[aria-pressed="true"] .lb{color:inherit}
.gj-outils{display:flex;gap:6px;align-items:center}
.gj-outils .grp{display:flex;gap:4px}
.gj-outils button{width:42px;height:38px;display:inline-flex;align-items:center;justify-content:center;
  background:var(--papier);border:1.5px solid var(--ligne);border-radius:11px;color:var(--bleu);
  cursor:pointer;transition:all .14s}
.gj-outils button .ic{font-size:19px}
.gj-outils button:hover{border-color:var(--bleu)}
.gj-outils button[aria-pressed="true"]{background:var(--bleu);color:#fff;border-color:var(--bleu)}
.gj-outils .esp{flex:1}
.gj-outils .vit button{width:36px;font-family:'Archivo';font-weight:800;font-size:11px}

/* =============================================================================
   « ÇA TRAVAILLE » — le temps de traitement entre la décision et son résultat
   ============================================================================= */
.tr-ov{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:18px;
  background:rgba(30,26,18,.5);-webkit-backdrop-filter:blur(9px);backdrop-filter:blur(9px)}
.tr-ov svg{width:104px;height:104px}
.tr-ov .g1{transform-origin:34px 36px;animation:tourne 2.6s linear infinite}
.tr-ov .g2{transform-origin:72px 60px;animation:tourne 2.6s linear infinite reverse}
.tr-ov .g3{transform-origin:44px 78px;animation:tourne 3.9s linear infinite}
@keyframes tourne{to{transform:rotate(360deg)}}
.tr-ov .etq{color:#fff;font-family:'Archivo';font-weight:700;font-size:13.5px;letter-spacing:.02em;
  text-align:center;min-height:19px;padding:0 24px}
.tr-ov .jauge{width:190px;height:3px;background:rgba(255,255,255,.25);border-radius:3px;overflow:hidden}
.tr-ov .jauge i{display:block;height:100%;width:0;background:#fff;border-radius:3px;
  animation:remplir var(--dur,1800ms) linear forwards}
@keyframes remplir{to{width:100%}}
@media(prefers-reduced-motion:reduce){
  .tr-ov .g1,.tr-ov .g2,.tr-ov .g3{animation:none}
  .tr-ov .jauge i{animation-duration:1ms}
}

/* =============================================================================
   Le cadre vit hors de #app : les écrans existants (chantier, réforme,
   résultat) deviennent donc des popups posées sur la carte, sans réécriture.
   ============================================================================= */
#jeu-root:empty{display:none}
body.mode-jeu #app{display:none}
body.mode-jeu.app-modale #app{display:block}
body.mode-jeu.app-modale .wrap{position:fixed;inset:0;z-index:45;max-width:none;
  display:flex;align-items:center;justify-content:center;padding:16px;
  background:rgba(30,26,18,.44);
  -webkit-backdrop-filter:blur(7px) saturate(.85);backdrop-filter:blur(7px) saturate(.85);
  animation:ovFade .22s ease-out}
body.mode-jeu.app-modale #app{width:100%;max-width:560px;max-height:88vh;overflow-y:auto;
  background:var(--papier);border-radius:18px;padding:16px 18px 20px;
  box-shadow:0 30px 80px rgba(0,0,0,.45);animation:evIn .3s cubic-bezier(.2,.85,.25,1)}
@media(prefers-reduced-motion:reduce){
  body.mode-jeu.app-modale .wrap,body.mode-jeu.app-modale #app{animation:none}}
body.mode-jeu.app-modale #app::-webkit-scrollbar{width:8px}
body.mode-jeu.app-modale #app::-webkit-scrollbar-thumb{background:var(--ligne);border-radius:8px}
/* dans la popup, le repérage et le HUD font doublon avec le cadre */
body.mode-jeu.app-modale #app .wf-phases,
body.mode-jeu.app-modale #app .hud{display:none}
body.mode-jeu.app-modale #app h1,
body.mode-jeu.app-modale #app h2:first-of-type{margin-top:4px}

/* =============================================================================
   CADRAGE — sans largeur maximale, tout s'étire sur un écran large et
   l'interface se disloque. Les fonds restent pleine largeur, les contenus
   sont ramenés dans une colonne de jeu centrée.
   ============================================================================= */
.gj-in{width:100%;max-width:880px;margin:0 auto}
.gj-scene svg.fr{width:auto;height:100%;max-width:min(100%,600px);margin:0 auto}
.gj-scene{padding:10px 8px 4px}
.gj-plumes{padding:6px 0 4px}
.gj-plumes .bande{height:19px}
.gj-plumes .bande .nm{width:88px;font-size:10px}
.gj-bas{padding-left:0;padding-right:0}
.gj-axes,.gj-outils{padding:0 10px}
.gj-axes button{max-width:150px}
/* sur écran large, un liseré marque le plateau de jeu */
@media(min-width:920px){
  .gj-scene::before,.gj-scene::after{content:'';position:absolute;top:0;bottom:0;width:1px;
    background:linear-gradient(var(--ligne),transparent 70%);opacity:.5}
  .gj-scene::before{left:calc(50% - 440px)} .gj-scene::after{right:calc(50% - 440px)}
  .gj-flash{max-width:480px}
}
/* le fil des cinq années fait doublon avec le bandeau : hors des popups */
body.mode-jeu.app-modale #app .wf,
body.mode-jeu.app-modale #app .wf-fil{display:none}

/* --- le chantier en étapes : trois choix, puis le détail --- */
.et-titre{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);
  font-weight:700;margin-bottom:3px}
.et-carte{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--ligne);
  border-radius:14px;padding:14px;margin:9px 0;cursor:pointer;transition:all .13s;
  box-shadow:0 1px 2px rgba(20,16,8,.05),0 6px 16px rgba(20,16,8,.04)}
.et-carte:hover{border-color:var(--bleu);box-shadow:0 12px 26px rgba(0,0,80,.09)}
.et-carte:active{transform:scale(.99)}
.et-carte.off{opacity:.5;cursor:default;box-shadow:none}
.et-carte.off:hover{border-color:var(--ligne)}
.et-ic{width:42px;height:42px;border-radius:12px;background:var(--papier2);color:var(--bleu);
  display:flex;align-items:center;justify-content:center;flex:none}
.et-ic .ic{font-size:22px}
.et-txt{flex:1;min-width:0}
.et-txt .t{font-weight:800;font-size:15.5px;line-height:1.2}
.et-txt .s{font-size:12.5px;color:var(--gris);margin-top:2px;line-height:1.35}
.et-cpt{font-size:11px;font-weight:800;color:var(--bleu);background:var(--papier2);
  border-radius:999px;padding:3px 9px;flex:none;white-space:nowrap}
.et-retour{background:none;border:none;color:var(--bleu);font-family:'Archivo';font-weight:700;
  font-size:13px;cursor:pointer;padding:4px 0;margin-bottom:6px}
/* =============================================================================
   LÉGENDE DE LA CARTE — à coller à la fin de mandat.css
   -----------------------------------------------------------------------------
   Registre du bulletin : filet fin, petites capitales espacées, papier crème.
   Aucune couleur propre — la légende emprunte l'encre de l'axe affiché, comme
   la carte. Mobile d'abord : deux lignes au maximum.
============================================================================= */

.gj-leg{
  flex:none;
  background:var(--papier);
  border-top:1px solid var(--ligne);
  padding:7px 0 6px;
}
.gj-leg .gj-in{
  display:flex; align-items:center; gap:10px;
  flex-wrap:wrap; justify-content:center;
}

/* --- l'échelle : bout clair · cinq paliers · bout soutenu ------------------ */
.leg-ech{ display:flex; align-items:center; gap:8px; min-width:0; }

.leg-pav{ display:flex; flex:0 0 auto; }
.leg-pav i{
  width:26px; height:11px; display:block;
  border:1px solid var(--ligne); border-right:0;
}
.leg-pav i:last-child{ border-right:1px solid var(--ligne); }
.leg-pav[data-mort="1"]{ opacity:.35; }

.leg-bout{
  font-family:Archivo, system-ui, sans-serif;
  font-size:10.5px; font-weight:600;
  letter-spacing:.03em; color:var(--gris);
  text-align:right; max-width:38vw;
  line-height:1.15;
}
.leg-bout.leg-haut{ text-align:left; }

/* --- la provenance, cliquable vers la méthode complète -------------------- */
.leg-src{
  font-family:Archivo, system-ui, sans-serif;
  font-size:10px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase;
  color:var(--gris); background:none;
  border:0; border-bottom:1px dotted var(--ligne);
  padding:2px 0; cursor:pointer;
  max-width:92vw; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.leg-src:hover, .leg-src:focus-visible{ color:var(--encre); border-bottom-color:var(--gris); }

/* Un axe incomplet le dit en ambre — le même signal que partout ailleurs.
   Un axe volontairement national reste gris : ce n'est pas un manque. */
.leg-src[data-etat="manquant"]{ color:var(--ambre); border-bottom-color:var(--ambre); }
.leg-src[data-etat="national"]{ font-style:italic; text-transform:none; letter-spacing:.02em; }

/* --- écrans étroits : l'échelle passe au-dessus de la provenance ---------- */
@media (max-width:520px){
  .gj-leg .gj-in{ gap:4px; }
  .leg-bout{ font-size:9.5px; max-width:34vw; }
  .leg-pav i{ width:20px; height:10px; }
  .leg-src{ font-size:9px; letter-spacing:.06em; }
}

@media (prefers-reduced-motion: reduce){
  .leg-src{ transition:none; }
}

/* =============================================================================
   COMPARAISON DES MANDATS — à ajouter à mandat.css
   -----------------------------------------------------------------------------
   Aucune couleur de réussite ou d'échec, aucun vert contre rouge : ce serait
   désigner un gagnant, donc porter un jugement sur les programmes. Une seule
   encre, bleu République, et des barres à échelle fixe 0-10.
   ============================================================================= */

.cmp{
  background:#fff; border:1px solid var(--ligne); border-radius:12px;
  padding:4px 0; overflow-x:auto;
}
.cmp-l{
  display:flex; align-items:center; gap:8px;
  padding:7px 12px; border-bottom:1px solid var(--ligne);
  min-width:min-content;
}
.cmp-l:last-child{ border-bottom:none; }

.cmp-n{
  flex:0 0 118px; font-size:12px; font-weight:700; color:#4a4636;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.cmp-v{
  flex:1 1 90px; min-width:90px; position:relative;
  display:flex; align-items:center; justify-content:flex-end; gap:6px;
  font-variant-numeric:tabular-nums; font-size:13px;
}
/* la barre : fond gris, remplissage bleu, échelle 0-10 identique partout */
.cmp-v i{
  position:absolute; left:0; top:50%; transform:translateY(-50%);
  height:7px; background:var(--bleu); opacity:.30; border-radius:2px;
}
.cmp-v b{ position:relative; font-weight:800; }

/* en-tête : le programme et sa date */
.cmp-h{ border-bottom:2px solid var(--encre); padding-top:10px; padding-bottom:9px; }
.cmp-h .cmp-v{
  flex-direction:column; align-items:flex-end; gap:1px; justify-content:center;
}
.cmp-h .cmp-v b{
  font-size:11.5px; font-weight:800; line-height:1.15; text-align:right;
}
.cmp-h .cmp-v em{
  font-style:normal; font-size:10px; color:var(--gris); letter-spacing:.02em;
}

/* la moyenne : soulignée, jamais mise en couleur */
.cmp-tot{ border-top:2px solid var(--encre); border-bottom:none; }
.cmp-tot .cmp-n{ font-weight:800; }
.cmp-tot .cmp-v b{ font-size:16px; font-weight:900; }
.cmp-tot .cmp-v i{ display:none; }

.cmp-fin{ background:var(--papier); }
.cmp-fin .cmp-n, .cmp-fin .cmp-v{
  font-size:11px; color:var(--gris); font-weight:600;
}

@media (max-width:520px){
  .cmp-n{ flex-basis:92px; font-size:11px; }
  .cmp-v{ flex-basis:74px; min-width:74px; font-size:12px; }
  .cmp-h .cmp-v b{ font-size:10.5px; }
}

/* l'échelle des plumes est écrite : une fenêtre resserrée qui tait ses bornes
   n'est pas publiable — même exigence que la légende de la carte */
.gj-plumes .pl-ech{margin:3px 0 0;font-size:9px;color:var(--gris);
  display:flex;justify-content:space-between;gap:8px;line-height:1.2}
.gj-plumes .pl-ech span{font-style:italic;opacity:.75}

/* la trajectoire : la même fenêtre que la bande, en grand */
.gj-plumes[role="button"]{cursor:pointer}
.gj-plumes[role="button"]:hover{background:#fdfcf9}
.traj svg{width:100%;height:150px;display:block;margin:6px 0}
.traj-futur{fill:#efeade}
.traj svg{background:#fff}
.traj-t{margin:0;font-size:13px;font-weight:700}
.traj-ans{display:flex;justify-content:space-between;gap:6px;margin:2px 0 8px;
  font-size:10px;color:var(--gris)}
.traj-ech{margin:0;font-size:11px;color:var(--gris);line-height:1.45}
.traj-ans i{font-style:normal;opacity:.55;font-size:9px;display:block}