/* [V149] ugc-block.css v3 — Bloc UGC zigzag « citation + vidéo » (méta de rôle supprimée, retour client 27/09/2026).
   Composant issu du prototype UX validé (prototype.html, 22/09/2026) : vidéo
   verticale 9:16 en façade (0 octet de vidéo au chargement, cf. ugc.js v2)
   accolée au texte indexable du témoignage (citation, méta, chiffres, lien).
   Zigzag : .ugc-block = texte à gauche / vidéo à droite ;
   .ugc-block--flip = vidéo à gauche / texte à droite (alternance éditoriale).
   Tokens du design system du site uniquement — aucune couleur hors :root.
   [V148 — 27/09/2026] + sous-titres vidéo (.ugc-captions, ugc-captions.js) :
   overlay lisible au-dessus des contrôles natifs, taille pilotée par la largeur
   du cadre vidéo (container queries, clamp 1,125→1,6 rem ≈ ×1,5 vs sous-titres
   incrustés d'origine) — repli 1,25 rem si container queries non supportées. */

/* ── Section porteuse ── */
.ugc-sec{padding:72px 0}
.ugc-sec--surface{background:var(--bg-surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}

/* ── Grille zigzag (desktop) ── */
.ugc-block{display:grid;grid-template-columns:1fr 400px;gap:56px;align-items:center}
.ugc-block--flip{grid-template-columns:400px 1fr}
.ugc-block:not(.ugc-block--flip) .ugc-block__media-wrap{grid-column:2;grid-row:1}
.ugc-block:not(.ugc-block--flip) .ugc-block__text{grid-column:1;grid-row:1}
.ugc-block--flip .ugc-block__media-wrap{grid-column:1;grid-row:1}
.ugc-block--flip .ugc-block__text{grid-column:2;grid-row:1}
.ugc-block__media-wrap{position:relative;width:fit-content;max-width:100%;margin-inline:auto}
.ugc-block__text{min-width:0}

/* ── Façade vidéo 9:16 (ratio réservé : CLS 0 ; hauteur plafonnée 70 vh) ── */
.ugc-media{position:relative;display:block;height:min(711px,70vh);aspect-ratio:9/16;width:auto;padding:0;border:1px solid var(--border);background:var(--bg-elevated);overflow:hidden;cursor:pointer}
.ugc-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.16,1,.3,1)}
/* [V185] Zoom poster unifié : scale(1.02)/.6s — règle de gestion hover image (référence .grele__split_side) ; reduced-motion l.43 inchangé */
.ugc-media:hover img,.ugc-media:focus-visible img{transform:scale(1.02)}
.ugc-media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.ugc-media:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── [V148] Sous-titres (ugc-captions.js) : overlay, 0 octet avant le clic ── */
.ugc-media{container-type:inline-size}
.ugc-captions{position:absolute;left:50%;transform:translateX(-50%);bottom:64px;width:max-content;max-width:86%;padding:.5em .75em;background:rgba(26,29,35,.85);color:#fff;border-radius:8px;font-family:var(--font-sans);font-size:1.25rem;font-weight:600;line-height:1.35;text-align:center;letter-spacing:.01em;pointer-events:none;z-index:2;opacity:0;visibility:hidden;transition:opacity .15s ease-out}
.ugc-captions.is-on{opacity:1;visibility:visible}
@supports (font-size:1cqw){.ugc-captions{font-size:clamp(1.125rem,6.6cqw,1.6rem)}}
.ugc-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:46px;height:46px;border-radius:50%;background:var(--bg-dark);color:var(--text-on-accent);display:grid;place-items:center;box-shadow:var(--shadow-md);transition:transform .25s var(--ease-out-soft, ease-out),background .25s var(--ease-out-soft, ease-out)}
.ugc-media:hover .ugc-play,.ugc-media:focus-visible .ugc-play{transform:translate(-50%,-50%) scale(1.12);background:var(--accent)}
.ugc-play svg{width:16px;height:16px;margin-left:2px}
.ugc-dur{position:absolute;bottom:8px;right:8px;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.06em;background:rgba(26,29,35,.82);color:#fff;padding:2px 7px}
@media (prefers-reduced-motion:reduce){.ugc-media img{transition:none}.ugc-play{transition:none}}

/* ── Colonne texte : chip, citation, méta, chiffres, lien ── */
.ugc-block__chip{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.6875rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--text-secondary);background:var(--bg-elevated);border:1px solid var(--border);padding:7px 14px}
.ugc-block__chip:before{content:"";width:6px;height:6px;border-radius:50%;background:var(--accent)}
.ugc-block__quote{font-family:var(--font-serif);font-style:italic;font-weight:400;font-size:clamp(1.25rem,1.8vw,1.5rem);line-height:1.5;color:var(--text-primary);margin:24px 0;padding:0 0 0 24px;border-left:2px solid var(--accent)}
.ugc-block__stats{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--border);background:var(--bg-primary);list-style:none;margin:0 0 24px;padding:0}
.ugc-block__stats li{padding:18px 22px}
.ugc-block__stats li+li{border-left:1px solid var(--border)}
.ugc-block__stats strong{display:block;font-family:var(--font-mono);font-size:1.375rem;font-weight:600;color:var(--accent-dark);letter-spacing:-.02em}
.ugc-block__stats span{display:block;font-size:.8125rem;color:var(--text-secondary);margin-top:4px;line-height:1.4}
.ugc-block__link{font-family:var(--font-mono);font-size:.75rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--accent-dark);text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.ugc-block__link svg{width:12px;height:12px}
.ugc-block__link:hover,.ugc-block__link:focus-visible{color:var(--accent)}

/* ── Ajustement colonnes étroites (761-960 px) ── */
@media (max-width:960px){
.ugc-block{grid-template-columns:1fr 340px}
.ugc-block--flip{grid-template-columns:340px 1fr}
.ugc-block,.ugc-block--flip{gap:36px}
}

/* ── Mobile : empilement vidéo d'abord, hauteur 608 px max ── */
@media (max-width:760px){
.ugc-sec{padding:56px 0}
.ugc-captions{bottom:56px}
.ugc-block,.ugc-block--flip{grid-template-columns:1fr !important;gap:28px}
.ugc-block .ugc-block__media-wrap,.ugc-block .ugc-block__text{grid-column:auto !important;grid-row:auto !important}
.ugc-block__media-wrap{margin-inline:0}
.ugc-media{height:min(608px,70vh)}
.ugc-block__quote{font-size:1.125rem;padding-left:18px;margin:20px 0}

.ugc-block__stats li{padding:14px 16px}
.ugc-block__stats strong{font-size:1.125rem}
}