/* ─────────────────────────────────────────────────────────────
   Giolia Pilates · Strasbourg — feuille de style
   Brun #2E1B0E · Brun terre #5D341C · Kaki #3D4A28 · Kaki clair #4A5630
   Beige #F5EFD8 (fond) · Beige profond #ECE4C5
   Typo: Unbounded (200, 300, 400, 500, 600, 700)
   ───────────────────────────────────────────────────────────── */

:root {
  --c-brown:        #2E1B0E;
  --c-brown-light:  #5D341C;
  --c-brown-warm:   #854D2E;
  --c-khaki:        #3D4A28;
  --c-khaki-light:  #4A5630;
  --c-beige:        #F5EFD8;
  --c-beige-deep:   #ECE4C5;
  --c-cream:        #FFFDED;
  --c-brown-soft:   rgba(46, 27, 14, 0.08);
  --c-brown-line:   rgba(46, 27, 14, 0.18);
  --c-lueur:        #D9A066;
  --c-lueur-light:  #FBE7CF;

  --max:    1440px;
  --gutter: clamp(20px, 4vw, 56px);

  --t-display: clamp(40px, 7vw, 110px);
  --t-h1:      clamp(32px, 5vw, 76px);
  --t-h2:      clamp(24px, 2.9vw, 44px);
  --t-h3:      clamp(18px, 1.5vw, 24px);
  --t-body:    clamp(15px, 1.05vw, 17px);
  --t-small:   12px;

  --ease:   cubic-bezier(.2,.8,.2,1);
  --easeIO: cubic-bezier(.76,0,.24,1);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-beige);
  color: var(--c-brown);
  font-family: 'Unbounded', system-ui, sans-serif;
  font-weight: 300;
  font-size: var(--t-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

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

a {
  color: inherit;
  text-decoration: none;
  transition: opacity .25s ease, color .25s ease;
}
a:hover { opacity: .65; }

/* Skip-link pour l'accessibilité */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Bandeau offre de lancement (page Tarifs) */
.tarifs-offer {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 32px; padding: 14px 20px;
  background: var(--c-beige-deep); border: 1px solid var(--c-brown-line); border-radius: 12px;
  font-size: 14px; font-weight: 300; color: var(--c-khaki);
}
.tarifs-offer b { font-weight: 500; color: var(--c-brown); }
.tarifs-offer a {
  margin-left: auto; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 500; color: var(--c-brown);
  border-bottom: 1px solid var(--c-brown-line); padding-bottom: 2px; white-space: nowrap;
}
@media (max-width: 560px) {
  .tarifs-offer a { margin-left: 0; }
}
.skip-link {
  position: absolute; top: -40px; left: 16px;
  background: var(--c-brown); color: var(--c-cream); padding: 10px 16px;
  font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  z-index: 9999; transition: top .2s ease;
}
.skip-link:focus { top: 16px; opacity: 1; }

/* ───── Layout helpers ───── */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}

.eyebrow {
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-khaki);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow::before {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  display: inline-block;
}

.hr-soft { border: 0; border-top: 1px solid var(--c-brown-line); margin: 0; }

/* ───── Header ───── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 239, 216, 0.94);
  backdrop-filter: saturate(140%) blur(8px);
  -webkit-backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid var(--c-brown-line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 18px;
  padding-bottom: 18px;
  gap: 32px;
}
.brandmark {
  display: flex;
  align-items: center;
  gap: 14px;
}
.brandmark svg { height: 26px; width: auto; fill: var(--c-brown); }
.brandmark .city {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-khaki);
  font-weight: 400;
  border-left: 1px solid var(--c-brown-line);
  padding-left: 14px;
}
.nav {
  display: flex;
  align-items: center;
  gap: 36px;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.06em;
}
.nav a { color: var(--c-brown); }
.nav-link {
  position: relative;
  padding-bottom: 2px;
}
.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--c-brown);
  transition: width .35s var(--ease);
}
.nav-link:hover { opacity: 1; }
.nav-link:hover::after,
.nav-link[aria-current="page"]::after { width: 100%; }
/* Header CTA — compact liquid metal pill */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--c-cream) !important;
  padding: 11px 22px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border: 0;
  border-radius: 999px;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.30),
    0 12px 8px 0 rgba(46, 27, 14, 0.04),
    0 6px 5px 0 rgba(46, 27, 14, 0.10),
    0 2px 3px 0 rgba(46, 27, 14, 0.14);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(133, 77, 46, 0.50) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(74, 86, 48, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255, 253, 237, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #3a2210 0%, #160c05 100%);
  z-index: -1;
  transition: filter 0.4s ease;
}
.nav-cta:hover {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.40),
    0 6px 4px 0 rgba(46, 27, 14, 0.08),
    0 3px 3px 0 rgba(46, 27, 14, 0.14),
    0 1px 2px 0 rgba(46, 27, 14, 0.20);
}
.nav-cta:hover::before { filter: brightness(1.18) saturate(1.05); }
.nav-cta:active {
  transform: translateY(1px) scale(0.97);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.50);
}

.nav-toggle {
  display: none;
  background: transparent; border: 0; padding: 6px 0;
  width: 32px; height: 32px; cursor: pointer;
}
.nav-toggle span {
  display: block; width: 24px; height: 1px; background: var(--c-brown);
  transition: transform .3s var(--ease), opacity .2s ease;
}
.nav-toggle span + span { margin-top: 7px; }

@media (max-width: 820px) {
  .nav-toggle { display: block; }
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 6px 24px 22px;
    background: rgba(245, 239, 216, 0.98);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-top: 1px solid var(--c-brown-line);
    box-shadow: 0 16px 28px rgba(46, 27, 14, 0.10);
    transform: translateY(-10px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .25s ease, transform .25s var(--ease), visibility .25s ease;
  }
  .site-header.nav-open .nav {
    transform: none;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  .nav .nav-link {
    display: block;
    padding: 14px 2px;
    font-size: 15px;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--c-brown-soft);
  }
  .nav .nav-cta { margin-top: 16px; align-self: flex-start; }
  .site-header.nav-open .nav-toggle span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
  .site-header.nav-open .nav-toggle span:nth-child(2) { transform: translateY(-4px) rotate(-45deg); }
}
@media (max-width: 560px) {
  .brandmark .city { display: none; }
}

/* ───── Hero ───── */
.hero {
  padding: clamp(28px, 3.5vw, 64px) 0 clamp(48px, 6vw, 96px);
  position: relative;
  overflow: hidden;
}

.hero > * { position: relative; z-index: 1; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: end;
}
.hero-display {
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: var(--t-display);
  line-height: 0.96;
  letter-spacing: -0.04em;
  color: var(--c-brown);
  margin: 0;
}
.hero-display em {
  font-style: italic;
  font-weight: 200;
  color: var(--c-brown-light);
}
.hero-side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 12px;
}
.hero-side p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.65;
  font-weight: 300;
  color: var(--c-khaki);
  margin: 0;
  max-width: 38ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
}
.hero-image {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  overflow: hidden;
  background: var(--c-beige-deep);
  border: 1px solid rgba(74, 86, 48, 0.45);
  --gx: -300px;
  --gy: -300px;
}

/* ─────────────────────────────────────────────────────────────
   Photo cursor-follow border glow.
   A radial gradient that follows the cursor, masked to a thin
   ring at the photo edge (mask-composite: exclude trick).
   - The gradient's bright core is at (var(--gx), var(--gy))
   - With JS, --gx/--gy track the cursor position relative to each photo
   - Default off-screen (-300px) so initial state has no glow
   - When cursor is near, only a portion of the ring lights up
   - Image inside is never affected (only the 3px ring shows)
   ───────────────────────────────────────────────────────────── */
.hero-image::before,
.course-photo::before,
.founder-portrait::before,
.cours-img::before,
.nutri-img::before,
.tile::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  background: radial-gradient(
    220px 220px at var(--gx) var(--gy),
    rgba(122, 139, 92, 1) 0%,
    rgba(122, 139, 92, 0.45) 22%,
    transparent 55%
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
          mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
          mask-composite: exclude;
}
/* Studio tiles use a brighter olive (dark studio bg) */
.tile::before {
  background: radial-gradient(
    220px 220px at var(--gx) var(--gy),
    rgba(180, 200, 135, 1) 0%,
    rgba(146, 165, 110, 0.50) 22%,
    transparent 55%
  );
}
.hero-image img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.85) contrast(1.02);
}
.hero-image::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(46,27,14,0) 60%, rgba(46,27,14,.12));
  pointer-events: none;
}

@media (max-width: 880px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-side { padding-bottom: 0; }
  .hero-image { aspect-ratio: 5 / 4; }
}

