/* ══════════════════════════════════════════════════════════════
   style-01 … style-07 — Styles du catalogue (catalogue.html), répartis en 7 fichiers (DECISIONS §59).
   L'ORDRE DE CHARGEMENT COMPTE (cascade CSS) : les 7 fichiers, dans l'ordre 01 → 07, à la place de
   l'ancien <link> unique vers style.css. Les 7 fichiers mis bout à bout reproduisent l'ancien style.css
   (seuls les en-têtes sont nouveaux). Variables, tokens et styles communs : shared.css.
   Règle : ne jamais écrire de couleurs hexadécimales directement ici — toujours un jeton de shared.css.
   Contenu de ce fichier (01) : Barre de recherche, recherche élargie, autocomplétion, panneau de filtres.
══════════════════════════════════════════════════════════════ */

.topbar-count {
  font-size: var(--fs-xs);
  color: var(--white-55);
  font-family: var(--font-mono);
  white-space: normal;
  line-height: 1.3;
  text-align: right;
  flex-shrink: 0;
}
/* Compact search inside topbar */
#topbar-search {
  position: absolute;
  /* Clamp between left elements and right elements */
  left: clamp(450px, 50%, calc(100vw - 220px));
  transform: translateX(-50%);
  width: min(480px, calc(100vw - 690px));
  min-width: 140px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}
#topbar-search.visible {
  opacity: 1;
  pointer-events: auto;
}
#topbar-search .search-wrap {
  width: 100%;
}
#topbar-search .search-input {
  padding: 0.4rem 2.5rem 0.4rem 0.9rem;
  font-size: var(--fs-md);
  height: 36px;
}
#topbar-search .search-btn {
  width: 26px;
  height: 26px;
  font-size: var(--fs-sm);
  right: 5px;
}
#topbar-search .search-clear {
  right: 36px;
}
#topbar-search #topbar-ghost {
  background: var(--white) !important;
  z-index: 0;
}
#topbar-search #topbar-input {
  position: relative;
  z-index: 1;
  background: transparent;
}

/* ── SEARCH ZONE ── */
.search-zone {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-light) 60%, var(--hero-end) 100%);
  padding: 3.5rem 2rem 3rem;
  text-align: center;
  border-bottom: none;
  position: relative;
  z-index: 100;
}
.search-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  max-width: 900px;
  margin: 0 auto;
}
.search-wrap {
  position: relative;
  flex: 1;
}

/* Sur petit écran (même seuil que le passage en colonne unique / disparition de
   la colonne de gauche, 720px), le bouton « Recherche avancée » passe SOUS la
   barre de recherche (pleine largeur) pour laisser toute la place à la saisie. */
