/* ============================================================
   MISTER HYPE — vitrine (V2.2)
   Dark editorial premium. Mobile-first strict (390px, in-app IG, 4G).
   Jaune = action & prix · Violet = identité & expérience · Noir = base.
   ============================================================ */

:root {
  --noir: #0A0A0A;
  --surface: #141414;
  --surface-2: #1D1D1D;
  --jaune: #FFD60A;
  --violet: #7B3FE4;
  --violet-soft: #A276F0;
  --violet-bg: #14092B;
  --violet-deep: #0E0618;
  --txt: #F5F5F0;
  --txt-dim: #A3A3A3;
  --line: #262626;
  --pad: clamp(20px, 5vw, 48px);
  --block-gap: clamp(72px, 18vw, 160px);
  --radius: 12px;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --z-sticky: 30;
  --z-sheet: 40;
}

* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }
html.smooth-scroll { scroll-behavior: auto; }

body {
  background: var(--noir);
  color: var(--txt);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--jaune); color: var(--noir); }

h1, h2, h3 { text-wrap: balance; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

:focus-visible { outline: 3px solid var(--violet); outline-offset: 3px; }

img, video { display: block; max-width: 100%; }

/* ---------- Boutons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 26px;
  border-radius: var(--radius);
  border: none;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.01em;
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.2s var(--ease-out),
              border-color 0.2s var(--ease-out), box-shadow 0.2s var(--ease-out);
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--jaune); color: var(--noir); }
.btn-primary:hover { box-shadow: 0 6px 24px rgba(255, 214, 10, 0.25); }
.btn-ghost {
  background: transparent;
  color: var(--txt);
  border: 1px solid var(--line);
}
.btn-ghost:hover { border-color: var(--violet); }

/* ---------- Cadres média (reveal + parallax) ---------- */
.media-frame {
  overflow: hidden;
  border-radius: 14px;
  background: var(--surface-2);
}
.media-frame img, .media-frame video {
  width: 100%; height: 100%;
  object-fit: cover;
}
/* parallax : sur-échelle pour donner du débattement (JS pilote translateY) */
.plx { transform: scale(1.12); will-change: transform; }

/* ============================================================
   S1 — HERO + RÉSA
   ============================================================ */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background:
    radial-gradient(120% 70% at 80% 0%, #1a1023 0%, var(--noir) 60%),
    var(--noir);
}
.hero-media {
  position: absolute; inset: -4%;
  background: url("assets/hero-poster.jpg") center / cover no-repeat;
}
.hero-media video {
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.hero-media video.playing { opacity: 1; }
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.5) 0%, rgba(10,10,10,0.5) 45%, rgba(10,10,10,0.95) 100%);
}
@keyframes kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.06); }
}
.hero-media { animation: kenburns 20s var(--ease-out) infinite alternate; }

.hero-logo {
  position: absolute;
  top: calc(18px + env(safe-area-inset-top));
  left: var(--pad);
  z-index: 2;
  font-family: 'Anton', sans-serif;
  font-size: 18px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--txt);
  animation: rise 0.7s var(--ease-expo) 0.05s both;
}

.hero-content {
  position: relative;
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 18vh var(--pad) clamp(44px, 9vh, 88px);
}
.hero-title {
  font-family: 'Anton', 'Inter', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(3.2rem, 15vw, 5.6rem);
  line-height: 1.06;
  letter-spacing: 0;
  /* 2 lignes fixes ("Ton style," / "ton pouvoir.") : hauteur réservée
     → zéro layout shift au swap de police (CLS) */
  height: 2.12em;
  overflow: hidden;
}
.accent { color: var(--jaune); }
.violet { color: var(--violet-soft); }
.hero-sub {
  margin-top: 22px;
  font-size: 17px;
  max-width: 30em;
}
.hero-cta { margin-top: 26px; width: 100%; }

/* Choréo d'entrée : masque ligne par ligne puis rise */
.mline { display: block; overflow: hidden; padding: 0.1em 0; margin: -0.1em 0; }
.mtxt { display: block; }
@keyframes maskUp {
  0%   { transform: translateY(110%); }
  78%  { transform: translateY(-2.5%); }
  100% { transform: none; }
}
.hero .mtxt { animation: maskUp 0.9s var(--ease-expo) both; }
.h1a { animation-delay: 0.15s; }
.h1b { animation-delay: 0.26s; }
@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.rise { animation: rise 0.7s var(--ease-expo) both; }
.r4 { animation-delay: 0.5s; }
.r5 { animation-delay: 0.62s; }

/* ============================================================
   S2 — LES OFFRES
   ============================================================ */
