/* ================================================================================================
	SKIN (Core) — apparence par défaut de BootstrapCore
	Seul fichier esthétique du Core : les <Module>.css restent mécaniques, ce fichier les habille.
	Un site sans Theme.css a l'apparence complète d'ici ; un Theme.css (SANS couche) gagne toujours.
	Désactivable par site : Core::Module_Unload("skin") - retour à l'apparence BootstrapVendor.

	Couches : `@layer vendor, core;` est déclaré par Theme::buildCoreHeaders(). Tout ici vit dans
	la couche `core`, qui gagne sur Bootstrap (`vendor`) peu importe la spécificité.

	⚠️ PIÈGE DES COUCHES : une règle d'ici bat TOUTE règle vendor sur la même propriété, même un
	sélecteur vendor plus spécifique. Jamais de sélecteur d'élément large (`a`, `button`, `input`) -
	il écraserait .nav-link, .btn... Toujours cibler la classe du composant, idéalement via ses
	variables `--bs-*`. Corollaire : redéfinir `.btn` écrase aussi `.btn-sm`/`.btn-lg` (vendor),
	d'où leur redéfinition explicite ici - même chose pour .form-control-sm/-lg et .table-sm.

	Sections :
	1. Personnalité  — les jetons qu'un Theme.css est CENSÉ toucher
	2. Dérivés       — calculés depuis la personnalité, jamais à toucher
	3. Ponts         — hooks d'accent des modules (remplacent les ponts copiés dans chaque Theme.css)
	4. Composants    — composants BootstrapVendor natifs, par leurs variables --bs-*
================================================================================================ */
@layer core {

/* ================================================================================================
	1. PERSONNALITÉ
	[data-bs-theme] = <body> en pratique (voir Theme.html) - et suit aussi un composant mis
	localement en sombre/clair (data-bs-theme posé sur un sous-élément).
================================================================================================ */
[data-bs-theme] {
	--bootstrap-accent: #f76b15;            /* orange chantier : un site qui le garde n'a pas encore choisi sa couleur */
	--bootstrap-accent-contrast: #ffffff;   /* texte posé SUR l'accent - calculé juste en dessous ; un Theme.css peut le forcer */

	--bootstrap-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif;
	--bootstrap-font-display: var(--bootstrap-font);   /* titres, logo texte */
	--bootstrap-font-mono: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

	--bootstrap-radius: .375rem;
	--bootstrap-density: 1;                 /* 0.875 serré · 1 normal · 1.125 aéré */

	--bootstrap-surface-hue: 220;           /* teinte des gris : 220 bleuté, 30 chaud, 0 + chroma 0% = neutre */
	--bootstrap-surface-chroma: 10%;        /* intensité de cette teinte */

	/* Caractère typographique de 3 familles d'éléments (police + casse) */
	--bootstrap-menu-font: var(--bootstrap-font);          /* liens de la barre de menu */
	--bootstrap-menu-case: none;
	--bootstrap-label-font: var(--bootstrap-font);         /* étiquettes : en-têtes de panneau, de carte, de colonne */
	--bootstrap-label-case: uppercase;
	--bootstrap-button-font: var(--bootstrap-font);        /* boutons */
	--bootstrap-button-case: none;
	--bootstrap-indicator: 2px;                            /* épaisseur du trait « actif » (menu, onglets) */
}

/* Texte sur l'accent : noir ou blanc selon la clarté de l'accent (OKLCH), calculé par le navigateur.
   Un accent qui change (Theme.css) ajuste ce texte tout seul. Navigateur sans « relative color » :
   reste blanc. Un Theme.css qui définit --bootstrap-accent-contrast gagne toujours (sans couche). */
@supports (color: oklch(from red l c h)) {
	[data-bs-theme] {
		--bootstrap-accent-contrast: oklch(from var(--bootstrap-accent) clamp(0, (0.6 - l) * 1000, 1) 0 0);
	}
}

/* ================================================================================================
	2. DÉRIVÉS
================================================================================================ */

/* Taille du texte P/M/G (préférence utilisateur, voir account/Preferences) - sur <html>, seule
   exception à la règle « jamais html » : `rem` se calcule depuis la racine. Tout ce qui est en
   rem/jetons suit, espacements compris - un élément qui ne grossit pas en G a une valeur en dur. */
html[data-bs-size="p"] { font-size: 87.5%; }
html[data-bs-size="g"] { font-size: 112.5%; }

[data-bs-theme] {
	/* Échelle typographique - 5 tailles, toutes en rem */
	--bootstrap-fs-xs: .75rem;
	--bootstrap-fs-sm: .875rem;   /* taille de base de l'interface */
	--bootstrap-fs-md: 1rem;
	--bootstrap-fs-lg: 1.25rem;
	--bootstrap-fs-xl: 1.75rem;

	/* Hauteurs - une seule échelle, pilotée par la densité */
	--bootstrap-control-h: calc(2rem * var(--bootstrap-density));     /* boutons, champs, select */
	--bootstrap-row-h: calc(2.25rem * var(--bootstrap-density));      /* lignes de tableau */
	--bootstrap-header-h: calc(2.5rem * var(--bootstrap-density));    /* en-têtes de panneau/carte */
	--bootstrap-nav-h: calc(3rem * var(--bootstrap-density));         /* barre de navigation */
	--bootstrap-space: calc(.5rem * var(--bootstrap-density));
	--bootstrap-radius-lg: calc(var(--bootstrap-radius) * 1.5);

	/* Accent : une couleur, ses usages dérivés */
	--bootstrap-accent-soft: color-mix(in srgb, var(--bootstrap-accent) 16%, transparent);   /* sélection, halo de focus */

	/* États - FIXES, jamais dérivés de l'accent : ils se distinguent entre eux, et un état porte
	   toujours son icône et son mot (jamais la couleur seule). L'accent ne signifie jamais un état. */
	--bootstrap-success: #22a06b;
	--bootstrap-warning: #e2b203;
	--bootstrap-danger: #e5484d;
	--bootstrap-info: #3e8fd8;
	--bootstrap-success-soft: color-mix(in srgb, var(--bootstrap-success) 16%, transparent);
	--bootstrap-warning-soft: color-mix(in srgb, var(--bootstrap-warning) 18%, transparent);
	--bootstrap-danger-soft: color-mix(in srgb, var(--bootstrap-danger) 16%, transparent);
	--bootstrap-info-soft: color-mix(in srgb, var(--bootstrap-info) 16%, transparent);

	/* Focus et mouvement - un seul anneau, une seule courbe, partout */
	--bootstrap-focus-ring: 0 0 0 1px var(--bootstrap-accent), 0 0 0 .25rem var(--bootstrap-accent-soft);
	--bootstrap-ease: 120ms cubic-bezier(.2, 0, 0, 1);

	/* Pont vers les couleurs d'état de BootstrapVendor (text-*, border-*, alert-*, *-subtle) */
	--bs-success: var(--bootstrap-success);
	--bs-warning: var(--bootstrap-warning);
	--bs-danger: var(--bootstrap-danger);
	--bs-info: var(--bootstrap-info);
	--bs-success-rgb: 34, 160, 107;
	--bs-warning-rgb: 226, 178, 3;
	--bs-danger-rgb: 229, 72, 77;
	--bs-info-rgb: 62, 143, 216;
	--bs-success-bg-subtle: var(--bootstrap-success-soft);
	--bs-warning-bg-subtle: var(--bootstrap-warning-soft);
	--bs-danger-bg-subtle: var(--bootstrap-danger-soft);
	--bs-info-bg-subtle: var(--bootstrap-info-soft);
	--bs-success-border-subtle: color-mix(in srgb, var(--bootstrap-success) 35%, transparent);
	--bs-warning-border-subtle: color-mix(in srgb, var(--bootstrap-warning) 35%, transparent);
	--bs-danger-border-subtle: color-mix(in srgb, var(--bootstrap-danger) 35%, transparent);
	--bs-info-border-subtle: color-mix(in srgb, var(--bootstrap-info) 35%, transparent);
	--bs-success-text-emphasis: var(--bootstrap-success-text);
	--bs-warning-text-emphasis: var(--bootstrap-warning-text);
	--bs-danger-text-emphasis: var(--bootstrap-danger-text);
	--bs-info-text-emphasis: var(--bootstrap-info-text);
	--bs-primary: var(--bootstrap-accent);   /* --bs-primary-rgb ne peut pas se déduire : text-primary/bg-primary restent bleus - utiliser les jetons */

	/* Pont vers BootstrapVendor - les composants Bootstrap natifs héritent tout seuls */
	--bs-body-font-family: var(--bootstrap-font);
	--bs-body-font-size: var(--bootstrap-fs-sm);
	--bs-font-monospace: var(--bootstrap-font-mono);
	--bs-border-radius: var(--bootstrap-radius);
	--bs-border-radius-sm: calc(var(--bootstrap-radius) * .66);
	--bs-border-radius-lg: var(--bootstrap-radius-lg);
	--bs-border-radius-xl: calc(var(--bootstrap-radius) * 2);
	--bs-border-radius-xxl: calc(var(--bootstrap-radius) * 3);

	scrollbar-color: var(--bootstrap-border-strong) transparent;   /* hérité par tout le document */
}

/* Surfaces : 3 niveaux + bordures + 3 niveaux de texte, calculés depuis teinte/chroma */
[data-bs-theme="dark"] {
	--bs-body-bg: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 7%);
	--bootstrap-surface: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 10%);
	--bs-secondary-bg: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 12.5%);
	--bs-tertiary-bg: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 16%);
	--bs-border-color: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 19%);
	--bootstrap-border-strong: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 26%);
	--bs-body-color: hsl(var(--bootstrap-surface-hue) 14% 91%);
	--bs-secondary-color: hsl(var(--bootstrap-surface-hue) 9% 66%);
	--bootstrap-text-3: hsl(var(--bootstrap-surface-hue) 7% 50%);
	--bootstrap-accent-text: color-mix(in srgb, var(--bootstrap-accent) 78%, #fff);   /* accent lisible comme TEXTE */
	--bootstrap-raised: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 13%);   /* menus, toasts, modales */
	--bootstrap-success-text: color-mix(in srgb, var(--bootstrap-success) 70%, #fff);
	--bootstrap-warning-text: color-mix(in srgb, var(--bootstrap-warning) 80%, #fff);
	--bootstrap-danger-text: color-mix(in srgb, var(--bootstrap-danger) 72%, #fff);
	--bootstrap-info-text: color-mix(in srgb, var(--bootstrap-info) 70%, #fff);
	--bootstrap-shadow: 0 .75rem 2rem rgb(0 0 0 / .5), 0 0 0 1px rgb(255 255 255 / .04);
	--bootstrap-backdrop: rgb(0 0 0 / .55);
}

[data-bs-theme="light"] {
	--bs-body-bg: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 96%);
	--bootstrap-surface: #fff;
	--bs-secondary-bg: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 98%);
	--bs-tertiary-bg: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 93.5%);
	--bs-border-color: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 89%);
	--bootstrap-border-strong: hsl(var(--bootstrap-surface-hue) var(--bootstrap-surface-chroma) 80%);
	--bs-body-color: hsl(var(--bootstrap-surface-hue) 20% 13%);
	--bs-secondary-color: hsl(var(--bootstrap-surface-hue) 10% 37%);
	--bootstrap-text-3: hsl(var(--bootstrap-surface-hue) 8% 50%);
	--bootstrap-accent-text: color-mix(in srgb, var(--bootstrap-accent) 70%, #000);
	--bootstrap-raised: #fff;
	--bootstrap-success-text: color-mix(in srgb, var(--bootstrap-success) 65%, #000);
	--bootstrap-warning-text: color-mix(in srgb, var(--bootstrap-warning) 50%, #000);
	--bootstrap-danger-text: color-mix(in srgb, var(--bootstrap-danger) 75%, #000);
	--bootstrap-info-text: color-mix(in srgb, var(--bootstrap-info) 70%, #000);
	--bootstrap-shadow: 0 .75rem 2rem rgb(20 30 45 / .14), 0 0 0 1px rgb(20 30 45 / .06);
	--bootstrap-backdrop: rgb(20 25 35 / .35);
}

/* ================================================================================================
	3. PONTS VERS LES MODULES
	Chaque module garde son défaut neutre (body {} dans <Module>.css). [data-bs-theme] est plus
	spécifique que body, même élément, même couche : le pont gagne sans dépendre de l'ordre.
	Volontairement NON pontés (restent neutres) : Menu (survol) et Tooltip - l'accent est réservé
	à la sélection, à l'action principale et au focus.
================================================================================================ */
[data-bs-theme] {
	/* Police - modules en contexte isolé (ag-Grid, TinyMCE...) */
	--bootstrap-body-font-family: var(--bootstrap-font);

	/* Modal - contour + fond d'en-tête : neutre, plus de bandeau d'accent */
	--bootstrap-modal-accent: var(--bs-border-color);

	/* FlexLayout */
	--bootstrap-flexlayout-bg-panel: var(--bootstrap-surface);
	--bootstrap-flexlayout-gutter-hover: var(--bootstrap-accent);
	--bootstrap-flexlayout-header-accent: var(--bs-secondary-bg);
	--bootstrap-flexlayout-header-accent-contrast: var(--bs-secondary-color);

	/* TreeView - élément courant en accent doux, plus de barre pleine */
	--bootstrap-treeview-bg: var(--bootstrap-surface);
	--bootstrap-treeview-accent: var(--bootstrap-accent);
	--bootstrap-treeview-accent-contrast: var(--bootstrap-accent-contrast);
	--bootstrap-treeview-current-bg: var(--bootstrap-accent-soft);
	--bootstrap-treeview-current-text: var(--bootstrap-accent-text);
	--bootstrap-treeview-twisty: var(--bs-secondary-color);

	/* IconPicker / EntryPicker / TagsPicker */
	--bootstrap-iconpicker-accent: var(--bootstrap-accent);
	--bootstrap-iconpicker-accent-contrast: var(--bootstrap-accent-contrast);
	--bootstrap-entrypicker-accent: var(--bootstrap-accent);
	--bootstrap-entrypicker-accent-contrast: var(--bootstrap-accent-contrast);
	--bootstrap-tagspicker-accent: var(--bootstrap-accent);
	--bootstrap-tagspicker-accent-contrast: var(--bootstrap-accent-contrast);

	/* SortableTable - indicateur de tri (texte) */
	--bootstrap-sortabletable-accent: var(--bootstrap-accent-text);

	/* ag-grid / ApexChart */
	--bootstrap-grid-accent: var(--bootstrap-accent);
	--bootstrap-grid-accent-contrast: var(--bootstrap-accent-contrast);
	--bootstrap-apexchart-accent: var(--bootstrap-accent);

	/* DevShed */
	--ds-accent: var(--bootstrap-accent);
	--ds-accent-contrast: var(--bootstrap-accent-contrast);
}

/* ================================================================================================
	4. COMPOSANTS BOOTSTRAPVENDOR (natifs, par leurs variables)
================================================================================================ */

/* ---- Boutons - 4 rôles :
        principal   .btn-primary       l'action attendue, un seul par zone
        secondaire  .btn-secondary     tout le reste, Annuler compris
        fantôme     .btn-ghost         outils, actions tertiaires (sans fond)
        irréversible .btn-ghost-danger le déclencheur (texte rouge) -> .btn-danger (plein) dans la confirmation
        + .btn-icon : carré, icône seule (toujours un aria-label) ---- */
.btn {
	--bs-btn-focus-box-shadow: var(--bootstrap-focus-ring);
	transition: color var(--bootstrap-ease), background-color var(--bootstrap-ease), border-color var(--bootstrap-ease), box-shadow var(--bootstrap-ease);
	--bs-btn-font-size: var(--bootstrap-fs-sm);
	--bs-btn-padding-x: .75rem;
	--bs-btn-padding-y: calc((var(--bootstrap-control-h) - 1.5em - 2px) / 2);
	--bs-btn-border-radius: var(--bootstrap-radius);
}
.btn-sm,
.btn-group-sm > .btn,
.input-group-sm > .btn {
	--bs-btn-font-size: var(--bootstrap-fs-xs);
	--bs-btn-padding-x: .5rem;
	--bs-btn-padding-y: calc((var(--bootstrap-control-h) * .8125 - 1.5em - 2px) / 2);
	--bs-btn-border-radius: calc(var(--bootstrap-radius) * .8);
}
.btn-lg,
.btn-group-lg > .btn,
.input-group-lg > .btn {
	--bs-btn-font-size: var(--bootstrap-fs-md);
	--bs-btn-padding-x: 1rem;
	--bs-btn-padding-y: calc((var(--bootstrap-control-h) * 1.25 - 1.5em - 2px) / 2);
	--bs-btn-border-radius: var(--bootstrap-radius-lg);
}
.btn-primary {
	--bs-btn-color: var(--bootstrap-accent-contrast);
	--bs-btn-bg: var(--bootstrap-accent);
	--bs-btn-border-color: var(--bootstrap-accent);
	--bs-btn-hover-color: var(--bootstrap-accent-contrast);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bootstrap-accent) 88%, var(--bs-emphasis-color));
	--bs-btn-hover-border-color: var(--bs-btn-hover-bg);
	--bs-btn-active-color: var(--bootstrap-accent-contrast);
	--bs-btn-active-bg: color-mix(in srgb, var(--bootstrap-accent) 78%, var(--bs-emphasis-color));
	--bs-btn-active-border-color: var(--bs-btn-active-bg);
	--bs-btn-disabled-color: var(--bootstrap-accent-contrast);
	--bs-btn-disabled-bg: var(--bootstrap-accent);
	--bs-btn-disabled-border-color: var(--bootstrap-accent);
	font-weight: 500;
}
.btn-secondary {
	--bs-btn-color: var(--bs-body-color);
	--bs-btn-bg: var(--bootstrap-surface);
	--bs-btn-border-color: var(--bootstrap-border-strong);
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-border-color: var(--bootstrap-border-strong);
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-bg: var(--bs-tertiary-bg);
	--bs-btn-active-border-color: var(--bootstrap-border-strong);
	--bs-btn-disabled-color: var(--bs-secondary-color);
	--bs-btn-disabled-bg: var(--bootstrap-surface);
	--bs-btn-disabled-border-color: var(--bs-border-color);
}
.btn-ghost {
	--bs-btn-color: var(--bs-secondary-color);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-bg: var(--bs-tertiary-bg);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-bg: var(--bs-tertiary-bg);
	--bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: var(--bs-secondary-color);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: transparent;
}
.btn-ghost-danger {
	--bs-btn-color: var(--bootstrap-danger-text);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--bootstrap-danger-text);
	--bs-btn-hover-bg: var(--bootstrap-danger-soft);
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--bootstrap-danger-text);
	--bs-btn-active-bg: var(--bootstrap-danger-soft);
	--bs-btn-active-border-color: transparent;
	--bs-btn-disabled-color: var(--bootstrap-danger-text);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: transparent;
}
.btn-danger {   /* plein : seulement le bouton qui CONFIRME une action irréversible */
	--bs-btn-color: #fff;
	--bs-btn-bg: color-mix(in srgb, var(--bootstrap-danger) 88%, #000);
	--bs-btn-border-color: var(--bs-btn-bg);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: color-mix(in srgb, var(--bootstrap-danger) 78%, #000);
	--bs-btn-hover-border-color: var(--bs-btn-hover-bg);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: color-mix(in srgb, var(--bootstrap-danger) 70%, #000);
	--bs-btn-active-border-color: var(--bs-btn-active-bg);
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--bs-btn-bg);
	--bs-btn-disabled-border-color: var(--bs-btn-bg);
	font-weight: 500;
}
.btn-warning {   /* un ÉTAT actif à signaler sur un bouton bascule (ex. Céduleur suspendu) - jamais une action */
	--bs-btn-color: var(--bootstrap-warning-text);
	--bs-btn-bg: var(--bootstrap-warning-soft);
	--bs-btn-border-color: color-mix(in srgb, var(--bootstrap-warning) 45%, transparent);
	--bs-btn-hover-color: var(--bootstrap-warning-text);
	--bs-btn-hover-bg: color-mix(in srgb, var(--bootstrap-warning) 26%, transparent);
	--bs-btn-hover-border-color: var(--bs-btn-border-color);
	--bs-btn-active-color: var(--bootstrap-warning-text);
	--bs-btn-active-bg: var(--bs-btn-hover-bg);
	--bs-btn-active-border-color: var(--bs-btn-border-color);
}
.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--bootstrap-control-h);
	--bs-btn-padding-x: 0;
}
.btn-icon.btn-sm { width: calc(var(--bootstrap-control-h) * .8125); }
.btn-icon.btn-lg { width: calc(var(--bootstrap-control-h) * 1.25); }

