/**
 * Boussolio — composants.
 *
 * Les briques réutilisables du comparateur : cartes, tableaux comparatifs,
 * fiches d'outil, avantages et inconvénients, verdicts, encarts partenaires.
 *
 * Règle de transparence appliquée partout : dès qu'un lien mène à un
 * partenaire, le composant qui le porte affiche une mention visible. Jamais
 * de mention en gris pâle 10 px au fond d'un pied de page.
 *
 * @package Boussolio
 */

/* ==========================================================================
   1. Section d'ouverture
   ========================================================================== */

.bo-hero {
	position: relative;
	overflow: hidden;
	border-radius: var(--bo-r-xl);
	background: linear-gradient(160deg, #1b3a6b 0%, #12213f 58%, #0d1830 100%);
	color: #fff;
	padding: clamp(2rem, 1.2rem + 4vw, 4.5rem)
	         clamp(1.25rem, 0.6rem + 3vw, 3.5rem);
	margin-bottom: var(--bo-sp-7);
}

.bo-hero > * {
	position: relative;
	z-index: 1; /* au-dessus de .bo-decor */
}

.bo-hero__titre {
	font-size: var(--bo-fs-3xl);
	font-weight: 800;
	line-height: 1.06;
	letter-spacing: -0.03em;
	color: #fff;
	margin: 0 0 var(--bo-sp-4);
	max-width: 20ch;
	text-wrap: balance;
}

.bo-hero__titre em {
	font-style: normal;
	/* Le mot souligné en corail plutôt que coloré : sur fond marine, du texte
	   corail plein tomberait sous le seuil de contraste. */
	background: linear-gradient(transparent 62%, rgba(255, 107, 74, 0.42) 62%);
	padding-inline: 2px;
}

.bo-hero__intro {
	font-size: var(--bo-fs-lg);
	line-height: 1.55;
	color: rgba(255, 255, 255, 0.86);
	max-width: 58ch;
	margin: 0 0 var(--bo-sp-6);
	text-wrap: pretty;
}

/* ---- Recherche centrale ---- */
.bo-recherche {
	display: flex;
	gap: var(--bo-sp-2);
	max-width: 40rem;
	margin-bottom: var(--bo-sp-5);
}

.bo-recherche__champ {
	flex: 1 1 auto;
	min-width: 0;
	padding: var(--bo-sp-4) var(--bo-sp-5);
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: var(--bo-r-md);
	color: #fff;
	font: inherit;
	font-size: var(--bo-fs-base);
}

.bo-recherche__champ::placeholder {
	color: rgba(255, 255, 255, 0.6);
}

.bo-recherche__champ:focus {
	background: rgba(255, 255, 255, 0.16);
	border-color: var(--bo-coral);
	outline: none;
}

.bo-recherche__bouton {
	flex: 0 0 auto;
	padding: var(--bo-sp-4) var(--bo-sp-6);
	background: var(--bo-coral);
	color: var(--bo-sur-coral);
	border: 0;
	border-radius: var(--bo-r-md);
	font: inherit;
	font-weight: 700;
	cursor: pointer;
	transition: background var(--bo-dur-fast) var(--bo-ease);
}

.bo-recherche__bouton:hover {
	background: var(--bo-coral-hover);
}

/* ---- Gages de confiance ---- */
.bo-gages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-sp-3) var(--bo-sp-5);
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--bo-fs-sm);
	color: rgba(255, 255, 255, 0.82);
}

.bo-gages li {
	display: flex;
	align-items: center;
	gap: var(--bo-sp-2);
}

/* Icônes en SVG, pas en émoji : rendu identique sur tous les systèmes. */
.bo-gages svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	color: var(--bo-coral);
}

/* ==========================================================================
   2. Cartes
   ========================================================================== */

.bo-grille {
	display: grid;
	gap: var(--bo-sp-4);
	/* `auto-fill` + `minmax` : le nombre de colonnes s'adapte tout seul,
	   sans une seule requête média. */
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
}

.bo-grille--large {
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr));
}

