/* ============================================================
   Hero WOW — 3 traitements (DA Variante B conservée)
   Chargé après landing-b.css. Classes : hero-immersif / hero-anime / hero-bento
   ============================================================ */

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

/* =========================================================
   1 · IMMERSIF — photo + cartes de preuve flottantes
   ========================================================= */
.hero-immersif { position: relative; overflow: hidden; padding: 156px 0 110px; }
.hero-immersif .hero-blob {
  position: absolute; right: -8%; top: -16%; width: 64%; height: 130%;
  background: radial-gradient(circle at 50% 45%, rgba(139,92,246,0.20), rgba(139,92,246,0) 62%);
  z-index: 0; pointer-events: none;
}
.hero-immersif .container { position: relative; z-index: 1; }
.hero-immersif .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 72px; align-items: center; }
.hero-immersif .hero-visual { position: relative; }
.hero-immersif .hero-visual image-slot {
  display: block; width: 100%; aspect-ratio: 4 / 5;
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-lift);
}
.hero-immersif .float-chip {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,0.72); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.75); border-radius: 18px;
  padding: 14px 20px; box-shadow: var(--shadow-lift);
  display: flex; flex-direction: column; gap: 2px;
  animation: floaty 5.5s var(--ease-soft) infinite;
}
.hero-immersif .float-chip strong {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 26px;
  color: var(--or); line-height: 1;
}
.hero-immersif .float-chip span {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 11px;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--plomb);
}
.hero-immersif .chip-1 { left: -34px; top: 16%; animation-delay: 0s; }
.hero-immersif .chip-2 { left: -28px; bottom: 14%; animation-delay: 1.1s; }
.hero-immersif .chip-3 { right: -22px; top: 9%; animation-delay: 0.5s; }

/* =========================================================
   2 · ANIMÉ — hero centré, halo, mot qui défile, polaroids
   ========================================================= */
.hero-anime { position: relative; overflow: hidden; padding: 168px 0 96px; text-align: center; }
.hero-anime .hero-halo {
  position: absolute; left: 50%; top: 38%; width: 720px; height: 720px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(139,92,246,0.22), rgba(139,92,246,0) 62%);
  z-index: 0; pointer-events: none;
}
.hero-anime .container { position: relative; z-index: 2; }
.hero-anime .hero-center { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.hero-anime .eyebrow { justify-content: center; }
.hero-anime h1 { font-size: clamp(46px, 6.6vw, 104px); line-height: 1.02; }
.hero-anime .lede { margin: 30px auto 0; max-width: 600px; }
.hero-anime .hero-actions { justify-content: center; margin-top: 42px; }

.hero-anime .rotator {
  display: inline-block; position: relative; overflow: hidden;
  height: 1em; line-height: 1; vertical-align: bottom;
}
.hero-anime .rotator ul {
  margin: 0; padding: 0; list-style: none;
  animation: rollwords 11s cubic-bezier(0.76, 0, 0.24, 1) infinite;
}
.hero-anime .rotator li {
  height: 1em; line-height: 1; margin-bottom: 0.3em; color: var(--or); font-weight: 800; white-space: nowrap;
}
.hero-anime .dotfix { color: var(--or); }
@keyframes rollwords {
  0%, 24%   { transform: translateY(0); }
  32%, 57%  { transform: translateY(-1.3em); }
  65%, 90%  { transform: translateY(-2.6em); }
  98%, 100% { transform: translateY(-3.9em); }
}

.hero-anime .hero-polaroids { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-anime .pola {
  position: absolute; width: 150px; aspect-ratio: 4 / 5; display: block;
  border-radius: 10px; overflow: hidden; border: 6px solid #fff;
  box-shadow: var(--shadow-lift); pointer-events: auto;
  animation: floaty 6s var(--ease-soft) infinite;
}
.hero-anime .pola-1 { left: 2.5%;  top: 20%;  transform: rotate(-8deg);  animation-delay: 0s; }
.hero-anime .pola-2 { right: 3%;   top: 14%;  transform: rotate(7deg);   animation-delay: 0.8s; }
.hero-anime .pola-3 { left: 6%;    bottom: 8%; transform: rotate(6deg);  animation-delay: 1.4s; }
.hero-anime .pola-4 { right: 5.5%; bottom: 12%; transform: rotate(-7deg); animation-delay: 0.4s; }
@media (max-width: 1180px) { .hero-anime .pola { display: none; } }

/* =========================================================
   3 · BENTO — mosaïque moderne
   ========================================================= */
.hero-bento { padding: 140px 0 84px; }
.hero-bento .bento {
  display: grid; gap: 18px;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: auto auto auto;
  grid-template-areas:
    "head head photo"
    "head head photo"
    "stat statalt cta";
}
.hero-bento .bento-cell { border-radius: var(--r-lg); }
.hero-bento .bento-head {
  grid-area: head; background: var(--porcelaine); border: 1px solid var(--sable);
  box-shadow: var(--shadow-card); padding: 48px;
  display: flex; flex-direction: column; justify-content: center;
}
.hero-bento .bento-head h1 { font-size: clamp(34px, 3.4vw, 58px); line-height: 1.04; }
.hero-bento .bento-head .lede { font-size: 17px; margin-top: 20px; }
.hero-bento .bento-head .hero-actions { margin-top: 32px; }
.hero-bento .bento-photo {
  grid-area: photo; overflow: hidden; border-radius: var(--r-lg);
  box-shadow: var(--shadow-card); background: var(--ivoire-2);
}
.hero-bento .bento-photo image-slot { display: block; width: 100%; height: 100%; min-height: 440px; }
.hero-bento .bento-stat {
  background: var(--lavande); padding: 30px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.hero-bento .bento-stat { grid-area: stat; }
.hero-bento .bento-stat.alt { grid-area: statalt; background: var(--peche); }
.hero-bento .bento-stat strong {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 46px;
  color: var(--or); line-height: 1;
}
.hero-bento .bento-stat span {
  font-family: 'Plus Jakarta Sans', sans-serif; font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--plomb);
}
.hero-bento .bento-cta {
  grid-area: cta; background: var(--or); color: #fff; padding: 30px 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
}
.hero-bento .bento-cta-lbl {
  font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 18px; line-height: 1.3;
}
.hero-bento .bento-cta .btn { background: #fff; color: var(--or); align-self: flex-start; }
.hero-bento .bento-cta .btn:hover { background: #F4F1FD; }

/* ----------  Responsive  ---------- */
@media (max-width: 980px) {
  .hero-immersif .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .hero-immersif .float-chip { position: static; display: inline-flex; margin: 8px 8px 0 0; animation: none; }
  .hero-immersif .hero-blob { display: none; }
  .hero-bento .bento {
    grid-template-columns: 1fr; grid-template-rows: none;
    grid-template-areas: "head" "photo" "stat" "statalt" "cta";
  }
  .hero-bento .bento-photo image-slot { min-height: 320px; }
  .hero-anime h1 { font-size: clamp(40px, 9vw, 64px); }
}