/*
 * Améliorations du tiroir de filtres (île React), validées par JP le
 * 2026-09-02. Chargée APRÈS les feuilles héritées du module : les
 * surcharges ci-dessous gagnent la cascade à spécificité égale.
 */

/* Mobile : le repli/dépli du panneau s'anime au lieu de sauter.
   L'ancien CSS clampe .collapsedFilters à height:54px !important; on bascule
   sur max-height pour rendre la transition possible, sans changer l'état
   visuel de départ ni d'arrivée. */
@media screen and (max-width: 767px) {
  #vehicleInventory .filtersColumn {
    height: auto !important;
    max-height: 100dvh;
    overflow: hidden;
    overflow-y: auto;
    transition: max-height 0.35s ease;
  }
  #vehicleInventory .filtersColumn.collapsedFilters {
    max-height: 54px;
    overflow: hidden;
  }
}

/* Le .vehicles hérité déborde de ~11 px à droite (margin: 0 -1%) et fait
   scroller la page horizontalement, sur l'ANCIENNE page aussi (défaut
   préexistant, mesuré identique). Clip : rien d'utile ne vit dans cette
   marge, et clip ne crée pas de conteneur de défilement (le sticky de la
   colonne filtres survit, contrairement à overflow hidden). */
#vehicleInventory {
  overflow-x: clip;
}
/* #vehicleInventory calcule display:inline sur certains gabarits : le clip
   ci-dessus y est alors sans effet. On clippe aussi la colonne (un bloc),
   d'où vient réellement le débordement. Aucun sticky ne vit dedans. */
#vehicleInventory .vehiclesColumn {
  overflow-x: clip;
}
/* React délègue les clics à la racine : les navigateurs mobiles posent
   alors leur surbrillance de tap (voile bleu) sur tout le module. Nos
   états :active/adi-checked rendent déjà le retour visuel. */
#vehicleInventory, #vehicleInventory * {
  -webkit-tap-highlight-color: transparent;
}

/* Largeur de colonne : la vraie page inventaire (post-179.css, Elementor)
   force max-width: 24vw; on reprend la même règle pour que l'île rende
   pareil hors de cette page (page de test) et après la bascule. */
@media screen and (min-width: 1024px) {
  body #vehicleInventory .filtersColumn {
    max-width: 24vw !important;
  }
}

/* Desktop : le panneau peut se replier (sa largeur fond à zéro, la grille
   reprend TOUTE la largeur) et se rouvrir par « Afficher les filtres ». */
@media screen and (min-width: 768px) {
  #vehicleInventory .filtersColumn,
  #vehicleInventory .vehiclesColumn {
    transition: width 0.3s ease, max-width 0.3s ease, opacity 0.3s ease, padding 0.3s ease;
  }
  #vehicleInventory.adi-filters-closed .filtersColumn {
    width: 0 !important;
    max-width: 0 !important;
    min-width: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
  }
  #vehicleInventory.adi-filters-closed .vehiclesColumn {
    width: 100% !important;
    max-width: 100% !important;
  }
  #vehicleInventory .filterreset {
    position: relative;
  }
  #vehicleInventory .adi-filters-toggle {
    /* Décision JP 2026-10-01 : bouton de repli desktop caché (la mécanique
       reste en place, retirer cette ligne pour le réactiver). */
    display: none !important;
    cursor: pointer;
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    user-select: none;
  }
  /* Un peu d'air entre l'image d'en-tête du panneau et le champ de
     recherche (demande JP). */
  #vehicleInventory .filter.search {
    margin-top: 14px;
  }
  /* Réouverture : même pastille chevron que la fermeture (sens inverse),
     posée seule au-dessus de la rangée « X véhicules trouvés ». */
  #vehicleInventory .adi-filters-reopen {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    margin: 10px 0 6px;
    font-size: 22px;
    line-height: 1;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
    user-select: none;
  }
}
@media screen and (max-width: 767px) {
  #vehicleInventory .adi-filters-toggle,
  #vehicleInventory .adi-filters-reopen {
    display: none;
  }
}

/* ------------------------------------------------------------------ */
/* Tuiles de filtres uniformes (demande JP 2026-09-02) : icône dans une
   zone fixe, libellé centré sur 1-2 lignes, hauteur constante. Corrige
   le décalage des icônes quand un libellé prend deux lignes.          */
