/* ==========================================================================
   PAGES CATÉGORIES TERMINALES ET RÉSULTATS DE RECHERCHE
   ==========================================================================
   Chantier docs/refonte-categories/ (arbitrages.md, plan-phase-2.md).
   Lot 2.2 — mise en forme desktop, d'après la maquette Cars
   (maquettes/maquette_categorie.png) : en-tête, moteur de recherche, colonne
   de filtres, barre de résultats, pagination.
   Lot 2.3 b — grille d'annonces 3 / 2 / 1. La carte d'annonce, commune à
   tout le site, a sa propre feuille (listing-card.css).
   Lot 2.4 — tablette et téléphone, en fin de feuille.

   CANTONNEMENT
   Feuille chargée uniquement en contexte « terminal » ou « global »
   (inc/tfd-category-view.php), et toutes les règles sont écrites sous la
   classe de <body> .tfd-category-view. Le gabarit HivePress est partagé avec
   les pages marque et les catégories parentes, qui n'ont pas cette classe et
   ne doivent pas changer.

   SPÉCIFICITÉ
   Les feuilles du thème parent sont chargées après celles du thème enfant :
   à poids égal elles gagnent. Les sélecteurs ci-dessous reprennent donc la
   classe de contexte et celle du formulaire visé, ce qui suffit sans
   !important.

   Charte : orange #F15A29 (--primary), texte #202A35, gris #5F6670,
   DM Sans 400 et 700.
   ========================================================================== */

.tfd-category-view {
	--tfd-cv-text: #202A35;
	--tfd-cv-muted: #5F6670;
	--tfd-cv-placeholder: #8A919B;
	--tfd-cv-border: #E3E6EA;
	--tfd-cv-field-border: #D5D9DE;
	--tfd-cv-radius: 8px;
	--tfd-cv-field-radius: 6px;
	--tfd-cv-field-height: 44px;
	--tfd-cv-sidebar: 360px;
}

/* ==========================================================================
   EN-TÊTE : fil d'Ariane et h1
   ========================================================================== */

/* padding-bottom : nativement la page n'a aucune marge basse, la pagination
   et le cadre des filtres touchaient le pied de page. */
.tfd-category-view .hp-page.site-main {
	padding-top: 20px;
	padding-bottom: 64px;
}

/* 64px natifs : pensés pour un bandeau au-dessus, trop pour un simple titre. */
.tfd-category-view .hp-page .hp-page__header {
	margin-bottom: 24px;
}

.tfd-category-view .tfd-category-header {
	margin: 0 0 20px;
}

.tfd-category-view .tfd-breadcrumb {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.4;
	color: var(--tfd-cv-muted);
}

.tfd-category-view .tfd-breadcrumb p {
	margin: 0;
}

.tfd-category-view .tfd-breadcrumb a {
	color: var(--tfd-cv-muted);
	text-decoration: none;
}

.tfd-category-view .tfd-breadcrumb a:hover,
.tfd-category-view .tfd-breadcrumb a:focus {
	color: var(--primary);
}

.tfd-category-view .tfd-breadcrumb .separator {
	margin: 0 8px;
	color: var(--tfd-cv-placeholder);
}

.tfd-category-view .tfd-breadcrumb .last {
	color: var(--tfd-cv-text);
	font-weight: 700;
}

.tfd-category-view .tfd-category-header h1.tfd-category-header__title {
	margin: 0;
	font-size: 40px;
	line-height: 1.15;
	color: var(--tfd-cv-text);
}

/* ==========================================================================
   MOTEUR DE RECHERCHE
   Formulaire natif HivePress (.hp-form--wide.hp-form--primary) : un cadre,
   des champs bordés, le bouton à droite. Les champs affichés restent ceux que
   décident les réglages HivePress des attributs.
   ========================================================================== */

/* margin-top : sur une page de catégorie, le thème parent remonte le moteur
   de 5.25rem pour le faire chevaucher le bandeau (.tax-hp_listing_category).
   Le bandeau n'existe plus sur une page terminale : sans cette remise à zéro
   le moteur recouvre le fil d'Ariane et le h1. */
