/**
 * TARMAC — Modèle « Page de contenu »
 *
 * Chargée sur template-contenu.php. Dépend de `design-system.css`
 * (tokens, base, composants) et de `pages.css` (en-tête .tpage-hero).
 *
 * Sommaire
 *   1. Colonne de contenu et sommaire
 *   2. Documents à télécharger
 *   3. Liens utiles
 *   4. Appel à l'action
 *   5. Responsive
 */

/* ==========================================================================
   1. Colonne de contenu et sommaire
   ========================================================================== */

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

.tcnt-body {
	max-width: 74ch;
}

.tcnt-body > * + * { margin-top: var(--sp-5); }

.tcnt-body h2 {
	margin-top: var(--sp-8);
	font-size: var(--fs-h3);
	scroll-margin-top: 120px;
}

.tcnt-body h3 {
	margin-top: var(--sp-6);
	font-size: var(--fs-h4);
}

.tcnt-body ul,
.tcnt-body ol { padding-left: 1.25rem; }

.tcnt-body li + li { margin-top: var(--sp-2); }

.tcnt-body img {
	border-radius: var(--radius-lg);
}

.tcnt-body blockquote {
	margin: 0;
	padding-left: var(--sp-5);
	border-left: 4px solid var(--c-vert);
	font-family: var(--ff-accent);
	font-style: italic;
	font-size: var(--fs-small);
	line-height: 1.7;
}

.tcnt-toc {
	padding: var(--sp-5);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-gris-50);
}

.tcnt-toc__title {
	margin: 0 0 var(--sp-3);
	font-family: var(--ff-primary);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.tcnt-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: tcnt-toc;
}

.tcnt-toc li { counter-increment: tcnt-toc; }
.tcnt-toc li + li { margin-top: var(--sp-2); }

.tcnt-toc a {
	display: flex;
	gap: var(--sp-3);
	font-size: var(--fs-small);
	line-height: 1.4;
	text-decoration: none;
	color: var(--c-text);
	transition: color var(--dur-base) var(--ease-out);
}

.tcnt-toc a::before {
	content: counter(tcnt-toc, decimal-leading-zero);
	flex: none;
	font-family: var(--ff-primary);
	font-weight: 700;
	color: var(--c-vert);
}

.tcnt-toc a:hover { color: var(--c-bleu); }

/* ==========================================================================
   2. Documents à télécharger
   ========================================================================== */

.tcnt-subtitle {
	margin-bottom: var(--sp-5);
	font-size: var(--fs-h3);
}

.tcnt-docs {
	display: grid;
	gap: var(--sp-4);
	margin: 0;
	padding: 0;
	list-style: none;
}

.tcnt-doc a {
	display: flex;
	gap: var(--sp-4);
	align-items: center;
	padding: var(--sp-4) var(--sp-5);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-blanc);
	text-decoration: none;
	color: var(--c-text);
	transition:
		border-color var(--dur-base) var(--ease-out),
		transform var(--dur-base) var(--ease-out);
}

.tcnt-doc a:hover {
	transform: translateX(4px);
	border-color: var(--c-vert);
}

.tcnt-doc__ico {
	flex: none;
	width: 34px;
	height: 34px;
	color: var(--c-bleu);
}

.tcnt-doc__body b {
	display: block;
	font-weight: 700;
	line-height: 1.3;
}

.tcnt-doc__body em {
	display: block;
	margin-top: 2px;
	font-family: var(--ff-primary);
	font-style: normal;
	font-size: var(--fs-xs);
	letter-spacing: 0.06em;
	color: var(--c-text-muted);
}

/* ==========================================================================
   3. Liens utiles
   ========================================================================== */

.tcnt-links {
	display: grid;
	gap: var(--sp-5);
}

.tcnt-link {
	display: flex;
	flex-direction: column;
	gap: var(--sp-2);
	padding: var(--sp-6);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-xl);
	background: var(--c-blanc);
	text-decoration: none;
	color: var(--c-text);
	transition:
		transform var(--dur-base) var(--ease-out),
		box-shadow var(--dur-base) var(--ease-out);
}

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

