/**
 * TARMAC — Page d'accueil (design v2)
 *
 * Chargée uniquement sur le modèle « Accueil » (template-home.php).
 * Dépend de `design-system.css` (tokens, base, composants) et de
 * `header.css` (en-tête et navigation), chargés en amont : ce fichier ne
 * contient que les sections propres à l'accueil.
 *
 * Sommaire
 *   1. Hero
 *   2. Qui sommes-nous
 *   3. Agir avec nous (damier)
 *   4. Nos missions (cartes numérotées)
 *   5. Notre organisation
 *   6. Une question ? (FAQ)
 *   7. Responsive
 */

/* ==========================================================================
   1. Hero
   ========================================================================== */

.thv2-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min(100svh, 860px);
	padding-top: 200px;
	padding-bottom: clamp(3rem, 6vw, 6rem);
	overflow: hidden;
	color: var(--c-blanc);
}

.thv2-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	background: var(--c-bleu-nuit);
}

/* Les images de la piste se superposent en fondu. */
.thv2-hero__track {
	position: absolute;
	inset: 0;
}

/* Effet « rideau » (attendu par l'association, comme sur le modèle) : le
   hero reste fixe et la section suivante, blanche, glisse par-dessus.
   Activé par design-system.js seulement si le hero tient dans l'écran ; à
   défaut, son bas serait recouvert sans jamais avoir été vu. */
.thv2-hero.is-curtain {
	position: sticky;
	top: 0;
	z-index: 0;
}

.tarmac-home-v2 .thv2-hero ~ .thv2-section {
	z-index: 1;
}

/* Le hero reste derrière toute la page : une section sans fond propre le
   laissait voir et son titre devenait illisible (« Notre organisation »).
   Fond blanc par défaut, à spécificité nulle pour que les fonds colorés
   (--rose, --jaune, --about…) gardent la main. */
:where(.tarmac-home-v2 .thv2-hero ~ .thv2-section) {
	background-color: var(--c-blanc);
}

/* La première section recouvrante porte une ombre douce sur son bord haut,
   qui matérialise le passage par-dessus l'image. */
.tarmac-home-v2 .thv2-hero.is-curtain + .thv2-section {
	box-shadow: 0 -24px 60px rgb(28 35 57 / 28%);
	border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
	margin-top: calc(var(--radius-2xl) * -1);
}

/* Pendant qu'il est recouvert, le contenu du hero s'efface et remonte
   légèrement, l'image s'assombrit : --hero-p va de 0 à 1 (design-system.js). */
.thv2-hero.is-curtain .thv2-container {
	opacity: calc(1 - var(--hero-p, 0) * 1.4);
	transform: translateY(calc(var(--hero-p, 0) * -70px));
}

.thv2-hero.is-curtain .thv2-hero__scrim::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-bleu-nuit);
	opacity: calc(var(--hero-p, 0) * 0.55);
}

.thv2-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.05);
	transition: opacity 1.6s var(--ease-out);
}

.thv2-hero__slide.is-active {
	opacity: 1;
	animation: thv2-kenburns 9s linear forwards;
}

.thv2-hero__slide:nth-child(even).is-active { animation-name: thv2-kenburns-alt; }

/* Lent zoom-travelling : l'image n'est jamais immobile. */
/* Amplitude modérée : un zoom trop fort agrandit l'image au-delà de sa
   définition et la rend floue sur grand écran. */
@keyframes thv2-kenburns {
	from { transform: scale(1.09) translate3d(-1.2%, 0.6%, 0); }
	to { transform: scale(1.01) translate3d(0.8%, -0.4%, 0); }
}

@keyframes thv2-kenburns-alt {
	from { transform: scale(1.01) translate3d(1%, -0.5%, 0); }
	to { transform: scale(1.09) translate3d(-0.8%, 0.8%, 0); }
}

/* Voile allégé : foncé seulement derrière le texte, l'image respire à droite. */
.thv2-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgb(28 35 57 / 70%) 0%, rgb(28 35 57 / 25%) 160px, transparent 260px),
		linear-gradient(100deg, rgb(28 35 57 / 82%) 0%, rgb(28 35 57 / 55%) 40%, rgb(28 35 57 / 0%) 75%),
		linear-gradient(0deg, rgb(28 35 57 / 55%) 0%, transparent 40%);
}