@media (max-width: 720px) {
  .search-row { flex-wrap: wrap; }
  .search-row .search-wrap { flex: 1 1 100%; }
  .search-row .btn-adv { flex: 1 1 100%; justify-content: center; }
}
.search-input {
  width: 100%;
  padding: 0.65rem 3rem 0.65rem 1rem;
  border: 2px solid transparent;
  border-radius: 40px;
  font-family: var(--font-sans);
  font-size: var(--fs-lg);
  background: var(--white);
  color: var(--text);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.search-ghost {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  border-color: transparent !important;
  box-shadow: none !important;
  background: var(--white) !important;
  color: var(--text-3);
  z-index: 0;
}
/* Appareils sans survol (tactile) : pas de touche Tab pour accepter la
   suggestion grisée, et pointer-events:none la rend de toute façon
   non-tappable — la laisser visible pourrait laisser croire qu'un tap dessus
   fonctionne. La vraie liste déroulante (.autocomplete-item), elle, reste
   pleinement utilisable au tap et couvre déjà ce besoin.
   Le TEXTE seul est rendu invisible (color, pas display:none) : .search-ghost
   fournit aussi le fond blanc visible de la barre de recherche elle-même
   (#main-search est transparent et repose dessus, voir plus haut) —
   masquer tout l'élément faisait disparaître ce fond entièrement. */
@media (hover: none) {
  .search-ghost { color: transparent; }
}
#main-search { position: relative; z-index: 1; background: transparent; }
.search-input:focus {
  border-color: var(--lavender3);
  box-shadow: 0 0 0 3px var(--lavender3-35);
}
.search-btn {
  position: absolute;
  right: 6px; top: 50%;
  transform: translateY(-50%);
  background: var(--navy);
  border: none;
  border-radius: 50%;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: var(--white);
  font-size: var(--fs-md);
  transition: background 0.15s;
  z-index: 2;
}
.search-btn:hover { background: var(--navy-light); }
.search-clear {
  position: absolute;
  right: 44px; top: 50%;
  transform: translateY(-50%);
  background: none; border: none;
  color: var(--text-3);
  cursor: pointer;
  font-size: 1rem;
  padding: 4px;
  display: none;
  z-index: 2;
}
.search-clear.visible { display: block; }

.btn-adv {
  background: var(--white-15);
  border: 1px solid var(--white-22);
  color: var(--white);
  padding: 0.5rem 1rem;
  border-radius: 40px;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.btn-adv:hover, .btn-adv.active { background: var(--white-22); border-color: var(--white-55); }
.btn-adv.active { background: var(--white); color: var(--navy); }

/* ── TOGGLE « Recherche élargie » (sous la barre, sur le fond navy) ── */
.search-options {
  max-width: 900px;
  margin: 0.85rem auto 0;
  display: flex;
  justify-content: center;
}
.search-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
  color: var(--white-75);
  font-size: var(--fs-sm);
  font-weight: 500;
}
.search-toggle:hover { color: var(--white); }
.search-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.search-toggle-track {
  width: 34px;
  height: 18px;
  border-radius: var(--radius-pill);
  background: var(--white-22);
  border: 1px solid var(--white-30);
  position: relative;
  flex-shrink: 0;
  transition: background 0.18s, border-color 0.18s;
}
.search-toggle-thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--white);
  transition: transform 0.18s;
}
.search-toggle:hover .search-toggle-track { border-color: var(--white-55); }
.search-toggle input:checked + .search-toggle-track {
  background: var(--accent);
  border-color: var(--accent);
}
.search-toggle input:checked + .search-toggle-track .search-toggle-thumb {
  transform: translateX(16px);
}
.search-toggle input:focus-visible + .search-toggle-track {
  outline: 2.5px solid var(--white);
  outline-offset: 2px;
}

/* Active filters badges */
.active-filters-row {
  margin-top: 0.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}
.active-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  align-items: center;
}
.filter-badge { background: var(--white-15); border: 1px solid var(--white-30); color: var(--white); border-radius: var(--radius-pill); padding: 0.2rem 0.7rem; font-size: var(--fs-sm); display: flex; align-items: center; gap: 0.3rem; }
.filter-badge.fb-voix    { background: var(--c-voix-a25);  border-color: var(--c-voix-a50); }
.filter-badge.fb-accomp  { background: var(--c-voix-a25);  border-color: var(--c-voix-a50); }
.filter-badge.fb-etiq    { background: var(--c-etiq-a25);   border-color: var(--c-etiq-a50); }
.filter-badge.fb-dispo   { background: var(--c-dispo-a25);  border-color: var(--c-dispo-a50); }
.filter-badge.fb-themes  { background: var(--c-themes-a25);   border-color: var(--c-themes-a50); }
.filter-badge.fb-recueil { background: var(--c-recueil-a25);  border-color: var(--c-recueil-a50); }
.filter-badge.fb-langue  { background: var(--c-langue-a25);  border-color: var(--c-langue-a50); }
.filter-badge.fb-audio   { background: var(--c-audio-a25); border-color: var(--c-audio-a50); }
.filter-badge-rm {
  background: none; border: none; color: var(--white-65);
  cursor: pointer; font-size: var(--fs-md); padding: 0;
  line-height: 1;
}
.filter-badge-rm:hover { color: var(--white); }