.tfd-category-view .hp-page__header .hp-form--listing-search {
	align-items: flex-end;
	margin-top: 0;
	margin-bottom: 0;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--tfd-cv-border);
	border-radius: var(--tfd-cv-radius);
	box-shadow: 0 1px 2px rgba(32, 42, 53, 0.04);
}

.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__fields {
	gap: 12px;
	margin: 0 12px 0 0;
	min-width: 0;
}

.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field {
	margin: 0;
	min-width: 0;
}

/* Les mots-clés prennent plus de place que les autres champs : c'est la
   saisie libre, et son placeholder est le plus long. */
.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field--search {
	flex-grow: 1.6;
}

/* Libellés (Keywords, Location, attributs) : le thème parent les retire
   (display: none). On les garde hors de l'écran mais lisibles par les
   lecteurs d'écran.
   DÉCISION (2026-10-05) — Pas de libellés visibles au-dessus des champs du
   moteur, contrairement à la maquette Cars. Les deux variantes ont été
   comparées sur la préprod : les placeholders (« What are you looking for? »,
   « City, state, or ZIP », « Any make »…) suffisent à dire ce qu'on attend,
   et les libellés ajoutaient 24 px de hauteur à la barre. Écart assumé,
   consigné dans arbitrages.md (§4 bis). */
.tfd-category-view .hp-form--listing-search.hp-form--primary .hp-field__label {
	display: block;
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Mots-clés */
.tfd-category-view .hp-form--listing-search .hp-form__field input.hp-field--search {
	width: 100%;
	height: var(--tfd-cv-field-height);
	padding: 0 14px;
	font-size: 16px;
	color: var(--tfd-cv-text);
	background: #fff;
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
	box-shadow: none;
}

/* Lieu : le champ Mapbox et le bouton « Locate me » vivent dans la même
   enveloppe, c'est elle qui porte la bordure. */
.tfd-category-view .hp-form--listing-search .hp-form__field--location .hp-field--location {
	height: var(--tfd-cv-field-height);
	background: #fff;
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
}

.tfd-category-view .hp-form--listing-search .hp-form__field--location input.hp-field--text {
	height: calc(var(--tfd-cv-field-height) - 2px);
	padding: 0 40px 0 14px;
	font-size: 16px;
	color: var(--tfd-cv-text);
	background: transparent;
	border: 0;
	box-shadow: none;
}

/* Selects d'attributs (Select2) */
.tfd-category-view .hp-form--listing-search.hp-form--primary .select2-container--default .select2-selection--single {
	height: var(--tfd-cv-field-height);
	background: #fff;
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
}

.tfd-category-view .hp-form--listing-search.hp-form--primary .select2-container--default .select2-selection__rendered {
	height: calc(var(--tfd-cv-field-height) - 2px);
	padding: 0 36px 0 14px;
	font-size: 16px;
	line-height: calc(var(--tfd-cv-field-height) - 2px);
	color: var(--tfd-cv-text);
}

.tfd-category-view .hp-form--listing-search.hp-form--primary .select2-container--default .select2-selection__arrow {
	top: 50%;
	right: 10px;
	transform: translateY(-50%);
}

.tfd-category-view .hp-form--listing-search input::placeholder {
	color: var(--tfd-cv-placeholder);
	opacity: 1;
}

.tfd-category-view .hp-form--listing-search .hp-form__field input.hp-field--search:focus,
.tfd-category-view .hp-form--listing-search .hp-form__field--location .hp-field--location:focus-within,
.tfd-category-view .hp-form--listing-search.hp-form--primary .select2-container--default.select2-container--focus .select2-selection--single,
.tfd-category-view .hp-form--listing-search.hp-form--primary .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--primary);
	outline: 0;
}

