/* ==========================================================================
   ÉDEN — Design tokens
   Toutes les valeurs de design du site vivent ici. Changer une variable
   ici se répercute sur l'ensemble des pages.
   ========================================================================== */

:root {
  /* --- Couleurs : neutres ------------------------------------------------
     Le site est intégralement sombre. Le rythme entre sections ne vient pas
     d'une alternance clair / foncé mais de trois niveaux de noir très proches,
     séparés par des filets or. C'est ce qui donne l'effet feutré : aucune
     grande surface claire ne vient casser la continuité.
     ---------------------------------------------------------------------- */
  --c-ink: #0d0d0d;        /* noir profond — niveau 1, fond de page */
  --c-ink-2: #151413;      /* noir légèrement levé — niveau 2 */
  --c-charcoal: #1c1c1c;   /* charbon — cartes et médias */
  --c-charcoal-2: #242424; /* charbon clair — bordures marquées */
  --c-graphite: #2a2a2a;   /* charbon profond — aplats discrets */
  --c-smoke: #8f887c;      /* texte tertiaire — ≥ 4,8:1 sur tous les fonds du site */
  --c-ash: #9a938a;        /* texte secondaire */
  --c-bone: #101010;       /* niveau 1 bis */
  --c-bone-2: #1b1a18;     /* niveau 3 — sections « tinted », légèrement chaud */
  --c-white: #ffffff;

  /* --- Couleurs : or / champagne ----------------------------------------- */
  --c-gold: #d4af5a;       /* accent principal */
  --c-gold-soft: #e4ce95;  /* survol, texte or appuyé */
  /* Tout étant sur fond sombre, l'ancien « or profond » (prévu pour un fond
     clair) n'a plus lieu d'être : il s'aligne sur l'or principal. */
  --c-gold-deep: #d4af5a;
  --c-gold-line: rgba(212, 175, 90, 0.28); /* filets */
  --c-gold-veil: rgba(212, 175, 90, 0.08); /* voiles, fonds très légers */

  /* --- Rôles sémantiques ------------------------------------------------- */
  --bg-page: var(--c-ink);
  --bg-dark: var(--c-ink-2);
  --text-heading: var(--c-white);
  --text-main: #e8e4dd;
  --text-muted: var(--c-ash);
  --text-on-dark: #e8e4dd;
  --text-on-dark-muted: var(--c-ash);
  --border-light: rgba(255, 255, 255, 0.10);
  --border-dark: rgba(255, 255, 255, 0.09);

  /* --- Typographie ------------------------------------------------------- */
  --font-display: "Playfair Display", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Échelle fluide : pas de media query nécessaire pour le texte */
  --fs-display: clamp(2.9rem, 1.6rem + 6.2vw, 6.5rem);
  --fs-h1: clamp(2.25rem, 1.5rem + 3.4vw, 4rem);
  --fs-h2: clamp(1.75rem, 1.3rem + 2.1vw, 2.9rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.7vw, 1.65rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-lead: clamp(1.05rem, 1rem + 0.45vw, 1.3rem);
  --fs-body: 1rem;
  --fs-sm: 0.875rem;
  --fs-xs: 0.75rem;

  --lh-tight: 1.08;
  --lh-title: 1.18;
  --lh-body: 1.75;

  --ls-display: -0.02em;   /* les grandes serif respirent mieux resserrées */
  --ls-eyebrow: 0.22em;    /* surtitres capitales très espacées */
  --ls-nav: 0.14em;

  /* --- Espacement (échelle 4px) ------------------------------------------ */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 0.75rem;
  --sp-4: 1rem;
  --sp-5: 1.5rem;
  --sp-6: 2rem;
  --sp-7: 2.5rem;
  --sp-8: 3rem;
  --sp-9: 4rem;
  --sp-10: 5rem;
  --sp-11: 6.5rem;
  --sp-12: 8rem;

  /* Rythme vertical des sections : fluide */
  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);
  --section-y-sm: clamp(3rem, 2rem + 4vw, 5.5rem);

  /* --- Grille / gouttières ----------------------------------------------- */
  --shell-max: 1280px;
  --shell-narrow: 860px;
  --shell-wide: 1560px;
  --shell-pad: clamp(1.25rem, 0.5rem + 3.5vw, 4rem);
  --gutter: clamp(1.25rem, 0.75rem + 2vw, 2.75rem);

  /* --- Chrome ------------------------------------------------------------ */
  /* Bandeau « modèle de démonstration ». Mettre à 0px le supprime du calcul
     de position du header et des hero — utile si on retire le bandeau. */
  --banner-h: 34px;
  --header-h: 84px;
  --radius: 2px;           /* quasi nul : le luxe est anguleux, pas arrondi */
  --radius-lg: 3px;

  --shadow-soft: 0 18px 50px -28px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 30px 70px -30px rgba(0, 0, 0, 0.55);

  /* --- Mouvement --------------------------------------------------------- */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 220ms;
  --dur: 420ms;
  --dur-slow: 900ms;

  --z-header: 100;
  --z-menu: 110;
  --z-lightbox: 200;
}

@media (min-width: 768px) {
  :root {
    --fs-body: 1.0625rem;
    --banner-h: 38px;
    --header-h: 96px;
  }
}