/* Lot 2 (18 octobre 2026) : carte du Monde, fiches de territoire, Garde du Col, ravitaillement, HUD de bataille, pause.
Feuille chargée EN DERNIER (après socle-menus.css) : elle corrige les défauts relevés par la critique d'Astra sans toucher
aux règles globales des autres lots. Toutes les classes neuves portent le préfixe `l2-`. Les règles qui en surchargent
d'autres s'appuient sur #stage pour l'emporter sans !important ; une règle de cadre étroit suit la règle de base qu'elle adapte.
Grammaire de couleur appliquée ici : le ROUGE est l'ennemi et le danger (anneaux des territoires à conquérir, jauge de la
forteresse et du chef) ; le BLEU vif est l'action (Bataille, Explorer, Rejouer) ; l'OR est la récompense ; la SÉLECTION est
un anneau blanc ; un verrou est neutre (jamais rouge) et n'existe que sur ce qui est vraiment fermé. */
:root {
--l2-rouge:#E23B3B; --l2-rouge-clair:#FF8A7A; --l2-rouge-sombre:#7E1218; --l2-rouge-tranche:#4A0A0E;
--l2-nuit:#08162B; --l2-nuit-2:#12294A;
}
/* ================================================================ A. carte du Monde */
/* l'en-tête : trois plaques de 50 points (56 avant) ; le compte dit les régions OUVERTES, les mêmes qui n'ont plus de verrou */
#stage .cap26-world-head { padding-top:calc(var(--safe-t) + 6px); }
#stage .cap26-world-head .cap26-world-title, #stage .cap26-world-head .cap26-world-count { height:50px; }
#stage .cap26-world-count em { font-size:12px; }
/* un verrou n'existe que sur une région fermée : il reste neutre (nuit cerclée de blanc), jamais corail ni rouge ; une région
libérée ou ouverte n'en porte pas (elle dit « Libérée » avec sa coche) */
#stage .cap26-biome .cap26-biome-verrou, #stage .cap26-biome:not(.is-open):not(.is-avenir) .cap26-biome-verrou {
background:linear-gradient(180deg, #2B4468, #0C1E3A); color:#fff;
box-shadow:inset 0 1px 0 rgba(200,225,255,.45), 0 0 0 1.5px rgba(255,255,255,.8), 0 0 0 3px #06142B, 0 2px 3px rgba(0,5,17,.6); }
#stage .cap26-biome.is-libre .cap26-biome-verrou { display:none; }
/* nom seul sur la carte pour ce qui est fermé : la condition se lit dans la fiche de la région choisie */
#stage .cap26-biome:not(.is-libre) .cap26-biome-label small { display:none; }
#stage .cap26-biome:not(.is-libre) .cap26-biome-label { padding-bottom:4px; }
/* l'état en clair, en lecture et non en police condensée ; « Libérée » et « Terminée » portent leur coche d'or */
#stage .cap26-biome.is-libre .cap26-biome-label small { font:700 11px/1 var(--f-texte); font-style:normal; }
/* la sélection : un cadre de la couleur de la région sur la plaque ivoire (le bleu reste l'action) */
#stage .cap26-biome.is-selected .cap26-biome-label::before { background:var(--sm-iv, #FBF5E6);
box-shadow:inset 0 0 0 2.5px var(--ton), 0 2px 0 rgba(8,20,48,.5), 0 0 12px var(--lueur), 0 4px 6px rgba(0,5,17,.4); }
#stage .cap26-biome.is-selected .cap26-biome-label, #stage .cap26-biome.is-selected .cap26-biome-label small,
#stage .cap26-biome.is-selected.is-gagne .cap26-biome-label small { color:var(--sm-ink, #14233B); text-shadow:none; }
#stage .cap26-biome.is-selected.is-gagne .cap26-biome-label small { color:var(--sm-or-s, #8A5A06); }
/* Archipel : le nom passe sous son sceau comme les autres régions (il recouvrait le Volcan à droite) */
#stage .cap26-biome[data-biome="archipel"][data-cote="droite"] .cap26-biome-label { left:50%; top:calc(50% + var(--taille) * var(--ech) / 2 + 1px); transform:translateX(-50%); align-items:center; }
/* la fiche de région : deux lignes de moins (le texte ne répète plus la jauge), l'état en puce neutre quand il est fermé */
#stage .cap26-world-fiche { height:auto; min-height:0; padding-bottom:10px; row-gap:4px; }
#stage .cap26-world-region { font-size:26px; }
#stage .cap26-world-description { font:600 14px/1.25 var(--f-texte); color:var(--sm-ink2, #4B5C78); }
#stage .cap26-world-status[data-ton="corail"] { --face:linear-gradient(180deg, #52698C, #34496B); --texte:#fff; }
#stage .cap26-world-status[data-ton="corail"]::before { box-shadow:0 2px 0 #1E2E49; }
#stage .cap26-world-progress-terr { font:700 13px/1 var(--f-texte); font-style:normal; color:var(--sm-ink2, #4B5C78); }
#stage .cap26-world-progress-compte { font:italic 900 18px/1 var(--f-titre); }
#stage .cap26-world-condition { font:700 13px/1.2 var(--f-texte); font-style:normal; white-space:normal; color:var(--sm-ink2, #4B5C78); }
#stage .cap26-world-condition > .picon { color:var(--sm-ink2, #4B5C78); }
#stage .cap26-world-sheet[data-etat="avenir"] .cap26-world-condition, #stage .cap26-world-sheet[data-etat="avenir"] .cap26-world-condition > .picon { color:var(--sm-ink2, #4B5C78); }
#stage .cap26-world-gain { font:700 13px/1.2 var(--f-texte); font-style:normal; }
/* l'action : un bouton plus bas, son libellé dit la destination */
#stage .cap26-world-visit.menu-command.primary { min-height:50px; margin:0 0 5px; }
#stage .cap26-world-visit.menu-command.primary strong { font-size:26px; }
#stage .cap26-world-visit.menu-command.primary > .picon { width:26px; }
#stage .cap26-world-actions { min-height:0; }
/* ================================================================ B. région : états des territoires */
/* à conquérir : l'ennemi porte un anneau ROUGE sur un disque ardoise (plus de disque bleu) ; le chef nommé est rouge plein */
/* à venir, hors des deux prochains : neutre et atténué (anneau ardoise), pour que le rouge reste un signal et non une frise */
#stage .cap26-carte .map-node.locked .map-node-disc, #stage .cap26-carte .map-node.recompense.locked .map-node-disc {
background:radial-gradient(circle at 50% 26%, #B8BFD2 0, #6B7490 52%, #2E3550 100%);
box-shadow:inset 0 2px 0 rgba(255,255,255,.45), 0 0 0 2.5px rgba(214,222,238,.75), 0 0 0 4.5px #1B2236, 0 6px 5px rgba(0,5,17,.35); }
#stage .cap26-carte .map-node.locked:not(.proche):not(.boss) .map-node-art { opacity:.8; }
/* les deux prochains camps ennemis : anneau rouge */
#stage .cap26-carte .map-node.locked.proche .map-node-disc, #stage .cap26-carte .map-node.recompense.locked.proche .map-node-disc {
box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 2.5px var(--l2-rouge), 0 0 0 4.5px #1A0508, 0 6px 5px rgba(0,5,17,.4); }
#stage .cap26-carte .map-node.boss.locked .map-node-disc {
background:radial-gradient(circle at 50% 26%, #FFB0A0 0, #E23B3B 50%, #7E1218 100%);
box-shadow:inset 0 2px 0 rgba(255,255,255,.6), 0 0 0 2.5px #FFD6CE, 0 0 0 4.5px #4A0A0E, 0 0 12px 3px rgba(226,59,59,.65), 0 6px 5px rgba(0,5,17,.4); }
/* la bataille suivante : disque d'action bleu, anneau blanc, heaume ; elle reste la plus grande */
#stage .cap26-carte .map-node.cur .map-node-disc { box-shadow:inset 0 2px 0 rgba(255,255,255,.85), inset 0 -4px 0 rgba(0,40,120,.4), 0 0 0 3px #fff, 0 0 0 5px #071226, 0 0 14px 4px rgba(120,205,255,.7), 0 7px 5px rgba(0,5,17,.38); }
/* repris : anneau d'or et coche (inchangé) ; choisi : anneau blanc épais, plus grand, le seul de la carte (la sélection ne se
perdait plus : la règle « repris » la recouvrait) */
#stage .cap26-carte .map-node.sel { z-index:3; }
#stage .cap26-carte .map-node.sel .map-node-disc { transform:scale(1.16);
box-shadow:inset 0 2px 0 rgba(255,255,255,.85), inset 0 -4px 0 rgba(0,40,120,.35), 0 0 0 3.5px #fff, 0 0 0 6px #071226, 0 0 16px 6px rgba(255,255,255,.7), 0 7px 5px rgba(0,5,17,.4); }
#stage .cap26-carte .map-node.sel.locked .map-node-disc { box-shadow:inset 0 2px 0 rgba(255,255,255,.5), 0 0 0 3.5px #fff, 0 0 0 6px #071226, 0 0 16px 6px rgba(255,255,255,.7), 0 7px 5px rgba(0,5,17,.4); }
/* étoiles de maîtrise : celles qui manquent se lisent en creux brun sur la plaque ivoire */
#stage .cap26-carte .map-node-etoiles > i:not(.on), #stage .map-maitrise .etoiles-mini > i:not(.on) { background:#A8946C; opacity:.62; }
#stage .cap26-carte .map-node-etoiles > i.on, #stage .map-maitrise .etoiles-mini > i.on { background:#F2AE1E; }
/* ================================================================ C. région : la fiche du bas */
/* un territoire repris touché : « Rejouer » est l'action principale (classes posées par hud.js), la marche continue en second */
#stage .cap26-carte .carte-cta-row:has(#carte-rejouer.primary:not([hidden])) { flex-direction:column; gap:6px; }
#stage .cap26-carte #carte-rejouer.primary { order:-1; flex:none; width:100%; min-width:0; min-height:48px; margin:0; padding:0 14px; flex-direction:row; justify-content:center; gap:10px; }
#stage .cap26-carte #carte-rejouer.primary .picon { width:24px; }
#stage .cap26-carte #carte-rejouer.primary strong { font-size:26px; }
#stage .cap26-carte #carte-sheet-cta:not(.primary) { flex:none; width:100%; min-height:44px; margin:0; padding:0 12px; gap:8px; }
#stage .cap26-carte #carte-sheet-cta:not(.primary) > .picon { width:22px; }
#stage .cap26-carte #carte-sheet-cta:not(.primary) .battle-copy { flex-direction:row; align-items:baseline; justify-content:center; gap:8px; }
#stage .cap26-carte #carte-sheet-cta:not(.primary) .battle-copy strong { font-size:20px; }
#stage .cap26-carte #carte-sheet-cta:not(.primary) .battle-copy small { font:700 13px/1.1 var(--f-texte); font-style:normal; }
/* les critères manquants : un par ligne, en police de lecture */
#stage .map-maitrise { align-items:center; gap:4px 10px; margin-top:0; }
#stage .map-maitrise-copy { display:flex; flex-direction:column; gap:1px; font:700 13px/1.2 var(--f-texte); font-style:normal; white-space:normal; color:var(--sm-ink, #14233B); }
#stage .map-maitrise .etoiles-mini > i { width:20px; height:20px; }
/* un niveau bonus : « Siège » est une étiquette neutre (plus un second bouton), la récompense tient sur une ligne */
#stage .map-bonus-mode { min-height:24px; padding:0 9px; gap:5px; font:800 13px/1 var(--f-texte); }
#stage .map-bonus-mode::before { inset:0; border-radius:6px; background:#E6DDC6; box-shadow:inset 0 0 0 1px #CDBF9C; }
#stage .map-bonus-mode, #stage .map-bonus-mode b { color:var(--sm-ink2, #4B5C78); font:800 13px/1 var(--f-texte); font-style:normal; }
#stage .map-bonus-mode .picon { width:15px; color:var(--sm-ink2, #4B5C78); }
#stage .map-bonus-regle { font:600 14px/1.25 var(--f-texte); font-style:normal; }
#stage .map-bonus-prix .gain-lbl { font:700 13px/1 var(--f-texte); font-style:normal; color:var(--sm-ink2, #4B5C78); }
#stage .carte-bonus-cta .battle-copy small:empty { display:none; }
/* ================================================================ D. ravitaillement : acheter et régler au même endroit */
/* la ligne d'usage vit dans la carte de son objet, sous le stock et avant les prix ; le contrôle segmenté remplace le menu */
#stage #shop-items .shop-ravitaillement { grid-template-rows:auto auto auto; gap:6px 12px; padding:10px 12px; }
#stage #shop-items .shop-ravitaillement > .ravitaillement-ligne.l2-dans-carte { grid-column:1 / -1; grid-row:2; display:flex; flex-direction:column; align-items:stretch; gap:4px; margin:2px 0 0; }
#stage #shop-items .shop-ravitaillement > .shop-paiements { grid-column:1 / -1; grid-row:3; }
#stage .ravitaillement-stock { font:700 12px/1 var(--f-texte); letter-spacing:.04em; text-transform:uppercase; color:var(--sm-ink2, #4B5C78); }
#stage .ravitaillement-ligne small { font:600 13px/1.3 var(--f-texte); color:var(--sm-ink2, #4B5C78); }
/* les prix : deux commandes de 44 points, du même bleu que tous les achats de la page (une seule grammaire : le bleu est l'achat) */
#stage .screen.panel[data-screen="shop"] #shop-items .shop-ravitaillement .shop-payer { flex:1 1 0; min-width:0; min-height:44px; padding:0 10px; font:800 16px/1 var(--f-texte); }
#stage .screen.panel[data-screen="shop"] #shop-items .shop-ravitaillement .shop-payer .picon { width:22px; height:22px; }
#stage .preparation-ravitaillement p { font:600 13px/1.35 var(--f-texte); color:var(--sm-ink2, #4B5C78); }
/* ================================================================ E. HUD de bataille */
/* E1. les étapes du territoire : trois pastilles NUMÉROTÉES (1, 2, 3) ; faite = disque bleu coché, en cours = disque nuit cerné de
blanc, à venir = disque nuit terne ; le liseré rouge marque la forteresse d'un seigneur. Plus de losanges à deviner. */
#stage #hud-pips { gap:9px; }
#stage #hud-pips .pip { width:26px; height:26px; border-radius:50%; transform:none; display:grid; place-items:center; border:2px solid rgba(255,255,255,.55);
background:linear-gradient(180deg, #1B2A44, #0D1730); color:#C6D5EC; box-shadow:0 0 0 1.5px rgba(4,9,20,.9), 0 2px 4px rgba(0,0,0,.55); }
#stage #hud-pips .pip > b { font:800 14px/1 var(--f-texte); font-style:normal; }
#stage #hud-pips .pip.cur { transform:scale(1.14); border-color:#fff; background:linear-gradient(180deg, #14223C, #07102A); color:#fff;
box-shadow:0 0 0 1.5px rgba(4,9,20,.9), 0 0 9px 2px rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.55); }
#stage #hud-pips .pip.cur::after { content:none; }
#stage #hud-pips .pip.done { border-color:#A9DEFF; background:linear-gradient(180deg, #1E8DF2, #0B5ACB); color:#fff; }
#stage #hud-pips .pip.done > b { font-size:0; width:14px; height:14px; background:#fff; -webkit-mask:var(--ic-valider) center / contain no-repeat; mask:var(--ic-valider) center / contain no-repeat; }
#stage #hud-pips .pip.seigneur { border-color:var(--l2-rouge-clair); }
#stage #hud-pips .pip.seigneur.cur { box-shadow:0 0 0 1.5px rgba(4,9,20,.9), 0 0 9px 2px rgba(226,59,59,.8), 0 2px 4px rgba(0,0,0,.55); }
#stage #hud-pips .pip.seigneur.cur::after { content:none; }
#stage #hud-pips .pip.prend::before, #stage #hud-pips .pip.prend::after { border-radius:50%; }
@keyframes losangePris { 0% { transform:scale(.7); } 40% { transform:scale(1.45); } 100% { transform:scale(1); } }
/* E2. le compte de la foule : même plaque, un cran plus petite (les choix de portes et le front de bataille priment) */
#stage #crowd { min-width:56px; height:32px; padding:0 11px 0 9px; gap:5px; font-size:23px; }
#stage #crowd .picon { width:19px; }
/* E3. la vie de la forteresse : UNE jauge ROUGE identifiée (icône de fort), le nombre dans la même plaque sombre */
#stage #hud-base { width:134px; height:26px; box-sizing:border-box; padding:0 9px 0 7px; gap:6px; align-items:center; border-radius:13px;
background:linear-gradient(180deg, #3B1218, #1A070C); box-shadow:inset 0 0 0 1.5px rgba(255,138,122,.75), 0 2px 5px rgba(0,0,0,.55); }
#stage #hud-base::before { content:''; flex:none; width:16px; height:16px; background:#FFD6CE; -webkit-mask:var(--ic-fort) center / contain no-repeat; mask:var(--ic-fort) center / contain no-repeat; }
#stage #hud-base .sangle { height:9px; border-radius:5px; background:#24080C; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6); overflow:hidden; }
#stage #hud-base .sangle > i { border-radius:5px; background:linear-gradient(90deg, #FF6A5C, #D42A2A); }
#stage #hud-base .num { min-width:1.9em; font-size:18px; color:#fff; text-shadow:0 1px 2px #000; }
#stage #hud-base.low .num { color:#FFD6CE; }
/* E4. le chef à phases : un bandeau plus compact (nom, puce « Phase N », jauge ROUGE) et un repère rouge sur sa tête */
#stage #hud-boss { padding:4px 9px 6px; gap:4px; border:1px solid rgba(255,138,122,.85); border-radius:6px; background:rgba(16,6,10,.94); }
#stage #hud-boss .name { font-size:19px; }
#stage #hud-boss .phase { font:800 12px/1 var(--f-texte); font-style:normal; color:#FFD6CE; padding:3px 8px; border-radius:10px; background:rgba(226,59,59,.35);
box-shadow:inset 0 0 0 1px rgba(255,138,122,.7); text-shadow:none; }
#stage #hud-boss .bar { height:8px; background:#26090D; box-shadow:inset 0 0 0 1px rgba(0,0,0,.6); }
#stage #hud-boss .bar::after { background:linear-gradient(90deg, #FF6A5C, #D42A2A); }
#stage #hud-boss .bar .cran { width:1.5px; background:rgba(255,255,255,.4); }
#stage #hud-boss.rage .bar::after { background:linear-gradient(90deg, #FF3B2E, #FF8A5C); }
#stage #hud-boss.rage .phase { color:#fff; background:rgba(226,59,59,.65); }
#stage #boss-tag .picon { color:#FF6A5C; }
#stage #boss-tag #boss-tag-n { color:#FFD6CE; }
.l2-cible { position:absolute; left:0; top:0; z-index:var(--z-hud); width:28px; height:20px; pointer-events:none; opacity:0; visibility:hidden; will-change:transform; }
.l2-cible.on { opacity:1; visibility:visible; }
.l2-cible::before, .l2-cible::after { content:''; position:absolute; clip-path:polygon(0 0, 100% 0, 50% 100%); }
.l2-cible::before { inset:0; background:#fff; }
.l2-cible::after { left:4px; right:4px; top:3px; bottom:5px; background:linear-gradient(180deg, #FF6A5C, #D42A2A); }
/* E5. le bouton du Champion : son action est écrite (« Champion » en charge, « Lancer » une fois prêt) ; prêt = étiquette bleue d'action */
#stage #champ .lbl { margin-top:3px; min-height:22px; padding:0 10px; border-radius:11px; font:800 12px/1 var(--f-texte); font-style:normal; letter-spacing:.02em;
color:#EAF3FF; background:rgba(8,16,30,.94); box-shadow:inset 0 0 0 1px rgba(255,255,255,.4), 0 2px 4px rgba(0,0,0,.45); }
#stage #champ.ready .lbl { color:#fff; background:linear-gradient(180deg, var(--azur-haut), var(--azur)); box-shadow:inset 0 0 0 1px rgba(255,255,255,.85), 0 2px 5px rgba(0,60,160,.6); }
/* E6. l'aide de visée du niveau 1 : deux gestes courts, posée sous le portail (jamais dessus), sans panneau géant */
#stage #toast.guide.l2-visee { bottom:calc(var(--safe-b) + 20px); min-height:0; padding:7px 14px 8px 10px; gap:9px; border-radius:12px; max-width:min(300px, calc(100% - 32px)); }
#stage #toast.l2-visee .picon { width:30px; height:30px; flex:none; }
#stage #toast.l2-visee .l2-guide-l { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
#stage #toast.l2-visee .l2-guide-l > b { display:block; font:800 15px/1.15 var(--f-texte); color:#fff; }
/* ================================================================ F. chargement d'une bataille et écran d'erreur */
/* le chargement se compose autour de la bataille qui vient : marque plus petite, « Préparation de la bataille », le territoire et
le niveau, la barre, puis « Annuler » en commande secondaire sous le bloc (il dominait la barre) */
#stage #loading[data-state="loading"] { justify-content:center; gap:8px; padding-bottom:7%; }
#stage #loading[data-state="loading"] .loading-kicker { font-size:46px; margin-bottom:14px; }
#stage #loading[data-state="loading"] #loading-text { margin-top:0; font:italic 800 24px/1.15 var(--f-titre); }
#stage #loading[data-state="loading"] #loading-detail { font:700 16px/1.2 var(--f-texte); color:#CFE0F5; }
#stage #loading[data-state="loading"] .loading-progress { width:min(240px, 78%); height:8px; margin-top:6px; }
#stage #loading[data-state="loading"] .loading-error-actions { width:auto; max-width:none; margin-top:20px; }
#stage #loading[data-state="loading"] #loading-home { min-height:44px; width:auto; padding:0 24px; border-radius:22px; background:transparent; color:#fff;
box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); font:700 16px/1 var(--f-texte); }
/* l'erreur : un pictogramme d'alerte, un titre, une phrase, « Réessayer » ; ni marque, ni « Erreur », ni trait, et plus aucun
contrôle des écrans d'avant au-dessus du message (le coffre de la Cité le recouvrait) */
#stage #loading[data-state="error"] .loading-kicker, #stage #loading[data-state="error"] #loading-error-mark, #stage #loading[data-state="error"] #loading-error-rule { display:none; }
#stage:has(#loading[data-state="error"]:not([hidden])) > :not(#loading):not(canvas) { visibility:hidden; }
#stage #loading[data-state="error"] .loading-error-seal { width:56px; height:56px; }
#stage #loading[data-state="error"] .loading-error-actions { margin-top:6px; }
/* ================================================================ G. région : sceaux bonus, « ce qui attend », pause */
/* le sceau bonus choisi porte le même anneau blanc que le territoire choisi : la fiche et la carte désignent le même lieu */
#stage .cap26-carte .map-site.sel .map-site-sceau { transform:scale(1.16);
box-shadow:inset 0 1px 0 rgba(255,255,255,.7), 0 0 0 3px #fff, 0 0 0 5.5px #071226, 0 0 16px 6px rgba(255,255,255,.65), 0 6px 5px rgba(0,5,17,.4); }
/* « ce qui attend » : une ligne par élément (nom, puis la condition à côté), jamais deux étages */
#stage .cap26-carte[data-cap26-vue="region"] .map-next-copy { flex-direction:row; align-items:baseline; flex-wrap:wrap; gap:0 7px; }
#stage .cap26-carte[data-cap26-vue="region"] .map-next-copy small { font:600 12px/1.2 var(--f-texte); font-style:normal; }
/* la pause : voile plus ferme (la scène derrière ne rivalise plus avec le panneau), « Reprendre » seul au premier plan, « Rejouer »
en second, « Retour à la Cité » en lien sobre de 44 points */
#stage .screen.dim[data-screen="paused"] { background:rgba(4,12,26,.62); }
#stage .pause-card [data-action="home"].menu-command { min-height:44px; background:transparent; border:0; box-shadow:none; color:var(--sm-ink2, #4B5C78); }
#stage .pause-card [data-action="home"].menu-command::before, #stage .pause-card [data-action="home"].menu-command::after { content:none; }
#stage .pause-card [data-action="home"].menu-command strong { font:800 16px/1 var(--f-texte); font-style:normal; text-decoration:underline; text-underline-offset:3px; }
#stage .pause-card [data-action="home"].menu-command .picon { width:18px; }
#stage .pause-card .sub { font:700 14px/1.25 var(--f-texte); }
/* ================================================================ H. reprises après la première série de captures */
/* le compte du Monde : le chiffre et le total se touchent, le libellé dessous */
#stage .cap26-world-count > span:first-child { justify-content:center; column-gap:3px; }
/* sous-ligne de la fiche (« Territoire 4 sur 12 », « Horde I », « Niveau bonus ») : police de lecture, pas condensée italique */
#stage .cap26-carte[data-cap26-vue="region"] .map-sheet-name > small { font:700 13px/1.2 var(--f-texte); font-style:normal; color:var(--sm-ink2, #4B5C78); }
/* la marche qui continue, en commande secondaire : sa précision se lit en encre sur le blanc */
#stage .cap26-carte #carte-sheet-cta:not(.primary) .battle-copy small { color:var(--sm-ink2, #4B5C78); }
/* ravitaillement : la légende « Au départ » se range à gauche, au-dessus du contrôle */
#stage #shop-items .ravitaillement-ligne.l2-dans-carte .ravitaillement-stock { align-self:flex-start; }
/* aide de visée : texte d'encre sur la plaque ivoire du socle (blanc sur crème avant) */
#stage #toast.l2-visee .l2-guide-l > b { color:var(--sm-ink, #14233B); }
/* pause : le focus clavier garde UN anneau (le contour du socle) ; l ancien second anneau en ombre portée est retiré */
#stage .pause-card .menu-command:focus-visible::before { box-shadow:var(--arete), var(--tranche); }
/* ================================================================ I. tour 2 (HUD de bataille, défense, rappels) */
/* I1. (retiré au tour 2, correction) : le voile de flancs rallumait `.vignette` que arcmarch.css éteint en bataille (décision C5) et assombrissait
la piste sur ~14 % de chaque côté à 360 ; il n'apportait aucune lisibilité mesurable. La piste et le canvas ne reçoivent plus rien. */
/* I2. HUD supérieur : une seule famille de formes (capsules), mêmes contours (1,5 point clair), mêmes hauteurs */
/* la rangée garde les pastilles à la même hauteur qu'avant (centre à 18 points sous le haut de l'écran sûr) ; elle gagne 4 points en bas pour loger
la légende, dont le bas (46 points) laisse 8 points avant la première capsule ou le bandeau du chef (début à 54, après l'espace de 6 de #hud-order) */
#stage #hud-pips { position:relative; box-sizing:border-box; height:48px; padding:9px 3px 0; align-items:flex-start; }
#stage #hud-pips::after { content:attr(data-lbl); position:absolute; left:50%; top:39px; transform:translateX(-50%); white-space:nowrap;
font:700 11px/1 var(--f-texte); letter-spacing:.06em; text-transform:uppercase; color:#F2F7FF; text-shadow:0 1px 2px rgba(0,5,17,.9), 0 0 4px rgba(0,5,17,.7); pointer-events:none; }
/* l'annonce du nom du niveau (début de manche) se pose plus bas : elle touchait la légende (4 points mesurés à 390) */
#stage #hud-title { top:calc(var(--safe-t) + 68px); }
#stage #hud-pips .pip.seigneur { border-color:rgba(255,255,255,.55); }
#stage #hud-pips .pip.seigneur.cur { border-color:#fff; box-shadow:0 0 0 1.5px rgba(4,9,20,.9), 0 0 9px 2px rgba(255,255,255,.5), 0 2px 4px rgba(0,0,0,.55); }
#stage #crowd { height:32px; border-radius:16px; padding:0 12px 0 10px; }
#stage #crowd::before { transform:none; border-radius:16px; background:linear-gradient(180deg, #14233E, #08122A); box-shadow:inset 0 0 0 1.5px rgba(210,235,255,.55), 0 2px 5px rgba(0,6,23,.55); }
#stage #crowd.record::before { box-shadow:inset 0 0 0 1.5px var(--or), 0 0 10px rgba(255,190,40,.45), 0 2px 5px rgba(0,6,23,.55); }
#stage #crowd:has(.crowd-rec:not([hidden])) { height:auto; min-height:44px; padding-block:5px; border-radius:18px; }
#stage #crowd:has(.crowd-rec:not([hidden]))::before { border-radius:18px; }
#stage #crowd .crowd-rec { font:700 11px/1.1 var(--f-texte); font-style:normal; text-transform:none; margin:0; padding-bottom:1px; }
/* I3. la forteresse ennemie : jauge plus courte, posée au-dessus de la bannière ; « PV » après le nombre */
#stage #hud-base { width:116px; height:24px; padding:0 8px 0 6px; gap:5px; }
#stage #hud-base .num { min-width:0; font-size:17px; }
#stage #hud-base .num::after { content:' PV'; font:700 10px/1 var(--f-texte); font-style:normal; opacity:.85; }
#stage #hud-base::before { width:15px; height:15px; }
/* I4. le chef : bandeau une ligne plus bas en poids, « Phase 1/3 » discrète, crans fins qui marquent les seuils de phase (60 % et 25 %) */
#stage #hud-boss { padding:3px 8px 5px; }
#stage #hud-boss .name { font-size:17px; }
#stage #hud-boss .phase { font:700 11px/1 var(--f-texte); padding:2px 7px; }
#stage #hud-boss .bar { height:6px; }
#stage #hud-boss .bar .cran { width:1px; background:rgba(255,255,255,.7); }
/* I5. le Champion : le heaume peint du jeu (le même que la carte, les Paramètres et la Cité : une seule identité), jamais un glyphe qui se lise comme
un verrou (le verrou est réservé à ce qui est fermé). L'état se lit à trois choses : le disque, le heaume et l'anneau.
charge : disque ardoise, heaume terni, anneau en jauge sans lueur ; prêt : disque bleu vif, heaume clair avec halo, anneau plein et lueur. */
#stage #champ[data-etat="charge"] .helm { filter:grayscale(.55) brightness(.72); }
#stage #champ[data-etat="charge"] .disc { background:radial-gradient(circle at 50% 38%, #1B2A44, #0B1224 72%); }
#stage #champ[data-etat="charge"] .ring { box-shadow:inset 0 0 0 2px #33BFFF, 0 3px 8px rgba(0,8,26,.6); }
#stage #champ[data-etat="pret"] .helm { filter:brightness(1.12) drop-shadow(0 0 4px rgba(150,235,255,.95)); }
#stage #champ[data-etat="pret"] .disc { background:radial-gradient(circle at 50% 30%, #5CB6FF, #1E6FD6 52%, #0A46AE 100%); }
#stage #champ[data-etat="charge"] .lbl { color:#C8D8EE; }
#stage #champ::before { opacity:0; }
#stage #champ.ready::before { opacity:.7; }
/* I6. la pause : le lieu sous le titre, « Reprendre » moins haut, le HUD se retire derrière la feuille */
#stage .pause-card #pause-title { order:0; }
#stage .pause-card #pause-sub { order:1; margin:-4px 0 4px; text-align:left; font:600 14px/1.2 var(--f-texte); }
#stage .pause-card > .menu-command, #stage .pause-card > .pause-options { order:2; }
#stage .pause-card .menu-command.primary { min-height:52px; }
#stage .pause-card .menu-command.primary strong { font-size:28px; }
#stage:has(.screen[data-screen="paused"]:not([hidden])) :is(#hud, #champ, #crowd, #hud-base, #hud-title, #boss-tag, #l2-cible) { visibility:hidden; }
/* I7. la Défense : alerte de menace ROUGE reliée à sa voie par une flèche, portail allié en bleu */
/* l'alerte ne masque plus ni la bannière ni la catapulte ennemies (centre du haut) : elle se range du côté de la voie, dans la colonne latérale
(marge négative de 52 points = la colonne de 44 plus l'écart de 8 de #hud), et reste courte (« Menace à droite ») ; au centre elle prend la droite */
#stage .arena-alert { border:0; border-radius:12px; padding:4px 11px 4px 9px; background:linear-gradient(180deg, #8F1D22, #5A0F13); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,138,122,.85), 0 2px 5px rgba(0,0,0,.5);
font:800 13px/1 var(--f-texte); display:inline-flex; align-items:center; gap:6px; align-self:flex-end; margin-right:-52px; white-space:nowrap; }
#stage .arena-alert[data-voie="gauche"] { align-self:flex-start; margin-right:0; margin-left:-52px; }
#stage .arena-alert::before { content:''; flex:none; width:11px; height:11px; background:#FF8A7A; clip-path:polygon(0 0, 100% 50%, 0 100%); }
#stage .arena-alert[data-voie="gauche"]::before { clip-path:polygon(100% 0, 0 50%, 100% 100%); }
#stage .arena-alert[data-voie="centre"]::before { clip-path:polygon(0 0, 100% 0, 50% 100%); }
#stage .arena-alert.ready { background:linear-gradient(180deg, #1B5FC4, #0B3A8C); box-shadow:inset 0 0 0 1.5px rgba(166,233,255,.85), 0 2px 5px rgba(0,0,0,.5); }
#stage .arena-alert.ready::before { background:#A6E9FF; }
#stage .arena-portal-life { background:linear-gradient(180deg, #123E86, #0A2250); box-shadow:inset 0 0 0 1.5px rgba(166,233,255,.8), 0 2px 5px rgba(0,0,0,.5); color:#fff; font:800 13px/1 var(--f-texte); }
#stage .arena-portal-life::before { content:''; flex:none; width:15px; height:15px; background:#A6E9FF; -webkit-mask:var(--ic-bouclier) center / contain no-repeat; mask:var(--ic-bouclier) center / contain no-repeat; }
#stage .arena-portal-life b { color:#fff; font:800 14px/1 var(--f-texte); }
#stage .arena-portal-life.low { box-shadow:inset 0 0 0 1.5px #FF8A7A, 0 2px 5px rgba(0,0,0,.5); }
/* I8. l'aide de visée, plus près de la ligne de déplacement qu'elle explique, avec le geste en pictogramme (doigt maintenu, glissé) */
#stage #toast.guide.l2-visee { bottom:calc(var(--safe-b) + 68px); }
#stage #toast.l2-visee .picon { display:none; }
#stage #toast.l2-visee::before { content:''; flex:none; width:34px; height:34px; background:var(--azur, #0879F8);
-webkit-mask:url("data:image/svg+xml,") center / contain no-repeat;
mask:url("data:image/svg+xml,") center / contain no-repeat; }
/* ajustements tour 2 : le libellé « Manche » s'efface sous la capsule d'entraînement ; le pictogramme de geste de l'aide est un élément de flux */
#stage:has(#tutorial-replay:not([hidden])) #hud-pips::after { display:none; }
#stage:has(#tutorial-replay:not([hidden])) #hud-pips { height:44px; padding-top:0; align-items:center; }
#stage #toast.l2-visee::before { position:static; inset:auto; transform:none; z-index:auto; border-radius:0; }
/* ================================================================ I. retour 8 du 19 octobre 2026 : carte recadrée, régions débloquées au fur et à mesure
La plaque remplit la fenêtre entre l'en-tête et la barre basse (src/ui/monde-cap26.js fitMap) : son pied n'est plus fondu dans
une poche nuit, seul un liseré de 5 % adoucit le bord quand il paraît. Les régions fermées sont VOILÉES sur la plaque (brume
nuit en dégradé, solidaire de la plaque et des sceaux) et leur sceau s'éteint ; libérées sans expédition, le voile s'allège et
le verrou tombe ; ouvertes, rien. Une seule destination, la campagne en cours, porte la lueur qui respire. */
#stage .cap26-world-image { -webkit-mask-image:linear-gradient(to bottom, #000 0, #000 95%, transparent 100%); mask-image:linear-gradient(to bottom, #000 0, #000 95%, transparent 100%); }
#stage .cap26-world-map.is-reduite .cap26-world-image { -webkit-mask-image:linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, #000 0, #000 95%, transparent 100%);
mask-image:linear-gradient(to right, transparent 0, #000 13%, #000 87%, transparent 100%), linear-gradient(to bottom, #000 0, #000 95%, transparent 100%); }
#stage .cap26-world.sans-fiche .cap26-world-space::after { background:linear-gradient(to bottom, rgba(2,10,27,.4), transparent 96px), linear-gradient(to top, rgba(3,14,34,.5) 0, rgba(3,14,34,0) calc(var(--nav-h) + 36px)); }
#stage .cap26-voile { position:absolute; z-index:1; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none; opacity:1; transition:opacity 400ms var(--courbe);
background:radial-gradient(closest-side, rgba(10,26,52,.66) 0, rgba(10,26,52,.6) 45%, rgba(10,26,52,.3) 75%, rgba(10,26,52,0) 100%); }
#stage .cap26-voile[data-etat="liberee"] { opacity:.72; }
#stage .cap26-voile[data-etat="ouvert"] { opacity:0; }
#stage .cap26-biome.is-voilee .cap26-biome-sceau > .cap26-sceau-img { filter:saturate(.3) brightness(.78) drop-shadow(0 3px 1px rgba(1,8,22,.6)); }
#stage .cap26-biome.is-liberee .cap26-biome-sceau > .cap26-sceau-img { filter:saturate(.5) brightness(.86) drop-shadow(0 3px 1px rgba(1,8,22,.6)); }
#stage .cap26-biome.is-liberee:not(.is-selected) .cap26-biome-label { opacity:.88; }
#stage .cap26-biome.is-voilee:not(.is-selected) .cap26-biome-sceau::after { opacity:.35; }
#stage .cap26-biome.is-voilee:not(.is-selected) .cap26-biome-label { opacity:.8; }
#stage .cap26-biome.is-voilee:not(.is-selected) .cap26-biome-label b, #stage .cap26-biome.is-liberee:not(.is-selected) .cap26-biome-label b { font-size:14px; }
#stage .cap26-biome:is(.is-voilee, .is-liberee):not(.is-selected) .cap26-biome-label::before { background:rgba(236,230,214,.9); box-shadow:inset 3px 0 0 color-mix(in srgb, var(--ton) 55%, #8A93A3), 0 2px 0 rgba(8,20,48,.4); }
/* la prochaine destination : une lueur à sa couleur qui respire derrière le sceau (transform et opacité seulement) */
#stage .cap26-biome.is-prochaine:not(.is-selected)::before { content:''; position:absolute; left:50%; top:50%; width:98px; height:98px; margin:-49px 0 0 -49px; border-radius:50%; pointer-events:none; z-index:-1;
background:radial-gradient(circle, rgba(255,226,122,.7) 0, rgba(255,214,90,.5) 46%, rgba(255,190,40,0) 70%); animation:cap26-respire 1.8s ease-in-out infinite; }
/* un anneau d'or fixe autour du sceau : la prochaine destination se repère d'un coup d'œil, même sur l'herbe, sans couvrir le château peint */
#stage .cap26-biome.is-prochaine:not(.is-selected) .cap26-biome-sceau::before { content:''; position:absolute; inset:-6px; border-radius:50%; pointer-events:none; z-index:-1;
border:3px solid #FFE27A; box-shadow:0 0 0 1.5px rgba(120,70,0,.5), 0 0 10px 1px rgba(255,200,60,.85); }
@keyframes cap26-respire { 0%, 100% { opacity:.6; transform:scale(.92); } 50% { opacity:.95; transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce) { #stage .cap26-biome.is-prochaine:not(.is-selected)::before { animation:none; } }
/* cadenas discrets : petits et un peu éteints sur la carte (la condition se lit à la sélection) */
#stage .cap26-biome:not(.is-selected) .cap26-biome-verrou { width:15px; height:15px; opacity:.82; }
#stage .cap26-biome:not(.is-selected) .cap26-biome-verrou > .picon { width:9px; }
/* la fiche d'une région fermée : la condition se lit nette, sur deux lignes au besoin, sans ombre */
#stage .cap26-world-condition { text-shadow:none; font-size:14px; line-height:1.25; }
/* « Nouvelle » : la Forêt le jour où elle s'ouvre, en pastille d'or */
#stage .cap26-biome.is-nouvelle .cap26-biome-label small { padding:2px 6px; border-radius:6px; background:linear-gradient(180deg, #FFE27A, #F2B52E); color:#4A2E00; font-weight:800; }
/* la fiche d'une région fermée : le retour aux Prairies reste possible mais ne domine plus l'écran */
#stage .cap26-world-visit[data-role="retour"] { min-height:44px; height:44px; }
#stage .cap26-world-visit[data-role="retour"] strong { font-size:18px; }
/* ================================================================ J. retour 1 du 20 octobre 2026 : l'aide de visée sans mots
Plus aucun message texte en bataille. Au niveau 1, l'aide de visée devient un GESTE : une main qui glisse d'un bord à l'autre au-dessus
d'une réglette à double flèche, juste au-dessus de la ligne de déplacement du portail ; ni plaque ni texte (src/ui/hud.js syncToast). */
#stage #toast.guide.l2-visee { width:156px; max-width:none; height:64px; min-height:0; padding:0; gap:0; bottom:calc(var(--safe-b) + 56px);
background:none; border:0; border-radius:0; box-shadow:none; }
#stage #toast.guide.l2-visee::before { content:''; position:absolute; inset:auto 0 2px 0; width:auto; height:16px; z-index:0; transform:none; border-radius:0; box-shadow:none;
-webkit-mask:none; mask:none; opacity:.92; filter:drop-shadow(0 2px 2px rgba(0,10,30,.6));
background:url("data:image/svg+xml,") center / 100% 100% no-repeat; }
#stage #toast.l2-visee .l2-geste { position:absolute; left:50%; bottom:6px; width:38px; height:46px; margin-left:-12px; z-index:1;
animation:l2-geste 1.9s cubic-bezier(.45,0,.55,1) infinite; }
#stage #toast.l2-visee .l2-geste i { display:block; width:100%; height:100%; filter:drop-shadow(0 3px 3px rgba(0,10,30,.55));
background:url("data:image/svg+xml,") center / contain no-repeat; }
@keyframes l2-geste { 0%, 100% { transform:translateX(-52px); } 50% { transform:translateX(52px); } }
@media (prefers-reduced-motion: reduce) { #stage #toast.l2-visee .l2-geste { animation:none; } }