/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */
/* Style pour la barre comme lettrine */
/* Style pour la mise en page globale */

/*--------------------------------------------------------------
# Reset pour l'animation d'intro (section-loader)
--------------------------------------------------------------*/
/* Reset spécifique pour éviter les problèmes de taille */
body:has(.section-loader),
html:has(.section-loader) {
    margin: 0 !important;
    padding: 0 !important;
}

/* Alternative si :has() n'est pas supporté */
.section-loader-screen {
    margin: 0 !important;
    padding: 0 !important;
}

/*--------------------------------------------------------------
# Sticky Footer pour toutes les pages
--------------------------------------------------------------*/
/* Structure flexbox pour coller le footer en bas */
html {
    height: 100%;
    background: #f7f3e9; /* Même couleur que le fond du site */
}

body {
    min-height: 100vh;
    
    overflow-x: hidden; /* Empêcher le scroll horizontal */
    background: #f7f3e9; /* Assurer que le body a la même couleur */
}

body.home {
    overflow-x: hidden; /* Spécifiquement pour la page d'accueil avec l'animation */
}




.text-with-lettrine {
    position: relative;
    padding-left: 40px; /* Espace pour la barre */
    display: flex;
  }
  
  /* Style pour la barre noire comme lettrine */
  .lettrine-bar {
    position: absolute;
    left: 0;
    top: 13px;
    width: 25px;
    height: 8px; /* Hauteur égale au texte */
    background-color: #000;
  }
  
  /* Style pour le contenu du texte */
  .text-content {
    flex: 1;
    text-align: justify;
  }
  
  /* Style pour les bullets personnalisés */
  .bullet-point {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #000;
    margin: 0 8px 0 8px;
    vertical-align: middle;
  }
  
  .with-indent {
    text-indent: 40px; /* Ajustez cette valeur selon le retrait souhaité */
    margin-top: 0;
  }
  
  /* Motif du footer Cesure - Mêmes positions que l'animation de départ */
  
  .cesure-footer-pattern {
    display: flex;
    position: relative;
    width: 100%;
    height: 3vw;
    padding: 20px 0;
   
  }
  
  .cesure-dot {
    position: absolute;
    width: 3vw;
    height: 3vw;
    border-radius: 50%;
    background-color: #000;
    top: 50%;
    transform: translateY(-50%);
  }
  
  .cesure-rectangle {
    position: absolute;
    width: 10vw;
    height: 3vw;
    background-color: #000;
    left: 23%;
    top: 50%;
    transform: translateY(-50%);
  }
  

 
  /* Positions des points correspondant à l'animation de départ */
  .cesure-dot-1 {
    left: 0;
  }
  
  .cesure-dot-2 {
    left: 11%;
  }
  
  .cesure-dot-3 {
    left: 44%;
  }
  
  .cesure-dot-4 {
    left: 53%;
  }
  
  .cesure-dot-5 {
    left: 82%;
  }
  
  .cesure-dot-6 {
    right: 0; /* Utiliser right au lieu de left pour éviter le débordement */
  }
  
  /* Responsive */
  @media (max-width: 768px) {
    .cesure-footer-pattern {
      position: relative; /* Pour le positionnement absolu des enfants */
      width: 100%;
      height: 60px; /* Hauteur fixe pour le positionnement */
      padding: 20px 0;
    }

    .cesure-footer-pattern--small {
      position: relative;
      width: 100%;
      height: 40px;
      padding: 15px 0;
    }
    
    .cesure-footer-pattern .cesure-dot,
    .cesure-footer-pattern .cesure-rectangle {
      position: absolute; /* Positionnement manuel possible */
      top: 50%;
      transform: translateY(-50%);
      height: 6vw;
      background-color: #000;
    }

    .cesure-footer-pattern .cesure-dot {
      width: 6vw;
      border-radius: 50%;
    }

    .cesure-footer-pattern .cesure-rectangle {
      width: 120px;
      
    }

    /* Masquer seulement les dots en trop pour avoir 3 cercles + 1 rectangle */
    .cesure-footer-pattern .cesure-dot-3,
    .cesure-footer-pattern .cesure-dot-4,
    .cesure-footer-pattern .cesure-dot-5 {
      display: none;
    }

    /* Positions spécifiques pour mobile (≤768px) */
    .cesure-footer-pattern .cesure-dot-1 {
      left: 0; /* Premier cercle à gauche */
    }
    
    .cesure-footer-pattern .cesure-dot-2 {
      left: 15%; /* Deuxième cercle */
    }
    
    .cesure-footer-pattern .cesure-rectangle {
      left: 39%; /* Rectangle au centre */
    }
    
    .cesure-footer-pattern .cesure-dot-6 {
      left: 90%; /* Troisième cercle à droite */
    }

    /* Ajustements pour la version --small sur mobile */
    .cesure-footer-pattern--small .cesure-dot,
    .cesure-footer-pattern--small .cesure-rectangle {
      height: 4vw;
    }
    .cesure-footer-pattern--small .cesure-dot {
      width: 4vw;
    }
    .cesure-footer-pattern--small .cesure-rectangle {
      width: 60px;
    }
    
    /* Masquer aussi les dots en trop pour la version small */
    .cesure-footer-pattern--small .cesure-dot-3,
    .cesure-footer-pattern--small .cesure-dot-4,
    .cesure-footer-pattern--small .cesure-dot-5 {
      display: none;
    }

    /* Positions spécifiques pour mobile small (≤768px) */
    .cesure-footer-pattern--small .cesure-dot-1 {
      left: 0; /* Premier cercle à gauche */
    }
    
    .cesure-footer-pattern--small .cesure-dot-2 {
      left: 15%; /* Deuxième cercle */
    }
    
    .cesure-footer-pattern--small .cesure-rectangle {
      left: 25%; /* Rectangle au centre */
    }
    
    .cesure-footer-pattern--small .cesure-dot-6 {
      left: 92% !important; /* Troisième cercle à droite */
    }
  }

  @media (min-width: 769px) and (max-width: 1024px) {
    /* Augmentation de la taille des dots pour les tablettes */
    .cesure-footer-pattern .cesure-dot {
        width: 4vw;
        height: 4vw;
    }
    .cesure-footer-pattern .cesure-rectangle {
        height: 4vw;
    }
    .cesure-footer-pattern--small .cesure-dot,
    .cesure-footer-pattern--small .cesure-rectangle {
        height: 1.5vw;
        width: 1.5vw;
    }
  }

  .elementor .acf-taxonomy-field .acf-taxonomy-term,