/* Groupe segmenté (choix exclusif court : P/M/G, Clair/Sombre) - .btn-group.bootstrap-segmented
   avec input.btn-check + label.btn */
.bootstrap-segmented {
	padding: 2px;
	gap: 2px;
	border-radius: var(--bootstrap-radius);
	background-color: var(--bs-tertiary-bg);
}
.bootstrap-segmented > .btn {
	--bs-btn-color: var(--bs-secondary-color);
	--bs-btn-bg: transparent;
	--bs-btn-border-color: transparent;
	--bs-btn-hover-color: var(--bs-body-color);
	--bs-btn-hover-bg: transparent;
	--bs-btn-hover-border-color: transparent;
	--bs-btn-active-color: var(--bs-body-color);
	--bs-btn-active-bg: var(--bootstrap-surface);
	--bs-btn-active-border-color: transparent;
	--bs-btn-padding-y: calc((var(--bootstrap-control-h) - 4px - 1.5em - 2px) / 2);
	border-radius: calc(var(--bootstrap-radius) - 2px) !important;
	font-weight: 500;
}
.bootstrap-segmented.btn-group-sm > .btn,
.bootstrap-segmented > .btn.btn-sm {
	--bs-btn-padding-y: calc((var(--bootstrap-control-h) * .8125 - 4px - 1.5em - 2px) / 2);
	--bs-btn-font-size: var(--bootstrap-fs-xs);
}
.bootstrap-segmented > .btn-check:checked + .btn {
	box-shadow: 0 1px 2px rgb(0 0 0 / .25);
}
.bootstrap-segmented > .btn-check:focus-visible + .btn {
	box-shadow: var(--bootstrap-focus-ring);
}

