/* * Loader d'intro de la page d'accueil. * * - Overlay plein écran qui couvre la home pendant l'amorce (anti-FOUC). * - L'illustration démarre légèrement décalée (rotate -45deg) puis pivote en douceur jusqu'à * la position droite (rotate 0deg). Au moment exact où elle est droite, l'overlay s'efface * en fondu pour révéler la page. Tout est piloté par CSS, le JS ne fait que poser la classe * `.is-done` sur `animationend` (avec failsafe) puis retire l'overlay du DOM. * * Le bloc minimal (positionnement, fond, état initial) est aussi inliné dans * (cf. functions.php → bmf_intro_loader_critical_head) pour s'imposer avant le rendu et * éviter le flash de contenu non stylisé. */ .bmf-intro-loader { position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; background-color: var(--bmf-bg, #f1ede8); transition: opacity 0.4s ease-out, visibility 0s linear 0.4s; pointer-events: auto; } .bmf-intro-loader__img { display: block; width: 96px; height: 96px; transform-origin: 50% 50%; transform: rotate(45deg); animation: bmfIntroLoaderRotate 1s cubic-bezier(0.22, 1, 0.36, 1) forwards; will-change: transform; } @keyframes bmfIntroLoaderRotate { from { transform: rotate(45deg); } to { transform: rotate(0deg); } } .bmf-intro-loader.is-done { opacity: 0; visibility: hidden; pointer-events: none; } @media (max-width: 600px) { .bmf-intro-loader__img { width: 80px; height: 80px; } } @media (prefers-reduced-motion: reduce) { .bmf-intro-loader__img { animation-duration: 0.4s; } }