/* =========================================================
   PokéBoard — Design System global
   Tokens + classes utilitaires partagées par toutes les pages compte.
   Référence visuelle : page Statistiques v2 (la plus aboutie).
   ========================================================= */

:root {
	/* Couleurs accent (en plus de variables.css) — palette or/rouge logo EuréCard */
	--pkb-ds-accent:        var(--idd-color-warning, #F0A500);
	--pkb-ds-accent-light:  #FFD54F;
	--pkb-ds-accent-deep:   #D4920A;
	--pkb-ds-accent-grad:   linear-gradient(135deg, var(--idd-color-warning, #F0A500), #CC2828);
	--pkb-ds-accent-grad-soft: linear-gradient(135deg, rgba(240,165,0,.08), rgba(204,40,40,.05));

	/* Or signal (badges premium, valeur) — unifié avec la couleur primaire */
	--pkb-ds-gold:          var(--idd-color-warning, #F0A500);
	--pkb-ds-gold-grad:     linear-gradient(135deg, #FFD54F, var(--idd-color-warning, #F0A500));

	/* Surface — alias plus courts */
	--pkb-ds-surface:       var(--pkb-surface, #fff);
	--pkb-ds-surface-soft:  var(--pkb-bg-soft, var(--idd-color-bg-alt, #f7f9fc));
	--pkb-ds-text:          var(--pkb-text, var(--idd-color-text, #111827));
	--pkb-ds-text-muted:    var(--pkb-text-muted, var(--idd-color-text-muted, #6b7280));

	/* Borders + shadows uniformes */
	--pkb-ds-border:        1px solid rgba(15,23,42,.06);
	--pkb-ds-border-card:   1px solid rgba(15,23,42,.05);
	--pkb-ds-shadow-card:   0 1px 3px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12);
	--pkb-ds-shadow-cta:    0 10px 24px rgba(240,165,0,.30);
	--pkb-ds-shadow-cta-hover: 0 14px 30px rgba(240,165,0,.42);

	/* Radii */
	--pkb-ds-radius-card:   18px;
	--pkb-ds-radius-hero:   22px;
	--pkb-ds-radius-kpi:    14px;
	--pkb-ds-radius-pill:   999px;

	/* Spacing */
	--pkb-ds-pad-page:      24px clamp(16px, 3vw, 32px);
	--pkb-ds-pad-hero:      28px clamp(20px, 3vw, 32px);
	--pkb-ds-pad-card:      22px 20px;
	--pkb-ds-gap:           22px;
}

/* =========================================================
   1. PAGE WRAPPER — pleine largeur dans le template compte
   Usage : <section class="pkb-ds-page">...</section>
   ========================================================= */
.pkb-dash-main:has(.pkb-ds-page) { padding: 0 !important; gap: 0 !important; }

.pkb-ds-page {
	width: 100%;
	max-width: 100%;
	margin: 0;
	padding: var(--pkb-ds-pad-page);
	color: var(--pkb-ds-text);
	font-family: inherit;
	box-sizing: border-box;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
	gap: var(--pkb-ds-gap);
}
.pkb-ds-page * { box-sizing: border-box; }
.pkb-ds-page > * { max-width: 100%; }

/* =========================================================
   2. HERO — kicker + h1 + sous-titre + KPI grid
   <header class="pkb-ds-hero">
	   <div class="pkb-ds-hero__text">
		   <span class="pkb-ds-kicker">📍 Module</span>
		   <h1>Titre</h1>
		   <p>Sous-titre descriptif.</p>
	   </div>
	   <div class="pkb-ds-hero__kpis">
		   <div class="pkb-ds-kpi pkb-ds-kpi--primary"> ... </div>
	   </div>
   </header>
   ========================================================= */
.pkb-ds-hero {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
	gap: 24px;
	padding: var(--pkb-ds-pad-hero);
	background: var(--pkb-ds-surface);
	border: var(--pkb-ds-border);
	border-radius: var(--pkb-ds-radius-hero);
	box-shadow: var(--pkb-ds-shadow-card);
	position: relative;
	overflow: hidden;
}
.pkb-ds-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(240,165,0,.05), transparent 40%);
	pointer-events: none;
	z-index: 0;
}
.pkb-ds-hero > * { position: relative; z-index: 1; }

.pkb-ds-hero--full {
	grid-template-columns: 1fr;
}

.pkb-ds-hero__text { min-width: 0; }

.pkb-ds-hero__text h1,
.pkb-ds-hero h1 {
	font-size: clamp(24px, 3.5vw, 36px);
	margin: 0 0 8px;
	font-weight: 800;
	line-height: 1.15;
	color: var(--pkb-ds-text);
}
.pkb-ds-hero__text p,
.pkb-ds-hero > p {
	margin: 0;
	color: var(--pkb-ds-text-muted);
	font-size: 14.5px;
	line-height: 1.55;
	max-width: 720px;
}
.pkb-ds-hero__text p strong,
.pkb-ds-hero > p strong { color: var(--pkb-ds-text); font-weight: 800; }

/* =========================================================
   3. KICKER (badge pill au-dessus du h1)
   ========================================================= */
.pkb-ds-kicker {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px;
	background: linear-gradient(135deg, rgba(240,165,0,.10), rgba(255,213,79,.10));
	color: var(--pkb-ds-accent);
	border-radius: var(--pkb-ds-radius-pill);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	margin-bottom: 10px;
	border: 1px solid rgba(240,165,0,.18);
}
.pkb-ds-kicker svg { width: 14px; height: 14px; }

.pkb-ds-kicker--gold {
	background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(252,211,77,.06));
	color: var(--pkb-ds-gold);
	border-color: rgba(245,158,11,.30);
}

/* =========================================================
   4. KPI GRID
   ========================================================= */
.pkb-ds-hero__kpis {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	align-content: start;
}

.pkb-ds-kpi {
	background: var(--pkb-ds-surface-soft);
	border: var(--pkb-ds-border);
	border-radius: var(--pkb-ds-radius-kpi);
	padding: 14px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}
.pkb-ds-kpi--primary {
	background: var(--pkb-ds-accent-grad-soft);
	border-color: rgba(240,165,0,.20);
}
.pkb-ds-kpi--primary .pkb-ds-kpi__value { color: var(--pkb-ds-accent); }
.pkb-ds-kpi--gold {
	background: linear-gradient(135deg, rgba(245,158,11,.08), rgba(252,211,77,.04));
	border-color: rgba(245,158,11,.20);
}
.pkb-ds-kpi--gold .pkb-ds-kpi__value { color: var(--pkb-ds-gold); }

.pkb-ds-kpi__icon {
	position: absolute;
	top: 10px;
	right: 12px;
	color: var(--idd-color-text-muted, #94a3b8);
	opacity: .8;
}
.pkb-ds-kpi__icon svg { width: 18px; height: 18px; }
.pkb-ds-kpi--primary .pkb-ds-kpi__icon { color: var(--pkb-ds-accent); opacity: 1; }
.pkb-ds-kpi--gold .pkb-ds-kpi__icon { color: var(--pkb-ds-gold); opacity: 1; }

.pkb-ds-kpi__label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .05em;
	color: var(--pkb-ds-text-muted);
	text-transform: uppercase;
	padding-right: 28px; /* place pour l'icône */
}
.pkb-ds-kpi__value {
	display: block;
	font-size: clamp(22px, 2.6vw, 28px);
	font-weight: 800;
	margin: 4px 0 2px;
	line-height: 1.05;
	color: var(--pkb-ds-text);
	word-break: break-word;
}
.pkb-ds-kpi__sub {
	display: block;
	font-size: 11.5px;
	color: var(--pkb-ds-text-muted);
}

/* =========================================================
   5. CARD (section générique)
   ========================================================= */
.pkb-ds-card {
	background: var(--pkb-ds-surface);
	border: var(--pkb-ds-border-card);
	border-radius: var(--pkb-ds-radius-card);
	padding: var(--pkb-ds-pad-card);
	box-shadow: var(--pkb-ds-shadow-card);
}
.pkb-ds-card--accent {
	border-left: 4px solid var(--pkb-ds-accent);
}

/* Head de section : titre + lien optionnel + pill optionnelle */
.pkb-ds-section-head {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 18px;
}
.pkb-ds-section-head h2 {
	font-size: 18px;
	font-weight: 700;
	margin: 0;
	color: var(--pkb-ds-text);
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.pkb-ds-section-head h2 svg {
	color: var(--pkb-ds-accent);
	flex: 0 0 18px;
}
.pkb-ds-section-head a {
	color: var(--pkb-ds-accent);
	text-decoration: none;
	font-size: 13px;
	font-weight: 700;
}
.pkb-ds-section-head a:hover { color: var(--pkb-ds-accent-deep); }
.pkb-ds-section-head p {
	margin: 4px 0 0;
	font-size: 13px;
	color: var(--pkb-ds-text-muted);
}

.pkb-ds-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	background: var(--pkb-bg, var(--idd-color-bg-alt, #f6f8fb));
	color: var(--pkb-ds-text-muted);
	border-radius: var(--pkb-ds-radius-pill);
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
}
.pkb-ds-pill--accent {
	background: var(--pkb-ds-accent-grad);
	color: #fff;
}

/* =========================================================
   6. CTA BUTTONS
   ========================================================= */
.pkb-ds-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 11px 20px;
	border-radius: var(--pkb-ds-radius-pill);
	font-weight: 800;
	font-size: 13.5px;
	text-decoration: none;
	border: 0;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease;
	white-space: nowrap;
}
.pkb-ds-cta svg { width: 16px; height: 16px; }

.pkb-ds-cta--primary {
	background: var(--pkb-ds-accent-grad);
	color: #fff !important;
	box-shadow: var(--pkb-ds-shadow-cta);
}
.pkb-ds-cta--primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--pkb-ds-shadow-cta-hover);
}

.pkb-ds-cta--ghost {
	background: rgba(240,165,0,.08);
	color: var(--pkb-ds-accent) !important;
	border: 1px solid rgba(240,165,0,.20);
}
.pkb-ds-cta--ghost:hover {
	background: rgba(240,165,0,.14);
}

.pkb-ds-cta--gold {
	background: var(--pkb-ds-gold-grad);
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(245,158,11,.30);
}
.pkb-ds-cta--gold:hover {
	box-shadow: 0 14px 30px rgba(245,158,11,.42);
}

.pkb-ds-cta--danger {
	background: linear-gradient(135deg, var(--idd-color-primary, #ef4444), var(--idd-color-primary-hover, #b91c1c));
	color: #fff !important;
	box-shadow: 0 10px 24px rgba(239,68,68,.28);
}

/* =========================================================
   7. GRIDS standard pour items / cards filles
   ========================================================= */
.pkb-ds-grid-auto {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 14px;
}
.pkb-ds-grid-3 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 14px;
}
.pkb-ds-grid-2 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 14px;
}

/* =========================================================
   8. PROGRESS BAR
   ========================================================= */
.pkb-ds-progress {
	height: 8px;
	background: rgba(15,23,42,.06);
	border-radius: var(--pkb-ds-radius-pill);
	overflow: hidden;
	margin: 6px 0;
}
.pkb-ds-progress__fill {
	display: block;
	height: 100%;
	border-radius: var(--pkb-ds-radius-pill);
	background: var(--pkb-ds-accent-grad);
	transition: width .6s cubic-bezier(.34,1.3,.7,1);
}
.pkb-ds-progress__fill--green   { background: linear-gradient(90deg, #22c55e, var(--idd-color-success, #15803d)); }
.pkb-ds-progress__fill--gold    { background: linear-gradient(90deg, var(--idd-color-warning, #f59e0b), #d97706); }
.pkb-ds-progress__fill--danger  { background: linear-gradient(90deg, var(--idd-semantic-destructive, #dc2626), var(--idd-color-primary, #ef4444)); }

/* =========================================================
   9. EMPTY STATE
   ========================================================= */
.pkb-ds-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 36px 20px;
	color: var(--pkb-ds-text-muted);
	text-align: center;
}
.pkb-ds-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	color: var(--pkb-ds-accent);
	background: rgba(240,165,0,.08);
	border-radius: 50%;
	margin-bottom: 6px;
}
.pkb-ds-empty__icon svg { width: 30px; height: 30px; }
.pkb-ds-empty h2,
.pkb-ds-empty strong {
	font-size: 16px;
	font-weight: 800;
	color: var(--pkb-ds-text);
	margin: 0;
}
.pkb-ds-empty p,
.pkb-ds-empty span {
	font-size: 13px;
	max-width: 480px;
	margin: 0;
}

/* =========================================================
   10. BADGES de statut
   ========================================================= */
.pkb-ds-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 3px 10px;
	border-radius: var(--pkb-ds-radius-pill);
	font-size: 11.5px;
	font-weight: 700;
	background: rgba(240,165,0,.10);
	color: var(--pkb-ds-accent);
}
.pkb-ds-badge--green    { background: rgba(34,197,94,.10); color: var(--idd-color-success, #15803d); }
.pkb-ds-badge--gold     { background: rgba(245,158,11,.10); color: #b45309; }
.pkb-ds-badge--danger   { background: rgba(239,68,68,.10); color: var(--idd-color-primary-hover, #b91c1c); }
.pkb-ds-badge--neutral  { background: rgba(15,23,42,.06); color: var(--pkb-ds-text-muted); }

/* =========================================================
   11. LEGACY BRIDGE — alias pour les classes héritées
   Permet aux anciennes classes hero/card du site (pages compte ET pages
   publiques : archives, single, accueil, pricing, dresseurs, etc.)
   d'hériter du look stats v2 sans toucher au HTML.
   ========================================================= */

/* ─── HEROS ─── tous les containers "hero" du site héritent du look DS */
.pkbc-hero,
.pkb-progression-hero,
.pkb-dash-hero,
.pkb-wl-hero,
.pkb-fav-hero,
.pkb-nearby-v2__hero,
.pkbe-prefs__hero,
.pb-notif-hero,
.pb-msg-hero,
.pb-test-hero,
.pkb-auth-hero,
.pkb-hero,
.pkbh-hero,
.pkbh-hero-main,
.pkbh-map-hero,
.pkb-legal-hero,
.pkb-trainers-hero,
.pkdx-hero,
.pb-archive-hero,
.idd-abo-hero {
	background: var(--pkb-ds-surface);
	border: var(--pkb-ds-border);
	border-radius: var(--pkb-ds-radius-hero);
	box-shadow: var(--pkb-ds-shadow-card);
	position: relative;
	overflow: hidden;
}

/* Accent subtle violet/cyan en haut des heros legacy
   (pseudo-element seulement si pas déjà défini par le hero) */
.pkbc-hero:not(:has(>::before))::before,
.pkb-progression-hero::before,
.pkb-wl-hero::before,
.pkb-fav-hero::before,
.pkb-hero::before,
.pkbh-hero::before,
.pkb-legal-hero::before,
.pkb-trainers-hero::before,
.pkdx-hero::before,
.pb-archive-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(240,165,0,.04), transparent 40%);
	pointer-events: none;
	z-index: 0;
}
.pkb-progression-hero > *,
.pkb-wl-hero > *,
.pkb-fav-hero > *,
.pkb-hero > *,
.pkbh-hero > *,
.pkb-legal-hero > *,
.pkb-trainers-hero > *,
.pkdx-hero > *,
.pb-archive-hero > * {
	position: relative;
	z-index: 1;
}

/* ─── CARDS génériques ─── unification visuelle */
.pkb-card,
.pb-card,
.pkb-trainer-card,
.idd-abo-card-section {
	background: var(--pkb-ds-surface);
	border: var(--pkb-ds-border-card);
	border-radius: var(--pkb-ds-radius-card);
	box-shadow: var(--pkb-ds-shadow-card);
}

/* ─── BOUTONS génériques ─── alignés violet/cyan
   On cible juste les "boutons primaires" globaux du site. */
.pkb-btn-primary,
.pkb-cta-primary,
.pkb-red-btn,
.pkbh-cta-primary,
button.pkb-btn-primary,
a.pkb-btn-primary {
	background: var(--pkb-ds-accent-grad) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: var(--pkb-ds-shadow-cta);
	transition: transform .15s ease, box-shadow .15s ease;
}
.pkb-btn-primary:hover,
.pkb-cta-primary:hover,
.pkb-red-btn:hover,
.pkbh-cta-primary:hover {
	transform: translateY(-1px);
	box-shadow: var(--pkb-ds-shadow-cta-hover);
}

/* ─── LIENS d'accent (texte) → violet ─── */
a.pkb-link-accent,
.pkb-link-accent { color: var(--pkb-ds-accent); }
a.pkb-link-accent:hover { color: var(--pkb-ds-accent-deep); }

/* ─── BADGES / PILLS génériques ─── */
.pkb-badge-accent,
.pkb-section-count {
	background: var(--pkb-ds-accent-grad);
	color: #fff !important;
}

/* =========================================================
   11b. ANTI-ROUGE GLOBAL — sécurités pour purger les vestiges de l'ancien
   design rouge sur les pages compte (boutons, gradients, accents, badges).
   Les vrais rouges sémantiques (danger / erreur) restent en place via
   les classes `.is-danger`, `.is-error`, `.is-canceled`.
   ========================================================= */

/* Hover liens : violet (override possibles classes legacy "red") */
.pkb-dash-main a:hover,
.pkb-account-app a:hover {
	color: var(--pkb-ds-accent, var(--idd-color-warning, #F0A500));
}
.pkb-dash-main a.is-danger:hover,
.pkb-dash-main a.is-error:hover { color: var(--idd-color-primary-hover, #b91c1c); }

/* CTA "rouges" historiques → reskin violet/cyan */
.pkb-dash-main .pkb-red-btn,
.pkb-dash-main .idd-btn-primary,
.pkb-dash-main .pkb-cta-primary,
.pkb-account-app .pkb-red-btn,
.pkb-account-app .idd-btn-primary,
.pkb-account-app .pkb-cta-primary {
	background: linear-gradient(135deg, var(--idd-color-warning, #F0A500), #FFD54F) !important;
	color: #fff !important;
	border-color: transparent !important;
	box-shadow: 0 10px 24px rgba(240,165,0,.28) !important;
}

/* idd-btn-outline / idd-btn-ghost → violet */
.pkb-dash-main .idd-btn-outline,
.pkb-account-app .idd-btn-outline {
	background: rgba(240,165,0,.08) !important;
	color: var(--idd-color-warning, #F0A500) !important;
	border-color: rgba(240,165,0,.25) !important;
}

/* Toggle, sliders, accents accent-color */
.pkb-dash-main input[type="checkbox"]:checked,
.pkb-dash-main input[type="range"],
.pkb-account-app input[type="checkbox"]:checked,
.pkb-account-app input[type="range"] {
	accent-color: var(--pkb-ds-accent, var(--idd-color-warning, #F0A500));
}

/* Aliases locaux — force la palette logo EuréCard (or/ambre) dans les vues compte */
.pkb-dash-main, .pkb-account-app {
	--pkb-primary: var(--idd-color-warning, #F0A500);
	--pkb-primary-hover: #D4920A;
	--pkb-primary-soft: #FFF8E1;
	--pkb-primary-border: rgba(240,165,0,.25);
	--pkb-primary-ring: rgba(240,165,0,.10);
}

/* =========================================================
   11c. NOTIFICATIONS : KPIs en LIGNE (4 colonnes)
   Pas de wrap en vertical sur desktop : grille fixe 4 colonnes.
   Sur mobile, fallback 2 colonnes (jamais 1 colonne).
   ========================================================= */
.pb-notifpage .pkb-ds-hero__kpis,
.pb-notifpage .pkb-ds-hero__kpis {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
@media (max-width: 760px) {
	.pb-notifpage .pkb-ds-hero__kpis {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* =========================================================
   11d. NOTIFICATIONS : compact, badges, tabs cohérents
   ========================================================= */
.pb-notifpage-mark-all {
	background: rgba(240,165,0,.08);
	color: var(--pkb-ds-accent) !important;
	border: 1px solid rgba(240,165,0,.20);
}
.pb-notifpage-mark-all:hover:not([disabled]) {
	background: rgba(240,165,0,.14);
}
.pb-notifpage-tab.is-active {
	background: rgba(240,165,0,.10);
	color: var(--pkb-ds-accent);
	border-color: rgba(240,165,0,.30);
}
.pb-notifpage-tab-icon svg { color: var(--pkb-ds-accent); }
.pb-notifpage-tab.is-active .pb-notifpage-tab-icon svg { color: var(--pkb-ds-accent-deep); }

/* Pastilles compteur (chiffres rouges) — restent ROUGES, c'est le code
   universel "il y a quelque chose à traiter". On les conserve sur :
   - menu sidebar (.pkb-dash-menu__badge.is-count)
   - drawers compte / notifs du header (.pb-canvas-badge sans .is-pill)
   - onglets de la page notifications (.pb-notifpage-tab-count)
   - badges génériques .pkb-ds-badge-count */
.pkb-dash-menu__badge.is-count,
.pb-canvas-badge:not(.is-pill):not(.is-msg),
.pb-notifpage-tab-count,
.pkb-ds-badge-count,
.pb-notifpage-tab-count {
	background: var(--pkb-danger, var(--idd-color-primary, #ef4444)) !important;
	color: #fff !important;
	box-shadow: none !important;
}
.pkb-dash-menu__link.is-active .pkb-dash-menu__badge.is-count {
	background: #fff !important;
	color: var(--pkb-danger, var(--idd-color-primary, #ef4444)) !important;
}
.pb-notifpage-tab.is-active .pb-notifpage-tab-count {
	background: var(--pkb-danger, var(--idd-color-primary, #ef4444)) !important;
	color: #fff !important;
}
/* Pastille messages (cyan) — distincte des notifs générales */
.pb-canvas-badge.is-msg {
	background: var(--pkb-ds-accent-light, #FFD54F) !important;
	color: #fff !important;
}

/* =========================================================
   11e. FLAT MODE — aplatissement des ombres/gradients excessifs
   Évite l'effet "3D" sur boutons, cards et items.
   On garde les ombres uniquement utiles (élévation discrète des cards).
   ========================================================= */

/* Boutons : pas d'ombre profonde, pas de translateY -2px abusif */
.pkb-dash-main .pkb-ds-cta,
.pkb-dash-main .idd-btn,
.pkb-dash-main .pkb-red-btn,
.pkb-dash-main .pkb-cta-primary,
.pkb-account-app .pkb-ds-cta,
.pkb-account-app .idd-btn,
.pkb-account-app .pkb-red-btn,
.pkb-account-app .pkb-cta-primary {
	box-shadow: 0 2px 6px rgba(240,165,0,.18) !important;
}
.pkb-dash-main .pkb-ds-cta:hover,
.pkb-dash-main .idd-btn:hover,
.pkb-dash-main .pkb-red-btn:hover,
.pkb-dash-main .pkb-cta-primary:hover,
.pkb-account-app .pkb-ds-cta:hover,
.pkb-account-app .idd-btn:hover,
.pkb-account-app .pkb-red-btn:hover,
.pkb-account-app .pkb-cta-primary:hover {
	transform: none !important;
	box-shadow: 0 4px 12px rgba(240,165,0,.26) !important;
}

/* Cards : ombre douce uniforme (au lieu d'ombres profondes legacy) */
.pkb-dash-main .pkb-card,
.pkb-dash-main .pb-card,
.pkb-dash-main .idd-abo-card-section,
.pkb-account-app .pkb-card,
.pkb-account-app .pb-card,
.pkb-account-app .idd-abo-card-section {
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12) !important;
	backdrop-filter: none !important;
	border: 1px solid rgba(15,23,42,.06) !important;
	background: var(--pkb-ds-surface, #fff) !important;
}

/* Heros : pas d'ombre profonde */
.pkb-dash-main .pkb-ds-hero,
.pkb-dash-main .pkbc-hero,
.pkb-dash-main .pkb-progression-hero,
.pkb-dash-main .pkb-dash-hero,
.pkb-dash-main .pkb-wl-hero,
.pkb-dash-main .pkb-fav-hero,
.pkb-dash-main .pkb-nearby-v2__hero,
.pkb-dash-main .idd-abo-hero {
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12) !important;
	backdrop-filter: none !important;
}

/* Items intérieurs (rows, conv-items, trade-items) : translateY hover doux */
.pkb-dash-main .pkb-conv-item a:hover,
.pkb-dash-main .pkb-trade-item a:hover,
.pkb-dash-main .pkb-online-row:hover,
.pkb-account-app .pkb-conv-item a:hover,
.pkb-account-app .pkb-trade-item a:hover {
	transform: none !important;
	box-shadow: 0 2px 8px rgba(15,23,42,.06) !important;
}

/* Suppression des radial-gradients abusifs sur les wrappers */
.pkb-dash-main .pkb-fav-shell,
.pkb-account-app .pkb-fav-shell {
	background: var(--pkb-ds-surface, #fff) !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 8px 24px -16px rgba(15,23,42,.12) !important;
	border: 1px solid rgba(15,23,42,.06) !important;
}

/* =========================================================
   11f. BOUTONS X / CLOSE — uniformes partout
   Fond violet très très clair, icône ROUGE, plat (pas border / pas ombre).
   ========================================================= */
.pb-canvas-close,
.pb-search-clear,
.pkb-edit-close,
.pkb-card-close,
.pkb-modal-close,
[data-pb-close]:not(.pkb-ds-cta),
.idd-modal-close,
.pkbc-album-close,
.pkbe-prefs__close,
.pkb-trainers-empty-close {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	width: 34px !important;
	height: 34px !important;
	min-width: 34px;
	padding: 0 !important;
	background: rgba(240,165,0,.05) !important;
	color: var(--pkb-danger, var(--idd-color-primary, #ef4444)) !important;
	border: 0 !important;
	border-radius: 10px !important;
	box-shadow: none !important;
	cursor: pointer;
	font-size: 18px;
	font-weight: 800;
	line-height: 1;
	transition: background .15s ease, color .15s ease;
}
.pb-canvas-close:hover,
.pb-search-clear:hover,
.pkb-edit-close:hover,
.pkb-card-close:hover,
.pkb-modal-close:hover,
[data-pb-close]:not(.pkb-ds-cta):hover,
.idd-modal-close:hover,
.pkbc-album-close:hover,
.pkbe-prefs__close:hover {
	background: rgba(240,165,0,.10) !important;
	color: var(--pkb-danger-hover, var(--idd-semantic-destructive, #dc2626)) !important;
	box-shadow: none !important;
	transform: none !important;
}
.pb-canvas-close svg,
.pb-search-clear svg,
.pkb-edit-close svg,
[data-pb-close] svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
}

/* =========================================================
   11g. ACCORDÉONS / TOGGLES — chevron discret comme carousel
   ========================================================= */

/* Toggle icon génériques (collection, Gutenberg accordion, details/summary, FAQ) */
.pkbc-toggle-icon,
.wp-block-accordion-heading__toggle-icon,
.pkb-ds-accordion-toggle,
.pb-accordion-toggle,
details > summary::-webkit-details-marker {
	width: 28px !important;
	height: 28px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	color: var(--pkb-ds-text-muted, var(--idd-color-text-muted, #94a3b8)) !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	font-size: 14px;
	transition: transform .2s ease, color .15s ease, background .15s ease;
}

/* SVG chevron à l'intérieur (préféré au texte "+") */
.pkbc-toggle-icon svg,
.wp-block-accordion-heading__toggle-icon svg,
.pkb-ds-accordion-toggle svg,
.pb-accordion-toggle svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	fill: none;
	stroke-width: 2;
}

/* Item ouvert : chevron pivoté */
.pkbc-album:not(.is-closed) .pkbc-toggle-icon,
.wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon,
details[open] > summary .pkb-ds-accordion-toggle {
	transform: rotate(180deg);
	color: var(--pkb-ds-accent, var(--idd-color-warning, #F0A500)) !important;
}

/* Hover header accordéon : léger violet */
.pkbc-album-header:hover .pkbc-toggle-icon,
.wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-icon,
details > summary:hover .pkb-ds-accordion-toggle {
	color: var(--pkb-ds-accent, var(--idd-color-warning, #F0A500)) !important;
	background: rgba(240,165,0,.06) !important;
}

/* =========================================================
   11h. FLÈCHES CAROUSEL — référence pour les accordéons aussi
   ========================================================= */
.pkbh-carousel-prev,
.pkbh-carousel-next,
.pkb-carousel-prev,
.pkb-carousel-next,
[data-pb-carousel-prev],
[data-pb-carousel-next] {
	width: 36px !important;
	height: 36px !important;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	background: var(--idd-surface-glass-strong, rgba(255,255,255,.92)) !important;
	color: var(--pkb-ds-accent, var(--idd-color-warning, #F0A500)) !important;
	border: 1px solid rgba(15,23,42,.06) !important;
	border-radius: 999px !important;
	box-shadow: 0 1px 3px rgba(15,23,42,.06) !important;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, box-shadow .15s ease;
}
.pkbh-carousel-prev:hover,
.pkbh-carousel-next:hover,
.pkb-carousel-prev:hover,
.pkb-carousel-next:hover,
[data-pb-carousel-prev]:hover,
[data-pb-carousel-next]:hover {
	background: #fff !important;
	color: var(--pkb-ds-accent-deep, #D4920A) !important;
	box-shadow: 0 4px 12px rgba(240,165,0,.18) !important;
}
.pkbh-carousel-prev svg,
.pkbh-carousel-next svg,
.pkb-carousel-prev svg,
.pkb-carousel-next svg {
	width: 16px;
	height: 16px;
	stroke: currentColor;
	stroke-width: 2;
	fill: none;
}

/* =========================================================
   12. RESPONSIVE
   ========================================================= */
@media (max-width: 760px) {
	.pkb-ds-page { padding: 16px 12px; gap: 14px; }
	.pkb-ds-hero { padding: 20px 16px; grid-template-columns: 1fr; gap: 18px; }
	.pkb-ds-hero__kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
	.pkb-ds-kpi { padding: 12px 10px; }
	.pkb-ds-kpi__value { font-size: 20px; }
	.pkb-ds-card { padding: 18px 14px; }
	.pkb-ds-section-head h2 { font-size: 16px; }
}

/* =========================================================
   CLOSE BUTTONS — toutes les X de fermeture en rouge signature
========================================================= */
.pkb-edit-close,
.pb-catalog-search-modal__close,
.pkb-dash-sidebar__close,
.idd-modal-close,
.pb-canvas-close,
.pkb-pv3-sheet__close,
.idd-msg-modal__close,
.pkb-dresseur-msg-modal__close,
.pkbc-search-modal__close,
.pkbe-modal__close,
.leaflet-popup-close-button,
[class$="__close"],
[class$="-close"],
[class*="modal__close"],
[class*="modal-close"],
[class*="sheet__close"],
[class*="drawer__close"],
[class*="popup-close"],
button[aria-label*="Fermer"],
button[aria-label*="fermer"],
button[aria-label*="Close"],
button[aria-label*="close"] {
	color: var(--pkb-primary) !important;
}
.pkb-edit-close:hover,
.pb-catalog-search-modal__close:hover,
.pkb-dash-sidebar__close:hover,
.idd-modal-close:hover,
.pb-canvas-close:hover,
.pkb-pv3-sheet__close:hover,
.idd-msg-modal__close:hover,
.pkb-dresseur-msg-modal__close:hover,
.pkbc-search-modal__close:hover,
.pkbe-modal__close:hover,
.leaflet-popup-close-button:hover,
[class$="__close"]:hover,
[class$="-close"]:hover,
[class*="modal__close"]:hover,
[class*="modal-close"]:hover,
[class*="sheet__close"]:hover,
[class*="drawer__close"]:hover,
[class*="popup-close"]:hover,
button[aria-label*="Fermer"]:hover,
button[aria-label*="fermer"]:hover,
button[aria-label*="Close"]:hover,
button[aria-label*="close"]:hover {
	background: var(--pkb-primary) !important;
	color: #fff !important;
	border-color: var(--pkb-primary) !important;
}