/**
 * tdn-cards-quad — Phase C.5 Bloc 4 + 5 (fusion fine côté code)
 *
 * Pattern non-synced réutilisable avec 2 variants :
 *   - --variant-light : bg neutral-0, cards neutral-50 + border, divider SVG bottom (Bloc 4 "Pour qui?")
 *   - --variant-pink  : bg pink-100, cards neutral-0 sans border, 2 cool-shapes latéraux (Bloc 5 "Pour quoi?")
 *
 * 4 cards polaroid avec rotations gérées par custom property `--rotation`,
 * modifiers BEM `--card-1` à `--card-4` (8 valeurs desktop + 8 valeurs tablet hardcodées).
 *
 * Conventions reprises :
 *   - `--accent` (Bloc 3 section-intro) pour la couleur de mise en avant titre
 *   - cool-shapes en sous-dossier dédié `decorations/cards-quad/` (Bloc 3 décision §8)
 *   - SVG paramétrable via `--fill-0` (réutilisation de cool-shapes-banner.svg)
 *   - Defensive typo (text-transform / letter-spacing / font-style explicites)
 *
 * Spec Figma : nodes 8115:5951 (Bloc 4 "Pour qui?") et 8115:6134 (Bloc 5 "Pour quoi?").
 * Bande SVG 12 shapes : reuse de cool-shapes-banner.svg (Phase C.3 Contact) avec fill-opacity natif retiré.
 */

/* ===== 1. Bloc racine (commun) =================================== */
.tdn-cards-quad {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 100px 0 150px;
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
}

