/* --- Styles pour l'En-tête Simple (galerie.html) --- */
.site-header {
    background-color: #f8f9fa; /* Couleur de fond légère pour l'en-tête */
    padding: 10px 0;
    border-bottom: 1px solid #e7e7e7; /* Ligne de séparation */
}

/* Styles spécifiques au container dans l'en-tête pour enlever le padding/shadow */
.site-header .container {
     max-width: 960px;
     margin: 0 auto; /* Centre le contenu de l'en-tête */
     padding: 5px 20px; /* Ajustement du padding */
     background-color: transparent; /* Pas de fond blanc spécifique */
     box-shadow: none; /* Pas d'ombre */
     border-radius: 0;
     display: flex; /* Pour aligner les éléments si nécessaire */
     align-items: center;
}

.back-home-link {
    font-weight: bold;
    color: #333; /* Couleur du lien retour */
    text-decoration: none;
}

.back-home-link:hover {
    color: #007bff; /* Changement de couleur au survol */
    text-decoration: underline;
}


/* --- Styles pour la Grille de la Galerie --- */
#gallery-content h2 {
    text-align: center; /* Centrer le titre de la galerie */
    border-bottom: none; /* Pas de bordure sous ce H2 spécifique */
}

.gallery-grid {
    display: grid;
    /* Crée des colonnes réactives: minimum 150px de large, max 1 fraction */
    /* Ajustez minmax(150px, 1fr) selon la taille de miniature souhaitée */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px; /* Espace entre les photos */
    margin-top: 30px; /* Espace après le titre/description */
}

.gallery-item {
    border: 1px solid #eee; /* Bordure légère autour de chaque item */
    border-radius: 4px; /* Coins arrondis */
    overflow: hidden; /* Assure que l'image ne dépasse pas si elle est plus grande */
    background-color: #fff;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Pour effet au survol */
}

.gallery-item img {
    display: block; /* Pour enlever les espaces sous l'image */
    width: 100%; /* L'image prend toute la largeur de son conteneur */
    height: 180px; /* Hauteur fixe pour des miniatures uniformes */
    object-fit: cover; /* Redimensionne l'image pour couvrir la zone, en coupant si nécessaire */
    vertical-align: middle; /* Bon alignement vertical */
}

.gallery-item:hover {
    transform: scale(1.03); /* Léger zoom au survol */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Ombre légère au survol */
}

/* Style optionnel pour les légendes */
.gallery-item .caption {
    padding: 8px;
    font-size: 0.9em;
    text-align: center;
    color: #555;
    margin: 0;
}