/* =========================
   LISTING VIEW - Page détail d'annonce (docs/LISTING-PAGE-SPEC.md, lot 2)
   Chargé uniquement sur la route HivePress listing_view_page
   (inc/tfd-listing-view.php). Scopé sur la body class de la page.

   Lot 2 : en-tête (titre, actions, prix, localisation), bande des
   attributs clés, grille Specifications, Description.
   Lot 3 : galerie.
   Lot 4 : sidebar.
   Lot 5 : mobile (< 768 px, dernière section du fichier) : ordre vertical
   de la spec §4, repliables, barre d'actions fixe.

   Spécificité : HivePress et ListingHive posent leurs marges avec des
   sélecteurs en (0,3,0) et (0,4,0) du type
   « .hp-listing--view-page .hp-listing__attributes--x:not(:last-child) ».
   Les règles qui les contredisent incluent donc l'ancêtre
   .hp-listing--view-page pour l'emporter sans !important.
========================= */

body.hp-template--listing-view-page {
	--tfd-text: #202A35;
	--tfd-muted: #5F6670;
	--tfd-line: #E3E5E8;
	--tfd-line-soft: #EEF0F2;
	--tfd-radius: 12px;
}

/* -------------------------
   En-tête : titre + actions / prix / localisation et date
   Conteneur tfd_listing_header créé au lot 1.
------------------------- */

body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header {
	margin-bottom: 1.5rem;
}

/* Neutralise les margin-bottom natifs (2rem) des blocs regroupés. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header > .hp-listing__title,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header > .hp-listing__attributes--primary,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header > .hp-listing__details--primary,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header > .hp-page__topbar {
	margin: 0;
}

body.hp-template--listing-view-page .tfd-listing-header .hp-listing__title {
	font-size: 1.75rem;
	line-height: 1.2;
	color: var(--tfd-text);
	overflow-wrap: anywhere;
}

/* Sous 768 px : titre, prix, localisation, actions s'empilent. */
body.hp-template--listing-view-page .tfd-listing-header > * + * {
	margin-top: 0.75rem;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-listing-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		/* Maquette : titre sur toute la largeur, boutons à droite à hauteur
		   du prix et de la ligne localisation. */
		grid-template-areas:
			"title title"
			"price actions"
			"details actions";
		column-gap: 1.5rem;
		row-gap: 0.5rem;
		align-items: center;
	}

	body.hp-template--listing-view-page .tfd-listing-header > * + * {
		margin-top: 0;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-listing__title {
		grid-area: title;
		font-size: 2rem;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-page__topbar {
		grid-area: actions;
		align-self: center;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-listing__attributes--primary {
		grid-area: price;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-listing__details--primary {
		grid-area: details;
	}
}

/* Prix : gros, gras, aligné à gauche, couleur de texte foncée.
   NOTE (2026-09-19) — La maquette le prévoit orange ; décision de le passer
   en foncé : l'orange reste réservé aux actions (Send message, Post an ad),
   au pictogramme de localisation et aux repères de section, pour ne pas
   diluer la hiérarchie ni évoquer un prix promotionnel.
   Le gabarit enfant listing-attributes-primary.php a retiré les classes
   « widget », mais ListingHive (style.css racine) encadre aussi le bloc par
   son sélecteur .hp-listing--view-page .hp-listing__attributes--primary :
   on l'annule. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-price {
	padding: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: none;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-price .hp-listing__attribute {
	padding: 0;
	background: none;
	text-align: left;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1.2;
	color: var(--tfd-text);
}

/* Localisation · date sur une ligne, texte secondaire. */
body.hp-template--listing-view-page .tfd-listing-header .hp-listing__details--primary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem 0.75rem;
	font-size: 0.875rem;
	color: var(--tfd-muted);
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header .hp-listing__location,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header .hp-listing__created-date {
	margin: 0;
	font-size: inherit;
	color: inherit;
	text-transform: none;
	letter-spacing: normal;
}

body.hp-template--listing-view-page .tfd-listing-header .hp-listing__location i {
	color: var(--primary, #F15A29);
}

/* Point médian entre la localisation et la date, desktop seulement :
   sous 768 px les deux passent à la ligne et le point se retrouverait seul
   en début de ligne. */
@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-listing-header .hp-listing__location + .hp-listing__created-date::before {
		content: "\00B7";
		margin-right: 0.75rem;
		font-weight: 700;
	}
}

/* -------------------------
   Actions : Share, Favorite, Report en boutons ronds, icône seule.
   Le libellé reste dans le DOM pour l'accessibilité et sert
   d'infobulle au survol sur desktop (spec maquette, repère 2).
------------------------- */

/* Sous 768 px : en ligne, alignés à gauche sous la date (spec §4). HivePress
   passe nativement le topbar en colonne à cette largeur, on le remet en ligne.
   À partir de 768 px : à droite, à hauteur du prix (grille ci-dessus). */
body.hp-template--listing-view-page .tfd-listing-header .hp-page__topbar {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: center;
	padding: 0;
	border: 0;
	margin-top: 0;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-listing-header .hp-page__topbar {
		justify-content: flex-end;
	}
}

body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.5rem;
}

body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share {
	margin: 0;
}

body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--tfd-line);
	/* Maquette : carrés aux angles arrondis, pas des cercles. */
	border-radius: 0.625rem;
	background: #fff;
	color: var(--tfd-text);
	font-size: 1rem;
	line-height: 1;
	text-decoration: none;
	cursor: pointer;
	transition: border-color 0.15s ease, color 0.15s ease;
}

