/* Bouton du footer */

footer {
    position: relative; /* permet de positionner le bouton à l'intérieur du footer. Devient le parent de référence de position:absolute */
    min-height: 80px; /* Assure que le footer existe visuellement car le bouton en position absolute sort du flux de la page */
    padding: 20px; /* Ajoute de l'air, du confort visuel */
}

.button {
    position: absolute; /* se place par rapport à position: relative; et si absence, à toute la page */
    right: 20px;  /* distance du bord droit */
    bottom: 10px; /* distance du bas */
}

/* Mise en forme */

h2{
    color: #8844cc;
    font-weight: bold;
}

section{
    border: solid #8844cc;
    border-radius: 10px;
    padding: 20px;
    margin-bottom: 20px;
}

/* Partie Flex */

.flex {
    display: flex; /* Active Flexbox */
    flex-wrap: wrap; /* Permet aux images de passer à la ligne suivante */
    justify-content: center; /* Centre les images horizontalement */
    gap: 20px; /* Espace de 20px entre les images */
    max-width: 850px; /* Largeur max pour forcer 3 images par ligne */
    margin: 0 auto; /* Centre le conteneur */
}

.flex img {
    width: 250px; /* Largeur fixe */
    height: 250px; /* Hauteur fixe → images carrées */
    object-fit: cover; /* Recadre l'image pour remplir le carré sans déformation */
}

/* Partie Grid */

.grid {
    display: grid; /* Active CSS Grid */
    grid-template-columns: 340px 340px 340px; /* 3 colonnes de 340px chacune */
    grid-template-rows: 340px 340px; /* 2 lignes de 340px chacune */
    gap: 20px; /* Même espace entre les images que Flexbox */
    justify-content: center; /* Centre la grille horizontalement */
}

.grid img {
    width: 100%; /* Prend toute la largeur de sa cellule */
    height: 100%; /* Prend toute la hauteur de sa cellule */
    object-fit: cover; /* Recadre l'image sans déformation */
}

.grid img:nth-child(1) {  /* grid-1.jpg → en haut à gauche */
    grid-column: 1; /* Colonne 1 */
    grid-row: 1; /* Ligne 1 */
}

.grid img:nth-child(2) {  /* grid-2.jpg → au milieu sur 2 lignes */
    grid-column: 2; /* Colonne 2 */
    grid-row: 1 / 3; /* De la ligne 1 à 3 (occupe 2 lignes) */
}

.grid img:nth-child(3) {  /* grid-3.jpg → en haut à droite */
    grid-column: 3; /* Colonne 3 */
    grid-row: 1; /* Ligne 1 */
}

.grid img:nth-child(4) {  /* grid-4.jpg → en bas à gauche */
    grid-column: 1; /* Colonne 1 */
    grid-row: 2; /* Ligne 2 */
}

.grid img:nth-child(5) {  /* grid-5.jpg → en bas à droite */
    grid-column: 3; /* Colonne 3 */
    grid-row: 2; /* Ligne 2 */
}