/* =============================================================================
   famille.css — 49trois dans la famille Amisphère (16/09/2026)
   -----------------------------------------------------------------------------
   TerraQuest, le mur des actus et l'application AmiSphère partagent une même
   grammaire : surfaces blanches sur fond gris clair, angles arrondis (16 px),
   ombres douces, pastilles, gros boutons ronds, polices Nunito (texte) et
   Outfit (titres). 49trois avait sa propre allure — papier crème, Archivo et
   Spectral, angles vifs, registre « imprimé » — qui le tenait à l'écart.

   Cette feuille est chargée EN DERNIER et ne fait que redéfinir : les jetons
   (:root), puis les formes. Aucune règle de mandat.css ni du <style> de
   index.html n'a été touchée, et aucun nom de classe ne change : le
   JavaScript ne sait rien de tout ceci. Retirer la balise <link> rend
   l'allure d'avant.

   Ce qui est gardé : le bleu et le rouge de la République — c'est l'identité
   du jeu, pas une couleur de parti — mais on les réserve aux gestes forts
   (bouton principal, année en cours) au lieu de les mettre partout.
   ============================================================================= */

:root{
  /* Couleur de marque douce qui complète la famille — vert AmiSphère,
     vert des actus, orange Planisphère — sans en doubler aucune : un bleu
     ciel franc, et un rose framboise pour l'alerte. Le bleu et le rouge de
     la République ne survivent que dans le drapeau du haut. */
  --bleu:#0284c7; --rouge:#e11d48;
  --papier:#f1f5f9;   /* slate-100 : le fond de page de la famille   */
  --papier2:#e2e8f0;  /* slate-200 : pastilles, fonds de second rang */
  --encre:#0f172a;    /* slate-900 */
  --gris:#64748b;     /* slate-500 */
  --ligne:#e2e8f0;    /* slate-200 */
  --vert:#059669; --ambre:#d97706;
  --bleu-doux:#f0f9ff; /* sky-50, pour les fonds sélectionnés */
  --rayon:16px; --rayon-sm:12px;
  --ombre:0 1px 2px rgb(15 23 42 / .04),0 4px 16px rgb(15 23 42 / .06);
  --ombre-flottante:0 8px 30px rgb(15 23 42 / .18);
  --fam-texte:'Nunito Variable',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --fam-titre:'Outfit Variable','Nunito Variable',system-ui,sans-serif;
}

