@charset "UTF-8";

/* ==========================================================================
   CDTP — Mise en forme des articles de blog (single post)

   Feuille CSS classique, volontairement independante de Tailwind : le contenu
   des articles vit en base (Gutenberg), Tailwind ne scanne que les .php et ne
   compilerait donc jamais des utilitaires ecrits dans post_content.

   Toutes les couleurs proviennent des variables :root generees par
   tailwind.config.js a partir de config.json (primaryColor / secondaryColor).
   Polices : titleFont = Montserrat (titres), baseTypo = Carlito (texte).

   Contraste : #fc8208 sur blanc = 2,52:1. L'orange ne porte donc jamais de
   texte sur fond clair et ne recoit jamais de texte blanc. Il sert d'aplat
   sous du texte noir (8,3:1), de filet, de puce et de soulignement.
   ========================================================================== */

:root {
	/* DEUX PISTES, pas une.
	   L'article etait enferme dans un ruban unique de 41.5rem : paragraphes,
	   titres, sommaire, encadres, accordeon ET tableaux de comparaison y
	   tenaient a la meme largeur, pendant que 800 px de blanc restaient
	   inutilises de part et d'autre sur un ecran de 1440. Les cellules des
	   tableaux se cassaient sur deux lignes faute de place.

	   --cdtp-column : la piste de LECTURE. Elle suit le corps du texte, donc la
	   ligne garde le meme nombre de signes a toutes les tailles d'ecran. Le
	   theme a deja calibre
	   cette mesure sur sa propre fonte (template-12.css : « 44rem donnait 83
	   signes, 29em tient autour de 70, 31em donnait 72 a 76 » a 1.25rem de
	   corps), soit 0,424 em par signe. 32em tient donc la ligne a 75 signes,
	   haut de la fourchette lisible. L'ancienne valeur en donnait 82.

	   --cdtp-wide : la piste LARGE, pour ce qui ne se lit pas ligne a ligne —
	   couverture, tableaux, illustrations, bandeau d'appel a l'action. 60rem
	   n'est pas une valeur neuve : le theme l'emploie deja (max-w-[60rem], et
	   max-w-[1000px] qui vaut la meme chose une fois les gouttieres ajoutees).

	   --cdtp-body-size : 1.25rem au repos, la taille de texte courant que le
	   site emploie deja (.cdtp-intro__text, .cdtp-blog__kicker). L'article
	   lisait plus petit que le chapeau de la page Blog qui y menait.

	   --cdtp-column est la mesure TRADUITE en longueurs absolues : exactement
	   32 fois --cdtp-body-size (32 x 1.125 = 36rem, 32 x 1.081 = 34.592rem,
	   32 x 0.188vw = 6.016vw, 32 x 1.25 = 40rem). Un `em` se resoudrait au
	   corps de l'element qui l'emploie : un titre a 1.953rem y gagnerait une
	   colonne presque deux fois plus large que celle des paragraphes, et les
	   bords ne tomberaient plus en face. Exprimee en rem et vw, la colonne
	   vaut la meme chose pour le texte, les titres, le chapeau et les
	   encadres — ils s'alignent au pixel. */
	--cdtp-wide: 60rem;
	--cdtp-body-size: clamp(1.125rem, 1.081rem + 0.188vw, 1.25rem);
	--cdtp-column: clamp(36rem, 34.592rem + 6.016vw, 40rem);
	--cdtp-gutter: 1.25rem;
	--cdtp-radius: 0.5rem;
	/* Hauteur de la navigation fixe du theme (navigation-4 : min-h-[90px]). */
	--cdtp-nav: 5.625rem;
}

/* --------------------------------------------------------------------------
   1. Enveloppe
   -------------------------------------------------------------------------- */

.cdtp-article-wrap {
	width: 100%;
}

.cdtp-article {
	color: var(--color-obsidian-800);
	font-family: baseTypo, sans-serif;
}

/* Surfaces que le navigateur dessine : elles appartiennent aussi a la charte. */
.cdtp-article ::selection {
	background: var(--color-primary);
	color: var(--color-black);
}