/* ── AUTOCOMPLETE ── */
.autocomplete-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  z-index: 9100;
  max-height: 560px;
  overflow-y: auto;
  display: none;
}
.autocomplete-list.open { display: block; }
.autocomplete-section-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  padding: 0.6rem 0.9rem 0.3rem;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}
.autocomplete-item {
  padding: 0.55rem 0.9rem;
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  border-bottom: 1px solid var(--surface-soft);
  transition: background 0.1s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover, .autocomplete-item.focused { background: var(--lavender); }
.autocomplete-item-title {
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--text);
  flex-shrink: 0;
}
.autocomplete-item-title mark {
  background: var(--color-mark);
  color: var(--text);
  border-radius: 2px;
  padding: 0 1px;
}
.autocomplete-item-sub {
  font-size: var(--fs-sm);
  color: var(--text-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}
.autocomplete-badges { display: flex; gap: 0.3rem; flex-shrink: 0; }
.autocomplete-item-empty {
  padding: 0.45rem 0.9rem;
  font-size: var(--fs-base);
  color: var(--text-3);
  font-style: italic;
}

/* ── FILTERS PANEL — colonne de recherche avancée, repliable, sur la gauche
      des résultats (Proposition A retenue lors de la refonte). Repose sur
      la même mécanique largeur 0 → largeur fixe que .detail-col ci-dessous,
      pour rester cohérent avec le comportement déjà en place dans l'appli. ── */
.filters-panel {
  width: 0;
  flex-shrink: 0;
  overflow: visible;   /* pas hidden : l'inner (ci-dessous) doit pouvoir dépasser à gauche pendant l'animation, sans être découpé */
  transition: width 0.3s cubic-bezier(0.4,0,0.2,1), margin-left 0.3s cubic-bezier(0.4,0,0.2,1);
  margin-left: 0;
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  align-self: flex-start;
  z-index: 50;
}
.filters-panel.open {
  width: 300px;
  /* Comble le vide laissé par .filters-rail à son emplacement d'origine
     (28px) : translateX (voir .filters-rail.panel-open) déplace son rendu
     visuel, mais ne libère pas la place qu'elle réservait dans la mise en
     page — sans ce correctif, un espace vide de 28px restait visible avant
     le volet (signalé par Joseph). margin-left négatif plutôt que toucher à
     la largeur : décale tout le volet (et ce qui suit) de 28px vers la
     gauche, synchronisé avec sa propre transition de largeur. */
  margin-left: -28px;
}
/* Contenu réel du volet — largeur fixe (300px) dès le départ, jamais redimensionnée :
   le texte ne se reformate donc jamais pendant l'animation, seule sa position glisse
   (transform), en même temps que .filters-panel (outer) anime sa largeur pour réserver
   la place dans la mise en page. Les deux partagent la même durée/accélération, restent
   visuellement synchronisés. */
.filters-panel-inner {
  width: 300px;
  height: 100%;
  background: var(--white);
  border-right: 2px solid var(--border);
  display: flex;
  flex-direction: column;
  overflow: hidden;   /* clip propre à l'inner : son PROPRE contenu (filters-grid) ne doit pas déborder horizontalement */
  transform: translateX(-300px);
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1);
}
.filters-panel.open .filters-panel-inner {
  transform: translateX(0);
}
/* Variante B (languette marine + ombre) — desktop uniquement : le volet reste une colonne
   pleine hauteur collée en haut, à gauche et en bas (aucune marge, aucun angle arrondi),
   sans filet : seule une ombre douce le détache des résultats. L'ombre n'existe qu'ouvert
   (transition synchronisée). Replié, le volet est à x=28 (après la colonne de la
   languette) : avec l'ancien -300px son bord droit tombait à 28px, visible sous la
   languette (qui ne couvre plus toute la hauteur) ; -360px le repousse entièrement hors
   champ, ombre comprise. Largeur (300px) inchangée : la languette (.filters-rail,
   translateX(300px)) touche donc le bord droit du volet. */
@media (min-width: 721px) {
  .filters-panel-inner {
    border-right: none;
    box-shadow: 0 0 0 var(--navy-0);
    transform: translateX(-360px);
    transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1);
  }
  .filters-panel.open .filters-panel-inner {
    box-shadow: 0 4px 14px var(--navy-16);
  }
}
@media (prefers-reduced-motion: reduce) {
  .filters-panel, .filters-panel-inner { transition: none; }
}
/* Bande latérale : permet de rouvrir la recherche avancée même après avoir
   défilé la page (la barre de recherche en haut n'est pas sticky), ET reste
   visible une fois le volet ouvert (Joseph) — sert alors aussi à le refermer
   (toggleFilters(), inchangé). Repositionnement par transform, pas order
   (voir .filters-rail.panel-open plus bas) : order n'étant pas animable, la
   bande sautait instantanément à sa position finale au lieu de suivre le
   mouvement du volet. */
