/* Le défilement des 95 modèles du vrai site, remis le 07/11/2026 (« les collections bougeaient avant »).
   Copie des règles de assets/css/style.css : garder l'original. */
.defile {
  --case: clamp(108px, 14vw, 168px);
  display: grid; gap: clamp(1rem, 2.4vw, 1.8rem);
  margin-inline: calc(-1 * var(--pad-x));       /* d'un bord à l'autre de l'écran (pas 100vw : la barre de défilement ferait déborder la page) */
}
.defile__piste {
  list-style: none; margin: 0; padding: .8rem 0 .2rem;
  display: flex; overflow-x: auto; scroll-snap-type: x proximity;
}
.defile__piste li { flex: 0 0 auto; width: var(--case); padding-inline: clamp(.35rem, 1vw, .7rem); box-sizing: content-box; scroll-snap-align: start; }
.defile__copie { display: none; }
.defile button {
  display: flex; flex-direction: column; align-items: center; width: 100%;
  padding: 0; border: 0; background: none; color: inherit; cursor: pointer;
}
.defile button:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.defile img {
  display: block; width: 100%; height: calc(var(--case) * 1.3);
  object-fit: contain; object-position: center bottom;
  filter: var(--ombre-papier);
  transition: translate .35s cubic-bezier(.2, .7, .2, 1);
}
.defile span {
  display: block; width: 100%; margin-top: .65rem;
  font-family: var(--titre); font-size: clamp(.78rem, .72rem + .2vw, .95rem); line-height: 1.2;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  color: var(--encre); transition: color .25s;
}
.defile button:hover img, .defile button:focus-visible img { translate: 0 -8px; }
.defile button:hover span { color: var(--accent); }

/* en mouvement : la ligne posée de droite à gauche, 1er modèle à droite ;
   le script la déplace (défilement, glisser, lancer) */
.defile.is-anime {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  touch-action: pan-y;                          /* le doigt à la verticale fait défiler la page */
  -webkit-user-select: none; user-select: none;
  cursor: grab;
}
.defile.is-anime .defile__piste {
  overflow: visible; width: max-content; flex-direction: row-reverse;
  will-change: transform;
}
.defile.is-anime .defile__copie { display: block; }
.defile.is-anime button { cursor: inherit; }
.defile.is-anime img { -webkit-user-drag: none; }
.defile.is-glisse { cursor: grabbing; }
.defile.is-glisse button img { translate: none; }
.defile.is-glisse button span { color: var(--encre); }

.defile__pause { margin-top: .9rem; text-align: center; }
.defile__pause button {
  padding: .3rem .6rem; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
  color: var(--encre-60); text-decoration: underline; text-underline-offset: 3px;
}
.defile__pause button:hover { color: var(--accent); }
.defile__pause button[hidden] { display: none; }