/* Composants réutilisables. */

/* ---------- Boutons ---------- */
.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.8rem 1.35rem;
	border: var(--border-width) solid transparent;
	border-radius: var(--radius-pill);
	font-family: var(--font-body);
	font-size: 0.97rem;
	font-weight: var(--fw-strong);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
	transition: transform var(--transition), background var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
}

.button:active {
	transform: translateY(1px);
}

.button--primary {
	background: var(--c-cta);
	color: var(--c-cta-text);
	box-shadow: var(--shadow-accent);
}

.button--primary:hover {
	background: var(--c-cta-hover);
	color: var(--c-cta-text);
}

.button--ghost {
	background: transparent;
	border-color: var(--c-border-strong);
	color: var(--c-text);
}

.button--ghost:hover {
	background: var(--c-surface);
	border-color: var(--c-accent);
	color: var(--c-text);
}

.button--quiet {
	background: var(--c-surface);
	border-color: var(--c-border);
	color: var(--c-text);
}

.button--quiet:hover {
	border-color: var(--c-border-strong);
	color: var(--c-text);
}

.button--small {
	padding: 0.5rem 0.95rem;
	font-size: 0.88rem;
}

.button--block {
	width: 100%;
}

.button .icon {
	width: 1.15em;
	height: 1.15em;
}

.actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
	align-items: center;
}

/* Lien fléché */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-weight: var(--fw-strong);
	text-decoration: none;
	font-size: 0.95rem;
}

.arrow-link .icon {
	width: 1.05em;
	height: 1.05em;
	transition: transform var(--transition);
}

.arrow-link:hover .icon {
	transform: translateX(3px);
}

/* ---------- Badges & puces ---------- */
.badge {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.3rem 0.7rem;
	border-radius: var(--radius-pill);
	background: var(--c-accent-soft);
	border: var(--border-width) solid color-mix(in srgb, var(--c-accent) 35%, transparent);
	color: var(--c-accent);
	font-size: 0.78rem;
	font-weight: var(--fw-strong);
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.badge--neutral {
	background: var(--c-surface-2);
	border-color: var(--c-border);
	color: var(--c-text-soft);
}

.badge--alt {
	background: var(--c-accent-2-soft);
	border-color: color-mix(in srgb, var(--c-accent-2) 35%, transparent);
	color: var(--c-accent-2);
}

.tag-list {
	display: flex;
	flex-wrap: wrap;
	/* Sans cela, les éléments d'une même ligne s'étirent à la hauteur du plus
	   grand : un badge se retrouvait plus haut que ses voisins, et son texte
	   décalé vers le bas. Chacun garde sa hauteur naturelle. */
	align-items: flex-start;
	gap: 0.45rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

/*
 * Le li devient un conteneur au lieu d'une boîte de ligne. Sans cela, le badge
 * en inline-flex est posé sur une ligne de base et l'élément réserve sous lui
 * la place des jambages : sept pixels de haut en plus, mais seulement pour
 * certains éléments selon leur contenu — d'où des badges décalés entre eux.
 */
.tag-list li {
	display: flex;
	margin: 0;
}

/*
 * Le pied de page espace les éléments de liste avec « .site-footer li + li »,
 * qui compte deux éléments et l'emporte donc sur « .tag-list li ». Sans cette
 * ligne, tous les badges sauf le premier héritaient d'une marge haute de 7 px
 * et se décalaient vers le bas. La même spécificité, déclarée plus tard, suffit.
 */
.tag-list li + li {
	margin-top: 0;
}

/* ---------- Cartes ---------- */
.card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	padding: var(--space-md);
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-sm);
	transition: border-color var(--transition), transform var(--transition), box-shadow var(--transition);
}

.card:hover {
	border-color: var(--c-border-strong);
	transform: translateY(-2px);
	box-shadow: var(--shadow-md);
}

.card__icon {
	display: grid;
	place-items: center;
	width: 2.6rem;
	height: 2.6rem;
	border-radius: var(--radius-sm);
	background: var(--c-accent-soft);
	color: var(--c-accent);
	margin-bottom: var(--space-3xs);
}

.card__title {
	font-size: var(--fs-h4);
	font-weight: var(--fw-strong);
	letter-spacing: -0.012em;
	margin: 0;
}

.card__title a {
	color: var(--c-text);
	text-decoration: none;
}

/* Toute la carte devient cliquable sans imbriquer de liens. */
.card__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.card:hover .card__title a {
	color: var(--c-accent);
}

