/*
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: 3.3.0
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-bloc__entete {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.ft-bloc__entete .ft-section__titre { margin: 0; }

/* Liste déroulante habillée : la flèche native est masquée et remplacée,
   sans quoi elle reste au style du système d'exploitation. */
.ft-choix { position: relative; display: inline-flex; align-items: center; }

.ft-choix__select {
	appearance: none;
	-webkit-appearance: none;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--texte);
	background: var(--carte);
	border: 1px solid var(--bord);
	border-radius: 999px;
	padding: 9px 38px 9px 16px;
	cursor: pointer;
	max-width: 100%;
}
.ft-choix__select:hover { border-color: var(--faible); }
.ft-choix__select:focus-visible { border-color: var(--or); }
.ft-choix__select option { background: var(--panneau); color: var(--texte); }

.ft-choix__fleche {
	position: absolute;
	right: 15px;
	pointer-events: none;
	color: var(--faible);
}
.ft-choix:hover .ft-choix__fleche { color: var(--or); }

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

   Pas de fond : le carré blanc que ça imposait se voyait plus que les logos
   eux-mêmes. À la place, un halo qui épouse la forme du blason — drop-shadow
   suit le canal alpha, contrairement à box-shadow qui dessinerait un carré.
   Il ne se remarque que sur les tracés foncés, qu'il sauve de l'invisibilité. */
.ft-blason {
	width: 22px; height: 22px;
	object-fit: contain;
	flex-shrink: 0;
	filter: drop-shadow(0 0 1.5px rgba(255,255,255,.45));
}
.ft-blason--vide {
	display: inline-block;
	background: var(--bord);
	border-radius: 50%;
	filter: none;
}

/* ------------------------------------------------------------------
   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 rendus par JoomSport : même traitement que nos blasons. */
.ft-joomsport__corps .emblInline img,
.ft-joomsport__corps .jsTeamEmblem img,
.ft-joomsport__corps td img[src*="upload"] {
	background: none;
	padding: 0;
	filter: drop-shadow(0 0 1.5px rgba(255,255,255,.45));
}

/* 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: none;
	padding: 0;
	filter: drop-shadow(0 0 1.5px rgba(255,255,255,.45));
}

/* 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 { max-width: 100%; }

/* Le rognage horizontal ne s'applique qu'au mobile, où il évite un
   défilement latéral. Sur ordinateur il découpait ce qui dépasse — et donc
   la barre de navigation de JoomSport, qui flotte à droite et déborde parce
   que sa grille Bootstrap est calculée pour une page sans colonne latérale.
   Les boutons Calendrier et Classements disparaissaient ainsi purement et
   simplement du cadre. */
.ft-principal { max-width: 100%; }

@media (max-width: 1079px) {
	.ft-principal { 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; }

/* --- Grand blason de la page club -------------------------------------

   Le conteneur div.photoDIV est peint en #efefef par le plugin, et bon
   nombre de logos ont eux-mêmes un fond blanc aplati dans le fichier. On
   ne peut pas retirer ces pixels par CSS : on assume donc une carte claire
   délibérée, où les logos transparents et les logos aplatis se ressemblent.
--------------------------------------------------------------------- */

/* La largeur est imposée à l'image elle-même : le conteneur suivait sa taille
   naturelle, et une contrainte posée sur lui restait sans effet. */
#joomsport-container div.photoDIV,
.ft-joomsport__corps div.photoDIV {
	background: #FFFFFF !important;
	border: 1px solid var(--bord) !important;
	border-radius: 10px !important;
	padding: 12px !important;
	margin: 0 20px 14px 0 !important;
	width: 168px !important;
	display: inline-block !important;
	vertical-align: top;
}

#joomsport-container div.photoDIV img,
.ft-joomsport__corps div.photoDIV img {
	width: 100% !important;
	height: auto !important;
	max-width: none !important;
	filter: none !important;
	background: none !important;
}

/* Le conteneur du plugin et sa grille tiennent dans la colonne de contenu,
   au lieu de garder les largeurs fixes de Bootstrap. La barre de navigation
   conserve son flottement — c'est lui qui place les boutons — mais son
   parent est refermé par un clearfix pour qu'elle ne s'échappe pas. */
#joomsport-container {
	width: 100% !important;
	max-width: 100% !important;
}

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

#joomsport-container .navbar,
#joomsport-container .navHeadFull {
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 0 14px !important;
}

