/**
 * Bet Engine — structure des composants.
 *
 * Vocabulaire visuel repris des grands comparateurs financiers américains
 * (NerdWallet et assimilés), qui résolvent exactement le même problème :
 * présenter des offres commerciales sans avoir l'air d'une publicité.
 *
 * Ce qu'on leur emprunte, et pourquoi :
 *
 *   - fond blanc et respiration large. La densité vient de l'alignement des
 *     données, pas du resserrement ;
 *   - des filets fins gris pour séparer, jamais de contour épais ni d'ombre
 *     portée. Le trait sépare, il ne décore pas ;
 *   - une seule couleur d'accent, dépensée rarement mais franchement : le
 *     bouton, la note, le fanion de distinction. Rien d'autre ;
 *   - des poids typographiques moyens. Le gras appuyé sur chaque élément
 *     annule la hiérarchie qu'il prétend créer ;
 *   - les caractéristiques en grille séparée par des filets verticaux : c'est
 *     ce qui rend une ligne comparable à la suivante.
 *
 * Toutes les couleurs passent par des variables, redéfinies par le thème.
 */

:root {
	--bet-radius: 10px;
	--bet-gap: 20px;
	--bet-surface: #ffffff;
	--bet-tint: #f7f8fa;
	--bet-border: #dfe3e8;
	--bet-border-strong: #b9c4d8;
	--bet-text: #1c2b3a;
	--bet-muted: #5b6b7c;
	--bet-accent: #1a56db;
	--bet-accent-text: #ffffff;
	/* Teinte pâle de l'accent : fond des fanions et des pastilles de valeur. */
	--bet-accent-soft: #eaf0fd;
	--bet-badge: #eaf0fd;
	--bet-badge-text: #10306e;
	--bet-bullet: #16a34a;
	--bet-font-display: inherit;
	--bet-shadow: none;
	/* Bandeau de tête de l'offre recommandée. Assez teinté pour asseoir la
	   carte, assez pâle pour que la zone de décision reste blanche. */
	--bet-featured-head: #eaf0fd;
	/* Variante sombre de l'accent, pour les petits textes posés sur un fond
	   teinté. L'accent lui-même est calibré sur BLANC : sur un fond même
	   légèrement coloré il perd assez de contraste pour passer sous le seuil
	   AA en texte courant. Le thème la recalcule depuis sa propre palette. */
	--bet-accent-deep: #14418f;
	/* La consigne d'activation. Ivoire, pas rouge : elle prévient, elle
	   n'alarme pas — la panique fait fermer l'onglet. */
	--bet-notice-bg: #fdf3e3;
	--bet-notice-border: #f0dfba;
	--bet-notice-icon: #8a6a1f;
	/* Le surligneur du montant. Lime acide : c'est la seule couleur vive de
	   toute la page, et elle ne sert qu'à une chose. Le texte posé dessus
	   reste en encre foncée — c'est ce qui garde le contraste. */
	--bet-marker: #d8f24a;
}

/* ---------------------------------------------------------------- Liste */

.bet-offers__list {
	display: grid;
	gap: 8px;
}

.bet-offers__title {
	margin: 0 0 var(--bet-gap);
}

/* Les offres au-delà des trois premières.
 *
 * Repliées par <details>, donc sans JavaScript : le trafic arrive par le
 * navigateur intégré de Snapchat, où l'on ne peut compter ni sur l'exécution
 * d'un script ni sur sa vitesse. Le classement reste entier dans le document,
 * indexable et accessible au clavier.
 *
 * Le bloc annonce du contenu, il n'appelle pas au clic : contour seul, pas
 * d'aplat, et une hauteur inférieure à celle d'un bouton. */
