/* ===== COUCHE D'ILLUSTRATION DECORATIVE (03/09/2026) =====
   Voir docs/CHANTIER-IMAGES-ET-INTERFACE.md. Regle non negociable : l'image est un SUPPLEMENT,
   jamais une information seulement visuelle. Elle ne doit jamais degrader l'accessibilite.

   - Sans la classe .images-actives sur <body>, rien de ce fichier ne change quoi que ce soit :
     le jeu reste exactement ce qu'il est sans lui (case a cocher, prototype/js/images.js).
   - #fond-illustration est purement decoratif (alt="", aria-hidden="true" dans le HTML) : il ne
     doit JAMAIS entrer dans l'ordre du DOM que le lecteur d'ecran parcourt, ni etre un bouton.
   - object-fit: cover + object-position: center realisent la regle du "carre de securite" du
     cahier : l'image peut perdre ses bords sur un ecran etroit, jamais le sujet, jamais deformee.
*/

#fond-illustration {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100dvh;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

body.images-actives #fond-illustration { opacity: 0.55; }

/* Voile de contraste FIXE (jamais calcule depuis l'image du jour) : le texte reste lisible
   (WCAG 2.2 AA, 4.5:1) quelle que soit l'illustration posee derriere. */
body.images-actives::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(20,20,28,0.55) 0%, rgba(20,20,28,0.85) 100%);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  #fond-illustration { transition: none; }
}

/* Rupture de mise en page unique (cahier, section 3) : sous 720px, une seule colonne. Ce fichier
   ne pose PAS d'autre regle de mise en page que celle-ci : le reste de l'ecran (boutons "big",
   details, fieldsets) est deja en flux vertical simple dans style.css et n'a besoin de rien ici. */
@media (max-width: 720px) {
  body.images-actives::before {
    background: linear-gradient(180deg, rgba(20,20,28,0.7) 0%, rgba(20,20,28,0.92) 100%);
  }
}

/* ===== ICÔNES D'OBJETS (lot 4, 09/10/2026, nuit) =====
   Dessinées par code (outils/sources-images/icones/icones.py), 256 x 256, fond transparent, aucun texte, liseré clair pour les fonds sombres.
   Posées en ::before (content vide) sur les boutons qui portent déjà l'identifiant de l'objet : data-conso (sac en bataille),
   data-article (coffre, possessions, contenants), data-achat et data-vente (boutiques). Rien n'entre dans l'arbre d'accessibilité :
   ni balise, ni texte, ni nom de fichier. Sans .images-actives (case « Illustrations décoratives »), rien ne s'affiche.
   Un objet sans icône prend l'icône par défaut. Ajouter une icône = déposer images/icones/<id>.png et une ligne ci-dessous. */
