/* Reset de base et styles généraux */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}


body {
    font-family: 'Dancing Script', cursive;
    line-height: 1.6;
    color: #333;
    background-color: #f4f4f4;
}

.logo-container {
    display: flex;
    align-items: center;
}

.logo {
    height: 35px; /* Ajuste selon la taille souhaitée */
    width: auto;
}

#lightbox .close {
    font-family: 'Dancing Script', cursive; /* Remplacez par le nom de votre police */
    /* Ajoutez d'autres styles si nécessaire */
}
#lightbox-like-button {
        background: transparent !important;
    transition: transform 0.3s ease; /* Transition fluide pour l'agrandissement */
}

#lightbox-like-button:hover {
 transform: scale(1.5); /* Augmente la taille du bouton de 50% au survol */
}

#lightbox-close{
color:white;
    margin-bottom:3px;
}

.like-button {
    font-size: 24px;
    color: blue;
    cursor: pointer;
    padding:0px;
    margin:5px;
}

.text{
    font-size:20px;
}

#projets{
    padding-top:80px;
    padding-left:30px;
}
/* ******************** */
/* Header et navigation */
/* ******************** */
#accueil{
    height:100vh;
}
header {
    background-color: #000000;
    color: #fff;
/*    padding: 1rem 0;*/
    position: fixed;
    width: 100%;
    top: 0;
    padding-bottom: 5px;
    z-index: 1000;
    display: flex;
    align-items: center; /* Aligne tout sur la même ligne */
    justify-content: flex-start; /* Évite l'éloignement entre le menu et le logo */
    padding-left: 20px; /* Ajuste l'espacement du début */
    padding-right: 20px; /* Ajuste l'espacement de fin */
}

.burger-icon {
    height: 25px;
    width: 25px;
    cursor: pointer;
    margin-right: 15px; /* Ajoute un petit écart entre le burger et le logo */
}

.logo {
    height: 40px; /* Ajuste la taille du logo si nécessaire */
}

.nav {
    display: block;
    z-index: 10;
    margin-left: auto; /* Force le menu à coller à droite */
}

nav ul {
    gap: 15px;
    display: flex;
    justify-content: center;
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 10;
}

nav ul li {
    margin: 0 10px;
    position: relative;
    text-align: center;
    z-index: 10;
}

nav ul li a {
    z-index:10;
    color: #fff;
    text-decoration: none;
    font-weight: bold;
    padding: 0px 15px;
    border: 2px solid transparent; /* Bordure transparente par défaut */
    border-radius: 10px;
    transition: all 0.3s ease;
    display: block;
    text-decoration: none; /* Supprime la soulignure par défaut */
    border-bottom: 2px solid transparent; /* Bordure inférieure transparente */
    border-bottom: 2px solid #ffcc00;
}

nav ul li a:hover {
    color: #ffcc00; /* Changement de couleur au survol */
/*    text-decoration: underline;  Soulignement au survol */
    border-color: #ffcc00; /* Changer la couleur de la bordure au survol */
    border: 2px solid #fff; /* Ajout d'une bordure */
    border-radius: 10px; /* Bordure arrondie */
/*    transition: all 0.3s ease;*/
}

.nav.active {
    display: block; /* Afficher le menu lorsque la classe active est ajoutée */
}

.menu-toggle {
    display: flex;
    flex-direction: column;
}




#titre_master{
    color:black;
}

.compteur-visites{
    margin-left:20px;
}
.overlay {
    position: absolute; /* Positionnement absolu pour superposer le texte */
    top: 60px; /* Positionner à 20 pixels du haut */
    right: 40px; /* Positionner à 20 pixels de la droite */
    color: black; /* Couleur du texte */
    text-align: left; /* Alignement du texte à gauche */
    z-index: 1; /* S'assurer que le texte est au-dessus de l'image */
}
.overlay_under {
    position: absolute; /* Positionnement absolu pour superposer le texte */
    bottom: 20px; /* Positionner à 20 pixels du haut */
    right: 30px; /* Positionner à 20 pixels de la droite */
    color: white; /* Couleur du texte */
    text-align: left; /* Alignement du texte à gauche */
    z-index: 1; /* S'assurer que le texte est au-dessus de l'image */
}

