/* ==========================================================================
   AUX BAINS MAGIQUES — Univers « Le passage, de la nuit à l'aube »
   Complète bains.css (design system de base). Chaque effet a un état de repli
   lisible : sans script (.bm-magie absente) ou en mouvement réduit, tout est
   affiché dans son état final.
   ========================================================================== */

:root {
  --bm-night:        #0f1c19;
  --bm-night-soft:   #17302a;
  --bm-firefly:      #f3dca2;
  --bm-petal:        #e9c3b5;
  --bm-water:        #a3d0cb;
  --bm-on-night:     rgba(247, 241, 230, 0.86); /* 11,7:1 sur --bm-night */
}

/* ==========================================================================
   0. Document
   --------------------------------------------------------------------------
   Betheme pose `overflow-x: hidden` sur <html> : celui de <body> (bains.css)
   n'est alors plus reporté sur la fenêtre et <body> devient un conteneur de
   défilement, ce qui neutralise tout `position: sticky` du site. `clip` rogne
   pareillement sans créer de conteneur. Safari < 16 ignore `clip` et garde
   `hidden` : seule la colonne fixe du passage y défile normalement.
   ========================================================================== */

body.bm-site { overflow-x: clip; }

/* Les boutons flottants ne doivent pas recouvrir le bas du pied de page. */
body.bm-site #Footer { padding-bottom: 84px; }

/* ==========================================================================
   1. Préproduction — repères « à compléter » (filet de sécurité : ils ne sont
   de toute façon pas rendus pour un visiteur, voir inc/staging.php)
   ========================================================================== */

body.bm-site:not(.logged-in) .bm-todo-widget { display: none; }

/* ==========================================================================
   2. Sections de nuit
   ========================================================================== */

body.bm-site .bm-nuit {
  background-color: var(--bm-night);
  background-image:
    radial-gradient(110% 70% at 12% 0%, rgba(38, 55, 42, 0.95), transparent 62%),
    radial-gradient(90% 60% at 100% 100%, rgba(23, 48, 42, 0.9), transparent 70%);
  color: var(--bm-on-night);
}
body.bm-site .bm-nuit .elementor-heading-title { color: var(--bm-cream); }
body.bm-site .bm-nuit .elementor-heading-title em { color: var(--bm-gold-light); }
body.bm-site .bm-nuit .bm-eyebrow .elementor-heading-title { color: var(--bm-gold-light); }
body.bm-site .bm-nuit .elementor-widget-text-editor p { color: var(--bm-on-night); }
body.bm-site .bm-nuit .bm-ornament span { background: var(--bm-gold-light); }
body.bm-site .bm-nuit .bm-disclaimer { color: var(--bm-on-night); border-left-color: var(--bm-gold-light); }
body.bm-site .bm-nuit .bm-lead-center p { color: var(--bm-on-night); }

/* Petits écrans : sur-titre et filets tiennent sur une ligne */
@media (max-width: 480px) {
  body.bm-site .bm-eyebrow .elementor-heading-title { letter-spacing: 0.16em; gap: 0.6em; }
  body.bm-site .bm-eyebrow .elementor-heading-title::before,
  body.bm-site .bm-eyebrow .elementor-heading-title::after { width: 18px; }
}

/* Lucioles : canevas entre le voile (::before) et le contenu */
body.bm-site .bm-lucioles { position: relative; isolation: isolate; }
.bm-lucioles__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}
body.bm-site .bm-lucioles > .e-con-inner,
body.bm-site .bm-lucioles > .elementor-element { position: relative; z-index: 2; }

/* ==========================================================================
   3. Hero vidéo
   ========================================================================== */

body.bm-site .bm-hero--video::before {
  background:
    radial-gradient(75% 65% at 50% 48%, rgba(9, 18, 15, 0.64) 0%, rgba(9, 18, 15, 0.44) 60%, rgba(9, 18, 15, 0.3) 100%),
    linear-gradient(0deg, rgba(9, 18, 15, 0.7) 0%, transparent 38%);
}

body.bm-site .bm-hero--video .bm-hero__content { max-width: 50rem; margin-inline: auto; }
body.bm-site .bm-hero--video .bm-hero__title .elementor-heading-title { text-wrap: balance; }
body.bm-site .bm-hero--video .bm-hero__lead p { margin-inline: auto; text-wrap: pretty; }

