/* ============================================================
   BLOC page_hero — en-tête de page interne (titre animé au load)
   Port fidèle de .page-hero (maquette 2026-06-10, pages standalone).
   .mission-line (base) est dans common.css ; le reduced-motion du page-hero
   et la règle « .page-hero + section { padding-top:0 } » aussi.
   Ce fichier ne contient QUE : styles de base + animation d'ouverture CSS.
   ============================================================ */

.page-hero {
  padding: clamp(28px, 4.5vh, 56px) 0 clamp(28px, 4vh, 56px);
}
.page-hero__num {
  display: block;
  margin-bottom: clamp(14px, 2vh, 24px);
  font-family: var(--ff-mono);
  font-size: 0.75rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-copper);
}
.page-hero__title {
  margin: 0 0 clamp(16px, 2.5vh, 28px);
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: clamp(2rem, 4.4vw, 4.4rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--c-blue);
}
.page-hero__title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 500;
  color: var(--c-copper);
  letter-spacing: -0.01em;
}
.page-hero__lead {
  margin: 0;
  font-size: clamp(1rem, 1.25vw, 1.25rem);
  line-height: 1.6;
  color: var(--c-text);
  max-width: 64ch;
}

/* ---- Animation d'ouverture (au load) ----
   Chaque .page-hero__title contient N .mission-line ; chaque ligne reçoit sa
   bande wipe cuivre (.mission-line__wipe) puis son texte (.mission-line__phrase)
   se révèle. Cascade par ligne : 0.30s, 0.50s, 0.70s, … */
.page-hero__num {
  opacity: 0;
  transform: translateY(12px);
  animation: pgh-fade-up 0.8s cubic-bezier(0.65, 0.05, 0, 1) 0.1s forwards;
}
.page-hero__title {
  opacity: 1;
}
.page-hero__title .mission-line {
  margin-left: 0;
  margin-right: auto;
  opacity: 1;
}
.page-hero__title .mission-line__phrase {
  opacity: 0;
  animation: pgh-line-phrase-show 0s linear forwards;
}
.page-hero__title .mission-line__wipe {
  transform: scaleX(0);
  transform-origin: left center;
  background: var(--c-copper);
  animation: pgh-line-wipe-band 0.8s cubic-bezier(0.65, 0.05, 0, 1) forwards;
}
.page-hero__title .mission-line:nth-child(1) .mission-line__wipe   { animation-delay: 0.30s; }
.page-hero__title .mission-line:nth-child(1) .mission-line__phrase { animation-delay: 0.65s; }
.page-hero__title .mission-line:nth-child(2) .mission-line__wipe   { animation-delay: 0.50s; }
.page-hero__title .mission-line:nth-child(2) .mission-line__phrase { animation-delay: 0.85s; }
.page-hero__title .mission-line:nth-child(3) .mission-line__wipe   { animation-delay: 0.70s; }
.page-hero__title .mission-line:nth-child(3) .mission-line__phrase { animation-delay: 1.05s; }
.page-hero__title .mission-line:nth-child(4) .mission-line__wipe   { animation-delay: 0.90s; }
.page-hero__title .mission-line:nth-child(4) .mission-line__phrase { animation-delay: 1.25s; }
.page-hero__title .mission-line:nth-child(5) .mission-line__wipe   { animation-delay: 1.10s; }
.page-hero__title .mission-line:nth-child(5) .mission-line__phrase { animation-delay: 1.45s; }

.page-hero__lead {
  opacity: 0;
  transform: translateY(12px);
  animation: pgh-fade-up 0.8s cubic-bezier(0.65, 0.05, 0, 1) 1.4s forwards;
}

@keyframes pgh-fade-up {
  to { opacity: 1; transform: translateY(0); }
}
@keyframes pgh-line-phrase-show {
  to { opacity: 1; }
}
@keyframes pgh-line-wipe-band {
  0%   { transform: scaleX(0); transform-origin: left center; }
  50%  { transform: scaleX(1); transform-origin: left center; }
  50.01% { transform-origin: right center; }
  100% { transform: scaleX(0); transform-origin: right center; }
}