.offers { padding-top: var(--block-gap); }
.offers-head {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.section-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8.6vw, 3.4rem);
  line-height: 1.12;
}
.title-rule {
  width: 64px; height: 3px;
  background: var(--violet);
  margin: 22px 0;
  transform-origin: left center;
}
.offers-intro { font-size: 16px; color: var(--txt-dim); max-width: 38em; }

.offer-track {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 34px var(--pad) 10px;
  scrollbar-width: none;
}
.offer-track::-webkit-scrollbar { display: none; }

.offer-card {
  position: relative;
  flex: 0 0 min(85vw, 400px);
  scroll-snap-align: center;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 22px 28px;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s var(--ease-out), box-shadow 0.35s var(--ease-out),
              border-color 0.35s var(--ease-out);
}
.offer-card.is-active {
  transform: translateY(-6px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
  border-color: #3a3a3a;
}


.offer-media {
  aspect-ratio: 4 / 5;
  margin: 0 -22px 20px;
  border-radius: 17px 17px 0 0;
  position: relative;
}
.offer-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  align-self: flex-start;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 12px;
  letter-spacing: 0.08em;
  padding: 6px 13px;
  margin-bottom: 16px;
}
.offer-badge--gold {
  background: var(--jaune);
  border-color: var(--jaune);
  color: var(--noir);
}
.offer-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 4.9vw, 1.3rem);
  line-height: 1.18;
  margin-bottom: 12px;
  text-wrap: balance;
  hyphens: none;
  overflow-wrap: normal;
}
.offer-text { font-size: 15px; }
.offer-note { font-size: 12.5px; color: var(--txt-dim); margin-top: 12px; }

/* --- Simulateur : jauge 1→10 --- */
.sim {
  margin: 22px 0;
  padding: 18px 16px 16px;
  background: var(--noir);
  border: 1px solid var(--line);
  border-radius: 14px;
}
.sim-q { font-size: 14px; font-weight: 800; margin-bottom: 12px; }
.sim-toggle {
  display: flex;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 26px;
}
.sim-toggle button {
  flex: 1;
  min-height: 44px;
  border: none;
  background: transparent;
  color: var(--txt-dim);
  font-family: 'Inter', sans-serif;
  font-size: 13.5px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}
.sim-toggle button[aria-pressed="true"] { background: var(--txt); color: var(--noir); }

.sim-gauge { position: relative; padding-top: 32px; }
.sim-count {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Anton', sans-serif;
  font-size: 23px;
  line-height: 1;
  color: var(--jaune);
  pointer-events: none;
  transition: left 0.08s linear;
}
input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 44px;
  background: transparent;
  cursor: pointer;
  --p: 33.33%;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--jaune) var(--p), var(--surface-2) var(--p));
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 44px; height: 44px;
  margin-top: -19px;
  border-radius: 50%;
  background: var(--jaune);
  border: 4px solid var(--noir);
  box-shadow: 0 0 0 1.5px var(--jaune), 0 6px 18px rgba(0,0,0,0.5);
}
input[type="range"]::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--surface-2);
}
input[type="range"]::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--jaune);
}
input[type="range"]::-moz-range-thumb {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--jaune);
  border: 4px solid var(--noir);
  box-shadow: 0 0 0 1.5px var(--jaune);
}
.sim-scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  font-weight: 700;
  color: var(--txt-dim);
  margin-top: 2px;
}

.sim-result { margin-top: 12px; min-height: 88px; }
.sim-msg { font-size: 13.5px; line-height: 1.5; }
.sim-msg strong { color: var(--jaune); font-weight: 800; }
.sim-save {
  display: block;
  margin-top: 8px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.02rem, 4.1vw, 1.28rem);
  line-height: 1.18;
  color: var(--jaune);
  white-space: nowrap;
  hyphens: none;
}
@media (max-width: 359px) { .sim-save { white-space: normal; } }
@keyframes msgIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.sim-msg-in { animation: msgIn 0.45s var(--ease-expo) both; }

.sim-moments {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.sim-moments li {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--txt-dim);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 11px;
}

/* --- Formules --- */
.formules { display: flex; flex-direction: column; gap: 10px; }
.formule {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-align: left;
  border: 1.5px solid var(--line);
  background: var(--noir);
  color: var(--txt);
  padding: 15px 16px;
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Inter', sans-serif;
  transition: border-color 0.2s ease, background 0.2s ease, transform 0.1s ease;
}
.formule:active { transform: scale(0.99); }
.formule[aria-pressed="true"] { border-color: var(--jaune); background: var(--surface-2); }
.formule[aria-pressed="true"] .f-price { color: var(--jaune); }
.f-name {
  font-size: 15px; font-weight: 700; line-height: 1.3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
}
.f-badge {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--jaune);
  color: var(--noir);
  padding: 3px 7px;
  border-radius: 5px;
}
.f-badge--soon { background: var(--surface-2); color: var(--violet-soft); border: 1px solid var(--violet); }
.f-price { font-family: 'Anton', sans-serif; font-size: 25px; white-space: nowrap; }
.f-price small { font-size: 12px; color: var(--txt-dim); font-family: 'Inter', sans-serif; font-weight: 600; }

