/*
 * Recherche (/recherche/) — LOT 1 (public) + LOT 5 web (catégories, choix
 * multiples, position). Esquisse p. 8 : cartes de catégorie, blocs sombres,
 * grille de deux colonnes sur ordinateur, pilules à cocher, curseur de prix,
 * « Ma position », pastilles de couleur, barre « Rechercher » fixée en bas
 * avec le compteur. Uniquement des variables de tokens.css — sauf les
 * teintes des pastilles de couleur de carrosserie (cf. en bas de fichier).
 */

.recherche {
	max-width: calc(960px + 2 * var(--gouttiere));
}

.recherche-entete {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--espace-3) var(--espace-4);
	margin-bottom: var(--espace-6);
}

.recherche-entete__intro {
	margin-top: var(--espace-1);
	color: var(--couleur-texte-secondaire);
}

.recherche-formulaire {
	display: flex;
	flex-direction: column;
	gap: var(--espace-4);
}

/* Blocs (cartes sombres de l'esquisse) ; certains sont des <fieldset>. */
.recherche-bloc {
	display: flex;
	flex-direction: column;
	gap: var(--espace-5);
	min-width: 0;
	margin: 0;
	padding: var(--espace-5);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-xl);
	background: var(--couleur-surface);
}

/* Légende d'un bloc-fieldset : flottante, elle quitte la bordure du
 * fieldset et devient le premier élément du bloc, comme les titres h2. */
.recherche-bloc > legend {
	float: left;
	width: 100%;
	margin-bottom: 0;
}

/* Titre de bloc précédé d'une icône (catégorie, critères d'une catégorie). */
.recherche-categories__titre {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
}

.recherche-categories__titre .icone {
	width: 18px;
	height: 18px;
	color: var(--couleur-or-clair);
}

/* =============================================================================
 * Choix de la catégorie (esquisse p. 8) : cartes radio, coche dorée.
 * ========================================================================== */
.recherche-categories__liste {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: var(--espace-3);
}

.recherche-categorie {
	position: relative;
	cursor: pointer;
}

.recherche-categorie__saisie {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.recherche-categorie__carte {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--espace-1);
	height: 100%;
	min-height: 104px;
	padding: var(--espace-4) var(--espace-2) var(--espace-3);
	border: 1px solid var(--couleur-bordure-forte);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte-doux);
	text-align: center;
	transition: border-color var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}

.recherche-categorie:hover .recherche-categorie__carte {
	border-color: var(--couleur-or-bord);
	color: var(--couleur-texte);
}

.recherche-categorie__icone {
	width: 30px;
	height: 30px;
}

.recherche-categorie__libelle {
	font-size: var(--taille-m);
	font-weight: var(--graisse-semi);
}

.recherche-categorie__nombre {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-xs);
}

/* Coche (rond vide, puis disque or coché) en haut à droite de la carte. */
.recherche-categorie__coche {
	position: absolute;
	top: var(--espace-2);
	right: var(--espace-2);
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--couleur-bordure-forte);
	border-radius: 50%;
	color: transparent;
}

.recherche-categorie__coche .icone {
	width: 12px;
	height: 12px;
}

.recherche-categorie__saisie:checked + .recherche-categorie__carte {
	border-color: var(--couleur-or);
	background: var(--couleur-or-fond);
	color: var(--couleur-or-clair);
}

.recherche-categorie__saisie:checked + .recherche-categorie__carte .recherche-categorie__coche {
	border-color: var(--couleur-or);
	background: var(--couleur-or);
	color: var(--couleur-sur-or);
}

.recherche-categorie__saisie:focus-visible + .recherche-categorie__carte {
	outline: var(--focus-contour);
	outline-offset: var(--focus-decalage);
}

