/* ═══════════════════════════════════════════
   VX-RELATED — bloc "articles pertinents" réutilisable
   Piloté par la taxo interne vx_contexte. DA Voltaïx (navy/orange/crème).
   ═══════════════════════════════════════════ */
.vx-related { padding: var(--space-section, 64px) 0; background: var(--c-bg, #FAF9F6); }
/* Reveal autonome : le bloc est injecté HORS du conteneur ciblé par le reveal JS
   des piliers (.cp-pilier .rv, .px-pilier .rv, .os-pilier .rv, …). Ses .rv ne
   reçoivent donc jamais .in et restaient à opacity:0 (bloc invisible). On garantit
   sa visibilité indépendamment du script hôte — spécificité (0,2,0) > .rv (0,1,0). */
section.vx-related .rv { opacity: 1; transform: none; }
.vx-related-inner { max-width: var(--w-content, 1100px); margin: 0 auto; padding: 0 var(--pad-tablet, 40px); }
.vx-related-kicker { display: block; font-size: 13px; font-weight: 700; color: var(--c-accent, #F5A624); letter-spacing: .12em; text-transform: uppercase; margin: 0 0 12px; }
.vx-related-title { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; line-height: 1.25; letter-spacing: -.02em; color: var(--c-navy, #1E2D3F); margin: 0 0 28px; }

.vx-related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.vx-ra-card { display: flex; flex-direction: column; background: var(--c-bg-card, #fff); border: 1px solid var(--c-border, rgba(30,45,63,.08)); border-radius: var(--radius-lg, 16px); overflow: hidden; text-decoration: none !important; box-shadow: 0 2px 12px rgba(30,45,63,.05); transition: transform .2s, box-shadow .2s, border-color .2s; }
.vx-ra-card:hover { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(30,45,63,.12); border-color: rgba(245,166,36,.4); }
.vx-ra-card:focus-visible { outline: 2px solid var(--c-accent, #F5A624); outline-offset: 3px; }

.vx-ra-thumb { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: #1E2D3F; overflow: hidden; }
.vx-ra-thumb[data-noimg] { color: rgba(255,255,255,.4); background: linear-gradient(135deg, #26374d, #1E2D3F); }
.vx-ra-card:hover .vx-ra-thumb { }

.vx-ra-body { display: flex; flex-direction: column; gap: 8px; padding: 18px 20px 20px; flex: 1 1 auto; }
.vx-ra-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--c-text-muted, #6B7888); }
.vx-ra-cat { color: var(--c-accent-hover, #FF7A00); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.vx-ra-dot { opacity: .5; }
.vx-ra-h3 { font-size: 16.5px; font-weight: 700; line-height: 1.35; color: var(--c-navy, #1E2D3F); letter-spacing: -.01em; }
.vx-ra-excerpt { font-size: 14px; line-height: 1.55; color: var(--c-text-secondary, #475569); flex: 1 1 auto; }
.vx-ra-more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: 13.5px; font-weight: 700; color: var(--c-accent-hover, #FF7A00); }
.vx-ra-more svg { transition: transform .2s; }
.vx-ra-card:hover .vx-ra-more svg { transform: translateX(3px); }

@media (max-width: 900px) { .vx-related-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .vx-related-inner { padding: 0 var(--pad-mobile, 24px); } }
@media (max-width: 600px) { .vx-related-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .vx-ra-card:hover { transform: none; } }