/* ====== RESET COMPLET DU "SEARCH" EN HEADER (Opti) ====== */

/* 1) Conteneur et variantes (search-form / searchform / search-box / search) */
.site-header form.search-form,
.site-header .search-form,
.site-header .searchform,
.site-header .search-box,
.header form.search-form,
.header .search-form,
.header .searchform,
.header .search-box,
.site-header [class*="search"],
.header [class*="search"] {
  background-color: #ffffff !important;     /* ta couleur de fond */
  background-image: none !important;        /* supprime dégradés/images */
  color: #000 !important;
  border: 1px solid #ddd !important;        /* optionnel, pour visuel léger */
  border-radius: 30px !important;           /* pilule comme sur ton screenshot */
  box-shadow: none !important;
}

/* 2) Pseudo-éléments qui pourraient peindre un fond noir */
.site-header .search-form::before,
.site-header .search-form::after,
.header .search-form::before,
.header .search-form::after,
.site-header .searchform::before,
.site-header .searchform::after,
.header .searchform::before,
.header .searchform::after,
.site-header [class*="search"]::before,
.site-header [class*="search"]::after,
.header [class*="search"]::before,
.header [class*="search"]::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 3) Champ texte (input de recherche) */
.site-header .search-form input[type="search"],
.site-header .searchform input[type="search"],
.header .search-form input[type="search"],
.header .searchform input[type="search"],
.site-header .search-form input.search-field,
.header .search-form input.search-field {
  background-color: transparent !important; /* pour voir le fond du conteneur */
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;      /* neutralise styles mobiles */
  appearance: none !important;
  padding: 10px 14px !important;
}

/* Placeholder lisible */
.site-header .search-form input::placeholder,
.header .search-form input::placeholder {
  color: #666 !important;
}

/* 4) Bouton/icone loupe à droite */
.site-header .search-submit,
.header .search-submit,
.site-header a.search-toggle,
.header a.search-toggle,
.site-header button.search-submit,
.header button.search-submit {
  background-color: #0062B8 !important;     /* bleu BAO Élan Vital */
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* Icône (SVG / Font Awesome) en blanc */
.site-header .search-submit svg,
.header .search-submit svg {
  fill: currentColor !important;
}
.site-header .search-submit .fa,
.header .search-submit .fa {
  color: currentColor !important;
}

/* 5) États hover/focus */
.site-header .search-submit:hover,
.header .search-submit:hover,
.site-header a.search-toggle:hover,
.header a.search-toggle:hover {
  background-color: #0058A3 !important;     /* nuance plus sombre */
}

/* 6) Variante mobile si un style responsive écrase la couleur */
@media (max-width: 782px) {
  .site-header [class*="search"],
  .header [class*="search"] {
    background-color: #ffffff !important;
  }
}

/* 7) Cas extrêmes : un overlay/filtres peignent le noir — on neutralise */
.site-header [class*="search"] * {
  background-image: none !important;
  filter: none !important;
}
``
/* ===== Corrige le champ de recherche noir dans le header (#masthead) ===== */

/* 0) Annule toute image/gradient/ombre qui force le noir */
#masthead .search-form,
#masthead .searchform,
#masthead .search-box {
  background-image: none !important;
  box-shadow: none !important;
}

/* 1) Neutralise les pseudo-éléments qui peignent parfois un fond noir */
#masthead .search-form::before,
#masthead .search-form::after,
#masthead .searchform::before,
#masthead .searchform::after {
  content: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* 2) Conteneur du pill + champ de saisie */
#masthead form.search-form,
#masthead .search-form {
  background-color: #ffffff !important;     /* ← change ici si tu veux une autre couleur */
  border: 1px solid #d9d9d9 !important;     /* optionnel */
  border-radius: 28px !important;
}

#masthead .search-form input[type="search"],
#masthead .searchform input[type="search"],
#masthead .search-form input.search-field,
#masthead input#s {
  background-color: transparent !important; /* on voit le fond du conteneur */
  color: #000 !important;
  border: none !important;
  box-shadow: none !important;
  -webkit-appearance: none !important;      /* neutralise les styles par défaut mobile */
  appearance: none !important;
  padding: 10px 14px !important;
}

/* Placeholder lisible sur fond clair */
#masthead .search-form input::placeholder {
  color: #666 !important;
}

/* 3) Bouton / icône loupe à droite */
#masthead .search-submit,
#masthead button.search-submit,
#masthead a.search-toggle {
  background-color: #0062B8 !important;     /* bleu BAO Élan Vital */
  color: #ffffff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  min-width: 34px !important;
  min-height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Icône (SVG / Font Icon) en blanc */
#masthead .search-submit svg { fill: currentColor !important; }
#masthead .search-submit .fa { color: currentColor !important; }

/* 4) État hover */
#masthead .search-submit:hover,
#masthead a.search-toggle:hover {
  background-color: #0058A3 !important;
}

/* 5) Sécurité “filet large” : enlève tout fond forcé à l’intérieur du bloc search */
#masthead .search-form * {
  background-image: none !important;
  filter: none !important;
}
body { outline: 3px solid red !important; }
/* ===== Force le fond bleu clair du champ de recherche dans #masthead ===== */

/* Le conteneur principal */
#masthead .search-form,
#masthead form.search-form {
    background-color: #e6f0fa !important;   /* bleu clair BAO */
    border-radius: 30px !important;
    border: none !important;
    background-image: none !important;
}

/* Le champ lui-même */
#masthead .search-form input[type="search"],
#masthead .search-form input.search-field,
#masthead input#s {
    background-color: #e6f0fa !important;
    color: #000 !important;
    border: none !important;
    box-shadow: none !important;
}

/* Pseudo-éléments du thème Opti qui peignent le noir */
#masthead .search-form::before,
#masthead .search-form::after {
    content: none !important;
    background: none !important;
}

/* L’icône loupe */
#masthead .search-submit,
#masthead button.search-submit {
    background-color: #0062B8 !important;
    color: #fff !important;
    border-radius: 50% !important;
    border: none !important;
}

/* Icône SVG / font */
#masthead .search-submit svg,
#masthead .search-submit .fa {
    fill: #fff !important;
    color: #fff !important;
}
/* Conteneur et champ du widget Recherche */
.sidebar .widget_search .search-form,
.widget_search .search-form,
.sidebar .widget_search input[type="search"],
.widget_search input[type="search"],
.sidebar .widget_search .search-field,
.widget_search .search-field {
  background-color: #e6f0fa !important;   /* bleu clair */
  color: #000 !important;
  border: 1px solid #cfd9ea !important;    /* optionnel */
  border-radius: 24px !important;
  box-shadow: none !important;
  background-image: none !important;
}

/* Placeholder lisible */
.widget_search input::placeholder {
  color: #5c6b80 !important;
}

/* Bouton loupe du widget Recherche */
.widget_search .search-submit,
.sidebar .widget_search .search-submit {
  background-color: #0062B8 !important;    /* bleu BAO */
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 32px !important;
  height: 32px !important;
  min-width: 32px !important;
  min-height: 32px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

/* Icône (si SVG / font) */
.widget_search .search-submit svg { fill: #fff !important; }
.widget_search .search-submit .fa { color: #fff !important; }

/* Évite les overlays/pseudo-éléments noirs ajoutés par le thème */
.widget_search .search-form::before,
.widget_search .search-form::after {
  content: none !important;
  background: none !important;
}