.formule--teaser {
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  cursor: default;
  opacity: 0.55;
  border-style: dashed;
}
.f-teaser-text { font-size: 12.5px; color: var(--txt-dim); line-height: 1.5; }

.offer-reassure {
  margin: 18px 0 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--txt-dim);
  line-height: 1.7;
}
.offer-cta { width: 100%; margin-top: auto; }

.offer-dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  padding: 16px var(--pad) 0;
}
.offer-dots span {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--line);
  transition: background 0.25s ease, transform 0.25s ease;
}
.offer-dots span.on { background: var(--jaune); transform: scale(1.25); }

/* ============================================================
   S3 — UN LIEU, QUATRE EXPÉRIENCES (dominante violette)
   ============================================================ */
.world {
  margin-top: var(--block-gap);
  background:
    radial-gradient(90% 40% at 50% 0%, rgba(123, 63, 228, 0.16) 0%, rgba(123, 63, 228, 0) 70%),
    var(--violet-bg);
  border-top: 1px solid rgba(123, 63, 228, 0.35);
  border-bottom: 1px solid rgba(123, 63, 228, 0.35);
  padding-bottom: clamp(64px, 14vw, 120px);
}
.world-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.world-inner:first-child { padding-top: clamp(64px, 14vw, 120px); }
.world-open, .world-close {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.9rem, 8.6vw, 3.6rem);
  line-height: 1.14;
}
.world-close { margin-top: clamp(48px, 10vw, 80px); }

/* Marquee violet */
.marquee { overflow: hidden; padding: 14px 0; }
.marquee--violet {
  margin-top: clamp(36px, 8vw, 64px);
  border-top: 1px solid rgba(123, 63, 228, 0.35);
  border-bottom: 1px solid rgba(123, 63, 228, 0.35);
  background: var(--violet-deep);
}
.marquee-track {
  display: flex;
  width: max-content;
  white-space: nowrap;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 17px;
  letter-spacing: 0.06em;
  color: var(--violet-soft);
  animation: marquee 26s linear infinite;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-25%); }
}

.xp-list {
  list-style: none;
  margin-top: clamp(44px, 9vw, 72px);
  display: flex;
  flex-direction: column;
  gap: clamp(44px, 10vw, 88px);
}
.xp { display: flex; flex-direction: column; gap: 18px; }
.xp-media {
  aspect-ratio: 3 / 4;
  border: 1px solid rgba(123, 63, 228, 0.4);
  background:
    radial-gradient(80% 90% at 20% 10%, rgba(123, 63, 228, 0.22) 0%, rgba(123, 63, 228, 0) 65%),
    var(--violet-deep);
}
.xp-num {
  font-family: 'Anton', sans-serif;
  font-size: 15px;
  letter-spacing: 0.1em;
  color: var(--violet-soft);
  margin-bottom: 6px;
}
.xp-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.7rem, 7.6vw, 2.6rem);
  line-height: 1.1;
}
.xp-rule {
  width: 48px; height: 2px;
  background: var(--violet);
  margin: 14px 0 12px;
  transform-origin: left center;
}
.xp-text { font-size: 15.5px; color: #CFC6E2; max-width: 34em; }

/* ============================================================
   GALERIE — L'EXPÉRIENCE EN IMAGES
   ============================================================ */
.gallery { padding-top: var(--block-gap); }
.gallery .section-title {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--pad);
}
.gallery-track {
  display: flex;
  align-items: center;
  gap: 18px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 34px var(--pad) 16px;
  scrollbar-width: none;
  cursor: grab;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track.dragging { cursor: grabbing; scroll-snap-type: none; }
.gallery-track figure {
  flex: 0 0 min(70vw, 320px);
  aspect-ratio: 4 / 5;
  scroll-snap-align: center;
  border-radius: 14px;
  overflow: hidden;
  background: var(--surface-2);
  transform: rotate(-1.5deg);
}
.gallery-track figure:nth-child(even) { transform: rotate(1.5deg); }
.gallery-track img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  -webkit-user-drag: none;
}

/* ============================================================
   S4 — PREUVE + RÉASSURANCE
   ============================================================ */
.proof {
  padding-top: var(--block-gap);
  max-width: 1280px;
  margin: 0 auto;
}
.proof-score {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 0 var(--pad);
}
.score-number {
  font-family: 'Anton', sans-serif;
  font-size: clamp(4.4rem, 22vw, 8rem);
  line-height: 1;
}
.score-star { font-size: clamp(2rem, 9vw, 3.4rem); color: var(--jaune); line-height: 1; }
.score-label { font-size: 16px; font-weight: 700; color: var(--txt-dim); }

