/* GrepoNice v2 — nuit egeenne : bleu profond, or, accents sarcelle et rouge.
   Mobile d'abord ; la disposition a deux colonnes arrive a partir de 900 px. */

:root {
  --fond: #0b1220; --panneau: #121a2b; --creux: #0e1626; --trait: #26324a;
  --or: #e9c46a; --texte: #e6e1d3; --discret: #8b95a7;
  --vert: #2ec4b6; --rouge: #e63946; --orange: #f4a261; --violet: #bc8cff;
  --titre: "Palatino Linotype", "Book Antiqua", Palatino, Georgia, serif;
  --nav-h: 62px;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--fond); color: var(--texte); font: 15px/1.5 system-ui, "Segoe UI", Roboto, sans-serif;
       min-height: 100vh; min-height: 100dvh; }
body.fenetre-ouverte { overflow: hidden; }
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: not-allowed; }
h1, h2, h3 { font-family: var(--titre); color: var(--or); margin: 0 0 6px; line-height: 1.2; }
h1 { font-size: clamp(2rem, 7vw, 3.2rem); }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.02rem; margin-top: 16px; }
p { margin: 0 0 10px; }
.discret { color: var(--discret); font-size: .88rem; }
.raison { color: var(--orange); font-size: .88rem; margin: 8px 0 0; }
.alerte-texte { color: var(--orange); }

#app { display: flex; flex-direction: column; min-height: 100dvh; padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); }

/* ── Barre haute ── */
#barre { position: sticky; top: 0; z-index: 50; background: #0e1626f2; border-bottom: 1px solid var(--trait);
         backdrop-filter: blur(6px); display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
         padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top)); }
.menu-bouton { background: var(--panneau); border: 1px solid var(--trait); border-radius: 8px; width: 40px; height: 36px; }
.cite-nom { font-family: var(--titre); color: var(--or); font-size: 1.1rem; line-height: 1.05; }
.cite-nom small { display: block; font: .68rem system-ui; color: var(--discret); letter-spacing: .04em; text-transform: uppercase; }
.jauges { display: flex; flex-wrap: wrap; gap: 5px; flex: 1 1 auto; }
.jauge { background: var(--panneau); border: 1px solid var(--trait); border-radius: 999px; padding: 2px 9px;
         white-space: nowrap; font-variant-numeric: tabular-nums; font-size: .9rem; }