/* ─────────────────────────────────────────────────────────────
   Buttons — "liquid metal" treatment.
   - Pill-shape (border-radius: 999px)
   - Multi-layer floating shadow (deep at rest → tight on hover → flush on press)
   - Subtle warm gradient (radial highlights from brun warm + soft top sheen)
   - Spring easing on transforms (cubic-bezier(.34,1.56,.64,1))
   - Click ripple via JS (.ripple span injected on click)
   ───────────────────────────────────────────────────────────── */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 18px 32px;
  font-family: 'Unbounded', sans-serif;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  color: var(--c-cream);
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.30),
    0 36px 14px 0 rgba(46, 27, 14, 0.02),
    0 20px 12px 0 rgba(46, 27, 14, 0.08),
    0 9px 9px 0 rgba(46, 27, 14, 0.12),
    0 2px 5px 0 rgba(46, 27, 14, 0.18);
  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
    color 0.4s ease;
}

/* Metal core gradient: warm walnut feel (brun base + brun warm sheen + olive hint) */
.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(133, 77, 46, 0.50) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(74, 86, 48, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255, 253, 237, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #3a2210 0%, #160c05 100%);
  z-index: -1;
  transition: filter 0.45s ease, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Hover: brighter sheen, tighter shadow (button "comes closer") */
.btn:hover {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.40),
    0 12px 6px 0 rgba(46, 27, 14, 0.05),
    0 8px 5px 0 rgba(46, 27, 14, 0.10),
    0 4px 4px 0 rgba(46, 27, 14, 0.15),
    0 1px 2px 0 rgba(46, 27, 14, 0.22);
}
.btn:hover::before { filter: brightness(1.18) saturate(1.05); }

/* Active: pressed in (spring scale + inset shadow) */
.btn:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.45),
    inset 0 0 0 1px rgba(0, 0, 0, 0.50),
    0 1px 2px 0 rgba(46, 27, 14, 0.30);
}

.btn .arrow {
  font-size: 14px;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn:hover .arrow { transform: translateX(5px); }

/* Ghost: transparent on light bg, fills with metal on hover */
.btn-ghost {
  color: var(--c-brown);
  box-shadow:
    inset 0 0 0 1px rgba(46, 27, 14, 0.40),
    0 6px 8px 0 rgba(46, 27, 14, 0.04),
    0 2px 3px 0 rgba(46, 27, 14, 0.06);
}
.btn-ghost::before {
  background: transparent;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.btn-ghost:hover {
  color: var(--c-cream);
  box-shadow:
    inset 0 0 0 1px rgba(0, 0, 0, 0.40),
    0 12px 6px 0 rgba(46, 27, 14, 0.05),
    0 8px 5px 0 rgba(46, 27, 14, 0.10),
    0 4px 4px 0 rgba(46, 27, 14, 0.15),
    0 1px 2px 0 rgba(46, 27, 14, 0.22);
}
.btn-ghost:hover::before {
  opacity: 1;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(133, 77, 46, 0.50) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 100%, rgba(74, 86, 48, 0.18) 0%, transparent 65%),
    linear-gradient(180deg, rgba(255, 253, 237, 0.08) 0%, transparent 45%),
    linear-gradient(180deg, #3a2210 0%, #160c05 100%);
}

/* Light: cream button for use on dark surfaces (.studio, footer, .external-cta) */
.btn-light {
  color: var(--c-brown);
  box-shadow:
    inset 0 0 0 1px rgba(46, 27, 14, 0.18),
    0 24px 12px 0 rgba(0, 0, 0, 0.04),
    0 12px 8px 0 rgba(0, 0, 0, 0.08),
    0 6px 6px 0 rgba(0, 0, 0, 0.10),
    0 2px 3px 0 rgba(0, 0, 0, 0.14);
}
.btn-light::before {
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--c-cream) 0%, #ECE4C5 100%);
}
.btn-light:hover {
  box-shadow:
    inset 0 0 0 1px rgba(46, 27, 14, 0.28),
    0 8px 6px 0 rgba(0, 0, 0, 0.06),
    0 4px 4px 0 rgba(0, 0, 0, 0.10),
    0 1px 2px 0 rgba(0, 0, 0, 0.15);
}
.btn-light:hover::before { filter: brightness(0.97); }
.btn-light:active {
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.20),
    inset 0 0 0 1px rgba(46, 27, 14, 0.30),
    0 1px 2px 0 rgba(0, 0, 0, 0.10);
}

/* Click ripple */
.btn .ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 253, 237, 0.45) 0%, rgba(255, 253, 237, 0) 65%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: btn-ripple 0.6s ease-out forwards;
  z-index: 0;
}
.btn-light .ripple,
.btn-ghost:not(:hover) .ripple {
  background: radial-gradient(circle, rgba(46, 27, 14, 0.30) 0%, rgba(46, 27, 14, 0) 65%);
}
@keyframes btn-ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.65; }
  100% { transform: translate(-50%, -50%) scale(8);   opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn::before, .btn .arrow { transition-duration: 0.15s; }
  .btn:active { transform: none; }
  .btn .ripple { animation: none; display: none; }
}

/* ───── Hero meta strip ───── */
.opening-strip {
  margin-top: clamp(48px, 7vw, 96px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--c-brown-line);
  border-bottom: 1px solid var(--c-brown-line);
}
.opening-strip > div {
  padding: 22px 0;
  border-right: 1px solid var(--c-brown-line);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.opening-strip > div:last-child { border-right: 0; }
.opening-strip .k {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-khaki);
  font-weight: 400;
}
.opening-strip .v {
  font-size: 16px;
  font-weight: 400;
  color: var(--c-brown);
}
.opening-strip > div:not(:first-child) { padding-left: 22px; }
@media (max-width: 720px) {
  .opening-strip { grid-template-columns: repeat(2, 1fr); }
  .opening-strip > div:nth-child(2) { border-right: 0; }
  .opening-strip > div:nth-child(3),
  .opening-strip > div:nth-child(4) { border-top: 1px solid var(--c-brown-line); }
  .opening-strip > div:nth-child(odd) { padding-left: 0; }
  .opening-strip > div:nth-child(even) { padding-left: 22px; }
}

/* ───── Section base ───── */
section { padding: clamp(48px, 6.5vw, 100px) 0; }
.sec-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 80px);
}
.sec-head h2 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: var(--t-h2);
  line-height: 1.0;
  letter-spacing: -0.03em;
  color: var(--c-brown);
  margin: 0;
}
.sec-head h2 em {
  font-style: italic;
  font-weight: 200;
  color: var(--c-brown-light);
}
.sec-head p {
  font-size: 16px;
  font-weight: 300;
  color: var(--c-khaki);
  margin: 0;
  max-width: 48ch;
  line-height: 1.65;
}
@media (max-width: 760px) {
  .sec-head { grid-template-columns: 1fr; gap: 24px; }
}

/* ───── Section transitions (subtle wave, Giolia = vague) ─────
   Wave drawn as SVG background-image. URL-encoded for max browser compat. */
.manifest, .reservation, .prices, .nutri, .studio {
  position: relative;
}

/* TOP wave for beige-deep sections (manifest, nutri)
   ViewBox 0 0 1440 80, wave centered at y=40, amplitude ~30 (visible).
   Fill: ECE4C5 (beige-deep) */
.manifest::before, .nutri::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: clamp(40px, 4.5vw, 72px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2080%20L1440%2080%20L1440%2040%20C1080%2090%20720%20-10%20360%2040%20C180%2065%2090%2050%200%2040%20Z%22%20fill%3D%22%23ECE4C5%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}
/* BOTTOM wave for beige-deep sections */
.manifest::after, .nutri::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: clamp(40px, 4.5vw, 72px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20L1440%200%20L1440%2040%20C1080%20-10%20720%2090%20360%2040%20C180%2015%2090%2030%200%2040%20Z%22%20fill%3D%22%23ECE4C5%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* TOP wave for brown studio section. Fill: 2E1B0E (brown) */
.studio::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  height: clamp(40px, 4.5vw, 72px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%2080%20L1440%2080%20L1440%2040%20C1080%2090%20720%20-10%20360%2040%20C180%2065%2090%2050%200%2040%20Z%22%20fill%3D%22%232E1B0E%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}
.studio::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 100%;
  height: clamp(40px, 4.5vw, 72px);
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201440%2080%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20d%3D%22M0%200%20L1440%200%20L1440%2040%20C1080%20-10%20720%2090%20360%2040%20C180%2015%2090%2030%200%2040%20Z%22%20fill%3D%22%232E1B0E%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  pointer-events: none;
  z-index: 2;
}

/* ───── Manifeste ───── */
.manifest { background: var(--c-beige-deep); }
.manifest .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(48px, 6vw, 80px);
  max-width: 920px;
  margin: 0 auto;
}
.manifest-quote {
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: clamp(36px, 4.8vw, 68px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--c-brown);
  margin: 0;
}
.manifest-quote em {
  font-style: italic;
  font-weight: 200;
  color: var(--c-brown-light);
}
.manifest-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
  font-weight: 300;
  color: var(--c-khaki);
  font-size: 17px;
  line-height: 1.7;
  max-width: 56ch;
}
.manifest-body p { margin: 0; }
.manifest-sign {
  margin-top: 8px;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brown);
  font-weight: 500;
}