body.images-actives button[data-conso]::before, body.images-actives button[data-article]::before, body.images-actives button[data-achat]::before, body.images-actives button[data-vente]::before {
  content: ""; display: inline-block; width: 1.75em; height: 1.75em; margin: -0.2em 0.55em -0.2em 0; vertical-align: middle; flex: none;
  background: var(--icone, url(../images/defaut/icone-defaut.png)) center / contain no-repeat;
}
body.images-actives button[data-conso="potion"], body.images-actives button[data-article="potion"], body.images-actives button[data-achat="potion"], body.images-actives button[data-vente="potion"] { --icone: url(../images/icones/potion.png); }
body.images-actives button[data-conso="potion_superieure"], body.images-actives button[data-article="potion_superieure"], body.images-actives button[data-achat="potion_superieure"], body.images-actives button[data-vente="potion_superieure"] { --icone: url(../images/icones/potion_superieure.png); }
body.images-actives button[data-conso="pizzkie"], body.images-actives button[data-article="pizzkie"], body.images-actives button[data-achat="pizzkie"], body.images-actives button[data-vente="pizzkie"] { --icone: url(../images/icones/pizzkie.png); }
body.images-actives button[data-conso="graine"], body.images-actives button[data-article="graine"], body.images-actives button[data-achat="graine"], body.images-actives button[data-vente="graine"] { --icone: url(../images/icones/graine.png); }
body.images-actives button[data-conso="kimarble"], body.images-actives button[data-article="kimarble"], body.images-actives button[data-achat="kimarble"], body.images-actives button[data-vente="kimarble"] { --icone: url(../images/icones/kimarble.png); }
body.images-actives button[data-conso="explosif"], body.images-actives button[data-article="explosif"], body.images-actives button[data-achat="explosif"], body.images-actives button[data-vente="explosif"] { --icone: url(../images/icones/explosif.png); }
body.images-actives button[data-conso="grenade"], body.images-actives button[data-article="grenade"], body.images-actives button[data-achat="grenade"], body.images-actives button[data-vente="grenade"] { --icone: url(../images/icones/grenade.png); }
body.images-actives button[data-conso="charme_protection"], body.images-actives button[data-article="charme_protection"], body.images-actives button[data-achat="charme_protection"], body.images-actives button[data-vente="charme_protection"] { --icone: url(../images/icones/charme_protection.png); }
body.images-actives button[data-conso="charme_glisse"], body.images-actives button[data-article="charme_glisse"], body.images-actives button[data-achat="charme_glisse"], body.images-actives button[data-vente="charme_glisse"] { --icone: url(../images/icones/charme_glisse.png); }
body.images-actives button[data-conso="nalaska"], body.images-actives button[data-article="nalaska"], body.images-actives button[data-achat="nalaska"], body.images-actives button[data-vente="nalaska"] { --icone: url(../images/icones/nalaska.png); }
body.images-actives button[data-conso="de_voyage"], body.images-actives button[data-article="de_voyage"], body.images-actives button[data-achat="de_voyage"], body.images-actives button[data-vente="de_voyage"] { --icone: url(../images/icones/de_voyage.png); }
body.images-actives button[data-conso="de_voyage_occasion"], body.images-actives button[data-article="de_voyage_occasion"], body.images-actives button[data-achat="de_voyage_occasion"], body.images-actives button[data-vente="de_voyage_occasion"] { --icone: url(../images/icones/de_voyage_occasion.png); }
body.images-actives button[data-conso="sac"], body.images-actives button[data-article="sac"], body.images-actives button[data-achat="sac"], body.images-actives button[data-vente="sac"] { --icone: url(../images/icones/sac.png); }
@media (forced-colors: active) { body.images-actives button[data-conso]::before, body.images-actives button[data-article]::before, body.images-actives button[data-achat]::before, body.images-actives button[data-vente]::before { display: none; } }

/* ===== ICÔNES DES DONS (lot 3 bis, 10/10/2026) =====
   Une icône par EFFET (les dons qui font la même chose partagent la même image) : outils/sources-images/icones/icones-dons.py (table DON_ICONE),
   images/icones/dons/<clé>.png, 256 x 256, fond transparent, aucun texte. Posées en ::before (content vide, rien dans l'arbre d'accessibilité) :
   - sur tout élément [data-don] des règles du jeu (#regles-corps p) et de la fenêtre d'infos (bloc affiché, explications d'une fiche) ;
   - sur les boutons du menu d'actions du mode RPG ouverts par un don (#rpg-zone button[data-action]).
   Seulement avec .images-actives (case « Illustrations décoratives ») ; masquées en couleurs forcées. Ajouter un don = une ligne ci-dessous. */
