/* ============================================================
   DP TRAINING — site layout (Direction A · Plein Impact)
   Built on the DP Training design-system tokens. Composes the
   DS React components; this file carries page/section layout only.
   ============================================================ */

html { overflow-x: hidden; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; background: var(--surface-page); color: var(--text-primary); overflow-x: hidden; }
img { display: block; max-width: 100%; }
/* The page is black throughout and photography keeps its colour: the skin,
   the gym lights and the weights are the only warmth on the page, and they
   carry it against the monochrome identity rather than competing with it. */
img { filter: contrast(1.05) saturate(1.03); }
a { color: inherit; }
.site-container { width: 100%; max-width: var(--container-xl); margin-inline: auto; padding-inline: var(--space-8); }
section { scroll-margin-top: 84px; }
.u-accent { color: var(--white); font-style: italic; }

/* ---------------------------------------------------------- NAV */
.nav { position: fixed; inset: 0 0 auto; z-index: var(--z-sticky);
  transition: background var(--dur-base), backdrop-filter var(--dur-base), border-color var(--dur-base),
    transform var(--dur-slow) var(--ease-out);
  border-bottom: 1px solid transparent; }
.nav--hidden { transform: translateY(-100%); }
.nav--solid { background: rgba(10,10,10,.82); backdrop-filter: var(--blur-glass); border-bottom-color: var(--border-subtle); }
.nav__inner { display: flex; align-items: center; justify-content: space-between; height: 76px; gap: 24px; }
.nav__logo { display: inline-flex; }
.nav__logo img { height: 46px; width: auto; }
.nav__links { display: flex; gap: 30px; }
.nav__link { position: relative; font-family: var(--font-sans); font-weight: 600; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase; color: var(--text-secondary); text-decoration: none;
  transition: color var(--dur-fast); padding: 4px 0; }
.nav__link:hover { color: var(--text-primary); }
.nav__link.is-active { color: var(--text-primary); }
.nav__link.is-active::after { content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 2px;
  background: var(--white); transform: skewX(var(--slant-deg)); }
.nav__actions { display: flex; align-items: center; gap: 12px; }
.nav__burger { display: none; }
.nav__drawer { display: flex; flex-direction: column; gap: 4px; padding: 12px 32px 22px;
  background: rgba(10,10,10,.96); backdrop-filter: var(--blur-glass); border-bottom: 1px solid var(--border-subtle); }
.nav__drawer-link { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 24px;
  color: var(--text-primary); text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--border-subtle); }
.nav__drawer-link.is-active { color: var(--white); }

/* ---------------------------------------------------------- HERO (home) */
/* 100vh on iOS measures the viewport with the browser chrome *retracted*, so
   the bottom of the hero sits under the address bar until you scroll. svh is
   the small viewport — chrome visible — which is the one that must fit.
   The vh line stays first as the fallback for browsers without svh. */
.hero { position: relative; min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; padding-top: 120px; }
.hero__bg { position: absolute; inset: 0; z-index: 0; }
/* The source is a 2:3 portrait; on a landscape viewport it crops hard, so the
   position is tuned to keep the coach's face in frame. */
.hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 20%;
  transform: translate3d(0, var(--hero-py, 0px), 0) scale(1.16); transform-origin: 56% 22%; }
.hero__bg::before { content: ""; position: absolute; inset: 0; background: var(--grad-hero); opacity: .45; }
.hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(95deg, rgba(8,8,8,.94) 0%, rgba(8,8,8,.66) 34%, rgba(8,8,8,.08) 66%, rgba(8,8,8,.32) 100%),
             linear-gradient(0deg, rgba(8,8,8,.85) 0%, rgba(8,8,8,0) 40%); }
/* Mesh gradient: sits between the photo and its scrims. Soft-light keeps the
   photograph's own values and only moves the light across it. */
.hero__mesh { position: absolute; inset: 0; z-index: 0; pointer-events: none;
  mix-blend-mode: soft-light; opacity: .55; }
.meshgrad__canvas { width: 100%; height: 100%; display: block; }

