.elementor-kit-2636{--e-global-color-primary:#181818;--e-global-color-secondary:#323232;--e-global-color-text:#BABABA;--e-global-color-accent:#D9D9D9;--e-global-color-2782caa:#E36C0A;--e-global-color-f5bc2a6:#FFFFFF;--e-global-color-07949a4:#2F3E46;--e-global-typography-primary-font-family:"Manrope";--e-global-typography-primary-font-size:2.5vw;--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Manrope";--e-global-typography-secondary-font-size:3vw;--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Manrope";--e-global-typography-text-font-size:2vw;--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;--e-global-typography-470765a-font-family:"Manrope";--e-global-typography-470765a-font-size:1.75vw;--e-global-typography-470765a-text-transform:uppercase;--e-global-typography-1e213bd-font-family:"Manrope";--e-global-typography-1e213bd-font-size:2.75vw;--e-global-typography-1e213bd-text-transform:uppercase;--e-global-typography-77257b0-font-family:"Manrope";--e-global-typography-77257b0-font-size:1.1vw;--e-global-typography-dd2eb13-font-family:"Manrope";--e-global-typography-dd2eb13-font-size:1.3vw;--e-global-typography-dd2eb13-text-transform:uppercase;--e-global-typography-9263078-font-family:"Manrope";--e-global-typography-9263078-font-size:1vw;--e-global-typography-53f370b-font-family:"Manrope";--e-global-typography-53f370b-font-size:0.75vw;--e-global-typography-53f370b-text-transform:uppercase;--e-global-typography-2603428-font-family:"Manrope";--e-global-typography-2603428-font-size:2.75vw;--e-global-typography-2603428-font-weight:300;--e-global-typography-2603428-text-transform:uppercase;--e-global-typography-b2995ce-font-family:"Manrope";--e-global-typography-b2995ce-font-size:0.8vw;--e-global-typography-b2995ce-font-weight:200;}.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 */body:not(.elementor-editor-active) .hide-on-site {
  display: none !important;
}

/*changement de couleur de background lors du scroll*/
body.bg-white {
  background-color: #ffffff;
  transition: background-color 0.8s ease;
}

body.bg-black {
  background-color: #181818;
  transition: background-color 0.8s ease;
}

body.bg-orange {
  background-color: #E36C0A !important;
  transition: background-color 0.8s ease;
}

body.bg-grey {
  background-color: #323232 !important;
  transition: background-color 0.8s ease;
}


/*changement de couleur des titres lors du scroll*/

/* Blanc sur fond noir */
body.bg-black .heading-dark-to-light .elementor-heading-title {
  color: #ffffff !important;
}


body.bg-black .heading-dark-to-light-animated .elementor-headline-text-active {
  color: #ffffff !important;
}



body.bg-white .heading-dark-to-light  .elementor-heading-title {
  color: #181818 !important;
}

body.bg-white .heading-grey-to-light .elementor-heading-title {
  color: #181818 !important;
}



/* Noir sur fond orange */
body.bg-orange .heading-dark-to-light .elementor-heading-title {
  color: #181818 !important;
}


.hover-dark-to-white {
  background-color: #181818;
  transition: background-color 0.4s ease;
}

.hover-dark-to-white:hover {
  background-color: #ffffff;
}







/* Style initial du container */
.hover-dark-to-white {
  background-color: #181818;
  transition: background-color 0.4s ease;
}

/* Heading spécifique avec couleur blanche par défaut */
.hover-dark-to-white .heading-color-switch {
  color: #ffffff;
  transition: color 0.4s ease;
}

/* Au hover du container */
.hover-dark-to-white:hover {
  background-color: #ffffff;
}

/* Et changement de couleur seulement du heading ciblé */
.hover-dark-to-white:hover .heading-color-switch {
  color: #181818;
}







/* Forcer la couleur orange du span "Projects" sur fond blanc */
body.bg-white .heading-dark-to-light .elementor-heading-title span[style*="#E36C0A"] {
  color: #E36C0A !important;
}

/* Forcer la couleur grise du span "We’re located in" sur tous fonds */
.heading-light-to-dark .elementor-heading-title span[style*="#BABABA"] {
  color: #BABABA !important;
}

