/* =========================================================================
 * [VME-LISTE-V2 05/10/2026] LA PAGE « ENTREPRISES A VENDRE » ET SES ALERTES.
 * =========================================================================
 * Cinq defauts releves par Charles le 05/10/2026 :
 *   1. « description dans entreprise a vendre »        -> § 5 (extrait)
 *   2. « bandeau trop imposant »                         -> § 1
 *   3. « aucun espace dedie a la mise en avant »         -> § 5 (pastille, encart)
 *   4. « pop-up creer une alerte, bouton bizarre »       -> § 2 et § 6
 *   5. « un filtre s'affiche d'une facon pas esthetique » -> § 3 et § 4
 *
 * Feuille chargee sur la page 32 seulement (inc/ui/design-epure.php,
 * vme_liste_v2_feuille, priorite 1010) et sur l'ecran de desabonnement d'une
 * alerte (inc/alertes/desabonnement.php). Tout est ancre sur
 * body.vme-liste-v2 ; la fenetre d'alerte, imprimee hors du conteneur du
 * site, est ancree sur sa propre classe.
 *
 * Cette feuille SURCHARGE des regles de vme-custom.css sans les effacer :
 * bandeau (VME-MARCHE-TETE), carte (VME-MARCHE-CARTE et l'ancienne couche
 * « cartes facon accueil, PARTOUT »), filtres (VME-FILTRE-ZONE,
 * VME-FILTRE-REPOS), bouton et fenetre d'alerte. Les regles de vme-custom.css
 * qui n'ont plus d'element sur la page (.vme-mt__kick, __actions, __bouton,
 * __repere, .vme-alerte-flottant) sont une dette de rangement notee au
 * changelog.
 *
 * Elle sort avant explore-widget.css, que le parent imprime dans le corps :
 * on gagne par le POIDS des selecteurs (#c27-explore-listings), pas par le
 * rang. Les !important ne repondent qu'a ceux du parent ou de l'ancienne
 * couche de carte.
 *
 * REGLE DE SURVIE (Vue) : jamais de « display » en !important sur
 * .results-view, .no-results-wrapper, .loader-bg HORS du temps de chargement
 * (ils portent un v-show). Les seuls ecrits ici sont sous
 * .loading-new-results, classe que le parent pose pendant une recherche,
 * et un « display: none » sous .mobile-tab-map a 1200 px et moins
 * [VME-LISTE-CARTE 06/10/2026] : en vue carte, le parent cache deja la liste
 * entiere ; seules nos pastilles en sortent.
 * ========================================================================= */

body.vme-liste-v2,
body.vme-alerte-page,
.vme-alerte-modal {
	--l-bleu: #1F4DBF;
	--l-bleu-survol: #163A94;
	--l-encre: #16233F;
	--l-texte: #3A4150;
	--l-aide: #5B6472;
	--l-fond-clair: #EEF3FD;
	--l-bord-carte: #E4E8EF;
	--l-bord-pilule: #C9D5EB;
	--l-bord-champ: #C9D4E6;
	--l-police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--l-anneau: 0 0 0 3px rgba(31, 77, 191, .16);
}


/* -------------------------------------------------------------------------
 * 0. LA PAGE : blanche, comme l'accueil et la fiche. [VME-LISTE-FOND]
 * Les cartes sont les seuls cadres. Le parent pose un gris neutre (#F4F4F4)
 * sur body et #c27-site-wrapper, un contour d'ombre sur .finder-container
 * et, a 1200 px et moins, un fond gris et deux ombres sur .finder-listings,
 * une ombre sous .mobile-explore-head-top.
 * ---------------------------------------------------------------------- */

body.vme-liste-v2,
body.vme-liste-v2 #c27-site-wrapper {
	background: #FFFFFF;
}

body.vme-liste-v2 #c27-explore-listings {
	box-shadow: none;
}

body.vme-liste-v2 #c27-explore-listings .finder-listings {
	background: #FFFFFF !important;
	box-shadow: none !important;
}

@media (max-width: 1200px) {
	body.vme-liste-v2 #c27-explore-listings .mobile-explore-head-top {
		box-shadow: 0 1px 0 #E2E7EF;
	}
}


/* -------------------------------------------------------------------------
 * 1. LE BANDEAU, COMPACT
 * Mesure avant : 353 px sur ordinateur, 651 px au telephone. Il ne reste que
 * le titre et une phrase (inc/plan-leboncoin.php, vme_entete_marche).
 * ---------------------------------------------------------------------- */

body.vme-liste-v2 .vme-mt__bande {
	padding: 26px max(24px, calc(50vw - 660px)) 28px;
}

body.vme-liste-v2 .vme-mt__grille {
	display: block;
	max-width: 1320px;
	margin: 0 auto;
}

/* [VME-LISTE-V2 05/10/2026] BANDEAU A L'APLOMB DU PANNEAU. Au-dessus du
   telephone, le titre du bandeau s'aligne sur le compteur et les filtres
   dessous, a toutes les largeurs (il n'etait juste qu'a 1440 px : la grille
   de 1320 px centree ne suit pas l'explorateur, qui est en pleine largeur a
   marges fixes). Le fond bleu passe sur .vme-mt, qui deborde toujours en
   pleine largeur (marge negative de vme-custom.css) ; sa marge interieure
   annule ce debord, le texte revient donc dans la colonne du conteneur.
   18 / 16 / 22 px : les marges interieures de .vme-exp-barre a chaque
   palier. Une regle future sur le fond du bandeau doit viser .vme-mt. */
