/**
 * Vauban — Composant Sélecteur (`<select>`) réutilisable sur tout le site.
 *
 * @version 1.0.0 (2026-06-01)
 *
 * Objectif : un sélecteur sobre et moderne (charte indigo Vauban), arrondi,
 * avec flèche SVG maison, focus accent, hover, état désactivé, et — en option —
 * une liste déroulante 100 % stylée (widget JS) là où le rendu natif de l'OS
 * (surlignage bleu non stylable) ne suffit pas.
 *
 * --------------------------------------------------------------------------
 * DEUX NIVEAUX D'USAGE
 *
 *   1) SOCLE (CSS only, universel, sûr, picker natif) — beautifie le contrôle
 *      FERMÉ de tout `<select>` :
 *        • opt-in unitaire   : <select class="vauban-select"> … </select>
 *        • opt-in conteneur  : <div data-vauban-selects> … tous les <select> … </div>
 *      La liste OUVERTE reste le rendu natif de l'OS (limite navigateur).
 *
 *   2) WIDGET (CSS + JS opt-in) — liste OUVERTE entièrement stylée, pour les
 *      sélecteurs à forte valeur :
 *        • <select class="vauban-select" data-vauban-rich-select> … </select>
 *      Le JS (vauban-onboarding.js → initRichSelects) masque l'ouverture native
 *      et affiche `.vauban-select-menu`. Sur mobile, l'overlay s'applique déjà
 *      à TOUS les selects (meilleure UX tactile) via initMobileSelectOverlay.
 *
 * --------------------------------------------------------------------------
 * THÈME : les couleurs passent par des variables locales `--vsel-*` dont les
 * valeurs par défaut pointent vers les tokens sémantiques `--vt-*` (mode sombre
 * automatique là où ils sont chargés) AVEC un repli littéral clair (charte
 * indigo) pour les surfaces qui n'embarquent pas la couche de thème (ex. le
 * formulaire d'onboarding, clair uniquement). Aucune couleur thématisée n'est
 * codée en dur hors de ce bloc de variables.
 * ========================================================================== */

/* =============================================================================
 * 1. Variables du composant (défauts charte indigo + alias tokens de thème)
 * ========================================================================== */