.card__text {
	margin: 0;
	color: var(--c-text-soft);
	font-size: 0.95rem;
	max-width: none;
}

.card__meta {
	margin: auto 0 0;
	padding-top: var(--space-2xs);
	color: var(--c-text-muted);
	font-family: var(--font-mono);
	font-size: 0.8rem;
	letter-spacing: 0.01em;
}

.card--pole {
	gap: 0.75rem;
	padding: var(--space-lg);
}

.card--pole .card__icon {
	width: 3rem;
	height: 3rem;
}

.card--flat {
	background: transparent;
	box-shadow: none;
}

.card__list {
	list-style: none;
	margin: var(--space-2xs) 0 0;
	padding: 0;
	font-size: 0.92rem;
	color: var(--c-text-soft);
}

.card__list li {
	position: relative;
	padding-left: 1.1rem;
	margin-top: 0.3rem;
}

.card__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--c-accent);
}

/* ---------- Liste à coches ---------- */
.check-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.check-list li {
	position: relative;
	padding-left: 1.8em;
	margin-top: 0.6rem;
	color: var(--c-text-soft);
}

/* Pastille et coche sont dimensionnées en em, sans exception : la liste est
   réutilisée à des tailles de texte différentes (0.93rem dans les cartes de
   tarifs), et le moindre rem ici décale la coche hors de son disque. */
.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.18em;
	width: 1.2em;
	height: 1.2em;
	border-radius: 50%;
	background: var(--c-accent-soft);
	border: var(--border-width) solid color-mix(in srgb, var(--c-accent) 40%, transparent);
}

/* La coche est un angle droit (bord gauche + bord bas) pivoté de 45°.
   On l'ancre au centre du disque — 0.18em + 1.2em / 2 = 0.78em — puis on la
   recentre elle-même. Le décalage vertical n'est pas un réglage à l'œil : le
   barycentre de l'encre d'un angle droit tombe à 0.7071 × l × h / (l + h)
   sous le centre de la boîte une fois pivoté, soit 0.116em ici. Sans lui, la
   coche pend visiblement dans le bas du disque. */
.check-list li::after {
	content: "";
	position: absolute;
	left: 0.6em;
	top: 0.78em;
	width: 0.48em;
	height: 0.25em;
	border-left: 0.115em solid var(--c-accent);
	border-bottom: 0.115em solid var(--c-accent);
	transform: translate(-50%, calc(-50% - 0.116em)) rotate(-45deg);
}

/* ---------- Étapes numérotées ---------- */
.steps {
	counter-reset: step;
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-md);
}

.steps li {
	counter-increment: step;
	position: relative;
	padding-left: 3.25rem;
	margin: 0;
}

.steps li::before {
	content: counter(step, decimal-leading-zero);
	position: absolute;
	left: 0;
	top: 0;
	width: 2.35rem;
	height: 2.35rem;
	display: grid;
	place-items: center;
	border-radius: var(--radius-sm);
	background: var(--c-surface-2);
	border: var(--border-width) solid var(--c-border);
	color: var(--c-accent);
	font-family: var(--font-mono);
	font-size: 0.85rem;
	font-weight: var(--fw-strong);
}

.steps h3 {
	font-size: var(--fs-h4);
	font-weight: var(--fw-strong);
	margin-bottom: 0.2rem;
}

.steps p {
	margin: 0;
	color: var(--c-text-soft);
	font-size: 0.95rem;
}

/* ---------- Statistiques ---------- */
.stats {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
}

.stat {
	padding: var(--space-sm) 0;
	border-top: 2px solid var(--c-accent);
}

.stat__value {
	display: block;
	font-family: var(--font-display);
	font-size: clamp(1.7rem, 1.3rem + 1.6vw, 2.4rem);
	font-weight: var(--fw-display);
	letter-spacing: var(--tracking-display);
	line-height: 1.1;
	color: var(--c-text);
}

.stat__label {
	display: block;
	margin-top: 0.25rem;
	font-size: 0.9rem;
	color: var(--c-text-muted);
}

/* ---------- Fil d'Ariane ---------- */
.breadcrumb {
	padding-block: var(--space-sm) 0;
	font-size: 0.85rem;
}

.breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
	list-style: none;
	margin: 0;
	padding: 0;
	color: var(--c-text-muted);
}

