:root {
  --ivory:     #ffffff;
  --paper:     #ffffff;
  --blush:     #e8c9c5;
  --burgundy:  #681d32;
  --wine:      #461321;
  --chocolate: #241716;
  --gold:      #b28b52;
  --gold-light:#d8bd8c;
  --muted:     #4a3f3c;
  --line:      rgba(70,19,33,.1);

  --display: "Fraunces", Georgia, serif;
  --serif:   "Spectral", Georgia, serif;
  --sans:    "Jost", sans-serif;
  --script:  "Alex Brush", cursive;
  --ease:    cubic-bezier(.22,1,.36,1);
  --gutter:  clamp(1.4rem, 6vw, 2.4rem);
}

html { scroll-behavior: smooth; }

body.queen-club-front-page {
  margin: 0;
  background: var(--ivory);
  color: var(--chocolate);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
}

.queen-club-landing { position: relative; overflow: hidden; }

/* Grain fin sur toute la page — texture luxe imprimée */
.queen-club-landing::after {
  content: "";
  position: fixed; inset: 0; z-index: 100;
  pointer-events: none; opacity: .04; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.queen-club-landing *, .queen-club-landing *::before, .queen-club-landing *::after { box-sizing: border-box; }
.queen-club-landing :is(h1,h2,h3,p,figure,blockquote,ol,dl) { margin: 0; }
.queen-club-landing img { display: block; width: 100%; }
.queen-club-landing a { color: inherit; text-decoration: none; }
.queen-club-landing :focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }

/* Reveal — fallback IntersectionObserver (no GSAP) */
.reveal-ready [data-reveal] {
  opacity: 0;
  transform: translateY(.9rem);
  transition: opacity .75s var(--ease), transform .75s var(--ease);
}
.reveal-ready [data-reveal].is-revealed { opacity: 1; transform: none; }

/* Anti-FOUC : tant que JS+GSAP ne sont pas prêts, on cache le hero
   (la classe .motion-ready est posée juste avant la timeline) */
.js-motion .hero-label,
.js-motion .hero h1,
.js-motion .hero-actions,
.js-motion .hero-meta { opacity: 0; }
.motion-ready .hero-label,
.motion-ready .hero h1,
.motion-ready .hero-actions,
.motion-ready .hero-meta { opacity: 1; }

/* Labels */
.eyebrow, .hero-label, .pillar-name, .card-label {
  color: var(--burgundy);
  font-size: .44rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
}

/* Index de section — chiffre romain éditorial */
.section-index {
  display: flex; align-items: center; gap: .8rem;
  margin-bottom: 1.6rem;
  color: var(--gold);
  font-size: .42rem; font-weight: 600;
  letter-spacing: .26em; text-transform: uppercase;
}
.section-index span {
  font: italic 400 1.05rem var(--display);
  letter-spacing: 0;
}
.section-index::after {
  flex: 1; max-width: 3rem; height: 1px;
  background: currentColor; opacity: .5; content: "";
}

/* Buttons */
.button {
  position: relative; z-index: 0;
  display: inline-flex; min-height: 3.4rem;
  align-items: center; justify-content: center;
  padding: 0 1.8rem; overflow: hidden;
  border: 1px solid var(--burgundy);
  font-family: var(--sans); font-size: .46rem; font-weight: 600;
  letter-spacing: .2em; text-transform: uppercase;
  transition: color .35s ease;
}
.button::before {
  position: absolute; inset: 0; z-index: -1;
  background: var(--burgundy); content: "";
  transition: transform .45s var(--ease);
}
.queen-club-landing .button-solid { color: var(--paper); }
.button-outline::before { transform: scaleY(0); transform-origin: bottom; }

.text-link {
  display: inline-flex; align-items: center; gap: .5rem;
  color: var(--burgundy);
  font-size: .44rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase;
}

/* ─── HEADER ─────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  min-height: 4.2rem; padding: .6rem var(--gutter);
  background: rgba(245,239,229,.92);
  backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--line);
  transition: transform .45s var(--ease), background .3s ease;
}
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-scrolled { background: rgba(255,250,242,.97); }
body.admin-bar .site-header { top: 32px; }

.brand { display: flex; align-items: center; gap: .6rem; }
.brand-mark {
  display: grid; place-items: center;
  width: 2.1rem; aspect-ratio: 1;
  border: 1px solid var(--gold); border-radius: 50%;
  color: var(--burgundy); font: italic 400 1.05rem var(--display);
}
.brand-copy { display: flex; flex-direction: column; line-height: 1; }
.brand-copy strong { font: 500 .6rem var(--display); letter-spacing: .2em; text-transform: uppercase; }
.brand-copy small  { margin-top: .28rem; color: var(--gold); font-size: .34rem; letter-spacing: .26em; text-transform: uppercase; }

.site-nav, .header-cta { display: none; }

/* ─── BURGER ──────────────────────────────────────────── */
.menu-toggle {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem 0; border: 0; background: none; cursor: pointer;
  color: var(--burgundy);
  font-size: .4rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}
.menu-toggle-bars {
  position: relative; display: block;
  width: 1.4rem; height: .65rem;
}
.menu-toggle-bars span {
  position: absolute; left: 0; width: 100%; height: 1.3px;
  background: var(--burgundy);
  transition: transform .4s var(--ease), opacity .25s ease;
}
.menu-toggle-bars span:first-child  { top: 0; }
.menu-toggle-bars span:last-child   { bottom: 0; }
.menu-toggle-label { line-height: 1; }

