/* Visuel de l'accueil : un iPhone (voir iphone.css) dont l'écran passe d'une page de l'appli à l'autre */
.hv { position: relative; width: 100%; max-width: 460px; margin: 0 auto; }
.hv .iphone { --drop: 0 40px 80px -30px rgba(255, 61, 127, .55), 0 24px 50px -20px rgba(0, 0, 0, .6); }
@keyframes hv-float { 50% { translate: 0 -12px; } }
.hv-one .iphone { width: 345px; margin: 20px auto 0; transform: rotate(4deg); animation: hv-float 6s ease-in-out infinite; }
.hv-slides { position: relative; aspect-ratio: 1320 / 2868; overflow: hidden; }
.hv-slides img { position: absolute; inset: 0; width: 100%; height: auto; opacity: 0; animation: hv-slide 16s infinite; }
.hv-slides img:nth-child(2) { animation-delay: 4s; }
.hv-slides img:nth-child(3) { animation-delay: 8s; }
.hv-slides img:nth-child(4) { animation-delay: 12s; }
@keyframes hv-slide {
  0% { opacity: 0; transform: translateX(40%); }
  4%, 25% { opacity: 1; transform: none; }
  29%, 100% { opacity: 0; transform: translateX(-30%); }
}
.hv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.hv-dots i { width: 8px; height: 8px; border-radius: 99px; background: rgba(255,255,255,.3); animation: hv-dot 16s infinite; }
.hv-dots i:nth-child(2) { animation-delay: 4s; }
.hv-dots i:nth-child(3) { animation-delay: 8s; }
.hv-dots i:nth-child(4) { animation-delay: 12s; }
@keyframes hv-dot { 0%, 25% { width: 26px; background: #FF8A00; } 29%, 100% { width: 8px; background: rgba(255,255,255,.3); } }
/* Sur ordinateur, l'iPhone tient toujours dans la hauteur de l'écran */
@media (min-width: 821px) { .hv-one .iphone { width: clamp(250px, calc((100vh - 190px) / 2.15), 370px); } }
@media (max-width: 820px) { .hv-one .iphone { width: 310px; } }
@media (max-width: 640px) { .hv-one .iphone { width: 270px; } .hv-dots { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .hv .iphone, .hv-dots i, .hv-slides img { animation: none; }
  .hv-slides img:first-child { opacity: 1; }
}