#joomsport-container .navbar::after,
#joomsport-container .navHeadFull::after {
	content: "";
	display: table;
	clear: both;
}

/* Débordement des sélecteurs.

   La version précédente forçait float:none sur les conteneurs de navigation :
   ça réglait le débordement mais déplaçait les boutons Calendrier et
   Classements, dont le placement repose précisément sur ce flottement.
   On se contente donc de brider la largeur, et seulement sur mobile où le
   débordement se produisait. */
@media (max-width: 780px) {
	#joomsport-container select,
	#joomsport-container .select2,
	#joomsport-container .select2-container {
		max-width: 100% !important;
		min-width: 0 !important;
	}
}

/* Tableau d'informations du club : mêmes surfaces que le reste du thème. */
#joomsport-container .jsClubAbout table,
#joomsport-container .jsTeamAbout table { border-radius: 10px; overflow: hidden; }

#joomsport-container .jsClubAbout td:first-child,
#joomsport-container .jsTeamAbout td:first-child {
	color: var(--attenue) !important;
	font-weight: 600;
	white-space: nowrap;
}

/* --- Emblèmes dans les tableaux du plugin -----------------------------

   Toute décoration est retirée : fond, bordure, arrondi, marge intérieure.
   Seul le halo est conservé, qui épouse le contour du blason et sauve les
   tracés foncés. La carte du grand logo, sur la fiche club, est exclue —
   elle est délibérée.
--------------------------------------------------------------------- */

#joomsport-container table img,
#joomsport-container .emblInline,
#joomsport-container .emblInline img,
#joomsport-container .jsTeamEmblem,
#joomsport-container .jsTeamEmblem img,
#joomsport-container .jsDivLineEmbl,
#joomsport-container .jsDivLineEmbl img,
#joomsport-container .imgSeasonLive {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	filter: drop-shadow(0 0 1.5px rgba(255,255,255,.45));
}

/* La carte du grand blason garde son fond. */
#joomsport-container div.photoDIV,
#joomsport-container div.photoDIV img {
	filter: none !important;
}
#joomsport-container div.photoDIV {
	background: #FFFFFF !important;
	border: 1px solid var(--bord) !important;
	border-radius: 10px !important;
	padding: 12px !important;
}

/* --- La classe img-thumbnail de Bootstrap -----------------------------

   JoomSport ajoute img-thumbnail à chaque emblème (voir getEmblem dans
   js-helper-images.php). Cette classe de Bootstrap 3 pose fond blanc,
   bordure grise, arrondi et marge intérieure : c'est elle, et elle seule,
   qui dessinait le carré blanc derrière les logos.
--------------------------------------------------------------------- */

#joomsport-container .img-thumbnail,
.ft-joomsport__corps .img-thumbnail {
	background: none !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	filter: drop-shadow(0 0 1.5px rgba(255,255,255,.45));
}

/* Exception : le grand blason de la fiche club garde sa carte. */
#joomsport-container div.photoDIV .img-thumbnail {
	filter: none !important;
}

/* --- Noms de club selon la largeur d'écran ----------------------------

   Deux versions sont présentes dans le HTML : le nom complet et le nom
   moyen fourni par JoomSport (métadonnée _joomsport_team_personal). Sur
   écran étroit, « Étoile Sportive du Sahel » devient « Étoile du Sahel »,
   ce qui évite les troncatures au milieu du mot.
--------------------------------------------------------------------- */

.ft-nom-court { display: none; }
.ft-nom-long { display: inline; }

@media (max-width: 700px) {
	.ft-nom-court { display: inline; }
	.ft-nom-long { display: none; }
}

/* --- Boutons de lien -------------------------------------------------

   Un lien souligné se remarque peu au milieu d'une interface sombre. Les
   actions importantes — voir tous les scores, ouvrir la compétition —
   prennent donc la forme d'un bouton, avec une flèche qui indique qu'on
   quitte le bloc pour une autre page.
--------------------------------------------------------------------- */

.ft-bouton {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
	text-decoration: none;
	font-size: 13.5px;
	font-weight: 600;
	color: var(--texte);
	background: var(--carte);
	border: 1px solid var(--bord);
	border-radius: 999px;
	padding: 9px 16px;
	transition: border-color .12s, color .12s, background .12s;
}
.ft-bouton:hover {
	color: var(--or);
	border-color: var(--or);
	background: var(--carte-haut);
}
.ft-bouton svg { flex-shrink: 0; transition: transform .12s; }
.ft-bouton:hover svg { transform: translateX(2px); }

