/* ========================================================================== Page de lancement (teasing avant ouverture) - template-lancement.php Page 100% autonome (pas de header/footer du theme). Tokens --fp-* repris de main.css ; --lp-rose est POSEE EN INLINE sur par le template PHP (check-zones.mjs interdit les couleurs en dur dans ce fichier : voir template-lancement.php, attribut style du ). ========================================================================== */ @font-face { font-family: 'Aeonik'; src: url('../fonts/aeonik-regular.woff2') format('woff2'), url('../fonts/aeonik-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; } /* Vraies graisses Aeonik auto-hebergees : fini le faux-gras et le text-stroke, qui rendaient differemment selon l'ecran/le moteur (incoherence tel vs PC). Plages : 500-600 -> Medium, 700-800 -> Bold, 900 -> Black. */ @font-face { font-family: 'Aeonik'; src: url('../fonts/aeonik-medium.woff2') format('woff2'); font-weight: 500 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Aeonik'; src: url('../fonts/aeonik-bold.woff2') format('woff2'); font-weight: 700 800; font-style: normal; font-display: swap; } @font-face { font-family: 'Aeonik'; src: url('../fonts/aeonik-black.woff2') format('woff2'); font-weight: 900; font-style: normal; font-display: swap; } /* Aucun debordement horizontal sur la LP : coupe au niveau racine (html via :has + body), en clip de preference (pas de nouveau conteneur de scroll, plus sur avec le pin GSAP), hidden en repli. */ html:has(body.fp-lancement) { overflow-x: hidden; overflow-x: clip; } body.fp-lancement { background: var(--fp-paper); overflow-x: hidden; overflow-x: clip; /* Titres de la LP : Bebas Neue Pro (kit Adobe Fonts, minuscules disponibles, Bold = 600), repli sur la Bebas standard du theme (caps uniquement). */ --lp-font-titres: "bebas-neue-pro", var(--fp-font-heading), sans-serif; } .fp-lp { overflow-x: hidden; } .fp-lp section { position: relative; } /* — Reveal au scroll (meme mecanique que main.css/.fp-anim-h : etat « arme » sans transition le temps d'un frame, pour eviter tout flash de disparition du contenu deja peint). Etat par defaut = VISIBLE (page lisible sans JS). — */ .fp-lp-reveal { opacity: 1; transform: none; transition: opacity var(--fp-anim-dur) var(--fp-anim-ease), transform var(--fp-anim-dur) var(--fp-anim-ease); will-change: opacity, transform; } body.fp-lp-armed .fp-lp-reveal { opacity: 0; transform: translateY(26px); } body.fp-lp-armed.fp-lp-noanim .fp-lp-reveal { transition: none; } /* La revelation doit BATTRE l'armement body.fp-lp-armed ... (specificite superieure a cause du type body) : on scope la regle sur le meme body. */ body.fp-lp-armed .fp-lp-reveal.is-in, .fp-lp-reveal.is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { .fp-lp-reveal, body.fp-lp-armed .fp-lp-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================== HERO ========================================================================== */ /* Hero cale au pixel sur la maquette XD (calibrage par injection Playwright a 1332x688, le format de l'artboard) : marque EN HAUT, accroche a ~52% de la hauteur, bloc Decouvrez compact en bas, fleche au ras. Ratio de la maquette (~1.94) plafonne a l'ecran ; AUCUNE teinte verte dans le voile (image quasi brute, ombres portees sur les textes pour la lisibilite). */ .fp-lp-hero { position: relative; display: flex; align-items: stretch; /* Plafond 88svh : le debut de la section suivante depasse toujours sous le hero, meme sur ecran large (demande client). */ height: clamp(600px, 51.7vw, 88svh); overflow: hidden; padding: clamp(26px, 5.6vh, 44px) 0 clamp(18px, 4vh, 30px); color: var(--fp-white); } /* Fond NOIR : le hero part du noir ; poster et video s'y fondent. */ .fp-lp-hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: rgb(0, 0, 0); } /* Poster CACHE par defaut. Le JS (lancement.js) ne le montre QUE si la video n'est pas prete tout de suite ; si elle l'est (cache), on passe direct a la video sans jamais afficher l'image (fini le flash apparition/disparition). Quand il est montre (.is-intro) : apparition + zoom-in ; garde ~1s a l'ecran ; puis fondu AU NOIR (.is-gone) pour laisser la video (frame 0 noire) enchainer son propre fade-in. Cas statiques (no-JS via