.bet-offers__more > summary {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 10px;
	padding: 11px 16px;
	font-size: 14.5px;
	font-weight: 400;
	/* Le bloc est posé sur le fond de page, légèrement teinté, où l'accent
	   tombe à 4,24:1. Le TEXTE prend donc la variante sombre ; le contour
	   garde l'accent, un filet relevant du seuil de 3:1. */
	color: var(--bet-accent-deep);
	list-style: none;
	cursor: pointer;
	background: transparent;
	border: 1px solid var(--bet-accent);
	border-radius: var(--bet-radius);
}

.bet-offers__more > summary::-webkit-details-marker { display: none; }

.bet-offers__more > summary::after {
	content: "\2193";
	font-weight: 400;
}

.bet-offers__more[open] > summary::after { content: "\2191"; }

.bet-offers__list--rest { margin-top: 10px; }

/* ---------------------------------------------------------------- Carte */

.bet-card {
	position: relative;
	display: grid;
	gap: 5px;
	padding: 14px;
	background: var(--bet-surface);
	border: 1px solid var(--bet-border);
	border-radius: var(--bet-radius);
	color: var(--bet-text);
	overflow: hidden;
}

/* L'offre recommandée se signale par un filet supérieur franc et un bandeau
   de tête à peine teinté. La zone où l'on décide — montant, chiffres, bouton —
   reste blanche : c'est la couleur qui se lit le mieux. */
.bet-card--featured {
	border-top: 3px solid var(--bet-accent);
}

/* Une ligne vide est ramenée à zéro, mais RESTE dans la grille.
 *
 * `display: none` la retirerait purement et simplement, et toutes les lignes
 * suivantes remonteraient d'un cran — ce qui détruit l'alignement en colonnes
 * que le subgrid est censé garantir, et pour lequel le gabarit prend justement
 * la peine d'émettre ses dix lignes même vides. La première version de cette
 * règle faisait exactement l'inverse de ce que son propre commentaire
 * annonçait, et le défaut ne se serait vu que sur une offre incomplète. */
.bet-card__row:empty {
	padding-block: 0;
	min-height: 0;
}

/* ------------------------------------------------------ Rang et bandeau */

.bet-card__row--rank {
	margin: -14px -14px 0;
	padding: 8px 14px 7px;
}

.bet-card--featured .bet-card__row--rank {
	background: var(--bet-featured-head);
}

.bet-card__choice,
.bet-card__rank {
	font-size: 14px;
	font-weight: 600;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-variant-numeric: tabular-nums;
}

/* Posé sur le bandeau teinté, donc sur la variante sombre : l'accent y tombe
   à 4,01:1, sous le seuil AA pour un texte de 12,5 px. */
.bet-card__choice { color: var(--bet-accent-deep); }
.bet-card__rank { color: var(--bet-muted); }

/* ------------------------------------------------------- Ligne d'identité */

.bet-card__row--brand {
	display: flex;
	align-items: center;
	gap: 10px;
	text-align: left;
}

/* Le logo garde son fond et ses proportions : c'est le repère qui permet de
   reconnaître un opérateur sans lire son nom. */
.bet-card__logo {
	flex: none;
	width: 46px;
	height: 46px;
	object-fit: contain;
	border-radius: 10px;
}

/* Le nom porte un souligné aux couleurs de l'opérateur, posé par le thème via
   --bet-op. Assez pour que cinq cartes ne se suivent pas à l'identique, trop
   peu pour colorer la page — et le bouton reste à la charte du comparateur,
   jamais à celle de l'annonceur. */
.bet-card__name {
	flex: 0 0 auto;
	font-size: 23px;
	font-weight: 700;
	letter-spacing: -0.01em;
	border-bottom: 2px solid var(--bet-op, transparent);
	padding-bottom: 2px;
}

/* ------------------------------------------------------------ Idéal pour */

/* Une étiquette, pas un titre : c'est le contenu qui porte l'information. */
.bet-card__best {
	margin: 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--bet-muted);
}

.bet-card__best-label {
	margin-right: 5px;
	font-size: 10.5px;
	font-weight: 400;
	letter-spacing: .02em;
	text-transform: uppercase;
}

