.c-search-results h1{
  margin: 30px 0 10px 0;
  font-size: 20px;
}

/*============================
/ FILTRES
/*============================*/

/*--------------------------------------------
/  Bright
/*-------------------------------------------*/

/* conteneur (spécifique à ce composant) */
.c-bright-slider{
  display: grid;
  gap: .5rem;
}

/* échelle texte (spécifique) */
.c-bright-slider__scale{
  display: flex;
  justify-content: space-between;
  font-size: .875rem;
  color: #666; /* ou un token */
}

.c-bright-slider{
  /* valeurs (si tu utilises --val/--min/--max pour un gradient dynamique) */
  --min: 1;
  --max: 5;
  --val: 3;
  /* overrides visuels */
  /* --fill: var(--color-accent); */
  /* --track-h: 10px; */
  /* --thumb: 22px; */
}

/* -------------------------------
   Location radius
   ------------------------------ */

.c-location__radius{
  /* valeurs (utilisées par le gradient de .c-range) */
  --min: 5;
  --max: 150;
  --val: 5;

  /* tuning visuel (override du skin générique) */
  --track-h: 10px;
  --thumb: 22px;
  --thumb-active: 30px;
  --ring: 10px;

  /* couleurs (map sur tes tokens si tu veux) */
  --fill: #ff1749;
  --track: #e9e9ee;
  --shadow: 0 6px 16px rgba(0,0,0,.14);

  display: grid;
  gap: 10px;
}

.c-location__radius-info{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.c-location__radius-label{ font-weight: 600; }

.c-location__radius-value{
  font-weight: 700;
  white-space: nowrap;
}
.c-location__radius-unit{ opacity: .8; font-weight: 600; }

.c-location__radius-control{
  position: relative;
  padding-top: 18px; /* si tu as une bubble au-dessus */
}

/* l’input range utilise le skin générique */
.c-location__radius-input{
  /* IMPORTANT: ton input doit avoir class="c-range location__radius-input" */
  width: 100%;
}

/*--------------------------------------------
/  format
/*-------------------------------------------*/

.filter-format--layout {
  display: flex;
  gap: 12px;
}

.filter-format--layout [data-value] {
  flex: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #f5f5f5;
  transition: border-color 0.3s ease, background-color 0.3s ease;
  position: relative;
  padding: 8px;
}

/* Chaque format = une "mini-vignette" interne */
.filter-format--layout [data-value]::before {
  content: "";
  display: block;
  background: #ddd;
  border-radius: 2px;
  transition: background-color 0.3s ease;
}

/* Portrait = ratio vertical */
.filter-format--portait::before {
  width: 40%;
  aspect-ratio: 3 / 4;
}

/* Paysage = ratio horizontal */
.filter-format--landscape::before {
  width: 70%;
  aspect-ratio: 16 / 9;
}

/* Carré */
.filter-format--square::before {
  width: 50%;
  aspect-ratio: 1 / 1;
}

/* Hover (optionnel) */
.filter-format--layout [data-value]:hover {
  border-color: #e4244e;
}

/* Sélectionné */
.filter-format--layout [data-value].is-selected {
  border-color: #ff1749;
  background: #fff;
}

.filter-format--layout [data-value].is-selected::before {
  background: #ff1749;
}