/* ===== BODY - PAGE MÉDIA =====*/
body { 
    padding-top: 70px;                              
}

/* ===== HEADER MÉDIA =====*/
.media-header { 
    background-color: #004494;      
    color: #fff;                   
    padding-top: 3.5rem;
    padding-right: 1rem;
    padding-bottom: 3.5rem;
    padding-left: 1rem;
    text-align: center;             
    margin-bottom: 2rem;            
}

.media-header h1 { 
    font-size: 2rem;                
    font-weight: 900;               /* Texte gras */
    margin-bottom: 0.5rem;           
}


/* ===== SECTION PHOTOS =====*/
.photo-gallery {
    padding-top: 2rem;
    padding-bottom: 2rem;               
}

.photo-gallery h2 {
    text-align: center;             
    color: #004494;                 
    font-size: 2rem;                
    margin-bottom: 2rem;            
}

.photo-gallery p {
    text-align: center;             
    color: #666;                   
    margin-top: 0.5rem;             
}

/* ===== GRILLE PHOTOS =====*/
.gallery-grid {
    display: grid;                  /* Système de grille */
    grid-template-columns: repeat(3, 1fr);  /* 3 colonnes égales */
    gap: 1.25rem;                  
}

.gallery-item img { 
    height: 200px;                  /* Hauteur fixe */
    display: block;                 /* Supprime l'espacement sous l'image */
}

/* ===== SECTION VIDÉOS =====*/
.video-section h2 {
    text-align: center;            
    color: #004494;                 
    font-size: 2rem;                
    margin-bottom: 2rem;            
}

.video-section p {
    text-align: center;             
    color: #666;                    
    margin-top: 0.5rem;             
}

/* ===== GRILLE VIDÉOS =====*/
.video-grid {
    display: grid;                  /* Système de grille */
    grid-template-columns: repeat(2, 1fr);  /* 2 colonnes */
    gap: 1rem;                      
}

/* ===== RESPONSIVE - TABLETTE =====*/
@media (max-width: 1024px) {
    .gallery-grid { 
        grid-template-columns: repeat(2, 1fr);  /* 2 colonnes */
    }
    .video-grid { 
        grid-template-columns: 1fr; /* 1 colonne */
    }
    .gallery-item img, .video-item iframe { 
        height: 180px;              
    }
}

/* ===== RESPONSIVE - MOBILE =====*/
@media (max-width: 480px) {
    .gallery-grid { 
        grid-template-columns: 1fr; /* 1 colonne */
    }
    .gallery-item img, .video-item iframe { 
        height: 160px;              
    }
}