/* ================================
   HERO HOME — Être Parents (scopé)
   ================================ */

.home #home-hero.ep-hero{
  /* Couleurs marque */
  --ink:#1e1e1e;
  --beige:#ecdcd3;
  --bg:#fff;

  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--bg);
  padding: 28px 18px 44px;

  /* ====== Fond dégradé animé (reprend ton .scroll-gradient Divi) ====== */
  background-image:
    linear-gradient(
      315deg,
      #ecdcd3, #f7f1ed, #ecdcd3, #b89a87, #a57c68, #9e6f66,
      #a57c68, #b89a87, #ecdcd3, #f5eae5, #ffffff, #ffffff, #f5eae5
    );
  background-size: 800% 800%;
  animation: epGradient 14s ease infinite;
}

/* Version mobile de ton dégradé (mêmes couleurs que ton module Divi) */
@media (max-width: 768px){
  .home #home-hero.ep-hero{
    background-image:
      linear-gradient(315deg, #ecdcd3, #b89a87, #ffffff, #a57c68, #f7f1ed);
    background-size: 400% 400%;
    animation: epGradientMobile 16s ease infinite;
  }
}

/* Animations du dégradé (scopées & renommées) */
@keyframes epGradient{
  0%{   background-position: 0% 50%; }
  50%{  background-position:100% 50%; }
  100%{ background-position: 0% 50%; }
}
@keyframes epGradientMobile{
  0%{   background-position: 0% 0%; }
  50%{  background-position:100% 100%; }
  100%{ background-position: 0% 0%; }
}

/* ====== Calque de forme (pills diagonales) au-dessus du dégradé ====== */
/* A. Version data-SVG recolorable (ultra légère) */
.home #home-hero .bg-calque{
  position: absolute;
  inset: 0;
  z-index: -1;                 /* derrière le contenu du hero */
  pointer-events: none;
  user-select: none;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: calc(100% + 2px) calc(100% + 2px);
  background-image: url("data:image/svg+xml;utf8,<svg fill='%23c7a797' viewBox='0 0 1920 1440' xmlns='http://www.w3.org/2000/svg'><path d='M1731.17,1001.24h0a118.5,118.5,0,0,1-26.62-165.46l215.45-298V429L1556.62,931.63a118.49,118.49,0,0,1-165.45,26.61h0a118.5,118.5,0,0,1-26.62-165.46L1920,24.4V0h-61.84L1526.62,458.63a118.49,118.49,0,0,1-165.45,26.61h0a118.5,118.5,0,0,1-26.62-165.46L1565.72,0H0V1440H525l637.07-881.3a118.5,118.5,0,0,1,165.46-26.62h0a118.5,118.5,0,0,1,26.62,165.46L817.48,1440H897l295.15-408.3a118.5,118.5,0,0,1,165.46-26.62h0a118.51,118.51,0,0,1,26.62,165.46L1189.4,1440h78.65l264.06-365.3a118.5,118.5,0,0,1,165.46-26.62h0a118.51,118.51,0,0,1,26.62,165.46L1560.48,1440H1920V942.29l-23.38,32.34A118.49,118.49,0,0,1,1731.17,1001.24Z'/></svg>");
}
/* B. Si tu préfères ton WebP (remplace la ligne ci-dessus) :
.home #home-hero .bg-calque{
  background-image:url('https://staging.etre-parents.fr/wp-content/uploads/2025/09/telecharger-_1_-scaled.webp');
  background-size: cover; background-position: 50% 50%;
}
*/

/* ====== Grille / Texte ====== */
.home #home-hero .hero-inner{
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  gap: 20px;
  align-items: start;
}
.home #home-hero h1{
  margin: 6px 0 10px;
  font-size: clamp(28px, 6.2vw, 42px);
  line-height: 1.1;
  letter-spacing:.02em;
  font-weight: 800;
}
.home #home-hero .ep-lead{
  margin: 0 0 18px;
  font-size: clamp(15px, 4.1vw, 18px);
  line-height: 1.6;
  color:#3d3d3d;
}

/* CTA “pill” */
.home #home-hero .hero-cta{
  display:flex;
  flex-direction:column;
  gap:14px;
  width:min(360px, 90%);
}
.home #home-hero .btn{
  display:inline-block; text-align:center;
  padding:14px 22px;
  border-radius:9999px;
  border:1.8px solid var(--ink);
  font-weight:600; letter-spacing:.06em;
  text-decoration:none;
  background:#fff; color:var(--ink);
  box-shadow:0 2px 0 rgba(0,0,0,.15);
}
.home #home-hero .btn.btn-fill{ background:var(--beige); }
.home #home-hero .btn:active{ transform: translateY(1px); }

/* ====== Visuel rond + anneau ====== */
.home #home-hero .hero-visual{
  margin:26px auto 0;
  width:min(78vw, 420px);
  aspect-ratio:1/1;
  border-radius:50%;
  background:#f5efe9;
  box-shadow:
    0 0 0 14px #fff,
    0 18px 40px rgba(0,0,0,.10);
  display:grid; place-items:center;
  overflow:hidden;
}
.home #home-hero .groupe-bebe-fruits{ position:relative; width:86%; height:86%; }
.home #home-hero .img-bebe{ width:100%; height:auto; display:block; border-radius:8%; }

/* ====== Fruits animés ====== */
.home #home-hero .fruit{
  position:absolute;
  animation: epFloat 6s ease-in-out infinite;
  will-change: transform; transform: translateZ(0);
}
.home #home-hero .fruit img{
  display:block; width: clamp(44px, 12vw, 70px); height:auto;
}
/* Positions mobiles (base Divi adaptée) */
.home #home-hero .fruit-1{ top:6%;  left:4%;  animation-delay:0s; }
.home #home-hero .fruit-2{ top:8%;  right:6%; animation-delay:.8s; }
.home #home-hero .fruit-3{ bottom:10%; left:8%; animation-delay:1.4s; }
.home #home-hero .fruit-4{ bottom:12%; right:10%; animation-delay:2s; }

@keyframes epFloat{
  0%,100%{ transform: translateY(0); }
  50%{    transform: translateY(-6px); }
}

/* ====== Desktop / large ====== */
@media (min-width:900px){
  .home #home-hero{
    padding: clamp(48px,6vw,80px) clamp(18px,5vw,40px) clamp(64px,8vw,120px);
  }
  .home #home-hero .hero-inner{
    grid-template-columns: 1.15fr 0.85fr;
    align-items:center; gap: clamp(24px, 5vw, 56px);
  }
  .home #home-hero .hero-cta{ flex-direction:row; width:auto; }
  .home #home-hero .hero-visual{
    margin:0 0 0 auto; width:min(34vw, 520px);
    box-shadow:0 0 0 18px #fff, 0 28px 60px rgba(0,0,0,.12);
  }
}

/* ====== Accessibilité : réduire les animations ====== */
@media (prefers-reduced-motion: reduce){
  .home #home-hero{ animation: none !important; }
  .home #home-hero .fruit{ animation: none !important; }
}
.home #home-hero .sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
/* FULL BLEED — étend #home-hero sur toute la largeur */
.home #home-hero{
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  max-width: none;
}
.home #home-hero{
  padding-top: clamp(56px, 7vw, 120px);
  padding-bottom: clamp(80px, 10vw, 160px);
}