.elementor-kit-6{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}/* Start custom CSS *//******************************************************
  1. FONDS VERTS GÉNÉRIQUES ET DÉGRADÉS — VERSION PREMIUM VIBRANTE
******************************************************/

/* Vert clair tropical plus lumineux */
.fond-vert-section,
#fond-vert-pf,
.fond-vert-section > .elementor-container,
#fond-vert-pf > .elementor-container,
.fond-vert-section > .elementor-widget-wrap,
#fond-vert-pf > .elementor-widget-wrap {
    background: linear-gradient(
        180deg,
        #D9FFE8 0%,   /* plus frais, plus lumineux */
        #C8FFD8 100%  /* vert clair plus vibrant */
    );
}

/* Dégradé vert pastel premium */
.fond-degrade-vert-pastel {
    background: linear-gradient(
        180deg,
        #7EDDB8 0%,   /* pastel vert intensifié */
        #F8FFF8 100%  /* blanc légèrement teinté vert */
    );
}

/* Dégradé corail pastel premium */
.fond-degrade-corail-pastel {
    background: linear-gradient(
        180deg,
        #FF8F7E 0%,   /* corail plus chaleureux */
        #FFEDEA 100%  /* blanc rosé plus visible */
    );
}

/************************************************************/
/* CLASSE GÉNÉRALE : APPLIQUE LE DÉGRADÉ AUX AUTRES SECTIONS */
/************************************************************/
section.fond-degrade-vert-corail, 
.elementor-section.fond-degrade-vert-corail {
    background: linear-gradient(
        135deg, 
        #56E3A6 0%,   /* Vert tropical vibrant */
        #FFFFFF 45%,  /* Transition blanc pur */
        #FF827E 100%  /* Corail solaire intense */
    ) !important;
}
/************************************************************/
/* SECTION MENU NAVIGATION — NETTOYÉE ET CORRIGÉE           */
/************************************************************/
.menu-fixe {
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    width: 100% !important;
    background-color: rgba(255, 255, 255, 0.98) !important; /* Fond bien opaque pour ne pas voir le hero dessous */
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    min-height: 70px !important; /* Hauteur fixe pour éviter le chevauchement */
    overflow: visible !important;
}

/* --- RÉGLAGES ORDINATEUR (Desktop) --- */
@media (min-width: 1025px) {
    /* On cache le hamburger */
    .elementor-menu-toggle {
        display: none !important;
    }
    /* On montre le menu texte */
    .elementor-nav-menu--main {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    /* On repousse le Hero vers le bas pour qu'il ne soit pas caché par le menu */
    #mon-hero-principal, .section-studio-hero {
        margin-top: 0 !important;
        padding-top: 30px !important;
    }
}

/* --- RÉGLAGES MOBILE (iPhone / Tablettes) --- */
@media (max-width: 1024px) {
    .elementor-nav-menu--main:not(.elementor-nav-menu--dropdown) {
        display: none !important;
    }
    .elementor-menu-toggle {
        display: flex !important;
        align-items: center !important;
        background-color: rgba(46, 126, 81, 0.1) !important;
        border-radius: 8px;
        padding: 10px !important;
    }
    /* Garder le style du menu déroulant qui fonctionne bien */
    .elementor-nav-menu--dropdown {
        top: 100% !important;
        background-color: #ffffff !important;
    }
}
/************************************************************/
/* RÉGLAGE SPÉCIFIQUE DU HERO (VIA ID)                      */
/************************************************************/
#mon-hero-principal {
    background: linear-gradient(
        135deg, 
        #56E3A6 0%,   /* Vert tropical vibrant */
        #FFFFFF 45%,  /* Transition blanc pur */
        #FF827E 100%  /* Corail solaire intense */
    ) !important;
    min-height: 90vh !important;
    display: flex !important;
    align-items: center !important;
}


/************************************************************/
/* MASQUER LE MENU ASTRA                                    */
/************************************************************/
header.site-header,
.ast-site-header-wrap,
.ast-primary-header-bar,
.main-header-menu,
.ast-nav-menu {
    display: none !important;
}
****************************************************
  2. HERO STUDIO ET TITRES
******************************************************/
.section-studio-hero {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 20px 80px;
    border-radius: 24px;
    overflow: hidden;
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    min-height: 90vh;
}
.titre-studio-fixe .elementor-heading-title {
    display: inline-block;
    padding: 18px 40px;
    background: #fff;
    border-radius: 40px;
    color: #0099cc;
    font-weight: 800;
    font-size: 32px;
    text-align: center;
    box-shadow: 0 18px 40px rgba(0,0,0,0.30);
    text-shadow: 0 3px 8px rgba(0,0,0,0.35);
}
.intro-studio-fixe .elementor-heading-title {
    max-width: 80%;
    margin: 0 auto;
    padding: 12px 24px;
    background: rgba(255,255,255,0.96);
    border-radius: 30px;
    color: #005b74;
    font-weight: 600;
    font-size: 18px;
    text-align: center;
    box-shadow: 0 14px 35px rgba(0,0,0,0.35);
}