.cdtp-article a:focus-visible,
.cdtp-article summary:focus-visible,
.post-navigation a:focus-visible {
	outline: 3px solid var(--color-secondary);
	outline-offset: 2px;
	border-radius: 2px;
	box-shadow: 0 0 0 6px rgba(252, 130, 8, 0.35);
}

/* --------------------------------------------------------------------------
   2. En-tete
   -------------------------------------------------------------------------- */

/* La navigation du theme est `fixed top-0 min-h-[90px]` : elle ne pousse rien.
   La bande d'en-tete doit donc porter elle-meme sa garde, sinon la premiere
   ligne du titre passe dessous. */
.cdtp-article__header {
	background: var(--color-obsidian-50);
	padding: calc(var(--cdtp-nav) + 3.25rem) var(--cdtp-gutter) 3.25rem;
	text-align: center;
}

.cdtp-article__header-inner {
	max-width: 46rem;
	margin: 0 auto;
}

/* Deux classes : le theme pose `.single-post h1 { font-size: 3rem; margin: 30px 0 }`,
   plus specifique qu'une classe seule. */
.cdtp-article__header .cdtp-article__title {
	margin: 0;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: clamp(1.75rem, 1.15rem + 2.5vw, 3.052rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	color: var(--color-obsidian-950);
	text-wrap: balance;
}

.cdtp-article__meta {
	margin: 1.125rem 0 0;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--color-obsidian-600);
}

.cdtp-article__meta-sep {
	margin: 0 0.5rem;
	color: var(--color-obsidian-400);
}

/* Couverture : deborde legerement sur la bande d'en-tete. Elle appartient a la
   piste large et se cale au pixel sur les tableaux et les illustrations du
   corps, qui s'y alignent eux aussi. */
.cdtp-article__cover {
	max-width: calc(var(--cdtp-wide) + 2 * var(--cdtp-gutter));
	margin: -2.25rem auto 0;
	padding: 0 var(--cdtp-gutter);
}

.cdtp-article__cover-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--cdtp-radius);
	box-shadow: 0 18px 35px -18px rgba(0, 0, 0, 0.45);
}

/* --------------------------------------------------------------------------
   3. Corps de l'article
   -------------------------------------------------------------------------- */

/* Le corps occupe la piste LARGE. Ce sont ses enfants qui se recentrent sur la
   mesure de lecture, un a un : c'est ce qui permet a un tableau ou a une image
   de prendre toute la largeur sans que le texte, lui, s'allonge. */
.cdtp-article__body {
	max-width: calc(var(--cdtp-wide) + 2 * var(--cdtp-gutter));
	margin: 3rem auto 0;
	padding: 0 var(--cdtp-gutter);
	font-size: var(--cdtp-body-size);
	line-height: 1.7;
}

/* Piste de lecture, par defaut. Les marges horizontales des regles qui suivent
   sont ecrites en proprietes separees (margin-top / margin-bottom) et jamais en
   raccourci : un `margin: 0 0 1.25rem` sur `p` remettrait margin-left a zero et
   decalerait le paragraphe a gauche de la colonne. */
.cdtp-article__body > * {
	max-width: var(--cdtp-column);
	margin-inline: auto;
}

/* Piste large : ce qui se regarde d'un coup d'oeil plutot que ligne a ligne. */
.cdtp-article__body > figure.wp-block-table,
.cdtp-article__body > figure.wp-block-image,
.cdtp-article__body > .wp-block-gallery,
.cdtp-article__body > .cdtp-cta {
	max-width: 100%;
}

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

.cdtp-article__body p {
	margin-top: 0;
	margin-bottom: 1.25rem;
}

/* Reponse immediate placee juste apres le H1. Taille relative au corps du
   texte (`em`) : elle reste au-dessus de lui a toutes les largeurs d'ecran,
   alors qu'une valeur en `rem` serait passee EN DESSOUS une fois le corps
   porte a 1.25rem. */