/* Bouton Search */
.tfd-category-view .hp-form--listing-search .hp-form__footer .hp-form__button {
	min-width: 160px;
	height: var(--tfd-cv-field-height);
	padding: 0 32px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	background: var(--primary);
	border-radius: var(--tfd-cv-field-radius);
	box-shadow: none;
}

.tfd-category-view .hp-form--listing-search .hp-form__footer .hp-form__button:hover,
.tfd-category-view .hp-form--listing-search .hp-form__footer .hp-form__button:focus {
	background: var(--hover);
}

/* ==========================================================================
   COLONNES : filtres à largeur fixe, annonces sur le reste
   ========================================================================== */

@media (min-width: 992px) {
	.tfd-category-view .hp-page .hp-page__sidebar {
		flex: 0 0 var(--tfd-cv-sidebar);
		max-width: var(--tfd-cv-sidebar);
	}

	.tfd-category-view .hp-page .hp-page__content {
		flex: 1 1 0;
		max-width: calc(100% - var(--tfd-cv-sidebar));
	}
}

/* ==========================================================================
   COLONNE DE FILTRES
   ========================================================================== */

.tfd-category-view .hp-page__sidebar .hp-widget--listing-filter {
	padding: 20px;
	background: #fff;
	border: 1px solid var(--tfd-cv-border);
	border-radius: var(--tfd-cv-radius);
}

/* En-tête : « Filters » à gauche, « Clear filters » à droite */
.tfd-category-view .hp-form--listing-filter .hp-form__header {
	margin-bottom: 18px;
}

.tfd-category-view .tfd-filters-header {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
}

.tfd-category-view .tfd-filters-header h2.tfd-filters-header__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.2;
	color: var(--tfd-cv-text);
}

.tfd-category-view .tfd-filters-header .tfd-clear-filters {
	font-size: 13px;
	line-height: 1.2;
	color: var(--tfd-cv-muted);
	text-decoration: none;
	white-space: nowrap;
}

.tfd-category-view .tfd-filters-header .tfd-clear-filters:hover,
.tfd-category-view .tfd-filters-header .tfd-clear-filters:focus {
	color: var(--primary);
	text-decoration: underline;
}

/* Champs */
.tfd-category-view .hp-form--listing-filter .hp-form__fields .hp-form__field {
	margin-bottom: 16px;
}

.tfd-category-view .hp-form--listing-filter .hp-form__field .hp-form__label {
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tfd-cv-text);
}

.tfd-category-view .hp-form--listing-filter .select2-container--default .select2-selection--single,
.tfd-category-view .hp-form--listing-filter .select2-container--default .select2-selection--multiple {
	min-height: 40px;
	background: #fff;
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
}

.tfd-category-view .hp-form--listing-filter .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 34px 0 12px;
	font-size: 15px;
	line-height: 38px;
	color: var(--tfd-cv-text);
}

.tfd-category-view .hp-form--listing-filter .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

.tfd-category-view .hp-form--listing-filter input[type="number"],
.tfd-category-view .hp-form--listing-filter input[type="text"] {
	height: 40px;
	padding: 0 12px;
	font-size: 15px;
	color: var(--tfd-cv-text);
	background: #fff;
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
	box-shadow: none;
}

.tfd-category-view .hp-form--listing-filter input::placeholder {
	color: var(--tfd-cv-placeholder);
	opacity: 1;
}

/* Plage Min / Max : deux champs égaux, sans marge négative native */
.tfd-category-view .hp-form--listing-filter .hp-field--number-range {
	display: flex;
	gap: 8px;
	margin: 0;
}

.tfd-category-view .hp-form--listing-filter .hp-field--number-range input[type="number"] {
	flex: 1 1 0;
	min-width: 0;
	width: auto;
	margin: 0;
}

.tfd-category-view .hp-form--listing-filter input[type="number"]:focus,
.tfd-category-view .hp-form--listing-filter input[type="text"]:focus,
.tfd-category-view .hp-form--listing-filter .select2-container--default.select2-container--focus .select2-selection--single,
.tfd-category-view .hp-form--listing-filter .select2-container--default.select2-container--open .select2-selection--single {
	border-color: var(--primary);
	outline: 0;
}