/* ───── Cours ───── */
.courses-list {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 96px);
}
.course-row {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
  padding: 0;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
.course-row:hover { opacity: 1; }
.course-row:nth-child(even) .course-photo { order: 2; }
.course-row:nth-child(even) .course-content { order: 1; text-align: right; align-items: flex-end; }
.course-photo {
  aspect-ratio: 4 / 3;
  width: 100%;
  position: relative;
  overflow: hidden;
  background: var(--c-beige-deep);
  border: 1px solid rgba(74, 86, 48, 0.45);
  --gx: -300px;
  --gy: -300px;
}
.course-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.4s var(--ease);
  filter: saturate(.9);
}
.course-row:hover .course-photo img { transform: scale(1.04); }
.course-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding: 0 clamp(8px, 2vw, 32px);
}
.course-title {
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 80px);
  letter-spacing: -0.025em;
  line-height: 0.95;
  color: var(--c-brown);
  margin: 0;
}
.course-desc {
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px);
  color: var(--c-khaki);
  line-height: 1.6;
  max-width: 36ch;
  margin: 0;
}
.course-meta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-khaki);
  font-weight: 500;
}
.course-cta {
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-brown);
  font-weight: 500;
  border-bottom: 1px solid var(--c-brown);
  padding-bottom: 4px;
  align-self: flex-start;
  margin-top: 8px;
}
.course-cta::after { content: " →"; margin-left: 6px; transition: margin .3s var(--ease); }
.course-row:hover .course-cta::after { margin-left: 14px; }

@media (max-width: 900px) {
  .course-row { grid-template-columns: 1fr; gap: 24px; }
  .course-row:nth-child(even) .course-photo { order: 0; }
  .course-row:nth-child(even) .course-content { order: 0; text-align: left; align-items: flex-start; }
  .course-photo { aspect-ratio: 5 / 4; }
  .course-content { padding: 0; gap: 14px; }
  .course-title { font-size: clamp(32px, 8vw, 48px); }
}

/* ───── Banderolle logos ───── */
.logo-ribbon {
  background: var(--c-brown);
  overflow: hidden;
  padding: clamp(3px, 0.4vw, 6px) 0;
  border-top: 1px solid rgba(255, 253, 237, 0.06);
  border-bottom: 1px solid rgba(255, 253, 237, 0.06);
}
.logo-ribbon-track {
  display: flex;
  gap: clamp(48px, 6vw, 96px);
  align-items: center;
  width: max-content;
  animation: ribbon-scroll 60s linear infinite;
}
.logo-ribbon-mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  opacity: 0.55;
}
.logo-ribbon-mark svg {
  height: clamp(28px, 3vw, 44px);
  width: auto;
  fill: var(--c-brown-light);
  display: block;
}
@keyframes ribbon-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-ribbon-track { animation: none; }
}

/* ───── Fondatrice ───── */
.founder .wrap {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.founder-body { order: 1; }
.founder-portrait {
  order: 2; aspect-ratio: 4 / 5; width: 100%;
  position: relative; overflow: hidden;
  background: var(--c-beige-deep);
  border: 1px solid rgba(74, 86, 48, 0.45);
  --gx: -300px; --gy: -300px;
}
.founder-portrait img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.founder-body .eyebrow { margin-bottom: 24px; }
.founder-body h2 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 300;
  font-size: clamp(56px, 8vw, 120px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--c-brown);
  margin: 0 0 32px;
}
.founder-body p {
  font-weight: 300;
  font-size: clamp(15px, 1.2vw, 18px);
  line-height: 1.7;
  color: var(--c-khaki);
  max-width: 44ch;
  margin: 0 0 16px;
}
.founder-cred {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 10px 18px;
  font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--c-khaki); font-weight: 500;
  padding-top: 24px; border-top: 1px solid var(--c-brown-line);
}
.founder-cred span { display: inline-flex; align-items: center; gap: 8px; }
.founder-cred span::before { content: "·"; color: var(--c-brown-light); }
.founder-cred span:first-child::before { display: none; }

@media (max-width: 900px) {
  .founder .wrap { grid-template-columns: 1fr; }
  .founder-body { order: 2; }
  .founder-portrait { order: 1; aspect-ratio: 4 / 3; }
}

/* ───── Studio (galerie) ───── */
.studio { background: var(--c-brown); color: var(--c-cream); }
.studio .sec-head h2,
.studio .eyebrow { color: var(--c-cream); }
.studio .sec-head h2 em { color: rgba(255, 253, 237, 0.55); }
.studio .sec-head p { color: rgba(255, 253, 237, 0.7); }

.gallery {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(12px, 1.6vw, 20px);
}
.tile {
  position: relative;
  background: rgba(255, 253, 237, 0.06);
  overflow: hidden;
  /* lighter olive border (visible on dark studio bg) */
  border: 1px solid rgba(122, 139, 92, 0.40);
  --gx: -300px;
  --gy: -300px;
}
.tile-1 { grid-column: span 7; aspect-ratio: 4 / 3; }
.tile-2 { grid-column: span 5; aspect-ratio: 4 / 3; }
.tile-wide { grid-column: span 12; aspect-ratio: 21 / 9; }

.tile img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.9) saturate(.8);
  transition: transform 1.4s var(--ease), filter .6s ease;
}
.tile:hover img { transform: scale(1.04); filter: brightness(1) saturate(.85); }

.tile-pattern {
  position: absolute; inset: 0;
  background-image:
    repeating-linear-gradient(135deg,
      rgba(255, 253, 237, 0.05) 0,
      rgba(255, 253, 237, 0.05) 1px,
      transparent 1px,
      transparent 18px);
  pointer-events: none;
}
.tile-label {
  position: absolute;
  left: 18px; bottom: 16px;
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 253, 237, 0.85);
  font-weight: 400;
  z-index: 2;
}
.tile-label::before { content: "[ "; }
.tile-label::after { content: " ]"; }
.tile-num {
  position: absolute;
  right: 18px; top: 16px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: rgba(255, 253, 237, 0.6);
  font-weight: 400;
  font-family: 'Unbounded', sans-serif;
  z-index: 2;
}

@media (max-width: 760px) {
  .tile-1, .tile-2 { grid-column: span 12; }
  .tile-wide { aspect-ratio: 16 / 10; }
}

.studio-info {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  border-top: 1px solid rgba(255, 253, 237, 0.18);
  padding-top: 32px;
}
.studio-info > div { display: flex; flex-direction: column; gap: 8px; }
.studio-info .k {
  font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(255, 253, 237, 0.55); font-weight: 400;
}
.studio-info .v { font-size: 15px; color: var(--c-cream); font-weight: 300; line-height: 1.55; }
@media (max-width: 720px) {
  .studio-info { grid-template-columns: 1fr; gap: 24px; }
}

/* Plan du studio (Google Maps embed) */
.studio-map {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
  aspect-ratio: 16 / 7;
  width: 100%;
  overflow: hidden;
  background: rgba(255, 253, 237, 0.04);
  border: 1px solid rgba(122, 139, 92, 0.40);
  box-shadow: 0 0 0 1px rgba(122, 139, 92, 0.10);
}
.studio-map iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  filter: grayscale(0.45) sepia(0.20) saturate(0.85);
  transition: filter 0.6s ease;
}
.studio-map:hover iframe {
  filter: grayscale(0.20) sepia(0.10) saturate(1);
}
.studio-map-cta {
  position: absolute;
  right: 22px;
  bottom: 22px;
  z-index: 2;
  padding: 14px 24px;
}
@media (max-width: 720px) {
  .studio-map { aspect-ratio: 4 / 3; }
  .studio-map-cta { right: 14px; bottom: 14px; padding: 12px 18px; font-size: 11px; }
}

/* ───── Tableau tarifs (page tarifs) ───── */
.tarif-block { padding-top: clamp(40px, 5vw, 72px); }
.tarif-block h3 {
  font-family: 'Unbounded', sans-serif; font-weight: 400;
  font-size: clamp(24px, 2.6vw, 36px); letter-spacing: -.02em;
  color: var(--c-brown); margin: 0 0 28px;
}
.tarif-block h3 em { font-style: italic; font-weight: 300; color: var(--c-brown-light); }
.table-tarif {
  width: 100%; border-collapse: collapse;
}
.table-tarif th, .table-tarif td {
  text-align: left; padding: 22px 0; border-bottom: 1px solid var(--c-brown-line);
  font-weight: 300; font-size: 14px; color: var(--c-khaki); vertical-align: baseline;
}
.table-tarif th {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-khaki); font-weight: 500;
}
.table-tarif td.name {
  font-family:'Unbounded',sans-serif; font-weight:400; font-size: 17px;
  letter-spacing:-.01em; color: var(--c-brown);
}
.table-tarif td.price {
  font-family:'Unbounded',sans-serif; font-weight:400; font-size: 20px;
  color: var(--c-brown); white-space: nowrap;
}

