/* Retour 5 (20 octobre 2026, Bastien : « Ce n'est pas dans les paramètres que l'on doit pouvoir configurer son champion. »)
   L'écran du Champion (salle bleu nuit, portrait peint au centre, cartes ivoire du socle), son médaillon sur la Cité, le médaillon de chaque champion et la
   rangée de choix d'avant l'assaut (refonte des interfaces du 23 octobre 2026). Chargée en dernier ; les sélecteurs portent #stage pour passer devant le socle ivoire des panneaux.
   Aucun backdrop-filter, aucun filter sur #canvas. Images : --capa-charge et --capa-rally, posées sur #stage par src/ui/champion.js. */

/* ---------------------------------------------------------------- le sceau d'une capacité (emblème peint, repli : pictogramme) */
.champion-capa-ico { display:block; flex:none; background:center / contain no-repeat; }
.champion-capa-ico.capa-charge { background-image:var(--capa-charge); }
.champion-capa-ico.capa-rally { background-image:var(--capa-rally); }

/* ---------------------------------------------------------------- le médaillon de la Cité, au-dessus de l'angle droit d'Attaquer
   Chantier hud-cite2 (consigne de Bastien, 21 octobre 2026 : « Mets le bouton des champions à droite, et le bouton du Social à gauche ») :
   le médaillon et les Alliés se séparent sur les deux côtés de l'écran, sur la MÊME base, posée sur le haut de la pile d'Attaquer
   (bottom:100% de .battle-row : le bouton, et l'alerte d'attaques quand elle paraît), à la même place à tous les niveaux (seul aux niveaux 1
   et 2, le médaillon reste à droite). Les repères des bâtiments qui descendent contre Attaquer (cadenas du Portail à droite, bourse,
   Réparer et cadenas de la Trésorerie à gauche) évitent ces deux boîtes : hud.js `commandesAccueil`. La boîte, le disque, le libellé et la pastille des deux
   boutons sont UNE seule règle, dans refonte-cite.css (section 2) : ici ne reste que la peinture du disque du Champion (retour du 24 octobre 2026 : plus de gabarit en double). */
