/* catalog.css — grille de résultats et carte véhicule : vignette, tags, prix, mode liste, accordéon. */
/* grid */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(266px,1fr));gap:16px}
.grid.list{grid-template-columns:1fr}
.vc{background:var(--card);border:1px solid var(--line);display:flex;flex-direction:column;transition:box-shadow .15s;cursor:pointer}
.vc:hover{box-shadow:0 6px 20px rgba(20,30,45,.10)}
.vc .ph{position:relative;aspect-ratio:4/3;background:var(--soft);overflow:hidden}
.vc .ph img{width:100%;height:100%;object-fit:cover;display:block}
.ph.noimg{display:flex;align-items:center;justify-content:center}
.ph.noimg img{display:none}
/* #a8a8ac sur --soft ne donnait que 2,01:1 — illisible, et c'est précisément le message
   qu'on lit quand on cherche pourquoi il n'y a pas de photo. --grey donne 5,56:1 et évite
   d'introduire une couleur de plus. */
.ph.noimg::after{content:'Photo à venir';font-family:"Barlow Condensed";text-transform:uppercase;letter-spacing:.12em;font-size:14px;color:var(--grey);font-weight:600}
.tags{position:absolute;top:8px;left:8px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.tag{font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;color:var(--card)}
.tag.src{background:rgba(28,40,55,.82)}
.tag.energie{background:var(--blue2)}
.tag.dispo-parc{background:var(--ok)}
.tag.dispo-arrivage{background:var(--warn)}
.fav{position:absolute;top:8px;right:8px;width:32px;height:32px;background:rgba(255,255,255,.92);border:1px solid var(--line);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:15px;color:var(--grey)}
.fav.on{color:var(--danger);border-color:var(--danger)}
.vc .body{padding:12px 13px 14px;display:flex;flex-direction:column;gap:7px;flex:1}
.vc .mm{font-family:"Barlow Condensed";font-size:19px;font-weight:700;line-height:1}
.vc .fin{font-size:12.5px;color:var(--grey);min-height:17px}
.spec{font-size:12px;color:var(--deep);display:flex;flex-wrap:wrap;gap:4px 10px;font-weight:500}
.price{margin-top:auto;display:flex;align-items:flex-end;justify-content:space-between;gap:8px;padding-top:8px;border-top:1px solid var(--soft)}
.price .ht{font-family:"Barlow Condensed";font-size:24px;font-weight:700;line-height:.9}
.price .ttc{font-size:11px;color:var(--grey)}
.pricemask{display:none;font-family:"Barlow Condensed";font-size:16px;font-weight:700;color:var(--blue);letter-spacing:.04em}
.equip{font-size:13px;color:var(--deep);line-height:1.6;background:var(--soft);padding:10px 12px}
/* fiche : bascule "Voir la fiche" / "Voir les options" + presentation structuree des options */
.dtabs{display:flex;margin:2px 0 14px;border:1px solid var(--line)}
.dtab{flex:1;background:var(--card);border:none;border-right:1px solid var(--line);padding:10px;font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--deep);cursor:pointer}
.dtab:last-child{border-right:none}
.dtab.on{background:var(--deep);color:var(--card)}
.optfr{background:var(--warn-bg);border:1px solid var(--warn);border-left-width:4px;padding:12px 14px;margin-bottom:16px}
/* --warn en texte sur le crème du bloc ne donnait que 4,26:1. --warn-ink : 5,52:1. */
.optfr-h{font-family:"Barlow Condensed";font-weight:700;font-size:17px;color:var(--warn-ink);text-transform:uppercase;letter-spacing:.03em;margin-bottom:5px}
.optfr-sub{font-size:13.5px;margin-bottom:10px}
.optfr-sub2{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--grey);font-weight:700;margin-bottom:4px}
.optlist{list-style:none;margin:0;padding:0}
.optlist li{position:relative;padding:6px 0 6px 16px;font-size:13.5px;border-bottom:1px solid var(--soft)}
.optlist li:last-child{border-bottom:none}
.optlist li:before{content:"";position:absolute;left:0;top:11px;width:6px;height:6px;background:var(--warn);border-radius:50%}
.optlist.eq{columns:2;column-gap:26px}
.optlist.eq li:before{background:var(--blue2)}
@media(max-width:600px){.optlist.eq{columns:1}}
.optcat{font-family:"Barlow Condensed";font-weight:700;font-size:14.5px;color:var(--deep);text-transform:uppercase;letter-spacing:.03em;margin:18px 0 6px;padding-bottom:5px;border-bottom:2px solid var(--soft);display:flex;align-items:baseline;gap:8px}
.optcat:first-child{margin-top:6px}
.optcat-n{font-family:"Barlow";font-size:11px;font-weight:600;color:var(--grey)}
body.visitor .pricewrap{display:none}
body.visitor .pricemask{display:block}
.chip.on{background:var(--deep);color:var(--card);border-color:var(--deep)}
.tel{margin-left:auto;font-family:"Barlow Condensed";font-weight:700;font-size:18px;color:var(--deep);white-space:nowrap;letter-spacing:.03em}
.acts{display:flex;gap:6px;padding:0 13px 13px}
.acts button{flex:1;border:1px solid var(--line);padding:8px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--deep)}
.acts button.prim{background:var(--blue2);color:var(--card);border-color:var(--blue2)}
.acts button.on{background:var(--deep);color:var(--card);border-color:var(--deep)}
/* list mode row */
.grid.list .vc{flex-direction:row;flex-wrap:wrap}
.grid.list .ph{width:230px;aspect-ratio:auto;flex:0 0 230px}
.grid.list .body{flex:1}
.grid.list .acts{flex-direction:column;justify-content:center;width:150px;padding:13px}
/* accordeon "Caracteristiques" — visible uniquement en vue Liste */
.vctog{display:none}
.grid.list .vctog{display:inline-flex;align-items:center;gap:5px;align-self:flex-start;margin-top:4px;background:none;border:none;padding:2px 0;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer}
.vctog .chev{font-size:14px;line-height:1;transition:transform .18s}
.vc.open .vctog .chev{transform:rotate(180deg)}
.vcx{display:none}
.grid.list .vc.open .vcx{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:0 30px;width:100%;flex-basis:100%;background:var(--soft);border-top:1px solid var(--line);padding:6px 16px 12px}
.vcx .kv{font-size:13px;padding:7px 0;border-bottom:1px solid rgba(0,0,0,.06)}
/* load more */
.more{display:block;margin:26px auto 0;border:1px solid var(--ink);background:var(--card);padding:12px 26px;font-family:"Barlow Condensed";text-transform:uppercase;letter-spacing:.06em;font-weight:700;font-size:15px}
/* Les états vides et d'erreur portent désormais une action (réinitialiser, réessayer, parcourir)
   au lieu d'être des impasses. D'où la mise en page verticale plutôt qu'une simple ligne. */
.empty{padding:56px 24px;text-align:center;color:var(--grey);display:flex;flex-direction:column;
  align-items:center;gap:9px}
.empty p{margin:0;font-size:15px;color:var(--ink);font-weight:600}
.empty .empty-sub{font-size:13px;color:var(--grey);font-weight:400;max-width:42ch}
.empty .more{margin-top:7px}