.cdtp-article__body p.cdtp-lead {
	font-size: 1.15em;
	line-height: 1.6;
	color: var(--color-obsidian-900);
	margin-bottom: 1.75rem;
}

.cdtp-article__body h2,
.cdtp-article__body h3,
.cdtp-article__body h4 {
	font-family: titleFont, serif;
	font-weight: 700;
	color: var(--color-obsidian-950);
	letter-spacing: -0.015em;
	text-wrap: balance;
	scroll-margin-top: 6rem;
}

/* Echelle modulaire du theme (1.25 / 1.563 / 1.953 / 3.052) : le corps passe a
   1.25rem, les titres gardent donc exactement un, deux et trois echelons
   au-dessus de lui. */
.cdtp-article__body h2 {
	margin-top: 3.75rem;
	margin-bottom: 0.875rem;
	font-size: clamp(1.4rem, 1.15rem + 1vw, 1.953rem);
	line-height: 1.22;
}

.cdtp-article__body h3 {
	margin-top: 2.5rem;
	margin-bottom: 0.5rem;
	font-size: clamp(1.2rem, 1.08rem + 0.5vw, 1.563rem);
	line-height: 1.3;
}

.cdtp-article__body h4 {
	margin-top: 1.75rem;
	margin-bottom: 0.375rem;
	font-size: 1.125rem;
	line-height: 1.4;
}

/* Liens dans le texte : noir souligne d'orange — lisible et porteur de marque. */
.cdtp-article__body a {
	color: var(--color-obsidian-950);
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	transition: background-color 0.15s ease, text-decoration-thickness 0.15s ease;
}

.cdtp-article__body a:hover {
	background-color: rgba(252, 130, 8, 0.16);
	text-decoration-thickness: 3px;
}

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

/* Listes */
.cdtp-article__body ul,
.cdtp-article__body ol {
	margin: 0 auto 1.5rem;
	padding-left: 1.375rem;
}

/* Le theme pose `body ul:not(#menu-footer):not(.nav4) { list-style: circle; margin: 0;
   padding-left: 40px }`. Le `:not(#menu-footer)` lui donne la specificite d'un
   IDENTIFIANT : aucun empilement de classes ne la rattrape. `!important` est donc le
   seul moyen de rendre les listes au gabarit d'article, et il ne sort pas d'ici. */
.cdtp-article__body ul {
	margin: 0 auto 1.5rem !important;
	padding-left: 1.375rem !important;
	list-style: disc !important;
}

/* Le theme pose `body ol { list-style: circle }` (style.css, ligne 1433) : une liste
   ordonnee y perd ses numeros, donc son sens. Une suite d'etapes redevient un simple
   inventaire ou l'ordre ne se lit plus. La specificite de `.cdtp-article__body ol`
   suffit a reprendre la main, sans `!important`. */
.cdtp-article__body ol {
	list-style: decimal;
}

.cdtp-article__body li {
	margin-bottom: 0.5rem;
}

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

.cdtp-article__body li > ul,
.cdtp-article__body li > ol {
	margin: 0.5rem 0 0;
}

.cdtp-article__body li > ul {
	margin: 0.5rem 0 0 !important;
}

/* Images — piste large. */
.cdtp-article__body figure.wp-block-image {
	margin-top: 3rem;
	margin-bottom: 3rem;
}

.cdtp-article__body figure.wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--cdtp-radius);
}

/* La legende appartient a une figure de la piste large : sans mesure propre,
   elle s'etirerait a 920 px, soit plus de 150 signes par ligne. */
.cdtp-article__body figcaption {
	max-width: var(--cdtp-column);
	margin: 0.75rem auto 0;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--color-obsidian-600);
	text-align: center;
	text-wrap: pretty;
}

/* Citation : pas de filet lateral epais, une regle fine et du caractere. */
.cdtp-article__body blockquote {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--color-primary);
	font-family: titleFont, serif;
	font-size: 1.1875rem;
	line-height: 1.5;
	color: var(--color-obsidian-900);
}

.cdtp-article__body blockquote p:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   4. Tableaux — comparaisons uniquement
   -------------------------------------------------------------------------- */