.bo-carte {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--bo-sp-3);
	padding: var(--bo-sp-5);
	background: var(--bo-surface);
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-r-lg);
	box-shadow: var(--bo-shadow-1);
	/* `isolation` évite qu'une ombre de carte passe par-dessus la voisine. */
	isolation: isolate;
}

.bo-carte__categorie {
	font-size: var(--bo-fs-xs);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	/* Corail-texte, et non corail-surface : 5,18:1 au lieu de 3,78:1. */
	color: var(--bo-coral-texte);
}

.bo-carte__titre {
	margin: 0;
	font-size: var(--bo-fs-lg);
	font-weight: 700;
	line-height: var(--bo-lh-snug);
	color: var(--bo-navy);
	text-wrap: balance;
}

.bo-carte__titre a {
	color: inherit;
	text-decoration: none;
}

/*
 * Toute la carte devient cliquable, sans imbriquer de liens.
 * Le pseudo-élément couvre la carte ; le texte reste sélectionnable et un
 * lien secondaire placé au-dessus (z-index) reste cliquable.
 */
.bo-carte__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: inherit;
}

.bo-carte__resume {
	margin: 0;
	font-size: var(--bo-fs-sm);
	line-height: 1.55;
	color: var(--bo-text-soft);
	text-wrap: pretty;
}

.bo-carte__pied {
	margin-top: auto;
	padding-top: var(--bo-sp-3);
	display: flex;
	align-items: center;
	gap: var(--bo-sp-3);
	font-size: var(--bo-fs-xs);
	color: var(--bo-text-faint);
}

.bo-carte__action {
	position: relative;
	z-index: 2; /* passe au-dessus du recouvrement du titre */
}

.bo-carte__media {
	margin: calc(var(--bo-sp-5) * -1) calc(var(--bo-sp-5) * -1) 0;
	border-radius: var(--bo-r-lg) var(--bo-r-lg) 0 0;
	overflow: hidden;
	/* Le rapport est réservé : l'image ne fait pas sauter la carte en arrivant. */
	aspect-ratio: 16 / 9;
	background: var(--bo-surface-3);
}

.bo-carte__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ---- Carte de catégorie ---- */
.bo-carte--categorie {
	background: var(--bo-surface);
}

.bo-carte--categorie .bo-carte__icone {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border-radius: var(--bo-r-md);
	background: var(--bo-info-bg);
	color: var(--bo-navy);
}

.bo-carte--categorie .bo-carte__icone svg {
	width: 22px;
	height: 22px;
}

/* ==========================================================================
   3. Étiquettes
   ========================================================================== */

.bo-etiquette {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	padding: 3px 9px;
	border-radius: var(--bo-r-pill);
	font-size: var(--bo-fs-xs);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
}

.bo-etiquette--choix   { background: var(--bo-pro-bg);  color: var(--bo-pro); }
.bo-etiquette--budget  { background: var(--bo-info-bg); color: var(--bo-info); }
.bo-etiquette--attention { background: var(--bo-warn-bg); color: var(--bo-warn); }
.bo-etiquette--partenaire {
	background: var(--bo-surface-3);
	color: var(--bo-text-soft);
	border: 1px solid var(--bo-border);
	font-weight: 600;
}

/* ==========================================================================
   4. Tableau comparatif
   ========================================================================== */

/*
 * Le composant central du site.
 *
 * Sur écran large : en-tête collant, colonne de critères collante à gauche,
 * lignes alternées.
 * Sur téléphone : le tableau défile horizontalement dans son propre cadre —
 * jamais la page entière. Un liseré indique qu'il reste du contenu à droite.
 */
.bo-comparatif {
	margin: var(--bo-sp-6) 0;
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-r-lg);
	background: var(--bo-surface);
	box-shadow: var(--bo-shadow-1);
	overflow: hidden;
}

.bo-comparatif__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bo-sp-3);
	padding: var(--bo-sp-4) var(--bo-sp-5);
	border-bottom: 1px solid var(--bo-border);
	background: var(--bo-surface-2);
}

.bo-comparatif__titre {
	margin: 0;
	font-size: var(--bo-fs-lg);
	font-weight: 700;
	color: var(--bo-navy);
}

