/* ---------------------------------- */
/* LOADER ULTRA-PRO — CRYSTAL FLARE   */
/* ---------------------------------- */

#page-loader {
    position: fixed;
    inset: 0;
    background: linear-gradient(135deg, #FFFAF2 0%, #FFF3EA 40%, #FFE7CC 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;

    /* fade-out ultra violent */
    transition: opacity 0.035s ease-out, visibility 0.035s ease-out;

    /* améliore la perf GPU */
    will-change: opacity, visibility, transform;
}

#page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* Container */
.loader-container {
    position: relative;
    width: 82px;
    height: 82px;
    will-change: transform;  /* léger boost */
}

/* Bague statique */
.loader-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid rgba(230, 57, 70, 0.12);
    backdrop-filter: blur(1px); /* identique visuellement mais léger */
}

/* Bague animée */
.loader-ring-animated {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #E63946;
    border-right-color: #FF8F47;

    animation: spinSmooth 0.7s linear infinite;

    filter: drop-shadow(0 0 5px rgba(230, 57, 70, 0.22));
}

/* Noyau lumineux */
.loader-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 46%;
    height: 46%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, #FF6A5F, #E63946);

    animation: pulseGlow 0.9s ease-in-out infinite alternate;

    box-shadow:
        0 0 14px rgba(230, 57, 70, 0.55),
        0 0 28px rgba(255, 143, 71, 0.35);
}

/* ---------------------------------- */
/* ANIMATIONS */
/* ---------------------------------- */
@keyframes spinSmooth {
    to { transform: rotate(360deg); }
}

@keyframes pulseGlow {
    0% { opacity: 0.85; }
    100% { opacity: 1; }
}

/* Ajoutez cette règle CSS pour le masquage immédiat */
    .hide-loader-instant #page-loader {
        visibility: hidden !important; /* Rend l'élément invisible mais garde sa place (pour ne pas bouger le contenu) */
        opacity: 0 !important; /* S'assure que c'est transparent */
        display: none !important; /* Si vous voulez qu'il ne prenne aucune place */
    }