body {
    background-color: #ffffff;
    font-family: Arial, sans-serif;
    margin: 0px;
    padding-top: 0px;   
}

h1 {
    color: #333;
    text-align: center;
}

h2 {
    color: #666;
}

a {
    color: #0066cc;
}

.container {
    max-width: 900px;
    margin: 0 auto;
}


/* Style pour la page index contenant la galerie d'images */


.gallery {                 /* conteneur de l ensemble des images        */
    margin-top: 20px;      /* Espace au-dessus du conteneur             */
    padding: 20px;         /* Espace interne optionnel                  */
    display: grid;         /* Utilisation du grid layout                */
    grid-template-columns: repeat(6, 1fr); /* 4 colonnes, chaque colonne prend 1/4 de l'espace horizontal du conteneur*/
    gap: 50px;             /* Espacement entre les conteneurs des images */
    justify-items: center;  /* Centrer les images dans leurs cases */
    align-items: end;      /* */
    /* border: 1px solid #000; */ /* afficher la bordure du conteneur */
    /*object-fit: contain; */
}

.gallery-title {            /* style pour le titre le conteneur gallery */
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}

/* Chaque figure devient une grille pour gérer image + figcaption */
.gallery figure {
    display: grid;
    justify-items: center; /* Centrer horizontalement */
    align-items: end;      /* Coller en bas */
    margin: 0;             /* Supprimer marges par défaut */
}


/* Images */
.gallery img {
    max-width: 100%;      /* Ne dépasse pas la largeur de la cellule */
    height: auto;         /* Garde les proportions */
    object-fit: contain;  /* Redimensionne sans couper l'image */
    display: block;
}



/* Style pour la description sous chaque image */
figcaption {
    text-align: center; /* Centrer la description sous l'image */
    font-style: italic;
    color: #666;
    margin-top: 10px; /* Espacement entre l'image et la description */
}

/* Style pour les images */

img {
    display: block;
    margin: 0 auto;
    max-width: 100%; /* Pour éviter que les images dépassent la largeur du conteneur */
    height: auto; /* Pour préserver les proportions */
    max-height: 600px;  /* Limite la hauteur maximale à 400px */
    object-fit: contain;  /* Maintient les proportions de l'image */
}

/* Style pour la barre de navigation */
.navbar {
    display: flex;
    justify-content: space-between; /* Permet de séparer les éléments à gauche et à droite */
    align-items: center; /* Aligne les éléments verticalement au centre */
    background-color: #333;
    padding-top: 10px;      /* haut */
    padding-bottom: 10px;   /* bas */
    padding-left: 20px;     /* gauche */
    padding-right: 20px;    /* droite */
}

.navbar .title {
    color: white;
    font-size: 1.5em;  /* Ajuste la taille du texte */
    font-weight: bold;
}

.navbar ul {
    display: flex; /* Pour que les éléments de menu s'affichent horizontalement */
    list-style: none;
    padding: 0;
    margin: 0;
}

.navbar ul li {
    margin-left: 20px; /* Espacement entre les éléments du menu */
}

.navbar ul li a {
    color: white;
    text-decoration: none;
    padding: 10px;
}

.navbar ul li a:hover {
    background-color: #575757; /* Change la couleur de fond au survol */
}




/* Style pour filigrane */

.image-container {
    margin-top: 30px;      /* Espace au-dessus de la galerie */
    padding: 20px;         /* Espace interne optionnel */
    position: relative;
    display: inline-block;
}

.image-large {
    max-width: 90%;
    max-height: 80vh;
    border: 5px solid black;
}



/* style description */

.description {
    margin-top: 25px;
    font-size: 18px;
    font-style: italic;
    color: #444;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}


/* styles pour la page individuelle d'une image  */

body.image-page {
    margin: 0;
    padding: 20px;
    display: flex;
    justify-content: flex-start; /* alignement vertical depuis le haut */
    align-items: center;         /* centré horizontalement */
    flex-direction: column;      /* les éléments s’empilent verticalement */
    text-align: center;
    min-height: 100vh;           /* au moins toute la hauteur de la page */
    gap: 20px;                   /* espace entre les éléments */
}

.page-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center; /* centre tout horizontalement */
    width: 100%;
    max-width: 1000px;
}


.back-button {
    display: inline-block;
    margin-bottom: 20px;
    padding: 10px 20px;
    background: #333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}


.content-wrapper-title {            /* style pour le titre du content-wrapper */
    text-align: center;
    font-size: 24px;
    margin-top: 20px;
    margin-bottom: 10px;
    font-weight: bold;
}
.content-wrapper {
    display: flex;
    justify-content: space-between;  /* espace entre les deux blocs */
    align-items: flex-start;         /* alignement en haut */
    margin: 20px;
}

.image-container-left {
    flex: 1;               /* colonne gauche */
    margin-right: 20px;    /* espace avec la description */
    margin-top: 30px; 
    position: relative;
    max-width: 100%;
    max-height: 80vh;
}

.description-right {
    flex: 1;               /* colonne droite */
    margin-top: 30px; 
}

.image-container_foo {
    position: relative;
    max-width: 100%;
    max-height: 80vh;
}

.image-large {
    max-width: 100%;
    max-height: 80vh;
    border: 5px solid black;
    box-sizing: border-box;
}


/* fin page 2 */