/* =====================================================================
   Vallemont — Splash d'arrivée (drapeau seul, fond noir).
   1× par session navigateur (sessionStorage 'vm_splash_shown').

   Timing :
     0   →  300 ms   drapeau + fond noir, opaques      (--vm-splash-hold)
     300 → 1000 ms   fondu de l'ensemble               (--vm-splash-fade)
     1000 ms         overlay transparent, site visible
     ~1300 ms        retrait du DOM par splash-3.js (confort, pas nécessaire)

   POURQUOI CETTE RÉÉCRITURE (26/08/2026)

   La version précédente masquait tout le site (visibility: hidden sur le body)
   jusqu'à ce que le JavaScript rende la main. Or splash-2.js est chargé en pied
   de page : l'affichage du contenu était donc suspendu à l'exécution d'un
   script tardif, derrière tous les autres. Lighthouse mobile mesurait 5 596 ms
   de « Render Delay » sur le LCP — 82 % du total — alors que l'image du héros
   était téléchargée dès 1,2 s. Raccourcir le splash n'y changeait rien : ce
   n'était pas sa durée le problème, mais le fait qu'il conditionne le rendu.

   Désormais le fondu est une animation CSS pure, déclenchée dès que la feuille
   de style est appliquée. Le contenu du site est peint immédiatement DERRIÈRE
   l'overlay opaque : le visiteur voit exactement la même chose, mais le
   navigateur n'a plus rien à attendre pour peindre, et le LCP reflète l'arrivée
   réelle de l'image.

   Le JavaScript ne sert plus qu'au nettoyage du DOM. S'il ne s'exécute jamais,
   l'animation se termine quand même et l'overlay devient transparent puis
   invisible : le site reste utilisable en toutes circonstances. L'ancienne
   version, elle, laissait un site définitivement masqué et non défilable si le
   script échouait.

   Pour ajuster le splash, ne toucher qu'aux deux variables ci-dessous.
   ===================================================================== */

:root {
    --vm-splash-hold: 300ms; /* drapeau immobile avant le fondu */
    --vm-splash-fade: 700ms; /* durée du fondu */
}

/* 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;

    /* L'overlay ne doit jamais intercepter un clic, même pendant le fondu. */
    pointer-events: none;

    /* Fond porté par l'élément lui-même : drapeau et fond s'effacent d'un seul
       tenant, ce que faisaient déjà les deux transitions séparées d'avant. */
    background:
        radial-gradient(ellipse at 50% 35%, rgba(20,20,20,0.6) 0%, rgba(10,10,10,1) 70%),
        #0A0A0A;

    animation: vm-splash-out var(--vm-splash-fade) cubic-bezier(0.2, 0.6, 0.2, 1)
               var(--vm-splash-hold) forwards;
    will-change: opacity;
}

/* visibility: hidden en fin d'animation — l'overlay cesse d'exister pour
   l'accessibilité même si le nettoyage JS n'a pas lieu. */
@keyframes vm-splash-out {
    from { opacity: 1; }
    to   { opacity: 0; visibility: hidden; }
}

/* ---------- 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;
}

.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 : pas de splash du tout ---------- */
@media (prefers-reduced-motion: reduce) {
    html.vm-splashing .vm-splash { display: none; }
}

/* ---------- Print ---------- */
@media print {
    .vm-splash { display: none !important; }
}