.elementor .acf-field-taxonomy .acf-taxonomy-term,
.elementor [data-field_type="taxonomy"] .acf-taxonomy-term {
    display: inline !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    font-size: inherit !important;
    line-height: inherit !important;
    font-weight: inherit !important;
    color: inherit !important;
}

/* Correction supplémentaire pour les widgets dynamiques */
.elementor-widget-theme-post-content .acf-taxonomy-term,
.elementor-widget-posts .acf-taxonomy-term,
.elementor-widget-archive-posts .acf-taxonomy-term {
    all: unset !important;
    display: inline !important;
}

/* Variante small : hauteur 1.5vw */
.cesure-footer-pattern--small {
  height: 1.5vw;
  padding: 10px 0;
}
.cesure-footer-pattern--small .cesure-dot,
.cesure-footer-pattern--small .cesure-rectangle {
  height: 1.5vw;
  width: 1.5vw;

}
.cesure-footer-pattern--small .cesure-rectangle {
  /* Adapter la largeur de la barre si besoin */
  width: 15%;
}

/* Breakpoint spécifique à 768px pour cesure-footer-pattern--small */
@media screen and (max-width: 768px) {
  .cesure-footer-pattern--small {
    height: 2vw;
    padding: 8px 0;
  }
  
  .cesure-footer-pattern--small .cesure-dot,
  .cesure-footer-pattern--small .cesure-rectangle {
    height: 2vw;
    width: 2vw;
  }
  
  .cesure-footer-pattern--small .cesure-rectangle {
    width: 15%;
  }
}

/*--------------------------------------------------------------
# Styles pour les filtres d'agenda
--------------------------------------------------------------*/
/* Container pour les événements */
.cesure-events-container {
  position: relative;
}

/* Container pour les filtres de date et le bouton de bascule */
.cesure-date-filters-container {
  margin-bottom: 20px;
  width: 100%;
}

/* Bouton pour afficher/masquer les filtres */
.cesure-toggle-filters {
  background-color: #f7f3e9;
  color: #000000 !important;
  border: 1px solid #000;
  border-radius: 20px;
  padding: 8px 15px;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 10px;
  transition: all 0.3s ease;
  text-transform: uppercase;
  font-weight: 500;
  display: inline-block;
}

.cesure-toggle-filters:hover,
.cesure-toggle-filters.active {
  background-color: #000 !important;
  color: #f7f3e9 !important;
}

/* Styles des boutons date */
.cesure-date-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  width: 100%;
}

.cesure-filter-btn {
  background-color: #f7f3e9;
  color: #000000 !important;
  border: none;
  padding: 10px 15px;
  font-size: 13px;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 400;
  margin: 0;
  transition: background-color 0.3s;
  margin-right: 10px;
}

.cesure-filter-btn:hover {
  background-color: #000 !important;
  color: #f7f3e9 !important;
}

.cesure-filter-btn.active {
  background-color: #000 !important;
  color: #f7f3e9 !important;
}

/* Styles des filtres taxonomie */
.taxonomy-filter,
.elementor-shortcode .taxonomy-filter,
div[class*="taxonomy-filter"] {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 0;
  margin: 10px 0 25px 0;
  width: 100%;
  gap: 12px;
}

/* Style des éléments de filtre */
.e-filter-item,
div[class="e-filter-item"],
.taxonomy-filter > div {
  display: inline-flex;
  align-items: center;
  margin: 0 !important;
  
  position: relative;
}

/* Style personnalisé des cases à cocher */
.e-filter-item input[type="checkbox"],
div[class="e-filter-item"] input[type="checkbox"],
.taxonomy-filter input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

/* Style des labels */
.e-filter-item label,
div[class="e-filter-item"] label,
.taxonomy-filter label {
  color: #000000;
  cursor: pointer;
  font-size: 14px;
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #000;
  border-radius: 20px;
  transition: all 0.2s ease;
  background-color: #f7f3e9;
}

/* Hover des labels */
.e-filter-item label:hover,
div[class="e-filter-item"] label:hover,
.taxonomy-filter label:hover {
  background-color: #000000 !important;
  border-color: #000000 !important;
  color:#f7f3e9 !important;
}

/* État sélectionné */
.e-filter-item input[type="checkbox"]:checked + label,
div[class="e-filter-item"] input[type="checkbox"]:checked + label,
.taxonomy-filter input[type="checkbox"]:checked + label {
  background-color: #000;
  color: #f7f3e9;
  border-color: #000;
  font-weight: 500;
}

/* Message quand aucun événement ne correspond */
.no-events {
  text-align: center;
  padding: 20px;
  background-color: #f7f3e9;
  margin: 20px 0;
}