/* ---- Formulaires ----
   Les états de validation Bootstrap (.is-valid/.is-invalid, .was-validated) sont exclus de
   toute règle de couleur : sinon la couche core masquerait leur bordure/halo rouge ou vert. */
.form-control:not([type="file"]),
.form-select {
	padding-top: calc((var(--bootstrap-control-h) - 1.5em - 2px) / 2);
	padding-bottom: calc((var(--bootstrap-control-h) - 1.5em - 2px) / 2);
	padding-left: .625rem;
	font-size: var(--bootstrap-fs-sm);
	background-color: var(--bootstrap-surface);
	border-radius: var(--bootstrap-radius);
}
.form-control:not([type="file"]) { padding-right: .625rem; }
.form-control:not(.is-valid, .is-invalid, .was-validated *),
.form-select:not(.is-valid, .is-invalid, .was-validated *) {
	border-color: var(--bootstrap-border-strong);
}
.form-control-sm:not([type="file"]),
.form-select-sm,
.input-group-sm > .form-control:not([type="file"]),
.input-group-sm > .form-select,
.input-group-sm > .input-group-text {
	padding-top: calc((var(--bootstrap-control-h) * .8125 - 1.5em - 2px) / 2);
	padding-bottom: calc((var(--bootstrap-control-h) * .8125 - 1.5em - 2px) / 2);
	font-size: var(--bootstrap-fs-xs);
	border-radius: calc(var(--bootstrap-radius) * .8);
}
.form-control-lg:not([type="file"]),
.form-select-lg,
.input-group-lg > .form-control:not([type="file"]),
.input-group-lg > .form-select,
.input-group-lg > .input-group-text {
	padding-top: calc((var(--bootstrap-control-h) * 1.25 - 1.5em - 2px) / 2);
	padding-bottom: calc((var(--bootstrap-control-h) * 1.25 - 1.5em - 2px) / 2);
	font-size: var(--bootstrap-fs-md);
	border-radius: var(--bootstrap-radius-lg);
}
.form-control:hover:not(:focus, :disabled, .is-valid, .is-invalid, .was-validated *),
.form-select:hover:not(:focus, :disabled, .is-valid, .is-invalid, .was-validated *) {
	border-color: color-mix(in srgb, var(--bs-emphasis-color) 28%, var(--bootstrap-border-strong));
}
.form-control:focus:not(.is-valid, .is-invalid, .was-validated *),
.form-select:focus:not(.is-valid, .is-invalid, .was-validated *),
.form-check-input:focus:not(.is-valid, .is-invalid, .was-validated *) {
	border-color: var(--bootstrap-accent);
	box-shadow: 0 0 0 .25rem var(--bootstrap-accent-soft);
}
.form-control:disabled,
.form-select:disabled {
	background-color: var(--bs-tertiary-bg);
	color: var(--bootstrap-text-3);
}
.form-control,
.form-select {
	transition: border-color var(--bootstrap-ease), box-shadow var(--bootstrap-ease);
}
.invalid-feedback,
.form-control.is-invalid,
.form-select.is-invalid {
	--bs-form-invalid-color: var(--bootstrap-danger-text);
	--bs-form-invalid-border-color: var(--bootstrap-danger);
}
.form-check-input:checked:not(.is-valid, .is-invalid, .was-validated *) {
	background-color: var(--bootstrap-accent);
	border-color: var(--bootstrap-accent);
}
.input-group-text {
	padding-top: calc((var(--bootstrap-control-h) - 1.5em - 2px) / 2);
	padding-bottom: calc((var(--bootstrap-control-h) - 1.5em - 2px) / 2);
	padding-left: .625rem;
	padding-right: .625rem;
	font-size: var(--bootstrap-fs-sm);
	background-color: var(--bs-secondary-bg);
	border-color: var(--bootstrap-border-strong);
}
.form-label {
	font-weight: 500;
	color: var(--bs-body-color);
}
.form-label .required,
.form-label.required::after {   /* champ obligatoire : un astérisque discret, jamais un mot */
	color: var(--bootstrap-danger-text);
}
.form-label.required::after {
	content: " *";
}
.form-text { font-size: var(--bootstrap-fs-xs); }

