/* =========================================================
   MOVIE MASTERS — Landing site (hi-fi, faithful to the PDF)
   Built on the brand tokens in mm-tokens.css
   ========================================================= */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mm-font-body);
  color: var(--mm-fg-1);
  background: var(--mm-warm-cream);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }

/* ---------- layout ---------- */
.wrap { width: min(1200px, 92vw); margin-inline: auto; }
.section { position: relative; padding: clamp(40px, 5vw, 72px) 0; overflow: hidden; }
.section--tight { padding: clamp(28px, 3.5vw, 52px) 0; }

/* paper vs night surfaces */
.paper      { background: var(--mm-warm-cream); }
.paper-alt  { background: #f4ecdc; }
.night {
  background:
    radial-gradient(120% 90% at 50% -10%, rgba(123,83,158,.55) 0%, rgba(58,42,99,0) 60%),
    linear-gradient(180deg, #241a40 0%, #34265c 42%, #4a3580 76%, #5d4296 100%);
  color: var(--mm-fg-on-dark);
}
.night .h-display, .night .lead, .night .eyebrow-ink { color: var(--mm-logo-cream); }
.night .lead { color: #e6def5; }

/* twinkle stars on night */
.stars { position: absolute; inset: 0; pointer-events: none; opacity: .9; }
.stars::before, .stars::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    radial-gradient(1.6px 1.6px at 20% 30%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 70% 18%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 40% 60%, #ffe9b8 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 85% 50%, #fff 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 12% 70%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 58% 38%, #fff 50%, transparent 51%);
  background-repeat: no-repeat;
  opacity: .8;
}

/* skyline + ground strips */
.skyline {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 86px; width: 120%; max-width: none;
  opacity: .9; pointer-events: none;
}
.night .skyline { filter: brightness(.55) saturate(.8) drop-shadow(0 0 1px #1a1330); opacity: .8; }
.ground-hedge {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: 0; width: 120%; max-width: none; pointer-events: none;
}

/* ---------- typography ---------- */
.eyebrow {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-bold);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mm-warm-tomato);
  display: inline-flex; align-items: center; gap: 10px;
  margin: 0 0 18px;
}
.night .eyebrow { color: var(--mm-cool-peach); }
.eyebrow::before { content: ""; width: 30px; height: 3px; border-radius: 3px; background: currentColor; }

.h-display {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  line-height: .98;
  letter-spacing: -.005em;
  color: var(--mm-warm-ink);
  margin: 0 0 22px;
  font-size: clamp(34px, 5vw, 62px);
  text-wrap: balance;
}
.h-hero { font-size: clamp(40px, 6.6vw, 92px); line-height: .94; }
.h-2 { font-size: clamp(28px, 3.6vw, 44px); }

.lead {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-light);
  font-size: clamp(17px, 1.5vw, 21px);
  line-height: 1.5;
  color: var(--mm-fg-2);
  margin: 0 0 16px;
  max-width: 42ch;
}
.lead strong, .kicker { font-weight: var(--mm-fw-medium); color: var(--mm-fg-1); }
.kicker {
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: clamp(19px, 2vw, 26px);
  color: var(--mm-warm-tomato);
  margin: 6px 0 0;
}
.night .kicker { color: var(--mm-cool-peach); }
.center { text-align: center; }
.center .eyebrow, .center .lead { margin-inline: auto; }
.center .lead { max-width: 54ch; }

/* ---------- buttons (claymation pill) ---------- */
.btn {
  --b: var(--mm-primary); --s: var(--mm-primary-shadow);
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: clamp(17px, 1.5vw, 21px);
  text-transform: uppercase;
  letter-spacing: .01em;
  color: #fff;
  background: var(--b);
  border: 4px solid var(--mm-warm-cream);
  border-radius: var(--mm-r-pill);
  padding: 14px 34px;
  display: inline-flex; align-items: center; gap: 10px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 7px 0 0 var(--s), var(--mm-shadow-soft);
  transition: transform .12s cubic-bezier(.2,.9,.25,1.2), box-shadow .12s ease, filter .12s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 9px 0 0 var(--s), var(--mm-shadow-soft); filter: brightness(1.05); }
.btn:active { transform: translateY(5px); box-shadow: 0 2px 0 0 var(--s); }
.btn--red    { --b: var(--mm-logo-red);    --s: #a23128; }
.btn--yellow { --b: var(--mm-warm-mustard);--s: #b8862d; color: var(--mm-warm-ink); }
.btn--ghost  { background: transparent; color: var(--mm-warm-ink); border-color: var(--mm-warm-ink); box-shadow: 0 6px 0 0 rgba(33,41,52,.18); }
.night .btn--ghost { color: var(--mm-logo-cream); border-color: var(--mm-logo-cream); }
.btn--lg { font-size: clamp(20px, 2vw, 28px); padding: 18px 46px; }

/* store badges */
.stores { display: flex; gap: 16px; flex-wrap: wrap; }
.store {
  display: inline-flex; align-items: center; gap: 12px;
  background: var(--mm-warm-ink); color: #fff;
  border: 3px solid rgba(255,255,255,.15);
  border-radius: 16px; padding: 10px 22px 10px 18px;
  text-decoration: none;
  box-shadow: 0 6px 0 0 rgba(0,0,0,.35);
  transition: transform .12s ease;
}
.store:hover { transform: translateY(-2px); }
.store svg { width: 26px; height: 26px; flex: none; }
.store small { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
.store b { font-family: var(--mm-font-display); font-weight: 600; font-size: 19px; line-height: 1; }

/* ---------- cards / chips ---------- */
.card {
  background: var(--mm-surface);
  border-radius: var(--mm-r-md);
  box-shadow: var(--mm-shadow-card);
  padding: clamp(20px, 2.4vw, 30px);
}
.card--cream { background: #fffaf0; }
.chip {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-medium);
  font-size: 15px; color: var(--mm-warm-slate);
  background: #fff; border: 2px solid rgba(51,92,124,.18);
  border-radius: var(--mm-r-pill); padding: 8px 18px;
  box-shadow: 0 3px 0 0 rgba(51,92,124,.12);
}
.chip::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--mm-cool-cyan); }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }

/* ---------- claymation art ---------- */
.clay { filter: drop-shadow(0 22px 20px rgba(20,12,40,.28)); }
.clay--soft { filter: drop-shadow(0 16px 16px rgba(20,12,40,.22)); }
.phone { filter: drop-shadow(0 24px 26px rgba(20,12,40,.32)); border-radius: 30px; }

/* grids */
.grid { display: grid; gap: clamp(20px, 2.6vw, 36px); }
.cols-2 { grid-template-columns: repeat(2, 1fr); }
.cols-3 { grid-template-columns: repeat(3, 1fr); }
.cols-4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.split--wide-l { grid-template-columns: 1.15fr .85fr; }
.split--wide-r { grid-template-columns: .85fr 1.15fr; }

/* ---------- HUD top bar ---------- */
.hud {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; gap: 16px;
  padding: 14px clamp(16px, 4vw, 40px);
  transition: background .3s ease, box-shadow .3s ease, padding .3s ease;
}
.hud--scrolled {
  background: rgba(36,26,64,.86);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 24px rgba(0,0,0,.3);
  padding-top: 10px; padding-bottom: 10px;
}
.hud__logo { height: 48px; width: auto; transition: height .3s ease; }
.hud--scrolled .hud__logo { height: 40px; }
.hud__spacer { flex: 1; }
.hud__nav { display: flex; gap: 26px; }
.hud__nav a {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-medium);
  font-size: 15px; color: var(--mm-logo-cream); text-decoration: none;
  opacity: .85; transition: opacity .15s ease;
}
.hud__nav a:hover { opacity: 1; }
@media (max-width: 880px) { .hud__nav { display: none; } }

/* step cards */
.step__n {
  font-family: var(--mm-font-display); font-weight: 700;
  font-size: 22px; color: #fff;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--mm-primary); border: 3px solid var(--mm-warm-cream);
  display: grid; place-items: center; box-shadow: 0 4px 0 0 var(--mm-primary-shadow);
}
.step__icon { width: 100%; aspect-ratio: 1; object-fit: contain; }

/* big game numbers */
.bignum {
  font-family: var(--mm-font-display); font-weight: 700;
  font-size: clamp(40px, 5vw, 68px); line-height: 1;
  color: var(--mm-warm-ink); letter-spacing: -.01em;
}
.night .bignum { color: var(--mm-logo-yellow); }
.statline { display: flex; gap: clamp(28px, 4vw, 52px); flex-wrap: wrap; }
.stat__label { font-size: 14px; color: var(--mm-fg-2); margin-top: 4px; }
.night .stat__label { color: #cdc3e6; }

/* poster strip ("bientôt à l'affiche") */
.poster-strip {
  position: absolute; transform: rotate(-3deg);
  background: var(--mm-poster-pink); color: #fff;
  font-family: var(--mm-font-display); font-weight: 600;
  font-size: 13px; text-transform: uppercase; letter-spacing: .04em;
  padding: 7px 16px; border-radius: 8px;
  box-shadow: 0 6px 14px rgba(215,55,106,.45);
}

/* footer */
.footer { background: var(--mm-warm-ink); color: #cdb; padding: 30px 0 40px; }
.footer a { color: #e7dccb; text-decoration: none; }
.footer__row { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; position: relative; }
.footer__links { display: flex; gap: 24px; flex-wrap: wrap; font-size: 14px; }
.footer__credit-row { margin-top: 26px; display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; text-align: center; }
.footer__credit { font-size: 13px; opacity: .6; }
.footer__studio {
  display: flex; justify-content: center; align-items: center; gap: 7px;
  margin: 0 auto 22px;
  font-family: var(--mm-font-body); font-size: 16px; letter-spacing: .04em;
  color: #cdb !important; opacity: .9; text-decoration: none !important;
  white-space: nowrap; transition: opacity .15s ease;
}
.footer__studio strong {
  font-family: var(--mm-font-display); font-weight: 600; letter-spacing: .08em;
  color: var(--mm-logo-yellow); text-transform: uppercase; font-size: 19px;
}
.footer__studio:hover { opacity: 1; }
.footer__studio:hover { opacity: 1; }
@media (max-width: 620px) { .footer__credit-row { justify-content: center; text-align: center; } }

/* section footer note */
.note-strong {
  font-family: var(--mm-font-display); font-weight: 600;
  font-size: clamp(18px, 2vw, 26px);
  color: var(--mm-warm-tomato);
  text-align: center; margin: clamp(32px,4vw,52px) auto 0; max-width: 30ch;
  line-height: 1.25;
}
.night .note-strong { color: var(--mm-cool-peach); }

/* ---------- entrance animation (safe: visible base state) ---------- */
.reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
  .js .reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }
  .js .reveal.in { opacity: 1; transform: none; }
  .js .reveal.d1 { transition-delay: .08s; }
  .js .reveal.d2 { transition-delay: .16s; }
  .js .reveal.d3 { transition-delay: .24s; }
}

/* float bob for hero art */
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.bob { animation: bob 6s ease-in-out infinite; }
.bob--slow { animation-duration: 8s; }
.bob--fast { animation-duration: 4.5s; }
@media (prefers-reduced-motion: reduce) { .bob { animation: none; } }

/* ====== "Comment ça marche" — faithful to provided model ====== */
.how2 {
  background: #213140;
  color: #f1e8d7;
  padding-top: clamp(40px, 5vw, 72px);
  padding-bottom: clamp(40px, 5vw, 72px);
}
.how2__eyebrow {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-bold);
  font-size: clamp(13px, 1.1vw, 15px);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #e9dfc9;
  margin: 0 0 14px;
}
.how2__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  color: var(--mm-warm-mustard);
  line-height: 1.04;
  letter-spacing: .005em;
  font-size: clamp(30px, 4.4vw, 56px);
  margin: 0 0 16px;
  text-wrap: balance;
}
.how2__sub {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-regular);
  font-size: clamp(16px, 1.5vw, 21px);
  color: #f3ecdd;
  margin: 0 auto;
  max-width: 50ch;
}
.how2__grid { margin-top: clamp(36px, 4vw, 58px); align-items: stretch; }
.how2-card {
  background: #e8dec9;
  border-radius: 26px;
  padding: clamp(16px, 1.4vw, 20px);
  box-shadow: 0 22px 40px -22px rgba(0,0,0,.55);
  display: flex;
  flex-direction: column;
}
.how2-frame {
  background: #f1ebdb;
  border: 1px solid rgba(33,49,64,.10);
  border-radius: 18px;
  padding: 10px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.6);
}
.how2-frame img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}
.how2-card__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(20px, 1.9vw, 27px);
  line-height: 1.05;
  color: #2c4a63;
  margin: clamp(16px, 1.6vw, 22px) 0 10px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.how2-emoji { font-size: 1.05em; line-height: 1; flex: none; }