/* La vidéo apparaît en fondu une fois lancée : jamais d'image noire. */
.bm-magie body.bm-site .elementor-background-video-hosted {
  opacity: 0;
  transition: opacity 1.8s var(--bm-ease-soft);
}
.bm-magie body.bm-site .elementor-background-video-hosted.is-playing { opacity: 1; }

/* Invitation sonore dans le hero (bouton Elementor pointant vers #ambiance) */
body.bm-site .bm-btn--ambiance .elementor-button {
  background: transparent;
  border-color: transparent;
  color: var(--bm-cream);
  padding-inline: 0.6em;
  gap: 0.7em;
}
body.bm-site .bm-btn--ambiance .elementor-button::before {
  content: "";
  width: 20px;
  height: 20px;
  flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23dfc08a'%3E%3Crect x='3' y='9' width='2.4' height='6' rx='1.2'/%3E%3Crect x='8' y='5' width='2.4' height='14' rx='1.2'/%3E%3Crect x='13' y='7' width='2.4' height='10' rx='1.2'/%3E%3Crect x='18' y='10' width='2.4' height='4' rx='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
body.bm-site .bm-btn--ambiance .elementor-button .elementor-button-text {
  background-image: linear-gradient(var(--bm-gold-light), var(--bm-gold-light));
  background-size: 100% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  padding-bottom: 0.35em;
}
body.bm-site .bm-btn--ambiance .elementor-button:hover,
body.bm-site .bm-btn--ambiance .elementor-button:focus-visible { color: var(--bm-gold-light); background: transparent; }
body.bm-site .bm-btn--ambiance .elementor-button[aria-pressed="true"]::before { animation: bm-pulse 1.6s ease-in-out infinite; }

/* ==========================================================================
   4. Bouton flottant d'ambiance sonore
   ========================================================================== */

body.bm-site .bm-ambiance {
  position: fixed;
  left: clamp(1rem, 2vw, 1.75rem);
  bottom: clamp(1rem, 2vw, 1.75rem);
  z-index: 9980;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  height: 52px;
  padding: 0 1.2rem 0 0.9rem;
  border: 1px solid rgba(223, 192, 138, 0.45);
  border-radius: 999px;
  background: rgba(15, 28, 25, 0.78);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--bm-cream);
  font-family: var(--bm-font-eyebrow);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(9, 18, 15, 0.22);
  transition: background-color var(--bm-dur-fast) var(--bm-ease-soft),
              border-color var(--bm-dur-fast) var(--bm-ease-soft),
              transform var(--bm-dur) var(--bm-ease),
              opacity var(--bm-dur) var(--bm-ease),
              visibility var(--bm-dur) var(--bm-ease);
}
body.bm-site .bm-ambiance[hidden] { display: none !important; }

/* Tant que l'invitation du hero est à l'écran, le bouton flottant ferait
   doublon ; `visibility` le retire aussi de l'ordre de tabulation. */
.bm-ambiance-invite-visible body.bm-site .bm-ambiance {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}
body.bm-site .bm-ambiance:hover { background: rgba(15, 28, 25, 0.92); border-color: var(--bm-gold-light); transform: translateY(-2px); }
body.bm-site .bm-ambiance:focus-visible { outline: 2px solid var(--bm-gold-light); outline-offset: 3px; }

.bm-ambiance__icone { display: inline-flex; width: 22px; height: 22px; }
.bm-ambiance__icone svg { width: 100%; height: 100%; fill: var(--bm-gold-light); }

.bm-ambiance__onde {
  transform-box: fill-box;
  transform-origin: center;
  transform: scaleY(0.4);
  transition: transform var(--bm-dur) var(--bm-ease);
}
.bm-ambiance[aria-pressed="true"] .bm-ambiance__onde { animation: bm-onde 0.9s ease-in-out infinite alternate; }
.bm-ambiance[aria-pressed="true"] .bm-ambiance__onde:nth-child(2) { animation-delay: -0.3s; }
.bm-ambiance[aria-pressed="true"] .bm-ambiance__onde:nth-child(3) { animation-delay: -0.6s; }
.bm-ambiance[aria-pressed="true"] .bm-ambiance__onde:nth-child(4) { animation-delay: -0.15s; }
.bm-ambiance[data-state="loading"] .bm-ambiance__icone { animation: bm-pulse 1.2s ease-in-out infinite; }