/* ───── Suivi nutritionnel section ───── */
.nutri { background: var(--c-beige-deep); }
.nutri .wrap {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px); align-items: center;
}
.nutri-img {
  position: relative; aspect-ratio: 4 / 5; width: 100%; overflow: hidden;
  border: 1px solid rgba(74, 86, 48, 0.45);
  --gx: -300px; --gy: -300px;
}
.nutri-img img { width: 100%; height: 100%; object-fit: cover; filter: saturate(.85); }
.nutri-body h2 {
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: clamp(36px, 4.6vw, 64px); line-height: 1; letter-spacing: -.03em;
  color: var(--c-brown); margin: 24px 0 28px;
}
.nutri-body h2 em { font-style: italic; font-weight: 200; color: var(--c-brown-light); }
.nutri-body p {
  font-weight: 300; font-size: 16px; line-height: 1.7;
  color: var(--c-khaki); max-width: 50ch; margin: 0 0 16px;
}
.nutri-pricing {
  margin-top: 32px; padding-top: 28px;
  border-top: 1px solid var(--c-brown-line);
  display: flex; flex-wrap: wrap; gap: 24px 48px; align-items: baseline;
}
.nutri-pricing .price {
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: 56px; letter-spacing: -.03em; color: var(--c-brown);
}
.nutri-pricing .price .unit { font-size: 13px; color: var(--c-khaki); margin-left: 4px; letter-spacing: .04em; }
.nutri-pricing .meta {
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-khaki); font-weight: 500;
}
@media (max-width: 880px) {
  .nutri .wrap { grid-template-columns: 1fr; }
  .nutri-img { order: -1; aspect-ratio: 5 / 3; }
}

/* ───── FAQ ───── */
.faq-item {
  border-top: 1px solid var(--c-brown-line);
  padding: 28px 0;
  display: grid; grid-template-columns: 60px 1fr; gap: 24px;
  cursor: pointer;
}
.faq-item:last-child { border-bottom: 1px solid var(--c-brown-line); }
.faq-item .n {
  font-family:'Unbounded',sans-serif; font-weight:300; font-size:22px;
  letter-spacing:-.02em; color: var(--c-brown-light); line-height:1;
}
.faq-item h3 {
  font-family:'Unbounded',sans-serif; font-weight:400; font-size:18px;
  letter-spacing:-.01em; color: var(--c-brown); margin: 0 0 8px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.faq-item h3::after {
  content: "+"; font-weight: 300; color: var(--c-brown-light);
  transition: transform .35s var(--ease);
}
.faq-item.open h3::after { transform: rotate(45deg); }
.faq-item p {
  margin: 0; font-weight: 300; font-size: 14px; line-height:1.65;
  color: var(--c-khaki); max-width: 60ch;
  max-height: 0; overflow: hidden;
  transition: max-height .45s var(--ease), margin-top .45s var(--ease), opacity .35s ease;
  opacity: 0;
}
.faq-item.open p { max-height: 240px; margin-top: 8px; opacity: 1; }

/* ───── Finale ───── */
.finale {
  padding: clamp(44px, 6vw, 84px) 0;
  text-align: center;
  border-top: 1px solid rgba(93, 52, 28, 0.08);
}
.finale h3 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 200;
  font-size: clamp(48px, 8vw, 128px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--c-brown);
  margin: 0 0 clamp(40px, 5vw, 64px);
  font-style: italic;
}

/* ───── Page head (sub-pages) ───── */
.page-head { padding: clamp(60px,8vw,120px) 0 clamp(40px,5vw,80px); }
.page-head h1 {
  font-family:'Unbounded',sans-serif; font-weight:300;
  font-size: clamp(48px, 7vw, 112px);
  line-height:.96; letter-spacing:-.04em; margin:24px 0 0; color:var(--c-brown);
}
.page-head h1 em { font-style:italic; font-weight:200; color:var(--c-brown-light); }
.page-head p {
  margin-top: 28px; font-weight: 300; font-size: 16px; line-height:1.65;
  color: var(--c-khaki); max-width: 56ch;
}

/* ───── Planning (réservation) ───── */
.filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.chip {
  padding: 10px 18px; font-size: 12px; letter-spacing: .12em;
  text-transform: uppercase; font-weight: 400;
  border: 1px solid var(--c-brown-line); color: var(--c-khaki);
  cursor: pointer; transition: all .25s ease; background: transparent;
  font-family: 'Unbounded', sans-serif;
}
.chip.active { background: var(--c-brown); color: var(--c-cream); border-color: var(--c-brown); }
.chip:hover { border-color: var(--c-brown); color: var(--c-brown); }
.chip.active:hover { color: var(--c-cream); }

.planning {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 12px; margin-top: 16px;
}
.day {
  background: var(--c-beige-deep);
  padding: 18px 14px;
  display: flex; flex-direction: column; gap: 14px;
  min-height: 360px;
}
.day-head {
  display: flex; flex-direction: column; gap: 4px;
  padding-bottom: 12px; border-bottom: 1px solid var(--c-brown-line);
}
.day-name {
  font-size: 10px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--c-khaki); font-weight: 400;
}
.slot {
  background: var(--c-cream);
  border: 1px solid var(--c-brown-line);
  padding: 12px;
  display: flex; flex-direction: column; gap: 4px;
  cursor: pointer;
  transition: all .25s ease;
  text-decoration: none; color: inherit;
}
.slot:hover { background: var(--c-brown); color: var(--c-cream); border-color: var(--c-brown); opacity:1; }
.slot:hover .s-meta { color: rgba(255,253,237,.7); }
.s-time { font-family: 'Unbounded',sans-serif; font-weight: 400; font-size: 14px; letter-spacing: -.01em; }
.s-name { font-size: 11px; font-weight: 400; }
.s-meta { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--c-khaki); font-weight: 400; }

@media (max-width: 1100px) {
  .planning { grid-template-columns: repeat(6, 1fr); gap: 6px; }
  .day { padding: 10px 6px; gap: 8px; min-height: 0; }
  .day-head { padding-bottom: 8px; gap: 2px; }
  .day-name { font-size: 8px; letter-spacing: .16em; }
  .slot { padding: 6px 4px; gap: 2px; }
  .s-time { font-size: 11px; }
  .s-name { font-size: 9px; }
  .s-meta { display: none; }
}
@media (max-width: 720px) {
  .planning { grid-template-columns: repeat(6, 1fr); gap: 3px; }
  .day { padding: 8px 3px; gap: 6px; }
  .day-head { padding-bottom: 6px; }
  .day-name { font-size: 7px; letter-spacing: .12em; }
  .slot { padding: 5px 2px; gap: 1px; }
  .s-time { font-size: 9px; }
  .s-name { font-size: 8px; }
}

.external-cta {
  margin-top: clamp(60px,8vw,110px);
  background: var(--c-brown); color: var(--c-cream);
  padding: clamp(48px,6vw,80px); text-align: center;
  border-radius: 18px;
}
.external-cta h2 {
  font-family:'Unbounded',sans-serif; font-weight: 300;
  font-size: clamp(28px,3.6vw,48px); letter-spacing:-.02em;
  margin: 0 0 16px; line-height: 1.1;
}
.external-cta h2 em { font-style: italic; font-weight: 200; opacity:.7; }
.external-cta p {
  max-width: 50ch; margin: 0 auto 32px; font-weight: 300;
  color: rgba(255,253,237,.75); line-height: 1.65; font-size: 15px;
}
.external-cta .btn { color: var(--c-brown); }
.external-cta .btn::before {
  opacity: 1;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--c-cream) 0%, #ECE4C5 100%);
}
.external-cta .btn:hover::before { filter: brightness(0.96); }
.external-cta .btn .ripple {
  background: radial-gradient(circle, rgba(46, 27, 14, 0.30) 0%, rgba(46, 27, 14, 0) 65%);
}

/* ───── Footer ───── */
.site-footer {
  background: var(--c-brown);
  color: var(--c-cream);
  padding: clamp(36px, 4.5vw, 58px) 0 22px;
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid rgba(255, 253, 237, 0.18);
}
.footer-brand .brandmark svg { fill: var(--c-cream); height: 32px; }
.footer-brand p {
  margin-top: 24px;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255, 253, 237, 0.7);
  line-height: 1.7;
  max-width: 32ch;
}
.footer-col h4 {
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  color: rgba(255, 253, 237, 0.6);
  margin: 0 0 18px;
}
.footer-col ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 13px;
  font-weight: 300;
}
.footer-col a { color: var(--c-cream); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 24px;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: rgba(255, 253, 237, 0.5);
  text-transform: uppercase;
  font-weight: 400;
  flex-wrap: wrap;
  gap: 12px;
}
.footer-bottom a { color: rgba(255,253,237,.6); }
@media (max-width: 820px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
  .footer-brand { grid-column: span 2; }
}

/* ─────────────────────────────────────────────────────────────
   Pricing cards V2 — radial-gradient cards + rotating conic glow.
   Inspired by a dark-card, premium pricing pattern, adapted to Giolia's
   palette (brun foncé base, brun terre + kaki + brun warm highlights).
   ───────────────────────────────────────────────────────────── */

.pricing-grid-v2 {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 32px;
  padding: clamp(24px, 3vw, 48px) 0;
  max-width: 68rem;
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .pricing-grid-v2 {
    flex-direction: row;
    align-items: stretch;
  }
}

