/**
 * ═══════════════════════════════════════════════════════════════════════════
 * HEADER - BANNIÈRES DE NOTIFICATION
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Afficher des bannières en haut de la page pour informer l'utilisateur
 * de problèmes de sécurité ou d'actions importantes nécessitant son attention.
 * 
 * BANNIÈRES DISPONIBLES:
 * 
 * 1. BANNIÈRE DE CONFLIT DE SESSION (Rouge - Danger)
 *    → Apparaît quand l'user_id de la session ne correspond pas au cookie
 *    → Indique un problème de synchronisation ou une tentative de hijacking
 *    → La session est automatiquement restaurée côté serveur
 * 
 * 2. BANNIÈRE DE COOKIES OBSOLÈTES (Orange - Warning)
 *    → Apparaît quand des cookies non signés sont détectés
 *    → Indique des cookies créés avant la mise en place du système de signature
 *    → Les cookies sont automatiquement supprimés pour la sécurité
 * 
 * COMPORTEMENT:
 * - Apparition: Animation slideDown (descend du haut)
 * - Disparition: Auto-fermeture après 10s OU clic sur le bouton X
 * - Position: Fixe en haut de la page (z-index élevé)
 * - Responsive: S'adapte aux petits écrans
 * 
 * CHARGEMENT: Différé (non-critique)
 * TAILLE: 3.5 KB
 * 
 * COULEURS:
 * - Session conflict: Rouge (#dc2626 → #b91c1c) - Danger
 * - Cookies obsolètes: Orange (#f59e0b → #d97706) - Warning
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   ANIMATION SLIDEDOWN (COMMUNE AUX DEUX BANNIÈRES)
   ═══════════════════════════════════════════════════════════════════════════
   Animation qui fait descendre la bannière du haut de l'écran.
   Durée: 0.3s (rapide mais pas brusque)
*/
@keyframes slideDown {
    from { transform: translateY(-100%); }  /* Commence hors écran (en haut) */
    to { transform: translateY(0); }        /* Arrive à sa position finale */
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNIÈRE DE CONFLIT DE SESSION (ROUGE)
   ═══════════════════════════════════════════════════════════════════════════
   
   QUAND APPARAÎT-ELLE ?
   Quand $_SESSION['user_id'] ≠ cookie 'user_id'
   
   CAUSES POSSIBLES:
   - L'utilisateur s'est connecté sur un autre onglet
   - Les cookies ont été modifiés manuellement
   - Tentative de session hijacking
   - Problème de synchronisation serveur
   
   SOLUTION AUTOMATIQUE:
   Le système restaure automatiquement la session correcte côté serveur.
   L'utilisateur est juste informé qu'il y a eu un problème.
*/
.session-conflict-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100000;                                              /* Au-dessus de tout */
    background: linear-gradient(135deg, #dc2626, #b91c1c);       /* Gradient rouge */
    border-bottom: 3px solid #991b1b;                            /* Bordure rouge foncé */
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);                  /* Ombre portée */
    animation: slideDown 0.3s ease-out;                          /* Animation d'entrée */
}

/* ───────────────────────────────────────────────────────────────────────────
   Contenu de la bannière (layout flexbox)
   ───────────────────────────────────────────────────────────────────────────
   Structure: [Icône] [Texte] [Bouton X]
*/
.session-conflict-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #ffffff;
}

/* ───────────────────────────────────────────────────────────────────────────
   Icône d'avertissement (⚠️)
   ───────────────────────────────────────────────────────────────────────────
*/
.session-conflict-icon {
    font-size: 1.5rem;
    flex-shrink: 0;  /* Ne rétrécit jamais */
}

/* ───────────────────────────────────────────────────────────────────────────
   Zone de texte (titre + description)
   ───────────────────────────────────────────────────────────────────────────
*/
.session-conflict-text {
    flex: 1;  /* Prend tout l'espace disponible */
}

.session-conflict-text strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.session-conflict-text p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.95;  /* Légèrement transparent pour hiérarchie visuelle */
}

/* ───────────────────────────────────────────────────────────────────────────
   Bouton de fermeture (X)
   ───────────────────────────────────────────────────────────────────────────
   Permet à l'utilisateur de fermer manuellement la bannière
*/
.session-conflict-close {
    background: rgba(255, 255, 255, 0.2);  /* Fond blanc semi-transparent */
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;                     /* Cercle parfait */
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;                         /* Ne rétrécit jamais */
}

.session-conflict-close:hover {
    background: rgba(255, 255, 255, 0.3);  /* Plus opaque au survol */
}

/* ═══════════════════════════════════════════════════════════════════════════
   BANNIÈRE DE COOKIES OBSOLÈTES (ORANGE)
   ═══════════════════════════════════════════════════════════════════════════
   
   QUAND APPARAÎT-ELLE ?
   Quand des cookies sans signature HMAC sont détectés
   
   CAUSES POSSIBLES:
   - Cookies créés avant la mise en place du système de signature
   - Cookies modifiés manuellement
   - Migration depuis une ancienne version du site
   
   SOLUTION AUTOMATIQUE:
   Les cookies obsolètes sont automatiquement supprimés côté serveur.
   L'utilisateur doit se reconnecter si nécessaire.
*/
.unsigned-cookie-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;                                               /* Juste en dessous de session-conflict */
    background: linear-gradient(135deg, #f59e0b, #d97706);       /* Gradient orange */
    border-bottom: 3px solid #b45309;                            /* Bordure orange foncé */
    padding: 1rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: slideDown 0.3s ease-out;
}

