:root {
  /* Containers – largeur de contenu */

    /* padding latéral (respiration) */
  --page-padding-mobile: 0.5rem;   /* 16px */
  --page-padding-tablet: 1.5rem; /* 24px */
  --page-padding-desktop: 2rem;  /* 32px */

  --container-narrow: 48rem;   /* 768px → éditorial, texte long */
  --container-default: 72rem;  /* 1152px → pages standard */
  --container-wide: 90rem;     /* 1440px → listings, agenda */

  --gap-cards: var(--sp-22);



}

@media (min-width: 600px) {
    :root {
        --gap-cards: var(--sp-16);
    }
}
@media (min-width: 1200px) {
    :root {
        --gap-cards: var(--sp-22);
    }
}

.position--relative {
    position: relative;
}