/* ============================================================
   YODLYNCI — Design tokens
   Source : variables nommées du Figma DOf9KbCyWjES1vZXrFzvvI
            + computed styles du site live (yodlynci.com)
   Les noms de couleur sont ceux de la charte Figma.
   ============================================================ */
:root {
  /* ---------- Charte ---------- */
  --c-navy: #051a2f;        /* Black Pearl     — fond hero/header, titres, CTA */
  --c-orange: #ff8f27;      /* Sunshade        — logo, accents, carte SEO */
  --c-red: #ff4f3f;         /* Sunset Orange   — eyebrows, carte Stratégie */
  --c-violet: #9d89fc;      /* Heliotrope      — panneau Content, carte Communication */
  --c-lime: #e9fa49;        /* Golden Fizz     — carte Sites web, cartes stats */
  --c-green: #1cb785;       /* Mountain Meadow — carte Applications */
  --c-blue-pale: #c8ddf1;   /* Link Water      — titre CTA, cartes témoignage */
  --c-zircon: #f9fcff;      /* Zircon */
  --c-white: #ffffff;
  --c-card-bg: #f5faff;     /* fond des cartes logos clients */

  /* Dérivées */
  --c-testimonial-bg: rgba(200, 221, 241, 0.3);
  --c-navy-50: rgba(5, 26, 47, 0.5);
  --c-white-50: rgba(255, 255, 255, 0.5);
  --c-white-80: rgba(255, 255, 255, 0.8);

  /* ---------- Typographie ---------- */
  --f-display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --f-sans: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Anton, toujours en capitales */
  --fs-h1: 100px;      --lh-h1: 115px;    --ls-h1: -2px;
  --fs-h1-alt: 80px;   --lh-h1-alt: 80px;                 /* CTA et Content */
  --fs-h2: 80px;       --lh-h2: 83.2px;   --ls-h2: -1.5px;
  --fs-h3: 68px;       --lh-h3: 74.8px;   --ls-h3: -1px;
  --fs-h4: 40px;       --lh-h4: 52px;
  --fs-h5: 28px;       --lh-h5: 39.2px;                   /* eyebrows, FAQ, titres de carte */

  /* DM Sans */
  --fs-lead: 18px;     --lh-lead: 30.6px;                 /* nav, boutons, paragraphes de section */
  --fs-stat: 40px;     --lh-stat: 44px;                   /* chiffres des cartes */
  --fs-h6: 32px;       --lh-h6: 35.2px;                   /* stats du hero */
  --fs-body: 16px;     --lh-body: 27.2px;
  --fs-sm: 14px;       --lh-sm: 23.8px;
  --fs-xs: 14px;       --lh-xs: 22.4px;

  /* ---------- Layout ---------- */
  --container: 1280px;       /* Work, Service, Why, Méthode, Témoignages, FAQ */
  --container-sm: 1140px;    /* Hero, Content (max-width Figma : 1219) */
  --pad-x: 30px;
  --pad-x-mobile: 20px;
  --header-h: 78px;

  /* ---------- Rayons ---------- */
  --r-panel: 40px;
  --r-card: 32px;
  --r-pill: 100px;
  --r-btn: 25px;

  /* ---------- Espacements nommés (Figma) ---------- */
  --sp-8: 8px;    --sp-10: 10px;  --sp-15: 15px;  --sp-17: 17px;
  --sp-24: 24px;  --sp-51: 51px;  --sp-60: 60px;  --sp-80: 80px;
  --sp-112: 112px;

  /* ---------- Animations ---------- */
  --mq-clients: 100px;                                  /* marquee : 100 px/s vers la gauche */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

@media (max-width: 991px) {
  :root {
    --fs-h1: 72px;      --lh-h1: 82.8px;   --ls-h1: -2px;
    --fs-h1-alt: 56px;  --lh-h1-alt: 60px;
    --fs-h2: 56px;      --lh-h2: 60px;     --ls-h2: -1px;
    --fs-h3: 48px;      --lh-h3: 54px;
    --fs-h4: 32px;      --lh-h4: 42px;
    --fs-h5: 24px;      --lh-h5: 33px;
    --fs-h6: 26px;      --lh-h6: 30px;
    --header-h: 65px;
  }
}

@media (max-width: 767px) {
  :root {
    --fs-h1: 38px;      --lh-h1: 43.7px;   --ls-h1: -1px;
    --fs-h1-alt: 34px;  --lh-h1-alt: 38px;
    --fs-h2: 36px;      --lh-h2: 40px;     --ls-h2: -0.5px;
    --fs-h3: 32px;      --lh-h3: 36px;
    --fs-h4: 26px;      --lh-h4: 34px;
    --fs-h5: 20px;      --lh-h5: 28px;
    --fs-h6: 22px;      --lh-h6: 26px;
    --fs-lead: 16px;    --lh-lead: 27px;
    --fs-stat: 32px;    --lh-stat: 36px;
    --pad-x: var(--pad-x-mobile);
    --header-h: 82px;
    --r-panel: 24px;
    --r-card: 24px;
  }
}