/**
 * Accueil hero — specs html/Accueil.dc.html
 */

@keyframes cdz-scan {
	0% { transform: translateY(0); opacity: 0; }
	15% { opacity: 1; }
	85% { opacity: 1; }
	100% { transform: translateY(216px); opacity: 0; }
}

@keyframes cdz-bar {
	from { transform: scaleY(0.3); }
	to { transform: scaleY(1); }
}

@media (prefers-reduced-motion: reduce) {
	.cdz-hero-monitor__scan,
	.cdz-hero-monitor__live-dot,
	.cdz-hero-monitor__status-dot,
	.cdz-hero-monitor__bars span {
		animation: none !important;
	}
}

/* —— Section —— */
.cdz-hero.e-con {
	position: relative;
	z-index: 3;
	overflow: visible;
}

.cdz-hero-intro.e-con {
	max-width: 1280px;
}

.cdz-hero-title .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-weight: 800 !important;
	font-size: clamp(31px, 6.2vw, 84px) !important;
	line-height: 0.95 !important;
	letter-spacing: -0.042em !important;
	color: var(--color-inverse) !important;
	text-align: center;
	text-wrap: balance;
	max-width: 1120px;
	margin: 0 auto !important;
}

.cdz-hero-title .elementor-heading-title .cdz-hero-title__accent,
.cdz-hero .cdz-hero-title__accent {
	color: var(--color-accent) !important;
}

.cdz-hero-lead.elementor-widget,
.cdz-hero-lead.elementor-widget > p {
	font-family: var(--font-body) !important;
	font-size: clamp(17px, 1.4vw, 20px) !important;
	line-height: 1.55 !important;
	color: var(--color-inverse) !important;
	max-width: 560px;
	margin: 0 !important;
	text-wrap: pretty;
}

.cdz-hero-lead .cdz-hero-lead__muted {
	color: var(--color-muted) !important;
}

/* —— Grid 2 cols (spec auto-fit minmax 330px) —— */
.cdz-hero-grid > .e-con-inner {
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
	gap: clamp(40px, 5vw, 72px) !important;
	align-items: start !important;
}

.cdz-hero-copy.e-con,
.cdz-hero-monitor-wrap.e-con {
	width: 100% !important;
	max-width: 100% !important;
}
.cdz-hero-stats.e-con,
.cdz-hero-stats > .e-con-inner {
	border-top: 1px solid var(--color-border-dark);
	border-bottom: 1px solid var(--color-border-dark);
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: flex-start !important;
}

.cdz-hero-stats > .e-con-inner {
	border-top: none;
	border-bottom: none;
	width: 100%;
}

.cdz-hero-stats.e-con {
	padding-top: 24px !important;
	padding-bottom: 24px !important;
}

.cdz-hero-stat.e-con {
	width: auto !important;
	flex: 0 0 auto !important;
}

.cdz-hero-stat-value .elementor-heading-title {
	font-family: var(--font-display) !important;
	font-weight: 800 !important;
	font-size: 30px !important;
	color: var(--color-accent) !important;
	letter-spacing: -0.03em !important;
	line-height: 1.1 !important;
	margin: 0 !important;
}

.cdz-hero-stat-label .elementor-heading-title,
.cdz-hero-stat-label.elementor-widget,
.cdz-hero-stat-label.elementor-widget > p {
	font-family: var(--font-mono) !important;
	font-size: 11px !important;
	text-transform: uppercase !important;
	letter-spacing: 0.08em !important;
	color: var(--color-muted) !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

/* —— CTAs —— */
.cdz-hero-cta-primary .elementor-button {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	text-transform: none !important;
	color: var(--color-primary) !important;
	background-color: var(--color-accent) !important;
	border-radius: var(--radius-sm) !important;
	padding: 18px 28px !important;
	border: none !important;
}

.cdz-hero-cta-primary .elementor-button:hover,
.cdz-hero-cta-primary .elementor-button:focus {
	background-color: var(--color-inverse) !important;
	color: var(--color-primary) !important;
}

.cdz-hero-cta-secondary .elementor-button {
	font-family: var(--font-display) !important;
	font-weight: 700 !important;
	font-size: 17px !important;
	text-transform: none !important;
	color: var(--color-inverse) !important;
	background: transparent !important;
	border: 1.5px solid var(--color-inverse) !important;
	border-radius: var(--radius-sm) !important;
	padding: 16.5px 26px !important;
}

.cdz-hero-cta-secondary .elementor-button:hover,
.cdz-hero-cta-secondary .elementor-button:focus {
	background-color: var(--color-border-dark) !important;
	color: var(--color-inverse) !important;
}

.cdz-hero-cta-note.elementor-widget,
.cdz-hero-cta-note.elementor-widget > p {
	font-family: var(--font-mono) !important;
	font-size: 12px !important;
	color: var(--color-muted) !important;
	line-height: 1.45 !important;
	margin: 0 !important;
}

/* —— Monitoring panel —— */
.cdz-hero-monitor-wrap {
	min-width: 0;
	margin-bottom: clamp(-80px, -9vw, -160px);
	position: relative;
	z-index: 4;
}

.cdz-hero-monitor__panel {
	background: var(--color-primary);
	border: 1px solid var(--color-accent);
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: 0 44px 88px -32px rgba(0, 0, 0, 0.6);
	position: relative;
}

.cdz-hero-monitor__scan {
	position: absolute;
	left: 0;
	right: 0;
	top: 38px;
	height: 2px;
	background: linear-gradient(
		90deg,
		rgba(var(--color-accent-rgb), 0) 0%,
		rgba(var(--color-accent-rgb), 0.85) 50%,
		rgba(var(--color-accent-rgb), 0) 100%
	);
	animation: cdz-scan 4.5s linear infinite;
	pointer-events: none;
	z-index: 2;
}

.cdz-hero-monitor__chrome {
	height: 38px;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 0 16px;
	border-bottom: 1px solid var(--color-border-dark);
}

.cdz-hero-monitor__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--color-border-dark);
	flex-shrink: 0;
}

