/* ============================================================================
   prestation.css - Page publique d'une prestation (prestation.php)
   ============================================================================
   Creation : 30/09/2026. Charge par $donneesSupplementairesHeader, donc AVANT
   custom.css : a specificite egale, custom.css gagne. Toutes les regles sont
   prefixees par .main pour passer devant .main ul, .main ol, .main a, .main h1
   (0,1,1) sans !important.
   Mobile-first, un seul point de bascule : 577 px.
   Jetons de vm-tokens.css uniquement : aucune couleur en dur, aucun repli
   dans un var().
   ============================================================================ */

/* ── Fil d'Ariane ─────────────────────────────────────────────────────────── */
.main .vm-presta-fil {
	margin-bottom: var(--vm-space-4);
	font-size: var(--vm-fs-xs);
	color: var(--vm-text-muted);
}

.main .vm-presta-fil ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-space-1);
	margin: 0;
	padding-left: 0;
	list-style: none;
	color: var(--vm-text-muted);
}

.main .vm-presta-fil li + li::before {
	content: "›";
	margin-right: var(--vm-space-1);
	color: var(--vm-text-muted);
}

.main .vm-presta-fil a {
	color: var(--vm-text-muted);
}

.main .vm-presta-fil [aria-current="page"] {
	color: var(--vm-text);
}

/* ── En-tete : image de thematique, titre, professionnel ─────────────────── */
.main .vm-presta-tete {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vm-space-3);
	text-align: center;
}

.main .vm-presta-tete__img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	flex: 0 0 auto;
}

.main .vm-presta-tete__theme {
	margin: 0 0 var(--vm-space-1);
	font-size: var(--vm-fs-sm);
	font-weight: var(--vm-fw-semi);
	color: var(--vm-bleu);
}

.main h1.vm-presta-tete__titre {
	margin: 0 0 var(--vm-space-2);
	color: var(--vm-bleu-fonce);
}

.main .vm-presta-tete__par {
	margin: 0;
	color: var(--vm-text);
}

/* ── Caracteristiques en pastilles ───────────────────────────────────────── */
.main .vm-presta-puces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--vm-space-2);
	margin: var(--vm-space-4) 0 0;
	padding-left: 0;
	list-style: none;
}

.main .vm-presta-puces li {
	padding: var(--vm-space-1) var(--vm-space-3);
	border-radius: var(--vm-radius-pill);
	background: var(--vm-bleu-pale);
	color: var(--vm-bleu-fonce);
	font-size: var(--vm-fs-sm);
}

.main .vm-presta-puces i {
	margin-right: var(--vm-space-1);
}

/* ── Prix et bouton de contact ───────────────────────────────────────────── */
.main .vm-presta-action {
	margin-top: var(--vm-space-5);
	text-align: center;
}

.main .vm-presta-prix {
	margin: 0 0 var(--vm-space-3);
	font-size: 1.5rem;
	font-weight: var(--vm-fw-bold);
	color: var(--vm-bleu);
}

.main .vm-presta-prix small {
	font-size: var(--vm-fs-xs);
	font-weight: var(--vm-fw-normal);
	color: var(--vm-text-muted);
}

.main .vm-presta-action__boutons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vm-space-3);
	margin: 0;
}

/* Libelle long a 360 px : le nowrap de .btn (Bootstrap) le ferait deborder. */
.main .vm-presta-action__boutons .btn {
	max-width: 100%;
	white-space: normal;
}

/* ── Descriptif ──────────────────────────────────────────────────────────── */
.main .vm-presta-descriptif {
	margin-bottom: var(--vm-space-6);
	overflow-wrap: anywhere;
}

/* ── Informations pratiques ──────────────────────────────────────────────── */
.main .vm-presta-pratique {
	display: grid;
	grid-template-columns: 1fr;
	margin: 0 0 var(--vm-space-5);
	padding: var(--vm-space-4);
	border: 1px solid var(--vm-border);
	border-radius: var(--vm-radius-md);
	background: var(--vm-blanc);
}

