/* === En-tête des pages intérieures ================================
   Le même sur toutes les pages sauf l'accueil : même hauteur, même paysage, même fondu. Le paysage est celui de la
   météo du serveur (packages/meteo, posé par layout/sky.js avant ce calque) ; __landscape n'est plus que l'ombre qui
   garde le texte lisible.
     <section class="page-hero" data-bees="3">
       <div class="page-hero__landscape" aria-hidden="true"></div>
       <div class="container page-hero__inner">
         <div class="page-hero__copy">
           <h1>…</h1>
           <p class="page-hero__tag">…</p>             (bandeau doré, facultatif)
           <p>…</p>
           <div class="page-hero__actions">…</div>     (boutons, facultatif)
         </div>
       </div>
     </section> */

.page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-bottom: 1px solid rgba(215, 157, 65, 0.4);
  box-shadow: 0 18px 55px #0008;
}

/* Le paysage météo sans ombre par-dessus (il obscurcissait le ciel) : le texte se lit par son ombre portée. Au-dessus
   du grain de la page (base.css, 500), sous le menu (600). Le terrain calé plus haut dans son image : elle descend
   dans le bandeau et laisse voir le ciel. */
.page-hero {
  z-index: 501;
}
/* L'ombre portée : le titre et le texte seulement (sur le bandeau doré ou un bouton, elle bavait) */
.page-hero__copy :is(h1, p):not(.page-hero__tag) {
  text-shadow: 0 2px 14px rgba(var(--shadow-rgb), 0.85), 0 1px 3px rgba(var(--shadow-rgb), 0.9);
}
.page-hero[data-weather-host] :is(.terrain-layer, .terrain-foreground, .weather-snow-cover) {
  background-position: center 30%;
}

/* Le raccord avec la page, comme à l'accueil (.hero-home + .home-section) : un fondu sombre pleine largeur au début
   du contenu, juste sous l'en-tête (sous le menu des chapitres pour Histoire). Pleine largeur depuis un bloc centré :
   la page coupe ce qui dépasse sur les côtés (overflow-x: clip, qui laisse les menus collants coller). */
main:has(> .page-hero) {
  overflow-x: clip;
  /* Pas d'empilement à elle (inner-page.css, story.css l'isolent) : sinon l'en-tête, dedans, resterait sous le grain
     de la page (base.css, body::after, 500) quel que soit son z-index */
  isolation: auto;
}
.page-hero + :not(.chapter-nav),
.chapter-nav + * {
  position: relative;
}
.page-hero + :not(.chapter-nav)::before,
.chapter-nav + *::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: calc(50% - 50vw);
  width: 100vw;
  height: 230px;
  background: linear-gradient(180deg, #090908 0, #090908e8 55px, transparent 230px);
  pointer-events: none;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  align-items: center;
  /* Même hauteur partout : calée sur l'en-tête le plus rempli (Soutenir, avec ses boutons) */
  min-height: 480px;
  padding-block: 52px;
}

/* Bandeau doré sous le titre, légèrement de travers (celui de Soutenir, pour toutes les pages) */
.page-hero .page-hero__tag {
  display: inline-block;
  margin: 30px 0 4px;
  padding: 9px 14px;
  background: var(--gold);
  color: #16110a;
  font: 900 0.95rem/1 Roboto, sans-serif;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transform: rotate(-1deg);
}
.page-hero__copy strong {
  color: var(--cream);
}
.page-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 30px;
}

.page-hero h1 {
  position: relative;
  width: max-content;
  max-width: 100%;
  margin: 12px 0 0;
  color: var(--cream);
  font: 900 clamp(3rem, 5vw, 4.6rem) / 0.95 "Roboto Condensed", sans-serif;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 8px 24px #000;
}
/* Trait de pinceau rouge sous le titre */
.page-hero h1:after {
  content: "";
  position: absolute;
  left: 1%;
  right: -4%;
  bottom: -14px;
  height: 9px;
  background: #b9342b;
  clip-path: polygon(0 35%, 22% 5%, 48% 27%, 78% 0, 100% 38%, 87% 75%, 52% 59%, 17% 100%);
}

/* :where() garde ce style faible : un paragraphe propre à une page (bandeau, note) le remplace sans lutter */
:where(.page-hero__copy) > p {
  max-width: 660px;
  margin: 31px 0 0;
  color: #e3d8c7;
  font-size: 1.15rem;
  line-height: 1.7;
}

@media (max-width: 700px) {
  .page-hero__inner {
    min-height: 360px;
    padding-block: 44px;
    /* Sur téléphone, le bandeau du vote (plusieurs lignes) recouvrirait le titre : le haut de l'en-tête s'écarte */
    padding-top: calc(44px + var(--banner, 0px));
  }
  .page-hero h1 {
    font-size: 2.8rem;
  }
  :where(.page-hero__copy) > p {
    font-size: 1.05rem;
  }
  .page-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
}