/* Le SELECT conserve ses styles et ses dimensions. La saisie couvre son texte;
   ses couleurs effectives servent de repli à la liste, même sans variables SS. */
.pw-city-field
{
	position: relative;
	--pw-city-surface: #fff;
	--pw-city-text: #243640;
	--pw-city-line: #cdd5da;
	--pw-city-font: Arial, sans-serif;
}
.pw-city-field>select.pw-city-source { pointer-events: none; max-width: 100%; -webkit-text-fill-color: transparent; }
/* Indiquer aussi le mode au moteur qui dessine le contrôle natif (WebKit). */
.site_dark :where(.gestion_v10,.gestion_v12) .pw-city-field>select.pw-city-source { color-scheme: dark; }
.pw-city-field>input.pw-city-input
{
	all: unset;
	position: absolute;
	box-sizing: border-box;
	inset: 1px 28px 1px 1px;
	width: calc(100% - 29px);
	min-width: 0;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 0 0 0 8px;
	cursor: text;
	text-overflow: ellipsis;
	background: transparent;
	color: var(--pw-city-text);
}
.pw-city-field>input.pw-city-input::placeholder { color: inherit; opacity: .7; }
/* Firefox applique aussi text-fill-color à la flèche native. Masquer seulement
   le texte par le fond de saisie, en laissant les liserés ADM apparents. */
