/* Geometrie de la ligne de rencontre : deplacee dans blocs.css.
 *
 * Elle etait decrite ici et la, en rangee souple d un cote et en grille de
 * l autre, avec des exceptions par largeur dans les deux fichiers. La grille
 * recevait donc des largeurs de rangee, et la liste s effondrait : c est ce qui a
 * casse l affichage des rencontres deux fois de suite.
 *
 * Un seul fichier decrit desormais cette geometrie, et le controle
 * doublons_css.py refuse toute seconde definition. Les couleurs, les filets et
 * les typographies restent ici. */

/* Betting Sports Hub — front. Volontairement neutre : s'adapte au theme. */

.bsp-single { max-width: 1080px; margin: 0 auto; padding: 24px 16px 64px; }
.bsp-single__title { margin: 8px 0 20px; }
.bsp-content { margin: 24px 0; }

/* Fil d'ariane */
.bsp-crumbs ol { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 16px; padding: 0; font-size: 13px; }
.bsp-crumbs li + li::before { content: "›"; margin-right: 8px; color: #9ca3af; }
.bsp-crumbs a { text-decoration: none; color: #6b7280; }
.bsp-crumbs a:hover { text-decoration: underline; }

/* Listes de matchs */
/* Marges et tailles : echelle unique, dans blocs.css. Les valeurs qui
   figuraient ici s ajoutaient a celles de la trame. */
.bsp-list { margin: 0 0 12px; }
.bsp-list__title { font-size: 21px; margin: 24px 0 8px; }

.bsp-row {
	display: grid;
	grid-template-columns: 172px 1fr 84px 1fr;
	align-items: center;
	gap: 12px;
	padding: 12px 16px;
	margin-bottom: 8px;
	border: 1px solid #e6e8ec;
	border-radius: 12px;
	background: #fff;
	color: inherit;
	text-decoration: none;
	transition: box-shadow .15s ease, transform .15s ease;
}
.bsp-row:hover { box-shadow: 0 6px 18px rgba(15, 23, 42, .08); transform: translateY(-1px); }
.bsp-row.is-live { border-color: #fecaca; }

/* Date sur une seule ligne. Le format long la cassait en trois, ce qui
   triplait la hauteur de chaque ligne sur les archives de championnat. */
.bsp-row__date { font-size: 13px; color: #6b7280; white-space: nowrap; line-height: 1.3; }
.bsp-row__team { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.bsp-row__team span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Les deux camps se rangent vers le score : le nom qui recoit se termine juste
   avant le resultat, celui qui se deplace commence juste apres. Sans cela les
   noms flottaient contre les bords et l oeil ne reliait plus une equipe a son
   score. Le sens de lecture reste logo puis nom a l exterieur, nom puis logo a
   domicile, comme sur une affiche. */
.bsp-row__team--home { flex-direction: row-reverse; justify-content: flex-start; text-align: right; }
.bsp-row__team--away { justify-content: flex-start; text-align: left; }

.bsp-row__score { text-align: center; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.bsp-row.is-live .bsp-row__score { color: #dc2626; }

.bsp-logo { object-fit: contain; flex: none; }
.bsp-logo--empty { display: inline-block; width: 28px; height: 28px; border-radius: 50%; background: #f1f5f9; }

/* Fiche match */
.bsp-match { border: 1px solid #e6e8ec; border-radius: 16px; padding: 28px; background: #fff; }
.bsp-match__title { font-size: 22px; margin: 12px 0 0; }

.bsp-badge {
	display: inline-flex; align-items: center; gap: 8px;
	font-size: 12px; text-transform: uppercase; letter-spacing: .05em;
	background: #f1f5f9; color: #334155; padding: 5px 12px; border-radius: 999px;
}
.bsp-badge.is-live { background: #fee2e2; color: #b91c1c; }
.bsp-badge__minute { font-weight: 700; }

.bsp-scoreboard { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin: 28px 0; text-align: center; }
.bsp-side { display: flex; flex-direction: column; align-items: center; gap: 10px; text-decoration: none; color: inherit; }
.bsp-final { font-size: 40px; font-weight: 800; font-variant-numeric: tabular-nums; }

.bsp-meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.bsp-meta li { font-size: 14px; }
.bsp-meta span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #9ca3af; }
.bsp-meta a { color: inherit; }

/* Cartes */
.bsp-card { display: flex; gap: 18px; align-items: center; border: 1px solid #e6e8ec; border-radius: 16px; padding: 20px; margin-bottom: 20px; background: #fff; }
.bsp-card__title { font-size: 20px; font-weight: 700; text-decoration: none; color: inherit; display: block; margin-bottom: 10px; }
.bsp-card__photo { border-radius: 12px; object-fit: cover; }
.bsp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }

/* Classement */
.bsp-table-wrap { overflow-x: auto; }
.bsp-table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 14px; }
.bsp-table th, .bsp-table td { padding: 10px 8px; border-bottom: 1px solid #eef0f3; text-align: center; }
.bsp-table th { background: #f9fafb; font-weight: 600; }
.bsp-th-team, .bsp-td-team { text-align: left; }
.bsp-td-team { display: flex; align-items: center; gap: 8px; }
.bsp-td-team a { text-decoration: none; color: inherit; font-weight: 600; }

/* Cotes */
.bsp-odds { margin: 28px 0; padding: 20px; border: 1px solid #e6e8ec; border-radius: 16px; background: #fff; }
.bsp-odds__grid { display: flex; gap: 12px; flex-wrap: wrap; margin: 12px 0; }
.bsp-odds__cell { flex: 1; min-width: 90px; text-align: center; padding: 12px; border: 1px solid #e6e8ec; border-radius: 10px; }
.bsp-odds__cell span { display: block; font-size: 12px; color: #9ca3af; }
.bsp-odds__cell strong { font-size: 20px; }

/* Partenaires */
.bsp-partners { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.bsp-partner { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px; border: 1px solid #e6e8ec; border-radius: 12px; text-decoration: none; color: inherit; background: #fff; }
.bsp-partner img { max-height: 40px; object-fit: contain; }
.bsp-partner__name { font-weight: 700; }
.bsp-partner__bonus { font-size: 13px; color: #059669; }

/* Bandeau legal */
.bsp-anj { display: flex; gap: 12px; align-items: center; margin: 24px 0; padding: 12px 16px; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.bsp-anj__badge { flex: none; font-weight: 800; font-size: 13px; padding: 4px 8px; border-radius: 6px; background: #0f172a; color: #fff; }
.bsp-anj__text { margin: 0; font-size: 13px; color: #475569; }

/* Gate 18+ */
.bsp-agegate { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(15, 23, 42, .85); }
.bsp-agegate__box { max-width: 480px; background: #fff; border-radius: 16px; padding: 32px; text-align: center; }
.bsp-agegate__legal { font-size: 12px; color: #64748b; }
.bsp-agegate__actions { display: flex; gap: 12px; justify-content: center; margin-top: 20px; }
.bsp-btn { display: inline-block; padding: 12px 20px; border: 0; border-radius: 10px; background: #0f172a; color: #fff; font-weight: 600; cursor: pointer; text-decoration: none; }
.bsp-btn--ghost { background: transparent; color: #64748b; border: 1px solid #e2e8f0; }

.bsp-empty { padding: 16px; background: #f9fafb; border-radius: 10px; color: #6b7280; }
.bsp-updated { font-size: 12px; color: #9ca3af; }

@media (max-width: 680px) {
	.bsp-row { grid-template-columns: 1fr auto; row-gap: 6px; }
	.bsp-row__date { grid-column: 1 / -1; }
	/* En colonne etroite les deux camps se lisent dans le meme sens. */
	.bsp-row__team--home { flex-direction: row; justify-content: flex-start; text-align: left; }
	.bsp-final { font-size: 30px; }
	.bsp-scoreboard { gap: 10px; }
}

/* Archives par sport, competition et journee */
.bsp-subnav-front { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 28px; }
.bsp-subnav-front a {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 8px 14px; border: 1px solid #e6e8ec; border-radius: 999px;
	text-decoration: none; color: inherit; font-size: 14px; font-weight: 500;
	background: #fff; transition: border-color .15s ease;
}
.bsp-subnav-front a:hover { border-color: #0f172a; }
.bsp-subnav-front span { font-size: 11px; padding: 1px 7px; border-radius: 999px; background: #f1f5f9; color: #64748b; }

.bsp-pagination { margin: 32px 0; }
.bsp-pagination .nav-links { display: flex; gap: 8px; flex-wrap: wrap; }
.bsp-pagination a, .bsp-pagination .current {
	display: inline-block; padding: 8px 14px; border: 1px solid #e6e8ec;
	border-radius: 8px; text-decoration: none; color: inherit;
}
.bsp-pagination .current { background: #0f172a; color: #fff; border-color: #0f172a; }

/* Joueur sans portrait : initiales, jamais un trou. */
.bsp-card__photo--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	border-radius: 50%;
	background: #e9edf2;
	color: #5b6875;
	font-size: 30px;
	font-weight: 600;
	letter-spacing: .02em;
	flex: none;
}

/* Note sous un classement encore vide. */
.bsp-note {
	margin: 8px 0 0;
	font-size: 13px;
	color: #5b6875;
}

/* Note affichee dans l editeur Elementor, jamais pour le visiteur. */
.bsp-editor-note{
	padding:14px 16px;
	border:1px dashed #c3c4c7;
	border-radius:4px;
	background:#f6f7f7;
	color:#50575e;
	font-size:13px;
	line-height:1.6;
}

/* ============================================================
   Mises en page des widgets Elementor.

   Les elements affiches ne portent pas tous la meme classe : une
   rencontre simple est un .bsp-row, une rencontre avec cotes un
   .bsp-line, une equipe un .bsp-card, un bookmaker un .bsp-book,
   un bloc de cotes un .bsp-odds. Toute regle qui en oublie un rend
   la mise en page inoperante sur le widget correspondant, sans le
   moindre message : c est ce qui se passait pour les rencontres
   avec cotes, en cartes comme en mosaique.
   ============================================================ */

.bsp-layout{
	--bsp-columns:3;
	--bsp-gap:16px;
	--bsp-radius:16px;
	--bsp-pad:20px;
	--bsp-logo:44px;
}

/* Marges propres a chaque element annulees : c est l espacement du
   widget qui commande, sinon les deux se cumulent. */
.bsp-layout > .bsp-row,
.bsp-layout > .bsp-line,
.bsp-layout > .bsp-card,
.bsp-layout > .bsp-book,
.bsp-layout > .bsp-odds,
.bsp-layout > .bsp-table-wrap,
.bsp-layout > .bsp-list{
	margin:0;
}

.bsp-layout > .bsp-card,
.bsp-layout > .bsp-odds{
	border-radius:var(--bsp-radius, 16px);
	padding:var(--bsp-pad, 20px);
}

.bsp-layout__title{
	margin:var(--bsp-s5,24px) 0 8px;
}

/* Les intertitres de journee et de date ne sont pas des elements de la
   liste : ils prennent toute la largeur au lieu d occuper une case de la
   grille, sinon un bandeau Journee 1 se retrouvait coince entre deux
   rencontres. */
.bsp-layout > .bsp-day,
.bsp-layout > .bsp-round{
	grid-column:1 / -1;
	flex:1 1 100%;
	width:100%;
}

/* ------------------------------------------- Liste : une par ligne */
.bsp-layout--list{
	display:flex;
	flex-direction:column;
	gap:var(--bsp-gap);
}

/* ------------------------------------------ Cartes : grille reglee */
.bsp-layout--cards{
	display:grid;
	grid-template-columns:repeat(var(--bsp-columns),minmax(0,1fr));
	gap:var(--bsp-gap);
	align-items:stretch;
}
.bsp-layout--cards > *{
	min-width:0;
}

/* Une rencontre est concue en ligne : en grille elle passe en colonne
   pour ne pas etre ecrasee. */
.bsp-layout--cards > .bsp-row,
.bsp-layout--cards > .bsp-line,
.bsp-layout--cards > .bsp-book{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	border:1px solid #e6e8ec;
	border-radius:var(--bsp-radius, 16px);
	padding:var(--bsp-pad, 20px);
	background:#fff;
}
.bsp-layout--cards > .bsp-card{
	flex-direction:column;
	align-items:flex-start;
	text-align:left;
}

/* ------------------------------------- En ligne : a la suite, wrap */
.bsp-layout--inline{
	display:flex;
	flex-wrap:wrap;
	gap:var(--bsp-gap);
}
.bsp-layout--inline > *{
	flex:1 1 calc((100% - (var(--bsp-columns) - 1) * var(--bsp-gap)) / var(--bsp-columns));
	min-width:0;
}
.bsp-layout--inline > .bsp-row,
.bsp-layout--inline > .bsp-line,
.bsp-layout--inline > .bsp-book{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	border:1px solid #e6e8ec;
	border-radius:var(--bsp-radius, 16px);
	padding:var(--bsp-pad, 20px);
	background:#fff;
}

/* --------------------------------- Compact : le minimum, une ligne */
.bsp-layout--compact{
	display:flex;
	flex-direction:column;
	gap:0;
}
.bsp-layout--compact > .bsp-row,
.bsp-layout--compact > .bsp-line,
.bsp-layout--compact > .bsp-card,
.bsp-layout--compact > .bsp-book,
.bsp-layout--compact > .bsp-odds{
	display:flex;
	align-items:center;
	gap:10px;
	padding:8px 4px;
	border:0;
	border-bottom:1px solid rgba(0,0,0,.08);
	border-radius:0;
	background:none;
	font-size:.95em;
}
.bsp-layout--compact > *:last-child{
	border-bottom:0;
}
.bsp-layout--compact .bsp-card__logo,
.bsp-layout--compact .bsp-card__photo,
.bsp-layout--compact .bsp-logo{
	width:26px;
	height:26px;
	min-width:26px;
	font-size:10px;
	line-height:26px;
}
.bsp-layout--compact .bsp-meta{
	display:flex;
	gap:12px;
	margin:0;
}
.bsp-layout--compact .bsp-meta span{
	display:none;
}
.bsp-layout--compact .bsp-row__date{
	flex:0 0 7.5em;
	font-size:.85em;
}
.bsp-layout--compact .bsp-line__time{
	font-size:1em;
}

/* ------------------------------- Tableau : colonnes alignees

   Reserve aux elements construits en colonnes. Une rencontre avec cotes
   contient deja ses propres sous-blocs : la transformer en ligne de
   tableau melangeait les colonnes, elle garde donc sa presentation. */
.bsp-layout--table{
	display:table;
	width:100%;
	border-collapse:collapse;
}
.bsp-layout--table > .bsp-row,
.bsp-layout--table > .bsp-card{
	display:table-row;
	border:0;
	border-radius:0;
	background:none;
	padding:0;
}
.bsp-layout--table > .bsp-row > *,
.bsp-layout--table > .bsp-card > *{
	display:table-cell;
	padding:10px 12px;
	border-bottom:1px solid rgba(0,0,0,.07);
	vertical-align:middle;
}
.bsp-layout--table > .bsp-line,
.bsp-layout--table > .bsp-book,
.bsp-layout--table > .bsp-day,
.bsp-layout--table > .bsp-round{
	display:block;
	width:100%;
}
.bsp-layout--table .bsp-meta{
	display:flex;
	gap:16px;
	margin:0;
}
.bsp-layout--table .bsp-meta span{
	display:none;
}

/* --------------------------- Defilement horizontal */
.bsp-layout--slider{
	display:flex;
	gap:var(--bsp-gap);
	overflow-x:auto;
	scroll-snap-type:x mandatory;
	-webkit-overflow-scrolling:touch;
	padding-bottom:10px;
}
.bsp-layout--slider > *{
	flex:0 0 calc((100% - (var(--bsp-columns) - 1) * var(--bsp-gap)) / var(--bsp-columns));
	scroll-snap-align:start;
}
/* Un intertitre n a pas de sens dans un defilement : il le couperait en
   deux. On le masque plutot que de casser la rangee. */
.bsp-layout--slider > .bsp-day,
.bsp-layout--slider > .bsp-round{
	display:none;
}
.bsp-layout--slider > .bsp-row,
.bsp-layout--slider > .bsp-line,
.bsp-layout--slider > .bsp-book,
.bsp-layout--slider > .bsp-card{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	border:1px solid #e6e8ec;
	border-radius:var(--bsp-radius, 16px);
	padding:var(--bsp-pad, 20px);
	background:#fff;
}

/* ------------------------------- Mosaique : le premier en vedette */
.bsp-layout--featured{
	display:grid;
	grid-template-columns:repeat(var(--bsp-columns),minmax(0,1fr));
	gap:var(--bsp-gap);
}
.bsp-layout--featured > *{
	min-width:0;
}
/* La vedette est le premier element affiche, pas un intertitre. */
.bsp-layout--featured > *:first-child:not(.bsp-day):not(.bsp-round){
	grid-column:1 / -1;
}
.bsp-layout--featured > .bsp-day:first-child + *,
.bsp-layout--featured > .bsp-round:first-child + *{
	grid-column:1 / -1;
}
.bsp-layout--featured > .bsp-row,
.bsp-layout--featured > .bsp-line,
.bsp-layout--featured > .bsp-book,
.bsp-layout--featured > .bsp-card{
	display:flex;
	flex-direction:column;
	align-items:stretch;
	gap:10px;
	border:1px solid #e6e8ec;
	border-radius:var(--bsp-radius, 16px);
	padding:var(--bsp-pad, 20px);
	background:#fff;
}

/* En colonne, les deux equipes d une rencontre se lisent l une sous
   l autre, et les cotes passent en pleine largeur. */
.bsp-layout--cards > .bsp-line .bsp-line__match,
.bsp-layout--inline > .bsp-line .bsp-line__match,
.bsp-layout--slider > .bsp-line .bsp-line__match,
.bsp-layout--featured > .bsp-line .bsp-line__match{
	grid-template-columns:1fr auto;
	row-gap:6px;
}
.bsp-layout--cards > .bsp-line .bsp-line__team--away,
.bsp-layout--inline > .bsp-line .bsp-line__team--away,
.bsp-layout--slider > .bsp-line .bsp-line__team--away,
.bsp-layout--featured > .bsp-line .bsp-line__team--away{
	text-align:left;}
.bsp-layout--cards > .bsp-line .bsp-line__partner,
.bsp-layout--inline > .bsp-line .bsp-line__partner,
.bsp-layout--slider > .bsp-line .bsp-line__partner,
.bsp-layout--featured > .bsp-line .bsp-line__partner{
	align-self:flex-start;}

/* Un bookmaker en grille : logo au-dessus, texte en dessous. */
.bsp-layout--cards > .bsp-book,
.bsp-layout--inline > .bsp-book,
.bsp-layout--slider > .bsp-book,
.bsp-layout--featured > .bsp-book{
	grid-template-columns:1fr;
}

/* --------------------------------------- Reglages d apparence

   Aucune taille de police n est imposee ici.

   Ces regles fixaient auparavant la taille du nom, des informations et des
   intitules. Elles avaient la meme specificite que celles produites par
   Elementor, si bien que le resultat dependait de l ordre de chargement des
   feuilles de style : choisir une police ou une taille dans le panneau
   restait le plus souvent sans effet. La typographie appartient desormais
   entierement a Elementor, et le plugin ne fournit plus que la structure.
   -------------------------------------------------------------- */

.bsp-layout .bsp-card__logo,
.bsp-layout .bsp-card__photo,
.bsp-layout .bsp-logo{
	width:var(--bsp-logo, 44px);
	height:var(--bsp-logo, 44px);
	min-width:var(--bsp-logo, 44px);
}
.bsp-layout .bsp-card__logo--empty,
.bsp-layout .bsp-card__photo--empty{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:#f1f5f9;
	font-weight:600;
	color:#64748b;
}

/* Survol et separateurs, activables dans Elementor.

   Le nom de classe est pose par Elementor sur l enveloppe du widget, pas
   sur notre conteneur : la regle doit donc viser un descendant, jamais une
   classe collee a .bsp-layout. C est ce qui rendait les separateurs
   totalement inoperants. */
.bsp-hover-yes .bsp-row,
.bsp-hover-yes .bsp-line,
.bsp-hover-yes .bsp-card,
.bsp-hover-yes .bsp-book{
	transition:transform .18s ease, box-shadow .18s ease;
}
.bsp-hover-yes .bsp-row:hover,
.bsp-hover-yes .bsp-line:hover,
.bsp-hover-yes .bsp-card:hover,
.bsp-hover-yes .bsp-book:hover{
	transform:translateY(-2px);
	box-shadow:0 6px 20px rgba(0,0,0,.10);
}

.bsp-divider-yes .bsp-layout--list > *:not(:last-child),
.bsp-divider-yes .bsp-layout--inline > *{
	border-bottom:1px solid rgba(0,0,0,.08);
	padding-bottom:var(--bsp-gap);
}
.bsp-divider-yes .bsp-layout--list > .bsp-day,
.bsp-divider-yes .bsp-layout--list > .bsp-round,
.bsp-divider-yes .bsp-layout--inline > .bsp-day,
.bsp-divider-yes .bsp-layout--inline > .bsp-round{
	border-bottom:0;
	padding-bottom:0;
}


/* Numero de maillot */
.bsp-card__num{
	display:inline-block;
	min-width:1.6em;
	padding:1px 5px;
	border-radius:3px;
	background:rgba(0,0,0,.06);
	font-size:.85em;
	text-align:center;
	font-variant-numeric:tabular-nums;
}

/* Classement resserre : pour une colonne laterale etroite. */
.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;
}

/* Note affichee dans l editeur Elementor, jamais pour le visiteur. */
.bsp-editor-note{
	padding:14px 16px;
	border:1px dashed #c3c4c7;
	border-radius:4px;
	background:#f6f7f7;
	color:#50575e;
	font-size:13px;
	line-height:1.6;
}

/* ------------------------------------------------ Feuille de match */

.bsp-sheet__block{
	margin-bottom:28px;
}
.bsp-sheet__block h3{
	margin:0 0 12px;
	font-size:1.1em;
}
.bsp-sheet__sides{
	display:grid;
	gap:24px;
}
.bsp-sheet--facing .bsp-sheet__sides{
	grid-template-columns:1fr 1fr;
}
.bsp-sheet--stacked .bsp-sheet__sides{
	grid-template-columns:1fr;
}
.bsp-sheet__formation{
	margin:0 0 8px;
	opacity:.7;
	font-size:.9em;
}
.bsp-lineup{
	list-style:none;}
.bsp-lineup__row{
	border-bottom:1px solid rgba(0,0,0,.05);}
.bsp-lineup__sub{
	opacity:.65;
}
.bsp-stats{
	width:100%;
	border-collapse:collapse;
}
.bsp-stats td,
.bsp-stats th{
	padding:6px 10px;
	border-bottom:1px solid rgba(0,0,0,.05);
	text-align:center;
}
.bsp-stats th{
	font-weight:500;
	opacity:.75;
	font-size:.9em;
}
.bsp-events,
.bsp-h2h{
	margin:0;
	padding:0;
	list-style:none;
}
.bsp-events li,
.bsp-h2h li{
	display:flex;
	gap:12px;
	padding:5px 0;
	border-bottom:1px solid rgba(0,0,0,.05);
}
.bsp-events__min,
.bsp-h2h li > span:first-child{
	flex:0 0 4.5em;
	opacity:.65;
	font-variant-numeric:tabular-nums;
}

/* Sur mobile, le face a face passe l un sous l autre */
@media (max-width:600px){
	.bsp-sheet--facing .bsp-sheet__sides{
		grid-template-columns:1fr;
	}
}

/* Etiquettes masquees : ne garde que les valeurs. */
.bsp-nolabels-yes .bsp-meta span{
	display:none;
}
.bsp-nolabels-yes .bsp-meta{
	display:flex;
	flex-wrap:wrap;
	gap:14px;
}

/* ------------------------------------------- Faits de jeu d une rencontre */

.bsp-scorers{
	margin:0 0 24px;
	text-align:center;
	font-size:14px;
	color:#4b5563;
}
.bsp-scorers span{
	display:block;
	margin-bottom:4px;
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.04em;
	color:#9ca3af;
}

.bsp-sheet__events{
	list-style:none;
	margin:0 0 28px;
	padding:0;
}
.bsp-event{
	display:flex;
	align-items:center;
	gap:12px;
	padding:9px 4px;
	border-bottom:1px solid #eef0f3;
}
.bsp-event:last-child{
	border-bottom:0;
}
.bsp-event__min{
	flex:0 0 3.4em;
	font-variant-numeric:tabular-nums;
	font-weight:600;
	color:#6b7280;
}
.bsp-event__mark{
	flex:0 0 auto;
	min-width:2.4em;
	padding:2px 7px;
	border-radius:4px;
	background:#f1f5f9;
	font-size:11px;
	font-weight:700;
	text-align:center;
	letter-spacing:.02em;
}
.bsp-event--but .bsp-event__mark,
.bsp-event--penalty .bsp-event__mark{
	background:#dcfce7;
	color:#15803d;
}
.bsp-event--csc .bsp-event__mark{
	background:#fee2e2;
	color:#b91c1c;
}
.bsp-event--jaune .bsp-event__mark{
	background:#fef3c7;
	color:#a16207;
}
.bsp-event--rouge .bsp-event__mark{
	background:#fecaca;
	color:#991b1b;
}
.bsp-event--remplacement .bsp-event__mark{
	background:#e0e7ff;
	color:#3730a3;
}
.bsp-event__who{
	flex:1 1 auto;
	min-width:0;
}
.bsp-event__who a{
	color:inherit;
	font-weight:600;
}
.bsp-event__assist{
	margin-left:6px;
	font-size:12px;
	color:#9ca3af;
	font-style:normal;
}
.bsp-event__team{
	flex:0 0 auto;
	font-size:12px;
	color:#9ca3af;
}
.bsp-event__score{
	flex:0 0 auto;
	font-variant-numeric:tabular-nums;
	font-weight:700;
	font-size:13px;
}

@media (max-width:600px){
	.bsp-event__team{
		display:none;
	}
}

/* ---------------------------------------------------------------- Direct */

/* Un score qui change doit se remarquer, sans etre agressif. */
@keyframes bsp-flash{
	0%   { background:#fde68a; }
	100% { background:transparent; }
}
.bsp-flash{
	animation:bsp-flash 1.4s ease-out;
	border-radius:6px;
}

/* Pastille clignotante sur une rencontre en cours. */
.bsp-badge.is-live::before{
	content:"";
	display:inline-block;
	width:8px;
	height:8px;
	margin-right:7px;
	border-radius:50%;
	background:#dc2626;
	animation:bsp-pulse 1.6s ease-in-out infinite;
}
@keyframes bsp-pulse{
	0%,100% { opacity:1; transform:scale(1); }
	50%     { opacity:.35; transform:scale(.8); }
}

.bsp-badge__minute{
	margin-left:8px;
	padding:1px 6px;
	border-radius:4px;
	background:rgba(255,255,255,.25);
	font-variant-numeric:tabular-nums;
}

.bsp-row.is-live .bsp-row__score{
	font-weight:800;
	color:#b91c1c;
}

/* Le mouvement est desactive pour qui en fait la demande au systeme. */
@media (prefers-reduced-motion:reduce){
	.bsp-flash,
	.bsp-badge.is-live::before{
		animation:none;
	}
}

/* --------------------------------------------------------------------------
   Ligne de rencontre etendue : competition, heure, equipes, partenaire, cotes.
   Utilisee quand le widget demande les cotes, le partenaire ou la competition.
   -------------------------------------------------------------------------- */

.bsp-round {
	background: #111827;
	color: #fff;
	font-weight: 800;
	font-size: 15px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 12px 16px;
	margin: 18px 0 8px;
}

/* Bandeaux de journee et de date.

   La couleur du texte est portee par le conteneur du bandeau, et non par
   une regle plus faible : sans cela, un reglage de couleur venu du theme
   s appliquait au texte et le rendait illisible sur ce fond sombre. */
.bsp-layout .bsp-day,
.bsp-layout .bsp-round { color: #fff; }

.bsp-day {
	background: #1f2937;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	text-align: center;
	padding: 8px 14px;
	margin: 8px 0;
	text-transform: capitalize;
}

.bsp-line {
	background: #fff;
	border-bottom: 1px solid #e5e7eb;}

.bsp-line.is-live { background: #fef2f2; }

/* Colonne de gauche : competition au-dessus, heure en dessous. */
.bsp-line__side {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 2px;
	flex: 0 0 96px;
	min-width: 0;
}

.bsp-line__league {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .03em;
	color: #6b7280;}

.bsp-line__league span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.bsp-line__time { font-size: 17px; font-weight: 500; color: #111827; font-variant-numeric: tabular-nums; }

.bsp-line__match {
	text-decoration: none;
	color: inherit;}

.bsp-line__team {
	font-weight: 600;}

.bsp-line__team > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bsp-line__team--away { text-align: right;}
.bsp-line__record { color: #6b7280; font-weight: 500; font-size: 12px; }

.bsp-line__score { font-weight: 700; color: #6b7280; font-variant-numeric: tabular-nums; }
.bsp-line.is-live .bsp-line__score { color: #dc2626; }

.bsp-line__partner {
	background: #111827;}

.bsp-line__partner img { max-height: 15px; height: auto;}

.bsp-line__odds .bsp-odd {
	background: #fff;
	border: 1px solid #e5e7eb;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	text-decoration: none;
	color: #111827;}

.bsp-line__odds a.bsp-odd:hover { background: #111827; color: #fff; border-color: #111827; }

/* Pagination des longues listes. */
.bsp-pages { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin: 16px 0; }

.bsp-pages a,
.bsp-pages span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 34px;
	padding: 6px 10px;
	border: 1px solid #e5e7eb;
	text-decoration: none;
	color: #111827;
	font-weight: 600;
}

.bsp-pages .is-current { background: #111827; color: #fff; border-color: #111827; }
.bsp-pages .bsp-gap { border: 0; min-width: 0; padding: 6px 2px; }

/* Zones de qualification et de relegation, dans un classement. */
.bsp-table td.bsp-zone { position: relative; }

.bsp-table tr[data-zone] td:first-child { box-shadow: inset 3px 0 0 var(--bsp-zone, transparent); }

.bsp-legend { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; }
.bsp-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; }
.bsp-legend i { width: 3px; height: 16px; flex: 0 0 3px; background: var(--bsp-zone, #9ca3af); }

/* Carte bookmaker : logo, avis, code promo, bouton. */
.bsp-book {
	display: grid;
	grid-template-columns: 120px 1fr;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid #e5e7eb;
	background: #fff;
	margin-bottom: 12px;
}

.bsp-book__logo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #111827;
	padding: 14px 10px;
	min-height: 64px;
}

.bsp-book__logo img { max-width: 110px; max-height: 20px; height: auto; display: block; }
.bsp-book__logo--empty { color: #fff; font-weight: 800; letter-spacing: .05em; }
.bsp-book__note { font-size: 13px; color: #4b5563; margin: 0 0 8px; }

.bsp-book__code {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px dashed #9ca3af;
	padding: 5px 10px;
	font-weight: 700;
	font-size: 13px;
	margin-right: 8px;
	cursor: pointer;
	background: none;
}

.bsp-book__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	/* Meme ambre que les autres boutons : le vert faisait croire a deux
	   operateurs differents sur la meme page, et diluait le seul repere de
	   couleur qui indique ou cliquer. */
	background: var(--bsp-accent, #F0B429);
	color: var(--bsp-accent-ink, #1B1F1C);
	font-weight: 800;
	padding: 9px 16px;
	text-decoration: none;
	white-space: nowrap;
}

.bsp-book__cta:hover { filter: brightness(1.06); }
.bsp-book__legal { font-size: 11px; color: #6b7280; margin: 6px 0 0; }

@media (max-width: 860px) {
	.bsp-book { grid-template-columns: 1fr; }
}

/* Version resserree du classement : rang, equipe et points seulement. */
.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; }

.bsp-standings-compact-yes .bsp-table { font-size: 13px; }
.bsp-standings-compact-yes .bsp-table th,
.bsp-standings-compact-yes .bsp-table td { padding: 5px 8px; }

/* ==========================================================================
   Espacements, bandeaux de groupe et maillage interne.

   Une seule echelle, tous multiples de 4. Les espaces etaient poses au cas
   par cas : d ou les trous entre un bandeau de journee et sa premiere
   rencontre, et les valeurs intermediaires du genre 18 ou 30 pixels.
   ========================================================================== */

.bsp-single,
.bsp-list,
.bsp-links{
	--bsp-s1:4px;
	--bsp-s2:8px;
	--bsp-s3:12px;
	--bsp-s4:16px;
	--bsp-s5:24px;
	--bsp-s7:48px;
}

.bsp-crumbs ol{
	display:flex;flex-wrap:wrap;align-items:center;gap:var(--bsp-s2,8px);
	list-style:none;margin:0 0 var(--bsp-s4,16px);padding:0;font-size:13px;
}
.bsp-crumbs li.is-current span{font-weight:600;color:#111827}

/* Bandeau de groupe : journee a gauche, date a droite, sur une seule ligne.
   La liste qui suit se colle dessous, sans aucun espace. */
.bsp-group{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--bsp-s4,16px);flex-wrap:wrap;
	padding:10px 20px;
	background:#1e293b;color:#fff;
	margin:0;
}

/* 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:var(--bsp-s5,24px);
}

.bsp-group__round{
	font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}
.bsp-group__day{
	font-size:13px;font-weight:500;color:#cbd5e1;font-variant-numeric:tabular-nums;
}

.bsp-layout > .bsp-group{
	grid-column:1 / -1;
	flex:1 1 100%;
	width:100%;
}

.bsp-anj--once{margin:var(--bsp-s5,24px) 0 0}

/* ------------------------------------------------ Maillage interne */

/* Aucune marge propre : dans un modele c est la gouttiere du conteneur qui
   donne l espace, dans un gabarit c est l echelle de blocs.css. */
.bsp-links{margin:0}
.bsp-links:first-child{margin-top:0}

.bsp-links__title{
	font-size:20px;font-weight:800;letter-spacing:-.02em;
	margin:0 0 var(--bsp-s4,16px);
}

.bsp-links__body{
	border:1px solid #e5e7eb;
	border-bottom:0;
}

.bsp-links__row{
	display:grid;
	grid-template-columns:1fr auto;
	gap:2px var(--bsp-s4,16px);
	align-items:center;
	padding:var(--bsp-s3,12px) var(--bsp-s4,16px);
	border-bottom:1px solid #e5e7eb;
	text-decoration:none;color:inherit;
	transition:background 140ms cubic-bezier(.22,1,.36,1);
}
.bsp-links__row:hover{background:#f8fafc}
.bsp-links__row:focus-visible{outline:3px solid #1e293b;outline-offset:-3px}

.bsp-links--players .bsp-links__row{grid-template-columns:24px 1fr auto}

.bsp-links__rank{
	grid-column:1;
	grid-row:1 / span 2;
	align-self:center;
	font-size:15px;font-weight:800;color:#9ca3af;
	font-variant-numeric:tabular-nums;
}

.bsp-links__main{
	grid-column:1;
	grid-row:1;
	font-size:15px;font-weight:700;line-height:1.3;
}
.bsp-links--players .bsp-links__main{grid-column:2}

.bsp-links__meta{
	grid-column:1;
	grid-row:2;
	font-size:12px;color:#6b7280;
}
.bsp-links--players .bsp-links__meta{grid-column:2}

.bsp-links__odds,
.bsp-links__stat{
	grid-column:2;
	grid-row:1 / span 2;
	justify-self:end;
	align-self:center;
	font-size:13px;font-weight:700;color:#374151;
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}
.bsp-links--players .bsp-links__odds,
.bsp-links--players .bsp-links__stat{grid-column:3}

/* En colonne laterale la place manque : les cotes passent sous le nom. */
@media (max-width:520px){
	.bsp-links__row{grid-template-columns:1fr}
	.bsp-links--players .bsp-links__row{grid-template-columns:24px 1fr}
	.bsp-links__odds,
	.bsp-links__stat{grid-row:3;grid-column:1 / -1;justify-self:start}
	.bsp-links--players .bsp-links__odds,
	.bsp-links--players .bsp-links__stat{grid-column:2}
	.bsp-links__rank{grid-row:1 / span 3}
}

.bsp-links__tags{display:flex;flex-wrap:wrap;gap:var(--bsp-s2,8px)}
.bsp-links__tag{
	font-size:13px;font-weight:600;text-decoration:none;color:inherit;
	border:1px solid #d1d5db;padding:7px 12px;background:#fff;
	transition:border-color 140ms cubic-bezier(.22,1,.36,1),transform 140ms cubic-bezier(.22,1,.36,1);
}
.bsp-links__tag:hover{border-color:#1e293b;transform:translateY(-1px)}
.bsp-links__tag:focus-visible{outline:3px solid #1e293b;outline-offset:2px}

/* ------------------------------------------------ Questions frequentes */

.bsp-faq{border-top:1px solid #e5e7eb}
.bsp-faq__item{border-bottom:1px solid #e5e7eb}
.bsp-faq__q{
	cursor:pointer;list-style:none;
	padding:var(--bsp-s4,16px) 0;
	font-size:15px;font-weight:700;
	display:flex;justify-content:space-between;align-items:center;gap:var(--bsp-s4,16px);
}
.bsp-faq__q::-webkit-details-marker{display:none}
.bsp-faq__q::after{content:"+";font-size:18px;font-weight:700;color:#9ca3af;flex:none}
.bsp-faq__item[open] .bsp-faq__q::after{content:"\2013"}
.bsp-faq__q:hover{color:#1e293b}
.bsp-faq__a{padding:0 0 var(--bsp-s4,16px)}
.bsp-faq__a p{margin:0;font-size:14px;color:#4b5563;max-width:76ch}
.bsp-faq__a a{color:#1e293b}

/* ------------------------------------------------ Textes rediges */

.bsp-lede{
	margin:0 0 var(--bsp-s5,24px);
	font-size:17px;line-height:1.6;color:#374151;max-width:70ch;
	text-wrap:pretty;
}
.bsp-copy{margin:0 0 var(--bsp-s4,16px)}
.bsp-copy__title{
	font-size:21px;font-weight:700;letter-spacing:0;
	margin:var(--bsp-s5,24px) 0 8px;
}
.bsp-copy__title:first-child{margin-top:0}
.bsp-copy p{margin:0 0 var(--bsp-s3,12px);font-size:15px;color:#4b5563;max-width:72ch}

/* ==========================================================================
   Blocs entierement cliquables.

   Cliquer sur une carte doit mener quelque part : seul le bouton reagissait,
   alors que le visiteur vise la carte. Le lien principal est etire sur toute
   la surface plutot que d imbriquer un lien dans un lien, ce qui serait
   invalide et casserait la navigation au clavier.
   ========================================================================== */

.bsp-book,
.bsp-line,
.bsp-card{
	position:relative;
	isolation:isolate;
}

.bsp-book__cta::after,
.bsp-line__match::after{
	content:"";
	position:absolute;
	inset:0;
	z-index:0;
}

/* Les elements qui ont leur propre destination passent devant : les cotes et
   le logo du partenaire menent chez le bookmaker, pas vers la rencontre. */
.bsp-line__odds,
.bsp-line__partner,
.bsp-odd,
.bsp-book__code,
.bsp-book__logo{
	position:relative;
	z-index:1;
}

.bsp-book,
.bsp-line{
	transition:border-color 160ms cubic-bezier(.22,1,.36,1),
		box-shadow 200ms cubic-bezier(.22,1,.36,1),
		transform 160ms cubic-bezier(.22,1,.36,1);
}

.bsp-book:hover,
.bsp-line:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(15,23,42,.10);
}

/* Le contour de mise au point suit la carte et non le seul bouton : au
   clavier on doit voir ce que l on va activer. */
.bsp-book:focus-within,
.bsp-line:focus-within{
	outline:3px solid currentColor;
	outline-offset:2px;
}

/* ------------------------------------------------ Colonne laterale collante

   Le classement et les affiches restent visibles pendant que le calendrier
   defile. A partir du grand ecran seulement : en mobile une colonne collante
   masque le contenu. */

/* La colonne collante est reglee en un seul endroit, dans blocs.css : deux
   reglages concurrents donnaient deux hauteurs de depart selon la page. */

/* ------------------------------------------------ Animations reduites */

@media (prefers-reduced-motion:reduce){
	.bsp-book,
	.bsp-line,
	.bsp-card,
	.bsp-links__row,
	.bsp-links__tag{
		transition:none;
	}
	.bsp-book:hover,
	.bsp-line:hover{
		transform:none;
	}
}

/* ------------------------------------------------ Cartes de competition

   Le bloc des autres competitions passe en cartes avec logo : c est la seule
   liste ou l identite visuelle aide a reconnaitre la destination d un coup
   d oeil. Les autres blocs restent en lignes, plus denses. */

.bsp-links__cards{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
	gap:var(--bsp-s3,12px);
}

.bsp-league-card{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:var(--bsp-s2,8px);
	padding:var(--bsp-s4,16px) var(--bsp-s3,12px);
	border:1px solid #e5e7eb;
	background:#fff;
	text-decoration:none;
	color:inherit;
	text-align:center;
	transition:border-color 160ms cubic-bezier(.22,1,.36,1),
		transform 160ms cubic-bezier(.22,1,.36,1),
		box-shadow 200ms cubic-bezier(.22,1,.36,1);
}

.bsp-league-card:hover{
	border-color:#cbd5e1;
	transform:translateY(-2px);
	box-shadow:0 8px 22px rgba(15,23,42,.10);
}
.bsp-league-card:focus-visible{outline:3px solid #1e293b;outline-offset:2px}

/* Hauteur fixe pour la zone du logo : sans cela les cartes d une meme rangee
   se decalent selon la taille de chaque image. */
.bsp-league-card__logo{
	display:flex;align-items:center;justify-content:center;
	height:56px;width:56px;
	margin-bottom:var(--bsp-s1,4px);
}
.bsp-league-card__logo img{
	/* Une borne en pixels, et non en pourcentage : un pourcentage de hauteur ne
	   se resout que si le parent en a une, et laisse l image grandir sans limite
	   dans le cas contraire. */
	max-height:34px;max-width:100%;
	height:auto;width:auto;
	object-fit:contain;
	display:block;
}
.bsp-league-card__logo--empty{
	background:#f1f5f9;
	border:1px solid #e5e7eb;
	font-size:12px;font-weight:800;letter-spacing:.06em;color:#64748b;
}

.bsp-league-card__name{
	font-size:15px;font-weight:700;line-height:1.25;
}
.bsp-league-card__meta{
	font-size:12px;color:#6b7280;line-height:1.4;
}
.bsp-league-card__count{
	margin-top:var(--bsp-s1,4px);
	font-size:11px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
	color:#374151;
	font-variant-numeric:tabular-nums;
}

/* Deux par ligne sur telephone : une seule colonne gacherait la hauteur. */
@media (max-width:520px){
	.bsp-links__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.bsp-league-card{padding:var(--bsp-s3,12px) var(--bsp-s2,8px)}
	.bsp-league-card__logo{height:44px;width:44px}
	.bsp-league-card__name{font-size:14px}
}

@media (prefers-reduced-motion:reduce){
	.bsp-league-card{transition:none}
	.bsp-league-card:hover{transform:none}
}

/* ==========================================================================
   Blocs vides et mention legale
   ========================================================================== */

/* Un champ sans valeur laissait une case vide, bordee, de la hauteur d une
   ligne : c est ce qui donnait trois cadres vides a la place des cotes quand la
   source ne les publie pas encore. Le bloc disparait, et sa case avec lui. */
.elementor-widget-heading:has(.elementor-heading-title:empty),
.elementor-widget-text-editor:has(.elementor-widget-container:empty),
.elementor-widget-text-editor:has(> .elementor-widget-container > p:only-child:empty){
	display:none;
}

/* Une case qui ne contient qu un champ vide disparait entierement, bordure et
   espace compris. */
.e-con:has(> .elementor-widget-heading:only-child > .elementor-widget-container > .elementor-heading-title:empty),
.e-con:has(> .elementor-widget-text-editor:only-child > .elementor-widget-container:empty){
	display:none;
}

/* ------------------------------------------------ Mention legale de pied */

.bsp-anj--footer{
	display:flex;
	gap:var(--bsp-s3,12px);
	align-items:flex-start;
	margin:0;
	padding:var(--bsp-s3,12px) var(--bsp-s4,16px);
	background:#f8fafc;
	border:1px solid #e5e7eb;
	border-radius:0;
}
.bsp-anj--footer .bsp-anj__badge{
	flex:none;
	background:#1e293b;color:#fff;
	font-size:11px;font-weight:800;
	padding:4px 8px;border-radius:0;
}
.bsp-anj--footer .bsp-anj__text{
	margin:0;
	font-size:12px;line-height:1.5;color:#4b5563;
}

/* ------------------------------------------------ Cotes en colonne laterale

   Une chaine du genre 1 1,85 N 5,20 2 3,60 depasse la largeur d une colonne
   laterale. Elle reste sur une ligne mais se reduit, et la ligne peut se
   replier sur deux hauteurs plutot que de deborder. */
.bsp-links__odds{
	font-size:12px;
	white-space:normal;
	text-align:right;
	max-width:96px;
}

@media (max-width:520px){
	.bsp-links__odds{max-width:none;text-align:left}
}

/* ==========================================================================
   Colonne laterale : tout s empile

   La regle depend de l endroit, pas du seul type de bloc.

   En pleine largeur, une rangee reste une rangee et ne se replie jamais : la
   journee a gauche et la date a droite, les trois cotes cote a cote.

   Dans une colonne laterale, la place manque. Une ligne de match a quatre
   parties y donne des cases de soixante pixels ou plus rien n est lisible :
   tout passe donc en colonne.

   La regle s appuie sur la largeur reelle du bloc et non sur celle de l ecran :
   c est ce qui fait qu une meme liste s affiche large au centre de la page et
   empilee dans la colonne de droite, sans deux reglages a maintenir.
   ========================================================================== */

.bsp-side,
.bsp-sticky .bsp-list,
.bsp-sticky .bsp-links{
	container-type:inline-size;
	width:100%;
}

/* ------------------------------------------------ Lignes de match */

@container (max-width:420px){

	.bsp-line__match{
		text-align:left;}

	.bsp-line__team,
	.bsp-line__team--away{
		text-align:left;}

	.bsp-line__score{align-self:flex-start}
	.bsp-line__odds .bsp-odd{text-align:center;}

	/* Cartes et grilles : une seule colonne. */
	.bsp-layout--cards,
	.bsp-layout--inline,
	.bsp-layout--compact{
		grid-template-columns:1fr;
		display:grid;
	}

	.bsp-book{
		grid-template-columns:1fr;
		text-align:left;
	}
	.bsp-book__cta{justify-self:stretch;text-align:center}

	/* Blocs de maillage : le nom, puis la precision, puis la cote. */
	.bsp-links__row{grid-template-columns:1fr}
	.bsp-links--players .bsp-links__row{grid-template-columns:22px 1fr}
	.bsp-links__odds,
	.bsp-links__stat{
		grid-column:1 / -1;
		grid-row:auto;
		justify-self:start;
		max-width:none;
		text-align:left;
	}
	.bsp-links--players .bsp-links__odds,
	.bsp-links--players .bsp-links__stat{grid-column:2}

	/* Cartes de competition : deux par ligne restent lisibles. */
	.bsp-links__cards{grid-template-columns:repeat(2,minmax(0,1fr))}
	.bsp-league-card__logo{height:40px;width:40px}
	.bsp-league-card__name{font-size:13px}
	.bsp-league-card__meta{font-size:11px}
}

/* ------------------------------------------------ Classement resserre

   Le tableau garde ses colonnes mais respire moins : c est la seule facon de
   faire tenir un classement dans un tiers de la largeur sans le tronquer. */

.bsp-sticky .bsp-table{font-size:12px}
.bsp-sticky .bsp-table th,
.bsp-sticky .bsp-table td{padding:6px 4px}

/* ------------------------------------------------ Alignement des colonnes

   Les deux colonnes d une mise en page demarrent a la meme hauteur. Centrees,
   celle de droite flottait au milieu de la hauteur de la gauche : sur une page
   de competition, le classement commencait a mi-calendrier alors qu il doit
   etre visible des l arrivee sur la page. */

/* L alignement en haut de colonne fait partie du reglage unique de blocs.css. */

/* ==========================================================================
   Un seul effet de survol, partout

   Trois effets differents cohabitaient : un soulevement sur les cartes, un
   changement de fond sur les lignes, rien du tout sur les cotes. Le meme geste
   donnait donc trois reponses selon l endroit de la page. Une seule regle
   desormais : le bloc se souleve de deux pixels, sa bordure se marque, une
   ombre discrete apparait.
   ========================================================================== */

.bsp-book,
.bsp-line,
.bsp-card,
.bsp-league-card,
.bsp-odd,
.bsp-links__row,
.bsp-links__tag,
.bsp-row{
	transition:border-color 160ms cubic-bezier(.22,1,.36,1),
		box-shadow 200ms cubic-bezier(.22,1,.36,1),
		transform 160ms cubic-bezier(.22,1,.36,1),
		background-color 160ms cubic-bezier(.22,1,.36,1);
}

.bsp-book:hover,
.bsp-line:hover,
.bsp-card:hover,
.bsp-league-card:hover,
.bsp-odd:hover,
.bsp-links__row:hover,
.bsp-links__tag:hover,
.bsp-row:hover{
	transform:translateY(-2px);
	border-color:#cbd5e1;
	box-shadow:0 8px 22px rgba(15,23,42,.10);
	background-color:#fff;
}

/* Une ligne de liste n a pas de bordure propre : son fond se teinte a la place,
   sinon rien ne signale qu elle reagit. */
.bsp-links__row:hover{
	background-color:#f8fafc;
	box-shadow:none;
	transform:none;
	border-color:#e5e7eb;
}

/* Une cote menant chez le bookmaker se distingue au survol : c est le clic qui
   rapporte, il doit se voir. */
.bsp-odd:hover{
	border-color:#1e293b;
}

/* Le meme contour de mise au point pour tout ce qui est cliquable. */
.bsp-book:focus-within,
.bsp-line:focus-within,
.bsp-card:focus-within,
.bsp-league-card:focus-visible,
.bsp-odd:focus-visible,
.bsp-links__row:focus-visible,
.bsp-links__tag:focus-visible,
.bsp-row:focus-visible{
	outline:3px solid #1e293b;
	outline-offset:2px;
}

/* Les noms et les logos cliquables de l affiche : meme logique, en plus discret
   puisqu ils sont dans le texte. */
.bsp-single a:has(img),
.elementor-widget-heading a{
	transition:opacity 160ms cubic-bezier(.22,1,.36,1),
		text-decoration-color 160ms cubic-bezier(.22,1,.36,1);
	text-decoration:underline;
	text-decoration-color:transparent;
	text-underline-offset:3px;
}
.elementor-widget-heading a:hover{
	text-decoration-color:currentColor;
}
.bsp-single a:has(img):hover{
	opacity:.82;
}

@media (prefers-reduced-motion:reduce){
	.bsp-book,
	.bsp-line,
	.bsp-card,
	.bsp-league-card,
	.bsp-odd,
	.bsp-links__row,
	.bsp-links__tag,
	.bsp-row{transition:none}

	.bsp-book:hover,
	.bsp-line:hover,
	.bsp-card:hover,
	.bsp-league-card:hover,
	.bsp-odd:hover,
	.bsp-row:hover{transform:none}
}

/* ==========================================================================
   Espaces de la liste de rencontres

   Trois espaces se cumulaient sans qu aucun soit voulu.

   La liste applique un ecart entre tous ses enfants : le bandeau en heritait
   comme les autres, d ou le vide entre lui et sa premiere rencontre. Les
   anciens intertitres portaient en plus leurs propres marges. Et le duel
   s etirait sur toute la largeur, ce qui eloignait les deux equipes de part
   et d autre du VS.
   ========================================================================== */

/* Le bandeau occupe toute la largeur de la liste. */
.bsp-layout > .bsp-group{
	grid-column:1 / -1;
	flex:1 1 100%;
	width:100%;
	margin:0;
}

/* Une liste de lignes n a pas besoin d ecart : chaque ligne porte deja son
   trait de separation. Les grilles de cartes gardent le leur. */
.bsp-layout--list:has(.bsp-line),
.bsp-layout--list:has(.bsp-row){
	gap:0;
}

/* Le bandeau se colle a la rencontre qui le suit. */
.bsp-layout > .bsp-group + .bsp-line,
.bsp-layout > .bsp-group + .bsp-row{
	margin-top:0;
}

/* Seul un changement de groupe merite un espace. */
.bsp-layout > .bsp-line + .bsp-group,
.bsp-layout > .bsp-row + .bsp-group,
.bsp-layout > .bsp-card + .bsp-group{
	margin-top:var(--bsp-s5,24px);
}

/* Les anciens intertitres, encore possibles via un code court : leurs marges
   propres s ajoutaient a l ecart de la liste. */
.bsp-layout > .bsp-day,
.bsp-layout > .bsp-round{
	margin:0;
}

/* ------------------------------------------------ Le duel, resserre

   Les deux equipes se rapprochent du VS au lieu de filer aux extremites : la
   rencontre se lit d un coup d oeil, sans balayer la ligne du regard. */

.bsp-line__match{
	gap:var(--bsp-s3,12px);
	max-width:620px;
	margin-inline:auto;
}

.bsp-line__team{
	text-align:right;}

.bsp-line__team--away{
	text-align:left;}

/* Dans une colonne laterale, le duel reprend toute la place disponible. */
@container (max-width:420px){
	.bsp-line__match{margin-inline:0;}
	.bsp-line__team,
	.bsp-line__team--away{text-align:left;}
}

/* ==========================================================================
   Lignes de rencontre alignees en colonnes

   Le defaut : la ligne etait une suite de blocs souples, chacun prenant la
   largeur de son contenu. Un nom court laissait donc son ecusson plus a droite
   que celui de la ligne suivante, et rien ne s alignait d une rangee a l autre.

   La ligne devient une grille aux colonnes fixes. Toutes les rangees partagent
   les memes reperes : les heures, les ecussons, les noms, le score et les cotes
   tombent sur la meme verticale du haut jusqu en bas de la liste.
   ========================================================================== */

.bsp-line{
	display:grid;
	grid-template-columns:104px minmax(0,1fr) 172px;
	align-items:center;
	gap:var(--bsp-s3,12px);
	padding:var(--bsp-s3,12px) var(--bsp-s4,16px);
}

/* Avec le logo du partenaire, une colonne s ajoute avant les cotes. */
.bsp-line:has(.bsp-line__partner){
	grid-template-columns:104px minmax(0,1fr) 56px 172px;
}

/* Sans cote affichee, la derniere colonne disparait. */
.bsp-line:not(:has(.bsp-line__odds)){
	grid-template-columns:104px minmax(0,1fr);
}

.bsp-line__league img{ object-fit:contain; }

/* ------------------------------------------------ Le duel

   Trois colonnes fixes : le camp qui recoit, le score, le camp exterieur. Les
   noms se rapprochent du centre, les ecussons restent aux extremites. C est ce
   qui donne les rails verticaux. */

.bsp-line__match{
	display:grid;
	grid-template-columns:minmax(0,1fr) 56px minmax(0,1fr);
	align-items:center;
	gap:0;
	max-width:none;
	margin:0;
	width:100%;
}

/* Le camp exterieur est le miroir du premier : nom d abord, ecusson ensuite. */
.bsp-line__team--away{
	grid-template-columns:minmax(0,1fr) 28px;
}

/* Le nom se cale contre son ecusson, du meme cote que lui.

   Il etait aligne vers le centre : le nom de l equipe qui recoit se retrouvait
   colle au VS, loin de son propre ecusson reste a gauche. On lisait donc un
   ecusson, un grand vide, puis un nom. Chaque camp forme desormais un bloc :
   ecusson et nom a gauche pour celui qui recoit, nom et ecusson a droite pour
   le visiteur. */
.bsp-line__team > span{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
	text-align:left;
}

.bsp-line__team--away > span{
	text-align:right;
}

/* Les ecussons occupent une case de taille fixe : une image plus large que les
   autres ne decale plus le nom qui la suit. */
.bsp-line__team .bsp-logo,
.bsp-line__team .bsp-logo--empty{ object-fit:contain; }

.bsp-line__score{
	text-align:center;
	font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------ Partenaire et cotes */

.bsp-line__partner{height:32px;}

.bsp-line__odds{
	grid-auto-flow:column;
	grid-auto-columns:1fr;}

.bsp-line__odds .bsp-odd{
	text-align:center;}

/* ------------------------------------------------ Classement aligne

   Meme principe : des colonnes fixes pour le rang et l ecusson, afin que les
   noms d equipe commencent tous a la meme abscisse. */

.bsp-table td:first-child{
	width:36px;
	text-align:center;
	font-variant-numeric:tabular-nums;
}

.bsp-table td:nth-child(2){
	text-align:left;
}

.bsp-table td:nth-child(2) img{
	width:20px;height:20px;
	object-fit:contain;
	vertical-align:middle;
	margin-right:var(--bsp-s2,8px);
}

.bsp-table th,
.bsp-table td{
	font-variant-numeric:tabular-nums;
}

/* ------------------------------------------------ Repli sur telephone

   Les rails a cinq colonnes ne tiennent pas sur trois cent quatre-vingt-dix
   pixels. La ligne se reorganise en deux rangees : la rencontre au-dessus, les
   cotes en dessous sur toute la largeur. Les rails restent alignes a
   l interieur de chaque rangee. */

@media (max-width:600px){

	.bsp-line__team .bsp-logo,
	.bsp-line__team .bsp-logo--empty{ object-fit:contain; }
}

/* Dans une colonne laterale, la ligne s empile completement : la largeur ne
   permet pas de tenir un duel et des cotes sur la meme rangee. */
@container (max-width:420px){

	.bsp-line__team--away > span,
	.bsp-line__team > span{text-align:left}

	/* L ecusson du visiteur repasse devant son nom : empiles, les deux camps
	   se lisent dans le meme sens. Les cases sont designees explicitement,
	   car une grille les attribue sinon dans l ordre du code. */
	.bsp-line__team--away .bsp-logo,
	.bsp-line__team--away .bsp-logo--empty{grid-column:1}

	.bsp-line__score{text-align:left}
}

/* Bilan de forme affiche a cote du nom : une colonne s ajoute, du cote
   interieur, pour qu il ne passe pas sous l ecusson. Tous les rangs d une meme
   liste portent le meme reglage, les rails restent donc alignes. */
.bsp-line__team:has(.bsp-line__record){
	grid-template-columns:28px minmax(0,1fr) auto;
}

/* Le nom occupe la place laissee libre, et le reste de la ligne se pousse vers
   l exterieur : les deux blocs se tiennent aux bords, le VS reste au centre. */
.bsp-line__team > span{width:100%}

/* ==========================================================================
   Classement complet, meme dans une colonne etroite

   Le tableau doit montrer ses huit colonnes : matchs joues, victoires, nuls,
   defaites, buts pour, buts contre, difference et points. C est la donnee que
   vient chercher un parieur.

   On ne masque donc aucune colonne : on resserre la typographie et on aligne
   chaque type de valeur. Une colonne laterale de trois cents pixels suffit.
   ========================================================================== */

.bsp-table-wrap{
	overflow-x:auto;
	-webkit-overflow-scrolling:touch;
}

/* Le rang au centre, l equipe a gauche comme son ecusson, les chiffres
   centres. Les intitules suivent l alignement de leurs valeurs. */
.bsp-table th:first-child,
.bsp-table td:first-child{
	width:32px;
	text-align:center;
}

.bsp-table th:nth-child(2),
.bsp-table td:nth-child(2){
	text-align:left;
	min-width:120px;
}

.bsp-table th:nth-child(n+3),
.bsp-table td:nth-child(n+3){
	text-align:center;
	width:34px;
}

.bsp-table th{
	font-size:11px;
	font-weight:700;
	letter-spacing:.04em;
	text-transform:uppercase;
	white-space:nowrap;
}

.bsp-table td{
	font-variant-numeric:tabular-nums;
	white-space:nowrap;
}

/* La colonne des points se detache : c est celle qu on lit en premier. */
.bsp-table th:last-child,
.bsp-table td:last-child{
	font-weight:700;
}

/* Le nom se colle a son ecusson et se tronque plutot que de pousser les
   colonnes chiffrees hors de l ecran. */
.bsp-table td:nth-child(2) a,
.bsp-table td:nth-child(2) > span{
	display:flex;
	align-items:center;
	gap:var(--bsp-s2,8px);
	min-width:0;
	text-decoration:none;
	color:inherit;
}

.bsp-table td:nth-child(2) a > span,
.bsp-table td:nth-child(2) > span > span{
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.bsp-table td:nth-child(2) img{
	flex:none;
	width:20px;height:20px;
	object-fit:contain;
	margin:0;
}

@container (max-width:420px){

	.bsp-table{font-size:11px}

	.bsp-table th,
	.bsp-table td{padding:5px 3px}

	.bsp-table th:nth-child(n+3),
	.bsp-table td:nth-child(n+3){width:26px}

	.bsp-table th:nth-child(2),
	.bsp-table td:nth-child(2){min-width:88px}

	.bsp-table td:nth-child(2) img{width:16px;height:16px}
}

/* ==========================================================================
   Page d accueil d une discipline
   ========================================================================== */

.bsp-arch{max-width:1240px}

.bsp-arch__intro{margin:0 0 var(--bsp-s4,16px)}

.bsp-arch__title{
	/* Trente caracteres au maximum : c est cette borne qui coupait Pronostics
	   football americain : cotes, calendrier et matchs en deux lignes, quelle
	   que soit la largeur de l ecran. La taille suit desormais la place
	   disponible, reglee avec les autres titres dans blocs.css. */
	font-weight:800;letter-spacing:-.02em;
}

.bsp-arch__block{margin:0 0 var(--bsp-s4,16px)}

.bsp-arch__h2{
	font-size:21px;font-weight:700;letter-spacing:0;line-height:1.25;
	margin:var(--bsp-s5,24px) 0 8px;
}
.bsp-arch__h2 small{
	display:block;
	font-size:12px;font-weight:500;color:#6b7280;letter-spacing:0;
	margin-top:2px;
}

/* ------------------------------------------------ Les chiffres

   Une bande de cellules a bordures partagees : plus dense qu une grille de
   cartes, et le regard compare les nombres d un coup d oeil. */

.bsp-figures{
	display:flex;
	flex-wrap:wrap;
	border:1px solid #e5e7eb;
	background:#fff;
	margin:0 0 var(--bsp-s3,12px);
}

.bsp-figures__cell{
	flex:1 1 130px;
	padding:var(--bsp-s3,12px) var(--bsp-s4,16px);
	border-right:1px solid #e5e7eb;
}
.bsp-figures__cell:last-child{border-right:0}

.bsp-figures__key{
	margin:0 0 2px;
	font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
	color:#6b7280;
}

.bsp-figures__value{
	margin:0;
	font-size:22px;font-weight:700;line-height:1.1;
	font-variant-numeric:tabular-nums;
}

@media (max-width:520px){
	.bsp-figures__cell{flex:1 1 50%;border-bottom:1px solid #e5e7eb}
	.bsp-figures__cell:nth-child(even){border-right:0}
	.bsp-figures__value{font-size:19px}
}

/* ------------------------------------------------ En direct */

.bsp-arch__live{margin:0 0 var(--bsp-s5,24px)}

.bsp-arch__livehead{
	display:flex;align-items:center;gap:var(--bsp-s2,8px);
	margin:0;
	padding:var(--bsp-s2,8px) var(--bsp-s4,16px);
	background:#b91c1c;color:#fff;
	font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
}

.bsp-arch__livehead i{
	flex:none;
	width:7px;height:7px;border-radius:99px;background:#fff;
	animation:bsp-blink 1.6s infinite;
}

@keyframes bsp-blink{0%,100%{opacity:1}50%{opacity:.35}}

@media (prefers-reduced-motion:reduce){
	.bsp-arch__livehead i{animation:none}
}

/* La liste se colle a son bandeau, comme partout ailleurs. */
.bsp-arch__live .bsp-list{margin:0}

/* ------------------------------------------------ Classements cote a cote */

.bsp-arch__tables{
	display:grid;
	gap:var(--bsp-s4,16px);
}

@media (min-width:900px){
	.bsp-arch__tables{grid-template-columns:repeat(2,minmax(0,1fr))}
}

.bsp-arch__table{
	border:1px solid #e5e7eb;
	background:#fff;
	container-type:inline-size;
	width:100%;
}

.bsp-arch__tablehead{
	display:flex;align-items:center;justify-content:space-between;
	gap:var(--bsp-s3,12px);
	margin:0;
	padding:var(--bsp-s2,8px) var(--bsp-s3,12px);
	background:#1e293b;color:#fff;
	font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
}

.bsp-arch__tablehead a{
	font-size:10px;font-weight:700;
	color:#cbd5e1;text-decoration:none;
	white-space:nowrap;
}
.bsp-arch__tablehead a:hover{color:#fff}

/* Le tableau remplit son cadre sans marge propre. */
.bsp-arch__table .bsp-table{margin:0}
.bsp-arch__table .bsp-table tr:last-child td{border-bottom:0}

/* ------------------------------------------------ Listes de la page */

.bsp-arch__block .bsp-list{margin:0}
.bsp-arch__block .bsp-links__body{border-bottom:1px solid #e5e7eb}


/* ==========================================================================
   Deux colonnes dans les gabarits du plugin
   ==========================================================================

   Les modeles Elementor portaient une colonne de droite, les gabarits non :
   une page servie sans modele affecte perdait la carte du bookmaker, le pari
   en un clic, le combine et le classement lateral. Meme trame, memes blocs,
   meme charte que dans les modeles : la page ne change pas d allure selon la
   maniere dont elle est rendue. */

.bsp-shell{
	display: grid;
	grid-template-columns: minmax(0, 1fr) 328px;
	align-items: start;
	gap: 24px;
}

/* La colonne principale ne doit jamais pousser la laterale hors de l ecran :
   un tableau de classement large debordait et cassait la mise en page. */
.bsp-shell__main{ min-width: 0; }

.bsp-shell__side{
	min-width: 0;
	align-self: stretch;
	display: flex;
	flex-direction: column;
	gap: 12px;
	/* La colonne ne defile plus a l interieur d elle-meme.
	   ---------------------------------------------------

	   Elle etait collante avec une hauteur bornee a celle de l ecran et un
	   defilement propre : des que ses blocs depassaient cette hauteur, tout ce
	   qui suivait etait coupe. Sur la capture, la carte du bookmaker, le bloc de
	   pari et le combine sortaient tous les trois tronques en plein milieu.

	   Le suivi du defilement est desormais assure par le dernier bloc seul, plus
	   bas : la colonne entiere reste lisible, et quelque chose accompagne
	   toujours la lecture. */
	scrollbar-width: thin;
}

/* Les blocs de la colonne portent deja leur habillage : ici on ne regle que
   l espacement, jamais les couleurs. */
.bsp-shell__side > *{ margin: 0 !important; }
.bsp-shell__side .bsp-list__title{ margin: 0 0 8px !important; font-size: 15px; }
.bsp-shell__side .bsp-table{ font-size: 12.5px; }

/* Le dernier bloc de la colonne accompagne le defilement. Lui seul : un bloc
   isole tient dans l ecran, et rien n est donc jamais coupe. */
@media (min-width: 1025px){

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

/* Deux colonnes demandent un peu plus de largeur qu une seule. */
.bsp-single:has(.bsp-shell){ max-width: 1240px; }

@media (max-width: 1024px){

	/* Sous mille pixels la colonne passe dessous : cote a cote, la laterale
	   tombait a moins de deux cents pixels et les cotes se chevauchaient. */
	.bsp-shell{ grid-template-columns: minmax(0, 1fr); }
	.bsp-shell__side,
	.bsp-shell__side > *:last-child{ position: static; top: auto; }
}

/* La page affichee du fil d Ariane, toujours en noir.
   Sur les sections sombres, la couleur du theme la rendait blanche, donc
   illisible sur un fond clair et invisible sur un fond fonce. */
.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: #111827 !important;
	font-weight: 600;
}

/* ==========================================================================
   Les cartes de discipline du sommaire
   ==========================================================================

   Le sommaire alignait quinze cartes de texte : rien ne distinguait le tennis
   du cricket avant d avoir lu. Chaque carte porte desormais son pictogramme au
   trait, dessine dans le plugin, sans police d icones ni fichier a charger. */

.bsp-sport-card__pict{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto 2px;
	border: 1px solid #e5e7eb;
	border-radius: 50%;
	color: #12305A;
	transition: border-color 160ms ease, color 160ms ease, background-color 160ms ease;
}

.bsp-sport-card__pict .bsp-pict{ display: block; }

/* Au survol, le pictogramme passe en ambre : c est le seul aplat de couleur de
   la carte, et il suffit a designer celle que l on va ouvrir. */
.bsp-sport-card:hover .bsp-sport-card__pict{
	border-color: #F0B429;
	background-color: #FFF7E6;
	color: #12305A;
}

/* Les traces restent fins a toutes les tailles : un pictogramme au trait
   epaissi par une mise a l echelle redevient un pictogramme plein. */
.bsp-pict{ vector-effect: non-scaling-stroke; }

@media (max-width: 640px){
	.bsp-sport-card__pict{ width: 46px; height: 46px; }
	.bsp-sport-card__pict .bsp-pict{ width: 28px; height: 28px; }
}

/* ==========================================================================
   Les rencontres de la colonne laterale
   ==========================================================================

   La colonne fait trois cent vingt pixels : la ligne large y entrait de force,
   les noms d equipe se tronquaient jusqu a disparaitre et il ne restait que
   deux ecussons de dix-sept pixels. La date passe donc sur sa propre ligne, et
   les deux camps se lisent dessous, ecussons a taille utile. */

.bsp-shell__side .bsp-row{
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 6px 8px;
	padding: 10px 12px;
}

.bsp-shell__side .bsp-row__date{
	grid-column: 1 / -1;
	font-size: 12px;
	font-weight: 600;
	color: #5B6B85;
}

.bsp-shell__side .bsp-row__team{ gap: 6px; }

/* Les noms reviennent : c est l information qui manquait le plus. */
.bsp-shell__side .bsp-row__team span{
	font-size: 13px;
	font-weight: 700;
	color: #16202E;
}

/* Ecussons a vingt-huit pixels, comme sur une ligne complete. */
.bsp-shell__side .bsp-row .bsp-logo,
.bsp-shell__side .bsp-row .bsp-row__team img{
	width: 28px !important;
	height: 28px !important;
	min-width: 28px;
}

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

.bsp-shell__side .bsp-row__score{ font-size: 12px; color: #5B6B85; }

/* ==========================================================================
   Le texte de fond du sommaire des disciplines
   ==========================================================================

   Il ferme la page, apres les cartes : c est du contenu de lecture, pas un
   bloc de conversion. Mesure de ligne limitee, intertitres en bleu de charte,
   aucune couleur d accent : ce qui doit attirer l oeil sur cette page, ce sont
   les quinze cartes au-dessus. */

.bsp-hub-seo{ max-width: 78ch; }

.bsp-hub-seo__h3{
	margin: 22px 0 8px;
	color: #12305A;
	font-size: 16.5px;
	font-weight: 700;
	line-height: 1.3;
}

.bsp-hub-seo p{
	margin: 0 0 12px;
	color: #374151;
	font-size: 15px;
	line-height: 1.65;
}

/* Les disciplines citees dans le texte restent des liens lisibles : souligne
   discret, jamais la couleur des boutons de pari. */
.bsp-hub-seo a{
	color: #12305A;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
}
.bsp-hub-seo a:hover{ color: #0C2143; }