/* ===== 02 — Le constat (sobre : titre + 3 colonnes) ===== */
.s-scroll{padding:clamp(56px,8vw,104px) 0}
.s-scroll__head{max-width:760px;margin-bottom:clamp(28px,4vw,48px)}
.s-scroll__title{margin-top:10px}

.s-scroll__cols{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,2vw,24px)}
.s-scroll__col{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px 16px 22px;display:flex;flex-direction:column;gap:18px}
.s-scroll__col--video{border-color:var(--blue);background:#f7faff}
.s-scroll__phrase{font-family:var(--font-display);font-weight:700;font-size:clamp(19px,1.8vw,22px);line-height:1.25;letter-spacing:-.02em;color:var(--ink);padding:0 4px}

/* vignettes */
.s-scroll__thumb{aspect-ratio:16/10;border-radius:var(--radius-s);background:var(--bg-2);display:grid;place-items:center;overflow:hidden}
.s-scroll__tcard{width:58%;aspect-ratio:4/3;border-radius:10px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}
.s-scroll__thumb--text .s-scroll__tcard{display:flex;flex-direction:column;justify-content:center;gap:7px;padding:0 14%}
.s-scroll__thumb--text i{display:block;height:6px;border-radius:3px;background:#dfe3e9}
.s-scroll__thumb--text i:nth-child(1){width:60%;background:#c9cfd8}
.s-scroll__thumb--text i:nth-child(3){width:88%}
.s-scroll__thumb--text i:nth-child(5){width:52%}
.s-scroll__thumb--photo .s-scroll__tcard{background:#c9d2dd;border-color:#c9d2dd}
.s-scroll__thumb--photo svg{width:100%;height:100%}
.s-scroll__thumb--video{background:#eef3fb}
.s-scroll__thumb--video .s-scroll__tcard{background:linear-gradient(160deg,#fff 10%,var(--peach) 100%);border-color:#f3dcc0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}
.s-scroll__pill{display:inline-flex;align-items:center;gap:5px;font-size:10px;font-weight:600;color:var(--ink);background:#fff;padding:3px 8px 3px 4px;border-radius:99px}
.s-scroll__pill em{width:10px;height:10px;border-radius:3px;background:var(--orange)}
.s-scroll__btn{font-size:10.5px;font-weight:600;color:#fff;background:var(--orange-2);padding:5px 10px;border-radius:7px}
.s-scroll__bar{position:absolute;left:10px;right:10px;bottom:8px;height:3px;border-radius:3px;background:rgba(27,36,48,.12);overflow:hidden}
.s-scroll__fill{display:block;height:100%;width:100%;background:var(--orange-2);transform:scaleX(.08);transform-origin:0 50%}
.s-scroll.is-static .s-scroll__fill{transform:scaleX(1)}

@media (max-width:900px){
  .s-scroll__cols{grid-template-columns:repeat(2,1fr)}
  .s-scroll__col--video{grid-column:1 / -1}
  .s-scroll__col--video .s-scroll__thumb{aspect-ratio:21/9}
  .s-scroll__col--video .s-scroll__tcard{width:auto;height:76%}
}
@media (max-width:560px){
  .s-scroll__cols{grid-template-columns:1fr;gap:12px}
  .s-scroll__col{flex-direction:row;align-items:center;padding:12px;gap:14px}
  .s-scroll__thumb,.s-scroll__col--video .s-scroll__thumb{flex:0 0 104px;aspect-ratio:1}
  .s-scroll__tcard,.s-scroll__col--video .s-scroll__tcard{width:78%;height:auto}
  .s-scroll__thumb--video .s-scroll__tcard{width:90%;aspect-ratio:4/3;height:auto}
  .s-scroll__pill{display:none}
  .s-scroll__btn{font-size:7.5px;padding:4px 6px;border-radius:5px;white-space:nowrap}
  .s-scroll__bar{left:6px;right:6px;bottom:5px;height:2px}
  .s-scroll__phrase{font-size:18px;padding:0}
}