/* Piste large. C'est le gain le plus net du gabarit : a 664 px, « Vente du
   logement, quelle que soit la nature de la non-conformite » se cassait sur
   deux lignes dans sa cellule pendant que la page gardait 800 px de blanc.
   `scroll-margin-top` : la figure peut recevoir le focus clavier (tabindex=0
   pose par single-post.php) et la navigation du theme est fixe en haut de
   fenetre — sans reserve, la premiere ligne du tableau arrive dessous. */
.cdtp-article__body figure.wp-block-table {
	margin-top: 3rem;
	margin-bottom: 3rem;
	overflow-x: auto;
	scroll-margin-top: 6rem;
	scrollbar-width: thin;
	scrollbar-color: var(--color-obsidian-400) var(--color-obsidian-100);
}

/* Indice de defilement. Sous 500 px de large, la colonne de lecture devient
   plus etroite que le min-width du tableau : la capture mobile du 02/11/2026
   montrait la derniere colonne coupee net au bord, sans rien qui dise qu'elle
   continue. Un degrade sur la figure ne sert a rien ici — les lignes du tableau
   ont leur propre fond et le recouvrent. D'ou une mention, premier enfant de la
   boite defilante, maintenue visible par position: sticky pendant le
   defilement. Elle n'apparait que la ou le defilement existe vraiment. */
@media (max-width: 500px) {
	.cdtp-article__body figure.wp-block-table::before {
		content: "Tableau à faire défiler →";
		position: sticky;
		left: 0;
		display: block;
		width: max-content;
		max-width: 100%;
		margin-bottom: 0.5rem;
		padding: 0.3rem 0.75rem;
		/* Pastille ronde, l'idiome d'etiquette du site (bouton du chapeau,
		   page courante de la pagination, etiquette de categorie), plutot
		   qu'un filet colore epais sur un cote. */
		border-radius: 9999px;
		background: var(--color-obsidian-100);
		font-family: titleFont, serif;
		font-weight: 700;
		font-size: 0.75rem;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		line-height: 1.4;
		color: var(--color-obsidian-700);
	}
}

/* Region defilante atteignable au clavier : sans focus possible, la colonne
   cachee est inaccessible a qui n'utilise pas de souris. */
.cdtp-article__body figure.wp-block-table:focus-visible {
	outline: 3px solid var(--color-black);
	outline-offset: 2px;
}

.cdtp-article__body figure.wp-block-table::-webkit-scrollbar {
	height: 8px;
}

.cdtp-article__body figure.wp-block-table::-webkit-scrollbar-track {
	background: var(--color-obsidian-100);
	border-radius: 4px;
}

.cdtp-article__body figure.wp-block-table::-webkit-scrollbar-thumb {
	background: var(--color-obsidian-400);
	border-radius: 4px;
}

.cdtp-article__body table {
	width: 100%;
	min-width: 32rem;
	border-collapse: collapse;
	font-size: 1rem;
	line-height: 1.5;
}

.cdtp-article__body thead th {
	background: var(--color-obsidian-900);
	color: var(--color-white);
	font-family: titleFont, serif;
	font-weight: 700;
	text-align: left;
	padding: 0.75rem 0.875rem;
	border: 0;
}

.cdtp-article__body td,
.cdtp-article__body tbody th {
	padding: 0.75rem 0.875rem;
	border: 0;
	border-bottom: 1px solid var(--color-obsidian-200);
	vertical-align: top;
	text-align: left;
}

.cdtp-article__body tbody th {
	font-weight: 700;
	color: var(--color-obsidian-950);
}

.cdtp-article__body tbody tr:nth-child(even) {
	background: var(--color-obsidian-50);
}

/* --------------------------------------------------------------------------
   5. Sommaire
   -------------------------------------------------------------------------- */

.cdtp-article__body .cdtp-toc {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	padding: 1.375rem 1.5rem 1.125rem;
	border: 1px solid var(--color-obsidian-200);
	border-radius: var(--cdtp-radius);
	background: var(--color-white);
}

