/*
  La Maison du Barman — Tokens production 1920
  Référence desktop normale : 1920 × 1080, sans ancien cap intermédiaire.
  Les valeurs desktop sont pensées pour un layout full-width 1920, puis
  réduites proprement par responsive.css.
*/
@font-face {
  font-family: "Neue Haas Display";
  src:
    url("../assets/fonts/NeueHaasDisplay-Light.woff2") format("woff2"),
    url("../assets/fonts/NeueHaasDisplay-Light.woff") format("woff");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Couleurs — low-key cinema */
  --color-bg-main: #050403;
  --color-bg-soft: #0b0906;
  --color-black-rich: #11100c;
  --color-bg-stone: #11100c;

  --color-text-ivory: #e8dccb;
  --color-text-main: rgba(232, 220, 203, .84);
  --color-text-muted: rgba(184, 170, 150, .72);
  --color-text-muted-mobile: rgba(232, 220, 203, .76);
  --color-text-subtle: rgba(143, 129, 112, .58);

  --color-gold-main: #b88645;
  --color-gold-light: #d6a866;
  --color-gold-muted: rgba(184, 134, 69, .52);
  --color-line-bronze: #6e4824;
  --color-border-gold: rgba(110, 72, 36, .72);
  --color-rule-gold: rgba(110, 72, 36, .56);
  --color-hover-gold: #d6a866;

  --color-overlay-black: rgba(5, 4, 3, .72);
  --color-overlay-black-soft: rgba(5, 4, 3, .62);
  --color-overlay-black-strong: rgba(5, 4, 3, .84);
  --color-vignette-dark: rgba(0, 0, 0, .86);

  --color-amber-bitter: #b75a16;
  --color-copper-burnt: #8a4a1e;
  --color-amaro-red: #5c1e14;
  --color-velvet-green: #18302d;
  --color-smoke-glass: #a89b8e;

  --color-cta: #b88645;
  --color-cta-text: #e8dccb;
  --color-focus-ring: #d6a866;
  --color-focus-bg: rgba(214, 168, 102, .13);
  --color-halo-amber: rgba(214, 168, 102, .12);
  --color-shadow-warm: rgba(138, 74, 30, .28);

  /* Typographies */
  --font-logo: Didot, "Didot LT STD", "Bodoni 72", "Bodoni Moda", "Canela", "Editorial New", Georgia, serif;
  --font-serif-display: "Cormorant Garamond", Didot, "Bodoni 72", "Bodoni Moda", "Playfair Display", "Libre Baskerville", Georgia, serif;
  --font-serif-accent: Didot, "Bodoni 72", "Bodoni Moda", "Cormorant Garamond", Georgia, serif;
  --font-sans: "Neue Haas Display", Inter, "Helvetica Neue", Arial, sans-serif;
  --font-label: "Neue Haas Display", Inter, "Helvetica Neue", Arial, sans-serif;

  --font-hero-title: var(--font-serif-display);
  --font-section-title: var(--font-serif-display);
  --font-card-title: var(--font-serif-display);
  --font-label-ui: var(--font-label);
  --font-body: var(--font-sans);
  --font-micro: var(--font-sans);
  --font-cta: var(--font-label);
  --font-card-index: var(--font-serif-display);
  --font-signature-title: var(--font-label);
  --font-footer: var(--font-sans);

  /* Typographie — référence 1920 */
  --type-hero-size-ref: clamp(64px, 4.8vw, 92px);
  --type-hero-line: .94;
  --type-hero-tracking: .055em;
  --type-hero-weight: 500;

  --type-section-title-ref: clamp(34px, 2.05vw, 40px);
  --type-section-title-line: 1.02;
  --type-section-title-tracking: .075em;
  --type-section-title-weight: 500;

  --type-card-title-ref: clamp(24px, 1.65vw, 32px);
  --type-card-title-line: 1.02;
  --type-card-title-tracking: .012em;
  --type-card-title-weight: 500;

  --type-label-ref: clamp(16px, .68vw, 15px);
  --type-label-line: 1.35;
  --type-label-tracking: .24em;
  --type-label-weight: 500;

  --type-body-ref: clamp(14px, .94vw, 18px);
  --type-body-line: 1.7;
  --type-body-tracking: .01em;
  --type-body-weight: 300;

  --type-micro-ref: clamp(10px, .68vw, 13px);
  --type-micro-line: 1.5;
  --type-micro-tracking: .06em;
  --type-micro-weight: 400;

  --type-cta-ref: clamp(10px, .68vw, 13px);
  --type-cta-line: 1.1;
  --type-cta-tracking: .19em;
  --type-cta-weight: 600;

  --type-card-index-ref: clamp(18px, 1.25vw, 24px);
  --type-card-index-line: 1;
  --type-card-index-tracking: .04em;
  --type-card-index-weight: 400;

  --type-signature-title-ref: clamp(11px, .78vw, 15px);
  --type-signature-title-line: 1.22;
  --type-signature-title-tracking: .16em;
  --type-signature-title-weight: 500;

  --type-footer-ref: clamp(9px, .58vw, 11px);
  --type-footer-line: 1.4;
  --type-footer-tracking: .16em;
  --type-footer-weight: 400;

  /* Grille 1920 */
  --layout-source-width: 1920px;
  --layout-source-height: 3000px;
  --layout-viewport-ref: 1080px;
  --layout-frame-max: 1920px;
  --frame-max: 1920px;
  --container-main-ref: 1760px;
  --space-page-margin-ref: clamp(56px, 4.17vw, 80px);
  --space-page-margin-fluid: clamp(44px, 5vw, 96px);
  --space-section-pad-x: var(--space-page-margin-ref);
  --space-section-pad-x-tablet: 32px;
  --space-section-pad-x-mobile: 20px;

  --space-section-tight: 12px;
  --space-section-md: clamp(56px, 4.7vw, 90px);
  --space-section-lg: clamp(72px, 6.25vw, 120px);
  --space-card-gap-ref: clamp(8px, .62vw, 12px);
  --space-card-gap-mobile: 18px;
  --space-card-pad-x: clamp(16px, 1.05vw, 20px);
  --space-card-pad-y: clamp(18px, 1.15vw, 22px);
  --space-button-x: clamp(24px, 1.65vw, 32px);
  --space-button-y: clamp(13px, .9vw, 17px);
  --space-tablet-gutter: 32px;
  --space-mobile-gutter: 20px;
  --space-mobile-stack: 32px;
  --space-scroll-snap-gap: 18px;

  /* Sections — desktop 1920 */
  --hero-h-ref: 1080px;
  --hero-h-fluid: clamp(760px, 45.75vw, 1080px);
  --hero-h-mobile: 720px;
  --intro-h-ref: clamp(320px, 21.35vw, 410px);
  --signatures-panel-w-ref: min(calc(100% - (2 * var(--space-page-margin-ref))), 1676px);
  --signatures-panel-h-ref: clamp(400px, 26.04vw, 465px);
  --collection-title-h-ref: clamp(100px, 7.03vw, 135px);
  --collection-cards-w-ref: min(calc(100% - (2 * var(--space-page-margin-ref))), 1800px);
  --collection-cards-h-ref: clamp(390px, 26.56vw, 510px);
  --invitation-h-ref: clamp(344px, 77.02vw, 250px);
  --footer-h-ref: clamp(84px, 5.99vw, 115px);

  --card-h-ref: clamp(380px, 25.78vw, 495px);
  --card-image-h-ref: clamp(180px, 12.5vw, 240px);
  --card-w-mobile: min(72vw, 260px);
  --ratio-card-image: 7 / 8;

  --cta-header-w-ref: clamp(270px, 18.23vw, 350px);
  --cta-header-h-ref: clamp(52px, 3.44vw, 66px);
  --cta-hero-w-ref: clamp(255px, 16.67vw, 320px);
  --cta-hero-h-ref: clamp(48px, 3.13vw, 60px);


  /* Texture globale — appliquée partout sauf hero */
  --texture-page-size: 100% auto;
  --texture-page-size-tablet: 1440px auto;
  --texture-page-size-mobile: 1120px auto;
  --texture-page-overlay-top: rgba(5, 4, 3, .08);
  --texture-page-overlay-bottom: rgba(5, 4, 3, .20);
  --texture-panel-veil: rgba(232, 220, 203, .035);
  --texture-panel-smoke: rgba(5, 4, 3, .18);

  /* Bordures et ornements */
  --line-hairline: 1px;
  --line-opacity-low: .42;
  --line-opacity-mid: .56;
  --line-opacity-high: .66;
  --border-panel: var(--line-hairline) solid rgba(110, 72, 36, .74);
  --border-card: var(--line-hairline) solid rgba(110, 72, 36, .78);
  --border-cta: var(--line-hairline) solid rgba(184, 134, 69, .72);
  --border-focus: 2px solid var(--color-focus-ring);
  --radius-card: 2px;
  --radius-button: 2px;
  --radius-panel: 32px;
  --ornament-corner-size: clamp(18px, 1.46vw, 28px);
  --ornament-circle-icon: clamp(64px, 4.8vw, 92px);
  --ornament-circle-icon-mobile: 48px;
  --ornament-icon-stroke: 1.1px;

  /* Profondeur */
  --shadow-cinema-main: 0 34px 120px rgba(0, 0, 0, .78);
  --shadow-card-inner: inset 0 -120px 86px rgba(0, 0, 0, .64);
  --shadow-cta-hover: 0 18px 42px rgba(138, 74, 30, .24);
  --overlay-image-black: rgba(5, 4, 3, .64);
  --overlay-amber-soft: rgba(214, 168, 102, .12);
  --vignette-radial: radial-gradient(circle at 50% 45%, rgba(0, 0, 0, 0) 0 34%, rgba(0, 0, 0, .68) 76%, rgba(0, 0, 0, .88) 100%);
  --grain-opacity: .026;
  --texture-bg-opacity: .07;
  --button-gold-glow: rgba(214, 168, 102, .16);
  --halo-important: rgba(214, 168, 102, .12);
  --text-darkening-zone: rgba(5, 4, 3, .68);

  /* Motion */
  --motion-duration-fade: 900ms;
  --motion-duration-section: 950ms;
  --motion-duration-card-hover: 600ms;
  --motion-duration-button: 280ms;
  --motion-ease-premium: cubic-bezier(.22, 1, .36, 1);
  --motion-parallax-y-max: 18px;
  --motion-stagger-sm: 80ms;
  --motion-stagger-md: 120ms;
  --motion-reduced-duration: 1ms;
  --motion-mobile-parallax: 0px;
  --motion-card-hover-scale: 1.035;

  /* Breakpoints */
  --bp-mobile: 600px;
  --bp-tablet-portrait: 768px;
  --bp-tablet-landscape: 1024px;
  --bp-laptop: 1200px;
  --bp-desktop: 1600px;
  --bp-desktop-ref: 1920px;

  /* Accessibilité / états */
  --state-hover-gold: var(--color-hover-gold);
  --state-hover-bg: rgba(214, 168, 102, .08);
  --state-focus-ring: 2px solid var(--color-focus-ring);
  --state-focus-offset: 4px;
  --state-active-press-y: 1px;
  --state-active-opacity: .86;
  --state-tap-bg: rgba(214, 168, 102, .12);
  --state-card-active-border: rgba(214, 168, 102, .72);
  --state-video-button: rgba(184, 134, 69, .68);
  --modal-bg: rgba(8, 6, 4, .94);
  --modal-overlay: rgba(0, 0, 0, .84);
  --modal-close-size: 44px;
  --snap-type: x mandatory;
  --snap-align: start;
  --tap-target-min: 44px;
  --scroll-margin-anchor: 96px;
  --z-base: 1;
  --z-content: 2;
  --z-header: 20;
  --z-modal: 80;
}