.overlay h1 {
    color:white;
    font-size: 4rem; /* Taille du titre */
    margin: 0; /* Supprimer les marges */
}

.overlay p {
    font-size: 1.5rem; /* Taille du texte de description */
    margin: -15px 0 0 0; /* Ajouter un peu d'espace au-dessus du texte */
}

/* ******************** */
/* ****** Burger ****** */
/* ******************** */

.burger-icon {
    height: 25px;
    width:25px;
    margin-left: 20px;
    display: none; /* Masquer le sous-menu par défaut */
}

nav ul li:hover > ul {
    display: block; /* Afficher le sous-menu au survol */
}


/* Main content */
main {
    margin: 0; /* Supprimez la marge par défaut du body */
/*    max-width: 1200px;*/
/*    margin: 80px auto 0;*/
}


h1, h2 {
    margin-bottom: 20px;
    color: #333;
}

/* ******* */
/* Accueil */
/* ******* */
#accueil {
    text-align: center;
    background-image: url('../images/structure/thumbnail_DSC_0166b%20site.jpg');
    background-attachment: fixed; /* L'image d'arrière-plan reste fixe */
    background-size: cover; /* Couvre tout le conteneur */
    background-position: center center; /* Centre l'image horizontalement et verticalement */
    background-repeat: no-repeat; /* Empêche la répétition de l'image */
}

/* compteur */

#visites {
    text-align: center;
    margin: 20px 0;
    font-size: 1.2em;
    color: #333;
}

/* ******* */
/* Galerie */
/* ******* */
#galerie {
    padding-top: 20px;
    text-align: center;
    clear: both; /* Pour éviter le chevauchement avec d'autres éléments */
/*    margin-bottom: 150px;*/
}

.filter-buttons {
    margin-bottom: 20px;
}

.filter-btn {
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    background-color: #000;
    color: #fff;
    border: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.filter-btn:hover {
    background-color: #ffcc00;
}

.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    grid-gap: 15px;
    justify-items: center;
    padding: 20px; /* Ajout d'un padding pour centrer la grille */
    min-height:461px;
}



.image-container {
    width: 100%;
    height: 300px; /* Hauteur fixe pour l'image */
    overflow: hidden; /* Empêche le dépassement de l'image */
    border-radius: 10px;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Remplit l'espace tout en conservant les proportions */
    transition: transform 0.3s ease, filter 0.3s ease;
    filter: brightness(90%);
}

.image-container img:hover {
    transform: scale(1.1); /* Zoom sans changer la taille du conteneur */
    filter: brightness(100%);
}

.gallery-item {
    position: relative;
    width: 100%;
    max-width: 400px;
    text-align: center;
    border-radius: 10px;
}


.gallery-item p {
    margin-top: 10px;
    font-size: 22px; /* Augmente la taille de la police */
    color: #333;
    font-weight: bold;
}

a {
    text-decoration: none; /* Enlève le soulignement bleu des liens */
    color: inherit; /* Garde la couleur du texte naturelle */
}

a:hover {
    color: #ffcc00; /* Optionnel : ajoute une couleur au survol si désiré */
}

.lightbox-section {
    margin-top:20px;
    display: flex; /* Utilise flexbox pour centrer le contenu */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    padding-top:50px;
    padding-bottom:50px;
    background-color: rgba(0, 0, 0, 0.8); /* Ajoute un fond sombre avec transparence */
}

