/**
 * BetSprint — feuille principale.
 *
 * Parti pris : couleurs pleines, traits nets, angles courts, chiffres gros.
 * C'est le vocabulaire des sites de paris et des grilles de cotes — dense et
 * lisible d'un coup d'œil sur un écran de téléphone.
 *
 * Ce qu'on s'interdit, volontairement :
 *   - les dégradés décoratifs (surtout violet → rose) ;
 *   - le verre dépoli et les halos flous en fond ;
 *   - les grandes ombres douces pour hiérarchiser — ici c'est la couleur pleine
 *     et le trait qui séparent ; la seule ombre admise est une ombre portée
 *     franche, sans flou, sous les boutons ;
 *   - les gros rayons de bordure partout.
 *
 * Ordre : polices → jetons → base → mise en page → en-tête → bandeau →
 * composants → surcharges du plugin → pied de page → fiche → utilitaires →
 * écrans.
 */

/* ----------------------------------------------------------------- Polices */

/* Lexend, servie par le thème — aucune requête vers un tiers, la règle du projet
 * ne change pas. 50 Ko pour les deux fichiers.
 *
 * DEUX GRAISSES SEULEMENT, 400 et 700, et c'est délibéré. La maquette validée
 * appelle aussi du 600 : le navigateur le rend alors en 700, faute de fichier
 * intermédiaire. C'est exactement ce que le client a vu et validé. Ajouter un
 * fichier 600 changerait donc le rendu approuvé — ne pas le faire sans
 * revalider.
 *
 * Pourquoi ne pas être resté sur la pile système : sous Windows elle rend
 * Segoe UI, une grotesque neutre presque superposable à Inter. Or Inter est la
 * police par défaut de shadcn/ui, donc celle que produisent en masse les
 * interfaces générées. On avait le tell typographique sans même utiliser la
 * police en cause.
 *
 * Lexend est dessinée pour la lisibilité : son tracé vient de travaux sur la
 * fluidité de lecture, ses chiffres sont larges et bien différenciés — ce qui
 * compte quand toute la page se lit en montants et en délais — et elle ne
 * ressemble à aucune police d'interface par défaut.
 *
 * Cette liste doit rester alignée sur betsprint_preload_fonts(). Elle a
 * déclaré Outfit pendant que le préchargement pointait Barlow, et que le
 * commentaire ci-dessus annonçait Barlow : trois sources, trois réponses.
 *
 * local() en premier : si la police est déjà installée sur la machine, rien
 * n'est téléchargé. font-display: swap : le texte s'affiche immédiatement en
 * police système et bascule à l'arrivée du fichier — sur le navigateur in-app
 * de Snapchat, un texte invisible pendant trois secondes coûte plus cher
 * qu'un reflow.
 */