/* Bande quadricolore au pied du hero. */
.thv2-hero::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	height: 8px;
	background: linear-gradient(90deg, var(--c-jaune) 0 25%, var(--c-rose) 25% 50%, var(--c-vert) 50% 75%, var(--c-bleu) 75%);
	transform-origin: left;
	animation: thv2-grow-x 1.4s var(--ease-expo) 0.4s both;
}

@keyframes thv2-grow-x {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

.thv2-hero .thv2-container { z-index: 2; }

.thv2-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: var(--sp-8);
	align-items: end;
}

.tarmac-home-v2 .thv2-hero__title {
	max-width: 16ch;
	margin-bottom: var(--sp-5);
	color: var(--c-blanc);
	font-size: clamp(2.5rem, 5.4vw + 0.4rem, 5.6rem);
	text-wrap: balance;
	text-shadow: 0 2px 30px rgb(28 35 57 / 35%);
}

.thv2-hero__lead {
	max-width: 52ch;
	margin-bottom: var(--sp-6);
	font-size: var(--fs-lead);
	font-weight: 400;
	color: rgb(255 255 255 / 92%);
}

.thv2-hero__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
}

.thv2-hero .thv2-kicker { color: var(--c-jaune); }
.thv2-hero .thv2-kicker span { background: rgb(255 255 255 / 14%); color: var(--c-blanc); backdrop-filter: blur(6px); }

/* Entrée du contenu au chargement : kicker, titre (mot à mot), chapô et
   boutons arrivent en cascade. */
.thv2-js .thv2-hero__content > :not(.thv2-hero__title) {
	animation: thv2-rise 1.1s var(--ease-expo) both;
}

.thv2-js .thv2-hero__content > .thv2-kicker { animation-name: thv2-drop; animation-delay: 0.1s; }
.thv2-js .thv2-hero__content > .thv2-hero__lead { animation-delay: 0.7s; }
.thv2-js .thv2-hero__content > .thv2-hero__actions { animation-delay: 0.9s; }

@keyframes thv2-rise {
	from { opacity: 0; transform: translateY(40px); }
	to { opacity: 1; transform: none; }
}

@keyframes thv2-drop {
	from { opacity: 0; transform: translateY(-30px); }
	to { opacity: 1; transform: none; }
}

/* Motifs de la charte : apparition en rebond puis dérive au défilement. */
.thv2-hero .thv2-motif { z-index: 2; animation-fill-mode: both; }
.thv2-hero__m1 { --drift: -260px; width: clamp(90px, 11vw, 170px); right: 7%; top: 28%; opacity: 0.9; }
.thv2-hero__m2 { --drift: -380px; width: clamp(40px, 4.5vw, 64px); right: 30%; top: 30%; }
.thv2-hero__m3 { --drift: -180px; --turn: -60deg; width: clamp(60px, 7vw, 110px); right: 16%; bottom: 14%; opacity: 0.95; }
.thv2-hero__m4 { --drift: -320px; width: clamp(50px, 6vw, 90px); right: 34%; bottom: 44%; }

.thv2-js .thv2-hero .thv2-motif { animation: thv2-pop 1.2s var(--ease-back) both, thv2-spin 26s linear 1.2s infinite; }
.thv2-js .thv2-hero .thv2-motif--float { animation: thv2-pop 1.2s var(--ease-back) both, thv2-float 7s ease-in-out 1.2s infinite; }
.thv2-js .thv2-hero .thv2-hero__m3 { animation: thv2-pop 1.2s var(--ease-back) 0.3s both; }
.thv2-js .thv2-hero .thv2-hero__m2 { animation-delay: 0.6s, 1.8s; }
.thv2-js .thv2-hero .thv2-hero__m4 { animation-delay: 0.9s, 2.1s; }

@keyframes thv2-pop {
	from { opacity: 0; transform: scale(0) rotate(-90deg); }
	to { opacity: 1; transform: none; }
}

