/* =========================================================
   PokéBoard — Header
   Fichier : /assets/css/header.css
   Dépend de : variables.css (--pkb-*)
========================================================= */

/* =========================================================
   ADMIN BAR — compatibilité (ne pas se faire recouvrir)
   Quand un user est connecté, WP ajoute body.admin-bar et une barre
   de 32px (desktop) / 46px (mobile <= 782px). Tous les sticky/fixed
   alignés au top doivent se décaler de cette hauteur.
========================================================= */

:root {
	--pb-admin-bar-h: 0px;
}

body.admin-bar {
	--pb-admin-bar-h: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--pb-admin-bar-h: 46px;
	}
}

/* =========================================================
   BASE HEADER
========================================================= */

.pb-site-header {
	position: sticky;
	top: var(--pb-admin-bar-h, 0);
	z-index: 9000;
	height: var(--pkb-header-height);
	background:
		linear-gradient(
			180deg,
			var(--pkb-surface-glass-strong) 0%,
			rgba(255, 255, 255, .92) 100%
		);
	backdrop-filter: blur(18px);
	-webkit-backdrop-filter: blur(18px);
	border-bottom: 1px solid var(--pkb-border-soft);
	box-shadow: var(--pkb-shadow-xs);
	transition:
		transform var(--pkb-transition-slow),
		box-shadow var(--pkb-transition);
	will-change: transform;
}

/* Barre rouge signature en haut */
.pb-site-header::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(
		90deg,
		var(--pkb-primary) 0%,
		var(--pkb-primary-hover) 50%,
		var(--pkb-yellow) 100%
	);
	pointer-events: none;
}

.pb-site-header.is-scrolled {
	box-shadow: var(--pkb-shadow-sm);
}

.pb-site-header.is-hidden {
	transform: translateY(-100%);
}

/* =========================================================
   INNER — même container que les pages
========================================================= */

.pb-header-inner {
	display: flex;
	align-items: center;
	gap: var(--pkb-gap-md);
	height: 100%;
	width: min(var(--pkb-container), 100%);
	margin-inline: auto;
	padding-inline: var(--pkb-container-padding);
}

/* =========================================================
   BURGER MOBILE (gauche)
========================================================= */

.pb-mobile-left {
	display: none;
	flex-shrink: 0;
}

.pb-mobile-icon-btn {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pkb-border);
	border-radius: var(--pkb-radius-sm);
	background: var(--pkb-surface);
	color: var(--pkb-ink);
	cursor: pointer;
	flex-shrink: 0;
	transition:
		background var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-mobile-icon-btn:hover {
	background: var(--pkb-primary-soft);
	border-color: var(--pkb-primary-border);
	color: var(--pkb-primary);
	transform: translateY(-1px);
}

/* Burger menu mobile : icône 3 barres horizontales en rouge signature */
.pb-mobile-left .pb-mobile-icon-btn[data-pb-open="menu"] {
	color: var(--pkb-primary);
	border-color: var(--pkb-primary-border);
}
.pb-mobile-left .pb-mobile-icon-btn[data-pb-open="menu"]:hover,
.pb-mobile-left .pb-mobile-icon-btn[data-pb-open="menu"]:focus-visible {
	background: var(--pkb-primary);
	color: #fff;
	border-color: var(--pkb-primary);
}

/* =========================================================
   BRAND / LOGO
========================================================= */

.pb-brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: var(--pkb-ink);
	flex-shrink: 0;
	min-width: 0;
}

.pb-brand-logo {
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	filter: none !important;
	border-radius: 0 !important;
	overflow: visible !important;
	transition: transform var(--pkb-transition-fast);
}

.pb-brand-logo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	filter: none !important;
	mix-blend-mode: normal !important;
}

.pb-brand::before,
.pb-brand::after,
.pb-brand-logo::before,
.pb-brand-logo::after {
	content: none !important;
	display: none !important;
}

.pb-brand:hover .pb-brand-logo {
	transform: scale(1.05);
}

@media (min-width: 901px) {
	.pb-brand-logo {
		width: 56px;
		height: 56px;
	}
}

@media (min-width: 1280px) {
	.pb-brand-logo {
		width: 62px;
		height: 62px;
	}
}

/* =========================================================
   BARRE DE RECHERCHE DESKTOP
========================================================= */

.pb-header-search-wrap {
	flex: 1 1 0;
	min-width: 0;
	max-width: 500px;
	position: relative;
}

.pb-global-search {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto auto;
	align-items: center;
	height: var(--pkb-input-height);
	border-radius: var(--pkb-radius-pill);
	background: var(--pkb-surface);
	border: 1.5px solid var(--pkb-border);
	transition:
		border-color var(--pkb-transition-fast),
		box-shadow var(--pkb-transition-fast);
	overflow: visible;
}

.pb-global-search:focus-within {
	border-color: var(--pkb-primary-border);
	box-shadow: 0 0 0 3px var(--pkb-primary-ring);
}

/* Neutralise tout le styling natif du navigateur sur l'input search */
.pb-search-input,
input[type="search"].pb-search-input {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 0;
	padding: 0 14px;
	border: 0 !important;
	margin: 0;
	background: transparent;
	font-size: 14px;
	font-weight: 600;
	color: var(--pkb-ink);
	outline: none !important;
	box-shadow: none !important;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

.pb-search-input::-webkit-search-decoration,
.pb-search-input::-webkit-search-cancel-button,
.pb-search-input::-webkit-search-results-button,
.pb-search-input::-webkit-search-results-decoration {
	display: none;
}

.pb-search-input::placeholder {
	color: var(--pkb-text-muted);
	font-weight: 500;
}

.pb-search-clear {
	display: none;
	align-items: center;
	justify-content: center;
	width: 24px !important;
	height: 24px !important;
	min-width: 24px;
	min-height: 24px;
	max-width: 24px;
	max-height: 24px;
	aspect-ratio: 1 / 1;
	padding: 0;
	border: 0;
	border-radius: 50% !important;
	background: var(--pkb-border-soft);
	color: var(--pkb-muted);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	flex-shrink: 0;
	align-self: center;
	transition:
		background var(--pkb-transition-fast),
		color var(--pkb-transition-fast);
}

.pb-search-clear.is-visible {
	display: flex;
}

.pb-search-clear:hover {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
}

.pb-search-submit {
	display: grid;
	place-items: center;
	width: 44px;
	height: 100%;
	padding: 0 12px 0 6px;
	border: 0;
	background: transparent;
	color: var(--pkb-primary);
	cursor: pointer;
	flex-shrink: 0;
	transition: color var(--pkb-transition-fast), transform var(--pkb-transition-fast);
}

.pb-search-submit:hover {
	color: var(--pkb-primary-hover);
	transform: scale(1.12);
}

.pb-search-submit svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}

/* Panneau résultats dropdown */

.pb-header-search-panel {
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	right: 0;
	z-index: 9999;
	border-radius: var(--pkb-radius-xl);
	background:
		linear-gradient(
			180deg,
			var(--pkb-surface-glass-strong) 0%,
			rgba(255, 255, 255, .98) 100%
		),
		radial-gradient(circle at 20% 0%, rgba(254,2,1, .04), transparent 50%);
	border: 1px solid var(--pkb-border);
	box-shadow: var(--pkb-shadow-lg);
	backdrop-filter: blur(16px);
	-webkit-backdrop-filter: blur(16px);
	overflow: hidden;
}

.pb-header-search-status {
	padding: 14px 16px 0;
	font-size: var(--pkb-font-size-xs);
	font-weight: 700;
	color: var(--pkb-muted);
	letter-spacing: .01em;
}