@font-face {
	font-family: "Lexend";
	src: local("Lexend Regular"), local("Lexend-Regular"),
		url("../fonts/lexend-400.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Lexend";
	src: local("Lexend Bold"), local("Lexend-Bold"),
		url("../fonts/lexend-700.woff2") format("woff2");
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}


/* Là où color-mix est disponible, l'ombre suit la couleur d'encre choisie au
   Customizer plutôt qu'une valeur figée. */
@supports (color: color-mix(in srgb, red, blue)) {
	:root {
		--bs-lift: 0 2px 0 color-mix(in srgb, var(--bs-ink) 32%, transparent);
	}
}

/* ------------------------------------------------------------------ Jetons */

/* Les deux jetons de police.
 *
 * Ils étaient APPELÉS quinze fois dans cette feuille et définis nulle part.
 * Une `font-family: var(--bs-font)` sur une variable inexistante est invalide
 * au calcul : la déclaration est jetée, la propriété hérite, et le site rendait
 * donc en police par défaut du navigateur — du Times sur la plupart des postes.
 * Les @font-face étaient corrects, la police téléchargée, et jamais appliquée.
 *
 * Une seule famille pour les deux : Lexend porte aussi bien le texte courant que
 * les grands corps. Le jeton d'affichage reste distinct pour que les chiffres
 * — montants, délais, notes — puissent basculer sur une autre fonte plus tard
 * sans toucher à quinze règles.
 *
 * La pile de repli est celle du système, pas une autre police téléchargée :
 * elle sert le temps du `font-display: swap`, et sur le navigateur in-app de
 * Snapchat ce temps compte. */
:root {
	--bs-font: "Lexend", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
	--bs-font-display: var(--bs-font);

	/* Colonne de lecture. 1080 px comme la maquette validée : au-delà, une
	   ligne de texte devient trop longue pour que l'œil retrouve le début de
	   la suivante, et le classement perd son alignement en colonnes. */
	--bs-wrap: 1080px;
	--bs-wrap-narrow: 720px;

	/* Filet fin. Il sépare les données sans encadrer — un trait plus appuyé
	   transformerait chaque bloc en boîte, et la page en formulaire.
	   Même valeur que --bet-border côté plugin : les deux doivent s'accorder,
	   sinon les filets du thème et ceux des cartes ne sont pas les mêmes. */
	--bs-line: #dde3ee;

	--bs-radius: 10px;
	--bs-muted: #5c6883;
	--bs-gap: 20px;
}

/* -------------------------------------------------------------------- Base */

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

/* 17 px et non 16, interligne 1,6 et non 1,55 : ce sont les valeurs de la
   maquette validée. L'écart paraît négligeable, il ne l'est pas — il se
   propage à tout ce qui hérite, et faisait perdre deux à trois pixels sur
   chaque bloc de la carte. Le classement en devenait plus serré que ce qui
   avait été approuvé. */
body {
	margin: 0;
	background: var(--bs-bg);
	color: var(--bs-ink);
	font-family: var(--bs-font);
	font-size: 17px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
}

/* Échelle calée sur la référence retenue (finanzfluss.de) : des titres très
   grands mais en graisse MOYENNE, pas en extra-bold. C'est ce qui distingue un
   comparateur éditorial d'une page promotionnelle — la taille porte la
   hiérarchie, le gras n'a pas à s'en mêler.
   Lexend étant large, un léger crénage négatif resserre les
   grands corps ; l'interlignage reste ample, à l'inverse du 1,04 que réclamait
   une condensée. */
h1, h2, h3, h4 {
	margin: 0 0 .5em;
	font-family: var(--bs-font-display);
	line-height: 1.15;
	letter-spacing: -0.02em;
	font-weight: 600;
	text-wrap: balance;
}

h1 { font-size: clamp(34px, 7.2vw, 52px); line-height: 1.08; }
h2 { font-size: clamp(25px, 4.6vw, 34px); }
h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }

p { margin: 0 0 1em; }

a {
	color: inherit;
	text-underline-offset: 3px;
}

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

/* Les chiffres alignés en colonne : indispensable pour comparer des cotes et
   des notes d'une ligne à l'autre. */
.bs-num,
.bet-card__rating,
.bet-table__rating {
	font-variant-numeric: tabular-nums;
	font-feature-settings: "tnum";
}

:focus-visible {
	outline: 3px solid var(--bs-ink);
	outline-offset: 2px;
}

/* ------------------------------------------------------------- Mise en page */

.bs-wrap {
	width: 100%;
	max-width: var(--bs-wrap);
	margin-inline: auto;
	padding-inline: 16px;
}

.bs-wrap--narrow { max-width: var(--bs-wrap-narrow); }

.bs-section { padding-block: clamp(28px, 5.5vw, 56px); }

.bs-section--tight { padding-block: clamp(22px, 3.5vw, 34px); }

/* Filet plein au-dessus du titre : la coupure de section se lit sans avoir à
   l'écarter du reste. On gagne de la densité en gardant la hiérarchie. */
/* Filet fin, pas de barre colorée : la coupure de section se lit sans avoir à
   crier. L'ancien liseré de 4 px prenait la couleur du fanion, devenue pâle —
   il aurait disparu tout en gardant son épaisseur. */
.bs-section__head {
	margin-bottom: 20px;
	padding-top: 16px;
	border-top: 1px solid var(--bs-line);
}

.bs-section__head h2 { margin-bottom: 6px; }

.bs-section__head p {
	margin: 0;
	color: var(--bs-muted);
	font-size: 15px;
	max-width: 62ch;
}

/* --------------------------------------------------------------- Bandeau 18+ */

/* La mention légale n'est pas une alerte.
 *
 * Elle a été sur aplat jaune vif. Criarde, elle captait l'œil avant le titre
 * et donnait à la page le ton d'un avertissement plutôt que celui d'un
 * comparateur — alors que le premier argument du site est d'avoir l'air plus
 * sérieux que l'opérateur vers lequel il envoie.
 *
 * Sur fond de surface, avec le « 18+ » cerné d'un trait d'encre, elle reste
 * parfaitement lisible et permanente, ce que la réglementation demande.
 *
 * Elle n'est pas désactivable depuis l'administration, et c'est délibéré :
 * c'est le genre d'élément qu'on retire « provisoirement » et qu'on oublie de
 * remettre. */
