/* ============================================================
   PLUM'YOGA — v5 « Profondeur »
   Design 3D : perspective réelle, plans étagés, matière.
   ============================================================ */

/* ── Variables ───────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --sand:    #f8f3ee;
  --blush:   #f0ddd4;
  --soft:    #f4ede7;
  --rose:    #e8d0c4;
  --accent:  #b8785c;
  --accent2: #96614a;
  --dark:    #2c2420;
  --mid:     #7a6258;
  --light:   #fffcf9;
  --nav-h:   68px;
  --max:     1120px;
  --r:       12px;
  --r-lg:    24px;
  --ease:    cubic-bezier(.4,0,.2,1);
  --spring:  cubic-bezier(.34,1.56,.64,1);
  --lift:    cubic-bezier(.22,.61,.36,1);
  --t:       .4s var(--ease);

  /* ── Système 3D ──────────────────────────────────────── */
  --persp:   1200px;
  --mx: 0;            /* souris X normalisée  -1 → 1  (JS) */
  --my: 0;            /* souris Y normalisée  -1 → 1  (JS) */

  /* Ombres étagées : plus l'objet est haut, plus l'ombre est
     large, douce et décalée — cohérence d'une source unique. */
  --sh-0: 0 1px 2px rgba(44,36,32,.04);
  --sh-1: 0 2px 5px rgba(44,36,32,.05), 0 8px 18px rgba(44,36,32,.05);
  --sh-2: 0 5px 12px rgba(44,36,32,.06), 0 20px 44px rgba(44,36,32,.09);
  --sh-3: 0 10px 24px rgba(44,36,32,.08), 0 38px 84px rgba(44,36,32,.14);
  --sh-4: 0 18px 40px rgba(44,36,32,.10), 0 60px 130px rgba(44,36,32,.20);
}

html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; }
body { font-family: 'Jost', sans-serif; color: var(--dark); background: var(--light); overflow-x: hidden; }
img  { display: block; max-width: 100%; }
a    { color: inherit; text-decoration: none; }
ul   { list-style: none; }
button, input, select, textarea { font: inherit; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 4px;
}

/* ── Typography ─────────────────────────────────────────── */
h1,h2,h3,h4,blockquote { font-family: 'Cormorant Garamond', serif; font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(3rem, 7vw, 5.5rem); }
h2 { font-size: clamp(2.4rem, 4.5vw, 3.8rem); margin-bottom: 1.4rem; font-weight: 300; }
h3 { font-size: clamp(1.7rem, 2.8vw, 2.4rem); margin-bottom: .8rem; }
p  { line-height: 1.85; color: var(--mid); font-weight: 400; font-size: .95rem; }
em { font-style: italic; color: var(--accent2); }

.label {
  display: block;
  font-size: .65rem; font-weight: 700; letter-spacing: .32em;
  text-transform: uppercase; color: var(--accent);
  margin-bottom: 1rem;
}
.light-label { color: rgba(255,255,255,.65); }

/* ── Layout ─────────────────────────────────────────────── */
.container { max-width: var(--max); margin: 0 auto; padding: 0 2.5rem; }
.section-padded { padding: 9rem 0; }
.bg-soft { background: var(--soft); }
.section-head { text-align: center; margin-bottom: 5rem; }
.section-head p { max-width: 520px; margin: .8rem auto 0; }

/* Règle du système : la profondeur ne se transmet pas toute
   seule. Un `translateZ` n'existe visuellement que si un
   ancêtre direct porte `perspective`, ou si l'objet porte
   lui-même `perspective()` dans son transform. Chaque bloc en
   relief déclare donc explicitement son propre espace. */

/* ── Progress bar ───────────────────────────────────────── */
#progress-bar {
  position: fixed; top: 0; left: 0; z-index: 9999;
  height: 2px; width: 0%;
  background: linear-gradient(90deg, var(--accent), var(--rose));
  transition: width .1s linear;
  pointer-events: none;
}

/* ── Buttons — objets physiques posés sur la page ───────── */
.btn-primary {
  position: relative; overflow: hidden;
  display: inline-flex; align-items: center; gap: .6rem;
  padding: 1rem 2.8rem;
  background: var(--dark); color: #fff;
  border-radius: 3px; border: none; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: .72rem; font-weight: 700;
  letter-spacing: .22em; text-transform: uppercase;
  box-shadow: var(--sh-1);
  transform: perspective(800px) translateZ(0);
  transition: transform .45s var(--lift), box-shadow .45s var(--lift);
  margin-top: 2rem;
}
.btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: var(--accent);
  transform: translateX(-101%);
  transition: transform .4s var(--ease);
}
/* Arête lumineuse en haut : lit la face supérieure du volume. */
.btn-primary::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18), inset 0 -1px 0 rgba(0,0,0,.25);
  pointer-events: none;
}
.btn-primary:hover { transform: perspective(800px) translateZ(24px); box-shadow: var(--sh-3); }
.btn-primary:active { transform: perspective(800px) translateZ(4px); box-shadow: var(--sh-1); transition-duration: .12s; }
.btn-primary span { position: relative; z-index: 1; }
.btn-primary:hover::before { transform: translateX(0); }
.btn-primary.full { width: 100%; justify-content: center; margin-top: 0; }

.btn-ghost {
  display: inline-flex; align-items: center;
  padding: 1rem 2.8rem;
  background: rgba(255,255,255,.04); color: #fff;
  border: 1px solid rgba(255,255,255,.45); border-radius: 3px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  font-family: 'Jost', sans-serif; font-size: .72rem; font-weight: 600;
  letter-spacing: .22em; text-transform: uppercase;
  transform: perspective(800px) translateZ(0);
  transition: background var(--t), border-color var(--t),
              transform .45s var(--lift), box-shadow .45s var(--lift);
  margin-top: 2rem;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.9);
  transform: perspective(800px) translateZ(18px);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}