.reviews {
  list-style: none;
  display: flex;
  gap: 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 30px var(--pad) 8px;
  scrollbar-width: none;
}
.reviews::-webkit-scrollbar { display: none; }
.review {
  flex: 0 0 min(78vw, 340px);
  scroll-snap-align: start;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.review-stars { color: var(--jaune); font-size: 14px; letter-spacing: 3px; }
.review blockquote { font-size: 15.5px; line-height: 1.55; }
.review-author { font-size: 13px; font-weight: 700; color: var(--txt-dim); margin-top: auto; }

.salons {
  padding: clamp(48px, 10vw, 72px) var(--pad) 0;
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.salons-media { aspect-ratio: 4 / 5; max-width: 480px; }
.salons-names {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.6rem, 7vw, 2.6rem);
  line-height: 1.12;
}
.salons-adresses {
  list-style: none;
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.salons-adresses li { font-size: 15px; color: var(--txt-dim); }
.salons-adresses strong { color: var(--txt); font-weight: 700; }
.salons-note { margin-top: 12px; font-size: 15px; color: var(--violet-soft); font-weight: 600; }

.reassure-mini {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reassure-mini li {
  font-size: 14px;
  font-weight: 600;
  color: var(--txt-dim);
  padding-left: 18px;
  position: relative;
}
.reassure-mini li::before {
  content: "+";
  position: absolute; left: 0;
  color: var(--jaune);
  font-weight: 800;
}

.final-ctas { margin-top: 30px; max-width: 420px; }
.final-ctas .btn { width: 100%; }

/* ---------- Footer ---------- */
.footer {
  border-top: 1px solid var(--line);
  margin-top: clamp(56px, 12vw, 96px);
  padding: 40px var(--pad) calc(120px + env(safe-area-inset-bottom));
  color: var(--txt-dim);
}
.footer-inner { max-width: 1280px; margin: 0 auto; }
.footer-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
}
.footer-brand {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 24px;
  letter-spacing: 0.02em;
  color: var(--txt);
}
.footer-ig {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--txt);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  transition: color 0.2s ease;
}
.footer-ig:hover { color: var(--violet-soft); }
.footer-ig .ig-icon { width: 22px; height: 22px; flex: none; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 26px;
  padding: 28px 0;
}
.footer-col { display: flex; flex-direction: column; gap: 6px; }
.footer-h {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--violet-soft);
  margin-bottom: 4px;
}
.footer-col p, .footer-col a { font-size: 14px; line-height: 1.5; color: var(--txt-dim); }
.footer-col a { text-decoration: none; transition: color 0.2s ease; }
.footer-col a:hover { color: var(--jaune); }
.footer-copy {
  font-size: 12.5px;
  color: var(--txt-dim);
  padding-top: 22px;
  border-top: 1px solid var(--line);
}

