/*
Theme Name: Football Tunisien
Description: Thème sur mesure pour footballtunisien.com. Le direct en tête, l'éditorial en dessous.
Author: Football Tunisien
Version: 1.1.2
Requires PHP: 8.0
Text Domain: ft
*/

/* ------------------------------------------------------------------
   1. Tokens — surface sombre, accent doré, rouge réservé au direct
------------------------------------------------------------------ */

:root {
	--fond:       #0D1420;  /* page */
	--panneau:    #121C2A;  /* bandes et sections */
	--carte:      #18232F;  /* cartes et lignes de tableau */
	--carte-haut: #1E2B3A;  /* survol */
	--bord:       #24313F;

	--texte:      #E7ECF3;
	--attenue:    #93A0B2;
	--faible:     #66748A;

	--or:         #E8B24C;  /* accent principal */
	--or-sombre:  #B98A2E;
	--rouge:      #E2453E;  /* réservé au direct */
	--vert:       #4ADE80;

	--corps: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
	         "Helvetica Neue", Arial, sans-serif;

	/* Titres. Ces quatre variables sont réécrites par inc/polices.php selon
	   la famille servie ; les valeurs ci-dessous ne sont qu'un repli. */
	--display: var(--corps);
	--display-graisse: 700;
	--display-espace: -.02em;
	--display-hauteur: 1.1;

	--largeur: 1120px;
	--gouttiere: 18px;
	--rayon: 10px;
	--h-bandeau: 156px;

	/* Hauteur réservée à l'ancre publicitaire AdSense. Mise à jour par le
	   script quand l'annonce apparaît, nulle le reste du temps. */
	--h-ancre: 0px;
}

@media (min-width: 900px) {
	:root { --gouttiere: 28px; --h-bandeau: 164px; }
}

/* ------------------------------------------------------------------
   2. Base
------------------------------------------------------------------ */

/* Barres de défilement.

   Celle du navigateur est claire et large par défaut : sur une interface
   sombre elle attire l'œil plus que le contenu, et la colonne de gauche en
   affichait une pleine hauteur. On la rend fine et discrète, tout en la
   laissant visible — c'est elle qui indique qu'il reste des entrées. */
* {
	scrollbar-width: thin;
	scrollbar-color: var(--bord) transparent;
}

*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
	background: var(--bord);
	border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: var(--faible); }
*::-webkit-scrollbar-corner { background: transparent; }

/* Tous les titres partagent le même réglage : famille, graisse, approche et
   interlignage viennent des variables, une seule chose à changer. */
h1, h2, h3,
.ft-logo__texte,
.ft-une__principal h2,
.ft-carte h3,
.ft-fil h3,
.ft-article h1,
.ft-article__corps h2,
.ft-joomsport__titre {
	font-family: var(--display);
	font-weight: var(--display-graisse);
	letter-spacing: var(--display-espace);
	line-height: var(--display-hauteur);
	text-wrap: balance;
}

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

html { -webkit-text-size-adjust: 100%; background: var(--fond); }