@media (max-width: 767px) {
    .section-studio-hero { padding: 40px 12px 50px; min-height: 60vh; }
    .titre-studio-fixe .elementor-heading-title { font-size: 24px; padding: 14px 24px; }
    .intro-studio-fixe .elementor-heading-title { max-width: 92%; font-size: 16px; padding: 10px 18px; }
}

/******************************************************
  3. TEXTE ENCADRÉ (GÉNÉRAL)
******************************************************/
.texte-encadre-studio {
    background: rgba(255,255,255,0.92);
    border-radius: 24px;
    padding: 28px 40px;
    max-width: 720px;
    margin: 32px auto 40px;
    color: #222;
    font-size: 17px;
    line-height: 1.7;
    text-align: center;
    box-shadow: 0 18px 45px rgba(0,0,0,0.35);
    backdrop-filter: blur(4px);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.texte-encadre-studio:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(0,0,0,0.45); }

@media (max-width: 767px) {
    .texte-encadre-studio { margin: 24px 16px 32px; max-width: 100%; padding: 22px; font-size: 16px; }
}

/******************************************************
  4. BOUTONS D'APPEL À L'ACTION
******************************************************/
.bouton-reserver-corail .elementor-button {
    background-color: var(--couleur-pastel-corail);
    color: #fff;
    border-radius: 50px;
    font-weight: 700;
    padding: 14px 30px;
    box-shadow: 0 10px 20px rgba(255, 179, 167, 0.5);
    transition: all 0.3s ease;
}
.bouton-reserver-corail .elementor-button:hover {
    background-color: var(--couleur-accent-corail-fonce);
    box-shadow: 0 15px 30px rgba(255, 179, 167, 0.7);
    transform: translateY(-2px);
}
.bouton-corail-vif .elementor-button {
    background-color: #FF6B6B !important;
    color: #FFFFFF !important;
    font-weight: 800 !important;
    border-radius: 50px !important;
    box-shadow: 0 10px 25px rgba(255, 107, 107, 0.4) !important;
}
/******************************************************
  0. VARIABLES GLOBALES ET PALETTE COULEUR
******************************************************/
:root {
    --couleur-primaire-tropical: #00A86B;
    --couleur-secondaire-tropical: #007F55;
    --couleur-icone-cercle: #F0F0F0;
    --couleur-texte-lisible: #444444;
    --fond-section-vert-clair1: #F0FFF0;
    --fond-section-vert-clair2: #E0FFE0;
    --couleur-pastel-vert: #A9E4C9;
    --couleur-pastel-corail: #FFB3A7;
    --couleur-accent-corail-fonce: #E88377;
    --couleur-fond-blanc-opaque: rgba(255, 255, 255, 0.95);
    --did-vert-fond: #C1EAD1;
    --did-corail-vif: #FF6B6B;
}

