/* ── Road2Luxe — tokens.css ────────────────────────────────────
   Source de vérité : variables CSS extraites de la §11 CLAUDE.md.
   Règle absolue : --r2l-flamingo = CTA/action uniquement, jamais décoratif.
   L'or est banni. Le kaki est parcimonieux.
   ──────────────────────────────────────────────────────────────── */

:root {

  /* ── COULEURS SÉMANTIQUES ──────────────────────────────── */

  /* Action (CTA uniquement — rare = impact) */
  --r2l-flamingo:      #F55F2A;

  /* Structure & sections sombres */
  --r2l-charbon:       #2C282A;

  /* Texte courant (rampe Terre) */
  --r2l-terre-corps:   #6A5A52;   /* corps sur fond clair — meilleur contraste WCAG */
  --r2l-terre-sec:     #8B7355;   /* secondaire, méta, caption */

  /* Fonds & bordures (sables — du plus clair au plus soutenu) */
  --r2l-sable-0:       #FAF9F6;
  --r2l-sable-1:       #F7F3EE;
  --r2l-sable-2:       #F2EDEA;
  --r2l-sable-3:       #EDE6DB;
  --r2l-sable-4:       #E2D8D2;

  /* Accent information (parcimonieux) */
  --r2l-kaki:          #6B7C5A;

  /* Blanc pur (texte sur fond sombre) */
  --r2l-blanc:         #FFFFFF;

  /* ── TYPOGRAPHIES ─────────────────────────────────────── */

  --r2l-font-titres:  "Cabinet Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r2l-font-corps:   "Satoshi", system-ui, -apple-system, "Segoe UI", sans-serif;
  --r2l-font-accent:  "Cormorant Garamond", "Georgia", serif;  /* rare, éditorial */

  /* ── ÉCHELLE TYPOGRAPHIQUE (clamp fluid desktop→mobile) ── */

  /* Signature — Cabinet italic, le seul moment "statement" */
  --r2l-text-signature:   clamp(2.5rem, 5vw, 3.75rem);   /* 40–60px */
  --r2l-fw-signature:     600;

  /* Titres hiérarchiques */
  --r2l-text-h1:          clamp(2.125rem, 4vw, 3rem);     /* 34–48px */
  --r2l-fw-h1:            600;

  --r2l-text-h2:          clamp(1.625rem, 3vw, 2.125rem); /* 26–34px */
  --r2l-fw-h2:            500;

  --r2l-text-h3:          clamp(1.125rem, 1.8vw, 1.3125rem); /* 18–21px */
  --r2l-fw-h3:            500;

  /* Titre de section — fiche voyage/circuit (dédié, distinct de --r2l-text-h2).
     Unifie galerie/programme/inclus/niveau/motos/faq/similaires/avis (fiche).
     Cabinet weight 700, roman. Exceptions hors token : hero h1, date départ,
     signature « Jamais seul » (cf. fiche.css). */
  --r2l-fiche-titre:      clamp(30px, 4vw, 46px);

  /* ── SURFACES FICHE (voyage + circuit) ──────────────────────────
     3 surfaces, pas 13 fonds. Le conteneur .r2l-main porte un sable
     de base continu (dégradé quasi imperceptible) ; les sections claires
     deviennent transparentes (relief = cartes) ; les 4 sections sombres
     prennent le même noir profond plat. Couleur de jonction des coutures
     = #F4EEE8 (bas du dégradé de base). */
     Rampe tonale CONTINUE sur la surface claire HAUTE (réassurance→inclus) :
     blanc cassé en haut → sable profond juste avant la galerie noire. Bornes
     en tokens, ajustables à l'œil. Surface basse calme = --r2l-fond-haut. */
  --r2l-fond-haut:        #FAF9F6;   /* blanc cassé — haut de rampe + base */
  --r2l-fond-bas:         #E6DDD0;   /* sable profond — bas de l'inclus, juste avant le noir */
  --r2l-fond-bas-doux:    #EFE8DD;   /* nuance discrète — bas de la surface basse (avis→similaires) */
  --r2l-fiche-dark:       #0c0a09;   /* ancre sombre unifiée */

  /* Labels & eyebrows */
  --r2l-text-eyebrow:     0.75rem;   /* 12px — UPPERCASE, letter-spacing .22em */
  --r2l-ls-eyebrow:       0.22em;
  --r2l-fw-eyebrow:       700;

  /* Corps */
  --r2l-text-corps:       1.0625rem; /* 17px */
  --r2l-lh-corps:         1.68;

  /* Méta / caption */
  --r2l-text-meta:        0.875rem;  /* 14px */
  --r2l-text-caption:     0.8125rem; /* 13px */
  --r2l-lh-meta:          1.5;

  /* ── ACCENT ÉDITORIAL DE TITRE ──────────────────────────── */
  /* Fond clair → Terre sec. Surcharge fonds sombres → #C2A98F via contexte parent. */
  /* Règle absolue : Flamingo = CTA uniquement, jamais accent éditorial. */
  --r2l-accent-titre: var(--r2l-terre-sec);   /* #8B7355 sur fond clair */

  /* ── RYTHME VERTICAL ─────────────────────────────────────── */
  /* La respiration appartient à la surface, pas à la section.   */
  /* Surface continue (même fond) → padding au bord, intra entre */
  /* voisines. Bord clair→ancre sombre → rythme-bord côté clair. */
  --r2l-rythme-intra: clamp(48px, 7vw, 80px);    /* 2 sections d'un même fond */
  --r2l-rythme-inter: clamp(72px, 11vw, 128px);  /* section autonome           */
  --r2l-rythme-bord:  clamp(40px, 6vw, 60px);    /* clair → ancre sombre       */

  /* ── CONTAINER / GOUTTIÈRE ───────────────────────────────── */
  /* Token sémantique — toutes les sections passent par .r2l-container. */
  --r2l-container: 1200px;
  --r2l-gutter:    clamp(20px, 5vw, 64px);

  /* ── TOKENS CARDS ─────────────────────────────────────────── */
  /* Rayon, padding, ratio photo et ombre homogènes              */
  /* sur toutes les cards (Nos voyages, Avis). Ratio = 4:3.      */
  --r2l-card-radius: 12px;
  --r2l-card-pad:    20px;
  --r2l-card-ratio:  4 / 3;
  --r2l-card-shadow: 0 1px 2px rgba(44,40,42,.04), 0 8px 24px rgba(44,40,42,.06);

  /* ── PARALLAXE ────────────────────────────────────────────── */
  --r2l-ease-parallax: cubic-bezier(.2,.7,.2,1);

  /* ── ESPACEMENT (grille 8px) ─────────────────────────── */

  --r2l-s-1:   0.5rem;    /* 8px */
  --r2l-s-2:   1rem;      /* 16px */
  --r2l-s-3:   1.5rem;    /* 24px */
  --r2l-s-4:   2rem;      /* 32px */
  --r2l-s-6:   3rem;      /* 48px */
  --r2l-s-8:   4rem;      /* 64px */
  --r2l-s-12:  6rem;      /* 96px  — rythme inter-sections bas */
  --r2l-s-16:  8rem;      /* 128px — rythme inter-sections haut */

  /* Conteneur — standard unique : CONTENU à 1200, gutter HORS du cap.
     La boîte vaut donc 1200 + 2×gutter (clampée par le viewport en dessous),
     et le padding-inline gutter ramène le contenu pile à 1200 (edges ~120/1320
     @1440). Tout consommateur de --r2l-container-max + --r2l-container-pad
     (.r2l-container, .r2l-avis__inner, .r2l-signature__content…) hérite du modèle. */
  --r2l-container-max:  calc(var(--r2l-container) + 2 * var(--r2l-gutter));
  --r2l-container-pad:  var(--r2l-gutter);

  /* ── BORDURES & RAYONS ───────────────────────────────── */

  --r2l-radius-sm:  4px;
  --r2l-radius-md:  8px;
  --r2l-radius-lg:  16px;
  --r2l-radius-xl:  24px;

  /* ── OMBRES ───────────────────────────────────────────── */

  --r2l-shadow-card:  0 2px 8px rgba(44,40,42,.07), 0 8px 24px rgba(44,40,42,.06);
  --r2l-shadow-hover: 0 4px 16px rgba(44,40,42,.10), 0 16px 40px rgba(44,40,42,.09);

  /* ── TRANSITIONS ─────────────────────────────────────── */

  --r2l-ease:          cubic-bezier(.25,.1,.25,1);
  --r2l-transition-sm: 150ms var(--r2l-ease);
  --r2l-transition-md: 250ms var(--r2l-ease);

  /* ── MOUVEMENT / ANIMATIONS ──────────────────────────── */

  /* Brique partagée — IO reveal + draw-on. Ne pas dupliquer par section. */
  --r2l-ease-reveal:   cubic-bezier(.2,.7,.2,1);   /* entrée au scroll */
  --r2l-ease-draw:     cubic-bezier(.4,0,.1,1);    /* tracé SVG */
  --r2l-dur-reveal:    .7s;
  --r2l-dur-draw:      1.6s;
  --r2l-stagger:       .08s;

  /* ── HEADER ──────────────────────────────────────────── */

  /* Référence pour padding-top .r2l-main et calculs de positionnement */
  --r2l-header-height: 72px;

  /* ── OVERLAYS SIGNATURE ──────────────────────────────── */

  /* Voile dégradé pour la signature atmosphérique */
  --r2l-voile-signature:
    linear-gradient(
      to bottom,
      transparent 0%,
      rgba(44,40,42,.55) 50%,
      rgba(44,40,42,.92) 100%
    );

  /* Version section intermédiaire */
  --r2l-voile-hero:
    linear-gradient(
      to bottom,
      rgba(44,40,42,.15) 0%,
      rgba(44,40,42,.65) 100%
    );
}