.btn-nav {
  padding: .6rem 1.6rem !important;
  background: var(--accent) !important; color: #fff !important;
  border-radius: 3px; letter-spacing: .15em;
  box-shadow: var(--sh-1);
  transition: background var(--t), transform .4s var(--lift), box-shadow .4s var(--lift) !important;
}
.btn-nav:hover {
  background: var(--accent2) !important;
  transform: translateY(-2px) scale(1.03) !important;
  box-shadow: var(--sh-2);
}

.btn-text-link {
  display: inline-flex; align-items: center; gap: .6rem;
  font-size: .73rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--accent);
  margin-top: 1.8rem; border-bottom: 1px solid transparent;
  transition: gap var(--t), color var(--t), border-color var(--t);
  padding-bottom: .15rem;
}
.btn-text-link:hover { gap: 1rem; color: var(--accent2); border-color: var(--accent2); }

/* ── NAVBAR ─────────────────────────────────────────────── */
#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  height: var(--nav-h);
  transition: background var(--t), box-shadow var(--t), height var(--t);
}
/* Sur le hero : fond transparent, texte blanc */
#navbar:not(.scrolled) .logo { color: #fff; }
#navbar:not(.scrolled) .logo em { color: var(--accent); }
#navbar:not(.scrolled) .nav-links a:not(.btn-nav) { color: rgba(255,255,255,.82); }
#navbar:not(.scrolled) .nav-links a:not(.btn-nav):hover { color: #fff; }
#navbar:not(.scrolled) .burger span { background: #fff; }

/* Après scroll : la barre décolle de la page */
#navbar.scrolled {
  background: rgba(255,252,249,.9);
  backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: 0 1px 0 rgba(60,35,25,.06), 0 10px 30px rgba(44,36,32,.07);
  height: 58px;
}
.nav-inner {
  max-width: var(--max); margin: 0 auto; padding: 0 2.5rem;
  height: 100%; display: flex; align-items: center; justify-content: space-between;
}
.logo {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.55rem; font-weight: 400; color: var(--dark); letter-spacing: .05em;
  transition: color var(--t);
}
.logo em { font-style: normal; color: var(--accent); }
.nav-links { display: flex; gap: 2.4rem; align-items: center; }
.nav-links a {
  font-size: .71rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--dark);
  transition: color var(--t); position: relative; padding-bottom: 2px;
}
.nav-links a:not(.btn-nav)::after {
  content: ''; position: absolute; bottom: -2px; left: 0;
  width: 0; height: 1px; background: var(--accent);
  transition: width .35s var(--ease);
}
.nav-links a:not(.btn-nav):hover::after,
.nav-links a.active::after { width: 100%; }
.nav-links a:hover { color: var(--accent); }

.burger { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: .3rem; z-index: 300; }
.burger span { display: block; width: 24px; height: 1px; background: var(--dark); border-radius: 1px; transition: var(--t); transform-origin: center; }
.burger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger.open span:nth-child(2) { transform: translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO — une scène en volume
   Cinq plans étagés en Z. La photo est loin derrière, le texte
   flotte devant, les décors dérivent entre les deux. La scène
   entière pivote doucement avec la souris et recule au scroll.
   ============================================================ */
#hero {
  position: relative;
  display: block;
  min-height: 100vh;
  overflow: hidden;
  perspective: var(--persp);
  perspective-origin: 50% 42%;
  background: var(--dark);
}

.hero-stage {
  position: relative;
  min-height: 100vh;
  display: flex; align-items: center;
  transform-style: preserve-3d;
  /* En descendant, la scène entière recule. Le `scale`
     compense la fuite pour qu'aucun bord ne se découvre. */
  transform:
    translateZ(calc(var(--hero-scroll, 0) * -180px))
    scale(calc(1 + var(--hero-scroll, 0) * .18))
    rotateY(calc(var(--mx) * 3.2deg))
    rotateX(calc(var(--my) * -2.4deg));
  will-change: transform;
}

.hero-plane { position: absolute; inset: 0; transform-style: preserve-3d; }

/* Plan 1 — la photo, très loin (l'échelle compense la fuite) */
.hero-plane-bg { transform: translateZ(-620px) scale(1.5167); }
.hero-bg {
  position: absolute; inset: -7%;
  width: 114%; height: 114%; max-width: none;
  object-fit: cover; object-position: center 35%;
  filter: brightness(.58) saturate(.95) contrast(1.02);
  transform: translateY(calc(var(--hero-scroll, 0) * -3%));
}

/* Plan 2 — le voile coloré */
.hero-plane-overlay { transform: translateZ(-320px) scale(1.2667); }
.hero-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(115deg, rgba(44,36,32,.7) 0%, rgba(44,36,32,.28) 58%, rgba(44,36,32,0) 100%),
    radial-gradient(120% 90% at 78% 18%, rgba(184,120,92,.22) 0%, transparent 62%);
}

/* Plan 3 — les décors : halos et anneau incliné dans l'espace */
.hero-plane-deco { transform: translateZ(-170px) scale(1.1417); pointer-events: none; }

.hero-orb {
  position: absolute; border-radius: 50%;
  filter: blur(46px); opacity: .5;
  will-change: transform;
}
.orb-1 {
  width: 34vmax; height: 34vmax; top: -8%; left: -6%;
  background: radial-gradient(circle at 34% 32%, rgba(184,120,92,.75), transparent 68%);
  animation: orbDrift 26s ease-in-out infinite;
}
.orb-2 {
  width: 26vmax; height: 26vmax; bottom: -12%; right: 4%;
  background: radial-gradient(circle at 60% 40%, rgba(240,221,212,.5), transparent 66%);
  animation: orbDrift 34s ease-in-out infinite reverse;
}
.orb-3 {
  width: 18vmax; height: 18vmax; top: 46%; right: 32%;
  background: radial-gradient(circle at 50% 50%, rgba(255,252,249,.32), transparent 70%);
  animation: orbDrift 21s ease-in-out infinite -8s;
}
@keyframes orbDrift {
  0%, 100% { transform: translate3d(0,0,0) scale(1); }
  33%      { transform: translate3d(4vw, -3vh, 60px) scale(1.09); }
  66%      { transform: translate3d(-3vw, 4vh, -50px) scale(.94); }
}

