/*
 * Actusport360 — feuille de style unique du thème.
 *
 * Toutes les valeurs viennent de DESIGN.md et des maquettes validées.
 * Aucune règle de style ne doit être écrite ailleurs (ni dans style.css,
 * ni en attribut « style » dans les gabarits).
 *
 * Sommaire
 *   1.  Polices auto-hébergées
 *   2.  Variables de thème
 *   3.  Base
 *   4.  Utilitaires et accessibilité
 *   5.  Images
 *   6.  Bandeau haut
 *   7.  En-tête et navigation
 *   8.  Navigation mobile
 *   9.  Bandeau de scores
 *   10. Une de l'accueil
 *   11. Sections, onglets et grilles
 *   12. Cartes
 *   13. Lignes de liste
 *   14. Résultats et classements
 *   15. Newsletter
 *   16. En-tête de rubrique et sous-nav compétitions
 *   17. Filtres
 *   18. Article
 *   19. Fiche match
 *   20. Colonnes latérales
 *   21. Recherche
 *   22. Auteur
 *   23. Page statique
 *   24. Erreur 404
 *   25. Pagination
 *   26. Pied de page
 *   27. Points de rupture
 *   28. Mouvement réduit
 */

/* ═══════════════════════════════════════════════════════════
   1. POLICES AUTO-HÉBERGÉES
   Trois familles variables, sous-ensembles latin et latin-ext.
   ═══════════════════════════════════════════════════════════ */

/* Archivo — titres, navigation, boutons, interface. */
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Archivo';
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url('../fonts/archivo-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Newsreader — corps d'article, chapôs, descriptions. */
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/newsreader-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/newsreader-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/newsreader-italic-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Newsreader';
	font-style: italic;
	font-weight: 200 800;
	font-display: swap;
	src: url('../fonts/newsreader-italic-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Roboto Mono — scores, dates, labels, compteurs, tags. */
@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url('../fonts/roboto-mono-latin-ext.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: 'Roboto Mono';
	font-style: normal;
	font-weight: 100 700;
	font-display: swap;
	src: url('../fonts/roboto-mono-latin.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ═══════════════════════════════════════════════════════════
   2. VARIABLES DE THÈME
   ═══════════════════════════════════════════════════════════ */

:root {
	color-scheme: dark;

	--ink: #0A0C11;
	--deep: #080A0E;
	--panel: #12161F;
	--panel-2: #181D28;
	--line: #242B38;
	--line-soft: #1B212C;
	--text: #F1F4F9;
	--muted: #8D96A8;
	--dim: #5F6878;
	--rouge: #E8283C;
	--rouge-dark: #B01A2A;
	--live: #00E08A;
	--or: #F5B841;

	/*
	 * Accent de rubrique — un ton par sport.
	 *
	 * Ces couleurs ne servent QU'AU dégradé du bandeau de titre de la page
	 * d'un sport (« .cat-hero »). Partout ailleurs — étiquettes de sport des
	 * cartes d'accueil, de la recherche, d'un article — le sport reste en
	 * « --rouge » : ces pages mélangent les disciplines, et il leur faut un
	 * fil rouge unique plutôt que neuf accents concurrents.
	 *
	 * Le football n'a pas de couleur à lui : il pointe sur le rouge de
	 * marque, et suit donc automatiquement son équivalent en thème clair.
	 */
	--accent-football: var(--rouge);
	--accent-basketball: #F2622E;
	--accent-tennis: #C4D62E;
	--accent-rugby: #2E7D4F;
	--accent-natation: #1E88C7;
	--accent-biathlon: #4A5FBF;
	--accent-sports-olympiques: #D9A441;
	--accent-multi-sports: #7B5EA7;
	--accent-sports-de-combat: #8C1D2B;

	--display: 'Archivo', system-ui, sans-serif;
	--serif: 'Newsreader', Georgia, serif;
	--mono: 'Roboto Mono', ui-monospace, monospace;

	--max: 1280px;
	--gut: 24px;
}

html[data-theme="light"] {
	color-scheme: light;

	--ink: #F6F7FA;
	--deep: #EDF0F5;
	--panel: #FFFFFF;
	--panel-2: #F1F3F8;
	--line: #DCE1EA;
	--line-soft: #E9ECF2;
	--text: #0C1016;
	--muted: #5A6373;
	--dim: #8B94A3;
	--rouge: #D01B2F;
	--rouge-dark: #A31424;
	--live: #00915C;
	--or: #A5720C;

	/*
	 * Mêmes accents, assombris et légèrement désaturés — la méthode qui
	 * donne déjà « --rouge », « --live » et « --or » clairs : teinte
	 * conservée, saturation ramenée à 95,5 %, luminosité abaissée jusqu'à ce
	 * que la couleur descende au niveau de luminance de « --rouge » clair,
	 * soit au moins 5:1 sur le fond de page. Une couleur déjà plus sombre
	 * que ce seuil n'est pas éclaircie. Détail du calcul dans DESIGN.md.
	 * Le football suit « --rouge » et n'a donc rien à redéclarer ici.
	 */
	--accent-basketball: #BE3E10;
	--accent-tennis: #667018;
	--accent-rugby: #2B6F47;
	--accent-natation: #1C70A2;
	--accent-biathlon: #4154AE;
	--accent-sports-olympiques: #89641E;
	--accent-multi-sports: #6F5596;
	--accent-sports-de-combat: #7C1C28;
}

/* ═══════════════════════════════════════════════════════════
   3. BASE
   ═══════════════════════════════════════════════════════════ */

* { box-sizing: border-box; margin: 0; padding: 0 }

html { scroll-behavior: smooth; transition: none }

body {
	background: var(--ink);
	color: var(--text);
	font-family: var(--display);
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* Surfaces qui changent de couleur au basculement de thème. */
body,
.topbar,
header.site,
.mobile-nav,
.scorebar,
.match,
.results,
.cat-hero,
.compbar,
.filters,
.statbox,
.pull,
.alsoread,
.authorbox,
.authorhero,
.related,
.rail-box,
.listrow,
.box,
.media,
footer.site {
	transition: background-color .22s ease, border-color .22s ease, color .22s ease;
}

a { color: inherit; text-decoration: none }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer }

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

/* ═══════════════════════════════════════════════════════════
   4. UTILITAIRES ET ACCESSIBILITÉ
   ═══════════════════════════════════════════════════════════ */

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

.eyebrow {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--dim);
}

/* Texte réservé aux lecteurs d'écran. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement : invisible tant qu'il n'a pas le focus clavier. */
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 100;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 16px;
	overflow: visible;
	clip: auto;
	clip-path: none;
	background: var(--rouge);
	color: #fff;
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .06em;
	text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   5. IMAGES
   .media remplace le placeholder .ph des maquettes. Le rapport
   est réservé par les classes r16 / r43 / r11 / r219 : la place
   de l'image est prise avant son chargement (CLS proche de zéro).
   ═══════════════════════════════════════════════════════════ */

img { max-width: 100%; height: auto }

.media {
	position: relative;
	display: block;
	overflow: hidden;
	background: var(--panel-2);
}
.media img { width: 100%; height: 100%; object-fit: cover; display: block }

.media.r16 { aspect-ratio: 16/9 }
.media.r43 { aspect-ratio: 4/3 }
.media.r11 { aspect-ratio: 1/1 }
.media.r219 { aspect-ratio: 21/9 }

/* ═══════════════════════════════════════════════════════════
   6. BANDEAU HAUT
   ═══════════════════════════════════════════════════════════ */

.topbar { border-bottom: 1px solid var(--line-soft); background: var(--deep) }
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 34px }
.topbar .date {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .08em;
	color: var(--dim);
	text-transform: uppercase;
}
.topbar .links { display: flex; gap: 20px }
.topbar .links a { font-size: 11.5px; color: var(--muted); letter-spacing: .04em }
.topbar .links a:hover { color: var(--text) }

/* ═══════════════════════════════════════════════════════════
   7. EN-TÊTE ET NAVIGATION
   ═══════════════════════════════════════════════════════════ */

header.site { border-bottom: 1px solid var(--line); background: var(--ink) }
header.site .wrap { display: flex; align-items: center; gap: 32px; height: 76px }

.logo {
	font-weight: 900;
	font-size: 27px;
	letter-spacing: -.035em;
	text-transform: uppercase;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.logo .mark {
	color: var(--ink);
	background: var(--rouge);
	padding: 3px 8px 5px;
	margin-left: 5px;
	transform: skewX(-9deg);
	display: inline-block;
}
.logo .mark span { display: inline-block; transform: skewX(9deg) }

nav.main { display: flex; gap: 19px; flex: 1; align-items: center }
nav.main > a,
.more-trigger {
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 6px 0;
	position: relative;
	white-space: nowrap;
}
nav.main > a::after,
.more-trigger::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 2px;
	background: var(--rouge);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .18s ease;
}
nav.main > a:hover,
.more-trigger:hover { color: var(--text) }
nav.main > a:hover::after,
nav.main > a.on::after,
.nav-more:hover .more-trigger::after,
.nav-more.open .more-trigger::after { transform: scaleX(1) }
nav.main > a.on { color: var(--text) }

.nav-more { position: relative }
.more-trigger { display: flex; align-items: center; gap: 5px }
.dropdown {
	position: absolute;
	top: 100%;
	left: -14px;
	margin-top: 12px;
	background: var(--panel);
	border: 1px solid var(--line);
	min-width: 200px;
	padding: 6px 0;
	z-index: 60;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-5px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-more:hover .dropdown,
.nav-more:focus-within .dropdown,
.nav-more.open .dropdown { opacity: 1; visibility: visible; transform: translateY(0) }
.dropdown a {
	display: block;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
	color: var(--muted);
	white-space: nowrap;
}
.dropdown a:hover { background: var(--panel-2); color: var(--text) }

.head-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0 }
.icon-btn {
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	color: var(--muted);
	transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--dim); color: var(--text) }

.theme-btn { position: relative }
.theme-btn .sun { display: none }
html[data-theme="light"] .theme-btn .sun { display: block }
html[data-theme="light"] .theme-btn .moon { display: none }

.btn-sub {
	background: var(--rouge);
	color: #fff;
	font-weight: 800;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 11px 18px;
	transition: background .15s;
}
.btn-sub:hover { background: var(--rouge-dark) }

.btn-ghost {
	border: 1px solid var(--line);
	color: var(--muted);
	font-weight: 700;
	font-size: 12.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 11px 18px;
	transition: .15s;
}
.btn-ghost:hover { border-color: var(--or); color: var(--or) }

.burger { display: none }

/* ═══════════════════════════════════════════════════════════
   8. NAVIGATION MOBILE
   Absente des maquettes : le bouton burger y est décoratif.
   Panneau déplié sous l'en-tête, masqué par l'attribut « hidden ».
   ═══════════════════════════════════════════════════════════ */

.mobile-nav { border-bottom: 1px solid var(--line); background: var(--panel) }
.mobile-nav a {
	display: block;
	padding: 13px var(--gut);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 1px solid var(--line-soft);
}
.mobile-nav a:hover,
.mobile-nav a.on { color: var(--text) }
.mobile-nav .btn-sub {
	display: block;
	width: 100%;
	padding: 15px;
	text-align: center;
	color: #fff;
	border-bottom: none;
}

/* ═══════════════════════════════════════════════════════════
   9. BANDEAU DE SCORES
   ═══════════════════════════════════════════════════════════ */

.scorebar {
	background: var(--panel);
	border-bottom: 1px solid var(--line);
	position: sticky;
	top: 0;
	z-index: 40;
}
.scorebar-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: stretch }
.scorebar-label {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 18px 0 var(--gut);
	border-right: 1px solid var(--line);
	flex-shrink: 0;
	background: var(--panel);
}
.scorebar-label .txt {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--text);
}