/* ------------------------------------------------------------------ */

#vehicleInventory .filter.category .filterField,
#vehicleInventory .filter.transmission .filterField,
#vehicleInventory .filter.driveType .filterField,
#vehicleInventory .filter.fuelType .filterField {
  height: 115px !important;
  /* Largeur FIXE : même gabarit de bouton dans les quatre groupes (sans
     ça, inline-flex s'étire au contenu : « Électrique/Essence » faisait
     158 px). Les libellés longs passent sur deux lignes. */
  width: 96px !important;
  min-width: 96px !important;
  max-width: 96px !important;
  /* Certains groupes hérités sont en display:grid (carburant), ce qui
     casse le height:100% du label. inline-flex : contexte flex interne
     SANS casser l'écoulement côte à côte des tuiles. */
  display: inline-flex !important;
  align-items: stretch !important;
  vertical-align: top;
}
#vehicleInventory .filter.category .filterField label,
#vehicleInventory .filter.transmission .filterField label,
#vehicleInventory .filter.driveType .filterField label,
#vehicleInventory .filter.fuelType .filterField label {
  /* Le CSS hérité pose le label en absolute top:-20px avec overflow:hidden
     sur la tuile : le haut de l'icône était tronqué. On revient dans le
     flux, plein cadre. */
  position: static !important;
  top: auto !important;
  width: 100% !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  height: 100% !important;
  padding: 8px 4px 12px !important;
  margin: 0 !important;
  line-height: 1.2 !important; /* l'hérité impose 40px sur certains groupes */
  text-align: center;
  overflow-wrap: break-word;
  hyphens: auto; /* césure FR : « Minifourgonnette » débordait de la tuile */
}
/* L'icône garde sa taille naturelle (le rogner coupait le haut) et se
   centre dans l'espace libre au-dessus du libellé, ancré au bas. */
#vehicleInventory .filter .filterField label:before {
  flex: 0 0 auto;
  display: block !important;
  margin: auto 0;
  padding-bottom: 0 !important;
}

/* Icône manquante dans le CSS d'origine : minifourgonnette. Le slug des
   filtres vient maintenant TOUJOURS du libellé français (voir
   ADI_Repository::get_filters), donc cette règle vaut dans les deux
   langues, quelle que soit la traduction saisie en base. */
#vehicleInventory .filtersColumn .filter.category .filterField label[for='minifourgonnette-et-fourgon']:before {
  content: url('/wp-content/uploads/2022/05/mini_fourgonnette.svg');
}

/* Vignettes anglaises des tuiles. Le CSS d'origine ne prévoit de variante
   EN que pour « photos à venir » et « pneus d'hiver », et cette
   dernière ne s'applique jamais : son sélecteur est écrit
   `.pneus-hiverafter` au lieu de `.pneus-hiver:after` (coquille du
   fichier reçu, qu'on ne modifie pas). Pour « baisse de prix » et
   « nouvel arrivage », le visuel est défini page par page dans le CSS
   Elementor : juste en anglais sur la page inventaire EN, resté en
   français sur les pages EN à préfiltre. On pose ici le filet, valable
   sur toutes les pages anglaises du module. Les pages qui portent déjà
   la bonne règle en !important gardent la leur, c'est le même visuel. */
html[lang^='en'] #vehicleInventory .vehiclesColumn a.singleVehicle.best:after {
  background-image: url('/wp-content/uploads/2023/03/tag-baisse-prix-en.png');
}
html[lang^='en'] #vehicleInventory .vehiclesColumn a.singleVehicle.recent:after {
  background-image: url('/wp-content/uploads/2023/03/tag-nouvel-arrivage-en.png');
}
html[lang^='en'] #vehicleInventory .vehiclesColumn a.singleVehicle.pneus-hiver:after {
  background-image: url('/wp-content/uploads/2025/10/pneus-hiver-en.png') !important;
}

/* Carburant : même habillage bouton que Transmission (le CSS hérité le
   laissait en blocs de texte nus, sans bordure ni arrondi). */
#vehicleInventory .filter.fuelType .filterField {
  border: 2px solid #e8e8e8 !important;
  border-radius: 20px !important;
  margin: 0 10px 10px 0 !important;
  min-width: 96px;
}
#vehicleInventory .filter.fuelType .filterField label {
  font-size: 14px !important;
}
/* La case à cocher de ce groupe restait dans le flux (display:block,
   opacité 0, 15x111 px) et créait un trou au milieu des libellés :
   masquée comme dans les autres groupes. */
