/* === BARRE DE RECHERCHE STICKY ALIGNÉE SUR LE MENU === */

:root {
  --header-h: 64px; /* hauteur du header (à ajuster si besoin) */
}

/* Style global de la barre de recherche */
.search-bar {
  width: 100%;
  max-width: 1200px; /* même largeur que ton conteneur menu */
  margin-inline: auto; /* centre le bloc */
  padding-inline: 16px; /* même espace latéral que le menu */
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #fff; /* fond blanc pour rester lisible en sticky */
  z-index: 9998;
}

/* === Effet sticky : reste fixée sous le menu === */
.sticky-search {
  position: sticky;
  top: var(--header-h); /* colle sous ton header */
  z-index: 9998;
}

/* Ajustements pour mobile */
@media (max-width: 768px){
  .search-bar {
    width: 100%;
    max-width: none;
    padding-inline: 16px;
    justify-content: center;
  }
}

/* Champ de recherche — marge interne gauche */
.search-bar input[type="search"] {
  flex: 1;
  padding-left: 20px; /* marge interne à gauche */
  font-size: 16px; /* évite zoom iOS */
  border-radius: 50px 0 0 50px; /* optionnel : arrondi gauche */
  border: 1px solid #ccc; /* à ajuster selon ton style */
  height: 46px; /* garde une hauteur constante */
  outline: none;
}

/* Bouton de recherche — marge interne droite */
.search-bar button,
.search-bar input[type="submit"] {
  padding-right: 20px; /* marge interne à droite */
  border-radius: 0 50px 50px 0; /* arrondi droit */
  height: 46px;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Lorsque tu es connectée au back-office WordPress (barre admin) */
@media (max-width: 782px){
  .admin-bar .sticky-search {
    top: calc(var(--header-h) + 46px);
  }
}

/* iPhone avec encoche : évite le chevauchement */
@supports (padding-top: env(safe-area-inset-top)){
  .sticky-search {
    padding-top: max(env(safe-area-inset-top), 0px);
  }
}
/* ==== Hauteur réelle du header (menu). Ajuste si besoin) ==== */
:root{ --header-h: 64px; }  /* 64, 68, 72… selon ton design */

/* ==== MENU : sticky tout en haut ==== */
.sticky-header{
  position: sticky;
  top: 0;
  z-index: 10000;                 /* plus haut que la recherche */
  background: #fff;               /* fond opaque obligatoire */
  min-height: var(--header-h);    /* évite le CLS (saut) */
  display: flex; align-items: center;
  will-change: transform;         /* scroll plus fluide */
}

/* ==== RECHERCHE : sticky juste sous le menu ==== */
.search-bar{
  width: 100%;
  max-width: 1200px;              /* même largeur que ton conteneur menu */
  margin-inline: auto;
  padding-inline: 16px;           /* même gouttières que le menu */
  box-sizing: border-box;
  background: #fff;
}

.sticky-search{
  position: sticky;
  top: var(--header-h);           /* se cale sous le menu */
  z-index: 9998;                  /* sous le menu, au-dessus du contenu */
}

/* Champ + bouton : marges internes demandées */
.search-bar input[type="search"]{
  flex: 1; padding-left: 20px; font-size:16px; height:46px;
  border-radius: 50px 0 0 50px; border:1px solid #ccc; outline:none;
}
.search-bar button,
.search-bar input[type="submit"]{
  padding-right: 20px; height:46px; border:none; cursor:pointer;
  border-radius: 0 50px 50px 0; display:inline-flex; align-items:center; justify-content:center;
}

/* Mobile : largeur fluide */
@media (max-width:768px){
  .search-bar{ max-width:none; }
}

/* Barre d’admin WP visible (quand connecté.e) */
@media (max-width:782px){
  .admin-bar .sticky-header{ top:46px; }
  .admin-bar .sticky-search{ top: calc(var(--header-h) + 46px); }
}

/* iPhone à encoche : évite les chevauchements */
@supports (padding-top: env(safe-area-inset-top)){
  .sticky-header{ padding-top: max(env(safe-area-inset-top), 0px); }
}