/* ============================================
   TRIKROMI — Design Tokens
   Échelle CONFORTABLE (testée plein écran).
   vw réduits + plafonds bas pour ne jamais surdimensionner.
   ============================================ */

:root {
  --color-black: #000000;
  --color-white: #ffffff;
  --color-bg: #ffffff;
  --color-text-grey: #595959;
  --color-light-grey: #ececec;
  --color-placeholder: #d9d9d9;
  --color-footer-bg: #111111;
  --color-faded: rgba(0, 0, 0, 0.22);
  --color-list-grey: #868686;

  --font-body: 'Inter', -apple-system, Roboto, Helvetica, sans-serif;
  --font-display: 'Almarai', -apple-system, Roboto, Helvetica, sans-serif;

  /* Tailles de texte — plafonds nettement abaissés */
  --fs-hero-footer: clamp(40px, 5vw, 90px);
  --fs-hero-page:   clamp(56px, 23vw, 350px);   /* Figma: 444px à 1920px = 23.125vw ; plafonné à 350 pour confort */
  --fs-contact:     clamp(32px, 4.48vw, 86px);  /* Figma: 86px à 1920px (Votre projet, parlons-en) */
  --fs-statement:   clamp(22px, 2vw, 34px);
  --fs-service:     clamp(18px, 1.6vw, 28px);
  --fs-service-num: clamp(20px, 1.7vw, 30px);
  --fs-intro:       clamp(22px, 2.4vw, 46px);   /* Figma: 46px à 1920px (intro "Nous concevons...") */
  --fs-medium:      clamp(18px, 1.77vw, 34px);  /* Figma: 34px à 1920px (texte feature sous image) */
  --fs-body:        clamp(14px, 0.9vw, 17px);
  --fs-section-title: clamp(20px, 1.5vw, 28px);
  --fs-small:       clamp(13px, 0.85vw, 16px);
  --fs-tiny:        13px;

  --container-max: 1834px;
  --page-margin: 60px;          /* légère marge latérale globale (toutes pages) */
  --radius-sm: 8px;
  --radius-md: 25px;
  --radius-lg: 35px;
  --radius-xl: 53px;

  /* ----- Rythme vertical : espacements de sections (mesurés sur la maquette Figma, base 1920) ----- */
  --space-section-lg:     clamp(70px, 8.7vw, 167px);   /* image du haut → bloc/titre suivant */
  --space-section:        clamp(62px, 7.7vw, 148px);   /* entre 2 grandes sections */
  --space-block-pad:      clamp(46px, 5vw, 96px);      /* padding interne des blocs sombres */
  --space-before-contact: clamp(50px, 5.83vw, 112px);  /* dernier bloc → contact */
  --space-before-footer:  clamp(140px, 20.31vw, 390px); /* contact → footer (maquette : 390px) */

  /* ----- Mesures maquette (page Creativ, base 1920) — partagées par les pages service ----- */
  --space-hero-top:    calc(99px + clamp(70px, 7.6vw, 146px)); /* header(fixe) dégagé + 146px de gap */
  --space-feature-media: clamp(70px, 8.3vw, 160px);   /* texte "feature" → image en dessous */
  --intro-pad-left:    clamp(40px, 21.1vw, 406px);    /* bord gauche → bloc (01) */
  --intro-pad-right:   clamp(40px, 23.4vw, 450px);    /* bloc droit → bord droit */
  --intro-gap:         clamp(40px, 18.75vw, 360px);   /* écart entre les 2 colonnes */
}