/* =============================================================================
   JUSTFOOTBALL — « LE DESK »
   Design system presse sportive monochrome.

   Papier blanc cassé, encre noire, filets hairline façon journal,
   un seul accent : le rouge signal, réservé au LIVE et aux kickers.
   Typo : Archivo (axe width → titres expanded black) + Spline Sans Mono
   pour les scores, heures et métadonnées (chiffres tabulaires).

   Chargé après le CSS du plugin anwp-tsdb : les tokens --tsdb-* sont
   surchargés sur les mêmes scopes que le plugin pour gagner la cascade.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. TOKENS
   ----------------------------------------------------------------------------- */
:root {
	/* Papier & encre */
	--jf-paper: oklch(97.4% 0.002 95);
	--jf-paper-2: oklch(94.2% 0.002 95);
	--jf-white: oklch(99.5% 0.001 95);
	--jf-ink: oklch(12.5% 0 0);
	--jf-ink-soft: oklch(24% 0 0);
	--jf-muted: oklch(44% 0 0);
	--jf-dim: oklch(62% 0 0);
	--jf-rule: oklch(81% 0 0);
	--jf-rule-strong: oklch(30% 0 0);

	/* OR — couleur primaire de marque (issue du logo JustFootball : « Just » doré).
	   Sert aux kickers, tags, hovers, bordures actives, soulignements. */
	--jf-gold: oklch(74% 0.115 86);        /* or vif, sur fond sombre */
	--jf-gold-deep: oklch(56% 0.105 78);   /* or profond, lisible sur fond clair */
	--jf-gold-soft: oklch(95% 0.04 88);    /* fond doré très clair */
	--jf-gold-line: oklch(80% 0.07 86);    /* bordure dorée discrète */

	/* Signal = alias OR (l'or devient l'accent partout où il y avait du rouge) */
	--jf-signal: var(--jf-gold);
	--jf-signal-deep: var(--jf-gold-deep);
	--jf-signal-soft: var(--jf-gold-soft);

	/* LIVE — rouge réservé au seul état « en direct » (lisibilité/convention) */
	--jf-live: oklch(55% 0.21 27);
	--jf-live-deep: oklch(45% 0.18 27);
	--jf-live-soft: oklch(95.5% 0.025 27);

	/* Typo SPORT — Saira Condensed (titres/scores, look scoreboard) +
	   Barlow (corps) + Barlow Semi Condensed (labels/kickers tickers) */
	--jf-text: "Barlow", -apple-system, "Segoe UI", system-ui, sans-serif;
	--jf-display: "Saira Condensed", "Barlow", Impact, sans-serif;
	--jf-mono: "Barlow Semi Condensed", "Barlow", ui-monospace, monospace;

	/* Blocksy — re-skin global via les variables du thème */
	--theme-palette-color-1: var(--jf-ink);
	--theme-palette-color-2: var(--jf-signal);
	--theme-palette-color-3: var(--jf-muted);
	--theme-palette-color-4: var(--jf-rule);
	--theme-palette-color-5: var(--jf-paper-2);
	--theme-palette-color-6: var(--jf-paper);
	--theme-palette-color-7: var(--jf-white);
	--theme-palette-color-8: var(--jf-ink);

	--theme-text-color: var(--jf-ink-soft);
	--theme-headings-color: var(--jf-ink);
	--theme-heading-color: var(--jf-ink);
	--theme-link-initial-color: var(--jf-ink);
	--theme-link-hover-color: var(--jf-signal);
	--theme-border-color: var(--jf-rule);

	--theme-button-background-initial-color: var(--jf-ink);
	--theme-button-background-hover-color: var(--jf-gold);
	--theme-button-text-initial-color: var(--jf-white);
	--theme-button-text-hover-color: var(--jf-ink);

	--theme-form-field-border-initial-color: var(--jf-rule);
	--theme-form-field-border-focus-color: var(--jf-ink);
	--theme-form-field-border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   2. BASE GLOBALE
   ----------------------------------------------------------------------------- */
body {
	font-family: var(--jf-text);
	background: var(--jf-paper);
	color: var(--jf-ink-soft);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--jf-display);
	color: var(--jf-ink);
	letter-spacing: -0.01em;
}

::selection {
	background: var(--jf-ink);
	color: var(--jf-paper);
}

/* Filet rouge « édition du jour » en haut de page */
body::before {
	content: "";
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--jf-signal);
	z-index: 99999;
	pointer-events: none;
}

