/* =====================================================================
   notoris. — Design tokens V2 (direction B « Le relevé »)
   Validé le 27/10/2026. Source unique : tout le CSS du site en dérive.
   ===================================================================== */

:root {
  /* ---------- Couleurs : marque ---------- */
  --c-ink:            #142037; /* Bleu nuit : texte principal, fonds sombres (hero, contact, en-tête) */
  --c-ink-deep:       #0E1729; /* Pied de page */
  --c-slate:          #5B7EC4; /* Notoris Slate : point du logo, barres de données, filet d'accent. JAMAIS sous du texte */
  --c-slate-light:    #7C9BD6; /* Bouton principal sur fond sombre (texte --c-ink) — contraste 5,8:1 */
  --c-slate-dark:     #3D5FA0; /* Liens, coches, libellés d'accent sur fond clair — contraste 6,3:1 sur blanc */

  /* ---------- Couleurs : neutres ---------- */
  --c-white:          #FFFFFF;
  --c-paper:          #F3F6FB; /* Fond de section alternée, colonne mise en avant */
  --c-paper-2:        #E8ECF4; /* Légendes, pistes de barres */
  --c-line:           #DDE3EE; /* Filets et bordures sur fond clair */
  --c-line-input:     #B9C3D6; /* Bordure des champs de formulaire */
  --c-line-dark:      #2A3854; /* Filets sur fond sombre */
  --c-line-dark-2:    #5D6B88; /* Bordure bouton secondaire sur fond sombre */

  /* ---------- Couleurs : texte ---------- */
  --c-text:           var(--c-ink);
  --c-text-muted:     #55617A; /* Texte secondaire sur clair — 6,2:1 */
  --c-text-on-dark:   #FFFFFF;
  --c-text-on-dark-2: #C9D3E6; /* Texte secondaire sur --c-ink — 10,7:1 */
  --c-text-footer:    #A3AFC6;

  /* ---------- Couleurs : signal ---------- */
  --c-alert:          #B4451F; /* « Avis sans réponse » uniquement — 5,5:1 sur blanc */

  /* ---------- Typographie ---------- */
  --font-sans:  "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* Tout le site */
  --font-logo:  "Plus Jakarta Sans", system-ui, sans-serif; /* Wordmark uniquement, graisse 800 */

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semi:    600;
  --fw-bold:    700; /* Chiffres de données et prix uniquement */

  /* Échelle (desktop → mobile via clamp) */
  --fs-display: clamp(2.75rem, 5.8vw, 5rem);    /* H1 : 44 → 80 px, line-height 1.0, letter-spacing -0.04em */
  --fs-h2:      clamp(2rem, 4vw, 3.25rem);      /* H2 : 32 → 52 px, line-height 1.05, letter-spacing -0.035em */
  --fs-h3:      1.5rem;                         /* 24 px, étapes */
  --fs-h4:      1.25rem;                        /* 20 px, points du constat */
  --fs-lead:    clamp(1.125rem, 1.6vw, 1.25rem);/* 18 → 20 px, chapeaux */
  --fs-body:    1.0625rem;                      /* 17 px */
  --fs-small:   0.9375rem;                      /* 15 px */
  --fs-caption: 0.875rem;                       /* 14 px */
  --fs-data:    clamp(2rem, 3.4vw, 2.75rem);    /* 32 → 44 px, chiffres du rapport et prix, tabular-nums */

  --lh-tight: 1.0;
  --lh-head:  1.05;
  --lh-body:  1.55;

  --ls-display: -0.04em;
  --ls-head:    -0.035em;
  --ls-data:    -0.03em;
  --ls-logo:    -0.04em;

  /* ---------- Espacements (base 4 px) ---------- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 28px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px;
  --sp-14: 56px; --sp-18: 72px; --sp-24: 96px; --sp-28: 112px;

  --section-pad:  var(--sp-28); /* 112 px desktop */
  --gutter:       var(--sp-8);  /* 32 px desktop */
  --container:    1240px;
  --measure:      48ch;         /* Longueur de ligne max des paragraphes */

  /* ---------- Formes ---------- */
  --radius-sm:   6px;   /* Champs de formulaire */
  --radius-md:   8px;   /* Encarts dans le rapport */
  --radius-lg:   10px;  /* Feuille de rapport, cartes d'étape, formulaire, tableau */
  --radius-pill: 999px; /* Boutons, pastilles plateformes */

  --shadow-raise: 0 12px 32px -20px rgba(20, 32, 55, 0.45); /* Étape 2 uniquement */
  --accent-rule:  4px solid var(--c-slate);                 /* Filet haut des éléments mis en avant */

  /* ---------- Interaction ---------- */
  --focus-ring:        3px solid var(--c-slate-dark);
  --focus-ring-dark:   3px solid var(--c-slate-light);
  --focus-offset:      3px;
  --tap-min:           44px;  /* Cible tactile minimale */
  --btn-h:             52px;  /* Boutons principaux */
  --btn-h-sm:          44px;  /* Bouton d'en-tête */
  --input-h:           48px;
  --dur-fast:          150ms; /* Transitions de couleur uniquement */
}

@media (max-width: 760px) {
  :root {
    --section-pad: var(--sp-18); /* 72 px */
    --gutter:      var(--sp-5);  /* 20 px */
  }
}