/******************************************************
  1. FONDS VERTS GÉNÉRIQUES ET NOUVEAUX DÉGRADÉS
******************************************************/
.fond-vert-section, #fond-vert-pf, .fond-vert-section > .elementor-container, #fond-vert-pf > .elementor-container, .fond-vert-section > .elementor-widget-wrap, #fond-vert-pf > .elementor-widget-wrap {
    background: linear-gradient(180deg, var(--fond-section-vert-clair1) 0%, var(--fond-section-vert-clair2) 100%);
}
.fond-degrade-vert-pastel { background: linear-gradient(180deg, var(--couleur-pastel-vert) 0%, #FFFFFF 100%); }
.fond-degrade-corail-pastel { background: linear-gradient(180deg, var(--couleur-pastel-corail) 0%, #FFF8F7 100%); }
.fond-degrade-vert-corail { background: linear-gradient(135deg, #C1EAD1 0%, #FFFFFF 50%, #FFE4E4 100%) !important; }


/******************************************************
  6. POINTS FORTS (DIMENTIONS FIGÉES & ICÔNES MAX)
******************************************************/
.section-points-forts {
    background: linear-gradient(180deg, #FAFFFE, #EAF7F3); padding: 60px 20px; border-radius: 22px;
}

.pf-card {
    background: #fff; border-radius: 12px; padding: 25px 15px; box-shadow: 0 6px 20px rgba(0,0,0,0.20);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    
    /* FIGER LES DIMENSIONS */
    width: 15% !important; 
    aspect-ratio: 1 / 1.5 !important; /* Un peu plus haut pour les grosses icônes */
    flex: 0 0 15% !important;
    
    transition: transform 0.3s ease; text-align: center; overflow: hidden;
}

.pf-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(0,0,0,0.30); }

/* CERCLE DE L'ICÔNE (AGRANDI) */
.icon-cercle {
    width: clamp(80px, 8vw, 110px) !important; /* Augmenté significativement */
    height: clamp(80px, 8vw, 110px) !important;
    background: var(--couleur-icone-cercle);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
    flex-shrink: 0;
}

/* TAILLE DE L'ÉMOJI / CONTENU INTERNE (IMPOSANTE) */
.icon-cercle .elementor-heading-title {
    font-size: clamp(40px, 4vw, 60px) !important; /* Émojis beaucoup plus gros */
    line-height: 1 !important;
    margin: 0 !important;
}

/* TITRES DES POINTS FORTS */
.pf-card h4, .pf-card .elementor-heading-title:not(.icon-cercle *) {
    font-size: clamp(14px, 1.4vw, 18px) !important;
    font-weight: 800;
    margin: 0 !important;
    line-height: 1.2;
}

@media (max-width: 1024px) {
    .pf-card { width: 30% !important; flex: 0 0 30% !important; margin-bottom: 20px; }
}

@media (max-width: 767px) {
    .pf-card { width: 100% !important; aspect-ratio: auto !important; flex-direction: row; justify-content: flex-start; padding: 20px; }
    .icon-cercle { width: 75px !important; height: 75px !important; margin-right: 20px; margin-bottom: 0; }
    .icon-cercle .elementor-heading-title { font-size: 40px !important; }
}

/******************************************************
  RESTE DU CSS (Inchangé pour préserver le site)
******************************************************/
.section-studio-hero { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 60px 20px 80px; border-radius: 24px; overflow: hidden; background-size: cover; background-position: center top; min-height: 90vh; }
.titre-studio-fixe .elementor-heading-title { display: inline-block; padding: 18px 40px; background: #fff; border-radius: 40px; color: #0099cc; font-weight: 800; font-size: 32px; text-align: center; box-shadow: 0 18px 40px rgba(0,0,0,0.30); text-shadow: 0 3px 8px rgba(0,0,0,0.35); }
.texte-encadre-studio { background: rgba(255,255,255,0.92); border-radius: 24px; padding: 28px 40px; max-width: 720px; margin: 32px auto 40px; color: #222; font-size: 17px; text-align: center; box-shadow: 0 18px 45px rgba(0,0,0,0.35); }
.bouton-reserver-corail .elementor-button { background-color: var(--couleur-pastel-corail); color: #fff; border-radius: 50px; font-weight: 700; padding: 14px 30px; }
.bouton-corail-vif .elementor-button { background-color: #FF6B6B !important; color: #FFFFFF !important; border-radius: 50px !important; }
.galerie-studio .elementor-image-carousel-wrapper .swiper-slide { aspect-ratio: 4 / 3; background: #111; overflow: hidden; border-radius: 12px; box-shadow: 0 10px 25px rgba(0,0,0,0.35); }
.image-cadre-astra img { border-radius: 20px !important; border: 10px solid var(--couleur-pastel-corail) !important; }
.carte-reservation-didine { background-color: #FFFFFF !important; border: 6px solid #FF6B6B !important; border-radius: 25px !important; }
.card-mobilite-tdh { background: #ffffff !important; padding: 35px !important; border-radius: 20px !important; box-shadow: 0 12px 30px rgba(0,0,0,0.08) !important; border-left: 8px solid #2E7E51 !important; }
/******************************************************
  5. LISTE DES ÉQUIPEMENTS (CARD EFFECT RESTAURÉ)
******************************************************/
/* Utilisez la classe "liste-confort" sur votre widget Liste d'Icônes */
.liste-confort .elementor-icon-list-item {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 12px 15px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.liste-confort .elementor-icon-list-item:hover { 
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

@media (min-width: 1025px) {
    .liste-confort .elementor-icon-list-items { display: flex; flex-wrap: wrap; gap: 15px; }
    .liste-confort .elementor-icon-list-item { width: calc(50% - 10px); margin-bottom: 0px; }
}


/******************************************************
  7. GALERIES CARROUSELS - FORMAT 4/3 UNIFIÉ
******************************************************/
.galerie-studio .elementor-image-carousel-wrapper .swiper-slide,
.galerie-tdh .elementor-image-carousel-wrapper .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 4 / 3;
    background: #000000; /* Bandes noires */
    overflow: hidden;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    transition: transform 0.4s ease !important;
}

.galerie-studio .elementor-image-carousel-wrapper .swiper-slide:hover,
.galerie-tdh .elementor-image-carousel-wrapper .swiper-slide:hover {
    transform: scale(1.02);
}

.galerie-studio .elementor-image-carousel-wrapper img,
.galerie-tdh .elementor-image-carousel-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/******************************************************
  8. NAVIGATION CARROUSELS (RONDS NOIRS/VERTS)
******************************************************/
.galerie-studio .elementor-swiper-button,
.galerie-tdh .elementor-swiper-button,
.elementor-lightbox .dialog-lightbox-button,
.elementor-lightbox .elementor-swiper-button-prev,
.elementor-lightbox .elementor-swiper-button-next {
    width: 44px !important;
    height: 44px !important;
    border-radius: 50% !important;
    background-color: #000000 !important;
    border: 2px solid rgba(255,255,255,0.3) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 1 !important;
    transition: all 0.3s ease !important;
    z-index: 9999 !important;
}

.galerie-studio .elementor-swiper-button:hover,
.galerie-tdh .elementor-swiper-button:hover,
.elementor-lightbox .dialog-lightbox-button:hover,
.elementor-lightbox .elementor-swiper-button-prev:hover,
.elementor-lightbox .elementor-swiper-button-next:hover {
    background-color: var(--couleur-primaire-tropical) !important;
    transform: scale(1.1);
    border-color: #ffffff !important;
}

.galerie-studio .elementor-swiper-button i,
.galerie-tdh .elementor-swiper-button i,
.elementor-lightbox .elementor-swiper-button-prev i,
.elementor-lightbox .elementor-swiper-button-next i {
    color: #ffffff !important;
    font-size: 18px !important;
}

/******************************************************
  9. STYLE HERO IMAGE ET BORDURE
******************************************************/
.image-cadre-astra { position: relative; width: fit-content; margin: 40px auto; z-index: 1; max-width: 100%; }
.image-cadre-astra img {
    border-radius: 20px !important;
    border: 10px solid var(--couleur-pastel-corail) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,0.2) !important;
}

/******************************************************
  11. TARIFS ET CONTACT
******************************************************/
.carte-reservation-didine {
    background-color: #FFFFFF !important;
    border: 6px solid #FF6B6B !important;
    border-radius: 25px !important;
    box-shadow: 0 20px 45px rgba(255, 107, 107, 0.2) !important;
}
.bloc-legal-taxe {
    background: rgba(255, 255, 255, 0.7) !important;
    border-left: 5px solid #FF6B6B !important;
    padding: 20px !important;
    border-radius: 15px !important;
}
.titre-contact-didine { color: #2E7E51 !important; font-weight: 800; margin-bottom: 20px; }
.bloc-coordonnees-didine {
    background: #FFFFFF !important;
    border-left: 6px solid #FF6B6B !important;
    padding: 30px !important;
    border-radius: 0 25px 25px 0 !important;
    box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important;
}
/************************************************************/
/* SECTION TARIFS — DISPOSITION EN 2 COLONNES               */
/************************************************************/

/* ✅ Desktop : disposition horizontale */
@media (min-width: 1025px) {
  
  /* Conteneur principal des deux colonnes */
  #tarifs-reservation .elementor-element-6600bfc1 {
    display: flex !important;
    flex-direction: row !important;
    gap: 40px; /* espace entre les colonnes */
  }

  /* Colonne gauche : carte tarif + calendrier */
  #tarifs-reservation .elementor-element-273515f7 {
    width: 50% !important;
  }

  /* Colonne droite : formulaire de réservation */
  #tarifs-reservation .elementor-element-6f3fdab8 {
    width: 50% !important;
  }
}

/************************************************************/
/* SECTION TARIFS — MOBILE : EMPILEMENT VERTICAL            */
/************************************************************/

@media (max-width: 1024px) {

  /* Inversion de l’ordre : tarifs avant formulaire */
  #tarifs-reservation .elementor-element-6600bfc1 {
    display: flex !important;
    flex-direction: column-reverse !important;
  }
}
/******************************************************
  FORMULAIRE — STYLE TROPICAL PREMIUM
******************************************************/

/* Conteneur du formulaire */
form.elementor-form {
  background: #AEE8CF;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 15px 45px rgba(0,0,0,0.06);
}

/* Labels */
form.elementor-form .elementor-field-label {
  font-weight: 600;
  color: #2E7E51;
  margin-bottom: 5px;
}

/* Champs */
form.elementor-form .elementor-field {
  border: 2px solid #CDEFE0;
  border-radius: 12px;
  padding: 12px 15px;
  background: #FFFFFF;
  transition: all 0.25s ease;
}

/* Focus sur les champs */
form.elementor-form .elementor-field:focus {
  border-color: #2E7E51;
  box-shadow: 0 0 0 3px rgba(46,126,81,0.15);
}

/* Bouton envoyer */
form.elementor-form .elementor-button {
  background: linear-gradient(135deg, #2E7E51, #38B97A);
  border-radius: 12px;
  padding: 14px 28px;
  font-size: 1.1em;
  font-weight: 700;
  color: #FFFFFF;
  transition: all 0.25s ease;
  box-shadow: 0 10px 25px rgba(46,126,81,0.25);
}

/* Survol bouton */
form.elementor-form .elementor-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 35px rgba(46,126,81,0.35);
}

/* Champs obligatoires */
form.elementor-form .elementor-mark-required .elementor-field-label:after {
  content: " *";
  color: #FF6B6B;
  font-weight: 700;
}
/* DESIGN DU BOUTON AVIS BOOKING - VERSION FINALE */
.bouton-avis-booking .elementor-button {
    background-color: #ffffff !important; /* Fond blanc initial */
    color: #2E7E51 !important; /* Texte vert Lagon */
    border: 2px solid #2E7E51 !important; /* Bordure verte */
    border-radius: 50px !important; /* Forme pilule élégante */
    padding: 16px 40px !important;
    font-weight: 700 !important;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 14px !important;
    box-shadow: 0 8px 20px rgba(46, 126, 81, 0.1) !important;
    transition: all 0.3s ease-in-out !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

/* Effet au survol (Hover) */
.bouton-avis-booking .elementor-button:hover {
    background-color: #2E7E51 !important; /* Le bouton se remplit en vert */
    color: #ffffff !important; /* Le texte et les étoiles deviennent blancs */
    transform: translateY(-4px); /* Soulèvement léger */
    box-shadow: 0 12px 25px rgba(46, 126, 81, 0.2) !important;
}

/* Ajustement des étoiles dans le bouton */
.bouton-avis-booking .elementor-button-content-wrapper {
    display: flex;
    gap: 10px;
}
@media (max-width: 767px) {
    .bouton-avis-booking .elementor-button {
        padding: 12px 20px !important;
        font-size: 12px !important;
    }
}
/************************************************************/
/* SECTION TERRE-DE-HAUT - DESIGN VIBRANT & ANTILLES        */
/************************************************************/

/************************************************************/
/* FOND ÉQUILIBRÉ : DOUX MAIS AVEC DU CARACTÈRE             */
/************************************************************/

.section-destination-tdh.fond-degrade-vert-corail {
    /* Équilibre entre Vert d'eau (A2D9CE), Sable (FDF2E9) et Corail Doux (FFBBAA) */
    background: linear-gradient(135deg, #A2D9CE 0%, #FDF2E9 50%, #FFBBAA 100%) !important;
    
    padding: 90px 20px !important;
    position: relative;
    border-top: 1px solid rgba(162, 217, 206, 0.3);
}

/* On garde l'ombre des cartes très légère pour ne pas alourdir le design */
.card-mobilite-tdh, 
#infos-pratiques .elementor-widget-container div {
    box-shadow: 0 10px 30px rgba(130, 180, 160, 0.15) !important;
    background: #ffffff !important;
    border-radius: 20px !important;
}
/* 2. Titre et Logo (Blasons) */
.section-destination-tdh .header-blasons-titre {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 25px;
    margin-bottom: 50px;
    width: 100%;
}

/* 3. Style des "Cards" (Expertise locale et Mobilité) */
/* Ce style unifie le bloc Expertise (#infos-pratiques) et le bloc Mobilité (.card-mobilite-tdh) */
#infos-pratiques .elementor-widget-container div,
.card-mobilite-tdh {
    background: #ffffff !important;
    padding: 40px !important;
    border-radius: 25px !important;
    box-shadow: 0 15px 40px rgba(46, 126, 81, 0.12) !important; /* Ombre teintée verte plus profonde */
    margin: 40px auto !important;
    max-width: 900px;
    transition: all 0.3s ease-in-out;
    border: 1px solid rgba(255, 255, 255, 0.5);
}

/* Effet de survol sur les cartes */
#infos-pratiques .elementor-widget-container div:hover,
.card-mobilite-tdh:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 50px rgba(46, 126, 81, 0.18) !important;
}

/* Bordures colorées distinctives */
#infos-pratiques .elementor-widget-container div {
    border-left: 10px solid #FF6B6B !important; /* Corail vif pour Expertise */
}

.card-mobilite-tdh {
    border-left: 10px solid #2E7E51 !important; /* Vert émeraude pour Mobilité */
}

/* 4. Typographie et Listes */
.card-mobilite-tdh p, 
#infos-pratiques p {
    color: #444 !important;
    line-height: 1.8 !important;
    font-size: 16px !important;
}

/* Puces personnalisées pour la mobilité */
.card-mobilite-tdh p {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
}

.card-mobilite-tdh p::before {
    content: "📍"; /* Icône de destination */
    position: absolute;
    left: 0;
    font-size: 1.2em;
}

/* 5. Style du lien spécial (Scoot'Aux Saintes) */
.card-mobilite-tdh a {
    background-color: #ffd43b !important; /* Jaune "soleil" plus saturé */
    padding: 8px 18px !important;
    border-radius: 12px !important;
    color: #000 !important;
    text-decoration: none !important;
    font-weight: 700 !important;
    display: inline-block;
    margin-top: 15px;
    box-shadow: 0 4px 10px rgba(255, 212, 59, 0.3);
    transition: transform 0.2s ease;
}

.card-mobilite-tdh a:hover {
    transform: scale(1.05);
    background-color: #fcc419 !important;
}

/* 6. Boutons de transport (CTM Deher / Express) */
.bouton-corail-vif .elementor-button {
    border-radius: 50px !important;
    padding: 15px 35px !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px;
    box-shadow: 0 8px 20px rgba(255, 107, 107, 0.3) !important;
    transition: all 0.3s ease !important;
}

.bouton-corail-vif .elementor-button:hover {
    background-color: #2E7E51 !important; /* Devient vert au survol pour le rappel nature */
    box-shadow: 0 10px 25px rgba(46, 126, 81, 0.4) !important;
}

/* 7. Adaptabilité Mobile (Responsive) */
@media (max-width: 767px) {
    .section-destination-tdh {
        padding: 50px 15px !important;
    }
    
    .section-destination-tdh .header-blasons-titre {
        flex-direction: column !important;
        gap: 15px;
        text-align: center;
    }

    #infos-pratiques .elementor-widget-container div,
    .card-mobilite-tdh {
        padding: 25px !important;
        border-left-width: 6px !important;
    }
}
/******************************************************
  SECTION TARIFS & RÉSERVATION — STYLE PREMIUM
******************************************************/

/* SECTION GLOBALE */
#tarifs-reservation-premium.section-tarifs-premium {
    padding: 80px 20px;
    border-radius: 25px;
}

/******************************************************
  BLOC INTRO (PLEINE LARGEUR)
******************************************************/
#intro-tarifs-reservation.intro-tarifs-premium {
    text-align: center;
    padding: 40px 20px;
    border-radius: 20px;
    background: linear-gradient(
        180deg,
        #6ED9AE 0%,
        #F4FFF4 100%
    );
    margin-bottom: 50px;
}

/* Titre principal */
#intro-tarifs-reservation h2,
#intro-tarifs-reservation .elementor-heading-title {
    font-weight: 800;
    font-size: 38px;
    color: #2E7E51;
}

/* Sous-titre */
#intro-tarifs-reservation h4 {
    color: #2E9955;
    font-weight: 600;
}

/* Liste horaires */
#intro-tarifs-reservation .liste-infos-premium li {
    font-size: 1.1em;
    color: #054E20;
    margin-bottom: 6px;
}

/******************************************************
  CONTENEUR PRINCIPAL (2 COLONNES)
******************************************************/
#conteneur-tarifs-formulaire.conteneur-tarifs-premium {
    display: flex;
    flex-direction: row;
    gap: 40px;
}

@media (max-width: 1024px) {
    #conteneur-tarifs-formulaire.conteneur-tarifs-premium {
        flex-direction: column-reverse;
    }
}

/******************************************************
  COLONNE GAUCHE — TARIFS + CALENDRIER
******************************************************/
#colonne-tarifs.carte-tarifs-premium {
    background: #FFFFFF;
    border-radius: 25px;
    border: 5px solid #FF7A68;
    padding: 40px 30px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

/* Tarif principal */
#colonne-tarifs .elementor-heading-title {
    font-size: 42px;
    font-weight: 900;
    color: #2E7E51;
}

