:root {
  /* Layout */
  --container: 120rem;
  --ft-container: 164rem;
  --gutter: 2rem;

  /* Couleurs */
  --blue: #029CAB;
  --lightblue: #37CDDD;
  --black: #252621;
  --white: #fff;
  --gray: #D7CFCC;
  --lightgray: #F1EEED;

  /* Helpers viewport */
  --vw390: calc(100vw / 390);
  /* Range desktop 1025 → 1920 */
  --vw-desktop-range: calc((100vw - 1025px) / 895);

  /* TYPO fréquentes */
  --fs-nav: clamp(1.2rem, calc(12px + (16 - 12) * var(--vw-desktop-range)), 1.6rem);
  --fs-nav--2: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);
  --fs-body-md: clamp(1.65rem,calc((15px + (24 - 15) * var(--vw-desktop-range)) * 1.1),2.64rem);
  --fs-body-lg: clamp(1.6rem, calc(16px + (24 - 16) * var(--vw-desktop-range)), 2.4rem);
  --fs-subttl: clamp(1.8rem, calc(18px + (32 - 18) * var(--vw-desktop-range)), 3.2rem);
  --fs-section-title: clamp(4.2rem, calc(42px + (80 - 42) * var(--vw-desktop-range)), 8rem);
  --fs-about-title: clamp(2.6rem,calc((24px + (60 - 24) * var(--vw-desktop-range)) * 1.1), 7rem);

  /* ESPACEMENTS génériques */
  --space-12-20: clamp(1.2rem, calc(12px + (20 - 12) * var(--vw-desktop-range)), 2rem);
  --space-16-30: clamp(1.6rem, calc(16px + (30 - 16) * var(--vw-desktop-range)), 3rem);
  --space-20-40: clamp(2rem,   calc(20px + (40 - 20) * var(--vw-desktop-range)), 4rem);
  --space-28-60: clamp(2.8rem, calc(28px + (60 - 28) * var(--vw-desktop-range)), 6rem);
  --space-32-60: clamp(3.2rem, calc(32px + (60 - 32) * var(--vw-desktop-range)), 6rem);
  --space-40-80: clamp(4rem,   calc(40px + (80 - 40) * var(--vw-desktop-range)), 8rem);
  --space-50-130: clamp(5rem,  calc(50px + (130 - 50) * var(--vw-desktop-range)), 13rem);
  --space-70-200: clamp(7rem,  calc(70px + (200 - 70) * var(--vw-desktop-range)), 20rem);

  /* Boutons & éléments fréquents */
  --btn-height: clamp(4.8rem, calc(48px + (80 - 48) * var(--vw-desktop-range)), 8rem);
  --btn-width:  clamp(28rem,  calc(280px + (480 - 280) * var(--vw-desktop-range)), 48rem);

  --gap-cards: clamp(2rem, calc(20px + (80 - 20) * var(--vw-desktop-range)), 8rem);
  --gap-masonry: clamp(1.6rem, calc(16px + (40 - 16) * var(--vw-desktop-range)), 4rem);
}
@media (min-width:586px) and (max-width:1024px){
    :root{ --vw1024: calc(100vw / 1024); }
}