/* Refonte des interfaces, chantier « cite » (23 octobre 2026, retour 4 de Bastien : « trop de cartes et de boutons, AI slop »).
Contrat : docs/design/INTERFACE_GRAMMAIRE.md. Cette feuille est chargée EN DERNIER : elle reprend, pour la Cité, la barre du bas, les fiches de
bâtiment, le Monde et les Paramètres, ce que les couches d'avant (arcmarch, cite-cap26, invasion, socle-menus, champion, social) habillaient en cartes.
Règles tenues : aucun backdrop-filter, aucun filter sur #canvas (les ombres portées ne touchent que des éléments DOM) ; une règle de cadre
étroit se place après la règle de base ; un texte qui ne doit pas être coupé se mesure par scrollWidth <= clientWidth sur la chaîne la plus longue.
Les anciennes règles de ces écrans restent dans leurs feuilles (couches d'historique) ; cette feuille les surcharge par #stage. */
/* ================================================================ 1. HAUT DE LA CITÉ : or et gemmes sans boîte, sur un dégradé sombre discret */
#stage .screen.home::before { height:calc(var(--safe-t) + 104px); background:linear-gradient(to bottom, rgba(2,10,27,.7), rgba(2,10,27,.38) 52%, rgba(2,10,27,0)); }
/* chiffres de la monnaie : 17 gras blancs avec ombre (jamais une boîte) */
#stage .inv-barre .inv-num, #stage .screen.home .home-res .bourse-pill .val {
font:800 17px/1 var(--f-texte); font-style:normal; letter-spacing:0; color:#fff; padding:0 2px;
text-shadow:0 1px 2px rgba(0,8,22,.95), 0 0 7px rgba(0,8,22,.55); }
/* Invasion ouverte : l'insigne de ligue, l'or (et sa protection en texte), les gemmes */
#stage .inv-barre { align-items:center; gap:8px; height:auto; padding-top:calc(8px + var(--safe-t)); }
#stage .inv-barre .inv-chip { height:44px; padding:0 2px; gap:7px; border:0; border-radius:10px; background:none; box-shadow:none; color:#fff; }
#stage .inv-barre .inv-chip:active { transform:none; box-shadow:none; opacity:.78; }
#stage .inv-barre .inv-chip:focus-visible { outline:3px solid #fff; outline-offset:0; }
#stage .inv-barre .inv-chip.inv-or:is(.garde-vide, .garde-bouclier, .garde-abri, .garde-expose) { background:none; border:0; box-shadow:none; }
#stage .inv-barre .inv-chip.inv-or[aria-expanded="true"] { outline:0; opacity:.9; }
#stage .inv-barre .inv-ligue { flex:none; width:44px; padding:0; justify-content:center; }
#stage .inv-barre .inv-insigne { width:34px; height:40px; filter:drop-shadow(0 2px 3px rgba(0,8,22,.65)); }
#stage .inv-barre .inv-or { flex:1 1 auto; justify-content:flex-start; }
#stage .inv-barre .inv-chip > .picon { width:30px; flex:none; filter:drop-shadow(0 2px 2px rgba(0,8,22,.55)); }
#stage .inv-barre .inv-or-copy { flex:0 1 auto; display:flex; flex-direction:column; justify-content:center; gap:3px; min-width:0; }
/* la protection : un glyphe d'écu et la charge en texte (« 1 bouclier », « À l'abri », « 34 % à l'abri »), plus de barre */
#stage .inv-or-garde { display:flex; align-items:center; gap:4px; min-height:14px; min-width:0; }
#stage .inv-barre .inv-or-garde > .picon { width:15px; height:15px; filter:drop-shadow(0 1px 1px rgba(0,8,22,.6)); }
#stage .inv-or-pct { flex:0 1 auto; min-width:0; font:700 12px/1 var(--f-texte); letter-spacing:0; white-space:nowrap; color:#DCEBFF; text-shadow:0 1px 2px rgba(0,8,22,.95), 0 0 6px rgba(0,8,22,.5); }
#stage .inv-or-garde.expose .inv-or-pct { color:#FFD98A; }
#stage .inv-barre .inv-gemmes { flex:none; width:auto; min-width:0; margin-left:auto; gap:6px; padding:0 0 0 4px; }
/* le « + » seul est le petit bouton rond (22) ; le toucher de toute la ligne ouvre la Boutique */
#stage .inv-barre .inv-plus { flex:none; width:22px; height:22px; margin-left:2px; border-radius:50%; font:800 17px/1 var(--f-texte); color:#fff;
background:linear-gradient(180deg, #2E9BFF, #0A5FD0); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85), 0 1px 3px rgba(0,8,22,.55); }
#stage:has(> #nav-rail [data-nav="shop"].locked) .inv-plus { display:none; }
/* avant l'Invasion : l'engrenage est un glyphe nu (24), les deux monnaies sont nues ; le « + » reste un petit rond (zone de toucher de 44) */
#stage .home-head { top:calc(var(--safe-t) + 8px); left:10px; right:10px; align-items:center; }
#stage .home-profil .profile-seal { width:44px; height:44px; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .home-profil .profile-seal > .profile-engrenage { width:26px; height:26px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,8,22,.85)); }
#stage .screen.home .home-res { gap:4px; padding-top:0; }
#stage .screen.home .home-res .bourse-pill { height:44px; padding:0 2px; gap:6px; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .screen.home .home-res .bourse-pill > .picon { width:28px; filter:drop-shadow(0 2px 2px rgba(0,8,22,.55)); }
#stage .screen.home .bourse-plus::before { width:22px; height:22px; margin:-11px 0 0 -11px; border-radius:50%; background:linear-gradient(180deg, #2E9BFF, #0A5FD0); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.85), 0 1px 3px rgba(0,8,22,.55); }
#stage .screen.home .bourse-plus > span { font-size:17px; color:#fff; }
/* ================================================================ 2. BAS DE LA CITÉ : Attaquer plus étroit, une ligne de contexte, Alliés et Champion en cercles */
#stage .screen.home .battle-row { bottom:calc(var(--nav-h) + 14px); align-items:center; }
#stage .screen.home .battle-row > #home-battle { flex:none; width:240px; height:56px; min-height:56px; padding:0 16px; gap:10px; justify-content:center; }
#stage .screen.home .battle-row > #home-battle > .picon { width:32px; }
#stage .screen.home #home-battle-main { font-size:30px; line-height:1; }
#stage .screen.home #home-battle .battle-copy { gap:0; align-items:center; }
/* la ligne de contexte (« Campagne · niveau 12 », « Piller une garnison », les renforts) : du texte au-dessus du bouton, jamais collé dedans */
#stage .screen.home .battle-row > .battle-contexte { position:absolute; left:50%; bottom:calc(100% + 4px); transform:translateX(-50%); box-sizing:border-box; max-width:250px; padding:7px 32px; overflow:hidden; text-overflow:ellipsis;
font:700 13px/1.1 var(--f-texte); letter-spacing:.01em; white-space:nowrap; color:#fff; text-shadow:0 1px 2px #00081A; pointer-events:none;
background:radial-gradient(ellipse 50% 50% at 50% 50%, rgba(0,8,26,.86) 0%, rgba(0,8,26,.8) 72%, rgba(0,8,26,0) 100%); }
#stage .screen.home .battle-row > .battle-contexte[hidden] { display:none; }
#stage .screen.home .battle-row:has(> .inv-attaques:not([hidden])) > .battle-contexte { display:none; }
/* Social (« Alliés » jusqu'au 24 octobre 2026) et Champion : la MÊME règle, donc les mêmes boîtes au pixel (retour du 24 octobre 2026) : bouton de 64 × 67 (disque de 52, 3 d'écart, libellé de 12 de haut),
posé sur la même base (8 au-dessus de la pile d'Attaquer), à 14 du bord de l'écran de chaque côté, même appui, même anneau de focus. Aucune autre feuille ne redit ces boîtes (champion.css n'en garde que la peinture du disque). */
#stage .screen.home .battle-row > .home-allies, #stage .screen.home .battle-row:has(> .home-champion:not([hidden])) > .home-allies,
#stage .screen.home .battle-row > .home-champion {
position:absolute; bottom:calc(100% + 8px); z-index:2; width:64px; height:67px; box-sizing:border-box; margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none;
display:flex; flex-direction:column; align-items:center; gap:3px; color:#fff; cursor:pointer; -webkit-tap-highlight-color:transparent; }
#stage .screen.home .battle-row > .home-allies, #stage .screen.home .battle-row:has(> .home-champion:not([hidden])) > .home-allies { left:0; right:auto; }
#stage .screen.home .battle-row > .home-champion { left:auto; right:0; }
#stage .screen.home .battle-row > :is(.home-allies, .home-champion)[hidden] { display:none; }
#stage .screen.home .battle-row > :is(.home-allies, .home-champion):active { transform:translateY(2px); }
#stage .screen.home .battle-row > :is(.home-allies, .home-champion):focus-visible { outline:3px solid #fff; outline-offset:2px; border-radius:12px; }
#stage .home-allies-ico, #stage .home-champion-disque { position:relative; left:auto; top:auto; flex:none; width:52px; height:52px; box-sizing:border-box; display:grid; place-items:center; overflow:hidden; border-radius:50%;
border:2.5px solid var(--or); box-shadow:0 0 0 1.5px #0A2346, 0 3px 7px rgba(2,8,22,.6), inset 0 2px 0 rgba(255,255,255,.35); filter:none; }
#stage .home-allies-ico { background:radial-gradient(circle at 50% 36%, #3FB6FF 0%, #0B5FD0 48%, #062654 100%); }
/* le disque du Champion garde le fond que champion.css lui donne (bleu avec buste peint ; couleur de la classe sans buste : repli honnête, emblème et initiale) */
#stage .home-champion[data-buste="non"] .home-champion-heaume { inset:11px 11px 13px; }
#stage .home-allies-ico svg { width:30px; height:30px; display:block; filter:drop-shadow(0 1px 0 rgba(0,40,110,.55)); }
#stage .home-allies-lbl, #stage .home-champion-lbl {
position:static; transform:none; flex:none; height:12px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; max-width:64px; overflow:hidden; text-overflow:ellipsis;
font:800 12px/1 var(--f-texte); font-style:normal; letter-spacing:0; white-space:nowrap; color:#fff; text-shadow:0 1px 3px rgba(0,8,22,.95), 0 0 6px rgba(0,8,22,.55); }
/* le sceau de capacité du Champion : petit, à l'angle du disque */
#stage .home-champion-capa { right:2px; top:30px; width:20px; height:20px; border-width:1.5px; }
/* UN code de notification : la pastille rouge chiffrée (Alliés, Monde, Récompenses) */
#stage .home-allies-badge, #stage #nav-rail .badge.pastille, #stage #nav-rail #nav-carte-badge.badge.pastille, #stage #nav-rail #home-mission-badge.badge.pastille {
position:absolute; min-width:18px; width:auto; height:18px; box-sizing:border-box; padding:0 5px; display:grid; place-items:center; border-radius:9px;
background:var(--sm-rouge, #D1242E); color:#fff; border:2px solid #fff; box-shadow:0 1px 3px rgba(0,8,22,.4); font:800 11px/1 var(--f-texte); font-style:normal; }
#stage .home-allies-badge[hidden], #stage #nav-rail .badge.pastille[hidden] { display:none; }
#stage .home-allies-badge { right:0; top:-4px; }
/* ================================================================ 3. BARRE DU BAS : glyphes d'un trait (24), libellés de 12, fond parchemin */
#stage #nav-rail { background:linear-gradient(180deg, #F6ECCF, #EADCB3); border-top:2px solid var(--or); box-shadow:0 -4px 16px rgba(8,20,48,.3); color:#3C4863; }
#stage .nav button { gap:3px; color:#3C4863; }
#stage .nav button .picon { width:24px; height:24px; filter:none; opacity:1; background:currentColor; }
#stage .nav .nav-lbl { font:700 12px/1 var(--f-texte); letter-spacing:.01em; }
#stage .nav button.on { color:var(--azur-appui, #0753C8); }
#stage .nav button.on .nav-lbl { font-weight:800; }
#stage #nav-rail .pi-tente { --ic:url("data:image/svg+xml,"); }
#stage #nav-rail .pi-carte-campagne { --ic:url("data:image/svg+xml,"); }
#stage #nav-rail .pi-ordres { --ic:url("data:image/svg+xml,"); }
#stage #nav-rail .pi-bourse { --ic:url("data:image/svg+xml,"); }
/* la Boutique verrouillée : le glyphe grisé et un petit cadenas, sans texte or (le niveau reste dans le nom accessible et au toucher) */
#stage .nav button.locked { color:#8F96A6; }
#stage .nav button.locked .nav-lbl { display:block; font-size:12px; }
#stage .nav button.locked .picon { opacity:.7; width:24px; }
#stage .nav .lv { position:absolute; top:11px; left:calc(50% + 4px); bottom:auto; width:13px; height:13px; padding:0; font-size:0; color:#5A6378; background:currentColor; -webkit-mask:var(--ic-verrou) center / contain no-repeat; mask:var(--ic-verrou) center / contain no-repeat; }
#stage .nav .lv[hidden] { display:none; }
#stage #nav-rail .badge.pastille { top:5px; right:calc(50% - 25px); }
/* ================================================================ 4. FICHES DE BÂTIMENT : le gain réel d'abord, en texte ; une sortie plutôt qu'un bouton mort */
/* le haut : retour en glyphe nu (24) dans une zone de 44, or et pierre sans boîte, sur un dégradé sombre */
#stage .screen.building::before { content:''; position:absolute; left:0; right:0; top:0; height:calc(var(--safe-t) + 96px); z-index:0; pointer-events:none; background:linear-gradient(to bottom, rgba(2,10,27,.7), rgba(2,10,27,.34) 55%, rgba(2,10,27,0)); }
#stage .screen.building .building-top { align-items:center; }
#stage .screen.building .building-back.round-btn { width:44px; height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#fff; display:grid; place-items:center; }
#stage .screen.building .building-back .picon { width:24px; filter:drop-shadow(0 1px 2px rgba(0,8,22,.85)); }
#stage .building-resources { gap:6px; }
#stage .building-resources .bourse-pill, #stage .screen.building .building-top .bourse-pill { height:44px; padding:0 2px; gap:6px; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .building-resources .bourse-pill > .picon { width:28px; filter:drop-shadow(0 2px 2px rgba(0,8,22,.55)); }
#stage .building-resources .bourse-pill .rival-brique { width:26px; height:20px; filter:drop-shadow(0 2px 2px rgba(0,8,22,.55)); }
#stage .building-resources .bourse-pill .val { font:800 17px/1 var(--f-texte); font-style:normal; color:#fff; text-shadow:0 1px 2px rgba(0,8,22,.95), 0 0 7px rgba(0,8,22,.55); }
#stage .building-depense { height:44px; padding:0 4px; border:0; border-radius:0; background:none; box-shadow:none; color:#FFB36B; text-shadow:0 1px 2px rgba(0,8,22,.95); }
/* la feuille : un titre, le gain en grand, le reste en texte ; plus de carte « Puissance » ni de pilule « Défense » */
#stage .building-hero { padding:0; border:0; border-radius:0; background:none; box-shadow:none; gap:2px; }
#stage .building-hero .building-copy { display:flex; flex-direction:column; align-items:flex-start; gap:4px; }
#stage .screen.building .building-copy .stat { font:700 16px/1.2 var(--f-texte); font-style:normal; letter-spacing:0; text-transform:none; color:var(--sm-ink2, #46566F); }
#stage .building-effet { display:flex; align-items:baseline; gap:12px; margin:0; }
#stage .building-effet .effet-avant { font:700 28px/1 var(--f-texte); font-style:normal; color:var(--sm-ink2, #46566F); }
#stage .building-effet .effet-apres { font:800 28px/1 var(--f-texte); font-style:normal; color:var(--sm-ink, #12233F); }
#stage .building-effet.max .effet-apres { color:var(--sm-ink, #12233F); }
#stage .building-copy .desc { font:600 15px/1.3 var(--f-texte); color:var(--sm-ink, #12233F); }
#stage .building-defense { display:block; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .building-defense .building-defense-k { display:none; }
#stage .building-defense-t { font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage .building-defense-t b { color:var(--sm-ink, #12233F); font-weight:800; }
#stage .screen.building .building-level { font:700 16px/1 var(--f-texte); color:var(--sm-ink2, #46566F); }
/* le manque : le coût réel en texte (deux phrases), et le bouton plein devient « Trouver de l'or » (jamais un gris mort) */
#stage .building-actions .building-manque { margin:0; display:flex; flex-direction:column; gap:2px; font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); text-align:center; }
#stage .building-manque .manque-reste { font-weight:800; color:var(--sm-ink, #12233F); }
#stage .building-actions .building-buy.sortie { background:var(--sm-azur-face); color:#fff; box-shadow:var(--sm-tranche); }
#stage .building-actions .building-buy.sortie .cmd-main { font-size:24px; }
#stage .building-actions .building-buy[hidden] { display:none; }
/* ================================================================ 5. MONDE : racine d'onglet sans retour, titre et compteur en texte nu */
#stage .cap26-world-head { align-items:center; justify-content:space-between; padding:calc(var(--safe-t) + 12px) calc(16px + var(--safe-r)) 14px calc(16px + var(--safe-l)); gap:12px;
background:linear-gradient(to bottom, rgba(3,14,34,.86), rgba(3,14,34,.5) 62%, rgba(3,14,34,0)); }
#stage .cap26-world-head .cap26-world-title { flex:1 1 auto; height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; display:block;
font:italic 900 28px/1 var(--f-titre); color:#fff; text-shadow:0 2px 3px rgba(0,8,22,.9), 0 0 14px rgba(0,8,22,.5); }
#stage .cap26-world-head .cap26-world-count { flex:none; height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; display:block; }
#stage .cap26-world-count .cap26-world-count-txt { display:block; font:700 14px/1 var(--f-texte); font-style:normal; letter-spacing:0; white-space:nowrap; color:#fff; text-shadow:0 1px 3px rgba(0,8,22,.95), 0 0 8px rgba(0,8,22,.55); }
/* ================================================================ 6. PARAMÈTRES : une seule liste à filets, sans cartes ni sur-titres */
#stage .screen.panel[data-screen="settings"]:not(.carte-screen):not(.arena-screen) > .head { padding-top:calc(var(--safe-t) + 14px); padding-left:calc(8px + var(--safe-l)); align-items:center; gap:2px; }
/* le retour : un glyphe nu (24) dans une zone de 44 ; Paramètres s'ouvre du heaume de la Cité ou de la Ligue, le retour ramène à l'écran d'origine (main.js back) */
#stage .screen.panel[data-screen="settings"] > .head > .register-back.round-btn { flex:none; width:44px; height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--sm-ink, #12233F); display:grid; place-items:center; }
#stage [data-screen="settings"] > .head > .register-back .picon { width:24px; color:var(--sm-ink, #12233F); display:block; }
#stage [data-screen="settings"] > .head > .head-titles { height:44px; padding:0; align-items:center; justify-content:flex-start; border:0; border-radius:0; background:none; box-shadow:none; }
#stage [data-screen="settings"] .panel-title { font:italic 900 30px/1 var(--f-titre); color:var(--sm-ink, #12233F); }
#stage [data-screen="settings"] .menu-feuille { padding:4px calc(18px + var(--safe-r)) 0 calc(18px + var(--safe-l)); }
#stage [data-screen="settings"] .scroll-area { padding:10px 0 24px; }
#stage [data-screen="settings"] .set-liste { margin:0; padding:0; border:0; border-radius:0; background:none; box-shadow:none; border-top:1px solid rgba(18,35,63,.16); }
#stage [data-screen="settings"] .set-liste.set-liste-contenu { margin-top:0; border-top:0; }
#stage [data-screen="settings"] .set-liste > .option-line { display:flex; align-items:center; gap:12px; width:100%; min-height:56px; padding:4px 2px; margin:0; border:0; border-bottom:1px solid rgba(18,35,63,.16); border-radius:0; background:none;
box-shadow:none; font:700 17px/1.2 var(--f-texte); font-style:normal; color:var(--sm-ink, #12233F); text-align:left; }
#stage [data-screen="settings"] .set-liste > .option-line + .option-line { border-top:0; }
#stage [data-screen="settings"] .set-liste > .option-line:active { background:rgba(18,35,63,.06); }
#stage [data-screen="settings"] .set-liste > .option-line > span:not(.picon) { flex:1 1 auto; min-width:0; text-align:left; }
#stage [data-screen="settings"] .set-liste > .option-line > small { flex:none; min-width:0; width:auto; text-align:right; font:600 14px/1 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage [data-screen="settings"] .option-line .picon { display:none; }
/* le nom : le champ est une ligne soulignée, à droite ; « Enregistré » se confirme un instant, en vert, à gauche du champ */
#stage [data-screen="settings"] .set-nom { cursor:text; }
#stage [data-screen="settings"] .set-nom > span { flex:none; }
#stage [data-screen="settings"] .set-nom .nom-champ { flex:1 1 auto; min-width:0; width:auto; padding:6px 4px; border:0; border-radius:0; background:none; box-shadow:inset 0 -2px 0 var(--sm-bord, #D8C9A3);
font:700 19px/1.2 var(--f-texte); text-align:right; color:var(--sm-ink, #12233F); }
#stage [data-screen="settings"] .set-nom .nom-champ:focus { outline:0; box-shadow:inset 0 -2px 0 var(--or-appui, #D6A43A); }
#stage [data-screen="settings"] .set-ok { flex:none; position:absolute; right:4px; bottom:2px; font:700 12px/1 var(--f-texte); color:var(--sm-vert, #2E6B22); }
#stage [data-screen="settings"] .set-ok[hidden] { display:none; }
#stage [data-screen="settings"] .set-nom { padding-bottom:12px; }
/* bascules aux couleurs du jeu : piste de parchemin foncé, pastille d'or quand c'est actif */
#stage [data-screen="settings"] .option-line i { flex:none; width:50px; height:30px; border-radius:15px; background:#8A6D3B; box-shadow:inset 0 2px 3px rgba(40,24,4,.45), inset 0 0 0 1.5px #6B5230; }
#stage [data-screen="settings"] .option-line i::after { left:3px; top:3px; width:24px; height:24px; background:linear-gradient(180deg, #F3EBD6, #CFC3A6); box-shadow:0 1px 3px rgba(20,12,2,.5); }
#stage [data-screen="settings"] .option-line.on i { background:#8A6D3B; box-shadow:inset 0 2px 3px rgba(40,24,4,.45), inset 0 0 0 1.5px #6B5230; }
#stage [data-screen="settings"] .option-line.on i::after { transform:translateX(20px); background:radial-gradient(circle at 50% 32%, #FFE9A8, #E8B64C 62%, #B98524); box-shadow:0 1px 3px rgba(20,12,2,.5), 0 0 0 1.5px #946508; }
/* « Rejouer l'entraînement » et la Chronique : des lignes de la liste, avec un chevron discret */
#stage [data-screen="settings"] .set-liste > .option-line > small.set-chevron { flex:none; width:9px; height:9px; min-width:9px; padding:0; margin-right:6px; border-top:2.5px solid #7B8498; border-right:2.5px solid #7B8498; transform:rotate(45deg); }
#stage [data-screen="settings"] .profile-storage { margin-top:0; border-top:0; }
#stage [data-screen="settings"] .profile-storage > .option-line { border:0; border-bottom:1px solid rgba(18,35,63,.16); background:none; box-shadow:none; color:var(--sm-ink, #12233F); font:700 17px/1.2 var(--f-texte); font-style:normal; }
#stage .inv-or-pct { word-spacing:2px; }
/* ---- ajustements après capture (fiches de bâtiment) ---- */
#stage .screen.building .building-back .picon { color:#fff; }
#stage .building-effet { min-height:0; align-items:center; }
#stage .building-effet .effet-fleche { width:26px; height:3px; }
#stage .building-actions .building-buy.sortie { justify-content:center; }
/* les Alliés se taisent pendant le menu Attaquer, le journal ou une fiche (la rangée entière se tait déjà par cite-cap26.css ; filet pour l'ordre des couches) */
#stage:has(#cap26-attack-menu:not([hidden])) .home-allies, #stage:has(#inv-journal:not([hidden])) .home-allies, #stage .screen.home:has(.bcard:not([hidden])) .home-allies { visibility:hidden; }
/* Donjon, stock de boucliers plein : une ligne de statut, ni carte ni boutons éteints */
#stage .offre-bloc.plein { padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .offre-bloc.plein .offre-btns { display:none; }
#stage .offre-bloc.plein .offre-raison { margin:0; text-align:left; font:600 15px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
/* ================================================================ 7. ARÈNES (retour du 24 octobre 2026, audit des cartes) : une liste à filets, ni carte par défi, ni « Jouer » bleu répété */
/* l'en-tête : retour en glyphe nu (24 dans 44), titre en texte, plus de plaque ivoire ; le sur-titre en capitales n'est plus que pour les lecteurs d'écran */
#stage .screen.panel.arena-screen { padding-left:calc(18px + var(--safe-l)); padding-right:calc(18px + var(--safe-r)); }
#stage .arena-screen .arena-head { gap:2px; margin-left:-12px; padding:calc(var(--safe-t) + 10px) 0 4px; align-items:center; }
#stage .arena-screen .arena-head > .round-btn { flex:none; width:44px; height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--sm-ink, #12233F); display:grid; place-items:center; }
#stage .arena-screen .arena-head > .round-btn .picon { width:24px; color:var(--sm-ink, #12233F); }
#stage .arena-screen .arena-head > div { height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; justify-content:center; }
#stage .arena-screen .arena-head h2 { margin:0; font:italic 900 30px/1 var(--f-titre); color:var(--sm-ink, #12233F); }
#stage .arena-screen .arena-intro { margin:2px 0 0; font:600 15px/1.25 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage .arena-screen .arena-aide { margin:0 0 4px; }
/* trois familles : un titre de section et un filet, 24 entre les groupes (une carte par défi n'existe plus) */
#stage .arena-screen .arena-contracts { gap:0; }
#stage .arena-screen .arena-group-title { margin:22px 0 2px; padding:0 0 6px; font:800 18px/1.2 var(--f-texte); font-style:normal; letter-spacing:0; text-transform:none; color:var(--sm-ink, #12233F); border-bottom:1px solid rgba(18,35,63,.16); }
#stage .arena-screen .arena-group-title:first-child { margin-top:8px; }
#stage .arena-screen .arena-group-title small { font:600 14px/1 var(--f-texte); color:var(--sm-ink2, #46566F); }
/* le défi : une ligne qui se touche en entier (médaillon peint, nom, record et prime en texte) ; « Jouer » reste dit, en texte azur sans plaque, avec son chevron (le jugement du 24 octobre : sans verbe on ne sait pas si la ligne lance ou ouvre) */
#stage .arena-screen .arena-contract { min-height:76px; padding:10px 2px; gap:12px; grid-template-columns:44px minmax(0, 1fr) auto; border:0; border-bottom:1px solid rgba(18,35,63,.16); border-radius:0; background:none; box-shadow:none; }
#stage .arena-screen .arena-contract:not(.arena-siege-variant) { min-height:76px; }
#stage .arena-screen .arena-contract:active { transform:none; background:rgba(18,35,63,.06); }
#stage .arena-screen .arena-contract > b { min-width:0; min-height:0; width:auto; height:auto; padding:0 2px 0 4px; margin:0; justify-self:end; display:flex; align-items:center; gap:7px; border:0; border-radius:0;
background:none; box-shadow:none; font:800 16px/1 var(--f-texte); font-style:normal; color:#0B4FB3; transform:none; }
#stage .arena-screen .arena-contract > b::after { content:''; flex:none; width:8px; height:8px; border-top:2.5px solid currentColor; border-right:2.5px solid currentColor; transform:rotate(45deg); }
/* l'unité de l'assaut chronométré : une ligne de réglage comme dans Paramètres, la valeur à droite soulignée, sans boîte */
#stage .arena-screen .arena-chrono-ban { min-height:56px; margin:0; padding:0 2px; border-bottom:1px solid rgba(18,35,63,.16); font:700 17px/1.2 var(--f-texte); color:var(--sm-ink, #12233F); }
#stage .arena-screen .arena-chrono-ban select { flex:none; max-width:62%; min-height:44px; padding:0 22px 0 0; border:0; border-radius:0; background:none; box-shadow:none; -webkit-appearance:none; appearance:none; text-align:right; text-align-last:right;
font:800 17px/1.2 var(--f-texte); font-style:normal; color:var(--sm-ink, #12233F);
background:url("data:image/svg+xml,") right center / 16px no-repeat; }
/* ================================================================ 8. MONDE, vue Région (retour du 24 octobre 2026, audit des cartes) : plus trois plaques ivoire en tête, comme la vue du monde (section 5) */
#stage .cap26-carte[data-cap26-vue="region"] > .head { align-items:center; gap:2px; padding:calc(var(--safe-t) + 6px) calc(16px + var(--safe-r)) 8px calc(2px + var(--safe-l));
background:linear-gradient(to bottom, rgba(3,14,34,.86), rgba(3,14,34,.5) 62%, rgba(3,14,34,0)); }
#stage .cap26-carte .cap26-region-back.round-btn { flex:none; width:44px; height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:#fff; display:grid; place-items:center; }
#stage .cap26-carte .cap26-region-back.round-btn .picon { width:24px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,8,22,.85)); }
#stage .cap26-carte[data-cap26-vue="region"] .cap26-region-title { height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; font:italic 900 26px/1 var(--f-titre); color:#fff;
text-shadow:0 2px 3px rgba(0,8,22,.9), 0 0 14px rgba(0,8,22,.5); }
#stage .cap26-carte[data-cap26-vue="region"] .carte-comptes { height:auto; padding:0; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .cap26-carte[data-cap26-vue="region"] .carte-compte .val, #stage .cap26-carte[data-cap26-vue="region"] .carte-etoiles .val { color:#fff; text-shadow:0 1px 3px rgba(0,8,22,.95), 0 0 8px rgba(0,8,22,.55); }
#stage .cap26-carte[data-cap26-vue="region"] .carte-compte .val::before { background:#fff; }
#stage .cap26-carte[data-cap26-vue="region"] .carte-etoiles .val { color:#FFD66B; }
#stage .cap26-carte[data-cap26-vue="region"] .carte-compte > small, #stage .cap26-carte[data-cap26-vue="region"] .carte-etoiles > em, #stage .cap26-carte[data-cap26-vue="region"] .carte-etoiles > small { color:rgba(255,255,255,.82); text-shadow:0 1px 3px rgba(0,8,22,.95); }
#stage .cap26-carte[data-cap26-vue="region"] :is(.carte-compte, .carte-etoiles)::before { background:rgba(255,255,255,.35); }
/* le mode du niveau bonus (« Siège ») est un statut : du texte avec son glyphe, jamais une pilule */
#stage .map-bonus-mode { min-height:0; padding:0; }
#stage .map-bonus-mode::before { background:none; box-shadow:none; }
/* ================================================================ 9. LIGUE (retour du 24 octobre 2026, audit des cartes) : un classement à filets, ni carte par rang, ni pilule de division, ni plaque d'en-tête */
#stage .ligue-screen .ligue-tete { gap:2px; padding:calc(var(--safe-t) + 6px) calc(6px + var(--safe-r)) 6px calc(2px + var(--safe-l)); }
#stage .ligue-screen .ligue-retour.round-btn, #stage .ligue-screen .ligue-param.round-btn { flex:none; width:44px; height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--sm-ink, #12233F); display:grid; place-items:center; }
#stage .ligue-screen .ligue-retour.round-btn:active, #stage .ligue-screen .ligue-param.round-btn:active { transform:none; background:rgba(18,35,63,.06); }
#stage .ligue-screen .ligue-retour.round-btn .picon { width:24px; color:var(--sm-ink, #12233F); }
#stage .ligue-screen .ligue-param.round-btn svg { width:24px; height:24px; color:var(--sm-ink, #12233F); }
#stage .ligue-screen .ligue-plaque { min-height:0; padding:0 6px 0 4px; gap:10px; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .ligue-screen .ligue-insigne { width:40px; height:48px; }
#stage .ligue-screen .ligue-nom { font-size:25px; }
#stage .ligue-screen .ligue-liste { gap:0; padding:0 calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l)); }
/* « Les Garnisons sont tenues par le jeu » : une ligne de texte, plus de bandeau jaune ; les deux intitulés de colonne en texte courant, plus en capitales */
#stage .ligue-screen .ligue-jeu-note { justify-content:flex-start; margin:0; padding:2px 2px 8px; border-radius:0; background:none; color:var(--inv-encre-2); font:600 13px/1.2 var(--f-texte); }
#stage .ligue-screen .ligue-entete { padding:4px 2px 6px; font:700 12.5px/1 var(--f-texte); letter-spacing:0; text-transform:none; color:var(--inv-encre-2); border-bottom:1px solid rgba(18,35,63,.16); }
/* une ligne par rang : filet dessous, rien autour ; le podium se lit à son rang en or, toi à une bande bleutée et un liseré de 3 */
#stage .ligue-screen .ligue-ligne, #stage .ligue-screen .ligue-ligne.podium, #stage .ligue-screen .ligue-ligne.vide { min-height:54px; padding:3px 2px; border:0; border-bottom:1px solid rgba(18,35,63,.12); border-radius:0; background:none; box-shadow:none; }
#stage .ligue-screen .ligue-ligne.moi { padding-left:8px; border-bottom:1px solid rgba(18,35,63,.12); background:rgba(47,134,230,.16); box-shadow:inset 3px 0 0 #2F86E6; }
#stage .ligue-screen .ligue-div-p, #stage .ligue-screen .ligue-ligne.moi .ligue-div-p { min-width:0; padding:0 2px; border:0; border-radius:0; background:none; font:italic 900 13px/1 var(--f-titre); color:var(--inv-encre-2); opacity:.7; }
#stage .ligue-screen .ligue-ligne.moi .ligue-div-p { color:#0B4FB3; }
/* le pied : « 3e sur 30 » en texte, « Toutes les ligues » en ligne de liste à chevron */
#stage .ligue-screen .ligue-pied { padding:4px calc(14px + var(--safe-r)) 6px calc(14px + var(--safe-l)); border-top:1px solid rgba(18,35,63,.16); background:none; box-shadow:none; }
#stage .ligue-screen .ligue-rec { min-height:44px; padding:4px 2px; border:0; border-radius:0; background:none; }
#stage .ligue-screen .ligue-toutes { margin:0; padding:4px 2px; border:0; border-top:1px solid rgba(18,35,63,.12); border-radius:0; background:none; box-shadow:none; }
#stage .ligue-screen .ligue-toutes:active { transform:none; background:rgba(18,35,63,.06); }
/* ================================================================ 10. SOCIAL (ex-Alliés, retour du 24 octobre 2026) : ta bannière en texte, trois étapes en liste, « Défier un ami » seul bouton plein, en bas */
#stage .allies-screen .allies-tete { gap:2px; padding:calc(var(--safe-t) + 6px) calc(14px + var(--safe-r)) 2px calc(2px + var(--safe-l)); }
#stage .allies-screen .allies-retour.round-btn { flex:none; width:44px; height:44px; padding:0; border:0; border-radius:0; background:none; box-shadow:none; color:var(--inv-encre); display:grid; place-items:center; }
#stage .allies-screen .allies-retour.round-btn:active { transform:none; background:rgba(18,35,63,.06); }
#stage .allies-screen .allies-retour.round-btn .picon { width:24px; color:var(--inv-encre); }
#stage .allies-screen .allies-corps { gap:0; padding:6px calc(18px + var(--safe-r)) calc(14px + var(--safe-b)) calc(18px + var(--safe-l)); }
#stage .allies-screen .allies-moi { min-height:0; padding:8px 0 14px; gap:12px; border:0; border-bottom:1px solid rgba(18,35,63,.16); border-radius:0; background:none; box-shadow:none; color:var(--inv-encre); overflow:visible; }
#stage .allies-screen .allies-moi::before { content:none; }
#stage .allies-screen .allies-moi-insigne { filter:drop-shadow(0 2px 0 rgba(0,0,0,.2)); }
#stage .allies-screen .allies-moi-nom { text-shadow:none; color:var(--inv-encre); font-size:26px; }
#stage .allies-screen .allies-moi-txt small { color:var(--inv-encre-2); }
#stage .allies-screen .allies-moi-txt .allies-code { color:#8A5A12; opacity:1; }
/* l'état vide : un titre et trois étapes numérotées en chiffres nus, plus de carte pointillée ni de cartes dedans */
#stage .allies-screen .allies-vide { padding:18px 0 0; border:0; border-radius:0; background:none; }
#stage .allies-screen .allies-etapes { margin:8px 0 0; gap:0; }
#stage .allies-screen .allies-etapes li { gap:14px; padding:12px 0; border:0; border-bottom:1px solid rgba(18,35,63,.12); border-radius:0; background:none; }
#stage .allies-screen .allies-etape-n { width:24px; height:auto; border:0; border-radius:0; background:none; box-shadow:none; font:italic 900 26px/1 var(--f-affiche); color:#B8821C; }
/* le lien reçu ailleurs : une ligne de liste qui s'ouvre, sans carte */
#stage .allies-screen .allies-coller { margin-top:6px; border:0; border-radius:0; background:none; }
#stage .allies-screen .allies-coller > summary { min-height:48px; padding:0 2px; border-bottom:1px solid rgba(18,35,63,.12); }
#stage .allies-screen .allies-note { margin:12px 2px 0; }
/* le classement : une ligne par ami, filet dessous ; Attaquer devient du texte azur, plus un bouton d'or par ligne */
#stage .allies-screen .allies-sec { margin:18px 2px 4px; font:800 17px/1.2 var(--f-texte); letter-spacing:0; text-transform:none; color:var(--inv-encre); }
#stage .allies-screen .allies-liste { gap:0; }
#stage .allies-screen .al-ligne, #stage .allies-screen .al-ligne.ouvert { min-height:64px; padding:6px 2px; border:0; border-bottom:1px solid rgba(18,35,63,.12); border-radius:0; background:none; box-shadow:none; }
#stage .allies-screen .al-ligne.moi { padding-left:8px; background:rgba(47,134,230,.16); box-shadow:inset 3px 0 0 #2F86E6; }
#stage .allies-screen .al-nom small { padding:0; border-radius:0; background:none; color:#0B4FB3; font-size:12px; text-transform:uppercase; letter-spacing:.06em; } /* « toi » est un statut : du texte, pas une pastille */
#stage .allies-screen .al-tiroir { margin:0; padding:6px 2px 10px; border:0; border-bottom:1px solid rgba(18,35,63,.12); border-radius:0; background:none; }
#stage .allies-screen .al-attaque { width:auto; min-width:64px; min-height:44px; padding:0 8px; border:0; border-radius:0; background:none; box-shadow:none; color:#0B4FB3; }
#stage .allies-screen .al-attaque .picon, #stage .allies-screen .al-attaque small { color:#0B4FB3; }
#stage .allies-screen .al-attaque:active { transform:none; background:rgba(18,35,63,.06); box-shadow:none; }
#stage .allies-screen .al-act.envoyer { border:0; border-radius:0; background:none; justify-content:flex-start; padding:0 2px; }
/* « Défier un ami » : la seule action pleine, au pied de l'écran (y ≥ 620) quel que soit le contenu au-dessus */
#stage .allies-screen .allies-copie, #stage .allies-screen .allies-lien { order:8; margin:12px 0 0; }
#stage .allies-screen .allies-inviter { order:9; margin:auto 0 0; min-height:60px; }
#stage .allies-screen .allies-note { margin-bottom:16px; }
/* ================================================================ 11. TITRE (retour du 24 octobre 2026) : le profil et la reprise en texte sur un dégradé sombre, « Aller à la Cité » en lien ; un seul bouton plein */
#stage .title-screen .title-entry { position:relative; isolation:isolate; gap:10px; }
#stage .title-screen .title-entry::before { content:''; position:absolute; z-index:-1; left:-60px; right:-60px; top:-150px; bottom:-60px; pointer-events:none;
background:linear-gradient(to bottom, rgba(5,13,30,0), rgba(5,13,30,.7) 30%, rgba(5,13,30,.94) 100%); }
#stage .title-screen .title-profile, #stage .title-screen .title-nom-bloc { min-height:0; padding:0 4px; gap:12px; border:0; border-radius:0; background:none; box-shadow:none; }
#stage .title-screen .title-portrait { width:48px; height:48px; background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
#stage .title-screen .title-portrait .picon { width:34px; color:#fff; }
#stage .title-screen .title-profile-copy strong { color:#fff; text-shadow:0 1px 3px rgba(0,8,22,.9); font-size:22px; }
#stage .title-screen .title-level { padding:0 0 0 12px; border-left:1px solid rgba(255,255,255,.35); border-radius:0; background:none; box-shadow:none; }
#stage .title-screen .title-level small { color:rgba(255,255,255,.85); text-shadow:0 1px 3px rgba(0,8,22,.9); }
#stage .title-screen .title-level b { color:#FFD66B; text-shadow:0 1px 3px rgba(0,8,22,.9); }
#stage .title-screen .title-nom-lbl { color:#FFD66B; }
#stage .title-screen .title-nom-saisie .picon { color:rgba(255,255,255,.8); }
#stage .title-screen .nom-champ { color:#fff; border:0; border-radius:0; background:none; box-shadow:inset 0 -2px 0 rgba(255,255,255,.5); }
#stage .title-screen .nom-champ::placeholder { color:rgba(255,255,255,.65); }
#stage .title-screen .nom-champ:focus { box-shadow:inset 0 -2px 0 #FFD66B; }
#stage .title-screen .title-reprise-note { padding:0 6px; border:0; border-radius:0; background:none; box-shadow:none; color:#fff; text-align:center; font:700 15px/1.3 var(--f-texte); text-shadow:0 1px 3px rgba(0,8,22,.9); }
#stage .title-screen .title-reprise-info { padding:0 6px; border:0; border-radius:0; background:none; box-shadow:none; color:#fff; font:700 15px/1.3 var(--f-texte); text-shadow:0 1px 3px rgba(0,8,22,.9); }
#stage .title-screen .title-cite { min-height:48px; padding:0 16px; border:0; border-radius:0; background:none; box-shadow:none; color:#fff; font:700 16px/1 var(--f-texte); text-decoration:underline; text-underline-offset:4px; text-shadow:0 1px 3px rgba(0,8,22,.9); }
/* ================================================================ 12. JOURNAL « Pendant ton absence » (retour du 24 octobre 2026) : une liste à filets, « Vengeance » en texte d'action, plus de carte ni de bouton bleu répété par ligne */
#stage .inv-feuille .inv-f-liste { gap:0; padding:0 calc(14px + var(--safe-r)) 8px calc(14px + var(--safe-l)); }
#stage .inv-feuille .inv-att { min-height:72px; padding:8px 2px 8px 10px; border:0; border-bottom:1px solid rgba(18,35,63,.14); border-radius:0; background:none; box-shadow:inset 3px 0 0 transparent; }
#stage .inv-feuille .inv-att.pillee { box-shadow:inset 3px 0 0 var(--inv-rouge); }
#stage .inv-feuille .inv-att.tenue { box-shadow:inset 3px 0 0 #4F9C3A; }
#stage .inv-feuille .inv-venger, #stage .inv-feuille .inv-venger.inv-honneur { flex:none; width:auto; min-width:0; height:44px; padding:0 6px; border:0; border-radius:0; background:none; box-shadow:none; color:#0B4FB3; font:800 16px/1.05 var(--f-texte); text-decoration:underline; text-underline-offset:4px; }
#stage .inv-feuille .inv-venger:active { transform:none; background:rgba(18,35,63,.06); box-shadow:none; }