/*
Theme Name: Thierno Baldé
Theme URI: https://thiernobalde.com
Author: Thierno Mamadou Baldé
Author URI: https://thiernobalde.com
Description: Thème bloc sur mesure pour le site de Thierno Baldé, consultant SEO et SEA. Léger, accessible, sans dépendance externe.
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.1
Version: 0.4.0
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: thiernobalde
Tags: blog, portfolio, one-column, block-patterns, full-site-editing, accessibility-ready
*/

/* -------------------------------------------------------------------------
   1. Jetons de couleur. Piste A, version épurée.
   Le mode sombre suit la préférence système et reste surchargeable
   par l'attribut data-theme posé par assets/js/tb.js.
   ---------------------------------------------------------------------- */

:root {
	color-scheme: light;

	/* Mode clair : un fond légèrement teinté plutôt que du blanc pur.
	   Les cartes blanches se détachent alors sans bordure appuyée. */
	--tb-bg: #f5f7fb;
	--tb-bg-elev: #eceff7;
	--tb-surface: #ffffff;
	--tb-line: rgba(2, 34, 83, 0.1);
	--tb-text: #0a1322;
	--tb-text-muted: #46556e;
	--tb-accent: #0a6494;
	--tb-accent-fill: #022253;
	--tb-on-accent: #ffffff;
	--tb-halo:
		radial-gradient(760px 380px at 82% -12%, rgba(0, 152, 216, 0.14), transparent 68%),
		radial-gradient(620px 320px at 8% -4%, rgba(23, 105, 224, 0.09), transparent 70%);

	--tb-rayon-carte: 18px;
	--tb-rayon-champ: 10px;
	--tb-ombre-carte: 0 1px 2px rgba(3, 10, 24, 0.05), 0 12px 28px -22px rgba(3, 10, 24, 0.45);
	--tb-transition: 220ms cubic-bezier(0.2, 0.6, 0.2, 1);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;

		--tb-bg: #080d18;
		--tb-bg-elev: #0e1526;
		--tb-surface: #111a2e;
		--tb-line: rgba(231, 236, 245, 0.12);
		--tb-text: #e7ecf5;
		--tb-text-muted: #9cafcd;
		--tb-accent: #38bdf8;
		--tb-accent-fill: #38bdf8;
		--tb-on-accent: #04111f;
		--tb-halo:
			radial-gradient(900px 440px at 80% -14%, rgba(23, 105, 224, 0.26), transparent 68%),
			radial-gradient(700px 360px at 6% -6%, rgba(0, 152, 216, 0.14), transparent 72%);
		--tb-ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.4);
	}
}

/* Le sélecteur manuel reprend exactement les mêmes valeurs. */
:root[data-theme="dark"] {
	color-scheme: dark;

	--tb-bg: #080d18;
	--tb-bg-elev: #0e1526;
	--tb-surface: #111a2e;
	--tb-line: rgba(231, 236, 245, 0.12);
	--tb-text: #e7ecf5;
	--tb-text-muted: #9cafcd;
	--tb-accent: #38bdf8;
	--tb-accent-fill: #38bdf8;
	--tb-on-accent: #04111f;
	--tb-halo:
		radial-gradient(900px 440px at 80% -14%, rgba(23, 105, 224, 0.26), transparent 68%),
		radial-gradient(700px 360px at 6% -6%, rgba(0, 152, 216, 0.14), transparent 72%);
	--tb-ombre-carte: 0 1px 2px rgba(0, 0, 0, 0.4);
}

/* -------------------------------------------------------------------------
   2. Base
   ---------------------------------------------------------------------- */

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	/* La coupe horizontale vit sur html : posée sur body, elle casse
	   le position: sticky de l'en-tête. */
	overflow-x: clip;
}

body {
	background-color: var(--tb-bg);
	text-rendering: optimizeLegibility;
}

:where(img, svg, video) {
	max-width: 100%;
	height: auto;
}

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 3px solid var(--tb-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* Repris ici pour ne pas dépendre d'une feuille du cœur qui pourrait
   cesser d'être chargée au fil des optimisations. */
.screen-reader-text:not(:focus) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.tb-lien-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	padding: 0.85rem 1.25rem;
	background: var(--tb-accent-fill);
	color: var(--tb-on-accent);
	border-radius: 0 0 var(--tb-rayon-champ) 0;
	text-decoration: none;
	font-weight: 600;
}

.tb-lien-evitement:focus {
	left: 0;
}

/* -------------------------------------------------------------------------
   3. Habillage de section
   ---------------------------------------------------------------------- */

.tb-halo {
	background-image: var(--tb-halo);
	background-repeat: no-repeat;
}

.tb-carte {
	background: var(--tb-surface);
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-rayon-carte);
	box-shadow: var(--tb-ombre-carte);
	transition: transform var(--tb-transition), border-color var(--tb-transition);
}

a.tb-carte,
.tb-carte:has(a:hover) {
	text-decoration: none;
}

@media (hover: hover) {
	.tb-carte:hover {
		transform: translateY(-2px);
		border-color: color-mix(in srgb, var(--tb-accent) 45%, var(--tb-line));
	}
}

.tb-etiquette {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.78rem;
	letter-spacing: 0.01em;
	color: var(--tb-text-muted);
}

.tb-etiquette::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--tb-accent);
	flex: none;
}

