/**
 * tdn-expertises-list — Phase C.5 Bloc 7
 *
 * Section "Nos Expertises" avec 3 lignes interactives + photo qui apparaît au hover.
 *
 * Layout :
 *   - Header : eyebrow "Nos Expertises" + headline "Ce que nous faisons pour vous"
 *     (accent pink-500 italique) + CTA pill "En savoir plus"
 *   - 3 items service : titre + description, séparés par border-bottom dashed pink-100
 *   - State actif (item--1 par défaut OU au hover) : bg pink-100 rounded 12, color pink-700,
 *     photo absolute right rotated -7° révélée
 *
 * Interactivité 100 % CSS pur via :hover + :has() (cohérent décision §8 mega-prompt).
 *
 * Spec Figma : node 8115:6329 "Section - Nos expertises".
 * Mobile = STAGE 2 : photos masquées <1024, items en stack vertical.
 */

/* ===== 1. Bloc racine =========================================== */
.tdn-expertises-list {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	padding: 100px 0;
	background: var(--tdn-color-pink-50, #fef6f9);
	font-family: var(--tdn-font-family-brand, 'Nunito Sans', sans-serif);
}

/* ===== 2. Inner wrapper ========================================= */
.tdn-expertises-list__inner {
	max-width: 1442px;
	margin: 0 auto;
	padding: 0 61px;
	position: relative;
	z-index: 1;
}

/* ===== 3. Header ================================================ */
.tdn-expertises-list__header {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin-bottom: 60px;
}

/* ===== 4. Eyebrow =============================================== */
.tdn-expertises-list__eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
}