/* ---- Badges - forme en pilule. Les couleurs restent celles de Bootstrap : préférer ses
        variantes douces natives (bg-success-subtle text-success-emphasis...) aux pleines. ---- */
.badge {
	--bs-badge-font-size: var(--bootstrap-fs-xs);
	--bs-badge-padding-x: .55em;
	--bs-badge-padding-y: .35em;
	--bs-badge-font-weight: 600;
	--bs-badge-border-radius: 999px;
}
.badge:not([class*="bg-"]) {   /* badge sans couleur (compteur d'onglet...) : neutre, jamais invisible */
	--bs-badge-color: var(--bs-secondary-color);
	background-color: var(--bs-tertiary-bg);
	--bs-badge-font-weight: 500;
}
/* Pastilles d'état, douces - un état, jamais une décoration (préférer à text-bg-*, plein) */
.badge.badge-accent  { --bs-badge-color: var(--bootstrap-accent-text);  background-color: var(--bootstrap-accent-soft); }
.badge.badge-success { --bs-badge-color: var(--bootstrap-success-text); background-color: var(--bootstrap-success-soft); }
.badge.badge-warning { --bs-badge-color: var(--bootstrap-warning-text); background-color: var(--bootstrap-warning-soft); }
.badge.badge-danger  { --bs-badge-color: var(--bootstrap-danger-text);  background-color: var(--bootstrap-danger-soft); }
.badge.badge-info    { --bs-badge-color: var(--bootstrap-info-text);    background-color: var(--bootstrap-info-soft); }
.badge[class*="badge-"] { --bs-badge-font-weight: 500; }
.badge-dot::before {   /* point d'état devant le mot : <span class="badge badge-success badge-dot">Actif</span> */
	content: "";
	display: inline-block;
	width: .5em;
	height: .5em;
	margin-right: .4em;
	border-radius: 50%;
	background-color: currentColor;
	vertical-align: .05em;
}

