/*
 * PolePosition — composants partagés.
 * Balisage produit à l'identique par inc/composants.php (PHP) et
 * assets/js/core/composants.js (JS). Uniquement des variables de tokens.css.
 *
 * Sommaire : boutons · formulaires (champ, case, bandeau, force du mot de
 * passe) · sélecteur avec recherche · carte annonce · grille · squelettes ·
 * états · pagination · toasts · modale · badges · badges des stores.
 */

/* =============================================================================
 * Boutons
 * .bouton + variante : --primaire (or) | --secondaire (surface) |
 * --contour (bord or) | --fantome (texte) | --danger ; tailles : --compact,
 * --bloc (pleine largeur) ; --icone (carré, icône seule + aria-label).
 * [aria-busy="true"] : indicateur de chargement, clics ignorés.
 * ========================================================================== */
.bouton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--espace-2);
	min-height: 48px;
	padding: var(--espace-3) var(--espace-5);
	border: 1px solid transparent;
	border-radius: var(--rayon-l);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-size: var(--taille-m);
	font-weight: var(--graisse-semi);
	line-height: 1.2;
	text-align: center;
	white-space: nowrap;
	transition: background var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe), transform var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe);
}

.bouton:active {
	transform: translateY(1px);
}

.bouton--primaire {
	background: var(--degrade-or);
	color: var(--couleur-sur-or);
}

.bouton--primaire:hover {
	box-shadow: var(--ombre-or);
}

.bouton--secondaire {
	border-color: var(--couleur-bordure);
	background: var(--couleur-surface-2);
}

.bouton--secondaire:hover {
	border-color: var(--couleur-bordure-forte);
	background: var(--couleur-surface-3);
}

.bouton--contour {
	border-color: var(--couleur-or-bord);
	background: transparent;
	color: var(--couleur-or-clair);
}

.bouton--contour:hover {
	border-color: var(--couleur-or);
	background: var(--couleur-or-fond);
}

.bouton--fantome {
	background: transparent;
	color: var(--couleur-texte-doux);
}

.bouton--fantome:hover {
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
}

.bouton--danger {
	border-color: var(--couleur-erreur-bord);
	background: var(--couleur-erreur-fond);
	color: var(--couleur-erreur);
}

.bouton--compact {
	min-height: 38px;
	padding: var(--espace-2) var(--espace-4);
	border-radius: var(--rayon-m);
	font-size: var(--taille-s);
}

.bouton--bloc {
	width: 100%;
}

.bouton--icone {
	width: 44px;
	min-height: 44px;
	padding: 0;
	border-radius: 50%;
}

.bouton[disabled],
.bouton[aria-disabled='true'] {
	opacity: 0.5;
	cursor: not-allowed;
	box-shadow: none;
}

/* Chargement : le libellé s'efface derrière un indicateur rotatif. */
.bouton[aria-busy='true'] {
	color: transparent !important;
	pointer-events: none;
}

.bouton[aria-busy='true']::after {
	content: '';
	position: absolute;
	inset: 0;
	margin: auto;
	width: 20px;
	height: 20px;
	border: 2.5px solid currentColor;
	border-color: var(--couleur-texte-doux) transparent var(--couleur-texte-doux) transparent;
	border-radius: 50%;
	animation: pepite-rotation 0.8s linear infinite;
}

.bouton--primaire[aria-busy='true']::after {
	border-color: var(--couleur-sur-or) transparent var(--couleur-sur-or) transparent;
}

@keyframes pepite-rotation {
	to {
		transform: rotate(360deg);
	}
}

/* =============================================================================
 * Formulaires
 * ========================================================================== */
.formulaire {
	display: flex;
	flex-direction: column;
	gap: var(--espace-4);
}

.champ {
	display: flex;
	flex-direction: column;
	gap: var(--espace-2);
}

.champ__label {
	font-size: var(--taille-m);
	font-weight: var(--graisse-moyenne);
}