.how2-card__body {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-light);
  font-size: clamp(15px, 1.4vw, 18px);
  line-height: 1.5;
  color: #34485a;
  margin: 0 0 6px;
}

/* ====== "La prog" — faithful to provided model (mustard) ====== */
.prog2 { background: var(--mm-warm-mustard); color: #2a3f54; padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(40px, 5vw, 72px); }
.prog2 .wrap { width: min(1340px, 95vw); }
.prog2-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(20px, 2.4vw, 44px);
  align-items: center;
}
.prog2__kicker {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(20px, 2.1vw, 30px);
  letter-spacing: .01em;
  color: #2a3f54;
  margin: 0 0 6px;
}
.prog2__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(30px, 4.1vw, 54px);
  line-height: 1.04;
  color: #2a3f54;
  margin: 0 0 clamp(22px, 3vw, 38px);
}
.prog2__q {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-medium);
  font-size: clamp(16px, 1.55vw, 22px);
  line-height: 1.3;
  color: #2a3f54;
  margin: 0 0 clamp(16px, 1.8vw, 24px);
}
.prog2__q span {
  background-image: linear-gradient(var(--mm-logo-red), var(--mm-logo-red));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  padding-bottom: 4px;
}
.prog2-stage { position: relative; }
.prog2-cards {
  display: flex;
  gap: clamp(6px, 1vw, 16px);
  align-items: flex-end;
}
.prog2-col { position: relative; flex: 1 1 0; min-width: 0; }
.prog2-phone {
  width: 100%;
  display: block;
  filter: drop-shadow(0 16px 18px rgba(20,12,40,.22));
}
.prog2-cap {
  position: absolute;
  left: 4%; right: 4%;
  bottom: 6.5%;
  text-align: center;
  color: #fff;
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: clamp(11px, 1.25vw, 18px);
  line-height: 1.12;
}
.prog2-mascot {
  position: absolute;
  left: 48%;
  bottom: 11%;
  width: 33%;
  transform: translateX(-60%);
  z-index: 5;
  filter: drop-shadow(0 18px 16px rgba(20,12,40,.32));
  pointer-events: none;
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .prog2-mascot { animation: prog2-bob 4.2s ease-in-out infinite; }
}
@keyframes prog2-bob {
  0%, 100% { transform: translateX(-60%) translateY(0) rotate(-1.2deg); }
  50%      { transform: translateX(-60%) translateY(-10px) rotate(1.2deg); }
}
@media (max-width: 900px) {
  .prog2-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .prog2-mascot { display: none; }
}