.bo-comparatif__cadre {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	/* Ombre portée sur les bords tant qu'il reste à défiler : le visiteur
	   comprend qu'il peut aller voir plus loin. */
	background:
		linear-gradient(to right, var(--bo-surface) 30%, transparent),
		linear-gradient(to left,  var(--bo-surface) 30%, transparent) 100% 0,
		radial-gradient(farthest-side at 0 50%, rgba(18,33,63,.14), transparent),
		radial-gradient(farthest-side at 100% 50%, rgba(18,33,63,.14), transparent) 100% 0;
	background-repeat: no-repeat;
	background-size: 40px 100%, 40px 100%, 14px 100%, 14px 100%;
	background-attachment: local, local, scroll, scroll;
}

.bo-comparatif table {
	width: 100%;
	min-width: 34rem;
	border-collapse: collapse;
	font-size: var(--bo-fs-sm);
}

.bo-comparatif th,
.bo-comparatif td {
	padding: var(--bo-sp-3) var(--bo-sp-4);
	text-align: left;
	vertical-align: top;
	border-bottom: 1px solid var(--bo-border);
}

.bo-comparatif thead th {
	position: sticky;
	top: 0;
	z-index: 2;
	/*
	 * `--bo-navy` s'éclaircit en thème sombre : du blanc dessus tombait à
	 * 2,16:1. `--bo-navy-deep` reste sombre dans les deux thèmes.
	 */
	background: var(--bo-navy-deep);
	color: #fff;
	font-weight: 700;
	white-space: nowrap;
	border-bottom: 0;
}

/* Colonne des critères, collante à gauche. */
.bo-comparatif tbody th[scope="row"] {
	position: sticky;
	left: 0;
	z-index: 1;
	background: var(--bo-surface-2);
	font-weight: 700;
	color: var(--bo-navy);
	min-width: 9rem;
}

.bo-comparatif tbody tr:nth-child(even) td {
	background: color-mix(in srgb, var(--bo-surface-2) 55%, transparent);
}

.bo-comparatif tbody tr:last-child th,
.bo-comparatif tbody tr:last-child td {
	border-bottom: 0;
}

/* Colonne mise en avant : la recommandation. */
.bo-comparatif .est-recommande {
	background: color-mix(in srgb, var(--bo-pro-bg) 62%, transparent);
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bo-pro) 26%, transparent);
}

/*
 * Note de vérification des prix.
 * Obligatoire sous tout tableau qui affiche un tarif : un prix sans date de
 * relevé n'est pas une information, c'est un piège.
 */
.bo-comparatif__note {
	padding: var(--bo-sp-3) var(--bo-sp-5);
	border-top: 1px solid var(--bo-border);
	background: var(--bo-surface-2);
	font-size: var(--bo-fs-xs);
	color: var(--bo-text-soft);
	font-style: italic;
}

/* ==========================================================================
   5. Avantages et inconvénients
   ========================================================================== */

.bo-pour-contre {
	display: grid;
	gap: var(--bo-sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
	margin: var(--bo-sp-6) 0;
}

.bo-pour-contre__bloc {
	padding: var(--bo-sp-5);
	border-radius: var(--bo-r-lg);
	border: 1px solid;
}

.bo-pour-contre__bloc--pour {
	background: var(--bo-pro-bg);
	border-color: color-mix(in srgb, var(--bo-pro) 24%, transparent);
}

.bo-pour-contre__bloc--contre {
	background: var(--bo-con-bg);
	border-color: color-mix(in srgb, var(--bo-con) 24%, transparent);
}

.bo-pour-contre__titre {
	display: flex;
	align-items: center;
	gap: var(--bo-sp-2);
	margin: 0 0 var(--bo-sp-3);
	font-size: var(--bo-fs-base);
	font-weight: 700;
}

.bo-pour-contre__bloc--pour .bo-pour-contre__titre { color: var(--bo-pro); }
.bo-pour-contre__bloc--contre .bo-pour-contre__titre { color: var(--bo-con); }

.bo-pour-contre ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--bo-sp-3);
	font-size: var(--bo-fs-sm);
	line-height: 1.55;
}

