/* Sora Variable — embarquée dans le thème, aucune dépendance externe */
@font-face {
	font-family: 'Sora Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url('../fonts/sora-latin.woff2') format('woff2-variations');
	unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face {
	font-family: 'Sora Variable';
	font-style: normal;
	font-display: swap;
	font-weight: 100 800;
	src: url('../fonts/sora-latin-ext.woff2') format('woff2-variations');
	unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}


/* =========================================================
   Styles globaux (repris de src/styles/global.css)
   ========================================================= */
:root {
	/* Typography */
	--font-display: 'Sora Variable', 'Segoe UI', system-ui, -apple-system, sans-serif;
	--font-body: 'Segoe UI', system-ui, -apple-system, sans-serif;

	/* Brand colors (carried over from the HTC Solutions internal tool) */
	--color-accent: #f97316;
	--color-accent-dark: #ea580c;
	--color-accent2: #64748b;
	--color-accent3: #f59e0b;
	--color-dark: #333333;
	--color-dark-soft: #3f3f46;

	--color-bg: #f0f4f8;
	--color-surface: #ffffff;
	--color-subtle: #f8fafc;
	--color-text: #0f172a;
	--color-muted: #64748b;
	--color-border: #e2e8f0;

	--color-success: #10b981;
	--color-warning: #f59e0b;
	--color-danger: #ef4444;

	/* Spacing scale */
	--space-1: 4px;
	--space-2: 8px;
	--space-3: 12px;
	--space-4: 16px;
	--space-5: 24px;
	--space-6: 32px;
	--space-7: 48px;
	--space-8: 64px;
	--space-9: 96px;

	/* Radius */
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 24px;
	--radius-full: 999px;

	/* Shadows */
	--shadow-sm: 0 1px 4px rgba(0, 0, 0, 0.06);
	--shadow-md: 0 8px 24px rgba(15, 23, 42, 0.08);
	--shadow-lg: 0 20px 60px rgba(0, 0, 0, 0.12);
	--shadow-accent: 0 4px 12px rgba(249, 115, 22, 0.3);

	/* Layout */
	--container-width: 1200px;
}

* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	font-family: var(--font-body);
	background: var(--color-bg);
	color: var(--color-text);
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	display: block;
	max-width: 100%;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	list-style: none;
}

h1,
h2,
h3,
h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	color: var(--color-text);
}

h1 {
	font-size: clamp(2.25rem, 1.8rem + 2vw, 3.5rem);
	font-weight: 800;
	letter-spacing: -0.01em;
}

h2 {
	font-size: clamp(1.75rem, 1.5rem + 1.2vw, 2.5rem);
	letter-spacing: -0.01em;
}

h3 {
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
}

p {
	color: var(--color-muted);
}

.container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--space-5);
}

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	font-family: var(--font-display);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-accent);
}

.section {
	padding-block: var(--space-9);
}

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

.section--dark {
	background: var(--color-dark);
	color: #f9fafb;
}

.section--dark p {
	color: #cbd5e1;
}

.section--dark h1,
.section--dark h2,
.section--dark h3 {
	color: #ffffff;
}

.section-head {
	max-width: 640px;
	margin-bottom: var(--space-7);
}

.section-head p {
	margin-top: var(--space-3);
	font-size: 1.05rem;
}

.section-head--center {
	margin-inline: auto;
	text-align: center;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: 13px 26px;
	border-radius: var(--radius-sm);
	font-family: var(--font-display);
	font-size: 0.95rem;
	font-weight: 600;
	border: none;
	cursor: pointer;
	transition:
		transform 0.15s ease,
		opacity 0.15s ease,
		border-color 0.15s ease,
		background 0.15s ease;
}

.btn-primary {
	background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
	color: #fff;
	box-shadow: var(--shadow-accent);
}

.btn-primary:hover {
	opacity: 0.92;
	transform: translateY(-1px);
}

.btn-outline {
	border: 1.5px solid var(--color-border);
	background: #fff;
	color: var(--color-text);
}

.btn-outline:hover {
	border-color: var(--color-accent2);
}

