/*
  Layout production — référence desktop 1920 × 1080.
  Objectif : page complète full-width 1920, sans ancien cap intermédiaire, sans assets imposés.
*/

body {
  background: var(--color-bg-main);
  overflow-x: hidden;
}
p{
	letter-spacing: 0.062em;
}
.page-shell {
  position: relative;
  isolation: isolate;

  inline-size: min(100%, var(--layout-frame-max));
  max-inline-size: var(--layout-frame-max);
  min-block-size: 100vh;
  margin-inline: auto;
  overflow: hidden;

  background-color: var(--color-bg-main);

  /* La texture est déplacée dans ::before pour ne filtrer que le fond */
  background-image: none;
}

.page-shell::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;

  background-image:
    linear-gradient(
      180deg,
      rgba(118, 124, 130, 0.10),
      rgba(88, 94, 102, 0.12)
    ),
    radial-gradient(
      120% 88% at 50% 42%,
      rgba(0, 0, 0, 0) 32%,
      rgba(0, 0, 0, 0.10) 58%,
      rgba(0, 0, 0, 0.20) 76%,
      rgba(0, 0, 0, 0.32) 100%
    ),
    linear-gradient(
      180deg,
      rgba(6, 8, 12, 0.11) 0%,
      rgba(0, 0, 0, 0.16) 58%,
      rgba(0, 0, 0, 0.23) 100%
    ),
    linear-gradient(
      180deg,
      var(--texture-page-overlay-top),
      var(--texture-page-overlay-bottom)
    ),
    image-set(
      url("../assets/textures/bg-stone-page.avif") type("image/avif"),
      url("../assets/textures/bg-stone-page.webp") type("image/webp"),
      url("../assets/textures/bg-stone-page.jpg") type("image/jpeg")
    );

  background-size:
    auto,
    auto,
    auto,
    auto,
    var(--texture-page-size);

  background-position:
    center top,
    center center,
    center top,
    center top,
    center top;

  background-repeat:
    no-repeat,
    no-repeat,
    no-repeat,
    no-repeat,
    repeat-y;

  filter: saturate(1.06) contrast(1.09) brightness(0.3) sepia(0.015);

  transform: scale(1.015);
  transform-origin: center top;
}
.site-main { position: relative; }
[data-section] { position: relative; scroll-margin-block-start: var(--scroll-margin-anchor); }

/* Header */
.site-header {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--z-header);
  block-size: clamp(128px, 8.85vw, 170px);
  pointer-events: none;
}

.site-header__frame {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
}

.brand {
  position: absolute;
  inset-inline-start: var(--space-page-margin-ref);
  inset-block-start: clamp(44px, 3.02vw, 58px);
  inline-size: clamp(320px, 22.4vw, 430px);
  pointer-events: auto;
}

.site-header__actions {
  position: absolute;
  inset-inline-end: var(--space-page-margin-ref);
  inset-block-start: clamp(42px, 2.92vw, 56px);
  inline-size: var(--cta-header-w-ref);
  block-size: var(--cta-header-h-ref);
  pointer-events: auto;
}

.button--header { inline-size: 100%; block-size: 100%; }

/* Hero */
.hero {
  min-block-size: var(--hero-h-fluid);
  block-size: var(--hero-h-fluid);
  overflow: hidden;
  background: var(--color-bg-main);
}

.hero__media,
.hero__overlay,
.hero__vignette,
.hero__ornament {
  position: absolute;
  inset: 0;
}

.hero__media {
  z-index: 0;
  overflow: hidden;
  background: var(--color-bg-main);
}

.hero__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  object-position: 58% 54%;
  pointer-events: none;
}

.asset-slot { display: block; inline-size: 100%; block-size: 100%; pointer-events: none; }

