/* Gabarit des pages de contenu (lot 4b) : hero 66 vh (02 §3), titre et lead à gauche,
   puis sections sur fond bleu nuit. Les règles propres à une page suivent le gabarit. */
.page-hero{position:relative;height:66svh;min-height:460px;overflow:hidden;background:var(--bg-deep);isolation:isolate}
.page-hero img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:center 60%}
/* Voile haut sur les 28 % supérieurs (nav), fondu bas vers le fond des sections. */
.page-hero::before,.page-hero::after{content:"";position:absolute;inset-inline:0;z-index:-1;pointer-events:none}
.page-hero::before{top:0;height:28%;background:var(--veil-soft)}
.page-hero::after{bottom:0;height:45%;background:linear-gradient(0deg, var(--bg), rgba(14,18,48,0))}

/* Bloc titre dans la colonne gauche, aligné sur .wrap, avec son voile radial diffus (02 §4). */
.page-head{position:absolute;bottom:var(--s5);left:max(var(--side), calc((100% - var(--wrap)) / 2 + var(--side)));
  width:min(620px, calc(100% - 2 * var(--side)));display:grid;gap:var(--s3);justify-items:start;text-align:left}
.page-head::before{content:"";position:absolute;inset:-30% -25%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side, rgba(9,10,32,.58), rgba(9,10,32,0))}
.page-head h1{text-shadow:0 0 28px rgba(9,10,32,.5)}
.lead{max-width:56ch;color:var(--ink);text-shadow:0 0 14px rgba(9,10,32,.9)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:var(--s7) var(--side)}
/* Le fondu du hero sert déjà de respiration : on n'en rajoute pas une pleine au-dessus. */
.page-hero + .wrap{padding-top:var(--s6)}

/* Les programmes : quatre portes, dans l'ordre voulu par Ben. */
.programmes{display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--s6) var(--s7)}
.programmes article{display:grid;align-content:start;gap:var(--s3);border-top:1px solid var(--brass-dim);padding-top:var(--s4);
  scroll-margin-top:90px}
.programmes p{color:var(--ink-soft);max-width:65ch}
.titre-etat{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s2) var(--s3)}
/* État (bientôt, en cours) : étiquette laiton sans fond, style label (02 §2). */
.etat{font:500 .72rem/1.3 var(--sans);letter-spacing:.15em;text-transform:uppercase;color:var(--brass)}

/* Pages de texte (lot 4d) : une colonne de lecture alignée sur le titre, sections H2
   séparées par le même filet laiton que les portes des programmes. */
.texte{display:grid;gap:var(--s6);justify-items:start}
.texte section{display:grid;gap:var(--s3);max-width:68ch;border-top:1px solid var(--brass-dim);padding-top:var(--s4);
  scroll-margin-top:90px}
.texte h2{margin-bottom:var(--s1)}
.texte p{color:var(--ink-soft)}
/* Qui je suis : un seul bloc, sans filet ni titre de section. */
.apropos section{border-top:0;padding-top:0;gap:var(--s4)}
/* Pages légales (lot 4e) : pas d'image de tête, le titre ouvre la colonne sous la nav ;
   H2 ramenés à la taille mobile, ce sont des rubriques et non des chapitres. */
.legal{padding-top:calc(70px + var(--s6))}
.legal-head{display:grid;gap:var(--s3);max-width:68ch}
.legal-head .maj{font-size:.92rem;color:var(--ink-dim)}
.legal h2{font-size:1.8rem}
.liste{margin:0;padding-left:1.2em;display:grid;gap:var(--s2);color:var(--ink-soft)}

@media (max-width:960px){
  .programmes{grid-template-columns:1fr;gap:var(--s5);max-width:720px}
}
@media (max-width:640px){
  .page-hero{height:auto;min-height:66svh;display:grid;align-content:end;padding:calc(70px + var(--s5)) var(--side) var(--s4)}
  .page-hero::after{height:72%}
  .page-head{position:relative;left:auto;bottom:auto;width:auto}
  .wrap{padding-block:var(--s6)}
  .page-hero + .wrap{padding-top:var(--s5)}
  .legal{padding-top:calc(70px + var(--s5))}
  .legal h2{font-size:1.5rem}
}