.hero {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  padding: calc(var(--nav-h) + 3rem) 3.5rem 5rem;
  background: linear-gradient(135deg, var(--rose-pale) 0%, var(--cream) 60%);
  gap: 3rem;
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  animation: orbFloat ease-in-out infinite;
}
.orb-1 {
  width: 500px; height: 500px;
  top: -120px; right: -80px;
  background: radial-gradient(circle, rgba(212,96,122,.1) 0%, transparent 70%);
  animation-duration: 8s;
}
.orb-2 {
  width: 320px; height: 320px;
  bottom: -80px; left: 20%;
  background: radial-gradient(circle, rgba(201,169,110,.09) 0%, transparent 70%);
  animation-duration: 11s; animation-delay: -3s;
}
.orb-3 {
  width: 200px; height: 200px;
  top: 42%; left: -40px;
  background: radial-gradient(circle, rgba(242,167,195,.14) 0%, transparent 70%);
  animation-duration: 9s; animation-delay: -5s;
}

.hero-text { position: relative; z-index: 2; }

.hero-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--rose-light);
  border: 1px solid rgba(242,167,195,.5);
  border-radius: 50px;
  padding: .4rem 1.1rem;
  font-size: .73rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rose-deep);
  margin-bottom: 1.8rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s .2s, transform .6s .2s;
}
.hero-badge.show { opacity: 1; transform: translateY(0); }

h1 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 4.4rem; line-height: 1.04; font-weight: 300;
  color: var(--text-dark);
  margin-bottom: 1.5rem;
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s .4s, transform .7s .4s;
}
h1.show { opacity: 1; transform: translateY(0); }
h1 em { font-style: italic; color: var(--rose-deep); }

.hero-sub {
  font-size: .98rem; line-height: 1.75;
  color: var(--text-mid); font-weight: 300;
  max-width: 420px;
  margin-bottom: 2.5rem;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s .6s, transform .7s .6s;
}
.hero-sub.show { opacity: 1; transform: translateY(0); }

.hero-actions {
  display: flex; gap: 1rem; flex-wrap: wrap; align-items: center;
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s .8s, transform .7s .8s;
}
.hero-actions.show { opacity: 1; transform: translateY(0); }

.trust-row {
  display: flex; gap: 1.6rem; flex-wrap: wrap;
  margin-top: 2.2rem;
  opacity: 0;
  transition: opacity .7s 1s;
}
.trust-row.show { opacity: 1; }
.trust-item {
  display: flex; align-items: center; gap: .45rem;
  font-size: .77rem; color: var(--text-mid); letter-spacing: .04em;
}

/* ── Hero Visual ── */
.hero-visual {
  position: relative;
  display: flex; justify-content: center; align-items: center;
  opacity: 0; transform: translateX(40px);
  transition: opacity .8s .5s, transform .8s .5s;
  z-index: 2;
}
.hero-visual.show { opacity: 1; transform: translateX(0); }

/* ── Logo Animation Wrapper ── */
.logo-animation-wrapper {
  position: relative;
  width: 400px;
  height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Anneaux décoratifs tournants */
.logo-anim-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(212, 96, 122, .18);
  pointer-events: none;
}
.logo-anim-ring--1 {
  width: 340px; height: 340px;
  border-style: dashed;
  animation: ringRotate 22s linear infinite;
}
.logo-anim-ring--2 {
  width: 390px; height: 390px;
  border-color: rgba(201, 169, 110, .14);
  animation: ringRotate 34s linear infinite reverse;
}

@keyframes ringRotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Halo lumineux */
.logo-anim-glow {
  position: absolute;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212, 96, 122, .22) 0%, rgba(242,167,195,.1) 50%, transparent 75%);
  animation: glowPulse 4s ease-in-out infinite;
  z-index: 1;
}

@keyframes glowPulse {
  0%, 100% { transform: scale(1);    opacity: .7; }
  50%       { transform: scale(1.2); opacity: 1;  }
}

/* Logo */
.logo-anim-img {
  width: 300px;
  height: 300px;
  object-fit: contain;
  position: relative;
  z-index: 2;
  opacity: 0;
  animation:
    logoReveal .9s ease .6s forwards,
    logoFloat  7s ease-in-out 1.5s infinite;
  filter: drop-shadow(0 16px 48px rgba(142, 33, 80, .2))
          drop-shadow(0 4px 12px rgba(212, 96, 122, .15));
}

@keyframes logoReveal {
  from { opacity: 0; transform: scale(.85) translateY(28px); }
  to   { opacity: 1; transform: scale(1)   translateY(0); }
}

@keyframes logoFloat {
  0%, 100% { transform: translateY(0px)   rotate(0deg); }
  30%       { transform: translateY(-16px) rotate(.5deg); }
  60%       { transform: translateY(-7px)  rotate(-.3deg); }
}

