/* Fibre Herd — recherche du header (search1, jeton 20261010search2).
   Seule la loupe s'ajoute au header ; le panneau s'ouvre sous le header.
   Couleurs de la nouvelle identité : olive #6E8B4A, olive texte #5C7640, encre #2C3820, crème #F6F3EC.
   Contrastes : encre sur blanc 12,6:1 ; #4B5640 sur blanc 7,4:1 ; #4F6637 sur #EEF2E6 5,6:1 ;
   blanc sur #6E8B4A 3,85:1 pour une icône (≥ 3:1 exigé pour un composant graphique). */
.fh-search[hidden], .fh-search-panel[hidden], .fh-search-empty[hidden] { display: none !important; }
.fh-idh .fh-search { display: flex; align-items: center; flex: none; }
.fh-header.fh-idh .fh-search-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0; margin: 0;
  background: transparent; color: #fff;
  border: 2px solid #fff; border-radius: 999px;
  cursor: pointer; line-height: 1;
}
.fh-header.fh-idh .fh-search-toggle:hover { background: rgba(255, 255, 255, .14); }
.fh-header.fh-idh .fh-search-toggle:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.fh-header.fh-idh .fh-search-toggle[aria-expanded="true"] { background: #fff; color: #4F6637; }
.fh-search-ico { display: block; }

.fh-idh .fh-search-panel {
  position: absolute; z-index: 80;
  top: calc(100% + 6px); right: 24px;
  width: min(600px, calc(100vw - 32px));
  box-sizing: border-box;
  background: #fff; color: #2C3820;
  border: 1px solid #D8DECF; border-radius: 16px;
  box-shadow: 0 14px 40px rgba(28, 36, 16, .22);
  padding: 14px 16px 10px;
  text-align: left;
  font-size: 16px; line-height: 1.4;
}
.fh-search-label { display: block; font-size: 15px; font-weight: 700; color: #2C3820; margin: 0 0 6px; }
.fh-search-row { display: flex; align-items: center; gap: 8px; }
.fh-idh .fh-search-input {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: 18px; color: #2C3820;
  background: #fff;
  border: 2px solid #5C7640; border-radius: 999px;
  padding: 9px 16px; margin: 0;
  -webkit-appearance: none; appearance: none;
}
.fh-idh .fh-search-input::placeholder { color: #66705C; opacity: 1; } /* 4,9:1 sur blanc */
.fh-idh .fh-search-input:focus { outline: 2px solid #2C3820; outline-offset: 2px; }
.fh-idh .fh-search-input::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.fh-idh .fh-search-close {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  background: #F6F3EC; color: #2C3820;
  border: 2px solid #D8DECF; border-radius: 999px; cursor: pointer;
}
.fh-idh .fh-search-close:hover { background: #EEF2E6; }
.fh-idh .fh-search-close:focus-visible { outline: 2px solid #2C3820; outline-offset: 2px; }

.fh-search-list {
  list-style: none; margin: 10px 0 0; padding: 0;
  max-height: min(60vh, 520px); overflow-y: auto;
}
.fh-search-list:empty { margin: 0; }
.fh-search-list > li { margin: 0; padding: 0; }
.fh-idh .fh-search-list a.fh-search-opt {
  display: block; text-decoration: none; color: #2C3820;
  padding: 9px 12px; border-radius: 10px;
  border-left: 4px solid transparent;
}
.fh-idh .fh-search-list a.fh-search-opt:hover,
.fh-idh .fh-search-list li[aria-selected="true"] > a.fh-search-opt {
  background: #EEF2E6; border-left-color: #5C7640;
}
.fh-search-where { display: block; font-size: 13px; font-weight: 700; color: #4F6637; letter-spacing: .01em; }
.fh-search-title { display: block; font-size: 17px; font-weight: 700; color: #2C3820; }
.fh-search-snip { display: block; font-size: 15px; color: #4B5640; margin-top: 2px; }
.fh-search-badge {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-size: 12px; font-weight: 700; color: #4F6637;
  background: #EEF2E6; border: 1px solid #C9D3B8; border-radius: 999px; padding: 1px 8px;
}
.fh-search-list li[aria-selected="true"] .fh-search-badge { background: #fff; }
.fh-search-list mark { background: #F1E2A0; color: #2C3820; border-radius: 3px; padding: 0 1px; }

.fh-search-empty { margin: 10px 0 0; padding: 10px 12px; background: #F6F3EC; border-radius: 10px; }
.fh-search-empty-title { margin: 0 0 4px; font-weight: 700; font-size: 17px; color: #2C3820; }
.fh-search-empty-help { margin: 0; font-size: 15px; color: #2C3820; }
.fh-idh .fh-search-empty-help a { color: #4F6637; font-weight: 700; text-decoration: underline; }
.fh-idh .fh-search-empty-help a:focus-visible { outline: 2px solid #2C3820; outline-offset: 2px; }
.fh-search-status { margin: 6px 2px 0; font-size: 13px; color: #4B5640; min-height: 1em; }
.fh-search-hint { margin: 2px 2px 0; font-size: 13px; color: #4B5640; }

@media (prefers-reduced-motion: no-preference) {
  .fh-idh .fh-search-panel { animation: fh-search-in .14s ease-out; }
  @keyframes fh-search-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
}

/* Bureau intermédiaire (1 040 – 1 180 px) : même retrait que le header.
   La loupe (32 px, 4 px d'écart) est compensée sur les 4 entrées du menu : espace de chaque côté
   réglé par --fh-s2-navpad (voir LISEZMOI search2 : 8 px seulement là où ça tient dans les 5 langues). */
@media (max-width: 1180px) and (min-width: 1040px) {
  .fh-idh .fh-search-panel { right: 16px; }
  .fh-header.fh-idh .fh-search-toggle { width: 32px; height: 32px; }
  .fh-search-ico { width: 17px; height: 17px; }
  .fh-idh .fh-search { margin-left: -12px; margin-right: -8px; }
  .fh-header.fh-idh .fh-nav-list > li > a,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn { padding-left: var(--fh-s2-navpad, 3px); padding-right: var(--fh-s2-navpad, 3px); }
}
@media (max-width: 1180px) and (min-width: 1070px) {
  .fh-idh { --fh-s2-navpad: 8px; } /* 8 px dès 1 070 px ; 1 040–1 069 px : 3 px (de : la langue toucherait la loupe) */
}

/* search2 — Header replié (bouton Menu) entre 901 et 1 039 px : sous 1 040 px, le menu ne tient plus
   sur une ligne dans toutes les langues (chevauchements constatés avant search1). Même menu que sur
   smartphone (tiroir crème sous le header), mais le logo reste à gauche sur la même ligne :
   logo · Menu · loupe · Connexion · Essayer. Le smartphone (≤ 900 px) ne change pas. */
@media (min-width: 901px) and (max-width: 1039.98px) {
  .fh-idh .fh-idh-inner { flex-wrap: wrap; gap: 8px 10px; }
  .fh-idh a.brand { order: 0; margin-right: auto; }
  .fh-header.fh-idh .fh-nav-toggle { display: inline-flex; align-items: center; order: 1; }
  .fh-idh .fh-search { order: 1; }
  .fh-idh .fh-idh-actions { order: 2; gap: 8px; }
  .fh-idh .fh-idh-nav {
    order: 3;
    flex: 0 0 calc(100% + 32px);
    margin: 0 -16px -8px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #F6F3EC;
    padding: 6px 16px 12px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .fh-idh .fh-idh-inner.nav-open .fh-idh-nav { display: flex; }
  .fh-idh .fh-idh-nav .fh-nav-list { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .fh-header.fh-idh .fh-nav-list > li > a,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn {
    color: #2C3820;
    width: 100%;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid #E2E6DC;
  }
  body.fh-public .fh-header.fh-idh .fh-nav-list > li > a { color: #2C3820; }
  .fh-header.fh-idh .fh-nav-list > li > a:hover,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:hover,
  .fh-header.fh-idh .fh-nav-list > li > a:focus-visible,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:focus-visible { color: #2C3820; border-bottom-color: #E2E6DC; }
  .fh-header.fh-idh .fh-nav-list > li > a:focus-visible,
  .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn:focus-visible { outline-color: #2C3820; }
  .fh-header.fh-idh .fh-nav-list > li > a[aria-current="page"],
  .fh-header.fh-idh .fh-nav-list > li.is-active > button.fh-nav-btn,
  .fh-header.fh-idh .fh-nav-list > li.is-active > a { color: #2C3820; border-bottom: 2px solid #5C7640; }
  .fh-header.fh-idh .fh-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-radius: 0; display: none;
    background: transparent; padding: 0 0 6px 12px;
  }
  .fh-header.fh-idh .fh-has-sub:hover > .fh-dropdown,
  .fh-header.fh-idh .fh-has-sub:focus-within > .fh-dropdown { display: none; }
  .fh-header.fh-idh .fh-has-sub.open > .fh-dropdown,
  .fh-header.fh-idh .fh-has-sub.open:hover > .fh-dropdown { display: block; }
  .fh-header.fh-idh .fh-dropdown a { font-size: 16px; }
  .fh-header.fh-idh .fh-lang-wrap { padding: 10px 0 0; width: 100%; color: #2C3820; }
  .fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select { max-width: none; width: 100%; }
  .fh-header.fh-idh .fh-lang-picker { width: 100%; }
  .fh-header.fh-idh .fh-lang-btn { width: 100%; max-width: none; justify-content: flex-start; }
  .fh-header.fh-idh .fh-lang-btn,
  .fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select { color: #2C3820; border-color: #B8C2A8; font-size: 16px; }
  .fh-header.fh-idh .fh-lang-caret { color: #2C3820; }
  .fh-header.fh-idh .fh-lang-label { display: inline; }
  .fh-header.fh-idh .fh-lang-menu { left: 0; right: 0; min-width: 0; width: 100%; }
  .fh-header.fh-idh .fh-search-toggle { width: 36px; height: 36px; }
  .fh-idh .fh-search-panel { right: 16px; }
}

/* Smartphone / tablette : l'icône se place à côté de « Menu » ; Connexion et Essayer restent visibles */
@media (max-width: 900px) {
  .fh-idh .fh-search { order: 1; }
  .fh-header.fh-idh .fh-search-toggle { width: 36px; height: 36px; } /* hauteur des pastilles Menu / Connexion : la ligne ne grandit pas */
  .fh-idh .fh-search-panel {
    position: absolute; top: 100%; left: 0; right: 0; width: auto;
    border-radius: 0 0 16px 16px; border-left: 0; border-right: 0;
    max-height: calc(100vh - 140px); overflow-y: auto;
    padding: 12px 14px 10px;
  }
  .fh-search-list { max-height: none; }
  .fh-search-hint { display: none; }
}
/* Téléphones : la loupe se loge entre « Menu » et Connexion / Essayer sans faire passer
   ces boutons à la ligne (390 px et 375 px tiennent sur une ligne ; en dessous de 375 px,
   Connexion / Essayer passent sur une ligne de plus — voir LISEZMOI). Cible tactile 30 px (≥ 24 px, WCAG 2.5.8). */
@media (max-width: 420px) {
  .fh-header.fh-idh .fh-search-toggle { width: 30px; height: 30px; border-width: 2px; }
  .fh-search-ico { width: 16px; height: 16px; }
  .fh-idh .fh-search { margin-left: -4px; margin-right: -4px; }
}
.fh-idh.fh-header--in { --fh-s2-navpad: 3px; }
/* search2 — Éleveur connecté : le header a deux éléments de plus (« Aujourd’hui » et « Déconnexion »).
   Sans chevauchement dans les 5 langues, il lui faut : menu replié sous 1 160 px, réglage compact
   (loupe 32 px, 3 px autour des entrées ; de 1 181 à 1 339 px, retrait de 16 px comme sous 1 180 px)
   de 1 160 à 1 339 px ; au-dessus, header normal.
   Mesuré par tests/search.test.cjs (360 → 1 440 px, tous les 10 px, 5 langues, connecté et déconnecté). */
@media (min-width: 1040px) and (max-width: 1159.98px) {
  .fh-idh.fh-header--in .fh-idh-inner { flex-wrap: wrap; gap: 8px 10px; }
  .fh-idh.fh-header--in a.brand { order: 0; margin-right: auto; }
  .fh-header.fh-idh.fh-header--in .fh-nav-toggle { display: inline-flex; align-items: center; order: 1; }
  .fh-idh.fh-header--in .fh-search { order: 1; }
  .fh-idh.fh-header--in .fh-idh-actions { order: 2; gap: 8px; }
  .fh-idh.fh-header--in .fh-idh-nav {
    order: 3;
    flex: 0 0 calc(100% + 32px);
    margin: 0 -16px -8px;
    display: none;
    flex-direction: column;
    align-items: stretch;
    background: #F6F3EC;
    padding: 6px 16px 12px;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
  }
  .fh-idh.fh-header--in .fh-idh-inner.nav-open .fh-idh-nav { display: flex; }
  .fh-idh.fh-header--in .fh-idh-nav .fh-nav-list { flex-direction: column; align-items: stretch; margin: 0; gap: 0; }
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > a,
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > button.fh-nav-btn {
    color: #2C3820;
    width: 100%;
    justify-content: space-between;
    padding: 10px 4px;
    border-bottom: 1px solid #E2E6DC;
  }
  body.fh-public .fh-header.fh-idh.fh-header--in .fh-nav-list > li > a { color: #2C3820; }
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > a:hover,
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > button.fh-nav-btn:hover,
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > a:focus-visible,
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > button.fh-nav-btn:focus-visible { color: #2C3820; border-bottom-color: #E2E6DC; }
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > a:focus-visible,
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > button.fh-nav-btn:focus-visible { outline-color: #2C3820; }
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > a[aria-current="page"],
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li.is-active > button.fh-nav-btn,
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li.is-active > a { color: #2C3820; border-bottom: 2px solid #5C7640; }
  .fh-header.fh-idh.fh-header--in .fh-dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-radius: 0; display: none;
    background: transparent; padding: 0 0 6px 12px;
  }
  .fh-header.fh-idh.fh-header--in .fh-has-sub:hover > .fh-dropdown,
  .fh-header.fh-idh.fh-header--in .fh-has-sub:focus-within > .fh-dropdown { display: none; }
  .fh-header.fh-idh.fh-header--in .fh-has-sub.open > .fh-dropdown,
  .fh-header.fh-idh.fh-header--in .fh-has-sub.open:hover > .fh-dropdown { display: block; }
  .fh-header.fh-idh.fh-header--in .fh-dropdown a { font-size: 16px; }
  .fh-header.fh-idh.fh-header--in .fh-lang-wrap { padding: 10px 0 0; width: 100%; color: #2C3820; }
  .fh-header.fh-idh.fh-header--in .fh-lang-wrap:not([data-fh-lang-ui="1"]) select { max-width: none; width: 100%; }
  .fh-header.fh-idh.fh-header--in .fh-lang-picker { width: 100%; }
  .fh-header.fh-idh.fh-header--in .fh-lang-btn { width: 100%; max-width: none; justify-content: flex-start; }
  .fh-header.fh-idh.fh-header--in .fh-lang-btn,
  .fh-header.fh-idh.fh-header--in .fh-lang-wrap:not([data-fh-lang-ui="1"]) select { color: #2C3820; border-color: #B8C2A8; font-size: 16px; }
  .fh-header.fh-idh.fh-header--in .fh-lang-caret { color: #2C3820; }
  .fh-header.fh-idh.fh-header--in .fh-lang-label { display: inline; }
  .fh-header.fh-idh.fh-header--in .fh-lang-menu { left: 0; right: 0; min-width: 0; width: 100%; }
  .fh-header.fh-idh.fh-header--in .fh-search-toggle { width: 36px; height: 36px; }
  .fh-idh.fh-header--in .fh-search-panel { right: 16px; }
  .fh-idh.fh-header--in .fh-search { margin: 0; }
  .fh-header.fh-idh.fh-header--in .fh-search-ico { width: 20px; height: 20px; }
}
@media (min-width: 1181px) and (max-width: 1339.98px) {
  .fh-idh.fh-header--in .fh-idh-inner { gap: 8px 16px; padding: 8px 16px; } /* retrait du bureau intermédiaire */
  .fh-idh.fh-header--in .fh-search-panel { right: 16px; }
  .fh-header.fh-idh.fh-header--in .fh-search-toggle { width: 32px; height: 32px; }
  .fh-search-ico { width: 17px; height: 17px; }
  .fh-idh.fh-header--in .fh-search { margin-left: -12px; margin-right: -8px; }
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > a,
  .fh-header.fh-idh.fh-header--in .fh-nav-list > li > button.fh-nav-btn { padding-left: var(--fh-s2-navpad, 3px); padding-right: var(--fh-s2-navpad, 3px); }
}

/* search2 — Sous 375 px, la loupe ne tient pas sur la ligne de Menu : elle passe à droite de la
   ligne du logo (même hauteur que le logo), Connexion et Essayer restent sur la ligne de Menu.
   Barre compacte au défilement (ligne du logo repliée) : la loupe reprend sa place après Menu.
   Sous 325 px, le nom touche la loupe : comportement search1 (Connexion / Essayer y passaient déjà à la ligne). */
@media (min-width: 325px) and (max-width: 374.98px) {
  /* seul le bouton sort du flux : le panneau reste ancré sous tout le header */
  .fh-header.fh-idh:not(.is-scrolled) .fh-search { margin: 0 -10px 0 0; } /* annule l'écart de la case vide */
  .fh-header.fh-idh:not(.is-scrolled) .fh-search-toggle {
    position: absolute; top: 29px; right: 14px; /* centré sur la ligne du logo (8 → 80 px) */
  }
}

@media (forced-colors: active) {
  .fh-header.fh-idh .fh-search-toggle, .fh-idh .fh-search-input { border-color: CanvasText; }
  .fh-search-list li[aria-selected="true"] > a.fh-search-opt { outline: 2px solid Highlight; }
}