.price-card-v2 {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  width: 100%;
  max-width: 21rem;
  margin: 0 auto;
  isolation: isolate;
  display: flex;
  min-height: 28rem;
  transition: transform .35s var(--ease, ease);
}
@media (min-width: 1024px) {
  .price-card-v2 { flex: 1 1 300px; max-width: 22rem; }
}
.price-card-v2:hover { transform: translateY(-3px); }

/* Rotating conic glow — sits at the very edge as a "border" */
.price-card-v2::before {
  content: "";
  position: absolute;
  inset: -55%;
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 75deg,
    rgba(255, 253, 237, 0.32) 100deg,
    rgba(133, 77, 46, 0.55) 115deg,
    rgba(255, 253, 237, 0.32) 130deg,
    transparent 155deg,
    transparent 360deg
  );
  animation: rotate-glow-v2 8s linear infinite;
  pointer-events: none;
  z-index: 0;
}
.price-card-v2.featured::before {
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    transparent 60deg,
    rgba(255, 253, 237, 0.50) 95deg,
    rgba(133, 77, 46, 0.75) 115deg,
    rgba(255, 253, 237, 0.50) 135deg,
    transparent 170deg,
    transparent 360deg
  );
}

@keyframes rotate-glow-v2 {
  to { transform: rotate(360deg); }
}

/* Inner card body (radial gradient bg + inset highlight) */
.price-card-v2::after {
  content: "";
  position: absolute;
  inset: 1.5px;
  border-radius: 17px;
  background-color: var(--c-brown);
  background-image:
    radial-gradient(at 88% 40%, var(--c-brown) 0px, transparent 85%),
    radial-gradient(at 49% 30%, var(--c-brown) 0px, transparent 85%),
    radial-gradient(at 14% 26%, var(--c-brown) 0px, transparent 85%),
    radial-gradient(at 0% 64%, var(--c-brown-light) 0px, transparent 85%),
    radial-gradient(at 41% 94%, var(--c-brown-warm) 0px, transparent 85%),
    radial-gradient(at 100% 99%, var(--c-khaki) 0px, transparent 85%);
  box-shadow: 0px -16px 24px 0px rgba(255, 253, 237, 0.10) inset;
  z-index: 1;
  pointer-events: none;
  transition: filter .35s ease;
}
.price-card-v2:hover::after { filter: brightness(1.06); }

.price-card-v2 .card-content-v2 {
  position: relative;
  z-index: 2;
  width: 100%;
  padding: 30px 26px 26px;
  color: var(--c-cream);
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.price-card-v2 .card-badge-v2 {
  position: absolute;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  background: var(--c-brown-warm);
  color: var(--c-cream);
  font-family: 'Unbounded', sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 999px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
/* Featured card needs extra top padding to clear the badge */
.price-card-v2.featured .card-content-v2 {
  padding-top: 52px;
}

.price-card-v2 .card-header-v2 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
}

.price-card-v2 .card-icon-v2 {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  border: 1px solid rgba(255, 253, 237, 0.20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: rgba(255, 253, 237, 0.95);
}
.price-card-v2 .card-icon-v2.icon-discovery {
  background: linear-gradient(135deg, rgba(74, 86, 48, 0.40), rgba(58, 74, 40, 0.18));
}
.price-card-v2 .card-icon-v2.icon-monthly {
  background: linear-gradient(135deg, rgba(133, 77, 46, 0.50), rgba(93, 52, 28, 0.25));
}
.price-card-v2 .card-icon-v2.icon-private {
  background: linear-gradient(135deg, rgba(255, 253, 237, 0.18), rgba(133, 77, 46, 0.30));
}
.price-card-v2 .card-icon-v2 svg { width: 22px; height: 22px; }

.price-card-v2 .card-titles-v2 {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.price-card-v2 .card-title-v2 {
  font-family: 'Unbounded', sans-serif;
  font-weight: 400;
  font-size: 19px;
  letter-spacing: -0.015em;
  color: var(--c-cream);
  margin: 0;
  line-height: 1.1;
}
.price-card-v2 .card-subtitle-v2 {
  font-size: 11px;
  color: rgba(255, 253, 237, 0.55);
  font-weight: 300;
  margin: 0;
  letter-spacing: 0.02em;
}

.price-card-v2 .card-radio-v2 {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 253, 237, 0.22);
  flex-shrink: 0;
  margin-top: 2px;
}

.price-card-v2 .card-pricing-v2 {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.price-card-v2 .card-price-v2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: 'Unbounded', sans-serif;
}
.price-card-v2 .price-value-v2 {
  font-size: 42px;
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--c-cream);
  line-height: 1;
}
.price-card-v2 .price-unit-v2 {
  font-size: 13px;
  color: rgba(255, 253, 237, 0.55);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.price-card-v2 .card-price-note-v2 {
  font-size: 11px;
  color: rgba(255, 253, 237, 0.45);
  margin: 0;
  font-weight: 300;
  letter-spacing: 0.02em;
}

/* Liste de tarifs — une ligne par forfait (libellé / prix), tous visibles.
   Les cartes V2 ont un fond brun foncé : libellés/prix/séparateurs en tons clairs.
   Les règles .featured renforcent encore le contraste sur la carte la + sombre. */
.price-card-v2 .card-tariffs-v2 {
  list-style: none;
  padding: 0;
  margin: 4px 0 0;
  display: flex;
  flex-direction: column;
}
.price-card-v2 .card-tariffs-v2 li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 11px 0;
  border-bottom: 1px solid rgba(255, 253, 237, 0.16);
}
.price-card-v2 .card-tariffs-v2 li:first-child { padding-top: 0; }
.price-card-v2 .card-tariffs-v2 li:last-child { border-bottom: 0; padding-bottom: 0; }
/* Ligne d'information (pas de prix à droite) — libellé pleine largeur */
.price-card-v2 .card-tariffs-v2 li.tariff-note-v2 { justify-content: flex-start; }
.price-card-v2 .tariff-label-v2 {
  font-size: 13px;
  font-weight: 300;
  letter-spacing: 0.01em;
  color: rgba(255, 253, 237, 0.78);
  line-height: 1.35;
}
.price-card-v2 .tariff-price-v2 {
  font-family: 'Unbounded', sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--c-cream);
  white-space: nowrap;
  text-align: right;
}
/* Ligne conseillée (« le + choisi ») — légèrement appuyée */
.price-card-v2 .card-tariffs-v2 li.tariff-pick-v2 .tariff-label-v2,
.price-card-v2 .card-tariffs-v2 li.tariff-pick-v2 .tariff-price-v2 {
  font-weight: 500;
  color: var(--c-cream);
}
.price-card-v2 .tariff-pick-tag-v2 {
  font-family: 'Unbounded', sans-serif;
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--c-brown);
  background: var(--c-beige-deep);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: 8px;
  vertical-align: middle;
  white-space: nowrap;
}

/* Carte « featured » (fond le + foncé) — libellés / prix / séparateurs bien clairs */
.price-card-v2.featured .card-tariffs-v2 li {
  border-bottom-color: rgba(255, 253, 237, 0.22);
}
.price-card-v2.featured .tariff-label-v2 {
  color: var(--c-cream);
}
.price-card-v2.featured .tariff-price-v2 {
  color: var(--c-cream);
}

.price-card-v2 .card-features-v2 {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 11px;
  flex: 1;
}
.price-card-v2 .card-features-v2 li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13px;
  color: rgba(255, 253, 237, 0.85);
  line-height: 1.45;
  font-weight: 300;
}
.price-card-v2 .check-v2 {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  border-radius: 999px;
  background: var(--c-brown-warm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.price-card-v2 .check-v2 svg {
  width: 10px;
  height: 10px;
  color: var(--c-brown);
}

/* Card V2 CTA — light pill with subtle depth (variant of .btn-light) */
.price-card-v2 .card-cta-v2 {
  position: relative;
  width: 100%;
  height: 50px;
  background: transparent;
  color: var(--c-brown);
  border: 0;
  border-radius: 999px;
  font-family: 'Unbounded', sans-serif;
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 4px;
  isolation: isolate;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(46, 27, 14, 0.20),
    0 8px 6px 0 rgba(0, 0, 0, 0.10),
    0 3px 4px 0 rgba(0, 0, 0, 0.15);
  transition:
    transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
    box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.price-card-v2 .card-cta-v2::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.55) 0%, transparent 55%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--c-cream) 0%, #ECE4C5 100%);
  z-index: -1;
  transition: filter 0.4s ease;
}
.price-card-v2 .card-cta-v2:hover {
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(46, 27, 14, 0.30),
    0 4px 4px 0 rgba(0, 0, 0, 0.12),
    0 1px 2px 0 rgba(0, 0, 0, 0.18);
}
.price-card-v2 .card-cta-v2:hover::before { filter: brightness(0.97); }
.price-card-v2 .card-cta-v2:active {
  transform: translateY(1px) scale(0.98);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.20),
    inset 0 0 0 1px rgba(46, 27, 14, 0.30);
}
.price-card-v2 .card-cta-v2 .ripple {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(46, 27, 14, 0.30) 0%, transparent 65%);
  transform: translate(-50%, -50%) scale(0);
  pointer-events: none;
  animation: btn-ripple 0.6s ease-out forwards;
  z-index: 0;
}