.pb-header-search-results {
	padding: 8px;
	display: flex;
	flex-direction: column;
	max-height: 380px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* ── Lignes carte dans les suggestions ── */

.pkb-card-row {
	display: grid;
	grid-template-columns: 54px 1fr auto 18px;
	align-items: center;
	gap: 0 12px;
	padding: 9px 12px;
	border-radius: var(--pkb-radius-sm, 14px);
	text-decoration: none;
	color: var(--pkb-ink, #0f172a);
	background: transparent;
	transition: background var(--pkb-transition-fast, .15s ease);
}

.pkb-card-row + .pkb-card-row {
	border-top: 1px solid var(--pkb-border-soft, rgba(15,23,42,.06));
	border-radius: 0;
}

.pkb-card-row:first-child { border-radius: var(--pkb-radius-sm, 14px) var(--pkb-radius-sm, 14px) 0 0; }
.pkb-card-row:last-child  { border-radius: 0 0 var(--pkb-radius-sm, 14px) var(--pkb-radius-sm, 14px); }
.pkb-card-row:only-child  { border-radius: var(--pkb-radius-sm, 14px); }

.pkb-card-row:hover {
	background: var(--pkb-primary-soft, #fff7f7);
}

.pkb-card-row:hover .pkb-card-row__arrow {
	color: var(--pkb-primary, #fe0201);
}

.pkb-card-row__thumb {
	width: 54px;
	height: 54px;
	border-radius: 10px;
	overflow: hidden;
	background: var(--pkb-bg, #f6f8fb);
	border: 1px solid var(--pkb-border-soft, rgba(15,23,42,.07));
	display: grid;
	place-items: center;
}

.pkb-card-row__thumb img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

.pkb-card-row__thumb-placeholder {
	font-size: 22px;
	line-height: 1;
}

.pkb-card-row__body {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.pkb-card-row__name {
	display: block;
	font-size: 13px;
	font-weight: 900;
	color: var(--pkb-ink, #0f172a);
	letter-spacing: -.02em;
	line-height: 1.2;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.pkb-card-row__meta {
	display: flex;
	align-items: center;
	gap: 5px;
	overflow: hidden;
}

.pkb-card-row__chip {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--pkb-surface-muted, #f8fafc);
	border: 1px solid var(--pkb-border-soft, rgba(15,23,42,.07));
	font-size: 11px;
	font-weight: 800;
	color: var(--pkb-text-soft, #475569);
	white-space: nowrap;
	max-width: 130px;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-shrink: 0;
}

.pkb-card-row__chip img {
	width: 12px;
	height: 12px;
	object-fit: contain;
	flex-shrink: 0;
}

.pkb-card-row__price {
	font-size: 13px;
	font-weight: 900;
	white-space: nowrap;
	text-align: right;
}

.pkb-card-row__price.is-empty {
	color: var(--pkb-muted, #64748b);
	font-weight: 600;
}

.pkb-card-row__arrow {
	font-size: 16px;
	color: rgba(15, 23, 42, .20);
	font-weight: 900;
	text-align: center;
	transition: color var(--pkb-transition-fast, .15s ease);
}

.pb-header-search-empty {
	padding: 18px 12px;
	font-size: 13px;
	font-weight: 700;
	color: var(--pkb-muted, #64748b);
	text-align: center;
}

/* Legacy fallback pour résultats non-carte — ne s'applique pas à .pkb-card-row */
.pb-header-search-results a:not(.pkb-card-row) {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border-radius: var(--pkb-radius-sm);
	text-decoration: none;
	color: var(--pkb-ink);
	font-size: var(--pkb-font-size-sm);
	font-weight: 700;
	transition:
		background var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-header-search-results a:not(.pkb-card-row):hover {
	background: var(--pkb-primary-soft);
	transform: translateX(3px);
}

.pb-header-search-results img:not(.pkb-card-row img) {
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: var(--pkb-radius-xs);
	background: var(--pkb-bg);
	flex-shrink: 0;
}

.pb-header-search-more {
	display: block;
	width: calc(100% - 16px);
	margin: 0 8px 8px;
	padding: 11px 16px;
	border: 1.5px dashed var(--pkb-border-strong);
	border-radius: var(--pkb-radius-sm);
	background: transparent;
	font-size: var(--pkb-font-size-sm);
	font-weight: 800;
	color: var(--pkb-muted);
	cursor: pointer;
	text-align: center;
	transition:
		background var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast);
}

.pb-header-search-more:hover {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
	border-color: var(--pkb-primary-border);
}

/* =========================================================
   NAV DESKTOP
========================================================= */

.pb-desktop-nav {
	display: flex;
	align-items: center;
	gap: 2px;
	flex-shrink: 0;
}

.pb-nav-link,
.pb-nav-trigger {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	height: 40px;
	padding: 0 16px;
	border: 0;
	border-radius: var(--pkb-radius-pill);
	background: transparent;
	font-size: var(--pkb-font-size-sm);
	font-weight: 800;
	color: var(--pkb-ink);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition:
		background var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-nav-link:hover,
.pb-nav-trigger:hover {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
	transform: translateY(-1px);
}

.pb-nav-item {
	position: static;
}

.pb-trigger-arrow {
	font-size: 11px;
	display: inline-block;
	color: var(--pkb-muted);
	transition: transform var(--pkb-transition-fast);
}

.pb-nav-item.is-mega-open .pb-trigger-arrow {
	transform: rotate(180deg);
	color: var(--pkb-primary);
}

.pb-nav-item.is-mega-open .pb-nav-trigger {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
}

/* =========================================================
   MÉGA MENU
========================================================= */

.pb-mega {
	position: fixed;
	top: calc(var(--pkb-header-height) + var(--pb-admin-bar-h, 0px));
	left: 0;
	right: 0;
	z-index: var(--pkb-z-dropdown);
	padding: 0 var(--pkb-container-padding) 20px;
	visibility: hidden;
	opacity: 0;
	transform: translateY(-12px);
	pointer-events: none;
	transition:
		opacity var(--pkb-transition),
		transform var(--pkb-transition),
		visibility var(--pkb-transition);
}

.pb-nav-item.is-mega-open .pb-mega {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.pb-mega-shell {
	max-width: var(--pkb-container);
	margin-inline: auto;
	padding: 28px;
	border-radius: var(--pkb-radius-2xl);
	background:
		linear-gradient(
			160deg,
			var(--pkb-surface-glass-strong) 0%,
			rgba(255, 255, 255, .97) 100%
		),
		radial-gradient(circle at 5% 0%, rgba(254,2,1, .06), transparent 38%),
		radial-gradient(circle at 95% 100%, rgba(255, 203, 5, .05), transparent 38%);
	border: 1px solid var(--pkb-border-soft);
	box-shadow: var(--pkb-shadow-xl);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
}

.pb-mega-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid var(--pkb-border-soft);
}

.pb-mega-top strong {
	display: block;
	font-size: 17px;
	font-weight: 900;
	color: var(--pkb-ink);
	letter-spacing: -.03em;
}

.pb-mega-top > div > span {
	display: block;
	font-size: var(--pkb-font-size-xs);
	font-weight: 600;
	color: var(--pkb-muted);
	margin-top: 4px;
}

.pb-mega-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

.pb-mega-card {
	padding: 20px;
	border-radius: var(--pkb-radius-lg);
	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, .9) 0%,
			rgba(255, 255, 255, .65) 100%
		);
	border: 1px solid var(--pkb-border-soft);
	box-shadow: var(--pkb-shadow-xs);
	transition: box-shadow var(--pkb-transition-fast);
}

.pb-mega-card:hover {
	box-shadow: var(--pkb-shadow-sm);
}

.pb-mega-card.is-main {
	grid-row: span 2;
}

.pb-mega-card.is-wide {
	grid-column: span 2;
}

.pb-mega-title {
	margin: 0 0 6px;
	font-size: var(--pkb-font-size-sm);
	font-weight: 900;
	color: var(--pkb-ink);
	letter-spacing: -.02em;
}

.pb-mega-desc {
	margin: 0 0 16px;
	font-size: var(--pkb-font-size-xs);
	font-weight: 600;
	color: var(--pkb-muted);
	line-height: var(--pkb-line-height-base);
}

/* Mega liens (colonne principale) */

.pb-mega-links {
	display: grid;
	gap: 3px;
}

.pb-mega-links a {
	display: grid;
	grid-template-columns: 28px minmax(0, 1fr);
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: var(--pkb-radius-sm);
	text-decoration: none;
	color: var(--pkb-ink);
	transition:
		background var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-mega-links a:hover {
	background: var(--pkb-primary-soft);
	transform: translateX(4px);
}

.pb-mega-links a b {
	display: block;
	font-size: var(--pkb-font-size-sm);
	font-weight: 900;
	color: var(--pkb-ink);
	line-height: 1.2;
}

.pb-mega-links a small {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--pkb-muted);
	margin-top: 2px;
}

/* Méga tags */

.pb-mega-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pb-mega-tags a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: var(--pkb-radius-pill);
	background: var(--pkb-surface-muted);
	border: 1px solid var(--pkb-border-soft);
	font-size: var(--pkb-font-size-xs);
	font-weight: 800;
	color: var(--pkb-text-soft);
	text-decoration: none;
	transition:
		background var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-mega-tags a:hover {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
	border-color: var(--pkb-primary-border);
	transform: translateY(-2px);
}

/* Icône type Pokémon */

.pb-type-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pb-type-icon img {
	width: 16px;
	height: 16px;
	object-fit: contain;
}

/* =========================================================
   ACTIONS (droite)
========================================================= */

.pb-header-actions {
	display: flex;
	align-items: center;
	gap: var(--pkb-gap-sm);
	flex-shrink: 0;
	margin-left: auto;
}

.pb-mobile-search-btn {
	display: none;
}

/* Bouton cloche notifications */

.pb-notif-button {
	position: relative;
	display: grid;
	place-items: center;
}

.pb-notif-badge {
	position: absolute;
	top: -4px;
	right: -4px;
	min-width: 18px;
	height: 18px;
	padding: 0 5px;
	display: grid;
	place-items: center;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--pkb-primary), var(--pkb-primary-hover));
	color: #fff;
	font-size: 10px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	box-shadow:
		0 0 0 2px var(--pkb-surface, #fff),
		0 4px 10px rgba(254,2,1, .35);
	pointer-events: none;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Bouton compte */

.pb-account-button {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 46px;
	padding: 6px 18px 6px 6px;
	border: 1px solid var(--pkb-border);
	border-radius: var(--pkb-radius-pill);
	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, .95) 0%,
			rgba(255, 255, 255, .80) 100%
		);
	color: var(--pkb-ink);
	cursor: pointer;
	font-size: var(--pkb-font-size-sm);
	font-weight: 800;
	box-shadow: var(--pkb-shadow-xs);
	flex-shrink: 0;
	transition:
		transform var(--pkb-transition-fast),
		box-shadow var(--pkb-transition-fast),
		background var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast);
}

.pb-account-button:hover {
	transform: translateY(-2px);
	box-shadow: 0 14px 32px rgba(254,2,1, .16);
	background:
		linear-gradient(
			135deg,
			rgba(254,2,1, .06) 0%,
			rgba(255, 255, 255, .9) 100%
		);
	border-color: var(--pkb-primary-border);
}

.pb-account-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	overflow: hidden;
	display: grid;
	place-items: center;
	background: var(--pkb-bg);
	border: 2px solid var(--pkb-border);
	flex-shrink: 0;
	font-size: 16px;
}

.pb-account-avatar img {
	width: 34px;
	height: 34px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.pb-account-label {
	font-size: var(--pkb-font-size-sm);
	font-weight: 800;
	color: var(--pkb-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 130px;
}

/* =========================================================
   CANVAS OVERLAY
========================================================= */

/* Quand un canvas global est ouvert, on neutralise toute UI locale fixe pour qu'elle
   ne déborde pas par-dessus le drawer (barre mobile collection, mini-modale recherche,
   sheet filtres locale, etc.). */
body.pkb-canvas-open .pkbc-mobile-bar,
body.pkb-canvas-open .pkbc-search-modal,
body.pkb-canvas-open .pkbc-sheet,
body.pkb-canvas-open .pkbc-sheet-overlay {
	visibility: hidden !important;
	pointer-events: none !important;
}

.pb-canvas-overlay {
	position: fixed;
	top: var(--pb-admin-bar-h, 0);
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2147483600; /* au-dessus de toute UI locale de page (canvas filtres, barres mobiles fixes, modales) */
	background: var(--pkb-overlay-dark);
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	visibility: hidden;
	opacity: 0;
	transition:
		opacity var(--pkb-transition-slow),
		visibility var(--pkb-transition-slow);
}

.pb-canvas-overlay.is-open {
	visibility: visible;
	opacity: 1;
}

/* Panel latéral commun */

.pb-canvas {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 360px;
	max-width: calc(100vw - 48px);
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .99) 0%,
			rgba(255, 255, 255, .97) 100%
		),
		radial-gradient(
			circle at 0% 0%,
			rgba(254,2,1, .06) 0%,
			transparent 50%
		);
	overflow-y: auto;
	overflow-x: hidden;
	overscroll-behavior: contain;
	box-shadow: var(--pkb-shadow-xl);
	border-top: 3px solid var(--pkb-primary);
}

.pb-canvas-left {
	left: 0;
	border-right: 1px solid var(--pkb-border-soft);
	border-radius: 0 var(--pkb-radius-xl) var(--pkb-radius-xl) 0;
	transform: translateX(-100%);
	transition: transform var(--pkb-transition-slow) cubic-bezier(.22, 1, .36, 1);
}

.pb-canvas-right {
	right: 0;
	border-left: 1px solid var(--pkb-border-soft);
	border-radius: var(--pkb-radius-xl) 0 0 var(--pkb-radius-xl);
	transform: translateX(100%);
	transition: transform var(--pkb-transition-slow) cubic-bezier(.22, 1, .36, 1);
}

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

.pb-canvas-overlay.is-open .pb-canvas-right {
	transform: translateX(0);
}

/* En-tête du canvas */

.pb-canvas-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--pkb-border-soft);
	flex-shrink: 0;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.pb-canvas-title {
	display: flex;
	align-items: center;
	gap: 11px;
	font-size: 16px;
	font-weight: 900;
	color: var(--pkb-ink);
	letter-spacing: -.03em;
}

.pb-canvas-close {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--pkb-border);
	border-radius: var(--pkb-radius-sm);
	background: var(--pkb-bg);
	color: var(--pkb-muted);
	font-size: 20px;
	font-weight: 900;
	cursor: pointer;
	flex-shrink: 0;
	transition:
		background var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast),
		color var(--pkb-transition-fast);
}

.pb-canvas-close:hover {
	background: var(--pkb-primary-soft);
	border-color: var(--pkb-primary-border);
	color: var(--pkb-primary);
}

/* Sections du canvas */

.pb-canvas-section {
	padding: 18px 22px;
	border-bottom: 1px solid var(--pkb-border-soft);
}

.pb-canvas-section-title {
	font-size: 10px;
	font-weight: 900;
	color: var(--pkb-muted);
	letter-spacing: .08em;
	text-transform: uppercase;
	margin-bottom: 12px;
}

/* Navigation canvas */

.pb-canvas-nav {
	display: grid;
	gap: 3px;
}

.pb-canvas-nav a,
.pb-account-card-link {
	display: grid;
	grid-template-columns: 36px minmax(0, 1fr) auto;
	align-items: center;
	gap: 10px;
	padding: 11px 12px;
	border-radius: var(--pkb-radius-sm);
	text-decoration: none;
	color: var(--pkb-ink);
	font-weight: 700;
	transition:
		background var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-canvas-nav a:hover,
.pb-account-card-link:hover {
	background: var(--pkb-primary-soft);
	transform: translateX(4px);
}

.pb-nav-icon {
	width: 32px;
	height: 32px;
	display: grid;
	place-items: center;
	border-radius: var(--pkb-radius-xs);
	background: var(--pkb-blue-soft);
	font-size: 16px;
}

.pb-canvas-nav a b,
.pb-account-card-link b {
	display: block;
	font-size: var(--pkb-font-size-sm);
	font-weight: 900;
	color: var(--pkb-ink);
	line-height: 1.2;
}

.pb-canvas-nav a span span,
.pb-account-card-link span span {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--pkb-muted);
	margin-top: 2px;
}

.pb-chevron {
	font-size: 18px;
	color: var(--pkb-muted);
	font-weight: 900;
	text-align: right;
	transition: color var(--pkb-transition-fast);
}

.pb-canvas-nav a:hover .pb-chevron,
.pb-account-card-link:hover .pb-chevron {
	color: var(--pkb-primary);
}

/* Canvas droit : nav sans section wrapper */
.pb-canvas-right .pb-canvas-nav {
	padding: 12px;
}

/* Canvas droit : nav imbriquée dans une section déjà paddée */
.pb-canvas-right .pb-canvas-section .pb-canvas-nav {
	padding: 0;
}

/* Badge dans les liens de menu canvas (compteurs / pill plan) */
.pb-canvas-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 22px;
	padding: 0 8px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--pkb-primary), var(--pkb-primary-hover));
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.02em;
	box-shadow: 0 4px 10px rgba(254,2,1, .25);
	white-space: nowrap;
}

