/*!
 * IDD Design — Composants standardisés + règles d'héritage globales
 *
 * Toutes les classes ici consomment les tokens var(--idd-*).
 * Tu changes de palette → TOUS les composants suivent automatiquement.
 */

/* ========================================================
 * RÈGLES D'HÉRITAGE GLOBALES (chargées partout en front)
 * Garantissent que body, dashicons, SVG, icônes héritent
 * automatiquement des couleurs de la palette active.
 * ======================================================== */

/* Body : applique les tokens fond/texte de la palette active */
body {
	background-color: var(--idd-color-bg, #ffffff);
	color: var(--idd-color-text, #1f2937);
}

/* ----- ICÔNES — règles CIBLÉES (pas globales) ----- */

/* Dashicons WordPress : héritent de la couleur du parent (avant elles étaient figées par WP) */
.dashicons,
.dashicons-before::before,
[class*="dashicons-"]::before {
	color: inherit;
}

/* SVG ÉLIGIBLES À currentColor : seulement ceux qui n'ont PAS de fill/stroke explicite
   sur l'élément <svg> lui-même. On évite ainsi de casser les SVG qui ont
   leurs propres couleurs (logos multi-couleurs, illustrations, icônes stroke-only).
   Pour faire suivre une icône SVG au thème : ajouter la classe .idd-icon ou
   data-idd-icon sur le SVG. */
svg.idd-icon,
svg[data-idd-icon] {
	fill: currentColor;
}
svg.idd-icon[stroke="currentColor"],
svg[data-idd-icon][stroke="currentColor"] {
	stroke: currentColor;
}

/* Override pour les SVG qu'on veut explicitement protéger du thème */
svg.idd-keep-color,
svg[data-keep-color],
.dashicons.idd-keep-color {
	color: initial;
}

/* Indicateur de mode pour les form controls natifs (date, color, range...) */
body[class*="idd-mode-dark"] {
	color-scheme: dark;
}
body[class*="idd-mode-light"] {
	color-scheme: light;
}
 *
 * Composants disponibles :
 *   .idd-btn .idd-btn--primary .idd-btn--ghost .idd-btn--reject .idd-btn--icon
 *   .idd-card .idd-card--dark .idd-card--glass
 *   .idd-badge .idd-badge--success .idd-badge--warning .idd-badge--danger .idd-badge--info
 *   .idd-pill (variants)
 *   .idd-input .idd-select .idd-textarea
 *   .idd-link
 *   .idd-divider
 *   .idd-section .idd-section--dark
 *   .idd-glow (effet halo)
 *
 * Sémantiques (jamais bougées par le thème) :
 *   .idd-favorite (étoile jaune)
 *   .idd-notification (rouge)
 *   .idd-online (vert)
 *   .idd-rare-{common|uncommon|rare|holo|ultra|secret}
 *   .idd-type-{fire|water|grass|electric|psychic}
 */

/* --------------------------------------------------------
 * BOUTONS
 * -------------------------------------------------------- */

.idd-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);
}
.idd-btn:hover {
	transform: translateY(-2px);
}
.idd-btn:focus-visible {
	outline: 2px solid var(--idd-color-primary, #fe0201);
	outline-offset: 2px;
}
.idd-btn:disabled,
.idd-btn[aria-disabled="true"] {
	opacity: .5;
	cursor: not-allowed;
	transform: none;
}

.idd-btn--primary {
	background: var(--idd-gradient-primary, linear-gradient(135deg, #fe0201, #f97316));
	color: #fff;
	box-shadow: var(--idd-shadow-glow, 0 8px 30px rgba(254,2,1,.35));
}
.idd-btn--primary:hover {
	box-shadow: 0 12px 40px rgba(254,2,1,.5);
}

.idd-btn--ghost {
	background: rgba(255,255,255,.08);
	border-color: var(--idd-color-border-strong, rgba(255,255,255,.18));
	color: var(--idd-color-text, #f1f5f9);
}
.idd-btn--ghost:hover {
	background: rgba(255,255,255,.14);
}

.idd-btn--reject {
	background: var(--idd-color-bg-alt, #1e293b);
	color: var(--idd-color-text-muted, #94a3b8);
	border-color: var(--idd-color-border, rgba(255,255,255,.08));
}

.idd-btn--icon {
	width: 44px;
	height: 44px;
	padding: 0;
	border-radius: var(--idd-radius-pill, 999px);
}

.idd-btn--sm { padding: 8px 14px; font-size: var(--idd-font-size-small, 13px); }
.idd-btn--lg { padding: 16px 28px; font-size: 18px; }

/* ----- PROTECTIONS SÉMANTIQUES : ne bougent JAMAIS avec la palette ----- */

/* Bouton "X" / fermer — TOUJOURS rouge, peu importe le thème.
   Usage : <button class="idd-btn idd-btn--close">×</button> */
.idd-btn--close {
	background: transparent;
	color: var(--idd-semantic-close, #fe0201) !important;
	border-color: transparent;
	width: 36px;
	height: 36px;
	padding: 0;
	font-size: 22px;
	line-height: 1;
	font-weight: 700;
	border-radius: var(--idd-radius-pill, 999px);
}
.idd-btn--close:hover {
	background: var(--idd-semantic-close-bg, rgba(254,2,1,.12)) !important;
	color: var(--idd-semantic-close, #fe0201) !important;
}

/* Bouton supprimer / destructif — TOUJOURS rouge */
.idd-btn--destructive {
	background: var(--idd-semantic-destructive, #dc2626) !important;
	color: #fff !important;
	border-color: var(--idd-semantic-destructive, #dc2626) !important;
}
.idd-btn--destructive:hover {
	background: var(--idd-semantic-close, #fe0201) !important;
	border-color: var(--idd-semantic-close, #fe0201) !important;
}

/* Bouton cloche notification (header) — fond rouge transparent au hover, constant */
.idd-bell-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	border-radius: var(--idd-radius-pill, 999px);
	cursor: pointer;
	transition: background-color var(--idd-transition-fast, 120ms ease);
}
.idd-bell-btn:hover,
.idd-bell-btn[aria-expanded="true"] {
	background: var(--idd-semantic-bell-bg, rgba(254,2,1,.12)) !important;
	color: var(--idd-semantic-notification, #fe0201) !important;
}
.idd-bell-btn .dashicons,
.idd-bell-btn svg {
	width: 22px;
	height: 22px;
	font-size: 22px;
}

/* --------------------------------------------------------
 * CARDS
 * -------------------------------------------------------- */

.idd-card {
	background: var(--idd-color-bg, #fff);
	border: var(--idd-border-width, 1px) solid var(--idd-color-border, rgba(255,255,255,.08));
	border-radius: var(--idd-radius-lg, 18px);
	padding: var(--idd-gap-lg, 24px);
	box-shadow: var(--idd-shadow-md, 0 8px 24px rgba(15,23,42,.18));
	color: var(--idd-color-text, #f1f5f9);
}

.idd-card--dark {
	background: var(--idd-gradient-dark, linear-gradient(135deg, #0a0f1f, #111827));
	color: var(--idd-color-text-inverse, #fff);
	border-color: var(--idd-color-border-strong, rgba(255,255,255,.18));
}

.idd-card--glass {
	background: rgba(255,255,255,.04);
	border-color: rgba(255,255,255,.07);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

/* --------------------------------------------------------
 * BADGES
 * -------------------------------------------------------- */

.idd-badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 700;
	border-radius: var(--idd-radius-pill, 999px);
	background: rgba(255,255,255,.08);
	color: var(--idd-color-text, #f1f5f9);
	border: 1px solid var(--idd-color-border, rgba(255,255,255,.08));
}
.idd-badge--success { background: color-mix(in srgb, var(--idd-color-success, #16a34a) 15%, transparent); color: var(--idd-color-success, #16a34a); border-color: color-mix(in srgb, var(--idd-color-success, #16a34a) 30%, transparent); }
.idd-badge--warning { background: color-mix(in srgb, var(--idd-color-warning, #facc15) 15%, transparent); color: var(--idd-color-warning, #facc15); border-color: color-mix(in srgb, var(--idd-color-warning, #facc15) 30%, transparent); }
.idd-badge--danger  { background: color-mix(in srgb, var(--idd-color-danger,  #fe0201) 15%, transparent); color: var(--idd-color-danger,  #fe0201); border-color: color-mix(in srgb, var(--idd-color-danger,  #fe0201) 30%, transparent); }
.idd-badge--info    { background: color-mix(in srgb, var(--idd-color-info,    #0ea5e9) 15%, transparent); color: var(--idd-color-info,    #0ea5e9); border-color: color-mix(in srgb, var(--idd-color-info,    #0ea5e9) 30%, transparent); }

/* --------------------------------------------------------
 * INPUTS
 * -------------------------------------------------------- */

.idd-input,
.idd-select,
.idd-textarea {
	display: block;
	width: 100%;
	padding: 12px 14px;
	background: rgba(255,255,255,.04);
	border: 1px solid var(--idd-color-border, rgba(255,255,255,.08));
	border-radius: var(--idd-radius-md, 12px);
	color: var(--idd-color-text, #f1f5f9);
	font-family: var(--idd-font-family-base, inherit);
	font-size: var(--idd-font-size-base, 16px);
	line-height: 1.4;
	transition: border-color var(--idd-transition-fast, 120ms ease),
	            background-color var(--idd-transition-fast, 120ms ease);
}
.idd-input:focus,
.idd-select:focus,
.idd-textarea:focus {
	outline: 0;
	border-color: var(--idd-color-primary, #fe0201);
	background: rgba(255,255,255,.08);
}
.idd-input::placeholder,
.idd-textarea::placeholder {
	color: var(--idd-color-text-muted, #94a3b8);
}

/* --------------------------------------------------------
 * LIENS, SECTIONS, DIVIDERS
 * -------------------------------------------------------- */

.idd-link {
	color: var(--idd-color-primary, #fe0201);
	text-decoration: none;
	font-weight: 600;
	border-bottom: 1px dashed color-mix(in srgb, var(--idd-color-primary, #fe0201) 40%, transparent);
	transition: color var(--idd-transition-fast, 120ms ease);
}
.idd-link:hover {
	color: var(--idd-color-primary-hover, #d40000);
}

.idd-section {
	padding: var(--idd-section-padding-y, 60px) 0;
}
.idd-section--dark {
	background: var(--idd-gradient-dark, linear-gradient(135deg, #0a0f1f, #111827));
	color: var(--idd-color-text-inverse, #fff);
}

.idd-divider {
	height: 1px;
	background: var(--idd-color-border, rgba(255,255,255,.08));
	border: 0;
	margin: var(--idd-gap-lg, 24px) 0;
}

/* --------------------------------------------------------
 * GLOW (halo lumineux)
 * -------------------------------------------------------- */

.idd-glow {
	position: relative;
}
.idd-glow::before {
	content: '';
	position: absolute;
	inset: -50px;
	background: var(--idd-gradient-glow, radial-gradient(ellipse, rgba(254,2,1,.4), transparent 70%));
	filter: blur(60px);
	pointer-events: none;
	z-index: -1;
}

/* --------------------------------------------------------
 * SÉMANTIQUES (constantes — ne bougent JAMAIS avec la palette)
 * -------------------------------------------------------- */

.idd-favorite { color: var(--idd-semantic-favorite, #facc15) !important; }
.idd-notification {
	color: var(--idd-semantic-notification, #fe0201) !important;
	background-color: var(--idd-semantic-notification, #fe0201) !important;
}
.idd-notification--text { color: var(--idd-semantic-notification, #fe0201) !important; background: transparent !important; }
.idd-online { color: var(--idd-semantic-online, #22c55e) !important; }

/* Badge notification (bulle rouge avec compteur) — TOUJOURS rouge + texte blanc */
.idd-notification-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 18px;
	height: 18px;
	padding: 0 6px;
	background: var(--idd-semantic-notification-bg, #fe0201) !important;
	color: var(--idd-semantic-notification-text, #fff) !important;
	border-radius: 999px;
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
	border: 2px solid var(--idd-color-bg, #fff);  /* contour adapté au mode pour bonne séparation */
}

/* Position absolue typique sur cloche header */
.idd-bell-btn .idd-notification-badge {
	position: absolute;
	top: 4px;
	right: 4px;
	transform: translate(35%, -35%);
}

/* Raretés cartes Pokémon */
.idd-rare-common   { color: var(--idd-semantic-rare-common,   #9ca3af) !important; }
.idd-rare-uncommon { color: var(--idd-semantic-rare-uncommon, #10b981) !important; }
.idd-rare-rare     { color: var(--idd-semantic-rare-rare,     #3b82f6) !important; }
.idd-rare-holo     { color: var(--idd-semantic-rare-holo,     #a855f7) !important; }
.idd-rare-ultra    { color: var(--idd-semantic-rare-ultra,    #f97316) !important; }
.idd-rare-secret   { color: var(--idd-semantic-rare-secret,   #facc15) !important; }

/* Types Pokémon */
.idd-type-fire     { color: var(--idd-semantic-type-fire,     #ef4444) !important; }
.idd-type-water    { color: var(--idd-semantic-type-water,    #3b82f6) !important; }
.idd-type-grass    { color: var(--idd-semantic-type-grass,    #22c55e) !important; }
.idd-type-electric { color: var(--idd-semantic-type-electric, #facc15) !important; }
.idd-type-psychic  { color: var(--idd-semantic-type-psychic,  #ec4899) !important; }

/* --------------------------------------------------------
 * RÉTROCOMPAT — patterns courants dans le thème existant
 * On force la sémantique sur les classes/conventions déjà utilisées,
 * pour que la protection soit immédiate sans avoir à éditer le thème.
 * -------------------------------------------------------- */

/* Boutons fermeture modale/dialog : conventions HTML standard + classes communes */
.modal-close,
.popup-close,
.close-btn,
[aria-label="Fermer"],
[aria-label="Close"],
button.close,
.pkb-modal-close,
.pkb-popup-close,
.pb-modal-close,
.pb-close-btn {
	color: var(--idd-semantic-close, #fe0201) !important;
}
.modal-close:hover,
.popup-close:hover,
.close-btn:hover,
[aria-label="Fermer"]:hover,
[aria-label="Close"]:hover,
button.close:hover,
.pkb-modal-close:hover,
.pkb-popup-close:hover,
.pb-modal-close:hover,
.pb-close-btn:hover {
	background: var(--idd-semantic-close-bg, rgba(254,2,1,.12)) !important;
}

/* Boutons cloche notification dans le header — conventions courantes */
.pkb-notification-bell,
.pb-notification-bell,
[data-notification-bell],
[aria-label*="notification" i] {
	border-radius: var(--idd-radius-pill, 999px);
	transition: background-color var(--idd-transition-fast, 120ms ease);
}
.pkb-notification-bell:hover,
.pkb-notification-bell[aria-expanded="true"],
.pb-notification-bell:hover,
.pb-notification-bell[aria-expanded="true"] {
	background: var(--idd-semantic-bell-bg, rgba(254,2,1,.12)) !important;
	color: var(--idd-semantic-notification, #fe0201) !important;
}

/* Compteurs notification (toutes les conventions) */
.notification-count,
.notif-count,
.notif-badge,
.pkb-notification-count,
.pb-notification-count,
.pkb-notif-badge,
.pb-notif-badge,
[data-notification-count] {
	background: var(--idd-semantic-notification-bg, #fe0201) !important;
	color: var(--idd-semantic-notification-text, #fff) !important;
}