.btn-ghost {
	background: transparent;
	color: inherit;
	border: 1.5px solid rgba(255, 255, 255, 0.25);
}

.btn-ghost:hover {
	border-color: rgba(255, 255, 255, 0.6);
}

.btn-lg {
	padding: 16px 32px;
	font-size: 1.05rem;
	border-radius: var(--radius-sm);
}

.card {
	background: var(--color-surface);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	border: 1px solid var(--color-border);
	transition:
		box-shadow 0.2s ease,
		transform 0.2s ease,
		border-color 0.2s ease;
}

.card--hover:hover {
	box-shadow: var(--shadow-md);
	transform: translateY(-3px);
	border-color: transparent;
}

.badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: 4px 12px;
	border-radius: var(--radius-full);
	font-size: 0.75rem;
	font-weight: 700;
	font-family: var(--font-display);
}

.badge--accent {
	background: #fff7ed;
	color: var(--color-accent-dark);
}

.grid {
	display: grid;
	gap: var(--space-5);
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: var(--space-3);
	top: -60px;
	background: var(--color-dark);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
	z-index: 1000;
	transition: top 0.15s ease;
}

.skip-link:focus {
	top: var(--space-3);
}

@media (max-width: 720px) {
	.section {
		padding-block: var(--space-8);
	}
}

.prose {
	max-width: 68ch;
	font-size: 1.05rem;
	line-height: 1.75;
	color: var(--color-text);
}

.prose h2 {
	margin-top: var(--space-7);
	margin-bottom: var(--space-3);
	font-size: 1.5rem;
}

.prose h3 {
	margin-top: var(--space-6);
	margin-bottom: var(--space-2);
}

.prose p {
	color: var(--color-text);
	margin-bottom: var(--space-4);
}

.prose ul,
.prose ol {
	margin: 0 0 var(--space-4) var(--space-5);
	color: var(--color-text);
}

.prose ul {
	list-style: disc;
}

.prose ol {
	list-style: decimal;
}

.prose li {
	margin-bottom: var(--space-2);
}

.prose a {
	color: var(--color-accent-dark);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: rgba(234, 88, 12, 0.35);
	text-underline-offset: 3px;
}

.prose a:hover {
	text-decoration-color: currentColor;
}

.prose em {
	color: var(--color-muted);
}

.prose strong {
	font-weight: 700;
}

/* =========================================================
   Composants
   ========================================================= */

/* ---------- components/BlogCard.astro ---------- */
.blog-card {
		display: flex;
		flex-direction: column;
		padding: var(--space-5);
	}

	.blog-card__meta {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.78rem;
		font-weight: 600;
		color: var(--color-muted);
		margin-bottom: var(--space-3);
	}

	.blog-card h3 {
		font-size: 1.1rem;
		margin-bottom: var(--space-2);
	}

	.blog-card p {
		font-size: 0.9rem;
		flex: 1;
	}

	.blog-card__tags {
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
		margin-top: var(--space-4);
	}

	.blog-card__link {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: var(--space-4);
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--color-accent-dark);
	}

/* ---------- components/Breadcrumbs.astro ---------- */
.breadcrumbs ol {
		display: flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px;
	}

	.breadcrumbs li {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.82rem;
	}

	.breadcrumbs a {
		color: var(--color-muted);
		font-weight: 600;
	}

	.breadcrumbs a:hover {
		color: var(--color-accent-dark);
	}

	.breadcrumbs svg {
		color: var(--color-border);
	}

	.breadcrumbs span[aria-current] {
		color: var(--color-text);
		font-weight: 600;
	}

