/* =============================================================================
   Fiche véhicule (detail.php) — direction B « Garage », préfixe .vd-
   Chargée par templates/header.php après style.css (detail.php pose
   $pageCss = 'detail'). Réutilise les jetons, .past, .btn, .sur, .h2, .tete,
   .lien, .cta, .vide et la carte .car-card du socle. Les crochets de
   assets/js/main.js sont conservés : [data-detail-gallery], .detail-main-img,
   .detail-thumbs img.is-active.
   ============================================================================= */

.vd { padding: 28px 0 96px; background: var(--noir); }

/* ---- Fil d'Ariane --------------------------------------------------------- */
.vd-ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gris-2); }
.vd-ariane li { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.vd-ariane svg { width: 14px; height: 14px; color: var(--gris-2); }
.vd-ariane a { color: var(--gris); transition: color .2s; }
.vd-ariane a:hover { color: var(--blanc); }
.vd-ariane [aria-current] span { color: var(--blanc); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 48ch; }

/* ---- Grille : galerie + blocs à gauche, panneau collant à droite ---------- */
.vd-grille { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); grid-template-areas: "galerie panneau" "blocs panneau"; gap: 28px 40px; align-items: start; margin-top: 24px; }
.vd-galerie { grid-area: galerie; min-width: 0; }
.vd-blocs { grid-area: blocs; min-width: 0; }
.vd-panneau { grid-area: panneau; align-self: stretch; min-width: 0; }
.vd-panneau__in { position: sticky; top: 92px; }

/* ---- Galerie : grande image 16:10, pastille, bouton Agrandir, compteur ---- */
.vd-galerie__grande { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--rayon); background: var(--anth); }
.vd-galerie__grande img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.vd-galerie__past { position: absolute; left: 14px; top: 14px; z-index: 2; }
.vd-galerie__zoom { position: absolute; right: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--filet-2); border-radius: var(--rayon-s); background: rgba(20, 21, 24, .86); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .9rem; letter-spacing: .08em; text-transform: uppercase; line-height: 1; transition: background .2s, border-color .2s; }
.vd-galerie__zoom svg { width: 16px; height: 16px; }
.vd-galerie__zoom:hover { background: var(--noir); border-color: var(--blanc); }
.vd-galerie__compte { position: absolute; left: 14px; bottom: 14px; z-index: 2; display: inline-flex; align-items: center; gap: 4px; height: 28px; padding: 0 10px; border-radius: var(--rayon-s); background: rgba(20, 21, 24, .86); color: var(--blanc); font-family: var(--police-titre); font-weight: 700; font-size: .9rem; letter-spacing: .08em; line-height: 1; }
.vd-galerie__vide { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: var(--gris-2); }
.vd-galerie__vide svg { width: 56px; height: 56px; }
.vd-galerie__vide p { font-size: .8rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.vd-vignettes { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; margin-top: 10px; }
.vd-vignettes img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--rayon-s); border: 2px solid transparent; opacity: .55; cursor: pointer; transition: opacity .2s, border-color .2s; }
.vd-vignettes img.is-active, .vd-vignettes img:hover, .vd-vignettes img:focus-visible { opacity: 1; border-color: var(--primary); }

/* ---- Panneau : anthracite, bande primaire en tête, texte en capitales ------ */
.vd-panneau__in { padding: 26px 28px 28px; background: var(--anth); border-top: 6px solid var(--primary); border-radius: 0 0 var(--rayon) var(--rayon); }
.vd-marque { display: block; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--gris-2); }
.vd-h1 { margin-top: 6px; font-family: var(--police-titre); font-weight: 700; font-size: clamp(1.7rem, 2.4vw, 2.2rem); line-height: 1.02; letter-spacing: .01em; text-transform: uppercase; color: var(--blanc); text-wrap: balance; }
.vd-prix { margin-top: 16px; font-family: var(--police-titre); font-weight: 700; font-size: clamp(2.6rem, 4vw, 3.4rem); line-height: 1; letter-spacing: .01em; color: var(--blanc); }
.vd-panneau__past { margin-top: 14px; }

/* Quatre tuiles : icône trait, étiquette, valeur condensée */
.vd-tuiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--filet); }
.vd-tuiles li { display: grid; grid-template-columns: 20px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px 14px; background: var(--noir); border: 1px solid var(--filet); border-radius: var(--rayon-s); min-width: 0; }
.vd-tuiles svg { grid-row: 1 / 3; width: 20px; height: 20px; color: var(--gris-2); }
.vd-tuiles__label { font-size: .66rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gris-2); line-height: 1.2; }
.vd-tuiles b { margin-top: 2px; font-family: var(--police-titre); font-weight: 700; font-size: 1.15rem; line-height: 1.1; color: var(--blanc); overflow-wrap: anywhere; }