/* Styles pour le chargement */
.elementor-loop-container.loading {
  position: relative;
  min-height: 200px;
  opacity: 0.7;
}

/* Overlay de chargement */
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(247, 243, 233, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.loading-overlay span {
  background-color: #000;
  color: #f7f3e9;
  padding: 8px 15px;
  border-radius: 4px;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Style pour les éléments à cacher */
.elementor-post.e-inactive,
.elementor-grid-item.e-inactive,
.e-loop-item.e-inactive,
[data-elementor-post-id].e-inactive {
  display: none !important;
}

/* Styles pour les pages d'articles/événements - Séparation des taxonomies */

/* Conteneur principal des taxonomies sur les pages d'événements */
.single-evenements .elementor-widget-theme-post-content .acf-taxonomy-field,
.single-evenements .elementor-widget-theme-post-content [data-field_type="taxonomy"],
.single-evenements .elementor-widget-posts .acf-taxonomy-field,
.single-evenements .elementor-widget-archive-posts .acf-taxonomy-field {
    margin: 20px 0;
    padding: 0;
}

/* Style des termes de taxonomie individuels sur les pages d'événements */
.single-evenements .elementor-element-bdca165 span{
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  border: 1px solid black;
  border-radius: 24px;
  padding: 2px 6px 4px 6px;
  margin: 3px 5px 3px 0;
}
.single-evenements .elementor-element-bdca165 span:first-child{
  margin-left:0 !important;
  
}
/* Style des termes de taxonomie individuels sur les pages lieu */

.single-lieu .elementor-element-46b9d544 span{
  display: inline-block !important;
  width: auto !important;
  max-width: fit-content !important;
  border: 1px solid black;
  border-radius: 24px;
  padding: 2px 6px;
  margin: 5px 5px !important;
}
.single-lieu .elementor-element-46b9d544 span:last-child{
  margin: 5px 0 !important;
}
.single-lieu .elementor-element-46b9d544 span:first-child{
  margin-left:0 !important;
  
}
/*--------------------------------------------------------------
# Header Fixe
--------------------------------------------------------------*/
/* Header fixe sur TOUTES les pages (y compris page d'accueil) */
#site-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background-color: #f7f3e9;
    transition: top 0.3s ease-in-out;
}

/* Ajustement pour la barre d'administration WordPress (toutes les pages - RENFORCÉ) */
body.admin-bar #site-header,
body.admin-bar header,
body.admin-bar .elementor-location-header {
    top: 32px !important; /* Hauteur de la barre d'admin sur desktop */
}

@media screen and (max-width: 1024px) {
    body.admin-bar #site-header,
    body.admin-bar header,
    body.admin-bar .elementor-location-header {
        top: 46px !important; /* Hauteur de la barre d'admin sur mobile/tablette */
    }
}

/* Desktop admin bar (au-dessus de 1024px) */
@media screen and (min-width: 1025px) {
    body.admin-bar #site-header,
    body.admin-bar header,
    body.admin-bar .elementor-location-header {
        top: 32px !important; /* Hauteur de la barre d'admin sur desktop */
    }
}

/* Header fixe sur page d'accueil aussi - z-index ajusté pour animation */
body.home #site-header {
    z-index: 999; /* Moins élevé que l'animation mais reste fixed */
}

/* FORCER admin bar sur pages spécifiques (projets, etc.) */
.single-projet body.admin-bar #site-header,
.page-template-projet body.admin-bar #site-header,
.post-type-archive-projet body.admin-bar #site-header {
    top: 32px !important;
}

@media screen and (max-width: 1024px) {
    .single-projet body.admin-bar #site-header,
    .page-template-projet body.admin-bar #site-header,
    .post-type-archive-projet body.admin-bar #site-header {
        top: 46px !important;
    }
}

/* FALLBACK ULTIME - Admin bar pour TOUS les cas */
html body.admin-bar #site-header {
    top: 32px !important;
}

html body.admin-bar header {
    top: 32px !important;
}

html body.admin-bar .elementor-location-header {
    top: 32px !important;
}

@media screen and (max-width: 1024px) {
    /* Forcer la barre d'admin WordPress à être fixe et en haut sur mobile/tablette */
    #wpadminbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        height: 46px !important;
        min-height: 46px !important;
    }
    
    /* Header SANS admin bar - collé en haut */
    #site-header,
    header,
    .elementor-location-header {
        position: fixed !important;
        top: 0px !important;
        left: 0px !important;
        right: 0px !important;
        z-index: 9999 !important;
        width: 100% !important;
        background-color: #f7f3e9 !important;
    }
    
    /* Header AVEC admin bar - en dessous de la barre d'admin */
    body.admin-bar #site-header,
    body.admin-bar header,
    body.admin-bar .elementor-location-header,
    html body.admin-bar #site-header,
    html body.admin-bar header,
    html body.admin-bar .elementor-location-header {
        top: 46px !important; /* Juste sous la barre d'admin */
    }
}

/* TRÈS PETITS ÉCRANS (≤ 600px) - Admin bar encore plus ajustée */
@media screen and (max-width: 600px) {
    /* Forcer la barre d'admin WordPress à être fixe et en haut */
    #wpadminbar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 99999 !important;
        height: 46px !important;
        min-height: 46px !important;
    }
    
    /* Header SANS admin bar - collé en haut */
    #site-header,
    header,
    .elementor-location-header {
        position: fixed !important;
        top: 0px !important;
        left: 0px !important;
        right: 0px !important;
        z-index: 9999 !important;
        width: 100% !important;
        background-color: #f7f3e9 !important;
    }
    
    /* Header AVEC admin bar - en dessous de la barre d'admin */
    body.admin-bar #site-header,
    body.admin-bar header,
    body.admin-bar .elementor-location-header,
    html body.admin-bar #site-header,
    html body.admin-bar header,
    html body.admin-bar .elementor-location-header {
        top: 46px !important; /* Juste sous la barre d'admin */
    }
    
    /* Ajuster aussi les pages spécifiques sur petits écrans */
    .single-projet body.admin-bar #site-header,
    .page-template-projet body.admin-bar #site-header,
    .post-type-archive-projet body.admin-bar #site-header {
        top: 46px !important;
    }
}

