/* ==========================================================================
   FootFeed — styles principaux
   Tokens → base → layout → composants. Mobile d'abord.
   ========================================================================== */

/* ---------- Tokens ---------- */
:root {
	color-scheme: light;
	--bg: #f4f6f8;
	--surface: #ffffff;
	--surface-2: #e9edf1;
	--text: #121a22;
	--muted: #5b6875;
	--line: #dce2e8;
	--link: #1f5fd1;
	--accent: #a86a00;          /* ambre "tableau d'affichage", assombri pour le contraste */

	--font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
	--font-body: "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	--wrap: 46rem;
	--gutter: 1rem;
	--nav-h: 4rem;
	--radius-pill: 999px;
	--radius: 10px;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #10161d;
		--surface: #18212b;
		--surface-2: #212c38;
		--text: #e9eef3;
		--muted: #8e9baa;
		--line: #263240;
		--link: #6ea8ff;
		--accent: #f5b83d;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #10161d;
	--surface: #18212b;
	--surface-2: #212c38;
	--text: #e9eef3;
	--muted: #8e9baa;
	--line: #263240;
	--link: #6ea8ff;
	--accent: #f5b83d;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: env(safe-area-inset-top, 0px);
}

body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1rem/1.5 var(--font-body);
	padding-bottom: calc(var(--nav-h) + env(safe-area-inset-bottom, 0px));
}

img { max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 4px; }

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.ff-skip {
	position: absolute; left: -999px; top: 0;
	background: var(--surface); padding: .5rem 1rem; z-index: 100;
}
.ff-skip:focus { left: 1rem; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ---------- Layout ---------- */
.ff-wrap {
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* ---------- Header ---------- */
.ff-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: var(--bg);
	border-bottom: 1px solid var(--line);
	padding-top: env(safe-area-inset-top, 0px);
}
.ff-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 3.5rem;
}
.ff-brand {
	display: flex; align-items: center; gap: .6rem;
	text-decoration: none;
}
.ff-brand__logo { width: 2rem; height: 2rem; object-fit: contain; }
.ff-brand__name {
	font: 700 1.6rem/1 var(--font-display);
	letter-spacing: -.01em;
}

.ff-iconbtn {
	display: inline-grid; place-items: center;
	width: 2.75rem; height: 2.75rem;
	background: none; border: 0; color: var(--text);
	cursor: pointer; border-radius: 50%;
}
.ff-iconbtn:hover { background: var(--surface-2); }

/* ---------- Barre des clubs ---------- */
.ff-clubs {
	border-bottom: 1px solid var(--line);
	overflow-x: auto;
	scrollbar-width: none;
}
.ff-clubs::-webkit-scrollbar { display: none; }
.ff-clubs__list {
	display: flex; gap: .75rem;
	list-style: none; margin: 0;
	padding: .9rem var(--gutter);
	max-width: var(--wrap); margin-inline: auto;
}
.ff-clubs__item {
	display: grid; place-items: center;
	width: 3.25rem; height: 3.25rem;
	border-radius: 50%;
	background: var(--surface-2);
}
.ff-clubs__item img { width: 2.25rem; height: 2.25rem; object-fit: contain; }

/* ---------- Fil d'actus ---------- */
.ff-newslist { margin-top: .25rem; }

.ff-day {
	margin: 1rem calc(var(--gutter) * -1) 0;
	padding: .55rem var(--gutter);
	background: var(--surface-2);
	font: 600 1.15rem/1.2 var(--font-display);
	letter-spacing: .01em;
}

.ff-news {
	display: grid;
	grid-template-columns: 3.4rem 1fr;
	gap: .75rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--line);
}
/* Le signe distinctif : l'heure façon tableau d'affichage. */
.ff-news__time {
	font: 600 1.15rem/1.35 var(--font-display);
	font-variant-numeric: tabular-nums;
	color: var(--accent);
}
.ff-news__title {
	margin: 0;
	font: 600 1.05rem/1.35 var(--font-body);
}
.ff-news__title a { text-decoration: none; }
.ff-news__title a:hover { text-decoration: underline; text-underline-offset: 3px; }

.ff-news__meta {
	display: flex; flex-wrap: wrap; align-items: baseline;
	gap: .35rem .9rem;
	margin: .45rem 0 0;
	font-size: .9rem;
	color: var(--muted);
}
.ff-tag {
	color: var(--link);
	text-underline-offset: 3px;
}

.ff-empty { color: var(--muted); padding: 2rem 0; }

/* ---------- Pages ---------- */
.ff-pagetitle {
	font: 700 clamp(1.7rem, 5vw, 2.4rem)/1.1 var(--font-display);
	margin: 1.25rem 0 .75rem;
}
.ff-prose { line-height: 1.65; max-width: 68ch; }
.ff-prose a { color: var(--link); }
.ff-404 { padding-block: 2rem; }

.ff-button {
	display: inline-block;
	padding: .65rem 1.2rem;
	border-radius: var(--radius-pill);
	background: var(--link); color: #fff;
	font-weight: 600; text-decoration: none;
}

