/**
 * Gabarit d'article Tisserin Promotion.
 *
 * DA DE REFERENCE : l'article RE2025, post 12878,
 * /actualites/re2025-nouveaux-seuils-carbone/. Toutes les valeurs de ce fichier
 * viennent de son CSS par post (`uploads/elementor/css/post-12878.css`), de ses
 * blocs <style> de widget HTML, et d'une sonde de styles calcules sur la page
 * rendue (tools/probe-cdp.js). Rien n'est de memoire.
 *
 * Ce n'est PAS la DA de l'article Jeanbrun (12231), plus ancien, dont les
 * encadres sont des blocs au degrade teal : sur 12878 les encadres sont deux
 * boites claires, l'une gris-bleu tres pale, l'autre menthe.
 *
 * Repere des valeurs, pour ne pas les re-deviner :
 *
 *   grille        colonne 728 / gouttiere 48 / colonne 364, dans 1140,
 *                 align-items:flex-start
 *   H1            Inter 38/800, letter-spacing -0.4px, #1e293b, CENTRE, mb 40
 *   chapeau       Inter 18/400, line-height 1.6em, #64748b, aligne a gauche
 *   ligne de meta Inter 13/500, line-height 1.75em, #64748b
 *   H2            Inter 26/700, letter-spacing -0.4px, #1e293b, mb 12
 *   corps         Inter 16/400, line-height 1.75em, #475569
 *   liens         #457275 souligne, epaisseur 1px, offset 3px
 *   « A retenir » fond #f8fafc, bordure 1px #e2e8f0, radius 12, padding 24/26,
 *                 titre Inter 16/700 #457275, liste Inter 15/400 #1e293b
 *   « point cle » fond #d7f5f7, bordure 1px #b6e3e6, radius 12, padding 18/22,
 *                 texte Inter 15.5/400 #0f3d40
 *   tableau       contenant radius 8 bordure #e5e7eb ; th #457275 blanc 600 p12 ;
 *                 td #111827 p12 ; lignes paires #f9fafb ; filets #e5e7eb
 *   source        Inter 13/500 #64748b, HORS du contenant
 *   sommaire      carte blanche radius 12 bordure #e2e8f0 ombre
 *                 0 4px 12px rgba(0,0,0,.05), sticky top 100 ; titre SOMMAIRE
 *                 13/600 capitales letter-spacing .06em #64748b ; entrees
 *                 NUMEROTEES 01, 02... en 11/600 #cbd5e1 ; survol et actif fond
 *                 #d7f5f7 texte #457275, le numero passant a #457275
 *   a lire aussi  meme carte, liens 14.5/500 #1e293b + sous-titre 13/400 #64748b
 *   FAQ           titre Inter 18/600 #1f2124, ICONE A GAUCHE, filet haut
 *                 #e2e8f0, 5px entre items, reponse 14/400 #334155
 *   CTA du texte  fond #457275 plein, radius 16, padding 44/40, titre 28/700
 *                 blanc, texte 16/400 #dcebe9, bouton blanc en pilule
 *   carte CTA     fond #457275 plein, radius 12, padding 24/22, titre 20/700
 *   redacteur     ni carte ni bordure, photo ronde, nom 19/400 #000, date #848484
 *   sources       PAS de carte : un intitule puis une liste a puces
 *
 * Tout est scope sous .tp-art. Aucune classe Bootstrap n'est reprise : le theme
 * charge bootstrap.css sur tout le site, donc .container, .row, .col-*, .btn,
 * .lead et .table lui appartiennent.
 */

/* =========================================================================
 * 0. Le point dur : les titres du thème sont en !important
 *
 * Le plugin apsulis pose, sur TOUT le site sauf les pages Elementor pleine
 * largeur :
 *
 *   .redesign-tisserin:not(.elementor-template-full-width):not(.elementor-template-canvas) h1
 *   { font-family:"Canela Thin"!important; font-size:40px!important;
 *     line-height:40px!important; color:#457275!important }
 *
 * et l'equivalent sur h2, h3 et h4. L'article 12878 y echappe parce que son body
 * porte elementor-template-full-width. Un gabarit PHP n'a PAS ce laissez-passer :
 * verifie sur une actualite rendue par single.php (post 12183), dont le h1 sort
 * en Canela Thin 40px teal.
 *
 * Un !important ne se bat qu'avec un !important, et a !important egal c'est la
 * specificite qui tranche. Leur selecteur pese (0,3,1) : trois classes, une
 * balise, les deux :not() comptant chacun pour une classe. Les chaines
 * ci-dessous pesent (0,3,2). Elles sont longues expres.
 * ====================================================================== */

main.tp-art .tp-art-head .tp-wrap h1,
main.tp-art .tp-art-colonne .tp-corps h2,
main.tp-art .tp-art-colonne .tp-corps h3,
main.tp-art .tp-art-colonne .tp-corps h4 {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	text-transform: none !important;
}

main.tp-art .tp-art-head .tp-wrap h1 {
	font-size: clamp(27px, 3vw, 38px) !important;
	line-height: 1.1 !important;
	font-weight: 800 !important;
	letter-spacing: -0.4px !important;
	color: #1e293b !important;
}

main.tp-art .tp-art-colonne .tp-corps h2 {
	font-size: 26px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
	letter-spacing: -0.4px !important;
	color: #1e293b !important;
	margin-bottom: 12px !important;
}

main.tp-art .tp-art-colonne .tp-corps h3 {
	font-size: 19px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	color: #1e293b !important;
	margin-bottom: 10px !important;
}

main.tp-art .tp-art-colonne .tp-corps h4 {
	font-size: 16.5px !important;
	line-height: 1.4 !important;
	font-weight: 700 !important;
	letter-spacing: normal !important;
	color: #1e293b !important;
	margin-bottom: 8px !important;
}

/* =========================================================================
 * 0 bis. Le point dur, deuxieme moitie : TOUS les <p> sont en !important
 *
 * Trouve sur le live le 2026-08-20, apres la premiere pose. apsulis ne force pas
 * seulement les titres, il force aussi tous les paragraphes :
 *
 *   .redesign-tisserin:not(...):not(...) p,
 *   .redesign-tisserin:not(...):not(...) ul li,
 *   .redesign-tisserin:not(...):not(...) table td
 *   { font-family:"Spartan Regular"; font-size:13px!important; line-height:20px!important }
 *
 * Trois selecteurs groupes, donc TROIS familles de balises : les paragraphes,
 * les puces et les cellules de tableau. Meme poids que la regle des titres,
 * (0,3,1) pour p et (0,3,2) pour les deux autres, et meme consequence : le corps
 * de texte sortait en 13px/20px, le titre du CTA aussi, la boite « A retenir »
 * pareil. Un !important ne se bat qu'avec un !important : la specificite seule
 * ne suffisait pas, meme a (0,4,1).
 *
 * La liste complete des regles globales en !important d'apsulis, relevee le
 * 2026-08-20, tient en six lignes : h1, h2, h2 strong, h3 plus h4, h3 a nouveau,
 * et ce groupe p / ul li / table td. Il n'y en a pas d'autres.
 *
 * Tout ce qui suit est donc en !important, a une specificite superieure a (0,3,1).
 * Les chaines partent de `main.tp-art` et passent par deux classes d'ossature,
 * ce qui donne au minimum (0,3,2).
 *
 * REGLE POUR LA SUITE : tout nouveau <p> du gabarit qui fixe une taille doit
 * avoir sa ligne ici. Un <p> stylise seulement en section 5 ou 16 sortira en
 * 13px sur le site, alors qu'il sera juste sur le poste de recette.
 * ====================================================================== */