.pb-canvas-badge.is-msg {
	background: linear-gradient(135deg, #2563eb, #1d4ed8);
	box-shadow: 0 4px 10px rgba(37, 99, 235, .25);
}

.pb-canvas-badge.is-pill {
	background: var(--pb-badge-color, var(--pkb-primary));
	box-shadow: none;
	font-weight: 800;
	font-size: 10px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* Compteur dans le titre du canvas notifications */
.pb-canvas-title-count {
	display: inline-grid;
	place-items: center;
	min-width: 22px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: linear-gradient(135deg, var(--pkb-primary), var(--pkb-primary-hover));
	color: #fff;
	font-size: 11px;
	font-weight: 900;
	line-height: 1;
}

/* Chip grid dans canvas */

.pb-chip-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.pb-chip-grid a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 6px 12px;
	border-radius: var(--pkb-radius-pill);
	background: var(--pkb-surface-muted);
	border: 1px solid var(--pkb-border-soft);
	font-size: var(--pkb-font-size-xs);
	font-weight: 800;
	color: var(--pkb-text-soft);
	text-decoration: none;
	transition:
		background var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast);
}

.pb-chip-grid a:hover {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
	border-color: var(--pkb-primary-border);
}

/* =========================================================
   CANVAS COMPTE — User panel
========================================================= */

