/* =============================================================================
   blocs/catalogue.css — LE CATALOGUE (bloc `catalogue`, page Nos offres) : l'interrupteur
   « prochains départs » du bandeau, les onglets de type, la barre de filtres (destination,
   animal, départ, accompagnateur, niveau, budget), le compteur et la bascule grille / liste.
   =============================================================================
   Extrait de la maquette par CLASSE (`.of-*`), sur `style.css` ET `mobile.css` — les règles
   d'un même composant n'y sont pas contiguës. La provenance est notée au-dessus de chacune.
   ⚠️ CE QUI N'EST PAS ICI : la grille de cartes (`blocs/of-grid.css`, partagée avec la page
   Sur-mesure) et le panneau mobile (`blocs/offcanvas.css`, partagé avec la fiche espèce).
   ⚠️ `#ofFiltres` devient `.of-filtres__inner` : notre convention ne style aucun `id`.
   ⚠️ Sous 1024 px, la barre est MASQUÉE à sa place (`mobile.css:1398`) : ses éléments sont
   déplacés dans le panneau coulissant par `js/blocs/offcanvas.js`.
   ============================================================================= */

/* style.css l. 1825 */
.vf-hero--page .vf-hero__inner:has(.of-toggle){ display:flex; flex-direction:column; align-items:center;
  min-height:calc(52vh - 80px); }
/* style.css l. 1946 */
.site-content .of-filtres{ padding-top:0; padding-bottom:0; }
/* style.css l. 1947 */
.site-content .of-listing{ padding-top:16px; padding-bottom:clamp(48px,6vw,90px); }   /* espace avant la section suivante : demande cliente 2026-11-12 n° 7 (maquette : 0) */
/* style.css l. 1948 */
.of-filtres{ position:sticky; top:var(--header-h, 112px); z-index:300;
  background:var(--noir); border-bottom:3px solid var(--jaune); }
/* style.css l. 1952 */
.of-filtres > .container{ max-width:none; padding-inline:clamp(20px,3vw,44px); }
/* style.css l. 1953 */
.of-filtres__inner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:center; gap:10px;
  padding-top:12px; padding-bottom:12px; }
/* style.css l. 1958 */
.vf-hero--page .of-toggle{ margin-top:auto; }
/* style.css l. 1959 */
.of-toggle{ display:inline-flex; align-items:center; gap:12px; margin-top:56px; cursor:pointer;
  background:var(--blanc); color:var(--noir); border:2px solid var(--blanc); border-radius:999px;
  padding:16px 27px; font-weight:700; user-select:none; box-shadow:0 10px 30px -10px rgba(0,0,0,.4);
  transition:background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
/* style.css l. 1963 */
.of-toggle:hover{ background:var(--jaune); border-color:var(--jaune); }
/* style.css l. 1964 */
.of-toggle__input{ position:absolute; opacity:0; width:0; height:0; }
/* style.css l. 1966 */
.of-toggle__track{ position:relative; flex:0 0 auto; width:44px; height:24px; border-radius:999px;
  background:rgba(14,14,14,.14); border:1.5px solid rgba(14,14,14,.3);
  transition:background .25s var(--ease), border-color .25s var(--ease); }
/* style.css l. 1969 */
.of-toggle__knob{ position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:var(--noir); box-shadow:0 1px 3px rgba(0,0,0,.4); transition:transform .25s var(--ease), background .25s; }
/* style.css l. 1971 */
.of-toggle__lbl{ font-size:var(--fs-small); font-weight:700; }
/* style.css l. 1972 */
.of-toggle__n{ display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px;
  padding:0 6px; margin-left:6px; border-radius:999px; background:var(--noir); color:var(--blanc);
  font-size:12px; font-weight:700; vertical-align:middle; }
/* style.css l. 1975 */
.of-toggle__n[hidden]{ display:none; }
/* style.css l. 1977 */
.of-toggle:has(.of-toggle__input:checked){ background:var(--jaune); border-color:var(--jaune); }
/* style.css l. 1978 */
.of-toggle__input:checked + .of-toggle__track{ background:rgba(14,14,14,.24); border-color:var(--noir); }
/* style.css l. 1979 */
.of-toggle__input:checked + .of-toggle__track .of-toggle__knob{ transform:translateX(20px); }
/* style.css l. 1980 */
.of-toggle:has(.of-toggle__input:checked) .of-toggle__n{ background:var(--noir); color:var(--jaune); }
/* style.css l. 1981 */
.of-toggle__input:focus-visible + .of-toggle__track{ outline:2px solid var(--noir); outline-offset:3px; }
/* style.css l. 1998 */
.of-chip{ position:relative; }
/* style.css l. 1999 */
.of-chip__btn{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--fs-small);
  font-weight:600; color:var(--noir); background:var(--blanc); border:1.5px solid transparent;
  border-radius:10px; padding:9px 13px; cursor:pointer; transition:border-color .2s, background .2s; }