.lightbox-container {
    position: relative;
/*    max-width: 800px;  Ajustez la largeur maximale de la lightbox */
/*    max-height: 80%;  Ajustez la hauteur maximale de la lightbox */
    overflow: hidden; /* Masque tout débordement */
/*    display: flex;*/
    justify-content: center;
    align-items: center;
}

.lightbox-image {
    max-width: 100%; /* Largeur maximale de l'image */
    max-height: 100%; /* Hauteur maximale de l'image */
}


.close {
    background-color: black; /* Fond blanc avec transparence */
    border: none;
    font-size: 1.2em; /* Taille du texte */
    cursor: pointer;
    padding: 10px 20px; /* Espace autour du texte */
    border-radius: 5px; /* Coins arrondis */
    align-items: center; 
}


.prev, .next {
    position: absolute;
    top: 0; /* Positionne le haut des boutons au sommet de la lightbox */
    bottom: 0; /* Positionne le bas des boutons au bas de la lightbox */
    width: 100px; /* Augmente la largeur des boutons */
    background-color: black; /* Fond noir avec transparence */
    color: white; /* Couleur du texte en blanc */
    border: none;
    font-size: 3em; /* Augmente la taille des flèches */
    cursor: pointer;
    z-index: 10; /* Assure que les flèches sont au-dessus de l'image */
    display: flex; /* Utilisation de flexbox pour centrer le contenu */
    align-items: center; /* Centre verticalement le contenu du bouton */
    justify-content: center; /* Centre horizontalement le contenu du bouton */
}

.prev {
    left: 0; /* Positionne à gauche */
}

.next {
    right: 0; /* Positionne à droite */
}


.prev, .next {
    box-shadow: 0 2px 10px black; /* Ombre pour les flèches */
}

#lightbox-likes-count {
    color: white !important; /* Changez la couleur du texte en blanc */
    margin-top: 10px; /* Ajoutez un peu d'espace au-dessus du compteur de likes */
    font-size: 1.2em; /* Augmentez la taille du texte pour qu'il soit plus visible */
    text-align: center; /* Centre le texte */
}

/*
canvas {
    position: fixed;
    top: -80;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
*/

/* À propos */
#a-propos {
    padding-top: 0px;
    padding-left:80px;
    padding-right:80px;
    text-align: center;
    padding-top: 30px;
    padding-bottom: 20px;
/*    margin-top: -60px; */
/*    margin-top: 20px;  Ajoute un espacement entre la section galerie et à propos */
    background-color: #fff;
/*    padding: 30px;*/
/*    border-radius: 8px;*/
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
/*    background-color: grey;  Une couleur de fond légère */
    
/*    margin: 100px 0;  Ajoute un espacement vertical autour de la section */
    
}

#a-propos-texte {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 20px;
}

#photo-container {
    width: 40%;
    display: flex;
    justify-content: flex-start; /* Place l'image à gauche */
}

#petit_texte {
    width: 60%; /* Texte prend 60% de l'espace disponible */
}

.profile-photo {
    border-radius: 50%; /* Cercle l'image */
    border: 5px solid black; /* Bordure noire */
    width: 250px; /* Taille ajustée pour l'image */
    height: 250px; /* Même taille que la largeur pour garder le cercle */
    object-fit: cover;
}
#a-propos h2 {
    font-size: 1.5em; /* Ajuste la taille du titre */
    margin-bottom: 10px; /* Ajoute de l'espace sous le titre */
}

/* photo projets*/

.projet-container {
    display: flex;                  /* Utilisation de flexbox pour un alignement horizontal */
    justify-content: space-between; /* Espace entre le texte et les images */
    align-items: flex-start;        /* Aligne les éléments au début du conteneur */
}

.h1_projet {
    text-decoration: none; /* Retirer le soulignement standard */
    position: relative;    /* Nécessaire pour le positionnement de l'ombre */
    padding-top:20px;
}