/* ---- Liens de contenu (sans classe) : couleur d'accent lisible - Bootstrap les calcule depuis
        --bs-link-color-rgb, impossible à déduire de l'accent ---- */
a:not([class]) { color: var(--bootstrap-accent-text); }

/* ---- Alertes en ligne - douces, par les variables *-subtle (pont plus haut) ---- */
.alert {
	--bs-alert-border-radius: var(--bootstrap-radius);
	--bs-alert-padding-y: .625rem;
	--bs-alert-padding-x: .875rem;
	font-size: var(--bootstrap-fs-sm);
}

/* ---- Card - neutre (plus de bandeau d'accent) ---- */
.card {
	--bs-card-bg: var(--bootstrap-surface);
	--bs-card-border-color: var(--bs-border-color);
	--bs-card-border-radius: var(--bootstrap-radius-lg);
	--bs-card-inner-border-radius: calc(var(--bootstrap-radius-lg) - 1px);
	--bs-card-cap-bg: transparent;
	--bs-card-cap-color: var(--bs-secondary-color);
	--bs-card-cap-padding-y: .625rem;
	--bs-card-cap-padding-x: 1rem;
}
.card-header,
.card-footer { border-color: var(--bs-border-color); }
.card-header {
	font-size: var(--bootstrap-fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
}

/* ---- Tableaux - variantes de couleur Bootstrap (table-dark...) laissées intactes ---- */
.table:not(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark) {
	--bs-table-bg: transparent;
	--bs-table-border-color: var(--bs-border-color);
	--bs-table-striped-bg: color-mix(in srgb, var(--bs-emphasis-color) 3%, transparent);
	--bs-table-hover-bg: var(--bs-tertiary-bg);
	--bs-table-active-bg: var(--bootstrap-accent-soft);
}
.table { font-size: var(--bootstrap-fs-sm); }
.table > :not(caption) > * > * { padding: calc((var(--bootstrap-row-h) - 1.5em - 1px) / 2) .75rem; }
.table-sm > :not(caption) > * > * { padding: .25rem .5rem; }
.table:not(.table-primary, .table-secondary, .table-success, .table-danger, .table-warning, .table-info, .table-light, .table-dark) > thead {
	--bs-table-bg: var(--bs-secondary-bg);
}
.table > thead th {
	font-size: var(--bootstrap-fs-xs);
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--bs-secondary-color);
	white-space: nowrap;
}

/* ---- Modal ---- */
.modal {
	--bs-modal-bg: var(--bootstrap-raised);
	--bs-modal-border-radius: calc(var(--bootstrap-radius) * 2);
	--bs-modal-inner-border-radius: calc(var(--bootstrap-radius) * 2 - 1px);
	--bs-modal-box-shadow: var(--bootstrap-shadow);
	--bs-modal-header-border-color: var(--bs-border-color);
	--bs-modal-footer-border-color: var(--bs-border-color);
}

/* ---- Dropdown (menus déroulants - y compris ceux du module Menu) ---- */
.dropdown-menu:not(.dropdown-menu-dark) {
	--bs-dropdown-bg: var(--bootstrap-raised);
	--bs-dropdown-border-color: var(--bootstrap-border-strong);
	--bs-dropdown-border-radius: var(--bootstrap-radius-lg);
	--bs-dropdown-inner-border-radius: calc(var(--bootstrap-radius-lg) - 1px);
	--bs-dropdown-box-shadow: var(--bootstrap-shadow);
	--bs-dropdown-font-size: var(--bootstrap-fs-sm);
	--bs-dropdown-padding-x: .25rem;
	--bs-dropdown-padding-y: .25rem;
	--bs-dropdown-item-padding-x: .75rem;
	--bs-dropdown-item-padding-y: .4375rem;
	--bs-dropdown-item-border-radius: var(--bootstrap-radius);
	--bs-dropdown-link-hover-bg: var(--bs-tertiary-bg);
	--bs-dropdown-link-active-color: var(--bootstrap-accent-text);
	--bs-dropdown-link-active-bg: var(--bootstrap-accent-soft);
	--bs-dropdown-divider-bg: var(--bs-border-color);
}

/* ---- List group ---- */
.list-group:not(.list-group-flush) { --bs-list-group-border-radius: var(--bootstrap-radius-lg); }
.list-group {
	--bs-list-group-bg: var(--bootstrap-surface);
	--bs-list-group-border-color: var(--bs-border-color);
	--bs-list-group-action-hover-bg: var(--bs-tertiary-bg);
	--bs-list-group-active-color: var(--bootstrap-accent-text);
	--bs-list-group-active-bg: var(--bootstrap-accent-soft);
	--bs-list-group-active-border-color: var(--bs-border-color);
}

/* ---- Typographie des boutons ---- */
.btn {
	font-family: var(--bootstrap-button-font);
	text-transform: var(--bootstrap-button-case);
}

/* ---- Étiquettes : en-têtes de colonne et de carte ---- */
.table > thead th,
.card-header {
	font-family: var(--bootstrap-label-font);
	text-transform: var(--bootstrap-label-case);
}

/* ================================================================================================
	5. MODULES CORE
	Habillage par-dessus la mécanique des <Module>.css (même couche - la spécificité tranche,
	d'où des sélecteurs au moins aussi précis que ceux du module).
================================================================================================ */

/* ---- Menu : trait d'accent sous l'item actif de la barre (remplace le soulignement de texte) ---- */
.bootstrap-menu .nav-link {
	font-family: var(--bootstrap-menu-font);
	text-transform: var(--bootstrap-menu-case);
}
.bootstrap-menu .navbar-nav > li > .nav-link { position: relative; }
.bootstrap-menu .nav-item .active { text-decoration: none; }

/* Page courante dans un sous-menu (cascade ou Offcanvas) : accent doux, comme l'élément
   courant de TreeView. Son ancêtre dans la barre reçoit le même trait que l'item actif
   (:has(), comme FlexLayout) - on voit toujours dans quelle branche on se trouve.
   Trait en ::before : ::after est le chevron Bootstrap d'un déclencheur (.dropdown-toggle).
   Jamais dans l'en-tête (Header) : badges et accent doux y disent déjà où l'on est. */
.bootstrap-menu .dropdown-item.active {
	background-color: var(--bootstrap-accent-soft);
	color: var(--bootstrap-accent-text);
	font-weight: 500;
}
.bootstrap-menu .dropdown-item.active:hover {
	background-color: color-mix(in srgb, var(--bootstrap-accent) 24%, transparent);
	color: var(--bootstrap-accent-text);
}
.bootstrap-menu .navbar-nav > li:has(.dropdown-menu .active) > .nav-link { color: var(--bs-body-color); }

