/* Lot C (26 octobre 2026) : la bataille et sa fin lisibles. Critiques d'Opus et d'Astra du 26 octobre (docs/rapports/2026-10-26/critique_graphismes/) :
   chiffres sans icône au-dessus du champion, bouton du champion aux étiquettes instables, défaite « formulaire », danger du portail invisible.
   Chargée APRÈS toutes les autres feuilles (index.html) : les règles de cette feuille remplacent celles d'arcmarch.css, de lot2-monde-bataille.css,
   de lot4-resultats.css et de champion.css sans !important. Grammaire : docs/design/INTERFACE_GRAMMAIRE.md (une action dominante, la couleur porte un sens :
   rouge = l'ennemi, or = gain, bleu = le camp du joueur).
   Aucun backdrop-filter, aucun filter sur #canvas ; les animations ne touchent que transform et opacity. */

/* ======================================================================================================================
   1. le compteur des victimes de la charge (au-dessus du Champion) : toujours une icône, jamais « 0 »
   ====================================================================================================================== */
#stage #champ-tag #champ-tag-n { min-width:0; height:30px; padding:0 11px 0 7px; gap:3px; border-radius:15px; background:rgba(44,8,10,.95);
  box-shadow:inset 0 0 0 2px #FF6A4D, 0 2px 5px rgba(0,0,0,.55); font:italic 900 23px/1 var(--f-titre); color:#fff; }
#stage #champ-tag #champ-tag-n::before { content:''; flex:none; width:20px; height:20px; background:#FF8A6A;
  -webkit-mask:var(--ic-epees) center / contain no-repeat; mask:var(--ic-epees) center / contain no-repeat; }

/* ======================================================================================================================
   2. le bouton du Champion : UNE mise en page, la même dans tous les états et pour les six champions
      · l'anneau de jauge (68, bande de 8) porte le médaillon (44) ;
      · la pastille « mot d'état » est posée sur le bas de l'anneau (« 42 % », « Lancer », « Prête », « Armé », « Attends », « Lancé ») ;
      · dessous, le nom court de la capacité, sans boîte, jamais plus large que le bouton ;
      · prêt : l'anneau est plein et or, deux ondes de halo partent de lui, le médaillon respire, la pastille devient or : il se voit à bout de bras.
   ====================================================================================================================== */
#stage #champ { width:80px; min-height:92px; }
#stage #champ .ring { width:68px; height:68px; background:radial-gradient(circle, #08162B 0 62%, #0B2342 63%);
  box-shadow:0 0 0 2px #0A1830, 0 0 12px rgba(0,148,255,.6), 0 3px 8px rgba(0,8,26,.65); }