.hero__inner { position: relative; z-index: 1; padding-bottom: 56px; }
.hero__eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-sans); font-weight: 700;
  text-transform: uppercase; letter-spacing: .14em; font-size: 13px; color: var(--brand-300); margin-bottom: 22px; white-space: nowrap; }
/* Frosted pill around the eyebrow. It stays on one line — wrapped, it grows
   wide enough to cover the coach's face on a phone — so the type shrinks
   instead on narrow viewports. */
.hero__eyebrow--glass { color: rgba(255,255,255,.9); padding: 9px 16px; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.15); background: rgba(255,255,255,.05); backdrop-filter: blur(12px); }
@media (max-width: 480px) {
  .hero__eyebrow--glass { padding: 7px 13px; gap: 9px; font-size: 10px; letter-spacing: .1em; }
  .hero__eyebrow--glass .hero__slash { width: 20px; height: 2px; }
}
.hero__slash { width: 30px; height: 3px; background: var(--white); transform: skewX(var(--slant-deg)); display: inline-block; }
.hero__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.015em;
  line-height: .86; margin: 0; font-size: clamp(52px, 8vw, 96px); text-shadow: 0 4px 40px rgba(8,8,8,.45); text-wrap: balance; }
.hero__title em { font-style: italic; color: var(--white); }
.hero__lead { font-family: var(--font-sans); font-size: clamp(16px, 1.4vw, 20px); line-height: 1.6;
  color: var(--text-secondary); max-width: 48ch; margin: 26px 0 34px; text-shadow: 0 1px 18px rgba(8,8,8,.7); text-wrap: pretty; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero__stats { position: relative; z-index: 1; display: flex; align-items: center; gap: 28px; padding: 26px 32px;
  border-top: 1px solid var(--border-subtle); background: linear-gradient(180deg, rgba(10,10,10,0), rgba(10,10,10,.5)); }
.hstat__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(36px, 4vw, 56px); line-height: .9; color: #fff; }
.hstat__s { color: var(--ink-400); font-size: .55em; }
.hstat__l { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  font-size: 12px; color: var(--ink-200); margin-top: 4px; }
.hero__div { width: 1px; height: 46px; background: var(--border-default); }
.scrollcue { position: absolute; left: 50%; bottom: 116px; z-index: 1; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--text-muted);
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; pointer-events: none; }
.scrollcue__line { width: 1px; height: 38px; background: linear-gradient(var(--white), transparent); animation: cueDrop 1.8s var(--ease-out) infinite; }
@keyframes cueDrop { 0% { transform: scaleY(.2); transform-origin: top; opacity: 0; } 40% { opacity: 1; } 100% { transform: scaleY(1); transform-origin: top; opacity: 0; } }

/* Rotating seal — the CSS stand-in for the shader's pulsing border. A conic
   sweep behind a blur reads the same at this size for none of the GPU cost. */
.heroseal { position: absolute; right: 34px; bottom: 34px; z-index: 1; width: 92px; height: 92px;
  display: grid; place-items: center; pointer-events: none; }
.heroseal__ring { width: 56px; height: 56px; border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255,255,255,0) 0deg, rgba(255,255,255,.85) 70deg,
              rgba(255,255,255,.15) 150deg, rgba(255,255,255,.7) 250deg, rgba(255,255,255,0) 360deg);
  filter: blur(1.5px); animation: sealSpin 6s linear infinite; }
.heroseal__ring::after { content: ""; position: absolute; inset: 50% auto auto 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%); border-radius: 50%;
  background: var(--surface-page); box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
.heroseal__text { position: absolute; inset: 0; width: 100%; height: 100%;
  animation: sealSpin 26s linear infinite reverse; }
.heroseal__text text { font-family: var(--font-sans); font-weight: 600; font-size: 9px;
  letter-spacing: .18em; text-transform: uppercase; fill: rgba(255,255,255,.7); }
@keyframes sealSpin { to { transform: rotate(360deg); } }
@media (max-width: 1000px) { .heroseal { display: none; } }
@media (prefers-reduced-motion: reduce) { .heroseal__ring, .heroseal__text { animation: none; } }

