/* Style de base pour le header */
header {
    display: flex;
    align-items: center;
    /*background-image: url('images webp/Visuels_noel/snow.png');*/
    background-repeat: no-repeat;
    background-position: right;
    /*background-size: 1610px 290px;*/
    background-size: 2000px 330px;
    color: black;
    padding: 20px;
    position: relative;
}

.overlay-image {
    position: absolute; /* Permet de superposer l'image */
    top: 40px; /* Ajuste selon tes besoins */
    left: 88%; /* Centre horizontalement */
    transform: translateX(-50%); /* Centre précis */
    max-width: 250px; /* Ajuste la taille de l'image */
    z-index: 1; /* Place l'image au-dessus du contenu */
}

.header-content {
    z-index: 2; /* Assure que le contenu reste au-dessus de l'image de fond */
    color: black; /* Couleur du texte */
}

/* Style pour l'image du logo à gauche dans le header */
header img.logo {
    max-width: 280px;
    margin-right: 20px;
}

/* Style pour le contenu à droite */
.header-content {
    flex-grow: 1;
}

/* Style pour le titre */
.lilita_titre {
    font-family: 'Lilita One', sans-serif;
    color: #E71D73;
    font-size: 3.5em;
    text-align: center;
    margin-top: 15px;
    margin-bottom: 5px;
    flex-grow: 1;
}

.lilita_titre_2 {
    font-family: 'Lilita One', sans-serif;
    color: #000000;
    font-size: 2em;
    text-align: left;
    margin-top: -9px;
    margin-bottom: 5px;
    flex-grow: 1;
}

.montessori {
    font-family: 'Comic Sans MS', sans-serif;
    color: #36A9E1;
    text-align: center;
    margin-top: 0;
    flex-grow: 1;
}

.spaced-line {
    margin-bottom: 10px;
}


.special-paragraph {
    font-size: 1.20em;
    line-height: 1.4;
}

.special-paragraph-3 {
    font-size: 2em;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 20px;
    margin-top: -40px;
}

.paragraph-titre {
    font-size: 1.5em;
}


/* Style pour la navigation */

.desktop-menu {
    display: flex; /* Affiche le menu en ligne */
    margin-top: 33px;
    font-family: 'Comic Sans MS', sans-serif;
    font-size: 1.5em;
    border-bottom: 2px solid #E71D73;
    padding-bottom: 10px;
    width: 100%
}

.desktop-menu ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex; /* Alignement en ligne */
    flex-direction: row;
}

.desktop-menu li {
    display: inline;
    margin-right: 15px;
}

.desktop-menu ul li a {
    color: black;
    text-decoration: none;
}

.desktop-menu ul li a.active {
    color: #E71D73;
}

/* Styles pour le sous-menu */
.desktop-menu ul li {
    position: relative; /* Nécessaire pour le positionnement du sous-menu */
}

.desktop-menu .dropdown {
    display: none; /* Masque le sous-menu par défaut */
    position: absolute; /* Positionne le sous-menu par rapport à l'élément parent */
    top: 100%; /* Positionne le sous-menu juste en dessous du menu principal */
    left: 0; /* Aligne le sous-menu à gauche du parent */
    background-color: white; /* Couleur de fond du sous-menu */
    border: 1px solid #E71D73; /* Bordure pour le sous-menu */
    border-radius: 5px; /* Arrondir les bords du sous-menu */
    z-index: 1; /* Assure que le sous-menu soit au-dessus des autres éléments */
    opacity: 0.9; /* Ajuste la valeur de 0 (totalement transparent) à 1 (opaque) */
}

.desktop-menu ul li:hover .dropdown {
    display: block; /* Affiche le sous-menu au survol */
}

.desktop-menu .dropdown li {
    display: block; /* Chaque élément du sous-menu s'affiche en bloc */
}

.desktop-menu .dropdown li a {
    display: block;
    padding: 10px 15px; /* Espacement autour des liens du sous-menu */
    color: black; /* Couleur du texte */
    text-decoration: none; /* Enlève le soulignement */
    font-size: 0.8em;
    white-space: nowrap; /* Empêche le texte de passer à la ligne suivante */
    width: 100%; /* S'assure que l'élément prenne toute la largeur */
    box-sizing: border-box; /* Assure que le padding soit inclus dans la largeur totale */
}