/* ---------- Pages légales (prose) ---------- */
.legal .subpage-hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
.legal-block { margin-top: clamp(28px, 7vw, 40px); }
.legal-block h2 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 5vw, 1.4rem);
  line-height: 1.2;
  color: var(--txt);
  margin-bottom: 12px;
}
.legal-block p { font-size: 15px; line-height: 1.65; color: #D0CEC9; margin-bottom: 10px; max-width: 62ch; }
.legal-block a { color: var(--jaune); text-decoration: none; }
.legal-block a:hover { text-decoration: underline; }
.legal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-width: 62ch; }
.legal-list li { font-size: 15px; line-height: 1.55; color: #D0CEC9; padding-left: 16px; position: relative; }
.legal-list li::before { content: "·"; position: absolute; left: 2px; color: var(--violet-soft); font-weight: 800; }
.legal-list strong { color: var(--txt); font-weight: 700; }
.legal-back { margin-top: clamp(36px, 9vw, 52px); }
.legal-back a { color: var(--txt-dim); text-decoration: none; font-weight: 600; font-size: 14px; }
.legal-back a:hover { color: var(--jaune); }

/* ============================================================
   STICKY BAR (mobile)
   ============================================================ */
.sticky-bar {
  position: fixed;
  left: 12px; right: 12px;
  bottom: calc(10px + env(safe-area-inset-bottom));
  z-index: var(--z-sticky);
  display: flex;
  gap: 8px;
  padding: 8px;
  border-radius: 999px;
  transform: translateY(140%);
  transition: transform 0.35s var(--ease-expo);
  pointer-events: none;
}
.sticky-bar.visible { transform: translateY(0); pointer-events: auto; }
.sticky-bar .btn { min-height: 50px; font-size: 14.5px; padding: 12px 10px; white-space: nowrap; border-radius: 999px; }
.sticky-bar .btn-primary { flex: 1.3; }
.sticky-bar .btn-ghost { flex: 1; background: rgba(10, 10, 10, 0.45); border-color: transparent; }

/* ============================================================
   CHOIX DU SALON (bottom sheet <dialog>)
   ============================================================ */
.resa-sheet {
  z-index: var(--z-sheet);
  border: none;
  padding: 0;
  background: transparent;
  width: 100%;
  max-width: none;
  margin: auto 0 0;
}
.resa-sheet::backdrop { background: rgba(10, 10, 10, 0.72); }
.resa-inner {
  background: var(--surface);
  border-top: 1px solid var(--line);
  border-radius: 20px 20px 0 0;
  padding: 26px var(--pad) calc(22px + env(safe-area-inset-bottom));
  max-width: 560px;
  margin: 0 auto;
}
@keyframes sheetIn {
  from { transform: translateY(40px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.resa-sheet[open] .resa-inner { animation: sheetIn 0.35s var(--ease-expo) both; }
.resa-title {
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: 1.5rem;
  margin-bottom: 18px;
}
.resa-salon {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 60px;
  padding: 16px 18px;
  margin-bottom: 10px;
  background: var(--noir);
  border: 1.5px solid var(--line);
  border-radius: 14px;
  color: var(--txt);
  text-decoration: none;
  font-size: 16.5px;
  font-weight: 800;
  transition: border-color 0.2s ease, transform 0.1s ease;
}
.resa-salon:active { transform: scale(0.98); }
.resa-salon:hover { border-color: var(--violet); }
.rs-arrow { color: var(--jaune); font-weight: 800; transition: transform 0.2s var(--ease-out); }
.resa-salon:hover .rs-arrow { transform: translateX(4px); }
.resa-note { font-size: 12.5px; color: var(--txt-dim); margin: 12px 0 16px; }
.resa-close {
  width: 100%;
  min-height: 48px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: transparent;
  color: var(--txt-dim);
  font-family: 'Inter', sans-serif;
  font-size: 14.5px;
  font-weight: 700;
  cursor: pointer;
}

/* ============================================================
   REVEALS (enhancement JS — tout visible par défaut)
   ============================================================ */
.xp-pre { opacity: 0; transform: translateY(40px); }
.xp-pre .xp-rule { transform: scaleX(0); }
.xp-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}
.xp-in .xp-rule {
  transform: scaleX(1);
  transition: transform 0.7s var(--ease-expo) 0.25s;
}
.title-rule.xp-pre { opacity: 1; transform: scaleX(0); }
.title-rule.xp-in { transform: scaleX(1); transition: transform 0.8s var(--ease-expo) 0.15s; }

/* titres en masque, ligne par ligne (JS split-lines) */
.split-lines .mtxt.xp-pre { opacity: 1; transform: translateY(110%); }
.split-lines .mtxt.xp-in {
  transform: none;
  transition: transform 0.85s var(--ease-expo);
  transition-delay: var(--d, 0s);
}

/* images/vidéos : RIDEAU clip-path (haut→bas), 900 ms — GPU-léger */
.media-frame .mimg-pre { clip-path: inset(0 0 100% 0); }
.media-frame .mimg-in {
  clip-path: inset(0 0 0% 0);
  transition: clip-path 0.9s var(--ease-out);
}
/* le parallax garde son transform : le rideau n'y touche pas */
.media-frame .plx.mimg-pre { clip-path: inset(0 0 100% 0); }
.media-frame .plx.mimg-in { clip-path: inset(0 0 0% 0); transition: clip-path 0.9s var(--ease-out); }
/* galerie : rideau gauche→droite */
.gallery-track .mimg-pre { clip-path: inset(0 100% 0 0); }
.gallery-track .mimg-in { clip-path: inset(0 0% 0 0); transition: clip-path 0.9s var(--ease-out); }

/* stagger de listes/cartes */
[data-stagger] > .st-pre { opacity: 0; transform: translateY(40px); }
[data-stagger] > .st-in {
  opacity: 1;
  transform: none;
  transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
  transition-delay: var(--d, 0s);
}
/* les cartes offres gardent leur transform propre (is-active) */
.offer-track > .st-pre { opacity: 0; transform: translateY(40px); }
.offer-track > .st-in { opacity: 1; }
/* la galerie garde sa rotation alternée après reveal */
.gallery-track > .st-pre { opacity: 0; transform: rotate(-1.5deg) translateY(40px); }
.gallery-track > .st-pre:nth-child(even) { transform: rotate(1.5deg) translateY(40px); }
.gallery-track > .st-in { transform: rotate(-1.5deg); }
.gallery-track > .st-in:nth-child(even) { transform: rotate(1.5deg); }
.sim-line { display: block; }

/* ============================================================
   DESKTOP (adaptation secondaire)
   ============================================================ */
@media (min-width: 780px) {
  .hero-cta { width: auto; min-width: 320px; }

  .offer-track {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    overflow: visible;
    max-width: 1280px;
    margin: 0 auto;
    align-items: start;
  }
  .offer-card { flex: none; }
  .offer-card:hover { transform: translateY(-6px); box-shadow: 0 18px 44px rgba(0,0,0,0.5); border-color: #3a3a3a; }
  .offer-dots { display: none; }

  .xp {
    flex-direction: row;
    align-items: center;
    gap: clamp(28px, 5vw, 56px);
  }
  .xp-media { flex: 0 0 44%; }
  .xp:nth-child(even) { flex-direction: row-reverse; }

  .gallery-track figure { flex: 0 0 300px; }

  .salons { flex-direction: row; align-items: center; gap: clamp(32px, 6vw, 64px); }
  .salons-media { flex: 0 0 40%; }

  .sticky-bar { justify-content: center; }
  .sticky-bar .btn { flex: none; min-width: 240px; }

  .reviews { flex-wrap: wrap; overflow: visible; }
  .review { flex: 1 1 calc(50% - 14px); }

  .resa-sheet { margin: auto; width: min(92vw, 480px); }
  .resa-inner { border-radius: 20px; border: 1px solid var(--line); }
}

/* ============================================================
   REDUCED MOTION — tout statique (non négociable)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .rise, .hero .mtxt { opacity: 1; transform: none; }
  .xp-pre, .split-lines .mtxt.xp-pre, .media-frame .mimg-pre,
  [data-stagger] > .st-pre { opacity: 1; transform: none; }
  .media-frame .mimg-pre, .gallery-track .mimg-pre { clip-path: none !important; }
  .xp-pre .xp-rule, .title-rule { transform: none; }
  .plx { transform: none; will-change: auto; }
  .marquee-track {
    white-space: normal;
    width: 100%;
    justify-content: center;
  }
  .marquee-track span:nth-child(n+2) { display: none; }
  .sticky-bar { transform: translateY(110%); }
  .sticky-bar.visible { transform: translateY(0); }
  .gallery-track figure, .gallery-track figure:nth-child(even) { transform: none; }
}


/* ============================================================
   LIQUID GLASS (§10) — badges S2 + sticky bar uniquement
   ============================================================ */
/* badges : verre CLAIR Tahoe (la classe .glass porte l'effet) */
.offer-badge.glass {
  border-radius: 999px;
  color: var(--txt);
}
.offer-badge--gold.glass {
  background: rgba(255, 214, 10, 0.82);
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--noir);
}

/* §8 — double note Google (Saint-Paul / Sainte-Clotilde) */
.proof-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 18px clamp(28px, 6vw, 72px);
  padding: 0 var(--pad);
}
.proof-scores .proof-score { padding: 0; align-items: baseline; }
.score-label { line-height: 1.35; }


/* ============================================================
   S2 — CARROUSEL 3D (validé, intégré) — CSS 3D pur
   ============================================================ */
.c3d-stage {
  margin-top: 30px;
  /* la carte centrale est rapprochée (translateZ 90px ≈ ×1.08) : ce padding
     vertical vit DANS la zone de clip et empêche le rognage haut/bas. */
  padding: 42px 0 26px;
  perspective: 1200px;
  perspective-origin: 50% 42%;
  overflow: hidden;
  touch-action: pan-y; /* le swipe ne bloque jamais le scroll vertical */
}
.c3d-scene {
  position: relative;
  height: min(150vw, 600px);
  transform-style: preserve-3d;
  transition: transform 0.2s var(--ease-out);
}
.c3d-card {
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 26px;      /* hauteur strictement identique pour les 3 cartes */
  width: min(78vw, 340px);
  margin-left: calc(min(78vw, 340px) / -2);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 0 18px 18px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 0.45s var(--ease-out), opacity 0.45s var(--ease-out),
              filter 0.45s var(--ease-out);
}
.c3d-card.moving { will-change: transform, opacity; }
.c3d-card[data-pos="0"] {
  transform: translateX(0) rotateY(0deg) translateZ(90px);
  opacity: 1; filter: brightness(1); z-index: 3;
}
.c3d-card[data-pos="-1"] {
  transform: translateX(-58%) rotateY(38deg) translateZ(-70px);
  opacity: 0.85; filter: brightness(0.5); z-index: 2;
}
.c3d-card[data-pos="1"] {
  transform: translateX(58%) rotateY(-38deg) translateZ(-70px);
  opacity: 0.85; filter: brightness(0.5); z-index: 2;
}
.c3d-card:not([data-pos="0"]) { pointer-events: none; }

.c3d-media {
  aspect-ratio: auto;
  height: 63%;
  margin: 0 -18px 14px;
  border-radius: 17px 17px 0 0;
  position: relative;
  flex: none;
}
.c3d-title {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(1rem, 4.4vw, 1.18rem);
  line-height: 1.18;
  text-wrap: balance;
  hyphens: none;
  margin-bottom: 8px;
}
.c3d-price { font-size: 14px; color: var(--txt-dim); font-weight: 600; margin-bottom: 6px; }
.c3d-price b { font-family: 'Anton', sans-serif; font-size: 24px; color: var(--jaune); font-weight: 400; }
.c3d-price span { font-size: 12px; }
.c3d-line { font-size: 13.5px; color: var(--txt-dim); line-height: 1.45; }
.c3d-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 12px;
}
.c3d-actions .btn { min-height: 48px; font-size: 14.5px; padding: 12px 14px; }

.c3d-nav {
  display: flex; align-items: center; justify-content: center;
  gap: 22px; margin-top: 20px;
}
.c3d-arrow {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--txt); font-size: 20px; font-weight: 800; cursor: pointer;
  transition: border-color 0.2s ease, transform 0.1s ease;
}
.c3d-arrow:hover { border-color: var(--violet); }
.c3d-arrow:active { transform: scale(0.94); }
.c3d-dots { display: flex; gap: 8px; }
.c3d-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--line); transition: background 0.25s ease, transform 0.25s ease;
}
.c3d-dots span.on { background: var(--jaune); transform: scale(1.25); }