.tb-chiffre {
	font-size: clamp(2.25rem, 5vw, 3.25rem);
	font-weight: 600;
	letter-spacing: -0.04em;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

.tb-mono {
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.85rem;
	color: var(--tb-text-muted);
}

/* Portrait de la page À propos. Les dimensions sont dans le HTML : la place
   est réservée avant le chargement, donc rien ne saute. */
/* La mise en page contrainte de WordPress centre tout enfant direct avec
   « margin-inline: auto !important ». Le !important ci-dessous n'est pas une
   facilité : c'est le seul moyen de reprendre la main sans ajouter la classe
   alignleft, qui ferait flotter le portrait et chevaucher les intertitres. */
.tb-portrait {
	margin: 0 auto 1.75rem 0;
	margin-left: 0 !important;
	width: min(300px, 60vw);
}

.tb-portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--tb-rayon-carte);
	border: 1px solid var(--tb-line);
	box-shadow: var(--tb-ombre-carte);
}

/* Pas de flottant : un portrait flottant finit toujours par chevaucher un
   intertitre plus bas dans la page. Il reste un bloc, aligné sur le texte. */

/* -------------------------------------------------------------------------
   Tableaux de données
   ------------------------------------------------------------------------- */

.wp-block-table table {
	border-collapse: collapse;
	width: 100%;
}

.wp-block-table :where(th, td) {
	border: 1px solid var(--tb-line);
	padding: 0.55rem 0.75rem;
	text-align: left;
}

.wp-block-table th {
	font-weight: 600;
	background: var(--tb-surface);
}

/* Des chiffres qui se comparent de haut en bas doivent s'aligner. */
.wp-block-table td {
	font-variant-numeric: tabular-nums;
}

/* Sur téléphone, un tableau de cinq colonnes ne tient pas à taille normale.
   On resserre plutôt que de laisser le lecteur découvrir qu'il faut faire
   défiler sur le côté, ce que personne ne devine. */
@media (max-width: 600px) {
	.wp-block-table :where(th, td) {
		padding: 0.38rem 0.3rem;
		font-size: 0.73rem;
	}
}

/* Bouton secondaire, posé sur le bouton de bloc natif. */
.wp-block-button.is-style-tb-secondaire .wp-block-button__link {
	background: transparent;
	color: var(--tb-text);
	border: 1px solid var(--tb-line);
}

.wp-block-button.is-style-tb-secondaire .wp-block-button__link:hover {
	border-color: var(--tb-accent);
	color: var(--tb-accent);
	background: transparent;
}

/* Cible tactile minimale, exigence WCAG 2.5.8. */
.wp-block-button__link,
.wp-block-navigation a {
	min-height: 44px;
	display: inline-flex;
	align-items: center;
}

/* Un titre de carte reste un titre : le lien ne se souligne qu'au survol. */
.tb-carte :where(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

.tb-carte :where(h2, h3, h4) a:hover,
.tb-carte :where(h2, h3, h4) a:focus-visible {
	color: var(--tb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Grille bento, sans media query : les cartes se replacent toutes seules. */
.tb-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
	gap: 1rem;
}

.tb-grille > * {
	margin: 0;
	min-width: 0;
}

.tb-grille-large > :first-child {
	grid-column: span 2;
}

@media (max-width: 600px) {
	.tb-grille-large > :first-child {
		grid-column: auto;
	}
}

/* -------------------------------------------------------------------------
   4. En-tête et navigation
   ---------------------------------------------------------------------- */

/* Le conteneur de la partie de gabarit fait exactement la hauteur de
   l'en-tête : il emprisonnerait le position: sticky. On le retire du flux. */
.wp-block-template-part:has(> .tb-entete) {
	display: contents;
}

/* En-tête flottant : une barre posée sur la page plutôt qu'un bandeau collé
   en haut. Elle gagne son fond et son ombre une fois le défilement amorcé. */
.tb-entete {
	position: sticky;
	top: 0.75rem;
	z-index: 20;
	margin-inline: auto;
	max-width: min(1260px, calc(100% - 1.5rem));
	padding-inline: clamp(0.75rem, 2vw, 1.5rem);
	border: 1px solid transparent;
	border-radius: 999px;
	background: transparent;
	transition: background-color var(--tb-transition), border-color var(--tb-transition),
		box-shadow var(--tb-transition), backdrop-filter var(--tb-transition);
}

.tb-entete.est-posee {
	background: color-mix(in srgb, var(--tb-bg) 82%, transparent);
	border-color: var(--tb-line);
	box-shadow: 0 10px 30px -24px rgba(3, 10, 24, 0.6);
	backdrop-filter: saturate(150%) blur(12px);
}

@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.tb-entete {
			animation: tb-poser linear both;
			animation-timeline: scroll(root);
			animation-range: 0 120px;
		}
	}
}

@keyframes tb-poser {
	from {
		background-color: transparent;
		border-color: transparent;
		box-shadow: 0 0 0 rgba(3, 10, 24, 0);
		color: var(--tb-entete-encre-haut);
	}
	to {
		background-color: color-mix(in srgb, var(--tb-bg) 82%, transparent);
		border-color: var(--tb-line);
		box-shadow: 0 10px 30px -24px rgba(3, 10, 24, 0.6);
		backdrop-filter: saturate(150%) blur(12px);
		color: var(--tb-text);
	}
}

@media (max-width: 600px) {
	.tb-entete {
		border-radius: 20px;
	}
}

.tb-marque {
	display: inline-flex;
	align-items: center;
	gap: 0.65rem;
	text-decoration: none;
	color: var(--tb-text);
	font-weight: 600;
	letter-spacing: -0.02em;
}

.tb-marque svg {
	width: 32px;
	height: 32px;
	flex: none;
}

/* Menu maison : le bloc de navigation du cœur coûtait 24 Ko de CSS et 6 Ko
   de JavaScript pour quatre liens. Ici, moins d'un Ko. */
/* Pas de position: relative ici : sur mobile, le panneau se cale sur
   l'en-tête, pas sur le bouton, sinon il sort de l'écran par la gauche. */

