/*
 * DARNÉO — hero scroll-story uniquement (6 chapitres GSAP).
 * Typo hero : Sora ExtraBold (titres) + Inter (corps).
 */

.dh-scope{
  --dh-accent:#B54E27;
  --dh-accent-deep:#9A4220;
  --dh-font-display:"Sora", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --dh-font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.dh-scope *{ box-sizing:border-box; }
.dh-scope img{ max-width:100%; display:block; }

.dh-scope h1,.dh-scope h2,.dh-scope h3,.dh-scope h4{
  font-family:var(--dh-font-display); font-weight:800; margin:0;
  text-wrap:balance; letter-spacing:-0.03em;
}
.dh-scope em{ font-style:normal; font-weight:800; }

.dh-eyebrow{
  font-family:var(--dh-font-body); font-size:11px; letter-spacing:0.14em;
  text-transform:uppercase; color:var(--dh-accent);
  display:inline-flex; align-items:center; gap:8px; font-weight:500;
}
.dh-eyebrow::before{ content:""; width:14px; height:1px; background:var(--dh-accent); }

.dh-stage{ position:relative; height:100svh; overflow:hidden; background:#080604; }
.dh-stage-layers{ position:absolute; inset:0; z-index:0; }
.dh-stage-layers img{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; will-change:opacity,transform; transform-origin:center center;
}
.dh-stage-layers video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  opacity:0; pointer-events:none;
}
.dh-stage-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(8,6,4,0.68) 0%, rgba(8,6,4,0.28) 42%, rgba(8,6,4,0.22) 58%, rgba(8,6,4,0.62) 100%);
  transition: opacity 0.35s ease;
  will-change: opacity;
}

.dh-stage-open{
  position:absolute; inset:0; z-index:6; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:clamp(5.5rem,12vh,7rem) clamp(20px,5vw,48px) 2.5rem;
  pointer-events:none;
  transition: opacity 0.35s ease;
  will-change: opacity;
}
.dh-stage-open .dh-eyebrow{
  color:rgba(235,234,228,0.92); margin-bottom:22px;
  justify-content:center;
  text-shadow:0 1px 3px rgba(0,0,0,0.85);
}
.dh-stage-open .dh-eyebrow::before{ background:var(--dh-accent); }
.dh-stage-open h1{
  font-family:var(--dh-font-display);
  font-size:clamp(2.35rem,8.2vw,4.5rem); line-height:1.02; color:#EBEAE4; font-weight:800;
  letter-spacing:-0.03em; text-transform:lowercase;
  text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 6px 24px rgba(0,0,0,0.45);
}
.dh-h1-line{ display:block; }
.dh-h1-accent{ color:var(--dh-accent); }
.dh-stage-open p{
  font-family:var(--dh-font-body);
  margin:22px auto 0; max-width:36ch; font-size:clamp(0.92rem,1.3vw,1.05rem);
  color:rgba(235,234,228,0.9); line-height:1.65; font-weight:400;
  text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 3px 14px rgba(0,0,0,0.5);
}
.dh-stage-cue{
  margin-top:3.5vh; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--dh-font-body); font-size:10px; letter-spacing:0.22em; text-transform:uppercase;
  color:rgba(235,234,228,0.65); font-weight:500;
  text-shadow:0 1px 3px rgba(0,0,0,0.85);
}
.dh-stage-cue span:last-child{
  width:1px; height:38px;
  background:linear-gradient(to bottom, rgba(235,234,228,0.7), transparent);
  animation:dh-pulse 1.6s ease-in-out infinite;
}
@keyframes dh-pulse{ 0%,100%{opacity:.35} 50%{opacity:1} }