/* ---------------------------------------------------------- SECTIONS */
.section { padding-block: clamp(64px, 9vw, 120px); position: relative; }
.section--raised { background: var(--surface-raised); }
.prog-grid, .offer-grid, .review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 52px; }
.offer-grid { align-items: start; }

/* coach / about */
.coach { background: var(--surface-raised); position: relative; }
.coach__inner { display: grid; grid-template-columns: .85fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.coach__media { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/5; }
.coach__media img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.coach__media > span { position: absolute; left: 18px; bottom: 18px; z-index: 2; }
.coach__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(8,8,8,.5)); }
.coach__frame { position: absolute; inset: 14px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); z-index: 2; pointer-events: none; }
.coach__points { list-style: none; margin: 28px 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.coach__points li { display: flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-size: 16px; color: var(--text-secondary); }
.coach__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none;
  border-radius: var(--radius-sm); background: rgba(255,255,255,.07); color: var(--white); font-size: 21px; }

/* résultats / KPI band */
.results { position: relative; background: var(--surface-page); overflow: hidden; }
.results__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 52px; }
.kpi { padding: 30px 26px; border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); background: var(--surface-card);
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.kpi:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.28); box-shadow: var(--glow-brand-sm); }
.kpi__v { font-family: var(--font-display); font-weight: 800; font-size: clamp(40px, 5vw, 64px); line-height: .9; color: #fff; }
.kpi__v span { color: var(--ink-400); }
.kpi__l { font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-secondary); margin-top: 8px; }

/* reviews */
.reviews { background: var(--surface-raised); }
.review { display: flex; flex-direction: column; gap: 16px; background: var(--surface-card); border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); padding: 28px; transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base), border-color var(--dur-base); }
.review:hover { transform: translateY(-4px); border-color: rgba(255,255,255,.24); box-shadow: var(--glow-brand-sm); }
.review__stars { display: flex; gap: 3px; color: var(--white); font-size: 18px; }
.review__stars svg { fill: currentColor; }
.review__text { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; color: var(--text-primary); margin: 0; text-wrap: pretty; }
.review__who { display: flex; align-items: center; gap: 13px; margin-top: auto; }
.review__name { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 17px; margin-bottom: 5px; }

/* ---------------------------------------------------------- SUB-PAGE HEADER */
.phead { position: relative; padding: 160px 0 64px; overflow: hidden; border-bottom: 1px solid var(--border-subtle); }
.phead__bg { position: absolute; inset: 0; z-index: 0; }
.phead__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; opacity: .68; transform: scale(1.1); }
.phead__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,8,.42), rgba(8,8,8,.9)), linear-gradient(95deg, rgba(8,8,8,.78), rgba(8,8,8,.2) 60%); }
.phead__in { position: relative; z-index: 1; }
.phead__crumb { font-family: var(--font-sans); font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  font-size: 12px; color: var(--brand-300); margin-bottom: 16px; display: flex; gap: 8px; align-items: center; }
.phead__crumb a { text-decoration: none; color: var(--text-muted); }
.phead__crumb a:hover { color: var(--text-primary); }
.phead__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  line-height: .9; margin: 0; font-size: clamp(46px, 7vw, 88px); text-wrap: balance; }
.phead__title em { font-style: italic; color: var(--white); }
.phead__sub { font-family: var(--font-sans); font-size: clamp(15px, 1.3vw, 19px); color: var(--text-secondary); max-width: 56ch; margin: 20px 0 0; line-height: 1.6; text-wrap: pretty; }