/* ====== "Les news" — faithful to provided model (terracotta) ====== */
.news2 { background: #bf5640; color: #f2e9d8; }
.news2 .wrap { width: min(1340px, 95vw); }
.news2-grid {
  display: grid;
  grid-template-columns: 1.32fr .68fr;
  gap: clamp(24px, 3vw, 56px);
  align-items: center;
}
.news2-stage { position: relative; }
.news2-cap--dark { color: #2a3f54; }
.news2__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(38px, 5vw, 68px);
  line-height: 1;
  color: #f4ecdc;
  margin: 0 0 clamp(20px, 2.4vw, 32px);
}
.news2-list {
  list-style: none;
  margin: 0 0 clamp(20px, 3vw, 40px);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1.2vw, 16px);
}
.news2-list li {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-medium);
  font-size: clamp(20px, 2.2vw, 32px);
  line-height: 1.1;
  color: #f4ecdc;
  display: flex;
  align-items: center;
  gap: 14px;
}
.news2-list li::before {
  content: "";
  width: 11px; height: 11px;
  border-radius: 50%;
  background: var(--mm-warm-mustard);
  flex: none;
}
.news2-mascot {
  display: block;
  width: clamp(170px, 18vw, 268px);
  margin-left: clamp(4px, 1.5vw, 24px);
  filter: drop-shadow(0 20px 18px rgba(20,12,40,.3));
}
.news2__foot {
  text-align: center;
  font-family: var(--mm-font-display);
  font-weight: 600;
  font-size: clamp(18px, 2.2vw, 32px);
  color: #f4ecdc;
  margin: clamp(36px, 4vw, 60px) auto 0;
  max-width: 30ch;
  line-height: 1.2;
}
@media (max-width: 900px) {
  .news2-grid { grid-template-columns: 1fr; }
  .news2-mascot { margin: 8px auto 0; }
}

