/* ==========================================================
   PAGE « NOS VÉHICULES » — grille de tuiles + modale détail
   Variante retenue : « Galerie », 3 colonnes.
   Fond foncé #0D1717 + police moderne (Outfit) — validés.
   ========================================================== */

.hero-int.compact{ min-height:clamp(380px,52vh,480px); }

/* Bandeau d'intro sous le hero */
.v-intro{ display:flex; align-items:flex-end; justify-content:space-between; gap:28px; flex-wrap:wrap; margin-bottom:42px; }
.v-intro .lead{ max-width:56ch; }
.v-count{ font-family:var(--mono); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase; color:var(--encre-3); white-space:nowrap; padding-bottom:6px; }
.v-count b{ color:var(--or-encre); font-weight:500; }

/* ---------- GRILLE ---------- */
.v-grid{ display:grid; grid-template-columns:repeat(var(--cols,3),1fr); gap:26px; }

/* ---------- TUILE ---------- */
.v-tile{
  position:relative; display:flex; flex-direction:column;
  background:#0D1717; border:1px solid #0D1717; border-radius:var(--radius);
  overflow:hidden; cursor:pointer; text-align:left; padding:0; font:inherit; color:inherit;
  transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
a.v-tile{ text-decoration:none; }
.v-tile:hover{ transform:translateY(-8px); box-shadow:var(--shadow-lg); border-color:rgba(196,164,90,.55); }
.v-tile:focus-visible{ outline:2px solid var(--or); outline-offset:3px; }

.v-media{ position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-band); flex-shrink:0; }
.v-media img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease); }
.v-tile:hover .v-media img{ transform:scale(1.05); }

.v-badge{
  position:absolute; top:16px; left:16px; z-index:2;
  padding:7px 14px; border-radius:999px;
  font-family:var(--body); font-size:.6rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
}
.v-badge.nouveaute{ background:var(--or); color:var(--obsidienne); }
.v-badge.reserve{ background:rgba(14,12,9,.6); color:#FAF6EE; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.v-badge.vendu{ background:var(--obsidienne); color:#FAF6EE; border:1px solid rgba(250,246,238,.25); }

.v-tile[data-statut="vendu"] .v-media img{ filter:grayscale(1); opacity:.82; }

/* --- Bloc texte sous la photo (FONCÉ par défaut) --- */
.v-body{ display:flex; flex-direction:column; gap:9px; padding:22px 24px 24px; flex:1; }
.v-kicker{ font-family:var(--body); font-size:.68rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--or-clair); }
.v-name{
  font-family:var(--body); font-style:normal; font-weight:600;
  font-size:1.32rem; line-height:1.2; letter-spacing:-.01em; color:#FAF6EE;
}
.v-specs{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 10px; font-size:.8rem; color:rgba(250,246,238,.72); }
.v-specs + .v-specs{ margin-top:-3px; }
.v-specs span{ display:inline-flex; align-items:center; gap:10px; white-space:nowrap; }
.v-specs span + span::before{ content:"·"; color:var(--or); }

.v-foot{ margin-top:auto; padding-top:15px; border-top:1px solid rgba(250,246,238,.16); display:flex; align-items:flex-end; justify-content:space-between; gap:14px; align-self:stretch; }
.v-price{ display:flex; align-items:baseline; gap:7px; font-family:var(--body); }
.v-price .n{ font-size:1.5rem; font-weight:600; color:var(--or-clair); letter-spacing:-.01em; line-height:1; white-space:nowrap; }
.v-price .u{ font-size:.68rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:rgba(250,246,238,.55); }
.v-price .demande{ font-family:var(--body); font-weight:500; font-size:1.05rem; color:rgba(250,246,238,.8); }
.v-tile[data-statut="vendu"] .v-price .n{ color:rgba(250,246,238,.45); }
.v-cta{ display:inline-flex; align-items:center; gap:8px; font-family:var(--body); font-size:.66rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; color:rgba(250,246,238,.55); white-space:nowrap; transition:color .3s ease; padding-bottom:3px; }
.v-cta svg{ width:12px; height:12px; }
.v-tile:hover .v-cta{ color:var(--or-clair); }

/* ---------- MODALE DÉTAIL ---------- */
.v-overlay{
  position:fixed; inset:0; z-index:200; padding:24px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(14,12,9,.62);
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .35s ease;
}
.v-overlay.open{ opacity:1; pointer-events:auto; }
.v-modal{
  position:relative; width:100%; max-width:1060px; height:min(90vh,780px);
  background:var(--card); border-radius:var(--radius); overflow:hidden;
  display:grid; grid-template-columns:1.12fr .88fr;
  box-shadow:var(--shadow-lg);
  transform:translateY(18px) scale(.985); transition:transform .35s var(--ease);
}
.v-overlay.open .v-modal{ transform:none; }

