/**
 * TARMAC — Design system v2
 *
 * Tokens, base typographique et composants partagés par l'ensemble du site.
 * Extrait de la maquette v2 (modèle « Accueil ») pour être réutilisé par tous
 * les modèles de page. Tokens issus de charte-web.md v1.0 — aucune couleur
 * hors charte.
 *
 * Portée : tout élément placé dans un conteneur `.tarmac-v2`.
 * Les modèles de page ajoutent cette classe sur leur `<main>`.
 *
 * Typographies (charte 2026) : Gotham pour les titres et les textes,
 * Cartograph CF pour les accents, More Sugar pour les grands chiffres. Les
 * fichiers sont chargés par inc/brand-fonts.php lorsqu'ils sont déposés dans
 * assets/fonts/brand ; à défaut, Montserrat remplace Gotham (substitut validé
 * par l'association) et Playfair Display italique remplace Cartograph CF.
 *
 * Palette lumineuse (retours de recette d'octobre 2026) : le bleu nuit est
 * réservé aux textes, les fonds passent en blanc et en nuances claires des
 * couleurs de marque, avec le rose ajouté à la charte en accent.
 *
 * Sommaire
 *   1. Tokens
 *   2. Base et utilitaires
 *   3. Composants
 *   4. Chiffres clés
 *   5. Cartes « voies d'engagement »
 *   6. Cartes article
 *   7. Bandeau défilant
 *   8. Bloc CTA
 *   9. Responsive
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

.tarmac-v2 {
	/* Couleurs de marque */
	--c-bleu-nuit: #1c2339;
	--c-jaune: #f8d503;
	--c-vert: #bed029;
	--c-bleu: #166da9;
	--c-rose: #ff5964;

	/* Neutres */
	--c-blanc: #ffffff;
	--c-gris-50: #f6f7f9;
	--c-gris-100: #e6e8ee;
	--c-gris-300: #a9b0bd;
	--c-gris-600: #4b5163;

	/* Nuances claires dérivées de la marque (pas de nouvelle teinte) */
	--c-vert-wash: #f5f9e2;
	--c-jaune-wash: #fffbe3;
	--c-rose-wash: #fff0f1;
	--c-bleu-wash: #eaf3fa;
	--c-rose-soft: #ffc9cd;
	--c-jaune-soft: #fdee99;
	--c-bleu-soft: #b9d5ea;
	--c-vert-soft: #e2ec9f;

	/* Alias fonctionnels */
	--c-text: var(--c-bleu-nuit);
	--c-text-muted: var(--c-gris-600);
	--c-border: var(--c-gris-100);

	/* Typographies */
	--ff-primary: "Gotham", "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
	--ff-accent: "Cartograph CF", "Playfair Display", "Iowan Old Style", Georgia, serif;
	--ff-num: "More Sugar", "Gotham", "Montserrat", system-ui, sans-serif;

	/* Échelle typographique fluide */
	--fs-display: clamp(2.6rem, 5vw + 0.5rem, 5rem);
	--fs-h2: clamp(1.75rem, 2.2vw + 1rem, 3rem);
	--fs-h3: clamp(1.25rem, 0.8vw + 1rem, 1.75rem);
	--fs-h4: clamp(1.05rem, 0.3vw + 1rem, 1.3rem);
	--fs-lead: clamp(1.05rem, 0.4vw + 1rem, 1.25rem);
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-xs: 0.75rem;

	/* Espacements — échelle 8 pt */
	--sp-1: 0.25rem;
	--sp-2: 0.5rem;
	--sp-3: 0.75rem;
	--sp-4: 1rem;
	--sp-5: 1.5rem;
	--sp-6: 2rem;
	--sp-7: 3rem;
	--sp-8: 4rem;
	--sp-9: 6rem;

	/* Conteneur */
	--w-wide: 1200px;
	--container-pad: clamp(1rem, 5vw, 3rem);

	/* Rayons et ombres */
	--radius-sm: 6px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-xl: 32px;
	--radius-2xl: 44px;
	--radius-pill: 999px;
	--shadow-md: 0 6px 20px rgb(28 35 57 / 9%);
	--shadow-lg: 0 18px 48px rgb(28 35 57 / 14%);
	--shadow-focus: 0 0 0 3px rgb(22 109 169 / 45%);

	/* Motion */
	--dur-fast: 150ms;
	--dur-base: 250ms;
	--dur-slow: 400ms;
	--dur-slower: 700ms;
	--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
	--ease-expo: cubic-bezier(0.16, 1, 0.3, 1);
	--ease-back: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ==========================================================================
   2. Base et utilitaires
   ========================================================================== */

.tarmac-v2 {
	font-family: var(--ff-primary);
	font-size: var(--fs-body);
	line-height: 1.6;
	color: var(--c-text);
	overflow-x: clip;
}

.tarmac-v2 h1,
.tarmac-v2 h2,
.tarmac-v2 h3,
.tarmac-v2 h4 {
	margin: 0;
	font-family: var(--ff-primary);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--c-text);
}

.tarmac-v2 h1 {
	font-size: var(--fs-display);
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.04;
}

.tarmac-v2 h2 { font-size: var(--fs-h2); }
.tarmac-v2 h3 { font-size: var(--fs-h3); }

.tarmac-v2 h4 {
	font-size: var(--fs-h4);
	letter-spacing: -0.01em;
}

.tarmac-v2 p { margin: 0 0 var(--sp-4); }

.tarmac-v2 :focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-sm);
}

.thv2-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--w-wide);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

.thv2-section {
	position: relative;
	padding-block: clamp(3.5rem, 7vw, 7rem);
	overflow: hidden;
}