/* Variante pleine, pour l'action principale du bandeau du direct. */
.ft-bouton--or {
	background: var(--or);
	border-color: var(--or);
	color: #10161F;
}
.ft-bouton--or:hover {
	background: #F2C264;
	border-color: #F2C264;
	color: #10161F;
}

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

/* Le titre, la liste des compétitions et le bouton sur une même ligne. */
.ft-bloc__actions {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

@media (max-width: 620px) {
	.ft-bloc__entete { align-items: stretch; }
	.ft-bloc__actions { width: 100%; }
	.ft-choix, .ft-choix__select { flex: 1 1 auto; width: 100%; }
	.ft-bouton { flex: 1 1 auto; justify-content: center; }
}

/* --- Onglets et vues du bloc Compétitions ----------------------------- */

.ft-onglets--compet { margin: 0 0 14px; }

.ft-journee__nom {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--faible);
}

/* Buteurs et passeurs.

   La colonne du joueur ne prend plus toute la largeur : elle laissait un
   vide au milieu du tableau et repoussait le club contre le total. Les
   largeurs sont réparties et le club est aligné à gauche, comme le joueur. */
.ft-joueurs {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-variant-numeric: tabular-nums;
}

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

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

.ft-joueurs__rang {
	width: 44px;
	text-align: center !important;
	color: var(--faible);
}

.ft-joueurs th.ft-joueurs__nom,
.ft-joueurs td.ft-joueurs__nom {
	width: auto;
	font-weight: 600;
	padding-left: 4px;
}
.ft-joueurs__nom a {
	display: flex; align-items: center; gap: 9px;
	text-decoration: none; min-width: 0;
}
.ft-joueurs__nom a:hover { color: var(--or); }
.ft-joueurs__nom span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.ft-joueurs__club {
	width: 38%;
	color: var(--attenue);
	font-size: 13.5px;
}

/* La disposition souple est portée par un conteneur interne, jamais par le
   <td> : une cellule de tableau passée en display:flex cesse d'appartenir
   à la grille du tableau, et sa colonne ne s'aligne plus avec son en-tête. */
.ft-joueurs__clubbox {
	display: flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.ft-joueurs__club img { flex-shrink: 0; }

/* La classe est nommée, et non un « span » générique : un sélecteur
   générique ici l'emportait sur la règle qui masque le nom court, et les
   deux versions s'affichaient à la suite — « CS SfaxienClub Sfaxien ». */
.ft-joueurs__clubnom {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.ft-joueurs__total {
	width: 62px;
	text-align: right !important;
	padding-right: 14px !important;
	font-weight: 700;
	color: var(--or);
	font-size: 15px;
}

/* Sous 700 px la colonne club disparaît : le nom du joueur et son total
   suffisent, et le tableau reste lisible sans défilement latéral. */
@media (max-width: 700px) {
	.ft-joueurs__club { display: none; }
	.ft-joueurs__rang { width: 34px; }
	.ft-joueurs th, .ft-joueurs td { font-size: 13.5px; padding: 9px 6px; }
}

/* --- Écusson de compétition ------------------------------------------

   Toutes les compétitions n'ont pas de drapeau : les continentales — UEFA,
   CAF — portent un trophée. On sert alors le logo de la saison, et à défaut
   une pastille neutre, pour que l'alignement de la liste reste régulier.
--------------------------------------------------------------------- */

.ft-drapeau--logo {
	width: 20px;
	height: 20px;
	object-fit: contain;
	border-radius: 0;
	filter: drop-shadow(0 0 1.5px rgba(255,255,255,.45));
}

.ft-drapeau--trophee {
	width: 20px;
	height: 20px;
	border-radius: 0;
	background: var(--faible);
	-webkit-mask: var(--ft-trophee) center / 17px 17px no-repeat;
	        mask: var(--ft-trophee) center / 17px 17px no-repeat;
	--ft-trophee: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 4h10v5a5 5 0 0 1-10 0z'/%3E%3Cpath d='M7 5H4v2a3 3 0 0 0 3 3M17 5h3v2a3 3 0 0 1-3 3'/%3E%3Cpath d='M12 14v4M9 20h6'/%3E%3C/svg%3E");
}
.ft-lien:hover .ft-drapeau--trophee,
.ft-lien.est-actif .ft-drapeau--trophee { background: var(--or); }

/* Les libellés de compétition tiennent sur une ligne : la liste garde un
   rythme régulier même quand un nom dépasse. */
.ft-flanc__liste .ft-lien span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* --- Contrôles natifs en sombre --------------------------------------

   La liste déroulante d'un <select>, le calendrier d'un champ de date et
   les barres de défilement sont dessinés par le système, hors de portée
   du CSS. Déclarer le schéma de couleurs est le seul moyen d'obtenir des
   contrôles sombres, cohérents avec le reste.
--------------------------------------------------------------------- */

:root { color-scheme: dark; }

#joomsport-container select,
#joomsport-container input,
.ft-choix__select,
.ft-dates__champ { color-scheme: dark; }

/* --- Barre de navigation JoomSport : hauteur ajustée -----------------

   Bootstrap impose 50 px de hauteur minimale et 20 px de marge basse à
   sa barre, dont la moitié gauche est vide ici. D'où le grand blanc entre
   le titre et le tableau.
--------------------------------------------------------------------- */

#joomsport-container .navbar,
#joomsport-container .navbar-nav,
#joomsport-container .navHeadFull {
	min-height: 0 !important;
}

#joomsport-container .navbar { margin-bottom: 10px !important; }

#joomsport-container .navHeadFull + div,
#joomsport-container .navbar + div { margin-top: 0 !important; }

/* Le sélecteur de saison se rapproche des boutons auxquels il se rapporte. */
#joomsport-container .seasonSelectDiv,
#joomsport-container .jsSeasonSelect {
	margin: 0 0 12px !important;
}

