/* =========================================================================
   Bon Setup — Configurateur, habillage « Nuit technique »

   Le composant s'habille seul : tout ce qui concerne le configurateur vit
   ici, y compris le tableau des écrans et la palette des postes budgétaires.
   Le thème enfant n'a plus à le corriger — il se contentait auparavant de
   surcharger cette feuille, ce qui créait une guerre de spécificité.

   Deux surfaces : la carte de réglages et l'écran de résultats, toutes deux
   sur `--c-surface`. Chiffres en chasse fixe, un seul accent rouge réservé
   à ce qui appelle une action ou signale un résultat.

   Les tokens sont hérités de `:root` (thème enfant) avec des valeurs de
   repli : le shortcode reste présentable si le plugin sert ailleurs.
   Le mode sombre est piloté par ces seuls tokens — aucune règle
   `[data-theme="dark"]` n'est nécessaire pour les surfaces.
   ========================================================================= */

.bonsetup {
	/* Surfaces et texte — bascule clair/sombre par le thème */
	--c-surface: var(--bs-surface, #FFFFFF);
	--c-ink: var(--bs-ink, #0B0D0F);
	--c-muted: var(--bs-muted, #63636B);
	/* Texte courant des listes : un cran plus sombre que `--c-muted`. */
	--c-body: var(--bs-body, #4A4A52);
	--c-line: var(--bs-line, #E6E4E0);
	--c-tile: var(--bs-tile, #F7F6F4);
	--c-line-faint: var(--bs-line-faint, #D8D5D0);
	--c-hover: var(--bs-hover, rgba(18, 18, 20, 0.05));
	--c-shadow: var(--bs-shadow, 0 1px 2px rgba(18, 18, 20, 0.05), 0 10px 32px rgba(18, 18, 20, 0.08));

	/* Accents */
	--c-rouge: var(--bs-rouge, #E60012);
	--c-vif: var(--bs-rouge-vif, #FF2A38);
	--c-rouge-soft: var(--bs-rouge-soft, #FDE8EA);
	/* Rouge lisible en petit corps : #E8402A tombe sous 4,5:1 sur blanc. */
	--c-rouge-txt: var(--bs-rouge-txt, #C4000F);
	--c-ok: var(--bs-ok, #167A45);

	/* Gris du schéma et des pastilles d'état */
	--c-mob: var(--bs-mob, #C9C6C0);
	--c-dot-moyen: var(--bs-dot-moyen, #B4B2AD);
	--c-dot-non: var(--bs-dot-non, #E0DDD8);
	--c-grille: var(--bs-grille, rgba(18, 18, 20, 0.06));

	/* Infobulle : contraste inversé par rapport à la surface */
	--c-tip-bg: var(--bs-tip-bg, #0B0D0F);
	--c-tip-ink: var(--bs-tip-ink, #FFFFFF);

	--c-font: var(--bs-font, "Inter", system-ui, sans-serif);
	--c-mono: var(--bs-mono, "IBM Plex Mono", ui-monospace, monospace);

	/* Cinq postes budgétaires : teintes catégorielles, sans ordre implicite.
	   Voir la note de palette en fin de fichier. */
	--bs-s1: var(--bs-poste-1, #2a78d6);   /* siège       — bleu */
	--bs-s2: var(--bs-poste-2, #1baf7a);   /* bureau      — vert */
	--bs-s3: var(--bs-poste-3, #eda100);   /* écran       — ambre */
	--bs-s4: var(--bs-poste-4, #4a3aa7);   /* éclairage   — violet */
	--bs-s5: var(--bs-poste-5, #e87ba4);   /* accessoires — magenta */

	font-family: var(--c-font);
	font-size: 16px;
	line-height: 1.6;
	color: var(--c-ink);
}

.bonsetup *,
.bonsetup *::before,
.bonsetup *::after {
	box-sizing: border-box;
}

.bonsetup :focus-visible {
	outline: 2px solid var(--c-rouge);
	outline-offset: 2px;
}

/* Zone d'annonce : lue par les lecteurs d'écran, invisible à l'œil — les
   mêmes chiffres sont déjà affichés dans les tuiles de cotes. Elle n'est pas
   masquée par `display: none`, qui la retirerait aussi de la vocalisation. */
.bonsetup__statut {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Disposition : réglages | écran de résultats ----------
   Bascule à 1100px et non 880px : entre les deux, les deux colonnes
   tenaient encore mais les résultats étaient étranglés (schéma rogné,
   tuiles empilées, tableau illisible). */

.bonsetup__layout {
	display: grid;
	grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
	gap: clamp(18px, 2.5vw, 28px);
	align-items: start;
}

@media (max-width: 1099px) {
	.bonsetup__layout {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* ---------- Formulaire : carte de réglages ---------- */

.bonsetup__form {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: 18px;
	box-shadow: var(--c-shadow);
	padding: clamp(20px, 3vw, 30px);
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 0;
}

/* Le formulaire ne devient collant qu'a partir de deux colonnes. Ecrit en
   `min-width`, l'ordre des regles n'a plus d'importance : la version mobile
   est celle par defaut. Auparavant l'annulation `position: static` etait
   posee plus haut dans le fichier que le `position: sticky` de base et
   perdait donc a specificite egale — sur mobile le formulaire restait
   colle en haut pendant que le panneau de resultats defilait par-dessus. */
@media (min-width: 1100px) {
	.bonsetup__form {
		position: sticky;
		top: 24px;
	}
}

.bonsetup__field label {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-size: 15px;
	font-weight: 600;
	color: var(--c-ink);
	margin-bottom: 10px;
}

.bonsetup__out {
	font-family: var(--c-mono);
	font-weight: 600;
	font-size: 20px;
	letter-spacing: -0.01em;
	white-space: nowrap;
	color: var(--c-ink);
}

.bonsetup__hint {
	font-size: 14px;
	color: var(--c-muted);
	margin: 8px 0 0;
	max-width: 44ch;
}

/* Curseurs */

.bonsetup__field input[type="range"] {
	--bs-track: var(--c-line);
	-webkit-appearance: none;
	appearance: none;
	display: block;
	width: 100%;
	height: 24px;
	margin: 0;
	background: transparent;
	cursor: pointer;
}

/* La portion parcourue passe au rouge (--bs-pct est posée par le script
   d'interface du thème enfant ; sans lui, piste neutre = comportement sain). */
.bonsetup__field input[type="range"]::-webkit-slider-runnable-track {
	height: 5px;
	border-radius: 999px;
	background: linear-gradient(to right,
		var(--c-rouge) 0%,
		var(--c-rouge) var(--bs-pct, 0%),
		var(--bs-track) var(--bs-pct, 0%));
}

/* Firefox gère nativement la portion parcourue : pas besoin de --bs-pct. */
.bonsetup__field input[type="range"]::-moz-range-track {
	height: 5px;
	border-radius: 999px;
	background: var(--bs-track);
}

.bonsetup__field input[type="range"]::-moz-range-progress {
	height: 5px;
	border-radius: 999px;
	background: var(--c-rouge);
}

.bonsetup__field input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	appearance: none;
	width: 22px;
	height: 22px;
	margin-top: -8.5px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--c-rouge);
	box-shadow: 0 2px 8px rgba(18, 18, 20, 0.18);
}

.bonsetup__field input[type="range"]::-moz-range-thumb {
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: #fff;
	border: 2.5px solid var(--c-rouge);
	box-shadow: 0 2px 8px rgba(18, 18, 20, 0.18);
}

/* Cases à cocher */

.bonsetup__field--case label {
	justify-content: flex-start;
	align-items: center;
	gap: 12px;
	cursor: pointer;
	margin-bottom: 0;
}

.bonsetup__field--case input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	width: 19px;
	height: 19px;
	margin: 0;
	border: 2px solid var(--c-line);
	border-radius: 5px;
	background: var(--c-surface);
	cursor: pointer;
	flex: none;
	display: grid;
	place-content: center;
	transition: border-color 0.12s ease, background 0.12s ease;
}

.bonsetup__field--case input[type="checkbox"]:hover {
	border-color: var(--c-muted);
}

.bonsetup__field--case input[type="checkbox"]:checked {
	background: var(--c-rouge);
	border-color: var(--c-rouge);
}

.bonsetup__field--case input[type="checkbox"]:checked::before {
	content: "";
	width: 10px;
	height: 6px;
	border: 2px solid #fff;
	border-top: 0;
	border-right: 0;
	transform: rotate(-45deg) translateY(-1px);
}

/* Bloc « j'ai déjà un bureau et un siège » */

.bonsetup__existant {
	border-left: 2px solid var(--c-line);
	padding-left: 16px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.bonsetup__existant[hidden] {
	display: none;
}

/* Sélecteur de priorité.
   Le chevron est un data-URI : sa couleur ne peut pas suivre `currentColor`.
   On retient un gris médian lisible sur les deux surfaces plutôt que de
   maintenir deux images. */
.bonsetup__field select {
	display: block;
	width: 100%;
	min-height: 44px;
	padding: 0 40px 0 12px;
	font-family: var(--c-font);
	font-size: 15.5px;
	font-weight: 600;
	color: var(--c-ink);
	background-color: var(--c-surface);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238A8A92' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	border: 1.5px solid var(--c-line);
	border-radius: 10px;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.bonsetup__field select:hover { border-color: var(--c-muted); }

/* ---------- Résultats : l'écran de l'instrument ---------- */

.bonsetup__results {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	color: var(--c-ink);
	box-shadow: var(--c-shadow);
	border-radius: 18px;
	padding: clamp(20px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	gap: clamp(26px, 3vw, 36px);
	position: relative;
	overflow: hidden;
}

/* Grille pointillée estompée : signature « instrument », purement décorative. */
.bonsetup__results::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(var(--c-grille) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 80% 45% at 50% 0%, #000 10%, transparent 65%);
	mask-image: radial-gradient(ellipse 80% 45% at 50% 0%, #000 10%, transparent 65%);
	pointer-events: none;
}

.bonsetup__panel {
	position: relative;
	border-top: 1px solid var(--c-line);
	padding-top: 20px;
}

.bonsetup__panel:first-child {
	border-top: 0;
	padding-top: 0;
}

.bonsetup__h {
	font-family: var(--c-mono);
	font-size: 13px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--c-muted);
	margin: 0 0 16px;
}

.bonsetup__intro {
	font-size: 15px;
	color: var(--c-muted);
	max-width: 62ch;
	margin: 0 0 14px;
}

.bonsetup__legal {
	font-size: 13.5px;
	color: var(--c-muted);
	max-width: 70ch;
	margin: 14px 0 0;
}

/* La mention se cale sous la colonne des résultats : le formulaire est
   collant et sa course descend jusqu'au bas du bloc — en pleine largeur,
   il finissait par passer devant ce texte. */
.bonsetup__layout > .bonsetup__legal {
	grid-column: 2 / -1;
}

@media (max-width: 1099px) {
	.bonsetup__layout > .bonsetup__legal {
		grid-column: 1 / -1;
	}
}

/* ---------- Schéma + tuiles de cotes ---------- */

.bonsetup__mesures {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 18px;
}

/* Un élément de grille refuse par défaut de descendre sous la taille de son
   contenu : sans `min-width: 0`, les panneaux repoussaient la colonne de
   résultats au lieu de se laisser réduire. */
.bonsetup__panel {
	min-width: 0;
}

.bonsetup__schema svg {
	display: block;
	width: 100%;
	max-width: 680px;
	height: auto;
	margin-inline: auto;
}

/* Traits du schéma : mobilier à l'encre, personne et regard en rouge,
   traits de cote discrets. */
.bs-sol       { stroke: var(--c-ink); stroke-width: 2.5; }
.bs-mob       { stroke: var(--c-mob); stroke-width: 2; fill: none; }
.bs-mob-plein { stroke: var(--c-ink); stroke-width: 3.5; }
.bs-corps     { stroke: var(--c-vif); stroke-width: 2.4; fill: none; }
.bs-dalle     { fill: var(--c-ink); }
.bs-regard    { stroke: var(--c-vif); stroke-width: 1.5; stroke-dasharray: 5 5; }
.bs-cote      { stroke: var(--c-line-faint); stroke-width: 1; }
.bs-tick      { stroke: var(--c-muted); stroke-width: 1.5; }
.bs-txt       { font-family: var(--c-mono); font-size: 13px; font-weight: 600; fill: var(--c-muted); }
.bs-txt-2     { font-family: var(--c-mono); font-size: 13px; font-weight: 600; fill: var(--c-rouge-txt); }

/* Tuiles de cotes */

/* `minmax(120px, 1fr)` fixait un plancher de 4 × 120 + gouttières = 510px :
   sous cette largeur la grille refusait de se réduire et débordait — et comme
   le panneau de résultats est en `overflow: hidden`, les tuiles étaient
   coupées net sur mobile au lieu de se réorganiser. `min(120px, 100%)` laisse
   la piste passer sous son plancher quand le conteneur est plus étroit. */
.bonsetup__cotes {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(120px, 100%), 1fr));
	gap: 10px;
	margin: 0 auto;
	max-width: 820px;
	width: 100%;
	min-width: 0;
}

.bonsetup__cote {
	background: var(--c-tile);
	border: 1px solid var(--c-line);
	border-radius: 10px;
	padding: 12px 14px;
}

.bonsetup__cote dt {
	font-family: var(--c-mono);
	font-size: 12px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
	margin: 0 0 4px;
}

.bonsetup__cote dd {
	font-family: var(--c-mono);
	font-weight: 600;
	font-size: 26px;
	line-height: 1.1;
	color: var(--c-ink);
	margin: 0;
}

/* L'unité est en retrait : c'est le chiffre qu'on compare d'une tuile à
   l'autre. Sans cette règle elle restait collée au nombre — « 46cm » se
   lisait comme un seul bloc. */
.bonsetup__cote dd span {
	font-size: 14px;
	font-weight: 500;
	color: var(--c-muted);
	margin-left: 5px;
	white-space: nowrap;
}

/* La première tuile — la hauteur d'assise — est la cote qui élimine le plus
   de modèles : elle porte l'accent. */
.bonsetup__cote:first-child dd {
	color: var(--c-rouge);
}

/* ---------- Diagnostic de l'existant ---------- */

.bonsetup__verdict-bloc {
	border-left: 3px solid var(--c-muted);
	padding: 4px 0 4px 14px;
	margin: 0 0 16px;
}

.bonsetup__verdict-bloc--garder    { border-left-color: var(--c-ok); }
.bonsetup__verdict-bloc--ajuster   { border-left-color: var(--c-muted); }
.bonsetup__verdict-bloc--remplacer { border-left-color: var(--c-vif); }

.bonsetup__verdict-bloc h4 {
	font-size: 16px;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0 0 4px;
}

.bonsetup__verdict-bloc p {
	font-size: 15px;
	color: var(--c-muted);
	margin: 0;
}

/* ---------- Points de vigilance ---------- */

.bonsetup__alerte {
	display: flex;
	gap: 12px;
	align-items: flex-start;
	border-left: 3px solid var(--c-vif);
	padding: 4px 0 4px 14px;
	margin: 0 0 14px;
	font-size: 15px;
	color: var(--c-muted);
}

.bonsetup__alerte svg {
	width: 18px;
	height: 18px;
	flex: none;
	margin-top: 2px;
	fill: var(--c-vif);
}

.bonsetup__alerte strong {
	color: var(--c-ink);
}

/* ---------- Tableau « Quel écran tient à ce recul » ----------
   Colonnes proportionnées au contenu réel, pas au hasard du texte ;
   seules les lignes horizontales séparent ; chiffres alignés d'une ligne
   à l'autre pour comparer 1,46 et 1,10 d'un coup d'œil. */

.bonsetup__scroll {
	overflow-x: auto;
}

/* Neutralisation des styles de tableau du thème hôte.
   Le sélecteur `tbody tr:nth-child(odd)` a été retiré : il pesait (0,2,2) et
   écrasait la règle des lignes retenues (0,2,0), si bien qu'une ligne « oui »
   sur deux perdait son fond rosé. Il visait le zébrage de Foxiz, thème
   désactivé depuis ; `tbody tr` suffit et laisse passer les règles du
   composant.
   Foxiz pose `thead { background-color: var(--dark-accent) }` et un zébrage
   `tbody tr:nth-child(odd)` sur des sélecteurs d'élément nus : l'en-tête du
   tableau des écrans virait au noir et les lignes se rayaient de gris, ce
   qui parasitait le liseré des formats retenus. On rétablit une surface
   neutre — la règle des lignes retenues, plus spécifique, passe devant. */
.bonsetup thead,
.bonsetup tbody tr {
	background: none;
	color: inherit;
}

/* Compactage 2026-08-26 : marges 12/16 → 8/12, corps 15 → 14, colonnes de
   gauche resserrées au profit du verdict (les phrases repliaient sur deux
   lignes et gonflaient le tableau), chiffres alignés à droite. Les
   affordances de défilement mobile (colonne figée, ombres, mention, barre)
   ne bougent pas. */
.bonsetup__ecrans,
.bonsetup__tableau table {
	width: 100%;
	border-collapse: collapse;
	font-size: 14px;
}

.bonsetup__ecrans {
	table-layout: fixed;
}

.bonsetup__ecrans th:nth-child(1), .bonsetup__ecrans td:nth-child(1) { width: 13%; }
.bonsetup__ecrans th:nth-child(2), .bonsetup__ecrans td:nth-child(2) { width: 16%; }
.bonsetup__ecrans th:nth-child(3), .bonsetup__ecrans td:nth-child(3) { width: 10%; }
.bonsetup__ecrans th:nth-child(4), .bonsetup__ecrans td:nth-child(4) { width: 13%; }

/* Les colonnes chiffrées se lisent en colonne : alignées à droite, les
   ordres de grandeur se comparent d'un coup d'œil (tabular-nums est déjà
   posé plus bas). */
.bonsetup__ecrans th:nth-child(3), .bonsetup__ecrans td:nth-child(3),
.bonsetup__ecrans th:nth-child(4), .bonsetup__ecrans td:nth-child(4) {
	text-align: right;
}

.bonsetup__ecrans th,
.bonsetup__tableau th {
	font-family: var(--c-mono);
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--c-muted);
	text-align: left;
	border-bottom: 1px solid var(--c-line);
}

.bonsetup__ecrans td,
.bonsetup__tableau td {
	border-bottom: 1px solid var(--c-line);
	color: var(--c-ink);
	font-variant-numeric: tabular-nums;
}

/* Alignement vertical au centre partout : sans lui, l'en-tête de ligne se
   calait sur la ligne de base et la première colonne flottait au-dessus. */
.bonsetup__ecrans th,
.bonsetup__ecrans td {
	padding: 8px 12px;
	vertical-align: middle;
	border-left: 0;
	border-right: 0;
}

/* Le liseré des lignes retenues occupe 3px : la première cellule s'en écarte
   pour ne pas paraître poussée contre lui. */
.bonsetup__ecrans th:first-child,
.bonsetup__ecrans td:first-child {
	padding-left: 16px;
}

/* « FINESSE DU TEXTE » ne tient pas sur une ligne dans sa colonne : on le
   laisse revenir à la ligne et on resserre l'interlettrage. */
.bonsetup__ecrans thead th {
	letter-spacing: 0.02em;
	font-size: 0.72rem;
	line-height: 1.25;
}

/* La diagonale est l'en-tête de ligne : elle se lit comme telle, pas comme
   une donnée secondaire en gris. */
.bonsetup__ecrans tbody th {
	font-family: var(--c-font);
	font-size: 14px;
	text-transform: none;
	letter-spacing: 0;
	color: var(--c-ink);
	font-weight: 600;
}

/* Pastille d'état devant le verdict : elle double le texte, elle ne le
   remplace jamais. */
.bonsetup__verdict::before {
	content: "";
	display: inline-block;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	margin-right: 8px;
}

.bonsetup__ecran--oui .bonsetup__verdict::before   { background: var(--c-rouge); }
.bonsetup__ecran--moyen .bonsetup__verdict::before { background: var(--c-dot-moyen); }
.bonsetup__ecran--non .bonsetup__verdict::before   { background: var(--c-dot-non); }

.bonsetup__ecran--non td {
	color: var(--c-muted);
}

/* Les formats qui conviennent ressortent : c'est l'information que le lecteur
   vient chercher. Le liseré porte le sens, le point et le verdict écrit le
   confirment — la couleur ne décide jamais seule. */
.bonsetup__ecrans .bonsetup__ecran--oui {
	background: var(--c-rouge-soft);
	box-shadow: inset 3px 0 0 var(--c-rouge);
}

.bonsetup__ecrans .bonsetup__ecran--oui td,
.bonsetup__ecrans .bonsetup__ecran--oui th {
	color: var(--c-ink);
}

/* Sous 720px, un tableau à cinq colonnes n'est plus lisible : il défile
   horizontalement plutôt que d'écraser ses cellules. */
@media (max-width: 720px) {
	.bonsetup__ecrans {
		table-layout: auto;
		/* 34rem avant compactage : les cellules resserrées demandent moins
		   de large, donc moins de chemin à faire défiler. */
		min-width: 31rem;
	}

	/* La colonne de gauche reste en place pendant le defilement horizontal.
	   Sans elle, des qu'on faisait glisser le tableau pour lire la finesse du
	   texte ou le verdict, la diagonale sortait de l'ecran : on lisait une
	   ligne sans plus savoir de quel ecran elle parlait. */
	.bonsetup__ecrans thead th:first-child,
	.bonsetup__ecrans tbody th {
		position: sticky;
		inset-inline-start: 0;
		z-index: 1;
		background: var(--c-surface);
	}

	/* Le liseré des formats retenus vit sur la ligne, qui defile : on le
	   reporte sur la cellule figee pour qu'il reste lisible. */
	.bonsetup__ecrans tbody .bonsetup__ecran--oui th {
		background: var(--c-rouge-soft);
		box-shadow: inset 3px 0 0 var(--c-rouge);
	}

	/* Filet de separation, pour que la colonne figee se lise comme telle
	   quand le reste glisse dessous. */
	.bonsetup__ecrans thead th:first-child::after,
	.bonsetup__ecrans tbody th::after {
		content: "";
		position: absolute;
		inset-block: 0;
		inset-inline-end: 0;
		inline-size: 1px;
		background: var(--c-line);
	}
}

/* ---------- Budget ---------- */

.bonsetup__total {
	margin: 0 0 4px;
	font-size: 15px;
	color: var(--c-muted);
}

.bonsetup__total b {
	display: block;
	font-family: var(--c-mono);
	font-weight: 600;
	font-size: clamp(28px, 3.2vw, 40px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--c-ink);
}

.bonsetup__jour {
	font-family: var(--c-mono);
	font-size: 14.5px;
	font-weight: 500;
	color: var(--c-rouge-txt);
	margin: 0 0 18px;
}

.bonsetup__stack-wrap {
	position: relative;
	margin-bottom: 14px;
}

.bonsetup__stack {
	display: flex;
	gap: 2px;
	height: 34px;
	border-radius: 8px;
	overflow: hidden;
}

.bonsetup__seg {
	height: 100%;
	min-width: 3px;
	transition: flex-basis 0.18s ease-out;
	cursor: default;
}

.bonsetup__seg:focus-visible {
	outline: 2px solid var(--c-ink);
	outline-offset: 2px;
}

.bonsetup__seg[data-slot="1"], .bonsetup__pastille[data-slot="1"] { background: var(--bs-s1); }
.bonsetup__seg[data-slot="2"], .bonsetup__pastille[data-slot="2"] { background: var(--bs-s2); }
.bonsetup__seg[data-slot="3"], .bonsetup__pastille[data-slot="3"] { background: var(--bs-s3); }
.bonsetup__seg[data-slot="4"], .bonsetup__pastille[data-slot="4"] { background: var(--bs-s4); }
.bonsetup__seg[data-slot="5"], .bonsetup__pastille[data-slot="5"] { background: var(--bs-s5); }

.bonsetup__tip {
	position: absolute;
	bottom: calc(100% + 8px);
	transform: translateX(-50%);
	z-index: 3;
	padding: 7px 10px;
	border-radius: 8px;
	background: var(--c-tip-bg);
	color: var(--c-tip-ink);
	font-size: 13px;
	white-space: nowrap;
}

.bonsetup__tip b { font-weight: 700; }
.bonsetup__tip span { opacity: 0.7; }
.bonsetup__tip[hidden] { display: none; }

/* Légende */

.bonsetup__legende {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
	margin: 0 0 12px;
	padding: 0;
}

.bonsetup__cle {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
	font-size: 14px;
}

.bonsetup__pastille {
	width: 11px;
	height: 11px;
	border-radius: 3px;
	flex: none;
	align-self: center;
}

.bonsetup__cle-nom { color: var(--c-muted); }

.bonsetup__cle-val {
	font-family: var(--c-mono);
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	color: var(--c-ink);
}

.bonsetup__cle-pct {
	color: var(--c-muted);
	font-weight: 400;
	margin-left: 5px;
}

/* Vue tableau repliable */

.bonsetup__tableau summary {
	font-size: 14px;
	font-weight: 600;
	color: var(--c-muted);
	cursor: pointer;
	padding: 6px 0;
	list-style: none;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bonsetup__tableau summary:hover { color: var(--c-ink); }
.bonsetup__tableau summary::-webkit-details-marker { display: none; }
.bonsetup__tableau summary::marker { content: ""; }

.bonsetup__tableau table { margin-top: 10px; }

.bonsetup__tableau th,
.bonsetup__tableau td {
	padding: 11px 14px 11px 0;
	vertical-align: middle;
}

.bonsetup__tableau th[scope="row"] {
	font-family: var(--c-font);
	font-size: 14px;
	font-weight: 400;
	text-transform: none;
	letter-spacing: 0;
	color: var(--c-ink);
}

.bonsetup__tr-total th,
.bonsetup__tr-total td {
	font-weight: 700;
	border-bottom: 0;
	border-top: 1px solid var(--c-muted);
}

/* ---------- Recommandations et liste de vérification ---------- */

.bonsetup__reco,
.bonsetup__groupe ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.bonsetup__reco li,
.bonsetup__groupe li {
	position: relative;
	padding: 0 0 0 22px;
	color: var(--c-body);
}

.bonsetup__reco li {
	margin: 0 0 12px;
	font-size: 15.5px;
}

.bonsetup__groupe li {
	margin: 0 0 8px;
	font-size: 15px;
}

.bonsetup__reco li::before,
.bonsetup__groupe li::before {
	content: "";
	position: absolute;
	left: 0;
	width: 7px;
	height: 7px;
	border-radius: 2px;
}

/* Une recommandation est une affirmation : puce pleine.
   Un point de vérification est une case à cocher : puce évidée. */
.bonsetup__reco li::before {
	top: 0.55em;
	background: var(--c-vif);
}

.bonsetup__groupe li::before {
	top: 0.5em;
	border: 1.5px solid var(--c-muted);
}

.bonsetup__groupe {
	margin: 0 0 20px;
}

.bonsetup__groupe h4 {
	font-size: 16.5px;
	font-weight: 700;
	color: var(--c-ink);
	margin: 0 0 10px;
}

/* Boutons d'action */

.bonsetup__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 16px;
}

.bonsetup__copier {
	min-height: 42px;
	padding: 9px 18px;
	font-family: var(--c-font);
	font-size: 14.5px;
	font-weight: 600;
	color: var(--c-ink);
	background: transparent;
	border: 1px solid var(--c-line);
	border-radius: 10px;
	cursor: pointer;
	transition: background 0.12s ease, border-color 0.12s ease;
}

.bonsetup__copier:hover {
	background: var(--c-hover);
	border-color: var(--c-muted);
}

.bonsetup__copie-ok {
	font-family: var(--c-mono);
	font-size: 14px;
	font-weight: 500;
	color: var(--c-ok);
}

/* ---------- Panneaux repliables ----------
   Le script d'interface du thème enfant insère un <button> dans le titre et
   pose ces classes. Sans lui, tout reste visible : aucune dépendance risquée. */

.bs-repliable .bonsetup__bascule {
	display: flex;
	justify-content: space-between;
	align-items: center;
	width: 100%;
	padding: 0;
	margin: 0;
	font: inherit;
	color: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	background: none;
	border: 0;
	cursor: pointer;
	user-select: none;
	transition: color 0.12s ease;
	/* Un <button> centre son texte par defaut : sur un titre qui passe sur
	   deux lignes (mobile), les lignes partaient au centre. */
	text-align: left;
}

.bs-repliable .bonsetup__bascule:hover {
	color: var(--c-ink);
}

.bs-repliable .bonsetup__bascule::after {
	content: "";
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.15s ease;
	margin-left: 12px;
	flex: none;
}

.bs-repliable.bs-ferme .bonsetup__bascule::after {
	transform: rotate(-45deg);
}

.bs-repliable.bs-ferme .bonsetup__h {
	margin-bottom: 0;
}

.bs-repliable.bs-ferme > *:not(.bonsetup__h) {
	display: none;
}

/* Replies, les panneaux se resserrent : la pile de titres reste compacte,
   un panneau ouvert retrouve la respiration normale. */
.bs-repliable.bs-ferme,
.bs-repliable.bs-ferme + .bonsetup__panel {
	padding-top: 12px;
}

@media (prefers-reduced-motion: reduce) {
	.bonsetup__seg,
	.bonsetup__copier,
	.bonsetup__field--case input[type="checkbox"],
	.bs-repliable .bonsetup__bascule,
	.bs-repliable .bonsetup__bascule::after {
		transition: none;
	}
}

/* =========================================================================
   Note de palette — répartition du budget

   Le configurateur affichait autrefois quatre nuances d'un même rouge plus
   un gris : une échelle de valeurs appliquée à cinq postes qui n'ont aucun
   ordre naturel. Deux postes voisins devenaient indiscernables, et le rouge
   entrait en concurrence avec la couleur d'action de la marque.

   Cinq teintes distinctes, validées au calcul sur les deux surfaces de rendu
   (bande de clarté, plancher de chroma, séparation pour les daltonismes,
   plancher vision normale, contraste) :
     clair, sur blanc     — séparation daltonisme la plus faible ΔE 9,1
     sombre, sur #17171A  — ΔE 8,4, contraste ≥ 3:1 pour les cinq

   Trois teintes claires passent sous 3:1 sur blanc : c'est admis ici parce
   que la légende porte le nom, le montant et le pourcentage en toutes
   lettres, et qu'un tableau reprend les mêmes chiffres. La couleur ne porte
   jamais l'information seule.

   Le rouge de la marque reste réservé à l'action : il n'apparaît pas ici.
   Les valeurs sombres sont posées par le thème enfant sur `:root`, via les
   tokens `--bs-poste-*`.
   ========================================================================= */

/* ---------- Liens vers les guides ----------
   Depuis que les recommandations renvoient vers les articles, le configurateur
   contient des liens. La regle de soulignement du theme les exclut
   explicitement (`.bs-corps p:not(.bonsetup *) a`), exclusion qui se justifiait
   tant qu'il n'y en avait aucun. Il faut donc la reposer ici, pour la raison
   que le theme documente lui-meme : la couleur seule ne distingue pas un lien
   pour un lecteur daltonien. La couleur, elle, vient de la regle globale. */
.bonsetup__alerte a,
.bonsetup__reco a,
.bonsetup__existant a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.06em;
}

.bonsetup__alerte a:hover,
.bonsetup__reco a:hover,
.bonsetup__existant a:hover {
	text-decoration-thickness: 0.12em;
}

/* ---------- Affordance de défilement du tableau (mobile) ----------
   Sous 720px le tableau défile horizontalement, mais rien ne le disait :
   les colonnes coupées au bord passaient pour la fin du tableau. Trois
   signaux, tous en CSS pur :
     1. une mention explicite au-dessus du tableau ;
     2. des ombres aux bords qui n'apparaissent que s'il reste du contenu
        hors champ (backgrounds en attachment local/scroll : les fonds
        « local » suivent le contenu et recouvrent l'ombre « scroll »
        quand on atteint le bout — technique dite des scrolling shadows) ;
     3. une barre de défilement fine et toujours visible, là où iOS la
        masque par défaut. */
@media (max-width: 720px) {

	.bonsetup__scroll::before {
		content: "Fais glisser le tableau pour tout voir \2192";
		display: block;
		font-family: var(--c-mono);
		font-size: 0.72rem;
		letter-spacing: 0.04em;
		color: var(--c-muted);
		margin-bottom: 0.5rem;
	}

	.bonsetup__scroll {
		background:
			linear-gradient(to right, var(--c-surface) 35%, transparent) left/3rem 100%,
			linear-gradient(to left, var(--c-surface) 35%, transparent) right/3rem 100%,
			radial-gradient(farthest-side at 0 50%, color-mix(in srgb, var(--c-mob) 55%, transparent), transparent) left/1rem 100%,
			radial-gradient(farthest-side at 100% 50%, color-mix(in srgb, var(--c-mob) 55%, transparent), transparent) right/1rem 100%;
		background-repeat: no-repeat;
		background-attachment: local, local, scroll, scroll;
		scrollbar-width: thin;
		scrollbar-color: var(--c-mob) transparent;
		padding-bottom: 0.35rem;
	}

	.bonsetup__scroll::-webkit-scrollbar {
		height: 5px;
	}
	.bonsetup__scroll::-webkit-scrollbar-thumb {
		background: var(--c-mob);
		border-radius: 3px;
	}
	.bonsetup__scroll::-webkit-scrollbar-track {
		background: transparent;
	}
}

/* ---------- Habillage « cockpit » -- pose le 2026-08-24 ----------
   Direction validée par le client (option « Cockpit ») : le configurateur
   devient un panneau encadré à grille pointillée, et chaque segment ou
   pastille reçoit un fin cerclage pour rester lisible quelle que soit sa
   teinte. Tout est exprimé en tokens ou surchargé par les mêmes gardes de
   thème que le reste du site : le panneau suit le mode clair/sombre.
   2026-08-25, demande client : la palette monochrome + rouge des postes
   budgétaires est retirée, les segments reprennent les cinq couleurs
   distinctes des tokens --bs-poste-* du thème (clair + sombre).
   Retrait : supprimer ce bloc jusqu'à la fin du fichier. */
.bonsetup {
	--bs-cercle: rgba(11, 13, 15, 0.14);
	background: var(--c-tile);
	background-image: radial-gradient(var(--c-grille) 1.3px, transparent 1.3px);
	background-size: 34px 34px;
	border: 1px solid var(--c-line);
	border-radius: 18px;
	padding: clamp(16px, 3vw, 30px);
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bonsetup {
		--bs-cercle: rgba(255, 255, 255, 0.18);
		background-color: #0C0C0E;
	}
}
:root[data-theme="dark"] .bonsetup {
	--bs-cercle: rgba(255, 255, 255, 0.18);
	background-color: #0C0C0E;
}

.bonsetup__seg,
.bonsetup__pastille {
	box-shadow: inset 0 0 0 1px var(--bs-cercle);
}