.hero__asset-slot {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    radial-gradient(circle at 70% 42%, rgba(183, 90, 22, .18), transparent 420px),
    radial-gradient(circle at 82% 56%, rgba(168, 155, 142, .08), transparent 360px),
    linear-gradient(90deg, rgba(5, 4, 3, .98) 0%, rgba(5, 4, 3, .78) 42%, rgba(11, 9, 6, .62) 100%),
    url("../assets/images/hero-cocktail-scene.webp");
  background-size: cover;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

.hero__overlay {
  z-index: 1;
background: linear-gradient( 90deg, rgba(5, 4, 3, .82) 0%, rgba(5, 4, 3, .72) 30%, rgba(5, 4, 3, .24) 60%, rgba(5, 4, 3, .06) 100% ), linear-gradient( 180deg, rgba(0, 0, 0, .22) 0%, transparent 38%, rgba(0, 0, 0, .48) 100% );
}

.hero__vignette {
  z-index: 2;
  pointer-events: none;
  background:
    radial-gradient(circle at 74% 68%, transparent 0 24%, rgba(0, 0, 0, .32) 58%, rgba(0, 0, 0, .90) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, .20), rgba(0, 0, 0, .68));
}

.hero__ornament {
  z-index: 2;
  pointer-events: none;
  opacity: .62;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 60% 30%, rgba(183, 90, 22, .10), transparent 360px),
    radial-gradient(circle at 29% 47%, rgba(214, 168, 102, .10), transparent 320px);
}

.hero__content {
  position: absolute;
  z-index: 3;
  inset-inline-start: clamp(72px, 5vw, 96px);
  inset-block-start: clamp(228px, 15.1vw, 290px);
  inline-size: clamp(760px, 44vw, 860px);
  min-block-size: 560px;
  margin: 0;
}

.hero__title span { display: block; }
.hero__body { inline-size: min(100%, 620px); margin-block-start: clamp(22px, 1.45vw, 28px); }
.hero__credit { margin-block-start: clamp(20px, 1.35vw, 26px); }
.hero__actions {
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: clamp(470px, 26.25vw, 607px);
  display: flex;
  align-items: center;
  gap: clamp(34px, 2.6vw, 50px);
}
.hero__actions .button--primary { inline-size: var(--cta-hero-w-ref); block-size: var(--cta-hero-h-ref); }
.video-trigger { inline-size: clamp(190px, 12.5vw, 240px); block-size: var(--cta-hero-h-ref); }

/* Transition */
.post-hero-transition { position: relative; z-index: 3; block-size: 0; }
.post-hero-transition__line {
  position: absolute;
  inset-inline: 0;
  inset-block-start: -1px;
  display: block;
  block-size: var(--line-hairline);
  background: linear-gradient(90deg, transparent, rgba(184, 134, 69, .58) 7%, rgba(110, 72, 36, .52) 52%, transparent 100%);
}

/* Intro */
.intro-split {
  block-size: var(--intro-h-ref);
  overflow: hidden;
  background: transparent;
}

.intro-split__media {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: clamp(420px, 31.25vw, 600px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .72) 74%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .72) 74%, transparent 100%);
}

.intro-split__asset-slot {
  background-image: url("../assets/images/intro-private-salon.webp");
  background-size: cover;
  background-position: 48% 50%;
  background-repeat: no-repeat;
}

.intro-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 4, 3, .18) 0%, rgba(5, 4, 3, .08) 54%, rgba(5, 4, 3, 0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.08), rgba(0,0,0,.42));
}

.intro-split__statement {
  position: absolute;
  inset-inline-start: clamp(600px, 34.9vw, 670px);
  inset-block-start: clamp(86px, 6.15vw, 118px);
  inline-size: clamp(430px, 30.2vw, 580px);
  text-align: center;
}

.intro-split__copy {
  position: absolute;
  inset-inline-end: var(--space-page-margin-ref);
  inset-block-start: clamp(78px, 5.2vw, 100px);
  inline-size: clamp(360px, 24.5vw, 470px);
}

.intro-split__copy::before {
  content: "";
  position: absolute;
  inset-inline-start: clamp(-58px, -3vw, -44px);
  inset-block-start: -12px;
  inline-size: var(--line-hairline);
  block-size: clamp(200px, 13.5vw, 260px);
  background: linear-gradient(180deg, transparent, rgba(184, 134, 69, .5), transparent);
}

/* Signatures */
.signatures {
  block-size: var(--signatures-panel-h-ref);
  background: transparent;
}

.signatures__panel {
  position: absolute;
  inset-inline-start: var(--space-page-margin-ref);
  inset-block-start: 0;
  inline-size: var(--signatures-panel-w-ref);
  block-size: var(--signatures-panel-h-ref);
  margin: 0;
  overflow: hidden;
}

