/*
Theme Name: Twenty Twenty-Four Child
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Template: twentytwentyfour
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Four is designed to be flexible, versatile and applicable to any website. Its collection of templates and patterns tailor to different needs, such as presenting a business, blogging and writing or showcasing work. A multitude of possibilities open up with just a few adjustments to color and typography. Twenty Twenty-Four comes with style variations and full page designs to help speed up the site building process, is fully compatible with the site editor, and takes advantage of new design tools introduced in WordPress 6.4.
Tags: one-column,custom-colors,custom-menu,custom-logo,editor-style,featured-images,full-site-editing,block-patterns,rtl-language-support,sticky-post,threaded-comments,translation-ready,wide-blocks,block-styles,style-variations,accessibility-ready,blog,portfolio,news
Version: 1.3.1737975936
Updated: 2025-01-27 12:05:36

*/

@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

* {
    font-family: "Raleway", sans-serif;
    margin: 0;
    padding: 0;
    text-decoration: none;
}

body,html{
    margin: 0 !important;
    padding: 0 !important;
}
body.menu-open,
html.menu-open {
  overflow-x: hidden;
}

body {
    font-family: "Raleway", sans-serif;
    --wp--style--root--padding-top: 0px;
    --wp--style--root--padding-right: var(--wp--preset--spacing--0);
    --wp--style--root--padding-bottom: 0px;
    --wp--style--root--padding-left: var(--wp--preset--spacing--0);
}

/* 0) Filet de sécurité : pas de scroll horizontal */
html, body { overflow-x: hidden; }

/* 1) Éviter que les sections full width dépassent */
.wp-block-group.alignfull,
.wp-block-columns.alignfull {
  box-sizing: border-box;
  max-width: 100%;
}

/* 2) Sur mobile, supprimer les marges latérales ajoutées dans les styles inline */
@media (max-width: 768px) {
  .alignfull [style*="margin-left"],
  .alignfull [style*="margin-right"],
  .wp-block-embed[style*="margin-left"],
  .wp-block-embed[style*="margin-right"] {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }



  /* Assurer que les iframes/vidéos ne dépassent pas */
  .wp-block-embed iframe,
  .wp-block-embed__wrapper,
  .wp-block-embed {
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* 3) Limiter le slider à la largeur de l’écran */
#n2-ss-2-align,
#n2-ss-2 {
  max-width: 100% !important;
  overflow: hidden;
}

@media (max-width: 782px){
  #n2-ss-2 { --subtract-vertical-offset: 70px !important; 
}
.wp-site-blocks{
    padding-top: 70px !important;
}
}

/* 4) Si le menu off-canvas pousse la page, le figer */
.cbp-spmenu { position: fixed; }

h1, h2, h3, h4, h5, h6 {
    color: var(--wp--preset--color--contrast);
    font-family: "Raleway", sans-serif;
    font-weight: 400;
    line-height: 1.2;
}

p{
    font-family: "Raleway", sans-serif;
}
.menu-header-container{
    display: flex;
    justify-content: space-between;
    padding: 20px;
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){
    max-width: 100% !important;
}

.header_compo {
    padding-top: 10px !important;
    padding-bottom: 0px !important;
    padding-right: 20px !important;
    /* Rendre le menu sticky en version desktop */
    position: sticky;
    top: 0;
    z-index: 9999;
    background-color: #f9f9f9; /* couleur de fond pour éviter la transparence */
    border-bottom: 1px solid #e3efe9;
}
:target {
    scroll-margin-top: 80px; /* ajuste selon la hauteur de ton menu */
}

.wp-block-navigation-item__content.active-anchor {
    color: #FF5F32 !important;
}


/* TYPOGRAPHIE ET STYLE DE BASE */
.wp-block-navigation-item__content {
    font-family: 'Raleway', sans-serif;
    color: #000;                      /* couleur d'écriture noire */
    background-color: #f9f9f9;        /* fond #f9f9f9 */
    padding: 10px 15px;
    font-weight: 400;                 /* normal par défaut */
    text-decoration: none;
    transition: color 0.3s ease, background-color 0.3s ease, font-weight 0.3s ease;
}

/* SURVOL ET FOCUS */
.wp-block-navigation-item__content:hover,
.wp-block-navigation-item__content:focus{
    color: #FF5F32 !important;                   /* couleur #FF5F32 au survol */
    background-color: #f9f9f9;        /* même fond pour cohérence */
    text-decoration: none;
}

/* ÉTAT ACTIF (onglet de menu uniquement, sans hash) */
.wp-block-navigation-item__content[aria-current="page"]:not([href*="#"]) {
    color: #FF5F32 !important;
}

/* SOUS-MENU : DÉROULEMENT AU PASSAGE DE LA SOURIS */
.wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container {
    display: block !important;        /* force l'affichage au hover */
}

/* SOUS-MENU STYLE */
.wp-block-navigation__submenu-container {
    background-color: #f9f9f9;        /* même fond pour cohérence */
    border: none;
    padding: 0;
    margin: 0;
}

.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    font-family: 'Raleway', sans-serif;
    color: #000;                      /* noir par défaut */
    font-weight: 400;
    padding: 8px 20px;
    background-color: #f9f9f9;
    text-decoration: none;
    display: block;
}