@media (min-width: 761px) {
	body.vme-liste-v2 .vme-mt {
		padding: 0 calc(50vw - 50%);
		background: linear-gradient(135deg, #16305E 0%, #1F4DBF 62%, #2E5BD4 100%);
	}

	body.vme-liste-v2 .vme-mt__bande {
		padding: 26px 18px 28px;
		background: none;
	}

	body.vme-liste-v2 .vme-mt__grille {
		max-width: none;
		margin: 0;
	}
}

/* Le bandeau touche l'en-tete, a toutes les largeurs, comme les bandes des
   pages secteur et « Estimer » : la colonne d'Elementor laissait 10 px de
   blanc au-dessus (visibles au telephone depuis qu'on arrive en haut de page). */
body.vme-liste-v2 .elementor-widget-wrap:has(.vme-mt) {
	padding-top: 0;
}

@media (min-width: 992px) {
	body.vme-liste-v2 .vme-mt__bande {
		padding-left: 16px;
		padding-right: 16px;
	}
}

@media (min-width: 1201px) {
	body.vme-liste-v2 .elementor-section > .elementor-container:has(.vme-mt) {
		max-width: none;
		padding-left: 24px;
		padding-right: 24px;
	}

	body.vme-liste-v2 .vme-mt__bande {
		padding-left: 22px;
		padding-right: 22px;
	}
}

body.vme-liste-v2 .vme-mt .vme-mt__titre {
	margin: 0 0 6px;
	color: #FFFFFF;
	font-family: var(--l-police);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	text-wrap: balance;
}

body.vme-liste-v2 .vme-mt .vme-mt__texte {
	margin: 0;
	max-width: none;
	color: rgba(255, 255, 255, .88);
	font-family: var(--l-police);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.5;
}

@media (max-width: 760px) {
	body.vme-liste-v2 .vme-mt__bande {
		padding: 20px 16px 22px;
	}

	body.vme-liste-v2 .vme-mt .vme-mt__titre {
		font-size: 24px;
	}

	body.vme-liste-v2 .vme-mt .vme-mt__texte {
		font-size: 15px;
	}
}

@media (max-width: 359px) {
	body.vme-liste-v2 .vme-mt__bande {
		padding: 18px 16px 20px;
	}

	body.vme-liste-v2 .vme-mt .vme-mt__titre {
		font-size: 22px;
	}

	body.vme-liste-v2 .vme-mt .vme-mt__texte {
		font-size: 14.5px;
	}
}


/* -------------------------------------------------------------------------
 * 2. LA BARRE : compteur, tri, « Creer une alerte », carte
 * ---------------------------------------------------------------------- */

body.vme-liste-v2 .vme-exp-barre {
	font-family: var(--l-police);
}

body.vme-liste-v2 .vme-exp-barre__gauche {
	flex: 1 1 auto;
	min-width: 0;
}

body.vme-liste-v2 .vme-exp-barre__compte {
	color: var(--l-encre);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}

/* [VME-LISTE-V2 05/10/2026] VME-PASTILLES-FOCUS : le compteur recoit le focus au
   clavier quand le dernier filtre vient d'etre retire. Contour au plus pres du
   texte : le paragraphe occupe sinon toute la largeur libre de la barre. */
body.vme-liste-v2 .vme-exp-barre__compte:focus-visible {
	width: fit-content;
	outline: 2px solid var(--l-bleu);
	outline-offset: 4px;
	border-radius: 6px;
}

/* « Trier par » en bas de casse : plus aucun sur-titre en capitales. */
body.vme-liste-v2 .vme-exp-tri > span {
	color: var(--l-aide);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

body.vme-liste-v2 .vme-exp-tri select {
	border-color: var(--l-bord-pilule);
	font-family: var(--l-police);
	font-size: 14.5px;
	font-weight: 600;
}

body.vme-liste-v2 .vme-exp-tri select:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 2px;
}

body.vme-liste-v2 .vme-exp-bascule {
	font-family: var(--l-police);
	font-weight: 700;
}

/* Le bouton d'alerte : la pilule a bord fin de « Afficher la carte », avec
   une cloche au trait. Aucune ombre, rien de flottant.
   [VME-LISTE-CARTE 06/10/2026] « Carte » / « Liste » (.vme-exp-vue, 1200 px
   et moins) partage CHACUNE de ces regles : meme pilule, meme hauteur a
   chaque palier, par construction. */
body.vme-liste-v2 .vme-exp-alerte,
body.vme-liste-v2 .vme-exp-vue {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 48px;
	margin: 0;
	padding: 11px 20px;
	border: 1px solid var(--l-bord-pilule);
	border-radius: 999px;
	background: #FFFFFF;
	box-shadow: none;
	color: var(--l-bleu);
	font-family: var(--l-police);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

/* [VME-LISTE-CARTE 06/10/2026] Survol reserve a la souris : au doigt, le
   navigateur garde l'etat de survol du bouton touche jusqu'au toucher
   suivant, et « Carte / Liste » paraissait enfonce apres chaque bascule. */
@media (hover: hover) and (pointer: fine) {
	body.vme-liste-v2 .vme-exp-alerte:hover,
	body.vme-liste-v2 .vme-exp-vue:hover {
		border-color: var(--l-bleu);
		background: var(--l-fond-clair);
	}
}

body.vme-liste-v2 .vme-exp-alerte:focus-visible,
body.vme-liste-v2 .vme-exp-vue:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 2px;
}

body.vme-liste-v2 .vme-exp-alerte__ico,
body.vme-liste-v2 .vme-exp-vue__ico {
	display: inline-flex;
}

body.vme-liste-v2 .vme-exp-alerte__ico svg,
body.vme-liste-v2 .vme-exp-vue__ico svg {
	width: 18px;
	height: 18px;
}

body.vme-liste-v2 .vme-exp-alerte__court {
	display: none;
}

/* [VME-LISTE-CARTE 06/10/2026] Au-dessus de 1200 px, « Afficher la carte »
   fait ce travail : le bouton n'existe pas. Il se retire aussi pendant que le
   panneau des filtres du telephone est ouvert (l'onglet du theme faisait de
   meme), et sans carte (attribut hidden, pose par le script de la barre). */
body.vme-liste-v2 .vme-exp-vue[hidden],
html.vme-exp-filtres-ouverts body.vme-liste-v2 .vme-exp-vue {
	display: none;
}

@media (min-width: 1201px) {
	body.vme-liste-v2 .vme-exp-vue {
		display: none;
	}
}

/* « Carte » et « Liste » occupent la meme case : le bouton prend la largeur
   du plus long et ne bouge plus d'un etat a l'autre (le script ne change
   que data-vue, l'icone et le nom lu par les lecteurs d'ecran). */
body.vme-liste-v2 .vme-exp-vue__libelle {
	display: inline-grid;
}

body.vme-liste-v2 .vme-exp-vue__libelle > span {
	grid-area: 1 / 1;
}

body.vme-liste-v2 .vme-exp-vue__liste,
body.vme-liste-v2 .vme-exp-vue[data-vue="liste"] .vme-exp-vue__carte {
	visibility: hidden;
}

body.vme-liste-v2 .vme-exp-vue[data-vue="liste"] .vme-exp-vue__liste {
	visibility: visible;
}

/* 1200 px et moins : le tri est celui de la barre du theme, juste dessous
   (notre copie s'affichait en double entre 992 et 1200 px) ; « Afficher la
   carte » est deja masque. Le bouton d'alerte reste, a droite du compteur,
   suivi de « Carte / Liste » [VME-LISTE-CARTE 06/10/2026]. */
@media (max-width: 1200px) {
	body.vme-liste-v2 .vme-exp-barre {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		gap: 12px;
	}

	body.vme-liste-v2 .vme-exp-barre__droite {
		display: flex;
		flex: 0 0 auto;
	}

	body.vme-liste-v2 .vme-exp-tri {
		display: none;
	}

	/* [VME-LISTE-CARTE 06/10/2026] Sur deux lignes, « 10 entreprises / a
	   vendre » plutot que « 10 entreprises a / vendre ». */
	body.vme-liste-v2 .vme-exp-barre__compte {
		font-size: 16px;
		text-wrap: balance;
	}
}

@media (max-width: 600px) {
	body.vme-liste-v2 .vme-exp-alerte,
	body.vme-liste-v2 .vme-exp-vue {
		min-height: 44px;
		padding: 9px 15px;
		gap: 7px;
	}

	body.vme-liste-v2 .vme-exp-alerte__long {
		display: none;
	}

	body.vme-liste-v2 .vme-exp-alerte__court {
		display: inline;
	}

	body.vme-liste-v2 .vme-exp-barre__compte {
		font-size: 15.5px;
	}
}

/* [VME-LISTE-CARTE 06/10/2026] Telephone : deux pilules a cote du compteur.
   A leur taille de 600 px (100 + 96 px), le compteur n'avait plus que 100 px
   a 375 px d'ecran et passait sur TROIS lignes (« 10 / entreprises a /
   vendre »). Plus serrees (83 + 79 px), il en garde deux (« Aucune
   entreprise / ne correspond » compris), et une seule des 412 px. Hauteur
   inchangee (44 px). */
@media (max-width: 480px) {
	body.vme-liste-v2 .vme-exp-barre__droite {
		gap: 6px;
	}

	body.vme-liste-v2 .vme-exp-alerte,
	body.vme-liste-v2 .vme-exp-vue {
		padding: 9px 10px;
		gap: 5px;
		font-size: 13.5px;
	}

	body.vme-liste-v2 .vme-exp-alerte__ico svg,
	body.vme-liste-v2 .vme-exp-vue__ico svg {
		width: 16px;
		height: 16px;
	}
}

/* Tres petit ecran : la cloche seule, le nom reste dit aux lecteurs d'ecran
   (aria-label du bouton). [VME-LISTE-CARTE] Meme chose pour la carte, dont
   l'icone de retour est une liste A PUCES (trois traits seuls se liraient
   comme le menu du site). */
@media (max-width: 359px) {
	body.vme-liste-v2 .vme-exp-alerte,
	body.vme-liste-v2 .vme-exp-vue {
		width: 44px;
		padding: 0;
	}

	body.vme-liste-v2 .vme-exp-alerte__court,
	body.vme-liste-v2 .vme-exp-vue__libelle {
		display: none;
	}
}


/* -------------------------------------------------------------------------
 * 3. LES FILTRES : la valeur choisie, la liste ouverte, l'etat actif
 * Avant : une valeur devenait une etiquette grise du parent (152 x 35 px,
 * une par ligne), le cadre passait de 48 a 83, 98 ou 125 px, et « Tout
 * effacer » surgissait seul sur une rangee. Maintenant le cadre garde ses
 * 48 px : la valeur s'y lit en texte, sur une ligne, et le detail vit dans
 * la rangee de pastilles (§ 4).
 * ---------------------------------------------------------------------- */

body.vme-liste-v2 #c27-explore-listings .filter-wrapper,
body.vme-liste-v2 #c27-explore-listings .filter-wrapper input,
body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-selection,
body.vme-liste-v2 #c27-explore-listings .filter-wrapper .amount {
	font-family: var(--l-police);
}

body.vme-liste-v2 #c27-explore-listings .filter-wrapper > .explore-filter > label,
body.vme-liste-v2 #c27-explore-listings .filter-wrapper > .explore-filter .main-term > label {
	font-family: var(--l-police);
	font-size: 13px !important;
	font-weight: 600 !important;
}

/* --- Une valeur est choisie dans une liste (secteur, region) ------------- */

body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-selection--multiple:has(.select2-selection__choice) {
	height: 48px !important;
	overflow: hidden !important;
	border-color: var(--l-bleu) !important;
}

body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-selection--multiple .select2-selection__rendered:has(.select2-selection__choice) {
	display: block !important;
	flex: 1 1 auto;
	min-width: 0;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden !important;
	line-height: 46px !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
}

body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-container--default .select2-selection--multiple .select2-selection__rendered .select2-selection__choice {
	display: inline !important;
	float: none !important;
	width: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
	background-color: transparent !important;
	color: var(--l-encre) !important;
	font-family: var(--l-police);
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: inherit !important;
}

/* Plusieurs valeurs : separees par une virgule, coupees par des points de
   suspension au bout du champ. */
body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-selection__choice:has(+ .select2-selection__choice)::after {
	content: ", ";
	white-space: pre;
}

