/* SFTS EXPERIENCE COMPONENT #004 — "Proof Experience"
   Extrait de MT Univers (thème mt-univers, sfts_render_reviews() +
   style.css) le 2026-09-23. Voir README.md pour l'API complète, la
   checklist de non-régression et les décisions prises pendant
   l'extraction (mode scroll/statique choisi par expérimentation réelle,
   pas par principe — voir README.md "Seuil scroll/statique").

   Palette : ce mécanisme utilise sur MT Univers la palette CLAIRE du
   site (fond blanc/crème, texte sombre) — différente de la palette
   sombre utilisée par #001/#003. Tokens propres à ce composant, jamais
   les noms de #001 réutilisés par erreur : les rôles visuels sont
   réellement différents (fond de carte clair vs fond de cadre sombre). */

.sfts-proof {
  --sfts-proof-bg: #f4f1ea;
  --sfts-proof-card-bg: #ffffff;
  --sfts-proof-card-border: #e0ddd3;
  --sfts-proof-text: #232323;
  --sfts-proof-muted: #6b6b63;
  --sfts-proof-accent: #8a8560;
  --sfts-proof-author: #1f1f1f;
  --sfts-proof-link: #333333;
  --sfts-proof-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.3);
}

.sfts-proof-band { background: var(--sfts-proof-bg); overflow: hidden; padding: 32px 0; }

.sfts-proof-summary {
  text-align: center; margin: 0 0 16px; font-size: 0.95rem; color: var(--sfts-proof-text);
}
.sfts-proof-summary-rating { font-weight: 700; color: var(--sfts-proof-accent); margin-right: 8px; }
.sfts-proof-summary-count { color: var(--sfts-proof-muted); }

/* Bouton pause — toujours présent et accessible dès qu'il y a un mode
   scroll (voir component.php) : jamais masqué par défaut, contrairement
   à la dette MT Univers `body.home .sfts-reviews-pause{display:none}`
   qui reste hors de ce composant (voir README.md, "Dette A"). */
.sfts-proof-pause {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 auto 12px; padding: 0;
  border: 1.5px solid var(--sfts-proof-card-border); border-radius: 50%;
  background: var(--sfts-proof-card-bg); color: var(--sfts-proof-text);
  cursor: pointer; font-size: 0.95rem; line-height: 1;
}
.sfts-proof-pause:hover,
.sfts-proof-pause:focus-visible { border-color: var(--sfts-proof-accent); }
.sfts-proof-pause:focus-visible { outline: 2px solid var(--sfts-proof-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .sfts-proof-pause { display: none; } }

/* Mode scroll (voir README.md pour le seuil déterminé expérimentalement) */
.sfts-proof-track-wrap {
  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);
}
.sfts-proof-track--scroll {
  display: flex; gap: 20px; width: max-content;
  animation: sfts-proof-scroll var(--sfts-proof-duration, 46s) linear infinite;
}
.sfts-proof-track--scroll:hover { animation-play-state: paused; }
.sfts-proof-track-wrap.is-paused .sfts-proof-track--scroll { animation-play-state: paused; }
@keyframes sfts-proof-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .sfts-proof-track--scroll { animation: none; flex-wrap: wrap; width: auto; }
  .sfts-proof-track-wrap { -webkit-mask-image: none; mask-image: none; }
}

/* Mode statique (peu de preuves — voir README.md) : une rangée qui
   s'enroule naturellement, jamais de défilement, jamais de duplication. */
.sfts-proof-track--static {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 20px;
}

.sfts-proof-card {
  background: var(--sfts-proof-card-bg); border: 1px solid var(--sfts-proof-card-border);
  border-radius: 16px; padding: 22px; width: 300px; flex-shrink: 0;
  box-shadow: var(--sfts-proof-shadow);
}
.sfts-proof-card-source {
  display: block; font-size: 0.66rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--sfts-proof-muted); margin-bottom: 8px;
}
.sfts-proof-card-stars { color: var(--sfts-proof-accent); letter-spacing: 2px; font-size: 0.95rem; margin-bottom: 10px; }
.sfts-proof-card-text { color: var(--sfts-proof-text); font-size: 0.93rem; margin: 0 0 16px; font-style: italic; }
.sfts-proof-card-who { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; row-gap: 2px; font-size: 0.8rem; color: var(--sfts-proof-muted); } /* flex-wrap + gap (2026-09-29) : sur carte étroite, nom et date se collaient (« Gramme » + « en octobre ») */
.sfts-proof-card-who b { color: var(--sfts-proof-author); font-family: Arial, sans-serif; font-style: normal; }

.sfts-proof-links { margin-top: 24px; font-size: 0.85rem; color: var(--sfts-proof-muted); text-align: center; }
.sfts-proof-links a { color: var(--sfts-proof-link); font-weight: 600; text-decoration: none; }

.sfts-proof-band--compact { padding: 24px 0; }
.sfts-proof-band--compact .sfts-proof-track--scroll { animation-duration: var(--sfts-proof-duration, 30s); }
.sfts-proof-band--compact .sfts-proof-card { width: 260px; padding: 18px; }

/* Mode slider (2026-09-26) — flèches à gauche et à droite, aucun
   défilement automatique. Défilement horizontal natif avec aimantation
   (scroll-snap) sur chaque carte ; barre de défilement masquée, les
   flèches et le glisser au doigt suffisent. Couleurs des flèches via les
   mêmes tokens que les cartes (texte/bordure/accent) : suivent le thème
   de l'appelant. */
.sfts-proof-slider { display: flex; align-items: center; gap: 16px; }
.sfts-proof-track-wrap--slider {
  flex: 1; min-width: 0; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; overscroll-behavior-x: contain;
  -webkit-mask-image: none; mask-image: none;
  scrollbar-width: none; padding: 8px 0 40px; margin-bottom: -32px;
}
.sfts-proof-track-wrap--slider::-webkit-scrollbar { display: none; }
.sfts-proof-track-wrap--slider:focus-visible { outline: 2px solid var(--sfts-proof-accent); outline-offset: 4px; }
.sfts-proof-track--slider { display: flex; gap: 20px; }
.sfts-proof-track--slider .sfts-proof-card { scroll-snap-align: start; }
.sfts-proof-arrow {
  flex-shrink: 0; width: 44px; height: 44px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--sfts-proof-text); border-radius: 50%;
  background: transparent; color: var(--sfts-proof-text);
  font-size: 1.4rem; line-height: 1; cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, opacity 0.2s ease;
}
.sfts-proof-arrow:hover:not(:disabled) { background: var(--sfts-proof-link); border-color: var(--sfts-proof-link); color: var(--sfts-proof-card-bg); }
.sfts-proof-arrow:focus-visible { outline: 2px solid var(--sfts-proof-accent); outline-offset: 2px; }
.sfts-proof-arrow:disabled { opacity: 0.25; cursor: default; }
@media (max-width: 700px) {
  .sfts-proof-slider { gap: 8px; }
  .sfts-proof-arrow { width: 36px; height: 36px; font-size: 1.2rem; }
  .sfts-proof-track--slider .sfts-proof-card { width: min(300px, calc(100vw - 140px)); }
}
@media (prefers-reduced-motion: reduce) { .sfts-proof-track-wrap--slider { scroll-behavior: auto; } }