/* ---------- components/CTASection.astro ---------- */
.cta-section {
		background: var(--color-dark);
		background-image: radial-gradient(circle at 15% 20%, rgba(249, 115, 22, 0.25), transparent 55%);
		border-radius: var(--radius-lg);
		margin-inline: var(--space-5);
		margin-bottom: 20px;
		padding: var(--space-8) var(--space-6);
	}

	.cta-section__inner {
		padding: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
		max-width: calc(var(--container-width) - var(--space-9));
	}

	.cta-section h2 {
		color: #fff;
	}

	.cta-section p {
		color: #cbd5e1;
		margin-top: var(--space-2);
		max-width: 46ch;
	}

	.cta-section .btn {
		flex-shrink: 0;
	}

	@media (max-width: 780px) {
		.cta-section__inner {
			flex-direction: column;
			align-items: flex-start;
		}

		.cta-section {
			margin-inline: var(--space-4);
			padding: var(--space-7) var(--space-5);
		}
	}

/* ---------- components/ContactForm.astro ---------- */
.contact-form {
		padding: var(--space-6);
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.form-row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-4);
	}

	.form-group {
		display: flex;
		flex-direction: column;
		gap: 6px;
	}

	.form-group label {
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--color-text);
	}

	.form-group input,
	.form-group select,
	.form-group textarea {
		padding: 11px 14px;
		border: 1.5px solid var(--color-border);
		border-radius: var(--radius-sm);
		font-family: var(--font-body);
		font-size: 0.92rem;
		color: var(--color-text);
		background: #fff;
		outline: none;
		transition: border-color 0.15s ease;
	}

	.form-group input:focus,
	.form-group select:focus,
	.form-group textarea:focus {
		border-color: var(--color-accent);
		box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.12);
	}

	.contact-form .btn {
		align-self: flex-start;
	}

	.contact-form__note {
		font-size: 0.78rem;
		color: var(--color-muted);
		background: var(--color-subtle);
		border-radius: var(--radius-sm);
		padding: var(--space-3);
	}

	.contact-form__note code {
		font-family: monospace;
		background: var(--color-border);
		padding: 1px 5px;
		border-radius: 4px;
	}

	@media (max-width: 640px) {
		.form-row {
			grid-template-columns: 1fr;
		}
	}

/* ---------- components/FeatureList.astro ---------- */
.feature-list {
		display: flex;
		flex-direction: column;
		gap: var(--space-3);
	}

	.feature-list--2col {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3) var(--space-5);
	}

	.feature-list li {
		display: flex;
		align-items: flex-start;
		gap: 10px;
		font-size: 0.96rem;
		color: var(--color-text);
	}

	.feature-list li svg {
		color: var(--color-accent);
		flex-shrink: 0;
		margin-top: 2px;
	}

	.feature-list--dark li {
		color: #e5e7eb;
	}

	@media (max-width: 640px) {
		.feature-list--2col {
			grid-template-columns: 1fr;
		}
	}

/* ---------- components/Footer.astro ---------- */
.site-footer {
		background: var(--color-dark);
		color: #d1d5db;
		padding-block: var(--space-8) var(--space-5);
	}

	.site-footer__grid {
		display: grid;
		grid-template-columns: 1.6fr 1fr 1fr 1fr 1.1fr;
		gap: var(--space-6);
	}

	.footer-brand .brand {
		display: inline-flex;
		align-items: center;
	}

	.footer-brand__icon {
		display: block;
		width: 48px;
		height: 48px;
		flex-shrink: 0;
		background: url('../img/logo.png') no-repeat left center;
		background-size: 172px 65.5px;
	}

	.footer-brand__top {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		margin-bottom: var(--space-4);
	}

	.footer-brand p {
		font-size: 0.88rem;
		color: #9ca3af;
		max-width: 30ch;
	}

	.footer-platform-link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		margin-top: var(--space-4);
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--color-accent);
	}

	.footer-platform-link:hover {
		color: var(--color-accent3);
	}

	.footer-col h3 {
		font-family: var(--font-display);
		font-size: 0.75rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: #9ca3af;
		margin-bottom: var(--space-4);
	}

	.footer-col ul {
		display: flex;
		flex-direction: column;
		gap: 10px;
	}

	.footer-col a {
		font-size: 0.88rem;
		color: #d1d5db;
	}

	.footer-col a:hover {
		color: #fff;
	}

	.footer-contact li {
		display: flex;
		flex-direction: column;
		gap: 2px;
	}

	.footer-contact a {
		display: flex;
		align-items: center;
		gap: 8px;
		font-weight: 600;
		color: #fff;
	}

	.footer-contact a svg {
		color: var(--color-accent);
		flex-shrink: 0;
	}

	.footer-contact span {
		font-size: 0.76rem;
		color: #9ca3af;
		padding-left: 24px;
	}

	.footer-contact .footer-coverage {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 8px;
		font-size: 0.88rem;
		font-weight: 600;
		color: #fff;
	}

	.footer-coverage svg {
		color: var(--color-accent);
		flex-shrink: 0;
	}

	.footer-bottom {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: var(--space-3);
		margin-top: var(--space-8);
		padding-top: var(--space-5);
		border-top: 1px solid rgba(255, 255, 255, 0.08);
		font-size: 0.8rem;
		color: #9ca3af;
	}

	/*
	 * La règle globale « p { color: muted } » s'applique directement aux
	 * paragraphes et l'emporte sur la couleur héritée du conteneur : le texte
	 * ressortait en gris foncé sur fond foncé, quasi illisible.
	 */
	.footer-bottom p {
		color: inherit;
	}

	@media (max-width: 980px) {
		.site-footer__grid {
			grid-template-columns: 1fr 1fr;
		}

		.footer-brand {
			grid-column: 1 / -1;
		}
	}

	@media (max-width: 560px) {
		.site-footer__grid {
			grid-template-columns: 1fr;
		}
	}

