@charset "utf-8";
/* ─── Témoignage client (mobile, écrans 4 à 7) ───
   Carte sombre en bas de l'écran : photo du cas en bandeau (logo en blanc, chiffre en lime), puis citation + visage.
   Rien ici ne peut élargir la page : largeur 100 %, min-width 0, overflow hidden, contain inline-size, aucun nowrap.
   Couleurs : tokens de app.css (--c-bg, --c-panel, --c-line, --c-muted) — un seul gris sombre. Aucune animation (prefers-reduced-motion non concerné). Desktop (≥ 960 px) : masquée, le panneau de droite fait ce travail. */

.testimonial{display:flex;flex-direction:column;width:100%;max-width:100%;min-width:0;overflow:hidden;border-radius:var(--r3,14px);contain:inline-size;background:var(--c-bg,#1F1F1F);color:var(--c-text,#FFFFFF);margin-top:2px}
.testimonial[hidden]{display:none}

/* Bandeau photo 16:9 plafonné à 140 px */
.testimonial-visual{position:relative;width:100%;height:140px;min-width:0;overflow:hidden;background:var(--c-panel,#262626);border-radius:var(--r3,14px) var(--r3,14px) 0 0}
.testimonial-photo{position:absolute;inset:0;width:100%;height:100%;max-width:100%;object-fit:cover;object-position:center 30%;display:block}
.testimonial-visual::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.35) 0%,rgba(10,10,10,0) 40%,rgba(10,10,10,.55) 70%,rgba(10,10,10,.88) 100%);pointer-events:none}
/* Logo client en blanc, en haut à gauche (les SVG ont beaucoup de marge : 56 px de haut, décalé pour compenser) */
.testimonial-logo{position:absolute;z-index:1;top:6px;left:6px;height:56px;width:auto;max-width:170px;object-fit:contain;filter:brightness(0) invert(1);opacity:.96;display:block}
.testimonial-client{position:absolute;z-index:1;top:16px;left:16px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#FFFFFF}
/* Chiffre en lime, en bas à gauche */
.testimonial-metric{position:absolute;z-index:1;left:16px;right:16px;bottom:12px;margin:0;display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 8px;line-height:1;min-width:0}
.testimonial-metric b{font-size:32px;font-weight:500;letter-spacing:-.04em;color:var(--lime,#DDFF56);font-variant-numeric:tabular-nums}
.testimonial-metric span{font-size:13px;color:#FFFFFF}

/* Citation + visage */
.testimonial-body{margin:0;padding:18px;display:flex;flex-direction:column;gap:14px;min-width:0}
.testimonial-body blockquote{margin:0;font-size:15px;line-height:1.45;font-weight:300;color:#FFFFFF;overflow-wrap:anywhere}
.testimonial-body figcaption{display:flex;align-items:center;gap:12px;min-width:0}
.testimonial-face{width:40px;height:40px;max-width:100%;border-radius:50%;object-fit:cover;flex:none;border:2px solid var(--c-line,#363636);display:block}
.testimonial-body figcaption span{display:flex;flex-direction:column;gap:2px;min-width:0}
.testimonial-body figcaption b{font-size:14px;font-weight:500;line-height:1.2;color:#FFFFFF;overflow-wrap:anywhere}
.testimonial-body figcaption small{font-family:var(--mono);font-size:11px;letter-spacing:.04em;text-transform:uppercase;line-height:1.3;color:var(--c-muted,#A3A3A3);overflow-wrap:anywhere}

/* Variante compacte : pas de photo, ~150 px */
.testimonial.compact .testimonial-body{padding:18px}

@media(max-width:480px){.testimonial{margin-top:4px}}
@media(min-width:960px){.testimonial{display:none}}