/* ── Typographie : Nunito partout, Outfit pour ce qui titre ─────────────── */
html,body,button,input,textarea,select{font-family:var(--fam-texte)}
body{font-size:15.5px;line-height:1.5}
h1,h2,.logo,.hero-t,.marque .n,.hud-year,.gj-date .m,.hud-date .mo,.power .cell .num,
.bulle .v,.gl-t b,.dp-t,.card .ttl,.et-txt .t,.pan-h h3,.halte h3,.sheet-t,.lex-item h4,
.nt-t,.pr-t,.accroche .q,.bilan-verdict,.cmp-tot{font-family:var(--fam-titre)}
/* Spectral (serif) disparaît : le corps de texte reprend la police du site */
.lead,.savais,.cand .vue,.toast,.wf-yr .yr-d,.chg-w,.sheet-p,.lex-item p,.gl-w,
.hero-l,.ligne,.accroche .q,.accroche .rep,.dep .x,.dp-x,.nt-x,.menu-list a small,
.planche-n,.bilan-verdict,.nt-t,.pr-t{font-family:inherit;font-style:normal}
h1{font-weight:800;letter-spacing:-.02em;font-size:28px}
h2{font-weight:800;letter-spacing:-.01em}
h3{letter-spacing:.04em}
.lead,.hero-l{font-size:17px;color:#334155;line-height:1.55}
.eyebrow,.hero-k,.planche-t,.bandes-t,.sec,.progress-note,.etape-t,.gl-h,.grp-h,.ap-l,.ap-qui,
.fil-t,.et-titre,.pan-k,.card .dom,.field label,.dash .hd,.power .cell .lbl,.wf-fil .cap{letter-spacing:.08em}
.ligne{font-style:italic;color:var(--bleu);font-weight:600}
.accroche .q{font-weight:700;font-style:normal}
.bilan-verdict{font-weight:600;font-size:18px;border-radius:var(--rayon);border-left-width:5px}

/* ── En-tête du site ────────────────────────────────────────────────────── */
.flag{height:4px}
.flag i:nth-child(1){background:#000091}.flag i:nth-child(3){background:#e1000f}
header.top{position:sticky;top:0;z-index:30;background:#fff;margin:0 -18px;padding:10px 18px 9px;
  border-bottom:1px solid var(--ligne);box-shadow:0 1px 0 rgb(15 23 42 / .03)}
.wrap>header.top .eyebrow{font-size:10px}
.logo{font-size:24px;font-weight:800}
.burger{right:18px;border-radius:999px;border-color:var(--ligne);background:var(--papier)}
.burger:hover{background:var(--papier2)}
body.mode-jeu header.top{display:none}

/* ── Boutons : gros, ronds, francs ──────────────────────────────────────── */
.btn{border-radius:14px;padding:14px 18px;font-weight:800;font-size:16px;min-height:52px;
  box-shadow:0 4px 14px rgb(2 132 199 / .28);transition:transform .08s,filter .15s,box-shadow .15s}
.btn:hover{background:var(--bleu);filter:brightness(1.12)}
.btn.red{box-shadow:0 4px 14px rgb(225 29 72 / .28)}.btn.red:hover{background:var(--rouge)}
.btn.ghost{box-shadow:none;border:1.5px solid var(--ligne);color:var(--bleu);background:#fff}
.btn.ghost:hover{background:var(--papier);filter:none}
.btn-xl{font-size:17px;min-height:56px}
.lex-btn,.et-retour,.consult button,.horloge button,.gj-outils button,.gj-axes button,.halte button,.sheet-x,.ev-x button{
  font-family:var(--fam-texte)}
.lex-btn{border-radius:var(--rayon-sm);background:#fff;border-color:var(--ligne)}

/* ── Cartes, pastilles, listes ──────────────────────────────────────────── */
.card,.dash,.wf-fil,.chg,.savais,.toast,.planche,.grandlivre,.accroche,.et-carte,.dp,.nt,.pr,.dep{
  border-radius:var(--rayon);border-color:var(--ligne);box-shadow:var(--ombre)}
.card{padding:16px}
.card.on{background:var(--bleu-doux);box-shadow:0 0 0 2px var(--bleu) inset,var(--ombre)}
.card .ttl{font-weight:700;font-size:16px}
.card .desc{color:#334155;font-size:14.5px}
/* la couleur de chaque candidat vient du HTML (border-left-color) : on la garde */
.cand{border-left-width:6px}
.chip,.vue-chip,.ap,.prev,.et-cpt,.wf-sub .st,.mini{border-radius:999px;font-weight:700}
.chip{background:var(--papier2);color:#334155;padding:4px 10px;font-size:12px}
.chip.cost{background:#fee2e2;color:#991b1b}.chip.appeal{background:#d1fae5;color:#065f46}
.chip.diff{background:#fef3c7;color:#92400e}
.vue-chip.pos,.ap.ok,.prev.ok,.wf-sub .st.done{background:#d1fae5;color:#065f46}
.vue-chip.neg,.ap.ko,.prev.ko{background:#fee2e2;color:#991b1b}
.vue-chip.neu{background:var(--papier2);color:#334155}
.savais{border-left-width:0;background:var(--bleu-doux);padding:14px 16px}
.savais .tag{color:var(--bleu)}
.stat-line{padding:11px 0}
.bar{height:8px}
.moe li::before,.etapes li::before{background:var(--bleu);font-weight:800}
.divider{background:var(--ligne)}
input[type=text]{border-radius:var(--rayon-sm);border-color:var(--ligne);font-size:16px;padding:13px 14px}
input[type=text]:focus{box-shadow:0 0 0 3px rgb(2 132 199 / .18)}

/* ── Repérage des phases : une barre de pastilles ───────────────────────── */
.wf-phases{gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.wf-phases::-webkit-scrollbar{display:none}
.wf-phases .ph{flex:0 0 auto;border-radius:999px;padding:7px 12px;font-size:11px;letter-spacing:.04em;
  background:#fff;border:1.5px solid var(--ligne);color:var(--gris);box-shadow:none}
.wf-phases .ph.done{background:var(--bleu);border-color:var(--bleu);color:#fff}
.wf-phases .ph.now{background:#fff;border-color:var(--bleu);color:var(--bleu);box-shadow:0 0 0 3px rgb(2 132 199 / .18)}
.wf-yr .dot{border-color:var(--ligne)}
.wf-yr.now .dot{background:var(--rouge);border-color:var(--rouge);box-shadow:0 0 0 4px rgb(225 29 72 / .16)}

/* ── HUD et tableau de bord ─────────────────────────────────────────────── */
.hud-bar{border-radius:var(--rayon);box-shadow:0 6px 20px rgb(2 132 199 / .3)}
.hud-bar.open{border-radius:var(--rayon) var(--rayon) 0 0}
.dash-detail{border-radius:0 0 var(--rayon) var(--rayon)}
.mini{background:rgba(255,255,255,.18)}
.power .cell{background:var(--papier);border-radius:var(--rayon-sm)}
.event{border-radius:var(--rayon)}

/* ── Accueil ────────────────────────────────────────────────────────────── */
.hero{padding-top:22px}
.hero-t{font-weight:800;letter-spacing:-.03em}
.hero-n{color:var(--gris)}
.gl-l b{color:#cbd5e1}
.sec{border-bottom-color:var(--encre)}
.accroche{border-left-width:0;padding:18px}
.accroche .go{color:var(--bleu)}
.pied{border-top-color:var(--ligne)}
.pied a{border-bottom:none}.pied a:hover{color:var(--bleu)}

/* ── Feuilles et fenêtres ───────────────────────────────────────────────── */
.sheet{background:#fff;border-radius:24px 24px 0 0;padding:14px 20px calc(24px + env(safe-area-inset-bottom));
  box-shadow:var(--ombre-flottante)}
.sheet::before{content:'';display:block;width:44px;height:5px;border-radius:999px;background:#cbd5e1;margin:0 auto 12px}
.sheet-x{width:36px;height:36px;border-radius:999px;background:var(--papier);display:inline-flex;
  align-items:center;justify-content:center;font-size:17px}
.sheet-t{color:var(--encre)}
.menu-list a{padding:14px 2px}
.menu-list a b{font-family:var(--fam-titre);font-weight:700}
.ev-boite,body.mode-jeu.app-modale #app{background:#fff;border-radius:24px;box-shadow:0 30px 80px rgb(15 23 42 / .35)}
.ev-x{background:linear-gradient(#fff 70%,transparent)}
.ev-x button{width:34px;height:34px;border-radius:999px;background:var(--papier)}
.ev-ov,body.mode-jeu.app-modale .wrap,.tr-ov{background:rgb(15 23 42 / .5)}

/* ── Les messages qui tombent : dépêche, note, SMS, presse ──────────────── */
.dp{border-left:5px solid var(--rouge)}
.dp-h{font-family:var(--fam-texte);border-bottom-style:solid}
.dp-t{text-transform:none;font-weight:800;letter-spacing:-.01em;font-size:18px}
.nt{background:#fff;box-shadow:var(--ombre)}
.nt-h{border-bottom-width:1.5px}
.pr{border-top:5px solid var(--encre)}
.pr-t{font-weight:700}
.sm .bl{background:var(--bleu-doux);border-radius:18px 18px 18px 6px}
.dep{border-left-width:4px;border-radius:0 var(--rayon-sm) var(--rayon-sm) 0;background:#fff}
.dep.signal{background:#fffbeb}

/* ── Panneaux d'événement ───────────────────────────────────────────────── */
.panneau{border-radius:20px;box-shadow:var(--ombre-flottante)}
.pan-crise,.pan-occasion,.pan-chantier,.pan-consult{border:none}
.pan-h{padding:16px 18px 14px}
.et-carte{border-radius:var(--rayon)}
.et-ic{border-radius:var(--rayon-sm);background:var(--bleu-doux)}
.et-cpt{background:var(--bleu-doux);color:var(--bleu)}
.consult button{border-radius:999px;font-weight:800;padding:10px 12px}
.consult button:hover{background:var(--papier)}
.chaine .lg.tot{border-top-color:var(--encre)}

/* ── La planche d'atlas et le cadre de jeu ──────────────────────────────── */
.planche{border-radius:var(--rayon)}
.axe{border-radius:999px;font-family:var(--fam-texte);background:#fff;border:1.5px solid var(--ligne)}
.axe[aria-pressed="true"]{background:var(--bleu-doux)}
.halte{border-radius:var(--rayon)}
.halte button{border-radius:14px;font-weight:800}
.cadre{background:var(--papier)}
.gj-haut{box-shadow:0 4px 18px rgb(2 132 199 / .3)}
.gj-j .m{background:rgba(255,255,255,.18);font-weight:700}
.gj-scene svg.fr path.reg{stroke:#fff}
.gj-leg{background:#fff}
.gj-plumes{background:#fff}
.gj-bas{box-shadow:0 -6px 22px rgb(15 23 42 / .08)}
.gj-axes button{border-radius:var(--rayon-sm)}
.gj-axes button[aria-pressed="true"]{background:var(--papier);border-color:transparent;box-shadow:0 0 0 2px currentColor inset}
.gj-outils button{width:44px;height:44px;border-radius:999px;background:#fff;border-color:var(--ligne);
  box-shadow:var(--ombre)}
.gj-outils button:hover{background:var(--papier)}
.gj-outils button[aria-pressed="true"]{box-shadow:0 4px 14px rgb(2 132 199 / .35)}
.horloge button{border-radius:999px;font-family:var(--fam-texte)}
.gj-flash .dp,.gj-flash .nt,.gj-flash .pr,.gj-flash .sm .bl{box-shadow:var(--ombre-flottante)}
.bulle{border-radius:var(--rayon-sm)}
.tr-ov .etq{font-family:var(--fam-texte);font-weight:700}

/* ── Zones tactiles : rien sous 44 px ───────────────────────────────────── */
.lex-btn,.consult button,.horloge button,.et-retour{min-height:44px}
.sheet-x,.ev-x button{min-width:36px}
a:focus-visible,button:focus-visible,.card:focus-visible{outline:3px solid rgb(2 132 199 / .4);outline-offset:2px}

/* ── Sur téléphone, toute fenêtre devient une feuille qui monte du bas ──── */
@media (max-width:640px){
  .ev-ov,body.mode-jeu.app-modale .wrap{align-items:flex-end;padding:0}
  .ev-boite,body.mode-jeu.app-modale #app{max-width:none;max-height:92dvh;border-radius:24px 24px 0 0;
    padding-bottom:calc(16px + env(safe-area-inset-bottom));animation:shin .26s cubic-bezier(.2,.8,.2,1)}
  .ev-boite::before,body.mode-jeu.app-modale #app::before{content:'';display:block;width:44px;height:5px;
    border-radius:999px;background:#cbd5e1;margin:10px auto 0}
  .ev-x{padding-top:0;margin-top:-30px}
  /* les cinq phases tiennent sur une ligne */
  .wf-phases{gap:4px}
  .wf-phases .ph{padding:6px 8px;font-size:10px;letter-spacing:.02em}
}

/* ── Pages du site (pages.css) : même famille ───────────────────────────── */
body{font-size:16px}
.marque .n{font-weight:800}
.marque .k,.chapeau .rub,.somm b,.note .tag,.pied-p,.muted,.somm,.bornes .b,.qr .q,.cta{font-family:var(--fam-texte)}
.chapeau .rub{letter-spacing:.14em}
.lede{font-size:18px;color:#334155}
.chapeau h1{font-weight:800;letter-spacing:-.03em}
h2{border-top-color:var(--ligne)}
.retour{border-radius:999px}
.somm,.bornes{border-radius:var(--rayon);box-shadow:var(--ombre)}
.note{border-left-width:0;border-radius:var(--rayon);background:var(--bleu-doux);box-shadow:none}
.note.avert{background:#fffbeb}
.exergue{border-color:var(--ligne);font-weight:600}
.qr:first-of-type{border-top-color:var(--ligne)}
.cta{border-radius:14px;font-weight:800;min-height:52px;box-shadow:0 4px 14px rgb(2 132 199 / .28)}
.cta:hover{background:var(--bleu);filter:brightness(1.12)}
.pied-p{border-top-color:var(--ligne)}
.pied-p .liens a{border-bottom:none}

/* ── Pastilles d'axe en tête de la trajectoire ──────────────────────────── */
.traj-axes{margin:0 0 12px}
.traj-axes .axe{min-height:36px}
/* les derniers tons crème codés en dur dans mandat.css */
.traj-futur{fill:var(--papier)}
.gj-plumes[role="button"]:hover{background:var(--papier)}
.card.selectable:active{background:var(--bleu-doux)}
.prov .avert{background:#fef3c7;color:#92400e}