/* État ouvert — croix */
.menu-open .menu-toggle-bars span:first-child { transform: translateY(.32rem) rotate(45deg); }
.menu-open .menu-toggle-bars span:last-child  { transform: translateY(-.32rem) rotate(-45deg); }

/* ─── OVERLAY MENU ────────────────────────────────────── */
.mobile-menu {
  position: fixed; inset: 0; z-index: 29;
  display: flex; flex-direction: column; justify-content: center;
  padding: 6rem var(--gutter) 3rem;
  background: var(--ivory);
  opacity: 0; visibility: hidden;
  transform: translateY(-1.5rem);
  transition: opacity .5s var(--ease), transform .5s var(--ease), visibility .5s;
}
.mobile-menu::after {
  content: "Q"; position: absolute; right: -2rem; bottom: -4rem; z-index: 0;
  color: rgba(104,29,50,.05);
  font: italic 300 22rem / 1 var(--display); pointer-events: none;
}
.menu-open .mobile-menu {
  opacity: 1; visibility: visible; transform: none;
}
.menu-open { overflow: hidden; }

.mobile-menu-nav {
  position: relative; z-index: 1;
  display: flex; flex-direction: column;
}
.mobile-menu-nav a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .65rem 0;
  font: 300 clamp(2.6rem, 11vw, 3.6rem) / 1.05 var(--display);
  letter-spacing: -.04em;
  opacity: 0; transform: translateY(1rem);
}
.mobile-menu-nav a span {
  color: var(--gold);
  font: italic 400 .85rem var(--display); letter-spacing: 0;
}
.menu-open .mobile-menu-nav a {
  opacity: 1; transform: none;
  transition: opacity .55s var(--ease), transform .55s var(--ease);
}
.menu-open .mobile-menu-nav a:nth-child(1) { transition-delay: .1s; }
.menu-open .mobile-menu-nav a:nth-child(2) { transition-delay: .17s; }
.menu-open .mobile-menu-nav a:nth-child(3) { transition-delay: .24s; }
.menu-open .mobile-menu-nav a:nth-child(4) { transition-delay: .31s; }

.mobile-menu-foot {
  position: relative; z-index: 1;
  margin-top: 3rem; padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.mobile-menu-foot .button { width: 100%; }
.mobile-menu-foot p {
  margin-top: 1.2rem; text-align: center;
  color: var(--muted);
  font-size: .42rem; letter-spacing: .24em; text-transform: uppercase;
}

/* ─── HERO ───────────────────────────────────────────── */
.hero {
  padding-top: 4.2rem;
  background: var(--ivory);
}

.hero-text {
  position: relative;
  padding: 3.5rem var(--gutter) 3rem;
}

.hero-label {
  display: flex; align-items: center; gap: .7rem;
  color: var(--gold);
}
.hero-label::before { width: 1.4rem; height: 1px; background: currentColor; content: ""; }
.hero-place {
  position: relative; padding-left: .7rem;
  color: var(--burgundy);
}
.hero-place::before {
  content: "·"; position: absolute; left: 0; color: var(--gold);
}

.hero h1 {
  margin-top: 1.6rem;
  font: 300 clamp(4rem, 17vw, 7rem) / .86 var(--display);
  letter-spacing: -.06em;
}
.hero h1 em,
.hero h1 .em {
  color: var(--burgundy);
  font-style: italic; font-weight: 300;
}

.hero-bottom { margin-top: 2.4rem; }

/* Méta-mots du hero — filets entre les trois élans */
.hero-meta {
  display: flex; align-items: center; gap: 1rem;
  margin-top: 3rem; padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: .4rem; letter-spacing: .28em; text-transform: uppercase;
}
.hero-meta span { position: relative; }
.hero-meta span + span { padding-left: 1rem; }
.hero-meta span + span::before {
  content: ""; position: absolute; left: 0; top: 50%;
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--gold); transform: translateY(-50%);
}

.hero-intro {
  max-width: 24rem;
  color: var(--muted);
  font: 400 1.12rem / 1.55 var(--serif);
}

.hero-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem;
  margin-top: 1.8rem;
}

.hero-price {
  color: var(--muted);
  font-size: .42rem; letter-spacing: .12em; text-transform: uppercase;
}
.hero-price strong {
  color: var(--burgundy);
  font: 400 1.1rem var(--display);
  letter-spacing: -.02em;
}
.hero-price span { margin-left: .1rem; }

.hero-image {
  position: relative;
  height: 72vw; max-height: 32rem;
  overflow: hidden;
  background: var(--wine);
}
.hero-image img {
  height: 115%; object-fit: cover;
  filter: saturate(.78) contrast(1.04) brightness(.86);
  transition: transform 1.2s var(--ease);
}
.hero-image::before {
  content: ""; position: absolute; inset: .9rem; z-index: 2;
  border: 1px solid rgba(216,189,140,.35); pointer-events: none;
}
.hero-image figcaption {
  position: absolute; left: 1.4rem; bottom: 1.4rem; z-index: 3;
  color: var(--gold-light);
  font: italic 400 1.5rem var(--script);
}

/* ─── RECOGNITION ─────────────────────────────────────── */
.recognition {
  padding: 6rem var(--gutter);
  background: var(--paper);
}
.recognition .eyebrow { display: block; margin-bottom: 2rem; }