/* style.css l. 2002 */
.of-chip__btn:hover{ border-color:rgba(244,183,33,.5); }
/* style.css l. 2003 */
.of-chip.is-open .of-chip__btn{ border-color:var(--jaune); }
/* style.css l. 2004 */
.of-chip.is-active .of-chip__btn{ background:var(--jaune); }
/* style.css l. 2005 */
.of-chip .of-pic{ width:18px; height:18px; flex:0 0 auto; fill:currentColor; }
/* style.css l. 2006 */
.of-chip__lbl{ white-space:nowrap; }
/* style.css l. 2007 */
.of-chip__val{ font-weight:700; white-space:nowrap; }
/* style.css l. 2008 */
.of-chip__car{ width:11px; height:7px; flex:0 0 auto; transition:transform .2s; }
/* style.css l. 2009 */
.of-chip.is-open .of-chip__car{ transform:rotate(180deg); }
/* style.css l. 2012 */
.of-pop{ position:absolute; top:calc(100% + 8px); left:0; z-index:40; min-width:220px;
  background:var(--blanc); border:1px solid rgba(14,14,14,.1); border-radius:14px;
  box-shadow:0 24px 60px -20px rgba(0,0,0,.4); padding:12px; }
/* style.css l. 2015 */
.of-pop[hidden]{ display:none; }
/* style.css l. 2017 */
.of-chip.is-open .of-pop{ animation:ofPop .18s var(--ease) both; }
/* style.css l. 2021 */
.of-opt{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--fs-small);
  font-weight:600; color:var(--noir); background:var(--creme); border:1.5px solid transparent;
  border-radius:999px; padding:8px 14px; margin:3px; cursor:pointer;
  transition:background .15s, border-color .15s, color .15s; }
/* style.css l. 2025 */
.of-opt:hover{ border-color:var(--jaune-d); }
/* style.css l. 2026 */
.of-opt.is-sel{ background:var(--jaune); border-color:var(--jaune); }
/* style.css l. 2029 */
.of-opt__pic{ width:26px; height:26px; flex:0 0 auto; fill:var(--noir);
  display:inline-flex; align-items:center; justify-content:center; }
/* style.css l. 2031 */
.of-opt__pic--all{ color:var(--jaune-d); font-size:18px; }
/* style.css l. 2034 */
.of-opt--line{ width:100%; margin:0; justify-content:flex-start; border-radius:8px; background:transparent;
  white-space:nowrap; font-weight:500; }