.breadcrumb__list li {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.breadcrumb a {
	color: var(--c-text-muted);
	text-decoration: none;
}

.breadcrumb a:hover {
	color: var(--c-accent);
}

.breadcrumb__sep {
	opacity: 0.45;
}

/* ---------- Accordéon / FAQ ---------- */
.faq {
	display: grid;
	gap: var(--space-2xs);
	max-width: 52rem;
}

.faq__item {
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: border-color var(--transition);
}

.faq__item[open] {
	border-color: var(--c-border-strong);
}

.faq__question {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-sm);
	padding: var(--space-sm) var(--space-md);
	font-weight: var(--fw-strong);
	font-size: 1rem;
	color: var(--c-text);
	cursor: pointer;
	list-style: none;
}

.faq__question::-webkit-details-marker {
	display: none;
}

.faq__question::after {
	content: "";
	flex: none;
	width: 0.6rem;
	height: 0.6rem;
	border-right: 2px solid var(--c-accent);
	border-bottom: 2px solid var(--c-accent);
	transform: rotate(45deg) translateY(-25%);
	transition: transform var(--transition);
}

.faq__item[open] .faq__question::after {
	transform: rotate(-135deg) translateY(-25%);
}

.faq__answer {
	padding: 0 var(--space-md) var(--space-md);
	color: var(--c-text-soft);
}

.faq__answer p:last-child {
	margin-bottom: 0;
}

/* ---------- Tarifs ---------- */
.pricing {
	display: grid;
	gap: var(--space-md);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
	align-items: start;
}

.plan {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
	padding: var(--space-lg);
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-lg);
	height: 100%;
}

.plan--featured {
	border-color: var(--c-accent);
	box-shadow: var(--shadow-md);
	position: relative;
}

.plan__flag {
	position: absolute;
	top: -0.8rem;
	left: var(--space-lg);

	/* Le badge est à cheval sur la bordure de la carte. Le fond translucide
	   commun à tous les badges la laissait passer en travers du libellé : ici
	   la même teinte est aplatie sur la surface, elle masque le trait. La
	   bordure du badge est un cran plus marquée, il enjambe deux fonds. */
	background: color-mix(in srgb, var(--c-accent) 14%, var(--c-surface));
	border-color: color-mix(in srgb, var(--c-accent) 45%, transparent);
}

.plan__name {
	font-size: var(--fs-h3);
	margin: 0;
}

.plan__price {
	display: flex;
	align-items: baseline;
	gap: 0.35rem;
	font-family: var(--font-display);
	font-size: clamp(2rem, 1.5rem + 1.8vw, 2.7rem);
	font-weight: var(--fw-display);
	letter-spacing: var(--tracking-display);
	color: var(--c-text);
	line-height: 1;
	margin: 0.2rem 0 0;
}

.plan__period {
	font-family: var(--font-body);
	font-size: 0.95rem;
	font-weight: var(--fw-body);
	color: var(--c-text-muted);
	letter-spacing: 0;
}

.plan__pitch {
	color: var(--c-text-soft);
	font-size: 0.95rem;
	margin: 0;
	min-height: 3.2em;
}

.plan .check-list {
	margin-top: var(--space-2xs);
	flex: 1;
}

.plan .check-list li {
	font-size: 0.93rem;
}

.plan .button {
	margin-top: var(--space-sm);
}

.plan__note {
	font-size: 0.82rem;
	color: var(--c-text-muted);
	margin: 0;
}

/* Tableau comparatif */
.compare {
	width: 100%;
	overflow-x: auto;
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-md);
	background: var(--c-surface);
}

.compare table {
	margin: 0;
	min-width: 44rem;
}

.compare th,
.compare td {
	padding: 0.85rem var(--space-sm);
	font-size: 0.93rem;
}

.compare thead th {
	background: var(--c-surface-2);
	white-space: nowrap;
}

.compare tbody th {
	font-weight: var(--fw-medium);
	color: var(--c-text-soft);
}

.compare td {
	text-align: center;
	color: var(--c-text-soft);
}

.compare tr:last-child th,
.compare tr:last-child td {
	border-bottom: 0;
}

.compare .yes {
	color: var(--c-success);
	font-weight: var(--fw-strong);
}

.compare .no {
	color: var(--c-text-muted);
}

/* ---------- Formulaire ---------- */
.form {
	display: grid;
	gap: var(--space-sm);
}

.form__row {
	display: grid;
	gap: var(--space-sm);
}

@media (min-width: 40rem) {
	.form__row--2 {
		grid-template-columns: 1fr 1fr;
	}
}

.field {
	display: grid;
	gap: 0.35rem;
}

.field > label {
	font-size: 0.9rem;
	font-weight: var(--fw-strong);
	color: var(--c-text);
}

