/* ===== from main.css lines 2742-3036 ===== */
    /* Inline filters in results header */
    .results-filters {
      display: flex;
      flex-wrap: nowrap;
      gap: 8px;
      align-items: center;
      min-width: 0;
    }
    .results-filters-scroll {
      display: flex;
      gap: 6px;
      flex: 1 1 auto;
      min-width: 0;
      overflow-x: auto;
      overflow-y: hidden;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      -ms-overflow-style: none;
    }
    .results-filters-scroll::-webkit-scrollbar { display: none; }
    .results-filters-scroll > .filter-dropdown { flex: 0 0 auto; }
    .filter-dropdown { position: relative; }
    .filter-button {
      min-height: var(--control-pill-height);
      box-sizing: border-box;
      padding: 0 36px 0 16px;
      border: 1.5px solid var(--header-control-border);
      border-radius: 999px;
      background-color: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5l5 5 5-5'/></svg>");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #fff;
      font: inherit;
      font-size: var(--fs-sm);
      line-height: 1.2;
      cursor: pointer;
      white-space: nowrap;
      transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
    }
    .filter-button:hover, .filter-button:focus {
      background-color: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
      outline: none;
    }
    .filter-button.is-active {
      background-color: rgba(var(--accent-rgb), 0.22);
      color: #fff;
      border-color: rgba(var(--accent-rgb), 0.75);
    }
    .filter-button.is-active:hover, .filter-button.is-active:focus {
      background-color: rgba(var(--accent-rgb), 0.32);
      border-color: rgba(var(--accent-hover-rgb), 0.9);
    }
    .filter-button-caret { display: none; }
    .filter-pop {
      position: absolute;
      top: calc(100% + 6px);
      left: 0;
      z-index: 20;
      min-width: 240px;
      max-width: min(340px, calc(100vw - 24px));
      padding: 12px;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.08);
      -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(0.85);
      backdrop-filter: blur(18px) saturate(1.6) brightness(0.85);
      box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    }
    .filter-pop--scroll { max-height: 280px; overflow-y: auto; }
    .filter-pop--slider { min-width: min(320px, calc(100vw - 24px)); }

    .filter-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .filter-chip {
      padding: 6px 12px;
      border: 1.5px solid var(--header-control-border);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      font-size: var(--fs-xs);
      cursor: pointer;
      transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
    }
    .filter-chip:hover {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
    }
    .filter-chip.is-active {
      background: rgba(var(--accent-rgb), 0.22);
      color: #fff;
      border-color: rgba(var(--accent-rgb), 0.75);
    }
    .filter-chip.is-active:hover {
      background: rgba(var(--accent-rgb), 0.32);
      border-color: rgba(var(--accent-hover-rgb), 0.9);
    }

    .filter-slider-head {
      font-size: var(--fs-xs);
      color: var(--text);
      margin-bottom: 12px;
      font-weight: 600;
    }
    .filter-slider-ticks {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 50%;
      height: 8px;
      transform: translateY(-50%);
      pointer-events: none;
      background-image: radial-gradient(circle, rgba(255,255,255,0.6) 1.2px, transparent 1.6px);
      background-repeat: repeat-x;
      background-position: left center;
      background-size: var(--tick-step, 10%) 100%;
      z-index: 3;
    }

    /* Dual-range slider (année) */
    .filter-dual-range {
      position: relative;
      height: 34px;
      padding: 0 8px;
    }
    .filter-dual-range-track {
      position: absolute;
      left: 8px;
      right: 8px;
      top: 50%;
      height: 4px;
      transform: translateY(-50%);
      background: var(--line);
      border-radius: 999px;
      z-index: 1;
    }
    .filter-dual-range-selected {
      position: absolute;
      top: 50%;
      height: 4px;
      transform: translateY(-50%);
      background: var(--accent);
      border-radius: 999px;
      z-index: 2;
    }
    .filter-dual-slider {
      position: absolute;
      left: 0;
      right: 0;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      height: 34px;
      margin: 0;
      background: none;
      -webkit-appearance: none;
      appearance: none;
      pointer-events: none;
      z-index: 4;
    }
    .filter-dual-slider::-webkit-slider-runnable-track {
      height: 4px;
      background: transparent;
      border: 0;
    }
    .filter-dual-slider::-moz-range-track {
      height: 4px;
      background: transparent;
      border: 0;
    }
    .filter-dual-slider::-webkit-slider-thumb {
      -webkit-appearance: none;
      appearance: none;
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--panel);
      box-shadow: 0 0 0 1px var(--accent);
      cursor: pointer;
      pointer-events: auto;
      margin-top: -6px;
    }
    .filter-dual-slider::-moz-range-thumb {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      background: var(--accent);
      border: 2px solid var(--panel);
      box-shadow: 0 0 0 1px var(--accent);
      cursor: pointer;
      pointer-events: auto;
    }

    .filter-reset {
      flex: 0 0 auto;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: var(--control-pill-height);
      height: var(--control-pill-height);
      padding: 0;
      border: 1.5px solid var(--header-control-border);
      border-radius: 999px;
      background: transparent;
      color: var(--muted);
      font-size: 1.25rem;
      font-weight: 700;
      cursor: pointer;
      line-height: 1;
      transition: color 0.2s ease, border-color 0.2s ease;
    }
    .filter-reset:hover { color: var(--accent); border-color: var(--header-control-border-hover); }

    .results-panel h2 {
      font-size: 1.6rem;
      letter-spacing: -0.01em;
      color: #ffffff;
      margin: 0 0 4px;
      font-weight: 700;
    }

    .results-panel.hidden {
      display: none;
    }

    .results {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
      gap: var(--card-gap-row) var(--card-gap-col);
      margin-top: 8px;
      padding-left: 8px;
      padding-right: 8px;
      --grid-pad-x: 8px;
      box-sizing: border-box;
      /* Clip trailer-expanded hover transforms that push grid siblings past
         the right/left edge. Scoped here (not on .shell) so the .hero
         full-bleed extension above keeps working on wide screens. `clip`
         instead of `hidden` avoids creating a scroll container that would
         break `position: sticky` on descendants. */
      overflow-x: clip;
      /* Generous clip margin so the trailer-expanded card's highlight ring
         and drop-shadow halo aren't clipped by the grid edge. Translated
         siblings move much more than 200 px, so they stay clipped. */
      overflow-clip-margin: 200px;
    }

    .results-panel h2 { margin-bottom: 0; }
    /* Search-results page only: collapse the wide gap between the site
       header and the filter row. The default `.shell` (36 px top) +
       `.layout` (12 px top) + the h2 + its margins add up to ~80 px of
       empty space above the filter chips. When results are visible we
       hide the redundant "Resultats" h2 entirely and shrink the desktop
       shell margin to a tight 8 px. Mobile spacing is handled later in
       responsive.css, where the fixed header's expanded search row is known.
       Scoped via `:has()` so other pages keep their breathing room. */
    @media (min-width: 1025px) {
      body:has(#resultsPanel:not(.hidden)) .shell { margin-top: 8px; }
    }
    body:has(#resultsPanel:not(.hidden)) .layout { margin-top: 0; }
    body:has(#resultsPanel:not(.hidden)) .results-header { display: none; }
    /* Search-results grid is fully responsive on every viewport: cards
       have a minimum width (= explorer carousel card size, var(--card-min)
       = 220 px desktop, 156 px mobile) and grow with `1fr` to fill the
       row until there's enough room to fit another card.

       Tighter column gap on desktop (20 px instead of the default 32 px
       from tokens.css) so 5 × 220-px cards actually fit in a 1240-px
       shell — with the original 32 px gap we were 4 px short and the
       layout collapsed to 4 cards × ~274 px each. */
    @media (min-width: 768px) {
      #results.results { --card-gap-col: 20px; }
    }

    .load-more-button {
      grid-column: 1 / -1;
      justify-self: center;
      margin-top: 28px;
      margin-bottom: 28px;
      padding: 12px 32px;
      min-height: var(--control-pill-height);
      box-sizing: border-box;
      border: 1.5px solid var(--header-control-border);
      border-radius: 999px;
      background: rgba(255, 255, 255, 0.12);
      -webkit-backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      backdrop-filter: blur(14px) saturate(1.6) brightness(0.78);
      color: #fff;
      cursor: pointer;
      font-weight: var(--fw-bold);
      font-size: var(--fs-sm);
      transition: border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
    }
    .load-more-button:hover:not(:disabled) {
      background: rgba(255, 255, 255, 0.24);
      border-color: var(--header-control-border-hover);
    }
    .load-more-button:disabled { opacity: 0.6; cursor: not-allowed; }


    .empty {
      padding: 18px;
      border: 1px dashed var(--line);
      border-radius: 14px;
      text-align: center;
      color: var(--muted);
      background: var(--panel);
    }
    .empty-center {
      grid-column: 1 / -1;
      max-width: 480px;
      width: 100%;
      margin: 0 auto;
      padding: 32px 24px;
      /* Vertically centre the empty-state text in the viewport space below
         the sticky header and the filter controls, instead of clinging to
         the top of `#results`. */
      min-height: calc(100vh - var(--header-h, 76px) - 160px);
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      border: 0;
      background: transparent;
    }