.recognition-lines {
  display: grid; gap: 2.4rem;
}
.recognition-lines p {
  max-width: 32rem;
  padding-left: 1.1rem;
  border-left: 2px solid var(--gold);
  color: var(--chocolate);
  font: italic 400 1.45rem / 1.45 var(--display);
}
/* Quinconce — chaque phrase trouve sa propre place */
.rec-line--1 { margin-left: 0; }
.rec-line--2 { margin-left: auto; text-align: left; }
.rec-line--3 { margin-left: 12%; }

/* ─── PROMISE ─────────────────────────────────────────── */
.promise { background: var(--ivory); }

.promise-image {
  position: relative;
  height: 85vw; max-height: 34rem;
  overflow: hidden; background: var(--wine);
}
.promise-image::before {
  content: ""; position: absolute; inset: .9rem; z-index: 2;
  border: 1px solid rgba(255,250,242,.3); pointer-events: none;
}
.promise-image img {
  height: 115%; object-fit: cover;
  filter: saturate(.7) contrast(1.05) brightness(.88);
}

.promise-text {
  padding: 4.5rem var(--gutter) 5.5rem;
}
.promise-text h2 {
  font: 300 clamp(3rem, 12vw, 5.5rem) / .9 var(--display);
  letter-spacing: -.055em;
}
.promise-text h2 em { color: var(--burgundy); font-style: italic; font-weight: 300; }
.promise-text > p {
  max-width: 26rem; margin-top: 1.6rem;
  color: var(--chocolate); font: 400 1.1rem / 1.55 var(--serif);
}
.promise-aside {
  margin-top: 1.8rem !important;
  color: var(--burgundy);
  font: italic 400 1.25rem / 1.4 var(--serif) !important;
}

/* ─── PILLARS ─────────────────────────────────────────── */
.pillars {
  position: relative;
  padding: 6rem var(--gutter);
  background: var(--burgundy);
  color: var(--paper);
  overflow: hidden;
}
.pillars::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, rgba(216,189,140,.16), transparent 55%),
              radial-gradient(90% 70% at 0% 100%, rgba(70,19,33,.6), transparent 60%);
}
.pillars > * { position: relative; z-index: 1; }
.pillars-header { margin-bottom: 3rem; }
.pillars-header h2 {
  font: 300 clamp(2.8rem, 11vw, 5rem) / .92 var(--display);
  letter-spacing: -.055em;
}

.pillar-list {
  padding: 0; margin: 0; list-style: none;
  display: grid; gap: 0;
}

/* Pilier typographique — composition décalée, sur fond sombre */
.pillar {
  position: relative;
  padding: 2.6rem 0;
  border-top: 1px solid rgba(216,189,140,.22);
}
.pillar:last-child { border-bottom: 1px solid rgba(216,189,140,.22); }

.pillar-num {
  display: block;
  color: transparent;
  font: italic 400 3.4rem / 1 var(--display);
  letter-spacing: -.02em;
  -webkit-text-stroke: 1px var(--gold-light);
  text-stroke: 1px var(--gold-light);
}
.pillar-name {
  margin: .3rem 0 .7rem;
  color: var(--paper);
  font: 300 clamp(2.8rem, 13vw, 4.4rem) / .95 var(--display);
  letter-spacing: -.05em;
}
.pillar--c .pillar-name { color: var(--gold-light); font-style: italic; }
.pillar-text {
  max-width: 24rem;
  color: rgba(255,250,242,.6); font: 400 1.1rem / 1.55 var(--serif);
}

/* Décalages subtils pour casser l'alignement vertical */
.pillar--b { padding-left: 8%; }
.pillar--c { padding-left: 14%; }

/* ─── SOVEREIGNTY pulled into pillars section — removed as separate section */

/* ─── MEMBERSHIP ──────────────────────────────────────── */
.membership {
  padding: 6rem var(--gutter);
  background: var(--paper);
}
.membership h2 {
  margin-top: .8rem;
  font: 300 clamp(2.8rem, 11vw, 5rem) / .92 var(--display);
  letter-spacing: -.055em;
}
.membership h2 em { color: var(--burgundy); font-style: italic; font-weight: 300; }
.membership-text > p {
  max-width: 26rem; margin-top: 1.2rem;
  color: var(--muted); font: 400 1.05rem / 1.5 var(--serif);
}

.inclusion-list {
  margin-top: 2.5rem;
  display: grid; gap: 1.6rem;
}
.inclusion-list > div {
  padding-left: 1rem;
  border-left: 1px solid var(--gold);
}
.inclusion-list dt {
  margin-bottom: .4rem;
  color: var(--burgundy);
  font-size: .42rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase;
}
.inclusion-list dd {
  margin: 0; color: var(--muted); font: 400 1rem / 1.5 var(--serif);
}