/* Jauges du diaporama */
.thv2-hero__dots {
	position: absolute;
	bottom: calc(var(--sp-6) + 8px);
	left: 50%;
	z-index: 3;
	display: flex;
	gap: var(--sp-2);
	transform: translateX(-50%);
}

.thv2-hero__dot {
	position: relative;
	width: 46px;
	height: 4px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: rgb(255 255 255 / 35%);
	cursor: pointer;
	overflow: hidden;
}

.thv2-hero__dot::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--c-jaune);
	transform: scaleX(0);
	transform-origin: left;
}

.thv2-hero__dot.is-active::after { animation: thv2-grow-x 6.5s linear forwards; }

.thv2-hero__scroll {
	position: absolute;
	right: clamp(1rem, 3vw, 2.5rem);
	bottom: var(--sp-6);
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	font-size: var(--fs-xs);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	text-decoration: none;
	color: rgb(255 255 255 / 55%);
	writing-mode: vertical-rl;
}

.thv2-hero__scroll i {
	display: block;
	width: 1px;
	height: 52px;
	background: linear-gradient(var(--c-vert), transparent);
	animation: thv2-pulse-down 2s var(--ease-out) infinite;
}

@keyframes thv2-pulse-down {
	0%, 100% { opacity: 0.3; transform: scaleY(0.6); }
	50% { opacity: 1; transform: scaleY(1); }
}

/* ==========================================================================
   2. Qui sommes-nous
   ========================================================================== */

.thv2-section--about {
	background:
		linear-gradient(180deg, var(--c-blanc) 0%, var(--c-jaune-wash) 100%);
}

.thv2-about__m1 { --drift: -200px; width: 110px; left: -36px; top: 10%; opacity: 0.8; }
.thv2-about__m2 { --drift: -260px; width: 90px; right: 3%; top: 8%; }
.thv2-about__m3 { --drift: -140px; --turn: 120deg; width: 44px; left: 46%; bottom: 34%; }

.thv2-about {
	display: grid;
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
	gap: clamp(2.5rem, 6vw, 6rem);
	align-items: center;
}

.thv2-about__media {
	position: relative;
	padding: 0 0 var(--sp-6) var(--sp-6);
}

/* Aplat de couleur décalé derrière la photo. */
.thv2-about__media::before {
	content: "";
	position: absolute;
	top: var(--sp-8);
	right: var(--sp-8);
	bottom: 0;
	left: 0;
	border-radius: var(--radius-2xl);
	background: var(--c-bleu-wash);
	background-image: radial-gradient(rgb(22 109 169 / 22%) 2px, transparent 2.5px);
	background-size: 18px 18px;
}

.thv2-about__frame {
	position: relative;
	aspect-ratio: 4 / 5;
	border-radius: var(--radius-2xl);
	overflow: hidden;
	box-shadow: var(--shadow-lg);
}

.thv2-about__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thv2-about__ring {
	position: absolute;
	top: -26px;
	right: -26px;
	width: 120px;
	height: 120px;
	border: 14px solid var(--c-vert);
	border-radius: 50%;
	animation: thv2-float 6s ease-in-out infinite;
}

.thv2-about__badge {
	position: absolute;
	right: -30px;
	bottom: var(--sp-8);
	z-index: 2;
	max-width: 260px;
	padding: var(--sp-6);
	border-radius: var(--radius-xl);
	background: var(--c-rose);
	color: var(--c-bleu-nuit);
	box-shadow: 0 20px 40px rgb(255 89 100 / 35%);
}

.thv2-about__badge .thv2-num {
	display: block;
	font-family: var(--ff-num);
	font-weight: 900;
	font-size: clamp(2.5rem, 3.6vw, 3.4rem);
	line-height: 1;
	white-space: nowrap;
}

