/*
 Theme Name:     Orchid Store Child Mat
 Theme URI:      https://lecoin-pro.com/orchid-store-child-mat
 Description:    Thème enfant personnalisé pour Mon Thème Parent.
 Author:         Mat
 Author URI:     https://lecoin-pro.com/orchid-store-child-mat
 Template:       orchid-store
 Version:        1.0.0
 License:        GNU General Public License v2 or later
 License URI:    http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:    mon-theme-parent-enfant
*/

/* Ajoutez ici vos styles CSS personnalisés */

/* ==========================================================================
   Styles pour le shortcode [refresh_images]
   ========================================================================== */

/* Conteneur principal de la galerie (la div avec la classe allimageslider) */
.allimageslider {
    display: flex; /* Utilise Flexbox pour organiser les éléments enfants */
    flex-wrap: wrap; /* Permet aux images de passer à la ligne suivante si l'espace est insuffisant */
    gap: 20px; /* Crée un espacement de 20px entre les images (horizontalement et verticalement) */
    justify-content: center; /* Centre les images sur la ligne s'il y a de l'espace vide */
    align-items: flex-start; /* Aligne les éléments en haut de leur ligne si leurs hauteurs sont différentes */
    margin-top: 30px; /* Espacement au-dessus de la galerie */
    margin-bottom: 30px; /* Espacement en dessous de la galerie */
    padding: 10px; /* Un peu de rembourrage interne si nécessaire */
    background-color: #f8f8f8; /* Légère couleur de fond pour la section galerie */
    border-radius: 8px; /* Bords légèrement arrondis pour le conteneur principal */
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08); /* Une ombre subtile pour un effet de profondeur */
        transition: transform 0.3s ease, box-shadow 0.3s ease; /* Transition douce pour les effets de survol */
}

/* Effet de survol pour chaque carte d'image */
.item_allimageslider:hover {
    transform: translateY(-15px); /* Soulève légèrement l'image au survol */
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.8); /* Ombre plus prononcée au survol */
}

/* Styles pour chaque élément individuel d'image (la div avec la classe item_allimageslider) */
.item_allimageslider {
    /* Définit une base pour la taille de chaque élément pour 4 colonnes sur grand écran */
    flex: 0 0 calc(25% - 15px); /* 25% de la largeur du conteneur, moins l'ajustement pour le 'gap' */
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur totale */
    text-align: center; /* Centre l'image et tout texte qu'elle pourrait contenir */
    position: relative; /* Nécessaire pour les effets de survol ou superpositions si ajoutés */
    overflow: hidden; /* Assure que tout débordement est masqué (ex: bords arrondis) */
    border-radius: 6px; /* Bords légèrement arrondis pour chaque carte d'image */
     /* Forcer le rendu matériel */
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform; /* Indique au navigateur que 'transform' va changer, potentiellement */
}

/* Styles pour les images elles-mêmes */
.item_allimageslider img {
    max-width: 100%; /* L'image ne dépassera jamais la largeur de son conteneur */
    height: auto; /* Maintient les proportions de l'image */
    display: block; /* Supprime l'espace indésirable en dessous des images */
    border-radius: 10px; /* Assure que l'image a des bords arrondis comme son conteneur */
    object-fit: cover; /* Recadre l'image pour couvrir le cadre si les proportions ne correspondent pas */
    /* Pour s'assurer que toutes les images ont la même hauteur, vous pouvez fixer une hauteur
       mais cela peut recadrer l'image si 'object-fit: cover;' est utilisé.
       Exemple: height: 200px; */
}

/* Styles spécifiques pour les liens autour des images */
.item_allimageslider a {
    display: block; /* Assure que le lien prend toute la place de son conteneur */
    text-decoration: none; /* Supprime le soulignement par défaut des liens */
    color: inherit; /* Hérite de la couleur du texte parent (si applicable) */
}


/* ==========================================================================
   Styles Responsifs pour la galerie
   ========================================================================== */

@media (max-width: 1200px) {
    .item_allimageslider {
        /* Sur les écrans un peu plus petits, passer à 3 colonnes */
        flex: 0 0 calc(33.33% - 13.33px); /* Ajustement pour 3 colonnes et le 'gap' */
    }
}

