/* ============================================================
   Z0 — Page Expériences (redesign "Cinéma", palette sombre)
   D'après le handoff Claude Design. Partagé FR + EN.
   Tokens : fond #13100b, or #b89160, encre crème #ece5d6.
   ============================================================ */

.xp {
  --bg: #13100b;
  --bg2: #1a160f;
  --panel: #211b13;
  --ink: #ece5d6;
  --ink2: #b8ad9b;
  --muted: #8a8071;
  --line: rgba(236, 229, 214, 0.12);
  --gold: #b89160;
  background: var(--bg);
  color: var(--ink);
  font-family: 'Instrument Sans', system-ui, sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
.xp * { box-sizing: border-box; }
.xp ::selection { background: var(--gold); color: var(--bg); }

@keyframes z0fade { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes z0pop  { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: scale(1); } }

.xp-wrap { max-width: 1280px; margin: 0 auto; padding-left: 40px; padding-right: 40px; }

/* ── NAV (sombre, sticky) ── */
.xp-nav {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  background: rgba(19, 16, 11, 0.72);
  border-bottom: 1px solid var(--line);
}
.xp-nav__inner {
  max-width: 1280px; margin: 0 auto; padding: 18px 40px;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.xp-nav__logo {
  font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 500;
  letter-spacing: .04em; color: var(--ink); text-decoration: none; line-height: 1; flex-shrink: 0;
}
.xp-nav__links {
  display: flex; align-items: center; gap: 30px;
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase;
}
.xp-nav__links a { color: var(--ink2); text-decoration: none; white-space: nowrap; transition: color .25s ease; }
.xp-nav__links a:hover { color: var(--ink); }
.xp-nav__links a.is-active { color: var(--gold); }
.xp-nav__right {
  display: flex; align-items: center; gap: 18px;
  font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .12em; flex-shrink: 0;
}
.xp-nav__lang { display: flex; align-items: center; gap: 8px; color: var(--muted); }
.xp-nav__lang a { text-decoration: none; color: var(--muted); transition: color .25s ease; }
.xp-nav__lang a:hover { color: var(--ink); }
.xp-nav__lang a.is-active { color: var(--ink); }
.xp-nav__lang .sep { opacity: .4; }
.xp-nav__cta {
  text-decoration: none; color: var(--bg); background: var(--gold);
  padding: 9px 18px; border-radius: 1px; letter-spacing: .14em; text-transform: uppercase;
  transition: background .25s ease;
}
.xp-nav__cta:hover { background: #cda06c; }

/* ── HERO ── */
.xp-hero { position: relative; height: 84vh; min-height: 560px; width: 100%; overflow: hidden; display: flex; align-items: center; }
.xp-hero__bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.xp-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,16,11,.55) 0%, rgba(19,16,11,.1) 38%, rgba(19,16,11,.82) 100%); }
.xp-hero__inner { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 40px; }

.xp-eyebrow { font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .32em; text-transform: uppercase; color: var(--gold); }
.xp-hero__eyebrow { margin-bottom: 22px; animation: z0fade .8s ease both; }
.xp-hero__title {
  font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(44px, 6.4vw, 88px);
  line-height: .98; letter-spacing: -.01em; margin: 0; max-width: 16ch; color: var(--ink);
  animation: z0fade 1s ease both;
}
.xp-hero__sub {
  font-family: 'Instrument Sans', sans-serif; font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.6; color: var(--ink2); max-width: 44ch; margin: 26px 0 0; animation: z0fade 1.2s ease both;
}

/* ── INTRO ── */
.xp-intro { max-width: 1280px; margin: 0 auto; padding: 96px 40px 8px; }
.xp-intro__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; flex-wrap: wrap; border-bottom: 1px solid var(--line); padding-bottom: 34px; }
.xp-intro__label { font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.xp-intro__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.01em; margin: 0; max-width: 18ch; color: var(--ink); }
.xp-intro__sub { font-family: 'Instrument Sans', sans-serif; font-size: 15px; line-height: 1.7; color: var(--muted); max-width: 34ch; margin: 0; }