.thv2-section--alt { background: var(--c-gris-50); }
.thv2-section--wash { background: var(--c-vert-wash); }
.thv2-section--jaune { background: var(--c-jaune-wash); }
.thv2-section--rose { background: var(--c-rose-wash); }
.thv2-section--bleu { background: var(--c-bleu-wash); }

/* Section « forte » : bleu de la charte (et non plus bleu nuit), trame de
   points discrète. Le bleu nuit reste réservé aux textes. */
.thv2-section--dark {
	background-color: var(--c-bleu);
	background-image:
		radial-gradient(ellipse 60% 70% at 100% 0%, rgb(255 89 100 / 30%), transparent 60%),
		radial-gradient(ellipse 50% 60% at 0% 100%, rgb(248 213 3 / 22%), transparent 60%),
		radial-gradient(rgb(255 255 255 / 10%) 1.5px, transparent 2px);
	background-size: auto, auto, 22px 22px;
	color: var(--c-blanc);
}

.thv2-section--dark h2,
.thv2-section--dark h3,
.thv2-section--dark h4 { color: var(--c-blanc); }

/* Textures d'arrière-plan — dégradés charte + trame diagonale discrète */
.thv2-texture {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image:
		radial-gradient(ellipse 70% 60% at 90% -10%, rgb(248 213 3 / 18%), transparent 60%),
		radial-gradient(ellipse 60% 60% at -10% 105%, rgb(255 89 100 / 12%), transparent 60%),
		radial-gradient(ellipse 50% 50% at 50% 50%, rgb(22 109 169 / 5%), transparent 70%);
}

.thv2-texture--lines::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(115deg, transparent 0 38px, rgb(28 35 57 / 3.5%) 38px 39px);
	mask-image: radial-gradient(ellipse 80% 70% at 70% 40%, #000, transparent 75%);
}

/* Motifs graphiques de la charte */
.thv2-motif {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	user-select: none;
}

.thv2-motif--spin { animation: thv2-spin 26s linear infinite; }
.thv2-motif--float { animation: thv2-float 7s ease-in-out infinite; }

@keyframes thv2-spin { to { transform: rotate(360deg); } }

@keyframes thv2-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-14px); }
}

/* --------------------------------------------------------------------------
   Révélations à l'entrée dans le viewport
   --------------------------------------------------------------------------
   design-system.js pose `.is-in` à l'entrée dans l'écran, puis `.is-settled`
   une fois l'animation jouée. Les règles ne décrivent que l'état de départ
   (`:not(.is-in)`) et la transition d'entrée (`:not(.is-settled)`) : une fois
   posé, l'élément retrouve ses propres transform, transition et effets de
   survol, sans délai de cascade résiduel.

   Sans JavaScript, `html.thv2-js` n'est jamais posée : tout reste visible.

   .thv2-reveal          l'élément entre lui-même ;
   .thv2-reveal-group    ses enfants entrent l'un après l'autre.

   Variantes (data-anim), inspirées du modèle de référence : "down"
   (fadeInDown), "left", "right", "zoom", "rotate", "blur", "side"
   (glissement latéral alterné, groupes) et "clip" (rideau sur une image).
   -------------------------------------------------------------------------- */
.thv2-js .thv2-reveal:not(.is-settled),
.thv2-js .thv2-reveal-group:not(.is-settled) > * {
	transition:
		opacity 1s var(--ease-expo),
		transform 1.2s var(--ease-expo),
		filter 1s var(--ease-expo),
		clip-path 1.3s var(--ease-expo);
}

.thv2-js .thv2-reveal:not(.is-in),
.thv2-js .thv2-reveal-group:not(.is-in) > * {
	opacity: 0;
	transform: translateY(36px);
}

.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(2)  { transition-delay: 90ms; }
.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(3)  { transition-delay: 180ms; }
.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(4)  { transition-delay: 270ms; }
.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(5)  { transition-delay: 360ms; }
.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(6)  { transition-delay: 450ms; }
.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(7)  { transition-delay: 520ms; }
.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(8)  { transition-delay: 580ms; }
.thv2-js .thv2-reveal-group.is-in:not(.is-settled) > :nth-child(n+9) { transition-delay: 640ms; }

.thv2-js .thv2-reveal[data-anim="down"]:not(.is-in),
.thv2-js .thv2-reveal-group[data-anim="down"]:not(.is-in) > * { transform: translateY(-40px); }

.thv2-js .thv2-reveal[data-anim="left"]:not(.is-in),
.thv2-js .thv2-reveal-group[data-anim="left"]:not(.is-in) > * { transform: translateX(-70px); }

.thv2-js .thv2-reveal[data-anim="right"]:not(.is-in),
.thv2-js .thv2-reveal-group[data-anim="right"]:not(.is-in) > * { transform: translateX(70px); }

.thv2-js .thv2-reveal[data-anim="zoom"]:not(.is-in),
.thv2-js .thv2-reveal-group[data-anim="zoom"]:not(.is-in) > * { transform: scale(0.8); }

.thv2-js .thv2-reveal[data-anim="rotate"]:not(.is-in),
.thv2-js .thv2-reveal-group[data-anim="rotate"]:not(.is-in) > * {
	transform: rotate(-10deg) translateY(40px);
	transform-origin: left bottom;
}

.thv2-js .thv2-reveal[data-anim="blur"]:not(.is-in),
.thv2-js .thv2-reveal-group[data-anim="blur"]:not(.is-in) > * {
	filter: blur(14px);
	transform: scale(1.04);
}

/* Glissement latéral alterné : colonnes de gauche depuis la gauche, colonnes
   de droite depuis la droite (grille de 4 colonnes, 2 en tablette). */
