/*
 * Fiche annonce (/annonce/{id}/) — LOT 1 (public).
 * Galerie + visionneuse plein écran, résumé (titre, prix, actions),
 * informations générales, description, vendeur, recommandés, bouton
 * « Appeler le vendeur ». Uniquement des variables de tokens.css.
 *
 * Disposition : mobile = galerie, résumé, détails, vendeur (ordre de l'app) ;
 * bureau (≥ 900 px) = galerie | résumé, puis détails | vendeur (collant).
 */

.fiche__fil {
	margin-bottom: var(--espace-4);
}

.fiche__retour {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-1);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-m);
}

.fiche__retour:hover {
	color: var(--couleur-or-clair);
}

.fiche__apercu {
	margin-bottom: var(--espace-5);
}

.fiche__grille {
	display: grid;
	grid-template-areas:
		'galerie'
		'resume'
		'details'
		'vendeur';
	gap: var(--espace-6);
}

.fiche__galerie {
	grid-area: galerie;
	min-width: 0;
}

.fiche__resume {
	grid-area: resume;
}

.fiche__details {
	grid-area: details;
	min-width: 0;
}

.fiche__vendeur {
	grid-area: vendeur;
}

@media (min-width: 900px) {
	.fiche__grille {
		grid-template-columns: minmax(0, 1.65fr) minmax(320px, 1fr);
		grid-template-areas:
			'galerie resume'
			'details vendeur';
		gap: var(--espace-8);
		align-items: start;
	}

	.fiche__vendeur {
		position: sticky;
		top: calc(var(--hauteur-en-tete) + var(--espace-6));
	}
}

/* =============================================================================
 * Galerie
 * ========================================================================== */
.galerie__scene {
	position: relative;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-xl);
	background: var(--couleur-surface-2);
	/* Glisser horizontal géré par galerie.js ; défilement et zoom natifs. */
	touch-action: pan-y pinch-zoom;
	user-select: none;
}

@media (max-width: 639px) {
	/* Mobile : photo bord à bord, comme l'app. */
	.fiche__galerie {
		margin-inline: calc(-1 * var(--gouttiere));
	}

	.galerie__scene {
		border-inline: 0;
		border-radius: 0;
	}

	.galerie__vignettes {
		padding-inline: var(--gouttiere);
	}
}

/* Fond flouté : une photo verticale reste entière, sans bandes noires. */
.galerie__fond {
	position: absolute;
	inset: -10%;
	width: 120%;
	height: 120%;
	max-width: none;
	object-fit: cover;
	filter: blur(28px) brightness(0.5) saturate(1.1);
	pointer-events: none;
}

.galerie__media {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	cursor: zoom-in;
}

.galerie__media--video {
	cursor: pointer;
}

.galerie__media:focus-visible {
	outline-offset: -4px;
	border-radius: var(--rayon-xl);
}

.galerie__image {
	width: 100%;
	height: 100%;
	object-fit: contain;
	-webkit-user-drag: none;
}

.galerie__sans-affiche,
.galerie__sans-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-2);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
}

.galerie__sans-affiche .icone,
.galerie__sans-photo .icone {
	width: 40px;
	height: 40px;
}

.galerie--vide {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 3;
	border: 1px dashed var(--couleur-bordure);
	border-radius: var(--rayon-xl);
	background: var(--couleur-surface);
}

/* Bouton lecture d'une vidéo (poster + ▶, lecture en plein écran comme l'app). */
.galerie__lecture {
	position: absolute;
	display: grid;
	place-items: center;
	width: 76px;
	height: 76px;
	padding-left: 4px;
	border: 1px solid var(--couleur-contour-verre);
	border-radius: 50%;
	background: var(--couleur-voile);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--couleur-texte);
	transition: transform var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}

.galerie__lecture .icone {
	width: 34px;
	height: 34px;
}

.galerie__media:hover .galerie__lecture {
	border-color: var(--couleur-or);
	color: var(--couleur-or-clair);
	transform: scale(1.05);
}

/* Commandes posées sur la photo (flèches, plein écran, compteur). */
.galerie__fleche,
.galerie__agrandir {
	position: absolute;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--couleur-contour-verre);
	border-radius: 50%;
	background: var(--couleur-voile);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--couleur-texte);
	transition: opacity var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}

.galerie__fleche:hover,
.galerie__agrandir:hover {
	border-color: var(--couleur-or);
}

.galerie__fleche {
	top: 50%;
	translate: 0 -50%;
}

.galerie__fleche--precedente {
	left: var(--espace-3);
}

.galerie__fleche--suivante {
	right: var(--espace-3);
}

.galerie__agrandir {
	top: var(--espace-3);
	right: var(--espace-3);
}

.galerie__agrandir .icone {
	width: 20px;
	height: 20px;
}

/* Souris : flèches discrètes, révélées au survol ou au clavier. */
@media (hover: hover) and (pointer: fine) {
	.galerie__fleche {
		opacity: 0;
	}

	.galerie__scene:hover .galerie__fleche,
	.galerie__scene:focus-within .galerie__fleche {
		opacity: 1;
	}
}