.bet-card__best b {
	font-weight: 600;
	color: var(--bet-text);
}

/* ----------------------------------------------------------------- Offre */

/* Le montant est le seul point d'accroche de la carte : en noir sur blanc il
   resterait du texte parmi du texte, même agrandi. */
/* Le montant est le SEUL point d'accroche de la carte, et il le montre.
 *
 * Le chiffre est posé sur un aplat teinté qui l'isole du reste. Sans lui, la
 * carte offrait sept éléments en gras qui se disputaient l'attention : le nom,
 * « Idéal pour », le libellé du bonus, les trois chiffres, la consigne, le
 * dépliant. Le montant y était le plus gros sans être le plus fort — et sur un
 * écran de téléphone, tout se lisait d'un bloc.
 *
 * L'aplat prend la teinte pâle de l'accent, pas une couleur nouvelle : il
 * attire l'œil sans tirer la page vers l'argumentaire promotionnel. Le site
 * doit toujours paraître plus sérieux que l'opérateur vers lequel il envoie. */
.bet-card__amount {
	margin: 0;
	padding: 2px 0 0;
	font-family: var(--bet-font-display);
	font-size: clamp(42px, 11.5vw, 48px);
	font-weight: 700;
	line-height: 1.08;
	letter-spacing: -0.02em;
	color: var(--bet-text);
	text-align: center;
	background: none;
	border-radius: 0;
}

/* Le surligneur derrière le chiffre.
 *
 * Le montant était en turquoise sur blanc : gros, mais du texte parmi du texte
 * — il ne sautait pas aux yeux, il attendait qu'on le trouve. En encre foncée
 * sur un trait de marqueur, il devient le seul point de la carte que l'œil ne
 * peut pas éviter.
 *
 * Trois précautions pour que ça reste un comparateur et pas une bannière :
 *
 *   · le trait ne couvre PAS toute la hauteur du chiffre. Il monte aux deux
 *     tiers, comme un vrai marqueur passé à la main : un rectangle plein ferait
 *     étiquette promotionnelle ;
 *   · il déborde légèrement à gauche et à droite, et ses angles sont inégaux.
 *     Un surlignage parfaitement rectangulaire se lit comme un élément
 *     d'interface, pas comme une emphase ;
 *   · l'encre reste au-dessus. Le contraste de l'encre sur le lime dépasse
 *     largement le seuil AA, là où du blanc ou du turquoise dessus serait
 *     illisible.
 *
 * `-2deg` : le trait n'est pas parfaitement horizontal. C'est ce qui empêche
 * l'œil de le lire comme un cadre. */
.bet-card__figure {
	position: relative;
	display: inline-block;
	font-weight: 700;
	z-index: 0;
	padding-inline: 6px;
}

.bet-card__figure::before {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	bottom: 4%;
	height: 62%;
	z-index: -1;
	background: var(--bet-marker);
	border-radius: 22px 6px 20px 8px;
	transform: rotate(-2deg);
}

/* « Jusqu'à » n'est pas l'argument, c'est l'honnêteté : plus petit, gris, il
   ne dispute pas le chiffre. Un « 100 € remboursés » veut presque toujours
   dire « jusqu'à 100 € ».
   Il a porté 62 % d'opacité à un moment : le client l'a relevé comme une des
   causes de l'impression de page terne. Un gris assumé vaut mieux qu'un noir
   affaibli. */
.bet-card__upto {
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--bet-muted);
	vertical-align: middle;
}

/* Le libellé qui qualifie le montant — « remboursés en argent réel ».
   En gras à 16 px, il disputait l'attention au chiffre à l'intérieur même de
   son encadré : deux poids forts à trois pixels l'un de l'autre, et l'œil ne
   sait plus lequel lire. C'est le chiffre qui accroche, la phrase qui explique. */
.bet-card__amount em {
	display: block;
	margin-top: 4px;
	font-size: 17.5px;
	font-style: normal;
	font-weight: 600;
	letter-spacing: 0;
	color: var(--bet-text);
}