@media (max-width: 719px) {
	/* Petit écran : cartes en ligne défilante (pas de débordement de page). */
	.recherche-categories__liste {
		display: flex;
		overflow-x: auto;
		margin-inline: calc(-1 * var(--espace-5));
		padding: 2px var(--espace-5);
		scrollbar-width: none;
	}

	.recherche-categories__liste::-webkit-scrollbar {
		display: none;
	}

	.recherche-categorie {
		flex: 0 0 104px;
	}
}

/* Titres de bloc : petites capitales grises (« VÉHICULE » de l'app). */
.recherche-bloc__titre,
.recherche-plage__titre {
	padding: 0;
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-forte);
	letter-spacing: var(--interlettrage-capitales);
	text-transform: uppercase;
}

.recherche-plage__titre {
	margin-bottom: var(--espace-2);
	color: var(--couleur-texte);
	font-size: var(--taille-m);
	font-weight: var(--graisse-moyenne);
	letter-spacing: normal;
	text-transform: none;
}

.recherche-grille {
	display: grid;
	gap: var(--espace-5);
}

@media (min-width: 720px) {
	.recherche-grille {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: var(--espace-5) var(--espace-6);
		align-items: start;
	}
}

/* Recherche libre. */
.recherche-texte {
	position: relative;
	display: flex;
	align-items: center;
}

.recherche-texte__icone {
	position: absolute;
	left: var(--espace-4);
	color: var(--couleur-texte-secondaire);
	pointer-events: none;
}

.recherche-texte__saisie {
	width: 100%;
	min-height: 56px;
	padding: 0 var(--espace-4) 0 calc(var(--espace-4) + 1.25em + var(--espace-3));
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-size: var(--taille-l);
}

.recherche-texte__saisie::placeholder {
	color: var(--couleur-texte-secondaire);
}

.recherche-texte__saisie:focus,
.recherche-texte__saisie:focus-visible {
	outline: none;
	border-color: var(--couleur-or);
	box-shadow: 0 0 0 3px var(--couleur-or-fond);
}

/* Profils correspondant à la recherche libre. */
.recherche-profils__titre {
	margin-bottom: var(--espace-2);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-forte);
	letter-spacing: var(--interlettrage-capitales);
	text-transform: uppercase;
}

.recherche-profils__liste {
	display: grid;
	gap: var(--espace-2);
}

.recherche-profil {
	display: flex;
	align-items: center;
	gap: var(--espace-3);
	padding: var(--espace-3);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface-2);
	transition: border-color var(--duree-rapide) var(--courbe);
}

.recherche-profil:hover {
	border-color: var(--couleur-or-bord);
}

.recherche-profil .avatar {
	width: 44px;
	height: 44px;
}

.recherche-profil__texte {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-width: 0;
}

.recherche-profil__nom {
	display: flex;
	align-items: center;
	gap: var(--espace-2);
	font-weight: var(--graisse-semi);
}

.recherche-profil__ville {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
}

.recherche-profil > .icone {
	color: var(--couleur-texte-secondaire);
}