.galerie__compteur {
	position: absolute;
	right: var(--espace-3);
	bottom: var(--espace-3);
	padding: 4px 10px;
	border-radius: var(--rayon-m);
	background: var(--couleur-voile);
	color: var(--couleur-texte);
	font-size: var(--taille-s);
	font-weight: var(--graisse-semi);
	pointer-events: none;
}

.galerie__vignettes {
	display: flex;
	gap: var(--espace-2);
	margin-top: var(--espace-3);
	padding-block: 2px;
	overflow-x: auto;
	scrollbar-width: thin;
}

.galerie__vignette {
	position: relative;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 88px;
	aspect-ratio: 4 / 3;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: var(--rayon-s);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte-secondaire);
	opacity: 0.65;
	transition: opacity var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}

.galerie__vignette:hover,
.galerie__vignette[aria-current='true'] {
	opacity: 1;
}

.galerie__vignette[aria-current='true'] {
	border-color: var(--couleur-or);
}

.galerie__vignette img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.galerie__vignette-lecture {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background: color-mix(in srgb, var(--couleur-noir) 35%, transparent);
	color: var(--couleur-texte);
}

.galerie__vignette-lecture .icone {
	width: 22px;
	height: 22px;
}

/* =============================================================================
 * Visionneuse plein écran (<dialog>, galerie.js)
 * ========================================================================== */
html:has(.visionneuse[open]) {
	overflow: hidden;
}

.visionneuse {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--couleur-noir);
	color: var(--couleur-texte);
}

.visionneuse[open] {
	display: grid;
	grid-template-rows: auto minmax(0, 1fr);
	animation: pepite-modale-entree var(--duree) var(--courbe);
}

.visionneuse::backdrop {
	background: var(--couleur-noir);
}

.visionneuse__barre {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-3);
	padding: var(--espace-3) var(--espace-4);
	padding-top: max(var(--espace-3), env(safe-area-inset-top, 0px));
}

.visionneuse__compteur {
	font-size: var(--taille-base);
	font-weight: var(--graisse-semi);
}

.visionneuse__fermer,
.visionneuse__fleche {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--couleur-contour-verre);
	border-radius: 50%;
	background: var(--couleur-voile);
	color: var(--couleur-texte);
}

.visionneuse__fermer:hover,
.visionneuse__fleche:hover {
	border-color: var(--couleur-or);
}

.visionneuse__fleche {
	position: fixed;
	top: 50%;
	z-index: 1;
	translate: 0 -50%;
}

.visionneuse__fleche--precedente {
	left: var(--espace-4);
}

.visionneuse__fleche--suivante {
	right: var(--espace-4);
}

/* Cellule unique de taille définie : max-height: 100% du média s'y applique. */
.visionneuse__scene {
	display: grid;
	grid-template: minmax(0, 1fr) / minmax(0, 1fr);
	place-items: center;
	min-height: 0;
	padding: 0 var(--espace-4) max(var(--espace-4), env(safe-area-inset-bottom, 0px));
	touch-action: pan-y pinch-zoom;
}

.visionneuse__image,
.visionneuse__video {
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: auto;
	min-height: 0;
	max-height: 100%;
	object-fit: contain;
	background: var(--couleur-surface);
}

.visionneuse__image {
	-webkit-user-drag: none;
	user-select: none;
}

@media (max-width: 639px) {
	/* Petit écran : on glisse au doigt, les flèches passent en bas. */
	.visionneuse__fleche {
		top: auto;
		bottom: max(var(--espace-4), env(safe-area-inset-bottom, 0px));
		translate: none;
	}
}

/* =============================================================================
 * Résumé : titre, prix, badges, actions
 * ========================================================================== */
.fiche__resume {
	padding: var(--espace-6);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-xl);
	background: var(--couleur-surface);
}

.fiche__titre {
	display: flex;
	flex-direction: column;
	gap: var(--espace-1);
}

/* MARQUE en très gros + modèle (app, fiche_annonce_screen.dart). */
.fiche__marque {
	font-size: clamp(1.75rem, 3vw, 2.375rem);
	font-weight: var(--graisse-extra);
	letter-spacing: -0.015em;
	line-height: 1.05;
	text-transform: uppercase;
}

.fiche__modele {
	color: var(--couleur-texte-doux);
	font-size: var(--taille-xl);
	font-weight: var(--graisse-normale);
	line-height: var(--interligne-serre);
}

/* Version (lot 5) : motorisation / finition, sous le modèle. */
.fiche__version {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-m);
	font-weight: var(--graisse-moyenne);
	line-height: var(--interligne-serre);
}

/* Catégorie (lot 5) : pastille-lien au-dessus du titre. */
.fiche__categorie {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
	margin-bottom: var(--espace-3);
	padding: 4px var(--espace-3) 4px var(--espace-2);
	border: 1px solid var(--couleur-or-bord);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-or-fond);
	color: var(--couleur-or-clair);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-semi);
	letter-spacing: var(--interlettrage-capitales);
	text-transform: uppercase;
	transition: border-color var(--duree-rapide) var(--courbe);
}