#vehicleInventory .filter.fuelType .filterField input {
  display: none !important;
}
/* Effet hover identique aux autres groupes (bordure et texte bleus). */
#vehicleInventory .filter.fuelType .filterField:not(.disabled):hover {
  border-color: #0674bf !important;
  color: #0674bf;
}
#vehicleInventory .filter.fuelType .filterField:not(.disabled):hover label {
  color: #0674bf;
  text-decoration: none;
  cursor: pointer;
}

/* Tuiles sans icône (transmissions, certaines motricités...) : texte
   centré verticalement, un peu plus affirmé, même gabarit que les autres. */
#vehicleInventory .filter .filterField.adi-no-icon label {
  justify-content: center;
  padding-top: 0 !important;
  font-weight: 600;
}
#vehicleInventory .filter .filterField.adi-no-icon label:before {
  display: none !important;
}

/* Options grisées (aucun résultat sous les filtres actifs) : l'opacité
   vient du CSS existant (.not_selected); on fige aussi le clic pour les
   groupes secondaires désactivés. */
#vehicleInventory .filterField.disabled {
  pointer-events: none;
}

/* Accordéon : les tuiles masquées le sont par CLASSE (le gabarit ci-dessus
   impose display !important, un style inline ne gagnerait pas). Déclaré
   APRÈS le gabarit : à priorité égale, le dernier gagne. */
#vehicleInventory .filtersColumn .filter .filterField.adi-hidden {
  display: none !important;
}

/* État COCHÉ des tuiles (amélioration : l'original n'en avait aucun) :
   bordure et texte bleus, icône teintée, léger fond. Même bleu que le
   hover hérité (#0674BF). */
#vehicleInventory .filter.category .filterField.adi-checked,
#vehicleInventory .filter.transmission .filterField.adi-checked,
#vehicleInventory .filter.driveType .filterField.adi-checked,
#vehicleInventory .filter.fuelType .filterField.adi-checked {
  border: 2px solid #0674bf !important;
  background-color: rgba(6, 116, 191, 0.06);
}
#vehicleInventory .filter .filterField.adi-checked label {
  color: #0674bf !important;
  font-weight: 600;
}
#vehicleInventory .filter .filterField.adi-checked label:before {
  filter: invert(27%) sepia(89%) saturate(1519%) hue-rotate(183deg) brightness(99%) contrast(95%);
}

/* ================================================================== */
/* MODERNISATION (validée par JP le 2026-09-02) : finitions visuelles  */
/* sans changer l'identité du site (mêmes bleus, mêmes gabarits).      */
/* ================================================================== */

/* --- Double curseur maison (remplace jQuery UI, dépendance retirée) --- */
#vehicleInventory .adi-slider {
  position: relative;
  height: 7px;
  border-radius: 4px;
  cursor: pointer;
  touch-action: none;
}
#vehicleInventory .adi-slider-fill {
  position: absolute;
  top: 0;
  height: 100%;
  background: #0674bf;
  border-radius: 4px;
}
#vehicleInventory .adi-thumb {
  position: absolute;
  top: 50%;
  width: 18px;
  height: 18px;
  transform: translate(-50%, -50%);
  background: #0674bf;
  border: 2px solid #fff;
  border-radius: 50%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  cursor: grab;
  transition: box-shadow 0.15s ease;
}
#vehicleInventory .adi-thumb:active {
  cursor: grabbing;
  box-shadow: 0 0 0 6px rgba(6, 116, 191, 0.15);
}
#vehicleInventory .adi-thumb:focus-visible {
  outline: none;
  box-shadow: 0 0 0 6px rgba(6, 116, 191, 0.25);
}
#vehicleInventory .adi-thumb::after {
  content: attr(data-label);
  position: absolute;
  top: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 13px;
  font-weight: 600;
  color: #444443;
  white-space: nowrap;
}
#vehicleInventory .adi-thumb:first-of-type::after {
  left: 0;
  transform: none;
}
#vehicleInventory .adi-thumb:last-of-type::after {
  left: auto;
  right: 0;
  transform: none;
}