/* Réduction */
#colonne-tarifs h5 {
    color: #2E9955;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Texte explicatif */
#colonne-tarifs p {
    color: #573A3A;
    line-height: 1.6;
    margin-bottom: 20px;
}

/******************************************************
  CALENDRIER WP SIMPLE BOOKING CALENDAR
******************************************************/
#colonne-tarifs .wpsbc-container {
    margin-top: 20px;
}
/* Amélioration visuelle du calendrier WP Booking System */
.wpsbc-container {
    border: 2px solid #E6FAF0 !important; /* Bordure vert très pâle */
    border-radius: 15px !important;
    padding: 10px !important;
    background: #FFFFFF !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05) !important;
}

.wpsbc-container .wpsbc-month-name {
    color: #2E7E51 !important; /* Titre du mois en Vert Lagon */
    font-weight: 800 !important;
}
/******************************************************
  COLONNE DROITE — FORMULAIRE
******************************************************/
#colonne-formulaire.formulaire-reservation-premium {
    background: #FFFFFF;
    border-radius: 25px;
    padding: 30px;
    box-shadow: 0 10px 35px rgba(0,0,0,0.05);
}

/* Champs du formulaire */
#colonne-formulaire .elementor-field-group input,
#colonne-formulaire .elementor-field-group textarea {
    border-radius: 12px;
    border: 1px solid #DDEEE5;
    padding: 12px 15px;
    font-size: 1em;
}

