/* ==========================================================================
   GRANIER BTP — Design tokens
   Palette brute : béton, anthracite, acier, coupés par un seul accent qui
   claque (orange sécurité). Rien n'est arrondi : le radius est nul partout,
   c'est le parti pris qui distingue ce modèle des gabarits « doux ».
   ========================================================================== */

:root {
  /* --- Couleurs : fonds béton -------------------------------------------
     Trois gris très proches, jamais de blanc pur. Le rythme entre sections
     vient de ces paliers, pas de bordures marquées.
     ---------------------------------------------------------------------- */
  --c-concrete: #f1efe9;       /* niveau 1, fond de page */
  --c-concrete-2: #e6e2d8;     /* niveau 2, sections alternées */
  --c-concrete-3: #dad5c8;     /* niveau 3, aplats, champs de formulaire */
  --c-steel-line: #c7c1b2;     /* filets et bordures sur fond clair */
  --c-steel-line-deep: #aca496; /* bordures marquées, filets de plan */

  /* --- Couleurs : anthracite et acier ------------------------------------- */
  --c-anthracite: #17191b;     /* fonds sombres, bandeaux d'appel, header */
  --c-anthracite-2: #24272a;   /* surfaces sombres secondaires, cartes */
  --c-anthracite-deep: #101112; /* pied de page */
  --c-steel: #5e6266;          /* texte secondaire sur fond clair, ≥4.5:1 y compris sur béton appuyé */
  --c-steel-soft: #9a9d9f;     /* texte tertiaire, légendes */

  /* --- Couleurs : accent chantier ------------------------------------------
     L'orange claque volontairement. Il ne sert qu'aux appels à l'action,
     aux chiffres clés et aux repères : jamais posé en grand aplat de fond.
     ---------------------------------------------------------------------- */
  --c-orange: #ff5a1f;
  --c-orange-deep: #b53509;    /* texte accent et survol, ≥4.5:1 y compris sur béton appuyé */
  --c-orange-soft: #ff8a5c;    /* accent lisible sur fond anthracite */
  --c-yellow: #ffc700;         /* accent secondaire : bandes, tampons, alertes */
  --c-yellow-deep: #8a6900;    /* texte sur jaune, contraste AA sur clair */

  /* --- Rôles sémantiques -------------------------------------------------- */
  --bg-page: var(--c-concrete);
  --bg-alt: var(--c-concrete-2);
  --bg-deep: var(--c-anthracite);
  --text-heading: var(--c-anthracite);
  --text-main: #26292b;
  --text-muted: var(--c-steel);
  --text-on-dark: #f1efe9;
  --text-on-dark-muted: #a9adaf;
  --border-light: var(--c-steel-line);
  --border-dark: rgba(241, 239, 233, 0.14);

  /* --- Typographie ----------------------------------------------------------
     Anton porte le caractère « signalétique de chantier » : condensée,
     massive, lue en capitales. IBM Plex Sans assure la lecture courante avec
     une géométrie carrée qui reste dans le registre technique.
     ---------------------------------------------------------------------- */
  --font-display: "Anton", "Arial Narrow Bold", Impact, sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* Échelle fluide : les titres Anton demandent un peu plus de hauteur que
     des titres serif pour lire aussi « massifs ». */
  --fs-display: clamp(3.4rem, 1.1rem + 8.6vw, 7.75rem);
  --fs-h1: clamp(2.5rem, 1.6rem + 3.6vw, 4.4rem);
  --fs-h2: clamp(1.9rem, 1.4rem + 2.1vw, 3rem);
  --fs-h3: clamp(1.3rem, 1.15rem + 0.7vw, 1.65rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 0.98;
  --lh-title: 1.05;
  --lh-body: 1.65;

  --ls-display: 0.004em;
  --ls-eyebrow: 0.22em;  /* surtitres en capitales très espacées, pochoir */
  --ls-nav: 0.07em;

  /* --- Espacement (échelle 4px) ------------------------------------------- */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  --section-y: clamp(4rem, 2.5rem + 6.5vw, 8.5rem);
  --section-y-sm: clamp(2.75rem, 2rem + 3.5vw, 5rem);

  /* --- Grille et gouttières ----------------------------------------------- */
  --shell-max: 1240px;
  --shell-narrow: 780px;
  --shell-wide: 1520px;
  --shell-pad: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.75rem);

  /* --- Chrome ---------------------------------------------------------------
     Le bandeau « MODÈLE » est fixe, en rayures de ruban de chantier : sa
     hauteur décale le header collant et sert d'offset au scroll des ancres.
     Aucun angle n'est arrondi, ici tout est franc.
     ---------------------------------------------------------------------- */
  --demo-bar-h: 34px;
  --header-h: 76px;
  --radius: 0px;
  --radius-lg: 0px;
  --radius-pill: 0px;

  --shadow-soft: 0 14px 40px -26px rgba(23, 25, 27, 0.55);
  --shadow-lift: 0 26px 60px -30px rgba(23, 25, 27, 0.6);

  /* --- Mouvement -------------------------------------------------------------
     Des transitions courtes et nettes : pas de fondu mou, tout s'arrête sec.
     ---------------------------------------------------------------------- */
  --ease-out: cubic-bezier(0.16, 0.84, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 320ms;
  --dur-slow: 620ms;

  --z-watermark: 1;
  --z-header: 100;
  --z-demo-bar: 120;
  --z-menu: 110;
  --z-lightbox: 200;
  --z-toast: 300;
}

@media (min-width: 768px) {
  :root {
    --fs-body: 1.0625rem;
    --header-h: 92px;
  }
}