/* --- Images : aperçu flou puis fondu vers la pleine résolution --- */
#vehicleInventory .vehicle-image {
  transition: filter 0.35s ease, opacity 0.35s ease;
  background-color: #f2f2f2;
}
#vehicleInventory .vehicle-image.adi-img-blur {
  filter: blur(10px);
  overflow: hidden;
}

/* --- Squelettes de chargement --- */
@keyframes adi-shimmer {
  0% { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}
#vehicleInventory .adi-skeleton {
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 0 14px;
}
#vehicleInventory .adi-skeleton-img,
#vehicleInventory .adi-skeleton-line {
  display: block;
  background: linear-gradient(90deg, #eee 25%, #f7f7f7 37%, #eee 63%);
  background-size: 800px 100%;
  animation: adi-shimmer 1.4s linear infinite;
  border-radius: 6px;
}
#vehicleInventory .adi-skeleton-img {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: 6px 6px 0 0;
}
#vehicleInventory .adi-skeleton-line {
  height: 14px;
  width: 70%;
  margin: 0 12px;
}
#vehicleInventory .adi-skeleton-line--short {
  width: 45%;
}

/* --- Grille : voile léger pendant les requêtes, apparition en fondu --- */
#vehicleInventory .vehicles {
  transition: opacity 0.2s ease;
}
#vehicleInventory .vehicles.adi-loading {
  opacity: 0.55;
}
@keyframes adi-tile-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
#vehicleInventory .vehicles > a {
  animation: adi-tile-in 0.25s ease both;
}

/* --- Tuiles véhicules : léger « lift » au survol, cœur qui pulse --- */
@media (hover: hover) {
  #vehicleInventory .vehicles a.js-singleVehicle:not(.singleVehicle_promo):hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.12);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
  }
}
@keyframes adi-heart-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.35); }
  100% { transform: scale(1); }
}
#vehicleInventory .vehicle-addToFavorite.active {
  animation: adi-heart-pop 0.3s ease;
}

/* --- Chips de filtres actifs : pilule nette, apparition animée --- */
@keyframes adi-chip-in {
  from { opacity: 0; transform: scale(0.9); }
  to { opacity: 1; transform: none; }
}
#vehicleInventory .secondary-filter-item {
  animation: adi-chip-in 0.18s ease both;
  transition: background-color 0.15s ease, color 0.15s ease;
}
#vehicleInventory .secondary-filter-item:hover {
  background-color: #0674bf;
  color: #fff;
  cursor: pointer;
}

/* --- Panneau : rythme typographique régulier --- */
#vehicleInventory .filtersColumn .filter {
  padding-bottom: 6px;
}
#vehicleInventory .filtersColumn .filter h4 {
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}
#vehicleInventory .filtersColumn .filter.collapsedParent h4,
#vehicleInventory .filtersColumn .filter h4.collapsed {
  margin-bottom: 4px;
}

/* --- Tiroir mobile en « bottom sheet » --- */
@media screen and (max-width: 767px) {
  @keyframes adi-sheet-up {
    from { transform: translateY(100%); }
    to { transform: none; }
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) {
    position: fixed !important;
    top: 8dvh !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    max-height: none;
    height: auto !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
    animation: adi-sheet-up 0.28s ease;
    overflow-y: auto;
    z-index: 100000;
    padding-bottom: 90px;
  }
  /* Pas de barre de défilement visible dans le tiroir : elle se dessinait
     par-dessus le coin arrondi et la bordure droite (poignée + défilement
     au doigt, comme une sheet native). */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) {
    scrollbar-width: none;
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters)::-webkit-scrollbar {
    display: none;
  }
  /* poignée visuelle en tête de tiroir */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterreset::before {
    content: '';
    display: block;
    width: 44px;
    height: 4px;
    border-radius: 2px;
    background: #d9d9d9;
    margin: 10px auto 8px;
  }
  #vehicleInventory .adi-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 99999;
  }
  /* « Voir les résultats » : bouton collé au bas du tiroir */
  #vehicleInventory.adi-sheet-open ~ .closedmenu,
  #vehicleInventory.adi-sheet-open .closedmenu {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 12px;
    z-index: 100001;
  }
}
@media screen and (min-width: 768px) {
  #vehicleInventory .adi-backdrop {
    display: none;
  }
}