.home-champion-disque { position:absolute; left:6px; top:0; width:64px; height:64px; box-sizing:border-box; border-radius:50%; overflow:hidden;
  border:3px solid var(--or); background:radial-gradient(circle at 50% 38%, #3FB6FF 0%, #0B5FD0 46%, #062654 100%);
  box-shadow:0 0 0 2px #0A2346, 0 4px 0 #0A2346, 0 6px 14px rgba(2,8,22,.55), inset 0 2px 0 rgba(255,255,255,.35); }
.home-champion-heaume { position:absolute; inset:0; background:var(--champion-buste, var(--img-heaume)) var(--champion-buste-pos, 50% 56%) / var(--champion-buste-taille, 104%) auto no-repeat; }
.home-champion-capa { position:absolute; right:0; top:34px; width:30px; height:30px; box-sizing:border-box; border-radius:50%; border:2px solid var(--or);
  background-color:#0B2C5C; background-size:118%; box-shadow:0 2px 0 #0A2346, 0 3px 8px rgba(2,8,22,.5); }

/* la barre basse reste sous l'écran du Champion (la place Cité allumée : hud.js NAV_DE) */
#stage:has(> .screen[data-screen="champion"]:not([hidden])) > #nav-rail { display:flex; }
/* la pastille Paramètres de la Cité porte l'engrenage (le heaume est au Champion) */
#stage .home-profil .profile-seal > .profile-engrenage { width:30px; height:30px; color:var(--sm-ink, #12233F); }
/* le sous-titre d'une section (« même puissance, autre allure ») */

/* ---------------------------------------------------------------- combat-c1 (21 octobre 2026) : le choix du champion
   Doctrine v4 (D9) : cinq champions et le prototype d'Alaric. Un sélecteur sobre, dans le style de l'écran (cartes ivoire, la choisie
   cerclée d'azur et cochée) ; l'emblème de classe est un pictogramme en masque sur un disque de la couleur d'action du champion
   (alliée, jamais rouge). Les cartes illustrées viendront avec le chantier art et écrans. */
:root {
  --ic-arc:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill-rule='evenodd'><path d='M6 2.6c6.2 2.4 9.6 5.8 9.6 9.4S12.2 19 6 21.4l-.9-2.2c5.2-2 7.7-4.6 7.7-7.2S10.3 6.8 5.1 4.8z'/><path d='M5.6 3.7 6.6 3.4 6.6 20.6 5.6 20.3z'/><path d='M3 11h13.8l-2.4-2.3 1.3-1.3 4.6 4.6-4.6 4.6-1.3-1.3 2.4-2.3H3z'/></svg>");
  --ic-miroir:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill-rule='evenodd'><path d='M12 1.8a7.2 7.2 0 1 1 0 14.4 7.2 7.2 0 0 1 0-14.4zm0 2.6a4.6 4.6 0 1 0 0 9.2 4.6 4.6 0 0 0 0-9.2zM10.6 16.6h2.8v3.4h2.4v2.4H8.2V20h2.4z'/><path d='M9.4 6.8l3.6-1 .6 1.4-3.4 1.2z'/></svg>");
}
[data-classe="lame"] { --classe-ic:var(--ic-epee); --kit-c:#A9DBFF; }
[data-classe="ecu"] { --classe-ic:var(--ic-bouclier); --kit-c:#BFE6FF; }
[data-classe="arc"] { --classe-ic:var(--ic-arc); --kit-c:#7FE0D8; }
[data-classe="soin"] { --classe-ic:var(--ic-croix); --kit-c:#FFD27A; }
[data-classe="mage"] { --classe-ic:var(--ic-miroir); --kit-c:#E7D7FF; }
.champion-niveau { color:var(--kit-c, #BFE3FF); }

/* ---------------------------------------------------------------- le bouton de bataille : la couleur de la capacité (le médaillon peint et la pastille d'état
   « arme » et « competence » la prennent) ; la mise en page (anneau, pastille, nom court) est dans bataille-lisible.css (lot C, 26 octobre 2026). */
#stage #champ[data-kit="preux"] { --kit-c:#A9DBFF; }
#stage #champ[data-kit="aveline"] { --kit-c:#FFD27A; }
#stage #champ[data-kit="hugues"], #stage #champ[data-kit="brenna"] { --kit-c:#BFE6FF; }
#stage #champ[data-kit="oriane"] { --kit-c:#7FE0D8; }
#stage #champ[data-kit="alaric"] { --kit-c:#E7D7FF; }
#stage #champ[data-etat="non"] .helm { filter:grayscale(.5) brightness(.8); }

/* refonte des interfaces (23 octobre 2026, retour 1 de Bastien : « utilise les icônes de chaque champion ») : le bouton de bataille porte le MÉDAILLON peint du champion choisi
   (src/ui/champion-icones.js, posé par champion.js dans .helm), plus le heaume générique ni l'emblème de classe seul ; repli : emblème de classe et initiale. L'anneau de jauge, le libellé,
   le pourcentage et les états (charge, prêt : anneau plein, halo, libellé azur, éclat) sont ceux d'arcmarch.css et de lot2-monde-bataille.css. La pastille de classe de 16 est tue à cette taille. */
#stage #champ .helm { background:none; }
#stage #champ .helm .champ-med { --med:48px; position:absolute; inset:0; }
#stage #champ .helm .champ-med-classe { display:none; }
#stage #champ .helm .champ-med-disque { box-shadow:none; }

/* ======================================================================================================================
   REFONTE DES INTERFACES (23 octobre 2026, docs/design/INTERFACE_GRAMMAIRE.md ; retours 1 et 3 de Bastien)
   1. le MÉDAILLON d'un champion (src/ui/champion-icones.js) : son buste peint dans un disque déjà détouré, posé directement sur le fond (lot champions_icones_v01, candidats) ;
      sans image (absente ou en échec), repli honnête : un disque de la couleur de sa classe (Lame bleu roi, Écu ardoise, Arc vert forêt, Soin ivoire doré, Mage violet), l'emblème de classe
      en grand et l'initiale (portrait à venir, jamais le heaume générique) ; une pastille de 16 porte toujours l'emblème de classe, en bas à droite. Taille : --med (48 dans la rangée, 56 le choisi, 52 sur l'écran Champion, 132 en scène).
   2. la RANGÉE de choix d'avant l'assaut : cinq cercles, le choisi plus grand et cerclé d'or de 3, le nom court de 12 dessous, toute la colonne (60 x 72) est la cible ; sous la rangée,
      le nom complet et la compétence du choisi en texte. Le même composant dans l'écran du rival et le menu « À l'attaque ! ».
   3. le menu « À l'attaque ! » refait : une feuille, le contrat en texte, la rangée, une ligne de contexte, Jouer (le seul bouton plein), Arènes en ligne.
   ====================================================================================================================== */
[data-classe="lame"] { --med-fond:#1D4FBF; --med-emb:#FBF7EC; --med-pastille:#123A8F; }
[data-classe="ecu"] { --med-fond:#4A586B; --med-emb:#FBF7EC; --med-pastille:#2F3A49; }
[data-classe="arc"] { --med-fond:#2B6B42; --med-emb:#FBF7EC; --med-pastille:#1B4A2C; }
[data-classe="soin"] { --med-fond:#E7D49C; --med-emb:#6B4A0E; --med-pastille:#9A7418; }
[data-classe="mage"] { --med-fond:#6746B0; --med-emb:#FBF7EC; --med-pastille:#44307F; }
.champ-med { --med:48px; position:relative; display:block; flex:none; width:var(--med); height:var(--med); }
.champ-med-disque { position:absolute; inset:0; box-sizing:border-box; border-radius:50%; overflow:hidden; background:var(--med-fond, #1D4FBF);
  box-shadow:0 2px 0 rgba(8,20,48,.35), 0 4px 8px rgba(8,20,48,.28), inset 0 0 0 1.5px rgba(255,255,255,.38); }
.champ-med-buste { position:absolute; inset:0; display:none; background:var(--med-buste) var(--med-pos, 50% 18%) / var(--med-taille, cover) no-repeat; }
.champ-med[data-buste="oui"] .champ-med-buste { display:block; }
.champ-med[data-buste="oui"] .champ-med-disque { background:none; box-shadow:0 3px 6px rgba(8,20,48,.35); }
.champ-med-grand { position:absolute; left:50%; top:13%; width:54%; height:54%; transform:translateX(-50%); background:var(--med-emb, #FBF7EC);
  -webkit-mask:var(--classe-ic, var(--ic-epee)) center / contain no-repeat; mask:var(--classe-ic, var(--ic-epee)) center / contain no-repeat; }
.champ-med-init { position:absolute; left:0; right:0; bottom:9%; text-align:center; font:900 calc(var(--med) * .25)/1 var(--f-titre); font-style:italic; letter-spacing:.02em; color:var(--med-emb, #FBF7EC); }
.champ-med[data-buste="oui"] :is(.champ-med-grand, .champ-med-init) { display:none; }
.champ-med-classe { position:absolute; right:calc(var(--med) * -.02); bottom:calc(var(--med) * -.02); width:max(16px, calc(var(--med) * .3)); height:max(16px, calc(var(--med) * .3)); box-sizing:border-box;
  border-radius:50%; background:var(--med-pastille, #123A8F); border:1.5px solid #fff; box-shadow:0 1px 3px rgba(8,20,48,.45); }
.champ-med-classe::before { content:''; position:absolute; inset:18%; background:#fff; -webkit-mask:var(--classe-ic, var(--ic-epee)) center / contain no-repeat; mask:var(--classe-ic, var(--ic-epee)) center / contain no-repeat; }

/* la rangée : 5 colonnes de 60 x 72, étalées sur la largeur de la feuille */
.champ-rangee-hote[hidden] { display:none; }
.champ-rangee { display:flex; flex-direction:column; gap:4px; color:var(--sm-ink, #12233F); }
.champ-rangee-liste { display:flex; justify-content:space-between; align-items:flex-start; }
.champ-choix { flex:none; width:60px; height:72px; padding:0; display:flex; flex-direction:column; align-items:center; gap:2px; border:0; border-radius:12px; background:none; box-shadow:none; color:inherit; -webkit-tap-highlight-color:transparent; }
.champ-choix-cadre { position:relative; width:60px; height:58px; display:grid; place-items:center; }
.champ-rangee-liste.six .champ-choix, .champ-rangee-liste.six .champ-choix-cadre { width:54px; }
.champ-choix[hidden] { display:none; }
.champ-choix .champ-med { --med:48px; }
.champ-choix.on .champ-med-disque { box-shadow:0 0 0 3px var(--or, #E8B64C), 0 4px 10px rgba(8,20,48,.35); }
.champ-choix-nom { max-width:100%; font:700 12px/1.2 var(--f-texte); color:var(--sm-ink2, #46566F); white-space:nowrap; }
.champ-choix.on .champ-choix-nom { color:var(--sm-ink, #12233F); font-weight:800; }
.champ-choix:active .champ-med-disque { transform:scale(.94); }
/* la coche du choisi : 14, en haut à droite du médaillon (le choisi ne grandit pas : la rangée reste alignée) */
.champ-coche { display:none; position:absolute; top:1px; right:2px; z-index:2; width:14px; height:14px; box-sizing:border-box; border-radius:50%; background:var(--or, #E8B64C); border:1.5px solid #fff; box-shadow:0 1px 3px rgba(8,20,48,.5); }
.champ-coche::before { content:''; position:absolute; left:3px; top:2px; width:5px; height:3px; border:solid #12233F; border-width:0 0 1.8px 1.8px; transform:rotate(-45deg); }
.champ-choix.on .champ-coche { display:block; }
/* Alaric (prototype), sixième cellule seulement quand il est le choisi : anneau en pointillés */
.champ-choix[data-prototype] .champ-med::before { content:''; position:absolute; inset:-5px; z-index:1; box-sizing:border-box; border-radius:50%; border:3px dashed var(--or, #E8B64C); pointer-events:none; }
.champ-choix[data-prototype].on .champ-med-disque { box-shadow:0 3px 6px rgba(8,20,48,.35); }
.champ-choix:focus-visible { outline:3px solid var(--azur, #2F86E6); outline-offset:-1px; }
.champ-detail { margin:4px 0 0; min-height:20px; text-align:center; font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
.champ-detail strong { font-weight:800; color:var(--sm-ink, #12233F); }
.champ-detail span::before { content:' · '; }
.champ-detail span:empty::before { content:none; }
.champ-legende { margin:0 0 6px; font:700 13px/1.2 var(--f-texte); color:var(--sm-ink2, #46566F); }
.champ-ligne { margin:2px 0 0; min-height:36px; text-align:center; font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }

/* sur la feuille de l'écran du rival : séparée de la garnison par un filet de 1 */
.rival-carte .champ-rangee-hote { margin-top:4px; padding-top:10px; border-top:1px solid rgba(18,35,63,.12); }

/* l'écran Champion : le médaillon remplace l'emblème de classe seul ; en scène, sans portrait peint, un grand médaillon (jamais le heaume générique) */

/* le médaillon de la Cité : sans buste peint, l'emblème de classe sur la couleur de la classe au lieu du heaume générique (repli honnête ; le reste de la Cité est à l'agent du HUD) */
.home-champion[data-buste="non"] .home-champion-disque { background:var(--med-fond, #1D4FBF); }
.home-champion[data-buste="non"] .home-champion-heaume { background:var(--med-emb, #FBF7EC); inset:14px 14px 18px 14px;
  -webkit-mask:var(--classe-ic, var(--ic-epee)) center / contain no-repeat; mask:var(--classe-ic, var(--ic-epee)) center / contain no-repeat; }

/* ---------------------------------------------------------------- le menu « À l'attaque ! » */
#stage #cap26-attack-menu .attack-head { min-height:32px; padding:0 4px; }
#stage #cap26-attack-menu .cap26-attack-close.round-btn::before { content:none; }
#stage #cap26-attack-menu .cap26-attack-close.round-btn .picon { width:20px; color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .attack-content { gap:10px; }
#stage #cap26-attack-menu .att-contrat { display:flex; flex-direction:column; gap:3px; padding:0 4px; color:var(--sm-ink, #12233F); }
#stage #cap26-attack-menu .att-contrat[hidden] { display:none; }
#stage #cap26-attack-menu .att-entete { display:flex; align-items:center; justify-content:space-between; gap:8px; min-height:30px; }
#stage #cap26-attack-menu .att-sur { min-width:0; font:700 13px/1.2 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-nom { font:800 28px/1.05 'Grenze Gotisch', var(--f-titre); color:var(--sm-ink, #12233F); }
#stage #cap26-attack-menu .att-progression { display:flex; flex-direction:column; gap:2px; }
#stage #cap26-attack-menu .att-progression > strong { font:800 24px/1.05 'Grenze Gotisch', var(--f-titre); font-style:normal; color:var(--sm-ink, #12233F); }
#stage #cap26-attack-menu .att-progression > small { font:700 16px/1.25 var(--f-texte); font-style:normal; color:var(--sm-ink, #12233F); }
#stage #cap26-attack-menu .att-description, #stage #cap26-attack-menu .att-progression > small.attack-recompense { font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-description[hidden] { display:none; }
#stage #cap26-attack-menu .att-terminee { display:flex; flex-direction:column; gap:2px; margin:0; font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-terminee[hidden] { display:none; }
#stage #cap26-attack-menu .att-terminee strong { font:800 17px/1.2 var(--f-texte); color:var(--sm-ink, #12233F); }
#stage #cap26-attack-menu .att-garnison { padding:0; background:none; box-shadow:none; color:#6A4605; font:800 14px/1.3 var(--f-texte); }
#stage #cap26-attack-menu .att-garnison[hidden] { display:none; }
/* ennemi et terrain : deux lignes de texte, sans repli ni tuile */
#stage #cap26-attack-menu .att-lecture { display:flex; flex-direction:column; gap:3px; margin:2px 0 0; padding:0; background:none; box-shadow:none; }
#stage #cap26-attack-menu .att-lecture[hidden] { display:none; }
#stage #cap26-attack-menu .att-lecture .attack-menace, #stage #cap26-attack-menu .att-lecture .attack-terrain { display:flex; align-items:baseline; gap:6px; min-width:0; margin:0; padding:0; background:none; box-shadow:none; color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-lecture .attack-menace { min-height:0; }
#stage #cap26-attack-menu .att-lecture .attack-menace::before { content:none; }
#stage #cap26-attack-menu .att-lecture .attack-menace:has(#attack-ennemi[hidden]) { display:none; }
#stage #cap26-attack-menu .att-lecture .attack-menace-sceau { display:none; }
#stage #cap26-attack-menu .att-lecture .attack-terrain > .picon { display:none; }
#stage #cap26-attack-menu .att-lecture .attack-ligne { display:block; min-width:0; font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-lecture .attack-kicker { display:inline; font:800 14px/1.3 var(--f-texte); font-style:normal; letter-spacing:0; text-transform:none; color:var(--sm-ink, #12233F); }
#stage #cap26-attack-menu .att-lecture .attack-kicker::after { content:' : '; }
#stage #cap26-attack-menu .att-lecture #attack-ennemi, #stage #cap26-attack-menu .att-lecture #attack-terrain { display:inline; font:800 14px/1.3 var(--f-texte); color:var(--sm-ink, #12233F); }
#stage #cap26-attack-menu .att-lecture #attack-ennemi[hidden], #stage #cap26-attack-menu .att-lecture #attack-terrain[hidden] { display:none; }
#stage #cap26-attack-menu .att-lecture small { display:inline; font:600 14px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-lecture small:not(:empty)::before { content:' · '; }
/* la rangée des champions : même composant que l'écran du rival */
#stage #cap26-attack-menu #attack-champion { margin:0; }
/* la ligne de contexte : la notification d'amélioration est une ligne de texte discrète */
#stage #cap26-attack-menu .att-contexte:not(:has(.attack-tenue:not([hidden]))) { display:none; }
#stage #cap26-attack-menu .att-contexte .attack-tenue { display:flex; align-items:center; justify-content:center; gap:6px; margin:-4px 0; padding:0; color:var(--sm-ink2, #46566F); text-align:center; }
#stage #cap26-attack-menu .att-contexte .attack-tenue > .picon { width:16px; height:16px; flex:none; opacity:.85; color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-contexte .attack-tenue > span:last-child { display:flex; flex-flow:row wrap; justify-content:center; align-items:baseline; gap:0 6px; min-width:0; }
#stage #cap26-attack-menu .att-contexte .attack-tenue strong { font:700 13px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-contexte .attack-tenue small { font:600 13px/1.3 var(--f-texte); color:var(--sm-ink2, #46566F); }
#stage #cap26-attack-menu .att-contexte .attack-tenue small::before { content:'· '; }
/* le seul bouton plein de la feuille */
#stage #cap26-attack-menu .att-jouer { width:100%; min-height:56px; margin-top:2px; }
#stage #cap26-attack-menu .att-jouer .picon { width:28px; }
#stage #cap26-attack-menu .att-jouer .command-copy strong { font-size:32px; }
/* Arènes : un lien de texte à droite du surtitre (le bas de la feuille est le bouton Jouer) */
#stage #cap26-attack-menu .att-lien { display:inline-flex; align-items:center; gap:6px; flex:none; width:auto; min-height:44px; margin:-8px -4px; padding:0 4px 0 12px; border:0; border-radius:10px; background:none; box-shadow:none; color:var(--sm-ink, #12233F); text-align:left; }
#stage #cap26-attack-menu .att-lien-t { font:800 15px/1.2 var(--f-texte); color:var(--azur-appui, #0B4FB3); }
#stage #cap26-attack-menu .att-lien-s { display:none; }
#stage #cap26-attack-menu .att-lien-chev { flex:none; width:8px; height:8px; margin:0 2px 0 0; border-right:2.5px solid var(--azur-appui, #0B4FB3); border-top:2.5px solid var(--azur-appui, #0B4FB3); transform:rotate(45deg); }
#stage #cap26-attack-menu .att-lien:active { opacity:.6; }
#stage #cap26-attack-menu .att-lien:focus-visible { outline:3px solid var(--azur, #2F86E6); outline-offset:-2px; }
@media (max-height:700px) {
  #stage #cap26-attack-menu .attack-content { gap:8px; }
  #stage #cap26-attack-menu .att-nom { font-size:24px; }
  #stage #cap26-attack-menu .att-jouer { min-height:52px; }
}


/* ---------------------------------------------------------------- l'écran du Champion refait (23 octobre 2026, grammaire d'interface, seconde critique d'Astra : 4,8)
   Plus de grosses cartes : le retour est un glyphe nu de 44 ; le champion choisi est son MÉDAILLON peint en grand (l'ancienne illustration en pied changeait l'identité du Preux),
   avec son rang, son verbe et sa compétence en une phrase ; dessous, cinq lignes sélectionnables de 76 de haut (Alaric en sixième, « Prototype »), la choisie marquée d'un trait, d'une coche,
   d'un anneau et du poids. Le texte du bas finit au-dessus de la barre de navigation + 16. */
#stage .screen.panel.champion-screen { background:radial-gradient(130% 55% at 50% 22%, #1E6FD8 0%, #0C3B86 38%, #071F4A 70%, #041330 100%); color:#fff; }
#stage .screen.panel.champion-screen:not([hidden]) { display:flex; flex-direction:column; box-sizing:border-box; padding:calc(var(--safe-t) + 4px) 0 0; }
.champion-tete { flex:none; display:flex; align-items:center; gap:2px; min-height:44px; padding:0 calc(14px + var(--safe-r)) 0 calc(2px + var(--safe-l)); }
.champion-retour { flex:none; width:44px; height:44px; padding:0; display:grid; place-items:center; border:0; border-radius:50%; background:none; box-shadow:none; color:#fff; -webkit-tap-highlight-color:transparent; }
.champion-retour .picon { width:24px; color:#fff; filter:drop-shadow(0 1px 2px rgba(0,0,0,.7)); }
.champion-retour:active { opacity:.7; }
.champion-retour:focus-visible, .champion-rang:focus-visible { outline:3px solid var(--or-clair, #FFE08A); outline-offset:-2px; border-radius:10px; }
.champion-titre { margin:0; font:italic 900 30px/1 var(--f-titre); color:#fff; text-shadow:0 2px 0 rgba(2,8,22,.6); }
.champion-defile { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  padding:6px calc(14px + var(--safe-r)) calc(var(--nav-h, 64px) + 16px) calc(14px + var(--safe-l)); box-sizing:border-box; }
.champion-defile::-webkit-scrollbar { display:none; }
.champion-scene { display:flex; flex-direction:row; align-items:center; gap:16px; padding:6px 0 10px; }
.champion-med { position:relative; flex:none; display:block; }
.champion-med .champ-med { --med:116px; position:relative; z-index:1; }
.champion-med::before { content:''; position:absolute; left:50%; top:50%; width:190px; height:190px; transform:translate(-50%, -50%); border-radius:50%;
  background:radial-gradient(circle, rgba(166,233,255,.42) 0%, rgba(24,185,255,.2) 38%, rgba(24,185,255,0) 70%); }
.champion-screen[data-aura="violet"] .champion-med::before { background:radial-gradient(circle, rgba(230,190,255,.55) 0%, rgba(160,90,255,.3) 38%, rgba(160,90,255,0) 70%); }
.champion-screen[data-aura="or"] .champion-med::before { background:radial-gradient(circle, rgba(255,240,190,.65) 0%, rgba(232,182,76,.38) 38%, rgba(232,182,76,0) 70%); }
.champion-ident { flex:1; min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:4px; text-align:left; }
.champion-niveau { margin:0; font:700 13px/1.2 var(--f-texte); letter-spacing:0; text-transform:none; color:var(--kit-c, #BFE3FF); }
.champion-nom { margin:0; font:italic 900 26px/1.05 var(--f-titre); color:#fff; text-shadow:0 3px 0 #0A2346, 0 0 14px rgba(24,185,255,.45); overflow-wrap:anywhere; }
.champion-aura { margin:0; font:800 13px/1.2 var(--f-texte); color:#A6E9FF; }
.champion-screen[data-aura="violet"] .champion-aura { color:#D9B8FF; }
.champion-screen[data-aura="or"] .champion-aura { color:var(--or-clair, #FFE08A); }
.champion-aura[hidden], .champion-palier[hidden] { display:none; }
.champion-palier { margin:0; font:800 15px/1.25 var(--f-texte); color:#fff; }
.champion-capa { margin:0; font:600 14px/1.3 var(--f-texte); color:#CFE6FF; }
.champion-h { margin:6px 0 2px; font:700 13px/1.2 var(--f-texte); letter-spacing:0; text-transform:none; color:#CFE6FF; }
.champion-liste { display:flex; flex-direction:column; }
.champion-rang { position:relative; flex:none; display:flex; align-items:center; gap:12px; width:100%; height:76px; box-sizing:border-box; padding:0 6px 0 8px; border:0; border-top:1px solid rgba(255,255,255,.14); border-radius:0;
  background:none; box-shadow:none; color:#fff; text-align:left; -webkit-tap-highlight-color:transparent; }
.champion-rang:last-child { border-bottom:1px solid rgba(255,255,255,.14); }
.champion-rang-med { flex:none; display:block; }
.champion-rang-med .champ-med { --med:48px; }
.champion-rang-txt { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.champion-rang-txt strong { font:italic 800 21px/1.05 var(--f-titre); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.champion-rang-capa { font:600 14px/1.25 var(--f-texte); color:#CFE6FF; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.champion-proto { margin:0; padding:0; font:800 12px/1.1 var(--f-texte); font-style:normal; letter-spacing:.04em; text-transform:uppercase; color:#D9B8FF; background:none; box-shadow:none; vertical-align:2px; }
.champion-rang-coche { display:none; flex:none; position:relative; width:24px; height:24px; border-radius:50%; background:var(--or, #E8B64C); }
.champion-rang-coche::before { content:''; position:absolute; left:6px; top:6px; width:11px; height:6px; border:solid #12233F; border-width:0 0 3px 3px; transform:rotate(-45deg); }
.champion-rang.on { background:rgba(255,255,255,.07); }
.champion-rang.on::before { content:''; position:absolute; left:0; top:12px; bottom:12px; width:3px; border-radius:2px; background:var(--or, #E8B64C); }
.champion-rang.on .champion-rang-txt strong { font-weight:900; }
.champion-rang.on .champion-rang-capa { color:#fff; }
.champion-rang.on .champion-rang-coche { display:block; }
.champion-rang.on .champ-med-disque { box-shadow:0 0 0 3px var(--or, #E8B64C), 0 4px 10px rgba(8,20,48,.35); }
.champion-rang:active { background:rgba(255,255,255,.12); }
.champion-rang[data-prototype] .champ-med::before { content:''; position:absolute; inset:-5px; z-index:1; box-sizing:border-box; border-radius:50%; border:3px dashed rgba(255,255,255,.55); pointer-events:none; }
.champion-rang[data-prototype].on .champ-med::before { border-color:var(--or, #E8B64C); }
.champion-rang[data-prototype].on .champ-med-disque { box-shadow:0 3px 6px rgba(8,20,48,.35); }
/* la barre basse reste sous l'écran du Champion (la place Cité allumée : hud.js NAV_DE) : déjà posé plus haut */
@media (max-height:700px) {
  .champion-med .champ-med { --med:92px; }
  .champion-scene { gap:12px; padding-bottom:6px; }
  .champion-nom { font-size:24px; }
}