.thv2-js .thv2-reveal-group[data-anim="side"]:not(.is-in) > * { transform: translateX(-110px) rotate(-3deg); }
.thv2-js .thv2-reveal-group[data-anim="side"]:not(.is-in) > :nth-child(4n+3),
.thv2-js .thv2-reveal-group[data-anim="side"]:not(.is-in) > :nth-child(4n+4) { transform: translateX(110px) rotate(3deg); }

@media (max-width: 1023px) {
	.thv2-js .thv2-reveal-group[data-anim="side"]:not(.is-in) > :nth-child(odd) { transform: translateX(-80px) rotate(-3deg); }
	.thv2-js .thv2-reveal-group[data-anim="side"]:not(.is-in) > :nth-child(even) { transform: translateX(80px) rotate(3deg); }
}

/* Grille « latérale » (.thv2-side) : chaque élément est observé à part, ligne
   par ligne. Ceux de la moitié gauche arrivent de la gauche, ceux de la moitié
   droite de la droite ; sur une seule colonne, ils alternent. Sens, amplitude
   et délai (--side-x, --side-r, --side-d) sont calculés par design-system.js. */
.thv2-js .thv2-side > :not(.is-settled) {
	transition:
		opacity 0.9s var(--ease-expo),
		transform 1.3s var(--ease-expo);
	transition-delay: var(--side-d, 0ms);
}

.thv2-js .thv2-side > :not(.is-in) {
	opacity: 0;
	transform: translateX(var(--side-x, -160px)) rotate(var(--side-r, -4deg));
}

/* Rideau : l'image se découvre de haut en bas en se dézoomant. */
.thv2-js .thv2-reveal[data-anim="clip"]:not(.is-in) {
	opacity: 1;
	transform: none;
	clip-path: inset(0 0 100% 0);
}

/* Fin du rideau : un encart au-delà des bords, pour ne rogner ni ombre ni
   pastille qui déborde. */
.thv2-js .thv2-reveal[data-anim="clip"].is-in:not(.is-settled) { clip-path: inset(-30% -30% -30% -30%); }

.thv2-js .thv2-reveal[data-anim="clip"] img { transition: transform 1.8s var(--ease-expo); }
.thv2-js .thv2-reveal[data-anim="clip"]:not(.is-in) img { transform: scale(1.25); }

/* Entêtes de section : kicker, titre puis chapô tombent l'un après l'autre
   (fadeInDown du modèle). C'est l'entête qui est observée, ses enfants qui
   bougent ; les titres découpés mot à mot ont leur propre entrée. */
.thv2-js .thv2-sec-head.thv2-reveal:not(.is-in) {
	opacity: 1;
	transform: none;
}

.thv2-js .thv2-sec-head.thv2-reveal:not(.is-settled) > :not([data-split]) {
	transition:
		opacity 1s var(--ease-expo),
		transform 1.2s var(--ease-expo);
}

.thv2-js .thv2-sec-head.thv2-reveal:not(.is-in) > :not([data-split]) {
	opacity: 0;
	transform: translateY(-34px);
}

.thv2-js .thv2-sec-head.thv2-reveal.is-in > :nth-child(2) { transition-delay: 120ms; }
.thv2-js .thv2-sec-head.thv2-reveal.is-in > :nth-child(3) { transition-delay: 240ms; }
.thv2-js .thv2-sec-head.thv2-reveal.is-in > :nth-child(4) { transition-delay: 360ms; }

/* Le trait manuscrit ne se trace qu'à l'apparition du titre. */
.thv2-js .thv2-reveal:not(.is-in) .thv2-hl path,
.thv2-js .thv2-reveal-group:not(.is-in) .thv2-hl path { animation-play-state: paused; }
.thv2-js .thv2-reveal .thv2-hl path,
.thv2-js .thv2-reveal-group .thv2-hl path { animation-delay: 0.6s; }

/* Titres découpés mot à mot ([data-split]) : chaque mot monte derrière un
   masque, en cascade. */
.thv2-w {
	display: inline-block;
	overflow: hidden;
	padding-bottom: 0.08em;
	margin-bottom: -0.08em;
	vertical-align: bottom;
}

.thv2-w > span {
	display: inline-block;
	transform: translateY(105%) rotate(4deg);
	transform-origin: left bottom;
	transition: transform 1.1s var(--ease-expo);
	transition-delay: calc(var(--i, 0) * 70ms + 150ms);
}

.is-split-in .thv2-w > span { transform: none; }

/* L'exergue garde son trait : on ne la masque pas, elle surgit en zoom. */
.thv2-w--hl { overflow: visible; }

.thv2-w--hl > span {
	transform: scale(0.6) rotate(-6deg);
	opacity: 0;
	transition:
		transform 1s var(--ease-back),
		opacity 0.6s var(--ease-out);
	transition-delay: calc(var(--i, 0) * 70ms + 250ms);
}

.is-split-in .thv2-w--hl > span { opacity: 1; }

/* Effets liés au défilement ([data-fx]) : design-system.js pose --fx de 0
   (l'élément entre par le bas de l'écran) à 1 (il sort par le haut). */
[data-fx="drift"] {
	translate: 0 calc((var(--fx, 0.5) - 0.5) * var(--drift, -160px));
	rotate: calc((var(--fx, 0.5) - 0.5) * var(--turn, 40deg));
}

[data-fx="scale-in"] {
	scale: calc(0.88 + min(var(--fx, 0.5) * 2, 1) * 0.12);
}

/* Cartes empilées (missions) : la carte recouverte recule, pâlit et se
   floute pendant que la suivante glisse par-dessus — effets « scale out »,
   « opacity » et « blur » du modèle. --stack est posé par design-system.js. */
.thv2-stack > * {
	transform: scale(calc(1 - var(--stack, 0) * 0.08));
	filter: blur(calc(var(--stack, 0) * 3px)) saturate(calc(1 - var(--stack, 0) * 0.5));
	opacity: calc(1 - var(--stack, 0) * 0.35);
	transform-origin: center top;
	will-change: transform;
}

