/* ==========================================================================
   NOSTAL CARS PUB — assets/css/vehicule-detail.css
   Styles spécifiques à la fiche véhicule détaillée.
   S'appuie sur les variables et composants définis dans style.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   MISE EN PAGE GÉNÉRALE (galerie/détails à gauche, prix+actions à droite)
   -------------------------------------------------------------------------- */
/* minmax(0, …) est essentiel ici : sans lui, une piste de grille "1fr" garde
   une largeur minimale basée sur le contenu le plus large qu'elle contient
   (ex : la bande de vignettes ci-dessous, dont les boutons ne rétrécissent
   jamais). Résultat sans ce correctif : toute la colonne — et donc la photo
   principale, les onglets, etc. — déborde de l'écran sur mobile. */
.vd-layout{ grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap:40px; align-items:start; }
.vd-sidebar-sticky{ position:sticky; top:100px; }

/* --------------------------------------------------------------------------
   GALERIE PHOTOS
   -------------------------------------------------------------------------- */
.vd-gallery-main{
  position:relative;
  border-radius: var(--nc-radius-lg);
  overflow:hidden;
  height: 460px;
  margin-bottom: 12px;
}
.vd-gallery-main img{ width:100%; height:100%; object-fit:cover; }
.vd-gallery-main .nc-badge{ position:absolute; top:18px; left:0; z-index:2; }
.vd-gallery-counter{
  position:absolute; bottom:16px; right:16px; z-index:2;
  background: rgba(11,17,32,.7); color:#fff;
  padding:.35rem .8rem; border-radius:20px; font-size: var(--nc-fs-xs); font-weight:700;
}
.vd-gallery-thumbs{ display:flex; gap:10px; overflow-x:auto; padding-bottom:4px; }
.vd-gallery-thumbs button{
  flex:0 0 100px; height:74px; border-radius:8px; overflow:hidden;
  border: 2px solid transparent; padding:0; background:none;
}
.vd-gallery-thumbs button img{ width:100%; height:100%; object-fit:cover; display:block; }
.vd-gallery-thumbs button.is-active{ border-color: var(--nc-blue); }

/* --------------------------------------------------------------------------
   EN-TÊTE FICHE (titre / prix / actions rapides)
   -------------------------------------------------------------------------- */
.vd-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:1.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.vd-head h1{ font-size: var(--nc-fs-2xl); margin-bottom:.4rem; }
.vd-head .vd-sub{ color: var(--nc-gray-500); font-size: var(--nc-fs-sm); display:flex; gap:1.2rem; flex-wrap:wrap; }
.vd-head .vd-sub span{ display:flex; align-items:center; gap:.4rem; }
.vd-price-block{ text-align:right; }
.vd-price-block .vd-price{ font-size: var(--nc-fs-3xl); font-weight:900; color: var(--nc-blue); line-height:1; }
.vd-price-block .vd-price-note{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); }
.vd-price-block .vd-price-monthly{ font-size: var(--nc-fs-sm); color: var(--nc-green); font-weight:700; margin-top:.3rem; }

.vd-quickspecs{
  display:flex; flex-wrap:wrap; gap:0;
  border: 1px solid var(--nc-gray-300); border-radius: var(--nc-radius);
  margin: 1.6rem 0; overflow:hidden;
}
.vd-quickspecs > div{
  flex:1; min-width:120px; text-align:center; padding: 1.1rem .8rem;
  border-right:1px solid var(--nc-gray-300);
}
.vd-quickspecs > div:last-child{ border-right:none; }
.vd-quickspecs i{ color: var(--nc-blue); font-size:1.3rem; margin-bottom:.5rem; display:block; }
.vd-quickspecs strong{ display:block; font-size: var(--nc-fs-sm); }
.vd-quickspecs span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); text-transform:uppercase; letter-spacing:.5px; }

.vd-actions{ display:flex; gap:.8rem; flex-wrap:wrap; margin-bottom:2rem; }
.vd-actions .nc-btn.is-icon-only{ padding:.9rem 1.1rem; }
#vdFavBtn.is-active{ background: var(--nc-red); border-color: var(--nc-red); color:#fff; }

/* --------------------------------------------------------------------------
   ONGLETS DE CONTENU
   -------------------------------------------------------------------------- */
.vd-tabs-nav{
  display:flex; gap:.4rem; border-bottom: 2px solid var(--nc-gray-300);
  margin-bottom: 2.2rem; overflow-x:auto;
}
.vd-tabs-nav button{
  background:none; border:none; padding: .95rem 1.3rem;
  font-weight:700; font-size: var(--nc-fs-sm); text-transform:uppercase; letter-spacing:.4px;
  color: var(--nc-gray-500); border-bottom:3px solid transparent; margin-bottom:-2px;
  white-space:nowrap; transition: color var(--nc-transition), border-color var(--nc-transition);
}
.vd-tabs-nav button:hover{ color: var(--nc-blue); }
.vd-tabs-nav button.is-active{ color: var(--nc-blue); border-color: var(--nc-blue); }
.vd-tab-panel{ display:none; }
.vd-tab-panel.is-active{ display:block; animation: nc-fadein .3s ease; }
@keyframes nc-fadein{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:translateY(0);} }

/* --------------------------------------------------------------------------
   FICHE TECHNIQUE
   -------------------------------------------------------------------------- */
.vd-specs-table{ width:100%; border-collapse:collapse; }
.vd-specs-table tr{ border-bottom:1px solid var(--nc-gray-300); }
.vd-specs-table tr:last-child{ border-bottom:none; }
.vd-specs-table td{ padding: .9rem .5rem; font-size: var(--nc-fs-sm); }
.vd-specs-table td:first-child{ color: var(--nc-gray-500); display:flex; align-items:center; gap:.6rem; width:45%; }
.vd-specs-table td:first-child i{ color: var(--nc-blue); width:18px; }
.vd-specs-table td:last-child{ font-weight:700; color: var(--nc-dark); }

