/* ===========================================================
   MASSAGE GUIDÉ — spa zen, cercle de respiration
   =========================================================== */
body.massage {
  --theme: #c9806b;
  --theme-2: #e8b49a;
  --jade: #6fc2b0;
  --panneau: rgba(14, 26, 25, 0.86);
  background: #0d1716;
}
.massage .marque h1 { font-weight: 500; }
.massage .marque h1 em { color: var(--theme-2); text-shadow: 0 0 24px rgba(232, 180, 154, 0.5); }
.spa { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; background: radial-gradient(800px 600px at 50% 40%, #1e3330, #0d1716 70%); }
.halo { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.35; animation: respire-halo 8s ease-in-out infinite; }
.halo.h1 { width: 60vmax; height: 60vmax; left: -20vmax; top: -20vmax; background: #c9806b; }
.halo.h2 { width: 50vmax; height: 50vmax; right: -20vmax; bottom: -10vmax; background: #6fc2b0; animation-delay: -3s; }
.halo.h3 { width: 30vmax; height: 30vmax; left: 40%; top: 60%; background: #e8b49a; animation-delay: -5s; opacity: 0.2; }
@keyframes respire-halo { 50% { transform: scale(1.15); opacity: 0.2; } }
.lotus { width: 110px; margin: 0 auto; color: var(--theme-2); filter: drop-shadow(0 0 14px rgba(232, 180, 154, 0.6)); }
.lotus.grand { width: 150px; }
.note-privee { margin: -4px 0 0; font-size: 0.74rem; color: var(--muted); text-align: center; line-height: 1.4; }

/* ---------- Massage ---------- */
.massage-ecran { gap: 10px; }
.progression { height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); overflow: hidden; flex: none; }
.progression span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--jade), var(--theme-2)); transition: width 0.6s ease; }
.zone { margin: 4px 0 0; text-align: center; font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--theme-2); flex: none; }
.souffle-boite { flex: 1; min-height: 0; display: grid; place-items: center; }
.souffle { position: relative; width: min(64vw, 34dvh, 280px); aspect-ratio: 1; display: grid; place-items: center; }
.souffle::before { content: ''; position: absolute; inset: 12%; border-radius: 50%; background: radial-gradient(circle, rgba(232, 180, 154, 0.35), rgba(111, 194, 176, 0.12) 60%, transparent 72%); animation: respire 8s ease-in-out infinite; }
.souffle.en-pause::before { animation-play-state: paused; }
@keyframes respire { 0%, 100% { transform: scale(0.7); } 50% { transform: scale(1.12); } }
.souffle svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.souffle circle { fill: none; stroke-width: 2.5; }
.souffle .piste { stroke: rgba(255, 255, 255, 0.08); }
.souffle .reste { stroke: var(--theme-2); stroke-linecap: round; stroke-dasharray: 100 100; filter: drop-shadow(0 0 6px var(--theme-2)); transition: stroke-dasharray 1s linear; }
.souffle b { position: relative; font-family: var(--serif); font-weight: 500; font-size: clamp(2rem, 7dvh, 3rem); font-variant-numeric: tabular-nums; line-height: 1; }
.souffle span { position: absolute; bottom: 24%; font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--jade); }
.consigne { margin: 0; min-height: 4.2em; text-align: center; font-family: var(--serif); font-size: clamp(1.15rem, min(5.2vw, 3dvh), 1.5rem); line-height: 1.35; flex: none; animation: fondu 0.8s ease; }
@keyframes fondu { from { opacity: 0; transform: translateY(8px); } }
.commandes { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; flex: none; }
.commandes .btn { padding: 12px 18px; }
.commandes .btn.primary { background: linear-gradient(135deg, var(--theme), #a85f4c); }

.fin .lotus { animation: respire 8s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .halo, .souffle::before, .fin .lotus { animation: none; }
}