.h1_projet::after {
    content: "";                          /* Ajoute un pseudo-élément */
    position: absolute;                   /* Positionnement absolu */
    left: 0;                              /* Aligne à gauche */
    bottom: -5px;                         /* Décalage vers le bas */
    height: 3px;                          /* Épaisseur du soulignement */
    width: 330px;                          /* Prend toute la largeur du texte */
    background-color: orange;             /* Couleur du soulignement */
    z-index: -1;                          /* En dessous du texte */
}

.projet_text {
    width: 50%;                     /* Définit une largeur pour le texte */
    padding-right: 30px;           /* Espace entre le texte et les images */
    text-align: justify;            /* Justifie le texte */
    min-height: 400px;              /* Hauteur minimale pour le texte */
}

.projet_photos {
    display: grid;    
    padding-right:30px;/* Utilisation de grid pour l'agencement des images */
    grid-template-columns: repeat(2, 1fr); /* Définit une grille de 2 colonnes */
    gap: 10px;                     /* Espace entre les images */
    width: 50%;                     /* Assurez-vous que la largeur est égale à celle du texte */
}

.projet_photos img {
    width: 100%;                    /* Les images prennent toute la largeur de la cellule */
    height: 250px;                  /* Hauteur augmentée pour toutes les images */
    object-fit: cover;              /* Assure que l'image couvre le conteneur sans déformation */
    border-radius: 8px;            /* Ajoute des coins arrondis si souhaité */
}

@media (max-width: 1000px) {
    .projet-container {
        flex-direction: column; /* Change la direction des éléments en colonne */
        align-items: flex-start; /* Aligne le texte au début */
    }

    .projet_text {
        width: 100%; /* Le texte prend toute la largeur */
        padding-right: 30px; /* Enlève le padding droit */
/*        padding*/
        margin-bottom: 20px; /* Ajoute un espace entre le texte et les photos */
    }

    .projet_photos {
        width: 100%; /* Les photos prennent toute la largeur */
        grid-template-columns: repeat(2, 1fr); /* Garde la grille 2x2 pour les petits écrans */
    }
}

@media (max-width: 450px) {
    .projet_photos {
        grid-template-columns: 1fr; /* Une seule colonne pour les petits écrans */
    }

    .projet_photos img {
        height: auto; /* Assurez-vous que la hauteur des images s'adapte automatiquement */
        max-height: 300px; /* Limite la hauteur des images pour ne pas dépasser une certaine taille */
    }
}
/* Contact */
#contact {
/*    padding-top: 0px;*/
    padding-left: 20px;
    padding-right: 20px;
    text-align: center;
    padding-top: 60px;
    padding-top: 20px;
    padding-bottom:20px;
/*    margin-top: -60px; */
/*    background-color: #f9f9f9;*/
/*    padding: 30px;*/
/*    border-radius: 8px;*/
}


#contact {
    text-align: center; /* Centre le texte */
        background-color: black; /* Définit le fond noir */
    color: white; /* Change la couleur du texte en blanc pour le contraste */
/*    margin: 40px 0;  Ajoute de l'espacement autour de la section */
/*    margin-bottom: 20px;*/
}


#contact h2{
    color:white;
}

#contact-form {
    display: inline-block; /* Permet de centrer le formulaire */
    max-width: 400px; /* Limite la largeur du formulaire */
    width: 100%; /* Prend toute la largeur disponible */
}

.form-group {
    margin-bottom: 15px; /* Espacement entre les champs du formulaire */
}

label {
    display: block; /* Affiche le label sur une nouvelle ligne */
    margin-bottom: 5px; /* Ajoute de l'espacement sous le label */
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%; /* Prend toute la largeur du conteneur */
    padding: 10px; /* Ajoute de l'espacement intérieur */
    border: 1px solid #ccc; /* Bordure grise */
    border-radius: 5px; /* Coins arrondis */
}

button {
    background-color: black;  
    color: white; /* Couleur du texte */
    padding: 10px 15px; /* Espacement intérieur du bouton */
    border: none; /* Supprime la bordure */
    border-radius: 5px; /* Coins arrondis */
    cursor: pointer; /* Change le curseur au survol */
}