.bo-pour-contre li {
	display: flex;
	gap: var(--bo-sp-3);
	color: var(--bo-text);
}

/*
 * Les puces sont des SVG (coche / croix), pas de simples pastilles colorées :
 * la distinction reste perceptible sans distinguer le vert du rouge.
 */
.bo-pour-contre li svg {
	flex: 0 0 auto;
	width: 17px;
	height: 17px;
	margin-top: 0.18em;
}

.bo-pour-contre__bloc--pour li svg { color: var(--bo-pro); }
.bo-pour-contre__bloc--contre li svg { color: var(--bo-con); }

/* ==========================================================================
   6. Fiche d'outil
   ========================================================================== */

.bo-outil {
	display: grid;
	gap: var(--bo-sp-4);
	grid-template-columns: auto 1fr auto;
	align-items: start;
	padding: var(--bo-sp-5);
	background: var(--bo-surface);
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-r-lg);
	box-shadow: var(--bo-shadow-1);
	margin: var(--bo-sp-5) 0;
}

.bo-outil__logo {
	width: 52px;
	height: 52px;
	border-radius: var(--bo-r-md);
	object-fit: contain;
	background: var(--bo-surface-3);
	padding: 6px;
}

.bo-outil__corps {
	min-width: 0;
}

.bo-outil__nom {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: var(--bo-sp-2);
	margin: 0 0 var(--bo-sp-2);
	font-size: var(--bo-fs-lg);
	font-weight: 700;
	color: var(--bo-navy);
}

.bo-outil__resume {
	margin: 0 0 var(--bo-sp-3);
	font-size: var(--bo-fs-sm);
	color: var(--bo-text-soft);
	line-height: 1.55;
}

.bo-outil__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--bo-sp-2) var(--bo-sp-4);
	font-size: var(--bo-fs-xs);
	color: var(--bo-text-faint);
}

.bo-outil__meta b {
	color: var(--bo-text);
	font-weight: 700;
}

.bo-outil__actions {
	display: flex;
	flex-direction: column;
	gap: var(--bo-sp-2);
	align-items: stretch;
}

/* Sur téléphone, la fiche passe en une colonne. */
@media (max-width: 40rem) {
	.bo-outil {
		grid-template-columns: auto 1fr;
	}

	.bo-outil__actions {
		grid-column: 1 / -1;
	}
}

/* ---- Note ---- */
/*
 * La note est écrite en toutes lettres à côté des étoiles.
 * Cinq étoiles dessinées ne veulent rien dire pour un lecteur d'écran, et
 * peu de chose pour un daltonien : le chiffre est la source de vérité.
 */
.bo-note {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-sp-2);
	font-size: var(--bo-fs-sm);
	font-weight: 700;
	color: var(--bo-navy);
}

.bo-note__etoiles {
	display: inline-flex;
	gap: 1px;
	color: var(--bo-coral);
}

.bo-note__etoiles svg {
	width: 15px;
	height: 15px;
}

.bo-note__valeur {
	color: var(--bo-text-soft);
	font-weight: 600;
	font-size: var(--bo-fs-xs);
}

/* ==========================================================================
   7. Liens partenaires
   ========================================================================== */

/*
 * Le bouton qui mène chez un partenaire.
 * Il porte TOUJOURS une mention visible juste dessous ou à côté. Cette
 * mention est produite par le composant lui-même (inc/), pas laissée à la
 * bonne volonté de l'auteur au moment de la rédaction.
 */
.bo-partenaire {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--bo-sp-2);
	padding: var(--bo-sp-3) var(--bo-sp-5);
	background: var(--bo-coral);
	color: var(--bo-sur-coral);
	border-radius: var(--bo-r-md);
	font-weight: 700;
	font-size: var(--bo-fs-sm);
	text-decoration: none;
	text-align: center;
	transition: background var(--bo-dur-fast) var(--bo-ease),
	            transform var(--bo-dur-fast) var(--bo-ease);
}