body.admin-bar::before {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar::before {
		top: 46px;
	}
}

/* Boutons Blocksy : blocs nets, mono uppercase */
.ct-button,
button[type="submit"],
input[type="submit"],
.wp-block-button__link {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	border-radius: 2px;
}

/* -----------------------------------------------------------------------------
   3. HEADER — barre d'encre
   ----------------------------------------------------------------------------- */
#header [data-row],
#header [data-row] > div {
	/* Couleur explicite (pas var(--jf-ink) : ce token est redéfini en CLAIR sur
	   les pages dark .jf-home-page / .jf-article-page → header devenait blanc). */
	background: #0a0f16 !important;
	border-color: oklch(28% 0 0) !important;
}

#header .site-title,
#header .site-title a {
	font-family: var(--jf-display);
	font-stretch: 125%;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: var(--jf-white) !important;
}

#header .site-description {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.18em;
	font-size: 10px;
	color: oklch(64% 0 0) !important;
}

#header [data-id^="menu"] > ul > li > a {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	font-size: 12px;
	color: var(--jf-paper) !important;
}

#header [data-id^="menu"] > ul > li > a:hover,
#header [data-id^="menu"] > ul > li[class*="current"] > a {
	color: var(--jf-signal) !important;
}

#header [data-id^="menu"] .sub-menu {
	background: var(--jf-ink) !important;
	border: 1px solid oklch(28% 0 0);
	border-radius: 2px;
}

#header [data-id^="menu"] .sub-menu a {
	font-family: var(--jf-mono);
	font-size: 12px;
	color: var(--jf-paper) !important;
}

#header [data-id^="menu"] .sub-menu a:hover {
	color: var(--jf-signal) !important;
}

#header .ct-icon,
#header [data-id="search"],
#header .ct-toggle {
	color: var(--jf-paper) !important;
}

/* Panneau mobile off-canvas */
#offcanvas .ct-panel-inner,
#offcanvas .ct-panel-content {
	background: var(--jf-ink) !important;
	color: var(--jf-paper);
}

#offcanvas [data-id^="mobile-menu"] a {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: var(--jf-paper) !important;
}

#offcanvas [data-id^="mobile-menu"] a:hover {
	color: var(--jf-signal) !important;
}

/* -----------------------------------------------------------------------------
   4. FOOTER — pied d'encre
   ----------------------------------------------------------------------------- */
.ct-footer,
.ct-footer [data-row],
.ct-footer [data-row] > div {
	/* Couleur explicite (cf. header) : var(--jf-ink) vire au clair sur les pages dark. */
	background: #0a0f16 !important;
	border-color: oklch(28% 0 0) !important;
}

.ct-footer,
.ct-footer .widget,
.ct-footer p {
	color: oklch(72% 0 0);
}

.ct-footer a {
	color: var(--jf-paper) !important;
}

.ct-footer a:hover {
	color: var(--jf-signal) !important;
}

.ct-footer .widget-title,
.ct-footer h1, .ct-footer h2, .ct-footer h3, .ct-footer h4 {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.15em;
	font-size: 12px;
	color: var(--jf-white);
}

/* -----------------------------------------------------------------------------
   5. LIVESCORE APP — surcharge des tokens du plugin
   (mêmes scopes que le plugin, chargé après → la cascade gagne)
   ----------------------------------------------------------------------------- */
