@font-face {
  font-family: "LMDB Didot Logo";
  src: url("../assets/fonts/Didot.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/*
  La Maison du Barman — Ateliers Cocktail Paris
  Étape 1 : tokens globaux pour une page mère claire, premium, Apple luxe 3.0.
  Les valeurs structurelles majeures doivent rester centralisées ici.
*/

:root {
  /* -------------------------------------------------------------------------- */
  /* Couleurs — direction claire, ivoire, noir premium, bronze champagne          */
  /* -------------------------------------------------------------------------- */

  --color-bg: #f5f1ec;
  --color-bg-soft: #fbf8f4;
  --color-bg-warm: #efe7dc;
  --color-surface: #ffffff;
  --color-surface-soft: rgba(255, 255, 255, 0.82);
  --color-surface-muted: #f8f4ee;

  --color-text-primary: #171717;
  --color-text-secondary: #000;
  --color-text-muted: #6f6760;
  --color-text-subtle: #92877d;
  --color-text-inverse: #fffaf4;

  --color-line: #dccfc1;
  --color-line-soft: rgba(177, 138, 90, 0.5);
  --color-line-strong: rgba(177, 138, 90, 0.42);

  --color-accent-bronze: #b18a5a;
  --color-accent-bronze-dark: #8a6943;
  --color-accent-champagne: #d8c4a7;
  --color-accent-soft: rgba(177, 138, 90, 0.12);

  --color-hero-dark: #0c0907;
  --color-button-dark: #111113;
  --color-button-dark-hover: #000000;
  --color-focus-ring: #8a6943;
  --color-focus-bg: rgba(177, 138, 90, 0.14);

  /* -------------------------------------------------------------------------- */
  /* Typographies — éditoriale display + sans moderne sobre                      */
  /* -------------------------------------------------------------------------- */

  --font-logo:  Didot, "Didot LT STD", "Bodoni 72", "Bodoni Moda", Canela, "Editorial New", Georgia, serif;
  --font-display:  Didot, Canela, "Cormorant Garamond", Fraunces, "Playfair Display", Georgia, serif;
  --font-body: "Neue Haas Display", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-ui: "Neue Haas Display", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-kicker: var(--font-ui);
  --font-button: var(--font-ui);

  --type-display-weight: 800;
  --type-body-weight: 400;
  --type-ui-weight: 500;

  --type-hero-size: clamp(76px, 5.55vw, 112px);
  --type-hero-line: 0.95;
  --type-hero-tracking: -0.035em;

  --type-section-title-size: clamp(42px, 3.3vw, 64px);
  --type-section-title-line: 1.02;
  --type-section-title-tracking: -0.025em;

  --type-card-title-size: clamp(24px, 1.55vw, 30px);
  --type-card-title-line: 1.12;
  --type-card-title-tracking: -0.018em;

  --type-body-size: 17px;
  --type-body-line: 1.65;
  --type-body-tracking: -0.006em;

  --type-small-size: 14px;
  --type-small-line: 1.5;
  --type-micro-size: 12px;
  --type-micro-line: 1.35;

  --type-kicker-size: 12px;
  --type-kicker-line: 1.3;
  --type-kicker-tracking: 0.14em;
  --type-kicker-weight: 600;

  --type-button-size: 13px;
  --type-button-line: 1;
  --type-button-tracking: 0.12em;
  --type-button-weight: 700;

  /* -------------------------------------------------------------------------- */
  /* Grilles, containers et baseline                                             */
  /* -------------------------------------------------------------------------- */

  --layout-source-width: 862px;
  --layout-source-height: 1824px;
  --layout-production-width: 1920px;
  --layout-production-height: 4063px;
  --layout-first-viewport-height: 1080px;
  --layout-scale-source-to-1920: 2.227378;

  --container-desktop: 1760px;
  --margin-desktop: 80px;
  --grid-desktop-columns: 12;
  --grid-desktop-gutter: 20px;

  --container-tablet: 928px;
  --margin-tablet: 48px;
  --grid-tablet-columns: 8;
  --grid-tablet-gutter: 16px;

  --container-mobile: 342px;
  --margin-mobile: 24px;
  --grid-mobile-columns: 4;
  --grid-mobile-gutter: 12px;

  --baseline: 8px;

  /* -------------------------------------------------------------------------- */
  /* Découpage desktop normalisé 1920                                            */
  /* -------------------------------------------------------------------------- */

  --section-hero-y: 0px;
  --section-hero-h: 960px;
  --section-trust-y: 960px;
  --section-trust-h: 120px;
  --section-cards-y: 1080px;
  --section-cards-h: 1000px;
  --section-venues-y: 2060px;
  --section-venues-h: 760px;
  --section-benefits-y: 2820px;
  --section-benefits-h: 420px;
  --section-reservation-y: 3240px;
  --section-reservation-h: 580px;
  --section-footer-y: 3820px;
  --section-footer-h: 243px;

  /* -------------------------------------------------------------------------- */
  /* Espacements                                                                 */
  /* -------------------------------------------------------------------------- */

  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 80px;
  --space-5xl: 112px;
  --space-6xl: 144px;

  --section-pad-x-desktop: var(--margin-desktop);
  --section-pad-x-tablet: var(--margin-tablet);
  --section-pad-x-mobile: var(--margin-mobile);

  /* -------------------------------------------------------------------------- */
  /* Cards, boutons, surfaces                                                    */
  /* -------------------------------------------------------------------------- */

  --card-w-desktop: 336px;
  --card-gap-desktop: 20px;
  --card-radius: 12px;
  --button-radius: 10px;
  --pill-radius: 999px;
  --media-radius: 10px;

  --button-h-desktop: 56px;
  --button-pad-x: 28px;
  --button-pad-y: 18px;
  --tap-target-min: 44px;

  --border-subtle: 1px solid var(--color-line-soft);
  --border-strong: 1px solid var(--color-line-strong);

  --shadow-card: 0 6px 20px rgba(0, 0, 0, 0.06);
  --shadow-card-hover: 0 12px 32px rgba(0, 0, 0, 0.12);
  --shadow-button: 0 2px 8px rgba(0, 0, 0, 0.10);
  --shadow-media: 0 18px 48px rgba(34, 25, 18, 0.12);

  /* -------------------------------------------------------------------------- */
  /* Motion — préparé pour GSAP, sans usage à l'étape 1                          */
  /* -------------------------------------------------------------------------- */

  --motion-duration-fast: 180ms;
  --motion-duration: 320ms;
  --motion-duration-slow: 720ms;
  --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion-hover-y: -3px;
  --motion-reduced-duration: 1ms;

  /* -------------------------------------------------------------------------- */
  /* Breakpoints                                                                 */
  /* -------------------------------------------------------------------------- */

  --bp-mobile: 390px;
  --bp-mobile-max: 767px;
  --bp-tablet-min: 768px;
  --bp-tablet-max: 1439px;
  --bp-desktop-min: 1440px;
  --bp-production: 1920px;

  /* -------------------------------------------------------------------------- */
  /* États et accessibilité                                                      */
  /* -------------------------------------------------------------------------- */

  --focus-ring: 2px solid var(--color-focus-ring);
  --focus-offset: 4px;
  --focus-shadow: 0 0 0 4px var(--color-focus-bg);
  --state-hover-surface: rgba(255, 255, 255, 0.74);
  --state-active-opacity: 0.78;
  --scroll-margin-anchor: 96px;
}