/* Particules flottantes */
.logo-anim-particles {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.logo-anim-particles span {
  position: absolute;
  border-radius: 50%;
  opacity: 0;
  animation: particleDrift 5s ease-in-out infinite;
}

/* Alternance rose / or pour les particules */
.logo-anim-particles span:nth-child(odd)  { background: var(--rose-deep, #8e2150); }
.logo-anim-particles span:nth-child(even) { background: var(--gold, #c9a96e); }

.logo-anim-particles span:nth-child(1) { width:7px;  height:7px;  top:12%;  left:18%;  animation-delay:0s;    animation-duration:5.2s; }
.logo-anim-particles span:nth-child(2) { width:5px;  height:5px;  top:18%;  right:16%; animation-delay:.7s;   animation-duration:6.1s; }
.logo-anim-particles span:nth-child(3) { width:8px;  height:8px;  bottom:20%; left:12%; animation-delay:1.3s; animation-duration:4.8s; }
.logo-anim-particles span:nth-child(4) { width:5px;  height:5px;  bottom:14%; right:20%; animation-delay:1.9s; animation-duration:5.6s; }
.logo-anim-particles span:nth-child(5) { width:6px;  height:6px;  top:48%;  left:4%;   animation-delay:2.5s; animation-duration:4.4s; }
.logo-anim-particles span:nth-child(6) { width:4px;  height:4px;  top:40%;  right:5%;  animation-delay:3.1s; animation-duration:5.9s; }
.logo-anim-particles span:nth-child(7) { width:6px;  height:6px;  top:6%;   left:50%;  animation-delay:3.7s; animation-duration:5.3s; }
.logo-anim-particles span:nth-child(8) { width:5px;  height:5px;  bottom:8%; left:44%;  animation-delay:4.2s; animation-duration:6.4s; }

@keyframes particleDrift {
  0%   { opacity: 0; transform: translateY(0)    scale(1); }
  15%  { opacity: .8; }
  70%  { opacity: .35; }
  100% { opacity: 0; transform: translateY(-36px) scale(.4); }
}

/* ── Counter Section ── */
.counter-section {
  padding: 4.5rem 3.5rem;
  background: var(--rose-deep);
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: center;
  gap: 2rem;
  position: relative; z-index: 1;
}
.counter-item { text-align: center; }
.counter-num {
  font-family: 'Cormorant Garamond', serif;
  font-size: 3.2rem; font-weight: 300;
  color: var(--white); line-height: 1;
}
.counter-label {
  font-size: .73rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.75); margin-top: .55rem;
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
    padding: calc(var(--nav-h) + 2rem) 1.5rem 3.5rem;
    text-align: center;
  }
  h1 { font-size: 2.8rem; }
  .hero-sub { max-width: 100%; }
  .hero-actions { justify-content: center; }
  .trust-row { justify-content: center; }
  .hero-visual { display: none; }
  .counter-section {
    grid-template-columns: 1fr;
    justify-items: center;
    padding: 3rem 1.5rem;
  }
  .counter-item {
    width: 100%;
    max-width: 320px;
  }
}
/* ── Scroll progress bar ── */
#scroll-bar {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, var(--rose-deep), var(--gold));
  z-index: 9999;
  transition: width .1s linear;
}

/* ── Curseur personnalisé ── */
#cursor {
  width: 10px; height: 10px;
  background: var(--rose-deep);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: transform .08s, background .2s, width .2s, height .2s;
  mix-blend-mode: multiply;
}
#cursor-trail {
  width: 32px; height: 32px;
  border: 1.5px solid rgba(212, 96, 122, .5);
  border-radius: 50%;
  position: fixed;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  transition: left .12s ease, top .12s ease, width .2s, height .2s, opacity .2s;
}
body:hover #cursor { opacity: 1; }

/* Agrandir le curseur sur les éléments cliquables */
a:hover ~ #cursor,
button:hover ~ #cursor { width: 18px; height: 18px; }

/* ── Trust items hover ── */
.trust-item {
  transition: transform .2s, color .2s;
  cursor: default;
}
.trust-item:hover {
  transform: translateY(-3px);
  color: var(--rose-deep);
}

/* ── Navbar scroll effect ── */
#navbar {
  transition: background .3s, box-shadow .3s, backdrop-filter .3s;
}
#navbar.scrolled {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(16px);
  box-shadow: 0 2px 24px rgba(212, 96, 122, .08);
}

/* ── Fade-in au scroll (pour les sections futures) ── */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .7s ease, transform .7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Bouton scroll-top amélioré ── */
#scrollTop {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .3s, transform .3s, background .2s;
  pointer-events: none;
}
#scrollTop.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}