body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action:hover,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action:focus-visible,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle:hover,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle:focus-visible,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle[aria-expanded="true"] {
	border-color: var(--primary, #F15A29);
	color: var(--primary, #F15A29);
}

body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action i,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle i {
	margin: 0;
	font-size: 1.0625rem;
	color: inherit;
}

/* Favori actif : cœur à la couleur de la charte plutôt que le rouge natif. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-actions .hp-listing__action--favorite[data-state="active"] i {
	color: var(--primary, #F15A29);
}

/* Libellés masqués visuellement, conservés pour les lecteurs d'écran. */
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action > span,
body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle > span {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}

/* Infobulle au-dessus du bouton (maquette), au survol et au focus clavier,
   sur les appareils à pointeur fin. */
@media (hover: hover) and (pointer: fine) {
	body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action:hover > span,
	body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action:focus-visible > span,
	body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle:hover > span,
	body.hp-template--listing-view-page .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle:focus-visible > span {
		top: auto;
		bottom: calc(100% + 0.5rem);
		left: 50%;
		width: auto;
		height: auto;
		margin: 0;
		padding: 0.3rem 0.6rem;
		overflow: visible;
		clip: auto;
		clip-path: none;
		transform: translateX(-50%);
		border-radius: 0.375rem;
		background: var(--tfd-text);
		color: #fff;
		font-size: 0.75rem;
		font-weight: 500;
		line-height: 1.2;
		pointer-events: none;
		z-index: 5;
	}
}

/* -------------------------
   Attributs : markup commun aux zones secondary et ternary
   (inc/tfd-listing-view.php, tfd_listing_view_render_attributes).
------------------------- */

body.hp-template--listing-view-page .tfd-listing-attrs__list {
	margin: 0;
	padding: 0;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-attrs .hp-listing__attribute {
	margin: 0;
	min-width: 0;
}

body.hp-template--listing-view-page .tfd-listing-attrs__label,
body.hp-template--listing-view-page .tfd-listing-attrs__value {
	margin: 0;
	padding: 0;
}

/* Bande des attributs clés : quatre colonnes sous la galerie, sans icône. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-attrs--secondary {
	margin: 0 0 2rem;
	padding: 1rem 1.25rem;
	border: 1px solid var(--tfd-line);
	border-radius: var(--tfd-radius);
	background: #fff;
}

body.hp-template--listing-view-page .tfd-listing-attrs--secondary .tfd-listing-attrs__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1rem 1.5rem;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-listing-attrs--secondary .tfd-listing-attrs__list {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

body.hp-template--listing-view-page .tfd-listing-attrs--secondary .tfd-listing-attrs__label {
	display: block;
	margin-bottom: 0.25rem;
	font-size: 0.75rem;
	font-weight: 500;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--tfd-muted);
}

body.hp-template--listing-view-page .tfd-listing-attrs--secondary .tfd-listing-attrs__value {
	display: block;
	font-size: 1rem;
	font-weight: 700;
	color: var(--tfd-text);
	overflow-wrap: anywhere;
}

/* Grille Specifications : deux colonnes, libellé à gauche, valeur à droite. */
body.hp-template--listing-view-page .tfd-listing-attrs--ternary .tfd-listing-attrs__list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 2.5rem;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-listing-attrs--ternary .tfd-listing-attrs__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-attrs--ternary .hp-listing__attribute {
	display: grid;
	/* Maquette : libellé dans une colonne fixe, valeur alignée à gauche juste après. */
	grid-template-columns: 8.5rem minmax(0, 1fr);
	align-items: baseline;
	column-gap: 1rem;
	padding: 0.625rem 0;
	border-bottom: 1px solid var(--tfd-line-soft);
}

body.hp-template--listing-view-page .tfd-listing-attrs--ternary .tfd-listing-attrs__label {
	font-size: 0.9375rem;
	color: var(--tfd-muted);
}

body.hp-template--listing-view-page .tfd-listing-attrs--ternary .tfd-listing-attrs__value {
	font-size: 0.9375rem;
	font-weight: 600;
	text-align: left;
	color: var(--tfd-text);
	overflow-wrap: anywhere;
}

/* Repli « View all details » : <details> natif, sans JavaScript. Le bouton
   (summary) est le premier enfant dans le DOM, l'élément l'exige ; flex + order
   l'affichent après les lignes dépliées, comme sur la maquette. */
body.hp-template--listing-view-page .tfd-listing-attrs__more {
	display: flex;
	flex-direction: column;
}

body.hp-template--listing-view-page .tfd-listing-attrs__more > .tfd-listing-attrs__list--more {
	order: 0;
}

body.hp-template--listing-view-page .tfd-listing-attrs__toggle {
	order: 1;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	align-self: center;
	min-width: 16rem;
	margin-top: 1.25rem;
	padding: 0.625rem 1.5rem;
	border: 1px solid var(--tfd-line);
	border-radius: 0.5rem;
	background: #fff;
	color: var(--tfd-text);
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.2;
	list-style: none;
	cursor: pointer;
	user-select: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

body.hp-template--listing-view-page .tfd-listing-attrs__toggle::-webkit-details-marker {
	display: none;
}

body.hp-template--listing-view-page .tfd-listing-attrs__toggle:hover,
body.hp-template--listing-view-page .tfd-listing-attrs__toggle:focus-visible {
	border-color: var(--primary, #F15A29);
	color: var(--primary, #F15A29);
}

/* Chevron dessiné en CSS, retourné à l'ouverture. */
body.hp-template--listing-view-page .tfd-listing-attrs__toggle::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-top: -0.25rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

body.hp-template--listing-view-page .tfd-listing-attrs__more[open] > .tfd-listing-attrs__toggle::after {
	margin-top: 0.25rem;
	transform: rotate(-135deg);
}

body.hp-template--listing-view-page .tfd-listing-attrs__toggle-label--open,
body.hp-template--listing-view-page .tfd-listing-attrs__more[open] > .tfd-listing-attrs__toggle .tfd-listing-attrs__toggle-label--closed {
	display: none;
}

body.hp-template--listing-view-page .tfd-listing-attrs__more[open] > .tfd-listing-attrs__toggle .tfd-listing-attrs__toggle-label--open {
	display: inline;
}

/* -------------------------
   Sections titrées (Specifications, Description) : sections HivePress
   créées par le filtre de template. La barre orange au-dessus du titre
   est le style natif de ListingHive (.hp-section__title::before),
   recoloré par style.css : on ne fait que réduire la taille du titre,
   dimensionné nativement comme celui de « Related Listings ».
------------------------- */

body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-section {
	margin-bottom: 2.5rem;
}

body.hp-template--listing-view-page .tfd-listing-section .hp-section__title {
	margin-bottom: 1rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--tfd-text);
}

/* Repère orange plus discret que celui de ListingHive (45 × 4 px). Le
   titre mobile « About this item » porte hp-section__title hors d'une
   .tfd-listing-section : il est inclus pour que tous les traits soient
   de la même longueur. */
body.hp-template--listing-view-page .tfd-listing-section .hp-section__title::before,
body.hp-template--listing-view-page .tfd-listing-attrs__title--mobile::before {
	width: 28px;
	height: 3px;
}

/* Description : le HTML vient de wpautop, on ne règle que le rythme. */
body.hp-template--listing-view-page .tfd-listing-section--description .hp-listing__description {
	font-size: 0.9375rem;
	line-height: 1.7;
	color: var(--tfd-text);
}

body.hp-template--listing-view-page .tfd-listing-section--description .hp-listing__description p {
	margin: 0 0 1rem;
}

body.hp-template--listing-view-page .tfd-listing-section--description .hp-listing__description p:last-child {
	margin-bottom: 0;
}

/* -------------------------
   Galerie (lot 3) : rail scroll-snap, flèches, compteur, miniatures, lightbox.
   Markup : hivepress/listing/view/page/listing-images.php.
   Script : assets/js/tfd-listing-view.js (contrôles seulement, le
   défilement est ici, en CSS).
------------------------- */

body.hp-template--listing-view-page .tfd-gallery {
	/* Mobile : ratio des tailles générées (800 x 600), aucune bande vide sur
	   une photo classique. Desktop : cadre plus large, comme la maquette. */
	--tfd-gallery-ratio: 4 / 3;
	--tfd-gallery-radius: 12px;
	--tfd-gallery-bg: #F7F8FA;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-gallery {
		--tfd-gallery-ratio: 16 / 10;
	}
}

/* Les contrôles rendus avec l'attribut hidden le restent tant que le script
   ne les a pas révélés : les règles display ci-dessous ne doivent pas
   l'emporter sur l'attribut. */
body.hp-template--listing-view-page .tfd-gallery [hidden] {
	display: none !important;
}

/* Scène : ratio constant, photos affichées entières (contain) plutôt que
   recadrées. Une photo 4/3 dans un cadre 16/10 laisse des marges latérales.
   NOTE (2026-09-20) — trois essais : gris #F3F4F6 sans liseré (lu comme un
   défaut de chargement), fond blanc (les marges se lisent comme un vide),
   puis ce cadre : fond blanc et fin liseré, la photo posée dedans. Passer le
   cadre en 4/3 aurait ajouté ~90 px de hauteur et repoussé les miniatures
   sous la ligne de flottaison. */
body.hp-template--listing-view-page .tfd-gallery__stage {
	position: relative;
	overflow: hidden;
	border: 1px solid var(--tfd-line);
	border-radius: var(--tfd-gallery-radius);
	background: #fff;
	aspect-ratio: var(--tfd-gallery-ratio);
}

body.hp-template--listing-view-page .tfd-gallery__stage .tfd-gallery__slide img,
body.hp-template--listing-view-page .tfd-gallery__stage .tfd-gallery__slide video {
	/* Le thème donne un fond gris à toute image (placeholder de chargement) :
	   l'élément img occupe tout le cadre, ce fond couvrirait celui du cadre. */
	background: transparent;
}

/* Rail : une photo par vue, arrêt obligatoire sur chaque photo, barre de
   défilement masquée. Le clavier fonctionne dès que le rail a le focus. */
body.hp-template--listing-view-page .tfd-gallery__track {
	display: flex;
	height: 100%;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: none;
}

body.hp-template--listing-view-page .tfd-gallery__track::-webkit-scrollbar {
	display: none;
}

body.hp-template--listing-view-page .tfd-gallery__track:focus-visible {
	outline: 2px solid var(--primary, #F15A29);
	outline-offset: -2px;
}

body.hp-template--listing-view-page .tfd-gallery__slide {
	flex: 0 0 100%;
	width: 100%;
	height: 100%;
	margin: 0;
	scroll-snap-align: center;
	scroll-snap-stop: always;
}

body.hp-template--listing-view-page .tfd-gallery__slide img,
body.hp-template--listing-view-page .tfd-gallery__slide video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

/* Rail principal : une photo paysage remplit le cadre (cover, ~17 % de
   hauteur rognés sur du 4/3 dans du 16/10), la photo entière restant dans
   la lightbox. Une photo portrait garde l'affichage entier : recadrée, on
   n'en verrait que le centre. Décision du 2026-09-20. */
body.hp-template--listing-view-page .tfd-gallery__stage .tfd-gallery__slide img {
	object-fit: cover;
	cursor: zoom-in;
}

body.hp-template--listing-view-page .tfd-gallery__stage .tfd-gallery__slide--portrait img {
	object-fit: contain;
}

/* Flèches : rondes, blanches, centrées. Masquées sous 768 px, le swipe et
   le compteur suffisent (spec §4). Invisibles en butée. */
body.hp-template--listing-view-page .tfd-gallery__arrow {
	position: absolute;
	top: 50%;
	z-index: 2;
	display: none;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	transform: translateY(-50%);
	cursor: pointer;
	transition: background-color 0.15s ease, opacity 0.15s ease;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-gallery__arrow {
		display: block;
	}
}

body.hp-template--listing-view-page .tfd-gallery__arrow--prev {
	left: 1rem;
}

body.hp-template--listing-view-page .tfd-gallery__arrow--next {
	right: 1rem;
}

body.hp-template--listing-view-page .tfd-gallery__arrow:hover,
body.hp-template--listing-view-page .tfd-gallery__arrow:focus-visible {
	background: #fff;
}

body.hp-template--listing-view-page .tfd-gallery__arrow:disabled {
	opacity: 0;
	pointer-events: none;
}

/* Chevrons dessinés en CSS, décalés pour paraître centrés optiquement. */
body.hp-template--listing-view-page .tfd-gallery__arrow::before {
	content: "";
	display: block;
	width: 0.6rem;
	height: 0.6rem;
	margin: 0 auto;
	border-left: 2px solid #202A35;
	border-bottom: 2px solid #202A35;
}

body.hp-template--listing-view-page .tfd-gallery__arrow--prev::before {
	transform: translateX(0.15rem) rotate(45deg);
}

body.hp-template--listing-view-page .tfd-gallery__arrow--next::before {
	transform: translateX(-0.15rem) rotate(-135deg);
}

/* Compteur « 1 / 12 » en surimpression. */
body.hp-template--listing-view-page .tfd-gallery__counter {
	position: absolute;
	right: 0.75rem;
	bottom: 0.75rem;
	z-index: 2;
	padding: 0.25rem 0.625rem;
	border-radius: 999px;
	background: rgba(32, 42, 53, 0.78);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.02em;
	pointer-events: none;
}

/* Miniatures : six colonnes, desktop seulement (spec §4 : masquées sous 768 px). */
body.hp-template--listing-view-page .tfd-gallery__thumbs {
	display: none;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-gallery__thumbs {
		display: grid;
		grid-template-columns: repeat(6, minmax(0, 1fr));
		gap: 0.5rem;
		margin-top: 0.5rem;
	}
}

body.hp-template--listing-view-page .tfd-gallery__thumb {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	border-radius: 8px;
	overflow: hidden;
	background: var(--tfd-gallery-bg);
	aspect-ratio: 4 / 3;
	cursor: pointer;
}

body.hp-template--listing-view-page .tfd-gallery__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Liseré actif dessiné par-dessus l'image : un contour sur le bouton serait
   couvert par elle. */
body.hp-template--listing-view-page .tfd-gallery__thumb::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;
	border-radius: inherit;
	box-shadow: inset 0 0 0 2px transparent;
	transition: box-shadow 0.15s ease;
	pointer-events: none;
}

body.hp-template--listing-view-page .tfd-gallery__thumb.is-active::after,
body.hp-template--listing-view-page .tfd-gallery__thumb:focus-visible::after {
	box-shadow: inset 0 0 0 2px var(--primary, #F15A29);
}

/* « +N » sur la dernière vignette quand il reste des photos. */
body.hp-template--listing-view-page .tfd-gallery__thumb[data-more]::before {
	content: attr(data-more);
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(32, 42, 53, 0.62);
	color: #fff;
	font-size: 1.125rem;
	font-weight: 700;
}

/* Lightbox : <dialog> plein écran. Le fond sombre est porté par l'élément
   lui-même pour couvrir aussi le repli sans showModal(). */
body.hp-template--listing-view-page .tfd-gallery__lightbox {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	max-width: none;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: rgba(10, 12, 16, 0.94);
	color: #fff;
}

body.hp-template--listing-view-page .tfd-gallery__lightbox::backdrop {
	background: transparent;
}

html.tfd-gallery-lock {
	overflow: hidden;
}

body.hp-template--listing-view-page .tfd-gallery__lightbox .tfd-gallery__track {
	height: 100%;
}

body.hp-template--listing-view-page .tfd-gallery__lightbox .tfd-gallery__slide {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	padding: 4rem 1rem;
}

@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-gallery__lightbox .tfd-gallery__slide {
		padding: 4rem 5rem;
	}
}

body.hp-template--listing-view-page .tfd-gallery__lightbox .tfd-gallery__slide img,
body.hp-template--listing-view-page .tfd-gallery__lightbox .tfd-gallery__slide video {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	cursor: default;
}

body.hp-template--listing-view-page .tfd-gallery__counter--lightbox {
	top: 1.25rem;
	left: 1.25rem;
	right: auto;
	bottom: auto;
	background: rgba(255, 255, 255, 0.14);
	font-size: 0.875rem;
}

/* Croix de fermeture dessinée en CSS. */
body.hp-template--listing-view-page .tfd-gallery__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	z-index: 3;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.14);
	cursor: pointer;
	transition: background-color 0.15s ease;
}

body.hp-template--listing-view-page .tfd-gallery__close:hover,
body.hp-template--listing-view-page .tfd-gallery__close:focus-visible {
	background: rgba(255, 255, 255, 0.28);
}

body.hp-template--listing-view-page .tfd-gallery__close::before,
body.hp-template--listing-view-page .tfd-gallery__close::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 1.125rem;
	height: 2px;
	background: #fff;
	transform: translate(-50%, -50%) rotate(45deg);
}

body.hp-template--listing-view-page .tfd-gallery__close::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}

