/* Écran de chargement : 4 panneaux de couleur couvrent tout l'écran dès le
   tout premier affichage (pour ne jamais montrer la page "brute" avant
   l'animation), le logo apparaît brièvement au centre, puis les panneaux
   s'ouvrent en éventail pour révéler la page. Voir
   assets/scripts/gsap/page-loader.js.

   Filets de sécurité (jamais de page bloquée) :
   - JS désactivé : le <noscript> dans index.php cache l'écran aussitôt.
   - GSAP indisponible (CDN hors ligne) : le script retire l'écran sans
     animation, immédiatement.
   - L'animation elle-même plante : un minuteur de secours dans le script
     force sa disparition après quelques secondes, quoi qu'il arrive. */
.loader {
    position: fixed;
    inset: 0;
    z-index: 9999;
}
.loader-panel {
    position: absolute;
    width: 50%;
    height: 50%;
    background-color: var(--c);
}
.loader-panel-1 { top: 0;   left: 0;   --c: #C60E10; }
.loader-panel-2 { top: 0;   left: 50%; --c: #22B0E0; }
.loader-panel-3 { top: 50%; left: 0;   --c: #A5C61B; }
.loader-panel-4 { top: 50%; left: 50%; --c: #7B2D8E; }

.loader-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30%;
    transform: translate(-50%, -50%) scale(0.8);
    opacity: 0;
}
@media screen and (max-width: 768px) {
    .loader-logo {
        width: 50%;
    }
}