/* ============================================================================
   PRO-PRESTATION.CSS — Cartes de résultats du moteur de prestations
   ============================================================================
   Utilisé par : pro-prestation.php (fonction vm_carte_pro())

   Conventions respectées :
     - Mobile-first, breakpoint unique 576px (tout au-dessus = desktop)
     - Aucun hex en dur : uniquement des tokens de vm-tokens.css
     - Aucun style inline dans le PHP
     - Langage visuel aligné sur consulterSH.php (carte blanche,
       bordure turquoise, radius 15px)

   Chargement : après custom.css dans Header.php
   ============================================================================ */

/* ── Conteneur de la grille de cartes ─────────────────────────────────────── */
.vm-rcards {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--vm-space-4, 1.5rem);
	margin-top: var(--vm-space-4, 1.5rem);
}

/* ══ Section DÉPARTEMENT (repliable) ═══════════════════════════════════════ */
.vm-rdept {
	margin-top: var(--vm-space-5, 2rem);
	border: 1px solid var(--vm-turquoise);
	border-radius: 12px;
	overflow: hidden;
}

/* En-tête cliquable du département */
.vm-rdept__head {
	display: flex;
	align-items: center;
	gap: var(--vm-space-2, .5rem);
	padding: var(--vm-space-3, 1rem);
	background: var(--vm-bleu);
	color: var(--vm-blanc, #fff);
	cursor: pointer;
	list-style: none;          /* retire la puce native du <summary> */
	user-select: none;
}
/* Retire le triangle par défaut du <summary> (WebKit + Firefox) */
.vm-rdept__head::-webkit-details-marker { display: none; }
.vm-rdept__head::marker { content: ''; }

.vm-rdept__pin {
	font-size: 1.1rem;
	color: var(--vm-blanc, #fff);
}

.vm-rdept__nom {
	font-weight: 700;
	font-size: 1.15rem;
	flex: 1;
	min-width: 0;
}

.vm-rdept__count {
	font-size: .82rem;
	opacity: .9;
	white-space: nowrap;
}

/* Chevron : pivote quand la section est ouverte */
.vm-rdept__chevron {
	transition: transform .2s ease;
	font-size: .9rem;
}
.vm-rdept[open] > .vm-rdept__head .vm-rdept__chevron {
	transform: rotate(180deg);
}

.vm-rdept__body {
	padding: var(--vm-space-3, 1rem);
}

/* ══ Sous-section EXPERTS / AIDANTS (repliable) ════════════════════════════ */
.vm-rsection {
	margin-top: var(--vm-space-3, 1rem);
}
.vm-rsection:first-child {
	margin-top: 0;
}

/* En-tête de groupe = <summary> cliquable */
.vm-rgroupe {
	display: flex;
	align-items: center;
	gap: var(--vm-space-3, 1rem);
	padding: var(--vm-space-3, 1rem);
	border-radius: 10px;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.vm-rgroupe::-webkit-details-marker { display: none; }
.vm-rgroupe::marker { content: ''; }

.vm-rgroupe--expert {
	background: var(--vm-vert-clair, #e3f5f7);
	border-left: 5px solid var(--vm-turquoise);
}
.vm-rgroupe--aidant {
	background: var(--vm-bleu-pale, #e9f1f5);
	border-left: 5px solid var(--vm-bleu);
}

/* Pastille contenant le pin PNG (même repère visuel que la carte) */
.vm-rgroupe__ico {
	flex: 0 0 46px;
	width: 66px;
	height: 66px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vm-blanc, #fff);
}
.vm-rgroupe__ico img {
	width: 46px;
	height: 46px;
	object-fit: contain;
}

.vm-rgroupe__txt { min-width: 0; flex: 1; }

.vm-rgroupe__titre {
	display: block;
	font-size: 1.05rem !important;
	font-weight: 700;
	color: var(--vm-bleu);
	margin: 0;
	line-height: 1.25;
}
.vm-rgroupe__n {
	font-weight: 600;
	color: var(--vm-turquoise);
}

.vm-rgroupe__desc {
	display: block;
	font-size: .85rem;
	color: var(--vm-bleu);
	margin: 3px 0 0;
	line-height: 1.35;
}

.vm-rgroupe__chevron {
	transition: transform .2s ease;
	color: var(--vm-bleu);
	font-size: .9rem;
}
.vm-rsection[open] > .vm-rgroupe .vm-rgroupe__chevron {
	transform: rotate(180deg);
}

/* La grille de cartes suit directement le bandeau */
.vm-rsection > .vm-rcards {
	margin-top: var(--vm-space-3, 1rem);
}

/* ── La carte ─────────────────────────────────────────────────────────────── */
.vm-rcard {
	background: var(--vm-blanc, #fff);
	border: 1px solid var(--vm-turquoise);
	border-radius: 15px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* ── En-tête : le professionnel ───────────────────────────────────────────── */
.vm-rcard__pro {
	display: flex;
	align-items: center;
	gap: var(--vm-space-3, 1rem);
	padding: var(--vm-space-3, 1rem);
	border-bottom: 1px solid var(--vm-gris-clair, #e9ecef);
}

/* Conteneur relatif : permet de superposer le pin d'expertise */
.vm-rcard__photowrap {
	position: relative;
	flex: 0 0 64px;
	display: inline-block;
	line-height: 0;
}

/* Pin d'expertise (expert / aidant), superposé en bas de la photo,
   comme sur la carte interactive. */
.vm-rcard__pin {
	position: absolute;
	bottom: -6px;
	right: -4px;
	width: 26px !important;
	height: auto !important;
	z-index: 2;
	filter: drop-shadow(0 1px 2px rgba(0,0,0,.25));
}

.vm-rcard__photo {
	width: 64px;
	/* height + aspect-ratio en !important : le garde-fou mobile de custom.css
	   (.main img:not([class*="vm-img"]) { height:auto !important }) écrasait
	   la hauteur et déformait les photos portrait. On repasse devant. */
	height: 64px !important;
	aspect-ratio: 1 / 1;
	border-radius: 10%;
	object-fit: cover;
	flex: 0 0 64px;
}

/* Pas de photo : picto sur pastille, même gabarit pour éviter tout CLS */
.vm-rcard__photo--vide {
	border-radius: 10%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--vm-vert-clair, #e3f5f7);
	color: var(--vm-bleu);
	font-size: 1.75rem;
}

.vm-rcard__ident {
	min-width: 0;
	flex: 1;
}

/* La classe porte sa taille : passe devant .main h5 et les text-N du thème */
.vm-rcard__nom {
	font-size: 1.05rem !important;
	font-weight: 700;
	color: var(--vm-bleu);
	margin: 0;
	line-height: 1.2;
}

.vm-rcard__metier {
	font-size: .9rem;
	color: var(--vm-bleu);
	margin: 2px 0 0;
	line-height: 1.2;
}

.vm-rcard__lieu {
	font-size: .85rem;
	color: var(--vm-turquoise);
	margin: 2px 0 0;
	line-height: 1.2;
}

/* Langues parlées (sous le lieu) */
.vm-rcard__langues {
	font-size: .82rem;
	color: var(--vm-bleu);
	margin: 3px 0 0;
	line-height: 1.2;
}
.vm-rcard__langues i {
	color: var(--vm-turquoise);
	margin-right: 2px;
}

/* ── Pastilles (badges) ───────────────────────────────────────────────────── */
/* ATTENTION : ne pas renommer en .vm-chip — cette classe existe déjà dans
   custom.css avec `color: var(--vm-text-invert) !important` (texte blanc),
   qui rendait les pastilles illisibles malgré l'ordre de chargement. */
.vm-rchip {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: var(--vm-vert-clair, #e3f5f7);
	color: var(--vm-bleu);
	font-size: .78rem;
	font-weight: 600;
	line-height: 1.4;
	padding: 4px 10px;
	border-radius: 20px;
	white-space: nowrap;
	border: 1px solid var(--vm-turquoise);
}

.vm-rchip--type {
	background: var(--vm-bleu);
	color: var(--vm-blanc, #fff);
}

/* Individuel / Collectif (colonne `atelier`) */
.vm-rchip--collectif {
	background: var(--vm-rose, #ff0084);
	color: var(--vm-blanc, #fff);
	border-color: var(--vm-rose, #ff0084);
}

/* Chips Expert / Aidant à côté du nom du pro */
.vm-rchip--expert {
	background: var(--vm-turquoise);
	color: var(--vm-blanc, #fff);
	border-color: var(--vm-turquoise);
	font-weight: 600;
	vertical-align: middle;
}
.vm-rchip--aidant {
	background: var(--vm-bleu);
	color: var(--vm-blanc, #fff);
	border-color: var(--vm-bleu);
	font-weight: 600;
	vertical-align: middle;
}

/* ── Total de prestations en tête de résultats ────────────────────────────── */
.vm-rtotal {
	font-size: 1.05rem;
}
.vm-rtotal strong {
	color: var(--vm-turquoise);
	font-size: 1.25rem;
}

/* ── Toggle « N prestations » par pro ─────────────────────────────────────── */
.vm-rcard__toggle-prestas {
	width: 100%;
}
.vm-rcard__prestas-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--vm-space-2, .5rem) var(--vm-space-3, 1rem);
	background: var(--vm-vert-clair, #e3f5f7);
	color: var(--vm-bleu);
	font-weight: 600;
	font-size: .9rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.vm-rcard__prestas-head::-webkit-details-marker { display: none; }
.vm-rcard__prestas-head::marker { content: ''; }

.vm-rcard__prestas-chevron {
	transition: transform .2s ease;
	font-size: .85rem;
}
.vm-rcard__toggle-prestas[open] > .vm-rcard__prestas-head .vm-rcard__prestas-chevron {
	transform: rotate(180deg);
}

/* ── Barre de liens secondaires : Description + Partager ───────────────────── */
.vm-rcard__liens {
	display: flex;
	flex-wrap: wrap;
	gap: var(--vm-space-3, 1rem);
	margin: var(--vm-space-2, .5rem) 0 0;
}

/* Boutons à plat, sans fond, alignés sur le style « lien » du site */
.vm-rcard__lien {
	appearance: none;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font: inherit;
	font-size: .82rem;
	color: var(--vm-bleu);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	text-decoration: underline;
	transition: color .18s ease;
}
.vm-rcard__lien:hover {
	color: var(--vm-turquoise);
}
.vm-rcard__lien:focus-visible {
	outline: 2px solid var(--vm-rose, #ff0084);
	outline-offset: 2px;
	border-radius: 3px;
}

/* Chevron du toggle : pivote quand ouvert */
.vm-rcard__toggle i {
	transition: transform .2s ease;
}
.vm-rcard__toggle.is-open i {
	transform: rotate(90deg);
}

/* Confirmation « Lien copié » */
.vm-rcard__share.is-done {
	color: var(--vm-bleu);
	font-weight: 600;
}

/* ── Panneau de description (révélé par le toggle) ─────────────────────────── */
.vm-rcard__desc {
	margin: var(--vm-space-2, .5rem) 0 0;
	padding: var(--vm-space-3, 1rem);
	background: var(--vm-bleu-pale, #e9f1f5);
	border-radius: 8px;
	font-size: .9rem;
	line-height: 1.5;
	color: var(--vm-bleu);
}
.vm-rcard__desc[hidden] {
	display: none;
}

/* ── Liste des prestations ────────────────────────────────────────────────── */
/* Neutralise la règle globale .main ul (puces + padding) */
.vm-rcard__prestas {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.vm-rcard__presta {
	display: flex;
	flex-direction: column;
	gap: var(--vm-space-3, 1rem);
	padding: var(--vm-space-4, 1.5rem) var(--vm-space-3, 1rem);
}

/* Séparation franche entre prestations : sur mobile, une carte peut
   contenir 7 prestations empilées. Un pointillé fin ne suffit pas. */
.vm-rcard__presta + .vm-rcard__presta {
	border-top: 3px solid var(--vm-vert-clair, #e3f5f7);
}

.vm-rcard__presta-main {
	min-width: 0;
}

.vm-rcard__presta-titre {
	font-weight: 600;
	color: var(--vm-bleu);
	font-size: .98rem;
	margin: 0;
	line-height: 1.35;
}

.vm-rcard__presta-theme {
	font-style: italic;
	font-size: .8rem;
	color: var(--vm-turquoise);
	margin: 2px 0 0;
	line-height: 1.2;
}

/* Picto de thématique : accompagne le libellé, ne le remplace pas.
   Agrandi (1.35rem) pour donner un repère visuel fort à chaque prestation. */
.vm-rcard__presta-theme i {
	font-style: normal;
	font-size: 1.35rem;
	color: var(--vm-turquoise);
	width: 1.5rem;
	text-align: center;
	vertical-align: -3px;
}

.vm-rcard__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: var(--vm-space-2, .5rem) 0 0;
}

/* ── Sélecteur de format (prestations à variantes multiples) ──────────────── */
/* Boutons radio natifs habillés en pastilles : accessibles au clavier,
   fonctionnels sans JS (la 1re variante est cochée côté serveur). */
.vm-rcard__formats {
	border: 0;
	padding: 0;
	margin: var(--vm-space-2, .5rem) 0 0;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* Bootstrap 4 impose legend{display:block;width:100%;font-size:1.5rem} */
.vm-rcard__formats-legende {
	flex: 1 0 100%;
	width: auto;
	float: none;
	font-size: .72rem !important;
	color: var(--vm-turquoise);
	margin: 0 0 2px;
	padding: 0;
	line-height: 1.2;
}

.vm-rchip--choix {
	cursor: pointer;
	margin: 0;
	position: relative;
	transition: background .18s ease, color .18s ease, border-color .18s ease;
}

/* Radio masqué visuellement mais focusable (pas de display:none) */
.vm-rchip--choix input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}

.vm-rchip--choix:has(input:checked) {
	background: var(--vm-bleu);
	border-color: var(--vm-bleu);
	color: var(--vm-blanc, #fff);
}

.vm-rchip--choix:has(input:focus-visible) {
	outline: 2px solid var(--vm-rose);
	outline-offset: 2px;
}

/* Fallback : sans :has(), toutes les pastilles restent lisibles en neutre.
   Le sélecteur ne serait plus visuellement actif, mais le JS continue de
   mettre à jour prix et CTA. :has() est supporté depuis 2023 (cf. notes). */

/* ── Zone d'action : prix + CTA ───────────────────────────────────────────── */
/* Mobile : prix + CTA sur une ligne, « En savoir plus » sur la suivante.
   Sans le flex-basis:100%, les 3 éléments tiennent sur une seule ligne
   et le lien (white-space:nowrap) débordait à droite. */
.vm-rcard__presta-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--vm-space-2, .5rem) var(--vm-space-3, 1rem);
}

.vm-rcard__plus {
	flex: 1 0 100%;
	text-align: right;
}

.vm-rcard__prix {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--vm-bleu);
	margin: 0;
	white-space: nowrap;
	line-height: 1.1;
}

.vm-rcard__prix small {
	font-size: .6rem;
	font-weight: 400;
}

/* Fourchette tarifaire : n'apparaît QUE si les variantes ont des prix
   différents. Volontairement discrète — le gros prix reste exact. */
.vm-rcard__prix-note {
	font-size: .72rem;
	color: var(--vm-turquoise);
	margin: 2px 0 0;
	line-height: 1.2;
	white-space: nowrap;
}

/* Le CTA porte sa taille : les .btn-* du système sont en 1.25rem, trop
   imposant répété 5 fois dans une carte. */
.vm-rcard__cta {
	font-size: 1rem !important;
	padding: 8px 20px;
	margin: 0;
	white-space: nowrap;
}

.vm-rcard__plus {
	font-size: .82rem;
	color: var(--vm-turquoise);
	white-space: nowrap;
	text-decoration: underline;
}

/* ── Pied de carte : accès au profil ──────────────────────────────────────── */
.vm-rcard__foot {
	margin-top: auto;
	padding: var(--vm-space-2, .5rem) var(--vm-space-3, 1rem);
	background: var(--vm-creme, #fdf6ec);
	border-top: 1px solid var(--vm-gris-clair, #e9ecef);
}

.vm-rcard__foot a {
	font-size: .85rem;
	font-weight: 600;
	color: var(--vm-bleu);
}

.vm-rcard__foot i {
	transition: var(--vm-transition, transform .2s ease);
}

.vm-rcard__foot a:hover i {
	translate: 3px 0;
}

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

	.vm-rgroupe {
		padding: var(--vm-space-4, 1.5rem);
	}
	.vm-rgroupe__ico {
		flex-basis: 52px;
		width: 52px;
		height: 52px;
		font-size: 1.5rem;
	}
	.vm-rgroupe__titre { font-size: 1.2rem !important; }
	.vm-rgroupe__desc  { font-size: .9rem; }

	.vm-rcards {
		gap: var(--vm-space-5, 2rem);
	}

	.vm-rcard__pro {
		padding: var(--vm-space-4, 1.5rem);
	}

	.vm-rcard__photowrap {
		flex-basis: 72px;
	}
	.vm-rcard__photo,
	.vm-rcard__photo--vide {
		width: 72px;
		height: 72px !important;
		flex-basis: 72px;
	}
	.vm-rcard__pin {
		width: 30px !important;
	}

	.vm-rcard__nom {
		font-size: 1.2rem !important;
	}

	/* Les 4 pastilles (format, individuel/collectif, durée, public) tiennent
	   sur une seule ligne en desktop ; scroll horizontal si trop étroit. */
	.vm-rcard__chips {
		flex-wrap: nowrap;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.vm-rcard__chips::-webkit-scrollbar { display: none; }
	.vm-rcard__chips .vm-rchip { flex: 0 0 auto; }

	/* La ligne de prestation passe en 2 colonnes :
	   contenu à gauche, prix + CTA alignés à droite */
	.vm-rcard__presta {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: var(--vm-space-4, 1.5rem);
		padding: var(--vm-space-3, 1rem) var(--vm-space-4, 1.5rem);
	}

	.vm-rcard__presta-action {
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
		flex-wrap: nowrap;
		gap: 6px;
		flex: 0 0 auto;
	}

	.vm-rcard__plus {
		flex: 0 0 auto;
	}

	.vm-rcard__presta {
		gap: var(--vm-space-4, 1.5rem);
	}

	.vm-rcard__presta + .vm-rcard__presta {
		border-top-width: 1px;
	}

	.vm-rcard__foot {
		padding: var(--vm-space-2, .5rem) var(--vm-space-4, 1.5rem);
	}
}

/* ══ Filtres du formulaire : expertise, atelier, langues ═══════════════════ */
.vm-filtre-exp {
	display: block;
	margin-bottom: var(--vm-space-2, .5rem);
	cursor: pointer;
	font-weight: 400;
}

/* Explication sous chaque option d'expertise */
.vm-filtre-aide {
	display: block;
	font-size: .78rem;
	color: var(--vm-turquoise);
	line-height: 1.2;
	margin-left: 1rem;
}

/* Grille de langues : 2 colonnes mobile, s'étale en desktop */
.vm-filtre-langues {
	display: grid;
	grid-template-columns: 1fr 1fr;
    color: var(--vm-bleu);
}
.vm-filtre-langue {
	cursor: pointer;
	font-weight: 400;
	margin: 0;
}

.vm-titre-section {
	padding-top:  20px;	
	font-weight: 600;	
    font-size: 1rem;
}

@media (min-width: 577px) {
	.vm-filtre-langues {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ══ Filtre départements : pastilles + recherche live ═════════════════════ */
.vm-dept-search {
	margin-bottom: var(--vm-space-2, .5rem);
}
.vm-dept-search input {
	max-width: 360px;
	width: 100%;
}

.vm-dept-count {
	font-size: .85rem;
	font-weight: 600;
	color: var(--vm-bleu);
	margin-bottom: var(--vm-space-2, .5rem);
}
.vm-dept-count span {
	color: var(--vm-turquoise);
}

/* Grille de pastilles : scrollable si longue, pour ne pas noyer le formulaire */
.vm-dept-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 6px;
	align-content: start;
	max-height: 260px;
	overflow-y: auto;
	padding: var(--vm-space-2, .5rem);
	border: 1px solid var(--vm-turquoise);
	border-radius: 10px;
}

/* Une pastille = un label cliquable.
   line-height: 1.2 force un interligne serré : le thème applique un
   line-height élevé sur les <label> de formulaire, qui espaçait trop
   les pastilles dans la grille. */
.vm-dept-pill {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	margin: 0;
	padding: 4px 8px;
	border-radius: 8px;
	font-size: .85rem;
	font-weight: 400;
	line-height: 1.25;
	color: var(--vm-bleu);
	cursor: pointer;
	transition: background .15s ease;
}
.vm-dept-pill:hover {
	background: var(--vm-vert-clair, #e3f5f7);
}

/* Pastille cochée : fond turquoise, texte blanc */
.vm-dept-pill:has(.vm-dept-check:checked) {
	background: var(--vm-turquoise);
	color: var(--vm-blanc, #fff);
}

.vm-dept-pill input {
	flex: 0 0 auto;
	margin-top: 3px;
}

@media (min-width: 577px) {
	.vm-dept-grid {
		grid-template-columns: repeat(3, 1fr);
		max-height: 300px;
	}
}

/* ══ Correctifs de mise en page du formulaire ═════════════════════════════ */
/* Le conteneur du formulaire est une .row Bootstrap (flex). Les blocs de
   filtres sont des .row imbriquées directement dedans (au lieu d'un .col),
   ce qui les traite comme des items flex côte à côte. Résultat : la row du
   bouton se place à droite du dernier bloc au lieu de passer dessous.
   Correctif : forcer chaque .row enfant à occuper toute la largeur. */
.row.pb-3.mt-4 > .row {
	flex: 0 0 100%;
	max-width: 100%;
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

/* Le bouton, centré, seul sur sa ligne */
.row.text-center.justify-content-center .input-submit-cp {
	float: none;
	display: inline-block;
	margin: var(--vm-space-3, 1rem) auto 0;
}

/* ══ Formulaire : thématiques en pastilles ════════════════════════════════ */
.vm-theme-search {
	margin-bottom: var(--vm-space-3, 1rem);
}
.vm-theme-search input {
	width: 100%;
	max-width: 420px;
}

.vm-theme-group,
.vm-theme-details {
	border: 0;
	padding: 0;
	margin: 0 0 var(--vm-space-3, 1rem);
	min-width: 0;
}

/* Titre de groupe (legend + summary partagent la même allure) */
.vm-theme-legend {
	font-size: .8rem !important;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: var(--vm-turquoise);
	padding: 0;
	margin: 0 0 var(--vm-space-2, .5rem);
	width: auto;
	float: none;
	cursor: pointer;
	list-style: none;
}
.vm-theme-legend::-webkit-details-marker { display: none; }
.vm-theme-legend::marker { content: ''; }

/* Chevron pour le groupe repliable */
.vm-theme-details > .vm-theme-legend::after {
	content: ' \25be';
	color: var(--vm-bleu);
}
.vm-theme-details[open] > .vm-theme-legend::after {
	content: ' \25b4';
}
.vm-theme-n {
	color: var(--vm-bleu);
	font-weight: 600;
}

/* Grille de pastilles : elles s'enchaînent et passent à la ligne */
.vm-theme-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

/* Une pastille = un label cliquable (checkbox masqué) */
.vm-theme-pill {
	display: inline-flex;
	align-items: center;
	margin: 0;
	padding: 8px 14px;
	border: 1px solid var(--vm-turquoise);
	border-radius: 20px;
	font-size: .85rem;
	font-weight: 400;
	color: var(--vm-bleu);
	background: var(--vm-blanc, #fff);
	cursor: pointer;
	transition: background .15s ease, color .15s ease;
	min-height: 38px;
}
.vm-theme-pill input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}
.vm-theme-pill:hover {
	background: var(--vm-vert-clair, #e3f5f7);
}
.vm-theme-pill:has(input:checked) {
	background: var(--vm-turquoise);
	color: var(--vm-blanc, #fff);
}
.vm-theme-pill:has(input:focus-visible) {
	outline: 2px solid var(--vm-rose, #ff0084);
	outline-offset: 2px;
}

/* ══ Formulaire : période + lieu (cases tactiles) ═════════════════════════ */
/* Les <br> sont retirés ; chaque case devient un label pleine largeur */
.vm-check-list label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 2px 0;
	margin: 0;
	font-weight: 400;
	color: var(--vm-bleu);
	cursor: pointer;
}
.vm-check-list input[type="checkbox"] {
	width: 18px;
	height: 18px;
	flex: 0 0 18px;
}

/* ══ Formulaire : « Plus de filtres » (repliable) ═════════════════════════ */
.vm-plus-filtres {
	margin: var(--vm-space-5, 1rem) 0 0;
	border: 1px solid var(--vm-turquoise);
	border-radius: 10px;
	padding: var(--vm-space-2, .5rem) var(--vm-space-3, 1rem);
}
.vm-plus-filtres__head {
	font-weight: 600;
	color: var(--vm-bleu);
	cursor: pointer;
	list-style: none;
	padding: var(--vm-space-2, .5rem) 0;
}
.vm-plus-filtres__head::-webkit-details-marker { display: none; }
.vm-plus-filtres__head::marker { content: ''; }
.vm-plus-filtres__head::after {
	content: ' \25be';
}
.vm-plus-filtres[open] .vm-plus-filtres__head::after {
	content: ' \25b4';
}
.vm-plus-filtres__head span {
	font-weight: 400;
	font-size: .85rem;
	color: var(--vm-turquoise);
}

/* ══ Astuce « à distance » en tête de formulaire ══════════════════════════ */
.vm-astuce-distance {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0 0 var(--vm-space-1, 1rem);
	padding: 12px 16px;
	background: var(--vm-vert-clair, #e3f5f7);
	border-radius: 10px;
	font-size: .9rem;
	color: var(--vm-bleu);
	line-height: 1.4;
}

/* Colonne TITRE (gauche) — règle sa largeur ici via flex-basis */
.vm-astuce-distance__titre {
	flex: 0 0 220px;      /* ← LARGEUR DE LA COLONNE TITRE (modifie cette valeur) */
	display: flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	color: var(--vm-bleu);
}
.vm-astuce-distance__titre i {
	color: var(--vm-turquoise);
	font-size: 1.3rem;
	flex: 0 0 auto;
}

/* Colonne TEXTE (droite) — occupe le reste */
.vm-astuce-distance__txt {
	flex: 1;
	margin: 0;
	min-width: 0;   /* autorise le texte à rétrécir au lieu de déborder */
}

/* Mobile : colonnes empilées (sinon le texte déborde à droite) */
@media (max-width: 576px) {
	.vm-astuce-distance {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 6px;
	}
	.vm-astuce-distance__titre,
	.vm-astuce-distance__txt {
		flex: 1 1 100% !important;
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}
	.vm-astuce-distance__txt {
		overflow-wrap: break-word;
	}
}

/* ══ Cartes de choix « Expertise » ════════════════════════════════════════ */
.vm-exp-cards {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vm-exp-card {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var(--vm-turquoise);
	border-radius: 10px;
	cursor: pointer;
	background: var(--vm-blanc, #fff);
	transition: background .15s ease, border-color .15s ease;
}
.vm-exp-card:hover {
	background: var(--vm-vert-clair, #e3f5f7);
}

/* Checkbox masqué mais focusable */
.vm-exp-card input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	pointer-events: none;
}

/* Carte cochée : bordure turquoise épaisse + fond léger */
.vm-exp-card:has(input:checked) {
	border-color: var(--vm-turquoise);
	border-width: 2px;
	background: var(--vm-vert-clair, #e3f5f7);
	padding: 9px 11px; /* compense le +1px de bordure */
}
.vm-exp-card:has(input:focus-visible) {
	outline: 2px solid var(--vm-rose, #ff0084);
	outline-offset: 2px;
}

.vm-exp-card__pin {
	flex: 0 0 auto;
	width: 28px;
	height: auto;
	margin-top: 2px;
}
.vm-exp-card__txt {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.vm-exp-card__titre {
	font-weight: 700;
	color: var(--vm-bleu);
	font-size: .95rem;
}
.vm-exp-card__desc {
	font-size: .8rem;
	color: var(--vm-turquoise);
	line-height: 1.2;
}

/* ══ Lien « Effacer tous les filtres » ════════════════════════════════════ */
.vm-form-actions {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
}
.vm-reset-filtres {
	font-size: .85rem;
	color: var(--vm-bleu);
	text-decoration: underline;
}
.vm-reset-filtres:hover {
	color: var(--vm-turquoise);
}

/* ══ Barre collante de retour rapide (résultats) ══════════════════════════ */
/* Wrapper porteur du sticky (isolé du style visuel de la barre) */
.vm-results-bar-wrap {
	position: -webkit-sticky;
	position: sticky;
	top: var(--vm-header-height, 60px);
	z-index: 30;
	margin: 0 0 var(--vm-space-3, 1rem);
}

.vm-results-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 10px 16px;
	background: var(--vm-blanc, #fff);
	border: 2px solid var(--vm-turquoise);
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, .08);
}

.vm-results-bar__count {
	color: var(--vm-bleu);
	font-size: .9rem;
}
.vm-results-bar__count strong {
	color: var(--vm-turquoise);
	font-size: 1.05rem;
}

.vm-results-bar__actions {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.vm-results-bar__btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 7px 14px;
	border-radius: 20px;
	font-size: .85rem;
	font-weight: 600;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
	white-space: nowrap;
}

/* Affiner : fond turquoise plein */
.vm-results-bar__btn--affiner {
	background: var(--vm-turquoise);
	color: var(--vm-blanc, #fff);
}
.vm-results-bar__btn--affiner:hover {
	background: var(--vm-bleu);
	color: var(--vm-blanc, #fff);
}

/* Nouvelle recherche : contour bleu */
.vm-results-bar__btn--nouvelle {
	background: transparent;
	color: var(--vm-bleu);
	border: 1px solid var(--vm-bleu);
}
.vm-results-bar__btn--nouvelle:hover {
	background: var(--vm-bleu);
	color: var(--vm-blanc, #fff);
}

/* Mobile : barre en pleine largeur, actions dessous */
@media (max-width: 576px) {
	.vm-results-bar {
		flex-direction: column;
		align-items: stretch;
		text-align: center;
	}
	.vm-results-bar__actions {
		justify-content: center;
	}
	.vm-results-bar__btn {
		flex: 1;
		justify-content: center;
	}
}

/* ══ Bloc téléconsultation (angle urgence, avant le formulaire) ════════════ */
.vm-teleconsult {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: linear-gradient(135deg, var(--vm-bleu), var(--vm-cyan, #26c7c7));
	border-radius: 14px;
	color: var(--vm-blanc, #fff);
	box-shadow: 0 3px 12px rgba(0, 92, 162, .25);
}

.vm-teleconsult__icone {
	flex: 0 0 auto;
	width: 46px;
	height: 46px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, .18);
	border-radius: 50%;
	font-size: 1.3rem;
}

.vm-teleconsult__txt {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1;
}
.vm-teleconsult__titre {
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.2;
}
.vm-teleconsult__desc {
	font-size: .88rem;
	line-height: 1.35;
	opacity: .95;
}

.vm-teleconsult__cta {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 18px;
	background: var(--vm-blanc, #fff);
	color: var(--vm-bleu);
	font-weight: 700;
	border-radius: 24px;
	text-decoration: none;
	white-space: nowrap;
	transition: transform .15s ease, box-shadow .15s ease;
}
.vm-teleconsult__cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
	color: var(--vm-bleu);
}

/* Mobile : empilé, CTA pleine largeur */
@media (max-width: 576px) {
	.vm-teleconsult {
		flex-direction: column;
		text-align: center;
		gap: 10px;
	}
	.vm-teleconsult__cta {
		width: 100%;
		justify-content: center;
	}
}

/* ══ Message : département demandé sans résultat ══════════════════════════ */
.vm-dept-vide {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 var(--vm-space-3, 1rem);
	padding: 12px 16px;
	background: var(--vm-vert-clair, #e3f5f7);
	border-left: 4px solid var(--vm-turquoise);
	border-radius: 8px;
	font-size: .9rem;
	color: var(--vm-bleu);
	line-height: 1.4;
}
.vm-dept-vide__icone {
	color: var(--vm-turquoise);
	font-size: 1.1rem;
	margin-top: 1px;
	flex: 0 0 auto;
}
.vm-dept-vide__txt {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 8px;
}
.vm-dept-vide__intro {
	font-weight: 400;
}
.vm-dept-vide__tags {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
}
.vm-dept-vide__tag {
	display: inline-block;
	padding: 2px 10px;
	background: var(--vm-blanc, #fff);
	border: 1px solid var(--vm-turquoise);
	border-radius: 14px;
	font-size: .82rem;
	font-weight: 600;
	white-space: nowrap;
}