.dh-chapter{
  position:absolute; left:0; right:0; bottom:0; z-index:6;
  padding:0 clamp(24px,5vw,72px) 9vh;
  pointer-events:none; opacity:0; transform:translateY(14px); will-change:opacity,transform;
  transition:opacity .5s ease, transform .5s ease;
}
.dh-chapter-kicker{
  font-family:var(--dh-font-body); font-size:11px; letter-spacing:0.18em; text-transform:uppercase;
  color:var(--dh-accent); margin-bottom:14px; display:flex; align-items:center; gap:14px; font-weight:500;
}
.dh-chapter-kicker::after{ content:""; width:44px; height:1px; background:rgba(181,78,39,0.45); }
.dh-chapter h2{
  font-family:var(--dh-font-display);
  font-size:clamp(1.65rem,4.5vw,2.85rem); color:#EBEAE4; font-weight:800; line-height:1.04;
  max-width:14ch; letter-spacing:-0.03em; text-transform:lowercase;
  text-shadow:0 1px 2px rgba(0,0,0,0.95), 0 4px 16px rgba(0,0,0,0.55);
}
.dh-chapter p{
  font-family:var(--dh-font-body);
  margin:14px 0 0; max-width:46ch; font-size:clamp(0.9rem,1.2vw,1.02rem);
  color:rgba(235,234,228,0.92); line-height:1.65; font-weight:400;
  text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 3px 12px rgba(0,0,0,0.5);
}

.dh-rail{
  position:absolute; right:clamp(18px,3vw,44px); top:50%; transform:translateY(-50%);
  z-index:6; display:flex; flex-direction:column; align-items:flex-end; gap:0; pointer-events:none;
}
.dh-rail-track{ position:relative; width:1px; height:min(46vh,420px); background:rgba(241,231,214,0.22); }
.dh-rail-fill{ position:absolute; top:0; left:0; width:1px; height:0%; background:var(--dh-accent); }
.dh-rail-marks{ position:absolute; inset:0; }
.dh-rail-mark{
  position:absolute; right:10px; transform:translateY(-50%);
  font-family:var(--dh-font-body); font-size:11px; letter-spacing:0.12em;
  color:rgba(235,234,228,0.62); transition:color .4s ease;
  white-space:nowrap; text-shadow:0 1px 8px rgba(0,0,0,0.75);
}
.dh-rail-mark.is-active{ color:var(--dh-accent); font-weight:600; }

body.darneo-home .dh-scope :is(h1,h2,h3,h4){
  font-family:"Sora","Inter",system-ui,sans-serif !important;
  font-weight:800 !important;
}
body.darneo-home .dh-scope :is(p,span,.dh-eyebrow,.dh-stage-cue,.dh-chapter-kicker,.dh-rail-mark){
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif !important;
}
body.darneo-home .dh-scope .dh-stage-open h1{
  color:#EBEAE4 !important;
  font-weight:800 !important;
  text-transform:lowercase !important;
  letter-spacing:-0.03em !important;
  text-shadow:0 1px 2px rgba(0,0,0,0.9), 0 6px 24px rgba(0,0,0,0.45) !important;
}
body.darneo-home .dh-scope .dh-h1-accent{ color:var(--dh-accent) !important; }
body.darneo-home .dh-scope .dh-stage-open p,
body.darneo-home .dh-scope .dh-chapter p{
  color:rgba(235,234,228,0.9) !important;
}
body.darneo-home .dh-scope .dh-chapter h2{
  color:#EBEAE4 !important;
  font-weight:800 !important;
  text-transform:lowercase !important;
}

@media (max-width:767px){
  .dh-scope{ width:100%; max-width:100vw; overflow-x:hidden; }
  .pin-spacer, .dh-stage{ width:100% !important; max-width:100vw !important; }
  .dh-stage-scrim{
    background:
      linear-gradient(180deg, rgba(8,6,4,0.82) 0%, rgba(8,6,4,0.55) 38%, rgba(8,6,4,0.48) 62%, rgba(8,6,4,0.78) 100%) !important;
  }
  .dh-rail{ display:none !important; }
  .dh-stage-open{
    align-items:center;
    justify-content:center;
    text-align:center;
    padding:clamp(6rem,14vh,8rem) 20px 2rem;
  }
  .dh-stage-open h1{
    font-size:clamp(2.1rem, 10.5vw, 2.75rem) !important;
    line-height:1.02 !important;
    max-width:none;
  }
  .dh-stage-open p{ font-size:0.9rem; max-width:28ch; margin-top:18px; }
  .dh-stage-cue{ align-items:center; }
  .dh-chapter{ padding:0 18px 12vh; }
  .dh-chapter h2{ font-size:clamp(1.5rem, 7vw, 2rem); max-width:none; }
  #hero-visual-intro.dh-stage{ min-height:100svh !important; }
  #hero-visual-intro.dh-stage h1{
    font-size:clamp(2.1rem, 10.5vw, 2.75rem) !important;
    line-height:1.02 !important;
    font-weight:800 !important;
  }
}