/* SOUS-MENU : HOVER */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
    color: #FF5F32 !important;
}





/* Empêche les titres des sous-menus de revenir à la ligne */
.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
    white-space: nowrap;
}

/* Permet au sous-menu d'adapter sa largeur au contenu */
.wp-block-navigation__submenu-container {
    width: auto !important; /* s'adapte automatiquement */
    min-width: max-content; /* largeur min selon le contenu */
    left: 0 !important; /* alignement à gauche de l'onglet parent */
    right: auto !important;
    top: 100% !important; /* se positionne sous l'onglet parent */
}

/* Ajustements supplémentaires pour éviter les débordements */
.wp-block-navigation__submenu-container li {
    white-space: nowrap;
}

/* Optionnel : effet léger pour une meilleure lisibilité */
.wp-block-navigation__submenu-container {
    background-color: #f9f9f9;
    padding: 5px 0;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    z-index: 9999;
}

/* Optionnel : transition douce lors de l'apparition */
.wp-block-navigation__submenu-container {
    transition: opacity 0.2s ease, transform 0.2s ease;
}


header {
    color: white;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 0 0px;
}
.logo-header img {
    height: 80px;
}
.wp-site-blocks :focus{
    outline-width: 0px;
    outline-style: none;
}

.lien_telephone{
    text-decoration: none;
    color: black;
}

.fas.fa-chevron-down {
    font-size: 10px;
    font-weight: 400px;
}

.svg-inline--fa.fa-w-14 {
    width: 0.5rem;
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
nav ul {
    list-style: none;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    padding: 0;
    margin: 0;
}
nav ul li {
    padding: 5px 5px;
    position: relative;
}

nav ul li a {
    color: black;
    font-size: 14px;
    text-decoration: none;
    font-weight: normal;
    transition: color 0.3s, underline 0.3s;
}

nav ul li a:hover{
    color: black;
    font-weight: normal;
    text-decoration: underline;
    color: #ff6940;
}

nav ul li ul {
    display: none; /* Masqué par défaut */
    position: absolute;
    top: 100%; /* Positionné juste en dessous de l'élément parent */
    left: 0;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    list-style: none;
    padding: 0;
    margin: 0;
    z-index: 1000;
}

nav ul li ul li {
    padding: 10px;
}

nav ul li ul li a {
    display: block;
    padding: 10px;
    color: black;
    font-weight: normal;
}

nav ul li ul li a:hover {
    background-color: #f4f4f4;
    color: #ff6940;
}

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

/* Menu déroulant */
.sous-menu {
    display: none; /* Masquer par défaut */
    position: absolute;
    background-color: #fff;
    padding: 10px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    z-index: 1;
    width: 300px; /* Ajuste cette valeur en fonction de tes besoins */
}

/* Afficher le sous-menu lorsque l'élément parent est survolé */
li:hover .sous-menu {
    display: block;
}

/* Structure du contenu du sous-menu */
.menu-item .menu-content {
    display: flex;
    align-items: center;  /* Aligner verticalement l'image et le texte */
}

/* Image dans le menu déroulant */
.menu-image {
    width: 100px; /* Ajuste la taille de l'image */
    height: auto;
    object-fit: cover; /* Assure que l'image est bien proportionnée */
    margin-right: 20px; /* Espacement entre l'image et les liens */
}

/* Conteneur des liens du menu */
.menu-links {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.bouton_reservez{
    padding: 10px 20px;
    font-size: 12px;
    background-color: white;
    border-radius: 50px;
    border: 1px solid;
    border-color: #00653F;
    color: #00653F;
    font-weight: bold;
    text-transform: uppercase;
    cursor: pointer;
    font-family: "Raleway", sans-serif;
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
    text-decoration-line: none;
}

.bouton_reservez:hover {
    background-color: #00653F;
    border-radius: 50px;
    border: 1px solid;
    border-color: #00653F;
    color: white;
    text-decoration-line: none;
    font-weight: bold;
}

.hero-text {
    text-align: center;
    padding: 2rem;
}
.hero-text h1 {
    font-size: 3rem;
}

.carousel {
    position: relative;
    max-width: 100%;
    overflow: hidden;
}
:root :where(.is-layout-constrained) > * {
    margin-block-start: 0rem;
    margin-block-end: 0;
  }

.carousel-inner {
    display: flex;
    width: 100%;
    transition: transform 0.5s ease-in-out;
}

.carousel-item {
    position: relative;
    flex: 0 0 100%;
    height: 600px;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-content {
    position: absolute;
    bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: white;
    padding: 15px;
    border-radius: 0px;
    width: 100%;
    z-index: 1;
}

.carousel-content p, 
.carousel-content button,
.line {
    position: relative;
    z-index: 2; /* Assure que le texte et le bouton soient au-dessus du fond */
    margin-bottom: 20px;
    left: 50px;
    font-size: 12px;
}

.background-carousel{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3); /* Couleur du fond avec opacité */
    border-radius: 0px;
    z-index: 0; /* Place le fond derrière le texte et le bouton */
}

.carousel-content p {
    margin: 0;
    font-size: 35px;
    font-weight: normal;
}

.carousel-content button {
    display: inline-block;
    font-size: 13px;
    padding: 10px 15px;
    background-color: white;
    color: #00653F;
    border: 1px solid #00653F;
    border-radius: 50px;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    width: auto !important; /* Force la largeur à s'adapter au texte */
    flex-shrink: 0; /* Empêche la réduction automatique dans un conteneur flexible */
    transition: background-color 0.3s ease, color 0.3s ease, border 0.3s ease;
}

.carousel-content button:hover {
    background-color: #00653F;
    color: white;
    border: 1px solid #00653F;
}

.line{
        width: 20%; /* Largeur de la ligne, ajustable */
        height: 3px; /* Épaisseur de la ligne */
        background-color: #ffdf2f; /* Couleur de la ligne */
        margin-top: 5px; /* Espacement entre le titre et la ligne */
}
.carousel-item .caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background-color: rgba(0, 0, 0, 0.6);
    color: white;
    padding: 10px 20px;
    border-radius: 5px;
}
.carousel-dots {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
}
.carousel-dots span {
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 50%;
    cursor: pointer;
}
.carousel-dots .active {
    background-color: #00653F;
}
@keyframes slide {
    0%, 33.33% {
        transform: translateX(0);
    }
    33.34%, 66.66% {
        transform: translateX(-100%);
    }
    66.67%, 100% {
        transform: translateX(-200%);
    }
}

#n2-ss-2item2,#n2-ss-2item5,#n2-ss-2item9 {
border-bottom: 2px solid #ffdf2f;
  z-index: 1000000;
  height: 3px;
  width: 30%;
  justify-content: left;
  display: flex !important;
  margin-bottom: 40px;
}


