/* ==========================================================================
   Œuvra — thème WordPress · tokens.css
   Copie de handoff/design/tokens.css (source des valeurs, ne pas modifier ici sans
   nouvelle version du handoff) + vocabulaire bb-* du contrat BimBeau (en fin du 1er :root).
   Lu par inc/design-system.php (défauts) : aucun jeton n’est éditable (DA figée).
   ========================================================================== */

/* ==========================================================================
   Œuvra — site vitrine · tokens.css
   Source unique des valeurs. Direction 3a « Parme fumé » (DS Œuvra) + tokens site.
   Desktop-first : les valeurs de base sont celles du Desktop (référence 1440),
   les blocs @media redéfinissent uniquement ce qui change par niveau.

   Niveaux (breakpoints)
     Desktop  ≥ 1440 px   artboard de référence 1440
     Laptop   1024–1439   artboard de référence 1280
     Tablette  768–1023   artboard de référence 768
     Mobile    < 768      artboard de référence 390 (tenue vérifiée à 360)
   ========================================================================== */

:root {
  /* ---------- Couleurs (DS Œuvra 3a) ---------- */
  --bg-page: #f3f2ef;
  --bg-surface: #ffffff;
  --bg-beige: #f7f4ee;
  --bg-overlay: #1e1d1b8c;
  --glass-surface: #ffffffb8;
  --glass-surface-strong: #ffffffe0;
  --glass-border: #ffffff99;
  --glass-dark: #1e1d1b99;
  --ink-900: #1e1d1b;
  --ink-700: #3a3a3a;
  --ink-500: #6e6a63;
  --ink-inverse: #ffffff;
  --border-100: #e2dfd9;
  --border-strong: #6e6a63;
  --border-focus: #4a3580;
  --action: #e8503a;
  --action-strong: #cc412c;   /* fond des boutons primaires : blanc dessus = 4,8:1 (P06, 24/09) */
  --action-tint: #fbeae7;
  --action-ink: #a83a2a;
  --brand-100: #e4dcf3;
  --brand-300: #b9a6de;
  --brand-ink: #4a3580;
  --status-valid: #1f9d55;
  --status-valid-ink: #1f7744;
  --status-valid-tint: #e3f3ea;
  --status-progress: #e5a11b;
  --status-progress-ink: #8b661b;
  --status-progress-tint: #fcf3e3;
  --status-pending: #6e6a63;
  --lot-1: #2fa3e8;
  --lot-2: #f0702a;
  --lot-3: #e07bdc;
  --lot-4: #f0d533;
  --lot-5: #1fa83a;
  --lot-6: #e23a5a;
  --lot-1-tint: #d5edfa;
  --lot-2-tint: #fce2d4;
  --lot-3-tint: #f9e5f8;
  --lot-4-tint: #fcf7d6;
  --lot-5-tint: #d2eed8;
  --lot-6-tint: #f9d8de;

  /* ---------- Espacements (échelle DS, seule échelle autorisée) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-32: 128px;

  /* ---------- Rayons ---------- */
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 10px;
  --radius-xl: 16px;
  --radius-full: 999px;

  /* ---------- Ombres (rares) ---------- */
  --shadow-sm: 0 1px 2px #1e1d1b0f;
  --shadow-md: 0 4px 12px #1e1d1b14, 0 0 0 1px #e2dfd9;
  --shadow-lg: 0 16px 40px #1e1d1b1f;
  --shadow-focus: 0 0 0 2px #ffffff, 0 0 0 4px #4a3580;

  /* ---------- Contrôles & icônes ---------- */
  --control-sm: 32px;
  --control-md: 40px;
  --control-lg: 48px;
  --nav-height: 56px;          /* DS (app) — le site utilise --site-nav-h */
  --icon-sm: 16px;
  --icon-md: 20px;
  --icon-lg: 24px;
  --hairline: 1px;

  /* ---------- Mouvement ---------- */
  --duration-fast: 150ms;
  --duration-base: 250ms;
  --duration-slow: 450ms;
  --duration-reveal: 700ms;
  --ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --ease-enter: cubic-bezier(0, 0, 0.2, 1);
  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.3, 0.5, 1);   /* indicateur de la barre d’ancres */

  /* ---------- Matières ---------- */
  --gradient-parme: linear-gradient(160deg, #e4dcf3 0%, #f3f2ef 100%);
  --gradient-brand: linear-gradient(160deg, #e4dcf3 0%, #b9a6de 100%);
  --gradient-vermillon: linear-gradient(135deg, #e8503a 0%, #b9a6de 100%);
  --gradient-glow: radial-gradient(60% 60% at 30% 20%, #e8503a3d 0%, #e8503a00 70%);
  --blur-glass: 16px;
  --blur-glass-strong: 24px;
  --blur-reveal: 8px;
  --grain-opacity: 0.07;
  --grain-opacity-strong: 0.14;
  --motif-opacity: 0.35;

  /* ---------- Police ---------- */
  --font-sans: "Sora", "Sora Variable", system-ui, -apple-system, "Segoe UI", sans-serif;

  /* ======================================================================
     TOKENS SITE — mise en page
     ====================================================================== */
  --page-ref: 1440px;          /* largeur de référence Desktop */
  --container: 1200px;         /* largeur max du contenu (conteneur) */
  --content: 720px;            /* colonne de lecture (texte courant) */
  --gutter: 64px;              /* marge latérale minimale ; à 1440 la marge réelle vaut 120 */
  --grid-cols: 12;
  --grid-gap: 24px;            /* gouttière des grilles de cartes */
  --split-gap: 64px;           /* écart texte ↔ média dans une section « split » */
  --site-nav-h: 72px;          /* hauteur de la barre de navigation */

  /* rythme vertical */
  --section-y: 96px;           /* padding haut/bas d’une section standard */
  --section-y-compact: 64px;   /* sections denses (Accueil, Fonctionnalités) */
  --hero-top: 152px;           /* = nav 72 + 80 */
  --hero-bottom: 96px;
  --cta-top: 64px;
  --cta-bottom: 112px;
  --footer-top: 128px;
  --footer-bottom: 44px;
  --head-gap: 48px;            /* en-tête de section → contenu */

  /* ======================================================================
     TOKENS SITE — typographie (Sora ; Light 300 ≥ 28 px, accent 600)
     taille / interlignage ; l’approche est la même à chaque niveau
     ====================================================================== */
  --fs-display: 64px;  --lh-display: 70px;    /* hero Accueil */
  --fs-h1: 54px;       --lh-h1: 60px;         /* hero de page centré / Fonctionnalités */
  --fs-h1c: 46px;      --lh-h1c: 50px;        /* hero de page avec média (split) */
  --fs-h2: 46px;       --lh-h2: 52px;         /* titre de section */
  --fs-h2s: 40px;      --lh-h2s: 46px;        /* titre de section en colonne étroite */
  --fs-h3: 32px;       --lh-h3: 38px;         /* titre Light de panneau / carte éditoriale */
  --fs-title-xl: 32px; --lh-title-xl: 38px;   /* 600 — étapes du fil (Fonctionnalités) */
  --fs-title-lg: 24px; --lh-title-lg: 30px;   /* 600 — nom d’offre, carte module */
  --fs-title: 22px;    --lh-title: 28px;      /* 600 — titre de bloc / carte */
  --fs-title-sm: 19px; --lh-title-sm: 26px;   /* 600 — petite carte */
  --fs-lead-hero: 18px; --lh-lead-hero: 30px; /* chapô de hero */
  --fs-lead: 17px;     --lh-lead: 28px;       /* chapô de section */
  --fs-body-lg: 16px;  --lh-body-lg: 26px;    /* description de fonctionnalité */
  --fs-body: 15px;     --lh-body: 24px;       /* texte courant */
  --fs-small: 14px;    --lh-small: 22px;      /* texte secondaire multi-lignes */
  --fs-note: 14px;     --lh-note: 20px;       /* note d’une ligne (« Sans carte bancaire. ») */
  --fs-link: 17px;     --lh-link: 24px;       /* lien-flèche éditorial */
  --fs-price: 48px;    --lh-price: 52px;      /* prix des offres */

  /* ======================================================================
     VOCABULAIRE BIMBEAU (contrat v0.1 §2) — pointe vers les valeurs Œuvra.
     Valeurs littérales là où inc/design-system.php et inc/setup.php les lisent.
     ====================================================================== */
  --bb-color-bg: #f3f2ef;       /* = --bg-page (theme-color du navigateur) */
  --bb-color-ink: #1e1d1b;      /* = --ink-900 */
  --bb-color-line: #e2dfd9;     /* = --border-100 */
  --bb-color-brand: #4a3580;    /* = --brand-ink */
  --bb-color-accent: #e8503a;   /* = --action */
  --bb-font-display: var(--font-sans);
  --bb-font-body: var(--font-sans);
  --bb-text-sm: 14px;
  --bb-text-md: 15px;
  --bb-text-lg: 17px;
  --bb-text-xl: var(--fs-h3);
  --bb-text-2xl: var(--fs-h1);
  --bb-space-xs: var(--space-2);
  --bb-space-sm: var(--space-4);
  --bb-space-md: var(--gutter);
  --bb-space-lg: var(--space-12);
  --bb-space-xl: var(--space-24);
  --bb-radius-sm: var(--radius-sm);
  --bb-radius-md: var(--radius-xl);
  --bb-width-content: var(--content);
  --bb-width-container: var(--container);
}

/* ---------- Laptop : 1024–1439 (référence 1280) ---------- */
@media (max-width: 1439px) {
  :root {
    --gutter: 64px;
    --split-gap: 48px;
    --section-y: 80px;
    --section-y-compact: 56px;
    --hero-top: 136px;
    --hero-bottom: 80px;
    --cta-top: 56px;
    --cta-bottom: 96px;
    --footer-top: 112px;
    --footer-bottom: 40px;
    --head-gap: 40px;
    --fs-display: 56px;  --lh-display: 62px;
    --fs-h1: 48px;       --lh-h1: 54px;
    --fs-h1c: 42px;      --lh-h1c: 46px;
    --fs-h2: 42px;       --lh-h2: 48px;
    --fs-h2s: 36px;      --lh-h2s: 42px;
    --fs-h3: 30px;       --lh-h3: 36px;
    --fs-title-xl: 28px; --lh-title-xl: 34px;
  }
}

/* ---------- Tablette : 768–1023 (référence 768) ---------- */
@media (max-width: 1023px) {
  :root {
    --gutter: 40px;
    --grid-gap: 20px;
    --split-gap: 40px;
    --site-nav-h: 64px;
    --section-y: 72px;
    --section-y-compact: 56px;
    --hero-top: 120px;
    --hero-bottom: 72px;
    --cta-top: 48px;
    --cta-bottom: 80px;
    --footer-top: 88px;
    --footer-bottom: 40px;
    --head-gap: 40px;
    --fs-display: 48px;  --lh-display: 54px;
    --fs-h1: 44px;       --lh-h1: 50px;
    --fs-h1c: 42px;      --lh-h1c: 46px;
    --fs-h2: 38px;       --lh-h2: 44px;
    --fs-h2s: 34px;      --lh-h2s: 40px;
    --fs-h3: 28px;       --lh-h3: 34px;
    --fs-title-xl: 26px; --lh-title-xl: 32px;
    --fs-title-lg: 22px; --lh-title-lg: 28px;
    --fs-title: 20px;    --lh-title: 26px;
    --fs-title-sm: 18px; --lh-title-sm: 24px;
    --fs-lead-hero: 17px; --lh-lead-hero: 28px;
    --fs-price: 44px;    --lh-price: 48px;
  }
}

/* ---------- Mobile : < 768 (référence 390) ---------- */
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --grid-gap: 16px;
    --split-gap: 32px;
    --site-nav-h: 60px;
    --section-y: 56px;
    --section-y-compact: 48px;
    --hero-top: 96px;
    --hero-bottom: 56px;
    --cta-top: 40px;
    --cta-bottom: 64px;
    --footer-top: 64px;
    --footer-bottom: 32px;
    --head-gap: 32px;
    --fs-display: 38px;  --lh-display: 44px;
    --fs-h1: 36px;       --lh-h1: 42px;
    --fs-h1c: 34px;      --lh-h1c: 40px;
    --fs-h2: 30px;       --lh-h2: 36px;
    --fs-h2s: 28px;      --lh-h2s: 34px;
    --fs-h3: 28px;       --lh-h3: 34px;
    --fs-title-xl: 24px; --lh-title-xl: 30px;
    --fs-title-lg: 20px; --lh-title-lg: 26px;
    --fs-title: 19px;    --lh-title: 26px;
    --fs-title-sm: 17px; --lh-title-sm: 24px;
    --fs-lead-hero: 16px; --lh-lead-hero: 26px;
    --fs-lead: 16px;     --lh-lead: 26px;
    --fs-body-lg: 15px;  --lh-body-lg: 24px;
    --fs-link: 16px;     --lh-link: 24px;
    --fs-price: 40px;    --lh-price: 44px;
  }
}