body:has(#tsdb-livescore-home-app) {
	--tsdb-lsh-bg: var(--jf-paper);
	--tsdb-lsh-bg-2: var(--jf-paper-2);
	--tsdb-lsh-panel: var(--jf-white);
	--tsdb-lsh-panel-2: oklch(93% 0.002 95);
	--tsdb-lsh-panel-3: oklch(88.5% 0.002 95);
	--tsdb-lsh-line: var(--jf-rule);
	--tsdb-lsh-line-strong: var(--jf-rule-strong);
	--tsdb-lsh-text: var(--jf-ink);
	--tsdb-lsh-soft: var(--jf-ink-soft);
	--tsdb-lsh-muted: var(--jf-muted);
	--tsdb-lsh-dim: var(--jf-dim);
	--tsdb-lsh-accent: var(--jf-ink);
	--tsdb-lsh-accent-soft: oklch(91% 0.002 95);
	/* Desk : le rouge reste rouge = état LIVE (l'or est réservé au branding) */
	--tsdb-lsh-red: var(--jf-live);
	--tsdb-lsh-red-deep: var(--jf-live-deep);
	--tsdb-lsh-red-soft: var(--jf-live-soft);
	--tsdb-lsh-live: var(--jf-live);
	--tsdb-lsh-live-soft: var(--jf-live-soft);
	/* Sémantique W/D/L et zones : désaturée pour rester dans le monochrome */
	--tsdb-lsh-green: oklch(42% 0.07 146);
	--tsdb-lsh-green-soft: oklch(95% 0.015 146);
	--tsdb-lsh-blue: oklch(42% 0.06 252);
	--tsdb-lsh-blue-soft: oklch(95% 0.015 252);
	--tsdb-lsh-gold: oklch(58% 0.07 84);
	--tsdb-lsh-gold-soft: oklch(95.5% 0.02 84);
	--tsdb-lsh-radius: 2px;
	--tsdb-lsh-shadow: 0 1px 0 oklch(12% 0 0 / 0.05), 0 14px 36px oklch(12% 0 0 / 0.07);
	--tsdb-lsh-font: var(--jf-text);
}

/* Colonne centrale (desk des matchs) */
.tsdb-livescore-home .tsdb-lsh-main {
	--tsdb-center-ink: var(--jf-ink);
	--tsdb-center-strong: var(--jf-ink);
	--tsdb-center-soft: var(--jf-muted);
	--tsdb-center-muted: var(--jf-dim);
	--tsdb-center-paper: var(--jf-white);
	--tsdb-center-panel: var(--jf-paper);
	--tsdb-center-rule: var(--jf-rule);
	--tsdb-center-rule-strong: var(--jf-rule-strong);
	--tsdb-center-live: var(--jf-live);
	--tsdb-center-live-soft: var(--jf-live-soft);
	--tsdb-center-accent: var(--jf-ink);
	--tsdb-center-accent-soft: oklch(91% 0.002 95);
	--tsdb-center-selected: var(--jf-paper-2);
	--tsdb-center-focus: var(--jf-ink);
}

/* Section éditoriale (articles) */
.tsdb-livescore-home > .tsdb-site-news--main {
	--tsdb-news-surface: var(--jf-white);
	--tsdb-news-surface-soft: var(--jf-paper-2);
	--tsdb-news-ink: var(--jf-ink);
	--tsdb-news-muted: var(--jf-muted);
	--tsdb-news-rule: var(--jf-rule);
	--tsdb-news-accent: var(--jf-signal-deep);
}

/* -----------------------------------------------------------------------------
   6. LIVESCORE APP — chiffres en mono tabulaire, labels de desk
   ----------------------------------------------------------------------------- */
#tsdb-livescore-home-app .tsdb-lsh-match-score,
#tsdb-livescore-home-app .tsdb-lsh-match-status,
#tsdb-livescore-home-app .tsdb-lsh-details-score,
#tsdb-livescore-home-app .tsdb-lsh-details-score-num,
#tsdb-livescore-home-app .tsdb-lsh-details-status,
#tsdb-livescore-home-app .tsdb-lsh-details-countdown,
#tsdb-livescore-home-app .tsdb-lsh-countdown-value,
#tsdb-livescore-home-app .tsdb-lsh-countdown-label,
#tsdb-livescore-home-app .tsdb-lsh-next-match-countdown,
#tsdb-livescore-home-app .tsdb-lsh-next-match-datetime,
#tsdb-livescore-home-app .tsdb-lsh-h2h-score,
#tsdb-livescore-home-app .tsdb-lsh-h2h-date,
#tsdb-livescore-home-app .tsdb-lsh-form-match-date,
#tsdb-livescore-home-app .tsdb-lsh-form-match-result,
#tsdb-livescore-home-app .tsdb-lsh-badge,
#tsdb-livescore-home-app .tsdb-lsh-live-badge,
#tsdb-livescore-home-app .tsdb-lsh-filter-count,
#tsdb-livescore-home-app .tsdb-lsh-league-btn-badge,
#tsdb-livescore-home-app .tsdb-lsh-league-live-count,
#tsdb-livescore-home-app .tsdb-lsh-country-badge,
#tsdb-livescore-home-app .tsdb-lsh-footer,
#tsdb-livescore-home-app .tsdb-st-rank,
#tsdb-livescore-home-app .tsdb-st-pts,
#tsdb-livescore-home-app .tsdb-st-played,
#tsdb-livescore-home-app .tsdb-st-record,
#tsdb-livescore-home-app .tsdb-st-gd,
#tsdb-livescore-home-app #tsdb-lsh-current-date,
#tsdb-livescore-home-app .tsdb-lsh-timezone-panel {
	font-family: var(--jf-mono);
	font-variant-numeric: tabular-nums;
}