.vm-close{
  position:absolute; top:16px; right:16px; z-index:5;
  width:40px; height:40px; border-radius:50%; border:1px solid var(--line);
  background:rgba(255,255,255,.86); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
  color:var(--encre); transition:border-color .3s ease, color .3s ease, transform .3s ease;
}
.vm-close:hover{ border-color:var(--or); color:var(--or-encre); transform:rotate(90deg); }
.vm-close svg{ width:16px; height:16px; }

.vm-gallery{ padding:22px; display:flex; flex-direction:column; gap:12px; background:var(--bg-band); overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.vm-gallery > *{ flex-shrink:0; }
.vm-main{ border-radius:var(--radius-sm); overflow:hidden; aspect-ratio:16/11; background:var(--bg-base); flex-shrink:0; }
.vm-main img{ width:100%; height:100%; object-fit:cover; }
.vm-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
.vm-thumbs button{
  border:2px solid transparent; border-radius:9px; overflow:hidden; padding:0; cursor:pointer;
  aspect-ratio:16/11; background:var(--bg-base); transition:border-color .3s ease, opacity .3s ease; opacity:.75;
}
.vm-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.vm-thumbs button:hover{ opacity:1; }
.vm-thumbs button.active{ border-color:var(--or); opacity:1; }
.vm-note-photos{ font-family:var(--mono); font-size:.62rem; letter-spacing:.12em; color:var(--encre-3); text-align:center; }
.v-modal[data-statut="vendu"] .vm-main img,
.v-modal[data-statut="vendu"] .vm-thumbs img{ filter:grayscale(1); }

.vm-info{ padding:38px 36px 32px; display:flex; flex-direction:column; gap:16px; overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.vm-info > *{ flex-shrink:0; } /* le contenu défile, il ne se comprime pas */
.vm-kicker{ font-family:var(--mono); font-size:.68rem; font-weight:500; letter-spacing:.26em; text-transform:uppercase; color:var(--or-encre); }
.vm-name{
  font-family:var(--body); font-style:normal; font-weight:600;
  font-size:clamp(1.5rem,2.3vw,1.9rem); line-height:1.15; letter-spacing:-.015em; color:var(--encre);
}
.vm-accroche{ font-family:var(--display); font-style:italic; font-weight:300; font-size:1.12rem; color:var(--encre-2); line-height:1.45; border-left:2px solid var(--or); padding-left:15px; }
.vm-desc{ font-size:.92rem; color:var(--encre-2); line-height:1.75; }

/* Liste des options & équipements (champ facultatif `options`) */
.vm-options-title{ font-family:var(--body); font-size:.64rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--or-encre); margin-bottom:10px; }
.vm-options ul{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:7px 18px; }
.vm-options li{ position:relative; padding-left:16px; font-size:.85rem; color:var(--encre-2); line-height:1.4; }
.vm-options li::before{ content:""; position:absolute; left:0; top:.52em; width:6px; height:6px; border-radius:50%; background:var(--or); }

.vm-specs{ display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-sm); overflow:hidden; }
.vm-specs > div{ background:var(--card); padding:13px 16px; }
.vm-specs .k{ font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase; color:var(--encre-3); margin-bottom:4px; }
.vm-specs .v{ font-size:.94rem; font-weight:500; color:var(--encre); }

.vm-foot{ margin-top:auto; padding-top:18px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:16px; }
.vm-price-row{ display:flex; align-items:baseline; justify-content:space-between; gap:14px; flex-wrap:wrap; }
.vm-price{ display:flex; align-items:baseline; gap:8px; }
.vm-price .n{ font-size:2.1rem; font-weight:600; color:var(--or-encre); letter-spacing:-.01em; line-height:1; white-space:nowrap; }
.vm-price .u{ font-size:.7rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase; color:var(--encre-3); }
.vm-price .demande{ font-family:var(--display); font-style:italic; font-size:1.5rem; color:var(--encre-2); }
.vm-badge-inline{ font-size:.6rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; padding:7px 14px; border-radius:999px; }
.vm-badge-inline.nouveaute{ background:rgba(196,164,90,.14); color:var(--or-encre); border:1px solid var(--or); }
.vm-badge-inline.reserve{ background:var(--bg-band); color:var(--encre-2); border:1px solid var(--line); }
.vm-badge-inline.vendu{ background:var(--obsidienne); color:#FAF6EE; }
.vm-actions{ display:flex; gap:12px; flex-wrap:wrap; }
.vm-actions .btn{ padding:.85rem 1.5rem; }
.vm-vendu-note{ font-family:var(--display); font-style:italic; font-size:1.02rem; color:var(--encre-2); line-height:1.5; }

/* ---------- RESPONSIVE ---------- */
@media (max-width:980px){
  .v-grid{ grid-template-columns:repeat(2,1fr) !important; }
  .v-modal{ grid-template-columns:1fr; height:auto; max-height:88vh; overflow-y:auto; overscroll-behavior:contain; }
  .vm-gallery{ padding:16px; overflow:visible; }
  .vm-info{ padding:26px 24px 24px; overflow:visible; }
}
@media (max-width:640px){
  .v-grid{ grid-template-columns:1fr !important; }
  .v-overlay{ padding:12px; }
}