/* ---------- Overlay détail (plein écran, fermable) ---------- */
.offer-sheet {
  z-index: var(--z-sheet);
  border: none;
  padding: 0;
  background: var(--noir);
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
}
.offer-sheet::backdrop { background: rgba(10, 10, 10, 0.8); }
.sheet-inner {
  max-width: 560px;
  margin: 0 auto;
  padding: 64px var(--pad) calc(40px + env(safe-area-inset-bottom));
  min-height: 100%;
}
.sheet-close {
  position: fixed;
  top: calc(14px + env(safe-area-inset-top));
  right: 16px;
  z-index: 2;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--txt);
  font-size: 17px;
  cursor: pointer;
}
.offer-detail .offer-badge {
  position: static;
  display: inline-block;
  margin-bottom: 16px;
}
@keyframes sheetUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: none; opacity: 1; }
}
.offer-sheet[open] .offer-detail:not([hidden]) { animation: sheetUp 0.4s var(--ease-expo) both; }

@media (min-width: 780px) {
  .c3d-scene { height: 620px; }
  .c3d-card[data-pos="-1"] { transform: translateX(-72%) rotateY(38deg) translateZ(-70px); }
  .c3d-card[data-pos="1"] { transform: translateX(72%) rotateY(-38deg) translateZ(-70px); }
}