.champ__requis {
	color: var(--couleur-or);
}

.champ__controle {
	position: relative;
}

.champ__saisie {
	width: 100%;
	min-height: 50px;
	padding: var(--espace-3) var(--espace-4);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-size: var(--taille-base); /* ≥ 16 px : pas de zoom auto sur iOS */
	transition: border-color var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe);
}

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

.champ__saisie:hover {
	border-color: var(--couleur-bordure-forte);
}

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

.champ__saisie[aria-invalid='true'] {
	border-color: var(--couleur-erreur);
}

textarea.champ__saisie {
	min-height: 120px;
	resize: vertical;
	line-height: var(--interligne);
}

select.champ__saisie {
	appearance: none;
	padding-right: var(--espace-10);
	background-image: linear-gradient(45deg, transparent 50%, var(--couleur-texte-secondaire) 50%), linear-gradient(135deg, var(--couleur-texte-secondaire) 50%, transparent 50%);
	background-position: calc(100% - 22px) 50%, calc(100% - 16px) 50%;
	background-size: 6px 6px, 6px 6px;
	background-repeat: no-repeat;
}

/* Mot de passe : bouton afficher / masquer dans le champ. */
.champ--password .champ__saisie {
	padding-right: 52px;
}

.champ__bascule {
	position: absolute;
	top: 50%;
	right: 6px;
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border: 0;
	border-radius: var(--rayon-m);
	background: none;
	color: var(--couleur-texte-secondaire);
	transform: translateY(-50%);
}

.champ__bascule:hover {
	color: var(--couleur-texte);
}

.champ__bascule .icone--plein,
.champ__bascule[aria-pressed='true'] .icone--vide {
	display: none;
}

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

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

.champ__erreur {
	color: var(--couleur-erreur);
	font-size: var(--taille-s);
}

/* Case à cocher. */
.case {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: var(--espace-1) var(--espace-3);
}

.case__saisie {
	width: 20px;
	height: 20px;
	margin: 2px 0 0;
	accent-color: var(--couleur-or);
	cursor: pointer;
}

.case__libelle {
	color: var(--couleur-texte-doux);
	font-size: var(--taille-m);
	cursor: pointer;
}

.case .champ__erreur {
	grid-column: 2;
}

/* Choix exclusif en pilules (ex. Particulier / Professionnel). */
.pilules {
	display: grid;
	grid-auto-columns: 1fr;
	grid-auto-flow: column;
	gap: var(--espace-3);
	margin: 0;
	padding: 0;
	border: 0;
}

.pilules legend {
	margin-bottom: var(--espace-2);
	padding: 0;
	font-size: var(--taille-m);
	font-weight: var(--graisse-moyenne);
}

.pilule {
	position: relative;
}

.pilule input {
	position: absolute;
	opacity: 0;
	inset: 0;
	cursor: pointer;
}

.pilule span {
	display: block;
	padding: var(--espace-3);
	border: 1px solid var(--couleur-bordure-forte);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface-2);
	font-weight: var(--graisse-semi);
	text-align: center;
	transition: background var(--duree-rapide) var(--courbe), color var(--duree-rapide) var(--courbe);
}

.pilule input:checked + span {
	border-color: var(--couleur-or);
	background: var(--couleur-or);
	color: var(--couleur-sur-or);
}

.pilule input:focus-visible + span {
	outline: var(--focus-contour);
	outline-offset: var(--focus-decalage);
}

/* Bandeaux de message (erreur générale, information, succès). */
.bandeau {
	display: flex;
	align-items: flex-start;
	gap: var(--espace-3);
	padding: var(--espace-3) var(--espace-4);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-m);
	background: var(--couleur-surface-2);
	font-size: var(--taille-m);
}

.bandeau .icone {
	margin-top: 1px;
}