/* Plages min / max (prix, année, kilométrage). */
.recherche-plage,
.recherche-pilules {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

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

/* Libellés « Prix minimum (€) »… : lus, non affichés (la légende suffit). */
.recherche-plage__champs .champ__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

/*
 * Curseur double du prix (recherche/curseur-prix.js). Le conteneur a une
 * marge d'une demi-poignée de chaque côté : sa largeur est exactement la
 * course du centre des poignées. --curseur-debut / --curseur-fin : positions
 * (nombres de 0 à 1) posées par le JS.
 */
.recherche-prix__curseur {
	--curseur-debut: 0;
	--curseur-fin: 1;
	position: relative;
	height: 32px;
	margin: var(--espace-1) 11px 0;
}

.recherche-prix__piste,
.recherche-prix__remplissage {
	position: absolute;
	top: 50%;
	height: 4px;
	border-radius: var(--rayon-pilule);
	translate: 0 -50%;
}

.recherche-prix__piste {
	left: -11px;
	right: -11px;
	background: var(--couleur-bordure-forte);
}

.recherche-prix__remplissage {
	left: calc(var(--curseur-debut) * 100%);
	right: calc((1 - var(--curseur-fin)) * 100%);
	background: var(--couleur-or);
}

/* Poignées de 22 px : la course de leur centre = largeur du conteneur. */
.recherche-prix__poignee {
	position: absolute;
	top: 0;
	left: -11px;
	width: calc(100% + 22px);
	height: 100%;
	margin: 0;
	background: none;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: none;
}

.recherche-prix__poignee--devant {
	z-index: 1;
}

.recherche-prix__poignee:focus {
	outline: none;
}

.recherche-prix__poignee::-webkit-slider-runnable-track {
	height: 100%;
	background: none;
}

.recherche-prix__poignee::-moz-range-track {
	background: none;
}

.recherche-prix__poignee::-webkit-slider-thumb {
	width: 22px;
	height: 22px;
	margin-top: 5px;
	border: 3px solid var(--couleur-noir);
	border-radius: 50%;
	background: var(--couleur-or-clair);
	box-shadow: 0 0 0 1px var(--couleur-or);
	cursor: grab;
	-webkit-appearance: none;
	appearance: none;
	pointer-events: auto;
}

.recherche-prix__poignee::-moz-range-thumb {
	width: 16px;
	height: 16px;
	border: 3px solid var(--couleur-noir);
	border-radius: 50%;
	background: var(--couleur-or-clair);
	box-shadow: 0 0 0 1px var(--couleur-or);
	cursor: grab;
	pointer-events: auto;
}

.recherche-prix__poignee:focus-visible::-webkit-slider-thumb {
	box-shadow: 0 0 0 1px var(--couleur-or), 0 0 0 5px var(--couleur-or-halo);
}

.recherche-prix__poignee:focus-visible::-moz-range-thumb {
	box-shadow: 0 0 0 1px var(--couleur-or), 0 0 0 5px var(--couleur-or-halo);
}

.recherche-prix__bornes {
	display: flex;
	justify-content: space-between;
	margin-bottom: var(--espace-3);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-xs);
}

/* Choix multiples en pilules à cocher (énergie, boîte, type de moto…) :
 * case carrée dans la pilule, comme les cases de l'esquisse. Aucune case
 * cochée = indifférent. */
.recherche-bloc > .recherche-pilules + .recherche-pilules {
	padding-top: var(--espace-5);
	border-top: 1px solid var(--couleur-bordure);
}

.recherche-pilules__liste {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-2);
}

/* Dans la grille des critères d'une catégorie, une liste de choix occupe la ligne. */
.recherche-grille > .recherche-pilules {
	grid-column: 1 / -1;
}

.recherche-pilule {
	position: relative;
	cursor: pointer;
}

.recherche-pilule__saisie {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.recherche-pilule__libelle {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
	min-height: 40px;
	padding: var(--espace-2) var(--espace-4) var(--espace-2) var(--espace-3);
	border: 1px solid var(--couleur-bordure-forte);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-m);
	font-weight: var(--graisse-moyenne);
	transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}

/* Case carrée : vide, puis or avec la coche du sprite. */
.recherche-pilule__case {
	display: grid;
	flex: 0 0 auto;
	place-items: center;
	width: 18px;
	height: 18px;
	border: 1.5px solid var(--couleur-bordure-forte);
	border-radius: 5px;
	background: var(--couleur-surface);
	color: transparent;
	transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}

.recherche-pilule__case .icone {
	width: 12px;
	height: 12px;
}

.recherche-pilule:hover .recherche-pilule__libelle {
	border-color: var(--couleur-or-bord);
	color: var(--couleur-texte);
}

.recherche-pilule__saisie:checked + .recherche-pilule__libelle {
	border-color: var(--couleur-or);
	background: var(--couleur-or-fond);
	color: var(--couleur-texte);
	font-weight: var(--graisse-semi);
}