.pb-user-panel {
	padding: 22px;
	border-bottom: 1px solid var(--pkb-border-soft);
}

.pb-user-main {
	display: grid;
	grid-template-columns: 60px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	margin-bottom: 18px;
}

.pb-user-avatar {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid var(--pkb-border);
	background: var(--pkb-bg);
	font-size: 26px;
	flex-shrink: 0;
}

.pb-user-avatar img {
	width: 60px;
	height: 60px;
	object-fit: cover;
	border-radius: 50%;
	display: block;
}

.pb-user-identity strong {
	display: block;
	font-size: 15px;
	font-weight: 900;
	color: var(--pkb-ink);
	letter-spacing: -.03em;
	margin-bottom: 3px;
}

.pb-user-identity > span {
	display: block;
	font-size: 12px;
	font-weight: 600;
	color: var(--pkb-muted);
}

/* Stats premium */

.pb-user-stats-premium {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 8px;
}

.pb-user-stat-card,
.pb-user-grade-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 14px 8px;
	border-radius: var(--pkb-radius-md);
	background:
		linear-gradient(
			160deg,
			rgba(255, 255, 255, .92) 0%,
			rgba(255, 255, 255, .70) 100%
		);
	border: 1px solid var(--pkb-border-soft);
	box-shadow: var(--pkb-shadow-xs);
	text-align: center;
}

.pb-user-stat-card {
	text-decoration: none;
	transition:
		transform var(--pkb-transition-fast),
		box-shadow var(--pkb-transition-fast);
}

.pb-user-stat-card:hover {
	transform: translateY(-3px);
	box-shadow: var(--pkb-shadow-md);
}

.pb-user-stat-icon {
	font-size: 20px;
	line-height: 1;
}

.pb-user-stat-card strong,
.pb-user-grade-card strong {
	display: block;
	font-size: 12px;
	font-weight: 900;
	color: var(--pkb-ink);
	line-height: 1.1;
}

.pb-user-stat-card small,
.pb-user-grade-card small {
	display: block;
	font-size: 10px;
	font-weight: 700;
	color: var(--pkb-muted);
	line-height: 1.2;
}

/* Boutons auth (non connecté) */

.pb-auth-buttons {
	display: grid;
	gap: 8px;
}

.pb-auth-primary {
	display: block;
	padding: 13px 22px;
	border-radius: var(--pkb-radius-pill);
	background: linear-gradient(135deg, var(--pkb-primary), var(--pkb-primary-hover));
	color: #fff;
	font-size: 14px;
	font-weight: 900;
	text-align: center;
	text-decoration: none;
	box-shadow: 0 14px 32px rgba(254,2,1, .28);
	transition:
		transform var(--pkb-transition-fast),
		box-shadow var(--pkb-transition-fast);
}

.pb-auth-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 20px 40px rgba(254,2,1, .36);
}

.pb-auth-secondary {
	display: block;
	padding: 12px 22px;
	border-radius: var(--pkb-radius-pill);
	background: var(--pkb-bg);
	border: 1.5px solid var(--pkb-border);
	color: var(--pkb-ink);
	font-size: 14px;
	font-weight: 800;
	text-align: center;
	text-decoration: none;
	transition:
		background var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast);
}

.pb-auth-secondary:hover {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
	border-color: var(--pkb-primary-border);
}

/* =========================================================
   CANVAS NOTIFICATIONS — fil chronologique unifié
========================================================= */

/* Toolbar (compteur non-lus + bouton tout marquer lu) */
.pb-notif-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 22px;
	border-bottom: 1px solid var(--pkb-border-soft);
	background: rgba(255, 255, 255, .6);
}

.pb-notif-toolbar-label {
	font-size: 12px;
	font-weight: 800;
	color: var(--pkb-muted);
	letter-spacing: .04em;
	text-transform: uppercase;
}

.pb-notif-mark-all {
	appearance: none;
	border: 1px solid var(--pkb-border);
	background: var(--pkb-surface);
	color: var(--pkb-ink);
	padding: 7px 14px;
	font-size: 12px;
	font-weight: 800;
	border-radius: var(--pkb-radius-pill);
	cursor: pointer;
	transition:
		background var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		opacity var(--pkb-transition-fast);
}

.pb-notif-mark-all:hover:not([disabled]) {
	background: var(--pkb-primary-soft);
	border-color: var(--pkb-primary-border);
	color: var(--pkb-primary);
}