/* Labels d'interface : uppercase espacé, ton « salle de rédaction » */
#tsdb-livescore-home-app .tsdb-lsh-filter-btn,
#tsdb-livescore-home-app .tsdb-lsh-all-btn span,
#tsdb-livescore-home-app .tsdb-lsh-tab-btn,
#tsdb-livescore-home-app .tsdb-lsh-timezone-choice,
#tsdb-livescore-home-app .tsdb-lsh-league-panel-head,
#tsdb-livescore-home-app .tsdb-lsh-standings-header span,
#tsdb-livescore-home-app .tsdb-lsh-view-match-btn,
#tsdb-livescore-home-app .tsdb-lsh-modal-btn {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

/* Filtre LIVE : rouge plein (état direct) */
#tsdb-livescore-home-app .tsdb-lsh-filter-live.active,
#tsdb-livescore-home-app .tsdb-lsh-filter-btn.tsdb-lsh-filter-live.active {
	background: var(--jf-live);
	border-color: var(--jf-live);
	color: var(--jf-white);
}

/* Noms d'équipes : encre dense */
#tsdb-livescore-home-app .tsdb-lsh-match-teams,
#tsdb-livescore-home-app .tsdb-lsh-details-team-name,
#tsdb-livescore-home-app .tsdb-st-team-name {
	font-family: var(--jf-text);
	font-weight: 600;
}

/* Score du match sélectionné : gros chiffres de une */
#tsdb-livescore-home-app .tsdb-lsh-details-score-num {
	font-weight: 700;
}

/* -----------------------------------------------------------------------------
   7. SECTION ÉDITORIALE — traitement journal
   ----------------------------------------------------------------------------- */

/* Kicker : mono rouge précédé d'un carré signal */
.tsdb-site-news .tsdb-site-section-head p {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.16em;
	font-size: 11px;
	color: var(--jf-signal-deep);
	display: flex;
	align-items: center;
	gap: 8px;
}

.tsdb-site-news .tsdb-site-section-head p::before {
	content: "";
	width: 8px;
	height: 8px;
	background: var(--jf-signal);
	flex: 0 0 auto;
}

/* Titre de section : manchette expanded black */
.tsdb-site-news .tsdb-site-section-head h2 {
	font-family: var(--jf-display);
	font-stretch: 125%;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: clamp(26px, 4vw, 42px);
	line-height: 0.95;
	color: var(--jf-ink);
}

/* Filet de presse sous l'en-tête de section */
.tsdb-site-news .tsdb-site-section-head {
	border-bottom: 2px solid var(--jf-ink);
	padding-bottom: 14px;
}

/* Cartes articles : à plat, filets hairline, zéro ombre */
.tsdb-site-news .tsdb-site-article {
	border: 1px solid var(--jf-rule);
	border-radius: 2px;
	box-shadow: none;
	background: var(--jf-white);
	transition: border-color 0.25s ease;
}

.tsdb-site-news .tsdb-site-article:hover {
	border-color: var(--jf-ink);
}

/* Signature visuelle : photos N&B, colorisées au survol */
.tsdb-site-news .tsdb-site-article__media img {
	filter: grayscale(1) contrast(1.06);
	transition: filter 0.45s ease, transform 0.45s ease;
}

.tsdb-site-news .tsdb-site-article:hover .tsdb-site-article__media img {
	filter: grayscale(0) contrast(1);
	transform: scale(1.02);
}

/* Titres d'articles */
.tsdb-site-news .tsdb-site-article h3 {
	font-family: var(--jf-display);
	font-stretch: 105%;
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.01em;
}

