/* AA listing — grille & cartes véhicule (extrait du template parc) */
.vgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
@media(max-width:1200px){.vgrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){.vgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.vgrid{grid-template-columns:1fr}}
.vcard{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;transition:transform .4s var(--ease),box-shadow .4s var(--ease);cursor:pointer;display:flex;flex-direction:column}
.vcard:hover{transform:translateY(-6px);box-shadow:0 30px 50px -28px rgba(20,16,10,.35)}
.vcard .media{position:relative;aspect-ratio:16/11;overflow:hidden;background:#eee}
.vcard .media img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.vcard:hover .media img{transform:scale(1.07)}
.badge{position:absolute;top:12px;left:12px;z-index:3;background:#0E1014;color:#fff;font-size:11px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;padding:6px 11px;border-radius:8px;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.badge.new,.badge.nouveaute{background:#1b8f4d}
.badge.coupdecoeur{background:#e0397b}
.badge.bonplan{background:#FF9B21}
.badge.baisse{background:#0ea5e9}
.badge.faiblekm{background:#0d9488}
.fav{position:absolute;top:10px;right:10px;z-index:3;width:38px;height:38px;border-radius:50%;border:0;cursor:pointer;background:rgba(255,255,255,.92);font-size:17px;display:grid;place-items:center;transition:.25s;box-shadow:0 4px 12px -4px rgba(0,0,0,.4)}
.fav:hover{transform:scale(1.12)}.fav.on{background:var(--red);color:#fff}
.vbrand{position:absolute;bottom:12px;right:12px;z-index:3;width:42px;height:42px;border-radius:11px;background:#fff;padding:6px;box-shadow:0 6px 16px -6px rgba(0,0,0,.4)}.vbrand img{width:100%;height:100%;object-fit:contain}
.venergy{position:absolute;right:16px;bottom:62px;z-index:3;width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;background:linear-gradient(145deg,#34d399 0%,#059669 100%);box-shadow:0 5px 12px -3px rgba(5,150,105,.6),inset 0 1px 1.5px rgba(255,255,255,.5)}
.mediatags{position:absolute;bottom:12px;left:12px;z-index:3;display:flex;gap:6px;flex-wrap:wrap;pointer-events:none}
.mtag{display:inline-flex;align-items:center;gap:5px;background:rgba(14,16,20,.82);color:#fff;font-size:11px;font-weight:800;letter-spacing:.03em;padding:6px 10px;border-radius:100px;backdrop-filter:blur(4px);box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}
.mtag i{font-size:13px}
.mtag-360{background:var(--red);animation:mtag360 2.6s ease-in-out infinite}
.mtag-360 i{animation:mtag360spin 2.6s ease-in-out infinite;transform-origin:center}
@keyframes mtag360{0%,55%,100%{box-shadow:0 4px 12px -4px rgba(0,0,0,.5)}70%{box-shadow:0 0 0 5px rgba(214,0,110,.3),0 6px 18px -4px rgba(214,0,110,.6);transform:scale(1.07)}85%{transform:scale(1)}}
@keyframes mtag360spin{0%,55%{transform:rotate(0)}80%,100%{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.mtag-360,.mtag-360 i{animation:none}}
.vcard .media .ribbon{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow:hidden;pointer-events:none}
/* flex:none est indispensable : sans lui, flex-shrink ramène le width:170% à la
   largeur de la carte (mesuré 301px au lieu de 510px), et une fois le bandeau
   tourné à -10° ses coins rentrent dans l'image au lieu d'en sortir. Le
   débordement est rattrapé par l'overflow:hidden du conteneur, ce qui donne une
   bande vraiment coupée d'un bord à l'autre. */
.vcard .media .ribbon span{position:relative;flex:none;width:170%;text-align:center;padding:7px 0;font-family:'Space Grotesk',sans-serif;font-weight:800;font-size:15px;letter-spacing:.07em;text-transform:uppercase;color:#fff;transform:rotate(-10deg);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);box-shadow:0 10px 24px -12px rgba(0,0,0,.5);overflow:hidden}
.ribbon.offre span{background:rgba(246,133,27,.66);border-top:1px solid rgba(255,255,255,.3);border-bottom:1px solid rgba(255,255,255,.18)}
.ribbon.vendu span{background:rgba(214,0,110,.7);border-top:1px solid rgba(255,255,255,.28);border-bottom:1px solid rgba(255,255,255,.14)}
.vcard .media .ribbon span::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-20deg);animation:ribShine 3.6s ease-in-out infinite}
@keyframes ribShine{0%{left:-60%}55%,100%{left:160%}}
@media(prefers-reduced-motion:reduce){.vcard .media .ribbon span::after{display:none}}
.vcard.is-ad{position:relative;min-height:400px}
.vcard.is-ad img{width:100%;height:100%;flex:1;min-height:0;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.vcard.is-ad:hover img{transform:scale(1.05)}
.vbody{padding:18px;display:flex;flex-direction:column;flex:1}
.vtitle{font-family:'Space Grotesk';font-weight:700;font-size:17px}
.vsub{color:var(--ink-soft);font-size:13.5px;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vspecs{display:flex;gap:8px;flex-wrap:wrap;margin:13px 0}
.vspecs span{font-size:12px;font-weight:600;color:#444;background:var(--cream);border:1px solid var(--line);padding:6px 10px;border-radius:8px}
.vprice{margin-top:auto;display:flex;align-items:baseline;justify-content:space-between;gap:8px;border-top:1px solid var(--line);padding-top:13px}
.vprice .p{font-family:'Space Grotesk';font-weight:700;font-size:23px;white-space:nowrap}
.vprice .m{font-size:12px;color:var(--ink-soft);white-space:nowrap;text-align:right}.vprice .m b{color:var(--red);font-size:13px}
.vprice .old{display:block;color:#9aa0aa;text-decoration:line-through;font-size:13px;font-weight:600;line-height:1;margin-bottom:2px}
.vprice .pro{font-family:'Space Grotesk';font-weight:700;font-size:23px;color:var(--red);white-space:nowrap;line-height:1}
.vprice .pro small{font-size:12px;color:var(--ink-soft);font-weight:600}
.protag{display:inline-block;background:rgba(214,0,110,.10);color:var(--red);font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:2px 6px;border-radius:6px;margin-bottom:3px}
.empty{text-align:center;padding:60px 20px;color:var(--ink-soft)}
.empty i{font-size:42px;color:var(--line)}
/* pleine largeur : bleed 100vw, contenu aligné sur la colonne (≤1320px) en desktop, gutter 12px en mobile */
.aa-filterbar{position:sticky;top:var(--aa-header-h,90px);z-index:40;display:flex;flex-direction:column;align-items:stretch;gap:10px;background:var(--paper,#fff);border:0;border-top:1px solid var(--line,#ece6dc);border-bottom:1px solid var(--line,#ece6dc);border-radius:0;margin:0 calc(50% - 50vw) 10px;padding:10px max(16px,calc(50vw - 636px));transition:box-shadow .25s}
.aa-filterbar.is-stuck{box-shadow:0 12px 26px -18px rgba(0,0,0,.4)}
.aa-fb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.aa-fb-sort{display:flex;flex-wrap:wrap;gap:6px}
.aa-sort-pill{background:var(--paper,#fff);border:1.5px solid var(--line,#ece6dc);border-radius:100px;padding:8px 14px;font:700 13px 'Manrope',sans-serif;cursor:pointer;white-space:nowrap;color:var(--ink,#171717);transition:background .15s,border-color .15s,color .15s}
.aa-sort-pill:hover{border-color:var(--ink,#171717)}
.aa-sort-pill.is-active{background:var(--red,#D6006E);border-color:var(--red,#D6006E);color:#fff}
.aa-fb-search{position:relative;flex:1 1 220px;min-width:180px}
.aa-fb-search input{width:100%;background:var(--cream,#FDFAF5);border:1px solid var(--line,#ece6dc);border-radius:100px;padding:10px 14px 10px 38px;font:600 14px 'Manrope',sans-serif;outline:none}
.aa-fb-search input:focus{border-color:var(--red,#D6006E)}
.aa-fb-search>i{position:absolute;left:13px;top:50%;transform:translateY(-50%);color:var(--ink-soft,#5b5e63)}
.aa-fb-drop{display:inline-flex;align-items:center;gap:6px;background:var(--paper,#fff);border:1.5px solid var(--line,#ece6dc);border-radius:100px;padding:9px 14px;font:700 14px 'Manrope',sans-serif;cursor:pointer;white-space:nowrap;color:var(--ink,#171717)}
.aa-fb-drop:hover{border-color:var(--ink,#171717)}
.aa-fb-drop[aria-expanded=true]{border-color:var(--red,#D6006E);color:var(--red,#D6006E)}
.aa-fb-drop .ph-caret-down{font-size:13px;opacity:.7}
.aa-fb-badge{background:var(--red,#D6006E);color:#fff;font-size:11px;font-weight:800;border-radius:100px;padding:1px 7px}
/* Le bloc budget absorbe la largeur libre de la rangée. Depuis le retrait des
   filtres Carrosserie et Année, il restait ~270px de vide avant « Réinitialiser »
   (collé à droite par margin-left:auto). Le curseur en profite : 120px, c'était
   étriqué pour choisir un prix. Sous 900px la rangée devient une bande qui
   défile et .aa-fb-row-filters>*{flex:0 0 auto} reprend la main. */
.aa-fb-budget{display:inline-flex;align-items:center;gap:10px;font:700 13px 'Manrope',sans-serif;white-space:nowrap;flex:1 1 240px;min-width:0}
.aa-fb-budget input[type=range]{flex:1 1 auto;width:auto;min-width:110px;accent-color:var(--red,#D6006E)}
.aa-fb-budget #budgetV{font-family:'Space Grotesk',sans-serif;color:var(--red,#D6006E)}
.aa-fb-reset{margin-left:auto;display:inline-flex;align-items:center;gap:6px;background:none;border:0;color:var(--red,#D6006E);font:700 13px 'Manrope',sans-serif;cursor:pointer}
/* Raccourci « Nos utilitaires » — CTA voyant au bout de la barre de filtres.
   Il pointe vers ?bt=Utilitaire, que aa-listing.js traduit en cochant la case
   correspondante du panneau #fBody (dont le bouton a été retiré de la barre). */
.aa-fb-util{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:7px;
  background:var(--red,#D6006E);color:#fff;border:0;border-radius:100px;padding:9px 16px;
  font:800 13.5px 'Manrope',sans-serif;white-space:nowrap;text-decoration:none;cursor:pointer;
  box-shadow:0 6px 18px -8px rgba(214,0,110,.75);
  transition:transform .25s cubic-bezier(.22,1,.36,1),box-shadow .25s,background .25s;
  animation:utilPulse 2.8s ease-in-out infinite}
.aa-fb-util:hover{background:#A8005A;transform:translateY(-2px);box-shadow:0 12px 26px -10px rgba(214,0,110,.85);animation-play-state:paused}
.aa-fb-util:active{transform:translateY(0) scale(.97)}
.aa-fb-util i{font-size:16px;line-height:0}
.aa-fb-util-arr{transition:transform .25s cubic-bezier(.22,1,.36,1)}
.aa-fb-util:hover .aa-fb-util-arr{transform:translateX(3px)}
/* balayage lumineux — même idiome que le ruban « Vendu » des cartes */
.aa-fb-util-shine{position:absolute;top:0;left:-60%;width:40%;height:100%;pointer-events:none;
  background:linear-gradient(120deg,transparent,rgba(255,255,255,.45),transparent);
  transform:skewX(-20deg);animation:utilShine 3.6s ease-in-out infinite}
@keyframes utilShine{0%{left:-60%}55%,100%{left:160%}}
@keyframes utilPulse{0%,100%{box-shadow:0 6px 18px -8px rgba(214,0,110,.75)}
  50%{box-shadow:0 6px 22px -6px rgba(214,0,110,.95)}}
/* filtre actif : le bouton devient l'indicateur, puisque le badge du panneau
   Carrosserie n'est plus visible nulle part. */
.aa-fb-util.is-on{background:#0E1014;box-shadow:0 6px 18px -8px rgba(14,16,20,.8);animation:none}
.aa-fb-util.is-on .aa-fb-util-shine{display:none}
@media(prefers-reduced-motion:reduce){
  .aa-fb-util{animation:none}
  .aa-fb-util-shine{display:none}
  .aa-fb-util,.aa-fb-util-arr{transition:none}
}
@media(max-width:640px){.aa-fb-util{padding:8px 13px;font-size:12.5px}}

.aa-fb-panel{position:absolute;z-index:60;background:var(--paper,#fff);border:1px solid var(--line,#ece6dc);border-radius:14px;box-shadow:0 20px 40px -20px rgba(0,0,0,.35);padding:12px;min-width:220px;max-height:340px;overflow:auto;display:grid;gap:4px}
.aa-fb-panel[hidden]{display:none} /* sinon .aa-fb-panel(display:grid) écrase [hidden] (même spécificité) → panneaux jamais masqués */
.aa-fb-panel .chk{display:flex;align-items:center;gap:9px;font:600 13.5px 'Manrope',sans-serif;padding:6px 8px;border-radius:9px;cursor:pointer}
.aa-fb-panel .chk:hover{background:var(--cream,#FDFAF5)}
.aa-fb-panel .chk input{accent-color:var(--red,#D6006E);width:16px;height:16px}
.aa-fb-panel .chk .ct{margin-left:auto;font-size:12px;color:var(--ink-soft,#5b5e63);background:var(--cream,#FDFAF5);border:1px solid var(--line,#ece6dc);border-radius:20px;padding:1px 8px}
/* Marque sur deux colonnes en desktop : une vingtaine de marques sur une seule
   colonne obligeait à faire défiler un panneau de 340px pour une liste que l'œil
   peut embrasser d'un coup. Le panneau s'élargit d'autant — aa-listing.js le
   recale vers la gauche s'il déborde de la barre. */
@media(min-width:901px){
  #fMake{grid-template-columns:repeat(2,minmax(190px,1fr));gap:4px 12px;min-width:450px;max-height:420px}
}
.aa-fb-meta{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:8px 0 14px}
.aa-fb-meta .cnt{font-weight:700}.aa-fb-meta .cnt b{font-family:'Space Grotesk',sans-serif;color:var(--red,#D6006E)}
.aa-chips{display:flex;flex-wrap:wrap;gap:6px}
.aa-chip{display:inline-flex;align-items:center;gap:6px;background:var(--cream,#FDFAF5);border:1px solid var(--line,#ece6dc);border-radius:100px;padding:4px 10px;font:600 12.5px 'Manrope',sans-serif}
.aa-chip button{background:none;border:0;cursor:pointer;color:var(--ink-soft,#5b5e63);font-size:14px;line-height:1;padding:0}
.aa-fb-sortbtn{display:none;align-items:center;gap:6px;background:var(--paper,#fff);border:1.5px solid var(--line,#ece6dc);border-radius:100px;padding:9px 14px;font:700 13px 'Manrope',sans-serif;cursor:pointer;color:var(--ink,#171717);white-space:nowrap}
.aa-fb-sortbtn[aria-expanded=true]{border-color:var(--red,#D6006E);color:var(--red,#D6006E)}
@media(max-width:900px){
  /* Tri masqué derrière le bouton « Trier » */
  .aa-fb-sortbtn{display:inline-flex}
  .aa-fb-sort{display:none;width:100%;margin-top:2px}
  .aa-filterbar.aa-sort-open .aa-fb-sort{display:flex}
  /* Filtres toujours visibles mais compacts : une ligne défilable horizontalement */
  .aa-fb-row-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:2px}
  .aa-fb-row-filters::-webkit-scrollbar{display:none}
  .aa-fb-row-filters>*{flex:0 0 auto}
  .aa-fb-reset{margin-left:2px}

  /* ---- Feuille plein écran ----------------------------------------------
     Un panneau ouvert occupe tout l'écran, avec Annuler / Valider en pied.
     Conditionné à .aa-sheet-open, que aa-listing.js ne pose QUE s'il a trouvé
     l'en-tête et le pied dans le DOM. Sans cette garde, une page encore servie
     en cache avec l'ancien HTML (pages marque, archives) ouvrirait un panneau
     plein écran sans le moindre bouton pour en sortir.
     Les décalages inline top/left/right/width posés par aa-listing.js pour le
     mode desktop sont remis à vide à l'ouverture : en inline ils battraient ces
     règles. */
  .aa-sheet-open .aa-fb-panel{position:fixed;inset:0;width:auto;min-width:0;max-height:none;
    border:0;border-radius:0;box-shadow:none;align-content:start;gap:0;
    padding:56px 14px calc(80px + env(safe-area-inset-bottom,0px));
    overscroll-behavior:contain}
  .aa-sheet-open .aa-fb-panel .chk{padding:14px 6px;font-size:15px;border-radius:0;border-bottom:1px solid var(--line,#ece6dc)}
  .aa-sheet-open .aa-fb-panel .chk input{width:20px;height:20px}
  /* z-index:61 — le panneau hérite du 60 de la règle de base et son fond est
     opaque : sans ça, en-tête et pied passent DESSOUS et disparaissent. */
  .aa-fb-sheet-head{z-index:61;position:fixed;top:0;left:0;right:0;height:56px;display:flex;align-items:center;
    justify-content:space-between;gap:10px;padding:0 6px 0 14px;background:var(--paper,#fff);
    border-bottom:1px solid var(--line,#ece6dc)}
  .aa-fb-sheet-title{font:800 17px 'Space Grotesk',sans-serif}
  .aa-fb-sheet-close{background:none;border:0;padding:10px;font-size:24px;line-height:0;color:var(--ink,#171717);cursor:pointer}
  .aa-fb-sheet-foot{z-index:61;position:fixed;bottom:0;left:0;right:0;display:flex;align-items:center;gap:12px;
    padding:12px 14px calc(12px + env(safe-area-inset-bottom,0px));background:var(--paper,#fff);
    border-top:1px solid var(--line,#ece6dc);box-shadow:0 -10px 26px -20px rgba(0,0,0,.6)}
  .aa-fb-cancel{background:none;border:0;padding:13px 10px;font:700 15px 'Manrope',sans-serif;
    text-decoration:underline;color:var(--ink,#171717);cursor:pointer}
  .aa-fb-ok{margin-left:auto;flex:1 1 auto;max-width:64%;background:#0E1014;color:#fff;border:0;border-radius:12px;
    padding:15px 18px;font:800 15.5px 'Manrope',sans-serif;cursor:pointer}
  .aa-fb-ok:active{transform:scale(.98)}
  /* Même piège que .aa-fb-panel[hidden] plus haut : display:flex à spécificité
     égale écraserait [hidden], et le pied resterait collé en bas du site. */
  .aa-fb-panel[hidden],.aa-fb-sheet-head[hidden],.aa-fb-sheet-foot[hidden]{display:none}
}
/* La barre est en position:sticky avec z-index:40 — elle forme donc un contexte
   d'empilement, et le z-index de ses enfants ne s'en échappe pas : la feuille
   passerait SOUS le header (70), les pastilles flottantes (60) et le tiroir de
   menu (120). C'est la barre elle-même qu'on fait monter, le temps de la feuille. */
.aa-filterbar.aa-sheet-open{z-index:150}
html.aa-sheet-lock,html.aa-sheet-lock body{overflow:hidden}