/* -------------------------
   Sidebar (lot 4) : deux cartes au même gabarit.
   - Vendeur : conteneur natif listing_actions_primary (classes ajoutées par
     le filtre de template) qui contient le template vendor_view_block allégé
     (identité), le bouton « Send message », puis « Rate this seller ».
   - Buying safely : hivepress/listing/view/page/tfd-buying-safely.php.
   ListingHive habille les conteneurs natifs en encadrés à ombre : on repart
   d'un gabarit unique.
------------------------- */

body.hp-template--listing-view-page .hp-listing--view-page .tfd-sidebar-card {
	margin: 0 0 1rem;
	padding: 1.25rem;
	border: 1px solid var(--tfd-line);
	border-radius: 12px;
	background: #fff;
	box-shadow: none;
	/* ListingHive centre le contenu de ces deux conteneurs natifs. */
	text-align: left;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-vendor-card,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-vendor-card .hp-vendor__content,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-vendor-card .hp-vendor__name {
	text-align: left;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-sidebar-card:hover {
	box-shadow: none;
}

body.hp-template--listing-view-page .tfd-sidebar-card__title {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 0 1rem;
	font-size: 1.125rem;
	line-height: 1.3;
	color: var(--tfd-text);
}

/* Carte vendeur : bouton « Send message » plein, orange, pictogramme. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .hp-listing__action--message {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 1rem;
	border: 0;
	border-radius: 0.625rem;
	background: var(--primary, #F15A29);
	box-shadow: none;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	transition: background-color 0.15s ease;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .hp-listing__action--message:hover,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .hp-listing__action--message:focus-visible {
	background: #D94D20;
	color: #fff;
}

/* Le pictogramme est dans le markup (gabarit enfant message-send-link.php) :
   ListingHive occupe déjà ::before et ::after des boutons. */
body.hp-template--listing-view-page .tfd-seller-card .hp-listing__action--message i {
	font-size: 1rem;
}

/* ListingHive centre les enfants de ce conteneur : identité à gauche,
   bouton sur toute la largeur. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card {
	display: flex;
	flex-direction: column;
	align-items: stretch;
}

/* Bouton « Show phone » (lot 6) : secondaire en contour orange sous le
   bouton plein « Send message » (hiérarchie façon Leboncoin). Couleurs
   explicites, sans héritage : le contour foncé initial ressortait gris.
   Une fois révélé, un lien tel: au même dessin ; le sélecteur inclut
   .hp-listing--view-page pour passer devant les couleurs de lien du thème. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .tfd-phone-reveal,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card a.tfd-phone-reveal {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	min-height: 3rem;
	margin: 0.625rem 0 0;
	padding: 0.75rem 1rem;
	border: 2px solid var(--primary, #F15A29);
	border-radius: 0.625rem;
	background: #fff;
	color: var(--primary, #F15A29);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .tfd-phone-reveal i {
	color: inherit;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .tfd-phone-reveal:hover,
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .tfd-phone-reveal:focus-visible {
	background: rgba(241, 90, 41, 0.08);
	color: var(--primary, #F15A29);
}

body.hp-template--listing-view-page .tfd-phone-reveal.is-busy {
	opacity: 0.6;
	cursor: progress;
}

/* Numéro révélé : texte foncé pour la lisibilité (l'orange sur blanc est
   sous le contraste recommandé pour un texte à lire), contour et icône
   restent orange. Vaut pour la carte vendeur et la barre mobile. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card a.tfd-phone-reveal.is-revealed,
body.hp-template--listing-view-page a.tfd-listing-actionbar__button--phone.is-revealed {
	color: var(--tfd-text, #202A35);
	letter-spacing: 0.02em;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card a.tfd-phone-reveal.is-revealed i,
body.hp-template--listing-view-page a.tfd-listing-actionbar__button--phone.is-revealed i {
	color: var(--primary, #F15A29);
}

/* Lien « Rate this seller » sous les boutons. */
body.hp-template--listing-view-page .tfd-seller-card__rate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	align-self: center;
	margin-top: 0.875rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--primary, #F15A29);
	text-decoration: none;
}

body.hp-template--listing-view-page .tfd-seller-card__rate:hover {
	text-decoration: underline;
}

/* Identité du vendeur (template vendor_view_block) à l'intérieur de la carte :
   plus de cadre propre, ListingHive lui en donnait un avec ombre. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .tfd-vendor-card {
	margin: 0 0 1.125rem;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .tfd-vendor-card:hover {
	box-shadow: none;
}

/* Identité : avatar 44 px à gauche, nom et ancienneté à sa droite,
   le reste aligné sous le nom. */
body.hp-template--listing-view-page .hp-listing--view-page .tfd-vendor-card .hp-vendor__content {
	display: grid;
	grid-template-columns: 2.75rem minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: center;
	margin: 0;
	padding: 0;
}

body.hp-template--listing-view-page .tfd-vendor-card .tfd-vendor__avatar {
	grid-row: 1 / span 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	overflow: hidden;
	background: #FFF1EC;
	color: var(--primary, #F15A29);
	text-decoration: none;
}

body.hp-template--listing-view-page .tfd-vendor-card .tfd-vendor__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	background: transparent;
}

body.hp-template--listing-view-page .tfd-vendor-card .tfd-vendor__initials {
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1;
}

body.hp-template--listing-view-page .tfd-vendor-card .hp-vendor__name {
	grid-column: 2;
	margin: 0;
	font-size: 1.0625rem;
	line-height: 1.3;
}

body.hp-template--listing-view-page .tfd-vendor-card .hp-vendor__details--primary,
body.hp-template--listing-view-page .tfd-vendor-card .tfd-vendor__verified {
	grid-column: 2;
}

body.hp-template--listing-view-page .tfd-vendor-card .hp-vendor__name a {
	color: var(--tfd-text);
	text-decoration: none;
}

body.hp-template--listing-view-page .tfd-vendor-card .hp-vendor__name a:hover {
	color: var(--primary, #F15A29);
}

body.hp-template--listing-view-page .tfd-vendor-card .hp-vendor__details--primary {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
	margin: 0;
}

/* La date reste sur la ligne de l'avatar ; la note passe dessous, à part. */
body.hp-template--listing-view-page .tfd-vendor-card .hp-vendor__details--primary .hp-vendor__rating {
	margin-top: 0.375rem;
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-vendor-card .hp-vendor__registered-date {
	margin: 0;
	font-size: 0.8125rem;
	letter-spacing: normal;
	text-transform: none;
	color: var(--tfd-muted);
}

body.hp-template--listing-view-page .hp-listing--view-page .tfd-vendor-card .hp-vendor__rating {
	margin: 0;
	font-size: 0.875rem;
	color: var(--tfd-text);
}

body.hp-template--listing-view-page .tfd-vendor-card .hp-rating-stars i.active {
	color: var(--primary, #F15A29);
}

body.hp-template--listing-view-page .tfd-vendor__verified {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.625rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: #1B9C5B;
}

/* Mention « Pro » dans le titre (attribut listing_type de l'annonce). */
body.hp-template--listing-view-page .tfd-pro-badge {
	display: inline-block;
	vertical-align: middle;
	margin-left: 0.5rem;
	padding: 0.15rem 0.5rem;
	border: 1.5px solid var(--tfd-text);
	border-radius: 0.375rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--tfd-text);
}

/* Buying safely : pictogramme orange, trois conseils, lien facultatif.
   Tout est aligné à gauche sur une seule colonne de texte : le titre
   reprend la grille des conseils (colonne d'icône de 2.25rem + même
   écart), son bouclier se place au-dessus des pastilles et « Buying
   safely » tombe exactement sur la colonne des textes. Un centrage a été
   essayé puis abandonné : la liste flottait, surtout en mobile. */
body.hp-template--listing-view-page .tfd-safety__title {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: center;
	gap: 0 0.75rem;
}

body.hp-template--listing-view-page .tfd-safety__title i {
	justify-self: center;
	color: var(--primary, #F15A29);
	font-size: 1.25rem;
}

body.hp-template--listing-view-page .tfd-safety__list {
	display: grid;
	gap: 0.875rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

body.hp-template--listing-view-page .tfd-safety__item {
	display: grid;
	grid-template-columns: 2.25rem minmax(0, 1fr);
	column-gap: 0.75rem;
	align-items: start;
	margin: 0;
}

body.hp-template--listing-view-page .tfd-safety__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: #FFF1EC;
	color: var(--primary, #F15A29);
	font-size: 0.9375rem;
}

body.hp-template--listing-view-page .tfd-safety__body {
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}

body.hp-template--listing-view-page .tfd-safety__item-title {
	font-size: 0.9375rem;
	font-weight: 600;
	color: var(--tfd-text);
}

body.hp-template--listing-view-page .tfd-safety__item-text {
	font-size: 0.8125rem;
	line-height: 1.45;
	color: var(--tfd-muted);
}

body.hp-template--listing-view-page .tfd-safety__link {
	display: flex;
	justify-content: center;
	margin-top: 1rem;
	padding: 0.625rem 1rem;
	border: 1px solid var(--tfd-line);
	border-radius: 0.5rem;
	color: var(--tfd-text);
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	transition: border-color 0.15s ease, color 0.15s ease;
}

body.hp-template--listing-view-page .tfd-safety__link:hover {
	border-color: var(--primary, #F15A29);
	color: var(--primary, #F15A29);
}

/* -------------------------
   Respiration sous le menu. Le thème n'ajoute aucun espace au-dessus de la
   rangée de la page annonce (page_header vide) : le fil d'Ariane et la
   carte vendeur touchaient la barre de navigation (retour Dan, 2026-09-27).
------------------------- */

body.hp-template--listing-view-page .hp-listing--view-page.hp-row {
	padding-top: 1.5rem;
}

@media (max-width: 767.98px) {
	body.hp-template--listing-view-page .hp-listing--view-page.hp-row {
		padding-top: 0.75rem;
	}
}

/* -------------------------
   Colonne de droite collante sous l'en-tête fixe. Le composant « sticky »
   de HivePress (frontend.js, sticky-sidebar) cale la colonne à 32 px du haut
   de la fenêtre, valeur figée dans son script ; notre en-tête fixe mesure
   109 px (header.css), la carte vendeur passait dessous (retour Dan,
   2026-09-27). La bibliothèque met la classe is-affixed sur l'enveloppe
   qu'HivePress crée, et pose « position: fixed; top: 32px » en style inline
   sur son enfant .inner-wrapper-sticky. On écrase ce top, hauteur de
   l'en-tête + 24 px (+ barre d'administration), UNIQUEMENT dans l'état
   fixé : les autres états de la bibliothèque (butée basse du conteneur,
   colonne plus haute que la fenêtre) gardent leurs valeurs. À ajuster avec
   header.css si la hauteur des barres change.
------------------------- */

@media (min-width: 768px) {
	body.hp-template--listing-view-page .hp-page__sidebar .inner-wrapper-sticky[style*="position: fixed"] {
		top: 133px !important;
	}

	body.admin-bar.hp-template--listing-view-page .hp-page__sidebar .inner-wrapper-sticky[style*="position: fixed"] {
		top: 165px !important;
	}
}

/* -------------------------
   Fil d'Ariane (lot 7) : Rank Math (nav.rank-math-breadcrumb > p) ou repli
   de la part, même structure a / span.separator / span.last.
------------------------- */

body.hp-template--listing-view-page .tfd-breadcrumb {
	margin: 0 0 1rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--tfd-muted);
}

body.hp-template--listing-view-page .tfd-breadcrumb p {
	margin: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

body.hp-template--listing-view-page .tfd-breadcrumb a {
	color: var(--tfd-muted);
	text-decoration: none;
}

body.hp-template--listing-view-page .tfd-breadcrumb a:hover,
body.hp-template--listing-view-page .tfd-breadcrumb a:focus-visible {
	color: var(--primary, #F15A29);
}

body.hp-template--listing-view-page .tfd-breadcrumb .separator {
	margin: 0 0.4rem;
}

body.hp-template--listing-view-page .tfd-breadcrumb .last {
	color: var(--tfd-text);
	font-weight: 600;
}

/* -------------------------
   Annonces similaires (lot 7) : section pleine largeur sous les colonnes,
   carrousel de l'accueil. La section est hors .hp-listing--view-page, d'où
   des règles de marge propres.
------------------------- */

body.hp-template--listing-view-page .tfd-listing-section--related {
	margin: 1rem 0 2.5rem;
}

body.hp-template--listing-view-page .tfd-listing-section--related .tfd-carousel {
	margin: 0;
}

/* Attribut clé non renseigné : libellé conservé, valeur « N/A » discrète. */
body.hp-template--listing-view-page .tfd-listing-attrs__value--empty {
	color: #9AA0A6;
	font-weight: 400;
}

/* -------------------------
   Page « annonce indisponible » (règle SEO D5) : body.tfd-listing-unavailable,
   gabarit template-parts/listing/unavailable.php. Carte sobre, aucune action
   de contact, puis le carrousel des annonces similaires.
------------------------- */

body.tfd-listing-unavailable .tfd-unavailable {
	max-width: 56rem;
	margin: 1.5rem auto 2.5rem;
}

body.tfd-listing-unavailable .tfd-unavailable__notice {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	margin: 0 0 1.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid #F6C9B7;
	border-radius: 0.625rem;
	background: #FFF3EE;
	color: #7A2E12;
	font-weight: 600;
}

body.tfd-listing-unavailable .tfd-unavailable__notice i {
	color: var(--primary, #F15A29);
}

body.tfd-listing-unavailable .tfd-unavailable__card {
	display: grid;
	grid-template-columns: minmax(0, 18rem) minmax(0, 1fr);
	gap: 1.5rem;
	align-items: start;
	padding: 1.25rem;
	border: 1px solid #E3E5E8;
	border-radius: 12px;
	background: #fff;
}

body.tfd-listing-unavailable .tfd-unavailable__media img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 0.625rem;
	filter: grayscale(0.4);
	background: transparent;
}

body.tfd-listing-unavailable .tfd-unavailable__title {
	margin: 0 0 0.5rem;
	font-size: 1.75rem;
	line-height: 1.2;
	color: #202A35;
	text-align: left;
}

body.tfd-listing-unavailable .tfd-unavailable__price {
	margin: 0 0 0.375rem;
	font-size: 1.375rem;
	font-weight: 700;
	color: #202A35;
}

body.tfd-listing-unavailable .tfd-unavailable__price span {
	font-size: 0.8125rem;
	font-weight: 400;
	color: #5F6670;
}

body.tfd-listing-unavailable .tfd-unavailable__location {
	margin: 0 0 1rem;
	color: #5F6670;
}

body.tfd-listing-unavailable .tfd-unavailable__location i {
	color: var(--primary, #F15A29);
}

body.tfd-listing-unavailable .tfd-unavailable__text {
	color: #5F6670;
}

/* CTA « Browse … » / « Back to home » : même bouton plein orange que
   « Send message » de la carte vendeur (ListingHive rend .button en gris). */
body.tfd-listing-unavailable .tfd-unavailable__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	margin: 0;
	padding: 0.75rem 1.5rem;
	border: 0;
	border-radius: 0.625rem;
	background: var(--primary, #F15A29);
	box-shadow: none;
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	text-decoration: none;
	transition: background-color 0.15s ease;
}

body.tfd-listing-unavailable .tfd-unavailable__cta:hover,
body.tfd-listing-unavailable .tfd-unavailable__cta:focus-visible {
	background: #D94D20;
	color: #fff;
}

body.tfd-listing-unavailable .tfd-listing-section--related {
	margin-top: 2rem;
}

@media (max-width: 767.98px) {
	body.tfd-listing-unavailable .tfd-unavailable__card {
		grid-template-columns: 1fr;
	}
}

/* -------------------------
   Mobile (lot 5, spec §4) : sous 768 px.
   1 galerie · 2-5 en-tête (titre, prix, localisation, actions) ·
   6 description · 7 carte vendeur sans bouton · 8 attributs clés
   « About this item » · 9 Specifications repliées · 10 Buying safely ·
   11 related listings · barre fixe basse.
------------------------- */

/* Éléments propres au mobile, masqués partout ailleurs. */
@media (min-width: 768px) {
	body.hp-template--listing-view-page .tfd-listing-attrs__title--mobile,
	body.hp-template--listing-view-page .tfd-collapse__toggle,
	body.hp-template--listing-view-page .tfd-listing-actionbar,
	body.hp-template--listing-view-page .tfd-listing-actionbar__spacer {
		display: none !important;
	}
}

@media (max-width: 767.98px) {

	/* Ordre vertical : les deux colonnes sont fondues (display: contents),
	   leurs enfants deviennent des items directs de la rangée et se trient
	   par order. Le hp-row perd ses marges négatives, qui compensaient le
	   padding des colonnes disparues. L'emballage collant de HivePress
	   (div sans classe + .inner-wrapper-sticky) n'existe qu'à partir de
	   768 px, mais peut subsister après un redimensionnement : fondu aussi. */
	body.hp-template--listing-view-page .hp-listing--view-page.hp-row {
		flex-direction: column;
		flex-wrap: nowrap;
		margin-left: 0;
		margin-right: 0;
	}

	/* !important : le composant « sticky » de HivePress mesure la sidebar au
	   chargement et la masque en ligne (display: none) si sa hauteur est
	   nulle ; une colonne fondue n'a plus de hauteur propre. */
	body.hp-template--listing-view-page .hp-listing--view-page > .hp-page__content,
	body.hp-template--listing-view-page .hp-listing--view-page > .hp-page__sidebar,
	body.hp-template--listing-view-page .hp-page__sidebar > div:not(.tfd-sidebar-card),
	body.hp-template--listing-view-page .hp-page__sidebar .inner-wrapper-sticky {
		display: contents !important;
	}

	/* NOTE (2026-09-25) — Écart avec la spec §4 : les attributs clés
	   (« About this item ») puis les Specifications repliées remontent juste
	   sous l'en-tête, avant la description, comme les critères de Leboncoin.
	   Décision de Dan : sur une auto, année, kilométrage, marque et modèle se
	   lisent avant le texte, et tous les attributs restent groupés. */
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-gallery { order: 1; }
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-breadcrumb { order: 2; } /* avant l'en-tête (ordre DOM) */
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header { order: 2; }
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-attrs--secondary { order: 3; }
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-attrs--ternary { order: 4; }
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-section--description { order: 6; }
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card { order: 7; }
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-safety { order: 10; }

	/* Les blocs sortis de leur colonne gardent un rythme vertical commun. */
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-gallery,
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-header,
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-section,
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-sidebar-card,
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-attrs--secondary {
		width: 100%;
		min-width: 0;
		margin: 0 0 1.5rem;
	}

	/* En-tête : même construction qu'en desktop, titre pleine largeur puis
	   prix à gauche et actions en face, puis localisation et date. Posés en
	   ligne sous la date, les trois boutons semblaient sans rapport avec le
	   reste (retour de Dan, 2026-09-25). */
	body.hp-template--listing-view-page .tfd-listing-header {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas:
			"title title"
			"price actions"
			"details details";
		column-gap: 0.75rem;
		row-gap: 0.5rem;
		align-items: center;
	}

	body.hp-template--listing-view-page .tfd-listing-header > * + * {
		margin-top: 0;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-listing__title {
		grid-area: title;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-listing__attributes--primary {
		grid-area: price;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-listing__details--primary {
		grid-area: details;
	}

	body.hp-template--listing-view-page .tfd-listing-header .hp-page__topbar {
		grid-area: actions;
		justify-content: flex-end;
	}

	/* Actions sur la photo : le script déplace le bloc dans la galerie, en
	   pastilles blanches en haut à droite (décision du 2026-09-25). La scène
	   passe en overflow visible pour laisser sortir le popover de partage ;
	   l'arrondi des coins est alors porté par le rail, qui rogne lui-même. */
	body.hp-template--listing-view-page .tfd-gallery__stage .tfd-listing-actions {
		position: absolute;
		top: 0.75rem;
		right: 0.75rem;
		z-index: 3;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0;
		padding: 0;
		border: 0;
	}

	body.hp-template--listing-view-page .tfd-gallery__stage .tfd-listing-actions .hp-listing__actions--secondary .hp-listing__action,
	body.hp-template--listing-view-page .tfd-gallery__stage .tfd-listing-actions .hp-listing__actions--secondary .tfd-share__toggle {
		width: 2.5rem;
		height: 2.5rem;
		border: 0;
		border-radius: 50%;
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
	}

	body.hp-template--listing-view-page .tfd-gallery__stage {
		overflow: visible;
	}

	body.hp-template--listing-view-page .tfd-gallery__track {
		border-radius: var(--tfd-gallery-radius);
	}

	/* Carte vendeur informative : les boutons sont dans la barre fixe. */
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .hp-listing__action--message,
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-seller-card .tfd-phone-reveal {
		display: none;
	}

	/* Attributs clés : plus d'encadré sous 768 px, le bloc se lit comme les
	   autres sections, titre et repère orange alignés sur ceux de la
	   description. */
	body.hp-template--listing-view-page .hp-listing--view-page .tfd-listing-attrs--secondary {
		padding: 0;
		border: 0;
		border-radius: 0;
		background: none;
	}

	/* Titre « About this item » de la bande des attributs clés. */
	body.hp-template--listing-view-page .tfd-listing-attrs__title--mobile {
		display: block;
		margin: 0 0 1rem;
		font-size: 1.25rem;
		line-height: 1.3;
		color: var(--tfd-text);
	}

	/* Bouton des repliables : pleine largeur, centré, encadré, même dessin
	   que « View all details » en desktop. Un lien nu à gauche se voyait mal. */
	body.hp-template--listing-view-page .tfd-collapse__toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 0.6rem;
		width: 100%;
		margin-top: 1rem;
		padding: 0.7rem 1rem;
		border: 1px solid var(--tfd-line);
		border-radius: 0.5rem;
		background: #fff;
		color: var(--tfd-text);
		font-size: 0.9375rem;
		font-weight: 600;
		line-height: 1.2;
		cursor: pointer;
	}

	/* NOTE (2026-10-12) — Le bouton est rendu avec l'attribut hidden et le
	   script ne le retire que si le contenu déborde. La règle display: flex
	   ci-dessus l'emportait sur le display: none de [hidden] : une description
	   courte affichait quand même « Read more », chevron déjà retourné
	   (constaté en prod). L'attribut doit toujours gagner. */
	body.hp-template--listing-view-page .tfd-collapse__toggle[hidden] {
		display: none;
	}

	body.hp-template--listing-view-page .tfd-collapse__toggle::after {
		content: "";
		width: 0.4rem;
		height: 0.4rem;
		margin-top: -0.2rem;
		border-right: 2px solid currentColor;
		border-bottom: 2px solid currentColor;
		transform: rotate(45deg);
		transition: transform 0.15s ease;
	}

	body.hp-template--listing-view-page .tfd-collapse.is-open > .tfd-collapse__toggle::after {
		margin-top: 0.2rem;
		transform: rotate(-135deg);
	}

	/* Description repliée : ~6 lignes puis fondu. Seulement quand le script
	   est là (html.tfd-js), sinon le texte reste complet. */
	html.tfd-js body.hp-template--listing-view-page .tfd-collapse:not(.is-open) .hp-listing__description {
		max-height: 9.75rem;
		overflow: hidden;
		-webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
		mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
	}

	/* Specifications repliées sous leur titre. */
	html.tfd-js body.hp-template--listing-view-page .tfd-listing-attrs--ternary.tfd-collapse:not(.is-open) .tfd-listing-attrs__list,
	html.tfd-js body.hp-template--listing-view-page .tfd-listing-attrs--ternary.tfd-collapse:not(.is-open) .tfd-listing-attrs__more {
		display: none;
	}

	/* Une fois dépliées, tout est visible : le repli interne du desktop
	   (« View all details ») est ouvert par le script et son bouton masqué.
	   Sans script, il reste utilisable. */
	html.tfd-js body.hp-template--listing-view-page .tfd-listing-attrs--ternary .tfd-listing-attrs__more > .tfd-listing-attrs__toggle {
		display: none;
	}

	body.hp-template--listing-view-page .tfd-listing-attrs--ternary .tfd-collapse__toggle {
		margin-top: 0;
	}

	body.hp-template--listing-view-page .tfd-listing-attrs--ternary.is-open .tfd-collapse__toggle {
		margin-bottom: 1rem;
	}

	/* Barre d'actions fixe. z-index 900 : sous les modals HivePress. La
	   réserve de hauteur est un espaceur en flux, rendu avec la barre. */
	body.hp-template--listing-view-page .tfd-listing-actionbar__spacer {
		height: calc(4.5rem + env(safe-area-inset-bottom, 0px));
	}

	body.hp-template--listing-view-page .tfd-listing-actionbar {
		position: fixed;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 900;
		display: flex;
		gap: 0.75rem;
		padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom, 0px));
		background: #fff;
		border-top: 1px solid var(--tfd-line);
		box-shadow: 0 -4px 16px rgba(32, 42, 53, 0.08);
	}

	body.hp-template--listing-view-page .tfd-listing-actionbar__button {
		flex: 1 1 0;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 0.5rem;
		min-height: 3rem;
		padding: 0.75rem 1rem;
		border: 0;
		border-radius: 0.625rem;
		font-size: 1rem;
		font-weight: 700;
		cursor: pointer;
	}

	body.hp-template--listing-view-page .tfd-listing-actionbar__button--message {
		background: var(--primary, #F15A29);
		color: #fff;
	}

	/* « Show phone » (lot 6) : secondaire à gauche, contour orange comme
	   dans la carte vendeur ; devient un lien tel: au même dessin une fois
	   le numéro révélé. */
	body.hp-template--listing-view-page .tfd-listing-actionbar__button--phone,
	body.hp-template--listing-view-page a.tfd-listing-actionbar__button--phone {
		border: 2px solid var(--primary, #F15A29);
		background: #fff;
		color: var(--primary, #F15A29);
		text-decoration: none;
	}

	body.hp-template--listing-view-page .tfd-listing-actionbar__button--phone i {
		color: inherit;
	}

	/* Numéro révélé : sur une ligne, quoi qu'il arrive. Le lien prend la
	   largeur du numéro (+1 (xxx) xxx-xxxx), un peu plus serré, et
	   « Send message » cède le reste. */
	body.hp-template--listing-view-page .tfd-listing-actionbar__button--phone.is-revealed {
		flex: 0 1 auto;
		gap: 0.375rem;
		padding-right: 0.75rem;
		padding-left: 0.75rem;
		font-size: 0.9375rem;
		font-variant-numeric: tabular-nums;
		letter-spacing: 0;
		white-space: nowrap;
	}

	body.hp-template--listing-view-page .tfd-listing-actionbar__button--message {
		min-width: 0;
	}

	body.hp-template--listing-view-page .tfd-listing-actionbar__button--message span {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}