.tsdb-site-news .tsdb-site-article h3 a {
	color: var(--jf-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}

/* Hover : titre en OR (on écrase le rose du plugin, oklch(72% 0.1 27)) */
.tsdb-site-news .tsdb-site-article:hover .tsdb-site-article__body h3 a,
.tsdb-site-news .tsdb-site-article:focus-within .tsdb-site-article__body h3 a {
	color: var(--jf-gold-deep);
}

/* Article de une : manchette */
.tsdb-site-news .tsdb-site-article--lead h3 {
	font-stretch: 118%;
	font-weight: 900;
	text-transform: uppercase;
	line-height: 1.02;
}

/* Méta : mono uppercase */
.tsdb-site-news .tsdb-site-article__meta {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-size: 10px;
}

/* Kicker catégorie : or sur fond doré clair (on écrase le fond rouge du plugin) */
.tsdb-site-news .tsdb-site-article__meta span,
.tsdb-site-news .tsdb-site-news-grid .tsdb-site-article__meta span {
	color: var(--jf-gold-deep);
	background: var(--jf-gold-soft);
}

/* Placeholder sans image : monogramme d'encre */
.tsdb-site-news .tsdb-site-article--no-image .tsdb-site-article__media span {
	background: var(--jf-ink);
	color: var(--jf-paper);
}

.tsdb-site-news .tsdb-site-article--no-image .tsdb-site-article__media strong {
	font-family: var(--jf-display);
	font-stretch: 125%;
	font-weight: 900;
}

/* Bouton « afficher plus » : bloc d'encre */
.tsdb-site-news .tsdb-site-news__more {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	background: var(--jf-ink);
	color: var(--jf-white);
	border: 1px solid var(--jf-ink);
	border-radius: 2px;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.tsdb-site-news .tsdb-site-news__more:hover {
	background: var(--jf-gold);
	border-color: var(--jf-gold);
	color: var(--jf-ink);
}

/* Kicker de la une : badge or à texte encre (cohérent, pas de rouge hors live) */
.tsdb-site-news--main.is-grid-view
	.tsdb-site-news-grid
	> article.tsdb-site-article--lead
	.tsdb-site-article__meta span {
	background: var(--jf-gold);
	color: var(--jf-ink);
}

.tsdb-site-news .tsdb-site-news__more-count {
	font-variant-numeric: tabular-nums;
}

/* Toggle grille/liste */
.tsdb-site-news .tsdb-site-news-view button {
	font-family: var(--jf-mono);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	border-radius: 2px;
}

.tsdb-site-news .tsdb-site-news-view button.is-active {
	background: var(--jf-ink);
	color: var(--jf-white);
	border-color: var(--jf-ink);
}

/* -----------------------------------------------------------------------------
   8. MOTION — montée en page façon bouclage, respect reduced-motion
   ----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
	@keyframes jf-rise {
		from {
			opacity: 0;
			transform: translateY(10px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.tsdb-site-news--main .tsdb-site-article {
		animation: jf-rise 0.5s ease backwards;
	}

	.tsdb-site-news--main .tsdb-site-article:nth-child(1) { animation-delay: 0.05s; }
	.tsdb-site-news--main .tsdb-site-article:nth-child(2) { animation-delay: 0.1s; }
	.tsdb-site-news--main .tsdb-site-article:nth-child(3) { animation-delay: 0.15s; }
	.tsdb-site-news--main .tsdb-site-article:nth-child(4) { animation-delay: 0.2s; }
	.tsdb-site-news--main .tsdb-site-article:nth-child(5) { animation-delay: 0.25s; }
	.tsdb-site-news--main .tsdb-site-article:nth-child(6) { animation-delay: 0.3s; }
	.tsdb-site-news--main .tsdb-site-article:nth-child(7) { animation-delay: 0.35s; }
	.tsdb-site-news--main .tsdb-site-article:nth-child(n + 8) { animation-delay: 0.4s; }
}

@media (prefers-reduced-motion: reduce) {
	#tsdb-livescore-home-app *,
	.tsdb-site-news * {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* =============================================================================
   9. COUCHE ÉDITORIALE « BOLD » — la signature visible de la refonte
   Tout est injecté/retravaillé depuis le child theme, sans toucher au plugin.
   ============================================================================= */

/* 9.1 — RUBAN D'ÉDITION : manchette de journal au-dessus du desk.
   Vraie balise injectée via functions.php (jf_render_edition_ribbon) pour
   rester un bloc fiable quel que soit le display du wrapper plugin. */
.jf-edition-ribbon {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 10px clamp(16px, 4vw, 48px);
	background: #141414; /* fallback solide avant oklch */
	background: var(--jf-ink);
	color: #f6f4ef;
	color: var(--jf-paper);
	font-family: var(--jf-mono);
	font-size: clamp(10px, 1.4vw, 12px);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	white-space: nowrap;
	overflow: hidden;
	border-bottom: 2px solid var(--jf-signal);
}

.jf-edition-ribbon__dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--jf-signal);
}