.bootstrap-menu:not(.bootstrap-header *) .navbar-nav > li:has(.dropdown-menu .active) > .nav-link::before,
.bootstrap-menu:not(.bootstrap-header *) .navbar-nav > li > .nav-link.active::before {
	content: "";
	position: absolute;
	left: .75rem;
	right: .75rem;
	bottom: 0;
	height: var(--bootstrap-indicator);
	border-radius: var(--bootstrap-indicator);
	background: var(--bootstrap-accent);
}

/* Branche de la page courante, dans un sous-menu : ses ancêtres en gras (cascade et empilé) */
.bootstrap-menu .dropend:has(.active) > .dropdown-toggle,
.bootstrap-menu details:has(.active) > summary {
	font-weight: 600;
}

/* ---- Header : une barre en surface, badges de lieu, boutons de la page, avatar ---- */
.bootstrap-header {
	background-color: var(--bootstrap-surface);
	border-bottom: 1px solid var(--bs-border-color);
}

/* Marque = déclencheur du menu du site */
.bootstrap-header-site .navbar-nav > li > .bootstrap-menu-trigger {
	gap: .375rem;
	height: 2.25rem;
	padding: 0 .5rem;
	border-radius: var(--bootstrap-radius);
	color: var(--bs-body-color);
	font-family: var(--bootstrap-font-display);
	font-size: var(--bootstrap-fs-md);
	font-weight: 600;
}
.bootstrap-header-site .bootstrap-menu-trigger::after {
	color: var(--bootstrap-text-3);
}
.bootstrap-header .nav-item:hover {
	background-color: transparent;
}
.bootstrap-header-site .bootstrap-menu-trigger:hover,
.bootstrap-header-site .bootstrap-menu-trigger.show {
	background-color: var(--bs-tertiary-bg);
}

/* Où je suis : parents discrets, lieu courant affirmé */
.bootstrap-header-where {
	font-size: var(--bootstrap-fs-sm);
	color: var(--bootstrap-text-3);
}
.bootstrap-header-badge {
	color: var(--bs-secondary-color);
	background-color: color-mix(in srgb, var(--bs-emphasis-color) 5%, transparent);
}
.bootstrap-header-badge.bootstrap-header-here {
	color: var(--bs-body-color);
	background-color: color-mix(in srgb, var(--bs-emphasis-color) 9%, transparent);
	font-weight: 600;
}

/* SEPARATOR : petite barre accent qui encadre la zone de l'App (MENU_APP / MENU_APP_CONTEXT).
   L'en-tête porte au plus 4 touches d'accent (marque, 2 barres, lien actif) - n'en ajouter aucune. */
.bootstrap-header-sep {
	background: var(--bootstrap-accent);
}

/* MENU_APP et MENU_APP_CONTEXT : boutons carrés avec glyphe */
.bootstrap-header-links .navbar-nav,
.bootstrap-header-context .navbar-nav {
	gap: .125rem;
}
.bootstrap-header-links .navbar-nav > li > .nav-link,
.bootstrap-header-context .navbar-nav > li > .nav-link {
	height: 2rem;
	padding: 0 .75rem;
	border-radius: var(--bootstrap-radius);
	color: var(--bs-secondary-color);
	font-size: var(--bootstrap-fs-sm);
}
.bootstrap-header-links .navbar-nav > li > .nav-link [class^="bi-"],
.bootstrap-header-links .navbar-nav > li > .nav-link [class*=" bi-"],
.bootstrap-header-context .navbar-nav > li > .nav-link [class^="bi-"],
.bootstrap-header-context .navbar-nav > li > .nav-link [class*=" bi-"] {
	font-size: 1.0625em;
}
.bootstrap-header-links .navbar-nav > li > .nav-link:hover,
.bootstrap-header-links .navbar-nav > li > .nav-link.show,
.bootstrap-header-context .navbar-nav > li > .nav-link:hover,
.bootstrap-header-context .navbar-nav > li > .nav-link.show {
	color: var(--bs-body-color);
	background-color: var(--bs-tertiary-bg);
}
.bootstrap-header-links .navbar-nav > li > .nav-link.active,
.bootstrap-header-links .navbar-nav > li:has(.dropdown-menu .active) > .nav-link {
	color: var(--bootstrap-accent-text);
	background-color: var(--bootstrap-accent-soft);
	font-weight: 500;
}

/* Compte : avatar rond, sans chevron */
.bootstrap-header-account .navbar-nav > li > .bootstrap-menu-trigger {
	padding: 0 .25rem;
}
.bootstrap-header-account .bootstrap-menu-trigger::after {
	display: none;
}
.bootstrap-header-account .nav-link {
	color: var(--bs-secondary-color);
	font-size: var(--bootstrap-fs-sm);
}
.bootstrap-avatar {
	background-color: var(--bootstrap-accent-soft);
	color: var(--bootstrap-accent-text);
}
.bootstrap-header-account .bootstrap-menu-trigger:hover .bootstrap-avatar,
.bootstrap-header-account .bootstrap-menu-trigger.show .bootstrap-avatar {
	box-shadow: 0 0 0 2px var(--bootstrap-accent-soft);
}

/* Menu du site sur tactile (Offcanvas) : surface, et l'en-tête reste visible au-dessus */
.bootstrap-header .bootstrap-menu-offcanvas {
	--bootstrap-menu-background: var(--bootstrap-surface);
}

@media (max-width: 767.98px) {
	.bootstrap-header-links,
	.bootstrap-header-context {
		padding: .25rem 0;
	}
	/* filet de la 2e ligne (MENU_APP + MENU_APP_CONTEXT) : l'accent, plus discret */
	.bootstrap-header:has(> .bootstrap-header-links, > .bootstrap-header-context)::after {
		border-top-color: color-mix(in srgb, var(--bootstrap-accent) 70%, transparent);
	}
}

/* ---- Notify : une surface élevée, la couleur seulement dans la pastille et la barre ---- */
.bootstrap-notify {
	--bs-toast-bg: var(--bootstrap-raised);
	--bs-toast-color: var(--bs-body-color);
	--bs-toast-border-color: var(--bs-border-color);
	--bs-toast-border-radius: var(--bootstrap-radius-lg);
	--bs-toast-box-shadow: var(--bootstrap-shadow);
	--bs-toast-font-size: var(--bootstrap-fs-sm);
	background-color: var(--bootstrap-raised);
	color: var(--bs-body-color);
}
.bootstrap-notify-pill { border-radius: 999px; }
.bootstrap-notify-card .bootstrap-notify-message { color: var(--bs-secondary-color); }
.bootstrap-notify-meta,
.bootstrap-notify-summary { color: var(--bootstrap-text-3); }
.bootstrap-notify-success .bootstrap-notify-icon { background-color: var(--bootstrap-success-soft); color: var(--bootstrap-success-text); }
.bootstrap-notify-info .bootstrap-notify-icon    { background-color: var(--bootstrap-info-soft);    color: var(--bootstrap-info-text); }
.bootstrap-notify-warning .bootstrap-notify-icon { background-color: var(--bootstrap-warning-soft); color: var(--bootstrap-warning-text); }
.bootstrap-notify-error .bootstrap-notify-icon   { background-color: var(--bootstrap-danger-soft);  color: var(--bootstrap-danger-text); }
.bootstrap-notify-success .bootstrap-notify-progress { background-color: var(--bootstrap-success); }
.bootstrap-notify-info .bootstrap-notify-progress    { background-color: var(--bootstrap-info); }
.bootstrap-notify-warning .bootstrap-notify-progress { background-color: var(--bootstrap-warning); }
.bootstrap-notify-error .bootstrap-notify-progress   { background-color: var(--bootstrap-danger); }
.bootstrap-notify-copy-done { color: var(--bootstrap-success-text) !important; }