.filters-rail {
  display: flex;
  width: 28px;
  flex-shrink: 0;
  background: var(--navy);
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.6rem;
  /* Variante B : languette marine à hauteur de son contenu (et non plus une bande
     pleine hauteur), arrondie côté droit, décalée de 24px sous le haut de la zone de
     résultats, avec la même ombre que le volet (.filters-panel.open ci-dessus).
     La largeur réservée (28px) est inchangée : mêmes compensations qu'avant. */
  align-self: flex-start;
  margin-top: 24px;
  padding: 0.9rem 0 1rem;
  border-radius: 0 8px 8px 0;
  box-shadow: 0 4px 14px var(--navy-16);
  cursor: pointer;
  position: sticky;
  top: 84px;   /* 60px (topbar) + 24px (margin-top) */
  transition: background 0.15s, transform 0.3s cubic-bezier(0.4,0,0.2,1);
  transform: translateX(0);
  z-index: 51;   /* > .filters-panel (50) : sans ça, filters-panel-inner (qui déborde visuellement sur la bande quand le volet est replié) passe par-dessus et la masque */
}
.filters-rail:hover { background: var(--navy-light); }
.filters-rail:focus-visible { outline: 2px solid var(--lavender3); outline-offset: 2px; }
/* translateX plutôt que order (non animable — la bande sautait instantanément
   à sa position finale au lieu de suivre le mouvement du volet, dans les deux
   sens, signalé par Joseph). 300px = largeur ouverte de .filters-panel, même
   durée/accélération que sa propre transition de largeur : les deux restent
   visuellement synchronisés tout du long. */
.filters-rail.panel-open { transform: translateX(300px); }
@media (prefers-reduced-motion: reduce) {
  .filters-rail { transition: background 0.15s; }
}
.filters-rail-chevron {
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  color: var(--white);
}
.filters-rail-label {
  writing-mode: vertical-rl;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--white);
  text-transform: uppercase;
  white-space: nowrap;
}
.filters-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  min-width: 0;
  /* Seule zone défilante de la colonne ; l'en-tête figé reste au-dessus */
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.3rem 9rem;
}
.filter-group { display: flex; flex-direction: column; gap: 0.4rem; min-width: 0; }
/* Sous-grille "Voix" / "Nombre de voix" en tête de la boîte Voix & formation —
   une seule colonne : la boîte vit désormais dans une colonne étroite (300px). */
.voix-top-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.6rem;
  margin-bottom: 0.75rem;
  min-width: 0;
}
/* Accompagnement : pleine largeur quand l'espace est insuffisant pour 3 colonnes */
@media (max-width: 660px) {
  .accomp-group { grid-column: 1 / -1; }
}
/* Triangle dropdown orchestre en violet */
#df-orchestre .df-arrow { color: var(--c-voix); }

/* ── Groupe Langue — couleurs sémantiques teal ── */
.filter-group.grp-langue > .filter-label { color: var(--c-langue); }
.filter-group.grp-langue .dropdown-filter-trigger { border-color: var(--c-langue-border); }
.filter-group.grp-langue .dropdown-filter-trigger:hover,
.filter-group.grp-langue .dropdown-filter-trigger.open { border-color: var(--c-langue); }
.filter-group.grp-langue .dropdown-filter-trigger .df-label { color: var(--c-langue); }
.filter-group.grp-langue .dropdown-filter-trigger .df-arrow { color: var(--c-langue); }
#df-langue-list     .dropdown-filter-item input[type=checkbox] { accent-color: var(--c-langue); }
#df-provenance-list .dropdown-filter-item input[type=checkbox] { accent-color: var(--c-langue); }

/* ── Groupe Audio (album / interprète) — couleurs sémantiques berry ── */
.filter-group.grp-audio > .filter-label { color: var(--c-audio); }
.filter-group.grp-audio .dropdown-filter-trigger { border-color: var(--c-audio-border); }
.filter-group.grp-audio .dropdown-filter-trigger:hover,
.filter-group.grp-audio .dropdown-filter-trigger.open { border-color: var(--c-audio); }
.filter-group.grp-audio .dropdown-filter-trigger .df-label { color: var(--c-audio); }
.filter-group.grp-audio .dropdown-filter-trigger .df-arrow { color: var(--c-audio); }
#df-album-list      .dropdown-filter-item input[type=checkbox] { accent-color: var(--c-audio); }
#df-interprete-list .dropdown-filter-item input[type=checkbox] { accent-color: var(--c-audio); }