/* L'accroche explique, elle n'annonce pas.
 *
 * À 16 px elle arrivait à un demi-point du libellé de l'offre, qui est à 17,5
 * en graisse 600 : deux textes de poids voisins l'un sous l'autre, et l'œil ne
 * sait plus lequel lire en premier. Sur mobile, où tout est empilé, elle
 * occupait trois lignes pleines entre le montant et le bouton — la partie de
 * la carte qui devrait mener au clic.
 *
 * 13,5 px creuse l'écart franchement. Le rapport avec le libellé passe de 1,09
 * à 1,30 : la hiérarchie se lit sans avoir à la chercher. */
.bet-card__pitch {
	margin: 0;
	font-size: 13.5px;
	line-height: 1.45;
	color: var(--bet-muted);
	text-align: center;
}

/* ------------------------------------------------ Caractéristiques chiffrées */

/* Trois colonnes séparées par des filets fins, sans fond : c'est l'alignement
   d'une carte à l'autre qui rend le classement comparable, pas le remplissage.
   Ce sont les trois seuls chiffres qui décident vraiment — combien il faut
   mettre, quand on peut jouer, quand on récupère. */
.bet-card__metrics {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: 1fr;
	margin: 0;
	padding: 2px 0 4px;
	list-style: none;
	font-size: 12.5px;
	line-height: 1.5;
	text-align: center;
}

.bet-card__metrics li {
	padding-inline: 6px;
	border-left: 1px solid var(--bet-border);
}

.bet-card__metrics li:first-child { border-left: 0; }

.bet-card__metrics b {
	display: block;
	font-family: var(--bet-font-display);
	font-size: 17.5px;
	font-weight: 700;
	line-height: 1.25;
	font-variant-numeric: tabular-nums;
}

.bet-card__metrics span {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: 11.5px;
	line-height: 1.3;
	color: var(--bet-muted);
}

.bet-ic {
	flex: none;
	vertical-align: -1px;
}

/* ------------------------------------------------- Consigne d'activation */

/* Déposer par PayPal ou Paysafecard annule l'offre chez la plupart des
   opérateurs, et le joueur ne l'apprend qu'après avoir déposé. C'est la seule
   information de la carte qui lui évite une perte sèche. */
.bet-card__notice {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 7px 10px;
	font-size: 15px;
	line-height: 1.35;
	background: var(--bet-notice-bg);
	border: 1px solid var(--bet-notice-border);
	border-radius: 8px;
}

.bet-card__notice .bet-ic { color: var(--bet-notice-icon); }

/* ---------------------------------------------------------------- Action */

.bet-card__row--action {
	display: grid;
	gap: 4px;
}

.bet-card__cta,
.bet-table__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 14px 18px;
	font-size: 18px;
	font-weight: 700;
	/* Pas de line-height ici : il hérite du corps de texte (1,6), et c'est ce
	   qui donne au bouton sa hauteur de 52 px sur la maquette validée. En
	   figer un le désolidariserait du reste. */
	text-align: center;
	text-decoration: none;
	color: var(--bet-accent-text);
	background: var(--bet-accent);
	border-radius: 8px;
	box-shadow: 0 2px 0 rgba(0, 0, 0, .16);
	transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}

.bet-card__cta:hover,
.bet-table__cta:hover,
.bet-card__cta:focus-visible,
.bet-table__cta:focus-visible {
	filter: brightness(.92);
	color: var(--bet-accent-text);
}

/* Le relief au survol est réservé aux vrais pointeurs.
 *
 * `@media (hover: hover)` n'est pas une précaution théorique ici : le trafic
 * arrive par le navigateur intégré de Snapchat. Sur un écran tactile, `:hover`
 * se déclenche au toucher et RESTE actif après le doigt levé — la carte
 * touchée resterait soulevée jusqu'au prochain appui ailleurs. L'effet est
 * donc désactivé là où il ne veut rien dire.
 *
 * `:focus-visible` garde le seul changement de luminosité, sans déplacement :
 * un élément qui bouge quand on l'atteint au clavier fait perdre le repère. */