/* --------------------------------------------------------------------------
   HISTORIQUE DU VÉHICULE (type Histovec)
   -------------------------------------------------------------------------- */
.vd-history-summary{ display:grid; grid-template-columns:repeat(4,1fr); gap:1rem; margin-bottom: 2.4rem; }
.vd-history-summary .nc-card{ padding:1.3rem; text-align:center; }
.vd-history-summary i{ font-size:1.4rem; color: var(--nc-blue); margin-bottom:.6rem; display:block; }
.vd-history-summary strong{ display:block; font-size: var(--nc-fs-md); }
.vd-history-summary span{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); text-transform:uppercase; letter-spacing:.4px; }
.vd-history-summary.status-ok i{ color: var(--nc-green); }
.vd-history-summary.status-warn i{ color: var(--nc-red); }

.vd-timeline{ position:relative; padding-left: 40px; }
.vd-timeline::before{ content:""; position:absolute; top:6px; bottom:6px; left:14px; width:2px; background: var(--nc-gray-300); }
.vd-timeline-item{ position:relative; padding-bottom: 2rem; }
.vd-timeline-item:last-child{ padding-bottom:0; }
.vd-timeline-dot{
  position:absolute; left:-40px; top:0; width:30px; height:30px; border-radius:50%;
  background: var(--nc-blue); color:#fff; display:flex; align-items:center; justify-content:center;
  font-size:.85rem; z-index:2;
}
.vd-timeline-item.type-sinistre .vd-timeline-dot{ background: var(--nc-red); }
.vd-timeline-item.type-controle_technique .vd-timeline-dot{ background: var(--nc-green); }
.vd-timeline-item.type-changement_proprietaire .vd-timeline-dot{ background: var(--nc-dark); }
.vd-timeline-card{ background:#fff; border:1px solid var(--nc-gray-300); border-radius: var(--nc-radius); padding:1.2rem 1.4rem; }
.vd-timeline-date{ font-size: var(--nc-fs-xs); color: var(--nc-gray-500); text-transform:uppercase; letter-spacing:.5px; margin-bottom:.3rem; }
.vd-timeline-card h5{ margin-bottom:.4rem; }
.vd-timeline-card p{ margin-bottom:0; font-size: var(--nc-fs-sm); }
.vd-timeline-meta{ display:flex; gap:1rem; margin-top:.7rem; font-size: var(--nc-fs-xs); color: var(--nc-gray-500); flex-wrap:wrap; }
.vd-timeline-meta span{ display:flex; align-items:center; gap:.35rem; }

.vd-history-empty{
  text-align:center; padding: 3rem 1.5rem; border:1.5px dashed var(--nc-gray-300); border-radius: var(--nc-radius-lg);
}
.vd-history-empty i{ font-size:2.2rem; color: var(--nc-gray-300); margin-bottom:1rem; display:block; }

/* --------------------------------------------------------------------------
   SIMULATEUR MINI (dans l'onglet Financement)
   -------------------------------------------------------------------------- */
.vd-mini-sim{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items:start; }
.vd-mini-sim-result{
  background: var(--nc-dark); color:#fff; border-radius: var(--nc-radius-lg);
  padding: 1.8rem; text-align:center;
}
.vd-mini-sim-result .amount{ font-size: var(--nc-fs-3xl); font-weight:900; color: var(--nc-green); }
.vd-mini-sim-result .amount small{ font-size: var(--nc-fs-md); color: rgba(255,255,255,.6); font-weight:400; }
.vd-mini-sim-result p{ color: rgba(255,255,255,.55); font-size: var(--nc-fs-xs); margin-top:.6rem; }
.vd-range-row{ margin-bottom:1.4rem; }
.vd-range-row .lbl{ display:flex; justify-content:space-between; font-size: var(--nc-fs-sm); margin-bottom:.5rem; }
.vd-range-row .lbl strong{ color: var(--nc-blue); }

/* --------------------------------------------------------------------------
   VÉHICULES SIMILAIRES
   -------------------------------------------------------------------------- */
.vd-similar-title{ margin-bottom: 1.8rem; }

@media(max-width:991px){
  .vd-layout{ grid-template-columns: minmax(0, 1fr); gap:28px; }
  .vd-sidebar-sticky{ position:static; top:auto; }
}

@media(max-width:767px){
  .vd-gallery-main{ height: 240px; }
  .vd-gallery-thumbs button{ flex:0 0 76px; height:56px; }
  .vd-head{ flex-direction:column; }
  .vd-head h1{ font-size: var(--nc-fs-xl); word-break: break-word; }
  .vd-price-block{ text-align:left; }
  .vd-price-block .vd-price{ font-size: var(--nc-fs-2xl); }
  .vd-quickspecs > div{ min-width: calc(50% - 1px); flex: 1 1 calc(50% - 1px); }
  .vd-history-summary{ grid-template-columns:repeat(2,1fr); }
  .vd-mini-sim{ grid-template-columns:1fr; }
  .vd-timeline{ padding-left: 32px; }
  .vd-timeline-dot{ left:-32px; width:26px; height:26px; font-size:.75rem; }
}

@media(max-width:400px){
  .vd-quickspecs > div{ min-width: 100%; flex: 1 1 100%; border-right:none; border-bottom:1px solid var(--nc-gray-300); }
  .vd-quickspecs > div:last-child{ border-bottom:none; }
}