/* Scrollytelling — mécanisme inchangé (pin vh + sticky + slides). */

.sw-loop{padding:0!important;background:var(--cream)}
.sw-loop-pin{position:relative;height:var(--loop-pin-h)}
.sw-loop-sticky{
  position:sticky;top:var(--loop-sticky-top);z-index:10;
  height:var(--loop-sticky-h);height:88dvh;
  display:flex;flex-direction:column;justify-content:center;
  background:var(--cream);
  box-sizing:border-box;padding:0;
}
.sw-loop-sticky-inner{
  width:100%;max-width:1180px;margin:0 auto;padding:0 var(--space-page);
  display:flex;flex-direction:column;gap:var(--space-7);
  height:auto;max-height:var(--loop-sticky-h);
}
.sw-loop-intro{padding:0;flex:none}
.sw-loop-intro h2{color:var(--ink);max-width:16ch;font-size:clamp(28px,3.6vw,42px)}
.sw-loop-board{
  flex:none;
  display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--space-4);
  align-items:start;
  height:min(440px,50vh);
  min-height:0;
}
.sw-gauge{position:relative;align-self:center;padding:4px 0}
.sw-gauge-list{
  list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:2px;position:relative;
}
.sw-gauge-list::before{
  content:"";position:absolute;left:6px;top:18px;bottom:18px;width:2px;
  background:rgba(23,37,28,.14);border-radius:99px;
}
.sw-gauge-fill{
  display:block;position:absolute;left:6px;top:18px;width:2px;height:0;
  background:linear-gradient(180deg,var(--gold-lt),var(--gold));
  border-radius:99px;z-index:1;pointer-events:none;
}
.sw-gauge-list li{margin:0;position:relative;z-index:2}
.sw-gauge-list button{
  appearance:none;background:none;border:0;cursor:pointer;text-align:left;
  width:100%;padding:var(--space-3) 0 var(--space-3) 28px;font-family:var(--sans);
  font-size:13px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  color:#A7A395;transition:color .35s var(--ease);position:relative;
}
.sw-gauge-list button::before{
  content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:12px;height:12px;border-radius:50%;
  border:2px solid #C4BEAD;background:var(--cream);
  transition:background .35s var(--ease),border-color .35s var(--ease),box-shadow .35s var(--ease);
}
.sw-gauge-list button.on{color:var(--gold)}
.sw-gauge-list button.on::before{
  background:var(--gold);border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(169,140,54,.18);
}
.sw-gauge-list button:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

.sw-loop-stage{
  position:relative;min-height:0;height:100%;
  border:0;border-radius:0;background:transparent;overflow:visible;
  box-shadow:none;
}
.sw-slide{
  position:absolute;inset:0;
  display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.22fr);
  gap:28px;align-items:center;
  padding:4px;box-sizing:border-box;
  opacity:0;pointer-events:none;z-index:0;
  transition:opacity .8s var(--ease);
}
.sw-slide.on{
  opacity:1;pointer-events:auto;z-index:1;
}
.sw-slide-copy{max-width:28ch;align-self:center}
.sw-slide-copy .sw-beat-num{
  font-family:var(--serif);font-size:14px;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  display:block;margin-bottom:var(--space-2);
}
.sw-slide-copy h3{margin:0 0 var(--space-2);color:var(--ink);font-size:clamp(26px,2.8vw,36px);line-height:1.12}
.sw-slide-copy p{margin:0;font-size:17px;line-height:1.55;color:#4C594F}

.sw-slide-media{
  position:relative;width:100%;max-width:520px;justify-self:center;
  padding:4px 28px 20px 0;box-sizing:border-box;
}
.sw-slide-photo{
  border-radius:8px;overflow:hidden;aspect-ratio:4/3;background:var(--cream-2);
  box-shadow:0 16px 32px -18px rgba(23,37,28,.32);
}
.sw-slide-photo img{width:100%;height:100%;object-fit:cover}
.sw-slide-media .ph{
  width:176px;position:absolute;right:0;bottom:0;
  transform:rotate(-3deg);
}
.sw-slide.on .ph{cursor:pointer}
.sw-slide.on .ph:hover{
  transform:rotate(0deg) translateY(-8px) scale(1.02);
  box-shadow:0 24px 40px -16px rgba(0,0,0,.5);z-index:5;
}
.sw-slide-media--solo{
  display:flex;align-items:center;justify-content:center;
  min-height:0;height:100%;padding:var(--space-1);max-width:none;
}
.sw-slide-media--solo .ph{position:relative;right:auto;bottom:auto;transform:none;width:214px}
.sw-slide.on .sw-slide-media--solo .ph:hover{
  transform:translateY(-8px) scale(1.02);
}

/* Chute hors du pin : la section loop n'a pas de padding, d'où un bas contenu. */
.sw p.sw-loop-chute{padding:var(--space-chute) var(--space-page) var(--space-section);max-width:1140px;margin:0 auto}