.membership-card {
  position: relative;
  margin-top: 3rem;
  padding: 3rem 1.8rem;
  background: var(--burgundy);
  color: var(--paper);
  text-align: center;
  overflow: hidden;
}
.membership-card::before {
  content: ""; position: absolute; inset: .65rem; z-index: 0;
  border: 1px solid rgba(216,189,140,.4); pointer-events: none;
}
.membership-card::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% -20%, rgba(216,189,140,.18), transparent 60%);
}
.membership-card > * { position: relative; z-index: 1; }
.card-label {
  color: var(--gold-light);
  display: block; margin-bottom: 1.2rem;
}
.price strong {
  display: block;
  font: 300 4.6rem / .9 var(--display);
  letter-spacing: -.05em;
}
.price span {
  display: block; margin-top: .55rem;
  color: var(--gold-light);
  font-size: .42rem; letter-spacing: .2em; text-transform: uppercase;
}
.price-note {
  max-width: 18rem; margin: 1.4rem auto 1.8rem;
  color: rgba(255,250,242,.6);
  font: italic 400 1rem / 1.45 var(--serif);
}
.membership-card .button {
  width: 100%;
  border-color: var(--gold-light);
  color: var(--paper);
}
.membership-card .button::before { background: var(--gold-light); }
.membership-card small {
  display: block; margin-top: .9rem;
  color: rgba(255,250,242,.4);
  font-size: .36rem; letter-spacing: .1em; text-transform: uppercase;
}

/* ─── HOST ────────────────────────────────────────────── */
.host { background: var(--chocolate); color: var(--paper); }

.host-image {
  position: relative;
  height: min(110vw, 36rem);
  overflow: hidden; background: var(--wine);
}
.host-image::before {
  content: ""; position: absolute; inset: .9rem; z-index: 2;
  border: 1px solid rgba(216,189,140,.4); pointer-events: none;
}
.host-image img {
  height: 115%; object-fit: cover;
  object-position: center 14%;
  filter: saturate(.72);
}

.host-text {
  padding: 4rem var(--gutter) 5.5rem;
}
.host-text blockquote {
  position: relative;
  font: italic 300 clamp(2.2rem, 9vw, 3.8rem) / 1.08 var(--display);
  letter-spacing: -.04em;
}
.quote-mark {
  display: block;
  margin-bottom: -1.4rem;
  color: var(--gold);
  font: 400 5rem / 1 var(--display);
  opacity: .6;
}
.host-text .section-index { color: var(--gold-light); }
.host-text .section-index::after { opacity: .35; }
.host-text > p {
  max-width: 24rem; margin-top: 1.6rem;
  color: rgba(255,250,242,.6);
  font: 400 1.05rem / 1.55 var(--serif);
}
.signature {
  display: block; margin-top: 1.6rem;
  color: var(--gold-light);
  font: 400 2.8rem var(--script);
}
.host-text .text-link {
  display: inline-flex; margin-top: 1.6rem;
  color: var(--gold-light);
}

/* ─── FINAL ───────────────────────────────────────────── */
.final {
  position: relative;
  padding: 7rem var(--gutter);
  background: var(--ivory);
  text-align: center;
  overflow: hidden;
}
/* Lettrine Q fantôme — signature de marque */
.final::before {
  content: "Q";
  position: absolute; top: 50%; left: 50%; z-index: 0;
  transform: translate(-50%, -50%);
  color: rgba(104,29,50,.04);
  font: italic 300 28rem / 1 var(--display);
  pointer-events: none;
}
.final > * { position: relative; z-index: 1; }
.final h2 {
  font: 300 clamp(3rem, 13vw, 6rem) / .9 var(--display);
  letter-spacing: -.055em;
}
.final h2 em { color: var(--burgundy); font-style: italic; font-weight: 300; }
.final > p {
  max-width: 22rem; margin: 1.6rem auto 2.4rem;
  color: var(--muted); font: 400 1.05rem / 1.5 var(--serif);
}
.final small {
  display: block; margin-top: .9rem;
  color: var(--muted);
  font-size: .38rem; letter-spacing: .12em; text-transform: uppercase;
}

/* ─── FOOTER ──────────────────────────────────────────── */
.site-footer {
  padding: 4rem var(--gutter) 5.5rem;
  background: var(--chocolate);
  color: var(--paper);
  display: grid; gap: 2rem;
}
.footer-brand strong { display: block; font: 300 2.6rem / .9 var(--display); }
.footer-brand span   { color: var(--gold); font-size: .38rem; letter-spacing: .26em; text-transform: uppercase; }
.site-footer nav {
  display: flex; flex-wrap: wrap; gap: 1rem;
  color: rgba(255,250,242,.5);
  font-size: .42rem; letter-spacing: .14em; text-transform: uppercase;
}
.site-footer p {
  color: rgba(255,250,242,.25);
  font-size: .36rem; letter-spacing: .12em; text-transform: uppercase;
}

/* ─── MOBILE STICKY BAR ───────────────────────────────── */
.mobile-join-bar {
  position: fixed; inset: auto .65rem .65rem; z-index: 40;
  display: flex; min-height: 3.6rem;
  align-items: center; justify-content: space-between;
  padding: .7rem 1.1rem;
  background: rgba(104,29,50,.97);
  color: var(--paper) !important;
  box-shadow: 0 .8rem 2.5rem rgba(36,23,22,.22);
  opacity: 0; pointer-events: none;
  transform: translateY(130%);
  transition: opacity .35s ease, transform .45s var(--ease);
}
.mobile-join-bar.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.mobile-join-bar span { font-size: .44rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; }
.mobile-join-bar strong { color: var(--gold-light); font: 400 1rem var(--display); }
.mobile-join-bar small { margin-left: .1rem; color: var(--gold-light); font: 500 .32rem var(--sans); letter-spacing: .08em; text-transform: uppercase; }

