/* =================================================================================
   ==================================VARIABLES & RESET==============================
   ================================================================================= */

:root {
  --shadow: 5px 2px 20px rgba(0,0,0,0.2);
  --violet: var(--wp--preset--color--couleur-1);
  --violet_hover: var(--wp--preset--color--couleur-2);
  --nav-text: var(--wp--preset--color--couleur-3);
  --nav-title: var(--wp--preset--color--couleur-4);
  --nav-bg_opacity: var(--wp--preset--color--couleur-5);
  --nav-bg: var(--wp--preset--color--couleur-6);
  --nav-gradient-1: var(--wp--preset--gradient--gradient-accueil);
  --nav-gradient-2: var(--wp--preset--gradient--gradient-cancer);
  --nav-gradient-3: var(--wp--preset--gradient--gradient-diagnostic);
  --nav-gradient-4: var(--wp--preset--gradient--gradient-contact);
}

/* Items masqués par le filtre local */
.fe-hidden {
  display: none !important;
}

/* Message "aucun résultat" */
.fe-empty {
  margin-top: .75rem;
  color: var(--wp--preset--color--contrast-3, var(--nav-text));
  font-size: 0.95em;
}

/* ==================================== Barre & Input custom ==================================== */

.wp-block-search.is-filtre-etudes .wp-block-search__inside-wrapper {
  background-color: var(--fe-bar-bg, transparent);
  padding: var(--fe-bar-padding-y, 0.5rem) var(--fe-bar-padding-x, 0.5rem);
  border-radius: var(--fe-bar-radius, 0);
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

.wp-block-search.is-filtre-etudes .wp-block-search__input {
  background-color: var(--fe-input-bg, rgba(0, 0, 0, 0.05));
  color: var(--fe-input-color, var(--nav-text));
  padding: 0 1rem;
}

.wp-block-search.is-filtre-etudes .wp-block-search__input::placeholder {
  color: var(--fe-placeholder-color, var(--nav-text));
  opacity: 1;
}

/* Bouton */

.wp-block-search.is-filtre-etudes .wp-block-search__button:hover {
  background-color:transparent!important;
}

/* ==================================== Filtres dropdown (UI) ==================================== */

.wp-block-search.is-filtre-etudes .fe-filters {
  display: block;
  width: 100%;
  margin-top: 1rem;
  box-sizing: border-box;
  overflow: visible;
}

.wp-block-search.is-filtre-etudes .fe-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .5rem;
  width: 100%;
  margin-top: .25rem;
}

/* Conteneur d’un filtre */
.wp-block-search.is-filtre-etudes .fe-filter {
  position: relative;
  display: inline-block;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

/* Toggle (pilule) */
.fe-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-color: var(--fe-bar-bg, transparent);
  color: var(--fe-input-color);
  padding: .5rem 1rem;
  border: none;
  border-radius: var(--fe-filter-pill-radius, 999px);
  cursor: pointer;
  font-size: 0.9em;
  line-height: 1;
  user-select: none;
  transition: background-color .15s, color .15s;
}

/* Chevron */
.wp-block-search.is-filtre-etudes .fe-filter-toggle::after {
  content: '';
  width: .6rem;
  height: .6rem;
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24'%3E%3Cpath d='M6.23 8.58a1 1 0 0 1 1.42-.16L12 11.13l4.35-2.71a1 1 0 0 1 1.06 1.69l-5 3.12a1 1 0 0 1-1.06 0l-5-3.12a1 1 0 0 1-1.16-1.43Z'/%3E%3C/svg%3E");
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 24 24'%3E%3Cpath d='M6.23 8.58a1 1 0 0 1 1.42-.16L12 11.13l4.35-2.71a1 1 0 0 1 1.06 1.69l-5 3.12a1 1 0 0 1-1.06 0l-5-3.12a1 1 0 0 1-1.16-1.43Z'/%3E%3C/svg%3E");
  background: currentColor;
  mask-repeat: no-repeat;
  -webkit-mask-repeat: no-repeat;
  mask-position: center;
  -webkit-mask-position: center;
  mask-size: 100% 100%;
  -webkit-mask-size: 100% 100%;
  transform: rotate(0deg);
  transition: transform .15s;
}

