/* ===================================================================== Vallemont — Splash d'arrivée (drapeau seul, fond noir). 1× par session navigateur (sessionStorage 'vm_splash_shown'). Timing : 0 → 1000 ms drapeau + fond noir, statiques 1000 → 3000 ms fond noir ET drapeau fade-out ensemble (2000 ms) 3000 ms site COMPLÈTEMENT visible 3500 ms retrait du DOM (500 ms de marge) ===================================================================== */ /* Caché par défaut : aucun impact pour les visiteurs déjà passés. */ .vm-splash { display: none; } html.vm-splashing .vm-splash { display: flex; position: fixed; inset: 0; z-index: 99999; align-items: center; justify-content: center; overflow: hidden; pointer-events: none; } /* Fond noir : couche séparée pour pouvoir fade indépendamment du drapeau. */ html.vm-splashing .vm-splash::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at 50% 35%, rgba(20,20,20,0.6) 0%, rgba(10,10,10,1) 70%), #0A0A0A; opacity: 1; transition: opacity 2000ms cubic-bezier(0.2, 0.6, 0.2, 1); will-change: opacity; } /* T = 1000 ms : le JS pose .fade-bg → fond noir s'efface en 2000 ms. */ html.vm-splashing .vm-splash.fade-bg::before { opacity: 0; } /* Empêche le défilement et masque le body pendant le splash. */ html.vm-splashing, html.vm-splashing body { overflow: hidden; } html.vm-splashing body > *:not(.vm-splash) { visibility: hidden; } /* T = 1000 ms : le JS pose .vm-splash-done sur → le body devient visible en arrière-plan, le fond noir qui fade le révèle progressivement. */ html.vm-splashing.vm-splash-done body > *:not(.vm-splash) { visibility: visible; } /* ---------- Tricolore lockup (le « drapeau ») ---------- */ .vm-splash__lockup { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; gap: 36px; padding: 0 24px; opacity: 1; transition: opacity 2000ms cubic-bezier(0.2, 0.6, 0.2, 1); } /* T = 1000 ms : le JS pose .fade-lockup → drapeau s'efface en 2000 ms, en même temps que le fond noir. */ html.vm-splashing .vm-splash.fade-lockup .vm-splash__lockup { opacity: 0; } .vm-splash__bar { display: inline-block; width: clamp(80px, 12vw, 160px); height: 3px; flex-shrink: 0; } .vm-splash__bar--marine { background: var(--vm-marine); } .vm-splash__bar--bourgogne { background: var(--vm-bourgogne); } .vm-splash__label { font-family: var(--font-display); font-size: clamp(14px, 1.4vw, 20px); font-weight: 500; letter-spacing: 0.36em; text-transform: uppercase; color: var(--vm-bone); white-space: nowrap; } /* ---------- Mobile ---------- */ @media (max-width: 640px) { .vm-splash__lockup { gap: 20px; } .vm-splash__bar { width: clamp(48px, 18vw, 90px); height: 2px; } .vm-splash__label { font-size: 11px; letter-spacing: 0.24em; white-space: normal; text-align: center; max-width: 50vw; line-height: 1.4; } } /* ---------- Reduced motion : skip the splash entirely ---------- */ @media (prefers-reduced-motion: reduce) { html.vm-splashing, html.vm-splashing body { overflow: visible; } html.vm-splashing body > *:not(.vm-splash) { visibility: visible; } html.vm-splashing .vm-splash { display: none; } } /* ---------- Print ---------- */ @media print { .vm-splash { display: none !important; } html.vm-splashing, html.vm-splashing body { overflow: visible !important; } html.vm-splashing body > *:not(.vm-splash) { visibility: visible !important; } }