/* Parallaxe : l'image de fond glisse un peu moins vite que la page. Le
   décalage est posé par design-system.js sur --parallax. */
.thv2-parallax {
	will-change: transform;
	transform: translate3d(0, var(--parallax, 0px), 0);
}

/* L'image est agrandie et recentrée : en glissant, elle découvrirait sinon
   un bord vide en haut ou en bas de son conteneur. */
[data-parallax] {
	/* `top` n'a d'effet que sur un élément positionné : sans `position`,
	   l'image restait collée en haut et, en glissant, découvrait une bande
	   du fond bleu nuit sous l'en-tête. */
	position: relative;
	display: block;
	height: 124% !important;
	top: -12% !important;
}

@media (prefers-reduced-motion: reduce) {
	.tarmac-v2 *,
	.tarmac-v2 *::before,
	.tarmac-v2 *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}

	.thv2-reveal,
	.thv2-reveal-group > * {
		opacity: 1;
		transform: none;
		transition-delay: 0ms !important;
	}

	.thv2-parallax { transform: none !important; }

	.thv2-reveal[data-anim],
	.thv2-reveal-group[data-anim] > *,
	.thv2-sec-head.thv2-reveal > * {
		opacity: 1 !important;
		transform: none !important;
		filter: none !important;
		clip-path: none !important;
	}

	.thv2-w > span { transform: none !important; opacity: 1 !important; }

	[data-fx] { translate: none !important; rotate: none !important; scale: none !important; }

	.thv2-stack > * { transform: none !important; filter: none !important; opacity: 1 !important; }

	.thv2-side > * { opacity: 1 !important; transform: none !important; }

	.thv2-hl path { stroke-dashoffset: 0; }
}

/* ==========================================================================
   3. Composants
   ========================================================================== */

/* Kicker : trait + pastille, avant chaque titre de section */
.thv2-kicker {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-bleu);
}

.thv2-kicker::before {
	content: "";
	flex: none;
	width: 44px;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, var(--c-rose) 0 33%, var(--c-jaune) 33% 66%, var(--c-vert) 66%);
}

.thv2-kicker span {
	padding: 0.4em 1.1em;
	border-radius: var(--radius-pill);
	background: var(--c-rose-wash);
	color: var(--c-bleu-nuit);
}

.thv2-kicker--center { justify-content: center; }

.thv2-section--dark .thv2-kicker { color: var(--c-jaune); }
.thv2-section--dark .thv2-kicker span { background: rgb(255 255 255 / 12%); color: var(--c-blanc); }

/* Mot mis en exergue (charte : Cartograph CF Heavy Italic + surlignage).
   Sur fond clair : texte bleu, surlignage jaune tracé à l'animation.
   Sur fond foncé ou photo : texte jaune, trait rose. */
.thv2-hl {
	position: relative;
	display: inline-block;
	padding-inline: 0.06em;
	font-family: var(--ff-accent);
	font-style: italic;
	font-weight: 800;
	font-size: 1.02em;
	line-height: 1.1;
	letter-spacing: -0.01em;
	text-transform: none;
	white-space: nowrap;
	color: var(--c-bleu);
	isolation: isolate;
}

.thv2-hl svg {
	position: absolute;
	right: -0.04em;
	bottom: 0.02em;
	left: -0.04em;
	z-index: -1;
	width: calc(100% + 0.08em);
	height: 0.42em;
	overflow: visible;
}

.thv2-hl path {
	fill: none;
	stroke: var(--c-jaune);
	stroke-width: 16;
	stroke-linecap: round;
	stroke-dasharray: 420;
	stroke-dashoffset: 420;
	animation: thv2-draw 1.1s var(--ease-out) 0.5s forwards;
}

@keyframes thv2-draw { to { stroke-dashoffset: 0; } }

.thv2-section--dark .thv2-hl,
.thv2-hero .thv2-hl { color: var(--c-jaune); }

.thv2-section--dark .thv2-hl path,
.thv2-hero .thv2-hl path { stroke: var(--c-rose); stroke-width: 9; }

.thv2-section--dark .thv2-hl svg,
.thv2-hero .thv2-hl svg { bottom: -0.16em; height: 0.3em; }

/* Surlignage jaune — .exergue de la charte */
.thv2-exergue {
	padding: 0 0.12em;
	font-family: var(--ff-accent);
	font-style: italic;
	font-weight: 700;
	background: linear-gradient(180deg, transparent 58%, var(--c-jaune) 58%);
}

/* Boutons */
.thv2-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-3);
	padding: 0.85em 1.9em;
	border: 2px solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--ff-primary);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--dur-base) var(--ease-out),
		color var(--dur-base) var(--ease-out),
		transform var(--dur-fast) var(--ease-out);
}

.thv2-btn svg { transition: transform var(--dur-base) var(--ease-out); }
.thv2-btn:hover { transform: translateY(-3px); }
.thv2-btn:hover svg { transform: translateX(5px); }

.thv2-btn--cta {
	background: var(--c-jaune);
	color: var(--c-bleu-nuit);
	box-shadow: 0 6px 18px rgb(248 213 3 / 35%);
}

.thv2-btn--cta:hover,
.thv2-btn--cta:focus-visible {
	background: var(--c-rose);
	color: var(--c-bleu-nuit);
}

.thv2-btn--primary {
	background: var(--c-bleu);
	color: var(--c-blanc);
}

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

.thv2-btn--vert {
	background: var(--c-vert);
	color: var(--c-bleu-nuit);
}

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

.thv2-btn--rose {
	background: var(--c-rose);
	color: var(--c-bleu-nuit);
	box-shadow: 0 6px 18px rgb(255 89 100 / 30%);
}

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