/* État ouvert : chevron inversé */
.wp-block-search.is-filtre-etudes .fe-filter.open .fe-filter-toggle::after {
  transform: rotate(180deg);
}

/* Volet (panel) — largeur intrinsèque au contenu avec garde-fous */
.wp-block-search.is-filtre-etudes .fe-filter-panel {
  position: absolute;
  top: calc(100% + .25rem);
  left: 0;
  z-index: 5;
  width: max-content;
  max-width: min(90vw, 480px);
  min-width: 220px;
  max-height: 280px;
  overflow: auto;
  background-color: var(--nav-bg);
  color: var(--nav-text);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: .5rem;
  display: none;
}

/* Afficher quand .open */
.wp-block-search.is-filtre-etudes .fe-filter.open .fe-filter-panel {
  display: block;
}

/* Option avec label + checkbox à droite */
.wp-block-search.is-filtre-etudes .fe-filter-option {
  display: flex;
  align-items: center;
  gap: .75rem;
  justify-content: space-between;
  padding: .8rem 1rem;
  border-radius: 6px;
  transition: background-color .12s;
}

.wp-block-search.is-filtre-etudes .fe-filter-option:hover {
  background-color: rgba(0,0,0,0.04);
}

.wp-block-search.is-filtre-etudes .fe-filter-option-label {
  font-size: .92rem;
  line-height: 1.2;
}

/* Checkbox côté droit */
.wp-block-search.is-filtre-etudes .fe-filter-option-input {
  width: 16px;
  height: 16px;
  cursor: pointer;
  accent-color: var(--fe-button-bg, var(--violet));
  flex-shrink: 0;
}

/* ===== Bulles des filtres actifs ===== */

.wp-block-search.is-filtre-etudes .fe-active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .5rem;
  width: 100%;
  margin-top: .25rem;
}

.wp-block-search.is-filtre-etudes .fe-active-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background-color: var(--fe-button-bg, var(--violet));
  color: #fff;
  padding: .4rem .8rem;
  border-radius: 999px;
  font-size: .85em;
  line-height: 1;
}

.wp-block-search.is-filtre-etudes .fe-active-filter-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1rem;
  height: 1rem;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  cursor: pointer;
  padding: 0;
}

@media (max-width: 640px) {
  .wp-block-search.is-filtre-etudes .fe-filter {
    width: 100%;
    display: block;
    margin-right: 0;
  }
  .wp-block-search.is-filtre-etudes .fe-filter-panel {
    position: static;
    width: 100%;
    max-width: 100%;
    box-shadow: none;
    margin-top: .25rem;
  }
}

/* =======================================================================
   Correctifs mobile: garder la loupe sur la même ligne et aligner les filtres
   ======================================================================= */
@media (max-width: 640px) {
  /* Empêche le wrap du bouton, aligne verticalement */
  .wp-block-search.is-filtre-etudes .wp-block-search__inside-wrapper {
    flex-wrap: nowrap;
    align-items: center;
    width:100%!important;
  }

  /* L'input prend toute la largeur disponible sans forcer un minimum */
  .wp-block-search.is-filtre-etudes .wp-block-search__input {
    flex: 1 1 auto;
    min-width: 0; /* évite que l'input pousse le bouton à la ligne */
  }

  /* Le bouton garde son contenu sur une seule ligne */
  .wp-block-search.is-filtre-etudes .wp-block-search__button {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  /* Filtres et chips alignés sur toute la largeur, sans offset calculé */
  .wp-block-search.is-filtre-etudes .fe-filters,
  .wp-block-search.is-filtre-etudes .fe-active-filters {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}