/* accueil.css — Propre à la page d'accueil. */

/* Hero avec photo de fond.
   L'URL Unsplash ci-dessous est un PLACEHOLDER : remplacez-la par la vraie
   photo d'ATREPA en déposant l'image dans /atouts/img/hero.jpg puis en
   écrivant  url("/atouts/img/hero.jpg")  à la place de l'URL distante.
   Les deux dégradés au-dessus garantissent que le texte doré reste lisible,
   quelle que soit la photo. */
.hero {
  position: relative;
  padding: 96px 0 74px;
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(18, 18, 16, .62) 0%, rgba(18, 18, 16, .86) 62%, var(--ink) 100%),
    linear-gradient(115deg, rgba(18, 18, 16, .9) 0%, rgba(18, 18, 16, .45) 55%, rgba(18, 18, 16, .75) 100%),
    #14140f url("/media/images/hero/hero-1.webp") center / cover no-repeat;
}

.hero::after {
  content: "";
  position: absolute;
  top: -25%;
  right: -8%;
  width: 60vw;
  height: 60vw;
  background: radial-gradient(circle, rgba(242, 227, 124, .12), transparent 62%);
  pointer-events: none;
}

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

.hero h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.35rem);
  max-width: 16ch;
  margin: 26px 0 24px;
}

.hero h1 .accent {
  color: var(--gold);
  font-style: italic;
  font-weight: 500;
}

.hero-sub {
  font-size: 1.12rem;
  color: var(--cream);
  opacity: .92;
  max-width: 52ch;
  margin-bottom: 38px;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 70px;
}

/* Léger fond pour détacher la bande secteurs du reste */
.sectors-band {
  background: #0e0e0c;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.impact {
  border-top: 1px solid var(--line);
}