/* Vénètes Loader — styles du front */ .vldr-overlay { position: fixed; inset: 0; z-index: 999999; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; will-change: transform, opacity; } .vldr-logo { overflow: visible; } .vldr-path { fill: none; stroke: #fbfaf7; stroke-width: 0.9; stroke-linecap: round; stroke-linejoin: round; /* État initial : trait « non dessiné », avant même que le JS agisse. Empêche le flash du logo plein au tout premier rendu. */ stroke-dasharray: 1200; stroke-dashoffset: 1200; } /* Remplissage (masqué par défaut, révélé en fondu par le JS) */ .vldr-fill { opacity: 0; } /* Typo : conteneur dont la largeur s'anime pour révéler le texte de gauche à droite */ .vldr-typo-wrap { width: 0; overflow: hidden; } .vldr-typo { display: block; } .vldr-overlay.vldr-done { pointer-events: none; } /* Sortie : fondu */ .vldr-overlay.vldr-out-fade { opacity: 0; transition: opacity .9s ease; } /* Sortie : voile qui se lève */ .vldr-overlay.vldr-out-rise { transform: translateY(-100%); transition: transform 1s cubic-bezier(.65, 0, .35, 1); } /* Sortie : voile qui descend */ .vldr-overlay.vldr-out-down { transform: translateY(100%); transition: transform 1s cubic-bezier(.65, 0, .35, 1); } /* Premier temps de la sortie : le logo et la typo s'effacent avant le voile */ .vldr-logo, .vldr-typo-wrap { transition: opacity .6s ease, transform .6s cubic-bezier(.65, 0, .35, 1); } .vldr-overlay.vldr-content-out .vldr-logo, .vldr-overlay.vldr-content-out .vldr-typo-wrap { opacity: 0; transform: translateY(-12px); } /* ------------------------------------------------------------------ MOBILE : logo et typo adaptés (la taille des réglages vise le desktop) ------------------------------------------------------------------ */ @media ( max-width: 767px ) { .vldr-logo { width: var( --vldr-logo-mobile, 92px ) !important; height: auto !important; } .vldr-typo { height: var( --vldr-typo-mobile, 20px ) !important; } /* La typo ne doit jamais dépasser de l'écran : sans cette contrainte, la dernière lettre se retrouve coupée sur les petits écrans. Le JS réduit la taille du SVG si nécessaire pour qu'il tienne. */ .vldr-typo-wrap { max-width: calc( 100vw - 48px ); } .vldr-overlay { gap: 18px; padding-left: 24px; padding-right: 24px; box-sizing: border-box; } } @media (prefers-reduced-motion: reduce) { .vldr-overlay { transition: opacity .3s ease !important; } .vldr-path { stroke-dashoffset: 0 !important; } .vldr-fill { opacity: 1 !important; } .vldr-typo-wrap { width: auto !important; } } /* Vénètes Reveal — le texte reste visible par défaut. Le masquage n'est appliqué que si le JS a pris la main (classe vldr-reveal-js sur ), pour ne jamais laisser un texte caché si le script ne s'exécute pas. */ html.vldr-reveal-js .vldr-reveal:not(.vldr-reveal-ready) { opacity: 0; } .vldr-reveal.vldr-reveal-ready { opacity: 1; }