/* ============================================================= */
/* 1️⃣ KEYFRAMES */
/* ============================================================= */
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* Pulse avec fade-out final */
@keyframes pulse {

    /* Départ */
    0% {
        transform: scale(0.6);
        opacity: 0;
    }

    /* Apparition */
    20% {
        opacity: 1;
    }

    /* Disparition */
    40% {
        opacity: 0;
    }

    /* Expansion avec retour visible */
    60% {
        transform: scale(1.2);
        opacity: 1;
    }

    /* Nouvelle disparition */
    80% {
        opacity: 0;
    }

    /* Fin transparente */
    100% {
        transform: scale(0.6);
        opacity: 0;
    }
}


/* ============================================================= */
/* 2️⃣ OVERLAY */
/* ============================================================= */
#transition-overlay {
    opacity: 0;
    pointer-events: none;
    display: flex;
    justify-content: center;
    align-items: center;
    position: fixed;
    inset: 0;
    /* background: rgba(0,0,0,0.4); */
    z-index: 9999;
    transition: opacity 0.4s ease;
}

#transition-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* ============================================================= */
/* 3️⃣ LOADER PULSANT + TOURNANT */
/* ============================================================= */
.loader {
    width: 10rem;
    height: 10rem;
    position: absolute; /* ← au lieu de fixed */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10001;
    pointer-events: none;
    opacity: 1;
    transition: opacity 0.8s ease;
}


.loader::before,
.loader::after {
    content: '';
    box-sizing: border-box;
    width: 10rem;
    height: 10rem;
    border: 4px solid #FFF;
    /* border-radius: 50%; */
    position: absolute;
    top: 0;
    left: 0;
    animation: pulse 1.5s ease-in-out infinite;
    /* conserve pulsation */
    opacity: 0;
}

.loader::after {
    border-color: var(--couleur-accent-primaire);
    animation-delay: 0.75s;
}

/* Fade-out du loader */
.loader.fade-out {
    opacity: 0;
    pointer-events: none;
}

/* ============================================================= */
/* 4️⃣ FADE-IN / FADE-OUT CONTENU */
/* ============================================================= */
body {
    transition: opacity 0.8s ease;
    /* synchro avec loader fade-out */
}

body.preload header,
body.preload main,
body.preload footer {
    opacity: 0;
}

body.loaded header,
body.loaded main,
body.loaded footer {
    opacity: 1;
    transition: opacity 0.8s ease;
}

/* Active loader et overlay pendant la transition */
#loader.active,
#transition-overlay.active {
    opacity: 1;
}