#stage #champ .ring::before { inset:2px; background:conic-gradient(from -90deg, #27C6FF 0, #7BE4FF var(--fill), #0E2442 var(--fill));
  -webkit-mask:radial-gradient(circle closest-side, transparent 23.6px, #000 24px);
  mask:radial-gradient(circle closest-side, transparent 23.6px, #000 24px); }
#stage #champ .disc { width:44px; height:44px; overflow:hidden; background:radial-gradient(circle at 50% 38%, #1B2A44, #0B1224 72%); }
#stage #champ .helm .champ-med { --med:44px; }
#stage #champ::before { left:6px; width:68px; height:68px; border:3px solid #FFE08A; background:radial-gradient(circle closest-side, rgba(255,214,110,.5), rgba(255,214,110,0));
  box-shadow:none; opacity:0; transform-origin:50% 50%; }
#stage #champ::after { left:6px; width:68px; height:68px; }

/* la pastille : même place, même gabarit, dans tous les états */
#stage #champ .pct { position:absolute; left:50%; bottom:-10px; top:auto; transform:translateX(-50%); z-index:2; display:flex; align-items:center; justify-content:center;
  width:auto; min-width:44px; height:21px; padding:0 8px; box-sizing:border-box; clip:auto; overflow:visible; white-space:nowrap; border-radius:11px;
  font:italic 800 15px/1 var(--f-titre); letter-spacing:.02em; color:#CFEFFF; background:#07162B; box-shadow:inset 0 0 0 1.5px #3AC0FF, 0 2px 4px rgba(0,0,0,.55); }
#stage #champ[data-etat="non"] .pct { color:#C4CEDB; background:#1A2433; box-shadow:inset 0 0 0 1.5px #7C8DA3, 0 2px 4px rgba(0,0,0,.55); }
#stage #champ[data-etat="arme"] .pct, #stage #champ[data-etat="competence"] .pct { color:#06223F; background:linear-gradient(180deg, #FFFFFF, var(--kit-c, #A9DBFF)); box-shadow:inset 0 0 0 1.5px #fff, 0 2px 5px rgba(0,40,120,.55); }
#stage #champ.ready .pct { color:#2A1B02; background:linear-gradient(180deg, #FFF3C4, #FFC83A); box-shadow:inset 0 0 0 1.5px #FFFBE6, 0 0 0 1.5px #8A5A06, 0 2px 5px rgba(0,0,0,.6); }
#stage #champ.ready.pending .pct { color:#CFEFFF; background:#07162B; box-shadow:inset 0 0 0 1.5px #3AC0FF, 0 2px 4px rgba(0,0,0,.55); }
#stage #champ.signal .pct { color:#2A1B02; background:linear-gradient(180deg, #FFF3C4, #FFC83A); }

/* le nom court de la capacité : sans boîte, cerné d'encre pour se lire sur la terre, l'herbe et le violet ; le plus long (« Ralliement ») tient dans le bouton */
#stage #champ .lbl, #stage #champ.ready .lbl, #stage #champ[data-etat] .lbl { margin-top:14px; min-height:0; max-width:80px; padding:0; box-sizing:border-box; display:block; overflow:hidden; text-overflow:clip; white-space:nowrap;
  border-radius:0; background:none; box-shadow:none; animation:none; align-self:center; text-align:center;
  font:italic 800 16px/1.1 var(--f-titre); letter-spacing:.02em; color:#fff; -webkit-text-stroke:3.2px rgba(5,14,30,.92); paint-order:stroke fill; text-shadow:0 1px 3px rgba(0,0,0,.6); }

/* prêt : l'anneau plein et or, les halos, le médaillon qui respire */
#stage #champ.ready .ring { background:radial-gradient(circle, #1B2F52 0 62%, #FFE9A0 63%);
  box-shadow:0 0 0 2.5px #FFF6D4, 0 0 14px 4px rgba(255,200,70,.9), 0 0 26px 8px rgba(255,160,40,.45), 0 3px 8px rgba(0,8,26,.65); animation:champRespire 1.15s ease-in-out infinite; }
#stage #champ.ready .ring::before { background:conic-gradient(from -90deg, #FFE48A, #FFB020 38%, #FFF4C8 52%, #FFB020 66%, #FFE48A); }
#stage #champ.ready::before { opacity:.9; animation:champOnde 1.15s ease-out infinite; }
#stage #champ.ready::after { content:''; opacity:0; box-shadow:none; border:3px solid #FFF6D4; animation:champOnde 1.15s ease-out .575s infinite; }
#stage #champ.ready.lance::after { animation:champEclat .45s cubic-bezier(.2,.7,.3,1) both; box-shadow:0 0 0 4px var(--or), 0 0 22px 6px rgba(232,182,76,.7); }
#stage #champ.ready .ring::after { inset:-6px; -webkit-mask:radial-gradient(circle closest-side, transparent 33px, #000 34px, #000 38px, transparent 40px); mask:radial-gradient(circle closest-side, transparent 33px, #000 34px, #000 38px, transparent 40px); }
#stage #champ.ready.pending .ring { background:radial-gradient(circle, #08162B 0 62%, #0B2342 63%); box-shadow:0 0 0 2px #0A1830, 0 0 12px rgba(0,148,255,.6), 0 3px 8px rgba(0,8,26,.65); animation:none; }
#stage #champ.ready.pending .ring::before { background:conic-gradient(from -90deg, #27C6FF, #7BE4FF); }
#stage #champ.ready.pending::before, #stage #champ.ready.pending::after { opacity:0; animation:none; }
@keyframes champRespire { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.07); } }
@keyframes champOnde { 0% { opacity:.85; transform:scale(1); } 100% { opacity:0; transform:scale(1.7); } }
/* Brenna : pendant la frappe annoncée d'un chef, l'anneau se cerne de blanc et d'or */
#stage #champ.signal .ring { box-shadow:0 0 0 3px #FFFFFF, 0 0 0 5px var(--or), 0 0 18px 6px rgba(255,230,150,.85); }
@media (prefers-reduced-motion:reduce) {
  #stage #champ.ready .ring, #stage #champ.ready::before, #stage #champ.ready::after { animation:none; }
  #stage #champ.ready::before { opacity:.7; transform:scale(1.18); }
}

