/* Correctif sticky — neutralise overflow sur les ancêtres */
.st-content {
  overflow: visible !important;
}

/* Si le body ou html ont aussi overflow, forcer : */
html, body {
  overflow-x: clip; /* bloque le scroll horizontal sans casser sticky */
}


*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{--blue:#1a4b8c;--bg-light:#f5f7fa;--grey-mid:#e2e6ed;--grey-text:#6b7280;--teal:#0097a7}
body{font-family:'Inter',sans-serif;background:#fff}
.demo-spacer{height:40vh;background:#fff;display:flex;align-items:center;justify-content:center;color:var(--grey-text);font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;border-bottom:1px solid var(--grey-mid)}

/*
  PRINCIPE DU STICKY SCROLL-DRIVEN :
  - #produit est le "rail" haut (100vh + N frames * px/frame)
  - #produit-scrollable est sticky top:0 height:100vh
  => il reste colle exactement pendant que #produit
     traverse la fenetre, puis se decolle naturellement
*/

#produit{
  /* hauteur definie par JS */
}

#produit-scrollable{
  position:sticky;
  top:0;
  height:110vh;
  background:#ffffff;
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow:hidden;
}

.container{width:100%;max-width:1100px;margin:0 auto;padding:0 1.5rem}

.produit-title{
  font-family:'Raleway',sans-serif;
  font-size:clamp(1rem,1.8vw,1.5rem);
  font-weight:800;
  color:var(--blue);
  text-align:center;
  padding-bottom:.8rem;
  max-width:780px;
  margin:0 auto;
  line-height:1.4
}

#viewer-container{width:100%;max-width:860px;margin:0 auto}
#viewer figure{margin:0;width:100%;line-height:0}
#viewer figure img{width:100%;height:auto;display:block;border-radius:8px}

#scroll-progress{width:100%;height:3px;background:var(--grey-mid);border-radius:2px;margin-top:.4rem}
#scroll-progress-fill{height:100%;width:0%;background:linear-gradient(to right,var(--blue),var(--teal));border-radius:2px;transition:width .05s linear}

.grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--grey-mid);margin-top:.6rem}
.bloc{padding:.9rem 1.2rem .9rem 0;border-right:1px solid var(--grey-mid)}
.bloc:last-child{border-right:none;padding-right:0}
.bloc:not(:first-child){padding-left:1.2rem}
.bloc h3{font-family:'Raleway',sans-serif;font-size:.8rem;font-weight:800;color:var(--blue);margin-bottom:.45rem;line-height:1.3}
.bloc ul{list-style:none;display:flex;flex-direction:column;gap:.3rem}
.bloc ul li{font-size:.73rem;color:var(--grey-text);padding-left:.9rem;position:relative;line-height:1.45}
.bloc ul li::before{content:'';position:absolute;left:0;top:.52em;width:5px;height:5px;border-radius:50%;background:var(--teal)}

@media(max-width:768px){
  .produit-title{text-align:left}
  .grid{grid-template-columns:1fr}
  .bloc{border-right:none;border-bottom:1px solid var(--grey-mid);padding:.8rem 0}
  .bloc:last-child{border-bottom:none}
  .bloc:not(:first-child){padding-left:0}
}