@charset "UTF-8";

/* ==========================================================
   KIT CARROUSEL SCROLL · carousel-scroll.css
   IPM Tools-Design · dossiers.lalibre.be/tools-design/
   ========================================================== */

.ll-scroll-carousel {
  --sc-accent: var(--ipm-accent-dark, #f2c8a0);                          /* compteur, barre */
  --sc-pad: clamp(20px, 5vw, 90px);              /* marges latérales */
  --sc-font-title: var(--ipm-font-title, "Manuale", Georgia, serif);
  --sc-font-ui: ui-monospace, Menlo, monospace;
}
.ll-scroll-carousel[data-brand="dh"] { --sc-accent: #e1001a; --sc-font-title: "Open Sans", Helvetica, Arial, sans-serif; }

.ll-scroll-carousel { position: relative; }
.ll-scroll-carousel__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.ll-scroll-carousel__track { display: flex; height: 100%; will-change: transform; }
.ll-scroll-carousel__slide { position: relative; flex: 0 0 100vw; height: 100%; overflow: hidden; }
.ll-scroll-carousel__media { position: absolute; inset: 0; display: grid; place-items: center; background: linear-gradient(135deg, #23252b, #121317); }
.ll-scroll-carousel__media span { font-family: var(--sc-font-ui); font-size: 13px; letter-spacing: 0.2em; color: rgba(255,255,255,0.3); }
.ll-scroll-carousel__cap {
  position: absolute; left: var(--sc-pad); bottom: 80px; z-index: 3; max-width: 560px; color: #fff;
}
.ll-scroll-carousel__cap-idx { font-family: var(--sc-font-ui); font-size: 12px; letter-spacing: 0.2em; color: var(--sc-accent); margin-bottom: 12px; }
.ll-scroll-carousel__cap-title { font-family: var(--sc-font-title); font-size: clamp(26px, 3.4vw, 44px); line-height: 1; margin: 0; }
.ll-scroll-carousel__slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,8,9,0.1), rgba(8,8,9,0.65)); z-index: 1; }
.ll-scroll-carousel__cap { z-index: 3; }

.ll-scroll-carousel__hud { position: absolute; right: var(--sc-pad); bottom: 80px; z-index: 4; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; color: #fff; }
.ll-scroll-carousel__counter { font-family: var(--sc-font-ui); font-size: 13px; letter-spacing: 0.12em; }
.ll-scroll-carousel__counter .ll-scroll-carousel__cur { color: var(--sc-accent); }
.ll-scroll-carousel__progress { width: 160px; height: 2px; background: rgba(255,255,255,0.25); }
.ll-scroll-carousel__bar { height: 100%; background: var(--sc-accent); transform: scaleX(0); transform-origin: left; }

/* Fallback natif (mobile / reduced motion) */
.ll-scroll-carousel.is-native .ll-scroll-carousel__pin { position: relative; height: auto; }
.ll-scroll-carousel.is-native .ll-scroll-carousel__track { overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; height: 78vh; }
.ll-scroll-carousel.is-native .ll-scroll-carousel__slide { flex-basis: 88vw; scroll-snap-align: center; margin-right: 10px; }
.ll-scroll-carousel.is-native .ll-scroll-carousel__cap { bottom: 30px; }
.ll-scroll-carousel.is-native .ll-scroll-carousel__hud { bottom: 30px; }