/* UDCShare v2 — carrousel des fonctionnalités (partials/home-carousel.ejs) et cartes de /fonctionnalites.
   Jetons : tokens.css. Cartes par vue : 1 (téléphone), 2 (≥ 40rem), 3 (≥ 64rem). Défilement : public/v2/js/carousel.js. */

/* ── Bloc ────────────────────────────────────────────────────────────────── */
.v2-disco__shell {
  position: relative;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, var(--color-brand-soft) 0%, var(--color-surface) 70%);
  box-shadow: var(--shadow-sm);
}
@media (min-width: 48rem) { .v2-disco__shell { padding: var(--space-5); } }

.v2-disco__head {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (min-width: 40rem) { .v2-disco__head { grid-template-columns: auto 1fr auto; } }

.v2-disco__mark {
  display: none;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px solid var(--color-brand);
  border-radius: 50%;
  color: var(--color-brand);
  background: var(--color-surface);
}
.v2-disco__mark svg { width: 26px; height: 26px; }
@media (min-width: 40rem) { .v2-disco__mark { display: grid; } }

.v2-disco__heading { margin: 0; font-size: var(--font-size-lg); line-height: var(--font-line-height-tight); }
.v2-disco__lead { margin: var(--space-1) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }
@media (min-width: 48rem) { .v2-disco__heading { font-size: var(--font-size-xl); } .v2-disco__lead { font-size: var(--font-size-base); } }

.v2-disco__all { margin: var(--space-4) 0 0; text-align: center; font-weight: var(--font-weight-medium); }

/* ── Piste ───────────────────────────────────────────────────────────────── */
.v2-carousel { position: relative; --per-view: 1; --gap: var(--space-4); }
@media (min-width: 40rem) { .v2-carousel { --per-view: 2; } }
@media (min-width: 64rem) { .v2-carousel { --per-view: 3; } }

.v2-carousel__viewport { overflow: hidden; border-radius: var(--radius-lg); padding: 2px; margin: -2px; }

.v2-carousel__track {
  display: flex;
  gap: var(--gap);
  margin: 0;
  padding: 0;
  list-style: none;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .v2-carousel__track { transition: transform 500ms ease; }
}

/* ── Carte ───────────────────────────────────────────────────────────────── */
.v2-disco-card {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--gap)) / var(--per-view));
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
}
@media (prefers-reduced-motion: no-preference) {
  .v2-disco-card { transition: box-shadow var(--motion-base), border-color var(--motion-base), transform var(--motion-base); }
  .v2-disco-card:hover { transform: translateY(-2px); }
}
.v2-disco-card:hover, .v2-disco-card:focus-within { border-color: var(--color-brand); box-shadow: var(--shadow-md); }

/* Toute la carte est cliquable (souris, doigt) ; au clavier, le bouton « Découvrir » porte le focus. */
.v2-disco-card__link { position: absolute; inset: 0; z-index: 1; }

.v2-disco-card__visual { position: relative; aspect-ratio: 240 / 150; line-height: 0; background: var(--color-brand-soft); }
.v2-disco-svg { display: block; width: 100%; height: 100%; }

.v2-disco-card__count {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-brand-strong);
  color: var(--color-on-brand);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  line-height: 1.6;
}

.v2-disco-card__body { display: flex; flex: 1; flex-direction: column; gap: var(--space-2); padding: var(--space-4); }

.v2-disco-card__meta { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.v2-disco-card__tag,
.v2-disco-card__plan {
  padding: 2px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.v2-disco-card__tag { background: var(--color-brand-soft); color: var(--color-brand-strong); }
.v2-disco-card__plan { background: var(--color-warning-soft); color: var(--color-warning); }

.v2-disco-card__title { margin: 0; font-size: var(--font-size-lg); line-height: var(--font-line-height-tight); }
.v2-disco-card__desc { margin: 0; font-size: var(--font-size-sm); color: var(--color-text-muted); }

.v2-disco-card__cta {
  position: relative;
  z-index: 2;
  align-self: flex-start;
  gap: var(--space-2);
  margin-top: auto;
}
.v2-disco-card__body > .v2-disco-card__desc { margin-bottom: var(--space-3); }

/* ── Flèches ─────────────────────────────────────────────────────────────── */
.v2-carousel__nav { display: flex; gap: var(--space-2); }

.v2-carousel__arrow {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text);
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
}
.v2-carousel__arrow:hover { border-color: var(--color-brand); color: var(--color-brand); background: var(--color-surface-2); }
.v2-carousel__arrow:focus-visible,
.v2-carousel__pause:focus-visible,
.v2-carousel__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }

/* ── Points, pause, barre de progression ─────────────────────────────────── */
.v2-carousel__foot { display: flex; align-items: center; justify-content: center; gap: var(--space-3); margin-top: var(--space-4); }
.v2-carousel__dots { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; }

.v2-carousel__dot {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
}
.v2-carousel__dot::after {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--color-border-strong);
  opacity: 0.45;
  transition: background var(--motion-fast), transform var(--motion-fast), opacity var(--motion-fast);
}
.v2-carousel__dot[aria-current="true"]::after { background: var(--color-brand); opacity: 1; transform: scale(1.3); }

.v2-carousel__pause {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-border);
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
}
.v2-carousel__pause:hover { color: var(--color-brand); border-color: var(--color-brand); }
.v2-carousel__pause .v2-carousel__icon-play { display: none; }
.v2-carousel__pause[aria-pressed="true"] .v2-carousel__icon-play { display: block; }
.v2-carousel__pause[aria-pressed="true"] .v2-carousel__icon-pause { display: none; }
.v2-carousel__pause[hidden] { display: none; }

.v2-carousel__progress { height: 3px; margin-top: var(--space-3); overflow: hidden; border-radius: var(--radius-pill); background: var(--color-border); }
.v2-carousel__progress-bar { display: block; height: 100%; background: var(--color-brand); transform: scaleX(0); transform-origin: left center; }
.v2-carousel__progress-bar.is-running { animation: v2-disco-progress var(--disco-interval, 15000ms) linear forwards; }
.v2-carousel__progress-bar.is-paused { animation-play-state: paused; }
@keyframes v2-disco-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .v2-carousel__progress { display: none; } }

/* ── Cartes de la page /fonctionnalites (mêmes cartes, en grille) ────────── */
.v2-disco-grid { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 40rem) { .v2-disco-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .v2-disco-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Le compteur « n / 9 » n'a de sens que dans le carrousel : pas dans la grille de /fonctionnalites. */
.v2-disco-grid .v2-disco-card__count { display: none; }
.v2-disco-grid .v2-disco-card { flex: initial; }

/* ── Capture réelle de l'application (feature-media.ejs) ─────────────────── */
.v2-disco-card__visual:has(.v2-disco-card__shot), .v2-feature-hero__visual:has(.v2-disco-card__shot) { overflow: hidden; }
/* Cadre identique aux illustrations (240 / 150) : la capture (3:2) est recadrée, jamais étirée, et ne change pas la hauteur de la carte. */
.v2-disco-card__shot { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; background: var(--color-surface); }
.v2-disco-card__sample {
  padding: 2px var(--space-2); border-radius: 999px;
  font-size: 0.6875rem; line-height: 1.4; font-weight: var(--font-weight-medium);
  color: var(--color-text-muted); background: var(--color-surface); border: 1px solid var(--color-border);
}
.v2-feature-hero__sample { margin: var(--space-2) 0 0; font-size: var(--font-size-sm); color: var(--color-text-muted); text-align: center; }

.v2-disco-card.has-shot .v2-disco-card__count { display: none; }