/* style.css l. 2036 */
.of-opt--line:hover{ background:var(--creme); border-color:transparent; }
/* style.css l. 2037 */
.of-opt--line.is-sel{ background:var(--jaune); border-color:var(--jaune); font-weight:700; }
/* style.css l. 2039 */
.of-list--fam{ display:flex; flex-direction:column; gap:2px; min-width:250px; }
/* style.css l. 2044 */
.of-pop--list{ max-height:340px; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
/* FONDU DE BAS des listes qui défilent (« Destination », « Accompagnateur ») : il dit qu'il y a
   une suite. Demande de la cliente du 2026-11-12, ABSENTE de la maquette. Un pseudo-élément
   collant, pas un `mask-image` : un masque sur la fenêtre effacerait aussi son ombre portée.
   Sa hauteur est compensée par sa marge haute, donc il n'allonge pas la liste ; `bottom:-12px`
   rattrape le padding de la fenêtre pour qu'il touche le bord. `catalogue.js` pose `is-fin` en
   bas de liste (ou si elle ne déborde pas) : sinon la dernière ligne resterait voilée. */
.of-pop--list::after{ content:''; position:sticky; bottom:-12px; display:block; height:80px;
  margin:-80px -12px 0; background:linear-gradient(to bottom, rgba(255,255,255,0), var(--blanc) 75%);
  pointer-events:none; transition:opacity .2s; }
.of-pop--list.is-fin::after{ opacity:0; }
/* style.css l. 2045 */
.of-list--pays{ display:grid; grid-template-columns:1fr 1fr; gap:2px 8px; min-width:420px; }
/* style.css l. 2048 */
.of-cal{ display:flex; flex-direction:column; gap:10px; min-width:360px; }
/* style.css l. 2049 */
.of-cal__all{ font:inherit; font-size:var(--fs-small); font-weight:700; color:var(--noir);
  background:var(--creme); border:1.5px solid transparent; border-radius:8px; padding:9px 14px;
  cursor:pointer; text-align:left; transition:background .15s, border-color .15s; }
/* style.css l. 2052 */
.of-cal__all:hover{ border-color:var(--jaune-d); }
/* style.css l. 2053 */
.of-cal__all.is-sel{ background:var(--jaune); border-color:var(--jaune); }
/* style.css l. 2054 */
.of-cal__titre{ font-size:var(--fs-label); font-weight:700; letter-spacing:.08em; color:var(--jaune-d);
  text-transform:uppercase; margin:0 0 6px 2px; }
/* style.css l. 2057 */
.of-cal__grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(3,auto);
  grid-auto-flow:column; gap:4px; }
/* style.css l. 2059 */
.of-cal__m{ font:inherit; font-size:var(--fs-label); font-weight:600; color:var(--noir);
  background:var(--creme); border:1.5px solid transparent; border-radius:7px; padding:8px 6px;
  cursor:pointer; text-align:center; transition:background .15s, border-color .15s; }
/* style.css l. 2062 */
.of-cal__m:hover{ border-color:var(--jaune-d); }
/* style.css l. 2063 */
.of-cal__m.is-sel{ background:var(--jaune); border-color:var(--jaune); font-weight:700; }
/* style.css l. 2064 */
.of-cal__m.is-empty{ color:var(--noir-50); opacity:.35; cursor:default; background:transparent; }
/* style.css l. 2067 */
.of-grad{ display:inline-flex; align-items:center; gap:8px; background:var(--blanc);
  border:1.5px solid transparent; border-radius:10px; padding:8px 13px; cursor:pointer; user-select:none;
  transition:border-color .2s, background .2s; }
/* style.css l. 2070 */
.of-grad:hover{ border-color:rgba(244,183,33,.5); }
/* style.css l. 2071 */
.of-grad.is-active{ background:var(--jaune); }
/* style.css l. 2072 */
.of-grad__lbl{ font-size:var(--fs-small); font-weight:600; color:var(--noir); }
/* style.css l. 2073 */
.of-grad__pattes{ display:inline-flex; gap:2px; }
/* style.css l. 2076 */
.of-grad__txt{ font-size:var(--fs-label); font-weight:700; text-transform:uppercase; letter-spacing:.04em;
  color:var(--noir-50); width:56px; text-align:left; }
/* style.css l. 2078 */
.of-grad.is-active .of-grad__txt{ color:var(--noir); }
/* style.css l. 2080 */
.of-grad{ position:relative; }
/* style.css l. 2081 */
.of-grad__info{ width:18px; height:18px; flex:0 0 auto; border:0; border-radius:50%; cursor:pointer;
  background:var(--creme-2); color:var(--noir); font:700 11px/18px var(--sans); font-style:italic;
  padding:0; text-align:center; transition:background .15s, color .15s; }