/* MOBILE : Header fixe aussi sur page d'accueil */
@media screen and (max-width: 768px) {
    /* Header fixe avec hauteur augmentée sur mobile - SANS admin bar */
   html body.home #site-header {
        min-height: 90px !important; /* Augmenter la hauteur du header en mobile */
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 9999 !important;
        background-color: #f7f3e9 !important;
        width: 100% !important;
    }
    
    /* Header fixe sur page d'accueil - AVEC admin bar */
    html body.home.admin-bar #site-header {
        top: 46px !important; /* Sous la barre d'admin */
    }
}

/* Header déjà fixe sur toutes les pages - plus besoin de classe header-is-fixed */
/* Supprimé - header toujours fixed maintenant */

/* Augmenter la hauteur du header en mobile pour toutes les pages */
@media screen and (max-width: 768px) {
    #site-header {
        min-height: 90px !important; /* Augmenter la hauteur du header en mobile */
    }
    
    /* Centrer verticalement le logo avec l'icône du menu */
    #site-header .elementor-element-30cb7204 {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
    }
    
    /* Centrer verticalement l'icône du menu */
    #site-header .elementor-menu-toggle {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
    }
    
    /* Forcer l'alignement du conteneur principal du header */
    #site-header .e-con.e-flex {
        align-items: center !important;
        justify-content: space-between !important;
    }
}

/* Admin bar géré par les règles générales ci-dessus */
/* Supprimé - plus besoin de header-is-fixed */

/* Assurez-vous que le contenu principal ne passe pas sous le header fixe (TOUTES LES PAGES) */
.elementor-location-header ~ *,
main,
.site-content {
    margin-top: 76px; /* Ajustez cette valeur selon la hauteur de votre header */
}

/* Ajuster la marge pour mobile avec header plus haut (TOUTES LES PAGES) */
@media screen and (max-width: 768px) {
    .elementor-location-header ~ *,
    main,
    .site-content {
        margin-top: 90px; /* Marge adaptée au header mobile plus haut */
    }
}

main,
.site-content,
.content-area {
    padding-top: 20px; /* Petit padding supplémentaire */
}

/* Quand le header devient fixe sur l'accueil */
body.home.header-fixed-active .elementor-location-header ~ *,
body.home.header-fixed-active main,
body.home.header-fixed-active .site-content {
    margin-top: 80px; /* Même margin que les autres pages */
    padding-top: 40px;
}
body.browser-chrome.home.header-fixed-active .elementor-location-header ~ *,
body.browser-chrome.home.header-fixed-active main,
body.browser-chrome.home.header-fixed-active .site-content {
    margin-top: 80px; /* Même margin que les autres pages */
    padding-top: 40px;

}

.browser-chrome.header-fixed-active .elementor-169 {
  position: absolute;
 bottom:0;
  left:0;
}
.browser-chrome.header-fixed-active .page-content{
  margin-top: 20px;
  margin-bottom: 20px;
  padding-bottom:70px;
}
/*--------------------------------------------------------------
# Menu Mobile Latéral (arrive de la gauche)
--------------------------------------------------------------*/

/* Menu de navigation mobile - Transform en menu latéral */
.elementor-nav-menu--dropdown.elementor-nav-menu__container,
.elementor-nav-menu__container.elementor-nav-menu--dropdown {
    position: fixed !important;
    top: 72px !important; /* Commence directement sous le header (hauteur réelle) */
    left: 0 !important; /* Déjà en position finale pour le fade */
    right: 0 !important; /* Force la largeur complète */
    width: 100% !important; /* Pleine largeur */
    max-width: none !important;
    height: calc(100vh - 72px) !important; /* Hauteur = écran - header */
    background: #f7f3e9 !important;
    z-index: 9999 !important;
    opacity: 0 !important; /* Invisible par défaut */
    visibility: hidden !important; /* Masqué par défaut */
    overflow-y: auto !important;
    
    /* ANTI-VIBRATION : Optimisations performances mobile */
    -webkit-overflow-scrolling: touch !important;
    will-change: opacity, visibility !important;
    transform: translateZ(0) !important; /* Force l'accélération matérielle */
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    
    /* Annuler les styles de dropdown par défaut */
    transform: translateZ(0) !important; /* Garde l'accélération mais annule les autres transforms */
}

/* Ajustement pour la barre d'admin WordPress */
body.admin-bar .elementor-nav-menu--dropdown.elementor-nav-menu__container,
body.admin-bar .elementor-nav-menu__container.elementor-nav-menu--dropdown {
    top: 104px !important; /* 72px header + 32px admin bar */
    height: calc(100vh - 104px) !important;
}

@media screen and (max-width: 782px) {
    body.admin-bar .elementor-nav-menu--dropdown.elementor-nav-menu__container,
    body.admin-bar .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        top: 118px !important; /* 72px header + 46px admin bar mobile */
        height: calc(100vh - 118px) !important;
    }
}