.btn,
.wpcf7-submit,
.wp-block-read-more {
    display: block;
    padding: 10px 20px;
    background-color: white;
    border-radius: 50px;
    border: 1px solid;
    border-color: #00653F;
    color: #00653F;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
}

.btn:hover,
.wpcf7-submit,
.wp-block-read-more:hover{
    background-color: #00653F;
    border-radius: 50px;
    border: 1px solid;
    border-color: #00653F;
    color: white;
}

.wp-block-button__link {
    display: block;
    padding: 10px 20px;
    font-size: 13px !important;
    background-color: white;
    border-radius: 50px;
    border: 1px solid #00653F;
    color: #00653F;
    font-weight: bold;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    text-align: center;
}

.wp-block-button__link:hover {
    background-color: #00653F;
    border-radius: 50px;
    border: 1px solid #00653F;
    color: white;
}

.icons-section {
    display: flex;
    justify-content: center;
    gap: 2rem;
    margin: 2rem 0;
}

.icons-section div {
    text-align: center;
}

.has-system-sans-serif-font-family a {
    text-decoration: none;
}

/* Cacher le champ honeypot */
input[name="_mc4wp_honeypot"] {
    display: none !important;
  }
  
  /* Style pour le label du formulaire */
  .mc4wp-form-fields label[for="email"] {
    font-family: "Raleway", sans-serif;
    font-size: 1.2rem;
    color: black;
    margin-bottom: 10px;
    display: inline-block;
    padding-bottom: 5px; /* Un peu d'espace entre le texte et la ligne */
    border-bottom: 1px solid #ffdf2f; /* Ligne jaune sous le label */
    width: width; /* La largeur sera ajustée à celle du texte */
  }
  
  /* Style pour le champ email */
  .mc4wp-form-fields input[type="email"] {
    width: 100%;
    padding: 10px;
    font-size: 1rem;
    border: 1px solid #00653F;
    border-radius:50px;
    margin-bottom: 10px;
    box-sizing: border-box;
  }
  
  /* Style pour le bouton de soumission */
  .mc4wp-form-fields input[type="submit"] {
    background-color: #fff;
    color: #00653F;
    border: 1px solid #fff;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 50px;
    cursor: pointer;
  }
  
  .mc4wp-form-fields input[type="submit"]:hover {
    background-color: #00653F;
    color: #fff;
  }
  
  /* Réponse après soumission (succès ou erreur) */
  .mc4wp-response {
    margin-top: 20px;
    font-size: 1rem;
    color: green;
  }
  
  /* Message d'erreur ou de succès */
  .mc4wp-response p {
    font-size: 1rem;
    color: #333;
  }
  

/* Styles pour le footer */
.footer{
    display: flex;
    flex-direction: row;
    align-items: stretch;
    max-width: 100%;
    padding-left: 30px;
    background-color: #00653F;
}
.footer-colonne-1{
    width: 50%;
    color: white;
    padding: 30px;
    display: flex;
}

.bordure-footer-colonne-1{
    width: 100%;
    display: flex;
    flex-direction:column;
    border-right: white 1px solid;
    margin-right: 50px;
}

.footer-colonne-2{
width:40%;
background-color: #00653F;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center
}

.footer-colonne-3{
width: 45%;
background-color: #4bab77;
color: white;
padding: 30px;
padding-right:20px;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center
}

