/* =========================================================
   Daumas Miletto — Design tokens
   Toutes les valeurs de la direction artistique validée.
   À enregistrer dans Elementor : Réglages du site → Couleurs / Polices / Variables CSS.
   ========================================================= */

:root {
  /* ---------- Couleurs ---------- */
  --dm-ink:         #11171c;   /* fond sombre / texte principal sur clair */
  --dm-slate:       #37474f;   /* texte secondaire */
  --dm-mineral:     #2c3e50;   /* bleu minéral — boutons "minimal" */
  --dm-paper:       #f5f4f5;   /* fond clair / texte sur sombre */
  --dm-bone:        #e8e3d8;   /* fond crème — sections paires */
  --dm-stone:       #e0e0e0;
  --dm-champagne:   #b8a48c;   /* accent doré — CTA, soulignés, chiffres */
  --dm-champpale:   #d2c5b1;   /* accent clair sur fond sombre */

  --dm-rule:        rgba(255,255,255,0.10);
  --dm-rule-light:  #d4cfc4;
  --dm-rule-soft:   #e6e1d6;

  --dm-overlay-dark:  rgba(17,23,28,0.55);
  --dm-overlay-vague: rgba(17,23,28,0.20);

  /* ---------- Typographie ---------- */
  --dm-font-serif:  'Cormorant Garamond', 'Times New Roman', serif;
  --dm-font-sans:   'Inter', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --dm-font-mono:   'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* échelle fluide (clamp) — desktop ↔ mobile sans media-query */
  --dm-h1: clamp(48px, 9vw, 172px);   /* hero monumental */
  --dm-h2: clamp(36px, 6vw, 96px);    /* titres de section */
  --dm-h3: clamp(28px, 3.6vw, 52px);  /* sous-titres */
  --dm-h4: clamp(22px, 2.2vw, 32px);  /* item gros */
  --dm-lead: clamp(17px, 1.5vw, 24px);
  --dm-body: 16px;
  --dm-small: 13.5px;
  --dm-meta: 10.5px;    /* mono — chapitres, surtitres */

  --dm-lh-tight: 0.98;
  --dm-lh-snug: 1.15;
  --dm-lh-body: 1.75;
  --dm-tracking-meta: 0.28em;
  --dm-tracking-btn:  0.26em;

  /* ---------- Espacement (8pt) ---------- */
  --dm-sp-4xs: 4px;
  --dm-sp-3xs: 8px;
  --dm-sp-2xs: 12px;
  --dm-sp-xs:  16px;
  --dm-sp-s:   24px;
  --dm-sp-m:   32px;
  --dm-sp-l:   48px;
  --dm-sp-xl:  64px;
  --dm-sp-2xl: 96px;
  --dm-sp-3xl: 140px;
  --dm-sp-4xl: 200px;

  /* Padding latéral du site — change toute la grille */
  --dm-gutter:    clamp(20px, 5vw, 80px);
  --dm-section-y: clamp(80px, 11vw, 160px);

  --dm-maxw: 1440px;

  /* ---------- Motion ---------- */
  --dm-ease-out: cubic-bezier(.2,.7,.3,1);
  --dm-ease-in-out: cubic-bezier(.65,.05,.36,1);
  --dm-dur-fast: .25s;
  --dm-dur-med:  .45s;
  --dm-dur-slow: .9s;

  /* ---------- Header ---------- */
  --dm-header-h: 88px;
  --dm-header-meta-h: 36px;

  /* ---------- Z-index ---------- */
  --dm-z-nav:     30;
  --dm-z-overlay: 40;
  --dm-z-modal:   50;
}

@media (max-width: 860px) {
  :root {
    --dm-header-h: 64px;
    --dm-header-meta-h: 28px;
    --dm-section-y: clamp(60px, 14vw, 96px);
  }
}

/* Accessibilité — désactive les animations si l'utilisateur le demande */
@media (prefers-reduced-motion: reduce) {
  :root {
    --dm-dur-fast: 0s;
    --dm-dur-med:  0s;
    --dm-dur-slow: 0s;
  }
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
  }
}