/*
 * Catalogue - console de filtres (décision d'Alexandre, 22/09/2026 : « plus sobre ») : ni cadre ni aplat bleu. Les
 * familles en onglets de texte (onglets.css, communs aux actualités et à la recherche), la famille choisie soulignée ; puis, sur une seule ligne alignée sur la
 * grille, la recherche en aplat clair, la surface et le domaine d'emploi en simples menus, le nombre de produits.
 * Collante sous l'en-tête à partir de 900 px, sur fond blanc, tenue par un filet.
 */
.fl{background:#fff;z-index:150;margin-top:clamp(28px,3.4vw,48px)}
@media (min-width:900px){.fl{position:sticky;top:81px}}
@media (min-width:900px) and (max-width:1140px){.fl{top:67px}}
.fl__box{border-bottom:1px solid var(--line)}

/* familles : les onglets communs (onglets.css), sur un filet plus clair que celui qui ferme la console */
.fl__f{border-bottom-color:var(--line-s)}

/* recherche, surface, domaine d'emploi, nombre : une ligne, sans cadre */
.fl__t{display:flex;align-items:center;gap:10px clamp(18px,2.4vw,32px);padding-block:12px}
.fl__qw{position:relative;display:block;flex:1 1 auto;min-width:0}
.fl__qw .ic{position:absolute;left:14px;top:50%;transform:translateY(-50%);color:var(--mute);pointer-events:none}
.fl__q{width:100%;height:42px;border:0;background:var(--wash);color:var(--navy);font-family:var(--tx);font-size:.95rem;
  padding:0 16px 0 40px;border-radius:0;transition:box-shadow .14s}
.fl__q::placeholder{color:var(--mute)}
.fl__q:focus{outline:0;box-shadow:inset 0 0 0 2px var(--blue)}
.fl__sel{flex:0 0 auto;height:42px;border:0;background-color:transparent;color:var(--navy);
  font-family:var(--ui);font-weight:600;font-size:.9rem;padding:0 22px 0 0;border-radius:0;
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--mute) 50%),linear-gradient(135deg,var(--mute) 50%,transparent 50%);
  background-position:calc(100% - 9px) 19px,calc(100% - 4px) 19px;background-size:5px 5px;background-repeat:no-repeat}
.fl__sel:hover{color:var(--blue)}
.fl__sel:focus-visible{outline:2px solid var(--sky);outline-offset:2px}
/* Domaine d'emploi : des noms plus longs que les tranches de surface, tenus par une largeur maximale */
#f-a{max-width:240px;text-overflow:ellipsis}
.fl__x{display:inline-flex;align-items:center;gap:8px;height:42px;padding:0;background:transparent;border:0;
  color:var(--blue);cursor:pointer;font-family:var(--ui);font-weight:600;font-size:.86rem;white-space:nowrap}
.fl__x:hover{color:var(--blue-d);text-decoration:underline}
.fl__n{display:flex;align-items:baseline;gap:5px;white-space:nowrap;font-size:.9rem;color:var(--mute);margin:0 0 0 auto}
.fl__n b{font-family:var(--ui);font-weight:600;font-size:.9rem;color:var(--navy);font-variant-numeric:tabular-nums}

/* Les ancres des familles s'arrêtent sous l'en-tête, et sous la console quand elle est collante.
   La section porte déjà sa marge haute : son bord passe un peu sous la console, son titre reste dégagé. */
html{scroll-padding-top:60px}
@media (min-width:900px){html:has(.fl:not([hidden])){scroll-padding-top:188px}}
@media (min-width:1141px){
  html{scroll-padding-top:74px}
  html:has(.fl:not([hidden])){scroll-padding-top:202px}
}

@media (max-width:1140px){#f-a{max-width:190px}}
@media (max-width:899px){
  .fl__t{flex-wrap:wrap}
  .fl__qw{flex:1 1 100%}
  .fl__n{margin-left:auto}
}
/* Petit écran : la recherche sur toute la largeur, les deux menus côte à côte, le nombre dessous */
@media (max-width:640px){
  .fl__t{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 18px}
  .fl__qw,.fl__n,.fl__x{grid-column:1/-1}
  .fl__sel,#f-a{width:100%;max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fl__n{margin:0}
}