.cdtp-article__body .cdtp-toc__title {
	margin: 0 0 0.875rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-obsidian-900);
}

.cdtp-article__body .cdtp-toc ol {
	margin: 0;
	padding-left: 1.25rem;
	font-size: 1rem;
	line-height: 1.5;
}

.cdtp-article__body .cdtp-toc li {
	margin-bottom: 0.4375rem;
}

.cdtp-article__body .cdtp-toc a {
	text-decoration-thickness: 1px;
	text-decoration-color: var(--color-obsidian-300);
}

.cdtp-article__body .cdtp-toc a:hover {
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   6. Encadre « A retenir »
   -------------------------------------------------------------------------- */

.cdtp-article__body .cdtp-callout {
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
	padding: 1.5rem 1.75rem 1.25rem;
	background: var(--color-obsidian-50);
	border: 1px solid var(--color-obsidian-200);
	border-radius: var(--cdtp-radius);
}

.cdtp-article__body .cdtp-callout__title,
.cdtp-article__body .cdtp-callout > p:first-child,
.cdtp-article__body .cdtp-callout > .wp-block-group__inner-container > p:first-child {
	margin: 0 0 0.875rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-obsidian-900);
}

.cdtp-article__body .cdtp-callout__title::after,
.cdtp-article__body .cdtp-callout > p:first-child::after,
.cdtp-article__body .cdtp-callout > .wp-block-group__inner-container > p:first-child::after {
	content: "";
	display: block;
	width: 2.5rem;
	height: 3px;
	margin-top: 0.625rem;
	background: var(--color-primary);
	border-radius: 2px;
}

/* `core/group` interpose un .wp-block-group__inner-container entre l'encadre et
   ses blocs : un selecteur d'enfant direct seul ne porterait sur rien. */
.cdtp-article__body .cdtp-callout > *:last-child,
.cdtp-article__body .cdtp-callout > .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

.cdtp-article__body .cdtp-callout ul,
.cdtp-article__body .cdtp-callout ol {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   7. FAQ — bloc « Details » natif, reprend l'accordeon du theme
   -------------------------------------------------------------------------- */

.cdtp-article__body .wp-block-details {
	border-bottom: 2px solid var(--color-primary);
	background: var(--color-white);
	/* Meme reserve que les titres (ligne 151) : la navigation est fixe en haut
	   de fenetre, et une question d'accordeon atteinte par une ancre ou par le
	   focus clavier se retrouverait sinon cachee dessous. */
	scroll-margin-top: 6rem;
}

.cdtp-article__body .wp-block-details + .wp-block-details {
	margin-top: 0;
}

.cdtp-article__body .wp-block-details summary {
	position: relative;
	list-style: none;
	cursor: pointer;
	padding: 1.125rem 3.25rem 1.125rem 0;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 1.1875rem;
	line-height: 1.4;
	color: var(--color-obsidian-900);
	transition: color 0.15s ease;
}

.cdtp-article__body .wp-block-details summary::-webkit-details-marker {
	display: none;
}

.cdtp-article__body .wp-block-details summary::marker {
	content: "";
}

.cdtp-article__body .wp-block-details summary:hover {
	color: var(--color-obsidian-950);
}

/* Pastille ronde — reprise de l'accordeon FAQ du theme. */
.cdtp-article__body .wp-block-details summary::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	border: 1px solid var(--color-obsidian-300);
	border-radius: 50%;
	background: var(--color-white);
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

/* Le « + » est dessine, pas tape : deux filets de meme graisse. */
.cdtp-article__body .wp-block-details summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 2rem;
	height: 2rem;
	margin-top: -1rem;
	background-image:
		linear-gradient(var(--color-obsidian-800), var(--color-obsidian-800)),
		linear-gradient(var(--color-obsidian-800), var(--color-obsidian-800));
	background-size: 0.75rem 2px, 2px 0.75rem;
	background-position: center, center;
	background-repeat: no-repeat;
	transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1);
}