.thv2-about__badge .thv2-label {
	display: block;
	margin-top: var(--sp-2);
	font-size: var(--fs-small);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.thv2-about__lead {
	margin-top: var(--sp-6);
	font-size: var(--fs-lead);
	font-weight: 400;
	color: var(--c-text-muted);
}

.thv2-about__quote {
	position: relative;
	margin: 0 0 var(--sp-6);
	padding: var(--sp-5) var(--sp-5) var(--sp-5) var(--sp-7);
	border-radius: var(--radius-lg);
	background: var(--c-blanc);
	box-shadow: var(--shadow-md);
	font-family: var(--ff-accent);
	font-style: italic;
	font-weight: 600;
	font-size: var(--fs-small);
	line-height: 1.7;
	color: var(--c-text);
}

.thv2-about__quote::before {
	content: "\201C";
	position: absolute;
	top: 0.1em;
	left: 0.3em;
	font-family: Georgia, serif;
	font-style: normal;
	font-size: 3.4rem;
	line-height: 1;
	color: var(--c-rose);
}

/* Carrousel de photos continu */
.thv2-gallery {
	position: relative;
	z-index: 1;
	margin-top: clamp(3.5rem, 7vw, 6rem);
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

.thv2-gallery__track {
	display: flex;
	gap: var(--sp-5);
	width: max-content;
	padding-block: var(--sp-4);
	animation: thv2-slide 60s linear infinite;
}

.thv2-gallery:hover .thv2-gallery__track { animation-play-state: paused; }

.thv2-gallery__item {
	flex: none;
	width: clamp(200px, 22vw, 300px);
	aspect-ratio: 4 / 5;
	margin: 0;
	border-radius: var(--radius-xl);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	transform: rotate(-2deg);
	transition: transform var(--dur-slow) var(--ease-back);
}

.thv2-gallery__item:nth-child(even) {
	aspect-ratio: 1;
	align-self: center;
	transform: rotate(2deg);
}

.thv2-gallery__item:nth-child(3n) { border: 6px solid var(--c-jaune); }
.thv2-gallery__item:nth-child(5n) { border: 6px solid var(--c-rose); }

.thv2-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease-expo);
}

.thv2-gallery__item:hover { transform: rotate(0) scale(1.04); }
.thv2-gallery__item:hover img { transform: scale(1.1); }

.thv2-section--about .thv2-stats { margin-top: clamp(3rem, 6vw, 5rem); }

/* ==========================================================================
   3. Agir avec nous — grille en damier
   ========================================================================== */

.thv2-tiles {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-5);
}

.thv2-section--engagement { background: var(--c-blanc); }

.thv2-tile {
	--tile-bg: var(--c-blanc);
	--tile-fg: var(--c-bleu-nuit);
	--tile-muted: var(--c-text-muted);
	--tile-accent: var(--c-bleu);
	--tile-ico: var(--c-rose);
	position: relative;
	z-index: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-3);
	padding: var(--sp-7) var(--sp-6);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-xl);
	background: var(--tile-bg);
	color: var(--tile-fg);
	text-decoration: none;
	overflow: hidden;
	isolation: isolate;
	transition:
		transform var(--dur-slow) var(--ease-back),
		box-shadow var(--dur-base) var(--ease-out);
}

/* Damier coloré : couleurs vives en quinconce, blanc entre deux. */
.thv2-tile:nth-child(8n+2) { --tile-bg: var(--c-rose); --tile-muted: rgb(28 35 57 / 82%); --tile-accent: var(--c-bleu-nuit); --tile-ico: var(--c-bleu-nuit); }
.thv2-tile:nth-child(8n+4) { --tile-bg: var(--c-bleu); --tile-fg: var(--c-blanc); --tile-muted: rgb(255 255 255 / 85%); --tile-accent: var(--c-jaune); --tile-ico: var(--c-jaune); }
.thv2-tile:nth-child(8n+5) { --tile-bg: var(--c-vert); --tile-muted: rgb(28 35 57 / 82%); --tile-accent: var(--c-bleu-nuit); --tile-ico: var(--c-bleu-nuit); }
.thv2-tile:nth-child(8n+7) { --tile-bg: var(--c-jaune); --tile-muted: rgb(28 35 57 / 82%); --tile-accent: var(--c-bleu-nuit); --tile-ico: var(--c-bleu-nuit); }
.thv2-tile:nth-child(8n+3),
.thv2-tile:nth-child(8n+8) { --tile-ico: var(--c-bleu); }
.thv2-tile:nth-child(8n+6) { --tile-ico: var(--c-vert); }

