/* Charte de Bon Setup - reprise telle quelle de l ancien theme enfant. */

/* ==========================================================================
   Polices — auto-hébergées

   Elles étaient chargées par `@import` depuis fonts.googleapis.com. Deux
   raisons de ne plus le faire : un `@import` est sérialisé (le navigateur
   doit d'abord lire cette feuille, puis en demander une autre, puis les
   fichiers de police), et l'appel à un serveur Google transmet l'adresse IP
   du visiteur à un tiers — ce qui, sans consentement, est exactement ce que
   la CNIL et plusieurs juridictions européennes ont sanctionné.

   Sous-ensemble latin uniquement : il couvre le français, les guillemets
   typographiques, l'euro et le prime (′) du tableau des écrans. Inter est
   une police variable — un seul fichier pour les cinq graisses utilisées.
   ========================================================================== */

/* Deux familles de texte, pour deux usages.

   « Instrument Sans » porte l'interface : navigation, cartes, configurateur,
   titres. « Literata » porte le corps des articles — elle est dessinee pour
   la lecture a l'ecran et fait entrer 62 caracteres la ou Instrument en met
   52 a largeur egale, soit moins de lignes sur un guide de six minutes.

   Les deux fichiers sont sous-ensembles au latin utilise par le site et leurs
   axes variables pinces (opsz fixe, wght 400-700) : Literata passe de 107 a
   32 Ko, Instrument de 55 a 27 Ko. Auto-hebergees, comme toujours ici : un
   appel a un serveur de police transmet l'adresse IP du visiteur a un tiers. */