/* La croix de l'etiquette et « tout retirer » quittent le champ : les
   pastilles ont chacune leur bouton, nomme. */
body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-selection__choice__remove,
body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-selection__clear {
	display: none !important;
}

/* Le champ de saisie de la liste ne reserve plus une ligne a lui : il reste
   dans la page (le clavier s'en sert), sans place. */
body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-selection__choice ~ .select2-search--inline {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: 0 !important;
	overflow: hidden !important;
	opacity: 0;
	pointer-events: none;
}

/* --- Un champ rempli se voit : trait bleu roi ----------------------------- */

/* Au repos, les quatre invites ont la meme graisse (celle des listes sortait
   en demi-gras, celle des curseurs en maigre). */
body.vme-liste-v2 #c27-explore-listings .filter-wrapper > .explore-filter input[type="text"],
body.vme-liste-v2 #c27-explore-listings .filter-wrapper .select2-search__field,
body.vme-liste-v2 #c27-explore-listings .filter-wrapper input::placeholder {
	font-weight: 400;
}

/* [VME-LIEU-CODE-POSTAL] Localisation : l'aspect « rempli » suit le filtre
   pose (classe vme-exp-lieu-pose), pas le texte tape. */
body.vme-liste-v2 #c27-explore-listings .filter-wrapper > .explore-filter:not(.location-filter) input[type="text"]:not(:placeholder-shown),
html.vme-exp-lieu-pose body.vme-liste-v2 #c27-explore-listings .filter-wrapper > .location-filter input[type="text"]:not(:placeholder-shown) {
	border-color: var(--l-bleu) !important;
	color: var(--l-encre);
	font-weight: 600;
}

/* Curseur regle : le signal passe du bloc (il laissait une tache bleu pale
   derriere le libelle) au cadre lui-meme. */
body.vme-liste-v2 #c27-explore-listings .filter-wrapper > .range-filter:has(.amount:not(.vme-amount-repos)) {
	border-color: transparent;
	background: none;
}

body.vme-liste-v2 #c27-explore-listings .filter-wrapper > .range-filter:has(.amount:not(.vme-amount-repos)) .mylisting-range-slider {
	border-color: var(--l-bleu) !important;
}

body.vme-liste-v2 #c27-explore-listings .range-filter .amount {
	font-weight: 600;
}

body.vme-liste-v2 #c27-explore-listings .range-filter .amount.vme-amount-repos {
	font-weight: 400 !important;
}

/* --- [VME-LISTE-GRILLE 05/10/2026] La rangee de filtres est une GRILLE -----
   En flex (vme-custom.css, « flex: 1 1 190px »), le filtre qui passait a la
   ligne s'etirait sur toute la largeur : « Mot-cle » faisait 1153 px a
   1280 px d'ecran, et 1168 px en vue carte a 1920 px. En grille, il garde la
   largeur d'une colonne. Six colonnes des que chacune a 190 px (en dessous,
   l'invite « Ville ou code postal » est rognee). L'invite d'un curseur tient
   sur UNE ligne : sur deux, son cadre faisait 101 px contre 84 a cote. */
@media (min-width: 1201px) {
	body.vme-liste-v2 #c27-explore-listings .light-forms.filter-wrapper {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
		align-items: start;
	}

	body.vme-liste-v2 #c27-explore-listings .range-filter .amount {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
}

/* --- Le pied « Rechercher / Effacer » -------------------------------------
   Sur ordinateur, « Effacer les filtres » vit au bout des pastilles : le lien
   du parent, seul sur sa rangee, faisait descendre toute la liste de 46 px. */
@media (min-width: 1201px) {
	html body.vme-liste-v2 #c27-explore-listings .fc-search a.reset-results-27 {
		display: none !important;
	}
}

/* Panneau du telephone : trois commandes de meme largeur, de haut en bas
   « Rechercher » (pleine), « Effacer les filtres » (lien), « Fermer ». */
@media (max-width: 1200px) {
	body.vme-liste-v2 #c27-explore-listings .fc-search a.c27-explore-search-button {
		height: 48px !important;
		font-family: var(--l-police);
		font-size: 15px;
		font-weight: 700;
	}

	body.vme-liste-v2 #c27-explore-listings .fc-search a.reset-results-27 {
		justify-content: center;
		width: 100% !important;
		height: 44px !important;
		margin: 0 !important;
		padding: 0 !important;
		background: none !important;
		color: var(--l-bleu) !important;
		font-family: var(--l-police);
		font-size: 14.5px;
		font-weight: 700;
		opacity: 1 !important;
	}

	body.vme-liste-v2 #c27-explore-listings .fc-search a.reset-results-27 i {
		display: none;
	}

	body.vme-liste-v2 #c27-explore-listings .fc-search a.close-filters-27 {
		position: static !important;
		width: 100% !important;
		height: 46px !important;
		margin: 0 !important;
		border: 1px solid var(--l-bord-pilule);
		border-radius: 999px !important;
		background: #FFFFFF !important;
		color: var(--l-bleu) !important;
		opacity: 1 !important;
	}

	body.vme-liste-v2 #c27-explore-listings .fc-search a.close-filters-27 i {
		display: none;
	}

	body.vme-liste-v2 #c27-explore-listings .fc-search a.close-filters-27::after {
		content: "Fermer";
		font-family: var(--l-police);
		font-size: 14.5px;
		font-weight: 700;
	}

	/* Le lien « Filtres » de la barre du theme dit combien de filtres sont
	   appliques (variable posee par le script de la barre). */
	html.vme-exp-filtre-actif body.vme-liste-v2 #c27-explore-listings .explore-head-top-filters a::after {
		content: var(--vme-nb-filtres, "");
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 20px;
		height: 20px;
		margin-left: 6px;
		padding: 0 6px;
		border-radius: 999px;
		background: var(--l-bleu);
		color: #FFFFFF;
		font-family: var(--l-police);
		font-size: 12px;
		font-weight: 700;
		line-height: 1;
		vertical-align: middle;
	}
}

/* --- [VME-LISTE-V2 05/10/2026] 1200 px et moins : les deux commandes du
   theme (rangee « tri / Filtres », onglet « Vue carte / Vue liste ») prennent
   la police, l'encre et la pilule du site. Aucun « display » ici : la rangee
   et l'onglet sont pilotes par Vue. --------------------------------------- */
@media (max-width: 1200px) {
	body.vme-liste-v2 #c27-explore-listings .mobile-explore-head-top {
		color: var(--l-encre);
		font-family: var(--l-police);
	}

	body.vme-liste-v2 #c27-explore-listings .mobile-explore-head-top .select2-selection__rendered,
	body.vme-liste-v2 #c27-explore-listings .mobile-explore-head-top .explore-head-top-filters a {
		color: var(--l-encre);
		font-family: var(--l-police);
		font-size: 14.5px;
		font-weight: 600;
	}

	body.vme-liste-v2 #c27-explore-listings .mobile-explore-head-top .explore-head-search > i {
		color: var(--l-aide);
	}

	/* [VME-LISTE-CARTE 06/10/2026] PLUS RIEN NE FLOTTE SUR LES ANNONCES.
	   L'onglet « Vue carte / Vue liste » du theme (fixe en bas d'ecran,
	   par-dessus le texte des annonces pendant le defilement) est retire : le
	   bouton « Carte / Liste » de la barre ecrit le meme etat
	   (inc/ui/design-epure.php). Sans !important : ce bloc n'a pas de v-show,
	   et l'identifiant bat la regle « display: flex » du parent. Avec lui
	   partent sa bande transparente aux touchers, sa pilule, la place gardee
	   sous le pied de page (76 px), la mention OpenStreetMap remontee de
	   26 px (VME-LISTE-BARRE-BASSE, 05/10) et les 70 px du parent sous la
	   liste (regle suivante). */
	body.vme-liste-v2 #c27-explore-listings .explore-mobile-nav {
		display: none;
	}

	/* [VME-LISTE-CARTE 06/10/2026] La reserve du parent sous la liste
	   (padding-bottom 70 px = onglet de 40 px + sa marge de 30 px) part avec
	   l'onglet : 26 px, comme sur ordinateur (vme-custom.css, 1201 px et plus).
	   La vue carte garde son 0 (regle .mobile-tab-map plus bas, plus precise). */
	body.vme-liste-v2 #c27-explore-listings .finder-listings {
		padding-bottom: 26px;
	}

	/* LA CARTE GARDE SA TAILLE, montree ou non. Le parent la tient cachee
	   (visibility) a la hauteur du conteneur, puis la montre plus petite
	   (100vh - 121 ou 141 px) : Leaflet, qui retient la taille de sa boite,
	   cadrait les annonces sur la grande et en coupait le bas sur la petite.
	   Une seule hauteur, pour un meme jeu de filtres : le cadrage calcule a
	   l'arrivee des resultats reste juste. 246 px = 100 px au-dessus de la
	   barre (cibleResultats), la barre (73 px au plus), la rangee « tri /
	   Filtres » (61 px) et 12 px d'air, MOINS la rangee de pastilles quand il
	   y en a une (--vme-carte-pastilles, mesuree par inc/ui/design-epure.php,
	   qui remesure aussi Leaflet quand elle change) : barre montee, la carte
	   s'arrete au bas de l'ecran, pastilles ou non. svh : la hauteur de
	   l'ecran barres du navigateur affichees (vh en repli). Largeur : celle
	   des annonces (20 px de retrait de 481 a 1200 px, aucun en dessous). */
	body.vme-liste-v2 #c27-explore-listings .finder-map {
		width: calc(100% - 40px) !important;
		/* [VME-LISTE-CARTE 06/10/2026] moins la place des pastilles (--vme-carte-pastilles, mesuree par inc/ui/design-epure.php ; 0 sans filtre ou sans script) */
		height: max(320px, calc(100vh - 246px - var(--vme-carte-pastilles, 0px))) !important;
		height: max(320px, calc(100svh - 246px - var(--vme-carte-pastilles, 0px))) !important;
		margin: 0 20px;
		border: 1px solid var(--l-bord-carte);
		border-radius: 14px;
	}
}