/* État neutre d'un select (« Any make », « All categories ») en gris, comme
   un placeholder. Amélioration progressive : sans :has(), le texte garde la
   couleur des valeurs. */
.tfd-category-view .hp-form--listing-filter select:has(option[value=""]:checked) + .select2-container .select2-selection__rendered,
.tfd-category-view .hp-form--listing-search select:has(option[value=""]:checked) + .select2-container .select2-selection__rendered {
	color: var(--tfd-cv-placeholder);
}

/* Pied : bouton d'application, puis alerte de recherche */
.tfd-category-view .hp-form--listing-filter .hp-form__footer {
	gap: 12px;
	margin-top: 4px;
}

.tfd-category-view .hp-form--listing-filter .hp-form__footer .hp-form__button {
	width: 100%;
	height: var(--tfd-cv-field-height);
	margin: 0;
	padding: 0 20px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	background: var(--primary);
	border-radius: var(--tfd-cv-field-radius);
	box-shadow: none;
}

.tfd-category-view .hp-form--listing-filter .hp-form__footer .hp-form__button:hover,
.tfd-category-view .hp-form--listing-filter .hp-form__footer .hp-form__button:focus {
	background: var(--hover);
}

.tfd-category-view .hp-form--listing-filter .hp-form__footer .hp-link {
	font-size: 14px;
	color: var(--tfd-cv-muted);
}

/* ==========================================================================
   BARRE DE RÉSULTATS : compteur et tri
   ========================================================================== */

.tfd-category-view .hp-page__content .hp-page__topbar {
	min-height: 40px;
	margin-bottom: 20px;
}

/* Le compteur « N listings » est mis en forme avec la grille, dans
   listing-card.css : il sert aussi aux pages marque (décision du 2026-10-06). */

.tfd-category-view .hp-form--listing-sort .hp-form__field .hp-form__label {
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tfd-cv-muted);
}

/* Largeur minimale du champ de tri : sa liste est à largeur automatique et
   dépassait de 13 px le bord droit de la colonne quand le champ, réduit à
   « Date », était plus étroit que le plus long libellé (« Mileage ↓ »). La
   liste ne pouvant pas être plus étroite que le champ, 150 px l'alignent
   exactement sur lui, et le champ ne change plus de largeur selon le tri. */
.tfd-category-view .hp-form--listing-sort .select2-container {
	min-width: 150px;
}

.tfd-category-view .hp-form--listing-sort .select2-container--default .select2-selection--single {
	height: 40px;
	background: #fff;
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
}

.tfd-category-view .hp-form--listing-sort .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0 34px 0 12px;
	font-size: 15px;
	line-height: 38px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--tfd-cv-text);
}

.tfd-category-view .hp-form--listing-sort .select2-container--default .select2-selection--single .select2-selection__arrow {
	top: 50%;
	right: 8px;
	transform: translateY(-50%);
}

/* ==========================================================================
   GRILLE D'ANNONCES
   ==========================================================================
   La grille 3 / 2 / 1 (arbitrages §4 ter) n'est plus propre à ces pages :
   décision du 2026-10-06, elle vaut pour toutes les grilles d'annonces du
   site (favoris, pages marque, page d'un vendeur), et vit avec la carte dans
   listing-card.css. Rien à régler ici.
   ========================================================================== */

/* ==========================================================================
   PAGINATION
   ========================================================================== */

.tfd-category-view .hp-page__content .hp-pagination {
	margin-top: 32px;
}

.tfd-category-view .hp-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
}

.tfd-category-view .hp-pagination .nav-links .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	margin: 0;
	padding: 0;
	font-size: 15px;
	font-weight: 500;
	line-height: 1;
	color: var(--tfd-cv-text);
	text-decoration: none;
	background: transparent;
	border: 1px solid transparent;
	border-radius: var(--tfd-cv-radius);
}

