/* Fibre Herd — hdr1 (jeton 20261010hdr1) : boutons plus fins, header mieux réparti.
   Apparence seulement : ni texte, ni lien, ni comportement, ni couleur de l'identité ne changent.
   Chargé en dernier dans <head> ; les sélecteurs commencent par « html body » pour passer devant
   les feuilles de page chargées plus loin (fh-stock.css, marketplace.css, animal-fiche-v2.css…).

   Trois tailles de bouton seulement :
     --hdr1-sm : 30 px de haut, 13,5 px, padding 0 12 px  (petites actions dans les listes / fiches)
     --hdr1-md : 36 px de haut, 15 px,   padding 0 16 px  (header, boutons courants, pastilles de filtre)
     --hdr1-lg : 44 px de haut, 16 px,   padding 0 22 px  (appel principal du héros)
   Partout : contour 1 px, graisse 500, forme pilule (comme les pastilles du header d'ident1),
   focus visible 2 px à 2 px d'écart (encre #2C3820 sur fond clair 11,2:1 à 12,4:1 ; blanc dans le header).

   Contrastes (WCAG 2.2) :
     blanc sur #5C7640 5,1:1 (AA) — Connexion, compte, Déconnexion, Menu, bouton principal public
     #5C7640 sur crème #F6F3EC 4,6:1 (AA) — Essayer
     blanc sur #6E8B4A 3,85:1 : réservé au menu (19 px gras = grand texte) et aux icônes (≥ 3:1). */

:root {
  --hdr1-ink: #2C3820;
  --hdr1-h-sm: 30px;
  --hdr1-h-md: 36px;
  --hdr1-h-lg: 44px;
}

/* ===================== 1. Header ===================== */
html body .fh-header.fh-idh { --hdr1-h: var(--hdr1-h-md); --hdr1-gap: 12px; --hdr1-colgap: 28px; }
html body .fh-idh .fh-idh-inner { column-gap: var(--hdr1-colgap); }

/* Même rythme entre langue, loupe, Connexion, Essayer : l'écart de colonne du header (28 / 16 px)
   est ramené à --hdr1-gap par une marge négative sur la loupe et sur le groupe de droite. */
html body .fh-idh .fh-search,
html body .fh-idh .fh-idh-actions { margin-left: calc(var(--hdr1-gap) - var(--hdr1-colgap)); margin-right: 0; }
html body .fh-idh .fh-idh-actions,
html body .fh-header.fh-idh .fh-header-account { gap: var(--hdr1-gap); }
html body .fh-idh .fh-idh-nav { gap: var(--hdr1-gap); }