.tcnt-link h3 { font-size: var(--fs-h4); }

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

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

/* ==========================================================================
   4. Appel à l'action
   ========================================================================== */

.tcnt-cta {
	max-width: 62ch;
	text-align: center;
	margin-inline: auto;
}

.tarmac-contenu .thv2-section--dark .tcnt-cta h2 { color: var(--c-blanc); }

.tcnt-cta p {
	margin-top: var(--sp-4);
	color: rgb(255 255 255 / 80%);
}

/* ==========================================================================
   5. Responsive
   ========================================================================== */

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

@media (min-width: 1024px) {
	.tcnt-layout {
		grid-template-columns: 260px minmax(0, 1fr);
		gap: var(--sp-8);
	}

	.tcnt-layout--solo { grid-template-columns: minmax(0, 1fr); }

	.tcnt-toc {
		position: sticky;
		top: 120px;
	}

	.tcnt-links { grid-template-columns: repeat(3, 1fr); }
	.tcnt-docs { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   6. Blocs de l'éditeur dans la colonne de contenu
   Boutons, questions fréquentes (bloc « Détails ») et cartes (bloc
   « Colonnes »), pour que l'éditeur compose une page riche sans code.
   ========================================================================== */

.tcnt-body .wp-block-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3);
	margin-top: var(--sp-5);
}

.tcnt-body .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: 0.85rem 1.5rem;
	border: 2px solid var(--c-bleu);
	border-radius: var(--radius-pill);
	background: var(--c-bleu);
	font-size: var(--fs-small);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--c-blanc);
	transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out);
}

.tcnt-body .wp-block-button__link:hover,
.tcnt-body .wp-block-button__link:focus-visible {
	background: var(--c-bleu-nuit);
	border-color: var(--c-bleu-nuit);
	color: var(--c-blanc);
}

.tcnt-body .wp-block-button:first-child .wp-block-button__link {
	background: var(--c-jaune);
	border-color: var(--c-jaune);
	color: var(--c-bleu-nuit);
}

.tcnt-body .wp-block-button:first-child .wp-block-button__link:hover {
	background: var(--c-bleu-nuit);
	border-color: var(--c-bleu-nuit);
	color: var(--c-blanc);
}

.tcnt-body .is-style-outline .wp-block-button__link,
.tcnt-body .wp-block-button:not(:first-child) .wp-block-button__link {
	background: transparent;
	color: var(--c-bleu);
}

/* Questions fréquentes -------------------------------------------------- */

.tcnt-body .wp-block-details {
	margin-top: var(--sp-3);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-md);
	background: var(--c-blanc);
	transition: border-color var(--dur-base) var(--ease-out);
}

.tcnt-body .wp-block-details + .wp-block-details { margin-top: var(--sp-3); }

.tcnt-body .wp-block-details[open] { border-color: var(--c-vert); }

.tcnt-body .wp-block-details summary {
	position: relative;
	padding: var(--sp-4) calc(var(--sp-4) * 3) var(--sp-4) var(--sp-5);
	font-weight: 600;
	line-height: 1.4;
	list-style: none;
	cursor: pointer;
}

.tcnt-body .wp-block-details summary::-webkit-details-marker { display: none; }

.tcnt-body .wp-block-details summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: var(--sp-5);
	font-size: 1.5rem;
	font-weight: 400;
	line-height: 1;
	color: var(--c-bleu);
	transform: translateY(-50%);
	transition: transform var(--dur-base) var(--ease-out);
}

.tcnt-body .wp-block-details[open] summary::after { transform: translateY(-50%) rotate(45deg); }

.tcnt-body .wp-block-details summary:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
	border-radius: var(--radius-md);
}

.tcnt-body .wp-block-details > :not(summary) {
	margin: 0;
	padding: 0 var(--sp-5) var(--sp-4);
	color: var(--c-text-muted);
}

/* Cartes (bloc Colonnes) ------------------------------------------------ */