.dot-live {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--live);
	box-shadow: 0 0 0 0 rgba(0, 224, 138, .6);
	animation: pulse 2s infinite;
}
@keyframes pulse {
	0% { box-shadow: 0 0 0 0 rgba(0, 224, 138, .55) }
	70% { box-shadow: 0 0 0 7px rgba(0, 224, 138, 0) }
	100% { box-shadow: 0 0 0 0 rgba(0, 224, 138, 0) }
}

.score-track { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1 }
.score-track::-webkit-scrollbar { display: none }

/* Flèches de défilement d'une piste horizontale, à son extrémité droite.
   Partagées par le bandeau de scores et la sous-navigation des rubriques —
   deux pistes qui débordent, et que la molette seule ne suffit pas à
   parcourir. Absentes des maquettes. */
.track-nav { display: flex; flex-shrink: 0; border-left: 1px solid var(--line); background: var(--panel) }
.track-nav[hidden] { display: none }
.track-arrow {
	display: grid;
	place-items: center;
	width: 38px;
	color: var(--muted);
	transition: background .15s, color .15s;
}
.track-arrow + .track-arrow { border-left: 1px solid var(--line-soft) }
.track-arrow:hover:not(:disabled) { background: var(--panel-2); color: var(--text) }
.track-arrow:disabled { color: var(--dim); opacity: .4; cursor: default }
/* Le chevron du thème pointe vers le bas : on le fait tourner. */
.track-arrow.prev svg { transform: rotate(90deg) }
.track-arrow.next svg { transform: rotate(-90deg) }

.match {
	flex-shrink: 0;
	min-width: 186px;
	padding: 11px 18px;
	border-right: 1px solid var(--line-soft);
	display: flex;
	flex-direction: column;
	gap: 5px;
	transition: background .15s;
}
.match:hover { background: var(--panel-2) }
.match .compet {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.match .minute { color: var(--live); font-weight: 700 }
.match .minute.ft { color: var(--dim) }
.match .row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 600;
}
.match .row.lose { color: var(--muted) }
.match .sc { font-family: var(--mono); font-weight: 700; font-size: 14px }

/* ═══════════════════════════════════════════════════════════
   10. UNE DE L'ACCUEIL
   ═══════════════════════════════════════════════════════════ */

/*
 * La une se termine comme une section ordinaire. Sans retrait bas, la ligne
 * d'auteur touchait le bloc suivant : sur l'accueil, « Résultats du jour »
 * suit directement la une dès que la grille par sport est vide, et son fond
 * de panneau démarrait sous la byline, sans respiration.
 */