.field .required {
	color: var(--c-accent);
}

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="url"],
.field input[type="search"],
.field input[type="number"],
.field select,
.field textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	background: var(--c-bg);
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-sm);
	color: var(--c-text);
	font: inherit;
	font-size: 0.97rem;
	transition: border-color var(--transition), box-shadow var(--transition);
}

.field textarea {
	min-height: 9rem;
	resize: vertical;
}

.field input::placeholder,
.field textarea::placeholder {
	color: var(--c-text-muted);
}

.field input:focus,
.field select:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--c-accent);
	box-shadow: 0 0 0 3px var(--c-accent-soft);
}

.field__hint {
	font-size: 0.82rem;
	color: var(--c-text-muted);
	margin: 0;
}

.field--check {
	grid-template-columns: auto 1fr;
	align-items: start;
	gap: 0.6rem;
}

.field--check input {
	margin-top: 0.28rem;
	width: 1.05rem;
	height: 1.05rem;
	accent-color: var(--c-accent);
}

.field--check label {
	font-weight: var(--fw-body);
	font-size: 0.9rem;
	color: var(--c-text-soft);
}

/* Piège à robots : invisible pour l'humain, présent pour le script. */
.field--honey {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice {
	padding: var(--space-sm) var(--space-md);
	border-radius: var(--radius-md);
	border: var(--border-width) solid var(--c-border);
	background: var(--c-surface);
	font-size: 0.95rem;
}

.notice--success {
	border-color: color-mix(in srgb, var(--c-success) 50%, transparent);
	background: color-mix(in srgb, var(--c-success) 12%, var(--c-surface));
	color: var(--c-text);
}

.notice--error {
	border-color: color-mix(in srgb, var(--c-danger) 50%, transparent);
	background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface));
	color: var(--c-text);
}

/* ---------- Note de rédaction ----------
   Bandeau réservé aux personnes connectées pouvant éditer : il signale une page
   volontairement laissée hors ligne. Aucune couleur en dur, comme partout. */
.editor-note {
	border-block: var(--border-width) solid color-mix(in srgb, var(--c-danger) 55%, transparent);
	background: color-mix(in srgb, var(--c-danger) 12%, var(--c-surface));
	color: var(--c-text);
	padding-block: var(--space-sm);
	font-size: 0.95rem;
}

.editor-note p {
	margin: 0 0 0.35rem;
}

.editor-note p:last-child {
	margin-bottom: 0;
}

/* ---------- Pagination ---------- */
/*
 * the_posts_pagination() rend un <nav class="pagination"> qui enveloppe les
 * liens dans un « .nav-links ». C'est sur lui que le flex doit porter : posé
 * sur le <nav>, il n'alignait que le titre lecteur d'écran et ce bloc, et les
 * numéros — en display:grid, donc de niveau bloc — s'empilaient l'un sous
 * l'autre sur toute la hauteur.
 */
.pagination {
	margin-top: var(--space-xl);
}

.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem;
}

.pagination .page-numbers {
	display: grid;
	place-items: center;
	min-width: 2.4rem;
	height: 2.4rem;
	padding-inline: 0.5rem;
	border-radius: var(--radius-sm);
	border: var(--border-width) solid var(--c-border);
	background: var(--c-surface);
	color: var(--c-text-soft);
	text-decoration: none;
	font-size: 0.92rem;
	transition: background var(--transition), border-color var(--transition), color var(--transition);
}

/* « Précédent » et « Suivant » sont des libellés, pas des cases : de l'air à
   la place de la largeur minimale, sinon ils se lisent comme un numéro. */
.pagination .prev,
.pagination .next {
	min-width: 0;
	padding-inline: 0.9rem;
}

/* Les points de suspension ne mènent nulle part : pas de case autour. */
.pagination .dots {
	border-color: transparent;
	background: none;
}

/* Le survol ne concerne que ce qui est cliquable — ni la page courante, ni
   les points de suspension, qui sont des <span>. */
.pagination .page-numbers.current,
.pagination a.page-numbers:hover {
	background: var(--c-accent);
	border-color: var(--c-accent);
	color: var(--c-accent-text);
}

/*
 * Sous 34rem la rangée passe à la ligne — « Précédent » et « Suivant » écrits
 * en toutes lettres n'y tiennent pas. Centrée, la coupure se lit comme un
 * choix ; alignée à gauche, « Suivant » restait seul dans le vide.
 */
@media (max-width: 34rem) {
	.pagination .nav-links {
		justify-content: center;
	}
}