/* Anneau : un disque réellement couché dans la scène. */
.hero-ring {
  position: absolute; top: 50%; left: 66%;
  width: 44vmax; height: 44vmax; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.09);
  box-shadow:
    0 0 0 1px rgba(184,120,92,.05),
    0 0 0 54px rgba(255,255,255,.018),
    0 0 0 118px rgba(255,255,255,.012);
  transform-origin: center;
  animation: ringTurn 46s linear infinite;
}
@keyframes ringTurn {
  from { transform: translate3d(-50%, -50%, 0) rotateX(72deg) rotateZ(0deg); }
  to   { transform: translate3d(-50%, -50%, 0) rotateX(72deg) rotateZ(360deg); }
}

/* Plan 4 — le contenu, devant tout le reste */
.hero-content {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--max); margin: 0 auto;
  padding: calc(var(--nav-h) + 6rem) 2.5rem 7rem;
  transform-style: preserve-3d;
}

/* Chorégraphie d'entrée : chaque ligne vient du fond de la
   scène et se pose à sa profondeur définitive. */
.hero-eyebrow,
.hero-content h1,
.hero-sub,
.hero-ctas {
  opacity: 0;
  transform: translate3d(0, 26px, -190px) rotateX(9deg);
  animation: rise3d 1.05s var(--lift) forwards;
}
@keyframes rise3d {
  to { opacity: 1; transform: translate3d(0, 0, var(--z, 0px)) rotateX(0deg); }
}

.hero-eyebrow {
  --z: 68px;
  display: block;
  font-size: .63rem; font-weight: 700; letter-spacing: .38em;
  text-transform: uppercase; color: #e2ab8e;
  margin-bottom: 2.2rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.6), 0 8px 26px rgba(0,0,0,.55);
  animation-delay: .12s;
}

.hero-content h1 {
  --z: 40px;
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(3.4rem, 7.5vw, 6.5rem);
  font-weight: 300; line-height: 1.05; letter-spacing: -.01em;
  color: #fff; margin-bottom: 2rem; max-width: 760px;
  text-shadow: 0 18px 50px rgba(0,0,0,.42);
  animation-delay: .24s;
}
.hero-content h1 em { font-style: italic; color: rgba(255,255,255,.78); }

.hero-sub {
  --z: 20px;
  font-size: clamp(.88rem, 1.4vw, 1rem);
  color: rgba(255,255,255,.74); font-weight: 400; line-height: 2;
  max-width: 720px; margin-bottom: 3.5rem;
  text-shadow: 0 8px 26px rgba(0,0,0,.4);
  animation-delay: .4s;
}
.hero-sub span { display: block; }

.hero-ctas {
  --z: 62px;
  display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
  transform-style: preserve-3d;
  animation-delay: .56s;
}
.hero-ctas .btn-primary,
.hero-ctas .btn-ghost { margin-top: 0; }

/* Vignette hors-scène : recadre l'image et creuse les bords. */
.hero-vignette {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(135% 105% at 50% 42%, transparent 46%, rgba(20,15,12,.42) 100%);
}

.hero-scroll-hint {
  position: absolute; bottom: 2.8rem; z-index: 4;
  left: max(2.5rem, calc((100vw - var(--max)) / 2 + 2.5rem));
  display: flex; flex-direction: column; align-items: flex-start; gap: .55rem;
  opacity: 0; animation: fadeUp .7s var(--ease) .85s forwards;
}
.hero-scroll-hint span {
  font-size: .58rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255,255,255,.34);
}
.scroll-track { width: 1px; height: 52px; background: rgba(255,255,255,.15); position: relative; overflow: hidden; }
.scroll-dot { position: absolute; top: 0; width: 1px; height: 24px; background: var(--accent); animation: scrollDot 2s ease-in-out infinite; }
@keyframes scrollDot { 0%{top:-24px;opacity:0} 30%{opacity:1} 100%{top:52px;opacity:0} }

@keyframes fadeUp { to { opacity: 1; transform: translateY(0); } }

/* ── MARQUEE — un ruban incliné dans l'espace ───────────── */
.band {
  background: linear-gradient(180deg, #3a302b 0%, var(--dark) 48%, #201a17 100%);
  padding: 1.35rem 0; overflow: hidden;
  perspective: 700px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), inset 0 -1px 0 rgba(0,0,0,.4),
              0 18px 40px rgba(44,36,32,.14);
}
.marquee { overflow: hidden; white-space: nowrap; transform: rotateX(8deg); }
.marquee-track {
  display: inline-flex; align-items: center; gap: 2.2rem;
  animation: marqueeScroll 22s linear infinite;
  will-change: transform;
}
.marquee-track span { font-size: .68rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255,255,255,.55); flex-shrink: 0; }
.marquee-track .band-dot { color: var(--accent); font-size: .5rem; }
@keyframes marqueeScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.band:hover .marquee-track { animation-play-state: paused; }

/* ── À PROPOS ────────────────────────────────────────────── */
.about-layout {
  display: grid; grid-template-columns: 1fr 1.05fr;
  gap: 7rem; align-items: start;
}

/* La colonne visuelle est une petite maquette : trois objets
   posés à trois hauteurs, que l'on tourne à la souris. */
.about-visual { position: relative; perspective: 1400px; }
.av-stack {
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--tx, 0) * 7deg))
    rotateX(calc(var(--ty, 0) * -6deg));
  transition: transform .2s linear;
}

/* Objet 1 — le portrait, au sol */
.av-main {
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 3/4; position: relative;
  box-shadow: var(--sh-3);
  clip-path: inset(100% 0 0 0);
  transition: clip-path 1.1s var(--ease), box-shadow .6s var(--lift);
}
.about-visual.visible .av-main { clip-path: inset(0 0 0 0); }
.av-main .av-portrait {
  width: 100%; height: 100%; object-fit: cover; object-position: center top;
  filter: saturate(.78) contrast(.97) sepia(.06);
  transition: transform .8s var(--ease), filter .8s var(--ease);
}
.av-stack:hover .av-portrait { transform: scale(1.04); }
.av-fallback { background: linear-gradient(135deg, var(--blush) 0%, var(--rose) 100%); display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }

