/* ==========================================================================
   LÉA VASSEUR — 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 : fonds clairs -------------------------------------------
     Le site est majoritairement clair et chaleureux : crème et sable, sans
     blanc pur. Le rythme entre sections vient d'un léger changement de
     teinte, jamais d'un blanc froid qui casserait l'ambiance "papier".
     ---------------------------------------------------------------------- */
  --c-cream: #f8f1e4;       /* fond principal */
  --c-sable: #efe3cd;       /* fond secondaire, sections teintées */
  --c-sable-2: #e7d8bc;     /* bordures et filets sur fond clair */
  --c-ivoire: #fbf7ee;      /* cartes claires, champs de formulaire */

  /* --- Couleurs : encre aubergine ----------------------------------------
     Encre profonde utilisée pour le texte, les fonds sombres et les
     titres. Une aubergine chaude plutôt qu'un noir : elle reste incarnée,
     jamais froide ni corporate.
     ---------------------------------------------------------------------- */
  --c-aubergine: #33203a;      /* encre principale — texte, bordures fortes */
  --c-aubergine-2: #241528;    /* aubergine profonde — fonds sombres, header */
  --c-aubergine-3: #1a0f1d;    /* niveau le plus sombre — footer */
  --c-mauve: #8a7690;          /* texte secondaire sur fond clair */
  --c-mauve-soft: #c9b9c7;     /* texte secondaire sur fond sombre */

  /* --- Couleurs : ocre lumineux -------------------------------------------
     Accent vif, réservé aux CTA, soulignés et petites touches. Il ne doit
     jamais devenir une couleur de fond de grande surface : sa force vient
     de sa rareté.
     ---------------------------------------------------------------------- */
  --c-ocre: #dd9a2b;            /* accent principal */
  --c-ocre-dark: #b97918;       /* survol / pressé sur fond clair */
  --c-ocre-soft: #f4d9a0;       /* voiles, badges, fonds très légers */
  --c-ocre-line: rgba(221, 154, 43, 0.35); /* filets décoratifs */

  /* --- Rôles sémantiques --------------------------------------------------- */
  --bg-page: var(--c-cream);
  --bg-tinted: var(--c-sable);
  --bg-dark: var(--c-aubergine-2);
  --bg-darker: var(--c-aubergine-3);

  --text-heading: var(--c-aubergine);
  --text-main: #3d2b43;
  --text-muted: var(--c-mauve);
  --text-on-dark: var(--c-ivoire);
  --text-on-dark-muted: var(--c-mauve-soft);

  --border-light: rgba(51, 32, 58, 0.14);
  --border-dark: rgba(255, 255, 255, 0.12);

  /* --- Typographie ---------------------------------------------------------
     Fraunces (serif display à fort caractère, empattements charnus, très
     vivante) pour les titres et les citations. Work Sans pour le corps de
     texte : nette, humaine, sans être la Inter par défaut.
     ---------------------------------------------------------------------- */
  --font-display: "Fraunces", "Iowan Old Style", Georgia, "Times New Roman", serif;
  --font-body: "Work Sans", -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.75rem, 1.5rem + 6vw, 6rem);
  --fs-h1: clamp(2.15rem, 1.5rem + 3vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 1.35rem + 2vw, 2.75rem);
  --fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem);
  --fs-h4: clamp(1.05rem, 1rem + 0.3vw, 1.2rem);
  --fs-quote: clamp(1.5rem, 1.15rem + 1.6vw, 2.4rem);
  --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.2;
  --lh-body: 1.7;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.18em;
  --ls-nav: 0.08em;

  /* --- 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: 1240px;
  --shell-narrow: 780px;
  --shell-wide: 1440px;
  --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: 22px;        /* la chaleur passe par des formes arrondies */
  --radius-sm: 10px;
  --radius-lg: 32px;

  --shadow-soft: 0 18px 44px -26px rgba(51, 32, 58, 0.35);
  --shadow-lift: 0 30px 60px -28px rgba(51, 32, 58, 0.45);

  /* --- 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;
}

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