/* ============================================================
   WPMove Design Tokens — source unique
   Consommé par le thème enfant ET le plugin (déclarer en dep)
   Handle : wp-design-tokens
   ============================================================ */

/* ---------- Light mode (défaut) ---------- */
:root {
	/* Accent indigo */
	--wp-accent:        #4F46E5;
	--wp-accent-hover:  #4338CA;
	--wp-accent-subtle: #EEF2FF;

	/* Backgrounds */
	--wp-bg:        #FFFFFF;
	--wp-bg-subtle: #F8FAFC;
	--wp-surface:   #FFFFFF;

	/* Borders */
	--wp-border:        #E2E8F0;
	--wp-border-strong: #CBD5E1;

	/* Text */
	--wp-text:       #0F172A;
	--wp-text-muted: #64748B;

	/* Header — toujours sombre, identique light/dark */
	--wp-header-bg:   #0F1117;
	--wp-header-text: #F1F4F9;

	/* Sémantique */
	--wp-success:    #16A34A;
	--wp-success-bg: #F0FDF4;
	--wp-warning:    #D97706;
	--wp-error:      #DC2626;
	--wp-error-bg:   #FEF2F2;
	--wp-info:       #0284C7;

	/* Couleurs supplémentaires */
	--wp-warning-bg:   #FEF3C7;
	--wp-text-subtle:  #94A3B8;

	/* Typographie */
	--wp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--wp-font-mono: 'JetBrains Mono', 'Fira Code', 'SFMono-Regular', Consolas, monospace;

	/* Dimensions */
	--wp-radius:        12px;
	--wp-radius-sm:     8px;
	--wp-container-max: 1180px;
}

/* ---------- Dark mode ---------- */
:root[data-theme="dark"] {
	--wp-accent:        #818CF8;
	--wp-accent-hover:  #A5B4FC;
	--wp-accent-subtle: #1E1B4B;

	--wp-bg:        #0B0E14;
	--wp-bg-subtle: #11151D;
	--wp-surface:   #161B26;

	--wp-border:        #252B38;
	--wp-border-strong: #363D4D;

	--wp-text:       #E5E9F0;
	--wp-text-muted: #8C94A6;

	/* header : inchangé */

	--wp-success:    #4ADE80;
	--wp-success-bg: #0F2818;
	--wp-warning:    #FBBF24;
	--wp-error:      #F87171;
	--wp-error-bg:   #2A1212;
	--wp-info:       #38BDF8;

	--wp-warning-bg:   #292317;
	--wp-text-subtle:  #64748B;
}

/* ---------- Appliquer bg/text globaux selon le mode ---------- */
body {
	background-color: var(--wp-bg);
	color: var(--wp-text);
	font-family: var(--wp-font-sans);
	line-height: 1.6;
	transition: background-color 0.2s ease, color 0.2s ease;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--wp-font-sans);
	line-height: 1.15;
}

/* Focus ring global — accent indigo sur tous les inputs */
:where(input, textarea, select):focus-visible {
	outline: 2px solid var(--wp-accent, #4F46E5);
	outline-offset: 2px;
}

/* ---------- Bouton toggle dark mode ---------- */
#wp-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--wp-radius-sm);
	cursor: pointer;
	color: var(--wp-header-text);
	padding: 0;
	transition: border-color 0.15s ease, background 0.15s ease;
	flex-shrink: 0;
}

#wp-theme-toggle:hover {
	border-color: rgba(255, 255, 255, 0.5);
	background: rgba(255, 255, 255, 0.08);
}

#wp-theme-toggle svg {
	width: 18px;
	height: 18px;
	display: block;
}

/* Icône = cible (lune en clair = "passer en nuit", soleil en nuit = "revenir au clair") */
#wp-theme-toggle .icon-sun {
	display: none;
}

:root[data-theme="dark"] #wp-theme-toggle .icon-sun {
	display: block;
}

:root[data-theme="dark"] #wp-theme-toggle .icon-moon {
	display: none;
}

/* ---------- Dark hero blocks — force white text regardless of light/dark mode ---------- */
/* Any wp:group with #1e1b4b background: headings white, body text 80% white */
.wp-block-group[style*="1e1b4b"] {
	color: rgba(255, 255, 255, 0.8) !important;
}

.wp-block-group[style*="1e1b4b"] h1,
.wp-block-group[style*="1e1b4b"] h2,
.wp-block-group[style*="1e1b4b"] h3 {
	color: #ffffff !important;
}

/* ---------- Light blocks (cards, CTA) — force dark text in dark mode ---------- */
/* Any wp:group with #EEF2FF background stays light in both modes, so its text
   must stay dark. :where() keeps specificity low (0,1,0) so inline indigo
   colours on numbers/titles/buttons still win. Links keep the accent colour. */
.wp-block-group[style*="EEF2FF"],
.wp-block-group[style*="EEF2FF"] :where(h1, h2, h3, h4, h5, h6, p, li, strong, em, code) {
	color: #1e293b;
}

/* ---------- Header nav submenu ---------- */
/* The header is always dark (--wp-header-bg never changes), so the submenu
   must always use the same dark background regardless of light/dark mode. */

/* Chevron toggle button — <button> doesn't inherit color by default (UA stylesheet
   resets it), so it renders black on the dark header. Force it to header text colour. */
.wpmove-header .wp-block-navigation-submenu__toggle,
.wpmove-header .wp-block-navigation__submenu-icon {
	color: var(--wp-header-text);
	background: transparent;
	border: none;
}
.wpmove-header .wp-block-navigation__submenu-container {
	background-color: #0F1117 !important;
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: var(--wp-radius-sm);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
	padding: 4px;
	min-width: 180px;
}

.wpmove-header .wp-block-navigation__submenu-container a {
	color: var(--wp-header-text) !important;
	display: block !important;
	padding: 8px 14px;
	border-radius: 6px;
	font-size: 0.875rem;
	white-space: nowrap;
}

.wpmove-header .wp-block-navigation__submenu-container a:hover {
	background-color: rgba(255, 255, 255, 0.08);
	color: #ffffff !important;
}