/* Tokens propres à cette section (scopés à .svc, pas un :root global —
   la charte globale vit dans style.css) */
.svc{
  --frame-margin: clamp(12px, 2.2vw, 32px);
  --stage-radius: clamp(18px, 2vw, 28px);
  --item-size: clamp(2.6rem, 7.4vw, 7.5rem);
  --item-lead: 1.24;

  position:relative;
  height:calc(var(--count) * 95vh);
}

/* 2. La scène épinglée : marge + coins arrondis */
.svc__stage{
  position:sticky;
  top:var(--frame-margin);
  height:calc(100vh - (var(--frame-margin) * 2));
  margin:0 var(--frame-margin);
  border-radius:var(--stage-radius);
  overflow:hidden;
  isolation:isolate;
  background:var(--grey);
  box-shadow:0 30px 90px -40px rgba(0,0,0,.9);
}
 
/* 3. Médias de fond */
.svc__media{position:absolute;inset:0}
.svc__slide{
  position:absolute;inset:0;
  opacity:0;
  transform:scale(1.06);
  will-change:opacity,transform;
  background-size:cover;background-position:center;
}
.svc__slide video{width:100%;height:100%;object-fit:cover;display:block}
 
.svc__scrim{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 50%, rgba(0,0,0,0) 0%, rgba(0,0,0,.32) 60%, rgba(0,0,0,.75) 100%),
    linear-gradient(to bottom, rgba(0,0,0,.45), rgba(0,0,0,0) 35%, rgba(0,0,0,.55));
}
.svc__grain{
  position:absolute;inset:-50%;pointer-events:none;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain 6s steps(6) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}
  60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,1%)}100%{transform:translate(0,0)}
}
 
/* 4. Colonne de noms — centrage exact sur le service actif */
.svc__viewport{position:absolute;inset:0;overflow:hidden}
.svc__list{
  list-style:none;
  position:absolute;
  top:50%;              /* le JS recale de -itemH/2 pour centrer l'item actif */
  left:50%;
  text-align:center;
  will-change:transform;
  mix-blend-mode: difference;
}
.svc__item{
  display:block;
  font-family:var(--font-base);
  font-size:var(--item-size);
  line-height:var(--item-lead);
  font-weight:var(--fw-heading);
  letter-spacing:-.035em;
  white-space:nowrap;
  color:var(--grey);
  text-decoration:none;

  cursor:pointer;
  transform-origin:50% 50%;
  will-change:transform,color,filter,opacity;

}
.svc__item:focus-visible{
  outline:2px solid var(--white);
  outline-offset:8px;
  border-radius:8px;
}

/* 5. Texte descriptif — bas gauche, crossfade synchronisé avec les slides */
.svc__desc{
  position:absolute;
  left:var(--frame-margin);
  right:var(--frame-margin);
  bottom:clamp(24px, 4vw, 52px);
  max-width:36ch;
  pointer-events:none;
  z-index:2;
}
.svc__desc__item{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  margin:0;
  font-family:var(--font-base);
  font-size:clamp(.9rem, 1.05vw, 1.1rem);
  line-height:1.55;
  color:var(--white);
  opacity:0;
  will-change:opacity;
}

/* 6. Navigation flèches — pile verticale, bord droit */
.svc__nav{
  position:absolute;
  right:var(--frame-margin);
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:12px;
  z-index:3;
}
.svc__nav__btn{
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  border:1px solid rgba(255,255,250,.35);
  background:rgba(255,255,250,.08);
  color:var(--white);
  cursor:pointer;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .25s ease, border-color .25s ease, transform .2s ease, opacity .25s ease;
}
.svc__nav__btn svg{width:20px;height:20px}
.svc__nav__btn:hover{background:rgba(255,255,250,.18);border-color:rgba(255,255,250,.6)}
.svc__nav__btn:active{transform:scale(.92)}
.svc__nav__btn:disabled{opacity:.25;cursor:default}
.svc__nav__btn:disabled:hover{background:rgba(255,255,250,.08);border-color:rgba(255,255,250,.35)}

/* 7. Indice de scroll — visible au repos, s'efface dès qu'on avance */
.svc__hint{
  position:absolute;
  left:50%;
  bottom:clamp(20px, 3vw, 36px);
  transform:translateX(-50%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
  color:var(--white);
  font-family:var(--font-base);
  font-size:.72rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.85;
  pointer-events:none;
  transition:opacity .4s ease;
  z-index:2;
}
.svc__hint svg{width:16px;height:16px;animation:svcHintBounce 1.6s ease-in-out infinite}
.svc__hint.is-hidden{opacity:0}
@keyframes svcHintBounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

@media (max-width: 720px){
  .svc__desc{max-width:none;right:calc(var(--frame-margin) + 60px)}
  .svc__nav{right:calc(var(--frame-margin) - 4px)}
  .svc__nav__btn{width:38px;height:38px}
}

@media (prefers-reduced-motion: reduce){
  .svc__grain{animation:none}
  .svc__hint svg{animation:none}
}