body { 
    font-family: sans-serif; 
    background-color: #f4f4f4; 
    color: #333; 
    text-align: left; /* Aligne le texte à gauche, c'est mieux pour les paragraphes */
}

.container { 
    max-width: 800px; 
    margin: 40px auto; 
    padding: 20px; 
    background-color: #fff; 
    border-radius: 8px; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
}

h1, h2 { 
    color: #555; 
}

.thumbnails { 
    margin-top: 30px; 
    display: flex;
    flex-wrap: wrap; /* Ajouté : Permet aux images de passer à la ligne */
    justify-content: center;
    gap: 15px; 
}

/* Règle pour chaque élément de la galerie (le lien <a>) */
.thumbnails a {
    width: calc(25% - 16px); /* Calcule la largeur pour avoir 4 images par ligne */
    height: 160px;
    display: block; /* Assure un bon comportement du lien */
}

/* Règle unique et propre pour les images de la galerie */
.thumbnails img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit l'espace sans déformer l'image */
    border: 2px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: transform 0.2s;
}

.thumbnails img:hover {
    transform: scale(1.05);
}

body { 
    /* On remplace la couleur de fond par une image */
    background-image: url('pictures/background.jpg');
    background-size: cover; /* L'image couvre tout l'écran */
    background-position: center center; /* L'image est centrée */
    background-attachment: fixed; /* L'image reste fixe au défilement */

    font-family: sans-serif; 
    color: #333; 
    text-align: left; 
}

.container { 
    /* On rend le conteneur blanc semi-transparent pour la lisibilité */
    background-color: rgba(255, 255, 255, 0.92); /* Blanc avec 92% d'opacité */

    max-width: 800px; 
    margin: 40px auto; 
    padding: 25px; 
    border-radius: 8px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.2); 
}