.gite-footer {
    background-color: white;
    padding: 0;
    margin: 0;
    max-width: 100%;
    border-top: 1px solid #00653F;
}

.footer-content {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
}

.footer-menu {
    text-align: left;
    font-size: 14px;
}

.footer-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    color: black;
}

.footer-menu ul li {
    margin: 5px 0;
}

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

.footer-menu ul li a:hover {
    color: black;
    text-decoration: underline;
    font-weight: 500;
}

.footer-socials {
    text-align: center;
}

.footer-socials p {
    margin: 0;
}

.social-icons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 10px 0;
}

.social-icons a img {
    width: 25px;
    height: 25px;
    transition: transform 0.3s ease; /* Animation pour un zoom fluide */
    transform-origin: center; /* L'agrandissement se fait depuis le centre */
}

.social-icons a img:hover {
    transform: scale(1.2); /* Zoom de 20% sans affecter la disposition */
}



.footer-logo {
    text-align: center;
}

.footer-logo img {
    width: 300px;
}

.footer-divider {
    border-top: 1px solid #fff;
}

.footer-bottom {
    display: flex;
    background-color: #004b2e;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 20px;
    font-size: 14px;
}

.footer-bottom p {
    margin-left: 10px;
    color: #fff;
}

.footer-bottom a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.round-text {
    width: 150px;  /* Largeur du cercle */
    height: 150px; /* Hauteur du cercle */
    background-color: #3498db; /* Couleur de fond du cercle */
    color: white;  /* Couleur du texte */
    display: flex;
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    border-radius: 50%;  /* Forme circulaire */
    font-size: 16px;  /* Taille du texte */
    text-align: center; /* Aligner le texte */
    font-family: Arial, sans-serif; /* Police du texte */
}

/* Champs texte et email */
.wpcf7-form-control.wpcf7-text,
.wpcf7-form-control.wpcf7-email {
    width: 100%;
    font-weight: bold;
    padding: 10px;
    border: 1px solid #00653F;
    border-radius: 5px;
    font-size: 16px;
    background-color: #f9f9f9;
    color: #333;
}

/* Champ message */
.wpcf7-form-control.wpcf7-textarea {
    width: 100%;
    height: 150px;
    padding: 10px;
    border: 1px solid #00653F;
    border-radius: 5px;
    font-size: 16px;
    background-color: #f9f9f9;
    color: #333;
}

/* Case à cocher RGPD */
.wpcf7-form-control.wpcf7-acceptance input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2); /* Agrandir la case à cocher */
}

/* Bouton d'envoi */
.wpcf7-submit {
    display: block;
    padding: 10px 20px;
    margin-top: 40px;
    background-color: white;
    border-radius: 50px;
    border: 1px solid;
    border-color: #00653F;
    color: #00653F;
    font-weight: bold;
    font-size: 13px;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.3s;
}

.wpcf7-submit:hover {
    background-color: #00653F;
    border-radius: 50px;
    border: 1px solid;
    border-color: #00653F;
    color: white;}

/* Désactiver le bouton lorsqu’il n’est pas validé */
.wpcf7-submit:disabled {
    background-color: #fff;
    cursor: not-allowed;
}

/* Cacher la flèche par défaut */
details summary {
    list-style: none;
    position: relative;
    padding-left: 40px; /* Ajuste la position de la flèche dans le cercle */
}

/* Ajouter la flèche vers le bas dans un cercle */
details summary::before {
    content: '❯'; /* Flèche vers le bas (symbole simple) */
    font-size: 10px; /* Ajuste la taille de la flèche */
    color: #00653F; /* Couleur de la flèche */
    background-color: white; /* Fond blanc pour le cercle */
    border: 1px solid #00653F; /* Contour vert */
    border-radius: 50%; /* Transforme en cercle */
    width: 20px; /* Largeur du cercle */
    height: 20px; /* Hauteur du cercle */
    display: flex;
    justify-content: center; /* Centre la flèche horizontalement */
    align-items: center; /* Centre la flèche verticalement */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.3s ease; /* Animation pour l'ouverture/fermeture */
}

/* Changer la flèche lorsque le détail est ouvert */
details[open] summary::before {
    content: '❯'; /* Utilisation du même symbole, ou tu peux essayer un autre style si tu préfères */
    transform: translateY(-50%) rotate(90deg); /* Rotation pour simuler l'effet de basculement */
}

/* Styles généraux pour le menu */
nav ul {
    display: flex;
    list-style-type: none;
    padding: 0;
    margin: 0;
    justify-content: space-between;
    align-items: center;
}

nav li {
    position: relative;
}

nav a {
    text-decoration: none;
    padding: 10px;
    color: #000;
}

/* Menu dropdown */
nav li > ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

nav li:hover > ul {
    display: block;
}

/* Styles pour le menu hamburger (visible sur mobile uniquement) */
.menu-hamburger {
    display: none;
}

.logo_contact{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 10px;
    width: 25%;
}


