/* ===== 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 , 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%); } }