/*
 * tdn-solutions-grid — Phase C.6 Bloc 3 Page Entreprises (Nos Solutions)
 *
 * Section blanche avec :
 *   - Eyebrow "— NOS SOLUTIONS —" + H2 2 lignes (split positioning)
 *   - 4 cards layout zigzag asymétrique (col droite décalée +133/+93px verticalement)
 *   - Chaque card : numéro filigrane 150px opacity 0.10 abs left=-40, cool-shape SVG abs right top
 *     décor mask-image, titre + bloc douleur (gris) + bloc solution TDN (pink/midnight)
 *
 * Spec Figma : node 8115:1915. Pattern générique réutilisable potentiel KP/PS.
 */

/* ===== 1. Section root ============================================
 * Background midnight imposé Morgan (override Figma blanc/clair).
 * Cf. decisions.md règle 9 : NE PAS revérifier Figma sur ce fond. */
.tdn-solutions-grid {
	background: var(--tdn-color-midnight-900, #1A1A2E) !important;
	padding: 100px 0 100px;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	overflow: hidden;
}

.tdn-solutions-grid__inner {
	max-width: 1476px;
	margin: 0 auto;
	padding: 0 100px;
}

/* ===== 2. Header ================================================== */
.tdn-solutions-grid__header {
	position: relative;
	height: 240px;
	margin-bottom: 60px;
	max-width: 1025px;
	margin-left: auto;
	margin-right: auto;
}

/* Eyebrow centré horizontalement en haut */
.tdn-solutions-grid__eyebrow {
	position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);
	display: flex;
	gap: 14px;
	align-items: center;
	white-space: nowrap;
}

/* Eyebrow + dashes : pink-100 (lisibilité sur fond midnight ; fusion ex-pink-300, 2026-05-29) */
.tdn-solutions-grid__eyebrow-dash {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--tdn-color-pink-100, #F6C9D0);
	flex-shrink: 0;
}

