/* ==========================================================================
   Écran de chargement — Lons Entrepreneurs
   ==========================================================================
   Préchargeur global du site.

   Charte :
   - Bleu nuit : #0E2434
   - Bleu secondaire : #153951
   - Bleu principal : #2EA3F2
   - Blanc : #FFFFFF

   Le comportement et les animations restent gérés par preloader.js.
   ========================================================================== */


/* ==========================================================================
   BLOCAGE DU SCROLL
   ========================================================================== */

html.has-site-preloader {
    overflow: hidden;
}


/* ==========================================================================
   PRELOADER
   ========================================================================== */

.site-preloader {
    position: fixed;

    inset: 0;

    z-index: 99999;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    background: #0E2434;

    /*
     * Anime.js gère l'opacité / scale à la sortie.
     * Pas de transition CSS concurrente ici.
     */
}


/* ==========================================================================
   CONTENU CENTRAL
   ========================================================================== */

.site-preloader__inner {
    position: relative;

    display: flex;
    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 32px;

    padding: 32px;
}


/* ==========================================================================
   LOGO
   ========================================================================== */

.site-preloader__logo {
    display: block;

    width: 160px;
    max-width: 58vw;

    height: auto;

    object-fit: contain;

    /*
     * preloader.js le révèle ensuite avec Anime.js.
     */
    opacity: 0;

    transform: translateZ(0);

    will-change:
        opacity,
        transform;
}


/* ==========================================================================
   SPINNER
   ========================================================================== */

.site-preloader__spinner {
    display: block;

    width: 62px;
    height: 62px;

    overflow: visible;

    filter:
        drop-shadow(
            0 0 14px
            rgba(46, 163, 242, .20)
        );
}


/* ==========================================================================
   CERCLE / PISTE
   ========================================================================== */

/*
 * Si ton SVG possède un cercle de fond séparé,
 * cette classe peut lui être attribuée.
 */

.site-preloader__spinner-track {
    stroke:
        rgba(255, 255, 255, .12);

    fill: none;
}


/* ==========================================================================
   ARC ANIMÉ
   ========================================================================== */

.site-preloader__spinner-arc {
    transform-box: fill-box;
    transform-origin: 50% 50%;

    stroke: #2EA3F2;

    fill: none;

    filter:
        drop-shadow(
            0 0 5px
            rgba(46, 163, 242, .35)
        );

    will-change: transform;
}


/* ==========================================================================
   SI LE SVG UTILISE CURRENTCOLOR
   ========================================================================== */

.site-preloader__spinner {
    color: #2EA3F2;
}

.site-preloader__spinner-arc[stroke="currentColor"] {
    stroke: currentColor;
}


/* ==========================================================================
   DÉCOR SUBTIL AUTOUR DU SPINNER
   ========================================================================== */

.site-preloader__inner::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: 19px;

    z-index: -1;

    width: 92px;
    height: 92px;

    border-radius: 50%;

    background:
        rgba(46, 163, 242, .08);

    filter: blur(18px);

    transform:
        translateX(-50%);

    pointer-events: none;
}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 767.98px) {

    .site-preloader__inner {
        gap: 26px;
    }

    .site-preloader__logo {
        width: 140px;

        max-width: 52vw;
    }

    .site-preloader__spinner {
        width: 56px;
        height: 56px;
    }

    .site-preloader__inner::after {
        bottom: 17px;

        width: 82px;
        height: 82px;
    }

}


@media (max-width: 575.98px) {

    .site-preloader__inner {
        gap: 24px;

        padding: 24px;
    }

    .site-preloader__logo {
        width: 125px;
    }

    .site-preloader__spinner {
        width: 52px;
        height: 52px;
    }

}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .site-preloader__logo {
        transform: none !important;
    }

    .site-preloader__spinner-arc {
        animation: none !important;

        transform: none !important;
    }

    .site-preloader__inner::after {
        display: none;
    }

}