.tb-nav-liste {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
}

.tb-nav-liste a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	color: var(--tb-text-muted);
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 calc(100% - 12px);
	background-size: 0 1px;
	transition: background-size var(--tb-transition), color var(--tb-transition);
}

.tb-nav-liste a:hover,
.tb-nav-liste a[aria-current="page"] {
	color: var(--tb-text);
	background-size: 100% 1px;
}

.tb-nav-bouton {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-rayon-champ);
	background: transparent;
	color: var(--tb-text);
	cursor: pointer;
}

.tb-nav-barres,
.tb-nav-barres::before,
.tb-nav-barres::after {
	display: block;
	width: 18px;
	height: 1.5px;
	background: currentColor;
	transition: transform var(--tb-transition), opacity var(--tb-transition);
}

.tb-nav-barres::before,
.tb-nav-barres::after {
	content: "";
	position: relative;
}

.tb-nav-barres::before {
	top: -6px;
}

.tb-nav-barres::after {
	top: 4.5px;
}

.tb-nav-bouton[aria-expanded="true"] .tb-nav-barres {
	background: transparent;
}

.tb-nav-bouton[aria-expanded="true"] .tb-nav-barres::before {
	transform: translateY(6px) rotate(45deg);
}

.tb-nav-bouton[aria-expanded="true"] .tb-nav-barres::after {
	transform: translateY(-4.5px) rotate(-45deg);
}

@media (max-width: 782px) {
	.tb-nav-bouton {
		display: inline-flex;
	}

	.tb-nav-liste {
		position: absolute;
		top: calc(100% + 0.5rem);
		left: 0.5rem;
		right: 0.5rem;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 0.5rem;
		border: 1px solid var(--tb-line);
		border-radius: 18px;
		background: var(--tb-surface);
		box-shadow: 0 24px 48px -32px rgba(3, 10, 24, 0.7);
		display: none;
		opacity: 0;
		transform: translateY(-6px);
		transition: opacity var(--tb-transition), transform var(--tb-transition);
	}

	.tb-nav.est-ouvert .tb-nav-liste {
		display: flex;
		opacity: 1;
		transform: none;
	}

	.tb-nav-liste a {
		padding: 0 0.75rem;
		font-size: 1rem;
	}
}

.tb-bascule-theme {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-rayon-champ);
	background: transparent;
	color: var(--tb-text);
	cursor: pointer;
}

.tb-bascule-theme:hover {
	border-color: var(--tb-accent);
	color: var(--tb-accent);
}

.tb-bascule-theme svg {
	width: 18px;
	height: 18px;
}

/* -------------------------------------------------------------------------
   5. Apparitions au défilement. CSS seul, aucune dépendance.
   ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
	.tb-js .tb-apparition {
		opacity: 0;
		transform: translateY(14px);
		transition: opacity 600ms var(--tb-transition), transform 600ms var(--tb-transition);
	}

	.tb-apparition.est-visible {
		opacity: 1;
		transform: none;
	}
}

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) and (min-width: 783px) {
		.tb-apparition,
		.tb-js .tb-apparition {
			animation: tb-monter linear both;
			animation-timeline: view();
			/* La plage démarre dès l'entrée : rien de ce qui est déjà
			   à l'écran au chargement ne peut rester invisible. */
			animation-range: entry 0% entry 70%;
			opacity: 1;
			transform: none;
			transition: none;
		}
	}
}

/* Sur téléphone, pas d'animation liée au défilement : c'est l'observateur du
   script qui révèle, avec un geste plus court. Le premier écran n'attend rien,
   l'observateur le déclenche dès le chargement. */
@media (max-width: 782px) {
	.tb-apparition {
		animation: none;
	}

	.tb-js .tb-apparition {
		transform: translateY(10px);
		transition: opacity 420ms var(--tb-transition), transform 420ms var(--tb-transition);
	}

	.tb-js .tb-apparition.est-visible {
		opacity: 1;
		transform: none;
	}
}

@keyframes tb-monter {
	from {
		opacity: 0;
		transform: translateY(14px);
	}
	to {
		opacity: 1;
		transform: none;
	}
}

/* Entrée en cascade du premier écran, au chargement seulement.
   L'animation ne touche jamais l'opacité : un élément à opacity 0 n'est pas
   considéré comme peint par le navigateur, ce qui retarderait le LCP du titre.
   Glissement et netteté suffisent à l'effet, et sur téléphone on ne joue rien. */
@media (prefers-reduced-motion: no-preference) and (min-width: 783px) {
	.tb-entree > * {
		animation: tb-entree 700ms cubic-bezier(0.22, 0.7, 0.2, 1) both;
	}

	.tb-entree > :nth-child(1) { animation-delay: 40ms; }
	.tb-entree > :nth-child(2) { animation-delay: 110ms; }
	.tb-entree > :nth-child(3) { animation-delay: 180ms; }
	.tb-entree > :nth-child(4) { animation-delay: 250ms; }
	.tb-entree > :nth-child(5) { animation-delay: 320ms; }
	.tb-entree > :nth-child(6) { animation-delay: 390ms; }
}

@keyframes tb-entree {
	from {
		transform: translateY(16px);
		filter: blur(6px);
	}
	to {
		transform: none;
		filter: none;
	}
}

/* Micro-interactions. Toutes sur transform et opacity, donc sans recalcul
   de mise en page. */
.wp-block-button__link {
	transition: transform var(--tb-transition), box-shadow var(--tb-transition),
		background-color var(--tb-transition);
}

@media (hover: hover) {
	.wp-block-button__link:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--tb-accent-fill) 70%, transparent);
	}
}