@media (max-width: 480px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map {
		width: 100% !important;
		margin: 0;
	}
}

/* De 901 a 1200 px, la barre des secteurs porte l'en-tete a 121 px : la barre
   monte a 133 px (121 + 12), soit 33 px de plus. */
@media (min-width: 901px) and (max-width: 1200px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map {
		height: max(320px, calc(100vh - 279px - var(--vme-carte-pastilles, 0px))) !important;
		height: max(320px, calc(100svh - 279px - var(--vme-carte-pastilles, 0px))) !important;
	}
}

/* [VME-LISTE-CARTE 06/10/2026] ECRAN BAS (telephone couche, 812 x 375) :
   en-tete, barre (73 px) et rangee « tri / Filtres » (61 px) ne laissaient
   que 130 px de carte, sans aucune epingle. Sous 566 px de haut (599 px de
   901 a 1200 px, barre des secteurs), c'est la CARTE qui monte sous l'en-tete
   au clic de « Carte » (inc/ui/design-epure.php) et prend tout l'ecran :
   104 px = en-tete (80) + 12 px d'air en haut et en bas ; 145 px = en-tete
   et secteurs (121) + 24. « Liste », « Filtres » et les pastilles restent
   juste au-dessus. Meme hauteur montree ou cachee (cadrage juste). */
@media (max-width: 1200px) and (max-height: 565px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map {
		height: max(200px, calc(100vh - 104px)) !important;
		height: max(200px, calc(100svh - 104px)) !important;
	}
}

@media (min-width: 901px) and (max-width: 1200px) and (max-height: 598px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map {
		height: max(200px, calc(100vh - 145px)) !important;
		height: max(200px, calc(100svh - 145px)) !important;
	}
}

@media (max-width: 1200px) {

	/* VUE CARTE : barre, rangee « tri / Filtres », pastilles, puis la carte,
	   les uns sous les autres. Le parent la posait en absolu sous la rangee
	   « tri / Filtres », dans un conteneur de hauteur fixe, et masquait toute
	   la liste, pastilles comprises. Ici la liste reste affichee mais ne garde
	   que ses pastilles (ses autres enfants, v-show compris, sont caches
	   SEULEMENT en vue carte, la ou le parent cachait deja la liste entiere),
	   et la carte suit dans le flux. Les !important repondent a ceux du parent
	   (.visible-lg, hauteur de la carte) et a la liste estompee pendant une
	   recherche (§ 4). */
	body.vme-liste-v2 #c27-explore-listings.mobile-tab-map {
		height: auto;
	}

	body.vme-liste-v2 #c27-explore-listings.mobile-tab-map .finder-listings {
		display: block !important;
		float: none;
		min-height: 0;
		padding-bottom: 0;
	}

	body.vme-liste-v2 #c27-explore-listings.mobile-tab-map .finder-listings > :not(.vme-exp-pastilles) {
		display: none !important;
	}

	body.vme-liste-v2 #c27-explore-listings.mobile-tab-map .finder-map {
		position: relative;
		top: 0;
		margin-bottom: 24px;
	}
}

/* --- La liste deroulee (accrochee a la fin de <body>) --------------------- */

body.vme-liste-v2 > .select2-container--open .select2-dropdown {
	min-width: 250px;
	margin-top: 6px;
	border: 1px solid var(--l-bord-champ) !important;
	border-radius: 10px !important;
	background: #FFFFFF;
	box-shadow: 0 14px 34px rgba(12, 26, 56, .13) !important;
	font-family: var(--l-police);
	overflow: hidden;
}

body.vme-liste-v2 > .select2-container--open .select2-dropdown--above {
	margin-top: -6px;
}

body.vme-liste-v2 > .select2-container--open .select2-results__options {
	max-height: 320px;
	margin: 0;
	padding: 6px;
}

body.vme-liste-v2 > .select2-container--open .select2-results__option {
	margin: 0 !important;
	padding: 10px 12px !important;
	border: 0 !important;
	border-radius: 8px;
	background: transparent;
	color: var(--l-encre);
	font-family: var(--l-police);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.35;
	transform: none;
	transition: none;
}

body.vme-liste-v2 > .select2-container--open .select2-results__option--highlighted,
body.vme-liste-v2 > .select2-container--open .select2-results__option--highlighted[aria-selected] {
	background: var(--l-fond-clair) !important;
	color: var(--l-bleu) !important;
}

body.vme-liste-v2 > .select2-container--open .select2-results__option[aria-selected="true"] {
	color: var(--l-bleu) !important;
	font-weight: 700;
}

body.vme-liste-v2 > .select2-container--open .select2-results__message {
	color: var(--l-aide);
}

/* --- Les suggestions de ville (meme dessin que la liste) ------------------ */

body.vme-liste-v2 > .cts-autocomplete-dropdown {
	margin-top: 6px;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
	overflow: visible;
	font-family: var(--l-police);
}

body.vme-liste-v2 > .cts-autocomplete-dropdown .suggestions-list {
	box-sizing: border-box;
	width: 100%;
	min-width: 280px;
	padding: 6px;
	border: 1px solid var(--l-bord-champ) !important;
	border-radius: 10px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px rgba(12, 26, 56, .13);
	overflow: hidden;
}

body.vme-liste-v2 > .cts-autocomplete-dropdown .suggestions-list:empty {
	display: none;
}

body.vme-liste-v2 > .cts-autocomplete-dropdown .suggestion {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 0;
	border-radius: 8px;
	color: var(--l-encre);
	font-size: 14.5px;
	line-height: 1.4;
}

body.vme-liste-v2 > .cts-autocomplete-dropdown .suggestion:last-child {
	border-bottom: 0 !important;
}

body.vme-liste-v2 > .cts-autocomplete-dropdown .suggestion:hover,
body.vme-liste-v2 > .cts-autocomplete-dropdown .suggestion.active {
	background: var(--l-fond-clair);
	color: var(--l-bleu);
}

body.vme-liste-v2 > .cts-autocomplete-dropdown .suggestion i {
	color: var(--l-bleu);
}


/* -------------------------------------------------------------------------
 * 4. LA LISTE : pastilles des filtres, attente, ecran « aucun resultat »
 * ---------------------------------------------------------------------- */

/* L'en-tete natif de la liste est vide depuis le 29/09 (son contenu est
   masque) : il gardait pourtant sa marge. C'est une simple enveloppe, sans
   v-show. */
body.vme-liste-v2 #c27-explore-listings .fl-head {
	display: none !important;
}

/* [VME-LISTE-SANS-SCRIPT 05/10/2026] Navigateur SANS JavaScript : le panneau
   des filtres n'est jamais monte (gabarit de Vue brut : 1 608 px de blanc a
   1201 px et plus, depuis la mise en rangee du 29/09) et la carte reste une
   boite vide. On les retire : les annonces, servies dans la page, remontent
   sous le bandeau. La requete n'est vraie que scripts coupes : aucun effet
   pour les autres visiteurs. Pas de !important : sans script, rien ne s'y
   oppose (la classe .visible-lg du parent n'est posee que par Vue). */
@media (scripting: none) {
	body.vme-liste-v2 #c27-explore-listings .finder-search,
	body.vme-liste-v2 #c27-explore-listings .finder-map {
		display: none;
	}
}

body.vme-liste-v2 #c27-explore-listings .results-view {
	gap: 16px;
	margin-top: 0;
}

/* --- Les pastilles -------------------------------------------------------- */

body.vme-liste-v2 .vme-exp-pastilles {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 10px;
	margin: 0 0 16px;
	font-family: var(--l-police);
}

body.vme-liste-v2 .vme-exp-pastilles[hidden] {
	display: none;
}