/* Focus */
#colonne-formulaire .elementor-field-group input:focus,
#colonne-formulaire .elementor-field-group textarea:focus {
    border-color: #6ED9AE;
    box-shadow: 0 0 0 2px rgba(110,217,174,0.25);
}

/* Bouton envoyer */
#colonne-formulaire .elementor-button {
    background: linear-gradient(135deg, #6ED9AE, #FF7A68);
    border-radius: 12px;
    padding: 14px 25px;
    font-weight: 700;
    font-size: 1.1em;
    border: none;
    transition: 0.3s ease;
}

#colonne-formulaire .elementor-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.15);
}
/******************************************************
  EFFET CARDS PREMIUM — TARIFS & RÉSERVATION
******************************************************/

/* SECTION GLOBALE */
#tarifs-reservation-premium.section-tarifs-premium {
    border-radius: 25px;
    padding: 80px 20px;
}

/******************************************************
  CARTE : COLONNE TARIFS
******************************************************/
#colonne-tarifs.carte-tarifs-premium {
    background: #FFFFFF;
    border-radius: 25px;
    border: 5px solid #FF7A68;
    padding: 40px 30px;

    /* Ombre premium */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);

    /* Effet card flottante */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#colonne-tarifs.carte-tarifs-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.12);
}

/******************************************************
  CARTE : COLONNE FORMULAIRE
******************************************************/
#colonne-formulaire.formulaire-reservation-premium {
    background: #FFFFFF;
    border-radius: 25px;
    padding: 30px;

    /* Ombre premium */
    box-shadow: 0 15px 45px rgba(0, 0, 0, 0.08);

    /* Effet card flottante */
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#colonne-formulaire.formulaire-reservation-premium:hover {
    transform: translateY(-6px);
    box-shadow: 0 25px 55px rgba(0, 0, 0, 0.12);
}
.confirmation-reservation {
  background: #E6FAF0;
  border-left: 5px solid #2E7E51;
  padding: 18px 22px;
  border-radius: 12px;
  font-size: 1.1em;
  color: #2E7E51;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/******************************************************
  BLOC INTRO — LÉGER EFFET CARD
******************************************************/
#intro-tarifs-reservation.intro-tarifs-premium {
    border-radius: 20px;

    /* Ombre légère */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);

    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