.wp-block-navigation a {
	background-image: linear-gradient(currentColor, currentColor);
	background-repeat: no-repeat;
	background-position: 0 100%;
	background-size: 0 1px;
	transition: background-size var(--tb-transition), color var(--tb-transition);
}

.wp-block-navigation a:hover {
	background-size: 100% 1px;
	color: var(--tb-text);
}

.wp-block-navigation .wp-block-button__link:hover {
	background-size: 0 1px;
}

/* Le point cyan de l'étiquette respire, très lentement. */
@media (prefers-reduced-motion: no-preference) {
	.tb-etiquette::before {
		animation: tb-pulse 3.2s ease-in-out infinite;
	}
}

@keyframes tb-pulse {
	0%, 100% {
		box-shadow: 0 0 0 0 color-mix(in srgb, var(--tb-accent) 55%, transparent);
	}
	50% {
		box-shadow: 0 0 0 5px color-mix(in srgb, var(--tb-accent) 0%, transparent);
	}
}

/* -------------------------------------------------------------------------
   6. Contenu éditorial
   ---------------------------------------------------------------------- */

.tb-fil-ariane ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 0.6rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-size: 0.85rem;
	color: var(--tb-text-muted);
}

.tb-fil-ariane li + li::before {
	content: "/";
	margin-right: 0.6rem;
	color: var(--tb-line);
}

.tb-fil-ariane a {
	color: var(--tb-text-muted);
	text-decoration: none;
}

.tb-fil-ariane a:hover {
	color: var(--tb-accent);
	text-decoration: underline;
}

.tb-sommaire {
	border-left: 2px solid var(--tb-accent);
	padding: 0.25rem 0 0.25rem 1.25rem;
}

.tb-sommaire ol {
	margin: 0;
	padding-left: 1.1rem;
}

.tb-meta-article {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.25rem;
	align-items: center;
	color: var(--tb-text-muted);
	font-size: 0.9rem;
}

.entry-content {
	margin-block-start: 2.5rem;
}

.entry-content > * + * {
	margin-block-start: 1.4em;
}

/* Le titre de la page fournit déjà la respiration au-dessus. */
.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content :where(h2, h3) {
	margin-block-start: 2.2em;
	scroll-margin-top: 6rem;
}

/* -------------------------------------------------------------------------
   6 bis. Formulaire
   ---------------------------------------------------------------------- */

.tb-formulaire {
	display: grid;
	gap: 1.5rem;
	max-width: 36rem;
	margin-block-start: 2rem;
	scroll-margin-top: 6rem;
}

.tb-champ {
	display: grid;
	gap: 0.4rem;
	margin: 0;
}

.tb-champ label {
	font-weight: 600;
	font-size: 0.95rem;
}

.tb-facultatif {
	margin-left: 0.5rem;
	font-weight: 400;
	font-size: 0.8rem;
	color: var(--tb-text-muted);
}

.tb-aide {
	font-size: 0.85rem;
	line-height: 1.5;
	color: var(--tb-text-muted);
}

.tb-formulaire :where(input[type="text"], input[type="email"], input[type="url"], select, textarea) {
	width: 100%;
	min-height: 48px;
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-rayon-champ);
	background: var(--tb-surface);
	color: var(--tb-text);
	font: inherit;
	font-size: 1rem;
	transition: border-color var(--tb-transition), box-shadow var(--tb-transition);
}

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

.tb-formulaire :where(input, select, textarea):focus-visible {
	border-color: var(--tb-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tb-accent) 25%, transparent);
	outline: none;
}

.tb-champ-case label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.7rem;
	align-items: start;
	font-weight: 400;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--tb-text-muted);
}

.tb-champ-case input {
	width: 20px;
	height: 20px;
	margin-top: 0.15rem;
	accent-color: var(--tb-accent);
}

/* Le champ piège doit rester invisible sans être display:none, que les
   robots détecteraient. */
.tb-piege {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.tb-envoi {
	margin: 0;
}

.tb-envoi button {
	min-height: 52px;
	padding: 0 1.75rem;
	border: 0;
	border-radius: 10px;
	background: var(--tb-accent-fill);
	color: var(--tb-on-accent);
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: transform var(--tb-transition), box-shadow var(--tb-transition);
}

@media (hover: hover) {
	.tb-envoi button:hover {
		transform: translateY(-2px);
		box-shadow: 0 12px 24px -16px color-mix(in srgb, var(--tb-accent-fill) 70%, transparent);
	}
}

.tb-mentions {
	margin: 0;
	font-size: 0.85rem;
	color: var(--tb-text-muted);
}

.tb-formulaire-confirmation,
.tb-formulaire-erreurs {
	margin-block-start: 2rem;
	padding: 1.25rem 1.5rem;
	border: 1px solid var(--tb-line);
	border-left: 3px solid var(--tb-accent);
	border-radius: var(--tb-rayon-carte);
	background: var(--tb-surface);
}

.tb-formulaire-erreurs {
	border-left-color: #d14343;
}

.tb-formulaire-erreurs ul {
	margin: 0.5rem 0 0;
	padding-left: 1.2rem;
}

/* Gabarit « page libre » : la zone de contenu ne contraint plus la largeur,
   ce qui laisse un constructeur de pages travailler sans se battre avec le
   thème. L'en-tête et le pied de page restent les nôtres. */
.tb-libre {
	margin-block-start: 0;
}

.tb-libre > .alignfull {
	margin-inline: calc(50% - 50vw);
	max-width: 100vw;
	width: 100vw;
}

/* -------------------------------------------------------------------------
   7. Pied de page
   ---------------------------------------------------------------------- */

.tb-pied {
	border-top: 1px solid var(--tb-line);
	background: var(--tb-bg-elev);
}

/* Un lien seul dans une liste n'est pas un lien dans une phrase :
   l'exception de taille du critère 2.5.8 ne s'applique pas, il lui faut
   donc une vraie zone cliquable. */
.tb-pied li a,
.tb-fil-ariane a,
.tb-fil-ariane span {
	display: inline-block;
	padding-block: 0.35rem;
}

/* -------------------------------------------------------------------------
   7 bis. Bandeau de consentement
   ---------------------------------------------------------------------- */

.tb-consentement {
	position: fixed;
	left: 50%;
	bottom: 1rem;
	z-index: 40;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	width: min(52rem, calc(100% - 2rem));
	transform: translateX(-50%);
	padding: 1.1rem 1.4rem;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-rayon-carte);
	background: color-mix(in srgb, var(--tb-surface) 94%, transparent);
	backdrop-filter: saturate(150%) blur(12px);
	box-shadow: 0 24px 60px -40px rgba(3, 10, 24, 0.9);
}