.pb-notif-mark-all[disabled] {
	opacity: .45;
	cursor: not-allowed;
}

/* Liste */
.pb-notif-list {
	display: grid;
	gap: 6px;
	padding: 12px 14px;
}

/* Item (couleur de variante + état non-lu) */
.pb-notif-item {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: flex-start;
	gap: 12px;
	padding: 12px 14px;
	border-radius: var(--pkb-radius-md);
	background: transparent;
	border: 1px solid transparent;
	text-decoration: none;
	color: var(--pkb-ink);
	transition:
		background var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
	position: relative;
}

.pb-notif-item:hover {
	background: var(--pkb-surface-muted);
	border-color: var(--pkb-border-soft);
	transform: translateX(2px);
}

.pb-notif-item.is-unread {
	background: linear-gradient(160deg, rgba(254,2,1, .06) 0%, rgba(255, 255, 255, .55) 100%);
	border-color: rgba(254,2,1, .14);
}

.pb-notif-item.is-unread:hover {
	background: linear-gradient(160deg, rgba(254,2,1, .1) 0%, rgba(255, 255, 255, .6) 100%);
	border-color: rgba(254,2,1, .25);
}

/* Icône avec couleur de variante */
.pb-notif-item-icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--pkb-radius-sm);
	font-size: 20px;
	background: var(--pkb-blue-soft);
	color: var(--pkb-ink);
	flex-shrink: 0;
}

.pb-notif-item--msg .pb-notif-item-icon {
	background: rgba(37, 99, 235, .12);
	color: #2563eb;
}

.pb-notif-item--trade .pb-notif-item-icon {
	background: rgba(16, 185, 129, .12);
	color: #059669;
}

.pb-notif-item--admin .pb-notif-item-icon {
	background: rgba(245, 158, 11, .14);
	color: #b45309;
}

.pb-notif-item--price .pb-notif-item-icon {
	background: rgba(254,2,1, .12);
	color: #d40000;
}

/* Variante "Carte(s) trouvée(s)" (wishlist) — cohérence visuelle
   avec le bouton "Suivre" : même cloche SVG, palette cyan/violet. */
.pb-notif-item--wishlist {
	background: linear-gradient(135deg, rgba(254,2,1, .06), rgba(21,101,192, .08));
	border-color: rgba(254,2,1, .18) !important;
}

.pb-notif-item--wishlist:hover {
	background: linear-gradient(135deg, rgba(254,2,1, .09), rgba(21,101,192, .12));
}

.pb-notif-item--wishlist .pb-notif-item-icon {
	background: linear-gradient(135deg, rgba(254,2,1, .14), rgba(21,101,192, .14));
	color: #d40000;
	/* Cache l'emoji texte (la cloche SVG vient du ::before) */
	font-size: 0;
	position: relative;
}

.pb-notif-item--wishlist .pb-notif-item-icon::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236d28d9' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 8a6 6 0 0 1 12 0c0 7 3 9 3 9H3s3-2 3-9z'/><path d='M10.3 21a1.94 1.94 0 0 0 3.4 0'/></svg>");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 56%;
}

.pb-notif-item--wishlist.has-image .pb-notif-item-icon::before {
	display: none;
}
.pb-notif-item--wishlist.has-image .pb-notif-item-icon {
	font-size: inherit;
}

/* Item avec image personnalisée : remplace l'emoji par l'image */
.pb-notif-item.has-image .pb-notif-item-icon {
	padding: 0;
	overflow: hidden;
	background: var(--pkb-surface-muted);
}

.pb-notif-item.has-image .pb-notif-item-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Body */
.pb-notif-item-body {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}

.pb-notif-item-body b {
	display: block;
	font-size: var(--pkb-font-size-sm);
	font-weight: 900;
	color: var(--pkb-ink);
	line-height: 1.25;
	letter-spacing: -.01em;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pb-notif-item-text {
	display: block;
	font-size: 12px;
	font-weight: 500;
	color: var(--pkb-text-soft);
	line-height: 1.4;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pb-notif-item-time {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 2px;
	font-size: 11px;
	font-weight: 700;
	color: var(--pkb-muted);
}

.pb-notif-item-tag {
	display: inline-flex;
	align-items: center;
	height: 18px;
	padding: 0 8px;
	border-radius: 999px;
	font-size: 10px;
	font-weight: 800;
	letter-spacing: .03em;
	text-transform: uppercase;
	background: var(--pkb-surface-muted);
	color: var(--pkb-text-soft);
	border: 1px solid var(--pkb-border-soft);
}

.pb-notif-item--msg .pb-notif-item-tag {
	background: rgba(37, 99, 235, .1);
	color: #1d4ed8;
	border-color: rgba(37, 99, 235, .2);
}

.pb-notif-item--trade .pb-notif-item-tag {
	background: rgba(16, 185, 129, .1);
	color: #047857;
	border-color: rgba(16, 185, 129, .2);
}

.pb-notif-item--admin .pb-notif-item-tag {
	background: rgba(245, 158, 11, .14);
	color: #92400e;
	border-color: rgba(245, 158, 11, .25);
}

.pb-notif-item--price .pb-notif-item-tag {
	background: rgba(254,2,1, .12);
	color: #a30000;
	border-color: rgba(254,2,1, .22);
}

.pb-notif-item--wishlist .pb-notif-item-tag {
	background: linear-gradient(135deg, rgba(254,2,1, .12), rgba(21,101,192, .14));
	color: #d40000;
	border-color: rgba(254,2,1, .24);
}

/* Pastille non-lu */
.pb-notif-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--pkb-primary);
	box-shadow: 0 0 0 4px rgba(254,2,1, .12);
	margin-top: 8px;
	flex-shrink: 0;
}

/* Footer "Voir toutes" */
.pb-notif-footer {
	padding: 12px 18px 18px;
	border-top: 1px solid var(--pkb-border-soft);
	background: rgba(255, 255, 255, .6);
}

.pb-notif-see-all {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	border-radius: var(--pkb-radius-pill);
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
	border: 1px solid var(--pkb-primary-border);
	font-size: 13px;
	font-weight: 900;
	text-decoration: none;
	letter-spacing: -.01em;
	transition:
		background var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-notif-see-all:hover {
	background: var(--pkb-primary);
	color: #fff;
	transform: translateY(-1px);
}

.pb-notif-see-all > span:last-child {
	font-size: 18px;
	font-weight: 900;
}

/* État vide */
.pb-notif-empty {
	padding: 40px 28px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
}

.pb-notif-empty-icon {
	width: 72px;
	height: 72px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--pkb-primary-soft);
	font-size: 32px;
	margin-bottom: 4px;
}

.pb-notif-empty h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 900;
	color: var(--pkb-ink);
	letter-spacing: -.02em;
}

.pb-notif-empty p {
	margin: 0 0 8px;
	font-size: 13px;
	font-weight: 600;
	color: var(--pkb-muted);
	line-height: 1.5;
}

.pb-notif-empty .pb-auth-buttons {
	width: 100%;
	max-width: 260px;
	margin-top: 6px;
}

/* =========================================================
   RECHERCHE PLEIN ÉCRAN (mobile)
========================================================= */

.pb-search-fp-overlay {
	background: rgba(15, 23, 42, .56);
}