/* ====== "Les ligues" — faithful to provided model (red) ====== */
.lig2 { background: #e2503f; color: #f3ead9; overflow: hidden; }
.lig2 .wrap { width: min(1340px, 95vw); }
.lig2-grid {
  display: grid;
  grid-template-columns: .72fr 1.28fr;
  gap: clamp(20px, 2.6vw, 48px);
  align-items: center;
}
.lig2__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(40px, 5.4vw, 74px);
  line-height: .98;
  color: #f4ecdc;
  margin: 0 0 clamp(14px, 1.6vw, 22px);
}
.lig2__sub {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(22px, 2.7vw, 38px);
  line-height: 1.04;
  color: #2a3242;
  margin: 0 0 clamp(20px, 2.6vw, 34px);
}
.lig2-body { margin: 0 0 16px; }
.lig2-body p {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-light);
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.25;
  color: #f6efe1;
  margin: 0 0 clamp(10px, 1.2vw, 16px);
}
.lig2-body--em p { font-weight: var(--mm-fw-medium); }

.lig2-stage {
  position: relative;
  aspect-ratio: 1 / 0.92;
}
.lig2-skyline {
  position: absolute;
  left: -6%; right: -6%; bottom: 9%;
  width: 112%; max-width: none;
  filter: brightness(.28) saturate(.5);
  opacity: .5;
  z-index: 1;
  pointer-events: none;
}
.lig2-phone {
  position: absolute;
  filter: drop-shadow(0 22px 26px rgba(20,8,8,.4));
  z-index: 3;
}
.lig2-phone--a { left: 13%; bottom: 5%; width: 45%; z-index: 3; }
.lig2-phone--b { right: 0%; bottom: 0%; width: 42%; z-index: 2; }
.lig2-char {
  position: absolute;
  bottom: -1%;
  z-index: 5;
  filter: drop-shadow(0 16px 14px rgba(20,8,8,.4));
  pointer-events: none;
}
.lig2-char--red    { left: -6%;  width: 30.6%; z-index: 6; }
.lig2-char--purple { left: 22%;  width: 26.4%; z-index: 5; }
.lig2-char--blue   { left: 42%;  width: 28.9%; z-index: 6; }
.lig2-char--green  { left: 62%;  width: 24.7%; z-index: 6; bottom: -1%; }
.lig2-char--pink   { left: 79%;  width: 18.7%; z-index: 5; }

