/* ============================================================
   STOCK & VEHICULE — Design tokens + composants
   Isole du Tailwind existant — prefixes srp-, vdp-, vcard-
   ============================================================ */

:root {
  --navy:       #00195a;
  --navy-mid:   #0D2B6B;
  --navy-deep:  #001040;
  --cream:      #F7F4F0;
  --cream-dark: #EDE9E3;
  --cream-mid:  #DDD9D3;
  --text-main:  #1A1A1A;
  --text-mid:   #4A4540;
  --text-muted: #7A756F;
  --text-hint:  #AAA49C;
  --gold:       #C8A04A;
  --gold-light: #F5E9CC;
  --green:      #1D9E75;
  --green-bg:   #EAF3DE;
  --green-dark: #27500A;
  --blue-bg:    #E6F1FB;
  --blue-dark:  #0C447C;
  --serif:      'Playfair Display', Georgia, serif;
  --sans:       'DM Sans', -apple-system, sans-serif;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --border:     0.5px solid #EDE9E3;
  --border-mid: 0.5px solid #DDD9D3;
}

/* ── SRP BAR ── */
.srp-bar { background: var(--navy); border-top: .5px solid rgba(255,255,255,.06); padding: 1.1rem 2rem 1.5rem; }
.srp-bar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.srp-title { color: #fff; font-family: var(--serif); font-size: 28px; font-weight: 500; line-height: 1.1; letter-spacing: -.01em; }
.srp-sub { color: rgba(255,255,255,.38); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; margin-top: 5px; }
.srp-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.fpill { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.85); padding: 7px 18px; border-radius: 20px; font-size: 12px; cursor: pointer; font-family: var(--sans); font-weight: 400; letter-spacing:.03em; transition: all .18s; }
.fpill:hover { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.6); color: #fff; }
.fpill.on { background: #fff; color: var(--navy); border-color: #fff; font-weight: 600; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.fsep { width: .5px; height: 20px; background: rgba(255,255,255,.1); }
.sort-sel { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.9); border-radius: var(--r-sm); padding: 7px 12px; font-size: 12px; font-family: var(--sans); cursor: pointer; }
.sort-sel option { background: #fff; color: var(--navy); }

/* ── TRUST STRIP ── */
.trust-strip { background: var(--navy-deep); border-top: .5px solid rgba(255,255,255,.06); padding: .6rem 2rem; }
.trust-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; }
.ti { display: flex; align-items: center; gap: .5rem; color: rgba(255,255,255,.75); font-size: 11px; font-family: var(--sans); }
.ti svg { opacity: .7; flex-shrink: 0; }
.t-sep { width: .5px; height: 16px; background: rgba(255,255,255,.1); }