/* Objet 2 — la vignette, surélevée */
.av-secondary {
  position: absolute; bottom: -2.5rem; right: -2.5rem;
  width: 42%; border-radius: var(--r); overflow: hidden;
  border: 5px solid var(--light);
  box-shadow: var(--sh-3);
  opacity: 0;
  transform: translate3d(0, 20px, 0) ;
  transition: transform 1s var(--lift) .4s, opacity 1s ease .4s;
}
.about-visual.visible .av-secondary {
  opacity: 1;
  transform: translate3d(0, calc(var(--sp, 0) * -14px), 78px);
}
.av-secondary img { width: 100%; height: 190px; object-fit: cover; transition: transform .7s var(--ease); }
.av-secondary:hover img { transform: scale(1.06); }

/* Objet 3 — le médaillon, tout en haut, en lévitation */
.av-badge {
  position: absolute; top: 2rem; left: -2.5rem;
  width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #d3947a, var(--accent) 52%, var(--accent2) 100%);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 2px 4px rgba(255,255,255,.35),
    inset 0 -3px 8px rgba(0,0,0,.18),
    0 26px 55px rgba(150,97,74,.42);
  animation: badgeFloat 6s ease-in-out infinite;
}
.av-badge-inner { text-align: center; }
.av-badge-star { display: block; font-size: 1.1rem; margin-bottom: .2rem; }
.av-badge-inner span { display: block; font-family: 'Cormorant Garamond', serif; font-size: .9rem; line-height: 1.35; }
.av-badge-note { font-size: .6rem !important; font-family: 'Jost', sans-serif !important; letter-spacing: .06em; opacity: .82; margin-top: .2rem; }
@keyframes badgeFloat {
  0%, 100% { transform: translate3d(0, 0, 150px) rotate(-8deg); }
  50%      { transform: translate3d(0, -14px, 190px) rotate(-5deg); }
}

.about-content h2 { margin-bottom: 1.4rem; }
/* Qualificatif sous le titre : sans-serif et discret, pour ne
   pas concurrencer le nom tout en complétant la fonction. */
.h2-qualifier {
  display: block;
  margin-top: .5rem;
  font-family: 'Jost', sans-serif;
  font-size: .3em; font-weight: 300;
  letter-spacing: .04em; line-height: 1.4;
  color: var(--mid);
}
.about-intro { font-size: 1rem; color: var(--dark); font-weight: 300; line-height: 1.9; margin-bottom: 2rem; }
.about-separator { width: 44px; height: 1.5px; background: linear-gradient(90deg, var(--accent), transparent); margin-bottom: 2.2rem; }

.about-certs { display: flex; flex-direction: column; gap: 1.4rem; margin-bottom: 2.2rem; perspective: 900px; }
.ac-item {
  display: flex; gap: 1.2rem; align-items: flex-start;
  transform: translateZ(0);
  transition: transform .45s var(--lift);
}
.ac-item:hover { transform: translateZ(26px); }
.ac-line { width: 2px; min-height: 60px; background: linear-gradient(to bottom, var(--accent), var(--blush)); border-radius: 2px; flex-shrink: 0; }
.ac-body strong { display: block; font-family: 'Jost', sans-serif; font-size: .85rem; font-weight: 600; color: var(--dark); margin-bottom: .35rem; }
.ac-body p { font-size: .88rem; }

.about-approach {
  padding: 1.5rem 1.8rem;
  border-left: 2px solid var(--rose);
  background: linear-gradient(135deg, var(--soft), var(--blush));
  border-radius: 0 var(--r) var(--r) 0;
  box-shadow: var(--sh-1);
  margin-bottom: 1.8rem;
}
.about-approach p { font-family: 'Cormorant Garamond', serif; font-size: 1.15rem; color: var(--mid); font-style: italic; line-height: 1.65; }

.about-tags { display: flex; flex-wrap: wrap; gap: .5rem; perspective: 700px; }
.about-tags span {
  padding: .4rem 1.1rem; border: 1px solid var(--blush); border-radius: 50px;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--mid);
  transform: translateZ(0);
  transition: background var(--t), border-color var(--t), color var(--t),
              transform .4s var(--lift), box-shadow .4s var(--lift);
}
.about-tags span:hover {
  background: var(--accent); border-color: var(--accent); color: #fff;
  transform: translateZ(22px); box-shadow: var(--sh-2);
}

/* ── PRATIQUES ───────────────────────────────────────────── */
.pratique {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 6rem; align-items: center;
  padding: 5.5rem 0;
  border-top: 1px solid rgba(184,120,92,.1);
  perspective: 1500px;
}
.pratique:first-of-type { border-top: none; padding-top: 0; }
.pratique.reverse { direction: rtl; }
.pratique.reverse > * { direction: ltr; }

.pratique-media {
  position: relative;
  transform-style: preserve-3d;
  transform:
    rotateY(calc(var(--tx, 0) * 7deg))
    rotateX(calc(var(--ty, 0) * -6deg));
  transition: transform .2s linear;
}

.pm-main {
  border-radius: var(--r-lg); overflow: hidden;
  aspect-ratio: 4/5;
  box-shadow: var(--sh-3);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.1s var(--ease), box-shadow .6s var(--lift);
}
.pratique.visible .pm-main { clip-path: inset(0 0% 0 0); }
.pratique-media:hover .pm-main { box-shadow: var(--sh-4); }
.pm-main img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.pratique-media:hover .pm-main img { transform: scale(1.05); }

.pm-accent {
  position: absolute; bottom: -2rem; right: -2rem;
  width: 46%; border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-3);
  border: 5px solid var(--soft);
  opacity: 0;
  transform: translate3d(0, 30px, 0) scale(.96);
  transition: transform .95s var(--lift) .3s, opacity .95s ease .3s;
}
.pratique.reverse .pm-accent { right: auto; left: -2rem; }
.pratique.visible .pm-accent {
  opacity: 1;
  transform: translate3d(0, calc(var(--sp, 0) * -16px), 96px) scale(1);
}
.pm-accent img { width: 100%; height: 170px; object-fit: cover; transition: transform .7s var(--ease); }
.pm-accent:hover img { transform: scale(1.08); }

