/*
Theme Name:  Bon Setup
Theme URI:   https://bonsetup.fr
Author:      L'NKBOOT
Description: Thème sur mesure de bonsetup.fr. Écrit pour ce site et lui seul : pas de constructeur de page, pas de jQuery, pas de bibliothèque de carrousel, pas de police d'icônes. Le CSS de la charte est repris tel quel de l'ancien thème enfant.
Version:     1.0.0
Requires at least: 6.5
Requires PHP: 8.0
License:     GPL-2.0-or-later
Text Domain: bonsetup
*/

/* ==========================================================================
   Structure — en-tête, navigation, articles, archives, pied de page.

   Tout ce qui suit remplace ce que Foxiz fournissait. La charte elle-même
   (accroche, grilles, configurateur) vit dans design.css, repris à
   l'identique de l'ancien thème enfant.
   ========================================================================== */

/* Mesure de lecture, partagée par l'en-tête d'article, le sommaire, le corps
   et le bloc « à lire ensuite ».
   En `rem` et non en `ch` : l'unité `ch` se calcule sur le corps de l'élément
   qui la porte, donc les mêmes « 76ch » donnaient 857 px dans le corps du
   texte (18 px) et 814 px dans l'en-tête (17 px) — deux bords gauches
   décalés de 22 px, constaté à la mesure. En rem, les quatre blocs
   s'alignent au pixel.
   50rem = 800 px, soit environ 77 caractères au corps courant : sous le
   plafond de 80 au-delà duquel l'œil ne retrouve plus le début de la ligne
   suivante sans effort. */
:root { --bs-mesure: 68rem; }
/* 2026-08-27, demande client : texte, encarts produits et visuels partagent
   la même largeur de 68rem (1088 px). Le plafond de lecture décrit ci-dessus
   est volontairement dépassé, au profit de blocs alignés sur toute la page ;
   c'est un choix du client, ne pas « corriger » sans lui. */

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

body {
	margin: 0;
	background: var(--bs-surface);
	color: var(--bs-body);
	font-family: var(--bs-font);
	font-size: 17px;
	line-height: 1.65;
	font-feature-settings: "kern" 1, "liga" 1;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

a { color: var(--bs-rouge-txt); }
a:hover { color: var(--bs-rouge); }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--bs-rouge);
	outline-offset: 2px;
	border-radius: 4px;
}

.bs-contenu {
	width: 100%;
	max-width: var(--bs-conteneur, 1180px);
	margin-inline: auto;
	/* 20px, exactement la gouttiere de `.bs-home` et `.bs-page` dans la
	   charte. Avec un clamp different, le logo demarrait 20px plus a droite
	   que le titre de la page — visible a l'oeil nu. */
	padding-inline: 20px;
}

/* ---------- En-tête ---------- */

.bs-entete {
	border-bottom: 1px solid var(--bs-line);
	background: var(--bs-surface);
}

/* Trois colonnes plutôt qu'une rangée poussée à droite.
   `1fr auto 1fr` place la navigation au centre exact de la page : avec des
   colonnes latérales de même largeur, le centrage ne dépend plus de la
   largeur du logo. Poussée par `margin-inline-start: auto`, elle se collait
   au bord droit. */
.bs-entete__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 20px;
	min-block-size: 92px;
	padding-block: 12px;
}

.bs-marque { display: inline-flex; align-items: center; flex: 0 0 auto; }
.bs-marque img { block-size: 76px; inline-size: auto; display: block; }

@media (max-width: 700px) {
	.bs-marque img { block-size: 54px; }
}

.bs-marque { grid-column: 1; grid-row: 1; justify-self: start; }
/* Le rang est déclaré explicitement : sans lui, le bouton de thème placé en
   colonne 3 fait avancer le curseur de placement, et la navigation — écrite
   après lui dans le balisage — se retrouve reléguée au rang suivant.
   Constaté à l'écran dès la pose du bouton. */
.bs-nav { grid-column: 2; grid-row: 1; justify-self: center; }

