/* vehicules.css — annuaire des véhicules (includes/vehicules.php) : logos de marques, vignettes TecDoc des modèles, motorisations.
   Charte du site public (docs/front-guidelines.md) : surfaces blanches, bordures légères, arrondis 10–16 px. */
.vh-fond{ background:#f6f7f9; }
.vh{ padding-top:18px; padding-bottom:48px; }
.vh-ariane{ font-size:13px; color:#64748b; margin-bottom:14px; }
.vh-ariane a{ color:#64748b; text-decoration:none; } .vh-ariane a:hover{ color:var(--color-ink); text-decoration:underline; }

/* en-tête */
.vh-hero{ display:flex; align-items:center; gap:22px; flex-wrap:wrap; padding:22px 26px; margin-bottom:22px; border-radius:16px; background:#fff;
  border:1px solid rgba(15,23,42,.06); box-shadow:0 1px 2px rgba(15,23,42,.04); }
.vh-hero-txt{ flex:1; min-width:240px; }
.vh-h1{ margin:0 0 6px; font-family:var(--font-bold); font-weight:normal; font-size:clamp(1.5rem, 2.6vw, 2.1rem); line-height:1.15; color:var(--color-ink); }
.vh-sous{ margin:0; font-size:13.5px; color:#64748b; }
.vh-hero-logo{ width:96px; height:96px; object-fit:contain; flex-shrink:0; }
.vh-choisir.ui.button{ border-radius:10px; margin:0; }
.vh-hero-modele{ align-items:stretch; }
.vh-h2-hero{ margin:14px 0 0; font-weight:600; color:var(--color-ink); }
.vh-types{ display:inline-flex; margin-top:10px; padding:4px; gap:4px; border-radius:12px; background:#f3f3f5; }
.vh-types a{ display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border-radius:9px; font-weight:600; font-size:14px; color:#475569; text-decoration:none; }
.vh-types a.on{ background:#fff; color:var(--color-ink); box-shadow:0 1px 3px rgba(15,23,42,.12); }

.vh-h2{ margin:28px 0 12px; font-family:var(--font-bold); font-weight:normal; font-size:1.35rem; color:var(--color-ink); }
.vh-serie h3, .vh-h3, .vh-lettre h3{ margin:26px 0 10px; font-size:1.05rem; font-weight:700; color:var(--color-ink); }

/* index A–Z ou séries */
.vh-az{ display:flex; flex-wrap:wrap; gap:6px; margin-bottom:6px; }
.vh-az a{ min-width:34px; padding:6px 10px; border-radius:8px; background:#fff; border:1px solid rgba(15,23,42,.08); text-align:center; font-weight:600; font-size:13px;
  color:var(--color-ink); text-decoration:none; }
.vh-az a:hover{ border-color:var(--color-primary); color:var(--color-primary); }
.vh-lettre, .vh-serie{ scroll-margin-top:90px; }

/* logos de marques */
.vh-logos{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:8px; }
.vh-logos a{ display:flex; align-items:center; gap:12px; padding:10px 12px; border-radius:12px; background:#fff; border:1px solid rgba(15,23,42,.06);
  color:var(--color-ink); text-decoration:none; font-size:14px; transition:border-color .15s, box-shadow .15s, transform .15s; }
.vh-logos a:hover{ border-color:rgba(15,23,42,.18); box-shadow:0 4px 14px rgba(15,23,42,.08); transform:translateY(-1px); }
.vh-logos img{ width:40px; height:40px; object-fit:contain; flex-shrink:0; }
.vh-logos-grands{ grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:12px; }
.vh-logos-grands a{ flex-direction:column; justify-content:center; gap:8px; padding:18px 10px; text-align:center; }
.vh-logos-grands img{ width:72px; height:72px; }

/* cartes de modèles */
.vh-grille{ display:grid; grid-template-columns:repeat(auto-fill, minmax(190px, 1fr)); gap:12px; }
.vh-grille-grande{ grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:14px; }
.vh-carte{ display:flex; flex-direction:column; gap:4px; padding:12px 14px 14px; border-radius:14px; background:#fff; border:1px solid rgba(15,23,42,.06);
  color:var(--color-ink); text-decoration:none; transition:border-color .15s, box-shadow .15s, transform .15s; }
.vh-carte:hover{ border-color:rgba(15,23,42,.18); box-shadow:0 6px 18px rgba(15,23,42,.09); transform:translateY(-2px); }
.vh-carte b{ font-size:14px; line-height:1.3; }
.vh-carte .vh-sous{ font-size:12.5px; }
.vh-img{ display:flex; align-items:center; justify-content:center; aspect-ratio:16 / 10; margin-bottom:6px; border-radius:10px; background:linear-gradient(180deg, #fff, #f3f4f6); overflow:hidden; }
.vh-img img{ width:100%; height:100%; object-fit:contain; mix-blend-mode:multiply; }
.vh-img img.vh-repli{ width:45%; height:45%; opacity:.55; }
.vh-carte-grande b{ font-size:15px; }
.vh-img-grande{ flex:0 0 min(360px, 100%); margin:0; }

/* motorisations */
.vh-motos{ display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr)); gap:8px; }
.vh-moto{ display:flex; align-items:center; gap:14px; padding:12px 14px; border-radius:12px; background:#fff; border:1px solid rgba(15,23,42,.06);
  color:var(--color-ink); text-decoration:none; transition:border-color .15s, box-shadow .15s; }
.vh-moto:hover{ border-color:var(--color-primary); box-shadow:0 4px 14px rgba(15,23,42,.08); }
.vh-kw{ flex:0 0 64px; display:flex; flex-direction:column; align-items:center; justify-content:center; height:52px; border-radius:10px; background:#f3f3f5;
  font-family:var(--font-bold); font-size:18px; line-height:1; font-variant-numeric:tabular-nums; }
.vh-kw small{ font-family:inherit; font-size:11px; font-weight:600; color:#64748b; margin-top:3px; }
.vh-moto-txt{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
.vh-moto-txt b{ font-size:14px; }
.vh-moto .icon{ color:#94a3b8; }
.vh-moto:hover .icon, .vh-moto:hover .vh-moto-txt b{ color:var(--color-primary); }

@media (max-width:640px){
  .vh-hero{ padding:16px; gap:14px; }
  .vh-hero .vh-choisir{ width:100%; justify-content:center; }
  .vh-grille{ grid-template-columns:repeat(2, 1fr); gap:8px; }
  .vh-grille-grande{ grid-template-columns:repeat(2, 1fr); }
  .vh-logos{ grid-template-columns:repeat(2, 1fr); }
  .vh-logos-grands{ grid-template-columns:repeat(3, 1fr); }
  .vh-carte{ padding:10px; }
}

/* recherche magique (assets/pages/vehicules.js) */
.vh-magie{ position:relative; flex:1 1 100%; display:flex; align-items:center; gap:10px; padding:0 14px; height:50px; border-radius:12px; background:#f3f3f5; }
.vh-magie > .icon{ color:#94a3b8; }
.vh-magie input{ flex:1; min-width:0; height:100%; border:0; outline:0; background:transparent; font-size:16px; color:var(--color-ink); }
.vh-magie:focus-within{ background:#fff; box-shadow:0 0 0 2px var(--color-ink) inset; }
.vh-magie-res{ position:absolute; z-index:30; top:calc(100% + 6px); left:0; right:0; max-height:420px; overflow:auto; padding:6px; border-radius:14px; background:#fff;
  box-shadow:0 14px 40px rgba(15,23,42,.18); border:1px solid rgba(15,23,42,.08); }
.vh-magie-titre{ padding:8px 10px 4px; font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#94a3b8; }
.vh-magie-l{ display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:10px; color:var(--color-ink); text-decoration:none; }
.vh-magie-l:hover, .vh-magie-l.on{ background:#f3f3f5; }
.vh-magie-img{ flex:0 0 72px; height:46px; display:flex; align-items:center; justify-content:center; }
.vh-magie-img img{ max-width:100%; max-height:100%; object-fit:contain; mix-blend-mode:multiply; }
.vh-magie-t{ display:flex; flex-direction:column; min-width:0; }
.vh-magie-t b{ font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.vh-magie-t small{ font-size:12.5px; color:#64748b; }