/* ---------- Encadré / callout ---------- */
.callout {
	display: flex;
	gap: var(--space-sm);
	padding: var(--space-md);
	background: var(--c-accent-soft);
	border: var(--border-width) solid color-mix(in srgb, var(--c-accent) 30%, transparent);
	border-radius: var(--radius-md);
}

.callout .icon {
	color: var(--c-accent);
	width: 1.6rem;
	height: 1.6rem;
}

.callout p:last-child {
	margin-bottom: 0;
}

.callout__title {
	font-weight: var(--fw-strong);
	color: var(--c-text);
	margin-bottom: 0.2rem;
}

/* ---------- Citation client ---------- */
.quote {
	padding: var(--space-lg);
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border);
	border-radius: var(--radius-lg);
}

.quote__text {
	font-size: var(--fs-lead);
	line-height: 1.5;
	color: var(--c-text);
	margin-bottom: var(--space-sm);
}

.quote__author {
	font-size: 0.9rem;
	color: var(--c-text-muted);
	margin: 0;
}

/* ---------- Appel à l'action ---------- */
.cta {
	/* Même bande que .section--alt : la palette locale est réécrite dans layout.css. */
	background: var(--c-alt-bg);
	border-top: var(--border-width) solid var(--c-border);
	padding-block: var(--space-xl);
}

.cta--base {
	background: var(--c-bg);
	color: var(--c-text);
}

.cta--highlight {
	--c-bg: var(--c-contact-bg);
	--c-text: var(--c-contact-text);
	--c-text-soft: var(--c-contact-text-soft);
	--c-text-muted: var(--c-contact-text-soft);
	--c-surface: color-mix(in srgb, var(--c-contact-bg) 80%, white);
	--c-border: color-mix(in srgb, var(--c-contact-text) 20%, transparent);
	--c-border-strong: color-mix(in srgb, var(--c-contact-text) 45%, transparent);
	--c-accent: var(--c-contact-text);
	--c-cta: var(--c-contact-text);
	--c-cta-hover: var(--c-contact-button-hover);
	--c-cta-text: var(--c-contact-button-text);
	background: var(--c-contact-bg);
	color: var(--c-text);
}

.cta__inner {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-md);
	align-items: center;
	justify-content: space-between;
}

.cta__title {
	font-size: var(--fs-h2);
	margin-bottom: 0.4rem;
}

.cta__text {
	color: var(--c-text-soft);
	margin: 0;
	max-width: 46ch;
}

.cta__actions {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-2xs);
}

@media print {
	.site-header,
	.cta {
		display: none;
	}
}

/* ---------- Sélecteur de palette ---------- */
/*
 * Outil d'auteur, jamais affiché aux visiteurs (voir inc/palettes.php). Il se
 * peint avec les jetons de la palette courante : il se recolore donc en même
 * temps que la page, ce qui donne une lecture honnête du résultat.
 */
.palette-switcher {
	position: fixed;
	right: max(1rem, env(safe-area-inset-right));
	bottom: max(1rem, env(safe-area-inset-bottom));
	z-index: 200;
	width: 15rem;
	padding: var(--space-xs);
	background: var(--c-surface);
	border: var(--border-width) solid var(--c-border-strong);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-lg);
	font-size: 0.85rem;
}

.palette-switcher__title {
	margin: 0 0 0.4rem;
	font-family: var(--font-mono);
	font-size: 0.68rem;
	font-weight: var(--fw-strong);
	letter-spacing: var(--tracking-eyebrow);
	text-transform: uppercase;
	color: var(--c-text-muted);
}

.palette-switcher__list {
	list-style: none;
	margin: 0 0 0.4rem;
	padding: 0;
	display: grid;
	gap: 0.1rem;
}

.palette-switcher__list li {
	margin: 0;
}

.palette-switcher__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.35rem 0.4rem;
	border-radius: var(--radius-xs);
	color: var(--c-text-soft);
	text-decoration: none;
	font-size: 0.82rem;
	transition: background var(--transition), color var(--transition);
}

.palette-switcher__item:hover {
	background: var(--c-surface-2);
	color: var(--c-text);
}

.palette-switcher__item.is-current {
	background: var(--c-accent-soft);
	color: var(--c-text);
	font-weight: var(--fw-strong);
}

.palette-switcher__item small {
	margin-left: auto;
	color: var(--c-text-muted);
	font-size: 0.68rem;
	font-weight: var(--fw-body);
}