.bs-nav ul {
	display: flex;
	align-items: center;
	gap: 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-nav a {
	color: var(--bs-ink);
	font-weight: 600;
	/* 1,15rem = 18,4 px. Attention, `rem` se calcule sur la racine (16 px) et
	   non sur le corps du texte (17 px) : 0,98rem ne faisait que 15,7 px, d'où
	   l'impression de menu timide à côté d'un logo de 76 px. */
	font-size: 1.15rem;
	text-decoration: none;
	padding-block: 6px;
	display: inline-block;
	border-bottom: 2px solid transparent;
}

.bs-nav a:hover { border-bottom-color: var(--bs-rouge); }
.bs-nav .current-menu-item > a { border-bottom-color: var(--bs-ink); }

/* Bouton du menu mobile : masqué tant que la place suffit. */
.bs-burger {
	display: none;
	margin-inline-start: auto;
	inline-size: 44px;
	block-size: 44px;
	padding: 0;
	border: 1px solid var(--bs-line);
	border-radius: 10px;
	background: var(--bs-surface);
	cursor: pointer;
	color: var(--bs-ink);
}

.bs-burger span,
.bs-burger span::before,
.bs-burger span::after {
	display: block;
	inline-size: 18px;
	block-size: 2px;
	background: currentColor;
	border-radius: 2px;
	margin-inline: auto;
	transition: transform 0.18s ease, opacity 0.18s ease;
}

.bs-burger span::before,
.bs-burger span::after { content: ""; position: relative; }
.bs-burger span::before { top: -6px; }
.bs-burger span::after  { top: 4px; }

.bs-burger[aria-expanded="true"] span { background: transparent; }
.bs-burger[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.bs-burger[aria-expanded="true"] span::after  { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 860px) {

	.bs-entete__inner {
		display: flex;
		gap: 10px;
	}

	.bs-burger { display: block; }

	/* Le panneau doit s'ancrer sous l'en-tete. Sans ancrage vertical, il
	   restait a sa position statique : l'inner etant en `align-items: center`,
	   un panneau de 263px se centrait sur un en-tete de 93px et remontait de
	   85px au-dessus du viewport — le premier lien, « Configurateur », etait
	   entierement hors ecran et les suivants coupes.
	   `position: relative` sur l'en-tete lui donne un bloc conteneur de la
	   largeur de l'ecran ; `inset-block-start: 100%` le pose juste dessous. */
	.bs-entete { position: relative; }

	.bs-nav {
		display: none;
		position: absolute;
		inset-block-start: 100%;
		inset-inline: 0;
		/* La regle de bureau pose `justify-self: center`, qui centre la boite
		   dans sa zone au lieu de l'etirer : le panneau ne faisait que 185px
		   de large. On rend l'etirement, seul comportement sensé ici. */
		justify-self: stretch;
		max-block-size: calc(100dvh - 100%);
		overflow-y: auto;
		background: var(--bs-surface);
		border-bottom: 1px solid var(--bs-line);
		box-shadow: var(--bs-shadow);
		z-index: 60;
	}

	.bs-nav.est-ouvert { display: block; }

	.bs-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: 8px 20px 18px;
	}

	.bs-nav li + li { border-top: 1px solid var(--bs-line); }
	.bs-nav a { padding-block: 14px; border-bottom: 0; }
}

/* ---------- Corps ---------- */

.bs-principal { display: block; min-block-size: 50vh; }

/* ---------- Article et page ---------- */

.bs-article { padding-block: clamp(32px, 5vw, 56px); }

/* Les pages qui apportent leur propre enveloppe large gèrent déjà leurs
   marges internes : le gabarit ne doit rien ajouter au-dessus. */
.bs-article--large { padding-block: 0; }

.bs-article__entete { max-width: var(--bs-mesure); margin-inline: auto; }

.bs-rubrique {
	display: inline-block;
	font-family: var(--bs-mono);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bs-rouge-txt);
	text-decoration: none;
	margin-bottom: 14px;
	/* Mesure du 22/08/2026 : 48 × 19 px, sous les 24 px exiges par WCAG 2.5.8.
	   Ce lien est seul au-dessus du titre, il ne beneficie donc pas de
	   l'exemption des liens en ligne dans une phrase. Le remplissage vertical
	   le porte a 25 px sans deplacer quoi que ce soit : la marge basse absorbe
	   le debord. */
	padding-block: 3px;
	margin-bottom: 11px;
}

