:root {
  /* Couleurs */
  --c-bleu:    #14284B;
  --c-nuit:    #0B1A33;
  --c-creme:   #F6F3EC;
  --c-creme2:  #EFEBE2;
  --c-acier:   #3E5C8A;
  --c-pierre:  #D9D4C7;
  --c-texte:   #1C2433;
  --c-brique:  #B23A2E;
  --c-or:      #C8A43A;

  /* Typographie */
  --f-titre:   'Fraunces', Georgia, serif;
  --f-corps:   'Inter', system-ui, sans-serif;

  --fs-xs:   12px;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   18px;
  --fs-lg:   22px;
  --fs-xl:   28px;
  --fs-2xl:  36px;
  --fs-3xl:  48px;
  --fs-4xl:  60px;
  --fs-5xl:  72px;

  --lh-tight:  1.05;
  --lh-snug:   1.2;
  --lh-normal: 1.5;
  --lh-relaxed: 1.6;

  /* Espacements */
  --sp-1:   4px;
  --sp-2:   8px;
  --sp-3:   12px;
  --sp-4:   16px;
  --sp-6:   24px;
  --sp-8:   32px;
  --sp-10:  40px;
  --sp-12:  48px;
  --sp-16:  64px;
  --sp-20:  80px;
  --sp-24:  96px;
  --sp-32: 128px;

  /* Sections */
  --section-px:   80px;
  --section-py:  100px;
  --content-max: 1280px;

  /* Transitions */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 200ms;
  --dur-base: 350ms;
  --dur-slow: 600ms;

  /* Altimètre */
  --altimetre-width: 140px;

  /* Bouton versant — angle de coupe en haut à droite */
  --versant-clip: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 0 100%);
}

@media (max-width: 768px) {
  :root {
    --section-px:  24px;
    --section-py:  64px;
    --fs-4xl:  44px;
    --fs-5xl:  52px;
  }
}