/* Préférence mémorisée : un halo invite à toucher la page pour reprendre. */
.bm-ambiance-armed body.bm-site .bm-ambiance { animation: bm-halo 2.4s ease-in-out infinite; }

@keyframes bm-onde  { from { transform: scaleY(0.35); } to { transform: scaleY(1); } }
@keyframes bm-pulse { 50% { opacity: 0.45; } }
@keyframes bm-halo  {
  0%, 100% { box-shadow: 0 6px 20px rgba(9, 18, 15, 0.22), 0 0 0 0 rgba(223, 192, 138, 0.45); }
  50%      { box-shadow: 0 6px 20px rgba(9, 18, 15, 0.22), 0 0 0 10px rgba(223, 192, 138, 0); }
}

/* Mobile : pastille ronde au-dessus de la barre d'action, à droite où les
   textes (alignés à gauche) ne passent pas dessous ; libellé conservé pour
   les lecteurs d'écran. */
@media (max-width: 767px) {
  body.bm-site .bm-ambiance {
    left: auto;
    right: 0.75rem;
    bottom: calc(66px + env(safe-area-inset-bottom) + 0.7rem);
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
  }
  .bm-ambiance__texte {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}
@media (max-height: 520px) {
  body.bm-site .bm-ambiance { display: none; }
}

/* ==========================================================================
   5. Titres qui sortent de la brume
   ========================================================================== */

.bm-js .bm-reveal.elementor-widget-heading {
  filter: blur(9px);
  transition: opacity var(--bm-dur-slow) var(--bm-ease),
              transform var(--bm-dur-slow) var(--bm-ease),
              filter var(--bm-dur-slow) var(--bm-ease);
}
.bm-js .bm-reveal.elementor-widget-heading.is-visible { filter: none; }

/* ==========================================================================
   6. Le passage — de la nuit à l'aube
   ========================================================================== */

/* Aucun overflow sur cette section : il casserait la colonne sticky. */
body.bm-site .bm-passage {
  --bm-p: 1;              /* sans script : ligne tracée, aube levée */
  position: relative;
}
.bm-magie body.bm-site .bm-passage { --bm-p: 0; }

/* Lueur d'aube qui monte avec la progression */
body.bm-site .bm-passage::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 75%;
  z-index: 0;
  pointer-events: none;
  opacity: var(--bm-p);
  background: radial-gradient(85% 95% at 50% 100%, rgba(233, 195, 181, 0.3), rgba(243, 220, 162, 0.12) 45%, transparent 75%);
}

body.bm-site .bm-passage .bm-split {
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: start;
}

body.bm-site .bm-passage__aside {
  position: sticky;
  top: calc(16vh + 40px);
}

.bm-passage__visuel { display: flex; align-items: flex-end; gap: 1.4rem; margin-top: 1.6rem; }
.bm-passage__ligne { width: 44px; height: clamp(180px, 34vh, 320px); overflow: visible; flex: none; }
.bm-passage__trace-fond,
.bm-passage__trace { fill: none; stroke-width: 2; stroke-linecap: round; }
.bm-passage__trace-fond { stroke: rgba(223, 192, 138, 0.2); }
.bm-passage__trace {
  stroke: var(--bm-gold-light);
  stroke-dasharray: 1;
  stroke-dashoffset: calc(1 - var(--bm-p));
}

.bm-passage__compteur-ligne {
  margin: 0;
  font-family: var(--bm-font-display);
  font-size: var(--bm-text-lg);
  font-style: italic;
  color: var(--bm-gold-light);
  line-height: 1;
}
.bm-passage__compteur { font-size: var(--bm-text-3xl); }

body.bm-site .bm-passage__step {
  min-height: 56vh;
  justify-content: center;
  padding-left: clamp(1.2rem, 0.8rem + 1.6vw, 2.4rem);
  border-left: 1px solid rgba(223, 192, 138, 0.22);
  transition: border-color var(--bm-dur) var(--bm-ease);
}
/* Étape non active : atténuée mais lisible (5,6:1 au minimum) */
.bm-magie body.bm-site .bm-passage__step > .elementor-element {
  opacity: 0.68;
  transition: opacity var(--bm-dur-slow) var(--bm-ease);
}
.bm-magie body.bm-site .bm-passage__step.is-active > .elementor-element { opacity: 1; }
body.bm-site .bm-passage__step.is-active { border-left-color: var(--bm-gold-light); }