.jf-edition-ribbon__text {
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 9.2 — MANCHETTE DE SECTION : on monte d'un cran l'échelle typographique.
   Beaucoup plus grosse, beaucoup plus serrée → effet « une de journal ». */
.tsdb-livescore-home > .tsdb-site-news--main .tsdb-site-section-head {
	border-top: 3px solid var(--jf-ink);
	border-bottom: 2px solid var(--jf-ink);
	padding: 16px 0 14px;
	margin-bottom: 22px;
}

.tsdb-livescore-home > .tsdb-site-news--main .tsdb-site-section-head h2 {
	font-stretch: 125%;
	font-weight: 900;
	font-size: clamp(34px, 6.4vw, 72px);
	line-height: 0.86;
	letter-spacing: -0.025em;
	text-transform: uppercase;
}

.tsdb-livescore-home > .tsdb-site-news--main .tsdb-site-section-head p {
	font-size: clamp(11px, 1.5vw, 13px);
	letter-spacing: 0.22em;
	margin-bottom: 10px;
}

/* 9.3 — ARTICLE DE UNE : vrai traitement « À LA UNE » magazine.
   Tag rouge injecté + titre monumental. */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead {
	position: relative;
	border: 2px solid var(--jf-ink);
}

.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead::after {
	content: "À LA UNE";
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	padding: 7px 16px;
	background: var(--jf-gold);
	color: var(--jf-ink);
	font-family: var(--jf-mono);
	font-size: 11px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	pointer-events: none;
}

.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead h3 {
	font-size: clamp(24px, 3.4vw, 40px) !important;
	font-stretch: 120%;
	line-height: 0.98;
}

/* Titre de une = manchette BLANCHE sur l'image (le plugin le prévoit ainsi).
   !important : reste blanc même au survol (sinon le hover rose du plugin s'applique). */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead h3,
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead h3 a {
	color: #fff !important;
}

/* Le visuel de une garde son N&B ; le scrim du plugin assure le contraste,
   donc on n'assombrit pas davantage la photo (sinon elle vire au noir). */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead .tsdb-site-article__media img {
	filter: grayscale(1) contrast(1.04);
}

.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead:hover .tsdb-site-article__media img {
	filter: grayscale(0) contrast(1.02);
}

/* 9.4 — SCORES : gros chiffres tabulaires, comme un tableau de résultats imprimé */
#tsdb-livescore-home-app .tsdb-lsh-match-score {
	font-weight: 700;
	letter-spacing: 0.01em;
}

#tsdb-livescore-home-app .tsdb-lsh-details-score-num {
	font-size: clamp(40px, 6vw, 60px);
	letter-spacing: -0.02em;
}

/* 9.5 — HEADER MASTHEAD : la barre d'encre gagne un filet rouge + nav affirmée */
#header [data-row="middle"] {
	border-bottom: 2px solid var(--jf-signal) !important;
}

#header [data-id^="menu"] > ul > li > a,
#header .ct-header-text,
#header .ct-header-text a {
	font-weight: 600;
}

/* Soulignement rouge animé sous les items de menu */
#header [data-id^="menu"] > ul > li > a {
	position: relative;
}

#header [data-id^="menu"] > ul > li > a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 0;
	height: 2px;
	background: var(--jf-signal);
	transition: width 0.25s ease;
}

#header [data-id^="menu"] > ul > li > a:hover::after,
#header [data-id^="menu"] > ul > li[class*="current"] > a::after {
	width: 100%;
}

/* 9.6 — BOUTON « AFFICHER PLUS » : pleine largeur, bloc d'encre signé */
.tsdb-site-news--main .tsdb-site-news__more {
	width: 100%;
	justify-content: center;
	padding: 18px;
	font-size: 13px;
	letter-spacing: 0.18em;
	border-width: 2px;
}

/* 9.7 — Liseré rouge à gauche de la colonne centrale : ancre visuelle du desk */
.tsdb-livescore-home .tsdb-lsh-main {
	border-top: 3px solid var(--jf-ink);
}

@media (max-width: 1024px) {
	.jf-edition-ribbon {
		letter-spacing: 0.16em;
	}
	/* Sur petit écran, on masque la baseline et on garde le label court */
	.jf-edition-ribbon__text {
		font-size: 11px;
	}
}