/* ── CINEMA (sections plein écran) ── */
.xp-scene { position: relative; height: 86vh; min-height: 540px; width: 100%; overflow: hidden; cursor: pointer; display: flex; align-items: flex-end; }
.xp-scene__bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 1.4s cubic-bezier(.2,.8,.2,1); }
.xp-scene:hover .xp-scene__bg { transform: scale(1.04); }
.xp-scene__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(19,16,11,.2) 0%, rgba(19,16,11,0) 30%, rgba(19,16,11,.86) 100%); }
.xp-scene__inner { position: relative; max-width: 1280px; width: 100%; margin: 0 auto; padding: 0 40px 72px; }
.xp-scene__meta { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.xp-scene__num { font-family: 'Space Mono', monospace; font-size: 13px; letter-spacing: .2em; color: var(--gold); }
.xp-scene__rule { width: 40px; height: 1px; background: var(--gold); opacity: .6; }
.xp-scene__tag { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .26em; text-transform: uppercase; color: var(--ink2); }
.xp-scene__soon { font-family: 'Space Mono', monospace; font-size: 9.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); border: 1px solid rgba(184,145,96,.55); padding: 3px 10px; border-radius: 40px; white-space: nowrap; }
.xp-scene__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(40px, 6vw, 84px); line-height: .98; letter-spacing: -.01em; margin: 0 0 16px; color: var(--ink); max-width: 16ch; }
.xp-scene__desc { font-family: 'Instrument Sans', sans-serif; font-size: 17px; line-height: 1.6; color: var(--ink2); max-width: 46ch; margin: 0; }