/* --- Repère de comparaison des polices, discret ---------------------- */

.ft-essai-police {
	opacity: .35;
	transform: scale(.9);
	transform-origin: bottom right;
	transition: opacity .15s;
}
.ft-essai-police:hover { opacity: 1; }

/* --- Liste déroulante native : couleur des options --------------------

   Chrome n'applique le schéma sombre au contenu du menu que si les options
   portent elles-mêmes une couleur. Sans cette règle, la liste reste blanche
   alors que le champ fermé est sombre.
--------------------------------------------------------------------- */

select option,
#joomsport-container select option,
.ft-joomsport__corps select option {
	background-color: #121C2A;
	color: #E7ECF3;
}

/* --- En-tête de saison : blocs vides repliés -------------------------

   La vue rend une div de description et une div de champs supplémentaires,
   toutes deux vides sur la plupart des compétitions, mais qui conservent
   leurs marges de 15 px et creusent un vide sous le titre.
--------------------------------------------------------------------- */

#joomsport-container .seasonTable > .jsOverflowHidden,
.ft-joomsport__corps .seasonTable > .jsOverflowHidden {
	padding: 0 !important;
}

#joomsport-container .rmpadd,
#joomsport-container .extrafldcn,
#joomsport-container .pt10,
.ft-joomsport__corps .rmpadd,
.ft-joomsport__corps .extrafldcn,
.ft-joomsport__corps .pt10 {
	padding: 0 !important;
	margin: 0 !important;
}

#joomsport-container .seasonTable { padding-top: 0 !important; }

/* Le bloc de champs supplémentaires ne prend de la place que s'il en a. */
#joomsport-container .well,
.ft-joomsport__corps .well {
	background: var(--carte) !important;
	border: 1px solid var(--bord) !important;
	border-radius: var(--rayon) !important;
	color: var(--texte) !important;
	box-shadow: none !important;
}

/* --- Éléments non cliquables de la barre JoomSport --------------------

   L'état actif de la navigation et le libellé de saison ne sont pas des
   liens : mes règles, écrites pour .btn et a, ne les touchaient pas, et
   Bootstrap les laissait en #333 — invisibles sur fond sombre. Ils
   ressemblaient à un espace vide alors qu'ils portaient du texte.
--------------------------------------------------------------------- */

#joomsport-container .navbar,
#joomsport-container .navbar *:not(i):not(svg):not(path),
#joomsport-container .navHeadFull,
#joomsport-container .navHeadFull *:not(i):not(svg):not(path),
.ft-joomsport__corps .navbar *:not(i):not(svg):not(path) {
	color: var(--texte) !important;
}

/* L'entrée active de la navigation reste distinguée. */
#joomsport-container .navbar-nav > li.active > a,
#joomsport-container .navbar-nav > .active > .btn {
	color: var(--or) !important;
	border-color: var(--or) !important;
}

