/* ============================================================ STYLES DE L'OVERLAY D'INTRO 9MM ------------------------------------------------------------ Mobile-first. On suppose le :root (tokens de couleurs/polices) déjà déclaré ailleurs (index.html / autre agent). On ne le redéclare PAS. Toutes les classes/ids sont préfixés par "intro-". Exceptions partagées : .intro-active (sur ) et #home (qu'on révèle). ============================================================ */ /* ---- Verrou de scroll pendant l'intro ----------------------------------- Tant que a la classe .intro-active, on bloque le scroll et on force la hauteur viewport pour éviter tout débordement. */ body.intro-active { overflow: hidden; height: 100vh; } /* Pendant l'intro, on masque le contenu du site (#home) pour éviter tout flash de contenu derrière la vidéo. La révélation le réaffiche. */ body.intro-active #home { visibility: hidden; } /* ---- L'overlay plein écran ---------------------------------------------- */ .intro { position: fixed; inset: 0; /* top/right/bottom/left = 0 */ z-index: 9999; /* au-dessus de tout */ background: #000000; /* Death Black (brand book) = pas de flash */ cursor: pointer; /* indique qu'on peut cliquer pour passer */ display: flex; align-items: center; justify-content: center; overflow: hidden; /* Transition pour le « glissement vers le haut » à la fin */ transition: transform 0.7s ease; will-change: transform; transform: translateY(0); } /* État « en train de partir » : l'overlay glisse vers le haut. À la fin de cette transition, le JS retire l'overlay du DOM. */ .intro.intro--leaving { transform: translateY(-100%); } /* ---- La vidéo ----------------------------------------------------------- */ .intro-video { width: 100%; height: 100%; object-fit: cover; /* remplit l'écran sans déformer */ background: #000; /* fond noir pendant le chargement/les bords */ display: block; } /* ---- Bouton « Passer l'intro » ------------------------------------------ */ .intro-skip { position: absolute; bottom: 24px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 6px; /* Petit et discret */ padding: 8px 16px; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); background: rgba(8, 8, 16, 0.55); /* fond translucide sombre */ border: 1px solid var(--border); border-radius: 999px; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease; } /* Survol / focus clavier : on éclaircit pour la lisibilité et l'accessibilité */ .intro-skip:hover, .intro-skip:focus-visible { color: var(--white); border-color: var(--white); background: rgba(8, 8, 16, 0.8); } /* Anneau de focus visible (accessibilité clavier) */ .intro-skip:focus-visible { outline: 2px solid var(--mind); outline-offset: 2px; } /* Petite animation de rebond sur la flèche pour inviter à passer */ .intro-skip-arrow { display: inline-block; animation: intro-bounce 1.6s ease-in-out infinite; } @keyframes intro-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } } /* ---- Bouton de secours « ▶ Voir l'intro » (affiché si l'autoplay est bloqué) ---- */ .intro-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: 8px; padding: 14px 26px; font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--white); background: rgba(8, 8, 16, 0.6); border: 1px solid var(--white); border-radius: 999px; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: transform 0.18s ease, box-shadow 0.2s ease; } /* L'attribut [hidden] doit l'emporter sur display:inline-flex */ .intro-play[hidden] { display: none; } .intro-play:hover { transform: translate(-50%, -50%) scale(1.04); box-shadow: 0 12px 30px -8px rgba(255, 255, 255, 0.4); } .intro-play:focus-visible { outline: 2px solid var(--mind); outline-offset: 3px; } /* ---- Respect de prefers-reduced-motion ---------------------------------- Sécurité CSS : si l'utilisateur réduit les animations, on coupe le rebond. (Le JS, lui, saute carrément l'intro — voir intro.js.) */ @media (prefers-reduced-motion: reduce) { .intro { transition: none; } .intro-skip-arrow { animation: none; } }