.pratique-body { transform-style: preserve-3d; }
.pratique-header { display: flex; align-items: baseline; gap: 1.2rem; margin-bottom: .8rem; transform-style: preserve-3d; }
.pratique-num {
  font-family: 'Cormorant Garamond', serif; font-size: 4.5rem; font-weight: 300;
  color: var(--blush); line-height: 1; flex-shrink: 0;
  transform: translateZ(0);
  transition: color .4s ease, transform .6s var(--lift), text-shadow .6s var(--lift);
}
.pratique:hover .pratique-num {
  color: var(--accent);
  transform: translateZ(60px);
  text-shadow: 0 24px 40px rgba(184,120,92,.28);
}
.pratique-tag { font-size: .63rem; font-weight: 700; letter-spacing: .25em; text-transform: uppercase; color: var(--accent); }
.pratique-body h3 { margin-bottom: 1rem; }
.pratique-body p + p { margin-top: .8rem; }
.pratique-body strong { color: var(--dark); font-weight: 500; }

.pratique-list { margin: 1.4rem 0 .5rem; display: flex; flex-direction: column; gap: .65rem; }
.pratique-list li { display: flex; align-items: center; gap: .9rem; font-size: .9rem; color: var(--mid); font-weight: 300; }
.pratique-list li::before { content: ''; display: block; width: 22px; height: 1px; background: var(--accent); flex-shrink: 0; transition: width .3s var(--ease); }
.pratique-body:hover .pratique-list li::before { width: 34px; }