/* ---------- components/Header.astro ---------- */
.site-header {
		position: sticky;
		top: 0;
		z-index: 100;
		background: rgba(255, 255, 255, 0.92);
		backdrop-filter: blur(10px);
		border-bottom: 1px solid var(--color-border);
	}

	.site-header__bar {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		height: 76px;
	}

	.brand {
		display: flex;
		align-items: center;
		flex-shrink: 0;
	}

	.brand__logo {
		height: 60px;
		width: auto;
	}

	.nav {
		flex: 1;
	}

	.nav__list {
		display: flex;
		align-items: center;
		gap: var(--space-2);
	}

	.nav__item a,
	.nav__trigger {
		display: flex;
		align-items: center;
		gap: 6px;
		padding: 10px 14px;
		border-radius: var(--radius-sm);
		font-size: 0.92rem;
		font-weight: 600;
		color: var(--color-text);
		background: none;
		border: none;
		font-family: var(--font-body);
		cursor: pointer;
	}

	/*
	 * Uniquement les liens de premier niveau : « À propos » se coupait en deux
	 * lignes. Le sélecteur doit rester direct, sinon il atteint aussi les liens
	 * des menus déroulants, dont les noms longs déborderaient du cadre.
	 */
	.nav__item > a,
	.nav__trigger {
		white-space: nowrap;
	}

	.nav__item a:hover,
	.nav__trigger:hover {
		background: var(--color-subtle);
		color: var(--color-accent-dark);
	}

	.nav__item--dropdown {
		position: relative;
	}

	.nav__trigger svg {
		transition: transform 0.15s ease;
	}

	.nav__item--dropdown.is-open .nav__trigger svg {
		transform: rotate(180deg);
	}

	.nav__dropdown {
		display: none;
		position: absolute;
		top: calc(100% + 10px);
		left: 50%;
		transform: translateX(-50%);
		width: 460px;
		background: var(--color-surface);
		border-radius: var(--radius-md);
		box-shadow: var(--shadow-lg);
		border: 1px solid var(--color-border);
		padding: var(--space-4);
	}

	.nav__item--dropdown.is-open .nav__dropdown {
		display: block;
	}

	.nav__dropdown-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 2px;
	}

	.nav__dropdown-grid a {
		display: flex;
		align-items: center;
		gap: 10px;
		padding: 9px 10px;
		border-radius: var(--radius-sm);
		font-size: 0.86rem;
		font-weight: 600;
		color: var(--color-text);
	}

	.nav__dropdown-grid a:hover {
		background: var(--color-subtle);
		color: var(--color-accent-dark);
	}

	.nav__dropdown-grid svg {
		color: var(--color-accent);
		flex-shrink: 0;
	}

	.nav__dropdown-all {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: var(--space-3);
		padding-top: var(--space-3);
		border-top: 1px solid var(--color-border);
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--color-accent-dark);
	}

	.site-header__actions {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		flex-shrink: 0;
	}

	.btn-espace-client {
		display: flex;
		align-items: center;
		gap: 6px;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--color-accent2);
		padding: 8px 10px;
	}

	.btn-espace-client:hover {
		color: var(--color-text);
	}

	.nav__toggle {
		display: none;
		background: none;
		border: none;
		cursor: pointer;
		color: var(--color-text);
		padding: 6px;
	}

	/*
	 * Entre le menu mobile (980px) et les grands écrans, la barre débordait :
	 * le bouton « Demander une démo » sortait de l'écran. On resserre les
	 * espacements et on réduit « Espace client » à sa seule icône.
	 */
	@media (max-width: 1220px) {
		.site-header__bar {
			gap: var(--space-4);
		}

		.nav__list {
			gap: 0;
		}

		.nav__item a,
		.nav__trigger {
			padding: 10px 9px;
			font-size: 0.88rem;
		}

		.btn-espace-client span {
			display: none;
		}

		.brand__logo {
			height: 48px;
		}
	}

	@media (max-width: 980px) {
		.btn-espace-client span {
			display: none;
		}

		.nav {
			position: fixed;
			inset: 76px 0 0 0;
			background: var(--color-surface);
			padding: var(--space-5);
			overflow-y: auto;
			transform: translateY(-8px);
			opacity: 0;
			pointer-events: none;
			transition:
				opacity 0.18s ease,
				transform 0.18s ease;
		}

		.nav.is-open {
			opacity: 1;
			transform: translateY(0);
			pointer-events: auto;
		}

		.nav__list {
			flex-direction: column;
			align-items: stretch;
			gap: var(--space-2);
		}

		.nav__item a,
		.nav__trigger {
			width: 100%;
			justify-content: space-between;
			padding: var(--space-3);
		}

		.nav__dropdown {
			position: static;
			transform: none;
			width: auto;
			box-shadow: none;
			border: none;
			padding: var(--space-2) 0 var(--space-3);
		}

		.nav__dropdown-grid {
			grid-template-columns: 1fr;
		}

		.site-header__actions .btn {
			display: none;
		}

		.nav__toggle {
			display: flex;
		}
	}

	@media (max-width: 560px) {
		.btn-espace-client {
			display: none;
		}
	}

