/**
 * Modele 12 — habillage des blocs typo-6 (chapeau de page) et blog-2 (grille).
 *
 * Feuille classique plutot que des utilitaires Tailwind : ajouter des classes
 * utilitaires inedites obligerait a recompiler style-tailwind.css, donc a
 * regenerer la feuille qui habille les 79 pages du site pour deux blocs.
 * Le theme pose deja ce motif (css/template_style/template-9.css), on le suit.
 *
 * Variables consommees : --color-primary, --color-obsidian-100/600/700/950,
 * --color-black, --color-white, injectees sur :root par tailwind.config.js.
 *
 * Contrainte de contraste tenue partout : #fc8208 sur blanc vaut 2,52:1.
 * L'orange ne porte donc jamais de texte ici — il sert de filet, de puce et
 * d'aplat sous du texte noir (8,33:1).
 */

.cdtp-intro {
	/* La separation vers le bas est portee par le bloc suivant (.cdtp-blog). */
	padding: 3.5rem 1.25rem 0;
}

@media (min-width: 1024px) {
	.cdtp-intro {
		padding-top: 6.5rem;
	}
}

/* Le titre dispose de toute la largeur du bloc : c'est ce qui lui laisse une
   coupe a deux lignes equilibrees. */
.cdtp-intro__inner {
	max-width: 44rem;
	margin: 0 auto;
	text-align: center;
}

.cdtp-intro__title {
	margin: 0 0 1.25rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: clamp(1.563rem, 1.1rem + 1.9vw, 2.441rem);
	line-height: 1.18;
	letter-spacing: -0.015em;
	color: var(--color-obsidian-950);
	text-wrap: balance;
}

/* Filet orange : l'orange sert d'accent graphique, jamais de couleur de texte
   (#fc8208 sur blanc = 2,52:1). */
.cdtp-intro__title::after {
	content: "";
	display: block;
	width: 3.5rem;
	height: 3px;
	margin: 1.25rem auto 0;
	background: var(--color-primary);
}

/* Mesure exprimee en `em`, donc relative a la taille du corps et non au `rem`
   du document : releve sur le rendu, 44rem donnait 83 signes par ligne. Carlito
   est une fonte etroite, une mesure en rem se serait decalee a la premiere
   retouche de corps. 29em tient la ligne autour de 70 signes (releve : 31em
   donnait encore 72 a 76).
   Sans effet sous 520px : le bloc y est deja plus etroit. */
.cdtp-intro__text {
	max-width: 29em;
	margin-left: auto;
	margin-right: auto;
	font-family: baseTypo, sans-serif;
	font-size: 1.25rem;
	line-height: 1.65;
	color: var(--color-obsidian-700);
	text-wrap: pretty;
}

.cdtp-intro__text > :first-child {
	margin-top: 0;
}

.cdtp-intro__text > :last-child {
	margin-bottom: 0;
}

.cdtp-intro__text p {
	margin: 0 0 1.25rem;
}

.cdtp-intro__text strong {
	color: var(--color-obsidian-950);
	font-weight: 700;
}

.cdtp-intro__text a {
	color: var(--color-obsidian-950);
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
}

.cdtp-intro__text a:hover,
.cdtp-intro__text a:focus-visible {
	text-decoration-color: var(--color-obsidian-950);
}

/* Le theme pose `body ul:not(#menu-footer):not(.nav4)` : le `:not()` adopte la
   specificite de son argument, donc celle d'un IDENTIFIANT. Aucun empilement de
   classes ne la rattrape, `!important` est le seul recours — et il ne depasse
   pas ce bloc. */
.cdtp-intro__text ul {
	margin: 0 0 1.25rem !important;
	padding-left: 1.25rem !important;
	list-style: disc !important;
	text-align: left;
}

.cdtp-intro__text li {
	margin-bottom: 0.4rem;
}

.cdtp-intro__text li::marker {
	color: var(--color-primary);
	font-weight: 700;
}

/* Bouton facultatif du bloc : reprend l'idiome du theme (pastille pleine,
   rounded-full) mais en texte NOIR sur l'aplat orange, soit 8,33:1. */
.cdtp-intro__action {
	margin: 2rem 0 0;
}