.palette-switcher__swatch {
	flex: none;
	width: 1.5rem;
	height: 0.85rem;
	border-radius: 3px;
	border: 1px solid var(--c-border-strong);
}

.palette-switcher__note {
	margin: 0;
	font-size: 0.7rem;
	line-height: 1.35;
	color: var(--c-text-muted);
}

@media print {
	.palette-switcher {
		display: none;
	}
}

/* ---------- Schémas ----------
   Rendus par le code court [kiaros_figure] (voir inc/figures.php). Les dessins
   n'embarquent aucune couleur : tout passe par les jetons de la charte, donc un
   schéma posé dans une bande alternée se réencre tout seul.

   Les libellés sont dimensionnés en unités du viewBox. En dessous d'une
   certaine largeur ils deviendraient illisibles : le cadre défile plutôt que
   de laisser le dessin rétrécir jusqu'à l'inutile. */
.figure {
	margin: var(--space-lg) 0;
}

.figure__canvas {
	overflow-x: auto;
	overscroll-behavior-x: contain;
}

.figure__canvas svg {
	display: block;
	width: 100%;
	min-width: 33rem;
	height: auto;
	font-family: inherit;
	font-size: 15px;
	fill: var(--c-text-soft);
}

.figure__caption {
	margin-top: var(--space-sm);
	font-size: 0.9rem;
	color: var(--c-text-muted);
}

.figure--large .figure__canvas svg {
	min-width: 40rem;
}

/* Traits communs : aucun remplissage par défaut, c'est un dessin au trait. */
.figure__canvas line,
.figure__canvas polyline,
.figure__canvas path,
.figure__canvas circle,
.figure__canvas rect,
.figure__canvas polygon {
	fill: none;
	stroke: none;
	vector-effect: non-scaling-stroke;
}

.expertise-bridge { --bridge-accent: color-mix(in srgb, var(--c-cta) 70%, white); }

.entry-content .expertise-bridge {
	margin-block: var(--space-lg);
}

.entry-content .expertise-bridge__title {
	margin: 0;
	font-size: clamp(1.2rem, 2.4vw, 1.65rem);
}

.expertise-bridge__intro {
	margin: 0.5rem 0 1.5rem;
	color: var(--c-text-muted);
}

.expertise-bridge__diagram { position: relative; }
.expertise-bridge__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem;
}

.expertise-bridge__card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: clamp(1rem, 2vw, 1.5rem);
	background: var(--c-surface);
	border: 1px solid var(--c-border);
	border-radius: var(--radius-lg);
}

.expertise-bridge__card::before,
.expertise-bridge__junction::before {
	content: "";
	position: absolute;
	background: var(--bridge-accent);
}

.expertise-bridge__card::before {
	width: 2px;
	height: 51px;
	left: calc(50% - 1px);
	top: 100%;
}

.expertise-bridge__card::after {
	content: "";
	position: absolute;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--bridge-accent);
	left: calc(50% - 4px);
	bottom: -4px;
}

.expertise-bridge__label {
	margin: 0 0 0.65rem;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c-accent);
}

.expertise-bridge__card h4 { margin: 0; font-size: 1.12rem; }
.expertise-bridge__card ul {
	display: grid;
	gap: 0.85rem;
	list-style: none;
	padding: 0;
	margin: 1.3rem 0 1.5rem;
}

.expertise-bridge__card li {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.expertise-bridge__card .icon {
	flex: none;
	width: 1.2rem;
	height: 1.2rem;
	padding: 0.15rem;
	margin-top: 0.1rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--c-cta) 14%, transparent);
	color: var(--c-accent);
	stroke-width: 2.5;
}

.expertise-bridge__note {
	margin: auto 0 0;
	font-size: 0.8rem;
	color: var(--c-text-muted);
}

.expertise-bridge__junction {
	position: relative;
	display: flex;
	justify-content: center;
	padding-top: 14px;
}

.expertise-bridge__junction::before {
	top: 50px;
	left: calc(25% - 0.3125rem);
	right: calc(25% - 0.3125rem);
	height: 2px;
}

.expertise-bridge__badge {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	min-height: 72px;
	padding: 0.65rem 2rem;
	border-radius: 999px;
	background: var(--bridge-accent);
	color: var(--c-cta-text);
	text-align: center;
}

.expertise-bridge__badge strong { font-size: 1.2rem; color: inherit; }
.expertise-bridge__badge span { font-size: 0.9rem; }
.expertise-bridge > figcaption { text-align: center; }