/* ─── RESPONSIVE ──────────────────────────────────────── */
@media (max-width: 782px) { body.admin-bar .site-header { top: 46px; } }

@media (hover: hover) {
  .button:hover::before { transform: scaleY(0); transform-origin: top; }
  .button:hover { color: var(--burgundy); }
  .button-outline:hover::before { transform: scaleY(1); }
  .button-outline:hover { color: var(--paper); }
  .membership-card .button:hover { color: var(--chocolate); }
  .hero-image:hover img { transform: scale(1.04); }
  .text-link span { transition: transform .35s var(--ease); }
  .text-link:hover span { transform: translateX(.3rem); }
}

@media (min-width: 700px) {
  :root { --gutter: clamp(2.5rem, 6vw, 5rem); }
  .recognition-lines { grid-template-columns: 1fr 1fr; }
  .inclusion-list { grid-template-columns: repeat(3, 1fr); }
  .membership-card { max-width: 40rem; }
}

/* ─── TABLET 700–1023px ───────────────────────────────── */
@media (min-width: 700px) and (max-width: 1023px) {
  /* Hero — stack stays but image gets more height */
  .hero-image { height: 52vw; max-height: 28rem; }

  /* Pillars — 3-col compact at tablet */
  .pillar-list {
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
  }
  .pillar { padding: 2rem 0; border-top: 1px solid rgba(216,189,140,.22); }
  .pillar:last-child { border-bottom: 1px solid rgba(216,189,140,.22); }
  .pillar--b { padding-left: 0; margin-top: 3rem; }
  .pillar--c { padding-left: 0; margin-top: 1.5rem; }
  .pillar-num { font-size: 2.4rem; }
  .pillar-name { font-size: clamp(2rem, 3.5vw, 2.8rem); }

  /* Membership — side by side */
  .membership { display: grid; grid-template-columns: 1.2fr .8fr; gap: 4rem; align-items: center; }
  .membership-card { margin-top: 0; }

  /* Promise — side by side */
  .promise { display: grid; grid-template-columns: 1fr 1fr; }
  .promise-image { height: auto; max-height: none; }
  .promise-text { align-self: center; padding: 4rem 3vw; }

  /* Host — side by side */
  .host { display: grid; grid-template-columns: 1fr 1fr; }
  .host-image { height: auto; max-height: none; }
  .host-text { align-self: center; padding: 4rem 3vw; }
}