.tfd-category-view .hp-pagination .nav-links a.page-numbers:hover,
.tfd-category-view .hp-pagination .nav-links a.page-numbers:focus {
	color: var(--primary);
	border-color: var(--primary);
}

.tfd-category-view .hp-pagination .nav-links .page-numbers.current {
	color: #fff;
	font-weight: 700;
	background: var(--primary);
	border-color: var(--primary);
}

.tfd-category-view .hp-pagination .nav-links .page-numbers.prev,
.tfd-category-view .hp-pagination .nav-links .page-numbers.next {
	border-color: var(--tfd-cv-border);
	border-radius: 50%;
}

.tfd-category-view .hp-pagination .nav-links .page-numbers.prev i,
.tfd-category-view .hp-pagination .nav-links .page-numbers.next i {
	color: inherit;
}

/* ==========================================================================
   LISTES DÉROULANTES (Select2)
   La liste ouverte est rendue par Select2 à la racine de <body>, hors des
   formulaires : elle se cible par la classe de contexte de <body>.

   NOTE (2026-10-05) — Trois défauts natifs corrigés ici, constatés sur le
   select Category de la recherche globale :
   - les libellés longs passaient sur deux lignes (liste aussi étroite que le
     champ, texte plus grand que celui des champs, sous-catégories décalées) :
     une ligne par option, texte réduit ;
   - le survol était au bleu par défaut de Select2, hors charte ;
   - les catégories parentes, non sélectionnables (arbitrages §6), ne se
     distinguaient que par leur gris : elles prennent l'allure d'un intitulé
     de groupe.

   LISTES DE LA COLONNE DE FILTRES (.tfd-select-dropdown--filter)
   Historique du 2026-10-05, pour ne pas refaire le chemin. Trois contraintes
   posées par Dan : une ligne par option, la liste ne sort pas du cadre des
   filtres, et elle n'est pas plus large que son champ.
   - colonne de 300 px, liste à la largeur du champ (226 px) : 17 des 103
     catégories coupées ;
   - liste élargie à 320 px : plus de coupure, mais elle sortait du cadre
     (refusé) ;
   - colonne à 340 px, liste calée sur les bords du cadre (308 px) : plus de
     coupure ni de débordement, mais liste plus large que son champ (refusé) ;
   - retenu : liste à la largeur exacte du champ, comportement natif de
     Select2, donc aucune règle de largeur ici. Pour que tout tienne, le texte
     de ces listes passe à 14 px, les marges et le décalage de niveau à 10 px,
     l'ascenseur est affiné, et la colonne passe à 360 px
     (--tfd-cv-sidebar). Mesuré : champ et liste de 286 px, aucune option sur
     deux lignes ni coupée, une dizaine de pixels de marge sur le libellé le
     plus long. À 340 px, un libellé restait coupé de 10 px.
   La classe est posée par inc/tfd-category-view.php (option Select2
   dropdownCssClass) : elle seule permet de distinguer ces listes de celles du
   moteur, toutes rendues à la racine de <body>.
   ========================================================================== */

body.tfd-category-view .select2-container--default .select2-dropdown {
	overflow: hidden;
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
	box-shadow: 0 8px 24px rgba(32, 42, 53, 0.12);
}

body.tfd-category-view .select2-container--default .select2-dropdown.tfd-select-dropdown--filter .select2-results__options {
	scrollbar-width: thin;
}

body.tfd-category-view .select2-container--default .select2-dropdown.tfd-select-dropdown--filter .select2-results__option {
	padding-right: 10px;
	padding-left: 10px;
	font-size: 14px;
}

/* Décalage des sous-catégories : 20 px en style en ligne (HivePress), d'où
   le !important, seule exception de cette feuille. */
body.tfd-category-view .select2-container--default .select2-dropdown.tfd-select-dropdown--filter .select2-results__option > div[style*="20px"] {
	padding-left: 10px !important;
}

body.tfd-category-view .select2-container--default .select2-search--dropdown {
	padding: 8px;
}