/* ---------------------------------------------------------- PROGRAMMES (detail) */
.progdetail { display: flex; flex-direction: column; gap: 40px; margin-top: 52px; }
.progrow { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-card); }
.progrow:nth-child(even) .progrow__media { order: 2; }
.progrow__media { position: relative; min-height: 360px; }
.progrow__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.progrow__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(20,24,30,.6)); }
.progrow__tag { position: absolute; left: 18px; top: 18px; z-index: 2; }
.progrow__body { padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.progrow__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(30px, 3.5vw, 46px); line-height: .95; margin: 0; text-wrap: balance; }
.progrow__title em { font-style: italic; color: var(--white); }
.progrow__desc { font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.65; margin: 0; text-wrap: pretty; }
.progrow__meta { display: flex; flex-wrap: wrap; gap: 22px; margin: 6px 0 4px; }
.progrow__meta span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-weight: 600; font-size: 14px; color: var(--text-secondary); }
.progrow__meta svg { color: var(--ink-300); font-size: 18px; }
.progrow__list { list-style: none; padding: 0; margin: 4px 0 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.progrow__list li { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14.5px; color: var(--text-secondary); }
.progrow__list svg { color: var(--success-500); font-size: 16px; flex: none; }

/* ---------------------------------------------------------- FAQ */
.faq { max-width: var(--container-md); margin: 52px auto 0; display: flex; flex-direction: column; gap: 12px; }
.faqitem { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--surface-card); overflow: hidden;
  transition: border-color var(--dur-base), box-shadow var(--dur-base); }
.faqitem.is-open { border-color: rgba(255,255,255,.28); box-shadow: var(--glow-brand-sm); }
.faqitem__q { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; text-align: left;
  padding: 22px 24px; background: none; border: 0; cursor: pointer; color: var(--text-primary);
  font-family: var(--font-display); font-weight: 700; text-transform: uppercase; font-size: 19px; letter-spacing: .01em; }
.faqitem__q:hover { color: var(--white); }
.faqitem__pm { flex: none; width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid var(--border-default);
  border-radius: var(--radius-sm); color: var(--white); transition: transform var(--dur-base) var(--ease-out), background var(--dur-base); font-size: 18px; }
.faqitem.is-open .faqitem__pm { transform: rotate(180deg); background: rgba(255,255,255,.12); }
.faqitem__a { max-height: 0; overflow: hidden; transition: max-height var(--dur-slow) var(--ease-out); }
.faqitem__a-in { padding: 0 24px 24px; font-family: var(--font-sans); color: var(--text-secondary); line-height: 1.7; }

/* ---------------------------------------------------------- GALERIE */
.gallery { columns: 3; column-gap: 18px; margin-top: 52px; }
.gallery__item { break-inside: avoid; margin-bottom: 18px; position: relative; border-radius: var(--radius-md); overflow: hidden;
  cursor: pointer; border: 1px solid var(--border-subtle); }
.gallery__item img { width: 100%; transition: transform var(--dur-slow) var(--ease-out), filter var(--dur-base); filter: contrast(1.05) saturate(1.03); }
.gallery__item:hover img { transform: scale(1.05); }
.gallery__item::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(8,8,8,.55));
  opacity: 0; transition: opacity var(--dur-base); }
.gallery__item:hover::after { opacity: 1; }
.gallery__plus { position: absolute; right: 14px; bottom: 14px; z-index: 2; width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,.95); color: var(--ink-950); display: grid; place-items: center; font-size: 22px; opacity: 0;
  transform: translateY(8px); transition: opacity var(--dur-base), transform var(--dur-base) var(--ease-out); }
.gallery__item:hover .gallery__plus { opacity: 1; transform: none; }
/* lightbox */
.lightbox { position: fixed; inset: 0; z-index: var(--z-modal); background: rgba(8,8,8,.92); backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center; padding: 5vh 5vw; opacity: 0; pointer-events: none; transition: opacity var(--dur-base); }
.lightbox.is-on { opacity: 1; pointer-events: auto; }
.lightbox img { max-width: 100%; max-height: 90vh; border-radius: var(--radius-md); box-shadow: var(--shadow-dark-lg); }
.lightbox__x, .lightbox__nav { position: absolute; background: rgba(255,255,255,.08); border: 1px solid var(--border-default);
  color: #fff; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; cursor: pointer; font-size: 22px;
  transition: background var(--dur-fast); }
.lightbox__x:hover, .lightbox__nav:hover { background: var(--white); color: var(--ink-950); }
.lightbox__x { top: 24px; right: 24px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); }
.lightbox__nav--prev { left: 24px; }
.lightbox__nav--next { right: 24px; }

