/**
 * ═══════════════════════════════════════════════════════════════════════════
 * HEADER - CSS CRITIQUE (PRÉVENTION DU CLS)
 * ═══════════════════════════════════════════════════════════════════════════
 * 
 * OBJECTIF:
 * Réserver l'espace des éléments du header AVANT le chargement du CSS externe
 * pour éviter le CLS (Cumulative Layout Shift) - important pour les Core Web Vitals
 * 
 * QU'EST-CE QUE LE CLS ?
 * Le CLS mesure la stabilité visuelle d'une page. Si des éléments bougent pendant
 * le chargement (ex: le header qui change de taille), cela crée une mauvaise UX
 * et pénalise le score SEO.
 * 
 * SOLUTION:
 * En définissant les dimensions fixes (min-height, min-width, padding) dès le
 * début, on évite que les éléments ne se déplacent quand le CSS principal arrive.
 * 
 * CHARGEMENT: Immédiat (critique)
 * TAILLE: 8.2 KB
 * 
 * CONTENU:
 * - Dimensions fixes du header et container
 * - Tailles des boutons et actions
 * - Sélecteur de langue
 * - Menu utilisateur
 * - Navigation footer
 * - Sidebar gauche
 * - Responsive mobile
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER PRINCIPAL - DIMENSIONS FIXES
   ═══════════════════════════════════════════════════════════════════════════
   Le header est fixe en haut de page (position: fixed) avec une hauteur
   minimale de 70px. Cela garantit qu'il ne change jamais de taille.
*/
.main-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    min-height: 70px;
    z-index: 1000;
}

