/* ==========================================================================
   LienSerein — variables.css
   Jetons de design globaux (design tokens).
   Source : charte graphique LienSerein v1.
   Unique source de vérité pour les couleurs, la typographie, les espacements,
   les rayons et les ombres. Aucune valeur « en dur » ailleurs dans le CSS.
   ========================================================================== */

:root {

  /* ----------------------------------------------------------------------
     1. COULEURS DE MARQUE
     Socle froid rassurant (canard) + secondaire végétale (sauge)
     + accent chaud dosé (vieux rose). Règle d'usage : 60 / 30 / 10.
     ---------------------------------------------------------------------- */

  /* Bleu canard — primaire · confiance */
  --canard:        #3E6B6E;   /* boutons, titres, navigation */
  --canard-deep:   #2C4F52;   /* chrome, texte sur clair, footer */
  --canard-soft:   #5A8A8D;   /* survols, focus */
  --canard-wash:   #E4ECEC;   /* fond très clair */

  /* Vert sauge — secondaire · équilibre */
  --sauge:         #8A9A5B;
  --sauge-deep:    #6E7D45;   /* texte sauge sur clair (grands titres) */
  --sauge-wash:    #EDF0E2;

  /* Rose franc — accent · douceur (minoritaire)
     Retravaillé : saturé et lumineux, évite le côté marron/mauve grisé */
  --rose:          #D4778A;
  --rose-deep:     #BF5E71;   /* survol / texte accent */
  --rose-wash:     #F9E8EC;

  /* Doré — accent chaud (rappel de l'oiseau du logo) */
  --or:            #C9BA6B;
  --or-deep:       #A98934;   /* survol / texte doré sur clair */
  --or-wash:       #F6EEDA;

  /* ----------------------------------------------------------------------
     2. NEUTRES CHAUDS
     ---------------------------------------------------------------------- */
  --encre:         #2A2723;   /* texte principal */
  --taupe-fonce:   #6F6757;   /* texte secondaire */
  --taupe:         #B0A48F;   /* bordures fortes, légendes */
  --greige:        #E3DDD0;   /* séparateurs, fonds doux */
  --creme:         #F4F1EA;   /* fond de page */
  --blanc:         #FBFAF7;   /* surfaces, cartes */
  --blanc-pur:     #FFFFFF;

  /* ----------------------------------------------------------------------
     3. BORDURES
     ---------------------------------------------------------------------- */
  --bd-soft:       #E0D9CC;   /* hairline 1px — séparateurs internes */
  --bd-strong:     #C9BFAC;   /* 1.5px — champs, cartes accentuées */
  --bd-focus:      var(--canard);

  /* ----------------------------------------------------------------------
     4. RÔLES SÉMANTIQUES
     On référence ces alias dans le CSS plutôt que les couleurs brutes.
     ---------------------------------------------------------------------- */
  --bg:            var(--creme);
  --bg-alt:        var(--blanc);
  --surface:       var(--blanc);
  --text:          var(--encre);
  --text-soft:     var(--taupe-fonce);
  --text-invert:   #F2F6F5;
  --primary:       var(--canard);
  --primary-deep:  var(--canard-deep);
  --accent:        var(--rose);
  --accent-deep:   var(--rose-deep);

  /* ----------------------------------------------------------------------
     5. TYPOGRAPHIE
     Newsreader (display/titres — serif chaleureux, « f » apaisé) ·
     Figtree (corps/interface) · Space Mono (étiquettes)
     ---------------------------------------------------------------------- */
  --f-disp: "Newsreader", Georgia, "Times New Roman", serif;
  --f-body: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --f-mono: "Space Mono", ui-monospace, "SFMono-Regular", monospace;

  /* Échelle typographique fluide */
  --fs-display: clamp(2rem, 4vw, 3rem);    /* H1 hero */
  --fs-h1:      clamp(2rem, 3vw, 1.5rem);     /* H1 page */
  --fs-h2:      clamp(1.7rem, 3vw, 2rem);
  --fs-h3:      clamp(1.3rem, 2vw, 1.55rem);
  --fs-h4:      1.15rem;
  --fs-lead:    1.18rem;
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-label:   1.1rem;

  --lh-tight:   1.08;
  --lh-snug:    1.3;
  --lh-body:    1.65;

  /* ----------------------------------------------------------------------
     6. ESPACEMENT (base 4px)
     ---------------------------------------------------------------------- */
  --s1:  4px;
  --s2:  8px;
  --s3:  12px;
  --s4:  16px;
  --s5:  24px;
  --s6:  32px;
  --s7:  48px;
  --s8:  64px;
  --s9:  96px;
  --s10: 128px;

 /* Rythme vertical des grandes sections */
--section-y: clamp(var(--s6), 6vw, var(--s8));

  /* ----------------------------------------------------------------------
     7. LARGEURS / GRILLE
     ---------------------------------------------------------------------- */
  --maxw:      1160px;   /* conteneur large */
  --maxw-narrow: 920px;  /* conteneur intermédiaire */
  --read:      680px;    /* longueur de lecture confortable */
  --gutter:    clamp(var(--s4), 5vw, var(--s8));  /* marges latérales */

  /* ----------------------------------------------------------------------
     8. RAYONS D'ANGLE
     ---------------------------------------------------------------------- */
  --r-xs:   4px;    /* tags, puces */
  --r-sm:   8px;    /* boutons, champs */
  --r-md:   14px;   /* cartes */
  --r-lg:   24px;   /* panneaux, images */
  --r-xl:   32px;   /* hero, grands visuels */
  --r-pill: 999px;  /* badges, boutons pill */

  /* ----------------------------------------------------------------------
     9. OMBRES (teintées encre, douces — jamais de noir dur)
     ---------------------------------------------------------------------- */
  --sh-sm: 0 1px 2px rgba(42,39,35,.06), 0 1px 1px rgba(42,39,35,.04);
  --sh-md: 0 4px 16px rgba(42,39,35,.08);
  --sh-lg: 0 14px 36px rgba(42,39,35,.11);

  /* ----------------------------------------------------------------------
     10. DIVERS
     ---------------------------------------------------------------------- */
  --header-h:   90px;            /* hauteur de l'en-tête sticky */
  --transition: .18s ease;
  --transition-slow: .35s ease;
}