.bo-partenaire:hover {
	background: var(--bo-coral-hover);
	color: var(--bo-sur-coral);
}

.bo-partenaire--secondaire {
	background: transparent;
	color: var(--bo-navy);
	border: 1.5px solid var(--bo-border-strong);
}

.bo-partenaire--secondaire:hover {
	background: var(--bo-surface-3);
	color: var(--bo-navy);
}

/* Icône « nouvel onglet » : le visiteur sait où il va. */
.bo-partenaire svg {
	width: 14px;
	height: 14px;
	flex: 0 0 auto;
	opacity: 0.9;
}

.bo-mention-affiliation {
	display: block;
	margin-top: var(--bo-sp-2);
	font-size: var(--bo-fs-xs);
	line-height: 1.45;
	color: var(--bo-text-faint);
	text-align: center;
}

/* Bandeau de divulgation, en tête d'article. */
.bo-divulgation {
	display: flex;
	gap: var(--bo-sp-3);
	align-items: flex-start;
	padding: var(--bo-sp-4);
	margin: 0 0 var(--bo-sp-6);
	background: var(--bo-info-bg);
	border-left: 3px solid var(--bo-navy);
	border-radius: 0 var(--bo-r-md) var(--bo-r-md) 0;
	font-size: var(--bo-fs-sm);
	line-height: 1.55;
	color: var(--bo-text);
}

.bo-divulgation svg {
	flex: 0 0 auto;
	width: 19px;
	height: 19px;
	margin-top: 0.12em;
	color: var(--bo-navy);
}

/* ==========================================================================
   8. Verdict
   ========================================================================== */

.bo-verdict {
	position: relative;
	padding: var(--bo-sp-6);
	margin: var(--bo-sp-7) 0;
	background: linear-gradient(160deg, #1b3a6b 0%, #12213f 100%);
	color: #fff;
	border-radius: var(--bo-r-lg);
	overflow: hidden;
}

.bo-verdict__etiquette {
	display: inline-block;
	margin-bottom: var(--bo-sp-3);
	padding: 3px 10px;
	border-radius: var(--bo-r-pill);
	background: rgba(255, 107, 74, 0.2);
	color: #ffb9a5;
	font-size: var(--bo-fs-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.bo-verdict__titre {
	margin: 0 0 var(--bo-sp-3);
	font-size: var(--bo-fs-xl);
	font-weight: 800;
	color: #fff;
	text-wrap: balance;
}

.bo-verdict__texte {
	margin: 0 0 var(--bo-sp-5);
	color: rgba(255, 255, 255, 0.88);
	line-height: 1.6;
	max-width: 62ch;
	text-wrap: pretty;
}

.bo-verdict__choix {
	display: grid;
	gap: var(--bo-sp-4);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}

.bo-verdict__cas {
	padding: var(--bo-sp-4);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.13);
	border-radius: var(--bo-r-md);
}

.bo-verdict__cas h4 {
	margin: 0 0 var(--bo-sp-2);
	font-size: var(--bo-fs-sm);
	font-weight: 800;
	color: #ffb9a5;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.bo-verdict__cas p {
	margin: 0 0 var(--bo-sp-3);
	font-size: var(--bo-fs-sm);
	color: rgba(255, 255, 255, 0.84);
	line-height: 1.5;
}

/* ==========================================================================
   9. Méthodologie
   ========================================================================== */

.bo-depliant {
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-r-lg);
	background: var(--bo-surface);
	margin: var(--bo-sp-6) 0;
	overflow: hidden;
}

.bo-depliant__resume {
	display: flex;
	align-items: center;
	gap: var(--bo-sp-3);
	padding: var(--bo-sp-4) var(--bo-sp-5);
	cursor: pointer;
	font-weight: 700;
	color: var(--bo-navy);
	list-style: none;
	user-select: none;
}

.bo-depliant__resume:hover {
	background: var(--bo-surface-2);
}

.bo-depliant__resume span {
	margin-right: auto;
}

.bo-depliant__corps {
	padding: 0 var(--bo-sp-5) var(--bo-sp-5);
	font-size: var(--bo-fs-sm);
	line-height: 1.6;
	color: var(--bo-text-soft);
}

/* ==========================================================================
   10. Panneau contextuel
   ========================================================================== */

.bo-aside-bloc {
	padding: var(--bo-sp-4);
	background: var(--bo-surface-2);
	border: 1px solid var(--bo-border);
	border-radius: var(--bo-r-md);
}

.bo-aside-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bo-sp-3);
}