/* ── INTERLUDE SONOTHÉRAPIE — un bloc massif ────────────── */
.sono-interlude {
  border-radius: var(--r-lg); overflow: hidden;
  margin: 4rem 0 3rem;
  background: linear-gradient(165deg, #3a302b 0%, var(--dark) 45%, #221c19 100%);
  box-shadow: var(--sh-4);
  transform: perspective(1500px) translate3d(0, 40px, -140px) rotateX(7deg);
  transform-origin: 50% 100%;
  opacity: 0;
  transition: transform 1.15s var(--lift), opacity 1s ease;
}
.sono-interlude.visible { transform: perspective(1500px) translate3d(0,0,0) rotateX(0deg); opacity: 1; }

.si-deco {
  height: 4px;
  background: linear-gradient(90deg, var(--accent), rgba(184,120,92,.2), transparent);
  box-shadow: 0 0 24px rgba(184,120,92,.4);
}

.si-content { padding: 4.5rem 5rem; display: flex; flex-direction: column; gap: 2.5rem; }
.si-text h3 { color: #fff; font-size: clamp(1.9rem, 3.5vw, 3rem); margin-bottom: 1.2rem; }
.si-text p { color: rgba(255,255,255,.65); font-size: .96rem; line-height: 1.95; }
.si-text p + p { margin-top: .9rem; }
.si-text strong { color: rgba(255,255,255,.9); font-weight: 500; }

/* Qualificatif sous le titre, version fond sombre. */
.h3-qualifier {
  display: block;
  margin-top: .45rem;
  font-family: 'Jost', sans-serif;
  font-size: .32em; font-weight: 300;
  letter-spacing: .05em; line-height: 1.4;
  color: rgba(255,255,255,.5);
}

.si-formats { display: flex; flex-direction: column; gap: 1.1rem; }
/* Deux colonnes au lieu de trois : il n'y a que deux formats. */
.si-pillars.si-pillars-duo { grid-template-columns: repeat(2, 1fr); }

.si-closing {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-style: italic; line-height: 1.6;
  color: rgba(255,255,255,.75);
  padding-top: 2rem;
  border-top: 1px solid rgba(255,255,255,.08);
}

/* Trois piliers taillés dans la masse : creusés au repos,
   soulevés vers le lecteur au survol. */
.si-pillars {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
  background: rgba(255,255,255,.07); border-radius: var(--r);
  overflow: hidden; margin-top: .5rem;
  perspective: 900px;
}
.si-pillar {
  background: rgba(255,255,255,.03); padding: 2rem 1.8rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
  transform: translateZ(0);
  transition: background .4s ease, transform .5s var(--lift), box-shadow .5s var(--lift);
}
.si-pillar:hover {
  background: rgba(255,255,255,.09);
  transform: translateZ(38px);
  box-shadow: 0 26px 55px rgba(0,0,0,.42), inset 0 1px 0 rgba(255,255,255,.12);
}
.si-pillar-title { display: block; font-family: 'Cormorant Garamond', serif; font-size: 1.25rem; color: var(--accent); font-style: italic; margin-bottom: .6rem; }
.si-pillar p { color: rgba(255,255,255,.48); font-size: .84rem; line-height: 1.75; }

/* ── CITATION — image lointaine, texte en avant ─────────── */
.section-quote {
  position: relative; padding: 9rem 0; overflow: hidden;
  perspective: var(--persp);
  background: var(--dark);
}
.quote-bg {
  position: absolute; inset: -10%;
  width: 120%; height: 120%; max-width: none;
  object-fit: cover; object-position: center;
  filter: brightness(.26) saturate(.85);
  transform: translate3d(0, calc(var(--sp, 0) * 40px), 0) scale(1.04);
}
.quote-overlay {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(184,120,92,.42), rgba(44,36,32,.6)),
    radial-gradient(100% 80% at 50% 50%, transparent 40%, rgba(20,15,12,.5) 100%);
}
.section-quote .container { position: relative; z-index: 1; transform-style: preserve-3d; }
.quote-inner {
  max-width: 860px; margin: 0 auto; text-align: center;
  transform: translateZ(70px);
}
.quote-mark { font-family: 'Cormorant Garamond', serif; font-size: 9rem; color: rgba(255,255,255,.1); line-height: .4; display: block; margin-bottom: .5rem; }
blockquote { font-size: clamp(1.55rem, 3vw, 2.5rem); color: #fff; font-style: italic; line-height: 1.55; text-shadow: 0 20px 60px rgba(0,0,0,.45); }
cite { display: block; margin-top: 2rem; color: rgba(255,255,255,.5); font-style: normal; font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; }

/* ── TÉMOIGNAGES — cartes flottantes ────────────────────── */
.avis-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 1.6rem;
  perspective: 1300px;
}
.avis-card {
  --lift-z: 0px;
  background: linear-gradient(165deg, var(--light), var(--sand) 70%);
  border-radius: var(--r);
  padding: 2.6rem; display: flex; flex-direction: column; gap: 1.2rem;
  border: 1px solid rgba(184,120,92,.1);
  box-shadow: var(--sh-2);
  transform-style: preserve-3d;
  transform: translate3d(0, 30px, -80px) rotateX(7deg);
  opacity: 0;
  transition: transform .85s var(--lift), opacity .8s ease, box-shadow .5s var(--lift);
}
.avis-card.visible {
  opacity: 1;
  transform:
    translate3d(0, 0, var(--lift-z))
    rotateY(calc(var(--tx, 0) * 5deg))
    rotateX(calc(var(--ty, 0) * -5deg));
}
/* Au survol, on raccourcit la transition : l'inclinaison doit
   suivre le curseur, pas traîner derrière la mise en scène. */
.avis-card.visible:hover {
  --lift-z: 40px;
  box-shadow: var(--sh-3);
  transition-duration: .25s;
}

.avis-quote-mark {
  font-family: 'Cormorant Garamond', serif; font-size: 3.5rem;
  color: var(--rose); line-height: .8;
  transform: translateZ(34px);
}
.avis-text { font-size: .93rem; color: var(--mid); line-height: 1.82; font-weight: 300; flex: 1; font-style: italic; transform: translateZ(14px); }
.avis-footer { display: flex; align-items: center; justify-content: space-between; transform: translateZ(24px); }
.avis-stars { color: var(--accent); font-size: .9rem; letter-spacing: .06em; }
.avis-meta { text-align: right; }
.avis-meta strong { display: block; font-size: .83rem; color: var(--dark); font-weight: 600; }
.avis-meta span { font-size: .72rem; color: var(--mid); letter-spacing: .08em; }

.google-reviews {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1.4rem;
  margin-top: 2rem; padding: 1.7rem 2rem;
  scroll-margin-top: calc(var(--nav-h) + 1.5rem);
  background: var(--light); border: 1px solid rgba(184,120,92,.14);
  border-radius: var(--r); box-shadow: var(--sh-2);
  transform-style: preserve-3d;
  transform:
    perspective(1200px)
    rotateY(calc(var(--tx, 0) * 3deg))
    rotateX(calc(var(--ty, 0) * -3deg));
  transition: transform .2s linear, box-shadow .5s var(--lift);
}
.google-reviews:hover { box-shadow: var(--sh-3); }
.google-reviews-mark {
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; flex-shrink: 0;
  background: #fff; color: #4285f4;
  border: 1px solid rgba(44,36,32,.08);
  box-shadow: 0 8px 22px rgba(44,36,32,.14), inset 0 1px 0 #fff;
  font-family: Arial, sans-serif; font-size: 1.35rem; font-weight: 700;
  transform: translateZ(26px);
}
.google-reviews-copy { transform: translateZ(12px); }
.google-reviews-copy strong {
  display: block; margin-bottom: .25rem;
  font-family: 'Cormorant Garamond', serif; font-size: 1.3rem; font-weight: 600;
}
.google-reviews-copy p { font-size: .84rem; line-height: 1.6; }
.google-reviews .btn-text-link { margin-top: 0; white-space: nowrap; transform: translateZ(20px); }

/* ── CITATION COURTE — une respiration avant la réservation */
.pull-quote {
  background: linear-gradient(135deg, var(--blush) 0%, var(--soft) 55%, var(--sand) 100%);
  padding: 5.5rem 0;
  text-align: center;
  perspective: var(--persp);
  border-top: 1px solid rgba(184,120,92,.1);
  border-bottom: 1px solid rgba(184,120,92,.1);
}
.pull-quote .container { transform-style: preserve-3d; }
.pq-mark {
  display: block;
  width: 34px; height: 1.5px;
  margin: 0 auto 1.8rem;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  transform: translateZ(20px);
}
.pull-quote p {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  font-style: italic; font-weight: 300;
  line-height: 1.45; color: var(--dark);
  max-width: 780px; margin: 0 auto;
  text-wrap: balance;
  transform: translateZ(46px);
  text-shadow: 0 14px 30px rgba(44,36,32,.07);
}

/* ── DISPONIBILITÉS — une plaque posée sur la page ──────── */
.dispo-simple {
  position: relative; isolation: isolate; overflow: hidden;
  max-width: 820px; margin: 0 auto; padding: 4.5rem 4rem;
  text-align: center;
  background: linear-gradient(165deg, rgba(255,252,249,.94), rgba(248,243,238,.8));
  border: 1px solid rgba(184,120,92,.16); border-radius: var(--r-lg);
  box-shadow: var(--sh-3), inset 0 1px 0 #fff;
  transform-style: preserve-3d;
  transform:
    perspective(1300px)
    rotateY(calc(var(--tx, 0) * 4deg))
    rotateX(calc(var(--ty, 0) * -4deg));
  transition: transform .2s linear;
}
.dispo-simple::before {
  content: ''; position: absolute; z-index: -1;
  width: 320px; height: 320px; border-radius: 50%;
  top: -210px; right: -100px;
  border: 1px solid rgba(184,120,92,.16);
  box-shadow: 0 0 0 44px rgba(184,120,92,.025), 0 0 0 88px rgba(184,120,92,.018);
}
.dispo-simple .label { text-align: center; transform: translateZ(30px); }
.dispo-simple h2 { transform: translateZ(46px); }
.dispo-simple p { max-width: 620px; margin: .8rem auto 0; transform: translateZ(18px); }
.dispo-simple .btn-primary { margin-left: auto; margin-right: auto; display: inline-flex; }

/* ── CONTACT ─────────────────────────────────────────────── */
.contact-layout { display: grid; grid-template-columns: 1fr 1.4fr; gap: 5rem; align-items: start; }
.contact-left h2 { margin-bottom: 1rem; }
.contact-left > p { margin-bottom: 2rem; }
.contact-coords { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 2.5rem; perspective: 900px; }
.cc-item {
  display: flex; gap: 2rem; align-items: baseline;
  transform: translateZ(0);
  transition: transform .4s var(--lift);
}
.cc-item:hover { transform: translateZ(24px); }
.cc-label { font-size: .66rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); min-width: 80px; }
.cc-item a { font-size: .92rem; color: var(--mid); transition: color var(--t); }
.cc-item a:hover { color: var(--accent); }
.contact-img-wrap {
  border-radius: var(--r); overflow: hidden;
  box-shadow: var(--sh-3);
  transform-style: preserve-3d;
  transform:
    perspective(1000px)
    rotateY(calc(var(--tx, 0) * 6deg))
    rotateX(calc(var(--ty, 0) * -5deg));
  transition: transform .2s linear;
}
.contact-img-wrap img { width: 100%; height: 230px; object-fit: cover; transition: transform .7s var(--ease); }
.contact-img-wrap:hover img { transform: scale(1.05); }