.desktop-menu .dropdown li a:hover {
    background-color: #E71D73; /* Couleur de fond au survol du lien du sous-menu */
    color: white; /* Couleur du texte au survol du lien */
}

/* Styles pour le bouton burger */
.burger-menu {
    display: none;
    cursor: pointer;
    font-size: 2em;
    background: none;
    border: none;
    padding: 5px;
}

/* Style pour le pied de page */
footer {
    text-align: center;
    padding: 15px;
    background-color: #333;
    color: white;
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 30px;
    line-height: 1px;
}

/*Style pour le menu de gauche et les sections*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Conteneur principal en Flexbox */
.container {
    display: flex;
    min-height: 100vh;
}

/* Style pour la colonne de gauche (sidebar) */
.sidebar {
    width: 274px;
    background-color: #ffffff;
    padding: 25px;
    padding-top: 15px;
    flex-shrink: 0px;
}

.sidebar h3 {
    margin-left: 13px; /* Ajuste la valeur pour aligner selon ton besoin */
}

/* Style pour le contenu principal */
.main-content {
    flex-grow: 1;
    padding: 20px;
    margin-left: 2px;
    margin-top: 0px;
    background-color: #ffffff;
    display: block;
}

section {
    padding: 25px;
    width: 100%;
    margin: 0;
    margin-top: -20px;
    margin-bottom: 30px;
    /* background-color: #faeede; */
    background: linear-gradient(to top, #bfbfbf, #ffffff); /* #F6FEFE pour test Dégradé couleur fond de la section du haut vers le bas */
    border-radius: 20px;
    /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5); /* pour test ombre de la section */
    /*color: white; /* couleur du texte */
}

/* Optionnel : Style pour l'aspect visuel */
body {
    font-family: Comic Sans MS, sans-serif;
    background-color: #ffffff;
    margin: 0;
    padding: 0px;
}

.spaced-line {
    margin-bottom: 10px;
}

.special-paragraph {
    font-size: 1.20em;
    line-height: 1.4;
}

/* Styles pour le carrousel */
.carousel {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 50%; /* Largeur du carrousel */
    margin: 0 auto;
}

.carousel-image {
    width: 100%; /* Prend toute la largeur de la div */
    max-width: 500px; /* Limite la taille maximale */
    height: auto;
    display: none; /* Masque par défaut toutes les images */
}

.carousel-image.active {
    display: block; /* Affiche uniquement l'image active */
}

button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: transparent;
    color: #E71D73; /* Couleur de la flèche */
    border: none;
    padding: 10px;
    cursor: pointer;
    font-size: 5em;
    transition: color 0.3s, box-shadow 0.3s; /* Transition douce pour le survol */
}

/* Effet de survol des fleches carousel*/
button:hover {
    color: #ff5a9e;  /*Couleur plus lumineuse au survol*/
    text-shadow: 
        0 0 30px rgba(231, 29, 115, 0.6),   /*Première couche de lueur légère*/ 
}

.prev {
    left: 0px;
}

.next {
    right: 0px;
}

/* Style pour les images en ligne */

.image-gallery {
    display: flex;
    gap: 20px; /* Espace entre les images */
    justify-content: center; /* Centre les images */
    flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
    margin-top: 20px; /* Marge au-dessus des images */
}

.image-gallery img {
    width: 270px; /* Largeur des images */
    height: auto;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.image-gallery img:hover {
    transform: scale(1.1); /* Effet de zoom au survol */
}

.text-image-section {
    display: flex;
    align-items: center; /* Aligne verticalement l'image et le texte */
    justify-content: flex-start; /* Place le contenu à gauche */
    gap: 20px; /* Espacement entre l'image et le texte */
}

.text-image-section img {
    width: 200px; /* Ajuste la taille de l'image */
    height: auto;
}

.text-image-section p {
    flex: 1; /* Prend l'espace restant à côté de l'image */
    margin: 0; /* Supprime les marges par défaut */
}

#a-venir p {
    text-align: center;
}

#l-eau p {
    text-align: center;
}

#le-feu p {
    text-align: center;
}