/* Photo introuvable au CDN : fond neutre avec silhouette discrète au lieu
   d'une case vide (les vieilles URLs d'import peuvent être mortes). */
#vehicleInventory .vehicle-image.adi-img-missing {
  background-color: #eef1f4 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 40' width='64' height='40'%3E%3Cpath d='M10 26c2-7 5-11 9-12 7-1.5 17-1.5 24 0 4 1 7 5 9 12' fill='none' stroke='%23c6ccd4' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='20' cy='29' r='4.5' fill='none' stroke='%23c6ccd4' stroke-width='3'/%3E%3Ccircle cx='44' cy='29' r='4.5' fill='none' stroke='%23c6ccd4' stroke-width='3'/%3E%3C/svg%3E") !important;
  background-size: 64px 40px !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
}

/* Résumé de sélection sous le titre d'un accordéon fermé (demande JP) :
   noms cochés ou plage active, en bleu discret, tronqué sans passer sous
   le chevron du titre. */
#vehicleInventory .filter h4 .adi-group-summary {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #0674bf;
  line-height: 1.3;
  margin-top: 2px;
  max-width: calc(100% - 34px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ================================================================== */
/* PAQUET « WOW » (2026-09-02, items 1-8 + retouches JP)               */
/* ================================================================== */

/* --- Grille animée (View Transitions) : cadence douce --- */
::view-transition-group(*) {
  animation-duration: 0.28s;
}

/* --- Zoom photo au survol (dans son cadre, ombre déjà en place) ---
   ATTENTION : pas d'overflow:hidden sur .vehicle-image-wrapper, le bouton
   3 points et son menu d'options vivent dedans (ils étaient coupés). Le
   cadrage se fait sur .vehicle-image : un pseudo-élément reprend l'image
   (background: inherit) et c'est LUI qui zoome, clippé par son parent. */
#vehicleInventory .vehicle-image {
  overflow: hidden;
  transition: filter 0.35s ease, opacity 0.35s ease;
}
#vehicleInventory .vehicle-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: inherit;
  transition: transform 0.35s ease;
}
/* la miniature floue doit flouter le pseudo aussi (il peint par-dessus) */
#vehicleInventory .vehicle-image.adi-img-blur::before {
  filter: blur(10px);
}
@media (hover: hover) {
  #vehicleInventory a.js-singleVehicle:hover .vehicle-image::before {
    transform: scale(1.04);
  }
}

/* --- Bande de financement : TOUJOURS une seule ligne --- */
#vehicleInventory .vehicle-financing-teaser {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
}
#vehicleInventory .vehicle-financing-payment {
  flex: 0 0 auto;
}
#vehicleInventory .vehicle-financing-rate {
  flex: 0 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 10px;
  letter-spacing: -0.01em;
}

/* --- Chips de filtres : pilules modernes --- */
#vehicleInventory .secondary-filter-item {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 6px 12px !important;
  margin: 0 8px 8px 0 !important;
  background: #fff !important;
  border: 1.5px solid #0674bf !important;
  border-radius: 999px !important;
  color: #0674bf !important;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  background-image: none !important;
}
#vehicleInventory .secondary-filter-item .adi-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(6, 116, 191, 0.12);
  font-size: 12px;
  line-height: 1;
}
#vehicleInventory .secondary-filter-item:hover {
  background: #0674bf !important;
  color: #fff !important;
}
#vehicleInventory .secondary-filter-item:hover .adi-chip-x {
  background: rgba(255, 255, 255, 0.25);
}
#vehicleInventory .adi-chip-clear {
  border-style: dashed !important;
  color: #666 !important;
  border-color: #bbb !important;
}
#vehicleInventory .adi-chip-clear:hover {
  background: #666 !important;
  border-color: #666 !important;
  color: #fff !important;
}
#vehicleInventory .beforeVehicleFilters {
  /* aligné sur le titre, et centré en hauteur entre le titre et le
     compteur (respiration au-dessus, rapproché du compteur en-dessous) */
  padding: 16px 30px 0;
  margin-bottom: -6px;
}

/* --- « Tri par » : sélecteur habillé --- */
#vehicleInventory .sorting {
  display: flex;
  align-items: center;
  gap: 10px;
}
#vehicleInventory .sorting p {
  margin: 0;
  font-weight: 600;
}
#vehicleInventory .sorting select {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 34px 8px 14px !important;
  border: 1.5px solid #d9d9d9 !important;
  border-radius: 999px !important;
  background-color: #fff !important;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230674bf' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
  font-size: 14px;
  font-weight: 600;
  color: #444443;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
