/* borne.css — Version optimisée */
:root {
	--color-bg: #ffffff;
	--color-text: #0d1b2a;
	--color-muted: #51627a;
	--color-alt: #f6f8fa;
	--color-primary: #16a085;
	--color-accent: #0ea5a5;
	--color-border: #d9e1ea;
	--radius: 0.625em;
	--shadow: 0 0.375em 1.25em rgba(13, 27, 42, 0.08);
}

/* Layout */
.container {
	width: min(70em, 92vw);
	margin: 0 auto;
}

.section--tight { padding: 2.5em 0; }
.section--alt { padding: 3em 0; }
@media (max-width: 900px) {
	.section--tight:first-of-type { padding-top: 0; }
	.section--tight { padding: 1.5em 0; }
	.section--alt { padding: 2em 0; }
}

.section--alt {
	background: var(--color-alt);
}

.twoColumns {
	display: flex;
	gap: 3em;
	flex-direction: row;
	align-items: center;
}
@media (max-width: 900px) {
	.twoColumns { flex-direction: column; align-items: center;}
	.section1 .twoColumns { flex-direction: column-reverse; }
}


/* Hero */
.hero__subtitle {
	font-size: 1.125em;
	color: var(--color-muted);
	margin: 0 0 1.125em;
}

@media (max-width: 900px) {
	.hero__subtitle {
		font-size: 1.25em;
	}
}

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5em;
	height: 2.75em;
	padding: 0 1.125em;
	font-weight: 700;
	text-decoration: none;
	border-radius: 0.5em;
	border: 0.125em solid transparent;
	transition: transform 0.08s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn:hover {
	transform: translateY(-0.0625em);
}

.btn:active {
	transform: translateY(0);
}

.btn--primary {
	background: var(--color-primary);
	color: white;
	box-shadow: 0 0.375em 1.125em rgba(22, 160, 133, 0.25);
}

.btn--primary:hover {
	background: #129276;
}

.btn--ghost {
	background: transparent;
	color: var(--color-text);
	border-color: var(--color-border);
}

/* Typography */
h2 {
	font-size: 1.625em;
	margin: 0 0 0.5em;
	line-height: 1.25;
}

h3 {
	font-size: 1.25em;
	margin: 0 0 0.5em;
	line-height: 1.25;
}


.lead {
	color: var(--color-muted);
	font-size: 1.125em;
	margin-bottom: 0.75em;
}

/* Media blocks */
.media {
	margin: 0;
}

.media img {
	width: auto;
	height: 18em;
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	border: 0.0625em solid var(--color-border);
}

/* Lists */
.list {
	margin: 0.75em 0 0;
	padding: 0;
	list-style: none;
}

.list li {
	margin-bottom: 0.5em;
	padding-left: 0;
}

.list--icons li {
	position: relative;
	padding-left: 1.5em;
}

.list--icons li::before {
	content: "•";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--color-accent);
	font-weight: 900;
}

/* Cards */
.cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.125em;
	margin-top: 1.125em;
}

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

.card {
	background: #fff;
	border: 0.0625em solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 1.125em;
}

/* Benefits */
.benefits {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.125em;
}

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

.benefit {
	background: #fff;
	border: 0.0625em solid var(--color-border);
	border-radius: var(--radius);
	padding: 1.125em;
}

.link {
	color: var(--color-primary);
	font-weight: 700;
	text-decoration: none;
}

.link:hover {
	text-decoration: underline;
}

/* Steps */
.steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.125em;
	margin-top: 1.125em;
}

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

.step {
	background: #fff;
	border: 0.0625em solid var(--color-border);
	border-radius: var(--radius);
	padding: 1em;
	display: flex;
	align-items: flex-start;
	gap: 0.7em;
}

.step__num {
	flex-shrink: 0;
	display: inline-grid;
	place-items: center;
	width: 1.75em;
	height: 1.75em;
	border-radius: 50%;
	background: var(--color-accent);
	color: #fff;
	font-weight: 800;
	margin-bottom: 0.5em;
}

.step p {
	flex: 1;
	margin: 0;
}

/* Table */
.table-wrap {
	background: #fff;
	border: 0.0625em solid var(--color-border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	overflow: hidden;
	margin-top: 1.5em;
}

.table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

@media (min-width: 800px) {
	.table thead th:first-child,
	.table tbody td:first-child {
		width: 20em;
	}
}

.table th,
.table td {
	text-align: left;
	padding: 0.875em 1em;
	border-bottom: 0.0625em solid var(--color-border);
}

.table tbody tr:last-child td {
	border-bottom: none;
}

.table thead th {
	background: #f0f5f8;
	font-weight: 800;
	color: var(--color-text);
}

/* CTA */
.section--cta {
	background: var(--color-text);
	color: #fff;
	text-align: center;
}

.cta {
	padding: 1em 0;
}

.cta__actions {
	display: flex;
	gap: 0.75em;
	justify-content: center;
	margin-top: 0.75em;
}

.cta__actions .btn { background: #4caf50; font-size: 1.3em; }
@media (min-width: 600px) { .cta__actions .btn { font-size: 1.5em; } }

.cta__actions .btn img {
	height: 1.3em;
	margin-right: 0.3em;
}