#les-dinosaures p {
    text-align: center;
}

#les-chevaux p {
    text-align: center;
}

#disponible-achat p {
    text-align: center;
}

/*Style info bulle */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 110%;
    left: 50%;
    transform: translateX(-50%);
    background-color: #333;
    color: #fff;
    padding: 5px 10px;
    border-radius: 5px;
    opacity: 0;
    visibility: hidden;
    white-space: nowrap;
    font-size: 0.9em;
    /*max-width: 200px; /* Limite la largeur de l'info-bulle */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Ombre pour plus de lisibilité */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none; 
}

.tooltip:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(-5px); /* Légère montée pour effet visuel */
}

.centered-gallery {
    display: flex;
    justify-content: center; /* Centre horizontalement */
    flex-wrap: wrap; /* Permet aux images de passer à la ligne si nécessaire */
}

.centered-gallery .image-gallery {
    display: flex;
    justify-content: center; /* Centre les images dans la galerie */
    flex-wrap: wrap; /* Permet aux images de passer à la ligne si nécessaire */
}

.centered-gallery .image-gallery a {
    margin: 10px; /* Ajoute un espacement autour de chaque lien */
}

.mobile-nav {
    display: none; /* Cacher le menu mobile par défaut */
    position: absolute;
    top: 40px;
    font-size: 15px;
    /* color: yellow; */
    left: -250px; /* Hors écran */
    width: 200px;
    height: auto;
    background-color: #333;
    transition: left 0.7s ease;
    overflow-y: auto; /* Ajoute un défilement vertical si nécessaire */
}

.mobile-nav a {
    display: block; /* Permet aux liens de prendre toute la largeur disponible. */
    padding: 15px; /* Ajoute un espace autour du texte du lien. */
    color: white; /* Couleur du texte des liens. */
    text-decoration: none; /* Supprime le soulignement des liens. */
}

.mobile-nav.open {
    left: 0; /* Afficher le menu en glissant */
}

/* Cache les sous-menus par défaut */
.mobile-nav .dropdown {
    display: none;
    background-color: #444;
    padding-left: 20px;
}

/* Affiche le sous-menu au clic ou au survol */
.mobile-nav li:hover .dropdown,
.mobile-nav li.active .dropdown {
    display: block;
}

/* Cible les liens avec la classe no-style */
.no-style {
    color: black;        /* Fixe la couleur en noir */
    text-decoration: none; /* Supprime le soulignement */
}



/* Formulaire page contact */

.contact-section {
    padding: 60px;
    background-color: #faeede;
}

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

.contact-form {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.contact-form label {
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-bottom: 15px; /* Ajoute un espace entre les champs */
}

.contact-form textarea {
    padding: 10px;
    height: 120px;
    resize: none; /* Permet un redimensionnement vertical uniquement */
}

.button-container {
    position: relative;
    margin-top: 20px;
    margin-bottom: 7px;
    margin-left:365px;

}

.button-container button {
    background-color: #333;
    color: #fff;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}

.button-container button:hover {
    background-color: #555;
    color: #ff5a9e;
    box-shadow: 
        0 0 10px rgba(231, 29, 115, 0.6), 
        0 0 20px rgba(231, 29, 115, 0.5), 
        0 0 30px rgba(231, 29, 115, 0.4);
}

.notification {
    position: fixed;
    top: 50%;  /* Positionne à 50% de la hauteur de l'écran */
    left: 50%; /* Positionne à 50% de la largeur de l'écran */
    transform: translate(-50%, -50%); /* Centre l'élément */
    padding: 10px 20px;
    background-color: #4CAF50; /* Couleur verte */
    color: white;
    border-radius: 5px;
    z-index: 1000; /* Assurez-vous qu'il est au-dessus d'autres éléments */
    text-align: center; /* Centre le texte à l'intérieur */
}

/* Vignettes page actualités */

.vignettes-section {
    padding: 0;
    /*background-color: rgba(246, 79, 10, 0.5); /* Couleur de fond avec transparence (50%) */
    background-color: transparent;
    box-shadow: none;  /* Supprime les ombres */
    outline: none;     /* Supprime les bordures actives */
    border: none;      /* Supprime les bordures */
}

.vignettes-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 20px;
    justify-items: center;
    background-color: #ffffff;
    box-shadow: none;  /* Supprime les ombres */
    outline: none;     /* Supprime les bordures actives */
    border: none;      /* Supprime les bordures */
}

.vignette {
    position: relative; /* Ajout pour que les éléments enfants absolus aient une référence */
    width: 100%;
    height: 250px;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s ease-in-out;
}

.vignette-title,
.vignette-date {
    position: absolute;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 4px;
    font-weight: bold;
}

.vignette-title {
    bottom: 40px;
    left: 10px;
}

.vignette-date {
    bottom: 10px;
    left: 10px;
    font-size: 12px;
} 

.vignette img {
    display: none;
}

.vignette:hover {
    transform: scale(1.03);
}

.vignette.full-background {
    background-size: cover; /* Remplit tout l'espace disponible */
    background-repeat: no-repeat; /* Pas de répétition */
    background-position: center; /* Centre l'image */
    height: 250px; /* Ou la hauteur que tu souhaites */
}

.dynamic-content {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    margin-top: 20px;
    /*padding: 20px;*/
    /*border: 1px solid #ddd;*/
    background-color: #fff;
}

.dynamic-content.fade-in {
    opacity: 1;
}

#dynamic-content {
    border-radius: 15px;
    /*background: linear-gradient(to top, #bfbfbf, #ffffff);*/
}