.thv2-btn--white {
	background: var(--c-blanc);
	color: var(--c-bleu-nuit);
}

.thv2-btn--white:hover,
.thv2-btn--white:focus-visible {
	background: var(--c-jaune);
	color: var(--c-bleu-nuit);
}

.thv2-btn--ghost-light {
	background: transparent;
	color: var(--c-blanc);
	border-color: rgb(255 255 255 / 55%);
}

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

/* Lien fléché */
.thv2-arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	font-size: var(--fs-small);
	font-weight: 700;
	text-decoration: none;
	color: var(--c-bleu);
	transition: gap var(--dur-base) var(--ease-out);
}

.thv2-arrow-link:hover,
.thv2-arrow-link:focus-visible { gap: var(--sp-4); }

/* Liste à coches */
.thv2-checks {
	display: grid;
	gap: var(--sp-3);
	margin: 0 0 var(--sp-5);
	padding: 0;
	list-style: none;
}

.thv2-checks li {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-3);
	font-size: var(--fs-small);
	color: var(--c-text);
}

.thv2-checks li::before {
	content: "";
	flex: none;
	width: 22px;
	height: 22px;
	margin-top: 1px;
	border-radius: var(--radius-pill);
	background: var(--c-vert) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231c2339' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center / 13px no-repeat;
}

.thv2-section--dark .thv2-checks li { color: var(--c-blanc); }

/* Entêtes de section */
.thv2-sec-head {
	max-width: 56ch;
	margin-bottom: var(--sp-8);
}

.thv2-sec-head--center {
	margin-inline: auto;
	text-align: center;
}

.thv2-sec-head p {
	margin: var(--sp-4) 0 0;
	font-size: var(--fs-lead);
	font-weight: 300;
	color: var(--c-text-muted);
}

.thv2-section--dark .thv2-sec-head p { color: rgb(255 255 255 / 88%); }

/* Le kicker est un paragraphe : il ne doit pas hériter du style du chapô. */
.tarmac-v2 p.thv2-kicker,
.thv2-sec-head p.thv2-kicker {
	max-width: none;
	line-height: 1.6;
	margin: 0 0 var(--sp-4);
	font-size: var(--fs-xs);
	font-weight: 700;
	color: var(--c-bleu);
}

.thv2-section--dark .thv2-sec-head p.thv2-kicker { color: var(--c-jaune); }

.thv2-sec-head--split {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--sp-5);
	max-width: none;
}

.thv2-sec-head--split > div { max-width: 56ch; }

/* ==========================================================================
   4. Chiffres clés
   ========================================================================== */

/* Bloc chiffres (charte) : chaque chiffre dans un carré de couleur. */
.thv2-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sp-5);
	margin-top: var(--sp-9);
}

.thv2-stat {
	--stat-bg: var(--c-jaune);
	--stat-fg: var(--c-bleu-nuit);
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 190px;
	padding: var(--sp-6) var(--sp-5);
	border-radius: var(--radius-xl);
	background: var(--stat-bg);
	color: var(--stat-fg);
	text-align: left;
	overflow: hidden;
	isolation: isolate;
	transition: transform var(--dur-slow) var(--ease-back);
}

.thv2-stat:nth-child(4n+2) { --stat-bg: var(--c-rose); }
.thv2-stat:nth-child(4n+3) { --stat-bg: var(--c-vert); }
.thv2-stat:nth-child(4n+4) { --stat-bg: var(--c-bleu); --stat-fg: var(--c-blanc); }

/* Pastille décorative qui tourne lentement dans le coin. */
.thv2-stat::after {
	content: "";
	position: absolute;
	top: -38px;
	right: -38px;
	z-index: -1;
	width: 120px;
	height: 120px;
	border: 18px solid rgb(255 255 255 / 28%);
	border-radius: 50%;
	transition: transform 1.2s var(--ease-expo);
}

.thv2-stat:hover { transform: translateY(-8px) rotate(-1.5deg); }
.thv2-stat:hover::after { transform: scale(1.35) translate(-10px, 10px); }

.thv2-stat .thv2-num {
	display: block;
	font-family: var(--ff-num);
	font-weight: 900;
	font-size: clamp(2.6rem, 4vw, 3.8rem);
	line-height: 1;
	letter-spacing: -0.02em;
	color: inherit;
}

.thv2-stat .thv2-label {
	display: block;
	margin-top: var(--sp-3);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
}

/* ==========================================================================
   5. Cartes « voies d'engagement »
   ========================================================================== */

.thv2-ways {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: var(--sp-5);
}

.thv2-way {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 400px;
	border-radius: var(--radius-xl);
	overflow: hidden;
	color: var(--c-blanc);
	text-decoration: none;
	background: var(--c-bleu-nuit);
	transition: transform var(--dur-base) var(--ease-out);
}

.thv2-way > img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1s var(--ease-out);
}

.thv2-way::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgb(28 35 57 / 95%) 8%, rgb(28 35 57 / 55%) 55%, rgb(28 35 57 / 20%) 100%);
}

.thv2-way__body {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding: var(--sp-6);
}

.thv2-way__body h3 {
	margin-bottom: var(--sp-3);
	color: var(--c-blanc);
}

.thv2-way__body p {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-small);
	color: rgb(255 255 255 / 80%);
}

.thv2-way__tag {
	position: absolute;
	top: var(--sp-5);
	left: var(--sp-5);
	z-index: 1;
	padding: 0.4em 1.1em;
	border-radius: var(--radius-pill);
	background: var(--c-jaune);
	color: var(--c-bleu-nuit);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.thv2-way:hover { transform: translateY(-6px); }
.thv2-way:hover > img { transform: scale(1.07); }

/* ==========================================================================
   6. Cartes article
   ========================================================================== */

.thv2-posts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: var(--sp-5);
}