/* OPTIMISATIONS ANTI-VIBRATION MOBILE - CIBLÉ SUR #ss-menu */
@media screen and (max-width: 1024px) {
    /* Cibler spécifiquement le module qui vibre */
    #ss-menu,
    #ss-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container,
    #ss-menu .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        /* Forcer la hauteur absolue pour éviter les recalculs vh */
        min-height: 100px !important;
        max-height: 100vh !important;
        
        /* Optimisations GPU pour mobile */
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        
        /* Empêcher les repaints */
        -webkit-font-smoothing: antialiased !important;
        -moz-osx-font-smoothing: grayscale !important;
        
        /* Stabiliser le positionnement */
        contain: layout style paint !important;
    }
    
    /* Stabiliser aussi les enfants pour éviter les tremblements */
    #ss-menu .elementor-nav-menu--dropdown .menu-item,
    #ss-menu .elementor-nav-menu--dropdown .elementor-item {
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        will-change: auto !important;
    }
}

/* Menu visible (quand ouvert) - quand aria-hidden="false" */
.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"],
.elementor-nav-menu__container.elementor-nav-menu--dropdown[aria-hidden="false"] {
    visibility: visible !important;
    /* L'opacité sera gérée par l'animation fade */
}

/* Overlay pour fermer le menu - masqué car pas nécessaire pour le fade */
.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"]::before {
    display: none;
}

/* Ajustements overlay supprimés car pas nécessaire pour le fade */

/* Style des liens dans le menu latéral */
.elementor-nav-menu--dropdown .elementor-nav-menu a,
.elementor-nav-menu--dropdown .elementor-item,
.elementor-nav-menu--dropdown .menu-item a {
    display: block !important;
    padding: 4px 0 4px 40px !important; /* Décalage de 40px vers la droite */
    margin: 0 !important;
    color: #000 !important;
    font-size: 24px !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    position: relative;
    font-weight: normal !important;
}

/* Désactiver les puces Elementor desktop dans le menu mobile */
.elementor-nav-menu--dropdown .elementor-nav-menu > li::after,
.elementor-nav-menu--dropdown .elementor-nav-menu > li.current-menu-item::after,
.elementor-nav-menu--dropdown .elementor-nav-menu > li.current-page-ancestor::after,
.elementor-nav-menu--dropdown .elementor-nav-menu > li.current-menu-ancestor::after,
.elementor-nav-menu--dropdown .elementor-nav-menu > li:hover::after {
    display: none !important;
    content: none !important;
}

/* Item actif avec puce et gras pour mobile uniquement */
.elementor-nav-menu--dropdown .current-menu-item a,
.elementor-nav-menu--dropdown .current_page_item a {
    font-weight: bold !important;
    position: relative;
}

/* Une seule puce pour l'item actif en mobile */
.elementor-nav-menu--dropdown .current-menu-item a::before,
.elementor-nav-menu--dropdown .current_page_item a::before {
    content: "•";
    position: absolute;
    left: 20px; /* Ajustée pour s'aligner avec le texte décalé */
    top: 50%;
    transform: translateY(-50%);
    font-size: 24px;
    color: #000;
    font-weight: bold;
}

.elementor-nav-menu--dropdown .elementor-nav-menu a:hover,
.elementor-nav-menu--dropdown .elementor-item:hover,
.elementor-nav-menu--dropdown .menu-item a:hover {
    color: #666 !important;
}

/* Bouton de fermeture du menu - on peut utiliser le même bouton toggle */
.elementor-menu-toggle.elementor-active {
    position: relative !important;
    z-index: 10000 !important;
}

/* Style pour les éléments de menu spécifiques */
.elementor-nav-menu--dropdown .menu-item {
    list-style: none !important;
    margin: 0 !important;
    padding: 20px 20px!important;
}



/* Ajustements pour les sous-menus si nécessaire */
.elementor-nav-menu--dropdown .menu-item.menu-item-has-children > a {
    position: relative;
}

.elementor-nav-menu--dropdown .menu-item.menu-item-has-children > a::after {
    content: '+';
    position: absolute;
    right: 0;
    font-size: 18px;
}

/* Style responsive pour petits écrans - Garde la pleine largeur */
@media (max-width: 480px) {
    .elementor-nav-menu--dropdown.elementor-nav-menu__container,
    .elementor-nav-menu__container.elementor-nav-menu--dropdown {
        width: 100% !important;
        max-width: none !important;
    }
}

/* Assurer que le bouton hamburger reste visible */
.elementor-menu-toggle {
    z-index: 10001 !important;
}

/* Priorité absolue pour tous les boutons de menu hamburger */
.cesure-menu-toggle,
.elementor-menu-toggle,
.menu-toggle,
.hamburger,
.mobile-menu-toggle,
.site-navigation-toggle {
    z-index: 10001 !important;
    position: relative !important;
}

/* S'assurer que les overlays de menu sont au-dessus de la vidéo */
.cesure-menu-overlay,
.elementor-nav-menu--dropdown,
.site-navigation-dropdown,
.mobile-menu-overlay {
    z-index: 10000 !important;
}

/* Animation d'entrée fluide accentuée pour les éléments du menu */
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item {
    animation: slideInFluidAccentuated 1.2s ease-out forwards;
    opacity: 0;
    transform: translateX(-200px);
}

.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(1) { animation-delay: 0.2s; }
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(2) { animation-delay: 0.4s; }
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(3) { animation-delay: 0.6s; }
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(4) { animation-delay: 0.8s; }
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(5) { animation-delay: 1.0s; }
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(6) { animation-delay: 1.2s; }
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(7) { animation-delay: 1.4s; }
.elementor-nav-menu--dropdown[aria-hidden="false"] .menu-item:nth-child(8) { animation-delay: 1.6s; }