/* Le libellé de saison affiché à côté du sélecteur. */
#joomsport-container .jsSeasonName,
#joomsport-container .seasonName,
#joomsport-container label {
	color: var(--attenue) !important;
	font-weight: 600;
}

/* --- navbar navbar-default navbar-static-top --------------------------

   La barre de JoomSport est une navbar Bootstrap 3 standard. Ses valeurs
   par défaut — 50 px de hauteur minimale, 20 px de marge basse, le
   rembourrage de navbar-collapse, une bordure et un fond clair — creusent
   un vide sous le titre alors que la barre ne contient que deux boutons.
--------------------------------------------------------------------- */

#joomsport-container .navbar.navbar-default,
#joomsport-container .navbar-static-top,
.ft-joomsport__corps .navbar.navbar-default {
	min-height: 0 !important;
	height: auto !important;
	margin: 0 0 10px !important;
	padding: 0 !important;
	background: transparent !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

#joomsport-container .navbar-collapse,
#joomsport-container .navbar-header,
#joomsport-container .navbar-default .navbar-nav,
.ft-joomsport__corps .navbar-collapse {
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	box-shadow: none !important;
	min-height: 0 !important;
}

#joomsport-container .navbar-default .navbar-nav > li {
	margin: 0 !important;
	padding: 0 !important;
}

/* Le bloc qui suit la barre — sélecteur de saison — se rapproche d'elle. */
#joomsport-container .navbar + *,
.ft-joomsport__corps .navbar + * {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

/* --- En-tête de saison : une seule ligne ------------------------------

   La structure réelle du plugin :

     .page-content-js
       div > nav.navbar          → boutons Calendrier / Liste, alignés à droite
       div.heading.col-xs-12     → sélecteur de saison, aligné à droite
       div.jsClear
       div.seasonTable           → le tableau

   Deux bandes pleine largeur dont la moitié gauche est vide par
   construction : ce n'était pas de la marge en trop, mais deux lignes là
   où une suffit. On les place côte à côte.
--------------------------------------------------------------------- */

#joomsport-container .page-content-js {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 16px;
}

/* Tout occupe la largeur entière par défaut, et se place après la barre.

   L'ordre par défaut est volontairement lointain : sur la fiche club, le
   bloc de contenu ne porte pas la classe seasonTable et gardait donc
   l'ordre 0, ce qui le faisait passer devant la barre de navigation. */
#joomsport-container .page-content-js > * { width: 100%; order: 5; }

/* …sauf la barre de boutons et le bloc du sélecteur, qui se partagent une ligne. */
#joomsport-container .page-content-js > div:has(> nav.navbar) {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	order: 1;
}

#joomsport-container .heading {
	width: auto !important;
	flex: 0 0 auto;
	order: 2;
	padding: 0 !important;
	margin: 0 !important;
	float: none !important;
}

#joomsport-container .jsClear { display: none !important; }

#joomsport-container .seasonTable {
	order: 5;
	width: 100%;
	margin: 0 !important;
}

/* Repli pour les navigateurs sans :has() — les deux blocs restent empilés
   mais sans hauteur superflue. */
@supports not selector(:has(*)) {
	#joomsport-container .page-content-js { display: block; }
	#joomsport-container .heading { width: 100% !important; }
}

@media (max-width: 700px) {
	#joomsport-container .page-content-js { display: block; }
	#joomsport-container .heading { width: 100% !important; margin-top: 8px !important; }
}

/* --- Liste déroulante habillée ---------------------------------------

   Le <select> reste dans la page : il porte la valeur et les gestionnaires
   du plugin. Il est simplement rendu invisible, et notre bouton plus notre
   liste prennent sa place à l'écran.
--------------------------------------------------------------------- */

.ft-select { position: relative; display: inline-block; min-width: 0; }

/* Masqué à l'œil, mais toujours présent pour les scripts et les formulaires. */
.ft-select > select {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	border: 0 !important;
	opacity: 0 !important;
	pointer-events: none !important;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.ft-select__bouton {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	min-width: 150px;
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--texte);
	background: var(--carte);
	border: 1px solid var(--bord);
	border-radius: 8px;
	padding: 10px 14px;
	cursor: pointer;
	text-align: left;
}
.ft-select__bouton:hover { border-color: var(--faible); }
.ft-select.est-ouvert .ft-select__bouton { border-color: var(--or); }

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