@media (prefers-reduced-motion: reduce) {
  .price-card-v2::before { animation: none; }
  .price-card-v2:hover { transform: none; }
}

/* ───── Subtle reveal on scroll ───── */
[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--rd, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

/* ───── Big G watermark — full-width backdrop ───── */
body { position: relative; }
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%20190%20200%27%20preserveAspectRatio%3D%27xMidYMid%20meet%27%3E%3Cpath%20d%3D%27M101.2%2C100.31v25.37s59.28.05%2C59.28.05c-1.38%2C4.09-3.27%2C7.98-5.63%2C11.59-5.37%2C8.14-12.99%2C14.65-22.74%2C19.39-9.67%2C4.75-21.27%2C7.16-34.55%2C7.16-13.51-.01-25.41-2.58-35.36-7.63-9.79-4.97-17.48-12.17-22.84-21.41-5.38-9.31-8.11-20.44-8.11-33.08v-1.5H1.25v1.5c0%2C13.31%2C2.32%2C25.64%2C6.89%2C36.63%2C4.59%2C10.88%2C11.21%2C20.38%2C19.69%2C28.24%2C8.53%2C7.78%2C18.67%2C13.9%2C30.16%2C18.19%2C11.51%2C4.09%2C24.23%2C6.17%2C37.8%2C6.18h.1c12.85%2C0%2C24.61-2%2C34.96-5.94%2C10.6-3.99%2C19.73-9.6%2C27.14-16.68l.7-.68c1.78-1.75%2C3.48-3.58%2C5.07-5.48l.72%2C25.99h24.84s.06-87.83.06-87.83l-88.17-.06Z%27%20fill%3D%27%233D4A28%27%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat;
  background-position: center 95%;
  background-size: 95vw auto;
  opacity: 0.10;
}
body > * { position: relative; z-index: 1; }

/* ───── Splash intro ───── */
.intro-splash {
  position: fixed; inset: 0; z-index: 9999;
  pointer-events: none;
  animation: introClear 0s linear 3.2s forwards;
}
@keyframes introClear { to { visibility: hidden; } }
.intro-pane {
  position: absolute; top: 0; bottom: 0; width: 50.5%;
  background: var(--c-beige);
  animation: paneSlide 1.4s var(--easeIO) 1.8s forwards;
}
.intro-pane.left  { left: 0;  }
.intro-pane.right { right: 0; animation-name: paneSlideR; }
.intro-pane::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.36 0 0 0 0 0.20 0 0 0 0 0.11 0 0 0 0.4 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply; opacity: .35;
}
.intro-pane.left::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(93,52,28,.18) 15%, rgba(93,52,28,.18) 85%, transparent);
}
@keyframes paneSlide  { to { transform: translateX(-101%); } }
@keyframes paneSlideR { to { transform: translateX( 101%); } }

.intro-content {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 28px;
  width: max-content; max-width: 90vw;
  animation: contentOut .7s ease 1.7s forwards;
}
@keyframes contentOut { to { opacity: 0; } }
.intro-splash svg {
  width: clamp(220px, 32vw, 420px); height: auto; fill: var(--c-brown);
  animation: logoIn 1.4s var(--ease) both;
}
.intro-splash .tag {
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: clamp(9px, 2vw, 11px); letter-spacing: .42em; text-transform: uppercase;
  color: var(--c-khaki); white-space: nowrap;
  animation: logoIn 1.4s var(--ease) .25s both;
}
@keyframes logoIn {
  from { opacity: 0; transform: translateY(14px) scale(.96); letter-spacing: .8em; }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .intro-splash, .intro-pane, .intro-content { animation: none !important; }
  .intro-splash { display: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ═══════ Ajustements 2026-06-06 (review Marc) ═══════ */

/* Photos arrondies sur le dessus : arche sur les grands portraits, arrondi doux ailleurs */
.hero-image,
.founder-portrait { border-radius: clamp(80px, 16vw, 170px) clamp(80px, 16vw, 170px) 0 0; }
.course-photo,
.cours-img,
.nutri-img { border-radius: 28px 28px 0 0; }
.tile { border-radius: 16px 16px 0 0; }

/* Accessibilité — anneau de focus clavier visible (manquait partout) */
:focus-visible { outline: 2px solid var(--c-brown); outline-offset: 3px; border-radius: 3px; }
.studio :focus-visible,
.external-cta :focus-visible,
.site-footer :focus-visible,
.nav-cta:focus-visible { outline-color: var(--c-cream); }

/* ═══════════════════════════════════════════════════════════════
   Améliorations conversion & SEO — 2026-06-07 (version AMÉLIORÉE)
   Lentilles : cro · marketing-psychology · make-interfaces-feel-better
   ═══════════════════════════════════════════════════════════════ */

/* Hero — micro-réassurance sous les boutons d'action */
.hero-actions { row-gap: 16px; }
@media (max-width: 520px) {
  .btn { white-space: normal; text-align: center; line-height: 1.3; }
}
.hero-reassure {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.03em;
  color: var(--c-khaki);
  font-weight: 300;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
}
.hero-reassure span { display: inline-flex; align-items: center; gap: 9px; }
.hero-reassure span::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--c-brown-light); display: inline-block; flex-shrink: 0;
}

/* Bandeau de réassurance (juste avant la finale) */
.trust-band { border-top: 1px solid var(--c-brown-line); }
.trust-band .wrap {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 3vw, 40px);
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.trust-item { display: flex; flex-direction: column; gap: 9px; }
.trust-item .t-k {
  font-family: 'Unbounded', sans-serif; font-weight: 400;
  font-size: clamp(17px, 1.8vw, 22px); letter-spacing: -0.02em;
  color: var(--c-brown); line-height: 1.1;
}
.trust-item .t-v {
  font-size: 13px; font-weight: 300; color: var(--c-khaki); line-height: 1.55;
  max-width: 30ch;
}
@media (max-width: 760px) {
  .trust-band .wrap { grid-template-columns: repeat(2, 1fr); gap: 28px 20px; }
}