/* =============================================================================
   10. REFONTE DE LA GRILLE ARTICLES — « from zero »
   On neutralise la grille irrégulière du plugin (une = trou de 306px,
   article pleine largeur étiré, cellule fantôme, gouttières de 1px) et on
   impose une grille déterministe : UNE cinématique pleine largeur + cartes
   uniformes 4 colonnes. 1 une + 12 cartes = 3 rangées pleines, aucun trou.
   ============================================================================= */

/* 10.1 — La grille : 4 colonnes, vraies gouttières */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	grid-auto-rows: auto !important;
	gap: 16px !important;
}

/* Toutes les cartes : 1 colonne, placement automatique (on casse les span du plugin) */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article {
	grid-column: auto !important;
	grid-row: auto !important;
	margin: 0 !important;
}

/* 10.2 — L'ARTICLE DE UNE : hero cinématique pleine largeur, image plein cadre */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead {
	grid-column: 1 / -1 !important;
	grid-row: auto !important;
	position: relative;
	display: block !important;
	aspect-ratio: 24 / 9;
	max-height: 540px;
	min-height: 320px;
	overflow: hidden;
	border: 2px solid var(--jf-ink);
	border-radius: 2px;
}

.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead .tsdb-site-article__media {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	margin: 0 !important;
	border: 0 !important;
}

.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead .tsdb-site-article__media img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* Scrim dégradé pour garantir la lisibilité du titre blanc, quelle que soit la photo */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead .tsdb-site-article__media::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient(
		0deg,
		oklch(8% 0 0 / 0.88) 0%,
		oklch(8% 0 0 / 0.45) 38%,
		oklch(8% 0 0 / 0) 68%
	);
}

/* Le bloc texte passe en surimpression, ancré en bas */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead .tsdb-site-article__body {
	position: absolute !important;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	padding: clamp(18px, 2.6vw, 40px);
	max-width: 72ch;
	background: transparent !important;
}

.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead h3 {
	font-size: clamp(22px, 3vw, 38px) !important;
	margin: 8px 0 0 !important;
}

/* Hero = kicker + titre. On masque le chapô pour rester net. */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead .tsdb-site-article__body p {
	display: none !important;
}

/* 10.3 — CARTES UNIFORMES : image ratio constant + corps qui remplit la hauteur */
.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article:not(.tsdb-site-article--lead) {
	display: flex !important;
	flex-direction: column !important;
	border: 1px solid var(--jf-rule);
	border-radius: 2px;
	background: var(--jf-white);
	overflow: hidden;
}

.tsdb-site-news--main
	.tsdb-site-news-grid
	> article:not(.tsdb-site-article--lead)
	.tsdb-site-article__media {
	position: relative !important;
	width: 100% !important;
	aspect-ratio: 16 / 10;
	height: auto !important;
	margin: 0 !important;
	border: 0 !important;
	flex: 0 0 auto;
	overflow: hidden;
}

.tsdb-site-news--main
	.tsdb-site-news-grid
	> article:not(.tsdb-site-article--lead)
	.tsdb-site-article__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
}

.tsdb-site-news--main
	.tsdb-site-news-grid
	> article:not(.tsdb-site-article--lead)
	.tsdb-site-article__body {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 14px 16px 16px;
}

/* Le titre pousse, la méta reste en haut → bas de carte aligné */
.tsdb-site-news--main
	.tsdb-site-news-grid
	> article:not(.tsdb-site-article--lead)
	.tsdb-site-article__body h3 {
	font-size: clamp(15px, 1.15vw, 18px);
	line-height: 1.18;
	margin: 0;
}

/* 10.4 — Responsive : 2 colonnes tablette, 1 colonne mobile */
@media (max-width: 1024px) {
	.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
	.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 600px) {
	.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid {
		grid-template-columns: 1fr !important;
	}
	.tsdb-site-news--main.is-grid-view .tsdb-site-news-grid > article.tsdb-site-article--lead {
		aspect-ratio: 4 / 3;
		min-height: 0;
	}
}

/* =============================================================================
   11. ARTICLES SANS IMAGE — « poster » typographique uniforme
   Quand l'article n'a pas de featured image, le plugin rend un placeholder
   (catégorie + initiales). Le JS (justfootball.js) le remplace par un poster
   d'encre portant le TITRE de l'article. Style ci-dessous = look uniforme,
   même dimensions que les cartes à photo.
   ============================================================================= */