body.vme-liste-v2 .vme-exp-pastilles__liste {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* [VME-LISTE-V2 05/10/2026] VME-PASTILLES-FIL (et VME-PASTILLES-RANGEE, meme
   remede releve a la tablette) : au-dessus du telephone, les pastilles et
   « Effacer les filtres » partagent le meme fil. Sinon, des que les pastilles
   prennent deux rangees, la liste occupe toute la largeur et le lien tombe
   seul sur une rangee de plus (44 px). L'ecart de 8 px entre pastilles est
   garde. A 700 px et moins la liste reste une boite (rangee unique qui
   defile au doigt). */
@media (min-width: 701px) {
	body.vme-liste-v2 .vme-exp-pastilles {
		column-gap: 8px;
	}

	body.vme-liste-v2 .vme-exp-pastilles__liste {
		display: contents;
	}
}

body.vme-liste-v2 .vme-exp-pastille {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 36px;
	margin: 0;
	padding: 3px 5px 3px 14px;
	border-radius: 999px;
	background: var(--l-fond-clair);
	color: var(--l-bleu);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
	list-style: none;
}

body.vme-liste-v2 .vme-exp-pastille__retirer {
	position: relative;
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--l-bleu);
	cursor: pointer;
	transition: background-color .15s ease;
}

/* Zone de toucher de 44 px autour d'une croix de 28 px. */
body.vme-liste-v2 .vme-exp-pastille__retirer::after {
	position: absolute;
	inset: -8px;
	content: "";
}

body.vme-liste-v2 .vme-exp-pastille__retirer:hover {
	background: #D5E0FA;
}

body.vme-liste-v2 .vme-exp-pastille__retirer:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 1px;
}

body.vme-liste-v2 .vme-exp-pastille__retirer svg {
	width: 12px;
	height: 12px;
}

body.vme-liste-v2 .vme-exp-pastilles__effacer,
body.vme-liste-v2 .vme-exp-vide__effacer {
	position: relative;
	min-height: 36px;
	margin: 0;
	padding: 6px 4px;
	border: 0;
	border-radius: 6px;
	background: none;
	box-shadow: none;
	color: var(--l-bleu);
	font-family: var(--l-police);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
	cursor: pointer;
}

/* [VME-LISTE-V2 05/10/2026] Zone de toucher de 44 px, boite de 36 px inchangee. */
body.vme-liste-v2 .vme-exp-pastilles__effacer::after,
body.vme-liste-v2 .vme-exp-vide__effacer::after {
	position: absolute;
	inset: -4px 0;
	content: "";
}

body.vme-liste-v2 .vme-exp-pastilles__effacer:hover,
body.vme-liste-v2 .vme-exp-vide__effacer:hover {
	background: none;
	color: var(--l-bleu-survol);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.vme-liste-v2 .vme-exp-pastilles__effacer:focus-visible,
body.vme-liste-v2 .vme-exp-vide__effacer:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 2px;
}

body.vme-liste-v2 .vme-exp-vide__effacer[hidden] {
	display: none;
}

/* Ecran « aucun resultat » : le lien d'effacement est dans l'encadre, juste
   dessous. Pas deux fois le meme lien a l'ecran. */
html.vme-liste-vide body.vme-liste-v2 .vme-exp-pastilles__effacer {
	display: none;
}

/* [VME-LISTE-CARTE 06/10/2026] En vue carte, l'encadre « aucun resultat »
   est cache (regle de la vue carte, plus haut) : le lien des pastilles
   revient, sinon plus aucun « Effacer » a l'ecran. */
@media (max-width: 1200px) {
	html.vme-liste-vide body.vme-liste-v2 #c27-explore-listings.mobile-tab-map .vme-exp-pastilles__effacer {
		display: inline-block;
	}
}

/* 1200 px et moins. La page est blanche (VME-LISTE-FOND) : la pastille garde
   son bleu pale, comme sur ordinateur (elle etait blanche a bord fin tant
   que la liste reposait sur le gris du parent).
   [VME-LISTE-V2-JONCTION] La premiere annonce ne colle plus a la barre
   « tri / Filtres » du theme : 12 px en tete de liste, pastilles ou non. La
   marge haute des pastilles passe donc a zero, ici et sous 700 px. */
@media (max-width: 1200px) {
	body.vme-liste-v2 #c27-explore-listings .finder-listings {
		padding-top: 12px;
	}

	body.vme-liste-v2 .vme-exp-pastilles {
		margin: 0 0 14px;
	}
}

/* Le libelle court du lien (« Effacer ») ne sert qu'au telephone. */
body.vme-liste-v2 .vme-exp-pastilles__court {
	display: none;
}

/* [VME-PASTILLES-TEL] Telephone : une seule rangee (quatre filtres prenaient
   quatre lignes avant la premiere annonce), mais seule la LISTE defile au
   doigt : le lien d'effacement reste a l'ecran. Le fondu de droite dit que la
   liste continue ; il ne couvre que la marge interieure de la liste, donc
   jamais la derniere pastille en bout de course. Les 4 px du haut et du bas
   logent la zone de toucher de la croix (44 px) ; la marge de la rangee les
   rend (-4 px en haut, sous les 12 px de tete de liste ; 8 px en bas) : les
   pastilles restent a 12 px de la barre et de la premiere annonce. */
@media (max-width: 700px) {
	body.vme-liste-v2 .vme-exp-pastilles {
		flex-wrap: nowrap;
		gap: 0 6px;
		margin: -4px 0 8px;
	}

	body.vme-liste-v2 .vme-exp-pastilles__liste {
		flex: 0 1 auto;
		flex-wrap: nowrap;
		min-width: 0;
		padding: 4px 24px 4px 2px;
		overflow-x: auto;
		overflow-y: hidden;
		overscroll-behavior-x: contain;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
		-webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
		mask-image: linear-gradient(90deg, #000 calc(100% - 24px), transparent);
	}

	body.vme-liste-v2 .vme-exp-pastilles__liste::-webkit-scrollbar {
		display: none;
	}

	body.vme-liste-v2 .vme-exp-pastille,
	body.vme-liste-v2 .vme-exp-pastilles__effacer {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	body.vme-liste-v2 .vme-exp-pastilles__long {
		display: none;
	}

	body.vme-liste-v2 .vme-exp-pastilles__court {
		display: inline;
	}
}

/* --- Pendant la recherche : la liste reste en place, estompee ------------
   Avant : la liste etait retiree, une roue grise prenait sa place dans une
   bande de 194 px, et la page passait de 4 104 a 1 364 px puis se
   rallongeait. Ces « display » ne valent QUE sous .loading-new-results. */
body.vme-liste-v2 #c27-explore-listings.loading-new-results .results-view {
	display: grid !important;
	opacity: .45;
	pointer-events: none;
	transition: opacity .12s ease;
}

body.vme-liste-v2 #c27-explore-listings.loading-new-results .loader-bg {
	display: none !important;
}

html.vme-liste-vide body.vme-liste-v2 #c27-explore-listings.loading-new-results .no-results-wrapper {
	display: block !important;
	opacity: .45;
	pointer-events: none;
}

/* [VME-LISTE-CARTE 06/10/2026] En vue carte (1200 px et moins), l'encadre
   « aucun resultat » reste cache pendant la recherche. La regle ci-dessus,
   plus lourde que celle de la vue carte, le remontait entre les pastilles et
   la carte le temps de la requete (312 px a 375 px, la carte poussee hors de
   l'ecran). Seulement sous .loading-new-results : la regle de survie Vue de
   l'en-tete est respectee. */
@media (max-width: 1200px) {
	html.vme-liste-vide body.vme-liste-v2 #c27-explore-listings.mobile-tab-map.loading-new-results .no-results-wrapper {
		display: none !important;
	}
}

/* Un trait bleu qui passe en tete de liste : le seul signe d'attente. Il ne
   prend aucune place (marge negative), rien ne bouge. */
body.vme-liste-v2 #c27-explore-listings.loading-new-results .finder-listings::before {
	display: block;
	height: 3px;
	margin: -3px 0 0;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(31, 77, 191, 0) 0%, #1F4DBF 50%, rgba(31, 77, 191, 0) 100%) no-repeat;
	background-size: 40% 100%;
	animation: vme-liste-attente 1s linear infinite;
	content: "";
}

@keyframes vme-liste-attente {
	from { background-position: -70% 0; }
	to   { background-position: 170% 0; }
}

@media (prefers-reduced-motion: reduce) {
	body.vme-liste-v2 #c27-explore-listings.loading-new-results .finder-listings::before {
		animation: none;
		background-position: 50% 0;
	}
}

/* [VME-LISTE-PANNEAU-PLEIN 05/10/2026] Le panneau blanc remplit son cadre.
   vme-custom.css (« UN SEUL DEFILEMENT », 31/07) donne au conteneur une
   hauteur minimale de 480 px et aligne ses colonnes en haut : quand le
   contenu est plus court (aucun resultat : 423 px), une bande grise restait
   prise dans le filet du cadre ; carte affichee, la colonne de gauche
   s'arretait de meme avant le bas de la carte. */