/* Blanc sur fond noir */
body.bg-black .heading-light-to-dark .elementor-heading-title {
  color: #ffffff !important;
}

/* Noir sur fond blanc */
body.bg-white .heading-light-to-dark .elementor-heading-title {
  color: #181818 !important;
}


body.bg-white .heading-color .elementor-heading-title {
  color: #181818 !important;
  transition: color 0.3s ease;
}

body.bg-black .heading-color .elementor-heading-title  {
  color: #ffffff !important;
  transition: color 0.3s ease;
}

body.bg-white .text-color  {
  color: #181818 !important;
  transition: color 0.3s ease;
}



/*TITLE HOVER */
.hover-dark-to-white:hover .heading-hover .elementor-heading-title {
  color: #181818 !important;
  transition: color 0.3s ease;
}











/* Texte noir sur fond blanc */
body.bg-white .text-dark-to-light {
  color: #181818 !important;
  transition: color 0.3s ease;
}

/* Texte blanc sur fond noir */
body.bg-black .text-dark-to-light {
  color: #ffffff !important;
  transition: color 0.3s ease;
}






/* Fond blanc → titre en noir */
body.bg-white .elementor-posts .elementor-post__title,
body.bg-white .elementor-posts .elementor-post__title a {
  color: #181818 !important;
}

/* Fond noir → titre en blanc */
body.bg-black .elementor-posts .elementor-post__title,
body.bg-black .elementor-posts .elementor-post__title a {
  color: #ffffff !important;
}



/* Texte noir sur fond blanc, à l'intérieur d'un widget Tabs */
body.bg-white .elementor-tabs .elementor-tab-content .title-dark-to-light {
  color: #ffffff !important;
  transition: color 0.3s ease;
}







/* TITRES TABS Couleur par défaut - noir sur fond blanc */
body.bg-white .tab-titles-dynamic .e-n-tab-title-text {
  color: #181818;
  transition: color 0.3s ease;
}

/* Blanc sur fond noir */
body.bg-black .tab-titles-dynamic .e-n-tab-title-text {
  color: #ffffff;
}



body.bg-white .form-field-text .elementor-headline-dynamic-wrapper {
  color: #181818;
  transition: color 0.3s ease;
}

/* Blanc sur fond noir */
body.bg-black .form-field-text .elementor-headline-dynamic-wrapper {
  color: #ffffff;
}




html, body {
  scroll-behavior: smooth !important;
  scroll-padding-top: 80px; /* optionnel : ajuste pour éviter que les ancres soient cachées sous un header */
}








body {
  transition: background-color 0.8s ease; /* optionnel : effet fluide */
}