/* ---------------------------------------------------------- INSTAGRAM strip */
.igstrip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-top: 40px; }
.igstrip__item { position: relative; aspect-ratio: 1; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--border-subtle); }
.igstrip__item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.igstrip__item:hover img { transform: scale(1.06); }
.igstrip__item::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,0); transition: background var(--dur-base); }
.igstrip__item:hover::after { background: rgba(255,255,255,.14); }

/* ---------------------------------------------------------- CONTACT */
.contact { position: relative; background: var(--grad-hero); }
.contact__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; position: relative; z-index: 1; }
.contact__info { list-style: none; margin: 30px 0 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.contact__info li { display: flex; align-items: center; gap: 14px; font-family: var(--font-sans); font-size: 16px; color: var(--text-secondary); }
.contact__info a { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.contact__info a:hover { color: var(--white); }
.contact__ic { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--ink-950); font-size: 19px; flex: none; }
.contact__card { background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-xl);
  padding: 34px; box-shadow: var(--shadow-dark-lg); }
.contact__form { display: flex; flex-direction: column; gap: 16px; }
.contact__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact__note { text-align: center; font-family: var(--font-sans); font-size: 12.5px; color: var(--text-secondary); margin: 2px 0 0; }
.contact__success { text-align: center; padding: 30px 0; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.contact__check { display: inline-flex; align-items: center; justify-content: center; width: 66px; height: 66px; border-radius: 50%;
  background: rgba(45,190,108,.16); color: var(--success-500); font-size: 30px; }
.contact__success h3 { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: 28px; margin: 6px 0 0; }
.contact__success p { font-family: var(--font-sans); color: var(--text-secondary); margin: 0 0 8px; max-width: 38ch; }

/* big CTA band */
.ctaband { position: relative; background: var(--surface-raised); text-align: center; overflow: hidden; }
.ctaband__in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 26px; }
.ctaband__title { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; letter-spacing: -.01em;
  line-height: .92; margin: 0; font-size: clamp(40px, 6vw, 88px); text-wrap: balance; }
.ctaband__title em { font-style: italic; color: var(--white); }

/* ---------------------------------------------------------- FOOTER */
.footer { background: var(--ink-950); border-top: 1px solid var(--border-subtle); padding-top: 64px; }
.footer__inner { display: grid; grid-template-columns: 1.5fr 1fr 1.2fr; gap: 48px; padding-bottom: 48px; }
.footer__brand img { height: 64px; margin-bottom: 18px; }
.footer__brand p { font-family: var(--font-sans); color: var(--ink-300); font-size: 14px; line-height: 1.6; margin: 0 0 18px; max-width: 34ch; text-wrap: pretty; }
.footer__socials { display: flex; gap: 10px; }
.footer__socials a { width: 40px; height: 40px; border-radius: var(--radius-sm); border: 1px solid var(--border-default);
  display: grid; place-items: center; color: var(--text-secondary); font-size: 18px; transition: all var(--dur-fast); text-decoration: none; }