.main .vm-presta-pratique dt {
	margin-top: var(--vm-space-2);
	font-weight: var(--vm-fw-semi);
	color: var(--vm-bleu-fonce);
}

.main .vm-presta-pratique dt:first-child {
	margin-top: 0;
}

.main .vm-presta-pratique dd {
	margin: 0;
	color: var(--vm-text);
}

/* ── Carte du professionnel ──────────────────────────────────────────────── */
.main .vm-presta-pro {
	text-align: center;
}

.main .vm-presta-pro p {
	margin: 0 0 var(--vm-space-2);
}

.main .vm-presta-pro__nom {
	font-size: 1.25rem;
	font-weight: var(--vm-fw-bold);
	color: var(--vm-bleu-fonce);
}

.main .vm-presta-pro__metier {
	color: var(--vm-text);
}

.main .vm-presta-pro__badge {
	display: inline-block;
	padding: var(--vm-space-1) var(--vm-space-3);
	border-radius: var(--vm-radius-pill);
	background: var(--vm-turquoise-pale);
	color: var(--vm-bleu-fonce);
	font-size: var(--vm-fs-sm);
	font-weight: var(--vm-fw-semi);
}

.main .vm-presta-pro__lieu {
	color: var(--vm-text-muted);
}

.main .vm-presta-pro__liens {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--vm-space-3);
	margin-top: var(--vm-space-4);
}

/* ── Autres prestations du professionnel ─────────────────────────────────── */
.main .vm-presta-autres {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vm-space-3);
	margin: 0;
	padding-left: 0;
	list-style: none;
}

.main .vm-presta-autres li {
	display: flex;
}

.main .vm-presta-autre__link {
	display: flex;
	flex-direction: column;
	gap: var(--vm-space-1);
	width: 100%;
	text-align: left;
	color: var(--vm-text);
}

.main .vm-presta-autre__theme {
	font-size: var(--vm-fs-xs);
	font-weight: var(--vm-fw-semi);
	color: var(--vm-bleu);
}

.main .vm-presta-autre__title {
	font-weight: var(--vm-fw-semi);
	color: var(--vm-bleu-fonce);
}

.main .vm-presta-autre__infos {
	font-size: var(--vm-fs-sm);
	color: var(--vm-text-muted);
}

/* ── Liens de fin de page ────────────────────────────────────────────────── */
.main .vm-presta-liens {
	margin: 0 0 var(--vm-space-5);
	padding-left: 0;
	list-style: none;
}

.main .vm-presta-liens li + li {
	margin-top: var(--vm-space-2);
}

.main .vm-presta-liens i {
	margin-right: var(--vm-space-2);
	color: var(--vm-bleu);
}

/* ============================================================================
   Bureau (577 px et plus)
   ============================================================================ */
@media (min-width: 577px) {

	.main .vm-presta-tete {
		flex-direction: row;
		align-items: center;
		text-align: left;
		gap: var(--vm-space-5);
	}

	.main .vm-presta-tete__img {
		width: 120px;
		height: 120px;
	}

	.main .vm-presta-puces {
		justify-content: flex-start;
	}

	.main .vm-presta-action {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
		gap: var(--vm-space-4);
		text-align: left;
	}

	.main .vm-presta-prix {
		margin: 0;
	}

	.main .vm-presta-action__boutons {
		flex-direction: row;
		gap: var(--vm-space-4);
	}

	.main .vm-presta-pratique {
		grid-template-columns: max-content 1fr;
		column-gap: var(--vm-space-5);
		row-gap: var(--vm-space-2);
	}

	.main .vm-presta-pratique dt {
		margin-top: 0;
	}

	.main .vm-presta-pro__liens {
		flex-direction: row;
		justify-content: center;
		gap: var(--vm-space-5);
	}

	.main .vm-presta-autres {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	}
}