.hero { padding: 44px 0 58px }
.hero-grid { display: grid; grid-template-columns: 1.62fr 1fr; gap: 34px; align-items: start }
.hero-main { position: relative }
.hero-body { padding: 22px 0 0 }

.tagline { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px }

.chip {
	font-family: var(--mono);
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	background: var(--rouge);
	color: #fff;
	padding: 4px 8px;
}
.chip.alt { background: transparent; color: var(--or); border: 1px solid rgba(245, 184, 65, .35) }

h1.hero-t {
	font-size: clamp(34px, 4.4vw, 55px);
	font-weight: 900;
	line-height: .96;
	letter-spacing: -.032em;
	text-transform: uppercase;
}
h1.hero-t em { font-style: normal; color: var(--rouge) }

.deck {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.55;
	color: var(--muted);
	margin-top: 16px;
	max-width: 60ch;
}

.byline {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 18px;
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .07em;
	text-transform: uppercase;
	color: var(--dim);
}
.byline .auth { color: var(--text) }
.byline i { width: 3px; height: 3px; background: var(--dim); border-radius: 50%; display: block }

.hero-side { border-left: 1px solid var(--line); padding-left: 34px }
.side-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	padding-bottom: 14px;
	border-bottom: 2px solid var(--rouge);
	margin-bottom: 6px;
}
.side-head h2 { font-size: 15px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase }
.side-item { display: flex; gap: 14px; padding: 17px 0; border-bottom: 1px solid var(--line-soft) }
.side-item:last-child { border-bottom: none }
.side-item .media { width: 88px; flex-shrink: 0 }
.side-item .txt { flex: 1 }
.side-item .sport {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rouge);
	font-weight: 700;
}
.side-item h3 { font-size: 15px; font-weight: 700; line-height: 1.28; margin-top: 6px; letter-spacing: -.01em }
.side-item:hover h3 { color: var(--or) }
.side-item .ago { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 7px; display: block }

/* ═══════════════════════════════════════════════════════════
   11. SECTIONS, ONGLETS ET GRILLES
   ═══════════════════════════════════════════════════════════ */

.section { padding: 58px 0 }

.sec-head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 20px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 30px;
	flex-wrap: wrap;
}
.sec-head h2 {
	font-size: clamp(22px, 2.6vw, 32px);
	font-weight: 900;
	letter-spacing: -.02em;
	text-transform: uppercase;
	line-height: 1;
}
.sec-head h2 span { color: var(--rouge) }
.sec-head .more {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--muted);
	display: flex;
	align-items: center;
	gap: 7px;
}
.sec-head .more:hover { color: var(--or) }

.tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 26px }
.tab {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	padding: 9px 15px;
	border: 1px solid var(--line);
	color: var(--muted);
	transition: .15s;
}
.tab:hover { border-color: var(--dim); color: var(--text) }
.tab.on { background: var(--text); color: var(--ink); border-color: var(--text) }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px }

/* ═══════════════════════════════════════════════════════════
   12. CARTES
   ═══════════════════════════════════════════════════════════ */

.card .media { margin-bottom: 13px }
.card .sport {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--rouge);
	font-weight: 700;
}
.card h3 { font-size: 17px; font-weight: 700; line-height: 1.26; margin-top: 8px; letter-spacing: -.012em }
.card:hover h3 { color: var(--or) }
.card p { font-family: var(--serif); font-size: 14.5px; line-height: 1.5; color: var(--muted); margin-top: 9px }
.card .ago { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 10px; display: block }
.grid .card .ago { margin-top: 11px }

/* ═══════════════════════════════════════════════════════════
   13. LIGNES DE LISTE
   200 px d'image sur la recherche et les pages auteur,
   230 px sur l'archive d'un sport (DESIGN.md § 4).
   ═══════════════════════════════════════════════════════════ */

/* Liste d'articles et rail d'une archive de rubrique. */
.main-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 52px;
	align-items: start;
	padding-bottom: 56px;
}

.listrow {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 22px;
	padding: 22px 0;
	border-bottom: 1px solid var(--line-soft);
}
.listrow:first-of-type { padding-top: 0 }
.listrow.no-media { grid-template-columns: 1fr }
.listrow .kicker {
	display: flex;
	align-items: center;
	gap: 10px;
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .13em;
	text-transform: uppercase;
	font-weight: 700;
}
.listrow .kicker .c { color: var(--rouge) }
.listrow .kicker .fmt { color: var(--dim); font-weight: 500 }
.listrow h3 { font-size: 21px; font-weight: 800; line-height: 1.16; letter-spacing: -.02em; margin-top: 10px }
.listrow:hover h3 { color: var(--or) }
.listrow p {
	font-family: var(--serif);
	font-size: 15.5px;
	line-height: 1.55;
	color: var(--muted);
	margin-top: 9px;
	max-width: 62ch;
}
.listrow p mark { background: rgba(245, 184, 65, .22); color: var(--text); padding: 0 2px }
.listrow .ago {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .06em;
	color: var(--dim);
	margin-top: 12px;
	display: block;
}

.main-grid .listrow { grid-template-columns: 230px 1fr; padding: 24px 0 }
.main-grid .listrow.no-media { grid-template-columns: 1fr }
.main-grid .listrow h3 { font-size: 22px }
.main-grid .listrow p { margin-top: 10px }
.main-grid .listrow .ago { margin-top: 13px }

/* Liste générique : respiration avant la première ligne et après la pagination. */
.list { padding: 34px 0 60px }

/* Dans une archive de rubrique, les filtres tiennent déjà cet écart. */
.main-grid .list { padding: 0 }

.loadmore {
	display: block;
	width: 100%;
	margin-top: 34px;
	padding: 16px;
	border: 1px solid var(--line);
	font-size: 12.5px;
	font-weight: 800;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	transition: .15s;
}
.loadmore:hover { border-color: var(--or); color: var(--or) }

/* ═══════════════════════════════════════════════════════════
   14. RÉSULTATS ET CLASSEMENTS
   ═══════════════════════════════════════════════════════════ */

/* Une seule colonne, pleine largeur : la grille à deux colonnes de la maquette
   servait à poser un classement à droite des rencontres, et les classements ne
   vivent plus que sur la page de leur compétition. */
.results { background: var(--panel); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line) }
.res-block + .res-block { margin-top: 30px }
.res-title {
	font-family: var(--mono);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 10px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 4px;
	display: flex;
	justify-content: space-between;
}
.res-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	padding: 12px 10px;
	border-bottom: 1px solid var(--line-soft);
	transition: background .15s;
}
.res-row:hover { background: var(--panel-2) }
.res-row .t { font-size: 14px; font-weight: 600 }
.res-row .t.a { text-align: right }
.res-row .t.faded { color: var(--dim); font-weight: 500 }
.res-row .sc {
	font-family: var(--mono);
	font-size: 14px;
	font-weight: 700;
	background: var(--ink);
	padding: 5px 11px;
	letter-spacing: .06em;
}
.res-row .sc.live { color: var(--live) }

.tbl { width: 100%; border-collapse: collapse }
.tbl th {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	font-weight: 500;
	text-align: right;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--line);
}
.tbl th:nth-child(2) { text-align: left }
/* La colonne des rangs se réduit à son contenu : sur une table pleine largeur,
   la mise en page automatique lui donnait sinon tout l'espace libre, collant le
   « # » à « Équipe » et éloignant les rangs de leur équipe. */