@media (min-width: 1201px) {
	body.vme-liste-v2 #c27-explore-listings {
		min-height: 0;
	}

	body.vme-liste-v2 #c27-explore-listings > .fc-default {
		align-self: stretch;
	}
}

/* --- Aucun resultat -------------------------------------------------------
   Une phrase utile, un bouton plein « Creer une alerte », un lien « Effacer
   les filtres ». La phrase et le lien du parent s'effacent des que notre
   bloc est pose (classe mise par le script de la barre). */
body.vme-liste-v2 #c27-explore-listings .no-results-wrapper {
	margin: 0;
	padding: 34px 24px 36px;
	border: 1px dashed #C4D2F0;
	border-radius: 14px;
	background: #F7F9FD;
	font-family: var(--l-police);
	text-align: center;
}

html.vme-liste-vide-pret body.vme-liste-v2 #c27-explore-listings .no_job_listings_found {
	display: none !important;
}

body.vme-liste-v2 .vme-exp-vide__texte {
	margin: 0 auto 18px;
	max-width: 44em;
	color: var(--l-texte);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
}

body.vme-liste-v2 .vme-exp-vide__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 24px;
	margin: 0;
}

body.vme-liste-v2 .vme-exp-vide__alerte {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	margin: 0;
	padding: 12px 26px;
	border: 0;
	border-radius: 999px;
	background: var(--l-bleu);
	box-shadow: none;
	color: #FFFFFF;
	font-family: var(--l-police);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: background-color .15s ease;
}

body.vme-liste-v2 .vme-exp-vide__alerte:hover {
	background: var(--l-bleu-survol);
	color: #FFFFFF;
}

body.vme-liste-v2 .vme-exp-vide__alerte:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 2px;
}


/* -------------------------------------------------------------------------
 * 5. LES CARTES : police, extrait de la description, « A la une », encart
 * ---------------------------------------------------------------------- */

body.vme-liste-v2 .lf-item-container.listing-preview {
	margin-bottom: 0 !important;
	border-color: var(--l-bord-carte);
	box-shadow: none;
	font-family: var(--l-police);
}

body.vme-liste-v2 .lf-item-container.listing-preview:hover {
	box-shadow: 0 10px 26px rgba(22, 48, 94, .12);
}

/* Le titre : la regle du 29/09 demandait 17 px / 700 mais perdait contre
   l'ancienne couche de carte (15,5 px !important) et contre la graisse que le
   parent impose a .case27-primary-text. */
body.vme-liste-v2 .lf-item-container .lf-item-default .lf-item-info h4.listing-preview-title {
	margin: 0 0 6px !important;
	color: var(--l-encre) !important;
	font-family: var(--l-police) !important;
	font-size: 17px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
}

body.vme-liste-v2 .lf-item-container .lf-item-default .lf-contact li {
	color: var(--l-aide) !important;
	font-family: var(--l-police);
}

body.vme-liste-v2 .lf-item-container .lf-item-default .lf-contact li.vme-lc-prix {
	color: var(--l-bleu) !important;
	font-weight: 700 !important;
}

body.vme-liste-v2 .lf-item-container .vme-lc__secteur {
	font-family: var(--l-police);
}

/* L'extrait de la description. Deux lignes sur ordinateur, trois au
   telephone : le script coupe sur un mot, la hauteur maximale n'est qu'un
   filet. */
body.vme-liste-v2 .lf-item-container .vme-lc__extrait {
	--vme-lc-lignes: 2;
	margin: 0 0 12px;
	max-width: 46em;
	max-height: calc(var(--vme-lc-lignes) * 1.55em);
	overflow: hidden;
	color: var(--l-texte);
	font-family: var(--l-police);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
	text-align: left;
	white-space: normal;
	overflow-wrap: anywhere;
}

/* Les chiffres : l'intitule s'aligne a gauche au-dessus de sa valeur (il
   heritait du centrage de l'ancienne couche). */
body.vme-liste-v2 .lf-item-container .vme-lc__attrs {
	font-family: var(--l-police);
}

body.vme-liste-v2 .lf-item-container .vme-lc__attrs li {
	align-items: flex-start;
	text-align: left;
}

/* Une annonce sans chiffres (ni prix, ni lieu, ni description parfois) : son
   contenu se centre dans la hauteur de la photo au lieu de laisser les deux
   tiers de la carte vides sous le titre. */
@media (min-width: 701px) {
	body.vme-liste-v2 .lf-item-container .lf-item-default .lf-item-info:not(:has(.vme-lc__attrs)) {
		justify-content: center;
	}

	body.vme-liste-v2 .lf-item-container .lf-item-default .lf-item-info:not(:has(.vme-lc__attrs)) .vme-lc__extrait {
		margin-bottom: 0;
	}

	body.vme-liste-v2 .lf-item-container .lf-item-default .lf-item-info:not(:has(.vme-lc__attrs)) .lf-contact:empty {
		margin: 0;
	}
}

@media (max-width: 700px) {
	body.vme-liste-v2 .lf-item-container .vme-lc__extrait {
		--vme-lc-lignes: 3;
		font-size: 14.5px;
	}
}

/* « A la une » : la pastille or de la fiche d'annonce, a la place que le
   parent lui donne (en haut a gauche de la photo). Un seul nom pour l'option,
   celui que le vendeur achete. Etat LU, jamais ecrit. */
body.vme-liste-v2 .listing-preview .lf-head-btn.ad-badge {
	padding: 4px 12px !important;
	border: 0 !important;
	background: #FDF3E0 !important;
	color: #8A6100 !important;
	font-family: var(--l-police) !important;
	font-size: 12.5px !important;
	font-weight: 700 !important;
	line-height: 1.5 !important;
}

body.vme-liste-v2 .listing-preview .ad-badge > span::after {
	content: "À la une";
}

/* VME-UNE-SANS-BULLE : le parent pose a cote de la pastille une infobulle
   noire (« Mise en avant ») qui sort au survol. La pastille dit deja
   « A la une » : un seul nom, donc pas de bulle. */
body.vme-liste-v2 .listing-preview .lf-head .tooltip-container {
	display: none;
}

/* L'encart des vendeurs : la largeur d'une carte, sans photo. */
body.vme-liste-v2 #c27-explore-listings .vme-lc-encart {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px 28px;
	margin: 0;
	padding: 18px 22px;
	border: 1px solid #DCE5F7;
	border-radius: 12px;
	background: #F7F9FD;
	font-family: var(--l-police);
}

body.vme-liste-v2 #c27-explore-listings .vme-lc-encart__texte {
	margin: 0;
	color: var(--l-texte);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

body.vme-liste-v2 #c27-explore-listings .vme-lc-encart__texte strong {
	color: var(--l-encre);
	font-weight: 700;
}

body.vme-liste-v2 #c27-explore-listings a.vme-lc-encart__lien {
	position: relative;
	flex: 0 0 auto;
	color: var(--l-bleu);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
	white-space: nowrap;
}

body.vme-liste-v2 #c27-explore-listings a.vme-lc-encart__lien::after {
	content: " \2192";
}

/* [VME-LISTE-V2 05/10/2026] Zone de toucher de 44 px autour du lien, sans
   changer sa boite : elle reste dans la marge interieure de l'encart. */
body.vme-liste-v2 #c27-explore-listings a.vme-lc-encart__lien::before {
	position: absolute;
	inset: -13px -8px;
	content: "";
}

body.vme-liste-v2 #c27-explore-listings a.vme-lc-encart__lien:hover {
	color: var(--l-bleu-survol);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.vme-liste-v2 #c27-explore-listings a.vme-lc-encart__lien:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 3px;
	border-radius: 4px;
}

@media (max-width: 860px) {
	body.vme-liste-v2 #c27-explore-listings .vme-lc-encart {
		flex-direction: column;
		align-items: flex-start;
		padding: 16px 18px;
	}

	body.vme-liste-v2 #c27-explore-listings a.vme-lc-encart__lien {
		white-space: normal;
	}
}


/* -------------------------------------------------------------------------
 * 6. LA FENETRE « CREER UNE ALERTE »
 * Imprimee dans le pied de page, hors du conteneur du site (z-index 1000,
 * voir le commentaire de .vme-alerte-flottant dans vme-custom.css). Une carte
 * blanche, des champs de 52 px, un seul bouton plein ; au telephone le pied
 * (le bouton) reste visible et seul le corps defile.
 * ---------------------------------------------------------------------- */

.vme-alerte-modal {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: rgba(10, 20, 45, .55);
	font-family: var(--l-police);
	font-size: 16px;
	line-height: 1.6;
	/* [VME-LISTE-V2 05/10/2026] Filet du script (retenirDoigt) : un toucher
	   arrive non annulable ne fait pas defiler la page derriere. */
	touch-action: none;
}

.vme-alerte-modal[hidden],
.vme-alerte-modal [hidden] {
	display: none !important;
}