.bo-aside-liste a {
	display: flex;
	gap: var(--bo-sp-3);
	align-items: center;
	text-decoration: none;
	color: var(--bo-text);
	font-size: var(--bo-fs-sm);
	font-weight: 600;
	line-height: 1.35;
}

.bo-aside-liste a:hover {
	color: var(--bo-coral-dark);
}

.bo-aside-liste__rang {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	border-radius: var(--bo-r-sm);
	background: var(--bo-surface-3);
	color: var(--bo-navy);
	font-size: var(--bo-fs-xs);
	font-weight: 800;
}

/* ---- Sommaire de l'article ---- */
.bo-sommaire ol {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 2px;
	counter-reset: bo-som;
}

.bo-sommaire a {
	display: block;
	padding: var(--bo-sp-2) var(--bo-sp-3);
	border-left: 2px solid var(--bo-border);
	color: var(--bo-text-soft);
	font-size: var(--bo-fs-sm);
	text-decoration: none;
	line-height: 1.4;
	transition: border-color var(--bo-dur-fast) var(--bo-ease),
	            color var(--bo-dur-fast) var(--bo-ease);
}

.bo-sommaire a:hover,
.bo-sommaire a[aria-current="true"] {
	border-left-color: var(--bo-coral);
	color: var(--bo-navy);
	font-weight: 700;
}

/* ==========================================================================
   11. Plateau de comparaison
   ========================================================================== */

/*
 * Le plateau flottant qui rassemble les outils sélectionnés.
 * Placé au-dessus de la barre inférieure, jamais par-dessus le contenu.
 */
.bo-plateau {
	position: fixed;
	left: 50%;
	bottom: calc(var(--bo-bottombar) + var(--bo-sp-3) + env(safe-area-inset-bottom, 0px));
	z-index: calc(var(--bo-z-bottom) - 1);
	width: min(92vw, 44rem);
	display: flex;
	align-items: center;
	gap: var(--bo-sp-3);
	padding: var(--bo-sp-3) var(--bo-sp-4);
	background: var(--bo-surface);
	border: 1px solid var(--bo-border-strong);
	border-radius: var(--bo-r-lg);
	box-shadow: var(--bo-shadow-3);
	transform: translate(-50%, calc(100% + var(--bo-sp-6)));
	visibility: hidden;
	transition: transform var(--bo-dur) var(--bo-ease-out),
	            visibility 0s linear var(--bo-dur);
}

.bo-plateau[data-actif="true"] {
	transform: translate(-50%, 0);
	visibility: visible;
	transition: transform var(--bo-dur) var(--bo-ease-out), visibility 0s;
}

.bo-plateau__items {
	display: flex;
	gap: var(--bo-sp-2);
	flex: 1 1 auto;
	min-width: 0;
	overflow-x: auto;
}

.bo-plateau__item {
	display: inline-flex;
	align-items: center;
	gap: var(--bo-sp-2);
	padding: var(--bo-sp-2) var(--bo-sp-3);
	background: var(--bo-surface-3);
	border-radius: var(--bo-r-md);
	font-size: var(--bo-fs-xs);
	font-weight: 700;
	color: var(--bo-navy);
	white-space: nowrap;
}

.bo-plateau__retirer {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border: 0;
	border-radius: var(--bo-r-pill);
	background: transparent;
	color: var(--bo-text-faint);
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}

.bo-plateau__retirer:hover {
	background: var(--bo-con-bg);
	color: var(--bo-con);
}

/* ==========================================================================
   12. Fil d'Ariane, pagination, messages
   ========================================================================== */

.bo-fil {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--bo-sp-2);
	margin-bottom: var(--bo-sp-4);
	font-size: var(--bo-fs-xs);
	color: var(--bo-text-faint);
	list-style: none;
	padding: 0;
}