/* ── Groupe Accompagnement — df-label et df-arrow en violet ── */
.filter-group.grp-voix #df-orchestre .dropdown-filter-trigger .df-label { color: var(--c-voix); }
#df-orchestre-list .dropdown-filter-item input[type=checkbox] { accent-color: var(--c-voix); }
.filter-label {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-3);
}
.filter-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.3rem;
}
.filter-label-row .filter-label { margin-bottom: 0; }
.filter-input {
  padding: 0.45rem 0.7rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--fs-md);
  outline: none;
  color: var(--text);
  transition: border-color 0.2s;
  background: var(--white);
}
.filter-input:focus { border-color: var(--lavender3); }
.chips-row { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.chip {
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--text-2);
  transition: all 0.15s;
  white-space: nowrap;
  font-family: var(--font-sans);
}
.chip:hover { border-color: var(--chip-sel-bg, var(--navy)); color: var(--chip-sel-bg, var(--navy)); }
.chip.selected { background: var(--chip-sel-bg, var(--navy)); border-color: var(--chip-sel-border, var(--navy)); color: var(--white); }
.toggle-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
.toggle-btn {
  flex: 1;
  padding: 0.35rem;
  border-radius: var(--radius-pill);
  border: 1.5px solid var(--border);
  background: var(--white);
  font-size: var(--fs-sm);
  cursor: pointer;
  color: var(--text-2);
  text-align: center;
  transition: all 0.15s;
  font-family: var(--font-sans);
}
.toggle-btn:hover { border-color: var(--navy); color: var(--navy); }
.toggle-btn.selected { background: var(--navy); border-color: var(--navy); color: var(--white); }
.filter-check-row { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; }
.filter-check {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  font-size: var(--fs-base);
  color: var(--text-2);
}
.filter-check input[type=checkbox] { accent-color: var(--navy); }
.filters-footer {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 0.75rem;
  align-items: center;
}
.filters-footer:empty { display: none; }
.filters-close-btn {
  position: absolute;
  top: 0.75rem;
  right: 1rem;
  background: var(--navy-pale);
  border: 1.5px solid var(--lavender3);
  color: var(--text-2);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  font-size: 1.3rem;
  line-height: 1;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
  z-index: 10;
}
.filters-close-btn:hover { color: var(--white); border-color: var(--navy); background: var(--navy); }
/* En-tête de la colonne de recherche avancée dépliée — figé en haut (ne défile pas) */
.filters-panel-header {
  flex-shrink: 0;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 1.3rem 2.4rem 0.6rem 1.3rem;
  background: var(--white);
  border-bottom: 2px solid var(--border);
  /* position+z-index : sans ça, le contenu étiré de .filters-grid (effet
     d'extension au survol du haut, transform appliqué en JS) crée son propre
     contexte d'empilement et — étant après l'en-tête dans le DOM — passe
     PAR-DESSUS lui au lieu de rester dessous. */
  position: relative;
  z-index: 2;
}
@media (min-width: 721px) {
  .filters-panel-header,
  .filters-close-btn { display: none; }
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  border: none;
  padding: 0.5rem 1.25rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-primary:hover { background: var(--navy-light); }
.btn-primary:disabled { background: var(--text-3); cursor: not-allowed; opacity: 0.55; }
.btn-ghost {
  background: none;
  color: var(--text-2);
  border: 1.5px solid var(--border);
  padding: 0.45rem 1rem;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }

.btn-reset-filters {
  background: none;
  border: 1px solid var(--white-40);
  color: var(--white-65);
  border-radius: var(--radius-pill);
  padding: 0.2rem 0.7rem;
  font-size: var(--fs-sm);
  font-family: var(--font-sans);
  font-weight: 400;
  font-style: italic;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.01em;
}
.btn-reset-filters:hover { color: var(--white); border-color: var(--white-75); }