@supports (-moz-appearance: none)
{
	.pw-city-field { --pw-city-arrow-space: 20px; }
	.pw-city-field>select.pw-city-source { -webkit-text-fill-color: currentColor; }
	.pw-city-field>input.pw-city-input { background: var(--pw-city-surface); }
	:where(.gestion_v10,.gestion_v12) .pw-city-field>input.pw-city-input { background: var(--ff_bg); clip-path: inset(2px 0 2px 2px); }
	:where(.gestion_v10,.gestion_v12) .pw-city-field>select.pw-city-hover~input.pw-city-input { background: var(--ff_o_bg); }
	:where(.gestion_v10,.gestion_v12) .pw-city-field>select.pw-city-focus~input.pw-city-input { background: var(--ff_focus_bg); }
}
:where(.pw-city-field:has(>.pw-city-input:focus-visible)>select.pw-city-source) { outline: 2px solid var(--pw-city-text); outline-offset: 2px; }
.pw-city-field>input.pw-city-input:disabled { cursor: wait; opacity: 1; }
.pw-city-error,.pw-city-loading { display: block; margin-top: 5px; font: 13px/1.5 var(--fld_font_family,Arial,sans-serif); }
.pw-city-error { color: #b32636; }
.pw-city-error:empty { display: none; }
.pw-city-loading button { font: inherit; cursor: pointer; }
.pw-city-picker
{
	all: initial;
	--pw-city-surface: var(--pw-city-source-surface);
	--pw-city-text: var(--pw-city-source-text);
	--pw-city-line: var(--pw-city-source-line);
	--pw-city-font: var(--pw-city-source-font);
	position: fixed;
	z-index: 2147483000;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
	max-width: calc(100vw - 16px);
	color: var(--pw-city-text,#243640);
	background: var(--pw-city-surface,#fff);
	border: 1px solid var(--pw-city-line,#cdd5da);
	border-radius: 4px;
	box-shadow: 0 3px 10px #0002;
	font: 14px/1.4 var(--pw-city-font,Arial,sans-serif);
	overflow: hidden;
}
.pw-city-picker:not([open]) { display: none; }
.pw-city-picker .pw-city-status { flex: 0 0 auto; padding: 8px 11px; font: 12px/1.5 var(--pw-city-font,Arial,sans-serif); color: inherit; }
.pw-city-picker .pw-city-options { min-height: 0; max-height: 260px; overflow: auto; overscroll-behavior: contain; padding: 3px; }
.pw-city-picker .pw-city-option { box-sizing: border-box; padding: 6px 9px; min-height: 32px; cursor: pointer; overflow-wrap: anywhere; font: inherit; }
.pw-city-picker .pw-city-option:hover,.pw-city-picker .pw-city-option[aria-selected=true] { background: color-mix(in srgb,var(--pw-city-text) 12%,var(--pw-city-surface)); }
.pw-city-picker .pw-city-actions { flex: 0 0 auto; display: flex; flex-wrap: wrap; padding: 5px 10px; gap: 8px; border-top: 1px solid var(--pw-city-line); }
.pw-city-picker .pw-city-actions:empty { display: none; }
.pw-city-picker .pw-city-header button,
.pw-city-picker .pw-city-actions button
{
	all: unset;
	box-sizing: border-box;
	padding: 6px 3px;
	width: auto;
	min-width: 0;
	max-width: none;
	min-height: 32px;
	font: inherit;
	color: inherit;
	cursor: pointer;
}
.pw-city-picker button:focus-visible,.pw-city-picker input:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
.pw-city-picker.pw-city-mobile { inset: auto 0 0; width: 100%; max-width: 480px; margin: 0 auto; border-radius: 12px 12px 0 0; padding-bottom: env(safe-area-inset-bottom); }
.pw-city-picker.pw-city-mobile::backdrop { background: #14232d66; }
.pw-city-picker .pw-city-header { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; padding: 8px 12px; gap: 12px; }
.pw-city-picker .pw-city-header strong { all: unset; flex: 1; min-width: 0; font: 600 16px/1.5 var(--pw-city-font,Arial,sans-serif); }
.pw-city-picker input.pw-city-query
{
	all: unset;
	box-sizing: border-box;
	display: block;
	flex: 0 0 auto;
	min-height: 44px;
	margin: 4px 12px;
	padding: 8px 10px;
	border: 1px solid var(--pw-city-line);
	border-radius: 4px;
	background: var(--pw-city-surface);
	color: var(--pw-city-text);
	font: 16px/1.5 var(--pw-city-font,Arial,sans-serif);
}
.pw-city-picker.pw-city-mobile .pw-city-options { max-height: 42dvh; flex: 0 1 auto; }
.pw-city-picker.pw-city-mobile .pw-city-option { min-height: 48px; padding: 12px; font-size: 16px; }
.pw-city-picker.pw-city-mobile button { min-height: 44px; }
/* Les suggestions ADM suivent les cartes de menus, distinctes du champ fermé.
   V10 utilise ses couleurs communes en l'absence des jetons de surface V12. */
:where(.gestion_v10,.gestion_v12) .pw-city-picker
{
	--pw-city-surface: var(--cp_surface,var(--cp_bg));
	--pw-city-text: var(--cp_text);
	--pw-city-line: var(--cp_border,color-mix(in srgb,var(--pw-city-text) 20%,var(--pw-city-surface)));
	border-radius: var(--radius_m,4px);
	box-shadow: var(--elev_2,0 3px 10px #0002);
}
:where(.gestion_v10,.gestion_v12) .pw-city-picker .pw-city-status { color: var(--cp_text_soft,color-mix(in srgb,var(--pw-city-text) 70%,var(--pw-city-surface))); }
:where(.gestion_v10,.gestion_v12) .pw-city-picker .pw-city-options { padding: 6px; }
:where(.gestion_v10,.gestion_v12) .pw-city-picker .pw-city-option { border-radius: 6px; }
:where(.gestion_v10,.gestion_v12) .pw-city-picker .pw-city-option:hover,
:where(.gestion_v10,.gestion_v12) .pw-city-picker .pw-city-option[aria-selected=true] { background: var(--cp_links_on_bg); }
:where(.gestion_v10,.gestion_v12) .pw-city-picker button:focus-visible,
:where(.gestion_v10,.gestion_v12) .pw-city-picker input:focus-visible { outline: 2px solid var(--cp_buttons); outline-offset: -2px; }