/* ==========================================================================
   Power 21 — page « Témoignages » (route 'stories', content/<lang>/p_stories.php)
   Compléments de layout.css : mur de cartes qui défilent (content/tpl/stories_wall.php,
   défilement src/js/stories.js). Préfixe : .stw-
   Sans JS / motion-off : chaque ligne se fait défiler à la main (copies masquées).
   Avec JS : .stw.is-auto → lignes animées, copies visibles pour la boucle.
   ========================================================================== */

.stw { --gap: 20px; padding: clamp(64px, 8vw, 112px) 0 clamp(80px, 10vw, 140px); overflow: hidden; }
.stw__rows {
  display: grid; gap: var(--gap);
  /* fondu sur les bords : les cartes entrent et sortent en douceur */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}

/* lignes : défilement manuel par défaut */
.stw-row { overflow-x: auto; scrollbar-width: none; padding: 6px 0 10px; }   /* marge : ombre et soulèvement au survol */
.stw-row::-webkit-scrollbar { display: none; }
.stw-row__track { display: flex; gap: var(--gap); width: max-content; padding-inline: var(--gutter); }
.stw-row__set { display: flex; gap: var(--gap); align-items: stretch; }
.stw-row__set[aria-hidden] { display: none; }
/* animé (stories.js) */
.stw.is-auto .stw-row { overflow: hidden; }
.stw.is-auto .stw-row__track { padding-inline: 0; will-change: transform; }
.stw.is-auto .stw-row__set[aria-hidden] { display: flex; }

/* cartes ----------------------------------------------------------------------- */
.stw-card {
  flex: none; display: flex; flex-direction: column;
  background: var(--c-white); border: 1px solid rgba(15,17,21,.08);
  transition: transform .35s var(--ease), box-shadow .35s ease;
}
.stw-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -24px rgba(15,17,21,.35); }

.stw-card__who { display: grid; gap: 2px; margin-top: auto; }
.stw-card__who strong { font-size: 15px; font-weight: 700; letter-spacing: -.01em; }
.stw-card__who span { font-size: 13px; line-height: 1.4; color: var(--c-grey); }

/* écrit : guillemet à gauche, avatar en haut à droite */
.stw-card--text { width: 360px; gap: 18px; padding: 26px 28px 28px; }
.stw-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.stw-card__mark { font-family: var(--ff-serif); font-size: 72px; line-height: .7; color: var(--c-yellow); height: 34px; }
.stw-card__avatar {
  flex: none; width: 56px; height: 56px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: var(--c-blue); color: var(--c-white); font-size: 17px; font-weight: 700; letter-spacing: .02em;
}
.stw-card__avatar img { width: 100%; height: 100%; object-fit: cover; }
.stw-card__quote { margin: 0; }
.stw-card__quote p { font-size: 17px; line-height: 1.6; font-weight: 500; letter-spacing: -.01em; color: var(--c-ink); text-wrap: pretty; }
/* largeur selon la longueur de la citation (stories_wall.php : s ≤ 110 car., m ≤ 260, l ≤ 480, xl) */
.stw-card--s  { width: 320px; }
.stw-card--m  { width: 380px; }
.stw-card--l  { width: 500px; }
.stw-card--xl { width: 620px; }
.stw-card--l .stw-card__quote p, .stw-card--xl .stw-card__quote p { font-size: 15.5px; line-height: 1.6; }
/* courte : citation en grand, en serif italique */
.stw-card--s .stw-card__quote p { font-family: var(--ff-serif); font-style: italic; font-weight: 400; font-size: 25px; line-height: 1.25; letter-spacing: -.01em; }
/* anonyme : guillemet puis citation, rien d'autre ; calée en haut de la carte */
.stw-card--anon { justify-content: flex-start; gap: 10px; }
.stw-card--anon .stw-card__mark { height: 30px; }

/* variante bleue (une carte sur quatre) */
.stw-card--blue { background: var(--c-blue); border-color: transparent; }
.stw-card--blue .stw-card__quote p, .stw-card--blue .stw-card__who strong { color: var(--c-white); }
.stw-card--blue .stw-card__who span { color: rgba(255,255,255,.72); }
.stw-card--blue .stw-card__avatar { background: var(--c-blue-deep); box-shadow: 0 0 0 3px rgba(255,255,255,.25); }

/* vidéo : capture seule (pas de texte, pour inciter au clic) qui remplit toute la carte,
   à la hauteur de la ligne ; lecture dans la modale vidéo (common.js) */
.stw-card--video { width: 400px; min-height: 240px; background: none; border: 0; }   /* pas de liseré : la capture va jusqu'au bord */
.stw-card__media { position: relative; flex: 1; overflow: hidden; background: var(--c-blue-deep); }   /* fond visible le temps du chargement */
.stw-card__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 22%; transition: transform .6s var(--ease); }   /* portraits : recadrage vers le haut (visages) */
/* voile léger : le bouton de lecture ressort, et s'efface au survol */
.stw-card__media::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(15,17,21,.25), rgba(15,17,21,0) 35%, rgba(15,17,21,.15) 55%, rgba(15,17,21,.78)); transition: opacity .4s ease; }   /* bas plus sombre : lisibilité du nom */
.stw-card--video:hover .stw-card__media::after { opacity: .75; }
.stw-card--video:hover .stw-card__media img { transform: scale(1.05); }
.stw-card__media .vplay { z-index: 2; }   /* bouton au-dessus du voile */
/* nom + fonction en bas à gauche, sur le dégradé */
.stw-card__caption {
  position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 1; pointer-events: none;
  display: grid; gap: 2px; color: var(--c-white); text-shadow: 0 1px 8px rgba(0,0,0,.35);
}
.stw-card__caption strong { font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.stw-card__caption span { font-size: 13px; line-height: 1.35; color: rgba(255,255,255,.82); }
.stw-card__tag {
  position: absolute; left: 14px; top: 14px; z-index: 1; pointer-events: none;
  padding: 6px 10px; background: var(--c-yellow); color: var(--c-ink);
  font-family: var(--ff-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
}

@media (max-width: 700px) {
  .stw { --gap: 14px; }
  .stw-card--text { padding: 22px; }
  .stw-card--s, .stw-card--m { width: 280px; }
  .stw-card--l, .stw-card--xl { width: 340px; }
  .stw-card--s .stw-card__quote p { font-size: 21px; }
  .stw-card--video { width: 310px; }
  .stw-card__quote p { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .stw-card, .stw-card__media img { transition: none; }
}