/* La police, pour tous les paragraphes du gabarit. */
main.tp-art .tp-art-head .tp-wrap p,
main.tp-art .tp-art-colonne .tp-corps p,
main.tp-art .tp-art-colonne .tp-sources p,
main.tp-art .tp-art-colonne .tp-redacteur p,
main.tp-art .tp-art-side .tp-art-sticky p {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

/* apsulis passe aussi h2 strong en Canela ThinItalic, a (0,3,2). */
main.tp-art .tp-art-colonne .tp-corps h2 strong,
main.tp-art .tp-art-colonne .tp-corps h3 strong {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-style: normal !important;
}

/* --- en-tete --- */

main.tp-art .tp-art-head .tp-wrap p.tp-chapeau {
	font-size: 18px !important;
	line-height: 1.6 !important;
}

main.tp-art .tp-art-head .tp-wrap p.tp-meta {
	font-size: 13px !important;
	line-height: 1.75 !important;
}

/* --- corps --- */

main.tp-art .tp-art-colonne .tp-corps p {
	font-size: 16px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-retenir p {
	font-size: 15px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-retenir p.tp-retenir-titre {
	font-size: 16px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-cle p {
	font-size: 15.5px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-bloc p.tp-bloc-titre {
	font-size: 16px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-cta-inline p.tp-cta-titre {
	font-size: 28px !important;
	line-height: 1.3 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-cta-inline p.tp-cta-txt {
	font-size: 16px !important;
	line-height: 1.6 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-faq-r p {
	font-size: 15px !important;
	line-height: 1.75 !important;
}

/* --- pied d'article --- */

main.tp-art .tp-art-colonne .tp-redacteur p.tp-red-nom {
	font-size: 19px !important;
	line-height: 1.42 !important;
}

main.tp-art .tp-art-colonne .tp-redacteur p.tp-red-fonction {
	font-size: 15px !important;
	line-height: 1.5 !important;
}

main.tp-art .tp-art-colonne .tp-sources p.tp-sources-titre {
	font-size: 15px !important;
	line-height: 1.5 !important;
}

/* --- colonne de droite --- */

main.tp-art .tp-art-side .tp-art-sticky p.tp-card-titre {
	font-size: 20px !important;
	line-height: 1.4 !important;
}

main.tp-art .tp-art-side .tp-art-sticky p.tp-card-txt {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* --- les puces et les cellules, meme combat --- */

main.tp-art .tp-art-colonne .tp-corps ul li,
main.tp-art .tp-art-colonne .tp-corps ol li,
main.tp-art .tp-art-colonne .tp-sources ul li,
main.tp-art .tp-art-side .tp-art-sticky ol li,
main.tp-art .tp-art-colonne .tp-corps .tp-table td,
main.tp-art .tp-art-colonne .tp-corps .tp-table th {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

main.tp-art .tp-art-colonne .tp-corps ul li,
main.tp-art .tp-art-colonne .tp-corps ol li {
	font-size: 16px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-retenir ul li {
	font-size: 15px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-sources ul li {
	font-size: 14px !important;
	line-height: 1.75 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-graph li,
main.tp-art .tp-art-colonne .tp-corps .tp-donut-leg li {
	font-size: 14px !important;
	line-height: 1.4 !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-graph--colonnes li {
	font-size: 13px !important;
}

main.tp-art .tp-art-colonne .tp-corps .tp-table td,
main.tp-art .tp-art-colonne .tp-corps .tp-table th {
	font-size: 14px !important;
	line-height: 1.5 !important;
}

/* Le sommaire : le libelle vit dans le <a>, mais l'interligne force sur le <li>
   ecraserait le rythme de la carte. */
main.tp-art .tp-art-side .tp-art-sticky .tp-toc ol li,
main.tp-art .tp-art-colonne .tp-toc-mobile ol li {
	font-size: 14px !important;
	line-height: 1.4 !important;
}

@media (max-width: 768px) {
	main.tp-art .tp-art-colonne .tp-corps .tp-cta-inline p.tp-cta-titre {
		font-size: 22px !important;
	}
	main.tp-art .tp-art-head .tp-wrap p.tp-chapeau {
		font-size: 16px !important;
	}
	main.tp-art .tp-art-colonne .tp-corps .tp-graph--barres li {
		font-size: 14px !important;
	}
}

/* =========================================================================
 * 1. Jetons et police
 * ====================================================================== */

.tp-art {
	--tp: #457275;               /* accent charte */
	--tp-fonce: #146264;         /* accent fonce charte, survols */
	--tp-encre: #1e293b;         /* titres */
	--tp-corps-couleur: #475569; /* corps de texte */
	--tp-gris: #64748b;          /* chapeau, meta, intitules de carte */
	--tp-num: #cbd5e1;           /* numeros du sommaire au repos */
	--tp-bord: #e2e8f0;          /* bordure des cartes */
	--tp-filet: #f1f5f9;         /* filet interne des cartes */
	--tp-filet-lien: #f6f8fa;    /* filet entre deux liens « a lire aussi » */
	--tp-fond-doux: #f8fafc;     /* fond de la boite « A retenir » */
	--tp-menthe: #d7f5f7;        /* boite « point cle », survol du sommaire */
	--tp-menthe-bord: #b6e3e6;
	--tp-menthe-texte: #0f3d40;
	--tp-sur-teal: #dcebe9;      /* texte secondaire sur fond teal */
	--tp-bord-table: #e5e7eb;
	--tp-table-alt: #f9fafb;
	--tp-td: #111827;
	--tp-faq-titre: #1f2124;
	--tp-faq-texte: #334155;
	--tp-date: #848484;
	--tp-ombre-carte: 0 4px 12px rgba(0, 0, 0, 0.05);
	--tp-sortie: cubic-bezier(0.22, 0.9, 0.28, 1);
	--tp-col: 728px;

	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--tp-corps-couleur);
	padding-bottom: 80px;
}

/*
 * Le theme pose font-family:"Spartan Regular" sur la classe de body, donc par
 * heritage. Sur le live, les widgets HTML sans police declaree ressortent
 * d'ailleurs en Spartan : c'est le cas du bloc Sources de l'article 12878. On
 * redeclare donc explicitement, y compris sur les balises qu'une autre feuille
 * pourrait cibler nommement.
 */
.tp-art p,
.tp-art li,
.tp-art th,
.tp-art td,
.tp-art summary,
.tp-art figcaption,
.tp-art span,
.tp-art a,
.tp-art strong,
.tp-art em,
.tp-art b {
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.tp-art .tp-wrap {
	max-width: 1180px;
	margin: 0 auto;
	padding: 0 20px;
}

/* =========================================================================
 * 2. En-tete : titre centre, chapeau et ligne de meta a gauche
 * ====================================================================== */

.tp-art-head {
	padding: 40px 0 10px;
}

.tp-art .tp-art-head .tp-wrap h1 {
	margin: 0 0 40px;
	text-align: center;
}

.tp-art .tp-chapeau {
	font-size: 18px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--tp-gris);
	margin: 0 0 10px;
}

.tp-art .tp-meta {
	font-size: 13px;
	line-height: 1.75;
	font-weight: 500;
	color: var(--tp-gris);
	margin: 0;
}

/* =========================================================================
 * 3. Les deux colonnes
 *
 * Le live ne rend collant que le sommaire : les deux cartes en dessous restent
 * en place et disparaissent au scroll. Ici c'est TOUTE la colonne qui colle,
 * sommaire, carte de contact et « A lire aussi » ensemble.
 *
 * Piege : cela interdit align-items:flex-start sur la grille, que le live pose.
 * Un align-items:flex-start ecrase la hauteur de la colonne de droite a celle de
 * son contenu, donc l'element collant qu'elle contient n'a aucune course et le
 * sticky ne se declenche jamais. On laisse donc le stretch par defaut sur la
 * grille et on met align-self:flex-start sur le bloc collant lui-meme.
 * ====================================================================== */

.tp-art-grille {
	display: flex;
	gap: 40px 48px;
	padding-top: 10px;
}

.tp-art .tp-art-colonne {
	flex: 1 1 auto;
	min-width: 0;
	max-width: var(--tp-col);
}

.tp-art-side {
	flex: 0 0 364px;
}

.tp-art .tp-art-sticky {
	position: sticky;
	top: 100px;
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	gap: 18px;
}

/*
 * Sous 1025 px la colonne passe SOUS le contenu au lieu de disparaitre : la
 * carte de contact et le bloc « a lire aussi » restent donc lisibles sur
 * telephone. Le sommaire remonte en tete de l'article sous forme de <details>
 * replie, et sa carte de bureau se masque pour ne pas faire doublon.
 */
@media (max-width: 1024px) {
	.tp-art-grille {
		display: block;
	}
	.tp-art .tp-art-colonne {
		max-width: none;
	}
	.tp-art-side {
		margin-top: 36px;
	}
	.tp-art .tp-art-sticky {
		position: static;
		gap: 18px;
	}
	.tp-art .tp-toc {
		display: none;
	}
}

/* =========================================================================
 * 4. Sommaire : entrees numerotees, pas d'icone
 * ====================================================================== */

.tp-art .tp-carte {
	background: #fff;
	border: 1px solid var(--tp-bord);
	border-radius: 12px;
	padding: 20px;
}

.tp-art .tp-toc {
	box-shadow: var(--tp-ombre-carte);
}

/* Intitule de carte : SOMMAIRE, A LIRE AUSSI. Capitales, 13px, interlettrage. */
.tp-art .tp-carte-titre {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tp-gris);
	display: block;
	margin: 0 0 14px;
	padding-bottom: 10px;
	border-bottom: 1px solid var(--tp-filet);
}

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

.tp-art .tp-toc ol li {
	counter-increment: toc;
	margin: 0;
}

.tp-art .tp-toc-lien,
.tp-art .tp-toc-lien:visited {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 8px 12px;
	text-decoration: none;
	color: var(--tp-gris);
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	border-radius: 6px;
	transition: background-color 0.25s ease, color 0.25s ease;
}

.tp-art .tp-toc-lien::before {
	content: counter(toc, decimal-leading-zero);
	font-size: 11px;
	font-weight: 600;
	color: var(--tp-num);
	flex: 0 0 auto;
}

.tp-art .tp-toc-lien:hover,
.tp-art .tp-toc-lien:focus {
	background: var(--tp-menthe);
	color: var(--tp);
	text-decoration: none;
}

.tp-art .tp-toc-lien:hover::before,
.tp-art .tp-toc-lien:focus::before {
	color: var(--tp);
}

.tp-art .tp-toc-lien.est-actif {
	background: var(--tp-menthe);
	color: var(--tp);
	font-weight: 600;
}

.tp-art .tp-toc-lien.est-actif::before {
	color: var(--tp);
}

/* --- Sommaire replie, sur telephone et tablette --- */

.tp-art .tp-toc-mobile {
	background: #fff;
	border: 1px solid var(--tp-bord);
	border-radius: 12px;
	padding: 14px 18px;
	margin: 0 0 26px;
}

/*
 * Le chevron est dessine a la main, en CSS.
 *
 * bootstrap.css pose `summary{display:block}` en selecteur nu, ce qui supprime
 * le marqueur natif du <details> : sur le site, le mot « Sommaire » se retrouve
 * seul, sans triangle, et rien ne dit qu'il est cliquable. Le pli fonctionne
 * pourtant, mesure avec un vrai clic par tools/test-toc-mobile.js. C'etait donc
 * un probleme d'affordance, pas de mecanique.
 *
 * On assume le retrait du marqueur natif partout, pour que le rendu soit le meme
 * avec ou sans Bootstrap, et on redessine un chevron a droite, comme la FAQ.
 */
.tp-art .tp-toc-mobile summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--tp-gris);
	cursor: pointer;
	list-style: none;
}

.tp-art .tp-toc-mobile summary::-webkit-details-marker {
	display: none;
}

.tp-art .tp-toc-mobile summary::after {
	content: "";
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background: var(--tp-filet) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512' fill='%23457275'%3E%3Cpath d='M143 352.3L7 216.3c-9.4-9.4-9.4-24.6 0-33.9l22.6-22.6c9.4-9.4 24.6-9.4 33.9 0l96.4 96.4 96.4-96.4c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9l-136 136c-9.2 9.4-24.4 9.4-33.8 0z'/%3E%3C/svg%3E") center / 10px auto no-repeat;
	transition: transform 0.35s var(--tp-sortie), background-color 0.25s var(--tp-sortie);
}

.tp-art .tp-toc-mobile[open] summary::after {
	transform: rotate(180deg);
	background-color: var(--tp-menthe);
}

.tp-art .tp-toc-mobile ol {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	counter-reset: toc;
}

.tp-art .tp-toc-mobile ol li {
	counter-increment: toc;
	margin: 0;
}

.tp-art .tp-toc-mobile a,
.tp-art .tp-toc-mobile a:visited {
	display: flex;
	gap: 10px;
	align-items: baseline;
	padding: 7px 0;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--tp-gris);
	text-decoration: none;
}

.tp-art .tp-toc-mobile a::before {
	content: counter(toc, decimal-leading-zero);
	font-size: 11px;
	font-weight: 600;
	color: var(--tp-num);
	flex: 0 0 auto;
}

.tp-art .tp-toc-mobile a:hover,
.tp-art .tp-toc-mobile a:focus {
	color: var(--tp);
	text-decoration: none;
}

@media (min-width: 1025px) {
	.tp-art .tp-toc-mobile {
		display: none;
	}
}

/* =========================================================================
 * 5. Corps
 * ====================================================================== */

.tp-art .tp-corps {
	font-size: 16px;
	line-height: 1.75;
	color: var(--tp-corps-couleur);
}

/* 36 px de bandeau #fixed-top, plus la respiration du sommaire collant. */
.tp-art .tp-corps h2 {
	margin: 34px 0 12px;
	scroll-margin-top: 100px;
}

.tp-art .tp-corps h2:first-child {
	margin-top: 0;
}

.tp-art .tp-corps h3 {
	margin: 26px 0 10px;
}

.tp-art .tp-corps h4 {
	margin: 22px 0 8px;
}

.tp-art .tp-corps p {
	margin: 0 0 16px;
	font-size: 16px;
	line-height: 1.75;
}

.tp-art .tp-corps ul,
.tp-art .tp-corps ol {
	margin: 0 0 24px;
	padding-left: 22px;
}

.tp-art .tp-corps ul {
	list-style: disc;
}

.tp-art .tp-corps ol {
	list-style: decimal;
}

.tp-art .tp-corps li {
	margin-bottom: 8px;
	font-size: 16px;
	line-height: 1.75;
}

.tp-art .tp-corps strong,
.tp-art .tp-corps b {
	color: var(--tp-encre);
	font-weight: 700;
}

/*
 * Liens du corps : teal souligne, epaisseur 1px, offset 3px, exactement comme
 * le bloc <style> du live.
 *
 * bootstrap.css pose a{color:#f05054} et a:hover{color:#e01318} en selecteur nu
 * et il est charge APRES cette feuille, par un <link> brut en fin de <head> :
 * chaque etat est donc declare ici. Le :not(.tp-btn) evite que le libelle d'un
 * bouton injecte par un marqueur ressorte souligne en teal sur fond teal.
 */
.tp-art .tp-corps a:not(.tp-btn),
.tp-art .tp-corps a:not(.tp-btn):visited {
	color: var(--tp);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.tp-art .tp-corps a:not(.tp-btn):hover,
.tp-art .tp-corps a:not(.tp-btn):focus {
	color: var(--tp-fonce);
	text-decoration: underline;
}

/* =========================================================================
 * 6. Figures
 * ====================================================================== */

.tp-art .tp-fig {
	margin: 0 0 24px;
}

.tp-art .tp-fig img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 12px;
}

/* Legende et source partagent la meme ligne : 13/500 gris, hors du cadre. */
.tp-art .tp-fig figcaption,
.tp-art .tp-source {
	font-size: 13px;
	line-height: 1.75;
	font-weight: 500;
	font-style: normal;
	color: var(--tp-gris);
	margin: 8px 0 0;
}

.tp-art .tp-credit {
	font-weight: 400;
}

@media (min-width: 1025px) {
	.tp-art .tp-fig--pleine {
		width: calc(100% + 100px);
		max-width: none;
		margin-left: -50px;
	}
}

/* =========================================================================
 * 7. Tableau
 *
 * Reprise du composant .ct-rt du live, y compris son mode carte sur telephone :
 * chaque ligne devient une carte bordee teal, la premiere cellule sert d'en-tete
 * et les autres affichent leur intitule de colonne via data-label. Le moteur PHP
 * pose donc un data-label sur chaque cellule.
 * ====================================================================== */

.tp-art .tp-bloc {
	margin: 0 0 24px;
}

.tp-art .tp-bloc-titre {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.75;
	color: var(--tp-encre);
	margin: 0 0 12px;
}

.tp-art .tp-tab-scroll {
	width: 100%;
	overflow-x: auto;
	border-radius: 8px;
	border: 1px solid var(--tp-bord-table);
}

.tp-art .tp-table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	font-size: 14px;
	text-align: left;
	background: #fff;
}

.tp-art .tp-table th {
	background: var(--tp);
	color: #fff;
	padding: 12px;
	font-weight: 600;
	text-align: left;
	border-bottom: 1px solid var(--tp-bord-table);
}

.tp-art .tp-table td {
	padding: 12px;
	color: var(--tp-td);
	border-bottom: 1px solid var(--tp-bord-table);
}

.tp-art .tp-table tr:last-child td {
	border-bottom: none;
}

.tp-art .tp-table tbody tr:nth-child(even) {
	background: var(--tp-table-alt);
}

.tp-art .tp-table th:not(:last-child),
.tp-art .tp-table td:not(:last-child) {
	border-right: 1px solid var(--tp-bord-table);
}

@media (max-width: 768px) {
	.tp-art .tp-tab-scroll {
		border: none;
		border-radius: 0;
	}
	.tp-art .tp-table,
	.tp-art .tp-table thead,
	.tp-art .tp-table tbody,
	.tp-art .tp-table tr,
	.tp-art .tp-table td {
		display: block;
		width: 100%;
	}
	.tp-art .tp-table thead {
		display: none;
	}
	.tp-art .tp-table tr {
		margin-bottom: 18px;
		border: 2px solid var(--tp);
		border-radius: 8px;
		background: #fff;
	}
	.tp-art .tp-table tbody tr:nth-child(even) {
		background: #fff;
	}
	.tp-art .tp-table td:first-child {
		background: var(--tp);
		color: #fff;
		font-weight: 700;
		text-align: center;
		padding: 10px;
		border-bottom: 1px solid var(--tp-bord-table);
		border-right: none;
	}
	.tp-art .tp-table td:not(:first-child) {
		text-align: right;
		padding: 12px 12px 12px 45%;
		position: relative;
		border-bottom: 1px solid var(--tp-bord-table);
		border-right: none;
	}
	.tp-art .tp-table td:not(:first-child)::before {
		content: attr(data-label);
		position: absolute;
		left: 12px;
		font-weight: 700;
		color: var(--tp);
		font-size: 0.85em;
		text-transform: uppercase;
	}
	.tp-art .tp-table td:last-child {
		border-bottom: none;
	}
}

/* =========================================================================
 * 8. Graphiques
 *
 * Le live n'en a pas : ils reprennent le contenant du tableau (radius 8, filet
 * #e5e7eb) et l'accent teal, pour rester dans la meme famille visuelle.
 * ====================================================================== */

.tp-art .tp-graph-cadre {
	border: 1px solid var(--tp-bord-table);
	border-radius: 8px;
	background: #fff;
	padding: 20px;
}

.tp-art .tp-graph {
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * .tp-art .tp-corps ul{list-style:disc;padding-left:22px} pese (0,2,1) et bat
 * .tp-art .tp-graph{list-style:none} qui ne pese que (0,2,0) : sans ce reset a
 * specificite superieure, les listes de graphique reprennent la puce et le
 * retrait du corps de texte. Le symptome ne se voit QUE sur les jauges, parce
 * que les trois autres types passent leurs li en grid ou en flex, ce qui
 * supprime le marqueur de liste.
 */
.tp-art .tp-corps ul.tp-graph,
.tp-art .tp-corps ul.tp-donut-leg {
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.tp-art .tp-corps ul.tp-graph > li,
.tp-art .tp-corps ul.tp-donut-leg > li {
	margin-bottom: 0;
}

/* --- barres horizontales --- */

.tp-art .tp-graph--barres {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tp-art .tp-graph--barres li {
	display: grid;
	grid-template-columns: minmax(90px, 28%) 1fr auto;
	align-items: center;
	gap: 14px;
	font-size: 14px;
}

.tp-art .tp-graph-lab {
	color: var(--tp-corps-couleur);
}

.tp-art .tp-graph-bar {
	background: var(--tp-filet);
	border-radius: 999px;
	height: 12px;
	overflow: hidden;
}

.tp-art .tp-graph-bar i {
	display: block;
	height: 100%;
	background: var(--tp);
	border-radius: 999px;
}

.tp-art .tp-graph-val {
	font-weight: 700;
	color: var(--tp-encre);
	white-space: nowrap;
}

/* --- colonnes verticales --- */

.tp-art .tp-graph--colonnes {
	display: flex;
	align-items: flex-end;
	gap: 14px;
	height: 250px;
}

.tp-art .tp-graph--colonnes li {
	flex: 1 1 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: flex-end;
	height: 100%;
	gap: 8px;
	min-width: 0;
}

.tp-art .tp-col-val {
	font-size: 13px;
	font-weight: 700;
	color: var(--tp-encre);
	white-space: nowrap;
}

.tp-art .tp-col-bar {
	flex: 1 1 auto;
	width: 100%;
	max-width: 62px;
	display: flex;
	align-items: flex-end;
	background: var(--tp-filet);
	border-radius: 8px 8px 0 0;
	overflow: hidden;
}

.tp-art .tp-col-bar i {
	display: block;
	width: 100%;
	background: var(--tp);
	border-radius: 8px 8px 0 0;
}

.tp-art .tp-col-lab {
	font-size: 13px;
	color: var(--tp-corps-couleur);
	text-align: center;
	line-height: 1.3;
}

/* --- anneau --- */

.tp-art .tp-donut-wrap {
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.tp-art .tp-donut {
	flex: 0 0 auto;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	-webkit-mask: radial-gradient(circle, transparent 52%, #000 53%);
	mask: radial-gradient(circle, transparent 52%, #000 53%);
}

.tp-art .tp-donut-leg {
	list-style: none;
	margin: 0;
	padding: 0;
	flex: 1 1 240px;
	display: flex;
	flex-direction: column;
	gap: 9px;
}

.tp-art .tp-donut-leg li {
	display: grid;
	grid-template-columns: 12px 1fr auto;
	align-items: center;
	gap: 10px;
	font-size: 14px;
}

.tp-art .tp-puce {
	width: 12px;
	height: 12px;
	border-radius: 3px;
	display: block;
}

.tp-art .tp-leg-lab {
	color: var(--tp-corps-couleur);
}

.tp-art .tp-leg-val {
	font-weight: 700;
	color: var(--tp-encre);
	white-space: nowrap;
}

/* --- jauges --- */

.tp-art .tp-graph--jauges {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tp-art .tp-jauge-tete {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	font-size: 14px;
	margin-bottom: 6px;
}

.tp-art .tp-jauge-lab {
	color: var(--tp-corps-couleur);
}

.tp-art .tp-jauge-val {
	font-weight: 700;
	color: var(--tp-encre);
}

.tp-art .tp-jauge-bar {
	display: block;
	background: var(--tp-filet);
	border-radius: 999px;
	height: 8px;
	overflow: hidden;
}

.tp-art .tp-jauge-bar i {
	display: block;
	height: 100%;
	background: var(--tp);
	border-radius: 999px;
}

/* =========================================================================
 * 9. Encadres : deux boites claires, relevees sur 12878
 * ====================================================================== */

/* « A retenir » : fond gris-bleu tres pale, intitule teal, puces en encre. */
.tp-art .tp-retenir {
	background: var(--tp-fond-doux);
	border: 1px solid var(--tp-bord);
	border-radius: 12px;
	padding: 24px 26px;
	margin: 0 0 30px;
}

.tp-art .tp-retenir-titre {
	font-size: 16px;
	font-weight: 700;
	line-height: 1.75;
	color: var(--tp);
	margin: 0 0 12px;
}

.tp-art .tp-retenir ul {
	margin: 0;
	padding-left: 20px;
	list-style: disc;
}

.tp-art .tp-retenir li {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--tp-encre);
	margin-bottom: 4px;
}

.tp-art .tp-retenir li:last-child {
	margin-bottom: 0;
}

.tp-art .tp-retenir p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--tp-encre);
	margin: 0;
}

/* « Point cle » : boite menthe, texte teal tres fonce, un seul paragraphe. */
.tp-art .tp-cle {
	background: var(--tp-menthe);
	border: 1px solid var(--tp-menthe-bord);
	border-radius: 12px;
	padding: 18px 22px;
	margin: 0 0 30px;
}

.tp-art .tp-cle p {
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--tp-menthe-texte);
	margin: 0;
}

.tp-art .tp-cle strong {
	color: var(--tp-menthe-texte);
	font-weight: 700;
}

/* =========================================================================
 * 10. Le bouton TP : pilule, et rond a fleche sur le principal
 *
 * Le live pose deja la pilule : border-radius 999px, padding 13px 26px, Inter
 * 14.5/600, fond blanc et texte #457275 sur les deux CTA. Le rond a fleche vient
 * de la regle du 2026-08-19, posterieure a cet article : quand deux boutons se
 * suivent, la fleche ne va que sur le principal.
 * ====================================================================== */

.tp-art .tp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.4;
	padding: 13px 26px;
	border: 1px solid transparent;
	border-radius: 999px;
	cursor: pointer;
	text-decoration: none;
	background: var(--tp);
	color: #fff;
	border-color: var(--tp);
	transition: background-color 0.3s var(--tp-sortie), border-color 0.3s var(--tp-sortie), color 0.3s var(--tp-sortie);
}

.tp-art .tp-btn:hover,
.tp-art .tp-btn:focus {
	background: var(--tp-fonce);
	color: #fff;
	border-color: var(--tp-fonce);
	text-decoration: none;
}

/* Le theme neutralise les pseudo-elements de ses propres boutons ; on fait de
   meme pour ne pas heriter d'une fleche en image de fond. */
.tp-art .tp-btn::before,
.tp-art .tp-btn::after {
	content: none;
	display: none;
}

/* plein blanc, sur fond teal : la variante des deux CTA du live */
.tp-art .tp-btn--blanc {
	background: #fff;
	color: var(--tp);
	border-color: #fff;
}

.tp-art .tp-btn--blanc:hover,
.tp-art .tp-btn--blanc:focus {
	background: var(--tp-menthe);
	color: var(--tp-fonce);
	border-color: var(--tp-menthe);
}

/* contour discret, sur fond clair */
.tp-art .tp-btn--nu {
	background: #fff;
	color: var(--tp);
	border-color: var(--tp-bord);
}

.tp-art .tp-btn--nu:hover,
.tp-art .tp-btn--nu:focus {
	background: var(--tp-menthe);
	color: var(--tp-fonce);
	border-color: var(--tp-menthe-bord);
}

/* le rond a fleche */
.tp-art .tp-cta {
	padding: 7px 9px 7px 24px;
	gap: 15px;
}

.tp-art .tp-fleche {
	position: relative;
	overflow: hidden;
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 19px;
	background: rgba(255, 255, 255, 0.22);
}

/* sur un bouton clair, le rond passe en teal plein */
.tp-art .tp-btn--blanc.tp-cta .tp-fleche,
.tp-art .tp-btn--nu.tp-cta .tp-fleche {
	background: var(--tp);
}

.tp-art .tp-fleche svg {
	position: absolute;
	top: 11px;
	left: 11px;
	width: 16px;
	height: 16px;
	fill: none;
	stroke: #fff;
	stroke-width: 2;
	transition: transform 0.5s var(--tp-sortie);
}

.tp-art .tp-fleche svg + svg {
	transform: translate(-160%, 160%);
}

.tp-art .tp-cta:hover .tp-fleche svg,
.tp-art .tp-cta:focus .tp-fleche svg {
	transform: translate(160%, -160%);
}

.tp-art .tp-cta:hover .tp-fleche svg + svg,
.tp-art .tp-cta:focus .tp-fleche svg + svg {
	transform: none;
}

/* =========================================================================
 * 11. CTA dans le texte : bloc teal plein, centre
 * ====================================================================== */

.tp-art .tp-cta-inline {
	margin: 36px 0 0;
	padding: 44px 40px;
	border-radius: 16px;
	background: var(--tp);
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.tp-art .tp-cta-titre {
	font-size: 28px;
	font-weight: 700;
	line-height: 1.3;
	color: #fff;
	margin: 0 0 10px;
}

.tp-art .tp-cta-txt {
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: var(--tp-sur-teal);
	margin: 0 0 22px;
	max-width: 46em;
}

/* =========================================================================
 * 12. Cartes de la colonne de droite
 * ====================================================================== */

/*
 * La carte de contact est rendue deux fois : une fois dans la colonne de droite
 * pour le bureau, une fois dans la colonne de contenu juste apres le texte pour
 * le telephone. On masque celle qui n'est pas de service, pour qu'une seule soit
 * visible et focalisable a la fois. Sur telephone, cela met la carte entre le
 * corps et la signature, et laisse le bloc des derniers articles finir la page.
 */
.tp-art .tp-card--telephone {
	display: none;
}

@media (max-width: 1024px) {
	.tp-art .tp-card--bureau {
		display: none;
	}
	.tp-art .tp-card--telephone {
		display: block;
		margin: 30px 0 0;
	}
}

.tp-art .tp-card--teal {
	background: var(--tp);
	border-radius: 12px;
	padding: 24px 22px;
}

.tp-art .tp-card--teal .tp-card-titre {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
	color: #fff;
	margin: 0 0 8px;
}

.tp-art .tp-card--teal .tp-card-txt {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tp-sur-teal);
	margin: 0 0 16px;
}

/* --- « A lire aussi » : titre plus sous-titre, filets entre les entrees --- */

.tp-art .tp-links a,
.tp-art .tp-links a:visited {
	display: block;
	font-size: 14.5px;
	font-weight: 500;
	color: var(--tp-encre);
	text-decoration: none;
	padding: 7px 0;
	border-bottom: 1px solid var(--tp-filet-lien);
}

.tp-art .tp-links a:last-child {
	border-bottom: 0;
}

.tp-art .tp-links a:hover,
.tp-art .tp-links a:focus {
	color: var(--tp);
	text-decoration: none;
}

.tp-art .tp-links a span {
	color: var(--tp-gris);
	font-weight: 400;
	font-size: 13px;
	display: block;
}

/* =========================================================================
 * 13. FAQ
 *
 * Refaite le 2026-08-20 a la demande de Louis : le filet fin et le chevron nu
 * colle au titre ne lui plaisaient pas. Chaque question devient une carte
 * bordee radius 12, comme le sommaire, la boite « A retenir » et le bloc
 * « A lire aussi » : c'est le vocabulaire de cette page. Le chevron passe dans
 * un rond, a l'extremite DROITE de la ligne.
 * ====================================================================== */

.tp-art .tp-faq {
	margin: 34px 0 0;
}

.tp-art .tp-faq > h2 {
	margin: 0 0 14px;
	scroll-margin-top: 100px;
}

.tp-art .tp-faq-liste {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.tp-art .tp-faq-item {
	background: #fff;
	border: 1px solid var(--tp-bord);
	border-radius: 12px;
	transition: border-color 0.25s var(--tp-sortie), background-color 0.25s var(--tp-sortie);
}

.tp-art .tp-faq-item[open] {
	background: var(--tp-fond-doux);
	border-color: var(--tp-menthe-bord);
}

.tp-art .tp-faq-item:hover {
	border-color: var(--tp-menthe-bord);
}

.tp-art .tp-faq-tete {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
}

.tp-art .tp-faq-tete::-webkit-details-marker {
	display: none;
}

/* Le h3 de la FAQ vit dans .tp-corps : il herite du bloc !important de la
   section 0. On ne redeclare que ce qui differe. */
main.tp-art .tp-art-colonne .tp-corps .tp-faq-tete h3 {
	font-size: 17px !important;
	line-height: 1.4 !important;
	font-weight: 600 !important;
	color: var(--tp-encre) !important;
	letter-spacing: normal !important;
	margin: 0 !important;
	flex: 1 1 auto;
}

/* Le rond du chevron, cale a droite. Meme vocabulaire que le rond a fleche du
   bouton principal, en version discrete. */
.tp-art .tp-faq-icone {
	flex: 0 0 30px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: var(--tp-filet);
	color: var(--tp);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.35s var(--tp-sortie), background-color 0.25s var(--tp-sortie);
}

.tp-art .tp-faq-icone svg {
	width: 11px;
	height: auto;
	fill: currentColor;
}

.tp-art .tp-faq-tete:hover .tp-faq-icone {
	background: var(--tp-menthe);
}

.tp-art .tp-faq-item[open] .tp-faq-icone {
	transform: rotate(180deg);
	background: var(--tp-menthe);
}

.tp-art .tp-faq-r {
	font-size: 15px;
	line-height: 1.75;
	color: var(--tp-faq-texte);
	padding: 0 18px 18px;
}

.tp-art .tp-faq-r p {
	font-size: 15px;
	line-height: 1.75;
	margin: 0 0 10px;
}

.tp-art .tp-faq-r p:last-child {
	margin-bottom: 0;
}

@media (max-width: 768px) {
	.tp-art .tp-faq-tete {
		padding: 14px;
	}
	.tp-art .tp-faq-r {
		padding: 0 14px 14px;
	}
}

/* =========================================================================
 * 14. Signature et sources
 * ====================================================================== */

/* Ni carte ni bordure : une photo ronde et trois lignes. */
.tp-art .tp-redacteur {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 20px;
	padding: 15px 0;
	margin: 36px 0 0;
}

.tp-art .tp-red-photo {
	width: 96px;
	height: 96px;
	border-radius: 100px;
	object-fit: cover;
	flex: 0 0 auto;
}

.tp-art .tp-red-txt p {
	margin: 0;
}

.tp-art .tp-red-nom {
	font-size: 19px;
	font-weight: 400;
	line-height: 1.42;
	color: #000;
}

.tp-art .tp-red-fonction {
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	color: #000;
}

.tp-art .tp-red-fonction strong {
	font-weight: 700;
}

/* nowrap : sans lui le domaine se coupe sur son trait d'union en mobile
   (« Tisserin- / promotion.com »). La ligne casse desormais avant le domaine. */
.tp-art .tp-red-site {
	color: var(--tp);
	white-space: nowrap;
}

.tp-art .tp-red-maj {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--tp-date);
}

/* Pas de carte sur les sources : un intitule puis une liste a puces. */
.tp-art .tp-sources {
	margin: 8px 0 0;
}

.tp-art .tp-sources-titre {
	font-size: 15px;
	font-weight: 700;
	color: var(--tp-encre);
	margin: 0 0 6px;
}

.tp-art .tp-sources ul {
	list-style: disc;
	margin: 0;
	padding-left: 22px;
}

.tp-art .tp-sources li {
	font-size: 14px;
	font-weight: 400;
	line-height: 1.75;
	color: var(--tp-corps-couleur);
	margin-bottom: 2px;
}

.tp-art .tp-sources li a,
.tp-art .tp-sources li a:visited {
	color: var(--tp);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.tp-art .tp-sources li a:hover,
.tp-art .tp-sources li a:focus {
	color: var(--tp-fonce);
	text-decoration: underline;
}

/* =========================================================================
 * 16. Priorite a l'interieur du corps
 *
 * Les regles de typographie du corps ciblent des BALISES sous une classe :
 * `.tp-art .tp-corps p` pese (0,2,1). Les composants injectes par les marqueurs
 * vivent dans ce meme .tp-corps et leurs regles ne pesent que (0,2,0), donc le
 * corps de texte reprend la main sur eux. Constate en recette : le titre du CTA,
 * declare en 28 px, sortait en 16 px, et les puces de la boite « A retenir »
 * passaient de 15 a 16 px.
 *
 * On ne peut pas s'en sortir en passant les regles du corps en enfant direct
 * (`> p`) : selon l'editeur utilise, WordPress ajoute ou non des classes aux
 * paragraphes et aux listes, et .tp-source est lui-meme un <p> enfant direct de
 * .tp-corps. On redeclare donc ici, avec .tp-corps dans la chaine, ce qui donne
 * (0,3,x) et gagne dans tous les cas.
 *
 * A retenir pour la suite : tout nouveau composant place dans .tp-corps qui fixe
 * une taille de texte doit avoir sa ligne ici.
 * ====================================================================== */

.tp-art .tp-corps .tp-bloc-titre {
	font-size: 16px;
	line-height: 1.75;
	font-weight: 700;
	color: var(--tp-encre);
	margin: 0 0 12px;
}

.tp-art .tp-corps .tp-source {
	font-size: 13px;
	line-height: 1.75;
	font-weight: 500;
	color: var(--tp-gris);
	margin: 8px 0 0;
}

/* p.tp-retenir-titre et non .tp-retenir-titre : la regle
   `.tp-corps .tp-retenir p` juste en dessous pese (0,3,1) et gagnerait sur un
   (0,3,0). L'intitule ressortait en 15 px encre au lieu de 16 px teal. */
.tp-art .tp-corps .tp-retenir p.tp-retenir-titre {
	font-size: 16px;
	line-height: 1.75;
	font-weight: 700;
	color: var(--tp);
	margin: 0 0 12px;
}

.tp-art .tp-corps .tp-retenir p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--tp-encre);
	margin: 0;
}

.tp-art .tp-corps .tp-retenir li {
	font-size: 15px;
	line-height: 1.75;
	color: var(--tp-encre);
	margin-bottom: 4px;
}

.tp-art .tp-corps .tp-retenir li:last-child {
	margin-bottom: 0;
}

.tp-art .tp-corps .tp-cle p {
	font-size: 15.5px;
	line-height: 1.75;
	color: var(--tp-menthe-texte);
	margin: 0;
}

.tp-art .tp-corps .tp-cle strong {
	color: var(--tp-menthe-texte);
	font-weight: 700;
}

.tp-art .tp-corps .tp-cta-titre {
	font-size: 28px;
	line-height: 1.3;
	font-weight: 700;
	color: #fff;
	margin: 0 0 10px;
}

.tp-art .tp-corps .tp-cta-txt {
	font-size: 16px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--tp-sur-teal);
	margin: 0 0 22px;
}

.tp-art .tp-corps .tp-faq-r p {
	font-size: 15px;
	line-height: 1.75;
	color: var(--tp-faq-texte);
	margin: 0 0 10px;
}

.tp-art .tp-corps .tp-faq-r p:last-child {
	margin-bottom: 0;
}

.tp-art .tp-corps .tp-fig figcaption {
	font-size: 13px;
	line-height: 1.75;
	font-weight: 500;
	color: var(--tp-gris);
	margin: 8px 0 0;
}

.tp-art .tp-corps .tp-graph li,
.tp-art .tp-corps .tp-donut-leg li {
	font-size: 14px;
	line-height: 1.4;
}

.tp-art .tp-corps .tp-col-val,
.tp-art .tp-corps .tp-col-lab {
	font-size: 13px;
}

@media (max-width: 768px) {
	.tp-art .tp-corps .tp-cta-titre {
		font-size: 22px;
	}
}

/* =========================================================================
 * 15. Telephone
 * ====================================================================== */

@media (max-width: 768px) {
	.tp-art {
		padding-bottom: 56px;
	}

	.tp-art-head {
		padding: 20px 0 10px;
	}

	.tp-art .tp-art-head .tp-wrap h1 {
		margin-bottom: 20px;
	}

	.tp-art .tp-retenir {
		padding: 16px;
	}

	.tp-art .tp-cta-inline {
		padding: 28px 22px;
	}

	.tp-art .tp-cta-titre {
		font-size: 22px;
	}

	.tp-art .tp-graph--barres li {
		grid-template-columns: 1fr;
		gap: 6px;
	}

	.tp-art .tp-graph--colonnes {
		height: 200px;
	}

	.tp-art .tp-btn {
		width: 100%;
	}

	.tp-art .tp-btn.tp-cta {
		justify-content: space-between;
	}

	/*
	 * Le live donne la photo a 35% de la colonne sous le seuil. Sur un ecran de
	 * 390 px cela fait 122 px et il ne reste plus assez de place pour les trois
	 * lignes. On garde les 35% comme plafond relatif, borne a 88 px.
	 */
	.tp-art .tp-red-photo {
		width: min(35%, 88px);
		height: auto;
		aspect-ratio: 1 / 1;
	}

	.tp-art .tp-redacteur {
		gap: 14px;
	}
}

/* =========================================================================
 * 17. Simulateur de zone A, B, C
 * ====================================================================== */

.tp-art .tp-corps .tp-simu {
	margin: 34px 0;
	padding: 24px;
	border: 1px solid var(--tp-bord);
	border-radius: 14px;
	background: var(--tp-fond-doux);
}

.tp-art .tp-corps p.tp-simu-titre {
	margin: 0 0 4px !important;
	font-size: 19px !important;
	font-weight: 700 !important;
	line-height: 1.35 !important;
	color: var(--tp-encre) !important;
}

.tp-art .tp-corps .tp-simu-lab {
	display: block;
	margin: 0 0 8px;
	font-size: 14px;
	color: var(--tp-gris);
}

.tp-art .tp-corps .tp-simu-champ { position: relative; }

.tp-art .tp-corps .tp-simu-input {
	width: 100%;
	box-sizing: border-box;
	padding: 13px 15px;
	border: 1px solid var(--tp-bord);
	border-radius: 10px;
	background: #fff;
	font: inherit;
	font-size: 16px;   /* 16px minimum, sinon iOS zoome sur le champ */
	color: var(--tp-td);
}

.tp-art .tp-corps .tp-simu-input:focus {
	outline: none;
	border-color: var(--tp-fonce);
	box-shadow: 0 0 0 3px var(--tp-menthe);
}

/* --- Liste de suggestions --- */

.tp-art .tp-corps ul.tp-simu-sugg {
	position: absolute;
	z-index: 20;
	left: 0;
	right: 0;
	top: calc(100% + 6px);
	max-height: 272px;
	overflow-y: auto;
	margin: 0 !important;
	padding: 6px !important;
	list-style: none !important;
	border: 1px solid var(--tp-bord);
	border-radius: 10px;
	background: #fff;
	box-shadow: var(--tp-ombre-carte);
}

.tp-art .tp-corps ul.tp-simu-sugg[hidden] { display: none; }

.tp-art .tp-corps ul.tp-simu-sugg li {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 0 !important;
	padding: 10px 12px !important;
	border-radius: 8px;
	font-size: 15px !important;
	line-height: 1.4 !important;
	color: var(--tp-td) !important;
	cursor: pointer;
	list-style: none !important;
}

.tp-art .tp-corps ul.tp-simu-sugg li::before { content: none !important; }

.tp-art .tp-corps .tp-simu-item:hover,
.tp-art .tp-corps .tp-simu-item.est-actif { background: var(--tp-menthe); }

.tp-art .tp-corps .tp-simu-nom { flex: 1 1 auto; font-weight: 600; }

.tp-art .tp-corps .tp-simu-dep {
	flex: 0 0 auto;
	font-size: 13px !important;
	color: var(--tp-gris) !important;
}

.tp-art .tp-corps .tp-simu-tag {
	flex: 0 0 auto;
	padding: 3px 9px;
	border-radius: 999px;
	background: var(--tp-menthe);
	border: 1px solid var(--tp-menthe-bord);
	font-size: 12px !important;
	font-weight: 700 !important;
	color: var(--tp-menthe-texte) !important;
	white-space: nowrap;
}

.tp-art .tp-corps .tp-simu-etat {
	cursor: default;
	color: var(--tp-gris) !important;
	font-size: 14px !important;
}

/* --- Resultat --- */

.tp-art .tp-corps .tp-simu-out {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid var(--tp-bord);
}

.tp-art .tp-corps .tp-simu-out[hidden] { display: none; }

.tp-art .tp-corps p.tp-simu-res {
	margin: 0 0 10px !important;
	font-size: 16px !important;
	color: var(--tp-gris) !important;
}

.tp-art .tp-corps p.tp-simu-res strong.tp-simu-zone {
	font-size: 26px !important;
	font-weight: 700 !important;
	color: var(--tp-fonce) !important;
	line-height: 1.15 !important;
}

.tp-art .tp-corps p.tp-simu-txt {
	margin: 0 0 12px !important;
	font-size: 15px !important;
	line-height: 1.65 !important;
	color: var(--tp-corps-couleur) !important;
}

.tp-art .tp-corps ul.tp-simu-plaf {
	margin: 0 0 16px !important;
	padding: 0 !important;
	list-style: none !important;
}

.tp-art .tp-corps ul.tp-simu-plaf li {
	margin: 0 0 6px !important;
	padding: 0 0 0 16px !important;
	position: relative;
	font-size: 15px !important;
	line-height: 1.55 !important;
	color: var(--tp-corps-couleur) !important;
	list-style: none !important;
}

.tp-art .tp-corps ul.tp-simu-plaf li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--tp-fonce);
}

.tp-art .tp-corps a.tp-simu-cta {
	display: inline-block;
	padding: 12px 22px;
	border-radius: 999px;
	background: var(--tp-fonce);
	color: #fff !important;
	font-size: 15px;
	font-weight: 600;
	text-decoration: none !important;
	transition: transform 0.18s var(--tp-sortie);
}

.tp-art .tp-corps a.tp-simu-cta:hover { transform: translateY(-1px); }

.tp-art .tp-corps p.tp-simu-note {
	margin: 14px 0 0 !important;
	font-size: 13px !important;
	line-height: 1.5 !important;
	color: var(--tp-gris) !important;
}

@media (max-width: 640px) {
	.tp-art .tp-corps .tp-simu { padding: 18px; }
	.tp-art .tp-corps p.tp-simu-res strong.tp-simu-zone { font-size: 22px !important; }
	.tp-art .tp-corps .tp-simu-tag { display: none; }  /* la pastille passe a la ligne, on la retire */
}