/* Le formulaire est une plaque en relief ; les champs y sont
   creusés (ombre interne) — la hiérarchie devient tactile. */
.contact-form {
  background: linear-gradient(165deg, var(--light), var(--sand) 65%);
  border-radius: var(--r-lg);
  padding: 3rem; display: flex; flex-direction: column; gap: 1.4rem;
  border: 1px solid rgba(184,120,92,.12);
  box-shadow: var(--sh-3), inset 0 1px 0 #fff;
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.form-group { display: flex; flex-direction: column; gap: .45rem; }
.form-group label { font-size: .67rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--dark); }
.form-group input,
.form-group textarea,
.form-group select {
  padding: .9rem 1.2rem;
  border: 1px solid rgba(184,120,92,.22);
  border-radius: var(--r); background: var(--light); color: var(--dark);
  font-family: 'Jost', sans-serif; font-size: .93rem; font-weight: 300;
  box-shadow: inset 0 2px 5px rgba(44,36,32,.07);
  transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
  outline: none; resize: vertical; appearance: none; -webkit-appearance: none;
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--accent); background: #fff;
  box-shadow: inset 0 2px 5px rgba(44,36,32,.05), 0 0 0 4px rgba(184,120,92,.13);
}
.form-group input.error,
.form-group textarea.error,
.form-group select.error { border-color: #9f3030; box-shadow: inset 0 2px 5px rgba(44,36,32,.06), 0 0 0 3px rgba(159,48,48,.14); }
.form-honeypot {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.form-consent { display: grid; grid-template-columns: 1.2rem 1fr; gap: .7rem; align-items: start; }
.form-consent input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--accent2); }
.form-consent input.error { outline: 2px solid #9f3030; outline-offset: 2px; }
.form-consent label { color: var(--mid); font-size: .78rem; line-height: 1.55; }
.form-required { font-size: .74rem; line-height: 1.55; }
.form-status {
  text-align: center; padding: 1.2rem;
  background: rgba(184,120,92,.1); border-radius: var(--r);
  box-shadow: inset 0 1px 3px rgba(44,36,32,.06);
  color: var(--accent2); font-size: .9rem; font-weight: 500;
}
.form-status.error { background: rgba(159,48,48,.1); color: #812727; }

/* ── FOOTER ─────────────────────────────────────────────── */
#footer {
  background: linear-gradient(180deg, #221c19, var(--dark) 40%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.footer-inner {
  max-width: var(--max); margin: 0 auto; padding: 5rem 2.5rem 4rem;
  display: grid; grid-template-columns: 1.3fr 2fr; gap: 4rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.footer-brand .footer-logo { font-family: 'Cormorant Garamond', serif; font-size: 2.1rem; color: #fff; display: block; margin-bottom: .8rem; }
.footer-brand .footer-logo em { font-style: normal; color: var(--accent); }
.footer-brand p { font-size: .85rem; color: rgba(255,255,255,.68); line-height: 1.85; }
.footer-insta {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: 1.5rem; font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: rgba(255,255,255,.72);
  transition: color var(--t);
}
.footer-insta:hover { color: var(--accent); }
.footer-nav { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
.fn-col { display: flex; flex-direction: column; gap: .6rem; }
.fn-col strong { font-size: .63rem; letter-spacing: .25em; text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: .4rem; }
.fn-col a, .fn-col span { font-size: .85rem; color: rgba(255,255,255,.68); transition: color var(--t); }
.fn-col a:hover { color: var(--accent); }
.footer-bottom { text-align: center; padding: 1.5rem; }
.footer-bottom p { font-size: .72rem; color: rgba(255,255,255,.68); letter-spacing: .04em; }
.footer-bottom .wellness-note { max-width: 760px; margin: 0 auto 1rem; line-height: 1.7; }

/* ── BACK TO TOP ─────────────────────────────────────────── */
.back-top {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 99;
  width: 46px; height: 46px;
  background: linear-gradient(165deg, #3a302b, var(--dark));
  color: #fff;
  border: none; border-radius: 4px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-2), inset 0 1px 0 rgba(255,255,255,.14);
  opacity: 0; transform: translateY(12px);
  transition: opacity .4s ease, transform .4s var(--lift), background .3s ease, box-shadow .4s var(--lift);
  pointer-events: none;
}
.back-top.visible { opacity: 1; transform: translateY(0); pointer-events: all; }
.back-top:hover {
  background: linear-gradient(165deg, #c58a6c, var(--accent));
  transform: translateY(-5px) scale(1.05);
  box-shadow: var(--sh-3), inset 0 1px 0 rgba(255,255,255,.2);
}

/* ── REVEAL générique — en profondeur ────────────────────── */
.reveal {
  opacity: 0;
  transform: perspective(1400px) translate3d(0, 48px, -110px) rotateX(6deg);
  transform-origin: 50% 100%;
  transition: opacity .9s var(--ease), transform 1s var(--lift);
}
.reveal-right {
  opacity: 0;
  transform: perspective(1400px) translate3d(56px, 0, -110px) rotateY(-8deg);
  transform-origin: right center;
  transition: opacity .9s var(--ease), transform 1s var(--lift);
}
.reveal.visible, .reveal-right.visible { opacity: 1; transform: none; }

/* ── RESPONSIVE ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .si-pillars { grid-template-columns: 1fr 1fr 1fr; }
  .si-content { padding: 3.5rem 3rem; }
}

@media (max-width: 960px) {
  .section-padded { padding: 6.5rem 0; }
  .hero-content { padding: calc(var(--nav-h) + 4rem) 6vw 5rem; }
  .hero-scroll-hint { left: 6vw; }
  .about-layout { grid-template-columns: 1fr; gap: 4.5rem; }
  .av-main { max-width: 440px; clip-path: inset(0); }
  .pratique, .pratique.reverse { grid-template-columns: 1fr; gap: 3.5rem; direction: ltr; }
  .pm-main { clip-path: inset(0); }
  .pm-accent { width: 38%; bottom: -1.5rem; }
  .pratique.reverse .pm-accent { left: auto; right: -1rem; }
  .contact-layout { grid-template-columns: 1fr; gap: 3.5rem; }
  .footer-inner { grid-template-columns: 1fr; }
  .footer-nav { grid-template-columns: repeat(2,1fr); }
  .si-pillars { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
  .container { padding: 0 1.5rem; }
  h1 { font-size: 2.8rem; }
  .nav-inner { padding: 0 1.5rem; }
  .nav-links {
    display: none; position: fixed; inset: 0;
    background: rgba(255,252,249,.97); backdrop-filter: blur(18px);
    flex-direction: column; align-items: center; justify-content: center;
    gap: 3rem; z-index: 200;
  }
  .nav-links.open { display: flex; }
  .nav-links a { font-size: .9rem; }
  .burger { display: flex; }

  /* Sur petit écran, la perspective est réduite : le relief
     reste lisible sans faire déborder le contenu. */
  :root { --persp: 1600px; }
  .hero-content {
    width: 100%; max-width: none;
    padding: calc(var(--nav-h) + 5rem) 1.85rem 7rem;
  }
  .hero-eyebrow, .hero-content h1, .hero-sub, .hero-ctas { --z: 0px; }
  .hero-content h1 { font-size: clamp(3rem, 15vw, 4.2rem); }
  .hero-sub { max-width: 100%; margin-bottom: 2.7rem; line-height: 1.7; }
  .hero-sub span + span { margin-top: .5rem; }
  .hero-scroll-hint { left: 1.85rem; bottom: 1.5rem; }
  .hero-ctas { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .hero-ctas .btn-primary, .hero-ctas .btn-ghost { width: 100%; justify-content: center; }
  .btn-primary, .btn-ghost { margin-top: 0; }
  .marquee { transform: none; }
  .form-row { grid-template-columns: 1fr; }
  .avis-grid { grid-template-columns: 1fr; }
  .avis-quote-mark, .avis-text, .avis-footer { transform: none; }
  .si-pillars.si-pillars-duo { grid-template-columns: 1fr; }
  .si-closing { font-size: 1.15rem; padding-top: 1.5rem; }
  .pull-quote { padding: 3.5rem 0; }
  .pull-quote p { transform: none; }
  .pq-mark { transform: none; margin-bottom: 1.3rem; }
  .google-reviews { grid-template-columns: auto 1fr; padding: 1.5rem; }
  .google-reviews .btn-text-link { grid-column: 1 / -1; margin-top: .4rem; }
  .footer-nav { grid-template-columns: 1fr; }
  .av-secondary { width: 46%; right: 0; bottom: -1.5rem; }
  .about-visual.visible .av-secondary { transform: translate3d(0,0,40px); }
  .av-badge { left: -.5rem; width: 92px; height: 92px; }
  @keyframes badgeFloat {
    0%, 100% { transform: translate3d(0, 0, 70px) rotate(-8deg); }
    50%      { transform: translate3d(0, -10px, 90px) rotate(-5deg); }
  }
  .contact-form { padding: 2rem; }
  .dispo-simple { padding: 3.25rem 1.5rem; }
  .dispo-simple .label, .dispo-simple h2, .dispo-simple p { transform: none; }
  .cc-item { flex-direction: column; gap: .2rem; }
  .si-content { padding: 2.5rem 1.8rem; }
  .quote-inner { transform: none; }
  .back-top { width: 42px; height: 42px; right: 1.5rem; bottom: 1.5rem; }
}

/* ── Accessibilité : mouvement réduit ───────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* On coupe le déplacement, pas les retours visuels. Supprimer
     aussi les fondus de couleur rendait les boutons et les liens
     inertes : le site paraissait cassé plutôt que calme. */
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-property: opacity, color, background-color, border-color, box-shadow, clip-path !important;
    transition-duration: .25s !important;
  }

  /* Le bandeau ne défile plus : on l'assume en le fondant sur ses
     bords, au lieu de laisser un mot tranché net au ras du cadre. */
  .marquee-track { animation: none !important; transform: none !important; }
  .band {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 82%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 82%, transparent 100%);
  }
  .reveal, .reveal-right, .about-visual, .pratique, .avis-card, .sono-interlude {
    opacity: 1; transform: none;
  }
  .av-main, .pm-main { clip-path: none; }
  /* La profondeur reste (ombres, étagement), le mouvement part. */
  .hero-stage { transform: none; }
  .hero-eyebrow, .hero-content h1, .hero-sub, .hero-ctas { opacity: 1; transform: none; }
  .av-stack, .pratique-media, .google-reviews, .dispo-simple, .contact-img-wrap { transform: none; }
  .hero-orb, .hero-ring { animation: none; }
  .marquee { transform: none; }
}