.bs-agegate {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	color: var(--bs-muted, #5c6883);
	font-size: 11.5px;
	line-height: 1.45;
	text-align: center;
	padding: 6px 16px;
}

.bs-agegate strong {
	display: inline-block;
	color: var(--bs-ink);
	font-weight: 700;
	font-size: 13px;
	border: 2px solid var(--bs-ink);
	border-radius: 4px;
	padding: 0 5px;
	margin-right: 3px;
}

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

/* Bandeau d'âge et en-tête figés d'un seul bloc.
 *
 * Le « sticky » est porté par le conteneur, pas par les deux enfants : deux
 * éléments collants frères se superposeraient, le second passant sous le
 * premier au défilement. Ainsi la mention 18+ reste visible en permanence,
 * quelle que soit la hauteur qu'elle prend quand son texte passe sur deux
 * lignes — c'est une mention réglementaire, elle ne doit jamais sortir de
 * l'écran.
 */
.bs-sticky {
	position: sticky;
	top: 0;
	z-index: 20;
}

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

.bs-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 46px;
}

.bs-logo {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--bs-font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.02em;
	text-decoration: none;
}

/* Hauteur imposée, pas un plafond.
 *
 * `max-height` laissait le logo s'afficher à sa taille intrinsèque, soit
 * 24 px : il était dessiné pour cette hauteur, donc le plafond de 32 ne
 * servait jamais. Dans un en-tête de 46 px, 24 px de logo se lisent comme une
 * vignette oubliée. La hauteur est maintenant demandée explicitement. */
.bs-logo img {
	display: block;
	height: 30px;
	width: auto;
}

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

.bs-nav a {
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	padding-block: 6px;
	border-bottom: 2px solid transparent;
}

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

.bs-burger {
	font-size: 14px;
	font-weight: 400;
	padding: 6px 10px;
	display: none;
	align-items: center;
	gap: 8px;
	background: none;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: 8px 12px;
	font: inherit;
	/* Un bouton n'hérite pas de la couleur du texte : sans cette ligne le
	   libellé retombait sur le noir par défaut du navigateur. */
	color: var(--bs-ink);
	font-weight: 700;
	font-size: 14px;
	cursor: pointer;
}

/* ----------------------------------------------------------------- Bandeau */

/* Bandeau volontairement court. Le visiteur arrive d'une publicité : il vient
   voir le classement, et chaque pixel gagné ici le rapproche de la première
   offre. Tout ce qui n'est pas le titre et la promesse est descendu plus bas. */
/* Bandeau de titre en aplat plein, titre en blanc.
 *
 * C'est la signature des grands comparateurs financiers : la page s'ouvre sur
 * un bloc de couleur qui porte le titre, la date de relevé et les liens de
 * transparence. Il fait deux choses à la fois — il annonce le sujet et il
 * établit d'emblée qui parle, ce qui compte sur un site rémunéré par les
 * opérateurs qu'il classe. */
/* Le bandeau d'accueil est CLAIR.
 *
 * Il a été un aplat bleu nuit à texte blanc. C'est l'inverse de l'arbitrage du
 * projet — clair plutôt que sombre, aucun aplat foncé hors du cadre des logos
 * — et surtout, cela mettait un mur de couleur entre l'arrivée du visiteur et
 * la première offre. Sur un trafic Snapchat où l'on paie chaque seconde
 * d'attention, la page doit donner l'impression de commencer tout de suite.
 *
 * Le seul aplat foncé assumé du thème reste le cadre des logos d'opérateurs,
 * parce que les kits média fournissent presque toujours la variante blanche. */
.bs-hero {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	padding: 13px 0 12px;
}

/* Ligne de transparence : date de relevé et renvois vers la méthode et le
   modèle économique. Petite, mais présente au-dessus du classement. */
.bs-hero__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 14px;
	margin: 7px 0 0;
	padding-top: 6px;
	font-size: 11.5px;
	line-height: 1.35;
	color: var(--bs-muted, #5c6883);
}

.bs-hero__meta a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Le sur-titre du bandeau a été retiré du gabarit : sa règle n'avait plus de
   consommateur, et elle portait encore du blanc sur le jaune du badge. */

.bs-hero__title {
	/* Pas de bride en `ch` ici. Elle valait 385 px, alors que le titre
	   n'en demande que 960 sur les 1048 disponibles : il se cassait en deux
	   lignes en laissant la moitié droite du bandeau vide, sur la première
	   chose que voit un visiteur venu d'une publicité. Sur mobile, le titre
	   passe naturellement à la ligne — c'est la largeur qui décide, pas un
	   plafond arbitraire. */
	margin-bottom: 0;
	font-size: clamp(30px, 7.4vw, 40px);
	line-height: 1.08;
	letter-spacing: -0.03em;
}

