/*
 * tdn-cas-usage-zigzag — Phase C.6 Bloc 3 page Agences
 *
 * 3 cards en zigzag (haut/bas/haut) reliées par une ligne SVG pink-100.
 * Numéros ronds 1/2/3 (pink-200 dans cercle pink-100) au-dessus de chaque card.
 * Spec Figma : node 8115:2461.
 *
 * Naming générique : transposable sur d'autres pages avec frise zigzag 3 étapes.
 */

/* ===== 1. Section root ============================================ */
.tdn-cas-usage-zigzag {
	background: #fff;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
	padding: 100px 52px 150px;
	position: relative;
	overflow: hidden;
}

.tdn-cas-usage-zigzag__inner {
	max-width: 1442px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 80px;
	align-items: center;
	position: relative;
	z-index: 2;
}

/* ===== 2bis. Cool-shapes décor bg (Spec Figma 8115:2462 + 8115:2507) ====
 * Effet watermark TRÈS subtil (opacity 0.25, doctrine learnings.md cool-shapes filigrane bg).
 * 4 mask-image SVG 120×120 pink-200 par groupe. */
.tdn-cas-usage-zigzag__decor {
	position: absolute;
	width: 240px;
	height: 240px;
	display: grid;
	grid-template-columns: 120px 120px;
	grid-template-rows: 120px 120px;
	gap: 0;
	pointer-events: none;
	z-index: 0;
	opacity: 0.25;
}

.tdn-cas-usage-zigzag__decor--bottom-left {
	left: -30px;
	bottom: 110px;
}

.tdn-cas-usage-zigzag__decor--bottom-right {
	right: -30px;
	bottom: 210px;
}

.tdn-cas-usage-zigzag__decor-shape {
	width: 120px;
	height: 120px;
	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-cas-usage-zigzag__decor-shape--1 {
	mask-image: url("../../images/decorations/agency-shapes/shape-120-1.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-120-1.svg");
}
.tdn-cas-usage-zigzag__decor-shape--2 {
	mask-image: url("../../images/decorations/agency-shapes/shape-120-2.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-120-2.svg");
}
.tdn-cas-usage-zigzag__decor-shape--3 {
	mask-image: url("../../images/decorations/agency-shapes/shape-120-3.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-120-3.svg");
}
.tdn-cas-usage-zigzag__decor-shape--4 {
	mask-image: url("../../images/decorations/agency-shapes/shape-120-4.svg");
	-webkit-mask-image: url("../../images/decorations/agency-shapes/shape-120-4.svg");
}

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

.tdn-cas-usage-zigzag__eyebrow {
	display: flex;
	gap: 14px;
	align-items: center;
	justify-content: center;
}

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

.tdn-cas-usage-zigzag__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-cas-usage-zigzag__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: 775px;
}

