/* ==========================================================================
   [VME-FICHE-V2 02/10/2026] LA NOUVELLE FICHE D'ANNONCE

   Feuille dediee, chargee seulement quand le nouveau gabarit est servi
   (inc/fiche-annonce.php). Charles : « plus d'information », « un vrai
   carrousel d'images », « plus clair », sur le modele d'une annonce
   leboncoin, dans la direction artistique du site.

   TOUT EST ANCRE SUR body.vme-fa-page. Les feuilles du parent sortent autour
   de celle-ci (certaines dans le corps de la page) et posent des regles sur
   les balises nues : p en 14 px, titres avec marge haute, listes sans puces,
   champs a 100 % de large, liens telephone en blanc. On ne compte donc pas
   sur l'ordre : chaque regle porte la classe de body. Une seule exception,
   expliquee sur place : les marges de defilement posees sur html (section 2).

   UN SEUL NIVEAU DE CADRE. Charles deteste « l'effet de double formulaire »,
   des cadres emboites. La page est blanche, les blocs se suivent, separes
   par un filet et de l'espace ; la seule carte bordee est celle du prix, a
   droite. Les chiffres vivent dans un panneau teinte SANS bord, cellules
   separees par un filet.

   Seuils : 1000 px (deux colonnes au-dessus, une colonne et la barre fixe
   en dessous) et 700 px (carrousel bord a bord).
   Graisses : 400, 600, 700 seulement (Inter n'est chargee qu'ainsi).
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. Jetons (toutes valeurs relevees sur le site : accueil, Estimer, pages
      secteur, depot)
   -------------------------------------------------------------------------- */

body.vme-fa-page {
	--f-bleu: #1F4DBF;
	--f-bleu-survol: #163A94;
	--f-encre: #16233F;
	--f-texte: #3A4150;
	--f-texte-long: #2B3445;
	--f-aide: #5B6472;
	--f-fond-clair: #EEF3FD;
	--f-fond-doux: #F5F7FA;
	--f-bord-carte: #E4E8EF;
	--f-bord-pilule: #C9D5EB;
	--f-bord-champ: #C9D4E6;
	--f-filet-repere: #D3DFF8;
	/* Texte de la pastille « A la une ». L'or du compte (#B97A0F) ne fait que
	   3,26 pour 1 sur ce fond en 12,5 px ; #8A6100 (deja employe pour ce
	   libelle dans vme-custom.css, .vme-reference__alaune) fait 5,03. Le fond
	   reste celui du compte. */
	--f-or: #8A6100;
	--f-or-fond: #FDF3E0;
	--f-voile-photo: rgba(10, 18, 38, .62);
	--f-police: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--f-rayon-carte: 14px;
	--f-rayon-vignette: 10px;
	--f-rayon-champ: 10px;
	--f-rayon-pilule: 999px;
	--f-anneau: 0 0 0 3px rgba(31, 77, 191, .22);
	--f-largeur: 1170px;
	--f-marge: 15px;
	--f-cote: 360px;
	--f-gouttiere: 40px;
	/* Bas de l'en-tete fixe : 121 px + la barre des secteurs (41 px). Le script
	   le ramene a la seule barre des secteurs quand l'en-tete se retire. */
	--f-entete: 162px;

	background: #FFFFFF;
}

/* Le parent peint l'enveloppe du site en gris neutre (#f4f4f4). */
body.vme-fa-page #c27-site-wrapper {
	background: #FFFFFF;
}


/* --------------------------------------------------------------------------
   2. Socle : police, remise a plat des balises nues du parent
   -------------------------------------------------------------------------- */

/* La marge haute reserve la place de l'en-tete fixe, comme le fait
   .c27-top-content-margin sur les autres pages (89 px, 80 px sous 1200 px,
   60 px sous 480 px). La fiche du parent n'a pas cette reserve : sa
   couverture passe SOUS l'en-tete. */
body.vme-fa-page .vme-fa {
	padding: 89px 0 72px;
	font-family: var(--f-police);
	font-size: 16px;
	line-height: 1.6;
	color: var(--f-encre);
	-webkit-text-size-adjust: 100%;
}

body.vme-fa-page .vme-fa *,
body.vme-fa-page .vme-fa *::before,
body.vme-fa-page .vme-fa *::after {
	box-sizing: border-box;
}

/* Inter ne descend pas seule dans les champs et les boutons. */
body.vme-fa-page .vme-fa button,
body.vme-fa-page .vme-fa input,
body.vme-fa-page .vme-fa select,
body.vme-fa-page .vme-fa textarea {
	font-family: var(--f-police);
}

/* [VME-FICHE-V2 02/10/2026] Poids d'UNE BALISE (0,0,1) : l'ancre est en
   :where (poids nul), la liste de balises en :is (poids d'une balise). A
   egalite avec les regles de balises du parent (vendor.css : h1, h2, h3 avec
   marge haute de 20 px, p avec 10 px sous lui ; frontend.css : p en 14 px),
   ces remises a plat gagnent par leur RANG (feuille mise en file a la
   priorite 1010) et cedent devant la moindre classe, celles du plugin
   comprises (bloc de valorisation, simulateur). Ne jamais remettre la liste
   de balises dans un :where : a poids nul la regle perd contre le parent,
   quel que soit son rang. */
:where(body.vme-fa-page .vme-fa) :is(p, h1, h2, h3, ul, ol, dl, dt, dd) {
	margin: 0;
	padding: 0;
}

:where(body.vme-fa-page .vme-fa) :is(p, li, dt, dd) {
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}

:where(body.vme-fa-page .vme-fa) :is(ul, ol) {
	list-style: none;
}

:where(body.vme-fa-page .vme-fa) :is(h1, h2, h3) {
	font-family: var(--f-police);
	color: var(--f-encre);
}

:where(body.vme-fa-page .vme-fa) a {
	color: var(--f-bleu);
	text-decoration: none;
}

body.vme-fa-page .vme-fa a:focus-visible,
body.vme-fa-page .vme-fa button:focus-visible,
body.vme-fa-page .vme-fa [tabindex]:focus-visible {
	outline: 2px solid var(--f-bleu);
	outline-offset: 2px;
}

/* [VME-FA-FOCUS-BARRE] Le focus au clavier ne passe jamais sous une barre
   fixe. Le navigateur amene l'element qui recoit le focus au bord de l'ecran,
   donc SOUS l'en-tete fixe (en remontant) ou sous la barre fixe du bas (en
   descendant). On lui dit quelle zone est reellement visible : hauteur de
   l'en-tete + 16 px, hauteur de la barre du bas (69 px) + 17 px.
   Seuils : 1200 px (l'en-tete perd sa sur-barre), 999 px (barre du bas),
   900 px (la barre des secteurs disparait, vme-custom.css), 480 px (en-tete
   de 60 px). SEULE regle posee sur html, sans la classe de body :
   scroll-padding n'agit que sur la racine, :has() ferait tomber la regle
   sur les navigateurs anciens, et cette feuille n'est chargee que sur la
   fiche. Si l'en-tete ou la barre change de hauteur, reprendre ces valeurs. */
html {
	scroll-padding-top: 178px;
}

@media (max-width: 1200px) {
	html {
		scroll-padding-top: 137px;
	}
}

@media (max-width: 999px) {
	html {
		scroll-padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
	}
}

@media (max-width: 900px) {
	html {
		scroll-padding-top: 96px;
	}
}

@media (max-width: 480px) {
	html {
		scroll-padding-top: 76px;
	}
}

/* Texte reserve aux lecteurs d'ecran. */
body.vme-fa-page .vme-fa-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