/* Mise en avant d'un mot dans un titre.
 *
 * C'était un surlignage au marqueur jaune vif. La palette validée n'a pas de
 * jaune, et un marqueur fluo dans le titre d'un comparatif d'offres de paris
 * tire la page vers l'argumentaire promotionnel — exactement ce dont le site
 * doit se distinguer.
 *
 * Reste la couleur d'accent sur le mot lui-même : plus discret, et cohérent
 * avec le « réellement » du chapeau, qui utilise déjà ce procédé. */
.bs-mark {
	color: var(--bs-accent);
	font-weight: 700;
}

.bs-hero__sub {
	max-width: 56ch;
	margin: 7px 0 0;
	font-size: 16px;
	line-height: 1.45;
	font-weight: 400;
	color: var(--bs-ink);
}

/* Première section de la page : elle enchaîne directement sur le bandeau, son
   décollement habituel n'a pas lieu d'être. */
.bs-hero + .bs-section { padding-top: clamp(16px, 2.6vw, 26px); }

/* Renvoi vers le classement. Le visiteur arrive d'une publicité : lui dire où
   se trouve la marchandise vaut mieux que d'espérer qu'il défile. */
.bs-hero__jump {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 18px;
	padding-bottom: 2px;
	font-family: var(--bs-font-display);
	font-size: 19px;
	font-weight: 700;
	text-decoration: none;
	border-bottom: 3px solid var(--bs-accent);
}

.bs-hero__jump::after {
	content: "\2193";
	font-size: 15px;
	line-height: 1;
}

/* Bandeau de réassurance, entre le bandeau d'accueil et le classement.
 *
 * Trois gages cochés et une date. Sobre par construction : fond de surface,
 * un filet en bas, aucun aplat coloré, aucun encadré. Ce qui porte la
 * confiance ici, c'est que chaque mention soit opposable — l'agrément ANJ est
 * public, la vérification a une date — pas l'insistance graphique. Ne pas en
 * faire un bloc promotionnel : le site doit toujours paraître plus sérieux que
 * l'opérateur vers lequel il envoie.
 *
 * Il tient en 84 px sur mobile, sur deux lignes de gages. C'est le budget qui
 * a permis de le remonter au-dessus du classement ; le dépasser reviendrait
 * sur l'arbitrage. */
.bs-proof {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
}

.bs-proof > .bs-wrap { padding-block: 9px; }

.bs-proof__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bs-proof__list li {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
}

/* Le picot passe de 12 à 16 px : sous cette taille, la coche évidée dans la
   pastille se referme et l'ensemble se lit comme une simple puce ronde. */
.bs-proof__list svg {
	width: 16px;
	height: 16px;
	flex: none;
}

/* La pastille lit `--bet-marker`, la variable écrite par betsprint_inline_css()
   et déjà transmise au plugin. Pas de seconde déclaration de la valeur ici :
   deux définitions du même lime finiraient par diverger, comme les polices
   l'ont fait. La valeur de repli n'existe que pour le cas où la feuille du
   thème serait servie sans son style en ligne. */