body.bg-black { background-color: #181818; }
body.bg-white { background-color: #ffffff; }
body.bg-orange { background-color: #E36C0A; }
body.bg-grey { background-color: #888888; } /* changez la teinte si besoin */





/* Inclure les langues dans le Burger Menu */
.project-lang-wrapper { position: relative; display: inline-block; font-family: "Manrope", sans-serif; }
.project-lang-trigger { color: #FFFFFF; font-family: "Manrope", sans-serif; font-size: 1.1vw; cursor: pointer; position: relative; padding: 0; display: inline-flex; align-items: center; gap: 4px; }
.project-lang-caret { width: 0; height: 0; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid #D56000; display: inline-block; }

/* Underline animé (comme demandé) */
.project-lang-trigger::after { content:""; position:absolute; left:0; bottom:-6px; width:0; height:2px; background:#BABABA; transition:width .2s ease-out; }
.project-lang-wrapper:hover .project-lang-trigger { color:#D56000; }
.project-lang-wrapper:hover .project-lang-trigger::after { width:100%; }

/* Dropdown */
.project-lang-dropdown { position:absolute; top:120%; left:0; background:#000; min-width:140px; padding:6px 0; display:none; z-index:9999; }
.project-lang-wrapper:hover .project-lang-dropdown { display:block; }

/* Items */
.project-lang-item { display:block; color:#FFFFFF; font-family:"Manrope", sans-serif; font-size:1.1vw; text-decoration:none; padding:5px 16px; position:relative; }
.project-lang-item:hover { color:#D56000; }
.project-lang-item::after { content:""; position:absolute; left:16px; bottom:2px; width:0; height:2px; background:#BABABA; transition:width .2s ease-out; }
.project-lang-item:hover::after { width:calc(100% - 32px); }
.project-lang-item.active { font-weight:600; }

/* S'assurer que le panel du burger laisse sortir le dropdown si besoin */
.elementor-nav-menu--dropdown, .elementor-nav-menu__container { overflow: visible !important; }

/* MOBILE (burger) : on passe en 100% largeur et en "tap-to-open" */
@media (max-width: 1024px) {
  .project-lang-trigger { font-size: 18px; }         /* lisible en mobile */
  .project-lang-item    { font-size: 18px; }

  /* Le dropdown doit se placer dans le flux du panneau hamburger */
  .project-lang-dropdown {
    position: static;
    display: none;
    background: transparent;
    padding: 0;
  }
  /* Ouverture par classe .open (gérée par JS ci-dessous) */
  .project-lang-wrapper.open .project-lang-dropdown { display: block; }

  /* Harmoniser l'espacement avec les items du menu */
  .menu-item-language { width: 100%; padding: 8px 0; }
}



/* 1) Cacher l'item de langue injecté dans le menu pour tablette + desktop */
@media (min-width: 768px) {
  .elementor-nav-menu .menu-item-language {
    display: none !important;
  }
}

/* 2) Cacher le widget shortcode sur mobile (on ne garde que le burger) */
@media (max-width: 767px) {
  .lang-shortcode {
    display: none !important;
  }
}




/* Social Medias Icons - Changing colors on hover */

.custom-social-icons .elementor-social-icon {
  color: #FFFFFF !important;
}

.custom-social-icons .elementor-social-icon svg,
.custom-social-icons .elementor-social-icon svg * {
  fill: currentColor !important;
  stroke: currentColor !important;
  transition: fill 0.3s ease, stroke 0.3s ease, color 0.3s ease;
}

/* Hover */
.custom-social-icons .elementor-social-icon:hover {
  color: #E36C0A !important;
}


/* -----FIN --- Social Medias Icons - Changing colors on hover */




/* Code pour le visuel des Card dans Page Local */

.card-glass {
    /* Fond semi-transparent */
    background: rgba(255, 255, 255, 0.05); 
    
    /* L'effet de flou (le plus important) */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px); /* Pour la compatibilité Safari */
    
    /* Bordure subtile pour simuler l'épaisseur du verre */
    border: 1px solid rgba(255, 255, 255, 0.1);
    
    /* Arrondi des angles */
    border-radius: 15px;
    
    /* Ombre légère pour donner de la profondeur */
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);
    
    /* Espacement interne */
    padding: 25px;
    
    /* Transition fluide au survol */
    transition: all 0.3s ease-in-out;
}

/* Effet au survol pour rendre le design interactif */
.card-glass:hover {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

/* FIN du Code pour le visuel des Card dans Page Local */




/* DEBUT Underline Header */

/* Cible les liens du menu principal Elementor */
.elementor-nav-menu--main .elementor-item,
.elementor-nav-menu .elementor-item {
    position: relative;
    font-family: "Manrope", sans-serif;
    font-size: 1.1vw;
    color: #FFFFFF;
}


/* État hover / active : couleur du texte */
.elementor-nav-menu--main .elementor-item:hover,
.elementor-nav-menu--main .elementor-item.elementor-item-active,
.elementor-nav-menu .elementor-item:hover,
.elementor-nav-menu .elementor-item.elementor-item-active,

/* Force Projects / Projets actif sur l’archive, même avec les filtres */
body.post-type-archive-projects
.elementor-nav-menu--main .elementor-item[href*="/en/projects/"],
body.post-type-archive-projects
.elementor-nav-menu--main .elementor-item[href*="/fr/projets/"],
body.post-type-archive-projects
.elementor-nav-menu .elementor-item[href*="/en/projects/"],
body.post-type-archive-projects
.elementor-nav-menu .elementor-item[href*="/fr/projets/"] {
    color: #D56000;
}


/* Petit underline animé */
.elementor-nav-menu--main .elementor-item::after,
.elementor-nav-menu .elementor-item::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background-color: #E36C0A;
    transition: width 0.2s ease-out;
}


/* Au survol ou sur l’élément actif, on étire la ligne */
.elementor-nav-menu--main .elementor-item:hover::after,
.elementor-nav-menu .elementor-item:hover::after,
.elementor-nav-menu--main .elementor-item.elementor-item-active::after,
.elementor-nav-menu .elementor-item.elementor-item-active::after,

/* Force le soulignement sur l’archive Projects */
body.post-type-archive-projects
.elementor-nav-menu--main .elementor-item[href*="/en/projects/"]::after,
body.post-type-archive-projects
.elementor-nav-menu--main .elementor-item[href*="/fr/projets/"]::after,
body.post-type-archive-projects
.elementor-nav-menu .elementor-item[href*="/en/projects/"]::after,
body.post-type-archive-projects
.elementor-nav-menu .elementor-item[href*="/fr/projets/"]::after {
    width: 100%;
}


/* Dans le panneau hamburger Elementor */
@media (max-width: 1024px) {

    /* Masquer l’item injecté par notre hook */
    .elementor-nav-menu--dropdown .menu-item-language {
        display: none !important;
    }

    /* S'assurer que l'item Polylang reste visible */
    .elementor-nav-menu--dropdown #pll_switcher {
        display: block !important;
    }
}

/* FIN Underline Header */








/* DEBUT LOCAL PAGE - Carte Études Acoustiques */

/* Container des 3 cartes */
.cards-3col { 
    display: grid; 
    grid-template-columns: repeat(3,1fr); 
    gap: 3px; 
}

/* Chaque carte */
.white-card {
    padding: 36px 32px;
    border-top: 3px solid #e0ddd4; /* var(--divider) — adaptez à votre couleur */
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: background .2s, box-shadow .2s;
}

.white-card:hover {
    background: #fff;

}

/* Bordure orange sur la 1ère carte au chargement */
.white-card:first-child {
    border-top-color: #E36C0A;
}

/* Label numéroté (ex: "01 — Conformité") */
.card-step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #E36C0A; /* orange */
    margin-bottom: 16px;
    display: block;
}

.card-step-grey { color: #8a9199; } /* gris pour les cartes 2 et 3 */

/* Titre */
.white-card h3 {
    font-size: 17px;
    font-weight: 600;
    color: #2f3e46; /* var(--text-dark) */
    margin-bottom: 12px;
}

/* HOVER REVEAL : texte caché par défaut, révélé au survol */
.white-card p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    margin-top: 0;
    transition: 
        max-height .45s ease, 
        opacity .35s ease, 
        transform .35s ease, 
        margin .35s ease;
}

.white-card:hover p {
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
}



/* Chaque panneau */
.white-card {
    border-top: 3px solid transparent;
    padding: 30px;
    flex: 1 1 0;
    transition: all 0.5s ease;
    overflow: hidden;
    cursor: pointer;
}

.white-card:hover {
    background-color: #ffffff;
    border-top-color: #E36C0A;
    flex: 2 1 0; /* le panneau survolé s'agrandit */
}



/* FIN LOCAL PAGE - Carte Études Acoustiques */



/* DEBUT LOCAL PAGE - Carte Notre Approche */

/* Container des 3 cartes */
.cards-3col { 
    display: grid; 
    grid-template-columns: repeat(3,1fr); 
    gap: 3px; 
}

/* Chaque carte */
.white-card-approche {
    padding: 36px 32px;
    border-top: 3px solid #e0ddd4; /* var(--divider) — adaptez à votre couleur */
    position: relative;
    overflow: hidden;
    cursor: default;
    transition: background .2s, box-shadow .2s;
}

.white-card-approche:hover {
    background: #fff;

}

/* Bordure orange sur la 1ère carte au chargement */
.white-card-approche:first-child {
    border-top-color: #E36C0A;
}

/* Label numéroté (ex: "01 — Conformité") */
.card-step {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .15em;
    text-transform: uppercase;
    color: #E36C0A; /* orange */
    margin-bottom: 16px;
    display: block;
}

.card-step-grey { color: #8a9199; } /* gris pour les cartes 2 et 3 */

/* Titre */
.white-card-approche h3 {
    font-size: 17px;
    font-weight: 600;
    color: #2f3e46; /* var(--text-dark) */
    margin-bottom: 12px;
}

/* HOVER REVEAL : texte caché par défaut, révélé au survol */
.white-card-approche p {
    font-size: 14px;
    font-weight: 300;
    line-height: 1.7;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(8px);
    margin-top: 0;
    transition: 
        max-height .45s ease, 
        opacity .35s ease, 
        transform .35s ease, 
        margin .35s ease;
}

.white-card-approche:hover p {
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    margin-top: 10px;
}



/* Chaque panneau */
.white-card-approche {
    border-top: 3px solid transparent;
    padding: 10px;
    flex: 1 1 0;
    transition: all 0.5s ease;
    overflow: hidden;
    cursor: pointer;
}

.white-card-approche:hover {
    background-color: #ffffff;
    border-top-color: #E36C0A;
    flex: 2 1 0; /* le panneau survolé s'agrandit */
}



/* FIN LOCAL PAGE - Carte Études Acoustiques */


/* DEBUT Visuel + Animation Container Local Page */
.container-hover {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  /* Empile titre + texte, ancrés en bas à gauche */
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 10px; /* espace fixe titre/texte — ne varie jamais */
  padding: 20px; /* marge intérieure (haut/bas/gauche/droite) */
  /* L'image n'est plus peinte deux fois (voir ::before) */
  background-size: 0 0 !important;
  /* Limite la zone que le navigateur doit redessiner au survol */
  contain: paint;
}
/* Image de fond animée */
.container-hover::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1);
  transition: transform .6s ease, box-shadow 0.4s ease;
  box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0);
}
/* Dégradé + assombrissement — une seule couche, on n'anime que l'opacité */
.container-hover::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top,
    rgba(0,0,0, .9) 0%,
    rgba(0,0,0,.65) 40%,
    rgba(0,0,0,.15) 75%);
  opacity: .8;
  transition: opacity .35s ease;
}
/* Titre : reste dans le flux flex, jamais en position absolute */
.container-hover-title {
  position: relative;
  z-index: 2;
  margin: 0;
  flex-shrink: 0;
}
/* Texte : fermé par défaut */
.container-hover-text {
  position: relative;
  z-index: 2;
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(6px);
  transition: max-height .4s ease, opacity .3s ease .05s, transform .3s ease .05s;
  pointer-events: none;
  flex-shrink: 0;
}
/* Survol — ignoré sur les appareils tactiles */
@media (hover: hover) and (pointer: fine) {
  .container-hover:hover::before {
    transform: scale(1.08);
    box-shadow: inset 0 0 0 1000px rgba(0, 0, 0, 0.45);
  }
  
  .container-hover:hover::after {
    opacity: 1;
  }
  .container-hover:hover .container-hover-text {
    max-height: 250px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    transition: max-height .4s ease, opacity .4s ease .15s, transform .4s ease .15s;
  }
}
/* ==================================================
   TACTILE — pas de survol possible :
   le texte est affiché en permanence
   ================================================== */
@media (hover: none), (pointer: coarse) {
  .container-hover {
    /* La carte prend la hauteur de son contenu, image comprise */
    min-height: 340px;
  }
  /* Dégradé renforcé : le texte est toujours là, il faut le lire */
  .container-hover::after {
    background: linear-gradient(to top,
      rgba(0,0,0,.92) 0%,
      rgba(0,0,0,.75) 45%,
      rgba(0,0,0,.3) 100%);
    opacity: 1;
  }
  .container-hover-text {
    max-height: none;
    overflow: visible;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    transition: none;
  }
}
/* ==================================================
   MOBILE — ajustements de mise en page
   ================================================== */
@media (max-width: 767px) {
  .container-hover {
    min-height: 280px;
    padding: 24px 20px;
    gap: 8px;
  }
  .container-hover-title {
    font-size: 20px;
    line-height: 1.25;
  }
  .container-hover-text {
    font-size: 14px;
    line-height: 1.6;
  }
}
@media (prefers-reduced-motion: reduce) {
  .container-hover::before,
  .container-hover::after,
  .container-hover-text {
    transition: none;
  }
}
/* FIN Visuel + Animation Container Local Page *//* End custom CSS */