@media (hover: hover) {

	.bet-card__cta:hover,
	.bet-table__cta:hover {
		transform: translateY(-1px);
		box-shadow: 0 2px 0 rgba(0, 0, 0, .16), 0 8px 18px -8px rgba(27, 48, 89, .5);
	}

	.bet-card__cta:active,
	.bet-table__cta:active {
		transform: translateY(0);
		box-shadow: 0 1px 0 rgba(0, 0, 0, .16);
	}

	/* La carte se détache légèrement et prend le filet d'accent. Deux pixels,
	   pas huit : le classement doit rester une grille stable, on signale la
	   carte sous le curseur sans donner l'impression qu'elle décolle. */
	.bet-card {
		transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
	}

	.bet-card:hover {
		border-color: var(--bet-accent);
		box-shadow: 0 10px 24px -12px rgba(27, 48, 89, .38);
		transform: translateY(-2px);
	}

	/* Dépliant ouvert : la carte ne bouge plus. Le panneau est posé en
	   surimpression sous elle ; la déplacer ferait glisser le panneau avec,
	   sous le curseur qui vient d'y entrer. */
	.bet-card:has(.bet-card__details[open]):hover {
		transform: none;
	}
}

.bet-card__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 2px 12px;
	margin: 0;
	font-size: 12.5px;
	color: var(--bet-muted);
	text-align: center;
}

.bet-card__meta:empty { display: none; }

.bet-card__promo code {
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--bet-text);
}

.bet-card__promo-usage { flex-basis: 100%; }

/* Cible de pointeur : 32 px, soit un tiers de marge au-dessus des 24 px
   exigés par WCAG 2.2 AA (2.5.8) pour un lien. Ce n'est pas un bouton — les
   44 px de la règle Apple s'appliquent à l'action principale, qui est juste
   au-dessus. */
.bet-card__review {
	display: inline-flex;
	align-items: center;
	min-height: 32px;
	font-size: 14.5px;
	color: var(--bet-muted);
	text-decoration: underline;
	text-decoration-color: var(--bet-border-strong);
	text-underline-offset: 3px;
}

.bet-card__review:hover { text-decoration-color: var(--bet-muted); }

/* -------------------------------------------------------------- Dépliant */

.bet-card__details {
	border-top: 1px solid var(--bet-border);
	padding-top: 2px;
}

.bet-card__details > summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	min-height: 44px;
	font-size: 17.5px;
	font-weight: 600;
	list-style: none;
	cursor: pointer;
}

.bet-card__details > summary::-webkit-details-marker { display: none; }

.bet-card__details > summary::after {
	content: "+";
	font-size: 19px;
	font-weight: 400;
	color: var(--bet-muted);
}

.bet-card__details[open] > summary::after { content: "\2212"; }

.bet-card__fields {
	margin: 0;
	padding-bottom: 8px;
	font-size: 15.5px;
	line-height: 1.5;
}

.bet-card__fields > div {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 10px;
	padding: 7px 0;
	border-top: 1px solid var(--bet-border);
}

.bet-card__fields dt {
	flex: 0 0 auto;
	color: var(--bet-muted);
}

.bet-card__fields dd {
	flex: 1 1 55%;
	margin: 0;
	font-weight: 600;
}

.bet-card__legal {
	margin: 0;
	font-size: 12px;
	color: var(--bet-muted);
	text-align: center;
}

/* ------------------------------------------------------- Points clés (fiche) */

.bet-card__highlights {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 8px;
	font-size: 15px;
	line-height: 1.5;
}

.bet-card__highlights li {
	padding-left: 24px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%2316a34a'%3E%3Cpath d='M8.1 13.9 4.7 10.5l1.4-1.4 2 2 5.8-5.8 1.4 1.4z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: 0 3px;
	background-size: 17px 17px;
}