.thv2-post {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-xl);
	background: var(--c-blanc);
	color: var(--c-bleu-nuit);
	text-decoration: none;
	overflow: hidden;
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

.thv2-post:hover {
	transform: translateY(-6px);
	box-shadow: var(--shadow-lg);
}

.thv2-post__media {
	position: relative;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--c-gris-100);
}

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

.thv2-post:hover .thv2-post__media img { transform: scale(1.07); }

.thv2-post__cat {
	position: absolute;
	top: var(--sp-4);
	right: var(--sp-4);
	padding: 0.35em 1em;
	border-radius: var(--radius-pill);
	background: var(--c-jaune);
	color: var(--c-bleu-nuit);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.thv2-post__body {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: var(--sp-5);
}

.thv2-post__date {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-xs);
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.thv2-post h3 {
	margin-bottom: var(--sp-3);
	font-size: var(--fs-h4);
}

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

.thv2-post .thv2-arrow-link { margin-top: auto; }

/* ==========================================================================
   7. Bandeau défilant
   ========================================================================== */

.thv2-marquee {
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.thv2-marquee__track {
	display: flex;
	align-items: center;
	gap: clamp(2rem, 5vw, 5rem);
	width: max-content;
	animation: thv2-slide 38s linear infinite;
}

.thv2-marquee:hover .thv2-marquee__track,
.thv2-marquee:focus-within .thv2-marquee__track { animation-play-state: paused; }

@keyframes thv2-slide { to { transform: translateX(-50%); } }

.thv2-marquee img {
	height: 56px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: 0.55;
	transition: filter var(--dur-base), opacity var(--dur-base);
}

.thv2-marquee img:hover {
	filter: none;
	opacity: 1;
}

/* ==========================================================================
   8. Bloc CTA
   ========================================================================== */

.thv2-cta {
	position: relative;
	z-index: 0;
	padding: clamp(3rem, 7vw, 6rem) var(--sp-6);
	border-radius: var(--radius-2xl);
	background: var(--c-rose);
	color: var(--c-bleu-nuit);
	text-align: center;
	overflow: hidden;
	isolation: isolate;
}

.thv2-cta > img:not(.thv2-motif) {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.thv2-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(circle at 12% 18%, rgb(248 213 3 / 55%), transparent 32%),
		radial-gradient(circle at 92% 88%, rgb(255 255 255 / 30%), transparent 34%),
		linear-gradient(135deg, rgb(255 89 100 / 94%), rgb(255 89 100 / 86%));
}

.tarmac-v2 .thv2-cta h2 {
	max-width: 20ch;
	margin-inline: auto;
	margin-bottom: var(--sp-5);
	color: var(--c-bleu-nuit);
}

.thv2-cta p {
	max-width: 58ch;
	margin-inline: auto;
	margin-bottom: var(--sp-7);
	font-size: var(--fs-lead);
	font-weight: 500;
	color: var(--c-bleu-nuit);
}

.thv2-cta .thv2-kicker { color: var(--c-bleu-nuit); }
.thv2-cta .thv2-kicker span { background: rgb(255 255 255 / 55%); }
.thv2-cta .thv2-btn--ghost-light { color: var(--c-bleu-nuit); border-color: var(--c-bleu-nuit); }
.thv2-cta .thv2-btn--ghost-light:hover { background: var(--c-bleu-nuit); color: var(--c-blanc); }
.thv2-cta .thv2-btn--cta:hover { background: var(--c-blanc); }

.thv2-cta .thv2-motif { z-index: -1; }
.thv2-cta__m1 { --drift: -120px; width: clamp(90px, 12vw, 170px); top: 8%; left: 4%; }
.thv2-cta__m2 { width: 44px; right: 12%; top: 16%; }
.thv2-cta__m3 { --drift: -90px; width: clamp(70px, 9vw, 130px); right: 5%; bottom: 8%; }

.thv2-cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: center;
}

/* ==========================================================================
   8 bis. Pastilles de navigation, pagination et listes vides
   ========================================================================== */

.thv2-chips {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
}

.thv2-chip {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.6rem 1.1rem;
	border: 1px solid var(--c-border);
	border-radius: 999px;
	background: var(--c-blanc);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	color: var(--c-bleu-nuit);
	transition:
		border-color var(--dur-base) var(--ease-out),
		gap var(--dur-base) var(--ease-out);
}

.thv2-chip:hover {
	border-color: var(--c-vert);
	gap: var(--sp-3);
}

.thv2-chip--all {
	background: var(--c-bleu);
	border-color: transparent;
	color: var(--c-blanc);
}

.thv2-empty {
	padding: var(--sp-7);
	border: 1px dashed var(--c-border);
	border-radius: var(--radius-lg);
	text-align: center;
	color: var(--c-text-muted);
}

.tarmac-v2 .tarmac-pagination {
	margin-top: var(--sp-7);
}

.tarmac-v2 .tarmac-pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-2);
	justify-content: center;
}

.tarmac-v2 .tarmac-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 42px;
	height: 42px;
	padding: 0 0.75rem;
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-blanc);
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	color: var(--c-bleu-nuit);
	transition: border-color var(--dur-base) var(--ease-out);
}

.tarmac-v2 .tarmac-pagination .page-numbers:hover { border-color: var(--c-vert); }

.tarmac-v2 .tarmac-pagination .page-numbers.current {
	background: var(--c-bleu-nuit);
	border-color: transparent;
	color: var(--c-blanc);
}

.tarmac-v2 .tarmac-pagination .page-numbers.dots {
	border-color: transparent;
	background: none;
}

/* ==========================================================================
   8 ter. Navigation entre contenus et bas de section
   ========================================================================== */