/* ── SUR-MESURE ── */
.xp-bespoke { max-width: 1280px; margin: 0 auto; padding: 88px 40px 40px; }
.xp-bespoke__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 80px); align-items: stretch; background: var(--bg2); border: 1px solid var(--line); border-radius: 2px; overflow: hidden; }
.xp-bespoke__media { position: relative; min-height: 380px; overflow: hidden; }
.xp-bespoke__media .bg { position: absolute; inset: 0; background-size: cover; background-position: center; }
.xp-bespoke__media .scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(19,16,11,.1), rgba(19,16,11,.55)); }
.xp-bespoke__body { padding: clamp(34px, 4vw, 64px) clamp(28px, 4vw, 56px) clamp(34px, 4vw, 64px) 0; display: flex; flex-direction: column; justify-content: center; }
.xp-bespoke__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(32px, 4vw, 56px); line-height: 1.02; letter-spacing: -.01em; margin: 0 0 20px; color: var(--ink); max-width: 16ch; }
.xp-bespoke__desc { font-family: 'Instrument Sans', sans-serif; font-size: 16px; line-height: 1.66; color: var(--ink2); max-width: 42ch; margin: 0 0 30px; }
.xp-cta { align-self: flex-start; text-decoration: none; color: var(--bg); background: var(--gold); font-family: 'Space Mono', monospace; font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; padding: 14px 26px; border-radius: 1px; transition: background .25s ease; }
.xp-cta:hover { background: #cda06c; }

.xp-concierge { margin-top: 38px; padding-top: 30px; border-top: 1px solid var(--line); }
.xp-concierge__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.xp-concierge__avatar { width: 38px; height: 38px; border-radius: 50%; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-family: 'Cormorant Garamond', serif; font-size: 20px; color: var(--gold); }
.xp-concierge__name { font-family: 'Instrument Sans', sans-serif; font-size: 14px; font-weight: 600; color: var(--ink); }
.xp-concierge__status { display: flex; align-items: center; gap: 7px; font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .1em; color: var(--muted); margin-top: 3px; }
.xp-concierge__dot { width: 6px; height: 6px; border-radius: 50%; background: #6fae7e; display: inline-block; }
.xp-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.xp-chip { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .08em; color: var(--ink2); border: 1px solid var(--line); padding: 7px 13px; border-radius: 40px; text-decoration: none; transition: all .25s ease; }
.xp-chip:hover { border-color: var(--gold); color: var(--gold); }

/* ── FOOTER ── */
.xp-footer { margin-top: 64px; }
.xp-footer__hero { text-align: center; padding: 72px 0 64px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.xp-footer__logo { font-family: 'Cormorant Garamond', serif; font-size: 56px; font-weight: 500; letter-spacing: .04em; color: var(--ink); line-height: 1; }
.xp-footer__tagline { font-family: 'Cormorant Garamond', serif; font-style: italic; font-weight: 300; font-size: clamp(22px, 2.6vw, 32px); line-height: 1.3; color: var(--ink2); max-width: 24ch; margin: 26px auto 0; }
.xp-footer__place { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .28em; text-transform: uppercase; color: var(--muted); margin-top: 24px; }
.xp-footer__cols { padding: 48px 40px 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; max-width: 1280px; margin: 0 auto; }
.xp-footer__coltitle { font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); margin-bottom: 18px; }
.xp-footer__list { display: flex; flex-direction: column; gap: 11px; font-family: 'Instrument Sans', sans-serif; font-size: 14px; }
.xp-footer__list a { color: var(--ink2); text-decoration: none; transition: color .25s ease; }
.xp-footer__list a:hover { color: var(--ink); }
.xp-footer__bottom { max-width: 1280px; margin: 0 auto; padding: 24px 40px 64px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-family: 'Space Mono', monospace; font-size: 10.5px; letter-spacing: .14em; color: var(--muted); }

/* ── LIGHTBOX ── */
.xp-lightbox { position: fixed; inset: 0; z-index: 80; background: rgba(10,8,5,0.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); display: none; flex-direction: column; align-items: center; justify-content: center; padding: 48px; cursor: zoom-out; }
.xp-lightbox.is-open { display: flex; animation: z0fade .35s ease both; }
.xp-lightbox__counter { position: absolute; top: 24px; left: 40px; font-family: 'Space Mono', monospace; font-size: 12px; letter-spacing: .2em; color: var(--gold); }
.xp-lightbox__close { position: absolute; top: 22px; right: 38px; width: 42px; height: 42px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); font-size: 20px; line-height: 1; transition: all .25s ease; }
.xp-lightbox__close:hover { border-color: var(--gold); color: var(--gold); }
.xp-lightbox__stage { display: flex; flex-direction: column; align-items: center; max-width: min(1100px, 90vw); cursor: default; }
.xp-lightbox__img { width: min(1100px, 90vw); height: 72vh; background-size: contain; background-position: center; background-repeat: no-repeat; animation: z0pop .4s ease both; }
.xp-lightbox__bar { display: flex; align-items: flex-end; justify-content: space-between; width: 100%; gap: 24px; margin-top: 22px; }
.xp-lightbox__num { font-family: 'Space Mono', monospace; font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; }
.xp-lightbox__title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 30px; color: var(--ink); }
.xp-lightbox__arrows { display: flex; gap: 10px; }
.xp-lightbox__arrow { width: 46px; height: 46px; border: 1px solid var(--line); border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink); font-size: 18px; transition: all .25s ease; }
.xp-lightbox__arrow:hover { border-color: var(--gold); color: var(--gold); }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .xp-nav__inner { flex-wrap: wrap; padding: 14px 20px; gap: 12px; }
  .xp-nav__links { order: 3; width: 100%; gap: 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .xp-nav__links::-webkit-scrollbar { display: none; }
  .xp-hero__inner, .xp-scene__inner { padding-left: 20px; padding-right: 20px; }
  .xp-hero__inner { padding-bottom: 44px; }
  .xp-scene__inner { padding-bottom: 52px; }
  .xp-intro { padding: 64px 20px 8px; }
  .xp-bespoke { padding: 56px 20px 32px; }
  .xp-bespoke__grid { grid-template-columns: 1fr; }
  .xp-bespoke__media { min-height: 260px; }
  .xp-bespoke__body { padding: 32px 24px 36px; }
  .xp-wrap, .xp-footer__cols, .xp-footer__bottom { padding-left: 24px; padding-right: 24px; }
}
@media (max-width: 600px) {
  .xp-footer__cols { grid-template-columns: 1fr; gap: 28px; }
}
@media (prefers-reduced-motion: reduce) {
  .xp-hero__eyebrow, .xp-hero__title, .xp-hero__sub, .xp-lightbox.is-open, .xp-lightbox__img { animation: none; }
  .xp-scene__bg { transition: none; }
}