/*
 * tdn-strengths-grid — Phase C.6 Bloc 5 page Agences
 *
 * Grille 2x2 de 4 cards "Atouts" avec icon container gradient pink-200,
 * pill ATOUT 01-04, titre Medium 36px, séparateur gradient, paragraphe.
 * Border-top 4px pink-500 sur chaque card.
 *
 * Spec Figma : node 8115:2697.
 */

/* ===== 1. Section root ============================================ */
.tdn-strengths-grid {
	background: var(--tdn-color-pink-50-deep, #fbe9ec);
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	padding: 100px 60px 150px;
	position: relative;
	overflow: hidden;
}

.tdn-strengths-grid__inner {
	max-width: 1320px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 80px;
	align-items: center;
}

/* ===== 2. Heading (eyebrow + H2) ================================== */
.tdn-strengths-grid__heading {
	display: flex;
	flex-direction: column;
	gap: 32px;
	align-items: center;
	max-width: 993px;
	width: 100%;
}

.tdn-strengths-grid__eyebrow {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

.tdn-strengths-grid__eyebrow-dash {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--tdn-color-pink-200, #C06D80);
}

.tdn-strengths-grid__eyebrow-text {
	font-family: inherit;
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 16px;
	line-height: 1;
	letter-spacing: var(--tdn-letter-spacing-wider);
	text-transform: uppercase;
	color: var(--tdn-color-pink-200, #C06D80);
	font-style: normal;
}

.tdn-strengths-grid__title {
	margin: 0;
	font-family: inherit;
	font-weight: var(--tdn-h2-weight);
	font-size: 60px;
	line-height: 1.2;
	letter-spacing: -1.8px;
	color: var(--tdn-color-midnight-900, #1A1A2E);
	font-style: normal;
	text-align: center;
	max-width: 698px;
}

.tdn-strengths-grid__title-accent {
	color: var(--tdn-color-pink-500, #C06D80);
}

/* ===== 3. Cards grid 2x2 ========================================== */
.tdn-strengths-grid__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 40px;
	width: 100%;
	align-items: stretch;
}

.tdn-strengths-grid__card {
	background: #fff;
	border-top: 4px solid var(--tdn-color-pink-500, #C06D80);
	border-radius: 24px;
	padding: 52px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	box-shadow: 0 14px 16px rgba(0, 0, 0, 0.1);
}

/* ===== 4. Card icon container (gradient pink-200) ================= */
.tdn-strengths-grid__card-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	border-radius: 16px;
	background: linear-gradient(135deg, var(--tdn-color-pink-200, #C06D80) 0%, var(--tdn-color-pink-200, #C06D80) 14%, var(--tdn-color-pink-200, #C06D80) 28%, var(--tdn-color-pink-200, #C06D80) 57%, var(--tdn-color-pink-200, #C06D80) 71%, var(--tdn-color-pink-200, #C06D80) 86%, var(--tdn-color-pink-200, #C06D80) 100%);
	color: #fff;
	flex-shrink: 0;
}

.tdn-strengths-grid__card-icon img,
.tdn-strengths-grid__card-icon svg {
	width: 32px;
	height: 32px;
	display: block;
}

/* ===== 5. Card pill ATOUT XX ====================================== */
.tdn-strengths-grid__card-pill {
	display: inline-flex;
	align-self: flex-start;
	padding: 6px 16px;
	background: var(--tdn-color-pink-50-deep, #fbe9ec);
	border-radius: 9999px;
	font-family: inherit;
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.6px;
	color: var(--tdn-color-pink-200, #C06D80);
	white-space: nowrap;
	font-style: normal;
}

/* ===== 6. Card title ============================================== */
.tdn-strengths-grid__card-title {
	margin: 0;
	font-family: inherit;
	font-weight: var(--tdn-font-weight-medium);
	font-size: 36px;
	line-height: 45px;
	letter-spacing: -2px;
	color: var(--tdn-color-midnight-900, #1A1A2E);
	font-style: normal;
}

/* ===== 7. Card divider gradient =================================== */
.tdn-strengths-grid__card-divider {
	display: block;
	width: 64px;
	height: 4px;
	background: linear-gradient(to right, var(--tdn-color-pink-100, #F6C9D0) 0%, rgba(242, 194, 202, 0.93) 50%, rgba(242, 194, 202, 0.2) 70%);
	border-radius: 99px;
}

/* ===== 8. Card description ======================================== */
.tdn-strengths-grid__card-desc {
	margin: 0;
	font-family: inherit;
	font-weight: 400;
	font-size: 20px;
	line-height: 1.5;
	color: var(--tdn-color-midnight-900, #1A1A2E);
	font-style: normal;
}

/* ===== 9. Cool-shapes décoratifs bottom-right (Spec Figma 8115:2698) ====
 * 4 mask-image SVG 200×200 pink-200 sur fond pink-50 saturé.
 * Position : right -50, bottom 9.81, w 400, h 400, grid 2x2 sans gap, opacity 0.5. */
.tdn-strengths-grid__decor {
	position: absolute;
	bottom: 9.81px;
	right: -50px;
	display: grid;
	grid-template-columns: 200px 200px;
	grid-template-rows: 200px 200px;
	gap: 0;
	width: 400px;
	height: 400px;
	pointer-events: none;
	opacity: 0.5;
	z-index: 0;
}

.tdn-strengths-grid__decor-cell {
	width: 200px;
	height: 200px;
	background-color: var(--tdn-color-pink-200, #C06D80);
	mask-size: 100% 100%;
	-webkit-mask-size: 100% 100%;
	mask-repeat: no-repeat;
	-webkit-mask-repeat: no-repeat;
	mask-position: 0 0;
	-webkit-mask-position: 0 0;
}

.tdn-strengths-grid__decor-cell--1 {
	mask-image: url("../../images/decorations/agency-shapes/shape-200-1.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-200-1.svg");
}
.tdn-strengths-grid__decor-cell--2 {
	mask-image: url("../../images/decorations/agency-shapes/shape-200-2.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-200-2.svg");
}
.tdn-strengths-grid__decor-cell--3 {
	mask-image: url("../../images/decorations/agency-shapes/shape-200-3.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-200-3.svg");
}
.tdn-strengths-grid__decor-cell--4 {
	mask-image: url("../../images/decorations/agency-shapes/shape-200-4.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-200-4.svg");
}

.tdn-strengths-grid__inner {
	position: relative;
	z-index: 1;
}

/* ===== 10. Responsive <1024 ======================================= */
@media (max-width: 1023px) {
	.tdn-strengths-grid {
		padding: 80px 32px 100px;
	}

	.tdn-strengths-grid__title {
		font-size: 42px;
		letter-spacing: -1.4px;
	}

	.tdn-strengths-grid__cards {
		gap: 24px;
	}

	.tdn-strengths-grid__card {
		padding: 32px;
	}

	.tdn-strengths-grid__card-title {
		font-size: 28px;
		line-height: 36px;
		letter-spacing: -1.5px;
	}

	.tdn-strengths-grid__card-desc {
		font-size: 18px;
	}

	.tdn-strengths-grid__decor {
		width: 280px;
		height: 280px;
		grid-template-columns: 140px 140px;
		grid-template-rows: 140px 140px;
		right: -50px;
	}

	.tdn-strengths-grid__decor-cell {
		width: 140px;
		height: 140px;
	}
}

/* ===== 11. Responsive <768 (mobile — CAR0 carrousel horizontal) ====
 * Markup CAR0 + décor desktop masqué. padding-inline 0 pour CAR0 full-width,
 * heading conserve padding 16. */
@media (max-width: 767px) {
	.tdn-strengths-grid {
		padding: 60px 0 80px;
	}

	.tdn-strengths-grid__inner {
		gap: 40px;
		padding: 0;
	}

	.tdn-strengths-grid__heading {
		padding: 0 16px;
	}

	.tdn-strengths-grid__title {
		font-size: 32px;
		letter-spacing: -1px;
	}

	.tdn-strengths-grid.gk-carousel {
		--gk-carousel-card-width: calc(100vw - 80px);
		--gk-carousel-gap: 16px;
		--gk-carousel-peek: 24px;
	}

	.tdn-strengths-grid__cards.gk-carousel__viewport {
		display: flex;
		grid-template-columns: none;
		flex-direction: row;
		gap: var(--gk-carousel-gap);
		align-items: stretch;
		scroll-padding-inline-start: 40px;
		padding-block: 8px 32px;
	}

	.tdn-strengths-grid__card {
		padding: 24px;
		-webkit-tap-highlight-color: transparent;
	}

	.tdn-strengths-grid__card-title {
		font-size: 22px;
		line-height: 1.2;
	}

	.tdn-strengths-grid__card-desc {
		font-size: 16px;
	}

	.tdn-strengths-grid__decor {
		display: none;
	}

	.tdn-strengths-grid .gk-carousel__indicators {
		gap: 0;
	}

	.tdn-strengths-grid .gk-carousel__dot {
		width: 28px;
		height: 28px;
	}
}

/* ===== 12. Ajouts défensifs typo ================================== */
.tdn-strengths-grid,
.tdn-strengths-grid__title,
.tdn-strengths-grid__eyebrow-text,
.tdn-strengths-grid__card-title,
.tdn-strengths-grid__card-desc,
.tdn-strengths-grid__card-pill {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}