.bandeau--erreur {
	border-color: var(--couleur-erreur-bord);
	background: var(--couleur-erreur-fond);
	color: var(--couleur-erreur);
}

.bandeau--info {
	border-color: var(--couleur-or-bord);
	background: var(--couleur-or-fond);
	color: var(--couleur-or-clair);
}

.bandeau--succes {
	border-color: var(--couleur-succes-bord);
	background: var(--couleur-succes-fond);
	color: var(--couleur-succes);
}

/* Indicateur de force du mot de passe (faible / moyen / fort). */
.force-mdp {
	display: grid;
	grid-template-columns: repeat(3, 1fr) auto;
	align-items: center;
	gap: var(--espace-2);
}

.force-mdp__segment {
	height: 5px;
	border-radius: var(--rayon-pilule);
	background: var(--couleur-bordure-forte);
}

.force-mdp__libelle {
	min-width: 48px;
	font-size: var(--taille-s);
	font-weight: var(--graisse-semi);
	text-align: right;
}

.force-mdp[data-force='faible'] .force-mdp__segment:nth-child(-n + 1),
.force-mdp[data-force='moyen'] .force-mdp__segment:nth-child(-n + 2),
.force-mdp[data-force='fort'] .force-mdp__segment {
	background: currentColor;
}

.force-mdp[data-force='faible'] {
	color: var(--couleur-erreur);
}

.force-mdp[data-force='moyen'] {
	color: var(--couleur-or-clair);
}

.force-mdp[data-force='fort'] {
	color: var(--couleur-succes);
}

/* =============================================================================
 * Sélecteur avec recherche (selecteur-recherche.js) — équivalent web de
 * app/lib/widgets/selecteur_recherche.dart.
 * ========================================================================== */
.selecteur {
	position: relative;
}

.selecteur__bouton {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-2);
	width: 100%;
	min-height: 50px;
	padding: var(--espace-3) var(--espace-4);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-size: var(--taille-base);
	text-align: left;
}

.selecteur__bouton:hover {
	border-color: var(--couleur-bordure-forte);
}

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

.selecteur__valeur--vide {
	color: var(--couleur-texte-secondaire);
}

.selecteur__panneau {
	position: absolute;
	top: calc(100% + var(--espace-1));
	left: 0;
	right: 0;
	z-index: var(--couche-menu);
	padding: var(--espace-2);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface);
	box-shadow: var(--ombre-flottante);
}

.selecteur__recherche {
	width: 100%;
	min-height: 42px;
	margin-bottom: var(--espace-2);
	padding: var(--espace-2) var(--espace-3);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-m);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	font-size: var(--taille-base);
}

.selecteur__recherche:focus {
	border-color: var(--couleur-or);
}

.selecteur__liste {
	max-height: 280px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.selecteur__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-2);
	padding: var(--espace-2) var(--espace-3);
	border-radius: var(--rayon-s);
	color: var(--couleur-texte-doux);
	cursor: pointer;
}

.selecteur__option[aria-selected='true'] {
	color: var(--couleur-or);
	font-weight: var(--graisse-semi);
}

.selecteur__option.est-active,
.selecteur__option:hover {
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
}

.selecteur__vide {
	padding: var(--espace-3);
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-m);
	text-align: center;
}

/* =============================================================================
 * Carte annonce (esquisse p. 2)
 * ========================================================================== */
.carte-annonce {
	position: relative;
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-l);
	background: var(--couleur-surface);
	transition: border-color var(--duree) var(--courbe), transform var(--duree) var(--courbe), box-shadow var(--duree) var(--courbe);
}

.carte-annonce:hover {
	border-color: var(--couleur-or-bord);
	transform: translateY(-2px);
	box-shadow: var(--ombre-carte);
}