.footer__socials a:hover { color: #fff; border-color: var(--white); background: rgba(255,255,255,.14); transform: translateY(-2px); }
.footer__col h4 { font-family: var(--font-display); font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  font-size: 15px; color: var(--text-primary); margin: 0 0 16px; }
.footer__col a { display: flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14px;
  color: var(--ink-300); text-decoration: none; padding: 6px 0; transition: color var(--dur-fast); }
.footer__col a:hover { color: var(--white); }
.footer__bar { display: flex; justify-content: space-between; padding-block: 22px; border-top: 1px solid var(--border-subtle);
  font-family: var(--font-sans); font-size: 12.5px; color: var(--ink-300); }

/* ---------------------------------------------------------- DS overrides */
.dpt-offer__period { white-space: nowrap; }
.dpt-sec--center .dpt-sec__sub { margin-inline: auto; }

/* ---------------------------------------------------------- ANIMATIONS */
@media (prefers-reduced-motion: no-preference) {
  [data-reveal] { opacity: 0; transition: opacity .85s var(--ease-out), transform .85s var(--ease-out), filter .85s var(--ease-out), clip-path .9s var(--ease-out); will-change: transform, opacity; }
  [data-reveal="up"]    { transform: translateY(42px); }
  [data-reveal="rise"]  { transform: translateY(66px); }
  [data-reveal="left"]  { transform: translateX(-64px); }
  [data-reveal="right"] { transform: translateX(64px); }
  [data-reveal="scale"] { transform: translateY(34px) scale(.92); }
  [data-reveal="blur"]  { transform: translateY(24px); filter: blur(14px); }
  [data-reveal="pop"]   { transform: translateY(40px) scale(.94); }
  [data-reveal].is-in { opacity: 1; transform: none; filter: none; }
  [data-reveal="pop"].is-in { transition-timing-function: var(--ease-punch); }

  /* Headlines: each word slides up from behind its own edge. The wrapper
     stays visible so the mask, not a fade, does the reveal. */
  [data-reveal="words"] { opacity: 1; }
  .wsplit { display: inline-block; overflow: hidden; vertical-align: bottom;
    padding-bottom: .08em; margin-bottom: -.08em; }
  .wsplit__i { display: inline-block; transform: translateY(105%);
    transition: transform .95s var(--ease-out); will-change: transform; }
  [data-reveal="words"].is-in .wsplit__i { transform: none; }

  /* Media: wipe open from the bottom edge instead of sliding in. */
  [data-reveal="unmask"] { opacity: 1; clip-path: inset(0 0 100% 0); }
  [data-reveal="unmask"].is-in { clip-path: inset(0 0 0 0); }

  /* base parallax scale so drift never reveals an edge */
  .coach__media img, .dpt-prog__media img, .gallery__item img, .progrow__media img { transform: scale(1.12); }

  /* filter belongs in will-change: blurring a block this large repaints it
     every frame otherwise, which is what made the effect expensive enough to
     be worth weakening. Promoted to its own layer, it can keep full strength. */
  .hero__inner { will-change: transform, opacity, filter; }
  .hero__eyebrow, .hero__title, .hero__lead, .hero__cta, .hero__stats {
    opacity: 0; transform: translateY(30px); animation: heroIn .85s var(--ease-out) forwards; }
  .hero__eyebrow { animation-delay: .1s; }
  .hero__title   { animation-delay: .22s; }
  .hero__lead    { animation-delay: .44s; }
  .hero__cta     { animation-delay: .58s; }
  .hero__stats   { animation-delay: .7s; }
}
@keyframes heroIn { to { opacity: 1; transform: none; } }

/* scroll progress bar */
.scrollprog { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: calc(var(--z-sticky) + 5);
  background: linear-gradient(90deg, var(--white), var(--ink-500)); transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 12px rgba(255,255,255,.35); pointer-events: none; }

/* ---------------------------------------------------------- RESPONSIVE */
@media (max-width: 1000px) {
  .prog-grid, .offer-grid, .review-grid, .results__grid { grid-template-columns: 1fr 1fr; }
  .gallery { columns: 2; }
  .igstrip { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .nav__links { display: none; }
  .nav__burger { display: inline-flex; }
  .nav--open .nav__drawer { display: flex; }
  .prog-grid, .offer-grid, .review-grid, .results__grid { grid-template-columns: 1fr; }
  .coach__inner, .contact__inner, .footer__inner { grid-template-columns: 1fr; gap: 40px; }
  .coach__media { aspect-ratio: 4/4; }
  .footer__bar { flex-direction: column; gap: 8px; }
  /* Three stats, one row, always. Equal columns beat flex here: the labels
     have very different lengths ("Ans d'expérience" vs "Clients accompagnés")
     and a grid keeps the numbers on a shared baseline grid instead of letting
     the widest label push the others around. The hairline dividers are
     dropped — at this width the column gap already separates them. */
  .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr);
    align-items: start; gap: 0 14px; padding: 15px 0 18px; }
  /* Pull the whole block up: on a phone the hero has to hold an eyebrow, a
     display headline, a paragraph, two buttons and three stats inside one
     screen. These are the paddings that were pushing the stats off. */
  /* Everything in the hero is sized to fit one small viewport with room to
     spare: an iPhone Pro Max in Safari shows roughly 780px, and the block has
     to hold an eyebrow, a display headline, a paragraph, two buttons and
     three stats without the last line touching the bottom edge. */
  .hero { padding-top: 84px; }
  .hero__inner { padding-bottom: 20px; }
  .hero__eyebrow { margin-bottom: 14px; }
  .hero__title { font-size: clamp(40px, 11vw, 62px); }
  .hero__lead { font-size: 15px; line-height: 1.5; margin: 14px 0 20px; }
  .hero__cta { gap: 10px; }
  .hero__cta .dpt-btn { --_pad-y: 13px; }
  /* The cue sat on top of the buttons at this width, and a phone user does
     not need to be told the page scrolls. */
  .scrollcue { display: none; }
  .hero__div { display: none; }
  .hstat__v { font-size: clamp(26px, 7.5vw, 40px); }
  .hstat__l { font-size: 10px; letter-spacing: .06em; line-height: 1.25; margin-top: 5px; }
  .progrow { grid-template-columns: 1fr; }
  .progrow:nth-child(even) .progrow__media { order: 0; }
  .progrow__media { min-height: 260px; }
  .progrow__list { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .gallery { columns: 1; }
  .igstrip { grid-template-columns: repeat(2, 1fr); }
  .contact__row { grid-template-columns: 1fr; }
  .site-container { padding-inline: var(--space-5); }
}

/* ---------------------------------------------------------- FOCUS & A11Y */
/* Explicit focus-visible for all custom interactive elements */
.nav__link:focus-visible,
.nav__drawer-link:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 2px;
}
.faqitem__q:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: -2px;
  border-radius: var(--radius-md);
}
.igstrip__item:focus-visible,
.gallery__item:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 2px;
}
.footer__socials a:focus-visible,
.footer__col a:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ---------------------------------------------------------- TOUCH TARGETS */
.nav__link { min-height: 44px; display: inline-flex; align-items: center; }
.nav__drawer-link { min-height: 44px; display: flex; align-items: center; }
.igstrip__item, .gallery__item { min-height: 120px; }