.tb-consentement[hidden] {
	display: none;
}

.tb-consentement-texte {
	flex: 999 1 22rem;
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.55;
	color: var(--tb-text-muted);
}

.tb-consentement-boutons {
	display: flex;
	flex: 1 1 auto;
	gap: 0.6rem;
}

/* Refuser et accepter ont le même poids visuel : c'est une exigence,
   pas une option de style. */
.tb-consentement-boutons button {
	flex: 1 1 auto;
	min-height: 44px;
	padding: 0 1.2rem;
	border: 1px solid var(--tb-line);
	border-radius: 10px;
	background: transparent;
	color: var(--tb-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
	transition: border-color var(--tb-transition), color var(--tb-transition);
}

.tb-consentement-boutons button:hover {
	border-color: var(--tb-accent);
	color: var(--tb-accent);
}

/* -------------------------------------------------------------------------
   8. Impression
   ---------------------------------------------------------------------- */

@media print {
	.tb-entete,
	.tb-pied,
	.tb-bascule-theme {
		display: none !important;
	}

	body {
		background: #fff;
		color: #000;
	}
}

/* -------------------------------------------------------------------------
   Graphique de progression
   Couleurs validées contre la surface de chaque mode : #0a6494 passe les
   bandes de clarté et de contraste en clair, mais en sombre l'accent du
   thème est trop clair (L 0,75 pour une bande 0,48 à 0,67), d'où un palier
   propre à la donnée.
   ------------------------------------------------------------------------- */

.tb-graphe {
	--tb-trace: #0a6494;
	margin: 0 0 1.75rem;
	padding: 1.5rem 1.25rem 1.25rem;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .tb-graphe {
		--tb-trace: #2b9fd8;
	}
}

:root[data-theme="dark"] .tb-graphe {
	--tb-trace: #2b9fd8;
}

.tb-graphe-titre {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	margin-bottom: 0.75rem;
	font-weight: 600;
}

.tb-graphe-source {
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
	font-weight: 400;
	color: var(--tb-text-muted);
}

.tb-graphe-zone {
	position: relative;
}

.tb-graphe svg {
	display: block;
	width: 100%;
	height: auto;
	overflow: visible;
}

/* Grille et axe : un cran sur la surface, trait plein, jamais pointillé. */
.tb-graphe-grille,
.tb-graphe-axe {
	stroke: var(--tb-line);
	stroke-width: 1;
}

.tb-graphe-tick,
.tb-graphe-periode {
	fill: var(--tb-text-muted);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}

.tb-graphe-valeur {
	fill: var(--tb-text);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.tb-graphe-colonne {
	fill: var(--tb-trace);
}

/* La cible de survol couvre toute la bande : jamais un pixel à viser. */
.tb-graphe-cible {
	fill: transparent;
	cursor: default;
}

.tb-graphe-cible:hover,
.tb-graphe-cible:focus-visible {
	fill: color-mix(in srgb, var(--tb-trace) 8%, transparent);
	outline: none;
}

.tb-graphe-bulle {
	position: absolute;
	z-index: 2;
	min-width: 11rem;
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--tb-line);
	border-radius: var(--tb-rayon-champ);
	background: var(--tb-surface);
	box-shadow: var(--tb-ombre-carte);
	font-size: 0.8rem;
	line-height: 1.5;
	pointer-events: none;
	transform: translate(-50%, -100%);
}

.tb-graphe-bulle strong {
	display: block;
	margin-bottom: 0.2rem;
}

.tb-graphe-bulle span {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	color: var(--tb-text-muted);
}

.tb-graphe-bulle b {
	color: var(--tb-text);
	font-variant-numeric: tabular-nums;
	font-weight: 600;
}

/* L'animation : les colonnes poussent depuis la ligne de base, en cascade,
   une fois le graphique à l'écran.

   Le point important est l'état au repos. Une colonne non animée est à sa
   taille normale, jamais masquée : c'est une animation d'entrée posée par
   dessus un graphique déjà lisible, et non un graphique rendu visible par
   son animation. Si le script, l'observateur ou l'animation échouent, il
   reste un graphique juste. L'inverse donnerait une carte vide. */
@media (prefers-reduced-motion: no-preference) {
	.tb-graphe-anime.est-visible .tb-graphe-colonne {
		transform-box: fill-box;
		transform-origin: bottom;
		animation: tb-pousser 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--tb-retard, 0ms) backwards;
	}

	.tb-graphe-anime.est-visible .tb-graphe-valeur {
		animation: tb-paraitre 400ms linear var(--tb-retard, 0ms) backwards;
	}
}

/* Le texte d'un SVG se met à l'échelle avec le viewBox. Le script mesure le
   rapport réel et le pose dans --tb-echelle-texte, pour que les libellés
   gardent la même taille à l'écran quelle que soit la largeur. Sans script,
   la valeur vaut 1 et rien ne casse. */