@media (max-width: 992px) {
    .allimageslider {
        gap: 15px; /* Réduit l'espacement pour les écrans de tablette */
    }
    .item_allimageslider {
        /* Sur les écrans de tablette, toujours 3 colonnes */
        flex: 0 0 calc(33.33% - 10px); /* Ajustement du gap */
    }
}

@media (max-width: 768px) {
    .allimageslider {
        gap: 10px; /* Réduit encore l'espacement sur les petits écrans */
    }
    .item_allimageslider {
        /* Sur les écrans de téléphone, passer à 2 colonnes */
        flex: 0 0 calc(50% - 5px); /* Ajustement pour 2 colonnes et le 'gap' */
    }
}

@media (max-width: 576px) {
    .allimageslider {
        padding: 5px; /* Moins de padding sur les très petits écrans */
    }
    .item_allimageslider {
        /* Sur les très petits écrans (smartphones), une seule image par ligne */
        flex: 0 0 100%; /* Chaque image prend toute la largeur disponible */
        max-width: 300px; /* Limite la largeur pour éviter des images géantes sur les téléphones */
        margin-left: auto; /* Centre l'image */
        margin-right: auto; /* Centre l'image */
    }
}

/* Si vous avez besoin de cibler spécifiquement l'ID 'slider' pour d'autres styles
   qui ne sont pas liés directement aux images, vous pouvez le faire ici :
#slider {
    // Vos styles pour #slider
}
*/
/* ==========================================================================
   Styles pour le shortcode [refresh_images]
   ========================================================================== */


/* ==========================================================================
   Styles pour la section "Services"
   ========================================================================== */
   
   .services-section {
    padding: 80px 0;
    background-color: #fff;
    text-align: center;
}

.services-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne sur les petits écrans */
}

