/* ==========================================================================
   HERO - full-bleed page header built from the node "Hero" fields.
   Markup: templates/content/hero.html.twig (included by page.html.twig)
   Modifiers: --tall | --compact, --overlay-{left|bottom|top|none},
              --pos-{center|top|right}
   ========================================================================== */
.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  isolation: isolate;
  padding: calc(var(--epsa-header-h) + clamp(2rem, 4vw, 4rem)) var(--epsa-side) clamp(2.3rem, 3.9vw, 3.9rem);
  background: var(--epsa-navy);
  color: var(--epsa-ink);
}
.hero--tall { min-height: clamp(480px, 74vh, 760px); }
.hero--compact { min-height: 0; }

.hero__bg, .hero__bg img {
  position: absolute; inset: 0; z-index: -2;
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero--pos-top .hero__bg img { object-position: 70% top; }
.hero--pos-right .hero__bg img { object-position: right center; }
.hero--pos-center .hero__bg img { object-position: center; }

.hero::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero--overlay-left::before { background: linear-gradient(90deg, rgba(11, 15, 20, 0.88) 0%, rgba(11, 15, 20, 0.62) 45%, rgba(11, 15, 20, 0.35) 100%); }
.hero--overlay-bottom::before { background: linear-gradient(180deg, rgba(11, 15, 20, 0) 0%, rgba(11, 15, 20, 0.15) 45%, rgba(11, 15, 20, 0.82) 100%); }
.hero--overlay-top::before { background: linear-gradient(180deg, rgba(19, 28, 37, 0.85) 0%, rgba(19, 28, 37, 0.6) 50%, rgba(19, 28, 37, 0.4) 100%); }
.hero--overlay-none::before { display: none; }
@media (max-width: 767.98px) {
  /* Text over a photo on small screens: always darken enough. */
  .hero--overlay-left::before { background: linear-gradient(180deg, rgba(11, 15, 20, 0.8) 0%, rgba(11, 15, 20, 0.7) 100%); }
}

.hero__inner { position: relative; width: 100%; max-width: 1240px; margin: 0 auto; }
.hero__title {
  margin: var(--space-5) 0 0;
  max-width: 20ch;
  font-size: clamp(var(--font-size-3xl), 4.1vw, var(--font-size-4xl));
  font-weight: 600;
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}
.hero__title p { margin: 0; color: inherit; }
.hero__intro { margin-top: var(--space-5); max-width: 56ch; font-size: clamp(var(--font-size-lg), 1.5vw, var(--font-size-xl)); line-height: var(--lh-body); color: #fff; }
.hero__intro p { color: #fff; margin: 0 0 var(--space-4); }
.hero__intro p:last-child { margin-bottom: 0; }
/* Wide intro (two columns, e.g. "Méthode"): use the 2-col style in CKEditor. */
.hero__intro.hero__intro--wide, .hero__intro:has(.hero-cols) { max-width: none; }
.hero-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-5) clamp(var(--space-5), 3.9vw, var(--space-8)); }

/* Home hero: large gold wordmark title (styles "Hero XL" in CKEditor). */
.hero__title .hero-xl { margin-top: var(--space-2); }

/* Hero title pieces (allowed in the "Hero titre" text format). */
.hero__title .hero-pre { display: block; font-size: clamp(var(--font-size-m), 1.7vw, var(--font-size-2xl)); font-weight: 300; letter-spacing: var(--tracking-display); line-height: var(--lh-snug); text-transform: uppercase; color: var(--epsa-ink); }
.hero__title .hero-post { display: block; margin-top: clamp(var(--space-2), 0.8vw, var(--space-3)); font-size: clamp(var(--font-size-2xl), 2.7vw, var(--font-size-3xl)); font-weight: 500; line-height: var(--lh-tight); text-transform: uppercase; color: var(--epsa-gold); }
.hero__title:has(.hero-xl) { max-width: min(36rem, 100%); font-weight: 300; }