.tbl th:first-child,
.tbl td:first-child { width: 1%; white-space: nowrap; padding-right: 10px }
.tbl td {
	padding: 11px 0;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13.5px;
	text-align: right;
	font-family: var(--mono);
	color: var(--muted);
}
.tbl td:nth-child(2) { text-align: left; font-family: var(--display); font-weight: 600; color: var(--text) }
.tbl td:last-child { color: var(--text); font-weight: 700 }
.tbl tr:hover td { background: var(--panel-2) }

.rk {
	display: inline-grid;
	place-items: center;
	width: 20px;
	height: 20px;
	font-size: 11px;
	font-weight: 700;
	color: var(--dim);
}
.rk.top { background: var(--live); color: var(--ink) }
.rk.eu { background: var(--or); color: var(--ink) }
.rk.rel { background: var(--rouge); color: #fff }

/* Intitulé de moitié de tableau — les deux conférences de la NBA. Reprend la
   typographie des en-têtes de colonne, sur le fond de survol des lignes. */
.tbl tr.grp td {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	font-weight: 500;
	text-align: left;
	background: var(--panel-2);
	padding: 11px 10px;
}
.tbl tr.grp:hover td { background: var(--panel-2) }

/* ═══════════════════════════════════════════════════════════
   15. NEWSLETTER
   ═══════════════════════════════════════════════════════════ */

.nl { padding: 64px 0 }
.nl-box {
	border: 1px solid var(--line);
	padding: 44px;
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	gap: 44px;
	align-items: center;
	background:
		radial-gradient(900px 240px at 8% 0%, rgba(232, 40, 60, .11), transparent 62%),
		var(--panel);
}
/* Sans prestataire d'envoi, l'encart n'a pas de formulaire : il tient
   alors sur toute la largeur plutôt que de laisser une colonne vide. */
.nl-box.no-form { grid-template-columns: 1fr }

.nl-box h2 {
	font-size: clamp(25px, 3vw, 36px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.025em;
	text-transform: uppercase;
	margin-top: 12px;
}
.nl-box p { font-family: var(--serif); font-size: 16px; color: var(--muted); margin-top: 14px; line-height: 1.55 }
.nl-line { display: flex; gap: 10px }
.nl-form input[type="email"] {
	flex: 1;
	min-width: 0;
	background: var(--ink);
	border: 1px solid var(--line);
	color: var(--text);
	padding: 14px 15px;
	font-size: 14px;
	font-family: var(--display);
}
.nl-form input[type="email"]::placeholder { color: var(--dim) }
.nl-form input[type="email"]:focus { outline: none; border-color: var(--or) }
.nl-note { font-family: var(--mono); font-size: 10px; color: var(--dim); margin-top: 12px; letter-spacing: .06em }

/* Cases à cocher des sports. Composant absent des maquettes — bâti avec les
   seuls jetons de DESIGN.md : filet d'un pixel, aucun arrondi, libellé en
   mono majuscules, rouge réservé à l'état coché. */
.nl-sports { border: 0; margin: 0 0 18px; padding: 0 }
.nl-sports legend {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dim);
	padding: 0;
	margin-bottom: 12px;
}
.nl-grid { display: flex; flex-wrap: wrap; gap: 8px }
.nl-sport {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	border: 1px solid var(--line);
	padding: 9px 12px;
	cursor: pointer;
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 500;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--muted);
	transition: border-color .15s, color .15s;
}
.nl-sport:hover { border-color: var(--muted); color: var(--text) }
.nl-sport input {
	-webkit-appearance: none;
	appearance: none;
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	margin: 0;
	border: 1px solid var(--line);
	background: var(--ink);
	transition: background .15s, border-color .15s;
}
.nl-sport input:checked { background: var(--rouge); border-color: var(--rouge) }
/* Confort : sans « :has », la case cochée suffit à lire la sélection. */
.nl-sport:has(input:checked) { border-color: var(--rouge); color: var(--text) }

.nl-all {
	margin-top: 12px;
	padding: 0;
	background: none;
	border: 0;
	border-bottom: 1px solid var(--line);
	cursor: pointer;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
}
.nl-all:hover { color: var(--or); border-color: var(--or) }

.nl-msg {
	font-family: var(--serif);
	font-size: 14.5px;
	line-height: 1.55;
	color: var(--text);
	background: var(--ink);
	border: 1px solid var(--line);
	padding: 12px 14px;
	margin-top: 14px;
}
.nl-msg.ko { border-color: var(--rouge) }
.nl-msg[hidden] { display: none }

.nl-mini { padding: 20px 16px }
.nl-mini p { font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0 0 14px }
.nl-mini .btn-sub { display: block; width: 100%; padding: 13px }

/* ═══════════════════════════════════════════════════════════
   16. EN-TÊTE DE RUBRIQUE ET SOUS-NAV COMPÉTITIONS
   ═══════════════════════════════════════════════════════════ */

/*
 * Le bandeau de titre prend la couleur du sport consulté, posée par
 * « data-sport » sur l'identifiant d'adresse du terme. Une archive de
 * compétition hérite de l'accent de son sport ; une rubrique sans sport
 * garde le rouge de marque, qui est aussi le repli déclaré ici.
 *
 * Deux déclarations « background » : la première sert aux navigateurs qui
 * ignorent « color-mix() » — ils affichent le dégradé rouge d'origine, sans
 * accent de sport, plutôt que pas de dégradé du tout.
 */
.cat-hero {
	--cat-accent: var(--rouge);
	border-bottom: 1px solid var(--line);
	background:
		radial-gradient(760px 220px at 4% 100%, rgba(232, 40, 60, .14), transparent 66%),
		var(--ink);
	background:
		radial-gradient(760px 220px at 4% 100%, color-mix(in srgb, var(--cat-accent) 14%, transparent), transparent 66%),
		var(--ink);
	padding: 38px 0 30px;
}
.cat-hero[data-sport="football"] { --cat-accent: var(--accent-football) }
.cat-hero[data-sport="basketball"] { --cat-accent: var(--accent-basketball) }
.cat-hero[data-sport="tennis"] { --cat-accent: var(--accent-tennis) }
.cat-hero[data-sport="rugby"] { --cat-accent: var(--accent-rugby) }
.cat-hero[data-sport="natation"] { --cat-accent: var(--accent-natation) }
.cat-hero[data-sport="biathlon"] { --cat-accent: var(--accent-biathlon) }
.cat-hero[data-sport="sports-olympiques"] { --cat-accent: var(--accent-sports-olympiques) }
.cat-hero[data-sport="multi-sports"] { --cat-accent: var(--accent-multi-sports) }
.cat-hero[data-sport="sports-de-combat"] { --cat-accent: var(--accent-sports-de-combat) }
.cat-hero .wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; flex-wrap: wrap }
.cat-title { display: flex; align-items: baseline; gap: 16px }
.cat-title h1 {
	font-size: clamp(40px, 6.4vw, 80px);
	font-weight: 900;
	line-height: .86;
	letter-spacing: -.042em;
	text-transform: uppercase;
}
.cat-title .count { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--dim); white-space: nowrap }
.cat-desc { font-family: var(--serif); font-size: 16.5px; line-height: 1.55; color: var(--muted); max-width: 46ch }