/* ======================================================================================================================
   3. le danger du portail allié (hud.js placeHome) : un écu et sa jauge sous le portail, un anneau rouge qui pulse autour de lui
   ====================================================================================================================== */
#stage #hud-home { position:absolute; left:0; top:0; z-index:var(--z-hud); width:0; height:0; pointer-events:none; will-change:transform; }
#stage #hud-home[hidden] { display:none; }
#hud-home .home-anneau { position:absolute; left:-62px; top:-30px; width:124px; height:60px; box-sizing:border-box; border-radius:50%; border:3px solid #FF4A3D; opacity:0;
  box-shadow:0 0 12px 2px rgba(255,64,40,.7), inset 0 0 12px rgba(255,64,40,.45); }
#hud-home[data-etat="danger"] .home-anneau { animation:homeOnde 1s ease-out infinite; }
#hud-home[data-etat="critique"] .home-anneau { animation:homeOnde .55s ease-out infinite; border-width:4px; }
#hud-home .home-ecu { position:absolute; left:-36px; top:30px; width:72px; height:24px; box-sizing:border-box; display:flex; align-items:center; gap:5px; padding:0 8px 0 5px; border-radius:12px;
  background:rgba(6,16,30,.94); box-shadow:inset 0 0 0 1.5px #3AC0FF, 0 2px 5px rgba(0,0,0,.55); }
#hud-home .home-ecu-ic { flex:none; width:16px; height:16px; background:#A6E9FF; -webkit-mask:var(--ic-bouclier) center / contain no-repeat; mask:var(--ic-bouclier) center / contain no-repeat; }
#hud-home .home-jauge { position:relative; flex:1; height:9px; border-radius:5px; background:#0E2442; overflow:hidden; }
#hud-home .home-jauge > i { position:absolute; inset:0; background:linear-gradient(90deg, #1DBFFF, #7BE4FF); transform-origin:left center; transform:scaleX(1); transition:transform .24s var(--courbe); }
#hud-home:is([data-etat="danger"], [data-etat="critique"]) .home-ecu { background:rgba(52,6,10,.96); box-shadow:inset 0 0 0 2px #FF4A3D, 0 2px 5px rgba(0,0,0,.55); animation:homeBat .9s ease-in-out infinite; }
#hud-home:is([data-etat="danger"], [data-etat="critique"]) .home-ecu-ic { background:#FF8A7A; }
#hud-home:is([data-etat="danger"], [data-etat="critique"]) .home-jauge { background:#3A0D10; }
#hud-home[data-etat="critique"] .home-ecu { animation-duration:.5s; }
@keyframes homeOnde { 0% { opacity:.95; transform:scale(.72); } 100% { opacity:0; transform:scale(1.3); } }
@keyframes homeBat { 0%, 100% { transform:scale(1); } 50% { transform:scale(1.1); } }
@media (prefers-reduced-motion:reduce) {
  #hud-home .home-anneau, #hud-home .home-ecu { animation:none !important; }
  #hud-home:is([data-etat="danger"], [data-etat="critique"]) .home-anneau { opacity:.85; }
}

/* ======================================================================================================================
   4. DÉFAITE : la fin se joue sur la scène (critiques d'Opus G10 et d'Astra : panneau crème façon formulaire sur 45 % de l'écran qui cache le portail tombé,
      « Reprendre ici » souligné comme un lien, barre rouge pleine lue comme un succès, bilan peu relié à la bataille)
      · haut : le fort et le champ de bataille restent entiers ; la plaque du bilan est posée dans le champ libre, encre bleu nuit, filet rouge ;
      · milieu : le portail et la mêlée qui l'a pris ;
      · pied : « Rejouer » (l'action dominante, bleu plein), « Reprendre ici » (bouton de contour, jamais un lien) et la Cité (bouton de contour).
   ====================================================================================================================== */
