/* On masque l’input */
.is-search-form .is-search-input {
  width: 0 !important;
  padding: 0 !important;
  opacity: 0 !important;
  border: none !important;
}

/* On force le bouton loupe à rester visible */
.is-search-form .is-search-submit {
  width: 40px !important;
  height: 40px !important;
  background: transparent !important;
  border: none !important;
}
/* Le modal */
.is-search-form::after {
  content: "";
  position: fixed;
  inset: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(5px);
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 9999;
}

/* Conteneur du champ dans le modal */
.is-search-form::before {
  content: attr(data-placeholder);
  position: fixed;
  top: 30vh;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2rem;
  opacity: 0;
  pointer-events: none;
  transition: 0.3s ease;
  z-index: 10000;
}

/* Quand on focus l'input → modal ON */
.is-search-form .is-search-input:focus ~ *,
.is-search-form .is-search-input:focus {
  /* On peut cibler le form entier via :focus-within */
}

.is-search-form:focus-within::after {
  opacity: 1;
  pointer-events: auto;
}

.is-search-form:focus-within::before {
  opacity: 1;
}

/* Input invisible dans le header */
.is-search-form .is-search-input {
  position: absolute;
}

/* Input visible quand modal ouvert */
.is-search-form:focus-within .is-search-input {
  position: fixed;
  top: 40vh;
  left: 50%;
  transform: translateX(-50%);
  width: 70vw !important;
  opacity: 1 !important;
  padding: 1rem !important;
  border: 1px solid #ccc !important;
  background: white;
  font-size: 1.4rem;
  z-index: 10001;
}

/* Croix de fermeture */
.is-search-form::before {
  content: "✕";
  position: fixed;
  top: 40px;
  right: 40px;
  font-size: 2rem;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  z-index: 10002;
  transition: opacity 0.3s;
}

/* Affichage de la croix quand modal ouvert */
.is-search-form:focus-within::before {
  opacity: 1;
  pointer-events: auto;
}

/* Fermer le modal au clic (astuce CSS) */
.is-search-form::before {
  /* Quand on clique → on enlève le focus → modal fermé */
}
.is-search-form::before:active {
  /* Force le blur du champ */
}

.is-search-form::before:active ~ .is-search-input {
  pointer-events: none;
}

/* Style normal (fermée) */
.is-ajax-search-result {
  position: absolute !important;
  top: 100%;
  right: 0;
}

/* Dans le modal */
.is-search-form:focus-within .is-ajax-search-result {
  position: fixed !important;
  top: 55vh !important;
  left: 50% !important;
  transform: translateX(-50%);
  width: 70vw !important;
  max-height: 40vh !important;
  overflow-y: auto !important;
  background: white !important;
  border: 1px solid #ccc !important;
  z-index: 10001 !important;
}

/* 20-11  */
.is-form-style input.is-search-submit,
.is-search-icon {
  color: var(--bleu);
  background: none !important;
  border: none !important;
  padding-top: 0 !important;
  font-size: 30px !important;
  cursor: pointer;
}

#menu-menu-principal li {
  position: static !important;
}
#menu-menu-principal .sub-menu {
  width: -webkit-fill-available !important;
}

/* =======================================================
   FIX DIVI HEADER (comme ton site qui marche)
   ======================================================= */
#main-header,
.et-l--header,
#et-boc .et-l--header {
  position: relative;
  z-index: 9999;
  transform: none !important;
  filter: none !important;
  will-change: auto !important;
  overflow: visible !important;
}

/* =======================================================
   MEGA MENU (sections Divi) : section_sub_menu_X
   JS ajoute/enlève juste la classe .is-open
   ======================================================= */

/* Base (fermé) : cible section_sub_menu_1, _2, _3... */
[class^="section_sub_menu_"],
[class*=" section_sub_menu_"]{
  position: fixed;
  left: 0;
  right: 0;
  top: 150px;              /* fallback si JS ne set pas top */
  z-index: 999999;

  opacity: 0;
  visibility: hidden;

  /* IMPORTANT: si Divi/ancien CSS avait height/overflow */
  height: auto !important;
  overflow: visible !important;
  display: block !important;

  padding: 0 50px;

  transition: opacity .2s ease, visibility 0s linear .2s;
}

/* Ouvert */
[class^="section_sub_menu_"].is-open,
[class*=" section_sub_menu_"].is-open{
  opacity: 1;
  visibility: visible !important;
  pointer-events: auto;
  transition: opacity .2s ease, visibility 0s;
}


/* Si besoin, force le header en dessous du mega menu (stacking) */
.prelude-header {
  position: relative;
  z-index: 10000;
}