/* style.css l. 2084 */
.of-grad__info:hover,
.of-grad__info[aria-expanded="true"]{ background:var(--noir); color:var(--blanc); }
/* style.css l. 2085 */
.of-grad.is-active .of-grad__info{ background:rgba(0,0,0,.14); }
/* style.css l. 2086 */
.of-nivpop{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  width:min(88vw, 400px); z-index:60; cursor:default; background:var(--blanc); border-radius:14px;
  padding:16px 18px; box-shadow:0 22px 60px -18px rgba(0,0,0,.45); text-align:left; }
/* style.css l. 2089 */
.of-nivpop[hidden]{ display:none; }
/* style.css l. 2090 */
.of-nivpop__ligne{ display:flex; align-items:flex-start; gap:10px; padding:9px 0;
  border-top:1px solid rgba(0,0,0,.07); font-size:var(--fs-small); line-height:1.45; color:var(--noir-50); }
/* style.css l. 2092 */
.of-nivpop__ligne:first-child{ border-top:0; padding-top:0; }
/* style.css l. 2093 */
.of-nivpop__ligne b{ display:block; color:var(--noir); font-weight:700; }
/* style.css l. 2094 */
.of-nivpop__pattes{ display:inline-flex; gap:2px; flex:0 0 auto; padding-top:2px; }
/* style.css l. 2095 */
.of-patte{ width:16px; height:16px; fill:var(--jaune-d); }
/* style.css l. 2096 */
.of-grad.is-active .of-patte{ fill:var(--noir); }
/* style.css l. 2097 */
.of-patte.is-off{ fill:var(--noir); opacity:.18; }
/* style.css l. 2100 */
.of-slider{ display:inline-flex; align-items:center; gap:10px; background:var(--blanc);
  border:1.5px solid transparent; border-radius:10px; padding:8px 14px; transition:border-color .2s, background .2s; }
/* style.css l. 2102 */
.of-slider.is-active{ border-color:var(--jaune); }
/* style.css l. 2103 */
.of-slider__lbl{ font-size:var(--fs-small); font-weight:600; color:var(--noir); }
/* style.css l. 2104 */
.of-slider__range{ -webkit-appearance:none; appearance:none; width:120px; height:4px; border-radius:999px;
  background:linear-gradient(var(--jaune),var(--jaune)) no-repeat, var(--creme-2); cursor:pointer; }
/* style.css l. 2106 */
.of-slider__range::-webkit-slider-thumb{ -webkit-appearance:none; appearance:none; width:16px; height:16px;
  border-radius:50%; background:var(--noir); border:2px solid var(--jaune); cursor:pointer; }
/* style.css l. 2108 */
.of-slider__range::-moz-range-thumb{ width:16px; height:16px; border-radius:50%; background:var(--noir);
  border:2px solid var(--jaune); cursor:pointer; }
/* style.css l. 2110 */
.of-slider__val{ font-size:var(--fs-label); font-weight:700; color:var(--noir); min-width:88px; text-align:right; }
/* style.css l. 2111 */
.of-reset{ font:inherit; font-size:var(--fs-small); font-weight:600;
  color:var(--blanc); background:transparent; border:1.5px solid rgba(255,255,255,.35); border-radius:999px;
  padding:8px 16px; cursor:pointer; transition:border-color .2s, background .2s, color .2s; }