body.bm-site .bm-passage__titre .elementor-heading-title { font-size: var(--bm-text-2xl); }

@media (max-width: 900px) {
  body.bm-site .bm-passage .bm-split { grid-template-columns: minmax(0, 1fr); }
  body.bm-site .bm-passage__aside { position: static; }
  .bm-passage__visuel { display: none; }
  body.bm-site .bm-passage__step { min-height: 0; padding-block: 1.6rem; }
  .bm-magie body.bm-site .bm-passage__step > .elementor-element { opacity: 1; }
}

/* ==========================================================================
   7. Pétales et feuillages en parallaxe
   ========================================================================== */

/* Le débordement des décors est rogné par .bm-decor lui-même. */
body.bm-site .bm-petales { position: relative; }
body.bm-site .bm-petales > .e-con-inner,
body.bm-site .bm-petales > .elementor-element { position: relative; z-index: 1; }

.bm-decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.bm-decor__item {
  position: absolute;
  top: var(--bm-decor-top);
  width: var(--bm-decor-size);
  will-change: transform;
}
.bm-decor__sway {
  display: block;
  transform: rotate(var(--bm-decor-rotate));
  transform-origin: 50% 90%;
  animation: bm-sway 12s ease-in-out var(--bm-decor-delay) infinite alternate;
}
.bm-decor__sway svg { display: block; width: 100%; height: auto; }

.bm-decor__item--feuille      { opacity: 0.15; }
.bm-decor__item--frangipanier { opacity: 0.92; filter: drop-shadow(0 10px 18px rgba(38, 55, 42, 0.12)); }
.bm-decor__item--petale       { opacity: 0.85; }

@keyframes bm-sway {
  from { transform: rotate(var(--bm-decor-rotate)) translateY(0); }
  to   { transform: rotate(calc(var(--bm-decor-rotate) + 8deg)) translateY(-12px); }
}

@media (max-width: 900px) {
  .bm-decor__item { width: calc(var(--bm-decor-size) * 0.6); }
  .bm-decor__item--feuille { opacity: 0.1; }
  .bm-decor__item:nth-child(n + 4) { display: none; }
}

/* ==========================================================================
   8. Caducée d'Hermès — tracé qui se dessine une seule fois
   ========================================================================== */

.bm-caducee { display: flex; justify-content: center; }
.bm-caducee svg { width: clamp(118px, 14vw, 168px); height: auto; overflow: visible; }