/* Pastilles du header : même hauteur, contour 1 px, 15 px / 500 */
html body .fh-header.fh-idh .fh-header-account-link,
html body .fh-header.fh-idh .fh-header-account-link--primary,
html body .fh-header.fh-idh .fh-header-logout,
html body .fh-header.fh-idh .fh-nav-toggle,
html body .fh-idh a.fh-idh-try {
  align-items: center;
  justify-content: center;
  gap: 6px;
  box-sizing: border-box;
  height: var(--hdr1-h);
  min-height: 0;
  padding: 0 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: .005em;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
/* « display » n'est posé que là où l'élément est déjà affiché (Menu, Déconnexion et Essayer
   gardent leurs règles d'affichage d'ident1 / search2). */
html body .fh-header.fh-idh .fh-header-account-link { display: inline-flex; }
html body .fh-header.fh-idh.fh-header--in a.fh-idh-try { display: none; }
@media (min-width: 901px) { html body .fh-header.fh-idh .fh-header-logout { display: inline-flex; } }
@media (max-width: 900px) { html body .fh-header.fh-idh .fh-header-logout { display: none; } }
/* Connexion / compte / Déconnexion / Menu : olive texte #5C7640, contour blanc fin.
   Le blanc à 15 px demande 4,5:1 : sur #5C7640 il fait 5,1:1 (sur #6E8B4A seul, 3,85:1 ne suffirait pas). */
html body .fh-header.fh-idh .fh-header-account-link,
html body .fh-header.fh-idh .fh-header-account-link--primary,
html body .fh-header.fh-idh .fh-header-logout,
html body .fh-header.fh-idh .fh-nav-toggle {
  background: #5C7640;
  border-color: rgba(255, 255, 255, .78);
  color: #fff;
}
html body .fh-header.fh-idh .fh-header-logout { border-color: rgba(255, 255, 255, .45); }
html body .fh-header.fh-idh .fh-header-account-link:hover,
html body .fh-header.fh-idh .fh-header-account-link[aria-current="page"],
html body .fh-header.fh-idh .fh-header-logout:hover,
html body .fh-header.fh-idh .fh-nav-toggle:hover,
html body .fh-header.fh-idh .fh-nav-toggle[aria-expanded="true"] {
  background: #4F6637;
  border-color: #fff;
  color: #fff;
}
html body .fh-header.fh-idh .fh-header-account-link .fh-header-account-icon { width: 16px; height: 16px; flex: none; }
/* Essayer : pastille crème, texte olive (identité inchangée) */
html body .fh-idh a.fh-idh-try,
html body.fh-public .fh-header.fh-idh a.fh-idh-try {
  background: #F6F3EC;
  border-color: #F6F3EC;
  color: #5C7640;
  padding: 0 18px;
}
html body .fh-idh a.fh-idh-try:hover { background: #fff; border-color: #fff; color: #4F6637; }

/* Langue et loupe : même famille — fond translucide léger, contour fin */
html body .fh-header.fh-idh .fh-lang-btn,
html body .fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select,
html body .fh-header.fh-idh .fh-search-toggle {
  box-sizing: border-box;
  height: var(--hdr1-h);
  min-height: 0;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease;
}
html body .fh-header.fh-idh .fh-lang-btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 10px 0 11px; }
html body .fh-header.fh-idh .fh-lang-btn .fh-lang-caret { font-size: 9px; opacity: .75; }
html body .fh-header.fh-idh .fh-search-toggle { width: var(--hdr1-h); padding: 0; }
html body .fh-header.fh-idh .fh-lang-btn:hover,
html body .fh-header.fh-idh .fh-lang-wrap.is-open .fh-lang-btn,
html body .fh-header.fh-idh .fh-search-toggle:hover { background: rgba(255, 255, 255, .16); border-color: #fff; }
html body .fh-header.fh-idh .fh-search-toggle[aria-expanded="true"] { background: #fff; border-color: #fff; color: #4F6637; }
/* Loupe en trait fin */
html body .fh-header.fh-idh .fh-search-ico { width: 18px; height: 18px; }
html body .fh-header.fh-idh .fh-search-ico circle,
html body .fh-header.fh-idh .fh-search-ico path { stroke-width: 1.8; }

/* Focus visible (AA) : anneau blanc 2 px à 2 px sur le bandeau, encre sur la pastille crème */
html body .fh-header.fh-idh .fh-header-account-link:focus-visible,
html body .fh-header.fh-idh .fh-header-logout:focus-visible,
html body .fh-header.fh-idh .fh-nav-toggle:focus-visible,
html body .fh-header.fh-idh .fh-lang-btn:focus-visible,
html body .fh-header.fh-idh .fh-search-toggle:focus-visible,
html body .fh-idh a.fh-idh-try:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
html body .fh-idh a.fh-idh-try:focus-visible { background: #fff; border-color: #fff; color: #4F6637; box-shadow: 0 0 0 4px #2C3820; }

/* Menu : flèches plus discrètes, soulignement actif fin (1 px), centrage optique */
html body .fh-header.fh-idh .fh-nav-btn .fh-caret {
  display: inline-block;
  font-size: 8px;
  opacity: .62;
  margin-left: 5px;
  transform: translateY(-2px);
}
html body .fh-header.fh-idh .fh-nav-list > li > a,
html body .fh-header.fh-idh .fh-nav-list > li > button.fh-nav-btn { border-bottom-width: 1px; padding-bottom: 9px; }
/* Le menu se centre entre le nom et le groupe de droite (langue + loupe + boutons) : la langue,
   dernière entrée de la nav, est poussée à droite ; la liste reste centrée dans l'espace restant. */
html body .fh-idh .fh-idh-nav .fh-lang-wrap { margin-left: 0; }

/* Bureau intermédiaire (déconnecté 1 040–1 180 px ; connecté 1 160–1 339 px) : écart de colonne 16 px */
@media (max-width: 1180px) and (min-width: 901px) { html body .fh-header.fh-idh { --hdr1-colgap: 16px; } }
@media (min-width: 1160px) and (max-width: 1339.98px) { html body .fh-header.fh-idh.fh-header--in { --hdr1-colgap: 16px; } }
/* Header replié (Menu) : la rangée Menu · loupe · Connexion · Essayer est déjà au pas de 10 px */
@media (min-width: 901px) and (max-width: 1039.98px) { html body .fh-header.fh-idh { --hdr1-colgap: 10px; --hdr1-gap: 10px; } }
@media (min-width: 1040px) and (max-width: 1159.98px) { html body .fh-header.fh-idh.fh-header--in { --hdr1-colgap: 10px; --hdr1-gap: 10px; } }
@media (max-width: 900px) {
  html body .fh-header.fh-idh { --hdr1-colgap: 10px; --hdr1-gap: 8px; }
  html body .fh-idh .fh-idh-actions { margin-left: auto; }
  /* Dans le panneau crème du menu, la langue reprend un texte encre */
  html body .fh-header.fh-idh .fh-lang-btn,
  html body .fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select { color: #2C3820; background: #fff; border-color: #B8C2A8; }
}
@media (min-width: 901px) and (max-width: 1039.98px) {
  html body .fh-header.fh-idh .fh-lang-btn,
  html body .fh-header.fh-idh .fh-lang-wrap:not([data-fh-lang-ui="1"]) select { color: #2C3820; background: #fff; border-color: #B8C2A8; }
}
@media (min-width: 1040px) and (max-width: 1159.98px) {
  html body .fh-header.fh-idh.fh-header--in .fh-lang-btn { color: #2C3820; background: #fff; border-color: #B8C2A8; }
}
@media (max-width: 420px) {
  html body .fh-header.fh-idh { --hdr1-h: 32px; --hdr1-gap: 6px; }
  html body .fh-header.fh-idh .fh-header-account-link,
  html body .fh-header.fh-idh .fh-nav-toggle { padding: 0 12px; }
  html body .fh-idh a.fh-idh-try { padding: 0 13px; }
  html body .fh-idh .fh-search { margin-left: 0; margin-right: 0; }
}
@media (max-width: 380px) {
  html body .fh-header.fh-idh .fh-header-account-link,
  html body .fh-header.fh-idh .fh-nav-toggle,
  html body .fh-idh a.fh-idh-try { padding: 0 10px; }
}

/* ===================== 2. Boutons de toutes les pages ===================== */
/* Taille moyenne (36 px) : boutons courants, CMP, choix de type, pastilles de filtre */
html body .fh-btn,
html body .fh-cmp-btn,
html body .fh-mkt-toggle__type,
html body .fh-customer-type__btn,
html body .fh-visite-start,
html body .fa-btn,
html body .fh-main .fh-lire-home a.fh-lire-home-cta,
html body .fh-stk-filters a,
html body .fh-tasks-filters a,
html body .fh-msai-filters a,
html body .fh-mkt-tabs a,
html body .fh-elev-tabs a,
html body .fh-elev-tabs button {
  align-items: center;
  justify-content: center;
  gap: .4rem;
  box-sizing: border-box;
  min-height: var(--hdr1-h-md);
  padding: 0 16px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: .005em;
}
html body .fh-btn:not(.fh-btn-primary):not(.fh-btn-ghost):not(.fh-btn-alert):not(.fh-btn-stud-request) { border-color: currentColor; }
/* pastilles de filtre / onglets : même hauteur, padding plus serré */
html body .fh-stk-filters a,
html body .fh-tasks-filters a,
html body .fh-msai-filters a,
html body .fh-mkt-tabs a,
html body .fh-elev-tabs a,
html body .fh-elev-tabs button { padding: 0 14px; font-size: .875rem; }
html body .fh-stk-filters a .fh-stk-count,
html body .fh-msai-count,
html body .fh-elev-tab-count { font-weight: 500; }

/* Petite taille (30 px) : actions dans les listes, fiches et tableaux */
html body .fh-btn.fh-btn-sm,
html body .fh-mkt-btn,
html body .fh-lire-btn,
html body .fh-fy-leg,
html body .fh-visite-controls button,
html body .fa-btn.fa-btn-sm {
  align-items: center;
  justify-content: center;
  gap: .35rem;
  box-sizing: border-box;
  min-height: var(--hdr1-h-sm);
  min-width: 0;
  padding: 0 12px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-size: .84375rem;
  font-weight: 500;
  line-height: 1.2;
}
html body .fh-v2-secnav .fh-lire-btn.fh-lire-btn--nav { min-height: var(--hdr1-h-sm); height: var(--hdr1-h-sm); align-self: center; padding: 0 12px; font-size: .84375rem; }
/* « Marquer fait » (tâches) garde sa cible tactile : 44 px sur la page Tâches (= grande taille),
   36 px dans Aujourd'hui (= taille moyenne) ; seuls contour, graisse et rayon changent. */
html body .fh-task-check { border-width: 1px; border-radius: 999px; font-weight: 500; }
html body .fh-fy-leg { padding-left: 10px; }
/* bouton « × » (fh-btn-sm d'une seule glyphe) : carré rond, glyphe gardée lisible */
html body button.fh-btn.fh-btn-sm[aria-label]:not(:has(*)) { min-width: var(--hdr1-h-sm); padding: 0 8px; }

/* Grande taille (44 px) : appel principal du héros d'accueil */
html body.fh-public .fh-hero2 a.fh-hero2-cta {
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--hdr1-h-lg);
  padding: 0 22px;
  border-width: 1px;
  border-style: solid;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
}

/* Champs fichier : le bouton natif suit la petite taille */
html body input[type="file"]::file-selector-button {
  min-height: var(--hdr1-h-sm);
  margin-right: .6rem;
  padding: 0 12px;
  border: 1px solid #B8C2A8;
  border-radius: 999px;
  background: #F6F3EC;
  color: #2C3820;
  font: inherit;
  font-size: .84375rem;
  font-weight: 500;
  cursor: pointer;
}
html body input[type="file"]::file-selector-button:hover { border-color: #5C7640; background: #EEF2E6; }

/* Contrastes de texte : le bouton principal public voulait du blanc sur #5C7640 (fh-identite.css),
   mais « color: #1a2208 !important » de site.css l'emportait (3,2:1). Blanc : 5,1:1.
   Onglet actif des annonces : #484844 sur #6A9440 (2,6:1) → encre #1a2208 (4,6:1), comme les boutons verts. */
html body.fh-public .fh-btn-primary,
html body.fh-public a.fh-btn-primary { color: #fff !important; }
html body .fh-mkt-tabs a.is-active,
html body .fh-mkt-tabs a[aria-current="page"] { color: #1a2208; }

/* Focus visible (AA) sur fond clair : anneau encre 2 px, 2 px d'écart */
html body .fh-btn:focus-visible,
html body .fh-cmp-btn:focus-visible,
html body .fh-mkt-toggle__type:focus-visible,
html body .fh-customer-type__btn:focus-visible,
html body .fh-visite-start:focus-visible,
html body .fh-visite-controls button:focus-visible,
html body .fa-btn:focus-visible,
html body .fh-main .fh-lire-home a.fh-lire-home-cta:focus-visible,
html body .fh-stk-filters a:focus-visible,
html body .fh-tasks-filters a:focus-visible,
html body .fh-msai-filters a:focus-visible,
html body .fh-mkt-tabs a:focus-visible,
html body .fh-elev-tabs a:focus-visible,
html body .fh-elev-tabs button:focus-visible,
html body .fh-mkt-btn:focus-visible,
html body .fh-task-check:focus-visible,
html body .fh-lire-btn:focus-visible,
html body .fh-fy-leg:focus-visible,
html body.fh-public .fh-hero2 a.fh-hero2-cta:focus-visible,
html body input[type="file"]:focus-visible { outline: 2px solid var(--hdr1-ink); outline-offset: 2px; }

@media (forced-colors: active) {
  html body .fh-header.fh-idh .fh-lang-btn,
  html body .fh-header.fh-idh .fh-search-toggle,
  html body .fh-header.fh-idh .fh-header-account-link,
  html body .fh-idh a.fh-idh-try { border-color: ButtonText; }
}
@media (prefers-reduced-motion: reduce) {
  html body .fh-header.fh-idh .fh-header-account-link,
  html body .fh-header.fh-idh .fh-lang-btn,
  html body .fh-header.fh-idh .fh-search-toggle,
  html body .fh-idh a.fh-idh-try { transition: none; }
}

/* Ces deux liens étaient en inline-block : inline-flex pour centrer le texte dans la hauteur fixe */
html body .fh-main .fh-lire-home a.fh-lire-home-cta:not([hidden]),
html body .fa-btn:not([hidden]) { display: inline-flex; }