/* Définition de la police locale */
@font-face {
    font-family: 'OrdinaireNormal';
    src: url('font/ORDINAIRENORMAL.otf') format('opentype'); /* Spécifie le format de la police */
    font-weight: normal;
    font-style: normal;
}

/* Style global du body */
body {
    display: flex;
    flex-direction: column; /* Permet d'utiliser l'espace vertical */
    min-height: 100vh; /* Assure que le body occupe au moins la hauteur de l'écran */
    margin: 0;
    background-color: #fff; /* Fond blanc pour tout le body */
    font-family: 'OrdinaireNormal', sans-serif; /* Application de la police */
}

/* Style du header */
header {
    text-align: center;
    padding: 10px; /* Réduit le padding autour du texte */
    background-color: #fff; /* Fond blanc pour le header */
    border-bottom: 1px solid #ccc; /* Bordure inférieure pour séparer le header du contenu */
    width: 100%;
    box-sizing: border-box;
}

/* Style du titre et sous-titre */
header h1 {
    margin: 0;
    font-size: 2.5em; /* Augmente la taille du titre */
    color: #333; /* Couleur du texte */
}

header h2 {
    margin: 5px 0 0; /* Réduit la marge au-dessus du sous-titre */
    font-size: 1.5em; /* Augmente la taille du sous-titre */
    color: #666; /* Couleur du texte */
}

/* Conteneur principal pour centrer la grille */
.main-container {
    display: flex;
    flex-direction: column; /* Alignement vertical */
    align-items: center; /* Centre horizontalement */
    justify-content: center; /* Centre verticalement */
    flex: 1; /* Permet de remplir l'espace disponible */
    margin: 20px 0; /* Espace au-dessus et en-dessous de la grille */
    padding: 10px; /* Ajoute un padding interne */
    box-sizing: border-box;
    max-width: 100%; /* Assure que la largeur du conteneur est maximale */
    overflow: hidden; /* Empêche le défilement */
}

/* Style des conteneurs d'images */
.container {
    text-align: center;
}

/* Style principal de la grille */
.wrapper {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Trois colonnes égales */
    grid-template-rows: repeat(3, 1fr); /* Trois lignes égales */
    gap: 4px; /* Espacement uniforme entre les colonnes et les lignes */
    max-width: 100vw; /* Utiliser la largeur de l'écran */
    max-height: calc(100vh - 60px - 60px - 40px); /* Ajuste la hauteur en fonction de la hauteur de la fenêtre */
    box-sizing: border-box;
}

/* Style des images */
img {
    width: 100%;
    height: 100%; /* Prend toute la hauteur du conteneur */
    object-fit: cover; /* S'assure que l'image couvre entièrement le conteneur */
    cursor: pointer;
    border-radius: 4px; /* Coins arrondis plus petits pour un effet plus subtil */
    transition: transform 0.2s ease-in-out; /* Transition fluide pour les effets */
}

/* Animation de pulsation */
@keyframes pulse {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
    50% {
        transform: scale(1.1);
        box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }
}

/* Classe d'animation pour les images */
.animate {
    animation: pulse 0.3s ease-in-out;
}

/* Style du footer */
footer {
    text-align: center;
    padding: 15px; /* Augmente le padding pour donner plus d'espace autour du texte */
    background-color: #fff; /* Fond blanc pour le footer */
    border-top: 0px solid #ccc; /* Bordure supérieure pour séparer le footer du contenu */
    width: 100%;
    box-sizing: border-box;
    font-family: 'OrdinaireNormal', sans-serif; /* Application de la police au footer */
}

/* Style du texte dans le footer */
footer p {
    margin: 0;
    font-size: 16px; /* Augmente la taille de la police pour le texte dans le footer */
}

footer a {
    color: #007BFF; /* Couleur du lien */
    text-decoration: none; /* Retirer le soulignement par défaut */
}

footer a:hover {
    text-decoration: underline; /* Soulignement au survol */
}

/* Media Queries pour différentes tailles d'écran */

/* Écrans de téléphone (portrait) */
@media (max-width: 600px) {
    .wrapper {
        gap: 2px; /* Réduire l'espacement entre les images */
        height: auto; /* Pour les petits écrans, auto pour s'adapter */
    }
}

.text-zone {
    margin-top: 10px;
    text-align: center;
    padding: 15px; 
    background-color: #fff; /* Fond blanc pour la zone de texte */
    border-top: 1px solid #ccc; /* Bordure supérieure pour délimiter la zone */
    width: 100%; /* Assure que la zone de texte occupe toute la largeur */
    box-sizing: border-box;
}

.text-zone p {
    margin: 0; /* Évite les marges qui peuvent causer du défilement */
    font-size: 16px; 
}