/* ===== VARIABLES CSS =====*/
:root {
    --barca-blue: #004494;      
    --barca-red: #DC143C;       
    --barca-yellow: #FFC52F;    
    --white: #FFFFFF;           
    --dark-gray: #1a1a1a;       
    --light-gray: #f5f5f5;      
}

/* ===== RESET CSS GLOBAL =====*/
* { 
    margin: 0;                  
    padding: 0;                 
    box-sizing: border-box;    
}

/* ===== BODY =====*/
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;  
    background-color: var(--white); 
    color: var(--dark-gray);         
    overflow-x: hidden;              /* Empêche le scroll horizontal */
}

/* ===== NAVBAR - BARRE DE NAVIGATION =====*/
.navbar {
    display: flex;                   /* Utilise flexbox pour aligner les éléments */
    justify-content: space-between;  /* Espace égal entre les éléments (logo à gauche, liens au centre, burger à droite) */
    align-items: center;               
    background: var(--barca-blue);   
    padding-top: 0.8rem;
    padding-right: 1.5rem;
    padding-bottom: 0.8rem;
    padding-left: 1.5rem;          
    position: fixed;                 /* Reste en place lors du scroll */
    top: 0;                          /* Positionné en haut */
    width: 100%;                     /* Prend toute la largeur */
    z-index: 1000;                   /* Reste au-dessus des autres éléments */
    border-bottom: 2px solid var(--barca-yellow);  /* Ligne jaune sous la navbar */
}

/* ===== LOGO =====*/

.logo-img { 
    height: 50px;                    /* Hauteur fixe du logo */
}

/* Effet au survol du logo */
.logo-img:hover { 
    transform: scale(1.05);          /* Agrandit le logo de au survol (Repris de internet)*/
}

/* ===== LIENS DE NAVIGATION =====*/
.nav-links {
    display: flex;                   
    list-style: none;                /* Supprime les points de liste */
    gap: 0.5rem;                     /* Espace entre chaque lien */
}

/* Style des liens */
.nav-links a {
    color: var(--white);             
    text-decoration: none;           /* Supprime le soulignement */
    font-weight: 700;                /* Texte gras */
    font-size: 0.9rem;               
    padding-top: 0.5rem;
    padding-right: 0.9rem;
    padding-bottom: 0.5rem;
    padding-left: 0.9rem;          
    border-radius: 6px;              /* Coins légèrement arrondis */
}

/* Effet au survol et état actif */
.nav-links a:hover, .nav-links a.active {
    color: var(--barca-yellow);               
    background: rgba(255, 197, 47, 0.08);     
}

/* ===== BURGER - MENU MOBILE ===== */
.burger { 
    display: none;                   /* Caché par défaut (visible que sur mobile) */
    cursor: pointer;                 /* Change le curseur en pointeur */
}

/* Les 3 lignes du burger */
.burger div { 
    width: 28px;                     
    height: 3px;                     
    background: #fff;                
    margin: 5px 0;                   /* Espace entre les lignes */
}

/* ===== MENU MOBILE - RESPONSIVE =====
   À partir de 1024px de largeur, le menu devient mobile */
@media (max-width: 1024px) {
    /* Affiche le burger */
    .burger { 
        display: block;               /* Rend visible */
    }
    
    /* Le menu se cache à droite et coulisse quand on clique */
    .nav-links {
        display: flex;                
        flex-direction: column;        
        position: fixed;              /* Menu fixe sur la page */
        right: -100%;                 /* Caché à droite (hors de l'écran) */
        top: 70px;                    /* Commence après la navbar (70px) */
        width: 100%;                  /* Prend toute la largeur */
        background: var(--barca-blue);
        padding: 2rem 0;              
        height: calc(100vh - 70px);   /* Hauteur = écran - navbar */
        transition: right .3s ease;   /* Animation  du menu (Repris de internet) */
    }
    
    /* Quand le menu est actif (ouvert) */
    .nav-links.active { 
        right: 0;                     /* Menu visible (à sa position normale) */
    }
    
    .nav-links li { 
        padding-top: 1rem;
        padding-bottom: 1rem;    
    }
    
    .nav-links a { 
        font-size: 1.1rem;            /* Texte plus grand sur mobile */
        display: block;               /* Chaque lien occupe une ligne complète */
        padding-top: 0.8rem;
        padding-right: 1.2rem;
        padding-bottom: 0.8rem;
        padding-left: 1.2rem;
    }
}

/* ===== CONTENEUR RÉUTILISABLE =====
   Classe utilisée pour centrer et limiter la largeur du contenu */
.container { 
    max-width: 1200px;               
    margin: 0 auto;                  /* Centre horizontalement */
    padding-right: 1rem;
    padding-left: 1rem;
}