/*
Theme Name: FCC
Theme URI: https://wordpress.org/themes/twentytwentyfour/
Author: HARVEST
Author URI: https://wordpress.org
Description:
Requires at least: 6.4
Tested up to: 6.4
Requires PHP: 7.0
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/old-licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Template: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, accessibility-ready, blog, portfolio, news
*/

/* -------------------------------------------------------------------------- */
/* 0) Imports & resets                                                        */
/* -------------------------------------------------------------------------- */

@import url("https://use.typekit.net/fvy5jbj.css");

/* Le navigateur garde le scroll vertical natif, on gère l'horizontal */
.slider-viewport {
  touch-action: pan-y;
  overscroll-behavior: contain; /* évite le rebond iOS/Android dans la section pin */
  -webkit-overflow-scrolling: touch;
}

html,
body {
  min-height: 100vh;
  width: 100% !important;
  overflow-x: hidden !important;
  overscroll-behavior: none;
}

a,
a:focus,
a:active {
  outline: 0 !important;
}

.wp-block-details summary:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Liens WP + liens généraux */
.wp-block-navigation a:where(:not(.wp-element-button)):focus,
.wp-block-post-title a:where(:not(.wp-element-button)):focus,
.wp-block-site-title a:where(:not(.wp-element-button)):focus,
a:where(:not(.wp-element-button)):focus,
a {
  text-decoration: none !important;
}

#ui-datepicker-div.gravity-theme.ui-datepicker, #ui-datepicker-div.gform-theme--foundation.ui-datepicker{
	z-index: 1000000 !important;
	width: 250px;
}

.gform-theme--framework .gf_progressbar .percentbar_blue{
	background-color: var(--wp--preset--color--contrast) !important;
}
/* -------------------------------------------------------------------------- */
/* 1) États init / préchargement                                              */
/* -------------------------------------------------------------------------- */

/* La loading ne doit JAMAIS intercepter les clics une fois cachée */
.loading[hidden],
.loading.is-gone {
  display: none !important;
}

/* Quand l’overlay est à 0 d’opacité, on n’intercepte plus les clics */
.loading:not([data-active="1"]) {
  pointer-events: none !important;
}

.smooth-content {
  visibility: hidden;
}

.loading {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  background-color: rgb(26, 26, 26);
  overflow: hidden;
  z-index: 999999;
  opacity: 0;
  transition: opacity 0.3s ease; /* sécurité si JS en panne */
}

main .wp-block-group {
  z-index: 2;
}

/* -------------------------------------------------------------------------- */
/* 2) Header / navigation                                                     */
/* -------------------------------------------------------------------------- */

/* Anti-flicker logo pendant l'init */
html.is-prep header .heading .wp-block-site-logo,
html.is-prep header .heading .wp-block-site-logo img {
  transition: none !important;
}

/* Coup de pouce rendu (WebKit) */
header .heading .wp-block-site-logo {
  will-change: transform, opacity;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
}

header {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9999999;
  background-color: transparent;
  transition: 0.3s all ease-in-out;
}

header .heading .wp-block-site-logo {
  height: 237px;
  width: 101px;
  transform-origin: top left;
  background-color: var(--wp--preset--color--contrast);
  mask-size: contain;
  transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}

header .heading .wp-block-site-logo img {
  opacity: 0;
  height: 237px;
  width: 101px;
  transition: 0.4s all cubic-bezier(0.5, 0, 0.58, 1);
}

/* Logo block */
header.mainMenu .wp-block-site-logo a {
  display: block;
  position: relative;
}

/* Couleurs nav */
header.main-tool-bar--scrolled .mainMenu {
  color: #fff;
}

/* CTA account/cart/search dans header */
.mainMenu .wp-block-search {
  display: flex;
  align-items: center;
}

header.open {
  height: 100%;
}

/* Hover & états actifs */
.wp-block-navigation
  .wp-block-navigation-item__content.wp-block-navigation-item__content:hover {
  color: var(--wp--preset--color--primary);
}

.current-menu-item,
.post-type-archive-projets .projets,
.single-projets .projets {
  font-style: italic;
}

/* Forcer l'ouverture (JS) */
@media (min-width: 900px) {
  header .MobileOn{
    display: none !important;
  }
}
 
/* -------------------------------------------------------------------------- */
/* 3) Hero / Intro                                                            */
/* -------------------------------------------------------------------------- */

section.intro {
  position: relative;
}
section.intro .title {
  position: relative;
  z-index: 2;
}
section.intro .two {
  position: relative;
  z-index: 3;
}
section.intro .lines {
  position: relative;
  z-index: 1;
}
section.two {
  margin-top: -50vh;
}

/* -------------------------------------------------------------------------- */
/* 4) Éléments graphiques (cercles, logo, marks, gradients)                    */
/* -------------------------------------------------------------------------- */

.circles {
  position: fixed;
  min-height: 100vh;
  width: 100vw;
}

.circle {
  position: absolute;
}
.circle svg {
  width: 100% !important;
  height: 30vw;
}
.circle.one {
  right: 5vw;
  top: 0;
  visibility: hidden;
}
.circle.two {
  left: 5vw;
  top: 50vh;
  visibility: hidden;
}

.logo .wp-block-site-logo {
  z-index: 2;
  position: relative;
}

/* Soulignement animé */
mark a {
  position: relative;
  text-decoration: none;
  background: linear-gradient(
      to right,
      var(--wp--preset--color--contrast),
      var(--wp--preset--color--contrast)
    ),
    linear-gradient(
      to right,
      var(--wp--preset--color--primary),
      var(--wp--preset--color--primary)
    );
  background-size: 100% 2px, 0 2px;
  background-position: 100% 100%, 0 100%;
  background-repeat: no-repeat;
  transition: all 400ms;
}

