/* pages intérieures : en-tête de page, blocs communs, apparition au défilement */

/* ---------- pages intérieures ---------- */
.page-head{position:relative;overflow:hidden;background:var(--stone-soft);
  padding:164px 0 74px;border-bottom:1px solid var(--line);text-align:center}

/* ---------- en-tête illustré ----------
   Le parlement de Bretagne en fond, en couleur mais assombri : la photo pose le
   décor sans disputer la vedette au titre. C'est le voile qui fait tout le
   travail — pas de désaturation, pas de contraste ajouté, sinon l'image
   reprendrait le dessus.

   Les pages des pôles sont marquées « sobre » et conservent l'en-tête clair :
   elles ont leurs propres photos d'équipe juste en dessous. */
.page-head:not(.sobre){border-bottom:0}
.page-head:not(.sobre)::before{content:"";position:absolute;inset:0;
  /* La photo peut être choisie page par page : build.py pose alors la
     variable sur la section. Sans choix, c'est le parlement. */
  background:var(--photo-entete, url("../assets/img/hero-parlement.jpg")) center 26%/cover no-repeat;
  transform:scale(1.02)}
.page-head:not(.sobre)::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(17,16,16,.80) 0,rgba(17,16,16,.72) 52%,rgba(17,16,16,.84) 100%)}
.page-head:not(.sobre) .wrap{position:relative;z-index:1}
.page-head:not(.sobre) h1{color:#fff;text-shadow:0 2px 28px rgba(0,0,0,.42)}
.page-head:not(.sobre) .page-rubrique{color:#fff;text-shadow:0 1px 14px rgba(0,0,0,.5)}
.page-head:not(.sobre) .page-rubrique a{color:inherit}
.page-head:not(.sobre) .page-chapeau{color:rgba(255,255,255,.82);
  text-shadow:0 1px 18px rgba(0,0,0,.45)}
.page-rubrique{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 22px;
  font-family:Spectral,serif;font-style:italic;font-size:13.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--crimson)}
.page-rubrique::before,.page-rubrique::after{content:"";width:42px;height:2px;background:var(--crimson);flex:none}
.page-head h1{font-size:clamp(33px,4.4vw,54px);font-weight:300;line-height:1.1;margin:0 auto 22px;
  max-width:24ch;text-wrap:balance}
.page-chapeau{margin:0 auto;max-width:64ch;font-family:Spectral,serif;font-size:19px;line-height:1.68;
  color:var(--muted);text-wrap:pretty}
.sec.alt{background:var(--stone-soft)}
.mod-list.light .mod{color:var(--ink);border-bottom:1px solid var(--line);cursor:default}
.mod-list.light .mod i{color:var(--muted)}
.mod-list.light .mod:hover{color:var(--ink);border-bottom-color:var(--line);padding-left:0}

.word-inline{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start}
.texte-large{margin:0;max-width:70ch;font-size:16.5px;line-height:1.72;color:var(--muted);
  text-align:justify;hyphens:auto}
.apercu{margin:0;padding:22px 26px;background:var(--stone-soft);border-left:2px solid var(--crimson);
  font-size:15px;color:var(--muted);max-width:70ch}
.sec.alt .apercu{background:#fff}
.partner-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.partner-grid div{background:#fff;padding:26px 20px;font-size:14.5px;color:var(--ink);text-align:center}
.sec.alt .partner-grid div{background:var(--stone-soft)}
.figure-large{margin:0}
.figure-large img{width:100%;display:block}
.figure-large figcaption{margin-top:14px;font-size:14px;color:var(--muted)}
.etapes{list-style:none;counter-reset:e;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line)}
.etapes li{counter-increment:e;background:#fff;padding:34px 32px 36px}
.etapes li::before{content:counter(e,decimal-leading-zero);display:block;margin-bottom:16px;
  font-family:Spectral,serif;font-size:30px;font-weight:300;color:var(--crimson);line-height:1}
.etapes b{display:block;font-family:Spectral,serif;font-size:20px;font-weight:600;margin-bottom:10px}
.etapes span{display:block;font-size:15.2px;line-height:1.68;color:var(--muted);text-align:justify;hyphens:auto}
.card p a{color:var(--crimson);border-bottom:1px solid currentColor}
@media (max-width:1040px){
  .word-inline{grid-template-columns:1fr;gap:34px}
  .word-inline .word-photo{max-width:400px}
  .partner-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .etapes,.partner-grid{grid-template-columns:1fr}
  .page-head{padding:122px 0 46px}
}

/* ---------- grille à deux colonnes ---------- */
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.grid2 .card{background:#fff;padding:40px 36px 42px}
.grid2 .card-vue{width:calc(100% + 72px);margin-left:-36px;margin-right:-36px}
@media (max-width:1040px){.grid2{grid-template-columns:1fr}}

/* grands chiffres en filigrane dans les cartes */
.grid2 .card{position:relative;counter-increment:fil;overflow:hidden}
.grid2{counter-reset:fil}
.grid2 .card::after{content:counter(fil,decimal-leading-zero);position:absolute;right:18px;bottom:-14px;
  font-family:Spectral,serif;font-size:104px;font-weight:300;line-height:1;color:var(--crimson);
  opacity:.07;pointer-events:none}

/* apparition au défilement, comme les jalons de la frise */
.apparait{opacity:0;transform:translateY(18px);
  transition:opacity .7s cubic-bezier(.22,.7,.3,1),transform .7s cubic-bezier(.22,.7,.3,1)}
.apparait.vu{opacity:1;transform:none}
.apparait:nth-of-type(2){transition-delay:.08s}
.apparait:nth-of-type(3){transition-delay:.16s}
.apparait:nth-of-type(4){transition-delay:.24s}
@media (prefers-reduced-motion:reduce){.apparait{opacity:1;transform:none;transition:none}}

/* ---------- pages libres ----------
   Le gabarit passe-partout des pages créées depuis l'interface : du texte, des
   intertitres, des images, un bouton. Rien de plus, pour que ces pages restent
   dans le ton du site quel qu'en soit l'auteur. */
.texte-libre{max-width:74ch}
.texte-libre p{margin:0 0 20px;font-size:16.4px;line-height:1.78;color:var(--muted);
  text-align:justify;hyphens:auto}
.libre-intertitre{margin:44px 0 18px;font-family:Spectral,serif;font-size:clamp(22px,2.4vw,29px);
  font-weight:300;line-height:1.2;color:var(--ink)}
.libre-intertitre:first-child{margin-top:0}
.libre-image{margin:34px 0;max-width:none}
.libre-image img{display:block;width:100%;height:auto}
.libre-image figcaption{margin-top:10px;font-size:13.5px;color:var(--muted)}
.libre-action{margin:34px 0 0}