/* ============================================================
   Socrame — design tokens. DA « Cuivre & eau ».
   ============================================================ */

:root {
  /* ---- Échelle brute : sarcelle (l'eau) ---- */
  --teal-950: #082325;
  --teal-900: #0E3B3E;
  --teal-800: #10484C;
  --teal-700: #14595E;
  --teal-600: #1C6E74;
  --teal-500: #2A7F85;
  --teal-300: #7FB3B6;
  --teal-100: #D6E6E5;
  --teal-50:  #EDF4F3;

  /* ---- Échelle brute : cuivre (la chaleur, le métal du métier) ---- */
  --copper-900: #523317;
  --copper-800: #6E4520;
  --copper-700: #8F5A28;
  --copper-600: #B87333;
  --copper-500: #C98B4B;
  --copper-400: #E0A868;
  --copper-200: #EFCFA9;
  --copper-100: #F6E7D6;

  /* ---- Échelle brute : craie (les fonds) ---- */
  --chalk-50:  #FDFCFA;
  --chalk-100: #FAF7F2;
  --chalk-200: #F0EAE1;
  --chalk-300: #DCD3C6;
  --chalk-400: #C2B7A6;

  /* ---- Échelle brute : encres ---- */
  --ink-900: #101820;
  --ink-700: #34414B;
  --ink-500: #63727E;
  --ink-300: #93A0A9;

  /* ---- Couleurs sémantiques ---- */
  --text-strong:   var(--ink-900);
  --text-body:     var(--ink-700);
  --text-muted:    var(--ink-500);
  --text-invert:   var(--chalk-100);
  --text-on-brand: #FFFFFF;
  --text-on-teal:  var(--teal-100);

  --surface:         var(--chalk-100);
  --surface-raised:  #FFFFFF;
  --surface-sunken:  var(--chalk-200);
  --surface-brand:   var(--teal-900);
  --surface-deep:    var(--teal-950);
  --surface-accent:  var(--copper-600);
  --surface-wash:    var(--copper-100);

  --border:        var(--chalk-300);
  --border-strong: var(--ink-900);
  --border-accent: var(--copper-600);
  --border-teal:   var(--teal-800);
  --focus-ring:    var(--copper-600);

  /* ---- Univers de prestation : chaque pilier garde sa teinte ---- */
  --pillar-water:   #2A7F85;  /* chauffe-eau électrique */
  --pillar-thermo:  #14595E;  /* thermodynamique */
  --pillar-electric:#B87333;  /* chauffage électrique */
  --pillar-service: #6E4520;  /* entretien & dépannage */
  --pillar-plomberie:#1C6E74;  /* plomberie — sarcelle intermédiaire,
                                  distincte de l'eau chaude sans sortir de la palette */

  /* ---- Typographie ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-body: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Les grands titres suivent aussi la HAUTEUR de l'écran : sur un portable
     en 1366 × 768, un titre de 62 px remplissait à lui seul le haut du héros.
     Inchangés sur grand écran (plafond), resserrés sur un écran bas. */
  --fs-display: clamp(40px, 2.4vw + 2.8vh, 62px);
  --fs-h1: clamp(34px, 2vw + 2.2vh, 50px);
  --fs-h2: clamp(30px, 1.6vw + 1.8vh, 40px);
  --fs-h3: 32px;
  --fs-h4: 20px;
  --fs-body-l: 18px;
  --fs-body: 16px;
  --fs-body-s: 15px;
  --fs-caption: 13px;
  --fs-overline: 11px;
  --fs-stat: 44px;

  --tr-display: -0.03em;
  --tr-overline: 0.16em;
  --lh-display: 1.04;
  --lh-body: 1.6;
  --measure: 62ch;

  /* ---- Espacement (base 4) ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-14: 56px; --sp-16: 64px; --sp-20: 80px;
  --sp-24: 96px; --sp-32: 128px;

  --container: 1200px;
  --container-narrow: 760px;
  --gutter: 56px;
  /* Marge verticale des sections, proportionnelle à la hauteur de l'écran.
     Elle valait 96 px fixes : 192 px de vide entre deux contenus, près d'un
     tiers d'un écran de portable. Signalé le 25/09/2026 — « ça prend 100 %
     de mon écran ». 49 px sur un écran de 660 px utiles, 81 px en 1080 p. */
  --section-y: clamp(48px, 7.5vh, 88px);

  /* ---- Rayons : volontairement nets ---- */
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 3px;
  --r-lg: 6px;
  --r-full: 999px;

  /* ---- Filet cuivre : la signature du système ---- */
  --rule-w: 56px;
  --rule-h: 2px;
  --rule-color: var(--copper-600);

  /* ---- Ombres : discrètes, le système repose sur les filets ---- */
  --shadow-sm: 0 1px 2px rgba(16, 24, 32, 0.05);
  --shadow-md: 0 6px 20px -8px rgba(16, 24, 32, 0.14);
  --shadow-lg: 0 20px 44px -18px rgba(8, 35, 37, 0.24);

  /* ---- Mouvement ---- */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;

  /* ---- Cible tactile minimale ---- */
  --touch-min: 48px;
}