@media (min-width: 1024px) {
  /* Header */
  .site-header { min-height: 5.2rem; padding-inline: 3.5rem; }
  .menu-toggle, .mobile-menu, .mobile-join-bar { display: none; }
  .site-nav { display: flex; gap: 2.2rem; font-size: .42rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; }
  .header-cta { display: inline-flex; min-height: 2.5rem; }

  /* Hero — texte gauche, image droite */
  .hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 100svh; }
  .hero-text { display: flex; flex-direction: column; justify-content: center; padding: 9rem 4vw 6rem 3.5rem; }
  .hero-image { height: auto; max-height: none; }

  /* Recognition */
  .recognition { display: grid; grid-template-columns: 1fr 2fr; gap: 4rem; align-items: start; padding: 4rem var(--gutter); }
  .recognition .eyebrow { margin-bottom: 0; }
  .recognition-lines { grid-column: 2; margin-top: 0; gap: 1.6rem; }
  .rec-line--2 { margin-left: 4rem; }
  .rec-line--3 { margin-left: 8%; }

  /* Promise */
  .promise { display: grid; grid-template-columns: 1.1fr .9fr; min-height: 80svh; }
  .promise-image { height: auto; max-height: none; }
  .promise-text { align-self: center; padding: 8rem 5vw; }

  /* Pillars — composition typographique décalée, full-bleed sombre */
  .pillars { padding: 11rem 0; }
  .pillars-header { max-width: 40rem; margin: 0 auto 5rem; padding-inline: max(var(--gutter), calc((100vw - 92rem) / 2)); }
  .pillar-list {
    grid-template-columns: repeat(3, 1fr); gap: 4rem; align-items: start;
    max-width: 92rem; margin-inline: auto; padding-inline: var(--gutter);
  }
  .pillar { padding: 0; border: none; }
  .pillar:last-child { border: none; }
  .pillar--b, .pillar--c { padding-left: 0; }
  .pillar--b { margin-top: 7rem; }
  .pillar--c { margin-top: 3rem; }
  .pillar-num { font-size: 5rem; -webkit-text-stroke-width: 1.2px; }
  .pillar-name { font-size: clamp(2.6rem, 3.8vw, 3.8rem); }
  .pillar-text { font-size: 1.12rem; }

  /* Membership */
  .membership { display: grid; grid-template-columns: 1.2fr .8fr; gap: 7rem; align-items: center; padding: 9rem var(--gutter); max-width: 90rem; margin-inline: auto; }
  .membership-card { margin-top: 0; }

  /* Host */
  .host { display: grid; grid-template-columns: .85fr 1.15fr; min-height: 80svh; }
  .host-image { height: auto; max-height: none; }
  .host-text { align-self: center; padding: 8rem 5vw; }

  /* Final */
  .final { padding: 10rem var(--gutter); }

  /* Footer */
  .site-footer { grid-template-columns: 1fr auto; align-items: end; padding: 4.5rem var(--gutter) 2.5rem; max-width: 90rem; margin-inline: auto; }
  .site-footer p { grid-column: 1 / -1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ─── CHARTE OFFICIELLE QUEEN CLUB ───────────────────── */
:root {
  --ivory: #fce9e9;
  --paper: #fffafa;
  --blush: #f9c8cc;
  --burgundy: #dc0b17;
  --wine: #050166;
  --chocolate: #050166;
  --gold: #dc0b17;
  --gold-light: #f9c8cc;
  --muted: #55536f;
  --line: rgba(5,1,102,.12);
}

.queen-club-landing::after { opacity: .018; }
.site-header { padding-block: .2rem; background: rgba(252,233,233,.94); }
.site-header.is-scrolled { background: rgba(252,233,233,.98); }
.brand { display: flex; width: 7.5rem; height: auto; align-items: center; overflow: visible; }
.brand img { width: 100%; height: auto; transform: none; }
.brand-mark, .brand-copy { display: none; }
.menu-toggle, .text-link, .hero-place, .hero-price strong, .promise-text h2 em,
.membership-text h2 em, .final h2 em { color: var(--burgundy); }
.menu-toggle-bars span { background: var(--burgundy); }

.hero { background: linear-gradient(145deg,var(--ivory) 0 74%,var(--blush) 74%); }
.hero-image img, .promise-image img { filter: saturate(.9) contrast(1.01); }
.hero-image::before, .promise-image::before { display: none; }
.hero-image figcaption { color: var(--paper); }

.recognition-lines p { border-left-color: var(--burgundy); }
.promise-aside { color: var(--burgundy); }
.pillars { background: var(--wine); }
.pillar-name { color: var(--blush); }
.membership-card { background: var(--wine); box-shadow: none; }
.membership-card::before { border-color: rgba(249,200,204,.45); }
.membership-card .button { color: var(--wine); }
.membership-card .button:hover { color: var(--paper); }
.host { background: var(--blush); color: var(--wine); }
.host-text p { color: var(--muted); }
.host-text .text-link { color: var(--burgundy); }
.quote-mark, .signature { color: var(--burgundy); }
.final { background: var(--paper); }
.site-footer { background: var(--wine); }
.footer-logo { width: 10rem; height: auto; overflow: visible; }
.footer-logo img { width: 100%; height: auto; transform: none; }
.footer-brand strong, .footer-brand span { display: none; }
.mobile-join-bar { border-color: rgba(249,200,204,.5); background: rgba(220,11,23,.97); }
.mobile-join-bar strong, .mobile-join-bar small { color: var(--paper); }

/* ─── MOBILE-FIRST REFINEMENT ─────────────────────────── */
@media (max-width: 699px) {
  :root { --gutter: 1.25rem; }

  .queen-club-landing::after { display: none; }
  .site-header { min-height: 4rem; padding-inline: 1rem; }
  .brand { width: 6.5rem; }
  .menu-toggle { gap: .4rem; font-size: .34rem; }

  .hero { padding-top: 4rem; background: var(--ivory); }
  .js-motion .hero-label,
  .js-motion .hero h1,
  .js-motion .hero-actions,
  .js-motion .hero-meta { opacity: 1; }
  .hero-text { padding: 2.4rem var(--gutter) 1.6rem; }
  .hero-label { font-size: .38rem; }
  .hero h1 { max-width: 9ch; margin-top: 1.15rem; font-size: clamp(3.45rem, 16vw, 4.25rem); line-height: .88; }
  .hero-bottom { margin-top: 1.6rem; }
  .hero-actions { display: grid; grid-template-columns: 1.25fr .9fr; gap: 0; margin-top: 0; }
  .hero-actions .button { min-height: 3.3rem; padding-inline: .7rem; font-size: .4rem; }
  .hero-price { display: flex; align-items: center; justify-content: center; border-bottom: 1px solid var(--line); font-size: .34rem; }
  .hero-price strong { margin-right: .15rem; font-size: 1rem; }
  .hero-meta { display: grid; grid-template-columns: repeat(3,1fr); gap: .45rem; margin-top: 1.25rem; padding-top: 1rem; font-size: .3rem; line-height: 1.35; letter-spacing: .12em; }
  .hero-meta span + span { padding-left: .45rem; }
  .hero-image { height: 58vw; max-height: 15rem; margin-inline: 0; }
  .hero-image img { height: 105%; object-position: center 45%; }
  .hero-image figcaption { left: 1rem; bottom: .8rem; font-size: 1.15rem; }

  .recognition { padding: 3.8rem var(--gutter); }
  .recognition .eyebrow { margin-bottom: 1.4rem; }
  .recognition-lines { gap: 1.35rem; }
  .recognition-lines p { padding-left: .8rem; font-size: 1.18rem; line-height: 1.35; }
  .rec-line--2, .rec-line--3 { margin-left: 0; }

  .promise-image { height: 64vw; max-height: 17rem; }
  .promise-image img { height: 108%; }
  .promise-text { padding: 3.5rem var(--gutter) 4rem; }
  .promise-text h2 { font-size: 2.85rem; line-height: .94; }
  .promise-aside { margin-top: 1.2rem !important; font-size: 1.05rem !important; }

  .pillars { padding: 4rem var(--gutter); }
  .pillars::before { opacity: .4; }
  .pillars-header { margin-bottom: 1.5rem; }
  .pillars-header h2 { max-width: 10ch; font-size: 2.55rem; }
  .pillar { display: grid; grid-template-columns: 2.3rem 1fr; column-gap: .65rem; padding: 1.4rem 0; }
  .pillar--b, .pillar--c { padding-left: 0; }
  .pillar-num { grid-row: 1 / span 2; font-size: 1.7rem; }
  .pillar-name { margin: 0 0 .25rem; font-size: 2rem; }
  .pillar-text { font-size: .95rem; line-height: 1.35; }

  .membership { padding: 4rem var(--gutter); }
  .membership h2 { margin-top: 0; font-size: 2.65rem; }
  .inclusion-list { gap: 1rem; margin-top: 1.7rem; }
  .inclusion-list > div { padding-left: .75rem; }
  .membership-card { margin-top: 2rem; padding: 2.3rem 1.35rem; }
  .price strong { font-size: 3.8rem; }

  .host-image { height: 72vw; max-height: 20rem; }
  .host-image::before { display: none; }
  .host-image img { height: 108%; object-position: center 42%; filter: saturate(.9); }
  .host-text { padding: 3.5rem var(--gutter) 4rem; }
  .host-text blockquote { font-size: 2rem; }
  .quote-mark { margin-bottom: -.9rem; font-size: 3.6rem; }
  .signature { margin-top: 1rem; font-size: 2.25rem; }

  .final { padding: 4.5rem var(--gutter); }
  .final::before { font-size: 18rem; }
  .final h2 { font-size: 3rem; }
  .final .button { min-width: 14rem; }

  .site-footer { gap: 1.3rem; padding: 2.5rem var(--gutter) 5.8rem; }
  .footer-logo { width: 8rem; }
  .site-footer nav { gap: .75rem 1rem; font-size: .36rem; }

  .mobile-join-bar { inset: auto .5rem .5rem; min-height: 3.35rem; padding: .6rem .9rem; box-shadow: 0 .55rem 1.5rem rgba(5,1,102,.18); }
  .mobile-join-bar span { font-size: .39rem; }
  .mobile-join-bar strong { font-size: .92rem; }

  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ═══════════════════════════════════════════════════════
   MOBILE — COUTURE LAYER
   Atmosphère, drame typographique, détails or, mouvement.
   ═══════════════════════════════════════════════════════ */
@media (max-width: 699px) {

  /* — Grain réintroduit, plus fin : la page respire comme un imprimé — */
  .queen-club-landing::after {
    display: block; opacity: .03; mix-blend-mode: multiply;
  }

  /* — Indicateur de progression — filet or en haut de page — */
  .scroll-progress {
    position: fixed; inset: 0 auto auto 0; z-index: 50;
    height: 2px; width: 100%;
    transform: scaleX(var(--p, 0)); transform-origin: left;
    background: linear-gradient(90deg, var(--burgundy), var(--gold-light));
    pointer-events: none;
  }

  /* ─── HERO — le titre est la scène ──────────────────── */
  .hero {
    position: relative;
    padding-top: 4rem;
    background:
      radial-gradient(140% 100% at 85% 0%, rgba(249,200,204,.55), transparent 60%),
      linear-gradient(178deg, var(--ivory) 0 70%, var(--blush) 100%);
  }
  /* Sceau / monogramme flottant — signature de marque */
  .hero-text::before {
    content: "Q";
    position: absolute; top: 1.4rem; right: var(--gutter); z-index: 0;
    display: grid; place-items: center;
    width: 3rem; aspect-ratio: 1;
    border: 1px solid rgba(220,11,23,.35); border-radius: 50%;
    color: var(--burgundy);
    font: italic 300 1.5rem/1 var(--display);
  }
  .hero-text > * { position: relative; z-index: 1; }
  .m-motion.seal-in .hero-text::before {
    opacity: .9;
    animation: seal-float 6s var(--ease) infinite;
    transition: opacity 1s var(--ease);
  }

  .hero-label { font-size: .4rem; letter-spacing: .26em; }
  .hero-label::before { background: var(--burgundy); }

  /* Titre : chaque ligne masquée, prête pour le reveal JS */
  .hero h1 {
    max-width: 11ch; margin-top: 1.35rem;
    font-size: clamp(3.6rem, 17vw, 4.6rem); line-height: .85;
    letter-spacing: -.055em;
  }
  .hero h1 .line { display: block; }
  .hero h1 .line > span { display: block; }
  .hero h1 em { color: var(--burgundy); }

  /* CTA — bouton plein + prix encadrés, filet or */
  .hero-bottom { margin-top: 1.9rem; }
  .hero-actions {
    grid-template-columns: 1.3fr .85fr;
    border: 1px solid rgba(220,11,23,.5); border-radius: 2px; overflow: hidden;
  }
  .hero-actions .button { border: 0; min-height: 3.5rem; font-size: .42rem; letter-spacing: .18em; }
  .hero-price {
    border-bottom: 0; border-left: 1px solid rgba(220,11,23,.3);
    background: rgba(255,250,250,.5); font-size: .34rem; letter-spacing: .14em;
  }
  .hero-price strong { font-size: 1.05rem; }

  .hero-meta { border-top: 1px solid var(--line); font-size: .31rem; letter-spacing: .14em; }
  .hero-meta span { text-align: center; }
  .hero-meta span + span::before { background: var(--burgundy); }

  /* Image hero — cadre or, voile sombre, légende script lisible */
  .hero-image { height: 66vw; max-height: 17rem; box-shadow: 0 1.2rem 2.5rem -1rem rgba(5,1,102,.35); }
  .hero-image::before { display: block; inset: .55rem; z-index: 3; border: 1px solid rgba(249,200,204,.5); }
  .hero-image::after {
    content: ""; position: absolute; inset: 0; z-index: 2;
    background: linear-gradient(to top, rgba(5,1,102,.5), transparent 45%); pointer-events: none;
  }
  .hero-image figcaption {
    z-index: 4; left: 1.1rem; bottom: 1rem; color: var(--paper); font-size: 1.3rem;
    text-shadow: 0 1px 8px rgba(5,1,102,.5);
  }

  /* ─── RECONNAISSANCE ────────────────────────────────── */
  .recognition { padding: 4.4rem var(--gutter); }
  .recognition .eyebrow { font-size: .42rem; letter-spacing: .26em; }
  .recognition-lines { gap: 1.5rem; }
  .recognition-lines p { padding-left: 1rem; font-size: 1.28rem; line-height: 1.4; border-left-width: 2px; }
  .rec-line--2 { margin-left: 1.4rem; }
  .rec-line--3 { margin-left: .7rem; }

  /* ─── PROMESSE ──────────────────────────────────────── */
  .promise-image { height: 70vw; max-height: 19rem; box-shadow: 0 1rem 2rem -.8rem rgba(5,1,102,.3); }
  .promise-text h2 { font-size: 3rem; letter-spacing: -.05em; }

  /* ─── PILIERS ───────────────────────────────────────── */
  .pillars { padding: 4.8rem var(--gutter) 5rem; }
  .pillars::before { opacity: .55; }
  .pillars-header h2 { font-size: 2.8rem; letter-spacing: -.05em; }
  .pillar { grid-template-columns: 2.6rem 1fr; column-gap: .85rem; padding: 1.7rem 0; border-top-color: rgba(249,200,204,.22); }
  .pillar:last-child { border-bottom-color: rgba(249,200,204,.22); }
  .pillar-num { grid-row: 1 / span 2; font-size: 2rem; -webkit-text-stroke: 1px var(--blush); color: transparent; }
  .pillar-name { font-size: 2.15rem; letter-spacing: -.03em; }
  .pillar--c .pillar-name { font-style: italic; color: var(--gold-light); }
  .pillar-text { color: rgba(255,250,250,.62); }

  /* ─── OFFRE ─────────────────────────────────────────── */
  .membership h2 { font-size: 2.8rem; }
  .membership-card { margin-top: 2.2rem; padding: 2.6rem 1.5rem; box-shadow: 0 1.5rem 3rem -1rem rgba(5,1,102,.45); }
  .membership-card::after { background: radial-gradient(circle at 50% -10%, rgba(249,200,204,.22), transparent 65%); }
  .price strong { font-size: 4.2rem; }

  /* ─── SAMARA ────────────────────────────────────────── */
  .host-image { height: 80vw; max-height: 24rem; box-shadow: 0 1.2rem 2.5rem -1rem rgba(5,1,102,.4); }
  .host-text blockquote { font-size: 2.15rem; line-height: 1.12; }
  .signature { font-size: 2.5rem; }
  .host-text .text-link { margin-top: 1.4rem; letter-spacing: .2em; }

  /* ─── FINAL ─────────────────────────────────────────── */
  .final { padding: 5.5rem var(--gutter); }
  .final::before { font-size: 22rem; opacity: .05; }
  .final h2 { font-size: 3.3rem; letter-spacing: -.05em; }
  .final .button { min-width: 15rem; min-height: 3.6rem; }

  /* ─── STICKY BAR — couture ──────────────────────────── */
  .mobile-join-bar {
    inset: auto .6rem .6rem; min-height: 3.5rem; padding: .65rem 1.1rem; border-radius: 2px;
    border: 1px solid rgba(249,200,204,.6);
    background: linear-gradient(120deg, var(--burgundy), #c00912);
    box-shadow: 0 .8rem 2rem -.4rem rgba(220,11,23,.5);
  }
  .mobile-join-bar span { font-size: .4rem; letter-spacing: .14em; }
  .mobile-join-bar strong { font-size: .98rem; }

  /* ─── MOTION — états masqués avant l'entrée JS ──────── */
  .m-motion .reveal-up { opacity: 0; transform: translateY(2.2rem); }
  .m-motion .reveal-mask { clip-path: inset(0 0 100% 0); }
  .m-motion .hero h1 .line > span { opacity: 0; transform: translateY(1.4rem); }
  .m-motion .hero-label,
  .m-motion .hero-actions,
  .m-motion .hero-meta,
  .m-motion .hero-image,
  .m-motion .hero-text::before { opacity: 0; }

  @keyframes seal-float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-.4rem) rotate(2deg); }
  }
}

@media (max-width: 699px) and (prefers-reduced-motion: reduce) {
  .m-motion .reveal-up,
  .m-motion .hero h1 .line > span,
  .m-motion .hero-label,
  .m-motion .hero-actions,
  .m-motion .hero-meta,
  .m-motion .hero-image,
  .m-motion .hero-text::before { opacity: 1 !important; transform: none !important; }
  .m-motion .reveal-mask { clip-path: none !important; }
}