.ft-select__fleche {
	flex-shrink: 0;
	width: 9px; height: 9px;
	border-right: 2px solid var(--faible);
	border-bottom: 2px solid var(--faible);
	transform: rotate(45deg) translate(-2px, -2px);
	transition: transform .15s;
}
.ft-select.est-ouvert .ft-select__fleche {
	border-color: var(--or);
	transform: rotate(225deg) translate(-3px, -3px);
}

.ft-select__liste {
	position: absolute;
	top: calc(100% + 5px);
	right: 0;
	z-index: 70;
	min-width: 100%;
	max-height: 300px;
	overflow-y: auto;
	margin: 0;
	padding: 5px;
	list-style: none;
	background: var(--panneau);
	border: 1px solid var(--bord);
	border-radius: 10px;
	box-shadow: 0 12px 34px rgba(0,0,0,.55);
}

.ft-select__item {
	padding: 9px 12px;
	border-radius: 6px;
	font-size: 14px;
	color: var(--attenue);
	cursor: pointer;
	white-space: nowrap;
}
.ft-select__item:hover { background: var(--carte-haut); color: var(--texte); }
.ft-select__item.est-choisi { background: var(--or); color: #10161F; font-weight: 600; }
.ft-select__item.est-desactive { opacity: .4; cursor: default; }
.ft-select__item.est-desactive:hover { background: none; color: var(--attenue); }

/* La liste habillée remplace l'ancien habillage du champ natif. */
.ft-choix__fleche { display: none; }

/* --- Fil : bouton de chargement --------------------------------------- */

.ft-fil__actions {
	margin: 20px 0 0;
	text-align: center;
}

.ft-fil__plus { cursor: pointer; font: inherit; font-size: 13.5px; font-weight: 600; }
.ft-fil__plus[disabled] { opacity: .6; cursor: default; }
.ft-fil__plus svg { transition: transform .12s; }
.ft-fil__plus:hover svg { transform: translateY(2px); }

.ft-fil__reste { display: none; }

/* Filet de sécurité : si Select2 ou Chosen se réinstallent après coup,
   leur composant reste masqué là où le nôtre est en place. */
#joomsport-container div:has(> .ft-select) .select2-container,
#joomsport-container div:has(> .ft-select) .chosen-container,
#joomsport-container .ft-select ~ .select2-container,
#joomsport-container .ft-select ~ .chosen-container {
	display: none !important;
}

/* ==================================================================
   17. Écriture droite-à-gauche

   CLOISONNEMENT : tout ce bloc est enfermé sous [dir="rtl"]. WordPress
   pose cet attribut sur <html> uniquement pour les langues concernées.
   Aucune de ces règles ne peut donc s'appliquer au site français, quelle
   que soit la manière dont on les modifie ensuite.
================================================================== */

[dir="rtl"] body { text-align: right; }

/* --- Colonne de navigation : elle passe à droite --- */

[dir="rtl"] .ft-flanc {
	border-right: 0;
	border-left: 1px solid var(--bord);
}
@media (max-width: 1079px) {
	[dir="rtl"] .ft-flanc {
		left: auto;
		right: 0;
		transform: translateX(100%);
	}
	[dir="rtl"] .ft-flanc[data-ouvert="1"] { transform: none; }
}

[dir="rtl"] .ft-flanc__titre,
[dir="rtl"] .ft-lien,
[dir="rtl"] .ft-groupe__bouton { text-align: right; }

[dir="rtl"] .ft-barre__loupe { margin-left: 0; margin-right: auto; }

/* --- Bandeau du direct et cartes de match --- */

[dir="rtl"] .ft-match { border-left: 1px solid var(--bord); border-right: 3px solid var(--bord); }
[dir="rtl"] .ft-match--direct { border-right-color: var(--rouge); border-left-color: var(--bord); }
[dir="rtl"] .ft-pastille { margin-right: 0; margin-left: 7px; }
[dir="rtl"] .ft-bandeau__tous { margin-left: 0; margin-right: auto; }

[dir="rtl"] .ft-rencontre.est-en-direct { box-shadow: inset -3px 0 0 var(--rouge); }
[dir="rtl"] .ft-rencontre__equipe--dom { justify-content: flex-start; text-align: left; }
[dir="rtl"] .ft-rencontre__equipe--ext { justify-content: flex-end; text-align: right; }

/* --- Flèches de défilement : elles échangent leur place --- */