/* ---- Confirmation (notify.confirm) ---- */
.bootstrap-confirm-icon { background-color: var(--bs-tertiary-bg); color: var(--bs-secondary-color); }
.bootstrap-confirm-danger .bootstrap-confirm-icon { background-color: var(--bootstrap-danger-soft); color: var(--bootstrap-danger-text); }
.bootstrap-confirm-text { color: var(--bs-secondary-color); }

/* ---- Pieds : modale et panneau FlexLayout, un seul dessin ----
        Même vocabulaire côté JS (buttons / buttonsLeft / footer) - même rendu ici. */
.bootstrap-modal .modal-body { padding: 1.25rem; }
.bootstrap-modal .modal-footer,
.bootstrap-flexlayout-pane-footer { padding: .75rem 1.25rem; gap: .5rem; border-top: 1px solid var(--bs-border-color); }
.bootstrap-modal .modal-footer > *,
.bootstrap-flexlayout-pane-footer > * { margin: 0; }
.bootstrap-flexlayout-pane-footer .bootstrap-footer-left,
.bootstrap-modal .bootstrap-modal-footer-left { gap: .5rem; }
.modal-backdrop { --bs-backdrop-bg: #000; --bs-backdrop-opacity: .5; }

/* ---- TabsView horizontal (nav-tabs) : onglets plats, trait d'accent sous l'actif.
        Le mode vertical (nav-pills) garde la pastille Bootstrap, en accent doux. ---- */
.bootstrap-tabsview-nav.nav-tabs {
	--bs-nav-link-color: var(--bs-secondary-color);
	--bs-nav-link-hover-color: var(--bs-body-color);
	--bs-nav-link-font-size: var(--bootstrap-fs-sm);
	--bs-nav-link-padding-x: .875rem;
	--bs-nav-tabs-border-radius: 0;
	--bs-nav-tabs-link-hover-border-color: transparent;
	--bs-nav-tabs-link-active-color: var(--bs-body-color);
	--bs-nav-tabs-link-active-bg: transparent;
	--bs-nav-tabs-link-active-border-color: transparent;
	gap: .25rem;
}
.bootstrap-tabsview-nav.nav-tabs .nav-link { position: relative; }
.bootstrap-tabsview-nav.nav-tabs .nav-link.active { font-weight: 500; }
.bootstrap-tabsview-nav.nav-tabs .nav-link.active::after {
	content: "";
	position: absolute;
	left: .875rem;
	right: .875rem;
	bottom: -1px;
	height: var(--bootstrap-indicator);
	border-radius: var(--bootstrap-indicator);
	background: var(--bootstrap-accent);
}
.bootstrap-tabsview-item-removable .nav-link.active::after { right: 1.875rem; }
.bootstrap-tabsview-nav.nav-tabs .nav-link.active .badge:not([class*="bg-"]) {
	--bs-badge-color: var(--bootstrap-accent-text);
	background-color: var(--bootstrap-accent-soft);
}
.bootstrap-tabsview-nav.nav-pills {
	--bs-nav-pills-link-active-color: var(--bootstrap-accent-text);
	--bs-nav-pills-link-active-bg: var(--bootstrap-accent-soft);
	--bs-nav-link-color: var(--bs-secondary-color);
	--bs-nav-link-hover-color: var(--bs-body-color);
	--bs-nav-link-font-size: var(--bootstrap-fs-sm);
	--bs-nav-pills-border-radius: var(--bootstrap-radius);
}

/* ---- FlexLayout : en-têtes de panneau en étiquette ---- */
.bootstrap-flexlayout-pane-header {
	font-family: var(--bootstrap-label-font);
	text-transform: var(--bootstrap-label-case);
	font-weight: 600;
	letter-spacing: .04em;
}

/* ================================================================================================
	BRIQUES DES PAGES DE GESTION - mêmes classes partout (Core et Produit) :
	.bootstrap-selectlist (liste de sélection), .bootstrap-state (états), .bootstrap-form (formulaire)
================================================================================================ */

/* ---- Liste de sélection ----
   <div class="bootstrap-selectlist">
     <div class="bootstrap-selectlist-group">Comptes de service</div>
     <a class="bootstrap-selectlist-item active" href="#">
       <span class="bootstrap-avatar">JL</span> | <span class="bootstrap-selectlist-icon"><i class="bi-…"></i></span>
       <span class="bootstrap-selectlist-text"><span class="bootstrap-selectlist-title">…</span><span class="bootstrap-selectlist-sub">…</span></span>
       <span class="badge">Désactivé</span>
     </a>
   </div>
   .active = la ligne choisie (fond accent pâle + trait accent) ; .is-muted = atténuée (désactivé...) */
.bootstrap-selectlist {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: .375rem;
}
.bootstrap-selectlist-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: .625rem;
	min-height: 2.75rem;
	padding: .375rem .625rem;
	border-radius: var(--bootstrap-radius);
	color: inherit;
	text-decoration: none;
	cursor: pointer;
}
.bootstrap-selectlist-item:hover { background-color: var(--bs-tertiary-bg); color: inherit; }
.bootstrap-selectlist-item:focus-visible { outline: none; box-shadow: var(--bootstrap-focus-ring); }
.bootstrap-selectlist-item.active { background-color: var(--bootstrap-accent-soft); }
.bootstrap-selectlist-item.active .bootstrap-selectlist-title { color: var(--bootstrap-accent-text); }
.bootstrap-selectlist-item.active::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5rem;
	bottom: .5rem;
	width: 3px;
	border-radius: 2px;
	background: var(--bootstrap-accent);
}
.bootstrap-selectlist-item.is-muted .bootstrap-selectlist-title,
.bootstrap-selectlist-item.is-muted .bootstrap-avatar,
.bootstrap-selectlist-item.is-muted .bootstrap-selectlist-icon { opacity: .55; }
.bootstrap-selectlist-item > .bootstrap-avatar { width: 1.75rem; height: 1.75rem; font-size: .6875rem; flex: none; }
.bootstrap-selectlist-icon {
	flex: none;
	width: 1.75rem;
	height: 1.75rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: calc(var(--bootstrap-radius) * 1.3);
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
}
.bootstrap-selectlist-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.bootstrap-selectlist-title { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bootstrap-selectlist-sub { font-size: var(--bootstrap-fs-xs); color: var(--bootstrap-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bootstrap-selectlist-group {
	padding: .625rem .625rem .25rem;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bootstrap-text-3);
}
@media (pointer: coarse) {
	.bootstrap-selectlist-item { min-height: 3.25rem; }
}

/* ---- États : vide, chargement, aucun résultat, erreur - une seule forme ----
   <div class="bootstrap-state [bootstrap-state-danger|-warning]">
     <span class="bootstrap-state-icon"><i class="bi-…"></i></span>
     <h2 class="bootstrap-state-title">…</h2> <p class="bootstrap-state-text">…</p> [action]
   </div>
   Chargement : <div class="bootstrap-skeleton"><span></span><span></span><span></span></div> */
.bootstrap-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: 2.5rem 1.5rem;
	text-align: center;
}
.bootstrap-state-icon {
	width: 2.75rem;
	height: 2.75rem;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	background: var(--bs-tertiary-bg);
	color: var(--bs-secondary-color);
}
.bootstrap-state-danger .bootstrap-state-icon { background: var(--bootstrap-danger-soft); color: var(--bootstrap-danger-text); }
.bootstrap-state-warning .bootstrap-state-icon { background: var(--bootstrap-warning-soft); color: var(--bootstrap-warning-text); }
.bootstrap-state-title { margin: 0; font-size: var(--bootstrap-fs-md); font-weight: 600; }
.bootstrap-state-text { margin: 0; max-width: 24rem; color: var(--bs-secondary-color); }
.bootstrap-state > .btn { margin-top: .25rem; }

.bootstrap-skeleton { display: flex; flex-direction: column; gap: .625rem; padding: 1rem; }
.bootstrap-skeleton > span {
	display: block;
	height: .625rem;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--bs-tertiary-bg), color-mix(in srgb, var(--bs-emphasis-color) 8%, transparent), var(--bs-tertiary-bg));
	background-size: 200% 100%;
	animation: bootstrap-skeleton 1.4s ease-in-out infinite;
}
.bootstrap-skeleton > span:nth-child(3n+1) { width: 45%; }
.bootstrap-skeleton > span:nth-child(3n+2) { width: 85%; }
.bootstrap-skeleton > span:nth-child(3n) { width: 70%; }
@keyframes bootstrap-skeleton { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .bootstrap-skeleton > span { animation: none; } }

