/*!
 * IDD Design — Legacy bridge
 *
 * Mappe TOUTES les classes boutons legacy des plugins/templates custom
 * vers les styles officiels `.idd-btn` du design system.
 *
 * Permet une migration UI ZERO-MARKUP-CHANGE : le HTML peut garder ses classes
 * historiques (.pkbe-btn, .pb-geo-btn, .pkb-pv3-btn, etc.), elles obtiennent
 * automatiquement le bon look.
 *
 * Quand le markup aura été 100% migré vers `.idd-btn`, ce fichier pourra être
 * supprimé. Pour l'instant il garantit l'uniformité visuelle immédiate.
 *
 * Chargé après components.css dans idd-design-bootstrap.php.
 *
 * Conventions :
 *   - Sélecteurs : on liste TOUS les noms legacy connus du codebase (audit 2026-05-20)
 *   - Aucune valeur en dur — uniquement var(--idd-*) cohérent avec components.css
 *   - Pas de !important : la spécificité multi-sélecteurs suffit
 *
 * @package IDDDesign
 * @since 1.1.0
 */

/* --------------------------------------------------------
 * BASE — tous les boutons legacy héritent du look .idd-btn
 * -------------------------------------------------------- */

.pkbe-btn,
.pkb-pv3-btn,
.pb-geo-btn,
.pb-auth-btn,
.pkb-submit-btn,
.ec-ads-btn,
.pbc-btn,
.jmc-btn,
.pkb-footer-btn,
.pkbh-v2-btn,
.pkdx-btn,
.idd-msg-btn,
.idd-pokescan-btn,
.pkb-wl-cta-btn,
.pkb-fav-btn,
.pbcs-beta__btn,
.pbcs-bigcta__btn,
.pbcs-hero__btn,
.pb-dowm-btn,
.pbpush-banner__btn,
.pbpush-optin__btn,
.pkb-share-btn,
.pkb-copy-btn,
.pkbc-view-btn,
.ici-btn-primary,
.ici-btn-ghost {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 22px;
	border-radius: var(--idd-radius-md, 12px);
	border: 1px solid transparent;
	font-family: var(--idd-font-family-base, inherit);
	font-size: var(--idd-font-size-base, 16px);
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	text-decoration: none;
	transition:
		transform var(--idd-transition-fast, 120ms ease),
		box-shadow var(--idd-transition-fast, 120ms ease),
		background-color var(--idd-transition-fast, 120ms ease);
}

.pkbe-btn:hover,
.pkb-pv3-btn:hover,
.pb-geo-btn:hover,
.pb-auth-btn:hover,
.pkb-submit-btn:hover,
.ec-ads-btn:hover,
.pbc-btn:hover,
.jmc-btn:hover,
.pkb-footer-btn:hover,
.pkbh-v2-btn:hover,
.pkdx-btn:hover,
.idd-msg-btn:hover,
.idd-pokescan-btn:hover,
.pkb-wl-cta-btn:hover,
.pkb-fav-btn:hover,
.pbcs-beta__btn:hover,
.pbcs-bigcta__btn:hover,
.pbcs-hero__btn:hover,
.pb-dowm-btn:hover,
.pbpush-banner__btn:hover,
.pbpush-optin__btn:hover,
.pkb-share-btn:hover,
.pkb-copy-btn:hover,
.pkbc-view-btn:hover,
.ici-btn-primary:hover,
.ici-btn-ghost:hover {
	transform: translateY(-2px);
}

/* --------------------------------------------------------
 * VARIANT PRIMARY — fond gradient rouge brand, texte blanc
 * -------------------------------------------------------- */