.jf-poster {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	padding: clamp(14px, 1.4vw, 20px);
	background:
		repeating-linear-gradient(
			90deg,
			oklch(18% 0 0) 0,
			oklch(18% 0 0) 1px,
			transparent 1px,
			transparent 64px
		),
		linear-gradient(150deg, oklch(20% 0 0), oklch(11% 0 0));
	color: var(--jf-paper);
	overflow: hidden;
}

/* Liseré signal en haut du poster */
.jf-poster::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--jf-signal);
}

/* Sélecteurs préfixés .tsdb-site-article--no-image .tsdb-site-article__media
   (spécificité 0,3,0) pour battre la règle du plugin sur span (0,2,1) qui
   forçait display:grid + centrage sur nos spans de poster. */
.tsdb-site-article--no-image .tsdb-site-article__media .jf-poster__kicker {
	display: block;
	place-self: auto;
	font-family: var(--jf-mono);
	font-size: 10px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.18em;
	color: var(--jf-signal);
}

.tsdb-site-article--no-image .tsdb-site-article__media .jf-poster__title {
	font-family: var(--jf-display);
	font-stretch: 112%;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 0.98;
	letter-spacing: -0.01em;
	font-size: clamp(17px, 1.5vw, 23px);
	color: #fff;
	text-align: left;
	/* clamp à 4 lignes pour rester dans le cadre */
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.tsdb-site-article--no-image .tsdb-site-article__media .jf-poster__mark {
	position: absolute;
	display: block;
	right: clamp(12px, 1.4vw, 18px);
	bottom: clamp(10px, 1.2vw, 16px);
	font-family: var(--jf-display);
	font-stretch: 125%;
	font-weight: 900;
	font-size: 13px;
	letter-spacing: 0.04em;
	color: oklch(60% 0 0);
}

/* Sur une carte poster, le titre figure déjà dans le poster :
   on masque le doublon (titre + chapô) dans le corps, on garde la date. */
.tsdb-site-article--no-image .tsdb-site-article__body h3,
.tsdb-site-article--no-image .tsdb-site-article__body p {
	display: none !important;
}

/* Le hover colorise le liseré et éclaire le titre */
.jf-has-poster:hover .jf-poster__title {
	color: #fff;
}

.jf-has-poster:hover .jf-poster {
	background:
		repeating-linear-gradient(
			90deg,
			oklch(22% 0.02 28) 0,
			oklch(22% 0.02 28) 1px,
			transparent 1px,
			transparent 64px
		),
		linear-gradient(150deg, oklch(24% 0.03 28), oklch(12% 0.02 28));
}

/* En mode LISTE, le poster s'adapte à la vignette carrée du plugin */
.tsdb-site-news.is-list-view .jf-poster {
	padding: 10px 12px;
}

.tsdb-site-news.is-list-view .jf-poster__title {
	font-size: 13px;
	-webkit-line-clamp: 2;
}

.tsdb-site-news.is-list-view .jf-poster__mark {
	display: none;
}

/* =============================================================================
   12. INFINITE SCROLL — la pagination devient un chargement au défilement
   Le JS clique le bouton « Afficher plus » du plugin à l'approche du bas.
   On transforme le bouton en simple indicateur de chargement (fallback no-JS
   conservé : sans JS, le bouton reste cliquable normalement).
   ============================================================================= */
.tsdb-site-news--main.jf-infinite .tsdb-site-news-actions {
	min-height: 56px;
}

.tsdb-site-news--main.jf-infinite .tsdb-site-news__more {
	pointer-events: none;
	cursor: default;
	gap: 12px;
	color: var(--jf-dim);
	background: var(--jf-white);
	border-color: var(--jf-rule);
}

/* Spinner d'encre */
.tsdb-site-news--main.jf-infinite .tsdb-site-news__more::before {
	content: "";
	width: 14px;
	height: 14px;
	border: 2px solid var(--jf-rule);
	border-top-color: var(--jf-ink);
	border-radius: 50%;
	animation: jf-spin 0.7s linear infinite;
}

.tsdb-site-news--main.jf-infinite .tsdb-site-news__more-count {
	display: none;
}

@keyframes jf-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tsdb-site-news--main.jf-infinite .tsdb-site-news__more::before {
		animation: none;
	}
}