.cdtp-intro__button {
	display: inline-block;
	padding: 0.85rem 1.75rem;
	border-radius: 9999px;
	background: var(--color-primary);
	color: var(--color-black);
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.cdtp-intro__button:hover {
	background: var(--color-secondary);
	color: var(--color-white);
}

.cdtp-intro__button:focus-visible {
	outline: 3px solid var(--color-black);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.cdtp-intro__button {
		transition: none;
	}
}


/* ------------------------------------------------------------------ *
 * Grille d'articles (template-parts/blog/blog-2.php)
 * ------------------------------------------------------------------ */

.cdtp-blog {
	/* blog.php portait `my-36` (9rem de part et d'autre). Le chapeau qui
	   precede appartient a la meme sequence de lecture : 5rem suffisent au
	   dessus, la respiration genereuse est gardee pour la rupture du bas,
	   vers le bloc CTA sombre. */
	margin-top: 5rem;
	margin-bottom: 6rem;
	padding-left: 1.25rem;
	padding-right: 1.25rem;
}

.cdtp-blog__kicker {
	margin: 0 0 0.5rem;
	font-family: titleFont, serif;
	font-size: 1.25rem;
	line-height: 1.3;
	text-align: center;
	color: var(--color-obsidian-700);
}

.cdtp-blog__title {
	margin: 0 0 3rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: clamp(1.563rem, 1.1rem + 1.9vw, 2.441rem);
	line-height: 1.18;
	text-align: center;
	color: var(--color-obsidian-950);
	text-wrap: balance;
}

.cdtp-blog__empty {
	margin: 0;
	font-family: baseTypo, sans-serif;
	font-size: 1.25rem;
	color: var(--color-obsidian-700);
}

.cdtp-blog__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem 1.5rem;
}

/* Palier intermediaire absent de blog.php : la grille y passait de 1 colonne
   a 3 d'un coup, laissant les tablettes sur une colonne unique. */
@media (min-width: 640px) {
	.cdtp-blog__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {
	.cdtp-blog__grid {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 2.5rem 1.5rem;
	}
}

.cdtp-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
}

.cdtp-card__media {
	position: relative;
	overflow: hidden;
	border-radius: 0.5rem;
	/* Ratio fixe plutot que la hauteur fixe de blog.php : les vignettes ne se
	   deforment pas et toutes les cartes s'alignent sur la meme ligne d'horizon. */
	aspect-ratio: 3 / 2;
	background: var(--color-obsidian-100);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

.cdtp-card__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.3s ease-out;
}

.cdtp-card:hover .cdtp-card__img {
	transform: scale(1.06);
}

/* La pastille de verre qui chevauche la vignette est l'idiome du theme ; on la
   garde. Ce qui change : la hauteur n'est plus figee a 7rem, donc un titre de
   trois lignes ou plus ne deborde plus par-dessus la carte suivante. */
.cdtp-card__body {
	position: relative;
	z-index: 1;
	display: flex;
	flex: 1;
	flex-direction: column;
	width: 90%;
	margin: -2rem auto 0;
	padding: 1.1rem 1.4rem 1.4rem;
	border-radius: 0.5rem;
	background: rgba(255, 255, 255, 0.92);
	backdrop-filter: blur(10px);
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
}

/* Ligne de meta : etiquette de categorie, puis date. Un seul groupe serre
   au-dessus du titre, et non une ligne de plus — la categorie et la date sont
   deux reperes de meme nature, ils se lisent ensemble.
   `min-height` tient la ligne d'horizon : 30 des 60 articles publies n'ont pas
   encore de categorie reelle, et sans cette hauteur plancher leur titre
   remonterait de quelques pixels par rapport a celui du voisin. */
.cdtp-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	min-height: 1.75rem;
	margin: 0 0 0.35rem;
	font-family: baseTypo, sans-serif;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-obsidian-600);
}

/* Pastille ronde, aplat orange sous du texte noir (8,33:1) : l'idiome est deja
   pose par le bouton du chapeau et par la page courante de la pagination, on le
   reprend tel quel plutot que d'inventer une couleur d'etiquette.
   Ce n'est pas un lien — mais la carte entiere en est un, donc un clic dessus
   mene a l'article : l'affordance ne ment pas. */
.cdtp-card__cat {
	display: inline-block;
	padding: 0.25rem 0.6rem;
	border-radius: 9999px;
	background: var(--color-primary);
	color: var(--color-black);
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 0.72rem;
	line-height: 1.1;
	letter-spacing: 0.06em;
}

.cdtp-card__title {
	margin: 0 0 0.6rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 1.25rem;
	line-height: 1.28;
	color: var(--color-obsidian-950);
}

