/* ==========================================================
   CATALOGUE VÉHICULES — habillage premium + tilt 3D
   Additif : ne touche aucune règle de style.css. Cible les
   classes existantes (.filtres, .grille, .vcarte) en usant de
   la cascade (chargé après style.css) plutôt qu'en les renommant,
   pour ne rien casser sur les pages qui les réutilisent déjà.
   ========================================================== */

:root{
  --cat-bronze:#C08A3E; --cat-bronze-lt:#E4B876; --cat-ink:#0B1526; --cat-navy2:#1B3357;
}

/* --- En-tête de page --- */
.cat-entete{ max-width:720px; margin:6px 0 26px; }
.cat-eyebrow{
  display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700;
  color:var(--cat-bronze); text-transform:uppercase; letter-spacing:.05em; margin-bottom:8px;
}
.cat-entete .titre-page{ font-size:clamp(1.5rem,3.4vw,2.1rem); line-height:1.2; margin-bottom:8px; }
.cat-entete .sous-titre{ color:var(--grey); font-size:15px; line-height:1.55; }

.cat-resultats{ font-size:13.5px; color:var(--grey); display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; margin:18px 0 14px; }
.cat-resultats strong{ color:var(--cat-ink); font-family:'Space Mono', monospace; }
.cat-resultats .cat-page{ color:#9aa2b1; }

/* État vide — réutilisé sur catalogue, favoris, alertes, notifications, vendeurs */
.etat-vide{
  text-align:center; padding:60px 20px; background:var(--surface); border:1px dashed var(--bord); border-radius:16px; margin-top:10px;
}
.etat-vide i{ font-size:32px; color:#c7cdd8; }
[data-theme="dark"] .etat-vide i{ color:#3a3a3a; }
.etat-vide p{ color:var(--grey); margin:12px 0 18px; }
.etat-vide .btn, .etat-vide a.btn{ margin:0 4px; }

.pager{ display:flex; gap:6px; justify-content:center; margin-top:32px; }
.pager a, .pager span{
  min-width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:9px; font-size:13.5px; text-decoration:none; color:var(--cat-ink);
}
.pager a{ border:1px solid var(--bord); background:#fff; }
.pager a:hover{ border-color:var(--cat-bronze); color:var(--cat-bronze); }
.pager span.actif{ background:var(--cat-ink); color:#fff; font-weight:700; }

/* --- Barre de filtres : pilule, sobre --- */
.filtres{
  background:#fff; border:1px solid var(--bord); border-radius:18px;
  padding:20px 22px; box-shadow:0 10px 30px rgba(11,21,38,.05);
  position:sticky; top:76px; z-index:15;
}
.filtres label{
  font-size:11px; font-weight:700; color:var(--grey); text-transform:uppercase; letter-spacing:.04em;
}
.filtres select, .filtres input[type="text"], .filtres input[type="number"]{
  border-radius:10px; border-color:var(--bord); background:#fbfcfe;
}
.filtres select:focus, .filtres input:focus{ border-color:var(--cat-bronze); outline:none; }
.filtres button.btn{ background:var(--cat-ink); border-color:var(--cat-ink); }
.filtres button.btn:hover{ background:var(--cat-navy2); }
/* --- Bouton déclencheur + puces actives (mobile ET desktop) --- */
.btn-filtres-mobile{ display:none; }
.puces-actives{ display:flex; flex-wrap:wrap; gap:8px; margin:14px 0; }
.puce{
  display:inline-flex; align-items:center; gap:6px; background:var(--surface); border:1px solid var(--bord);
  border-radius:999px; padding:6px 12px; font-size:12.5px; color:var(--cat-ink); text-decoration:none;
}
.puce:hover{ border-color:var(--cat-bronze); color:var(--cat-bronze); text-decoration:none; }
.puce i{ font-size:11px; }
.puce-tout{ color:var(--grey); border-style:dashed; }
.filtres-sheet-tete, .filtres-backdrop, .filtres-appliquer{ display:none; }

@media(max-width:780px){
    .btn-filtres-mobile{
        display:flex; align-items:center; gap:8px; width:100%; justify-content:center;
        padding:13px; border:1px solid var(--bord); border-radius:12px; background:var(--surface);
        font-weight:600; font-size:14px; color:var(--cat-ink); margin-bottom:4px;
    }
    .badge-nb{ background:var(--cat-bronze); color:#fff; font-size:11px; font-weight:700; border-radius:999px; padding:1px 7px; }

    .filtres-backdrop{
        display:block; position:fixed; inset:0; background:rgba(11,21,38,.5); z-index:190;
        opacity:0; pointer-events:none; transition:opacity .25s ease;
    }
    .filtres-backdrop.ouvert{ opacity:1; pointer-events:auto; }

    .filtres{
        position:fixed; left:0; right:0; bottom:0; top:auto; z-index:200;
        max-height:85vh; overflow-y:auto; border-radius:18px 18px 0 0;
        box-shadow:0 -10px 40px rgba(11,21,38,.25);
        transform:translateY(100%); transition:transform .3s cubic-bezier(.2,.8,.3,1);
        display:flex; flex-direction:column; gap:14px;
    }
    .filtres.ouvert{ transform:translateY(0); }

    .filtres-sheet-tete{
        display:flex; align-items:center; justify-content:space-between; position:sticky; top:0;
        background:var(--surface); padding-bottom:8px; border-bottom:1px solid var(--bord); z-index:1;
    }
    .filtres-sheet-tete button{ border:none; background:#F1F3F7; width:30px; height:30px; border-radius:50%; }
    [data-theme="dark"] .filtres-sheet-tete button{ background:#232323; color:var(--txt); }

    .filtres-appliquer{
        display:block; position:sticky; bottom:0; background:var(--surface); padding-top:10px;
        margin-top:auto; border-top:1px solid var(--bord);
    }
}

/* --- Grille : un peu plus d'air, cartes plus grandes --- */
.grille{ grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:26px; perspective:1400px; }

/* --- Carte véhicule : refonte visuelle --- */
.vcarte{
  border-radius:16px; border-color:var(--bord);
  transform-style:preserve-3d; will-change:transform;
  transition:box-shadow .3s ease;
}
.vcarte:hover{ box-shadow:0 30px 60px -18px rgba(11,21,38,.28); }

.vcarte .media{ height:196px; position:relative; overflow:hidden; background:linear-gradient(100deg,#EEF0F3 8%,#F6F7F9 18%,#EEF0F3 33%); background-size:200% 100%; animation:skelShimmer 1.4s ease-in-out infinite; }
.vcarte .media:has(img.chargee){ animation:none; background:none; }
@keyframes skelShimmer{ from{ background-position:200% 0; } to{ background-position:-200% 0; } }
[data-theme="dark"] .vcarte .media{ background-image:linear-gradient(100deg,#1a1a1a 8%,#232323 18%,#1a1a1a 33%); }

.img-skel{ opacity:0; transition:opacity .35s ease; }
.img-skel.chargee{ opacity:1; }
.vcarte .media img{ transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.vcarte:hover .media img{ transform:scale(1.06); }
.vcarte .media::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 55%, rgba(11,21,38,.45) 100%);
  pointer-events:none;
}

.vcarte .badge-verif{ background:#0A7D4D; box-shadow:0 3px 10px rgba(0,0,0,.18); }
.vcarte .badge-cat{ background:rgba(255,255,255,.95); color:var(--cat-ink); }
.vcarte .badge-certifie{
  position:absolute; top:10px; right:10px; z-index:2;
  background:linear-gradient(135deg,#F6E0AC,#C08A3E); color:#12212F;
  font-size:11px; font-weight:800; padding:5px 10px; border-radius:99px;
  box-shadow:0 4px 12px rgba(192,138,62,.4);
}

.vcarte-corps{ padding:18px 18px 16px; }
.vcarte h3{ font-size:16.5px; }

/* Ligne de prix -> mini-ticket, cohérent avec le hero */
.vcarte .lignes-prix{
  display:flex; justify-content:space-between; font-size:13px; color:var(--grey);
  padding:5px 0; border-top:1px dashed var(--bord);
}
.vcarte .lignes-prix:first-of-type{ border-top:none; padding-top:0; }
.vcarte .lignes-prix b{ font-family:'Space Mono', monospace; color:var(--cat-ink); font-weight:700; }
.vcarte .cout-total{
  display:flex; justify-content:space-between; align-items:baseline;
  border-top:1px solid var(--bord); margin-top:6px; padding-top:8px;
}
.vcarte .cout-total b{ font-family:'Space Mono', monospace; color:var(--cat-bronze); font-size:16px; }
.vcarte .cout-total small{ font-size:10.5px; color:var(--grey); text-transform:uppercase; letter-spacing:.03em; }

.vcarte-actions .btn{ border-radius:9px; }
.vcarte-actions .btn.btn-bleu{ background:var(--cat-ink); border-color:var(--cat-ink); }
.vcarte-actions .btn.btn-bleu:hover{ background:var(--cat-navy2); }

/* --- Reflet tilt (posé par catalogue-vehicules.js) --- */
.vcarte .vc-glare{
  position:absolute; inset:0; z-index:3; pointer-events:none; opacity:0; border-radius:inherit;
  background:radial-gradient(circle at var(--gx,50%) var(--gy,50%), rgba(255,255,255,.35), transparent 45%);
  mix-blend-mode:overlay; transition:opacity .25s ease;
}
.vcarte.vc-tilting .vc-glare{ opacity:1; }

@media(hover:none){
  .vcarte{ transform:none !important; }
}
@media(prefers-reduced-motion: reduce){
  .vcarte, .vcarte .media img{ transition:none; }
}