[dir="rtl"] .ft-fleche--avant { right: auto; left: 4px; }
[dir="rtl"] .ft-fleche--arriere { left: auto; right: 4px; }
[dir="rtl"] .ft-fleche svg { transform: scaleX(-1); }
[dir="rtl"] .ft-bouton svg { transform: scaleX(-1); }
[dir="rtl"] .ft-bouton:hover svg { transform: scaleX(-1) translateX(2px); }

/* --- Tableaux --- */

[dir="rtl"] .ft-classement th.ft-classement__equipe,
[dir="rtl"] .ft-classement td.ft-classement__equipe {
	text-align: right;
	padding-left: 0 !important;
	padding-right: 10px !important;
}
[dir="rtl"] .ft-joueurs th,
[dir="rtl"] .ft-joueurs td { text-align: right; }
[dir="rtl"] .ft-joueurs__total {
	text-align: left !important;
	padding-right: 8px !important;
	padding-left: 14px !important;
}
[dir="rtl"] .ft-joueurs__club img { margin-right: 0; margin-left: 8px; }

/* --- Listes déroulantes habillées --- */

[dir="rtl"] .ft-select__liste { right: auto; left: 0; }
[dir="rtl"] .ft-select__bouton { text-align: right; }
[dir="rtl"] .ft-select__fleche { transform: rotate(45deg) translate(-2px, -2px); }

/* --- Article et pied de page --- */

[dir="rtl"] .ft-article__corps p,
[dir="rtl"] .ft-une__chapo { max-width: 62ch; }

[dir="rtl"] .ft-passer:focus { left: auto; right: 12px; }
[dir="rtl"] .ft-essai-police { right: auto; left: 12px; transform-origin: bottom left; }

/* --- Typographie arabe ---

   L'arabe n'a pas de capitales : la mise en majuscules des titres de
   section n'a aucun effet visuel mais casse parfois les ligatures. Et
   l'approche resserrée, pensée pour le latin, nuit à la lisibilité. */

[dir="rtl"] .ft-section__titre,
[dir="rtl"] .ft-compet__titre,
[dir="rtl"] .ft-bandeau__titre,
[dir="rtl"] .ft-flanc__titre,
[dir="rtl"] .ft-classement thead th,
[dir="rtl"] .ft-joueurs thead th,
[dir="rtl"] .ft-groupe__bouton {
	text-transform: none;
	letter-spacing: 0;
}

[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3 {
	letter-spacing: 0;
	line-height: 1.35;
}

/* Les chiffres restent en écriture latine dans les scores et tableaux :
   c'est l'usage dans la presse sportive arabophone du Maghreb. */
[dir="rtl"] .ft-match__score,
[dir="rtl"] .ft-rencontre__score,
[dir="rtl"] .ft-classement td,
[dir="rtl"] .ft-joueurs__total,
[dir="rtl"] .ft-fil time {
	direction: ltr;
	unicode-bidi: isolate;
}

/* --- Réseaux sociaux -------------------------------------------------- */

.ft-reseaux {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

.ft-reseau {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 8px;
	color: var(--attenue);
	background: var(--carte);
	border: 1px solid var(--bord);
	text-decoration: none;
	transition: color .12s, border-color .12s, background .12s;
}
.ft-reseau:hover {
	color: var(--texte);
	border-color: var(--faible);
	background: var(--carte-haut);
}

/* Couleur de marque au survol : discrète au repos, identifiable au contact. */
.ft-reseau--facebook:hover  { color: #1877F2; border-color: #1877F2; }
.ft-reseau--x:hover,
.ft-reseau--twitter:hover   { color: var(--texte); border-color: var(--texte); }
.ft-reseau--instagram:hover { color: #E1306C; border-color: #E1306C; }
.ft-reseau--youtube:hover   { color: #FF0000; border-color: #FF0000; }
.ft-reseau--tiktok:hover    { color: #25F4EE; border-color: #25F4EE; }
.ft-reseau--telegram:hover  { color: #229ED9; border-color: #229ED9; }
.ft-reseau--whatsapp:hover  { color: #25D366; border-color: #25D366; }
.ft-reseau--linkedin:hover  { color: #0A66C2; border-color: #0A66C2; }

/* Dans la colonne, sous les rubriques éditoriales. */
.ft-reseaux--flanc {
	padding: 12px 14px 4px;
	justify-content: flex-start;
}

/* En pied de page. */
.ft-reseaux--pied { margin-top: 16px; }