.compbar { position: sticky; top: 0; z-index: 50; background: var(--panel); border-bottom: 1px solid var(--line) }
/* La largeur maximale passe au conteneur : la piste doit pouvoir se
   rétrécir pour laisser les flèches à sa droite. */
.compbar-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: stretch }
.comp-track { flex: 1; min-width: 0; display: flex; overflow-x: auto; scrollbar-width: none; padding: 0 var(--gut) }
.comp-track::-webkit-scrollbar { display: none }
.comp {
	flex-shrink: 0;
	padding: 15px 18px;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--muted);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
	transition: .15s;
}
.comp:first-child { padding-left: 0 }
.comp:hover { color: var(--text) }
.comp.on { color: var(--text); border-bottom-color: var(--rouge) }

.cat-lead { padding: 40px 0 0 }
.lead-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 34px; align-items: center }
.lead-grid h2 {
	font-size: clamp(26px, 3.2vw, 40px);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -.03em;
	text-transform: uppercase;
}
.lead-grid h2 em { font-style: normal; color: var(--rouge) }
.lead-grid p { font-family: var(--serif); font-size: 17px; line-height: 1.55; color: var(--muted); margin-top: 15px }
.lead-meta {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--dim);
	margin-top: 16px;
}

/* ═══════════════════════════════════════════════════════════
   17. FILTRES
   ═══════════════════════════════════════════════════════════ */

.filters {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 34px 0 26px;
	padding: 14px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.tax-sport .filters { margin-top: 44px }
.filters .grp { display: flex; gap: 5px; flex-wrap: wrap }
.filters .sep { flex: 1 }

.pill {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	padding: 8px 13px;
	border: 1px solid var(--line);
	color: var(--muted);
	transition: .15s;
}
.pill:hover { border-color: var(--dim); color: var(--text) }
.pill.on { background: var(--text); color: var(--ink); border-color: var(--text) }

.sortsel {
	display: flex;
	align-items: center;
	gap: 9px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
}
.sortsel select {
	background: var(--panel);
	border: 1px solid var(--line);
	color: var(--text);
	font-family: var(--display);
	font-size: 12.5px;
	font-weight: 600;
	padding: 8px 11px;
}
.sortsel select:focus { outline: none; border-color: var(--or) }

/* ═══════════════════════════════════════════════════════════
   18. ARTICLE
   ═══════════════════════════════════════════════════════════ */

.progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--rouge); width: 0; z-index: 80 }

.crumbs { padding: 22px 0 0 }
.crumbs ol {
	display: flex;
	gap: 9px;
	list-style: none;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	flex-wrap: wrap;
}
.crumbs a:hover { color: var(--or) }
.crumbs li:not(:last-child)::after { content: '/'; margin-left: 9px; color: var(--line) }
.crumbs li:last-child { color: var(--muted) }

.art-head { padding: 26px 0 34px; max-width: 860px }
.chips { display: flex; gap: 8px; margin-bottom: 15px; flex-wrap: wrap }
.art-head .chips { margin-bottom: 18px }
h1.art-t {
	font-size: clamp(31px, 4.4vw, 54px);
	font-weight: 900;
	line-height: .98;
	letter-spacing: -.032em;
	text-transform: uppercase;
}
h1.art-t em { font-style: normal; color: var(--rouge) }
.chapo { font-family: var(--serif); font-size: 20px; line-height: 1.55; color: var(--muted); margin-top: 20px; max-width: 62ch }

.meta-bar {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-top: 26px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
}
.avatar {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rouge), #5B1220);
	display: grid;
	place-items: center;
	font-size: 13px;
	font-weight: 800;
	color: #fff;
	flex-shrink: 0;
	overflow: hidden;
}
/*
 * Initiales et photo occupent la même case de la grille. L'image vient
 * après dans le balisage : elle recouvre les initiales quand l'auteur a une
 * photo de profil, et le cercle rouge reste seul quand il n'en a pas.
 */
.avatar > .ini,
.avatar > img,
.avatar-xl > .ini,
.avatar-xl > img { grid-area: 1 / 1 }

.avatar > img,
.avatar-xl > img {
	width: 100%;
	height: 100%;
	display: block;
	object-fit: cover;
	border-radius: 50%;
}
.meta-txt { display: flex; flex-direction: column; gap: 3px; margin-right: auto }
.meta-txt .who { font-size: 13.5px; font-weight: 700 }
.meta-txt .when {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .07em;
	color: var(--dim);
	text-transform: uppercase;
}
.share { display: flex; gap: 7px }
.share a,
.share button {
	width: 34px;
	height: 34px;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	color: var(--muted);
	transition: .15s;
}
.share a:hover,
.share button:hover { border-color: var(--or); color: var(--or) }
.share .copied,
.share .copied:hover { border-color: var(--live); color: var(--live) }

figure.lead { margin-bottom: 40px }
figcaption {
	font-family: var(--mono);
	font-size: 10.5px;
	line-height: 1.6;
	letter-spacing: .04em;
	color: var(--dim);
	margin-top: 11px;
	padding-left: 12px;
	border-left: 2px solid var(--rouge);
}

.body-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 56px;
	align-items: start;
	padding-bottom: 60px;
}

.prose { max-width: 70ch }
.prose p { font-family: var(--serif); font-size: 19px; line-height: 1.72; color: var(--text); margin-bottom: 22px }
/*
 * Lettrine. « has-drop-cap » est la classe posée par l'éditeur de blocs ;
 * les valeurs ci-dessous écrasent celles de WordPress, qui charge sa propre
 * lettrine (8.4em, graisse 100, majuscule forcée) avant cette feuille.
 */
.prose p.lede::first-letter,
.prose p.has-drop-cap::first-letter {
	float: left;
	font-family: var(--display);
	font-weight: 900;
	font-size: 64px;
	line-height: .82;
	margin: 0;
	padding: 5px 11px 0 0;
	color: var(--rouge);
	text-transform: none;
}
.prose h2 {
	font-size: 26px;
	font-weight: 900;
	letter-spacing: -.02em;
	text-transform: uppercase;
	line-height: 1.08;
	margin: 44px 0 18px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}
.prose h3 { font-size: 19px; font-weight: 800; margin: 30px 0 12px; letter-spacing: -.01em }
.prose h4 { font-size: 16px; font-weight: 800; margin: 26px 0 10px; letter-spacing: -.01em }

/* Un titre en tête d'article n'a ni filet ni retrait : rien ne le précède. */
.prose > h2:first-child { margin-top: 0; padding-top: 0; border-top: none }

.prose a.inline,
.prose p a,
.prose li a,
.prose blockquote a { color: var(--or); border-bottom: 1px solid rgba(245, 184, 65, .4) }

.prose ul,
.prose ol { margin: 0 0 22px 0; padding-left: 0; list-style: none }
.prose ol { counter-reset: as360-ol }
.prose li {
	font-family: var(--serif);
	font-size: 18px;
	line-height: 1.65;
	color: var(--text);
	padding-left: 26px;
	position: relative;
	margin-bottom: 11px;
}
.prose li::before { content: ''; position: absolute; left: 0; top: 12px; width: 11px; height: 2px; background: var(--rouge) }
.prose ol > li { counter-increment: as360-ol }
.prose ol > li::before {
	content: counter(as360-ol) '.';
	top: 0;
	width: auto;
	height: auto;
	background: none;
	font-family: var(--mono);
	font-size: 13px;
	font-weight: 700;
	color: var(--rouge);
}