#intro-tarifs-reservation.intro-tarifs-premium:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.10);
}

/******************************************************
  ANIMATION DOUCE AU SURVOL
******************************************************/
.carte-tarifs-premium,
.formulaire-reservation-premium,
.intro-tarifs-premium {
    will-change: transform, box-shadow;
}
.confirmation-reservation {
  background: #E6FAF0;
  border-left: 5px solid #2E7E51;
  padding: 18px 22px;
  border-radius: 12px;
  font-size: 1.1em;
  color: #2E7E51;
  font-weight: 600;
  box-shadow: 0 8px 25px rgba(0,0,0,0.06);
  animation: fadeInUp 0.6s ease-out;
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
/******************************************************
  RÈGLEMENT INTÉRIEUR — STYLE PREMIUM FINAL
******************************************************/

/* SECTION PRINCIPALE */
#reglement-container.section-reglement-premium {
  background-color: #F2FFF6;
  border-radius: 25px;
  padding: 60px 30px;
  box-shadow: 0 15px 45px rgba(0, 0, 0, 0.06);
}

/* TITRE PRINCIPAL */
#bloc-titre-reglement h2 {
  font-weight: 800;
  font-size: 36px;
  color: #2E7E51;
  text-align: center;
  margin-bottom: 20px;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

#bloc-titre-reglement h2:hover {
  color: #2E9955;
  text-shadow: 0 0 8px rgba(46, 153, 85, 0.3);
}