body {
	margin: 0;
	background: var(--fond);
	color: var(--texte);
	font-family: var(--corps);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

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

.ft-contenu {
	max-width: var(--largeur);
	margin: 0 auto;
	padding: 0 var(--gouttiere);
}

.ft-invisible {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.ft-passer {
	position: absolute; left: -9999px;
	background: var(--or); color: #10161F;
	padding: 12px 18px; z-index: 200; font-weight: 600;
}
.ft-passer:focus { left: 12px; top: 12px; }

/* ------------------------------------------------------------------
   3. Structure — colonne de navigation à gauche, contenu à droite
------------------------------------------------------------------ */

.ft-cadre { display: flex; align-items: flex-start; }

/* min-width:0 est indispensable : sans lui, un enfant en flex refuse de
   rétrécir sous sa largeur intrinsèque et les bandes horizontales du
   direct et des classements ne peuvent plus défiler. */
.ft-principal {
	flex: 1 1 auto;
	min-width: 0;
	padding-top: var(--h-ancre);
	transition: padding-top .15s;
}

.ft-flanc {
	display: flex;
	flex-direction: column;
	flex: 0 0 250px;
	width: 250px;
	background: var(--panneau);
	border-right: 1px solid var(--bord);
	position: sticky;
	top: 0;
	height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding-bottom: 24px;
	z-index: 60;
}
.admin-bar .ft-flanc { top: 32px; height: calc(100vh - 32px); }

.ft-flanc__titre--premier { margin-top: 12px; }

.ft-flanc__entete {
	display: flex; align-items: center; justify-content: space-between;
	padding: 18px 18px 14px;
	position: sticky; top: 0;
	background: var(--panneau);
	border-bottom: 1px solid var(--bord);
	z-index: 2;
}

/* La navigation occupe toute la hauteur pour que le bloc de pied puisse
   être repoussé en bas quand la place le permet. */
.ft-flanc__nav {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 0;
}

/* Rubriques éditoriales, en pied de colonne. */
.ft-flanc__liste--pied {
	margin-top: auto;
	padding-top: 14px;
	padding-bottom: 6px;
	border-top: 1px solid var(--bord);
}
.ft-flanc__liste--pied .ft-lien { color: var(--faible); font-size: 13.5px; }
.ft-flanc__liste--pied .ft-lien:hover { color: var(--texte); }
.ft-flanc__liste--pied .ft-lien.est-actif { color: var(--or); }

.ft-flanc__titre {
	margin: 16px 18px 6px;
	font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	color: var(--faible);
}

.ft-flanc__liste { list-style: none; margin: 0; padding: 4px 10px; }

.ft-lien {
	display: flex; align-items: center; gap: 10px;
	padding: 7px 10px; border-radius: 8px;
	text-decoration: none; color: var(--attenue);
	font-size: 14px; font-weight: 500;
	line-height: 1.25;
}
.ft-lien:hover { background: var(--carte); color: var(--texte); }
.ft-lien.est-actif { background: var(--carte); color: var(--or); font-weight: 600; }
.ft-lien span { min-width: 0; }

.ft-groupe { margin-top: 6px; }

.ft-groupe__bouton {
	display: flex; align-items: center; justify-content: space-between;
	width: calc(100% - 20px); margin: 0 10px;
	background: none; border: 0; cursor: pointer;
	padding: 8px 10px; border-radius: 8px;
	color: var(--faible);
	font: inherit; font-size: 11px; font-weight: 700;
	letter-spacing: .08em; text-transform: uppercase;
	text-align: left;
}
.ft-groupe__bouton:hover { color: var(--texte); }
.ft-groupe__bouton svg { transition: transform .15s; flex-shrink: 0; }
.ft-groupe__bouton[aria-expanded="true"] svg { transform: rotate(180deg); }

.ft-logo { display: flex; align-items: center; text-decoration: none; }
.ft-logo__img { height: 38px; width: auto; max-width: 168px; object-fit: contain; }
.ft-logo__texte { font-size: 22px; }

.ft-flanc__fermer { display: none; }

.ft-flanc__loupe { display: block; }
@media (max-width: 1079px) { .ft-flanc__loupe { display: none; } }

/* Barre supérieure : réduite au strict nécessaire, la navigation est à gauche. */
.ft-barre {
	display: flex; align-items: center; gap: 12px;
	height: 56px; padding: 0 var(--gouttiere);
	border-bottom: 1px solid var(--bord);
	background: var(--fond);
	position: relative; z-index: 40;
}

/* Sur ordinateur la barre n'existe pas : la navigation est dans la colonne
   de gauche et la loupe l'a rejointe.

   Ce n'est pas qu'une simplification. Les annonces automatiques AdSense
   choisissaient ce <header> comme emplacement (div.google-auto-placed) ;
   quand la barre était collante, la publicité héritait de ce comportement
   et restait plantée en haut de l'écran. Supprimer le conteneur règle le
   problème à la source, sans masquer aucune annonce servie — ce qui serait
   contraire aux règles AdSense. */
@media (min-width: 1080px) {
	.ft-barre { display: none; }
}

.ft-barre__loupe { margin-left: auto; }

.ft-logo--mobile { display: none; }

.ft-icone {
	background: none; border: 1px solid var(--bord); border-radius: 8px;
	padding: 9px; cursor: pointer; color: var(--attenue);
	line-height: 0; flex-shrink: 0;
}
.ft-icone:hover { color: var(--texte); border-color: var(--faible); }

.ft-recherche {
	border-bottom: 1px solid var(--bord);
	padding: 14px 0;
	background: var(--panneau);
}
.ft-recherche label { display: block; }
.ft-recherche input[type="search"] {
	width: 100%; font: inherit; color: var(--texte);
	padding: 12px 15px; border: 1px solid var(--bord);
	border-radius: var(--rayon); background: var(--carte);
}
.ft-recherche input[type="search"]::placeholder { color: var(--faible); }
.ft-recherche input[type="submit"] { display: none; }

.ft-voile {
	position: fixed; inset: 0; background: rgba(4,8,14,.66);
	z-index: 55; border: 0;
}

.ft-drapeau {
	width: 20px; height: 14px; object-fit: cover;
	border-radius: 2px; flex-shrink: 0;
}

/* --- Sous 1080 px : la colonne devient un tiroir --- */
@media (max-width: 1079px) {

	.ft-icone--menu { display: block; }
	.ft-logo--mobile { display: flex; }
	.ft-flanc__fermer { display: block; }
	.ft-flanc__entete { gap: 10px; }

	.ft-flanc {
		position: fixed; top: 0; left: 0; bottom: 0;
		height: 100dvh; width: 282px; flex-basis: 282px;
		transform: translateX(-100%);
		transition: transform .22s ease;
		box-shadow: 0 0 42px rgba(0,0,0,.5);
	}
	.admin-bar .ft-flanc { top: 46px; height: calc(100dvh - 46px); }

	.ft-flanc[data-ouvert="1"] { transform: none; }
}

@media (min-width: 1080px) {
	.ft-icone--menu { display: none; }
	.ft-voile { display: none !important; }
}

/* ------------------------------------------------------------------
   4. Bandeau du direct
------------------------------------------------------------------ */

.ft-bandeau {
	background: var(--panneau);
	border-bottom: 1px solid var(--bord);
	min-height: var(--h-bandeau);
	padding: 16px 0 18px;
	overflow: hidden;
}

.ft-bandeau__barre {
	display: flex; align-items: center; gap: 16px;
	margin: 0 auto 12px;
	padding: 0 var(--gouttiere);
	max-width: var(--largeur);
	flex-wrap: wrap;
}

.ft-bandeau__titre {
	font-size: 13px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--or); margin: 0;
}

.ft-dates { display: flex; align-items: center; gap: 4px; }

.ft-date-nav {
	background: var(--carte); border: 1px solid var(--bord);
	color: var(--attenue); border-radius: 7px;
	width: 28px; height: 28px; padding: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center;
}
.ft-date-nav:hover { color: var(--or); border-color: var(--faible); }

.ft-dates__jour {
	display: inline-flex; align-items: center; justify-content: center; gap: 7px;
	font: inherit; font-size: 13px; font-weight: 600;
	color: var(--texte); cursor: pointer;
	background: var(--carte); border: 1px solid var(--bord);
	border-radius: 7px; height: 28px; padding: 0 11px;
	min-width: 124px;
}
.ft-dates__jour:hover { border-color: var(--faible); color: var(--or); }
.ft-dates__jour svg { color: var(--faible); }
.ft-dates__jour:hover svg { color: var(--or); }

/* Le champ reste hors écran : c'est le bouton qui déclenche le calendrier
   natif. Il ne se montre que si showPicker() n'existe pas. */
.ft-dates__champ {
	position: absolute;
	width: 1px; height: 1px; opacity: 0; pointer-events: none;
	margin-left: -1px;
}
.ft-dates__champ.est-visible {
	position: static;
	width: auto; height: 28px; opacity: 1; pointer-events: auto;
	margin: 0; padding: 0 8px;
	font: inherit; font-size: 13px;
	color: var(--texte); background: var(--carte);
	border: 1px solid var(--or); border-radius: 7px;
}
.ft-dates__champ::-webkit-calendar-picker-indicator { filter: invert(1) opacity(.6); }

.ft-bandeau__tous {
	margin-left: auto; font-size: 13px; font-weight: 600;
	color: var(--or); text-decoration: none; white-space: nowrap;
}
.ft-bandeau__tous:hover { text-decoration: underline; }

.ft-bandeau__piste {
	display: flex; gap: 10px; overflow-x: auto;
	scroll-snap-type: x mandatory; scrollbar-width: none;
	padding: 0 var(--gouttiere) 4px;
	max-width: var(--largeur); margin-inline: auto;
}
.ft-bandeau__piste::-webkit-scrollbar { display: none; }

.ft-match {
	scroll-snap-align: start; flex: 0 0 auto;
	min-width: 218px;
	background: var(--carte);
	border: 1px solid var(--bord);
	border-left: 3px solid var(--bord);
	border-radius: var(--rayon);
	padding: 11px 14px;
	text-decoration: none; color: inherit; display: block;
	transition: background .12s, border-color .12s;
}
.ft-match:hover { background: var(--carte-haut); }
.ft-match--direct { border-left-color: var(--rouge); }

.ft-match__compet {
	font-size: 11px; color: var(--faible); margin-bottom: 8px;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ft-match__ligne {
	display: flex; align-items: center;
	gap: 9px; font-size: 15px; font-weight: 600; line-height: 1.5;
}

.ft-match__equipe {
	flex: 1 1 auto; min-width: 0;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ft-match__score {
	font-variant-numeric: tabular-nums;
	font-weight: 700; flex-shrink: 0; color: var(--texte);
}

.ft-match__etat {
	margin-top: 9px; font-size: 12px; color: var(--faible);
	font-variant-numeric: tabular-nums;
}
.ft-match--direct .ft-match__etat { color: var(--rouge); font-weight: 600; }

.ft-pastille {
	display: inline-block; width: 6px; height: 6px; border-radius: 50%;
	background: var(--rouge); margin-right: 7px; vertical-align: 1px;
	animation: ft-battement 2s ease-in-out infinite;
}

@keyframes ft-battement { 0%,100% { opacity: 1 } 50% { opacity: .3 } }
@media (prefers-reduced-motion: reduce) { .ft-pastille { animation: none } }

.ft-bandeau__vide {
	padding: 0 var(--gouttiere); max-width: var(--largeur);
	margin-inline: auto; color: var(--attenue); font-size: 15px;
}

/* Flèches de défilement : sur ordinateur il n'y a ni barre visible ni
   geste tactile, une bande horizontale paraît donc figée. */
.ft-defile { position: relative; }

.ft-fleche {
	position: absolute; top: 50%; transform: translateY(-50%);
	z-index: 3; width: 34px; height: 34px;
	display: none; align-items: center; justify-content: center;
	background: var(--carte-haut); color: var(--texte);
	border: 1px solid var(--bord); border-radius: 50%;
	cursor: pointer; padding: 0;
	box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.ft-fleche:hover { border-color: var(--or); color: var(--or); }
.ft-fleche[hidden] { display: none !important; }
.ft-fleche--avant { right: 4px; }
.ft-fleche--arriere { left: 4px; }

@media (min-width: 900px) and (pointer: fine) {
	.ft-defile:hover .ft-fleche:not([hidden]) { display: flex; }
}

/* ------------------------------------------------------------------
   5. Sections et une
------------------------------------------------------------------ */

.ft-section { padding: 34px 0; }

.ft-section__titre {
	font-size: 13px; font-weight: 700;
	letter-spacing: .06em; text-transform: uppercase;
	color: var(--or); margin: 0 0 20px;
}

.ft-une { display: grid; gap: 26px; }
@media (min-width: 900px) { .ft-une { grid-template-columns: 1.5fr 1fr; gap: 36px; } }

.ft-une__principal a { text-decoration: none; }

.ft-une__principal img {
	width: 100%; aspect-ratio: 16/9; object-fit: cover;
	border-radius: var(--rayon); margin-bottom: 16px;
}

.ft-une__principal h2 {
	font-size: clamp(29px, 4.4vw, 40px);
	margin: 0 0 12px;
}
.ft-une__principal a:hover h2 { color: var(--or); }

.ft-une__chapo { color: var(--attenue); margin: 0; max-width: 62ch; }

.ft-secondaires { display: grid; gap: 10px; align-content: start; }

.ft-carte {
	display: grid; grid-template-columns: 84px 1fr; gap: 14px;
	align-items: center;
	background: var(--carte); border: 1px solid var(--bord);
	border-radius: var(--rayon); padding: 11px;
	transition: background .12s;
}
.ft-carte:hover { background: var(--carte-haut); }

.ft-carte img { width: 84px; aspect-ratio: 4/3; object-fit: cover; border-radius: 6px; }

.ft-carte h3 { font-size: 16px; margin: 0; }
.ft-carte a { text-decoration: none; }

.ft-meta { font-size: 12px; color: var(--faible); margin-top: 6px; }
.ft-meta a { color: var(--attenue); }

/* ------------------------------------------------------------------
   6. Fil
------------------------------------------------------------------ */

.ft-fil { display: grid; gap: 2px; }

.ft-fil article {
	display: grid; grid-template-columns: 1fr; gap: 3px;
	padding: 13px 14px;
	background: var(--carte);
	border: 1px solid var(--bord);
	border-radius: var(--rayon);
	transition: background .12s;
}
.ft-fil article:hover { background: var(--carte-haut); }

@media (min-width: 700px) {
	.ft-fil article { grid-template-columns: 104px 1fr; gap: 18px; align-items: baseline; }
}

.ft-fil time {
	font-size: 12px; color: var(--faible);
	font-variant-numeric: tabular-nums;
}

.ft-fil h3 { font-size: 17px; margin: 0; }
.ft-fil a { text-decoration: none; }
.ft-fil a:hover { color: var(--or); }

/* ------------------------------------------------------------------
   7. Compétitions et classement
------------------------------------------------------------------ */

.ft-onglets {
	display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
	margin: 0 0 16px; padding-bottom: 2px;
}
.ft-onglets::-webkit-scrollbar { display: none; }

.ft-onglet {
	flex: 0 0 auto; cursor: pointer; white-space: nowrap;
	background: var(--carte); border: 1px solid var(--bord);
	border-radius: 999px; padding: 8px 15px;
	font: inherit; font-size: 14px; font-weight: 500; color: var(--attenue);
}
.ft-onglet:hover { color: var(--texte); border-color: var(--faible); }
.ft-onglet.est-actif {
	color: #10161F; background: var(--or); border-color: var(--or); font-weight: 600;
}

.ft-classement__zone {
	background: var(--carte);
	border: 1px solid var(--bord);
	border-radius: var(--rayon);
	overflow: hidden;
}
.ft-classement__zone[aria-busy="true"] { opacity: .4; }

.ft-classement { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }

.ft-classement th, .ft-classement td {
	padding: 11px 8px; text-align: center;
	border-bottom: 1px solid var(--bord); font-size: 14px;
}
.ft-classement tbody tr:last-child th,
.ft-classement tbody tr:last-child td { border-bottom: 0; }
.ft-classement tbody tr:hover { background: var(--carte-haut); }

.ft-classement thead th {
	font-size: 11px; font-weight: 600; letter-spacing: .05em;
	text-transform: uppercase; color: var(--faible);
	background: var(--panneau);
}
.ft-classement thead th abbr { text-decoration: none; }

.ft-classement__rang { width: 40px; color: var(--faible); font-weight: 500; }

/* Le sélecteur doit inclure l'élément : « .ft-classement th » l'emportait
   sur « .ft-classement__equipe » seule, d'où des noms de club centrés. */
.ft-classement th.ft-classement__equipe,
.ft-classement td.ft-classement__equipe {
	text-align: left;
	font-weight: 600;
	font-size: 15px;
	padding-left: 10px !important;
	width: 100%;
}
.ft-classement__equipe a {
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 10px;
}
.ft-classement__equipe a:hover { color: var(--or); }
.ft-classement thead th.ft-classement__equipe { font-size: 11px; }

.ft-classement__pts { font-weight: 700; color: var(--or); width: 52px; }

.ft-vide { color: var(--attenue); padding: 18px; margin: 0; }

@media (max-width: 620px) { .ft-cache-mobile { display: none; } }

/* Blasons de club. Les logos sont souvent sur fond blanc ou transparent :
   un léger fond clair les rend lisibles sur la surface sombre. */
.ft-blason {
	width: 22px; height: 22px;
	object-fit: contain;
	flex-shrink: 0;
	background: rgba(255,255,255,.9);
	border-radius: 4px;
	padding: 1px;
}
.ft-blason--vide {
	display: inline-block;
	background: var(--bord);
	border-radius: 4px;
}

/* ------------------------------------------------------------------
   8. Article
------------------------------------------------------------------ */

.ft-article { max-width: 730px; margin: 0 auto; padding: 34px 0 60px; }

.ft-article h1 {
	font-size: clamp(31px, 5.4vw, 46px);
	margin: 0 0 14px;
}

.ft-article__vignette {
	width: 100%; aspect-ratio: 16/9; object-fit: cover;
	border-radius: var(--rayon); margin: 18px 0 26px;
}

.ft-article__corps { font-size: 17px; color: #D3DCE7; }
.ft-article__corps > * + * { margin-top: 1.15em; }
.ft-article__corps p { max-width: 68ch; }
.ft-article__corps h2 {
	font-size: 26px; color: var(--texte); margin-top: 1.7em;
}
.ft-article__corps img { margin-inline: auto; border-radius: var(--rayon); }
.ft-article__corps a { color: var(--or); }
.ft-article__corps table { width: 100%; border-collapse: collapse; }
.ft-article__corps td, .ft-article__corps th {
	border-bottom: 1px solid var(--bord); padding: 8px;
}

/* Pagination */
.pagination, .nav-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 26px; }
.pagination .page-numbers, .nav-links .page-numbers {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 38px; height: 38px; padding: 0 11px;
	background: var(--carte); border: 1px solid var(--bord);
	border-radius: 8px; text-decoration: none;
	color: var(--attenue); font-size: 14px;
}
.pagination .current, .nav-links .current {
	background: var(--or); border-color: var(--or); color: #10161F; font-weight: 600;
}

/* ------------------------------------------------------------------
   9. Pied de page
------------------------------------------------------------------ */

.ft-pied {
	background: var(--panneau);
	border-top: 1px solid var(--bord);
	margin-top: 46px; padding: 30px 0; font-size: 14px;
	color: var(--attenue);
}
.ft-pied ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 20px; }
.ft-pied a { color: var(--attenue); text-decoration: none; }
.ft-pied a:hover { color: var(--or); }
.ft-pied__legal { margin: 16px 0 0; font-size: 12px; color: var(--faible); }

/* ------------------------------------------------------------------
   10. Pages JoomSport

   Le plugin rend ses propres gabarits et charge Bootstrap, dont les fonds
   sont clairs. Ses vues ne sont pas surchargeables depuis le thème : la
   constante JOOMSPORT_TEMPLATE est écrite en dur dans le plugin. On pose
   donc une couche sombre par-dessus. Le !important est ici assumé — il ne
   s'agit pas d'arbitrer entre nos propres règles, mais de reprendre la main
   sur une feuille tierce qu'on ne peut pas éditer.
------------------------------------------------------------------ */

.ft-joomsport { padding: 28px 0 56px; }

.ft-joomsport__titre {
	font-size: clamp(27px, 4.4vw, 39px);
	margin: 0 0 26px;
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.ft-joomsport__titre .ft-drapeau { width: 28px; height: 20px; }

/* Surfaces */
.ft-joomsport__corps,
.ft-joomsport__corps .panel,
.ft-joomsport__corps .well,
.ft-joomsport__corps .jsSeasonBlock { background: transparent !important; color: var(--texte); }

.ft-joomsport__corps table {
	width: 100%;
	background: transparent !important;
	border-collapse: collapse;
	color: var(--texte) !important;
	border: 1px solid var(--bord);
	border-radius: var(--rayon);
	overflow: hidden;
}

.ft-joomsport__corps table th,
.ft-joomsport__corps table td {
	background: transparent !important;
	border-color: var(--bord) !important;
	color: inherit !important;
	vertical-align: middle;
	padding: 10px 8px !important;
}

.ft-joomsport__corps thead th {
	background: var(--panneau) !important;
	color: var(--faible) !important;
	font-size: 11px;
	letter-spacing: .05em;
	text-transform: uppercase;
	font-weight: 600;
}

.ft-joomsport__corps tbody tr { background: var(--carte) !important; }
.ft-joomsport__corps tbody tr:hover { background: var(--carte-haut) !important; }

/* Liens et libellés */
.ft-joomsport__corps a { color: var(--texte) !important; text-decoration: none; }
.ft-joomsport__corps a:hover { color: var(--or) !important; }
.ft-joomsport__corps .jsLiveSeason,
.ft-joomsport__corps .jsSeasonName { color: var(--or) !important; font-weight: 600; }

/* Contrôles : boutons, onglets, listes déroulantes */
.ft-joomsport__corps .btn,
.ft-joomsport__corps button,
.ft-joomsport__corps input,
.ft-joomsport__corps select {
	background: var(--carte) !important;
	color: var(--texte) !important;
	border: 1px solid var(--bord) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	padding: 9px 14px !important;
	font: inherit !important;
}
.ft-joomsport__corps .btn:hover,
.ft-joomsport__corps button:hover { border-color: var(--faible) !important; color: var(--or) !important; }

.ft-joomsport__corps .nav-tabs { border-bottom: 1px solid var(--bord) !important; }
.ft-joomsport__corps .nav-tabs > li > a {
	background: transparent !important;
	border: 0 !important;
	border-bottom: 2px solid transparent !important;
	color: var(--attenue) !important;
	border-radius: 0 !important;
}
.ft-joomsport__corps .nav-tabs > li.active > a {
	color: var(--or) !important;
	border-bottom-color: var(--or) !important;
}

/* Emblèmes de club : lisibles sur fond sombre */
.ft-joomsport__corps .emblInline img,
.ft-joomsport__corps .jsTeamEmblem img,
.ft-joomsport__corps td img[src*="upload"] {
	background: rgba(255,255,255,.94);
	border-radius: 6px;
	padding: 3px;
}

/* Pastilles de forme (V, N, D) */
.ft-joomsport__corps .jsFormW,
.ft-joomsport__corps .jsFormD,
.ft-joomsport__corps .jsFormL { border-radius: 5px !important; font-weight: 700; }

/* --- Zones que JoomSport peint en clair -------------------------------

   Liste établie en relevant, dans joomsport.css, chaque règle posant un fond
   entre #eee et #fff. Chacune est ramenée aux couleurs du thème.
--------------------------------------------------------------------- */

.ft-joomsport__corps div.jstable-row:nth-child(2n-1),
.ft-joomsport__corps div.jstable-row:nth-child(2n),
.ft-joomsport__corps .seasonTable .table > tbody > tr:nth-child(odd),
.ft-joomsport__corps .jsBoxStatDIvFE tbody tr:nth-child(2n),
.ft-joomsport__corps .jsMatchDivMainMobile .jsMobileMatchCont,
.ft-joomsport__corps .jsClubTeams .jsTeam,
.ft-joomsport__corps .jsMatchHeader,
.ft-joomsport__corps .jsMatchStatTeams .jsMatchTeam,
.ft-joomsport__corps .jsTblMatchTab td,
.ft-joomsport__corps .jsTblMatchTab th,
.ft-joomsport__corps .jsplayerCartInner,
.ft-joomsport__corps div.photoDIV,
.ft-joomsport__corps #stab_overview table td {
	background: var(--carte) !important;
	color: var(--texte) !important;
	border-color: var(--bord) !important;
}

.ft-joomsport__corps div.jstable-row:nth-child(2n) { background: var(--panneau) !important; }
.ft-joomsport__corps div.jstable-row:hover { background: var(--carte-haut) !important; }

.ft-joomsport__corps div.jstable-row {
	border-bottom: 1px solid var(--bord) !important;
}

.ft-joomsport__corps .jsClubTeams a:hover > .jsTeam {
	background: var(--carte-haut) !important;
}

/* Le texte des lignes hérite parfois d'un gris pâle prévu pour fond blanc. */
.ft-joomsport__corps .jstable-row,
.ft-joomsport__corps .jstable-row *,
.ft-joomsport__corps .jsMatchDate,
.ft-joomsport__corps .jsHomeTeam,
.ft-joomsport__corps .jsAwayTeam,
.ft-joomsport__corps .jsMatchPlace { color: var(--texte) !important; }

.ft-joomsport__corps .jsMatchDate { color: var(--attenue) !important; font-variant-numeric: tabular-nums; }

/* Champs de formulaire : listes déroulantes de journée, recherche, dates */
.ft-joomsport__corps .form-control,
.ft-joomsport__corps .jsdatefield,
.ft-joomsport__corps .srcDate,
.ft-joomsport__corps .srcDay,
.ft-joomsport__corps .srcTeam,
.ft-joomsport__corps .select2,
.ft-joomsport__corps .select2-selection,
.ft-joomsport__corps .select2-selection__rendered,
.ft-joomsport__corps input[type="text"],
.ft-joomsport__corps textarea {
	background: var(--carte) !important;
	color: var(--texte) !important;
	border: 1px solid var(--bord) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
}
.ft-joomsport__corps .select2-selection__arrow b { border-top-color: var(--attenue) !important; }
.ft-joomsport__corps .select2-dropdown,
.ft-joomsport__corps .select2-results__option {
	background: var(--panneau) !important;
	color: var(--texte) !important;
	border-color: var(--bord) !important;
}
.ft-joomsport__corps .select2-results__option--highlighted {
	background: var(--or) !important; color: #10161F !important;
}

/* Pagination et navigation de journée */
.ft-joomsport__corps .paginationJS span,
.ft-joomsport__corps .jscalMdayNav a,
.ft-joomsport__corps .jscalMdayPrev,
.ft-joomsport__corps .jscalMdayNext {
	background: var(--carte) !important;
	color: var(--attenue) !important;
	border: 1px solid var(--bord) !important;
	border-radius: 8px !important;
	padding: 8px 14px !important;
	text-decoration: none;
}
.ft-joomsport__corps .jscalMdayNav a:hover { color: var(--or) !important; }

/* Nom de journée */
.ft-joomsport__corps .jsCalByMd,
.ft-joomsport__corps .jsMdayName {
	color: var(--or) !important;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	font-size: 13px;
}

/* Minute de jeu : le plugin la peint en rouge vif sur fond clair. */
.ft-joomsport__corps .jsMatchPlayedStatus,
.ft-joomsport__corps .jscalendarLive {
	background: rgba(226,69,62,.16) !important;
	color: var(--rouge) !important;
	border: 1px solid rgba(226,69,62,.4) !important;
	border-radius: 6px !important;
	font-weight: 700;
	padding: 2px 7px !important;
}

.ft-joomsport__corps .jsMatchPlayedScore {
	color: var(--texte) !important;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

/* Infobulles */
.ft-joomsport__corps .tooltip,
.single-joomsport_season .tooltip .tooltip-inner {
	background: var(--panneau) !important;
	color: var(--texte) !important;
	border: 1px solid var(--bord) !important;
}

/* ------------------------------------------------------------------
   11. Publicités

   Un bloc positionné en fixe recouvre la page et ne défile pas : c'est ce
   que produisent l'option « Sticky » d'Ad Inserter et les ancres AdSense.
   On les ramène dans le flux normal. Le !important est nécessaire car ces
   positions sont écrites en style en ligne par le script publicitaire.

   Ceci est un garde-fou, pas la solution : le réglage se corrige dans
   Ad Inserter (onglet Sticky du bloc) ou dans AdSense (Ancrages).
   Pour laisser un bloc collant, lui ajouter la classe ft-pub-libre.
------------------------------------------------------------------ */

.ft-principal [class*="code-block"]:not(.ft-pub-libre),
.ft-principal .ai-sticky:not(.ft-pub-libre),
.ft-principal .ai-viewports:not(.ft-pub-libre),
body > [class*="code-block"]:not(.ft-pub-libre),
body > .ai-sticky:not(.ft-pub-libre) {
	position: static !important;
	top: auto !important;
	right: auto !important;
	bottom: auto !important;
	left: auto !important;
	transform: none !important;
	z-index: auto !important;
	max-width: 100% !important;
}

/* Note : l'ancre publicitaire du site est posée par AdSense (div#google-anno-sa),
   pas par Ad Inserter. Elle se désactive dans la console AdSense, section
   Annonces automatiques → Annonces d'ancrage. On ne la contraint pas ici :
   modifier le rendu d'une annonce Google contrevient à ses règles de diffusion. */

/* Les blocs publicitaires respirent et restent centrés. */
.ft-principal [class*="code-block"]:not(.ft-pub-libre) {
	margin: 22px auto !important;
	text-align: center;
	overflow: hidden;
}

/* Aucune publicité ne dépasse de la colonne de contenu. */
.ft-principal ins.adsbygoogle { max-width: 100% !important; }

/* ------------------------------------------------------------------
   12. Module « Matchs en direct »

   Le widget jsLiveMatches a son propre balisage et sa propre feuille
   (mod_js_live_matches.css). Les règles générales ne l'atteignent pas :
   il faut viser ses identifiants, tous préfixés modJSLive.
------------------------------------------------------------------ */

.ft-joomsport__corps #joomsport-container.modJSLiveMatches { color: var(--texte); }

/* Barre de filtres : plus aérée, alignée à gauche. */
.ft-joomsport__corps .modJSLiveMatchesFilters { margin-bottom: 18px; }
.ft-joomsport__corps .modJSLiveFields > div { padding: 0 6px 10px 0 !important; }

.ft-joomsport__corps #modJSLiveMatchesFiltersSelect,
.ft-joomsport__corps .modJSLiveInputGroup .jsdatefield {
	background: var(--carte) !important;
	color: var(--texte) !important;
	border: 1px solid var(--bord) !important;
	border-radius: 8px !important;
	height: 40px !important;
	padding: 0 12px !important;
	box-shadow: none !important;
	font: inherit !important;
	text-align: left !important;
}

/* Les flèches de date reposent sur les glyphicons de Bootstrap 3, dont la
   police n'est pas chargée : les boutons apparaissaient vides. On dessine
   les chevrons en texte. */
.ft-joomsport__corps .modJSCalendarBtn {
	background: var(--carte) !important;
	border: 1px solid var(--bord) !important;
	color: var(--attenue) !important;
	border-radius: 8px !important;
	width: 40px !important; height: 40px !important;
	padding: 0 !important;
	font-size: 0 !important;
}
.ft-joomsport__corps .modJSCalendarBtn:hover { color: var(--or) !important; border-color: var(--faible) !important; }
.ft-joomsport__corps .modJSCalendarBtn .glyphicon { display: none !important; }
.ft-joomsport__corps #modJSLiveMatchesPrev::after { content: "\2039"; }
.ft-joomsport__corps #modJSLiveMatchesNext::after { content: "\203A"; }
.ft-joomsport__corps .modJSCalendarBtn::after {
	font-size: 22px; line-height: 1; color: inherit;
}

/* Onglets Tout / Favoris : le trait bleu de Bootstrap passe en doré. */
.ft-joomsport__corps .modJSLiveMatchesTabUL { border-bottom: 1px solid var(--bord) !important; }
.ft-joomsport__corps .modJSLiveMatchesTabUL li {
	color: var(--attenue) !important;
	font-weight: 500;
}
.ft-joomsport__corps .modJSLiveMatchesTabUL li.activeTab { color: var(--or) !important; font-weight: 600; }
.ft-joomsport__corps .modJSLiveMatchesTabUL li.activeTab:before {
	background: var(--or) !important;
	border-color: var(--or) !important;
}
.ft-joomsport__corps .modJSLiveMatchesTabUL li span {
	background: var(--carte) !important;
	color: var(--attenue) !important;
	border-radius: 999px;
	padding: 1px 8px;
	font-size: 12px;
}

/* En-tête de compétition. */
.ft-joomsport__corps #modJSLiveMatchesContainer table .jsLiveSeason {
	background: var(--panneau) !important;
	color: var(--or) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	letter-spacing: .03em;
	border-bottom: 1px solid var(--bord) !important;
}
.ft-joomsport__corps .imgSeasonLive { border-radius: 3px; }

/* Lignes de match : équipes face à face, heure à gauche, cœur à droite. */
.ft-joomsport__corps #modJSLiveMatchesContainer .table > tbody > tr > td {
	background: var(--carte) !important;
	border-color: var(--bord) !important;
	color: var(--texte) !important;
	vertical-align: middle !important;
	padding: 11px 10px !important;
}
.ft-joomsport__corps #modJSLiveMatchesContainer .table > tbody > tr:hover > td {
	background: var(--carte-haut) !important;
}

.ft-joomsport__corps .jsLiveTime {
	color: var(--attenue) !important;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	width: 76px;
}

.ft-joomsport__corps #modJSLiveMatchesContainer table .jsLiveTeam.jsLiveHome {
	text-align: right !important;
}
.ft-joomsport__corps .jsLiveAway { text-align: left !important; }