.recherche-pilule__saisie:checked + .recherche-pilule__libelle .recherche-pilule__case {
	border-color: var(--couleur-or);
	background: var(--couleur-or);
	color: var(--couleur-sur-or);
}

.recherche-pilule__saisie:focus-visible + .recherche-pilule__libelle {
	outline: var(--focus-contour);
	outline-offset: var(--focus-decalage);
}

/* Interrupteur « Garantie » (case à cocher role="switch"). */
.recherche-interrupteur {
	position: relative;
	align-self: end;
}

.recherche-interrupteur__saisie {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
}

.recherche-interrupteur__libelle {
	display: flex;
	align-items: center;
	gap: var(--espace-3);
	min-height: 50px;
	cursor: pointer;
}

.recherche-interrupteur__libelle strong {
	display: block;
	font-weight: var(--graisse-moyenne);
}

.recherche-interrupteur__aide {
	display: block;
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
}

.recherche-interrupteur__piste {
	position: relative;
	flex: 0 0 auto;
	width: 48px;
	height: 28px;
	border: 1px solid var(--couleur-bordure-forte);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-surface-3);
	transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe);
}

.recherche-interrupteur__piste::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: var(--couleur-texte-secondaire);
	transition: transform var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe);
}

.recherche-interrupteur__saisie:checked + .recherche-interrupteur__libelle .recherche-interrupteur__piste {
	border-color: var(--couleur-or);
	background: var(--couleur-or);
}

.recherche-interrupteur__saisie:checked + .recherche-interrupteur__libelle .recherche-interrupteur__piste::after {
	background: var(--couleur-noir);
	transform: translateX(20px);
}

.recherche-interrupteur__saisie:focus-visible + .recherche-interrupteur__libelle .recherche-interrupteur__piste {
	outline: var(--focus-contour);
	outline-offset: var(--focus-decalage);
}

/* Pastilles de couleur (choix multiple, nuancier) sous les autres options. */
.recherche-pilules--nuancier {
	padding-top: var(--espace-5);
	border-top: 1px solid var(--couleur-bordure);
}

.recherche-pilules--nuancier .recherche-pilules__liste {
	gap: var(--espace-3) var(--espace-2);
}

.recherche-couleur {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-1);
	width: 64px;
	cursor: pointer;
}

.recherche-couleur__saisie {
	position: absolute;
	inset: 0;
	opacity: 0;
	cursor: pointer;
}

.recherche-couleur__pastille {
	width: 34px;
	height: 34px;
	border: 1px solid var(--couleur-bordure-forte);
	border-radius: 50%;
	/* Teinte inconnue (couleur ajoutée dans l'administration) : motif neutre. */
	background: repeating-linear-gradient(45deg, var(--couleur-surface-3) 0 4px, var(--couleur-bordure-forte) 4px 8px);
	box-shadow: 0 0 0 3px var(--couleur-surface);
	transition: box-shadow var(--duree-rapide) var(--courbe);
}

.recherche-couleur__nom {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-xs);
	text-align: center;
}

.recherche-couleur:hover .recherche-couleur__pastille {
	box-shadow: 0 0 0 3px var(--couleur-surface), 0 0 0 4px var(--couleur-or-bord);
}

.recherche-couleur__saisie:checked ~ .recherche-couleur__pastille {
	box-shadow: 0 0 0 3px var(--couleur-surface), 0 0 0 5px var(--couleur-or);
}

.recherche-couleur__saisie:checked ~ .recherche-couleur__nom {
	color: var(--couleur-or-clair);
	font-weight: var(--graisse-semi);
}

.recherche-couleur__saisie:focus-visible ~ .recherche-couleur__pastille {
	outline: var(--focus-contour);
	outline-offset: 6px;
}

/* « Ma position » (esquisse : « Autour de moi » + rayon) : commune avec
 * autocomplétion ou position du navigateur, puis rayon et tri. */
