/* Gabarit Outils — nodes Figma (référence 1728).
   Titre 157→391, outils 460→1373, encadré 1479→1869, liens 1963→2461. */

.outils > section {
	position: relative;
}

.ou-hero {
	padding-top: clamp(2.25rem, 3.99306vw, 4.3125rem); /* 69 : 157 − 88 */
	padding-left: 2.83565%;  /* 49 */
	padding-right: 2.89352%;
}

.ou-hero__title {
	max-width: 48.55740%; /* 791 sur les 1629 utiles */
	font-family: var(--ff-display);
	font-size: var(--fs-h1);
	line-height: var(--lh-h1);
	color: var(--c-ink);
}

.ou-hero__intro {
	margin-top: clamp(0.5rem, 0.92593vw, 1rem); /* 16 : 174 − 158 */
	max-width: 48.55740%;                       /* 791 sur 1629 */
}

/* ─────────────────── Outils de calcul — y 460 → 1373 ─────────────────────── */

.ou-tools {
	margin-top: clamp(2.25rem, 3.99306vw, 4.3125rem); /* 69 : 460 − 391 */
	padding-inline: 2.89352%;                          /* 50 → 1628 */
}

.ou-tools__badge {
	padding-block: 11px; /* hauteur fixe 33 */
}

.ou-tools__grid {
	margin-top: clamp(1.5rem, 2.54630vw, 2.75rem); /* 44 : 537 − 493 */
	display: grid;
	grid-template-columns: repeat(3, 31.51106%); /* 513 sur 1628 */
	column-gap: 2.70270%;                        /* 44 */
	row-gap: clamp(2rem, 3.70370vw, 4rem);       /* 64 : 987 − 923 */
}

.ou-tool {
	display: flex;
	flex-direction: column;
	min-height: clamp(16rem, 22.33796vw, 24.125rem); /* 386 */
	border: var(--rule) solid var(--c-line);
	padding-top: clamp(2.5rem, 4.68750vw, 5.0625rem);    /* 81 : 618 − 537 */
	padding-bottom: clamp(0.75rem, 0.98380vw, 1.0625rem); /* 17 : 923 − 906 */
	padding-left: 6.62768%;  /* 34 sur une carte de 513 */
	padding-right: 4.67836%; /* 24 */
	transition: border-color var(--t-fast);
}

.ou-tool:hover {
	border-color: var(--c-ink);
}

.ou-tool__title {
	margin-top: clamp(2rem, 3.81944vw, 4.125rem); /* 66 : 695 − 629 */
	font-size: var(--fs-card);
	line-height: var(--lh-card);
	letter-spacing: var(--ls-card);
	color: var(--c-ink);
}

.ou-tool__text {
	/* Le contenu de la carte fait déjà 455 (513 − 34 − 24) : pas de max-width. */
	margin-top: clamp(0.25rem, 0.40509vw, 0.4375rem); /* 7 : 735 − 728 */
}

/* Pied de carte plaqué en bas. Le fournisseur n'est pas collé à droite : il
   démarre à 281 du bord du contenu (node x=365 pour une carte à x=50). */
.ou-tool__foot {
	display: grid;
	grid-template-columns: 61.75824% 1fr; /* 281 sur 455 */
	align-items: center;
	margin-top: auto;
	padding-top: clamp(1.5rem, 2.89352vw, 3.125rem);
}

.ou-tool__source {
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--c-ink);
	opacity: var(--o-text);
}

/* ───────────────────── Encadré — y 1479 → 1869 ───────────────────────────── */

.ou-note {
	margin-top: clamp(3rem, 6.13426vw, 6.625rem); /* 106 : 1479 − 1373 */
	display: grid;
	justify-items: center;
}

.ou-note__card {
	width: 45.65972%; /* 789 */
	border: var(--rule) solid var(--c-line);
	padding-top: clamp(3rem, 5.55556vw, 6rem);       /* 96 : 1575 − 1479 */
	padding-bottom: clamp(2.5rem, 4.97685vw, 5.375rem); /* 86 : 390 bordures comprises */
	text-align: center;
}

.ou-note__title {
	font-size: var(--fs-card);
	line-height: var(--lh-card);
	letter-spacing: var(--ls-card);
	color: var(--c-ink);
}

.ou-note__text {
	max-width: 69.96198%; /* 552 sur 789 */
	margin-top: clamp(1rem, 1.33102vw, 1.4375rem); /* 23 : 1631 − 1608 */
	margin-inline: auto;
}

/* ──────────────────── Liens utiles — y 1963 → 2461 ───────────────────────── */

.ou-links {
	margin-top: clamp(3rem, 5.43981vw, 5.875rem);      /* 94 : 1963 − 1869 */
	margin-bottom: clamp(4rem, 8.79630vw, 9.5rem);     /* 152 : 2613 − 2461 */
	padding-inline: 2.89352%;                           /* 50 → 1628 */
}

.ou-links__badge {
	padding-block: 11px;
}

.ou-links__grid {
	margin-top: clamp(1.5rem, 2.43056vw, 2.625rem); /* 42 : 2038 − 1996 */
	display: grid;
	grid-template-columns: repeat(2, 48.46437%);    /* 789 sur 1628 */
	column-gap: 3.07125%;                            /* 50 */
	row-gap: clamp(1.5rem, 2.14120vw, 2.3125rem);    /* 37 : 2153 − 2116 */
}

/* ─────────────────────────── Reflow ──────────────────────────────────────── */

@media (max-width: 1439px) {
	.ou-tools__grid {
		grid-template-columns: repeat(2, 48%);
		column-gap: 4%;
	}
}

@media (max-width: 1199px) {
	.ou-hero,
	.ou-tools,
	.ou-links {
		padding-inline: var(--gutter-text);
	}

	.ou-hero__title,
	.ou-hero__intro {
		max-width: 46ch;
	}

	.ou-note__card {
		width: auto;
		margin-inline: var(--gutter-text);
		padding-inline: var(--gutter-text);
	}

	.ou-note__text {
		max-width: 46ch;
	}

	.ou-links__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
	}
}

@media (max-width: 767px) {
	.ou-tools__grid {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	.ou-tool {
		min-height: 0;
		padding-block: clamp(2rem, 6vw, 3rem);
	}
}