.service-box {
    width: calc(33.33% - 30px); /* 3 colonnes avec de l'espace entre elles */
    margin: 15px;
    padding: 40px 20px;
    background-color: #f9f9f9;
    border: 1px solid #eee;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

.service-box:hover {
    transform: translateY(-5px); /* Remonte la boîte de 5px au survol */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.service-icon {
    font-size: 50px;
    color: #4CAF50; /* Couleur de l'icône, changez-la au besoin */
    margin-bottom: 20px;
}

.service-title {
    font-size: 24px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
}

.service-description {
    font-size: 16px;
    color: #666;
    line-height: 1.6;
}

/* Règle pour les écrans plus petits (tablettes) */
@media (max-width: 992px) {
    .service-box {
        width: calc(50% - 30px); /* 2 colonnes par ligne */
    }
}

/* Règle pour les écrans de mobile */
@media (max-width: 768px) {
    .service-box {
        width: calc(100% - 30px); /* 1 seule colonne */
    }
}
/* ==========================================================================
   Styles pour la section "Services"
   ========================================================================== */
   
   
 /* ==========================================================================
   Styles pour la section "Our Team"
   ========================================================================== */  
.team-section {
    padding: 80px 0;
    background-color: #f7f7f7;
    text-align: center;
}

.team-container {
    max-width: 1170px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap; /* Permet aux colonnes de passer à la ligne */
}

.team-member {
    width: 250px; /* Largeur fixe pour chaque membre */
    margin: 15px;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
    box-sizing: border-box;
}

.team-member:hover {
    transform: translateY(-5px);
}

.member-photo img {
    width: 150px;
    height: 150px;
    border-radius: 50%; /* Image ronde */
    object-fit: cover; /* S'assure que l'image remplit le cercle sans être déformée */
    border: 3px solid #eee;
    margin-bottom: 20px;
}

.member-name {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 5px;
}

.member-title {
    font-size: 16px;
    color: #888;
    margin-bottom: 15px;
}

.social-links a {
    display: inline-block;
    color: #999;
    font-size: 18px;
    margin: 0 8px;
    transition: color 0.3s ease;
}

.social-links a:hover {
    color: #4CAF50; /* Change la couleur au survol, ajustez au besoin */
}

/* Règle pour les écrans plus petits */
@media (max-width: 1200px) {
    .team-member {
        width: 45%; /* Affiche 2 membres par ligne */
    }
}

@media (max-width: 768px) {
    .team-member {
        width: 100%; /* Affiche 1 membre par ligne */
    }
}

/* ==========================================================================
   Styles pour la section "Our Team"
   ========================================================================== */ 
/* ==========================================================================
   Styles pour la section "video"
   ========================================================================== */ 
.video-section {
    padding: 80px 0; /* Espacement vertical */
    background-color: #f7f7f7; /* Couleur de fond, changez au besoin */
    text-align: center;
}

.video-container {
    position: relative;
    max-width: 900px; /* Largeur maximale du lecteur, ajustez au besoin */
    margin: 0 auto;
    padding-bottom: 56.25%; /* Ratio d'aspect pour les vidéos 16:9 (9 / 16 = 0.5625) */
    height: 0;
    overflow: hidden;
    border-radius: 8px; /* Coins arrondis, optionnel */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==========================================================================
   Styles pour la section "video"
   ========================================================================== */
   
   /* Styles for the video background section */
.video-background-section {
    position: relative;
    height: 600px; /* Adjust the height as needed */
    overflow: hidden;
    color: #fff; /* White text for better contrast */
    text-align: center;
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: center; /* Horizontally center the content */
}

/* Styles for the video container */
.video-bg-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    z-index: 1; /* Puts the video in the background */
}

.video-bg-container video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Styles for the content overlay */
.video-content-overlay {
    position: relative;
    z-index: 2; /* Puts the content on top of the video */
    background-color: rgba(0, 0, 0, 0.5); /* Semi-transparent overlay for better text readability */
    padding: 20px;
}

.video-content-overlay h2 {
    font-size: 4em;
    font-weight: bold;
    margin-bottom: 20px;
}

.video-content-overlay p {
    font-size: 1.5em;
    max-width: 800px;
    margin: 0 auto 30px;
}

.btn-cta {
    display: inline-block;
    padding: 15px 30px;
    background-color: #4CAF50;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.btn-cta:hover {
    background-color: #45a049;
}

/* Rend la vidéo fixe et en plein écran */
.video-bg-fullscreen {
    position: fixed; /* Fixe la vidéo par rapport à la fenêtre de visualisation */
    top: 0;
    left: 0;
    width: 100vw; /* Couvre 100% de la largeur de la fenêtre */
    height: 100vh; /* Couvre 100% de la hauteur de la fenêtre */
    overflow: hidden;
    z-index: -1; /* Place la vidéo en arrière-plan */
}

.video-bg-fullscreen video {
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* S'assure que le contenu est au-dessus de la vidéo */
.page-content {
    position: relative;
    z-index: 1; /* Assure que le contenu apparaît au-dessus de la vidéo */
    /* Vous pouvez ajouter d'autres styles pour l'arrière-plan du contenu */
}

/* Styles pour le corps de la page */
body {
    margin: 0; /* Important pour éliminer l'espace par défaut */
    padding: 0;
    background-color: transparent; /* Permet à la vidéo d'être visible */
}

/* Styles pour le contenu sur la vidéo, comme un titre de bienvenue */
.page-content h2, .page-content p {
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Ajoute de l'ombre pour la lisibilité */
}

/* ==========================================================================
   Styles pour la section "video"
   ========================================================================== */


/* ==========================================================================
   Styles pour la section "image effet flip 3D"
   ========================================================================== */

/* Styles pour la section complète */
.images-3d-section {
    padding: 80px 0;
    background-color: #f7f7f7;
    text-align: center;
}

/* Conteneur de la grille (utilise Flexbox pour la mise en page) */
.image-grid-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Ajoute un espace entre les cartes */
}

/* Le conteneur principal de chaque carte */
.flip-card {
    background-color: transparent;
    width: 280px; /* Largeur de chaque carte */
    height: 280px; /* Hauteur de chaque carte */
    perspective: 1000px;
}

/* Le conteneur interne, qui pivote */
.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}

/* Fait pivoter le conteneur interne au survol */
.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Les faces de la carte (avant et arrière) */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 8px; /* Coins arrondis pour un meilleur style */
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* Ombre légère */
}

/* La face avant */
.flip-card-front {
    background-color: #bbb;
}

/* La face arrière */
.flip-card-back {
    background-color: #2980b9;
    transform: rotateY(180deg);
}

