/* =====================================================
   SÈVE FÉMININE — SOINS (pages soin-*.html)
   Hero + bienfaits + réservation + responsive
   Version POPUP Calendly (pas d’inline widget)
   ===================================================== */

/* HERO soin (sable) */
.soin-hero{
  display: flex;
  align-items: flex-start;
  gap: 2.2rem;
  width: 100%;
  margin: 2.2rem auto;
  padding: 3rem 2rem;
  background: #D0B98B;

}
.soin-hero h3,
.soin-hero p{
  color: #fff;
}


.soin-image{ flex: 0 0 220px; max-width: 220px; }

.soin-image img{
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 22px;
  box-shadow: 0 16px 38px rgba(0,0,0,0.12);
}

.soin-texte{ flex: 1; max-width: 62ch; }
.soin-texte p{ font-size: 1.03rem; line-height: 1.7; margin-bottom: 1rem; }

/* BIENFAITS : bloc large + aligné à gauche */
.soin-bienfaits{
  max-width: 1100px;
  width: 100%;
  margin: 1.4rem auto 0.7rem;
  padding: 0 2rem;
  text-align: left;
}

.soin-bienfaits ul{ margin: 0 0 0 1.2rem; padding: 0; }
.soin-bienfaits li,
.soin-bienfaits p{ text-align: left !important; }

/* Séparateur */
.sep-soin{
  width: 100%;
  max-width: 460px;
  margin: 0.8rem auto 1rem;
  border: none;
  border-bottom: 1px solid rgba(120,95,75,0.35);
}

/* Réservation */
.soin-reservation{
  width: 100%;
  margin: 0 auto 2rem;
  padding: 0 2rem;
  max-width: 1000px;
}
.soin-reservation > h3{ text-align: center; }

/* Grille des cartes réservation */
.soin-cards{
  display: grid;
  grid-template-columns: repeat(2, minmax(280px, 1fr));
  gap: 1.2rem;
  margin-top: 2rem;
}

/* Carte réservation */
.soin-card{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;

  padding: 1rem 1.2rem;
  border-radius: var(--radius-lg);
  background: rgba(255,253,249,0.9);
  border: 1px solid rgba(205,176,150,0.5);
  box-shadow: var(--shadow);
}

.soin-content{
  display:flex;
  flex-direction:column;
  justify-content:center;
}

.soin-card h3{ margin: 0 0 0.35rem; }
.soin-price{ margin: 0 0 0.45rem; color: var(--text); }

.soin-ligne{
  display:flex;
  align-items: baseline;
  gap: 0.6rem;
  margin: 0;
  color: var(--text);
  font-size: .95rem;
}

/* Select */
.soin-select{
  border: none;
  border-bottom: 1px solid rgba(120,95,75,0.45);
  background: transparent;
  font-family: inherit;
  font-size: .95rem;
  padding: .25rem .2rem;
  color: var(--text);
  outline: none;
  cursor: pointer;
}
.soin-select:hover{ border-bottom-color: var(--accent); }
.soin-select:focus{ border-bottom-color: var(--accent2); }

/* Panels réservation (popup / planity) */
.booking-panel{
  width: 100%;
  margin-top: 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* aligne avec la colonne droite */
  gap: 0.5rem;
}

.booking-planity{
  text-align: right;
}

/* Bouton réservation (colonne droite) */
.booking-btn{
  justify-self: end;
  align-self: center;
  margin: 0;
  white-space: nowrap;
}

.booking-hint{
  margin: 0;
  font-size: 0.88rem;
  color: var(--muted);
  text-align: right;
}

/* Si une seule carte (ex : prénatal) → centrée */
.soin-cards:has(.soin-card:only-child){
  grid-template-columns: minmax(280px, 560px);
  justify-content: center;
}

/* ===================== RESPONSIVE SOINS ===================== */

/* <= 900px : 1 colonne */
@media (max-width: 900px){
  .soin-cards{ grid-template-columns: 1fr; }

  .soin-card{
    grid-template-columns: 1fr;
    row-gap: 0.8rem;
  }

  .booking-panel{
    align-items: center;
    text-align: center;
  }

  .booking-hint{
    text-align: center;
  }

  .booking-btn{
    width: 100%;
    max-width: 260px;
    text-align: center;
  }
}

/* <= 640px : hero stack + paddings */
@media (max-width: 640px){
  .soin-hero{
    flex-direction: column;
    padding: 2.2rem 1.2rem;
    gap: 1.2rem;
  }
  .soin-image{ max-width: 100%; flex: 1; }
  .soin-bienfaits,
  .soin-reservation{ padding: 0 1.2rem; }

  .soin-image img{ aspect-ratio: 3 / 4; }
}
/* HERO SOIN */
.soin-hero{
  position: relative;
  overflow: visible;       /* important */
  z-index: 2;
  padding-bottom: 0;  /* espace avant la banane */
  background: var(--bg-hero, #D0B98B); /* à adapter si tu as une couleur */
}

/* Banane convexe vers le bas */
.soin-hero::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: -150px;           /* profondeur de la banane */
  width: 140%;
  height: 500px;
  background: var(--bg-hero, #D0B98B); /* même couleur que le hero */
  border-radius: 0 0 100% 100%;
  transform: translateX(-50%);
  z-index: 1;
  pointer-events: none;
}

/* Contenu au-dessus */
.soin-hero > *{
  position: relative;
  z-index: 3;
}

/* SECTION SUIVANTE : on évite que le contenu passe sous la banane */
.soin-hero + .section-soin-details{
  position: relative;
  z-index: 1;
  padding-top: 110px; /* ≈ -bottom (90) + marge */
}
/* État initial (avant entrée écran) */
.reveal{
  opacity: 0;
  transform: translateY(22px);
  transition: transform 700ms cubic-bezier(.2,.8,.2,1), opacity 700ms ease;
  will-change: transform, opacity;
}

/* État visible */
.reveal.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* Accessibilité : si l'utilisateur préfère réduire les animations */
@media (prefers-reduced-motion: reduce){
  .reveal{
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}
.soin-cards .soin-card.reveal{ transition-delay: 0ms; }
.soin-cards .soin-card.reveal:nth-child(2){ transition-delay: 80ms; }
.soin-cards .soin-card.reveal:nth-child(3){ transition-delay: 160ms; }
.soin-cards .soin-card.reveal:nth-child(4){ transition-delay: 240ms; }

/* Footer – couleur sombre */
.site-footer,
.site-footer p,
.site-footer a{
  color: #2f2a25 !important; /* brun foncé doux */
}

.site-footer a{
  text-decoration: underline;
}

.site-footer a:hover{
  color: #000;
}