/* Styles pour les petits écrans (mobile) */
@media (max-width: 1260px) {

    /* nav:not(.menu-slide) ul {
        display: block !important;
    } */

    .header_compo{
        display: none;
    }

    .menu-hamburger {
        display: flex;
        flex-direction: column;
        gap: 5px;
        cursor: pointer;
        z-index: 10001;
        margin-left: auto;
        padding: 10px;
    }

    .menu-hamburger div {
        width: 30px;
        height: 3px;
        background-color: #00653F;
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
    }

    /* Transformation en croix */
    .menu-hamburger.active div:nth-child(1) {
        transform: rotate(45deg) translate(5px, 5px);
    }
    .menu-hamburger.active div:nth-child(2) {
        opacity: 0;
    }
    .menu-hamburger.active div:nth-child(3) {
        transform: rotate(-45deg) translate(5px, -5px);
    }

    /* Menu slide-in */
    .menu-slide {
        position: fixed;
        top: 40px; /* Hauteur approximative de ton header/logo */
        left: 0;
        width: 100%;
        height: calc(100% - 40px); /* Hauteur restante de l'écran */
        background-color: #fff;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        z-index: 10000;
        overflow-y: auto;
        display: block; /* Important pour qu'il soit toujours présent dans le DOM */
    }

    .menu-slide.active {
        transform: translateX(0);
    }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(-10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .main-menu,
    .sous-menu {
        list-style: none;
        padding-left: 0;
        font-size: 18px;
    }

    .main-menu > li {
        margin-bottom: 1rem;
    }

    .sous-menu li {
        margin-left: 1rem;
    }

    .menu-slide ul.main-menu {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
    }

    .menu-slide ul.main-menu > li > a {
        font-weight: bold;
        font-size: 16px;
        text-decoration: none;
        color: #000;
        display: block;
        padding: 1px;
        padding-left: 1rem;
    }

    nav ul li:hover > ul,
    /* li:hover .sous-menu {
        display: none !important;
    } */

    .menu-slide ul.main-menu > li > ul.submenu {
        display: block;
        padding-left: 1rem;
        margin-top: 0.5rem;
        background: #fff;
        box-shadow: none;
        position: relative !important; /* Écrase le position: absolute global */
        width: 100%;
        z-index: auto;
    }
    
    .menu-slide ul.main-menu > li > ul.submenu.open {
        display: block;
    }
    
    li:hover .sous-menu {
        display: block !important;
    }
    
    .menu-slide ul.main-menu > li > ul.submenu li {
        padding: 0.5rem 1rem;
    }

    .menu-slide ul.main-menu > li > ul.submenu li a {
        font-size: 14px;
        color: #333;
        text-decoration: none;
        display: block;
        width: 100%;
    }

    .logo_contact {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        width: 100%;
        position: relative;
        z-index: 1000;
    }

    .logo img {
        height: 40px;
        width: auto;
    }

    .logo_contact .logos {
        display: flex;
        align-items: center;
        gap: 10px;
    }

    .bouton_reservez {
        width: 100%;
        margin-left: 0;
        margin-top: 20px;
    }

    /* Désactive le scroll quand le menu est ouvert */
    body.menu-open {
        overflow: hidden;
    }
}


@media (max-width: 1370px) {
    .footer{
        display: flex;
        flex-direction: column;
        display: flex;
        align-content: center;
        justify-content: center;
        align-items: baseline;
        max-width: 100%;
        padding-left: 0px;
        background-color: #00653F;
    }
    
    .footer-colonne-1{
        width: 100%;
        color: white;
        padding: 30px;
        padding-left: 0px;
        display: flex;
        justify-content: center;
    }

    .bordure-footer-colonne-1{
        width: 100%;
        display: flex;
        flex-direction:column;
        border-right: white 0px solid;
        margin-right: 0px;
    }
    
    .footer-colonne-2{
    width:100%;
    background-color: #00653F;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-bottom: 50px;
    }

    .btn_colonne_2{
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%;
        gap: 5px;
    }
    
    .footer-colonne-3{
    width: 100%;
    background-color: #4bab77;
    color: white;
    padding: 20px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center
    }

    .mc4wp-form-fields{
        width: 80%;
    }

    .footer-content {
        flex-direction: column; /* Empile les colonnes en verticale sur mobile */
        align-items: stretch; /* Les colonnes prennent toute la largeur */
    }

    .footer-menu, .footer-socials, .footer-logo {
        flex: 1 1 100%; /* Chaque section prend 100% de la largeur sur mobile */
        margin-bottom: 20px; /* Espacement entre chaque section */
    }

    /* Optionnel: Ajouter un peu de marge pour les éléments dans le footer */
    .footer-menu ul,
    .footer-socials,
    .footer-logo {
        margin: 0;
        padding: 0;
    }

/* Footer bottom (bas du footer) */
.footer-bottom {
    display: flex;
    flex-direction: column;
    background-color: #004b2e;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    padding: 20px 20px;
    font-size: 14px;
}

/* Ajustement du texte dans la partie inférieure du footer */
.footer-bottom p {
    margin-left: 10px;
    color: #fff;
}

.footer-bottom a {
    color: #fff;
    text-decoration: none;
    margin-right: 10px;
}

.footer-bottom a:hover {
    text-decoration: underline;
}

.social-icons{
    margin-top: 15px;
    margin-bottom: 15px;
}
}

header {
  width: 100%;
  background: #fff;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 20px; /* 20px de marge à gauche/droite */
  width: 100vw; /* Prend toute la largeur de l'écran */
  box-sizing: border-box;
}

.logo {
  margin-right: auto;
}

.logo img {
  max-height: 50px;
}

.menu-slide {
  display: flex;
  gap: 2rem;
  margin-left: auto;
}

/* Bouton pour mobile */
.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
}

