/**
 * ═══════════════════════════════════════════════════════════════════════════
 * HEADER - PAGE LOADER (SKELETON LOADER)
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Afficher un loader élégant pendant le chargement de la page pour éviter
 * une page blanche et améliorer l'expérience utilisateur.
 * 
 * QU'EST-CE QU'UN SKELETON LOADER ?
 * C'est un indicateur de chargement qui donne l'impression que le contenu
 * est en train d'arriver. Plus agréable qu'un simple spinner ou une page blanche.
 * 
 * COMPORTEMENT:
 * 1. Le loader s'affiche dès le chargement de la page (HTML)
 * 2. Il reste visible pendant que le CSS/JS se charge
 * 3. Il disparaît automatiquement quand la page est prête (event 'load')
 * 4. Fallback: disparaît après 5 secondes maximum (au cas où)
 * 
 * ANIMATION:
 * - Spinner qui tourne en continu (animation 'spin')
 * - Transition douce à la disparition (opacity + visibility)
 * 
 * CHARGEMENT: Immédiat (critique)
 * TAILLE: 0.8 KB
 * 
 * DÉPENDANCES:
 * - Élément DOM: #page-loader (créé dans header.php)
 * - JavaScript: header-loader.js (gère la disparition)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   OVERLAY PLEIN ÉCRAN
   ═══════════════════════════════════════════════════════════════════════════
   Le loader couvre toute la page (position: fixed) avec un fond sombre
   pour masquer le contenu qui se charge en arrière-plan.
*/

.page-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: var(--bg-primary, #0a0e27);  /* Fond sombre (bleu nuit) */
    z-index: 9999;                            /* Au-dessus de tout */
    display: flex;
    align-items: center;                      /* Centre verticalement */
    justify-content: center;                  /* Centre horizontalement */
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* ───────────────────────────────────────────────────────────────────────────
   État caché du loader
   ───────────────────────────────────────────────────────────────────────────
   Quand la classe 'hidden' est ajoutée, le loader devient transparent
   et invisible, puis est supprimé du DOM après 300ms.
*/
.page-loader.hidden {
    opacity: 0;
    visibility: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENU DU LOADER
   ═══════════════════════════════════════════════════════════════════════════
   Container pour le spinner et le texte, centré dans l'overlay
*/
.loader-content {
    text-align: center;
}

/* ───────────────────────────────────────────────────────────────────────────
   Spinner animé
   ───────────────────────────────────────────────────────────────────────────
   Cercle qui tourne en continu pour indiquer que quelque chose se passe.
   
   TECHNIQUE:
   - Bordure transparente avec rgba(165, 107, 255, 0.2) pour l'effet de cercle
   - Bordure du haut en couleur pleine (#A56BFF) pour créer l'effet de rotation
   - Animation 'spin' qui fait tourner le cercle à 360° en 1 seconde
*/
.loader-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(165, 107, 255, 0.2);  /* Bordure transparente */
    border-top-color: #A56BFF;                    /* Bordure du haut en violet */
    border-radius: 50%;                           /* Cercle parfait */
    animation: spin 1s linear infinite;           /* Rotation continue */
    margin: 0 auto 1rem;                          /* Centré avec marge en bas */
}

/* ───────────────────────────────────────────────────────────────────────────
   Animation de rotation
   ───────────────────────────────────────────────────────────────────────────
   Fait tourner le spinner de 0° à 360° en continu
*/
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Texte de chargement
   ───────────────────────────────────────────────────────────────────────────
   Texte "Chargement..." sous le spinner
*/
.loader-text {
    color: var(--text-muted, #8b92b0);  /* Gris clair */
    font-size: 0.9rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier définit le style du loader de page qui s'affiche pendant le
   chargement initial. Il disparaît automatiquement via header-loader.js.
   
   POURQUOI UN LOADER ?
   - Évite une page blanche pendant le chargement
   - Donne un feedback visuel à l'utilisateur
   - Améliore la perception de performance
   - Plus professionnel qu'une page qui "saute"
   
   COULEURS:
   - Fond: #0a0e27 (bleu nuit sombre)
   - Spinner: #A56BFF (violet)
   - Texte: #8b92b0 (gris clair)
   
   MAINTENANCE:
   Pour changer la vitesse de rotation, modifiez '1s' dans l'animation.
   Pour changer la taille du spinner, modifiez width/height (50px).
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/