/* Canvas recherche : aligné sur le style des autres canvas (slide depuis la droite) */
.pb-search-fp {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 360px;
	max-width: calc(100vw - 48px);
	display: flex;
	flex-direction: column;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, .99) 0%,
			rgba(255, 255, 255, .97) 100%
		),
		radial-gradient(
			circle at 0% 0%,
			rgba(254,2,1, .06) 0%,
			transparent 50%
		);
	overflow: hidden;
	box-shadow: var(--pkb-shadow-xl);
	border-top: 3px solid var(--pkb-primary);
	border-left: 1px solid var(--pkb-border-soft);
	border-radius: var(--pkb-radius-xl) 0 0 var(--pkb-radius-xl);
	transform: translateX(100%);
	transition: transform var(--pkb-transition-slow) cubic-bezier(.22, 1, .36, 1);
}

.pb-search-fp-overlay.is-open .pb-search-fp {
	transform: translateX(0);
}

.pb-sfp-head {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 20px 22px;
	border-bottom: 1px solid var(--pkb-border-soft);
	flex-shrink: 0;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

.pb-sfp-back {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--pkb-border);
	border-radius: var(--pkb-radius-sm);
	background: var(--pkb-surface);
	color: var(--pkb-ink);
	cursor: pointer;
	flex-shrink: 0;
	transition:
		background var(--pkb-transition-fast),
		color var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast);
}

.pb-sfp-back:hover {
	background: var(--pkb-primary-soft);
	color: var(--pkb-primary);
	border-color: var(--pkb-primary-border);
}

.pb-sfp-head-search {
	flex: 1;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	height: var(--pkb-input-height);
	padding: 0 8px 0 16px;
	border-radius: var(--pkb-radius-pill);
	background: var(--pkb-surface-muted);
	border: 0;
	box-shadow: none;
}

.pb-sfp-head-search:focus-within {
	border: 0;
	box-shadow: none;
	outline: none;
}

.pb-sfp-head-input {
	min-width: 0;
	border: 0;
	margin: 0;
	background: transparent;
	font-size: 15px;
	font-weight: 600;
	color: var(--pkb-ink);
	outline: none;
	box-shadow: none;
	padding: 0;
	-webkit-appearance: none;
	appearance: none;
	border-radius: 0;
}

.pb-sfp-head-input::-webkit-search-decoration,
.pb-sfp-head-input::-webkit-search-cancel-button {
	display: none;
}

.pb-sfp-head-input::placeholder {
	color: var(--pkb-muted);
	font-weight: 500;
}

.pb-sfp-body {
	flex: 1;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Bouton "Charger plus" : juste après les résultats (pas de margin-top auto
   qui crée un trou), sticky bottom pendant le scroll. */
.pb-search-fp .pb-header-search-more {
	position: sticky;
	bottom: 0;
	z-index: 2;
	margin-bottom: -16px;
	padding-block: 14px;
	background: rgba(255, 255, 255, .96);
}

.pb-search-fp .pb-header-search-more[hidden] {
	display: none;
}

.pb-sfp-results {
	display: grid;
	gap: 4px;
}

.pb-sfp-quick {
	display: grid;
	gap: 4px;
}

.pb-sfp-quick[hidden] {
	display: none;
}

.pb-sfp-section-label {
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--pkb-muted);
	margin-bottom: 10px;
}

.pb-sfp-quick-link {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) 22px;
	align-items: center;
	gap: 12px;
	padding: 13px 14px;
	border-radius: var(--pkb-radius-md);
	text-decoration: none;
	color: var(--pkb-ink);
	background: var(--pkb-surface-muted);
	border: 1px solid var(--pkb-border-soft);
	transition:
		background var(--pkb-transition-fast),
		border-color var(--pkb-transition-fast),
		transform var(--pkb-transition-fast);
}

.pb-sfp-quick-link:hover {
	background: var(--pkb-primary-soft);
	border-color: var(--pkb-primary-border);
	transform: translateX(4px);
}

.pb-sfp-quick-icon {
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: var(--pkb-radius-sm);
	background: var(--pkb-blue-soft);
	font-size: 20px;
}

.pb-sfp-quick-link b {
	display: block;
	font-size: var(--pkb-font-size-sm);
	font-weight: 900;
	color: var(--pkb-ink);
}

.pb-sfp-quick-link small {
	display: block;
	font-size: 11px;
	font-weight: 600;
	color: var(--pkb-muted);
	margin-top: 2px;
}

.pb-sfp-quick-arrow {
	font-size: 20px;
	color: var(--pkb-muted);
	font-weight: 900;
	text-align: right;
	transition: color var(--pkb-transition-fast);
}

.pb-sfp-quick-link:hover .pb-sfp-quick-arrow {
	color: var(--pkb-primary);
}

/* =========================================================
   RESPONSIVE — 1280px
========================================================= */

@media (max-width: 1280px) {
	.pb-header-inner {
		gap: var(--pkb-gap);
	}

	.pb-header-search-wrap {
		max-width: 380px;
	}

	.pb-mega-grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.pb-mega-card.is-main {
		grid-row: auto;
		grid-column: span 3;
	}

	.pb-mega-card.is-wide {
		grid-column: span 2;
	}
}

/* =========================================================
   RESPONSIVE — 1080px (tablette large)
========================================================= */

@media (max-width: 1080px) {
	.pb-brand-text {
		display: none;
	}

	.pb-header-search-wrap {
		max-width: 280px;
	}

	.pb-nav-link,
	.pb-nav-trigger {
		padding: 0 12px;
		font-size: 13px;
	}

	.pb-mega-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.pb-mega-card.is-main,
	.pb-mega-card.is-wide {
		grid-column: span 2;
	}
	.pb-brand-logo {
		width: 50px;
		height: 50px;
	}
}

/* =========================================================
   RESPONSIVE — MOBILE 900px
========================================================= */

@media (max-width: 900px) {
	.pb-header-inner {
		gap: 10px;
		padding-inline: 14px;
	}

	.pb-mobile-left {
		display: flex;
		flex-shrink: 0;
	}

	.pb-brand {
		flex: 1 1 auto;
		display: flex;
		align-items: center;
		justify-content: center;
		min-width: 0;
	}

	.pb-brand-logo {
		width: 44px;
		height: 44px;
		max-width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		overflow: visible !important;
	}

	.pb-brand-logo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}

	.pb-brand-text {
		display: none;
	}

	.pb-header-search-wrap,
	.pb-desktop-nav {
		display: none;
	}

	.pb-mobile-search-btn {
		display: grid;
	}

	.pb-account-label {
		display: none;
	}

	.pb-account-button {
		width: 44px;
		height: 44px;
		padding: 0;
		justify-content: center;
	}

	.pb-account-avatar {
		width: 30px;
		height: 30px;
	}

	.pb-account-avatar img {
		width: 30px;
		height: 30px;
	}

	.pb-canvas-left,
	.pb-canvas-right,
	.pb-search-fp {
		border-radius: 0;
	}
}

/* =========================================================
   RESPONSIVE — 640px
========================================================= */

@media (max-width: 640px) {
	.pb-canvas,
	.pb-search-fp {
		width: 100vw;
		max-width: 100vw;
	}

	.pb-sfp-head {
		padding: 14px 16px;
	}

	.pb-sfp-body {
		padding: 14px;
	}

	.pb-mega-shell {
		padding: 18px;
	}
}

/* =========================================================
   RESPONSIVE — 480px
========================================================= */

@media (max-width: 480px) {
	.pb-header-inner {
		padding-inline: 10px;
		gap: 8px;
	}

	.pb-mobile-icon-btn {
		width: 40px;
		height: 40px;
	}

	.pb-brand-logo {
		width: 40px;
		height: 40px;
	}

	.pb-brand-logo img {
		width: 100%;
		height: 100%;
		object-fit: contain;
	}
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	.pb-site-header,
	.pb-canvas,
	.pb-mega,
	.pb-search-fp {
		transition: none;
	}
}