/* ---------------------------------------------------------- ENHANCED MOTION */

/* Nav drawer: slide-in from top */
@keyframes drawerIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: none; }
}
.nav__drawer {
  animation: drawerIn 0.22s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Button press feedback */
.dpt-btn:active:not([disabled]) {
  transform: scale(0.96) !important;
  transition-duration: 80ms !important;
}

/* Lightbox: image scales in with blur */
@keyframes lbImgIn {
  from { opacity: 0; transform: scale(0.86); filter: blur(10px); }
  to   { opacity: 1; transform: none;        filter: blur(0); }
}
.lightbox.is-on img {
  animation: lbImgIn 0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

/* Contact success: card choreography */
@keyframes successIn {
  from { opacity: 0; transform: scale(0.92) translateY(18px); }
  to   { opacity: 1; transform: none; }
}
@keyframes checkBounce {
  0%   { transform: scale(0) rotate(-20deg); opacity: 0; }
  65%  { transform: scale(1.18) rotate(6deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}
.contact__success {
  animation: successIn 0.48s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.contact__check {
  animation: checkBounce 0.58s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

/* Hero inner: will-change already set by JS — add base transition for filter */
.hero__inner { transition: filter 0.05s linear; }

/* Reduced motion: cut all new animations instantly */
@media (prefers-reduced-motion: reduce) {
  .nav__drawer { animation: none; opacity: 1; transform: none; }
  .lightbox.is-on img { animation: none; opacity: 1; transform: none; filter: none; }
  .contact__success { animation: none; opacity: 1; transform: none; }
  .contact__check { animation: none; opacity: 1; transform: none; }
  .dpt-btn:active { transform: none !important; }
  .hero__inner { filter: none !important; transition: none; }
}