.bs-titre {
	font-size: clamp(2rem, 4.4vw, 3.05rem);
	line-height: 1.06;
	letter-spacing: -0.025em;
	font-weight: 800;
	color: var(--bs-ink);
	margin: 0 0 14px;
	text-wrap: balance;
}

.bs-meta {
	font-family: var(--bs-mono);
	font-size: 0.78rem;
	color: var(--bs-muted);
	margin: 0 0 30px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

/* Mesure et corps de lecture.

   68 caracteres plutot que 72 : a 18px, une ligne de 72 devient trop longue
   pour que l'oeil retrouve le debut de la suivante sans effort. L'interligne
   monte a 1.72 pour la meme raison — c'est du texte long, lu d'affilee. */
/* Colonne de lecture, avec échappement pour les blocs larges.
   Cinq articles « setup » portent le configurateur en pleine page. Enfermé
   dans les 68 caractères, il se retrouvait sur deux colonnes de 310 px et son
   tableau d'écrans se chevauchait — constaté à l'écran.
   La grille à trois pistes règle les deux besoins d'un coup : le texte
   s'aligne sur la piste centrale, les blocs déclarés larges prennent toute la
   largeur du conteneur, sans marge négative ni calcul de viewport. */
.bs-corps {
	display: grid;
	grid-template-columns:
		[bord-gauche] 1fr
		[texte] min(var(--bs-mesure), 100%)
		[texte-fin] 1fr
		[bord-droit];
	/* Le corps des articles, et lui seul, passe en Literata : c'est là qu'on
	   lit longtemps. Les titres, le sommaire, la navigation et le
	   configurateur restent sur la police d'interface. */
	font-family: var(--bs-lecture);
	font-size: 1.1rem;
	line-height: 1.72;
}

.bs-corps > * { grid-column: texte; }

/* Les titres de section gardent la voix de l'interface. */
.bs-corps :is(h2, h3, h4):not(.bonsetup *) { font-family: var(--bs-font); }

/* Le configurateur, et tout bloc qui demande la pleine largeur du conteneur.

   `.wp-block-table` ne figure plus ici : un tableau de trois colonnes courtes
   etire sur 1314px alors que le texte en fait 800 laissait 250px de vide entre
   ses colonnes, et debordait visuellement de la colonne de lecture des deux
   cotes. Un tableau se lit a la mesure du texte ; celui qui a vraiment besoin
   de la pleine largeur porte `bs-large`, comme n'importe quel autre bloc. */
.bs-corps > .bonsetup,
.bs-corps > .bs-large {
	grid-column: bord-gauche / bord-droit;
}

.bs-corps > * + * { margin-block-start: 1.2em; }

/* Avertissement d'ouverture : chaque guide s'ouvre sur une mise en garde
   (« je ne suis ni médecin, ni kinésithérapeute »). Elle doit se lire comme
   une note, pas comme un chapeau — donc plus discrète que le texte, pas plus
   grosse. */
.bs-corps > p > em:only-child {
	color: var(--bs-muted);
	font-size: 0.95em;
}

/* Les liens dans le corps sont soulignes : dans un texte dense, la couleur
   seule ne suffit pas a les distinguer, et elle disparait pour une part des
   lecteurs daltoniens. */
.bs-corps p:not(.bonsetup *) a,
.bs-corps li:not(.bonsetup *) a {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 0.06em;
}

.bs-corps h2:not(.bonsetup *) {
	font-size: clamp(1.35rem, 2.6vw, 1.75rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	font-weight: 700;
	color: var(--bs-ink);
	margin-block-start: 2.1em;
	margin-block-end: 0.15em;
	text-wrap: balance;
}

.bs-corps h3:not(.bonsetup *) {
	font-size: 1.18rem;
	line-height: 1.3;
	font-weight: 700;
	color: var(--bs-ink);
	margin-block-start: 1.8em;
	margin-block-end: 0.1em;
}

/* Ces remises a zero ne touchent pas la marge haute : elle appartient au
   rythme vertical pose plus haut par `.bs-corps > * + *`. Ecrite `margin: 0`,
   la regle pesait (0,2,1) contre (0,1,0) et ecrasait ce rythme — tous les
   paragraphes et toutes les listes du site se touchaient, sur chaque article. */
.bs-corps p:not(.bonsetup *) { margin-inline: 0; margin-block-end: 0; }
.bs-corps :is(ul, ol):not(.bonsetup *) { margin-inline: 0; margin-block-end: 0; padding-inline-start: 1.3em; }

/* Le premier element ne prend pas la marge par defaut du navigateur. */
.bs-corps > :first-child { margin-block-start: 0; }
.bs-corps li:not(.bonsetup *) + li:not(.bonsetup *) { margin-block-start: 0.45em; }

.bs-corps blockquote:not(.bonsetup *) {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-inline-start: 3px solid var(--bs-rouge);
	color: var(--bs-ink);
	font-size: 1.06em;
}

.bs-corps blockquote p + p { margin-block-start: 0.8em; }

.bs-corps code:not(.bonsetup *) {
	font-family: var(--bs-mono);
	font-size: 0.88em;
	background: var(--bs-tile);
	padding: 0.12em 0.4em;
	border-radius: 4px;
}

.bs-corps table:not(.bonsetup *) { inline-size: 100%; border-collapse: collapse; font-size: 0.95em; }
.bs-corps :is(th, td):not(.bonsetup *) { padding: 10px 12px; border-bottom: 1px solid var(--bs-line); text-align: start; }
.bs-corps th:not(.bonsetup *) { font-weight: 700; color: var(--bs-ink); }

/* Les tableaux d'article doivent pouvoir défiler seuls sur petit écran. */
.bs-corps .wp-block-table { overflow-x: auto; }

.bs-corps figure { margin: 1.6em 0; }
.bs-corps figcaption { font-size: 0.86rem; color: var(--bs-muted); margin-block-start: 8px; }

/* ---------- Pied d'article : lecture suivante ---------- */

.bs-suite {
	max-width: var(--bs-mesure);
	margin: 56px auto 0;
	padding-block-start: 28px;
	border-block-start: 1px solid var(--bs-line);
}

.bs-suite__titre {
	font-family: var(--bs-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bs-muted);
	margin: 0 0 16px;
}

.bs-suite__liste { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }

.bs-suite__liste a {
	display: block;
	padding: 12px 14px;
	border: 1px solid var(--bs-line);
	border-radius: 12px;
	color: var(--bs-ink);
	font-weight: 600;
	text-decoration: none;
	line-height: 1.4;
}

.bs-suite__liste a:hover { background: var(--bs-tile); border-color: var(--bs-line-faint); }

/* ---------- Archives et recherche ---------- */

.bs-archive { padding-block: clamp(32px, 5vw, 56px); }
.bs-archive__entete { max-width: 72ch; margin: 0 auto 34px; }
.bs-archive__intro { color: var(--bs-muted); margin: 10px 0 0; }

.bs-liste { list-style: none; margin: 0 auto; padding: 0; max-width: 72ch; display: grid; gap: 2px; }

.bs-liste__item {
	padding: 20px 0;
	border-bottom: 1px solid var(--bs-line);
}

.bs-liste__item:first-child { border-top: 1px solid var(--bs-line); }

.bs-liste__titre {
	font-size: 1.2rem;
	line-height: 1.3;
	font-weight: 700;
	margin: 0 0 6px;
	letter-spacing: -0.015em;
}

.bs-liste__titre a { color: var(--bs-ink); text-decoration: none; }
.bs-liste__titre a:hover { color: var(--bs-rouge-txt); }
.bs-liste__extrait { margin: 0; color: var(--bs-muted); font-size: 0.96rem; }

.bs-liste__meta {
	font-family: var(--bs-mono);
	font-size: 0.72rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--bs-muted);
	margin: 0 0 8px;
}

.bs-pagination {
	margin: 36px 0 0;
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
}

.bs-pagination .page-numbers {
	display: inline-block;
	min-inline-size: 40px;
	padding: 9px 12px;
	text-align: center;
	border: 1px solid var(--bs-line);
	border-radius: 10px;
	text-decoration: none;
	color: var(--bs-ink);
	font-weight: 600;
}

.bs-pagination .current { background: var(--bs-ink); color: #fff; border-color: var(--bs-ink); }

/* ---------- Recherche ---------- */

.bs-recherche { display: flex; gap: 8px; max-width: 30rem; }

.bs-recherche input[type="search"] {
	flex: 1 1 auto;
	min-block-size: 44px;
	padding: 10px 14px;
	border: 1px solid var(--bs-line-faint);
	border-radius: 10px;
	font: inherit;
	font-size: 1rem;
	color: var(--bs-ink);
	background: var(--bs-surface);
}

.bs-recherche button {
	min-block-size: 44px;
	padding: 10px 18px;
	border: 0;
	border-radius: 10px;
	background: var(--bs-ink);
	color: #fff;
	font: inherit;
	font-weight: 600;
	cursor: pointer;
}

/* ---------- Pied de page ---------- */

.bs-pied {
	margin-block-start: 72px;
	border-block-start: 1px solid var(--bs-line);
	background: var(--bs-tile);
	padding-block: 40px 32px;
}

.bs-pied__inner { display: grid; gap: 22px; }

.bs-pied__marque img { block-size: 52px; inline-size: auto; }

.bs-pied__mention {
	margin: 0;
	max-width: 62ch;
	font-size: 0.9rem;
	color: var(--bs-muted);
}

.bs-pied__liens { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }

.bs-pied__liens a {
	color: var(--bs-body);
	font-size: 0.9rem;
	text-decoration: none;
	display: inline-block;
	padding-block: 4px;
}

.bs-pied__liens a:hover { color: var(--bs-ink); text-decoration: underline; }

.bs-pied__bas {
	font-family: var(--bs-mono);
	font-size: 0.72rem;
	letter-spacing: 0.04em;
	color: var(--bs-muted);
	margin: 0;
}

/* ---------- Lien d'évitement ---------- */

.bs-evitement {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 10000;
	padding: 12px 20px;
	background: var(--bs-ink);
	color: #fff;
	font-weight: 600;
	text-decoration: none;
	border-radius: 0 0 8px 0;
}

.bs-evitement:focus { left: 0; }

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

/* ---------- 404 ---------- */

.bs-404 { padding-block: clamp(48px, 8vw, 96px); text-align: center; }
.bs-404 h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--bs-ink); margin: 0 0 12px; }
.bs-404 p { max-width: 46ch; margin: 0 auto 24px; color: var(--bs-muted); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Sommaire d'article ---------- */

/* Il était produit par foxiz-core. Le plugin parti, la table est réécrite
   dans le thème : sur des guides de six minutes, elle sert autant à se
   repérer qu'à décider si l'on va lire. */
.bs-sommaire {
	max-width: var(--bs-mesure);
	margin: 34px auto 0;
	padding: 18px 22px;
	background: var(--bs-tile);
	border: 1px solid var(--bs-line);
	border-radius: 14px;
}

.bs-sommaire__titre {
	font-family: var(--bs-mono);
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--bs-muted);
	margin: 0 0 10px;
}