.signatures__header {
  position: absolute;
  inset-inline: 0;
  inset-block-start: clamp(32px, 2.35vw, 45px);
  text-align: center;
  z-index: 2;
}

.signatures__list {
  position: absolute;
  inset-inline: 0;
  inset-block-start: clamp(86px, 5.2vw, 100px);
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  block-size: calc(100% - clamp(120px, 8vw, 150px));
  padding-block-start: clamp(32px, 2.1vw, 40px);
}

.signature-item { position: relative; min-inline-size: 0; padding-inline: clamp(20px, 1.7vw, 32px); text-align: center; }
.signature-item + .signature-item::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 8px;
  inline-size: var(--line-hairline);
  block-size: min(300px, 80%);
  background: linear-gradient(180deg, transparent, rgba(184, 134, 69, .45), transparent);
}

/* Collection heading */
.collection-heading {
  block-size: var(--collection-title-h-ref);
  overflow: hidden;
  text-align: center;
  background: transparent;
}
.collection-heading__inner { position: relative; inline-size: 100%; block-size: 100%; }
.collection-heading__eyebrow { position: absolute; inset-inline: 0; inset-block-start: clamp(16px, 1.25vw, 24px); }
.collection-heading__title-row {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: clamp(46px, 3.28vw, 63px);
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: min(1040px, 58vw);
  gap: clamp(24px, 1.8vw, 34px);
  transform: translateX(-50%);
}
.collection-heading__rule { display: block; flex: 1 1 auto; block-size: var(--line-hairline); background: linear-gradient(90deg, transparent, rgba(110, 72, 36, .78), transparent); }
.collection-heading__text { position: absolute; inset-inline: 0; inset-block-start: clamp(90px, 5.6vw, 108px); }
.collection-heading__controls { position: absolute; inset-inline-end: clamp(120px, 8.3vw, 160px); inset-block-start: clamp(50px, 3.5vw, 67px); display: flex; gap: clamp(20px, 1.45vw, 28px); }

/* Collection cards */
.collection {
  block-size: calc(var(--collection-cards-h-ref) + 10px);
  overflow: hidden;
  background: transparent;
}
.collection__viewport {
  position: absolute;
  inset-inline-start: var(--space-page-margin-ref);
  inset-block-start: 0;
  inline-size: var(--collection-cards-w-ref);
  block-size: var(--collection-cards-h-ref);
  margin: 0;
  overflow: visible;
}
.collection__list {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--space-card-gap-ref);
  inline-size: 100%;
  block-size: 100%;
}
.collection-card { position: relative; min-inline-size: 0; block-size: var(--card-h-ref); }
.collection-card:nth-child(4),
.collection-card:nth-child(8) { block-size: calc(var(--card-h-ref) + 8px); }
/* Cartes expérience : le visuel couvre toute la carte.
   Le texte est protégé uniquement par le dégradé bas, comme dans la maquette. */
