/* Arcmarch : jetons de l'interface. R24 reprend la version D « Arcade premium » : bleu lumineux,
   plaques nuit bordées de cyan, or pour les récompenses et braise pour le danger. */
:root {
  /* palette : suie, ivoire, rôles */
  --suie:#08101B; --encre:#06101E; --encre-2:#0B1D31; --encre-3:#18314B;
  --panneau:rgba(5,17,35,.94); --panneau-carte:rgba(5,17,35,.94); --panneau-plein:rgba(5,17,35,.97);
  --ivoire:#F7FBFF; --gris:#B5C6D5; --gris-2:#7F94A8;
  --filet:rgba(126,197,255,.22); --filet-carte:rgba(126,197,255,.36); --filet-fort:rgba(126,197,255,.58);
  /* Bleu électrique de D : centre saturé, épaule cyan, profondeur cobalt. */
  --azur:#0879F8; --azur-haut:#18B9FF; --azur-appui:#0753C8; --azur-tranche:#003881; --azur-clair:#A6E9FF; --azur-voile:rgba(10,125,255,.32);
  /* braise : l'ennemi et le danger */
  --braise:#E0673A; --braise-clair:#F08A62; --braise-sombre:#9C3316; --braise-voile:rgba(224,103,58,.2);
  /* or du serment : les gains et toute lumière (arêtes, filets, éclats) */
  --or:#E8B64C; --or-clair:#F6D37E; --or-appui:#D6A43A; --or-tranche:#A87A1E; --or-texte:#2A1E08; --or-voile:rgba(232,182,76,.22);
  --laiton:#E8B64C;
  --blanc:#FFFFFF;
  --filet-or:rgba(232,182,76,.9);

  /* fontes : Barlow (lecture, libellés droits) et Barlow Condensed ITALIQUE (900 : chiffres et titres ; 700 : libellés
     posés sur la scène). Les deux faces italiques sont déclarées dans assets/sources/fonts/fonts.css. */
  --f-texte:'Barlow', system-ui, sans-serif;
  --f-titre:'Barlow Condensed', 'Barlow', system-ui, sans-serif;

  /* échelle à 360 points : les chiffres héros très grands (D3), les libellés à 14 points au moins (correction de Sol) */
  --fs-heros:84px; --fs-resultat:76px; --fs-gain:72px; --fs-cta-accueil:42px; --fs-cta:32px; --fs-titre:24px; --fs-titre-grand:32px;
  --fs-lecture:16px; --fs-libelle:14px; --fs-legende:12px; --fs-hud-num:34px; --fs-chiffre:22px;
  --fs-total:30px; --fs-etape:20px; --fs-nom:26px; --fs-scene:17px;

  /* espacements, rayons, formes inclinées de 8 degrés (D) ; le seul panneau d'un écran monte de 4 degrés vers la droite */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px;
  --r-panneau:6px; --r-bouton:6px; --r-pastille:6px; --r-rond:50%;
  --biais:-8deg; --pente:-4deg;

  /* ombres : les textes posés sur la scène sont détachés par une ombre chaude et courte, jamais par une plaque */
  --ombre-panneau:0 -6px 22px rgba(8,6,4,.35);
  --ombre-bouton:0 3px 10px rgba(8,6,4,.35);
  --arete-or:inset 0 1.5px 0 rgba(246,211,126,.95);
  --arete-bleu:inset 0 2px 0 rgba(230,251,255,.98);
  --tranche-azur:0 5px 0 var(--azur-tranche), 0 0 17px rgba(0,143,255,.54), 0 9px 20px rgba(0,8,24,.65);
  --tranche-azur-appui:0 1px 0 var(--azur-tranche), 0 0 9px rgba(0,143,255,.4), 0 3px 8px rgba(0,8,24,.45);
  --tranche-or:0 5px 0 var(--or-tranche), 0 9px 18px rgba(8,6,4,.4);
  --tranche-or-appui:0 1px 0 var(--or-tranche), 0 3px 8px rgba(8,6,4,.3);
  --filet-interieur:inset 0 0 0 1px var(--filet);
  --ombre-texte-scene:0 2px 0 rgba(12,8,4,.65), 0 2px 10px rgba(12,8,4,.7);
  --ombre-chiffre:0 3px 0 rgba(12,8,4,.55), 0 3px 14px rgba(12,8,4,.65);
  --lueur-or:0 0 18px rgba(232,182,76,.55), 0 3px 0 rgba(90,56,10,.6);
  /* R12-B2 (jugement de Sol) : le chiffre héros d'un gain (victoire, amélioration) sous UNE seule lueur ambrée */
  --lueur-gain:0 0 12px rgba(232,182,76,.5);
  --voile-bas:linear-gradient(to top, rgba(14,10,7,.94), rgba(14,10,7,.78) 40%, rgba(14,10,7,0) 70%);
  --voile-haut:linear-gradient(to bottom, rgba(14,10,7,.62), rgba(14,10,7,.28) 60%, rgba(14,10,7,0));
  --voile-modal:rgba(12,9,6,.6);

  /* couches */
  --z-hud:3; --z-champion:4; --z-ecran:5; --z-barre:6; --z-modale:7; --z-toast:8; --z-chargement:9;

  /* mouvement : rien ne bouge au repos ; l'appui écrase la tranche en 110 ms ; le gain compte en 400 à 600 ms */
  --courbe:cubic-bezier(.2,.8,.2,1); --t-appui:110ms; --t-apparition:220ms; --t-volet:300ms; --t-sortie:200ms; --t-gain:600ms;

  /* TYPOGRAPHIE À TROIS RÔLES (tour 2, 18 octobre 2026) : --f-affiche (condensée italique) = titres courts et chiffre héros SEULEMENT ;
     --f-action = les boutons ; --f-lecture = tout le reste (noms, statuts, onglets, étiquettes, données secondaires, copie). Un écran neuf choisit
     son rôle par ces trois jetons, jamais par « Barlow Condensed » en dur. */
  --f-affiche:'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --f-action:'Barlow Condensed', 'Barlow', system-ui, sans-serif;
  --f-lecture:'Barlow', system-ui, sans-serif;

  /* FIN DE DÉFILEMENT (tour 2) : --avis-h est la hauteur de l'avis de session ou de sauvegarde ; elle est publiée par src/ui/progression.js SUR #stage
     (0 quand l'avis est masqué). Une variable composée avec calc() se résout là où elle est DÉCLARÉE : --fin-liste est donc déclarée sur #stage
     (règle plus bas, après :root), jamais ici, sinon elle retomberait à la valeur par défaut de --avis-h. Voir docs/ARCHITECTURE.md. */
  --avis-h:0px;

  /* ÉTAT INDISPONIBLE, UN SEUL CODE : surface grise claire lisible, encre grise sombre, jamais d'opacité sur le texte ; la raison courte se lit sur
     l'élément ou juste dessous (« Stock plein », « Il te manque 40 or », « Partie ouverte ailleurs ») */
  --indispo-fond:linear-gradient(#C9CFD8, #B3BAC6); --indispo-bord:#8A93A5; --indispo-texte:#34405A;

  /* zones sûres et gouttière */
  --safe-t:env(safe-area-inset-top, 0px); --safe-b:env(safe-area-inset-bottom, 0px);
  --safe-l:env(safe-area-inset-left, 0px); --safe-r:env(safe-area-inset-right, 0px);
  --gout:14px;
  --gout-l:calc(var(--gout) + var(--safe-l)); --gout-r:calc(var(--gout) + var(--safe-r));
  --barre-h:62px; --nav-h:calc(var(--barre-h) + 6px + var(--safe-b));

  /* les seules images de l'interface : la pièce d'or, la gemme, le heaume peint du joueur (portrait du Champion et du
     profil), et la plaque canonique de la Cité sous la publicité */
  --img-or:url(epure/AM-ICO001-01_Or_D1_Normal@3x.png);
  --img-gemme:url(epure/AM-ICO001-04_Cristaux_D1_Normal@3x.png);
  --img-heaume:url(epure/AM-ICO014-07_Heaume_D1_Normal@3x.png);
  --img-fond:url(../lots/cite_bourg_v01/clean/AM-CITY-BOURG-cite_plaque_1080x2340_v05.webp);   /* la Cité du joueur, plaque v05 : même emblème que partout (20 octobre 2026) */
  /* la pièce ronde de D (bourses, prix, gain héros, vidéo ×2, pièces qui volent) : dessinée en couches, nette à tout DPR ;
     reflet en haut à gauche, face or, liseré clair, tranche orangée, bord cuivré. Le calque d'ombre de tranche reste DANS le disque (closest-side) : l'ancien `circle at 60% 66%` en taille par défaut (farthest-corner) débordait de la boîte et laissait un fond rectangulaire clair coupé en bas et à droite (18 octobre 2026). La pile peinte (--img-or) reste aux offres. */
  --img-piece:radial-gradient(circle at 33% 28%, rgba(255,253,226,.9) 0 4%, rgba(255,253,226,0) 14%),
              radial-gradient(circle closest-side at 52% 56%, rgba(170,90,0,0) 0 64%, rgba(170,90,0,.32) 84%, rgba(170,90,0,0) 96%),
              radial-gradient(circle closest-side, #FFDB45 0, #FFC928 40%, #F7B01C 58%, #D98B0A 63%, #C27606 65%, #FFE88A 68%, #FFD64E 74%, #F6B023 84%, #D7870A 92%, #9E5A02 97%, rgba(158,90,2,0) 100%);
}

/* --fin-liste : le dégagement à poser en padding-bottom de toute liste qui défile (avis fixe éventuel + 24 pt de respiration ; la barre basse --nav-h est déjà
   réservée par le panneau lui-même). Déclarée sur #stage parce que c'est là que progression.js publie --avis-h. Un écran neuf n'écrit plus de nombre en dur :
   `padding-bottom:var(--fin-liste)` ; un écran à pied fixe qui recouvre sa liste redéclare `--fin-liste` localement en y ajoutant la hauteur de son pied. */
#stage { --fin-liste:calc(var(--avis-h) + 24px); }