/* ===== ARDENT CONSTRUCTION — système éditorial partagé =====
   Grandes photos, pas de cases. Utilisé par toutes les pages hors accueil. */

.page-hero{
  position:relative;
  height:88svh;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  overflow:hidden;
  background:var(--nuit-fond);
}
.page-hero-media{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 40%;
  transform:scale(1.04);
}
.page-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg, rgba(10,15,26,0.38) 0%, rgba(10,15,26,0.12) 26%, rgba(10,15,26,0.86) 74%, var(--nuit-fond) 100%),
    linear-gradient(90deg, rgba(10,15,26,0.7) 0%, rgba(10,15,26,0.08) 52%, rgba(10,15,26,0) 100%);
  pointer-events:none;
}
.page-hero-inner{
  position:relative;
  z-index:2;
  width:100%;
  max-width:1280px;
  margin:0 auto;
  padding:0 28px min(9vw,88px);
}
.page-hero-inner .eyebrow{ color:var(--amber); text-shadow:0 2px 18px rgba(0,0,0,0.55); }
.page-hero-inner h1{
  font-weight:300;
  font-size:clamp(34px,6vw,86px);
  line-height:1.02;
  letter-spacing:-.01em;
  margin:0 0 20px;
  max-width:14ch;
  text-shadow:0 4px 30px rgba(0,0,0,0.5), 0 1px 3px rgba(0,0,0,0.6);
}
.page-hero-inner p{
  font-weight:300;
  font-size:clamp(15px,1.5vw,18px);
  line-height:1.7;
  color:var(--ivoire-dim);
  max-width:44ch;
  margin:0;
  text-shadow:0 2px 16px rgba(0,0,0,0.6);
}

/* ---- rangée éditoriale : photo pleine hauteur + texte, alternée ---- */
.editorial-row{
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:stretch;
  min-height:78vh;
  background:var(--nuit-fond);
}
.editorial-row.is-reverse{ grid-template-columns:1fr 1.15fr; }
.editorial-row.is-reverse .editorial-media{ order:2; }
.editorial-row.is-reverse .editorial-copy{ order:1; }

.editorial-media{
  position:relative;
  overflow:hidden;
  min-height:420px;
}
.editorial-media img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  transform:scale(1.08);
  transition:transform 1.4s var(--ease-out);
}
.editorial-row.is-visible .editorial-media img{ transform:scale(1); }

.editorial-copy{
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:min(7vw,88px);
}
.editorial-copy .eyebrow{ margin-bottom:20px; }
.editorial-copy h2{
  font-weight:300;
  font-size:clamp(26px,3vw,42px);
  line-height:1.18;
  margin:0 0 22px;
  max-width:14ch;
}
.editorial-copy p{
  font-weight:300;
  font-size:15.5px;
  line-height:1.8;
  color:var(--ivoire-dim);
  max-width:42ch;
  margin:0 0 14px;
}
.editorial-copy p:last-child{ margin-bottom:0; }
.editorial-list{
  list-style:none;
  margin:22px 0 0;
  padding:0;
}
.editorial-list li{
  position:relative;
  padding-left:22px;
  font-size:14.5px;
  color:var(--ivoire-dim);
  line-height:1.8;
  margin-bottom:6px;
}
.editorial-list li::before{
  content:"";
  position:absolute;
  left:0; top:11px;
  width:8px; height:1px;
  background:var(--amber);
}

@media (max-width:900px){
  .editorial-row, .editorial-row.is-reverse{
    grid-template-columns:1fr;
    min-height:0;
  }
  .editorial-row .editorial-media, .editorial-row.is-reverse .editorial-media{ order:1; height:56vh; min-height:340px; }
  .editorial-row .editorial-copy, .editorial-row.is-reverse .editorial-copy{ order:2; padding:min(9vw,44px) 24px; }
}

/* ---- bande photo plein cadre + citation courte, pas de card ---- */
.editorial-band{
  position:relative;
  min-height:64vh;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  text-align:center;
}
.editorial-band img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.editorial-band::after{
  content:"";
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 70% 60% at 50% 50%, rgba(10,15,26,0.55) 0%, rgba(10,15,26,0.72) 100%),
    linear-gradient(180deg, rgba(10,15,26,0.55), rgba(10,15,26,0.8));
}
.editorial-band-inner{
  position:relative; z-index:2;
  max-width:760px;
  padding:0 24px;
}
.editorial-band-inner p{
  font-weight:300;
  font-size:clamp(20px,2.6vw,32px);
  line-height:1.5;
  color:var(--ivoire);
  margin:0;
  text-shadow:0 4px 26px rgba(0,0,0,0.6), 0 1px 4px rgba(0,0,0,0.7);
}