.thv2-tile:nth-child(8n+2),
.thv2-tile:nth-child(8n+4),
.thv2-tile:nth-child(8n+5),
.thv2-tile:nth-child(8n+7) { border-color: transparent; }

.tarmac-v2 .thv2-tile h3 { color: var(--tile-fg); font-size: var(--fs-h4); }

/* Cercle décoratif qui grossit au survol. */
.thv2-tile::before {
	content: "";
	position: absolute;
	top: -60px;
	right: -60px;
	z-index: -1;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	background: currentColor;
	opacity: 0.07;
	transition: transform 0.9s var(--ease-expo), opacity var(--dur-slow);
}

.thv2-tile:hover::before {
	transform: scale(3.2);
	opacity: 0.1;
}

.thv2-tile__ico {
	width: 52px;
	height: 52px;
	margin-bottom: var(--sp-2);
	fill: none;
	stroke: var(--tile-ico);
	stroke-width: 1.6;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition: transform var(--dur-slow) var(--ease-back);
}

.thv2-tile:hover .thv2-tile__ico { transform: rotate(-12deg) scale(1.15); }

.thv2-tile p {
	margin: 0;
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--tile-muted);
}

.thv2-tile__more {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	margin-top: auto;
	padding-top: var(--sp-4);
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--tile-accent);
	transition: gap var(--dur-base) var(--ease-out);
}

.thv2-tile:hover {
	transform: translateY(-10px) rotate(-1deg);
	box-shadow: var(--shadow-lg);
}

.thv2-tile:nth-child(even):hover { transform: translateY(-10px) rotate(1deg); }

.thv2-tile:hover .thv2-tile__more { gap: var(--sp-4); }

.thv2-tile.thv2-tile--feature {
	--tile-bg: var(--c-rose);
	--tile-fg: var(--c-bleu-nuit);
	--tile-muted: rgb(28 35 57 / 85%);
	--tile-accent: var(--c-bleu-nuit);
	--tile-ico: var(--c-bleu-nuit);
	justify-content: center;
	border-color: transparent;
}

/* L'icône téléphone de l'urgence sonne doucement. */
.thv2-tile--feature .thv2-tile__ico { animation: thv2-ring 2.8s ease-in-out infinite; transform-origin: 50% 60%; }

@keyframes thv2-ring {
	0%, 60%, 100% { transform: rotate(0); }
	65% { transform: rotate(-14deg); }
	70% { transform: rotate(12deg); }
	75% { transform: rotate(-10deg); }
	80% { transform: rotate(8deg); }
	85% { transform: rotate(0); }
}

/* ==========================================================================
   4. Nos missions — cartes numérotées
   ========================================================================== */

.thv2-section--missions {
	background: linear-gradient(180deg, var(--c-bleu-wash) 0%, var(--c-blanc) 100%);
	overflow: clip;
}

.thv2-steps {
	display: grid;
	gap: var(--sp-6);
}

/* Une couleur par mission. */
.thv2-step {
	--m: var(--c-bleu);
	--m-wash: var(--c-bleu-wash);
	--m-fg: var(--c-blanc);
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: var(--sp-6);
	align-items: stretch;
	padding: clamp(0.75rem, 1.5vw, 1.25rem);
	border: 1px solid rgb(28 35 57 / 6%);
	border-radius: var(--radius-2xl);
	background: var(--c-blanc);
	box-shadow: 0 30px 60px -20px rgb(28 35 57 / 18%);
	overflow: hidden;
}

.thv2-step--c2 { --m: var(--c-rose); --m-wash: var(--c-rose-wash); --m-fg: var(--c-bleu-nuit); }
.thv2-step--c3 { --m: var(--c-vert); --m-wash: var(--c-vert-wash); --m-fg: var(--c-bleu-nuit); }
.thv2-step--c4 { --m: var(--c-jaune); --m-wash: var(--c-jaune-wash); --m-fg: var(--c-bleu-nuit); }