.recherche-position {
	display: flex;
	flex-direction: column;
	gap: var(--espace-3);
}

.recherche-position__lieu {
	display: flex;
	align-items: flex-start;
	gap: var(--espace-2);
}

.recherche-position__lieu > .selecteur,
.recherche-position__lieu > .champ {
	flex: 1;
	min-width: 0;
}

/* Libellé « Ville ou code postal » : lu, non affiché (légende + exemple suffisent). */
.recherche-position__lieu .champ__label {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.recherche-position__moi {
	flex: 0 0 auto;
	min-height: 50px;
}

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

.recherche-position__statut {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
}

.recherche-position__statut:empty {
	display: none;
}

.recherche-position__statut.est-erreur {
	color: var(--couleur-erreur);
}

@media (max-width: 479px) {
	.recherche-position__lieu {
		flex-wrap: wrap;
	}

	.recherche-position__moi {
		width: 100%;
	}
}

/* Barre « Rechercher » + compteur, fixée en bas (au-dessus des onglets mobiles). */
.recherche-barre {
	position: sticky;
	bottom: 0;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-3) var(--espace-4);
	margin-inline: calc(-1 * var(--espace-2));
	padding: var(--espace-3) var(--espace-2) var(--espace-4);
	background: linear-gradient(180deg, transparent, var(--couleur-noir) 30%);
}

@media (max-width: 899px) {
	.recherche-barre {
		bottom: calc(var(--hauteur-onglets) + env(safe-area-inset-bottom, 0px));
		/* Sur mobile, le compteur passe au-dessus du bouton : le fondu se
		   limite à la marge haute pour que le texte reste sur fond noir
		   (sinon il se superpose aux filtres qui défilent dessous). */
		background: linear-gradient(180deg, transparent, var(--couleur-noir) var(--espace-3));
	}
}

.recherche-barre__compteur {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-2);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-m);
	font-weight: var(--graisse-semi);
}

/* « Recherche en cours… » : petit indicateur rotatif (retour client 08/2026). */
.recherche-barre__compteur.est-en-cours::before {
	content: '';
	width: 14px;
	height: 14px;
	border: 2px solid var(--couleur-bordure-forte);
	border-top-color: var(--couleur-or);
	border-radius: 50%;
	animation: pepite-rotation 0.8s linear infinite;
}

.recherche-barre__bouton {
	min-width: 220px;
}

@media (max-width: 479px) {
	.recherche-barre__bouton {
		width: 100%;
	}
}

/*
 * Teintes des pastilles de couleur de carrosserie. Ce ne sont pas des
 * couleurs de la charte mais la représentation d'une DONNÉE (couleur du
 * véhicule, slug de GET /filtres) : mots-clés CSS nommés, faute de jetons
 * dédiés dans tokens.css (« Demandes au socle » du lot 1 : jetons
 * --teinte-vehicule-* ou teinte fournie par l'API).
 */
.recherche-couleur__pastille--blanc { background: white; }
.recherche-couleur__pastille--argent { background: silver; }
.recherche-couleur__pastille--gris { background: gray; }
.recherche-couleur__pastille--noir { background: black; }
.recherche-couleur__pastille--rouge { background: firebrick; }
.recherche-couleur__pastille--bordeaux { background: maroon; }
.recherche-couleur__pastille--orange { background: darkorange; }
.recherche-couleur__pastille--jaune { background: gold; }
.recherche-couleur__pastille--dore,
.recherche-couleur__pastille--or { background: goldenrod; }
.recherche-couleur__pastille--vert { background: forestgreen; }
.recherche-couleur__pastille--bleu { background: royalblue; }
.recherche-couleur__pastille--violet { background: purple; }
.recherche-couleur__pastille--rose { background: hotpink; }
.recherche-couleur__pastille--marron { background: saddlebrown; }
.recherche-couleur__pastille--beige { background: beige; }
.recherche-couleur__pastille--bronze { background: peru; }