.vd-actions { display: grid; gap: 10px; margin-top: 22px; }
.vd-actions .btn { width: 100%; }
.vd-actions .btn svg { width: 18px; height: 18px; }
.vd-points { display: grid; gap: 8px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--filet); }
.vd-points li { display: flex; align-items: center; gap: 10px; font-size: .98rem; color: var(--gris); }
.vd-points svg { width: 16px; height: 16px; color: var(--primary-texte, var(--primary)); stroke-width: 3; }

/* ---- Blocs : titre condensé souligné d'une bande, tableau, pastilles, texte - */
.vd-bloc + .vd-bloc { margin-top: 36px; }
.vd-bloc__titre { display: table; font-family: var(--police-titre); font-weight: 700; font-size: 1.5rem; line-height: 1; letter-spacing: .03em; text-transform: uppercase; color: var(--blanc); padding-bottom: 10px; margin-bottom: 18px; border-bottom: 3px solid var(--primary); }
.vd-table { width: 100%; border-collapse: collapse; font-size: .95rem; }
.vd-table tr { border-bottom: 1px solid var(--filet); }
.vd-table tr:first-child { border-top: 1px solid var(--filet); }
.vd-table th, .vd-table td { padding: 11px 12px; text-align: left; vertical-align: top; }
.vd-table th { width: 42%; font-weight: 500; color: var(--gris); }
.vd-table td { font-weight: 600; color: var(--blanc); }
.vd-table tr:nth-child(odd) { background: rgba(244, 243, 239, .025); }
.vd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.vd-chips li { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border: 1px solid var(--filet-2); border-radius: var(--rayon-s); background: var(--anth); font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--blanc); white-space: nowrap; }
.vd-chips svg { width: 14px; height: 14px; color: var(--primary-texte, var(--primary)); stroke-width: 3; }
.vd-desc { font-size: 1.08rem; line-height: 1.75; color: var(--gris); max-width: 72ch; }

/* ---- Véhicules similaires : trois cartes du socle ------------------------- */
.vd-similaires { margin-top: 80px; padding-top: 56px; border-top: 1px solid var(--filet); }
.vd-similaires .tete { margin-bottom: 32px; }
.vd-similaires__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }

/* ---- Appel final : le bandeau du socle, sans marge haute supplémentaire ---- */
.vd-cta { padding-top: 0; }

/* ---- 404 ------------------------------------------------------------------- */
.vd-404 { margin-top: 24px; }

/* ---- Adaptatif ------------------------------------------------------------ */
@media (max-width: 1100px) {
	.vd-grille { grid-template-columns: minmax(0, 1fr) minmax(300px, .9fr); gap: 24px 28px; }
	.vd-panneau__in { padding: 22px 22px 24px; }
	.vd-vignettes { grid-template-columns: repeat(5, 1fr); }
}
@media (max-width: 1000px) {
	.vd-grille { grid-template-columns: 1fr; grid-template-areas: "galerie" "panneau" "blocs"; gap: 24px; }
	.vd-panneau { align-self: start; }
	.vd-panneau__in { position: static; }
	.vd-similaires { margin-top: 64px; padding-top: 44px; }
	.vd-similaires__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
}
@media (max-width: 640px) {
	.vd { padding: 20px 0 64px; }
	.vd-ariane [aria-current] span { max-width: 22ch; }
	.vd-grille { margin-top: 18px; gap: 20px; }
	.vd-vignettes { grid-template-columns: repeat(4, 1fr); gap: 8px; }
	.vd-galerie__zoom span { display: none; }
	.vd-galerie__zoom { padding: 0 11px; }
	.vd-panneau__in { padding: 20px 18px 22px; }
	.vd-h1 { font-size: 1.6rem; }
	.vd-prix { font-size: 2.5rem; }
	.vd-tuiles { grid-template-columns: 1fr 1fr; gap: 6px; }
	.vd-tuiles li { padding: 10px 12px; }
	.vd-bloc + .vd-bloc { margin-top: 28px; }
	.vd-bloc__titre { font-size: 1.3rem; }
	.vd-table th { width: 46%; }
	.vd-table th, .vd-table td { padding: 10px 8px; font-size: .9rem; }
	.vd-chips li { height: auto; min-height: 34px; padding: 6px 12px 6px 10px; white-space: normal; }
	.vd-similaires { margin-top: 52px; padding-top: 36px; }
	.vd-similaires__grille { grid-template-columns: 1fr; gap: 18px; }
}