/* ============================================================
   Avrile — Page Hero
   Hero intérieur des pages secondaires.
   Image de fond + teinture dégradée. Texte blanc.
   Variantes : --ember (comprendre), --bleu (creer), --blanc (about).
   ============================================================ */

.avr-page-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(var(--avr-page-top) + var(--avr-space-xs)) var(--avr-space-gutter) clamp(40px, 7vh, 80px);
  overflow: hidden;
  isolation: isolate;
  width: 100%;
  display: flex;
  flex-direction: column;
}

/* ----------------------------------------------------------
   Image de fond
---------------------------------------------------------- */
.avr-page-hero .avr-page-hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.avr-page-hero .avr-page-hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----------------------------------------------------------
   Teinture — même overlay que le module poles
---------------------------------------------------------- */
.avr-page-hero .avr-page-hero__tint {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(to top, rgba(20, 12, 14, 0.68) 0%, rgba(20, 12, 14, 0) 22%),
    linear-gradient(180deg, rgba(20, 12, 14, 0.42) 0%, rgba(20, 12, 14, 0.06) 38%, rgba(20, 12, 14, 0) 70%);
}

/* ----------------------------------------------------------
   Inner — flex colonne : eyebrow + titre en haut, intro en bas
---------------------------------------------------------- */
.avr-page-hero .avr-page-hero__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--avr-max-content);
  margin: 0 auto;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* ----------------------------------------------------------
   Eyebrow — aligné sur le page-top
---------------------------------------------------------- */
.avr-page-hero .avr-page-hero__eyebrow {
  display: block;
  margin-bottom: var(--avr-space-sm);
  color: rgba(239, 236, 223, 0.75);
}

/* ----------------------------------------------------------
   Titre — suit l'eyebrow, repousse l'intro vers le bas
---------------------------------------------------------- */
.avr-page-hero .avr-page-hero__title {
  margin: 0 0 auto;
  font-family: var(--avr-font-body);
  font-weight: var(--avr-weight-regular);
  font-style: italic;
  font-size: var(--avr-text-h1);
  line-height: var(--avr-leading-tight);
  letter-spacing: var(--avr-tracking-tight);
  color: var(--avr-color-white);
  text-wrap: balance;
  max-width: 15ch;
}

.avr-page-hero .avr-page-hero__title em {
  font-style: italic;
  font-size: 1.3em;
}

.avr-page-hero .avr-page-hero__title .avr-roman {
  font-style: normal;
}

/* ----------------------------------------------------------
   Intro — ancrée en bas
---------------------------------------------------------- */
.avr-page-hero .avr-page-hero__intro {
  margin: clamp(40px, 6vh, 80px) 0 0;
  max-width: 460px;
  align-self: flex-end;
  text-align: right;
  color: var(--avr-color-white);
  text-wrap: pretty;
}

/* ----------------------------------------------------------
   Variantes — couleur de fond de repli (pendant chargement image)
   et éventuels accents de couleur
---------------------------------------------------------- */
.avr-page-hero--ember {
  background-color: var(--avr-color-raisin-deep);
}

.avr-page-hero--bleu {
  background-color: var(--avr-color-slate);
}

.avr-page-hero--blanc {
  background-color: var(--avr-color-ink);
}

/* ----------------------------------------------------------
   Responsive
---------------------------------------------------------- */
@media (max-width: 880px) {
  .avr-page-hero .avr-page-hero__intro {
    max-width: 100%;
  }
}