.fiche__categorie:hover {
	border-color: var(--couleur-or);
}

.fiche__categorie .icone {
	width: 18px;
	height: 18px;
}

.fiche__prix {
	margin-top: var(--espace-4);
	color: var(--couleur-or-clair);
	font-size: var(--taille-2xl);
	font-weight: var(--graisse-extra);
	letter-spacing: -0.01em;
}

.fiche__badges {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-2);
	margin-top: var(--espace-3);
}

.fiche__badges .badge {
	padding: 6px var(--espace-3);
	font-size: var(--taille-s);
}

.fiche__badges .badge--or {
	background: var(--couleur-or-fond);
}

.fiche__badges .icone {
	width: 16px;
	height: 16px;
}

.fiche__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-1) var(--espace-4);
	margin-top: var(--espace-4);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
}

.fiche__meta li {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-1);
}

.fiche__actions {
	display: flex;
	flex-direction: column;
	gap: var(--espace-3);
	margin-top: var(--espace-6);
}

.fiche__actions-secondaires {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: var(--espace-2);
}

.fiche__actions-secondaires .bouton {
	min-width: 0;
	padding-inline: var(--espace-3);
	/* « Dans vos favoris » doit tenir dans une demi-colonne à 360 px. */
	white-space: normal;
}

/* Bascules favori / sauvegarde : icône pleine et or quand actives. */
.fiche__bascule .icone--plein,
.fiche__bascule[aria-pressed='true'] .icone--vide {
	display: none;
}

.fiche__bascule[aria-pressed='true'] {
	border-color: var(--couleur-or-bord);
	color: var(--couleur-or-clair);
}

.fiche__bascule[aria-pressed='true'] .icone--plein {
	display: inline-block;
}

/* =============================================================================
 * Bouton « Appeler le vendeur » : tailles de la fiche (base commune dans
 * composants.css).
 * ========================================================================== */
.appel-vendeur__lien {
	font-size: var(--taille-l);
}

.appel-vendeur__copier {
	width: 48px;
	min-height: 48px;
	border-radius: var(--rayon-l);
}

/* =============================================================================
 * Informations générales, description
 * ========================================================================== */
.fiche__section + .fiche__section {
	margin-top: var(--espace-8);
}

/* Titres de section : petites capitales grises + trait (app, _Section). */
.fiche__titre-section {
	margin-bottom: var(--espace-2);
	padding-bottom: var(--espace-3);
	border-bottom: 1px solid var(--couleur-bordure);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
	font-weight: var(--graisse-semi);
	letter-spacing: var(--interlettrage-capitales);
	text-transform: uppercase;
}

/* Libellé à gauche, valeur à droite (app, _LigneInfo). */
.fiche__infos {
	display: grid;
	margin: 0;
}

@media (min-width: 640px) {
	.fiche__infos {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--espace-8);
	}
}

.fiche__info {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--espace-3);
	padding: var(--espace-3) 0;
	border-bottom: 1px solid var(--couleur-bordure);
}

.fiche__info dt {
	color: var(--couleur-texte-secondaire);
}

.fiche__info dd {
	margin: 0;
	font-weight: var(--graisse-moyenne);
	text-align: right;
}

.fiche__description {
	color: var(--couleur-texte-doux);
	line-height: 1.7;
	overflow-wrap: anywhere;
}

.fiche__description p + p {
	margin-top: var(--espace-3);
}

/* =============================================================================
 * Vendeur
 * ========================================================================== */
.fiche-vendeur {
	display: flex;
	align-items: center;
	gap: var(--espace-4);
	padding: var(--espace-5);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-xl);
	background: var(--couleur-surface);
	transition: border-color var(--duree-rapide) var(--courbe);
}

a.fiche-vendeur:hover {
	border-color: var(--couleur-or-bord);
}

.avatar--fiche {
	width: 64px;
	height: 64px;
	font-size: var(--taille-xl);
}

.fiche-vendeur__identite {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.fiche-vendeur__nom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--espace-2);
	font-size: var(--taille-l);
	font-weight: var(--graisse-forte);
}

.fiche-vendeur__verifie {
	width: 18px;
	height: 18px;
	color: var(--couleur-or);
}

.fiche-vendeur__ligne {
	color: var(--couleur-texte-doux);
	font-size: var(--taille-s);
}

.fiche-vendeur__ligne--discrete {
	color: var(--couleur-texte-secondaire);
}

.fiche-vendeur__voir {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	color: var(--couleur-or-clair);
	font-size: var(--taille-s);
	font-weight: var(--graisse-semi);
	white-space: nowrap;
}

@media (min-width: 900px) and (max-width: 1099px), (max-width: 479px) {
	/* Colonne étroite : « Voir le profil » passe sous l'identité. */
	.fiche-vendeur {
		flex-wrap: wrap;
	}

	.fiche-vendeur__voir {
		width: 100%;
		justify-content: flex-end;
	}
}

/* =============================================================================
 * Véhicules recommandés
 * ========================================================================== */
.fiche__recommandes {
	margin-top: var(--espace-12);
}

.fiche__recommandes .titre-section {
	margin-bottom: var(--espace-5);
}