/* ===========================================================================
 * Slaloom Consulting — main.css
 * ---------------------------------------------------------------------------
 * 1. Design tokens (CSS custom properties) — source unique de vérité
 * 2. Resets ciblés + base typo
 * 3. Utilitaires accessibilité
 * 4. Helpers layout (container, section, marqueur ▮)
 *
 * Les composants (header, hero, cards, footer...) seront dans
 * assets/css/components.css à la phase suivante.
 *
 * Cible : mobile-first, BEM, pas de !important hors override Kadence justifié.
 * ========================================================================= */

/* ---------- 1. Design tokens ---------- */

:root {
	/* Couleurs de marque */
	--slaloom-yellow: #F3BF12;
	--slaloom-yellow-dark: #D9A800;
	--slaloom-yellow-light: #FFF4C4;
	--slaloom-navy: #1B2D3F;
	--slaloom-navy-deep: #0F1A26;
	--slaloom-grey: #7F7E7E;
	--slaloom-red: #D8160E;

	/* Neutres */
	--color-white: #FFFFFF;
	--color-bg-light: #F8F8F8;
	--color-border: #E5E5E5;
	--color-text-primary: #1A1A1A;
	--color-text-secondary: #666666;
	--color-text-muted: #999999;
	--color-text-inverse: #FFFFFF;

	/* Sémantique */
	--color-success: #10B981;
	--color-warning: #F59E0B;
	--color-error: #DC2626;
	--color-info: #3B82F6;

	/* Typo */
	--font-display: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Spacing (échelle 4px) */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 20px;
	--space-6: 24px;
	--space-8: 32px;
	--space-10: 40px;
	--space-12: 48px;
	--space-16: 64px;
	--space-20: 80px;
	--space-24: 96px;
	--space-32: 128px;

	/* Container & grid */
	--container-max-width: 1280px;
	--container-padding-mobile: 16px;
	--container-padding-tablet: 32px;
	--container-padding-desktop: 48px;

	/* Border radius */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--radius-pill: 999px;
	--radius-full: 50%;

	/* Ombres */
	--shadow-sm: 0 1px 2px rgba(15, 26, 38, 0.05);
	--shadow-md: 0 4px 12px rgba(15, 26, 38, 0.08);
	--shadow-lg: 0 10px 30px rgba(15, 26, 38, 0.12);
	--shadow-card: 0 6px 24px rgba(27, 45, 63, 0.08);
	--shadow-card-hover: 0 12px 32px rgba(27, 45, 63, 0.14);
	--shadow-cta: 0 8px 20px rgba(243, 191, 18, 0.35);

	/* Transitions */
	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
	--duration-fast: 150ms;
	--duration-base: 250ms;
	--duration-slow: 400ms;
}

/* ---------- 2. Reset ciblé + base ---------- */

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	-moz-tab-size: 4;
	tab-size: 4;
}

body {
	font-family: var(--font-body);
	font-size: 1rem;
	line-height: 1.65;
	color: var(--color-text-primary);
	background-color: var(--color-white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Headers — Poppins, hiérarchie Slaloom */
h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	color: var(--color-text-primary);
	line-height: 1.2;
	margin: 0 0 var(--space-4);
}

h1 { font-size: clamp(1.75rem, 4vw + 1rem, 2.75rem); font-weight: 700; line-height: 1.15; }
h2 { font-size: clamp(1.5rem, 3vw + 0.75rem, 2.25rem); font-weight: 700; line-height: 1.2; }
h3 { font-size: clamp(1.25rem, 2vw + 0.5rem, 1.75rem); font-weight: 600; line-height: 1.3; }
h4 { font-size: clamp(1.125rem, 1vw + 0.5rem, 1.375rem); font-weight: 600; line-height: 1.35; }
h5 { font-size: 1.125rem; font-weight: 600; }
h6 {
	font-size: 0.875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--slaloom-grey);
}

p {
	margin: 0 0 var(--space-4);
	max-width: 70ch;
}