.tb-graphe svg {
	--tb-echelle-texte: 1;
}

.tb-graphe-tick,
.tb-graphe-periode {
	font-size: calc(11px * var(--tb-echelle-texte));
}

.tb-graphe-valeur {
	font-size: calc(12px * var(--tb-echelle-texte));
}

/* Barres horizontales en HTML : le texte ne se met jamais à l'échelle. */
.tb-barres {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	margin-top: 0.25rem;
}

.tb-barres-rangee {
	display: grid;
	grid-template-columns: minmax(7rem, 11rem) 1fr auto;
	align-items: center;
	gap: 0.75rem;
}

.tb-barres-libelle {
	font-size: 0.82rem;
	text-align: right;
	overflow-wrap: anywhere;
}

.tb-barres-piste {
	display: block;
	min-width: 0;
}

.tb-barres-trait {
	display: block;
	height: 16px;
	width: var(--tb-part, 0%);
	border-radius: 0 4px 4px 0;
	background: var(--tb-trace);
}

.tb-barres-valeur {
	font-size: 0.82rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* Sur téléphone, le libellé passe au dessus de sa barre. */
@media (max-width: 560px) {
	.tb-barres-rangee {
		grid-template-columns: 1fr auto;
		gap: 0.15rem 0.6rem;
	}

	.tb-barres-libelle {
		grid-column: 1 / -1;
		text-align: left;
		color: var(--tb-text-muted);
	}
}

/* Le tableau double la lecture des barres : il porte la position moyenne,
   que les barres ne montrent pas. */
.tb-barres-tableau {
	width: 100%;
	margin-top: 1.25rem;
	border-collapse: collapse;
	font-size: 0.8rem;
}

.tb-barres-tableau caption {
	margin-bottom: 0.4rem;
	text-align: left;
	color: var(--tb-text-muted);
	font-size: 0.75rem;
}

.tb-barres-tableau :where(th, td) {
	border: 1px solid var(--tb-line);
	padding: 0.35rem 0.5rem;
	text-align: left;
	font-variant-numeric: tabular-nums;
}

/* Tracé : 2 px, jamais pointillé, et une nappe en lavis sous la courbe. */
.tb-graphe-trace {
	fill: none;
	stroke: var(--tb-trace);
	stroke-width: 2;
	stroke-linejoin: round;
	stroke-linecap: round;
}

.tb-graphe-nappe {
	fill: var(--tb-trace);
	opacity: 0.1;
	stroke: none;
}

/* Un point marqué porte un anneau de la couleur du fond : il reste lisible
   là où il croise le tracé. */
.tb-graphe-point {
	fill: var(--tb-trace);
	stroke: var(--tb-surface);
	stroke-width: 2;
}

.tb-graphe-libelle {
	fill: var(--tb-text);
	font-size: 12px;
}

/* L'animation terminée, on la retire : plus rien ne peut masquer les
   colonnes, quelle que soit la suite. */
.tb-graphe.est-pose .tb-graphe-colonne,
.tb-graphe.est-pose .tb-graphe-valeur {
	animation: none;
}

/* Les animations d'entrée du graphique.

   Tout passe par des transitions, jamais par une animation à remplissage
   « backwards ». La différence compte : une animation en attente épingle
   l'élément sur son état de départ, donc invisible, et un onglet en
   arrière-plan met les animations en pause. Une transition, elle, vise
   toujours l'état final ; seul le trajet est animé.

   L'état au repos, sans classe, est l'état final. Et la classe est-pose,
   posée par un minuteur qui ne peut pas être mis en pause, force cet état
   quoi qu'il arrive. */
@media (prefers-reduced-motion: no-preference) {
	.tb-graphe-anime:not(.est-pose) .tb-graphe-colonne {
		transform: scaleY(0);
		transform-box: fill-box;
		transform-origin: bottom;
	}

	.tb-graphe-anime:not(.est-pose) .tb-barres-trait {
		width: 0;
	}

	.tb-graphe-anime:not(.est-pose) .tb-graphe-trace {
		stroke-dasharray: 1400;
		stroke-dashoffset: 1400;
	}

	.tb-graphe-anime:not(.est-pose) :where(.tb-graphe-valeur, .tb-graphe-nappe, .tb-graphe-point) {
		opacity: 0;
	}

	.tb-graphe-anime.est-visible .tb-graphe-colonne {
		transform: scaleY(1);
		transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--tb-retard, 0ms);
	}

	.tb-graphe-anime.est-visible .tb-barres-trait {
		width: var(--tb-part, 0%);
		transition: width 760ms cubic-bezier(0.2, 0.7, 0.2, 1) var(--tb-retard, 0ms);
	}

	.tb-graphe-anime.est-visible .tb-graphe-trace {
		stroke-dashoffset: 0;
		transition: stroke-dashoffset 1400ms cubic-bezier(0.3, 0.5, 0.2, 1);
	}

	.tb-graphe-anime.est-visible .tb-graphe-valeur {
		opacity: 1;
		transition: opacity 400ms linear var(--tb-retard, 0ms);
	}

	.tb-graphe-anime.est-visible :where(.tb-graphe-nappe, .tb-graphe-point) {
		transition: opacity 600ms linear 700ms;
	}

	.tb-graphe-anime.est-visible .tb-graphe-nappe {
		opacity: 0.1;
	}

	.tb-graphe-anime.est-visible .tb-graphe-point {
		opacity: 1;
	}
}

/* Le filet. Ces règles gagnent sur tout ce qui précède et ne dépendent
   d'aucune animation : si quoi que ce soit échoue, le graphique est juste. */
.tb-graphe.est-pose .tb-graphe-colonne {
	transform: none;
}