/* Styles pour les images */
.flip-card-front img, .flip-card-back img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Styles pour les écrans de moins de 768px de large */
@media (max-width: 768px) {
    .flip-card {
        width: 100%; /* Les cartes prennent toute la largeur sur mobile */
        max-width: 350px; /* Limite la largeur sur les petits écrans */
    }
}

/* ==========================================================================
   Styles pour la section "image effet flip 3D"
   ========================================================================== */

   
/* ==========================================================================
   Styles pour la section "vide"
   ========================================================================== */   
   .spacer {
    height: 100px; /* C'est la hauteur de votre espace. Ajustez la valeur au besoin. */
    background-color: transparent; /* Cette ligne assure que la section est transparente. */
}

/* ==========================================================================
   Styles pour la section "vide"
   ========================================================================== */
   
 /* ==========================================================================
   Styles pour la section "effect image zoe"
   ========================================================================== */
   
.images-hover-section-zoe {
    padding: 80px 0;
    background-color: #f7f7f7;
    text-align: center;
}

/* Conteneur de la grille d'images */
.images-hover-grid-zoe {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Styles pour chaque carte d'image individuelle */
.image-hover-container-zoe {
    position: relative;
    width: 280px; /* Largeur de chaque image, ajustez au besoin */
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* L'image elle-même */
.image-hover-container-zoe img {
    display: block;
    width: 100%;
    height: auto;
    transition: transform 0.5s ease;
}

/* Effet de zoom sur l'image au survol */
.image-hover-container-zoe:hover img {
    transform: scale(1.1);
}

/* Le calque de texte */
.image-overlay-zoe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px;
    box-sizing: border-box;
    opacity: 0; /* Caché par défaut */
    transition: opacity 0.5s ease;
}

/* Rendre le calque visible au survol */
.image-hover-container-zoe:hover .image-overlay-zoe {
    opacity: 1;
}

.image-overlay-zoe h3, .image-overlay-zoe p {
    text-align: center;
    margin: 0;
}

.image-overlay-zoe h3 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

/* Règle pour la mise en page responsive */
@media (max-width: 768px) {
    .image-hover-container-zoe {
        width: 100%; /* L'image prend toute la largeur sur mobile */
        max-width: 350px;
    }
}

/* ==========================================================================
   Styles pour la section "effect image zoe"
   ========================================================================== */
   
 /* ==========================================================================
   Styles pour la section "effect image dexter"
   ========================================================================== */
    
.images-hover-section-dexter {
    padding: 80px 0;
    background-color: #f7f7f7;
    text-align: center;
}

/* Grille de 4 images */
.images-hover-grid-dexter {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Conteneur de l'image et de la superposition */
.image-hover-container-dexter {
    position: relative;
    width: 280px;
    height: 280px;
    overflow: hidden; /* Cache la partie de la superposition qui est en dehors du conteneur */
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* L'image elle-même */
.image-hover-container-dexter img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* La superposition de texte */
.image-overlay-dexter {
    position: absolute;
    bottom: 0; /* Positionne la superposition en bas */
    left: 0;
    width: 100%;
    height: 0; /* Commence avec une hauteur de 0 */
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 10px; /* Pas de padding vertical initial */
    box-sizing: border-box;
    transition: height 0.3s ease-in-out; /* Anime la hauteur */
    text-align: center;
}

/* Augmente la hauteur de la superposition au survol */
.image-hover-container-dexter:hover .image-overlay-dexter {
    height: 100%;
}

.image-overlay-dexter h3,
.image-overlay-dexter p {
    opacity: 0; /* Cache le texte par défaut */
    transition: opacity 0.5s ease-in-out;
}

/* Fait apparaître le texte au survol */
.image-hover-container-dexter:hover .image-overlay-dexter h3,
.image-hover-container-dexter:hover .image-overlay-dexter p {
    opacity: 1;
}

/* Règle pour les écrans de moins de 768px */
@media (max-width: 768px) {
    .image-hover-container-dexter {
        width: 100%;
        max-width: 350px;
    }
}
/* ==========================================================================
   Styles pour la section "effect image dexter"
   ========================================================================== */
   
 /* ==========================================================================
   Styles pour la section "effect image cercle"
   ========================================================================== */
.images-circle-section {
    padding: 80px 0;
    background-color: #f7f7f7;
    text-align: center;
}

/* Conteneur de la grille d'images */
.image-circle-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

/* Conteneur de l'image et du cercle */
.image-circle-container {
    position: relative;
    width: 280px;
    height: 280px;
    overflow: hidden;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
}

/* L'image elle-même (elle reste statique) */
.image-circle-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Le calque de texte qui deviendra un cercle */
.circle-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0); /* Cache le cercle par défaut */
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Calque noir semi-transparent */
    color: #fff;
    border-radius: 50%; /* Crée un cercle */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 20px;
    box-sizing: border-box;
    transition: transform 0.5s ease; /* Animation fluide */
}

/* Agrandit le cercle au survol */
.image-circle-container:hover .circle-overlay {
    transform: translate(-50%, -50%) scale(1); /* Fait apparaître le cercle */
}

/* Styles pour le texte à l'intérieur */
.circle-overlay h3, .circle-overlay p {
    opacity: 0;
    transition: opacity 0.3s ease 0.2s; /* Un petit délai pour l'animation du texte */
}

/* Rends le texte visible au survol */
.image-circle-container:hover .circle-overlay h3,
.image-circle-container:hover .circle-overlay p {
    opacity: 1;
}

/* Règle responsive */
@media (max-width: 768px) {
    .image-circle-container {
        width: 100%;
        max-width: 350px;
    }
}
 /* ==========================================================================
   Styles pour la section "effect image cercle"
   ========================================================================== */

/* ==========================================================================
   Styles pour la section "menu"
   ========================================================================== */

.side-menu-container {
    width: 250px;
    height: auto;
    background-color: #f8f8f8;
    box-shadow: 2px 2px 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
    perspective: 1000px; /* Essential for 3D effect */
    border-radius: 8px;
    overflow: hidden;
}

/* Menu principal */
.main-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Articles de menu */
.menu-item {
    position: relative;
}

.menu-item > a {
    display: block;
    padding: 15px 20px;
    text-decoration: none;
    color: #333;
    font-size: 16px;
    transition: background-color 0.3s ease;
}

.menu-item > a:hover {
    background-color: #e0e0e0;
}

/* Gestion du sous-menu et de l'effet 3D */
.has-submenu {
    position: relative;
}

.has-submenu > a {
    transform-origin: 0 50%; /* Pivot point of the rotation */
    transition: transform 0.5s ease-in-out;
}

.has-submenu > a:after {
    content: '►'; /* Arrow indicator */
    position: absolute;
    right: 20px;
    font-size: 14px;
    transition: transform 0.5s ease;
}

/* Style et position du sous-menu */
.submenu {
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #333;
    z-index: 10;
    transform-style: preserve-3d;
    transform: rotateY(90deg); /* Start with the submenu rotated and hidden */
    transition: transform 0.5s ease;
    backface-visibility: hidden;
    
}

.submenu a {
    color: #fff;
}

/* Effet au survol du parent */
.has-submenu:hover > a {
    transform: rotateY(-90deg);
}

.has-submenu:hover .submenu {
    transform: rotateY(0deg);
}


/* ==========================================================================
   Styles pour la section "menu"
   ========================================================================== */
   
   
   
/* ==========================================================================
   Styles pour la section "menu sticky header"
   ========================================================================== */
   /* Styles de base du menu */
#primary-menu {
    background-color: transparent; /* Transparent par défaut */
    width: 100%;
    position: fixed; /* Reste en haut de la page */
    top: 0;
    left: 0;
    z-index: 1000;
    transition: all 0.3s ease-in-out;
    padding: 30px 0;
}

/* Styles pour le menu quand l'utilisateur fait défiler */
.scrolled-menu {
    background-color: #fff; /* Fond blanc */
    padding: 10px 0; /* Réduit la hauteur */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ajoute une ombre */
}

/* Styles des liens de menu */
.main-navigation ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.main-navigation li {
    margin: 0 15px;
}

.main-navigation a {
    color: #fff; /* Couleur des liens par défaut */
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
    text-transform: uppercase;
    transition: color 0.3s ease-in-out;
}

/* Styles de survol et de couleur pour le menu au défilement */
.scrolled-menu a {
    color: #333; /* Couleur des liens quand le menu change */
}

.main-navigation a:hover {
    color: #ff5722; /* Effet de survol sur la couleur */
}
/* ==========================================================================
   Styles pour la section "menu sticky header"
   ========================================================================== */