.burger-icon {
  width: 25px;
  height: 3px;
  background: #000;
  display: block;
  position: relative;
}

.burger-icon::before,
.burger-icon::after {
  content: '';
  position: absolute;
  width: 25px;
  height: 3px;
  background: #000;
  left: 0;
}

.burger-icon::before {
  top: -8px;
}

.burger-icon::after {
  top: 8px;
}

/* Responsive */
@media (max-width: 1370px) {
  .menu-slide {
    display: none;
    flex-direction: column;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    width: calc(100% - 40px); /* 20px marge gauche/droite */
    padding: 1rem 20px;
  }

  .menu-slide.active {
    display: flex;
  }

  .menu-toggle {
    display: block;
  }
  .menu-slide ul.sub-menu {
    display: none;
}
.menu-slide ul.sub-menu.open {
    display: block;
}
}

.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: 100%;
}

.sub-menu{
    width: 400px;
}
/* Tous les liens du menu par défaut : noir */
.main-menu > li > a {
  color: #000;
  transition: color 0.3s ease;
}

.main-menu > li.current-menu-ancestor > a,
.main-menu > li.current-menu-parent > a,
.main-menu > li.current-menu-item > a {
  color: #FF5F32;
}

/* Pour le survol */
.main-menu > li > a:hover {
  color: #FF5F32;
}

.yoast-breadcrumbs{
    padding-left: 40px;
    padding-top: 20px;
}


.video-small iframe {
  max-width: 800px; /* change selon la taille souhaitée */
  width: auto;
  height: 400px;
  display: block;
  margin: auto; /* centre la vidéo */
}


.wp-block-categories-list,
.wp-block-categories{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: center; 
    color: #00653F;
}


/* Mobile : empilement + cibles tactiles au moins 44px */
@media (max-width: 768px) {
    h1{
        font-size: 19px !important;
    }

  .wp-block-categories-list {
    flex-direction: column;
  }
  .filtrer-par-categorie{
    margin-bottom: 15px !important;
  }
  .wp-block-categories-list li {
    width: 100%;
  }
  .wp-block-categories-list a {
    width: 100%;
    align-content: center;
    text-align: left;
    padding: 14px 16px;          /* ↑ augmente la zone tactile */
    min-height: 44px;            /* recommandation Apple/Material */
    border-radius: 10px;
    font-size: 12px;
  }
  .cat-item a {
    text-decoration: none;
    color: #00653F;
    padding: 5px 5px !important;
    background-color: white;
    border-radius: 50px;
    border: 1px solid #00653F;
    font-weight: bold;
    font-size: 12px !important;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}
.bloc-filtre{
display: flex !important;
flex-direction: column !important;
max-width: 100% !important;
align-content: center !important;
padding-right: 0px !important;
padding-left: 0px !important;
}
.texte-reassurance{
    font-size: 18px !important;
}
.texte-reassurance2{
    font-size: 14px !important;
}
}

/* hauteur de la barre mobile (à ajuster si besoin) */
:root { --mobile-bar-h: 56px; }

/* La barre reste fixée tout en haut */
#wprmenu_bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
}

/* On décale tout le contenu sous la barre */
@media (max-width: 768px) {
  .wp-site-blocks {
    padding-top: var(--mobile-bar-h);
  }

  /* filet de sécurité : le slider ne dépasse pas et ne “remonte” pas sous la barre */
  #n2-ss-2-align,
  #n2-ss-2 {
    max-width: 100%;
    overflow: hidden;
    position: relative;
    z-index: 1;
  }
}


.cat-item {
    flex: 1 1 calc(33.33% - 20px);
    display: flex;
    justify-content: center;
}

.cat-item a {
    text-decoration: none;
    color: #00653F;
    padding: 10px 20px;
    background-color: white;
    border-radius: 50px;
    border: 1px solid #00653F;
    font-weight: bold;
    font-size: 13px;
    text-transform: uppercase;
    cursor: pointer;
    display: inline-block;
    text-align: center;
}

.cat-item a:hover {
    background-color: #00653F;
    color: white;
}

.wp-block-latest-posts__list li,
.wp-block-latest-posts li,
.wp-block-post-template li {
    padding: 30px 30px;
    border: 1px solid #e3f2ea;
    background-color: #e3f2ea;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    flex: 1 1 calc(30% - 20px);
    text-align: center;
    transition: box-shadow 0.3s ease; /* transition douce au hover */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); /* ombre douce */

}

.wp-block-latest-posts__list li:hover,
.wp-block-latest-posts li:hover,
.wp-block-post-template li:hover {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.8); /* ombre douce */
}

.wp-block-latest-posts__featured-image img{
    border-radius: 10px;
    max-width: 100%;
    height: auto;
}