/* INTRODUCTION */
#intro-reglement p {
  font-size: 1.1em;
  color: #444;
  text-align: center;
  margin-bottom: 30px;
}

/* CONTENEUR DES CARTES */
#conteneur-cartes-reglement.cartes-reglement {
  display: flex;
  gap: 30px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}

@media (max-width: 1024px) {
  #conteneur-cartes-reglement.cartes-reglement {
    flex-direction: column;
  }
}

/* CARTES GAUCHE ET DROITE */
.carte-reglement-gauche,
.carte-reglement-droite {
  border-radius: 18px;
  padding: 25px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  font-size: 1em;
  line-height: 1.6;
}

/* SURVOL */
.carte-reglement-gauche:hover,
.carte-reglement-droite:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 45px rgba(0, 0, 0, 0.10);
}

/* FOND VERT ET CORAIL PLUS VIFS */
.fond-vert-pale {
  background-color: #E6FAF0;
  border-left: 5px solid #2E7E51;
}

.fond-corail-pale {
  background-color: #FFF2F2;
  border-left: 5px solid #FF6B6B;
}

/* TITRES SECTIONS (h3) + effet lumineux */
.carte-reglement-gauche h3,
.carte-reglement-droite h3 {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 700;
  color: #2E9955;
  font-size: 1.2em;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

.carte-reglement-gauche h3:hover,
.carte-reglement-droite h3:hover {
  color: #38B97A;
  text-shadow: 0 0 6px rgba(56, 185, 122, 0.3);
}

/* PARAGRAPHES */
.carte-reglement-gauche p,
.carte-reglement-droite p {
  margin-bottom: 10px;
  color: #333;
}

/* BLOC REMERCIEMENT HARMONISÉ */
#bloc-remerciement.bloc-remerciement {
  background-color: #FFF4F4;
  border: 1px solid #FFCCCC;
  border-radius: 15px;
  padding: 25px;
  text-align: center;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
  margin-bottom: 30px;
}

