/* =========================================================
   EYOKON — Components v3
   Primitives CSS réutilisables (.eyk-*, .ebtn-*) basées sur
   le design project/ (Tailwind → CSS vanille).
   ========================================================= */

/* =====================================================
   Base / Reset
   ===================================================== */
html { scroll-behavior: smooth; }

body.eyokon-bolt {
	font-family: var(--eyokon-font-sans);
	color: var(--ey-earth-900);
	background-color: var(--ey-earth-50);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body.eyokon-bolt h1,
body.eyokon-bolt h2,
body.eyokon-bolt h3,
body.eyokon-bolt h4,
body.eyokon-bolt h5,
body.eyokon-bolt h6 {
	font-family: var(--eyokon-font-display);
}

/* =====================================================
   Containers
   ===================================================== */
.eyk-container {
	max-width: 80rem; /* 1280px = max-w-7xl */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	.eyk-container { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	.eyk-container { padding-left: 2rem; padding-right: 2rem; }
}

.eyk-container-narrow {
	max-width: 64rem; /* 1024px = max-w-5xl */
	margin-left: auto;
	margin-right: auto;
	padding-left: 1rem;
	padding-right: 1rem;
}
@media (min-width: 640px) {
	.eyk-container-narrow { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
	.eyk-container-narrow { padding-left: 2rem; padding-right: 2rem; }
}

/* =====================================================
   Sections
   ===================================================== */
.eyk-section { padding-top: 5rem; padding-bottom: 5rem; }
.eyk-section--sm { padding-top: 4rem; padding-bottom: 4rem; }
.eyk-section--bg-white { background-color: #fff; }
.eyk-section--bg-earth { background-color: var(--ey-earth-50); }
.eyk-section--bg-dark { background-color: var(--ey-earth-900); color: #fff; }
.eyk-section--bg-darker { background-color: var(--ey-earth-950); color: var(--ey-earth-200); }
.eyk-section--bg-primary { background-color: var(--ey-primary-600); color: #fff; }
.eyk-section--bg-primary-dark { background-color: var(--ey-primary-700); color: #fff; }

/* =====================================================
   Section label (uppercase small green label)
   ===================================================== */
.section-label {
	font-family: var(--eyokon-font-sans);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--ey-primary-600);
}
.section-label--light { color: var(--ey-primary-400); }
.section-label--white { color: var(--ey-primary-300); }

/* =====================================================
   Buttons
   ===================================================== */
.ebtn-primary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: var(--ey-primary-600);
	color: #fff;
	font-family: var(--eyokon-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	border-radius: var(--eyokon-radius);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 200ms, color 200ms;
}
.ebtn-primary:hover { background: var(--ey-primary-700); color: #fff; }
.ebtn-primary:active { background: var(--ey-primary-800); }
.ebtn-primary:focus-visible {
	outline: 2px solid var(--ey-primary-500);
	outline-offset: 2px;
}
.ebtn-primary:disabled, .ebtn-primary.is-disabled {
	opacity: .5; cursor: not-allowed;
}
.ebtn-primary--lg { padding: 1rem 2rem; font-size: 1rem; }
.ebtn-primary--success { background: var(--ey-secondary-600); }
.ebtn-primary--success:hover { background: var(--ey-secondary-600); }

.ebtn-secondary {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: transparent;
	color: var(--ey-earth-800);
	font-family: var(--eyokon-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	border: 1px solid var(--ey-earth-300);
	border-radius: var(--eyokon-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 200ms, border-color 200ms, color 200ms;
}
.ebtn-secondary:hover {
	background: var(--ey-earth-100);
	border-color: var(--ey-earth-400);
	color: var(--ey-earth-800);
}
.ebtn-secondary:focus-visible {
	outline: 2px solid var(--ey-primary-500);
	outline-offset: 2px;
}

.ebtn-outline-white {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	background: transparent;
	color: #fff;
	font-family: var(--eyokon-font-sans);
	font-size: 0.875rem;
	font-weight: 500;
	border: 1px solid rgba(255,255,255,.6);
	border-radius: var(--eyokon-radius);
	cursor: pointer;
	text-decoration: none;
	transition: background-color 200ms, border-color 200ms;
}
.ebtn-outline-white:hover {
	background: rgba(255,255,255,.1);
	border-color: #fff;
	color: #fff;
}

.ebtn-white {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 1rem 2rem;
	background: #fff;
	color: var(--ey-primary-700);
	font-family: var(--eyokon-font-sans);
	font-size: 1rem;
	font-weight: 600;
	border-radius: var(--eyokon-radius);
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition: background-color 200ms;
}
.ebtn-white:hover { background: var(--ey-earth-50); color: var(--ey-primary-700); }

/* =====================================================
   Cards
   ===================================================== */
.eyk-card {
	background: #fff;
	border: 1px solid var(--ey-earth-100);
	border-radius: var(--eyokon-radius);
	overflow: hidden;
	transition: box-shadow 300ms, transform 300ms;
}
.eyk-card:hover, .card-hover:hover {
	box-shadow: var(--eyokon-shadow-lg);
	transform: translateY(-2px);
}

/* =====================================================
   Input fields (forms)
   ===================================================== */
.eyk-input {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ey-earth-200);
	border-radius: var(--eyokon-radius);
	background: #fff;
	color: var(--ey-earth-900);
	font-family: var(--eyokon-font-sans);
	font-size: 0.875rem;
	transition: border-color 200ms, box-shadow 200ms;
	outline: none;
}
.eyk-input::placeholder { color: var(--ey-earth-400); }
.eyk-input:focus {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--ey-primary-500);
}

.eyk-select {
	width: 100%;
	padding: 0.75rem 1rem;
	border: 1px solid var(--ey-earth-200);
	border-radius: var(--eyokon-radius);
	background: #fff;
	color: var(--ey-earth-900);
	font-family: var(--eyokon-font-sans);
	font-size: 0.875rem;
	appearance: none;
	transition: border-color 200ms, box-shadow 200ms;
	outline: none;
}
.eyk-select:focus {
	border-color: transparent;
	box-shadow: 0 0 0 2px var(--ey-primary-500);
}

/* =====================================================
   Badges / Tags
   ===================================================== */
.eyk-badge {
	display: inline-block;
	padding: 0.25rem 0.5rem;
	font-family: var(--eyokon-font-sans);
	font-size: 10px;
	font-weight: 600;
	border-radius: var(--eyokon-radius);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	line-height: 1;
}
.eyk-badge--primary { background: var(--ey-primary-600); color: #fff; }
.eyk-badge--secondary { background: var(--ey-secondary-600); color: #fff; }
.eyk-badge--primary-soft { background: var(--ey-primary-100); color: var(--ey-primary-700); }
.eyk-badge--secondary-soft { background: var(--ey-secondary-100); color: var(--ey-secondary-700); }
.eyk-badge--earth { background: var(--ey-earth-100); color: var(--ey-earth-600); }

/* =====================================================
   Grids
   ===================================================== */
.eyk-grid-2 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.eyk-grid-3 { display: grid; grid-template-columns: 1fr; gap: 1.5rem; }
.eyk-grid-4 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }

@media (min-width: 640px) {
	.eyk-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.eyk-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.eyk-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 768px) {
	.eyk-grid-2 { grid-template-columns: repeat(2, 1fr); }
	.eyk-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.eyk-grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 1024px) {
	.eyk-grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* =====================================================
   Flex utilities
   ===================================================== */
.eyk-flex { display: flex; }
.eyk-flex-col { flex-direction: column; }
.eyk-flex-center { align-items: center; justify-content: center; }
.eyk-flex-between { justify-content: space-between; }
.eyk-flex-wrap { flex-wrap: wrap; }
.eyk-gap-2 { gap: 0.5rem; }
.eyk-gap-3 { gap: 0.75rem; }
.eyk-gap-4 { gap: 1rem; }
.eyk-gap-6 { gap: 1.5rem; }
.eyk-gap-8 { gap: 2rem; }
.eyk-gap-12 { gap: 3rem; }
.eyk-gap-16 { gap: 4rem; }

/* =====================================================
   Text utilities
   ===================================================== */
.eyk-text-center { text-align: center; }
.eyk-text-sm { font-size: 0.875rem; }
.eyk-text-xs { font-size: 0.75rem; }
.eyk-text-lg { font-size: 1.125rem; }
.eyk-text-xl { font-size: 1.25rem; }
.eyk-text-earth-400 { color: var(--ey-earth-400); }
.eyk-text-earth-500 { color: var(--ey-earth-500); }
.eyk-text-earth-600 { color: var(--ey-earth-600); }
.eyk-text-primary-600 { color: var(--ey-primary-600); }
.eyk-font-sans { font-family: var(--eyokon-font-sans); }
.eyk-font-serif { font-family: var(--eyokon-font-display); }
.eyk-font-medium { font-weight: 500; }
.eyk-font-semibold { font-weight: 600; }
.eyk-leading-relaxed { line-height: 1.625; }
.eyk-line-clamp-2 {
	display: -webkit-box;
	line-clamp: 2;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* =====================================================
   Image utilities
   ===================================================== */
.eyk-img-cover {
	width: 100%; height: 100%;
	object-fit: cover;
}
.eyk-img-zoom {
	transition: transform 500ms;
}
.eyk-card:hover .eyk-img-zoom,
.group:hover .eyk-img-zoom {
	transform: scale(1.05);
}

/* =====================================================
   Aspect ratios
   ===================================================== */
.eyk-aspect-4-3 { aspect-ratio: 4/3; }
.eyk-aspect-video { aspect-ratio: 16/9; }
.eyk-aspect-square { aspect-ratio: 1; }
.eyk-aspect-3-4 { aspect-ratio: 3/4; }
.eyk-aspect-4-5 { aspect-ratio: 4/5; }

/* =====================================================
   Skeleton loading
   ===================================================== */
.eyk-skeleton {
	background: var(--ey-earth-200);
	border-radius: var(--eyokon-radius);
	animation: eyokonPulse 2s cubic-bezier(.4,0,.6,1) infinite;
}

/* =====================================================
   Visually hidden (a11y)
   ===================================================== */
.eyk-sr-only {
	position: absolute;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0,0,0,0);
	white-space: nowrap;
	border: 0;
}

/* =====================================================
   Floating WhatsApp button
   ===================================================== */
.eyokon-whatsapp {
	position: fixed;
	bottom: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	background: #25d366;
	color: #fff;
	border-radius: 50%;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
	transition: transform .2s ease, box-shadow .2s ease;
	animation: eyokonWhatsAppBounce 2s ease-in-out infinite;
	text-decoration: none;
}

.eyokon-whatsapp::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: rgba(37, 211, 102, .55);
	animation: eyokonWhatsAppPulse 2s ease-out infinite;
	z-index: -1;
}

.eyokon-whatsapp:hover,
.eyokon-whatsapp:focus {
	transform: scale(1.08);
	box-shadow: 0 6px 16px rgba(0, 0, 0, .3);
	color: #fff;
	animation: none;
}

.eyokon-whatsapp:hover::before,
.eyokon-whatsapp:focus::before {
	animation: none;
}

.eyokon-whatsapp svg {
	width: 1.75rem;
	height: 1.75rem;
	fill: currentColor;
	filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .2));
}

@keyframes eyokonWhatsAppPulse {
	0% {
		transform: scale(1);
		opacity: .6;
	}
	80% {
		transform: scale(1.6);
		opacity: 0;
	}
	100% {
		transform: scale(1.6);
		opacity: 0;
	}
}

@keyframes eyokonWhatsAppBounce {
	0%, 100% {
		transform: translateY(0);
	}
	50% {
		transform: translateY(-4px);
	}
}

@media (max-width: 782px) {
	.eyokon-whatsapp {
		bottom: 1rem;
		right: 1rem;
		width: 3rem;
		height: 3rem;
	}

	.eyokon-whatsapp svg {
		width: 1.5rem;
		height: 1.5rem;
	}

	@keyframes eyokonWhatsAppBounce {
		0%, 100% {
			transform: translateY(0);
		}
		50% {
			transform: translateY(-3px);
		}
	}
}