/* ── RATINGS BAR ── */
.ratings-bar { background: #fff; border-bottom: var(--border); padding: .5rem 2rem; }
.ratings-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.stars { display: flex; gap: 2px; }
.stars svg { fill: var(--gold); }
.rating-txt { font-size: 12px; color: var(--text-mid); font-family: var(--sans); }
.rating-txt strong { color: var(--text-main); }
.r-sep { width: .5px; height: 14px; background: var(--cream-mid); }
.rating-label { font-size: 11px; color: var(--text-hint); font-family: var(--sans); }

/* ── SRP GRID ── */
.srp-wrap { padding: 2rem; max-width: 1100px; margin: 0 auto; }

/* Hero card */
.vhero { display: grid; grid-template-columns: 1.62fr 1fr; background: #fff; border-radius: var(--r-lg); overflow: hidden; border: var(--border); margin-bottom: 1.25rem; cursor: pointer; transition: transform .22s ease; text-decoration: none; color: inherit; }
.vhero:hover { transform: translateY(-3px); }
.vhero-gal { position: relative; min-height: 320px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.gal-badges { position: absolute; top: 14px; left: 14px; display: flex; gap: 6px; z-index: 2; }
.price-glass { position: absolute; bottom: 0; left: 0; right: 0; padding: 14px 18px; background: rgba(9,20,64,.74); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.pg-price { color: #fff; font-family: var(--serif); font-size: 26px; font-weight: 500; line-height: 1; }
.pg-price sub { font-size: 13px; opacity: .7; font-family: var(--sans); vertical-align: baseline; }
.pg-monthly { color: rgba(255,255,255,.48); font-size: 11px; margin-top: 3px; font-family: var(--sans); }
.vhero-info { padding: 26px 28px 22px; display: flex; flex-direction: column; justify-content: space-between; }
.vi-brand { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 5px; font-family: var(--sans); }
.vi-model { font-family: var(--serif); font-size: 27px; font-weight: 500; color: var(--navy); line-height: 1.05; margin-bottom: 2px; }
.vi-ver { font-size: 13px; color: #6A7FA8; margin-bottom: 18px; font-family: var(--sans); }
.vi-specs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.vi-spec { background: var(--cream); border-radius: var(--r-sm); padding: 10px 12px; }
.vi-spec-l { font-size: 9px; letter-spacing:.08em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 3px; font-family: var(--sans); }
.vi-spec-v { font-size: 13px; font-weight: 500; color: var(--navy); font-family: var(--sans); }
.vi-usp { display: flex; align-items: center; gap: 6px; background: var(--green-bg); color: var(--green-dark); font-size: 11px; font-weight: 500; padding: 6px 10px; border-radius: var(--r-sm); margin-bottom: 14px; font-family: var(--sans); }
.vi-checked { display: flex; align-items: center; gap: 5px; font-size: 10px; color: var(--text-hint); letter-spacing: .02em; margin-bottom: 16px; font-family: var(--sans); }
.vi-checked svg { flex-shrink: 0; }
.vi-ctas { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.btn-main-navy { background: var(--navy); color: #fff; border: none; border-radius: var(--r-md); padding: 11px 16px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--sans); transition: background .15s; text-align: center; text-decoration: none; display: inline-block; }
.btn-main-navy:hover { background: var(--navy-mid); }
.btn-outline { background: #fff; color: var(--navy); border: var(--border-mid); border-radius: var(--r-md); padding: 11px 14px; font-size: 13px; cursor: pointer; font-family: var(--sans); transition: border-color .15s; white-space: nowrap; text-decoration: none; display: inline-block; text-align: center; }
.btn-outline:hover { border-color: var(--navy); }

/* Sub grid */
.sub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(298px, 1fr)); gap: 1.1rem; }
.vcard { background: #fff; border-radius: var(--r-lg); overflow: hidden; border: var(--border); cursor: pointer; transition: transform .22s ease; text-decoration: none; color: inherit; display: block; }
.vcard:hover { transform: translateY(-4px); }
.vcard-img { position: relative; aspect-ratio: 16/9; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.vcard-img-badges { position: absolute; top: 10px; left: 10px; display: flex; gap: 5px; z-index: 2; }
.vcard-price-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 10px 13px; background: rgba(9,20,64,.7); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.vpo-price { color: #fff; font-family: var(--serif); font-size: 19px; font-weight: 500; }
.vpo-price sub { font-size: 10px; opacity: .65; font-family: var(--sans); vertical-align: baseline; }
.vpo-monthly { color: rgba(255,255,255,.42); font-size: 10px; margin-top: 1px; font-family: var(--sans); }
.vcard-body { padding: 13px 15px 15px; }
.vc-brand { font-size: 9px; letter-spacing:.1em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 4px; font-family: var(--sans); }
.vc-model { font-family: var(--serif); font-size: 17px; color: var(--navy); font-weight: 500; line-height: 1.15; margin-bottom: 2px; }
.vc-ver { font-size: 12px; color: #6A7FA8; margin-bottom: 9px; font-family: var(--sans); }
.vc-chips { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }
.chip { font-size: 10px; background: var(--cream); color: var(--text-muted); padding: 3px 7px; border-radius: 4px; font-family: var(--sans); }
.vc-usp { display: flex; align-items: flex-start; gap: 5px; font-size: 10px; color: var(--green-dark); margin-bottom: 9px; line-height: 1.4; font-family: var(--sans); }
.vc-usp svg { flex-shrink: 0; margin-top: 1px; }
.vc-checked { display: flex; align-items: center; gap: 4px; font-size: 10px; color: var(--text-hint); margin-bottom: 10px; font-family: var(--sans); }
.vc-cta { width: 100%; background: var(--navy); color: #fff; border: none; border-radius: var(--r-sm); padding: 9px; font-size: 12px; font-weight: 500; cursor: pointer; font-family: var(--sans); transition: background .15s; text-align: center; }
.vc-cta:hover { background: var(--navy-mid); }

/* ── BADGES ── */
.badge { font-size: 9px; letter-spacing:.09em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; font-weight: 500; white-space: nowrap; font-family: var(--sans); }
.b-new  { background: var(--gold); color: #fff; }
.b-used { background: rgba(255,255,255,.13); color: rgba(255,255,255,.9); border: .5px solid rgba(255,255,255,.25); }
.b-fresh{ background: rgba(255,255,255,.1); color: rgba(255,255,255,.8); border: .5px solid rgba(255,255,255,.18); }

/* ── SRP CTA BLOCK ── */
.srp-cta-block { max-width: 1100px; margin: 2rem auto 0; background: var(--navy); border-radius: var(--r-lg); padding: 2.5rem; text-align: center; }
.scb-eye { font-size: 10px; letter-spacing:.1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 8px; font-family: var(--sans); }
.scb-title { font-family: var(--serif); font-size: 24px; color: #fff; margin-bottom: 6px; }
.scb-sub { font-size: 13px; color: rgba(255,255,255,.42); margin-bottom: 20px; max-width: 460px; margin-left: auto; margin-right: auto; line-height: 1.6; font-family: var(--sans); }
.scb-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.btn-white-solid { background: #fff; color: var(--navy); border: none; border-radius: var(--r-md); padding: 11px 22px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--sans); text-decoration: none; display: inline-block; }
.btn-white-ghost { background: transparent; color: rgba(255,255,255,.7); border: .5px solid rgba(255,255,255,.25); border-radius: var(--r-md); padding: 11px 22px; font-size: 13px; cursor: pointer; font-family: var(--sans); text-decoration: none; display: inline-block; }

/* ── CAR PLACEHOLDER ── */
.car-ph { opacity: .15; pointer-events: none; }

/* ── VDP HERO ── */
.vdp-hero { display: grid; grid-template-columns: 1fr 390px; min-height: 490px; }
.vdp-gal { background: var(--navy); position: relative; display: flex; flex-direction: column; overflow: hidden; }
.gal-main { flex: 1; display: flex; align-items: center; justify-content: center; position: relative; min-height: 380px; }
.gal-counter { position: absolute; bottom: 12px; right: 14px; background: rgba(0,0,0,.5); color: rgba(255,255,255,.8); font-size: 11px; padding: 4px 10px; border-radius: 4px; font-family: var(--sans); }
.thumbs-row { display: flex; gap: 4px; padding: 6px 10px; background: var(--navy-deep); overflow-x: auto; }
.thumb { flex-shrink: 0; width: 72px; height: 48px; border-radius: 4px; border: .5px solid rgba(255,255,255,.1); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: border-color .15s; overflow: hidden; }
.thumb.on { border-color: rgba(255,255,255,.55); }

/* VDP Panel */
.vdp-panel { background: #fff; border-left: var(--border); display: flex; flex-direction: column; }
.vdp-panel-scroll { padding: 22px 22px 14px; flex: 1; }
.panel-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 13px; }
.pbadge { font-size: 10px; letter-spacing:.06em; text-transform: uppercase; padding: 3px 10px; border-radius: 4px; display: flex; align-items: center; gap: 5px; white-space: nowrap; font-family: var(--sans); }
.pb-green { background: var(--green-bg); color: var(--green-dark); }
.pb-blue  { background: var(--blue-bg);  color: var(--blue-dark); }
.pb-sand  { background: var(--cream);    color: var(--text-mid);  border: var(--border-mid); }
.panel-brand { font-size: 10px; letter-spacing:.1em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 4px; font-family: var(--sans); }
.panel-model { font-family: var(--serif); font-size: 30px; font-weight: 500; color: var(--navy); line-height: 1.05; margin-bottom: 2px; }
.panel-ver { font-size: 14px; color: #6A7FA8; margin-bottom: 16px; font-family: var(--sans); }
.panel-price-row { border-top: var(--border); border-bottom: var(--border); padding: 13px 0; margin-bottom: 16px; }
.panel-price { font-family: var(--serif); font-size: 34px; font-weight: 500; color: var(--navy); line-height: 1; }
.panel-price sub { font-size: 14px; color: var(--text-hint); font-family: var(--sans); vertical-align: baseline; }
.panel-monthly { font-size: 12px; color: #6A7FA8; margin-top: 3px; font-family: var(--sans); }
.panel-monthly strong { color: var(--navy); font-weight: 500; }
.cta-col { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.vdp-cta-main { background: var(--navy); color: #fff; border: none; border-radius: var(--r-md); padding: 13px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--sans); letter-spacing:.02em; transition: background .15s; text-align: center; text-decoration: none; display: block; }
.vdp-cta-main:hover { background: var(--navy-mid); }
.cta-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.vdp-cta-sec { background: #fff; color: var(--navy); border: var(--border-mid); border-radius: var(--r-md); padding: 10px; font-size: 12px; cursor: pointer; font-family: var(--sans); display: flex; align-items: center; justify-content: center; gap: 5px; transition: border-color .15s; text-decoration: none; }
.vdp-cta-sec:hover { border-color: var(--navy); }
.vdp-trust-list { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; background: var(--cream); border-top: var(--border); }
.vtl-item { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-muted); font-family: var(--sans); }
.vtl-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ── VDP BODY ── */
.vdp-body { padding: 2rem; max-width: 1100px; margin: 0 auto; }
.vdp-2col { display: grid; grid-template-columns: 1fr 340px; gap: 1.75rem; align-items: start; }
.vdp-main, .vdp-side { display: flex; flex-direction: column; gap: 1.25rem; }
.sec { background: #fff; border-radius: var(--r-lg); border: var(--border); padding: 22px 24px; }
.sec-eye { font-size: 10px; letter-spacing:.1em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 4px; font-family: var(--sans); }
.sec-h { font-family: var(--serif); font-size: 20px; font-weight: 500; color: var(--navy); margin-bottom: 13px; line-height: 1.2; }
.sec-h-sm { font-family: var(--serif); font-size: 16px; font-weight: 500; color: var(--navy); margin-bottom: 11px; }

/* ── VDP Description / CTA modèle ──
   .vdp-desc-body : style du body markdown des occasions
   .vdp-usp       : ligne accroche courte (USP) sous le titre, neufs uniquement
   .vdp-model-cta : lien doré vers la page modèle dédiée
*/
.vdp-desc-body { font-size: 14px; color: var(--text-mid); line-height: 1.78; }
.vdp-desc-body p { margin: 0 0 .8em; }
.vdp-desc-body p:last-child { margin-bottom: 0; }
.vdp-usp { font-family: var(--sans); font-size: 14px; color: var(--text-mid); line-height: 1.55; margin: 0 0 14px; }
.vdp-model-cta { display: inline-flex; align-items: center; gap: 6px; font-family: var(--sans); font-size: 13px; font-weight: 500; color: var(--gold); text-decoration: none; padding: 8px 0; border-bottom: 1px solid transparent; transition: border-color .15s, color .15s; }
.vdp-model-cta:hover { color: var(--gold-dark, #b08a3a); border-bottom-color: currentColor; }
.vdp-model-cta svg { transition: transform .15s; }
.vdp-model-cta:hover svg { transform: translateX(3px); }

/* Specs */
.specs-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.spec-box { background: var(--cream); border-radius: var(--r-sm); padding: 11px 13px; }
.spec-l { font-size: 9px; letter-spacing:.08em; text-transform: uppercase; color: var(--text-hint); margin-bottom: 3px; font-family: var(--sans); }
.spec-v { font-size: 13px; font-weight: 500; color: var(--navy); font-family: var(--sans); }
.sec-div { height: .5px; background: var(--cream-dark); margin: 14px 0; }
.equip-wrap { display: flex; flex-wrap: wrap; gap: 6px; }
.etag { font-size: 11px; background: var(--cream); color: var(--text-mid); padding: 4px 10px; border-radius: 4px; border: var(--border-mid); font-family: var(--sans); }

/* Financing */
.fin-block { background: var(--navy); border-radius: var(--r-md); padding: 16px 18px; margin-bottom: 15px; }
.fin-l { font-size: 10px; letter-spacing:.08em; text-transform: uppercase; color: rgba(255,255,255,.38); margin-bottom: 3px; font-family: var(--sans); }
.fin-amt { font-family: var(--serif); font-size: 32px; color: #fff; font-weight: 500; line-height: 1; }
.fin-detail { font-size: 11px; color: rgba(255,255,255,.38); margin-top: 3px; font-family: var(--sans); }
.sl-wrap { margin-bottom: 13px; }
.sl-row { display: flex; justify-content: space-between; margin-bottom: 6px; }
.sl-label { font-size: 11px; color: var(--text-muted); font-family: var(--sans); }
.sl-val { font-size: 12px; font-weight: 500; color: var(--navy); font-family: var(--sans); }
input[type=range].stock-range { width: 100%; accent-color: var(--navy); cursor: pointer; }
.fin-note { font-size: 10px; color: var(--text-hint); margin-top: 8px; line-height: 1.5; font-family: var(--sans); }
.btn-fin { width: 100%; background: var(--navy); color: #fff; border: none; border-radius: var(--r-md); padding: 12px; font-size: 13px; font-weight: 500; cursor: pointer; font-family: var(--sans); margin-top: 4px; transition: background .15s; }
.btn-fin:hover { background: var(--navy-mid); }

/* CTA Final */
.final-cta { background: var(--navy); border-radius: var(--r-lg); padding: 2.5rem; text-align: center; margin-top: 1.75rem; }
.fct-eye { font-size: 10px; letter-spacing:.1em; text-transform: uppercase; color: rgba(255,255,255,.35); margin-bottom: 8px; font-family: var(--sans); }
.fct-title { font-family: var(--serif); font-size: 24px; color: #fff; margin-bottom: 5px; }
.fct-sub { font-size: 13px; color: rgba(255,255,255,.42); margin-bottom: 22px; line-height: 1.6; font-family: var(--sans); }
.fct-btns { display: flex; flex-direction: column; gap: 8px; max-width: 340px; margin: 0 auto; }
.fct-main { background: #fff; color: var(--navy); border: none; border-radius: var(--r-md); padding: 13px; font-size: 14px; font-weight: 500; cursor: pointer; font-family: var(--sans); text-decoration: none; display: block; text-align: center; }
.fct-sec { background: transparent; color: var(--gold); border: 1px solid rgba(200,160,74,.4); border-radius: var(--r-md); padding: 12px; font-size: 13px; cursor: pointer; font-family: var(--sans); transition: all .15s; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 7px; }
.fct-sec:hover { background: var(--gold); color: var(--navy); border-color: var(--gold); }
.fct-sec svg { stroke: var(--gold); transition: stroke .15s; }
.fct-sec:hover svg { stroke: var(--navy); }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .srp-bar { padding: .8rem 1rem 1rem; }
  .srp-title { font-size: 22px; }
  .srp-bar-inner { flex-direction: column; align-items: flex-start; }
  .trust-strip { padding: .5rem 1rem; }
  .trust-inner { gap: 1rem; justify-content: flex-start; }
  .t-sep { display: none; }
  .srp-wrap { padding: 1rem; }
  .vhero { grid-template-columns: 1fr; }
  .vhero-gal { min-height: 220px; }
  .sub-grid { grid-template-columns: 1fr; }
  .vdp-hero { grid-template-columns: 1fr; }
  .vdp-2col { grid-template-columns: 1fr; }
  .srp-cta-block { margin: 1rem auto 0; padding: 1.5rem; }
  .scb-title { font-size: 20px; }
}