@media (max-width: 900px) {
  .lig2-grid { grid-template-columns: 1fr; }
  .lig2-stage { max-width: 600px; margin: 8px auto 0; width: 100%; }
}
@media (max-width: 560px) {
  .lig2-skyline { display: none; }
}

/* ====== "Le vrai box-office" — faithful to provided model (cream + NUMERO) ====== */
.box2 { background: var(--mm-warm-cream); color: #243240; padding-top: clamp(28px, 3.5vw, 52px); padding-bottom: clamp(20px, 2.5vw, 36px); }
.box2 .wrap { width: min(1340px, 95vw); }
.box2__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(30px, 4.4vw, 58px);
  line-height: 1;
  color: #2d5573;
  margin: 0 0 clamp(24px, 3vw, 44px);
}
.box2-grid {
  display: grid;
  grid-template-columns: .62fr 1.38fr;
  gap: clamp(16px, 2vw, 36px);
  align-items: center;
}
.box2-lead {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-light);
  font-size: clamp(16px, 1.55vw, 21px);
  line-height: 1.45;
  color: #2a3a48;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
}
.box2-partner {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(8px, 1.4vw, 18px) 0 clamp(16px, 2vw, 26px);
}
.box2-partner span {
  font-family: var(--mm-font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.6vw, 22px);
  color: #2a3a48;
}
.box2-partner img { height: clamp(26px, 2.6vw, 38px); width: auto; }
.box2-panel {
  background: #243240;
  border-radius: var(--mm-r-md);
  padding: clamp(20px, 2vw, 30px);
  box-shadow: var(--mm-shadow-soft);
}
.box2-panel p {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-light);
  font-size: clamp(14px, 1.35vw, 17px);
  line-height: 1.5;
  color: #d8d2c6;
  margin: 0 0 14px;
}
.box2-btn { --b: #6a1bb5; --s: #46157d; margin-top: 6px; }

.box2-stage { position: relative; }
.box2-collage { width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 26px rgba(20,12,40,.26)); }
.box2-stage img:not(.box2-collage) { position: absolute; }
.box2-posters {
  top: 0; right: 0; width: 40%; z-index: 4;
  filter: drop-shadow(0 12px 14px rgba(20,12,40,.18));
}
.box2-stats {
  left: 0; bottom: 1%; width: 31%; z-index: 2;
  filter: drop-shadow(0 16px 18px rgba(20,12,40,.22));
}
.box2-mascot {
  left: 4%; bottom: 26%; width: 19%; z-index: 4;
  filter: drop-shadow(0 14px 12px rgba(20,12,40,.28));
}
.box2-phone {
  left: 25%; bottom: 1%; width: 34%; z-index: 3;
  filter: drop-shadow(0 22px 24px rgba(20,12,40,.3));
}
.box2-donut {
  right: 0; bottom: 1%; width: 29%; z-index: 3;
  filter: drop-shadow(0 16px 18px rgba(20,12,40,.22));
}
@media (max-width: 900px) {
  .box2-grid { grid-template-columns: 1fr; }
  .box2-stage { max-width: 640px; margin: 12px auto 0; width: 100%; }
}

/* ====== "Façons de jouer" — Ticketo film-style cards ====== */
.eyebrow--center { justify-content: center; }
.eyebrow--center::after {
  content: ""; width: 30px; height: 3px; border-radius: 3px; background: currentColor;
}
.play2-grid { margin-top: clamp(36px, 4vw, 58px); align-items: stretch; }
.play2-card {
  background: #fff;
  border-radius: 22px;
  padding: 14px;
  box-shadow: var(--mm-shadow-card);
  display: flex;
  flex-direction: column;
  text-align: center;
}
.play2-card img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 16px;
  display: block;
}
.play2-card h3 {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  color: #2a3f54;
  font-size: clamp(18px, 1.7vw, 23px);
  line-height: 1.06;
  margin: clamp(16px, 1.8vw, 22px) 0 10px;
}
.play2-card p {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-light);
  color: var(--mm-fg-2);
  font-size: clamp(14px, 1.4vw, 17px);
  line-height: 1.42;
  margin: 0;
}
@media (max-width: 760px) {
  .play2-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 460px) {
  .play2-grid { grid-template-columns: 1fr; }
}