/* ───────────────────────────────────────────────────────────────────────────
   Container interne du header
   ───────────────────────────────────────────────────────────────────────────
   Utilise flexbox pour aligner les éléments horizontalement.
   Le padding (1rem 1.5rem) crée l'espace intérieur.
*/
.header-container {
    display: flex;
    align-items: center;
    min-height: 70px;
    padding: 1rem 1.5rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER ACTIONS - BOUTONS À DROITE
   ═══════════════════════════════════════════════════════════════════════════
   Zone contenant les boutons (langue, mode sombre, accessibilité, etc.)
   margin-left: auto pousse cette zone à droite
*/
.header-actions {
    display: flex;
    align-items: center;
    gap: 1rem;              /* Espace entre les boutons */
    min-height: 44px;       /* Hauteur minimale pour accessibilité (touch target) */
    margin-left: auto;      /* Pousse à droite */
    flex-shrink: 0;         /* Ne rétrécit jamais */
}

/* ───────────────────────────────────────────────────────────────────────────
   Boutons icônes (mode sombre, accessibilité, etc.)
   ───────────────────────────────────────────────────────────────────────────
   Taille minimale de 44x44px pour respecter les normes d'accessibilité
   (recommandation WCAG pour les zones cliquables)
*/
.icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SÉLECTEUR DE LANGUE
   ═══════════════════════════════════════════════════════════════════════════
   Dropdown pour changer la langue du site (FR, EN, etc.)
*/
.lang-switcher {
    position: relative;     /* Pour positionner le dropdown en absolu */
    display: inline-block;
    min-width: 90px;
    min-height: 44px;
}

.lang-switcher-btn {
    min-height: 40px;
    min-width: 85px;
}

/* ───────────────────────────────────────────────────────────────────────────
   Dropdown de sélection de langue
   ───────────────────────────────────────────────────────────────────────────
   Position absolue pour ne pas affecter le layout quand il s'ouvre.
   Caché par défaut (opacity: 0, visibility: hidden)
*/
.lang-dropdown {
    position: absolute;
    top: calc(100% + 10px); /* 10px sous le bouton */
    right: 0;
    min-width: 200px;
    opacity: 0;
    visibility: hidden;
    z-index: 1000;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LAYOUT CONTAINER - STRUCTURE GLOBALE
   ═══════════════════════════════════════════════════════════════════════════
   Container principal qui englobe tout le contenu de la page
*/
.layout-container {
    display: block;
    min-height: 100vh;      /* Hauteur minimale = hauteur de l'écran */
    width: 100%;
}

/* ───────────────────────────────────────────────────────────────────────────
   Body - Padding pour le header fixe
   ───────────────────────────────────────────────────────────────────────────
   Comme le header est en position fixed, il faut ajouter un padding-top
   au body pour que le contenu ne passe pas sous le header
*/
body {
    padding-top: 70px !important;
    margin: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   LOGO DU SITE
   ═══════════════════════════════════════════════════════════════════════════
*/
.logo {
    display: flex;
    align-items: center;
    min-height: 50px;
}

.logo img {
    width: 50px;
    height: 50px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   MENU UTILISATEUR
   ═══════════════════════════════════════════════════════════════════════════
   Affiche le nom d'utilisateur et un dropdown avec les options
*/
.user-menu {
    min-height: 44px;
}

.user-profile-btn {
    min-height: 44px;
    display: flex;
    align-items: center;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORCE LA HAUTEUR DU HEADER
   ═══════════════════════════════════════════════════════════════════════════
   Règles ultra-spécifiques pour forcer le padding du header
   (nécessaire pour correspondre au footer)
*/
header.main-header .header-container,
.main-header .header-container,
header .header-container {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    min-height: auto !important;
    height: auto !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   NAVIGATION FOOTER (BAS DU MENU GAUCHE)
   ═══════════════════════════════════════════════════════════════════════════
   Section en bas du menu latéral gauche contenant les liens sociaux
*/
.nav-footer {
    display: flex !important;
    flex-direction: column !important;
    margin-top: auto !important;        /* Pousse vers le bas */
    padding: 1rem !important;
    border-top: 2px solid var(--border) !important;
}

/* ───────────────────────────────────────────────────────────────────────────
   Liens sociaux dans le footer de navigation
   ───────────────────────────────────────────────────────────────────────────
*/
.footer-social-nav {
    display: flex !important;
    gap: 0.5rem !important;
    justify-content: center !important;
    margin-top: 0.5rem !important;
}

.social-link-nav {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0.5rem !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 2px solid rgba(255, 111, 177, 0.2) !important;
    border-radius: 8px !important;
    color: var(--text) !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
}

.social-link-nav:hover {
    background: rgba(255, 111, 177, 0.15) !important;
    border-color: var(--primary) !important;
    transform: translateY(-2px) !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   SIDEBAR GAUCHE (MENU DE NAVIGATION)
   ═══════════════════════════════════════════════════════════════════════════
   Menu latéral gauche avec les liens de navigation du site
*/
.sidebar-left {
    overflow-y: auto !important;
    max-height: calc(100vh - 120px) !important; /* Hauteur écran - header - footer */
    bottom: 60px !important;                     /* S'arrête au footer */
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE MOBILE
   ═══════════════════════════════════════════════════════════════════════════
   Adaptations pour les écrans de moins de 768px (tablettes et mobiles)
*/
@media (max-width: 768px) {
    /* Header plus petit sur mobile */
    .main-header {
        min-height: 60px;
    }
    
    .header-container {
        min-height: 60px;
        padding: 0.75rem 1rem;
    }
    
    /* Body padding ajusté */
    body {
        padding-top: 60px !important;
    }
    
    /* Espacement réduit entre les boutons */
    .header-actions {
        gap: 0.5rem;
    }
    
    /* Sélecteur de langue plus petit */
    .lang-switcher {
        min-width: 70px;
    }
    
    .lang-switcher-btn {
        min-width: 65px;
    }
    
    /* Padding du header ajusté */
    header.main-header .header-container,
    .main-header .header-container,
    header .header-container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* ───────────────────────────────────────────────────────────────────────────
   Très petits écrans (moins de 480px)
   ───────────────────────────────────────────────────────────────────────────
*/
@media (max-width: 480px) {
    /* Padding encore plus réduit sur très petits écrans */
    header.main-header .header-container,
    .main-header .header-container,
    header .header-container {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FIN DU FICHIER
   ═══════════════════════════════════════════════════════════════════════════
   
   RÉSUMÉ:
   Ce fichier définit les dimensions fixes de tous les éléments du header
   pour éviter le CLS (Cumulative Layout Shift). Il est chargé immédiatement
   car il est critique pour la performance et l'expérience utilisateur.
   
   VARIABLES CSS UTILISÉES:
   - var(--border)  : Couleur des bordures
   - var(--text)    : Couleur du texte
   - var(--primary) : Couleur primaire (rose)
   
   MAINTENANCE:
   Si vous ajoutez un nouvel élément dans le header, pensez à ajouter ses
   dimensions fixes ici pour éviter le CLS.
   
   DERNIÈRE MISE À JOUR: 6 mai 2026
   ═══════════════════════════════════════════════════════════════════════════
*/