.bo-fil a {
	color: var(--bo-text-soft);
	text-decoration: none;
}

.bo-fil a:hover {
	color: var(--bo-coral-dark);
	text-decoration: underline;
}

.bo-fil li + li::before {
	content: "/";
	margin-right: var(--bo-sp-2);
	color: var(--bo-border-strong);
}

.bo-vide {
	padding: var(--bo-sp-7) var(--bo-sp-5);
	text-align: center;
	color: var(--bo-text-soft);
	background: var(--bo-surface);
	border: 1px dashed var(--bo-border-strong);
	border-radius: var(--bo-r-lg);
}

/* ==========================================================================
   13. Pied de page
   ========================================================================== */

.bo-pied {
	margin-top: var(--bo-sp-8);
	padding: var(--bo-sp-7) var(--bo-sp-6) var(--bo-sp-6);
	background: var(--bo-navy-deep);
	color: rgba(255, 255, 255, 0.76);
	border-radius: var(--bo-r-xl) var(--bo-r-xl) 0 0;
	font-size: var(--bo-fs-sm);
}

.bo-pied__grille {
	display: grid;
	gap: var(--bo-sp-6);
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
	margin-bottom: var(--bo-sp-6);
}

.bo-pied h3 {
	margin: 0 0 var(--bo-sp-3);
	font-size: var(--bo-fs-xs);
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.09em;
	color: rgba(255, 255, 255, 0.5);
}

.bo-pied ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--bo-sp-2);
}

.bo-pied a {
	color: rgba(255, 255, 255, 0.78);
	text-decoration: none;
}

.bo-pied a:hover {
	color: #fff;
	text-decoration: underline;
}

.bo-pied__bas {
	padding-top: var(--bo-sp-5);
	border-top: 1px solid rgba(255, 255, 255, 0.11);
	font-size: var(--bo-fs-xs);
	color: rgba(255, 255, 255, 0.55);
	line-height: 1.6;
}

/* ==========================================================================
   14. Utilitaires
   ========================================================================== */

/* Visible pour les lecteurs d'écran, invisible à l'œil. */
.bo-lecteur-seul {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.bo-section {
	margin-bottom: var(--bo-sp-8);
}

.bo-section__entete {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: var(--bo-sp-3);
	margin-bottom: var(--bo-sp-5);
}

.bo-section__titre {
	margin: 0;
	font-size: var(--bo-fs-2xl);
	font-weight: 800;
	color: var(--bo-navy);
	letter-spacing: -0.02em;
}

.bo-section__lien {
	margin-left: auto;
	font-size: var(--bo-fs-sm);
}

/* ──────────────────────────────────────────────────────────────
   DIVULGATION D'AFFILIATION — LES DEUX ÉTATS
   Le bandeau `.bo-divulgation` est défini plus haut dans ce fichier ; on ne
   le redéfinit pas, on le nuance. Une mention obligatoire ne doit pas avoir
   la même discrétion qu'une mention d'information.
   ────────────────────────────────────────────────────────────── */

.bo-divulgation--remuneree {
	background: var(--bo-warn-bg);
	border-left-color: var(--bo-warn);
}

.bo-divulgation--remuneree svg {
	color: var(--bo-warn);
}

/* ──────────────────────────────────────────────────────────────
   TABLEAU LARGE — IL DÉFILE DANS SON CADRE, PAS LA PAGE
   La classe `bo-tableau` était employée par les articles sans qu'aucune règle
   ne lui corresponde. Mesure du 01/09/2026 sur la comparaison des hébergeurs :
   le tableau réclame 739 px de large et débordait de 349 px sur un écran de
   390 px — en entraînant la PAGE entière, pas seulement lui-même. Un lecteur
   sur téléphone perdait alors le fil du texte en voulant lire un prix.
   ────────────────────────────────────────────────────────────── */

.bo-tableau {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bo-tableau > table {
	min-width: 100%;
}

.bo-tableau figcaption {
	position: sticky;
	left: 0;
}