.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  min-height: calc(100svh - 2.5rem);
  padding: clamp(1rem, 3.5vh, 4rem) 0;
}

@supports not (height: 100svh) {
  .hero { min-height: calc(100vh - 2.5rem); }
}

.hero-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(95, 201, 138, .16), transparent 60%);
}

.hero-contenu {
  position: relative;
  width: 100%;
  max-width: 80rem;
  margin: 0 auto;
  padding: 0 1.25rem;
  text-align: center;
}

.hero-avatars {
  display: flex;
  justify-content: center;
  margin-top: clamp(1.5rem, 5vh, 3rem);
}

.hero-avatars img {
  width: clamp(2.5rem, 11vw, 3rem);
  height: clamp(2.5rem, 11vw, 3rem);
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 4px var(--creme);
}

.hero-avatars img + img {
  margin-left: -.75rem;
}

.hero-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  margin: clamp(.75rem, 2vh, 1.125rem) 0 0;
  color: var(--sauge);
  font-size: .9375rem;
  font-weight: 500;
}

.hero-preuve {
  margin: clamp(.5rem, 1.2vh, .75rem) 0 0;
  color: var(--sauge);
  font-size: .9375rem;
  font-weight: 500;
}

.hero-note strong,
.hero-preuve strong {
  color: var(--foret);
  font-weight: 800;
}

.hero-action {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(1.5rem, 5vw, 4rem);
  margin-top: clamp(1.75rem, 5.5vh, 3rem);
}

.hero-fleche {
  display: none;
  width: clamp(8rem, 14vw, 13rem);
  height: auto;
  aspect-ratio: 108 / 80;
  color: var(--jade);
}

.hero-fleche-gauche {
  transform: translateY(-28%);
}

.hero-fleche-droite {
  transform: scaleX(-1) translateY(-28%);
}

.hero-outils {
  position: relative;
  width: 100%;
  margin-top: clamp(2rem, 6.5vh, 4rem);
}

@media (min-width: 640px) {
  .hero-contenu { padding: 0 2rem; }
}

@media (min-width: 1024px) {
  .hero-fleche { display: block; }
}