/* --------------------------------------------------- Moyens de paiement */

.bet-card__payments {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.bet-card__payments li {
	font-size: 12.5px;
	color: var(--bet-muted);
}

.bet-card__payments--icon img {
	display: block;
	height: 24px;
	width: auto;
	border-radius: 3px;
}

/* ------------------------------------------------------------ Avis (fiche) */

.bet-card__verdict {
	display: grid;
	gap: 20px;
}

.bet-card__verdict h3,
.bet-card__verdict h4 {
	margin: 0 0 8px;
	font-size: 15px;
	font-weight: 600;
}

.bet-card__pros h3, .bet-card__pros h4 { color: #15803d; }
.bet-card__cons h3, .bet-card__cons h4 { color: #b42318; }

.bet-card__verdict ul {
	margin: 0;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.55;
	display: grid;
	gap: 6px;
}

/* --------------------------------------------------- Grille de notation */

.bet-scores {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
}

.bet-score {
	display: grid;
	grid-template-columns: minmax(110px, 1.2fr) 2fr auto;
	align-items: center;
	gap: 14px;
	font-size: 14px;
}

.bet-score__label { color: var(--bet-muted); }

.bet-score__bar {
	display: block;
	height: 6px;
	background: var(--bet-tint);
	border-radius: 3px;
	overflow: hidden;
}

.bet-score__bar > span {
	display: block;
	height: 100%;
	background: var(--bet-accent);
	border-radius: 3px;
}

.bet-score__value {
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	min-width: 34px;
	text-align: right;
}

/* -------------------------------------------------------------- Tableau */

.bet-table__scroll {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.bet-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
}

.bet-table th,
.bet-table td {
	padding: 16px 14px;
	text-align: left;
	vertical-align: middle;
	border-bottom: 1px solid var(--bet-border);
}

.bet-table thead th {
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--bet-muted);
}

.bet-table__bonus { font-weight: 600; }

.bet-table__rating {
	white-space: nowrap;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------- Mentions */

.bet-disclaimer {
	margin-top: 20px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--bet-muted);
}

/* -------------------------------------------------------- Accessibilité */

.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;
}

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

/* Au-delà du mobile, le classement passe en colonnes et les cartes PARTAGENT
 * leurs lignes.
 *
 * C'est ce qui distingue un comparateur d'une pile d'encarts : le montant de
 * la première offre est sur la même horizontale que celui de la deuxième, les
 * trois chiffres s'alignent, les boutons aussi. L'œil compare en balayant, il
 * n'a pas à mémoriser.
 *
 * `subgrid` exige un nombre de lignes constant — c'est pourquoi le gabarit
 * émet toujours ses dix lignes, même vides. Une ligne vide est ramenée à zéro
 * par `:empty` et ne coûte rien.
 *
 * La cinquième ligne prend `1fr` : c'est l'accroche, le seul contenu de
 * longueur vraiment variable. Elle absorbe l'écart pour que tout ce qui suit
 * reste aligné. */
@media (min-width: 900px) {
	.bet-offers__list {
		grid-template-columns: 1.14fr 1fr 1fr;
		grid-template-rows: auto auto auto auto 1fr auto auto auto auto auto;
		gap: 10px;
		align-items: start;
	}

	.bet-card {
		grid-row: span 10;
		grid-template-rows: subgrid;
		gap: 0;
		padding: 18px;
	}

	/* Le dépliant s'ouvre EN SURIMPRESSION, sans changer la hauteur de sa ligne.
	 *
	 * Les dix lignes sont partagées entre les trois cartes — c'est ce qui aligne
	 * les montants, les chiffres et les boutons. Mais le subgrid propage toute
	 * variation de hauteur : tant que le panneau poussait dans le flux, l'ouvrir
	 * sur une carte faisait grandir la ligne des TROIS, laissant un grand vide
	 * sous les deux autres. On croyait avoir ouvert deux accordéons.
	 *
	 * Sortir les deux dernières lignes du subgrid ne marche pas :
	 * `grid-template-rows: subgrid auto auto` est une valeur invalide, donc
	 * jetée en silence — et c'est tout l'alignement qui disparaît, sans erreur.
	 *
	 * La surimpression garde la ligne à hauteur constante. Le panneau recouvre
	 * brièvement ce qui suit le podium, ce qui est le comportement attendu d'un
	 * dépliant et n'a aucun effet sur les cartes voisines.
	 *
	 * Sur mobile les cartes s'empilent, il n'y a pas de grille partagée : le
	 * panneau y reste dans le flux, là où pousser vers le bas est naturel. */
	/* La carte porte `overflow: hidden`, pour que le bandeau de tête — qui
	   déborde en marges négatives jusqu'aux bords — ne dépasse pas des angles
	   arrondis. Ce même réglage coupait net le panneau en surimpression.
	   On rend donc ses angles au bandeau lui-même, ce qui permet de lever le
	   rognage pendant qu'un dépliant est ouvert. */
	.bet-card__row--rank {
		border-radius: calc(var(--bet-radius) - 2px) calc(var(--bet-radius) - 2px) 0 0;
	}

	.bet-card:has(.bet-card__details[open]) {
		overflow: visible;
		z-index: 6;
	}

	/* Le panneau s'ancre au bas de la CARTE, pas au résumé.
	   Ancré au résumé, il recouvrait la mention « 18+ · Offre soumise à
	   conditions » qui vient après lui dans la carte — une mention légale qui
	   ne doit jamais être masquée. */
	.bet-card__details[open] > .bet-card__fields {
		position: absolute;
		left: -1px;
		right: -1px;
		top: 100%;
		z-index: 5;
		padding: 2px 18px 14px;
		background: var(--bet-surface);
		border: 1px solid var(--bet-border);
		border-top: 0;
		border-radius: 0 0 var(--bet-radius) var(--bet-radius);
		box-shadow: 0 10px 24px rgba(28, 43, 58, .13);
	}

	.bet-card__row { padding-block: 5px; }

	.bet-card__row--rank {
		margin: -18px -18px 0;
		padding: 8px 18px 7px;
	}

	/* L'offre recommandée porte un filet franc sur tout son pourtour et une
	   ombre courte qui la décolle du fond ; les autres n'en ont aucune. Sans
	   cela les trois colonnes se valent, et le classement ne recommande plus
	   rien. */
	.bet-card--featured {
		border: 2px solid var(--bet-accent);
		border-top: 4px solid var(--bet-accent);
		box-shadow: 0 2px 0 var(--bet-border-strong), 0 6px 18px rgba(28, 43, 58, .07);
	}

	.bet-card__pitch { max-width: 34ch; margin-inline: auto; font-size: 14px; }

	/* Les offres repliées ne partagent pas de grille : elles peuvent être une
	   ou trois, et un gabarit en trois colonnes laisserait un trou. */
	.bet-offers__list--rest {
		grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
		grid-template-rows: none;
	}

	.bet-offers__list--rest .bet-card {
		grid-row: auto;
		grid-template-rows: none;
		gap: 5px;
	}

	.bet-offers__list--rest .bet-card__row { padding-block: 0; }
}

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

	.bet-card,
	.bet-card__cta,
	.bet-table__cta { transition: none; }

	/* Le déplacement disparaît, le signal reste : filet, ombre et luminosité
	   suffisent à désigner l'élément sous le curseur. Supprimer l'effet entier
	   priverait d'un repère ceux qui ne demandaient qu'à ne pas voir bouger
	   l'écran. */
	.bet-card:hover,
	.bet-card__cta:hover,
	.bet-table__cta:hover { transform: none; }
}

@media print {
	.bet-card__cta { display: none; }
}