/* Couche CSS « core » (voir Theme::buildCoreHeaders) : gagne sur BootstrapVendor, perd contre tout CSS sans couche (Theme.css, pages Produit). */
@layer core {
/*!
 * IconPicker.css — habillage du widget seulement.
 * Le rendu des glyphes eux-mêmes (bi-x / im-x) vient de Glyphs.css, chargé
 * séparément et globalement par le thème.
 */
/* body (pas :root) : data-bs-theme vit sur <body>, pas sur <html> - voir FlexLayout.css
   pour l'explication complète. */
body {
	--bootstrap-iconpicker-bg: var(--bs-body-bg);
	--bootstrap-iconpicker-bg-raised: var(--bs-tertiary-bg);
	--bootstrap-iconpicker-border: var(--bs-border-color);
	--bootstrap-iconpicker-text: var(--bs-body-color);
	--bootstrap-iconpicker-text-dim: var(--bs-secondary-color);
	--bootstrap-iconpicker-accent: var(--bs-primary);
	--bootstrap-iconpicker-accent-contrast: #ffffff; /* texte quand --bootstrap-iconpicker-accent sert de fond (bouton famille actif) */
}

.bootstrap-iconpicker-root {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	color: var(--bootstrap-iconpicker-text);
}

.bootstrap-iconpicker-toolbar { display: flex; gap: .5rem; }
.bootstrap-iconpicker-search {
	flex: 1 1 auto;
	background: var(--bootstrap-iconpicker-bg);
	border: 1px solid var(--bootstrap-iconpicker-border);
	color: var(--bootstrap-iconpicker-text);
	font-size: var(--bootstrap-fs-sm, .875rem);
	padding: .5rem .75rem;
	border-radius: var(--bs-border-radius);
}
.bootstrap-iconpicker-search:focus { outline: 1px solid var(--bootstrap-iconpicker-accent); outline-offset: 1px; }

.bootstrap-iconpicker-family-bar { display: flex; gap: .375rem; flex-wrap: wrap; }
.bootstrap-iconpicker-family-btn {
	background: var(--bootstrap-iconpicker-bg);
	border: 1px solid var(--bootstrap-iconpicker-border);
	color: var(--bootstrap-iconpicker-text-dim);
	font-size: var(--bootstrap-fs-xs, .75rem);
	padding: .3125rem .625rem;
	border-radius: 100px;
	cursor: pointer;
}
.bootstrap-iconpicker-family-btn.active { color: var(--bootstrap-iconpicker-accent-contrast); background: var(--bootstrap-iconpicker-accent); border-color: var(--bootstrap-iconpicker-accent); font-weight: 600; }

.bootstrap-iconpicker-category {
	background: var(--bootstrap-iconpicker-bg);
	border: 1px solid var(--bootstrap-iconpicker-border);
	color: var(--bootstrap-iconpicker-text);
	font-size: var(--bootstrap-fs-xs, .75rem);
	padding: .375rem .5rem;
	border-radius: var(--bs-border-radius);
	max-width: 13.75rem;
}
.bootstrap-iconpicker-category:focus { outline: 1px solid var(--bootstrap-iconpicker-accent); outline-offset: 1px; }

.bootstrap-iconpicker-count { font-size: var(--bootstrap-fs-xs, .75rem); color: var(--bootstrap-iconpicker-text-dim); margin: 0; }

.bootstrap-iconpicker-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
	gap: .375rem;
	max-height: 26.25rem;
	overflow: auto;
	padding-right: .25rem;
}
.bootstrap-iconpicker-item {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 1; /* carré quelle que soit la largeur de colonne (grid 1fr) */
	background: var(--bootstrap-iconpicker-bg-raised);
	border: 1px solid var(--bootstrap-iconpicker-border);
	border-radius: var(--bs-border-radius);
	padding: .25rem;
	color: var(--bootstrap-iconpicker-text-dim);
	cursor: pointer;
	font-family: inherit;
}
.bootstrap-iconpicker-item:hover { border-color: var(--bootstrap-iconpicker-accent); color: var(--bootstrap-iconpicker-text); }
/* Le nom du glyphe n'est plus affiché ici : il vit dans le tooltip natif
   (title, posé par IconPicker.js) déclenché au survol - voir Notes DevShed. */
.bootstrap-iconpicker-item i { font-size: 1.5rem; color: var(--bootstrap-iconpicker-text); }
.bootstrap-iconpicker-error { color: var(--bs-danger); font-size: var(--bootstrap-fs-xs, .75rem); }

/* ---- Mode modal ---- */
/* Aucun backdrop/header/close maison : IconPicker.pick() s'appuie sur le module Core
   Modal (javascript/modules/Modal/), qui fournit déjà backdrop, header et bouton de
   fermeture via Bootstrap 5. Seule la largeur du widget
   à l'intérieur du .modal-body reste spécifique à IconPicker. */
.modal-body .bootstrap-iconpicker-root { width: 100%; }

@media (max-width: 480px) {
	.bootstrap-iconpicker-grid { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); }
}
}