.cdtp-article__body .wp-block-details summary:hover::before {
	border-color: var(--color-primary);
	background: var(--color-primary);
}

.cdtp-article__body .wp-block-details[open] summary::after {
	background-size: 0.75rem 2px, 0 0;
	transform: rotate(180deg);
}

.cdtp-article__body .wp-block-details[open] summary {
	color: var(--color-obsidian-950);
}

.cdtp-article__body .wp-block-details > *:not(summary) {
	margin: 0 3.25rem 0.5rem 0;
}

.cdtp-article__body .wp-block-details > p:last-child {
	padding-bottom: 1.125rem;
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   8. Boutons et appels a l'action
   -------------------------------------------------------------------------- */

.cdtp-article__body .wp-block-buttons {
	margin-top: 2rem;
	margin-bottom: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cdtp-article__body .wp-block-button__link {
	display: inline-block;
	background: var(--color-primary);
	color: var(--color-black);
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.3;
	padding: 0.875rem 1.75rem;
	border: 2px solid var(--color-primary);
	border-radius: 9999px;
	text-decoration: none;
	box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.35);
	transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.cdtp-article__body .wp-block-button__link:hover {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: var(--color-white);
}

.cdtp-article__body .is-style-outline .wp-block-button__link,
.cdtp-article__body .wp-block-button.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--color-obsidian-950);
	border: 2px solid var(--color-obsidian-950);
	box-shadow: none;
}

.cdtp-article__body .is-style-outline .wp-block-button__link:hover {
	background: var(--color-obsidian-950);
	color: var(--color-white);
}

/* Bandeau d'appel a l'action — reprend la section noire du site, sur la piste
   LARGE. Pose a la mesure de lecture, il se lisait comme une petite boite
   noire perdue au milieu de la page ; a 920 px c'est une vraie rupture entre
   deux sequences de lecture.
   La largeur gagnee ne doit pas devenir un vide : le contenu se centre dans le
   bandeau, comme le fait deja le site sur ses sections d'appel a l'action, et
   le texte garde la mesure de lecture. Pose a gauche, il aurait laisse 280 px
   de noir vide a droite, que rien n'explique. */
.cdtp-article__body .cdtp-cta {
	margin-top: 3.5rem;
	margin-bottom: 3.5rem;
	padding: 2.5rem clamp(1.5rem, 4vw, 3.5rem);
	background: var(--color-secondary);
	border-radius: var(--cdtp-radius);
	color: var(--color-white);
	text-align: center;
}

.cdtp-article__body .cdtp-cta p {
	color: var(--color-white);
	max-width: var(--cdtp-column);
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5rem;
}

.cdtp-article__body .cdtp-cta .cdtp-cta__title {
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.563rem);
	line-height: 1.25;
	margin-bottom: 0.5rem;
}

.cdtp-article__body .cdtp-cta a:not(.wp-block-button__link) {
	color: var(--color-white);
	text-decoration-color: var(--color-primary);
}

.cdtp-article__body .cdtp-cta a:not(.wp-block-button__link):hover {
	background-color: rgba(252, 130, 8, 0.3);
}

.cdtp-article__body .cdtp-cta .wp-block-buttons {
	margin: 0;
	justify-content: center;
}

/* Un bouton « outline » pose sur le bandeau noir : la bordure et le texte
   obsidian-950 du style par defaut y sont quasi invisibles (contraste releve
   a la capture du 02/11/2026 : le bouton « Demander un devis » disparaissait
   dans le fond). Sur fond noir il passe en blanc, et s'inverse au survol. */
.cdtp-article__body .cdtp-cta .is-style-outline .wp-block-button__link,
.cdtp-article__body .cdtp-cta .wp-block-button.is-style-outline > .wp-block-button__link {
	color: var(--color-white);
	border-color: var(--color-white);
}

.cdtp-article__body .cdtp-cta .is-style-outline .wp-block-button__link:hover,
.cdtp-article__body .cdtp-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background: var(--color-white);
	color: var(--color-black);
	border-color: var(--color-white);
}