/* ---- Formulaire : sections, libellé à gauche, aide/erreur sous le champ ----
   <form class="bootstrap-form">
     <section class="bootstrap-form-section">
       <div class="bootstrap-form-section-title"><h3>Identité</h3><span>Une phrase d'aide.</span></div>
       <div class="bootstrap-form-row">
         <label class="bootstrap-form-label" for="x">Identifiant</label>
         <div class="bootstrap-form-field"><input id="x" class="form-control" required><div class="form-text">…</div></div>
       </div>
     </section>
   </form>
   Un champ required ajoute l'astérisque au libellé tout seul. Étroit (conteneur < 36rem) :
   le libellé passe au-dessus du champ - container query, donc vrai aussi dans un panneau étroit. */
.bootstrap-form { container-type: inline-size; }
.bootstrap-form-section {
	display: flex;
	flex-direction: column;
	gap: .875rem;
	padding: 1.25rem 1.5rem;
}
.bootstrap-form-section + .bootstrap-form-section { border-top: 1px solid var(--bs-border-color); }
.bootstrap-form-section-title { display: flex; flex-direction: column; gap: .125rem; margin-bottom: .25rem; }
.bootstrap-form-section-title > h3 { margin: 0; font-size: var(--bootstrap-fs-sm); font-weight: 600; }
.bootstrap-form-section-title > span { font-size: var(--bootstrap-fs-xs); color: var(--bootstrap-text-3); }
.bootstrap-form-row {
	display: grid;
	grid-template-columns: 11rem minmax(0, 1fr);
	gap: .375rem 1.25rem;
	align-items: start;
}
.bootstrap-form-label {
	margin: 0;
	padding-top: calc((var(--bootstrap-control-h) - 1.5em) / 2);
	color: var(--bs-secondary-color);
}
.bootstrap-form-row:has(:required) > .bootstrap-form-label::after { content: " *"; color: var(--bootstrap-danger-text); }
.bootstrap-form-field { min-width: 0; max-width: 32rem; display: flex; flex-direction: column; gap: .25rem; }
.bootstrap-form-field > .form-text { margin: 0; }
@container (max-width: 36rem) {
	.bootstrap-form-section { padding: 1rem; }
	.bootstrap-form-row { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
	.bootstrap-form-label { padding-top: 0; }
}

/* ---- Écrans du Core : connexion et accès refusé (core/assets/Login.html, AccessDenied.html) ----
   La marque du site (copie de .bootstrap-brand) au-dessus d'une carte centrée. */
.bootstrap-login {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	padding: 1.5rem 1rem;
}
.bootstrap-login-brand .bootstrap-brand { gap: .625rem; font-size: var(--bootstrap-fs-lg); font-weight: 600; }
.bootstrap-login-brand .bootstrap-brand-mark { height: 2.25rem; }
.bootstrap-login-brand .bootstrap-brand-wordmark { height: 1.5rem; }
.bootstrap-login-card {
	width: 100%;
	max-width: 24rem;
	padding: 1.75rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	background: var(--bootstrap-surface);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bootstrap-radius-lg);
	box-shadow: var(--bootstrap-shadow);
}
.bootstrap-login-head { display: flex; flex-direction: column; gap: .25rem; }
.bootstrap-login-title { margin: 0; font-size: var(--bootstrap-fs-lg); font-weight: 600; }
.bootstrap-login-text { margin: 0; color: var(--bs-secondary-color); }
.bootstrap-login-field { display: flex; flex-direction: column; gap: .375rem; margin: 0; }
.bootstrap-login-field > .form-label { margin: 0; }
.bootstrap-login-card > .alert { margin: 0; display: flex; align-items: flex-start; gap: .5rem; }
.bootstrap-login-card > .alert > i { flex: none; margin-top: .125rem; }
.bootstrap-login-card > .form-check { margin: 0; align-self: flex-start; }

.bootstrap-access-denied { min-height: 100%; }
.bootstrap-maintenance { min-height: 100vh; min-height: 100dvh; }
.bootstrap-access-denied-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .25rem; }

/* ---- À propos (menu du compte, Helpers.js) ---- */
.bootstrap-about-modal .modal-dialog { max-width: 24rem; }
.bootstrap-about { display: flex; flex-direction: column; align-items: center; gap: .375rem; text-align: center; }
.bootstrap-about .bootstrap-brand { gap: .625rem; font-size: var(--bootstrap-fs-lg); font-weight: 600; margin-bottom: .25rem; }
.bootstrap-about .bootstrap-brand-mark { height: 3rem; }
.bootstrap-about .bootstrap-brand-wordmark { height: 1.5rem; }
.bootstrap-about-copyright { color: var(--bs-secondary-color); font-size: var(--bootstrap-fs-sm); }
.bootstrap-about-facts {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: .375rem 1rem;
	width: 100%;
	margin: .875rem 0 0;
	padding-top: .75rem;
	border-top: 1px solid var(--bs-border-color);
	text-align: left;
	font-size: var(--bootstrap-fs-sm);
}
.bootstrap-about-facts > dt { font-weight: 400; color: var(--bs-secondary-color); }
.bootstrap-about-facts > dd { margin: 0; overflow-wrap: anywhere; }

}