.ft-joomsport__corps .jsLiveTeam,
.ft-joomsport__corps .jsLiveTeam a { color: var(--texte) !important; font-weight: 600; }
.ft-joomsport__corps .jsLiveTeam a:hover { color: var(--or) !important; }

.ft-joomsport__corps #modJSLiveMatchesContainer table .jsLiveTeam > div {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
}
.ft-joomsport__corps .jsLiveHome > div { flex-direction: row-reverse; }

/* Blasons, si le shortcode les active (attribut emblems="1"). */
.ft-joomsport__corps .jsLiveTeamEmblem img,
.ft-joomsport__corps .jsLiveTeamEmblem {
	width: 24px; height: 24px;
	object-fit: contain;
	background: rgba(255,255,255,.9);
	border-radius: 4px;
	padding: 1px;
}

/* Score, ou séparateur pour les matchs à venir. */
.ft-joomsport__corps .jsLiveScore {
	font-weight: 700 !important;
	font-variant-numeric: tabular-nums;
	color: var(--texte) !important;
	white-space: nowrap;
	min-width: 62px;
}

.ft-joomsport__corps .jsLiveFavour .fa { color: var(--faible) !important; }
.ft-joomsport__corps .jsLiveFavour .fa:hover { color: var(--or) !important; }

/* Calendrier jQuery UI ouvert depuis le champ de date. */
.ui-datepicker {
	background: var(--panneau) !important;
	border: 1px solid var(--bord) !important;
	border-radius: 10px !important;
	color: var(--texte) !important;
	padding: 8px !important;
}
.ui-datepicker .ui-datepicker-header {
	background: transparent !important;
	border: 0 !important;
	color: var(--or) !important;
	font-weight: 700;
}
.ui-datepicker th { color: var(--faible) !important; }
.ui-datepicker td a, .ui-datepicker td span {
	background: var(--carte) !important;
	border: 1px solid var(--bord) !important;
	color: var(--texte) !important;
	text-align: center;
	border-radius: 5px !important;
}
.ui-datepicker td a:hover { border-color: var(--or) !important; color: var(--or) !important; }
.ui-datepicker .ui-state-active,
.ui-datepicker .ui-datepicker-current-day a {
	background: var(--or) !important;
	color: #10161F !important;
	border-color: var(--or) !important;
}