.collection-card__article {
  position: relative;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
  isolation: isolate;
}
.collection-card__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  inline-size: 100%;
  block-size: 100%;
  overflow: hidden;
}
.collection-card__asset-slot {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  background-image:
    radial-gradient(circle at 50% 34%, rgba(184, 134, 69, .13), transparent 130px),
    linear-gradient(180deg, #11100c 0%, #090604 55%, #050403 100%);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transform: scale(1.01);
}
.collection-card[data-slug="spirito-italiano"] .collection-card__asset-slot { background-image: url("../assets/images/universe-01-spirito-italiano.webp"), radial-gradient(circle at 50% 34%, rgba(184,134,69,.16), transparent 130px), linear-gradient(180deg, #11100c, #050403); background-position: 25% 75%;}
.collection-card[data-slug="legends-of-the-bar"] .collection-card__asset-slot { background-image: url("../assets/images/universe-02-legends-of-the-bar.webp"), radial-gradient(circle at 50% 34%, rgba(184,134,69,.16), transparent 130px), linear-gradient(180deg, #11100c, #050403); background-position: 25% 75%; }
.collection-card[data-slug="cocktail-lab-experience"] .collection-card__asset-slot { background-image: url("../assets/images/universe-03-cocktail-lab-experience.webp"), radial-gradient(circle at 50% 34%, rgba(184,134,69,.16), transparent 130px), linear-gradient(180deg, #11100c, #050403); background-position: 25% 75%; }
.collection-card[data-slug="senza-pensieri"] .collection-card__asset-slot { background-image: url("../assets/images/universe-04-senza-pensieri.webp"), radial-gradient(circle at 50% 34%, rgba(184,134,69,.16), transparent 130px), linear-gradient(180deg, #11100c, #050403); }
.collection-card[data-slug="twist-on-classic"] .collection-card__asset-slot { background-image: url("../assets/images/universe-05-twist-on-classic.webp"), radial-gradient(circle at 50% 34%, rgba(184,134,69,.16), transparent 130px), linear-gradient(180deg, #11100c, #050403); }
.collection-card[data-slug="ciak-si-shakera"] .collection-card__asset-slot { background-image: url("../assets/images/universe-06-ciak-si-shakera.webp"), radial-gradient(circle at 50% 18%, rgba(214,168,102,.16), transparent 110px), linear-gradient(180deg, #140705 0%, #070403 100%); }
.collection-card[data-slug="under-the-caribbean-sun"] .collection-card__asset-slot { background-image: url("../assets/images/universe-07-under-the-caribbean-sun.webp"), radial-gradient(circle at 58% 28%, rgba(183,90,22,.22), transparent 120px), linear-gradient(180deg, #142a26 0%, #090604 72%, #050403 100%); }
.collection-card[data-slug="surprise"] .collection-card__asset-slot { background-image: url("../assets/images/universe-08-surprise.webp"), radial-gradient(circle at 50% 34%, rgba(184,134,69,.16), transparent 130px), linear-gradient(180deg, #11100c, #050403); }
.collection-card__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.collection-card__content {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: clamp(68px, 4vw, 76px) var(--space-card-pad-x) clamp(24px, 1.6vw, 32px);
}

/* Invitation */
.invitation {
  block-size: var(--invitation-h-ref);
  overflow: hidden;
  background: transparent;
}
.invitation__media {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: min(54vw, 1040px);
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .72) 74%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 58%, rgba(0, 0, 0, .72) 74%, transparent 100%);
}
.invitation__asset-slot {
  background-image: url("../assets/images/invitation-table-scene.webp");
  background-size: cover;
  background-position: 36% 58%;
  background-repeat: no-repeat;
}
.invitation__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(5,4,3,.10) 0%, rgba(5,4,3,.08) 56%, rgba(5,4,3,0) 100%),
    linear-gradient(180deg, rgba(0,0,0,.10), rgba(0,0,0,.54));
}
.invitation__content { position: absolute; inset-inline-start: clamp(960px, 56.5vw, 1085px); inset-block-start: clamp(42px, 2.6vw, 50px); inline-size: clamp(280px, 17.2vw, 330px); }
.invitation__event-box { position: absolute; inset-inline-end: var(--space-page-margin-ref); inset-block-start: clamp(32px, 1.82vw, 35px); inline-size: clamp(270px, 16.67vw, 320px); block-size: clamp(305px, 9.64vw, 185px); }
.invitation__cta { position: absolute; inset-inline: 0; inset-block-end: 0; inline-size: 100%; block-size: clamp(48px, 3.13vw, 60px); }

/* Footer */
.site-footer { position: relative; block-size: var(--footer-h-ref); background: rgba(5, 4, 3, .42); }
.site-footer::before { content: ""; position: absolute; inset-inline: 0; inset-block-start: 0; block-size: var(--line-hairline); background: linear-gradient(90deg, transparent, rgba(184,134,69,.35), transparent); }
.site-footer__inner { position: relative; block-size: 100%; display: flex; align-items: flex-start; justify-content: center; padding-block-start: clamp(26px, 1.9vw, 36px); }
.site-footer__links { position: absolute; inset-inline-end: var(--space-page-margin-ref); inset-block-start: clamp(24px, 1.7vw, 32px); }

/* Modal */
.video-modal[hidden] { display: none !important; }
.video-modal { position: fixed; inset: 0; z-index: var(--z-modal); }
.video-modal__overlay { position: absolute; inset: 0; }
.video-modal__panel { position: relative; z-index: 1; }