.wp-block-latest-posts__post-title,
.wp-block-post-template h2 {
    position: relative;
    text-decoration: none;
    font-weight: 600;
    margin-top: 20px;
}

.wp-block-latest-posts__post-title::before,
.wp-block-post-template h2::before {
    content: "";
    position: absolute;
    top: 0px; /* position en haut */
    left: 20%; /* pour centrer */
    width: 60%; /* largeur souhaitée */
}

.wp-block-latest-posts__post-excerpt{
    color: #333;
}

.wp-block-query-title::before {
    content: "";
}

.wp-block-post-template,
.wp-block-post-template-is-layout-flow{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.wp-block-post{
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 20px;
}

.wp-block-post-template h2,
.wp-block-post-date{
    margin-left: auto;
    margin-right: auto;
}

.wp-block-post-featured-image{
    margin-left: auto;
    margin-right: auto;
}

.wp-block-post figure{
    margin-bottom: 20px;
}


.wp-block-read-more{
    background-color: #e3f2ea;
    border: 0,5px;
    margin-left: auto;
    margin-right: auto;
}

.wp-block-group h2,
.wp-block-post-date time{
    margin-left: auto;
    margin-right: auto;
    margin-top: 0;
}

#mainNav {
    display: flex;
    justify-content: center;
}

#mainNav ul {
    list-style: none;
    display: flex;
    gap: 1rem;
    padding: 0;
}

#mainNav ul li {
    position: relative;
}

#mainNav ul li a {
    text-decoration: none;
    color: #333;
    padding: 0.5rem 1rem;
}

#mainNav ul li a:hover {
    color: #00653F;
}

/* Sous-menus */
#mainNav ul ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    display: none;
    background: #fff;
    padding: 0;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

#mainNav ul li:hover > ul.sub-menu {
    display: block;
}

#mainNav ul ul.sub-menu li a {
    padding: 0.5rem 1rem;
    white-space: nowrap;
}

#mainNav ul ul.sub-menu li a:hover {
    background: #f4f4f4;
    color: #00653F;
}

#wprmenu_bar{
    align-items: center;
    justify-content: space-between;
    display: flex;
    display: none;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 35px;
    padding-bottom: 35px;
}

#wprmenu_bar .bar_logo{
    height: 110px;
}

    .menu-item-1197{
    display: block;
}
    .menu-item-1197 a {
    padding: 8px !important;
    font-size: 13px !important;
    color: #00653F !important;
    background-color: #f9f9f9 !important;
    border-radius: 50px;
    border: 1px solid;
    border-color: #00653F !important;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: bold !important;
    cursor: pointer;
    max-width: 50%;
    margin-left: 20px;
    text-align: center;
}
  .menu-item-1197 a:hover{
    background-color: #00653F !important;
    color: #f9f9f9 !important;
    text-decoration: none !important;
  }

@media (max-width: 1260px){
    #wprmenu_bar{
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        padding-right: 30px !important;
    }
    .menu-header-container{
        display: none;
    }
    #wprmenu_menu_ul{
        padding-top: 40px !important;
        margin-top: 0px !important;
    }
    .menu-item-1197{
    display: block;
    padding-bottom: 50px;
    padding-top: 20px;
}
    .menu-item-1197 a {
    padding: 8px !important;
    font-size: 13px !important;
    background-color: #00653F;
    border-radius: 50px;
    border: 1px solid;
    border-color: #f9f9f9;
    text-decoration: none;
    text-transform: uppercase;
    cursor: pointer;
    max-width: 50%;
    margin-left: 20px;
    text-align: center;
}
}

@media only screen and (max-width: 1260px) {
  html body div#wprmenu_bar {
    padding-top: 35px;
    padding-bottom: 35px;
  }
  .menu-header-container{
    display: none;
  }
  #wprmenu_bar .menu_title {
  display: flex ;
  line-height: 0px;
  top: -6px;
}
}



a.n2-style-53f1a75d7deb188a5e9ed98abafc1f62-heading {
    display: inline-block !important;
    padding: 10px 20px !important;
    background-color: white !important;
    border-radius: 50px !important;
    border: 1px solid #00653F !important;
    color: #00653F !important;
    font-weight: bold !important;
    font-size: 12px !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
}

a.n2-style-53f1a75d7deb188a5e9ed98abafc1f62-heading:hover {
    background-color: #00653F !important;
    color: white !important;
}

.texte-article{
  margin-left: 300px;
  margin-right: 300px;
}

.h1_post_blog {
    margin-left: 400px;
    margin-right: 400px;
  }

/* Mobile (max-width 767px) */
@media (max-width: 767px) {
  .texte-article{
    margin-left: 5px;
    margin-right: 5px;
  }
}

.img-article img{
    border-radius: 0px !important;
}


/* Grille logos partenaires */
.section-partenaires.wp-block-columns {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr)); /* 6 colonnes desktop */
  gap: 20px;
  align-items: center;
  justify-items: center;
}