.tcnt-body .wp-block-columns {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: var(--sp-4);
}

.tcnt-body .wp-block-column {
	padding: var(--sp-5);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
	background: var(--c-gris-50);
}

.tcnt-body .wp-block-column > :first-child { margin-top: 0; }
.tcnt-body .wp-block-column > * + * { margin-top: var(--sp-2); }

.tcnt-body .wp-block-column h3 {
	font-size: var(--fs-h4);
	color: var(--c-bleu);
}

.tcnt-body .wp-block-column p { font-size: var(--fs-small); }

/* Étapes : liste numérotée mise en valeur ------------------------------- */

.tcnt-body ol.is-style-etapes {
	padding: 0;
	list-style: none;
	counter-reset: tcnt-step;
}

.tcnt-body ol.is-style-etapes > li {
	position: relative;
	padding: 0 0 0 3.25rem;
	counter-increment: tcnt-step;
}

.tcnt-body ol.is-style-etapes > li + li { margin-top: var(--sp-4); }

.tcnt-body ol.is-style-etapes > li::before {
	content: counter(tcnt-step);
	position: absolute;
	top: -0.1rem;
	left: 0;
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--c-vert);
	font-family: var(--ff-accent);
	font-style: italic;
	font-weight: 700;
	color: var(--c-bleu-nuit);
}

/* Frise chronologique : liste avec la classe `is-style-frise`, chaque
   élément commençant par l'année en gras. --------------------------------- */

.tcnt-body .is-style-frise {
	position: relative;
	margin: var(--sp-6) 0;
	padding: 0 0 0 var(--sp-6);
	list-style: none;
}

.tcnt-body .is-style-frise::before {
	content: "";
	position: absolute;
	top: 0.4rem;
	bottom: 0.4rem;
	left: 0.45rem;
	width: 2px;
	background: linear-gradient(var(--c-vert), var(--c-bleu));
	border-radius: 2px;
}

.tcnt-body .is-style-frise > li {
	position: relative;
	padding-bottom: var(--sp-3);
}

.tcnt-body .is-style-frise > li + li { margin-top: var(--sp-4); }

.tcnt-body .is-style-frise > li::before {
	content: "";
	position: absolute;
	top: 0.35rem;
	left: calc(var(--sp-6) * -1);
	width: 1rem;
	height: 1rem;
	border: 3px solid var(--c-blanc);
	border-radius: 50%;
	background: var(--c-vert);
	box-shadow: 0 0 0 2px var(--c-vert);
}

.tcnt-body .is-style-frise > li > strong:first-child {
	display: block;
	margin-bottom: var(--sp-1);
	font-family: var(--ff-accent);
	font-size: var(--fs-h4);
	font-style: italic;
	color: var(--c-bleu);
}

/* Vidéos côte à côte (bloc Colonnes avec la classe `is-style-videos`). */
.tcnt-body .is-style-videos .wp-block-column {
	padding: 0;
	border: 0;
	background: none;
}

.tcnt-body .wp-block-video video {
	display: block;
	width: 100%;
	border-radius: var(--radius-lg);
	background: var(--c-bleu-nuit);
}

.tcnt-body .wp-block-video figcaption {
	margin-top: var(--sp-2);
	font-size: var(--fs-small);
	color: var(--c-text-muted);
}

/* Cartes (liste avec la classe `is-style-cartes`) : chaque élément commence
   par un titre en gras, suivi d'une phrase. Sert aux valeurs, aux publics… */
.tcnt-body .is-style-cartes {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: var(--sp-4);
	padding: 0;
	list-style: none;
}

.tcnt-body .is-style-cartes > li {
	margin: 0;
	padding: var(--sp-5);
	border-top: 5px solid var(--c-jaune);
	border-radius: var(--radius-lg);
	background: var(--c-blanc);
	box-shadow: var(--shadow-md);
	font-size: var(--fs-small);
	line-height: 1.6;
	color: var(--c-text-muted);
	transition: transform var(--dur-slow) var(--ease-back);
}