.jauge b { font-weight: 600; }
.jauge b.plein { color: var(--orange); }
.jauge small { color: var(--vert); margin-left: 5px; display: none; }
.temps { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.temps .jour { color: var(--discret); margin-right: 6px; white-space: nowrap; font-size: .85rem; display: none; }
.temps button { background: var(--panneau); border: 1px solid var(--trait); border-radius: 8px; min-width: 42px; height: 36px; }
.temps button.actif { background: var(--or); color: #1a1405; border-color: var(--or); font-weight: 700; }
.temps button[data-action="pleinEcran"] { margin-left: 6px; font-size: 1.1rem; }

/* ── Navigation : en bas sur telephone, en onglets sous la barre sur grand ecran ── */
#nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
       background: #0e1626f7; border-top: 1px solid var(--trait); padding-bottom: env(safe-area-inset-bottom); }
#nav button { background: none; border: 0; color: var(--discret); font-size: .72rem; padding: 7px 0 5px; min-height: var(--nav-h); }
#nav button span { display: block; font-size: 1.35rem; line-height: 1.2; }
#nav button.actif { color: var(--or); }

/* ── Bandeau : alertes et objectif ── */
#bandeau { display: flex; flex-direction: column; gap: 1px; }
#bandeau button { border: 0; text-align: left; padding: 8px 12px; width: 100%; font-size: .9rem; }
.objectif { background: #15203a; color: var(--texte); border-bottom: 1px solid var(--trait) !important; }
.objectif strong { color: var(--or); }
.objectif span { color: var(--discret); }
.alerte-raid { background: #5a1620; color: #ffd9dc; animation: pouls 1.6s ease-in-out infinite; }
.alerte-pause { background: #3a2f12; color: var(--or); }
.alerte-conflit { background: #14304a; color: #cfe6ff; padding: 8px 12px; font-size: .9rem; display: flex; flex-wrap: wrap; gap: 6px 12px;
                  align-items: center; justify-content: center; }
.alerte-conflit span { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#bandeau .alerte-conflit button { width: auto; background: #0e1626; border: 1px solid #3d6a94; border-radius: 8px; padding: 6px 10px; color: inherit; }
@keyframes pouls { 50% { background: #7a1c2a; } }

/* ── Ecrans ── */
#ecran { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 10px; width: 100%; max-width: 1500px; margin: 0 auto;
         align-content: start; }
.zone { min-width: 0; overflow-x: auto; scrollbar-width: thin; border-radius: 14px; }
.cadre { container-type: inline-size; }
.fiche, .panneau { background: var(--panneau); border: 1px solid var(--trait); border-radius: 14px; padding: 16px; min-width: 0; }
.panneau.vide { text-align: center; padding: 40px 20px; }
.colonne { min-width: 0; }
.colonne.large { max-width: 860px; width: 100%; margin: 0 auto; }
.ligne { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; border-bottom: 1px solid #1c2740; }
.ligne.total { border-bottom: 0; }
.ligne > :last-child { text-align: right; }

/* Plan de la cite : le sol illustre (`.terrain`, aux proportions de son image) et, posee sur chaque terrasse, la tuile du
   batiment. --x / --y = centre de la terrasse en % du sol ; --l = largeur d'une tuile (celle d'une terrasse) ; le centre
   de la face superieure d'une tuile est a 0.35 x --l au-dessus du bas de son image. Le SOCLE de terre des tuiles est masque
   (clip-path : tout ce qui est sous les deux aretes avant du losange) : le batiment repose a plat sur sa terrasse, au lieu
   d'avoir l'air d'une boite posee dessus. Le haut du plateau reste libre : le Temple y depasse du sol. */
.plateau { --l: 14cqw; position: relative; width: 100%; padding-top: calc(var(--l) * 0.5); isolation: isolate;
           overflow-x: clip; } /* rien ne deborde sur les cotes : l'ombre d'un nuage qui derive elargissait la zone a faire defiler, sans fin */ /* isolation : les z-index des tuiles ne sortent pas du plateau */
.terrain { position: relative; width: 100%; aspect-ratio: var(--format, 2); }
.sol { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 14px; pointer-events: none;
       -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%); }
.tuile { position: absolute; width: var(--l); padding: 0; border: 0; background: none;
         left: calc(var(--x) - var(--l) / 2); top: calc(var(--y) + var(--l) * var(--s, .35));
         transform: translateY(-100%); z-index: var(--z); transition: transform .15s ease, filter .15s ease; }
.tuile img, .tuile svg { display: block; width: 100%; height: auto; pointer-events: none;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--l) * var(--d, .35)), 50% calc(100% - var(--l) * var(--b, .10)), 0 calc(100% - var(--l) * var(--g, .35))); }
/* L'ombre de contact : le batiment pese sur sa terrasse (l'ancienne ombre portee partait avec le socle). */
.tuile::before { content: ""; position: absolute; left: 4%; right: 4%; bottom: calc(var(--l) * var(--b, .10)); height: calc(var(--l) * .5); z-index: -1;
  background: radial-gradient(ellipse at 50% 50%, #0007 0, #0003 45%, transparent 70%); pointer-events: none; }
.tuile:hover, .tuile:focus-visible { transform: translateY(calc(-100% - var(--l) * 0.03)); outline: none; filter: brightness(1.12); }
.tuile.choisie { filter: brightness(1.15) drop-shadow(0 0 10px #e9c46a99); }
/* Un batiment pas encore construit n'est plus montre en gris (on croyait le voir deja la) : ses ruines s'il en a, sinon rien. */
.tuile.endommagee img, .tuile.endommagee svg { filter: grayscale(.8) brightness(.6) drop-shadow(0 0 8px #e6394688); }
.tuile.en-chantier img, .tuile.en-chantier svg { animation: chantier 1.4s ease-in-out infinite; }
@keyframes chantier { 50% { filter: brightness(1.25); } }
.etiquette { position: absolute; left: var(--x); top: calc(var(--y) + var(--l) * 0.26); transform: translate(-50%, 0); z-index: 120;
             background: #0b1220e6; border: 1px solid var(--trait); border-radius: 999px; padding: 1px 8px;
             font-size: clamp(10px, calc(var(--l) * 0.055), 13px); white-space: nowrap; pointer-events: none; }
.etiquette.verrou { opacity: .55; }
.etiquette b { color: var(--or); }
.etiquette .dispo { color: var(--vert); }
.etiquette .chrono { color: var(--orange); }

/* Fiche */
.niveau-points { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.niveau-points i { width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--or); }
.niveau-points i.plein { background: var(--or); }
.niveau-points span { color: var(--discret); margin-left: 6px; font-size: .88rem; }
.vignette { background: radial-gradient(circle at 50% 70%, #1d2b47, var(--creux)); border-radius: 10px; display: grid; place-items: center;
            padding: 10px; min-height: 130px; margin-bottom: 12px; }
.vignette img { max-width: 100%; max-height: 180px; }
.grand-emoji { font-size: 60px; }
.action { display: block; width: 100%; border: 0; border-radius: 10px; background: var(--or); color: #1a1405; font-weight: 600;
          padding: 12px; min-height: 48px; margin-top: 12px; }
.action small { display: block; font-weight: 400; opacity: .75; }
.action:disabled { background: #3a4258; color: #8b95a7; }
.action.secondaire { background: transparent; color: var(--or); border: 1px solid var(--or); }
.action.danger { background: var(--rouge); color: #fff; }
.action.danger:disabled { background: #3a4258; color: #8b95a7; }
.lien { background: none; border: 0; color: var(--discret); text-decoration: underline; margin-top: 12px; }
.couts { display: flex; justify-content: center; flex-wrap: wrap; gap: 4px 12px; color: var(--discret); margin-top: 8px; font-variant-numeric: tabular-nums; }
.prix.manque { color: var(--rouge); }
.gain { color: var(--vert); white-space: nowrap; }
.troupe { white-space: nowrap; margin-left: 6px; }
.barre { height: 8px; background: var(--creux); border-radius: 999px; overflow: hidden; margin: 6px 0; }
.barre > div { height: 100%; width: 0; background: var(--or); border-radius: 999px; }
.barre.rouge > div { background: var(--rouge); }
.chantier { margin-top: 12px; }

/* Carte */
.cadre-carte { --format: 1.333; width: calc(max(100%, 680px) * var(--zoom, 1)); }
.carte { position: relative; aspect-ratio: var(--format); border-radius: 14px; overflow: hidden; border: 1px solid var(--trait); }
.fond-carte { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.noeud { position: absolute; transform: translate(-50%, -50%); background: none; border: 0; padding: 0; z-index: 3;
         display: flex; flex-direction: column; align-items: center; gap: 2px; }
.noeud .pastille { position: relative; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; font-size: 20px;
                   background: #0e1626e6; border: 2px solid var(--discret); box-shadow: 0 2px 8px #000a; }
.noeud .nom { font-size: .74rem; background: #0b1220d9; border-radius: 999px; padding: 0 7px; white-space: nowrap; }
.noeud.joueur .pastille { border-color: var(--or); width: 50px; height: 50px; font-size: 24px; }
.noeud.village .pastille { border-color: var(--vert); }
.noeud.village.neutre .pastille { border-color: var(--discret); opacity: .7; }
.noeud.repaire .pastille { border-color: var(--rouge); }
.noeud.rivale .pastille { border-color: var(--violet); }
.noeud.sanctuaire .pastille { border-color: #58a6ff; }
.noeud.verrou { opacity: .55; }
.noeud.vaincu .pastille { border-color: var(--discret); }
.noeud.choisi .pastille { box-shadow: 0 0 0 4px #e9c46a66, 0 2px 8px #000a; }
.signal { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; border-radius: 999px; font-size: 11px; font-weight: 700;
          display: grid; place-items: center; color: #08111f; }
.signal.pret { background: var(--vert); animation: sautille 1s ease-in-out infinite; }
.signal.cible { background: var(--rouge); color: #fff; }
@keyframes sautille { 50% { transform: translateY(-3px); } }
.trajet { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.trajet line, .trajet polyline { fill: none; stroke: var(--or); stroke-width: 2; stroke-dasharray: 6 5; vector-effect: non-scaling-stroke; opacity: .8; }
.trajet.ennemi line, .trajet.ennemi polyline { stroke: var(--rouge); }
.titre-flotte { margin-top: 22px; }
.marqueur { position: absolute; transform: translate(-50%, -50%); z-index: 4; font-size: 22px; filter: drop-shadow(0 2px 3px #000); pointer-events: none; }
.marqueur.ennemi { animation: sautille 1s ease-in-out infinite; }
.prevision { border-left: 4px solid var(--discret); background: var(--creux); border-radius: 0 8px 8px 0; padding: 8px 10px; margin: 12px 0; }
.prevision.bien { border-color: var(--vert); } .prevision.bien strong { color: var(--vert); }
.prevision.moyen { border-color: var(--orange); } .prevision.moyen strong { color: var(--orange); }
.prevision.mal { border-color: var(--rouge); } .prevision.mal strong { color: var(--rouge); }
.prevision.inconnu { border-color: var(--discret); border-left-style: dashed; } .prevision.inconnu strong { color: var(--discret); } /* v0.27.2 : sans eclaireurs, on ne sait pas */
.prevision ul { margin: 6px 0 0; padding-left: 18px; color: var(--discret); font-size: .88rem; }
.enceintes { display: inline-flex; gap: 5px; }
.enceintes i { width: 16px; height: 16px; border-radius: 4px; border: 2px solid var(--discret); opacity: .5; }
.enceintes i.debout { background: var(--rouge); border-color: var(--rouge); opacity: 1; }
.ligne-envoi { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 6px; padding: 6px 0; border-bottom: 1px solid #1c2740; }
.pas-a-pas { display: inline-flex; align-items: center; gap: 3px; }
.pas-a-pas button { background: var(--creux); border: 1px solid var(--trait); border-radius: 7px; min-width: 36px; height: 36px; padding: 0 6px; }
.pas-a-pas output { min-width: 32px; text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Armee */
.unites { display: grid; gap: 12px; }
.unite { display: flex; gap: 12px; background: var(--creux); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; }
.unite.verrou { opacity: .6; }
.unite .corps { flex: 1; min-width: 0; }
.unite h3 { margin: 0; display: flex; justify-content: space-between; gap: 8px; }
.effectif { color: var(--texte); font-family: system-ui; font-weight: 700; }
.effectif small { color: var(--discret); font-weight: 400; }
.img-unite { width: 72px; height: 72px; border-radius: 10px; object-fit: cover; flex: none; }
.img-unite.repli { display: grid; place-items: center; font-size: 36px; background: #15203a; }
.stats { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 0; font-variant-numeric: tabular-nums; }
.contre { color: var(--vert); font-size: .85rem; }
.recruter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.recruter .action { width: auto; flex: 1; margin-top: 0; min-width: 120px; }
.unite .couts { justify-content: flex-start; }
.licencier { margin-top: 8px; font-size: .82rem; padding: 4px 0; }
.licencier.arme { color: var(--rouge); font-weight: 600; text-decoration: none; }
.ordre { padding: 8px 0; border-bottom: 1px solid #1c2740; }

/* Savoir */
.rang { margin-top: 18px; }
.rang.ferme { opacity: .6; }
.savoirs { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.savoir { background: var(--creux); border: 1px solid var(--trait); border-radius: 12px; padding: 12px; display: flex; flex-direction: column; }
.savoir h3 { margin-top: 0; }
.savoir p { flex: 1; }
.savoir .action { margin-top: 4px; }
.savoir.acquise { border-color: #2a6a5f; }
.savoir.en-cours { border-color: var(--or); }
.savoir.fermee { opacity: .55; }
.acquis { color: var(--vert); font-weight: 600; }

/* Journal */
.onglets { display: flex; gap: 6px; margin-bottom: 10px; }
.onglets button { flex: 1; background: var(--panneau); border: 1px solid var(--trait); border-radius: 10px; padding: 10px; min-height: 44px; color: var(--discret); }
.onglets button.actif { color: var(--or); border-color: var(--or); }
.quete { display: flex; gap: 12px; background: var(--creux); border-radius: 12px; padding: 12px; }
.quete h3 { margin-top: 0; }
.parole { font-style: italic; }
.parole strong { font-style: normal; }
.astuce { color: var(--vert); font-size: .9rem; }
.objectifs { list-style: none; padding: 0; margin: 8px 0; }
.objectifs li.fait { color: var(--discret); text-decoration: line-through; }
.liste-simple { list-style: none; padding: 0; margin: 0; color: var(--discret); }
.liste-simple li { padding: 3px 0; }
.chronique { list-style: none; padding: 0; margin: 0; }
.chronique li { padding: 5px 0; border-bottom: 1px solid #1c2740; }
.ligne-rapport { display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; background: var(--creux);
                 border: 1px solid var(--trait); border-left-width: 4px; border-radius: 8px; padding: 10px; margin-bottom: 6px; min-height: 44px; }
.ligne-rapport.bien { border-left-color: var(--vert); } .ligne-rapport.mal { border-left-color: var(--rouge); }

/* Portraits */
.portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 20%; flex: none; border: 2px solid var(--trait); }
.dieu-portrait { border-color: var(--teinte); }
.portrait.repli { display: grid; place-items: center; font-size: 28px; border-color: var(--teinte);
                  background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 30%, #0e1626), #0e1626); }
.portrait.grand { width: 104px; height: 138px; border-radius: 12px; }
.portrait.grand.repli { font-size: 52px; }

/* Icones illustrees : toujours a la taille du texte qui les entoure */
.icone { height: 1.2em; width: auto; vertical-align: -0.22em; pointer-events: none; }
h2 .icone { height: 1.3em; }
#nav button span .icone { height: 1.75rem; vertical-align: middle; }
.noeud .pastille .icone { height: 28px; vertical-align: middle; }
.noeud.joueur .pastille .icone { height: 34px; }
.marqueur .icone { height: 30px; }
.img-unite.repli .icone { height: 52px; }
.etiquette .icone { height: 1.1em; }
button.jauge { color: inherit; font: inherit; font-size: .9rem; }
.jauge.faveur { border-color: #6b5a2a; }

/* Temple */
.dieu { border-color: color-mix(in srgb, var(--teinte) 45%, var(--trait)); }
.dieu > h3 { margin-top: 20px; }
.dieu-entete { display: flex; gap: 14px; align-items: center; margin-bottom: 14px; }
.dieu-entete h2 { color: var(--teinte); font-size: 1.6rem; }
.dieu-embleme { width: 84px; height: 84px; flex: none; display: grid; place-items: center; font-size: 44px; border-radius: 50%;
                border: 2px solid var(--teinte); background: radial-gradient(circle, color-mix(in srgb, var(--teinte) 28%, #0e1626), #0e1626); }
.dieu-embleme .icone { height: 58px; }
div.faveur { background: var(--creux); border-radius: 10px; padding: 8px 12px 4px; } /* div : la jauge de faveur de la barre du haut (un bouton) prenait ce cadre (v0.34) */
div.faveur small { margin-left: 6px; }
.pouvoir h3 { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.pouvoir .prix { font: .9rem system-ui; color: var(--or); white-space: nowrap; }

/* Marche de l'Agora */
.choix-ressource button { min-width: 52px; font-size: 1.15rem; }
.choix-ressource button.actif { border-color: var(--or); background: #2a2410; }
.marche .action { margin: 10px 0 4px; }

/* ── Fenetres ── */
/* v0.27.1 : en colonne flex avec des marges automatiques — centre quand la fenetre tient, collee en haut quand elle
   deborde (une grille `place-items: center` coupait le HAUT de l'ecran-titre, impossible a faire defiler). */
#modale { position: fixed; inset: 0; z-index: 100; background: #050910e0; overflow-y: auto; display: flex; flex-direction: column; align-items: center;
          padding: 14px; padding-top: calc(14px + env(safe-area-inset-top)); }
#modale > * { margin: auto 0; flex: none; }
.fenetre { width: 100%; max-width: 640px; background: var(--panneau); border: 1px solid var(--trait); border-radius: 16px; padding: 20px;
           box-shadow: 0 20px 60px #000c; animation: apparition .25s ease; }
@keyframes apparition { from { opacity: 0; transform: translateY(12px); } }
.fenetre > img.scene { width: calc(100% + 40px); margin: -20px -20px 16px; border-radius: 16px 16px 0 0; aspect-ratio: 16 / 9; object-fit: cover; }
.recit-corps { display: flex; gap: 16px; }
.recit-corps p { font-size: 1.02rem; line-height: 1.6; }
.qui { font-weight: 600; margin-bottom: 8px; }
.choix-liste, .difficultes { display: grid; gap: 8px; margin-top: 14px; }
.choix { display: flex; flex-direction: column; gap: 6px; text-align: left; background: var(--creux); border: 1px solid var(--trait);
         border-radius: 10px; padding: 12px 14px; min-height: 48px; transition: border-color .15s; }
.choix:hover:not(:disabled) { border-color: var(--or); }
.choix:disabled { opacity: .5; }
.pastilles { display: flex; flex-wrap: wrap; gap: 5px; }
.pastille { font-size: .8rem; border-radius: 999px; padding: 1px 9px; background: #1c2740; color: var(--discret); }
.pastille.gain { color: var(--vert); } .pastille.cout { color: var(--orange); }

.fenetre.titre { text-align: center; max-width: 520px; }
.fenetre.epilogue { max-width: 720px; }
.fenetre.epilogue h1, .fenetre.epilogue .surtitre, .fenetre.epilogue .accroche { text-align: center; }
.fenetre.epilogue .accroche { margin-bottom: 18px; }
.fenetre.epilogue > p { font-size: 1.02rem; line-height: 1.65; }
.surtitre { color: var(--discret); letter-spacing: .25em; text-transform: uppercase; font-size: .72rem; margin-bottom: 6px; }
.fenetre.titre h1 { text-shadow: 0 0 40px #e9c46a55; }
.accroche { color: var(--discret); font-style: italic; }
.credits { color: var(--discret); font-size: .78rem; margin: 18px 0 0; }
details { margin-top: 12px; text-align: left; }
summary { cursor: pointer; color: var(--discret); padding: 8px 0; }
.sauvegarde { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #1c2740; text-align: left; }
.boutons { display: flex; gap: 6px; flex: none; }
.boutons.large { margin-top: 10px; } .boutons.large button { flex: 1; }
.boutons button { background: var(--creux); border: 1px solid var(--trait); border-radius: 8px; padding: 8px 12px; min-height: 40px; }
.boutons button:disabled { opacity: .4; }
.option { display: flex; align-items: center; gap: 10px; padding: 8px 0; min-height: 44px; }
.option input { width: 20px; height: 20px; accent-color: var(--or); }

.bandeau-rapport { text-align: center; font-family: var(--titre); font-size: 1.5rem; margin: -20px -20px 14px; padding: 12px; border-radius: 16px 16px 0 0; }
.rapport.victoire .bandeau-rapport { background: linear-gradient(#1d4d3f, transparent); color: var(--vert); }
.rapport.defaite .bandeau-rapport { background: linear-gradient(#5a1620, transparent); color: #ff8a93; }
.rapport h2 { text-align: center; }
.camps { display: grid; gap: 12px; margin: 14px 0; }
.camps .camp { background: var(--creux); border-radius: 10px; padding: 12px; } /* .camps : le feu de camp d'un incident (.foyer.camp) en prenait le cadre (v0.34) */
.camp h3 { margin-top: 0; }
.titre-phase { text-align: center; margin: 14px 0 -6px; }
.camp .troupe:first-child { margin-left: 0; }
.pertes { color: var(--orange); margin: 4px 0 8px; font-size: .92rem; }
.chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin: 16px 0; }
.chiffres div { background: var(--creux); border-radius: 10px; padding: 10px 4px; }
.chiffres strong { display: block; font-size: 1.4rem; color: var(--or); font-family: var(--titre); }
.chiffres span { color: var(--discret); font-size: .78rem; }


/* ── Notifications ── */
#toasts { position: fixed; z-index: 120; right: 10px; left: 10px; bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom));
          display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.toast { background: #15203af5; border: 1px solid var(--trait); border-left: 4px solid var(--discret); border-radius: 10px; padding: 8px 14px;
         max-width: 440px; box-shadow: 0 6px 20px #000a; animation: apparition .25s ease; transition: opacity .4s, transform .4s; }
.toast.sortie { opacity: 0; transform: translateY(8px); }
.toast.bien { border-left-color: var(--vert); } .toast.or { border-left-color: var(--or); } .toast.alerte { border-left-color: var(--rouge); }

/* ── Tablette en paysage et ordinateur ── */
@media (min-width: 900px) {
  .rappel { left: auto; right: -9px; top: -3px; } /* onglets en ligne : la pastille colle a l'icone */
  #app { padding-bottom: 0; }
  #barre { padding: 8px 16px; gap: 6px 14px; order: 0; }
  .jauge small, .temps .jour { display: inline; }
  #nav { position: static; order: 1; display: flex; justify-content: center; gap: 4px; background: var(--creux); border-top: 0;
         border-bottom: 1px solid var(--trait); padding: 0 16px; }
  #nav button { min-height: 44px; padding: 8px 22px; font-size: .95rem; border-bottom: 2px solid transparent; }
  #nav button span { display: inline; font-size: 1rem; margin-right: 6px; }
  #nav button span .icone { height: 1.35rem; }
  #nav button.actif { border-bottom-color: var(--or); }
  #bandeau { order: 2; }
  #ecran { order: 3; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; padding: 16px; }
  #ecran.ecran-journal { grid-template-columns: minmax(0, 1fr); }
  .fiche { position: sticky; top: 64px; align-self: start; max-height: calc(100dvh - 80px); overflow-y: auto; }
  .camps { grid-template-columns: 1fr 1fr; }
  /* La carte tient dans la hauteur de l'ecran : on la voit en entier, sans faire defiler la page. */
  .cadre-carte { width: calc(min(100%, max(680px, calc((100dvh - 255px) * var(--format)))) * var(--zoom, 1)); margin: 0 auto; }
  .unites { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
  #toasts { left: auto; right: 16px; bottom: 16px; align-items: flex-end; }
  #bandeau button { text-align: center; }
}
@media (max-width: 520px) {
  .recit-corps { flex-direction: column; align-items: center; }
  .recit-corps > div { width: 100%; }
  .portrait.grand { width: 84px; height: 84px; border-radius: 50%; }
  .portrait.grand.repli { font-size: 40px; }
  .cite-nom small { display: none; }
  /* Barre du haut compacte : menu, nom et vitesses sur UNE ligne ; les jauges sur la suivante, sans jamais passer a la ligne. */
  #barre { gap: 4px 6px; padding: 4px 8px; padding-top: calc(4px + env(safe-area-inset-top)); }
  .menu-bouton { width: 34px; height: 32px; }
  .cite-nom { font-size: 1rem; }
  .temps { order: 2; gap: 3px; }
  .temps button { min-width: 0; width: 34px; height: 32px; padding: 0; font-size: .85rem; }
  .temps button[data-action="pleinEcran"] { margin-left: 2px; font-size: 1rem; }
  .jauges { order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 3px; overflow-x: auto; scrollbar-width: none; }
  .jauges::-webkit-scrollbar { display: none; }
  .jauge { padding: 1px 5px; font-size: .8rem; flex: 1 1 auto; text-align: center; }
  .jauge .icone { height: 1.15em; }
}
@media (max-width: 360px) {
  .temps button { width: 30px; }
  .jauge { padding: 1px 5px; font-size: .78rem; }
}
/* Zoom (ui/zoom.js) : on elargit le cadre, tout suit. Les deux boutons restent en place pendant qu'on fait defiler. */
.cadre { width: calc(max(100%, 720px) * var(--zoom, 1)); }
.zone { touch-action: pan-x pan-y; isolation: isolate; } /* isolation : rien du plan ne passe devant une fenetre */
.zoom { position: sticky; left: 8px; top: 0; z-index: 5; height: 0; width: max-content; display: flex; gap: 4px; transform: translateY(8px); }
.zoom button { width: 34px; height: 34px; border-radius: 8px; background: #0b1220cc; border: 1px solid var(--trait); font-size: 1.1rem; line-height: 1; backdrop-filter: blur(4px); }
#nav button span { position: relative; }
.rappel { position: absolute; top: 0; left: calc(50% + 9px); width: 9px; height: 9px; border-radius: 50%; background: var(--vert); box-shadow: 0 0 0 2px #0e1626; }
.rappel.danger { background: var(--rouge); animation: pouls-rappel 1s ease-in-out infinite; }
@keyframes pouls-rappel { 50% { transform: scale(1.35); } }
.poignee { display: none; }

/* Telephone et tablette debout : la fiche devient un tiroir, replie au bas de l'ecran, qui s'ouvre quand on choisit
   un batiment ou un lieu (ou en tirant la poignee). Le plan garde tout l'ecran. */
@media (max-width: 899px) {
  .ecran-cite, .ecran-carte { padding-bottom: 76px; }
  .ecran-cite .fiche, .ecran-carte .fiche { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom)); z-index: 55;
    max-height: 66dvh; overflow-y: auto; overscroll-behavior: contain; border-radius: 16px 16px 0 0; border-bottom: 0; padding-top: 0;
    box-shadow: 0 -10px 28px #000b; transform: translateY(calc(100% - 62px)); transition: transform .25s ease; }
  .ecran-cite .fiche.ouvert, .ecran-carte .fiche.ouvert { transform: none; }
  .ecran-cite .fiche:not(.ouvert), .ecran-carte .fiche:not(.ouvert) { overflow: hidden; }
  .poignee { display: block; position: sticky; top: 0; z-index: 2; width: 100%; height: 22px; border: 0; background: inherit; background-image: inherit; padding: 0; }
  .poignee span { display: block; width: 44px; height: 4px; border-radius: 2px; background: var(--discret); margin: 9px auto 0; opacity: .7; }
  .fiche > h2 { margin-top: 0; }
  #toasts { bottom: calc(var(--nav-h) + 74px); }
}

/* v0.9 : decrets de l'Agora, tactiques d'assaut, tout collecter. */
.decret { background: var(--creux); border: 1px solid var(--trait); border-radius: 10px; padding: 10px 12px; margin: 8px 0; }
.decret.actif { border-color: var(--or); box-shadow: 0 0 0 1px #e9c46a44 inset; }
.decret-titre { display: flex; align-items: center; gap: 8px; }
.decret-titre .icone { height: 26px; }
.decret p { margin: 4px 0 6px; font-size: .88rem; }
.decret .action { margin-top: 8px; min-height: 40px; padding: 8px; }
.pastille.gain { color: var(--vert); }
.tactiques { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0 6px; }
.tactiques button { display: flex; flex-direction: column; align-items: center; gap: 3px; background: var(--creux); border: 1px solid var(--trait);
                    border-radius: 10px; padding: 8px 4px; font-size: .78rem; line-height: 1.15; min-height: 62px; }
.tactiques button .icone { height: 26px; }
.tactiques button.actif { border-color: var(--or); color: var(--or); background: #e9c46a14; }
.tout-collecter { position: absolute; z-index: 6; left: 50%; bottom: 10px; transform: translateX(-50%); background: var(--vert); color: #06251c; font-weight: 700;
                  border: 0; border-radius: 999px; padding: 9px 18px; box-shadow: 0 4px 14px #0009; animation: sautille 1.6s ease-in-out infinite; }

/* v0.10 : la carte lisible — noms desencombres, heures d'arrivee, une couleur par mouvement, pastilles de mouvements, incidents. */
.noeud .nom { opacity: 0; transition: opacity .15s ease; pointer-events: none; }
.noeud.nomme .nom, .noeud:hover .nom, .noeud:focus-visible .nom, .cadre-carte.noms .noeud .nom { opacity: 1; }
.noeud.incident .pastille { border-color: var(--orange); box-shadow: 0 0 0 0 #f4a26199; animation: appel 1.4s ease-out infinite; }
.noeud.incident:not(.en-cours) { display: none; }
@keyframes appel { to { box-shadow: 0 0 0 16px #f4a26100; } }
.noeud .echeance { color: var(--orange); font-variant-numeric: tabular-nums; }
.trajet.assaut polyline { stroke: var(--or); }
.trajet.retour polyline { stroke: var(--vert); opacity: .7; }
.trajet.convoi polyline { stroke: #9fd0ff; }
.marqueur .eta { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font: 600 .68rem system-ui; color: #fff; background: #0b1220e6; border-radius: 999px;
                 padding: 0 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.marqueur.ennemi .eta { background: #7a1c2a; }
.marqueur.retour .eta { color: var(--vert); }
.mouvements { position: sticky; left: 8px; top: 0; z-index: 5; height: 0; width: max-content; max-width: calc(100vw - 110px); display: flex; flex-wrap: wrap; gap: 4px;
              transform: translate(92px, 8px); }
.mouvement { display: inline-flex; align-items: center; gap: 5px; height: 34px; padding: 0 9px; border-radius: 999px; background: #0b1220e0; border: 1px solid var(--or);
             font-size: .78rem; white-space: nowrap; backdrop-filter: blur(4px); }
.mouvement .icone { height: 20px; }
.mouvement b { font-variant-numeric: tabular-nums; color: var(--or); }
.mouvement.ennemi { border-color: var(--rouge); background: #3a0f16e6; }
.mouvement.ennemi b { color: #ff9aa2; }
.mouvement.retour { border-color: var(--vert); }
.mouvement.retour b { color: var(--vert); }
.mouvement.convoi { border-color: #9fd0ff; }
.mouvement.incident { border-color: var(--orange); animation: pouls-rappel 1.4s ease-in-out infinite; }
.mouvement.incident b { color: var(--orange); }
.ligne-mouvement { display: grid; gap: 2px; width: 100%; text-align: left; background: var(--creux); border: 1px solid var(--trait); border-left: 3px solid var(--or);
                   border-radius: 8px; padding: 7px 10px; margin: 6px 0; font-size: .88rem; }
.ligne-mouvement.ennemi { border-left-color: var(--rouge); }
.ligne-mouvement .icone { height: 18px; }
.ligne-mouvement b { font-weight: 600; font-size: .82rem; color: var(--or); }
.alerte-incident { background: #4a2c0a; color: #ffe2bd; }
@media (max-width: 520px) { .mouvement span { display: none; } }

/* La carte vivante : bannieres sur les lieux pris, ruines qui fument, brume sur l'inconnu, routes du commerce. */
.fanion { position: absolute; left: -9px; top: -13px; font-size: 14px; line-height: 1; transform-origin: 20% 100%; animation: flotte 2.6s ease-in-out infinite; filter: drop-shadow(0 1px 1px #000a); }
.fanion .icone { height: 22px; width: auto; }
.fanion.ruines { animation: none; left: auto; right: -9px; }
@keyframes flotte { 0%, 100% { rotate: -5deg; } 50% { rotate: 6deg; } }
.noeud.rasee .pastille > .icone:first-child { filter: grayscale(.9) brightness(.7); }
.fumerolle { position: absolute; left: 50%; top: 0; pointer-events: none; }
.fumerolle i { position: absolute; width: 9px; height: 9px; border-radius: 50%; background: #cfd3dbaa; filter: blur(2px); opacity: 0; animation: fume 3.2s ease-out infinite; }
.fumerolle i:nth-child(2) { animation-delay: -1.1s; }
.fumerolle i:nth-child(3) { animation-delay: -2.2s; }
@keyframes fume { 0% { opacity: 0; transform: translate(-50%, 0) scale(.5); } 20% { opacity: .85; } 100% { opacity: 0; transform: translate(40%, -34px) scale(2.2); } }
.brume { position: absolute; z-index: 3; width: 17%; aspect-ratio: 1.5; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
         background: radial-gradient(ellipse, #dfe6f0cc 0, #c9d3e288 38%, transparent 70%); filter: blur(3px);
         animation: brume 9s ease-in-out calc(var(--i) * -2.3s) infinite; }
@keyframes brume { 0%, 100% { transform: translate(-54%, -50%) scale(1); opacity: .9; } 50% { transform: translate(-46%, -53%) scale(1.08); opacity: .7; } }
.trajet.route-commerciale polyline { stroke: #d9ecff; stroke-width: 1.5; stroke-dasharray: 2 7; opacity: .38; }
.trajet.route-commerciale.active polyline { opacity: .75; animation: sillage 1.4s linear infinite; }
@keyframes sillage { to { stroke-dashoffset: -9; } }
.marqueur .charge { position: absolute; right: -8px; bottom: -6px; font-size: 12px; }
.marqueur .charge .icone { height: 15px; }

/* Les habitants de la cite (ui/habitants.js) : poses par leurs pieds sur le chemin, devant ou derriere les batiments
   selon leur hauteur sur le plan (meme z-index que les tuiles : l'ordonnee). */
.habitants { position: absolute; inset: 0; pointer-events: none; }
.habitant { position: absolute; width: calc(2.3cqw * var(--taille, 1)); transform: translate(-50%, -100%); transition: none; } /* a l'echelle des batiments : un homme = un septieme de tuile */
.habitant img, .habitant svg { display: block; width: 100%; height: auto; filter: drop-shadow(0 .25cqw .15cqw #0008); transform-origin: 50% 100%; animation: marche .46s ease-in-out infinite; }
.habitant svg { fill: var(--teinte); stroke: #3a2a18; stroke-width: .35; width: 52%; margin: 0 auto; }
.habitant svg circle { fill: #e9c9a0; }
.habitant.vers-la-gauche img, .habitant.vers-la-gauche svg { scale: -1 1; }
.habitant.a-l-arret img, .habitant.a-l-arret svg { animation: none; }
.habitant.ennemi { filter: drop-shadow(0 0 .3cqw #e63946); }
@keyframes marche { 0%, 100% { translate: 0 0; rotate: -3deg; } 50% { translate: 0 -7%; rotate: 3deg; } }

/* Pellicules (manifeste.pellicule) : une bande de --n poses carrees defile par a-coups derriere une fenetre d'une pose.
   Seul `transform` bouge : c'est la carte graphique qui travaille. Le nombre d'a-coups est pose en ligne (steps(n)). */
.pellicule { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; pointer-events: none; }
.pellicule img, .tuile .pellicule img, .tuile.eclat .pellicule img, .tuile.en-chantier .pellicule img,
.habitant .pellicule img, .habitant.vers-la-gauche .pellicule img {
  display: block; width: calc(100% * var(--n)); max-width: none; height: 100%; clip-path: none; filter: none;
  scale: none; rotate: none; translate: none; animation: defile var(--duree, .6s) steps(4) infinite; }
@keyframes defile { to { transform: translateX(-100%); } }
/* Un habitant : sa planche le montre en pied, sans marge — 88 % de large pour garder la taille des images fixes. */
.habitant .pellicule { width: 88%; margin: 0 auto; filter: drop-shadow(0 .25cqw .15cqw #0008); }
.habitant.vers-la-gauche .pellicule { scale: -1 1; }
.habitant.a-l-arret .marche img { animation: none; }
/* Entrer dans un batiment : on s'efface sur le seuil. Travailler a son poste : la planche de travail remplace la marche
   (elle montre aussi l'outil leve et le billot : --grandeur rend au personnage sa taille). En pause, tout se fige. */
.habitant { transition: opacity .35s ease; }
.habitant.dedans { opacity: 0; }
.habitant .travail { display: none; width: calc(88% * var(--grandeur, 1.35)); margin-left: calc((100% - 88% * var(--grandeur, 1.35)) / 2); }
.habitant.au-travail .travail { display: block; }
.habitant.au-travail > :not(.travail) { display: none; }
.habitants.fige .pellicule img, .faune.fige .pellicule img { animation-play-state: paused; }
/* La vie au-dessus de l'eau (ui/faune.js), dans la cite comme sur la carte : largeurs en % du fond. */
.faune { position: absolute; inset: 0; z-index: 112; pointer-events: none; }
.mouette { position: absolute; width: 2.6%; transform: translate(-50%, -50%); filter: drop-shadow(0 8px 4px #0004); }
.mouette.vers-la-gauche .pellicule { scale: -1 1; }
.carte .faune { z-index: 5; }
.carte .mouette { width: 2.2%; }
.vague { position: absolute; z-index: 1; width: 4%; transform: translate(-50%, -50%); opacity: 0; animation: houle calc(var(--duree) * 4) linear infinite; }
.carte .vague { width: 3.2%; }
@keyframes houle { 0% { opacity: 0; } 3% { opacity: .9; } 21% { opacity: .9; } 25%, 100% { opacity: 0; } }
/* Les armees et les flottes en route sur la carte : une pellicule a la place du jeton. */
.marqueur .pellicule { width: 46px; }
.mouvement .pellicule, .ligne-mouvement .pellicule { display: inline-block; width: 26px; vertical-align: middle; }
.pellicule { direction: ltr; } /* un camp de bataille range ses pions de droite a gauche : la bande, elle, se lit toujours de gauche a droite */

/* Batailles animees : le pion montre sa planche (tournee vers la droite ; le camp de droite se retourne). */
.pion .pellicule { width: calc(var(--t) * 1.35 * var(--e, 1)); flex: none; }
.pion.geant .pellicule { width: calc(var(--t) * 2.3 * var(--e, 1)); }
.ost.droite .pellicule { scale: -1 1; }
.corps:has(.pellicule) { display: grid; place-items: center; }

/* Chantiers vivants : une boite de la taille de la dalle, centree sur l'emplacement ; la grue au fond, les artisans devant.
   Leurs largeurs sont en cqw, comme celle des habitants (2,3cqw x 0,88 = un homme debout de 2cqw) : MEME ECHELLE pour tous.
   La case d'un artisan contient aussi son outil leve ou sa poutre : 2,35cqw pour le tailleur debout, 2cqw pour le charpentier a genoux. */
.ouvrage.vivant { top: var(--y); width: var(--l); height: calc(var(--l) * .6); }
.ouvrage.vivant i { top: 30%; }
.artisan { position: absolute; transform: translate(-50%, -100%); filter: drop-shadow(0 .25cqw .15cqw #0008); }
.artisan.grue { left: 27%; top: 50%; width: 4.9cqw; }
.artisan.charpentier { left: 70%; top: 78%; width: 2cqw; }
.artisan.tailleur { left: 38%; top: 94%; width: 2.35cqw; }

/* Scenes de rue : les acteurs poses sur place (danseuses, musicien) et le sinistre d'un incendie. */
.habitant.acteur .pellicule { width: 100%; }
.habitant.sinistre { filter: drop-shadow(0 0 .8cqw #ff8c2a); }
.habitant.sinistre .pellicule { filter: none; }

/* La carte vivante : banniere qui flotte, foyers des villages, feu de camp, ruines qui brulent, monstres dans leur repaire. */
.fanion.vivant { animation: none; left: -12px; top: -24px; }
.fanion.vivant .pellicule { width: 30px; }
.foyer { position: absolute; left: 50%; bottom: 72%; width: 26px; transform: translateX(-50%); pointer-events: none; }
.foyer .pellicule { position: absolute; left: 0; bottom: 0; }
.foyer .panache { opacity: .85; bottom: 40%; }
.foyer.cuisine { left: 78%; width: 20px; }
.foyer.cuisine .panache { bottom: 0; opacity: .75; }
.foyer.camp { left: 12%; bottom: 8%; width: 18px; }
.noeud .pastille .pellicule.monstre { width: 58px; margin: -8px; filter: drop-shadow(0 2px 2px #000a); }

/* Saisons (body[data-saison], pose par main.js) : le paysage change de teinte, et quelque chose tombe du ciel.
   Rien sur les batiments ni les personnages : seuls le sol de la cite et le fond de la carte sont teintes. */
.sol, .fond-carte { transition: filter 4s linear; }
body[data-saison="printemps"] :is(.sol, .fond-carte) { filter: saturate(1.1) brightness(1.03); }
body[data-saison="ete"] :is(.sol, .fond-carte) { filter: saturate(1.14) sepia(.1) brightness(1.04); }
body[data-saison="automne"] :is(.sol, .fond-carte) { filter: sepia(.34) saturate(1.12) hue-rotate(-16deg); }
body[data-saison="hiver"] :is(.sol, .fond-carte) { filter: saturate(.7) brightness(.95) hue-rotate(8deg); }
.meteo { position: absolute; inset: 0; z-index: 109; overflow: hidden; pointer-events: none; border-radius: 14px; display: none; }
.carte .meteo { z-index: 2; }
body[data-saison="printemps"] .meteo, body[data-saison="automne"] .meteo, body[data-saison="hiver"] .meteo { display: block; }
.meteo i { position: absolute; top: -4%; left: calc(var(--k) * 7.3% - 2%); opacity: 0;
  animation: tombe calc(9s + var(--k) * .7s) linear calc(var(--k) * -1.9s) infinite; }
body[data-saison="printemps"] .meteo i { width: .7cqw; min-width: 5px; aspect-ratio: 1.5; border-radius: 60% 40% 60% 40%; background: #ffdfe9; }
body[data-saison="printemps"] .meteo i:nth-child(2n) { display: none; }
body[data-saison="automne"] .meteo i { width: .9cqw; min-width: 6px; aspect-ratio: 1.6; border-radius: 80% 10% 80% 10%; background: #c9772b; }
body[data-saison="automne"] .meteo i:nth-child(3n) { background: #a8512a; }
body[data-saison="hiver"] .meteo i { width: 1.5px; height: 3.2%; rotate: 6.5deg; background: linear-gradient(#cfe6ff00, #cfe6ffcc);
  animation-duration: calc(1.1s + var(--k) * .06s); animation-delay: calc(var(--k) * -.37s); }
@keyframes tombe { 0% { transform: translate(0, 0) rotate(0); opacity: 0; } 8% { opacity: .85; } 92% { opacity: .85; }
  100% { transform: translate(11cqw, 60cqw) rotate(420deg); opacity: 0; } } /* cqw : le sol de la cite fait 50cqw de haut ; sur la carte, sans conteneur, cqw = largeur de l'ecran */
body[data-saison="hiver"] .meteo i { animation-name: pluie; }
@keyframes pluie { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: .7; } 100% { transform: translate(-7cqw, 62cqw); opacity: .5; } }
.habitants.fige ~ .meteo i, .meteo.fige i { animation-play-state: paused; }
.marqueur.vers-la-gauche .pellicule { scale: -1 1; }
/* Un feu dessine sur une tuile, couvert par la flamme animee (pied de la flamme = le point releve). */
.tuile .feu { position: absolute; transform: translate(-50%, -100%); }

/* La cite vivante (ecrans/cite.js) : reflets, passants, navires a quai, ombres de nuages, jour et nuit, chantiers. */
.eau { position: absolute; inset: 0; z-index: 0; pointer-events: none; border-radius: 14px; mix-blend-mode: soft-light; opacity: .9;
       clip-path: polygon(57% 100%, 60% 92%, 61.5% 85%, 65% 79%, 69% 77.5%, 72% 80%, 76% 84.5%, 92% 85.5%, 93.5% 80%, 84% 70%, 82% 66%, 88% 63%, 100% 62%, 100% 100%);
       background: repeating-linear-gradient(112deg, transparent 0 3.2cqw, #ffffff55 3.2cqw 3.6cqw, transparent 3.6cqw 7cqw, #ffffff33 7cqw 7.3cqw, transparent 7.3cqw 10cqw);
       background-size: 20cqw 20cqw; animation: scintille 7s linear infinite; }
@keyframes scintille { to { background-position: 20cqw 8cqw; } }
.passants { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; overflow: visible; }
.passants .mouette { opacity: .85; }
.a-quai { position: absolute; z-index: 90; transform: translate(-50%, -50%); font-size: 2.6cqw; line-height: 1; pointer-events: none;
          filter: drop-shadow(0 .3cqw .2cqw #0007); animation: mouillage 3.4s ease-in-out calc(var(--i) * -.8s) infinite; }
.a-quai .icone { height: 3.4cqw; width: auto; }
@keyframes mouillage { 0%, 100% { transform: translate(-50%, -50%) rotate(-3deg); } 50% { transform: translate(-50%, -58%) rotate(3deg); } }
.nuage { position: absolute; z-index: 100; left: -45%; top: calc(8% + var(--n) * 42%); width: 42%; height: 34%; pointer-events: none;
         background: radial-gradient(ellipse, #0b122040 0, #0b122022 45%, transparent 70%);
         animation: derive 95s linear calc(var(--n) * -52s) infinite; }
@keyframes derive { to { transform: translateX(360%); } }
.voile-du-soir, .voile-de-nuit { position: absolute; inset: calc(var(--l) * -.5) 0 0; z-index: 110; pointer-events: none; border-radius: 14px; transition: opacity 1s linear; }
.voile-du-soir { background: linear-gradient(200deg, #ffb45588, #ff7a3d44); mix-blend-mode: soft-light; opacity: var(--couchant, 0); }
.voile-de-nuit { background: #0a1438; mix-blend-mode: multiply; opacity: calc(var(--nuit, 0) * .55); }
.brasero { position: absolute; z-index: 111; width: 7cqw; height: 7cqw; transform: translate(-50%, -50%); pointer-events: none; border-radius: 50%;
           background: radial-gradient(circle, #ffd27acc 0, #ff9d3d66 28%, transparent 66%); mix-blend-mode: screen;
           opacity: var(--nuit, 0); animation: vacille 1.7s ease-in-out calc(var(--i) * -.4s) infinite; }
@keyframes vacille { 0%, 100% { scale: 1; } 40% { scale: .88; } 70% { scale: 1.08; } }
.ouvrage { position: absolute; z-index: 119; left: var(--x); top: calc(var(--y) - var(--l) * .42); transform: translate(-50%, -50%); pointer-events: none; }
.marteau { display: block; font-size: calc(var(--l) * .2); transform-origin: 70% 80%; animation: martele .7s ease-in-out infinite; filter: drop-shadow(0 2px 2px #000a); }
.marteau .icone { height: calc(var(--l) * .24); width: auto; }
@keyframes martele { 0%, 100% { rotate: -28deg; } 45% { rotate: 18deg; } }
.ouvrage i { position: absolute; left: 50%; top: calc(var(--l) * .46); width: calc(var(--l) * .1); height: calc(var(--l) * .1); border-radius: 50%;
             background: #e8dcc0bb; filter: blur(2px); opacity: 0; animation: poussiere 2.1s ease-out infinite; }
.ouvrage i:nth-of-type(2) { animation-delay: -.7s; --dx: -160%; }
.ouvrage i:nth-of-type(3) { animation-delay: -1.4s; --dx: 120%; }
@keyframes poussiere { 0% { opacity: 0; transform: translate(var(--dx, -40%), 0) scale(.4); } 25% { opacity: .8; }
                       100% { opacity: 0; transform: translate(var(--dx, -40%), -260%) scale(1.9); } }
.tuile.eclat img, .tuile.eclat svg { animation: surgit 1.1s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes surgit { 0% { transform: scale(.82); filter: brightness(2.4); } 100% { transform: scale(1); filter: brightness(1); } }
.halo { position: absolute; z-index: 118; left: var(--x); top: var(--y); width: calc(var(--l) * 1.5); height: calc(var(--l) * .75); pointer-events: none; border-radius: 50%;
        border: 3px solid #f4d58d; box-shadow: 0 0 24px #e9c46a, inset 0 0 18px #e9c46a88; animation: onde 1.6s ease-out both; }
@keyframes onde { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(1.5); opacity: 0; } }

/* Bataille mise en scene (ui/bataille.js) : --debut = instant ou commence l'acte ; un acte dure 5.4 s. */
.fenetre.spectacle { max-width: 920px; padding: 10px; cursor: pointer; text-align: center; }
.fenetre.spectacle .lien { margin-top: 8px; }
.theatre { position: relative; aspect-ratio: 16 / 9; border-radius: 10px; overflow: hidden; container-type: inline-size; background: #0b1220;
           --t: clamp(24px, 6.4cqw, 58px); }
.acte { position: absolute; inset: 0; opacity: 0; animation: acte 5.4s linear var(--debut) both;
        background: linear-gradient(#9cc4e4 0 44%, #d8c48a 44% 47%, #b89a5a 47% 100%); }
.acte.mer { background: linear-gradient(#a6cfea 0 32%, #3d7fb0 32% 36%, #1d5a8c 36% 100%); }
.acte.dernier { animation-name: acte-final; }
@keyframes acte { 0% { opacity: 0; } 5%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes acte-final { 0% { opacity: 0; } 5%, 100% { opacity: 1; } }
.acte .decor { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.acte .rempart { position: absolute; right: 0; bottom: 9%; width: 42%; height: 52%; }
.acte::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 60%, transparent 55%, #0008 100%); pointer-events: none; }
.titre-acte { position: absolute; top: 4%; left: 50%; transform: translateX(-50%); z-index: 3; background: #0b1220cc; border: 1px solid var(--trait);
              border-radius: 999px; padding: 2px 14px; font-size: clamp(11px, 2.4cqw, 16px); color: var(--or); }
.ost { position: absolute; bottom: 13%; z-index: 2; display: grid; grid-auto-flow: column; grid-template-rows: repeat(3, var(--t)); gap: 0 2px; }
.acte.mer .ost { bottom: 16%; grid-template-rows: repeat(3, calc(var(--t) * 1.05)); }
.ost.gauche { right: 53%; direction: rtl; --sens: 1; }
.ost.droite { left: 53%; --sens: -1; }
.ost.vainqueur { animation: entree 1s ease-out var(--debut) both, melee 2.4s ease-in-out calc(var(--debut) + 1.2s) forwards,
                             triomphe 1.2s ease-in-out calc(var(--debut) + 3.7s) forwards; }
.ost.vaincu { animation: entree 1s ease-out var(--debut) both, melee 2.4s ease-in-out calc(var(--debut) + 1.2s) forwards,
                          deroute 1.3s ease-in calc(var(--debut) + 3.7s) forwards; }
@keyframes entree { from { transform: translateX(calc(var(--sens) * -130%)); } to { transform: translateX(0); } }
@keyframes melee { 0% { transform: translateX(0); } 16% { transform: translateX(calc(var(--sens) * 10%)); } 30% { transform: translateX(calc(var(--sens) * 4%)); }
                   48% { transform: translateX(calc(var(--sens) * 11%)); } 62% { transform: translateX(calc(var(--sens) * 5%)); }
                   82% { transform: translateX(calc(var(--sens) * 10%)); } 100% { transform: translateX(calc(var(--sens) * 6%)); } }
@keyframes triomphe { 0%, 50%, 100% { transform: translate(calc(var(--sens) * 6%), 0); } 25%, 75% { transform: translate(calc(var(--sens) * 6%), -7%); } }
@keyframes deroute { from { transform: translateX(calc(var(--sens) * 6%)); opacity: 1; } to { transform: translateX(calc(var(--sens) * -70%)); opacity: 0; } }
.pion { width: var(--t); height: var(--t); display: grid; place-items: center; font-size: calc(var(--t) * .72); line-height: 1; filter: drop-shadow(0 3px 2px #0009); }
.pion .icone { height: calc(var(--t) * .92); width: auto; }
.pion.tombe { animation: chute .7s ease-in calc(var(--debut) + 1.7s + var(--i) * .09s) forwards; }
.acte.mer .pion.tombe { animation-name: naufrage; animation-duration: 1s; }
.acte.mer .corps { display: block; animation: tangage 2.4s ease-in-out calc(var(--i) * -.37s) infinite; }
@keyframes chute { 30% { filter: brightness(2.2) drop-shadow(0 0 6px #fff); } to { transform: rotate(calc(var(--sens) * -80deg)) translateY(45%); opacity: 0; } }
@keyframes naufrage { 30% { filter: brightness(1.8); } to { transform: rotate(calc(var(--sens) * 24deg)) translateY(75%); opacity: 0; } }
@keyframes tangage { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-7%) rotate(2deg); } }
.choc { position: absolute; left: 50%; bottom: 10%; width: 26cqw; height: 26cqw; z-index: 3; pointer-events: none; opacity: 0; border-radius: 50%;
        background: radial-gradient(circle, #fffbe6cc 0, #f4d58d88 22%, #b08a4a44 45%, transparent 66%);
        animation: choc 2.3s ease-in-out calc(var(--debut) + 1.45s) both; }
.acte.mer .choc { background: radial-gradient(circle, #ffffffdd 0, #d8f0ffaa 25%, #8cc4e855 48%, transparent 68%); }
@keyframes choc { 0% { opacity: 0; transform: translate(-50%, 25%) scale(.3); } 14% { opacity: 1; transform: translate(-50%, 25%) scale(1); }
                  30% { opacity: .45; transform: translate(-50%, 25%) scale(.75); } 46% { opacity: 1; transform: translate(-50%, 25%) scale(1.1); }
                  62% { opacity: .5; transform: translate(-50%, 25%) scale(.8); } 80% { opacity: .9; transform: translate(-50%, 25%) scale(1); }
                  100% { opacity: 0; transform: translate(-50%, 25%) scale(1.4); } }
.acte .effectif { position: absolute; bottom: 2.5%; z-index: 4; background: #0b1220d9; border: 1px solid var(--trait); border-radius: 999px; padding: 2px 12px;
            font-size: clamp(11px, 2.3cqw, 15px); white-space: nowrap; font-variant-numeric: tabular-nums; }
.acte .effectif.gauche { left: 3%; }
.acte .effectif.droite { right: 3%; }
.effectif b { color: var(--or); }
.effectif i { font-style: normal; color: var(--orange); opacity: 0; animation: apparait .5s ease-out calc(var(--debut) + 3.5s) forwards; }
@keyframes apparait { to { opacity: 1; } }
.verdict { position: absolute; left: 50%; top: 40%; z-index: 5; transform: translate(-50%, -50%); opacity: 0; white-space: nowrap;
           font-family: var(--titre, inherit); font-size: clamp(22px, 7cqw, 60px); font-weight: 700; padding: .15em .7em; border-radius: 14px;
           background: #0b1220e6; border: 2px solid var(--or); color: var(--or); text-shadow: 0 0 30px #e9c46a88;
           animation: verdict .7s cubic-bezier(.2, 1.5, .4, 1) var(--debut) both; }
.verdict.defaite { border-color: var(--rouge); color: #ff8a8a; text-shadow: 0 0 30px #e6394688; }
.verdict .icone { height: .9em; }
@keyframes verdict { from { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* Batailles enrichies (v0.9) : volees de fleches, boulets, muraille qui se fend, monstres geants, prodige du dieu, secousse du choc. */
.acte { animation: acte 5.4s linear var(--debut) both, secousse .5s linear calc(var(--debut) + 1.5s) 2; }
.acte.dernier { animation: acte-final 5.4s linear var(--debut) both, secousse .5s linear calc(var(--debut) + 1.5s) 2; }
@keyframes secousse { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-.5%, .4%); } 45% { transform: translate(.5%, -.3%); } 70% { transform: translate(-.3%, -.4%); } }
.pion.geant { grid-row: span 2; width: calc(var(--t) * 1.7); height: calc(var(--t) * 2); font-size: calc(var(--t) * 1.4); }
.pion.geant .icone { height: calc(var(--t) * 1.8); }
.volee, .boulets { position: absolute; bottom: 30%; z-index: 3; pointer-events: none; }
.volee.gauche { left: 26%; --sens: 1; }
.volee.droite { right: 26%; --sens: -1; }
.volee i { position: absolute; width: 3.4cqw; height: .34cqw; border-radius: 1px; background: linear-gradient(90deg, #5b3a14, #f4ead2); opacity: 0; top: calc(var(--k) * -1.1cqw);
           animation: fleche 1s cubic-bezier(.3, .1, .7, .9) calc(var(--debut) + .75s + var(--k) * .07s) both; }
.volee.droite i { background: linear-gradient(270deg, #5b3a14, #f4ead2); }
@keyframes fleche { 0% { opacity: 0; transform: translate(0, 0) rotate(calc(var(--sens) * -32deg)); } 12% { opacity: 1; }
                    50% { transform: translate(calc(var(--sens) * 22cqw), -9cqw) rotate(0deg); } 92% { opacity: 1; }
                    100% { opacity: 0; transform: translate(calc(var(--sens) * 44cqw), 1cqw) rotate(calc(var(--sens) * 34deg)); } }
.boulets { left: 20%; --sens: 1; }
.boulets i { position: absolute; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #b9a88a, #4a3a26); opacity: 0;
             animation: boulet 1.1s cubic-bezier(.3, .1, .7, .9) calc(var(--debut) + 1s + var(--k) * .55s) both; }
@keyframes boulet { 0% { opacity: 0; transform: translate(0, 0) scale(.8); } 10% { opacity: 1; } 50% { transform: translate(27cqw, -15cqw) scale(1.1); }
                    90% { opacity: 1; transform: translate(54cqw, -3cqw) scale(1); } 100% { opacity: 0; transform: translate(56cqw, -2cqw) scale(3); filter: brightness(3) blur(2px); } }
/* La breche des remparts (v0.17.3, retour de Loic : « le schema de fissure est horrible ») : l'image `effets/breche` posee
   sur la porte, ou une fissure a deux tons avec un nuage de poussiere et des pierres qui tombent. Tout demarre ensemble,
   2,7 s apres le debut de la phase (le moment du choc). */
.breche { position: absolute; right: 7%; bottom: 15%; width: 21%; height: 42%; z-index: 1; pointer-events: none; }
.breche-image { position: absolute; left: 50%; bottom: 0; width: 100%; transform: translateX(-50%) scale(.6); opacity: 0; transform-origin: 50% 100%;
                animation: breche-image .45s cubic-bezier(.2, 1.4, .4, 1) calc(var(--debut) + 2.7s) forwards; }
@keyframes breche-image { from { opacity: 0; transform: translateX(-50%) scale(.6); } to { opacity: 1; transform: translateX(-50%) scale(1); } }
.fissure { position: absolute; left: 30%; top: 4%; width: 45%; height: 78%; opacity: 0; transform-origin: 50% 0;
           animation: fissure .5s ease-out calc(var(--debut) + 2.7s) forwards; }
.fissure polyline { fill: none; stroke: #2a1c10; stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; opacity: .85; }
.fissure polyline.clair { stroke: #fff6e0; stroke-width: 3.4; opacity: .55; }
@keyframes fissure { from { opacity: 0; transform: scaleY(.1); } to { opacity: 1; transform: scaleY(1); } }
.breche .pierre { position: absolute; left: 50%; top: 40%; width: 7%; aspect-ratio: 1; border-radius: 30%; background: #d8ccb0; box-shadow: inset -1px -1px 0 #7a6a50;
                  opacity: 0; animation: pierre-tombe 1.1s ease-in calc(var(--debut) + 2.75s + var(--t, 0s)) forwards; }
@keyframes pierre-tombe { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 10% { opacity: 1; }
                          100% { opacity: 0; transform: translate(calc(var(--dx) * 120%), 420%) rotate(var(--r)); } }
.nuage-de-poussiere { position: absolute; left: 30%; bottom: 8%; width: 60%; aspect-ratio: 1; border-radius: 50%; opacity: 0;
                      background: radial-gradient(circle, #e8dcc0cc, #d9c9a800 70%); transform: translateX(var(--dx, 0)) scale(.3);
                      animation: nuage-de-poussiere 1.6s ease-out calc(var(--debut) + 2.7s + var(--t, 0s)) forwards; }
@keyframes nuage-de-poussiere { 0% { opacity: 0; transform: translateX(var(--dx, 0)) scale(.3); } 25% { opacity: .9; }
                                100% { opacity: 0; transform: translate(calc(var(--dx, 0) + 10%), -45%) scale(1.6); } }
.miracle { position: absolute; top: 12%; z-index: 4; display: flex; flex-direction: column; align-items: center; gap: .4cqw; color: var(--teinte); opacity: 0;
           font-size: clamp(10px, 2.2cqw, 15px); font-weight: 700; text-shadow: 0 0 10px #000, 0 0 18px var(--teinte);
           animation: miracle 2.6s ease-out calc(var(--debut) + .9s) both; }
.miracle.gauche { left: 16%; }
.miracle.droite { right: 16%; }
.miracle .icone { height: 9cqw; width: auto; filter: drop-shadow(0 0 14px var(--teinte)); }
@keyframes miracle { 0% { opacity: 0; transform: scale(.3) translateY(30%); } 18% { opacity: 1; transform: scale(1.15); } 30% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-20%); } }

/* Prodiges (ui/prodiges.js) : le dieu se montre quand on l'invoque. */
.prodige { position: fixed; inset: 0; z-index: 200; pointer-events: none; overflow: hidden; display: grid; place-items: center;
           background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--teinte) 35%, transparent), transparent 70%); animation: prodige 1.7s ease-out both; }
@keyframes prodige { 0% { opacity: 0; } 12% { opacity: 1; } 75% { opacity: 1; } 100% { opacity: 0; } }
.prodige-nom { display: flex; flex-direction: column; align-items: center; gap: 8px; font-family: var(--titre, inherit); font-size: clamp(20px, 5vw, 40px); color: #fff;
               text-shadow: 0 0 24px var(--teinte), 0 2px 6px #000; animation: prodige-nom 1.7s cubic-bezier(.2, 1.4, .4, 1) both; }
.prodige-nom .icone { height: clamp(90px, 22vw, 180px); width: auto; filter: drop-shadow(0 0 30px var(--teinte)); }
@keyframes prodige-nom { 0% { transform: scale(.4); opacity: 0; } 25% { transform: scale(1.08); opacity: 1; } 40% { transform: scale(1); } 100% { transform: scale(1.05); opacity: 1; } }
.prodige-eclair { position: absolute; inset: 0; animation: eclair .9s steps(1) both; }
.prodige-eclair svg { width: 100%; height: 100%; }
.prodige-eclair polyline { fill: none; stroke: #fff; stroke-width: 1.2; stroke-linejoin: bevel; filter: drop-shadow(0 0 6px #fff) drop-shadow(0 0 18px var(--teinte)); vector-effect: non-scaling-stroke; }
@keyframes eclair { 0% { opacity: 0; background: transparent; } 8% { opacity: 1; background: #ffffffcc; } 16% { opacity: 1; background: transparent; } 26% { opacity: 0; } 34% { opacity: 1; background: #ffffff88; } 46% { opacity: 1; background: transparent; } 70% { opacity: 0; } }
.prodige-vague { position: absolute; left: -10%; right: -10%; bottom: -60%; height: 70%; border-radius: 50% 50% 0 0 / 30% 30% 0 0;
                 background: linear-gradient(#bfe6ffcc, #2f7fb8dd 30%, #0b3a66ee); animation: vague 1.6s cubic-bezier(.3, .7, .4, 1) both; }
.prodige-vague.seconde { animation-delay: .18s; opacity: .7; filter: brightness(1.2); }
@keyframes vague { 0% { transform: translateY(0) scaleX(1.1); } 45% { transform: translateY(-105%) scaleX(1); } 100% { transform: translateY(10%) scaleX(1.15); } }
.prodige-egide { position: absolute; left: 50%; top: 45%; width: 30vmin; height: 30vmin; border-radius: 50%; border: 4px solid var(--teinte);
                 box-shadow: 0 0 40px var(--teinte), inset 0 0 40px color-mix(in srgb, var(--teinte) 50%, transparent); animation: egide 1.5s ease-out both; }
.prodige-egide.seconde { animation-delay: .25s; }
@keyframes egide { from { transform: translate(-50%, -50%) scale(.2); opacity: 1; } to { transform: translate(-50%, -50%) scale(4.5); opacity: 0; } }
.prodige.hades { background: radial-gradient(circle at 50% 60%, #3a1d5a88, #05020acc 75%); }
.prodige-ombre { position: absolute; inset: 0; background: repeating-radial-gradient(circle at 50% 110%, #7a3fb055 0 6%, transparent 6% 14%); animation: ombre 1.7s ease-out both; }
@keyframes ombre { from { transform: translateY(40%) scale(1.2); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(-25%) scale(1); opacity: 0; } }

/* Habillage (v0.8) : frise grecque, boutons de bronze dore, transitions, ecran-titre qui respire — et, quand Loic les a
   produites, les matieres `habillage/marbre` (panneaux) et `habillage/parchemin` (texte du recit), posees par main.js. */
:root { --meandre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='10' viewBox='0 0 20 10'%3E%3Cpath d='M0 9H16V1H4V6H11' fill='none' stroke='%23e9c46a' stroke-width='1.6'/%3E%3C/svg%3E"); }
.fenetre h2::after, .fiche > h2::after, .fenetre.titre h1::after { content: ""; display: block; height: 10px; margin-top: 7px;
  background: var(--meandre) repeat-x left center / 20px 10px; opacity: .5; }
.fenetre.titre h1::after { background-position: center; margin: 10px auto 0; max-width: 260px; }
.action:not(.secondaire):not(.danger):not(:disabled) { background: linear-gradient(#f3d88a, #dcae48 55%, #c9983a); box-shadow: inset 0 1px 0 #fff6, 0 2px 0 #7a5a1e; }
.action:not(:disabled):active { transform: translateY(1px); box-shadow: none; }
.action.danger:not(:disabled) { background: linear-gradient(#e8555f, #c22f3c); box-shadow: inset 0 1px 0 #fff3, 0 2px 0 #6e1620; }
#ecran > * { animation: apparition .28s ease-out; }
.fenetre.titre { overflow: hidden; }
.fenetre.titre > img.scene { animation: travelling 26s ease-in-out infinite alternate; transform-origin: 60% 40%; }
@keyframes travelling { from { transform: scale(1); } to { transform: scale(1.09) translateX(-1.5%); } }
.fenetre.titre h1 { animation: aura 4.5s ease-in-out infinite; }
@keyframes aura { 0%, 100% { text-shadow: 0 0 40px #e9c46a55; } 50% { text-shadow: 0 0 60px #e9c46aaa, 0 0 12px #e9c46a66; } }
.avec-marbre .fiche, .avec-marbre .panneau, .avec-marbre .fenetre, .avec-marbre #barre, .avec-marbre #nav {
  background-image: linear-gradient(#0e1626d9, #0e1626d9), var(--marbre); background-size: cover; background-position: center; }
.avec-parchemin .fenetre.recit .recit-corps, .avec-parchemin .fenetre.epilogue > p {
  background: var(--parchemin) center / cover; color: #2b1d0e; border-radius: 10px; padding: 14px 16px; box-shadow: inset 0 0 38px #5b3a1455, 0 2px 8px #0006; }
.avec-parchemin .fenetre.epilogue > p { margin: 10px 0; }
.avec-parchemin .fenetre.recit .recit-corps h2 { color: #5a2d0c; }
.avec-parchemin .fenetre.recit .recit-corps h2::after { filter: brightness(.45); opacity: .8; }
.avec-parchemin .fenetre.recit .recit-corps .discret { color: #5b4a33; }
.avec-parchemin .fenetre.recit .recit-corps .qui { filter: brightness(.7) saturate(1.3); }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
.tuile .feu.fumee { opacity: .92; }

/* ── v0.15 : interface allegee ─────────────────────────────────────────────── */
/* Le ciel de la cite (ecrans/cite.js) : il occupe la marge au-dessus du sol et le haut de celui-ci, ou le sol s'efface.
   Trois couches fondues par --couchant et --nuit. Les voiles du soir et de la nuit ne couvrent plus que le sol. */
.plateau { padding-top: 15cqw; }
.ciel { position: absolute; left: 0; right: 0; top: -15cqw; height: calc(15cqw + 14%); z-index: -1; overflow: hidden; border-radius: 14px 14px 0 0; pointer-events: none; }
.ciel > * { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 145%; object-fit: fill; transition: opacity 1s linear; }
/* L'image du ciel est ANCREE EN BAS et un peu tassee en hauteur (un paysage lointain le supporte tres bien) : sa bande basse,
   sombre et sans detail, passe sous le fondu du sol — plus de surimpression de collines et de falaises — et il reste
   de la place pour l'horizon et le ciel au-dessus. */
div.ciel-jour { background: linear-gradient(#4f9bd9, #9fd0f0 55%, #d9ead2 78%, #7d9a66 92%, #5f7f52); }
div.ciel-couchant { background: linear-gradient(#34386f, #b65a5a 45%, #f0a35c 70%, #f6cf8a 80%, #6c6a45 92%, #4d5538); }
div.ciel-nuit { background: radial-gradient(1px 1px at 12% 22%, #fff 50%, #0000 51%), radial-gradient(1px 1px at 31% 12%, #fff 50%, #0000 51%),
  radial-gradient(1.5px 1.5px at 47% 30%, #fff 50%, #0000 51%), radial-gradient(1px 1px at 63% 9%, #fff 50%, #0000 51%),
  radial-gradient(1.5px 1.5px at 78% 26%, #fff 50%, #0000 51%), radial-gradient(1px 1px at 91% 15%, #fff 50%, #0000 51%),
  linear-gradient(#050a1c, #0f1d42 60%, #1a2f55 80%, #152527 92%, #101c1c); }
.ciel-couchant { opacity: var(--couchant, 0); }
.ciel-nuit { opacity: var(--nuit, 0); }
.sol { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
.voile-du-soir, .voile-de-nuit { inset: 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%); mask-image: linear-gradient(to bottom, transparent 0, #000 14%); }
.meteo { top: -15cqw; }

/* La barre du haut : chaque jauge tient sur deux lignes (le stock, et dessous ce qui rentre par minute) — plus
   etroite, elle ne passe plus a la ligne sur une tablette. La date se reduit a « J 237 » et au signe de la saison. */
.pile { display: inline-grid; line-height: 1.05; text-align: left; vertical-align: middle; }
.pile small { display: none; margin: 0; font-size: .66rem; }
.pile small.neutre { color: var(--discret); }
.jauge { display: inline-flex; align-items: center; gap: 5px; }
@media (min-width: 900px) {
  #barre { flex-wrap: nowrap; }
  .jauges { flex-wrap: nowrap; min-width: 0; }
  .jauge { border-radius: 12px; padding: 2px 10px 2px 8px; }
  .jauge .icone { height: 1.5em; }
  .pile small { display: block; }
  .temps { flex: none; }
  .temps .jour { margin-right: 4px; }
}

/* Le fil d'alertes : une seule ligne sous la navigation. L'objectif se tronque ; les alertes sont des pastilles. */
#bandeau .fil { display: flex; align-items: center; gap: 6px; min-height: 36px; padding: 3px 8px; background: #15203a; border-bottom: 1px solid var(--trait); }
#bandeau .fil .objectif { flex: 1 1 0; min-width: 0; width: auto; padding: 4px 6px; background: none; border: 0 !important; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.alertes { display: flex; flex: none; align-items: center; gap: 5px; }
#bandeau .alerte { width: auto; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; border: 1px solid transparent;
  font-size: .82rem; white-space: nowrap; line-height: 1.2; }
#bandeau .alerte .icone { height: 18px; }
#bandeau .alerte b { font-variant-numeric: tabular-nums; }
.alerte.raid { background: #5a1620; color: #ffd9dc; border-color: #b0303f; animation: pouls 1.6s ease-in-out infinite; }
.alerte.incident { background: #4a2c0a; color: #ffe2bd; border-color: #8a5a1c; }
.alerte.pause { background: #3a2f12; color: var(--or); border-color: #6b5a2a; }
@media (max-width: 700px) { .alerte .texte { display: none; } #bandeau .fil .objectif span { display: none; } }

/* La carte libre de tout bandeau : « Tout collecter » et les mouvements montent dans une barre d'outils au-dessus d'elle. */
.colonne { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.outils-carte { display: flex; align-items: center; gap: 5px; overflow-x: auto; scrollbar-width: none; }
.outils-carte::-webkit-scrollbar { display: none; }
.outils-carte:empty { display: none; }
.outils-carte .mouvements { position: static; height: auto; width: auto; max-width: none; transform: none; flex-wrap: nowrap; }
.outils-carte .tout-collecter { position: static; transform: none; animation: none; flex: none; padding: 7px 14px; box-shadow: none; font-size: .85rem; }
.outils-carte .mouvement { backdrop-filter: none; background: var(--panneau); flex: none; }
.mal-texte { color: var(--orange); }
.alerte.crise { background: #3b2350; color: #ecd9ff; border-color: #7a4fa3; }

/* L'emplacement vide : rien a voir (la terrasse du sol suffit), mais un losange a toucher — qui s'eclaire au survol et quand on le choisit. */
.emplacement { display: block; width: 100%; aspect-ratio: 1 / .6; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); background: #e9c46a00; transition: background .15s ease; }
.tuile:hover .emplacement, .tuile:focus-visible .emplacement { background: #e9c46a33; }
.tuile.choisie .emplacement { background: #e9c46a2e; box-shadow: inset 0 0 0 2px var(--or); }
.tuile:has(.emplacement)::before { display: none; } /* pas d'ombre de contact sous du vide */
.tuile:has(.emplacement):hover, .tuile:has(.emplacement):focus-visible { transform: translateY(-100%); filter: none; }

/* ── v0.16 Le récit en plein écran : cinématique d'ouverture, cartons de chapitre, « Précédemment », générique ──────
   `.cinematique` et `.generique` vivent dans #modale mais en position fixe : ils couvrent tout, fond noir. Un tableau =
   l'image (lent panoramique, sens alterné par --sens) + le texte dans un bandeau bas ; en portrait (téléphone tenu droit)
   l'image prend la moitié haute et le texte vient dessous, pour que le centre du tableau reste visible. */
.cinematique, .generique { position: fixed; inset: 0; z-index: 110; background: #000; overflow: hidden; color: #f3eee0; user-select: none; -webkit-user-select: none; cursor: pointer; }
.cinematique { animation: fondu-noir .7s ease both; }
@keyframes fondu-noir { from { opacity: 0; } }
.cinematique .fond, .generique .final .fond { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cinematique img.fond { animation: panoramique 18s ease-out both; transform-origin: 50% 40%; }
@keyframes panoramique { from { transform: scale(1.04) translateX(calc(var(--sens, 1) * 1.5%)); } to { transform: scale(1.16) translateX(calc(var(--sens, 1) * -1.5%)); } }
.cinematique .fond.repli { background: radial-gradient(ellipse at 50% 35%, #2a2416, #0b0a08 70%); }
.cinematique .bande { position: absolute; left: 0; right: 0; bottom: 0; padding: 70px 20px calc(22px + env(safe-area-inset-bottom));
  background: linear-gradient(#0000, #000a 35%, #000e); text-align: center; }
.cinematique .texte { max-width: 720px; margin: 0 auto; }
.cinematique .texte p { font-size: clamp(1.02rem, 2.4vw, 1.3rem); line-height: 1.6; text-shadow: 0 1px 10px #000; margin: 8px 0 0; animation: apparition 1s ease .35s both; }
.cinematique h1 { font-size: clamp(1.6rem, 5vw, 2.6rem); text-shadow: 0 0 30px #e9c46a66; animation: apparition .9s ease .15s both; }
.cinematique .surtitre { animation: apparition .9s ease both; }
.cinematique .suite { margin-top: 16px; color: var(--discret); font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; animation: respire 2.4s ease-in-out 1.6s infinite both; }
@keyframes respire { 0%, 100% { opacity: 0; } 50% { opacity: .9; } }
.cinematique .choix-liste { max-width: 460px; margin: 16px auto 0; animation: apparition .9s ease .6s both; }
.cinematique .choix { text-align: center; align-items: center; }
.cinematique .points { display: flex; justify-content: center; gap: 7px; margin-top: 14px; }
.cinematique .points i { width: 7px; height: 7px; border-radius: 50%; background: #fff5; }
.cinematique .points i.actif { background: var(--or); }
.cinematique .passer, .generique .passer, .generique .arret { position: absolute; top: calc(12px + env(safe-area-inset-top)); right: 14px; z-index: 2; background: #0009; color: #f3eee0;
  border: 1px solid #ffffff44; border-radius: 999px; padding: 7px 14px; font-size: .85rem; }
.cinematique .faits { list-style: none; padding: 0; margin: 10px auto 0; max-width: 560px; text-align: left; font-size: .92rem; line-height: 1.5; }
.cinematique .faits li { padding: 2px 0; }
@media (orientation: portrait) {
  .cinematique .fond { height: 56%; }
  .cinematique .bande { top: 42%; bottom: 0; padding-top: 40px; background: linear-gradient(#0000, #000 14%); display: grid; align-content: start; overflow-y: auto; }
}
@media (prefers-reduced-motion: reduce) { .cinematique img.fond { animation: none; } }

/* Le générique : les souvenirs de la partie en fond (relayés par main.js), le texte qui monte, puis la carte finale. */
.generique .souvenir { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 2.6s ease; filter: brightness(.42) saturate(.85); }
.generique .souvenir.actif { opacity: 1; }
.generique .souvenir.repli { background: radial-gradient(ellipse at 50% 40%, #1c2030, #000 70%); }
.generique .defile { position: absolute; left: 0; right: 0; top: 100%; padding: 0 20px; text-align: center; will-change: transform; text-shadow: 0 1px 8px #000; }
.generique .bloc { margin: 0 auto 54px; max-width: 720px; }
.generique .bloc .surtitre { margin-bottom: 10px; color: #c9c2ad; }
.generique .nom { font-family: var(--titre); color: var(--or); font-size: clamp(1.35rem, 4vw, 2.1rem); line-height: 1.25; }
.generique .detail { color: var(--discret); margin-top: 4px; }
.generique .titre-jeu h1 { font-size: clamp(2.4rem, 8vw, 4rem); text-shadow: 0 0 40px #e9c46a66; }
.generique .titre-jeu .accroche { color: var(--discret); font-style: italic; }
.generique .distribution { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 22px; }
.generique .distribution figure { margin: 0; width: 104px; font-size: .86rem; }
.generique .distribution .portrait { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--or); display: block; margin: 0 auto 6px; font-size: 2rem; line-height: 72px; text-align: center; }
.generique .distribution small { display: block; color: var(--discret); font-size: .74rem; }
.generique .chiffres { max-width: 520px; margin: 0 auto; }
.generique .chiffres div { background: #0008; }
.generique .final { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; opacity: 0; transition: opacity 2.2s ease; pointer-events: none; padding: 20px; }
.generique .final .texte { position: relative; z-index: 1; max-width: 520px; background: #000a; border-radius: 16px; padding: 22px; }
.generique .final h1 { font-size: clamp(1.6rem, 5vw, 2.4rem); }
.generique .final.visible { opacity: 1; pointer-events: auto; }
.generique:has(.final.visible) .souvenir, .generique:has(.final.visible) .defile, .generique:has(.final.visible) .indication { opacity: 0; }
.generique .indication { position: absolute; bottom: calc(14px + env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: var(--discret); font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; }

/* L'écran-titre : la galerie des fins, le nom de l'archonte */
.fins { display: flex; justify-content: center; gap: 14px; margin: 16px 0 0; }
.fins figure { margin: 0; width: 86px; font-size: .74rem; color: var(--discret); }
.fins img, .fins .medaillon { width: 62px; height: 62px; border-radius: 50%; object-fit: cover; display: block; margin: 0 auto 4px; border: 2px solid var(--trait); background: var(--creux); }
.fins .atteinte img, .fins .atteinte .medaillon { border-color: var(--or); box-shadow: 0 0 14px #e9c46a66; }
.fins .atteinte figcaption { color: var(--or); }
.fins .inconnue img { filter: grayscale(1) brightness(.3); }
.fins-compte { color: var(--discret); font-size: .76rem; margin-top: 6px; }
.archonte-champ { display: block; margin: 4px 0 12px; color: var(--discret); font-size: .9rem; }
.archonte-champ input { display: block; width: 100%; max-width: 320px; margin: 6px auto 0; text-align: center; background: var(--creux); border: 1px solid var(--trait); border-radius: 10px; padding: 10px; color: var(--texte); font-size: 1rem; font-family: var(--titre); }
.archonte-champ input:focus { outline: none; border-color: var(--or); }

/* Le sommaire de l'Agora : ses sections sont loin sous la description (demande de Loïc) */

/* ── v0.16.1 Barques et dauphins (faune.js) : les barques suivent un huit sur l'eau, sous les batiments ; un dauphin
   saute un tour sur huit, comme l'ecume nait un tour sur quatre. ── */
.faune-barque, .carte .faune-barque { z-index: 2; }
.barque { position: absolute; width: 4%; transform: translate(-50%, -50%); filter: drop-shadow(0 .3cqw .2cqw #0005); }
.barque.vers-la-gauche .pellicule { scale: -1 1; }
.carte .barque { width: 2.4%; }
.dauphin { position: absolute; z-index: 1; width: 3%; transform: translate(-50%, -50%); opacity: 0; animation: saut calc(var(--duree) * 8) linear infinite; }
.carte .dauphin { width: 2.2%; }
@keyframes saut { 0% { opacity: 0; } 1% { opacity: 1; } 12% { opacity: 1; } 12.5%, 100% { opacity: 0; } }

/* ── v0.17 Musique : le curseur de volume du menu ── */
.option.curseur input[type="range"] { width: 150px; vertical-align: middle; margin-left: 8px; accent-color: var(--or); }

/* ── v0.17.3 Tour visuel (demande de Loic : « sur smartphone l'encadre de chaque ressource est tres serre, on ne voit pas
   la production / min ») : sur telephone aussi, chaque jauge tient sur deux lignes — le stock, et dessous ce qui rentre
   par minute — et les cinq jauges se partagent la largeur a egalite. ── */
@media (max-width: 520px) {
  .jauges { gap: 4px; }
  .jauge { flex: 1 1 0; min-width: 0; justify-content: center; gap: 4px; padding: 2px 5px; border-radius: 10px; font-size: .76rem; }
  .jauge .icone { height: 1.45em; }
  .pile { line-height: 1.02; }
  .pile small { display: block; font-size: .58rem; }
  .pile b { font-size: .8rem; }
}
/* Un bouton de quantite (« Max 10 ») ne se coupe jamais en deux lignes ; le libelle d'une ligne de fiche non plus. */
.pas-a-pas button { white-space: nowrap; }
.ligne > :first-child { flex: none; }
/* Tablette debout (600-899 px) : le plan ne prend que le haut de l'ecran, le tiroir replie montre donc deja le debut de
   la fiche (titre, niveau, vignette) au lieu d'une simple poignee. */
@media (min-width: 600px) and (max-width: 899px) {
  .ecran-cite, .ecran-carte { padding-bottom: 36dvh; }
  .ecran-cite .fiche:not(.ouvert), .ecran-carte .fiche:not(.ouvert) { transform: translateY(calc(100% - 36dvh)); }
}

/* Le monstre d'un repaire anime aussi le titre de sa fiche (`symboleLieu` dans le h2) : a la taille d'une icone, pas de
   toute la largeur (retour de Loic : « les icones animees des unites a combattre sont enormes »). */
h2 .pellicule, h3 .pellicule, .fiche .pellicule.monstre { display: inline-block; width: 1.5em; vertical-align: middle; margin-right: 2px; }

/* ── v0.18 Les Grands travaux : les monuments poses sur le sol de la cite (data/travaux.js : place x, y en % du sol, l en
   cqw ; ancres en bas au centre, empiles par y comme les tuiles). Acheve = l'image ; en chantier = la grue et le
   charpentier ; a batir = un panneau qui appelle. La fiche de l'Agora porte les cartes (section « Grands travaux »). ── */
.monument { position: absolute; transform: translate(-50%, -100%); background: none; border: 0; padding: 0; cursor: pointer; color: inherit; }
.monument > img, .monument .fantome > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 .4cqw .3cqw #0007); } /* jamais `.monument img` : les pellicules des artisans et l'icone du chrono en etaient ecrasees */
.monument .repli { display: block; font-size: 3.4cqw; line-height: 1; filter: drop-shadow(0 .3cqw .2cqw #0008); }
.monument.acheve:hover img, .monument.acheve:focus-visible img { filter: drop-shadow(0 0 .7cqw #e9c46aaa); }
.monument.en-chantier { height: 5cqw; }
.monument .chantier-monument { position: absolute; left: 0; right: 0; bottom: 0; height: 100%; }
.monument .chantier-monument .pellicule { position: absolute; bottom: 0; }
.monument .chantier-monument .grue { left: 8%; width: 4.9cqw; }
.monument .chantier-monument .charpentier { left: 62%; width: 2cqw; }
.monument .chrono { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); white-space: nowrap; font-size: .68rem; background: #0b1220e6;
                    border: 1px solid var(--trait); border-radius: 999px; padding: 0 6px; color: var(--or); font-variant-numeric: tabular-nums; }
.decret.verrou { opacity: .6; }
.travail .barre { height: 6px; background: var(--creux); border: 1px solid var(--trait); border-radius: 4px; overflow: hidden; margin: 8px 0 3px; }
.travail .barre > div { height: 100%; background: var(--or); }

/* ── v0.20 D + F : le bilan de chapitre (plein écran : un panneau lisible sur la scène du chapitre clos), les hauts faits
   de l'écran-titre (vingt trophées, tous nommés, en or quand ils sont gagnés), Nouvelle partie + ── */
.cinematique.bilan { cursor: default; overflow-y: auto; display: grid; place-items: center; padding: 18px; }
.cinematique.bilan .fond { filter: brightness(.5) saturate(.85); }
.cinematique.bilan .panneau { position: relative; z-index: 1; width: 100%; max-width: 640px; background: #0b1220e0; border: 1px solid var(--trait);
  border-radius: 16px; padding: 22px 20px calc(18px + env(safe-area-inset-bottom)); text-align: center; animation: apparition .9s ease .2s both; }
.cinematique.bilan h1 { font-size: clamp(1.5rem, 4.5vw, 2.2rem); margin: 4px 0 8px; animation: none; }
.cinematique.bilan .surtitre { animation: none; }
.cinematique.bilan .chiffres { margin: 12px 0; }
.cinematique.bilan .conseil { display: grid; gap: 10px; text-align: left; margin: 14px 0 6px; }
.cinematique.bilan .conseil figure { margin: 0; display: grid; grid-template-columns: 56px 1fr; gap: 12px; align-items: center; }
.cinematique.bilan .conseil .portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: top; border: 2px solid var(--trait);
  font-size: 1.8rem; line-height: 52px; text-align: center; display: block; }
.cinematique.bilan .conseil figcaption span { font-weight: 700; font-size: .92rem; }
.cinematique.bilan .conseil p { margin: 2px 0 0; font-size: .95rem; line-height: 1.45; font-style: italic; color: #e8e2d0; animation: none; }
.cinematique.bilan .faits { font-size: .88rem; }
.cinematique.bilan .action { margin-top: 12px; }
@media (orientation: portrait) { .cinematique.bilan .fond { height: 100%; } }

.hauts-faits { margin-top: 14px; text-align: left; }
.hauts-faits summary { cursor: pointer; color: var(--discret); font-size: .86rem; text-align: center; list-style: none; }
.hauts-faits summary::-webkit-details-marker { display: none; }
.hauts-faits[open] summary { color: var(--or); }
.hauts-faits .trophees { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.hauts-faits figure { margin: 0; display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; background: var(--creux); border-radius: 10px;
  padding: 6px 8px; font-size: .74rem; color: var(--discret); line-height: 1.3; }
.hauts-faits img, .hauts-faits .medaillon { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; border: 2px solid var(--trait); display: grid;
  place-items: center; background: #0b1220; font-size: 1.15rem; }
.hauts-faits .medaillon .icone { width: 22px; height: 22px; }
.hauts-faits .atteint img, .hauts-faits .atteint .medaillon { border-color: var(--or); box-shadow: 0 0 10px #e9c46a55; }
.hauts-faits figcaption strong { display: block; color: var(--texte); }
.hauts-faits .atteint figcaption strong { color: var(--or); }
.hauts-faits .inconnu img, .hauts-faits .inconnu .medaillon { filter: grayscale(1) brightness(.55); }
.plus-bandeau { background: var(--creux); border: 1px solid var(--or); border-radius: 12px; padding: 10px 12px; margin: 6px 0 12px; font-size: .9rem; }
.plus-bandeau .surtitre { color: var(--or); }
.plus-bandeau p { margin: 4px 0 6px; }
.trophees-partie { justify-content: center; margin: 4px 0 12px; }

/* ── v0.21 B. Le Conseil : l'onglet du Journal (une carte par conseiller, jauge de confiance à deux seuils), la ligne du
   conseiller sous la quête, le Conseil à l'épilogue ── */
.conseiller { display: flex; gap: 12px; background: var(--creux); border-radius: 12px; padding: 12px; margin-bottom: 10px; border-left: 4px solid var(--trait); }
.conseiller.defiance { border-left-color: var(--rouge); }
.conseiller.devouement { border-left-color: var(--or); }
.conseiller > div { flex: 1; min-width: 0; }
.conseiller h3 { margin: 0 0 8px; }
.jauge-confiance { position: relative; height: 10px; border-radius: 999px; background: #0b1220; border: 1px solid var(--trait); overflow: hidden; }
.jauge-confiance i { display: block; height: 100%; background: linear-gradient(90deg, var(--rouge), var(--or) 60%, var(--vert)); transition: width .6s ease; }
.jauge-confiance b { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff7; }
.conseiller .mot { margin: 6px 0 4px; }
.conseiller .pastilles { margin: 4px 0; }
.conseiller .raison { color: var(--rouge); margin: 4px 0; font-size: .9rem; }
.conseiller .gouts { font-size: .82rem; margin: 6px 0 0; line-height: 1.4; }
.confiance-quete { margin: 2px 0 0; font-size: .85rem; }
.confiance-quete .lien { font-size: inherit; padding: 0; }
.conseil-fin { text-align: center; margin: -6px 0 10px; }

/* ── v0.22 G. Serveur partagé : la porte de l'écran-titre, l'identité, le panneau admin du menu ── */
.admin-porte { margin-top: 14px; }
.admin-porte summary { cursor: pointer; color: var(--discret); font-size: .86rem; }
.identite { margin-top: 14px; }
.identite .lien { margin-top: 0; }
.joueur:not(.noeud) { background: var(--creux); border-radius: 10px; padding: 8px 12px; margin: 8px 0; text-align: left; } /* :not(.noeud) : la cite du joueur sur la carte portait ce cadre (v0.34) */
.joueur .sauvegarde { border-bottom: 0; padding: 6px 0 0; }
.jeton { font-family: ui-monospace, Consolas, monospace; font-size: .82rem; background: var(--creux); padding: 2px 6px; border-radius: 6px; user-select: all; }

/* ── v0.23 E. Le Long Siège : le choix du dieu sur l'écran-titre ── */
.choix-dieux { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 8px 0; }
.choix-dieux button { background: var(--creux); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 4px; display: grid; justify-items: center; gap: 4px; font-size: .8rem; min-height: 44px; }
.choix-dieux button .icone { width: 28px; height: 28px; }
.choix-dieux button.actif { border-color: var(--or); color: var(--or); box-shadow: 0 0 0 1px #e9c46a44 inset; }

/* ── v0.24.1 Monuments (premiers retours de Loïc) : le chantier d'un monument est le MÊME chantier vivant que celui
   des bâtiments (grue au fond, charpentier, tailleur, poussière), posé au pied du monument sur un fantôme de ce qu'on
   bâtit — avant, les artisans héritaient des règles des tuiles (décalés en l'air, étirés entre top et bottom) ── */
.monument.en-chantier { height: calc(var(--lm) * .6); }
.monument .fantome { position: absolute; left: 0; right: 0; bottom: 0; opacity: .38; filter: grayscale(.5); }
.monument .fantome > img { filter: none; }
.monument .pellicule img { width: auto; height: 100%; filter: none; }
.monument .fantome .repli { display: block; font-size: 3.4cqw; line-height: 1; filter: none; }
.monument .ouvrage.monumental { left: 50%; top: auto; bottom: 0; width: max(100%, 9cqw); height: calc(max(var(--lm), 9cqw) * .6); transform: translateX(-50%); z-index: 2; --l: max(var(--lm), 9cqw); }
.monument .ouvrage.monumental .artisan.grue { left: 22%; top: 55%; }
.monument .ouvrage.monumental .artisan.charpentier { left: 66%; top: 82%; }
.monument .ouvrage.monumental .artisan.tailleur { left: 40%; top: 98%; }
.monument.en-chantier .chrono { top: calc(100% + .3cqw); }

/* ── v0.25.1 : le Conseil dans un evenement — visages sur les choix, confiance dans une section a part ──────────
   (fenetres.evenement ; ses retours : les lettres A/B/C ne se lisaient pas, la jauge etait trop etroite sur mobile). */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.pastille.conseil { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px 2px 2px; font-weight: 700; }
.pastille.conseil .portrait { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; margin: 0;
  border: 1.5px solid currentColor; background: #0e1526; }
.pastille.conseil .portrait.repli { display: grid; place-items: center; font-size: 1rem; background: var(--teinte, #333); }
.conseil-bande { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--trait); display: grid; gap: 8px; }
.conseil-bande h3 { margin: 0 0 2px; font-size: .9rem; letter-spacing: .04em; text-transform: uppercase; color: var(--or); }
.conseil-bande h3 .discret { text-transform: none; letter-spacing: 0; font-weight: 400; }
.conseiller { display: flex; gap: 12px; align-items: center; min-width: 0; background: var(--creux); border: 1px solid var(--trait);
  border-radius: 12px; padding: 8px 12px; }
.conseiller .infos { flex: 1; min-width: 0; }
.conseiller .nom { font-size: .95rem; line-height: 1.3; }
.conseiller .portrait { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 12%; flex: none;
  border: 2px solid var(--trait); margin: 0; }
.conseiller .portrait.repli { display: grid; place-items: center; font-size: 1.6rem; background: var(--teinte, #333); }
.conseiller.defiance .portrait { border-color: var(--rouge); }
.conseiller.devouement .portrait { border-color: var(--or); }
.conseiller .confiance { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.conseiller .jauge { flex: 1; min-width: 90px; height: 10px; border-radius: 5px; background: #1c2740; overflow: hidden;
  box-shadow: inset 0 1px 2px #0006; }
.conseiller .jauge i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #a8772a, var(--or)); }
.conseiller.defiance .jauge i { background: linear-gradient(90deg, #7a1c2a, var(--rouge)); }
.conseiller .valeur { min-width: 2.2ch; text-align: right; font-size: 1.05rem; }
.conseiller .mot { font-size: .82rem; margin-top: 3px; }
@media (min-width: 720px) {
  .conseil-bande { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
  .conseil-bande h3 { grid-column: 1 / -1; }
}
@media (max-width: 520px) {
  .conseiller { padding: 8px 10px; gap: 10px; }
  .conseiller .portrait { width: 48px; height: 48px; }
  .pastille.conseil .portrait { width: 30px; height: 30px; }
  .pastille.conseil { font-size: .9rem; }
}

/* ── v0.25.3 : le generique en pause (bouton en haut a gauche) ── */
.generique .arret { right: auto; left: 14px; }
.generique.arrete .arret { border-color: var(--or); color: var(--or); }
.generique.arrete .indication { visibility: hidden; }

/* ── v0.25.4 : « Plus tard » d'une crise, un vrai bouton avec son icone (icones/plus_tard, sinon un sablier) ── */
.fenetre .plus-tard { margin-top: 14px; display: inline-flex; align-items: center; gap: 10px; width: auto; text-align: left; }
.fenetre .plus-tard .icone, .fenetre .plus-tard img { width: 28px; height: 28px; flex: none; }
.fenetre .plus-tard .repli { font-size: 1.4rem; line-height: 1; }

/* ── v0.26 : le fond du jeu, une tenture grecque (sa demande : sortir du bleu marine uni ; son « Go B ») ────────────
   body::before est un calque FIXE derriere tout : la base, de douces veines, le motif en deux couches decalees d'un
   pixel (une ombre, une lumiere : un leger relief), et une vignette qui assombrit les bords. Le motif se choisit dans
   le menu (`body[data-fond]`, option `fond`) : meandre (defaut), palmettes, vagues, ou uni. Sa taille suit l'ecran
   (--carreau : plus serre sur telephone, plus ample sur PC). Les saisons le teintent a peine. Rien a charger. */
:root { --carreau: clamp(46px, 6vw, 88px);
  --tenture-meandre-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M5 5H43V43H13V13H35V35H21V21H28' fill='none' stroke='%23172340' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E"); --tenture-meandre-ombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M5 5H43V43H13V13H35V35H21V21H28' fill='none' stroke='%2304070e' stroke-width='3' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E");
  --tenture-palmettes-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='128' viewBox='0 0 64 128'%3E%3Cg%3E%3Cpath d='M32 60L13 49M32 60L17.9 43.1M32 60L24.5 39.3M32 60V38M32 60L39.5 39.3M32 60L46.1 43.1M32 60L51 49' fill='none' stroke='%23172340' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='62.5' r='3.2' fill='%23172340'/%3E%3C/g%3E%3Cg transform='translate%2832 64%29'%3E%3Cpath d='M32 60L13 49M32 60L17.9 43.1M32 60L24.5 39.3M32 60V38M32 60L39.5 39.3M32 60L46.1 43.1M32 60L51 49' fill='none' stroke='%23172340' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='62.5' r='3.2' fill='%23172340'/%3E%3C/g%3E%3Cg transform='translate%28-32 64%29'%3E%3Cpath d='M32 60L13 49M32 60L17.9 43.1M32 60L24.5 39.3M32 60V38M32 60L39.5 39.3M32 60L46.1 43.1M32 60L51 49' fill='none' stroke='%23172340' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='62.5' r='3.2' fill='%23172340'/%3E%3C/g%3E%3C/svg%3E"); --tenture-palmettes-ombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='128' viewBox='0 0 64 128'%3E%3Cg%3E%3Cpath d='M32 60L13 49M32 60L17.9 43.1M32 60L24.5 39.3M32 60V38M32 60L39.5 39.3M32 60L46.1 43.1M32 60L51 49' fill='none' stroke='%2304070e' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='62.5' r='3.2' fill='%2304070e'/%3E%3C/g%3E%3Cg transform='translate%2832 64%29'%3E%3Cpath d='M32 60L13 49M32 60L17.9 43.1M32 60L24.5 39.3M32 60V38M32 60L39.5 39.3M32 60L46.1 43.1M32 60L51 49' fill='none' stroke='%2304070e' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='62.5' r='3.2' fill='%2304070e'/%3E%3C/g%3E%3Cg transform='translate%28-32 64%29'%3E%3Cpath d='M32 60L13 49M32 60L17.9 43.1M32 60L24.5 39.3M32 60V38M32 60L39.5 39.3M32 60L46.1 43.1M32 60L51 49' fill='none' stroke='%2304070e' stroke-width='3.4' stroke-linecap='round'/%3E%3Ccircle cx='32' cy='62.5' r='3.2' fill='%2304070e'/%3E%3C/g%3E%3C/svg%3E");
  --tenture-vagues-clair: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32' viewBox='0 0 48 32'%3E%3Cpath d='M0 22A12 12 0 0 1 24 22A12 12 0 0 1 48 22M24 22A7 7 0 0 0 10 22A3.5 3.5 0 0 0 17 22' fill='none' stroke='%23172340' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); --tenture-vagues-ombre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='32' viewBox='0 0 48 32'%3E%3Cpath d='M0 22A12 12 0 0 1 24 22A12 12 0 0 1 48 22M24 22A7 7 0 0 0 10 22A3.5 3.5 0 0 0 17 22' fill='none' stroke='%2304070e' stroke-width='2.8' stroke-linecap='round'/%3E%3C/svg%3E"); }
body { position: relative; isolation: isolate; }
body::before { content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-color: var(--fond);
  background-image:
    radial-gradient(120% 90% at 50% 18%, #0000 42%, #04070fd9 100%),
    var(--motif-clair), var(--motif-ombre),
    radial-gradient(55% 40% at 18% 28%, #16233f80, #0000 70%), radial-gradient(50% 45% at 82% 72%, #0f1b3480, #0000 70%),
    radial-gradient(40% 30% at 55% 95%, #121d3666, #0000 70%);
  background-size: 100% 100%, var(--motif-taille), var(--motif-taille), 100% 100%, 100% 100%, 100% 100%;
  background-position: 0 0, 0 0, 1px 1px, 0 0, 0 0, 0 0;
  background-repeat: no-repeat, repeat, repeat, no-repeat, no-repeat, no-repeat; }
body, body[data-fond="meandre"] { --motif-clair: var(--tenture-meandre-clair); --motif-ombre: var(--tenture-meandre-ombre); --motif-taille: var(--carreau) var(--carreau); }
body[data-fond="palmettes"] { --motif-clair: var(--tenture-palmettes-clair); --motif-ombre: var(--tenture-palmettes-ombre); --motif-taille: calc(var(--carreau) * 1.25) calc(var(--carreau) * 2.5); }
body[data-fond="vagues"] { --motif-clair: var(--tenture-vagues-clair); --motif-ombre: var(--tenture-vagues-ombre); --motif-taille: var(--carreau) calc(var(--carreau) * .667); }
body[data-fond="uni"]::before { background-image: radial-gradient(120% 90% at 50% 18%, #0000 42%, #04070fd9 100%); background-size: 100% 100%; }
body[data-saison="ete"]::before { filter: sepia(.08) brightness(1.03); }
body[data-saison="automne"]::before { filter: sepia(.22) hue-rotate(-18deg); }
body[data-saison="hiver"]::before { filter: saturate(.75) brightness(.96) hue-rotate(10deg); }
/* Une frise fine sous la barre du haut : le meandre d'or, eteint. */
#barre::after { content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 7px; background: var(--meandre) center / 14px 7px repeat-x; opacity: .28; pointer-events: none; }
/* Le choix du fond dans le menu. */
.option.fonds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.option.fonds .boutons { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; flex: 1 1 220px; min-width: 0; } /* flex: 1 : il se plie a la largeur de la carte, les pastilles passent a la ligne */
.option.fonds button { background: var(--creux); border: 1px solid var(--trait); border-radius: 999px; padding: 5px 12px; font-size: .88rem; }
.option.fonds button.actif { border-color: var(--or); color: var(--or); }

/* ── v0.26.1 : fonds illustres (ses images), menu en cartes, reglages sur l'ecran-titre ───────────────────────────── */
body[data-fond="image"] { --fond-image: var(--fond-paysage); }
@media (orientation: portrait) { body[data-fond="image"] { --fond-image: var(--fond-portrait); } }
body[data-fond="image"]::before { background-image: radial-gradient(120% 90% at 50% 18%, #0000 40%, #04070fe6 100%), linear-gradient(#070b14a6, #070b14a6), var(--fond-image, none);
  background-size: 100% 100%, 100% 100%, cover; background-position: center; background-repeat: no-repeat; }
.groupe { background: var(--creux); border: 1px solid var(--trait); border-radius: 12px; padding: 10px 14px 12px; margin-top: 12px; text-align: left; }
.groupe h3 { font-size: 1rem; margin: 0 0 4px; }
.groupe .option { padding: 6px 0; min-height: 40px; }
.groupe .action, .groupe .boutons.large { margin-top: 8px; }
.fenetre.menu h2.sous { margin-top: 22px; font-size: 1.3rem; }
.reglages .ligne { display: flex; flex-wrap: wrap; align-items: center; gap: 0 14px; }
.reglages .ligne .option { flex: 1 1 170px; }
.reglages .ligne .option.curseur { flex: 1 1 200px; min-height: 36px; padding: 2px 0; }
.reglages .option.curseur input[type="range"] { flex: 1; min-width: 110px; max-width: 240px; margin-left: 8px; }
@media (min-width: 720px) {
  .reglages:not(.compact) { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .reglages:not(.compact) .groupe { margin-top: 0; }
  .reglages:not(.compact) .groupe:nth-child(3) { grid-column: 1 / -1; }
}
.fenetre.titre { position: relative; }
.fenetre.titre .rouage { position: absolute; top: 12px; right: 12px; z-index: 2; width: 42px; height: 42px; border-radius: 50%; font-size: 1.3rem; line-height: 1;
  background: #0009; color: #f3eee0; border: 1px solid #ffffff44; display: grid; place-items: center; }
.fenetre.titre .rouage[aria-expanded="true"] { border-color: var(--or); color: var(--or); }
.reglages-titre { margin-top: 14px; text-align: left; animation: apparition .2s ease; }
.reglages-titre .lien { display: block; margin: 10px auto 0; }

/* ── v0.26.2 : les recompenses livrees en un seul toast, quand l'ecran est libre ── */
.toast { pointer-events: auto; cursor: pointer; }
.toast.recompense { text-align: left; max-width: 460px; }
.toast .titre-toast { font-weight: 700; color: var(--or); margin-bottom: 3px; }
.toast .ligne-toast { font-size: .92rem; line-height: 1.4; }
.toast .ligne-toast.gain { font-weight: 700; margin-bottom: 2px; }
@media (min-width: 900px) { #toasts { left: 16px; right: auto; align-items: flex-start; max-width: 460px; } }

/* ── v0.27 : l'ecran Armee en onglets, cartes de recrutement compactes, bouton Licencier ── */
.unite.compacte { padding: 8px 10px; gap: 10px; align-items: flex-start; }
.unite.compacte .img-unite { width: 60px; height: 60px; }
.unite.compacte h3 { font-size: 1rem; }
.unite.compacte .stats { font-size: .82rem; gap: 3px 10px; margin: 3px 0; }
.unite.compacte .role { font-size: .8rem; line-height: 1.35; margin: 2px 0 4px; }
.unite.compacte .recruter { margin-top: 4px; gap: 6px; }
.unite.compacte .pas-a-pas button { min-width: 32px; height: 32px; }
.unite.compacte .recruter .action { min-height: 36px; padding: 6px 12px; }
.unite.compacte .couts { align-items: center; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; }
.unite .couts.licenciement { justify-content: flex-end; margin-top: 6px; }
.unite .licencier { padding: 5px 12px; font-size: .8rem; background: #2a151b; border: 1px solid #6b2a35; border-radius: 8px; color: #ff9aa2; }
.unite .licencier.arme { background: var(--rouge); border-color: var(--rouge); color: #fff; font-weight: 700; }

/* ── v0.27.1 : sur grand ecran, un decor derriere l'ecran-titre (scenes/ouverture_athenes, flou et assombri) ── */
@media (min-width: 900px) {
  #modale.titre::before { content: ""; position: fixed; inset: -24px; z-index: -1; pointer-events: none;
    background: linear-gradient(#050910a6, #050910c4), var(--fond-titre, none) center 40% / cover no-repeat; filter: blur(5px); }
}

/* ── v0.27.4 : la liste des chantiers en cours, sous le plan de la cite (des qu'il y en a plusieurs) ── */
.chantiers-en-cours { padding: 10px 14px 12px; }
.chantiers-en-cours h3 { margin: 0 0 8px; font-size: 1rem; }
.chantiers-en-cours .liste { display: grid; gap: 6px; }
@media (min-width: 900px) { .chantiers-en-cours .liste { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 14px; } }
.chantier-ligne { display: block; width: 100%; text-align: left; background: var(--creux); border: 1px solid var(--trait); border-radius: 10px;
  padding: 8px 10px; color: inherit; }
.chantier-ligne:hover { border-color: var(--or); }
.chantier-ligne .tete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.chantier-ligne .nom { font-weight: 600; }
.chantier-ligne .reste { font-variant-numeric: tabular-nums; color: var(--or); white-space: nowrap; }
.chantier-ligne.prevu { opacity: .75; border-style: dashed; }
.chantier-ligne .barre { margin: 6px 0 0; }
.sous-plan { display: grid; gap: 12px; }
.troupes-ville { display: none; padding: 10px 14px 12px; } /* grand ecran seulement (sa demande) */
.troupes-ville h3 { margin: 0 0 6px; font-size: 1rem; }
.troupes-ville .ligne { padding: 4px 0; }
.troupes-ville .lien { margin-top: 6px; }
@media (min-width: 900px) {
  /* Placement explicite dans la grille de #ecran : la fiche garde la colonne de droite sur deux rangees, le bloc sous le plan
     prend la colonne de gauche (sans cela, l'auto-placement l'envoyait a droite et poussait la fiche sous le plan). */
  #ecran > .fiche { grid-column: 2; grid-row: 1 / span 2; }
  #ecran > .sous-plan { grid-column: 1; grid-row: 2; }
  .sous-plan { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
  .troupes-ville { display: block; }
}

/* ── v0.27.5 : le raid en approche se touche sur la carte ; sa fiche ; la fiche d'Athenes condensee ── */
.marqueur.ennemi { pointer-events: auto; cursor: pointer; background: none; border: 0; padding: 0; color: inherit; }
.marqueur.ennemi.en-cours { animation: none; }
.marqueur.ennemi.en-cours::before { content: ""; position: absolute; inset: -6px; border-radius: 50%; border: 2px solid var(--or); box-shadow: 0 0 10px #e9c46a99; }
.raid-carte { display: block; width: 100%; text-align: left; cursor: pointer; background: #3a0f16d9; border: 1px solid #b0303f; border-left: 4px solid var(--rouge); border-radius: 10px;
  padding: 8px 10px; margin: 0 0 8px; color: inherit; }
.raid-carte:hover { border-color: var(--or); }
.raid-carte .tete { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.raid-carte .reste { color: #ffd9dc; font-variant-numeric: tabular-nums; white-space: nowrap; }
.raid-carte .corps { display: block; margin: 4px 0; }
.issue-raid { display: inline-block; font-size: .82rem; border-radius: 999px; padding: 1px 9px; background: #1c2740; }
.issue-raid.bien { color: var(--vert); } .issue-raid.moyen { color: var(--orange); } .issue-raid.mal { color: var(--rouge); } .issue-raid.inconnu { color: var(--discret); }
.detail-defense { margin-top: 6px; }
.detail-defense summary { padding: 6px 0; }

/* ── v0.28.1 : le tutoriel (bulle 💡), le marquage 🎯 de l'objectif, le nombre de raids, les raids en grille ── */
#tuto { position: fixed; left: 10px; right: 10px; bottom: calc(var(--nav-h) + 10px + env(safe-area-inset-bottom)); z-index: 90; display: flex; justify-content: center; pointer-events: none; }
#tuto[hidden] { display: none; }
.tuto { pointer-events: auto; display: flex; gap: 10px; align-items: flex-start; max-width: 560px; background: #15203af5; border: 1px solid var(--or); border-radius: 12px;
  padding: 10px 12px; box-shadow: 0 8px 24px #000a; animation: apparition .25s ease; }
.tuto .lampe { font-size: 1.4rem; line-height: 1.2; flex: none; }
.tuto .corps { flex: 1; font-size: .92rem; line-height: 1.45; }
.tuto .boutons { display: flex; flex-direction: column; gap: 4px; align-items: stretch; flex: none; }
.tuto .boutons .action { margin: 0; padding: 6px 12px; min-height: 34px; font-size: .88rem; width: auto; }
.tuto .boutons .lien { font-size: .8rem; padding: 2px 0; }
@media (min-width: 900px) { #tuto { left: 50%; right: auto; transform: translateX(-50%); bottom: 16px; width: min(620px, calc(100% - 32px)); } }
@media (max-width: 520px) { .tuto { flex-wrap: wrap; } .tuto .boutons { flex-direction: row; width: 100%; justify-content: flex-end; align-items: center; gap: 12px; } }
.rappel.objectif { background: var(--or); box-shadow: 0 0 0 2px #0b1220, 0 0 8px #e9c46a; }
.tuile.objectif { filter: drop-shadow(0 0 .6cqw #e9c46acc); }
.etiquette.objectif { border-color: var(--or); box-shadow: 0 0 0 1px #e9c46a66, 0 0 10px #e9c46a99; animation: pouls-objectif 1.6s ease-in-out infinite; }
.etiquette .cible, .noeud .cible { font-size: .9em; }
.noeud.objectif .pastille { box-shadow: 0 0 0 2px var(--or), 0 0 12px #e9c46acc; animation: pouls-objectif 1.6s ease-in-out infinite; }
@keyframes pouls-objectif { 50% { box-shadow: 0 0 0 3px var(--or), 0 0 16px #e9c46a; } }
#bandeau .alerte.raid .nombre { font-style: normal; font-weight: 700; font-size: .78rem; background: #ffffff22; border-radius: 999px; padding: 0 6px; margin-left: 2px; }
.raids { display: grid; gap: 6px; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); margin-bottom: 8px; }
.raid-carte .icone { height: 20px; vertical-align: middle; }
.raids .raid-carte { margin: 0; padding: 6px 8px; font-size: .9rem; display: flex; flex-direction: column; align-items: stretch; gap: 3px; } /* un bouton en colonne flex : le verdict reste DANS la carte */
.raids .raid-carte .issue-raid { align-self: flex-start; }
.raids .raid-carte .tete strong { font-size: .92rem; }
.raids .raid-carte .corps { margin: 2px 0; font-size: .85rem; }

/* ── v0.28.2 : le menu condense — menus deroulants, carte « partie » ── */
.groupe.deroulant { padding: 0; }
.groupe.deroulant > summary { list-style: none; padding: 10px 14px; font-family: var(--titre); color: var(--or); font-size: 1rem; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.groupe.deroulant > summary::-webkit-details-marker { display: none; }
.groupe.deroulant > summary::after { content: "▸"; margin-left: auto; color: var(--discret); transition: transform .2s; }
.groupe.deroulant[open] > summary::after { transform: rotate(90deg); }
.groupe.deroulant[open] > summary { border-bottom: 1px solid var(--trait); }
.groupe.deroulant > :not(summary) { margin-left: 14px; margin-right: 14px; }
.groupe.deroulant > .discret:last-child, .groupe.deroulant > .sauvegarde:last-child { margin-bottom: 12px; }
.groupe.deroulant > .boutons.large { margin-top: 8px; }
.groupe.deroulant > .sauvegarde:first-of-type { margin-top: 8px; }
.groupe.partie .ligne { padding: 2px 0 6px; }
.groupe.partie .boutons.large { margin-top: 4px; }
.fenetre.menu .credits { margin-top: 12px; }

/* ── v0.29.0 : l'Ordre des habitants (jauge de la barre, bloc de la fiche d'Athenes), l'epilogue de la Chute ── */
/* La barre d'Ordre sous le nom de la cite (v0.29.6) : pleine a proportion, verte / or / rouge selon la bande, cliquable. */
.ordre-barre { display: block; width: 88px; height: 7px; margin: 4px 0 0; padding: 0; border: 1px solid var(--trait); border-radius: 999px;
  background: #0b1220; overflow: hidden; cursor: pointer; }
.ordre-barre i { display: block; height: 100%; background: var(--vert); border-radius: 999px; transition: width .6s ease; }
.ordre-barre.inquiete i { background: var(--or); }
.ordre-barre.revolte i, .ordre-barre.vide i { background: var(--rouge); }
.ordre-barre.revolte, .ordre-barre.vide { animation: pouls-ordre 1.6s ease-in-out infinite; }
.ordre-barre:hover { border-color: var(--or); }
@keyframes pouls-ordre { 50% { box-shadow: 0 0 0 2px #e6394655, 0 0 10px #e6394688; } }
@media (max-width: 520px) { .ordre-barre { width: 64px; height: 6px; margin-top: 3px; } }
.bloc-ordre { background: var(--creux); border-radius: 12px; padding: 8px 10px; margin: 8px 0; border-left: 4px solid var(--trait); } /* bloc-ordre (v0.34) : `.ordre` est aussi une ligne de la file de recrutement */
.bloc-ordre.inquiete { border-left-color: var(--orange); }
.bloc-ordre.revolte, .bloc-ordre.vide { border-left-color: var(--rouge); }
.bloc-ordre .ligne { padding: 0 0 4px; }
.bloc-ordre .jauge-ordre { margin: 2px 0 6px; }
.bloc-ordre .mot { margin: 0 0 4px; }
.bloc-ordre .mot .pastilles { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 0; } /* v0.34 : une pastille ne se coupe plus en deux lignes */
.bloc-ordre .mot .pastille { white-space: nowrap; }
.bloc-ordre .discret, .bloc-ordre .alerte-texte { margin: 2px 0 0; font-size: .85rem; }
.fenetre.epilogue.chute h1 { color: var(--rouge); }
.alerte-texte.vacille { font-weight: 600; }

/* ── v0.29.6 : le fil d'alertes aligne (icone, texte et chrono sur une meme ligne de 28 px), l'Agora en onglets ── */
#bandeau .alerte { height: 28px; padding: 0 10px; line-height: 1; }
#bandeau .alerte .icone { width: 18px; height: 18px; object-fit: contain; flex: none; }
#bandeau .alerte > :first-child:not(.icone) { font-size: 15px; line-height: 1; }
#bandeau .alerte .texte, #bandeau .alerte b { line-height: 1; }
#bandeau .alerte .nombre { line-height: 16px; }
#bandeau .fil .objectif { display: inline-flex; align-items: center; gap: 5px; height: 28px; line-height: 1; }
#bandeau .fil .objectif .icone { width: 18px; height: 18px; object-fit: contain; flex: none; }
#bandeau .fil .objectif strong, #bandeau .fil .objectif span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.onglets.agora { margin: 12px 0 8px; }
.onglets.agora button { padding: 7px 4px; min-height: 38px; font-size: .88rem; }
.onglets.agora button small { font-size: .74rem; color: var(--discret); margin-left: 2px; }
.onglets.agora button.actif small { color: var(--or); }

/* ── v0.29.7 (sa demande, telephone) : la fiche compacte — vignette a gauche, « Actuellement » et « Niveau x » a droite, les
   boutons juste dessous, la description a la fin ; le tiroir se FERME au lieu de se replier en bandeau (le plan et les
   chantiers sous le plan restent visibles) ; les chantiers sous le plan en plus petit. ── */
.entete-fiche .resume .ligne { padding: 5px 0; }
@media (max-width: 899px) {
  .ecran-cite .fiche, .ecran-carte .fiche { display: flex; flex-direction: column; }
  .fiche > .description { order: 10; margin: 12px 0 0; color: var(--discret); font-size: .88rem; }
  .entete-fiche { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 6px; }
  .entete-fiche .vignette { flex: 0 0 104px; width: 104px; height: 104px; min-height: 0; padding: 6px; margin: 0; }
  .entete-fiche .vignette img { max-width: 92px; max-height: 92px; }
  .entete-fiche .resume { flex: 1; min-width: 0; }
  .entete-fiche .resume .ligne { flex-direction: column; align-items: flex-start; gap: 1px; padding: 2px 0 6px; border: 0; }
  .entete-fiche .resume .ligne > :first-child { color: var(--discret); font-size: .8rem; }
  .entete-fiche .resume .ligne strong { font-size: .9rem; line-height: 1.3; text-align: left; }
  .fiche > h2 { margin-bottom: 4px; }
  .fiche .niveau-points { margin-bottom: 8px; }
}
@media (max-width: 599px) {
  .ecran-cite, .ecran-carte { padding-bottom: 12px; }
  .ecran-cite .fiche:not(.ouvert), .ecran-carte .fiche:not(.ouvert) { transform: translateY(calc(100% + 24px)); box-shadow: none; }
  #toasts { bottom: calc(var(--nav-h) + 16px); }
  .chantiers-en-cours { padding: 6px 10px 8px; }
  .chantiers-en-cours h3 { font-size: .9rem; margin: 0 0 4px; }
  .chantiers-en-cours .liste { gap: 4px; }
  .chantier-ligne { padding: 4px 8px; border-radius: 8px; }
  .chantier-ligne .tete { font-size: .84rem; }
  .chantier-ligne .barre { height: 4px; margin-top: 3px; }
}

/* ── v0.31 — la juste mesure : le Rappel d'une armee en route, la mesure d'un raid ───────────────────────────── */
.action.rappeler { display: flex; align-items: center; gap: 10px; text-align: left; margin-top: 8px; }
.action.rappeler .icone, .action.rappeler img { width: 28px; height: 28px; flex: none; }
.action.rappeler small { color: var(--texte, inherit); opacity: .8; }
.ligne-rappel { display: grid; gap: 4px; margin-bottom: 6px; }
.ligne-rappel > .action.rappeler.compact { margin-top: 0; padding: 5px 10px; gap: 8px; font-size: .88rem; }
.ligne-rappel > .action.rappeler.compact small { display: inline; margin-left: 6px; }
.ligne-rappel > .action.rappeler.compact .icone, .ligne-rappel > .action.rappeler.compact img { width: 22px; height: 22px; }
.dehors { margin: 8px 0; padding: 8px 10px; border: 1px solid var(--trait); border-left: 3px solid var(--or); border-radius: 10px; background: var(--creux); }
.dehors .tete { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.dehors .tete .pellicule { width: 26px; }
.dehors .verdict-rappel { margin: 6px 0 0; font-size: .88rem; color: var(--vert); }
.dehors.tard { border-left-color: var(--rouge); }
.dehors.tard .verdict-rappel { color: var(--rouge); }
.mesure-raid { margin: 6px 0; padding: 6px 8px; border-left: 3px solid var(--rouge); background: var(--creux); font-size: .88rem; }

/* ── v0.32 — les exigences du Conseil (onglets Objectifs et Conseil du Journal) ────────────────────────────── */
.exigence { display: flex; gap: 10px; align-items: flex-start; margin: 8px 0; padding: 8px 10px; border: 1px solid var(--trait); border-left: 3px solid var(--or); border-radius: 10px; background: var(--creux); }
.exigence .portrait { width: 44px; height: 44px; flex: none; }
.exigence .parole { margin: 0 0 4px; }
.exigence .discret { margin: 0; }
.conseiller .demande { margin: 6px 0 0; font-size: .9rem; }

/* ── v0.33 — les epreuves de Nouvelle partie + (choix au lancement) ───────────────────────────────────────── */
.epreuves-choix { margin: 12px 0; padding: 10px 12px; border: 1px solid var(--trait); border-radius: 12px; background: var(--creux); text-align: left; }
.epreuves-choix .surtitre small { font-weight: 400; opacity: .7; text-transform: none; letter-spacing: 0; }
.epreuves-choix .option.epreuve { display: flex; gap: 8px; align-items: flex-start; margin: 6px 0; }
.epreuves-choix .option.epreuve small { display: block; }
.epreuves-choix .option.epreuve.actif strong { color: var(--or); }

/* ── v0.34 — l'interface au propre (sa demande : « ameliorer au maximum la disposition et la place que prennent toutes les
   informations, sur mobile, tablette et PC ») : les avis en haut et regroupes, ce que preparent les menaces, la barre de
   la tablette debout, les fiches qui ne s'ecrasent plus, l'Armee et le Journal plus compacts, les fenetres sur telephone. ── */

/* La largeur de la fiche de droite sur grand ecran : plus etroite sur une tablette couchee, pour laisser le plan entier. */
:root { --large-fiche: 360px; }
@media (min-width: 900px) {
  :root { --large-fiche: clamp(320px, 28vw, 380px); }
  #ecran { grid-template-columns: minmax(0, 1fr) var(--large-fiche); }
  #ecran.ecran-journal { grid-template-columns: minmax(0, 1fr); }
  .cadre { width: calc(max(100%, 600px) * var(--zoom, 1)); } /* 720 px faisaient deborder le plan sur une tablette couchee */
}

/* Les avis : EN HAUT, juste sous le fil d'alertes (main.mesurerLeHaut pose --bas-du-haut), le plus recent en tete ; sur grand
   ecran, centres au-dessus du plan ou de la carte (la fiche reste libre). Le pouce et les boutons des fiches, en bas, aussi. */
#toasts { top: calc(var(--bas-du-haut, 96px) + 8px); bottom: auto; left: 10px; right: 10px; max-width: none; align-items: center; }
@media (min-width: 900px) { #toasts { top: calc(var(--bas-du-haut, 120px) + 10px); bottom: auto; left: 16px; right: calc(var(--large-fiche) + 48px); max-width: none; align-items: center; } }
.toast { max-width: min(480px, 100%); animation: descente .25s ease; }
@keyframes descente { from { opacity: 0; transform: translateY(-10px); } }
.toast.sortie { transform: translateY(-8px); }
.toast.groupe { text-align: left; }
.toast.ouvre::after, .ligne-toast.ouvre::after { content: " ›"; color: var(--or); font-weight: 700; }
.ligne-toast.ouvre { cursor: pointer; }
.ligne-toast.ouvre:hover { color: var(--or); }
.ligne-toast.alerte { color: #ffc2c7; }
.ligne-toast:is(.alerte, .or, .bien, .info)::before { content: "●"; display: inline-block; width: 1em; font-size: .7em; vertical-align: .12em; color: var(--discret); }
.ligne-toast.alerte::before { color: var(--rouge); }
.ligne-toast.or::before { color: var(--or); }
.ligne-toast.bien::before { color: var(--vert); }
@media (max-width: 599px) { .toast { padding: 7px 12px; font-size: .9rem; } .toast .ligne-toast { font-size: .86rem; } }

/* La bulle du tutoriel : sur grand ecran, en bas du plan (elle couvrait le bouton principal de la fiche) ; sur telephone,
   elle se tait tant que le tiroir est ouvert (meme raison). */
@media (min-width: 900px) { #tuto { left: 16px; right: auto; transform: none; bottom: 16px; width: min(560px, calc(100vw - var(--large-fiche) - 64px)); justify-content: flex-start; } }
@media (max-width: 899px) { body.tiroir-ouvert #tuto { display: none; } }

/* Le fil d'alertes colle sous la barre sur telephone et tablette debout : les alertes restent a portee quand on fait defiler
   l'Armee ou le Journal. Sur telephone, l'objectif prend sa propre ligne des qu'il y a une alerte (il se lisait « Premiè… »),
   et la pastille « Pause » laisse la place (le bouton ⏸ de la barre est deja allume). */
@media (max-width: 899px) { #bandeau { position: sticky; top: var(--haut-barre, 88px); z-index: 49; } }
@media (max-width: 599px) {
  #bandeau .fil:has(.alertes) { flex-wrap: wrap; row-gap: 4px; padding: 4px 8px 5px; }
  #bandeau .fil:has(.alertes) .objectif { flex: 1 1 100%; height: 24px; }
  #bandeau .fil .objectif span { display: inline; }
  #bandeau .alertes { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  #bandeau .alertes::-webkit-scrollbar { display: none; }
  #bandeau .alerte.pause { display: none; }
}

/* Ce que prepare une menace : l'anneau (sa jauge, --p en %, tenue a jour par main.animer), l'icone au centre. */
.anneau { --p: 0; position: relative; display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; font-size: 11px; line-height: 1;
  background: conic-gradient(var(--rouge) calc(var(--p) * 1%), #ffffff2e 0); transition: background .4s; }
.anneau::before { content: ""; position: absolute; inset: 2.5px; border-radius: 50%; background: #1d1119; }
.anneau.chef { background: var(--or); }
.anneau > * { position: relative; }
.anneau .icone, #bandeau .alerte .anneau .icone { width: 14px; height: 14px; }
.anneau.grand { width: 46px; height: 46px; font-size: 22px; }
.anneau.grand::before { inset: 4px; background: #0e1626eb; }
.anneau.grand .icone { width: 30px; height: 30px; }
#bandeau .alerte.menace { background: #2a1620; color: #f3d0d4; border-color: #6b2a35; }
#bandeau .alerte.menace.chef { border-color: var(--or); color: var(--or); }
/* Son camp sur la carte, la ou elle rassemble ses troupes (au-dessus du lieu quand c'en est un : Korinth, Gythion). */
.camp-menace { position: absolute; z-index: 4; transform: translate(-50%, -50%); display: grid; justify-items: center; gap: 2px; background: none; border: 0; padding: 0;
  color: inherit; cursor: pointer; filter: drop-shadow(0 2px 4px #000c); }
.camp-menace.au-dessus { transform: translate(-50%, -130%); }
.camp-menace .anneau.grand:not(.chef) { animation: pouls-camp 2.4s ease-in-out infinite; }
@keyframes pouls-camp { 50% { box-shadow: 0 0 0 6px #e6394630; } }
.camp-menace.en-cours .anneau { box-shadow: 0 0 0 3px var(--or); animation: none; }
.camp-menace .eta { font: 600 .68rem system-ui; color: #fff; background: #7a1c2a; border-radius: 999px; padding: 0 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
/* Dans la fiche d'Athenes, sous les raids : une ligne par menace. */
.menaces { display: grid; gap: 6px; margin: 0 0 8px; }
.ligne-menace { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; background: #2a121acc; border: 1px solid #6b2a35; border-radius: 10px; padding: 6px 10px; color: inherit; }
.ligne-menace:hover { border-color: var(--or); }
.ligne-menace > span:not(.anneau) { flex: 1; min-width: 0; line-height: 1.25; }
.ligne-menace small { display: block; }
.ligne-menace > b { font-variant-numeric: tabular-nums; color: #ffd9dc; white-space: nowrap; }
.ligne-menace .anneau { width: 30px; height: 30px; font-size: 16px; }
.ligne-menace .anneau::before { inset: 3px; }
.ligne-menace .anneau .icone { width: 20px; height: 20px; }
/* Un seul raid en approche prend toute la largeur (la grille en laissait la moitie vide). */
.raids { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }

/* Telephone et tablette debout : les elements d'une fiche en tiroir ne s'ecrasent plus pour tenir dans sa hauteur (le texte
   de « Mettre a la suite » debordait sur la ligne d'apres) — c'est le tiroir qui defile. */
@media (max-width: 899px) { .ecran-cite .fiche > *, .ecran-carte .fiche > * { flex-shrink: 0; } }

/* La barre du haut sur tablette debout (521-899 px) : comme sur telephone, les vitesses a droite du nom et les jauges sur
   toute la largeur dessous — avec ce qui rentre par minute, qu'on ne voyait qu'au-dessous de 520 px ou au-dessus de 900. */
@media (min-width: 521px) and (max-width: 899px) {
  .temps { order: 2; }
  .jauges { order: 3; flex: 1 1 100%; flex-wrap: nowrap; gap: 6px; }
  .jauges .jauge { flex: 1 1 0; min-width: 0; justify-content: center; border-radius: 10px; }
  .pile small { display: block; }
}
/* La jauge de confiance d'un conseiller n'est pas une jauge de la barre du haut : les regles de celle-ci (centree, avec des
   marges) decalaient son remplissage au milieu, sur telephone depuis la v0.17.3. */
.conseiller .jauge { display: block; padding: 0; justify-content: flex-start; border-radius: 5px; }

/* La bande du Conseil dans une fenetre : trois cartes cote a cote des 600 px (la troisieme restait seule sur sa ligne). */
@media (min-width: 600px) {
  .conseil-bande { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
  .conseil-bande .conseiller { padding: 8px; gap: 8px; }
  .conseil-bande .conseiller .portrait { width: 42px; height: 42px; }
  .conseil-bande .conseiller .jauge { min-width: 0; }
}

/* L'Armee : une carte plus basse — visage et nom en tete, puis le pas-a-pas ET le bouton sur une ligne, puis les couts et
   « Licencier » sur la suivante ; ce qui est deja en formation se voit dans la carte de l'unite. */
.unite.compacte { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 10px; row-gap: 2px; align-items: start; }
.unite.compacte > .img-unite { grid-row: span 3; width: 56px; height: 56px; }
.unite.compacte > .corps { display: contents; }
.unite.compacte .corps > :is(h3, .stats, .role) { grid-column: 2; }
.unite.compacte .corps > :is(.en-formation, .recruter, .pied-unite, .raison) { grid-column: 1 / -1; }
.unite.compacte .recruter { margin-top: 6px; }
.unite.compacte .recruter .action { flex: 1; min-width: 92px; }
.pied-unite { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 6px; }
.pied-unite .couts { margin: 0; flex: 1 1 auto; justify-content: flex-start; }
.pied-unite .licencier { margin: 0 0 0 auto; }
.en-formation { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 2px 10px; margin-top: 6px; padding: 5px 8px; border-radius: 8px;
  background: #e9c46a12; border: 1px solid #6b5a2a; font-size: .85rem; }
.en-formation .barre { flex: 1 1 100%; height: 4px; margin: 2px 0 0; }
@media (max-width: 520px) { .panneau { padding: 12px; } }
@media (max-width: 420px) {
  .unite.compacte .pas-a-pas button { min-width: 28px; padding: 0 4px; }
  .unite.compacte .pas-a-pas output { min-width: 24px; }
  .unite.compacte .recruter .action { min-width: 84px; padding: 6px 8px; }
}

/* Le Journal : la quete — le visage a cote du titre, puis ce qu'il faut faire, puis la parole du conseiller. */
.quete { display: block; }
.tete-quete { display: flex; gap: 12px; align-items: center; margin-bottom: 4px; }
.tete-quete h3 { margin: 0; }
.tete-quete .confiance-quete { margin: 2px 0 0; }
.tete-quete .confiance-quete .lien { margin: 0; }
.quete .parole { margin: 8px 0 0; padding: 8px 10px; border-left: 3px solid var(--trait); background: #0b1220; border-radius: 0 8px 8px 0; font-size: .92rem; }
@media (max-width: 520px) { .tete-quete .portrait { width: 44px; height: 44px; } }

/* Les pastilles d'un choix : centrees sur la ligne (a cote d'un visage du Conseil, un cout restait colle en haut). */
.pastilles { align-items: center; }

/* Les fenetres sur telephone : des marges plus fines, le texte gagne sa largeur. */
@media (max-width: 520px) {
  #modale { padding: 8px; padding-top: calc(8px + env(safe-area-inset-top)); }
  .fenetre { padding: 16px 14px; border-radius: 14px; }
  .fenetre > img.scene { width: calc(100% + 28px); margin: -16px -14px 14px; border-radius: 14px 14px 0 0; }
  .bandeau-rapport { margin: -16px -14px 12px; border-radius: 14px 14px 0 0; }
  .avec-parchemin .fenetre.recit .recit-corps { padding: 12px; }
}

/* ── v0.35 — le generique de fin : les hauts faits en medaillons, la carte finale qui porte les suites de la partie ── */
.generique .trophees-generique { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 18px; }
.generique .trophees-generique figure { margin: 0; width: 96px; font-size: .8rem; color: #e8e2d0; line-height: 1.25; }
.generique .trophees-generique img, .generique .trophees-generique .medaillon { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid;
  place-items: center; margin: 0 auto 6px; border: 2px solid var(--or); box-shadow: 0 0 14px #e9c46a66; background: #0b1220; font-size: 1.6rem; }
.generique .trophees-generique .medaillon .icone { width: 34px; height: 34px; }
.generique .final .texte .action { margin-top: 10px; }
.generique .final .texte .action small { opacity: .8; }
.generique:has(.final.visible) :is(.passer, .arret) { display: none; } /* la carte finale porte ses propres boutons */

/* ── v0.36 — les classements : onglets, difficulte, rangs (la ligne du joueur en or), podiums des chapitres, trophees,
   joueurs. Toutes les classes sont propres a la fenetre (.rang et .qui existent ailleurs). ── */
.fenetre.classements { max-width: 780px; }
.fenetre.classements > .discret { margin: 0 0 12px; }
.classements .onglets { flex-wrap: wrap; }
.classements .onglets button { flex: 1 1 100px; padding: 7px 6px; min-height: 40px; font-size: .9rem; }
.classements .choix-difficulte { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.classements .choix-difficulte button { flex: 1 1 80px; background: var(--creux); border: 1px solid var(--trait); border-radius: 999px; padding: 5px 10px;
  min-height: 34px; color: var(--discret); font-size: .86rem; }
.classements .choix-difficulte button.actif { color: var(--or); border-color: var(--or); }
.classements .choix-difficulte small { margin-left: 4px; padding: 0 6px; border-radius: 999px; background: var(--trait); color: var(--texte); font-size: .74rem; }
.classements .liste-rangs { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.classements .ligne-rang { display: grid; grid-template-columns: 2.2em 1fr auto; align-items: center; gap: 8px; padding: 6px 10px;
  border-radius: 10px; background: var(--creux); border: 1px solid transparent; }
.classements .ligne-rang.moi { border-color: var(--or); background: #1b1a12; }
.classements .ligne-rang.ellipse { display: block; background: none; padding: 0 10px; line-height: 1; color: var(--discret); text-align: center; }
.classements .place-rang { text-align: center; font-weight: 700; color: var(--discret); font-size: 1.05rem; }
.classements .nom-rang { min-width: 0; overflow-wrap: anywhere; }
.classements .nom-rang small { display: block; color: var(--discret); font-size: .8rem; }
.classements .valeur-rang { font-variant-numeric: tabular-nums; font-weight: 700; color: var(--or); white-space: nowrap; }
.classements .badge-rang { display: inline-block; margin-left: 4px; padding: 0 6px; border-radius: 999px; border: 1px solid var(--trait); font-size: .72rem;
  color: var(--texte); vertical-align: 1px; }
.classements .badge-rang.toi { border-color: var(--or); color: var(--or); }
.classements .version-jeu { margin-left: 4px; font-size: .72rem; opacity: .7; }
.classements .vide-rang { text-align: center; padding: 14px 0; margin: 0; }
.classements h3 { margin: 16px 0 8px; font-size: 1.05rem; }
.classements h4 { margin: 0 0 6px; font-family: var(--titre); color: var(--or); font-size: .98rem; }
.classements .grille-chapitres { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: 10px; }
.classements .grille-chapitres section { border: 1px solid var(--trait); border-radius: 12px; padding: 10px; }
.classements .grille-chapitres .ligne-rang { padding: 4px 8px; }
.classements .grille-chapitres .vide-rang { padding: 6px 0; }
.classements .rarete { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 6px; }
.classements .trophee-rare { display: flex; gap: 8px; align-items: center; padding: 6px 8px; border-radius: 10px; background: var(--creux); border: 1px solid transparent; font-size: .88rem; }
.classements .medaille-rare { flex: none; width: 44px; height: 44px; border-radius: 50%; object-fit: cover; border: 2px solid var(--trait); background: var(--fond);
  display: grid; place-items: center; font-size: 1.3rem; }
.classements .medaille-rare.repli .icone { width: 26px; height: 26px; }
.classements .trophee-rare.mien .medaille-rare { border-color: var(--or); box-shadow: 0 0 10px #e9c46a55; }
.classements .trophee-rare.jamais .medaille-rare { filter: grayscale(1) brightness(.6); }
.classements .medailles-mini { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 3px; }
.classements .medaille-mini { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; border: 1px solid var(--or); display: grid; place-items: center; font-size: .8rem; }
.classements .medaille-mini.repli .icone { width: 14px; height: 14px; }
.classements .trophee-rare small { display: block; color: var(--discret); font-size: .76rem; }
.classements .trophee-rare.mien { border-color: var(--or); }
.classements .trophee-rare.jamais { opacity: .6; }
.classements .profils-joueurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 10px; }
.classements .profil-joueur { border: 1px solid var(--trait); border-radius: 12px; padding: 10px 12px; }
.classements .profil-joueur.moi { border-color: var(--or); }
.classements .profil-joueur p { margin: 6px 0 0; }
.classements .chiffres-profil { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; text-align: center; }
.classements .chiffres-profil strong { display: block; color: var(--or); font-variant-numeric: tabular-nums; }
.classements .chiffres-profil span { font-size: .74rem; color: var(--discret); line-height: 1.2; display: block; }
.classements > .action { margin-top: 14px; }
@media (max-width: 420px) { .classements .chiffres-profil { grid-template-columns: repeat(2, 1fr); } }
/* Le record d'une fin, sur son bilan. */
.record-serveur { text-align: center; color: var(--or); }
.record-serveur .lien { margin-left: 6px; }

/* ── v0.37 — le Pantheon : l'episeme (embleme de bouclier) partout ou il se montre, la fenetre et ses onglets, la carte de
   l'ecran-titre. Classes propres au Pantheon (jamais une classe generique seule). ── */
.episeme { display: inline-grid; place-items: center; border-radius: 50%; object-fit: cover; vertical-align: middle; flex: none; }
.episeme.repli { background: var(--creux); border: 2px solid var(--or); line-height: 1; }
.episeme.mini { width: 20px; height: 20px; margin-right: 5px; font-size: .7rem; border-width: 1px; }
.episeme.barre { width: 22px; height: 22px; margin-right: 6px; font-size: .75rem; border-width: 1px; vertical-align: -4px; }
.episeme.moyen { width: 52px; height: 52px; font-size: 1.5rem; }
.episeme.grand { width: 92px; height: 92px; font-size: 2.6rem; box-shadow: 0 0 18px #e9c46a44; }
.noeud .pastille .episeme.carte { position: absolute; right: -8px; top: -8px; width: 20px; height: 20px; font-size: .7rem; border-width: 1px;
  box-shadow: 0 1px 3px #000a; pointer-events: none; }
.fenetre.pantheon { max-width: 820px; }
.fenetre.pantheon > .discret { margin: 0 0 12px; }
.pantheon .onglets { flex-wrap: wrap; }
.pantheon .onglets button { flex: 1 1 90px; padding: 7px 6px; min-height: 40px; font-size: .9rem; }
.pantheon h3 { margin: 16px 0 8px; font-size: 1.05rem; }
.pantheon > .action { margin-top: 14px; }
.tete-pantheon { display: flex; gap: 16px; align-items: center; }
.tete-pantheon .titre-porte { font-family: var(--titre); color: var(--or); font-size: 1.45rem; line-height: 1.15; }
.tete-pantheon .rang-pantheon { color: var(--discret); font-size: .9rem; }
.tete-pantheon .gloire-totale strong { font-size: 1.5rem; color: var(--texte); font-variant-numeric: tabular-nums; }
.barre-gloire { display: block; height: 10px; border-radius: 999px; background: var(--creux); border: 1px solid var(--trait); overflow: hidden; margin: 12px 0 6px; }
.barre-gloire i { display: block; height: 100%; background: linear-gradient(90deg, #b8892c, var(--or)); border-radius: inherit; }
.barre-gloire.mini { height: 5px; margin: 5px 0 0; }
.pantheon .suite-gloire { margin: 0 0 4px; }
.sources-gloire { display: grid; gap: 4px; }
.sources-gloire .source { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 6px 10px; border-radius: 10px; background: var(--creux); }
.sources-gloire .source small { display: block; color: var(--discret); font-size: .76rem; }
.sources-gloire .source b { color: var(--or); font-variant-numeric: tabular-nums; }
.pantheon .accord { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: .9rem; }
.pantheon .accord button { background: var(--creux); border: 1px solid var(--trait); border-radius: 999px; padding: 4px 12px; color: var(--discret); }
.pantheon .accord button.actif { color: var(--or); border-color: var(--or); }
.grille-titres { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 6px; }
.titre-choix { text-align: left; background: var(--creux); border: 1px solid var(--trait); border-radius: 10px; padding: 8px 10px; color: var(--texte); }
.titre-choix small { display: block; color: var(--discret); font-size: .76rem; line-height: 1.25; }
.titre-choix.actif { border-color: var(--or); box-shadow: 0 0 0 1px var(--or) inset; }
.titre-choix.actif b { color: var(--or); }
.titre-choix.verrou, .episeme-choix.verrou, .fond-choix.verrou { opacity: .5; }
.grille-episemes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 8px; }
.episeme-choix { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--creux); border: 1px solid var(--trait);
  border-radius: 12px; padding: 10px 8px; color: var(--texte); }
.episeme-choix small { color: var(--discret); font-size: .74rem; line-height: 1.25; }
.episeme-choix.actif { border-color: var(--or); }
.episeme-choix.verrou .episeme { filter: grayscale(1); }
.grille-fonds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.fond-choix { display: flex; flex-direction: column; gap: 4px; border: 1px solid var(--trait); border-radius: 12px; padding: 8px; }
.fond-choix.actif { border-color: var(--or); }
.fond-choix img, .fond-choix .vide-fond { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; }
.fond-choix .vide-fond { display: grid; place-items: center; background: var(--creux); color: var(--discret); font-size: .8rem; }
.fond-choix .lien { margin: 0; text-align: left; }
.galerie-scenes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); gap: 8px; }
.galerie-scenes .scene-vue { display: flex; flex-direction: column; gap: 3px; padding: 0; background: none; border: 0; color: var(--texte); text-align: left; font-size: .76rem; line-height: 1.2; }
.galerie-scenes .scene-vue img, .galerie-scenes .scene-cachee { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 8px; border: 1px solid var(--trait); }
.galerie-scenes .scene-cachee { display: grid; place-items: center; background: var(--creux); color: var(--discret); font-size: 1.4rem; border-style: dashed; }
.scene-en-grand { margin: 0; }
.scene-en-grand img { width: 100%; border-radius: 10px; }
.scene-en-grand figcaption { text-align: center; color: var(--or); font-family: var(--titre); margin-top: 6px; }
.liste-morceaux { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 5px; }
.liste-morceaux .morceau { display: flex; gap: 8px; align-items: center; text-align: left; background: var(--creux); border: 1px solid var(--trait); border-radius: 10px;
  padding: 6px 10px; color: var(--texte); font-size: .86rem; }
.liste-morceaux .morceau .lecture { width: 22px; height: 22px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--trait); font-size: .7rem; }
.liste-morceaux .morceau.joue { border-color: var(--or); color: var(--or); }
.liste-morceaux .morceau.joue .lecture { background: var(--or); color: #1a1408; }
.liste-morceaux .morceau.cache { color: var(--discret); border-style: dashed; }
/* La carte du Pantheon sur l'ecran-titre. */
.carte-pantheon { display: flex; gap: 12px; align-items: center; width: 100%; margin: 12px 0 4px; padding: 10px 12px; text-align: left; background: var(--creux);
  border: 1px solid var(--trait); border-radius: 14px; color: var(--texte); }
.carte-pantheon:hover { border-color: var(--or); }
.carte-pantheon .infos { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.carte-pantheon .infos b { color: var(--or); font-family: var(--titre); }
.carte-pantheon .infos small { color: var(--discret); font-size: .8rem; }
/* Le titre d'un joueur dans les classements. */
.classements .titre-joueur { margin-left: 5px; font-size: .78rem; font-style: italic; color: var(--or); opacity: .85; }