button:hover {
    /* background-color: black; */ /* Décommente si tu veux changer la couleur */
    transform: scale(1.1); /* Agrandit le bouton au survol */
    transition: transform 0.5s; /* Animation fluide */
}



/* Footer */
footer {
    background-color: #000;
    color: #fff;
    text-align: center;
/*    margin-top:30px;*/
    padding: 10px 0;
    position: relative;
    bottom: 0;
    width: 100%;
}

/* slider*/
.slider {
    position: relative;
    max-width: 800px; /* Ajustez la largeur selon vos besoins */
    margin: auto;
    overflow: hidden; /* Masque le contenu qui dépasse */
}

.slider-images {
    display: flex;
    transition: transform 0.5s ease; /* Animation lors du changement d'image */
}

.slider-item {
    min-width: 100%; /* Chaque image occupe 100% de la largeur du slider */
}

.slider img {
    width: 100%; /* Les images s'adaptent à la largeur du slider */
    border-radius: 10px; /* Optionnel : arrondir les coins des images */
}

button.prev, button.next {
    position: absolute;
    top: 85%;
    transform: translateY(-50%);
    background-color: black; /* Changez la couleur de fond en noir */
    color: white; /* Assurez-vous que le texte reste en blanc */
    border: none;
    cursor: pointer;
    padding: 10px;
    z-index: 1; /* Assurez-vous que les boutons sont au-dessus du slider */
}

button.prev {
/*    left: 20%;  Positionnez le bouton précédent à gauche */
    left:50px !important;
}

button.next {
/*    right: 20%;  Positionnez le bouton suivant à droite */
    right:50px !important;
}


/* notation des photos */

.rating {
    cursor: pointer;
}

.rating span {
    font-size: 20px; /* Ajustez la taille des étoiles */
    color: grey; /* Couleur par défaut des étoiles */
}

.rating span:hover,
.rating span:hover ~ span {
    color: gold; /* Couleur des étoiles survolées */
}

.rating span.selected,
.rating span.selected ~ span {
    color: gold; /* Couleur des étoiles sélectionnées */
}

/* page galerie */

#theme-recherche{
    padding:50px;
    width:30%;
}

#search{
    margin-bottom:20px;
}

#suggestions {
            display: none; /* Masquer les suggestions par défaut */
            margin-top: 5px;
        }
.suggestion {
    cursor: pointer;
    display: block;
    padding: 5px;
    background-color: #f0f0f0;
    border: 1px solid #ccc;
}
.suggestion:hover {
    background-color: #e0e0e0; /* Change la couleur au survol */
}


#main-content{
    padding:20px;
}

.gallery-container{
    padding-top:70px !important;
    
}


/* nouvelle section */
.custom-gallery-section {
    background-image: url('../images/structure/DSC_0185_night_5.png');
    min-height: 600px;  
    display: flex;
    flex-direction: column; /* Organise les éléments en colonne */
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: flex-start; /* Aligne les éléments en haut */
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 20px; /* Ajustez pour créer un espace en haut si nécessaire */
}

.button-container {
    padding-top:40px;
    display: flex;
    justify-content: center;
    gap: 10px; /* Espace entre les boutons */
    margin-bottom: 20px; /* Crée un espace sous les boutons */
}

.custom-gallery-grid {
    display: flex; /* Utiliser flex pour la grille */
    height:600px;
    flex-wrap: wrap; /* Permettre le passage à la ligne si nécessaire */
    justify-content: center; /* Centre les éléments de la grille */
}

.custom-gallery-item {
    width: 200px; /* Ajustez la largeur des images selon vos besoins */
    height: auto; /* Maintient l'aspect ratio des images */
    margin: 10px; /* Ajustez l'espacement autour des éléments */
}