body.tfd-category-view .select2-container--default .select2-search--dropdown .select2-search__field {
	height: 36px;
	padding: 0 10px;
	font-size: 15px;
	color: var(--tfd-cv-text);
	border: 1px solid var(--tfd-cv-field-border);
	border-radius: var(--tfd-cv-field-radius);
	box-shadow: none;
}

body.tfd-category-view .select2-container--default .select2-search--dropdown .select2-search__field:focus {
	border-color: var(--primary);
	outline: 0;
}

body.tfd-category-view .select2-container--default .select2-results > .select2-results__options {
	max-height: 300px;
}

/* Une ligne par option ; un libellé vraiment trop long est coupé par « … ». */
body.tfd-category-view .select2-container--default .select2-results__option {
	padding: 8px 12px;
	overflow: hidden;
	font-size: 15px;
	line-height: 1.35;
	color: var(--tfd-cv-text);
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* HivePress enveloppe chaque libellé dans un <div> qui porte le décalage du niveau. */
body.tfd-category-view .select2-container--default .select2-results__option > div {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Catégorie parente : intitulé de groupe, non cliquable. */
body.tfd-category-view .select2-container--default .select2-results__option[aria-disabled="true"] {
	padding-top: 12px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--tfd-cv-muted);
}

/* Option choisie, puis option survolée ou atteinte au clavier. */
body.tfd-category-view .select2-container--default .select2-results__option[aria-selected="true"] {
	font-weight: 700;
	background: #F3F4F6;
}

body.tfd-category-view .select2-container--default .select2-results__option--highlighted[aria-selected] {
	color: var(--tfd-cv-text);
	background: rgba(241, 90, 41, 0.1);
}

/* ==========================================================================
   AUCUN RÉSULTAT
   Message d'une liste vide : catégorie encore vide, ou recherche et filtres
   sans résultat (hivepress/page/no-results-message.php).
   ========================================================================== */

.tfd-category-view .hp-page__content .hp-no-results h2 {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.25;
	color: var(--tfd-cv-text);
}

.tfd-category-view .hp-page__content .hp-no-results p {
	margin: 0;
	font-size: 16px;
	color: var(--tfd-cv-muted);
}

/* ==========================================================================
   TABLETTE ET TÉLÉPHONE (lot 2.4, décisions du 6 octobre 2026)
   ==========================================================================
   Trois paliers, calés sur ceux de HivePress et du thème parent (48em et
   62em, soit 768px et 992px) :

   | Largeur      | Moteur                          | Filtres                | Grille |
   | ≥ 992px      | une ligne                       | colonne fixe de 360px  | 3 col. |
   | 768 – 991px  | deux lignes                     | bouton « Filters »     | 2 col. |
   | < 768px      | champs et bouton empilés        | bouton « Filters »     | 1 col. |

   La grille se règle seule (listing-card.css, largeur minimale de carte).
   La fenêtre de filtres est celle de HivePress (#listing_filter_modal) : elle
   vit dans la colonne de filtres mais HivePress la sort de la page à
   l'ouverture, la colonne peut donc être masquée (c'est déjà ainsi sous
   768px). Rien n'est ajouté côté script.
   ========================================================================== */

@media (max-width: 991px) {

	/* --------------------------------------------------------------------
	   Colonne de filtres masquée, annonces sur toute la largeur. Sous 768px
	   HivePress masque déjà le widget des filtres ; entre 768 et 991px il
	   affichait la colonne (240px), ne laissant qu'une carte très large par
	   ligne : décision du 2026-10-06, la tablette suit le téléphone.
	   -------------------------------------------------------------------- */
	.tfd-category-view .hp-page .hp-page__sidebar {
		display: none;
	}

	.tfd-category-view .hp-page .hp-page__content {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* --------------------------------------------------------------------
	   Bouton « Filters » : HivePress le masque dès 768px (display: none
	   !important), d'où le !important pour le rétablir jusqu'à 991px. Mis à
	   la charte : blanc, liseré, icône orange, texte gras — une action, pas
	   un champ (pas de placeholder gris, bordure plus marquée au survol).
	   -------------------------------------------------------------------- */
	.tfd-category-view .hp-page__header .hp-button--listing-filter {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 48px;
		margin: 12px 0 0;
		padding: 0 20px;
		font-size: 16px;
		font-weight: 700;
		line-height: 1;
		color: var(--tfd-cv-text);
		background: #fff;
		border: 1px solid var(--tfd-cv-field-border);
		border-radius: var(--tfd-cv-field-radius);
		box-shadow: 0 1px 2px rgba(32, 42, 53, 0.06);
		transition: border-color 0.15s ease, color 0.15s ease;
	}

	.tfd-category-view .hp-page__header .hp-button--listing-filter i {
		margin-right: 10px;
		font-size: 16px;
		color: var(--primary);
	}

	.tfd-category-view .hp-page__header .hp-button--listing-filter:hover,
	.tfd-category-view .hp-page__header .hp-button--listing-filter:focus-visible {
		color: var(--primary);
		border-color: var(--primary);
		background: #fff;
	}

	/* --------------------------------------------------------------------
	   Moteur sur deux lignes : Keywords et Location, puis les champs
	   d'attributs et « Search ». Les champs sortent de leur enveloppe
	   (display: contents) pour partager la même grille flex que le pied du
	   formulaire : le bouton vient compléter la dernière ligne, et l'occupe
	   seul en pleine largeur s'il n'y a pas d'attribut.
	   -------------------------------------------------------------------- */
	.tfd-category-view .hp-page__header .hp-form--listing-search {
		flex-flow: row wrap;
		align-items: stretch;
		gap: 12px;
	}

	.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__fields {
		display: contents;
	}

	.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field {
		flex: 1 1 calc(33.333% - 8px);
		min-width: 140px;
	}

	.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field--search,
	.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field--location {
		flex: 1 1 calc(50% - 6px);
	}

	.tfd-category-view .hp-form--listing-search .hp-form__footer {
		flex: 1 1 calc(33.333% - 8px);
		min-width: 140px;
		margin: 0;
	}

	.tfd-category-view .hp-form--listing-search .hp-form__footer .hp-form__button {
		width: 100%;
		min-width: 0;
		padding: 0 16px;
	}
}

@media (max-width: 767px) {

	/* En-tête resserré : moins de marge au-dessus, h1 à 28px. */
	.tfd-category-view .hp-page.site-main {
		padding-top: 12px;
		padding-bottom: 48px;
	}

	.tfd-category-view .hp-page .hp-page__header {
		margin-bottom: 20px;
	}

	.tfd-category-view .tfd-category-header {
		margin-bottom: 16px;
	}

	.tfd-category-view .tfd-breadcrumb {
		margin-bottom: 10px;
		font-size: 13px;
	}

	.tfd-category-view .tfd-category-header h1.tfd-category-header__title {
		font-size: 28px;
		line-height: 1.2;
	}

	/* Moteur : tout empilé en pleine largeur, bouton compris. */
	.tfd-category-view .hp-page__header .hp-form--listing-search {
		padding: 12px;
	}

	.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field,
	.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field--search,
	.tfd-category-view .hp-form--listing-search.hp-form--wide .hp-form__field--location,
	.tfd-category-view .hp-form--listing-search .hp-form__footer {
		flex: 1 1 100%;
	}

	/* Barre de résultats : compteur à gauche, tri à droite, sur une ligne
	   tant que la place le permet (HivePress les empile sous 768px). */
	.tfd-category-view .hp-page__content .hp-page__topbar {
		flex-flow: row wrap;
		align-items: center;
		justify-content: space-between;
		gap: 8px 16px;
		margin-bottom: 16px;
	}

	.tfd-category-view .hp-page__topbar .hp-form--listing-sort {
		margin: 0;
	}

	/* Pagination : pas de débordement avec « 1 2 … 5 » et les flèches. */
	.tfd-category-view .hp-pagination .nav-links {
		flex-wrap: wrap;
		gap: 8px 0;
	}
}