.thv2-postnav {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-4);
	justify-content: space-between;
	margin-top: var(--sp-7);
	padding-top: var(--sp-5);
	border-top: 1px solid var(--c-border);
}

.thv2-postnav a {
	display: inline-block;
	max-width: 42ch;
	font-size: var(--fs-small);
	font-weight: 600;
	text-decoration: none;
	color: var(--c-bleu-nuit);
	transition: color var(--dur-base) var(--ease-out);
}

.thv2-postnav a:hover { color: var(--c-bleu); }

.thv2-postnav__next { margin-left: auto; text-align: right; }

.thv2-section__more {
	margin-top: var(--sp-6);
	text-align: center;
}

/* ==========================================================================
   9. Responsive
   ========================================================================== */

@media (max-width: 600px) {
	.thv2-stats {
		grid-template-columns: repeat(2, 1fr);
		gap: var(--sp-6);
	}

	.thv2-stat { min-height: 150px; padding: var(--sp-5) var(--sp-4); }
	.thv2-stat .thv2-num { font-size: clamp(1.9rem, 9vw, 2.6rem); }

	.thv2-sec-head--split { align-items: flex-start; }
}

/* ==========================================================================
   10. Polices de la charte chargées (classes posées par inc/brand-fonts.php)
   ========================================================================== */

/* Charte : H1 en Gotham Black, H2 et suivants en Gotham Bold. */
.has-font-gotham .tarmac-v2 h2,
.has-font-gotham .tarmac-v2 h3,
.has-font-gotham .tarmac-v2 h4 { font-weight: 700; }

/* More Sugar n'existe qu'en une graisse : pas de faux gras. */
.has-font-more-sugar .tarmac-v2 .thv2-num,
.has-font-more-sugar .tarmac-v2 .thv2-step__num b {
	font-weight: 400;
	font-synthesis: none;
	letter-spacing: 0;
}

@media (max-width: 600px) {
	/* Motifs du bloc d'appel : ils passaient sur le titre. */
	.thv2-cta__m1,
	.thv2-cta__m2 { display: none; }
	.thv2-cta__m3 { width: 56px; right: 4%; bottom: 3%; }
}

/* Bloc chiffres : 4 colonnes ou 2, jamais 3 + 1 orphelin (tablette). */
@media (min-width: 601px) and (max-width: 1023px) {
	.thv2-stats { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
	.thv2-stats:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 400px) {
	.thv2-stat .thv2-label { font-size: 0.7rem; letter-spacing: 0.02em; }
	.thv2-stat { padding-inline: var(--sp-3); }
}

/* ==========================================================================
   11. Boutons : un seul comportement au survol (retour de recette du
       16 octobre)
   --------------------------------------------------------------------------
   Quelle que soit sa couleur, un bouton plein passe au bleu nuit, texte
   blanc, en se soulevant légèrement ; toujours avec une transition (plus de
   survol instantané). Le bouton contour sur photo passe au blanc.
   ========================================================================== */
.thv2-btn,
.tarmac-btn,
.tarmac-v2 .wp-block-button__link,
.tarmac-v2 .search-submit,
.tform__submit button,
.tarmac-donate-btn,
.tarmac-footer__donate {
	transition:
		background-color 250ms var(--ease-out, ease),
		color 250ms var(--ease-out, ease),
		border-color 250ms var(--ease-out, ease),
		box-shadow 250ms var(--ease-out, ease),
		transform 250ms var(--ease-out, ease);
}

.tarmac-v2 .thv2-btn:not(.thv2-btn--ghost-light):not(.thv2-btn--white):hover,
.tarmac-v2 .thv2-btn:not(.thv2-btn--ghost-light):not(.thv2-btn--white):focus-visible,
.tarmac-v2 .tarmac-btn:hover,
.tarmac-v2 .tarmac-btn:focus-visible,
.tarmac-v2 .tcnt-body .wp-block-button__link:hover,
.tarmac-v2 .tcnt-body .wp-block-button__link:focus-visible,
.tarmac-v2 .tcnt-body .wp-block-button:first-child .wp-block-button__link:hover,
.tarmac-v2 .tcnt-body .wp-block-button:first-child .wp-block-button__link:focus-visible,
.tarmac-v2 .search-submit:hover,
.tarmac-v2 .search-submit:focus-visible {
	background: var(--c-bleu-nuit);
	border-color: var(--c-bleu-nuit);
	color: var(--c-blanc);
	box-shadow: 0 10px 24px rgb(28 35 57 / 22%);
	transform: translateY(-2px);
}

/* Sur un fond bleu nuit ou bleu, le bleu nuit ne se verrait pas : blanc. */
.thv2-section--dark .thv2-btn:not(.thv2-btn--ghost-light):hover,
.thv2-section--dark .thv2-btn:not(.thv2-btn--ghost-light):focus-visible,
.tarmac-v2 .thv2-btn--white:hover,
.tarmac-v2 .thv2-btn--white:focus-visible,
.tarmac-v2 .thv2-btn--ghost-light:hover,
.tarmac-v2 .thv2-btn--ghost-light:focus-visible {
	background: var(--c-blanc);
	border-color: var(--c-blanc);
	color: var(--c-bleu-nuit);
	transform: translateY(-2px);
}

/* Champ « fichier » : un vrai bouton, cohérent avec le reste. */
.tarmac-v2 input[type="file"] {
	width: 100%;
	padding: 0.5rem;
	border: 1px dashed var(--c-gris-300);
	border-radius: var(--radius-md);
	background: var(--c-gris-50);
	font: inherit;
	font-size: var(--fs-small);
	color: var(--c-text-muted);
	cursor: pointer;
	transition: border-color 250ms ease, background-color 250ms ease;
}

.tarmac-v2 input[type="file"]:hover {
	border-color: var(--c-bleu);
	background: var(--c-bleu-wash);
}

.tarmac-v2 input[type="file"]::file-selector-button {
	margin-right: 0.9rem;
	padding: 0.55rem 1.2rem;
	border: 0;
	border-radius: var(--radius-pill);
	background: var(--c-bleu);
	font: inherit;
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-blanc);
	cursor: pointer;
	transition: background-color 250ms ease;
}