/* ====== "Gagne des biz" — catalogue (slate rail) ====== */
.biz2 { background: #52697d; color: var(--mm-logo-cream); padding: 0; overflow: hidden; }
.biz2-band { background: #2b3a47; padding: clamp(24px, 3vw, 42px) 0 clamp(10px, 1.4vw, 18px); }
.biz2__title {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-fw-bold);
  text-transform: uppercase;
  font-size: clamp(24px, 3.3vw, 48px);
  line-height: 1.04;
  color: var(--mm-logo-cream);
  margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  column-gap: .26em; row-gap: 2px;
}
.biz2-heart { color: #e8503f; font-size: 1.05em; line-height: 1; }
.biz2-lower { text-transform: none; }
.biz2-sub {
  font-family: var(--mm-font-body);
  font-weight: var(--mm-fw-light);
  font-size: clamp(14px, 1.4vw, 18px);
  color: #cdd8e0;
  margin: 12px 0 0;
}
.biz2-rail {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(2px, .6vw, 12px);
  overflow: hidden;
  padding: clamp(10px, 1.4vw, 18px) clamp(14px, 3vw, 48px) clamp(12px, 1.6vw, 22px);
}
.biz2-rail img {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 12.2%;
  height: auto;
  max-height: clamp(150px, 16vw, 224px);
  object-fit: contain;
  object-position: bottom;
}
.biz2-mascot {
  flex: 2 1 0 !important;
  max-width: 22% !important;
  max-height: clamp(240px, 25vw, 360px) !important;
  margin-left: clamp(2px, 1vw, 16px);
  filter: drop-shadow(0 16px 16px rgba(0,0,0,.35));
}
@media (prefers-reduced-motion: no-preference) {
  .biz2-mascot { animation: biz2-roll 3.6s ease-in-out infinite; }
}
@keyframes biz2-roll {
  0%, 100% { transform: translateX(-10%); }
  50%      { transform: translateX(10%); }
}

/* ====== "Cinémas / Partenaires" — faithful two-zone banner ====== */
.part2 { padding: 0; overflow: hidden; }
.part2-grid { display: grid; grid-template-columns: .92fr 1.08fr; align-items: stretch; }

/* LEFT — lien direct (mustard) */
.part2-direct {
  background: var(--mm-warm-mustard);
  display: grid; grid-template-columns: 1fr 0.92fr;
  gap: clamp(8px,1.4vw,26px); align-items: center;
  padding: clamp(40px,5vw,72px) clamp(8px,1.2vw,20px) clamp(16px,2vw,28px) clamp(24px,4vw,64px);
}
.part2-dtext { align-self: center; }
.part2-title-a {
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-bold); text-transform: uppercase;
  color: #2a3f54; font-size: clamp(26px,3.5vw,52px); line-height: 1.02;
  margin: 0 0 clamp(18px,2.4vw,28px);
}
.part2-cream { color: var(--mm-logo-cream); display: inline-block; }
.part2-textbox {
  align-self: flex-start;
  background: #44627b; color: var(--mm-logo-cream);
  border-radius: 16px; padding: clamp(16px,1.8vw,24px) clamp(18px,2vw,30px);
  box-shadow: var(--mm-shadow-soft);
}
.part2-textbox p {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-light);
  font-size: clamp(15px,1.5vw,21px); line-height: 1.3; margin: 0;
}
.part2-textbox p + p { margin-top: 7px; }
.part2-mp {
  position: relative; align-self: end;
  display: flex; align-items: flex-end; justify-content: center;
  min-height: clamp(300px, 34vw, 540px);
}
.part2-phone { width: 92%; z-index: 2; filter: drop-shadow(0 22px 24px rgba(20,12,40,.34)); }
.part2-mascot {
  position: absolute; left: -28%; bottom: -3%; width: 58%; z-index: 3;
  filter: drop-shadow(0 16px 14px rgba(20,12,40,.32));
}

