/* ==========================================================================
   IÉNA Capital — Design System
   01 · Tokens
   --------------------------------------------------------------------------
   Source unique de vérité du système. Aucune valeur brute (couleur, taille,
   espacement) ne doit apparaître ailleurs que dans ce fichier : les autres
   feuilles ne consomment que des variables.
   ========================================================================== */

:root {

  /* ------------------------------------------------------------------------
     Couleur
     Palette volontairement courte : une encre, trois gris de texte, un bleu
     d'accent, un gris de surface. Pas de couleur décorative.
     ---------------------------------------------------------------------- */

  /* Encre & textes */
  --color-ink:            #0A0A0A;  /* titres, texte principal, filets forts */
  --color-ink-secondary:  #3A3E42;  /* paragraphes de second plan */
  --color-ink-tertiary:   #4A4E52;  /* mentions légales du pied de page */
  --color-ink-muted:      #8A8D91;  /* index de section, libellés, méta */

  /* Accent — un seul, utilisé avec parcimonie (liens survolés, focus, pas de méthode) */
  --color-accent:         #3F5C77;

  /* Marine du logo. La seule couleur de marque, et le seul endroit du site où
     elle paraît : le monogramme. Ne jamais l'employer pour un aplat, un bouton
     ou un titre, sous peine de faire du site une charte à deux couleurs. */
  --color-brand:          #17314A;

  /* Surfaces */
  --color-surface:        #FFFFFF;  /* fond de page */
  --color-surface-sunken: #F2F2F2;  /* encart d'avertissement */

  /* Filets */
  --color-rule:           #F2F2F2;  /* séparation courante entre sections */
  --color-rule-strong:    #0A0A0A;  /* ouverture de chapitre, pied de page */
  --color-rule-link:      #C9CCCF;  /* soulignement des liens au repos */

  /* États */
  --color-focus:          #3F5C77;
  --color-selection:      rgba(63, 92, 119, .14);


  /* ------------------------------------------------------------------------
     Typographie
     Une seule famille (Archivo), trois graisses, pas d'italique.
     ---------------------------------------------------------------------- */

  --font-sans: 'Archivo', system-ui, -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;

  --weight-regular:  400;
  --weight-medium:   500;  /* toute la hiérarchie de titres */
  --weight-semibold: 600;

  /* Échelle de corps — les grands niveaux sont fluides (clamp) */
  --text-meta:      13px;                      /* index, libellés, méta */
  --text-legal:     13.5px;                    /* mentions du pied de page */
  --text-body:      16.5px;                    /* corps de référence */
  --text-body-lg:   17px;                      /* chiffre clé, lien de tête */
  --text-intro:     18px;                      /* chapeau de section */
  --text-title-xs:  20px;                      /* titre de liste (domaines) */
  --text-lead:      clamp(17px, 1.7vw, 20px);  /* chapeau de couverture */
  --text-title-sm:  clamp(21px, 2.4vw, 27px);  /* étape de la méthode */
  --text-title:     clamp(24px, 3vw, 34px);    /* titre de section */
  --text-display:   clamp(30px, 5.4vw, 62px);  /* titre de couverture */

  /* Interlignes — plus le corps est grand, plus l'interligne est serré */
  --leading-display: 1.06;
  --leading-title:   1.15;
  --leading-legal:   1.55;
  --leading-body:    1.6;

  /* Approches */
  --tracking-display:      -0.03em;
  --tracking-title:        -0.025em;
  --tracking-title-xs:     -0.02em;
  --tracking-eyebrow:      .06em;   /* signature de tête */
  --tracking-eyebrow-wide: .08em;   /* intertitres du pied de page */

  /* Longueurs de ligne (justesse de lecture) */
  --measure-display: 24ch;
  --measure-tight:   52ch;
  --measure-snug:    54ch;
  --measure-base:    56ch;
  --measure-wide:    60ch;
  --measure-widest:  62ch;


  /* ------------------------------------------------------------------------
     Espacement — échelle de base 2px, restreinte aux pas réellement utilisés.
     Nommée par sa valeur : lecture immédiate en revue de code.
     ---------------------------------------------------------------------- */

  --space-4:  4px;
  --space-6:  6px;
  --space-8:  8px;
  --space-12: 12px;
  --space-14: 14px;
  --space-16: 16px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-32: 32px;
  --space-34: 34px;
  --space-48: 48px;
  --space-66: 66px;
  --space-80: 80px;


  /* ------------------------------------------------------------------------
     Mise en page
     ---------------------------------------------------------------------- */

  --container-max:   1180px;
  --page-gutter:     28px;
  --page-gutter-sm:  20px;   /* sous le point de rupture md */

  --grid-columns:    12;
  --grid-gap:        var(--space-24);

  --section-pad-top:    var(--space-34);
  --section-pad-bottom: var(--space-66);

  --rule-width:      1px;

  /* Gabarits fixes */
  --logo-size:       26px;
  --step-col:        52px;   /* colonne du numéro d'étape */
  --contact-col-min: 180px;  /* colonne minimale du bloc contact */
  --footer-col-min:  240px;  /* colonne minimale du pied de page */

  /* Divers */
  --focus-ring-width:  2px;
  --focus-ring-offset: 3px;
  --scroll-margin:     40px;

  /* Point de rupture unique : 900px.
     CSS n'accepte pas les variables en media query — la valeur est répétée
     littéralement dans layout.css et components.css. Toute modification doit
     y être reportée. */
}