/* ─── Contenu produit par l'éditeur de blocs ───
   Les blocs sur mesure (fiche match, citation détachée, à lire aussi)
   viendront plus tard ; ces règles habillent les blocs natifs que les
   rédacteurs utilisent déjà. */
.prose figure { margin: 34px 0 }
.prose figure img { width: 100%; height: auto; display: block }

/* Le bloc citation de WordPress prend l'habit de la citation détachée. */
.prose blockquote { border-left: 3px solid var(--rouge); padding: 6px 0 6px 24px; margin: 36px 0 }
.prose blockquote p {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: -.02em;
	margin-bottom: 0;
}
.prose blockquote cite {
	display: block;
	margin-top: 13px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	font-style: normal;
}

.prose table { width: 100%; border-collapse: collapse; margin-bottom: 22px; font-size: 14px }
.prose th,
.prose td { border-bottom: 1px solid var(--line-soft); padding: 10px 8px; text-align: left }
.prose th {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	font-weight: 500;
	border-bottom-color: var(--line);
}

/* La colonne de lecture est plafonnée à 70ch (DESIGN.md § 3) : « large »
   et « pleine largeur » y occupent toute la colonne, pas davantage. */
.prose .alignwide,
.prose .alignfull { max-width: none; width: 100% }
.prose .aligncenter { margin-left: auto; margin-right: auto }
.prose .alignleft { float: left; margin: 6px 24px 16px 0; max-width: 50% }
.prose .alignright { float: right; margin: 6px 0 16px 24px; max-width: 50% }

.pull { border-left: 3px solid var(--rouge); padding: 6px 0 6px 24px; margin: 36px 0 }
.pull q {
	font-family: var(--display);
	font-size: 24px;
	font-weight: 800;
	line-height: 1.24;
	letter-spacing: -.02em;
	quotes: '«\00a0' '\00a0»';
	display: block;
}
.pull cite {
	display: block;
	margin-top: 13px;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	font-style: normal;
}

.alsoread {
	border-top: 1px solid var(--line);
	border-bottom: 1px solid var(--line);
	padding: 18px 0;
	margin: 34px 0;
	display: flex;
	gap: 16px;
	align-items: center;
}
.alsoread .media { width: 96px; flex-shrink: 0 }
.alsoread .t span {
	font-family: var(--mono);
	font-size: 9.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rouge);
	font-weight: 700;
}
.alsoread .t h4 { font-size: 16px; font-weight: 700; line-height: 1.3; margin-top: 7px }
.alsoread:hover h4 { color: var(--or) }

.tags { display: flex; gap: 8px; flex-wrap: wrap; margin: 34px 0 30px }
.tags a {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	border: 1px solid var(--line);
	padding: 7px 11px;
	color: var(--muted);
}
.tags a:hover { border-color: var(--or); color: var(--or) }

.authorbox { border: 1px solid var(--line); background: var(--panel); padding: 24px; display: flex; gap: 18px }
.authorbox .avatar { width: 54px; height: 54px; font-size: 17px }
.authorbox h4 { font-size: 16px; font-weight: 800 }
.authorbox .role {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--rouge);
	margin-top: 4px;
	display: block;
}
.authorbox p { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted); margin-top: 11px }

.related { border-top: 1px solid var(--line); padding: 56px 0; background: var(--panel) }

/* ═══════════════════════════════════════════════════════════
   19. FICHE MATCH
   ═══════════════════════════════════════════════════════════ */

.statbox { border: 1px solid var(--line); background: var(--panel); margin: 38px 0 }
.statbox .sb-head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px 18px;
	border-bottom: 1px solid var(--line);
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: var(--muted);
}
.sb-head .ft { color: var(--dim) }
.sb-score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; padding: 24px 18px }
.sb-score .team { font-size: 17px; font-weight: 800; letter-spacing: -.01em }
.sb-score .team.a { text-align: right }
.sb-score .team.lose { color: var(--muted) }
.sb-score .nums { font-family: var(--mono); font-size: 34px; font-weight: 700; letter-spacing: .02em; white-space: nowrap }
.sb-scorers {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
	padding: 0 18px 20px;
	border-bottom: 1px solid var(--line-soft);
}
.sb-scorers div { font-family: var(--mono); font-size: 11px; line-height: 1.9; color: var(--muted) }
.sb-scorers div:first-child { text-align: right }
.sb-scorers b { color: var(--text); font-weight: 500 }
.sb-stats { padding: 18px }
.stat { margin-bottom: 15px }
.stat:last-child { margin-bottom: 0 }
.stat .lbl {
	display: flex;
	justify-content: space-between;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 7px;
}
.stat .lbl b { color: var(--text); font-weight: 700 }
.bar { display: flex; height: 5px; background: var(--line-soft); overflow: hidden }
.bar i { display: block; height: 100% }
.bar i:first-child { background: var(--rouge) }
.bar i:last-child { background: var(--dim) }

/* ═══════════════════════════════════════════════════════════
   20. COLONNES LATÉRALES
   ═══════════════════════════════════════════════════════════ */

.rail { position: sticky; display: flex; flex-direction: column }
.body-grid .rail { top: 96px; gap: 34px }
.main-grid .rail { top: 104px; gap: 26px }

.rail-block h4 {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 11px;
	border-bottom: 2px solid var(--rouge);
}
.rail-block p { font-family: var(--serif); font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 14px 0 }
.rail-block .btn-sub { display: block; width: 100%; padding: 13px }

.toc { list-style: none; margin-top: 6px }
.toc a {
	display: block;
	padding: 11px 0 11px 14px;
	border-bottom: 1px solid var(--line-soft);
	font-size: 13.5px;
	font-weight: 600;
	color: var(--muted);
	border-left: 2px solid transparent;
	transition: .15s;
}
.toc a:hover,
.toc a.on { color: var(--text); border-left-color: var(--rouge) }

.rail-item { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft) }
.rail-item .num { font-family: var(--mono); font-size: 15px; font-weight: 700; color: var(--line); flex-shrink: 0; width: 20px }
.rail-item h5 { font-size: 14px; font-weight: 700; line-height: 1.3 }
.rail-item:hover h5 { color: var(--or) }
.rail-item .ago {
	font-family: var(--mono);
	font-size: 9.5px;
	color: var(--dim);
	margin-top: 6px;
	display: block;
	letter-spacing: .06em;
}

.rail-box { border: 1px solid var(--line); background: var(--panel) }
.rail-box h4 {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	padding: 13px 16px;
	border-bottom: 1px solid var(--line);
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.rail-box .j { color: var(--dim) }

.mrow {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 10px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--line-soft);
	transition: background .15s;
}
.mrow:last-child { border-bottom: none }
.mrow:hover { background: var(--panel-2) }
.mrow .t { font-size: 13px; font-weight: 600 }
.mrow .t.a { text-align: right }
.mrow .t.faded { color: var(--dim); font-weight: 500 }
.mrow .sc { font-family: var(--mono); font-size: 12.5px; font-weight: 700; background: var(--ink); padding: 4px 9px }
.mrow .sc.live { color: var(--live) }
.mrow .sc.next { color: var(--dim); font-weight: 400 }