/* ---------- components/IconBadge.astro ---------- */
.icon-badge {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--radius-md);
		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
		color: #fff;
		flex-shrink: 0;
	}

/* ---------- components/IncludedList.astro ---------- */
.included-list {
		background: var(--color-subtle);
		border: 1px solid var(--color-border);
		border-radius: var(--radius-md);
		padding: var(--space-5);
	}

	.included-list h3 {
		font-size: 0.95rem;
		margin-bottom: var(--space-4);
	}

	.included-list ul {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-3) var(--space-4);
	}

	.included-list--compact ul {
		grid-template-columns: repeat(3, 1fr);
	}

	.included-list li {
		display: flex;
		align-items: flex-start;
		gap: 8px;
		font-size: 0.85rem;
		color: var(--color-text);
	}

	.included-list li svg {
		color: var(--color-success);
		flex-shrink: 0;
		margin-top: 1px;
	}

	@media (max-width: 640px) {
		.included-list ul,
		.included-list--compact ul {
			grid-template-columns: 1fr;
		}
	}

/* ---------- components/PlatformFeatureGrid.astro ---------- */
.platform-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-5);
	}

	.platform-grid__col {
		padding: var(--space-6);
	}

	.platform-grid__head {
		display: flex;
		align-items: center;
		gap: var(--space-3);
		margin-bottom: var(--space-2);
	}

	.platform-grid__icon {
		width: 44px;
		height: 44px;
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fff7ed, #ffedd5);
		color: var(--color-accent-dark);
		flex-shrink: 0;
	}

	.platform-grid__sub {
		font-size: 0.88rem;
		margin-bottom: var(--space-5);
	}

	@media (max-width: 780px) {
		.platform-grid {
			grid-template-columns: 1fr;
		}
	}