/* ---- grille de trois photos, tailles inégales, pas de cadres carrés uniformes ---- */
.editorial-mosaic{
  display:grid;
  grid-template-columns:1.3fr 1fr;
  grid-template-rows:1fr 1fr;
  gap:2px;
  min-height:76vh;
  background:var(--nuit-fond);
}
.editorial-mosaic .m-large{ grid-row:1 / 3; }
.editorial-mosaic .m-item{ position:relative; overflow:hidden; }
.editorial-mosaic .m-item img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
@media (max-width:900px){
  .editorial-mosaic{ grid-template-columns:1fr; grid-template-rows:none; min-height:0; }
  .editorial-mosaic .m-large{ grid-row:auto; height:50vh; }
  .editorial-mosaic .m-item{ height:38vh; }
}

/* ---- section shell texte seul, centré, pour intros de page ---- */
.editorial-intro{
  max-width:760px;
  margin:0 auto;
  padding:min(10vw,110px) 24px min(6vw,60px);
  text-align:center;
}
.editorial-intro h2{
  font-weight:300;
  font-size:clamp(26px,3.6vw,44px);
  line-height:1.2;
  margin:0;
}

/* ---- CTA de fin de page, réutilisable ---- */
.editorial-cta{
  padding:min(12vw,120px) 24px;
  text-align:center;
  background:linear-gradient(180deg, var(--nuit-fond) 0%, var(--nuit-fond-3) 100%);
}
.editorial-cta h2{
  font-weight:300;
  font-size:clamp(24px,3.4vw,40px);
  line-height:1.28;
  max-width:720px;
  margin:0 auto 20px;
}
.editorial-cta p{
  color:var(--ivoire-dim);
  font-size:15px;
  max-width:480px;
  margin:0 auto 36px;
}
.editorial-cta-ctas{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }



/* ---- sticky scroll stack — étapes qui s'empilent au scroll ----
   Technique portée de React Bits (ScrollStack) : chaque carte se fixe (sticky),
   puis se réduit et s'assombrit légèrement quand la suivante vient la couvrir. */
.scroll-stack{
  position:relative;
  max-width:1040px;
  margin:0 auto;
  padding:min(10vw,90px) 24px min(4vw,40px);
}
.scroll-stack-card{
  position:sticky;
  top:96px;
  height:min(66vh,560px);
  min-height:400px;
  margin-bottom:34px;
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,0.5);
  transform-origin:top center;
  will-change:transform, filter;
}
.scroll-stack-card:nth-child(1){ top:88px; }
.scroll-stack-card:nth-child(2){ top:106px; }
.scroll-stack-card:nth-child(3){ top:124px; }
.scroll-stack-card:nth-child(4){ top:142px; }
.scroll-stack-card img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.scroll-stack-card-shade{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(10,15,26,0.15) 0%, rgba(10,15,26,0.55) 55%, rgba(10,15,26,0.9) 100%);
}
.scroll-stack-card-copy{
  position:absolute;
  left:0; right:0; bottom:0;
  z-index:2;
  padding:min(6vw,48px);
  max-width:620px;
}
.scroll-stack-card-copy .eyebrow{ color:var(--amber); margin:0 0 14px; }
.scroll-stack-card-copy h2{
  font-weight:300;
  font-size:clamp(22px,2.6vw,32px);
  line-height:1.25;
  color:var(--ivoire);
  margin:0 0 12px;
}
.scroll-stack-card-copy p{
  font-weight:300;
  font-size:14.5px;
  line-height:1.7;
  color:var(--ivoire-dim);
  margin:0;
}
@media (max-width:768px){
  .scroll-stack-card{ height:min(58vh,440px); min-height:340px; margin-bottom:20px; }
  .scroll-stack-card:nth-child(1){ top:78px; }
  .scroll-stack-card:nth-child(2){ top:90px; }
  .scroll-stack-card:nth-child(3){ top:102px; }
  .scroll-stack-card:nth-child(4){ top:114px; }
}