.carte-annonce__lien {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.carte-annonce__lien:focus-visible {
	outline-offset: -2px;
	border-radius: var(--rayon-l);
}

.carte-annonce__media {
	position: relative;
	aspect-ratio: var(--carte-ratio);
	overflow: hidden;
	background: var(--couleur-surface-2);
}

.carte-annonce__image {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s var(--courbe);
}

.carte-annonce:hover .carte-annonce__image {
	transform: scale(1.03);
}

.carte-annonce__sans-photo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--espace-2);
	height: 100%;
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-s);
}

.carte-annonce__sans-photo .icone {
	width: 32px;
	height: 32px;
}

/* Pastille prix : en bas à gauche, sur la photo. */
.carte-annonce__prix {
	position: absolute;
	left: var(--espace-3);
	bottom: var(--espace-3);
	padding: 5px var(--espace-3);
	border: 1px solid var(--couleur-or-bord);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-voile);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	color: var(--couleur-or-clair);
	font-size: var(--taille-s);
	font-weight: var(--graisse-forte);
	white-space: nowrap;
}

/* Badge de statut : en haut à gauche (Brouillon, En attente…). */
.carte-annonce__badge {
	position: absolute;
	top: var(--espace-3);
	left: var(--espace-3);
	padding: 4px var(--espace-2);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-voile);
	color: var(--couleur-texte);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-semi);
}

.carte-annonce__corps {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: var(--espace-3) var(--espace-4) var(--espace-4);
}

.carte-annonce__marque {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-semi);
	letter-spacing: var(--interlettrage-capitales);
	text-transform: uppercase;
}

.carte-annonce__modele {
	overflow: hidden;
	color: var(--couleur-texte);
	font-size: var(--taille-base);
	font-weight: var(--graisse-forte);
	line-height: 1.3;
	text-overflow: ellipsis;
	white-space: nowrap;
}

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

/* Distance au point de recherche (lot 5) : discrète, l'icône la distingue du kilométrage. */
.carte-annonce__distance {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	white-space: nowrap;
}

.carte-annonce__distance .icone {
	width: 14px;
	height: 14px;
	color: var(--couleur-or-clair);
}

/* Cœur favori : bouton distinct du lien, en haut à droite. */
.carte-annonce__favori {
	position: absolute;
	top: var(--espace-3);
	right: var(--espace-3);
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	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), color var(--duree-rapide) var(--courbe);
}

.carte-annonce__favori:hover {
	transform: scale(1.08);
}

.carte-annonce__favori .icone {
	width: 20px;
	height: 20px;
}

.carte-annonce__favori .icone--plein,
.carte-annonce__favori[aria-pressed='true'] .icone--vide {
	display: none;
}

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

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

/* =============================================================================
 * Grille d'annonces : 3 colonnes (≥ 1100 px), 2 (≥ 640 px), 1.
 * ========================================================================== */
.grille-annonces {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--grille-espace);
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.grille-annonces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1100px) {
	.grille-annonces {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.grille-annonces__element {
	min-width: 0;
}

/* =============================================================================
 * Squelettes de chargement
 * ========================================================================== */
.squelette,
.carte-annonce--squelette .carte-annonce__media {
	background: linear-gradient(90deg, var(--couleur-surface-2) 0%, var(--couleur-surface-3) 50%, var(--couleur-surface-2) 100%);
	background-size: 200% 100%;
	animation: pepite-reflet 1.4s ease-in-out infinite;
}

.squelette {
	display: block;
	height: 14px;
	border-radius: var(--rayon-s);
}

.squelette--court {
	width: 30%;
	height: 10px;
}

.squelette--moyen {
	width: 65%;
}

.carte-annonce--squelette {
	pointer-events: none;
}

.carte-annonce--squelette .carte-annonce__corps {
	gap: var(--espace-2);
}

@keyframes pepite-reflet {
	from {
		background-position: 100% 0;
	}
	to {
		background-position: -100% 0;
	}
}

/* =============================================================================
 * États : chargement · vide · erreur
 * ========================================================================== */
.etat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-3);
	padding: var(--espace-12) var(--espace-6);
	border: 1px dashed var(--couleur-bordure);
	border-radius: var(--rayon-l);
	text-align: center;
}