/* ───────────────────────────────────────────────────────────────────────────
   Contenu de la bannière (même structure que session-conflict)
   ───────────────────────────────────────────────────────────────────────────
*/
.unsigned-cookie-content {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    color: #ffffff;
}

.unsigned-cookie-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.unsigned-cookie-text {
    flex: 1;
}

.unsigned-cookie-text strong {
    display: block;
    font-size: 1rem;
    margin-bottom: 0.25rem;
}

.unsigned-cookie-text p {
    margin: 0;
    font-size: 0.875rem;
    opacity: 0.95;
}

.unsigned-cookie-close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    color: #ffffff;
    font-size: 1.25rem;
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    cursor: pointer;
    transition: background 0.2s;
    flex-shrink: 0;
}

.unsigned-cookie-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════════════════
   Adaptations pour les écrans de moins de 768px
*/
@media (max-width: 768px) {
    /* Padding réduit sur mobile */
    .session-conflict-banner,
    .unsigned-cookie-banner {
        padding: 0.75rem;
    }
    
    /* Espacement réduit entre les éléments */
    .session-conflict-content,
    .unsigned-cookie-content {
        gap: 0.75rem;
    }
    
    /* Icônes plus petites */
    .session-conflict-icon,
    .unsigned-cookie-icon {
        font-size: 1.25rem;
    }
    
    /* Texte plus petit */
    .session-conflict-text strong,
    .unsigned-cookie-text strong {
        font-size: 0.9rem;
    }
    
    .session-conflict-text p,
    .unsigned-cookie-text p {
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier définit le style des bannières de notification qui apparaissent
   en haut de la page pour informer l'utilisateur de problèmes de sécurité.
   
   HIÉRARCHIE DES Z-INDEX:
   - session-conflict-banner: 100000 (priorité maximale)
   - unsigned-cookie-banner: 99999 (juste en dessous)
   
   POURQUOI CES COULEURS ?
   - Rouge: Danger, problème de sécurité critique
   - Orange: Warning, problème de sécurité mineur
   
   AUTO-FERMETURE:
   Les bannières se ferment automatiquement après 10 secondes via
   header-banners.js. L'utilisateur peut aussi les fermer manuellement.
   
   MAINTENANCE:
   Pour modifier les messages, éditer src/Views/header.php
   Pour modifier le délai d'auto-fermeture, éditer header-banners.js
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/
@media (max-width: 768px) {
    .session-conflict-banner,
    .unsigned-cookie-banner {
        padding: 0.75rem;
    }
    
    .session-conflict-content,
    .unsigned-cookie-content {
        gap: 0.75rem;
    }
    
    .session-conflict-icon,
    .unsigned-cookie-icon {
        font-size: 1.25rem;
    }
    
    .session-conflict-text strong,
    .unsigned-cookie-text strong {
        font-size: 0.9rem;
    }
    
    .session-conflict-text p,
    .unsigned-cookie-text p {
        font-size: 0.8rem;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier gère l'affichage des bannières de notification en haut de la page
   pour informer l'utilisateur de problèmes de sécurité ou d'actions importantes.
   Les bannières apparaissent avec une animation et se ferment automatiquement
   après 10 secondes ou manuellement via le bouton X.
   
   BANNIÈRES DISPONIBLES:
   1. Conflit de session (Rouge): user_id session ≠ cookie
   2. Cookies obsolètes (Orange): cookies non signés détectés
   
   ÉLÉMENTS STYLISÉS:
   - .session-conflict-banner: Bannière rouge de conflit
   - .unsigned-cookie-banner: Bannière orange de cookies obsolètes
   - .banner-close: Bouton X pour fermer manuellement
   - .session-conflict-icon / .unsigned-cookie-icon: Icônes des bannières
   - .session-conflict-text / .unsigned-cookie-text: Texte des bannières
   
   ANIMATIONS:
   - slideDown: Descente de la bannière depuis le haut (0.3s ease-out)
   - Fermeture: Animation slideDown en reverse (géré par JS)
   
   RESPONSIVE:
   - Desktop: Bannière complète avec tous les détails
   - Tablette (<768px): Padding réduit, texte adapté
   - Mobile (<480px): Bannière compacte, texte minimal
   
   COULEURS:
   - Conflit session: Rouge (#ef4444 → #dc2626)
   - Cookies obsolètes: Orange (#f59e0b → #d97706)
   - Texte: Blanc (#ffffff)
   - Bouton fermer: Blanc avec hover rouge/orange
   
   MAINTENANCE:
   - Pour changer les couleurs, modifier les gradients linear-gradient()
   - Pour changer la durée d'animation, modifier 0.3s dans @keyframes
   - Pour changer le délai d'auto-fermeture, modifier header-banners.js
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/