.bs-check__disc { fill: var(--bet-marker, #d8f24a); }

.bs-check__mark {
	fill: none;
	stroke: var(--bs-ink);
	stroke-width: 2.4;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.bs-proof__date {
	margin: 3px 0 0;
	font-size: 11.5px;
	color: var(--bs-muted, #5c6883);
}

/* --------------------------------------------------------------- Composants */

.bs-btn {
	display: inline-block;
	background: var(--bs-accent);
	color: #fff;
	font-family: var(--bs-font-display);
	font-weight: 800;
	/* 20 px : au-delà des 18,66 px qui définissent le « texte large » au sens
	   WCAG, seuil à partir duquel 3:1 suffit. C'est ce qui permet de garder le
	   vert vif du client plutôt que de l'assombrir pour atteindre 4,5:1. */
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: .02em;
	text-decoration: none;
	text-align: center;
	padding: 13px 24px;
	border: 0;
	border-radius: var(--bs-radius);
	box-shadow: var(--bs-lift);
	cursor: pointer;
}

.bs-btn:hover { filter: brightness(.93); color: #fff; }

.bs-btn:active,
.bet-card__cta:active {
	transform: translateY(2px);
	box-shadow: none;
}

.bs-btn--ghost {
	background: transparent;
	color: var(--bs-ink);
	border: 2px solid var(--bs-ink);
	box-shadow: none;
}

.bs-btn--ghost:hover { background: var(--bs-ink); color: #fff; filter: none; }

/* Étapes — en-tête plein plutôt que filet gauche coloré.
 *
 * Le liseré de 3-4 px sur le bord gauche d'une carte est l'un des tells les
 * plus reconnaissables des interfaces générées. On reprend à la place le rail
 * plein déjà utilisé en tête des cartes d'offre : même motif, une seule
 * grammaire pour toute la page. */
.bs-steps {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr;
	counter-reset: step;
	list-style: none;
	margin: 0;
	padding: 0;
}

.bs-step {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
	padding: 0;
}

.bs-step__num {
	display: block;
	padding: 5px 14px;
	background: var(--bs-badge);
	color: var(--bs-badge-text, #1b3059);
	font-family: var(--bs-font-display);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
}

.bs-step h3 { margin: 12px 14px 4px; }

.bs-step p { margin: 0 14px 14px; color: var(--bs-muted); font-size: 15px; }

/* Mention de rémunération, posée juste après la méthodologie : c'est là que la
   question se pose, pas au fond du pied de page. */
.bs-method__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var(--bs-line);
	font-size: 13px;
	line-height: 1.55;
	color: var(--bs-muted);
	max-width: 72ch;
}

/* FAQ — details natif, aucune dépendance JS. */
.bs-faq {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
}

.bs-faq__item + .bs-faq__item { border-top: 1px solid var(--bs-line); }

.bs-faq__item summary {
	cursor: pointer;
	padding: 14px 16px;
	font-weight: 700;
	font-size: 15.5px;
	list-style: none;
	display: flex;
	justify-content: space-between;
	gap: 16px;
	align-items: center;
}

.bs-faq__item summary::-webkit-details-marker { display: none; }

.bs-faq__item summary::after {
	content: "+";
	font-size: 22px;
	font-weight: 400;
	line-height: 1;
	color: var(--bs-accent);
	flex: none;
}

.bs-faq__item[open] summary { background: var(--bs-bg); }

.bs-faq__item[open] summary::after { content: "\2212"; }

.bs-faq__body {
	padding: 12px 16px 14px;
	color: var(--bs-muted);
	font-size: 15px;
}

.bs-faq__body > :last-child { margin-bottom: 0; }

/* Cartes d'article */
.bs-posts {
	display: grid;
	gap: var(--bs-gap);
	grid-template-columns: 1fr;
}

.bs-post {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.bs-post__thumb { display: block; aspect-ratio: 16 / 9; object-fit: cover; width: 100%; }

.bs-post__body { padding: 14px 16px; display: flex; flex-direction: column; gap: 5px; flex: 1; }

/* Casse normale et gris : la rubrique situe l'article, elle n'a pas à crier
   au-dessus de chaque titre. */
.bs-post__meta { font-size: 13px; font-weight: 600; color: var(--bs-muted); }

.bs-post__title { font-size: 17px; margin: 0; }

.bs-post__title a { text-decoration: none; }

.bs-post__title a:hover { text-decoration: underline; }

.bs-post__excerpt { margin: 0; font-size: 14.5px; color: var(--bs-muted); }

/* Contenu éditorial */
.bs-prose { max-width: 68ch; }

.bs-prose h2 { margin-top: 1.4em; }

.bs-prose ul, .bs-prose ol { padding-left: 1.25em; }

.bs-prose img { border-radius: var(--bs-radius); }

.bs-prose table { width: 100%; border-collapse: collapse; }

.bs-prose th, .bs-prose td { border: 1px solid var(--bs-line); padding: 10px 12px; text-align: left; }

/* --------------------------------------------- Surcharges du plugin Bet Engine */

/* Le plugin fournit la structure ET la mise en forme des composants ; le thème
 * les habille en redéfinissant les variables --bet-*, dans inc/enqueue.php.
 *
 * Ce bloc doit donc rester COURT. Il a porté une trentaine de règles qui
 * redessinaient la carte — pavé de rang noir, rail rouge, note encadrée,
 * bouton en capitales, code promo sur fond jaune. C'était l'habillage
 * précédent, abandonné avec l'architecture F28 le 2026-08-09 : ces règles ne
 * décoraient plus rien, elles se battaient avec le composant. Une carte
 * redessinée ici est une carte qui ne suivra pas le prochain rebranding.
 *
 * Avant d'ajouter une règle : vérifier qu'aucune variable --bet-* ne fait
 * déjà le travail.
 */

/* Le bouton porte l'ombre franche du thème — le seul relief admis ici, sans
   flou. Le plugin en pose une par défaut ; celle-ci suit la couleur d'encre
   choisie au Customizer. */
.bet-card__cta,
.bet-table__cta {
	box-shadow: var(--bs-lift);
}

.bet-card__promo code,
.bs-review__promo code {
	color: var(--bs-ink);
	font-family: var(--bs-font);
	font-weight: 700;
	letter-spacing: .06em;
}

/* Avantages et inconvénients : bandeau plein au-dessus de chaque liste,
   plutôt qu'un encadré à filet gauche coloré. La couleur porte toujours
   l'information, sans empiler une carte dans une carte. */
.bet-card__pros,
.bet-card__cons {
	background: none;
	border: 0;
	padding: 0;
}

.bet-card__verdict h3,
.bet-card__verdict h4 {
	display: block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 3px;
	font-family: var(--bs-font-display);
	/* Même arbitrage que les boutons : au-dessus de 18,66 px, le blanc sur
	   l'accent vif est conforme. */
	font-size: 19px;
	letter-spacing: .02em;
	color: #fff;
}

.bet-card__pros h3, .bet-card__pros h4 { background: var(--bs-accent); color: #fff; }
/* Encre sur le fanion, pas blanc.
 *
 * `--bs-badge` est passée d'un bleu soutenu à la teinte pâle #e6f3f6 lors du
 * port F28, et ces deux règles imposaient toujours du blanc dessus : environ
 * 1,1:1, illisible. Même mécanique que le défaut trouvé plus tôt sur
 * `--bs-badge-text` — on change une variable sans vérifier qui la consomme,
 * et le texte disparaît sans qu'aucune erreur ne soit levée.
 *
 * Avant de modifier une couleur de fond, chercher les règles qui posent du
 * texte dessus. */
.bet-card__cons h3, .bet-card__cons h4 {
	background: var(--bs-badge);
	color: var(--bs-badge-text, #1b3059);
}

.bet-score__bar { border-radius: 0; }

.bet-table th, .bet-table td { border-bottom: 1px solid var(--bs-line); }

.bet-disclaimer {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: 12px 14px;
}

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

.bs-footer {
	background: var(--bs-ink);
	color: #c3c9d4;
	padding-block: 32px 24px;
	margin-top: 36px;
	font-size: 14px;
}

.bs-footer a { color: #fff; }

.bs-footer__grid {
	display: grid;
	gap: 22px;
	grid-template-columns: 1fr;
	padding-bottom: 22px;
	border-bottom: 1px solid rgba(255, 255, 255, .14);
}

.bs-footer h4 {
	color: #fff;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin-bottom: 10px;
}

.bs-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }

/* Message de mise en garde réglementaire.
 *
 * L'arrêté du 11 juillet 2023 exige une présentation « accessible et aisément
 * lisible » et « clairement distinguable du message publicitaire ou
 * promotionnel qui l'accompagne ». D'où : taille au moins égale au corps de
 * texte, contraste AA sur le fond du pied de page, aucune opacité décorative,
 * aucun repli, et une séparation nette d'avec le reste des mentions.
 *
 * Le filet est en haut, pas à gauche : la bordure gauche colorée est proscrite
 * dans ce projet. Composant autonome et non variante de .bs-footer__legal —
 * le message doit pouvoir être repris tel quel ailleurs.
 */
.bs-warning {
	margin: 0 0 20px;
	padding: 16px 0 0;
	border-top: 2px solid rgba(255, 255, 255, .3);
	font-size: 15px;
	line-height: 1.6;
	color: #fff;
}

.bs-warning a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.bs-footer__legal {
	padding-top: 18px;
	font-size: 12.5px;
	line-height: 1.6;
	color: #9aa3b2;
}

/* « Interdit aux mineurs — 18+ » : en blanc sur l'aplat du pied de page.
   Le jaune vif de la palette précédente attirait l'œil sur la mention légale
   plus fort que sur le classement, et la palette validée n'a pas de jaune. */
.bs-footer__legal strong { color: #ffffff; }

/* Conservée pour d'éventuels usages du menu légal ; le numéro d'aide n'est
   plus affiché séparément, il fait partie du message réglementaire. */
.bs-footer__helpline {
	display: inline-block;
	margin-top: 8px;
	border: 1px solid rgba(255, 255, 255, .25);
	border-radius: var(--bs-radius);
	padding: 8px 12px;
	color: #fff;
	font-weight: 700;
}

/* ------------------------------------------------- Fiche opérateur (avis) */

.bs-review__head {
	background: var(--bs-surface);
	border-bottom: 1px solid var(--bs-line);
	padding-block: 16px;
}

/* Sur téléphone : cadre à logo et note aux deux bouts d'une première ligne,
   titre et offre en dessous sur toute la largeur. Les trois en colonne
   laissaient une centaine de pixels au titre, qui se cassait en deux lignes
   et l'intitulé du bonus en trois. */
.bs-review__headinner {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	grid-template-areas:
		"brand score"
		"intro intro";
	gap: 12px;
	align-items: center;
}

.bs-review__brand { grid-area: brand; }
.bs-review__intro { grid-area: intro; }

/* Même cadre sombre que dans la carte, en plus grand. Voir .bet-card__logo
   dans la feuille du plugin pour le pourquoi. */
.bs-review__brand img {
	width: 132px;
	height: 46px;
	padding: 6px 10px;
	object-fit: contain;
	background: var(--bs-logo-bg);
	border-radius: var(--bs-radius);
}

/* Le titre doit primer nettement sur l'intitulé de l'offre : à taille presque
   égale, les deux lignes se disputaient l'attention et l'en-tête devenait
   illisible. Un cran franc entre les deux suffit. */
.bs-review__intro h1 {
	margin-bottom: 3px;
	font-size: clamp(24px, 6vw, 36px);
}

.bs-review__bonus {
	margin: 0;
	font-family: var(--bs-font-display);
	font-size: clamp(17px, 4.4vw, 21px);
	font-weight: 800;
	line-height: 1.2;
	color: var(--bs-ink);
}

.bs-review__licence { margin: 3px 0 0; font-size: 11px; color: var(--bs-muted); }

/* Le score est le premier élément que l'œil doit trouver : bloc plein,
   chiffre lourd, aucune décoration autour. */
.bs-review__score {
	grid-area: score;
	justify-self: end;
	display: flex;
	align-items: baseline;
	gap: 2px;
	background: var(--bs-surface);
	color: var(--bs-ink);
	padding: 5px 10px;
	border: 3px solid var(--bs-ink);
	border-radius: var(--bs-radius);
	font-family: var(--bs-font-display);
	font-variant-numeric: tabular-nums;
}

.bs-review__score strong { font-size: clamp(24px, 6.4vw, 34px); font-weight: 800; line-height: 1; }
.bs-review__score span { font-size: 13px; font-weight: 700; color: var(--bs-muted); }

.bs-review__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 12px;
	margin: 0 0 14px;
}

.bs-review__cta .bs-btn { flex: 1 1 220px; }

.bs-review__promo {
	flex: none;
	font-size: 13px;
	font-weight: 700;
}

/* Le lien d'affiliation suit le lecteur : une fiche de comparateur fait
 * plusieurs milliers de mots, l'action ne peut pas rester en haut de page.
 *
 * C'est le rappel de fin qui porte la barre, pas celui du haut : `bottom: 0`
 * ne retient qu'un élément dont la place naturelle est sous le bas de la
 * fenêtre. Appliqué au bloc du haut, il ne collait rien du tout — l'élément
 * défilait par le haut comme n'importe quel autre. Placé sur le rappel final,
 * il est épinglé dès le chargement et se libère à la fin de l'article.
 *
 * Collé en bas et non en haut : l'en-tête est déjà fixe, deux barres
 * mangeraient un cinquième de l'écran.
 */
.bs-review__cta--end {
	position: sticky;
	bottom: 0;
	z-index: 15;
	margin: 0 -16px;
	padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
	background: var(--bs-surface);
	border-top: 2px solid var(--bs-ink);
}

.bs-review__cta--end .bs-btn { flex: 1 1 auto; min-width: 0; }

/* Chaque section devient une carte : sans surface, la fiche n'était qu'un mur
   de texte posé sur le fond de page — elle avait l'air inachevée à côté de
   l'accueil. */
.bs-review__section {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	padding: 16px;
	margin-bottom: 12px;
}

.bs-review__section > h2 {
	font-size: clamp(19px, 4.2vw, 25px);
	padding-bottom: 10px;
	border-bottom: 3px solid var(--bs-badge);
	margin-bottom: 14px;
}

.bs-review__section > :last-child { margin-bottom: 0; }

.bs-review__method {
	margin: 12px 0 0;
	font-size: 12.5px;
	color: var(--bs-muted);
}

.bs-review__back { font-size: 14px; font-weight: 600; }

/* Sommaire */
/* Même traitement que les étapes : en-tête plein, pas de filet gauche. */
.bs-toc {
	background: var(--bs-surface);
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
	overflow: hidden;
	padding: 0;
	margin-bottom: 12px;
}

.bs-toc h2 {
	margin: 0;
	padding: 5px 14px;
	background: var(--bs-badge);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
}

.bs-toc ol {
	margin: 10px 14px 12px;
	padding-left: 20px;
	display: grid;
	gap: 4px;
	font-size: 15px;
	font-weight: 600;
}

/* Tableau de caractéristiques */
.bs-specs {
	margin: 0;
	display: grid;
	overflow: hidden;
	border: 1px solid var(--bs-line);
	border-radius: var(--bs-radius);
}

.bs-specs__row {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 12px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--bs-line);
}

.bs-specs__row:nth-child(odd) { background: var(--bs-bg); }

/* Dans une fiche, la section est déjà une carte : encadrer le tableau à
   l'intérieur empilerait deux cadres. Il file d'un bord à l'autre, les
   filets et l'alternance suffisent à le tenir. */
.bs-review__section .bs-specs { border: 0; border-radius: 0; margin-inline: -16px; }
.bs-review__section .bs-specs__row { padding-inline: 16px; }

.bs-specs__row:last-child { border-bottom: 0; }

.bs-specs__row dt { color: var(--bs-muted); font-size: 14px; }
.bs-specs__row dd { margin: 0; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }

/* Avertissement (offre expirée) */
.bs-notice {
	background: #fff8e1;
	border: 1px solid #f0d264;
	border-radius: var(--bs-radius);
	padding: 12px 16px;
	margin-bottom: 16px;
	font-size: 14px;
	font-weight: 600;
}

/* Monogramme de repli quand aucun logo n'est déposé. Mêmes dimensions et même
   fond que le cadre à logo : l'en-tête de fiche garde son gabarit, qu'un
   fichier existe ou non. */
.bs-monogram {
	display: inline-grid;
	place-items: center;
	width: 132px;
	height: 46px;
	background: var(--bs-logo-bg);
	color: #fff;
	font-size: 19px;
	font-weight: 900;
	letter-spacing: .02em;
	border-radius: var(--bs-radius);
}

/* -------------------------------------------------------------- Utilitaires */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--bs-ink);
	color: #fff;
	padding: 10px 16px;
	z-index: 100;
}

.skip-link:focus { left: 0; }

/* ------------------------------------------------------------------ Écrans */

@media (max-width: 720px) {
	.bs-nav {
		display: none;
		width: 100%;
		padding-bottom: 12px;
	}

	.bs-header__inner { flex-wrap: wrap; }

	.bs-nav.is-open { display: block; }

	.bs-nav ul { flex-direction: column; align-items: stretch; gap: 0; }

	.bs-nav li + li { border-top: 1px solid var(--bs-line); }

	.bs-nav a { display: block; padding: 12px 0; border-bottom: 0; }

	.bs-burger { display: inline-flex; }
}

/* Sur grand écran, les trois gages et la date tiennent sur une seule ligne, la
   date poussée à droite. Le bandeau ne fait plus qu'une hauteur de ligne. */
@media (min-width: 900px) {
	.bs-proof > .bs-wrap {
		display: flex;
		align-items: baseline;
		justify-content: space-between;
		gap: 18px;
		padding-block: 11px;
	}

	.bs-proof__list { gap: 6px 22px; }
	.bs-proof__list li { font-size: 13px; }

	.bs-proof__date {
		margin: 0;
		white-space: nowrap;
	}
}

@media (min-width: 721px) {
	.bs-steps { grid-template-columns: repeat(3, 1fr); }
	.bs-posts { grid-template-columns: repeat(3, 1fr); }
	.bs-footer__grid { grid-template-columns: 2fr 1fr 1fr; }

	.bs-review__head { padding-block: 24px; }
	.bs-review__brand img { max-height: 60px; }
	.bs-monogram { width: 60px; height: 60px; font-size: 21px; }
	.bs-review__section { padding: 22px 24px; }

	.bs-review__headinner {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas: "brand intro score";
	}

	/* Sur grand écran, le curseur est déjà à portée du bouton et la fenêtre
	   est haute : la barre collée occuperait le bas de l'écran pour rien. */
	.bs-review__cta--end {
		position: static;
		margin-inline: 0;
		padding: 0;
		border-top: 0;
		background: none;
		margin-bottom: 16px;
	}

	.bs-review__cta .bs-btn,
	.bs-review__cta--end .bs-btn { flex: 0 1 320px; }
	.bs-review__promo { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }

	.bs-btn:active,
	.bet-card__cta:active { transform: none; }
}

@media print {
	.bs-header, .bs-footer, .bs-agegate, .bet-card__cta, .bs-review__cta { display: none; }
}