/*
 * Le Onze Lotois — design system « Terrain »
 * Port fidèle de la maquette, en variables/tokens (définis dans style.css :root),
 * mobile-first, focus clavier visible, prefers-reduced-motion respecté.
 *
 * Les couleurs et polices proviennent des variables --pitch, --flash, --font-title…
 * déclarées dans style.css.
 */

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

/* Le corps occupe au minimum la hauteur de l'écran et empile ses sections en
   colonne : le contenu principal absorbe l'espace restant (flex: 1), ce qui
   pousse le pied de page en bas même sur une page courte (404, club sans match),
   sans jamais le fixer par-dessus le contenu sur une page longue.
   `dvh` suit la hauteur réellement visible sur mobile, où les barres du
   navigateur se rétractent au défilement ; `vh` reste le repli. */
body {
	margin: 0;
	background: var(--soft);
	color: var(--ink);
	font-family: var(--font-body);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	min-height: 100dvh;
	display: flex;
	flex-direction: column;
}

/* Connecté, la barre d'administration décale la page de 32 px (28 px en mobile) :
   sans cette reprise, l'écran déborde d'autant. */
body.admin-bar { min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px); }
@media (max-width: 782px) {
	body.admin-bar { min-height: calc(100vh - 46px); min-height: calc(100dvh - 46px); }
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; height: auto; }

.wrap {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 22px;
}

/* Utilitaire titres condensés (Anton, MAJUSCULES). */
.disp {
	font-family: var(--font-title);
	font-weight: 400;
	text-transform: uppercase;
	letter-spacing: .005em;
}

/* Conteneur générique + garde-fou pour les gabarits GeneratePress par défaut
   (archives, recherche, 404) affichés dans #onze-main. */
/* `flex: 1 0 auto` : prend la place libre quand la page est courte, mais ne se
   compresse jamais quand elle est longue (le contenu dicte alors la hauteur). */
#onze-main { display: block; flex: 1 0 auto; }
#onze-main .content-area {
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 32px 22px;
}

/* Respiration en haut de page, générale à tous les gabarits (division, article,
   404...) — sauf l'accueil, où le hero doit rester collé au masthead (son propre
   padding interne joue déjà ce rôle). `.home` est ajoutée par WordPress uniquement
   sur la page d'accueil (body_class()). */
body:not(.home) #onze-main { padding-top: 44px; }

/* Lien d'évitement (a11y). */
.onze-skip {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--flash);
	color: #fff;
	padding: 10px 16px;
	font-weight: 800;
	z-index: 999;
}
.onze-skip:focus { left: 8px; top: 8px; }

/* ============================ Ticker ============================ */
.ticker { background: var(--ink); color: #fff; overflow: hidden; }
.ticker .wrap {
	display: flex;
	align-items: center;
	gap: 26px;
	height: 34px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
	overflow-x: auto;
	scrollbar-width: none;
}
.ticker .wrap::-webkit-scrollbar { display: none; }
.ticker b { color: var(--flash); font-weight: 800; letter-spacing: .03em; margin-right: 6px; }
.ticker .sc { color: #fff; }
.ticker .sc em { color: #9fb0a6; font-style: normal; }

/* ============================ Masthead ============================ */
/* L'en-tête est élevé au-dessus du contenu : les sous-menus en surcouche doivent
   passer devant le hero et les sections, quelles que soient leurs superpositions. */
.head { background: var(--pitch); color: #fff; position: relative; z-index: 50; }
.head .wrap {
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* Hauteur minimale, pas fixe : avec dix entrées, le menu ne tient plus sur une
	   ligne vers 1 366 px, et une hauteur fixe coupait les libellés repliés
	   (« Coupe de France féminine » sur trois lignes, 17 oct. 2026). Les entrées
	   restent entières (nowrap) et passent, au besoin, sur une seconde rangée. */
	min-height: 78px;
	/* Haut et bas seulement : « padding: 8px 0 » remettait à zéro les 22 px de
	   marge latérale de .wrap, et le logo et le bouton de menu touchaient les bords
	   de l'écran (17 oct. 2026). */
	padding-top: 8px;
	padding-bottom: 8px;
	position: relative;
}
.logo {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-title);
	font-size: 1.9rem;
	text-transform: uppercase;
	letter-spacing: .01em;
	color: #fff;
	line-height: 1;
}
.logo span { color: var(--flash); }
.logo-mark { width: 44px; height: 44px; flex-shrink: 0; display: block; }

.head .onze-nav { display: flex; }
.head .onze-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 2px 4px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.head .onze-menu a {
	display: block;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 9px 12px;
	border-radius: 6px;
	color: #dfeae3;
	white-space: nowrap;
}
/* Écrans de portable (881 à 1 280 px) : le menu se resserre pour tenir sur une
   rangée, ou deux rangées propres, sans jamais couper un libellé. */
@media (min-width: 881px) and (max-width: 1280px) {
	.head .onze-menu a,
	.sous-menu-bouton { font-size: 11.5px; letter-spacing: .03em; padding: 8px 9px; }
	.head .onze-menu { gap: 2px; }
	.logo { font-size: 1.6rem; }
}
.head .onze-menu a:hover { background: var(--pitch2); color: #fff; }

/* --- Sous-menus (Championnats, Coupes, Régional) --- */
.head .a-sous-menu { position: relative; }
.sous-menu-bouton {
	display: flex;
	align-items: center;
	gap: 5px;
	background: transparent;
	border: 0;
	cursor: pointer;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	padding: 9px 12px;
	border-radius: 6px;
	color: #dfeae3;
	white-space: nowrap;
	/* Supprime le délai de 300 ms et les gestes de zoom sur le bouton : l'appui est
	   traité immédiatement, sans risque de second événement mal placé. */
	touch-action: manipulation;
}
.sous-menu-bouton:hover { background: var(--pitch2); color: #fff; }
.sous-menu-bouton .chevron { font-size: 10px; transition: transform .15s ease; }
.sous-menu-bouton[aria-expanded="true"] { background: var(--pitch2); color: #fff; }
.sous-menu-bouton[aria-expanded="true"] .chevron { transform: rotate(180deg); }

/* Passerelle invisible entre le bouton et le panneau : sans elle, le moindre
   espace entre les deux interrompt le survol, et le sous-menu se referme avant
   qu'on ait pu atteindre un lien. */
.head .a-sous-menu::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 10px;
}

.head .sous-menu {
	display: none;
	position: absolute;
	top: calc(100% + 8px);
	left: 0;
	min-width: 190px;
	background: var(--pitch);
	border: 1px solid var(--pitch2);
	border-radius: 8px;
	padding: 6px;
	margin: 0;
	list-style: none;
	flex-direction: column;
	gap: 2px;
	z-index: 40;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .28);
}
/* Intertitre de sous-menu : il classe les entrées par échelon sans être
   cliquable. Un libellé vide donne un simple filet de séparation. */
.head .sous-menu-titre {
	padding: 8px 10px 4px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted, #8fa79a);
	pointer-events: none;
}
.head .sous-menu-titre:empty {
	padding: 0;
	margin: 5px 6px;
	border-top: 1px solid var(--pitch2);
}

/* Chaque condition d'ouverture a sa propre règle, volontairement.
   En CSS, un seul sélecteur invalide dans une liste séparée par des virgules
   annule TOUTE la règle : si un navigateur ne connaît pas :focus-within,
   l'ouverture au survol et au clic tomberait avec lui. */

/* L'ouverture au survol est réservée aux appareils qui survolent réellement.
   Sur un écran tactile, un appui active `:hover` et le laisse collé : une règle
   de survol y reste vraie en permanence et entre en conflit avec l'ouverture au
   clic. `hover: hover` écarte le problème à la source, plutôt que de le corriger
   ensuite par une contre-règle qui gagnerait la bataille de spécificité. */
@media (hover: hover) {
	.head .a-sous-menu:hover .sous-menu { display: flex; }
}
.head .sous-menu[data-open="true"] { display: flex; }
.head .a-sous-menu:focus-within .sous-menu { display: flex; }
.head .sous-menu a { white-space: nowrap; }
.head .onze-menu .current-menu-item > a,
.head .onze-menu .current_page_item > a,
.head .onze-menu a.on { background: var(--flash); color: #fff; }

.nav-toggle {
	display: none;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
}

/* ============================ Hero ============================ */
.hero {
	background: linear-gradient(160deg, var(--pitch), var(--pitch2));
	color: #fff;
	position: relative;
	overflow: hidden;
	/* Espace avec la section suivante — sur le composant lui-même (pas sur les
	   sections qui le suivent) pour que ça reste correct partout où .hero est
	   utilisé, quelle que soit la section qui vient après (sec ou sec--tight). */
	margin-bottom: 36px;
}
.hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(90deg, rgba(255,255,255,.04) 0 1px, transparent 1px 64px);
	pointer-events: none;
}
.hero .wrap {
	position: relative;
	padding: 40px 22px 46px;
	display: grid;
	grid-template-columns: 1.3fr 1fr;
	gap: 40px;
	align-items: center;
}
/* Bandeau d'accueil portant la vidéo de saison : une seule colonne, la vidéo
   occupant toute la largeur sous le texte. En deux colonnes elle tomberait à
   moins de 400 px, où une grille de quatorze écussons n'est plus lisible. */
.hero--video .wrap {
	grid-template-columns: 1fr;
	gap: 30px;
	align-items: start;
}
.hero--video .hero-lead { max-width: 62ch; }

.hero-video {
	margin: 0;
	border-radius: 14px;
	overflow: hidden;
	border: 1px solid rgba(255,255,255,.16);
	/* Même vert que le fond de la vidéo : aucun liseré ne se voit pendant le
	   chargement, ni sur les bords si le lecteur ajoute des bandes. */
	background: #08281d;
	box-shadow: 0 18px 44px rgba(0,0,0,.28);
}
.hero-video video {
	display: block;
	width: 100%;
	height: auto;
	/* Réserve la place avant le chargement : sans ratio, le reste de la page
	   remonte puis redescend au premier octet reçu. */
	aspect-ratio: 16 / 9;
	background: #08281d;
}
.hero-video figcaption {
	padding: 10px 14px 12px;
	font-size: 13px;
	color: #9fc4b2;
	border-top: 1px solid rgba(255,255,255,.1);
}

.htag {
	display: inline-block;
	background: var(--flash);
	color: #fff;
	font-weight: 800;
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .12em;
	padding: 6px 12px;
	border-radius: 5px;
	margin-bottom: 18px;
}
.htitle {
	font-family: var(--font-title);
	text-transform: uppercase;
	font-size: clamp(2.3rem, 5vw, 3.9rem);
	line-height: .96;
	letter-spacing: .004em;
	margin: 0 0 16px;
}
.htitle em { color: var(--flash); font-style: normal; }
.hsub { font-size: 15px; color: #d3e0d8; max-width: 46ch; margin: 0 0 22px; }
.hbtn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: #fff;
	color: var(--pitch);
	font-weight: 800;
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
	padding: 12px 20px;
	border-radius: 7px;
}
.hbtn:hover { background: var(--flash); color: #fff; }

.scorebox {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.16);
	border-radius: 14px;
	padding: 22px;
	backdrop-filter: blur(2px);
}
.scorebox .lbl {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #9fc4b2;
	text-align: center;
	margin-bottom: 16px;
}
.sbrow { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; }
.sbteam { text-align: center; }
.sbteam .cr {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,.14);
	margin: 0 auto 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-title);
	font-size: 1.1rem;
	overflow: hidden;
}
.sbteam .cr .crest {
	width: 100%;
	height: 100%;
	border: 0;
	background: #fff;
}
.sbteam .cr .crest--fallback { background: transparent; font-size: 1.1rem; }
.sbteam .nm { font-weight: 700; font-size: 13px; }
.sbscore { font-family: var(--font-title); font-size: 3.2rem; line-height: 1; }
.sbscore em { color: var(--flash); font-style: normal; }
.sbmeta {
	text-align: center;
	font-size: 11px;
	color: #9fc4b2;
	margin-top: 16px;
	letter-spacing: .04em;
	text-transform: uppercase;
}

/* ============================ Section scores ============================ */
.sec { padding: 44px 0; }
.sec--tight { padding-top: 0; }
.sechead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 22px; }
.sechead h2 { font-family: var(--font-title); text-transform: uppercase; font-size: 1.7rem; margin: 0; }
.sechead h2 span { color: var(--flash); }
/* Étiquette d'intersaison : elle situe des données qui ne sont plus d'actualité.
   Volontairement discrète — c'est une précision, pas une alerte, donc ni
   l'orange d'accent (réservé au direct et aux buts) ni la casse du titre. */
.sechead h2 .saison-tag {
	display: inline-block;
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: var(--muted);
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 3px 10px;
	margin-left: 6px;
	vertical-align: middle;
	white-space: nowrap;
}
@media (max-width: 600px) {
	/* Sur un écran étroit, l'étiquette passe sous le titre plutôt que de le
	   comprimer ou de déborder. */
	.sechead h2 .saison-tag { display: block; margin: 8px 0 0; }
}
.sechead .link {
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var(--pitch);
}
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }

.mc {
	display: block;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: 16px;
	transition: transform .12s, box-shadow .12s;
}
.mc:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(12,59,42,.1); }
.mc .div {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--flash);
	margin-bottom: 12px;
}
.mc .div-round { color: var(--muted); font-weight: 700; flex-shrink: 0; }
.mc .r {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 5px 0;
	font-size: 14px;
	font-weight: 600;
}
.mc .r.w { font-weight: 800; color: var(--pitch); }
.mc .r b { flex-shrink: 0; font-family: var(--font-title); font-weight: 400; font-size: 1.25rem; }

/* Écusson de club (logo CDN FFF, ou repli initiales) — carte-match, classement, hero. */
.team {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
}
.team-name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.crest {
	width: 22px;
	height: 22px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--line);
}
.crest--fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-title);
	font-size: 8px;
	letter-spacing: .02em;
	color: var(--muted);
	background: var(--soft);
}
.mc .ft {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

.onze-empty { color: var(--muted); font-size: 15px; }

/* ============================ Fiches club ============================ */
.club-head { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
/* Même traitement que l'écusson des cartes de match (.crest) : rond, fond blanc,
   filet léger — les logos de la FFF arrivent sur des fonds variés, le disque
   blanc les homogénéise. `contain` préserve les proportions de l'écusson. */
.club-logo {
	width: 88px;
	height: 88px;
	flex-shrink: 0;
	border-radius: 50%;
	object-fit: contain;
	background: #fff;
	border: 1px solid var(--line);
	padding: 6px;
}
.club-title { font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1; margin: 0 0 10px; }
/* Interlettrage horizontal plus large : sans le fond d'étiquette, deux divisions
   voisines se toucheraient presque. */
.club-divs { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-bottom: 10px; }
.club-divs .d {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	background: var(--soft);
	color: var(--muted);
	border-radius: 5px;
	padding: 4px 9px;
	text-decoration: none;
}
/* Une division reliée à sa page de compétition est un lien et doit se lire comme
   tel : couleur + soulignement. Le `span.d` (division sans page correspondante)
   n'est pas cliquable et garde, lui, l'étiquette neutre — la différence
   d'apparence dit exactement laquelle des deux mène quelque part. */
.club-divs a.d {
	background: none;
	padding: 0;
	color: var(--pitch);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	text-decoration-color: rgba(12, 59, 42, .4); /* --pitch atténué */
	transition: text-decoration-color .12s ease;
}
@media (hover: hover) {
	.club-divs a.d:hover { text-decoration-color: currentColor; }
}

/* `.div-intro` porte un `margin-top: -8px` pour se caler sous un `.sechead` de
   page de division. Ici elle suit l'en-tête du club, où ce rappel vers le haut
   la colle aux liens des réseaux : on rétablit une vraie respiration. */
.club-head + .div-intro { margin-top: 18px; }
.club-soustitre {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	margin: 0 0 10px;
}
.club-soustitre + .grid4 { margin-bottom: 18px; }

/* --- Sélecteur de journée (pages de division) --- */
/* Placée sous la grille de résultats : la marge la décolle des cartes, et un
   filet la rattache visuellement à la liste qu'elle commande. */
.journees {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 20px 0 0;
	padding-top: 16px;
	border-top: 1px solid var(--line);
}
.journees-liste {
	display: flex;
	gap: 6px;
	/* Vingt-deux journées ne tiennent pas sur une ligne de téléphone : la bande
	   défile latéralement plutôt que de se replier sur cinq rangs. */
	overflow-x: auto;
	scrollbar-width: thin;
	padding-bottom: 4px;
	scroll-snap-type: x proximity;
}
.journee-puce {
	flex: none;
	scroll-snap-align: center;
	min-width: 38px;
	padding: 6px 10px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	color: var(--muted);
	text-decoration: none;
	font-variant-numeric: tabular-nums;
	transition: border-color .12s ease, color .12s ease;
}
/* La journée affichée : contraste franc, pour qu'on repère sa position d'un
   coup d'œil dans une bande qui peut compter vingt-deux entrées. */
.journee-puce[aria-current="page"] {
	background: var(--pitch);
	border-color: var(--pitch);
	color: #fff;
}
.journee-nav {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	border-radius: 8px;
	background: #fff;
	color: var(--pitch);
	font-size: 15px;
	text-decoration: none;
}
@media (hover: hover) {
	.journee-puce:hover { border-color: var(--pitch); color: var(--pitch); }
	.journee-puce[aria-current="page"]:hover { color: #fff; }
	.journee-nav:hover { border-color: var(--pitch); }
}
/* --- Réseaux sociaux du club ---
   Le logo porte la couleur de sa marque ; la puce reste neutre pour ne pas la
   concurrencer. Colorer aussi le fond ferait deux aplats de bleu superposés côté
   Facebook, et le dégradé Instagram perdrait toute lisibilité. */
.club-liens { display: flex; flex-wrap: wrap; gap: 10px; }
.club-lien {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 6px 15px 6px 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	color: var(--ink);
	line-height: 1;
	transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.club-lien .ico { flex: none; display: block; }

@media (hover: hover) {
	.club-lien:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, .12); }
	.club-lien--facebook:hover  { border-color: #1877f2; }
	.club-lien--instagram:hover { border-color: #d6249f; }
	.club-lien--site:hover      { border-color: var(--pitch); }
}

/* ==================== Pagination d'une grille de matchs ==================== */
/* Le serveur rend toutes les cartes ; le script masque celles hors page. Sans
   JavaScript, aucune n'est masquée et la grille reste complète. */
.grid4 .mc[hidden] { display: none; }

.pagine-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-top: 16px;
}
.pagine-b {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 1px solid var(--line);
	border-radius: 10px;
	background: #fff;
	color: var(--pitch);
	font-size: 16px;
	cursor: pointer;
	font-family: inherit;
	touch-action: manipulation;
}
/* Un bouton inactif reste visible mais clairement hors service : le retirer
   ferait sauter la barre de pagination d'une page à l'autre. */
.pagine-b:disabled { opacity: .35; cursor: default; }
.pagine-etat {
	font-size: 13px;
	font-weight: 700;
	color: var(--muted);
	font-variant-numeric: tabular-nums;
	min-width: 52px;
	text-align: center;
}
@media (hover: hover) {
	.pagine-b:not(:disabled):hover { border-color: var(--pitch); }
}

/* ============================ Carte des clubs ============================ */
.carte-cadre {
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 16px;
	padding: 10px;
}
.carte { display: block; width: 100%; height: auto; }
.carte-departement {
	fill: #fff;
	stroke: var(--pitch);
	stroke-width: 2;
	stroke-linejoin: round;
}
/* Pastille sous l'écusson : les logos de la FFF arrivent sur des fonds variés et
   souvent transparents. Le disque blanc les décolle du fond de carte et les
   rend lisibles les uns à côté des autres. */
.carte-pastille {
	fill: #fff;
	stroke: var(--pitch);
	stroke-width: 1.5;
}
.carte-ecusson { pointer-events: none; }
.carte-initiales {
	font-family: var(--font-title);
	font-size: 11px;
	fill: var(--muted);
	pointer-events: none;
}
/* Au survol, le marqueur passe devant ses voisins : sans cela, un écusson
   agrandi resterait partiellement caché par celui dessiné après lui. */
.carte-point { cursor: pointer; }
.carte-point:hover,
.carte-point:focus-visible { outline: none; }
.carte-point:hover .carte-pastille,
.carte-point:focus-visible .carte-pastille {
	stroke: var(--flash);
	stroke-width: 3;
}
@media (hover: hover) {
	.carte-point:hover { transform: scale(1.25); transform-origin: center; transform-box: fill-box; }
}
@media (prefers-reduced-motion: reduce) {
	.carte-point:hover { transform: none; }
}
.stades td.l a { color: var(--pitch); font-weight: 700; }
.carte-source { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* ============================ Mon club ============================ */
.mon-club-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--flash);
	margin: 0 0 4px;
}
.mon-club-lien-div { margin-top: 12px; font-size: 14px; font-weight: 700; }
.mon-club-lien-div a { color: var(--pitch); }

/* Grille de choix : des cibles larges, parce qu'on la parcourt au doigt en
   cherchant un nom parmi quarante-et-un. */
.mon-club-choix {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 10px;
}
.mon-club-carte {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 12px;
	font-weight: 700;
	font-size: 14px;
	color: var(--ink);
	text-decoration: none;
}
.mon-club-carte img {
	width: 42px;
	height: 42px;
	flex: none;
	object-fit: contain;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--line);
}
@media (hover: hover) {
	.mon-club-carte:hover { border-color: var(--pitch); }
}
/* Le bouton « changer de club » emprunte l'habillage des liens de réseaux : même
   forme, mais c'est une action, d'où l'élément <button>. */
button.club-lien { cursor: pointer; font-family: inherit; }

/* Masqué à l'écran, restitué par les lecteurs d'écran. */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* --- Barre de filtres de l'annuaire --- */
.club-barre {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-bottom: 18px;
}
#club-q {
	flex: 1 1 220px;
	min-width: 0;
	padding: 10px 13px;
	border: 1px solid var(--line);
	border-radius: 8px;
	font: inherit;
	font-size: 14px;
	color: var(--ink);
	background: #fff;
}
.club-filtres { display: flex; flex-wrap: wrap; gap: 6px; }
.club-f {
	border: 1px solid var(--line);
	background: #fff;
	color: var(--muted);
	border-radius: 999px;
	padding: 8px 14px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .03em;
	cursor: pointer;
}
.club-f:hover { border-color: var(--pitch); color: var(--ink); }
.club-f[aria-pressed="true"] { background: var(--pitch); border-color: var(--pitch); color: #fff; }
a.club-f { text-decoration: none; }
/* --- Barre de filtres de /matchs/ ---
   Les trois rangées de puces flottaient l'une sous l'autre, sans rien qui dise
   à quoi chacune servait, et le menu déroulant des clubs était le contrôle brut
   du navigateur. Elles sont réunies dans un même panneau, chaque rangée sous son
   étiquette, et le choix masculin/féminin passe au-dessus : ce n'est pas un
   filtre de plus, c'est la liste qu'on regarde. */
.filtres {
	margin: 16px 0 6px;
	border: 1px solid var(--line);
	border-radius: 14px;
	background: #fff;
	overflow: hidden;
}
.filtres-onglets {
	display: flex;
	background: var(--soft);
	border-bottom: 1px solid var(--line);
}
.filtres-onglet {
	flex: 1 1 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	padding: 13px 16px;
	position: relative;
	text-decoration: none;
	color: var(--muted);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	transition: color .12s ease, background-color .12s ease;
}
.filtres-onglet + .filtres-onglet { border-left: 1px solid var(--line); }
.filtres-onglet:hover { color: var(--ink); }
.filtres-onglet[aria-current="page"] { background: #fff; color: var(--ink); }
/* Le trait orange est la marque de l'onglet actif dans toute l'identité du
   site ; il déborde d'un pixel pour couvrir la bordure du conteneur. */
.filtres-onglet[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 3px;
	background: var(--flash);
}
.filtres-onglet-nb {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(12, 59, 42, .09);
	color: var(--muted);
}
.filtres-onglet[aria-current="page"] .filtres-onglet-nb { background: var(--flash); color: #fff; }

.filtres-corps { display: grid; gap: 14px; padding: 16px 18px; }
.filtre-groupe { display: grid; gap: 8px; }
.filtre-eti {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
}

/* Le menu déroulant reprend la forme des puces qui le précèdent : même bordure,
   même rayon, même graisse. Le chevron est dessiné, pour ne dépendre ni d'une
   image ni du rendu par défaut du navigateur, qui varie d'un système à l'autre. */
.champ-select { position: relative; display: block; max-width: 380px; }
.champ-select select {
	appearance: none;
	-webkit-appearance: none;
	width: 100%;
	padding: 10px 40px 10px 15px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.2;
	cursor: pointer;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.champ-select select:hover { border-color: var(--pitch); }
.champ-select select:focus-visible { outline: 2px solid var(--flash); outline-offset: 2px; }
.champ-select::after {
	content: "";
	position: absolute;
	right: 17px;
	top: calc(50% - 5px);
	width: 7px;
	height: 7px;
	border-right: 2px solid var(--pitch);
	border-bottom: 2px solid var(--pitch);
	transform: rotate(45deg);
	pointer-events: none;
}

/* Le club retenu, rappelé sous le panneau : l'écusson le rend reconnaissable
   d'un coup d'œil, la croix permet de revenir à tous les clubs. */
.filtres-actif { padding: 0 18px 16px; }
.filtre-puce {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 5px 6px 5px 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: var(--soft);
	font-size: 13px;
	font-weight: 700;
	color: var(--ink);
}
.filtre-puce .crest { width: 24px; height: 24px; flex: none; }
.filtre-puce-nom { line-height: 1; }
.filtre-puce-x {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--line);
	color: var(--muted);
	text-decoration: none;
	font-size: 15px;
	line-height: 1;
}
.filtre-puce-x:hover { background: var(--pitch); border-color: var(--pitch); color: #fff; }

@media (max-width: 560px) {
	.filtres-onglet { padding: 12px 10px; font-size: 12px; gap: 7px; }
	.filtres-corps { padding: 14px; gap: 13px; }
	.champ-select { max-width: none; }
}

/* --- Grille de clubs --- */
.club-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 12px;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.club-card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 14px;
	border: 1px solid var(--line);
	border-radius: 12px;
	background: #fff;
	/* min-width:0 : sans lui, une carte de grille refuse de descendre sous la
	   largeur de son contenu, et un nom long fait déborder toute la grille. */
	min-width: 0;
}
.club-card[hidden] { display: none; }
.club-card:hover { border-color: var(--pitch); }
.club-card-lien {
	display: flex;
	align-items: center;
	gap: 11px;
	text-decoration: none;
	color: var(--ink);
	min-width: 0;
}
.club-card-logo {
	width: 40px;
	height: 40px;
	object-fit: contain;
	flex-shrink: 0;
	border-radius: 6px;
}
.club-card-logo--vide {
	display: grid;
	place-items: center;
	background: var(--soft);
	color: var(--muted);
	font-family: var(--font-title);
	font-size: 20px;
}
.club-card-nom {
	font-weight: 700;
	font-size: 14.5px;
	line-height: 1.25;
	/* Les noms longs passent à la ligne au lieu de sortir de la carte. */
	overflow-wrap: anywhere;
}
.club-card-divs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: auto; }
.club-chip {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .04em;
	background: var(--soft);
	color: var(--muted);
	border-radius: 5px;
	padding: 4px 8px;
	text-decoration: none;
	white-space: nowrap;
}
.club-chip:hover { background: var(--pitch); color: #fff; }

/* --- Sommaire des équipes sur la fiche club --- */
.club-sommaire { display: flex; flex-wrap: wrap; gap: 8px; }
.club-sommaire a {
	display: flex;
	align-items: baseline;
	gap: 7px;
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 8px 15px;
	text-decoration: none;
	color: var(--ink);
	font-size: 13px;
	font-weight: 700;
}
.club-sommaire a:hover { border-color: var(--pitch); background: var(--soft); }
.club-sommaire a span { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; }
.club-sec-div {
	font-family: var(--font-body);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	color: var(--muted);
	margin-left: 10px;
	vertical-align: middle;
}
/* Le titre de section ne doit pas se coller au haut de l'écran après un saut
   d'ancre : on réserve la hauteur de l'en-tête. */
.sec[id] { scroll-margin-top: 90px; }
/* Cible d'ancre secondaire : sans épaisseur, mais avec la même marge de défilement
   pour que le titre de section reste visible après le saut. */
.ancre-bis { display: block; height: 0; scroll-margin-top: 90px; }

/* Pagination de la liste d'articles */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-top: 28px;
}
.pagination .page-numbers {
	display: inline-block;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 8px;
	text-decoration: none;
	color: var(--ink);
	font-size: 14px;
	font-weight: 700;
}
.pagination .page-numbers:hover { border-color: var(--pitch); }
.pagination .page-numbers.current {
	background: var(--pitch);
	border-color: var(--pitch);
	color: #fff;
}
.pagination .page-numbers.dots { border-color: transparent; }

/* Chapô des pages de division : situe la compétition sous le titre. Largeur
   limitée pour rester lisible (~65 caractères par ligne). */
.div-intro {
	color: var(--muted);
	font-size: 15px;
	line-height: 1.6;
	max-width: 68ch;
	margin: -8px 0 0;
}

/* ============================ Cartes de récap (articles) ============================ */
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }

.ac {
	display: block;
	background: var(--paper);
	border: 1px solid var(--line);
	border-radius: 12px;
	overflow: hidden;
	transition: transform .12s, box-shadow .12s;
}
.ac:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(12,59,42,.1); }
.ac-media { aspect-ratio: 16 / 9; overflow: hidden; background: var(--soft); }
.ac-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ac-body { padding: 16px; }
.ac-body .div {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .09em;
	color: var(--flash);
	margin-bottom: 8px;
}
.ac-title {
	font-family: var(--font-title);
	text-transform: uppercase;
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.15;
	margin: 0 0 8px;
	color: var(--ink);
}
.ac-excerpt { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }
.ac-body .ft {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px solid var(--line);
}