/* Reduced motion : slider plat, overlay sans animation */
@media (prefers-reduced-motion: reduce) {
  .c3d-stage { perspective: none; overflow-x: auto; scroll-snap-type: x mandatory; }
  .c3d-scene { height: auto; display: flex; gap: 14px; padding: 0 var(--pad); }
  .c3d-card, .c3d-card[data-pos="-1"], .c3d-card[data-pos="1"], .c3d-card[data-pos="0"] {
    position: static; margin-left: 0; flex: 0 0 min(80vw, 340px);
    height: auto; min-height: 460px;
    transform: none; opacity: 1; filter: none; pointer-events: auto;
    scroll-snap-align: center;
  }
  .c3d-nav { display: none; }
}


/* ============================================================
   V2.5 — LIQUID GLASS APPLE TAHOE (verre CLAIR sur page sombre)
   ============================================================ */
.glass {
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(22px) saturate(1.7);
  backdrop-filter: blur(22px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-top-color: rgba(255, 255, 255, 0.35);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 8px 32px rgba(0, 0, 0, 0.35);
  border-radius: 20px;
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(20, 20, 20, 0.92); }
}

/* (a) Pilule nav flottante — style Dynamic Island */
.nav-pill {
  position: fixed;
  top: calc(12px + env(safe-area-inset-top));
  /* centrage sans transform : l'animation rise anime translateY et
     écraserait un translateX(-50%) (fill-mode both → transform:none). */
  left: 0; right: 0;
  margin-inline: auto;
  width: fit-content;
  max-width: calc(100vw - 24px);
  z-index: var(--z-sticky);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px;
  border-radius: 999px;
  color: var(--txt);
  text-decoration: none;
  white-space: nowrap;
  animation: rise 0.7s var(--ease-expo) 0.05s both;
}
.nav-logo { height: 32px; width: auto; display: block; }
.nav-pill .back-arrow { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 18px; color: var(--txt); }

/* ============================================================
   V2.5 — SOUS-PAGES
   ============================================================ */
