/* ===== UMIAK ===== */
  @font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Light.woff2') format('woff2'), url('fonts/Umiak-Light.woff') format('woff'); font-weight: 300; font-display: swap; }
  @font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Normal.woff2') format('woff2'), url('fonts/Umiak-Normal.woff') format('woff'); font-weight: 400; font-display: swap; }
  @font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Medium.woff2') format('woff2'), url('fonts/Umiak-Medium.woff') format('woff'); font-weight: 500; font-display: swap; }
  @font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Bold.woff2') format('woff2'), url('fonts/Umiak-Bold.woff') format('woff'); font-weight: 700; font-display: swap; }
  @font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Black.woff2') format('woff2'), url('fonts/Umiak-Black.woff') format('woff'); font-weight: 800; font-display: swap; }
  @font-face { font-family: 'Umiak'; src: url('fonts/Umiak-Ultra.woff2') format('woff2'), url('fonts/Umiak-Ultra.woff') format('woff'); font-weight: 900; font-display: swap; }

  :root {
    /* Charte de marque · voir escapad-chrome.css pour le détail RGB. */
    --yellow:#fff4c9; --pink:#ffc09e; --peach:#ffc09e; --green:#dbe6d5;
    --midnight:#0d0b22; --terracotta:#ba4e2e; --parrot:#2c6538;
    --cream:#f8f3e4; --paper:#fff;
    --tight:-0.045em; --tighter:-0.055em;
    --banner-h:36px; --nav-h:64px;
  }
  * { box-sizing:border-box; margin:0; padding:0; }
  html { scroll-behavior:smooth; }
  body {
    font-family:'Umiak',-apple-system,BlinkMacSystemFont,sans-serif;
    font-weight:400; letter-spacing:var(--tight);
    color:var(--midnight); background:var(--yellow);
    -webkit-font-smoothing:antialiased; padding-top:calc(var(--banner-h) + var(--nav-h));
  }
  a { color:inherit; text-decoration:none; }
  button { font:inherit; letter-spacing:inherit; color:inherit; background:none; border:none; cursor:pointer; }
  ul { list-style:none; }
  img { display:block; max-width:100%; }

  /* ===== BANNER ===== */
  .banner {
    position:fixed; top:0; left:0; right:0; z-index:101; height:var(--banner-h);
    background:var(--midnight); color:var(--yellow);
    display:flex; align-items:center; justify-content:center; gap:8px;
    font-size:12px; font-weight:500; letter-spacing:0.02em;
    white-space:nowrap; overflow:hidden; padding:0 16px;
  }
  .banner-short { display:none; }
  @media (max-width:780px) { .banner-full { display:none; } .banner-short { display:inline; } }
  .banner b { font-weight:700; }
  .banner .pin { width:5px; height:5px; border-radius:50%; background:var(--yellow); animation:pulse 1.6s ease-in-out infinite; }
  @keyframes pulse { 0%,100% { opacity:1; transform:scale(1); } 50% { opacity:0.5; transform:scale(1.5); } }

  /* ===== NAV ===== */
  .nav {
    position:fixed; top:var(--banner-h); left:0; right:0; z-index:100;
    height:var(--nav-h); padding:0 32px;
    background:var(--yellow); border-bottom:1.5px solid var(--midnight);
    display:flex; align-items:center; justify-content:space-between;
  }
  .nav-left, .nav-right { display:flex; align-items:center; gap:8px; }
  .nav-logo { font-weight:800; font-size:22px; letter-spacing:-0.04em; padding:0 16px 0 0; }
  .nav-links { display:flex; align-items:center; gap:4px; height:var(--nav-h); }
  .nav-item {
    position:relative; height:100%; display:flex; align-items:center;
    padding:0 14px; font-size:14px; font-weight:500; cursor:pointer;
  }
  .nav-item:hover { background:var(--cream); }
  .nav-item.has-mega::after { content:'›'; margin-left:6px; transform:rotate(90deg); display:inline-block; font-size:11px; opacity:0.5; }

  /* Mega menu, using chrome stylesheet defaults (position:fixed, full-width) */
  .mega-clubs { grid-template-columns: 1fr 1fr 1fr; gap:24px; max-width:1200px; margin:0 auto; }
  .mega-sport { grid-template-columns: 1fr 1fr 1.2fr; gap:32px; max-width:1200px; margin:0 auto; }
  .mega-col h4 { font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.55; margin-bottom:14px; }
  .mega-col ul li { padding:6px 0; font-weight:500; }
  .mega-col ul li:hover { font-weight:700; }
  .mega-club-card {
    border:1.5px solid var(--midnight); padding:20px; background:var(--paper);
    cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
  }
  .mega-club-card:hover { transform:translate(-2px,-2px); box-shadow:4px 4px 0 var(--midnight); }
  .mega-club-card.disabled { opacity:0.55; cursor:default; background:var(--cream); }
  .mega-club-card.disabled:hover { transform:none; box-shadow:none; }
  .mega-club-card .city { font-size:24px; font-weight:800; letter-spacing:-0.03em; }
  .mega-club-card .meta { font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; margin-top:6px; opacity:0.7; }
  .mega-club-card .pill { display:inline-block; margin-top:10px; padding:3px 10px; background:var(--midnight); color:var(--yellow); font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border-radius:999px; }
  .mega-club-card.disabled .pill { background:transparent; color:var(--midnight); border:1px solid var(--midnight); }

  .btn {
    display:inline-flex; align-items:center; gap:8px; padding:9px 16px;
    font-size:13px; font-weight:700; border-radius:999px;
    border:1.5px solid var(--midnight); transition:all 0.15s;
  }
  .btn:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--midnight); }
  .btn.primary { background:var(--midnight); color:var(--yellow); }
  .btn.ghost { background:transparent; }
  .btn-lg { padding:16px 28px; font-size:15px; border-width:2px; }
  .btn-lg:hover { box-shadow:4px 4px 0 var(--midnight); }
  .btn-xl { padding:22px 38px; font-size:18px; border-width:2px; }
  .btn-xl:hover { box-shadow:6px 6px 0 var(--midnight); }

  /* Club selector pill in nav */
  .club-pill {
    display:inline-flex; align-items:center; gap:8px; padding:7px 14px;
    background:var(--cream); border:1.5px solid var(--midnight); border-radius:999px;
    font-size:12px; font-weight:700; letter-spacing:0.04em; cursor:pointer;
  }
  .club-pill:hover { background:var(--paper); }
  .club-pill .dot { width:8px; height:8px; border-radius:50%; background:var(--midnight); }
  .club-pill[data-club="lille"] .dot { background:#6e5a62; }
  .club-pill[data-club="champigny"] .dot { background:#6e5a62; }
  .club-pill[data-club=""] .dot { background:transparent; border:1.5px dashed var(--midnight); }

  /* ===== HERO ===== */
  .hero {
    padding:80px 40px 80px; position:relative; background:var(--yellow);
  }
  .hero-variant { display:none; }
  .hero[data-hero="video"] .hero-video-variant { display:block; }
  .hero[data-hero="collage"] .hero-collage-variant { display:block; }
  .hero[data-hero="video"], .hero[data-hero="collage"] {
    padding:0; background:var(--midnight);
    min-height:calc(100vh - var(--banner-h) - var(--nav-h));
  }
  /* Variants: bg layers stay absolute, but the variant root becomes a flow container so its content can push the hero open */
  .hero[data-hero="video"] .hero-video-variant,
  .hero[data-hero="collage"] .hero-collage-variant { position:relative; min-height:inherit; }
  .hero[data-hero="video"] .hero-video-bg,
  .hero[data-hero="collage"] .hero-collage-bg { position:absolute; inset:0; }

  /* === Variant A: video bg, real <video> with a 4-tile cycling fallback === */
  .hero-video-variant { position:absolute; inset:0; }
  .hero-video-bg { position:absolute; inset:0; overflow:hidden; background:#0e0b23; }

  /* Fallback layer: 4 cinematic tiles cycling every 4s with ken-burns zoom */
  .hero-video-fallback { position:absolute; inset:0; z-index:0; opacity:1; transition:opacity 0.45s ease; }
  .hero-video-bg.video-on .hero-video-fallback { opacity:0; pointer-events:none; }
  /* animation-fill-mode:backwards uses the 0% keyframe state during the
     pre-delay window, keeps tiles 2-4 invisible until their turn. Tile 1
     uses a negative delay so it skips the fade-in and is already visible
     at t=0 (otherwise the bg flashes plain midnight for ~0.8s on load). */
  .hero-video-tile { position:absolute; inset:0; opacity:0; animation:heroTileCycle 16s linear infinite; animation-fill-mode:backwards; }
  .hero-video-tile[data-tile="1"] {
    background:
      radial-gradient(ellipse at 30% 40%, rgba(255,200,150,0.55), transparent 50%),
      radial-gradient(ellipse at 75% 65%, rgba(120,80,40,0.6), transparent 55%),
      linear-gradient(135deg, #d68a3c 0%, #8b4f1e 45%, #2a1a10 100%);
    animation-delay:-1s;
  }
  .hero-video-tile[data-tile="2"] {
    background:
      radial-gradient(ellipse at 40% 30%, rgba(120,200,255,0.4), transparent 50%),
      radial-gradient(ellipse at 70% 70%, rgba(40,80,140,0.6), transparent 55%),
      linear-gradient(135deg, #4a7c8a 0%, #1e4d5c 45%, #0a2030 100%);
    animation-delay:3s;
  }
  .hero-video-tile[data-tile="3"] {
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255,150,120,0.5), transparent 50%),
      radial-gradient(ellipse at 70% 70%, rgba(140,40,30,0.6), transparent 55%),
      linear-gradient(135deg, #c84d2e 0%, #6e2818 45%, #2a0f08 100%);
    animation-delay:7s;
  }
  .hero-video-tile[data-tile="4"] {
    background:
      radial-gradient(ellipse at 35% 35%, rgba(180,255,150,0.45), transparent 50%),
      radial-gradient(ellipse at 70% 70%, rgba(30,90,40,0.6), transparent 55%),
      linear-gradient(135deg, #5a8a4a 0%, #2e5c1e 45%, #0e2008 100%);
    animation-delay:11s;
  }
  @keyframes heroTileCycle {
    0%   { opacity:0; transform:scale(1.05) translate(-1%, -1%); filter:saturate(1.1); }
    5%   { opacity:1; }
    20%  { opacity:1; transform:scale(1.20) translate(2%, 1%); filter:saturate(1.4) brightness(1.05); }
    25%  { opacity:0; }
    100% { opacity:0; }
  }
  .hero-video-tile::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 60%, transparent 25%, rgba(14,11,35,0.5) 100%); }

  /* Badge placeholder : indique clairement qu'une vidéo de fond viendra ici.
     Léger (pas de média distant), discret, en bas à droite du hero. */
  .hero-video-ph {
    position:absolute; bottom:18px; right:18px; z-index:5;
    display:inline-flex; align-items:center; gap:8px;
    padding:7px 13px; border-radius:999px;
    background:rgba(14,11,35,0.55); border:1px solid rgba(255,244,201,0.35);
    color:var(--yellow); font-size:11px; font-weight:700;
    letter-spacing:0.1em; text-transform:uppercase;
    backdrop-filter:blur(4px); pointer-events:none;
  }
  .hero-video-ph .hvph-dot {
    width:7px; height:7px; border-radius:50%; background:#fb6a8b;
    box-shadow:0 0 0 0 rgba(251,106,139,0.6); animation:hvphPulse 2s ease-out infinite;
  }
  @keyframes hvphPulse {
    0% { box-shadow:0 0 0 0 rgba(251,106,139,0.55); }
    100% { box-shadow:0 0 0 7px rgba(251,106,139,0); }
  }
  .hero-video-bg.video-on .hero-video-ph { opacity:0; }
  @media (prefers-reduced-motion: reduce) { .hero-video-ph .hvph-dot { animation:none; } }

  /* Real video layer, hidden until 'playing'. Drop assets/hero-loop.mp4 to enable. */
  .hero-video-el {
    position:absolute; inset:0; z-index:1;
    width:100%; height:100%; object-fit:cover;
    opacity:0; transition:opacity 0.5s ease;
    background:#0e0b23;
  }
  .hero-video-bg.video-on .hero-video-el { opacity:1; }

  @media (prefers-reduced-motion: reduce) {
    .hero-video-tile { animation-duration:30s; }
  }
  .hero-video-scrim { position:absolute; inset:0; z-index:3; background:linear-gradient(180deg, rgba(14,11,35,0.55) 0%, rgba(14,11,35,0.35) 35%, rgba(14,11,35,0.7) 100%), linear-gradient(90deg, rgba(14,11,35,0.65) 0%, transparent 60%); }
  .hero-video-noise { position:absolute; inset:0; z-index:4; background-image:repeating-linear-gradient(0deg, rgba(255,244,201,0.03) 0 1px, transparent 1px 3px); pointer-events:none; mix-blend-mode:overlay; }
  .hero-video-content { position:relative; z-index:10; max-width:1440px; margin:0 auto; padding:140px 40px 100px; color:var(--yellow); display:flex; flex-direction:column; justify-content:flex-start; }
  .hero-video-content .hv { color:var(--yellow); }
  .hero-video-content h1.hv { font-size:clamp(60px, 7.5vw, 120px); line-height:0.86; letter-spacing:-0.06em; text-transform:uppercase; margin-bottom:32px; }
  .hero-video-content h1.hv .l1 { font-weight:300; display:block; }
  .hero-video-content h1.hv .l2 { font-weight:500; display:block; }
  .hero-video-content h1.hv .l3 { font-weight:900; display:block; }
  .hero-video-content p.lede.hv { font-size:clamp(17px, 1.7vw, 21px); line-height:1.4; max-width:560px; margin-bottom:36px; font-weight:500; color:var(--yellow); opacity:0.95; }
  .hero-video-content .hero-eyebrow.hv { color:var(--yellow); }
  .hero-video-content .hero-eyebrow.hv::before { background:var(--yellow); }
  .hero-video-content .btn { color:var(--midnight); border-color:var(--yellow); }
  .hero-video-content .btn.primary { background:var(--yellow); color:var(--midnight); }
  .hero-video-content .btn.ghost { background:transparent; color:var(--yellow); border-color:var(--yellow); }
  .hero-video-content .btn:hover { box-shadow:4px 4px 0 var(--yellow); }
  .hero-video-content .btn.ghost:hover { background:var(--yellow); color:var(--midnight); }
  .hero-video-cap { margin-top:42px; padding-top:18px; border-top:1px solid rgba(255,244,201,0.3); display:flex; gap:12px; font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; opacity:0.75; }
  .hero-video-cap span:first-child::before { content:''; display:inline-block; width:7px; height:7px; background:#ff6b6b; border-radius:50%; margin-right:8px; vertical-align:middle; animation:pulse 1.
animation:pulse 1.4s ease-in-out infinite; }

  /* Hero video · Reassurance card (replaces LIVE cap) */
  .hero-video-meta {
    margin-top:48px;
    background: rgba(14,11,35,0.55);
    backdrop-filter: blur(14px) saturate(140%);
    -webkit-backdrop-filter: blur(14px) saturate(140%);
    border:1px solid rgba(255,244,201,0.22);
    border-radius:4px;
    padding:22px 28px;
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    max-width:780px;
    position:relative;
  }
  .hero-video-meta::before {
    content:'Ce qu\'on est';
    position:absolute; top:-9px; left:24px;
    background:var(--midnight);
    padding:0 10px;
    font-size:9.5px; font-weight:700;
    letter-spacing:0.18em; text-transform:uppercase;
    color:var(--yellow); opacity:0.72;
  }
  .hero-video-meta .stat {
    padding:6px 24px 4px;
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:10px;
  }
  .hero-video-meta .stat:first-child { padding-left:0; }
  .hero-video-meta .stat:last-child { padding-right:0; }
  .hero-video-meta .stat:not(:last-child)::after {
    content:'';
    position:absolute; right:0; top:10px; bottom:10px;
    width:1px;
    background:linear-gradient(180deg, transparent, rgba(255,244,201,0.32), transparent);
  }
  .hero-video-meta .stat strong {
    display:block;
    font-size:44px; font-weight:800;
    letter-spacing:-0.05em;
    line-height:0.92;
    color:var(--yellow);
    font-feature-settings:'tnum';
  }
  .hero-video-meta .stat span {
    display:block;
    font-size:10.5px; font-weight:600;
    letter-spacing:0.13em;
    text-transform:uppercase;
    color:var(--yellow);
    opacity:0.68;
    line-height:1.4;
    max-width:14ch;
  }
  @media (max-width: 760px) {
    .hero-video-meta {
      grid-template-columns:repeat(2, 1fr);
      gap:22px 0;
      max-width:480px;
      padding:24px 22px;
    }
    .hero-video-meta .stat:nth-child(2n+1) { padding-left:0; }
    .hero-video-meta .stat:nth-child(2n) { padding-right:0; }
    .hero-video-meta .stat:nth-child(2)::after { display:none; }
    .hero-video-meta .stat strong { font-size:34px; }
  }

  /* ===== Hero « mur de photos » (accueil) · esprit Café Central, couleurs Escapad ===== */
  .hero-wall { position:relative; overflow:hidden; background:var(--midnight); display:flex; align-items:center; min-height:calc(100vh - var(--banner-h) - var(--nav-h)); }
  .hero-wall .hw-bg { position:absolute; inset:0; z-index:0; }
  .hero-wall .hero-video-content { z-index:10; max-width:820px; margin:0 auto; padding:104px 40px 84px; text-align:center; display:block; }
  .hero-wall .hero-video-content h1.hv { font-size:clamp(52px, 6.6vw, 112px); }
  .hero-wall .hero-video-content p.lede.hv { max-width:600px; margin-left:auto; margin-right:auto; }
  .hero-wall .hero-eyebrow.hv { justify-content:center; }
  .hero-wall .hero-ctas { justify-content:center; }
  .hero-wall .hero-video-meta { margin-left:auto; margin-right:auto; }
  /* Polaroïds (cadre crème, photo sport, dégradé Escapad en repli) */
  .hw-pola { position:absolute; width:196px; height:242px; background:var(--cream); border-radius:4px; padding:11px 11px 34px; box-shadow:0 20px 40px rgba(0,0,0,0.5); z-index:1; }
  .hw-pola span { position:absolute; inset:10px 10px 32px; border-radius:2px; overflow:hidden; display:block; background:linear-gradient(135deg,#1a1330,#3a2f5e 55%,var(--pink)); }
  .hw-pola span img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .hw-pola b { position:absolute; left:10px; right:10px; bottom:10px; text-align:center; color:var(--midnight); font-size:10.5px; font-weight:800; letter-spacing:0.03em; }
  /* 3 polaroïds à gauche, 4 à droite (mur asymétrique) */
  .hw-pola-1 { top:4%;  left:1.5%; transform:rotate(-8deg); }
  .hw-pola-2 { top:38%; left:5%;   transform:rotate(5deg); }
  .hw-pola-3 { bottom:4%; left:2%; transform:rotate(-5deg); }
  .hw-pola-4 { top:2%;  right:1.5%; transform:rotate(8deg); }
  .hw-pola-5 { top:26%; right:5.5%; transform:rotate(-5deg); }
  .hw-pola-6 { top:50%; right:2%;   transform:rotate(6deg); }
  .hw-pola-7 { bottom:2%; right:6%; transform:rotate(-7deg); }
  /* Sous 1280px, les stickers latéraux entreraient en collision avec le texte
     centré : on les répartit en bandeau HAUT + BAS, ENTIÈREMENT visibles. Le
     contenu reçoit un padding haut/bas généreux pour leur laisser la place
     (sinon ils seraient coupés par les bords ou recouvriraient le texte). */
  @media (max-width:1280px) {
    .hero-wall .hero-video-content { padding-top:230px; padding-bottom:230px; }
    .hw-pola { width:140px; height:174px; padding:8px 8px 27px; box-shadow:0 12px 28px rgba(0,0,0,0.45); }
    .hw-pola span { inset:8px 8px 27px; }
    .hw-pola b { font-size:9px; left:8px; right:8px; bottom:8px; }
    /* Bandeau haut (3), entièrement visibles */
    .hw-pola-1 { top:28px; left:5%;   bottom:auto; right:auto; transform:rotate(-6deg); }
    .hw-pola-2 { top:16px; left:calc(50% - 70px); bottom:auto; right:auto; transform:rotate(4deg); }
    .hw-pola-4 { top:28px; right:5%;  bottom:auto; left:auto;  transform:rotate(6deg); }
    /* Bandeau bas (3), entièrement visibles */
    .hw-pola-3 { bottom:28px; left:7%;  top:auto; right:auto; transform:rotate(5deg); }
    .hw-pola-6 { bottom:16px; left:calc(50% - 70px); top:auto; right:auto; transform:rotate(-4deg); }
    .hw-pola-7 { bottom:28px; right:6%; top:auto; left:auto;  transform:rotate(-6deg); }
    .hw-pola-5 { display:none; }
  }
  @media (max-width:640px) {
    .hero-wall .hero-video-content { padding-top:172px; padding-bottom:172px; }
    .hw-pola { width:102px; height:128px; padding:6px 6px 20px; }
    .hw-pola span { inset:6px 6px 20px; }
    .hw-pola b { font-size:7.5px; left:6px; right:6px; bottom:6px; }
    /* 2 en haut + 2 en bas (les coins), pour ne pas surcharger à 375px */
    .hw-pola-2, .hw-pola-6 { display:none; }
    .hw-pola-1 { top:20px; left:3%; }
    .hw-pola-4 { top:20px; right:3%; }
    .hw-pola-3 { bottom:20px; left:4%; }
    .hw-pola-7 { bottom:20px; right:4%; }
  }
  /* Bandeau défilant Escapad sous le hero */
  .hw-marquee { background:var(--yellow); color:var(--midnight); overflow:hidden; padding:13px 0; border-top:2px solid var(--midnight); border-bottom:2px solid var(--midnight); white-space:nowrap; }
  .hw-marquee-track { display:inline-flex; gap:28px; align-items:center; font-weight:900; font-size:14px; letter-spacing:0.08em; text-transform:uppercase; animation:hw-scroll 30s linear infinite; }
  @media (prefers-reduced-motion: reduce) { .hw-marquee-track { animation:none; } }
  @keyframes hw-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }
  /* Bande de photos sous le bandeau */
  .hw-strip { display:grid; grid-template-columns:repeat(4,1fr); border-bottom:2px solid var(--midnight); }
  .hw-strip-cell { position:relative; aspect-ratio:4/3; overflow:hidden; border-right:2px solid var(--midnight); background:var(--midnight); }
  .hw-strip-cell:last-child { border-right:none; }
  .hw-strip-cell img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  @media (max-width:760px) { .hw-strip { grid-template-columns:1fr 1fr; } .hw-strip-cell:nth-child(2n){border-right:none;} }


  /* === Variant B: 5-photo collage background (replace each .hc-tile with <img src="..."> + object-fit:cover in prod) === */
  .hero-collage-variant { position:absolute; inset:0; }
  .hero-collage-bg {
    position:absolute; inset:0;
    display:grid;
    grid-template-columns:1.4fr 1fr 1fr;
    grid-template-rows:1fr 1fr;
    gap:3px;
    background:var(--midnight);
    overflow:hidden;
  }
  .hero-collage-bg .hc-tile { position:relative; overflow:hidden; }
  .hero-collage-bg .hc-tile::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 50% 70%, transparent 25%, rgba(14,11,35,0.5) 100%); }
  .hero-collage-bg .hc-cap { position:absolute; bottom:14px; left:16px; z-index:2; font-size:10px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:var(--yellow); opacity:0.78; }
  .hero-collage-bg .hc-1 {
    grid-column:1; grid-row:1 / span 2;
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255,200,150,0.5), transparent 55%),
      linear-gradient(160deg, #d68a3c 0%, #8b4f1e 50%, #2a1a10 100%);
    animation:heroCollagePan1 24s ease-in-out infinite alternate;
  }
  .hero-collage-bg .hc-2 {
    grid-column:2; grid-row:1;
    background:
      radial-gradient(ellipse at 70% 35%, rgba(255,170,196,0.5), transparent 55%),
      linear-gradient(160deg, #9e4226 0%, #ba4e2e 55%, #3f1810 100%);
    animation:heroCollagePan2 20s ease-in-out infinite alternate-reverse;
  }
  .hero-collage-bg .hc-3 {
    grid-column:3; grid-row:1;
    background:
      radial-gradient(ellipse at 50% 40%, rgba(255,244,201,0.4), transparent 55%),
      linear-gradient(160deg, #d4a574 0%, #9c6f4a 55%, #2f1d12 100%);
    animation:heroCollagePan1 26s ease-in-out infinite alternate;
  }
  .hero-collage-bg .hc-4 {
    grid-column:2; grid-row:2;
    background:
      radial-gradient(ellipse at 30% 60%, rgba(58,165,100,0.5), transparent 55%),
      linear-gradient(135deg, #3aa564 0%, #1e6e3f 60%, #0e3a22 100%);
    animation:heroCollagePan2 22s ease-in-out infinite alternate-reverse;
  }
  .hero-collage-bg .hc-5 {
    grid-column:3; grid-row:2;
    background:
      radial-gradient(ellipse at 60% 50%, rgba(180,200,230,0.4), transparent 55%),
      linear-gradient(135deg, #2a3a55 0%, #16243a 55%, #0a1220 100%);
    animation:heroCollagePan1 28s ease-in-out infinite alternate;
  }
  @keyframes heroCollagePan1 {
    0% { transform:scale(1.04) translate(-1%, 0); }
    100% { transform:scale(1.16) translate(2%, -1.5%); }
  }
  @keyframes heroCollagePan2 {
    0% { transform:scale(1.06) translate(1%, -1%); }
    100% { transform:scale(1.18) translate(-2%, 2%); }
  }
  .hero-collage-scrim {
    position:absolute; inset:0;
    background:
      linear-gradient(180deg, rgba(14,11,35,0.55) 0%, rgba(14,11,35,0.3) 35%, rgba(14,11,35,0.78) 100%),
      linear-gradient(90deg, rgba(14,11,35,0.55) 0%, transparent 55%);
  }

  /* legacy collage (sidebar) · no longer used for variant B */
  .hero-collage { display:none; }
  .hc-stamp { position:absolute; top:-14px; right:-14px; background:var(--midnight); color:var(--yellow); padding:14px 18px; font-size:13px; font-weight:900; letter-spacing:-0.02em; text-transform:uppercase; line-height:1.05; transform:rotate(4deg); z-index:5; border:2px solid var(--midnight); }
  .hero-grid { max-width:1440px; margin:0 auto; display:grid; grid-template-columns:1.15fr 1fr; gap:60px; align-items:center; }
  .hero-eyebrow { display:inline-flex; align-items:center; gap:10px; margin-bottom:24px; font-size:12px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; }
  .hero-eyebrow::before { content:''; width:8px; height:8px; background:var(--midnight); border-radius:50%; animation:pulse 1.6s ease-in-out infinite; }
  .hero h1 {
    font-size:clamp(60px, 7.5vw, 120px); line-height:0.86;
    letter-spacing:-0.06em; text-transform:uppercase; margin-bottom:32px;
  }
  .hero h1 .l1 { font-weight:300; display:block; }
  .hero h1 .l2 { font-weight:500; display:block; }
  .hero h1 .l3 { font-weight:900; display:block; }
  .hero p.lede { font-size:clamp(17px, 1.7vw, 21px); line-height:1.4; max-width:520px; margin-bottom:36px; font-weight:500; }
  .hero-ctas { display:flex; gap:14px; flex-wrap:wrap; align-items:center; }
  .hero-meta { display:flex; gap:32px; margin-top:48px; padding-top:28px; border-top:1.5px solid var(--midnight); max-width:540px; }
  .hero-meta .stat strong { display:block; font-size:36px; font-weight:800; letter-spacing:-0.04em; line-height:1; }
  .hero-meta .stat span { font-size:11px; font-weight:500; letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; margin-top:6px; display:block; }

  /* Hero composition: layered photo + outline mark */
  .hero-stage { position:relative; aspect-ratio:4/5; max-width:540px; margin-left:auto; }
  .hero-photo {
    position:absolute; inset:8% 0 0 8%; border:2px solid var(--midnight);
    background:
      radial-gradient(ellipse at 30% 30%, rgba(255,244,201,0.4), transparent 55%),
      radial-gradient(ellipse at 70% 70%, rgba(14,11,35,0.35), transparent 65%),
      linear-gradient(135deg, #c4a084 0%, #8b6f5a 35%, #4a3a2f 70%, #1f1812 100%);
    overflow:hidden;
  }
  .hero-photo::before {
    content:''; position:absolute; inset:0;
    background:
      radial-gradient(circle at 35% 40%, rgba(255,200,150,0.5), transparent 35%),
      linear-gradient(180deg, transparent 50%, rgba(14,11,35,0.5));
  }
  .hero-photo .photo-label { position:absolute; bottom:16px; left:18px; font-size:10px; font-weight:600; color:var(--yellow); letter-spacing:0.14em; text-transform:uppercase; opacity:0.65; }
  .hero-mark-top, .hero-mark-bot {
    position:absolute; left:-3%; font-size:clamp(120px, 19vw, 230px);
    font-weight:900; letter-spacing:-0.055em; line-height:0.78; pointer-events:none;
  }
  .hero-mark-top { top:0; color:transparent; -webkit-text-stroke:2.5px var(--midnight); z-index:2; }
  .hero-mark-bot { top:0; color:var(--midnight); z-index:0; clip-path:inset(50% 0 0 0); }
  .hero-tag-corner {
    position:absolute; top:-12px; right:-8px; background:var(--midnight); color:var(--yellow);
    padding:10px 14px; font-size:11px; font-weight:700; letter-spacing:0.1em;
    transform:rotate(4deg); z-index:3;
  }

  /* ===== CLUB PICKER (homepage section) ===== */
  .clubs {
    background:var(--cream); padding:120px 40px;
    border-top:1.5px solid var(--midnight); border-bottom:1.5px solid var(--midnight);
  }
  .clubs-wrap { max-width:1280px; margin:0 auto; }
  .clubs-head { display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:64px; gap:40px; flex-wrap:wrap; }
  .section-eyebrow { font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.6; margin-bottom:14px; }
  .section-h2 { font-size:clamp(48px, 6vw, 92px); line-height:0.9; letter-spacing:-0.055em; text-transform:uppercase; max-width:1000px; }
  .section-h2 .l1 { font-weight:300; }
  .section-h2 .l2 { font-weight:500; }
  .section-h2 .l3 { font-weight:900; }
  .clubs-head p { max-width:380px; font-size:16px; line-height:1.45; font-weight:500; }
  .clubs-grid { display:grid; grid-template-columns:1fr 1fr; gap:24px; }
  .club-tile {
    background:var(--paper); border:2px solid var(--midnight); padding:0;
    overflow:hidden; transition:transform 0.2s, box-shadow 0.2s; cursor:pointer;
    position:relative; display:flex; flex-direction:column;
  }
  .club-tile:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--midnight); }
  .club-tile.coming { background:var(--cream); cursor:default; }
  .club-tile.coming:hover { transform:none; box-shadow:none; }
  .club-photo {
    aspect-ratio:16/10; position:relative; overflow:hidden;
    background:linear-gradient(135deg, #245530, #3f8a4d 40%, #7fb892 70%, #cbdcb3);
  }
  /* Photo de couverture réelle (déposée dans assets/clubs/). Tant qu'elle n'existe
     pas, onerror la retire et le dégradé reste en fond. */
  .club-photo-img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
  .club-photo .badge, .club-photo .city-mark { z-index:2; }
  .club-tile[data-id="lille"] .club-photo { background:linear-gradient(135deg, #6e5a62, #6e5a62 50%, #ffc09e 90%); }
  .club-tile[data-id="champigny"] .club-photo { background:linear-gradient(135deg, #3a3450, #6e5a62 50%, #ffc09e 95%); }
  .club-photo::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 65% 70%, rgba(14,11,35,0.45), transparent 65%);
  }
  .club-photo .city-mark {
    position:absolute; bottom:24px; left:28px; color:var(--yellow);
    font-size:clamp(64px, 7vw, 96px); font-weight:900; letter-spacing:-0.055em;
    text-transform:uppercase; line-height:0.85;
  }
  .club-photo .badge {
    position:absolute; top:20px; right:20px;
    background:var(--midnight); color:var(--yellow); padding:6px 12px;
    font-size:10px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase;
  }
  .club-tile.coming .badge { background:var(--yellow); color:var(--midnight); border:1.5px solid var(--midnight); }
  .club-body { padding:28px 32px; flex:1; display:flex; flex-direction:column; gap:18px; }
  .club-body h3 { font-size:30px; font-weight:800; letter-spacing:-0.04em; line-height:1; text-transform:uppercase; }
  .club-body h3 small { display:block; font-size:13px; font-weight:500; letter-spacing:0.06em; text-transform:none; opacity:0.7; margin-top:6px; }
  .club-body .specs { display:flex; gap:16px; flex-wrap:wrap; padding:14px 0; border-top:1px solid rgba(14,11,35,0.15); border-bottom:1px solid rgba(14,11,35,0.15); }
  .club-body .spec { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
  .club-body .spec strong { display:block; font-size:18px; font-weight:800; letter-spacing:-0.02em; text-transform:none; margin-bottom:2px; }
  /* Rangée de pastilles d'activités — surcharge le style de la SECTION .activities
     (jaune, padding 120px) qui débordait ici et créait la grosse boîte vide. */
  .club-body .activities { display:flex; gap:8px; flex-wrap:wrap; padding:0; background:transparent; border:none; }
  .club-body .activity-pill {
    padding:5px 11px; font-size:11px; font-weight:700; letter-spacing:0.06em;
    background:var(--cream); border:1px solid var(--midnight); border-radius:999px;
  }
  /* Une couleur PAR ACTIVITÉ, identique dans les deux clubs (retour équipe
     23/07) · Café Central garde son vert perroquet de marque. */
  .club-body .activity-pill.escalade { background:var(--yellow); }
  .club-body .activity-pill.padel { background:var(--pink); }
  .club-body .activity-pill.hyrox { background:var(--green); }
  .club-body .activity-pill.bienetre { background:var(--cream); }
  .club-body .activity-pill.resto { background:var(--parrot); color:var(--cream); }
  .club-cta { display:flex; gap:10px; align-items:center; padding-top:10px; margin-top:auto; flex-wrap:wrap; }

  /* ===== TICKETING ZONE ===== */
  .tickets { padding:120px 40px; background:var(--yellow); }
  .tickets-wrap { max-width:1280px; margin:0 auto; }
  .tickets-head { margin-bottom:48px; }
  .tickets-head .row { display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }

  /* Empty state, must pick a club first */
  .ticket-empty {
    margin-top:48px; padding:80px 48px; text-align:center;
    border:2px dashed var(--midnight); background:var(--cream); position:relative; overflow:hidden;
  }
  .ticket-empty::before {
    content:'CHOIX DU CLUB · SELECT YOUR CLUB · CHOIX DU CLUB · SELECT YOUR CLUB · CHOIX DU CLUB · SELECT YOUR CLUB ·';
    position:absolute; top:14px; left:0; right:0; white-space:nowrap;
    font-size:11px; font-weight:700; letter-spacing:0.18em; opacity:0.25;
    overflow:hidden;
  }
  .ticket-empty h3 {
    font-size:clamp(40px, 5.5vw, 80px); line-height:0.92; letter-spacing:-0.05em;
    text-transform:uppercase; margin:0 auto 24px; max-width:820px;
  }
  .ticket-empty h3 .l1 { font-weight:400; }
  .ticket-empty h3 .l2 { font-weight:900; }
  .ticket-empty p { font-size:17px; line-height:1.5; max-width:540px; margin:0 auto 36px; font-weight:500; }
  .ticket-empty-choose { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .ticket-empty-choose .empty-btn {
    display:inline-flex; align-items:center; gap:10px; padding:18px 28px;
    border:2px solid var(--midnight); background:var(--paper);
    font-size:15px; font-weight:800; letter-spacing:-0.01em; cursor:pointer;
    transition:all 0.15s;
  }
  .ticket-empty-choose .empty-btn:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--midnight); }
  .ticket-empty-choose .empty-btn.disabled { opacity:0.5; cursor:default; }
  .ticket-empty-choose .empty-btn.disabled:hover { transform:none; box-shadow:none; }
  .ticket-empty-choose .empty-btn .dot { width:10px; height:10px; border-radius:50%; }
  .ticket-empty-choose .empty-btn[data-pick="lille"] .dot { background:#6e5a62; }
  .ticket-empty-choose .empty-btn[data-pick="champigny"] .dot { background:#6e5a62; }
  .ticket-empty-choose .empty-btn em { font-style:normal; font-weight:500; opacity:0.6; font-size:12px; letter-spacing:0.08em; text-transform:uppercase; margin-left:8px; }

  /* Ticketing, populated state */
  .ticket-content { display:none; }
  body[data-club="lille"] .ticket-empty,
  body[data-club="champigny"] .ticket-empty { display:none; }
  body[data-club="lille"] .ticket-content,
  body[data-club="champigny"] .ticket-content { display:block; }

  /* Mobile/tablette : la barre club + onglets sport reste collée en haut
     pendant le scroll des offres (changer de club/sport sans remonter). */
  @media (max-width:1024px) {
    .ticket-sticky {
      position:sticky; top:calc(var(--banner-h) + var(--nav-h)); z-index:6;
      background:var(--yellow); padding:12px 0 14px;
      box-shadow:0 8px 16px -12px rgba(14,11,35,0.55);
    }
  }
  .ticket-club-bar {
    display:flex; align-items:center; gap:16px; flex-wrap:wrap;
    padding:18px 24px; background:var(--cream); border:1.5px solid var(--midnight); margin-bottom:32px;
  }
  .ticket-club-bar .lbl { font-size:11px; font-weight:700; letter-spacing:0.14em; text-transform:uppercase; opacity:0.6; }
  .ticket-club-bar .cur { font-size:18px; font-weight:800; letter-spacing:-0.02em; }
  .ticket-club-bar .swap { margin-left:auto; font-size:12px; font-weight:700; letter-spacing:0.04em; padding:8px 14px; border:1.5px solid var(--midnight); border-radius:999px; cursor:pointer; }
  .ticket-club-bar .swap:hover { background:var(--midnight); color:var(--yellow); }

  /* Activity tabs in ticketing */
  .ticket-tabs { display:flex; gap:0; border-bottom:1.5px solid var(--midnight); margin-bottom:32px; overflow-x:auto; }
  .ticket-tab {
    padding:14px 22px; font-size:14px; font-weight:700; letter-spacing:-0.01em;
    border-bottom:3px solid transparent; cursor:pointer; white-space:nowrap;
    margin-bottom:-1.5px;
  }
  .ticket-tab.active { border-bottom-color:var(--midnight); }
  .ticket-tab:hover { background:var(--cream); }
  .ticket-tab .count { font-size:11px; font-weight:500; opacity:0.5; margin-left:6px; }
  /* Mobile : plus de scroll horizontal caché · sélecteur en pastilles qui
     s'enroulent proprement (UX claire, tout visible d'un coup d'œil). */
  @media (max-width:760px) {
    /* Barre club compacte sur une seule ligne (label verbeux masqué) */
    .ticket-club-bar { padding:10px 14px; margin-bottom:12px; gap:10px; flex-wrap:nowrap; }
    .ticket-club-bar .lbl { display:none; }
    .ticket-club-bar .cur { font-size:16px; white-space:nowrap; }
    .ticket-club-bar .swap { padding:7px 12px; font-size:11px; white-space:nowrap; }
    /* Onglets sport en pastilles, sans le compteur « X formules » (gain de
       place) ; l'espace sous la barre sticky vient du padding du wrapper. */
    .ticket-tabs { flex-wrap:wrap; overflow:visible; border-bottom:none; gap:7px; margin-bottom:0; }
    .ticket-tab { border:1.5px solid var(--midnight); border-radius:999px; padding:8px 14px; font-size:13px; margin-bottom:0; }
    .ticket-tab.active { background:var(--midnight); color:var(--paper); }
    .ticket-tab .count { display:none; }
  }

  /* Sélecteur d'audience escalade (Adultes / Tarifs réduits / Enfants) */
  .ticket-audience { margin-bottom:24px; }
  .ticket-audience[hidden] { display:none; }
  .ta-tabs {
    display:inline-flex; gap:0; border:1.5px solid var(--midnight);
    border-radius:999px; overflow:hidden; max-width:100%; flex-wrap:wrap;
  }
  .ta-tab {
    padding:9px 18px; font-size:13px; font-weight:700; letter-spacing:0.01em;
    background:transparent; color:var(--midnight); cursor:pointer; border:none;
    white-space:nowrap; transition:background 0.15s, color 0.15s;
  }
  .ta-tab + .ta-tab { border-left:1.5px solid var(--midnight); }
  .ta-tab.active { background:var(--midnight); color:var(--yellow); }
  .ta-tab:hover:not(.active) { background:var(--cream); }
  .ta-note { margin-top:12px; font-size:13px; line-height:1.45; font-weight:600; opacity:0.8; max-width:680px; }
  @media (max-width:760px) {
    .ta-tabs { width:100%; }
    .ta-tab { flex:1 1 auto; padding:9px 10px; font-size:12.5px; }
  }

  /* Pricing cards */
  .pricing { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
  .price-card {
    background:var(--paper); border:2px solid var(--midnight); padding:28px 26px;
    position:relative; display:flex; flex-direction:column; gap:14px;
  }
  .price-card.hl { background:var(--midnight); color:var(--yellow); }
  /* Badge doux (« Pour démarrer ») : repère sans la mise en avant forte du préféré */
  .pc-badge {
    position:absolute; top:-13px; left:24px;
    background:var(--yellow); color:var(--midnight); padding:5px 12px;
    font-size:11px; font-weight:800; letter-spacing:0.06em; border:1.5px solid var(--midnight);
  }
  .price-card.hl::before {
    content:'★ Le préféré'; position:absolute; top:-13px; left:24px;
    background:var(--pink); color:var(--midnight); padding:5px 12px;
    font-size:11px; font-weight:800; letter-spacing:0.06em; border:1.5px solid var(--midnight);
  }
  .price-card .ptype { font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.65; }
  .price-card h4 { font-size:32px; font-weight:800; letter-spacing:-0.03em; line-height:0.95; text-transform:uppercase; }
  .price-card .price-row { display:flex; align-items:baseline; gap:6px; padding:10px 0; border-top:1px solid currentColor; border-bottom:1px solid currentColor; }
  .price-card .price-row .num { font-size:48px; font-weight:900; letter-spacing:-0.045em; line-height:1; }
  .price-card .price-row .cur { font-size:20px; font-weight:700; }
  .price-card .price-row .freq { font-size:12px; font-weight:500; opacity:0.7; margin-left:auto; letter-spacing:0.06em; text-transform:uppercase; }
  .price-card ul { display:flex; flex-direction:column; gap:8px; flex:1; font-size:14px; font-weight:500; }
  .price-card ul li { display:flex; gap:8px; line-height:1.35; }
  .price-card ul li::before { content:'✓'; font-weight:800; flex-shrink:0; }
  .price-card .pcta { width:100%; margin-top:6px; padding:14px; font-size:13px; font-weight:800; letter-spacing:0.04em; text-transform:uppercase; background:var(--midnight); color:var(--yellow); border:2px solid var(--midnight); cursor:pointer; transition:all 0.15s; }
  .price-card.hl .pcta { background:var(--yellow); color:var(--midnight); border-color:var(--yellow); }
  .price-card .pcta:hover { transform:translate(-1px,-1px); box-shadow:3px 3px 0 var(--midnight); }
  .price-card.hl .pcta:hover { box-shadow:3px 3px 0 var(--yellow); }
  .price-card .fine { font-size:11px; opacity:0.6; text-align:center; }

  /* ===== ACTIVITIES SHOWCASE ===== */
  .activities { padding:120px 40px; background:var(--yellow); border-top:1.5px solid var(--midnight); }
  .activities-wrap { max-width:1440px; margin:0 auto; }
  .activities-head { margin-bottom:48px; }
  /* « Cinq façons de venir » : carrousel (même mécanique que le membership). */
  .act-carousel { position:relative; }
  .act-grid {
    --ms-per:4;
    display:flex; gap:20px; overflow-x:auto; -webkit-overflow-scrolling:touch;
    scroll-snap-type:x mandatory; scroll-behavior:smooth; scrollbar-width:none; padding:4px 2px 6px;
  }
  .act-grid::-webkit-scrollbar { display:none; }
  @media (max-width:980px) { .act-grid { --ms-per:2; } }
  @media (max-width:620px) { .act-grid { --ms-per:1; } }
  .act-grid .act-card { flex:0 0 calc((100% - (var(--ms-per) - 1) * 20px) / var(--ms-per)); scroll-snap-align:start; }
  .act-carousel.no-carousel .ms-arrow, .act-carousel.no-carousel .ms-dots { display:none; }
  .act-card { background:var(--paper); border:2px solid var(--midnight); overflow:hidden; cursor:pointer; transition:transform 0.18s, box-shadow 0.18s; display:flex; flex-direction:column; }
  .act-card:hover { transform:translate(-3px,-3px); box-shadow:8px 8px 0 var(--midnight); }
  .act-photo { aspect-ratio:1/1.05; position:relative; overflow:hidden; }
  .act-card[data-act="escalade"] .act-photo { background:linear-gradient(160deg, #d68a3c, #8b4f1e 60%, #2a1a10); }
  .act-card[data-act="hyrox"] .act-photo { background:linear-gradient(160deg, #2a3a55, #16243a 50%, #0a1220); }
  .act-card[data-act="padel"] .act-photo { background:linear-gradient(160deg, #3aa564, #1e6e3f 60%, #0e3a22); }
  .act-card[data-act="resto"] .act-photo { background:linear-gradient(160deg, #d4a574, #9c6f4a 60%, #4a2f1f); }
  .act-card[data-act="bienetre"] .act-photo { background:linear-gradient(160deg, #6fae8e, #3f7a62 55%, #14302380); }
  .act-photo::after { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 65% 75%, rgba(14,11,35,0.5), transparent 70%); }
  .act-photo .act-num { position:absolute; top:18px; left:20px; font-size:14px; font-weight:700; letter-spacing:0.14em; color:var(--yellow); opacity:0.7; }
  .act-photo .act-title { position:absolute; bottom:18px; left:20px; right:20px; color:var(--yellow); font-size:36px; font-weight:900; letter-spacing:-0.045em; line-height:0.9; text-transform:uppercase; }
  .act-meta { padding:18px 20px; display:flex; justify-content:space-between; align-items:center; gap:12px; }
  .act-card .act-price { padding:0 20px 18px; margin-top:-6px; font-size:14px; font-weight:700; display:flex; gap:8px; align-items:baseline; flex-wrap:wrap; }
  .act-card .act-price s { opacity:0.5; font-weight:600; }
  .act-card .act-price .note { flex-basis:100%; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.08em; opacity:0.65; }
  .act-meta .where { font-size:11px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; }
  .act-meta .arrow { font-size:18px; font-weight:800; transition:transform 0.15s; }
  .act-card:hover .arrow { transform:translateX(4px); }

  /* ===== SPLASH ===== */
  .splash {
    background:var(--midnight); color:var(--yellow);
    padding:140px 40px; text-align:center; position:relative; overflow:hidden;
    border-top:1.5px solid var(--midnight); border-bottom:1.5px solid var(--midnight);
  }

  /* ===== EVENTS ===== */
  .events { padding:120px 40px; background:var(--cream); border-top:1.5px solid var(--midnight); border-bottom:1.5px solid var(--midnight); }
  .events-wrap { max-width:1440px; margin:0 auto; }
  .events-head { margin-bottom:48px; max-width:900px; }
  .events-lede { font-size:18px; line-height:1.45; font-weight:500; max-width:680px; margin-top:20px; opacity:0.8; }
  .events-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; }
  .event-card { background:var(--paper); border:2px solid var(--midnight); display:flex; flex-direction:column; transition:transform 0.2s, box-shadow 0.2s; }
  .event-card:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--midnight); }
  .event-photo {
    aspect-ratio:4/3; position:relative; overflow:hidden;
    border-bottom:1.5px solid var(--midnight); display:flex; align-items:flex-end; padding:18px 20px;
  }
  .event-card[data-tone="pink"] .event-photo { background:linear-gradient(135deg, #6e5a62 0%, #6e5a62 60%, #1c1838 100%); }
  .event-card[data-tone="orange"] .event-photo { background:linear-gradient(135deg, #ff9b5a 0%, #c84d2e 60%, #5a1e0f 100%); }
  .event-card[data-tone="midnight"] .event-photo { background:linear-gradient(135deg, #4a3f78 0%, #1f1942 60%, #0a0820 100%); }
  .event-card[data-tone="yellow"] .event-photo { background:linear-gradient(135deg, #ffd54a 0%, #d49b1a 60%, #5a3f0a 100%); }
  .event-photo::after {
    content:''; position:absolute; inset:0;
    background:radial-gradient(ellipse at 60% 75%, rgba(14,11,35,0.45), transparent 70%);
  }
  .event-tag {
    position:absolute; top:14px; left:14px; z-index:2;
    padding:5px 10px; background:var(--paper); color:var(--midnight); border:1.5px solid var(--midnight);
    font-size:10px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase;
  }
  .event-stamp {
    position:relative; z-index:1; color:var(--yellow);
    font-size:clamp(40px, 4vw, 60px); font-weight:900; letter-spacing:-0.05em;
    line-height:0.9; text-transform:uppercase;
  }
  .event-card[data-tone="yellow"] .event-stamp { color:var(--midnight); }
  .event-body { padding:22px 22px 24px; display:flex; flex-direction:column; gap:14px; flex:1; }
  .event-body h3 { font-size:22px; font-weight:800; letter-spacing:-0.03em; line-height:1.05; text-transform:uppercase; }
  .event-body p { font-size:13px; line-height:1.5; opacity:0.8; }
  .event-meta { display:flex; flex-direction:column; gap:2px; font-size:13px; padding-top:12px; border-top:1px solid rgba(14,11,35,0.15); }
  .event-meta strong { font-size:18px; font-weight:800; letter-spacing:-0.02em; }
  .event-meta span { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.6; }

  /* ===== EVENTS THÉMATIQUES (point 11) ===== */
  .events-themed { padding:120px 40px; background:var(--paper); border-bottom:1.5px solid var(--midnight); }
  .events-themed-wrap { max-width:1440px; margin:0 auto; }
  .events-themed-head { margin-bottom:48px; max-width:900px; }
  .events-themed-head .events-lede { font-size:18px; line-height:1.45; font-weight:500; max-width:680px; margin-top:20px; opacity:0.8; }
  .events-themed-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:20px; align-items:stretch; }
  .themed-card { border:2px solid var(--midnight); padding:30px 26px 24px; display:flex; flex-direction:column; gap:16px; transition:transform 0.18s ease, box-shadow 0.18s ease; }
  .themed-card:hover { transform:translate(-4px,-4px); box-shadow:6px 6px 0 var(--midnight); }
  .themed-card[data-tone="green"] { background:var(--green); }
  .themed-card[data-tone="yellow"] { background:var(--yellow); }
  .themed-card[data-tone="cream"] { background:var(--cream); }
  .themed-card[data-tone="pink"] { background:var(--pink); }
  .themed-card .t-tag { font-size:10px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; opacity:0.65; }
  .themed-card h3 { font-size:24px; font-weight:900; letter-spacing:-0.035em; line-height:0.95; text-transform:uppercase; }
  .themed-card .t-desc { font-size:13px; line-height:1.5; opacity:0.85; }
  .themed-card .t-formats { list-style:none; padding:14px 0 0; margin:0; border-top:1px solid rgba(14,11,35,0.22); display:flex; flex-direction:column; gap:8px; }
  .themed-card .t-formats li { font-size:12px; font-weight:700; padding-left:16px; position:relative; letter-spacing:-0.005em; }
  .themed-card .t-formats li::before { content:'→'; position:absolute; left:0; opacity:0.55; }
  .themed-card .t-cta { margin-top:auto; padding-top:12px; }
  .themed-card .t-cta .btn { padding:8px 14px; font-size:12px; }
  .event-body .btn { align-self:flex-start; margin-top:auto; }

  /* ===== ACADEMY ===== */
  .academy { padding:120px 40px; background:var(--midnight); color:var(--yellow); border-bottom:1.5px solid var(--midnight); }
  .academy-wrap { max-width:1440px; margin:0 auto; }
  .academy-head { margin-bottom:56px; max-width:900px; }
  .academy-lede { font-size:18px; line-height:1.45; font-weight:500; max-width:680px; margin-top:20px; opacity:0.85; }
  .academy-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; margin-bottom:32px; }
  .acad-card {
    background:var(--paper); color:var(--midnight); padding:32px 28px 28px;
    display:flex; flex-direction:column; gap:18px; border:2px solid var(--yellow);
    transition:transform 0.2s, box-shadow 0.2s;
  }
  .acad-card:hover { transform:translate(-2px,-2px); box-shadow:6px 6px 0 var(--yellow); }
  .acad-head { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; padding-bottom:14px; border-bottom:1.5px solid var(--midnight); }
  .acad-disc { font-size:11px; font-weight:800; letter-spacing:0.16em; text-transform:uppercase; opacity:0.65; }
  .acad-tag {
    padding:4px 10px; background:var(--midnight); color:var(--yellow);
    font-size:10px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
  }
  .acad-card h3 { font-size:28px; font-weight:800; letter-spacing:-0.035em; line-height:1; text-transform:uppercase; }
  .acad-clubs { display:flex; flex-wrap:wrap; gap:6px; margin-top:-6px; }
  .acad-clubs .acad-club {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 10px 5px 8px; background:var(--midnight); color:var(--yellow);
    font-size:10.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase;
    border-radius:2px;
  }
  .acad-clubs .acad-club::before {
    content:''; width:6px; height:6px; border-radius:50%; background:var(--yellow); opacity:0.85;
  }
  .acad-clubs .acad-note { font-size:10.5px; font-weight:600; letter-spacing:0.08em; text-transform:uppercase; opacity:0.55; padding:5px 4px; }
  .acad-card ul { display:flex; flex-direction:column; gap:8px; flex:1; }
  .acad-card ul li { font-size:13.5px; line-height:1.45; font-weight:500; padding:8px 0; border-bottom:1px dashed rgba(14,11,35,0.15); }
  .acad-card ul li:last-child { border-bottom:none; }
  .acad-card ul li strong { font-weight:800; letter-spacing:-0.01em; }
  .acad-card .btn { align-self:flex-start; margin-top:8px; }
  .academy-foot { padding-top:24px; border-top:1px solid rgba(255,237,90,0.2); font-size:13px; font-weight:600; letter-spacing:0.06em; text-transform:uppercase; opacity:0.65; text-align:center; }

  @media (max-width:1200px) {
    .events-grid { grid-template-columns:1fr 1fr; }
    .academy-grid { grid-template-columns:1fr; }
  }
  @media (max-width:760px) {
    .events, .academy { padding:72px 20px; }
    .events-grid { grid-template-columns:1fr; }
  }
  .splash h2 {
    font-size:clamp(56px, 7vw, 118px); line-height:0.86; letter-spacing:-0.06em;
    text-transform:uppercase;
  }
  .splash h2 .l1 { font-weight:300; display:block; }
  .splash h2 .l2 { font-weight:500; display:block; }
  .splash h2 .l3 { font-weight:900; display:block; }
  .splash .sig { margin-top:36px; font-size:13px; font-weight:500; letter-spacing:0.18em; text-transform:uppercase; opacity:0.6; }

  /* ===== MARQUEE ===== */
  .marquee {
    background:var(--midnight); color:var(--yellow); padding:18px 0; overflow:hidden;
    border-top:1.5px solid var(--midnight); border-bottom:1.5px solid var(--midnight);
  }
  .marquee-track {
    display:flex; gap:48px; white-space:nowrap; animation:scroll 32s linear infinite;
    font-size:24px; font-weight:500; letter-spacing:-0.03em; text-transform:uppercase;
  }
  .marquee-track span { display:inline-flex; align-items:center; gap:48px; }
  .marquee-track span::after { content:'✦'; opacity:0.6; font-size:18px; }
  @keyframes scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

  /* ===== PROOF / STATS ===== */
  .proof { padding:120px 40px; background:var(--cream); }
  .proof-wrap { max-width:1280px; margin:0 auto; }
  .proof-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:0; border:2px solid var(--midnight); }
  .proof-cell { padding:36px 28px; border-right:1.5px solid var(--midnight); }
  .proof-cell:last-child { border-right:none; }
  .proof-cell .num { font-size:clamp(48px, 5vw, 76px); font-weight:900; letter-spacing:-0.055em; line-height:0.9; }
  .proof-cell .lbl { font-size:12px; font-weight:700; letter-spacing:0.12em; text-transform:uppercase; margin-top:10px; opacity:0.7; }

  /* ===== EXPERIENCE STORY ===== */
  .story { padding:120px 40px; background:var(--yellow); border-top:1.5px solid var(--midnight); }
  .story-wrap { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:center; }
  .story-text h2 { font-size:clamp(52px, 6.5vw, 96px); line-height:0.9; letter-spacing:-0.055em; text-transform:uppercase; margin-bottom:32px; }
  .story-text h2 .l1 { font-weight:300; }
  .story-text h2 .l2 { font-weight:900; }
  .story-text p { font-size:17px; line-height:1.5; margin-bottom:18px; max-width:480px; font-weight:500; }
  .story-text .sig-line { margin-top:32px; padding-top:24px; border-top:1.5px solid var(--midnight); font-size:13px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; }
  .story-photo { aspect-ratio:4/5; border:2px solid var(--midnight); position:relative; overflow:hidden; background:linear-gradient(135deg, #c9a87a 0%, #8b6b4a 50%, #3a2a1f 100%); }
  .story-photo::before { content:''; position:absolute; inset:0; background:radial-gradient(ellipse at 30% 30%, rgba(255,244,201,0.45), transparent 55%); }
  .story-photo .punch-overlay {
    position:absolute; bottom:24px; left:24px; right:24px; color:var(--yellow);
    font-size:clamp(40px, 5vw, 72px); font-weight:900; letter-spacing:-0.055em;
    text-transform:uppercase; line-height:0.85;
  }
  .story-photo .punch-overlay .l1 { font-weight:300; display:block; }
  .story-photo .punch-overlay .l2 { font-weight:900; display:block; }

  /* ===== B2B ===== */
  .b2b { padding:100px 40px; background:var(--pink); border-top:1.5px solid var(--midnight); }
  .b2b-wrap { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; }
  .b2b h2 { font-size:clamp(44px, 5.5vw, 80px); line-height:0.92; letter-spacing:-0.055em; text-transform:uppercase; margin-bottom:24px; }
  .b2b h2 .l1 { font-weight:300; }
  .b2b h2 .l2 { font-weight:900; }
  .b2b p { font-size:17px; line-height:1.5; max-width:480px; margin-bottom:24px; font-weight:500; }
  .b2b-cta { display:flex; gap:12px; flex-wrap:wrap; }
  .b2b-tags { display:flex; gap:10px; flex-wrap:wrap; justify-content:flex-end; }
  .b2b-tag { padding:14px 22px; background:var(--midnight); color:var(--yellow); font-size:14px; font-weight:700; letter-spacing:-0.01em; }
  .b2b-tag.alt { background:var(--paper); color:var(--midnight); border:1.5px solid var(--midnight); }

  /* ===== FAQ ===== */
  .faq { padding:120px 40px; background:var(--yellow); border-top:1.5px solid var(--midnight); }
  .faq-wrap { max-width:920px; margin:0 auto; }
  .faq h2 { font-size:clamp(52px, 6.5vw, 92px); line-height:0.9; letter-spacing:-0.055em; text-transform:uppercase; margin-bottom:48px; text-align:center; }
  .faq-item { border-top:1.5px solid var(--midnight); padding:24px 0; cursor:pointer; }
  .faq-item:last-child { border-bottom:1.5px solid var(--midnight); }
  .faq-q { display:flex; justify-content:space-between; gap:24px; font-size:20px; font-weight:700; letter-spacing:-0.02em; }
  .faq-q::after { content:'+'; font-size:28px; font-weight:300; transition:transform 0.2s; }
  .faq-item.open .faq-q::after { transform:rotate(45deg); }
  .faq-a { display:none; padding-top:14px; font-size:15px; line-height:1.55; max-width:720px; font-weight:500; }
  .faq-item.open .faq-a { display:block; }

  /* ===== FINAL ===== */
  .final {
    background:var(--midnight); color:var(--yellow); padding:140px 40px;
    text-align:center; position:relative; overflow:hidden;
  }
  .final h2 { font-size:clamp(50px, 6.5vw, 104px); line-height:0.86; letter-spacing:-0.06em; text-transform:uppercase; margin-bottom:24px; }
  .final h2 .l1 { font-weight:300; display:block; }
  .final h2 .l2 { font-weight:900; display:block; }
  .final p { font-size:18px; line-height:1.5; max-width:540px; margin:0 auto 36px; font-weight:500; opacity:0.9; }
  .final-ctas { display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
  .final .btn-xl { background:var(--yellow); color:var(--midnight); border-color:var(--yellow); }
  .final .btn-xl.alt { background:transparent; color:var(--yellow); border-color:var(--yellow); }

  /* ===== FOOTER ===== */
  .footer { background:var(--midnight); color:var(--yellow); padding:80px 40px 36px; border-top:1.5px solid var(--yellow); }
  .footer-wrap { max-width:1440px; margin:0 auto; }
  .footer-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:48px; margin-bottom:60px; }
  .footer-brand h3 { font-size:48px; font-weight:900; letter-spacing:-0.055em; text-transform:uppercase; margin-bottom:14px; }
  .footer-brand p { font-size:14px; opacity:0.8; max-width:340px; line-height:1.5; }
  .footer-col h4 { font-size:11px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.55; margin-bottom:14px; }
  .footer-col ul li { padding:5px 0; font-size:14px; }
  .footer-col ul li:hover { font-weight:700; }
  .footer-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; padding-top:28px; border-top:1px solid rgba(255,244,201,0.2); font-size:11px; letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; }
  .footer-baseline .w1 { font-weight:300; } .footer-baseline .w2 { font-weight:500; } .footer-baseline .w3 { font-weight:700; }

  /* ===== CLUB PICKER MODAL ===== */
  .modal-bg {
    position:fixed; inset:0; background:rgba(14,11,35,0.92);
    z-index:200; display:none; align-items:center; justify-content:center; padding:40px;
    backdrop-filter:blur(6px);
  }
  .modal-bg.open { display:flex; }
  .modal {
    background:var(--yellow); border:2px solid var(--midnight); padding:48px 44px;
    max-width:880px; width:100%; max-height:90vh; overflow:auto; position:relative;
  }
  .modal-close {
    position:absolute; top:18px; right:18px; width:36px; height:36px;
    border:1.5px solid var(--midnight); border-radius:50%; cursor:pointer;
    font-size:18px; display:flex; align-items:center; justify-content:center;
  }
  .modal-close:hover { background:var(--midnight); color:var(--yellow); }
  .modal-eyebrow { font-size:12px; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; opacity:0.6; margin-bottom:14px; }
  .modal h2 { font-size:clamp(40px, 5vw, 72px); line-height:0.92; letter-spacing:-0.055em; text-transform:uppercase; margin-bottom:14px; }
  .modal h2 .l1 { font-weight:300; }
  .modal h2 .l2 { font-weight:900; }
  .modal-sub { font-size:16px; font-weight:500; line-height:1.45; margin-bottom:28px; max-width:560px; }
  .modal-clubs { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .modal-club {
    border:2px solid var(--midnight); padding:24px; background:var(--paper);
    cursor:pointer; transition:transform 0.15s, box-shadow 0.15s;
    display:flex; flex-direction:column; gap:8px;
  }
  .modal-club:hover { transform:translate(-2px,-2px); box-shadow:5px 5px 0 var(--midnight); }
  .modal-club.disabled { opacity:0.55; cursor:default; background:var(--cream); }
  .modal-club.disabled:hover { transform:none; box-shadow:none; }
  .modal-club .city { font-size:32px; font-weight:900; letter-spacing:-0.04em; text-transform:uppercase; }
  .modal-club .addr { font-size:12px; font-weight:500; opacity:0.7; letter-spacing:0.04em; }
  .modal-club .acts { display:flex; gap:5px; flex-wrap:wrap; margin-top:8px; }
  .modal-club .acts span { padding:3px 9px; background:var(--cream); border:1px solid var(--midnight); font-size:10px; font-weight:700; letter-spacing:0.06em; border-radius:999px; }
  .modal-club .pill {
    align-self:flex-start; padding:4px 11px; background:var(--midnight); color:var(--yellow);
    font-size:10px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; border-radius:999px;
  }
  .modal-club.disabled .pill { background:transparent; border:1px solid var(--midnight); color:var(--midnight); }

  /* ===== RESPONSIVE ===== */
  @media (max-width:1240px) {
    .nav { padding:0 20px; }
    .nav-item { padding:0 10px; font-size:13px; }
    .nav-logo { font-size:20px; padding-right:10px; }
    .club-pill { padding:6px 12px; font-size:11px; }
    .nav-right .btn { padding:8px 13px; font-size:12px; }
  }
  @media (max-width:1100px) {
    .pricing { grid-template-columns:1fr; }
    .activities-grid { grid-template-columns:1fr 1fr; }
    .footer-top { grid-template-columns:1fr 1fr; }
    .proof-grid { grid-template-columns:1fr 1fr; }
    .proof-cell:nth-child(2) { border-right:none; }
    .proof-cell:nth-child(1), .proof-cell:nth-child(2) { border-bottom:1.5px solid var(--midnight); }
    .nav-links { display:none; }
    .nav-mobile-toggle { display:flex; }
  }
  @media (max-width:760px) {
    .hero { padding:48px 20px; }
    .hero-grid, .clubs-grid, .story-wrap, .b2b-wrap { grid-template-columns:1fr; gap:40px; }
    .clubs, .tickets, .activities, .proof, .story, .b2b, .faq, .splash, .final { padding:72px 20px; }
    .activities-grid { grid-template-columns:1fr; }
    .modal-clubs { grid-template-columns:1fr; }
  }
  /* nav-mobile-toggle styling lives in escapad-chrome.css so it stays in sync
     with every other page. No local override here, the previous one was a
     stale duplicate placed after the @media block, which made the base
     'display:none' win at every breakpoint. */

  /* ===== POURQUOI NOUS (2.7) ===== */
  .why { padding:96px 40px; background:var(--cream); border-bottom:1.5px solid var(--midnight); }
  .why-wrap { max-width:1280px; margin:0 auto; }
  .why-eyebrow { font-size:12px; font-weight:800; letter-spacing:0.18em; text-transform:uppercase; opacity:0.6; margin-bottom:36px; text-align:center; }
  .why-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; align-items:stretch; }
  .why-card { background:var(--paper); border:2px solid var(--midnight); padding:36px 32px; display:flex; flex-direction:column; gap:14px; transition:transform 0.18s, box-shadow 0.18s; }
  .why-card:hover { transform:translate(-4px,-4px); box-shadow:6px 6px 0 var(--midnight); }
  .why-card .why-num { font-size:48px; font-weight:900; letter-spacing:-0.045em; line-height:0.9; opacity:0.18; }
  .why-card h3 { font-size:clamp(22px, 2.4vw, 30px); font-weight:900; letter-spacing:-0.035em; line-height:1.05; text-transform:uppercase; }
  .why-card p { font-size:15px; line-height:1.55; font-weight:500; opacity:0.85; }

  /* ===== TÉMOIGNAGES (2.2) ===== */
  .testimonials { padding:96px 40px; background:var(--pink); border-bottom:1.5px solid var(--midnight); }
  .testimonials-wrap { max-width:1280px; margin:0 auto; }
  .testimonials-head { margin-bottom:48px; text-align:center; }
  .testimonials-head .section-eyebrow { margin-bottom:14px; text-align:center; }
  .testimonials-head h2 { font-size:clamp(40px, 5vw, 72px); line-height:0.9; letter-spacing:-0.055em; text-transform:uppercase; }
  .testimonials-head h2 .l1 { font-weight:300; }
  .testimonials-head h2 .l2 { font-weight:900; }
  .testimonials-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
  .testimonial-card { background:var(--paper); border:2px solid var(--midnight); padding:30px 28px; display:flex; flex-direction:column; gap:18px; }
  .testimonial-card .stars { display:flex; gap:3px; }
  .testimonial-card .stars span { font-size:16px; color:#f5b800; }
  .testimonial-card .quote { font-size:16px; line-height:1.5; font-weight:500; flex:1; }
  .testimonial-card .quote::before { content:'« '; font-weight:900; font-size:20px; opacity:0.4; }
  .testimonial-card .quote::after  { content:' »'; font-weight:900; font-size:20px; opacity:0.4; }
  .testimonial-card .who { display:flex; align-items:center; gap:14px; padding-top:14px; border-top:1px solid rgba(14,11,35,0.15); }
  .testimonial-card .avatar { width:46px; height:46px; border-radius:50%; background:var(--midnight); color:var(--yellow); display:flex; align-items:center; justify-content:center; font-size:16px; font-weight:900; letter-spacing:-0.02em; flex-shrink:0; }
  .testimonial-card .who-info .name { font-size:14px; font-weight:800; letter-spacing:-0.01em; }
  .testimonial-card .who-info .meta { font-size:11px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; opacity:0.65; }

  /* ===== COMPARATEUR ABONNEMENTS (2.5) ===== */
  .compare { padding:96px 40px; background:var(--midnight); color:var(--yellow); border-bottom:1.5px solid var(--midnight); }
  .compare-wrap { max-width:1280px; margin:0 auto; }
  .compare-head { margin-bottom:40px; display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap; }
  .compare-head .section-eyebrow { color:var(--yellow); opacity:0.7; margin-bottom:10px; }
  .compare-head h2 { font-size:clamp(40px, 5vw, 72px); line-height:0.9; letter-spacing:-0.055em; text-transform:uppercase; max-width:700px; }
  .compare-head h2 .l1 { font-weight:300; }
  .compare-head h2 .l2 { font-weight:900; }
  .compare-head .compare-tabs { display:flex; border:1.5px solid var(--yellow); }
  .compare-head .compare-tabs button {
    padding:12px 18px; background:transparent; color:var(--yellow);
    border:none; cursor:pointer; font-family:inherit;
    font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
    border-right:1px solid rgba(255,244,201,0.3);
  }
  .compare-head .compare-tabs button:last-child { border-right:none; }
  .compare-head .compare-tabs button.active { background:var(--yellow); color:var(--midnight); }
  .compare-table { display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:0; border:1px solid rgba(255,244,201,0.25); }
  .compare-table > div { padding:14px 16px; border-right:1px solid rgba(255,244,201,0.15); border-bottom:1px solid rgba(255,244,201,0.15); font-size:13px; line-height:1.4; }
  .compare-table > div:nth-child(5n) { border-right:none; }
  .compare-table > div.head { background:rgba(255,244,201,0.1); font-weight:800; letter-spacing:0.04em; text-transform:uppercase; font-size:11px; }
  .compare-table .col-name { font-size:18px; font-weight:900; letter-spacing:-0.025em; text-transform:uppercase; line-height:1; }
  .compare-table .col-name small { display:block; font-size:11px; font-weight:600; opacity:0.7; margin-top:4px; letter-spacing:0.04em; }
  .compare-table .col-name.hl { background:var(--yellow); color:var(--midnight); }
  .compare-table .col-price { font-size:26px; font-weight:900; letter-spacing:-0.04em; }
  .compare-table .col-price .strike { font-size:13px; opacity:0.5; text-decoration:line-through; margin-left:6px; font-weight:600; }
  .compare-table .col-price .freq { font-size:11px; opacity:0.6; font-weight:600; display:block; margin-top:2px; letter-spacing:0.04em; text-transform:uppercase; }
  .compare-table .check { font-size:14px; font-weight:800; color:var(--yellow); }
  .compare-table .dash { opacity:0.35; font-weight:800; }
  .compare-table .col-cta { padding:12px; }
  .compare-table .col-cta button {
    width:100%; padding:11px 12px; background:var(--yellow); color:var(--midnight);
    border:1.5px solid var(--yellow); cursor:pointer; font-family:inherit;
    font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase;
    transition:transform 0.15s, box-shadow 0.15s;
  }
  .compare-table .col-cta button:hover { transform:translate(-2px,-2px); box-shadow:3px 3px 0 rgba(255,244,201,0.4); }
  .compare-foot { margin-top:18px; font-size:12px; opacity:0.7; line-height:1.5; }

  /* ===== STICKY CTA mobile (2.4) ===== */
  .sticky-cta {
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--midnight); color:var(--yellow);
    border-top:1.5px solid var(--yellow);
    padding:12px 16px;
    display:none; align-items:center; gap:12px;
    box-shadow:0 -4px 18px rgba(14,11,35,0.25);
    transform:translateY(110%); transition:transform 0.3s ease;
  }
  .sticky-cta.show { transform:translateY(0); }
  .sticky-cta .sc-text { flex:1; line-height:1.25; }
  .sticky-cta .sc-text .sc-l1 { font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; opacity:0.7; }
  .sticky-cta .sc-text .sc-l2 { font-size:14px; font-weight:800; letter-spacing:-0.005em; }
  .sticky-cta .sc-btn { padding:12px 16px; background:var(--yellow); color:var(--midnight); border:none; font-family:inherit; font-size:12px; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; cursor:pointer; }

  /* ===== VIE DE CLUB (3.9 + 3.11) ===== */
  .club-life { padding:96px 40px; background:var(--paper); border-bottom:1.5px solid var(--midnight); }
  .club-life-wrap { max-width:1440px; margin:0 auto; }
  .club-life-head { display:grid; grid-template-columns:1fr 1fr; gap:32px; align-items:end; margin-bottom:36px; }
  .club-life-head h2 { font-size:clamp(40px, 5vw, 72px); line-height:0.9; letter-spacing:-0.055em; text-transform:uppercase; margin-top:14px; }
  .club-life-head h2 .l1 { font-weight:300; }
  .club-life-head h2 .l2 { font-weight:900; }
  .club-life-igs { display:flex; flex-direction:column; gap:10px; align-items:flex-end; }
  .club-life-cta {
    display:inline-flex; align-items:center; gap:14px; padding:14px 20px;
    background:linear-gradient(135deg, #fb6a8b 0%, #c84d2e 50%, #f5c845 100%);
    color:#fff; border:2px solid var(--midnight);
    /* lisibilité du texte blanc sur l'extrémité jaune clair du dégradé (WCAG) */
    text-shadow:0 1px 2px rgba(13,11,34,0.5);
    justify-self:end; text-decoration:none;
    transition:transform 0.15s, box-shadow 0.15s;
  }
  .club-life-cta:hover { transform:translate(-3px,-3px); box-shadow:5px 5px 0 var(--midnight); }
  .club-life-cta .cl-ig-icon { width:38px; height:38px; border:1.5px solid #fff; border-radius:8px; display:flex; align-items:center; justify-content:center; font-size:20px; font-weight:900; }
  .club-life-cta .cl-ig-info { display:flex; flex-direction:column; line-height:1.2; }
  .club-life-cta .cl-ig-info strong { font-size:14px; font-weight:900; letter-spacing:-0.005em; }
  .club-life-cta .cl-ig-info small { font-size:11px; font-weight:600; opacity:0.92; letter-spacing:0.02em; }
  .club-life-cta .cl-ig-arrow { font-size:18px; font-weight:800; opacity:0.85; }

  /* Reel tile = play icon overlay */
  .eg-item.cl-reel .cl-play {
    position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
    z-index:2; width:54px; height:54px; border-radius:50%;
    background:rgba(255,255,255,0.92); color:var(--midnight);
    display:flex; align-items:center; justify-content:center;
    font-size:22px; padding-left:4px;
    transition:transform 0.18s, background 0.18s;
  }
  .eg-item.cl-reel:hover .cl-play { transform:translate(-50%,-50%) scale(1.1); background:var(--yellow); }

  @media (max-width:1100px) {
    .club-life-head { grid-template-columns:1fr; gap:20px; }
    .club-life-cta { justify-self:start; }
  }

  @media (max-width:760px) {
    .why-grid { grid-template-columns:1fr; }
    .testimonials-grid { grid-template-columns:1fr; }
    .compare-table { grid-template-columns:1fr 1fr; overflow-x:auto; }
    .compare-head { flex-direction:column; align-items:flex-start; }
    .sticky-cta { display:flex; }
    /* prevent footer being hidden by sticky bar */
    body { padding-bottom:64px; }
    .club-life { padding:64px 20px; }
  }

/* ===== MEMBERSHIP CHAMPIGNY (accès illimité · charte midnight/terracotta) ===== */
.membership { background:var(--midnight); color:var(--yellow); padding:96px 40px; border-bottom:1.5px solid var(--midnight); }
.membership-wrap { max-width:1200px; margin:0 auto; }
.membership-head { max-width:760px; margin-bottom:44px; }
.membership .section-eyebrow { color:var(--peach); }
.membership .section-h2 { color:var(--yellow); }
.membership-lead { margin-top:18px; font-size:18px; line-height:1.6; color:rgba(255,244,201,0.82); }
.membership-stats { display:flex; flex-wrap:wrap; gap:10px 26px; margin-top:24px; font-size:14px; color:rgba(255,244,201,0.8); }
.membership-stats span { display:inline-flex; align-items:baseline; gap:6px; }
.membership-stats b { font-size:18px; font-weight:900; color:var(--peach); }
/* ===== Carrousel Membership (flèches + points · pas un scroll brut) ===== */
.membership-carousel { position:relative; }
.membership-grid {
  --ms-per:3;
  display:flex; gap:18px; overflow-x:auto; -webkit-overflow-scrolling:touch;
  scroll-snap-type:x mandatory; scroll-behavior:smooth;
  scrollbar-width:none; padding:4px 2px 6px;
}
.membership-grid::-webkit-scrollbar { display:none; }
@media (max-width:980px) { .membership-grid { --ms-per:2; } }
@media (max-width:620px) { .membership-grid { --ms-per:1; } }
.membership-card {
  flex:0 0 calc((100% - (var(--ms-per) - 1) * 18px) / var(--ms-per));
  scroll-snap-align:start;
  background:var(--yellow); color:var(--midnight);
  border:1.5px solid var(--midnight); border-radius:16px; overflow:hidden;
  box-shadow:6px 6px 0 rgba(255,192,158,0.5);
  transition:box-shadow .15s ease;
}
.membership-card:hover { box-shadow:9px 9px 0 rgba(255,192,158,0.65); }
/* Flèches */
.ms-arrow {
  position:absolute; top:calc(50% - 38px); transform:translateY(-50%); z-index:4;
  width:46px; height:46px; border-radius:50%; border:1.5px solid var(--yellow);
  background:var(--midnight); color:var(--yellow); font-size:22px; line-height:1; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  transition:background .15s ease, color .15s ease, opacity .15s ease;
}
.ms-arrow:hover { background:var(--yellow); color:var(--midnight); }
.ms-arrow.ms-prev { left:-12px; }
.ms-arrow.ms-next { right:-12px; }
.ms-arrow[disabled] { opacity:0.28; cursor:default; }
.ms-arrow[disabled]:hover { background:var(--midnight); color:var(--yellow); }
/* Points */
.ms-dots { display:flex; gap:15px; justify-content:center; margin-top:26px; }
/* Pastilles inchangées à l'écran · zone de clic étendue à 25px (cibles
   tactiles Lighthouse) via un pseudo-élément invisible. */
.ms-dots button { width:9px; height:9px; padding:0; border-radius:50%; border:1.5px solid var(--yellow); background:transparent; cursor:pointer; transition:transform .15s ease, background .15s ease; position:relative; }
.ms-dots button::after { content:''; position:absolute; inset:-8px; border-radius:50%; }
.ms-dots button.active { background:var(--yellow); transform:scale(1.3); }
/* Tout tient à l'écran : pas de carrousel, juste une rangée centrée. */
.membership-carousel.no-carousel .ms-arrow, .membership-carousel.no-carousel .ms-dots { display:none; }
.membership-img { aspect-ratio:4/3; border-bottom:1.5px solid var(--midnight); }
.membership-card-body { padding:20px 22px 24px; }
.membership-card h3 { font-size:20px; font-weight:800; margin-bottom:6px; letter-spacing:var(--tight); }
.membership-card p { font-size:14.5px; line-height:1.5; color:#3a3a3a; }
.membership-cta-actions { display:flex; gap:12px; flex-wrap:wrap; margin-top:36px; }
.membership .btn.primary { background:var(--yellow); color:var(--midnight); border:1.5px solid var(--yellow); }
.membership .btn.ghost { background:transparent; color:var(--yellow); border:1.5px solid var(--yellow); }
.membership .btn.ghost:hover { background:var(--yellow); color:var(--midnight); }
.membership .btn.primary:hover { box-shadow:5px 5px 0 rgba(255,192,158,0.55); }
@media (min-width:1400px) { .membership-wrap { max-width:1320px; } }
@media (max-width:560px) {
  .membership { padding:64px 22px; }
  .membership-cta { flex-direction:column; align-items:flex-start; }
  .membership-cta-actions { width:100%; }
  .membership-cta-actions .btn { flex:1; text-align:center; }
}

/* ===== Encart Bien-être dans la billetterie (lien vers page Bien-être) ===== */
/* Visible seulement hors club Lille (retour équipe 20/07 : pas d'encart
   « bientôt à Lille » · le bien-être n'existe qu'à Paris Est). */
.ticket-bienetre.cv { display:none; }
body:not([data-club="lille"]) .ticket-bienetre.tb-default { display:flex; }
.ticket-bienetre {
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  margin-top:28px; padding:24px 28px;
  background:var(--green); color:var(--midnight);
  border:1.5px solid var(--midnight); border-radius:16px;
  box-shadow:6px 6px 0 rgba(13,11,34,0.12);
  transition:transform .15s ease, box-shadow .15s ease;
}
.ticket-bienetre:hover { transform:translate(-2px,-2px); box-shadow:9px 9px 0 rgba(13,11,34,0.18); }
.ticket-bienetre .tb-eyebrow { font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; opacity:0.6; margin-bottom:6px; }
.ticket-bienetre h3 { font-size:21px; font-weight:800; letter-spacing:var(--tight); margin-bottom:6px; }
.ticket-bienetre p { font-size:14.5px; line-height:1.5; max-width:560px; }
.ticket-bienetre .tb-cta { flex-shrink:0; font-weight:800; font-size:14px; padding:12px 20px; background:var(--midnight); color:var(--yellow); border-radius:999px; white-space:nowrap; }
@media (max-width:640px) {
  .ticket-bienetre { flex-direction:column; align-items:flex-start; }
  .ticket-bienetre .tb-cta { align-self:stretch; text-align:center; }
}

/* ===== Bloc « Première fois » · offre d'appel découverte (haut de page) ===== */
.firsttime { background:var(--peach); color:var(--midnight); padding:40px; border-bottom:1.5px solid var(--midnight); }
.firsttime-wrap { max-width:1200px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:28px; }
.firsttime-eyebrow { font-size:12px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; opacity:0.65; margin-bottom:8px; }
.firsttime h2 { font-size:clamp(24px,3vw,40px); line-height:1; letter-spacing:var(--tight); font-weight:900; }
.firsttime h2 span { font-weight:500; }
.firsttime p { margin-top:12px; font-size:15px; line-height:1.5; max-width:540px; }
.firsttime-cta { display:flex; gap:12px; flex-wrap:wrap; flex-shrink:0; }
@media (max-width:760px) { .firsttime { padding:32px 22px; } .firsttime-cta { width:100%; } .firsttime-cta .btn { flex:1; text-align:center; } }

/* Vidéo de fond du hero accueil : au-dessus des polaroïds (z1) quand elle
   tourne, sous le contenu (z10). Voir escapad-chrome.css (.hero-bg-video). */
.hw-bg .hero-bg-video { z-index:2; }
.hw-bg .hero-bg-scrim { z-index:3; }