.hero {
  position: relative;
  color: var(--color-paper);
  background: var(--color-metal) url("../../img/hero/banner-garage.jpg") center/cover no-repeat;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 19, 15, 0.78), rgba(22, 19, 15, 0.93));
}

/* Filet de tôle striée, comme une plaque de seuil d'atelier */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 7px;
  background: url("../../img/textures/diamondplate008c.jpg") repeat-x;
  background-size: 140px 140px;
  opacity: 0.5;
}

.hero .container {
  position: relative;
  padding-top: 5rem;
  padding-bottom: 5rem;
  max-width: 760px;
}

.hero .eyebrow {
  color: var(--color-wood);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.9rem;
}

.hero h1 {
  font-size: clamp(2rem, 5vw, 3rem);
}

.hero p {
  font-size: 1.05rem;
  max-width: 60ch;
  color: rgba(241, 230, 210, 0.85);
}

.hero .hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  margin-top: 1.75rem;
}

.hero .hero-cta .btn,
.hero .hero-cta .btn-neon {
  margin-top: 0;
}


/* Page hero (pages secondaires) : même famille que le hero d'accueil, en plus court.
   L'image et son cadrage se règlent via des variables sur la balise, ex :
   <section class="page-hero" style="--hero-img:url('/assets/img/photos/xxx.jpg'); --hero-pos:top"> */
.page-hero {
  position: relative;
  background: var(--hero-img, none) var(--hero-pos, center) / cover no-repeat, var(--color-metal);
  color: var(--color-paper);
  padding: 6rem 0;
  overflow: hidden;
}

.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(22, 19, 15, 0.6), rgba(22, 19, 15, 0.82));
}

.page-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 6px;
  background: url("../../img/textures/diamondplate008c.jpg") repeat-x;
  background-size: 120px 120px;
  opacity: 0.5;
}

.page-hero .container {
  position: relative;
}

.page-hero h1 {
  color: var(--color-paper);
}

.page-hero p {
  color: rgba(241, 230, 210, 0.82);
}