/* =========================================================
   HARMONISATION HEADER — design system Statistiques v2
   Palette violet/cyan, surfaces sobres, accents discrets.
   Override en fin de fichier pour ne pas casser le code historique.
   ========================================================= */

/* ─── Bouton submit moteur de recherche : icon button violet léger
   Inversion : fond violet 8 % AU REPOS (chip discret toujours visible)
   au hover on intensifie un peu sans assombrir la couleur (#fe0201 conservé). */
.pb-search-submit {
	background: rgba(254,2,1,.08) !important;
	color: var(--pkb-ds-accent, #fe0201) !important;
	box-shadow: none !important;
	border: 0 !important;
	width: 36px !important;
	height: 36px !important;
	min-width: 36px;
	border-radius: 10px !important;
	padding: 0 !important;
	transition: background .15s ease;
}
.pb-search-submit:hover,
.pb-search-submit:focus-visible {
	background: rgba(254,2,1,.14) !important;
	color: var(--pkb-ds-accent, #fe0201) !important;
	box-shadow: none !important;
	transform: none;
}
.pb-search-submit:active {
	background: rgba(254,2,1,.15) !important;
}
.pb-search-submit svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}

/* Loupe mobile (header) : même style violet léger au repos */
.pb-mobile-search-btn,
.pb-mobile-icon-btn {
	background: rgba(254,2,1,.08) !important;
	color: var(--pkb-ds-accent, #fe0201) !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 10px !important;
	transition: background .15s ease;
}
.pb-mobile-search-btn:hover,
.pb-mobile-search-btn:focus-visible,
.pb-mobile-icon-btn:hover,
.pb-mobile-icon-btn:focus-visible {
	background: rgba(254,2,1,.14) !important;
	color: var(--pkb-ds-accent, #fe0201) !important;
}
.pb-mobile-search-btn:active,
.pb-mobile-icon-btn:active {
	background: rgba(254,2,1,.15) !important;
}
.pb-mobile-search-btn svg,
.pb-mobile-icon-btn svg {
	width: 20px;
	height: 20px;
	stroke: currentColor;
	fill: none;
}

/* Loupe submit dans l'archive cartes (.pb-json-submit) */
.pb-json-submit {
	background: rgba(254,2,1,.08) !important;
	color: var(--pkb-ds-accent, #fe0201) !important;
	box-shadow: none !important;
	border: 0 !important;
	border-radius: 10px !important;
	transition: background .15s ease;
}
.pb-json-submit:hover,
.pb-json-submit:focus-visible {
	background: rgba(254,2,1,.14) !important;
	color: var(--pkb-ds-accent, #fe0201) !important;
	transform: none !important;
}
.pb-json-submit:active {
	background: rgba(254,2,1,.15) !important;
}
.pb-json-submit svg {
	width: 18px;
	height: 18px;
	stroke: currentColor;
	fill: none;
}

/* Loupe sidebar de recherche dresseurs (icône dans wrap) */
.pkb-trainers-search-icon,
.pkb-trainers-search-wrap > span {
	color: var(--pkb-ds-accent, #fe0201);
	opacity: .85;
}
.pkb-trainers-search-icon svg,
.pkb-trainers-search-wrap > span svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
}

/* Bouton "clear" (la croix dans les search) — encore plus discret */
.pb-search-clear {
	background: transparent !important;
	color: var(--pkb-ds-text-muted, #94a3b8) !important;
	border: 0 !important;
	box-shadow: none !important;
	width: 24px !important;
	height: 24px !important;
	border-radius: 999px !important;
	transition: background .15s ease, color .15s ease;
}
.pb-search-clear:hover {
	background: rgba(254,2,1,.08) !important;
	color: var(--pkb-ds-accent, #fe0201) !important;
}

/* ─── Canvas (drawers) : surface neutre + accent violet subtil ─── */
.pb-canvas {
	background: var(--pkb-surface, #fff);
	border-left: 1px solid rgba(15,23,42,.06);
}
.pb-canvas-left { border-right: 1px solid rgba(15,23,42,.06); border-left: 0; }

.pb-canvas-head {
	border-bottom: 1px solid rgba(15,23,42,.06);
	background: linear-gradient(180deg, rgba(254,2,1,.04), transparent);
}
.pb-canvas-title { color: var(--pkb-text, #0f172a); font-weight: 900; }

.pb-canvas-section-title {
	color: var(--pkb-text-muted, #64748b);
	text-transform: uppercase;
	letter-spacing: .08em;
	font-size: 11px;
	font-weight: 800;
}

/* ─── Nav links : surface souple, hover/active en violet/cyan ─── */
.pb-canvas-nav a,
.pb-account-card-link {
	background: var(--pkb-bg-soft, #f7f9fc) !important;
	border: 1px solid rgba(15,23,42,.06) !important;
	color: var(--pkb-text, #0f172a) !important;
	transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease;
}
.pb-canvas-nav a:hover,
.pb-account-card-link:hover {
	transform: translateY(-1px);
	border-color: rgba(254,2,1,.18) !important;
	background: #fff !important;
	box-shadow: 0 8px 20px -10px rgba(254,2,1,.18);
}

.pb-canvas-nav .pb-nav-icon,
.pb-account-card-link .pb-nav-icon {
	color: #fe0201;
	font-size: 18px;
}

/* ─── Chip grids (types, séries, collections) ─── */
.pb-chip-grid a {
	background: var(--pkb-bg-soft, #f7f9fc);
	border: 1px solid rgba(15,23,42,.06);
	color: var(--pkb-text, #0f172a);
	transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.pb-chip-grid a:hover {
	transform: translateY(-1px);
	border-color: rgba(254,2,1,.18);
	box-shadow: 0 8px 18px -10px rgba(254,2,1,.18);
}

/* ─── Badges canvas ─── */
.pb-canvas-badge {
	background: linear-gradient(135deg, #fe0201, #1565C0);
	color: #fff;
}
.pb-canvas-badge.is-msg {
	background: linear-gradient(135deg, #1565C0, #0ea5e9);
}
.pb-canvas-badge.is-pill {
	background: var(--pb-badge-color, var(--pkb-text-muted, #64748b));
}

/* ─── Chevron : neutre, accent au hover ─── */
.pb-chevron { color: var(--pkb-text-muted, #94a3b8); transition: color .15s ease, transform .15s ease; }
.pb-canvas-nav a:hover .pb-chevron,
.pb-account-card-link:hover .pb-chevron {
	color: #fe0201;
	transform: translateX(3px);
}

/* ─── Auth buttons (bienvenue) ─── */
.pb-auth-primary {
	background: linear-gradient(135deg, #fe0201, #1565C0) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 10px 24px rgba(254,2,1,.18);
}
.pb-auth-primary:hover {
	box-shadow: 0 14px 30px rgba(254,2,1,.18);
}
.pb-auth-secondary {
	background: rgba(254,2,1,.08) !important;
	color: #fe0201 !important;
	border-color: rgba(254,2,1,.15) !important;
}
.pb-auth-secondary:hover {
	background: rgba(254,2,1,.14) !important;
}

/* ─── User panel (stats cartes) en canvas compte ─── */
.pb-user-stat-card,
.pb-user-grade-card {
	background: var(--pkb-bg-soft, #f7f9fc);
	border: 1px solid rgba(15,23,42,.06);
	transition: transform .15s ease, border-color .15s ease;
}
.pb-user-stat-card:hover,
.pb-user-grade-card:hover {
	transform: translateY(-1px);
	border-color: rgba(254,2,1,.18);
}
.pb-user-stat-card.is-value { /* la "valeur" garde un léger accent or, sémantique de richesse */
	background: linear-gradient(135deg, rgba(245,158,11,.05), rgba(252,211,77,.02));
	border-color: rgba(245,158,11,.18);
}
.pb-user-stat-icon,
.pb-user-grade-icon {
	color: #fe0201;
}

/* ─── Navigation desktop principale (Cartes / Pokédex / Dresseurs) ─── */
.pb-nav-link {
	color: var(--pkb-text, #0f172a);
	font-weight: 800;
	transition: color .15s ease, background .15s ease;
}
.pb-nav-link:hover {
	color: #fe0201;
	background: rgba(254,2,1,.06);
}

/* ─── Mega menu cards ─── */
.pb-mega-card {
	background: var(--pkb-surface, #fff);
	border: 1px solid rgba(15,23,42,.06);
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12);
}
.pb-mega-title { color: var(--pkb-text, #0f172a); font-weight: 900; }
.pb-mega-desc { color: var(--pkb-text-muted, #6b7280); }
.pb-mega-tags a {
	background: var(--pkb-bg-soft, #f7f9fc);
	border: 1px solid rgba(15,23,42,.06);
	color: var(--pkb-text, #0f172a);
}
.pb-mega-tags a:hover {
	background: #fff;
	border-color: rgba(254,2,1,.18);
	color: #fe0201;
}

/* ─── Search input + clear ─── */
.pb-search-input:focus {
	border-color: rgba(254,2,1,.18);
	box-shadow: 0 0 0 3px rgba(254,2,1,.15);
}

/* ─── Notifications canvas : items, mark-all bouton ─── */
.pb-notif-mark-all {
	background: rgba(254,2,1,.08);
	color: #fe0201;
	border: 1px solid rgba(254,2,1,.15);
}
.pb-notif-mark-all:hover:not([disabled]) {
	background: rgba(254,2,1,.14);
}
.pb-notif-see-all {
	color: #fe0201;
}
.pb-notif-see-all:hover {
	color: #d40000;
}

/* =========================================================
   ICÔNES SVG MONOLINE (remplacent les emojis 3D)
   Toutes les <span class="pb-nav-icon|pb-link-icon|pb-sfp-quick-icon|...">
   contiennent désormais un <svg>. On les style ici proprement.
   ========================================================= */

.pb-nav-icon,
.pb-link-icon,
.pb-sfp-quick-icon,
.pb-user-stat-icon,
.pb-user-grade-icon {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	color: #fe0201;
	flex: 0 0 28px;
	transition: color .15s ease, transform .15s ease;
}
.pb-nav-icon svg,
.pb-link-icon svg,
.pb-sfp-quick-icon svg,
.pb-user-stat-icon svg,
.pb-user-grade-icon svg {
	width: 100%;
	height: 100%;
	max-width: 22px;
	max-height: 22px;
}

.pb-canvas-nav a:hover .pb-nav-icon,
.pb-account-card-link:hover .pb-nav-icon,
.pb-sfp-quick-link:hover .pb-sfp-quick-icon {
	color: #d40000;
	transform: scale(1.06);
}

.pb-user-stat-card.is-value .pb-user-stat-icon { color: #d97706; }
.pb-user-grade-card .pb-user-grade-icon { color: #f59e0b; }

/* Chevron SVG (remplace › caractère) */
.pb-chevron,
.pb-sfp-quick-arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 18px;
	height: 18px;
	color: var(--pkb-text-muted, #94a3b8);
	flex: 0 0 18px;
	transition: color .15s ease, transform .15s ease;
}
.pb-chevron svg,
.pb-sfp-quick-arrow svg {
	width: 100%;
	height: 100%;
}

/* Bouton "Explorer" → flèche reste en caractère car déco */
.pb-trigger-arrow {
	display: inline-flex;
	align-items: center;
	color: var(--pkb-text-muted, #94a3b8);
}

/* Nav desktop : icône à côté du label */
.pb-nav-link {
	display: inline-flex !important;
	align-items: center;
	gap: 8px;
}
.pb-nav-link svg {
	width: 18px;
	height: 18px;
	color: #fe0201;
	transition: color .15s ease, transform .15s ease;
}
.pb-nav-link:hover svg {
	color: #d40000;
	transform: scale(1.06);
}

/* Mega title : icône à côté du texte */
.pb-mega-title {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pb-mega-title svg {
	width: 18px;
	height: 18px;
	color: #fe0201;
	flex: 0 0 18px;
}

/* Empty state notifications (icône grande, centrée) */
.pb-notif-empty-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin: 0 auto;
	color: #fe0201;
	background: rgba(254,2,1,.08);
	border-radius: 50%;
}
.pb-notif-empty-icon svg {
	width: 32px;
	height: 32px;
}

/* =========================================================
   CANVAS : pas d'arrondi extérieur (les bords écran restent carrés)
   ========================================================= */
.pb-canvas {
	border-radius: 0 !important;
}
.pb-canvas-left {
	/* Drawer gauche : seul le coin droit haut peut éventuellement être arrondi
	   pour une transition douce, on retire tout pour rester net. */
	border-radius: 0 !important;
}
.pb-canvas-right {
	border-radius: 0 !important;
}
.pb-canvas-overlay { border-radius: 0; }

/* Mais les cartes INTÉRIEURES gardent leurs arrondis */
.pb-canvas-nav a,
.pb-account-card-link,
.pb-chip-grid a,
.pb-user-stat-card,
.pb-user-grade-card,
.pb-canvas-badge,
.pb-auth-primary,
.pb-auth-secondary {
	border-radius: 14px;
}

/* =========================================================
   MOTEUR DE RECHERCHE HEADER — design premium
   ========================================================= */

.pb-header-search-wrap {
	position: relative;
}

.pb-global-search.pb-desktop-search {
	display: flex;
	align-items: center;
	background: var(--pkb-surface, #fff);
	border: 1.5px solid rgba(15,23,42,.08);
	border-radius: 14px;
	padding: 4px 4px 4px 14px;
	gap: 8px;
	transition: border-color .18s ease, box-shadow .18s ease;
	min-height: 46px;
}
.pb-global-search.pb-desktop-search:focus-within {
	border-color: rgba(254,2,1,.18);
	box-shadow: 0 0 0 4px rgba(254,2,1,.10), 0 8px 22px rgba(254,2,1,.10);
}

.pb-search-input {
	flex: 1;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	outline: none !important;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--pkb-text, #0f172a);
	padding: 6px 0;
	min-width: 0;
}
.pb-search-input::placeholder {
	color: var(--pkb-text-muted, #94a3b8);
	font-weight: 500;
}

.pb-search-clear {
	background: rgba(15,23,42,.05);
	border: 0;
	color: var(--pkb-text-muted, #64748b);
	width: 24px;
	height: 24px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}
.pb-search-clear:hover {
	background: rgba(254,2,1,.10);
	color: #fe0201;
}

/* (Override historique remplacé — voir bloc "icon button violet léger" plus haut.) */

/* Panel de résultats : surface neutre + ombre douce */
.pb-header-search-panel {
	background: var(--pkb-surface, #fff);
	border: 1px solid rgba(15,23,42,.08);
	border-radius: 16px;
	box-shadow: 0 18px 44px rgba(15,23,42,.14);
	margin-top: 10px;
	overflow: hidden;
}
.pb-header-search-status {
	padding: 10px 16px;
	font-size: 13px;
	color: var(--pkb-text-muted, #64748b);
	background: var(--pkb-bg-soft, #f7f9fc);
	border-bottom: 1px solid rgba(15,23,42,.06);
}

/* Search full-page (mobile) — fond neutre, on garde la structure d'origine
   (padding/height définis ligne 1864 .pb-sfp-head-search) */
.pb-search-fp {
	background: var(--pkb-surface, #fff);
	border-radius: 0;
}