@layer components {
  /* ---------- catalogue ---------- */
  .cat { display: grid; gap: var(--space-6); padding-block: var(--space-6) var(--space-section); }
  .cat__side { display: none; }
  .js .cat__side { display: block; }
  .filters { display: grid; gap: var(--space-5); align-content: start; }
  .filters fieldset { display: grid; gap: .1rem; }
  .filters legend { font-weight: 600; margin-bottom: .35rem; font-size: .95rem; }
  .filters__group { padding-bottom: var(--space-4); border-bottom: 1px solid var(--c-trait); }
  .filters__head { display: flex; justify-content: space-between; align-items: center; }
  .filters__head h2 { font-size: 1.15rem; font-family: var(--font-text); font-weight: 650; }
  .budget-out { font-weight: 600; color: var(--c-roi-profond); }
  .count-pill { display: inline-grid; place-items: center; min-width: 1.4rem; height: 1.4rem; padding-inline: .3rem; border-radius: 1rem; background: var(--c-corail); color: var(--c-encre); font-size: .75rem; font-weight: 700; margin-left: .15rem; }
  .toolbar { display: grid; gap: var(--space-3); position: sticky; top: var(--header-h); z-index: 30; background: rgb(255 255 255 / .96); backdrop-filter: blur(8px); padding: .75rem 0; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); border-bottom: 1px solid var(--c-trait); }
  .toolbar__row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: center; }
  .toolbar__row2 { display: flex; flex-wrap: wrap; gap: .75rem 1.25rem; align-items: center; justify-content: space-between; }
  .toolbar .sel { display: flex; gap: .5rem; align-items: center; font-size: var(--fs-sm); font-weight: 500; }
  .toolbar .sel select { min-height: 2.75rem; padding: .4rem 2.25rem .4rem .8rem; border: 1.5px solid var(--c-champ); border-radius: var(--radius-pill); background-color: #fff; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233d4663' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right .7rem center; }
  .searchbox { position: relative; }
  .searchbox .icon { position: absolute; left: .9rem; top: 50%; translate: 0 -50%; color: var(--c-gris); pointer-events: none; }
  .searchbox input { width: 100%; min-height: 3rem; padding: .55rem .9rem .55rem 2.7rem; border: 1.5px solid var(--c-champ); border-radius: var(--radius-pill); background: #fff; }
  .searchbox input:hover { border-color: var(--c-roi); }
  .count { font-weight: 600; max-width: none; }
  .chips { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; min-height: 0; }
  .chip { display: inline-flex; align-items: center; gap: .4rem; min-height: 2.5rem; padding: .25rem .5rem .25rem .85rem; border-radius: var(--radius-pill); background: var(--c-ciel); border: 1px solid #c9d3fb; color: var(--c-roi-profond); font-size: var(--fs-sm); font-weight: 600; }
  .chip:hover { background: #dbe3ff; }
  .chip .icon { width: 1rem; height: 1rem; stroke-width: 2.5; }
  .empty { display: grid; justify-items: start; gap: var(--space-4); padding: var(--space-7) var(--space-5); border: 2px dashed var(--c-champ); border-radius: var(--radius-card); background: var(--c-craie); }
  .empty svg { width: 6rem; height: 6rem; color: var(--c-roi); }
  .empty .cluster { gap: .75rem; }
  .help-cards { display: grid; gap: var(--space-4); margin-top: var(--space-7); }
  @media (min-width: 48em) { .help-cards { grid-template-columns: 1fr 1fr; } }
  .help { display: grid; gap: var(--space-3); padding: var(--space-5); border-radius: var(--radius-card); background: var(--c-ciel); align-content: start; justify-items: start; }
  .help--soleil { background: var(--c-creme); }
  @media (min-width: 64em) {
    .cat { grid-template-columns: 17rem 1fr; column-gap: var(--space-7); align-items: start; }
    .cat__side { display: block; position: sticky; top: calc(var(--header-h) + 1rem); max-height: calc(100dvh - var(--header-h) - 2rem); overflow-y: auto; padding-right: .5rem; }
    .toolbar { position: static; margin-inline: 0; padding-inline: 0; }
    .toolbar .only-mobile { display: none; }
    .results { grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr)); }
  }
  .filter-dlg .dlg__body { padding-bottom: 0; }
  .quiz-reco { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; margin-bottom: var(--space-4); padding: .85rem 1rem; border-radius: 1rem; background: var(--c-creme); border: 1px solid color-mix(in oklab, var(--c-soleil) 55%, transparent); }
  .quiz-reco p { display: flex; gap: .6rem; align-items: flex-start; margin: 0; font-size: .95rem; }
  .quiz-reco .icon { flex: none; width: 1.3rem; height: 1.3rem; color: var(--c-roi); margin-top: .1rem; }
  .vt-grid { view-transition-name: none; }
  /* La transition ne doit jamais avaler un clic : les filtres restent utilisables pendant l’animation. */
  ::view-transition { pointer-events: none; }
  ::view-transition-group(*) { animation-duration: 200ms; }

}