.cdtp-article__body .cdtp-cta .wp-block-button__link:focus-visible {
	outline: 3px solid var(--color-white);
	outline-offset: 3px;
}

.cdtp-article__body .cdtp-cta > *:last-child,
.cdtp-article__body .cdtp-cta > .wp-block-group__inner-container > *:last-child {
	margin-bottom: 0;
}

/* --------------------------------------------------------------------------
   9. Encart auteur
   -------------------------------------------------------------------------- */

/* Cale sur la colonne de lecture du corps, gouttieres comprises : les bords de
   l'encart tombent exactement en face de ceux des paragraphes. */
.cdtp-article__author {
	max-width: calc(var(--cdtp-column) + 2 * var(--cdtp-gutter));
	margin: 3.5rem auto 0;
	padding: 0 var(--cdtp-gutter);
}

.cdtp-article__author-label {
	margin: 0 0 0.5rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-obsidian-600);
}

/* Le texte y tenait 98 signes par ligne : plus long que le corps de l'article
   alors qu'il est plus petit. La reserve laterale genereuse le ramene a 74,
   sans le decaler ni laisser de vide a droite. */
.cdtp-article__author-text {
	margin: 0;
	padding: 1.5rem clamp(1.5rem, 5vw, 3.25rem);
	background: var(--color-obsidian-50);
	border-radius: var(--cdtp-radius);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--color-obsidian-800);
	text-wrap: pretty;
}

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

/* --------------------------------------------------------------------------
   10. Navigation entre articles
   -------------------------------------------------------------------------- */

.post-navigation {
	max-width: calc(var(--cdtp-column) + 2 * var(--cdtp-gutter));
	margin: 3.5rem auto 0;
	padding: 1.75rem var(--cdtp-gutter) 0;
	border-top: 1px solid var(--color-obsidian-200);
	font-family: baseTypo, sans-serif;
}

.post-navigation .nav-links {
	display: grid;
	gap: 1.5rem;
}

@media (min-width: 40rem) {
	.post-navigation .nav-links {
		grid-template-columns: 1fr 1fr;
	}

	.post-navigation .nav-next {
		text-align: right;
	}
}

.post-navigation a {
	display: block;
	text-decoration: none;
}

.post-navigation .nav-subtitle {
	display: block;
	margin-bottom: 0.3125rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-obsidian-600);
}

.post-navigation .nav-title {
	display: block;
	font-size: 1rem;
	line-height: 1.45;
	color: var(--color-obsidian-900);
}

.post-navigation a:hover .nav-title {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   11. Listes d'articles (archive / recherche)
   -------------------------------------------------------------------------- */

.cdtp-teaser {
	max-width: calc(var(--cdtp-column) + 2 * var(--cdtp-gutter));
	font-size: var(--cdtp-body-size);
	margin: 0 auto 2.5rem;
	padding: 0 var(--cdtp-gutter) 2rem;
	border-bottom: 1px solid var(--color-obsidian-200);
	font-family: baseTypo, sans-serif;
}

.cdtp-teaser__title {
	margin: 0 0 0.5rem;
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.3;
}

.cdtp-teaser__title a {
	color: var(--color-obsidian-950);
	text-decoration: none;
}

.cdtp-teaser__title a:hover {
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

.cdtp-teaser__meta {
	margin: 0 0 0.625rem;
	font-size: 0.875rem;
	color: var(--color-obsidian-600);
}

.cdtp-teaser__excerpt {
	margin: 0 0 0.75rem;
	font-size: 1em;
	line-height: 1.65;
	color: var(--color-obsidian-800);
}

.cdtp-teaser__more a {
	font-family: titleFont, serif;
	font-weight: 700;
	font-size: 0.9375rem;
	color: var(--color-obsidian-950);
	text-decoration: underline;
	text-decoration-color: var(--color-primary);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------------------
   12. Mouvement reduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.cdtp-article__body .wp-block-details summary::after,
	.cdtp-article__body .wp-block-button__link,
	.cdtp-article__body a {
		transition: none;
	}
}