/* ---------- components/ProductCard.astro ---------- */
.product-card {
		display: flex;
		flex-direction: column;
		padding: var(--space-5);
	}

	.product-card__icon {
		width: 52px;
		height: 52px;
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		background: var(--color-subtle);
		color: var(--color-accent2);
		margin-bottom: var(--space-4);
	}

	.product-card h3 {
		font-size: 1.05rem;
		margin-bottom: var(--space-2);
	}

	.product-card p {
		font-size: 0.9rem;
		flex: 1;
	}

	.product-card__link {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: var(--space-4);
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--color-accent-dark);
	}

/* ---------- components/SectorCard.astro ---------- */
.sector-card {
		display: flex;
		flex-direction: column;
		padding: var(--space-5);
		position: relative;
	}

	.sector-card__badge {
		position: absolute;
		top: var(--space-4);
		right: var(--space-4);
	}

	.sector-card__icon {
		width: 52px;
		height: 52px;
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fff7ed, #ffedd5);
		color: var(--color-accent-dark);
		margin-bottom: var(--space-4);
	}

	.sector-card h3 {
		font-size: 1.1rem;
		margin-bottom: var(--space-2);
	}

	.sector-card p {
		font-size: 0.9rem;
		flex: 1;
	}

	.sector-card__link {
		display: flex;
		align-items: center;
		gap: 6px;
		margin-top: var(--space-4);
		font-size: 0.85rem;
		font-weight: 700;
		color: var(--color-accent-dark);
	}

/* ---------- components/StatsBar.astro ---------- */
.stats-bar {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: var(--space-5);
	}

	.stats-bar__item {
		display: flex;
		align-items: center;
		gap: var(--space-3);
	}

	.stats-bar__icon {
		width: 46px;
		height: 46px;
		flex-shrink: 0;
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fff7ed, #ffedd5);
		color: var(--color-accent-dark);
	}

	.stats-bar--dark .stats-bar__icon {
		background: rgba(249, 115, 22, 0.15);
		color: var(--color-accent);
	}

	.stats-bar__item strong {
		display: block;
		font-family: var(--font-display);
		font-size: 1.7rem;
		font-weight: 800;
		line-height: 1.1;
		color: var(--color-text);
	}

	.stats-bar--dark .stats-bar__item strong {
		color: #fff;
	}

	.stats-bar__item span {
		display: block;
		font-size: 0.82rem;
		color: var(--color-muted);
		margin-top: 2px;
	}

	.stats-bar--dark .stats-bar__item span {
		color: #cbd5e1;
	}

	@media (max-width: 780px) {
		.stats-bar {
			grid-template-columns: 1fr 1fr;
		}
	}

/* ---------- components/ValueCard.astro ---------- */
.value-card {
		padding: var(--space-5);
	}

	.value-card__icon {
		width: 48px;
		height: 48px;
		border-radius: var(--radius-full);
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
		color: #fff;
		margin-bottom: var(--space-4);
	}

	.value-card h3 {
		font-size: 1.05rem;
		margin-bottom: var(--space-2);
	}

	.value-card p {
		font-size: 0.9rem;
	}

/* =========================================================
   Pages
   ========================================================= */

/* ---------- pages/404.astro ---------- */
.not-found {
		padding-block: var(--space-9);
	}

	.not-found__inner {
		text-align: center;
		max-width: 480px;
	}

	.not-found__icon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 80px;
		height: 80px;
		border-radius: 50%;
		background: linear-gradient(135deg, #fff7ed, #ffedd5);
		color: var(--color-accent-dark);
		margin-bottom: var(--space-5);
	}

	.not-found__inner p {
		margin: var(--space-3) 0 var(--space-6);
	}

	.not-found__actions {
		display: flex;
		gap: var(--space-3);
		justify-content: center;
		flex-wrap: wrap;
	}