@media (max-width: 40rem) {
	.expertise-bridge__cards { grid-template-columns: minmax(0, 1fr); padding-left: 24px; }
	.expertise-bridge__diagram::before {
		content: "";
		position: absolute;
		left: 3px;
		top: 30px;
		bottom: 35px;
		width: 2px;
		background: var(--bridge-accent);
	}
	.expertise-bridge__card::before { top: 30px; left: -21px; width: 21px; height: 2px; }
	.expertise-bridge__card::after { top: 27px; left: -4px; bottom: auto; }
	.expertise-bridge__junction { justify-content: flex-end; padding-top: 20px; padding-left: 24px; }
	.expertise-bridge__junction::before { top: auto; bottom: 35px; left: 3px; right: 24px; }
	.expertise-bridge__badge { width: 100%; padding-inline: 0.75rem; }
}

/* --- Graphique de prévision --- */
.figure__canvas .forecast-chart .fc-card {
	fill: var(--c-surface);
	stroke: var(--c-border-strong);
	stroke-width: 1;
}

.forecast-chart .fc-title { font-size: 24px; font-weight: 700; fill: var(--c-text); }
.forecast-chart .fc-subtitle { font-size: 16px; fill: var(--c-text-muted); }
.forecast-chart .fc-period { font-size: 13px; font-weight: 700; letter-spacing: 1.5px; fill: var(--c-text-muted); }
.forecast-chart .fc-accent-text { fill: var(--c-cta); }
.forecast-chart .fc-unit,
.forecast-chart .fc-note { font-size: 13px; fill: var(--c-text-muted); }
.forecast-chart .fc-axis { font-size: 14px; fill: var(--c-text-muted); font-variant-numeric: tabular-nums; }
.forecast-chart .fc-legend { font-size: 15px; fill: var(--c-text-soft); }

.figure__canvas .forecast-chart .fc-future-zone { fill: color-mix(in srgb, var(--c-cta) 4%, transparent); }
.figure__canvas .forecast-chart .fc-grid { stroke: var(--c-border); stroke-width: 1; }
.figure__canvas .forecast-chart .fc-band { fill: color-mix(in srgb, var(--c-cta) 23%, transparent); }
.figure__canvas .forecast-chart .fc-band-edge { stroke: color-mix(in srgb, var(--c-cta) 45%, transparent); stroke-width: 1; }
.figure__canvas .forecast-chart .fc-divider { stroke: var(--c-text-muted); stroke-width: 1; stroke-dasharray: 3 5; opacity: 0.6; }
.figure__canvas .forecast-chart .fc-observed,
.figure__canvas .forecast-chart .fc-forecast {
	stroke: var(--c-text-soft);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
}
.figure__canvas .forecast-chart .fc-forecast { stroke: var(--c-cta); stroke-dasharray: 6 5; }
.figure__canvas .forecast-chart .fc-dot { fill: var(--c-surface); stroke: var(--c-text-soft); stroke-width: 2; }
.figure__canvas .forecast-chart .fc-dot--forecast { fill: var(--c-cta); stroke: var(--c-surface); stroke-width: 1.5; }
.figure__canvas .forecast-chart .fc-key { stroke: color-mix(in srgb, var(--c-cta) 45%, transparent); stroke-width: 1; }

.fig-grid line {
	stroke: var(--c-border);
	stroke-width: 1;
}

.fig-axis-label text,
.fig-legend text {
	font-size: 13px;
	fill: var(--c-text-muted);
}

.fig-band {
	fill: color-mix(in srgb, var(--c-cta) 18%, transparent);
	stroke: none;
}

