/* ------------------------------------------------------------------ * JLP Décryptage — Séquence d'ouverture (accueil uniquement) * Fichier local et autonome. Aucune règle existante n'est redéfinie. * Ne s'active que si porte la classe .jlp-ouverture-on, posée * par le script de garde de index.html, une seule fois par session. * * Principe de robustesse : l'état de base de chaque calque est déjà * l'état « correct ». Les animations n'ajoutent que du mouvement. * Si le navigateur diffère ou abandonne une animation, on obtient un * visuel fixe propre, jamais un écran noir ni un calque bloqué. * ------------------------------------------------------------------ */ .jlp-ouverture { display: none; } html.jlp-ouverture-on .jlp-ouverture { display: block; position: fixed; inset: 0; z-index: 10000; /* au-dessus du grain global (z-index 9999) */ background: #000; overflow: hidden; pointer-events: none; opacity: 1; transition: opacity 900ms cubic-bezier(0.32, 0, 0.24, 1); /* Filet de sécurité : n'anime que « visibility », propriété traitée sur le fil principal, donc jamais mise en attente du compositeur. Si le script ne s'exécutait pas, le calque s'efface malgré tout. */ animation: jlpOuvSecours 6000ms linear forwards; } html.jlp-ouverture-on .jlp-ouverture.jlp-ouv-sortie { opacity: 0; } /* Calques image : même fichier, donc une seule requête réseau. */ html.jlp-ouverture-on .jlp-ouv-fond, html.jlp-ouverture-on .jlp-ouv-image { position: absolute; inset: 0; background-repeat: no-repeat; background-position: center center; background-image: url(/images/home-ouverture.jpg); background-image: image-set( url(/images/home-ouverture.webp) type("image/webp"), url(/images/home-ouverture.jpg) type("image/jpeg") ); } /* Toile de fond floutée : remplit l'écran quel que soit le format, sans jamais recadrer la composition d'origine. */ html.jlp-ouverture-on .jlp-ouv-fond { background-size: cover; filter: blur(34px) brightness(0.40) saturate(0.85); transform: scale(1.16); animation: jlpOuvFond 3350ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* Visuel d'ouverture : toujours intégralement visible. */ html.jlp-ouverture-on .jlp-ouv-image { background-size: contain; transform: scale(1); transform-origin: 50% 50%; animation: jlpOuvVisuel 3350ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } /* Voile éditorial : vignettage sobre, valeur fixe. */ html.jlp-ouverture-on .jlp-ouv-voile { position: absolute; inset: 0; background: radial-gradient(120% 100% at 50% 44%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.58) 100%), linear-gradient(180deg, rgba(0,0,0,0.34) 0%, rgba(0,0,0,0.10) 46%, rgba(0,0,0,0.46) 100%); } /* Noir d'ouverture : le visuel émerge du noir. Retiré par le script. */ html.jlp-ouverture-on .jlp-ouv-noir { position: absolute; inset: 0; background: #000; opacity: 1; transition: opacity 950ms cubic-bezier(0.22, 0.61, 0.36, 1); } html.jlp-ouverture-on .jlp-ouv-noir.jlp-ouv-clair { opacity: 0; } /* Blocage du défilement pendant la séquence. */ html.jlp-ouverture-run, html.jlp-ouverture-run body { overflow: hidden; } /* Le hero d'accueil possède déjà son propre écran d'intro (logo sur noir). Sur le chargement où la séquence d'ouverture joue, ce doublon est neutralisé pour éviter deux génériques successifs. */ html.jlp-ouverture-on .jlp-intro { display: none !important; } /* --- Images clés -------------------------------------------------- */ @keyframes jlpOuvSecours { 0% { visibility: visible; } 99.9% { visibility: visible; } 100% { visibility: hidden; } } /* Très lent recentrage : l'image se pose au lieu de bouger. */ @keyframes jlpOuvVisuel { from { transform: scale(1.045); } to { transform: scale(1.000); } } @keyframes jlpOuvFond { from { transform: scale(1.24); } to { transform: scale(1.16); } } /* --- Typographie d'ouverture (formats hauts) ---------------------- La maquette est panoramique. Sur un écran haut, elle serait réduite à un bandeau et sa baseline deviendrait illisible. On y substitue donc la photographie seule, plein cadre, et le mot-marque composé en vrai texte, net à toutes les densités d'écran. */ html.jlp-ouverture-on .jlp-ouv-texte { display: none; } @media (max-aspect-ratio: 5/4) { html.jlp-ouverture-on .jlp-ouv-image { display: none; } html.jlp-ouverture-on .jlp-ouv-fond { background-image: url(/images/home-ouverture-portrait.jpg); background-image: image-set( url(/images/home-ouverture-portrait.webp) type("image/webp"), url(/images/home-ouverture-portrait.jpg) type("image/jpeg") ); background-position: 56% center; filter: none; transform: scale(1); animation: jlpOuvFondHaut 3350ms cubic-bezier(0.22, 0.61, 0.36, 1) both; } html.jlp-ouverture-on .jlp-ouv-voile { background: linear-gradient(180deg, rgba(0,0,0,0.52) 0%, rgba(0,0,0,0.18) 30%, rgba(0,0,0,0.60) 62%, rgba(0,0,0,0.90) 100%), radial-gradient(120% 78% at 50% 40%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.45) 100%); } html.jlp-ouverture-on .jlp-ouv-texte { position: absolute; left: 0; right: 0; bottom: 16%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 6vw; color: #F7F3EC; } html.jlp-ouverture-on .jlp-ouv-marque { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(58px, 20vw, 116px); line-height: 0.94; letter-spacing: 0.05em; padding-left: 0.05em; text-shadow: 0 8px 40px rgba(0,0,0,0.55); } html.jlp-ouverture-on .jlp-ouv-nom { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(15px, 5.2vw, 28px); letter-spacing: 0.32em; padding-left: 0.32em; margin-top: 0.55em; text-shadow: 0 6px 28px rgba(0,0,0,0.55); } html.jlp-ouverture-on .jlp-ouv-filet { width: clamp(46px, 14vw, 78px); height: 1px; margin: 1.5em 0 1.35em; background: #E62D27; } html.jlp-ouverture-on .jlp-ouv-ligne { font-family: 'Playfair Display', Georgia, serif; font-weight: 400; font-size: clamp(10px, 3.1vw, 15px); letter-spacing: 0.2em; padding-left: 0.2em; text-transform: uppercase; color: rgba(247, 243, 236, 0.9); } html.jlp-ouverture-on .jlp-ouv-ligne em { font-style: normal; color: #E62D27; } @keyframes jlpOuvFondHaut { from { transform: scale(1.055); } to { transform: scale(1.000); } } } /* --- Mouvement réduit --------------------------------------------- */ @media (prefers-reduced-motion: reduce) { html.jlp-ouverture-on .jlp-ouv-image { animation: none; transform: none; } html.jlp-ouverture-on .jlp-ouv-fond { animation: none; transform: scale(1.16); } @media (max-aspect-ratio: 5/4) { html.jlp-ouverture-on .jlp-ouv-fond { animation: none; transform: scale(1); } } html.jlp-ouverture-on .jlp-ouv-noir { transition-duration: 450ms; } html.jlp-ouverture-on .jlp-ouverture { transition-duration: 550ms; } }