/* * Zarboutan Matériaux — Maquette IMMERSIVE isolée v2 (dépôt → terrasse) * Intensité : desktop 8/10, mobile 3/10, prefers-reduced-motion : désactivé. * CSS natif uniquement. Aucune librairie externe. */ * { box-sizing: border-box; } html, body { margin: 0; background: #0b0d0a; color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } .zbi-demo-banner { position: relative; z-index: 100; background: #1a2e1a; color: #b7e6bd; text-align: center; padding: 10px 16px; font-size: 14px; border-bottom: 1px solid #2f5a37; } /* ---------- Scène = piste de scroll + viewport épinglé (sticky) ---------- */ /* Cause du "espace noir inutilisé" (audit UX) : .zbi-scene est un bloc comme un autre, donc contraint par .entry-content .is-layout-constrained à la largeur de lecture standard (~820px sur cette page) au lieu d'utiliser la largeur de la fenêtre. Cette règle sort la scène de cette contrainte (technique standard "full-bleed") sans toucher au HTML ni au JS : le calcul de profondeur 3D ne dépend que des transforms appliqués par zarboutan-immersive.js, jamais de la largeur du conteneur. */ .zbi-scene { position: relative; /* Scelle tout le hero (3D-stage, calques, vidéo) dans son propre contexte d'empilement. Nécessaire depuis l'ajout de la vidéo de fond : un