/* ==========================================================
   VEHICLE DETAIL (V2) — fiche véhicule, favoris, offre
========================================================== */

.back{ background:none; border:0; color:var(--gold); font-weight:800; font-size:12px; padding:0; margin-bottom:14px; }
.link{ cursor:pointer; }
.link:hover strong{ color:var(--gold); }

.detail{ display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:20px; align-items:start; }

/* ---------- Galerie ---------- */

.gallery{ background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); }
.stage{ aspect-ratio:16/10; background:var(--paper); position:relative; overflow:hidden; }
.stage svg,.stage img{ width:100%; height:100%; object-fit:cover; display:block; }

.stage-cap{
  position:absolute; left:12px; bottom:12px;
  background:var(--pine); color:#fffdf8;
  font-size:10px; font-weight:700; padding:5px 9px;
  border-left:3px solid var(--gold);
}

.thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:10px; }
.thumb{ border:2px solid transparent; padding:0; background:var(--paper); aspect-ratio:16/10; overflow:hidden; }
.thumb.on{ border-color:var(--gold); }
.thumb svg,.thumb img{ width:100%; height:100%; object-fit:cover; display:block; }

/* ---------- Blocs d'information ---------- */

.d-block{ margin-top:18px; }
.d-block .panel-head{ padding:14px 20px; }

.specs{ display:grid; grid-template-columns:1fr 1fr; padding:6px 20px 14px; }
.spec{ display:flex; justify-content:space-between; gap:10px; padding:10px 0; border-bottom:1px solid var(--line); font-size:11px; }
.spec span{ color:var(--muted); }
.spec b{ text-align:right; }
.spec:nth-child(odd){ padding-right:16px; }
.spec:nth-child(even){ padding-left:16px; border-left:1px solid var(--line); }

.equip{ display:flex; flex-wrap:wrap; gap:6px; padding:16px 20px; }
.desc{ padding:16px 20px; font-size:12px; line-height:1.65; color:var(--muted); margin:0; }

/* ---------- Colonne prix / vendeur ---------- */

.buybox{ position:sticky; top:96px; display:grid; gap:14px; }
.buybox .box{ background:var(--panel); border:1px solid var(--line); box-shadow:var(--shadow); padding:20px; }
.buybox h2{ font-family:Fraunces,Georgia,serif; font-size:24px; margin:8px 0 4px; letter-spacing:-.02em; }

.big-price{ font-family:Fraunces,Georgia,serif; font-size:32px; margin:14px 0 2px; }
.big-price small{ font-family:Inter,sans-serif; font-size:11px; color:var(--muted); }
.ref{ font-size:10px; color:var(--muted); }

.cta{ display:grid; gap:8px; margin-top:16px; }
.cta button{ width:100%; padding:12px; }
.cta .row2{ display:grid; grid-template-columns:1fr auto; gap:8px; }

.seller-box .who{ display:flex; gap:12px; align-items:center; }

.seller-box .mini{
  width:44px; height:44px;
  background:var(--pine); color:var(--gold-light);
  display:grid; place-items:center;
  font-family:Fraunces,Georgia,serif; font-weight:700;
}

.seller-box .ok{ color:var(--pine); font-size:10px; font-weight:800; margin-top:3px; }

.kpis{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.kpi{ background:var(--paper); padding:10px; text-align:center; }
.kpi b{ display:block; font-family:Fraunces,Georgia,serif; font-size:16px; }
.kpi span{ font-size:9px; color:var(--muted); }

/* ---------- Favoris ---------- */

.fav-btn{ width:46px; font-size:18px; color:var(--gold); }
.fav-btn.on{ background:var(--gold); color:#fff; border-color:var(--gold); }

.fav{
  position:absolute; right:10px; top:10px;
  width:32px; height:32px;
  border:1px solid var(--line); background:var(--panel); color:var(--muted);
  border-radius:50%; z-index:2;
}

.fav.on{ background:var(--gold); color:#fff; border-color:var(--gold); }

/* ---------- Modale d'offre ---------- */

.form .two{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }

.hint{
  font-size:10px; color:var(--muted);
  text-transform:none; letter-spacing:0; font-weight:500;
  margin-top:5px; display:block;
}

/* V2.2 — galerie interactive */
.vehicle-stage{position:relative;overflow:hidden}
.vehicle-stage>img{width:100%;height:100%;object-fit:cover;display:block}
.gallery-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border:1px solid rgba(255,255,255,.65);border-radius:50%;background:rgba(13,34,29,.78);color:#fff;font-size:28px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
.gallery-arrow:hover{background:rgba(13,34,29,.95)}
.gallery-arrow.prev{left:14px}.gallery-arrow.next{right:14px}
.thumb{cursor:pointer}.thumb:focus-visible{outline:2px solid var(--gold);outline-offset:2px}