.fig-line-real {
	stroke: var(--c-text);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.fig-line-forecast {
	stroke: var(--c-cta);
	stroke-width: 2.5;
	stroke-dasharray: 7 5;
	stroke-linecap: round;
}

.fig-dots circle {
	fill: var(--c-text);
}

.fig-divider {
	stroke: var(--c-border-strong);
	stroke-width: 1;
	stroke-dasharray: 3 4;
}

.fig-divider-label {
	font-size: 12px;
	fill: var(--c-text-muted);
	letter-spacing: 0.04em;
}

.fig-legend .fig-band {
	fill: color-mix(in srgb, var(--c-cta) 18%, transparent);
}

/* --- Marché coupé en deux --- */
.fig-set {
	fill: var(--c-surface);
}

.fig-overlap {
	fill: var(--c-cta);
	opacity: 0.22;
}

.fig-set-outline {
	stroke: var(--c-border-strong);
	stroke-width: 1.5;
}

.fig-label text {
	font-size: 15px;
	fill: var(--c-text-soft);
}

.fig-eyebrow {
	font-size: 12px !important;
	font-weight: var(--fw-strong);
	letter-spacing: 0.12em;
	fill: var(--c-text-muted) !important;
}

.fig-muted {
	font-size: 13px !important;
	fill: var(--c-text-muted) !important;
}

.fig-center-name {
	font-size: 24px;
	font-weight: var(--fw-strong);
	fill: var(--c-text);
}

.fig-center-sub {
	font-size: 14px;
	fill: var(--c-text-soft);
}

.fig-caption-in text {
	font-size: 14px;
	fill: var(--c-text-muted);
}

/* --- Arbre de décision --- */
.fig-node rect {
	fill: var(--c-surface);
	stroke: var(--c-border);
	stroke-width: 1.5;
}

.fig-node text {
	font-size: 15px;
	fill: var(--c-text-soft);
}

.fig-node--root rect {
	fill: var(--c-accent-soft);
	stroke: var(--c-accent);
}

.fig-node--root text {
	font-weight: var(--fw-strong);
	fill: var(--c-text);
}

.fig-node--answer rect {
	fill: color-mix(in srgb, var(--c-cta) 13%, transparent);
	stroke: color-mix(in srgb, var(--c-cta) 45%, transparent);
}

.fig-node--answer text {
	font-weight: var(--fw-strong);
	fill: var(--c-text);
}

.fig-link path {
	stroke: var(--c-border-strong);
	stroke-width: 1.5;
	stroke-linecap: round;
}

.fig-link--arrow path {
	stroke: var(--c-cta);
	stroke-width: 2;
}

.fig-tag text {
	font-size: 12.5px;
	fill: var(--c-text-muted);
	letter-spacing: 0.02em;
}

/* ---------- Portrait ----------
   Rendu par [kiaros_portrait]. Dans un encadré, il prend une colonne fixe à
   gauche ; seul, il reste dans le flux du texte. La photo est détourée : pas
   de cadre ni de fond, elle se pose directement sur la couleur de la bande. */
.portrait {
	margin: 0;
	flex: none;
}

.portrait__img {
	display: block;
	width: 100%;
	height: auto;

	/* Le portrait est détouré : sans fond, il laisse voir la surface de
	   l'encadré au travers. Le bleu encre de la bande alternée le pose
	   proprement — et comme c'est un jeton, il suit la bascule de palette
	   au lieu d'être cuit dans le PNG. */
	background: var(--c-alt-bg);
}

.portrait__caption {
	margin-top: 0.4rem;
	font-size: 0.78rem;
	color: var(--c-text-muted);
	text-align: center;
}

.callout--portrait {
	align-items: center;
	gap: var(--space-md);
}

.callout--portrait .portrait {
	width: 10.5rem;
}

/* En dessous de 34rem, une colonne de 10 rem laisse trois mots par ligne au
   texte : le portrait repasse au-dessus, centré. */
@media (max-width: 34rem) {
	.callout--portrait {
		flex-direction: column;
		align-items: stretch;
	}

	.callout--portrait .portrait {
		width: 8.5rem;
		margin-inline: auto;
	}
}

/* ---------- Jauge des calculateurs ----------
   Le résultat sort en euros ; la jauge le rapporte à une référence que le
   visiteur connaît. Elle n'apparaît que si la formule fournit un ratio :
   main.js la laisse masquée sinon. */
.tool-gauge {
	display: grid;
	gap: 0.4rem;
	margin-top: var(--space-sm);
}

.tool-gauge__track {
	display: block;
	height: 0.5rem;
	border-radius: var(--radius-pill);
	background: color-mix(in srgb, var(--c-text) 12%, transparent);
	overflow: hidden;
}

.tool-gauge__fill {
	display: block;
	width: var(--calc-fill, 0%);
	height: 100%;
	border-radius: inherit;
	background: var(--c-cta);
}

/* Saturée, la jauge change de matière : un plafond atteint ne doit pas se lire
   comme un remplissage arrivé pile au bord. */
.tool-gauge__fill.is-full {
	background: repeating-linear-gradient(
		115deg,
		var(--c-cta) 0 10px,
		color-mix(in srgb, var(--c-cta) 62%, transparent) 10px 20px
	);
}

.tool-gauge__label {
	font-size: 0.82rem;
	color: var(--c-text-muted);
}

@media (prefers-reduced-motion: no-preference) {
	.tool-gauge__fill {
		transition: width 0.5s var(--ease-out, ease-out);
	}
}