/* ------------------------------------------------------------------
   13. Page des matchs du jour (gabarits maison)
------------------------------------------------------------------ */

/* Conteneur pleine largeur, volontairement dépourvu des règles de
   typographie d'article : celles-ci coloraient tous les liens en doré et
   imposaient aux titres de compétition la taille des intertitres. */
.ft-large { padding: 26px 0 56px; }
.ft-large__corps { color: var(--texte); }
.ft-large__corps a { color: inherit; text-decoration: none; }

.ft-journee { margin-top: 8px; }

.ft-journee__barre {
	display: flex; align-items: center; gap: 18px;
	flex-wrap: wrap;
	margin-bottom: 22px;
}

.ft-onglets--filtres { margin: 0; flex: 1 1 auto; }

.ft-onglet__compte {
	display: inline-block;
	margin-left: 7px;
	min-width: 20px;
	padding: 1px 6px;
	border-radius: 999px;
	background: rgba(255,255,255,.09);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.ft-onglet.est-actif .ft-onglet__compte { background: rgba(0,0,0,.16); }

.ft-journee__liste[aria-busy="true"] { opacity: .45; }

/* --- Une compétition --- */

.ft-compet { margin-bottom: 24px; }

.ft-compet__titre {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 9px;
	margin: 0 0 8px !important;
	font-family: var(--corps);
	font-size: 13px !important;
	font-weight: 700;
	letter-spacing: .04em;
	line-height: 1.3;
	text-transform: uppercase;
	text-align: left;
	color: var(--or);
}
.ft-compet__titre a { text-decoration: none; }
.ft-compet__titre a:hover { text-decoration: underline; }

.ft-compet__matchs {
	background: var(--carte);
	border: 1px solid var(--bord);
	border-radius: var(--rayon);
	overflow: hidden;
}

/* --- Une rencontre ---

   Grille en cinq colonnes : état, domicile, score, extérieur, et une colonne
   souple de chaque côté pour que le score reste au centre optique quels que
   soient les noms de club. */
.ft-rencontre {
	display: grid;
	grid-template-columns: 74px 1fr 78px 1fr;
	align-items: center;
	gap: 12px;
	padding: 11px 14px;
	text-decoration: none;
	color: var(--texte);
	border-top: 1px solid var(--bord);
	transition: background .12s;
}
.ft-rencontre:first-child { border-top: 0; }
.ft-rencontre:hover { background: var(--carte-haut); }
.ft-rencontre.est-en-direct { box-shadow: inset 3px 0 0 var(--rouge); }

.ft-rencontre__etat {
	font-size: 12.5px;
	color: var(--faible);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
	min-height: 1em;
}
.ft-rencontre.est-en-direct .ft-rencontre__etat { color: var(--rouge); font-weight: 700; }

.ft-rencontre__equipe {
	display: flex; align-items: center; gap: 10px;
	min-width: 0;
	font-weight: 600; font-size: 15px;
	color: var(--texte);
}
.ft-rencontre:hover .ft-rencontre__equipe { color: var(--texte); }
.ft-rencontre__equipe--dom { justify-content: flex-end; text-align: right; }
.ft-rencontre__equipe--ext { justify-content: flex-start; text-align: left; }

.ft-rencontre__nom {
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ft-rencontre__score {
	text-align: center;
	font-weight: 700; font-size: 17px;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ft-rencontre__score i { color: var(--faible); font-style: normal; margin: 0 5px; }
.ft-rencontre__score.est-heure {
	font-size: 14px; font-weight: 600; color: var(--attenue);
}

/* Sur mobile la ligne se replie : les noms passent au-dessus du score. */
@media (max-width: 640px) {
	.ft-rencontre {
		grid-template-columns: 1fr 66px 1fr;
		gap: 8px;
		padding: 12px 12px;
	}
	.ft-rencontre__etat {
		grid-column: 1 / -1;
		font-size: 11.5px;
	}
	.ft-rencontre__equipe { font-size: 14px; gap: 8px; }
	.ft-rencontre__nom { font-size: 14px; }
	.ft-rencontre__score { font-size: 16px; }
	.ft-compet__matchs { border-radius: 8px; }
}

/* ------------------------------------------------------------------
   14. Confinement horizontal

   JoomSport rend ses pages avec la grille Bootstrap : les rangées portent
   des marges négatives et les conteneurs des largeurs fixes, calculées pour
   une page sans colonne latérale. Sur mobile, tout cela déborde et fait
   défiler la page de côté. On ramène ces éléments dans leurs limites.
------------------------------------------------------------------ */

.ft-cadre,
.ft-principal { max-width: 100%; overflow-x: clip; }

.ft-joomsport,
.ft-joomsport__corps,
.ft-large,
.ft-large__corps,
.ft-article__corps { max-width: 100%; overflow-wrap: break-word; }

/* Grille Bootstrap : marges négatives et largeurs fixes neutralisées. */
.ft-joomsport__corps .row { margin-left: 0 !important; margin-right: 0 !important; }

.ft-joomsport__corps .container,
.ft-joomsport__corps .container-fluid,
.ft-joomsport__corps #joomsport-container {
	width: auto !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

@media (max-width: 780px) {

	.ft-joomsport__corps [class*="col-"] {
		width: 100% !important;
		float: none !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}

	/* Un tableau large devient défilable dans son propre cadre plutôt que
	   d'élargir toute la page. */
	.ft-joomsport__corps .table-responsive,
	.ft-joomsport__corps .jsTableWrap {
		overflow-x: auto !important;
		-webkit-overflow-scrolling: touch;
		border: 0 !important;
		max-width: 100%;
	}

	.ft-joomsport__corps table {
		display: block;
		width: 100% !important;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		white-space: nowrap;
	}

	.ft-joomsport__corps table th,
	.ft-joomsport__corps table td { padding: 9px 7px !important; font-size: 13px !important; }

	/* Les emblèmes de club sont parfois dimensionnés en dur par le plugin. */
	.ft-joomsport__corps img {
		max-width: 100% !important;
		height: auto !important;
	}

	/* Les onglets de JoomSport défilent au lieu de se replier. */
	.ft-joomsport__corps .nav-tabs {
		display: flex !important;
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.ft-joomsport__corps .nav-tabs::-webkit-scrollbar { display: none; }
	.ft-joomsport__corps .nav-tabs > li { float: none !important; flex: 0 0 auto; }
}

/* ------------------------------------------------------------------
   15. Boutons de navigation JoomSport (Calendrier, Classements…)

   Deux défauts sur fond sombre. Bootstrap 3 applique aux boutons un
   text-shadow blanc prévu pour du texte foncé sur fond clair, d'où la frange
   laiteuse autour des libellés. Et les icônes viennent d'une planche de
   sprites en gris moyen, de 24 px, agrandie à l'affichage : elles paraissent
   floues et se distinguent mal.

   On remplace la planche par des tracés vectoriels appliqués en masque : la
   couleur devient celle du bouton, donc le survol fonctionne tout seul.
------------------------------------------------------------------ */

.ft-joomsport__corps .btn,
.ft-joomsport__corps .navbar-nav .btn,
.ft-joomsport__corps button,
.ft-joomsport__corps a.btn {
	text-shadow: none !important;
	background-image: none !important;
}

.ft-joomsport__corps .navbar-nav { display: flex; flex-wrap: wrap; gap: 8px; }
.ft-joomsport__corps .navbar-nav > li { float: none !important; list-style: none; }

.ft-joomsport__corps .navbar-nav .btn {
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	color: var(--attenue) !important;
	font-weight: 600;
}
.ft-joomsport__corps .navbar-nav .btn:hover { color: var(--or) !important; }

.ft-joomsport__corps .navbar-nav .btn i,
.ft-joomsport__corps .navbar-nav .btn:hover i {
	width: 20px !important;
	height: 20px !important;
	display: inline-block;
	flex-shrink: 0;
	background: currentColor !important;
	-webkit-mask: var(--ft-ico) center / 20px 20px no-repeat;
	        mask: var(--ft-ico) center / 20px 20px no-repeat;
}

/* Calendrier */
.ft-joomsport__corps .navbar-nav .btn i.js-calendr,
.ft-joomsport__corps .navbar-nav .btn i.date {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E");
}

/* Classements */
.ft-joomsport__corps .navbar-nav .btn i.js-stand,
.ft-joomsport__corps .navbar-nav .btn i.tableS {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h10M4 12h16M4 18h7'/%3E%3Ccircle cx='19' cy='6' r='1.4' fill='%23000' stroke='none'/%3E%3Ccircle cx='16' cy='18' r='1.4' fill='%23000' stroke='none'/%3E%3C/svg%3E");
}

/* Grille des confrontations */
.ft-joomsport__corps .navbar-nav .btn i.js-matrx {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Cpath d='M3 9h18M3 15h18M9 3v18M15 3v18'/%3E%3C/svg%3E");
}

/* Liste des joueurs */
.ft-joomsport__corps .navbar-nav .btn i.js-pllist {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='6' cy='7' r='2'/%3E%3Ccircle cx='6' cy='16' r='2'/%3E%3Cpath d='M11 7h9M11 16h9'/%3E%3C/svg%3E");
}

/* Étapes et tours */
.ft-joomsport__corps .navbar-nav .btn i.js-itlist {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11M4.5 6h.01M4.5 12h.01M4.5 18h.01'/%3E%3C/svg%3E");
}

/* Journée */
.ft-joomsport__corps .navbar-nav .btn i.js-match {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M9 15l2 2 4-4'/%3E%3C/svg%3E");
}

/* Équipe */
.ft-joomsport__corps .navbar-nav .btn i.js-team {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 3v6c0 4.4-3 8-7 9-4-1-7-4.6-7-9V6z'/%3E%3C/svg%3E");
}

/* Joueur */
.ft-joomsport__corps .navbar-nav .btn i.js-player {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='3.5'/%3E%3Cpath d='M5 20c0-3.9 3.1-6 7-6s7 2.1 7 6'/%3E%3C/svg%3E");
}

/* Rejoindre */
.ft-joomsport__corps .navbar-nav .btn i.js-join {
	--ft-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v8M8 12h8'/%3E%3C/svg%3E");
}

/* --- Contraste des boutons et des listes déroulantes ------------------ */

/* La couleur atténuée convient au texte secondaire, pas à des boutons de
   navigation : ils passent en couleur de texte pleine, icône dorée. */
.ft-joomsport__corps .navbar-nav .btn {
	color: var(--texte) !important;
	background: var(--carte) !important;
	border: 1px solid var(--bord) !important;
	padding: 10px 16px !important;
}
.ft-joomsport__corps .navbar-nav .btn:hover {
	color: var(--or) !important;
	border-color: var(--or) !important;
	background: var(--carte-haut) !important;
}

.ft-joomsport__corps .navbar-nav .btn i { color: var(--or); opacity: .9; }
.ft-joomsport__corps .navbar-nav .btn:hover i { opacity: 1; }

/* Le halo blanc de Bootstrap touche aussi les champs et les listes. */
.ft-joomsport__corps select,
.ft-joomsport__corps input,
.ft-joomsport__corps .form-control,
.ft-joomsport__corps .dropdown-toggle,
.ft-joomsport__corps .navbar-nav a { text-shadow: none !important; }

.ft-joomsport__corps select,
.ft-joomsport__corps .dropdown-toggle {
	color: var(--texte) !important;
	background: var(--carte) !important;
	border: 1px solid var(--bord) !important;
	background-image: none !important;
	box-shadow: none !important;
}

/* --- Ancrage sur #joomsport-container --------------------------------

   Les règles précédentes partent de mes classes de gabarit. Si le plugin
   rend un bloc hors de ce conteneur — ce qui arrive avec ses propres
   template_include — elles ne s'appliquent pas et le #333 de Bootstrap
   reprend la main, d'où des libellés presque noirs sur fond sombre.

   On repart donc de l'identifiant que JoomSport pose lui-même sur toutes
   ses sorties : il est toujours là, et sa spécificité tranche.
--------------------------------------------------------------------- */

#joomsport-container,
#joomsport-container p,
#joomsport-container div,
#joomsport-container span,
#joomsport-container li { color: var(--texte); }

#joomsport-container .btn,
#joomsport-container a.btn,
#joomsport-container .btn-default,
#joomsport-container .navbar-nav .btn,
#joomsport-container .navbar-nav > li > a {
	color: var(--texte) !important;
	background: var(--carte) !important;
	background-image: none !important;
	border: 1px solid var(--bord) !important;
	border-radius: 8px !important;
	text-shadow: none !important;
	box-shadow: none !important;
	padding: 10px 16px !important;
	display: inline-flex !important;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	text-decoration: none;
}

#joomsport-container .btn:hover,
#joomsport-container .btn:focus,
#joomsport-container .navbar-nav > li > a:hover {
	color: var(--or) !important;
	border-color: var(--or) !important;
	background: var(--carte-haut) !important;
}

#joomsport-container .navbar-nav .btn i { color: var(--or); }
#joomsport-container .navbar-nav .btn:hover i { color: var(--or); }

#joomsport-container select,
#joomsport-container .form-control,
#joomsport-container input,
#joomsport-container textarea {
	color: var(--texte) !important;
	background: var(--carte) !important;
	background-image: none !important;
	border: 1px solid var(--bord) !important;
	border-radius: 8px !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

#joomsport-container a { color: var(--texte); }
#joomsport-container a:hover { color: var(--or); }


/* --- Repère de comparaison des polices, visible des seuls administrateurs --- */
.ft-essai-police {
	position: fixed; bottom: 12px; right: 12px; z-index: 99998;
	background: rgba(10,16,26,.94);
	border: 1px solid var(--bord);
	color: var(--attenue);
	font: 500 12px/1.4 var(--corps);
	padding: 8px 13px; border-radius: 8px;
	box-shadow: 0 6px 22px rgba(0,0,0,.5);
}
.ft-essai-police strong { color: var(--or); }
.ft-essai-police a { color: var(--texte); text-decoration: none; }
.ft-essai-police a:hover { color: var(--or); text-decoration: underline; }