mark a:hover {
  color: var(--wp--preset--color--primary);
  background-size: 0 2px, 100% 2px;
}

.gradient {
  background: -webkit-linear-gradient(var(--wp--preset--color--base), #313131);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Boutons */

button:hover {
  background-color: var(--wp--preset--color--contrast) !important;
  color: #fff !important;
}
.wp-block-button__link:hover{
	background-color: white !important;
	color: var(--wp--preset--color--contrast) !important;
}
.download .wp-block-button__link{
	padding: 8px 17px !important;
	font-size: 0.8rem !important;
}

/* -------------------------------------------------------------------------- */
/* 5) Curseur “flair” + sidecar                                                */
/* -------------------------------------------------------------------------- */

/* Desktop */
@media screen and (min-width: 600px) {
  :not(.wp-admin) .flair {
    position: fixed;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 10000;
    mix-blend-mode: difference;
  }

  .flair svg {
    width: 100%;
    height: 100%;
  }

  .flair #currentShape {
    fill: #ffd07b;
  }

  /* Ne pas masquer le curseur dans les inputs */
  :where(
      input[type="text"],
      input[type="search"],
      input[type="email"],
      input[type="number"],
      input[type="password"],
      textarea,
      [contenteditable="true"]
    ) {
    cursor: text !important;
  }

  .flair {
    pointer-events: none;
    cursor: none !important;
  }
}

/* Mobile */
@media screen and (max-width: 600px) {
  .flair {
    display: none;
  }
}

/* Vignette qui suit la souris */
.cursor-sidecar {
  position: fixed;
  top: 0;
  left: 8%;
  width: clamp(150px, 15vw, 300px);
  aspect-ratio: 1 / 1;
  background: center / cover no-repeat;
  border-radius: 50%;
  pointer-events: none;
  z-index: 100;
  opacity: 0;
  transform: translate(-50%, -50%);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
}

@media (pointer: coarse) {
  .cursor-sidecar {
    display: none !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 6) Texte scindé / animations de lignes                                     */
/* -------------------------------------------------------------------------- */

.lines {
  position: relative;
  will-change: transform;
}
.split-line,
.line-wrap,
.line {
  display: block;
  overflow: hidden;
}

.line-inner {
  display: inline-block;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Hover “exp” */
.exp .line {
  transition: all 0.5s ease-in-out;
  cursor: pointer;
  transform-origin: left;
}
.exp .line:hover {
  transform: scale(1.1);
}

/* -------------------------------------------------------------------------- */
/* 7) Blocs divers (citation, grilles, listes, etc.)                           */
/* -------------------------------------------------------------------------- */

.slider-dechet .wp-block-gutsliders-slide.swiper-slide {
    width: fit-content !important;
    height: fit-content !important;
}

.citation > div {
  background: linear-gradient(
    to right,
    var(--wp--preset--color--contrast) 50%,
    rgb(37, 37, 37) 50%
  );
  background-size: 200% 100%;
  background-position-x: 100%;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}
.light .citation > div {
  background: linear-gradient(
    to right,
    var(--wp--preset--color--base) 50%,
    rgb(37, 37, 37) 50%
  );
}

.grid img {
  border-radius: 20px;
}

/* Grid logos */
.wp-block-group.is-layout-grid {
  display: grid;
  align-items: center;
  justify-items: center;
  gap: 6rem;
}
.wp-block-group.is-layout-grid figure {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}
.wp-block-group.is-layout-grid img {
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

.selected {
  color: var(--wp--preset--color--custom-rose-cp) !important;
}

.pages_title {
  position: relative;
  z-index: 100;
}

/* -------------------------------------------------------------------------- */
/* 8) Footer                                                                  */
/* -------------------------------------------------------------------------- */

@media (min-width: 1017px) {
  .bottom {
    margin-top: -100px;
    z-index: 300;
    position: relative;
  }
}

/* -------------------------------------------------------------------------- */
/* 9) Accordéon                                                              */
/* -------------------------------------------------------------------------- */

.accordion {
  width: 250px;
  margin: 15px;
  box-shadow: 0 8px 17px rgba(0, 0, 0, 0.2);
}
.accordion-menu {
  padding: 10px;
  cursor: pointer !important;
  user-select: none;
  position: relative;
}
.accordion-content {
  height: 0;
  overflow: hidden;
  font-size: 14px;
}
.accordion-content.expanded {
  height: 0;
  overflow: hidden; /* semble volontaire */
}
.accordion-plus,
.accordion-minus {
  position: absolute;
  top: 7px;
  right: 8px;
}

/* -------------------------------------------------------------------------- */
/* 10) Fond Home                                                              */
/* -------------------------------------------------------------------------- */
/* 1. On déclare les variables pour chaque point (X et Y) */
@property --p1x { syntax: '<percentage>'; inherits: false; initial-value: 94%; }
@property --p1y { syntax: '<percentage>'; inherits: false; initial-value: 70%; }

@property --p2x { syntax: '<percentage>'; inherits: false; initial-value: 29%; }
@property --p2y { syntax: '<percentage>'; inherits: false; initial-value: 79%; }

@property --p3x { syntax: '<percentage>'; inherits: false; initial-value: 16%; }
@property --p3y { syntax: '<percentage>'; inherits: false; initial-value: 24%; }

@property --p4x { syntax: '<percentage>'; inherits: false; initial-value: 32%; }
@property --p4y { syntax: '<percentage>'; inherits: false; initial-value: 37%; }

.fond-anime {
    background-color: hsla(205, 100%, 29%, 1);
    
    /* On utilise les variables dans le dégradé */
    background-image:
        radial-gradient(at var(--p1x) var(--p1y), hsla(150, 100%, 23%, 1) 0px, transparent 50%),
        radial-gradient(at var(--p2x) var(--p2y), hsla(150, 100%, 23%, 1) 0px, transparent 50%),
        radial-gradient(at var(--p3x) var(--p3y), hsla(150, 100%, 23%, 1) 0px, transparent 50%),
        radial-gradient(at var(--p4x) var(--p4y), hsla(150, 100%, 23%, 1) 0px, transparent 50%);
    
    /* Animation lente et fluide */
    animation: meshMove 15s ease-in-out infinite alternate;
}

@keyframes meshMove {
    0% {
        --p1x: 94%; --p1y: 70%;
        --p2x: 29%; --p2y: 79%;
        --p3x: 16%; --p3y: 24%;
        --p4x: 32%; --p4y: 37%;
    }
    100% {
        /* On déplace chaque point vers une nouvelle destination */
        --p1x: 10%; --p1y: 20%;
        --p2x: 80%; --p2y: 10%;
        --p3x: 60%; --p3y: 80%;
        --p4x: 10%; --p4y: 90%;
    }
}

/* -------------------------------------------------------------------------- */
/* 11) Formulaires (Gravity Forms)                                            */
/* -------------------------------------------------------------------------- */

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover {
  transform: scale(1.05);
}

.gform_wrapper input[type="text"], 
.gform_wrapper input[type="email"], 
.gform_wrapper input[type="tel"], 
.gform_wrapper textarea,
.gform_wrapper select {
 
    padding: 12px !important;
    border: none!important;
    margin-bottom: 3px !important;
    font-size: 14px !important;
    line-height: normal !important;
    box-shadow: none !important;
}
.gform_wrapper textarea{
  border-radius:25px !important ;
}
.gform_wrapper textarea{
	width: 100%;
}

.gform_wrapper select {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

/* Style des labels (Gaz mesuré, Nom, etc.) */
.gfield_label {
    display: block !important;
    font-weight: 600 !important;
    margin-bottom: 5px !important;
    font-size: 0.9rem !important;
}

/* Masquer les instructions inutiles (comme 'champs requis') pour épurer */
.gfield_required {
    color: var(--wp--preset--color--contrast);
    margin-left: 4px;
}

/* -------------------------------------------------------------------------- */
/* 12) Sections “for” (marquee + SVG latéraux)                                */
/* -------------------------------------------------------------------------- */

.panel .marquee-track {
  display: flex;
  gap: clamp(2rem, 6vw, 8rem);
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.panel .wp-block-heading {
/*   white-space: nowrap; */
  display: inline-block;
}

section.for {
  position: relative;
  overflow: visible;
}
section.for .panel {
  position: relative;
  z-index: 2;
}

section.for .svg1,
section.for .svg2 {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  z-index: 0;
  display: grid;
  place-items: center;
}

section.for .svg1 {
  left: 0;
}
section.for .svg2 {
  right: 0;
}

section.for .svg1 svg,
section.for .svg2 svg {
  width: min(35vw, 50vw);
  height: auto;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

/* -------------------------------------------------------------------------- */
/* 13) Utilitaires perf                                                       */
/* -------------------------------------------------------------------------- */

[data-reveal],
[data-parallax],
[data-item] {
  will-change: transform, opacity;
  transform: translateZ(0);
}

/* -------------------------------------------------------------------------- */
/* 14) Pagination (blog)                                                      */
/* -------------------------------------------------------------------------- */

/* Pagination (blog) */
.page-numbers{
padding: 2px 5px;
}

.page-numbers.current{
	background-color: var(--wp--preset--color--contrast); 
	color: white;
	
}
.page-numbers:hover{
	background-color: var(--wp--preset--color--accent-2);
}

/* -------------------------------------------------------------------------- */
/* 15) Navigation — blocs WP core                                             */
/* -------------------------------------------------------------------------- */

/* Mobile layout spacing */
.wp-block-navigation__container {
  gap: 0 !important;
}

/* Menu couleurs hover */
.wp-block-navigation-item__content:hover a span {
  color: #fff;
}

/* -------------------------------------------------------------------------- */
/* 16) Vidéos & divers                                                        */
/* -------------------------------------------------------------------------- */

/* Vidéos */
.wp-block-video {
  overflow: hidden;
  border-radius: 50px;
}

/* Divers */
.head {
  overflow: hidden;
}

/* -------------------------------------------------------------------------- */
/* 17) Bannières / overlays                                                    */
/* -------------------------------------------------------------------------- */

.wp-block-cover.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 42.81%,
    rgba(255, 255, 255, 0.24) 60.57%,
    rgba(255, 255, 255, 0.47) 78.26%,
    rgba(255, 255, 255, 1) 95.29%
  );
}

/* -------------------------------------------------------------------------- */
/* 18) Intro : backgrounds animés                                             */
/* -------------------------------------------------------------------------- */

.intro {
  transition-delay: 1s;
  transition: 0.8s all cubic-bezier(0.43, 0.195, 0.02, 1);
  background: url(img/trefle.svg) no-repeat;
  background-size: contain;
  background-position: calc(50% + var(--bg-x, 0px)) calc(50% + var(--bg-y, 0px));
  position: relative;
  will-change: transform;
}

.intro.active-trigger {
  background-position: 85% 50%;
}

.intro:after {
  content: "";
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;

  transition: 0.8s all cubic-bezier(0.43, 0.195, 0.02, 1);
  transition-delay: 0.4s;

  background: url(img/produits.png) no-repeat 70% center;
  background-size: contain;

  --after-mx: 0px;
  --after-my: 0px;
  margin-left: var(--after-mx);
  margin-top: var(--after-my);
  margin-right: calc(var(--after-mx) * -1);
  margin-bottom: calc(var(--after-my) * -1);

  top: 0;
  right: 0;
  opacity: 0;
}

.active-trigger.intro:after {
  opacity: 1;
  top: -20px;
}

/* -------------------------------------------------------------------------- */
/* 19) Listes custom (role=list)                                              */
/* -------------------------------------------------------------------------- */

ul[role="list"] {
  columns: 1;
  column-gap: 2rem;
  list-style: none; /* on supprime les puces natives */
  margin: 0;
  padding: 10px 3px 27px 40px;
  list-style-position: outside;
}

ul[role="list"] li {
  position: relative;
  break-inside: avoid;
  margin-bottom: 0.5em;
  padding-left: 1.8em;
}

/* Puces (niveau 1/2/3) : mêmes dimensions, mais gardé tel quel */
ul[role="list"] > li::before,
ul[role="list"] > li > ul > li::before,
ul[role="list"] > li > ul > li > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.4em;
  width: 1em;
  height: 1em;
}

/* -------------------------------------------------------------------------- */
/* 20) Défil / marquee                                                        */
/* -------------------------------------------------------------------------- */

@keyframes scrollLoop {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}

/* -------------------------------------------------------------------------- */
/* 21) Typo : sup                                                            */
/* -------------------------------------------------------------------------- */

h1 sup,
h2 sup,
h3 sup,
sup,
span.reg-mark {
  font-size: 0.6em;
  vertical-align: super;
}

sup {
  line-height: 0;
}

h1:has(span.reg-mark),
h2:has(span.reg-mark) {
  position: relative;
}

/* -------------------------------------------------------------------------- */
/* 22) Visibilité mobile (.MobileOn)                                          */
/* -------------------------------------------------------------------------- */

@media (min-width: 1024px) {
  .MobileOn{
    display: none ;
  }

}

/* Mobile : afficher .MobileOn */
@media (max-width: 1023px) {

  .MobileOn {
    display: block !important;
  }
}

/* -------------------------------------------------------------------------- */
/* 23) Divers UI                                                              */
/* -------------------------------------------------------------------------- */
.index1 {
    Z-INDEX: 1 !important;
}

.index10 {
    Z-INDEX: 10 !important;
}

body .wp-block-buttons .wp-block-button__link {
  width: auto !important;
}

.mapster-wp-maps {
  border-radius: 50% !important;
  overflow: hidden !important;
}

/* -------------------------------------------------------------------------- */
/* 24) Mega dropdown custom (plein écran)                                     */
/* -------------------------------------------------------------------------- */

.wp-block-navigation-item.has-mega {
  position: relative;
}

.mega-dropdown {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 100%;
  width: 100vw;
  max-width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  background: #fff;
  border-top: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  z-index: 40;
}

.mega-dropdown.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mega-dropdown-inner {
  max-width: var(--wp--style--global--content-size, 1200px);
  height: 100%;
  margin: 0 auto;
  padding: 2.5rem 1.5rem;
  box-sizing: border-box;
  overflow-y: auto;
}

.mega-grid {
  height: 100%;
}
.mega-right {
  position: relative;
}

/* Menu vertical gauche */
.mega-left-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.mega-item {
  cursor: pointer;
}

.mega-item.is-active {
  font-weight: 600;
}
.mega-item.is-active > * {
  background: #111;
  color: #fff;
  border-radius: 999px;
  padding: 0.6rem 0.9rem;
}

/* Panneaux droite */
.mega-panel {
  display: none;
}
.mega-panel.is-visible {
  display: block;
}
.mega-panel h2,
.mega-panel h3 {
  margin-top: 0;
}

.mega-sub-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
}

/* =============================================
   BLOC NOS PRODUITS — Toggle gaz / poussières
   ============================================= */

/* Contenu poussières masqué par défaut */

@media (max-width: 800px) {
  .mega-dropdown-inner {
    padding: 1.5rem 1rem;
  }
}

/* -------------------------------------------------------------------------- */
/* 25) Media queries                                                          */
/* -------------------------------------------------------------------------- */

@media (min-width: 783px) {
  ul[role="list"] {
    columns: 2;
  }
  ul[role="list"] ul {
    columns: 1;
  }

}

@media (max-width: 650px) {
  .circle.one {
    top: 15vh;
    right: -47vw;
  }
  .circle.two {
    left: -15vw;
  }
  .circle svg {
    height: 60vw;
  }

  .ginput_container_consent {
    padding-top: 0 !important;
  }

  .intro .wp-block-heading {
    margin-top: 80vw;
  }
  .intro.active-trigger {
    background-position: inherit;
  }
  .intro:after {
    background-position: left top;
    right: 10%;
  }
}

@media (max-width: 400px) {
  .title {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}

/* Mega menu mobile (Getwid) */
@media (max-width: 783px) {

  :where(.wp-site-blocks *:focus) {
    outline-width: 0 !important;
  }

}

/* Header responsive */
@media (max-width: 1017px) {
  header main {
    padding-left: 0 !important;
  }
  header main .logo {
    padding: 0 0 0 5% !important;
  }
}

/**
 * Fix de l'affichage de la page /mon-compte/edit-address/
 * Anatecs - thème Twenty Twenty-Five enfant
 */

/* Le bouton Modifier sort du header et passe en bas */

@media (max-width: 450px) {

	.logo{
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}
}

/* ─── FCC Marquee Banner ─────────────────────────────────────────── */

/* Wrapper = conteneur de clip, ratio = canvas Figma */
.fcc-marquee-wrapper {
  overflow: hidden !important;
  width: 100% !important;
  aspect-ratio: 2716 / 1063 !important;
  position: relative !important;
  display: block !important;
  padding: 0 !important;
  gap: 0 !important;
}

/* Chaque track = unité animée, positionnée en absolu */
.fcc-marquee-track {
  position: absolute !important;
  top: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  animation: fcc-scroll 28s linear infinite !important;
}

/* Track 1 part de gauche, track 2 part hors-écran à droite */
.fcc-marquee-wrapper > .fcc-marquee-track:nth-child(1) { left: 0 !important; }
.fcc-marquee-wrapper > .fcc-marquee-track:nth-child(2) { left: 100% !important; }

@keyframes fcc-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* Toutes les figures : positionnement absolu dans le track */
.fcc-marquee-track > figure {
  position: absolute !important;
  margin: 0 !important;
  padding: 0 !important;
  display: block !important;
}
.fcc-marquee-track > figure img {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  max-width: none !important;
}

/* SVGs : object-fit fill (pas cover) */
.fcc-marquee-track > figure:nth-child(2) img,
.fcc-marquee-track > figure:nth-child(4) img,
.fcc-marquee-track > figure:nth-child(6) img,
.fcc-marquee-track > figure:nth-child(7) img,
.fcc-marquee-track > figure:nth-child(9) img {
  object-fit: fill !important;
}

/* ── Positions exactes Figma (% de l'unité 2716 × 1063 px) ────────── */

/* 1 · AdobeStock — x=109 y=331 w=469 h=237 */
.fcc-marquee-track > figure:nth-child(1)  { left:4.01%;  width:17.27%; top:31.14%; aspect-ratio:469/237;  z-index:10; }

/* 2 · Trace-3321 petit — x=344 y=538 w=88 h=60 */
.fcc-marquee-track > figure:nth-child(2)  { left:12.67%; width:3.24%;  top:50.61%; height:5.64%;          z-index:12; }

/* 3 · camion-evolupack — x=822 y=249 w=326 h=216 */
.fcc-marquee-track > figure:nth-child(3)  { left:30.26%; width:12.00%; top:23.42%; aspect-ratio:326/216;  z-index:1;  }

/* 4 · Trace-3320 grand — x=656 y=414 w=238 h=158 */
.fcc-marquee-track > figure:nth-child(4)  { left:24.15%; width:8.76%;  top:38.95%; height:14.86%;         z-index:2;  }

/* 5 · balayeuse-voirie — x=600 y=493 w=548 h=323 */
.fcc-marquee-track > figure:nth-child(5)  { left:22.09%; width:20.18%; top:46.38%; aspect-ratio:548/323;  z-index:9;  }

/* 6 · Trace-3320 grand (centre) — x=1211 y=588 w=238 h=159 */
.fcc-marquee-track > figure:nth-child(6)  { left:44.59%; width:8.76%;  top:55.32%; height:14.96%;         z-index:11; }

/* 7 · Trace-3321 petit — x=2068 y=243 w=89 h=59 */
.fcc-marquee-track > figure:nth-child(7)  { left:76.14%; width:3.28%;  top:22.86%; height:5.55%;          z-index:3;  }

/* 8 · vitrier-nettoyage — x=1170 y=292 w=572 h=378 */
.fcc-marquee-track > figure:nth-child(8)  { left:43.08%; width:21.06%; top:27.47%; aspect-ratio:572/378;  z-index:8;  }

/* 9 · Trace-3321 petit (bas) — x=1489 y=694 w=88 h=59 */
.fcc-marquee-track > figure:nth-child(9)  { left:54.82%; width:3.24%;  top:65.29%; height:5.55%;          z-index:4;  }

/* 10 · ramassage-poubelle — x=1762 y=391 w=470 h=337 */
.fcc-marquee-track > figure:nth-child(10) { left:64.87%; width:17.30%; top:36.78%; aspect-ratio:470/337;  z-index:6;  }

/* 11 · fcc-mrf-tours — x=2189 y=264 w=613 h=406 */
.fcc-marquee-track > figure:nth-child(11) { left:80.60%; width:22.57%; top:24.84%; aspect-ratio:613/406;  z-index:5;  }

/* 12 · Intersection-43 — x=2189 y=391 w=548 h=430 */
.fcc-marquee-track > figure:nth-child(12) { left:80.60%; width:20.18%; top:36.78%; aspect-ratio:548/430;  z-index:7;  }

/* ── Responsive mobile (< 600px) ─────────────────────────────────── */
@media (max-width: 600px) {

  /* Hauteur fixe, on retire l'aspect-ratio desktop */
  .fcc-marquee-wrapper {
    height: 280px !important;
    aspect-ratio: unset !important;
  }

  /* Chaque track : dimensions pixel (scale = 280 / 1063 = 0.2634) */
  .fcc-marquee-track {
    width: 715px !important;
    height: 280px !important;
    animation: fcc-scroll-mob 28s linear infinite !important;
  }

  /* Track 2 démarre exactement une unité à droite */
  .fcc-marquee-wrapper > .fcc-marquee-track:nth-child(2) {
    left: 715px !important;
  }

  @keyframes fcc-scroll-mob {
    from { transform: translateX(0); }
    to   { transform: translateX(-715px); }
  }

  /* Positions pixel (coordonnées Figma × 0.2634) */
  .fcc-marquee-track > figure:nth-child(1)  { left:29px;  top:87px;  width:124px; height:auto !important; aspect-ratio:469/237 !important; }
  .fcc-marquee-track > figure:nth-child(2)  { left:91px;  top:142px; width:23px;  height:16px !important; aspect-ratio:unset   !important; }
  .fcc-marquee-track > figure:nth-child(3)  { left:217px; top:66px;  width:86px;  height:auto !important; aspect-ratio:326/216 !important; }
  .fcc-marquee-track > figure:nth-child(4)  { left:173px; top:109px; width:63px;  height:42px !important; aspect-ratio:unset   !important; }
  .fcc-marquee-track > figure:nth-child(5)  { left:158px; top:130px; width:144px; height:auto !important; aspect-ratio:548/323 !important; }
  .fcc-marquee-track > figure:nth-child(6)  { left:319px; top:155px; width:63px;  height:42px !important; aspect-ratio:unset   !important; }
  .fcc-marquee-track > figure:nth-child(7)  { left:545px; top:64px;  width:23px;  height:16px !important; aspect-ratio:unset   !important; }
  .fcc-marquee-track > figure:nth-child(8)  { left:308px; top:77px;  width:151px; height:auto !important; aspect-ratio:572/378 !important; }
  .fcc-marquee-track > figure:nth-child(9)  { left:392px; top:183px; width:23px;  height:16px !important; aspect-ratio:unset   !important; }
  .fcc-marquee-track > figure:nth-child(10) { left:464px; top:103px; width:124px; height:auto !important; aspect-ratio:470/337 !important; }
  .fcc-marquee-track > figure:nth-child(11) { left:577px; top:70px;  width:162px; height:auto !important; aspect-ratio:613/406 !important; }
  .fcc-marquee-track > figure:nth-child(12) { left:577px; top:103px; width:144px; height:auto !important; aspect-ratio:548/430 !important; }

}
/* ══════════════════════════════════════════════════════════════════════════════
   §12. NAVIGATION PRINCIPALE — FCC
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --nav-h:          115px;
  --nav-transition: .22s ease;
}

/* ── Header block ─────────────────────────────────────────────────────────── */
.mainMenu {
  position: sticky;
  top: 0;
  z-index: 1000;
}

.wp-block-group.mainMenu > .wp-block-group {
  min-height: var(--nav-h);
  height: auto;
  display: flex;
  align-items: center;
  position: relative;
}

/* Pseudo-element blanc pour la transition dégradé → blanc au hover desktop */
.has-custom-color-1-gradient-background {
  position: relative;
}
.has-custom-color-1-gradient-background::before {
  content: '';
  position: absolute;
  inset: 0;
  background: #ffffff;
  opacity: 0;
  transition: opacity var(--nav-transition);
  pointer-events: none;
  z-index: 0;
}
.has-custom-color-1-gradient-background.nav-hovered::before {
  opacity: 1;
}
.has-custom-color-1-gradient-background > * {
  position: relative;
  z-index: 1;
}

@media (min-width: 900px) {
  .header-recherche{
  margin-top: 20px !important;
  margin-bottom: -20px !important;
  }
}

/* ── Site nav wrapper ─────────────────────────────────────────────────────── */
.site-nav {
  display: flex;
  align-items: center;
  height: var(--nav-h);
}

/* ── Nav list ─────────────────────────────────────────────────────────────── */
.site-nav .nav-list {
  display: flex;
  align-items: center;
  gap: 2.5rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ── Top-level items ──────────────────────────────────────────────────────── */
.site-nav .nav-item {
  position: static;
  height: var(--nav-h);
  display: flex;
  align-items: center;
}

.site-nav .nav-link,
.site-nav .mega-trigger {
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  background: transparent;
  border: none;
  outline: none;
  box-shadow: none;
  -webkit-appearance: none;
  appearance: none;
  padding: 0;
  transition: color var(--nav-transition);
  text-decoration: none;
}

/* Nav hovered : texte gris, item actif = bleu */
.nav-hovered .site-nav .nav-link,
.nav-hovered .site-nav .mega-trigger {
  color: #6f757c;
}
.nav-hovered .site-nav .nav-item:hover > .nav-link,
.nav-hovered .site-nav .nav-item.is-open > .nav-link,
.nav-hovered .site-nav .nav-item:hover > .mega-trigger,
.nav-hovered .site-nav .nav-item.is-open > .mega-trigger {
  color: #005697;
}

.dropdown-arrow,
.mega-trigger__arrow {
  display: none;
}

/* ── Dropdown pleine largeur ──────────────────────────────────────────────── */
.site-nav .sub-menu {
  position: fixed;
  top: 140px !important;
  left: 0;
  width: 100vw;
  background: #ffffff;
  box-shadow: 0 10px 10px rgba(0,0,0,.05);
  list-style: none;
  margin: 0;
  padding: 1.5rem 2rem 1.5rem var(--sub-left, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s ease;
  z-index: 999;
}

.site-nav .sub-menu .sub-item a {
  display: block;
  padding: .5rem 0;
  color: #090909;
  font-size: 1.5rem;
  font-weight: 400;
  text-decoration: none;
}

.site-nav .sub-menu .sub-item a:hover {
  color: #005697;
}

/* Desktop : affichage au hover et via JS .is-open */
@media (min-width: 901px) {
  .site-nav .has-dropdown:hover > .sub-menu,
  .site-nav .has-dropdown.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    padding-bottom: 0;
  }
}

/* ── Hamburger ────────────────────────────────────────────────────────────── */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
  user-select: none;
  -webkit-user-select: none;
  flex-shrink: 0;
  position: relative;
  z-index: 1001;
  margin-right: 20px !important;
}

.nav-hamburger:hover,
.nav-hamburger:focus,
.nav-hamburger:active,
.nav-hamburger:focus-visible,
.nav-hamburger:focus-within {
  background: transparent !important;
  background-color: transparent !important;
  outline: none !important;
  box-shadow: none !important;
}

.nav-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background-color: #ffffff;
  transition: transform .22s ease, opacity .22s ease, background-color .22s ease;
  transform-origin: center;
  pointer-events: none;
}

.nav-hamburger span:nth-child(2) {
  opacity: 0;
}

.nav-hamburger[aria-expanded="true"] span {
  background-color: #005697;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg);  }
.nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ── Mobile (< 900px) ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .site-nav.is-open::after {
    content: "";
    background: #ffffff;
    Z-INDEX: 100000;
    width: 100%;
    height: 115px;
    position: fixed;
    top: 0;
    left: 0;
  }
  .mainMenu {
    position: sticky !important;
    top: 0;
    z-index: 1000;
  }

  .wp-block-group.mainMenu > .wp-block-group {
    height: var(--nav-h) !important;
    min-height: unset;
    align-items: center;
    overflow: visible;
  }

  .wp-block-group.logo {
    padding: 0 !important;
    display: flex !important;
    align-items: center;
    z-index: 1001;
  }
  .wp-block-group.logo .wp-block-site-logo {
    padding: 0 1rem !important;
  }
  .wp-block-group.logo img.custom-logo {
    height: 52px !important;
    width: auto !important;
    max-width: none;
  }

  .nav-hamburger {
    display: flex;
    position: relative;
    z-index: 1001;
    flex-shrink: 0;
  }

  .MobileOff { display: none !important; }

  .nav-utils.MobileOff {
    display: block !important;
    position: fixed;
    inset: 0;
    background: #ffffff;
    z-index: 1000;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .22s ease, visibility .22s ease;
  }

  .nav-utils.MobileOff:has(.site-nav.is-open) {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    z-index: 1 !important;
  }

  .nav-utils.MobileOff .wp-block-search {
    position: fixed;
    top: calc((var(--nav-h) - 44px) / 2);
    right: 52px;
    z-index: 1002;
    display: flex;
    align-items: center;
    margin: 0;
    padding: 0;
  }
  .wp-block-search__input { display: none !important; }
  .wp-block-search__button {
    display: flex;
    background: transparent;
    border: none;
    padding: 0.5rem;
    color: #005697;
    cursor: pointer;
  }
  .wp-block-search__button svg {
    width: 24px;
    height: 24px;
    fill: #005697;
    color: #005697;
  }

  .site-nav {
    width: 100%;
    height: auto !important;
    flex-shrink: 0;
    flex-direction: column;
    align-items: stretch;
    padding: var(--nav-h) 0 4rem;
  }

  .site-nav .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .site-nav .nav-item {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    margin: 0;
    padding: 0;
  }

  .site-nav .nav-link,
  .site-nav .mega-trigger {
    color: #005697 !important;
    padding: 1.25rem 1.5rem;
    font-size: 1.5rem;
    font-weight: 700;
    justify-content: flex-start;
  }

  .site-nav .sub-menu {
    position: static;
    display: none;
    flex-direction: column;
    background: transparent;
    box-shadow: none;
    border: none;
    margin: 0;
    padding: 0;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: none;
    transition: none;
  }

  .site-nav .has-dropdown.is-open > .sub-menu {
    display: flex;
  }

  .site-nav .sub-menu .sub-item a {
    display: block;
    padding: 0 1.5rem 1rem 3rem;
    color: #005697 !important;
    font-size: 1rem;
    font-weight: 400;
  }

  .site-nav .current-menu-item > .nav-link,
  .site-nav .current-menu-item > .mega-trigger,
  .site-nav .current-menu-ancestor > .nav-link,
  .site-nav .current-menu-ancestor > .mega-trigger {
    color: var(--wp--preset--color--accent-1) !important;
  }

  * { -webkit-tap-highlight-color: transparent; }
}

/* ── Icône recherche — desktop hover ──────────────────────────────────────── */
.nav-hovered .wp-block-search button svg,
.nav-hovered .wp-block-search button {
  color: #005697 !important;
}

/* ── Divers ───────────────────────────────────────────────────────────────── */
.fcc-marquee-track {
  animation-direction: reverse !important;
}

summary:hover {
  color: var(--wp--preset--color--accent-1);
}

a {
  display: inline-block;
  transition: transform 0.3s ease;
}

a:hover {
  transform: scale(1.05) !important;
}

/* ── Header transparent sur la home avant scroll ─────────────────────────── */
body.home header .has-custom-color-1-gradient-background {
  transition: background 0.9s ease;
}
body.home header:not(.main-tool-bar--scrolled) .has-custom-color-1-gradient-background {
  background: transparent !important;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPLE-STYLE NAV ANIMATIONS
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 1. Curtain (couvre tout le viewport — la barre blanche est au-dessus) ── */
.nav-curtain {
  position: fixed;
  top: 100vh; /* positionné sous le dropdown par JS */
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0;
  pointer-events: none;
  z-index: 998;
  will-change: opacity;
  /* Disparition : aucun délai */
  transition: opacity 0.2s cubic-bezier(0.2, 0, 0, 1) 0s,
              top 0.35s cubic-bezier(0.2, 0, 0, 1);
}
.nav-curtain.is-visible {
  opacity: 1;
  /* Apparition : délai pour laisser le dropdown s'ouvrir d'abord */
  transition: opacity 0.36s cubic-bezier(0.2, 0, 0, 1) 0.18s,
              top 0.35s cubic-bezier(0.2, 0, 0, 1);
}

@media (min-width: 901px) {

  /* ── 2. Easing Apple sur les éléments nav ────────────────────────────── */
  :root {
    --nav-transition: 0.35s cubic-bezier(0.2, 0, 0, 1);
  }
  .nav-curtain{
  background: rgba(0, 0, 0, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); 
  }

  /* ── 4. Switch instantané Apple (panel suivant sans fade) ──────────────── */
  .site-nav .has-dropdown.nav-switching > .sub-menu {
    transition: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* ── 5. Stagger des liens : transition (re-trigge à chaque hover) ────────── */
  /* État de base : invisible + décalé vers le bas */
  .site-nav .sub-item a {
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.18s ease, transform 0.18s ease; /* fermeture rapide */
  }
  /* Quand ouvert : les items remontent avec leur délai de stagger */
  .site-nav .has-dropdown.is-open .sub-item a {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.45s cubic-bezier(0.2, 0, 0, 1),
                transform 0.45s cubic-bezier(0.2, 0, 0, 1);
  }
  .site-nav .has-dropdown.is-open .sub-item:nth-child(1) a { transition-delay: 0.08s; }
  .site-nav .has-dropdown.is-open .sub-item:nth-child(2) a { transition-delay: 0.13s; }
  .site-nav .has-dropdown.is-open .sub-item:nth-child(3) a { transition-delay: 0.18s; }
  .site-nav .has-dropdown.is-open .sub-item:nth-child(4) a { transition-delay: 0.23s; }
  .site-nav .has-dropdown.is-open .sub-item:nth-child(5) a { transition-delay: 0.28s; }
  /* Switch instantané : pas d'animation sur les items non plus */
  .site-nav .has-dropdown.nav-switching .sub-item a {
    transition: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}

/* ══ Apple : barre nav grandit + sous-menu intégré ══════════════════════════ */
@media (min-width: 901px) {

  /* Transition agrandissement barre */
  .has-custom-color-1-gradient-background {
    transition: padding-bottom 0.35s cubic-bezier(0.2, 0, 0, 1);
  }
  body.home header .has-custom-color-1-gradient-background {
    transition: background 0.9s ease, padding-bottom 0.35s cubic-bezier(0.2, 0, 0, 1);
  }

  /* Sous-menu : garde position:fixed (pas de conflit ancêtre)
     mais fond transparent → la barre agrandie sert de fond via son ::before blanc */
  .site-nav .sub-menu {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1) 0.05s,
                visibility 0s 0.40s !important;
  }
  .site-nav .has-dropdown:hover > .sub-menu,
  .site-nav .has-dropdown.is-open > .sub-menu {
    transform: none !important;
    transition: opacity 0.35s cubic-bezier(0.2, 0, 0, 1),
                visibility 0s 0s !important;
  }

  /* Séparateur discret entre nav links et contenu dropdown */
  .has-custom-color-1-gradient-background.nav-hovered .mainMenu {
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  }
}

/* Pas d'effet hover sur les liens du sous-menu */
.site-nav .sub-menu .sub-item a:hover {
  transform: none !important;
}

/* Pas d'effet hover sur les liens du nav principal */
.site-nav .nav-link:hover,
.site-nav .mega-trigger:hover {
  transform: none !important;
}

/* Nav principal : paliers fixes (pas de vw → pas de shift au changement de page) */
@media (min-width: 901px) and (max-width: 1280px) {
  .site-nav .nav-link, .site-nav .mega-trigger { font-size: 1.15rem !important; }
  .site-nav .nav-list { gap: 1.5rem; }
  .site-nav .sub-menu .sub-item a { font-size: 1.15rem !important; }
}
@media (min-width: 1281px) and (max-width: 1520px) {
  .site-nav .nav-link, .site-nav .mega-trigger { font-size: 1.3rem !important; }
  .site-nav .nav-list { gap: 2rem; }
  .site-nav .sub-menu .sub-item a { font-size: 1.3rem !important; }
}
@media (min-width: 1521px) {
  .site-nav .nav-link, .site-nav .mega-trigger { font-size: 1.5rem !important; }
  .site-nav .nav-list { gap: 2.5rem; }
  .site-nav .sub-menu .sub-item a { font-size: 1.5rem !important; }
}

/* ── Hamburger amélioré ─────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  .nav-hamburger {
    width: 48px;
    height: 48px;
    gap: 5px;
    margin-left: auto; /* pousse le bouton à droite si besoin */
    margin-right: 0.5rem;
  }

  /* 3 barres visibles (la span:nth-child(2) n'est plus cachée) */
  .nav-hamburger span {
    width: 26px;
    height: 2.5px;
    border-radius: 3px;
    background-color: #ffffff;
    transition: transform 0.38s cubic-bezier(0.2, 0, 0, 1),
                opacity   0.28s cubic-bezier(0.2, 0, 0, 1),
                background-color 0.28s ease;
  }

  /* Annuler l'opacity:0 du span du milieu en état fermé */
  .nav-hamburger span:nth-child(2) {
    opacity: 1;
    width: 20px; /* barre centrale légèrement plus courte pour le style */
    align-self: flex-end; /* décalée à droite */
  }

  /* Animation → X à l'ouverture */
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7.5px) rotate(45deg);
    width: 26px;
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
  }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7.5px) rotate(-45deg);
  }

  /* Couleur quand menu ouvert */
  .nav-hamburger[aria-expanded="true"] span {
    background-color: #005697;
    width: 26px;
  }
}
/* Hamburger — fix barres ratatinées */
@media (max-width: 900px) {
  .nav-hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-end !important; /* aligne toutes les barres à droite */
    gap: 6px !important;
    width: 48px !important;
    height: 48px !important;
  }
  .nav-hamburger span {
    display: block !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    height: 2px !important;
    border-radius: 2px !important;
    background-color: #ffffff !important;
  }
  .nav-hamburger span:nth-child(1) { width: 26px !important; }
  .nav-hamburger span:nth-child(2) {
    width: 18px !important;
    opacity: 1 !important;
    align-self: unset !important;
  }
  .nav-hamburger span:nth-child(3) { width: 26px !important; }

  /* État ouvert → X */
  .nav-hamburger[aria-expanded="true"] span { background-color: #005697 !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg) !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0 !important; transform: scaleX(0) !important; }
  .nav-hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg) !important; }

  button.wp-block-search__button.has-background.has-icon.wp-element-button {
    width: 40px;
    height: 40px;
  }
  form.wp-block-search__button-only.wp-block-search__icon-button.header-recherche.wp-block-search {
    Z-INDEX: 99999999999999999 !important;
    height: 40px;
    width: 50vw;
  }
}

@media (max-width: 900px) {
  .nav-utils.MobileOff .wp-block-search:not(.wp-block-search__searchfield-hidden) {
    right: 16px;
    width: auto;
  }
  .nav-utils.MobileOff .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
    width: 100% !important;
    overflow: visible;
  }
  .nav-utils.MobileOff .wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__input {
    display: block !important;
    width: 100%;
    visibility: visible;
    opacity: 1;
    background: #fff;
    color: #333;
    padding: 8px 12px;
  }
  .wp-block-search__inside-wrapper {
    position: absolute;
    right: 40px;
  }

}