.tdn-expertises-list__eyebrow-line {
	display: block;
	width: 32px;
	height: 1px;
	background: var(--tdn-color-pink-100, #F6C9D0);
}

.tdn-expertises-list__eyebrow-text {
	font-family: inherit;
	font-weight: var(--tdn-eyebrow-weight);
	font-size: 14px;
	line-height: 1;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--tdn-color-pink-200, #c06d80);
}

/* ===== 5. Headline row ========================================== */
.tdn-expertises-list__headline-row {
	display: flex;
	align-items: flex-end;
	gap: 45px;
	flex-wrap: wrap;
}

/* ===== 6. Headline ============================================== */
.tdn-expertises-list__headline {
	margin: 0;
	font-family: var(--tdn-h2-family);
	/* Phase 3.6 — semantic layer h2 (weight medium 500). size/lh/ls signature conservés (62px max + accent italic propre à ce headline) */
	font-weight: var(--tdn-h2-weight);
	font-size: clamp(36px, 5.5vw, 62px);
	line-height: 1.1;
	letter-spacing: -0.04em;
	color: var(--tdn-color-midnight, #1a1a2e);
	display: flex;
	flex-direction: column;
	font-style: normal;
}

.tdn-expertises-list__headline-base {
	display: block;
}

.tdn-expertises-list__headline-accent {
	display: block;
	color: var(--tdn-color-pink-500, #C06D80);
	font-style: italic;
	font-weight: inherit;
}

/* ===== 7. CTA pill ============================================== */
.tdn-expertises-list__cta {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	height: 56px;
	padding: 0 12px 0 24px;
	background: var(--tdn-color-midnight, #1a1a2e);
	border-radius: 99px;
	color: var(--tdn-color-neutral-0, #ffffff);
	font-family: inherit;
	/* Phase 3.6 — retour Morgan : CTA trop gras, 900 → bold 700 */
	font-weight: var(--tdn-button-weight);
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	transition: background 200ms ease, transform 200ms ease;
	font-style: normal;
}

.tdn-expertises-list__cta:hover,
.tdn-expertises-list__cta:focus-visible {
	background: var(--tdn-color-pink-500, #C06D80);
	transform: scale(1.02);
}

.tdn-expertises-list__cta:hover .tdn-expertises-list__cta-icon,
.tdn-expertises-list__cta:focus-visible .tdn-expertises-list__cta-icon {
	transform: translateX(2px);
}

.tdn-expertises-list__cta-text {
	white-space: nowrap;
}

.tdn-expertises-list__cta-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	background-color: var(--tdn-color-pink-100, #F6C9D0);
	border-radius: 50%;
	/* masque le glyphe ↗ (rendu en emoji bleu) ; la flèche réelle est dessinée en midnight via ::before */
	font-size: 0;
	line-height: 1;
	transition: transform 200ms ease;
}

/* Flèche SVG colorisée en midnight (mask-image + background-color) sur le cercle pink-100 */
.tdn-expertises-list__cta-icon::before {
	content: "";
	width: 14px;
	height: 14px;
	background-color: var(--tdn-color-midnight, #1a1a2e);
	-webkit-mask: url("../../images/icons/arrow-up-right.svg") center / 14px 14px no-repeat;
	mask: url("../../images/icons/arrow-up-right.svg") center / 14px 14px no-repeat;
}

/* ===== 8. Items list ============================================ */
.tdn-expertises-list__items {
	list-style: none;
	margin: 0;
	padding: 0;
	position: relative;
	z-index: 1;
}

/* ===== 9. Item base ============================================= */
.tdn-expertises-list__item {
	display: grid;
	grid-template-columns: 504px 1fr;
	gap: 24px;
	align-items: center;
	padding: 32px;
	position: relative;
	cursor: pointer;
	border-bottom: 1px dashed var(--tdn-color-pink-100, #F6C9D0);
	transition: background 250ms ease, border-radius 250ms ease, border-color 250ms ease;
}

.tdn-expertises-list__item:last-child {
	border-bottom: none;
}

/* ===== 10. Item text (icon + title) ============================= */
.tdn-expertises-list__item-text {
	display: flex;
	align-items: center;
	gap: 16px;
}

.tdn-expertises-list__item-shape {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--tdn-color-pink-200, #c06d80);
	font-size: 22px;
	line-height: 1;
	transition: color 250ms ease;
}

.tdn-expertises-list__item-title {
	margin: 0;
	/* Phase 3.6 — semantic layer : h3-lg (titre item expertise, weight medium 500) */
	font-family: var(--tdn-h3-lg-family);
	font-weight: var(--tdn-h3-lg-weight);
	font-size: var(--tdn-h3-lg-size);
	line-height: var(--tdn-h3-lg-lh);
	letter-spacing: var(--tdn-h3-lg-ls);
	color: var(--tdn-color-midnight, #1a1a2e);
	transition: color 250ms ease;
	font-style: normal;
}

/* ===== 11. Item description ===================================== */
.tdn-expertises-list__item-description {
	margin: 0;
	/* Phase 3.6 — semantic layer : body-lead (description item, weight medium 500, lh ratio) */
	font-family: var(--tdn-body-lead-family);
	font-weight: var(--tdn-body-lead-weight);
	font-size: var(--tdn-body-lead-size);
	line-height: var(--tdn-body-lead-lh);
	letter-spacing: -0.03em;
	color: var(--tdn-color-midnight, #1a1a2e);
	opacity: 0.85;
	transition: color 250ms ease, opacity 250ms ease;
	font-style: normal;
}

/* ===== 12. Item photo (révélée au hover) ======================== */
.tdn-expertises-list__item-photo {
	position: absolute;
	right: -50px;
	top: 50%;
	width: 280px;
	height: 280px;
	object-fit: cover;
	border-radius: 32px;
	border: 12px solid var(--tdn-color-neutral-0, #ffffff);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
	pointer-events: none;
	user-select: none;
	opacity: 0;
	transform: translateY(-50%) rotate(-7deg);
	transition: opacity 350ms ease, transform 350ms ease;
	z-index: 3;
	max-width: none;
}

/* ===== 13. Hover state — item devient actif ===================== */
.tdn-expertises-list__item:hover {
	background: var(--tdn-color-pink-100, #F6C9D0);
	border-bottom-color: transparent;
	border-radius: 12px;
}

.tdn-expertises-list__item:hover .tdn-expertises-list__item-title,
.tdn-expertises-list__item:hover .tdn-expertises-list__item-description,
.tdn-expertises-list__item:hover .tdn-expertises-list__item-shape {
	color: var(--tdn-color-pink-700, #9c413d);
}

.tdn-expertises-list__item:hover .tdn-expertises-list__item-description {
	opacity: 1;
}

.tdn-expertises-list__item:hover .tdn-expertises-list__item-photo {
	opacity: 1;
	transform: translateY(-50%) rotate(-7deg) scale(1.02);
}

/* ===== 14. Default state — item--1 actif au chargement ========== */
.tdn-expertises-list__item--1 {
	background: var(--tdn-color-pink-100, #F6C9D0);
	border-bottom-color: transparent;
	border-radius: 12px;
}

.tdn-expertises-list__item--1 .tdn-expertises-list__item-title,
.tdn-expertises-list__item--1 .tdn-expertises-list__item-description,
.tdn-expertises-list__item--1 .tdn-expertises-list__item-shape {
	color: var(--tdn-color-pink-700, #9c413d);
}

.tdn-expertises-list__item--1 .tdn-expertises-list__item-description {
	opacity: 1;
}

.tdn-expertises-list__item--1 .tdn-expertises-list__item-photo {
	opacity: 1;
}

/* ===== 15. Override :has() — un autre item hovered désactive item--1 */
.tdn-expertises-list__items:has(.tdn-expertises-list__item--2:hover) .tdn-expertises-list__item--1,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--3:hover) .tdn-expertises-list__item--1 {
	background: transparent;
	border-bottom-color: var(--tdn-color-pink-100, #F6C9D0);
	border-radius: 0;
}

.tdn-expertises-list__items:has(.tdn-expertises-list__item--2:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-title,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--2:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-description,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--2:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-shape,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--3:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-title,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--3:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-description,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--3:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-shape {
	color: var(--tdn-color-midnight, #1a1a2e);
}

.tdn-expertises-list__items:has(.tdn-expertises-list__item--2:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-description,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--3:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-description {
	opacity: 0.85;
}

.tdn-expertises-list__items:has(.tdn-expertises-list__item--2:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-photo,
.tdn-expertises-list__items:has(.tdn-expertises-list__item--3:hover) .tdn-expertises-list__item--1 .tdn-expertises-list__item-photo {
	opacity: 0;
}

/* ===== 16. Responsive <1024 (mobile + tablette) — scroll-driven active state ======== */
/* Comportement mobile : l'item le plus visible (>50% dans viewport) devient actif
 * (bg pink + photo affichée en flow normal sous le texte). Reste : bg transparent + photo hidden.
 * Logique pilotée par tdn-expertises-list-scroll.js via IntersectionObserver. */
@media (max-width: 1023px) {
	.tdn-expertises-list {
		padding: 80px 0;
	}

	.tdn-expertises-list__inner {
		padding: 0 24px;
	}

	.tdn-expertises-list__headline {
		font-size: 48px;
	}

	/* Override desktop default : items mobile commencent tous inactifs (JS active item le plus visible) */
	.tdn-expertises-list__item {
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 24px;
		background: transparent;
		border-bottom: 1px dashed var(--tdn-color-pink-100, #F6C9D0);
		border-radius: 0;
		cursor: default;
		-webkit-tap-highlight-color: transparent;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		transition: background 250ms ease, border-radius 250ms ease, border-color 250ms ease;
	}

	.tdn-expertises-list__item--1 {
		background: transparent;
		border-bottom-color: var(--tdn-color-pink-100, #F6C9D0);
		border-radius: 0;
	}

	.tdn-expertises-list__item--1 .tdn-expertises-list__item-title,
	.tdn-expertises-list__item--1 .tdn-expertises-list__item-description,
	.tdn-expertises-list__item--1 .tdn-expertises-list__item-shape {
		color: var(--tdn-color-midnight, #1a1a2e);
	}

	.tdn-expertises-list__item--1 .tdn-expertises-list__item-description {
		opacity: 0.85;
	}

	.tdn-expertises-list__item--1 .tdn-expertises-list__item-photo {
		opacity: 0;
	}

	/* Photo en flow normal mobile (pas absolute) — animée via max-height + opacity.
	 * !important pour casser cache iOS Safari agressif sur les positions/transforms.
	 * aspect-ratio + object-fit pour rendre stable même avant chargement lazy. */
	.tdn-expertises-list__item-photo {
		display: block !important;
		position: static !important;
		width: 100% !important;
		max-width: 100% !important;
		height: auto !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
		bottom: auto !important;
		aspect-ratio: 16 / 10;
		object-fit: cover;
		margin: 0;
		padding: 0;
		transform: none !important;
		opacity: 0;
		max-height: 0;
		overflow: hidden;
		border: 0;
		border-radius: 16px;
		box-shadow: none;
		transition: opacity 250ms ease, max-height 280ms ease, margin-top 280ms ease;
		will-change: opacity, max-height;
	}

	/* État scroll-actif (posé par tdn-expertises-list-scroll.js) */
	.tdn-expertises-list__item.is-scroll-active {
		background: var(--tdn-color-pink-100, #F6C9D0);
		border-bottom-color: transparent;
		border-radius: 16px;
	}

	.tdn-expertises-list__item.is-scroll-active .tdn-expertises-list__item-title,
	.tdn-expertises-list__item.is-scroll-active .tdn-expertises-list__item-description,
	.tdn-expertises-list__item.is-scroll-active .tdn-expertises-list__item-shape {
		color: var(--tdn-color-pink-700, #9c413d);
	}

	.tdn-expertises-list__item.is-scroll-active .tdn-expertises-list__item-description {
		opacity: 1;
	}

	.tdn-expertises-list__item.is-scroll-active .tdn-expertises-list__item-photo {
		opacity: 1;
		max-height: 400px;
		margin-top: 16px;
		border: 4px solid var(--tdn-color-neutral-0, #ffffff);
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
	}

	/* Désactive les overrides desktop :hover en mobile (tap iOS active :hover transitoirement
	 * et casserait l'état scroll-driven). Tous les :hover desktop neutralisés ici. */
	.tdn-expertises-list__item:hover {
		background: transparent;
		border-bottom-color: var(--tdn-color-pink-100, #F6C9D0);
		border-radius: 0;
	}
	.tdn-expertises-list__item:hover .tdn-expertises-list__item-title,
	.tdn-expertises-list__item:hover .tdn-expertises-list__item-description,
	.tdn-expertises-list__item:hover .tdn-expertises-list__item-shape {
		color: var(--tdn-color-midnight, #1a1a2e);
	}
	.tdn-expertises-list__item:hover .tdn-expertises-list__item-description {
		opacity: 0.85;
	}
	.tdn-expertises-list__item:hover .tdn-expertises-list__item-photo {
		opacity: 0;
		max-height: 0;
		margin-top: 0;
	}

	/* Sur l'item ACTIF (scroll-driven), restaurer le visuel actif même en cas de :hover */
	.tdn-expertises-list__item.is-scroll-active:hover {
		background: var(--tdn-color-pink-100, #F6C9D0);
		border-bottom-color: transparent;
		border-radius: 16px;
	}
	.tdn-expertises-list__item.is-scroll-active:hover .tdn-expertises-list__item-title,
	.tdn-expertises-list__item.is-scroll-active:hover .tdn-expertises-list__item-description,
	.tdn-expertises-list__item.is-scroll-active:hover .tdn-expertises-list__item-shape {
		color: var(--tdn-color-pink-700, #9c413d);
	}
	.tdn-expertises-list__item.is-scroll-active:hover .tdn-expertises-list__item-description {
		opacity: 1;
	}
	.tdn-expertises-list__item.is-scroll-active:hover .tdn-expertises-list__item-photo {
		opacity: 1;
		max-height: 400px;
		margin-top: 16px;
	}

	/* Bloquer iOS Safari image preview/zoom au tap long sur la photo */
	.tdn-expertises-list__item-photo {
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		pointer-events: none;
	}

	/* Désactive les overrides desktop :has() en mobile */
	.tdn-expertises-list__items:has(.tdn-expertises-list__item--2:hover) .tdn-expertises-list__item--1,
	.tdn-expertises-list__items:has(.tdn-expertises-list__item--3:hover) .tdn-expertises-list__item--1 {
		background: transparent;
	}
}

/* ===== 17. Responsive <768 (mobile : compact) =================== */
@media (max-width: 767px) {
	.tdn-expertises-list {
		padding: 60px 0;
	}

	.tdn-expertises-list__inner {
		padding: 0 16px;
	}

	.tdn-expertises-list__header {
		margin-bottom: 40px;
	}

	.tdn-expertises-list__headline {
		font-size: 36px;
	}

	.tdn-expertises-list__cta {
		height: 48px;
		padding: 0 6px 0 18px;
		font-size: 16px;
	}

	.tdn-expertises-list__cta-icon {
		width: 36px;
		height: 36px;
	}

	.tdn-expertises-list__item-title {
		font-size: 22px;
	}

	.tdn-expertises-list__item-description {
		font-size: 16px;
		line-height: 22px;
	}
}

/* ===== 18. Reduced-motion ======================================= */
@media (prefers-reduced-motion: reduce) {
	.tdn-expertises-list__item,
	.tdn-expertises-list__item-title,
	.tdn-expertises-list__item-description,
	.tdn-expertises-list__item-shape,
	.tdn-expertises-list__item-photo,
	.tdn-expertises-list__cta,
	.tdn-expertises-list__cta-icon {
		transition: none;
	}

	.tdn-expertises-list__item:hover .tdn-expertises-list__item-photo,
	.tdn-expertises-list__item--1 .tdn-expertises-list__item-photo {
		transform: translateY(-50%) rotate(0deg);
	}

	.tdn-expertises-list__cta:hover,
	.tdn-expertises-list__cta:hover .tdn-expertises-list__cta-icon,
	.tdn-expertises-list__cta:focus-visible .tdn-expertises-list__cta-icon {
		transform: none;
	}
}

/* ===== 19. Ajouts défensifs ===================================== */
.tdn-expertises-list,
.tdn-expertises-list__headline,
.tdn-expertises-list__headline-base,
.tdn-expertises-list__item-title,
.tdn-expertises-list__item-description,
.tdn-expertises-list__cta {
	text-transform: none;
}

.tdn-expertises-list__headline,
.tdn-expertises-list__item-title,
.tdn-expertises-list__cta {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}