.custom-gallery-item img {
/*    background-attachment: fixed;  L'image d'arrière-plan reste fixe */
    background-size: cover; /* Couvre tout le conteneur */
    background-position: center center; /* Centre l'image horizontalement et verticalement */
    width: 100%; /* Assure que l'image prend toute la largeur de l'élément */
    height: 720px; /* Hauteur fixe pour l'image */
    
    object-fit: cover; /* Remplit l'espace tout en conservant le ratio de l'image */
    display: block; /* Évite l'espace sous l'image */
    margin: auto; /* Centre l'image si nécessaire */
}

.bouquetin_2_fond {
    position: fixed; /* Position fixe pour l'image de fond */
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
/*    background-image: url('chemin/vers/votre/image_de_fond.png');  Remplacez par le chemin de votre image */
    background-size: cover;
    background-position: center;
    z-index: -1;
}

.bouquetin_2_fond::before {
    content: ""; /* Crée un pseudo-élément */
    position: fixed; /* Positionne l'image de fond */
    top: 0; /* Positionné en haut */
    left: 0; /* Positionné à gauche */
    width: 100%; /* Prend 100% de la largeur */
    height: 1600px; /* Prend 100% de la hauteur */
    background-image: url('../images/structure/back.webp'); /* Remplacez par le chemin de votre image de fond */
    background-size: cover; /* Ajuste l'image pour couvrir tout l'élément */
    background-position: center; /* Centre l'image */
    z-index: -1; /* Met l'image de fond derrière le contenu */
}

.category-button {
    padding: 10px 20px;
    background-color: black;
    color: white;
    text-decoration: none;
    width: 150px;
    border-radius: 5px;
    transition: background-color 0.3s ease, border 0.3s ease;
    border: 2px solid transparent; /* Ajout d'une bordure transparente par défaut */
}

.category-button:hover {
    background-color: black;
    border: 2px solid orange; /* Bordure orange au survol */
}

/* Styles pour l'animation */
.fade-in {
    opacity: 0; /* Initialement transparent */
    transform: translateY(20px); /* Déplace légèrement vers le bas */
    transition: opacity 3s ease, transform 3s ease; /* Transition pour l'animation */
}

.fade-in.visible {
    opacity: 1; /* Rendre visible */
    transform: translateY(0); /* Retourne à sa position d'origine */
}

/* Container pour les options de thème */
.theme-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
    margin-top: 10px;
}

/* Style des options individuelles */
.theme-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform 0.3s ease;
    width: 100px; /* Taille uniforme pour chaque option */
    height: 130px; /* Hauteur fixe */
}

/* Permet de garder toutes les zones identiques */
.theme-option:hover {
    transform: scale(1.1);
}

/* Conteneur d'image pour forcer une taille uniforme */
.theme-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Garde le ratio et ajuste l’image */
}

.theme-selector {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

/* Bordure orange pour l'option sélectionnée */
.theme-option.selected .theme-image {
    border-color: orange;
}


@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

#bloc-note-back {
    margin-top:50px;
    background-color: #000000; /* Fond noir */
/*    font-family: 'Arial', sans-serif;*/
    position:relative;
    padding: 0;
    color: #fff;
    padding-top: 40px;
    border-radius: 10px; /* Arrondir les coins */
}

.answer {
    margin-left: 2rem;
}

.bloc-note-container ul {
    list-style-type: none; /* Retire les puces par défaut */
/*    padding-left: 20px;*/
}

.bloc-note-container ul li:before {
    padding-left: 20px;
    content: "- ";
    margin-right: 5px;
}