/* ===== 2. Variants — backgrounds ================================== */
.tdn-cards-quad--variant-light {
	background: var(--tdn-color-neutral-0, #ffffff);
}

.tdn-cards-quad--variant-pink {
	background: var(--tdn-color-pink-100, #F6C9D0);
}

/* ===== Inner wrapper (layout column) ============================== */
.tdn-cards-quad__inner {
	max-width: 1432px;
	margin: 0 auto;
	padding: 0 24px;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 60px;
}

/* ===== 3. Titre H2 ================================================= */
/* Convention --accent : pink-700 (#9c413d — naming Figma incorrect, voir tokens.css ligne 29).
 * Markup : "Pour <span class='__title-accent'>QUI?</span>".
 * Le span est inline (1 ligne visuelle), pas de flex column comme tdn-section-intro. */
.tdn-cards-quad__title {
	--accent: var(--tdn-color-pink-700, #9c413d);
	margin: 0;
	/* Phase 3.6 — semantic layer : h2-lg (gros titre section, weight medium 500) */
	font-family: var(--tdn-h2-lg-family);
	font-weight: var(--tdn-h2-lg-weight);
	font-size: var(--tdn-h2-lg-size);
	line-height: var(--tdn-h2-lg-lh);
	letter-spacing: var(--tdn-h2-lg-ls);
	color: var(--tdn-color-midnight, #1a1a2e);
	text-align: center;
	/* defensive */
	text-transform: var(--tdn-h2-lg-tt);
	font-style: normal;
}

.tdn-cards-quad__title-accent {
	color: var(--accent);
	/* defensive — héritages explicites pour blinder contre overrides parents */
	font-weight: inherit;
	letter-spacing: inherit;
	font-style: inherit;
}

/* Override --accent par variant : light = pink-500 vif (QUI?), pink = pink-700 brun-rouge (QUOI?) */
.tdn-cards-quad--variant-light .tdn-cards-quad__title {
	--accent: var(--tdn-color-pink-500, #C06D80);
}

/* Nav arrows : hidden par défaut (desktop), affichées en mobile via media query. */
.tdn-cards-quad__nav {
	display: none;
}

/* ===== 4. Cards container ========================================= */
.tdn-cards-quad__cards {
	position: relative;
	z-index: 1; /* au-dessus du divider et des decor */
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: stretch;
	gap: 24px;
	width: 100%;
	padding-left: 24px;  /* évite le débordement des cards aux bords du viewport */
	padding-right: 24px;
	box-sizing: border-box;
}

/* ===== 5. Card individuelle (commune) ============================= */
/* flex: 1 1 0 + max-width 360 : cards adaptatives, jamais > 360px,
 * occupent l'espace disponible. Évite débordement structurel
 * (4×383 + 3×24 = 1604 > viewport 1432-padding). */
.tdn-cards-quad__card {
	flex: 1 1 0;
	max-width: 360px;
	min-width: 0;
	padding: 16px;
	border-radius: 24px;
	transform: rotate(var(--rotation, 0deg));
	transition: transform 250ms ease, box-shadow 250ms ease;
	display: flex;
	flex-direction: column;
}

/* ===== 6. Card par variant ======================================== */
.tdn-cards-quad--variant-light .tdn-cards-quad__card {
	background: var(--tdn-color-neutral-50, #fafafa);
	border: 1px solid var(--tdn-color-neutral-100, #f0f0f0);
}

.tdn-cards-quad--variant-pink .tdn-cards-quad__card {
	background: var(--tdn-color-neutral-0, #ffffff);
}

/* ===== 7. Modifiers card-N — 8 règles desktop ===================== */
/* Defaults variant-light (amplitude doublée pour visibilité — ±1°/±0.5° trop subtil à l'œil) */
.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-1 { --rotation: -2deg; }
.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-2 { --rotation: 1deg; }
.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-3 { --rotation: -1deg; }
.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-4 { --rotation: 2deg; }

/* Overrides variant-pink (×2.5 — signal visuel marqué) */
.tdn-cards-quad--variant-pink .tdn-cards-quad__card--card-1 { --rotation: -2.5deg; }
.tdn-cards-quad--variant-pink .tdn-cards-quad__card--card-2 { --rotation: 1.5deg; }
.tdn-cards-quad--variant-pink .tdn-cards-quad__card--card-3 { --rotation: -1.5deg; }
.tdn-cards-quad--variant-pink .tdn-cards-quad__card--card-4 { --rotation: 2.5deg; }

/* ===== 8. Photo container ========================================= */
/* Aspect-ratio 318/272 imposé pour homogénéité visuelle (Q10 validé).
 * Wrappe une <figure> Gutenberg core/image (sélecteur double figure.tdn-cards-quad__photo). */
.tdn-cards-quad__photo {
	position: relative;
	width: 100%;
	aspect-ratio: 318 / 272;
	border-radius: 16px;
	overflow: hidden;
	isolation: isolate;
	margin: 0; /* override default figure margin */
	padding: 0;
}

/* ===== 9. Photo image ============================================= */
.tdn-cards-quad__photo img {
	position: relative; /* nécessaire pour que z-index s'applique */
	z-index: 0;         /* assure que ::before (texture) et ::after (overlay) rendent au-dessus */
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/* ===== 10. Photo overlay tint pink (commun aux 8 cards) =========== */
/* rgba pink-500 alpha 20 % — équivalent du Figma `bg-[rgba(192, 109, 128,0.2)]`.
 * `inset: 0` recouvre la photo entière, `pointer-events: none` n'intercepte pas le hover. */
.tdn-cards-quad__photo::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(192, 109, 128, 0.10); /* réduit 0.20 → 0.10 pour ne pas masquer la photo */
	pointer-events: none;
	border-radius: inherit;
	z-index: 1;
}

/* ===== 11. Photo texture mix-blend (simplification CSS Q8 validée) === */
/* Remplace le rectangle SVG répété de Figma par un linear-gradient léger.
 * `mix-blend-mode: overlay` simule l'effet de grain coloré incliné. */
.tdn-cards-quad__photo::before {
	display: none; /* TEMPORAIRE — désactivé pour confirmer photos visibles, à ré-activer après si OK */
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		135deg,
		rgba(255, 255, 255, 0.30) 0%,
		transparent 50%,
		rgba(0, 0, 0, 0.15) 100%
	);
	mix-blend-mode: overlay;
	opacity: 0.20;
	pointer-events: none;
	border-radius: inherit;
	z-index: 1;
}

/* ===== 12. Caption ================================================ */
/* Nunito Sans 700 (pas 900 — hiérarchie typo préservée vs H2, Q9 validé).
 * `text-transform: capitalize` standardise les casses incohérentes Figma. */
.tdn-cards-quad__caption {
	margin: 0;
	padding: 24px 0 0;
	/* Phase 3.6 — semantic layer : h3 (weight medium 500, less bold). capitalize conservé (signature caption polaroid) */
	font-family: var(--tdn-h3-family);
	font-weight: var(--tdn-h3-weight);
	font-size: var(--tdn-h3-size);
	line-height: var(--tdn-h3-lh);
	color: var(--tdn-color-midnight, #1a1a2e);
	text-align: center;
	text-transform: none;
	/* defensive */
	letter-spacing: normal;
	font-style: normal;
}

/* ===== 13. Hover state ============================================ */
/* Reset rotation + scale 1.03 + box-shadow accentuée + z-index 2 (passe au-dessus des voisines).
 * `:focus-within` inclus pour a11y (clavier). */
.tdn-cards-quad__card:hover,
.tdn-cards-quad__card:focus-within {
	transform: rotate(0deg) scale(1.03);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	z-index: 2;
}

/* ===== 14. Divider Bloc 4 (variant-light only) ==================== */
/* Réutilisation de cool-shapes-banner.svg copié en cards-quad/divider-shapes.svg (fill-opacity natif retiré).
 * Override `--fill-0` côté CSS pour pousser pink-100 plein.
 * Position absolute bottom, déborde latéralement (max-width 1766px = viewBox SVG). */
.tdn-cards-quad--variant-light .tdn-cards-quad__divider {
	--fill-0: var(--tdn-color-pink-100, #F6C9D0);
	position: absolute;
	bottom: 80px; /* remonte pour chevaucher le bas des cards (au lieu du bas absolu de la section) */
	left: 50%;
	transform: translateX(-50%);
	width: 100%;
	max-width: 1766px;
	height: auto;
	aspect-ratio: 1766 / 123; /* double sécurité contre stretch (cf. SVG preserveAspectRatio) */
	pointer-events: none;
	user-select: none;
	z-index: 0;
	display: block;
	opacity: 0.5; /* réduit l'intensité visuelle pour rester en arrière-plan décoratif */
}

/* ===== 15. Decor latéraux Bloc 5 (variant-pink only) ============== */
/* Cool-shapes 200×200 latéraux (shape-left.png, shape-right.png).
 * `opacity: 1` explicite — alpha déjà baked-in dans l'export PNG (learnings.md règle). */
.tdn-cards-quad--variant-pink .tdn-cards-quad__decor {
	position: absolute;
	width: 200px;
	height: 200px;
	pointer-events: none;
	user-select: none;
	z-index: 0;
	opacity: 1;
	display: block;
}

.tdn-cards-quad__decor--left {
	top: 100px;
	left: -50px; /* débordement gauche pour rester visible hors emprise des cards */
}

.tdn-cards-quad__decor--right {
	top: 200px;
	right: -50px; /* débordement droite, idem */
}

/* ===== 16. Responsive 768-1023 (tablette) ========================= */
/* 4 cards → grid 2 × 2. Rotations atténuées ×0.5 (hardcoded, pas de calc()). */
@media (max-width: 1023px) {
	.tdn-cards-quad {
		padding: 80px 0 120px;
	}

	.tdn-cards-quad__cards {
		flex-wrap: wrap;
		gap: 24px;
	}

	.tdn-cards-quad__card {
		width: calc(50% - 12px);
		max-width: 360px;
	}

	/* Variant-light : aligné desktop (±2°/±1°) pour rester visible à toute taille viewport.
	 * Variant-pink : rotations atténuées ×0.5 (déjà marquées de base, l'atténuation reste lisible). */
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-1 { --rotation: -2deg; }
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-2 { --rotation: 1deg; }
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-3 { --rotation: -1deg; }
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-4 { --rotation: 2deg; }
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-1 { --rotation: -1.25deg; }
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-2 { --rotation: 0.75deg; }
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-3 { --rotation: -0.75deg; }
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-4 { --rotation: 1.25deg; }

	/* Decor latéraux : taille réduite, position remontée */
	.tdn-cards-quad--variant-pink .tdn-cards-quad__decor {
		width: 160px;
		height: 160px;
	}

	.tdn-cards-quad__decor--left { top: 120px; }
	.tdn-cards-quad__decor--right { top: 180px; }
}

/* ===== 17. Responsive <768 (mobile) =============================== */
/* Stack vertical, rotations annulées, divider/decor masqués. */
@media (max-width: 1023px) and (min-width: 0) {
	.tdn-cards-quad {
		padding: 60px 0 80px;
	}

	/* Inner mobile : padding horizontal à 0 pour que le scroller touche les bords.
	 * Title reprend padding 24 pour ne pas coller aux bords. */
	.tdn-cards-quad__inner {
		gap: 40px;
		padding-left: 0;
		padding-right: 0;
	}

	.tdn-cards-quad__title {
		padding-left: 24px;
		padding-right: 24px;
	}

	/* Carrousel Pure JS Control — aucune magic CSS.
	 * justify-content: flex-start CRITIQUE pour override le base (ligne 95)
	 * justify-content: center qui est root cause du bug iOS WebKit scroll initial sur card 2.
	 * Pas de scroll-snap, padding-inline, margin calc — le JS calcule scrollLeft pour centrer.
	 * overflow-anchor: none empêche iOS de réancrer sur card 2 quand images lazy chargent. */
	.tdn-cards-quad__cards {
		display: flex;
		flex-direction: row;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: stretch;
		gap: 24px;
		width: 100%;
		max-width: 100%;
		margin: 0;
		padding: 4px 0 12px;
		overflow-x: auto;
		overflow-y: hidden;
		overflow-anchor: none;
		scroll-behavior: auto;
		scrollbar-width: none;
		-ms-overflow-style: none;
		overscroll-behavior-x: contain;
	}

	.tdn-cards-quad__cards::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
	}

	/* Spacers ::before/::after = 64px de chaque côté (== (viewport - card)/2 = 64px sur iPhone 14).
	 * Permettent au JS centerCard de centrer card 1 et card 4 (scroll 0 = card 1 centrée,
	 * scroll max = card 4 centrée). Alternative SAINE au padding-inline qui buggait iOS WebKit. */
	.tdn-cards-quad__cards::before,
	.tdn-cards-quad__cards::after {
		content: '';
		flex: 0 0 64px;
		align-self: stretch;
	}

	.tdn-cards-quad__card {
		flex: 0 0 calc(100vw - 128px);
		width: auto;
		max-width: none;
		min-width: 0;
	}

	/* Nav arrows mobile/tablette : 2 boutons ronds 48px pink outline, gap 32px, centrés sous le carrousel */
	.tdn-cards-quad__nav {
		display: flex;
		align-self: center;
		justify-content: center;
		align-items: center;
		gap: 32px;
		margin-block-start: 24px;
	}

	.tdn-cards-quad__nav-btn {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0;
		border: 2px solid var(--tdn-color-pink-500, #C06D80);
		background: transparent;
		color: var(--tdn-color-pink-500, #C06D80);
		border-radius: 50%;
		cursor: pointer;
		transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
	}

	.tdn-cards-quad__nav-btn:hover:not([disabled]),
	.tdn-cards-quad__nav-btn:focus-visible:not([disabled]) {
		background-color: var(--tdn-color-pink-500, #C06D80);
		color: #fff;
	}

	.tdn-cards-quad__nav-btn[disabled] {
		opacity: 0.35;
		cursor: not-allowed;
	}

	.tdn-cards-quad__nav-btn svg {
		width: 24px;
		height: 24px;
	}

	/* Reset toutes les rotations (cards alignées horizontalement, pas zigzag) */
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-1,
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-2,
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-3,
	.tdn-cards-quad--variant-light .tdn-cards-quad__card--card-4,
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-1,
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-2,
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-3,
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__card--card-4 {
		--rotation: 0deg;
	}

	.tdn-cards-quad--variant-light .tdn-cards-quad__divider,
	.tdn-cards-quad--variant-pink  .tdn-cards-quad__decor {
		display: none;
	}
}

/* ===== 18. Reduced-motion ========================================= */
/* Respect des préférences a11y : pas de rotation, pas de transition.
 * Hover signal minimal conservé via scale léger. */
@media (prefers-reduced-motion: reduce) {
	.tdn-cards-quad__card {
		transform: none;
		transition: none;
	}

	.tdn-cards-quad__card:hover,
	.tdn-cards-quad__card:focus-within {
		transform: scale(1.02);
		transition: transform 100ms ease;
	}
}

/* ===== 19. Ajouts défensifs (cohérence convention C.5) ============ */
/* Blinde contre les overrides parents (theme parent, plugins) qui pourraient
 * casser typo / casse / line-height. Convention adoptée Bloc 3. */
.tdn-cards-quad,
.tdn-cards-quad__title,
.tdn-cards-quad__title-accent,
.tdn-cards-quad__caption {
	font-style: normal;
}

.tdn-cards-quad__title,
.tdn-cards-quad__caption {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}