#stage .outcome-defeat { justify-content:flex-start; align-items:stretch; overflow:hidden; }
#stage .outcome-defeat .outcome-veil { top:0; height:auto; background:linear-gradient(to top, rgba(10,4,8,.9) 0, rgba(10,4,8,.55) 22%, rgba(24,6,10,.18) 50%, rgba(24,6,10,.34) 100%); }
#stage .outcome-defeat .defeat-panel { position:absolute; inset:0; max-width:none; width:auto; padding:0; gap:0; border:0; border-radius:0; background:none; box-shadow:none; pointer-events:none; animation:none; }
#stage .outcome-defeat .defeat-panel > * { pointer-events:auto; }
/* la plaque du bilan */
#stage .outcome-defeat .over-plaque { position:absolute; left:22px; right:22px; top:228px; box-sizing:border-box; padding:12px 16px 14px; border-radius:16px; color:#F7FBFF;
  background:linear-gradient(180deg, rgba(10,18,36,.94), rgba(6,12,26,.94)); box-shadow:inset 0 0 0 1.5px rgba(255,138,122,.55), inset 0 3px 0 #D1242E, 0 8px 22px rgba(0,0,0,.5); animation:rs-vient 320ms var(--courbe) 60ms both; }
#stage .outcome-defeat .rs-emblem-defaite { position:absolute; left:14px; top:-16px; width:48px; height:48px; margin:0; animation:none; filter:drop-shadow(0 3px 3px rgba(0,0,0,.5)); }
#stage .outcome-defeat .defeat-panel .result-body { display:flex; flex-direction:column; align-items:stretch; gap:8px; padding:0; }
#stage .outcome-defeat .result-heading { margin:0 0 0 52px; text-align:left; font:italic 900 38px/1 var(--f-titre); color:#FF6A5C; text-shadow:0 2px 0 #4B0A11; }
#stage .outcome-defeat .result-heading::before { display:none; }
#stage .outcome-defeat .over-base { width:auto; align-self:stretch; display:flex; flex-direction:column; gap:6px; margin:0; padding:0; }
#stage .outcome-defeat .over-base-lbl { order:0; margin:0; text-align:left; font:600 16px/1.2 var(--f-texte); color:#DCE6F2; text-shadow:none; }
#stage .outcome-defeat .over-base-n { order:1; display:flex; justify-content:space-between; align-items:baseline; margin:0; text-align:left; font:800 17px/1.1 var(--f-texte); color:#FFFFFF; font-variant-numeric:tabular-nums; }
#stage .outcome-defeat .over-base-n::after { content:attr(data-reste); font:800 16px/1 var(--f-texte); color:#FF8A7A; }
#stage .outcome-defeat .over-base.si-pres .over-base-n { font-size:17px; }
#stage .outcome-defeat .over-base .sangle { order:2; height:16px; border-radius:8px; background:repeating-linear-gradient(135deg, #4A1118 0 6px, #5E1820 6px 12px); box-shadow:inset 0 0 0 1.5px rgba(255,138,122,.7); overflow:hidden; }
#stage .outcome-defeat .over-base .sangle > i { background:linear-gradient(90deg, #1DBFFF, #7BE4FF); border-radius:8px; transition:none; }
#stage .outcome-defeat .over-garde { margin:0; justify-content:flex-start; color:#DCE6F2; }
#stage .outcome-defeat .over-garde b { color:#FFC838; font-size:24px; }
/* les actions, au pied de l'écran */
#stage .outcome-defeat .over-actions { position:absolute; left:20px; right:20px; bottom:max(16px, calc(var(--safe-b) + 8px)); display:flex; flex-direction:column; gap:10px; margin:0; animation:apparait var(--t-apparition) var(--courbe) 200ms both; }
#stage .outcome-defeat #over-retry { width:100%; min-height:60px; margin:0; padding:6px 16px; }
#stage .outcome-defeat .over-second { display:flex; align-items:stretch; gap:10px; }
#stage .screen.outcome-defeat .over-second #over-revive.menu-command, #stage .screen.outcome-defeat .over-second .over-cite { box-sizing:border-box; min-height:52px; margin:0; color:#F7FBFF; background:rgba(6,14,30,.82); border:1.5px solid rgba(247,251,255,.65); border-radius:14px; box-shadow:none; }
#stage .screen.outcome-defeat .over-second #over-revive.menu-command { flex:1 1 auto; min-width:0; padding:4px 14px; gap:12px; justify-content:flex-start; }
#stage .screen.outcome-defeat .over-second #over-revive.menu-command::before, #stage .screen.outcome-defeat .over-second #over-revive.menu-command::after { display:none; }
#stage .screen.outcome-defeat #over-revive .command-copy { display:flex; flex-direction:column; align-items:flex-start; gap:3px; }
#stage .screen.outcome-defeat #over-revive .command-copy strong { font:italic 800 20px/1 var(--f-titre); color:#F7FBFF; text-decoration:none; }
#stage .screen.outcome-defeat #over-revive small { font:600 14px/1.1 var(--f-texte); color:#B9CCE0; text-decoration:none; }
#stage .screen.outcome-defeat #over-revive > .picon { width:28px; color:#A6E9FF; }
#stage .outcome-defeat .over-cite { flex:none; width:64px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; }
#stage .outcome-defeat .over-cite .picon { color:#F7FBFF; }
#stage .outcome-defeat .over-cite small { font:700 13px/1 var(--f-texte); color:#DCE6F2; }
#stage .outcome-defeat[data-variante="sans-reprise"] .over-second { display:block; }
#stage .outcome-defeat[data-variante="sans-reprise"] .over-cite { width:100%; flex-direction:row; gap:10px; }
#stage .outcome-defeat[data-variante="sans-reprise"] .over-cite small { font:800 17px/1 var(--f-texte); color:#F7FBFF; }