/* style.css l. 2115 */
.of-reset:hover{ border-color:var(--jaune); background:var(--jaune); color:var(--noir); }
/* style.css l. 2118 */
.of-reset--ico{ width:40px; height:40px; padding:0; display:inline-grid; place-items:center; }
/* style.css l. 2119 */
.of-reset--ico svg{ width:20px; height:20px; fill:currentColor; }
/* style.css l. 2120 */
.of-reset--ico:hover svg{ animation:resetSpin .6s var(--ease); }
/* style.css l. 2121 */
@media (prefers-reduced-motion: reduce){
  .of-reset--ico:hover svg{ animation:none; }
}
/* style.css l. 2124 */
.of-barre{ background:var(--creme); }
/* style.css l. 2125 */
.of-barre__inner{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding-top:16px; padding-bottom:0; }
/* style.css l. 2127 */
.of-count{ font-size:var(--fs-body); font-weight:600; color:var(--noir); margin:0; }
/* style.css l. 2128 */
.of-switch{ display:inline-flex; gap:4px; background:var(--blanc); border:1.5px solid rgba(14,14,14,.12);
  border-radius:999px; padding:4px; }
/* style.css l. 2130 */
.of-switch__btn{ display:inline-flex; align-items:center; gap:7px; font:inherit; font-size:var(--fs-label);
  font-weight:700; letter-spacing:.04em; color:var(--noir-50); background:transparent; border:0;
  border-radius:999px; padding:8px 16px; cursor:pointer; transition:background .2s, color .2s; }
/* style.css l. 2133 */
.of-switch__btn svg{ fill:currentColor; }
/* style.css l. 2134 */
.of-switch__btn.is-on{ background:var(--jaune); color:var(--noir); }
/* style.css l. 2137 */
.of-listing{ background:var(--creme); }
/* style.css l. 2147 */
.of-vide{ text-align:center; font-size:var(--fs-body); color:var(--noir-50); padding:60px 0; }
/* style.css l. 2148 */
.of-reset-inline{ font:inherit; font-size:inherit; color:var(--noir); font-weight:700; text-decoration:underline;
  background:none; border:0; cursor:pointer; padding:0; }
/* style.css l. 2186 */
@media (max-width:900px){
  .of-barre__inner{ flex-wrap:wrap; }
}
/* style.css l. 3051 */
.of-types{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; padding:22px 0 10px; }
/* style.css l. 3052 */
.of-type{ display:inline-flex; align-items:center; gap:8px; font:inherit; font-size:var(--fs-small);
  font-weight:600; color:var(--blanc); background:rgba(255,255,255,.08); border:1.5px solid transparent;
  border-radius:999px; padding:9px 18px; cursor:pointer;
  transition:background .18s, color .18s, border-color .18s; }
/* style.css l. 3056 */
.of-type:hover{ border-color:rgba(244,183,33,.55); }
/* style.css l. 3057 */
.of-type.is-active{ background:var(--jaune); color:var(--noir); border-color:var(--jaune); }
/* style.css l. 3058 */
.of-type__n{ font-size:var(--fs-label); font-weight:700; opacity:.65; }
/* style.css l. 3059 */
.of-type.is-vide{ opacity:.32; cursor:default; }
/* style.css l. 3060 */
.of-type.is-vide:hover{ border-color:transparent; }

/* mobile.css l. 781 */
@media (hover:none){
  .of-chip__btn:hover{ border-color:transparent; }
  .of-opt:hover{ border-color:transparent; }
  .of-opt--line:hover{ background:transparent; }
  .of-cal__all:hover{ border-color:transparent; }
  .of-cal__m:hover{ border-color:transparent; }
  .of-grad:hover{ border-color:transparent; }
  .of-grad__info:hover{ background:var(--creme-2); color:var(--noir); }
  .of-toggle:hover{ background:var(--blanc); border-color:var(--blanc); }
  .of-reset:hover{ border-color:rgba(255,255,255,.35); background:transparent; color:var(--blanc); }
  .of-type:hover{ border-color:transparent; }
}
/* mobile.css l. 1398 */
@media (max-width:1024px){
  .of-filtres .of-types,
  .of-filtres .of-filtres__inner{ display:none; }
  .of-filtres .container{ padding-top:14px; padding-bottom:14px; }
}
/* mobile.css l. 1633 */
@media (max-width:1024px){
  .vf-hero--page .vf-hero__inner:has(.of-toggle){ min-height:0; }
  .vf-hero--page .of-toggle{ margin-top:24px; }
}