.cdz-hero-monitor__title {
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-muted);
	margin-left: 8px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cdz-hero-monitor__live {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 7px;
	font-family: var(--font-mono);
	font-size: 10.5px;
	color: var(--color-success);
	flex-shrink: 0;
}

.cdz-hero-monitor__live-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--color-success);
	animation: cdz-pulse 2s ease-in-out infinite;
}

.cdz-hero-monitor__body {
	padding: 26px 22px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.cdz-hero-monitor__uptime {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px;
}

.cdz-hero-monitor__uptime-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cdz-hero-monitor__uptime-value {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(34px, 3.4vw, 48px);
	line-height: 1;
	letter-spacing: -0.035em;
	color: var(--color-accent);
	font-variant-numeric: tabular-nums;
}

.cdz-hero-monitor__uptime-label {
	font-family: var(--font-mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-muted);
}

.cdz-hero-monitor__bars {
	display: flex;
	align-items: flex-end;
	gap: 4px;
	height: 50px;
	flex-shrink: 0;
}

.cdz-hero-monitor__bars span {
	width: 8px;
	height: var(--h, 60%);
	background: var(--color-border-dark);
	transform-origin: bottom;
	animation: cdz-bar var(--d, 1s) ease-out;
	display: block;
}

.cdz-hero-monitor__bars span.is-accent {
	background: var(--color-accent);
}

.cdz-hero-monitor__rows {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cdz-hero-monitor__row {
	display: grid;
	grid-template-columns: 1fr auto auto;
	gap: 16px;
	align-items: center;
	padding: 11px 0;
	border-top: 1px solid var(--color-border-dark);
}

.cdz-hero-monitor__row:last-child {
	border-bottom: 1px solid var(--color-border-dark);
}

.cdz-hero-monitor__host {
	font-family: var(--font-mono);
	font-size: 12.5px;
	color: var(--color-inverse);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cdz-hero-monitor__latency {
	font-family: var(--font-mono);
	font-size: 12px;
	color: var(--color-muted);
}

.cdz-hero-monitor__status {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-mono);
	font-size: 11px;
	white-space: nowrap;
}

.cdz-hero-monitor__status.is-ok {
	color: var(--color-success);
}

.cdz-hero-monitor__status.is-warn {
	color: var(--color-accent);
}

.cdz-hero-monitor__status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: currentColor;
	animation: cdz-pulse 2.4s ease-in-out infinite;
	flex-shrink: 0;
}

.cdz-hero-monitor__status.is-warn .cdz-hero-monitor__status-dot {
	animation-duration: 1.2s;
}

.cdz-hero-monitor__caption {
	display: block;
	margin-top: 10px;
	font-family: var(--font-mono);
	font-size: 11px;
	color: var(--color-secondary);
}

@media (max-width: 1024px) {
	.cdz-hero-monitor-wrap {
		margin-bottom: -48px;
	}
}

@media (max-width: 767px) {
	.cdz-hero-monitor-wrap {
		margin-bottom: -40px;
	}

	.cdz-hero-monitor__row {
		grid-template-columns: 1fr auto;
		gap: 8px 12px;
	}

	.cdz-hero-monitor__latency {
		display: none;
	}
}