.bs-sommaire ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: bs-toc;
	display: grid;
	gap: 7px;
}

.bs-sommaire li { counter-increment: bs-toc; display: flex; gap: 10px; }

.bs-sommaire li::before {
	content: counter(bs-toc, decimal-leading-zero);
	font-family: var(--bs-mono);
	font-size: 0.76rem;
	color: var(--bs-muted);
	padding-block-start: 0.15em;
	flex: 0 0 auto;
}

.bs-sommaire a {
	color: var(--bs-ink);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.4;
}

.bs-sommaire a:hover { color: var(--bs-rouge-txt); text-decoration: underline; }

/* Le titre visé ne doit pas se coller au bord haut de la fenêtre. */
.bs-corps h2[id]:not(.bonsetup *) { scroll-margin-top: 24px; }

/* ---------- Réservé aux technologies d'assistance ---------- */

/* Retiré de l'écran sans `display:none` ni `visibility:hidden`, qui le
   retireraient aussi de l'arbre d'accessibilité — donc sans effet utile. */
.bs-invisible {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ---------- Frontière du configurateur ----------

   Il apporte sa mise en page complète, avec ses propres corps de texte et
   ses propres marges. Mes règles d'article, écrites en descendant
   (`.bs-corps h3`, spécificité 0,1,1), l'emportaient sur les siennes
   (`.bonsetup__h`, 0,1,0) : titres de panneaux à 19 px au lieu de 13,
   34 px de marge ajoutés au-dessus de chacun, marges de paragraphes et de
   tableau écrasées. Les panneaux repliés passaient de 49 à 83 px de haut.

   Les exclusions ci-dessus règlent le cas ; cette règle rend le corps du
   texte au configurateur, que `.bs-corps` fixait à 1,12rem. */
.bs-corps .bonsetup {
	font-family: var(--bs-font);
	font-size: 1rem;
	line-height: 1.6;
}

/* Colonne « finesse du texte » du tableau des écrans : elle affiche des
   minutes d'arc, avec le signe prime. Deux raisons de la passer en chasse
   fixe — c'est une mesure, comme toutes les autres valeurs du site, et
   Instrument Sans ne contient pas le caractère « ′ », qui tomberait sinon
   sur une police système au milieu de la ligne. */
.bonsetup__ecrans td:nth-child(4) {
	font-family: var(--bs-mono);
}

/* ---------- Bascule clair / sombre ---------- */

.bs-theme {
	grid-column: 3;
	grid-row: 1;
	justify-self: end;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 40px;
	block-size: 40px;
	padding: 0;
	border: 1px solid var(--bs-line);
	border-radius: 10px;
	background: var(--bs-surface);
	color: var(--bs-ink);
	cursor: pointer;
}

.bs-theme:hover { background: var(--bs-tile); }

.bs-theme svg {
	inline-size: 19px;
	block-size: 19px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.7;
	stroke-linecap: round;
}

.bs-theme__lune { fill: currentColor; stroke: none; }

/* L'icône montre la destination, pas l'état courant : en mode clair on
   propose la lune, en mode sombre le soleil. */
.bs-theme__soleil { display: none; }
.bs-theme[aria-pressed="true"] .bs-theme__lune { display: none; }
.bs-theme[aria-pressed="true"] .bs-theme__soleil { display: block; }

@media (max-width: 860px) {
	.bs-theme { margin-inline-start: auto; }
}


/* ---------- Logo selon le mode ---------- */

/* Deux fichiers plutôt qu'un filtre CSS : le logo mêle une encre sombre et un
   rouge de charte, qu'aucune inversion ne rend correctement.

   Le sélecteur porte `img` : sans lui, `.bs-marque img { display: block }`
   plus haut (0,1,1) l'emportait sur `.bs-marque__sombre` (0,1,0) et les deux
   logos s'affichaient côte à côte dans l'en-tête. Le défaut ne se voyait que
   dans l'état par défaut — aucun `data-theme` posé et système en clair — car
   les règles `:root[data-theme]` (0,2,1) passent, elles, devant. */
img.bs-marque__sombre { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .bs-marque__clair { display: none; }
	:root:not([data-theme="light"]) .bs-marque__sombre { display: block; }
}

:root[data-theme="dark"] .bs-marque__clair { display: none; }
:root[data-theme="dark"] .bs-marque__sombre { display: block; }

:root[data-theme="light"] .bs-marque__clair { display: block; }
:root[data-theme="light"] .bs-marque__sombre { display: none; }