/* ===== SECTION HERO - ZONE PRINCIPALE =====*/
.hero {
    position: relative;                                  
    min-height: 100vh;               /* Sans ça la vidéo ne s'étire pas correctement */
    display: flex;                   
    align-items: center;             
    justify-content: center;                    
}

/* ===== VIDÉO DE FOND =====*/
.hero-video {
    position: absolute;              /* Positionné en absolu par rapport à .hero */
    width: 100%;                     /* Prend toute la largeur */
    height: 100%;                    /* Prend toute la hauteur */
    object-fit: cover;               /* Remplit l'espace sans déformation */
}

/* ===== FILTRE SOMBRE =====*/
.hero-overlay {
    position: absolute;              /* Sans ça le filtre dissparait */
    inset: 0;                        /* Sans ça le filtre dissparait */
    background: rgba(0, 0, 0, 0.5); /* Noir semi-transparent  */
    z-index: 1;                      /* Au-dessus de la vidéo */
}

/* ===== CONTENU TEXTE ET BOUTONS =====*/
.hero-content {
    position: relative;              /* Au-dessus de la vidéo et overlay */
    z-index: 2;                      /* Au-dessus du filtre sombre */
    text-align: center;             
    color: white;                  
    padding: 2rem;                  
}

/* ===== TITRE PRINCIPAL =====*/
.hero-title {
    font-size: 3rem;                 
    font-weight: 900;                /* Texte gras */
    margin-bottom: 1.5rem;           /* Espace sous le titre */
}

/* ===== MOT "BLAUGRANA" =====*/
.blaugrana {
    color: #FFC52F;               
}

/* ===== SOUS-TITRE =====
   Petit texte descriptif */
.hero-subtitle {
    font-size: 1.2rem;          
    margin-bottom: 2rem;           
    color: #ddd;                    
    font-weight: 300;                
}

/* ===== CONTENEUR DES BOUTONS =====*/
.hero-buttons {
    display: flex;                   
    gap: 1rem;                       
    justify-content: center;         
    flex-wrap: wrap;                 /* Les boutons passent à la ligne si pas de place */
}

/* ===== BOUTON GÉNÉRAL =====
   Style commun pour tous les boutons */
.btn {
    padding: 0.9rem 2rem;            
    font-size: 1rem;                 
    font-weight: 700;                /* Texte gras */
    border-radius: 8px;              
    cursor: pointer;                 /* Curseur pointeur */
    text-decoration: none;           /* Supprime le soulignement */
    background: #004494;             
    color: white;                    
    border: 2px solid #004494;       
    transition: background 0.3s ease, color 0.3s ease;  /* Animation lisse */
}

/* ===== BOUTON PRIMAIRE =====
   Bouton principal (bleu rempli) */
.btn-primary {
    background: #004494;             
    border-color: #004494;           
    color: white;                   
}

/* ===== BOUTON SECONDAIRE =====*/
.btn-secondary {
    background: transparent;         
    border-color: #FFC52F;           
    color: white;                    
}

/* ===== EFFET AU SURVOL =====
   Changement de couleur au survol */
.btn:hover {
    background: #FFC52F;             
    color: #004494;                 
}

/* ===== MEDIAQUERIES - TABLETTE =====
   Adapte la taille des textes sur tablette (max 1024px) */
@media (max-width: 1024px) {
    .hero-title {
        font-size: 2.2rem;          
    }
    .hero-subtitle {
        font-size: 1rem;             
    }
}

/* ===== MEDIAQUERIES - MOBILE =====
   Adapte le layout complètement sur mobile (max 768px) */
@media (max-width: 768px) {
    .hero {
        min-height: 100vh;           /* Remplit l'écran */
    }
    .hero-title { 
        font-size: 1.8rem;           
    }
    .hero-subtitle { 
        font-size: 0.95rem;
    }
    .hero-buttons { 
        flex-direction: column;      /* Boutons empilés verticalement */
        gap: 0.75rem;
    }
    .btn { 
        width: 100%;                 
    }
}

/* ===== MEDIAQUERIES - TRÈS PETIT MOBILE =====
   Ajustements pour très petits écrans (max 480px) */
@media (max-width: 480px) {
    .hero-title {
        font-size: 1.4rem;
        margin-bottom: 1rem;
    }
    .hero-subtitle {
        font-size: 0.85rem;
        margin-bottom: 1.5rem;
    }
    .hero-content {
        padding: 1rem;               
    }
}