/*
 * ADEM BAT — jetons de design.
 *
 * La palette est inchangée : chaux, tuffeau, ardoise et la brique de leur
 * logo. Ce sont les deux matériaux de la région — la pierre de tuffeau dont
 * sont bâties les maisons du Val de Loire, l'ardoise des toits — et la
 * couleur que l'entreprise utilise déjà.
 *
 * Ce qui change ici, c'est le registre : arrondis et ombres reviennent,
 * discrets, parce que le site vise désormais le vocabulaire attendu d'une
 * entreprise du bâtiment — rassurant et ordonné — plutôt qu'un objet
 * graphique.
 */

:root {
  /* ------------------------------------------------------------ matière */
  --chaux: #f6f4ef;        /* badigeon — fond de lecture */
  --chaux-deep: #ece8df;   /* demi-ton, pour les encarts */
  --tuffeau: #ded5c2;      /* pierre de taille — bandes alternées */
  --ardoise: #36434c;      /* ardoise — texte et structure */
  --ardoise-mid: #5b6b76;  /* texte secondaire sur fond clair */
  --ardoise-deep: #1c262c; /* bandeaux sombres, pied de page */
  --brique: #7a1512;       /* la leur. Accent. */
  --brique-bright: #9c2a24;
  --blanc: #ffffff;

  --rule: #ddd6c7;         /* filet sur fond clair */
  --rule-soft: #e8e3d8;
  --rule-dark: #3c4a54;

  /* ---------------------------------------------------------- caractère */
  --sans: "Archivo", "Segoe UI", system-ui, sans-serif;

  /*
   * La largeur reste disponible — Archivo est variable — mais elle sert
   * désormais par petites touches (titres, sur-titres) et non comme
   * principe de composition.
   */
  --w-wide: 112;
  --w-text: 100;
  --w-narrow: 88;

  --t-display: clamp(2.3rem, 1.5rem + 3vw, 4.1rem);
  --t-h2: clamp(1.8rem, 1.25rem + 1.8vw, 2.75rem);
  --t-h3: 1.3rem;
  --t-lede: 1.125rem;
  --t-body: 1rem;
  --t-small: 0.9375rem;
  --t-micro: 0.8125rem;

  /* ------------------------------------------------------------ espaces */
  --s1: 0.25rem;
  --s2: 0.5rem;
  --s3: 1rem;
  --s4: 1.5rem;
  --s5: 2.5rem;
  --s6: 4rem;
  --s7: 6rem;

  --page: 1180px;
  --gutter: 1.5rem;

  /*
   * Arrondis — une seule règle pour tout le site :
   *   --r    6px   tout ce qu'on clique ou remplit : boutons, champs,
   *                pastilles de ville, étiquettes ;
   *   --r-lg 10px  tout ce qui contient : cartes, panneaux, images ;
   *   50 %         les seuls pictogrammes ronds (garanties, valeurs, étapes).
   * Pas de forme en pilule ailleurs.
   */
  --r: 6px;
  --r-lg: 10px;

  /*
   * Ombres portées : trois niveaux seulement, toutes très basses en opacité
   * et teintées d'ardoise plutôt que de noir pur — une ombre noire sur un
   * fond chaud se voit immédiatement.
   */
  --sh-1: 0 1px 2px rgba(28, 38, 44, 0.06);
  --sh-2: 0 2px 8px rgba(28, 38, 44, 0.07), 0 1px 2px rgba(28, 38, 44, 0.05);
  --sh-3: 0 10px 28px rgba(28, 38, 44, 0.11), 0 2px 6px rgba(28, 38, 44, 0.06);

  --sh-4: 0 24px 60px -18px rgba(28, 38, 44, 0.28), 0 6px 16px rgba(28, 38, 44, 0.08);

  --ease: cubic-bezier(0.2, 0, 0.1, 1);
  /* Sortie longue et amortie : les révélations au défilement « se posent ». */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --hdr-h: 82px;
}

@media (max-width: 900px) {
  :root { --hdr-h: 68px; }
}

@media (max-width: 720px) {
  :root {
    --gutter: 1.125rem;
    --s7: 3.5rem;
    --s6: 2.5rem;
  }
}