/* Animation de sortie pour les éléments du menu - Version fluide et lente */
.elementor-nav-menu--dropdown.menu-closing .menu-item {
    animation: slideOutFluidAccentuated 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards !important;
    opacity: 1 !important;
    transform: translateX(0) !important;
    animation-fill-mode: forwards !important;
}

/* Forcer la visibilité pendant l'animation */
.elementor-nav-menu--dropdown.menu-closing {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    transform: none !important;
    transition: none !important;
}

.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(1) { animation-delay: 0s !important; }
.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(2) { animation-delay: 0.15s !important; }
.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(3) { animation-delay: 0.3s !important; }
.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(4) { animation-delay: 0.45s !important; }
.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(5) { animation-delay: 0.6s !important; }
.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(6) { animation-delay: 0.75s !important; }
.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(7) { animation-delay: 0.9s !important; }
.elementor-nav-menu--dropdown.menu-closing .menu-item:nth-child(8) { animation-delay: 1.05s !important; }

/* Supprimer les bordures pour correspondre au modèle */

/* Keyframes pour l'animation fluide accentuée */
@keyframes slideInFluidAccentuated {
    0% {
        opacity: 0;
        transform: translateX(-200px);
    }
    30% {
        opacity: 0.3;
        transform: translateX(-80px);
    }
    60% {
        opacity: 0.7;
        transform: translateX(-20px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Keyframes pour l'animation de sortie inverse - Version ultra fluide */
@keyframes slideOutFluidAccentuated {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-250px); /* Fait glisser vers la gauche */
    }
}

/* Bordures supprimées pour correspondre au modèle */

/* Animation fade pour le conteneur principal */
.elementor-nav-menu--dropdown.elementor-nav-menu__container[aria-hidden="false"] {
    animation: menuFadeIn 0.4s ease-out forwards !important;
    opacity: 1 !important; /* Forcer l'opacité finale */
}

/* Animation de fermeture du menu */
.elementor-nav-menu--dropdown.elementor-nav-menu__container.menu-closing {
    animation: menuFadeOut 2s ease-out forwards !important;
    animation-delay: 0.8s !important; /* Commencer au milieu de l'animation des items */
}

/* Animation de fond pendant la fermeture */
.elementor-nav-menu--dropdown.elementor-nav-menu__container.menu-closing::before {
    animation: backgroundFadeOut 1.5s ease-out forwards !important;
}

@keyframes backgroundFadeOut {
    0% { 
        opacity: 1; 
        transform: translateX(0);
    }
    100% { 
        opacity: 0; 
        transform: translateX(-50px);
    }
}

@keyframes menuFadeIn {
    0% {
        opacity: 0 !important;
    }
    100% {
        opacity: 1 !important;
    }
}

@keyframes menuFadeOut {
    0% {
        opacity: 1 !important;
    }
    100% {
        opacity: 0 !important;
    }
}

/* Effet hover fluide pour les items */
.elementor-nav-menu--dropdown .menu-item a:hover {
    opacity: 0.7; /* Ou tout autre effet de survol désiré */
}

/* Animation pour les clones du menu lors de la fermeture */
.cesure-menu-clone.is-animating-out {
    animation: slideOutToLeft 0.8s cubic-bezier(0.6, -0.28, 0.735, 0.045) forwards;
}

@keyframes slideOutToLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-250px);
    }
}

/* Styles pour les conteneurs enfants à largeur automatique */
.auto-width-children-container > .e-con-inner {
  justify-content: flex-start; /* Aligne les éléments au début. Changez pour 'center', 'space-between', etc. si besoin */
}

.auto-width-children-container > .e-con-inner > .elementor-element.e-con {
  width: auto; /* La largeur s'adapte au contenu */
  flex-grow: 0; /* Empêche le conteneur de grandir pour remplir l'espace */
}




/*--------------------------------------------------------------
# Système Vidéo Hero Fullwidth avec Header au Scroll
--------------------------------------------------------------*/

/* === VIDÉO DESKTOP (>1024px) === */
#video-hero {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: 100vh; /* Fallback pour Firefox */
  min-height: 100vh;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: position 0.6s ease-out, height 0.6s ease-out, margin-top 0.6s ease-out;
}

/* Cacher la vidéo desktop sur mobile */
@media screen and (max-width: 1024px) {
  #video-hero {
    display: none !important;
  }
}

/* === VIDÉO MOBILE (≤1024px) === */
#video-hero-insta {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  height: 100vh; /* Fallback pour Firefox */
  min-height: 100vh;
  z-index: 1000;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: position 0.6s ease-out, height 0.6s ease-out, margin-top 0.6s ease-out;
}

/* Cacher la vidéo mobile sur desktop */
@media screen and (min-width: 1025px) {
  #video-hero-insta {
    display: none !important;
  }
}

/* === STYLES VIDÉO === */
#video-hero video,
#video-hero iframe,
#video-hero .elementor-video,
#video-hero .elementor-video-container video,
#video-hero .elementor-video-container iframe,
#video-hero-insta video,
#video-hero-insta iframe,
#video-hero-insta .elementor-video,
#video-hero-insta .elementor-video-container video,
#video-hero-insta .elementor-video-container iframe {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

