/* ============================================================
   05 — PAGES DE CONTENU
   Gabarit partagé par les pages secondaires : mentions légales,
   politique de confidentialité, 404. Un bandeau d'en-tête sobre
   + une colonne de texte long, lisible.
   ============================================================ */

.page-header{
  position:relative;
  background:var(--ink);
  color:var(--text-light);
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh; /* voir .hero (06-home.css) — même repli mobile */
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:132px 0 96px;
  overflow:hidden;
  isolation:isolate;
}
.page-header .eyebrow{ color:var(--indigo-lt); margin-bottom:20px; }
.page-header h1{
  font-size:clamp(30px, 4vw, 46px);
  line-height:1.14;
  font-weight:500;
  max-width:20ch;
}
/* Empreinte en filigrane — même traitement que contact/footer, pour
   que ce bandeau ne soit plus la seule "porte d'entrée" du site sans
   texture ni mouvement. */
.page-header .fp-watermark{
  width:440px; height:440px;
  top:50%; right:-110px;
  transform:translateY(-50%);
  animation:footer-fingerprint-breathe 8.5s cubic-bezier(.45,0,.55,1) infinite;
}
/* Cascade eyebrow -> h1 -> chapô (le générique .reveal fait le
   travail, ce délai évite qu'ils n'apparaissent d'un seul bloc). */
.page-header h1.reveal{ transition-delay:.12s; }

/* Variante compacte — réalisations.html : la page catalogue doit
   montrer des vignettes dès l'arrivée plutôt que de forcer un plein
   écran de titre avant de pouvoir scroller jusqu'à la grille. Même
   bandeau (fond, repères, filigrane), juste sans le plein-écran. */
.page-header.page-header-compact{
  min-height:0;
  padding:132px 0 48px;
  justify-content:flex-start;
}
.page-header.page-header-compact .fp-watermark{
  width:300px; height:300px;
  top:50%; right:-80px;
  transform:translateY(-50%);
}
.page-header .pull{ margin-top:32px; }
.page-header .pull.reveal{ transition-delay:.22s; }

.prose{
  max-width:68ch;
  padding:80px 0 var(--space-2xl);
}
.prose h2{
  font-size:22px;
  color:var(--text-dark);
  margin-top:48px;
  margin-bottom:16px;
}
.prose h2:first-child{ margin-top:0; }
.prose p{
  color:var(--text-dim);
  font-size:15.5px;
  margin:0 0 18px;
}
.prose ul{
  color:var(--text-dim);
  font-size:15.5px;
  padding-left:20px;
  margin:0 0 18px;
}
.prose li{ margin-bottom:8px; }
.prose a{
  color:var(--indigo);
  text-decoration:underline;
  text-underline-offset:2px;
}
.prose .updated{
  font-size:13px;
  color:var(--text-dim);
  font-style:italic;
  margin-bottom:40px;
}

/* ---------- 404 ---------- */
.not-found{
  padding:200px 0 140px;
  text-align:center;
}
.not-found .code{
  font-family:var(--display);
  font-size:clamp(64px, 12vw, 120px);
  color:var(--indigo);
  line-height:1;
}
.not-found h1{
  margin-top:16px;
  font-size:clamp(22px, 3vw, 30px);
  color:var(--text-dark);
}
.not-found p{
  margin-top:16px;
  color:var(--text-dim);
  font-size:15.5px;
  max-width:44ch;
  margin-left:auto; margin-right:auto;
}
.not-found .btn{ margin-top:32px; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 560px){
  .page-header{ padding:100px 0 56px; justify-content:flex-start; }
  .page-header .fp-watermark{ width:280px; height:280px; right:-90px; }
}