.subpage {
  max-width: 640px;
  margin: 0 auto;
  padding: calc(96px + env(safe-area-inset-top)) var(--pad) 64px;
}
.subpage-hero h1 {
  font-family: 'Anton', sans-serif;
  font-weight: 400;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 12vw, 4rem);
  line-height: 1.06;
}
.subpage-sub {
  margin-top: 10px;
  font-family: 'Anton', sans-serif;
  text-transform: uppercase;
  font-size: clamp(1.1rem, 5vw, 1.5rem);
  line-height: 1.2;
  color: var(--jaune);
}
.subpage-sub--violet { color: var(--violet-soft); }
.subpage-intro { margin-top: 18px; font-size: 16px; max-width: 36em; }
.subpage .title-rule { margin: 22px 0; }
.subpage-block { margin-top: clamp(36px, 9vw, 56px); }
.subpage-cta { margin-top: 30px; }

/* Étapes "Comment ça marche" — marqueur natif <ol> désactivé,
   un seul numéro stylé (Anton jaune) via .step-num. */
.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.steps-list li {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 22px 0;
  border-top: 1px solid var(--line);
}
.steps-list li:last-child { border-bottom: 1px solid var(--line); }
.step-num {
  font-family: 'Anton', sans-serif;
  font-size: 2.2rem;
  line-height: 1;
  color: var(--jaune);
  min-width: 34px;
}
.steps-list h3 { font-size: 17px; font-weight: 800; margin-bottom: 4px; }
.steps-list p { font-size: 15px; color: var(--txt-dim); }
.subpage-cta .btn { width: 100%; }
.subpage-note { font-size: 12.5px; color: var(--txt-dim); margin-top: 12px; }

.faq-mini { margin-top: 12px; }
.faq-mini details { border-top: 1px solid var(--line); }
.faq-mini details:last-child { border-bottom: 1px solid var(--line); }
.faq-mini summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  padding: 18px 0;
  font-size: 15.5px;
  font-weight: 700;
  cursor: pointer;
}
.faq-mini summary::-webkit-details-marker { display: none; }
.faq-mini summary::after {
  content: "+";
  font-family: 'Anton', sans-serif;
  font-size: 22px;
  color: var(--jaune);
  flex: none;
  transition: transform 0.2s var(--ease-out);
}
.faq-mini details[open] summary::after { transform: rotate(45deg); }
.faq-mini details p { padding: 0 0 18px; font-size: 14.5px; color: var(--txt-dim); }

/* Transitions de page (View Transitions cross-document, progressive) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root) { animation: 240ms var(--ease-out) both vt-out; }
  ::view-transition-new(root) { animation: 340ms var(--ease-out) both vt-in; }
}
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(16px); } }

/* ============================================================
   V2.5 — NÉON VIOLET + hiérarchie jaune (cartes carrousel)
   ============================================================ */
.c3d-card {
  border: 1.5px solid var(--violet);
}
.c3d-card::after {
  content: "";
  position: absolute;
  inset: -1.5px;
  border-radius: 18px;
  pointer-events: none;
  z-index: 1;
  box-shadow: 0 0 12px rgba(123, 63, 228, 0.5), 0 0 32px rgba(123, 63, 228, 0.25),
              inset 0 0 8px rgba(123, 63, 228, 0.15);
  opacity: 0.9;
}
.c3d-card--club { border-color: var(--jaune); }
.c3d-card--club::after {
  box-shadow: 0 0 12px rgba(255, 214, 10, 0.45), 0 0 32px rgba(255, 214, 10, 0.22),
              inset 0 0 8px rgba(255, 214, 10, 0.12);
}
/* pulse uniquement sur la carte centrale (opacity = compositor-friendly) */
.c3d-card[data-pos="0"]::after { animation: glowPulse 2s ease-in-out infinite alternate; }
@keyframes glowPulse { from { opacity: 0.5; } to { opacity: 1; } }
/* ombre portée douce sous la carte centrale */
.c3d-card[data-pos="0"] { box-shadow: 0 26px 50px rgba(0, 0, 0, 0.5); }

/* balayage spéculaire au changement de carte (reflet Apple) */
.c3d-card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255, 255, 255, 0.16) 50%, transparent 58%);
  transform: translateX(-130%);
}
.c3d-card.sweep::before { animation: specSweep 0.6s ease-out both; }
@keyframes specSweep { to { transform: translateX(130%); } }

/* spring visuel du compteur d'économie */
@keyframes savePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  70% { transform: scale(0.985); }
  100% { transform: scale(1); }
}
.sim-save.pop { animation: savePop 0.45s var(--ease-out); display: inline-block; }

@media (prefers-reduced-motion: reduce) {
  .c3d-card[data-pos="0"]::after { animation: none; opacity: 0.9; }
  .c3d-card.sweep::before { animation: none; }
  .sim-save.pop { animation: none; }
}