.etat__icone {
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--couleur-surface-2);
	color: var(--couleur-or);
}

.etat--erreur .etat__icone {
	color: var(--couleur-erreur);
}

.etat__icone .icone {
	width: 26px;
	height: 26px;
}

.etat__indicateur {
	width: 32px;
	height: 32px;
	border: 3px solid var(--couleur-bordure-forte);
	border-top-color: var(--couleur-or);
	border-radius: 50%;
	animation: pepite-rotation 0.9s linear infinite;
}

.etat__titre {
	font-size: var(--taille-l);
	font-weight: var(--graisse-semi);
}

.etat__message {
	max-width: 46ch;
	color: var(--couleur-texte-secondaire);
}

.etat--chargement {
	border-style: none;
}

.etat--chargement .etat__titre {
	color: var(--couleur-texte-secondaire);
	font-size: var(--taille-m);
	font-weight: var(--graisse-normale);
}

/* =============================================================================
 * Pagination (esquisse p. 4)
 * ========================================================================== */
.pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-2);
	margin-top: var(--espace-8);
}

.pagination__pages {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var(--espace-2);
}

.pagination__lien {
	display: inline-grid;
	place-items: center;
	min-width: 38px;
	height: 38px;
	padding-inline: var(--espace-2);
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-pilule);
	background: var(--couleur-surface);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-m);
	font-weight: var(--graisse-semi);
}

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

.pagination__lien[aria-current='page'] {
	border-color: var(--couleur-or);
	background: var(--couleur-or);
	color: var(--couleur-sur-or);
}

.pagination__lien[aria-disabled='true'] {
	opacity: 0.4;
}

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

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

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

/* =============================================================================
 * Toasts (ui.js — toast())
 * ========================================================================== */
.toasts {
	position: fixed;
	left: 50%;
	bottom: var(--espace-6);
	z-index: var(--couche-toasts);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--espace-2);
	width: min(92vw, 420px);
	transform: translateX(-50%);
	pointer-events: none;
}

@media (max-width: 899px) {
	.toasts {
		bottom: calc(var(--hauteur-onglets) + env(safe-area-inset-bottom, 0px) + var(--espace-3));
	}
}

.toast {
	display: flex;
	align-items: center;
	gap: var(--espace-3);
	width: 100%;
	padding: var(--espace-3) var(--espace-4);
	border: 1px solid var(--couleur-bordure-forte);
	border-radius: var(--rayon-m);
	background: var(--couleur-surface-2);
	box-shadow: var(--ombre-flottante);
	font-size: var(--taille-m);
	pointer-events: auto;
	animation: pepite-toast-entree var(--duree) var(--courbe);
}

.toast .icone {
	color: var(--couleur-or);
}

.toast--erreur {
	border-color: var(--couleur-erreur-bord);
}

.toast--erreur .icone {
	color: var(--couleur-erreur);
}

.toast--succes .icone {
	color: var(--couleur-succes);
}

.toast__texte {
	flex: 1;
}

.toast__fermer {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--couleur-texte-secondaire);
}

.toast__fermer:hover {
	color: var(--couleur-texte);
}

.toast.est-sortant {
	opacity: 0;
	transform: translateY(8px);
	transition: opacity var(--duree) var(--courbe), transform var(--duree) var(--courbe);
}

@keyframes pepite-toast-entree {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* =============================================================================
 * Modale (<dialog>, ui.js — modale() / confirmer())
 * ========================================================================== */
.modale {
	width: min(92vw, 480px);
	max-height: min(88vh, 720px);
	padding: 0;
	border: 1px solid var(--couleur-bordure);
	border-radius: var(--rayon-xl);
	background: var(--couleur-surface);
	color: var(--couleur-texte);
	box-shadow: var(--ombre-flottante);
}

.modale::backdrop {
	background: var(--couleur-voile);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}

.modale[open] {
	animation: pepite-modale-entree var(--duree) var(--courbe);
}

@keyframes pepite-modale-entree {
	from {
		opacity: 0;
		transform: translateY(12px) scale(0.98);
	}
}

.modale__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--espace-3);
	padding: var(--espace-5) var(--espace-5) 0;
}