/*
.bloc-note-container {
    animation: fadeIn 1s ease;
    position: relative;
    overflow: hidden;  Assure que l'animation n'affecte pas la mise en page 
}
*/

 .bloc-note-container {
            top:60px;
            background-color: #F7F6F2; /* Fond blanc cassé, comme l'app Notes */
            width: 100%;
/*            height: 100vh;  Prend toute la hauteur de l'écran */
            max-width: 800px;
            margin: 0 auto;
/*            padding-top: 70px;*/
/*            position: ;*/
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            border-radius: 10px;
            padding-bottom:50px;
        }

        .bloc-note-header {
            border-radius: 10px; /* Arrondir les coins */
    height: 40px;
            font-size:25px;
    background-color: #ffcc00;
/*    font-weight: bold;*/
    text-align: center;
    color: #333;
/*    text-transform: uppercase;*/
    
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre le texte horizontalement */
    align-items: center; /* Centre le texte verticalement */
}

        /* Ajout des lignes d'écriture pour imiter un cahier */
        .bloc-note-content {
    padding: 10px;
/*    background-color: #FFF;   Fond blanc pour un meilleur contraste */
/*    height: calc(100% - 60px);*/
/*    font-family: 'Dancing Script', cursive;*/
    font-size: 18px;
    line-height: 1.8;
    color: #333;
    border-radius: 5px;
/*    border-top: 2px solid #ddd;*/
    position: relative; /* Nécessaire pour que les lignes se positionnent bien */
    z-index: 1; 
/*    margin-bottom:50px;*/
}

        .bloc-note-content::before {
    content: '';
    display: block;
    height: 100%;
/*    background: repeating-linear-gradient(to bottom, rgba(204, 204, 204, 0.5) 0, rgba(204, 204, 204, 0.5) 1px, transparent 1px, transparent 30px);  Lignes horizontales avec moins de transparence */
    position: absolute;
    top: 0.1;
    left: 0;
    width: 100%;
    z-index: -1; /* Assure que les lignes sont derrière le texte */
}

        .bloc-note-content p {
            margin: 15px 0;
            padding-left: 10px;
        }

        .bloc-note-footer {
            text-align: right;
            font-size: 14px;
            color: #888;
            position: absolute;
            bottom: 20px;
            right: 20px;
        }

        .note-add-button {
            display: block;
            margin: 20px auto;
            padding: 12px 25px;
            background-color: #4CAF50;
            color: white;
            font-size: 18px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            transition: background-color 0.3s;
        }

        .note-add-button:hover {
            background-color: #45a049;
        }

        /* Animation d'apparition */
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }

        .bloc-note-container {
            animation: fadeIn 1s ease;
        }

/* Graphique */

/*
.graphique {
    margin: 20px 0;
    margin-top:100px;
    padding: 10px;
    background-color: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
*/

/* Pokédex */
.pokedex-gallery {
    margin-top:50px;
    text-align: center;
    padding: 20px;
    background-color: #f5f5f5;
}

.gallery {
    display: grid;
    grid-template-columns: repeat(6, 1fr); /* 6 colonnes au lieu de 5 */
    gap: 15px;
    justify-items: center;
}

.animal {
    background-color: #ffffff;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    border: 3px solid transparent;  
}

.animal:hover {
    transform: scale(1.1);
}


.animal img {
    width: 150px;  /* Largeur de l'image */
    height: 150px; /* Hauteur de l'image */
    object-fit: contain; /* Maintient le ratio d'aspect sans déformation */
    margin-bottom: 5px;
}
.animal p {
    margin: 0;
    font-size: 0.9rem;
    font-weight: bold;
}

.animal {
    background-color: transparent;
    padding: 10px;
    border-radius: 10px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
    width: 200px;  /* Définir une largeur fixe */
    /* Retirer le cadre en utilisant border transparent */
}
/* fonction recherche */

.search-section {
/*    margin-left: 30px;*/
    display: flex;
    align-items: center;
    margin-top:20px;
}

.search-section h2 {
    padding-top: 10px;
}

.search-section input {
    width: 200px;
}

#suggestions {
    display: block;
}

/* Galerie responsive */
/*
.gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
*/