.tb-graphe.est-pose .tb-barres-trait {
	width: var(--tb-part, 0%);
}

.tb-graphe.est-pose .tb-graphe-trace {
	stroke-dasharray: none;
	stroke-dashoffset: 0;
}

.tb-graphe.est-pose .tb-graphe-valeur,
.tb-graphe.est-pose .tb-graphe-point {
	opacity: 1;
}

.tb-graphe.est-pose .tb-graphe-nappe {
	opacity: 0.1;
}

.tb-graphe.est-pose :where(.tb-graphe-colonne, .tb-barres-trait, .tb-graphe-trace, .tb-graphe-valeur, .tb-graphe-point, .tb-graphe-nappe) {
	transition: none;
}



/* -------------------------------------------------------------------------
   Moyens de contact
   ------------------------------------------------------------------------- */

.tb-contacts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
	gap: 0.75rem;
	margin: 0 0 1rem;
}

.tb-contact {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding: 1rem 1.1rem;
	text-decoration: none;
	color: inherit;
}

.tb-contact-picto {
	width: 26px;
	height: 26px;
	flex: none;
	color: var(--tb-accent);
}

.tb-contact-texte {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.tb-contact-titre {
	font-weight: 600;
}

.tb-contact-detail {
	font-size: 0.85rem;
	color: var(--tb-text-muted);
	overflow-wrap: anywhere;
}

.tb-contact:hover .tb-contact-titre,
.tb-contact:focus-visible .tb-contact-titre {
	color: var(--tb-accent);
}

.tb-contacts-lieu {
	font-size: 0.9rem;
	color: var(--tb-text-muted);
}

/* -------------------------------------------------------------------------
   Premier écran, direction « La courbe »

   Une section sombre qui porte la vraie courbe d'un client, creux compris.
   Tout le reste de la page reste clair et discipliné : l'audace tient dans
   ce seul écran.
   ------------------------------------------------------------------------- */

.tb-hero {
	--tb-hero-fond: #060b16;
	--tb-hero-encre: #ffffff;
	--tb-hero-encre-douce: #c7d6ee;
	--tb-hero-trace: #38bdf8;
	position: relative;
	background: var(--tb-hero-fond);
	color: var(--tb-hero-encre);
	overflow: hidden;
	padding-block: clamp(5.5rem, 11vw, 8rem) 0;
}

.tb-hero-titre {
	max-width: 17ch;
	font-size: clamp(2.4rem, 5.6vw, 4rem);
	line-height: 1.03;
	letter-spacing: -0.04em;
	text-wrap: balance;
}

.tb-hero-chapeau {
	max-width: 52ch;
	font-size: clamp(1rem, 1.5vw, 1.2rem);
	line-height: 1.55;
	color: var(--tb-hero-encre-douce);
}

.tb-hero-actions {
	margin-top: 0.6rem;
}

/* La courbe. Elle déborde volontairement jusqu'aux deux bords : c'est une
   image de fond qui porte la page, pas une figure posée dans une carte. */
.tb-hero-courbe {
	position: relative;
	margin-top: clamp(1rem, 4vw, 2.5rem);
}

.tb-hero-courbe svg {
	display: block;
	width: 100%;
	height: clamp(180px, 26vw, 420px);
}

.tb-hero-nappe {
	fill: url(#tb-nappe-hero);
}

.tb-hero-nappe-haut {
	stop-color: var(--tb-hero-trace);
	stop-opacity: 0.26;
}

.tb-hero-nappe-bas {
	stop-color: var(--tb-hero-trace);
	stop-opacity: 0;
}

/* preserveAspectRatio="none" étire le tracé : l'épaisseur doit donc être
   fixée en pixels écran, sinon elle s'étire avec lui. */
.tb-hero-trace {
	fill: none;
	stroke: var(--tb-hero-trace);
	stroke-width: 2.5;
	stroke-linejoin: round;
	stroke-linecap: round;
	vector-effect: non-scaling-stroke;
}

.tb-hero-fil {
	stroke: #8aa4c8;
	stroke-width: 1;
	stroke-dasharray: 3 4;
	vector-effect: non-scaling-stroke;
}

.tb-hero-creux {
	fill: var(--tb-hero-fond);
	stroke: var(--tb-hero-trace);
	stroke-width: 2.5;
	vector-effect: non-scaling-stroke;
}

.tb-hero-sommet {
	fill: var(--tb-hero-trace);
}

/* Les annotations. Sous 900 px elles passent en dessous, en colonne : posées
   sur la courbe, elles se chevaucheraient. */
.tb-hero-note {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.45;
	color: var(--tb-hero-encre-douce);
}

.tb-hero-note strong {
	display: block;
	font-weight: 500;
	color: var(--tb-hero-encre);
}

@media (min-width: 900px) {
	.tb-hero-note {
		position: absolute;
		width: 16rem;
		left: var(--tb-x);
	}

	.tb-hero-note-creux {
		bottom: -1.5rem;
		transform: translateX(-85%);
	}

	.tb-hero-note-sommet {
		top: -0.5rem;
		transform: translateX(-100%);
		text-align: right;
	}
}

@media (max-width: 899px) {
	.tb-hero-courbe {
		display: flex;
		flex-direction: column;
		gap: 0.9rem;
	}

	.tb-hero-courbe svg {
		order: -1;
	}
}

.tb-hero-source {
	margin-top: clamp(2rem, 5vw, 3.25rem);
	margin-bottom: 0;
	padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
	font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	font-size: 0.75rem;
	color: #8aa4c8;
}

/* Boutons posés sur le fond sombre. */
.wp-block-button.is-style-tb-clair .wp-block-button__link {
	background: var(--tb-hero-trace, #38bdf8);
	color: #04111f;
	font-weight: 600;
	border: 1px solid transparent;
}

.wp-block-button.is-style-tb-clair .wp-block-button__link:hover {
	background: #ffffff;
	color: #04111f;
}

.wp-block-button.is-style-tb-fantome .wp-block-button__link {
	background: transparent;
	color: #ffffff;
	border: 1px solid #40608f;
}

.wp-block-button.is-style-tb-fantome .wp-block-button__link:hover {
	border-color: var(--tb-hero-trace, #38bdf8);
	color: var(--tb-hero-trace, #38bdf8);
	background: transparent;
}

/* L'en-tête garde son encre normale partout.
   Une première version la passait en blanc sur l'accueil, en supposant que
   la barre flottait par dessus le premier écran sombre. Elle ne le survole
   pas : elle occupe sa propre bande claire au dessus. Du blanc y aurait été
   illisible. */
.tb-entete {
	--tb-entete-encre-haut: var(--tb-text);
}

/* -------------------------------------------------------------------------
   Grille à filets, dossiers et bandeau final
   Suite de la direction « La courbe » : le premier écran porte l'audace,
   ces sections restent discrètes et nettes.
   ------------------------------------------------------------------------- */

/* Un quadrillage, pas des cartes posées. Les filets sont le fond qui
   transparaît entre les cases, ce qui évite de dessiner une bordure autour
   de chaque case et de doubler les traits à leur jonction. */
.tb-filets {
	display: grid;
	/* Colonnes déclarées par palier plutôt qu'en auto-fit : avec
	   minmax(min(100%, 320px), 1fr), le navigateur produisait deux colonnes
	   inégales, 320 px et 186 px, au lieu de passer à une seule. */
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--tb-line);
	border: 1px solid var(--tb-line);
}

@media (min-width: 720px) {
	.tb-filets {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1040px) {
	.tb-filets {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.tb-filet-case {
	margin: 0;
	padding: 1.75rem;
	background: var(--tb-surface);
	transition: background-color var(--tb-transition);
}

.tb-filet-case:has(a:hover) {
	background: var(--tb-bg-elev);
}

.tb-filet-case :where(h3) {
	margin: 0;
}

/* Un titre reste un titre : le lien ne se souligne qu'au survol, comme dans
   les cartes. Sans cette règle les cinq services s'affichent en liens bruts
   soulignés. */
.tb-filet-case :where(h2, h3, h4) a {
	color: inherit;
	text-decoration: none;
}

.tb-filet-case :where(h2, h3, h4) a:hover,
.tb-filet-case :where(h2, h3, h4) a:focus-visible {
	color: var(--tb-accent);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Cinq services dans une grille qui en place deux ou trois par rangée : la
   dernière case laisserait un trou. Elle occupe donc la place restante.
   Sur une seule colonne, l'étendue retombe d'elle-même à une colonne. */
@media (min-width: 720px) {
	.tb-filets > :last-child {
		grid-column: span 2;
	}
}

/* Les dossiers : une ligne par dossier, le nom d'abord, l'état à droite.
   Une liste hiérarchise ce que trois cartes identiques aplatissaient. */
.tb-dossiers {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--tb-line);
}

.tb-dossier {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 0.15rem 1.25rem;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--tb-line);
	text-decoration: none;
	color: inherit;
}

.tb-dossier-nom {
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: -0.015em;
}

.tb-dossier-lieu {
	grid-column: 1;
	font-size: 0.9rem;
	line-height: 1.5;
	color: var(--tb-text-muted);
}

.tb-dossier-etat {
	grid-row: 1;
	grid-column: 2;
	align-self: start;
	font-size: 0.85rem;
	color: var(--tb-text-muted);
	white-space: nowrap;
}

.tb-dossier-etat-fort {
	color: var(--tb-accent);
}

.tb-dossier:hover .tb-dossier-nom,
.tb-dossier:focus-visible .tb-dossier-nom {
	color: var(--tb-accent);
}

@media (max-width: 560px) {
	.tb-dossier {
		grid-template-columns: 1fr;
	}

	.tb-dossier-etat {
		grid-row: auto;
		grid-column: 1;
		margin-top: 0.3rem;
	}
}

/* Le bandeau final referme la page comme le premier écran l'ouvre. */
.tb-final {
	background: #060b16;
	color: #ffffff;
}

.tb-final-titre {
	color: #ffffff;
	max-width: 18ch;
	letter-spacing: -0.03em;
	text-wrap: balance;
}

.tb-final-texte {
	max-width: 46ch;
	font-size: 1.05rem;
	line-height: 1.6;
	color: #c7d6ee;
}

.tb-final-mention {
	margin-top: 1.5rem;
	font-size: 0.82rem;
	color: #8aa4c8;
}

.tb-final-actions {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

.tb-final-action {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 44px;
	padding: 0.85rem 1.35rem;
	border: 1px solid #40608f;
	border-radius: 999px;
	color: #ffffff;
	text-decoration: none;
	font-size: 1rem;
	transition: border-color var(--tb-transition), background-color var(--tb-transition);
}

.tb-final-action:hover,
.tb-final-action:focus-visible {
	border-color: #38bdf8;
}

.tb-final-action-plein {
	background: #38bdf8;
	border-color: #38bdf8;
	color: #04111f;
	font-weight: 600;
}

.tb-final-action-plein:hover,
.tb-final-action-plein:focus-visible {
	background: #ffffff;
	border-color: #ffffff;
}

.tb-final-detail {
	font-size: 0.85rem;
	font-weight: 400;
	color: #c7d6ee;
	overflow-wrap: anywhere;
}

.tb-final-action-plein .tb-final-detail {
	color: #0b3550;
}