/* ==========================================================================
   fiche.css : fiche vehicule v2 (maquette storybook, aout 2026). Prefixe .cmf-
   Charge par cgi-bin/fiche.pl avec ?v= (cache navigateur 11 mois).
   Meme palette que liste.css : orange #E8720C / #D9640A, encres #1F2328.
   ========================================================================== */

.cmf-fiche {
  max-width: 1280px;
  margin: 0 auto;
  background: #fff;
  color: #1F2328;
  font-family: 'Poppins', 'Segoe UI', system-ui, sans-serif;
}
.cmf-fiche *, .cmf-fiche *::before, .cmf-fiche *::after { box-sizing: border-box; }
.cmf-fiche ul { list-style: none; margin: 0; padding: 0; }
.cmf-fiche img { max-width: 100%; }
.cmf-fiche h1, .cmf-fiche h2 { text-transform: none; }
.cmf-fiche button { font-family: inherit; }

/* ---------- fil d'ariane ---------- */
.cmf-crumb {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 11px 28px; font-size: 12px; color: #98A1A8;
  border-bottom: 1px solid #F1F3F5; flex-wrap: wrap;
}
.cmf-crumb a { color: #6E767E; text-decoration: none; }
.cmf-crumb a:hover { color: #D9640A; }
.cmf-crumb b { color: #1F2328; font-weight: 500; }
.cmf-crumb .acts { display: flex; gap: 10px; align-items: center; color: #6E767E; }
.cmf-crumb .acts button {
  background: none; border: none; padding: 4px; cursor: pointer; color: #6E767E;
  display: flex; align-items: center; border-radius: 6px;
}
.cmf-crumb .acts button:hover { color: #D9640A; background: #FCF1E4; }
.cmf-crumb .acts button[data-fait] { color: #3E7A2C; }

/* ---------- grille principale ---------- */
.cmf-main {
  padding: 24px 28px 8px;
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(340px, 1fr);
  gap: 28px;
  align-items: start;
}

/* ---------- galerie ---------- */
.cmf-gal-main { position: relative; border-radius: 12px; overflow: hidden; background: #F1F3F5; }
.cmf-gal-main img.main { width: 100%; aspect-ratio: 3/2; object-fit: cover; display: block; cursor: zoom-in; }
.cmf-pill {
  position: absolute; bottom: 12px; right: 12px;
  background: rgba(24,27,30,.78); color: #fff; font-size: 11.5px;
  padding: 4px 11px; border-radius: 99px; display: flex; align-items: center; gap: 6px;
}
.cmf-pastilles { position: absolute; top: 10px; left: 10px; display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.cmf-pastilles i {
  font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 6px; color: #fff;
}
.cmf-pastilles .p-new, .cmf-pastilles .p-np { background: #E8720C; }
.cmf-pastilles .p-res, .cmf-pastilles .p-arr { background: #22262A; }
.cmf-pastilles .p-off { background: #3E7A2C; }
.cmf-gal-main .nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 36px; height: 36px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.88); color: #1F2328; font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .18s ease;
}
.cmf-gal-main:hover .nav { opacity: 1; }
.cmf-gal-main .nav.prev { left: 10px; }
.cmf-gal-main .nav.next { right: 10px; }
.cmf-thumbs { display: flex; gap: 8px; margin-top: 8px; }
.cmf-thumbs .th {
  position: relative; flex: 1; aspect-ratio: 3/2; border-radius: 8px;
  overflow: hidden; cursor: pointer; transition: opacity .2s ease;
}
.cmf-thumbs .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmf-thumbs .th.on { outline: 2.5px solid #E8720C; outline-offset: -2.5px; }
.cmf-thumbs .th:not(.on):hover { opacity: .8; }
.cmf-thumbs .plus {
  position: absolute; inset: 0; background: rgba(24,27,30,.55); color: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 600;
}

/* lightbox */
.cmf-lightbox {
  position: fixed; inset: 0; z-index: 1100; background: rgba(15,17,19,.94);
  display: none; align-items: center; justify-content: center;
}
.cmf-lightbox.on { display: flex; }
.cmf-lightbox img { max-width: 92vw; max-height: 88vh; object-fit: contain; border-radius: 6px; }
.cmf-lightbox .x {
  position: absolute; top: 14px; right: 18px; background: none; border: none;
  color: #fff; font-size: 34px; cursor: pointer; line-height: 1;
}
.cmf-lightbox .lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; border-radius: 50%; border: none; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff; font-size: 18px;
}
.cmf-lightbox .lb-prev { left: 16px; }
.cmf-lightbox .lb-next { right: 16px; }
.cmf-lightbox .lb-cnt { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: #C7CCD1; font-size: 12.5px; }

/* ---------- colonne d'achat ---------- */
.cmf-buy {
  border: 1px solid #E8EBEE; border-radius: 16px; padding: 22px;
  align-self: start; background: #fff;
}
.cmf-buy h1 {
  font-size: 24px; font-weight: 650; margin: 0; letter-spacing: -.01em;
  line-height: 1.2; color: #1F2328;
}
.cmf-buy .vsub { font-size: 12.5px; color: #6E767E; margin: 4px 0 14px; }
.cmf-price { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.cmf-price b { font-size: 31px; color: #D9640A; font-weight: 700; letter-spacing: -.01em; }
.cmf-price span { font-size: 13px; color: #6E767E; }
.cmf-price .old { font-size: 15px; color: #98A1A8; text-decoration: line-through; font-weight: 500; }
.cmf-price b.pod { font-size: 24px; color: #1F2328; }
.cmf-price .verrou { font-size: 13px; color: #6E767E; }
.cmf-price a.verrou { text-decoration: none; color: #D9640A; font-weight: 600; }
.cmf-tva { display: flex; align-items: center; gap: 6px; font-size: 12px; color: #3E7A2C; margin: 4px 0 16px; }
.cmf-tva.marge { color: #6E767E; }

/* boutons d'action : surcharge des .btn du site (btn-default / green) */
.cmf-cta { margin-bottom: 8px; }
.cmf-cta a.btn {
  display: flex !important; align-items: center; justify-content: center; gap: 8px;
  background: #E8720C !important; color: #fff !important;
  font-size: 14.5px !important; font-weight: 600 !important;
  border-radius: 10px !important; border: none !important;
  height: 46px; width: 100%; padding: 0 14px !important;
  text-decoration: none !important; text-transform: none !important;
  text-shadow: none !important; box-shadow: none !important; line-height: 46px;
  transition: background .2s ease;
}
.cmf-cta a.btn:hover { background: #C95F06 !important; }
.cmf-cta2 { display: flex; gap: 8px; margin-bottom: 8px; }
.cmf-cta2 .b2 { flex: 1; min-width: 0; display: flex; }
.cmf-cta2 .b2 > a {
  flex: 1; display: flex !important; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid #DFE3E7 !important; border-radius: 10px !important;
  height: 40px; font-size: 13px !important; font-weight: 500 !important;
  background: #fff !important; color: #1F2328 !important;
  text-decoration: none !important; text-transform: none !important;
  text-shadow: none !important; box-shadow: none !important;
  padding: 0 8px !important; line-height: 40px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; transition: background .15s ease;
}
.cmf-cta2 .b2 > a:hover { background: #F4F5F7 !important; }
.cmf-cta2 .b2 > a.wa { color: #3E7A2C !important; }
.cmf-cta2 .b2 > a.wa svg { flex: none; }

/* message reservation (fonction prod restylee) */
.cmf-buy .message_reserved_content {
  border: 1px solid #EBD9B4; background: #FBF3E2; border-radius: 10px;
  padding: 12px 14px; margin: 0 0 12px;
}
.cmf-buy .message_reserved_content h3 { font-size: 14px; font-weight: 650; margin: 0 0 6px; color: #8F5E08; }
.cmf-buy .message_reserved_content ul { display: flex; gap: 10px; margin-top: 8px; }
.cmf-buy .message_reserved_txt { font-size: 12.5px; color: #6E767E; }

/* zip photos (bouton prod .getPhotoZipClient restyle en lien discret) */
.cmf-dl { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #4B5157; margin: 2px 0 14px; }
.cmf-dl a.getPhotoZipClient {
  background: none !important; border: none !important; box-shadow: none !important;
  color: #4B5157 !important; font-size: 12px !important; padding: 0 !important;
  text-decoration: underline !important; text-transform: none !important;
}
.cmf-dl a.getPhotoZipClient:hover { color: #D9640A !important; }

/* carte vendeur */
.cmf-vendor { border: 1px solid #F1F3F5; background: #FAFBFC; border-radius: 12px; padding: 12px 14px; }
/* "vrow" et pas "row" : le .row Bootstrap injecte des ::before/::after
   qui deviennent des items flex et decalent l'avatar d'un gap */
.cmf-vendor .vrow { display: flex; align-items: center; gap: 10px; }
.cmf-vendor .av {
  width: 38px; height: 38px; border-radius: 50%; background: #F3D9BD; color: #8A4B12;
  font-size: 13px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  flex: none; overflow: hidden;
}
.cmf-vendor .av img { width: 100%; height: 100%; object-fit: cover; }
.cmf-vendor b { display: block; font-size: 13px; font-weight: 600; }
.cmf-vendor .lg { font-size: 11px; color: #6E767E; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.cmf-vendor .lg img { width: 16px; height: auto; }
.cmf-vendor .fast {
  margin-left: auto; font-size: 11px; color: #3E7A2C; display: flex; gap: 5px;
  align-items: center; white-space: nowrap; cursor: pointer;
}
/* Retour client 17/08 : QR toujours visible a DROITE de la carte,
   "Enregistrer le contact" sous le QR */
.cmf-vendor .cols { display: flex; gap: 12px; align-items: stretch; justify-content: space-between; }
.cmf-vendor .cols .id {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; justify-content: space-between; gap: 8px;
}
/* QR seul, centre verticalement : meme espace au-dessus et en dessous */
.cmf-vendor .qrzone { display: flex; align-items: center; flex: none; }
.cmf-vendor .qrzone img { border-radius: 8px; border: 1px solid #E8EBEE; background: #fff; }
.cmf-vendor .vrow .vc {
  font-size: 11.5px; color: #D9640A; display: flex; align-items: center; gap: 5px;
  text-decoration: none; margin-top: 5px;
}
.cmf-vendor .vrow .vc:hover { text-decoration: underline; }
.cmf-vendor .more { font-size: 11.5px; color: #D9640A; text-decoration: none; align-self: flex-start; }
.cmf-vendor .tiroir { display: none; margin-top: 8px; border-top: 1px solid #F1F3F5; padding-top: 8px; }
.cmf-vendor.ouvert .tiroir { display: block; }
.cmf-vendor .vd { display: flex; align-items: center; gap: 10px; padding: 6px 0; }
.cmf-vendor .vd .wa { color: #3E7A2C; display: flex; }
.cmf-vendor .vd .vc { color: #6E767E; display: flex; }
.cmf-vendor .vd .vc:hover { color: #D9640A; }
/* e-mail / telephone directs (parite v1), discrets */
.cmf-vendor .vd .ct { color: #6E767E; display: flex; }
.cmf-vendor .vd .ct:hover { color: #D9640A; }
.cmf-vendor .ctline { display: block; font-size: 11px; color: #6E767E; margin-top: 2px; }
.cmf-vendor .ctline a { color: #6E767E; text-decoration: none; }
.cmf-vendor .ctline a:hover { color: #D9640A; text-decoration: underline; }

/* parc + ref */
.cmf-parc { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: #4B5157; margin-top: 12px; }
.cmf-parc > svg { flex: none; color: #6E767E; margin-top: 1px; }
.cmf-parc i { font-style: normal; color: #98A1A8; }
.cmf-ref { font-size: 11px; color: #98A1A8; margin-top: 10px; font-family: ui-monospace, Menlo, Consolas, monospace; }

/* ---------- faits cles ---------- */
.cmf-factswrap { padding: 20px 28px 0; }
.cmf-facts {
  display: grid; grid-template-columns: repeat(6, 1fr);
  border-top: 1px solid #E8EBEE; border-bottom: 1px solid #E8EBEE;
}
.cmf-fact { padding: 15px 10px; text-align: center; border-right: 1px solid #F1F3F5; min-width: 0; }
.cmf-fact:last-child { border-right: none; }
.cmf-fact .ic { color: #6E767E; display: inline-flex; }
.cmf-fact b { display: block; font-size: 14.5px; font-weight: 650; margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmf-fact span { font-size: 11.5px; color: #98A1A8; }

/* ---------- points forts ---------- */
.cmf-forts { display: flex; gap: 7px; flex-wrap: wrap; padding: 16px 28px 4px; }
.cmf-fort {
  font-size: 12px; font-weight: 600; background: #FCF1E4; color: #8A4B12;
  padding: 5px 13px; border-radius: 99px; display: flex; align-items: center; gap: 6px;
}

/* ---------- sections ---------- */
.cmf-sec { padding: 20px 28px 4px; }
.cmf-sec h2 { font-size: 18px; font-weight: 650; margin: 0 0 12px; color: #1F2328; }
.cmf-sec h2 small { font-size: 13px; color: #98A1A8; font-weight: 400; }

/* ---------- rapport d'etat ---------- */
.cmf-etat { border: 1px solid #E8EBEE; border-radius: 14px; padding: 16px 18px; background: #fff; }
.cmf-etat-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; gap: 10px; flex-wrap: wrap; }
.cmf-etat-hd b { font-size: 15px; font-weight: 650; }
.cmf-etat-hd span { font-size: 11.5px; color: #6E767E; display: flex; align-items: center; gap: 6px; }
.cmf-etat-hd span .ok { color: #3E7A2C; display: flex; }
.cmf-zones { display: flex; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.cmf-zone {
  font-size: 12px; padding: 5px 12px; border-radius: 99px; border: 1px solid #E8EBEE;
  display: flex; gap: 6px; align-items: center; color: #3E7A2C;
}
.cmf-zone.warn { background: #FBF3E2; border-color: #EBD9B4; color: #8F5E08; font-weight: 600; }
.cmf-dmg { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cmf-dmg-card {
  display: flex; gap: 11px; align-items: center; background: #FAFBFC;
  border: 1px solid #F1F3F5; border-radius: 10px; padding: 9px;
  transition: border-color .15s ease;
}
.cmf-dmg-card:hover { border-color: #DFE3E7; }
.cmf-dmg-card img { width: 96px; height: 64px; object-fit: cover; border-radius: 6px; flex: none; cursor: zoom-in; }
.cmf-dmg-card b { display: block; font-size: 13px; font-weight: 600; }
.cmf-dmg-card span { font-size: 11.5px; color: #6E767E; }
.cmf-txtlist { margin-top: 10px; font-size: 12.5px; color: #4B5157; }
.cmf-txtlist li { padding: 3px 0; }
.cmf-nodmg { font-size: 13px; color: #3E7A2C; padding: 4px 0; }
.cmf-eclate { margin-top: 14px; border-top: 1px solid #F1F3F5; padding-top: 12px; }
.cmf-eclate .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-wrap: wrap; gap: 6px; }
.cmf-eclate .hd b { font-size: 13px; font-weight: 650; }
.cmf-eclate .leg { font-size: 11px; color: #6E767E; display: flex; align-items: center; gap: 5px; }
.cmf-eclate .leg i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; margin-left: 7px; }
.cmf-eclate .svgwrap { max-width: 640px; margin: 0 auto; }
.cmf-eclate .svgwrap svg { width: 100%; height: auto; max-height: 300px; }

/* expertise fournisseur (fonction prod restylee) */
.cmf-sec .vehicule_expertise { border: 1px solid #E8EBEE; border-radius: 14px; padding: 16px 18px; background: #fff; }
.cmf-sec .vehicule_expertise h3 { font-size: 15px; font-weight: 650; margin: 0 0 10px; color: #1F2328; }

/* ---------- equipements ---------- */
.cmf-equips { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px; }
.cmf-eq-col .hd {
  display: flex; align-items: center; gap: 7px; font-size: 12px; letter-spacing: .05em;
  text-transform: uppercase; color: #6E767E; padding-bottom: 8px;
  border-bottom: 1px solid #F1F3F5; margin-bottom: 9px;
}
.cmf-eq-col .hd i { color: #E8720C; font-style: normal; font-weight: 700; }
.cmf-eq-col li { font-size: 13px; color: #31363B; padding: 4px 0; display: flex; gap: 8px; align-items: baseline; }
.cmf-eq-col li .ck { color: #E8720C; flex: none; font-weight: 700; }
.cmf-eq-col li.vide { color: #98A1A8; }
.cmf-eq-col li.more button {
  background: none; border: none; padding: 0; cursor: pointer;
  color: #D9640A; font-size: 13px; font-weight: 500;
}
.cmf-eq-col li.more button:hover { text-decoration: underline; }

/* ---------- donnees techniques ---------- */
.cmf-tech { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cmf-tech-card { border: 1px solid #E8EBEE; border-radius: 14px; padding: 14px 18px; background: #fff; }
.cmf-tech-card .cap { font-size: 11.5px; letter-spacing: .05em; text-transform: uppercase; color: #98A1A8; margin-bottom: 6px; }
.cmf-tr { display: flex; justify-content: space-between; gap: 14px; font-size: 13px; padding: 7px 0; border-bottom: 1px solid #F5F6F8; }
.cmf-tr:last-child { border-bottom: none; }
.cmf-tr span { color: #6E767E; flex: none; }
.cmf-tr b { font-weight: 600; text-align: right; color: #1F2328; }
.cmf-tr b.good { color: #3E7A2C; }
.cmf-tr b.bad { color: #B3261E; }
.cmf-tr b.mono { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; font-weight: 500; }
.cmf-tr b a { color: #3E7A2C; text-decoration: underline; }
.cmf-tech-card.infos { margin-top: 16px; }
.cmf-tech-card.infos p { font-size: 13px; color: #31363B; margin: 0; line-height: 1.6; }

/* ---------- vehicules similaires ---------- */
.cmf-simsec { padding-bottom: 26px; }
.cmf-sims { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cmf-sim {
  display: block; border: 1px solid #E8EBEE; border-radius: 14px; overflow: hidden;
  background: #fff; text-decoration: none !important; color: #1F2328;
  transition: box-shadow .18s ease, transform .18s ease;
}
.cmf-sim:hover { box-shadow: 0 10px 26px rgba(24,27,30,.10); transform: translateY(-2px); color: #1F2328; }
.cmf-sim .ph { display: block; aspect-ratio: 3/2; overflow: hidden; background: #F1F3F5; }
.cmf-sim .ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmf-sim .bd { display: block; padding: 12px 14px 14px; }
.cmf-sim .bd b { display: block; font-size: 14px; font-weight: 650; }
.cmf-sim .bd .v { display: block; font-size: 11.5px; color: #6E767E; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmf-sim .bd .facts { display: block; font-size: 11.5px; color: #98A1A8; margin-top: 5px; }
.cmf-sim .bd .p { display: block; font-size: 16px; font-weight: 700; color: #D9640A; margin-top: 7px; }
.cmf-sim .bd .p small { font-size: 11px; color: #6E767E; font-weight: 500; }
.cmf-sim .bd .p.pod { font-size: 13.5px; color: #1F2328; }

/* ---------- barre mobile collante ---------- */
.cmf-sticky {
  display: none; position: sticky; bottom: 0; z-index: 40;
  background: #fff; border-top: 1px solid #E8EBEE;
  padding: 10px 14px 12px; gap: 9px; align-items: center;
}
.cmf-sticky .pp { flex: 1; min-width: 0; }
.cmf-sticky .pp b { display: block; font-size: 16px; color: #D9640A; font-weight: 700; line-height: 1.1; white-space: nowrap; }
.cmf-sticky .pp b.pod { color: #1F2328; font-size: 14px; }
.cmf-sticky .pp span { font-size: 10.5px; color: #6E767E; }
.cmf-sticky .go {
  background: #E8720C; color: #fff; border: none; border-radius: 10px;
  height: 42px; padding: 0 22px; font-size: 14px; font-weight: 600; cursor: pointer;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  /* minmax(0,1fr) + min-width:0 : sans eux la rangee de vignettes (5 x 84px)
     impose sa largeur min-content a la colonne et fait deborder la page */
  .cmf-main { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .cmf-main > * { min-width: 0; }
  .cmf-thumbs { overflow-x: auto; }
  .cmf-facts { grid-template-columns: repeat(3, 1fr); }
  .cmf-fact { border-bottom: 1px solid #F1F3F5; }
  .cmf-fact:nth-child(3n) { border-right: none; }
  .cmf-tech { grid-template-columns: 1fr; }
  .cmf-equips { grid-template-columns: 1fr; gap: 14px; }
  .cmf-sims { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  /* padding droit : la bulle du bot (en bas a droite) ne doit pas couvrir Contacter */
  .cmf-sticky { display: flex; padding-right: 78px; }
}
@media (max-width: 560px) {
  .cmf-crumb, .cmf-main, .cmf-factswrap, .cmf-forts, .cmf-sec { padding-left: 15px; padding-right: 15px; }
  .cmf-crumb > div:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62vw; }
  .cmf-buy { padding: 16px; }
  .cmf-buy h1 { font-size: 19px; }
  .cmf-price b { font-size: 25px; }
  .cmf-thumbs { overflow-x: auto; }
  .cmf-thumbs .th { flex: 0 0 84px; }
  .cmf-dmg { grid-template-columns: 1fr; }
  .cmf-sims { grid-template-columns: 1fr; }
  .cmf-facts { grid-template-columns: repeat(2, 1fr); }
  .cmf-fact:nth-child(3n) { border-right: 1px solid #F1F3F5; }
  .cmf-fact:nth-child(2n) { border-right: none; }
}

@media print {
  .cmv2-chrome, .cmv2-footer, .cmf-sticky, .cmf-crumb .acts, .cmf-cta, .cmf-cta2, .cmf-dl { display: none !important; }
}

@media (prefers-reduced-motion: reduce) {
  .cmf-fiche *, .cmf-lightbox { transition: none !important; }
}