.vauban-select,
[data-vauban-selects] select {
	--vsel-bg: var(--vt-surface-1, #FFFFFF);
	--vsel-bg-hover: var(--vt-surface-1, #FFFFFF);
	--vsel-text: var(--vt-text, #101828);
	--vsel-placeholder: var(--vt-text-soft, #667085);
	--vsel-border: var(--vt-border, #D0D5DD);
	--vsel-border-hover: var(--vt-border-strong, #98A2B3);
	--vsel-accent: var(--vt-primary, #4F46E5);
	--vsel-ring: rgba(79, 70, 229, 0.18);
	--vsel-radius: 12px;
	--vsel-shadow: 0 1px 2px rgba(16, 24, 40, 0.05);
	--vsel-shadow-hover: 0 2px 10px rgba(16, 24, 40, 0.08);
	--vsel-height: 46px;
	--vsel-font: inherit;
	/* Flèche SVG (chevron slate). Surchargée en sombre §5. */
	--vsel-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23667085' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* =============================================================================
 * 2. Contrôle fermé — socle universel
 * ========================================================================== */
.vauban-select,
[data-vauban-selects] select {
	-webkit-appearance: none !important;
	-moz-appearance: none !important;
	appearance: none !important;
	min-height: var(--vsel-height);
	margin: 0;
	padding: 11px 42px 11px 14px !important;
	box-sizing: border-box;
	font: var(--vsel-font);
	font-size: 14.5px !important;
	line-height: 1.4;
	color: var(--vsel-text) !important;
	background-color: var(--vsel-bg) !important;
	background-image: var(--vsel-chevron) !important;
	background-repeat: no-repeat !important;
	background-position: right 14px center !important;
	background-size: 16px 16px !important;
	border: 1px solid var(--vsel-border) !important;
	border-radius: var(--vsel-radius) !important;
	box-shadow: var(--vsel-shadow);
	cursor: pointer;
	/* border-radius retiré : provoque un repaint coûteux. background-color conservé
	   car il n'est animé qu'à l'ouverture (état .vauban-select-open), pas en continu. */
	transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
	text-overflow: ellipsis;
	white-space: nowrap;
	overflow: hidden;
}

/* Pleine largeur UNIQUEMENT pour les selects de formulaire (et la classe
 * explicite). On NE force PAS la largeur des selects de barre d'outils/filtres
 * (admin, Panel) qui doivent garder leur largeur naturelle → pas de casse de
 * mise en page lors du déploiement « socle partout ». */
.vauban-select,
[data-vauban-selects] .vauban-form-group select,
[data-vauban-selects] .v-field select,
[data-vauban-selects] .vad-field select {
	display: block;
	width: 100%;
}

/* Largeur intrinsèque (au lieu de pleine largeur) si demandé. */
.vauban-select--auto {
	width: auto;
	min-width: 180px;
}

/* Variante compacte (filtres, barres d'outils). */
.vauban-select--sm {
	--vsel-height: 38px;
	font-size: 13.5px !important;
	padding: 8px 38px 8px 12px !important;
	background-position: right 12px center !important;
}

/* =============================================================================
 * 3. États : hover / focus / désactivé / erreur
 * ========================================================================== */
.vauban-select:hover,
[data-vauban-selects] select:hover {
	border-color: var(--vsel-border-hover) !important;
	box-shadow: var(--vsel-shadow-hover);
}

.vauban-select:focus,
.vauban-select:focus-visible,
[data-vauban-selects] select:focus,
[data-vauban-selects] select:focus-visible {
	outline: none !important;
	border-color: var(--vsel-accent) !important;
	box-shadow: 0 0 0 3px var(--vsel-ring) !important;
}

.vauban-select:disabled,
[data-vauban-selects] select:disabled {
	cursor: not-allowed;
	opacity: 0.6;
	background-color: var(--vt-surface-2, #F3F4F6) !important;
	box-shadow: none;
}

/* Le placeholder « Sélectionner » (option vide) en gris atténué quand actif. */
.vauban-select:required:invalid,
[data-vauban-selects] select:required:invalid {
	color: var(--vsel-placeholder) !important;
}

.vauban-select.error,
.vauban-select.is-invalid,
[data-vauban-selects] select.error {
	border-color: #C8443D !important;
	box-shadow: 0 0 0 3px rgba(200, 68, 61, 0.14) !important;
}

/* Garde-fou : les selects multiples ne reçoivent ni flèche ni hauteur fixe. */
.vauban-select[multiple],
[data-vauban-selects] select[multiple] {
	min-height: 0;
	background-image: none !important;
	padding: 8px 10px !important;
	cursor: default;
}

/* =============================================================================
 * 4. Liste déroulante stylée (widget JS opt-in) — `.vauban-select-menu`
 * --------------------------------------------------------------------------
 * Affichée par le JS (overlay) sur mobile (tous selects) et sur desktop pour
 * les `[data-vauban-rich-select]`. Source de vérité unique ici (tokenisée,
 * dark-aware) — supplante l'ancienne copie de 01-base-forms.css (chargée avant).
 * ========================================================================== */
.vauban-select-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: block;
	padding: 0;
	background: rgba(15, 23, 42, 0.28);
	/* Léger flou statique (non animé). Animer backdrop-filter déclenche un
	 * repaint pleine page à chaque frame → saccades. On anime uniquement opacity
	 * (opération GPU pure, sans reflow ni repaint). */
	-webkit-backdrop-filter: blur(1px);
	backdrop-filter: blur(1px);
	animation: vaubanSelectFadeIn 0.22s ease both;
	will-change: opacity;
	pointer-events: none;
}

@keyframes vaubanSelectFadeIn {
	from { opacity: 0; }
	to   { opacity: 1; }
}

/* Variante desktop ancrée sous le champ : pas de voile sombre plein écran, et
 * surtout AUCUN flou d'arrière-plan. Le flou + le « trou » (clip-path) dessinaient
 * un rectangle net tout autour du groupe (barre-titre + champ + liste) → perçu
 * comme une « grosse bordure » entourant tout le bloc à l'ouverture. On neutralise
 * donc le backdrop-filter et son animation : la liste reste mise en avant par sa
 * seule ombre, sans cadre parasite. (Le voile + flou mobile, eux, sont conservés.) */
.vauban-select-overlay--anchored {
	background: transparent;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	animation: none;
}

/* Variante « léger flou » (data-vauban-no-label) : flou uniforme sans trou,
 * sans voile sombre marqué. */
.vauban-select-overlay--subtle {
	background: transparent;
	-webkit-backdrop-filter: blur(0.5px);
	backdrop-filter: blur(0.5px);
	animation: vaubanSelectFadeIn 0.18s ease both;
}

/* Opt-out TOTAL du flou (data-vauban-no-blur) : aucun backdrop-filter sur la
 * page, le menu reste mis en avant par sa seule ombre. Supplante les variantes
 * de flou ci-dessus (placée après + !important). */
.vauban-select-overlay--no-blur {
	background: transparent !important;
	-webkit-backdrop-filter: none !important;
	backdrop-filter: none !important;
	animation: none !important;
}

.vauban-select-menu {
	position: absolute;
	z-index: 100001;
	left: 12px;
	right: 12px;
	width: auto;
	max-width: 520px;
	box-sizing: border-box;
	background: var(--vt-surface-1, #FFFFFF);
	border: 1px solid var(--vt-border, #E4E7EC);
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(16, 24, 40, 0.18);
	overflow: hidden;
	transform-origin: top center;
	animation: vaubanSelectSlide 0.12s cubic-bezier(0.16, 1, 0.3, 1);
	/* Pré-promotion sur layer GPU pour que l'animation transform+opacity
	 * reste entièrement composited (zéro repaint durant l'ouverture). */
	will-change: transform, opacity;
}

/* Desktop ancré : largeur/position posées en JS (left + width du champ). */
.vauban-select-menu--anchored {
	left: auto;
	right: auto;
	max-width: none;
}

@keyframes vaubanSelectSlide {
	from { opacity: 0; transform: translateY(-8px) scale(0.985); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Sortie : fondu léger et rapide (fermeture / sélection). scaleY depuis le haut
 * (pas de translation vers le haut → pas d'effet d'aplatissement du champ). */
.vauban-select-overlay.is-closing .vauban-select-menu {
	animation: vaubanSelectClose 0.1s ease forwards !important;
}

@keyframes vaubanSelectClose {
	from { opacity: 1; transform: scaleY(1); }
	to   { opacity: 0; transform: scaleY(0.97); }
}

/* Label du champ d'origine, mis en avant pendant que le menu est ouvert.
 * Reprend le design « barre titre » (dégradé indigo→violet) au lieu de
 * répéter la question dans le menu. Classe posée/retirée par le JS.
 * --vsel-active-label-bg / --vsel-active-label-shadow : surchargés en sombre
 * (§5) pour atténuer la vivacité sur fond très sombre. */
label.vauban-select-active-label {
	--vsel-active-label-bg: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
	--vsel-active-label-shadow: 0 4px 14px rgba(79, 70, 229, 0.28);
	background: var(--vsel-active-label-bg) !important;
	color: var(--vt-on-accent, #FFFFFF) !important;
	-webkit-text-fill-color: var(--vt-on-accent, #FFFFFF) !important;
	padding: 10px 14px !important;
	border-radius: 10px !important;
	box-shadow: var(--vsel-active-label-shadow) !important;
	/* padding et margin retirés de la transition : ils provoquent un reflow
	 * (recalcul de layout) à chaque frame → source principale de saccade.
	 * border-radius et box-shadow sont paint-only, pas de reflow. */
	transition: border-radius 0.12s ease, box-shadow 0.12s ease !important;
}

/* Filet de sécurité : force le texte de TOUS les descendants du label-barre en
 * blanc (question, marqueurs) → reste lisible sur le dégradé violet même si une
 * feuille tierce (thème, CSS combiné en cache) tente d'imposer une couleur.
 * Placé AVANT les règles plus spécifiques ci-dessous (hint atténué, icône
 * d'aide) : à spécificité égale/supérieure et déclarées après, elles gardent la
 * priorité (ex. hint en blanc atténué). */
label.vauban-select-active-label,
label.vauban-select-active-label * {
	color: var(--vt-on-accent, #FFFFFF) !important;
	-webkit-text-fill-color: var(--vt-on-accent, #FFFFFF) !important;
	text-shadow: none !important;
}

/* Les enfants du label (astérisque requis, icône d'aide) suivent le fond foncé. */
.vauban-select-active-label .required,
.vauban-select-active-label .optional {
	color: var(--vt-on-accent, #FFFFFF) !important;
	-webkit-text-fill-color: var(--vt-on-accent, #FFFFFF) !important;
}

/* Sous-titre / précision du label (`<small>` ou hint) : par défaut en gris, il
 * devient illisible sur le dégradé indigo une fois le label promu en barre-titre.
 * On le repasse en blanc atténué (lisible, mais secondaire vs le titre). */
.vauban-select-active-label small,
.vauban-select-active-label .vo-field-hint,
.vauban-select-active-label .field-hint,
.vauban-select-active-label .vauban-field-hint {
	color: rgba(255, 255, 255, 0.82) !important;
	-webkit-text-fill-color: rgba(255, 255, 255, 0.82) !important;
}

/* Icône d'aide « i » : `.tooltip-icon` (espaces) ET `.vauban-tip` (onboarding)
 * → cercle blanc translucide + glyphe blanc, lisible sur le dégradé violet. */
.vauban-select-active-label .tooltip-icon,
.vauban-select-active-label .vauban-tip {
	background: rgba(255, 255, 255, 0.25) !important;
	color: var(--vt-on-accent, #FFFFFF) !important;
	-webkit-text-fill-color: var(--vt-on-accent, #FFFFFF) !important;
}

/* --- Réunion visuelle (desktop) : label + champ + liste = un seul bloc -------
 * À l'ouverture (classe .vauban-select-open posée par le JS + JS qui colle le
 * menu à 0px sous le champ), on joint les 3 éléments : coins jointifs, bordure
 * accent continue, ombres internes neutralisées (une seule ombre, sous la liste).
 * Cantonné au desktop : sur mobile chaque bloc reste arrondi et autonome. */
@media (min-width: 769px) {
	.vauban-select-active-label {
		margin-bottom: 0 !important;
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
		box-shadow: none !important;
	}

	[data-vauban-selects] select.vauban-select-open,
	.vauban-select.vauban-select-open {
		border-radius: 0 !important;
		/* Bordure indigo douce, identique à celle du menu (allégée). */
		border-color: rgba(79, 70, 229, 0.5) !important;
		/* Le séparateur bas est porté par la bordure HAUTE du menu (stable au
		 * scroll) ; on rend transparente la bordure basse du champ pour éviter
		 * un double trait. */
		border-bottom-color: transparent !important;
		/* Champ légèrement grisé tant que le sélecteur est ouvert (= en attente
		 * de sélection), pour le distinguer de l'état fermé/rempli. */
		background-color: var(--vt-surface-2, #F4F5F7) !important;
		box-shadow: none !important;
	}

	/* Menu ancré : conserve sa bordure HAUTE (accent) = séparateur visible dès
	 * l'ouverture, indépendant du positionnement sous-pixel du champ. */
	.vauban-select-menu--anchored {
		border-top-left-radius: 0;
		border-top-right-radius: 0;
		/* Bordure indigo douce (allégée) — moins marquée que l'accent plein. */
		border-color: rgba(79, 70, 229, 0.5);
		box-shadow: 0 16px 34px rgba(79, 70, 229, 0.16);
		animation-name: vaubanMenuJoin;
	}
}

/* Menu jointif : se déploie vers le BAS depuis le champ (scaleY, origine haut).
 * Pas de translation vers le haut → ne recouvre jamais le champ (évite l'effet
 * d'aplatissement perçu à l'ouverture). */
@keyframes vaubanMenuJoin {
	from { opacity: 0; transform: scaleY(0.97); }
	to   { opacity: 1; transform: scaleY(1); }
}

.vauban-select-menu__list {
	max-height: 44vh;
	overflow-y: auto;
	padding: 6px;
	scrollbar-width: thin;
}

.vauban-select-menu__item {
	display: block;
	width: 100%;
	margin: 0;
	padding: 11px 12px;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--vt-text, #0F172A);
	font-size: 14px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	position: relative;
	transition: background-color 0.12s ease, color 0.12s ease;
	animation: vaubanItemIn 0.09s ease both;
}

/* Cascade d'apparition des items (effet « liste qui se déroule », très rapide). */
@keyframes vaubanItemIn {
	from { opacity: 0; transform: translateY(3px); }
	to   { opacity: 1; transform: translateY(0); }
}

.vauban-select-menu__item:nth-child(1) { animation-delay: 0.004s; }
.vauban-select-menu__item:nth-child(2) { animation-delay: 0.009s; }
.vauban-select-menu__item:nth-child(3) { animation-delay: 0.014s; }
.vauban-select-menu__item:nth-child(4) { animation-delay: 0.019s; }
.vauban-select-menu__item:nth-child(5) { animation-delay: 0.024s; }
.vauban-select-menu__item:nth-child(6) { animation-delay: 0.029s; }
.vauban-select-menu__item:nth-child(7) { animation-delay: 0.034s; }
.vauban-select-menu__item:nth-child(8) { animation-delay: 0.039s; }

.vauban-select-menu__item + .vauban-select-menu__item {
	margin-top: 2px;
}

.vauban-select-menu__item:hover,
.vauban-select-menu__item:focus,
.vauban-select-menu__item.is-active {
	outline: none;
	background: var(--vt-primary-bg, #EEF0FE);
	color: var(--vt-primary-strong, #4338CA);
}

/* Item sélectionné : nettement distinct d'un simple survol (coche + accent),
 * pour ne pas le confondre avec un choix cliquable à l'ouverture. */
.vauban-select-menu__item--selected {
	background: var(--vt-primary-bg, #E0E2FB);
	color: var(--vt-primary-strong, #4F46E5);
	font-weight: 700;
	padding-right: 38px;
}

.vauban-select-menu__item--selected::after {
	content: "";
	position: absolute;
	right: 13px;
	top: 50%;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3 8.5l3.2 3.2L13 4' stroke='%234F46E5' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
	background-size: 16px 16px;
}

/* =============================================================================
 * 4 ter. Variante CHAT — `.vauban-select-menu--chat`
 * --------------------------------------------------------------------------
 * Sélecteur « Bien concerné » de la messagerie propriétaire. Rendu volontairement
 * sobre : l'option courante n'a PAS de pavé/boîte coloré (jugé trop voyant dans
 * ce contexte) — seulement un libellé accentué + la coche discrète. Le survol
 * reste neutre. Scopé via data-vauban-rich-menu-class → n'affecte aucun autre
 * menu du dashboard.
 * ========================================================================== */
.vauban-select-menu--chat .vauban-select-menu__item:hover,
.vauban-select-menu--chat .vauban-select-menu__item:focus,
.vauban-select-menu--chat .vauban-select-menu__item.is-active {
	background: var(--vt-surface-2, #F3F4F6);
	color: var(--vt-text, #0F172A);
}

.vauban-select-menu--chat .vauban-select-menu__item--selected {
	background: transparent;
	color: var(--vt-primary, #4F46E5);
	font-weight: 600;
}

.vauban-select-menu--chat .vauban-select-menu__item--selected:hover,
.vauban-select-menu--chat .vauban-select-menu__item--selected:focus,
.vauban-select-menu--chat .vauban-select-menu__item--selected.is-active {
	background: var(--vt-surface-2, #F3F4F6);
	color: var(--vt-primary, #4F46E5);
}

/* =============================================================================
 * 4 bis. Variante COMPACTE — `.vauban-select-menu--compact`
 * --------------------------------------------------------------------------
 * Pour les sélecteurs de barre d'outils / header (ex. filtre « bien » du Panel)
 * où le gabarit de formulaire est disproportionné. Menu plus arrondi, surface
 * adoucie (moins « blanc franc »), ombre indigo douce, items denses, largeur
 * minimale confortable pour éviter le retour à la ligne agressif des libellés.
 * Surfaces/textes via tokens → mode sombre automatique (data-theme posé sur le
 * menu par le JS quand le thème est porté par un wrapper et non par <html>).
 * ========================================================================== */
.vauban-select-menu.vauban-select-menu--compact {
	min-width: 232px;
	border-radius: 14px;
	background: var(--vt-surface-1, #F6F7FC);
	border-color: var(--vt-border, #E6E8F2);
	box-shadow: 0 16px 40px rgba(30, 27, 75, 0.16), 0 2px 8px rgba(30, 27, 75, 0.08);
	/* visible (et non hidden) pour laisser dépasser l'encoche au-dessus du menu. */
	overflow: visible;
}

/* Encoche (caret) : petite flèche qui relie le menu au sélecteur déclencheur.
   Diamant pivoté n'exposant que ses bords haut/gauche → pointe vers le haut,
   surface et bordure alignées sur celles du menu (donc dark-aware). */
.vauban-select-menu--compact::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 22px;
	width: 11px;
	height: 11px;
	background: var(--vt-surface-1, #F6F7FC);
	border-top: 1px solid var(--vt-border, #E6E8F2);
	border-left: 1px solid var(--vt-border, #E6E8F2);
	border-top-left-radius: 3px;
	transform: rotate(45deg);
}

/* La liste reprend le clip arrondi que portait l'overflow:hidden du menu. */
.vauban-select-menu--compact .vauban-select-menu__list {
	border-radius: inherit;
}

.vauban-select-menu--compact .vauban-select-menu__list {
	padding: 5px;
	max-height: 320px;
}

.vauban-select-menu--compact .vauban-select-menu__item {
	padding: 8px 12px;
	font-size: 13px;
	line-height: 1.3;
	border-radius: 9px;
}

.vauban-select-menu--compact .vauban-select-menu__item--selected {
	font-weight: 600;
	background: var(--vt-primary-bg, #EEF0FE);
	padding-right: 34px;
}

.vauban-select-menu--compact .vauban-select-menu__item--selected::after {
	right: 11px;
	width: 14px;
	height: 14px;
	background-size: 14px 14px;
}

/* =============================================================================
 * 5. Mode sombre — chevron, label actif adouci, items atténués
 * --------------------------------------------------------------------------
 * Chevron : data-URI remplacée (couleur non tokenisable).
 * Label actif : gradient atténué via --vsel-active-label-* (évite la vivacité
 *   sur fond très sombre tout en conservant la barre-titre).
 * Item sélectionné / survol : texte en --vt-primary (#818CF8) plus adapté aux
 *   surfaces sombres que --vt-primary-strong (#6366F1).
 * Fonds et bordures : suivent automatiquement les tokens --vt-*.
 * ========================================================================== */

/* ── Variables de thème sombre (ancêtres communs aux 3 espaces) ── */
[data-theme="dark"],
.vauban-dashboard-wrapper.v-dark,
html.vauban-dark,
.vpc-app[data-vpc-theme="dark"] {
	--vsel-active-label-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.68) 0%, rgba(124, 58, 237, 0.68) 100%);
	--vsel-active-label-shadow: 0 4px 14px rgba(79, 70, 229, 0.14);
}

@media (prefers-color-scheme: dark) {
	[data-theme="auto"] {
		--vsel-active-label-bg: linear-gradient(135deg, rgba(79, 70, 229, 0.68) 0%, rgba(124, 58, 237, 0.68) 100%);
		--vsel-active-label-shadow: 0 4px 14px rgba(79, 70, 229, 0.14);
	}
}

/* ── Chevron (data-URI) ── */
[data-theme="dark"] .vauban-select,
[data-theme="dark"] select,
.v-dark select,
html.vauban-dark select,
.vpc-app[data-vpc-theme="dark"] select {
	--vsel-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	--vsel-ring: rgba(129, 140, 248, 0.28);
}

@media (prefers-color-scheme: dark) {
	[data-theme="auto"] .vauban-select,
	[data-theme="auto"] select {
		--vsel-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%2394A3B8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
		--vsel-ring: rgba(129, 140, 248, 0.28);
	}
}

/* ── Items de menu en mode sombre (menu ajouté au <body> avec data-theme hérité) ── */
[data-theme="dark"] .vauban-select-menu__item:hover,
[data-theme="dark"] .vauban-select-menu__item:focus,
[data-theme="dark"] .vauban-select-menu__item.is-active {
	color: var(--vt-primary, #818CF8);
}

[data-theme="dark"] .vauban-select-menu__item--selected {
	color: var(--vt-primary, #818CF8);
}

@media (prefers-color-scheme: dark) {
	[data-theme="auto"] .vauban-select-menu__item:hover,
	[data-theme="auto"] .vauban-select-menu__item:focus,
	[data-theme="auto"] .vauban-select-menu__item.is-active {
		color: var(--vt-primary, #818CF8);
	}
	[data-theme="auto"] .vauban-select-menu__item--selected {
		color: var(--vt-primary, #818CF8);
	}
}

/* =============================================================================
 * 6. Accessibilité — mouvement réduit
 * ========================================================================== */
@media (prefers-reduced-motion: reduce) {
	.vauban-select,
	[data-vauban-selects] select {
		transition: none;
	}
	.vauban-select-overlay,
	.vauban-select-menu,
	.vauban-select-menu__item {
		animation: none !important;
	}
	.vauban-select-active-label {
		transition: none !important;
	}
}

/* =============================================================================
 * 7. Mobile — bottom sheet (≤ 768 px)
 * --------------------------------------------------------------------------
 * Sur mobile, le menu remonte depuis le bas en feuille (bottom sheet) :
 * meilleur confort tactile que la liste positionnée sous le champ.
 * Les styles inline posés par le JS sont neutralisés via !important.
 * L'overlay capte les taps extérieurs pour fermer le sheet.
 * ========================================================================== */

@keyframes vaubanSelectSlideUp {
	from { transform: translateY(100%); }
	to   { transform: translateY(0); }
}

@media (max-width: 768px) {
	/* L'overlay capte les taps sur la zone sombre → ferme le sheet sans
	 * déclencher de clic sur le contenu situé en dessous. */
	.vauban-select-overlay {
		pointer-events: auto;
	}

	/* Bottom sheet : repositionne le menu en bas de l'écran. Les valeurs inline
	 * posées par reposition() (top, left, width) sont écrasées par !important. */
	.vauban-select-menu {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		top: auto !important;
		width: 100% !important;
		max-width: 100% !important;
		border-radius: 20px 20px 0 0 !important;
		box-shadow: 0 -8px 40px rgba(16, 24, 40, 0.22) !important;
		overflow: hidden !important;
		animation: vaubanSelectSlideUp 0.28s cubic-bezier(0.32, 0.72, 0, 1) both !important;
		/* Espace réservé pour la poignée (pseudo-élément). */
		padding-top: 28px !important;
	}

	/* Poignée visuelle — remplace et neutralise l'encoche du variant --compact. */
	.vauban-select-menu::before {
		content: "" !important;
		display: block !important;
		position: absolute !important;
		top: 10px !important;
		left: 50% !important;
		transform: translateX(-50%) !important;
		width: 36px !important;
		height: 4px !important;
		background: var(--vt-border, #D0D5DD) !important;
		border: 0 !important;
		border-radius: 2px !important;
		margin: 0 !important;
		box-shadow: none !important;
		background-image: none !important;
	}

	/* Liste scrollable avec cibles tactiles généreuses. */
	.vauban-select-menu__list {
		max-height: 52vh !important;
		padding: 4px 8px calc(8px + env(safe-area-inset-bottom, 0px)) !important;
	}

	/* Items — hauteur min 48 px (recommandation WCAG tactile). */
	.vauban-select-menu__item {
		padding: 14px 16px !important;
		font-size: 15px !important;
		border-radius: 10px !important;
	}

	.vauban-select-menu__item--selected {
		padding-right: 44px !important;
	}

	/* Désactive l'animation desktop (joint label+champ+menu). */
	.vauban-select-menu--anchored {
		animation-name: vaubanSelectSlideUp !important;
	}
}