/* Cartes empilées au défilement (grands écrans) : chacune se colle un peu
   plus bas que la précédente et vient la recouvrir. */
@media (min-width: 901px) and (min-height: 641px) {
	.thv2-step {
		position: sticky;
		top: calc(130px + var(--i, 0) * 26px);
	}
}

.thv2-step:nth-child(even) { direction: rtl; }
.thv2-step:nth-child(even) > * { direction: ltr; }

/* Sans image, le texte occupe toute la carte plutôt que de laisser un vide. */
.thv2-step.thv2-step--no-media,
.thv2-step.thv2-step--no-media:nth-child(even) {
	grid-template-columns: 1fr;
	direction: ltr;
}

.thv2-step__body {
	position: relative;
	padding: clamp(1.25rem, 3vw, 2.75rem);
	border-radius: calc(var(--radius-2xl) - 10px);
	background: var(--m-wash);
	overflow: hidden;
	isolation: isolate;
}

/* Grand numéro en filigrane, couleur de la mission. */
.thv2-step__body::after {
	content: "";
	position: absolute;
	right: -50px;
	bottom: -50px;
	z-index: -1;
	width: 180px;
	height: 180px;
	border: 26px solid var(--m);
	border-radius: 50%;
	opacity: 0.25;
}

.thv2-step__num {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	margin-bottom: var(--sp-4);
}

.thv2-step__num i {
	display: block;
	width: 52px;
	height: 4px;
	border-radius: 4px;
	background: var(--m);
}

.thv2-step__num b {
	font-family: var(--ff-num);
	font-weight: 900;
	font-size: clamp(2.6rem, 4vw, 3.6rem);
	line-height: 1;
	color: var(--m);
	-webkit-text-stroke: 1px rgb(28 35 57 / 12%);
}

.tarmac-v2 .thv2-step h3 {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-h3);
	color: var(--c-bleu-nuit);
}

.thv2-step p {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.thv2-step .thv2-checks {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.thv2-step .thv2-checks li::before { background-color: var(--m); }

.thv2-step p.thv2-step__action {
	margin-bottom: 0;
	padding-top: var(--sp-2);
}

.thv2-step__btn {
	background: var(--m);
	color: var(--m-fg);
}

.thv2-step__btn:hover,
.thv2-step__btn:focus-visible {
	background: var(--c-bleu-nuit);
	color: var(--c-blanc);
}

.thv2-step__media {
	position: relative;
	align-self: stretch;
	min-height: 280px;
	border-radius: calc(var(--radius-2xl) - 10px);
	overflow: hidden;
}

.thv2-step__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s var(--ease-expo);
}

.thv2-step:hover .thv2-step__media img { transform: scale(1.06); }

/* ==========================================================================
   5. Notre organisation
   ========================================================================== */

.thv2-team {
	display: grid;
	gap: var(--sp-6);
	margin: 0;
	padding: 0;
	list-style: none;
}

.thv2-team__card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-xl);
	background: var(--c-blanc);
	box-shadow: var(--shadow-md);
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.thv2-team__card { border-top: 6px solid var(--c-jaune); }
.thv2-team__card:nth-child(3n+2) { border-top-color: var(--c-rose); }
.thv2-team__card:nth-child(3n+3) { border-top-color: var(--c-vert); }

.thv2-team__card:hover {
	transform: translateY(-8px) rotate(-0.6deg);
	box-shadow: var(--shadow-lg);
}

.thv2-team__media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: var(--c-vert-wash);
	overflow: hidden;
}

/* Sans portrait, la carte se réduit au texte (le bloc média n'est pas rendu). */
.thv2-team__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease-out);
}

.thv2-team__card:hover .thv2-team__media img { transform: scale(1.06); }

.thv2-team__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var(--sp-2);
	padding: clamp(1.25rem, 2.5vw, 2rem);
}

.thv2-team__role {
	margin: 0;
	font-family: var(--ff-accent);
	font-style: italic;
	font-weight: 700;
	font-size: var(--fs-small);
	color: var(--c-bleu);
}

