/* ═══════════════════════════════════════════════════════════
   VÉLOCI · Composants partagés
   Échelle stricte inspirée des maisons de référence :
   3 rayons seulement, 1 accent, 1 élévation.
   ═══════════════════════════════════════════════════════════ */
:root{
  --r-s:10px;      /* pastilles, champs        */
  --r-m:16px;      /* cartes, encadrés         */
  --r-l:20px;      /* grands panneaux          */
  --r-pill:100px;  /* boutons et badges pill   */
  --gap-s:12px; --gap-m:20px; --gap-l:32px;
  --lift:translateY(-3px);
  --t-fast:.22s; --t-med:.3s;
}

/* ── Grille de cartes générique ─────────────────────────── */
.vc-grid{display:grid;gap:var(--gap-m);margin-top:26px}
.vc-grid-3{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.vc-grid-4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}

/* ── Carte article (produit → blog, piliers → blog) ─────── */
.vc-artcard{display:block;text-decoration:none;color:inherit;background:var(--card-bg);
  border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;
  transition:border-color var(--t-fast),transform var(--t-fast)}
.vc-artcard:hover{border-color:var(--border-hover);transform:var(--lift)}
.vc-artcard img{width:100%;height:130px;object-fit:cover;display:block}
.vc-artcard .vc-ac-body{padding:16px 18px 18px}
.vc-artcard h3{font-size:16px;line-height:1.4;margin:0 0 7px;font-weight:600}
.vc-artcard p{font-size:13.5px;color:var(--muted);line-height:1.6;margin:0}

/* ── Bandeau de liens contextuels (articles, produits) ──── */
.vc-inline-links{margin:34px 0 6px;padding:20px 24px;border:1px solid var(--border);
  border-radius:var(--r-m);background:var(--card-bg)}
.vc-inline-links strong{display:block;font-size:14px;margin-bottom:10px}
.vc-inline-links a{display:inline-block;margin:0 14px 6px 0;color:var(--blue-light);
  text-decoration:none;font-size:14.5px;font-weight:500;border-bottom:1px solid transparent;
  transition:border-color var(--t-fast)}
.vc-inline-links a:hover{border-bottom-color:currentColor}

/* ── Lien « voir plus » ─────────────────────────────────── */
.vc-more{display:inline-block;margin-top:20px;color:var(--blue-light);
  text-decoration:none;font-weight:500;font-size:15px}
.vc-more:hover{text-decoration:underline}

/* ── Mur de logos partenaires ───────────────────────────── */
.vc-logowall{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:2px;
  border:1px solid var(--border);border-radius:var(--r-m);overflow:hidden;margin-top:26px}
.vc-logowall div{background:#f0ede4;display:flex;align-items:center;justify-content:center;
  padding:24px 18px;min-height:88px}
.vc-logowall img{max-height:32px;max-width:126px;width:auto;height:auto;
  filter:grayscale(1) opacity(.72);transition:filter var(--t-med),opacity var(--t-med)}
.vc-logowall div:hover img{filter:none;opacity:1}
.vc-logowall-note{margin-top:14px;font-size:13.5px;color:var(--muted)}
@media(max-width:560px){.vc-logowall{grid-template-columns:1fr 1fr}}

/* ── Cartes « levier » des pages piliers ────────────────── */
.vc-levers{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));
  gap:var(--gap-m);margin-top:28px}
.vc-lever{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--r-l);
  padding:26px 26px 24px;transition:border-color var(--t-fast)}
.vc-lever:hover{border-color:var(--border-hover)}
.vc-lever h3{font-size:18px;margin:0 0 10px;font-weight:600}
.vc-lever p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0 0 14px}
.vc-lever a{color:var(--blue-light);text-decoration:none;font-size:14.5px;font-weight:500}
.vc-lever a:hover{text-decoration:underline}

/* ── Étapes numérotées ──────────────────────────────────── */
.vc-steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:26px;margin-top:30px}
.vc-step{border-top:2px solid rgba(255,229,165,.5);padding-top:18px}
.vc-step em{font-style:normal;font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.vc-step h3{font-size:17px;margin:8px 0 8px;font-weight:600}
.vc-step p{font-size:14.5px;color:var(--muted);line-height:1.7;margin:0}

/* ── FAQ dépliante ──────────────────────────────────────── */
.vc-faq{margin-top:28px;border-top:1px solid var(--border)}
.vc-faq details{border-bottom:1px solid var(--border);padding:18px 0}
.vc-faq summary{cursor:pointer;font-weight:600;font-size:16px;list-style:none;
  display:flex;justify-content:space-between;gap:16px}
.vc-faq summary::-webkit-details-marker{display:none}
.vc-faq summary::after{content:'+';color:var(--blue-light);font-size:20px;line-height:1}
.vc-faq details[open] summary::after{content:'\2212'}
.vc-faq p{font-size:14.5px;color:var(--muted);line-height:1.75;margin:12px 0 0;max-width:70ch}

@media (prefers-reduced-motion: reduce){
  .vc-artcard,.vc-lever,.vc-logowall img{transition:none}
  .vc-artcard:hover{transform:none}
}