/**
 * Blocs d incitation : une seule feuille, une seule charte.
 *
 * Ces blocs ont ete habilles cinq fois de suite, chaque passe ajoutant ses
 * regles sans retirer les precedentes. Les memes selecteurs se contredisaient
 * donc sur mille quatre cents lignes, et le rendu dependait de l ordre : c est
 * cela, et non les modeles, qui donnait une page en desordre.
 *
 * Ce fichier remplace les cinq. Il est charge apres betting.css et il est le
 * seul a habiller les blocs d incitation.
 *
 * La charte, tenue partout :
 *
 *   bleu    ce qui agit : boutons, en-tetes de bloc, barre fixe
 *   ambre   ce qui souligne : meilleure cote, survol, bandeau d offre
 *   vert    deux chiffres a part : la note du bookmaker, le gain d un combine
 *
 * Le mot cle d importance n apparait que sur les couleurs de texte, de fond et
 * de contour : le theme vise .elementor a, plus specifique que tout ce qui peut
 * s ecrire ici, et il repeignait le nom des equipes et les cotes en ambre pale
 * sur blanc, illisibles. Les tailles et les espacements restent libres, donc
 * reglables depuis Elementor.
 */

/* La palette est declaree a la racine du document.
   Elle etait posee sur les seuls blocs d incitation. Or un bouton et une ligne de
   cotes vivent aussi dans une liste de rencontres, dont l ancetre est .bsp-line :
   la palette n y existait pas, var(--bleu, #12305A) ne resolvait rien, et le navigateur
   jetait la declaration entiere. Le bouton PARIER sortait donc sans fond, blanc
   sur blanc, parfaitement invisible.

   A la racine, elle vaut partout, quel que soit le bloc qui accueille l element. */
:root{
	--bleu: #12305A;
	--bleu-fonce: #0C2143;
	--bleu-clair: #E8EDF5;
	--ambre: #F0B429;
	--ambre-clair: #FFC95D;
	--vert: #1F7A54;
	--encre: #16202E;
	--encre-pale: #5B6B85;
	--panneau: #FFFFFF;
	--filet: #D5DDE9;
}

.bsp-cta,
.bsp-chrono,
.bsp-vote,
.bsp-combi,
.bsp-prono,
.bsp-faqx,
.bsp-cotes,
.bsp-relance,
.bsp-pop{
	--bleu: #12305A;
	--bleu-fonce: #0C2143;
	--bleu-clair: #E8EDF5;
	--ambre: #F0B429;
	--ambre-clair: #FFC95D;
	--vert: #1F7A54;
	--encre: #16202E;
	--encre-pale: #5B6B85;
	--panneau: #FFFFFF;
	--filet: #D5DDE9;
	font-size: 15px;
	line-height: 1.45;
}

/* --------------------------------------------------------------- le panneau */