.thv2-team__name {
	margin: 0;
	font-family: var(--ff-primary);
	font-weight: 800;
	font-size: 1.25rem;
	line-height: 1.2;
	color: var(--c-bleu-nuit);
}

.thv2-team__text {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

.thv2-team__body .thv2-arrow-link { margin-top: auto; padding-top: var(--sp-3); }

/* ==========================================================================
   6. Une question ? — FAQ
   ========================================================================== */

.thv2-faq {
	display: grid;
	gap: var(--sp-7);
	align-items: start;
}

.thv2-faq__intro h2 { margin-bottom: var(--sp-4); }

.thv2-faq__intro p {
	margin-bottom: var(--sp-5);
	color: var(--c-text-muted);
}

.thv2-faq__list {
	display: grid;
	gap: var(--sp-3);
}

.thv2-faq__item {
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-blanc);
	overflow: hidden;
	transition: border-color var(--dur-base) var(--ease-out);
}

.thv2-faq__item[open] {
	border-color: var(--c-rose);
	box-shadow: 0 10px 30px rgb(255 89 100 / 15%);
}

.thv2-faq__q {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	justify-content: space-between;
	padding: clamp(0.9rem, 2vw, 1.25rem) clamp(1rem, 2.5vw, 1.75rem);
	cursor: pointer;
	font-family: var(--ff-primary);
	font-weight: 700;
	font-size: 1.0625rem;
	line-height: 1.35;
	color: var(--c-bleu-nuit);
	list-style: none;
}

.thv2-faq__q::-webkit-details-marker { display: none; }

.thv2-faq__q:focus-visible {
	outline: 2px solid var(--c-vert);
	outline-offset: -2px;
}

.thv2-faq__chevron {
	flex: none;
	color: var(--c-rose);
	transition: transform var(--dur-base) var(--ease-out);
}

.thv2-faq__item[open] .thv2-faq__chevron { transform: rotate(180deg); }

.thv2-faq__a {
	padding: 0 clamp(1rem, 2.5vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem);
}

.thv2-faq__a p {
	margin: 0;
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

@media (min-width: 600px) {
	.thv2-tiles { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 600px) {
	.thv2-team { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.thv2-tiles { grid-template-columns: repeat(4, 1fr); }
	.thv2-team { grid-template-columns: repeat(3, 1fr); }

	.thv2-faq {
		grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
		gap: var(--sp-8);
	}

	.thv2-faq__intro { position: sticky; top: 120px; }
}

@media (max-width: 1023px) {
	.thv2-hero__m2,
	.thv2-hero__m4 { display: none; }

	.thv2-about { grid-template-columns: 1fr; }

	.thv2-about__badge {
		right: var(--sp-4);
		bottom: var(--sp-7);
	}

	.thv2-about__ring { right: -10px; }

	.thv2-step,
	.thv2-step:nth-child(even) {
		grid-template-columns: 1fr;
		direction: ltr;
	}

	.thv2-step__media {
		order: -1;
		min-height: 220px;
	}

	.thv2-step .thv2-checks { grid-template-columns: 1fr; }
	.thv2-step__btn { padding: 0.85em 1.4em; letter-spacing: 0.02em; }

}

@media (max-width: 600px) {
	.thv2-hero {
		min-height: auto;
		padding-top: 175px;
		padding-bottom: var(--sp-8);
	}

	.thv2-hero__scroll { display: none; }
	.thv2-hero__dots { bottom: var(--sp-5); }
	.thv2-hero__m1 { top: auto; bottom: 16%; right: 5%; width: 70px; opacity: 0.85; }
	.thv2-hero__m3 { display: none; }

	.thv2-about__media { padding: 0 0 var(--sp-5) var(--sp-4); }

	.thv2-about__badge {
		right: 0;
		bottom: var(--sp-4);
		max-width: 210px;
		padding: var(--sp-4) var(--sp-5);
	}

	.thv2-about__ring { width: 80px; height: 80px; border-width: 10px; top: -16px; right: -6px; }

	.thv2-about__m1 { display: none; }
}