.vme-alerte-modal .vme-alerte-modal__boite {
	position: relative;
	display: flex;
	flex-direction: column;
	box-sizing: border-box;
	width: 100%;
	/* [VME-ALERTE-PALIER-LARGE 12/10/2026] 520 au lieu de 480, et 32 px au lieu de 40 a droite
	   des listes (plus bas) : « Jusqu'a 1 000 000 € » ne tenait pas dans sa colonne
	   (154,5 px pour 149), et moins encore quand le corps defile (barre de 15 px). */
	/* [VME-ALERTE-LISTES-LARGES 12/10/2026] 632 au lieu de 520 : a 520, chaque liste n'offrait que
	   177 px (170 quand le corps defile) et sept a neuf noms de secteur ou de region etaient coupes
	   (« Commerce Non Alim… », « Provence-Alpes-Cot… »). A 632, le nom le plus long (217 px) tient
	   avec 9 px de marge, barre de defilement comprise, sans ajouter de rangee. */
	max-width: 632px;
	max-height: calc(100vh - 32px);
	max-height: calc(100dvh - 32px);
	padding: 0;
	overflow: hidden;
	border-radius: 16px;
	background: #FFFFFF;
	box-shadow: 0 14px 34px rgba(12, 26, 56, .13);
	color: var(--l-encre);
	outline: 0;
}

.vme-alerte-modal .vme-alerte-modal__tete {
	display: flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 14px 4px 28px;
}

.vme-alerte-modal .vme-alerte-modal__titre {
	margin: 0 !important;
	padding: 0;
	color: var(--l-encre) !important;
	font-family: var(--l-police) !important;
	font-size: 22px !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	letter-spacing: -.01em;
	text-transform: none;
}

.vme-alerte-modal .vme-alerte-modal__fermer {
	position: static;
	display: inline-flex;
	flex: 0 0 44px;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: transparent;
	box-shadow: none;
	color: var(--l-aide);
	font-size: 0;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

.vme-alerte-modal .vme-alerte-modal__fermer:hover {
	background: var(--l-fond-clair);
	color: var(--l-bleu);
}

.vme-alerte-modal .vme-alerte-modal__fermer:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 1px;
}

.vme-alerte-modal .vme-alerte-modal__fermer svg {
	width: 16px;
	height: 16px;
}

/* --- Le formulaire -------------------------------------------------------- */

.vme-alerte-modal .vme-alerte-form {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	min-height: 0;
	margin: 0;
	padding: 0;
}

.vme-alerte-modal .vme-alerte-form__corps {
	flex: 1 1 auto;
	min-height: 0;
	padding: 4px 28px 6px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	/* Le corps du formulaire defile au doigt, et se zoome a deux doigts. */
	touch-action: pan-y pinch-zoom;
}

.vme-alerte-modal .vme-alerte-form__intro {
	margin: 0 0 18px;
	color: var(--l-aide);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.55;
}

.vme-alerte-modal .vme-alerte-form__champ {
	margin: 0 0 16px;
	padding: 0;
}

.vme-alerte-modal .vme-alerte-form__champ > label {
	display: block;
	margin: 0 0 6px;
	padding: 0;
	color: var(--l-encre);
	font-family: var(--l-police);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.35;
}

.vme-alerte-modal .vme-alerte-form__option {
	color: var(--l-aide);
	font-weight: 400;
}

.vme-alerte-modal .vme-alerte-form__champ > input,
.vme-alerte-modal .vme-alerte-form__champ > select {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--l-bord-champ) !important;
	border-radius: 10px !important;
	background-color: #FFFFFF;
	box-shadow: none;
	color: var(--l-encre);
	font-family: var(--l-police);
	font-size: 16px;
	font-weight: 400;
	line-height: 1.4;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.vme-alerte-modal .vme-alerte-form__champ > select {
	padding-right: 32px; /* [VME-ALERTE-PALIER-LARGE] le chevron occupe 14 a 29 px du bord droit */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235B6472' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 8l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 15px 15px;
	-webkit-appearance: none;
	appearance: none;
	text-overflow: ellipsis;
	cursor: pointer;
}

/* L'exemple se lit comme un exemple, pas comme une valeur saisie (le parent
   l'ecrivait en noir, et la graisse du libelle descendait dans le champ). */
.vme-alerte-modal .vme-alerte-form__champ > input::placeholder {
	color: #8A93A3 !important;
	font-weight: 400;
	opacity: 1;
}

.vme-alerte-modal .vme-alerte-form__champ > input:hover,
.vme-alerte-modal .vme-alerte-form__champ > select:hover {
	border-color: #9FB4E4 !important;
}

.vme-alerte-modal .vme-alerte-form__champ > input:focus,
.vme-alerte-modal .vme-alerte-form__champ > select:focus {
	border-color: var(--l-bleu) !important;
	box-shadow: var(--l-anneau);
	outline: 0;
}

.vme-alerte-modal .vme-alerte-form__champ > input[aria-invalid="true"] {
	border-color: #D14343 !important;
}

.vme-alerte-modal .vme-alerte-form__duo {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 0 14px;
}

.vme-alerte-modal .vme-alerte-form__note {
	margin: -6px 0 16px;
	color: var(--l-aide);
	font-size: 13.5px;
	line-height: 1.5;
}

.vme-alerte-modal .vme-alerte-form__pied {
	flex: 0 0 auto;
	padding: 14px 28px 22px;
	border-top: 1px solid #EEF1F7;
	background: #FFFFFF;
}

.vme-alerte-modal .vme-alerte-form__statut {
	margin: 0 0 10px;
	color: #B22B2B;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.45;
}

.vme-alerte-modal .vme-alerte-form__envoi {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 26px;
	border: 0 !important;
	border-radius: 999px !important;
	background: var(--l-bleu) !important;
	box-shadow: none !important;
	color: #FFFFFF !important;
	font-family: var(--l-police) !important;
	font-size: 15.5px !important;
	font-weight: 700 !important;
	line-height: 1.2;
	text-align: center;
	cursor: pointer;
	transition: background-color .15s ease;
}

.vme-alerte-modal .vme-alerte-form__envoi:hover {
	background: var(--l-bleu-survol) !important;
}

.vme-alerte-modal .vme-alerte-form__envoi:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 2px;
}

.vme-alerte-modal .vme-alerte-form__envoi[disabled] {
	opacity: .7;
	cursor: progress;
}

.vme-alerte-modal .vme-alerte-form__mention {
	margin: 12px 0 0;
	color: var(--l-aide);
	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.5;
	text-align: center;
}