.tcnt-body .is-style-cartes > li:nth-child(4n+2) { border-top-color: var(--c-rose); }
.tcnt-body .is-style-cartes > li:nth-child(4n+3) { border-top-color: var(--c-vert); }
.tcnt-body .is-style-cartes > li:nth-child(4n+4) { border-top-color: var(--c-bleu); }
.tcnt-body .is-style-cartes > li:hover { transform: translateY(-4px); }

.tcnt-body .is-style-cartes > li > strong:first-child {
	display: block;
	margin-bottom: var(--sp-2);
	font-size: var(--fs-h4);
	color: var(--c-bleu-nuit);
}

/* Chiffre clé (groupe avec la classe `is-style-chiffre`), compteur animé
   par design-system.js grâce à l'attribut data-count. */
.tcnt-body .is-style-chiffre {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-3) var(--sp-5);
	align-items: baseline;
	padding: var(--sp-6) var(--sp-6);
	border-radius: var(--radius-xl);
	background: var(--c-rose);
	color: var(--c-bleu-nuit);
}

.tcnt-body .is-style-chiffre .thv2-num {
	font-family: var(--ff-num);
	font-size: clamp(3rem, 7vw, 5rem);
	line-height: 1;
}

.has-font-more-sugar .tcnt-body .is-style-chiffre .thv2-num { font-weight: 400; }

.tcnt-body .is-style-chiffre p {
	margin: 0;
	font-size: var(--fs-lead);
	font-weight: 700;
}

/* --------------------------------------------------------------------------
   Documents à télécharger (retour de recette du 16 octobre) : section
   colorée, espacements réguliers, chaque document en carte avec pastille
   de couleur et bouton « Télécharger » bien visible.
   -------------------------------------------------------------------------- */
.tcnt-docs-section {
	background:
		radial-gradient(ellipse 50% 70% at 100% 0%, rgb(248 213 3 / 22%), transparent 70%),
		var(--c-bleu-wash);
}

.tcnt-docs-section .thv2-sec-head { margin-bottom: var(--sp-6); }
.tcnt-docs-section .tcnt-subtitle { margin: 0; font-size: var(--fs-h2); }

.tcnt-docs {
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: var(--sp-5);
}

.tcnt-doc a {
	--doc: var(--c-jaune);
	position: relative;
	flex-wrap: wrap;
	align-items: flex-start;
	height: 100%;
	padding: var(--sp-5);
	border: 0;
	border-top: 5px solid var(--doc);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	transition:
		transform var(--dur-slow) var(--ease-back),
		box-shadow var(--dur-base) var(--ease-out);
}

.tcnt-doc:nth-child(4n+2) a { --doc: var(--c-rose); }
.tcnt-doc:nth-child(4n+3) a { --doc: var(--c-vert); }
.tcnt-doc:nth-child(4n+4) a { --doc: var(--c-bleu); }

.tcnt-doc a:hover,
.tcnt-doc a:focus-visible {
	transform: translateY(-6px);
	border-color: var(--doc);
	box-shadow: var(--shadow-lg);
}

.tcnt-doc__ico {
	width: 48px;
	height: 48px;
	padding: 10px;
	border-radius: var(--radius-md);
	background: var(--doc, var(--c-jaune));
	color: var(--c-bleu-nuit);
	stroke-width: 1.8;
}

.tcnt-doc__body { flex: 1 1 140px; min-width: 0; }
.tcnt-doc__body b { font-size: 1.05rem; }

.tcnt-doc__cta {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: var(--sp-4);
	margin-left: calc(48px + var(--sp-4));
	padding: 0.5rem 1.1rem;
	border-radius: var(--radius-pill);
	background: var(--c-bleu-nuit);
	font-size: var(--fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--c-blanc);
	transition: background-color 250ms ease, color 250ms ease;
}

.tcnt-doc__cta::after { content: "↓"; }

.tcnt-doc a:hover .tcnt-doc__cta,
.tcnt-doc a:focus-visible .tcnt-doc__cta {
	background: var(--doc);
	color: var(--c-bleu-nuit);
}