/* Barre de réservation collante — aide à la conversion, mobile/tablette */
.book-bar {
  position: fixed;
  left: 12px; right: 12px; bottom: 12px;
  z-index: 60;
  display: none;
  align-items: center; justify-content: space-between; gap: 14px;
  padding: 11px 12px 11px 20px;
  background: rgba(46, 27, 14, 0.97);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--c-cream);
  border-radius: 999px;
  box-shadow: 0 16px 32px rgba(46, 27, 14, 0.30), inset 0 0 0 1px rgba(255, 253, 237, 0.10);
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition: transform .5s var(--ease), opacity .4s ease;
}
.book-bar.show { transform: none; opacity: 1; pointer-events: auto; }
.book-bar-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.book-bar-title {
  font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: -0.01em; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.book-bar-sub {
  font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 253, 237, 0.6); font-weight: 400; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
.book-bar-cta {
  flex-shrink: 0;
  background: var(--c-cream); color: var(--c-brown) !important;
  font-family: 'Unbounded', sans-serif; font-weight: 600; font-size: 11px;
  letter-spacing: 0.12em; text-transform: uppercase;
  padding: 13px 22px; border-radius: 999px;
  transition: transform .3s var(--ease);
}
.book-bar-cta:hover { opacity: 1; transform: scale(1.03); }
.book-bar-cta:active { transform: scale(0.97); }
@media (max-width: 820px) { .book-bar { display: flex; } }
@media (prefers-reduced-motion: reduce) {
  .book-bar { transition: opacity .2s ease; }
  .book-bar:not(.show) { transform: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Visuel renforcé — 2026-06-07 (2e passe : hero + offre + finitions)
   Lentilles : make-interfaces-feel-better · impeccable · marketing-psychology
   ═══════════════════════════════════════════════════════════════ */

/* Hero — phrase d'accroche sous le titre */
.hero-lead {
  margin-top: 20px;
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  font-weight: 300;
  color: var(--c-khaki);
  max-width: 46ch;
}

/* ─── Bande « Offre d'ouverture » — brun, reflet animé ─── */
.launch-offer {
  position: relative;
  overflow: hidden;
  background: var(--c-brown);
  color: var(--c-cream);
  border-top: 1px solid rgba(122, 139, 92, 0.35);
  border-bottom: 1px solid rgba(122, 139, 92, 0.35);
}
.launch-offer-inner {
  display: flex; flex-wrap: wrap; align-items: center;
  justify-content: space-between; gap: clamp(24px, 4vw, 56px);
  padding-top: clamp(40px, 5vw, 64px);
  padding-bottom: clamp(40px, 5vw, 64px);
  position: relative; z-index: 1;
}
.launch-offer-text { max-width: 60ch; }
.launch-offer .eyebrow { color: rgba(255, 253, 237, 0.75); }
.launch-offer .eyebrow::before { background: rgba(255, 253, 237, 0.6); }
.launch-offer-title {
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: clamp(28px, 3.6vw, 50px); letter-spacing: -0.03em;
  line-height: 1.05; margin: 18px 0 14px; color: var(--c-cream);
}
.lo-price { font-weight: 500; }
.lo-old {
  font-size: 0.5em; font-weight: 300; color: rgba(255, 253, 237, 0.55);
  text-decoration: line-through; margin-left: 10px; letter-spacing: 0;
}
.launch-offer-sub {
  font-size: 15px; font-weight: 300; line-height: 1.6;
  color: rgba(255, 253, 237, 0.78); margin: 0; max-width: 54ch;
}
.launch-offer-cta {
  display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  flex-shrink: 0;
}
.launch-offer-note {
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 253, 237, 0.5); font-weight: 400;
}
/* Reflet qui balaie la bande */
.launch-offer::after {
  content: ""; position: absolute; top: 0; left: -30%;
  width: 30%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 253, 237, 0.07), transparent);
  pointer-events: none; z-index: 0;
  animation: lo-sheen 7s ease-in-out infinite;
}
@keyframes lo-sheen { 0% { left: -30%; } 55%, 100% { left: 130%; } }
@media (max-width: 720px) {
  .launch-offer-cta { align-items: stretch; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .launch-offer::after { animation: none; display: none; }
}

/* ─── Finitions — micro-survols ─── */
.trust-item { transition: transform .35s var(--ease); }
.trust-item:hover { transform: translateY(-3px); }
.trust-item .t-k { transition: color .3s ease; }
.trust-item:hover .t-k { color: var(--c-brown-light); }
.opening-strip > div { transition: background .35s ease; }
.opening-strip > div:hover { background: rgba(46, 27, 14, 0.03); }

/* ─── Pop-up offre de lancement ─── */
.offer-modal {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0; transition: opacity .35s ease;
}
.offer-modal.open { opacity: 1; }
.offer-modal[hidden] { display: none; }
.offer-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(26, 15, 7, 0.55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.offer-modal-card {
  position: relative; z-index: 1;
  width: 100%; max-width: 460px;
  background: var(--c-brown); color: var(--c-cream);
  border-radius: 22px;
  padding: clamp(30px, 4vw, 46px);
  box-shadow: 0 30px 60px rgba(26, 15, 7, 0.45), inset 0 0 0 1px rgba(122, 139, 92, 0.30);
  transform: translateY(14px) scale(0.98);
  transition: transform .4s var(--ease);
  overflow: hidden;
}
.offer-modal.open .offer-modal-card { transform: none; }
.offer-modal-card .eyebrow {
  color: rgba(255, 253, 237, 0.75);
  flex-wrap: wrap;
  white-space: normal;
  max-width: 100%;
}
.offer-modal-card .eyebrow::before { background: rgba(255, 253, 237, 0.6); flex-shrink: 0; }
.offer-modal-title {
  font-family: 'Unbounded', sans-serif; font-weight: 300;
  font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.03em; line-height: 1.05;
  margin: 16px 0 12px; color: var(--c-cream);
}
.offer-modal-title .lo-price { font-weight: 500; }
.offer-modal-sub {
  font-size: 14px; font-weight: 300; line-height: 1.6;
  color: rgba(255, 253, 237, 0.78); margin: 0 0 24px; max-width: 42ch;
}
.offer-modal-card .btn-light { width: 100%; }
.offer-modal-close {
  position: absolute; top: 14px; right: 16px;
  background: transparent; border: 0; cursor: pointer;
  color: rgba(255, 253, 237, 0.6); font-size: 26px; line-height: 1;
  width: 38px; height: 38px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  transition: color .2s ease, background .2s ease;
}
.offer-modal-close:hover { color: var(--c-cream); background: rgba(255, 253, 237, 0.08); }
.offer-modal-later {
  display: block; margin: 14px auto 0; background: transparent; border: 0;
  color: rgba(255, 253, 237, 0.55); font-family: 'Unbounded', sans-serif;
  font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer;
  transition: color .2s ease;
}
.offer-modal-later:hover { color: var(--c-cream); }
@media (prefers-reduced-motion: reduce) {
  .offer-modal { transition: opacity .2s ease; }
  .offer-modal-card { transition: none; transform: none; }
}

/* ─── Réservation — pitch de l'offre encadré (mode ?offre=lancement) ─── */
.book-pitch.promo {
  background: var(--c-brown);
  color: var(--c-cream);
  border-radius: 18px;
  padding: clamp(28px, 3.4vw, 44px);
  box-shadow: 0 16px 36px rgba(46, 27, 14, 0.20), inset 0 0 0 1px rgba(122, 139, 92, 0.30);
}
.book-pitch.promo .eyebrow { color: rgba(255, 253, 237, 0.78); }
.book-pitch.promo .eyebrow::before { background: rgba(255, 253, 237, 0.6); }
.book-pitch.promo h2 { color: var(--c-cream); }
.book-pitch.promo h2 em { color: rgba(255, 253, 237, 0.7); }
.book-pitch.promo p { color: rgba(255, 253, 237, 0.82); }
/* « −15 % » + libellé sur 2 lignes : centrage vertical propre du gros prix */
.book-pitch.promo .price-pill { align-items: center; gap: 12px; }
.book-pitch.promo .price-pill b { line-height: 1; }
.book-pitch.promo .price-pill span { line-height: 1.35; }

/* ═══════════════════════════════════════════════════════════════
   Cohérence des arrondis — 2026-06-09
   Harmonisation vers « doux » des éléments de saisie / interaction.
   (Les arrondis des formulaires sont définis ici car les blocs
   <style> inline de reservation.html / contact.html ne fixent pas
   de border-radius — styles.css fait foi sur cette propriété.)
   ═══════════════════════════════════════════════════════════════ */

/* Champs de formulaire — séance découverte (reservation.html) */
form.gio-form input,
form.gio-form textarea,
form.gio-form select { border-radius: 10px; }

/* Champs de formulaire — contact (contact.html) */
form.contact-form input,
form.contact-form textarea,
form.contact-form select { border-radius: 10px; }

/* Planning — créneaux & colonnes jour */
.slot,
.day { border-radius: 10px; }

/* ─── Planning mobile : repli en défilement horizontal sous 560px ───
   En grille 7 colonnes le planning devient illisible sur petit écran.
   On passe en bande défilable, chaque jour gardant une largeur lisible. */
@media (max-width: 560px) {
  .planning {
    display: flex;
    overflow-x: auto;
    gap: 8px;
    -webkit-overflow-scrolling: touch;
  }
  .day {
    min-width: 120px;
    flex: 0 0 auto;
  }
}

/* ===== GREFFE CONCEPT ===== */
/* Intro */
.gio-intro{position:fixed;inset:0;z-index:10000;background:var(--c-brown);display:grid;place-items:center;overflow:hidden}
.gio-intro-glow{position:absolute;left:50%;top:48%;width:560px;height:560px;transform:translate(-50%,-50%) scale(.55);background:radial-gradient(circle,rgba(217,160,102,.5),transparent 60%);opacity:0;animation:gioGlow 2s cubic-bezier(.22,1,.36,1) .1s forwards}
.gio-intro-inner{position:relative;text-align:center;padding:24px}
.gio-intro-logo{height:clamp(40px,7vw,62px);width:auto;margin:0 auto;opacity:0;transform:translateY(16px) scale(.96);animation:gioLogo .9s cubic-bezier(.22,1,.36,1) .2s forwards}
.gio-intro-line{height:1.5px;width:0;margin:30px auto 0;border-radius:2px;background:linear-gradient(90deg,transparent,var(--c-lueur),transparent);box-shadow:0 0 12px rgba(217,160,102,.8);animation:gioLine .65s cubic-bezier(.22,1,.36,1) .6s forwards}
.gio-intro-offer{margin-top:26px;font-family:'Unbounded',sans-serif;font-size:clamp(9.5px,1.1vw,11.5px);letter-spacing:.26em;text-transform:uppercase;font-weight:500;color:transparent;animation:gioOffer .5s cubic-bezier(.22,1,.36,1) .95s forwards}
.gio-intro-offer b{color:var(--c-lueur);font-weight:600}
@keyframes gioGlow{to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
@keyframes gioLogo{to{opacity:1;transform:none}}
@keyframes gioLine{to{width:min(240px,60vw)}}
@keyframes gioOffer{to{color:rgba(255,253,237,.78)}}
.gio-intro.done{transform:translateY(-101%);transition:transform 1.15s cubic-bezier(.22,1,.36,1)}
.gio-intro.done .gio-intro-inner{opacity:0;transition:opacity .4s ease}
/* Marquee fin */
.gio-marquee{background:var(--c-brown);color:var(--c-cream);overflow:hidden;padding:11px 0;white-space:nowrap;border-radius:8px;margin-top:28px}
.gio-marquee-track{display:inline-flex;animation:gioMarq 24s linear infinite;will-change:transform}
.gio-marquee span{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(13px,1.4vw,16px);letter-spacing:.02em}
.gio-marquee .dot{color:var(--c-lueur)}
@keyframes gioMarq{to{transform:translateX(-25%)}}
/* Index des cours */
.gio-cours-index{display:grid;grid-template-columns:1fr .8fr;gap:clamp(30px,5vw,80px);align-items:start;margin-top:28px}
.gci-list{border-top:1px solid var(--c-brown-line)}
.gci-row{display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;padding:clamp(20px,2.6vw,34px) 4px;border-bottom:1px solid var(--c-brown-line);cursor:pointer;transition:padding-left .45s cubic-bezier(.22,1,.36,1),color .3s;color:var(--c-brown)}
.gci-num{font-family:'Unbounded',sans-serif;font-weight:300;font-size:12px;color:var(--c-brown-warm)}
.gci-name{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(24px,3vw,40px);letter-spacing:-.025em}
.gci-name em{font-style:italic;font-size:.46em;color:var(--c-brown-light);margin-left:12px;font-weight:300;letter-spacing:.02em;text-transform:uppercase}
.gci-go{font-family:'Unbounded',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;opacity:0;transform:translateX(-8px);transition:opacity .4s,transform .4s cubic-bezier(.22,1,.36,1);color:var(--c-brown-warm);white-space:nowrap}
.gci-row:hover{padding-left:22px;color:var(--c-brown-warm)}
.gci-row:hover .gci-go{opacity:1;transform:translateX(0)}
.gci-row.active .gci-name{font-weight:400}
.gci-media{position:sticky;top:110px;aspect-ratio:4/5;border-radius:18px;overflow:hidden;background:var(--c-beige-deep);box-shadow:0 40px 80px -50px rgba(46,27,14,.8)}
.gci-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.06);transition:opacity .7s cubic-bezier(.22,1,.36,1),transform 1.1s cubic-bezier(.22,1,.36,1)}
.gci-media img.show{opacity:1;transform:scale(1)}
.gci-cap{position:absolute;left:18px;bottom:16px;z-index:2;color:var(--c-cream);font-family:'Unbounded',sans-serif;font-size:10px;letter-spacing:.2em;text-transform:uppercase;font-weight:500;text-shadow:0 1px 14px rgba(0,0,0,.5)}
@media(max-width:860px){.gio-cours-index{grid-template-columns:1fr}.gci-media{display:none}.gci-row{grid-template-columns:auto 1fr;gap:16px}.gci-go{display:none}.gci-name{font-size:26px}}
/* Premiere fois (compact) */
.gio-first-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--c-brown-line);border:1px solid var(--c-brown-line);margin-top:8px}
.gff-it{background:var(--c-cream);padding:clamp(20px,2vw,30px)}
.gff-it .n{font-family:'Unbounded',sans-serif;font-size:11px;color:var(--c-brown-warm);font-weight:300}
.gff-it h4{font-family:'Unbounded',sans-serif;font-weight:300;font-size:clamp(15px,1.5vw,19px);letter-spacing:-.02em;margin:10px 0 8px}
.gff-it p{font-size:13px;color:var(--c-khaki);font-weight:300;line-height:1.6}
@media(max-width:880px){.gio-first-grid{grid-template-columns:1fr 1fr}}@media(max-width:520px){.gio-first-grid{grid-template-columns:1fr}}
/* Respiration */
.gio-respire{background:var(--c-brown);color:var(--c-cream);text-align:center}
.gio-respire .eyebrow{color:rgba(255,253,237,.5)}
.gio-respire h2{font-family:'Unbounded',sans-serif;font-weight:200;font-size:clamp(26px,3.4vw,46px);letter-spacing:-.025em;margin-top:14px;color:var(--c-cream)}
.gio-breath{margin:clamp(36px,6vw,64px) auto 0;width:min(220px,60vw);aspect-ratio:1;display:grid;place-items:center;position:relative}
.gio-breath-ring{position:absolute;inset:0;border-radius:50%;border:1px solid var(--c-lueur);background:radial-gradient(circle,rgba(217,160,102,.14),transparent 70%);box-shadow:0 0 50px rgba(217,160,102,.25);animation:gioBreath 10s ease-in-out infinite}
.gio-breath-labels{position:relative;height:1.4em}
.gio-breath-labels b{position:absolute;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Unbounded',sans-serif;font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--c-lueur);font-weight:500}
.gio-breath-labels .insp{animation:gioInsp 10s ease-in-out infinite}
.gio-breath-labels .exp{animation:gioExp 10s ease-in-out infinite}
@keyframes gioBreath{0%{transform:scale(.6)}40%{transform:scale(1)}55%{transform:scale(1)}100%{transform:scale(.6)}}
@keyframes gioInsp{0%,3%{opacity:0}10%,40%{opacity:1}50%,100%{opacity:0}}
@keyframes gioExp{0%,52%{opacity:0}60%,90%{opacity:1}98%,100%{opacity:0}}
@media(prefers-reduced-motion:reduce){.gio-breath-ring{animation:none;transform:scale(.85)}.gio-breath-labels .insp{opacity:1}.gio-breath-labels .exp{opacity:0}}
/* Instagram preview */
.gio-ig-card{max-width:680px;margin:8px auto 0;border:1px solid var(--c-brown-line);border-radius:18px;overflow:hidden;background:var(--c-cream)}
.gig-head{display:flex;align-items:center;gap:18px;padding:22px clamp(18px,3vw,30px)}
.gig-av{width:62px;height:62px;border-radius:50%;flex-shrink:0;background:var(--c-beige-deep);display:grid;place-items:center;border:2px solid var(--c-lueur);overflow:hidden}
.gig-av img{width:62%;height:auto}
.gig-id{flex:1;min-width:0}
.gig-name{font-family:'Unbounded',sans-serif;font-weight:500;font-size:16px;display:flex;align-items:center;gap:6px}
.gig-badge{color:#3897f0;font-size:13px}
.gig-bio{font-size:12.5px;color:var(--c-khaki);margin-top:3px;font-weight:300}
.gig-follow{flex-shrink:0;background:var(--c-brown);color:var(--c-cream);font-family:'Unbounded',sans-serif;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:9px 18px;border-radius:8px;transition:background .3s}
.gig-follow:hover{background:var(--c-brown-warm)}
.gig-tag{padding:0 clamp(18px,3vw,30px) 20px;border-bottom:1px solid var(--c-brown-line);font-size:13px;color:var(--c-khaki);font-weight:300}
.gig-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px;padding:3px}
.gig-grid a{position:relative;aspect-ratio:1;overflow:hidden;background:var(--c-beige-deep)}
.gig-grid img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gig-grid a:hover img{transform:scale(1.06)}
.gig-grid a::after{content:"Voir sur Instagram";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;color:#fff;font-family:'Unbounded',sans-serif;font-size:10px;letter-spacing:.1em;padding:10px;background:rgba(46,27,14,0);opacity:0;transition:all .35s}
.gig-grid a:hover::after{background:rgba(46,27,14,.5);opacity:1}
@media(max-width:540px){.gig-head{flex-wrap:wrap}}

/* ===== Bannière cookies RGPD ===== */
.gio-cookie{position:fixed;left:50%;bottom:clamp(14px,3vw,26px);z-index:9000;width:min(640px,calc(100% - 28px));background:var(--c-brown);color:var(--c-cream);border:1px solid var(--c-brown-warm);border-radius:16px;padding:clamp(18px,2.4vw,24px) clamp(20px,2.6vw,26px);box-shadow:0 18px 50px rgba(46,27,14,.45);opacity:0;transform:translate(-50%,18px);pointer-events:none;transition:opacity .5s ease,transform .55s cubic-bezier(.22,1,.36,1)}
.gio-cookie.in{opacity:1;transform:translate(-50%,0);pointer-events:auto}
.gio-cookie p{font-size:13px;line-height:1.6;margin:0 0 15px;color:rgba(255,253,237,.82)}
.gio-cookie a{color:var(--c-lueur);border-bottom:1px solid rgba(217,160,102,.45);padding-bottom:1px}
.gio-cookie-actions{display:flex;gap:10px;flex-wrap:wrap}
.gio-cookie-btn{font-family:'Unbounded',sans-serif;font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:11px 22px;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:background .25s,border-color .25s,color .25s}
.gio-cookie-accept{background:var(--c-cream);color:var(--c-brown)}
.gio-cookie-accept:hover{background:var(--c-lueur-light)}
.gio-cookie-refuse{background:transparent;color:rgba(255,253,237,.85);border-color:rgba(255,253,237,.3)}
.gio-cookie-refuse:hover{border-color:var(--c-cream);color:var(--c-cream)}
body.gio-cookie-open .book-bar{transform:translateY(160%)!important;opacity:0!important;pointer-events:none!important}
.studio-map{position:relative}
.gio-map-ph{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;background:var(--c-beige-deep);border-radius:inherit}
.gio-map-ph p{font-size:13px;max-width:320px;line-height:1.55;margin:0;color:var(--c-brown-light)}
.gio-map-ph button{font-family:'Unbounded',sans-serif;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;padding:11px 22px;border-radius:999px;background:var(--c-brown);color:var(--c-cream);border:none;cursor:pointer;transition:background .25s}
.gio-map-ph button:hover{background:var(--c-brown-warm)}
@media(max-width:560px){.gio-cookie-actions{flex-direction:column}.gio-cookie-btn{width:100%}}