.cdtp-card__link {
	color: inherit;
	text-decoration: none;
}

/* La carte entiere est cliquable sans dupliquer le lien dans l'arbre
   d'accessibilite : un seul <a>, etendu par un calque. */
.cdtp-card__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

.cdtp-card:hover .cdtp-card__link {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.15em;
}

.cdtp-card__link:focus-visible {
	outline: 3px solid var(--color-black);
	outline-offset: 3px;
}

/* Une carte sans vignette n'a rien a chevaucher : la pastille reprend toute la
   largeur et se pose a plat, sinon elle remonterait sur le vide. */
.cdtp-card--sans-visuel .cdtp-card__body {
	width: 100%;
	margin-top: 0;
	backdrop-filter: none;
	background: var(--color-white);
}

.cdtp-card__excerpt {
	margin: 0;
	font-family: baseTypo, sans-serif;
	font-size: 1rem;
	line-height: 1.55;
	color: var(--color-obsidian-700);
	/* Trois lignes au plus : les cartes d'une rangee gardent un bas aligne. */
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Indice de lecture, en pied de pastille.
   Il repond a deux defauts releves sur la grille :
   - la carte entiere est cliquable (.cdtp-card__link::after), mais rien ne le
     montrait tant qu'on ne la survolait pas ;
   - les cartes d'une rangee s'egalisent sur la plus haute, et celles dont le
     titre tient en deux lignes gardaient 45 a 70 px de blanc sans emploi sous
     l'extrait. `margin-top: auto` confie ce blanc a l'indice, qui vient alors
     se poser sur une meme ligne d'une carte a l'autre. */
.cdtp-card__more {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: auto 0 0;
	/* Serre a l'interieur du groupe date/titre/extrait, genereux pour l'en
	   detacher : l'indice est un autre groupe. */
	padding-top: 1.1rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 0.9rem;
	line-height: 1.2;
	color: var(--color-obsidian-950);
}

/* Meme traitement que les liens du chapeau : texte obsidian, filet orange.
   L'orange souligne, il ne porte pas le texte (2,52:1 sur blanc). */
.cdtp-card__more-label {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.25em;
}

.cdtp-card__more .cdtp-chevron {
	display: block;
	flex: none;
	color: var(--color-obsidian-700);
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.cdtp-card:hover .cdtp-card__more .cdtp-chevron {
	transform: translateX(3px);
}

/* Pagination */
.cdtp-blog__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.5rem;
	margin-top: 3.5rem;
}

.cdtp-blog__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* Cible tactile ecrite en PIXELS, pas en rem : la racine de ce site ne vaut
	   pas 16 px (releve sur le rendu : la pastille 2.75rem sortait a ~39 px),
	   donc une cible exprimee en rem passait sous le minimum de 44 px sans que
	   rien ne le signale. En pixels, le minimum est tenu quelle que soit la
	   racine — y compris si une feuille de plugin la change demain. */
	min-width: 44px;
	height: 44px;
	padding: 0 0.6rem;
	border-radius: 9999px;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1;
	color: var(--color-obsidian-950);
	text-decoration: none;
	transition: background-color 0.2s ease;
}

.cdtp-blog__pagination a.page-numbers:hover {
	background: var(--color-obsidian-100);
}

/* Les points de suspension ne sont pas un lien : ils ne prennent ni la largeur
   ni le poids d'une cible, pour que la serie des pages se lise d'un coup. */
.cdtp-blog__pagination .page-numbers.dots {
	min-width: 1.25rem;
	padding: 0;
	font-weight: 400;
	color: var(--color-obsidian-600);
}

/* Chevrons dessines : meme trace et meme graisse que l'indice des cartes. */
.cdtp-blog__pagination .cdtp-chevron {
	display: block;
}

/* Aplat orange sous du texte noir : 8,33:1. */
.cdtp-blog__pagination .page-numbers.current {
	background: var(--color-primary);
	color: var(--color-black);
}

.cdtp-blog__pagination .page-numbers:focus-visible {
	outline: 3px solid var(--color-black);
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.cdtp-card__img,
	.cdtp-card__more .cdtp-chevron,
	.cdtp-blog__pagination .page-numbers {
		transition: none;
	}

	.cdtp-card:hover .cdtp-card__img,
	.cdtp-card:hover .cdtp-card__more .cdtp-chevron {
		transform: none;
	}
}