.tdn-solutions-grid__eyebrow-text {
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 16px;
	letter-spacing: var(--tdn-letter-spacing-wider);
	text-transform: uppercase;
	color: var(--tdn-color-pink-100, #F6C9D0);
	font-style: normal;
}

/* H2 : 2 lignes positionnées à des x différents (Figma split absolute) */
.tdn-solutions-grid__title {
	margin: 0;
	font-style: normal;
}

/* H2 ligne 1 : blanc sur fond midnight (override Figma neutral-900) */
.tdn-solutions-grid__title-line-1 {
	position: absolute;
	left: 0;
	top: 111px;
	transform: translateY(-50%);
	font-weight: var(--tdn-h2-weight);
	font-size: clamp(40px, 4.5vw, 60px);
	line-height: 1;
	letter-spacing: -0.05em;
	color: #fff;
	white-space: nowrap;
	font-style: normal;
}

/* H2 ligne 2 : pink-100 italique (lisibilité sur midnight ; fusion ex-pink-300) */
.tdn-solutions-grid__title-line-2 {
	position: absolute;
	left: 552px;
	top: 205.5px;
	transform: translateY(-50%);
	font-weight: var(--tdn-h2-weight);
	font-style: italic;
	font-size: clamp(40px, 4.5vw, 60px);
	line-height: 1;
	letter-spacing: -0.05em;
	color: var(--tdn-color-pink-100, #F6C9D0);
	white-space: nowrap;
}

/* ===== 3. Cards container (zigzag asymmetric) ==================== */
.tdn-solutions-grid__cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 100px 100px;
	align-items: start;
}

/* Col droite (Card 2 et 4) décalée vers le bas — effet zigzag Figma */
.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(2) {
	margin-top: 133px;
}

.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(3) {
	margin-top: -83px; /* remontée pour rapprocher card 3 sous card 1 (différence 1018-351-567 = 100, mais layout zigzag) */
}

.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(4) {
	margin-top: 50px;
}

/* ===== 4. Card individuelle ======================================
 * overflow: hidden imposé Morgan : numéro filigrane et cool-shape clippés
 * au bbox de la carte (override Figma qui montre du débordement).
 * Cf. decisions.md règle 9. */
.tdn-solutions-grid__card {
	position: relative;
	background: var(--tdn-color-pink-50, #FEF6F9);
	border-radius: 32px;
	padding: 120px 40px 40px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

/* Numéro filigrane gros opacity 0.10 abs left=-40 */
.tdn-solutions-grid__card-number {
	position: absolute;
	left: -40px;
	top: 124px;
	transform: translateY(-50%);
	margin: 0;
	font-family: 'Georgia', serif;
	font-style: italic;
	font-weight: 400;
	font-size: 150px;
	line-height: 0.32; /* mirror Figma leading-[48px] sur font-size 150 */
	color: var(--tdn-color-pink-500, #C06D80);
	opacity: 0.10;
	pointer-events: none;
	user-select: none;
	white-space: nowrap;
}

/* Cool-shape mask SVG : positions + transforms individuels Figma exacts.
 * Card 1 : right=-9 top=-20 + scaleX(-1) (mirror horizontal)
 * Card 2 : right=-9 top=-20 + rotate(-90deg)
 * Card 3 : right=-28.83 top=-40 + rotate(180deg)
 * Card 4 : right=-9 top=-20 + scaleX(-1) (identique Card 1) */
.tdn-solutions-grid__card-shape {
	display: block;
	position: absolute;
	width: 151.83px;
	height: 150px;
	background-color: var(--tdn-color-pink-500, #C06D80);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-size: contain;
	mask-size: contain;
	pointer-events: none;
}

.tdn-solutions-grid__card-shape--1 {
	right: -9px;
	top: -20px;
	transform: scaleX(-1);
	-webkit-mask-image: url("../../images/solutions-grid/icons/card-1.svg");
	mask-image: url("../../images/solutions-grid/icons/card-1.svg");
}

.tdn-solutions-grid__card-shape--2 {
	right: -9px;
	top: -20px;
	width: 150px; /* Card 2 size 150x150, pas 151.83 */
	transform: rotate(-90deg);
	-webkit-mask-image: url("../../images/solutions-grid/icons/card-2.svg");
	mask-image: url("../../images/solutions-grid/icons/card-2.svg");
}

.tdn-solutions-grid__card-shape--3 {
	right: -28.83px;
	top: -40px;
	transform: rotate(180deg);
	-webkit-mask-image: url("../../images/solutions-grid/icons/card-3.svg");
	mask-image: url("../../images/solutions-grid/icons/card-3.svg");
}

.tdn-solutions-grid__card-shape--4 {
	right: -9px;
	top: -20px;
	transform: scaleX(-1);
	-webkit-mask-image: url("../../images/solutions-grid/icons/card-4.svg");
	mask-image: url("../../images/solutions-grid/icons/card-4.svg");
}

/* ===== 5. Card content (titre + douleur + solution) ============== */
.tdn-solutions-grid__card-inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.tdn-solutions-grid__card-title {
	margin: 0;
	font-weight: var(--tdn-h2-weight);
	font-size: 36px;
	line-height: 1.1;
	letter-spacing: -0.025em;
	color: var(--tdn-color-neutral-900, #2A2827);
	font-style: normal;
}

.tdn-solutions-grid__card-block {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

.tdn-solutions-grid__card-eyebrow {
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 12px;
	letter-spacing: var(--tdn-letter-spacing-wider);
	text-transform: uppercase;
	font-style: normal;
}

.tdn-solutions-grid__card-eyebrow--pain {
	color: var(--tdn-color-neutral-700, #4D4D4C);
}

.tdn-solutions-grid__card-eyebrow--solution {
	color: var(--tdn-color-pink-500, #C06D80);
}

.tdn-solutions-grid__card-text {
	margin: 0;
	font-size: 18px;
	line-height: 29.25px;
	font-style: normal;
}

.tdn-solutions-grid__card-text--pain {
	font-weight: 400;
	color: var(--tdn-color-neutral-700, #4D4D4C);
}

.tdn-solutions-grid__card-text--solution {
	font-weight: var(--tdn-font-weight-bold);
	color: var(--tdn-color-neutral-900, #2A2827);
}

/* ===== 6. Container douleur+solution gap ========================= */
.tdn-solutions-grid__card-blocks {
	display: flex;
	flex-direction: column;
	gap: 32px;
}

/* ===== 7. Responsive <1024 ======================================= */
@media (max-width: 1023px) {
	.tdn-solutions-grid {
		padding: 80px 0;
	}

	.tdn-solutions-grid__inner {
		padding: 0 32px;
	}

	.tdn-solutions-grid__header {
		height: auto;
		margin-bottom: 40px;
	}

	.tdn-solutions-grid__eyebrow {
		position: static;
		transform: none;
		justify-content: center;
		margin-bottom: 24px;
	}

	.tdn-solutions-grid__title-line-1,
	.tdn-solutions-grid__title-line-2 {
		position: static;
		transform: none;
		text-align: center;
		font-size: 40px;
		white-space: normal;
		display: block;
		left: auto;
		top: auto;
	}

	.tdn-solutions-grid__cards {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(2),
	.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(3),
	.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(4) {
		margin-top: 0;
	}
}

/* ===== 8. Responsive <768 (mobile — CAR0 carrousel horizontal) ====
 * Markup CAR0 (gk-carousel + viewport + track + card + nav + indicators).
 * Recette identique event-types-grid / partners-band : card 100vw-80,
 * gap 16, peek 24 symétrique gauche/droite via scroll-padding 40px. */
@media (max-width: 767px) {
	.tdn-solutions-grid__inner {
		padding: 0;
	}

	.tdn-solutions-grid__header {
		padding: 0 16px;
	}

	.tdn-solutions-grid__title-line-1,
	.tdn-solutions-grid__title-line-2 {
		font-size: 32px;
	}

	/* Override grid 1col tablette → gk-carousel flex row + reset zigzag */
	.tdn-solutions-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-end: 24px;
	}

	/* Variables CAR0 spécifiques (defaults gk-carousel = pink-500 arrow /
	 * pink-100 dot, lisibles sur fond midnight de la section). */
	.tdn-solutions-grid.gk-carousel {
		--gk-carousel-card-width: calc(100vw - 80px);
		--gk-carousel-gap: 16px;
		--gk-carousel-peek: 24px;
	}

	/* Reset des margin-top zigzag desktop sur toutes les cards mobile */
	.tdn-solutions-grid__card,
	.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(2),
	.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(3),
	.tdn-solutions-grid__cards > .tdn-solutions-grid__card:nth-child(4) {
		margin-top: 0;
		padding: 100px 24px 32px;
	}

	.tdn-solutions-grid__card-title {
		font-size: 28px;
	}

	.tdn-solutions-grid__card-shape {
		width: 100px;
		height: 100px;
	}

	.tdn-solutions-grid__card-number {
		font-size: 100px;
		left: -20px;
	}

	.tdn-solutions-grid__card {
		-webkit-tap-highlight-color: transparent;
	}

	/* Indicators compacts 28×28 + gap 0 (resserrer 4 dots) */
	.tdn-solutions-grid .gk-carousel__indicators {
		gap: 0;
	}

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

/* ===== 9. Ajouts défensifs ======================================= */
.tdn-solutions-grid,
.tdn-solutions-grid__title-line-1,
.tdn-solutions-grid__title-line-2,
.tdn-solutions-grid__card-title,
.tdn-solutions-grid__card-text {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}