.pkbe-btn--primary,
.pkb-pv3-btn--primary,
.pb-geo-btn--primary,
.pb-auth-btn--primary,
.pkb-submit-btn,
.ec-ads-btn--primary,
.pbc-btn--primary,
.jmc-btn-primary,
.jmc-btn--primary,
.pkb-footer-btn--primary,
.pkbh-v2-btn-primary,
.pkbh-v2-btn--primary,
.pkdx-btn--primary,
.idd-msg-btn--primary,
.idd-pokescan-btn--primary,
.pkb-wl-cta-btn,
.pbcs-beta__btn--primary,
.pbcs-bigcta__btn,
.pbcs-hero__btn,
.pb-dowm-btn,
.pbpush-banner__btn--allow,
.pbpush-optin__btn--primary,
.ici-btn-primary {
	background: var(--idd-gradient-primary, linear-gradient(135deg, #fe0201, #f97316));
	color: #fff;
	border-color: transparent;
	box-shadow: var(--idd-shadow-glow, 0 8px 30px rgba(254,2,1,.35));
}
.pkbe-btn--primary:hover,
.pkb-pv3-btn--primary:hover,
.pb-geo-btn--primary:hover,
.pb-auth-btn--primary:hover,
.pkb-submit-btn:hover,
.ec-ads-btn--primary:hover,
.pbc-btn--primary:hover,
.jmc-btn-primary:hover,
.jmc-btn--primary:hover,
.pkb-footer-btn--primary:hover,
.pkbh-v2-btn-primary:hover,
.pkbh-v2-btn--primary:hover,
.pkdx-btn--primary:hover,
.idd-msg-btn--primary:hover,
.idd-pokescan-btn--primary:hover,
.pkb-wl-cta-btn:hover,
.pbcs-beta__btn--primary:hover,
.pbcs-bigcta__btn:hover,
.pbcs-hero__btn:hover,
.pb-dowm-btn:hover,
.pbpush-banner__btn--allow:hover,
.pbpush-optin__btn--primary:hover,
.ici-btn-primary:hover {
	box-shadow: 0 12px 40px rgba(254,2,1,.5);
}

/* --------------------------------------------------------
 * VARIANT GHOST — fond transparent, bordure subtile
 * -------------------------------------------------------- */

.pkbe-btn--ghost,
.pkb-pv3-btn--ghost,
.pb-geo-btn--ghost,
.pb-auth-btn--ghost,
.ec-ads-btn--ghost,
.pbc-btn--ghost,
.jmc-btn-ghost,
.jmc-btn--ghost,
.pkb-footer-btn--ghost,
.pkbh-v2-btn-ghost,
.idd-msg-btn--ghost,
.pkb-fav-btn--ghost,
.ici-btn-ghost {
	background: var(--idd-color-bg-alt, rgba(15,23,42,.04));
	border-color: var(--idd-color-border, rgba(15,23,42,.10));
	color: var(--idd-color-text, currentColor);
	box-shadow: none;
}
.pkbe-btn--ghost:hover,
.pkb-pv3-btn--ghost:hover,
.pb-geo-btn--ghost:hover,
.pb-auth-btn--ghost:hover,
.ec-ads-btn--ghost:hover,
.pbc-btn--ghost:hover,
.jmc-btn-ghost:hover,
.jmc-btn--ghost:hover,
.pkb-footer-btn--ghost:hover,
.pkbh-v2-btn-ghost:hover,
.idd-msg-btn--ghost:hover,
.pkb-fav-btn--ghost:hover,
.ici-btn-ghost:hover {
	background: color-mix(in srgb, var(--idd-color-text, #1f2937) 8%, transparent);
}

/* --------------------------------------------------------
 * VARIANT DANGER / DESTRUCTIVE — fond rouge plein
 * -------------------------------------------------------- */

.pkbe-btn--danger,
.idd-msg-btn--danger,
.pkb-fav-btn--danger,
.pbpush-banner__btn--deny {
	background: var(--idd-semantic-destructive, #dc2626);
	color: #fff;
	border-color: var(--idd-semantic-destructive, #dc2626);
	box-shadow: none;
}
.pkbe-btn--danger:hover,
.idd-msg-btn--danger:hover,
.pkb-fav-btn--danger:hover,
.pbpush-banner__btn--deny:hover {
	background: var(--idd-color-primary, #fe0201);
	border-color: var(--idd-color-primary, #fe0201);
}

/* --------------------------------------------------------
 * VARIANT SUCCESS — fond vert
 * -------------------------------------------------------- */

.pkbe-btn--success {
	background: var(--idd-color-success, #16a34a);
	color: #fff;
	border-color: var(--idd-color-success, #16a34a);
	box-shadow: none;
}
.pkbe-btn--success:hover {
	background: color-mix(in srgb, var(--idd-color-success, #16a34a) 85%, #000);
	border-color: color-mix(in srgb, var(--idd-color-success, #16a34a) 85%, #000);
}

/* --------------------------------------------------------
 * VARIANT OUTLINE — bordure marquée, fond transparent
 * -------------------------------------------------------- */

.pkbe-btn--outline,
.pb-geo-btn--outline,
.idd-msg-btn--outline,
.pkbh-v2-btn-outline {
	background: transparent;
	color: var(--idd-color-text, currentColor);
	border-color: var(--idd-color-border-strong, currentColor);
	box-shadow: none;
}
.pkbe-btn--outline:hover,
.pb-geo-btn--outline:hover,
.idd-msg-btn--outline:hover,
.pkbh-v2-btn-outline:hover {
	background: var(--idd-color-bg-alt, rgba(0,0,0,.04));
}

/* --------------------------------------------------------
 * VARIANT SECONDARY — fond clair + bordure primaire
 * -------------------------------------------------------- */

.idd-pokescan-btn--secondary {
	background: var(--idd-color-bg-alt, #f8fafc);
	color: var(--idd-color-primary, #fe0201);
	border-color: var(--idd-color-primary, #fe0201);
	box-shadow: none;
}
.idd-pokescan-btn--secondary:hover {
	background: var(--idd-color-primary, #fe0201);
	color: #fff;
}

/* --------------------------------------------------------
 * VARIANT SMALL — réduction padding/font
 * -------------------------------------------------------- */

.pkbe-btn--sm,
.pkb-pv3-btn--sm,
.ec-ads-btn--small,
.jmc-btn-sm,
.jmc-btn--sm,
.pkb-pv3-mobile-bar__btn {
	padding: 8px 14px !important;
	font-size: var(--idd-font-size-small, 13px) !important;
}

/* --------------------------------------------------------
 * VARIANT LARGE — augmentation padding/font
 * -------------------------------------------------------- */

.pkbe-btn--lg,
.jmc-btn-lg,
.jmc-btn--lg,
.pbcs-beta__btn--big {
	padding: 16px 28px !important;
	font-size: 18px !important;
}

/* --------------------------------------------------------
 * VARIANT NAV — icon-only carrousel/pagination
 * -------------------------------------------------------- */

.pkdx-carousel-btn,
.pkb-carousel-btn,
.pkbh-v2-carousel-btn {
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: var(--idd-radius-pill, 999px);
	background: var(--idd-color-bg-alt, rgba(15,23,42,.06));
	color: var(--idd-color-text, currentColor);
	border-color: transparent;
	box-shadow: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.pkdx-carousel-btn:hover,
.pkb-carousel-btn:hover,
.pkbh-v2-carousel-btn:hover {
	background: color-mix(in srgb, var(--idd-color-text, #1f2937) 10%, transparent);
	transform: none;
}

/* --------------------------------------------------------
 * ICON BUTTONS (mobile header — déjà OK via .idd-bell-btn,
 * mais on aligne pour le générique .pb-mobile-icon-btn)
 * -------------------------------------------------------- */

.pb-mobile-icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--idd-radius-pill, 999px);
	background: var(--idd-color-bg-alt, rgba(15,23,42,.06));
	color: var(--idd-color-primary, currentColor);
	border: 0;
	cursor: pointer;
	transition: background-color var(--idd-transition-fast, 120ms ease);
}
.pb-mobile-icon-btn:hover {
	background: color-mix(in srgb, var(--idd-color-text, #1f2937) 10%, transparent);
}

/* --------------------------------------------------------
 * FOCUS-VISIBLE universel sur toutes les classes legacy
 * -------------------------------------------------------- */

.pkbe-btn:focus-visible,
.pkb-pv3-btn:focus-visible,
.pb-geo-btn:focus-visible,
.pb-auth-btn:focus-visible,
.pkb-submit-btn:focus-visible,
.ec-ads-btn:focus-visible,
.pbc-btn:focus-visible,
.jmc-btn:focus-visible,
.pkb-footer-btn:focus-visible,
.pkbh-v2-btn:focus-visible,
.pkdx-btn:focus-visible,
.idd-msg-btn:focus-visible,
.idd-pokescan-btn:focus-visible,
.pkb-wl-cta-btn:focus-visible,
.pkb-fav-btn:focus-visible,
.pkdx-carousel-btn:focus-visible,
.pkb-carousel-btn:focus-visible,
.pkbh-v2-carousel-btn:focus-visible {
	outline: 2px solid var(--idd-color-primary, #fe0201);
	outline-offset: 2px;
}

/* --------------------------------------------------------
 * DISABLED — état universel
 * -------------------------------------------------------- */

.pkbe-btn:disabled, .pkbe-btn[aria-disabled="true"],
.pkb-pv3-btn:disabled, .pkb-pv3-btn[aria-disabled="true"],
.pb-geo-btn:disabled, .pb-geo-btn[aria-disabled="true"],
.pb-auth-btn:disabled, .pb-auth-btn[aria-disabled="true"],
.pkb-submit-btn:disabled, .pkb-submit-btn[aria-disabled="true"],
.ec-ads-btn:disabled, .ec-ads-btn[aria-disabled="true"],
.pbc-btn:disabled, .pbc-btn[aria-disabled="true"],
.jmc-btn:disabled, .jmc-btn[aria-disabled="true"],
.idd-msg-btn:disabled, .idd-msg-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

/* ========================================================
 * CONVENTION TOOLBARS + CANVAS — étape uniformisation 2026-05-20
 *
 * Z-index canoniques :
 *   20 = banner (push, alerte cookies)
 *   25 = mobile bar (action bar fixe bas mobile)
 *   30 = toolbar sticky (action bar fixe haut desktop)
 *   35 = header
 *   40 = canvas overlay (voile sombre)
 *   41 = canvas drawer
 *   50 = modal
 *   60 = tooltip
 *
 * Blur backdrop : --idd-blur-md (12px) partout
 * Animation canvas : .3s var(--idd-ease-canvas) cubic-bezier(.22,1,.36,1)
 *
 * Normalise les éléments existants pour qu'ils suivent la convention
 * sans toucher à leur structure HTML.
 * ======================================================== */

/* ----- BANNERS (push notifs, cookies, etc.) z-index 20 ----- */
/* On NE force PAS background/blur ici — laissé au plugin pour ne pas affecter l'état caché */

.pbpush-banner,
.idd-cookie-banner,
.cookie-notice {
	z-index: var(--idd-z-banner, 20);
}

/* ----- MOBILE BARS (action bar fixe bas mobile) z-index 25 ----- */

.pkbc-mobile-bar,
.pb-catalog-mobile-bar,
.pkb-pv3-mobile-bar,
.pkb-fav-mobile-bar,
.pkb-floating-actions-mobile,
.eure-toolbar--mobile-bar {
	z-index: var(--idd-z-mobile-bar, 25);
	/* Safe-area-inset pour iPhone notch (a11y mobile WCAG) */
	padding-bottom: max(8px, env(safe-area-inset-bottom));
}

/* ----- TOOLBARS sticky desktop (sticky top sous header) z-index 30 ----- */
/* On NE force PAS backdrop-filter ici — laissé au plugin pour ne pas créer d'effets latéraux */

.pkbc-toolbar,
.pkbc-toolbar--desktop,
.pbc-toolbar,
.pkb-sticky-bar,
.pkb-floating-actions-desktop,
.eure-toolbar {
	z-index: var(--idd-z-toolbar, 30);
}

/* ----- HEADER -----
   ⚠️ Règle DÉSACTIVÉE 2026-05-21 : forçait z-index à 35 (--idd-z-header),
   ce qui faisait passer le header SOUS plusieurs overlays/drawers ayant
   un z-index entre 36 et 8999. Le header.css du thème définit z-index: 9000
   en dur, valeur qui s'aligne avec l'historique des fixes/sticky du projet.
   Si on veut harmoniser via tokens un jour, il faudra remonter --idd-z-header
   à 9000 dans la palette ET vérifier tous les overlays/drawers.

.pb-site-header {
	z-index: var(--idd-z-header, 35);
}
*/

/* ----- CANVAS OVERLAY (voile sombre sous drawer) z-index 40 -----
 * IMPORTANT : on NE force PAS background/blur/transition ici.
 * Le theme et chaque plugin gèrent leur propre état (visibility:hidden, opacity:0 etc.).
 * Forcer un background ferait apparaître un voile même quand l'overlay est fermé. */

.pb-canvas-overlay,
.pkbc-sheet-overlay,
.pbc-filters-overlay,
.pkbe-action-overlay,
.eure-canvas-overlay {
	z-index: var(--idd-z-canvas-overlay, 40);
}

/* ----- CANVAS DRAWER (panneau latéral) z-index 41
 * IMPORTANT : on ne touche QUE au z-index ici. La position (left/right/translateX)
 * est laissée au CSS du plugin pour ne PAS casser les composants qui peuvent être
 * inline en desktop (ex: .pbc-filters en sidebar inline desktop, drawer mobile).
 * Les classes EurêCard officielles (.eure-canvas--left/--right) ont leur position dédiée.
 * ----- */

.pb-canvas,
.pkbc-sheet,
.eure-canvas {
	z-index: var(--idd-z-canvas, 41);
}

/* .pbc-filters : z-index 41 SEULEMENT en mobile (drawer fixed).
   En desktop, c'est une sidebar inline dans une grid — pas de z-index pour rester sous le flow */
@media (max-width: 1023px) {
	.pbc-filters {
		z-index: var(--idd-z-canvas, 41);
	}
}

/* Transition seulement quand l'élément EST un drawer fixed (pas en sidebar inline) */
.pb-canvas,
.eure-canvas {
	transition: transform .3s var(--idd-ease-canvas, cubic-bezier(.22,1,.36,1));
}

/* ----- CLASSES EurêCard officielles uniquement (nouveau code) ----- */

.eure-canvas--left {
	left: 0;
	transform: translateX(-100%);
}
.eure-canvas-overlay.is-open .eure-canvas--left {
	transform: translateX(0);
}

.eure-canvas--right {
	right: 0;
	left: auto;
	transform: translateX(100%);
}
.eure-canvas-overlay.is-open .eure-canvas--right {
	transform: translateX(0);
}

/* ----- HEADER canvas legacy (.pb-canvas-left / .pb-canvas-right) ----- */
/* Comportement déjà géré par header.css — on ne force que la transition douce */

.pb-canvas-overlay[aria-hidden="false"] .pb-canvas-left,
.pb-canvas-overlay[aria-hidden="false"] .pb-canvas-right {
	transition: transform .3s var(--idd-ease-canvas, cubic-bezier(.22,1,.36,1));
}

/* ----- MODALS centrées z-index 50 ----- */

.pkbe-action-overlay > * {
	z-index: var(--idd-z-modal, 50);
}

/* ----- TOOLTIPS z-index 60 ----- */

.idd-tooltip,
[role="tooltip"] {
	z-index: var(--idd-z-tooltip, 60);
}

/* ========================================================
 * BREAKPOINT UNIFIÉ — 1024px (standard Tailwind/Bootstrap)
 *
 * Convention sticky top desktop / fixe bottom mobile :
 *   < 1024px : toolbar bascule en mobile-bar fixed bottom
 *   >= 1024px : toolbar sticky top
 * ======================================================== */

@media (max-width: 1023px) {

	/* Toolbar /cote/ devient mobile bar bas (style .pb-catalog-mobile-bar de /cartes-pokemon/)
	 * IMPORTANT : pas d'overflow sur .pbc-toolbar elle-même (sinon le champ search :focus-within
	 * en absolute au-dessus se fait clipper). L'overflow va sur .pbc-toolbar__sorts uniquement. */
	.pbc-toolbar {
		position: fixed !important;
		bottom: 0;
		left: 0;
		right: 0;
		top: auto !important;
		margin: 0 !important;
		border-radius: 0 !important;
		border-top: 1px solid var(--idd-color-border, rgba(15,23,42,.10));
		border-bottom: 0;
		padding: 8px max(8px, env(safe-area-inset-left)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-right));
		gap: 8px;
		z-index: var(--idd-z-mobile-bar, 25);
		background: var(--idd-color-bg, #fff);
		backdrop-filter: blur(var(--idd-blur-md, 12px));
		-webkit-backdrop-filter: blur(var(--idd-blur-md, 12px));
		box-shadow: 0 -4px 12px rgba(15,23,42,.08);
		flex-wrap: nowrap;
		overflow: visible;
		align-items: center;
	}

	/* Chips de tri scrollables horizontalement SUR LE WRAPPER, pas la toolbar entière */
	.pbc-toolbar__sorts {
		flex: 1 1 auto;
		min-width: 0;
		display: flex;
		gap: 6px;
		overflow-x: auto;
		overflow-y: visible;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	.pbc-toolbar__sorts::-webkit-scrollbar { display: none; }

	/* Compense la hauteur de la toolbar bottom — évite que le contenu soit caché derrière */
	.pbc-page .pbc-content,
	.pbc-page--cote .pbc-main {
		padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
	}
}

/* ========================================================
 * /cote/ — Toolbar mobile : chips + bouton filtre compact + search compact
 * Demande user 2026-05-20 : icône loupe seule au repos / champ flottant au focus,
 * chips style red-icon-grey-bg / actif red-fill-white, bouton filtre 44×44 icône seule + badge overlay
 * ======================================================== */

/* ---- Wrapper du bouton "Suivre" wishlist OFFICIEL sur les cartes /cote/.
 * Le bouton lui-même est rendu par le shortcode [ajouter_favori] (.btn-favori-ajax)
 * avec ses propres styles — on ne touche pas. On wrappe juste pour positionnement. ---- */

.pbc-card__follow-wrap {
	margin-top: 10px;
}

/* ---- Bouton X "fermer filtres" (.pbc-filters__close) — style header (X rouge sur fond gris clair, carré arrondi 10px) ---- */

.pbc-filters__close {
	background: var(--idd-color-bg-alt, rgba(15,23,42,.06));
	color: var(--idd-color-primary, #fe0201);
	border-radius: 10px;
	width: 36px;
	height: 36px;
	box-shadow: none;
}
.pbc-filters__close:hover {
	background: var(--idd-color-primary, #fe0201);
	color: #fff;
	transform: none;
}

/* ---- CHIPS de tri (.pbc-chip) — actif = rouge plein + texte/icône blancs ---- */

.pbc-chip {
	background: var(--idd-color-bg-alt, rgba(15,23,42,.06));
	color: var(--idd-color-text, #1f2937);
	border: 1px solid transparent;
	flex-shrink: 0;
}
.pbc-chip svg {
	color: var(--idd-color-primary, #fe0201);
}
.pbc-chip.is-active,
.pbc-chip[aria-selected="true"] {
	background: var(--idd-color-primary, #fe0201);
	color: #fff;
	border-color: var(--idd-color-primary, #fe0201);
}
.pbc-chip.is-active svg,
.pbc-chip[aria-selected="true"] svg {
	color: #fff;
}

/* ---- Bouton filtre compact (44×44, juste l'icône + badge overlay) — style header (10px radius)
 * Visible UNIQUEMENT sur mobile (<1024px) — sur desktop la sidebar filters est inline.
 * On NE force PAS le display ici : le plugin gère display:none desktop / inline-flex mobile.
 * On override juste le STYLE (taille / radius / fond / couleur) pour cohérence avec le header.
 * ---- */

.pbc-toolbar__filters-btn {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: 10px;
	background: var(--idd-color-bg-alt, rgba(15,23,42,.06));
	color: var(--idd-color-primary, #fe0201);
	border: 0;
	position: relative;
	flex-shrink: 0;
	align-items: center;
	justify-content: center;
}
.pbc-toolbar__filters-btn:hover {
	background: color-mix(in srgb, var(--idd-color-text, #1f2937) 10%, transparent);
}
/* Texte "Filtres" déjà retiré du PHP — masque toute span résiduelle non-count par sécurité */
.pbc-toolbar__filters-btn > span:not(.pbc-toolbar__filters-count) {
	display: none;
}
/* Badge count en overlay top-right (style unifié .idd-notification-badge) */
.pbc-toolbar__filters-count {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	background: var(--idd-color-primary, #fe0201);
	color: #fff;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 2px solid var(--idd-color-bg, #fff);
	line-height: 1;
}

/* ---- Mobile : champ recherche compact (icône loupe seule) + slide-up COLLÉ à la toolbar pleine largeur ---- */

@media (max-width: 1023px) {

	/* État compact : juste l'icône loupe dans un carré 44×44, comme un bouton du header */
	.pbc-toolbar .pbc-search {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		position: relative;
		border-radius: 10px;
		background: var(--idd-color-bg-alt, rgba(15,23,42,.06));
		overflow: visible;
	}

	.pbc-toolbar .pbc-search__icon {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		color: var(--idd-color-primary, #fe0201);
		pointer-events: none;
		width: 20px;
		height: 20px;
		z-index: 2;
	}

	/* Input remplit le 44×44 mais transparent — capte le clic pour focus */
	.pbc-toolbar .pbc-search__input {
		width: 44px;
		height: 44px;
		padding: 0;
		background: transparent;
		border: 0;
		font-size: 0;
		color: var(--idd-color-text, #1f2937);
		cursor: pointer;
		border-radius: 10px;
	}
	.pbc-toolbar .pbc-search__input::placeholder {
		color: transparent;
		font-size: 0;
	}

	/* Bouton X (clear) : MASQUÉ tant qu'on est en mode compact (sinon superposé à la loupe) */
	.pbc-toolbar .pbc-search:not(:focus-within) .pbc-search__clear {
		display: none !important;
	}

	/* État focus : le wrapper sort du flex, devient un panneau pleine largeur COLLÉ à la toolbar.
	 * - bottom: 100% → collé au sommet de la toolbar (zéro gap, surge depuis derrière)
	 * - left:0 right:0 → pleine largeur écran
	 * - z-index 24 → JUSTE EN DESSOUS de la toolbar (25) : visuel "sort de derrière la toolbar"
	 * - border-radius 0 → coins droits pour le coller-à-toolbar
	 * - pas d'ombre par-dessus (la toolbar a déjà la sienne) */
	.pbc-toolbar .pbc-search:focus-within {
		position: absolute;
		bottom: 100%;
		left: 0;
		right: 0;
		width: 100%;
		max-width: none;
		height: 56px;
		background: var(--idd-color-bg, #fff);
		border: 0;
		border-top: 1px solid var(--idd-color-border, rgba(15,23,42,.10));
		border-bottom: 1px solid var(--idd-color-border, rgba(15,23,42,.10));
		border-radius: 0;
		padding: 0;
		display: flex;
		align-items: center;
		z-index: 24;
		box-shadow: 0 -2px 8px rgba(15,23,42,.06);
	}
	.pbc-toolbar .pbc-search:focus-within .pbc-search__icon {
		left: 20px;
		transform: translateY(-50%);
		top: 50%;
		width: 22px;
		height: 22px;
	}
	.pbc-toolbar .pbc-search:focus-within .pbc-search__input {
		width: 100%;
		height: 100%;
		padding: 0 56px 0 52px;
		background: transparent;
		font-size: 16px;
		cursor: text;
		border-radius: 0;
	}
	.pbc-toolbar .pbc-search:focus-within .pbc-search__input::placeholder {
		color: var(--idd-color-text-muted, #64748b);
		font-size: 14px;
	}
	/* X visible quand focus, qu'il soit hidden ou non — couvre le cas champ vide pour fermer */
	.pbc-toolbar .pbc-search:focus-within .pbc-search__clear {
		display: inline-flex !important;
		position: absolute;
		right: 16px;
		top: 50%;
		transform: translateY(-50%);
		z-index: 3;
		width: 32px;
		height: 32px;
		align-items: center;
		justify-content: center;
		background: var(--idd-color-bg-alt, rgba(15,23,42,.06));
		color: var(--idd-color-text, #1f2937);
		border: 0;
		border-radius: 8px;
		cursor: pointer;
		font-size: 18px;
		line-height: 1;
		font-weight: 700;
	}
	.pbc-toolbar .pbc-search:focus-within .pbc-search__clear:hover {
		background: var(--idd-color-primary, #fe0201);
		color: #fff;
	}
}



/* ═══════════════════════════════════════════════════════════════════════════
 * EXTENSIONS BRIDGE — 2026-05-21
 * Ajout des préfixes button non encore couverts pour gagner +40 mappings :
 *   • .pks-btn*     (Pokescan)
 *   • .idd-abo-btn* (Abonnement)
 *   • .msa-btn*     (Social Auth Hub)
 *   • .mml-btn      (legacy, faible volume)
 *   • .ecm-segmented__btn (agenda)
 *   • .pkb-seo-btn* (SEO cockpit)
 *
 * Toutes ces classes héritent désormais du look .idd-btn et donc des tokens
 * --idd-color-* centraux pilotables depuis /wp-admin/admin.php?page=idd-design.
 * ═══════════════════════════════════════════════════════════════════════════ */

/* Base look — alignement sur la définition .idd-btn (components.css ligne 83) */
.pks-btn,
.idd-abo-btn,
.msa-btn,
.msa-nav-btn,
.mml-btn,
.ecm-segmented__btn,
.pkb-seo-btn,
.pbm-period-btn,
.pkb-edit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--idd-radius-md, 12px);
    border: 1px solid transparent;
    font-family: var(--idd-font-family-base, inherit);
    font-size: var(--idd-font-size-base, 16px);
    font-weight: 700;
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition:
        transform var(--idd-transition-fast, 120ms ease),
        box-shadow var(--idd-transition-fast, 120ms ease),
        background-color var(--idd-transition-fast, 120ms ease);
}

.pks-btn:hover,
.idd-abo-btn:hover,
.msa-btn:hover,
.msa-nav-btn:hover,
.mml-btn:hover,
.ecm-segmented__btn:hover,
.pkb-seo-btn:hover,
.pbm-period-btn:hover,
.pkb-edit-btn:hover {
    transform: translateY(-2px);
}

/* Primary — gradient brand */
.pks-btn--primary,
.idd-abo-btn--primary,
.msa-btn--primary,
.pkb-seo-btn--primary {
    background: var(--idd-gradient-primary, linear-gradient(135deg, #fe0201 0%, #d40000 100%));
    color: #fff;
    border-color: var(--idd-color-primary-hover, #d40000);
    box-shadow: 0 4px 12px rgba(254, 2, 1, 0.30);
}

.pks-btn--primary:hover,
.idd-abo-btn--primary:hover,
.msa-btn--primary:hover,
.pkb-seo-btn--primary:hover {
    box-shadow: 0 8px 18px rgba(254, 2, 1, 0.45);
}

/* Ghost — fond blanc + bordure */
.pks-btn--ghost,
.idd-abo-btn--ghost,
.msa-btn--ghost {
    background: var(--idd-color-bg, #fff);
    color: var(--idd-color-text, #1f2937);
    border-color: var(--idd-color-border, rgba(0, 0, 0, 0.12));
}

.pks-btn--ghost:hover,
.idd-abo-btn--ghost:hover,
.msa-btn--ghost:hover {
    border-color: var(--idd-color-primary, #fe0201);
    color: var(--idd-color-primary, #fe0201);
}

/* Sizes */
.pks-btn--sm,
.idd-abo-btn--sm,
.msa-btn--sm {
    padding: 8px 14px;
    font-size: var(--idd-font-size-small, 13px);
    min-height: 36px;
}

.pks-btn--lg,
.idd-abo-btn--lg,
.msa-btn--lg {
    padding: 16px 28px;
    font-size: var(--idd-font-size-md, 18px);
    min-height: 52px;
}

/* Success — vert */
.pks-btn--success,
.idd-abo-btn--success,
.msa-btn--success {
    background: var(--idd-color-success, #16a34a);
    color: #fff;
    border-color: var(--idd-color-success, #16a34a);
}

/* Danger / destructive */
.pks-btn--danger,
.idd-abo-btn--danger,
.idd-abo-btn--destructive,
.msa-btn--danger {
    background: var(--idd-color-danger, #d40000);
    color: #fff;
    border-color: var(--idd-color-danger, #d40000);
}