.navigation.pagination { padding: 1.25rem 0; }
.nav-links { display: flex; gap: .5rem; flex-wrap: wrap; }
.nav-links .page-numbers {
	padding: .4rem .8rem; border-radius: var(--radius-pill);
	background: var(--surface-2); text-decoration: none;
}
.nav-links .current { background: var(--link); color: #fff; }

/* ---------- Navigation du bas ---------- */
.ff-bottomnav {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	z-index: 30;
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding-bottom: env(safe-area-inset-bottom, 0px);
}
.ff-bottomnav__list {
	display: grid; grid-template-columns: repeat(5, 1fr);
	list-style: none; margin: 0 auto; padding: 0;
	max-width: var(--wrap);
}
.ff-bottomnav__link {
	position: relative;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	gap: .15rem;
	height: var(--nav-h);
	color: var(--muted);
	font-size: .78rem;
	text-decoration: none;
}
.ff-bottomnav__link.is-active { color: var(--text); }
.ff-bottomnav__link.is-active::before {
	content: "";
	position: absolute; top: 0; left: 25%; right: 25%;
	height: 3px; border-radius: 0 0 3px 3px;
	background: var(--accent);
}

/* ---------- Menu latéral ---------- */
.ff-drawer {
	position: fixed; inset: 0; z-index: 50;
	display: flex; flex-direction: column;
	background: var(--bg);
	padding-top: env(safe-area-inset-top, 0px);
	padding-bottom: env(safe-area-inset-bottom, 0px);
	overflow-y: auto;
}
.ff-drawer[hidden] { display: none; }

.ff-drawer__top {
	display: flex; align-items: center; gap: .75rem;
	padding: .75rem var(--gutter);
	border-bottom: 1px solid var(--line);
}
.ff-search {
	flex: 1;
	display: flex; align-items: center; gap: .5rem;
	padding: 0 1rem;
	border: 1.5px solid var(--text);
	border-radius: var(--radius-pill);
}
.ff-search input {
	flex: 1; min-width: 0;
	border: 0; background: none; color: inherit;
	font: inherit; padding: .7rem 0;
}
.ff-search input:focus { outline: none; }
.ff-search:focus-within { border-color: var(--link); }

.ff-leagues { list-style: none; margin: 0; padding: 0; }
.ff-leagues a {
	display: flex; align-items: center; gap: 1rem;
	padding: 1.1rem var(--gutter);
	border-bottom: 1px solid var(--line);
	text-decoration: none;
}
.ff-leagues__flag { font-size: 1.5rem; line-height: 1; }
.ff-leagues__name { flex: 1; font: 600 1.35rem/1.2 var(--font-display); }

.ff-drawer__menu { list-style: none; margin: 0; padding: 0; }
.ff-drawer__menu a {
	display: block; padding: .9rem var(--gutter);
	border-bottom: 1px solid var(--line); text-decoration: none;
}

.ff-drawer__bottom {
	margin-top: auto;
	border-top: 1px solid var(--line);
	padding: .75rem var(--gutter);
}
.ff-theme-toggle {
	display: flex; align-items: center; gap: .75rem;
	width: 100%;
	background: none; border: 0; color: inherit;
	font: inherit; cursor: pointer; padding: .5rem 0;
}
.ff-switch {
	margin-left: auto;
	width: 2.75rem; height: 1.6rem;
	border-radius: var(--radius-pill);
	background: var(--surface-2);
	border: 1px solid var(--line);
	position: relative;
	transition: background .2s;
}
.ff-switch::after {
	content: "";
	position: absolute; top: 2px; left: 2px;
	width: 1.25rem; height: 1.25rem; border-radius: 50%;
	background: var(--text);
	transition: transform .2s;
}
.ff-theme-toggle[aria-pressed="true"] .ff-switch { background: var(--link); }
.ff-theme-toggle[aria-pressed="true"] .ff-switch::after { transform: translateX(1.15rem); background: #fff; }

body.ff-no-scroll { overflow: hidden; }

/* ---------- Desktop ---------- */
@media (min-width: 900px) {
	:root { --gutter: 1.5rem; }
	.ff-news { grid-template-columns: 4rem 1fr; }
	.ff-news__title { font-size: 1.12rem; }
}

/* ---------- v0.2 : blason, page club/ligue ---------- */
.ff-news__aside {
	display: flex; flex-direction: column; align-items: flex-start; gap: .4rem;
}
.ff-news__crest {
	display: grid; place-items: center;
	width: 2rem; height: 2rem;
	border-radius: 50%;
	background: var(--surface-2);
}
.ff-news__crest img { width: 1.35rem; height: 1.35rem; object-fit: contain; }

.ff-clubs__initials { font: 700 .85rem/1 var(--font-display); }

.ff-entity { background: var(--surface); border-bottom: 1px solid var(--line); }
.ff-entity__inner {
	display: flex; align-items: center; gap: 1rem;
	padding-block: 1.25rem .75rem;
}
.ff-entity__logo { width: 4rem; height: 4rem; object-fit: contain; }
.ff-entity__kind { margin: 0; color: var(--muted); font-size: .95rem; }
.ff-entity__kind a { text-decoration: none; }
.ff-entity__name { margin: 0; font: 700 2.4rem/1 var(--font-display); }

.ff-tabs {
	display: flex; gap: 1.75rem;
	overflow-x: auto; scrollbar-width: none;
}
.ff-tabs__item {
	padding: .85rem 0;
	color: var(--muted);
	font: 600 1.15rem/1 var(--font-display);
	text-decoration: none;
	border-bottom: 3px solid transparent;
	white-space: nowrap;
}
.ff-tabs__item.is-active { color: var(--text); border-bottom-color: var(--accent); }