/* RIGHT — cinémas partenaires (slate) */
.part2-partner {
  background: #44627b; color: var(--mm-logo-cream);
  display: flex; flex-direction: column;
  padding: clamp(40px,5vw,78px) clamp(22px,3vw,46px) clamp(16px,2vw,28px) clamp(20px,2.4vw,38px);
  overflow: hidden;
}
.part2-phead { display: flex; align-items: flex-start; gap: clamp(14px,1.8vw,26px); }
.part2-title-b {
  flex: 1;
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-bold); text-transform: uppercase;
  color: var(--mm-logo-cream); font-size: clamp(24px,3.1vw,48px); line-height: 1.02; margin: 0;
}
.part2-badge {
  flex: none; width: clamp(94px,9vw,128px); height: clamp(94px,9vw,128px);
  border: 2.5px solid var(--mm-logo-cream); border-radius: 50%;
  display: grid; place-items: center; text-align: center;
  font-family: var(--mm-font-display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(11px,1vw,14px); line-height: 1.18; color: var(--mm-logo-cream);
}
.part2-rexstage { margin-top: auto; padding-top: clamp(20px,2.4vw,30px); position: relative; min-height: clamp(360px,40vw,600px); }
.part2-rex { position: absolute; right: -2%; bottom: 0; width: 55%; z-index: 2; filter: drop-shadow(0 18px 20px rgba(0,0,0,.32)); }
.part2-vip { position: absolute; left: 2%; bottom: 3%; width: 48%; z-index: 3; border-radius: 14px; filter: drop-shadow(0 16px 18px rgba(0,0,0,.32)); }
.pchip {
  position: absolute; max-width: clamp(148px,15vw,205px);
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-regular);
  font-size: clamp(12px,1.1vw,15px); line-height: 1.25;
  padding: 9px 14px; border-radius: 12px; text-align: center; z-index: 4;
  box-shadow: 0 6px 14px rgba(0,0,0,.22);
}
.pchip u { text-decoration: underline; text-underline-offset: 2px; }
.pchip--pink  { top: 8%;  left: 0;   background: #d264a0; color: #fff; }
.pchip--slate { top: 1%;  right: 0;  background: #2c4254; color: #fff; }
.pchip--red   { top: 42%; left: 0;   background: #d24c3f; color: #fff; }
.pchip--cream { bottom: 24%; right: 0; background: #f1e7d3; color: #3a3a3a; }

@media (max-width: 900px) {
  .part2-grid { grid-template-columns: 1fr; }
  .part2-direct { grid-template-columns: 1fr; }
  .part2-mp { min-height: 0; margin-top: 10px; justify-content: center; }
  .part2-phone { width: 56%; }
  .part2-mascot { left: 2%; bottom: 0; width: 34%; }
  .part2-rexstage { min-height: 78vw; max-width: 560px; }
}

/* ====== CTA final — faithful to provided model ====== */
.cta2 {
  position: relative;
  background: #3c5169;
  color: var(--mm-logo-cream);
  overflow: hidden;
  text-align: center;
  padding: clamp(32px,4vw,60px) 0 clamp(170px,22vw,340px);
}
.cta2-scene {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: max(1120px, 100%); max-width: none; z-index: 1; pointer-events: none;
}
.cta2-content { position: relative; z-index: 2; }
.cta2-title {
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-bold); text-transform: uppercase;
  color: var(--mm-warm-mustard); font-size: clamp(38px,6.4vw,86px); line-height: 1;
  letter-spacing: .005em; margin: 0 0 clamp(20px,2.5vw,30px);
  text-shadow: 0 3px 0 rgba(0,0,0,.12);
}
.cta2-body {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-light);
  color: var(--mm-logo-cream); font-size: clamp(16px,1.8vw,24px); line-height: 1.45;
  margin: 0 0 clamp(16px,2vw,24px);
}
.cta2-q {
  font-family: var(--mm-font-display); font-weight: 600;
  color: var(--mm-logo-cream); font-size: clamp(20px,2.6vw,36px); line-height: 1.2;
  margin: 0 auto clamp(30px,4vw,56px); max-width: 28ch;
}
.cta2-stores { justify-content: center; position: relative; z-index: 3; }
.cta2-mascot {
  position: absolute; left: 50%; right: auto; bottom: clamp(8px,2vw,46px);
  width: clamp(168px,21vw,330px); z-index: 4;
  filter: drop-shadow(0 18px 16px rgba(0,0,0,.35));
  transform-origin: 50% 100%;
}
@media (prefers-reduced-motion: no-preference) {
  .cta2-mascot { animation: cta2-bob 3.8s ease-in-out infinite; }
}
@keyframes cta2-bob {
  0%, 100% { transform: translateX(-50%) translateY(0) rotate(-1.5deg); }
  50%      { transform: translateX(-50%) translateY(-12px) rotate(1.5deg); }
}
.cta2-mascot { transform: translateX(-50%); }
.cta2-star {
  position: absolute; z-index: 2; width: clamp(34px,3.6vw,56px); aspect-ratio: 1;
  background: var(--mm-logo-yellow);
  clip-path: polygon(50% 0,63% 33%,98% 35%,70% 57%,80% 91%,50% 71%,20% 91%,30% 57%,2% 35%,37% 33%);
  filter: drop-shadow(0 4px 4px rgba(0,0,0,.25));
}
.cta2-star::before {
  content: ""; position: absolute; left: 50%; bottom: 94%;
  width: 2px; height: clamp(40px,8vw,120px); background: rgba(255,255,255,.28);
}
.cta2-star--l { left: 13%; top: clamp(46px,7vw,104px); transform: rotate(-8deg); }
.cta2-star--r { right: 13%; top: clamp(34px,5vw,78px); transform: rotate(10deg); }
@media (max-width: 760px) {
  .cta2 { padding-bottom: clamp(150px,40vw,260px); }
  .cta2-mascot { width: clamp(120px,30vw,180px); }
  .cta2-star--l { left: 6%; } .cta2-star--r { right: 6%; }
}

/* ====== HERO — rebuilt from model (purple kept) ====== */
.hero2 {
  min-height: 100vh;
  display: flex; align-items: center;
  padding-top: clamp(88px,11vh,128px);
  padding-bottom: 0;
  overflow: hidden;
}
.hero2-wrap { position: relative; z-index: 2; width: min(1320px, 95vw); }
.hero2-skyline {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 0;
  width: max(1300px, 102%); max-width: none; z-index: 1; opacity: .92; pointer-events: none;
}
.hero2-grid { display: grid; grid-template-columns: .9fr 1.6fr; gap: clamp(14px,2vw,38px); align-items: center; }

.hero2-eyebrow {
  display: inline-block; background: var(--mm-logo-red); color: var(--mm-logo-cream);
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-bold);
  text-transform: uppercase; letter-spacing: .12em; font-size: clamp(11px,1.05vw,15px);
  padding: 8px 18px; border-radius: var(--mm-r-pill);
  box-shadow: 0 4px 0 #a23128; margin-bottom: clamp(16px,2vw,26px);
}
.hero2-title {
  font-family: var(--mm-font-display); font-weight: var(--mm-fw-bold); text-transform: uppercase;
  color: var(--mm-logo-cream); font-size: clamp(32px,4.3vw,64px); line-height: 1;
  margin: 0 0 clamp(18px,2.2vw,28px);
}
.hero2-body { margin: 0 0 clamp(18px,2vw,26px); }
.hero2-body p {
  font-family: var(--mm-font-body); font-weight: var(--mm-fw-light);
  color: #e7def5; font-size: clamp(15px,1.5vw,20px); line-height: 1.28; margin: 0 0 9px;
}
.hero2-cta { margin-bottom: clamp(16px,1.8vw,22px); }
.hero2-note {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--mm-font-body); font-size: 14px; color: #cdc3e6; margin: 0; max-width: 32ch;
}
.hero2-note img { width: 22px; height: auto; flex: none; }