.bsp-chrono,
.bsp-vote,
.bsp-combi,
.bsp-prono,
.bsp-faqx,
.bsp-cta--card{
	background-color: var(--panneau, #FFFFFF) !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	color: var(--encre, #16202E) !important;
	margin: 0 0 16px;
	overflow: hidden;
}

/* En-tete : bleu plein, un seul dessin pour tous les blocs. C est ce qui donne
   a la colonne de droite l allure d une famille, et non d un empilement. */
.bsp-chrono__head,
.bsp-prono__head,
.bsp-combi__head,
.bsp-vote__title,
.bsp-faqx__title,
.bsp-cta--card .bsp-cta__kicker{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
	margin: 0;
	padding: 10px 14px;
	background-color: var(--bleu, #12305A) !important;
	color: #FFFFFF !important;
	border: 0 !important;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.bsp-chrono__kicker,
.bsp-prono__kicker,
.bsp-combi__kicker{ color: #FFFFFF !important; }

/* Les corps de bloc partagent le meme retrait. */
.bsp-chrono__body,
.bsp-prono__body,
.bsp-combi__body,
.bsp-vote__grid,
.bsp-vote__body{ padding: 14px; }

/* --------------------------------------------------------------- les liens */

/* Tout ce qui mene chez le bookmaker est un lien, y compris le nom des equipes
   et chaque case de cote. Aucun de ces liens ne prend la couleur du theme. */
.bsp-cta a,
.bsp-chrono a,
.bsp-vote a,
.bsp-combi a,
.bsp-prono a,
.bsp-faqx a,
.bsp-cotes a,
.bsp-relance a,
.bsp-pop a{
	text-decoration: none !important;
	box-shadow: none !important;
}
.bsp-cta a:not(.bsp-cta__btn):not(.bsp-cta__mark),
.bsp-chrono a:not(.bsp-cta__btn):not(.bsp-cta__mark),
.bsp-vote a:not(.bsp-cta__btn),
.bsp-combi a:not(.bsp-cta__btn),
.bsp-prono a:not(.bsp-cta__btn):not(.bsp-cta__mark),
.bsp-faqx a:not(.bsp-cta__btn),
.bsp-cotes a:not(.bsp-cta__btn):not(.bsp-cta__mark){
	color: var(--encre, #16202E) !important;
}

/* --------------------------------------------------------------- le bouton */

.bsp-cta__btn{
	display: inline-block;
	padding: 11px 18px;
	border: 0 !important;
	background-color: var(--bleu, #12305A) !important;
	color: #FFFFFF !important;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	text-align: center;
	white-space: nowrap;
	cursor: pointer;
	transition: background-color 150ms ease, transform 150ms ease;
}
.bsp-cta__btn:hover,
.bsp-cta__btn:focus-visible{
	background-color: var(--bleu-fonce, #0C2143) !important;
	color: #FFFFFF !important;
	transform: translateY(-1px);
}
.bsp-cta__btn--wide{ display: block; width: 100%; }
.bsp-cta__btn--small{ padding: 8px 13px; font-size: 12.5px; }

/* Sur un fond ambre, le bouton reste bleu : ambre sur ambre ne se voit pas. */
.bsp-cta--banner .bsp-cta__btn,
.bsp-relance .bsp-cta__btn,
.bsp-cta__btn--ink{
	background-color: var(--bleu, #12305A) !important;
	color: #FFFFFF !important;
}

/* Sur un fond bleu, il s inverse : ambre sur bleu, c est le contraste le plus
   fort de la page, et c est la que le clic doit partir. */
.bsp-cta--sticky .bsp-cta__btn,
.bsp-pop .bsp-cta__btn{
	background-color: var(--ambre, #F0B429) !important;
	color: var(--encre, #16202E) !important;
}
.bsp-cta--sticky .bsp-cta__btn:hover,
.bsp-pop .bsp-cta__btn:hover{ background-color: var(--ambre-clair, #FFC95D) !important; }

/* ------------------------------------------------------------- les mentions */

.bsp-cta__age{
	flex: none;
	padding: 1px 5px;
	border: 1px solid currentColor !important;
	background: none !important;
	font-size: 11.5px;
	line-height: 1.5;
	opacity: .8;
}
.bsp-cta__offer{ font-weight: 700; }
.bsp-cta__code{
	padding: 3px 8px;
	border: 1px dashed var(--filet, #D5DDE9) !important;
	background: none !important;
	font-family: ui-monospace, monospace;
	font-size: 13px;
}

/* La marque du partenaire : fond encre, texte clair. Elle doit se lire meme
   quand aucun logo n a ete depose dans les reglages. */
.bsp-cta__mark{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 9px;
	background-color: var(--bleu-fonce, #0C2143) !important;
	border: 1px solid var(--bleu-fonce, #0C2143) !important;
	color: var(--ambre-clair, #FFC95D) !important;
}
.bsp-cta__brand{
	color: var(--ambre-clair, #FFC95D) !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .02em;
	text-transform: uppercase;
	white-space: nowrap;
}
.bsp-cta__logo{ display: block; width: auto; max-height: 26px; object-fit: contain; }

/* ----------------------------------------------------------- ligne de cotes */

.bsp-cta__odds{
	display: flex;
	align-items: stretch;
	gap: 5px;
	flex-wrap: nowrap;
}

/* Une case de cote : bleu tres pale au repos, bleu plein au survol, ambre
   quand c est la meilleure cote du match. */
.bsp-cta__odd{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
	min-width: 60px;
	padding: 6px 10px;
	background-color: var(--bleu-clair, #E8EDF5) !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	color: var(--bleu-fonce, #0C2143) !important;
	line-height: 1.1;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.bsp-cta__odd-tag{ font-size: 11.5px; color: var(--encre-pale, #5B6B85) !important; }
.bsp-cta__odd-val{ font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bsp-cta__odd.is-best{
	background-color: var(--ambre, #F0B429) !important;
	border-color: var(--ambre, #F0B429) !important;
	color: var(--encre, #16202E) !important;
}
.bsp-cta__odd.is-best .bsp-cta__odd-tag{ color: rgba(22,32,46,.66) !important; }
.bsp-cta__odd:hover{
	background-color: var(--bleu, #12305A) !important;
	border-color: var(--bleu, #12305A) !important;
	color: #FFFFFF !important;
}
.bsp-cta__odd:hover .bsp-cta__odd-tag{ color: rgba(255,255,255,.72) !important; }

/* Ligne de cotes posee seule dans un modele. */
.bsp-cotes{ display: flex; margin: 0 0 16px; }
.bsp-cotes .bsp-cta__odds{ width: 100%; }

/* ------------------------------------------------------ bandeau et relance */

/* Les deux seuls blocs en ambre plein : ils annoncent une offre, ils n agissent
   pas. La pleine largeur leur est reservee. */
.bsp-cta--banner,
.bsp-relance{
	background-color: var(--ambre, #F0B429) !important;
	color: var(--encre, #16202E) !important;
	border: 0 !important;
}
.bsp-cta--banner{ padding: 0; }
.bsp-relance{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 11px 14px;
	margin: 0;
}
.bsp-relance__left{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }
.bsp-relance__text{
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: .01em;
	text-transform: uppercase;
}

/* Le contenu des blocs de pleine largeur suit la colonne du site. */
.bsp-cta__wrap{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
	width: 100%;
	margin: 0 auto;
	padding: 9px 20px;
	box-sizing: border-box;
}

/* --------------------------------------------------------------- l encart */

.bsp-cta--inline{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 11px 14px;
	margin: 0 0 16px;
	background-color: var(--bleu-clair, #E8EDF5) !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	color: var(--encre, #16202E) !important;
}
.bsp-cta__left{ display: flex; align-items: center; gap: 9px; flex-wrap: wrap; min-width: 0; }

/* ---------------------------------------------------- carte du bookmaker */

.bsp-cta--card{ display: block; padding: 0; }
.bsp-cta--card .bsp-cta__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 14px 14px 0;
}
.bsp-cta__note{
	font-size: 28px;
	font-weight: 700;
	line-height: 1;
	color: var(--vert, #1F7A54) !important;
	font-variant-numeric: tabular-nums;
}
.bsp-cta--card .bsp-cta__offer{
	display: block;
	margin: 12px 0 0;
	padding: 0 14px;
	color: var(--encre, #16202E) !important;
	font-size: 16px;
}
.bsp-cta__perks{ list-style: none; margin: 12px 0; padding: 0 14px; }
.bsp-cta__perks li{
	display: flex;
	align-items: flex-start;
	gap: 8px;
	padding: 4px 0;
	color: var(--encre, #16202E) !important;
	font-size: 14px;
}
.bsp-cta__perks li::before{
	content: "\2713";
	flex: none;
	color: var(--vert, #1F7A54) !important;
	font-weight: 700;
}
.bsp-cta--card .bsp-cta__code{ display: inline-block; margin: 0 14px 12px; }
.bsp-cta--card .bsp-cta__btn--wide{ width: calc(100% - 28px); margin: 0 14px 12px; }

/* ------------------------------------------------------------- barre fixe */

.bsp-cta--sticky.bsp-cta--global{
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 40;
	display: block;
	padding: 0;
	margin: 0;
	background-color: var(--bleu, #12305A) !important;
	border-top: 3px solid var(--ambre, #F0B429) !important;
	box-shadow: 0 -2px 14px rgba(12,33,67,.22);
}
.bsp-cta--sticky .bsp-cta__wrap{ justify-content: space-between; padding: 10px 20px; }
.bsp-cta--sticky .bsp-cta__left{ flex-direction: column; align-items: flex-start; gap: 0; line-height: 1.25; }
.bsp-cta--sticky .bsp-cta__offer{ color: #FFFFFF !important; font-size: 15px; }
.bsp-cta--sticky .bsp-cta__sub{ color: rgba(255,255,255,.78) !important; font-size: 12.5px; }
.bsp-cta__close{
	flex: none;
	padding: 2px 8px;
	border: 0;
	background: none;
	color: rgba(255,255,255,.7) !important;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
}
.bsp-cta__close:hover{ color: #FFFFFF !important; }

/* Reserve en bas de page : sans elle, la barre masquait les derniers liens du
   pied de page du theme. */
body.bsp-a-barre{ padding-bottom: 76px; }

/* --------------------------------------------------------------- fenetres */

.bsp-pop{
	position: fixed;
	inset: 0;
	z-index: 50;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 18px;
	background: rgba(12,33,67,.6);
}
.bsp-pop[hidden]{ display: none; }
.bsp-pop__box{
	width: 100%;
	max-width: 420px;
	background-color: var(--panneau, #FFFFFF) !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	color: var(--encre, #16202E) !important;
}
.bsp-pop__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 14px;
	background-color: var(--bleu, #12305A) !important;
	color: #FFFFFF !important;
}
.bsp-pop__body{ padding: 22px 20px 20px; text-align: center; }
.bsp-pop__kicker{
	display: block;
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.bsp-pop__offer{
	display: block;
	margin: 10px 0 8px;
	font-size: 28px;
	line-height: 1.06;
	text-transform: uppercase;
}
.bsp-pop__text{ margin: 0 0 18px; color: var(--encre-pale, #5B6B85) !important; font-size: 14.5px; }

/* Fenetre posee a plat dans un modele : elle ne couvre pas la page. */
.bsp-pop--plat{
	position: static;
	inset: auto;
	z-index: auto;
	display: block;
	padding: 0;
	background: none;
	margin: 0 0 16px;
}
.bsp-pop--plat .bsp-pop__box{ max-width: none; }

/* ---------------------------------------------------- affiche a parier */

.bsp-chrono{ border: 1px solid var(--bleu, #12305A) !important; }
.bsp-chrono__body{
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}
.bsp-chrono__match{ flex: 1 1 220px; min-width: 0; }
.bsp-chrono__teams{
	display: block;
	color: var(--encre, #16202E) !important;
	font-size: clamp(19px, 2.2vw, 27px);
	font-weight: 700;
	line-height: 1.08;
	text-transform: uppercase;
}
.bsp-chrono__teams:hover{ text-decoration: underline !important; }
.bsp-chrono__meta{
	display: block;
	margin-top: 5px;
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 13.5px;
}
.bsp-chrono__prono{
	flex: 1 1 200px;
	min-width: 0;
	padding-left: 18px;
	border-left: 1px solid var(--filet, #D5DDE9);
}
.bsp-chrono__label{
	display: block;
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.bsp-chrono__pick{
	display: block;
	margin-top: 5px;
	color: var(--encre, #16202E) !important;
	font-size: 19px;
	line-height: 1.1;
	text-transform: uppercase;
}
.bsp-chrono__why{
	display: block;
	margin-top: 6px;
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 13px;
}
.bsp-chrono__odds{ flex: none; }
/* Les trois presentations de l affiche : sans pronostic, avec, ou compacte. */
.bsp-chrono--affiche .bsp-chrono__prono{ display: none; }
.bsp-chrono--avant .bsp-chrono__prono{ display: block; }
.bsp-chrono--prochain .bsp-chrono__teams{ font-size: 20px; }
.bsp-chrono--prochain .bsp-chrono__prono{ display: none; }

/* Temoin de confiance : cinq barres, ambre jusqu au niveau atteint. Des etoiles
   auraient laisse croire a un avis, ces barres disent un calcul. */
.bsp-trust{ display: flex; align-items: center; gap: 3px; flex: none; }
.bsp-trust__bar{ width: 12px; height: 6px; background: rgba(255,255,255,.3); }
.bsp-trust__bar.is-on{ background: var(--ambre, #F0B429); }
/* La legende a ete retiree du rendu : la regle reste sans objet et part avec. */

/* ---------------------------------------------------------- notre prono */

.bsp-prono__body{ display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.bsp-prono__pick{ flex: 1 1 200px; min-width: 0; }
.bsp-prono__label{
	display: block;
	color: var(--encre, #16202E) !important;
	font-size: 19px;
	line-height: 1.15;
}
.bsp-prono__quand{
	display: block;
	margin-top: 4px;
	color: #12305A !important;
	font-size: 12.5px;
	font-weight: 600;
}
.bsp-prono__why{
	display: block;
	margin-top: 6px;
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 13.5px;
}
.bsp-prono__go{ display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bsp-prono__odd{
	padding: 5px 11px;
	background: var(--ambre, #F0B429);
	color: var(--encre, #16202E) !important;
	text-align: center;
	line-height: 1.1;
}
.bsp-prono__odd small{
	display: block;
	font-size: 10.5px;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .7;
}
.bsp-prono__odd strong{ font-size: 21px; font-variant-numeric: tabular-nums; }
.bsp-prono__go .bsp-cta__btn--wide{ display: inline-block; width: auto; margin: 0; }
.bsp-prono__foot{
	padding: 8px 14px;
	border-top: 1px solid var(--filet, #D5DDE9);
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 11.5px;
}

/* ------------------------------------------------------------- mon pari */

.bsp-vote{ padding: 0; }
.bsp-vote__ask{ margin: 0; padding: 13px 14px 0; font-size: 15.5px; }
.bsp-vote__grid{
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 8px;
}
.bsp-vote--defi .bsp-vote__grid{ grid-template-columns: 1fr 1fr; }
.bsp-vote__pick{
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	padding: 11px 8px 9px;
	background-color: var(--bleu-clair, #E8EDF5) !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	color: var(--bleu-fonce, #0C2143) !important;
	text-align: center;
	line-height: 1.25;
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}
.bsp-vote__pick:hover{
	background-color: var(--bleu, #12305A) !important;
	border-color: var(--bleu, #12305A) !important;
	color: #FFFFFF !important;
}
.bsp-vote__name{
	max-width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13.5px;
	font-weight: 600;
}
.bsp-vote--defi .bsp-vote__name{ font-size: 15px; text-transform: uppercase; }
.bsp-vote__odd{ font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.bsp-vote__odd--go{ font-size: 11.5px; letter-spacing: .05em; opacity: .8; }
.bsp-vote__hint{
	margin: 0;
	padding: 11px 14px 13px;
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 12.5px;
}

/* --------------------------------------------------------- combine du jour */

.bsp-combi__leg{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	padding: 9px 0;
	border-top: 1px solid var(--filet, #D5DDE9);
}
.bsp-combi__leg:first-child{ border-top: 0; }
.bsp-combi__name{ min-width: 0; font-size: 14px; }
.bsp-combi__odd{
	flex: none;
	color: var(--bleu, #12305A) !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.bsp-combi__total{
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 10px;
	margin-top: 12px;
	padding-top: 12px;
	border-top: 2px solid var(--ambre, #F0B429) !important;
}
.bsp-combi__label{
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 11.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
}
.bsp-combi__sum{
	color: var(--bleu, #12305A) !important;
	font-size: 30px;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.bsp-combi__gain{ margin: 9px 0 12px; font-size: 14px; }
.bsp-combi__gain strong{ color: var(--vert, #1F7A54) !important; }

/* ------------------------------------------------------------------- faq */

.bsp-faqx__row{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	flex-wrap: wrap;
	padding: 12px 14px;
}
.bsp-faqx__row + .bsp-faqx__row{ border-top: 1px solid var(--filet, #D5DDE9); }
.bsp-faqx__text{ flex: 1 1 260px; min-width: 0; }
.bsp-faqx__q{ display: block; color: var(--encre, #16202E) !important; font-size: 14.5px; }
.bsp-faqx__r{ display: block; margin-top: 3px; color: var(--encre-pale, #5B6B85) !important; font-size: 13.5px; }

/* ==========================================================================
   Une rencontre tient sur une seule ligne
   ==========================================================================

   Competition et heure, les deux camps, la marque, les cotes, le bouton : tout
   sur une ligne, comme sur la maquette. Le retour a la ligne coupait la marque
   des cotes et poussait le bouton sous la rencontre suivante : on ne savait plus
   quelle cote appartenait a quel match.

   La liste se mesure elle-meme, et non l ecran : la meme liste est posee en
   pleine largeur au centre et dans un tiers d ecran a droite. */

.elementor-widget-bsp_matches,
.bsp-layout{ container-type: inline-size; width: 100%; }

/* La ligne : fond, filet et survol. Sa geometrie est decrite une seule fois, plus
   bas, sous « Les lignes de rencontre s alignent en colonnes ». Elle etait
   egalement decrite ici, en rangee souple : la grille recevait donc des largeurs
   de rangee, et la liste s effondrait. */
.bsp-line{
	background-color: var(--panneau, #FFFFFF);
	border-bottom: 1px solid #E4E9F1;
	transition: background-color 140ms ease;
}
.bsp-line:hover{
	background-color: #E8EDF5 !important;
	transform: none !important;
	box-shadow: none !important;
}

/* ==========================================================================
   Les blocs plus anciens, accordes a la meme charte
   ==========================================================================

   Ces blocs existaient avant les blocs d incitation et n avaient pas de couleur
   a eux : ils prenaient donc celle du theme sur chaque lien. Le nom d une equipe
   dans une liste doit se lire comme du texte, pas comme un lien colore. */

.bsp-links a:not(.bsp-cta__btn),
.bsp-card a:not(.bsp-cta__btn),
.bsp-line a:not(.bsp-cta__btn):not(.bsp-cta__mark),
.bsp-table a,
.bsp-list a:not(.bsp-cta__btn){
	color: #16202E !important;
	text-decoration: none !important;
}
.bsp-links a:hover,
.bsp-card a:hover,
.bsp-line a:not(.bsp-cta__mark):hover,
.bsp-table a:hover{ text-decoration: underline !important; }

/* Cartes de joueur et d equipe : fond clair, comme sur la maquette. Le fond
   sombre du theme rendait un mur de vignettes bleu nuit au milieu d une page
   claire. */
.bsp-card{
	background-color: #FFFFFF !important;
	border: 1px solid #D5DDE9 !important;
	color: #16202E !important;
}
.bsp-card .bsp-card__title{ color: #16202E !important; }
.bsp-card .bsp-meta{ color: #5B6B85 !important; }

/* Le bouton d un comparatif de bookmakers suit la charte. */
.bsp-book__cta,
.bsp-book__cta:link,
.bsp-book__cta:visited{
	background-color: #12305A !important;
	color: #FFFFFF !important;
	text-decoration: none !important;
}
.bsp-book__cta:hover{ background-color: #0C2143 !important; }
.bsp-book__odd{
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	background: #E8EDF5;
	border: 1px solid #D5DDE9;
	font-size: 20px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Un widget qui ne rend rien laissait son conteneur, avec sa marge : une bande
   vide apparaissait au milieu de la page, sans que rien ne l explique. */
.elementor-widget-container:empty{ display: none !important; }
.elementor-widget:has(> .elementor-widget-container:empty){ display: none !important; }

@media (max-width: 860px){
	.bsp-chrono__body{ flex-direction: column; align-items: stretch; }
	.bsp-chrono__prono{ padding-left: 0; border-left: 0; padding-top: 12px; border-top: 1px solid var(--filet, #D5DDE9); }
}

@media (max-width: 560px){
	.bsp-prono__body{ flex-direction: column; align-items: stretch; }
	.bsp-prono__go{ width: 100%; }
	.bsp-prono__go .bsp-cta__btn{ flex: 1 1 auto; }
	.bsp-faqx__row .bsp-cta__btn{ width: 100%; }
	.bsp-cta__wrap{ padding: 8px 14px; gap: 10px; }
}

/* ==========================================================================
   La marque du bookmaker
   ==========================================================================

   Le logo touchait les quatre bords de son cadre, et dans une ligne de match il
   se retrouvait rogne : on ne voyait plus que les trois carres verts, sans le
   nom. Deux causes : la pastille s etirait sur toute la hauteur de la ligne, et
   le fichier, un dessin vectoriel, se laissait ecraser au lieu de se reduire.

   Le fond bleu nuit est conserve partout, comme demande : c est ce qui fait
   ressortir un logo clair, et c est le meme bleu que les en-tetes de bloc. */

.bsp-cta__mark{
	flex: 0 0 auto !important;
	align-self: center;
	padding: 5px 10px !important;
	background-color: var(--bleu-fonce, #0C2143) !important;
	border: 0 !important;
	line-height: 0;
}
.bsp-cta__logo{
	display: block;
	width: auto !important;
	max-width: none !important;
	height: 17px !important;
	max-height: 17px !important;
	object-fit: contain;
}

/* Dans une carte ou un pronostic, la place ne manque pas : le logo respire. */
.bsp-cta--card .bsp-cta__mark{ padding: 6px 12px !important; }
.bsp-cta--card .bsp-cta__logo,
.bsp-prono .bsp-cta__logo{ height: 21px !important; max-height: 21px !important; }

/* Dans une ligne de match, la pastille reste etroite mais entiere. */
.bsp-line .bsp-cta__mark{ padding: 4px 8px !important; }
.bsp-line .bsp-cta__logo{ height: 14px !important; max-height: 14px !important; }

/* Le meme traitement pour la pastille des listes plus anciennes. */
.bsp-line__partner{
	flex: 0 0 auto !important;
	align-self: center;
	padding: 4px 8px !important;
	background: var(--bleu-fonce, #0C2143) !important;
}
.bsp-line__partner img{ width: auto !important; height: 14px !important; object-fit: contain; }

/* ==========================================================================
   Tailles de texte d une ligne de rencontre
   ==========================================================================

   La geometrie de la ligne vit dans une seule section, plus bas. Ici, uniquement
   ce qui ne la touche pas : les tailles, les graisses, les couleurs.

   Ce bloc decrivait aussi la disposition, et une ligne decrite deux fois n a
   aucune geometrie previsible. C est la cause de l effondrement de la liste. */

.bsp-line__league{
	letter-spacing: .04em;
	color: var(--encre-pale, #5B6B85) !important;
}
.bsp-line__record{ font-size: 11px !important; }

/* Le separateur central n a pas besoin d etre souligne ni gras : il separe, il
   n informe pas. */
.bsp-line__match > span:not(.bsp-line__team){
	font-weight: 600 !important;
	color: var(--encre-pale, #5B6B85) !important;
	text-decoration: none !important;
	letter-spacing: .04em;
}

/* ==========================================================================
   La liste des bookmakers dans une colonne
   ==========================================================================

   Le bloc etait dessine pour la pleine largeur : un cadre de logo de 120 pixels
   a gauche, le texte a droite. Dans un tiers d ecran, il ne restait qu une
   colonne de 60 pixels pour le texte, et la phrase du bonus descendait a raison
   d un mot par ligne.

   La liste se mesure elle-meme : en dessous de 470 pixels, tout passe sur une
   seule ligne, et le bonus se resume a une ligne coupee proprement. */

.bsp-book{
	background-color: var(--panneau, #FFFFFF) !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	color: var(--encre, #16202E) !important;
	gap: 10px;
	padding: 10px;
	margin-bottom: 10px;
	align-items: center;
}
.bsp-book__logo{
	background: var(--bleu-fonce, #0C2143) !important;
	padding: 8px 10px !important;
	min-height: 0 !important;
}
.bsp-book__logo img{ width: auto; height: 20px; object-fit: contain; }
.bsp-book__logo--empty{
	color: var(--ambre-clair, #FFC95D) !important;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.bsp-book__note{ color: var(--encre-pale, #5B6B85) !important; font-size: 12.5px !important; margin: 0 0 6px; }
.bsp-book__code{ font-size: 12px !important; padding: 4px 8px !important; }
.bsp-book__cta{ padding: 8px 13px !important; font-size: 12px !important; }

@container (max-width: 470px){

	.bsp-book{
		display: flex !important;
		align-items: center;
		flex-wrap: nowrap;
		gap: 8px;
		padding: 8px;
	}
	.bsp-book__logo{
		flex: 0 0 auto;
		padding: 5px 8px !important;
	}
	.bsp-book__logo img{ height: 15px; }
	.bsp-book__logo--empty{ font-size: 11px; }

	.bsp-book__body{
		display: flex;
		align-items: center;
		gap: 8px;
		flex: 1 1 auto;
		min-width: 0;
	}
	/* Le bonus tient sur une ligne, coupe net : trois mots suffisent a dire de
	   quoi il s agit, le detail est chez l operateur. */
	.bsp-book__note{
		flex: 1 1 auto;
		min-width: 0;
		margin: 0 !important;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		font-size: 11.5px !important;
	}
	.bsp-book__code{ display: none !important; }
	.bsp-book__cta{
		flex: 0 0 auto;
		margin-left: auto;
		padding: 6px 10px !important;
		font-size: 11px !important;
	}
	.bsp-book__legal{ display: none !important; }
}

/* La liste de bookmakers se mesure comme celle des rencontres. */
.elementor-widget-bsp_bookmakers{ container-type: inline-size; width: 100%; }

/* ==========================================================================
   Un bloc muet n emporte pas son titre
   ==========================================================================

   Un widget sans donnee ne rend rien, et son conteneur se replie deja. Mais le
   titre pose juste avant, lui, restait : la page affichait Classement suivi d un
   grand vide, et rien n expliquait pourquoi. Le titre disparait donc avec le
   bloc qu il annonce. */

.elementor-widget-heading:has(+ .elementor-widget > .elementor-widget-container:empty),
.elementor-widget-heading:has(+ .elementor-element > .elementor-widget-container:empty){
	display: none !important;
}

/* ==========================================================================
   Deux details releves en chemin
   ========================================================================== */

/* Les vignettes de competition : elles occupaient quatre colonnes larges pour
   trois lignes de texte. Plus serrees, on en voit le double sans faire defiler,
   et chacune reste cliquable en entier. */
.bsp-league-card,
.bsp-links__tag{
	background-color: var(--panneau, #FFFFFF) !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	color: var(--encre, #16202E) !important;
	transition: border-color 140ms ease, background-color 140ms ease;
}
.bsp-league-card:hover,
.bsp-links__tag:hover{
	border-color: var(--bleu, #12305A) !important;
	background-color: var(--bleu-clair, #E8EDF5) !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Le classement : les chiffres alignes, les points en avant. Dans une colonne
   etroite, seules les colonnes utiles restent. */
.bsp-table{ font-size: 13px; }
.bsp-table th{
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 11px;
	letter-spacing: .04em;
	text-transform: uppercase;
}
.bsp-table td{ font-variant-numeric: tabular-nums; }
.bsp-td-team img{ width: 18px !important; height: 18px !important; object-fit: contain; }

/* ==========================================================================
   Notre estimation
   ==========================================================================

   Ces valeurs sont calculees sur le classement et la forme, faute de cote
   publiee. Elles ne doivent jamais ressembler a une cote de bookmaker : filet
   discontinu, fond neutre, intitule en clair, et aucune marque d operateur.
   Le visiteur voit du premier coup d oeil qu il s agit d une estimation, et le
   bouton l envoie chercher la cote du jour chez l operateur. */



.bsp-cta__odd.is-est,
.bsp-vote__pick.is-est{
	background-color: #FFFFFF !important;
	border: 1px dashed var(--bleu, #12305A) !important;
	color: var(--bleu-fonce, #0C2143) !important;
}
.bsp-cta__odd.is-est:hover,
.bsp-vote__pick.is-est:hover{
	background-color: var(--bleu, #12305A) !important;
	border-style: solid !important;
	color: #FFFFFF !important;
}

/* La meilleure valeur d une estimation ne prend pas l ambre : l ambre annonce la
   meilleure cote du marche, ce qui n a pas de sens ici. */
.bsp-cta__odds--est .bsp-cta__odd.is-best{
	background-color: #FFFFFF !important;
	border: 1px dashed var(--bleu, #12305A) !important;
	color: var(--bleu-fonce, #0C2143) !important;
}
.bsp-cta__odds--est .bsp-cta__odd.is-best .bsp-cta__odd-tag{ color: var(--encre-pale, #5B6B85) !important; }

.bsp-prono__odd.is-est{
	background: #FFFFFF !important;
	border: 1px dashed var(--bleu, #12305A) !important;
	color: var(--bleu-fonce, #0C2143) !important;
}

.bsp-combi__note{
	margin: 0;
	padding: 0 14px 12px;
	color: var(--encre-pale, #5B6B85) !important;
	font-size: 11.5px;
	line-height: 1.4;
}

/* Une case estimee garde son filet discontinu : c est ce qui la distingue d une
   cote de bookmaker, sans prendre la place des chiffres. */

/* ==========================================================================
   Le classement, toujours lisible
   ==========================================================================

   Le tableau etait bien rendu dans la page, avec ses vingt lignes et ses huit
   colonnes : il suffit de regarder la source. Mais il sortait invisible.

   Cause : le modele liait la couleur des cellules, celle du fond de l en-tete et
   celle des filets aux couleurs globales du theme. La couleur nommee principale
   y est claire ; les cellules etaient donc claires sur blanc, et le fond
   d en-tete blanc aussi. Un tableau parfaitement present, et parfaitement
   illisible.

   Un tableau de donnees n a pas a suivre une palette : il doit se lire. Les
   couleurs sont donc posees ici, une fois pour toutes. Les modeles ne portent
   plus de liaison de couleur ; ces regles rattrapent en plus les modeles deja
   importes, sans avoir a les reimporter. */

.bsp-table{
	width: 100%;
	border-collapse: collapse;
	background-color: #FFFFFF !important;
	color: #16202E !important;
	font-size: 13px;
}

.bsp-table thead th{
	background-color: #12305A !important;
	color: #FFFFFF !important;
	border: 0 !important;
	font-family: inherit !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 10px 8px !important;
	white-space: nowrap;
}

.bsp-table thead th:first-child{ padding-left: 12px !important; }

.bsp-table tbody td{
	background-color: transparent !important;
	color: #16202E !important;
	border-bottom: 1px solid #E4E9F1 !important;
	/* Les lignes respirent : six pixels serraient les chiffres les uns contre
	   les autres, et dix-huit lignes formaient un pave gris. */
	padding: 9px 8px !important;
}

/* La premiere colonne, la place, et la colonne du nom : un peu plus de retrait
   pour degager le trait de zone et l ecusson. */
.bsp-table tbody td:first-child{ padding-left: 12px !important; }
.bsp-table .bsp-td-team{ padding-left: 4px !important; }

/* L ecusson et le nom ne se touchent pas. */
.bsp-table .bsp-td-team img{ margin-right: 8px !important; vertical-align: middle; }

.bsp-table tbody tr:nth-child(even) td{ background-color: #F7F9FC !important; }
.bsp-table tbody tr:hover td{ background-color: #E8EDF5 !important; }

/* Une seule graisse et une seule police pour toute la ligne.
   -------------------------------------------------------

   Trois ecritures se cotoyaient sur une meme ligne : le nom du club en
   semi-gras, les chiffres en normal, le total de points en gras et en bleu, deux
   crans au-dessus du reste. Le regard s arretait sur la colonne des points au
   lieu de lire la ligne, et le tableau paraissait mal compose.

   Tout se lit desormais de la meme facon, avec la police du site. C est la
   place, a gauche, qui ordonne le tableau : elle n a pas besoin d etre repetee
   par le poids des chiffres. */

.bsp-table,
.bsp-table th,
.bsp-table td,
.bsp-table .bsp-td-team,
.bsp-table .bsp-td-team a{
	font-family: inherit !important;
}

.bsp-table tbody td,
.bsp-table tbody td a,
.bsp-table tbody td strong,
.bsp-table .bsp-td-team,
.bsp-table .bsp-td-team a,
.bsp-table .bsp-td-points,
.bsp-table tbody td:last-child{
	color: #16202E !important;
	font-size: 13.5px !important;
	font-weight: 500 !important;
	letter-spacing: 0 !important;
}

/* La place et le total de points : le seul ecart tolere, une nuance de graisse
   qui ne saute pas aux yeux. */
.bsp-table tbody td:first-child,
.bsp-table .bsp-td-points{
	font-weight: 700 !important;
}

/* Le nom du club reste un lien lisible, souligne au survol seulement. */
.bsp-table .bsp-td-team a{ text-decoration: none !important; }
.bsp-table .bsp-td-team a:hover{ text-decoration: underline !important; }

/* Le trait de couleur des zones : qualification, barrage, relegation.
   Quatre pixels au lieu de trois, pose a l interieur de la cellule. */
.bsp-table tbody tr[data-zone] td:first-child{
	box-shadow: inset 4px 0 0 var(--bsp-zone, #12305A);
}

/* La legende sous le tableau : un carre de couleur, son intitule, rien de plus. */
.bsp-legend{
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 8px 0 0;
	padding: 0;
}
.bsp-legend li{
	display: flex;
	align-items: center;
	gap: 6px;
	color: #5B6B85 !important;
	font-size: 11.5px;
}
.bsp-legend i{
	display: block;
	width: 10px;
	height: 10px;
	flex: none;
	background: var(--bsp-zone, #9CA3AF);
}

/* Version resserree : elle sert dans une colonne, elle ne doit pas devenir
   illisible pour autant. */
.bsp-standings-compact-yes .bsp-table{ font-size: 12.5px; }
.bsp-standings-compact-yes .bsp-table thead th,
.bsp-standings-compact-yes .bsp-table tbody td{ padding: 5px 6px !important; }

/* Mention d apercu, visible dans l editeur seulement. */
.bsp-editor-note--sample{
	background: #E8EDF5;
	border-left: 3px solid #12305A;
	color: #16202E;
	font-size: 12px;
	padding: 7px 10px;
	margin: 0 0 8px;
}

/* ==========================================================================
   Le classement ne peut plus etre masque
   ==========================================================================

   Le tableau est bien rendu dans la page : la commande wp betting rendu le
   compte, ligne par ligne, sur les cinq types de page. S il ne se voit pas, il
   est masque a l affichage, et une seule regle venue d ailleurs suffit pour
   cela : une hauteur nulle, un depassement cache, une opacite a zero, une
   couleur egale au fond.

   Ces regles rendent le masquage impossible. Elles sont volontairement fermes :
   un tableau de classement est la donnee que le parieur vient chercher, il n a
   aucune raison d etre discret. */

.bsp-table-wrap,
.bsp-table,
.bsp-table thead,
.bsp-table tbody,
.bsp-table tr,
.bsp-table th,
.bsp-table td{
	visibility: visible !important;
	opacity: 1 !important;
	max-height: none !important;
	clip-path: none !important;
	text-indent: 0 !important;
	font-size: inherit;
}

.bsp-table-wrap{
	display: block !important;
	width: 100% !important;
	min-height: 0 !important;
	overflow-x: auto !important;
	overflow-y: visible !important;
}

.bsp-table{ display: table !important; }
.bsp-table thead{ display: table-header-group !important; }
.bsp-table tbody{ display: table-row-group !important; }
.bsp-table tr{ display: table-row !important; }
.bsp-table th,
.bsp-table td{ display: table-cell !important; }

/* La version resserree masque volontairement les colonnes du milieu : rang,
   equipe et points suffisent dans une colonne. Cette exception reste, mais elle
   est la seule, et elle ne touche jamais la premiere ni la derniere colonne. */
.bsp-standings-compact-yes .bsp-table th:nth-child(n+3):not(:last-child),
.bsp-standings-compact-yes .bsp-table td:nth-child(n+3):not(:last-child){
	display: none !important;
}

/* Le tableau vit dans le conteneur d un widget : celui-ci ne doit pas le
   rogner. Une hauteur imposee par un reglage d apparence laissait un cadre vide
   a la place du tableau. */
.elementor-widget-bsp_standings .elementor-widget-container,
.elementor-widget-bsp_standings .bsp-layout{
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

/* ==========================================================================
   Un bloc occupe toute la largeur qui lui est offerte
   ==========================================================================

   La cause du classement invisible, trouvee dans l inspecteur : il suffisait
   d ajouter width:100% au conteneur du widget pour que le tableau apparaisse.

   L explication tient en deux pieces qui se combinent :

     le bloc porte une requete de conteneur, container-type:inline-size, qui lui
     permet de s adapter a sa propre largeur plutot qu a celle de l ecran ;

     cette declaration implique un confinement de la taille : le contenu ne peut
     plus determiner la largeur de l element.

   Or les modeles posent la colonne de droite avec un alignement au debut, ce qui
   demande a chaque bloc de se reduire a son contenu. Contenu qui, justement, n a
   plus le droit de decider. Largeur nulle, tableau invisible, et aucune erreur
   nulle part.

   Tout bloc du plugin reclame donc explicitement la largeur de son parent. La
   regle vaut pour l element du widget, pour son conteneur, et pour le cadre que
   le plugin rend a l interieur : la chaine doit etre continue, une seule maille
   manquante suffit a tout ramener a zero. */

/* Chaque bloc du plugin est son propre point de mesure.
   Les regles qui s adaptent a la largeur ont besoin d un ancetre declare comme
   tel. Sans lui, elles remontent au premier trouve, souvent une liste voisine, et
   ne se declenchent jamais dans le bon bloc : la bande des cotes restait ecrasee
   dans une colonne etroite.

   La largeur est declaree dans la meme regle, et ce n est pas un detail : cette
   declaration interdit au contenu de determiner la largeur, et sans largeur
   explicite le bloc se reduit a zero. */
[class*="elementor-widget-bsp_"]{
	container-type: inline-size;
	width: 100%;
}

[class*="elementor-widget-bsp_"],
[class*="elementor-widget-bsp_"] > .elementor-widget-container,
[class*="elementor-widget-bsp_"] > .elementor-widget-container > .bsp-layout,
.bsp-layout,
.bsp-side,
.bsp-table-wrap,
.bsp-table,
.bsp-chrono,
.bsp-vote,
.bsp-combi,
.bsp-prono,
.bsp-faqx,
.bsp-cta--card,
.bsp-cta--banner,
.bsp-relance,
.bsp-cotes{
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	box-sizing: border-box;
}

/* Elementor impose une hauteur pleine au conteneur du widget dans certaines
   dispositions : elle rognait le tableau au lieu de le laisser grandir. */
[class*="elementor-widget-bsp_"] > .elementor-widget-container{
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
}

/* Le bloc ne se reduit pas non plus quand son parent l aligne au debut : c est
   ce reglage des modeles qui declenchait la reduction. */
[class*="elementor-widget-bsp_"]{
	align-self: stretch !important;
	flex-shrink: 0;
}

/* ==========================================================================
   Trois retouches, trois causes distinctes
   ========================================================================== */

/* 1. L ecusson et le nom du club, sur une seule ligne.
   ---------------------------------------------------------------------------
   La cellule etait un element de type flex, ce qui rangeait ses deux enfants
   cote a cote. La regle qui empeche le masquage du tableau lui a rendu son type
   naturel, table-cell, et les deux enfants se sont donc empiles.

   La solution ne consiste pas a revenir en arriere : une cellule doit rester une
   cellule, sinon le tableau perd son alignement en colonnes. Ce sont ses enfants
   qui deviennent des elements en ligne. */

.bsp-table .bsp-td-team{
	display: table-cell !important;
	white-space: nowrap;
	vertical-align: middle;
}
.bsp-table .bsp-td-team img{
	display: inline-block !important;
	vertical-align: middle;
	margin-right: 7px;
	width: 18px !important;
	height: 18px !important;
	object-fit: contain;
}
.bsp-table .bsp-td-team a,
.bsp-table .bsp-td-team > span{
	display: inline !important;
	vertical-align: middle;
}

/* Le nom se tronque plutot que d elargir la colonne : dans un tiers d ecran, un
   nom long poussait les points hors du cadre. */
.bsp-table .bsp-td-team{
	max-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	width: auto !important;
}

/* 2. Le groupe de cotes : une seule rangee, une seule hauteur.
   ---------------------------------------------------------------------------
   Le groupe reunit quatre natures d elements : la marque du bookmaker, qui se
   dimensionnait sur son image, les cases de cote, sur leurs deux lignes de
   texte, et le bouton, sur son remplissage. Trois hauteurs differentes cote a
   cote sur la meme rangee.

   La rangee etire donc ses elements, et chacun se centre dans la hauteur ainsi
   obtenue. La plus haute donne la mesure, et l ensemble s aligne dessus, y
   compris le fond bleu de la marque.

   Une hauteur minimale commune evite l inverse : une rangee sans cote, reduite a
   la hauteur d un bouton, ne ressemblait plus a une ligne de cotes. */

.bsp-cta__odds,
.bsp-prono__go{
	display: flex !important;
	align-items: stretch !important;
	gap: 5px;
	flex-wrap: nowrap;
	min-height: 42px;
}

.bsp-cta__odds > *,
.bsp-prono__go > *{
	align-self: stretch !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex: 0 0 auto;
	margin: 0 !important;
	box-sizing: border-box;
}

/* Les cases de cote empilent leur intitule et leur valeur, centres. */
.bsp-cta__odds > .bsp-cta__odd,
.bsp-prono__go > .bsp-prono__odd{
	flex-direction: column !important;
	gap: 0;
	padding: 4px 10px !important;
	line-height: 1.15;
}

/* La marque : le fond bleu prend toute la hauteur de la rangee, et le logo
   respire a l interieur sans jamais toucher les bords. */
.bsp-cta__odds > .bsp-cta__mark,
.bsp-prono__go > .bsp-cta__mark{
	padding: 0 12px !important;
	min-width: 0;
}
/* Le logo garde une hauteur en pixels, jamais en pourcentage.
   ---------------------------------------------------------------------------
   La regle precedente disait max-height:60% et height:auto. Deux fautes qui se
   combinent, et le resultat etait un logo geant sur toute la page :

     un pourcentage de hauteur ne se resout que si le parent a une hauteur
     definie. Ici le parent se dimensionne sur son contenu : la limite ne valait
     donc rien ;

     et une image vectorielle sans dimension propre, laissee en hauteur
     automatique, prend toute la largeur qu on lui offre.

   Une valeur en pixels ne depend de rien et ne peut pas s emballer. */
.bsp-cta__mark .bsp-cta__logo,
.bsp-cta__odds .bsp-cta__logo,
.bsp-prono__go .bsp-cta__logo{
	display: block !important;
	height: 18px !important;
	max-height: 18px !important;
	width: auto !important;
	max-width: 88px !important;
	object-fit: contain;
}

/* Le bouton : son texte reste centre quelle que soit la hauteur imposee. */
.bsp-cta__odds > .bsp-cta__btn,
.bsp-prono__go > .bsp-cta__btn{
	padding: 0 16px !important;
	white-space: nowrap;
}

/* 3. La barre fixe suit la colonne du site.
   ---------------------------------------------------------------------------
   Deux causes se cumulaient. Le contenu n etait pas reparti aux deux bords : le
   bouton se retrouvait au milieu et la croix flottait au loin. Et la largeur du
   cadre interieur n etait pas garantie : la meme cause que le classement
   invisible, un element qui se reduit a son contenu.

   L offre a gauche, le bouton au centre du reste, la croix a droite. */

.bsp-cta--sticky.bsp-cta--global{
	width: 100% !important;
	max-width: none !important;
}
.bsp-cta--sticky .bsp-cta__wrap,
.bsp-cta--banner .bsp-cta__wrap{
	display: flex !important;
	align-items: center !important;
	justify-content: space-between !important;
	gap: 16px;
	width: 100% !important;
	/* La largeur du contenu du site, reglee dans Betting, Affiliation. */
	max-width: var(--bsp-large, 1200px) !important;
	margin-inline: auto !important;
	padding: 10px 20px !important;
	box-sizing: border-box;
}
.bsp-cta--sticky .bsp-cta__left{
	flex: 1 1 auto;
	min-width: 0;
}
.bsp-cta--sticky .bsp-cta__btn{ flex: 0 0 auto; }

/* La croix se colle au bord droit, contre le bouton et non a l autre bout de
   l ecran : c est la ou la main va la chercher. */
.bsp-cta--sticky .bsp-cta__close{ flex: 0 0 auto; margin-left: 4px; }

/* Le bandeau du haut centre son contenu : il annonce, il ne repartit pas. */
.bsp-cta--banner .bsp-cta__wrap{ justify-content: center !important; }

@media (max-width: 640px){
	.bsp-cta--sticky .bsp-cta__btn{ margin-inline: 0; }
	.bsp-cta--sticky .bsp-cta__wrap{ gap: 10px; padding: 8px 14px !important; }
}

/* ==========================================================================
   La ligne simple, accordee a la ligne complete
   ==========================================================================

   Deux presentations de rencontre existent : la ligne complete, avec les cotes,
   et la ligne simple, pour les resultats deja connus. La premiere a ete
   reprise entierement lors de la refonte des blocs, la seconde est restee dans
   la feuille de base : ses noms et son score prenaient donc l ambre du theme sur
   fond blanc, et sa date sortait deux fois plus grosse que sur la ligne
   complete. Deux listes voisines, deux styles.

   Elles partagent desormais la meme encre, les memes tailles et le meme survol.
   Seule difference conservee : la ligne simple range ses deux camps vers le
   score, ce qui n a de sens que la ou un score existe. */

.bsp-row{
	background-color: var(--panneau, #FFFFFF) !important;
	border: 1px solid #E4E9F1 !important;
	border-radius: 0 !important;
	color: var(--encre, #16202E) !important;
	margin-bottom: 0 !important;
	padding: 8px 12px !important;
	gap: 10px !important;
	transition: background-color 140ms ease !important;
}
.bsp-row + .bsp-row{ border-top: 0 !important; }
.bsp-row:hover{
	background-color: var(--bleu-clair, #E8EDF5) !important;
	box-shadow: none !important;
	transform: none !important;
	border-color: #E4E9F1 !important;
}

/* La date : meme mesure que l heure d une ligne complete. */
.bsp-row .bsp-row__date{
	color: var(--encre, #16202E) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.25 !important;
}

/* Les noms : encre lisible, jamais la couleur d un lien. */
.bsp-row .bsp-row__team,
.bsp-row .bsp-row__team span,
.bsp-row .bsp-row__team a{
	color: var(--encre, #16202E) !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	line-height: 1.25;
}

/* Le score se detache en bleu : c est le chiffre que l on vient lire. */
.bsp-row .bsp-row__score{
	color: var(--bleu, #12305A) !important;
	font-size: 14px !important;
	font-weight: 700 !important;
}
.bsp-row.is-live .bsp-row__score{ color: #C1362B !important; }

/* Les ecussons a la mesure de ceux d une ligne complete. */
.bsp-row .bsp-logo,
.bsp-row .bsp-row__team img{
	width: 17px !important;
	height: 17px !important;
	object-fit: contain;
	flex: 0 0 auto;
}

/* Le bandeau de journee : le meme bleu que les en-tetes de bloc. */
.bsp-group,
.bsp-day,
.bsp-round{
	background-color: var(--bleu, #12305A) !important;
	color: #FFFFFF !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 8px 12px !important;
	font-size: 11.5px !important;
	font-weight: 700 !important;
	letter-spacing: .07em;
	text-transform: uppercase;
}
.bsp-group{
	display: flex !important;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}
.bsp-group__round{ font-size: 11.5px !important; font-weight: 700 !important; }
.bsp-group__day{
	color: rgba(255,255,255,.78) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	letter-spacing: 0;
	text-transform: none;
}

/* Un bandeau qui suit une rencontre ouvre un nouveau groupe : c est le seul
   endroit de la liste ou un espace est justifie. */
.bsp-line + .bsp-group,
.bsp-row + .bsp-group,
.bsp-card + .bsp-group{ margin-top: 16px !important; }

@container (max-width: 470px){
	.bsp-row{ grid-template-columns: 1fr auto !important; row-gap: 4px !important; }
	.bsp-row .bsp-row__date{ grid-column: 1 / -1; font-size: 12px !important; }
}

/* ==========================================================================
   Une seule definition de la ligne de rencontre
   ==========================================================================

   Cette section decrivait la ligne en rangee souple. Une section plus bas la
   decrit en grille. Les deux portaient le mot cle d importance sur la meme
   propriete : la derniere lue gagnait pour l affichage, mais les largeurs, les
   marges et les replis de la premiere restaient actifs.

   Une ligne mi-grille mi-rangee n a aucune geometrie previsible : les colonnes de
   la grille recevaient des largeurs de rangee, et les elements se sont empiles.
   C est ce qui a casse la liste entiere.

   Cette section est donc supprimee. La ligne est decrite une seule fois, plus
   bas, sous « Les lignes de rencontre s alignent en colonnes ». Un controle refuse
   desormais toute seconde definition.

   Les deux regles conservees ci-dessous ne concernent pas la ligne : elles
   traitent l affiche a parier et la carte du pronostic sur ecran etroit. */

@container (max-width: 600px){
	.bsp-chrono__body{ flex-wrap: wrap !important; }
	.bsp-chrono__odds{ width: 100% !important; }
	.bsp-chrono__odds .bsp-cta__odds > .bsp-cta__odd{ flex: 1 1 0 !important; }
}

/* Et la carte du pronostic : le nom du camp pronostique passe sur sa rangee, la
   cote, la marque et le bouton sur la suivante. */
@media (max-width: 620px){
	.bsp-prono__body{ flex-direction: column; align-items: stretch; }
	.bsp-prono__go{ width: 100%; }
	.bsp-prono__go > .bsp-cta__btn{ flex: 1 1 auto !important; }
}


/* ==========================================================================
   Aucune image ne peut s emballer
   ==========================================================================

   Une image vectorielle sans dimension propre prend toute la place qu on lui
   offre : un logo de bookmaker s est ainsi affiche sur toute la hauteur de la
   page, repete a chaque ligne, rendant le site inutilisable.

   Chaque image rendue par le plugin recoit donc une borne en pixels. Ces valeurs
   ne dependent d aucun parent : une faute de reglage ne peut plus les annuler. */

.bsp-cta img,
.bsp-chrono img,
.bsp-vote img,
.bsp-combi img,
.bsp-prono img,
.bsp-faqx img,
.bsp-cotes img,
.bsp-relance img,
.bsp-pop img,
.bsp-line img,
.bsp-row img,
.bsp-table img,
.bsp-book img,
.bsp-card img{
	max-width: 100%;
	/* Une borne generale, jamais atteinte par les images correctement reglees, et
	   qui empeche toute image sans dimension propre d envahir la page. */
	max-height: 120px;
	height: auto;
}

/* Les logos de bookmaker : la marque du partenaire, dans tous ses emplacements. */
.bsp-cta__logo{
	height: 18px !important;
	max-height: 18px !important;
	width: auto !important;
	max-width: 88px !important;
	object-fit: contain;
}
.bsp-cta--card .bsp-cta__logo{ height: 22px !important; max-height: 22px !important; }
.bsp-line .bsp-cta__logo{ height: 15px !important; max-height: 15px !important; max-width: 68px !important; }
.bsp-book__logo img{ height: 20px !important; max-height: 20px !important; width: auto !important; max-width: 110px !important; }
.bsp-line__partner img{ height: 15px !important; max-height: 15px !important; width: auto !important; }

/* Un portrait de joueur ou une affiche de rencontre depasse ces bornes par
   nature : la borne generale ne les vise pas. */
.bsp-card__photo img,
.bsp-card__logo img{ max-height: 220px; }

/* Les ecussons de club et les portraits : carres, jamais deformes. */
.bsp-line__team img,
.bsp-line__league img,
.bsp-row__team img,
.bsp-table .bsp-td-team img,
.bsp-logo{
	object-fit: contain;
}
.bsp-line__team img,
.bsp-row__team img{ width: 17px !important; height: 17px !important; }
.bsp-line__league img{ width: 13px !important; height: 13px !important; }
.bsp-table .bsp-td-team img{ width: 18px !important; height: 18px !important; }


/* ==========================================================================
   Le combine du jour se distingue
   ==========================================================================

   C est le bloc qui porte la plus grosse promesse de gain de la page, et il
   ressemblait a tous les autres. Fond bleu nuit, chiffres en ambre : il se voit
   avant le reste, et le gain se lit d un coup d oeil. */

.bsp-combi{
	background-color: #12305A !important;
	border-color: #12305A !important;
	color: #FFFFFF !important;
}
.bsp-combi__head{
	background-color: rgba(255,255,255,.08) !important;
	border-bottom: 1px solid rgba(255,255,255,.16) !important;
}
.bsp-combi__leg{ border-top-color: rgba(255,255,255,.14) !important; }
.bsp-combi__name{ color: #FFFFFF !important; }
.bsp-combi__odd{ color: #FFC95D !important; }
.bsp-combi__label{ color: rgba(255,255,255,.7) !important; }
.bsp-combi__total{ border-top: 2px solid #F0B429 !important; }
.bsp-combi__sum{ color: #F0B429 !important; }
.bsp-combi__gain{ color: #FFFFFF !important; }
.bsp-combi__gain strong{ color: #6EE7A8 !important; }
.bsp-combi__note{ color: rgba(255,255,255,.6) !important; }

/* Sur ce fond, le bouton s inverse : ambre sur bleu, le contraste le plus fort
   de la page. */
.bsp-combi .bsp-cta__btn{
	background-color: #F0B429 !important;
	color: #16202E !important;
}
.bsp-combi .bsp-cta__btn:hover{ background-color: #FFC95D !important; }

/* ==========================================================================
   Un survol sur tout ce qui se clique
   ==========================================================================

   La marque du bookmaker et les liens de sortie ne reagissaient pas : rien
   n indiquait qu ils menaient quelque part. */

.bsp-cta__mark{ transition: filter 140ms ease; }
a.bsp-cta__mark:hover{ filter: brightness(1.25); }

.bsp-book:hover{ border-color: #12305A !important; }
.bsp-book__logo{ transition: filter 140ms ease; }
.bsp-book:hover .bsp-book__logo{ filter: brightness(1.15); }

/* ==========================================================================
   La barre fixe passe devant le bandeau de consentement
   ==========================================================================

   Le bandeau des cookies se pose en bas de page, au meme endroit : il recouvrait
   la barre, donc l offre et son bouton. */

.bsp-cta--sticky.bsp-cta--global{ z-index: 99998 !important; }
.bsp-pop{ z-index: 99999 !important; }


/* ==========================================================================
   Une seule trame, pour tous les blocs
   ==========================================================================

   Chaque bloc portait sa propre marge : seize pixels ici, vingt-quatre la, zero
   ailleurs. D un bloc a l autre l ecart changeait donc sans raison, et rien ne
   s alignait sur rien. C est le reproche le plus repete du retour, et il vise une
   seule cause.

   La regle est desormais unique : aucun bloc ne porte de marge propre. C est le
   conteneur du modele qui donne l espace, avec une valeur unique posee dans les
   modeles eux-memes. Un bloc deplace garde ainsi le rythme de son nouvel
   emplacement, sans reglage a reprendre.

   Les blocs empiles dans une colonne, eux, se separent d une gouttiere egale. */

.bsp-chrono,
.bsp-vote,
.bsp-combi,
.bsp-prono,
.bsp-faqx,
.bsp-cta--card,
.bsp-cta--inline,
.bsp-cotes,
.bsp-relance,
.bsp-layout,
.bsp-table-wrap,
.bsp-book,
.bsp-links{
	margin: 0 !important;
}

/* Deux blocs qui se suivent dans une colonne : une seule gouttiere, la meme que
   celle des modeles. */
.e-con-inner > [class*="elementor-widget-bsp_"] + [class*="elementor-widget-bsp_"],
[class*="elementor-widget-bsp_"] + [class*="elementor-widget-bsp_"]{
	margin-top: 0 !important;
}

/* Les lignes d une liste se touchent : un filet les separe, pas un espace. Les
   espaces entre les lignes donnaient une liste qui flottait. */
.bsp-layout > .bsp-line,
.bsp-layout > .bsp-row{ margin: 0 !important; }
.bsp-layout > .bsp-line + .bsp-line,
.bsp-layout > .bsp-row + .bsp-row{ border-top: 0 !important; }

/* Le titre d un bloc et le bloc lui-meme forment un ensemble : l espace entre
   les deux est plus court que celui qui separe deux ensembles. */
.bsp-layout__title{
	/* Taille, marge et couleur viennent de l echelle unique, plus bas : les
	   redeclarer ici donnait deux valeurs pour un meme titre. */
	font-weight: 700;
}

/* ==========================================================================
   Pleine largeur : le texte ne revient plus a la ligne au milieu de la page
   ==========================================================================

   Un conteneur en largeur limitee, pose dans une colonne elle-meme limitee,
   produit une colonne dans la colonne : le texte revient a la ligne bien avant
   le bord, et la page parait mal reglee. */

[class*="elementor-widget-bsp_"] .bsp-layout,
[class*="elementor-widget-bsp_"] > .elementor-widget-container > *{
	max-width: 100% !important;
}

.bsp-copy,
.bsp-copy > *,
.bsp-lede{
	max-width: 100% !important;
}

/* Le contenu d article rendu par le theme : meme mesure que nos blocs, sinon le
   texte long est plus etroit que la liste qui le suit. */
.elementor-widget-theme-post-content > .elementor-widget-container{
	max-width: 100% !important;
}

/* ==========================================================================
   Retours du 28/08 : alignement, espaces, presentation
   ==========================================================================

   Vingt-deux remarques, dix causes. Chaque section ci-dessous en traite une, et
   la meme correction vaut pour les cinq pages : c est ce qui evite qu une page
   corrigee laisse les quatre autres en arriere. */

/* --------------------------------------------------------------------------
   1 et 2. La geometrie de la ligne a ete deplacee
   --------------------------------------------------------------------------

   Ces deux sections decrivaient la ligne en rangee souple, avec des largeurs et
   des replis propres. La section « Les lignes de rencontre s alignent en
   colonnes », plus bas, la decrit en grille.

   Deux definitions de la meme geometrie ne cohabitent pas : la grille recevait
   des largeurs de rangee, et la liste s est effondree. Une seule definition
   subsiste, et un controle refuse toute seconde.

   Ne restent ici que les regles de couleur et de graisse, qui ne touchent pas a
   la disposition. */

.bsp-line__nom,
.bsp-line__time{ line-height: 1.2 !important; }

/* --------------------------------------------------------------------------
   3. Le survol : texte blanc sur fond bleu
   --------------------------------------------------------------------------

   Les vignettes de championnat, les listes d affiches et les lignes de liens
   changeaient de bordure au survol, ce qui ne se voit pas. Elles s inversent
   desormais franchement : le visiteur sait qu il peut cliquer. */

.bsp-league-card,
.bsp-links__row,
.bsp-links__tag,
.bsp-card{
	transition: background-color 140ms ease, border-color 140ms ease, color 140ms ease;
}

.bsp-league-card:hover,
.bsp-links__row:hover,
.bsp-links__tag:hover,
.bsp-card:hover{
	background-color: #12305A !important;
	border-color: #12305A !important;
	color: #FFFFFF !important;
	transform: none !important;
	box-shadow: none !important;
}

/* Tout ce que la vignette contient suit : titre, pays, nombre de rencontres. */
.bsp-league-card:hover *,
.bsp-links__row:hover *,
.bsp-links__tag:hover *,
.bsp-card:hover *{ color: #FFFFFF !important; }

/* Un logo sur fond bleu garde sa lisibilite : les emblemes sombres disparaissent
   sinon completement. */
.bsp-league-card:hover img,
.bsp-card:hover img{
	background: #FFFFFF;
	border-radius: 2px;
	padding: 1px;
}

/* --------------------------------------------------------------------------
   4. Le classement : la ligne de l equipe affichee se voit
   -------------------------------------------------------------------------- */

.bsp-table tbody tr.is-ici td{
	background-color: #12305A !important;
	color: #FFFFFF !important;
	font-weight: 700 !important;
}
.bsp-table tbody tr.is-ici td a,
.bsp-table tbody tr.is-ici td:last-child{ color: #FFFFFF !important; }
.bsp-table tbody tr.is-ici img{ background: #FFFFFF; border-radius: 2px; padding: 1px; }

/* Le tableau ne laisse plus d espace au-dessus ni en dessous : la trame des
   conteneurs s en charge. */
.bsp-table{ margin: 0 !important; }
.bsp-table-wrap{ margin: 0 !important; }
.bsp-legend{ margin: 6px 0 0 !important; }

/* --------------------------------------------------------------------------
   5. La fiche de reperes : une grille ou tout s aligne
   --------------------------------------------------------------------------

   Les reperes etaient assembles a la main, un conteneur par valeur : une valeur
   sur deux lignes decalait tous les intitules suivants. Une grille les tient
   alignes quelle que soit la longueur du texte. */

.bsp-reperes{
	display: grid;
	grid-template-columns: repeat(var(--bsp-cols, 5), minmax(0, 1fr));
	gap: 1px;
	margin: 0;
	padding: 0;
	background: #D5DDE9;
	border: 1px solid #D5DDE9;
}
.bsp-reperes__case{
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 3px;
	padding: 10px 12px;
	background: #FFFFFF;
	min-width: 0;
}
.bsp-reperes__nom{
	color: #5B6B85;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.3;
}
.bsp-reperes__valeur{
	margin: 0;
	color: #16202E;
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	overflow-wrap: break-word;
}
.bsp-reperes__valeur a{ color: #12305A !important; text-decoration: none; }
.bsp-reperes__valeur a:hover{ text-decoration: underline; }

@media (max-width: 900px){
	.bsp-reperes{ grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 520px){
	.bsp-reperes{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --------------------------------------------------------------------------
   6. Effectif et vignettes : un nombre par rangee qui se decide
   --------------------------------------------------------------------------

   L effectif s etalait sur autant de colonnes que la place le permettait, ce qui
   donnait des vignettes minuscules et un mur de noms. Trois par rangee dans une
   colonne de contenu, cinq pour les vignettes de championnat en pleine largeur. */

/* Le nombre de colonnes est un reglage du widget : on l impose ici pour l effectif
   seulement, la ou le retour demande trois par rangee. */
.elementor-widget-bsp_players .bsp-layout--cards{
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

.bsp-links__cards{
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 12px !important;
}

@container (max-width: 900px){
	.elementor-widget-bsp_players .bsp-layout--cards{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.bsp-links__cards{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
}

@media (max-width: 560px){
	.elementor-widget-bsp_players .bsp-layout--cards{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
	.bsp-links__cards{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* --------------------------------------------------------------------------
   7. Les espaces : la trame et rien d autre
   --------------------------------------------------------------------------

   Un titre laissait sa marge, un tableau la sienne, une liste la sienne : trois
   espaces qui s ajoutaient a celui du conteneur. Le retour signale cinq fois des
   ecarts trop grands, sur cinq pages : c est la meme cause. */

.bsp-links__body{ margin-top: 0 !important; }

/* Les titres de section et leur sous-titre : voir l echelle unique, plus bas. */

/* Le fil d Ariane colle a la page : il annonce, il ne meuble pas. */
.bsp-crumbs{ margin: 0 0 6px !important; font-size: 12.5px; }

/* Le titre et le chapo d ouverture : un seul espace entre eux. */
.elementor-widget-heading + .elementor-widget-text-editor{ margin-top: 0 !important; }

/* --------------------------------------------------------------------------
   8. La bande d ouverture : visuel a gauche, texte a droite
   -------------------------------------------------------------------------- */

.elementor-widget-image img{ display: block; }

/* Le visuel garde sa place et ne s etire pas : un ecusson etire sur cent dix
   pixels de large et quatre-vingts de haut se deforme. */
.e-con-inner > .e-con[class*="elementor-element"] .elementor-widget-image{ text-align: left; }

/* ==========================================================================
   Retours du 28/08, second passage
   ==========================================================================

   Dix remarques, et pour deux d entre elles la correction precedente avait porte
   sur le mauvais endroit. Chaque section dit ce qui n avait pas ete vu. */

/* --------------------------------------------------------------------------
   1. La rangee de cotes : plus rien ne depasse
   --------------------------------------------------------------------------

   Le groupe s etirait bien, mais chaque element gardait son remplissage propre :
   la marque avait le sien, les cases le leur, le bouton le sien. Trois hauteurs
   internes differentes dans une rangee de hauteur commune, donc des bords qui ne
   tombent pas au meme endroit.

   Une hauteur est donc imposee a la rangee, et chaque element l occupe
   entierement, remplissage compris. */

.bsp-cta__odds{
	display: flex !important;
	align-items: stretch !important;
	height: 44px;
	min-height: 44px !important;
	gap: 4px;
}
.bsp-cta__odds > *{
	height: 100% !important;
	min-height: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	border-width: 1px !important;
	box-sizing: border-box !important;
}

/* La marque : aucune bordure, sinon elle paraît plus haute d un pixel de chaque
   cote que les cases voisines. */
.bsp-cta__odds > .bsp-cta__mark{
	border: 0 !important;
	padding: 0 14px !important;
}

/* Le bouton : meme hauteur, texte centre. */
.bsp-cta__odds > .bsp-cta__btn{
	border: 0 !important;
	padding: 0 18px !important;
	display: flex !important;
	align-items: center;
}

/* Dans une ligne de liste, la rangee est plus basse mais la regle est la meme. */
.bsp-line .bsp-cta__odds{ height: 38px; min-height: 38px !important; }

/* --------------------------------------------------------------------------
   2. Le survol : jamais de bleu sur bleu
   --------------------------------------------------------------------------

   La regle precedente colorait le cadre, mais le texte a l interieur gardait sa
   couleur d origine : bleu nuit sur bleu nuit, donc illisible. Chaque descendant
   passe desormais au blanc, sans exception. */

.bsp-vote__pick:hover,
.bsp-vote__pick:hover *,
.bsp-cta__odd:hover,
.bsp-cta__odd:hover *,
.bsp-line:hover .bsp-cta__btn,
.bsp-book:hover .bsp-book__cta{
	color: #FFFFFF !important;
}

/* La case de cote au survol : fond bleu, chiffre blanc, intitule lisible. */
.bsp-cta__odd:hover .bsp-cta__odd-tag{ color: rgba(255,255,255,.75) !important; }
.bsp-vote__pick:hover .bsp-vote__odd,
.bsp-vote__pick:hover .bsp-vote__name{ color: #FFFFFF !important; }
.bsp-vote__pick:hover .bsp-vote__odd--go{ color: rgba(255,255,255,.8) !important; }

/* Une case estimee au survol : le filet devient plein, le fond bleu. */
.bsp-cta__odd.is-est:hover,
.bsp-vote__pick.is-est:hover{
	background-color: #12305A !important;
	border-color: #12305A !important;
	border-style: solid !important;
	color: #FFFFFF !important;
}

/* --------------------------------------------------------------------------
   3. L affiche d une rencontre : les trois colonnes centrees
   --------------------------------------------------------------------------

   Les deux ecussons et le bloc central etaient poses dans trois colonnes de
   largeurs differentes, chacune alignee sur son propre bord : l ecusson de gauche
   collait au bord, celui de droite flottait, et le vs ne tombait pas au milieu. */

.e-con-inner > .e-con .elementor-widget-image,
.e-con > .e-con-inner > .e-con .elementor-widget-image{ width: 100%; }

.elementor-widget-image .elementor-widget-container{ text-align: center; }
.elementor-widget-image img{ margin-inline: auto; }

/* La bande d ouverture d une fiche : le visuel reste cale a gauche, lui. */
.bsp-hero-pile .elementor-widget-image .elementor-widget-container,
.bsp-hero-pile .elementor-widget-image img{ margin-inline: 0; text-align: left; }

/* --------------------------------------------------------------------------
   4. Le classement : des chiffres, pas des affiches
   --------------------------------------------------------------------------

   Les cellules heritaient de la taille du texte courant du theme, qui monte a
   trente pixels sur ce site : le tableau occupait trois ecrans pour vingt lignes.
   Les tailles sont donc posees ici, et elles ne dependent plus du theme. */

.bsp-table,
.bsp-table th,
.bsp-table td{
	font-size: 13px !important;
	line-height: 1.35 !important;
}
.bsp-table thead th{ font-size: 10px !important; }
.bsp-table tbody td{ padding: 5px 6px !important; }
.bsp-table tbody td:last-child{ font-size: 14px !important; }
.bsp-table .bsp-td-team{ font-size: 13px !important; }
.bsp-table .bsp-td-team img{ width: 16px !important; height: 16px !important; }

/* Dans une colonne laterale, le tableau se resserre encore : huit colonnes de
   chiffres tiennent alors dans un tiers d ecran. */
@container (max-width: 460px){

	.bsp-table,
	.bsp-table th,
	.bsp-table td{ font-size: 11.5px !important; }

	.bsp-table thead th{ font-size: 9px !important; }
	.bsp-table tbody td{ padding: 4px 3px !important; }
	.bsp-table th:first-child,
	.bsp-table td:first-child{ width: 22px; }
	.bsp-table th:nth-child(n+3),
	.bsp-table td:nth-child(n+3){ width: 22px; }
	.bsp-table th:nth-child(2),
	.bsp-table td:nth-child(2){ min-width: 0; }
	.bsp-table .bsp-td-team img{ width: 13px !important; height: 13px !important; margin-right: 4px; }
}

/* --------------------------------------------------------------------------
   5. L effectif : trois par rangee, et un survol lisible
   --------------------------------------------------------------------------

   La regle precedente visait la grille par le nom du widget, mais le nombre de
   colonnes est pose par une variable du bloc, qui gagne : elle n a donc jamais
   pris effet. C est la variable qu il faut ecrire. */

.elementor-widget-bsp_players .bsp-layout--cards,
.elementor-widget-bsp_teams .bsp-layout--cards{
	--bsp-columns: 3 !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
}

/* La carte d un concurrent : le contenu ne doit pas deborder de sa case. */
.bsp-card{
	display: flex !important;
	flex-direction: column;
	gap: 8px;
	padding: 12px !important;
	margin: 0 !important;
	border-radius: 0 !important;
	min-width: 0;
}
.bsp-card__title{ font-size: 15px !important; margin: 0 !important; }
.bsp-card .bsp-meta{ gap: 8px 14px !important; }
.bsp-card .bsp-meta li{ font-size: 12.5px !important; }
.bsp-card .bsp-meta span{ font-size: 9.5px !important; }
.bsp-card__photo{ border-radius: 0 !important; }

@container (max-width: 700px){
	.elementor-widget-bsp_players .bsp-layout--cards,
	.elementor-widget-bsp_teams .bsp-layout--cards{
		--bsp-columns: 2 !important;
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

/* --------------------------------------------------------------------------
   6. La fiche de reperes tient sur une ligne
   --------------------------------------------------------------------------

   Le nombre de colonnes vient desormais du nombre de reperes : la grille suit,
   et les valeurs se resserrent plutot que de passer a la ligne. */

.bsp-reperes{ gap: 1px; }
.bsp-reperes__case{ padding: 8px 10px; }
.bsp-reperes__nom{ font-size: 9.5px; }
.bsp-reperes__valeur{
	font-size: 13.5px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Sept reperes dans une colonne de contenu donnent des cases etroites : la
   valeur peut alors revenir a la ligne plutot que d etre coupee. */
@container (max-width: 620px){
	.bsp-reperes{ grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
	.bsp-reperes__valeur{ white-space: normal; }
}
@media (max-width: 520px){
	.bsp-reperes{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ==========================================================================
   La ligne de rencontre : une seule definition, une seule ligne
   ==========================================================================

   La faute precedente, et elle explique l empilement des ecussons au-dessus des
   noms : les enfants etaient places par numero de colonne, avec la regle
   « le premier element de type span va en colonne deux ».

   Or l ecusson d une equipe sans visuel est justement un span : deux elements se
   retrouvaient donc dans la meme colonne, et la grille creait une seconde rangee
   pour les separer. Le bilan de match ajoute un troisieme enfant, ce qui aggravait
   le cas.

   Aucun placement par numero ici. Chaque zone est une rangee qui ne se replie pas,
   et l ordre du balisage suffit : c est la disposition la plus simple qui reponde
   au besoin, et la seule qui ne depende pas du nombre d enfants.

   Trois zones sur la ligne : les reperes, le duel, les cotes. */

.bsp-line{
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 12px !important;
	padding: 7px 12px !important;
	min-height: 0 !important;
	grid-template-columns: none !important;
}

/* 1. Les reperes : la competition sur une ligne, l heure dessous. */
.bsp-line__side{
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start !important;
	justify-content: center !important;
	gap: 1px !important;
	flex: 0 0 104px !important;
	width: 104px !important;
	min-width: 0 !important;
	max-width: 104px !important;
	overflow: hidden;
}

.bsp-line__league{
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 5px !important;
	width: 100%;
	min-width: 0;
	overflow: hidden;
}
.bsp-line__league img{
	flex: 0 0 15px !important;
	width: 15px !important;
	height: 15px !important;
	object-fit: contain;
}
.bsp-line__nom{
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #5B6B85 !important;
	font-size: 9.5px !important;
	font-weight: 700 !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	line-height: 1.2;
}
.bsp-line__time{
	font-size: 15px !important;
	font-weight: 700 !important;
	line-height: 1.2 !important;
	color: #16202E !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

/* 2. Le duel : les deux camps de part et d autre du centre. */
.bsp-line__match{
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 10px !important;
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	text-decoration: none !important;
}

/* Une equipe : ecusson et nom cote a cote, sur une seule ligne, quel que soit le
   nombre d elements que la source ajoute. */
.bsp-line__team{
	display: flex !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	gap: 7px !important;
	flex: 1 1 0 !important;
	min-width: 0 !important;
	overflow: hidden;
}

/* Les deux camps se rangent vers le centre : l equipe qui recoit se termine juste
   avant le separateur, celle qui se deplace commence juste apres. L oeil relie
   ainsi chaque nom a son ecusson, puis au score.

   Aucune inversion du sens de lecture : l ordre est ecrit dans le balisage. */
.bsp-line__team:not(.bsp-line__team--away){
	flex-direction: row !important;
	justify-content: flex-end !important;
	text-align: right;
}
.bsp-line__team--away{
	flex-direction: row !important;
	justify-content: flex-start !important;
	text-align: left;
}

.bsp-line__team .bsp-logo,
.bsp-line__team img{
	flex: 0 0 20px !important;
	width: 20px !important;
	height: 20px !important;
	min-width: 20px;
	object-fit: contain;
}

/* Le nom : il se tronque, il ne pousse pas. Le selecteur ecarte l ecusson sans
   visuel, qui est un span lui aussi. */
.bsp-line__team > span:not(.bsp-logo){
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: #16202E !important;
	line-height: 1.25;
}

/* Le bilan, quand la source le fournit : il ne prend pas la place du nom. */
.bsp-line__record{
	flex: 0 0 auto;
	font-size: 11px !important;
	font-weight: 500 !important;
	color: #5B6B85 !important;
	white-space: nowrap;
}

/* Le centre : le score, ou rien. Le mot vs n apporte pas d information que la
   disposition ne donne pas deja. */
.bsp-line__score{
	flex: 0 0 auto !important;
	width: auto !important;
	text-align: center;
	color: #5B6B85 !important;
	font-size: 12.5px !important;
	font-weight: 600 !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
/* Le vs : discret, il sert de point d appui entre les deux camps. Le score, lui,
   se lit en chiffres et se detache. */
.bsp-line__score.is-vs{
	font-size: 11px !important;
	font-weight: 600 !important;
	letter-spacing: .04em;
	text-transform: uppercase;
	opacity: .55;
}
.bsp-line.is-live .bsp-line__score{ color: #C1362B !important; font-weight: 700 !important; }

/* 3. Les cotes : largeur fixe pour chaque element, donc la meme place sur toutes
   les lignes de toutes les listes. */
.bsp-line .bsp-cta__odds{
	display: flex !important;
	align-items: stretch !important;
	flex-wrap: nowrap !important;
	flex: 0 0 auto !important;
	width: auto !important;
	margin: 0 !important;
	gap: 4px !important;
	height: 38px;
	min-height: 38px !important;
}
.bsp-line .bsp-cta__mark{
	flex: 0 0 92px !important;
	width: 92px !important;
	padding: 0 !important;
	border: 0 !important;
}
.bsp-line .bsp-cta__odd{
	flex: 0 0 52px !important;
	width: 52px !important;
	min-width: 0 !important;
	padding: 0 !important;
}
.bsp-line .bsp-cta__btn{
	flex: 0 0 78px !important;
	width: 78px !important;
	padding: 0 !important;
	font-size: 11.5px !important;
}

/* Les cotes d une liste : le nombre seul. Trois nombres alignes se lisent d
   eux-memes, et les intitules doublaient la hauteur des cases. */
.bsp-line .bsp-cta__odd-tag{ display: none !important; }
.bsp-line .bsp-cta__odd-val{ font-size: 15px !important; font-weight: 700 !important; }

/* Une ligne sur deux teintee : l oeil suit la ligne jusqu au bouton. */
.bsp-layout > .bsp-line:nth-child(even){ background-color: #F7F9FC !important; }
.bsp-layout > .bsp-line:hover,
.bsp-layout > .bsp-line:nth-child(even):hover{ background-color: #E8EDF5 !important; }

/* Colonne etroite, et seulement la : les cotes passent sous la rencontre.
   Le seuil est bas a dessein. Au-dessus, tout tient sur une ligne, et c est ce
   qui est demande. */
@container (max-width: 440px){

	.bsp-line{ flex-wrap: wrap !important; row-gap: 8px !important; }
	.bsp-line__side{ flex: 0 0 92px !important; width: 92px !important; max-width: 92px !important; }

	.bsp-line .bsp-cta__odds{
		flex: 1 1 100% !important;
		width: 100% !important;
	}
	.bsp-line .bsp-cta__odd{ flex: 1 1 0 !important; width: auto !important; }
	.bsp-line .bsp-cta__mark{ flex: 0 0 80px !important; width: 80px !important; }
	.bsp-line .bsp-cta__btn{ flex: 0 0 70px !important; width: 70px !important; }
}

/* ==========================================================================
   Le survol d une carte : le nom reste lisible
   ==========================================================================

   Le fond passait au bleu et le titre gardait son encre : bleu nuit sur bleu
   nuit, invisible. Sa propre regle de couleur, plus precise, gagnait sur la regle
   generale du survol. */

.bsp-card:hover .bsp-card__title,
.bsp-card:hover .bsp-card__title a,
.bsp-card:hover .bsp-meta,
.bsp-card:hover .bsp-meta li,
.bsp-card:hover .bsp-meta span,
.bsp-card:hover a,
.bsp-league-card:hover .bsp-league-card__name,
.bsp-league-card:hover .bsp-league-card__meta,
.bsp-league-card:hover .bsp-league-card__count,
.bsp-links__row:hover *,
.bsp-links__tag:hover *{
	color: #FFFFFF !important;
}

/* Les initiales affichees a defaut de portrait : elles sont posees sur un fond
   clair, qui doit s eclaircir encore sur bleu pour rester lisible. */
.bsp-card:hover .bsp-card__photo--empty,
.bsp-card:hover .bsp-card__logo--empty{
	background: rgba(255,255,255,.16) !important;
	color: #FFFFFF !important;
}

/* ==========================================================================
   La ligne de rencontre, calee sur le modele fourni
   ==========================================================================

   L exemple de reference montre une trame stricte : la competition et l heure a
   gauche, les deux camps de part et d autre du centre, la marque, puis les cotes.
   Chaque colonne a la meme largeur d une ligne a l autre, et un nom trop long se
   coupe. C est cette trame qui est reprise ici.

   Trois details du modele qui comptent, et qui manquaient :

     le nom du club est ecrit en gras, plus gros que le reste de la ligne : c est
     ce qu on cherche du regard en parcourant une liste ;

     les cotes n ont pas d intitule 1 N 2 dans une liste. Trois nombres alignes se
     lisent d eux-memes, et les intitules doublaient la hauteur des cases ;

     une ligne sur deux porte un fond legerement teinte, ce qui guide l oeil
     horizontalement sur toute la largeur. */

/* Le nom du club : plus lisible que le reste, comme sur le modele. */
.bsp-line__team > span{
	font-size: 14.5px !important;
	font-weight: 700 !important;
	color: #16202E !important;
}

/* L heure : le second repere du regard, apres le nom. */
.bsp-line__time{
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #16202E !important;
}

/* Les cotes d une liste : le nombre seul, sans intitule.
   L intitule reste sur la page d une rencontre, ou il n y a qu une rangee et ou
   la place ne manque pas. */
.bsp-line .bsp-cta__odd-tag{ display: none !important; }
.bsp-line .bsp-cta__odd-val{ font-size: 15px !important; font-weight: 700 !important; }

/* Une ligne sur deux teintee : l oeil suit la ligne jusqu au bouton. */
.bsp-layout > .bsp-line:nth-child(even){ background-color: #F7F9FC !important; }
.bsp-layout > .bsp-line:hover,
.bsp-layout > .bsp-line:nth-child(even):hover{ background-color: #E8EDF5 !important; }

/* Le separateur central : un espace, pas un mot.
   Le vs occupait quarante pixels au centre de chaque ligne pour ne rien dire que
   la disposition n indique deja. Sur une rencontre jouee, le score le remplace :
   lui porte une information. */
.bsp-line__score{
	color: #5B6B85 !important;
	font-size: 12px !important;
	font-weight: 600 !important;
	text-transform: lowercase;
}

/* Les ecussons : la meme taille partout, jamais deformes. */

/* Le logo de la competition, un cran plus petit que les ecussons : il situe, il
   ne concurrence pas les deux clubs. */

/* ==========================================================================
   Le fil d Ariane : la page affichee en noir
   ==========================================================================

   Dans un modele, le fil est rendu par un widget : la couleur globale du theme
   s appliquait au dernier maillon et l ecrivait en blanc. Sur fond clair il
   disparaissait, sur fond fonce il devenait illisible. La page affichee est
   desormais toujours en noir, et elle reste le seul maillon non clique. */

.bsp-crumbs li.is-current span,
.bsp-crumbs li.is-current > span[aria-current],
.elementor-widget-bsp_breadcrumbs .bsp-crumbs li.is-current span{
	color: #16202E !important;
	font-weight: 700;
}

/* ==========================================================================
   Retours du 28/08, troisieme passage
   ==========================================================================

   Deux defauts sur la colonne laterale et le sommaire des disciplines. */

/* --------------------------------------------------------------------------
   1. Les ecussons de la colonne laterale
   --------------------------------------------------------------------------

   Une regle plus ancienne fixait tous les ecussons de ligne simple a dix-sept
   pixels, colonne laterale comprise : deux vignettes minuscules de part et
   d autre d un vs, sans nom d equipe. Dans la colonne, ils reprennent la taille
   d une ligne complete. La regle est plus precise que la precedente, elle passe
   donc devant sans avoir a la supprimer. */

.bsp-shell__side .bsp-row .bsp-logo,
.bsp-shell__side .bsp-row .bsp-row__team img{
	width: 28px !important;
	height: 28px !important;
}

/* --------------------------------------------------------------------------
   2. Les pictogrammes de discipline
   --------------------------------------------------------------------------

   Trace fin, jamais de remplissage : un pictogramme plein sur une grille de
   quinze cartes ecrase la page, et ne ressemble a rien du reste du site. */

.bsp-pict{
	fill: none !important;
	stroke: currentColor !important;
	stroke-width: 1.4 !important;
}

/* ==========================================================================
   Retours en video du 29/08
   ==========================================================================

   Dix remarques, relevees une a une sur l enregistrement. Chaque section dit
   ce qui etait en cause, et ce qui le remplace. */

/* --------------------------------------------------------------------------
   1. La colonne de droite descend jusqu en bas
   --------------------------------------------------------------------------

   Sur la page d une competition, la moitie droite de l ecran etait blanche des
   qu on depassait le classement : la colonne s arretait avec son dernier bloc.
   Elle est desormais collante sur toute la hauteur de la page, donc toujours
   quelque chose sous les yeux, et le vide disparait.

   Le conteneur parent doit laisser deborder son contenu, sinon la position
   collante n a aucun effet : c est la cause la plus courante d une colonne qui
   refuse de suivre le defilement. */

@media (min-width: 1025px){

	/* La colonne de droite ne defile plus a l interieur d elle-meme.
	   ------------------------------------------------------------

	   Bornee a la hauteur de l ecran avec son propre defilement, elle coupait
	   tout ce qui depassait : la carte du bookmaker, le bloc de pari et le
	   combine sortaient tronques en plein milieu, et le visiteur n avait aucun
	   moyen de deviner qu il manquait quelque chose.

	   Elle reprend donc sa hauteur naturelle. C est son dernier bloc, et lui
	   seul, qui accompagne le defilement : un bloc isole tient dans l ecran, donc
	   rien n est jamais coupe. */
	.bsp-sticky{
		align-self: stretch !important;
		max-height: none !important;
		overflow: visible !important;
	}

	.bsp-sticky > *:last-child{
		position: sticky;
		top: 12px;
	}

	/* Les ancetres ne coupent plus la position collante. */
	.e-con:has(> .bsp-sticky),
	.e-con-inner:has(> .bsp-sticky){
		align-items: start !important;
		overflow: visible !important;
	}
}

/* --------------------------------------------------------------------------
   2. Une seule echelle d espaces, une seule echelle de titres
   --------------------------------------------------------------------------

   La remarque revient six fois dans l enregistrement, sur six pages : trop
   d air entre deux blocs. La cause n etait pas une marge trop grande, mais
   trois marges superposees.

   Trois feuilles se suivent : celle du theme, betting.css, puis celle-ci. Un
   titre de section recevait 22 pixels de la premiere, 19 de la seconde et 21
   de la troisieme, une liste 28 pixels de marge haute puis 0, un bloc 48 puis
   0. Selon la page et l ordre de lecture, l ecart final changeait : d ou
   l impression de desordre alors que les blocs sont les memes.

   Tout est donc ramene ici, une fois, sur deux echelles courtes :

     espaces  4, 8, 12, 16, 20, 24 pixels et rien d autre ;
     titres   26 pour la page, 21 pour une section, 15 dans la colonne.

   Les valeurs d origine sont corrigees a leur source dans betting.css : cette
   section ne fait que poser l echelle, elle ne lutte plus contre elle. */

:root{
	--bsp-e1: 4px;   /* a l interieur d un ensemble */
	--bsp-e2: 8px;   /* titre et bloc qu il annonce */
	--bsp-e3: 12px;  /* deux blocs d une meme colonne */
	--bsp-e4: 16px;  /* deux ensembles */
	--bsp-e5: 24px;  /* deux grandes parties de page */
}

/* Deux ensembles de page : seize pixels, jamais quarante-huit. */
.bsp-arch__block,
.bsp-arch__intro,
.bsp-copy{
	margin: 0 0 var(--bsp-e4) !important;
}

/* Un bloc de contenu et son voisin, dans les gabarits du plugin seulement.
   Dans un modele Elementor, c est la gouttiere du conteneur qui donne l espace,
   et les blocs n ont deliberement aucune marge propre : leur en donner une
   ajouterait un second ecart par-dessus le premier. */
.bsp-single .bsp-list,
.bsp-single .bsp-links,
.bsp-single .bsp-table-wrap,
.bsp-single .bsp-figures,
.bsp-single .bsp-grid{
	margin: 0 0 var(--bsp-e3) !important;
}

/* Un titre annonce ce qui le suit : il en reste proche, et il prend son air
   au-dessus, pas en dessous. */
.bsp-arch__h2,
.bsp-list__title,
.bsp-copy__title,
.bsp-layout__title,
.bsp-links__title{
	margin: var(--bsp-e5) 0 var(--bsp-e2) !important;
	font-size: 21px !important;
	line-height: 1.25 !important;
	font-weight: 700 !important;
	font-family: inherit !important;
	letter-spacing: 0 !important;
	color: #16202E !important;
}

/* Premier element d une partie : son titre ne repousse pas le haut du bloc. */
.bsp-arch__block > *:first-child,
.bsp-copy > *:first-child,
.bsp-single > *:first-child,
.bsp-shell__main > *:first-child,
.e-con-inner > *:first-child{
	margin-top: 0 !important;
}

/* Le sous-titre d une section reste attache a son titre. */
.bsp-arch__h2 small{
	display: block;
	margin-top: 2px;
	font-size: 13px !important;
	font-weight: 500;
	color: #5B6B85;
	text-transform: none;
	letter-spacing: 0;
}

/* Dans la colonne de droite, tout se resserre : elle fait trois cent vingt
   pixels, un titre de section y passait sur deux lignes et chaque bloc y est
   deja encadre. */
.bsp-sticky > *,
.bsp-shell__side > *{ margin: 0 0 var(--bsp-e3) !important; }

.bsp-sticky > *:last-child,
.bsp-shell__side > *:last-child{ margin-bottom: 0 !important; }

.bsp-sticky .bsp-list__title,
.bsp-sticky .bsp-layout__title,
.bsp-sticky .bsp-arch__h2,
.bsp-shell__side .bsp-list__title,
.bsp-shell__side .bsp-layout__title{
	margin: 0 0 var(--bsp-e2) !important;
	font-size: 15px !important;
}

/* Le titre de la page : une seule ligne sur un ecran d ordinateur. Pronostics
   football americain : cotes, calendrier et matchs passait sur deux lignes et
   repoussait tout le contenu vers le bas. */
.bsp-arch__title,
.bsp-single__title,
.elementor-widget-heading h1.elementor-heading-title{
	margin: 0 0 var(--bsp-e3) !important;
	font-size: clamp(26px, 2.6vw, 40px) !important;
	line-height: 1.15 !important;
	text-wrap: balance;
	max-width: none;
}

/* Le chapo suit son titre de pres. */
.bsp-lede{ margin: 0 0 var(--bsp-e4) !important; }

/* --------------------------------------------------------------------------
   5. Les cartes de concurrent ont toutes le meme cadre
   --------------------------------------------------------------------------

   Sur une fiche de joueur, une carte sur trois semblait sans cadre. Le cadre
   etait pourtant la : ce sont les hauteurs qui differaient.

   La liste des reperes se disposait librement, si bien qu une carte affichait
   equipe, poste et nationalite sur une ligne quand la voisine renvoyait l age
   a la ligne suivante. Deux hauteurs differentes, deux bas de cadre a des
   hauteurs differentes, et l oeil conclut a un cadre manquant.

   Les reperes tiennent donc sur une grille fixe de trois colonnes, et toutes
   les cartes d une rangee prennent la meme hauteur. */

/* Les rangees gardent la hauteur de leur contenu.
   ----------------------------------------------

   Une grille dont les rangees sont dimensionnees par leur contenu se laisse
   pourtant etirer quand son conteneur est plus haut qu elle : c est le
   comportement par defaut, et il repartit la hauteur en trop sur les rangees.

   Depuis que les deux colonnes de la page prennent la meme hauteur, la grille
   des concurrents recevait toute la hauteur de la colonne de droite. Une seule
   carte sur sa rangee la remplissait alors entierement : un cadre vide de six
   cents pixels avec un numero de maillot perdu au milieu.

   La rangee reste donc calee en haut, et les cartes d une meme rangee gardent
   la meme hauteur entre elles, ce qui etait le but. */
.bsp-layout--cards,
.bsp-grid{
	align-items: stretch !important;
	align-content: start !important;
}

.bsp-layout--cards > .bsp-card,
.bsp-grid > .bsp-card{
	border: 1px solid var(--filet, #D5DDE9) !important;
	background: #FFFFFF !important;
	box-shadow: none !important;
}

.bsp-card--player .bsp-meta,
.bsp-card--team .bsp-meta{
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px 12px !important;
	width: 100%;
}

.bsp-card--player .bsp-meta li,
.bsp-card--team .bsp-meta li{ min-width: 0; }

/* Le corps de la carte occupe la hauteur restante : les reperes se posent
   toujours au meme endroit d une carte a l autre. */
.bsp-layout--cards > .bsp-card .bsp-card__body,
.bsp-grid > .bsp-card .bsp-card__body{
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1 1 auto;
	width: 100%;
}

/* --------------------------------------------------------------------------
   6. Un filet avant le pied de page
   --------------------------------------------------------------------------

   La page s arretait sur un grand blanc, puis le pied de page bleu commencait
   sans transition. Un filet ferme le contenu, et l ecart se resserre. */

.bsp-single{ padding-bottom: 20px !important; }

.bsp-legal-row,
.bsp-anj{
	margin-top: 16px !important;
	padding-top: 14px !important;
	border-top: 1px solid var(--filet, #D5DDE9) !important;
}

/* ==========================================================================
   Deuxieme passe sur les retours en video
   ==========================================================================

   Trois remarques mal traitees a la premiere passe, relues une a une sur
   l enregistrement. */

/* --------------------------------------------------------------------------
   1. Les en-tetes de la colonne de droite, tous a la meme taille
   --------------------------------------------------------------------------

   Meilleur bookmaker 2026, Ton pari du jour, Notre prono, Le combine du jour et
   Defi express sont le meme objet : le bandeau bleu qui ouvre un bloc. Ils
   sortaient a quatre tailles differentes, parce que chacun est ecrit dans une
   balise differente selon le bloc, un span ici, un titre de niveau deux la, et
   que le theme applique sa propre taille aux titres.

   La taille est donc posee sur le bandeau lui-meme, quelle que soit la balise
   qui le porte. Un seul chiffre a changer si le dessin doit evoluer. */

.bsp-chrono__head,
.bsp-prono__head,
.bsp-combi__head,
.bsp-vote__title,
.bsp-faqx__title,
.bsp-cta--card .bsp-cta__kicker,
.bsp-chrono__kicker,
.bsp-prono__kicker,
.bsp-combi__kicker{
	font-size: 13px !important;
	font-weight: 700 !important;
	line-height: 1.3 !important;
	letter-spacing: .07em !important;
	text-transform: uppercase !important;
	font-family: inherit !important;
}

/* Le corps de ces blocs suit la meme regle : une seule taille pour la ligne
   principale, qu il s agisse d une issue, d un pronostic ou d une offre. */
.bsp-prono__label,
.bsp-cta--card .bsp-cta__offer{
	font-size: 17px !important;
	line-height: 1.2 !important;
	font-weight: 700 !important;
}

/* --------------------------------------------------------------------------
   2. La colonne de droite descend vraiment jusqu en bas
   --------------------------------------------------------------------------

   La remarque revient trois fois : faire que la sidebar continue tout en bas.
   La position collante ne suffisait pas, car elle s arrete au bas de son
   conteneur : sur une page de competition, le conteneur de la colonne se
   terminait avec son dernier bloc, bien avant la fin du calendrier.

   Les deux colonnes prennent donc la meme hauteur, et la colonne de droite
   remplit la sienne. */

@media (min-width: 1025px){

	/* Une rangee de deux colonnes : les deux enfants s etirent a la hauteur de
	   la plus grande. */
	.e-con-inner:has(> .e-con > .bsp-sticky),
	.e-con:has(> .e-con > .bsp-sticky){
		align-items: stretch !important;
	}

	/* Le conteneur de la colonne occupe toute la hauteur disponible, et son
	   contenu reste collant a l interieur. */
	.e-con:has(> .bsp-sticky){
		align-self: stretch !important;
		height: auto !important;
	}
}

/* --------------------------------------------------------------------------
   3. Les cartes de concurrent : un seul cadre, une seule hauteur
   --------------------------------------------------------------------------

   Le reproche graphique porte sur les cartes de coequipier : elle n a pas de
   bord et la il y a des bords. Les cadres etaient bien tous la, mais les
   hauteurs differaient d une carte a l autre, si bien que le bas d un cadre ne
   tombait jamais au meme endroit.

   La cause : la liste des reperes se disposait librement. Une carte affichait
   equipe, poste et nationalite sur une ligne, la voisine renvoyait l age a la
   ligne suivante, et la troisieme ajoutait taille et poids. Trois hauteurs.

   Les reperes tiennent desormais sur une grille de trois colonnes, chaque
   repere occupe une case, et la carte garde la hauteur de sa rangee. */

.bsp-card--player .bsp-meta li,
.bsp-card--team .bsp-meta li{
	display: flex;
	flex-direction: column;
	gap: 2px;
	font-size: 13.5px;
}

.bsp-card--player .bsp-meta span,
.bsp-card--team .bsp-meta span{
	font-size: 10.5px;
	letter-spacing: .04em;
}

/* Le portrait garde la meme place partout, avec ou sans photo. */
.bsp-card--player .bsp-card__photo,
.bsp-card--player .bsp-card__photo--empty{
	flex: 0 0 64px;
	width: 64px !important;
	height: 64px !important;
	object-fit: cover;
}

/* ==========================================================================
   Retours du 02/09
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le survol du classement, sur la fiche d une equipe
   --------------------------------------------------------------------------

   La ligne de l equipe affichee est peinte en bleu nuit, texte en blanc : c est
   la seule ligne que le visiteur vient lire. Le survol, lui, eclaircissait le
   fond de n importe quelle ligne sans toucher a la couleur du texte. Sur cette
   ligne precise, le blanc se retrouvait donc sur un fond clair : le nom du club,
   sa place et ses points disparaissaient au passage de la souris.

   Le survol conserve desormais le fond bleu de cette ligne, en l eclaircissant
   d un cran pour que le geste reste percu. */

.bsp-table tbody tr.is-ici:hover td{
	background-color: #1B4272 !important;
	color: #FFFFFF !important;
}

.bsp-table tbody tr.is-ici:hover td a,
.bsp-table tbody tr.is-ici:hover td strong,
.bsp-table tbody tr.is-ici:hover td:last-child{ color: #FFFFFF !important; }

/* Les autres lignes : le texte garde son encre, explicitement. Sans cela, une
   couleur heritee du theme pouvait le rendre illisible sur le fond de survol. */
.bsp-table tbody tr:hover td,
.bsp-table tbody tr:hover td a{ color: #16202E !important; }

/* Le trait de zone reste visible au survol : il porte une information, il ne
   doit pas s effacer sous la couleur de fond. */
.bsp-table tbody tr[data-zone]:hover td:first-child{
	box-shadow: inset 3px 0 0 var(--bsp-zone, #12305A);
}

/* --------------------------------------------------------------------------
   2. Les reperes de la rencontre : une bande, plus deux mots perdus
   --------------------------------------------------------------------------

   Le lieu et la ville s affichaient l un a gauche, l autre au milieu, sur toute
   la largeur de la page : deux fois deux mots et un grand vide autour, juste
   sous la ligne de cotes qui est le point le plus dense de la page.

   Ils prennent la forme d une bande de cellules bordees, le meme dessin que les
   chiffres d une page de discipline : intitule en petites capitales, valeur en
   gras dessous, un filet entre les cellules. La bande se lit d un coup d oeil et
   ferme proprement le haut de la page. */

.bsp-infos{
	display: grid !important;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 0 !important;
	border: 1px solid var(--filet, #D5DDE9) !important;
	background: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
	overflow: hidden;
}

.bsp-infos__cell{
	display: flex !important;
	flex-direction: column !important;
	gap: 2px !important;
	padding: 10px 14px !important;
	margin: 0 !important;
	border-right: 1px solid var(--filet, #D5DDE9) !important;
	min-width: 0;
}

/* La derniere cellule d une rangee ne porte pas de filet : il doublerait la
   bordure du cadre. */
.bsp-infos__cell:last-child{ border-right: 0 !important; }

/* L intitule : petites capitales, gris ardoise, jamais de titre de section. */
.bsp-infos__cell .elementor-heading-title,
.bsp-infos__cell h1,
.bsp-infos__cell h2,
.bsp-infos__cell h3,
.bsp-infos__cell p.elementor-heading-title{
	margin: 0 !important;
	font-size: 10.5px !important;
	font-weight: 700 !important;
	letter-spacing: .08em !important;
	text-transform: uppercase !important;
	color: var(--encre-pale, #5B6B85) !important;
	line-height: 1.3 !important;
}

/* La valeur : c est elle qu on vient lire. */
.bsp-infos__cell .elementor-widget-text-editor,
.bsp-infos__cell .elementor-widget-text-editor p{
	margin: 0 !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: var(--encre, #16202E) !important;
	line-height: 1.35 !important;
}

/* Une cellule sans valeur ne laisse pas un blanc dans la bande. */
.bsp-infos__cell:has(.elementor-widget-text-editor p:empty){ display: none !important; }

@media (max-width: 640px){

	/* Deux cellules par ligne sur telephone : une seule colonne etirerait la
	   bande sur toute la hauteur de l ecran. */
	.bsp-infos{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bsp-infos__cell{ border-bottom: 1px solid var(--filet, #D5DDE9) !important; }
	.bsp-infos__cell:nth-child(2n){ border-right: 0 !important; }
}

/* ==========================================================================
   Retours du 02/09, second passage
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Le survol d une carte de concurrent
   --------------------------------------------------------------------------

   Le fond passait au bleu nuit, mais trois elements gardaient leur couleur
   propre et devenaient invisibles : les intitules en gris ardoise, les valeurs
   en bleu, et surtout la pastille du numero de maillot, posee sur un fond gris
   translucide qui se fondait dans le bleu.

   Chacun avait sa propre regle de couleur, plus precise que la regle generale du
   survol : c est elle qui gagnait. On les reprend donc une a une. */

.bsp-card:hover,
.bsp-card:focus-within{
	background-color: #12305A !important;
	border-color: #12305A !important;
}

/* Tout le texte de la carte passe en blanc, y compris ce qui portait une
   couleur d accent. */
.bsp-card:hover,
.bsp-card:hover *,
.bsp-card:focus-within,
.bsp-card:focus-within *{
	color: #FFFFFF !important;
}

/* Les intitules gardent leur role de second plan : blanc adouci, jamais gris. */
.bsp-card:hover .bsp-meta span,
.bsp-card:focus-within .bsp-meta span{
	color: rgba(255,255,255,.72) !important;
}

/* La pastille du numero : fond clair translucide et chiffre blanc. Sur le fond
   gris d origine, le numero disparaissait completement. */
.bsp-card:hover .bsp-card__num,
.bsp-card:focus-within .bsp-card__num{
	background: rgba(255,255,255,.20) !important;
	color: #FFFFFF !important;
}

/* Les initiales, faute de portrait : meme traitement. */
.bsp-card:hover .bsp-card__photo--empty,
.bsp-card:focus-within .bsp-card__photo--empty{
	background: rgba(255,255,255,.16) !important;
	color: #FFFFFF !important;
}

/* Un portrait reste lisible sur le fond bleu. */
.bsp-card:hover .bsp-card__photo,
.bsp-card:focus-within .bsp-card__photo{
	background: #FFFFFF;
}

/* La pastille blesse garde son sens : elle reste lisible sur le bleu. */
.bsp-card:hover .bsp-pill,
.bsp-card:focus-within .bsp-pill{
	background: rgba(255,255,255,.20) !important;
	color: #FFFFFF !important;
	border-color: rgba(255,255,255,.35) !important;
}

/* --------------------------------------------------------------------------
   2. Les cotes et les reperes de la rencontre, sur toute la largeur
   --------------------------------------------------------------------------

   La ligne de cotes occupait un tiers de la largeur et laissait deux tiers de
   blanc a sa droite, juste sous le texte de presentation. C est le bloc qui doit
   emporter le clic : il prend desormais toute la largeur disponible, les cases
   se partageant l espace a parts egales.

   Les reperes en dessous suivent la meme largeur, en bande de cellules. */

.bsp-pleine,
.bsp-pleine > .elementor-widget-container,
.bsp-cotes,
.bsp-cotes .bsp-cta__odds{
	width: 100% !important;
	max-width: none !important;
}

/* Elementor cale la largeur d un widget sur son contenu : un bloc de cotes
   sortait a un tiers de la colonne, deux tiers de blanc a sa droite. */
.e-con > .bsp-pleine,
.e-con-inner > .bsp-pleine{ flex: 1 1 100% !important; align-self: stretch !important; }

/* La rangee reste une rangee : marque, cases, bouton.
   ------------------------------------------------

   Premiere tentative en grille : elle a casse le bloc. Le motif employe,
   repeat(auto-fit, minmax(0, 1fr)), ne cree aucune colonne quand la taille de
   base vaut zero : les cinq enfants se sont retrouves empiles sur deux colonnes,
   les chiffres par-dessus les cadres.

   Le placement en rangee souple fait le meme travail sans ce piege : chaque case
   recoit une part egale de la place restante, la marque et le bouton gardent la
   leur. C est aussi le mode d origine du bloc, il n y a donc rien a redessiner
   derriere. */

.bsp-cotes .bsp-cta__odds{
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	gap: 6px;
	height: 52px;
	min-height: 52px !important;
	width: 100% !important;
}

/* La marque et le bouton : largeur propre, jamais etirees. */
.bsp-cotes .bsp-cta__odds > .bsp-cta__mark{
	flex: 0 0 130px !important;
	width: 130px !important;
}

.bsp-cotes .bsp-cta__odds > .bsp-cta__btn{
	flex: 0 0 140px !important;
	width: 140px !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
}

/* Les cases se partagent tout le reste, a parts egales. */
.bsp-cotes .bsp-cta__odd{
	flex: 1 1 0 !important;
	min-width: 0 !important;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1px;
}

/* Les chiffres profitent de la place gagnee. */
.bsp-cotes .bsp-cta__odd-val{ font-size: 19px !important; }
.bsp-cotes .bsp-cta__odd-tag{ font-size: 10.5px !important; }

@media (max-width: 640px){

	/* Sur telephone, la marque et le bouton passent sur leur propre ligne :
	   cinq elements sur trois cent cinquante pixels ne se lisent plus. */
	.bsp-cotes .bsp-cta__odds{
		flex-wrap: wrap !important;
		height: auto;
		min-height: 0 !important;
	}

	.bsp-cotes .bsp-cta__odds > .bsp-cta__mark,
	.bsp-cotes .bsp-cta__odds > .bsp-cta__btn{
		flex: 1 1 100% !important;
		width: 100% !important;
	}

	.bsp-cotes .bsp-cta__odd{ flex: 1 1 30% !important; min-height: 46px; }
}

/* ==========================================================================
   L entete de la rencontre : une seule carte
   ==========================================================================

   Deux blocs racontaient la meme chose, l un sous l autre : l entete visuelle
   avec ses ecussons et sa bande sombre, puis un bloc affiche qui redonnait les
   deux noms, la competition, la journee, la date, le pronostic et les cotes. Le
   visiteur lisait deux fois la meme chose avant d atteindre le contenu.

   Les trois morceaux forment desormais une carte : les equipes, la bande de
   reperes, puis le pronostic et les cotes. La sortie vers l operateur remonte
   ainsi au-dessus de la ligne de flottaison, ce qui est aussi l interet du
   site. */

.bsp-hero{
	border: 1px solid var(--filet, #D5DDE9) !important;
	background: #FFFFFF !important;
	overflow: hidden;
	margin: 0 0 var(--bsp-e4, 16px) !important;
	padding: 0 !important;
	gap: 0 !important;
}

/* Les trois morceaux se touchent : aucun ecart, aucune bordure entre eux, la
   carte se lit d un bloc. */
.bsp-hero > *{
	margin: 0 !important;
	border-radius: 0 !important;
}

/* --------------------------------------------------- les deux camps */

.bsp-hero__teams{
	padding: 20px 20px 16px !important;
	gap: 16px !important;
}

/* Les ecussons a taille utile : ils portent l identite de la page. */
.bsp-hero__teams img{
	width: auto !important;
	max-width: 84px !important;
	max-height: 84px !important;
	object-fit: contain;
}

/* Le nom de chaque camp, et le score ou le vs au centre. */
.bsp-hero__teams .elementor-heading-title{
	font-family: inherit !important;
	line-height: 1.2 !important;
}

/* --------------------------------------------------- la bande de reperes */

.bsp-hero__band{
	background-color: var(--bleu, #12305A) !important;
	padding: 10px 20px !important;
	gap: 12px !important;
	border: 0 !important;
}

.bsp-hero__band *{
	color: #FFFFFF !important;
	font-family: inherit !important;
	font-size: 13px !important;
	font-weight: 600 !important;
	margin: 0 !important;
	letter-spacing: 0 !important;
}

/* --------------------------------------------------- le pronostic et les cotes */

.bsp-hero__bet{
	padding: 16px 20px 18px !important;
	gap: 12px !important;
	background: #FFFFFF !important;
}

/* Dans la carte, la carte pronostic perd son propre cadre : elle est deja dans
   un cadre, et deux cadres imbriques alourdissent l ensemble. */
.bsp-hero__bet .bsp-prono{
	border: 0 !important;
	margin: 0 !important;
	background: transparent !important;
}

/* Son bandeau bleu devient un simple intitule : le bleu est deja pris par la
   bande de reperes juste au-dessus. */
.bsp-hero__bet .bsp-prono__head{
	background: transparent !important;
	padding: 0 0 8px !important;
	border-bottom: 1px solid var(--filet, #D5DDE9) !important;
}

.bsp-hero__bet .bsp-prono__kicker{
	color: var(--encre-pale, #5B6B85) !important;
	letter-spacing: .07em !important;
}

.bsp-hero__bet .bsp-prono__body{ padding: 12px 0 0 !important; }

/* Les cotes ferment la carte, sur toute sa largeur. */
.bsp-hero__bet .bsp-cotes{ margin: 0 !important; }

@media (max-width: 780px){

	.bsp-hero__teams{ padding: 16px 14px 12px !important; gap: 10px !important; }
	.bsp-hero__teams img{ max-width: 56px !important; max-height: 56px !important; }
	.bsp-hero__band{ padding: 9px 14px !important; }
	.bsp-hero__band *{ font-size: 12px !important; }
	.bsp-hero__bet{ padding: 14px !important; }
}

/* --------------------------------------------------------------------------
   Le classement entier, meme dans la colonne de droite
   --------------------------------------------------------------------------

   Le tableau montre toutes les equipes engagees : dix-huit en Ligue 1, trente en
   NBA. Dans une colonne de trois cent vingt pixels, trente lignes font une
   colonne plus longue que la page.

   La colonne defile donc a l interieur de son cadre au-dela d une certaine
   hauteur, en-tete figee en haut : on garde le tableau complet sans etirer la
   page. */

.bsp-sticky .bsp-table-wrap,
.bsp-shell__side .bsp-table-wrap{
	max-height: 420px;
	overflow-y: auto;
	scrollbar-width: thin;
}

.bsp-sticky .bsp-table thead th,
.bsp-shell__side .bsp-table thead th{
	position: sticky;
	top: 0;
	z-index: 2;
}

.bsp-sticky .bsp-table-wrap::-webkit-scrollbar,
.bsp-shell__side .bsp-table-wrap::-webkit-scrollbar{ width: 6px; }

.bsp-sticky .bsp-table-wrap::-webkit-scrollbar-thumb,
.bsp-shell__side .bsp-table-wrap::-webkit-scrollbar-thumb{
	background: #D5DDE9;
	border-radius: 3px;
}


/* ============================================================================
   Retour du 03/09 : page rencontre lisible sans modele particulier
   ============================================================================

   La page publiee peut passer par le gabarit du plugin pendant la transition
   entre deux imports Elementor. Les memes informations restent donc lisibles
   dans tous les cas : largeur pleine pour les cotes, bande lieu/ville, et un
   bloc explicite quand la feuille n est pas encore fournie par la source. */

.bsp-sheet--empty{
	border: 1px solid var(--filet, #D5DDE9) !important;
	background: #FFFFFF !important;
	margin: 0 !important;
	padding: 0 !important;
}

.bsp-sheet--empty .bsp-sheet__block{
	margin: 0 !important;
	padding: 14px 16px !important;
}

.bsp-sheet--empty .bsp-sheet__block h3{
	margin: 0 0 6px !important;
	font-size: 15px !important;
	font-weight: 700 !important;
	color: #12305A !important;
}

.bsp-sheet--empty .bsp-empty{
	margin: 0 !important;
	font-size: 13.5px !important;
	color: #5B6B85 !important;
}

/* Fallback gabarit : quand l entete est rendue par le plugin, les cotes et la
   bande de lieu prennent la meme largeur que le contenu principal. */
.bsp-single--match .bsp-cotes,
.bsp-single--match .bsp-infos,
.bsp-single--match .bsp-sheet{
	width: 100% !important;
	max-width: none !important;
}

.bsp-single--match .bsp-infos{
	display: grid !important;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0 !important;
}

.bsp-single--match .bsp-infos__cell{
	margin: 0 !important;
	padding: 12px 16px !important;
	border-right: 1px solid var(--filet, #D5DDE9) !important;
	border-bottom: 0 !important;
}

.bsp-single--match .bsp-infos__cell:last-child{ border-right: 0 !important; }

@media (max-width: 640px){
	.bsp-single--match .bsp-infos{ grid-template-columns: 1fr; }
	.bsp-single--match .bsp-infos__cell{ border-right: 0 !important; border-bottom: 1px solid var(--filet, #D5DDE9) !important; }
	.bsp-single--match .bsp-infos__cell:last-child{ border-bottom: 0 !important; }
}

/* ==========================================================================
   Le lieu de la rencontre : un panneau, plus une ligne de tableau
   --------------------------------------------------------------------------

   Le stade et la ville tenaient dans deux cellules blanches posees sous les
   cotes : un intitule gris, une valeur, un filet, et rien qui distingue cette
   information de n importe quelle autre ligne de la page. C est pourtant ce que
   le lecteur cherche en premier apres l heure du coup d envoi.

   Le bloc devient un panneau sombre, la seule surface bleue au milieu des
   cartes blanches, avec le dessin d une pelouse en filigrane. Le nom de
   l enceinte porte le bloc, la ville le situe, et la rangee du bas aligne les
   reperes que la source publie vraiment : capacite, affluence, diffusion,
   arbitre, camp qui recoit. Aucun repere invente, aucune case vide. */

/* Le calcul des largeurs est pose ici et non herite : un theme sans reglage
   global ajoutait les vingt pixels de marge interne a la largeur du panneau, qui
   depassait alors de la carte et perdait sa marge droite. */
.bsp-lieu,
.bsp-lieu *{
	box-sizing: border-box;
}

.bsp-lieu{
	position: relative;
	overflow: hidden;
	margin: 0 0 var(--bsp-e4, 16px) !important;
	padding: 0 !important;
	border: 0 !important;
	background: linear-gradient(135deg, #0C2143 0%, #12305A 58%, #164073 100%);
	color: #FFFFFF;

	/* Le filet ambre a gauche : le meme repere que les blocs de pari, et ce qui
	   rattache le panneau a la charte plutot qu a un encadre generique. */
	box-shadow: inset 3px 0 0 var(--ambre, #F0B429);
}

/* La pelouse en filigrane : rond central et ligne mediane, a peine visibles.
   Un fond uni faisait un pave bleu ; le dessin dit de quoi on parle sans
   ajouter une image a charger. */
.bsp-lieu::before{
	content: "";
	position: absolute;
	top: 50%;
	right: -56px;
	width: 260px;
	height: 260px;
	transform: translateY(-50%);
	border: 1px solid rgba(255, 255, 255, .07);
	border-radius: 50%;
	pointer-events: none;
}

/* Tout le contenu passe devant le filigrane. */
.bsp-lieu > *{ position: relative; z-index: 1; }

/* ------------------------------------------------------------- l intitule */

.bsp-lieu__head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 14px 20px 0;
}

.bsp-lieu__kicker{
	margin: 0 !important;
	font-size: 11px !important;
	font-weight: 700 !important;
	letter-spacing: .12em !important;
	text-transform: uppercase !important;
	color: var(--ambre, #F0B429) !important;
	line-height: 1.2 !important;
}

/* Terrain neutre : une pastille, parce que l information change la lecture du
   match et ne doit pas se perdre dans la rangee du bas. */
.bsp-lieu__badge{
	flex: 0 0 auto;
	padding: 4px 9px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #0C2143;
	background: var(--ambre, #F0B429);
	white-space: nowrap;
}

/* --------------------------------------------------------- l enceinte */

.bsp-lieu__corps{
	padding: 8px 20px 16px;
}

/* Les pastilles de droite : le mot du sport, et le terrain neutre s il y a lieu. */
.bsp-lieu__marques{
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 0 0 auto;
}

/* Le mot du sport : stade, circuit. Un contour, pas un aplat : il nomme le lieu
   sans prendre le pas sur le nom qui suit. */
.bsp-lieu__mot{
	padding: 3px 8px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .8);
	border: 1px solid rgba(255, 255, 255, .28);
	white-space: nowrap;
}

/* Le nom de l enceinte porte le bloc : c est la seule ligne qu on lit de loin. */
.bsp-lieu__stade{
	margin: 0 !important;
	font-family: inherit !important;
	font-size: 26px !important;
	font-weight: 800 !important;
	letter-spacing: -.01em !important;
	line-height: 1.15 !important;
	color: #FFFFFF !important;
	text-wrap: balance;
}

.bsp-lieu__ville{
	display: flex !important;
	align-items: center;
	gap: 7px;
	margin: 8px 0 0 !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	line-height: 1.35 !important;
	color: #B8CBE6 !important;
}

/* ------------------------------------------------------ la rangee du bas */

.bsp-lieu__faits{
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	margin: 0 !important;
	padding: 0 !important;
	list-style: none !important;
	border-top: 1px solid rgba(255, 255, 255, .14);
	background: rgba(0, 0, 0, .16);
}

/* Des cellules de meme largeur : suivre le contenu donnait une premiere cellule
   deux fois plus large que les suivantes, et la rangee perdait son alignement. */
.bsp-lieu__fait{
	display: flex;
	align-items: center;
	gap: 9px;
	flex: 1 1 0;
	min-width: 0;
	margin: 0 !important;
	padding: 11px 20px;
	list-style: none !important;
	border-right: 1px solid rgba(255, 255, 255, .12);
}

.bsp-lieu__fait:last-child{ border-right: 0; }

.bsp-lieu__fait-txt{
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.bsp-lieu__fait-label{
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .55);
	line-height: 1.2;
}

.bsp-lieu__fait-valeur{
	font-size: 14px;
	font-weight: 700;
	color: #FFFFFF;
	line-height: 1.3;
	overflow-wrap: anywhere;
}

/* Le seul lien du panneau : ambre, comme partout ailleurs sur le site. Un
   soulignement blanc le faisait passer pour un mot corrige. */
.bsp-lieu__fait-valeur a{
	color: var(--ambre-clair, #FFC95D) !important;
	text-decoration: none !important;
}

.bsp-lieu__fait-valeur a:hover{
	color: #FFFFFF !important;
	text-decoration: underline !important;
}

/* ------------------------------------------------------------- les icones */

.bsp-lieu__ico{
	flex: 0 0 auto;
	width: 15px;
	height: 15px;
}

.bsp-lieu__ville .bsp-lieu__ico{ color: var(--ambre, #F0B429); }
.bsp-lieu__fait > .bsp-lieu__ico{ width: 18px; height: 18px; color: rgba(255, 255, 255, .6); }

/* ------------------------------------------------------------- telephone */

@media (max-width: 782px){

	.bsp-lieu__stade{ font-size: 21px !important; }
	.bsp-lieu__head{ padding: 12px 16px 0; }
	.bsp-lieu__corps{ padding: 6px 16px 14px; }

	/* Deux reperes par ligne : quatre colonnes de vingt pixels ne se lisent
	   plus, une seule colonne etire le panneau sur tout l ecran. */
	.bsp-lieu__fait{
		flex: 1 1 50%;
		padding: 10px 16px;
		border-bottom: 1px solid rgba(255, 255, 255, .12);
	}

	.bsp-lieu__fait:nth-child(2n){ border-right: 0; }

	/* La derniere rangee ne porte pas de filet : il doublerait le bord du
	   panneau, y compris quand le nombre de reperes est impair. */
	.bsp-lieu__fait:last-child,
	.bsp-lieu__fait:nth-last-child(2):nth-child(odd){ border-bottom: 0; }
}

/* Fallback gabarit : le panneau prend la largeur du contenu, comme les cotes et
   la feuille de match. */
.bsp-single--match .bsp-lieu{
	width: 100% !important;
	max-width: none !important;
}

/* --------------------------------------------------------------------------
   Le lieu en tete d affiche
   --------------------------------------------------------------------------

   Demande du 03/09 : le panneau monte au-dessus des deux camps, en haut de la
   carte du match. Le dessin ne peut pas y rester le meme. Un nom d enceinte en
   vingt-six pixels, pose juste au-dessus des ecussons, volait la vedette au
   titre de la page, et deux bandes sombres empilees avant les equipes
   ecrasaient la carte.

   En tete, le panneau devient donc une seule ligne : le lieu a gauche, la ville
   derriere un point median, les reperes a droite reduits a leur icone et a leur
   valeur. Il annonce le match au lieu de le concurrencer, et referme la carte
   par le bas avec la bande de journee, qui a la meme hauteur. */

.bsp-hero .bsp-lieu,
.bsp-lieu--tete{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 18px;
	margin: 0 !important;
	padding: 9px 20px !important;
	background: var(--bleu-fonce, #0C2143);
	box-shadow: none;
	border: 0 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .12) !important;
}

/* Le filigrane de pelouse demande de la hauteur : sur une seule ligne, il ne
   laisserait qu un bout d arc de cercle au milieu du texte. */
.bsp-hero .bsp-lieu::before,
.bsp-lieu--tete::before{ display: none; }

/* Le lieu et la ville se suivent sur la ligne, separes par un point median. */
.bsp-hero .bsp-lieu .bsp-lieu__corps,
.bsp-lieu--tete .bsp-lieu__corps{
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 10px;
	padding: 0;
	min-width: 0;
}

.bsp-hero .bsp-lieu .bsp-lieu__stade,
.bsp-lieu--tete .bsp-lieu__stade{
	font-size: 15px !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	line-height: 1.35 !important;
}

.bsp-hero .bsp-lieu .bsp-lieu__ville,
.bsp-lieu--tete .bsp-lieu__ville{
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
	color: #93AACB !important;
}

/* Le point median vient du style, et non du balisage : sans ville publiee, il
   ne resterait sinon qu une puce en fin de ligne. */
.bsp-hero .bsp-lieu .bsp-lieu__ville::before,
.bsp-lieu--tete .bsp-lieu__ville::before{
	content: "·";
	margin-right: 8px;
	color: rgba(255, 255, 255, .35);
}

/* La pastille du sport ne sert plus a distinguer les deux intitules empiles :
   sur une ligne, le nom du lieu se lit pour ce qu il est. */
.bsp-hero .bsp-lieu .bsp-lieu__mot,
.bsp-lieu--tete .bsp-lieu__mot{ display: none; }

.bsp-hero .bsp-lieu .bsp-lieu__head,
.bsp-lieu--tete .bsp-lieu__head{
	order: 2;
	padding: 0;
	gap: 0;
}

/* La pastille de terrain neutre reste : elle change la lecture du match. */
.bsp-hero .bsp-lieu .bsp-lieu__badge,
.bsp-lieu--tete .bsp-lieu__badge{
	padding: 3px 8px;
	font-size: 9.5px;
}

/* Sans terrain neutre a signaler, l entete n a plus rien a montrer en tete
   d affiche : il ne doit pas consommer un ecart de dix-huit pixels. */
.bsp-hero .bsp-lieu .bsp-lieu__head:not(:has(.bsp-lieu__badge)),
.bsp-lieu--tete .bsp-lieu__head:not(:has(.bsp-lieu__badge)){ display: none; }

/* -------------------------------------------------- les reperes, a droite */

.bsp-hero .bsp-lieu .bsp-lieu__faits,
.bsp-lieu--tete .bsp-lieu__faits{
	order: 3;
	flex: 0 1 auto;
	min-width: 0;
	gap: 0 18px;
	border-top: 0;
	background: none;
}

.bsp-hero .bsp-lieu .bsp-lieu__fait,
.bsp-lieu--tete .bsp-lieu__fait{
	flex: 0 0 auto;
	gap: 6px;
	padding: 0;
	border: 0;
}

/* L intitule sort de l ecran sans sortir du balisage : l icone dit de quoi il
   s agit, un lecteur d ecran annoncerait sinon un nombre seul. */
.bsp-hero .bsp-lieu .bsp-lieu__fait-label,
.bsp-lieu--tete .bsp-lieu__fait-label{
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.bsp-hero .bsp-lieu .bsp-lieu__fait-valeur,
.bsp-lieu--tete .bsp-lieu__fait-valeur{
	font-size: 12.5px;
	font-weight: 600;
	color: #D6E2F2;
	line-height: 1.35;
}

.bsp-hero .bsp-lieu .bsp-lieu__fait > .bsp-lieu__ico,
.bsp-lieu--tete .bsp-lieu__fait > .bsp-lieu__ico{
	width: 15px;
	height: 15px;
	color: rgba(255, 255, 255, .45);
}

@media (max-width: 782px){

	/* Le lieu passe seul sur sa ligne, les reperes en dessous : cote a cote, le
	   nom d une enceinte se coupait en trois mots par ligne. */
	.bsp-hero .bsp-lieu,
	.bsp-lieu--tete{
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
		padding: 10px 16px !important;
	}

	/* Le lieu et la ville s empilent : le point median se retrouverait seul en
	   debut de ligne. */
	.bsp-hero .bsp-lieu .bsp-lieu__ville::before,
	.bsp-lieu--tete .bsp-lieu__ville::before{ display: none; }

	.bsp-hero .bsp-lieu .bsp-lieu__faits,
	.bsp-lieu--tete .bsp-lieu__faits{ gap: 0 14px; }

	.bsp-hero .bsp-lieu .bsp-lieu__fait,
	.bsp-lieu--tete .bsp-lieu__fait{ border-bottom: 0; }
}

/* La carte du match ouvre desormais sur le panneau : les deux camps n ont plus
   a garder leur marge haute pleine. */
.bsp-hero:has(.bsp-lieu) .bsp-hero__teams{
	padding-top: 16px !important;
}

/* Fallback gabarit : le panneau ferme le haut de la fiche, juste avant les deux
   camps. La carte n existe pas ici, la ligne se rattache donc au tableau de
   score qui la suit. */
.bsp-single--match .bsp-lieu--tete{
	width: 100% !important;
	max-width: none !important;
	margin: 0 0 var(--bsp-e3, 12px) !important;
}