#vehicleInventory .sorting select:hover {
  border-color: #0674bf !important;
}

/* --- Barre de progression fine pendant les requêtes --- */
#vehicleInventory .vehiclesColumn {
  position: relative;
}
@keyframes adi-progress-slide {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}
#vehicleInventory .adi-progress {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  z-index: 5;
}
#vehicleInventory .adi-progress-bar {
  width: 30%;
  height: 100%;
  background: #0674bf;
  border-radius: 2px;
  animation: adi-progress-slide 1.1s ease-in-out infinite;
}

/* --- Bouton « remonter » --- */
@keyframes adi-fade-up {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
.adi-back-to-top {
  position: fixed;
  right: 22px;
  bottom: 22px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0674bf;
  color: #fff;
  font-size: 20px;
  border-radius: 50%;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  z-index: 9999;
  animation: adi-fade-up 0.2s ease;
  user-select: none;
  transition: transform 0.15s ease;
}
.adi-back-to-top:hover {
  transform: translateY(-2px);
}

/* --- Anneaux de focus cohérents (navigation clavier) --- */
#vehicleInventory :is(button, select, input[type='text'], [role='button'], [role='slider'], a.js-singleVehicle):focus-visible,
.adi-back-to-top:focus-visible {
  outline: 2px solid #0674bf !important;
  outline-offset: 2px;
  border-radius: 6px;
}

/* ================================================================== */
/* TIROIR MOBILE, seconde passe (retours du test téléphone de JP,      */
/* 1er octobre) : fermeture animée + mise en ordre visuelle.           */
/* ================================================================== */

@media screen and (max-width: 767px) {
  /* --- Fermeture en glissade (miroir de l'ouverture) --- */
  @keyframes adi-sheet-down {
    from { transform: none; }
    to { transform: translateY(102%); }
  }
  #vehicleInventory.adi-sheet-open .filtersColumn.adi-sheet-closing {
    animation: adi-sheet-down 0.24s ease forwards;
  }
  /* Le bouton « Voir les résultats » sort en fondu avec le tiroir au lieu
     de disparaître d'un coup. */
  @keyframes adi-btn-out {
    to { opacity: 0; transform: translateY(24px); }
  }
  .closedmenu.adi-sheet-closing {
    animation: adi-btn-out 0.24s ease forwards;
    pointer-events: none;
  }
  @keyframes adi-backdrop-out {
    to { opacity: 0; }
  }
  #vehicleInventory .adi-backdrop {
    animation: adi-fade-up 0.2s ease;
  }
  #vehicleInventory .adi-backdrop.adi-backdrop-closing {
    animation: adi-backdrop-out 0.24s ease forwards;
  }

  /* --- En-tête du tiroir : rangée propre, collante, X dégagé du bord --- */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterreset {
    position: sticky;
    top: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 16px 12px !important;
    border-radius: 18px 18px 0 0;
  }
  /* la poignée occupe toute la largeur au-dessus de la rangée */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterreset::before {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterreset img.mobile-only {
    margin-top: 14px;
    max-height: 30px;
    width: auto;
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterreset img.btn-closed {
    margin-top: 14px;
    max-height: 32px;
    width: auto;
    flex: 0 0 auto;
  }
  /* « Réinitialiser » visible dans le tiroir ouvert, lisible sur le bleu */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterreset .resetFilters {
    display: inline-block !important;
    margin-top: 14px;
    margin-left: auto;
    color: #fff !important;
    font-size: 14px;
    text-decoration: underline;
    white-space: nowrap;
  }

  /* --- Corps du tiroir : rythme régulier --- */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.search {
    padding: 14px 16px 0;
    margin: 0;
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.pricedrop,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.eco,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.winter,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.summer {
    padding: 4px 16px;
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.pricedrop label,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.eco label,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.winter label,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filterField.summer label {
    display: flex;
    align-items: center;
    min-height: 48px;
    font-size: 16px;
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter {
    padding-left: 16px;
    padding-right: 16px;
  }
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter h4 {
    font-size: 18px;
    margin-top: 10px;
  }
  /* les tuiles de catégories centrées, l'espace mort du bas réduit */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.category {
    text-align: center;
  }

  /* --- « Voir les N résultats » : pilule pleine largeur arrondie --- */
  #vehicleInventory.adi-sheet-open .closedmenu,
  #vehicleInventory.adi-sheet-open ~ .closedmenu {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
  }
}

/* La bannière de cookies du site (z-index maximal) recouvrirait le bouton
   et le bas du tiroir : on les remonte de sa hauteur tant qu'elle est
   affichée (variable posée par l'île, remise à zéro à l'acceptation). */
@media screen and (max-width: 767px) {
  #vehicleInventory.adi-sheet-open .closedmenu,
  #vehicleInventory.adi-sheet-open ~ .closedmenu {
    bottom: calc(12px + var(--adi-banner-offset, 0px));
  }
  /* assez de fond pour que le DERNIER groupe (Passagers) passe au-dessus
     du bouton fixe « Voir les résultats » une fois le tiroir défilé au bas */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) {
    /* !important : l'hérité impose son propre padding en mobile */
    padding-bottom: var(--adi-sheet-inset, 170px) !important;
  }

  /* Flèche du bouton « Voir les résultats » centrée verticalement. */
  #vehicleInventory.adi-sheet-open .closedmenu,
  #vehicleInventory.adi-sheet-open ~ .closedmenu {
    align-items: center;
  }
  .adi-sheet-open .closedmenu h4,
  #vehicleInventory.adi-sheet-open ~ .closedmenu h4 {
    margin: 0;
  }
  .adi-sheet-open .closedmenu img,
  #vehicleInventory.adi-sheet-open ~ .closedmenu img {
    margin-top: 0;
  }

  /* Tiroir ouvert : une copie statique de la barre repliée reste en place
     sous le voile (la vraie colonne devient le tiroir fixe). Inerte : les
     taps traversent vers le voile, qui ferme le tiroir. */
  .adi-sheet-placeholder {
    pointer-events: none;
  }

  /* Barre repliée : le sélecteur de tri couvre toute sa moitié, invisible,
     par-dessus le libellé « Trier par » : le tap ouvre le menu natif de
     tri (avant, il ouvrait le panneau de filtres). */
  #vehicleInventory .filtersColumn.collapsedFilters .sorting select {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    opacity: 0;
    z-index: 2;
  }

  /* Feedback de tri dans la barre repliée : quand un tri est actif, son
     nom remplace « Trier par », en bleu, ajusté pour tenir dans la moitié
     de barre (les libellés comme « Odomètre ascendant » sont longs). */
  #vehicleInventory .filtersColumn.collapsedFilters .sorting p.adi-sort-active {
    color: #0674bf;
    font-weight: 700;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 0 38px 0 8px;
  }

  /* Le :hover hérité (fond gris pâle) reste collé après un tap sur les
     écrans tactiles : on le neutralise quand il n'y a pas de vrai survol. */
  @media (hover: none) {
    #vehicleInventory span.resetFilters:hover {
      background-color: transparent;
    }
  }

  /* Le CSS hérité impose width:100% au bouton : right:12px était ignoré
     (gap à gauche, collé à droite). */
  #vehicleInventory.adi-sheet-open .closedmenu,
  #vehicleInventory.adi-sheet-open ~ .closedmenu {
    width: auto !important;
    margin: 0 !important;
  }

  /* Respiration verticale entre les tuiles de filtres (les rangées se
     touchaient dans le tiroir). */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.category .filterField,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.transmission .filterField,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.driveType .filterField,
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.fuelType .filterField {
    margin: 4px 3px !important;
  }

  /* Groupes à slider : les étiquettes sous les poignées sont en absolu,
     elles collaient au trait du bas. */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.price:not(.collapsedParent),
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.kms:not(.collapsedParent),
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.year:not(.collapsedParent),
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.passengers:not(.collapsedParent) {
    padding-bottom: 34px;
  }
  /* Replié, l'hérité donne 30px au seul groupe Prix (6px ailleurs) :
     hauteur unique pour tous les accordéons fermés du tiroir. */
  #vehicleInventory.adi-sheet-open .filtersColumn:not(.collapsedFilters) .filter.price.collapsedParent {
    padding-bottom: 6px !important;
  }
}