/* Variante de .hsub pour le texte de présentation du site (hero, quand il n'y a
   pas de récap éditorial à mettre en avant) : un peu plus large qu'un chapô
   d'article, qui reste plus court par nature. */
.hsub--intro { max-width: 52ch; }

/* ============================ Classement ============================ */
.strip {
	background: var(--ink);
	color: #fff;
	border-radius: 16px;
	padding: 26px 28px;
	margin-top: 8px;
	overflow-x: auto;
}
/* Divisions à plusieurs poules (D2, D3, D4) : un tableau par poule, espacés pour
   qu'on voie bien qu'il s'agit de classements distincts et non d'une suite. */
.strip + .strip { margin-top: 18px; }
.strip h2 { font-family: var(--font-title); text-transform: uppercase; font-size: 1.4rem; margin: 0 0 4px; }
.strip .sub { font-size: 11px; text-transform: uppercase; letter-spacing: .1em; color: #8aa093; margin-bottom: 16px; }
/* `width: 100%` seul faisait tenir le tableau à tout prix : sur un téléphone, il
   se comprimait au lieu de déborder, et c'est le nom du club qui payait — tronqué
   en « VAL… » pour laisser la place aux chiffres. Le `overflow-x: auto` de `.strip`
   ne servait donc jamais.
   Avec une largeur minimale, le tableau déborde pour de bon et devient défilable :
   toutes les colonnes restent lisibles, et les noms entiers. */
.stab {
	width: 100%;
	min-width: 480px;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.stab th {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .07em;
	color: #8aa093;
	text-align: center;
	padding-bottom: 10px;
	border-bottom: 1px solid rgba(255,255,255,.15);
}
.stab th.l { text-align: left; }
.stab td { padding: 9px 0; text-align: center; font-size: 14px; border-bottom: 1px solid rgba(255,255,255,.08); }
.stab td.l { text-align: left; font-weight: 700; }
.stab td.rk { font-family: var(--font-title); color: var(--flash); width: 36px; }
.stab td.p { font-family: var(--font-title); font-weight: 400; font-size: 1.05rem; }

/* Classements régionaux : plusieurs poules (D1-D4 n'en a qu'une), club(s) du Lot
   mis en évidence au milieu de dizaines de clubs d'autres départements. */
.regional-classements { display: grid; gap: 24px; }
.stab tr.stab-lot { background: rgba(255,106,43,.14); }
.stab tr.stab-lot td.l { color: var(--flash); font-weight: 800; }

/* Différence de buts : c'est elle qui départage à égalité de points, elle mérite
   d'être lisible sans être aussi forte que le total de points. */
.stab td.gd { font-weight: 700; color: #cfe0d6; }

/* --- Le même tableau, dans le corps d'un article ---
   `.stab` est dessiné pour le fond vert des classements : filets blancs
   translucides, en-têtes clairs, largeur minimale de 480 px pour rendre le
   défilement possible dans `.strip`. Repris au fil d'un article, il perdait ses
   filets (invisibles sur blanc) et débordait de la page, faute de conteneur
   défilant autour de lui.
   Ici, aucune largeur n'est imposée : le navigateur dimensionne les colonnes
   d'après leur contenu, ce qui évite qu'un en-tête plus long que sa colonne
   déborde — ce que produisait une largeur fixe en em, calculée sur la police
   minuscule des en-têtes. */
.single-body .stab {
	min-width: 0;
	margin: 1.4em 0;
}
.single-body .stab th {
	color: var(--muted);
	border-bottom: 2px solid var(--line);
	padding: 0 8px 8px;
	overflow-wrap: break-word;
}
.single-body .stab td {
	border-bottom: 1px solid var(--line);
	padding: 9px 8px;
	font-size: 15px;
	/* Un nom de club long passe à la ligne plutôt que d'élargir la colonne. */
	overflow-wrap: break-word;
}

@media (max-width: 520px) {
	.single-body .stab th { font-size: 9px; letter-spacing: .03em; padding: 0 4px 6px; }
	.single-body .stab td { font-size: 13px; padding: 8px 4px; }
}


/* ============================ Article (récap) ============================ */
.single-wrap { padding-bottom: 20px; } /* le padding-top vient désormais de #onze-main, générique */
.single-head { margin-bottom: 18px; }
.single-title { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1; margin: 10px 0 8px; }
.single-meta { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.single-media { margin: 0 0 24px; }
.single-media img { border-radius: 12px; width: 100%; }
.single-body { font-size: 17px; line-height: 1.7; max-width: 70ch; }
.single-body > * + * { margin-top: 1.1em; }
.single-body h2, .single-body h3 {
	font-family: var(--font-title);
	text-transform: uppercase;
	letter-spacing: .01em;
	line-height: 1.05;
	margin-top: 1.4em;
}
/* Liens dans le corps d'un article ou d'une page.
   La règle globale `a { color: inherit; text-decoration: none }` sert la
   navigation et les cartes, où tout le bloc est déjà cliquable — mais au milieu
   d'un paragraphe elle rend le lien indiscernable du texte. Ici on rétablit les
   deux marqueurs que tout le monde reconnaît : la couleur et le soulignement.
   Les deux ensemble, pas seulement la couleur : elle seule ne suffit pas pour
   qui distingue mal les teintes. */
.single-body p a,
.single-body li a,
.single-body td a {
	color: var(--pitch);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	/* Le trait passe sous les jambages plutôt qu'à travers. */
	text-underline-offset: 3px;
	text-decoration-color: rgba(12, 59, 42, .4); /* --pitch atténué */
	transition: text-decoration-color .12s ease, background-color .12s ease;
}
.single-body p a:hover,
.single-body li a:hover,
.single-body td a:hover { text-decoration-color: currentColor; }

/* Un lien sortant s'annonce : on sait avant de cliquer qu'on quitte le site.
   La flèche est décorative (contenu CSS, ignoré des lecteurs d'écran) et n'est
   pas posée sur les liens internes, majoritaires. */
.single-body a[href^="http"]:not([href*="leonzelotois.fr"])::after {
	content: " ↗";
	font-weight: 400;
	text-decoration: none;
}

.single-aside { margin-top: 20px; }

/* Page statique : pas d'encadré résultats/classement à côté, on laisse le texte
   respirer sur toute la largeur utile plutôt que de le coller à gauche. */
.single-wrap--solo .single-body { max-width: 72ch; }
.single-wrap--solo .single-body ul { padding-left: 1.2em; }

/* Chapô : la phrase d'accroche qui ouvre une page statique et en résume l'objet.
   Détachée du corps du texte pour qu'on sache en une ligne où l'on est. */
.single-body .single-chapo {
	font-size: 19px;
	line-height: 1.5;
	color: var(--muted);
	padding-bottom: 18px;
	border-bottom: 2px solid var(--line);
}
/* Un <code> au fil du texte (nom de domaine, clé technique) : on le distingue
   sans le faire hurler. */
.single-body code {
	font-family: ui-monospace, "Cascadia Mono", Menlo, monospace;
	font-size: .88em;
	background: var(--soft);
	border: 1px solid var(--line);
	border-radius: 4px;
	padding: .1em .35em;
	/* Un nom de domaine ne doit pas élargir la page sur mobile. */
	word-break: break-word;
}
.single-wrap--solo .single-body li + li { margin-top: .45em; }

/* ============================ Page d'un match ============================ */
.match-head { text-align: center; }
.match-teams {
	/* Grille à 3 colonnes : les 2 colonnes d'équipe (minmax(0,1fr)) restent
	   toujours égales entre elles, quelle que soit la longueur des noms — sinon
	   un nom plus long que l'autre pousse le score hors du centre visuel. */
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	gap: 16px;
	max-width: 640px;
	margin: 18px auto 10px;
}
.mt-team { display: flex; flex-direction: column; align-items: center; gap: 8px; min-width: 0; }
.mt-team .crest { width: 48px; height: 48px; }
/* L'écusson mène à la fiche du club, sans rien changer à son apparence : ni
   bordure, ni agrandissement, ni transition. Le lien enveloppant reprend donc
   `flex-shrink` de l'écusson — sans quoi il se comprimerait à la place de
   l'image sur les écrans étroits, seul écart visuel que l'enveloppe pourrait
   introduire. Reste le contour de focus, qui n'apparaît qu'au clavier. */
.crest-lien { display: inline-flex; flex-shrink: 0; border-radius: 50%; }
.crest-lien:focus-visible { outline: 2px solid var(--flash); outline-offset: 3px; }
.mt-name { font-weight: 700; font-size: 14px; text-align: center; }
.mt-score {
	font-family: var(--font-title);
	font-size: 2.6rem;
	line-height: 1;
	min-width: 100px;
	text-align: center;
}
.mt-score em { color: var(--flash); font-style: normal; margin: 0 6px; }
.mt-vs { font-size: 1.4rem; color: var(--muted); }
.mt-pen { display: block; font-size: 12px; font-weight: 600; color: var(--muted); margin-top: 4px; }

/* Cellules libellées : filet orange, sur-titre en capitales, valeur en dessous
   — la même écriture que les visuels publiés, au lieu d'un paragraphe libre.
   Sert au stade comme aux officiels : deux blocs de même nature (un intitulé,
   une valeur) n'ont pas de raison d'avoir deux mises en forme. */
.fiche {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 14px 22px;
}
.fiche li { border-left: 3px solid var(--flash); padding: 1px 0 1px 12px; }
.fiche-k {
	display: block;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--muted);
	margin-bottom: 3px;
}
.fiche-v { font-size: 15px; font-weight: 600; line-height: 1.4; }

/* Feuille de match : chronologie unique sur fond de pelouse, axe central,
   domicile à gauche / extérieur à droite — la même écriture que les visuels
   publiés. Les marqueurs sont dessinés en CSS et non écrits en emoji : un
   emoji change de dessin d'un téléphone à l'autre, et n'a pas la couleur de
   la charte. */
.timeline {
	position: relative;
	width: 100%;
	margin: 0;
	padding: 12px 0;
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--pitch2), var(--pitch));
	color: #fff;
	/* Les lignes teintées vont d'un bord à l'autre : sans cette coupe, leur
	   fond dépasserait des angles arrondis de la carte. */
	overflow: hidden;
}
.timeline::before {
	content: "";
	position: absolute;
	top: 16px;
	bottom: 16px;
	left: 50%;
	width: 2px;
	background: rgba(255, 255, 255, .13);
	transform: translateX(-50%);
}
.tl-row {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 10px 20px;
}
/* Une ligne sur deux est à peine éclaircie : sur une carte large, l'œil a
   besoin d'un repère horizontal pour relier un nom à sa minute. Deux teintes,
   pas trois : la ligne d'un but portait un fond orangé qui, posé sur le vert,
   virait au brun et cassait l'alternance. Le but se distingue autrement — par
   son ballon et par le score, qui sont à lui seul. */
.tl-row:nth-child(even) { background: rgba(255, 255, 255, .035); }

.tl-side { display: flex; align-items: center; gap: 12px; min-height: 30px; font-size: 15px; }
.tl-side--home { flex-direction: row-reverse; justify-content: flex-start; }
.tl-side--away { flex-direction: row; justify-content: flex-start; }
/* Le côté opposé à l'équipe concernée est vide côté gabarit : `min-height`
   réserve la colonne et garde la minute centrée. */

.tl-mid {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3px;
	min-width: 54px;
}
.tl-minute {
	font-family: var(--font-title);
	font-size: 13px;
	color: #fff;
	background: rgba(255, 255, 255, .12);
	border-radius: 20px;
	padding: 3px 10px;
	white-space: nowrap;
}
/* Le score au moment du but — écrit seulement quand il retombe sur le score
   final, cf. single-match.php. */
.tl-score {
	font-family: var(--font-title);
	font-size: 15px;
	/* La valeur littérale sert de repli : si la variable ne résout pas
	   (feuille de tokens absente du cache d'un navigateur, par exemple),
	   le score resterait en blanc sans qu'on puisse le voir côté serveur. */
	color: var(--flash, #ff6a2b);
	letter-spacing: .02em;
}

/* Le libellé du fait reste dans le code pour les lecteurs d'écran ; à l'écran
   c'est le marqueur qui parle. */
.tl-type {
	position: relative;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .09);
}
.tl-type::before,
.tl-type::after {
	content: "";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
}
/* Le but porte un ballon au trait (cf. onze_feuille_marqueur) : il occupe toute
   la pastille, qui n'a donc plus de fond à lui donner. Le tracé suit la couleur
   du texte, blanche sur la pelouse. */
.tl-type.tl-ev--but { background: none; color: #fff; }
.tl-ballon { display: block; width: 100%; height: 100%; }
.tl-type.tl-ev--carton-jaune::before,
.tl-type.tl-ev--carton-rouge::before,
.tl-type.tl-ev--carton-blanc::before {
	left: 10px;
	width: 12px;
	height: 17px;
	border-radius: 2px;
}
.tl-type.tl-ev--carton-jaune::before { background: #f5c62d; }
.tl-type.tl-ev--carton-rouge::before { background: #d03a2d; }
.tl-type.tl-ev--carton-blanc::before { background: #fff; }
/* Remplacement : aucun marqueur. Les flèches portées par les deux noms disent
   déjà ce qui se passe ; un signe de plus dans la colonne ne ferait que
   dédoubler l'information. La pastille garde une largeur nulle pour ne pas
   décaler la colonne, et le libellé reste lisible aux lecteurs d'écran. */
.tl-type.tl-ev--remplacement {
	width: 0;
	height: 0;
	flex-basis: 0;
	background: none;
}
.tl-player { font-weight: 700; line-height: 1.25; }
.tl-row--but .tl-player { font-size: 16px; }

/* Remplacement : deux lignes, chacune avec sa flèche. « X pour Y » obligeait le
   lecteur à deviner le sens du mouvement ; la flèche montante dit qui entre, la
   descendante qui sort, et l'entrant garde le poids typographique. */
.tl-chg { display: flex; flex-direction: column; gap: 3px; }
.tl-side--home .tl-chg { align-items: flex-end; }
.tl-in,
.tl-out { display: flex; align-items: center; gap: 7px; line-height: 1.2; }
.tl-in::before,
.tl-out::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.tl-in::before { border-bottom: 7px solid #7fdca8; }
.tl-out::before { border-top: 7px solid rgba(255, 255, 255, .45); }
.tl-in { font-size: 14px; font-weight: 700; color: #fff; }
.tl-out { font-size: 13px; font-weight: 500; color: rgba(255, 255, 255, .58); }

.stab-note { margin: 10px 2px 0; font-size: 12px; line-height: 1.5; color: var(--muted); }

/* Un fait ajouté par la rédaction : l'astérisque le signale sur la ligne, la
   note sous la chronologie en donne la source. Rien ne doit ressembler à une
   donnée fédérale sans en être une. */
.tl-ajout {
	color: var(--flash, #ff6a2b);
	font-weight: 800;
	margin-left: 3px;
	font-size: .9em;
	vertical-align: super;
	line-height: 1;
}
.timeline .tl-ajout { color: #ffb08a; }
/* Minute inconnue : un point sur l'axe, qui ne prétend rien. */
.tl-minute--muet {
	width: 8px;
	height: 8px;
	padding: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .38);
}

/* Sous la chronologie : pourquoi le score au fil du match manque. Une absence
   sans explication se lit comme un oubli du site, alors qu'elle vient de la
   feuille elle-même. */
.tl-note {
	margin: 12px 2px 0;
	font-size: 13px;
	line-height: 1.5;
	color: var(--muted);
}

.compos-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.compo-col {
	padding: 18px 20px 20px;
	border-radius: var(--radius);
	background: linear-gradient(180deg, var(--pitch2), var(--pitch));
	color: #fff;
}
.compo-team {
	font-family: var(--font-title);
	text-transform: uppercase;
	font-size: 1.1rem;
	margin: 0 0 12px;
	padding-bottom: 12px;
	border-bottom: 2px solid rgba(255, 255, 255, .14);
}
.compo-list { list-style: none; margin: 0; padding: 0; }
.compo-list li {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 7px 0;
	font-size: 14px;
	font-weight: 600;
	border-bottom: 1px solid rgba(255, 255, 255, .07);
}
.compo-list li:last-child { border-bottom: 0; }
.compo-list .num {
	display: grid;
	place-items: center;
	width: 27px;
	height: 27px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--flash);
	color: var(--pitch);
	font-family: var(--font-title);
	font-size: 14px;
	line-height: 1;
}
.compo-subs-label {
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: rgba(255, 255, 255, .58);
	margin: 16px 0 2px;
}
.compo-list--subs li { color: rgba(255, 255, 255, .74); font-weight: 500; }
.compo-list--subs .num { background: rgba(255, 255, 255, .16); color: #fff; }

/* Ce que le joueur a fait dans le match, à droite de son nom : buts marqués,
   minute d'entrée, minute de sortie. La liste dit qui était là ; ces marques
   disent ce qu'il s'y est passé, sans avoir à faire l'aller-retour avec la
   feuille de match. */
.compo-nom { flex: 1 1 auto; min-width: 0; }
.compo-faits { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.compo-but {
	display: flex;
	align-items: center;
	gap: 4px;
	color: #fff;
	font-size: 12px;
	font-weight: 800;
}
.compo-ballon { width: 17px; height: 17px; }
.compo-mvt {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 12px;
	font-weight: 600;
	color: rgba(255, 255, 255, .58);
	font-variant-numeric: tabular-nums;
}
.compo-mvt::before {
	content: "";
	flex: 0 0 auto;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
}
.compo-mvt--in::before { border-bottom: 7px solid #7fdca8; }
.compo-mvt--out::before { border-top: 7px solid rgba(255, 255, 255, .5); }

/* ============================ Agenda du district ============================ */
/* Une chronologie, pas un tableau : la date tient dans un bloc à gauche, le
   reste se lit d'un trait. Ce qui est passé n'est pas retiré — un dirigeant doit
   pouvoir vérifier une échéance qu'il a manquée — mais s'efface. */
.ag-h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 10px 0 12px; }
.ag-chapo { font-size: 16px; line-height: 1.6; color: var(--muted); max-width: 68ch; margin: 0; }

.ag-liste { list-style: none; margin: 0; padding: 0; }
.ag-mois-titre {
	font-family: var(--font-title);
	text-transform: uppercase;
	font-size: 1.05rem;
	color: var(--muted);
	margin: 26px 0 8px;
	padding-bottom: 6px;
	border-bottom: 2px solid var(--line);
}
.ag-mois-titre:first-child { margin-top: 0; }

.ag-item {
	display: flex;
	gap: 18px;
	padding: 14px 0;
	border-bottom: 1px solid var(--line);
}
.ag-item:last-child { border-bottom: 0; }
.ag-date {
	flex: 0 0 74px;
	text-align: center;
	padding: 8px 4px 10px;
	border-radius: var(--radius);
	background: var(--soft);
	align-self: flex-start;
}
.ag-jour {
	display: block;
	font-family: var(--font-title);
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ink);
}
.ag-mois {
	display: block;
	font-size: 11px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--flash, #ff6a2b);
	margin-top: 3px;
}
.ag-sem { display: block; font-size: 10px; color: var(--muted); margin-top: 2px; text-transform: capitalize; }

.ag-corps { min-width: 0; }
.ag-titre { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.35; }
.ag-obl {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--flash, #ff6a2b);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	vertical-align: 2px;
}
.ag-detail { margin: 5px 0 0; font-size: 14px; line-height: 1.5; color: var(--ink); }
.ag-meta { margin: 7px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ag-cat {
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 3px 8px;
	border-radius: 4px;
	background: var(--pitch);
	color: #fff;
}
.ag-cat--jeunes { background: #1d6b4f; }
.ag-cat--arbitrage { background: #6b5b1d; }
.ag-cat--technique { background: #1d4a6b; }
.ag-cat--feminines { background: #6b1d55; }
.ag-src { font-size: 12px; color: var(--muted); }

/* La semaine qui vient : un filet orange, le seul de la page. */
.ag-item--proche .ag-date { background: rgba(255, 106, 43, .12); }
.ag-item--proche { border-left: 3px solid var(--flash, #ff6a2b); padding-left: 12px; margin-left: -15px; }

.ag-semaine {
	display: inline-block;
	margin-right: 7px;
	padding: 2px 7px;
	border-radius: 4px;
	background: var(--flash, #ff6a2b);
	color: #fff;
	font-size: 10px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .05em;
	vertical-align: 2px;
}
.sechead-note { margin: 4px 0 0; font-size: 13px; color: var(--muted); }

.ag-item--passe { opacity: .5; }
.ag-item--passe .ag-obl { background: var(--muted); }

.ag-pied {
	margin: 30px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
	font-size: 13px;
	color: var(--muted);
	line-height: 1.6;
}
.ag-pied a { text-decoration: underline; }

@media (max-width: 520px) {
	.ag-item { gap: 12px; }
	.ag-date { flex-basis: 60px; }
	.ag-jour { font-size: 1.2rem; }
	.ag-titre { font-size: 15px; }
	.ag-item--proche { margin-left: 0; padding-left: 10px; }
}

/* ============================ Pied de page ============================ */
.foot { background: var(--pitch); color: #cfe0d6; margin-top: 44px; flex-shrink: 0; }
.foot .wrap {
	padding: 30px 22px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 14px;
}
.foot .logo { font-size: 1.4rem; }
.foot .note { font-size: 11px; color: #8fb0a0; text-transform: uppercase; letter-spacing: .05em; }
.foot-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.foot-nav a {
	color: #cfe0d6;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: .05em;
	text-decoration: none;
	border-bottom: 1px solid rgba(207, 224, 214, .35);
	padding-bottom: 2px;
}
.foot-nav a:hover { border-bottom-color: currentColor; }

/* --- Suivre le site ---
   Mêmes puces que les réseaux d'un club : un lecteur qui les connaît sur une
   fiche club les reconnaît ici. En pied d'article, une ligne d'accroche au-dessus ;
   en pied de page, les puces seules, blanches sur le fond vert. */
.suivre { margin-top: 26px; }
.suivre-titre { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--ink); }
.suivre--pied { margin-top: 0; }
.suivre--pied .club-lien { border-color: rgba(255, 255, 255, .25); }

/* ============================ A11y & focus ============================ */
a:focus-visible,
button:focus-visible { outline: 3px solid var(--flash); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ============================ Responsive ============================ */
@media (max-width: 880px) {
	.hero .wrap { grid-template-columns: 1fr; gap: 30px; }
	/* Le hero empile son contenu (titre/texte puis match) sur mobile : un peu plus
	   d'air après, sinon la section suivante arrive collée à la carte du match. */
	.hero { margin-bottom: 48px; }
	.grid4 { grid-template-columns: 1fr 1fr; }
	.grid3 { grid-template-columns: 1fr; }

	.match-teams { gap: 14px; }
	.mt-score { font-size: 2rem; min-width: 70px; }

	/* Tablette : la chronologie garde sa mise en page — marqueur et nom côte à
	   côte de part et d'autre de l'axe — et occupe toute la largeur. Seuls les
	   espacements se resserrent. Ce palier descendait auparavant jusqu'à
	   l'empilement du mobile, ce qui donnait du texte de 11 px sur une tablette
	   de 800 px de large. */
	.tl-row { gap: 10px; padding: 9px 14px; }
	.tl-side { font-size: 14px; gap: 10px; }
	.tl-mid { min-width: 48px; }
	.compos-grid { grid-template-columns: 1fr; gap: 16px; }

	/* Navigation mobile accessible (remplace le simple display:none du mockup). */
	.nav-toggle { display: block; }
	.head .onze-nav {
		position: absolute;
		top: 78px;
		right: 0;
		left: 0;
		background: var(--pitch);
		border-top: 1px solid var(--pitch2);
		display: none;
		z-index: 30;
	}
	/* Le panneau est en position absolue : il n'allonge pas la page. Sans limite de
	   hauteur, tout ce qui dépasse du bas de l'écran devient inatteignable — c'est
	   le cas dès qu'on déplie un sous-menu sur un écran court. */
	.head .onze-nav[data-open="true"] {
		display: block;
		max-height: calc(100vh - 78px);
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	.head .onze-menu { flex-direction: column; padding: 8px; gap: 2px; }
	.head .onze-menu a { padding: 12px 14px; }

	/* Sur mobile le menu est déjà déroulant : les sous-menus s'affichent en ligne,
	   décalés, plutôt qu'en surcouche flottante. */
	.head .a-sous-menu { position: static; }
	.head .a-sous-menu::after { display: none; } /* passerelle inutile sans survol */
	.sous-menu-bouton { width: 100%; justify-content: space-between; padding: 12px 14px; }
	.head .sous-menu {
		position: static;
		border: 0;
		box-shadow: none;
		padding: 0 0 4px 14px;
		min-width: 0;
		background: transparent;
	}
	/* Plus de contre-règle de survol ici : elle était plus spécifique que
	   l'ouverture au clic et la neutralisait sur téléphone, où un appui laisse
	   `:hover` actif. L'ouverture au survol est désormais cantonnée aux appareils
	   qui survolent (@media hover: hover), il n'y a donc rien à annuler. */
	.head .sous-menu[data-open="true"] { display: flex; }
}

@media (max-width: 520px) {
	/* Téléphone : marqueur et nom restent sur la même ligne — les empiler
	   coupait le regard entre le ballon et son buteur. Seules les tailles
	   diminuent. */
	.tl-row { gap: 6px; padding: 8px 8px; }
	.tl-side { gap: 7px; font-size: 13px; }
	.tl-type { width: 24px; height: 24px; flex-basis: 24px; }
	.tl-type.tl-ev--carton-jaune::before,
	.tl-type.tl-ev--carton-rouge::before,
	.tl-type.tl-ev--carton-blanc::before { left: 7px; width: 10px; height: 14px; }
	.tl-player { font-size: 13px; }
	.tl-row--but .tl-player { font-size: 13px; }
	.tl-in { font-size: 13px; }
	.tl-out { font-size: 12px; }
	.tl-mid { min-width: 42px; }
	.tl-minute { font-size: 12px; padding: 2px 8px; }
	.tl-score { font-size: 14px; color: var(--flash, #ff6a2b); }

	.grid4 { grid-template-columns: 1fr; }
}

/* ======================== Partage d'un article ======================== */
/* Boutons et liens partagent exactement la même apparence : le lecteur n'a pas
   à savoir lequel ouvre un onglet et lequel agit sur place. */
.partage {
	margin: 34px 0 8px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
}
.partage-intitule {
	display: block;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--muted);
	margin-bottom: 12px;
}
.partage-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
.partage-lien {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 9px 14px 9px 10px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	color: var(--ink);
	font: inherit;
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	text-decoration: none;
	transition: border-color .15s, transform .15s, box-shadow .15s;
}
.partage-lien:hover {
	border-color: var(--flash);
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0,0,0,.07);
}
.partage-lien:focus-visible {
	outline: 2px solid var(--flash);
	outline-offset: 2px;
}
.partage-lien .ico { flex: none; display: block; }

/* Confirmation de la copie : sans retour visible, on ne sait pas si le clic a
   fait quelque chose. */
.partage-etat {
	margin: 10px 0 0;
	min-height: 1.2em;
	font-size: 13px;
	font-weight: 700;
	color: var(--flash);
}

@media (max-width: 480px) {
	.partage-lien span { display: none; }   /* les marques suffisent à identifier */
	.partage-lien { padding: 10px; }
	.partage-lien--lien span,
	.partage-lien--natif span { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
	.partage-lien { transition: none; }
	.partage-lien:hover { transform: none; }
}

/* ==================== Statistiques de division ====================
   Bloc qui a remplacé le classement des buteurs sur les pages de division.
   Il vit dans un `.strip` (fond sombre), d'où les couleurs claires en dur :
   comme pour `.stab`, ce contexte n'a qu'un seul fond possible. */

.dstat {
	list-style: none;
	margin: 0 0 26px;
	padding: 0;
	display: grid;
	/* `auto-fit` + minmax : quatre colonnes au large, deux sur téléphone, sans
	   point de rupture à maintenir. */
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: 18px 12px;
}
.dstat li { display: flex; flex-direction: column; gap: 4px; }
.dstat-v {
	font-family: var(--font-title);
	font-size: 2.1rem;
	line-height: 1;
	color: var(--flash);
	font-variant-numeric: tabular-nums;
}
.dstat-l {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #8aa093;
}

.dissue { margin-bottom: 24px; }
.dissue h3 {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #8aa093;
	font-weight: 700;
	margin: 0 0 10px;
}
.dissue-bar {
	display: flex;
	height: 14px;
	border-radius: 7px;
	overflow: hidden;
	background: rgba(255,255,255,.08);
}
.dissue-bar span { display: block; height: 100%; }
.dissue-bar .is-dom, .dissue-leg i.is-dom { background: var(--flash); }
.dissue-bar .is-nul, .dissue-leg i.is-nul { background: #8aa093; }
.dissue-bar .is-ext, .dissue-leg i.is-ext { background: #cfe0d6; }
.dissue-leg {
	list-style: none;
	margin: 10px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	font-size: 12px;
	color: #cfe0d6;
}
.dissue-leg li { display: flex; align-items: center; gap: 7px; }
.dissue-leg i { width: 10px; height: 10px; border-radius: 3px; flex: none; }

.dfaits {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 16px;
}
.dfaits li {
	padding-top: 12px;
	border-top: 1px solid rgba(255,255,255,.14);
	display: flex;
	flex-direction: column;
	gap: 3px;
}
.dfaits-l {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: #8aa093;
}
.dfaits-c { font-weight: 800; font-size: 14px; }
.dfaits-d { font-size: 12px; color: #cfe0d6; font-variant-numeric: tabular-nums; }

@media (max-width: 480px) {
	.dstat { gap: 14px 10px; }
	.dstat-v { font-size: 1.7rem; }
}

/* ============ Mentions de match (tirs au but, forfait, non disputé) ============
   Le score seul ment par omission : 3-0 peut être un résultat de terrain, un
   forfait ou une rencontre jamais jouée. Ces éléments portent la nuance. */


/* Avertissement sur la fiche d'un match non disputé. Il précède le score pour
   être lu avant lui — placé après, il n'aurait servi à rien. */
.match-avis {
	margin: 0 0 18px;
	padding: 12px 16px;
	border-left: 3px solid var(--flash);
	background: rgba(255,106,43,.08);
	border-radius: 0 10px 10px 0;
	font-size: 14px;
	line-height: 1.45;
	color: var(--ink);
	max-width: 62ch;
}

/* Rencontre jouée dont le score n'est pas encore publié par la Fédération.
   Volontairement plus discret que le « DIRECT » orange : c'est une absence
   d'information, pas un événement. */
.ticker .sc-attente { color: #8aa093; }

/* Lien vers la page de compétition, sous les filtres de l'archive des matchs.
   Il ne peut pas réutiliser `.div-intro`, dont la marge haute négative sert à
   coller un chapô sous un titre de section : posée ici, elle faisait remonter
   la ligne dans les pastilles de filtre. */
.filtres-lien {
	margin: 14px 0 0;
	font-size: 14px;
	line-height: 1.5;
}


/* ==================== Tableaux larges : le cadre défile, pas la page ====================
   Mesuré au navigateur à 360 px de large : sur sept articles, un tableau de
   résultats plus large que l'écran poussait la page entière vers la droite. Le
   lecteur faisait glisser tout l'article — titre, texte, image — pour atteindre
   la colonne des scores, et revenait rarement au bon endroit.

   La feuille de blocs de WordPress, qui rend `figure.wp-block-table` défilable,
   n'est pas chargée ici : aucun tableau n'avait de conteneur. `inc/tableaux.php`
   en pose un à l'affichage, autour de chaque tableau, et c'est lui qui défile.

   `overscroll-behavior-x: contain` est la pièce maîtresse : arrivé au bout du
   tableau, le geste s'arrête là au lieu de se propager à la page. Sans lui, un
   doigt qui pousse le tableau trop loin emmène l'article avec lui.

   On ne touche ni à `width` ni à `table-layout` : un tableau étroit continue
   d'occuper toute la largeur, un tableau large déborde de son cadre — et c'est
   précisément ce débordement-là qui devient défilable. */
.single-body .onze-tableau {
	overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
	max-width: 100%;
	margin: 1.4em 0;
}

/* La marge appartient désormais au cadre : le tableau se cale contre ses bords,
   sinon le défilement découvrirait une bande vide avant la première colonne. */
.single-body .onze-tableau > table { margin: 0; }

/* Un cadre défilable doit être atteignable au clavier (`tabindex` posé par le
   filtre) : encore faut-il voir où l'on est. */
.single-body .onze-tableau:focus-visible {
	outline: 2px solid var(--flash);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Une barre discrète, pour que le tableau se montre défilable sur un écran où
   le pointeur ne la fait pas apparaître de lui-même. */
.single-body .onze-tableau {
	scrollbar-width: thin;
	scrollbar-color: var(--line) transparent;
}
.single-body .onze-tableau::-webkit-scrollbar { height: 6px; }
.single-body .onze-tableau::-webkit-scrollbar-track { background: transparent; }
.single-body .onze-tableau::-webkit-scrollbar-thumb {
	background: var(--line);
	border-radius: 3px;
}

/* ==================== Les cartes de match ne forcent plus la page ====================
   Mesuré à 320 px de large — un iPhone SE, un Android d'entrée de gamme : sous
   chaque article, la colonne « Résultats » poussait la page de 10 à 30 px vers
   la droite. Assez pour que le titre et le texte partent de travers au moindre
   glissement, sans qu'on voie jamais ce qui dépasse.

   En cause, le comportement par défaut d'un élément de grille : sa largeur ne
   peut pas descendre sous celle de son contenu (`min-width: auto`). Une piste
   `1fr` censée valoir la largeur de l'écran s'élargissait donc jusqu'à tenir
   « Coupe de France féminine » ou « Avenir Foot Biars-Bretenoux » d'un bloc.

   `min-width: 0` rend la piste libre de rétrécir. Les noms d'équipe savent déjà
   se tronquer proprement (`.team-name`), et rien d'autre ne bouge : à 360 px et
   au-delà, les cartes sont identiques à ce qu'elles étaient. */
.grid4 > * { min-width: 0; }

/* --- Raccourcis de section (pages de division) ---
   Fixés en haut de l'écran au défilement : sur un téléphone, les résultats
   n'arrivaient qu'après les articles et le calendrier. Des pilules blanches
   à liseré, comme les filtres de « Tous les matchs » : on voit que ce sont
   des boutons. La section en cours de lecture se remplit de vert, comme la
   journée choisie dans le sélecteur. Une bande vert plein (30 sept. 2026)
   ressemblait à un bandeau, pas à une rangée de boutons. */
.sousnav {
	position: sticky;
	top: 0;
	z-index: 20;
	display: flex;
	gap: 8px;
	overflow-x: auto;
	scrollbar-width: none;
	margin: -6px 0 22px;
	padding: 10px 0;
	background: var(--soft);
	border-bottom: 1px solid var(--line);
}
.sousnav::-webkit-scrollbar { display: none; }
.sousnav a {
	flex: 1 0 auto;
	padding: 9px 14px;
	border: 1px solid var(--line);
	border-radius: 999px;
	background: #fff;
	text-align: center;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--pitch);
	white-space: nowrap;
	transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.sousnav a[aria-current="true"] {
	background: var(--pitch);
	border-color: var(--pitch);
	color: #fff;
}
@media (hover: hover) {
	.sousnav a:hover { border-color: var(--pitch); }
	.sousnav a[aria-current="true"]:hover { color: #fff; }
}
@media (max-width: 480px) {
	/* Bord à bord sur mobile : les quatre pilules tiennent sur 360 px, et la
	   rangée glisse sous le doigt en dessous, sans barre de défilement. */
	.sousnav { margin-left: -22px; margin-right: -22px; padding: 10px 14px; gap: 6px; }
	.sousnav a { padding: 8px 11px; font-size: 11px; letter-spacing: .03em; }
}

/* La bande des journées glisse sous le doigt : sa barre de défilement, elle,
   n'a rien à faire là (30 sept. 2026). */
.journees-liste { scrollbar-width: none; padding-bottom: 0; }
.journees-liste::-webkit-scrollbar { display: none; }

/* Compteur dans une puce de filtre (« Résultats 87 », « À venir 640 ») */
.club-f-nb {
	margin-left: 6px;
	padding: 1px 7px;
	border-radius: 999px;
	background: rgba(12, 59, 42, .09);
	font-size: 11px;
	font-variant-numeric: tabular-nums;
}
.club-f[aria-pressed="true"] .club-f-nb { background: rgba(255, 255, 255, .22); }