body.images-actives [data-don="ki_esquive"], body.images-actives [data-don="ki_esquive_speciale"], body.images-actives [data-don="ki_special1"], body.images-actives [data-don="ki_special2"], body.images-actives [data-don="ki_contre"], body.images-actives [data-don="ki_empoignade"], body.images-actives [data-don="ki_esquive_empoignade"], body.images-actives [data-don="ki_esquive_coup"], body.images-actives [data-don="ki_tir"], body.images-actives [data-don="don_levitation"], body.images-actives [data-don="don_maitre_ki"], body.images-actives [data-don="don_envoutement"], body.images-actives [data-don="don_maitre_prise"], body.images-actives [data-don="don_fin_tireur"], body.images-actives [data-don="extraction_systematique"] { --icone-don: url(../images/icones/dons/ki_econome.png); }
body.images-actives [data-don="regen_ki"], body.images-actives [data-don="regen_ki_majeur"], body.images-actives [data-don="ki_depart_eleve"] { --icone-don: url(../images/icones/dons/ki_regain.png); }
body.images-actives [data-don="ki_depart_faible"], body.images-actives [data-don="ignare_ki"], body.images-actives [data-don="lourdaud"] { --icone-don: url(../images/icones/dons/ki_fardeau.png); }
body.images-actives [data-don="costaud"], body.images-actives [data-don="endurance"] { --icone-don: url(../images/icones/dons/vigueur.png); }
body.images-actives [data-don="metabolisme"], body.images-actives [data-don="regeneration"] { --icone-don: url(../images/icones/dons/metabolisme.png); }   /* régénération (11/10/2026) : même icône que le métabolisme, en attendant la sienne */
body.images-actives [data-don="frappe_lourde"] { --icone-don: url(../images/icones/dons/frappe_lourde.png); }
body.images-actives [data-don="don_devastation"] { --icone-don: url(../images/icones/dons/devastation.png); }
body.images-actives [data-don="expert_du_contre_de_super"], body.images-actives [data-don="contre_attaque"], body.images-actives [data-don="contre_systematique"] { --icone-don: url(../images/icones/dons/contre.png); }
body.images-actives [data-don="harcelement"] { --icone-don: url(../images/icones/dons/harcelement.png); }
body.images-actives [data-don="conso_en_garde"] { --icone-don: url(../images/icones/dons/conso_en_garde.png); }
body.images-actives [data-don="usage_d_objets"], body.images-actives [data-don="double_consommables"] { --icone-don: url(../images/icones/dons/objets.png); }
body.images-actives [data-don="recycleur"] { --icone-don: url(../images/icones/dons/recycleur.png); }
body.images-actives [data-don="fin_tireur"] { --icone-don: url(../images/icones/dons/projectiles.png); }
body.images-actives [data-don="variance_essai"] { --icone-don: url(../images/icones/dons/variance.png); }
body.images-actives [data-don="don_dissipation"] { --icone-don: url(../images/icones/dons/dissipation.png); }
body.images-actives [data-don="don_boost"] { --icone-don: url(../images/icones/dons/boost.png); }
body.images-actives [data-don="don_creature_magique"] { --icone-don: url(../images/icones/dons/creature_magique.png); }
body.images-actives [data-don="stable"] { --icone-don: url(../images/icones/dons/stable.png); }
body.images-actives [data-don="duo_offensif"] { --icone-don: url(../images/icones/dons/duo.png); }
body.images-actives [data-don="attaque_vicieuse"] { --icone-don: url(../images/icones/dons/vicieuse.png); }
body.images-actives [data-don="points_vitaux"] { --icone-don: url(../images/icones/dons/vicieuse.png); }
body.images-actives [data-don="attaque_tournoyante"], body.images-actives [data-don="attaque_tournoyante_propulsante"] { --icone-don: url(../images/icones/dons/tournoyante.png); }
body.images-actives [data-don="renversement"] { --icone-don: url(../images/icones/dons/renversement.png); }
body.images-actives [data-don="attaque_bondie"] { --icone-don: url(../images/icones/dons/bondie.png); }
body.images-actives [data-don="toile_entravante"] { --icone-don: url(../images/icones/dons/toile.png); }
body.images-actives [data-don="garde_piquante"] { --icone-don: url(../images/icones/dons/garde_piquante.png); }
body.images-actives [data-don="coup_annonce"] { --icone-don: url(../images/icones/dons/coup_annonce.png); }
body.images-actives [data-don="ecoute_sol"] { --icone-don: url(../images/icones/dons/ecoute_sol.png); }
body.images-actives [data-don="tunnel"] { --icone-don: url(../images/icones/dons/tunnel.png); }
body.images-actives [data-don="explosion_chaine"], body.images-actives [data-don="kamikaze"] { --icone-don: url(../images/icones/dons/explosion.png); }
body.images-actives [data-don="cuirasse_joyaux"] { --icone-don: url(../images/icones/dons/cuirasse_joyaux.png); }
body.images-actives [data-don="givre"] { --icone-don: url(../images/icones/dons/givre.png); }
body.images-actives [data-don="resonance"] { --icone-don: url(../images/icones/dons/resonance.png); }
body.images-actives [data-don="frappe_brume"] { --icone-don: url(../images/icones/dons/brume.png); }
body.images-actives [data-don="garde_du_fil"] { --icone-don: url(../images/icones/dons/fil.png); }
body.images-actives [data-don="vanille"] { --icone-don: url(../images/icones/dons/vanille.png); }
body.images-actives [data-don="vol_objet"] { --icone-don: url(../images/icones/dons/vol.png); }
body.images-actives [data-don="oeil_pilleur"] { --icone-don: url(../images/icones/dons/oeil_pilleur.png); }
body.images-actives [data-don="volatile"], body.images-actives [data-don="pique_expose"] { --icone-don: url(../images/icones/dons/volatile.png); }
body.images-actives #rpg-zone button[data-action="duo"] { --icone-don: url(../images/icones/dons/duo.png); }
body.images-actives #rpg-zone button[data-action="dissimuler"], body.images-actives #rpg-zone button[data-action="vicieuse"] { --icone-don: url(../images/icones/dons/vicieuse.png); }
body.images-actives #rpg-zone button[data-action="annonce"] { --icone-don: url(../images/icones/dons/coup_annonce.png); }
body.images-actives #rpg-zone button[data-action="voler"] { --icone-don: url(../images/icones/dons/vol.png); }
body.images-actives #rpg-zone button[data-action="brume"] { --icone-don: url(../images/icones/dons/brume.png); }
body.images-actives #rpg-zone button[data-action="fil"] { --icone-don: url(../images/icones/dons/fil.png); }
body.images-actives #rpg-zone button[data-action="apaiser"] { --icone-don: url(../images/icones/dons/vanille.png); }
body.images-actives #rpg-zone button[data-action="sonner"] { --icone-don: url(../images/icones/dons/resonance.png); }
body.images-actives #rpg-zone button[data-action="creuser"] { --icone-don: url(../images/icones/dons/tunnel.png); }
body.images-actives #rpg-zone button[data-action="circulaire"], body.images-actives #rpg-zone button[data-action="circulaire_boost"] { --icone-don: url(../images/icones/dons/tournoyante.png); }
body.images-actives #rpg-zone button[data-action="recycler"] { --icone-don: url(../images/icones/dons/recycleur.png); }
body.images-actives #regles-corps p[data-don]::before, body.images-actives #fenetre-infos [data-don]::before, body.images-actives #rpg-zone button[data-action="duo"]::before, body.images-actives #rpg-zone button[data-action="dissimuler"]::before, body.images-actives #rpg-zone button[data-action="vicieuse"]::before, body.images-actives #rpg-zone button[data-action="annonce"]::before, body.images-actives #rpg-zone button[data-action="voler"]::before, body.images-actives #rpg-zone button[data-action="brume"]::before, body.images-actives #rpg-zone button[data-action="fil"]::before, body.images-actives #rpg-zone button[data-action="apaiser"]::before, body.images-actives #rpg-zone button[data-action="sonner"]::before, body.images-actives #rpg-zone button[data-action="creuser"]::before, body.images-actives #rpg-zone button[data-action="circulaire"]::before, body.images-actives #rpg-zone button[data-action="circulaire_boost"]::before, body.images-actives #rpg-zone button[data-action="recycler"]::before {
  content: ""; display: inline-block; width: 1.75em; height: 1.75em; margin: -0.2em 0.55em -0.2em 0; vertical-align: middle; flex: none;
  background: var(--icone-don, url(../images/defaut/icone-defaut.png)) center / contain no-repeat;
}
@media (forced-colors: active) { body.images-actives #regles-corps p[data-don]::before, body.images-actives #fenetre-infos [data-don]::before, body.images-actives #rpg-zone button[data-action="duo"]::before, body.images-actives #rpg-zone button[data-action="dissimuler"]::before, body.images-actives #rpg-zone button[data-action="vicieuse"]::before, body.images-actives #rpg-zone button[data-action="annonce"]::before, body.images-actives #rpg-zone button[data-action="voler"]::before, body.images-actives #rpg-zone button[data-action="brume"]::before, body.images-actives #rpg-zone button[data-action="fil"]::before, body.images-actives #rpg-zone button[data-action="apaiser"]::before, body.images-actives #rpg-zone button[data-action="sonner"]::before, body.images-actives #rpg-zone button[data-action="creuser"]::before, body.images-actives #rpg-zone button[data-action="circulaire"]::before, body.images-actives #rpg-zone button[data-action="circulaire_boost"]::before, body.images-actives #rpg-zone button[data-action="recycler"]::before { display: none; } }

/* ===== PORTRAIT EN HAUT DE LA FICHE (10/10/2026) =====
   #fenetre-infos-portrait (js/fenetre-infos.js) : un div VIDE, aria-hidden, sans focus ni texte ; son image est posée en fond par le script
   quand la fenêtre porte `portrait` (TYPOLOGY.ouvrirFichePersonnage, portraits de RPG_VISUEL.PORTRAITS). Seulement avec .images-actives ;
   carré, jamais déformé (cover sur un dessin déjà carré), flottant à droite du titre, plus petit sur téléphone ; masqué en couleurs forcées. */
#fenetre-infos-portrait { display: none; }
body.images-actives #fenetre-infos[data-portrait] #fenetre-infos-portrait {
  display: block; float: right; width: clamp(72px, 20vw, 168px); aspect-ratio: 1 / 1; margin: 0 0 0.5rem 0.75rem;
  background: #1b1424 center / cover no-repeat; border: 2px solid #c9b48a; border-radius: 12px; pointer-events: none;
}
/* Le titre se range à côté du portrait (contexte de formatage propre) : son cadre de focus ne passe jamais sous l'image. */
body.images-actives #fenetre-infos[data-portrait] #fenetre-infos-titre { display: flow-root; }
@media (forced-colors: active) { body.images-actives #fenetre-infos[data-portrait] #fenetre-infos-portrait { display: none; } }

/* ===== BANNIÈRES DE RUBRIQUES (chantier 2.1, lot 4, 10/10/2026) =====
   Bandeaux 4:1 dessinés par code (outils/sources-images/bannieres/bannieres.py), images/bannieres/<rubrique>.webp, 1600 x 400, aucun texte.
   Posés en ::before VIDE du CONTENEUR de l'écran (jamais sur le titre : son cadre de focus et son nom restent ceux d'aujourd'hui) :
   accueil, options, règles, caractéristiques (fiche), commandes ; écran RPG selon data-banniere (js/images.js, rubriqueRpg : aventure, mini,
   donjon, coffre, boutique, sac, bataille ; rien pendant le récit ni la bataille) ; guide pour tester le jeu dans la fenêtre d'infos
   (data-banniere de #fenetre-infos, le div VIDE aria-hidden du portrait sert de bandeau). Jamais déformée (aspect-ratio 4 / 1 et cover),
   largeur bornée (40rem), seulement avec .images-actives, masquée en couleurs forcées. Ajouter une rubrique = une image et une ligne ci-dessous. */
body.images-actives #accueil { --banniere: url(../images/bannieres/accueil.webp); }
body.images-actives #menu { --banniere: url(../images/bannieres/options.webp); }
body.images-actives #ecran-regles { --banniere: url(../images/bannieres/regles.webp); }
body.images-actives #ecran-caracteristiques { --banniere: url(../images/bannieres/fiche.webp); }
body.images-actives #ecran-commandes { --banniere: url(../images/bannieres/commandes.webp); }
body.images-actives #ecran-rpg[data-banniere="aventure"] { --banniere: url(../images/bannieres/aventure.webp); }
body.images-actives #ecran-rpg[data-banniere="mini"] { --banniere: url(../images/bannieres/mini.webp); }
body.images-actives #ecran-rpg[data-banniere="donjon"] { --banniere: url(../images/bannieres/donjon.webp); }
body.images-actives #ecran-rpg[data-banniere="coffre"] { --banniere: url(../images/bannieres/coffre.webp); }
body.images-actives #ecran-rpg[data-banniere="boutique"] { --banniere: url(../images/bannieres/boutique.webp); }
body.images-actives #ecran-rpg[data-banniere="sac"] { --banniere: url(../images/bannieres/sac.webp); }
body.images-actives #ecran-rpg[data-banniere="bataille"] { --banniere: url(../images/bannieres/bataille.webp); }
body.images-actives #ecran-rpg[data-banniere="autel"] { --banniere: url(../images/bannieres/autel.webp); }   /* autel de prière (18/10/2026) */
body.images-actives #fenetre-infos[data-banniere="guide"] { --banniere: url(../images/bannieres/guide.webp); }
body.images-actives #fenetre-infos[data-banniere="aventure"] { --banniere: url(../images/bannieres/aventure.webp); }   /* présentation du monde (10/10/2026) */
body.images-actives #accueil::before, body.images-actives #menu::before, body.images-actives #ecran-regles::before, body.images-actives #ecran-caracteristiques::before, body.images-actives #ecran-commandes::before, body.images-actives #ecran-rpg[data-banniere]::before, body.images-actives #fenetre-infos[data-banniere] #fenetre-infos-portrait {
  content: ""; display: block; width: 100%; max-width: 40rem; aspect-ratio: 4 / 1; margin: 0 auto 0.75rem; float: none;
  background: var(--banniere, url(../images/defaut/banniere-defaut.webp)) center / cover no-repeat;
  border: 1px solid rgba(201, 180, 138, 0.55); border-radius: 12px; pointer-events: none;
}
body.images-actives #menu.arcade-mode::before { display: none; }
@media (forced-colors: active) { body.images-actives #accueil::before, body.images-actives #menu::before, body.images-actives #ecran-regles::before, body.images-actives #ecran-caracteristiques::before, body.images-actives #ecran-commandes::before, body.images-actives #ecran-rpg[data-banniere]::before, body.images-actives #fenetre-infos[data-banniere] #fenetre-infos-portrait { display: none; } }

/* ===== LOGO « MINA ARCANA » SUR L'ÉCRAN TITRE (Med, 14/10/2026) =====
   Le logo prend la place de la bannière 4:1 de l'accueil, au même endroit : le ::before VIDE du conteneur #accueil (jamais le titre : son nom,
   son cadre de focus et la commande secrète des cinq touchers restent ceux d'aujourd'hui). Décoratif : un ::before n'est lu par aucun lecteur d'écran,
   le titre « Mina Arcana » reste dans le texte. Seulement avec .images-actives (comme toute image) ; masqué en couleurs forcées (règle plus haut).
   Sources et recette : outils/sources-images/logo/ (SVG dessiné par code, PNG transparent, WebP). Règles :
   - jamais déformé (aspect-ratio 1600 / 850 et contain), jamais rogné : la largeur est bornée par la page, par 30rem ET par 60 % de la hauteur de la
     fenêtre (un téléphone couché ou un écran bas ne se retrouve pas avec un logo qui chasse les boutons) ;
   - deux dessins : le complet, et le COMPACT (traits épaissis, sans flocons ni braises, qui ne tiennent plus en dessous d'environ 480 px) ;
   - deux densités (image-set) : 1x et 2x, pour ne pas charger 227 Ko sur un petit écran ;
   - le contour sombre du logo le rend lisible sur n'importe quel fond, y compris l'illustration de fond et le voile fixe. */
body.images-actives #accueil::before {
  width: min(100%, 30rem, 60vh); width: min(100%, 30rem, 60dvh); max-width: none; aspect-ratio: 1600 / 850;
  margin: 0 auto 0.5rem; border: 0; border-radius: 0;
  background-color: transparent; background-position: center; background-size: contain; background-repeat: no-repeat;
  background-image: url(../images/logo/mina-arcana-logo-800.webp);
  background-image: -webkit-image-set(url(../images/logo/mina-arcana-logo-800.webp) 1x, url(../images/logo/mina-arcana-logo-1600.webp) 2x);
  background-image: image-set(url(../images/logo/mina-arcana-logo-800.webp) 1x, url(../images/logo/mina-arcana-logo-1600.webp) 2x);
}
@media (max-width: 30rem), (max-height: 34rem) {
  body.images-actives #accueil::before {
    background-image: url(../images/logo/mina-arcana-logo-compact-400.webp);
    background-image: -webkit-image-set(url(../images/logo/mina-arcana-logo-compact-400.webp) 1x, url(../images/logo/mina-arcana-logo-compact-800.webp) 2x);
    background-image: image-set(url(../images/logo/mina-arcana-logo-compact-400.webp) 1x, url(../images/logo/mina-arcana-logo-compact-800.webp) 2x);
  }
}