body.vme-fa-page .vme-fa-icone {
	flex: 0 0 auto;
	display: block;
}


/* --------------------------------------------------------------------------
   3. Cadre, fil d'Ariane, colonnes
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-cadre {
	max-width: var(--f-largeur);
	margin: 0 auto;
	padding: 0 var(--f-marge);
}

/* 46 px de haut : resserre pour qu'un titre d'une ligne tienne dans le premier
   ecran d'un portable (voir la section 13). */
body.vme-fa-page .vme-fa-fil {
	padding: 14px 0 12px;
	font-size: 13.5px;
	line-height: 1.5;
	color: var(--f-aide);
}

body.vme-fa-page .vme-fa-fil ol {
	display: flex;
	min-width: 0;
	margin: 0;
}

body.vme-fa-page .vme-fa-fil li {
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Le dernier cran (le titre de l'annonce) est le seul a se tronquer. */
body.vme-fa-page .vme-fa-fil li[aria-current] {
	flex: 0 1 auto;
	min-width: 0;
	max-width: 52ch;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--f-encre);
}

/* Separateur decoratif : la seconde declaration le tait aux lecteurs d'ecran
   (texte de remplacement vide) ; la premiere reste pour les navigateurs qui ne
   connaissent pas cette ecriture. Ne pas en retirer une des deux. */
body.vme-fa-page .vme-fa-fil li + li::before {
	content: "\203A";
	content: "\203A" / "";
	margin: 0 8px;
	color: #9AA3B2;
}

/* Zone tactile de 44 px portee par un pseudo-element : le lien garde sa
   boite de 16 px, rien ne bouge a l'ecran. Se mesure par elementFromPoint,
   pas par la boite du lien. */
body.vme-fa-page .vme-fa-fil a {
	position: relative;
	color: var(--f-aide);
}

body.vme-fa-page .vme-fa-fil a::after {
	content: "";
	position: absolute;
	top: -14px;
	right: 0;
	bottom: -14px;
	left: 0;
}

body.vme-fa-page .vme-fa-fil a:hover {
	color: var(--f-bleu);
	text-decoration: underline;
}

/* [VME-FICHE-ORDRE] Le code ecrit la colonne du prix ENTRE la tete et les
   blocs (ordre de l'ecran a une colonne). Sur ordinateur : a gauche deux
   rangees (photos et tete, puis les blocs), a droite la colonne du prix sur
   les deux. « auto 1fr » : si la carte du prix est plus haute que la colonne
   de gauche, le surplus va sous les blocs, jamais entre le titre et les
   chiffres. L'ecart ne vaut qu'entre les colonnes (0 entre les rangees). */
body.vme-fa-page .vme-fa-colonnes {
	display: grid;
	grid-template-columns: minmax(0, 1fr) var(--f-cote);
	grid-template-rows: auto 1fr;
	gap: 0 var(--f-gouttiere);
}

body.vme-fa-page .vme-fa-principal {
	grid-column: 1;
	min-width: 0;
}

body.vme-fa-page .vme-fa-principal--haut {
	grid-row: 1;
}

body.vme-fa-page .vme-fa-principal--suite {
	grid-row: 2;
}


/* --------------------------------------------------------------------------
   4. Carrousel de photos
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-galerie__cadre {
	position: relative;
}

/* La piste : defilement natif a accroche. Le rapport 3/2 est celui des
   photos d'annonce (1400 x 933) ; une photo d'un autre format est recadree
   ici, et montree entiere dans la visionneuse. */
body.vme-fa-page .vme-fa-galerie__piste {
	display: flex;
	/* Largeur DITE : sans elle, une hauteur plafonnee (ecran peu haut) se
	   reporterait sur la largeur par le rapport, et le cadre retrecirait. */
	width: 100%;
	aspect-ratio: 3 / 2;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	border-radius: var(--f-rayon-carte);
	background: var(--f-fond-doux);
}

body.vme-fa-page .vme-fa-galerie__piste::-webkit-scrollbar {
	display: none;
}

body.vme-fa-page .vme-fa-galerie__piste:focus-visible {
	outline-offset: 3px;
}

body.vme-fa-page .vme-fa-galerie__vue {
	position: relative;
	flex: 0 0 100%;
	display: block;
	height: 100%;
	scroll-snap-align: start;
	scroll-snap-stop: always;
	cursor: zoom-in;
}

/* La piste rogne ce qui la depasse : le cerne de focus d'une photo est
   dessine a l'INTERIEUR, clair puis bleu, lisible sur toute image. */
body.vme-fa-page .vme-fa a.vme-fa-galerie__vue:focus-visible {
	outline: 3px solid var(--f-bleu);
	outline-offset: -3px;
}

body.vme-fa-page .vme-fa a.vme-fa-galerie__vue:focus-visible::after {
	content: "";
	position: absolute;
	top: 3px;
	right: 3px;
	bottom: 3px;
	left: 3px;
	border: 3px solid #FFFFFF;
	pointer-events: none;
}

/* Selecteur a trois classes : une regle du parent impose height: auto aux
   images. */
body.vme-fa-page .vme-fa-galerie .vme-fa-galerie__photo {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

body.vme-fa-page .vme-fa-galerie__fleche {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: #FFFFFF;
	color: var(--f-encre);
	box-shadow: 0 2px 12px rgba(12, 26, 56, .22);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}

body.vme-fa-page .vme-fa-galerie__fleche[hidden] {
	display: none;
}

body.vme-fa-page .vme-fa-galerie__fleche--precedente {
	left: 14px;
}

body.vme-fa-page .vme-fa-galerie__fleche--suivante {
	right: 14px;
}

body.vme-fa-page .vme-fa-galerie__fleche:hover {
	background: var(--f-fond-clair);
	color: var(--f-bleu);
}

/* [VME-FA-FLECHE-BORNE] A une borne la fleche reste a sa place, eteinte : elle
   continue de recevoir le clic (sinon il tomberait sur la photo et ouvrirait
   le plein ecran). Pas d'opacity : le cerne de focus doit rester net. */
body.vme-fa-page .vme-fa-galerie__fleche[aria-disabled="true"],
body.vme-fa-page .vme-fa-galerie__fleche[aria-disabled="true"]:hover {
	background: rgba(255, 255, 255, .5);
	color: rgba(22, 35, 63, .5);
	box-shadow: none;
	cursor: default;
}

body.vme-fa-page .vme-fa-galerie__fleche:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: 0;
	box-shadow: 0 0 0 4px var(--f-bleu);
}

body.vme-fa-page .vme-fa-galerie__compteur {
	position: absolute;
	right: 14px;
	bottom: 14px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: var(--f-rayon-pilule);
	background: var(--f-voile-photo);
	color: #FFFFFF;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
	font-variant-numeric: tabular-nums;
	pointer-events: none;
}

/* La rangee defile (overflow auto) : elle rogne donc ce qui la depasse, dans
   les deux sens. 4 px de remplissage, repris en marge negative, laissent sa
   place au cerne de focus des vignettes (2 px a 2 px de distance) sans rien
   deplacer dans la page. */
body.vme-fa-page .vme-fa-galerie__vignettes {
	display: flex;
	gap: 10px;
	margin: 6px -4px -4px;
	padding: 4px;
	overflow-x: auto;
	scrollbar-width: none;
}

body.vme-fa-page .vme-fa-galerie__vignettes::-webkit-scrollbar {
	display: none;
}

/* Les vignettes cedent de la largeur plutot que de deborder la colonne : six
   tiennent a 1024 px, dix a 1000 px. Avec 2 ou 3 photos elles gardent
   96 x 64. */
body.vme-fa-page .vme-fa-galerie__vignette {
	position: relative;
	flex: 0 1 96px;
	min-width: 48px;
	height: auto;
	aspect-ratio: 3 / 2;
	padding: 0;
	border: 0;
	border-radius: var(--f-rayon-vignette);
	background: var(--f-fond-doux);
	overflow: hidden;
	cursor: pointer;
	opacity: .5; /* [VME-SANS-CONTOUR 19/10/2026] reprise : .7 avant ; l'ecart d'opacite remplace le cerne */
	transition: opacity .15s ease;
}

body.vme-fa-page .vme-fa-galerie__vignette:hover,
body.vme-fa-page .vme-fa-galerie__vignette:focus-visible {
	opacity: .8;
}
body.vme-fa-page .vme-fa-galerie__vignette.est-active {
	opacity: 1;
}

/* [VME-SANS-CONTOUR 19/10/2026] reprise : plus de cerne bleu roi de 3 px par-dessus l'image. La vignette en cours se
   signale par sa pleine opacite ; les autres restent voilees (.5, .8 au survol). Le focus clavier garde
   son contour (regle des boutons de la fiche, plus haut). */
body.vme-fa-page .vme-fa-galerie__vignette.est-active::after { content: none; }

/* Posee sur toute la vignette (qui tient sa hauteur de son rapport 3/2) :
   une hauteur en pourcentage n'y serait pas sure dans tous les navigateurs. */
body.vme-fa-page .vme-fa-galerie .vme-fa-galerie__miniature {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Annonce sans photo : un bandeau bas et clair, aux couleurs du site. C'est
   la promesse faite au vendeur dans le formulaire de depot (« un fond neutre
   aux couleurs du site »). Jamais un carrousel vide. */
body.vme-fa-page .vme-fa-galerie--vide {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	min-height: 150px;
	padding: 24px;
	border-radius: var(--f-rayon-carte);
	background: linear-gradient(135deg, #F3F6FD 0%, #DCE6FB 100%);
}

body.vme-fa-page .vme-fa-galerie__boutique {
	flex: 0 0 auto;
	color: var(--f-bleu);
	opacity: .5;
}

body.vme-fa-page .vme-fa-galerie__sans {
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--f-texte);
}

/* [VME-FICHE-V2-VISIONNEUSE] Visionneuse plein ecran (PhotoSwipe du parent,
   imprimee dans le pied, hors de .vme-fa) : le bouton qui a le focus au
   clavier se voit. */
body.vme-fa-page .pswp .pswp__button:focus-visible {
	outline: 2px solid #FFFFFF;
	outline-offset: -4px;
	opacity: 1;
}

/* Apres quatre secondes sans souris le parent efface la barre : pas tant
   qu'un bouton y a le focus au clavier. Regle a part : un navigateur qui
   ignore :has() ne doit pas perdre la regle du dessus. */
body.vme-fa-page .pswp .pswp__ui--idle .pswp__top-bar:has(.pswp__button:focus-visible) {
	opacity: 1;
}


/* --------------------------------------------------------------------------
   5. Tete : pastilles, titre, ligne discrete
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-tete {
	margin-top: 26px;
}

body.vme-fa-page .vme-fa-tete__pastilles {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-bottom: 12px;
}

body.vme-fa-page .vme-fa-pastille {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: var(--f-rayon-pilule);
	background: var(--f-fond-clair);
	color: var(--f-bleu);
	font-size: 12.5px;
	font-weight: 700;
	line-height: 1.5;
}

body.vme-fa-page .vme-fa-pastille--une {
	background: var(--f-or-fond);
	color: var(--f-or);
}

body.vme-fa-page .vme-fa-titre {
	font-size: 30px;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -.015em;
	color: var(--f-encre);
	overflow-wrap: anywhere;
	text-wrap: balance;
}

/* Nom officiel de l'entreprise, quand le cedant a choisi de l'afficher. La
   classe est celle que cherche le script de confidentialite.php : il la
   trouve et n'ajoute donc pas un second nom. */
body.vme-fa-page .vme-fa .vme-nom-societe {
	margin: 6px 0 0;
	color: var(--f-texte);
	font-size: 15.5px;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0;
}

/* « Commune (code postal) · Region · Publiee le ... · Ref. ... ». Le point
   median est porte par chaque element ; celui qui ouvre une ligne tombe dans
   la marge negative, rognee : aucune ligne ne commence par un point. */
body.vme-fa-page .vme-fa-tete__ligne {
	display: flex;
	flex-wrap: wrap;
	margin: 10px 0 0 -18px;
	clip-path: inset(0 0 0 18px);
	color: var(--f-aide);
	font-size: 14.5px;
	line-height: 1.6;
}

body.vme-fa-page .vme-fa-tete__ligne li {
	position: relative;
	padding-left: 18px;
}

body.vme-fa-page .vme-fa-tete__ligne li::before {
	content: "\00B7";
	content: "\00B7" / "";
	position: absolute;
	left: 7px;
	font-weight: 700;
}


/* --------------------------------------------------------------------------
   6. L'essentiel : des chiffres etiquetes, dans un panneau sans bord
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-essentiel {
	margin-top: 24px;
}

/* Rangee souple : parts egales tant que chaque chiffre tient dans sa part ;
   une tuile trop large pour sa part passe a la ligne (texte agrandi par le
   lecteur). Chaque tuile porte un filet a gauche, recule de 1 px : celui
   d'une tuile en debut de rangee tombe hors du panneau, qui le rogne. */
body.vme-fa-page .vme-fa-chiffres {
	display: flex;
	flex-wrap: wrap;
	padding: 20px 0;
	overflow: hidden;
	border-radius: var(--f-rayon-carte);
	background: var(--f-fond-doux);
}

/* Colonne a deux etages : quand un intitule passe sur deux lignes, les
   valeurs d'une meme rangee restent alignees sur leur pied. */
body.vme-fa-page .vme-fa-chiffre {
	display: flex;
	flex: 1 1 0%;
	flex-direction: column;
	min-width: min-content;
	margin-left: -1px;
	padding: 0 22px;
	border-left: 1px solid var(--f-bord-carte);
}

/* Quatre tuiles (la quatrieme : « Le prix couvre ») : deux rangees de deux.
   Sur une seule rangee chaque tuile n'a que 100 a 140 px utiles, « Les parts
   de la societe » se casse sur trois lignes et « · 11 ans » part seul a la
   ligne. Sous 700 px le bloc telephone fait deja la meme chose. */
body.vme-fa-page .vme-fa-chiffres--n4 {
	row-gap: 18px;
}

body.vme-fa-page .vme-fa-chiffres--n4 .vme-fa-chiffre {
	flex-basis: 50%;
}

/* [VME-LOCAUX 02/10/2026] Cinq ou six tuiles (surface et loyer s'ajoutent) : rangees de trois,
   sans etirer les tuiles d'une derniere rangee incomplete (les filets restent alignes). */
body.vme-fa-page .vme-fa-chiffres--n5,
body.vme-fa-page .vme-fa-chiffres--n6 {
	row-gap: 18px;
}

body.vme-fa-page .vme-fa-chiffres--n5 .vme-fa-chiffre,
body.vme-fa-page .vme-fa-chiffres--n6 .vme-fa-chiffre {
	flex: 0 1 33.333%;
}

body.vme-fa-page .vme-fa-chiffre dt {
	color: var(--f-aide);
	font-size: 13.5px;
	line-height: 1.4;
}

body.vme-fa-page .vme-fa-chiffre dd {
	margin-top: auto;
	padding-top: 4px;
	color: var(--f-encre);
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	font-variant-numeric: tabular-nums;
}

body.vme-fa-page .vme-fa-chiffre__note {
	color: var(--f-aide);
	font-size: 15px;
	font-weight: 400;
	white-space: nowrap;
}

body.vme-fa-page .vme-fa-chiffre__note::before {
	content: "\00B7\00A0";
	content: "\00B7\00A0" / "";
}


/* --------------------------------------------------------------------------
   7. Blocs de la colonne principale
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-bloc {
	margin-top: 32px;
	padding-top: 30px;
	border-top: 1px solid var(--f-bord-carte);
}

body.vme-fa-page .vme-fa-bloc__titre {
	margin-bottom: 14px;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.005em;
	color: var(--f-encre);
}

/* Presentation : le texte du cedant, 65 a 75 caracteres par ligne. */
body.vme-fa-page .vme-fa-texte {
	max-width: 640px;
	color: var(--f-texte-long);
	font-size: 17px;
	line-height: 1.65;
	overflow-wrap: anywhere;
}

body.vme-fa-page .vme-fa-texte p {
	margin: 0 0 14px;
	color: inherit;
	font-size: inherit;
	line-height: inherit;
}

body.vme-fa-page .vme-fa-texte > :last-child {
	margin-bottom: 0;
}

body.vme-fa-page .vme-fa-texte ul,
body.vme-fa-page .vme-fa-texte ol {
	margin: 0 0 14px;
	padding-left: 22px;
}

body.vme-fa-page .vme-fa-texte ul {
	list-style: disc;
}

body.vme-fa-page .vme-fa-texte ol {
	list-style: decimal;
}

body.vme-fa-page .vme-fa-texte a {
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Texte long : replie a douze lignes par le script (12 x 28 px), fondu en
   bas. Sans script, rien n'est replie. */
body.vme-fa-page .vme-fa-texte.est-replie {
	max-height: 336px;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
	mask-image: linear-gradient(to bottom, #000 calc(100% - 70px), transparent);
}

/* Zone tactile de 44 px : le retrait haut est repris par la marge interieure. */
body.vme-fa-page .vme-fa-suite {
	min-height: 44px;
	margin-top: 2px;
	padding: 10px 0;
	border: 0;
	background: none;
	color: var(--f-bleu);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.4;
	cursor: pointer;
}

body.vme-fa-page .vme-fa-suite[hidden] {
	display: none;
}

body.vme-fa-page .vme-fa-suite:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* La cession : une liste de reperes (intitule bleu, phrase dessous).
   [VME-SANS-CONTOUR 19/10/2026] plus de filet gauche de 3 px (retire aussi d'Estimer et
   des pages secteur) : l'intitule bleu en gras suffit a rythmer la liste. */
body.vme-fa-page .vme-fa-reperes {
	display: grid;
	gap: 18px;
	max-width: 640px;
}

body.vme-fa-page .vme-fa-repere {
	padding-left: 0;
	border-left: 0;
}

body.vme-fa-page .vme-fa-repere dt {
	color: var(--f-bleu);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
}

body.vme-fa-page .vme-fa-repere dd {
	margin-top: 2px;
	color: var(--f-texte);
	font-size: 16px;
	line-height: 1.55;
}

/* Lieu : la carte est son propre cadre. isolation : les calques de Leaflet
   montent jusqu'a z-index 1000 et passeraient DEVANT l'en-tete fixe. */
body.vme-fa-page .vme-fa-plan {
	position: relative;
	z-index: 0;
	isolation: isolate;
	height: 300px;
	margin-bottom: 14px;
	border-radius: var(--f-rayon-carte);
	background: var(--f-fond-doux);
	overflow: hidden;
}

/* Boutons de zoom de Leaflet, ramenes au dessin du site. */
body.vme-fa-page .vme-fa-plan .leaflet-bar {
	border: 1px solid var(--f-bord-carte);
	border-radius: var(--f-rayon-champ);
	box-shadow: 0 2px 10px rgba(12, 26, 56, .12);
	overflow: hidden;
}

body.vme-fa-page .vme-fa-plan .leaflet-bar a {
	width: 44px;
	height: 44px;
	border-bottom-color: var(--f-bord-carte);
	color: var(--f-encre);
	font-size: 20px;
	line-height: 44px;
}

body.vme-fa-page .vme-fa-plan .leaflet-bar a:hover {
	background: var(--f-fond-clair);
	color: var(--f-bleu);
}

/* Zoom au maximum (au telephone, des le premier toucher) : le bouton inactif
   se voit comme tel. */
body.vme-fa-page .vme-fa-plan .leaflet-bar a.leaflet-disabled,
body.vme-fa-page .vme-fa-plan .leaflet-bar a.leaflet-disabled:hover {
	background: var(--f-fond-doux);
	color: #A9B1BD;
	cursor: default;
}

body.vme-fa-page .vme-fa-plan .leaflet-control-attribution,
body.vme-fa-page .vme-fa-plan .leaflet-control-attribution a {
	font-family: var(--f-police);
	font-size: 11px;
	color: var(--f-aide);
}

body.vme-fa-page .vme-fa-lieu__commune {
	color: var(--f-encre);
	font-size: 16.5px;
	font-weight: 600;
	line-height: 1.4;
}

body.vme-fa-page .vme-fa-lieu__note {
	margin-top: 2px;
	color: var(--f-aide);
	font-size: 14.5px;
	line-height: 1.5;
}

/* Conseils de prudence : trois lignes sobres, un titre plus petit. */
body.vme-fa-page .vme-fa-prudence__titre {
	margin-bottom: 10px;
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.35;
	color: var(--f-encre);
}

body.vme-fa-page .vme-fa-prudence__liste {
	display: grid;
	gap: 6px;
	color: var(--f-texte);
	font-size: 15.5px;
	line-height: 1.55;
}

body.vme-fa-page .vme-fa-prudence__liste li {
	position: relative;
	padding-left: 18px;
}

body.vme-fa-page .vme-fa-prudence__liste li::before {
	content: "";
	position: absolute;
	top: .62em;
	left: 2px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #9DB4EA;
}


/* --------------------------------------------------------------------------
   8. Blocs du plugin, rhabilles (valorisation choisie par le vendeur,
      simulateur de financement). Le HTML est celui des codes courts, intact.
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-valorisation .vme-valo {
	background: none;
	font-family: var(--f-police);
}

body.vme-fa-page .vme-fa-valorisation .vme-valo__entete {
	flex-wrap: wrap;
	margin-bottom: 12px;
}

/* Le titre du bloc prend le dessin des autres titres : pas de sur-titre en
   capitales. */
body.vme-fa-page .vme-fa-valorisation .vme-valo__titre {
	margin: 0;
	color: var(--f-encre);
	font-family: var(--f-police);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.005em;
	text-transform: none;
}

body.vme-fa-page .vme-fa-valorisation .vme-valo__prix,
body.vme-fa-page .vme-fa-valorisation .vme-valo__methode-valeur {
	font-weight: 700;
}

body.vme-fa-page .vme-fa-valorisation .vme-valo__contexte {
	color: var(--f-texte);
	font-size: 15px;
	line-height: 1.55;
}

body.vme-fa-page .vme-fa-valorisation .vme-valo__titres,
body.vme-fa-page .vme-fa-valorisation .vme-valo__actif {
	padding: 12px 16px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--f-encre);
}

body.vme-fa-page .vme-fa-valorisation .vme-valo__titres-detail,
body.vme-fa-page .vme-fa-valorisation .vme-valo__methode-label,
body.vme-fa-page .vme-fa-valorisation .vme-valo__pied {
	color: var(--f-aide);
	font-size: 13.5px;
}

body.vme-fa-page .vme-fa-valorisation .vme-valo__methode-valeur {
	color: var(--f-encre);
	font-size: 16px;
}

body.vme-fa-page .vme-fa-valorisation .vme-valo__methodes {
	border-top-color: var(--f-bord-carte);
}

/* Simulateur : champs de 50 px, mensualite bien lisible. */
body.vme-fa-page .vme-fa-financer .vme-financement {
	font-size: 16px;
	line-height: 1.6;
}

body.vme-fa-page .vme-fa-financer .vme-financement__intro {
	margin: 0 0 16px;
	color: var(--f-texte);
	font-size: 15.5px;
	line-height: 1.55;
}

body.vme-fa-page .vme-fa-financer .vme-financement__champs {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px 16px;
	margin: 0 0 16px;
}

body.vme-fa-page .vme-fa-financer .vme-financement__champs label {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	gap: 6px;
	margin: 0;
	color: var(--f-texte);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	/* Texte agrandi par le lecteur : le libelle se replie plutot que de mordre
	   sur le champ voisin. */
	overflow-wrap: anywhere;
}

body.vme-fa-page .vme-fa-financer .vme-financement__champs input {
	display: block;
	width: 100%;
	height: 50px;
	padding: 0 14px;
	border: 1px solid var(--f-bord-champ);
	border-radius: var(--f-rayon-champ);
	background: #FFFFFF;
	box-shadow: none;
	color: var(--f-encre);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	-moz-appearance: textfield;
	appearance: textfield;
}

body.vme-fa-page .vme-fa-financer .vme-financement__champs input::-webkit-outer-spin-button,
body.vme-fa-page .vme-fa-financer .vme-financement__champs input::-webkit-inner-spin-button {
	margin: 0;
	-webkit-appearance: none;
}

body.vme-fa-page .vme-fa-financer .vme-financement__champs input:focus {
	border-color: var(--f-bleu);
	box-shadow: var(--f-anneau);
	outline: none;
}

body.vme-fa-page .vme-fa-financer .vme-financement__resultat {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 2px 16px;
	margin: 0 0 12px;
	padding: 16px 22px;
	border-radius: var(--f-rayon-carte);
	background: var(--f-fond-clair);
	color: var(--f-texte);
	font-size: 16px;
	line-height: 1.4;
}

body.vme-fa-page .vme-fa-financer .vme-financement__resultat strong {
	color: var(--f-bleu);
	font-size: 26px;
	font-weight: 700;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
}

body.vme-fa-page .vme-fa-financer .vme-financement__mention {
	margin: 0;
	color: var(--f-aide);
	font-size: 13.5px;
	line-height: 1.5;
}

body.vme-fa-page .vme-fa-financer .vme-financement__mention em {
	font-style: normal;
}


/* --------------------------------------------------------------------------
   9. Colonne de droite : la carte du prix et du contact
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-cote {
	grid-column: 2;
	grid-row: 1 / span 2;
	min-width: 0;
}

/* Collante. L'en-tete fixe a deux hauteurs : entier (162 px), ou reduit a la
   barre des secteurs (41 px) quand il se retire au defilement. Le script
   pose alors « est-entete-replie » sur la fiche ; sans lui la carte reste
   simplement plus bas. */
body.vme-fa-page .vme-fa-carte {
	position: sticky;
	top: calc(var(--f-entete) + 16px);
	padding: 24px 24px 22px;
	border: 1px solid var(--f-bord-carte);
	border-radius: var(--f-rayon-carte);
	background: #FFFFFF;
	transition: top .25s ease;
}

body.vme-fa-page .vme-fa.est-entete-replie .vme-fa-carte {
	top: 57px;
}

/* Membre de l'equipe connecte : la barre d'administration de WordPress
   (32 px) decale l'en-tete d'autant. */
body.vme-fa-page.admin-bar .vme-fa-carte {
	top: calc(var(--f-entete) + 48px);
}

body.vme-fa-page.admin-bar .vme-fa.est-entete-replie .vme-fa-carte {
	top: 89px;
}

/* VME-FA-MODALE-COLLANTE. Fenetre du parent ouverte (partage, signalement) :
   il pose « modal-open » sur body avec overflow hidden / scroll. Comme html
   porte deja le defilement (vme-custom.css), body deviendrait un conteneur
   de defilement : la carte collante s'y ancrerait et glisserait sous
   l'en-tete, et la page se decalerait de la largeur d'une gouttiere. On
   garde a body ses valeurs de repos. « visible » sert de repli aux
   navigateurs qui ne connaissent pas « clip ». */
body.vme-fa-page.modal-open {
	overflow: visible;
	overflow-x: clip;
}

body.vme-fa-page .vme-fa-prix__montant {
	color: var(--f-bleu);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -.01em;
	font-variant-numeric: tabular-nums;
}

/* Fourchette historique (« 850 000 - 1 100 000 € ») : un cran plus petit. */
body.vme-fa-page .vme-fa-prix__montant--long {
	font-size: 24px;
	line-height: 1.25;
}

body.vme-fa-page .vme-fa-prix__couvre {
	margin-top: 4px;
	color: var(--f-aide);
	font-size: 13.5px;
	line-height: 1.4;
}

body.vme-fa-page .vme-fa-boutons {
	display: grid;
	gap: 10px;
	margin-top: 18px;
}

body.vme-fa-page .vme-fa-bouton {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 12px 22px;
	border: 1px solid transparent;
	border-radius: var(--f-rayon-pilule);
	font-size: 15.5px;
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

body.vme-fa-page .vme-fa a.vme-fa-bouton--plein,
body.vme-fa-page .vme-fa-bouton--plein {
	background: var(--f-bleu);
	color: #FFFFFF;
}

body.vme-fa-page .vme-fa a.vme-fa-bouton--plein:hover,
body.vme-fa-page .vme-fa-bouton--plein:hover {
	background: var(--f-bleu-survol);
	color: #FFFFFF;
}

/* Le parent ecrit tout lien « tel: » en blanc : la couleur est redite. */
body.vme-fa-page .vme-fa a.vme-fa-bouton--contour,
body.vme-fa-page .vme-fa-bouton--contour {
	min-height: 48px;
	border-color: var(--f-bord-pilule);
	background: #FFFFFF;
	color: var(--f-bleu);
	font-variant-numeric: tabular-nums;
}

body.vme-fa-page .vme-fa a.vme-fa-bouton--contour:hover,
body.vme-fa-page .vme-fa-bouton--contour:hover {
	border-color: var(--f-bleu);
	background: var(--f-fond-clair);
	color: var(--f-bleu);
}

/* Sauvegarder, Partager, Signaler : trois actions discretes, a parts egales
   tant que chaque libelle tient dans sa part ; sinon la derniere passe a la
   ligne (texte agrandi par le lecteur). */
body.vme-fa-page .vme-fa-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-top: 14px;
}

body.vme-fa-page .vme-fa-actions > li {
	flex: 1 1 0%;
	min-width: min-content;
}

/* 13,5 px : le plancher de la direction artistique. La marge laterale de
   2 px laisse tenir « Sauvegardee » sur une ligne a 320 px. */
body.vme-fa-page .vme-fa a.vme-fa-action {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	padding: 9px 2px 8px;
	border-radius: 10px;
	color: var(--f-texte);
	font-size: 13.5px;
	font-weight: 600;
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

body.vme-fa-page .vme-fa a.vme-fa-action:hover {
	background: var(--f-fond-clair);
	color: var(--f-bleu);
}

/* Annonce sauvegardee : coeur plein, bleu roi. La classe « bookmarked » est
   posee par le script du parent. */
body.vme-fa-page .vme-fa a.vme-fa-action.bookmarked {
	color: var(--f-bleu);
}

body.vme-fa-page .vme-fa a.vme-fa-action.bookmarked .vme-fa-icone {
	fill: currentColor;
}

body.vme-fa-page .vme-fa-cedant {
	margin-top: 16px;
	padding-top: 18px;
	border-top: 1px solid var(--f-bord-carte);
}

/* Le titre « Le cedant » reste pour la structure et les lecteurs d'ecran ;
   a l'ecran, « Cedant anonyme » ou le nom de l'entreprise suffit. */
body.vme-fa-page .vme-fa-cedant__titre {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
}

body.vme-fa-page .vme-fa-cedant__nom {
	color: var(--f-encre);
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.35;
	overflow-wrap: anywhere;
}

body.vme-fa-page .vme-fa-cedant__texte {
	margin-top: 4px;
	color: var(--f-aide);
	font-size: 14px;
	line-height: 1.5;
}

body.vme-fa-page .vme-fa-cedant__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin-top: 12px;
}

body.vme-fa-page .vme-fa-cedant__messagerie {
	margin-top: 12px;
}


/* --------------------------------------------------------------------------
   10. Bas de page : annonces voisines (cartes des pages secteur, telles
       quelles) et liens de maillage en pilules
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-voisines {
	margin-top: 48px;
}

body.vme-fa-page .vme-fa-voisines .vme-marche {
	max-width: none;
	margin: 0;
	padding: 0;
}

body.vme-fa-page .vme-fa-voisines .vme-marche__grille {
	gap: 20px;
	margin: 0;
}

/* Une ou deux annonces : des cartes a leur largeur, pas une grille trouee. */
body.vme-fa-page .vme-fa-voisines .vme-marche__grille--n1,
body.vme-fa-page .vme-fa-voisines .vme-marche__grille--n2 {
	grid-template-columns: repeat(auto-fit, minmax(0, 366px));
}

/* Photos des cartes voisines : elles ne partent plus au chargement. Ce sont
   des fonds CSS, que le navigateur ne differe jamais ; le contenu de chaque
   carte n'est calcule qu'a l'approche. La regle est posee sur la CARTE et non
   sur le bloc : sur le bloc, l'ombre du survol et le cerne du focus sont
   rognes, et la page saute de 330 px au telephone. 240 px est la hauteur
   moyenne d'une carte (212 a 256 px).
   CONSEQUENCE POUR LES OUTILS : une capture « pleine page » dessine ces
   cartes VIDES (le navigateur ne peint pas un contenu hors ecran). Le
   visiteur ne voit jamais cela. Ce bloc se controle en defilant dessus. */
body.vme-fa-page .vme-fa-voisines .vme-marche__carte {
	content-visibility: auto;
	contain-intrinsic-size: auto 240px;
}

body.vme-fa-page .vme-fa-maillage {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 36px;
}

body.vme-fa-page .vme-fa a.vme-fa-pilule {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 8px 17px;
	border: 1px solid var(--f-bord-pilule);
	border-radius: var(--f-rayon-pilule);
	background: #FFFFFF;
	color: var(--f-bleu);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	text-decoration: none;
	transition: background-color .15s ease, border-color .15s ease;
}

body.vme-fa-page .vme-fa a.vme-fa-pilule:hover {
	border-color: var(--f-bleu);
	background: var(--f-fond-clair);
	color: var(--f-bleu);
}


/* --------------------------------------------------------------------------
   11. Barre fixe du telephone (affichee sous 1000 px seulement)
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-barre {
	display: none;
}

/* Commandes qui n'existent que par le script (assets/js/fiche-annonce.js) :
   tant qu'il n'a pas pose « est-pilotee » sur la fiche (JavaScript coupe,
   script non charge), elles ne se montrent pas. Jamais un bouton qui ne fait
   rien, jamais un cadre de carte vide.
   Vignettes et numero : visibility, PAS display. Leur place reste reservee,
   sinon le titre (74 px) et la carte du prix (58 px) sautent a l'arrivee du
   script quand la connexion est lente (le voile se leve au plus tard a 2,5 s).
   La carte, elle, est loin sous le premier ecran : elle peut s'effacer. */
body.vme-fa-page .vme-fa:not(.est-pilotee) .vme-fa-galerie__vignettes,
body.vme-fa-page .vme-fa:not(.est-pilotee) .vme-fa-numero {
	visibility: hidden;
}

body.vme-fa-page .vme-fa:not(.est-pilotee) .vme-fa-plan {
	display: none;
}


/* --------------------------------------------------------------------------
   12. Fenetre de partage du parent, six liens
   -------------------------------------------------------------------------- */

body.vme-fa-page .vme-fa-partage .share-options {
	width: 400px;
	max-width: calc(100vw - 32px);
	min-width: 0;
	padding: 18px 12px 12px;
	border-radius: var(--f-rayon-carte);
	box-shadow: 0 14px 34px rgba(12, 26, 56, .18);
	font-family: var(--f-police);
}

body.vme-fa-page .vme-fa-partage .share-options li a {
	display: block;
	color: var(--f-texte);
	font-family: var(--f-police);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.3;
}

body.vme-fa-page .vme-fa-partage .share-options li a:hover {
	color: var(--f-bleu);
}

/* [VME-FA-PARTAGE-CLAVIER] La fenetre est imprimee en pied de page, hors de
   .vme-fa : le cerne de focus de la fiche ne l'atteint pas, et le parent
   retire le sien. Sans cette regle, on tabule dans la fenetre a l'aveugle. */
body.vme-fa-page .vme-fa-partage .share-options li a:focus-visible {
	outline: 2px solid var(--f-bleu);
	outline-offset: 4px;
	border-radius: 10px;
}


/* --------------------------------------------------------------------------
   13. Largeurs intermediaires
   -------------------------------------------------------------------------- */

/* Ecran d'ordinateur peu haut (portable) : la photo cede de la hauteur pour
   qu'un titre d'une ligne reste dans le premier ecran. Compte : la photo
   commence a 208 px (en-tete 162 + fil d'Ariane 46) ; sous elle, 101 px
   jusqu'au bas du titre (26 + 27 + 12 + 36) ; 21 px d'air : 330. Avec des
   vignettes (2 photos et plus), 74 px de plus : 404. Le cadre garde sa
   largeur, la photo est recadree (object-fit) et reste entiere dans la
   visionneuse. Si l'en-tete change de hauteur, recalculer. */
@media (min-width: 1000px) {
	body.vme-fa-page .vme-fa-galerie__piste {
		max-height: max(330px, calc(100vh - 330px));
	}

	body.vme-fa-page .vme-fa-galerie--plusieurs .vme-fa-galerie__piste {
		max-height: max(320px, calc(100vh - 404px));
	}
}

/* Sous 1200 px l'en-tete perd sa sur-barre : 80 px + la barre des secteurs. */
@media (max-width: 1200px) {
	body.vme-fa-page {
		--f-entete: 121px;
		--f-cote: 340px;
		--f-gouttiere: 32px;
	}

	body.vme-fa-page .vme-fa {
		padding-top: 80px;
	}
}

/* Simulateur : sous 1100 px la colonne principale est trop etroite pour
   quatre champs (« (€) » passait seul a la ligne de 1000 a 1055 px) :
   deux champs par rangee, comme en une colonne. */
@media (max-width: 1099px) {
	body.vme-fa-page .vme-fa-financer .vme-financement__champs {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}


/* --------------------------------------------------------------------------
   14. Une colonne (tablette et telephone)

   Le HTML est le meme pour tous les ecrans (une seule copie en cache). La
   colonne de droite se DEFAIT (display: contents) et ses morceaux prennent
   leur place dans la colonne unique DANS L'ORDRE DU HTML (elle y est ecrite
   entre la tete et les blocs : le prix et les actions sous le titre). Seul
   le cedant descend apres les conseils, par « order ». Le bouton
   « Contacter » laisse la place a la barre fixe ; « Afficher le numero »
   reste sous le prix la ou l'appareil ne telephone pas forcement (voir plus
   bas, VME-FA-NUMERO-TABLETTE).
   -------------------------------------------------------------------------- */

@media (max-width: 999px) {
	body.vme-fa-page .vme-fa {
		padding-bottom: 40px;
	}

	body.vme-fa-page .vme-fa-cadre {
		max-width: 760px;
		padding: 0 16px;
	}

	body.vme-fa-page .vme-fa-colonnes {
		display: flex;
		flex-direction: column;
		gap: 0;
	}

	body.vme-fa-page .vme-fa-principal,
	body.vme-fa-page .vme-fa-cote,
	body.vme-fa-page .vme-fa-carte {
		display: contents;
	}

	body.vme-fa-page .vme-fa-colonnes > *,
	body.vme-fa-page .vme-fa-principal > *,
	body.vme-fa-page .vme-fa-carte > * {
		min-width: 0;
	}

	/* [VME-FICHE-ORDRE] Le code est deja dans l'ordre de l'ecran. Seul le cedant
	   (aucun lien, aucun bouton) descend apres les conseils. */
	body.vme-fa-page .vme-fa-cedant {
		order: 1;
	}

	body.vme-fa-page .vme-fa-boutons {
		display: none;
	}

	body.vme-fa-page .vme-fa-prix {
		margin-top: 16px;
	}

	body.vme-fa-page .vme-fa-actions {
		margin-top: 14px;
		gap: 8px;
	}

	/* Le cedant devient un bloc comme les autres. */
	body.vme-fa-page .vme-fa-cedant {
		margin-top: 32px;
		padding-top: 30px;
	}

	/* Sa premiere ligne tient lieu de titre de bloc. */
	body.vme-fa-page .vme-fa-cedant__nom {
		margin-bottom: 10px;
		font-size: 20px;
		line-height: 1.3;
		letter-spacing: -.005em;
	}

	/* La barre fixe : prix a gauche, « Contacter » a droite. */
	body.vme-fa-page .vme-fa-barre {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 450;
		display: block;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid var(--f-bord-carte);
		background: #FFFFFF;
		box-shadow: 0 -6px 20px rgba(12, 26, 56, .07);
		font-family: var(--f-police);
	}

	/* Rang souple : le prix se replie sur ses espaces avant que le rang ne passe
	   sur deux lignes (texte agrandi par le lecteur) ; « Contacter » reste
	   alors cale a droite. */
	body.vme-fa-page .vme-fa-barre__rang {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 10px;
		max-width: 728px;
		margin: 0 auto;
	}

	body.vme-fa-page .vme-fa-barre__prix {
		flex: 1 1 auto;
		width: min-content;
		min-width: 0;
		color: var(--f-bleu);
		font-size: 19px;
		font-weight: 700;
		line-height: 1.2;
		letter-spacing: -.01em;
		font-variant-numeric: tabular-nums;
	}

	body.vme-fa-page .vme-fa-barre__prix--long {
		font-size: 15px;
	}

	body.vme-fa-page .vme-fa-barre__appel {
		flex: 0 0 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 1px solid var(--f-bord-pilule);
		border-radius: 50%;
		background: #FFFFFF;
		color: var(--f-bleu);
		cursor: pointer;
	}

	body.vme-fa-page .vme-fa a.vme-fa-barre__contact {
		flex: 0 0 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 48px;
		margin-left: auto;
		padding: 0 26px;
		border-radius: var(--f-rayon-pilule);
		background: var(--f-bleu);
		color: #FFFFFF;
		font-size: 15.5px;
		font-weight: 700;
		line-height: 1.2;
		text-decoration: none;
	}

	/* Reserve de place : la barre ne recouvre jamais le bas du pied de page. */
	body.vme-fa-page footer.footer {
		padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px));
	}

	body.vme-fa-page .vme-fa-voisines {
		margin-top: 32px;
	}

	body.vme-fa-page .vme-fa-voisines .vme-marche__grille--n1,
	body.vme-fa-page .vme-fa-voisines .vme-marche__grille--n2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* [VME-FICHE-PAYSAGE] Une colonne, ecran peu haut (telephone tourne en
   paysage, petite tablette couchee, fenetre d'ordinateur basse) : la photo,
   ses fleches et son compteur tiennent dans le premier ecran, entre l'en-tete
   fixe et la barre fixe du bas. Le cadre garde sa largeur, la photo est
   recadree ; la visionneuse la montre entiere. Pas de condition de hauteur :
   en portrait le plafond est plus haut que la photo et ne mord pas.
   --f-hors-photo = ce que l'ecran donne a autre chose qu'a la photo :
   en-tete (80) + barre du bas (69) + 16 px d'air = 165, plus, selon la
   largeur, le fil d'Ariane (46) et la barre des secteurs (42).
   svh : hauteur barre d'adresse deployee ; la ligne en vh sert de repli aux
   navigateurs qui ne connaissent pas svh. Le plancher evite une photo nulle
   dans une fenetre minuscule. Si l'en-tete ou la barre du bas change de
   hauteur, reprendre ces nombres. */
@media (max-width: 999px) {
	body.vme-fa-page {
		--f-hors-photo: 165px;
	}

	body.vme-fa-page .vme-fa-galerie__piste {
		max-height: max(150px, calc(100vh - var(--f-hors-photo)));
		max-height: max(150px, calc(100svh - var(--f-hors-photo)));
	}
}

/* Des 700 px le fil d'Ariane precede la photo. */
@media (min-width: 700px) and (max-width: 999px) {
	body.vme-fa-page {
		--f-hors-photo: 211px;
	}
}

/* De 901 a 999 px la barre des secteurs s'ajoute sous l'en-tete. */
@media (min-width: 901px) and (max-width: 999px) {
	body.vme-fa-page {
		--f-hors-photo: 253px;
	}
}

/* Paysage (500 px de haut au plus) : le fil d'Ariane s'efface, comme au
   telephone ; 12 px d'air le remplacent au-dessus de la photo. */
@media (min-width: 700px) and (max-width: 999px) and (max-height: 500px) {
	body.vme-fa-page {
		--f-hors-photo: 177px;
	}

	body.vme-fa-page .vme-fa-fil {
		display: none;
	}

	body.vme-fa-page .vme-fa-galerie {
		margin-top: 12px;
	}
}

@media (min-width: 901px) and (max-width: 999px) and (max-height: 500px) {
	body.vme-fa-page {
		--f-hors-photo: 219px;
	}
}


/* --------------------------------------------------------------------------
   15. Telephone : carrousel bord a bord, en tete de page
   -------------------------------------------------------------------------- */

@media (max-width: 699px) {
	/* Le fil d'Ariane s'efface : la page s'ouvre sur les photos. Ses liens
	   restent dans le menu et dans les pilules du bas de page. */
	body.vme-fa-page .vme-fa-fil {
		display: none;
	}

	/* Marge negative : la piste deborde la colonne jusqu'aux bords de l'ecran. */
	body.vme-fa-page .vme-fa-galerie {
		margin: 0 -16px;
	}

	body.vme-fa-page .vme-fa-galerie__piste {
		aspect-ratio: 4 / 3;
		border-radius: 0;
	}

	/* Ecran etroit : les vignettes s'effacent. Les fleches, elles, ne
	   s'effacent qu'AU DOIGT (bloc suivant) : a la souris, fenetre etroite
	   ou zoom 200 %, elles restent la seule commande visible du carrousel. */
	body.vme-fa-page .vme-fa-galerie__vignettes {
		display: none;
	}

	body.vme-fa-page .vme-fa-galerie__compteur {
		right: 12px;
		bottom: 12px;
	}

	body.vme-fa-page .vme-fa-galerie--vide {
		min-height: 120px;
		border-radius: 0;
	}

	body.vme-fa-page .vme-fa-tete {
		margin-top: 18px;
	}

	body.vme-fa-page .vme-fa-titre {
		font-size: 24px;
		line-height: 1.25;
		text-wrap: wrap;
	}

	body.vme-fa-page .vme-fa-tete__ligne {
		font-size: 14px;
	}

	body.vme-fa-page .vme-fa-prix__montant {
		font-size: 28px;
	}

	body.vme-fa-page .vme-fa-prix__montant--long {
		font-size: 22px;
	}

	/* Chiffres sur deux colonnes ; une seule quand un chiffre agrandi ne tient
	   plus dans la moitie du panneau. */
	body.vme-fa-page .vme-fa-chiffres {
		gap: 16px 0;
		padding: 18px 0;
	}

	body.vme-fa-page .vme-fa-chiffre,
	body.vme-fa-page .vme-fa-chiffres--n5 .vme-fa-chiffre,
	body.vme-fa-page .vme-fa-chiffres--n6 .vme-fa-chiffre {
		flex: 1 1 50%;
		padding: 0 17px;
	}

	body.vme-fa-page .vme-fa-chiffre dd {
		font-size: 17px;
	}

	body.vme-fa-page .vme-fa-bloc,
	body.vme-fa-page .vme-fa-cedant {
		margin-top: 28px;
		padding-top: 26px;
	}

	body.vme-fa-page .vme-fa-plan {
		height: 240px;
	}

	body.vme-fa-page .vme-fa-voisines .vme-marche__grille,
	body.vme-fa-page .vme-fa-voisines .vme-marche__grille--n1,
	body.vme-fa-page .vme-fa-voisines .vme-marche__grille--n2 {
		grid-template-columns: minmax(0, 1fr);
		gap: 14px;
	}

	body.vme-fa-page .vme-fa a.vme-fa-pilule {
		width: 100%;
	}

	body.vme-fa-page .vme-fa-financer .vme-financement__resultat {
		padding: 14px 18px;
	}
}

/* Au doigt, le geste suffit : le compteur dit qu'il y a d'autres photos, et
   la visionneuse a ses propres boutons. */
@media (max-width: 699px) and (hover: none) and (pointer: coarse) {
	body.vme-fa-page .vme-fa-galerie__fleche {
		display: none;
	}
}

@media (max-width: 480px) {
	body.vme-fa-page .vme-fa {
		padding-top: 60px;
	}
}

/* Tablette, une colonne : hors de la carte, les trois actions ont la place de
   devenir des pilules. Au telephone elles restent empilees (pictogramme,
   libelle dessous) : trois pilules n'y tiennent pas sans couper « Sauvegarder ». */
@media (min-width: 480px) and (max-width: 999px) {
	body.vme-fa-page .vme-fa-actions {
		gap: 10px;
	}

	body.vme-fa-page .vme-fa a.vme-fa-action {
		flex-direction: row;
		justify-content: center;
		gap: 8px;
		min-height: 44px;
		padding: 8px 12px;
		border: 1px solid var(--f-bord-pilule);
		border-radius: var(--f-rayon-pilule);
		font-size: 14.5px;
	}

	body.vme-fa-page .vme-fa a.vme-fa-action:hover,
	body.vme-fa-page .vme-fa a.vme-fa-action.bookmarked {
		border-color: var(--f-bleu);
	}
}

/* [VME-FA-NUMERO-TABLETTE] Numero du cedant en une colonne. La barre fixe ne
   sait qu'APPELER (tel:) : sans telephonie (tablette, fenetre d'ordinateur
   etroite, zoom 200 %) rien ne se passe et le numero n'est jamais ecrit.
   « Afficher le numero » reste donc dans le flux, sous le prix, des 700 px,
   et a toute largeur quand le pointeur est une souris. Le bouton plein reste
   masque (la barre porte deja « Contacter »). La marge est portee par le
   bouton et non par le conteneur : sans telephone le conteneur est vide et
   ne doit laisser aucun espace. Ce bloc doit rester APRES le bloc « une
   colonne » (meme poids que son display: none). */
@media (min-width: 700px) and (max-width: 999px), (max-width: 699px) and (pointer: fine) {
	body.vme-fa-page .vme-fa-boutons {
		display: block;
		margin-top: 0;
	}

	body.vme-fa-page .vme-fa-boutons .vme-fa-bouton--plein {
		display: none;
	}

	body.vme-fa-page .vme-fa-boutons .vme-fa-numero {
		max-width: 340px;
		margin-top: 16px;
	}
}

/* A la souris, l'icone d'appel de la barre ne mene a rien : elle s'efface. */
@media (max-width: 999px) and (pointer: fine) {
	body.vme-fa-page .vme-fa-barre .vme-fa-barre__appel {
		display: none;
	}
}

@media (max-width: 359px) {
	body.vme-fa-page .vme-fa a.vme-fa-barre__contact {
		padding: 0 20px;
	}
}

@media (prefers-reduced-motion: reduce) {
	body.vme-fa-page .vme-fa-galerie__piste {
		scroll-behavior: auto;
	}

	body.vme-fa-page .vme-fa-carte {
		transition: none;
	}
}

@media print {
	body.vme-fa-page .vme-fa-barre,
	body.vme-fa-page .vme-fa-galerie__fleche,
	body.vme-fa-page .vme-fa-actions,
	body.vme-fa-page .vme-fa-avant {
		display: none;
	}
}

/* [VME-LISTE-V2 05/10/2026] « Mettre en avant », pour le vendeur de l'annonce
   (templates/fiche-annonce/cote.php). Un lien secondaire et une ligne d'aide,
   sous « Modifier mon annonce » ; hors du bloc des boutons, que la feuille
   masque en une colonne : le lien reste donc visible au telephone, sous le
   prix. Aucun cadre, aucun bouton plein de plus. */
body.vme-fa-page .vme-fa-avant {
	margin: 14px 0 0;
	color: var(--f-aide);
	font-size: 13.5px;
	line-height: 1.5;
	text-align: center;
}

body.vme-fa-page .vme-fa a.vme-fa-avant__lien {
	display: block;
	margin: 0 0 4px;
	color: var(--f-bleu);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
	text-decoration: none;
}

body.vme-fa-page .vme-fa a.vme-fa-avant__lien:hover {
	color: var(--f-bleu-survol);
	text-decoration: underline;
	text-underline-offset: 3px;
}

body.vme-fa-page .vme-fa a.vme-fa-avant__lien:focus-visible {
	outline: 2px solid var(--f-bleu);
	outline-offset: 3px;
	border-radius: 4px;
}

body.vme-fa-page .vme-fa-avant__aide {
	display: block;
}

@media (max-width: 999px) {
	body.vme-fa-page .vme-fa-avant {
		margin-top: 16px;
		max-width: 36em;
		text-align: left;
	}
}