.modale__titre {
	font-size: var(--taille-l);
	font-weight: var(--graisse-forte);
}

.modale__fermer {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--couleur-texte-secondaire);
}

.modale__fermer:hover {
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
}

.modale__corps {
	padding: var(--espace-4) var(--espace-5);
	color: var(--couleur-texte-doux);
}

.modale__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: var(--espace-3);
	padding: 0 var(--espace-5) var(--espace-5);
}

@media (max-width: 479px) {
	.modale__actions .bouton {
		flex: 1;
	}
}

/* Numéro de téléphone affiché dans la modale « Appeler ». */
.modale__telephone {
	text-align: center;
}

/* =============================================================================
 * Badges
 * ========================================================================== */
.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--espace-1);
	padding: 4px 10px;
	border: 1px solid var(--couleur-bordure-forte);
	border-radius: var(--rayon-pilule);
	color: var(--couleur-texte-doux);
	font-size: var(--taille-xs);
	font-weight: var(--graisse-semi);
	white-space: nowrap;
}

.badge--or {
	border-color: var(--couleur-or-bord);
	color: var(--couleur-or);
}

/* =============================================================================
 * Badges des stores (template-parts/stores.php)
 * ========================================================================== */
.stores {
	display: flex;
	flex-wrap: wrap;
	gap: var(--espace-3);
	justify-content: center;
}

.stores--gauche {
	justify-content: flex-start;
}

.store {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 52px;
	padding: var(--espace-2) 18px var(--espace-2) 14px;
	border: 1px solid var(--couleur-or-bord);
	border-radius: var(--rayon-m);
	background: var(--couleur-surface-2);
	color: var(--couleur-texte);
	line-height: 1.1;
	white-space: nowrap;
	transition: transform var(--duree-rapide) var(--courbe), border-color var(--duree-rapide) var(--courbe), box-shadow var(--duree-rapide) var(--courbe), background var(--duree-rapide) var(--courbe);
}

.store:hover {
	transform: translateY(-2px);
	border-color: var(--couleur-or);
	background: var(--couleur-surface-3);
	box-shadow: var(--ombre-or);
}

.store__logo {
	width: 26px;
	height: 26px;
	flex: 0 0 auto;
}

.store__texte {
	display: flex;
	flex-direction: column;
	gap: 2px;
	text-align: left;
}

.store__texte small {
	color: var(--couleur-texte-secondaire);
	font-size: 10px;
	font-weight: var(--graisse-semi);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.store__texte strong {
	font-size: var(--taille-base);
	font-weight: var(--graisse-forte);
	letter-spacing: -0.01em;
}

.stores--grand .store {
	min-height: 60px;
	padding: 10px 22px 10px var(--espace-4);
	border-radius: var(--rayon-l);
}

.stores--grand .store__logo {
	width: 30px;
	height: 30px;
}

.stores--grand .store__texte strong {
	font-size: var(--taille-l);
}

/* =============================================================================
 * Bouton « Appeler le vendeur » (core/appel-vendeur.js) — fiche annonce et
 * profil vendeur. Les tailles propres à chaque contexte restent dans
 * pages/annonce.css et pages/vendeur.css.
 * ========================================================================== */
.appel-vendeur__numero {
	display: flex;
	gap: var(--espace-2);
}

.appel-vendeur__lien {
	flex: 1;
	font-variant-numeric: tabular-nums;
	letter-spacing: 0.02em;
}

.appel-vendeur__copier {
	flex: 0 0 auto;
}