/* ---------- pages/a-propos.astro ---------- */
.section-head p + p {
		margin-top: var(--space-4);
	}

	.mission {
		max-width: 760px;
	}

	.mission h2 {
		margin-top: var(--space-4);
	}

	.mission p {
		margin-top: var(--space-4);
	}

	.values-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.coverage {
		display: flex;
		align-items: center;
		gap: var(--space-5);
		padding: var(--space-6);
	}

	.coverage__icon {
		width: 56px;
		height: 56px;
		flex-shrink: 0;
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fff7ed, #ffedd5);
		color: var(--color-accent-dark);
	}

	.coverage p {
		margin-top: var(--space-2);
	}

	@media (max-width: 980px) {
		.values-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 560px) {
		.values-grid {
			grid-template-columns: 1fr;
		}

		.coverage {
			flex-direction: column;
			text-align: center;
		}
	}

/* ---------- blog/[slug].astro ---------- */
.article {
		max-width: 800px;
	}

	.article__header {
		margin: var(--space-5) 0 var(--space-7);
	}

	.article__meta {
		display: flex;
		align-items: center;
		gap: 8px;
		font-size: 0.85rem;
		font-weight: 600;
		color: var(--color-muted);
		margin-bottom: var(--space-3);
	}

	.article__tags {
		display: flex;
		gap: 8px;
		margin-top: var(--space-4);
	}

/* ---------- blog/index.astro ---------- */
.blog-grid {
		grid-template-columns: repeat(3, 1fr);
		margin-top: var(--space-2);
	}

	@media (max-width: 980px) {
		.blog-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 640px) {
		.blog-grid {
			grid-template-columns: 1fr;
		}
	}

/* ---------- pages/contact.astro ---------- */
.contact-grid {
		display: grid;
		grid-template-columns: 1.5fr 1fr;
		gap: var(--space-6);
		align-items: start;
		margin-top: var(--space-6);
	}

	.contact-side {
		display: flex;
		flex-direction: column;
		gap: var(--space-4);
	}

	.contact-card {
		display: flex;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-4) var(--space-5);
	}

	.contact-card__icon {
		width: 44px;
		height: 44px;
		flex-shrink: 0;
		border-radius: var(--radius-md);
		display: flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(135deg, #fff7ed, #ffedd5);
		color: var(--color-accent-dark);
	}

	.contact-card h3 {
		font-size: 0.95rem;
	}

	.contact-card p {
		font-size: 0.85rem;
		margin-top: 2px;
	}

	@media (max-width: 900px) {
		.contact-grid {
			grid-template-columns: 1fr;
		}
	}

/* ---------- pages/index.astro ---------- */
.hero {
		padding-block: var(--space-9) var(--space-8);
		background: linear-gradient(180deg, #fff 0%, var(--color-bg) 100%);
		overflow: hidden;
	}

	.hero__content {
		max-width: 720px;
	}

	.hero__content p {
		margin-top: var(--space-4);
		font-size: 1.08rem;
		max-width: 54ch;
	}

	.hero__actions {
		display: flex;
		gap: var(--space-3);
		margin-top: var(--space-6);
		flex-wrap: wrap;
	}

	.sector-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.flagship__inner {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: var(--space-7);
		align-items: center;
	}

	.flagship__content .badge {
		margin-bottom: var(--space-3);
	}

	.flagship__content p {
		margin-top: var(--space-3);
		margin-bottom: var(--space-5);
		max-width: 50ch;
	}

	.flagship__features {
		background: var(--color-surface);
		border: 1px solid rgba(255, 255, 255, 0.1);
		border-radius: var(--radius-md);
		padding: var(--space-5);
		box-shadow: var(--shadow-lg);
	}

	.values-grid {
		grid-template-columns: repeat(4, 1fr);
	}

	.platform-teaser__inner {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-6);
	}

	.platform-teaser__inner > div:first-child {
		max-width: 56ch;
	}

	.platform-teaser__inner p {
		margin: var(--space-3) 0 var(--space-5);
	}

	.platform-teaser__icons {
		display: flex;
		gap: var(--space-4);
		flex-shrink: 0;
	}

	.platform-teaser__icons span {
		width: 64px;
		height: 64px;
		border-radius: var(--radius-md);
		background: var(--color-surface);
		border: 1px solid var(--color-border);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--color-accent);
	}

	@media (max-width: 980px) {
		.sector-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.flagship__inner {
			grid-template-columns: 1fr;
		}

		.values-grid {
			grid-template-columns: repeat(2, 1fr);
		}

		.platform-teaser__inner {
			flex-direction: column;
			align-items: flex-start;
		}
	}

	@media (max-width: 560px) {
		.sector-grid {
			grid-template-columns: 1fr;
		}

		.values-grid {
			grid-template-columns: 1fr;
		}
	}

