/* Fondations et réglages globaux */
:root {
	color-scheme: light;
	--page-bg: #f4f2ed;
	--text: #1d1c1a;
	--muted: #6a675f;
	--subtle: #8a867c;
	--border: #dedad1;
	--surface-border: #e2ded5;
	--surface: #fff;
	--hover-surface: #f8f6f1;
	--green: #2f6b52;
	--green-bright: #2f8c5a;
	--preview-border: #ebe7de;
	--preview-start: #f3f0e9;
	--preview-end: #eeebe3;
	--private-bg: #ebe8e1;
	--private-border: #e0dcd3;
	--private-text: #4a4842;
	--private-icon-bg: #e0dcd3;
	--private-icon-text: #7a766c;
	--action-bg: #1d1c1a;
	--action-text: #f4f2ed;
	color: var(--text);
	background: var(--page-bg);
	font-family: "Geist", system-ui, sans-serif;
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--page-bg: #171916;
	--text: #f1eee6;
	--muted: #b5b0a5;
	--subtle: #989388;
	--border: #3b3d36;
	--surface-border: #45473f;
	--surface: #242721;
	--hover-surface: #2d3029;
	--green: #83c69a;
	--green-bright: #6dcc8b;
	--preview-border: #484a42;
	--preview-start: #30332c;
	--preview-end: #292c26;
	--private-bg: #2a2c27;
	--private-border: #4a4c43;
	--private-text: #d2cec3;
	--private-icon-bg: #44473e;
	--private-icon-text: #c2bdb1;
	--action-bg: #f1eee6;
	--action-text: #1d1c1a;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body {
	background: var(--page-bg);
	-webkit-font-smoothing: antialiased;
	transition: background-color .2s, color .2s;
}
a { color: inherit; text-decoration: none; }

/* Structure générale et en-tête */
.page-shell {
	min-height: 100vh;
	max-width: 1180px;
	margin: 0 auto;
	padding: 22px 24px 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.site-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	flex-wrap: wrap;
	gap: 16px;
	padding-bottom: 20px;
	border-bottom: 1px solid var(--border);
}

.brand-block {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.brand-block h1 {
	margin: 0;
	font: 400 clamp(40px, 6vw, 64px)/1 "Instrument Serif", Georgia, serif;
}

.brand-block h1 span {
	color: var(--green);
	font-style: italic;
}

.brand-block p {
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

.status-pill {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px 14px;
	border: 1px solid var(--surface-border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	font: 12px "Geist Mono", monospace;
}

.status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--green-bright);
	animation: pulse 2.4s infinite;
}

.header-controls {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 10px;
}

/* Carte principale et listes de services */
.service-layout {
	flex: 1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
	gap: 24px;
	align-items: stretch;
}

.theme-toggle {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	border: 1px solid var(--surface-border);
	border-radius: 999px;
	background: var(--surface);
	color: var(--text);
	cursor: pointer;
	font: 12px "Geist Mono", monospace;
	transition: background-color .2s, border-color .2s, color .2s;
}

.theme-toggle:hover { background: var(--hover-surface); }
.theme-toggle:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }
.theme-toggle span:first-child { font-size: 16px; line-height: 1; }

.featured-card {
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 24px;
	border: 1px solid var(--surface-border);
	border-radius: 18px;
	background: var(--surface);
	box-shadow: 0 1px 2px rgb(30 28 24 / 4%);
	transition: .25s;
}

.featured-card:hover {
	border-color: var(--green);
	box-shadow: 0 18px 40px -18px rgb(30 28 24 / 25%);
	transform: translateY(-2px);
}

.section-kicker,
.section-heading {
	display: flex;
	justify-content: space-between;
	font: 11px "Geist Mono", monospace;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.section-kicker { color: var(--green); }
.section-kicker span:last-child,
.section-heading { color: var(--subtle); }

.portfolio-preview {
	flex: 1;
	min-height: 120px;
	display: grid;
	place-items: center;
	border: 1px solid var(--preview-border);
	border-radius: 12px;
	background: repeating-linear-gradient(135deg, var(--preview-start) 0 10px, var(--preview-end) 10px 20px);
	color: var(--subtle);
	font: 12px "Geist Mono", monospace;
}

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

.featured-content h2 {
	margin: 0 0 6px;
	font: 44px/1 "Instrument Serif", Georgia, serif;
}

.featured-content p {
	max-width: 390px;
	margin: 0;
	color: var(--muted);
	font-size: 15px;
}

.action-pill {
	flex: none;
	padding: 11px 18px;
	border-radius: 999px;
	background: var(--action-bg);
	color: var(--action-text);
	font-size: 14px;
	font-weight: 500;
}

.service-groups { display: flex; flex-direction: column; gap: 22px; }
.service-section { display: flex; flex-direction: column; gap: 8px; }
.section-heading { padding: 0 4px; }
.service-list { overflow: hidden; border: 1px solid var(--surface-border); border-radius: 16px; background: var(--surface); }

.service-link {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-top: 1px solid var(--surface-border);
	transition: background .2s;
}

.service-link:first-child { border-top: 0; }
.service-link:hover { background: var(--hover-surface); }

.service-icon {
	width: 40px;
	height: 40px;
	display: grid;
	place-items: center;
	overflow: hidden;
	border-radius: 10px;
	background: color-mix(in srgb, var(--green) 14%, var(--surface));
	color: var(--green);
	font: 500 13px "Geist Mono", monospace;
}

.service-icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: inherit;
}

.icon-fallback {
	display: none;
	font: 500 13px "Geist Mono", monospace;
}

.icon-fallback.is-visible { display: block; }

.service-copy { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.service-name { font-size: 16px; font-weight: 500; }
.service-description,
.service-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.service-description { color: var(--muted); font-size: 13px; }
.service-sub { color: var(--green); font: 11.5px "Geist Mono", monospace; }
.private-list { border-style: dashed; background: var(--private-bg); }
.private-list .service-link { border-color: var(--private-border); color: var(--private-text); }
.private-list .service-icon { background: var(--private-icon-bg); color: var(--private-icon-text); }

.access-badge {
	padding: 4px 10px 4px 8px;
	border: 1px solid var(--private-border);
	border-radius: 999px;
	background: var(--page-bg);
	color: var(--muted);
	font-size: 11.5px;
	white-space: nowrap;
}

.site-footer {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	padding-top: 14px;
	border-top: 1px solid var(--border);
	color: var(--subtle);
	font: 11.5px "Geist Mono", monospace;
}

/* Animation et adaptation mobile */
@keyframes pulse {
	0%, 100% { box-shadow: 0 0 0 0 rgb(47 140 90 / 0%); }
	10% { box-shadow: 0 0 0 0 rgb(47 140 90 / 45%); }
	70% { box-shadow: 0 0 0 7px rgb(47 140 90 / 0%); }
}

@media (max-width: 560px) {
	.page-shell { padding: 18px 16px 14px; }
	.header-controls { align-items: flex-start; }
	.featured-card { padding: 18px; }
	.featured-content { align-items: flex-start; flex-direction: column; }
	.featured-content h2 { font-size: 38px; }
	.service-link { grid-template-columns: 36px minmax(0, 1fr); }
	.service-icon { width: 36px; height: 36px; }
	.service-sub, .access-badge { display: none; }
}