#bloc-remerciement p {
  margin-bottom: 8px;
  font-size: 1em;
  color: #2E7E51;
  font-weight: 500;
}

/* INFOS LÉGALES HARMONISÉES */
#bloc-infos-legales.infos-legales {
  background-color: #F5F5F5;
  border-top: 1px solid #DDDDDD;
  padding-top: 20px;
  text-align: center;
  font-size: 0.85em;
  color: #777;
  font-style: italic;
}

/* PALETTE PREMIUM */
.section-reglement-premium b {
  color: #2E7E51;
}

.section-reglement-premium em,
.section-reglement-premium i {
  color: #FF7A68;
}
/* RÉDUCTION VISUELLE DU MENU BUNGALOW */
#menu-principal-bungalow {
    min-height: 45px !important;
    height: 45px !important;
}

/* Dimensionnement de l'icône interne */
#menu-principal-bungalow .elementor-menu-toggle i,
#menu-principal-bungalow .elementor-menu-toggle svg {
    font-size: 20px !important;
}

/******************************************************
  MENU BUNGALOW MOBILE : STYLE COMPLET (OUVERT & FERMÉ)
******************************************************/

@media (max-width: 1024px) {

    /* 1. LE BOUTON (QUAND IL EST FERMÉ) */
    #menu-principal-bungalow .elementor-menu-toggle {
        display: flex !important;
        align-items: center !important;
        height: 35px !important;
        width: auto !important;
        padding: 0 12px !important;
        background-color: rgba(46, 126, 81, 0.08) !important;
        border-radius: 8px;
    }

    /* Ajout du mot MENU à côté des 3 barres */
    #menu-principal-bungalow .elementor-menu-toggle::after {
        content: "MENU";
        margin-left: 8px;
        font-size: 13px;
        font-weight: 700;
        color: #2E7E51;
        letter-spacing: 0.5px;
    }

    /* Cacher le mot "MENU" quand le menu est OUVERT (pour ne laisser que la croix) */
    #menu-principal-bungalow .elementor-menu-toggle.elementor-active::after {
        display: none !important;
    }

    /* 2. LE MENU DÉROULANT (CE QUE L'ON VOIT SUR VOTRE PHOTO) */
    #menu-principal-bungalow .elementor-nav-menu--dropdown {
        background-color: #ffffff !important;
        border-radius: 0 0 15px 15px !important;
        box-shadow: 0 10px 25px rgba(0,0,0,0.1) !important;
        padding: 20px !important;
    }

    /* Style des liens (enlever le bleu et le soulignement) */
    #menu-principal-bungalow .elementor-nav-menu--dropdown a {
        color: #2E7E51 !important; /* Votre vert lagon */
        text-decoration: none !important; /* Enlever le soulignement */
        font-weight: 600 !important;
        font-size: 16px !important;
        padding: 12px 0 !important;
        display: block !important;
        border-bottom: 1px solid #f0f0f0 !important; /* Fine ligne de séparation */
    }

    /* Enlever la ligne sous le dernier élément */
    #menu-principal-bungalow .elementor-nav-menu--dropdown li:last-child a {
        border-bottom: none !important;
    }
}/* End custom CSS */