/* pages des pôles : duo photo/texte, bannière, ruban */

/* ---------- bloc photo + texte, en vis-à-vis ----------
   La photo et le texte occupent chacun une moitié ; une fois sur deux la photo
   passe à droite, ce qui donne son rythme à la page. */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.duo.inverse .duo-vue{order:2}
.duo-vue img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:var(--stone-soft)}
.duo-texte h2{font-size:clamp(27px,3vw,38px);font-weight:300;margin:0 0 20px}
.duo-texte h2::after{content:"";display:block;width:64px;height:2px;background:var(--crimson);margin-top:16px}
.duo-texte p{margin:0;font-size:16.5px;line-height:1.75;color:var(--muted)}
.pole-ensemble{margin:0}
.pole-ensemble img{width:100%;display:block}
.pole-ensemble figcaption{margin-top:14px;font-family:Montserrat,sans-serif;font-size:12.5px;
  letter-spacing:.04em;color:var(--muted)}
@media (max-width:900px){
  .duo{grid-template-columns:1fr;gap:28px}
  .duo.inverse .duo-vue{order:0}
}

/* ---------- bannière : photo pleine largeur, texte par-dessus ----------
   Le voile est plus dense à gauche, là où se pose le texte, et s'éclaircit à
   droite pour laisser voir le groupe. */
.banniere{position:relative;display:flex;align-items:center;min-height:clamp(280px,30vw,440px);
  background:#111;overflow:hidden}
.banniere img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%}
.banniere::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(17,17,17,.92),rgba(17,17,17,.86) 55%,rgba(17,17,17,.7))}
.banniere-texte{position:relative;z-index:1;display:grid;grid-template-columns:minmax(200px,1fr) 2fr;
  gap:48px;align-items:center;padding-top:56px;padding-bottom:56px}
.banniere-texte h2{margin:0;color:#fff;font-size:clamp(28px,3.4vw,44px);font-weight:600;
  font-family:Montserrat,sans-serif;letter-spacing:-.01em}
.banniere-texte h2::after{content:"";display:block;width:130px;height:4px;background:var(--crimson);margin-top:22px}
.banniere-texte p{margin:0;color:#fff;font-size:16.5px;line-height:1.85}
@media (max-width:900px){
  .banniere-texte{grid-template-columns:1fr;gap:24px}
  .banniere::after{background:linear-gradient(to bottom,rgba(17,17,17,.9),rgba(17,17,17,.88))}
}

/* ---------- page des pôles : un rythme plus serré et plus chaleureux ---------- */
.duo{grid-template-columns:1.15fr 1fr;gap:64px}
.duo-vue{position:relative}
/* un léger décalage coloré derrière la photo : la page respirait trop de blanc */
.duo-vue::before{content:"";position:absolute;left:-18px;bottom:-18px;width:62%;height:58%;
  background:var(--crimson);opacity:.14;z-index:0}
.duo.inverse .duo-vue::before{left:auto;right:-18px}
.duo-vue img{position:relative;z-index:1;aspect-ratio:4/3}
.duo-texte h2{margin-bottom:18px}
.duo-texte h2::after{width:52px;margin-top:14px}

@media (max-width:900px){
  .duo{grid-template-columns:1fr}
  .duo-vue::before{display:none}
  }

/* ---------- ruban des pôles ----------
   Bande d'images sans barre de défilement : c'est le curseur qui commande. Dès
   qu'on survole (ou qu'on tabule vers) une vue coupée par le bord, le ruban glisse
   pour la recentrer. La molette et le doigt fonctionnent toujours. Chaque vue
   mène au bloc du pôle correspondant, plus bas dans la page. */
.ruban{overflow-x:auto;background:#000;scroll-snap-type:x proximity;
  scrollbar-width:none;-ms-overflow-style:none;
  /* un filet de page entre la bannière et le ruban : sans lui, les deux zones
     sombres se touchent et l'œil ne voit plus qu'un seul bloc. Même chose en bas,
     où le ruban rejoint le pied de page, sombre lui aussi */
  margin:12px 0}
.ruban::-webkit-scrollbar{display:none;width:0;height:0}
/* le fond de la piste apparaît dans l'espace laissé entre deux vues :
   c'est lui qui dessine la barre de séparation, en gris métal */
.ruban-piste{display:flex;width:max-content;gap:4px;background:#8a8f94}
.ruban-vue{position:relative;flex:none;width:clamp(300px,32vw,560px);scroll-snap-align:center;
  display:block;overflow:hidden}
.ruban-vue img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1)}
.ruban-vue:hover img{transform:scale(1.04)}
.ruban-vue::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(17,17,17,.8),rgba(17,17,17,.14) 52%,rgba(17,17,17,0));
  transition:background .3s ease}
.ruban-vue:hover::after{background:linear-gradient(to top,rgba(17,17,17,.86),rgba(17,17,17,.3) 58%,rgba(17,17,17,.06))}
.ruban-nom{position:absolute;left:26px;bottom:22px;z-index:1;color:#fff;
  font-family:Montserrat,sans-serif;font-weight:600;font-size:clamp(15px,1.5vw,21px);letter-spacing:-.01em}
.ruban-nom::after{content:"";display:block;height:3px;background:var(--crimson);margin-top:9px;
  transform-origin:left;transform:scaleX(.42);transition:transform .35s ease}
.ruban-vue:hover .ruban-nom::after{transform:scaleX(1)}

/* ---------- page d'un pôle ---------- */
.page-head .page-rubrique a{color:inherit}
.page-head .page-rubrique a:hover{color:var(--crimson)}
.pole-suite{margin:0 0 20px;font-family:Montserrat,sans-serif;font-size:11.5px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.pole-liens{margin:0;display:flex;flex-wrap:wrap;gap:14px}
.pole-liens a{font-family:Montserrat,sans-serif;font-size:12px;font-weight:600;letter-spacing:.1em;
  text-transform:uppercase;padding:13px 20px;border:1px solid var(--line);color:var(--ink);
  transition:background .22s ease,color .22s ease,border-color .22s ease}
.pole-liens a:hover{background:var(--crimson);border-color:var(--crimson);color:#fff}