.tarmac-v2 input[type="file"]:hover::file-selector-button { background: var(--c-bleu-nuit); }

/* Formulaire de candidature à une offre : bouton aux couleurs du site. */
.tarmac-v2 .tarmac-job-apply .tarmac-btn--accent {
	padding: 0.85em 1.9em;
	border-radius: var(--radius-pill);
	background: var(--c-jaune);
	font-family: var(--ff-primary);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--c-bleu-nuit);
	box-shadow: 0 6px 18px rgb(248 213 3 / 35%);
}

.tarmac-v2 .tarmac-job-apply .tarmac-btn--accent:hover,
.tarmac-v2 .tarmac-job-apply .tarmac-btn--accent:focus-visible {
	background: var(--c-bleu-nuit);
	color: var(--c-blanc);
	box-shadow: 0 10px 24px rgb(28 35 57 / 22%);
	transform: translateY(-2px);
}

/* ==========================================================================
   12. Accordéons animés et « Nos métiers »
   ========================================================================== */

/* Ouverture et fermeture en douceur : design-system.js anime la hauteur des
   <details> (FAQ, blocs Détails, métiers). */
.tarmac-v2 details.is-animating { overflow: hidden; }

/* Nos métiers : onglets par famille, fiches en accordéon. */
.tmet { background: linear-gradient(180deg, var(--c-blanc), var(--c-rose-wash)); }

.tmet__tabs {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-2);
	margin-bottom: var(--sp-7);
}

.tmet__tab {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.7rem 1.3rem;
	border: 2px solid var(--c-border);
	border-radius: var(--radius-pill);
	background: var(--c-blanc);
	font: inherit;
	font-size: var(--fs-small);
	font-weight: 700;
	color: var(--c-bleu-nuit);
	cursor: pointer;
	transition: background-color 250ms ease, border-color 250ms ease, color 250ms ease, transform 250ms ease;
}

.tmet__tab:hover { border-color: var(--c-rose); transform: translateY(-2px); }

.tmet__tab[aria-selected="true"] {
	border-color: var(--c-bleu-nuit);
	background: var(--c-bleu-nuit);
	color: var(--c-blanc);
}

.tmet__count {
	display: inline-grid;
	place-items: center;
	min-width: 1.6em;
	height: 1.6em;
	padding: 0 0.4em;
	border-radius: var(--radius-pill);
	background: var(--c-jaune);
	font-size: 0.75rem;
	color: var(--c-bleu-nuit);
}

.tmet__panel + .tmet__panel { margin-top: var(--sp-7); }

.tmet__panel-title {
	margin-bottom: var(--sp-4);
	font-size: var(--fs-h4);
}

.thv2-js .tmet--tabs .tmet__panel-title { display: none; }
.thv2-js .tmet--tabs .tmet__panel + .tmet__panel { margin-top: 0; }
.tmet__panel[hidden] { display: none; }

.tmet__panel.is-shown .tmet__item { animation: thv2-rise 0.6s var(--ease-expo) both; }
.tmet__panel.is-shown .tmet__item:nth-child(2) { animation-delay: 50ms; }
.tmet__panel.is-shown .tmet__item:nth-child(3) { animation-delay: 100ms; }
.tmet__panel.is-shown .tmet__item:nth-child(4) { animation-delay: 150ms; }
.tmet__panel.is-shown .tmet__item:nth-child(5) { animation-delay: 200ms; }
.tmet__panel.is-shown .tmet__item:nth-child(6) { animation-delay: 250ms; }
.tmet__panel.is-shown .tmet__item:nth-child(n+7) { animation-delay: 300ms; }

.tmet__list {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
	gap: var(--sp-3);
	align-items: start;
}

.tmet__item {
	border: 1px solid var(--c-border);
	border-left: 5px solid var(--c-jaune);
	border-radius: var(--radius-lg);
	background: var(--c-blanc);
	transition: border-color 250ms ease, box-shadow 250ms ease;
}

.tmet__item:nth-child(4n+2) { border-left-color: var(--c-rose); }
.tmet__item:nth-child(4n+3) { border-left-color: var(--c-vert); }
.tmet__item:nth-child(4n+4) { border-left-color: var(--c-bleu); }
.tmet__item[open] { box-shadow: var(--shadow-md); }

.tmet__item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	font-weight: 700;
	color: var(--c-bleu-nuit);
	cursor: pointer;
	list-style: none;
}

.tmet__item summary::-webkit-details-marker { display: none; }

.tmet__plus {
	flex: none;
	width: 22px;
	height: 22px;
	padding: 4px;
	border-radius: 50%;
	background: var(--c-bleu-wash);
	fill: none;
	stroke: var(--c-bleu);
	stroke-width: 2.6;
	stroke-linecap: round;
	transition: transform 300ms var(--ease-out), background-color 250ms ease;
}

.tmet__item[open] .tmet__plus { transform: rotate(45deg); background: var(--c-rose-wash); stroke: var(--c-rose); }

.tmet__text {
	padding: 0 var(--sp-5) var(--sp-5);
	font-size: var(--fs-small);
	line-height: 1.65;
	color: var(--c-text-muted);
}

.tmet__text p { margin: 0; }

.tmet__cta {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--sp-4);
	margin-top: var(--sp-8);
}

@media (max-width: 600px) {
	.tmet__list { grid-template-columns: 1fr; }
}