/**
 * Design system — Djizhub Theme
 */

:root {
	/* Couleurs de marque */
	--color-primary: #00597e;
	--color-accent: #00c6ff;
	--color-dark: #03111a;
	--color-gold: #f5a623;
	--color-surface: #071c26;
	--color-text: #e8f4f8;
	--color-muted: #8baebf;

	/* Dérivés */
	--color-surface-elevated: #0d2835;
	--color-border: rgba(0, 198, 255, 0.12);
	--color-overlay: rgba(3, 17, 26, 0.85);

	/* Typographie */
	--font-display: "Clash Display", "DM Sans", system-ui, sans-serif;
	--font-body: "DM Sans", system-ui, sans-serif;
	--fs-xs: clamp(0.75rem, 0.7rem + 0.2vw, 0.8125rem);
	--fs-sm: clamp(0.875rem, 0.82rem + 0.25vw, 0.9375rem);
	--fs-base: clamp(1rem, 0.95rem + 0.3vw, 1.0625rem);
	--fs-md: clamp(1.125rem, 1rem + 0.5vw, 1.25rem);
	--fs-lg: clamp(1.35rem, 1.15rem + 0.85vw, 1.65rem);
	--fs-xl: clamp(1.75rem, 1.35rem + 1.4vw, 2.25rem);
	--fs-display: clamp(2rem, 1.5rem + 2vw, 3rem);
	--lh-tight: 1.15;
	--lh-snug: 1.35;
	--lh-relaxed: 1.6;
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* Espacements */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.25rem;
	--space-6: 1.5rem;
	--space-8: 2rem;
	--space-10: 2.5rem;
	--space-12: 3rem;
	--space-16: 4rem;
	--space-20: 5rem;

	/* Rayons & ombres */
	--radius-sm: 8px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-full: 9999px;
	--shadow-glow: 0 0 40px rgba(0, 198, 255, 0.15);
	--shadow-card: 0 12px 40px rgba(0, 0, 0, 0.35);
	--shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.06);

	/* Mise en page */
	--container-max: 72rem;
	--container-pad: var(--space-6);
	--header-height: 4.5rem;
	--z-base: 1;
	--z-dropdown: 100;
	--z-sticky: 200;
	--z-modal: 500;

	/* Mouvement */
	--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
	--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
	--duration-fast: 150ms;
	--duration-base: 280ms;
	--duration-slow: 480ms;

	/* Focus accessibilité */
	--focus-ring: 2px solid var(--color-accent);
	--focus-offset: 2px;
}

body.djizhub-dark-skin,
body {
	color: var(--color-text);
}

/*
 * Fond page : GeneratePress / réglages du personnaliseur appliquent souvent du blanc
 * sur body, #page ou les « cartes » (mode separate-containers).
 */
html {
	background-color: var(--color-dark, #03111a);
}

body.djizhub-has-custom-header {
	min-height: 100vh;
	background-color: var(--color-dark, #03111a) !important;
	color: var(--color-text, #e8f4f8);
}

body.djizhub-has-custom-header #page.site,
body.djizhub-has-custom-header .site,
body.djizhub-has-custom-header .site.grid-container {
	background-color: var(--color-dark, #03111a) !important;
	color: inherit;
}

body.djizhub-has-custom-header #content,
body.djizhub-has-custom-header .site-content,
body.djizhub-has-custom-header .content-area,
body.djizhub-has-custom-header #main,
body.djizhub-has-custom-header .site-main {
	background-color: transparent !important;
}

body.djizhub-has-custom-header.one-container .inside-article,
body.djizhub-has-custom-header.separate-containers .inside-article,
body.djizhub-has-custom-header.separate-containers .site-main > *,
body.djizhub-has-custom-header.separate-containers .comments-area,
body.djizhub-has-custom-header.separate-containers .page-header,
body.djizhub-has-custom-header.separate-containers .paging-navigation {
	background-color: transparent !important;
	box-shadow: none;
}

body.djizhub-has-custom-header .inside-article {
	background-color: transparent !important;
}

.djizhub-coffre-accent::before {
	content: "";
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	margin-right: var(--space-2);
	border-radius: var(--radius-full);
	vertical-align: middle;
	background-color: var(--coffre-accent, var(--color-accent));
	box-shadow: var(--shadow-glow);
}

.djizhub-coffre-type {
	display: inline-block;
	margin-top: var(--space-2);
	padding: var(--space-1) var(--space-3);
	font-family: var(--font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-semibold);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-accent);
	background: rgba(0, 198, 255, 0.08);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-sm);
}

.djizhub-coffre-description {
	margin-top: var(--space-4);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-relaxed);
	color: var(--color-muted);
}

.djizhub-coffre-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: var(--space-4);
	font-size: 1.5rem;
	color: var(--color-accent);
	background: var(--color-surface-elevated);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-inset), var(--shadow-glow);
}

.djizhub-coffre-icon .dashicons {
	width: 1.75rem;
	height: 1.75rem;
	font-size: 1.75rem;
}

.djizhub-coffre-features--list {
	margin: var(--space-4) 0 0;
	padding-left: var(--space-6);
	font-family: var(--font-body);
	font-size: var(--fs-sm);
	line-height: var(--lh-snug);
	color: var(--color-text);
}

.djizhub-coffre-features--list li {
	margin-bottom: var(--space-2);
}

.djizhub-coffre-card {
	display: flex;
	flex-direction: column;
	max-width: 28rem;
	padding: var(--space-8);
	margin-block: var(--space-6);
	font-family: var(--font-body);
	background: linear-gradient(145deg, var(--color-surface-elevated), var(--color-surface));
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card), var(--shadow-glow);
}

.djizhub-coffre-card__title {
	margin: 0 0 var(--space-2);
	font-family: var(--font-display);
	font-size: var(--fs-lg);
	font-weight: var(--fw-semibold);
	line-height: var(--lh-tight);
	color: var(--color-text);
}

.djizhub-coffre-card__body > .djizhub-coffre-type {
	margin-top: 0;
}

.djizhub-coffre-card .djizhub-coffre-accent {
	display: block;
	margin-top: var(--space-3);
}

/* Canvas graphiques Chart.js */
.djizhub-chart-wrap {
	position: relative;
	max-width: 42rem;
	min-height: 280px;
	padding: var(--space-6);
	margin-block: var(--space-8);
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-card);
}

.djizhub-chart-wrap canvas {
	max-height: 320px;
}