a {
	color: var(--slaloom-navy);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-smooth);
}

a:hover,
a:focus-visible {
	color: var(--slaloom-yellow-dark);
	text-decoration: underline;
}

/* Sélection */
::selection {
	background-color: var(--slaloom-yellow);
	color: var(--slaloom-navy);
}

/* Images */
img,
svg,
video {
	max-width: 100%;
	height: auto;
	display: block;
}

/* Inputs : héritent de la typo body */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	cursor: pointer;
}

/* ---------- 3. Utilitaires accessibilité ---------- */

/* Skip-link (réinjecté par header.php) */
.slaloom-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-4);
	background: var(--slaloom-yellow);
	color: var(--slaloom-navy);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	font-weight: 600;
	z-index: 9999;
	transition: top var(--duration-base) var(--ease-out);
}

.slaloom-skip-link:focus {
	top: var(--space-4);
	outline: 2px solid var(--slaloom-navy);
	outline-offset: 2px;
}

/* Lecteur d'écran uniquement */
.slaloom-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Focus visible global (cohérence) */
:focus-visible {
	outline: 2px solid var(--slaloom-yellow);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- 4. Helpers layout ---------- */

/* Container (mobile-first padding) */
.slaloom-container {
	width: 100%;
	max-width: var(--container-max-width);
	margin-inline: auto;
	padding-inline: var(--container-padding-mobile);
}

@media (min-width: 768px) {
	.slaloom-container {
		padding-inline: var(--container-padding-tablet);
	}
}

@media (min-width: 1024px) {
	.slaloom-container {
		padding-inline: var(--container-padding-desktop);
	}
}

/* Section : padding vertical responsive */
.slaloom-section {
	padding-block: var(--space-12);
}

@media (min-width: 768px) {
	.slaloom-section {
		padding-block: var(--space-16);
	}
}

@media (min-width: 1024px) {
	.slaloom-section {
		padding-block: var(--space-20);
	}
}

.slaloom-section--compact {
	padding-block: var(--space-8);
}

.slaloom-section--hero {
	padding-block: var(--space-20);
}

@media (min-width: 1024px) {
	.slaloom-section--hero {
		padding-block: var(--space-24);
	}
}

/* Marqueur de section ▮ — utilisé sur les H2 */
.slaloom-section-marker {
	display: inline-block;
	width: 4px;
	height: 1em;
	background-color: var(--slaloom-yellow);
	margin-right: var(--space-3);
	vertical-align: middle;
	border-radius: var(--radius-sm);
}

/* Variantes de fond de section */
.slaloom-section--light { background-color: var(--color-bg-light); }
.slaloom-section--white { background-color: var(--color-white); }
.slaloom-section--navy {
	background-color: var(--slaloom-navy);
	color: var(--color-text-inverse);
}
.slaloom-section--navy h1,
.slaloom-section--navy h2,
.slaloom-section--navy h3,
.slaloom-section--navy h4,
.slaloom-section--navy h5,
.slaloom-section--navy h6 {
	color: var(--color-text-inverse);
}
.slaloom-section--yellow {
	background-color: var(--slaloom-yellow);
	color: var(--slaloom-navy);
}

/* Stack vertical avec gap (utilitaire) */
.slaloom-stack { display: flex; flex-direction: column; }
.slaloom-stack--2 { gap: var(--space-2); }
.slaloom-stack--4 { gap: var(--space-4); }
.slaloom-stack--6 { gap: var(--space-6); }
.slaloom-stack--8 { gap: var(--space-8); }

/* Cluster horizontal avec wrap */
.slaloom-cluster {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-4);
	align-items: center;
}

/* Center horizontal */
.slaloom-text-center { text-align: center; }
.slaloom-mx-auto { margin-inline: auto; }

/* Lead paragraph (intro sections) */
.slaloom-lead {
	font-size: clamp(1rem, 1.5vw + 0.5rem, 1.125rem);
	color: var(--color-text-secondary);
	line-height: 1.7;
	max-width: 65ch;
}