/* GENERATED by tools/build-v2.py bundle() — do not edit: edit the files named below and rebuild. */
/* ---- assets/site.css ---- */
/* APEX12 — site prototype (Equinox rhythm). PROTOTYPE, throwaway.
   Black ground, white ink, red only where the eye must go or under the pointer. */

/* Title font: Bebas Neue, declared in v2/assets/v2-fonts.css (v2/fonts/bebas-neue.woff2). Plaax trial dropped 02.11. */

:root {
  --black: #000;
  --ink: #fff;
  --grey: #a6a6a6;        /* secondary paragraphs (Equinox #aaa) */
  --grey-2: #8c8c8c;      /* captions, fine print */
  --line: #262626;        /* section rules */
  --raise: #0e0e0e;       /* one tone step above black */
  --paper: #f4f4f2;       /* the one light surface (form) */
  --red: #e93942;         /* APEX12 red, from the logo */
  --red-deep: #c22630;

  --m: clamp(20px, 4.45vw, 64px);    /* outer margin */
  --gap: clamp(12px, 1.12vw, 16px);  /* grid gutter */
  --nav-h: 80px;

  --display: "Bebas Neue", "Arial Narrow", sans-serif;
  --text: "Manrope", system-ui, sans-serif;

  --d-xl: clamp(64px, 11.2vw, 184px);
  --d-l: clamp(52px, 8.4vw, 136px);
  --d-m: clamp(44px, 6vw, 96px);
  --d-s: clamp(30px, 3vw, 44px);

  --ease-out: cubic-bezier(0.19, 1, 0.22, 1);      /* Equinox line reveal */
  --ease-soft: cubic-bezier(0.165, 0.84, 0.44, 1); /* Equinox transforms */
  --ease-io: cubic-bezier(0.77, 0, 0.175, 1);      /* Equinox image scale */

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.5 -0.6'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
body {
  margin: 0;
  background: var(--black);
  color: var(--ink);
  font-family: var(--text);
  font-size: 18px;
  line-height: 1.45;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
::selection { background: var(--red); color: #fff; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- type ---------- */
.d { font-family: var(--display); font-weight: 700; text-transform: uppercase; line-height: .88; letter-spacing: -.005em; margin: 0; }
.d-xl { font-size: var(--d-xl); }
.d-l { font-size: var(--d-l); }
.d-m { font-size: var(--d-m); }
.d-s { font-size: var(--d-s); line-height: .95; }
.lead { font-size: clamp(20px, 1.7vw, 24px); line-height: 1.3; margin: 0; max-width: 34ch; }
.body { color: var(--grey); margin: 0; max-width: 46ch; }
.body strong { color: var(--ink); font-weight: 500; }
.cap { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.3; font-weight: 500; }
.fine { font-size: 13px; color: var(--grey-2); }

/* ---------- layout ---------- */
.wrap { padding-inline: var(--m); max-width: 1680px; margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); }
.rule { height: 1px; background: var(--line); border: 0; margin: 0; }
section { position: relative; }
.pad { padding-block: clamp(88px, 11vw, 168px); }
.grainy { isolation: isolate; position: relative; }
.grainy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background-image: var(--grain); opacity: .55; mix-blend-mode: overlay;
}
.grainy > * { position: relative; z-index: 1; }

/* ---------- buttons & links ---------- */
.btn {
  --h: 64px;
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  height: var(--h); padding: 0 32px;
  font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  overflow: hidden; isolation: isolate; white-space: nowrap;
  transition: color .35s var(--ease-soft), border-color .35s var(--ease-soft), transform .16s ease-out;
}
.btn::before { /* the red wipe, rises from the bottom on hover */
  content: ""; position: absolute; inset: 0; z-index: -1; background: var(--red);
  clip-path: inset(100% 0 0 0); transition: clip-path .5s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn-solid { background: #fff; color: #000; }
.btn-line { border: 1px solid rgba(255,255,255,.9); color: #fff; }
.btn-dark { background: #000; color: #fff; }
@media (hover: hover) and (pointer: fine) {
  .btn:hover { color: #fff; border-color: var(--red); }
  .btn:hover::before { clip-path: inset(0 0 0 0); }
}
.btn-sm { --h: 48px; padding: 0 22px; font-size: 13px; }

.ulink {
  position: relative; display: inline-block; padding-bottom: 4px;
  font-size: 15px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.ulink::after, .ulink::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform-origin: right; transition: transform .6s var(--ease-out);
}
.ulink::before { background: var(--red); height: 2px; transform: scaleX(0); transform-origin: left; z-index: 1; }
@media (hover: hover) and (pointer: fine) {
  .ulink:hover::before { transform: scaleX(1); }
}

/* ---------- navigation ---------- */
.nav {
  position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nav-h);
  background: #000; border-bottom: 1px solid #1c1c1c;
  transition: transform .5s var(--ease-soft);
}
.nav.is-hidden { transform: translateY(-100%); }
.nav .wrap { height: 100%; display: flex; align-items: center; gap: 40px; }
.brand { display: flex; align-items: center; height: 100%; flex: none; }
.brand { position: relative; }
.brand img { height: 30px; width: auto; transition: opacity .45s ease; }
.brand img.c { position: absolute; left: 0; top: 50%; translate: 0 -50%; opacity: 0; }
@media (hover: hover) and (pointer: fine) { .brand:hover img.c { opacity: 1; } .brand:hover img:not(.c) { opacity: 0; } }
.nav-links { display: flex; gap: 26px; margin-right: auto; }
.nav-links a { position: relative; font-size: 16px; padding-block: 6px; color: #f2f2f2; transition: color .25s ease; }
.nav-links a::after {
  content: ""; position: absolute; left: 50%; bottom: -2px; width: 5px; height: 5px; background: var(--red);
  transform: translateX(-50%) scale(0); transition: transform .35s var(--ease-out);
}
.nav-links a[aria-current="page"]::after { transform: translateX(-50%) scale(1); }
@media (hover: hover) and (pointer: fine) { .nav-links a:hover::after { transform: translateX(-50%) scale(1); } }
.nav-cta { display: flex; align-items: center; gap: 28px; }
.nav-burger { display: none; width: 44px; height: 44px; position: relative; }
.nav-burger span { position: absolute; left: 10px; right: 10px; height: 1.5px; background: #fff; transition: transform .4s var(--ease-out), opacity .2s; }
.nav-burger span:nth-child(1) { top: 17px; } .nav-burger span:nth-child(2) { top: 26px; }
.menu-open .nav-burger span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); }
.menu-open .nav-burger span:nth-child(2) { transform: translateY(-4.5px) rotate(-45deg); }

.bar {
  margin-top: var(--nav-h); border-bottom: 1px solid #1c1c1c;
  min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 10px var(--m); font-size: 14px; text-align: center; color: #eee;
}
.bar a { text-decoration: underline; text-underline-offset: 3px; transition: color .25s; }
.bar a:hover { color: var(--red); }
.dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--red); flex: none; }
.dot.live { animation: pulse 2.4s ease-out infinite; }
.dot.off { background: #555; animation: none; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(233,57,66,.55); } 70%,100% { box-shadow: 0 0 0 9px rgba(233,57,66,0); } }

.menu {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 49; background: #000;
  padding: 32px var(--m) 40px; display: flex; flex-direction: column; justify-content: space-between;
  visibility: hidden; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io), visibility 0s .7s;
}
.menu-open .menu { visibility: visible; clip-path: inset(0 0 0 0); transition: clip-path .7s var(--ease-io); }
.menu ul { list-style: none; margin: 0; padding: 0; }
.menu li { overflow: hidden; }
.menu li a { display: block; font-family: var(--display); text-transform: uppercase; font-size: clamp(48px, 13vw, 88px); line-height: .98; transform: translateY(105%); transition: transform .8s var(--ease-out), color .25s; }
.menu-open .menu li a { transform: none; }
.menu li:nth-child(2) a { transition-delay: .05s; } .menu li:nth-child(3) a { transition-delay: .1s; }
.menu li:nth-child(4) a { transition-delay: .15s; } .menu li:nth-child(5) a { transition-delay: .2s; } .menu li:nth-child(6) a { transition-delay: .25s; }
.menu li a:active { color: var(--red); }

/* ---------- reveal motion ---------- */
.line-mask { display: block; overflow: clip; overflow-clip-margin: .12em; padding-bottom: .04em; margin-bottom: -.04em; }
.line { display: block; transform: translateY(108%); transition: transform 1s var(--ease-out); transition-delay: calc(var(--i, 0) * 85ms + var(--d, 0ms)); }
.is-in .line, .is-in.line { transform: none; }
[data-fade] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-soft), transform .9s var(--ease-out); transition-delay: var(--d, 0ms); }
[data-fade].is-in { opacity: 1; transform: none; }
.media { position: relative; overflow: hidden; background: #111; }
.media img, .media video { width: 100%; height: 100%; object-fit: cover; }
.media > img[data-par] { position: absolute; left: 0; top: -56px; height: calc(100% + 112px); }
[data-img] { clip-path: inset(0 0 100% 0); transition: clip-path 1.3s var(--ease-io); transition-delay: var(--d, 0ms); }
[data-img] > img { transform: scale(1.18); transition: transform 1.8s var(--ease-io), filter .8s ease; transition-delay: var(--d, 0ms); }
[data-img].is-in { clip-path: inset(0 0 0 0); }
[data-img].is-in > img { transform: scale(1.0001); }
html:not(.no-js):not(.split-ready) [data-split] { opacity: 0; }
[data-split] .line-mask { text-indent: 0; }
[data-split] .line-mask:first-child { text-indent: inherit; }
.no-js [data-fade], .no-js .line { opacity: 1; transform: none; }
.no-js [data-img] { clip-path: none; } .no-js [data-img] > img { transform: none; }

/* ---------- hero ---------- */
.hero { position: relative; height: calc(100svh - var(--nav-h) - 48px); min-height: 560px; max-height: 1000px; padding: 0 16px; }
.hero-frame { position: relative; height: 100%; overflow: hidden; transform-origin: 50% 0; will-change: transform; }
.hero-media { position: absolute; inset: -6% 0 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; animation: heroIn 2.4s var(--ease-io) both, drift 26s ease-in-out 2.4s infinite alternate; }
.hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; opacity: 0; transition: opacity 1.2s ease; }
.hero-video.on { opacity: 1; }
.hero-frame::after { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,.42); }
.hero-end { display: flex; align-items: center; gap: 16px; }
.vid-toggle { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.vid-toggle:hover { border-color: var(--red); background: var(--red); }
.vid-toggle .pl { display: none; }
.vid-toggle[aria-pressed="true"] .pl { display: block; }
.vid-toggle[aria-pressed="true"] .p1, .vid-toggle[aria-pressed="true"] .p2 { display: none; }
.hero-frame::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--grain); opacity: .5; mix-blend-mode: overlay; }
@keyframes heroIn { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes drift { from { transform: scale(1); } to { transform: scale(1.06) translateX(-1.2%); } }
.hero-content { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; padding-inline: calc(var(--m) - 16px); }
.hero-content .wrap { width: 100%; padding-inline: 0; margin: 0; }
.hero h1 { font-size: clamp(56px, 7.8vw, 128px); }
.hero .lead { margin-top: 28px; }
.hero .btn { margin-top: 44px; }
.hero-foot { position: absolute; z-index: 3; left: calc(var(--m) - 16px); right: calc(var(--m) - 16px); bottom: 24px; display: flex; justify-content: space-between; align-items: end; gap: 24px; }
.hero-foot .fine { color: #bdbdbd; }
.scroll-cue { width: 44px; height: 44px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; transition: border-color .3s, background .3s; }
.scroll-cue svg { animation: cue 2.2s var(--ease-soft) infinite; }
@keyframes cue { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }
.scroll-cue:hover { border-color: var(--red); background: var(--red); }

/* ---------- statement (It's not fitness) ---------- */
.statement { padding-block: clamp(110px, 14vw, 220px) clamp(90px, 10vw, 150px); }
.statement h2 { grid-column: 6 / span 7; font-size: var(--d-l); text-indent: 1.55em; }
.statement .cap { grid-column: 6 / span 4; margin-top: 56px; line-height: 1.25; font-size: 15px; color: #eaeaea; }

/* ---------- stat with image (118 clubs) ---------- */
.stat { padding-block: clamp(72px, 7vw, 104px) clamp(90px, 10vw, 150px); }
.stat .grid { align-items: stretch; }
.stat-text { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 32px; padding-top: 8px; }
.stat-text .stat-small-wrap { margin-top: auto; width: clamp(140px, 13vw, 200px); padding-top: 40px; }
.stat-text .btn { align-self: flex-start; margin-top: 8px; }
.stat-big { grid-column: 7 / span 6; margin-right: calc(var(--m) * -1); aspect-ratio: 4 / 3.3; align-self: start; }
.stat-small { aspect-ratio: 3 / 4; width: 100%; }
.stat .stat-big img { filter: saturate(.7); }

/* ---------- membership (one membership. limitless potential.) ---------- */
.member .head { align-items: end; }
.member h2 { grid-column: 1 / span 6; }
.member .side { grid-column: 7 / span 5; display: flex; flex-direction: column; gap: 28px; align-items: flex-start; }
.member .imgs { margin-top: clamp(48px, 5vw, 72px); align-items: start; }
.member .im-a { grid-column: 1 / span 4; aspect-ratio: 4 / 3.2; }
.member .im-b { grid-column: 5 / span 8; aspect-ratio: 16 / 11; }
.pillars { margin-top: clamp(56px, 6vw, 88px); row-gap: 40px; }
.pillar { grid-column: span 4; padding-top: 22px; border-top: 1px solid var(--line); }
.pillar h3 { font-family: var(--display); text-transform: uppercase; font-size: 30px; line-height: .95; margin: 0 0 14px; font-weight: 700; }
.pillar p { margin: 0; color: var(--grey); font-size: 16px; max-width: 36ch; }
.price-tag { display: flex; align-items: baseline; gap: 14px; }
.price-tag .d { font-size: clamp(64px, 6vw, 96px); line-height: .8; color: #fff; }
.price-tag span { color: var(--grey); font-size: 15px; line-height: 1.3; }

/* ---------- disciplines carousel (signature classes) ---------- */
.classes { padding-top: clamp(100px, 11vw, 170px); padding-bottom: clamp(80px, 8vw, 120px); overflow: hidden; }
.classes .center { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 30px; }
.classes h2 { font-size: var(--d-xl); }
.classes .body { text-align: center; max-width: 44ch; }
.rail { position: relative; margin-top: clamp(64px, 7vw, 104px); cursor: none; touch-action: pan-y; user-select: none; }
.track { display: flex; align-items: flex-start; gap: clamp(20px, 3.4vw, 48px); padding-inline: var(--m); will-change: transform; }
.slide { flex: none; display: block; }
.slide .media { width: 100%; }
.slide img { filter: saturate(.42) contrast(1.04) brightness(.92); transition: filter .7s ease, transform 1.2s var(--ease-soft); -webkit-user-drag: none; pointer-events: none; }
.slide figcaption { margin-top: 16px; display: flex; flex-direction: column; gap: 6px; }
.slide .cap { transition: color .3s; }
.slide .when { font-size: 13px; color: var(--grey-2); transition: color .3s; }
@media (hover: hover) and (pointer: fine) {
  .slide:hover img { filter: saturate(1.05) contrast(1.02) brightness(1); transform: scale(1.03); }
  .slide:hover .cap { color: var(--red); }
  .slide:hover .when { color: #ddd; }
}
.slide.s1 { width: clamp(220px, 22vw, 330px); margin-top: 40px; } .slide.s1 .media { aspect-ratio: 3/4.2; }
.slide.s2 { width: clamp(150px, 13vw, 200px); margin-top: 0; } .slide.s2 .media { aspect-ratio: 3/3.9; }
.slide.s3 { width: clamp(260px, 26vw, 400px); margin-top: 90px; } .slide.s3 .media { aspect-ratio: 4/4.9; }
.slide.s4 { width: clamp(200px, 19vw, 290px); margin-top: 20px; } .slide.s4 .media { aspect-ratio: 4/3.6; }
.slide.s5 { width: clamp(240px, 24vw, 360px); margin-top: 0; } .slide.s5 .media { aspect-ratio: 3/3.9; }
.cursor {
  position: fixed; left: 0; top: 0; z-index: 60; width: 92px; height: 92px; margin: -46px 0 0 -46px; border-radius: 50%;
  background: var(--red); color: #fff; display: grid; place-items: center; pointer-events: none; box-shadow: 0 0 0 1px rgba(255,255,255,.28);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transform: translate3d(-200px, -200px, 0) scale(.3); opacity: 0; transition: opacity .25s ease;
}
.cursor.on { opacity: 1; }
.cursor span { display: block; }
.rail-progress { margin: 48px var(--m) 0; height: 1px; background: var(--line); position: relative; }
.rail-progress i { position: absolute; left: 0; top: -1px; height: 3px; width: 18%; background: #fff; transform-origin: left; }

/* ---------- experiences 4-up ---------- */
.exp h2 { margin-bottom: clamp(48px, 5vw, 72px); }
.cards { row-gap: 56px; }
.card { grid-column: span 3; display: flex; flex-direction: column; }
.card .media { aspect-ratio: 4 / 5; }
.card .media img { transition: transform 1.2s var(--ease-soft), filter .7s ease; }
.card h3 { font-family: var(--text); font-weight: 500; text-transform: uppercase; font-size: 19px; letter-spacing: 0; margin: 28px 0 12px; }
.card p { margin: 0 0 28px; color: var(--grey); font-size: 17px; line-height: 1.35; }
.card .ulink { margin-top: auto; align-self: flex-start; }
@media (hover: hover) and (pointer: fine) {
  .card:hover .media img { transform: scale(1.04); }
  .card:hover .ulink::before { transform: scaleX(1); }
}

/* ---------- founder ---------- */
.founder { overflow: clip; }
.founder .grid { align-items: end; }
.founder-img { grid-column: 1 / span 6; margin-left: calc(var(--m) * -1); aspect-ratio: 16 / 12; }
.founder-text { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 28px; padding-bottom: 8px; }
.facts { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 24px; margin: 8px 0 8px; padding: 0; list-style: none; }
.facts li { display: flex; flex-direction: column; gap: 6px; }
.facts b { font-family: var(--display); font-size: clamp(40px, 3.6vw, 56px); line-height: .9; font-weight: 700; }
.facts span { color: var(--grey); font-size: 15px; line-height: 1.3; }
.facts.facts-3 { grid-template-columns: repeat(3, auto); justify-content: start; column-gap: clamp(28px, 4vw, 56px); }

/* ---------- coaches list (hover image) ---------- */
.coaches .grid { align-items: start; }
.coaches-head { grid-column: 1 / span 4; display: flex; flex-direction: column; gap: 24px; }
.coach-list { grid-column: 6 / span 7; list-style: none; margin: 0; padding: 0; }
.coach-list li { border-top: 1px solid var(--line); }
.coach-list li:last-child { border-bottom: 1px solid var(--line); }
.coach-list a { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 16px; padding: 18px 0 16px; }
.coach-list .nm { font-family: var(--display); text-transform: uppercase; font-size: clamp(34px, 3.4vw, 54px); line-height: .9; transition: transform .6s var(--ease-out), color .3s; }
.coach-list .rl { color: var(--grey); font-size: 15px; text-align: right; transition: color .3s; }
@media (hover: hover) and (pointer: fine) {
  .coach-list a:hover .nm { transform: translateX(14px); color: var(--red); }
  .coach-list a:hover .rl { color: #fff; }
}
.peek { position: fixed; left: 0; top: 0; z-index: 40; width: 230px; aspect-ratio: 4/5; pointer-events: none; overflow: hidden; opacity: 0; transform: translate3d(-400px,-400px,0); transition: opacity .3s ease; }
.peek.on { opacity: 1; }
.peek img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: 0; transition: opacity .35s ease; }
.peek img.on { opacity: 1; }

/* ---------- this week (schedule) ---------- */
.week .head { align-items: end; margin-bottom: clamp(40px, 4vw, 64px); }
.week h2 { grid-column: 1 / span 7; }
.week .side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.days { display: flex; gap: 0; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.days::-webkit-scrollbar { display: none; }
.day { position: relative; flex: 1 0 auto; min-width: 92px; padding: 16px 4px 18px; text-align: left; color: #8a8a8a; font-size: 15px; transition: color .25s; }
.day b { display: block; font-family: var(--display); font-size: 30px; line-height: 1; color: inherit; margin-bottom: 4px; text-transform: uppercase; font-weight: 700; }
.day::after { content: ""; position: absolute; left: 0; right: 12px; bottom: -1px; height: 3px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease-out); }
.day[aria-selected="true"] { color: #fff; }
.day[aria-selected="true"]::after { transform: scaleX(1); }
.day:hover { color: #fff; }
.day .today { color: var(--red); font-size: 13px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.slots { list-style: none; margin: 0; padding: 0; min-height: 300px; }
.slot { display: grid; grid-template-columns: 120px 1fr auto; align-items: center; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--line); animation: slotIn .6s var(--ease-out) both; animation-delay: calc(var(--i) * 45ms); }
@keyframes slotIn { from { opacity: 0; transform: translateY(10px); } }
.slot .t { font-family: var(--display); font-size: 34px; line-height: 1; }
.slot .n { font-size: 20px; font-weight: 500; }
.slot .n small { display: block; color: var(--grey-2); font-size: 14px; font-weight: 400; margin-top: 2px; }
.slot .act { display: flex; align-items: center; gap: 18px; }
.slot .ok { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: #ddd; }
.slot.past { opacity: .38; }
.slot.now .t { color: var(--red); }
.slot .members { color: var(--grey-2); font-size: 13px; }
.closed { padding: 40px 0; color: var(--grey); font-size: 18px; }
.where { margin-top: clamp(56px, 6vw, 88px); row-gap: 32px; }
.where > div { grid-column: span 3; display: flex; flex-direction: column; gap: 8px; }
.where .cap { color: var(--grey-2); }
.where p { margin: 0; font-size: 17px; }

/* ---------- lead (2 steps, and you're in) ---------- */
.lead-split { display: grid; grid-template-columns: 1fr 1fr; min-height: 820px; }
.lead-img { position: relative; overflow: hidden; }
.lead-img img { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; }
.lead-img::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.65), rgba(0,0,0,.05) 60%); }
.lead-img .copy { position: absolute; z-index: 2; left: var(--m); right: var(--m); bottom: clamp(48px, 6vw, 96px); }
.lead-img h2 { font-size: var(--d-m); }
.lead-img .lead { margin-top: 20px; }
.steps-mini { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 10px; max-width: 48ch; }
.steps-mini li { display: grid; grid-template-columns: 28px 1fr; color: #ddd; font-size: 15px; line-height: 1.4; }
.steps-mini b { font-weight: 600; color: #fff; }
.form { background: var(--paper); color: #000; display: flex; flex-direction: column; }
.form-steps { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid #d9d9d6; }
.form-steps button { text-align: left; padding: 26px clamp(24px, 4.4vw, 64px) 22px; color: #9a9a9a; display: flex; flex-direction: column; gap: 4px; font-size: 17px; position: relative; }
.form-steps button + button { border-left: 1px solid #d9d9d6; }
.form-steps button small { font-size: 11px; letter-spacing: .06em; }
.form-steps button[aria-current="step"] { color: #000; }
.form-steps button[aria-current="step"]::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--red); }
.form-body { padding: clamp(36px, 5vw, 72px) clamp(24px, 4.4vw, 64px); flex: 1; display: flex; flex-direction: column; }
.form h3 { font-size: 26px; font-weight: 600; margin: 0 0 8px; letter-spacing: -.01em; }
.form .sub { color: #666; margin: 0 0 28px; font-size: 16px; }
.pane { display: none; flex-direction: column; flex: 1; }
.pane.on { display: flex; animation: paneIn .6s var(--ease-out); }
@keyframes paneIn { from { opacity: 0; transform: translateX(16px); } }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 26px; }
.chip { height: 44px; padding: 0 18px; border: 1px solid #c9c9c6; font-size: 15px; transition: border-color .2s, background .2s, color .2s; }
.chip:hover { border-color: #000; }
.chip[aria-pressed="true"] { background: #000; color: #fff; border-color: #000; }
.picks { list-style: none; margin: 0 0 28px; padding: 0; display: grid; gap: 8px; max-height: 330px; overflow-y: auto; }
.pick { width: 100%; display: grid; grid-template-columns: 1fr auto; align-items: center; text-align: left; padding: 16px 18px; border: 1px solid #d3d3d0; background: #fff; transition: border-color .2s; gap: 12px; }
.pick:hover { border-color: #000; }
.pick strong { display: block; font-weight: 600; font-size: 16px; }
.pick span { color: #6b6b6b; font-size: 14px; }
.pick i { width: 20px; height: 20px; border: 1px solid #bbb; border-radius: 50%; position: relative; }
.pick[aria-pressed="true"] { border-color: #000; box-shadow: inset 0 0 0 1px #000; }
.pick[aria-pressed="true"] i { border-color: var(--red); background: var(--red); }
.pick[aria-pressed="true"] i::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #fff; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.fields .full { grid-column: 1 / -1; }
.field { position: relative; }
.field input { width: 100%; height: 64px; border: 1px solid #c9c9c6; background: #fff; padding: 22px 16px 6px; font: inherit; font-size: 17px; color: #000; border-radius: 0; transition: border-color .2s; }
.field input:focus { outline: none; border-color: #000; }
.field label { position: absolute; left: 17px; top: 21px; color: #777; font-size: 17px; pointer-events: none; transform-origin: left top; transition: transform .25s var(--ease-soft), color .25s; }
.field input:focus + label, .field input:not(:placeholder-shown) + label { transform: translateY(-12px) scale(.72); }
.field input:focus + label { color: var(--red-deep); }
.form .legal { color: #6b6b6b; font-size: 13px; line-height: 1.5; margin: 6px 0 22px; }
.form .btn { width: 100%; }
.form .btn[disabled] { background: #e2e2df; color: #8a8a8a; pointer-events: none; }
.form .chosen { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid #d3d3d0; margin-bottom: 22px; font-size: 15px; }
.form .chosen button { text-decoration: underline; text-underline-offset: 3px; color: #555; font-size: 14px; }
.done { text-align: left; }
.done .tick { width: 64px; height: 64px; border-radius: 50%; background: var(--red); display: grid; place-items: center; margin-bottom: 28px; }
.done .tick path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tick .6s .25s var(--ease-out) forwards; }
@keyframes tick { to { stroke-dashoffset: 0; } }
.done h3 { font-family: var(--display); text-transform: uppercase; font-size: 56px; line-height: .9; font-weight: 700; }
.wa { display: inline-flex; align-items: center; gap: 10px; margin-top: auto; font-size: 15px; color: #444; padding-top: 24px; }
.wa:hover { color: #000; }

/* ---------- footer ---------- */
.foot { padding-top: 28px; }
.foot-top { display: flex; flex-wrap: wrap; gap: 20px 56px; align-items: center; color: var(--grey); font-size: 13px; text-transform: uppercase; letter-spacing: .04em; line-height: 1.35; }
.foot-top .pill { display: inline-flex; align-items: center; gap: 10px; }
.foot-top .pill b { border: 1px solid #555; border-radius: 99px; padding: 2px 9px; font-weight: 500; color: #ddd; }
.foot-main { margin-top: clamp(64px, 7vw, 104px); row-gap: 48px; }
.foot-main .tag { grid-column: 1 / span 5; font-family: var(--display); text-transform: uppercase; font-size: 36px; line-height: .95; }
.foot-col { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; font-size: 14px; text-transform: uppercase; letter-spacing: .03em; }
.foot-col:first-of-type { grid-column: 7 / span 2; }
.foot-col h4 { margin: 0 0 6px; font-size: 14px; font-weight: 600; letter-spacing: .03em; }
.foot-col a, .foot-col span { color: #cfcfcf; transition: color .25s; }
.foot-col a:hover { color: var(--red); }
.partners { margin-top: clamp(64px, 7vw, 96px); display: flex; flex-wrap: wrap; align-items: center; gap: 24px 56px; padding-block: 28px; border-top: 1px solid var(--line); }
.partners .cap { color: var(--grey-2); margin-right: 8px; }
.partners a { position: relative; display: block; }
.partners img { height: 30px; width: auto; opacity: .6; transition: opacity .4s ease; }
.partners img.c { position: absolute; inset: 0; opacity: 0; }
.partners a:hover img { opacity: 0; } .partners a:hover img.c { opacity: 1; }
.giant { margin-top: 20px; overflow: hidden; }
.giant { padding-inline: var(--m); }
.giant .d { font-size: 30vw; line-height: .8; letter-spacing: -.012em; display: flex; justify-content: space-between; white-space: nowrap; padding-bottom: .02em; }
.giant .d span { display: inline-block; transition: color .35s; }
.giant .d span:hover { color: var(--red); }
.legalrow { display: flex; flex-wrap: wrap; gap: 10px 28px; padding-block: 22px 28px; border-top: 1px solid var(--line); color: var(--grey-2); font-size: 13px; position: relative; z-index: 1; background: #000; }
.legalrow a:hover { color: #fff; }

/* ---------- discipline page ---------- */
.p-hero { padding-top: clamp(56px, 6vw, 88px); }
.p-hero .top { align-items: end; }
.p-hero h1 { grid-column: 1 / span 8; font-size: var(--d-xl); }
.p-hero .side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 26px; align-items: flex-start; padding-bottom: 10px; }
.p-hero .big { margin-top: clamp(48px, 5vw, 72px); height: clamp(420px, 66vh, 760px); margin-inline: 16px; }
.p-hero .big img { object-position: 50% 30%; height: 118%; }
.crumbs { display: flex; gap: 10px; color: var(--grey-2); font-size: 13px; margin-bottom: 28px; }
.crumbs a:hover { color: var(--red); }
.honest .grid { align-items: start; }
.honest .cap { grid-column: 1 / span 3; color: var(--grey-2); padding-top: 14px; }
.honest .q { grid-column: 4 / span 9; font-family: var(--display); text-transform: uppercase; font-size: var(--d-m); line-height: .92; margin: 0; }
.honest .body { grid-column: 4 / span 5; margin-top: 44px; color: #d6d6d6; font-size: 20px; max-width: 52ch; }
.why-grid { margin-top: clamp(56px, 6vw, 88px); row-gap: 56px; }
.why { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; }
.why .media { aspect-ratio: 4/5; }
.why:nth-child(2) { margin-top: clamp(40px, 6vw, 96px); }
.why h3 { font-family: var(--display); text-transform: uppercase; font-size: 32px; line-height: .95; margin: 10px 0 0; font-weight: 700; }
.why p { margin: 0; color: var(--grey); font-size: 17px; max-width: 40ch; }
.team3 { margin-top: clamp(48px, 5vw, 72px); row-gap: 56px; }
.coach { grid-column: span 4; display: flex; flex-direction: column; gap: 16px; }
.coach .media { aspect-ratio: 4/5; }
.crop-top { scale: 1.2; transform-origin: 50% 100%; }
.coach .media img { object-position: 50% 100%; filter: grayscale(.6) contrast(1.05); transition: filter .7s ease, transform 1.2s var(--ease-soft); }
@media (hover: hover) and (pointer: fine) { .coach:hover .media img { filter: none; transform: scale(1.03); } .coach:hover h3 { color: var(--red); } }
.coach h3 { font-family: var(--display); text-transform: uppercase; font-size: 40px; line-height: .9; margin: 12px 0 0; font-weight: 700; transition: color .3s; }
.coach .role { color: var(--grey-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.coach p { margin: 0; color: var(--grey); font-size: 16px; max-width: 40ch; }
.compet .grid { align-items: center; }
.compet .media { grid-column: 1 / span 6; aspect-ratio: 4/5; }
.compet .txt { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 28px; }
.checks { list-style: none; margin: 0; padding: 0; }
.checks li { padding: 16px 0; border-top: 1px solid var(--line); color: #ddd; font-size: 17px; display: grid; grid-template-columns: 26px 1fr; }
.checks li::before { content: ""; width: 7px; height: 7px; background: var(--red); margin-top: 9px; }
.sched-d { margin-top: 40px; }
.sched-d .row { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--line); }
.sched-d .row:last-child { border-bottom: 1px solid var(--line); }
.sched-d .dname { font-family: var(--display); text-transform: uppercase; font-size: 40px; line-height: 1; }
.sched-d .times { display: flex; gap: 10px; flex-wrap: wrap; }
.sched-d .times span { border: 1px solid #3a3a3a; padding: 8px 14px; font-size: 16px; }
.sched-d .row.is-today .dname { color: var(--red); }
.plans .head { align-items: end; }
.plans h2 { grid-column: 1 / span 6; }
.plans .side { grid-column: 8 / span 5; }
.seg { display: inline-flex; border: 1px solid #333; padding: 4px; gap: 4px; flex-wrap: wrap; }
.seg button { height: 44px; padding: 0 18px; font-size: 14px; color: #aaa; position: relative; z-index: 1; transition: color .3s; }
.seg button[aria-pressed="true"] { color: #000; background: #fff; }
.seg button:not([aria-pressed="true"]):hover { color: #fff; }
.plan-box { margin-top: 40px; display: grid; grid-template-columns: 1.2fr 1fr; border: 1px solid #2c2c2c; }
.plan-main { padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 22px; border-right: 1px solid #2c2c2c; }
.plan-price { display: flex; align-items: flex-end; gap: 16px; }
.plan-price .d { font-size: clamp(96px, 11vw, 176px); line-height: .76; }
.plan-price .unit { color: var(--grey); font-size: 16px; line-height: 1.3; padding-bottom: 6px; }
.plan-save { min-height: 24px; color: var(--red); font-weight: 600; font-size: 15px; letter-spacing: .02em; }
.plan-incl { padding: clamp(28px, 4vw, 56px); }
.plan-incl ul { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 12px; color: #ddd; font-size: 16px; }
.plan-incl li { display: grid; grid-template-columns: 22px 1fr; }
.plan-incl li::before { content: ""; width: 10px; height: 1px; background: #888; margin-top: 12px; }
.faq .grid { align-items: start; }
.faq h2 { grid-column: 1 / span 5; }
.qa { grid-column: 6 / span 7; }
.qa details { border-top: 1px solid var(--line); }
.qa details:last-child { border-bottom: 1px solid var(--line); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: 24px; padding: 26px 0; font-size: 21px; font-weight: 500; transition: color .25s; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: #fff; }
.qa summary .pm { width: 18px; height: 18px; position: relative; flex: none; margin-top: 6px; }
.qa summary .pm::before, .qa summary .pm::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out), background .25s; }
.qa summary .pm::after { transform: rotate(90deg); }
.qa details[open] summary .pm::after { transform: rotate(0); }
.qa details[open] summary .pm::before, .qa details[open] summary .pm::after { background: var(--red); }
.qa .ans { color: var(--grey); padding: 0 0 28px; max-width: 58ch; font-size: 17px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .nav-links { gap: 18px; } .nav-links a { font-size: 15px; }
  .card { grid-column: span 6; }
}
@media (max-width: 980px) {
  :root { --nav-h: 64px; }
  .nav-links, .nav-cta .ulink { display: none; }
  .nav-burger { display: block; }
  .nav .wrap { gap: 16px; justify-content: space-between; }
  .nav-cta { gap: 8px; }
  .nav-cta .btn { --h: 44px; padding: 0 16px; font-size: 12px; }
  .brand img { height: 24px; }
  .statement h2 { grid-column: 1 / -1; text-indent: 1.2em; }
  .statement .cap { grid-column: 1 / -1; }
  .coaches-head, .stat-text, .member h2, .member .side, .week h2, .week .side, .founder-text, .coaches h2, .coach-list, .faq h2, .qa, .plans h2, .plans .side, .compet .txt, .p-hero h1, .p-hero .side, .honest .q, .honest .body, .honest .cap { grid-column: 1 / -1; }
  .stat-big { grid-column: 1 / -1; grid-row: 2; margin: 48px calc(var(--m) * -1) 0; }
  .stat-small-wrap { display: none; }
  .member .side, .week .side, .plans .side, .p-hero .side { margin-top: 28px; }
  .member .im-a { grid-column: 1 / span 5; } .member .im-b { grid-column: 6 / span 7; }
  .pillar { grid-column: 1 / -1; }
  .founder-img { grid-column: 1 / -1; margin: 0 calc(var(--m) * -1) 40px; }
  .coach-list { margin-top: 36px; }
  .lead-split { grid-template-columns: 1fr; }
  .lead-img { min-height: 640px; }
  .foot-main .tag { grid-column: 1 / -1; }
  .foot-col, .foot-col:first-of-type { grid-column: span 4; }
  .where > div { grid-column: span 6; }
  .why, .coach { grid-column: 1 / -1; } .why:nth-child(2) { margin-top: 0; }
  .compet .media { grid-column: 1 / -1; margin-bottom: 36px; }
  .plan-box { grid-template-columns: 1fr; } .plan-main { border-right: 0; border-bottom: 1px solid #2c2c2c; }
  .qa { margin-top: 32px; }
  .honest .q { margin-top: 18px; }
  .rail { cursor: grab; }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .hero { padding: 0 8px; height: calc(100svh - var(--nav-h) - 64px); }
  .hero-content, .hero-foot { padding-inline: calc(var(--m) - 8px); left: 0; right: 0; }
  .hero h1 { font-size: clamp(56px, 16.5vw, 84px); }
  .hero-media img, .hero-video { object-position: 74% 50%; }
  .hero-foot > .fine:first-child { display: none; }
  .hero-end .fine { display: none; }
  .bar { font-size: 13px; }
  .card { grid-column: 1 / -1; }
  .slot { grid-template-columns: 76px 1fr; row-gap: 10px; }
  .days { overflow: visible; }
  .day { min-width: 0; flex: 1 1 0; padding: 14px 0 14px; font-size: 0; }
  .day b { font-size: 22px; margin-bottom: 0; }
  .day .today { font-size: 0; }
  .day .today::before { content: ""; display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-top: 6px; }
  .day::after { right: 6px; }
  .slot .t { font-size: 28px; }
  .slot .act { grid-column: 2; }
  .fields { grid-template-columns: 1fr; }
  .form-steps button { padding: 20px 20px 16px; }
  .foot-col, .foot-col:first-of-type { grid-column: span 6; }
  .where > div { grid-column: 1 / -1; }
  .sched-d .row { grid-template-columns: 1fr; gap: 12px; }
  .sched-d .row .btn { justify-self: start; }
  .slide.s1, .slide.s3, .slide.s5 { width: 64vw; } .slide.s2, .slide.s4 { width: 46vw; }
  .member .im-a { display: none; } .member .im-b { grid-column: 1 / -1; margin-inline: calc(var(--m) * -1); }
  .p-hero .big { margin-inline: 8px; height: 62vh; }
  .facts { grid-template-columns: 1fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .line, [data-fade], [data-img], [data-img] > img { transform: none !important; clip-path: none !important; transition: opacity .3s ease !important; }
  [data-fade] { opacity: 1; }
}

/* ---------- review variants (Lavish "À choisir") ---------- */
.v-logo-color .brand img:not(.c) { opacity: 0; }
.v-logo-color .brand img.c { opacity: 1; }
.v-cta-red .btn-solid { background: var(--red); color: #fff; }
.v-cta-red .btn-solid::before { background: #fff; }
@media (hover: hover) and (pointer: fine) { .v-cta-red .btn-solid:hover { color: #000; } }
.v-sat-full .slide img { filter: none; }

/* ---------- version bar (review only, ?bar=1) ---------- */
.vbar { position: fixed; left: 50%; bottom: 16px; z-index: 90; translate: -50% 0; display: flex; align-items: flex-end; gap: 14px; padding: 12px 14px; background: #111; border: 1px solid #333; font-size: 12px; color: #aaa; max-width: calc(100vw - 24px); flex-wrap: wrap; }
.vbar label { display: flex; flex-direction: column; gap: 4px; }
.vbar select { height: 36px; background: #000; color: #fff; border: 1px solid #444; padding: 0 8px; font: 500 14px var(--text); border-radius: 0; }
.vbar select:focus { outline: 2px solid var(--red); }
.vbar-full { height: 36px; padding: 0 14px; background: #fff; color: #000; font: 600 13px var(--text); letter-spacing: .04em; text-transform: uppercase; transition: background .25s, color .25s; }
.vbar-full:hover { background: var(--red); color: #fff; }

/* ---- assets/p-pages.css ---- */
/* APEX12 site prototype — additions for the discipline template (tools/disciplines.py). PROTOTYPE. */

/* schedule rows with a line of description (Women boxing levels) */
.sched-d .times .note { font-style: normal; color: var(--grey); font-size: 15px; flex-basis: 100%; max-width: 56ch; margin-top: 4px; }
.sched-more { margin-top: 22px; display: flex; gap: 14px; flex-wrap: wrap; align-items: baseline; }

/* two coaches: two wide columns instead of three */
.team2 .coach { grid-column: span 6; }
.team2 .coach .media { aspect-ratio: 5/5; }

/* one coach carries the page */
.portrait .media { aspect-ratio: 4/5; }
.portrait .media img { object-position: 50% 30%; }
.portrait .txt { gap: 22px; }
.portrait .role { color: var(--grey-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.portrait .pull { font-size: clamp(21px, 1.8vw, 26px); line-height: 1.3; color: #fff; margin: 6px 0; max-width: 34ch; font-weight: 500; }
.portrait .pull::before { content: "« "; color: var(--red); }
.portrait .pull::after { content: " »"; color: var(--red); }

/* member quote, full width on grain */
.quote blockquote { margin: 0 auto; max-width: 1100px; text-align: center; }
.quote blockquote p { font-size: clamp(26px, 3.1vw, 46px); line-height: 1.16; font-weight: 500; letter-spacing: -.012em; margin: 0 auto; max-width: 26ch; color: #fff; text-wrap: balance; }
.quote blockquote p::before { content: "« "; }
.quote blockquote p::after { content: " »"; }
.quote blockquote footer { margin-top: 32px; color: var(--grey); font-size: 15px; }
.quote blockquote footer::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--red); margin-right: 12px; vertical-align: 2px; }

@media (max-width: 900px) {
  .team2 .coach { grid-column: 1 / -1; }
  .sched-d .times .note { font-size: 14px; }
  .quote blockquote { max-width: none; text-align: left; }
}

/* ---- assets/p-club.css ---- */
/* APEX12 site prototype — club pages: Planning (horaire), Tarifs, Équipe (pages/*.html). PROTOTYPE.
   Same system as site.css: black, white ink, thin rules, red only for dots, today, hover. */

/* ---------- shared ---------- */
.p-hero .d-l { font-size: var(--d-l); }
.club-role { color: var(--grey-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.coach-links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0; }
.coach-links .ulink { font-size: 13px; }

/* ========== PLANNING ========== */
.plan-hero { padding-bottom: clamp(72px, 8vw, 120px); }
.plan-hero .side { gap: 20px; }
.plan-live { display: flex; gap: 10px; align-items: center; color: #cfcfcf; }
.plan-tel { text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 17px; }

/* key: the old colour code, now typographic */
.plan-key { margin-top: clamp(56px, 6vw, 88px); display: flex; flex-wrap: wrap; gap: 10px 36px; font-size: 14px; color: #ddd; padding-bottom: 18px; }
.plan-key > span { display: inline-flex; align-items: center; gap: 10px; }
.plan-key .k-mem { color: var(--grey-2); }
.plan-key .k-inc { color: var(--grey-2); margin-left: auto; }

/* the week at a glance: hour rows x 7 day columns */
.board {
  display: grid; grid-template-columns: 64px repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, auto);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  position: relative;
}
.bd-corner { grid-column: 1; grid-row: 1; }
.bd-bg { grid-row: 1 / -1; background: transparent; transition: background .4s ease; pointer-events: none; }
.bd-bg.is-today { background: rgba(255,255,255,.045); }
.bd-day { grid-row: 1; padding: 22px 14px 18px 30px; display: flex; flex-direction: column; gap: 6px; }
.bd-day b { font-family: var(--display); text-transform: uppercase; font-weight: 700; font-size: clamp(22px, 2vw, 30px); line-height: 1; }
.bd-day small { font-size: 13px; color: var(--grey-2); }
.bd-day .tdy { display: none; color: var(--red); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.bd-day.is-today b { color: var(--red); }
.bd-day.is-today .tdy { display: block; }
.bd-day.is-today .cnt { display: none; }
.bd-h { grid-column: 1; padding: 20px 0 0; font-family: var(--display); font-size: 22px; line-height: 1; color: var(--grey-2); border-top: 1px solid var(--line); }
.bd-cell { border-top: 1px solid var(--line); padding: 16px 14px 20px; display: flex; flex-direction: column; gap: 14px; min-height: 104px; }
.bd-at { font-family: var(--display); font-size: 22px; line-height: 1; color: var(--grey-2); margin-top: 4px; padding-left: 16px; }
.bd-c { position: relative; display: grid; grid-template-columns: 1fr; gap: 3px; padding-left: 16px; }
.bd-c .bn { font-size: 16px; font-weight: 500; line-height: 1.2; color: #fff; transition: color .25s; }
.bd-c small { font-size: 13px; color: var(--grey-2); line-height: 1.3; }
.bd-c.trial .dot { position: absolute; left: 0; top: 6px; }
.bd-c.trial em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--red); opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .4s var(--ease-out); height: 0; }
.bd-c.members .bn { color: var(--grey); font-weight: 400; }
.bd-c.members small { color: #6f6f6f; }
@media (hover: hover) and (pointer: fine) {
  .bd-c.trial:hover .bn { color: var(--red); }
  .bd-c.trial:hover em { opacity: 1; transform: none; }
}
.bd-c.trial:focus-visible .bn { color: var(--red); }
.bd-closed { padding-left: 30px; justify-content: flex-start; color: var(--grey-2); font-size: 14px; line-height: 1.35; }
.bd-closed span { max-width: 14ch; }

.plan-notes .pillars { margin-top: 0; }
.plan-notes .pillar .ulink { margin-top: 18px; }

/* ========== TARIFS ========== */
.price-hero { padding-bottom: clamp(72px, 8vw, 120px); }
.formulas { margin-top: clamp(64px, 7vw, 104px); row-gap: 56px; }
.fm { grid-column: span 3; display: flex; flex-direction: column; border-top: 1px solid #3a3a3a; padding-top: 22px; }
.fm header { display: flex; flex-direction: column; gap: 6px; min-height: 52px; }
.fm header .cap { display: inline-flex; align-items: center; gap: 10px; color: #fff; }
.fm header .cap::after { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .35s var(--ease-out); }
.fm-who { font-size: 14px; color: var(--grey-2); }
.fm-price { display: flex; align-items: flex-end; gap: 14px; margin-top: clamp(28px, 3vw, 44px); }
.fm-price .d { font-size: clamp(88px, 8.4vw, 136px); line-height: .76; letter-spacing: -.02em; }
.fm-price .unit { color: var(--grey); font-size: 14px; line-height: 1.3; padding-bottom: 2px; }
.fm-dur { margin: clamp(32px, 3vw, 44px) 0 0; }
.fm-dur div { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; padding: 14px 0; border-top: 1px solid var(--line); align-items: baseline; }
.fm-dur div:last-child { border-bottom: 1px solid var(--line); }
.fm-dur dt { font-size: 15px; color: var(--grey); }
.fm-dur dd { margin: 0; font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.fm-dur dd.sv { grid-column: 1 / -1; text-align: left; font-size: 13px; font-weight: 400; color: var(--grey-2); margin-top: 2px; }
.fm-incl { margin: 22px 0 0; font-size: 15px; color: var(--grey); line-height: 1.45; max-width: 32ch; }
.fm-incl .ulink { font-size: 12px; margin-left: 6px; color: #fff; }
@media (hover: hover) and (pointer: fine) { .fm:hover header .cap::after { transform: scale(1); } }
.fm-foot { margin-top: clamp(48px, 5vw, 72px); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.fm-foot .fine { margin: 0; max-width: 64ch; font-size: 14px; }

.carte .grid { align-items: start; }
.carte-txt { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 28px; }
.carte-txt .cap { color: var(--grey-2); }
.carte-nums { grid-column: 7 / span 6; display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--gap); padding-top: 8px; }
.cn { display: flex; align-items: flex-end; gap: 14px; border-top: 1px solid #3a3a3a; padding-top: 28px; }
.cn .d { font-size: clamp(88px, 8.4vw, 136px); line-height: .76; letter-spacing: -.02em; }
.cn .unit { color: var(--grey); font-size: 14px; line-height: 1.3; padding-bottom: 2px; }
.carte-nums .fine { grid-column: 1 / -1; margin: 28px 0 0; font-size: 14px; }
.carte-priv { grid-column: 1 / -1; margin: 40px 0 0; padding-top: 22px; border-top: 1px solid var(--line); color: var(--grey); font-size: 16px; }
.carte-priv .ulink { margin-left: 8px; color: #fff; font-size: 13px; }

.incl .txt .cap { color: var(--grey-2); }
.incl .txt { gap: 24px; }

.st-price { padding-block: clamp(100px, 12vw, 190px) clamp(90px, 10vw, 150px); }
.st-price h2 { grid-column: 3 / span 10; font-size: var(--d-m); text-indent: 1.2em; text-wrap: balance; }
.st-price .cap { grid-column: 6 / span 5; }

/* ========== ÉQUIPE ========== */
.team-hero h1 { font-size: var(--d-l); max-width: 9em; text-wrap: balance; }
.team-intro { margin-top: clamp(36px, 4vw, 56px); align-items: start; row-gap: 28px; }
.team-intro .lead { grid-column: 1 / span 5; }
.team-index { grid-column: 7 / span 6; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 0; }
.team-index li + li::before { content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #444; margin: 0 10px; vertical-align: middle; }
.team-index a { font-size: 16px; color: #ddd; transition: color .25s; }
.team-index a:hover { color: var(--red); }
.team-duo { margin-top: clamp(48px, 5vw, 72px); padding-inline: 16px; column-gap: 16px; }
.team-duo .media { grid-column: span 6; aspect-ratio: 3 / 2; }
.team-duo .media img { filter: saturate(.85); }

.founder .founder-text .club-role { margin-bottom: -8px; }
.founder .coach-links { margin-top: 4px; }

.crew-head { align-items: end; row-gap: 28px; }
.crew-head h2 { grid-column: 1 / span 7; }
.crew-head .body { grid-column: 9 / span 4; }
.crew-grid { margin-top: clamp(56px, 6vw, 88px); row-gap: clamp(56px, 6vw, 88px); }
.crew .coach { grid-column: span 3; }
.crew .coach h3 { font-size: clamp(32px, 2.6vw, 40px); }
.crew .coach p { font-size: 15px; }
.crew .coach .coach-links { margin-top: 2px; }
.crew-k { grid-column: span 3; border-top: 1px solid #3a3a3a; padding-top: 22px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.crew-k h3 { font-size: clamp(30px, 2.6vw, 40px); line-height: .92; }
.crew-k p { margin: 0; color: var(--grey); font-size: 15px; max-width: 26ch; }
.crew-k .ulink { font-size: 13px; }

.st-team { padding-block: clamp(100px, 12vw, 190px) clamp(90px, 10vw, 150px); }
.st-team h2 { font-size: var(--d-m); text-indent: 1.2em; }
.st-team .st-links { grid-column: 6 / span 5; display: flex; flex-wrap: wrap; gap: 14px 28px; margin: 32px 0 0; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .fm { grid-column: span 6; }
  .crew .coach, .crew-k { grid-column: span 4; }
  .board { grid-template-columns: 52px repeat(7, minmax(0, 1fr)); }
  .bd-cell, .bd-day { padding-inline: 10px; }
  .bd-c .bn { font-size: 15px; }
}
@media (max-width: 980px) {
  /* the board needs room: on small screens the day tabs below carry the week */
  .board, .plan-key { display: none; }
  .plan-hero { padding-bottom: 0; }
  .plan-hero + .week { margin-top: 56px; }
  .carte-txt, .carte-nums, .st-price h2, .st-price .cap, .team-intro .lead, .team-index, .crew-head h2, .crew-head .body, .st-team .st-links { grid-column: 1 / -1; }
  .carte-nums { margin-top: 40px; }
  .st-price h2 { max-width: none; }
  .crew .coach, .crew-k { grid-column: span 6; }
}
@media (max-width: 640px) {
  .fm { grid-column: 1 / -1; }
  .fm header { min-height: 0; }
  .fm-price .d, .cn .d { font-size: 96px; }
  .fm-foot .btn { width: 100%; }
  .cn { flex-direction: column; align-items: flex-start; gap: 12px; }
  .team-index { gap: 6px 16px; }
  .team-index li + li::before { display: none; }
  .team-duo { padding-inline: 8px; column-gap: 8px; }
  .team-duo .media { grid-column: 1 / -1; }
  .team-duo .media + .media { margin-top: 8px; }
  /* coach cards: portrait beside the text, so eight people don't take eight screens */
  .crew-grid { row-gap: 36px; }
  .crew-k { grid-column: 1 / -1; margin-top: 20px; }
  .crew .coach { grid-column: 1 / -1; display: grid; grid-template-columns: 38% 1fr; column-gap: 18px; row-gap: 6px; align-items: start; }
  .crew .coach .media { grid-row: 1 / span 4; aspect-ratio: 4 / 5; }
  .crew .coach .role { margin-top: 2px; }
  .crew .coach h3 { margin: 0; font-size: 32px; }
  .crew .coach p { font-size: 14px; }
  .crew .coach .coach-links { gap: 8px 16px; }
  .st-team h2, .st-price h2 { text-indent: 0; }
}

/* ---- assets/p-offre.css ---- */
/* APEX12 site prototype — Cours privés, Essai offert, Confidentialité (pages/cours-prives.html, essai.html, confidentialite.html). PROTOTYPE.
   Every rule is scoped to an o-* class so the other pages stay untouched. */

.o-cap { display: block; color: var(--grey-2); margin-bottom: 22px; }

/* ---------- hero: headline across, offer + pitch underneath ---------- */
.o-hero { padding-bottom: clamp(64px, 7vw, 104px); }
.o-hero h1 { font-size: clamp(52px, 8.4vw, 136px); }
.o-hero-row { margin-top: clamp(40px, 4vw, 64px); align-items: end; row-gap: 36px; }
.o-offer { grid-column: 1 / span 5; display: flex; align-items: baseline; gap: 18px; }
.o-offer .d { font-size: clamp(72px, 7vw, 112px); line-height: .8; }
.o-offer span:last-child { color: var(--grey); font-size: 15px; line-height: 1.35; }
.o-hero-side { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.o-ctas { display: flex; align-items: center; gap: 18px 32px; flex-wrap: wrap; margin-top: 6px; }
.o-facts { list-style: none; margin: clamp(48px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px var(--gap); }
.o-facts li { border-top: 1px solid var(--line); padding-top: 20px; display: flex; flex-direction: column; gap: 8px; }
.o-facts b { font-family: var(--display); font-size: clamp(40px, 3.6vw, 56px); line-height: .9; font-weight: 700; }
.o-facts span { color: var(--grey); font-size: 15px; }

/* essai hero keeps the discipline layout (headline left, pitch right) */
.o-hero-essai h1 { font-size: clamp(52px, 7.4vw, 124px); }
.o-hero-essai { padding-bottom: 0; }

/* ---------- full-bleed band: one sentence over a photo ---------- */
.o-band { position: relative; margin-inline: 16px; height: clamp(520px, 84vh, 900px); overflow: hidden; }
.o-band .o-band-img { position: absolute; inset: 0; }
.o-band::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.78), rgba(0,0,0,.08) 62%); }
.o-band-copy .d { text-wrap: balance; max-width: 18em; }
.o-band-copy { position: absolute; z-index: 2; left: 0; right: 0; bottom: clamp(40px, 5vw, 80px); padding-inline: calc(var(--m) - 16px); }

/* ---------- four situations ---------- */
.o-sit .grid { align-items: start; }
.o-sit .o-cap { grid-column: 1 / span 3; padding-top: 14px; margin: 0; }
.o-sit .o-h { grid-column: 4 / span 9; }
.o-sit-list { grid-column: 4 / span 9; list-style: none; margin: clamp(56px, 6vw, 88px) 0 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 64px clamp(32px, 4vw, 64px); }
.o-sit-list li { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 14px; }
.o-sit-list .n, .o-steps .n, .o-num { font-size: 13px; letter-spacing: .06em; color: var(--grey-2); font-weight: 500; }
.o-sit-list h3, .o-steps h3 { font-family: var(--display); text-transform: uppercase; font-size: clamp(28px, 2.4vw, 36px); line-height: .95; margin: 0; font-weight: 700; }
.o-sit-list p, .o-steps p { margin: 0; color: var(--grey); font-size: 17px; max-width: 46ch; }

/* ---------- how it works: photo + three steps ---------- */
.o-how .grid { align-items: start; }
.o-how .media { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.o-how .txt { grid-column: 7 / span 6; display: flex; flex-direction: column; padding-top: 8px; }
.o-steps { list-style: none; margin: clamp(40px, 4vw, 56px) 0 0; padding: 0; }
.o-steps li { display: grid; grid-template-columns: 56px 1fr; gap: 0 12px; padding: 26px 0 28px; border-top: 1px solid var(--line); }
.o-steps li:last-child { border-bottom: 1px solid var(--line); }
.o-steps .n { padding-top: 8px; }
.o-steps li > div { display: flex; flex-direction: column; gap: 12px; }

/* ---------- section head: title left, paragraph right ---------- */
.o-head { align-items: end; margin-bottom: clamp(48px, 5vw, 72px); row-gap: 28px; }
.o-head-l { grid-column: 1 / span 7; }
.o-head > .body { grid-column: 9 / span 4; }

/* ---------- coaches: name, specialty, line (portrait follows the pointer) ---------- */
.o-clist a { grid-template-columns: minmax(0, 4fr) minmax(0, 3fr) minmax(0, 5fr); align-items: baseline; gap: 8px var(--gap); padding: 22px 0 20px; }
.o-clist .rl { text-align: left; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: #ddd; font-weight: 500; }
.o-clist .ds { color: var(--grey); font-size: 16px; line-height: 1.4; max-width: 50ch; transition: color .3s; }
@media (hover: hover) and (pointer: fine) { .o-clist a:hover .ds { color: #ddd; } }
.o-help { margin-top: 36px; align-items: baseline; row-gap: 20px; }
.o-help .body { grid-column: 1 / span 6; }
.o-help .ulink { grid-column: 9 / span 4; justify-self: start; }

/* ---------- prices ---------- */
.o-price-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
.o-price { position: relative; border: 1px solid #2c2c2c; padding: clamp(24px, 2.4vw, 36px); display: flex; flex-direction: column; gap: 20px; min-height: 400px; transition: border-color .4s ease; }
@media (hover: hover) and (pointer: fine) { .o-price:hover { border-color: #6a6a6a; } }
.o-price > .cap { color: #e6e6e6; }
.o-price .amt { margin: clamp(32px, 4vw, 64px) 0 0; display: flex; flex-direction: column; gap: 12px; }
.o-price .amt .d { font-size: clamp(64px, 6vw, 96px); line-height: .8; }
.o-price .per { color: var(--grey); font-size: 14px; }
.o-price .txt { margin: 4px 0 0; color: var(--grey); font-size: 16px; line-height: 1.4; }
.o-price.is-top { border-color: rgba(255,255,255,.6); background: var(--raise); }
.o-top { position: absolute; top: clamp(24px, 2.4vw, 36px); right: clamp(24px, 2.4vw, 36px); display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #fff; line-height: 1.3; }
.o-price-note { margin-top: 24px; }

/* ---------- closing: call or WhatsApp (lead-split family, no form) ---------- */
.o-close .lead-img .o-cap { color: #cfcfcf; }
.o-call { background: var(--paper); color: #000; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(36px, 5vw, 72px) clamp(24px, 4.4vw, 64px); }
.o-call .cap { color: #6b6b6b; }
.o-call-price { display: flex; align-items: baseline; gap: 16px; margin: 20px 0 22px; }
.o-call-price .d { font-size: clamp(72px, 7vw, 112px); line-height: .8; }
.o-call-price span:last-child { color: #555; font-size: 15px; line-height: 1.35; }
.o-call .sub { color: #555; font-size: 17px; max-width: 44ch; margin: 0 0 36px; }
.o-phone { display: flex; flex-direction: column; gap: 10px; padding: 24px 0 26px; border-block: 1px solid #d9d9d6; margin-bottom: 28px; }
.o-phone .num { font-family: var(--display); font-size: clamp(44px, 4.6vw, 76px); line-height: .9; transition: color .3s; }
@media (hover: hover) and (pointer: fine) { .o-phone:hover .num { color: var(--red); } }
.o-call-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.o-call .btn { width: 100%; padding: 0 20px; }
.o-btn-wa { border: 1px solid #000; color: #000; gap: 10px; }
.o-call-list { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 10px; font-size: 15px; color: #333; }
.o-call-list li { display: grid; grid-template-columns: 22px 1fr; }
.o-call-list li::before { content: ""; width: 6px; height: 6px; background: var(--red); margin-top: 8px; }
.o-call-foot { margin: 40px 0 0; font-size: 14px; color: #6b6b6b; }
.o-call-foot a { color: #000; text-decoration: underline; text-underline-offset: 3px; transition: color .25s; }
.o-call-foot a:hover { color: var(--red-deep); }

/* ---------- essai: three moments ---------- */
.o-moments .why .o-num { margin-top: 6px; }
.o-moments .why h3 { margin-top: 0; }

/* ---------- essai: booking, the form gets the wider column ---------- */
.o-book { grid-template-columns: 5fr 7fr; min-height: 900px; }
.o-book .lead-img::after { background: linear-gradient(0deg, rgba(0,0,0,.88) 0%, rgba(0,0,0,.55) 48%, rgba(0,0,0,.08) 85%); }
.o-book .lead-img .o-cap { color: #cfcfcf; }
.o-book .lead-img h2 { font-size: clamp(40px, 4.2vw, 68px); }
.o-where { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 24px; margin: 36px 0 0; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.22); }
.o-where dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: #bdbdbd; font-weight: 500; margin-bottom: 6px; }
.o-where dd { margin: 0; font-size: 15px; line-height: 1.4; color: #fff; }
.o-where a { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45); transition: color .25s, text-decoration-color .25s; }
.o-where a:hover { color: var(--red); text-decoration-color: var(--red); }
@media (min-width: 1101px) {
  .o-book .picks { grid-template-columns: 1fr 1fr; max-height: none; }
}

/* ---------- confidentialité: reading column + sommaire ---------- */
.o-legal-hero { padding-bottom: clamp(56px, 6vw, 88px); }
.o-legal-hero h1 { font-size: var(--d-l); }
.o-legal-hero .o-cap { color: #eaeaea; margin-bottom: 12px; }
.o-meta { line-height: 1.6; margin: 0; }
.o-legal { padding-block: clamp(56px, 6vw, 96px) clamp(88px, 11vw, 168px); }
.o-legal .grid { align-items: start; }
.o-toc { grid-column: 1 / span 3; position: sticky; top: calc(var(--nav-h) + 32px); }
.o-toc .cap { color: var(--grey-2); display: block; margin-bottom: 18px; }
.o-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.o-toc a { position: relative; display: block; padding: 7px 0 7px 18px; font-size: 15px; color: #8a8a8a; transition: color .25s; }
.o-toc a::before { content: ""; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: var(--red); transform: scale(0); transition: transform .35s var(--ease-out); }
.o-toc a:hover { color: #fff; }
.o-toc a.is-on { color: #fff; }
.o-toc a.is-on::before { transform: scale(1); }
.o-prose { grid-column: 5 / span 7; max-width: 68ch; font-size: 18px; line-height: 1.65; color: #d4d4d4; }
.o-prose .o-intro { font-size: clamp(19px, 1.5vw, 22px); line-height: 1.5; color: #fff; margin: 0 0 clamp(48px, 5vw, 72px); }
.o-prose section { scroll-margin-top: calc(var(--nav-h) + 24px); }
.o-prose section + section { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--line); }
.o-prose h2 { font-family: var(--display); text-transform: uppercase; font-size: clamp(30px, 2.8vw, 42px); line-height: .95; color: #fff; margin: 0 0 22px; font-weight: 700; }
.o-prose p { margin: 0 0 16px; }
.o-prose p:last-child { margin-bottom: 0; }
.o-prose ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.o-prose li { position: relative; padding-left: 26px; }
.o-prose li::before { content: ""; position: absolute; left: 0; top: 15px; width: 10px; height: 1px; background: #777; }
.o-prose strong { color: #fff; font-weight: 600; }
.o-prose a { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: #555; transition: color .25s, text-decoration-color .25s; }
.o-prose a:hover { color: var(--red); text-decoration-color: var(--red); }
.o-addr { font-style: normal; margin-top: 24px; color: var(--grey); line-height: 1.6; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .o-price-grid { grid-template-columns: 1fr 1fr; }
  .o-clist a { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
  .o-clist .ds { grid-column: 2; }
}
@media (max-width: 980px) {
  .o-offer, .o-hero-side, .o-head-l, .o-head > .body, .o-sit .o-cap, .o-sit .o-h, .o-sit-list, .o-how .media, .o-how .txt, .o-help .body, .o-help .ulink, .o-toc, .o-prose { grid-column: 1 / -1; }
  .o-facts { grid-template-columns: 1fr 1fr; }
  .o-sit .o-h { margin-top: 18px; }
  .o-sit-list { grid-template-columns: 1fr; gap: 44px; }
  .o-how .media { margin-bottom: 48px; }
  .o-book { grid-template-columns: 1fr; min-height: 0; }
  .o-book .lead-img, .o-close .lead-img { min-height: 0; }
  .o-book .lead-img .copy, .o-close .lead-img .copy { position: relative; left: 0; right: 0; bottom: 0; padding: clamp(240px, 52vw, 380px) var(--m) 48px; }
  .o-toc { position: static; margin-bottom: 48px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
  .o-toc a::before { display: none; }
  .o-toc a { padding-left: 0; }
  .o-prose { max-width: none; }
}
@media (max-width: 640px) {
  .o-offer { gap: 14px; }
  .o-ctas { gap: 18px 24px; }
  .o-ctas .btn { width: 100%; }
  .o-band { margin-inline: 8px; height: 78svh; }
  .o-band-copy { padding-inline: calc(var(--m) - 8px); }
  .o-band-copy .d { font-size: clamp(36px, 10.4vw, 52px); }
  .o-price-grid { grid-template-columns: 1fr; }
  .o-price { min-height: 0; }
  .o-clist a { grid-template-columns: 1fr; gap: 8px; padding: 20px 0; }
  .o-clist .ds { grid-column: 1; }
  .o-call-btns { grid-template-columns: 1fr; }
  .o-where { grid-template-columns: 1fr; }
  .o-prose { font-size: 17px; }
  .o-legal-hero h1 { font-size: clamp(48px, 14vw, 72px); }
}

/* ---- v2/assets/v2-booking.css ---- */
/* APEX12 v2 — trial booking: form states, Kids fields, manage page (v2/assets/v2-booking.js). Builds on the v1 .form styles. */

/* ---------- controls: instant feedback on touch ---------- */
.bk .pick, .bk .chip, .bk-quiet, .bk-more, .form-steps button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.bk .pick:not(:disabled):active { border-color: #000; background: #fafaf8; }
.bk .chip:active { border-color: #000; }
.bk .btn[aria-disabled="true"] { pointer-events: none; cursor: progress; background: #2a2a2a; }
.bk h3:focus, .bk-title:focus { outline: none; }

/* ---------- step 1: the list ---------- */
.bk .picks { min-height: 120px; }
.bk .picks[aria-busy="true"] { pointer-events: none; }
.bk .picks .bk-skel { height: 74px; background: #e8e8e5; }
@media (prefers-reduced-motion: no-preference) {
  .bk .picks .bk-skel { animation: bkPulse 1.4s ease-in-out infinite; }
  .bk .picks .bk-skel:nth-child(2) { animation-delay: .12s; }
  .bk .picks .bk-skel:nth-child(3) { animation-delay: .24s; }
  .bk .picks .bk-skel:nth-child(4) { animation-delay: .36s; }
}
@keyframes bkPulse { 50% { opacity: .45; } }
.bk .pick.is-full { background: transparent; border-color: #deded9; cursor: default; }
.bk .pick.is-full strong { color: #8f8f8f; font-weight: 500; }
.bk .pick.is-full span { color: #8f8f8f; }
.bk .pick em { font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #5e5e5e; }
.bk .picks .bk-empty { grid-column: 1 / -1; padding: 8px 0 4px; font-size: 16px; line-height: 1.5; color: #333; }
.bk .picks .bk-empty p { margin: 0 0 6px; max-width: 46ch; }
.bk-more { align-self: flex-start; min-height: 44px; margin: -20px 0 16px; font-size: 14px; color: #333; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- alerts: plain text, a red dot where the eye must go ---------- */
.bk-alert { margin: 0; font-size: 15px; line-height: 1.45; color: #000; }
.bk-alert:not(:empty) { position: relative; padding-left: 19px; margin: 0 0 20px; max-width: 52ch; }
.bk-alert:not(:empty)::before { content: ""; position: absolute; left: 0; top: .6em; width: 7px; height: 7px; border-radius: 50%; background: var(--red); }
.bk-alert a, .bk .picks .bk-empty a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.bk-err { margin: 6px 0 0; font-size: 14px; line-height: 1.35; color: var(--red-deep); }
.bk-err:empty { display: none; }
@media (prefers-reduced-motion: no-preference) { .bk-err:not(:empty) { animation: bkErr .22s var(--ease-out); } }
@keyframes bkErr { from { opacity: 0; transform: translateY(-3px); } }
.bk .field input[aria-invalid="true"] { border-color: var(--red-deep); }

/* ---------- step 2: fields, Kids = child then parent ---------- */
.bk-group { border: 0; margin: 0; padding: 0; min-width: 0; }
/* the groups are named for screen readers; on screen the labels say it (« Prénom de l’enfant », « Votre prénom ») */
.bk-group legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.bk-child .fields { grid-template-columns: minmax(0, 1fr) 144px; margin-bottom: 14px; }
.bk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- done ---------- */
.bk .done .what { color: #000; font-size: 19px; font-weight: 600; margin-bottom: 8px; }
.bk-manage-link { align-self: flex-start; color: #000; margin-top: 4px; }

/* ---------- quiet secondary action (text button) ---------- */
.bk-quiet { min-height: 44px; padding: 0 2px; font-size: 14px; color: #444; text-decoration: underline; text-underline-offset: 3px; transition: color .15s; }
@media (hover: hover) and (pointer: fine) { .bk-quiet:hover, .bk-more:hover { color: #000; } }

/* ---------- manage page ---------- */
.bk-manage { padding-block: clamp(48px, 6vw, 96px) clamp(88px, 9vw, 144px); }
.bk-manage .grid { align-items: start; row-gap: 36px; }
.bk-title { grid-column: 1 / span 5; font-size: clamp(48px, 6vw, 96px); scroll-margin-top: calc(var(--nav-h) + 24px); text-wrap: balance; }
.bk-panel { grid-column: 7 / span 6; }
.bk-panel .bk-body { display: flex; flex-direction: column; padding: clamp(32px, 4vw, 56px) clamp(24px, 4vw, 56px) 0; }
.bk-panel .wa { margin-top: auto; padding: 32px clamp(24px, 4vw, 56px) clamp(28px, 3vw, 40px); }
.bk-panel .tick { width: 56px; height: 56px; border-radius: 50%; background: var(--red); display: grid; place-items: center; margin-bottom: 28px; }
.bk-panel .tick path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: tick .6s .2s var(--ease-out) forwards; }
.bk-panel .sub { margin-bottom: 24px; }
.bk-panel .what { color: #000; font-size: 19px; font-weight: 600; }
.bk-panel .picks { max-height: 360px; }
.bk-panel .bk-body > .bk-alert:not(:empty) { margin: 20px 0 0; }
.bk-trial { margin: 0 0 22px; border-top: 1px solid #d9d9d6; }
.bk-trial > div { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 16px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid #d9d9d6; }
.bk-trial dt { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: #6b6b6b; }
.bk-trial dd { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -.01em; color: #000; font-variant-numeric: tabular-nums; }
.bk-actions { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.bk-actions .btn { width: 100%; }
@media (prefers-reduced-motion: no-preference) {
  .bk-panel .bk-body > * { animation: bkIn .45s var(--ease-out) both; }
  .bk-panel .bk-body > :nth-child(2) { animation-delay: 50ms; }
  .bk-panel .bk-body > :nth-child(3) { animation-delay: 100ms; }
  .bk-panel .bk-body > :nth-child(n+4) { animation-delay: 150ms; }
}
@keyframes bkIn { from { opacity: 0; transform: translateY(8px); } }
@media (max-width: 980px) {
  .bk-title, .bk-panel { grid-column: 1 / -1; }
}
/* Grid/flex items default to min-width:auto: without this, the swipeable chip row below (filled by the live planning)
   widens the form, then the whole page (607 px on a 393 px phone, 31.10). */
form.bk, .bk .form-body, .bk .pane, .bk-picker { min-width: 0; }
@media (max-width: 640px) {
  /* one swipeable row of disciplines instead of three wrapped rows */
  .bk .chips { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; margin-inline: -24px; padding-inline: 24px; scroll-padding-inline: 24px; touch-action: pan-x pan-y; }
  .bk .chips::-webkit-scrollbar { display: none; }
  .bk .chip { flex: none; }
  .bk-child .fields { grid-template-columns: minmax(0, 1fr) 120px; }
  .bk-panel { margin-inline: calc(var(--m) * -1); }
  .bk-trial dd { font-size: 20px; }
}

/* ---- v2/assets/v2-disc.css ---- */
/* APEX12 site prototype, VERSION 2 — the five discipline pages (v2/disciplines.py). PROTOTYPE.
   Same system as v1 (Equinox rhythm, Plaax + Manrope, red in touches, grain); every page gets its own composition.
   All classes d2-*; shared v1 classes are only refined under .d2-page. */

.d2-n { display: block; font-family: var(--text); font-size: 13px; font-weight: 600; letter-spacing: .08em; color: var(--grey-2); font-variant-numeric: tabular-nums; }
.d2-n::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--red); margin-right: 10px; vertical-align: 2px; }

/* the end image of a page carrying a 540 px still: narrow column, never stretched */
@media (min-width: 981px) { .lead-split.d2-lead-narrow { grid-template-columns: minmax(0, min(38vw, 540px)) 1fr; } }

/* section heads (title left, words right) without inline styles, so they stack on phones */
.d2-hd { align-items: end; }
.d2-hd h2 { grid-column: 1 / span 7; }
.d2-hd .body { grid-column: 9 / span 4; }
.d2-hd--s h2 { grid-column: 1 / span 6; }
.d2-hd--s .body { grid-column: 8 / span 5; }
@media (max-width: 980px) { .d2-hd h2, .d2-hd .body { grid-column: 1 / -1; } .d2-hd .body { margin-top: 20px; } }

/* first screen height shared by the split and full-bleed openings */
.d2-split, .d2-bleed { --fs: clamp(600px, calc(100svh - var(--nav-h) - 48px), 980px); }

/* ---------- Boxe anglaise: the shadow-boxing film in reason 1 ---------- */
.d2-has-film .d2-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease; z-index: 1; pointer-events: none; }
.d2-has-film .d2-film.is-on { opacity: 1; }

/* ---------- Muay thai: split opening ---------- */
.d2-split { padding-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: var(--fs); }
.d2-split__txt { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-start; gap: 20px; padding: clamp(40px, 5vw, 72px) clamp(32px, 4vw, 72px) clamp(40px, 4.4vw, 64px) var(--m); }
.d2-split__txt .crumbs { margin: 0 0 auto; }
.d2-split h1 { font-size: clamp(64px, 9.6vw, 160px); margin-bottom: 6px; }
.d2-split .body { max-width: 44ch; }
.d2-split__facts { list-style: none; margin: 10px 0 0; padding: 20px 0 0; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; max-width: 560px; }
.d2-split__facts li { display: flex; align-items: flex-start; gap: 14px; }
.d2-split__facts b { font-size: 56px; line-height: .8; }
.d2-split__facts span { color: var(--grey); font-size: 14px; line-height: 1.35; max-width: 20ch; }
.d2-split__img { min-height: var(--fs); margin-right: 16px; }
.d2-split__img > img { position: absolute; inset: 0; object-position: 50% 60%; }

/* Muay thai: Booba's conviction, very large on grain */
.d2-bq .grid { align-items: start; row-gap: 28px; }
.d2-bq .cap { grid-column: 1 / span 2; color: var(--grey-2); padding-top: 18px; }
.d2-bq blockquote { grid-column: 3 / span 10; margin: 0; }
.d2-bq blockquote p { margin: 0; font-size: clamp(32px, 4.3vw, 68px); line-height: 1.08; font-weight: 500; letter-spacing: -.02em; color: #fff; max-width: 24ch; text-wrap: balance; text-indent: -.42em; }
.d2-bq blockquote p::before { content: "« "; color: var(--red); }
.d2-bq blockquote p::after { content: " »"; color: var(--red); }
.d2-bq footer { margin-top: 36px; color: var(--grey); font-size: 15px; }
.d2-bq footer::before { content: ""; display: inline-block; width: 28px; height: 1px; background: #777; margin-right: 14px; vertical-align: 4px; }

/* Muay thai: alternating rows */
.d2-rows__head { align-items: end; margin-bottom: clamp(56px, 6vw, 96px); }
.d2-rows__head h2 { grid-column: 1 / span 7; }
.d2-rows__head .body { grid-column: 9 / span 4; }
.d2-row { align-items: center; padding-block: clamp(28px, 3vw, 48px); }
.d2-row__img { grid-column: 2 / span 4; aspect-ratio: 4 / 5.2; }
.d2-row__txt { grid-column: 7 / span 5; display: flex; flex-direction: column; gap: 22px; }
.d2-row--rev .d2-row__img { grid-column: 8 / span 4; grid-row: 1; }
.d2-row--rev .d2-row__txt { grid-column: 2 / span 5; grid-row: 1; }
.d2-row h3 { font-size: var(--d-s); line-height: .95; font-weight: 700; margin: 0; }
.d2-row .body { font-size: 18px; max-width: 42ch; }
.d2-row--text { margin-top: clamp(24px, 3vw, 48px); padding-top: clamp(40px, 4vw, 64px); border-top: 1px solid var(--line); }
.d2-row--text .d2-row__txt { grid-column: 2 / span 10; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); column-gap: var(--gap); row-gap: 18px; align-items: start; }
.d2-row--text .d2-n { grid-column: 1 / -1; }
.d2-row--text h3 { grid-column: 1 / span 6; font-size: var(--d-m); line-height: .9; }
.d2-row--text .body { grid-column: 7 / span 4; padding-top: 8px; }

/* Muay thai: the week on one line */
.d2-strip-s { padding-block: clamp(72px, 8vw, 120px); }
.sched-d.d2-strip { margin-top: 36px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.sched-d.d2-strip .row { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; padding: 26px 24px 24px 0; border: 0; }
.sched-d.d2-strip .row + .row { padding-left: 24px; border-left: 1px solid var(--line); }
.sched-d.d2-strip .row:last-child { border-bottom: 0; }
.sched-d.d2-strip .dname { font-size: clamp(32px, 2.8vw, 44px); }
.d2-strip__t { font-size: 17px; color: #ddd; font-variant-numeric: tabular-nums; }
.sched-d.d2-strip .ulink { margin-top: 8px; font-size: 13px; }
.sched-d.d2-strip .row.is-today .d2-strip__t::after { content: "Aujourd’hui"; margin-left: 10px; color: var(--red); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }

/* Muay thai: competition as a wide band */
.d2-wide__img { aspect-ratio: 21 / 9; margin-inline: calc(var(--m) * -1 + 16px); }
.d2-wide__img img { object-position: 50% 45%; }
.d2-wide__txt { margin-top: clamp(48px, 5vw, 72px); align-items: start; }
.d2-wide__txt h2 { grid-column: 1 / span 6; }
.d2-wide__col { grid-column: 8 / span 5; display: flex; flex-direction: column; gap: 28px; }

/* ---------- Grappling: full-bleed opening, title on the photo ---------- */
.d2-bleed { padding: 0 16px; height: var(--fs); }
.d2-bleed__img { position: absolute; inset: 0 16px; }
.d2-bleed__img img { object-position: 0% 40%; }
.d2-bleed__img::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.25) 38%, rgba(0,0,0,0) 60%), linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,0) 22%); }
.d2-bleed__img::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: var(--grain); opacity: .5; mix-blend-mode: overlay; }
.d2-bleed__copy { position: relative; z-index: 3; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(28px, 3vw, 44px) calc(var(--m) - 16px) clamp(32px, 3.4vw, 52px); pointer-events: none; }
.d2-bleed__copy a, .d2-bleed__copy .btn { pointer-events: auto; }
.d2-bleed .crumbs { margin: 0; color: #bdbdbd; }
.d2-bleed__foot { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap); align-items: end; }
.d2-bleed h1 { grid-column: 1 / span 8; font-size: clamp(64px, 12.6vw, 208px); line-height: .8; }
.d2-bleed .side { grid-column: 9 / span 4; display: flex; flex-direction: column; gap: 24px; align-items: flex-start; padding-bottom: 6px; }
.d2-bleed .lead { color: #f2f2f2; }

/* Grappling: David first, his record as large figures */
.d2-coach .grid { align-items: end; }
.d2-coach__img { grid-column: 1 / span 5; aspect-ratio: 4 / 5; }
.d2-coach__img img { object-position: 50% 100%; }
.d2-coach__txt { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 24px; padding-bottom: 4px; }
.d2-coach .role { color: var(--grey-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.d2-coach__q { margin: 8px 0 10px; }
.d2-coach__q p { margin: 0; font-size: clamp(24px, 2.2vw, 34px); line-height: 1.22; font-weight: 500; letter-spacing: -.01em; color: #fff; max-width: 30ch; text-indent: -.42em; }
.d2-coach__q p::before { content: "« "; color: var(--red); }
.d2-coach__q p::after { content: " »"; color: var(--red); }
.d2-record { list-style: none; margin: clamp(64px, 7vw, 104px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-top: 1px solid var(--line); }
.d2-record li { display: flex; flex-direction: column; gap: 14px; padding: 28px 20px 0 0; }
.d2-record li + li { padding-left: 20px; border-left: 1px solid var(--line); }
.d2-record b { font-size: clamp(56px, 6vw, 104px); line-height: .8; }
.d2-record sup { font-size: .4em; vertical-align: top; position: relative; top: .06em; margin-left: .04em; }
.d2-record span { color: var(--grey); font-size: 15px; line-height: 1.35; max-width: 18ch; }

/* Grappling: a band of three stills across the page */
.d2-band__head { align-items: end; margin-bottom: clamp(48px, 5vw, 72px); }
.d2-band__head h2 { grid-column: 1 / span 7; }
.d2-band__head .body { grid-column: 9 / span 4; }
.d2-band__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; padding-inline: 16px; }
.d2-band__it { margin: 0; display: flex; flex-direction: column; }
.d2-band__it .media { aspect-ratio: 3 / 4; }
.d2-band__it figcaption { padding: 26px clamp(16px, 2vw, 32px) 0 calc(var(--m) - 16px); display: flex; flex-direction: column; gap: 14px; }
.d2-band__it + .d2-band__it figcaption { padding-left: clamp(16px, 2vw, 32px); }
.d2-band__it h3 { font-size: 30px; line-height: .95; margin: 0; font-weight: 700; }
.d2-band__it p { margin: 0; color: var(--grey); font-size: 16px; max-width: 36ch; }
@media (hover: hover) and (pointer: fine) {
  .d2-band__it .media img { transition: transform 1.2s var(--ease-soft), filter .7s ease; }
  .d2-band__it:hover .media img { transform: scale(1.03); }
}

/* ---------- Women boxing: title, then the panorama ---------- */
.d2-pano h1 { font-size: clamp(56px, 11.6vw, 190px); white-space: nowrap; }
.d2-pano__img { margin: clamp(36px, 4vw, 56px) 16px 0; aspect-ratio: 2000 / 820; max-height: 72vh; width: calc(100% - 32px); }
.d2-pano__img img { object-position: 50% 40%; }
.d2-pano__txt { margin-top: clamp(32px, 3.4vw, 48px); align-items: start; row-gap: 24px; }
.d2-pano__txt .lead { grid-column: 1 / span 5; }
.d2-pano__txt .body { grid-column: 6 / span 4; }
.d2-pano__cta { grid-column: 10 / span 3; justify-self: end; }

/* Women boxing: Tuesday / Thursday as two large cards */
.sched-d.d2-days { margin-top: 40px; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.sched-d.d2-days .row { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: clamp(28px, 3vw, 44px); border: 1px solid #2c2c2c; background: var(--raise); }
.sched-d.d2-days .row:last-child { border-bottom: 1px solid #2c2c2c; }
.d2-day__top { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; width: 100%; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 6px; }
.sched-d.d2-days .dname { font-size: clamp(56px, 6vw, 96px); line-height: .85; }
.d2-day__t { font-size: clamp(32px, 3vw, 48px); line-height: .9; color: #fff; }
.d2-day__lvl { display: inline-flex; align-items: center; gap: 10px; color: #eaeaea; }
.d2-day__lvl .dot { width: 6px; height: 6px; }
.d2-day p { margin: 0 0 10px; color: var(--grey); font-size: 17px; max-width: 44ch; }
.d2-day .btn { margin-top: auto; }

/* ---------- Kids boxing: centred title flanked by two pictures, the big one below (1 big + 2 small) ---------- */
.d2-mos__g { align-items: start; row-gap: clamp(48px, 5vw, 80px); }
.d2-mos__head { grid-column: 4 / span 6; grid-row: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; padding-top: 8px; }
.d2-mos__head .cap { color: var(--grey-2); }
.d2-mos h1 { font-size: var(--d-xl); }
.d2-mos__head .lead { max-width: 30ch; text-wrap: balance; }
.d2-mos__b { grid-column: 1 / span 3; grid-row: 1; aspect-ratio: 3 / 4; margin-top: clamp(24px, 3vw, 48px); }
.d2-mos__c { grid-column: 10 / span 3; grid-row: 1; aspect-ratio: 3 / 4; margin-top: clamp(120px, 14vw, 220px); }
.d2-mos__a { grid-column: 5 / span 4; grid-row: 2; aspect-ratio: 4 / 5.2; }
.d2-mos__body { grid-column: 10 / span 3; grid-row: 2; align-self: end; font-size: 16px; max-width: 30ch; }
/* Muay thai: Booba's portrait takes a wider text column */
.d2-thai .portrait .media { grid-column: 1 / span 5; }
.d2-thai .portrait .txt { grid-column: 7 / span 6; }

/* Kids boxing: values in text only */
.d2-values__g { margin-top: clamp(48px, 5vw, 80px); row-gap: 48px; }
.d2-val { grid-column: span 4; display: flex; flex-direction: column; gap: 18px; padding-top: 24px; border-top: 1px solid #3a3a3a; }
.d2-val h3 { font-size: clamp(30px, 2.6vw, 42px); line-height: .92; margin: 6px 0 0; font-weight: 700; text-wrap: balance; }
.d2-val p { margin: 0; color: var(--grey); font-size: 17px; max-width: 38ch; }

/* Kids boxing: Amanda in portrait, Steve in words */
.d2-duo .grid { align-items: start; }
.d2-duo__img { grid-column: 1 / span 5; aspect-ratio: 4 / 5; position: sticky; top: calc(var(--nav-h) + 32px); }
.d2-duo__txt { grid-column: 7 / span 6; display: flex; flex-direction: column; gap: 24px; padding-top: 8px; }
.d2-duo .role { color: var(--grey-2); font-size: 13px; text-transform: uppercase; letter-spacing: .06em; }
.d2-duo__steve { margin-top: clamp(40px, 4vw, 64px); padding-top: clamp(32px, 3vw, 44px); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 20px; }
.d2-duo__steve h3 { font-size: var(--d-s); line-height: .95; margin: 0; font-weight: 700; text-wrap: balance; }
.d2-duo .facts { grid-template-columns: repeat(3, auto); justify-content: start; gap: 24px 48px; margin-top: 12px; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .d2-record { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 32px; }
  .d2-record li:nth-child(4) { padding-left: 0; border-left: 0; }
  .d2-record li:nth-child(n+4) { padding-top: 24px; border-top: 1px solid var(--line); }
}
@media (max-width: 980px) {
  .d2-split { grid-template-columns: 1fr; min-height: 0; }
  .d2-split__txt { padding: 32px var(--m) 40px; }
  .d2-split__txt .crumbs { margin-bottom: 8px; }
  .d2-split__img { min-height: 0; height: 78svh; margin: 0 8px; }
  .d2-bq .cap, .d2-bq blockquote { grid-column: 1 / -1; }
  .d2-rows__head h2, .d2-rows__head .body { grid-column: 1 / -1; }
  .d2-rows__head .body { margin-top: 24px; }
  .d2-row, .d2-row--rev { row-gap: 28px; }
  .d2-row__img, .d2-row--rev .d2-row__img { grid-column: 1 / span 10; grid-row: 1; }
  .d2-row--rev .d2-row__img { grid-column: 3 / span 10; }
  .d2-row__txt, .d2-row--rev .d2-row__txt { grid-column: 1 / -1; grid-row: 2; }
  .d2-row--text .d2-row__txt { grid-column: 1 / -1; grid-row: auto; display: flex; }
  .sched-d.d2-strip { grid-template-columns: 1fr 1fr; }
  .sched-d.d2-strip .row:nth-child(3) { padding-left: 0; border-left: 0; }
  .sched-d.d2-strip .row:nth-child(n+3) { border-top: 1px solid var(--line); }
  .d2-wide__img { aspect-ratio: 4 / 3; margin-inline: calc(var(--m) * -1 + 8px); }
  .d2-wide__txt h2, .d2-wide__col { grid-column: 1 / -1; }
  .d2-wide__col { margin-top: 28px; }
  .d2-bleed { padding: 0 8px; height: calc(100svh - var(--nav-h) - 64px); min-height: 560px; }
  .d2-bleed__img { inset: 0 8px; }
  .d2-bleed__img img { object-position: 12% 40%; }
  .d2-bleed__copy { padding: 22px calc(var(--m) - 8px) 28px; }
  .d2-bleed h1, .d2-bleed .side { grid-column: 1 / -1; }
  .d2-bleed h1 { font-size: clamp(56px, 17vw, 120px); }
  .d2-bleed .side { margin-top: 22px; gap: 20px; }
  .d2-coach__img, .d2-coach__txt { grid-column: 1 / -1; }
  .d2-coach__txt { margin-top: 36px; }
  .d2-band__head h2, .d2-band__head .body { grid-column: 1 / -1; }
  .d2-band__head .body { margin-top: 20px; }
  /* overflow-y hidden: with overflow-x auto alone the row also scrolls 18 px vertically (captions fading in), and a finger
     swiping up on the band scrolled the band instead of the page (27.10, iPhone stuck on Grappling) */
  .d2-band__row { display: flex; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; gap: 3px; padding-inline: 8px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .d2-band__row::-webkit-scrollbar { display: none; }
  .d2-band__it { flex: 0 0 78%; scroll-snap-align: start; scroll-margin-left: 8px; }
  .d2-band__it figcaption, .d2-band__it + .d2-band__it figcaption { padding: 20px 16px 0 calc(var(--m) - 8px); }
  .d2-pano__img { margin-inline: 8px; width: calc(100% - 16px); aspect-ratio: 4 / 5; max-height: none; }
  .d2-pano__img img { object-position: 50% 40%; }
  .d2-pano__txt .lead, .d2-pano__txt .body, .d2-pano__cta { grid-column: 1 / -1; justify-self: start; }
  .sched-d.d2-days { grid-template-columns: 1fr; }
  .d2-mos__head { grid-column: 1 / -1; }
  .d2-mos__g { row-gap: var(--gap); }
  .d2-mos__a { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 4 / 4.8; margin-top: 32px; }
  .d2-mos__b { grid-column: 1 / span 6; grid-row: 3; margin-top: 0; }
  .d2-mos__c { grid-column: 7 / span 6; grid-row: 3; margin-top: 0; }
  .d2-mos__body { grid-column: 1 / -1; grid-row: 4; margin-top: 20px; max-width: 46ch; }
  .d2-thai .portrait .media, .d2-thai .portrait .txt { grid-column: 1 / -1; }
  .d2-val { grid-column: 1 / -1; }
  .d2-duo__img { grid-column: 1 / -1; position: relative; top: 0; }
  .d2-duo__txt { grid-column: 1 / -1; margin-top: 36px; }
}
@media (max-width: 640px) {
  .d2-split h1 { font-size: clamp(64px, 22vw, 110px); }
  .d2-split__facts b { font-size: 44px; }
  .d2-split__img { height: 72svh; }
  .d2-bq blockquote p { font-size: clamp(28px, 8.2vw, 40px); }
  .d2-row h3 { font-size: 34px; }
  .d2-row--text h3 { font-size: clamp(44px, 13vw, 64px); }
  .sched-d.d2-strip .row { padding: 20px 12px 18px 0; }
  .sched-d.d2-strip .row + .row { padding-left: 16px; }
  .sched-d.d2-strip .row:nth-child(3) { padding-left: 0; }
  .d2-record { grid-template-columns: 1fr 1fr; }
  .d2-record li, .d2-record li + li { padding: 22px 12px 0 0; border-left: 0; border-top: 1px solid var(--line); }
  .d2-record li:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--line); }
  .d2-record li:first-child, .d2-record li:nth-child(2) { border-top: 0; }
  .d2-record b { font-size: 60px; }
  .d2-pano h1 { font-size: clamp(56px, 19vw, 96px); white-space: normal; }
  .d2-mos h1 { font-size: clamp(64px, 19vw, 100px); }
  .d2-day__top { flex-wrap: wrap; }
  .d2-duo .facts { grid-template-columns: repeat(3, auto); gap: 16px 28px; }
  .d2-duo .facts b { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  .d2-has-film .d2-film { display: none; }
}

/* MMA (30.10): « Bientôt au planning » — the schedule's own rows (.sched-d) carry what Steve has not announced yet.
   Name | sentence | action, the name in the display face like the days of the other pages. */
.d2-soon .sched-d { margin-top: clamp(36px, 4vw, 56px); }
.d2-soon .sched-d .row { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr) minmax(170px, 2fr); gap: 24px 32px; padding: 26px 0; }
.d2-soon .dname { font-size: clamp(30px, 3.1vw, 46px); }
.d2-soon__t { margin: 0; max-width: 46ch; color: var(--grey); font-size: 17px; line-height: 1.5; text-wrap: pretty; }
.d2-soon .row .btn { justify-self: end; }
.d2-soon .row:last-child .dname { color: var(--red); }
@media (max-width: 640px) {
  .d2-soon .sched-d .row { grid-template-columns: 1fr; gap: 10px; padding: 22px 0; }
  .d2-soon .row .btn { justify-self: start; margin-top: 6px; }
  .d2-soon__t { font-size: 16px; }
}

/* ---- v2/assets/v2-disciplines.css ---- */
/* APEX12 v2 — home section #disciplines, layout « Nom en grand » (David, 01.11: « parfait, implémente »).
   Port of explore/disciplines-defilement/ at bc705cc (rail.css + l4.css + looks.css « centre », look baked in).
   While held (.is-pinned, set by v2-disciplines.js) the stage is sticky and the page's scroll moves the rail 1:1;
   one big name under the photos names the card on the reading line. That card's photo is in colour, the others in
   black and white (data-tone="g"), a black layer (--dim) darkens the photos by distance to the line, a static film
   grain covers every photo box (Steve's .pup layers included). Not held (no JS, reduced motion, screen < 520 px
   high): a plain grid, captions visible, full colour with grain.
   Everything is scoped to .dr (only the home section carries it): this file is linked on every v2 page.
   site.css .slide img { filter: saturate(.42) … } and its hover zoom are overridden below; v1 files stay as they are. */

.dr {
  overflow: clip; overflow-clip-margin: 0;           /* site.css .classes is overflow:hidden, which would break sticky */
  --bn: clamp(56px, 8vw, 128px);                      /* big name size */
  --ps: .92;                                          /* photo size (02.11, David: 5 to 10 % smaller) */
  --Z: calc((var(--sh) - var(--bn) * .9 - clamp(120px, 15svh, 168px)) * var(--ps)); /* room for the photos in the held stage */
  /* static film grain: a 240 px SVG tile of dark and light specks, composited normally (no blend mode: cheap to move) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' seed='4' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' result='d' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 -2.4 0 0 0 1.2'/%3E%3CfeColorMatrix in='n' result='l' values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.6 0 0 0 -.8'/%3E%3CfeMerge%3E%3CfeMergeNode in='d'/%3E%3CfeMergeNode in='l'/%3E%3C/feMerge%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23g)'/%3E%3C/svg%3E");
}
.dr-pin { position: relative; margin-top: clamp(56px, 6vw, 96px); }
.dr-rail { position: relative; user-select: none; -webkit-user-select: none; }
.dr .slide { position: relative; -webkit-user-drag: none; -webkit-touch-callout: none; }
.dr .slide .media { width: 100%; outline: 1px solid rgba(255, 255, 255, .07); outline-offset: -1px; } /* near-black photos keep an edge */
.dr .figcap { display: flex; flex-direction: column; gap: 6px; margin-top: 16px; }
.dr .cap { font-size: 18px; font-weight: 600; letter-spacing: .04em; line-height: 1.2; }
.dr .slide .when { font-size: 14px; line-height: 1.35; }
.dr .cap, .dr .when { overflow-wrap: anywhere; }
.dr .slide[data-s="1"] { --k: .84; --ar: .74; --al: flex-start; --pw: .82; }
.dr .slide[data-s="2"] { --k: .62; --ar: .8;  --al: flex-end;   --pw: .78; }
.dr .slide[data-s="3"] { --k: 1;   --ar: .84; --al: flex-start; --pw: .86; }
.dr .slide[data-s="4"] { --k: .6;  --ar: 1.12; --al: flex-end;  --pw: .80; }
.dr .slide[data-s="5"] { --k: .9;  --ar: .8;  --al: center;     --pw: .84; }
.dr .slide[data-wide] { --ar: 1.34; }

/* ---------- the photos: every layer of the box (original <img>, Steve's .pup, a file dropped in preview) ---------- */
.dr .slide .media img, .dr .slide .media video, .dr .slide:hover .media img {
  filter: grayscale(0) contrast(1.1) saturate(1.06) brightness(1); transform: none;
  transition: filter .9s var(--ease-soft);
}
/* black and white, same filter functions in the same order so the browser fades between the two */
.dr .slide .media[data-tone="g"] img, .dr .slide .media[data-tone="g"] video { filter: grayscale(1) contrast(1.14) saturate(1.06) brightness(1.03); }
/* grain over the whole box, above Steve's layer (z 2) and the dim layer (z 3), under the preview tools (z 5-6) */
.dr .media::after {
  content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: var(--grain) 0 0 / 240px 240px repeat; opacity: .22;
}

/* ---------- not held: no JS, reduced motion, very low screens ---------- */
.dr:not(.is-pinned) .track {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--gap);
  align-items: start; padding-inline: var(--m); will-change: auto;
}
.dr:not(.is-pinned) .slide { width: auto; margin: 0; }
.dr:not(.is-pinned) .slide .media { aspect-ratio: 4 / 5; height: auto; }
.dr:not(.is-pinned) .slide:nth-child(3n+2) { margin-top: clamp(40px, 6vw, 96px); }
.dr:not(.is-pinned) .slide:nth-child(3n+3) { margin-top: clamp(16px, 2vw, 32px); }
@media (max-width: 980px) { .dr:not(.is-pinned) .track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dr:not(.is-pinned) .slide:nth-child(n) { margin-top: 0; } .dr:not(.is-pinned) .slide:nth-child(2n) { margin-top: 56px; } }
@media (max-width: 640px) { .dr:not(.is-pinned) .track { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .dr:not(.is-pinned) .slide:nth-child(n) { margin-top: 0; } }
.dr .rail-progress, .dr .bign { display: none; }

/* ---------- held ---------- */
.dr.is-pinned { padding-bottom: 0; }
.dr.is-pinned .dr-pin { height: var(--pin-h, auto); margin-top: clamp(8px, 2vw, 32px); }
.dr.is-pinned .dr-stage {
  position: sticky; top: var(--nav-h);
  height: calc(100svh - var(--nav-h));
  display: flex; flex-direction: column; justify-content: center;
  overflow: clip;
}
.dr.is-pinned .dr-rail { overflow: clip; touch-action: pan-y; }
.dr.is-pinned .track {
  display: flex; flex-wrap: nowrap; justify-content: flex-start; width: max-content; padding-inline: var(--m);
  height: var(--Z); align-items: flex-start; gap: clamp(36px, 4.6vw, 84px);
}
.dr.is-pinned .slide { flex: none; will-change: transform; align-self: var(--al); width: calc(var(--Z) * var(--k) * var(--ar)); }
.dr.is-pinned .slide .media { height: calc(var(--Z) * var(--k)); }
/* the card keeps its name for screen readers; the big name shows it */
.dr.is-pinned .figcap { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.dr.is-pinned .rail-progress { display: block; margin: clamp(24px, 4svh, 44px) var(--m) 0; overflow: hidden; flex: none; }
.dr.is-pinned .rail-progress i { width: var(--bar-w, 18%); transform: translate3d(0, 0, 0); will-change: transform; } /* moved by v2-disciplines.js */
/* the photo glides inside its frame as the card crosses the screen (v2-disciplines.js sets translate on the layer) */
.dr.is-pinned .slide .media > img, .dr.is-pinned .slide .media > .pup { scale: 1.12; will-change: translate; }
/* the site's own file parked under Steve's layer (a blank GIF until the layer goes): no layer of its own to move */
.dr.is-pinned .slide .media > img[data-pup-src] { visibility: hidden; will-change: auto; }
/* brightness by distance to the reading line (--dim, 0 = full light): a black layer under the grain, only opacity changes */
.dr.is-pinned .media::before {
  content: ""; position: absolute; inset: -1px; z-index: 3; pointer-events: none;
  background: #000; opacity: var(--dim, 0); will-change: opacity;
}
@media (max-width: 640px) {
  .dr { --Z: calc((var(--sh) - var(--bn) * .9 - 132px) * var(--ps)); }
  .dr.is-pinned .track { gap: 14px; }
  .dr.is-pinned .slide { width: calc(var(--sw) * var(--pw) * var(--ps)); }
  .dr.is-pinned .slide .media { height: calc(var(--Z) * (.7 + var(--k) * .3)); }
  .dr.is-pinned .slide[data-wide] .media { height: calc(var(--sw) * var(--pw) * var(--ps) / 1.2); }
}
@media (hover: hover) and (pointer: fine) {
  .dr.is-pinned .dr-rail { cursor: grab; }
  .dr.is-pinned .slide { cursor: pointer; }
  .dr.is-dragging, .dr.is-dragging * { cursor: grabbing !important; }
}
.dr.is-dragging .slide { pointer-events: none; }

/* ---------- the big name: a link to the active card's page, out of the tab order and aria-hidden ---------- */
.dr.is-pinned .bign {
  display: grid; grid-template-columns: max-content max-content; align-items: end; column-gap: clamp(20px, 2.4vw, 40px);
  margin: clamp(18px, 3svh, 36px) var(--m) 0; width: max-content; max-width: calc(100% - 2 * var(--m));
  opacity: 0; transition: opacity .6s var(--ease-soft);
  -webkit-user-drag: none; user-select: none; -webkit-user-select: none;
}
.dr.is-pinned .bign.is-in { opacity: 1; }
.bign-n, .bign-w { display: grid; overflow: clip; }
/* the swap: the new name rises a short way and fades in, the old one fades out quickly */
.bign-n > span, .bign-w > span { grid-area: 1 / 1; transform: translate3d(0, 38%, 0); opacity: 0; visibility: hidden; }
.bign-n > span.is-on, .bign-n > span.is-going, .bign-w > span.is-on, .bign-w > span.is-going {
  visibility: visible; transition: transform .7s var(--ease-out), opacity .55s var(--ease-soft);
}
.bign-n > span.is-on, .bign-w > span.is-on { transform: none; opacity: 1; }
.bign-n > span.is-going, .bign-w > span.is-going { opacity: 0; transition: transform .35s var(--ease-out), opacity .22s linear; }
.bign-n { padding-top: .14em; margin-top: -.14em; } /* room for the accent of « Compétition » inside the mask */
.bign-n > span { font: 700 var(--bn)/.88 var(--display); text-transform: uppercase; letter-spacing: -.01em; white-space: nowrap; transition: color .3s; }
.bign-w > span { font-size: 16px; line-height: 1.3; color: var(--grey-2); padding-bottom: .5em; white-space: nowrap; transition: color .3s; }
/* red only on the big name itself: the photos slide under a resting pointer, a red that followed them would blink */
@media (hover: hover) and (pointer: fine) {
  .bign:hover .bign-n > span { color: var(--red); }
  .bign:hover .bign-w > span { color: #ddd; }
}
@media (max-width: 640px) {
  .dr.is-pinned .bign { grid-template-columns: max-content; row-gap: 6px; }
  .bign-w > span { padding-bottom: 0; font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .dr .slide .media > img, .dr .slide .media > .pup { scale: 1; translate: none !important; }
}

/* ---- v2/assets/v2-fonts.css ---- */
/* APEX12 v2 — Manrope, self-hosted (01.11, SEO b7 « vitesse », TEC-12c): no Google Fonts request (one blocking
   stylesheet less, no visitor data sent to Google, nLPD). Same variable font Google Fonts served (Manrope, SIL OFL 1.1,
   v2/fonts/OFL-manrope.txt; files from @fontsource-variable/manrope 5.3.0), same subsets, weights 200 to 800.
   The latin file is preloaded by every page (tools/build-v2.py FONT). */
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Manrope";
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(../fonts/manrope-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Until Manrope arrives (font-display: swap), the text is drawn in a local font set to Manrope's measures, so that
   nothing re-wraps or moves when Manrope replaces it (the opening is visible at once since SEO b7: a re-wrap of the
   status bar used to push it 19 px, CLS). Measured in Chromium on a 230-character French sample, weights 400/500:
   Arial (= Liberation Sans) is within 1 % of Manrope's width, Roboto (Android) 10.4 % narrower; Manrope's ascent and
   descent are 107 % and 30 % of its size. Once Manrope is loaded these faces are never used: same look. */
@font-face {
  font-family: "Manrope Fallback";
  src: local("Arial"), local("ArialMT"), local("Liberation Sans"), local("LiberationSans");
  size-adjust: 100%; ascent-override: 107%; descent-override: 30%; line-gap-override: 0%;
}
@font-face {
  font-family: "Manrope Fallback R";
  src: local("Roboto"), local("Roboto-Regular");
  size-adjust: 110.4%; ascent-override: 96.9%; descent-override: 27.2%; line-gap-override: 0%;
}
/* Titles: Bebas Neue Regular (02.11, replaces the Plaax trial; SIL OFL 1.1, v2/fonts/OFL-bebas-neue.txt), self-hosted and
   preloaded by every page (tools/build-v2.py TITLE_FONT). One Regular file answers every weight: the titles ask for 700,
   so no fake bold is drawn. It has every character the site uses (accents, ç ï œ ' / included). */
@font-face {
  font-family: "Bebas Neue";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(../fonts/bebas-neue.woff2) format("woff2");
}
/* Until Bebas Neue arrives, a bold Arial or Roboto scaled to its width (56.7 %, measured on the site's titles in
   capitals) wraps the title the same way, so the text under it does not jump. Overrides scale with size-adjust:
   Bebas's ascent 90 % and descent 30 % become 158.7 % and 52.9 %. */
@font-face {
  font-family: "Bebas Fallback"; font-weight: 700;
  src: local("Arial Bold"), local("Arial-BoldMT"), local("Liberation Sans Bold"), local("LiberationSans-Bold");
  size-adjust: 56.7%; ascent-override: 158.7%; descent-override: 52.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Bebas Fallback R"; font-weight: 700;
  src: local("Roboto Bold"), local("Roboto-Bold");
  size-adjust: 56.8%; ascent-override: 158.5%; descent-override: 52.8%; line-gap-override: 0%;
}
:root {
  --text: "Manrope", "Manrope Fallback", "Manrope Fallback R", system-ui, sans-serif;
  --display: "Bebas Neue", "Bebas Fallback", "Bebas Fallback R", "Arial Narrow", sans-serif;
}

/* ---- v2/assets/v2-foot.css ---- */
/* APEX12 v2 — footer: Steve's official wordmark (img/brand/apex12-wordmark-trim.svg, white « APEX », red « 12 »)
   replaces the giant typed « APEX12 » of v1 (30.10). Same place and full width: edge to edge inside the page margins
   (the -trim file has its viewBox cut to the ink). It rises from behind its own edge as the footer comes in, like the
   site's titles (1 s, cubic-bezier(.19,1,.22,1)); site.js adds .is-in through data-fade. */
.giant.v2-mark { margin-top: 20px; padding: 3.5vw var(--m) max(10px, 1.25vw); overflow: hidden; line-height: 0; }
.giant.v2-mark[data-fade] { opacity: 1; transform: none; transition: none; }
.v2-mark img { display: block; width: 100%; height: auto; aspect-ratio: 4500 / 922; user-select: none; -webkit-user-drag: none;
  transform: translateY(104%); transition: transform 1.1s cubic-bezier(.19, 1, .22, 1) .08s; }
.v2-mark.is-in img, .no-js .v2-mark img { transform: none; }
@media (prefers-reduced-motion: reduce) { .v2-mark img { transform: none; transition: none; } }

/* ---- v2/assets/v2-guide.css ---- */
/* APEX12 v2 — the guide page /sports-de-combat-lausanne (SEO b6, 01.11.2026: plan E7) and the English page /en (E9).
   Both reuse the long-form layout of the privacy page (.o-legal: table of contents + .o-prose). Rules scoped to .v2-guide. */

/* tables: rows separated by hairlines, like the site's FAQ and checklists; on phones each row becomes a small card */
.v2-gt-wrap { margin: 8px 0 24px; }
.v2-gt { width: 100%; border-collapse: collapse; font-size: 16px; line-height: 1.5; }
.v2-gt th, .v2-gt td { text-align: left; vertical-align: top; padding: 16px 20px 16px 0; border-top: 1px solid var(--line); }
.v2-gt thead th { padding-top: 0; border-top: 0; font-size: 13px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; color: var(--grey); }
.v2-gt tbody th { color: #fff; font-weight: 600; min-width: 9em; }
.v2-gt tbody tr:last-child > * { border-bottom: 1px solid var(--line); }
.v2-gt td:last-child, .v2-gt th:last-child { padding-right: 0; }
.v2-guide .o-prose .v2-guide-faq .qa { grid-column: auto; }
.v2-guide .o-prose .qa .ans { margin: 0; }
.v2-guide .o-prose section > .fine { color: var(--grey); }
/* English page: the week, two columns of day + classes */
.v2-guide .v2-week td { white-space: normal; }

@media (max-width: 760px) {
  .v2-gt, .v2-gt tbody, .v2-gt tr, .v2-gt th, .v2-gt td { display: block; }
  .v2-gt thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .v2-gt tbody tr { padding: 16px 0; border-top: 1px solid var(--line); }
  .v2-gt tbody tr:last-child { border-bottom: 1px solid var(--line); }
  .v2-gt th, .v2-gt td, .v2-gt tbody tr:last-child > * { border: 0; padding: 2px 0; }
  .v2-gt tbody th { margin-bottom: 6px; font-size: 17px; }
  .v2-gt td[data-label]::before { content: attr(data-label) " : "; color: var(--grey); }
}

/* ---- v2/assets/v2-home.css ---- */
/* APEX12 site v2 — homepage opening: the first film of the current apex12.ch (portrait 540x960) as full-screen background. PROTOTYPE.
   A (default): cropped to cover, dark veil + grain hide the low definition.
   B (?herov=b): blurred copy fills the frame, the sharp film stands in one portrait column on the right. */
.hero-media img { object-position: 50% 40%; }
.hero-video { object-position: 50% 38%; }
.hero-blur { display: none; }
html:not(.v2-hero-b) .hero-video { filter: contrast(1.06) saturate(.9); }
html.v2-hero-b .hero-blur { display: block; position: absolute; inset: -60px; width: calc(100% + 120px); height: calc(100% + 120px); object-fit: cover; filter: blur(30px) brightness(.5) saturate(1.05); }
@media (min-width: 761px) {
  html.v2-hero-b .hero-video { left: auto; right: clamp(24px, 7vw, 120px); width: auto; aspect-ratio: 9 / 16; height: 100%; object-position: 50% 50%; box-shadow: 0 30px 80px rgba(0,0,0,.45); }
  html.v2-hero-b .hero-media img { filter: blur(30px) brightness(.5); transform: scale(1.1); animation: none; }
}

/* ---- v2/assets/v2-nav.css ---- */
/* APEX12 v2 — navigation and in-text links (SEO b6, 01.11.2026: plan E3 / TEC-13). Loaded on every v2 page.
   « Disciplines » (top bar and phone menu) opens the list of the six discipline pages + the guide page, instead of
   jumping to /#disciplines. Markup: the shell of v2/index.html; behaviour: v2/assets/v2-nav.js. */

/* In-text links (E3): the status bar's treatment (underlined in the text colour, red on hover), never a button look */
.v2-tlink { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .25s; }
@media (hover: hover) and (pointer: fine) { .v2-tlink:hover { color: var(--red); } }
.v2-tlink:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 2px; }

/* ---------- top bar: « Disciplines » dropdown ---------- */
.nav-links { align-items: center; }
.v2-dd { position: relative; height: var(--nav-h); display: flex; align-items: center; }
.v2-dd-btn { position: relative; display: inline-flex; align-items: center; gap: 9px; font-size: 16px; padding-block: 6px; color: #f2f2f2; }
.v2-dd-ic { width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform .35s var(--ease-out); }
.v2-dd.is-open .v2-dd-ic { transform: translateY(1px) rotate(225deg); }
/* the red dot of the other links: under « Disciplines » when one of its pages is open */
.v2-dd-btn::after { content: ""; position: absolute; left: calc(50% - 7px); bottom: -2px; width: 5px; height: 5px; background: var(--red);
  transform: translateX(-50%) scale(0); transition: transform .35s var(--ease-out); }
.v2-dd:has([aria-current="page"]) .v2-dd-btn::after { transform: translateX(-50%) scale(1); }
.v2-dd-panel { position: absolute; top: 100%; left: -24px; min-width: 270px; padding: 14px 24px 18px; background: #000;
  border: 1px solid #1c1c1c; border-top: 0; opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s ease, transform .35s var(--ease-out), visibility 0s .35s; }
.v2-dd.is-open .v2-dd-panel, .no-js .v2-dd:hover .v2-dd-panel, .no-js .v2-dd:focus-within .v2-dd-panel {
  opacity: 1; visibility: visible; transform: none; transition: opacity .2s ease, transform .35s var(--ease-out); }
.v2-dd-panel ul { list-style: none; margin: 0; padding: 0; }
.nav-links .v2-dd-panel a { display: block; padding: 8px 0; font-size: 16px; }
.nav-links .v2-dd-panel a::after { left: -12px; top: 50%; bottom: auto; transform: translateY(-50%) scale(0); }
.nav-links .v2-dd-panel a[aria-current="page"]::after { transform: translateY(-50%) scale(1); }
@media (hover: hover) and (pointer: fine) { .nav-links .v2-dd-panel a:hover::after { transform: translateY(-50%) scale(1); } }
.nav-links .v2-dd-panel .v2-dd-guide { margin-top: 10px; padding-top: 14px; border-top: 1px solid #1c1c1c; font-size: 14px; color: var(--grey); }
@media (max-width: 1180px) { .v2-dd-btn, .nav-links .v2-dd-panel a { font-size: 15px; } }

/* ---------- phone menu: « Disciplines » opens its list in place ---------- */
.menu { overflow-y: auto; overscroll-behavior: contain; }
.menu .v2-mdisc-btn { display: flex; align-items: center; gap: .22em; width: 100%; text-align: left; font-family: var(--display);
  text-transform: uppercase; font-size: clamp(48px, 13vw, 88px); line-height: .98;
  transform: translateY(105%); transition: transform .8s var(--ease-out), color .25s; }
.menu-open .menu .v2-mdisc-btn { transform: none; }
.menu .v2-mdisc-btn:active { color: var(--red); }
.menu .v2-mdisc-btn .v2-dd-ic { width: .2em; height: .2em; border-width: 0 3px 3px 0; transform: translateY(-.08em) rotate(45deg); }
.menu .v2-mdisc.is-open .v2-dd-ic { transform: translateY(.06em) rotate(225deg); }
.v2-msub { display: grid; grid-template-rows: 0fr; visibility: hidden; transition: grid-template-rows .5s var(--ease-out), visibility 0s .5s; }
.v2-mdisc.is-open .v2-msub { grid-template-rows: 1fr; visibility: visible; transition: grid-template-rows .5s var(--ease-out); }
.v2-msub > ul { min-height: 0; overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }
.v2-msub li:nth-child(-n+2) { margin-top: 14px; }
.menu .v2-msub a { font-family: inherit; text-transform: none; font-size: 18px; line-height: 1.3; padding: 9px 0; transform: none; color: #f2f2f2; }
.menu .v2-msub a[aria-current="page"] { color: var(--red); }
.menu .v2-msub .v2-msub-guide { grid-column: 1 / -1; margin-bottom: 12px; }
.menu .v2-msub .v2-msub-guide a { color: var(--grey); font-size: 16px; }

@media (prefers-reduced-motion: reduce) {
  .v2-dd-panel, .v2-dd-ic, .v2-msub, .menu .v2-mdisc-btn { transition: none; }
}

/* ---- v2/assets/v2-rest.css ---- */
/* APEX12 v2 — styles for the homepage body and the six other pages (cours privés films, video band, Équipe). PROTOTYPE.
   Loaded on every v2 page: every rule is scoped to a v2-only class. */

/* Cours privés: the two private-lesson films side by side (one on phones) */
.v2-films { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.v2-film-box { position: relative; margin: 0; height: 100%; }
.v2-film-box > img, .v2-film-box > .v2-film, .p-hero .v2-films img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-film-box > .v2-film { object-position: 50% 40%; }
.v2-film-box::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(0,0,0,.55), rgba(0,0,0,0) 34%); }
.v2-film-cap { position: absolute; z-index: 2; left: 24px; bottom: 22px; color: #fff; font-size: 13px; letter-spacing: .06em; text-transform: uppercase; }
.v2-film-box.is-swapped > .v2-film, .v2-col.is-swapped > .v2-film { display: none; }

/* Video band: blurred copy fills the width, the portrait film plays sharp in the centre */
.v2-col > img { filter: blur(26px) brightness(.5) saturate(.8); transform: scale(1.18); }
.v2-col > .v2-film-col { position: absolute; top: 0; bottom: 0; left: 50%; height: 100%; width: auto; aspect-ratio: 9 / 16; translate: -50% 0; object-fit: cover; }
.v2-col.is-swapped > img { filter: none; transform: none; }

/* Équipe: Steve's portrait in a portrait frame */
.v2-founder-tall .founder-img { grid-column: 2 / span 5; margin-left: 0; aspect-ratio: 4 / 5; }
.v2-founder-tall .founder-img img { object-position: 50% 100%; }

@media (max-width: 760px) {
  .v2-films { grid-template-columns: 1fr; gap: 0; }
  .v2-films > :nth-child(2) { display: none; }
  .v2-film-cap { left: 18px; bottom: 16px; }
  .v2-col > img { filter: none; transform: none; }
  .v2-col > .v2-film-col { left: 0; width: 100%; aspect-ratio: auto; translate: none; }
}
@media (max-width: 1100px) {
  .v2-founder-tall .founder-img { grid-column: 1 / -1; margin: 0 0 40px; aspect-ratio: 4 / 5; max-width: 560px; }
}

/* ---- v2/assets/v2-speed.css ---- */
/* APEX12 v2 — first paint (01.11, SEO b7 « vitesse », TEC-11). The page's opening (.hero on the home, .p-hero on the
   other pages, always the first section of <main>) is drawn as it ends up after its reveal, without waiting for
   site.js (fonts.ready + 450 ms before): title, text and picture are visible at the first paint, so they can be the
   LCP. The reveals below it (IntersectionObserver in site.js) do not change. The final state is the one of
   assets/site.css (.is-in): the page looks the same once loaded. */
:is(.hero, .p-hero) [data-fade] { opacity: 1; transform: none; transition: none; }
:is(.hero, .p-hero) .line { transform: none; transition: none; }
html:not(.no-js):not(.split-ready) :is(.hero, .p-hero) [data-split] { opacity: 1; }
:is(.hero, .p-hero) [data-img] { clip-path: inset(0 0 0 0); transition: none; }
:is(.hero, .p-hero) [data-img] > img { transform: scale(1.0001); }

/* 02.11 (F1-bis): the opening of every page is .hero (home) or .p-hero (all the others, .o-hero included: class="p-hero
   o-hero"). The poster of Steve's film there is in the HTML (tools/bake_picks.py poster_picture), so the whole first
   screen paints without JavaScript. The coach photo that follows the mouse (.peek, site.js: mouse only) is never shown
   without a mouse: hidden there, its lazy pictures (tools/build-v2.py peek_lazy) are never downloaded. */
@media not all and (hover: hover) and (pointer: fine) { .peek { display: none; } }

/* width/height written by the build on the site's pictures (tools/build-v2.py responsive(), TEC-12) reserve their
   room before they load; they never set a height the stylesheets do not: zero specificity, any rule wins. */
:where(img[width][height]) { height: auto; }

/* ---- v2/assets/v2-transitions.css ---- */
/* APEX12 v2 — page to page (02.11). The browser keeps the old page on screen until the new one can be drawn, then
   crossfades: the old page leaves fast, the new one rises 10 px into place. The menu bar (.nav, fixed) is one shared
   piece: it stays put instead of blinking. Chrome / Edge 126+ and Safari 18.2+; Firefox switches pages as before.
   The head of every page (tools/build-v2.py TRANSITION_HEAD) also drops .no-js before the first paint, so the reveals
   below the opening start hidden instead of showing, vanishing, then playing. */
@view-transition { navigation: auto; }
.nav { view-transition-name: site-nav; }

::view-transition-group(site-nav) { animation-duration: 320ms; animation-timing-function: cubic-bezier(.23, 1, .32, 1); }
::view-transition-old(site-nav), ::view-transition-new(site-nav) { animation-duration: 160ms; }
::view-transition-old(root) { animation: v2-page-out 160ms cubic-bezier(.23, 1, .32, 1) both; }
::view-transition-new(root) { animation: v2-page-in 340ms cubic-bezier(.23, 1, .32, 1) 40ms both; }
@keyframes v2-page-out { to { opacity: 0; } }
@keyframes v2-page-in { from { opacity: 0; transform: translateY(10px); } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(site-nav) { animation-duration: 0s; }
  ::view-transition-new(root) { animation: v2-page-fade 200ms ease both; }
  @keyframes v2-page-fade { from { opacity: 0; } }
}

/* the opening's picture still loading (v2-transitions.js): fades in when it lands */
:is(.hero, .p-hero) .pup :is(img, video) { transition: opacity .3s cubic-bezier(.23, 1, .32, 1); }
:is(.hero, .p-hero) .pup .v2-wait { opacity: 0; }

/* the status line (« Ouvert, ferme à… · Prochain cours d'essai… »): the build writes a guess, site.js the truth. On a
   first visit the guess stays hidden until then; after that, the line comes back as the last page left it. */
.bar.bar-wait > :not(.dot) { opacity: 0; }
.bar > :not(.dot) { transition: opacity .2s ease; }

/* ---- v2/assets/v2-upload-layer.css ---- */
/* APEX12 v2 — Steve's photos and films as visitors see them (01.11, SEO b7: split from v2-upload.css). The layer
   (.pup) drawn over a picture, baked by tools/bake_picks.py or added by the preview overlay (v2/assets/v2-upload.js),
   with its crop (--op*) and its 2-4 panel looks. Public: part of the site's stylesheet (v2/build/site.css). The
   editing tools (chips, « Fondu | Net », drop zone, save bar) are in v2-upload.css, loaded on preview hosts only. */
.pup { position: absolute; inset: 0; z-index: 2; overflow: hidden; background: #0b0b0b; pointer-events: none; }
.pup img, .pup video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* crop of Steve's baked files (v2/steve-framing.json via tools/bake_picks.py): --op desktop, --op-t tablet and
   small laptop (<= 1100 px), --op-m phone (<= 640 px). Only on framed files, so unframed layers keep the box's own rule. */
.pup img[style*="--op"], .pup video[style*="--op"] { object-position: var(--op); }
@media (max-width: 1100px) { .pup img[style*="--op-t"], .pup video[style*="--op-t"] { object-position: var(--op-t); } }
@media (max-width: 640px) { .pup img[style*="--op-m"], .pup video[style*="--op-m"] { object-position: var(--op-m); } }
/* first-screen film (02.11, F1-bis): its poster is a <picture> in the HTML (tools/bake_picks.py poster_picture), under
   the <video>. Same file and crop as the poster v2-upload.js gives the film, which covers it once it has a frame.
   It is drawn exactly like the <video>: the pages' rules for the box's own photo (.p-hero .big img height and crop,
   .hero-media img animation, .d2-bleed__img img…) never reach a film, so they must not reach its poster (!important).
   The crop mirrors the .pup video rules above. Check: compare the layer with and without its <video> (0 % apart). */
.pup-poster { position: absolute; inset: 0; }
.pup-poster > img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important;
  object-fit: cover !important; object-position: 50% 50% !important; transform: none !important; filter: none !important;
  animation: none !important; transition: none !important; opacity: 1 !important; }
.pup-poster > img[style*="--op"] { object-position: var(--op) !important; }
@media (max-width: 1100px) { .pup-poster > img[style*="--op-t"] { object-position: var(--op-t) !important; } }
@media (max-width: 640px) { .pup-poster > img[style*="--op-m"] { object-position: var(--op-m) !important; } }
.pup-poster + video { position: relative; }
.pup.is-noprev { display: grid; place-items: center; padding: 24px; }
.pup.is-noprev img { display: none; }
.pup.is-noprev p { margin: 0; max-width: 24em; color: rgba(255,255,255,.8); font: 500 14px/1.45 Manrope, system-ui, sans-serif; text-align: center; }
.pup.is-plouf { animation: pup-plouf .62s cubic-bezier(.2,.9,.25,1) both; }
.pup.is-plouf::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 3px var(--red, #e93942); animation: pup-ring .9s ease-out both; }
@keyframes pup-plouf {
  0% { opacity: 0; transform: scale(1.07); filter: blur(6px); }
  55% { opacity: 1; transform: scale(.985); filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes pup-ring { 0% { opacity: 1; } 100% { opacity: 0; } }

/* 2 to 4 files on one image = panels side by side (each cropped to fill), like the site's film triptychs.
   One formula for both looks, so « Fondu » <-> « Net » glides: --f = share of a panel laid over the previous one
   (its left edge fades in, a true cross-fade, nothing darkens), --g = gap. Panel width w = (100% - (n-1)g) / (n - (n-1)f),
   left = i · (w(1-f) + g). Fondu: f = .18 (2 panels: .24), no gap: wider fades ghost the faces. Net: no overlap, 3 px gap on black (the site's tri layout). */
@property --f { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --g { syntax: "<length>"; inherits: true; initial-value: 0px; }
.pup--multi { --f: 0; --g: 3px; transition: --f .6s cubic-bezier(.2,.8,.2,1), --g .6s cubic-bezier(.2,.8,.2,1); }
.pup--multi[data-look="fondu"] { --f: .18; --g: 0px; }
.pup--multi[data-n="2"][data-look="fondu"] { --f: .24; }
.pup__p {
  --w: calc((100% - (var(--n) - 1) * var(--g)) / (var(--n) - (var(--n) - 1) * var(--f)));
  position: absolute; top: 0; bottom: 0; width: var(--w); left: calc(var(--i) * (var(--w) * (1 - var(--f)) + var(--g)));
  overflow: hidden; background: #0b0b0b;
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.16) calc(var(--f) * 25%), rgba(0,0,0,.5) calc(var(--f) * 50%), rgba(0,0,0,.84) calc(var(--f) * 75%), #000 calc(var(--f) * 100%));
  mask-image: linear-gradient(to right, rgba(0,0,0,0) 0, rgba(0,0,0,.16) calc(var(--f) * 25%), rgba(0,0,0,.5) calc(var(--f) * 50%), rgba(0,0,0,.84) calc(var(--f) * 75%), #000 calc(var(--f) * 100%));
}
.pup__p:first-child { -webkit-mask-image: none; mask-image: none; }
.pup__p.is-noprev { display: grid; place-items: center; padding: 12px; }
.pup__p.is-noprev img { display: none; }
.pup__p.is-noprev p { margin: 0; color: rgba(255,255,255,.8); font: 500 12px/1.4 Manrope, system-ui, sans-serif; text-align: center; }
/* the group arrives panel after panel */
.pup--multi.is-plouf { animation: none; }
.pup--multi.is-plouf .pup__p { animation: pup-pane .7s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes pup-pane {
  0% { opacity: 0; transform: translateY(14px) scale(1.04); filter: blur(5px); }
  60% { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: none; }
}

/* the pill of predefined photos makes no sense once the client's file sits there */
.pup-has > .psel { display: none; }


/* home: a photo of Steve over the opening leaves nothing to pause (his film keeps the button, v2-upload.js) */
.hero-frame.pup-has:not(:has(> .hero-media > .pup video)) .vid-toggle { visibility: hidden; }