#vigne_accueil {
    display: block;
}

#carousel_cheveaux {
    display: none;
}

#carousel_dinausores {
    display: none;
}

#carousel_feu {
    display: none;
}

#carousel_eau {
    display: none;
}

#flipbook_a {
    display: block;
}

#flipbook_b {
    display: block;
}

#flipbook_c {
    display: block;
}

#flipbook_d {
    display: block;
}

#flipbook {
    width: 900px;
    height: 600px;
}

#flipbook .page {
    background: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain; /* Permet à l'image de s'adapter */
    background-repeat: no-repeat;
    background-position: center;
}

#flipbook .page img {
    max-width: 100%; /* Ne dépasse pas la largeur de la page */
    max-height: 100%; /* Ne dépasse pas la hauteur de la page */
    object-fit: contain; /* S'adapte pour conserver les proportions */
}

#flipbook2 {
    width: 900px;
    height: 600px;
    /*margin: 20px auto;*/
}

#flipbook2 .page {
    background: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain; /* Permet à l'image de s'adapter */
    background-repeat: no-repeat;
    background-position: center;
}

#flipbook2 .page img {
    max-width: 100%; /* Ne dépasse pas la largeur de la page */
    max-height: 100%; /* Ne dépasse pas la hauteur de la page */
    object-fit: contain; /* S'adapte pour conserver les proportions */
}

#flipbook3 {
    width: 900px;
    height: 600px;
    /*margin: 20px auto;*/
}

#flipbook3 .page {
    background: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain; /* Permet à l'image de s'adapter */
    background-repeat: no-repeat;
    background-position: center;
}

#flipbook3 .page img {
    max-width: 100%; /* Ne dépasse pas la largeur de la page */
    max-height: 100%; /* Ne dépasse pas la hauteur de la page */
    object-fit: contain; /* S'adapte pour conserver les proportions */
}

#flipbook4 {
    width: 900px;
    height: 600px;
    /*margin: 20px auto;*/
}

#flipbook4 .page {
    background: none;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: contain; /* Permet à l'image de s'adapter */
    background-repeat: no-repeat;
    background-position: center;
}

#flipbook4 .page img {
    max-width: 100%; /* Ne dépasse pas la largeur de la page */
    max-height: 100%; /* Ne dépasse pas la hauteur de la page */
    object-fit: contain; /* S'adapte pour conserver les proportions */
}


.image-centrée {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  height: auto;
}