.tdn-cas-usage-zigzag__title-accent {
	color: var(--tdn-color-pink-500, #C06D80);
	font-style: italic;
	font-weight: inherit;
}

/* ===== 3. Cards container (zigzag layout) ========================= */
.tdn-cas-usage-zigzag__cards {
	position: relative;
	width: 100%;
	max-width: 1462px;
	height: 703px;
	margin: 0 auto;
	z-index: 1;
}

/* Ligne SVG zigzag DANS __cards pour alignement parfait avec les numéros 1/2/3
 * (même référentiel max-width 1442). Spec Figma 8115:2559 : top 26, height 285,
 * w 1462 (= __cards width). Path coords (3,273) (450,15) (716,150) (971,3) (1465,288)
 * passent par les centres des numéros (Num 1 left=416+36=452, Num 2 left=680+36=716,
 * Num 3 left=944+27=971).
 * Pour viewport > 1442, la ligne ne touche pas les bords du viewport mais reste
 * cohérent avec les numéros (compromis design Figma). */
.tdn-cas-usage-zigzag__line {
	position: absolute;
	left: 0;
	right: 0;
	top: 26px;
	width: 100%;
	height: 285px;
	pointer-events: none;
	z-index: 0;
}

.tdn-cas-usage-zigzag__line svg {
	display: block;
	width: 100%;
	height: 100%;
	overflow: visible;
}

/* ===== 4. Numéros ronds ============================================ */
.tdn-cas-usage-zigzag__num {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 72px;
	height: 72px;
	background: var(--tdn-color-pink-100, #F6C9D0);
	border-radius: 9999px;
	padding: 8px;
	z-index: 2;
}

.tdn-cas-usage-zigzag__num-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	background: var(--tdn-color-pink-200, #C06D80);
	border-radius: 9999px;
	font-family: inherit;
	font-weight: var(--tdn-font-weight-medium);
	font-size: 32px;
	line-height: 20px;
	letter-spacing: 0.64px;
	color: #fff;
	font-style: normal;
}

.tdn-cas-usage-zigzag__num--1 { left: 416px; top: 0; }
.tdn-cas-usage-zigzag__num--2 { left: 680px; top: 130px; }
.tdn-cas-usage-zigzag__num--3 { left: 944px; top: 0; }

/* ===== 5. Cards individuelles (positions absolute zigzag) ========== */
.tdn-cas-usage-zigzag__card {
	position: absolute;
	width: 400px;
	background: #fff;
	border-radius: 32px;
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 16px;
	box-shadow: 0 14px 16px rgba(0, 0, 0, 0.1);
	z-index: 1;
}

.tdn-cas-usage-zigzag__card--1 { left: 76px; top: 17px; }
.tdn-cas-usage-zigzag__card--2 { left: 516px; top: 157px; }
.tdn-cas-usage-zigzag__card--3 { left: 956px; top: 27px; }

.tdn-cas-usage-zigzag__card-photo {
	width: 100%;
	height: 250px;
	object-fit: cover;
	border-radius: 32px;
	display: block;
}

.tdn-cas-usage-zigzag__card-text {
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tdn-cas-usage-zigzag__card-eyebrow {
	margin: 0;
	font-family: inherit;
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 16px;
	line-height: 1;
	letter-spacing: var(--tdn-letter-spacing-pill);
	text-transform: uppercase;
	color: var(--tdn-color-pink-200, #C06D80);
	font-style: normal;
}

.tdn-cas-usage-zigzag__card-title {
	margin: 0;
	font-family: inherit;
	font-weight: var(--tdn-h2-weight);
	font-size: 24px;
	line-height: 1.2;
	color: var(--tdn-color-midnight-900, #1A1A2E);
	font-style: normal;
}

.tdn-cas-usage-zigzag__card-divider {
	display: block;
	width: 96px;
	height: 2px;
	background: linear-gradient(to right, var(--tdn-color-pink-200, #C06D80) 0%, rgba(192, 109, 128, 0) 100%);
	border-radius: 99px;
}

.tdn-cas-usage-zigzag__card-desc {
	margin: 0;
	font-family: inherit;
	font-weight: var(--tdn-font-weight-medium);
	font-size: 18px;
	line-height: 1.5;
	color: var(--tdn-color-neutral-700, #4D4D4C);
	font-style: normal;
}

/* ===== 5bis. Desktop ≥1280 : override gk-carousel reset ===========
 * gk-carousel-mobile.css applique display: contents au viewport en
 * min-width 768px (utile pour patterns en grid/flex). Ce pattern
 * utilise __cards comme contexte positionné (cards en absolute zigzag) :
 * sans cette restauration, height 703px disparaît, cards s'ancrent sur
 * __inner et recouvrent le heading. Sélecteur double-class (specificité
 * 2 vs 1) pour battre .gk-carousel__viewport sans !important. */
@media (min-width: 1280px) {
	.tdn-cas-usage-zigzag__cards.gk-carousel__viewport {
		display: block;
	}
}

/* ===== 6. Responsive <1280 (cards stacked vertical) =============== */
@media (max-width: 1279px) {
	.tdn-cas-usage-zigzag {
		padding: 80px 32px 100px;
	}

	.tdn-cas-usage-zigzag__title {
		font-size: 42px;
		letter-spacing: -1.4px;
	}

	.tdn-cas-usage-zigzag__cards {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 80px;
		align-items: center;
		max-width: 480px;
	}

	.tdn-cas-usage-zigzag__line {
		display: none;
	}

	.tdn-cas-usage-zigzag__card {
		position: relative;
		left: auto;
		right: auto;
		top: auto;
		width: 100%;
	}

	.tdn-cas-usage-zigzag__num {
		position: absolute;
		left: 50%;
		top: -36px;
		transform: translateX(-50%);
	}

	.tdn-cas-usage-zigzag__num--1,
	.tdn-cas-usage-zigzag__num--2,
	.tdn-cas-usage-zigzag__num--3 {
		left: 50%;
		top: -36px;
	}
}

/* ===== 7. Responsive <768 (mobile — CAR0 carrousel horizontal) ====
 * Markup CAR0 (gk-carousel + viewport + track + card + nav + indicators).
 * Décor desktop (line SVG zigzag + 3 numéros) masqué mobile. padding-inline 0
 * pour CAR0 full-width, header conserve padding 16. */
@media (max-width: 767px) {
	.tdn-cas-usage-zigzag {
		padding: 60px 0 80px;
	}

	/* gap 0 + padding 0 : annule le gap desktop qui s'applique aussi aux enfants
	 * flex column créés par le :has() universel de gk-carousel-mobile.css.
	 * Sans ça, espace fantôme entre heading/cards/indicators/nav. */
	.tdn-cas-usage-zigzag__inner {
		padding: 0;
		gap: 0;
	}

	.tdn-cas-usage-zigzag__heading {
		padding: 0 16px;
		margin-bottom: 32px;
	}

	.tdn-cas-usage-zigzag__title {
		font-size: 32px;
		letter-spacing: -1px;
	}

	.tdn-cas-usage-zigzag__line,
	.tdn-cas-usage-zigzag__num {
		display: none;
	}

	/* Cool-shapes décor : restaurer affichage mais repositionner plus haut
	 * (initialement en bottom desktop, débordaient sur les arrows en mobile).
	 * Bottom 30% du viewport CAR0 + scale réduit pour rester subtil. */
	.tdn-cas-usage-zigzag__decor {
		bottom: 35%;
		transform: scale(0.6);
		transform-origin: bottom;
		opacity: 0.5;
		pointer-events: none;
	}

	/* Variables CAR0 (peek 24 symétrique, arrow pink-500 sur fond clair) */
	.tdn-cas-usage-zigzag.gk-carousel {
		--gk-carousel-card-width: calc(100vw - 80px);
		--gk-carousel-gap: 16px;
		--gk-carousel-peek: 24px;
	}

	/* Recette CAR0 propre (Morgan 2026-06-29) : spacers ::before/::after pour
	 * centrer card[1] au load + snap center sur cards (iOS Safari règle 87). */
	.tdn-cas-usage-zigzag__cards.gk-carousel__viewport {
		display: flex;
		grid-template-columns: none;
		flex-direction: row;
		flex-wrap: nowrap;
		gap: var(--gk-carousel-gap);
		align-items: stretch;
		padding-inline: 0;
		scroll-padding-inline-start: 0;
		padding-block: 24px 36px;
		overflow-x: auto;
		overflow-y: visible;
		scroll-snap-type: x mandatory;
	}

	.tdn-cas-usage-zigzag__cards.gk-carousel__viewport::before,
	.tdn-cas-usage-zigzag__cards.gk-carousel__viewport::after {
		content: '';
		flex: 0 0 40px;
		align-self: stretch;
	}

	.tdn-cas-usage-zigzag__cards.gk-carousel__viewport > .gk-carousel__track > .gk-carousel__card,
	.tdn-cas-usage-zigzag__cards.gk-carousel__viewport > .gk-carousel__card {
		scroll-snap-align: center;
	}

	/* Compactage espace : !important pour override le default gk-carousel-mobile.css
	 * (margin 16/24px) malgré la spécificité égale. */
	.tdn-cas-usage-zigzag .gk-carousel__indicators {
		margin-block-start: 8px !important;
	}

	.tdn-cas-usage-zigzag .gk-carousel__nav {
		margin-block-start: 0 !important;
	}

	.tdn-cas-usage-zigzag .gk-carousel__btn {
		width: 40px;
		height: 40px;
	}

	.tdn-cas-usage-zigzag__card {
		-webkit-tap-highlight-color: transparent;
	}

	.tdn-cas-usage-zigzag__card-title {
		font-size: 20px;
	}

	.tdn-cas-usage-zigzag__card-desc {
		font-size: 16px;
	}

	.tdn-cas-usage-zigzag .gk-carousel__indicators {
		gap: 0;
	}

	.tdn-cas-usage-zigzag .gk-carousel__dot {
		width: 28px;
		height: 28px;
	}
}

/* ===== 8. Ajouts défensifs typo =================================== */
.tdn-cas-usage-zigzag,
.tdn-cas-usage-zigzag__title,
.tdn-cas-usage-zigzag__eyebrow-text,
.tdn-cas-usage-zigzag__card-title,
.tdn-cas-usage-zigzag__card-desc,
.tdn-cas-usage-zigzag__card-eyebrow {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}