/* ======================================================================================================================
   5. VICTOIRE : même langage que la défaite (plaque encre bleu nuit, filet or), « Vidéo ×2 » en vrai bouton de contour or, « Continuer » seul bouton plein.
      Les teintes d'encre du socle sont redéfinies sur la plaque : tous les textes de la victoire (titres, légendes, chiffres) passent à l'ivoire sans toucher
      une règle de lot4-resultats.css ; les montants, les temps et les étoiles sont ceux de d'avant.
   ====================================================================================================================== */
#stage .outcome-victory .victory-panel { --sm-ink:#F7FBFF; --sm-ink2:#C7D6E8; --sm-or-s:#FFC838; --sm-bord:rgba(255,255,255,.22); --sm-vert:#7DF28F; --sm-iv:#0A1426; --sm-iv2:#13213A;
  background:linear-gradient(180deg, rgba(12,22,42,.96), rgba(6,13,28,.97)); border:0; box-shadow:inset 0 0 0 1.5px rgba(255,200,56,.55), inset 0 3px 0 #FFC838, 0 8px 22px rgba(0,0,0,.55); color:#F7FBFF; }
#stage .outcome-victory .won-scene .result-heading, #stage .outcome-victory .won-plaque .result-heading { color:#FFC838; text-shadow:0 2px 0 #6B4305, 0 0 16px rgba(255,200,56,.45); }
#stage .outcome-victory .gain-n { color:#FFC838; text-shadow:0 3px 0 #6B4305; }
#stage .outcome-victory .won-marche, #stage .outcome-victory .won-marche.plaque-module { background:rgba(255,255,255,.07); border:0; box-shadow:none; border-radius:12px; }
#stage .outcome-victory .victory-relic { background:rgba(255,255,255,.07); border:0; box-shadow:none; }
#stage .screen.outcome-victory[data-temps="repos"] .won-video:not(.fait):not(.indispo):not(.absente) { height:50px; border:1.5px solid rgba(255,200,56,.9); border-radius:14px; background:rgba(255,200,56,.1); box-shadow:none; }
#stage .screen.outcome-victory[data-temps="repos"] .won-video:not(.fait):not(.indispo) .won-video-lbl { font:italic 800 21px/1 var(--f-titre); color:#FFC838; text-decoration:none; }
#stage .screen.outcome-victory[data-temps="repos"] .won-video:not(.fait):not(.indispo) .won-video-sub { color:#E7D3A0; }