/* ==========================================================
   By Anaïs — haut de la page d'accueil
   Titre centré + bandeau de téléphones qui défile
   ========================================================== */

.hc {
  padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 70px);
  background: var(--cream);
  overflow: hidden;
}
.hc-text { padding: 0 var(--gutter); text-align: center; }
.hc-eyebrow {
  margin: 0 0 30px;
  font-size: 12px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
  color: var(--wine-soft);
}
.hc-title { margin: 0; color: var(--wine); line-height: .88; }
.hc-title .t1 {
  display: block;
  font-size: clamp(48px, 6.5vw, 100px);
  font-weight: 800; letter-spacing: -.02em; text-transform: uppercase;
}
.hc-title .t2 {
  display: block;
  margin-top: -.15em;
  font-family: var(--script); font-weight: 400;
  font-size: clamp(32px, 4vw, 60px);
  color: var(--wine-soft);
}
.hc-lead { max-width: 880px; margin: 14px auto 22px; font-size: clamp(16px, 1.3vw, 18px); }
.hc .actions { justify-content: center; }

/* Bandeau */
.hc-track-wrap { margin-top: 36px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.hc-track { display: flex; gap: 22px; width: max-content; animation: hcslide 40s linear infinite; }
.hc-track:hover { animation-play-state: paused; }
@keyframes hcslide { to { transform: translateX(-50%); } }

.hc .phone {
  position: relative; flex: none;
  width: clamp(140px, 13vw, 190px);
  aspect-ratio: 9 / 19;
  padding: 6px;
  border-radius: 26px;
  background: #1a0a10;
  box-shadow: 0 30px 50px -20px rgba(58, 1, 24, .55), inset 0 0 0 2px rgba(255,255,255,.1);
  color: inherit;
  transition: translate .3s;
}
.hc .phone::before { content: ""; position: absolute; top: 11px; left: 50%; width: 30%; height: 8px; translate: -50% 0; border-radius: 99px; background: inherit; z-index: 2; }
.hc .phone video, .hc .phone img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; background: #3a0118; }
.hc .phone:hover { translate: 0 -10px; }

/* Chiffres */
.hc-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 40px; padding: 0 var(--gutter); }
.hc-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 99px;
  background: rgba(255,250,246,.9);
  box-shadow: 0 14px 30px -14px rgba(74,1,31,.5);
  font-size: 13px; color: var(--wine-soft);
}
.hc-pill b { color: var(--wine); font-weight: 800; font-size: 15px; }

@media (prefers-reduced-motion: reduce) { .hc-track { animation: none; } }