/* Page spécifique : Head Spa — retouches locales uniquement */

/* ========= Réglages de taille (faciles à modifier) ========= */
#head-spa {
  --hero-video-maxw: 1200px;     /* largeur max de l’ovale vidéo */
  --hero-video-aspect: 16/10;    /* ratio de l’ovale */
  --hero-video-object-position: 50% 25%; /* remonte légèrement le cadrage */
}

/* Rend la vidéo responsive dans l’ovale existant */
#head-spa .hero-video {
  display: grid;
  place-items: center;
}

#head-spa .hero-video .oval {
  max-width: var(--hero-video-maxw);
  width: 100%;
  margin-inline: auto;
  position: relative;
  aspect-ratio: var(--hero-video-aspect);
  overflow: hidden;

  /* ovale fiable iOS + navigateurs modernes */
  clip-path: ellipse(50% 48% at 50% 50%);
  border-radius: 999px;                   /* fallback */
  -webkit-mask-image: -webkit-radial-gradient(white, black); /* iOS fix */
  border: 6px solid var(--sage);
  box-shadow: 0 20px 40px rgba(0,0,0,.12);
  background: #fff;
}

#head-spa .hero-video__el {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: var(--hero-video-object-position);
  border-radius: inherit;
}

/* Image de remplacement affichée après la vidéo */
.hero-video__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-video-object-position);
  border-radius: inherit;
  cursor: pointer;
  transition: opacity 0.25s ease;
}

/* Bouton Play centré */
.hero-video__play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border: 0;
  background: transparent;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hero-video__play:hover { transform: scale(1.05); opacity: 0.95; }

/* Titres */
#head-spa .section-title { letter-spacing: 0; }

/* Grands écrans : un peu plus large */
@media (min-width: 1400px) {
  #head-spa {
    --hero-video-maxw: 1320px;
    --hero-video-aspect: 16/10;
  }
}

/* Mobile : ratio plus vertical pour ne pas couper */
@media (max-width: 599px) {
  #head-spa { --hero-video-aspect: 4/5; --hero-video-object-position: 50% 20%; }
}