/* ==========================================================================
   Design tokens

   COULEURS — reprises telles quelles de la DA W-ibo (wibo-consult.ch).
   Ne pas modifier : c'est le lien de marque entre les deux sites.

   TOUT LE RESTE — typographie, grille, rythme, mouvement — est propre à
   Fiduciaire en ligne. Le système repose sur une idée : la comptabilité
   est un registre, donc la page se lit en lignes alignées, pas en cartes.
   ========================================================================== */

:root {
  /* ---- Couleurs de marque (W-ibo) ---- */
  --navy: #1B3060;
  --navy-dark: #0D1E3D;
  --navy-light: #243D78;

  --gold: #B5924C;
  --gold-light: #C9A85C;
  --gold-dark: #9A7B3A;
  --gold-pale: #F5E8CC;
  --gold-text: #806328;   /* or assombri : texte sur fond clair, contraste AA */

  --cream: #F5F3EE;
  --white: #FFFFFF;
  --text: #2C2C2C;
  --muted: #5c6370;

  --navy-rgb: 27, 48, 96;
  --navy-dark-rgb: 13, 30, 61;
  --gold-rgb: 181, 146, 76;
  --white-rgb: 255, 255, 255;

  /* ---- Typographie ---- */
  --font-display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Échelle : rapport constant, bornée par clamp pour tenir sur mobile */
  --t-hero: clamp(2.75rem, 6.4vw, 5.75rem);
  --t-h1: clamp(2.35rem, 5vw, 4.25rem);
  --t-h2: clamp(1.9rem, 3.4vw, 2.95rem);
  --t-h3: clamp(1.15rem, 1.6vw, 1.4rem);
  --t-lead: clamp(1.02rem, 1.25vw, 1.18rem);
  --t-body: 1rem;
  --t-small: 0.875rem;
  --t-label: 0.6875rem;

  --track-display: -0.035em;   /* le display est toujours serré */
  --track-label: 0.16em;

  /* ---- Grille ---- */
  --max-w: 1320px;
  --gutter: 40px;
  --col-gap: 28px;
  --index-w: 200px;            /* colonne d'index à gauche des sections */

  --nav-h: 76px;
  --section-pad: 128px;

  /* ---- Espacements ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 14px;
  --s-4: 22px;
  --s-5: 34px;
  --s-6: 52px;
  --s-7: 78px;
  --s-8: 112px;

  /* ---- Traits ---- */
  --hair: 1px solid rgba(var(--navy-rgb), 0.14);
  --hair-gold: 1px solid rgba(var(--gold-rgb), 0.32);
  --hair-dark: 1px solid rgba(var(--white-rgb), 0.12);

  /* ---- Ombres : discrètes, le système repose sur le trait ---- */
  --shadow-sm: 0 1px 2px rgba(var(--navy-rgb), 0.05);
  --shadow-md: 0 10px 34px rgba(var(--navy-rgb), 0.09);
  --shadow-lg: 0 26px 70px rgba(var(--navy-rgb), 0.14);

  /* ---- Mouvement ---- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 0.18s;
  --dur: 0.34s;
  --dur-slow: 0.8s;

  /* ---- Empilement ---- */
  --z-base: 1;
  --z-sticky: 20;
  --z-nav: 40;
  --z-overlay: 60;
  --z-top: 80;
}

@media (max-width: 1100px) {
  :root {
    --section-pad: 88px;
    --gutter: 28px;
    --index-w: 148px;
  }
}

@media (max-width: 767px) {
  :root {
    --section-pad: 64px;
    --gutter: 20px;
    --nav-h: 66px;
    --col-gap: 18px;
  }
}