/* CORRECTION FIREFOX VIEWPORT - VERSION SMOOTH */
@-moz-document url-prefix() {
  /* Transitions Firefox anti-rebond */
  #video-hero,
  #video-hero-insta {
    transition: position 0.6s cubic-bezier(0.4, 0, 0.2, 1), height 0.6s cubic-bezier(0.4, 0, 0.2, 1), margin-top 0.6s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  #video-hero video,
  #video-hero iframe,
  #video-hero-insta video,
  #video-hero-insta iframe {
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1), height 0.5s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }
  
  /* Seulement en mode fullscreen (pas scrollé) */
  body:not(.video-scrolled) #video-hero,
  body:not(.video-scrolled) #video-hero-insta {
    height: 100vh !important;
    min-height: 100vh !important;
    max-height: 100vh !important;
  }
  
  /* En mode scrollé, laisser l'animation CSS */
  body.video-scrolled #video-hero,
  body.video-scrolled #video-hero-insta {
    height: 50vh !important;
    margin-top: 0px !important;
  }
  
  /* Éléments vidéo internes - seulement en fullscreen */
  body:not(.video-scrolled) #video-hero video,
  body:not(.video-scrolled) #video-hero iframe,
  body:not(.video-scrolled) #video-hero-insta video,
  body:not(.video-scrolled) #video-hero-insta iframe {
    width: 100vw !important;
    height: 100vh !important;
    object-fit: cover !important;
    object-position: center !important;
  }
  
  /* En mode scrollé, dimensions relatives */
  body.video-scrolled #video-hero video,
  body.video-scrolled #video-hero iframe,
  body.video-scrolled #video-hero-insta video,
  body.video-scrolled #video-hero-insta iframe {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
  }
}

@supports (-moz-appearance: none) {
  #video-hero,
  #video-hero-insta {
    height: calc(var(--vh, 1vh) * 100) !important;
    min-height: calc(var(--vh, 1vh) * 100) !important;
    max-height: calc(var(--vh, 1vh) * 100) !important;
  }
  
  /* Contenu après vidéo avec variable Firefox */
  body.has-video-hero .elementor-location-header ~ *,
  body.has-video-hero main,
  body.has-video-hero .site-content,
  body.has-video-hero-insta .elementor-location-header ~ *,
  body.has-video-hero-insta main,
  body.has-video-hero-insta .site-content {
    margin-top: calc(var(--vh, 1vh) * 100) !important;
  }
}

/* Force le ratio 9:16 pour mobile */
#video-hero-insta video,
#video-hero-insta iframe,
#video-hero-insta .elementor-video,
#video-hero-insta .elementor-video-container video,
#video-hero-insta .elementor-video-container iframe {
  aspect-ratio: 9/16 !important;
}

/* === CONTENU APRÈS VIDÉO === */
body.has-video-hero .elementor-location-header ~ *,
body.has-video-hero main,
body.has-video-hero .site-content,
body.has-video-hero-insta .elementor-location-header ~ *,
body.has-video-hero-insta main,
body.has-video-hero-insta .site-content {
  margin-top: 100vh;
  margin-top: 100dvh;
}

/* === HEADER AU SCROLL === */
/* Header caché par défaut sur pages vidéo */
body.has-video-hero #site-header,
body.has-video-hero header,
body.has-video-hero .elementor-location-header,
body.has-video-hero-insta #site-header,
body.has-video-hero-insta header,
body.has-video-hero-insta .elementor-location-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 1001 !important;
  transform: translateY(-100%);
  opacity: 0;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
  backdrop-filter: blur(10px);
}
/* Header visible au scroll */
body.header-visible #site-header,
body.header-visible header,
body.header-visible .elementor-location-header {
  transform: translateY(0) !important;
  opacity: 1 !important;
}

/* === GESTION ADMIN BAR === */
/* Admin bar fixé en haut */
body.admin-bar #wpadminbar {
  position: fixed !important;
  top: 0 !important;
  z-index: 99999 !important;
}

/* Header avec admin bar sur pages vidéo hero - Desktop */
body.admin-bar.has-video-hero #site-header,
body.admin-bar.has-video-hero header,
body.admin-bar.has-video-hero .elementor-location-header,
body.admin-bar.has-video-hero-insta #site-header,
body.admin-bar.has-video-hero-insta header,
body.admin-bar.has-video-hero-insta .elementor-location-header {
  top: 16px !important; /* Décalage desktop avec admin bar */
}

/* Header avec admin bar sur pages vidéo hero - Mobile */
@media screen and (max-width: 782px) {
  body.admin-bar.has-video-hero #site-header,
  body.admin-bar.has-video-hero header,
  body.admin-bar.has-video-hero .elementor-location-header,
  body.admin-bar.has-video-hero-insta #site-header,
  body.admin-bar.has-video-hero-insta header,
  body.admin-bar.has-video-hero-insta .elementor-location-header {
    top: 23px !important; /* Décalage mobile avec admin bar */
  }
}

/* Vidéo scrollée avec admin bar - ajustement selon le décalage du header */
body.admin-bar.video-scrolled #video-hero,
body.admin-bar.video-scrolled #video-hero-insta {
  margin-top: 16px !important; /* Seulement le décalage admin bar desktop */
}

@media screen and (max-width: 782px) {
  body.admin-bar.video-scrolled #video-hero,
  body.admin-bar.video-scrolled #video-hero-insta {
    margin-top: 23px !important; /* Seulement le décalage admin bar mobile */
  }
}

/* === VIDÉOS REPOSITIONNÉES AU SCROLL === */
/* État scrollé : vidéo réduite et repositionnée */
body.video-scrolled #video-hero,
body.video-scrolled #video-hero-insta {
  position: relative !important;
  height: 50vh !important;
  margin-top: 0px !important; /* Pas de margin pour garder la même position visuelle */
  z-index: 1 !important;
}