/* Les articles du rail, encadrés, prennent la même marge que les scores. */
.rail-box .rail-item { padding: 12px 16px }
.rail-box .rail-item:last-child { border-bottom: none }

.rail-box .tbl th { font-size: 9.5px; padding: 12px 16px 9px }
.rail-box .tbl th:nth-child(2) { padding-left: 0 }
.rail-box .tbl th:first-child { padding-right: 8px }
.rail-box .tbl td { padding: 9px 16px; font-size: 13px }
.rail-box .tbl td:nth-child(2) { padding-left: 0 }
.rail-box .tbl td:first-child { padding-right: 8px }
.rail-box .tbl tr:last-child td { border-bottom: none }
.rail-box .rk { width: 19px; height: 19px; font-size: 10.5px }

.rail-foot {
	display: block;
	padding: 12px 16px;
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dim);
	border-top: 1px solid var(--line);
}
.rail-foot:hover { color: var(--or) }

/* ═══════════════════════════════════════════════════════════
   21. RECHERCHE
   ═══════════════════════════════════════════════════════════ */

.searchhero {
	border-bottom: 1px solid var(--line);
	padding: 44px 0 34px;
	background: radial-gradient(700px 200px at 6% 100%, rgba(232, 40, 60, .11), transparent 66%), var(--ink);
}
.searchhero .eyeb { font-family: var(--mono); font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dim) }
.bigsearch { display: flex; gap: 0; margin-top: 16px; max-width: 760px; border-bottom: 2px solid var(--rouge) }
.bigsearch input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--text);
	font-family: var(--display);
	font-size: clamp(24px, 3.6vw, 40px);
	font-weight: 900;
	letter-spacing: -.03em;
	padding: 6px 0 14px;
}
.bigsearch input::placeholder { color: var(--line) }
.bigsearch input:focus { outline: none }
.bigsearch button { padding: 0 6px 12px; color: var(--rouge) }
.searchmeta {
	font-family: var(--mono);
	font-size: 11px;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: var(--muted);
	margin-top: 18px;
}
.searchmeta b { color: var(--text) }
.sugg { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 20px; align-items: center }
.sugg .lbl {
	font-family: var(--mono);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--dim);
	margin-right: 4px;
}
.sugg a { font-size: 12px; font-weight: 600; border: 1px solid var(--line); padding: 7px 12px; color: var(--muted); transition: .15s }
.sugg a:hover { border-color: var(--or); color: var(--or) }

/* ═══════════════════════════════════════════════════════════
   22. AUTEUR
   ═══════════════════════════════════════════════════════════ */

.authorhero { border-bottom: 1px solid var(--line); padding: 44px 0 36px; background: var(--panel) }
.authorhero .wrap { display: flex; gap: 28px; align-items: flex-start; flex-wrap: wrap }
.avatar-xl {
	width: 104px;
	height: 104px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--rouge), #5B1220);
	display: grid;
	place-items: center;
	font-size: 34px;
	font-weight: 900;
	color: #fff;
	flex-shrink: 0;
	overflow: hidden;
}
/* L'image de cette pastille est traitée avec l'autre, section 18. */
.author-txt { flex: 1; min-width: 260px }
.author-txt .role {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--rouge);
	font-weight: 700;
}
.author-txt h1 {
	font-size: clamp(30px, 4vw, 46px);
	font-weight: 900;
	letter-spacing: -.032em;
	text-transform: uppercase;
	line-height: 1;
	margin-top: 11px;
}
.author-txt .bio { font-family: var(--serif); font-size: 17px; line-height: 1.6; color: var(--muted); margin-top: 15px; max-width: 58ch }
.author-stats { display: flex; gap: 34px; margin-top: 22px; flex-wrap: wrap }
.astat .n { font-family: var(--mono); font-size: 24px; font-weight: 700; line-height: 1 }
.astat .l { font-family: var(--mono); font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dim); margin-top: 6px }
.author-links { display: flex; gap: 8px; margin-top: 22px }
.author-links a {
	width: 36px;
	height: 36px;
	border: 1px solid var(--line);
	display: grid;
	place-items: center;
	color: var(--muted);
	transition: .15s;
}
.author-links a:hover { border-color: var(--or); color: var(--or) }

.author .sec-head { margin: 44px 0 26px }
.author .sec-head h2 { font-size: clamp(20px, 2.4vw, 27px) }

/* ═══════════════════════════════════════════════════════════
   23. PAGE STATIQUE
   ═══════════════════════════════════════════════════════════ */

.pagehead { padding: 44px 0 30px; border-bottom: 1px solid var(--line) }
.pagehead h1 {
	font-size: clamp(32px, 4.6vw, 56px);
	font-weight: 900;
	letter-spacing: -.034em;
	text-transform: uppercase;
	line-height: .96;
}
.pagehead .sub { font-family: var(--serif); font-size: 18px; line-height: 1.55; color: var(--muted); margin-top: 16px; max-width: 58ch }

.page-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; align-items: start; padding: 44px 0 60px }
.page-grid .prose p { font-size: 18px; margin-bottom: 20px }
.page-grid .prose h2 { font-size: 24px; line-height: 1.08; margin: 38px 0 16px }
.page-grid .prose ul { margin-bottom: 20px }
.page-grid .prose li { font-size: 17px; margin-bottom: 10px }

/* Sans widget dans la colonne, la page occupe toute la largeur. */
.page-grid.no-rail { grid-template-columns: 1fr }

.page-rail { display: flex; flex-direction: column; gap: 22px }
.box { border: 1px solid var(--line); background: var(--panel); padding: 22px }
.box h4 {
	font-family: var(--mono);
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--muted);
	padding-bottom: 12px;
	border-bottom: 1px solid var(--line);
	margin-bottom: 14px;
}
.box p { font-family: var(--serif); font-size: 15px; line-height: 1.6; color: var(--muted); margin-bottom: 14px }
.box a.mail { font-family: var(--mono); font-size: 12.5px; color: var(--or); display: block; padding: 4px 0 }
.box .btn-sub { display: block; width: 100%; padding: 13px }

/* ═══════════════════════════════════════════════════════════
   24. ERREUR 404
   ═══════════════════════════════════════════════════════════ */

.e404 { padding: 80px 0 70px; text-align: center; border-bottom: 1px solid var(--line) }
.e404 .code {
	font-size: clamp(90px, 20vw, 220px);
	font-weight: 900;
	line-height: .78;
	letter-spacing: -.06em;
	color: transparent;
	-webkit-text-stroke: 2px var(--line);
}
.e404 h1 { font-size: clamp(24px, 3.4vw, 40px); font-weight: 900; letter-spacing: -.028em; text-transform: uppercase; margin-top: 22px }
.e404 p { font-family: var(--serif); font-size: 18px; line-height: 1.6; color: var(--muted); margin: 16px auto 0; max-width: 50ch }
.e404 .acts { display: flex; gap: 10px; justify-content: center; margin-top: 28px; flex-wrap: wrap }
.e404 .searchline { max-width: 460px; margin: 34px auto 0; display: flex; border-bottom: 2px solid var(--rouge) }
.e404 .searchline input {
	flex: 1;
	background: transparent;
	border: none;
	color: var(--text);
	font-family: var(--display);
	font-size: 17px;
	font-weight: 600;
	padding: 10px 0;
}
.e404 .searchline input::placeholder { color: var(--dim) }
.e404 .searchline input:focus { outline: none }
.e404 .searchline button { color: var(--rouge); padding: 0 4px }
.error404 .section { padding: 52px 0 }
.error404 .sec-head { margin-top: 0 }

