/* ==========================================================================
   tokens.css — SOURCE UNIQUE DE VÉRITÉ
   Aucune valeur brute (hex, px de couleur/ombre/espacement, durée) n'existe
   ailleurs que dans ce fichier. Tout le reste consomme var(--token).
   Réf. : Manifeste design § 0 (règle d'or).
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------------- */
  /* 3.1 — Accent (marque, généré depuis #0B6EDE / HSL 212° 90% 46%)         */
  /* ---------------------------------------------------------------------- */
  --accent-50: #ebf3fe;
  --accent-100: #d6e7fd;
  --accent-200: #adcffb;
  --accent-300: #79b0f6;
  --accent-400: #3b8aec; /* accent lisible sur fond sombre uniquement */
  --accent-500: #0b6ede; /* COULEUR DE MARQUE */
  --accent-600: #0a60c2; /* texte-lien sur fond clair, hover primaire       */
  --accent-700: #084d9b; /* :active                                         */
  --accent-800: #073a73;
  --accent-900: #05264c;

  /* ---------------------------------------------------------------------- */
  /* 3.1 bis — Chaud (contrepoint ambre)                                    */
  /* Second registre, volontairement minoritaire : sur-titres, filets        */
  /* d'accent, mot-clé du titre, numéros d'étapes. Le bleu reste la couleur  */
  /* de structure et d'action — aucun bouton ne passe en ambre.              */
  /* Certaines valeurs coïncident avec la rampe --warning-* : c'est la même  */
  /* teinte de base, mais l'usage sémantique diffère et ne doit pas être     */
  /* confondu (retour de formulaire vs accent de marque).                    */
  /* ---------------------------------------------------------------------- */
  --warm-50: #fffaeb;
  --warm-100: #fef0c7;
  --warm-200: #fedf89;
  --warm-300: #fec84b; /* accent lisible sur fond sombre */
  --warm-400: #fdb022; /* aplat portant du texte foncé */
  --warm-500: #f79009; /* filets et éléments décoratifs */
  --warm-600: #dc6803;
  --warm-700: #b54708; /* seul pas lisible en texte sur fond clair */


  /* ---------------------------------------------------------------------- */
  /* 3.2 — Neutres (gris froids, teintés bleu)                              */
  /* ---------------------------------------------------------------------- */
  --ink-900: #0e1726;
  --ink-800: #182231;
  --ink-700: #2b3648;
  --ink-600: #4a5568; /* texte courant */
  --ink-500: #6b7688; /* texte secondaire */
  --ink-400: #94a0b4; /* placeholders, désactivé */
  --ink-300: #c2cbda;
  --ink-200: #dde4ef;
  --ink-100: #edf1f7;
  --ink-50: #f6f9fd;

  /* Alias sémantiques de texte */
  --text-strong: var(--ink-900);
  --text-body: var(--ink-600);
  --text-muted: var(--ink-500);
  --text-faint: var(--ink-400);

  /* ---------------------------------------------------------------------- */
  /* 3.3 — Surfaces                                                         */
  /* ---------------------------------------------------------------------- */
  --white: #ffffff; /* texte/aplat sur fonds accent & sombres */
  --bg-canvas: #ffffff;
  --bg-subtle: #f6f9fd;
  --bg-muted: #edf3fb;
  --bg-dark: #0b1220;
  --bg-hero: linear-gradient(180deg, #e9f2fe 0%, #f6fafe 55%, #f6f9fd 100%);
  --bg-overlay: rgba(14, 23, 38, 0.48);

  /* Bannière paysage : voiles de lisibilité posés sur la photo.
     Horizontal (desktop) : opaque à gauche sous le texte, transparent à
     droite pour laisser respirer le sujet. Vertical (mobile) : la photo est
     recadrée serré, le voile doit couvrir toute la hauteur. */
  --scrim-hero: linear-gradient(
    90deg,
    rgba(11, 18, 32, 0.82) 0%,
    rgba(11, 18, 32, 0.68) 36%,
    rgba(11, 18, 32, 0.34) 60%,
    rgba(11, 18, 32, 0.1) 100%
  );
  --scrim-hero-md: linear-gradient(
    90deg,
    rgba(11, 18, 32, 0.86) 0%,
    rgba(11, 18, 32, 0.78) 40%,
    rgba(11, 18, 32, 0.5) 68%,
    rgba(11, 18, 32, 0.18) 100%
  );
  /* Voile de la carte d'appel : dense sous le texte, il s'ouvre nettement à
     droite pour laisser vivre le turquoise du fond. Le palier de 45 % est celui
     où finit le texte — il tient le contraste au-delà de 6:1 sur toute la zone
     de lecture, alors que le mur photographié y est très clair. */
  --scrim-callout: linear-gradient(
    90deg,
    rgba(11, 18, 32, 0.8) 0%,
    rgba(11, 18, 32, 0.68) 45%,
    rgba(11, 18, 32, 0.32) 100%
  );
  --scrim-hero-sm: linear-gradient(
    180deg,
    rgba(11, 18, 32, 0.66) 0%,
    rgba(11, 18, 32, 0.74) 50%,
    rgba(11, 18, 32, 0.82) 100%
  );

  /* Surfaces & textes posés sur fond sombre / photo */
  --surface-on-dark: rgba(255, 255, 255, 0.14);
  --text-on-dark: rgba(255, 255, 255, 0.82);
  /* Texte secondaire sur fond sombre (pied de page). 0.7 sur --bg-dark donne
     un contraste d'environ 9:1, largement au-delà du seuil AA. */
  --text-on-dark-muted: rgba(255, 255, 255, 0.7);
  --accent-on-dark: var(--accent-200);

  /* ---------------------------------------------------------------------- */
  /* 3.4 — Couleurs sémantiques (retours de formulaire uniquement)          */
  /* ---------------------------------------------------------------------- */
  --success-700: #05603a;
  --success-500: #12b76a;
  --success-50: #ecfdf3;
  --danger-700: #912018;
  --danger-500: #d92d20;
  --danger-50: #fef3f2;
  --warning-700: #b54708;
  --warning-500: #f79009;
  --warning-50: #fffaeb;

  /* ---------------------------------------------------------------------- */
  /* 4.1 — Typographie : familles & graisses                                */
  /* ---------------------------------------------------------------------- */
  --font-sans: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI',
    Roboto, 'Helvetica Neue', Arial, sans-serif;

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* ---------------------------------------------------------------------- */
  /* 4.2 — Échelle typographique fluide (clamp)                             */
  /* ---------------------------------------------------------------------- */
  --fs-display: clamp(2rem, 1.3rem + 3.2vw, 3.5rem);   /* 32 → 56 */
  --fs-h2: clamp(1.4375rem, 1.0875rem + 1.6vw, 2.1875rem); /* 23 → 35 (−5 px) */
  --fs-h3: clamp(1.375rem, 1.2rem + 0.8vw, 1.75rem);   /* 22 → 28 */
  --fs-h4: clamp(1.125rem, 1.05rem + 0.3vw, 1.25rem);  /* 18 → 20 */
  --fs-h5: 1rem;                                        /* 16 */
  --fs-lead: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);  /* 16 → 18 */
  --fs-body: 1rem;                                      /* 16 */
  --fs-sm: 0.9375rem;                                   /* 15 */
  --fs-xs: 0.875rem;                                    /* 14 */
  --fs-2xs: 0.8125rem;                                  /* 13 */
  --fs-3xs: 0.75rem;                                    /* 12 */

  /* Interlignes */
  --lh-display: 1.1;
  --lh-h2: 1.2;
  --lh-tight: 1.35;
  --lh-ui: 1.5;
  --lh-body: 1.7;

  /* Interlettrages */
  --ls-display: -0.02em;
  --ls-h2: -0.015em;
  --ls-tight: -0.01em;
  --ls-eyebrow: 0.14em;
  --ls-label: 0.06em;

  /* ---------------------------------------------------------------------- */
  /* 5.1 — Espacements (base 4px)                                           */
  /* ---------------------------------------------------------------------- */
  --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-16: 64px;
  --sp-20: 80px;
  --sp-24: 96px;
  --sp-30: 120px;

  /* ---------------------------------------------------------------------- */
  /* 5.2 — Conteneurs                                                       */
  /* ---------------------------------------------------------------------- */
  --container-max: 1200px;
  --container-narrow: 760px;
  --container-pad: clamp(20px, 4vw, 24px);
  --container-pad-sm: 30px;
  --gutter: clamp(20px, 3vw, 32px);

  /* ---------------------------------------------------------------------- */
  /* 5.3 — Rythme vertical                                                  */
  /* ---------------------------------------------------------------------- */
  /* Hauteur de l'en-tête : consommée par la barre elle-même, la position du
     tiroir mobile et le décalage d'ancre. Trois valeurs qui doivent bouger
     ensemble — d'où le token. */
  --header-h: 84px;
  --header-h-sm: 68px;

  --section-py: clamp(64px, 2.5rem + 4vw, 96px);
  --hero-py: clamp(48px, 1.5rem + 5vw, 88px);
  --hero-min-h: clamp(540px, 68vh, 720px);
  --hero-content-max: 620px;

  /* Orbite « À propos ». Une seule mesure pilote l'ensemble : les anneaux, la
     photo et les pastilles en dérivent, la composition reste proportionnée à
     toutes les tailles. */
  --orbit-size: clamp(360px, 46vw, 560px);
  --orbit-ring: calc(var(--orbit-size) * 0.82);
  --orbit-photo: calc(var(--orbit-size) * 0.64);
  --orbit-icon: 58px;

  /* Colonne des chiffres clés : figée pour que les deux descriptions
     démarrent au même fer, et assez large pour « 3 200 / chantiers ». */
  --about-stat-col: 12rem;

  /* Colonnes d'avis en défilement continu. Deux durées différentes pour que
     les colonnes ne se synchronisent pas : le motif se répéterait à l'œil. */
  /* Débord de la carte formulaire sur le pied de page */
  --quote-overlap: clamp(56px, 9vw, 130px);
  --callout-min-h: clamp(240px, 22vw, 320px);
  /* Avis : hauteur des colonnes verticales, largeur d'une carte du rail */
  --reviews-h: clamp(460px, 74vh, 660px);
  --review-w: clamp(272px, 76vw, 340px);
  --dur-marquee: 70s;
  --dur-marquee-alt: 88s;

  /* ---------------------------------------------------------------------- */
  /* 6 — Rayons (liste fermée)                                              */
  /* ---------------------------------------------------------------------- */
  --r-xs: 6px;
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 20px;
  --r-2xl: 24px;
  --r-pill: 999px;
  --r-circle: 50%;

  /* ---------------------------------------------------------------------- */
  /* 7 — Bordures                                                           */
  /* ---------------------------------------------------------------------- */
  --border-w: 1px;
  --border-w-accent: 4px;
  --border-subtle: #edf1f7;
  --border-default: #dde4ef;
  --border-strong: #c2cbda;
  --border-accent: #0b6ede;
  --border-on-dark: rgba(255, 255, 255, 0.1);

  /* ---------------------------------------------------------------------- */
  /* 8.1 — Élévation (ombres froides, teintées ink-900)                     */
  /* ---------------------------------------------------------------------- */
  --shadow-xs: 0 1px 2px rgba(14, 23, 38, 0.04);
  --shadow-sm: 0 1px 3px rgba(14, 23, 38, 0.06), 0 1px 2px rgba(14, 23, 38, 0.04);
  --shadow-md: 0 4px 12px rgba(14, 23, 38, 0.06), 0 2px 4px rgba(14, 23, 38, 0.04);
  --shadow-lg: 0 12px 28px rgba(14, 23, 38, 0.08), 0 4px 10px rgba(14, 23, 38, 0.04);
  --shadow-xl: 0 24px 48px rgba(14, 23, 38, 0.1), 0 8px 16px rgba(14, 23, 38, 0.04);

  /* 8.2 — Ombres colorées (boutons primaires uniquement) */
  --shadow-accent: 0 6px 16px rgba(11, 110, 222, 0.24);
  --shadow-accent-lg: 0 10px 28px rgba(11, 110, 222, 0.32);

  /* 8.3 — Header & focus */
  --shadow-header: 0 1px 0 rgba(14, 23, 38, 0.06), 0 6px 20px rgba(14, 23, 38, 0.04);
  --ring-accent: 0 0 0 4px rgba(11, 110, 222, 0.18);
  --ring-danger: 0 0 0 4px rgba(217, 45, 32, 0.16);

  /* ---------------------------------------------------------------------- */
  /* 9 — Iconographie (tailles)                                             */
  /* ---------------------------------------------------------------------- */
  --accordion-sign: 32px;

  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --icon-xl: 30px;

  /* ---------------------------------------------------------------------- */
  /* 13 — Mouvement                                                         */
  /* ---------------------------------------------------------------------- */
  --dur-fast: 150ms;
  --dur-base: 200ms;
  --dur-slow: 300ms;
  --dur-reveal: 600ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  /* Dépasse légèrement la cible avant de se replacer : donne le petit rebond
     du saut, là où --ease-out se contenterait de décélérer. */
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* Déplacements (liste fermée) */
  --lift: -4px;
  --lift-btn: -1px;
  --lift-card: -2px;
  --lift-icon: -8px;

  /* ---------------------------------------------------------------------- */
  /* Plans (z-index)                                                        */
  /* ---------------------------------------------------------------------- */
  --z-sticky: 100;
  --z-header: 200;
  --z-drawer: 300;
}

/* Marge latérale élargie sur petit écran. Elle est portée par le token et non
   par chaque composant : .container, le tiroir mobile et le rail d'avis la
   consomment tous, un seul point de réglage suffit donc.
   Une clamp() ne pouvait pas l'exprimer — elle croît avec la largeur, or on
   veut ici l'inverse : plus de marge sur petit écran que sur grand. */
@media (max-width: 640px) {
  :root {
    --container-pad: var(--container-pad-sm);
  }
}