/* ---------- pages/mentions-legales.astro ---------- */
.legal {
		max-width: 760px;
	}

	.legal__placeholder {
		padding: var(--space-5);
		margin-top: var(--space-5);
		border-style: dashed;
	}

	.legal__placeholder p + p {
		margin-top: var(--space-3);
	}

	.legal__placeholder a {
		color: var(--color-accent-dark);
		font-weight: 600;
	}

/* ---------- plateforme/index.astro ---------- */
.platform-cta {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: var(--space-5);
		padding: var(--space-6);
		flex-wrap: wrap;
	}

	.platform-cta p {
		margin-top: var(--space-2);
	}

/* ---------- pages/politique-de-confidentialite.astro ---------- */
.legal {
		max-width: 760px;
	}

	.legal__placeholder {
		padding: var(--space-5);
		margin-top: var(--space-5);
		border-style: dashed;
	}

	.legal__placeholder p + p {
		margin-top: var(--space-3);
	}

	.legal__placeholder a {
		color: var(--color-accent-dark);
		font-weight: 600;
	}

/* ---------- produits/[slug].astro ---------- */
.product-hero__inner {
		display: flex;
		align-items: flex-start;
		gap: var(--space-5);
		margin-top: var(--space-5);
	}

	.product-hero__inner p {
		margin: var(--space-3) 0 var(--space-5);
		max-width: 60ch;
		font-size: 1.05rem;
	}

	.product-detail {
		display: grid;
		grid-template-columns: 1.4fr 1fr;
		gap: var(--space-7);
		align-items: start;
	}

	.other-products {
		grid-template-columns: repeat(3, 1fr);
	}

	@media (max-width: 780px) {
		.product-hero__inner {
			flex-direction: column;
		}

		.product-detail {
			grid-template-columns: 1fr;
		}

		.other-products {
			grid-template-columns: 1fr;
		}
	}

/* ---------- produits/index.astro ---------- */
.product-grid {
		grid-template-columns: repeat(3, 1fr);
		margin-top: var(--space-2);
	}

	@media (max-width: 980px) {
		.product-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 560px) {
		.product-grid {
			grid-template-columns: 1fr;
		}
	}

/* ---------- secteurs/[slug].astro ---------- */
.sector-hero__inner {
		display: flex;
		align-items: flex-start;
		gap: var(--space-5);
		margin-top: var(--space-5);
	}

	.sector-hero__inner .badge {
		margin-bottom: var(--space-3);
	}

	.sector-hero__inner p {
		margin: var(--space-3) 0 var(--space-5);
		max-width: 60ch;
		font-size: 1.05rem;
	}

	.other-sectors {
		grid-template-columns: repeat(3, 1fr);
	}

	@media (max-width: 780px) {
		.sector-hero__inner {
			flex-direction: column;
		}

		.other-sectors {
			grid-template-columns: 1fr;
		}
	}

/* ---------- secteurs/index.astro ---------- */
.sector-grid {
		grid-template-columns: repeat(4, 1fr);
		margin-top: var(--space-2);
	}

	@media (max-width: 980px) {
		.sector-grid {
			grid-template-columns: repeat(2, 1fr);
		}
	}

	@media (max-width: 560px) {
		.sector-grid {
			grid-template-columns: 1fr;
		}
	}