.vme-alerte-modal .vme-alerte-form__mention a {
	color: var(--l-bleu);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --- L'ecran de confirmation ---------------------------------------------- */

.vme-alerte-modal .vme-alerte-form__fait {
	/* Sur un ecran bas (telephone couche), l'ecran de confirmation defile dans
	   la fenetre : son bouton « Fermer » etait coupe. Meme reglage que le corps
	   du formulaire (inc/alertes/formulaire.php, zoneLibre). */
	flex: 1 1 auto;
	min-height: 0;
	padding: 6px 28px 26px;
	overflow-x: hidden;
	overflow-y: auto;
	overscroll-behavior: contain;
	touch-action: pan-y pinch-zoom;
	outline: 0;
}

.vme-alerte-modal .vme-alerte-form__fait-titre {
	margin: 0 0 8px;
	color: #0B6E4F;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

.vme-alerte-modal .vme-alerte-form__fait-titre::before {
	content: "\2713\00A0";
}

.vme-alerte-modal .vme-alerte-form__fait-texte {
	margin: 0 0 16px;
	color: var(--l-texte);
	font-size: 16px;
	line-height: 1.6;
}

.vme-alerte-modal .vme-alerte-form__criteres {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.vme-alerte-modal .vme-alerte-form__criteres li {
	margin: 0;
	padding: 4px 12px;
	border-radius: 999px;
	background: var(--l-fond-clair);
	color: var(--l-bleu);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.5;
	list-style: none;
}

@media (max-width: 520px) {
	.vme-alerte-modal {
		padding: 12px;
	}

	.vme-alerte-modal .vme-alerte-modal__boite {
		max-height: calc(100vh - 24px);
		max-height: calc(100dvh - 24px);
	}

	.vme-alerte-modal .vme-alerte-modal__tete {
		padding: 14px 8px 2px 20px;
	}

	.vme-alerte-modal .vme-alerte-modal__titre {
		font-size: 20px !important;
	}

	.vme-alerte-modal .vme-alerte-form__corps {
		padding: 4px 20px 4px;
	}

	.vme-alerte-modal .vme-alerte-form__intro {
		margin-bottom: 14px;
	}

	.vme-alerte-modal .vme-alerte-form__champ {
		margin-bottom: 14px;
	}

	.vme-alerte-modal .vme-alerte-form__duo {
		grid-template-columns: minmax(0, 1fr);
	}

	.vme-alerte-modal .vme-alerte-form__pied {
		padding: 12px 20px 16px;
	}

	.vme-alerte-modal .vme-alerte-form__mention {
		margin-top: 10px;
		font-size: 13px;
	}

	.vme-alerte-modal .vme-alerte-form__fait {
		padding: 6px 20px 20px;
	}
}

/* [VME-ALERTE-LISTES-LARGES 12/10/2026] De 521 a 663 px la fenetre n'atteint pas ses 632 px :
   Secteur et Region prennent une rangee entiere chacun, les deux paliers restent cote a cote.
   Sans effet a 520 px et moins (une seule colonne). */
@media (max-width: 663px) {
	.vme-alerte-modal .vme-alerte-form__champ:has(> select[name="secteur"]),
	.vme-alerte-modal .vme-alerte-form__champ:has(> select[name="region"]) {
		grid-column: 1 / -1;
	}
}

/* [VME-ALERTE-LISTES-LARGES] A 320 px, « Provence-Alpes-Cote d'Azur » (217 px) n'avait que 208 px :
   6 px de bord au lieu de 12, la police reste a 16 px (en dessous, l'iPhone zoome a la saisie). */
@media (max-width: 340px) {
	.vme-alerte-modal {
		padding-right: 6px;
		padding-left: 6px;
	}
}

/* [VME-ALERTE-LISTES-LARGES] Fenetre elargie : la mention sous le bouton s'equilibre sur ses deux
   lignes, le lien « Confidentialite » ne reste plus seul sur la seconde. */
.vme-alerte-modal .vme-alerte-form__mention { text-wrap: balance; }

/* [VME-ALERTE-BASSE 05/10/2026] Telephone couche (ou fenetre reduite par le
   clavier) : sous 480 px de haut, la tete et le pied prenaient 210 px et ne
   laissaient aux champs qu'une fente de 60 a 130 px. Le pied se reduit au
   bouton ; la mention passe en fin de corps (seconde copie imprimee par
   inc/alertes/formulaire.php, masquee partout ailleurs). */
.vme-alerte-modal .vme-alerte-form__mention--corps {
	display: none;
}

@media (max-height: 480px) {
	.vme-alerte-modal {
		padding-top: 8px;
		padding-bottom: 8px;
	}

	.vme-alerte-modal .vme-alerte-modal__boite {
		max-height: calc(100vh - 16px);
		max-height: calc(100dvh - 16px);
	}

	.vme-alerte-modal .vme-alerte-modal__tete {
		padding-top: 8px;
		padding-bottom: 0;
	}

	.vme-alerte-modal .vme-alerte-form__pied {
		padding-top: 10px;
		padding-bottom: 12px;
	}

	.vme-alerte-modal .vme-alerte-form__pied .vme-alerte-form__mention {
		display: none;
	}

	.vme-alerte-modal .vme-alerte-form__corps .vme-alerte-form__mention--corps {
		display: block;
		margin: 2px 0 12px;
	}
}


/* -------------------------------------------------------------------------
 * 7. L'ECRAN DE DESABONNEMENT D'UNE ALERTE (inc/alertes/desabonnement.php)
 * Une carte blanche centree, un seul bouton plein.
 * ---------------------------------------------------------------------- */

body.vme-alerte-page .vme-alerte-ecran {
	box-sizing: border-box;
	min-height: 64vh;
	padding: 72px 16px 96px;
	background: #F5F7FA;
	font-family: var(--l-police);
}

/* [VME-ALERTE-ECRAN-FOND 12/10/2026] Meme fond sous la carte et jusqu'au pied de page :
   l'enveloppe du theme (#c27-site-wrapper, haute d'un ecran, #F4F4F4) depassait de l'ecran
   (64vh, #F5F7FA). Vaut pour le desabonnement, l'activation d'une alerte et le
   renouvellement d'une annonce. */
body.vme-alerte-page #c27-site-wrapper {
	background: #F5F7FA;
}

body.vme-alerte-page .vme-alerte-ecran__carte {
	box-sizing: border-box;
	max-width: 560px;
	margin: 0 auto;
	padding: 32px 32px 34px;
	border: 1px solid var(--l-bord-carte);
	border-radius: 16px;
	background: #FFFFFF;
}

body.vme-alerte-page .vme-alerte-ecran h1.vme-alerte-ecran__titre {
	margin: 0 0 14px;
	color: var(--l-encre) !important;
	font-family: var(--l-police);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: -.015em;
}

body.vme-alerte-page .vme-alerte-ecran__texte {
	margin: 0 0 12px;
	color: var(--l-texte);
	font-size: 16px;
	line-height: 1.6;
}

body.vme-alerte-page .vme-alerte-ecran__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 24px;
	margin: 22px 0 0;
	padding: 0;
}

body.vme-alerte-page .vme-alerte-ecran .vme-alerte-ecran__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	margin: 0;
	padding: 12px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--l-bleu);
	box-shadow: none;
	color: #FFFFFF;
	font-family: var(--l-police);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease;
}

body.vme-alerte-page .vme-alerte-ecran .vme-alerte-ecran__bouton:hover {
	background: var(--l-bleu-survol);
	color: #FFFFFF;
}

body.vme-alerte-page .vme-alerte-ecran .vme-alerte-ecran__bouton:focus-visible {
	outline: 2px solid var(--l-bleu);
	outline-offset: 2px;
}

body.vme-alerte-page .vme-alerte-ecran a.vme-alerte-ecran__lien {
	color: var(--l-bleu);
	font-size: 15px;
	font-weight: 700;
	text-decoration: none;
}

body.vme-alerte-page .vme-alerte-ecran a.vme-alerte-ecran__lien:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (max-width: 600px) {
	body.vme-alerte-page .vme-alerte-ecran {
		padding: 36px 16px 56px;
	}

	body.vme-alerte-page .vme-alerte-ecran__carte {
		padding: 24px 20px 26px;
	}

	body.vme-alerte-page .vme-alerte-ecran h1.vme-alerte-ecran__titre {
		font-size: 22px;
	}

	body.vme-alerte-page .vme-alerte-ecran .vme-alerte-ecran__bouton {
		width: 100%;
		/* VME-DESABO-320 : en pleine largeur le libelle est centre, les marges
		 * laterales ne servent que de garde ; 12 px le laissent sur une ligne a 320 px. */
		padding: 12px 12px;
	}
}


/* [VME-CARTE-CADRAGE 05/10/2026] Case « Rechercher quand je deplace la carte » : police du site (elle heritait Roboto du parent). */
body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch,
body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch label {
	font-family: var(--l-police);
}

/* [VME-LISTE-CARTE 06/10/2026] Sous 375 px d'ecran, la case passait sous le
   bouton de zoom « + » (le parent interdit a son libelle d'aller a la ligne) :
   13 px de 360 a 374 px, et sous 360 px elle s'arrete avant le zoom, libelle
   sur deux lignes. 74 px = le zoom (34 px) et ses deux marges de 10 px, plus
   la marge de la case. Depuis les zones de toucher (bloc suivant, zoom de
   48 px), la largeur et le libelle sont repris plus bas : 84 px. */
@media (max-width: 374px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch label {
		font-size: 13px;
	}
}

@media (max-width: 359px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map .map-controls {
		max-width: calc(100% - 74px);
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch {
		height: auto;
		min-height: 40px;
		padding: 7px 11px;
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch .md-checkbox {
		height: auto;
		margin: 0;
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch label {
		display: block;
		min-height: 20px;
		white-space: normal;
		line-height: 1.35;
	}
}

/* [VME-LISTE-CARTE 06/10/2026] Zones de toucher de la vue carte (1200 px et
   moins). Zoom « + / - » de Leaflet en 44 px (30 par defaut). Case « Rechercher
   quand je deplace la carte » : le LIBELLE devient la zone de toucher (le
   parent lui donne line-height: 0, seule sa ligne de texte, 20 a 22 px,
   reagissait), 44 px au moins ; carre (::before) et coche (::after)
   recentres. Sous 481 px, la case s'arrete 16 px avant le zoom elargi et son
   libelle passe a la ligne si besoin. Ordinateur inchange. Ce bloc doit
   rester APRES celui des 359 px : a poids egal, il gagne par l'ordre. */
@media (max-width: 1200px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map .leaflet-control-zoom a {
		width: 44px;
		height: 44px;
		line-height: 44px;
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch {
		height: auto;
		padding: 0;
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch .md-checkbox {
		height: auto;
		margin: 0;
		overflow: visible;
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch label {
		display: flex;
		align-items: center;
		min-height: 44px;
		padding: 0 11px 0 41px;
		line-height: 1.35;
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch label::before {
		top: 50%;
		left: 11px;
		margin-top: -10px;
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch input:checked + label::after {
		top: 50%;
		left: 15px;
		margin-top: -5px;
	}
}

@media (max-width: 480px) {
	body.vme-liste-v2 #c27-explore-listings .finder-map .map-controls {
		max-width: calc(100% - 84px);
	}

	body.vme-liste-v2 #c27-explore-listings .finder-map .mapdrag-switch label {
		white-space: normal;
		padding-top: 6px;
		padding-bottom: 6px;
	}
}