/* Tablette */
@media (max-width: 1024px) {
  .section-partenaires.wp-block-columns {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Mobile : 2 colonnes */
@media (max-width: 768px) {
  .section-partenaires.wp-block-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #mg-wprm-wrap{
    margin-top: 35px;
}
.contactez-nous{
    display: none;
}
}


/* Grille 2 colonnes sur mobile pour la section chiffres */
@media (max-width: 781px) {
  .chiffres-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 16px !important;            /* espace entre les cartes */
    align-items: start;
  }
  .chiffres-grid .wp-block-column {
    flex: unset !important;          /* neutralise le flex WordPress */
    width: auto !important;
    margin: 0 !important;
  }
  .chiffres-grid figure {
    display: flex;
    justify-content: center;
  }
}


/* Nettoyage marges par défaut des colonnes Gutenberg */
.section-partenaires.wp-block-columns > .wp-block-column {
  margin: 0 !important;
}

/* Taille/centrage des logos */
.section-partenaires img {
  max-width: 160px; /* ajuste si besoin */
  width: 100%;
  height: auto;
}

/* Couleur du lien actif dans le menu mobile (WP Responsive Menu) */
#mg-wprm-wrap li.current-menu-item > a,
#mg-wprm-wrap li.current_page_item > a,
#mg-wprm-wrap li.current-menu-ancestor > a,
#mg-wprm-wrap li.current_page_ancestor > a,
#mg-wprm-wrap a[aria-current="page"] {
  color: #ffffff !important;              /* texte visible */
  font-weight: 600 !important;            /* mettez 500/600 selon la typo */
}

/* S'assurer que le lien reste visible au survol / focus */
#mg-wprm-wrap li a:hover,
#mg-wprm-wrap li a:focus,
#mg-wprm-wrap li a:active {
  color: #ffffff !important;
  opacity: 1 !important;
}

/* Si le thème met le texte à 0 ou masque le libellé */
#mg-wprm-wrap a {
  text-indent: 0 !important;
  font-size: 16px !important;
  line-height: 1.35 !important;
  visibility: visible !important;
}

/* Submenu : garder l'état actif visible aussi */
#mg-wprm-wrap .sub-menu li.current-menu-item > a,
#mg-wprm-wrap .sub-menu a[aria-current="page"] {
  color: #ffffff !important;
}

.wprmenu_icon span {
  opacity: 1 !important;
  visibility: visible !important;
  display: inline !important;   /* ou block selon le besoin */
  transition: none !important;  /* pour enlever l'effet fade-in au hover */
}

/* On s'assure que le bouton est un conteneur */
.bouton-dec-gites {
  position: relative; /* nécessaire pour placer le tooltip */
  cursor: pointer;
}

/* Le tooltip caché par défaut */
.bouton-dec-gites::after {
  content: "Redirection vers le site départemental de réservation Gîtes de France® Ariège";
  position: absolute;
  bottom: -40px; /* position sous le bouton, ajuste si besoin */
  left: 10%;
  transform: translateX(-50%);
  background: #333; /* fond noir/gris foncé */
  color: #fff; /* texte blanc */
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 9999;
}

/* --- A. Sécurité générale --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: hidden; }

/* Les conteneurs flex Gutenberg : que ça casse à la ligne et que les enfants puissent rétrécir */
.is-layout-flex { flex-wrap: wrap !important; }
.is-layout-flex > * { min-width: 0 !important; }   /* <- évite le débordement en mobile */

/* --- B. Query Loop / Post Template : 100%, pas de padding parasite --- */
.wp-block-query,
.wp-block-post-template {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none;
}
.wp-block-post-template > li {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden; /* coupe tout débordement résiduel */
}

/* Neutraliser les paddings inline injectés par Gutenberg dans les sous-blocs */
.wp-block-post-template :where(.wp-block-post-title,
                               .wp-block-post-date,
                               .wp-block-post-excerpt,
                               .wp-block-read-more)[style*="padding-"]{
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  max-width: 100% !important;
}

/* --- C. Image mise en avant --- */
/* 1) Cacher totalement le placeholder quand il n’y a PAS d’image à la une */
.wp-block-post-featured-image .components-placeholder { 
  display: none !important; 
}

/* 2) Vraies images : largeur fluide, pas de hauteur forcée, pas de padding */
.wp-block-post-featured-image,
.wp-block-post-featured-image figure,
.wp-block-post-featured-image img {
  display: block;
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  padding: 0 !important;
  object-fit: cover;
}

/* --- D. Bouton / textes : ne dépassent jamais --- */
.wp-block-post-title,
.wp-block-post-excerpt,
.wp-block-read-more {
  max-width: 100% !important;
  overflow-wrap: anywhere;
}

/* --- E. Mobile : 1 colonne propre --- */
@media (max-width: 782px) {
  .wp-block-post-template {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--wp--style--block-gap, 16px);
  }
}

/* --- F. Parents à padding global / alignfull : restent dans 100% --- */
.has-global-padding,
.alignfull {
  box-sizing: border-box !important;
  max-width: 100% !important;
}

.fil_ariane{
    margin-left: 40px;
}

.element-centre{
    display: flex !important;
    justify-content: center !important;
}

.element-centre-partenaires{
    display: flex !important;
    justify-content: center !important;
}

.screen-reader-text {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0,0,0,0);
border: 0;
}