/* ═══════════════════════════════════════════════════════════
   25. PAGINATION
   Le balisage vient de paginate_links() : la page courante est
   un span.current, les points de suspension un span.dots.
   ═══════════════════════════════════════════════════════════ */

.pagi { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 34px; font-family: var(--mono); font-size: 12px }
.main-grid .pagi { margin-top: 22px }
.pagi .page-numbers {
	width: 34px;
	height: 34px;
	display: grid;
	place-items: center;
	border: 1px solid var(--line);
	color: var(--muted);
	transition: .15s;
}
.pagi .current { background: var(--rouge); border-color: var(--rouge); color: #fff; font-weight: 700 }
.pagi .page-numbers:not(.current):hover { border-color: var(--dim); color: var(--text) }
.pagi .dots { border: none; width: auto; color: var(--dim); padding: 0 4px }

/* ═══════════════════════════════════════════════════════════
   26. PIED DE PAGE
   ═══════════════════════════════════════════════════════════ */

footer.site { border-top: 1px solid var(--line); padding: 52px 0 30px; background: var(--deep) }
.f-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px }
.f-col h4 {
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--dim);
	margin-bottom: 15px;
}
.f-col a { display: block; font-size: 13.5px; color: var(--muted); padding: 5px 0 }
.f-col a:hover { color: var(--text) }
.f-about p { font-family: var(--serif); font-size: 14px; color: var(--muted); line-height: 1.6; margin-top: 14px; max-width: 34ch }
.f-about .logo { display: inline-flex }
/* Appel à la newsletter, absent de la maquette : le pied de page en avait
   besoin pour que le bouton soit présent partout. Les valeurs de « .btn-sub »
   sont répétées, « .f-col a » étant plus spécifique. */
.f-about .btn-sub {
	display: inline-block;
	margin-top: 18px;
	color: #fff;
	font-size: 12.5px;
	padding: 11px 18px;
}
.f-about .btn-sub:hover { color: #fff }
.f-bot {
	margin-top: 40px;
	padding-top: 22px;
	border-top: 1px solid var(--line-soft);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-family: var(--mono);
	font-size: 10.5px;
	letter-spacing: .06em;
	color: var(--dim);
}

/* ═══════════════════════════════════════════════════════════
   27. POINTS DE RUPTURE
   ═══════════════════════════════════════════════════════════ */

/*
 * L'en-tête au complet réclamait 1214 px : logo 248, navigation 614, quatre
 * boutons 264, gouttières et écarts 88. Le retrait du bouton « compte » —
 * il n'y a pas d'espace visiteur — en rend 48 : un bouton de 36 px et son
 * écart de 12. Il en faut donc 1166. En dessous, quelque chose doit partir,
 * sans quoi le bouton d'abonnement sort de l'écran.
 *
 * 1080–1220 px : l'abonnement s'efface, la navigation reste.
 * Sous 1080 px : la navigation passe dans le panneau du burger, qui reprend
 * le lien effacé.
 *
 * Le seuil de 1220 px est conservé tel quel : il laisse tenir l'en-tête sur
 * un écran de 1280 px, la résolution d'ordinateur portable la plus répandue,
 * et la marge disponible y est passée de 40 à 88 px. C'est cette marge qui
 * absorbera le retour du bouton « compte » ; l'abaisser pour gagner quelques
 * pixels obligerait à la refaire ce jour-là. Rallonger le nom du site ou
 * ajouter un sport à la navigation la consomme aussi.
 */
@media (max-width: 1220px) {
	.head-actions .btn-sub { display: none }
}

@media (max-width: 1080px) {
	nav.main { display: none }
	.burger { display: grid }

	/* Sans la navigation entre eux, le logo et les boutons se retrouvent
	   collés : on les renvoie chacun à son bord. */
	header.site .wrap { justify-content: space-between }

	.hero-grid { grid-template-columns: 1fr }
	.hero-side { border-left: none; padding-left: 0; border-top: 1px solid var(--line); padding-top: 26px }
	.grid { grid-template-columns: repeat(2, 1fr) }
	.grid3 { grid-template-columns: repeat(2, 1fr) }
	.body-grid { grid-template-columns: 1fr; gap: 44px }
	.main-grid { grid-template-columns: 1fr; gap: 44px }
	.page-grid { grid-template-columns: 1fr; gap: 38px }
	.lead-grid { grid-template-columns: 1fr; gap: 22px }
	.rail { position: static }
	.f-grid { grid-template-columns: 1fr 1fr; gap: 28px }
}

@media (max-width: 760px) {
	:root { --gut: 16px }

	.topbar .links { display: none }

	header.site .wrap { height: 62px; gap: 12px }
	.logo { font-size: 21px }

	.scorebar-label { padding-left: var(--gut) }
	.scorebar-label .txt { display: none }

	.section { padding: 42px 0 }
	.hero { padding-bottom: 42px }
	.deck { font-size: 16px }
	.grid { grid-template-columns: 1fr; gap: 28px }
	.grid3 { grid-template-columns: 1fr; gap: 26px }

	.cat-hero { padding: 26px 0 22px }
	.listrow,
	.main-grid .listrow { grid-template-columns: 1fr; gap: 13px }
	.listrow h3,
	.main-grid .listrow h3 { font-size: 19px }
	.filters { gap: 10px }
	.sortsel { width: 100% }

	.prose p,
	.page-grid .prose p { font-size: 17px }
	.prose p.lede::first-letter,
	.prose p.has-drop-cap::first-letter { font-size: 52px }
	.pull q,
	.prose blockquote p { font-size: 20px }
	.alsoread .media { width: 78px }
	.authorbox { flex-direction: column; gap: 14px }
	.sb-score .nums { font-size: 27px }
	.sb-score .team { font-size: 15px }

	.avatar-xl { width: 74px; height: 74px; font-size: 24px }

	.nl-box { grid-template-columns: 1fr; padding: 28px; gap: 26px }
	.nl-line { flex-direction: column }

	.f-grid { grid-template-columns: 1fr }
}

/*
 * Sous 400 px, le logo à 21 px et les trois boutons demandent 374 px :
 * deux de trop sur un écran de 360. Le logo cède les quelques pixels
 * manquants, plutôt que de laisser le burger sortir de l'écran.
 */
@media (max-width: 400px) {
	.logo { font-size: 19px }
}

/* Le panneau du burger n'existe que là où la navigation est masquée. */
@media (min-width: 1081px) {
	.mobile-nav { display: none }
}

/* ═══════════════════════════════════════════════════════════
   28. MOUVEMENT RÉDUIT
   ═══════════════════════════════════════════════════════════ */

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