/* ==========================================================================
   Réno Éco Habitat — Design tokens
   Source unique de vérité pour la charte : aucune valeur de couleur, de
   typographie ou d'espacement n'est écrite en dur ailleurs dans le CSS.
   ========================================================================== */

:root {
  /* --- Palette de marque (cahier des charges §3) -------------------------- */
  --c-forest:        #205A46;  /* Vert forêt        — couleur principale      */
  --c-sage:          #789B83;  /* Vert sauge        — couleur secondaire      */
  --c-ink:           #29332F;  /* Anthracite végétal— texte foncé             */
  --c-cream:         #F4F0E7;  /* Crème             — fond principal          */
  --c-sand:          #D9CBB7;  /* Sable             — accent                  */
  --c-white:         #FFFFFF;

  /* Dérivés — tous construits à partir des six couleurs ci-dessus.
     Le vert profond est celui des grands aplats de la maquette : il donne au
     vert forêt la densité « premium » recherchée sur les pleines surfaces. */
  --c-forest-deep:   #17402F;
  --c-forest-hover:  #1A4C3B;
  --c-forest-press:  #133326;
  --c-forest-soft:   #E9F0EA;  /* Fond des pastilles d'icônes                 */
  --c-forest-tint:   #F0F2ED;  /* Fond de la section déperditions             */
  --c-cream-soft:    #F9F8F5;  /* Alternance de sections                      */
  --c-sand-soft:     #F3EDE3;  /* Fond du CTA intermédiaire                   */

  --c-muted:         #5B6661;  /* Texte secondaire      — 5,25:1 sur crème     */
  --c-muted-soft:    #63706A;  /* Placeholders          — 5,18:1 sur blanc     */
  --c-field-border:  #D8D8D3;  /* §22 — bordure des champs                    */
  --c-border:        rgba(41, 51, 47, .10);
  --c-border-strong: rgba(41, 51, 47, .18);
  --c-border-light:  rgba(255, 255, 255, .22);

  --c-negative:      #B4443C;  /* Colonne « Avant » — 4,9:1 sur blanc         */
  --c-negative-soft: #FBECEA;
  --c-positive:      #1F6B4E;  /* Colonne « Après »                           */
  --c-positive-soft: #E4F0E8;
  --c-error:         #A93226;
  --c-success:       #1F6B4E;

  /* --- Typographie (§4) --------------------------------------------------- */
  --font-title: "Sora", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --font-body:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;

  /* Échelle fluide : la valeur mobile et la valeur desktop reliées en continu
     plutôt que par paliers, pour éviter les ruptures aux points de bascule. */
  /* Le maximum est calé sur la colonne du Hero : au-delà de 46 px, « Des
     consommations » ne tient plus sur une ligne et le titre débordait de sa
     colonne entre 1000 et 1100 px de large. */
  --fs-h1:    clamp(2rem, 1.30rem + 3.05vw, 2.875rem);      /* 32 → 46 px */
  --fs-h2:    clamp(1.75rem, 1.36rem + 1.63vw, 2.375rem);   /* 28 → 38 px */
  --fs-h3:    clamp(1.1875rem, 1.11rem + 0.31vw, 1.3125rem);/* 19 → 21 px */
  --fs-h4:    1.0625rem;                                     /* 17 px      */
  --fs-lead:  clamp(1.0313rem, 0.99rem + 0.18vw, 1.125rem);  /* 16,5 → 18 */
  --fs-body:  1rem;                                          /* 16 px      */
  --fs-sm:    0.9375rem;                                     /* 15 px      */
  --fs-xs:    0.8125rem;                                     /* 13 px      */
  --fs-eyebrow: 0.8125rem;

  --lh-h1: 1.10;
  --lh-h2: 1.18;
  --lh-h3: 1.30;
  --lh-body: 1.65;

  --ls-h1: -0.02em;
  --ls-h2: -0.015em;
  --ls-eyebrow: 0.10em;

  /* --- Container (§22) ---------------------------------------------------- */
  --container:      1240px;
  --gutter:         20px;   /* mobile  */
  --gutter-lg:      48px;   /* desktop */

  /* --- Rythme vertical (§22) ---------------------------------------------- */
  --section-y:      clamp(4rem, 2.4rem + 6.6vw, 7.5rem);  /* 64 → 120 px */
  --section-y-sm:   clamp(3rem, 2.0rem + 4.2vw, 5.5rem);  /* 48 →  88 px */
  --stack-xs:       .5rem;
  --stack-sm:       .875rem;
  --stack:          1.25rem;
  --stack-lg:       2rem;
  --stack-xl:       3rem;

  /* --- Formes ------------------------------------------------------------- */
  --r-btn:   12px;   /* §22 : 10 à 14 px */
  --r-card:  20px;   /* §22 : 18 à 22 px */
  --r-field: 10px;
  --r-panel: 24px;
  --r-pill:  999px;

  --h-btn:   54px;   /* §22 : 52 à 56 px */
  --h-field: 52px;   /* §22 */
  --h-header: 80px;  /* §7  : 76 à 82 px */
  --h-header-sm: 64px;

  /* --- Ombres : discrètes, jamais appuyées (§22) -------------------------- */
  --sh-card:   0 1px 2px rgba(41, 51, 47, .04), 0 8px 24px rgba(41, 51, 47, .05);
  --sh-card-h: 0 2px 4px rgba(41, 51, 47, .05), 0 12px 26px rgba(41, 51, 47, .08);
  --sh-panel:  0 4px 12px rgba(41, 51, 47, .06), 0 24px 60px rgba(41, 51, 47, .12);
  --sh-header: 0 1px 0 rgba(41, 51, 47, .07), 0 6px 24px rgba(41, 51, 47, .05);
  --sh-focus:  0 0 0 3px rgba(32, 90, 70, .16);

  /* --- Mouvement (§24) ---------------------------------------------------- */
  --ease-out:  cubic-bezier(.23, 1, .32, 1);   /* décélération franche : l'élément
                                                  répond immédiatement au geste    */
  --t-fast:  140ms var(--ease-out);
  --t-base:  240ms var(--ease-out);
  --t-slow:  320ms var(--ease-out);

  --z-header: 100;
  --z-sticky: 90;
  --z-modal:  200;
  --z-toast:  300;
}

@media (prefers-reduced-motion: reduce) {
  :root { --t-fast: 1ms; --t-base: 1ms; --t-slow: 1ms; }
}