.animal img {
    width: 100%;
    height: auto;
    border-radius: 10px; /* Ajuste la valeur pour plus ou moins d'arrondi */
}


#lightbox-exif-info{
    color: white;
    margin: 10px auto;
    font-size: 1em;
    width: 30%;
    text-align: center;
}

@media (max-width: 900px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
    /* À propos */
    #a-propos {
        padding-left:20px;
        padding-right:20px;
    }
    
    #a-propos-texte {
        flex-direction: column; /* Les éléments s'empilent verticalement */
        align-items: center; /* Centre les éléments */
    }

    #photo-container {
        width: 100%; /* La photo prend 100% de la largeur */
        display: flex;
        justify-content: center; /* Centre l'image sur la page */
        margin-bottom: 20px; /* Ajoute un espace entre la photo et le texte */
    }

    #petit_texte {
        width: 100%; /* Le texte prend également toute la largeur */
        text-align: center; /* Centrer le texte pour une meilleure lisibilité */
    }

    .profile-photo {
        width: 200px; /* Taille légèrement plus petite sur mobile */
        height: 200px; /* Garder la taille égale pour le cercle */
    }
}


@media (max-width: 1300px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: 20px;
    }
}

@media (max-width: 1120px) {
    .gallery {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 20px;
    }
}


@media (max-width: 900px) {
    
    .gallery {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
    
    
    
    
}




@media (max-width: 870px) {
    header {
/*    padding-bottom:16px;*/

    }
    
    header {
        flex-direction: row;
    }

    .logo-container {
        margin-left: auto; /* Pousse le logo à droite */
    }
    
    #lightbox-exif-info{
        width: 50%;
    }
    
    button.prev, button.next {
        top: 95%;
    }
    
    .lightbox-section {
        padding-top: 0px;
    }
    
     #titre_master {
        margin-left: 30px;  /* Exemple de marge à gauche */
        margin-right: 30px; /* Exemple de marge à droite */
        margin-top: 20px;   /* Exemple de marge en haut */
        margin-bottom: 20px; /* Exemple de marge en bas */
        font-size: 36px; /* Réduit la taille de la police sur mobile */
    }
    
    #welcome {
        margin-left: 30px;  /* Exemple de marge à gauche */
        font-size: 24px; /* Réduit la taille de la police sur mobile */
    }
    
    /* Par défaut, la navigation est invisible mais reste dans le flux */
    nav {
        height: 0;
        overflow: hidden;
        transition: height 0.5s ease-in-out;
        position: absolute;
        top: 56px;
        left: 0;
        width: 100%;
        background-color: #000;
        z-index: 1;
    }

    /* Quand on active le menu, on ajuste la hauteur */
    .nav.active {
        height: 440px; /* Ajuste selon le nombre d'éléments */
    }

    /* Correction : on ne met pas display: none pour permettre l'animation */
    .nav ul {
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .nav ul li {
        margin: 10px 0;
        text-align: center;
    }

    /* Affichage du menu burger */
    .burger-icon {
        display: block;
        cursor: pointer;
    }

    
    /* Ajustements pour le menu burger */
    .menu-toggle {
        display: flex;
        flex-direction: column;
            align-items: left;
        justify-content: center;
    }

    .burger-icon {
        height: 25px;
        width: 25px;
        margin-left: 20px;
        cursor: pointer;
    }
        .button-container {
        flex-direction: column; /* Dispose les boutons en colonne */
        align-items: center; /* Centre les boutons horizontalement */
    }

    .search-section {
        flex-direction: column; /* Place les éléments en colonne */
        align-items: flex-start;
    }
    
    .filter-btn {
        width: 100%; /* Les boutons prennent toute la largeur disponible */
        text-align: center; /* Centre le texte des boutons */
    }
    
    .gallery {
        grid-template-columns: repeat(2, 1fr);
    }
    
}

@media (max-width: 480px) {
    .gallery {
        grid-template-columns: 1fr;
    }
}