.bm-caducee .bm-trait {
  fill: none;
  stroke: var(--bm-gold-text);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.bm-caducee .bm-trait--aile  { stroke: var(--bm-gold); }
.bm-caducee .bm-trait--liane { stroke: var(--bm-olive); stroke-width: 1.4; }
.bm-caducee .bm-plein        { fill: var(--bm-gold-text); }

.bm-js .bm-caducee .bm-trait {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.4s var(--bm-ease-soft);
}
.bm-js .bm-caducee .bm-plein { opacity: 0; transition: opacity 0.9s var(--bm-ease-soft) 2.3s; }
.bm-js .bm-caducee .bm-trait--serpent { transition-delay: 0.5s; }
.bm-js .bm-caducee .bm-trait--aile    { transition-delay: 1.3s; }
.bm-js .bm-caducee .bm-trait--liane   { transition-delay: 1.9s; }

.bm-js .is-visible .bm-caducee .bm-trait { stroke-dashoffset: 0; }
.bm-js .is-visible .bm-caducee .bm-plein { opacity: 1; }

body.bm-site .bm-nuit .bm-caducee .bm-trait        { stroke: var(--bm-gold-light); }
body.bm-site .bm-nuit .bm-caducee .bm-trait--liane { stroke: var(--bm-water); }
body.bm-site .bm-nuit .bm-caducee .bm-plein        { fill: var(--bm-gold-light); }

/* ==========================================================================
   9. Liste des soins (accueil)
   ========================================================================== */

.bm-soins-liste { list-style: none; margin: 0; padding: 0; counter-reset: none; }
.bm-soins-liste li { border-top: 1px solid rgba(184, 135, 59, 0.28); }
.bm-soins-liste li:last-child { border-bottom: 1px solid rgba(184, 135, 59, 0.28); }

body.bm-site .bm-soins-liste a {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  align-items: baseline;
  column-gap: 1rem;
  min-height: 64px;
  padding: 1.05rem 0.4rem;
  color: var(--bm-forest);
  text-decoration: none;
  transition: background-color var(--bm-dur) var(--bm-ease), padding var(--bm-dur) var(--bm-ease);
}
.bm-soins-liste__index {
  font-family: var(--bm-font-eyebrow);
  font-size: var(--bm-text-xs);
  letter-spacing: 0.2em;
  color: var(--bm-gold-text);
}
.bm-soins-liste__titre {
  font-family: var(--bm-font-display);
  font-size: var(--bm-text-xl);
  line-height: 1.2;
}
.bm-soins-liste__accroche {
  grid-column: 2;
  font-size: var(--bm-text-sm);
  color: var(--bm-ink-soft);
  line-height: 1.55;
}
.bm-soins-liste__fleche {
  grid-column: 3;
  grid-row: 1 / span 2;
  align-self: center;
  color: var(--bm-gold-text);
  transition: transform var(--bm-dur) var(--bm-ease);
}
body.bm-site .bm-soins-liste a:hover,
body.bm-site .bm-soins-liste a:focus-visible {
  background: linear-gradient(90deg, rgba(240, 226, 198, 0.55), transparent);
  padding-left: 1rem;
}
body.bm-site .bm-soins-liste a:hover .bm-soins-liste__titre { font-style: italic; color: var(--bm-gold-text); }
body.bm-site .bm-soins-liste a:hover .bm-soins-liste__fleche { transform: translateX(6px); }

/* ==========================================================================
   10. Avant / après et piliers
   ========================================================================== */

body.bm-site .bm-avant,
body.bm-site .bm-apres {
  padding: clamp(1.6rem, 1.1rem + 2vw, 2.8rem);
  border-radius: var(--bm-radius-soft);
  height: 100%;
}
body.bm-site .bm-avant {
  background: var(--bm-night);
  background-image: radial-gradient(90% 80% at 0% 0%, rgba(38, 55, 42, 0.95), transparent 70%);
}
body.bm-site .bm-avant .elementor-heading-title { color: var(--bm-cream); }
body.bm-site .bm-avant .bm-eyebrow .elementor-heading-title { color: var(--bm-gold-light); }
body.bm-site .bm-avant .bm-benefits li { color: var(--bm-on-night); }
body.bm-site .bm-avant .bm-benefits li::before { background: var(--bm-water); }

body.bm-site .bm-apres {
  background: var(--bm-white);
  border: 1px solid rgba(184, 135, 59, 0.3);
  box-shadow: 0 0 60px rgba(243, 220, 162, 0.35), var(--bm-shadow-soft);
}

/* Halo doré au survol des cartes : la lumière qui « répond » */
body.bm-site a.bm-card:hover,
body.bm-site a.bm-card:focus-visible,
.bm-value:hover {
  box-shadow: var(--bm-shadow-lift), 0 0 44px rgba(243, 220, 162, 0.4);
}

/* Bloc de confiance « ce que sont / ne sont pas nos soins » */
.bm-confiance { display: grid; gap: 1.2rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bm-confiance > div {
  background: var(--bm-white);
  border: 1px solid rgba(184, 135, 59, 0.22);
  border-radius: var(--bm-radius-soft);
  padding: clamp(1.3rem, 1rem + 1.2vw, 2rem);
}
.bm-confiance h3 { margin: 0 0 0.8rem; font-size: var(--bm-text-lg); }
@media (max-width: 700px) { .bm-confiance { grid-template-columns: minmax(0, 1fr); } }

/* ==========================================================================
   11. Mouvement réduit : états finaux, aucune animation
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  body.bm-site .elementor-background-video-container { display: none !important; }
  .bm-decor__sway,
  .bm-ambiance__onde,
  .bm-ambiance__icone,
  body.bm-site .bm-ambiance,
  body.bm-site .bm-btn--ambiance .elementor-button::before { animation: none !important; }
  .bm-passage__visuel { display: none; }
  .bm-magie body.bm-site .bm-passage__step > .elementor-element { opacity: 1; }
  body.bm-site .bm-passage::before { opacity: 1; }
}