/* =========================================================
   Détails Planche Hero — styles front
   Toutes les classes sont préfixées « dgph- » pour éviter
   les collisions avec le thème / Elementor.
   ========================================================= */
.dgph{
  /* la couleur de fond vient des réglages via --dgph-ink (inline) */
  --dgph-ink:   #782B15;
  --dgph-ink-2: color-mix(in srgb, var(--dgph-ink) 88%, #fff);
  --dgph-ink-3: color-mix(in srgb, var(--dgph-ink) 68%, #000);
  --dgph-sable: #E9D6BC;
  --dgph-ambre: #D9A05B;
  --dgph-blanc: #FAF5EC;
  --dgph-display: "Syne", sans-serif;
  --dgph-body:    "Instrument Sans", sans-serif;
  --dgph-mono:    "Space Mono", monospace;
  --dgph-gothic:  "Gothic A1", sans-serif;

  position:relative;
  font-family:var(--dgph-body);
  color:var(--dgph-blanc);
}
.dgph *{margin:0;padding:0;box-sizing:border-box}
.dgph a{color:inherit;text-decoration:none}
.dgph img{display:block}

/* ---------- section épinglée ---------- */
.dgph-pin{
  position:sticky; top:0; height:100svh; min-height:600px;
  display:grid; grid-template-columns:minmax(320px,34%) 1fr;
  align-items:stretch; overflow:hidden;
  background:radial-gradient(110% 80% at 80% 0%, var(--dgph-ink-2), var(--dgph-ink) 65%);
}
/* lumière d'ambiance : halo chaud en haut, ombre douce en bas */
.dgph-pin::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(70% 90% at 80% 0%, rgba(217,160,91,.30), transparent 62%),
    radial-gradient(55% 75% at 12% 18%, rgba(250,245,236,.10), transparent 60%),
    linear-gradient(to top, rgba(46,12,3,.45), transparent 45%);
}

/* ---------- colonne éditoriale ---------- */
.dgph-col{
  position:relative; z-index:5;
  display:flex; flex-direction:column; justify-content:center;
  padding:4rem clamp(1.5rem,3.5vw,3.5rem) 3rem;
  border-right:1px solid rgba(233,214,188,.14);
}
.dgph-eyebrow{
  font-family:var(--dgph-mono); font-size:.62rem; letter-spacing:.34em;
  text-transform:uppercase; color:var(--dgph-ambre);
  display:flex; align-items:center; gap:.8rem;
}
.dgph-eyebrow::after{content:""; flex:0 0 36px; height:1px; background:currentColor}
.dgph-titre{
  font-family:var(--dgph-gothic); font-weight:400;
  font-size:clamp(1.7rem,2.9vw,2.9rem); line-height:1.12;
  letter-spacing:-1.5px;
  margin-top:1.2rem; text-wrap:balance;
}
.dgph-accent{color:var(--dgph-ambre)}
.dgph-para{
  font-family:var(--dgph-gothic);
  margin-top:1.3rem; max-width:26rem; line-height:1.65;
  color:rgba(250,245,236,.82); font-size:.98rem;
}
.dgph-ctas{display:flex; gap:.8rem; margin-top:1.9rem; flex-wrap:wrap}
.dgph-btn{
  display:inline-flex; align-items:center;
  font-weight:600; font-size:.78rem; letter-spacing:.1em; text-transform:uppercase;
  padding:.85rem 1.5rem; border-radius:999px;
  transition:transform .15s ease, background .2s, border-color .2s;
}
.dgph-btn:hover{transform:translateY(-2px)}
.dgph-btn--plein{background:var(--dgph-ink-3); color:var(--dgph-blanc)}
.dgph-btn--plein:hover{background:color-mix(in srgb, var(--dgph-ink-3) 80%, #000)}
.dgph-btn--ligne{border:1px solid rgba(250,245,236,.5)}
.dgph-btn--ligne:hover{border-color:var(--dgph-blanc)}

/* compteur + règle graduée */
.dgph-avancement{margin-top:2.8rem}
.dgph-compteur{font-family:var(--dgph-mono); font-size:.78rem; letter-spacing:.2em; color:var(--dgph-sable)}
.dgph-num{color:var(--dgph-blanc); font-weight:700; font-size:1.5rem; letter-spacing:.05em}
.dgph-regle{
  position:relative; margin-top:.9rem; height:14px;
  background:
    repeating-linear-gradient(90deg, rgba(233,214,188,.35) 0 1px, transparent 1px 10%),
    linear-gradient(to top, rgba(233,214,188,.3) 1px, transparent 1px);
}
.dgph-regle i{
  position:absolute; left:0; bottom:0; height:3px; width:100%;
  background:var(--dgph-ambre); transform:scaleX(0); transform-origin:left;
}
.dgph-indice{
  margin-top:1rem; font-family:var(--dgph-mono); font-size:.58rem;
  letter-spacing:.3em; text-transform:uppercase; color:rgba(233,214,188,.6);
}
.dgph-fleche{display:inline-block; animation:dgph-hop 1.6s ease-in-out infinite}
@keyframes dgph-hop{50%{transform:translateY(4px)}}

/* ---------- la planche ---------- */
.dgph-scene{position:relative; z-index:2; overflow:hidden}
.dgph-piste{
  position:absolute; top:0; bottom:0; left:0;
  display:flex; align-items:center;
  gap:clamp(1.5rem,3vw,3rem);
  padding:5rem clamp(2rem,5vw,5rem) 3rem;
  will-change:transform;
}
.dgph-carte{
  flex:0 0 auto;
  width:clamp(300px, 32vw, 520px);
  transform:translateY(var(--dgph-decale,0));
}
.dgph-carte:nth-child(odd){--dgph-decale:-3.5%}
.dgph-carte:nth-child(even){--dgph-decale:4%}
.dgph-etiquette{
  font-family:var(--dgph-mono); font-size:.6rem; letter-spacing:.3em;
  text-transform:uppercase; color:var(--dgph-ambre);
  display:flex; align-items:center; gap:.7rem; margin-bottom:.7rem;
}
.dgph-etiquette::after{content:""; flex:1; height:1px; background:rgba(233,214,188,.25)}
.dgph-cadre{
  display:block; position:relative; overflow:hidden; border-radius:4px;
  aspect-ratio:4/5; background:var(--dgph-ink-3);
  outline:1px solid rgba(233,214,188,.22); outline-offset:6px;
  box-shadow:0 28px 60px rgba(40,10,2,.5);
}
.dgph-carte:nth-child(even) .dgph-cadre{aspect-ratio:4/3.4}
.dgph-cadre img{
  width:100%; height:100%; object-fit:cover;
  transform:scale(1.16);           /* marge pour la parallaxe */
  will-change:transform;
  filter:saturate(1.04);
}
.dgph-legende{display:flex; align-items:baseline; justify-content:space-between; gap:1rem; margin-top:.9rem}
.dgph-nom{font-family:var(--dgph-display); font-weight:700; font-size:1.02rem}
.dgph-infos{
  font-family:var(--dgph-mono); font-size:.62rem; letter-spacing:.14em;
  color:rgba(250,245,236,.6); white-space:nowrap;
}

/* carte finale */
.dgph-carte--fin .dgph-cadre{
  display:grid; place-items:center;
  background:linear-gradient(140deg, var(--dgph-ink-3), color-mix(in srgb, var(--dgph-ink-3) 70%, #000));
  outline-color:rgba(201,80,47,.5);
}
.dgph-carte--fin .dgph-cadre a{
  font-family:var(--dgph-gothic); font-weight:700; font-size:1.25rem;
  text-align:center; padding:2rem; line-height:1.3;
}
.dgph-carte--fin .dgph-cadre a span{
  display:block; font-family:var(--dgph-mono); font-weight:400;
  font-size:.62rem; letter-spacing:.3em; margin-top:1rem; text-transform:uppercase;
}

/* ---------- mobile & mouvement réduit : défilement natif ---------- */
@media (max-width:900px){
  .dgph{height:auto !important}
  .dgph-pin{position:relative; height:auto; min-height:0; display:block}
  .dgph-col{border-right:0; padding-top:4.5rem; min-height:0}
  .dgph-avancement{margin-top:2.2rem}
  .dgph-scene{overflow:visible}
  .dgph-piste{
    position:relative; padding:2.5rem 1.25rem 3.5rem;
    overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none;
  }
  .dgph-piste::-webkit-scrollbar{display:none}
  .dgph-carte{width:78vw; scroll-snap-align:center}
  .dgph-ld{display:none}
}
@media (min-width:901px){ .dgph-lm{display:none} }
@media (prefers-reduced-motion:reduce){
  .dgph-cadre img{transform:none}
  .dgph-fleche{animation:none}
  .dgph-btn:hover{transform:none}
}