/* ============================================================ A.G.I.R - Habillage propre a la page Pompei ------------------------------------------------------------ Chargee UNIQUEMENT par experience.php quand le slug vaut « pompei », et toutes les regles sont portees par la classe .exp-page-pompei posee sur . Rien ici ne peut atteindre une autre page d'experience, meme par erreur. Les couleurs, elles, ne sont pas ici : elles viennent de la cle 'theme' de l'experience, dans includes/experiences_data.php. ============================================================ */ /* ── Bandeau ────────────────────────────────────────────── Le voile du hero est bleu nuit dans la feuille commune, ce qui verdit un plein soleil sur des enduits ocre. On le repasse en brun de cendre, et on le laisse plus clair en haut pour que le peristyle reste lisible sous le titre. */ .exp-page-pompei .exp-hero-veil { background: linear-gradient(180deg, rgba(42,20,16,0.58) 0%, rgba(42,20,16,0.34) 42%, rgba(42,20,16,0.92) 100%); } /* ── Separateur ─────────────────────────────────────────── La feuille commune dessine une etoile a huit branches, motif persan : juste pour Aladin, faux ici. On masque le trace et on le remplace par un filet a losange, plus proche d'un decor de paroi pompeienne. */ .exp-page-pompei .exp-sep { position: relative; height: 40px; } .exp-page-pompei .exp-sep svg { display: none; } .exp-page-pompei .exp-sep::before { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 300px; max-width: 70vw; height: 1px; background: linear-gradient(90deg, transparent, var(--exp-or) 22%, var(--exp-or) 78%, transparent); opacity: 0.42; } .exp-page-pompei .exp-sep::after { content: ''; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(45deg); width: 9px; height: 9px; background: var(--exp-or); box-shadow: 0 0 0 5px var(--creme, #f7f5f0); } /* Rappel : la pastille se decoupe sur le fond de page, qui est le creme de body.interior - et non du blanc. */ /* ── Fiche technique ────────────────────────────────────── L'ombre portee est bleutee dans la feuille commune. Ici elle prend la chaleur du reste de la page. */ .exp-page-pompei .exp-fiche { box-shadow: 0 22px 50px -34px rgba(120,45,30,0.42); } /* ── Le portrait de Valeria ─────────────────────────────── C'est une planche de personnage en pied, detouree : tres haute et etroite (1 pour 3). Le cadrage 4/5 impose aux portraits par la feuille commune la decapiterait, et le recadrage « cover » n'a aucun sens sur une silhouette. On la laisse entiere, a hauteur bornee, centree dans sa colonne. Le fond creme et le halo chaud sont cuits dans le fichier : a l'ecran c'est indistinguable d'un PNG transparent, mais ca pese 125 Ko au lieu de 774 Ko - ce qui compte pour un QR code scanne en 4G. La version transparente pleine definition est gardee dans Experiences/Pompei/leonardo/valeria-detouree.png. */ .exp-page-pompei .exp-split-media .exp-figure img { width: auto; height: auto; max-width: 100%; max-height: 720px; aspect-ratio: auto; object-fit: contain; border-radius: 0; margin: 0 auto; } /* ── Le plan du Vesuve ──────────────────────────────────── La feuille commune cadre les images pleine largeur en 21/9. Ici ca couperait la colonne eruptive, qui est tout le sujet : on passe en 16/9, le format natif du rendu. */ .exp-page-pompei .exp-figure-wide img, .exp-page-pompei .exp-figure-wide .exp-placeholder { aspect-ratio: 16/9; } /* ── Triptyque des sources visuelles ────────────────────── Ce ne sont pas des captures d'ecran mais des planches et des photographies de musee : elles se tiennent mieux entieres, sur un fond clair, que recadrees en vignettes plein cadre. */ .exp-page-pompei .exp-triptyque .exp-figure img { object-fit: contain; background: #f4efe4; aspect-ratio: 4/5; border-radius: 10px; padding: 10px; } .exp-page-pompei .exp-triptyque .exp-figure figcaption { color: rgba(255,255,255,0.62); font-size: 0.74rem; line-height: 1.5; }