/* ==========================================================================
   RénoConseil — Design tokens
   Source unique de vérité pour la charte. Aucune valeur en dur ailleurs.
   ========================================================================== */

:root {
  /* --- Couleurs de marque ------------------------------------------------ */
  --c-primary:        #173B57;  /* Bleu profond   — titres, boutons, footer   */
  --c-secondary:      #55738A;  /* Bleu ardoise   — textes secondaires        */
  --c-accent:         #91AFC0;  /* Bleu clair     — fonds, badges, hover      */
  --c-mineral:        #F5F7F7;  /* Blanc minéral  — alternance de sections    */
  --c-white:          #FFFFFF;

  /* Fond de page. Le blanc pur est un aplat sans profondeur : les cartes,
     restées en blanc franc, n'ont alors rien d'où se détacher. Ce blanc à
     peine bleuté leur rend un plan d'appui. Le secondaire y tient 4,86:1. */
  --c-page:           #FBFCFD;
  --c-ink:            #202A30;  /* Anthracite     — corps de texte            */

  /* Dérivés — construits à partir des cinq couleurs ci-dessus */
  --c-primary-hover:  #1E4B6E;  /* Éclaircissement discret au survol          */
  --c-primary-press:  #12314A;
  --c-accent-soft:    #EAF0F4;  /* Fond section Aides (dérivé du bleu clair)  */
  --c-accent-softer:  #F4F8FA;

  /* Bande de section. Le blanc minéral nominal ne se détache du blanc que de
     8 % de luminance : neuf sections d'affilée se lisaient comme une seule
     page blanche. Cette variante plus soutenue donne des bandes franches.
     Elle impose la variante teintée du texte secondaire (voir plus bas). */
  --c-mineral-deep:   #E9EEF0;

  /* Fond de la section Aides. Plus franchement bleu que la bande minérale,
     dont il ne se distinguerait plus autrement. */
  --c-accent-band:    #E2ECF3;

  /* Bleu ardoise très légèrement soutenu, réservé aux textes posés sur un
     fond teinté : sur #EAF0F4, le secondaire nominal tombe à 4,34:1, sous
     le seuil AA. Écart invisible à l'œil, conformité rétablie (4,8:1). */
  --c-secondary-tint: #4E6C83;

  /* Bleu clair éclairci, réservé aux petits textes posés sur le bleu profond.
     Le clair nominal y tient 5,05:1 mais s'éteint visuellement en 13 px ;
     cette variante monte à 7,1:1 et redonne du relief à la bande sombre. */
  --c-accent-bright:  #B6CEDB;
  --c-field-border:   #D8E0E5;
  /* Texte indicatif des champs. La valeur précédente (#9AAAB5) plafonnait à
     2,39:1 sur blanc : sous le seuil AA, que Lighthouse ne contrôle pas. */
  --c-field-hint:     #64778A;
  --c-error:          #B3261E;
  --c-success:        #1E6B4F;

  /* Traits — toujours teintés de bleu, jamais de gris neutre */
  --c-border:         rgba(23, 59, 87, .12);
  --c-border-strong:  rgba(23, 59, 87, .20);
  --c-overlay:        rgba(23, 59, 87, .06);

  /* --- Typographie -------------------------------------------------------- */
  --font-title: "Manrope", "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  --font-body:  "Inter", -apple-system, BlinkMacSystemFont, Arial, sans-serif;

  /* Échelle fluide : la valeur mobile et la valeur desktop du cahier des
     charges, reliées en continu plutôt que par paliers. */
  --fs-h1:      clamp(2.375rem, 1.5rem + 3.65vw, 3.5rem);   /* 38 → 56 px */
  --fs-h2:      clamp(1.875rem, 1.32rem + 2.3vw, 2.5rem);   /* 30 → 40 px */
  --fs-h3:      clamp(1.25rem, 1.19rem + .26vw, 1.375rem);  /* 20 → 22 px */
  --fs-h4:      1.0625rem;                                   /* 17 px      */
  --fs-lead:    clamp(1.0625rem, 1.02rem + .19vw, 1.125rem);/* 17 → 18 px */
  --fs-body:    1rem;                                        /* 16 px      */
  --fs-sm:      .9375rem;                                    /* 15 px      */
  --fs-xs:      .8125rem;                                    /* 13 px      */

  --lh-h1: 1.08;
  --lh-h2: 1.15;
  --lh-h3: 1.3;
  --lh-body: 1.6;

  --ls-eyebrow: .09em;  /* Interlettrage des surtitres capitales */

  /* --- Espacements (échelle du cahier des charges) ------------------------ */
  --s-1:  .5rem;   /*  8 px */
  --s-2:  1rem;    /* 16 px */
  --s-3:  1.5rem;  /* 24 px */
  --s-4:  2rem;    /* 32 px */
  --s-5:  3rem;    /* 48 px */
  --s-6:  4rem;    /* 64 px */
  --s-7:  5rem;    /* 80 px */
  --s-8:  6rem;    /* 96 px */

  /* Respiration entre grandes sections : 56–72 mobile, 80–110 desktop */
  --s-section: clamp(3.5rem, 2.1rem + 5.8vw, 6.5rem);

  /* --- Structure ---------------------------------------------------------- */
  --container: 1200px;
  --gutter: clamp(1.25rem, .85rem + 1.7vw, 2rem);  /* 20 → 32 px */
  --header-h: 76px;

  /* --- Rayons ------------------------------------------------------------- */
  --r-card:  12px;
  --r-form:  14px;
  --r-field: 8px;
  --r-btn:   8px;
  --r-pill:  999px;

  /* --- Ombres (teintées bleu, jamais noires) ----------------------------- */
  --sh-xs:   0 1px 2px rgba(23, 59, 87, .06);
  --sh-sm:   0 2px 10px rgba(23, 59, 87, .06);
  --sh-md:   0 8px 30px rgba(23, 59, 87, .08);
  --sh-lg:   0 18px 48px rgba(23, 59, 87, .12);
  /* Carte du formulaire : posée sur une photographie, elle a besoin d'un
     décollement franc. Deux couches — un contact court, une diffusion large. */
  --sh-xl:   0 2px 6px rgba(23, 59, 87, .06), 0 28px 64px rgba(23, 59, 87, .18);
  --sh-focus: 0 0 0 3px rgba(85, 115, 138, .12);

  /* --- Mouvement ---------------------------------------------------------- */
  /* Une seule courbe pour tout le site, franche en sortie : le mouvement
     démarre vite puis se pose. Les courbes natives (ease, ease-out) traînent
     du milieu et donnent l'impression que l'interface répond mollement. */
  --ease-out: cubic-bezier(.23, 1, .32, 1);

  --t-fast: 160ms var(--ease-out);
  --t-base: 240ms var(--ease-out);
  --t-slow: 620ms var(--ease-out);

  --z-header: 100;
  --z-drawer: 200;
  --z-bar:     90;
}