/* ============================================================
   PAGES LEGALES - gabarit commun
   Hero en bandeau pleine largeur avec image en parallaxe, puis
   une colonne de texte lisible. Meme theme, memes jetons.
   ============================================================ */

/* ---- hero en bandeau ---- */
.page-hero{position:relative;isolation:isolate;overflow:hidden;
  min-height:clamp(340px,52vh,560px);display:flex;align-items:flex-end;
  padding-block:clamp(5rem,10vw,7rem) clamp(2rem,5vw,3.5rem)}
.page-hero-scene{position:absolute;inset:0;z-index:-2;overflow:hidden;background:var(--hero-fallback)}
.page-hero-layer{position:absolute;will-change:transform}
.page-hero-layer img{display:block;max-width:none}
/* le fond deborde verticalement pour que la parallaxe ne montre jamais ses bords */
.page-hero-layer--bg{inset:-22% 0;width:100%}
.page-hero-layer--bg img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
/* Le personnage detoure est un calque PLEIN CADRE, aux memes dimensions que le
   fond : on lui donne donc la meme geometrie et le meme cadrage, seule la
   course de parallaxe differe. Le sujet reste ainsi exactement a sa place dans
   la composition d'origine. */
.page-hero-layer--figure{inset:-26% 0;width:100%}
.page-hero-layer--figure img{width:100%;height:100%;object-fit:cover;object-position:center 48%}
/* L'ombre a gauche est portee par les visuels eux-memes : le voile se contente
   de raccorder le bas du bandeau au fond de page et d'asseoir le titre. */
.page-hero-veil{position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(6,19,33,.18) 0%,rgba(6,19,33,.30) 45%,rgba(6,19,33,.80) 82%,var(--bg) 100%)}
/* meme voile entrelace que les sections video, pour la lisibilite */
.page-hero-veil::after{content:"";position:absolute;inset:0;mix-blend-mode:multiply;
  background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.34) 0px, rgba(0,0,0,.34) 1px,
    rgba(0,0,0,0)   1px, rgba(0,0,0,0)   3px)}
@media(min-resolution:2dppx){
  .page-hero-veil::after{background:repeating-linear-gradient(180deg,
    rgba(0,0,0,.34) 0px, rgba(0,0,0,.34) .5px,
    rgba(0,0,0,0)   .5px, rgba(0,0,0,0)  2px)}
}
.page-hero h1{font-size:clamp(1.9rem,5vw,3.4rem);margin:0;text-transform:uppercase;
  letter-spacing:var(--display-tracking);text-shadow:var(--title-shadow)}
.page-hero .eyebrow{margin-bottom:.8rem}
.page-hero .rule{margin:1.1rem 0 0}
.page-hero .updated{margin:1rem 0 0;font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}

/* ---- corps de texte ---- */
.page-body{padding-block:clamp(3rem,7vw,5rem)}
.page-body .narrow{max-width:76ch}
.page-body h2{font-size:clamp(1.15rem,2.2vw,1.5rem);margin:2.6rem 0 .9rem;
  padding-bottom:.55rem;position:relative}
.page-body h2:first-child{margin-top:0}
.page-body h2::after{content:"";position:absolute;left:0;bottom:0;width:3rem;height:3px;
  background:var(--voxx);border-radius:2px}
.page-body h3{font-size:.92rem;margin:1.8rem 0 .5rem;color:var(--accent-2)}
.page-body p{color:var(--fg-soft);margin-bottom:1.1rem;line-height:1.75}
.page-body strong{color:var(--fg)}
.page-body ul{margin:0 0 1.3rem;padding-left:1.2rem;color:var(--fg-soft)}
.page-body li{margin-bottom:.5rem}
.page-body li::marker{color:var(--voxx)}
.page-body a{color:var(--voxx)}
.page-body .lead{font-size:1.05rem;color:var(--fg)}
.page-body .callout{background:var(--card-bg);border:1px solid var(--divider);
  border-left:3px solid var(--voxx);border-radius:var(--radius);
  padding:clamp(1.1rem,2.4vw,1.6rem);margin:1.8rem 0}
.page-body .callout p:last-child{margin-bottom:0}

/* ---- pied de page legal : navigation entre les trois pages ---- */
.page-nav{border-top:1px solid var(--divider);padding-block:clamp(2rem,5vw,3rem);text-align:center}
.page-nav .cta-row{justify-content:center}

@media (prefers-reduced-motion:reduce){.page-hero-layer{transform:none!important}}