/* Contenu repositionné quand vidéo scrollée */
body.video-scrolled.has-video-hero .elementor-location-header ~ *,
body.video-scrolled.has-video-hero main,
body.video-scrolled.has-video-hero .site-content,
body.video-scrolled.has-video-hero-insta .elementor-location-header ~ *,
body.video-scrolled.has-video-hero-insta main,
body.video-scrolled.has-video-hero-insta .site-content {
  margin-top: 0 !important;
}
/* --- Priorité menu mobile sur Leaflet --- */
.cesure-menu-overlay,
.elementor-nav-menu--dropdown.elementor-nav-menu__container {
  z-index: 20000 !important;
}

body.menu-open .leaflet-container {
  pointer-events: none !important;
  filter: blur(1px); /* Optionnel, effet visuel pour montrer que la carte est inactive */
}

/* --- Forcer les contrôles Leaflet SOUS le menu mobile --- */
.leaflet-control-container,
.leaflet-top,
.leaflet-bottom,
.leaflet-control,
.leaflet-bar,
.leaflet-control-zoom,
.leaflet-control-attribution {
  z-index: 10 !important;
}

/* --- Masquer les contrôles Leaflet quand le menu mobile est ouvert --- */
body.menu-open .leaflet-control-container {
  display: none !important;
}
/*--------------------------------------------------------------

/* DÉSACTIVER L'INTERACTION LEAFLET SUR MOBILE POUR PERMETTRE LE SCROLL */

@media screen and (max-width: 1024px) {
    /* OPTION 1: Permettre le scroll de la page (plus radical) - DÉSACTIVÉE */
    /*
    .leaflet-container {
        pointer-events: none !important; /* Désactive toutes les interactions avec la carte */
    /*}
    
    /* Réactiver seulement les contrôles de zoom si nécessaire */
    /*.leaflet-control-zoom {
        pointer-events: auto !important;
    }*/
    
    /* OPTION 2: Alternative plus douce (ACTIVÉE) */
    .leaflet-container {
        touch-action: pan-y !important; /* Permettre seulement le scroll vertical */
        -webkit-touch-callout: none !important;
        -webkit-user-select: none !important;
        -moz-user-select: none !important;
        -ms-user-select: none !important;
        user-select: none !important;
    }
    
    /* Désactiver le drag de la carte mais garder le zoom */
    .leaflet-container.leaflet-touch .leaflet-control-container {
        pointer-events: auto !important;
    }
}

/*--------------------------------------------------------------
# Formulaire de contact Césure
--------------------------------------------------------------*/

/* Messages de retour */
.success-message {
    color: green;
    font-weight: bold;
    font-family: "Pachinko", Sans-serif;
}

.error-message {
    color: red;
    font-weight: bold;
    font-family: "Pachinko", Sans-serif;
}

/* Styles du formulaire */
#cesure-contact-form {
    max-width: 100%;
    font-family: 'Pachinko', sans-serif;
}

#cesure-contact-form p {
    margin-bottom: 25px;
}

/* On cache uniquement les labels des champs qui ont un placeholder */
#cesure-contact-form label[for="contact_name"],
#cesure-contact-form label[for="contact_email"],
#cesure-contact-form label[for="contact_message"] {
    display: none;
}

#cesure-contact-form input[type="text"],
#cesure-contact-form input[type="email"],
#cesure-contact-form textarea {
    background: transparent;
    border: none;
    border-bottom: 1px solid #000;
    border-radius: 0;
    padding: 10px 5px;
    width: 100%;
    font-size: 14px;
    box-shadow: none;
    font-family: "Pachinko", Sans-serif;
}

/* Retrait des anciens styles du select */
/* Style pour le wrapper du select afin de positionner le chevron */
#cesure-contact-form .select-wrapper {
    position: relative;
}

/* Styles pour les checkboxes */
#cesure-contact-form fieldset {
    border: none;
    padding: 0;
    margin: 0 0 25px 0;
}

#cesure-contact-form fieldset p {
    margin-bottom: 5px;
}

#cesure-contact-form input[type="checkbox"] {
    opacity: 0; /* On cache la case par défaut */
    position: absolute;
}

#cesure-contact-form input[type="checkbox"] + label {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    font-size: 16px;
    font-family: "Pachinko", Sans-serif;
    line-height: 14px;
    display: inline-block;
}

/* Style de la fausse case à cocher */
#cesure-contact-form input[type="checkbox"] + label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 15px;
    height: 15px;
    border: 1px solid #000;
    background: transparent;
}

/* Style du "check" quand la case est cochée */
#cesure-contact-form input[type="checkbox"]:checked + label::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 1px;
    width: 6px;
    height: 12px;
    border: solid #000;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

#cesure-contact-form input:focus,
#cesure-contact-form textarea:focus {
    outline: none;
    border-bottom: 2px solid #000;
}

/* Styles du bouton */
#cesure-contact-form button[type="submit"] {
    background-color: #f7f3e9 !important;
    color: #000 !important;
    font-weight: 400 !important;
    border: 1px solid #000;
    font-weight: 400 !important;
    font-size: 16px !important;
    padding: 2px 6px !important;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s ease-in-out;
    border-radius: 4px !important;
    font-style: normal !important;
}

#cesure-contact-form button[type="submit"]:hover {
    background-color: #000 !important;
    color: #f7f3e9 !important;
}

#cesure-contact-form button[type="submit"]:disabled {
    background-color: #000;
    border-color: #000;
    color: #fff;
    cursor: not-allowed;
}

#cesure-contact-form legend {
    color: #000 !important;
    font-weight: 600;
}

.elementor-slideshow__title {display:none !important;}