@font-face {
	font-family: "Instrument Sans";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/instrument-sans-latin-var.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Literata";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("../fonts/literata-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("../fonts/space-grotesk-latin-var.woff2") format("woff2");
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-500-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "IBM Plex Mono";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   Jetons de design — direction « Nuit technique, claire & sombre »

   Ils vivent sur `:root` et non sur une classe de page : le configurateur
   apparaît sur /configurateur/ et dans les articles, où aucune enveloppe
   `.bs-home` n'existe. Tant que les jetons y étaient enfermés, ces pages
   retombaient sur les valeurs de repli du plugin — donc sur une carte
   blanche même en mode sombre.

   Le mode sombre ne redéfinit que les jetons ; aucune règle de composant
   n'a besoin d'être dupliquée.
   ========================================================================== */

:root {
	/* Surfaces claires */
	--bs-surface: #FFFFFF;
	--bs-ink: #0B0D0F;
	--bs-body: #4A4A52;
	--bs-muted: #63636B;
	--bs-line: #E6E4E0;
	--bs-line-faint: #D8D5D0;
	--bs-tile: #F7F6F4;
	--bs-mob: #C9C6C0;
	--bs-hover: rgba(18, 18, 20, 0.05);
	--bs-grille: rgba(18, 18, 20, 0.06);
	--bs-dot-moyen: #B4B2AD;
	--bs-dot-non: #E0DDD8;
	--bs-tip-bg: #0B0D0F;
	--bs-tip-ink: #FFFFFF;

	/* Panneaux « instrument » — sombres dans les deux modes, par parti pris */
	--bs-dark: #0C0C0E;
	--bs-dark-2: #17171A;
	--bs-dark-line: #28282D;
	--bs-dark-text: #F2F1EF;
	--bs-dark-muted: #9C9BA3;

	--bs-rouge: #E60012;
	--bs-rouge-vif: #FF2A38;
	--bs-rouge-soft: #FDE8EA;
	/* Variante assombrie pour le très petit corps (5,9:1). */
	--bs-rouge-txt: #C4000F;
	--bs-ok: #167A45;

	--bs-radius: 18px;
	--bs-shadow: 0 1px 2px rgba(18, 18, 20, 0.05), 0 10px 32px rgba(18, 18, 20, 0.08);
	--bs-font: "Instrument Sans", system-ui, -apple-system, sans-serif;
	/* Corps des articles uniquement. */
	--bs-lecture: "Literata", Georgia, serif;
	/* 2026-08-27 : les étiquettes et valeurs passent en Instrument Sans
	   (retour lecteur : la mono + majuscules espacées marquait « IA »). Le
	   token est conservé pour ne toucher aucun consommateur ; les @font-face
	   Plex restent déclarées mais dormantes, un navigateur ne télécharge pas
	   une police inutilisée. Retour arrière : remettre "IBM Plex Mono" ici. */
	--bs-mono: "Space Grotesk", var(--bs-font);

	/* Cinq postes budgétaires — teintes catégorielles validées au calcul.
	   Voir la note de palette en fin de la feuille du configurateur.
	   2026-08-26 : vert, ambre et rose assombris pour passer les 3:1 sur
	   blanc que la note admettait en dessous — revérifié au calcul, les
	   ΔE minimaux (normal, deutan, protan) sont inchangés. */
	--bs-poste-1: #2a78d6;
	--bs-poste-2: #0e9463;
	--bs-poste-3: #c96b03;
	--bs-poste-4: #4a3aa7;
	--bs-poste-5: #d4517f;

	/* --------------------------------------------------------------------
	   Une seule ligne de gauche pour tout le site.

	   Le site empilait cinq largeurs de conteneur : 1680 pour l'en-tête et
	   le pied, 1400 pour les articles, 1320 pour les pages, 1180 puis 1080
	   pour les pages sans latérale. Chacune étant centrée sur une largeur
	   différente, rien ne s'alignait : mesuré sur un article en 1905px, le
	   logo commençait à 133, le titre à 273 et le texte à 410. Le regard n'a
	   jamais trouvé de verticale à laquelle se raccrocher, et la page
	   paraissait tassée à gauche.

	   Une largeur unique règle le tout : l'en-tête, le pied, l'accueil, les
	   pages et les articles partent de la même verticale.

	   Attention : l'alignement seul ne suffit pas. Sur les pages sans barre
	   latérale, aligner tout à gauche laissait le texte s'arrêter à 60 % de
	   la colonne pendant que le sommaire et le configurateur la remplissaient
	   — tout le blanc d'un seul côté se lit comme un défaut. Ces pages ont
	   donc un bloc de lecture *centré* (voir plus bas).
	   -------------------------------------------------------------------- */
	--bs-conteneur: min(1400px, 94vw);
}

/* ==========================================================================
   Alignement de Foxiz sur le système de design

   Le thème arrive avec ses couleurs de démonstration, jamais changées : son
   accent `--g-color` vaut #ff184e, un rose magenta, employé 173 fois dans sa
   feuille (liens, boutons, soulignés, séparateur de recherche, survols).
   À côté du rouge de la marque, deux rouges concurrents cohabitaient sur la
   même page.

   On redéfinit ses jetons plutôt que ses règles : la feuille enfant se charge
   après celle du thème, donc à spécificité égale c'est elle qui l'emporte, et
   les 173 usages suivent d'un coup. Ça survivra à ses mises à jour.
   ========================================================================== */

:root {
	--g-color: var(--bs-rouge);
	--g-color-90: #E60012e6;
	--body-fcolor: var(--bs-ink);
	--dark-accent: #17171A;
	--dark-accent-0: #17171A00;
	--dark-accent-90: #17171Af2;
	--excerpt-color: #63636B;
	--meta-fcolor: #63636B;
	/* Le dégradé d'indicateur partait de rose et finissait en bleu. */
	--indicator-bg-from: var(--bs-rouge);
	--indicator-bg-to: var(--bs-rouge-vif);
}


/* ==========================================================================
   Page d'accueil
   Page claire et lisible ; le noir est réservé à l'« instrument » : hero,
   schéma, panneaux de résultats. Un seul accent rouge, chiffres en mono.
   ========================================================================== */

/* Le gabarit pleine largeur d'Elementor n'apporte aucun conteneur : `.bs-home`
   reproduit exactement celui du thème (`--bs-conteneur` + 20px de marge
   interne, comme `.rb-container`), pour que l'accueil parte de la même
   verticale que l'en-tête et que les articles. */
.bs-home {
	width: var(--bs-conteneur);
	margin-inline: auto;
	padding: 1.5rem 20px 3rem;
	font-family: var(--bs-font);
	color: var(--bs-ink);
}

.bs-home .bonsetup {
	max-width: none;
}

/* Sur téléphone, l'accueil perdait 62 px de largeur en marges : 3 vw de
   conteneur plus 20 px de retrait, de chaque côté. Le panneau d'accroche
   paraissait flotter au milieu de l'écran au lieu de l'occuper. On desserre
   les deux, uniquement sous 700 px : le conteneur passe à 97 vw et le
   retrait à 12 px, ce qui rend une trentaine de pixels au contenu sans
   coller le texte au bord. Retrait : supprimer ce bloc. */
@media (max-width: 700px) {
	:root { --bs-conteneur: min(1400px, 97vw); }
	.bs-home { padding-inline: 12px; }
	.bs-hero {
		/* La courbe se resserre avec la carte, sinon elle mange le titre. */
		border-radius: 20px;
		padding-inline: 1.35rem;
	}
}

/* ---------- Accroche : panneau sombre sur page claire ---------- */

.bs-hero {
	position: relative;
	overflow: hidden;
	background: linear-gradient(180deg, var(--bs-dark-2), var(--bs-dark));
	color: var(--bs-dark-text);
	padding: clamp(3rem, 7vw, 5.5rem) clamp(1.25rem, 4vw, 3rem);
	border-radius: 24px;
	margin-bottom: 2.5rem;
	box-shadow: 0 24px 60px rgba(18, 18, 20, 0.18);
}


/* Grille pointillée de l'instrument, estompée vers les bords. */
.bs-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: radial-gradient(rgba(242, 241, 239, 0.08) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse 90% 90% at 70% 20%, #000 25%, transparent 75%);
	mask-image: radial-gradient(ellipse 90% 90% at 70% 20%, #000 25%, transparent 75%);
	pointer-events: none;
}

/* Halo rouge discret derrière le bouton. */
.bs-hero::after {
	content: "";
	position: absolute;
	inset: auto auto -30% -12%;
	width: 46rem;
	height: 46rem;
	background: radial-gradient(circle, rgba(255, 75, 51, 0.13) 0%, rgba(255, 75, 51, 0) 62%);
	pointer-events: none;
}

.bs-hero__inner {
	position: relative;
	z-index: 1;
	max-width: 46rem;
}

/* L'accroche laissait un vide marqué entre le texte et le schéma : le bloc
   de texte était borné bien en deçà de la place disponible. */
@media (min-width: 1200px) {
	.bs-hero__inner { max-width: 58rem; }
}

.bs-hero h1 {
	font-family: var(--bs-font);
	font-size: clamp(1.9rem, 4.2vw, 3.1rem);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	margin: 0 0 1.2rem;
	color: var(--bs-dark-text);
}

.bs-hero h1 em {
	font-style: normal;
	color: var(--bs-rouge-vif);
}

.bs-hero p {
	font-size: clamp(1rem, 1.6vw, 1.1rem);
	line-height: 1.6;
	margin: 0 0 1.9rem;
	color: var(--bs-dark-muted);
}

/* La note restait collée sous le bouton malgré la marge : « .bs-hero p »
   (0,1,1) l'emporte sur « .bs-hero__note » (0,1,0) et remettait la marge
   haute à 0, en poussant l'écart en dessous là où il ne sert à rien. On
   qualifie donc le sélecteur. La largeur reste bornée : en chasse fixe,
   une ligne longue devient pénible et se coupait après « envoyé ». */
.bs-hero p.bs-hero__note {
	margin: 1.75rem 0 0;
	max-width: 46ch;
	font-family: var(--bs-mono);
	font-size: 0.78rem;
	font-weight: 500;
	line-height: 1.7;
	color: var(--bs-dark-muted);
}

.bs-hero__note::before {
	content: "";
	display: inline-block;
	inline-size: 0.42em;
	block-size: 0.42em;
	border-radius: 50%;
	background: currentColor;
	margin-inline-end: 0.5em;
	vertical-align: 0.08em;
	color: #7BD88F;
}

/* Schéma en filigrane : la personne et le regard en rouge, le mobilier clair. */
.bs-hero__schema {
	position: absolute;
	right: 3%;
	bottom: 9%;
	width: min(42%, 29rem);
	opacity: 0.85;
	pointer-events: none;
}

.bs-hero__schema .t { stroke: #3A3A41; stroke-width: 2; fill: none; stroke-linecap: round; }
.bs-hero__schema .e { stroke: rgba(242, 241, 239, 0.85); stroke-width: 4; stroke-linecap: round; }
.bs-hero__schema .c { stroke: var(--bs-rouge-vif); stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bs-hero__schema .d { fill: rgba(242, 241, 239, 0.9); }
.bs-hero__schema .r { stroke: var(--bs-rouge-vif); stroke-width: 1.5; stroke-dasharray: 4 5; opacity: 0.85; }

@media (max-width: 60rem) {
	.bs-hero__schema { display: none; }
}

.bs-cta {
	display: inline-block;
	background: var(--bs-rouge);
	color: #fff !important;
	padding: 0.85rem 1.5rem;
	border-radius: 10px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none !important;
	box-shadow: 0 0 0 1px rgba(255, 75, 51, 0.4), 0 8px 28px rgba(255, 75, 51, 0.25);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.bs-cta:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
	color: #fff !important;
}

/* ---------- Titres de section ---------- */

.bs-section {
	margin: 3.4rem 0;
}

.bs-section__head {
	margin-bottom: 1.6rem;
}

.bs-section__head h2 {
	font-family: var(--bs-font);
	font-size: clamp(1.5rem, 2.4vw, 1.9rem);
	font-weight: 800;
	letter-spacing: -0.025em;
	margin: 0 0 0.4rem;
	color: var(--bs-ink);
}

.bs-section__head p {
	margin: 0;
	color: var(--bs-muted);
	font-size: 0.98rem;
	max-width: 44rem;
}

/* ---------- Grille des setups ---------- */

.bs-grille {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1rem;
}

.bs-carte {
	display: flex;
	flex-direction: column;
	padding: 1.5rem 1.6rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	text-decoration: none !important;
	color: inherit;
	transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.bs-carte:hover {
	transform: translateY(-3px);
	box-shadow: 0 2px 4px rgba(18, 18, 20, 0.05), 0 18px 44px rgba(18, 18, 20, 0.12);
}

.bs-carte__etiquette {
	align-self: flex-start;
	font-family: var(--bs-mono);
	font-size: 0.68rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--bs-rouge-txt);
	background: var(--bs-rouge-soft);
	border-radius: 6px;
	padding: 0.3rem 0.6rem;
	margin-bottom: 0.85rem;
}

.bs-carte :is(h2, h3) {
	font-family: var(--bs-font);
	font-size: 1.14rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	margin: 0 0 0.5rem;
	color: var(--bs-ink);
}

.bs-carte p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--bs-muted);
}

/* Carte phare : le seul aplat sombre de la grille. */
.bs-carte--phare {
	background: linear-gradient(180deg, var(--bs-dark-2), var(--bs-dark));
	border-color: var(--bs-dark);
}

.bs-carte--phare :is(h2, h3) { color: var(--bs-dark-text); }
.bs-carte--phare p { color: var(--bs-dark-muted); }
.bs-carte--phare .bs-carte__etiquette {
	color: var(--bs-rouge-vif);
	background: rgba(255, 75, 51, 0.14);
}

/* Équilibre de la grille en large : la carte phare occupe deux colonnes. */
@media (min-width: 60rem) {
	.bs-grille {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.bs-carte--phare {
		grid-column: span 2;
	}
}

/* ---------- Liste des guides ---------- */

.bs-guides {
	display: grid;
	/* `min()` borne le minimum à la largeur réellement disponible : sans lui,
	   une colonne de 20rem reste à 320px dans un conteneur plus étroit et fait
	   défiler la page. Visible dès 320px de viewport, mesuré le 27 août. */
	grid-template-columns: repeat(auto-fit, minmax(min(20rem, 100%), 1fr));
	gap: 0.15rem 2.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-guides li {
	border-bottom: 1px solid var(--bs-line);
}

.bs-guides a {
	display: block;
	padding: 0.85rem 0;
	text-decoration: none !important;
	color: var(--bs-ink);
	font-size: 0.98rem;
	font-weight: 500;
	line-height: 1.4;
	transition: padding-left 0.15s ease-out, color 0.15s ease-out;
}

.bs-guides a:hover {
	padding-left: 0.4rem;
	color: var(--bs-rouge-txt);
}

/* ---------- Bloc de confiance ---------- */

.bs-confiance {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	padding: clamp(1.5rem, 3vw, 2.2rem);
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.6rem;
}

.bs-confiance h3 {
	font-family: var(--bs-font);
	font-size: 1rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
	color: var(--bs-ink);
}

.bs-confiance p {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.6;
	color: var(--bs-muted);
}

.bs-confiance a {
	color: var(--bs-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ==========================================================================
   Header du site : logo agrandi (le SVG Foxiz sortait à 46px / 38px mobile,
   trop discret).

   Foxiz plafonne le logo par `max-height` (--hd-logo-height ET --nav-height) :
   c'est `max-height` qu'il faut relever, `height` seul est toujours perdant.
   `width: auto` préserve les proportions du SVG.
   ========================================================================== */

/* La barre doit accueillir le logo : Foxiz la fixe à 60px et rogne tout ce
   qui dépasse. On relève les deux variables ensemble, sinon le logo est
   plafonné sans qu'aucun `height` n'y change quoi que ce soit. */
:root {
	--nav-height: 92px;
	--hd-logo-height: 72px;
}




/* ==========================================================================
   Encarts produits affiliés — [bs_produit]
   Une seule action claire par encart, bénéfices concrets liés aux cotes du
   lecteur, réassurance factuelle. Mention d'affiliation systématique — et
   lisible : elle est une obligation, pas une note de bas de page.
   ========================================================================== */

.bs-produit {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-shadow);
	padding: 1.6rem 1.7rem;
	margin: 2rem 0;
	max-width: 680px;
	font-family: var(--bs-font);
}

/* ---- Blocs larges (2026-08-27, demande client) -----------------------
   Les pages paraissaient étroites face à l'accueil. La colonne de texte ne
   bouge pas, son plafond de lecture est documenté plus haut ; ce sont les
   blocs qui occupent le conteneur, comme les cartes de l'accueil : les
   encarts produits sortent de la colonne par la grille de contenu, et
   leurs points passent sur deux colonnes pour ne pas s'étirer. */
.bs-corps > .bs-produit {
	grid-column: bord-gauche / bord-droit;
	justify-self: center;
	width: 100%;
	max-width: var(--bs-mesure);
}
@media (min-width: 1100px) {
	.bs-corps > .bs-produit .bs-produit__points {
		columns: 2;
		column-gap: 2.4rem;
	}
	.bs-corps > .bs-produit .bs-produit__points li {
		break-inside: avoid;
	}
}

.bs-produit__contexte {
	display: inline-block;
	font-family: var(--bs-mono);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--bs-rouge-txt);
	background: var(--bs-rouge-soft);
	border-radius: 6px;
	padding: 0.32rem 0.65rem;
	margin-bottom: 0.9rem;
}

.bs-produit__titre {
	font-size: 1.25rem;
	font-weight: 700;
	letter-spacing: -0.015em;
	line-height: 1.3;
	color: var(--bs-ink);
	margin: 0 0 0.5rem;
}

.bs-produit__pourquoi {
	font-size: 1rem;
	line-height: 1.6;
	color: var(--bs-body);
	margin: 0 0 0.9rem;
}

.bs-produit__points {
	list-style: none;
	margin: 0 0 1.3rem;
	padding: 0;
}

.bs-produit__points li {
	position: relative;
	padding-left: 24px;
	margin-bottom: 0.45rem;
	font-size: 0.95rem;
	color: var(--bs-body);
}

.bs-produit__points li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: 0.42em;
	width: 6px;
	height: 11px;
	border-right: 2.5px solid var(--bs-rouge);
	border-bottom: 2.5px solid var(--bs-rouge);
	transform: rotate(40deg);
}

/* Une réserve porte un tiret gris, jamais la coche rouge : une limite marquée
   comme un avantage se retourne contre la fiche qui la présente. Le texte
   passe aussi en gris, pour que l'œil trie avant même de lire. */
.bs-produit__points li.bs-produit__point--reserve {
	color: var(--bs-muted);
}

.bs-produit__points li.bs-produit__point--reserve::before {
	content: "";
	left: 1px;
	top: 0.72em;
	width: 11px;
	height: 0;
	border-right: 0;
	border-bottom: 2.5px solid var(--bs-muted);
	transform: none;
}

.bs-produit__action {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.9rem;
}

.bs-produit__btn {
	display: inline-block;
	background: var(--bs-rouge);
	color: #fff !important;
	padding: 0.85rem 1.6rem;
	border-radius: 10px;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none !important;
	box-shadow: 0 0 0 1px rgba(255, 75, 51, 0.4), 0 8px 28px rgba(255, 75, 51, 0.22);
	transition: filter 0.15s ease, transform 0.15s ease;
}

.bs-produit__btn:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.bs-produit__mention {
	font-size: 0.78rem;
	color: var(--bs-muted);
	margin: 0.9rem 0 0;
}

/* ==========================================================================
   Articles et guides — rééquilibrage des colonnes
   --------------------------------------------------------------------------
   Mesures avant correction sur 1680px : `.s-ct` occupait 66,67 % (1077px), la
   barre latérale 33,33 % (539px) pour deux widgets, et Foxiz plafonnait la
   colonne de lecture à 760px. Le reste devenait de la gouttière : d'où le
   bloc étroit perdu au milieu du vide.

   Trois leviers, mesurés et non supposés :
     1. la latérale passe d'un tiers de la page à une largeur fixe raisonnable,
     2. la colonne d'article récupère la place ainsi libérée,
     3. le plafond de lecture monte de 760 à 820px — environ 84 caractères
        par ligne, la limite haute du confort. Au-delà, l'œil perd le début de
        la ligne suivante ; on ne la franchit pas.

   Ces règles ne visent que `body.single` : les Pages (accueil, configurateur)
   emploient le gabarit pleine largeur d'Elementor et ne portent pas cette
   classe.
   ========================================================================== */

/* Corps du texte des articles, tous écrans. Foxiz descend à 15px sur mobile,
   ce qui est petit pour du texte suivi ; 17px reste confortable sans allonger
   les lignes, l'écran étant étroit. Les grands écrans montent à 18px. */

@media (min-width: 1100px) {

	
	
	/* Longueur de ligne, mesurée et non supposée.
	   À 16px cette police fait 7,4px par caractère : la colonne de 820px
	   donnait 108 caractères par ligne, très au-delà du confort de lecture
	   (45 à 85). On monte le corps à 18px — un texte de fond se lit mieux
	   ainsi — et on ramène la colonne à 720px, soit environ 85 caractères.

	   Foxiz centrait par ailleurs cette colonne avec `margin: 0 59px`, ce qui
	   décalait le texte de son propre titre sans raison visible : on la cale
	   à gauche, l'espace restant devenant la gouttière avant la latérale. */
	
	
	/* Les éléments qui gagnent à être larges débordent du plafond de lecture :
	   sommaire, tableaux, images, encarts produits. C'est là que la page se
	   remplit sans nuire au texte. */
	
	/* ---- Pages d'article sans barre latérale (les setups) ----
	   Foxiz y centre une colonne étroite dans un conteneur bien plus large :
	   le texte flottait à 150px du titre. On rend au bloc la largeur du
	   conteneur et on l'aligne sur le titre ; c'est le plafond de ligne, et
	   non la colonne, qui protège la lecture.
	   `--max-width-wo-sb` est le point d'entrée prévu par le thème : on
	   redéfinit la variable plutôt que de surcharger sa règle, ce qui
	   survivra à ses mises à jour. */
	/* ----------------------------------------------------------------------
	   Pages d'article sans barre latérale — colonne de lecture centrée

	   Sans latérale, rien n'occupe la droite : le titre, le sommaire et le
	   configurateur remplissaient les 1217px de la colonne pendant que les
	   paragraphes s'arrêtaient à 787px. Tout le blanc se retrouvait d'un
	   seul côté, et la page paraissait tassée à gauche.

	   Un blanc symétrique se lit comme une marge ; un blanc d'un seul côté
	   se lit comme un défaut. On resserre donc le bloc de lecture à la
	   mesure du texte et on le centre : titre, sommaire et paragraphes
	   partagent la même largeur, et le vide se répartit des deux côtés.
	   Ce qui gagne réellement à être large — le configurateur, les tableaux,
	   les images — en ressort, centré sur le même axe.
	   ---------------------------------------------------------------------- */
	
	/* 96px de rail de partage + les 720px de la colonne de lecture.

	   L'en-tête (badge de rubrique, titre, auteur, date) vit dans
	   `header.single-header`, hors du bloc de contenu : contraindre le seul
	   `h1` laissait le badge et la signature à l'ancienne largeur, soit
	   quatre bords gauches au lieu d'un. C'est le bloc entier qu'on resserre. */
	
	/* La mesure est désormais portée par le conteneur : le plafond en `ch`
	   posé sur chaque élément ferait doublon et rétrécirait encore le texte. */
	
	/* Débordement symétrique, centré sur l'axe de la page. */
	
	/* La colonne interne remplit le bloc désormais resserré ; Foxiz la
	   plafonnait pour son propre compte. */
	
	/* Cas général — pages AVEC latérale : le texte et la barre remplissent
	   déjà la largeur, le configurateur se contente de sa colonne. La règle
	   des pages sans latérale, plus spécifique, passe devant. */
	}

/* ==========================================================================
   Configurateur — intégration dans les gabarits du thème
   L'habillage du composant vit dans la feuille du plugin ; il ne reste ici
   que ce qui relève de l'insertion dans Foxiz.
   ========================================================================== */

/* Le configurateur pose ses propres marqueurs (carré rouge, case à cocher) ;
   Foxiz ajoutait les siens par-dessus — d'où les doubles puces sous « Ce que
   ça implique » et la liste de vérification. Sa règle `.entry-content ul`
   l'emporte sur `.bonsetup__reco` : il faut la neutraliser au même niveau. */

/* Le gabarit pleine largeur d'Elementor imprime le contenu sans aucun
   conteneur — un bloc posé nu part du bord gauche de l'écran (mesuré x=0,
   largeur 1680) avec un vide à droite. `.bs-page` fournit les mêmes bornes
   et gouttières que `.bs-home`, pour toute page bâtie sur ce gabarit.
   Enveloppe nommée plutôt que ciblage par identifiant de page : la règle ne
   dépend plus d'un `page-id` qui changerait à la moindre recréation. */
.bs-page {
	width: var(--bs-conteneur);
	margin-inline: auto;
	padding: 1.5rem 20px 3rem;
	font-family: var(--bs-font);
	color: var(--bs-ink);
}

.bs-page h1 {
	font-family: var(--bs-font);
	font-size: clamp(1.8rem, 3.4vw, 2.6rem);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	margin: 0 0 0.7rem;
	color: var(--bs-ink);
}


@media (prefers-reduced-motion: reduce) {
	.bs-cta,
	.bs-carte,
	.bs-guides a,
	.bs-produit__btn {
		transition: none;
	}
}

/* ---------------------------------------------------------------------------
   Accessibilité — corrections issues de l'audit du 2026-08-17.
   --------------------------------------------------------------------------- */

/* Lien d'évitement : hors écran, puis ramené à la prise de focus clavier. */
.bs-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--bs-encre, #111111);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

.bs-evitement:focus {
	left: 0;
	outline: 3px solid var(--bs-rouge, #E60012);
	outline-offset: 2px;
}

#bs-contenu:focus {
	outline: none;
}

/* Cibles tactiles : le minimum utilisable est 24 x 24 px (WCAG 2.2, 2.5.8).
   Mesuré à 345 px de large avant correction : cases à cocher 19 x 19, boutons
   d'accordéon 18 px de haut, liens de pied de page 16 px. Le configurateur
   s'utilise au doigt : une case de 19 px se rate une fois sur trois. */

.bonsetup input[type="checkbox"] {
	inline-size: 24px;
	block-size: 24px;
	margin: 1px;
	flex: 0 0 auto;
}

/* La case reste petite visuellement, mais toute l'étiquette devient cliquable
   et dépasse le seuil : c'est la zone que le doigt vise réellement. */
.bonsetup__field--case label,
.bonsetup label:has(> input[type="checkbox"]) {
	display: flex;
	align-items: center;
	gap: 10px;
	min-block-size: 28px;
	cursor: pointer;
}

/* Boutons d'accordéon des panneaux de résultats : classe relevée dans le
   DOM rendu, `.bonsetup__bascule`, portée par un <h3>. Mesurés à 18 px de
   haut avant correction. */
/* ---------------------------------------------------------------------------
   Pré-repli des panneaux, avant la première peinture.

   `configurateur-ui.js` replie trois panneaux au DOMContentLoaded. Jusqu'ici
   ils s'affichaient dépliés puis se refermaient : tout ce qui suivait
   remontait de 300 à 850px d'un coup. Mesuré le 29 août sur /configurateur/,
   un décalage cumulé de 0,166 sur bureau, qui coûtait 7 points de performance
   et faisait échouer la nouvelle catégorie « navigation agentique » de
   PageSpeed. Sur mobile ces panneaux sont hors du premier écran, d'où un 0
   trompeur.

   La règle ci-dessous applique l'état replié dès le CSS, donc sans décalage.
   Elle s'annule d'elle-même : `:not(.bs-repliable)` cesse de correspondre à
   l'instant où le script pose sa classe, et les règles normales de pliage
   reprennent la main. Un navigateur sans `:has()` retrouve simplement
   l'ancien comportement, sans rien casser.
   --------------------------------------------------------------------------- */
.bonsetup__panel:not(.bs-repliable):has( [data-stack] ) > *:not(.bonsetup__h),
.bonsetup__panel:not(.bs-repliable):has( [data-reco] ) > *:not(.bonsetup__h),
.bonsetup__panel:not(.bs-repliable):has( [data-checklist] ) > *:not(.bonsetup__h) {
	display: none;
}

.bonsetup__panel:not(.bs-repliable):has( [data-stack] ) .bonsetup__h,
.bonsetup__panel:not(.bs-repliable):has( [data-reco] ) .bonsetup__h,
.bonsetup__panel:not(.bs-repliable):has( [data-checklist] ) .bonsetup__h {
	margin-bottom: 0;
}

.bonsetup__bascule {
	min-block-size: 28px;
	padding-block: 6px;
}

/* Déclencheurs du menu et de la recherche mobile : 24 px pile au pixel près,
   soit la limite exacte. On prend un peu de marge. */

/* Les liens « À propos » et « Le détail » du pied de page font 16 px de haut,
   mais ce sont des liens en ligne dans une phrase : WCAG 2.5.8 les exempte
   nommément, et les épaissir casserait l'interlignage du paragraphe. Laissés
   tels quels, en connaissance de cause. */

/* Focus visible partout, y compris sur les contrôles du configurateur : le
   thème parent neutralise l'anneau par défaut sur plusieurs éléments. */
.bonsetup :is(a, button, input, select, [tabindex]):focus-visible,
.bs-cta:focus-visible {
	outline: 3px solid var(--bs-rouge, #E60012);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ---------------------------------------------------------------------------
   Envoi de la configuration par e-mail — posé le 2026-08-17.
   Reprend l'habillage du configurateur : mêmes rayons, même rouge, même
   chasse fixe sur les mentions. Le bloc doit se lire comme la suite naturelle
   du panneau, pas comme un encart rapporté.
   --------------------------------------------------------------------------- */

.bs-envoi {
	margin-top: 26px;
	padding-top: 22px;
	border-top: 1px solid var(--bs-trait, #E4E4E1);
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bs-envoi__titre {
	margin: 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bs-envoi__intro {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--bs-muted, #63636B);
	max-width: 58ch;
}

.bs-envoi__ligne {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.bs-envoi__label {
	font-size: 0.85rem;
	font-weight: 600;
}

.bs-envoi__champ {
	inline-size: 100%;
	max-inline-size: 22rem;
	min-block-size: 44px;
	padding: 10px 14px;
	border: 1px solid var(--bs-trait, #D9D9D4);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	background: #fff;
	color: var(--bs-encre, #111);
}

.bs-envoi__champ:focus-visible {
	outline: 3px solid var(--bs-rouge, #E60012);
	outline-offset: 2px;
	border-color: transparent;
}

/* La case reste facultative : elle ne doit ni précéder le champ, ni ressembler
   à une étape obligatoire du parcours. */
.bs-envoi__option {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	min-block-size: 28px;
	font-size: 0.88rem;
	line-height: 1.5;
	color: var(--bs-muted, #63636B);
	max-width: 56ch;
	cursor: pointer;
}

.bs-envoi__option input[type="checkbox"] {
	inline-size: 24px;
	block-size: 24px;
	margin: 0;
	flex: 0 0 auto;
}

.bs-envoi__bouton {
	align-self: flex-start;
	min-block-size: 44px;
	padding: 11px 22px;
	border: 0;
	border-radius: 10px;
	background: var(--bs-rouge, #E60012);
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 600;
	cursor: pointer;
	transition: filter 0.15s ease;
}

.bs-envoi__bouton:hover { filter: brightness(1.08); }
.bs-envoi__bouton:disabled { opacity: 0.6; cursor: progress; }

.bs-envoi__bouton:focus-visible {
	outline: 3px solid var(--bs-encre, #111);
	outline-offset: 2px;
}

.bs-envoi__retour {
	margin: 0;
	font-size: 0.9rem;
	line-height: 1.5;
}

.bs-envoi__retour.est-ok     { color: #1F7A4C; font-weight: 600; }
.bs-envoi__retour.est-erreur { color: var(--bs-rouge, #E60012); font-weight: 600; }
.bs-envoi__retour:empty      { display: none; }

/* Piège à robots : retiré de l'écran sans `display:none`, que certains
   automates savent détecter. */
.bs-envoi__piege {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}


/* ==========================================================================
   Mode sombre

   Trois etats, et non deux. Sans reglage, le site suit la preference du
   systeme : quelqu'un qui a mis son telephone en sombre trouve le site
   sombre, sans rien demander. Le bouton de l'en-tete permet ensuite de
   forcer l'un ou l'autre, et ce choix l'emporte sur le systeme.

   Les tokens ci-dessous etaient deja ecrits dans la charte : ils avaient
   perdu leur declencheur au depart de Foxiz, qui fournissait la bascule.
   Le configurateur n'a besoin d'aucune regle : ses propres variables
   derivent de celles-ci (35 references a --bs-*).
   ========================================================================== */

:root { color-scheme: light; }

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

	--bs-surface: #17171A;
	--bs-ink: #F2F1EF;
	--bs-body: #9C9BA3;
	--bs-muted: #9C9BA3;
	--bs-line: #28282D;
	--bs-line-faint: #3A3A41;
	--bs-tile: rgba(242, 241, 239, 0.05);
	--bs-mob: #4A4A52;
	--bs-hover: rgba(242, 241, 239, 0.08);
	--bs-grille: rgba(242, 241, 239, 0.045);
	--bs-dot-moyen: #6B6B72;
	--bs-dot-non: #3A3A41;
	--bs-tip-bg: #F2F1EF;
	--bs-tip-ink: #0C0C0E;

	--bs-rouge-soft: rgba(230, 0, 18, 0.18);
	--bs-rouge-txt: #FF5563;
	--bs-ok: #7BD88F;
	--bs-shadow: none;

	--bs-poste-1: #3987e5;
	--bs-poste-2: #199e70;
	--bs-poste-3: #c98500;
	--bs-poste-4: #9085e9;
	--bs-poste-5: #d55181;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;

	--bs-surface: #17171A;
	--bs-ink: #F2F1EF;
	--bs-body: #9C9BA3;
	--bs-muted: #9C9BA3;
	--bs-line: #28282D;
	--bs-line-faint: #3A3A41;
	--bs-tile: rgba(242, 241, 239, 0.05);
	--bs-mob: #4A4A52;
	--bs-hover: rgba(242, 241, 239, 0.08);
	--bs-grille: rgba(242, 241, 239, 0.045);
	--bs-dot-moyen: #6B6B72;
	--bs-dot-non: #3A3A41;
	--bs-tip-bg: #F2F1EF;
	--bs-tip-ink: #0C0C0E;

	--bs-rouge-soft: rgba(230, 0, 18, 0.18);
	--bs-rouge-txt: #FF5563;
	--bs-ok: #7BD88F;
	--bs-shadow: none;

	--bs-poste-1: #3987e5;
	--bs-poste-2: #199e70;
	--bs-poste-3: #c98500;
	--bs-poste-4: #9085e9;
	--bs-poste-5: #d55181;
}

/* L'accroche porte deja son propre aplat sombre : sur une page sombre, son
   ombre portee n'a plus rien a detacher. */
:root[data-theme="dark"] .bs-hero,
:root:not([data-theme="light"]) .bs-hero { box-shadow: none; }

/* ---- FAQ de la home ------------------------------------------------- */

.bs-faq {
	border-top: 1px solid var(--bs-line);
	max-width: 52rem;
}
.bs-faq__item {
	border-bottom: 1px solid var(--bs-line);
}
.bs-faq__item summary {
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.95rem 0;
	font-family: var(--bs-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bs-ink);
	transition: color 0.15s ease-out;
}
.bs-faq__item summary::-webkit-details-marker {
	display: none;
}
.bs-faq__item summary::after {
	content: "+";
	flex: 0 0 auto;
	font-weight: 500;
	font-size: 1.15rem;
	color: var(--bs-muted);
	transition: transform 0.15s ease-out;
}
.bs-faq__item[open] summary::after {
	content: "–";
}
.bs-faq__item summary:hover {
	color: var(--bs-rouge-txt);
}
.bs-faq__reponse {
	padding: 0 0 1.1rem;
	max-width: 44rem;
	color: var(--bs-body);
	font-size: 0.96rem;
	line-height: 1.65;
}
.bs-faq__reponse p {
	margin: 0;
}
.bs-faq__reponse a {
	color: var(--bs-rouge-txt);
}

/* ---- Visuel d'article (image à la une) ------------------------------ */

.bs-article__visuel {
	/* Retour client du 2026-08-27 : à la mesure commune (1088 px) la carte
	   dominait la page. Elle redescend à 50rem, la carte annonce l'article,
	   le texte et les encarts gardent la mesure commune. */
	max-width: min(50rem, 100%);
	margin: 1.6rem auto 0;
}
.bs-article__visuel img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--bs-radius);
	border: 1px solid var(--bs-dark-line);
}


.bs-tolerance {
	/* Tolérance des cotes, posée sous les tuiles par functions.php. Ton de
	   commentaire : elle nuance le chiffre, elle ne le concurrence pas. */
	margin: 0.7rem 0 0;
	font-size: 0.86rem;
	line-height: 1.45;
	color: var(--bs-muted);
	max-width: 62ch;
}

/* Le plugin affiche son propre schéma statique dans les résultats ; la scène
   vivante du thème le remplace. Réversible en supprimant cette règle. */
.bonsetup__schema { display: none; }

/* ---- Scène vivante « cockpit » (remplace les classes sv-* précédentes) ---- */

:root {
	--bs-lueur: #E60012;
	--bs-lueur-op: 0.1;
	--bs-halo-anim: sv-halo-clair;
	/* Trois niveaux de lecture : le mobilier en encre, la personne en gris
	   moyen, les piètements estompés vers le fond. */
	--sv-mobilier: #0B0D0F;
	--sv-corps: #E60012;
	--sv-metal: #B4B2AD;
	--sv-sol: #C9C6C0;
	--sv-ombre: #0B0D0F;
	--sv-ombre-op: 0.07;
	/* Une teinte par mesure, contrainte accessibilité : ≥ 4,5:1 sur la
	   surface pour porter aussi le texte des étiquettes, et un vert poussé
	   vers le teal pour rester discernable du rouge de la marque en vision
	   daltonienne. Le plan, lui, garde le rouge (--bs-rouge / -txt). */
	--sv-cote-recul: #1D4ED8;
	--sv-cote-assise: #047857;
	--sv-cote-ecran: #6D28D9;
}
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bs-lueur: #E60012;
		--bs-lueur-op: 0.18;
		--bs-halo-anim: sv-halo-sombre;
		--sv-mobilier: #F2F1EF;
		--sv-corps: #FF5563;
		--sv-metal: #63636B;
		--sv-sol: #3A3A41;
		--sv-ombre: #000000;
		--sv-ombre-op: 0.35;
		--sv-cote-recul: #60A5FA;
		--sv-cote-assise: #34D399;
		--sv-cote-ecran: #A78BFA;
	}
}
:root[data-theme="dark"] {
	--bs-lueur: #E60012;
	--bs-lueur-op: 0.18;
	--bs-halo-anim: sv-halo-sombre;
	--sv-mobilier: #F2F1EF;
	--sv-corps: #FF5563;
	--sv-metal: #63636B;
	--sv-sol: #3A3A41;
	--sv-ombre: #000000;
	--sv-ombre-op: 0.35;
	--sv-cote-recul: #60A5FA;
	--sv-cote-assise: #34D399;
	--sv-cote-ecran: #A78BFA;
}

.bs-vivant {
	margin: 0 0 1rem;
	padding: 1rem 1.1rem 0.7rem;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
}
.bs-vivant svg {
	display: block;
	width: 100%;
	height: auto;
	/* Le cadre de la scène décalquée est plus étroit que l'ancien (340
	   unités contre 560) : sans plafond, la colonne de résultats la
	   zoomait d'un tiers. 660 px retrouve l'échelle d'origine. */
	max-width: 660px;
	margin-inline: auto;
}
.bs-vivant figcaption {
	margin-top: 0.3rem;
	font-family: var(--bs-mono);
	font-size: 0.82rem;
	letter-spacing: 0.03em;
	color: var(--bs-muted);
}

.bs-vivant .sv-sol { stroke: var(--sv-sol); stroke-width: 2; stroke-linecap: round; }
.bs-vivant .sv-metal { stroke: var(--sv-metal); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bs-vivant .sv-mobilier { fill: var(--sv-mobilier); }
.bs-vivant .sv-mobilier-trait { stroke: var(--sv-mobilier); fill: none; stroke-linecap: round; }
.bs-vivant .sv-tete { fill: var(--sv-corps); }
/* Scène réaliste (dev 2026-08-27) : torse plein, roulettes pleines, face
   visible de la dalle. */
.bs-vivant .sv-plein { fill: var(--sv-corps); }
.bs-vivant .sv-roue { fill: var(--sv-metal); }
.bs-vivant .sv-ombre { fill: var(--sv-ombre); opacity: var(--sv-ombre-op); }
.bs-vivant .sv-cote { stroke: var(--bs-rouge); stroke-width: 1.6; }
/* Instrument Sans a des chiffres proportionnels par défaut : en tabulaire,
   les valeurs qui défilent (cotes, budget) ne tremblent plus. */
.bonsetup { font-variant-numeric: tabular-nums; }
.bs-vivant .sv-lbl {
	font-family: var(--bs-mono);
	font-size: 13px;
	font-weight: 600;
	fill: var(--bs-rouge-txt);
	paint-order: stroke;
	stroke: var(--bs-surface);
	stroke-width: 5px;
	stroke-linejoin: round;
}

/* Une teinte par mesure : trait, flèches et étiquette la partagent, si bien
   que la légende condensée du mode étroit reste attribuable à sa cote. Le
   plan garde le rouge de la marque ; les teintes --sv-cote-* sont déclarées
   avec les autres variables de la scène, en clair comme en sombre. */
.bs-vivant .sv-fleche--plan { fill: var(--bs-rouge); }
.bs-vivant .sv-cote--recul { stroke: var(--sv-cote-recul); }
.bs-vivant .sv-fleche--recul { fill: var(--sv-cote-recul); }
.bs-vivant .sv-lbl--recul { fill: var(--sv-cote-recul); }
.bs-vivant .sv-cote--assise { stroke: var(--sv-cote-assise); }
.bs-vivant .sv-fleche--assise { fill: var(--sv-cote-assise); }
.bs-vivant .sv-cote--ecran { stroke: var(--sv-cote-ecran); }
/* Ligne d'attache : le pointillé discret suffit, les flèches restent à la cote. */
.bs-vivant .sv-cote--rappel { stroke-dasharray: 3 4; opacity: 0.55; }
.bs-vivant .sv-fleche--ecran { fill: var(--sv-cote-ecran); }
.bs-vivant .sv-lueur { fill: var(--bs-lueur); opacity: var(--bs-lueur-op); animation: var(--bs-halo-anim) 2.8s ease-in-out infinite alternate; }
.bs-vivant .sv-personne { animation: sv-respire 3.2s ease-in-out infinite alternate; }

@keyframes sv-flux { to { stroke-dashoffset: -22; } }
@keyframes sv-respire { from { transform: translateY(0); } to { transform: translateY(2px); } }
@keyframes sv-halo-clair { from { opacity: 0.07; } to { opacity: 0.16; } }
@keyframes sv-halo-sombre { from { opacity: 0.12; } to { opacity: 0.26; } }

@media (prefers-reduced-motion: reduce) {
}

/* ---- Partage en fin d'article + réseaux du pied de page --------------- */

.bs-partage {
	margin: 2.4rem auto 0;
	max-width: var(--bs-mesure);
	padding-top: 1.4rem;
	border-top: 1px solid var(--bs-line);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.8rem 1.2rem;
}
.bs-partage__titre {
	font-family: var(--bs-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bs-muted);
}
.bs-partage__boutons {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.bs-partage__bouton {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var(--bs-line);
	border-radius: 999px;
	background: var(--bs-surface);
	color: var(--bs-body);
	font-family: var(--bs-font);
	font-size: 0.85rem;
	font-weight: 600;
	text-decoration: none !important;
	cursor: pointer;
	transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.bs-partage__bouton svg {
	width: 17px;
	height: 17px;
	flex: 0 0 auto;
}
.bs-partage__bouton:hover {
	color: var(--bs-rouge-txt);
	border-color: var(--bs-rouge-txt);
}

.bs-sociaux {
	display: flex;
	gap: 10px;
}
.bs-sociaux a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--bs-line);
	border-radius: 50%;
	color: var(--bs-body);
	transition: color 0.15s ease-out, border-color 0.15s ease-out;
}
.bs-sociaux a svg {
	width: 18px;
	height: 18px;
}
.bs-sociaux a:hover {
	color: var(--bs-rouge-txt);
	border-color: var(--bs-rouge-txt);
}

/* Sur mobile le SVG se réduit avec la carte : les étiquettes en unités de
   viewBox deviennent illisibles. On grossit les textes et les traits de
   cote — le dessin, lui, reste lisible en petit. */
@media (max-width: 720px) {
	/* Le panneau annule exactement le retrait de la page pour venir bord à
	   bord, et prend un retrait interne fixe pour que la bande de la scène
	   tombe juste. Le retrait réel de la colonne vaut 12px + 1.5vw, mesuré
	   de 320 à 700px : la valeur était doublée sur la part proportionnelle,
	   ce qui faisait dépasser la page de 5 à 11px selon la largeur. */
	.bonsetup {
		margin-inline: calc(-12px - 1.5vw);
		padding-inline: 14px;
	}
	.bs-vivant {
		/* Bande pleine largeur : la carte se colle aux bords du panneau
		   (14px de panneau + 20px de colonne de résultats), sans bordures
		   latérales ni coins arrondis. Le contenu, lui, garde un retrait
		   interne : dessin et ligne de légende ne touchent jamais le bord. */
		margin-inline: -34px;
		padding: 0.5rem 14px 0.45rem;
		border-inline: none;
		border-radius: 0;
	}
	/* La ligne « Assise / Haut de dalle » appartient au dessin ; la note
	   « Ton poste à l'échelle » est un commentaire. Un filet pointillé et
	   de l'air entre les deux pour qu'on ne les lise pas d'un seul bloc. */
	.bs-vivant figcaption {
		margin-top: 12px;
		padding: 8px 18px 0;
		border-top: 1px dashed var(--bs-line);
	}
	.bs-vivant .sv-lbl {
		font-size: 16px;
		stroke-width: 6px;
	}
	.bs-vivant .sv-cote {
		stroke-width: 2.4;
	}
}

/* Les questions de la FAQ sont des h3 (plan du document) : ils héritent du
   style du summary au lieu d'imposer leur gabarit de titre. */
.bs-faq__item summary h3 {
	margin: 0;
	font: inherit;
	color: inherit;
	display: inline;
}

/* Recommandations selon les cotes (bloc bs-reco, injecté par assets/reco.js)
   dans la zone de résultats du configurateur. Tokens uniquement : les trois
   états de thème sont couverts par la bascule des --bs-*. */
.bs-reco { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--bs-line); }
.bs-reco__titre { margin: 0 0 4px; font-size: 1.05rem; color: var(--bs-ink); }
.bs-reco__intro { margin: 0 0 16px; font-size: .85rem; color: var(--bs-muted); }
.bs-reco__intro a { color: inherit; }
.bs-reco__groupe { margin: 0 0 18px; }
.bs-reco__contexte { margin: 0 0 10px; font-size: .92rem; color: var(--bs-ink); }
.bs-reco__contexte a { color: var(--bs-rouge-txt); }
.bs-reco__cartes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 12px; }
.bs-reco__carte { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--bs-line); border-radius: var(--bs-radius); background: var(--bs-surface); }
.bs-reco__nom { margin: 0; font-size: .95rem; color: var(--bs-ink); }
.bs-reco__ligne { margin: 0; font-size: .85rem; color: var(--bs-ink); }
.bs-reco__reserve { margin: 0; font-size: .8rem; color: var(--bs-muted); }
.bs-reco__cta { margin-top: auto; align-self: flex-start; padding: 7px 14px; border: 1px solid currentColor; border-radius: 999px; font-size: .85rem; font-weight: 600; color: var(--bs-rouge-txt); text-decoration: none; }
.bs-reco__cta:hover, .bs-reco__cta:focus-visible { background: var(--bs-rouge); border-color: var(--bs-rouge); color: #fff; }

/* Formulaire du configurateur compacté sur mobile : les textes d'aide et
   les espacements du plugin sont taillés pour un écran large ; sur téléphone
   ils repoussent la scène et les résultats hors de vue. Habillage seul, le
   plugin n'est pas modifié. */
/* Resserré une seconde fois le 2026-08-27 (demande client). Les valeurs
   vivent ICI et seulement ici : un doublon posé côté plugin le 27/08 a
   perdu la cascade contre ce bloc, il a été retiré. */
@media (max-width: 700px) {
	.bonsetup__form { gap: 9px; padding: 15px 13px; }
	.bonsetup__hint { font-size: 11px; line-height: 1.32; margin-top: 2px; }
	.bonsetup__out { font-size: 16px; }
	.bonsetup__field label { font-size: 0.95rem; margin-bottom: 5px; }
	.bonsetup__field input[type="range"] { margin-top: 1px; }
	.bonsetup__field--case { min-block-size: 30px; }
}


/* Mobile 2026-08-27, demande client : la scène gagne toute la largeur de
   sa carte (marges internes réduites) et la légende redescend d'un cran. */
@media (max-width: 720px) {
	.bs-vivant {
		padding: 0.55rem 0.3rem 0.4rem;
	}
	.bs-vivant figcaption {
		font-size: 0.7rem;
	}
}

/* ---------------------------------------------------------------------------
   Scène : règles remises le 2026-08-30.

   Elles avaient été emportées par un nettoyage de CSS mort. Le détecteur
   testait chaque sélecteur séparé par une virgule : dans
   `.sv-lbl--assise, .sv-note--assise`, la seconde moitié n'avait pas de cible
   et la règle entière a sauté, avec la première qui en avait une. D'où les
   étiquettes « Assise » et « Haut de dalle » revenues au rouge par défaut
   alors que leurs flèches restaient vertes et violettes.

   Leçon : ne jamais supprimer une règle sur le seul verdict d'un sélecteur
   composé. On remet ici l'ensemble du bloc, y compris les parties qui
   n'avaient effectivement plus de cible : le coût est nul, l'erreur non.
   --------------------------------------------------------------------------- */

.bs-vivant .sv-corps { stroke: var(--sv-corps); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bs-vivant .sv-dalle-int { fill: var(--sv-sol); }
.bs-vivant .sv-regard { stroke: var(--bs-rouge); stroke-width: 1.6; animation: sv-flux 1.4s linear infinite; }
.bs-vivant .sv-lbl, .bs-vivant .sv-note { font-variant-numeric: tabular-nums; }
.bs-vivant .sv-note { font-family: var(--bs-mono); font-size: 12px; fill: var(--bs-muted); paint-order: stroke; stroke: var(--bs-surface); stroke-width: 4px; stroke-linejoin: round; }

/* Chaque cote porte la couleur de sa flèche : c'est ce qui relie le chiffre
   au trait qu'il mesure, sans avoir à suivre la ligne des yeux. */
.bs-vivant .sv-lbl--assise, .bs-vivant .sv-note--assise { fill: var(--sv-cote-assise); }
.bs-vivant .sv-lbl--ecran, .bs-vivant .sv-note--ecran { fill: var(--sv-cote-ecran); }

@media (prefers-reduced-motion: reduce) {
	.bs-vivant .sv-regard,
	.bs-vivant .sv-personne,
	.bs-vivant .sv-lueur { animation: none; }

	.bs-vivant .sv-note { font-size: 14px; }
}

/* ---------------------------------------------------------------------------
   Vérification par la mesure — posé le 2026-08-29 sur dev.

   Le bloc reprend l'habillage du configurateur : mêmes rayons, même surface,
   chasse fixe sur les chiffres. Il doit se lire comme la suite naturelle des
   résultats, pas comme un encart rapporté.
   --------------------------------------------------------------------------- */

.bs-mesures {
	margin-top: 26px;
	padding: 20px 22px;
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
}

.bs-mesures__titre {
	margin: 0 0 8px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--bs-ink);
}

.bs-mesures__intro {
	margin: 0 0 20px;
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--bs-muted);
	max-width: 62ch;
}

.bs-mesures__champs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	gap: 18px;
}

.bs-mesures__champ label {
	display: block;
	font-size: 0.92rem;
	font-weight: 600;
	color: var(--bs-ink);
	margin-bottom: 4px;
}

.bs-mesures__aide {
	margin: 0 0 10px;
	font-size: 0.82rem;
	line-height: 1.45;
	color: var(--bs-muted);
}

.bs-mesures__saisie {
	display: flex;
	align-items: baseline;
	gap: 8px;
}

.bs-mesures__saisie input {
	inline-size: 6.5rem;
	padding: 8px 10px;
	font: inherit;
	font-family: var(--bs-mono);
	font-variant-numeric: tabular-nums;
	color: var(--bs-ink);
	background: var(--bs-tile);
	border: 1px solid var(--bs-line);
	border-radius: 8px;
}

.bs-mesures__saisie input:focus-visible {
	outline: 3px solid var(--bs-rouge);
	outline-offset: 2px;
}

.bs-mesures__unite {
	font-family: var(--bs-mono);
	font-size: 0.85rem;
	color: var(--bs-muted);
}

.bs-mesures__verdict {
	margin: 8px 0 0;
	font-size: 0.85rem;
	line-height: 1.45;
	min-block-size: 1.2em;
}

.bs-mesures__verdict.est-ok { color: var(--bs-ok); }
.bs-mesures__verdict.est-ecart { color: var(--bs-rouge-txt); }

.bs-mesures__bilan {
	margin: 18px 0 0;
	padding-left: 12px;
	border-left: 3px solid var(--bs-line);
	font-size: 0.93rem;
	line-height: 1.55;
	color: var(--bs-muted);
}

.bs-mesures__bilan:empty { display: none; }
.bs-mesures__bilan.est-ok { border-left-color: var(--bs-ok); color: var(--bs-body); }
.bs-mesures__bilan.est-ecart { border-left-color: var(--bs-rouge); color: var(--bs-body); }

.bs-mesures__bascule {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 4px;
	padding: 12px 14px;
	background: var(--bs-tile);
	border: 1px solid var(--bs-line);
	border-radius: 10px;
	cursor: pointer;
	font-size: 0.93rem;
	font-weight: 600;
	color: var(--bs-ink);
}

.bs-mesures__bascule input { margin-top: 2px; accent-color: var(--bs-rouge); inline-size: 1.05rem; block-size: 1.05rem; }
.bs-mesures.est-actif .bs-mesures__bascule { border-color: var(--bs-rouge); background: var(--bs-rouge-soft); }
.bs-mesures__corps { margin-top: 20px; }
.bs-mesures__corps[hidden] { display: none; }

.bs-reco__source {
	margin: 0 0 8px;
	font-family: var(--bs-mono);
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--bs-rouge-txt);
}


/* ---------------------------------------------------------------------------
   Hauteur de la scène, indépendante de son contenu.

   La figure est émise vide par le thème et remplie par le script. Pour que le
   remplissage ne décale rien, sa hauteur doit être la même avant et après :
   on la fixe sur le rapport du `viewBox` du dessin (340,46 × 346), plafonné à
   660px comme le `svg` lui-même, plus la place de la légende.

   Tant qu'elle est vide, `:empty` ajoute la même hauteur par un pseudo-élément
   qui disparaîtra en même temps que le dessin arrive : la figure ne change
   jamais de taille.
   --------------------------------------------------------------------------- */
/* Bornée à 768 px et au-dessus, là où la réserve est juste au dixième de
   pixel (mesuré à 768, 900, 1024, 1200, 1350, 1600 et 1920). En dessous, la
   légende passe sur deux ou trois lignes et cette règle sous-estimerait la
   hauteur de 13 à 31 px. Sans conséquence : sur téléphone la scène est à plus
   de 1 000 px du haut du document, jamais visible au chargement, donc jamais
   comptée dans le décalage. Mesuré : bureau 0,000 sur six chargements,
   mobile inchangé. */
@media (min-width: 768px) {
	.bs-vivant:empty::before {
		content: "";
		display: block;
		box-sizing: content-box;
		max-inline-size: 660px;
		margin-inline: auto;
		aspect-ratio: 340.458 / 346;
		/* La légende viendra sous le dessin : on réserve sa hauteur ici. */
		padding-block-end: 25.8px;
	}
}