.hero2-stage { position: relative; aspect-ratio: 1 / 0.8; align-self: end; }
.hero2-stage img { position: absolute; }
.h2-logo { top: -8%; left: -3%; width: 60%; z-index: 6; filter: drop-shadow(0 10px 14px rgba(0,0,0,.3)); }
.h2-cinema { bottom: -4%; left: -5%; width: 48%; z-index: 3; filter: drop-shadow(0 18px 18px rgba(0,0,0,.34)); }
.h2-charsL { bottom: -8%; left: -15%; width: 27%; z-index: 4; filter: drop-shadow(0 12px 12px rgba(0,0,0,.3)); }
.h2-mascot { bottom: -12%; left: 23%; width: 40%; z-index: 5; filter: drop-shadow(0 12px 12px rgba(0,0,0,.3)); }
.h2-charsR { bottom: -8%; left: 51%; width: 26%; z-index: 4; filter: drop-shadow(0 12px 12px rgba(0,0,0,.3)); }
.h2-phone { bottom: -2%; right: 5%; width: 33%; z-index: 2; filter: drop-shadow(0 22px 22px rgba(0,0,0,.34)); }

@media (max-width: 900px) {
  .hero2 { min-height: 0; }
  .hero2-grid { grid-template-columns: 1fr; }
  .hero2-stage { max-width: 620px; margin: 16px auto 0; width: 100%; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .split, .split--wide-l, .split--wide-r { grid-template-columns: 1fr; }
  .cols-3, .cols-4 { grid-template-columns: 1fr 1fr; }
  .order-img-first > .col-img { order: -1; }
}
@media (max-width: 560px) {
  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
  .h-hero { font-size: clamp(34px, 11vw, 52px); }
}