/** * L'Aire Bête — Scène extérieure (Phase 4.1) * * Page d'arrivée : chemin du zoo de Martinique, arbres tropicaux, * pavillon Pixar au bout du chemin. Clic sur le pavillon → animation * de zoom → bascule sur l'overlay des portes vitrées (entrance). * * Stages (classes posées sur par le FOUC guard de functions.php) : * - aucune classe : 1er visit → extérieur visible, entrance cachée * - .lb-exterior-passed : pavillon cliqué → extérieur caché, entrance visible * - .lb-entered : portes franchies → tout caché, mall direct (existant) */ /* === Overlay extérieur ================================================ */ .lb-exterior { position: fixed; inset: 0; z-index: 1100; /* au-dessus de .lb-entrance (z-index: 1000) : pendant l'animation de zoom, exterior.js pré-affiche l'entrance (display: flex) pour qu'elle soit déjà rendue derrière. Sans cet écart de z-index, l'entrance passerait au- dessus et casserait l'effet de fade-out. */ overflow: hidden; background: var(--lb-blanc-casse); display: flex; flex-direction: column; cursor: default; transform-origin: 50% 38%; /* point de zoom : centre du pavillon */ transition: transform 1500ms cubic-bezier(0.4, 0, 0.2, 1), opacity 1500ms ease-out; } /* Stage classes : visibilité orchestrée. ---------------------------------- * IMPORTANT : entrance.css impose `.lb-entrance { display: flex }` à * spécificité 0,1,0. Pour cacher l'entrance par défaut au 1er visit, on * cible sans classe de stage. Les autres rules redonnent display:flex * au moment voulu. */ html:not(.lb-exterior-passed):not(.lb-entered) .lb-entrance { display: none; } html.lb-exterior-passed .lb-exterior { display: none; } html.lb-entered .lb-exterior { display: none; } /* L'entrance, une fois l'extérieur passé, reprend son `display: flex` d'origine sans qu'on ait à le redéclarer (la règle `display: none` ci-dessus ne s'applique plus). La classe `.lb-entered` qui re-cache l'entrance est gérée dans entrance.css avec !important. */ /* Animation de zoom au clic du pavillon. */ .lb-exterior.is-zooming { transform: scale(3); opacity: 0; pointer-events: none; } /* === Pluie sur la scène extérieure (sky-engine v0.8.0+) =============== */ /* `.lb-rain` est un sibling de tous les éléments de scène à l'intérieur de `.lb-exterior` ; on lui donne un z-index élevé pour que les gouttes tombent en avant-plan devant les arbres, le pavillon et la fontaine. */ .lb-exterior .lb-rain { z-index: 15; } /* === Ciel extérieur — palette dynamique synchronisée ================== */ /* sky-engine.js (v0.8.0+) cible `.lb-sky` partout (intérieur + extérieur) et applique la palette horaire `sky-*` ainsi que la météo (`--rain`, `--lightning`). Le bloc `!important` qui figeait le ciel en sunset a été retiré : les deux scènes restent maintenant synchronisées en permanence. Les règles cosmétiques (position, taille) restent. */ .lb-exterior .lb-sky { position: absolute; inset: 0 0 auto 0; height: 60vh; z-index: 1; } /* === Sol tropical + chemin =========================================== */ .lb-exterior-ground { position: absolute; left: 0; right: 0; bottom: 0; height: 60vh; z-index: 2; background: linear-gradient(180deg, #6A8B4A 0%, #7AAB5A 35%, #88B568 100%); } .lb-exterior-path-svg { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 60vh; pointer-events: none; display: block; } /* === Pavillon au bout du chemin (cliquable) ========================== */ .lb-exterior-building { position: absolute; /* Phase 4.1 (rev3) : pavillon SVG portrait 3:4 (viewBox 600×800) dimensionné via `height` pour occuper ~40 % de la hauteur viewport. La largeur est dérivée du ratio SVG (~75 % de la hauteur). */ top: 4%; left: 50%; transform: translateX(-50%); height: clamp(260px, 40vh, 600px); width: auto; padding: 0; background: transparent; border: none; cursor: pointer; z-index: 5; transition: transform var(--lb-transition-base); } .lb-exterior-building-img { /* SVG inline : on contraint la hauteur (le parent fixe `height: 40vh`) et on laisse la largeur suivre l'aspect ratio du viewBox. */ height: 100%; width: auto; display: block; /* `overflow: visible` permet aux lianes et feuilles tropicales positionnées hors viewBox (x < 0 ou y > 800) de s'afficher : elles débordent volontairement les contours du pavillon pour donner le sentiment que la végétation envahit la façade. */ overflow: visible; filter: drop-shadow(0 8px 16px rgba(26, 122, 110, 0.25)); } .lb-exterior-building:hover { transform: translateX(-50%) translateY(-4px) scale(1.03); } .lb-exterior-building:focus-visible { outline: none; } .lb-exterior-building:focus-visible .lb-exterior-building-img { filter: drop-shadow(0 8px 24px rgba(26, 122, 110, 0.55)); } /* CTA "Approcher" (rev10) — étiquette discrète semi-transparente posée DANS LE BAS de la porte centrale du pavillon. Le `` est ENFANT du `