/* Responsive styles */
@media (max-width: 768px) {
    .lilita_titre {
        display: none;
    }

    .montessori {
        font-size: 1.0em;
        text-align: center;
        margin: 10px 0;
    }

    .special-paragraph {
        font-size: 14px; /* Réduit la taille du texte */
        line-height: 1.4; /* Ajuste l'espacement entre les lignes pour une meilleure lisibilité */
    }

    /* Si tu veux également ajuster l'espacement des <br> dans cette section */
    .spaced-line {
        margin-bottom: 10px; /* Ajuste l'espace après les <br> */
    }

    header {
        flex-direction: column;
        align-items: center;
        background-size: 400px 230px;
    }

.overlay-image {
    position: absolute; /* Permet de superposer l'image */
    top: 60px; /* Ajuste selon tes besoins */
    left: 72%; /* Centre horizontalement */
    transform: translateX(-50%); /* Centre précis */
    max-width: 80px; /* Ajuste la taille de l'image */
    z-index: 1; /* Place l'image au-dessus du contenu */
}

    header img.logo {
        max-width: 100px;
        display: block;
        margin: 0 auto;
    }

/* Navigation */
    .desktop-menu {
        display: none; /* Cacher le menu desktop en mobile */
    }
 
    .desktop-menu ul.active {
        display: block;
    }

    .desktop-menu ul li {
        display: block;
        margin: 10px 0;
    }

    .desktop-menu {
        font-size: 1.0em;
    }
    
.burger-menu {
        display: block;
        position: absolute;
        top: 25px;
        left: 12px;
        z-index: 1000;
        font-size: 2em;
        background: none;
        border: none;
        cursor: pointer;
    }
.mobile-nav {
        display: block; /* Assurer que le menu mobile est affiché quand il est ouvert */
        max-height: 80vh; /* Limite la hauteur à 80% de la hauteur de la fenêtre */
        overflow-y: auto; /* Active un défilement vertical si le contenu dépasse la hauteur */
        box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5); /* Optionnel pour un meilleur effet visuel */
    }

#mobile-nav {
position: fixed; /* pour qu'il reste au même endroit même en scrollant */
z-index: 1000; /* plus élevé pour que ça passe au-dessus des autres éléments */
}

/* Barre latérale du site */ 
.sidebar {
    display: none; 
}

/* Carousel */
.carousel {
        width: 80%; /* Largeur complète sur mobile */
    }

    .prev {
        left: -50px; /* Positionne la flèche à gauche sur mobile */
    }

    .next {
        right: -50px; /* Positionne la flèche à droite sur mobile */
    }

    button {
        font-size: 3em; /* Taille réduite des flèches sur mobile */
    }

.special-paragraph-3 {
    font-size: 1em;
    line-height: 1.4;
    text-align: center;
    margin-bottom: 20px;
    margin-top: -10px;
}

.contact-section {
    padding: 20px;
    background-color: #faeede;
}

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

.contact-form {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
    background-color: #f9f9f9;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
}

.contact-form textarea {
    padding: 10px;
    height: 180px;
}

.button-container {
    position: relative;
    margin-top: 60px;
    margin-bottom: -50px;
    margin-left:100px;
}

.vignette.full-background {
    background-size: cover; /* Remplit tout l'espace disponible */
    background-repeat: no-repeat; /* Pas de répétition */
    background-position: left; /* Centre l'image */
    height: 150px; /* Ou la hauteur que tu souhaites */
}

.vignette-title,
.vignette-date {
    position: absolute;
    color: #fff;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px;
    border-radius: 4px;
    font-weight: bold;
}

.vignette-title {
    bottom: 40px;
    left: 10px;
    font-size: 14px;
}

.vignette-date {
    bottom: 10px;
    left: 10px;
    font-size: 11px;
}

.image-gallery {
        gap: 10px; /* Réduit l'espace entre les images */
    }

.image-gallery img {
        width: 120px; /* Largeur des images sur mobile */
    }

#flipbook_a {
    display: none;
}

#flipbook_b {
    display: none;
}

#flipbook_c {
    display: none;
}

#flipbook_d {
    display: none;
}

#carousel_cheveaux {
    display: block;
}

#carousel_dinausores {
    display: block;
}

#carousel_feu {
    display: block;
}

#carousel_eau {
    display: block;
}

#vigne_accueil {
    display: none;
}

#vigne_accueil + .spaced-line {
        display: none;
    }

.image-centrée {
    width: 90%; /* ou une valeur fixe comme 300px si tu préfères */
  }

}