@media (min-width:768px){
  .dh-stage-open{ align-items:center; text-align:center; }
  .dh-stage-open .dh-eyebrow{ justify-content:center; }
  .dh-stage-cue{ align-items:center; }
}

@media (prefers-reduced-motion: reduce){
  .dh-stage{ height:auto; }
  .dh-stage-layers{ position:relative; }
  .dh-stage-layers video{ display:none; }
  .dh-stage-layers img{ position:relative; opacity:1 !important; transform:none !important; }
  .dh-chapter{ position:relative; opacity:1 !important; transform:none !important; padding:24px; }
  .dh-rail{ display:none; }
}

/* Flèche de fin de séquence — invite à scroller pour la suite */
.dh-stage-end-cue{
  position:absolute; left:50%; bottom:clamp(22px,5vh,48px);
  z-index:12; display:flex; flex-direction:column; align-items:center; gap:10px;
  font-family:var(--dh-font-body); font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:#fff !important; text-decoration:none; font-weight:600;
  text-shadow:0 1px 3px rgba(0,0,0,.95), 0 4px 18px rgba(0,0,0,.65);
  opacity:0; pointer-events:none; visibility:hidden;
  transform:translate(-50%, 10px);
  transition:opacity .55s ease, transform .55s ease, visibility .55s;
}
.dh-stage-end-cue.is-visible{
  opacity:1 !important; pointer-events:auto; visibility:visible !important;
  transform:translate(-50%, 0);
}
.dh-stage-end-cue span{ color:#fff !important; }
.dh-stage-end-cue__arrow{
  width:48px; height:48px; border-radius:999px;
  display:flex; align-items:center; justify-content:center;
  border:1.5px solid rgba(255,255,255,.75);
  background:rgba(8,6,4,.62);
  box-shadow:0 6px 22px rgba(0,0,0,.5), inset 0 0 0 1px rgba(255,255,255,.1);
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  animation:dh-end-bounce 1.6s ease-in-out infinite;
  color:#fff !important;
}
.dh-stage-end-cue svg{ width:22px; height:22px; display:block; color:#fff; stroke:#fff; fill:none; }
@keyframes dh-end-bounce{ 0%,100%{ transform:translateY(0) } 50%{ transform:translateY(8px) } }
@media (max-width:767px){
  /* au-dessus de la barre fixe Appeler / Devis */
  .dh-stage-end-cue{ bottom:108px; }
}
@media (prefers-reduced-motion: reduce){
  .dh-stage-end-cue{ display:none; }
}

/* Bandeau sous le hero — accroche conversion (style bandeau pleine largeur) */
.dh-post-hero-bar{
  background:#8C7560;
  color:#fff;
  text-align:center;
  padding:1.85rem 1.5rem;
  font-family:"Inter",system-ui,-apple-system,"Segoe UI",sans-serif;
}
.dh-post-hero-bar__line{
  margin:0 auto;
  max-width:52rem;
  font-size:clamp(0.98rem,2.2vw,1.2rem);
  font-weight:500;
  line-height:1.5;
  letter-spacing:0.005em;
  color:#fff;
}
.dh-post-hero-bar__line + .dh-post-hero-bar__line{ margin-top:0.4rem; }
@media (max-width:639px){
  .dh-post-hero-bar{ padding:1.5rem 1.1rem; }
  .dh-post-hero-bar__line{ font-size:0.95rem; line-height:1.45; }
}