/**
 * ═══════════════════════════════════════════════════════════════════════════
 * HEADER - INDICATEUR DE MAINTENANCE
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Afficher un badge discret en bas à droite pour informer les administrateurs
 * et utilisateurs privilégiés que le site est en mode maintenance.
 * 
 * QUAND APPARAÎT-IL ?
 * - Le site est en mode maintenance (défini dans la config)
 * - L'utilisateur a les droits pour bypasser la maintenance (admin, super-admin)
 * - Les visiteurs normaux voient la page de maintenance et n'ont pas accès
 * 
 * COMPORTEMENT:
 * - Badge fixe en bas à droite de l'écran
 * - Icône 🔧 qui tourne en continu
 * - Animation pulse pour attirer l'attention
 * - Lien vers la page admin (pour les super-admins)
 * - Tooltip au survol expliquant la situation
 * 
 * CHARGEMENT: Différé (non-critique)
 * TAILLE: 1.2 KB
 * 
 * COULEURS:
 * - Fond: Gradient orange (#f59e0b → #d97706)
 * - Bordure: Orange foncé (#b45309)
 * - Texte: Blanc (#ffffff)
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   BADGE DE MAINTENANCE
   ═══════════════════════════════════════════════════════════════════════════
   Badge fixe en bas à droite avec un gradient orange pour signaler
   visuellement le mode maintenance.
*/
.maintenance-indicator {
    position: fixed;
    bottom: 10px;
    right: 10px;
    z-index: 99999;                                                    /* Au-dessus de tout */
    background: linear-gradient(135deg, #f59e0b, #d97706);            /* Gradient orange */
    border: 2px solid #b45309;                                         /* Bordure orange foncé */
    border-radius: 8px;
    padding: 0.4rem 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);                        /* Ombre portée */
    cursor: help;                                                      /* Curseur ? au survol */
    animation: pulse 2s infinite;                                      /* Animation pulse */
}

/* ───────────────────────────────────────────────────────────────────────────
   Animation pulse
   ───────────────────────────────────────────────────────────────────────────
   Fait "respirer" le badge pour attirer l'attention sans être trop agressif.
   L'opacité varie de 1 à 0.85 en 2 secondes.
*/
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.85; }
}

/* ───────────────────────────────────────────────────────────────────────────
   Icône de maintenance (🔧)
   ───────────────────────────────────────────────────────────────────────────
   L'icône tourne en continu pour indiquer que quelque chose est en cours.
*/
.maintenance-icon {
    font-size: 1rem;
    animation: rotate 3s linear infinite;  /* Rotation complète en 3 secondes */
}

/* ───────────────────────────────────────────────────────────────────────────
   Animation de rotation
   ───────────────────────────────────────────────────────────────────────────
   Fait tourner l'icône de 0° à 360° en continu
*/
@keyframes rotate {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ───────────────────────────────────────────────────────────────────────────
   Texte "Maintenance"
   ───────────────────────────────────────────────────────────────────────────
*/
.maintenance-text {
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;  /* Empêche le texte de passer à la ligne */
}

/* ───────────────────────────────────────────────────────────────────────────
   Lien vers la page admin (⚙️)
   ───────────────────────────────────────────────────────────────────────────
   Visible uniquement pour les super-admins, permet d'accéder rapidement
   à la page de configuration de la maintenance.
*/
.maintenance-link-icon {
    font-size: 1rem;
    text-decoration: none;
    transition: transform 0.2s;
}

.maintenance-link-icon:hover {
    transform: scale(1.2);  /* Agrandit l'icône au survol */
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════════════════
*/
@media (max-width: 768px) {
    .maintenance-indicator-content {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }
    
    .maintenance-icon {
        font-size: 1.25rem;
    }
    
    .maintenance-text strong {
        font-size: 0.9rem;
    }
    
    .maintenance-details {
        font-size: 0.75rem;
    }
    
    .maintenance-link {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }
    
    body {
        padding-top: 70px;
    }
}

@media (max-width: 480px) {
    .maintenance-details {
        display: none;  /* Masque les détails sur très petits écrans */
    }
    
    body {
        padding-top: 55px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier définit le style du badge de maintenance qui apparaît en bas
   à droite pour les utilisateurs ayant accès au site pendant la maintenance.
   
   POURQUOI UN BADGE ?
   - Rappel visuel que le site est en maintenance
   - Évite que les admins oublient de désactiver la maintenance
   - Permet un accès rapide à la configuration (super-admins)
   
   ANIMATIONS:
   - Pulse: Fait "respirer" le badge (2s)
   - Rotate: Fait tourner l'icône 🔧 (3s)
   
   COULEURS:
   - Orange: Couleur d'avertissement (warning)
   - Pas rouge (danger) car ce n'est pas une erreur
   - Pas vert (success) car ce n'est pas normal
   
   MAINTENANCE:
   Pour désactiver la maintenance, aller dans /admin/config.php
   ou modifier directement la table 'config' en base de données.
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/
@media (max-width: 768px) {
    .maintenance-indicator-content {
        padding: 0.75rem 1rem;
        gap: 0.75rem;
    }
    
    .maintenance-icon {
        font-size: 1.25rem;
    }
    
    .maintenance-text strong {
        font-size: 0.9rem;
    }
    
    .maintenance-details {
        font-size: 0.75rem;
    }
    
    .maintenance-link {
        padding: 0.4rem 1rem;
        font-size: 0.85rem;
    }
    
    body {
        padding-top: 70px;
    }
}

@media (max-width: 480px) {
    .maintenance-details {
        display: none;
    }
    
    body {
        padding-top: 55px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier gère l'affichage du badge de maintenance pour les administrateurs
   qui peuvent accéder au site pendant la maintenance. Le badge est discret
   mais visible pour rappeler que le site est en mode maintenance.
   
   ÉLÉMENTS STYLISÉS:
   - .maintenance-badge: Badge fixe en bas à droite
   - .maintenance-icon: Icône 🔧 avec animation de rotation
   - .maintenance-text: Texte "Mode Maintenance"
   - .maintenance-details: Détails supplémentaires (masqués sur mobile)
   
   ANIMATIONS:
   - spin: Rotation continue de l'icône (2s linear infinite)
   - pulse: Pulsation du badge pour attirer l'attention
   
   RESPONSIVE:
   - Desktop: Badge complet avec détails
   - Tablette (<768px): Badge réduit sans détails
   - Mobile (<480px): Badge minimal, détails masqués
   
   COULEURS:
   - Fond: Gradient orange (#f59e0b → #d97706)
   - Bordure: Orange foncé (#b45309)
   - Texte: Blanc (#ffffff)
   - Ombre: rgba(245, 158, 11, 0.3)
   
   MAINTENANCE:
   - Pour changer les couleurs, modifier les valeurs hex
   - Pour changer la vitesse de rotation, modifier 2s dans @keyframes spin
   - Pour changer la position, modifier bottom et right
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/