/* =========================================================
   Softly Sports — main.css
   Squelette CSS minimal. Toutes les valeurs client (couleurs)
   sont injectees en CSS variables depuis inc/enqueue.php a
   partir des Reglages > Softly Sports.
   ========================================================= */

:root {
	/* Tokens par defaut (overridables via Reglages > couleurs). */
	--color-primary:   #0a3d91;
	--color-secondary: #ffffff;
	--color-accent:    #ffc107;
	--color-ink:       #111418;
	--color-paper:     #ffffff;
	--color-muted:     #5b6470;
	--color-line:      #e6e8ec;

	--font-sans:    "Archivo", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--font-display: "Bricolage Grotesque", "Archivo", system-ui, sans-serif;
	--font-serif:   "Instrument Serif", "Times New Roman", Georgia, serif;

	/* Surface "midnight pitch" — utilisée par le header pour la sensation broadcast. */
	--ss-ink-deep:    #0b0d12;
	--ss-ink-soft:    #15181f;
	--ss-line-soft:   rgba(255, 255, 255, 0.08);
	--ss-line-strong: rgba(255, 255, 255, 0.18);
	--ss-accent:        #d85817;  /* orange LALIGAF — accent (à la place du doré) */

	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;

	--container-max: 1240px;
	--container-pad: clamp(16px, 4vw, 32px);
}

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

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.55;
	color: var(--color-ink);
	background: var(--color-paper);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

a { color: var(--color-primary); text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }

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

h1, h2, h3, h4 {
	font-family: var(--font-display);
	line-height: 1.15;
	margin: 0 0 0.5em;
}

/* ------- Layout ------- */
.ss-container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}

/* ------- Skip link (a11y) ------- */
.ss-skip-link {
	position: absolute; left: -9999px; top: auto;
	width: 1px; height: 1px; overflow: hidden;
}
.ss-skip-link:focus {
	position: fixed; left: 16px; top: 16px;
	width: auto; height: auto; padding: 8px 16px;
	background: var(--color-ink); color: var(--color-paper);
	z-index: 9999;
}

/* =========================================================
   HEADER — broadcast / editorial sport
   ========================================================= */
.ss-header {
	position: sticky;
	top: 0;
	z-index: 50;
	color: #f4f5f7;
	background: var(--ss-ink-deep);
	isolation: isolate;
	font-family: var(--font-sans);
	transition: background .35s ease, box-shadow .35s ease;
}
.ss-header a { color: inherit; text-decoration: none; }
.ss-header a:hover { text-decoration: none; }

/* Effet sticky-scrolled : translucide + blur + ombre + liseré rouge. */
.ss-header.is-scrolled {
	background: color-mix(in srgb, var(--ss-ink-deep) 86%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 10px 30px -20px rgba(0, 0, 0, .8);
}
.ss-header.is-scrolled .ss-header__utility { max-height: 0; opacity: 0; padding-block: 0; pointer-events: none; }
.ss-header.is-scrolled .ss-header__inner   { padding-block: 12px; }

/* --- 1. Bandeau utilitaire --- */
.ss-header__utility {
	font-family: var(--font-sans);
	font-size: 11px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(244, 245, 247, .65);
	border-bottom: 1px solid var(--ss-line-soft);
	background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
	max-height: 60px;
	overflow: hidden;
	transition: max-height .35s ease, opacity .25s ease, padding .35s ease;
}
.ss-header__utility-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-block: 10px;
	min-height: 36px;
}
.ss-header__utility-left,
.ss-header__utility-right {
	display: inline-flex;
	align-items: center;
	gap: 22px;
}
.ss-header__season {
	display: inline-flex;
	align-items: baseline;
	gap: 8px;
}
.ss-header__season em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ss-accent);
}
.ss-header__season span {
	font-variant-numeric: tabular-nums;
	color: #f4f5f7;
}
.ss-header__live {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 10px 4px 8px;
	border: 1px solid var(--ss-line-strong);
	border-radius: 999px;
	transition: border-color .2s ease, background .2s ease;
}
.ss-header__live:hover { border-color: var(--ss-accent); background: rgba(216, 88, 23, .08); }
.ss-header__live-dot {
	width: 7px; height: 7px; border-radius: 50%;
	background: #e63946;
	box-shadow: 0 0 0 0 rgba(230, 57, 70, .7);
	animation: ss-live-pulse 1.6s ease-out infinite;
}
@keyframes ss-live-pulse {
	0%   { box-shadow: 0 0 0 0   rgba(230, 57, 70, .7); }
	70%  { box-shadow: 0 0 0 7px rgba(230, 57, 70, 0); }
	100% { box-shadow: 0 0 0 0   rgba(230, 57, 70, 0); }
}
.ss-header__util-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: rgba(244, 245, 247, .75);
	transition: color .2s ease;
}
.ss-header__util-link:hover { color: var(--ss-accent); }
.ss-header__util-link--lang::after {
	content: "";
	display: inline-block;
	width: 1px; height: 12px;
	background: var(--ss-line-strong);
	margin-left: 14px;
}
.ss-header__util-icon { width: 14px; height: 14px; }

/* --- 2. Barre principale --- */
.ss-header__bar     { position: relative; }
.ss-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 32px;
	padding-block: 22px;
	transition: padding .3s ease;
}
.ss-header__brand {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}
.ss-header__logo {
	max-height: 52px;
	width: auto;
	transition: max-height .3s ease, filter .3s ease;
}
.ss-header.is-scrolled .ss-header__logo { max-height: 38px; }
.ss-header__wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(22px, 2.2vw, 28px);
	letter-spacing: -0.015em;
	color: #fff;
	line-height: 1;
	text-transform: uppercase;
}
.ss-header__wordmark::after {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--ss-accent);
	margin-left: 6px;
	transform: translateY(-2px);
}

/* --- Menu principal --- */
.ss-header__nav { justify-self: center; }
.ss-menu {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 4px;
}
.ss-menu > li { position: relative; }
.ss-menu > li > a {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 12px 16px;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(244, 245, 247, .82);
	transition: color .2s ease;
}
.ss-menu > li > a::before {
	content: "";
	position: absolute;
	left: 16px; right: 16px;
	bottom: 6px;
	height: 2px;
	background: var(--ss-accent);
	transform-origin: left;
	transform: scaleX(0);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.ss-menu > li > a:hover,
.ss-menu > li:focus-within > a,
.ss-menu > li.current-menu-item > a,
.ss-menu > li.current-menu-ancestor > a {
	color: #fff;
}
.ss-menu > li > a:hover::before,
.ss-menu > li:focus-within > a::before,
.ss-menu > li.current-menu-item > a::before,
.ss-menu > li.current-menu-ancestor > a::before {
	transform: scaleX(1);
}

/* Indicateur chevron pour parents avec sous-menu */
.ss-menu .menu-item-has-children > a::after {
	content: "";
	width: 6px; height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
	opacity: .55;
	margin-left: 4px;
	transition: transform .2s ease, opacity .2s ease;
}
.ss-menu .menu-item-has-children:hover > a::after,
.ss-menu .menu-item-has-children:focus-within > a::after {
	opacity: 1;
	transform: rotate(225deg) translateY(-2px);
}

/* Sous-menu : panneau sombre, hairline rouge */
.ss-menu .sub-menu {
	position: absolute;
	top: calc(100% - 4px);
	left: 50%;
	transform: translateX(-50%) translateY(8px);
	min-width: 240px;
	list-style: none;
	margin: 0;
	padding: 10px;
	background: var(--ss-ink-soft);
	border: 1px solid var(--ss-line-soft);
	border-top: 1px solid var(--ss-accent);
	box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .8);
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .2s ease, transform .25s ease, visibility .2s;
}
.ss-menu li:hover > .sub-menu,
.ss-menu li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transform: translateX(-50%) translateY(0);
}
.ss-menu .sub-menu a {
	display: block;
	padding: 10px 14px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: .04em;
	color: rgba(244, 245, 247, .78);
	border-left: 2px solid transparent;
	transition: color .15s ease, background .15s ease, border-color .15s ease, padding .15s ease;
}
.ss-menu .sub-menu a:hover,
.ss-menu .sub-menu a:focus {
	color: #fff;
	background: rgba(255, 255, 255, .04);
	border-left-color: var(--ss-accent);
	padding-left: 18px;
}

/* --- 3. Actions (CTA + toggle mobile) --- */
.ss-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	justify-self: end;
}
.ss-header__cta {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	padding: 12px 20px 12px 22px;
	font-family: var(--font-sans);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ss-ink-deep);
	background: var(--ss-accent);
	border-radius: 2px;
	clip-path: polygon(0 0, 100% 0, calc(100% - 10px) 100%, 0 100%);
	padding-right: 30px;
	transition: background .2s ease, transform .2s ease, color .2s ease;
}
.ss-header__cta:hover {
	background: #ef6e2c;
	color: var(--ss-ink-deep);
	transform: translateY(-1px);
}
.ss-header__cta-arrow { width: 22px; height: 10px; }

/* --- Toggle (hamburger) --- */
.ss-header__toggle {
	display: none;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	background: transparent;
	border: 1px solid var(--ss-line-strong);
	color: #fff;
	font-family: var(--font-sans);
	font-weight: 600;
	font-size: 11px;
	letter-spacing: .18em;
	text-transform: uppercase;
	cursor: pointer;
	border-radius: 2px;
	transition: border-color .2s ease, background .2s ease;
}
.ss-header__toggle:hover { border-color: var(--ss-accent); background: rgba(216, 88, 23, .06); }
.ss-header__toggle-burger {
	display: inline-flex;
	flex-direction: column;
	justify-content: space-between;
	width: 18px; height: 12px;
}
.ss-header__toggle-burger span {
	display: block;
	width: 100%;
	height: 1.5px;
	background: currentColor;
	transition: transform .3s ease, opacity .2s ease, width .3s ease;
	transform-origin: center;
}
.ss-header__toggle-burger span:nth-child(2) { width: 70%; align-self: flex-end; }
.ss-header__toggle[aria-expanded="true"] .ss-header__toggle-burger span:nth-child(1) { transform: translateY(5px) rotate(45deg); width: 100%; }
.ss-header__toggle[aria-expanded="true"] .ss-header__toggle-burger span:nth-child(2) { opacity: 0; }
.ss-header__toggle[aria-expanded="true"] .ss-header__toggle-burger span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --- 4. Liseré diagonal "jersey stripe" --- */
.ss-header__stripe {
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 6px;
	pointer-events: none;
	overflow: hidden;
}
.ss-header__stripe-fill,
.ss-header__stripe-accent {
	position: absolute;
	inset: 0;
	transform-origin: left bottom;
}
.ss-header__stripe-fill {
	background: linear-gradient(90deg,
		var(--color-primary) 0%,
		color-mix(in srgb, var(--color-primary) 70%, var(--ss-accent)) 60%,
		var(--ss-accent) 100%);
	clip-path: polygon(0 100%, 100% 100%, 100% 30%, 0 100%);
}
.ss-header__stripe-accent {
	background: #fff;
	height: 1px;
	top: auto; bottom: 0;
	opacity: .15;
}

/* --- 5. Drawer mobile (plein écran) --- */
.ss-drawer {
	position: fixed;
	inset: 0;
	z-index: 60;
	background: var(--ss-ink-deep);
	color: #f4f5f7;
	overflow-y: auto;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-12px);
	transition: opacity .35s ease, transform .4s cubic-bezier(.22, 1, .36, 1), visibility .35s;
}
.ss-drawer[hidden] { display: none; }
.ss-drawer.is-open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}
/* Couche pelouse (cohérence avec CTA / calendrier-hero). */
.ss-drawer::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grass-turf.png");
	background-size: cover;
	background-position: center;
	filter: saturate(.85) brightness(.32) contrast(1.1);
	pointer-events: none;
	z-index: 0;
}
/* Glow rouge + orange + voile sombre par-dessus. */
.ss-drawer::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(600px 400px at 90% 0%, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent 55%),
		radial-gradient(500px 500px at 0% 100%, color-mix(in srgb, var(--ss-accent) 30%, transparent), transparent 65%),
		linear-gradient(180deg, color-mix(in srgb, var(--ss-ink-deep) 60%, transparent), color-mix(in srgb, var(--ss-ink-deep) 88%, transparent));
	pointer-events: none;
	z-index: 0;
}
.ss-drawer__inner {
	position: relative;
	z-index: 1;
	max-width: var(--container-max);
	margin-inline: auto;
	padding: clamp(20px, 4vw, 36px) var(--container-pad) 48px;
	min-height: 100%;
	display: flex;
	flex-direction: column;
}
.ss-drawer__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--ss-line-soft);
	/* Sticky pour que le bouton close reste accessible même quand on scrolle dans un menu long. */
	position: sticky;
	top: 0;
	background: linear-gradient(180deg, var(--ss-ink-deep) 70%, transparent);
	padding-top: clamp(12px, 2vh, 20px);
	z-index: 2;
}
.ss-drawer__eyebrow em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 22px;
	color: var(--ss-accent);
}
.ss-drawer__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: #fff;
	transition: opacity .2s ease;
}
.ss-drawer__brand:hover { opacity: .85; text-decoration: none; }
.ss-drawer__logo {
	max-height: 48px;
	width: auto;
	display: block;
}
.ss-drawer__wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	letter-spacing: -0.015em;
	color: #fff;
	text-transform: uppercase;
	line-height: 1;
}
.ss-drawer__wordmark::after {
	content: "";
	display: inline-block;
	width: 6px; height: 6px;
	background: var(--ss-accent);
	margin-left: 6px;
	transform: translateY(-2px);
}
.ss-drawer__close {
	background: transparent;
	border: 1px solid var(--ss-line-strong);
	color: #fff;
	width: 44px; height: 44px;
	border-radius: 50%;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: border-color .2s ease, transform .3s ease;
}
.ss-drawer__close:hover { border-color: var(--ss-accent); transform: rotate(90deg); }
.ss-drawer__close svg { width: 20px; height: 20px; }

.ss-drawer__nav { flex: 1; padding-block: 32px; }
.ss-drawer-menu {
	list-style: none;
	margin: 0; padding: 0;
	counter-reset: ss-drawer;
}
.ss-drawer-menu > li {
	counter-increment: ss-drawer;
	border-bottom: 1px solid var(--ss-line-soft);
	opacity: 0;
	transform: translateX(-16px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.22, 1, .36, 1);
}
.ss-drawer.is-open .ss-drawer-menu > li {
	opacity: 1;
	transform: translateX(0);
	transition-delay: calc(.08s * var(--ss-i, 0) + .15s);
}
.ss-drawer-menu > li:nth-child(1) { --ss-i: 0; }
.ss-drawer-menu > li:nth-child(2) { --ss-i: 1; }
.ss-drawer-menu > li:nth-child(3) { --ss-i: 2; }
.ss-drawer-menu > li:nth-child(4) { --ss-i: 3; }
.ss-drawer-menu > li:nth-child(5) { --ss-i: 4; }
.ss-drawer-menu > li:nth-child(6) { --ss-i: 5; }
.ss-drawer-menu > li:nth-child(7) { --ss-i: 6; }
.ss-drawer-menu > li:nth-child(8) { --ss-i: 7; }
.ss-drawer-menu > li > a {
	display: flex;
	align-items: baseline;
	gap: 18px;
	padding: 22px 4px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(26px, 5.5vw, 40px);
	letter-spacing: -0.02em;
	color: #fff;
	transition: color .2s ease, transform .3s ease, padding-left .25s ease;
	position: relative;
	min-height: 44px; /* touch target Apple HIG */
}
.ss-drawer-menu > li > a::before {
	content: "0" counter(ss-drawer);
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 16px;
	color: var(--ss-accent);
	letter-spacing: 0;
	min-width: 32px;
}
.ss-drawer-menu > li > a:hover,
.ss-drawer-menu > li > a:focus-visible {
	color: var(--ss-accent);
	transform: translateX(6px);
	text-decoration: none;
}
/* Indicateur d'item actif. */
.ss-drawer-menu > li.current-menu-item > a,
.ss-drawer-menu > li.current-menu-ancestor > a {
	color: var(--ss-accent);
	padding-left: 16px;
}
.ss-drawer-menu > li.current-menu-item > a::after,
.ss-drawer-menu > li.current-menu-ancestor > a::after {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 4px; height: 60%;
	background: var(--ss-accent);
	transform: translateY(-50%);
}
.ss-drawer-menu .sub-menu {
	list-style: none;
	margin: 0 0 16px 50px;
	padding: 0;
}
.ss-drawer-menu .sub-menu a {
	display: block;
	padding: 8px 0;
	font-size: 15px;
	color: rgba(244, 245, 247, .65);
	letter-spacing: .02em;
	transition: color .15s ease;
}
.ss-drawer-menu .sub-menu a:hover { color: #fff; }

/* --- Mini-card "Prochain match" dans le drawer mobile --- */
.ss-drawer__next-match {
	display: grid;
	gap: 14px;
	margin: clamp(20px, 3vh, 32px) 0;
	padding: 20px 22px;
	background: color-mix(in srgb, #fff 5%, transparent);
	border: 1px solid var(--ss-line-soft);
	border-radius: 6px;
	color: #fff;
	transition: border-color .2s ease, background .2s ease, transform .25s ease;
	position: relative;
	overflow: hidden;
}
.ss-drawer__next-match:hover {
	border-color: var(--ss-accent);
	background: color-mix(in srgb, var(--ss-accent) 8%, transparent);
	text-decoration: none;
	transform: translateY(-1px);
}
.ss-drawer__next-match-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(255,255,255,.65);
}
.ss-drawer__next-match-dot {
	width: 6px; height: 6px;
	background: var(--ss-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--ss-accent) 70%, transparent);
	animation: ss-live-pulse 2s ease-out infinite;
}
.ss-drawer__next-match-row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
}
.ss-drawer__next-match-crest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	background: #fff;
	border-radius: 50%;
	padding: 4px;
}
.ss-drawer__next-match-crest:nth-child(1) { justify-self: end; }
.ss-drawer__next-match-crest img { width: 100%; height: 100%; object-fit: contain; }
.ss-drawer__next-match-vs {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: 0.04em;
	color: var(--ss-accent);
}
.ss-drawer__next-match-when {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.75);
	text-align: center;
	font-variant-numeric: tabular-nums;
}

.ss-drawer__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px 24px;
	padding-top: 24px;
	border-top: 1px solid var(--ss-line-soft);
}
.ss-drawer__cta { background: var(--ss-accent); border-color: var(--ss-accent); color: var(--ss-ink-deep); }
.ss-drawer__cta:hover { background: #ef6e2c; border-color: #ef6e2c; color: var(--ss-ink-deep); }
.ss-drawer__foot-link { color: rgba(244, 245, 247, .8); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; }
.ss-drawer__foot-link:hover { color: var(--ss-accent); }
.ss-drawer__season {
	margin-left: auto;
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(244, 245, 247, .55);
}
.ss-drawer__season em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 15px;
	color: var(--ss-accent);
	letter-spacing: 0;
	text-transform: none;
	margin-right: 4px;
}

/* --- Body lock pendant drawer ouvert --- */
body.ss-no-scroll { overflow: hidden; }

/* --- Responsive --- */
@media (max-width: 1024px) {
	.ss-header__nav  { display: none; }
	.ss-header__cta  { display: none; }
	.ss-header__toggle { display: inline-flex; }
	.ss-header__inner  { grid-template-columns: 1fr auto; }
}
@media (max-width: 640px) {
	.ss-header__utility-left .ss-header__season span { display: none; }
	.ss-header__util-link span:not(.screen-reader-text) { display: none; }
	.ss-header__util-link--lang::after { display: none; }
	.ss-header__utility-inner { gap: 12px; }
	.ss-header__utility-left,
	.ss-header__utility-right { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-header__live-dot { animation: none; }
	.ss-drawer-menu > li { transition: opacity .2s ease; transform: none; }
	.ss-menu > li > a::before { transition: none; }
}

/* =========================================================
   HERO — editorial broadcast
   ========================================================= */
.ss-hero {
	position: relative;
	color: #f4f5f7;
	/* Le hero remplit exactement le viewport sous le header.
	   Fallback : 140px ≈ utility-bar + main-bar. JS met à jour --ss-header-h. */
	min-height: calc(100svh - var(--ss-header-h, 140px));
	display: flex;
	align-items: stretch;
	padding-top:    clamp(64px, 10vh, 120px);
	padding-bottom: clamp(40px, 6vh, 80px);
	overflow: hidden;
	isolation: isolate;
	background: var(--ss-ink-deep);
}
/* Fallback ancien browsers sans svh */
@supports not (height: 100svh) {
	.ss-hero { min-height: calc(100vh - 140px); }
}
.ss-hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ss-hero__bg-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .68;
	filter: grayscale(.25) contrast(1.05) brightness(1) saturate(1.1);
	mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

/* --- Hero slideshow (multi-slides crossfade) --- */
.ss-hero__slides {
	position: absolute;
	inset: 0;
}
.ss-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	filter: grayscale(.25) contrast(1.05) brightness(1) saturate(1.1);
	mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 12%, #000 88%, transparent 100%);
	transition: opacity 1.2s cubic-bezier(.45, .05, .55, .95);
	pointer-events: none;
}
.ss-hero__slide.is-active { opacity: .68; }

/* Dots de navigation (subtils, en bas du hero). */
.ss-hero__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(12px, 2vh, 24px);
	transform: translateX(-50%);
	display: flex;
	gap: 8px;
	pointer-events: auto;
	z-index: 5;
}
.ss-hero__dot {
	width: 28px;
	height: 3px;
	border-radius: 2px;
	background: rgba(255,255,255,.25);
	transition: background .3s ease, width .3s ease;
}
.ss-hero__dot.is-active {
	background: var(--ss-accent);
	width: 44px;
}
@media (prefers-reduced-motion: reduce) {
	.ss-hero__slide { transition: none; }
}
/* Sur mobile, on cache la vidéo dynamique mais on garde le slideshow image-only. */
@media (max-width: 720px) {
	.ss-hero__slide--video { display: none; }
}
/* La vidéo masque la photo statique quand elle est jouée. */
.ss-hero--video .ss-hero__bg-photo { opacity: 0; }
.ss-hero__bg-photo {
	position: absolute; inset: 0;
	background-image: var(--ss-hero-img);
	background-size: cover;
	background-position: center;
	opacity: .35;
	filter: grayscale(.4) contrast(1.05);
	mask-image: linear-gradient(180deg, transparent 0%, #000 25%, #000 75%, transparent 100%);
	transition: opacity .8s ease;
}
/* Sur petits écrans : on coupe la vidéo (bande passante) et on revient à la photo. */
@media (max-width: 720px) {
	.ss-hero__bg-video { display: none; }
	.ss-hero--video .ss-hero__bg-photo { opacity: .35; }
}
@media (prefers-reduced-motion: reduce) {
	.ss-hero__bg-video { display: none; }
	.ss-hero--video .ss-hero__bg-photo { opacity: .35; }
}
.ss-hero--video .ss-hero__bg-glow,
.ss-hero--photo .ss-hero__bg-glow {
	background:
		radial-gradient(900px 600px at 12% -10%, color-mix(in srgb, var(--color-primary) 60%, transparent), transparent 55%),
		radial-gradient(900px 600px at 88% 110%, color-mix(in srgb, var(--ss-accent) 35%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--ss-ink-deep) 30%, transparent), color-mix(in srgb, var(--ss-ink-deep) 55%, transparent));
}
.ss-hero__bg-grid {
	position: absolute; inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
	background-size: 80px 80px;
	mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
}
.ss-hero__bg-glow {
	position: absolute; inset: 0;
	background:
		radial-gradient(900px 600px at 12% -10%, color-mix(in srgb, var(--color-primary) 70%, transparent), transparent 55%),
		radial-gradient(800px 500px at 88% 110%, color-mix(in srgb, var(--ss-accent) 45%, transparent), transparent 60%);
}
.ss-hero__bg-noise {
	position: absolute; inset: 0;
	opacity: .06;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.ss-hero__inner {
	position: relative;
	max-width: 1240px;
	width: 100%;
	margin: 0 auto;
	padding-inline: var(--container-pad);
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: clamp(24px, 4vh, 48px);
}

.ss-hero__eyebrow {
	display: inline-flex;
	align-self: flex-start;
	align-items: center;
	gap: 12px;
	padding: 8px 16px;
	border: 1px solid var(--ss-line-strong);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(244, 245, 247, .85);
}
.ss-hero__eyebrow em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--ss-accent);
}
.ss-hero__eyebrow-dot {
	width: 6px; height: 6px;
	background: var(--ss-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--ss-accent) 25%, transparent);
}
.ss-hero__eyebrow-sep { opacity: .4; }

.ss-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	line-height: 0.92;
	letter-spacing: -0.035em;
	margin: 0;
	color: #fff;
}
.ss-hero__title-main { white-space: nowrap; }
.ss-hero__title-pre,
.ss-hero__title-main,
.ss-hero__title-quote { display: block; }
.ss-hero__title-pre {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 3vw, 36px);
	letter-spacing: -0.01em;
	color: var(--ss-accent);
	margin-bottom: 16px;
	line-height: 1.1;
}
.ss-hero__title-main {
	font-size: clamp(44px, min(9.5vw, 13.5vh), 148px);
	text-transform: uppercase;
}
.ss-hero__title-main::after {
	content: "";
	display: inline-block;
	vertical-align: super;
	width: 14px; height: 14px;
	margin-left: 8px;
	background: var(--ss-accent);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ss-hero__title-quote {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(18px, 2vw, 26px);
	letter-spacing: -0.005em;
	color: rgba(244, 245, 247, .7);
	margin-top: 26px;
	max-width: 28ch;
}

.ss-hero__tagline {
	font-family: var(--font-sans);
	font-size: clamp(14px, 1.4vw, 18px);
	color: rgba(244, 245, 247, .65);
	max-width: 52ch;
	margin: 0;
	line-height: 1.5;
}
.ss-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; }

.ss-hero__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	width: 100%;
	margin: 0;
	border-top: 1px solid var(--ss-line-soft);
	padding-top: clamp(20px, 3vh, 32px);
}
.ss-hero__stat {
	padding-right: 24px;
	border-right: 1px solid var(--ss-line-soft);
}
.ss-hero__stat:last-child { border-right: none; padding-right: 0; }
.ss-hero__stat dt {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: rgba(244, 245, 247, .55);
	margin-bottom: 8px;
}
.ss-hero__stat dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 48px);
	letter-spacing: -0.02em;
	color: #fff;
	line-height: 1;
}
.ss-hero__stat-italic em {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--ss-accent);
}
@media (max-width: 720px) {
	.ss-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 18px 0; }
	.ss-hero__stat:nth-child(2) { border-right: none; padding-right: 0; }
	.ss-hero__stat { border-bottom: 1px solid var(--ss-line-soft); padding-bottom: 14px; }
	.ss-hero__stat:nth-last-child(-n+2) { border-bottom: none; padding-bottom: 0; }
}

/* Viewports courts : on serre tout pour rester above the fold. */
@media (max-height: 760px) {
	.ss-hero { padding-block: clamp(20px, 3vh, 40px); }
	.ss-hero__inner { gap: clamp(12px, 1.8vh, 22px); }
	.ss-hero__title-pre   { font-size: clamp(18px, 2.4vh, 28px); margin-bottom: 6px; }
	.ss-hero__title-main  { font-size: clamp(40px, 11vh, 90px); }
	.ss-hero__title-quote { font-size: clamp(15px, 2vh, 20px); margin-top: 10px; }
	.ss-hero__stat dd     { font-size: clamp(22px, 4vh, 36px); }
}
@media (max-height: 560px) {
	.ss-hero__eyebrow { padding: 6px 12px; font-size: 10px; }
	.ss-hero__title-quote { display: none; }
	.ss-hero__tagline     { display: none; }
	.ss-hero__stats { padding-top: 14px; }
	.ss-hero__stat dt { font-size: 10px; margin-bottom: 4px; }
	.ss-hero__stat dd { font-size: clamp(20px, 5vh, 32px); }
}

/* ------- Sections / cards ------- */
.ss-section          { padding-block: clamp(48px, 8vw, 96px); }
.ss-section__header  { margin-bottom: 32px; text-align: center; }
.ss-section__title   { font-size: clamp(28px, 4vw, 44px); }
.ss-section__intro   { color: var(--color-muted); }

.ss-cards {
	list-style: none; margin: 0; padding: 0;
	display: grid; gap: 24px;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.ss-card {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	overflow: hidden;
	transition: transform .2s ease, box-shadow .2s ease;
}
.ss-card:hover    { transform: translateY(-2px); box-shadow: 0 6px 22px rgba(0,0,0,.06); }
.ss-card__media   { display: block; }
.ss-card__media img { width: 100%; height: auto; object-fit: cover; aspect-ratio: 4 / 3; }
.ss-card__body    { padding: 16px 18px 20px; }
.ss-card__title   { font-size: 18px; margin: 0 0 6px; }
.ss-card__title a { color: var(--color-ink); }
.ss-card__excerpt { color: var(--color-muted); margin: 0 0 10px; }
.ss-card__meta    { color: var(--color-muted); font-size: 14px; margin: 0; }

/* ------- Pages / single ------- */
.ss-page, .ss-single { padding-block: clamp(48px, 8vw, 96px); }
.ss-page__title, .ss-single__title { font-size: clamp(28px, 4vw, 44px); }
.ss-single__meta { color: var(--color-muted); margin: 0 0 24px; }
.ss-single__media img { border-radius: var(--radius-md); margin-bottom: 24px; }
.ss-page__content, .ss-single__content { max-width: 760px; margin-inline: auto; }

/* ------- Boutons ------- */
.ss-button {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 12px 22px;
	background: var(--color-primary);
	color: #fff;
	border: 2px solid var(--color-primary);
	border-radius: var(--radius-sm);
	font-weight: 700;
	font-size: 15px;
	letter-spacing: .01em;
	text-decoration: none;
	transition: background .15s ease, border-color .15s ease, transform .15s ease;
}
.ss-button:hover, .ss-button:focus {
	background: color-mix(in srgb, var(--color-primary) 85%, black);
	border-color: color-mix(in srgb, var(--color-primary) 85%, black);
	color: #fff;
	text-decoration: none;
	transform: translateY(-1px);
}
.ss-button--primary { /* alias explicite */ }
.ss-button--ghost {
	background: transparent;
	color: #fff;
	border-color: rgba(255,255,255,.6);
}
.ss-button--ghost:hover, .ss-button--ghost:focus {
	background: rgba(255,255,255,.12);
	border-color: #fff;
	color: #fff;
}

/* ------- Etats vides ------- */
.ss-empty { color: var(--color-muted); text-align: center; padding: 32px 0; }

/* ------- Pagination ------- */
.ss-pagination { margin-top: 40px; text-align: center; }

/* ------- Footer ------- */
.ss-footer {
	background: var(--color-ink);
	color: color-mix(in srgb, var(--color-paper) 85%, transparent);
	padding-block: 48px 32px;
}
/* Quand le footer suit le CTA, on supprime aussi la marge top du CTA pour
   un enchaînement parfaitement continu dark → dark. */
.ss-section--cta + .ss-footer { margin-top: 0; }
.ss-footer__inner {
	display: grid;
	gap: 32px;
	grid-template-columns: 1.4fr 1fr 1fr;
}
@media (max-width: 768px) {
	.ss-footer__inner { grid-template-columns: 1fr; gap: 28px; }
}
.ss-footer__brand    { display: grid; gap: 8px; align-content: start; }
.ss-footer__logo     { max-height: 56px; width: auto; margin-bottom: 4px; }
.ss-footer__name     { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.01em; color: var(--color-paper); margin: 0; text-transform: uppercase; }
.ss-footer__motto    { font-family: var(--font-serif); font-style: italic; color: color-mix(in srgb, var(--color-paper) 70%, transparent); margin: 0; }
.ss-footer__col-title {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--ss-accent);
	margin: 0 0 14px;
}
.ss-footer__socials {
	display: flex;
	gap: 10px;
	margin: 14px 0 0;
	padding: 0;
	list-style: none;
}
.ss-footer__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	border: 1px solid rgba(255,255,255,.15);
	border-radius: 50%;
	color: rgba(255,255,255,.7);
	transition: color .2s ease, border-color .2s ease;
}
.ss-footer__socials a:hover { color: var(--ss-accent); border-color: var(--ss-accent); }

.ss-footer-menu {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column; gap: 10px;
}
.ss-footer-menu a { color: color-mix(in srgb, var(--color-paper) 80%, transparent); transition: color .2s ease; }
.ss-footer-menu a:hover { color: var(--ss-accent); text-decoration: none; }

.ss-footer__contact p { margin: 0 0 8px; color: color-mix(in srgb, var(--color-paper) 80%, transparent); font-style: normal; }
.ss-footer__contact a { color: inherit; }
.ss-footer__contact a:hover { color: var(--ss-accent); text-decoration: none; }
.ss-footer__address { font-family: var(--font-serif); font-style: italic; font-size: 14px; line-height: 1.5; }

.ss-footer__bottom {
	grid-column: 1 / -1;
	margin-top: 12px;
	padding-top: 24px;
	border-top: 1px solid color-mix(in srgb, var(--color-paper) 12%, transparent);
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
}
.ss-footer__copy {
	margin: 0;
	font-size: 13px;
	color: color-mix(in srgb, var(--color-paper) 65%, transparent);
}
.ss-footer__legal {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	gap: 20px;
}
.ss-footer__legal a {
	font-size: 12px;
	color: color-mix(in srgb, var(--color-paper) 65%, transparent);
	letter-spacing: .04em;
	transition: color .2s ease;
}
.ss-footer__legal a:hover { color: var(--ss-accent); text-decoration: none; }

/* =========================================================
   Landing — sections
   ========================================================= */

/* ------- Bandeau equipes ------- */
.ss-teams-strip {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	gap: 20px;
	align-items: start;
}
.ss-teams-strip__item a {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 16px 8px;
	border-radius: var(--radius-md);
	color: var(--color-ink);
	text-decoration: none;
	transition: background .15s ease, transform .15s ease;
}
.ss-teams-strip__item a:hover {
	background: color-mix(in srgb, var(--color-primary) 6%, transparent);
	transform: translateY(-2px);
	text-decoration: none;
}
.ss-teams-strip__logo,
.ss-teams-strip__placeholder {
	width: 72px; height: 72px;
	object-fit: contain;
	border-radius: 50%;
	background: var(--color-paper);
	border: 1px solid var(--color-line);
}
.ss-teams-strip__placeholder {
	display: inline-flex;
	align-items: center; justify-content: center;
	font-weight: 800;
	font-size: 26px;
	color: var(--color-primary);
	text-transform: uppercase;
}
.ss-teams-strip__name {
	font-size: 13px;
	text-align: center;
	color: var(--color-muted);
	line-height: 1.3;
}

/* ------- Matchs (prochains + resultats) ------- */
.ss-matches-grid {
	display: grid;
	gap: 32px;
}
@media (min-width: 768px) {
	.ss-matches-grid { grid-template-columns: 1fr 1fr; gap: 48px; }
}
.ss-match-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-direction: column;
	gap: 10px;
}
.ss-match-list__item {
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
	background: var(--color-paper);
	transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.ss-match-list__item:hover {
	border-color: color-mix(in srgb, var(--color-primary) 50%, var(--color-line));
	box-shadow: 0 4px 16px rgba(0,0,0,.04);
}
.ss-match-list__link {
	display: flex; align-items: center; justify-content: space-between;
	gap: 16px;
	padding: 14px 18px;
	color: var(--color-ink);
	text-decoration: none;
}
.ss-match-list__link:hover { text-decoration: none; }
.ss-match-list__title { font-weight: 600; }
.ss-match-list__time,
.ss-match-list__score {
	font-size: 14px;
	color: var(--color-muted);
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}
.ss-match-list__score {
	font-weight: 800;
	color: var(--color-primary);
	font-size: 16px;
}

/* ------- Classement ------- */
.ss-standings {
	overflow-x: auto;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-md);
}
.ss-standings__table {
	width: 100%;
	border-collapse: collapse;
	background: var(--color-paper);
}
.ss-standings__table th,
.ss-standings__table td {
	padding: 12px 14px;
	border-bottom: 1px solid var(--color-line);
	text-align: left;
}
.ss-standings__table thead th {
	background: color-mix(in srgb, var(--color-primary) 8%, var(--color-paper));
	font-size: 13px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-ink);
}
.ss-standings__table tbody tr:last-child td { border-bottom: none; }
.ss-standings__table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-paper)); }
.ss-standings__table a { color: var(--color-ink); font-weight: 600; }
.ss-standings__table .ss-num { text-align: center; font-variant-numeric: tabular-nums; }
.ss-standings__note { margin-top: 12px; font-size: 13px; color: var(--color-muted); text-align: center; }

/* ------- Section news (overrides cards densite landing) ------- */
.ss-section--news .ss-cards { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }

/* ------- Sponsors ------- */
.ss-sponsors {
	list-style: none; margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap: 32px;
	align-items: center;
}
.ss-sponsors__item {
	display: flex; align-items: center; justify-content: center;
	padding: 18px;
}
.ss-sponsors__logo {
	max-height: 64px; width: auto;
	filter: grayscale(1) opacity(.65);
	transition: filter .2s ease;
}
.ss-sponsors__item:hover .ss-sponsors__logo { filter: none; }

/* ------- CTA block (section finale) ------- */
.ss-section--cta {
	background: color-mix(in srgb, var(--color-ink) 96%, transparent);
	color: #fff;
}
.ss-section--cta .ss-empty,
.ss-section--cta .ss-section__title { color: #fff; }
.ss-cta-block {
	text-align: center;
	padding-block: 24px;
}
.ss-cta-block__title { font-size: clamp(26px, 3vw, 36px); margin: 0 0 12px; color: #fff; }
.ss-cta-block__lead  { color: rgba(255,255,255,.85); margin: 0 0 24px; }
.ss-section--cta .ss-button {
	background: var(--color-secondary);
	border-color: var(--color-secondary);
	color: #fff;
}
.ss-section--cta .ss-button:hover {
	background: color-mix(in srgb, var(--color-secondary) 85%, black);
	border-color: color-mix(in srgb, var(--color-secondary) 85%, black);
	color: #fff;
}

/* ------- Espacements verticaux landing ------- */
.ss-section + .ss-section { padding-top: 0; }
.ss-section--teams-strip { padding-top: clamp(48px, 8vw, 96px); }

/* =========================================================
   SECTION HEADERS — editorial split
   ========================================================= */
.ss-section__header { margin-bottom: clamp(32px, 4vw, 56px); }
.ss-section__header--split {
	display: flex;
	align-items: end;
	justify-content: space-between;
	gap: 32px;
	text-align: left;
	flex-wrap: wrap;
}
.ss-section__eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 12px;
	position: relative;
	padding-left: 28px;
}
.ss-section__eyebrow::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	width: 20px;
	height: 1px;
	background: var(--ss-accent);
	transform: translateY(-50%);
}
.ss-section__eyebrow em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-ink);
}
.ss-section__eyebrow--light em { color: #fff; }
.ss-section__eyebrow--light { color: rgba(255,255,255,.7); }
.ss-section__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 4vw, 52px);
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
}
.ss-section__more {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-ink);
	padding-bottom: 4px;
	border-bottom: 1px solid var(--color-ink);
	transition: color .2s ease, gap .25s ease, border-color .2s ease;
}
.ss-section__more:hover {
	color: var(--color-primary);
	border-color: var(--color-primary);
	gap: 18px;
	text-decoration: none;
}

/* =========================================================
   MARQUEE équipes
   ========================================================= */
.ss-marquee {
	background: #2a6d34; /* vert pelouse — fond du bandeau qui défile */
	color: #fff;
	padding-block: 24px;
	overflow: hidden;
	border-top: 1px solid rgba(255, 255, 255, .12);
	border-bottom: 1px solid rgba(0, 0, 0, .25);
	position: relative;
	z-index: 1;
	isolation: isolate;
	mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
/* Texture pelouse réelle par-dessus le vert plein — donne la matière du gazon. */
.ss-marquee::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grass-turf.png");
	background-size: cover;
	background-position: center;
	opacity: .75;
	mix-blend-mode: multiply;
	z-index: -1;
	pointer-events: none;
}
.ss-marquee__track { position: relative; z-index: 1; }
.ss-marquee__track {
	display: flex;
	gap: 0;
	animation: ss-marquee 50s linear infinite;
	width: max-content;
}
.ss-marquee__list {
	display: flex;
	align-items: center;
	gap: 36px;
	list-style: none;
	margin: 0;
	padding: 0 18px;
}
.ss-marquee__item {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	letter-spacing: -0.01em;
	color: rgba(255, 255, 255, .82);
	text-transform: uppercase;
	transition: color .2s ease;
	white-space: nowrap;
}
.ss-marquee__item:hover { color: #fff; }
.ss-marquee__logo {
	width: 36px; height: 36px;
	object-fit: contain;
	background: #fff;
	border-radius: 50%;
	padding: 4px;
}
.ss-marquee__sep { color: #fff; opacity: .65; margin-left: 18px; font-size: 12px; }
@keyframes ss-marquee {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
	.ss-marquee__track { animation: none; }
}

/* =========================================================
   MATCHDAY — prochain match + résultats
   ========================================================= */
.ss-section--matchday { padding-block: clamp(64px, 9vw, 110px); padding-top: clamp(72px, 10vw, 120px); }
.ss-matchday {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: 32px;
	align-items: stretch;
}
@media (max-width: 880px) { .ss-matchday { grid-template-columns: 1fr; } }

.ss-matchday__feature {
	position: relative;
	padding: clamp(32px, 5vw, 56px);
	background:
		radial-gradient(600px 400px at 80% 0%, color-mix(in srgb, var(--color-primary) 18%, transparent), transparent 60%),
		linear-gradient(160deg, var(--ss-ink-deep), var(--ss-ink-soft));
	color: #fff;
	border-radius: 4px;
	overflow: hidden;
	isolation: isolate;
	min-height: 320px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 32px;
}
.ss-matchday__feature::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
	background-size: 60px 60px;
	mask-image: linear-gradient(135deg, #000, transparent 70%);
	pointer-events: none;
	z-index: -1;
}
.ss-matchday__feature-tag {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 6px 14px;
	background: rgba(255,255,255,.08);
	border: 1px solid var(--ss-line-strong);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
}
.ss-matchday__feature-dot {
	width: 7px; height: 7px;
	background: var(--ss-accent);
	border-radius: 50%;
	box-shadow: 0 0 0 0 color-mix(in srgb, var(--ss-accent) 70%, transparent);
	animation: ss-live-pulse 1.8s ease-out infinite;
}
.ss-matchday__feature-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
	color: #fff;
	max-width: 22ch;
}
.ss-matchday__feature-title a { color: inherit; }
.ss-matchday__feature-title a:hover { color: var(--ss-accent); text-decoration: none; }
.ss-matchday__feature-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 18px;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: rgba(255,255,255,.7);
	margin: 0;
}
.ss-matchday__feature-meta time { font-variant-numeric: tabular-nums; }
.ss-matchday__feature-venue::before { content: "·"; margin-right: 18px; color: var(--ss-accent); }
.ss-matchday__feature-deco {
	position: absolute;
	bottom: -60px;
	right: -60px;
	width: 240px;
	height: 240px;
	border-radius: 50%;
	background: radial-gradient(circle, color-mix(in srgb, var(--ss-accent) 25%, transparent), transparent 70%);
	pointer-events: none;
}

.ss-matchday__results {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	padding: clamp(24px, 3vw, 32px);
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.ss-matchday__results-head h3 {
	font-family: var(--font-display);
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--color-line);
}
.ss-matchday__results .ss-match-list { gap: 4px; }
.ss-matchday__results .ss-match-list__item { border: none; border-bottom: 1px solid var(--color-line); border-radius: 0; }
.ss-matchday__results .ss-match-list__item:last-child { border-bottom: none; }
.ss-matchday__results .ss-match-list__link { padding: 14px 0; }
.ss-matchday__results .ss-match-list__item:hover { box-shadow: none; }

/* =========================================================
   SCORECARD — prochain match (logos broadcast)
   ========================================================= */
.ss-scorecard {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(14px, 3vw, 36px);
	padding: clamp(18px, 3vw, 28px) 0;
	color: inherit;
	border-block: 1px solid var(--ss-line-soft);
	margin-block: 4px;
}
.ss-scorecard:hover { text-decoration: none; }
.ss-scorecard__side {
	display: grid;
	gap: 8px;
	justify-items: center;
	text-align: center;
	min-width: 0;
}
.ss-scorecard__crest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(64px, 9vw, 96px);
	height: clamp(64px, 9vw, 96px);
	background: #fff;
	border-radius: 50%;
	padding: 8px;
	box-shadow: 0 8px 22px -8px rgba(0,0,0,.45);
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.ss-scorecard__crest img {
	width: 100%; height: 100%;
	object-fit: contain;
}
.ss-scorecard:hover .ss-scorecard__side .ss-scorecard__crest { transform: scale(1.06) rotate(-2deg); }
.ss-scorecard:hover .ss-scorecard__side--away .ss-scorecard__crest { transform: scale(1.06) rotate(2deg); }
.ss-scorecard__team {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(15px, 1.5vw, 19px);
	letter-spacing: -0.01em;
	color: #fff;
	line-height: 1.2;
	max-width: 18ch;
}
.ss-scorecard__role {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.45);
}
.ss-scorecard__pivot {
	display: grid;
	justify-items: center;
	gap: 10px;
	padding-inline: clamp(6px, 1.5vw, 14px);
}
.ss-scorecard__vs {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(22px, 3vw, 34px);
	letter-spacing: 0.06em;
	color: var(--ss-accent);
	line-height: 1;
}
.ss-scorecard__kickoff {
	display: grid;
	gap: 2px;
	text-align: center;
}
.ss-scorecard__day {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: rgba(255,255,255,.65);
}
.ss-scorecard__time {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 2.2vw, 24px);
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.ss-scorecard__venue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: .04em;
	color: rgba(255,255,255,.6);
}
.ss-scorecard__venue svg { color: var(--ss-accent); flex-shrink: 0; }
@media (max-width: 560px) {
	.ss-scorecard { grid-template-columns: 1fr 1fr; }
	.ss-scorecard__pivot { grid-column: 1 / -1; order: -1; }
}

/* =========================================================
   CALENDAR (page /calendrier/)
   ========================================================= */
.ss-calendar-hero {
	background: var(--ss-ink-deep);
	color: #fff;
	padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 64px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
/* Couche pelouse — fond. */
.ss-calendar-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grass-turf.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: saturate(.9) brightness(.5) contrast(1.1);
	z-index: -2;
}
/* Voile sombre + glow rouge/orange — assombrit la pelouse pour lisibilité. */
.ss-calendar-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 600px at 0% 0%,     color-mix(in srgb, var(--color-primary) 50%, transparent), transparent 55%),
		radial-gradient(700px 500px at 100% 100%, color-mix(in srgb, var(--ss-accent)   30%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--ss-ink-deep) 65%, transparent), color-mix(in srgb, var(--ss-ink-deep) 85%, transparent));
	z-index: -1;
	pointer-events: none;
}
.ss-calendar-hero__inner { max-width: 900px; }
.ss-calendar-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 84px);
	letter-spacing: -0.03em;
	line-height: 1;
	margin: 12px 0 18px;
	color: #fff;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 18px;
	text-transform: uppercase;
}
.ss-calendar-hero__season {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(22px, 2.5vw, 36px);
	letter-spacing: 0;
	color: var(--ss-accent);
	text-transform: none;
}
.ss-calendar-hero__lead {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(15px, 1.5vw, 19px);
	color: rgba(255,255,255,.75);
	margin: 0;
	max-width: 60ch;
}

/* --- Tabs (filter bar) --- */
.ss-calendar-tabs {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
	position: sticky;
	top: var(--ss-header-h, 0);
	z-index: 40;
	margin-bottom: clamp(32px, 5vw, 56px);
	transition: box-shadow .25s ease;
}
.ss-calendar-tabs__inner {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.ss-calendar-tabs__item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 18px 24px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-muted);
	border-bottom: 2px solid transparent;
	position: relative;
	transition: color .2s ease, border-color .2s ease;
}
.ss-calendar-tabs__item:hover { color: var(--color-ink); text-decoration: none; }
.ss-calendar-tabs__item.is-active {
	color: var(--color-ink);
	border-bottom-color: var(--color-primary);
}
.ss-calendar-tabs__count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	padding: 2px 8px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-primary) 8%, var(--color-paper));
	color: var(--color-ink);
	font-family: var(--font-display);
	font-size: 12px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}
.ss-calendar-tabs__item.is-active .ss-calendar-tabs__count {
	background: var(--color-primary);
	color: #fff;
}

/* =========================================================
   SINGLE — pages équipe / match (broadcast premium)
   ========================================================= */
.ss-single-hero {
	background: var(--ss-ink-deep);
	color: #fff;
	padding-block: clamp(40px, 6vw, 72px) clamp(48px, 7vw, 80px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ss-single-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grass-turf.png");
	background-size: cover;
	background-position: center;
	filter: saturate(.85) brightness(.32) contrast(1.1);
	z-index: -2;
}
.ss-single-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(800px 500px at 100% 0%, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent 55%),
		radial-gradient(600px 500px at 0% 100%, color-mix(in srgb, var(--ss-accent) 30%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--ss-ink-deep) 60%, transparent), color-mix(in srgb, var(--ss-ink-deep) 88%, transparent));
	z-index: -1;
	pointer-events: none;
}
.ss-single-hero__inner {
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--container-pad);
}
.ss-single-hero__back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-bottom: clamp(20px, 3vw, 32px);
	color: rgba(255,255,255,.7);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	transition: color .2s ease, gap .25s ease;
}
.ss-single-hero__back:hover { color: var(--ss-accent); gap: 16px; text-decoration: none; }

.ss-single-hero__head {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: clamp(24px, 4vw, 48px);
	align-items: center;
}
.ss-single-hero__crest {
	width: clamp(120px, 16vw, 180px);
	height: clamp(120px, 16vw, 180px);
	background: #fff;
	border-radius: 50%;
	padding: 14px;
	box-shadow: 0 18px 50px -20px rgba(0,0,0,.6);
	position: relative;
}
.ss-single-hero__crest::before {
	content: "";
	position: absolute;
	inset: -6px;
	border-radius: 50%;
	border: 2px solid var(--ss-accent);
	opacity: .35;
}
.ss-single-hero__crest img,
.ss-single-hero__crest .wp-post-image {
	width: 100% !important;
	height: 100% !important;
	object-fit: contain;
}
.ss-single-hero__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(32px, 5vw, 60px);
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	margin: 8px 0 14px;
	text-transform: uppercase;
}
.ss-single-hero__rank {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: .04em;
	color: rgba(255,255,255,.75);
}
.ss-single-hero__rank-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 28px;
	color: var(--ss-accent);
	margin-right: 8px;
}
.ss-single-hero__rank-num sup { font-size: 13px; vertical-align: super; }

@media (max-width: 640px) {
	.ss-single-hero__head { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.ss-single-hero__title { font-size: clamp(28px, 7vw, 40px); }
}

/* --- Stats bandeau --- */
.ss-single-stats {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
	padding-block: clamp(24px, 3.5vw, 36px);
}
.ss-single-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
	gap: 0;
	margin: 0;
}
.ss-single-stats__grid > div {
	padding: 10px clamp(14px, 2vw, 22px);
	border-right: 1px solid var(--color-line);
}
.ss-single-stats__grid > div:last-child { border-right: none; }
.ss-single-stats__grid dt {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 6px;
}
.ss-single-stats__grid dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(22px, 2.8vw, 32px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}
.ss-single-stats__pts { color: var(--color-primary) !important; }
@media (max-width: 640px) {
	.ss-single-stats__grid > div { border-right: none; border-bottom: 1px solid var(--color-line); padding-block: 12px; }
	.ss-single-stats__grid > div:last-child { border-bottom: none; }
}

/* --- Match card XL --- */
.ss-single-hero--match { padding-bottom: clamp(56px, 8vw, 96px); }
.ss-match-card {
	display: grid;
	gap: clamp(20px, 3vw, 32px);
	text-align: center;
}
.ss-match-card__date-line {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .22em;
	color: rgba(255,255,255,.65);
	justify-content: center;
}
.ss-match-card__date-sep { color: var(--ss-accent); }
.ss-match-card__matchup {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(20px, 4vw, 48px);
}
.ss-match-card__side {
	display: grid;
	justify-items: center;
	gap: 14px;
}
.ss-match-card__crest {
	width: clamp(96px, 13vw, 156px);
	height: clamp(96px, 13vw, 156px);
	background: #fff;
	border-radius: 50%;
	padding: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
	box-shadow: 0 14px 38px -18px rgba(0,0,0,.55);
}
.ss-match-card__crest:hover { transform: scale(1.05) rotate(-2deg); }
.ss-match-card__side--away .ss-match-card__crest:hover { transform: scale(1.05) rotate(2deg); }
.ss-match-card__crest img,
.ss-match-card__crest .wp-post-image { width: 100% !important; height: 100% !important; object-fit: contain; }
.ss-match-card__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 2.2vw, 26px);
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: rgba(255,255,255,.85);
	max-width: 16ch;
	transition: color .2s ease;
}
.ss-match-card__name:hover { color: var(--ss-accent); text-decoration: none; }
.ss-match-card__side.is-winner .ss-match-card__name { color: #fff; }
.ss-match-card__side.is-winner::after {
	content: "";
	display: inline-block;
	width: 8px; height: 8px;
	background: var(--ss-accent);
	clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.ss-match-card__role {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.5);
}
.ss-match-card__center {
	display: grid;
	justify-items: center;
	gap: 8px;
	min-width: 90px;
}
.ss-match-card__score {
	display: inline-flex;
	align-items: baseline;
	gap: clamp(8px, 1.6vw, 16px);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(48px, 8vw, 96px);
	letter-spacing: -0.03em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.ss-match-card__score em { font-style: normal; opacity: .35; font-size: .6em; }
.ss-match-card__vs {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(28px, 4vw, 44px);
	letter-spacing: 0.06em;
	color: var(--ss-accent);
}
.ss-match-card__kickoff {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 2.4vw, 26px);
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.ss-match-card__status {
	display: inline-block;
	margin-top: 4px;
	padding: 4px 12px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.2);
	border-radius: 999px;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.8);
}
.ss-match-card__status--played {
	background: color-mix(in srgb, var(--color-primary) 18%, transparent);
	border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
	color: #fff;
}
.ss-match-card__venue {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: .04em;
	color: rgba(255,255,255,.65);
	justify-self: center;
}
.ss-match-card__venue svg { color: var(--ss-accent); }

@media (max-width: 640px) {
	.ss-match-card__matchup { grid-template-columns: 1fr 1fr; gap: 18px; }
	.ss-match-card__center { grid-column: 1 / -1; order: -1; }
	.ss-match-card__name { font-size: 14px; }
}

/* --- Forme récente (split 2 cols) --- */
.ss-match-form {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
	padding-block: clamp(32px, 5vw, 56px);
}
.ss-match-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 4vw, 48px);
}
@media (max-width: 640px) {
	.ss-match-form__grid { grid-template-columns: 1fr; }
}
.ss-match-form__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 2vw, 22px);
	letter-spacing: -0.015em;
	margin: 4px 0 14px;
	color: var(--color-ink);
}
.ss-match-form__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}
.ss-match-form__badges .ss-result-list__badge {
	width: 32px; height: 32px;
	font-size: 14px;
	margin: 0;
}
.ss-match-form__empty {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--color-muted);
	font-size: 14px;
}

/* --- Bio / content éditable --- */
.ss-single-bio { padding-block: clamp(32px, 4vw, 48px); }
.ss-single-bio__content {
	max-width: 720px;
	margin-inline: auto;
	font-size: 17px;
	line-height: 1.7;
	color: var(--color-ink);
}
.ss-single-bio__content p { margin: 0 0 1em; }

/* --- Section matches (split) --- */
.ss-single-matches { padding-block: clamp(40px, 6vw, 80px); }
.ss-single-matches__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 64px);
}
@media (max-width: 880px) {
	.ss-single-matches__grid { grid-template-columns: 1fr; }
}
.ss-single-matches__col .ss-section__header { margin-bottom: 18px; }

/* Badge V/N/D dans result-list --- */
.ss-result-list__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	border-radius: 50%;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 11px;
	color: #fff;
	margin-left: 8px;
}
.ss-result-list__badge--win   { background: #1e8c4c; }
.ss-result-list__badge--draw  { background: #6b6b6b; }
.ss-result-list__badge--loss  { background: var(--color-primary); }

/* =========================================================
   SINGLE NEWS — single.php pour les posts
   ========================================================= */
.ss-single--editorial { padding-block: 0; }
.ss-single-editorial__head {
	background: var(--ss-ink-deep);
	color: #fff;
	padding-block: clamp(40px, 6vw, 72px) clamp(32px, 4vw, 48px);
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ss-single-editorial__head::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(800px 400px at 0% 0%,     color-mix(in srgb, var(--color-primary) 30%, transparent), transparent 60%),
		radial-gradient(600px 400px at 100% 100%, color-mix(in srgb, var(--ss-accent) 20%, transparent), transparent 65%);
	z-index: -1;
}
.ss-single-editorial__head .ss-section__eyebrow { color: rgba(255,255,255,.7); margin-top: 18px; }
.ss-single-editorial__head .ss-section__eyebrow em { color: var(--ss-accent); }
.ss-single-editorial__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(28px, 4.5vw, 52px);
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: #fff;
	margin: 14px 0 18px;
	max-width: 28ch;
}
.ss-single-editorial__meta {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255,255,255,.65);
	display: inline-flex;
	gap: 12px;
	flex-wrap: wrap;
}
.ss-single-editorial__media {
	background: var(--ss-ink-deep);
	padding-bottom: clamp(32px, 5vw, 56px);
	margin-top: -1px;
}
.ss-single-editorial__media img,
.ss-single-editorial__media .wp-post-image {
	width: 100%;
	height: auto;
	max-height: 560px;
	object-fit: cover;
	border-radius: 4px;
}
.ss-single-editorial__content {
	max-width: 720px;
	margin-inline: auto;
	padding-block: clamp(32px, 5vw, 56px);
	font-size: 18px;
	line-height: 1.7;
	color: var(--color-ink);
}
.ss-single-editorial__content p { margin: 0 0 1em; }
.ss-single-editorial__content p:first-of-type::first-letter {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 3.2em;
	float: left;
	line-height: .85;
	margin: 6px 14px 0 0;
	color: var(--color-primary);
}

/* =========================================================
   SEARCH — page de recherche
   ========================================================= */
.ss-search-form {
	display: flex;
	gap: 10px;
	margin-top: clamp(20px, 3vw, 32px);
	max-width: 640px;
	flex-wrap: wrap;
}
.ss-search-form input[type="search"] {
	flex: 1 1 280px;
	padding: 14px 18px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: #fff;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.18);
	border-radius: 4px;
	transition: border-color .2s ease, background .2s ease;
}
.ss-search-form input[type="search"]::placeholder { color: rgba(255,255,255,.45); }
.ss-search-form input[type="search"]:focus {
	outline: none;
	border-color: var(--ss-accent);
	background: rgba(255,255,255,.12);
}
.ss-search-results { padding-block: clamp(40px, 6vw, 80px); }
.ss-search-results__count {
	font-family: var(--font-sans);
	font-size: 13px;
	letter-spacing: .04em;
	color: var(--color-muted);
	margin: 0 0 24px;
}
.ss-search-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ss-search-item {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	transition: border-color .2s ease, transform .2s ease;
}
.ss-search-item:hover { border-color: var(--color-primary); transform: translateY(-1px); }
.ss-search-item__link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 18px;
	padding: 18px 22px;
	color: var(--color-ink);
}
.ss-search-item__link:hover { text-decoration: none; }
.ss-search-item__media {
	width: 60px; height: 60px;
	background: #fff;
	border-radius: 6px;
	overflow: hidden;
	border: 1px solid var(--color-line);
	flex-shrink: 0;
}
.ss-search-item__media img { width: 100%; height: 100%; object-fit: cover; }
.ss-search-item__body { min-width: 0; }
.ss-search-item__type {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
	color: var(--color-primary);
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	margin-bottom: 8px;
}
.ss-search-item__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	letter-spacing: -0.015em;
	margin: 0 0 4px;
	line-height: 1.2;
}
.ss-search-item__excerpt {
	margin: 0;
	color: var(--color-muted);
	font-size: 13px;
}
.ss-search-item__arrow {
	color: var(--color-muted);
	transition: color .2s ease, transform .25s ease;
}
.ss-search-item:hover .ss-search-item__arrow { color: var(--color-primary); transform: translateX(4px); }

/* =========================================================
   CONTACT — page /contact/
   ========================================================= */
.ss-contact { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 9vw, 110px); }
.ss-contact__grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr;
	gap: clamp(32px, 5vw, 64px);
	align-items: start;
}
@media (max-width: 880px) {
	.ss-contact__grid { grid-template-columns: 1fr; }
}

/* --- Form column --- */
.ss-contact__form-col { min-width: 0; }
.ss-contact__notice {
	padding: 16px 20px;
	border-radius: 4px;
	margin-bottom: 24px;
	font-family: var(--font-sans);
	font-size: 14px;
	line-height: 1.5;
	border-left: 3px solid;
}
.ss-contact__notice--ok       { background: color-mix(in srgb, #1e8c4c 8%, transparent);  border-left-color: #1e8c4c; color: #0e5731; }
.ss-contact__notice--invalid,
.ss-contact__notice--throttle { background: color-mix(in srgb, var(--ss-accent) 10%, transparent); border-left-color: var(--ss-accent); color: var(--ss-accent); }
.ss-contact__notice--error    { background: color-mix(in srgb, var(--color-primary) 8%, transparent); border-left-color: var(--color-primary); color: var(--color-primary); }

.ss-contact__form { display: grid; gap: 18px; }
.ss-contact__row--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
}
@media (max-width: 540px) {
	.ss-contact__row--two { grid-template-columns: 1fr; }
}
.ss-contact__field { display: grid; gap: 6px; }
.ss-contact__label {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.ss-contact__form input[type="text"],
.ss-contact__form input[type="email"],
.ss-contact__form select,
.ss-contact__form textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--font-sans);
	font-size: 15px;
	color: var(--color-ink);
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.ss-contact__form input:focus,
.ss-contact__form select:focus,
.ss-contact__form textarea:focus {
	outline: none;
	border-color: var(--color-primary);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}
.ss-contact__form textarea { resize: vertical; min-height: 140px; line-height: 1.5; }
.ss-contact__form select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%2315181f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' d='M1 1l5 6 5-6'/></svg>");
	background-repeat: no-repeat;
	background-position: right 16px center;
	background-size: 12px 8px;
	padding-right: 44px;
}

.ss-contact__submit {
	justify-self: flex-start;
	gap: 14px;
	padding-right: 28px;
}
.ss-contact__submit svg { transition: transform .25s ease; }
.ss-contact__submit:hover svg { transform: translateX(4px); }

/* Honeypot caché. */
.ss-contact__honeypot {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* --- Info column --- */
.ss-contact__info { display: grid; gap: 22px; }
.ss-contact__channel {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 16px 18px;
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	color: var(--color-ink);
	transition: border-color .2s ease, transform .2s ease, background .2s ease;
}
.ss-contact__channel:hover {
	border-color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 3%, var(--color-paper));
	transform: translateY(-1px);
	text-decoration: none;
}
.ss-contact__channel--static { cursor: default; }
.ss-contact__channel--static:hover { transform: none; border-color: var(--color-line); background: var(--color-paper); }
.ss-contact__channel-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
	color: var(--color-primary);
	border-radius: 50%;
	flex-shrink: 0;
}
.ss-contact__channel-label {
	display: block;
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 2px;
}
.ss-contact__channel-value {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-ink);
	letter-spacing: -0.005em;
}

.ss-contact__socials {
	padding: 14px 18px;
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 4px;
}
.ss-contact__socials > div {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 8px;
}
.ss-contact__social {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: 1px solid var(--color-line);
	border-radius: 999px;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .04em;
	transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ss-contact__social:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}

/* --- Inscription d'équipe panel --- */
.ss-contact__panel {
	padding: 22px 22px 24px;
	background: var(--ss-ink-deep);
	color: #fff;
	border-radius: 4px;
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
.ss-contact__panel::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(400px 200px at 100% 0%, color-mix(in srgb, var(--ss-accent) 35%, transparent), transparent 65%),
		radial-gradient(400px 250px at 0% 100%, color-mix(in srgb, var(--color-primary) 25%, transparent), transparent 60%);
	z-index: -1;
}
.ss-contact__panel h3 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	margin: 0 0 8px;
	color: #fff;
	text-transform: uppercase;
}
.ss-contact__panel p {
	margin: 0;
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	line-height: 1.55;
	color: rgba(255,255,255,.78);
}

/* =========================================================
   NEWS ARCHIVE — page /actualites/
   ========================================================= */
.ss-news-archive { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 9vw, 110px); }

/* --- Featured article (top) --- */
.ss-news-featured {
	display: grid;
	grid-template-columns: 1.2fr 1fr;
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 6px;
	overflow: hidden;
	margin-bottom: clamp(48px, 7vw, 80px);
	min-height: 360px;
}
@media (max-width: 880px) {
	.ss-news-featured { grid-template-columns: 1fr; }
}
.ss-news-featured__media {
	display: block;
	position: relative;
	overflow: hidden;
	min-height: 280px;
}
.ss-news-featured__media img,
.ss-news-featured__img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.ss-news-featured:hover .ss-news-featured__img { transform: scale(1.04); }
.ss-news-featured__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,.18));
	pointer-events: none;
}
.ss-news-featured__body {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
	padding: clamp(28px, 4vw, 56px);
}
.ss-news-featured__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	position: relative;
	padding-left: 28px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--color-primary);
}
.ss-news-featured__eyebrow::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 20px; height: 1px;
	background: var(--ss-accent);
	transform: translateY(-50%);
}
.ss-news-featured__eyebrow em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 15px;
	letter-spacing: 0;
	text-transform: none;
	color: var(--color-primary);
}
.ss-news-featured__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(28px, 3.6vw, 42px);
	letter-spacing: -0.025em;
	line-height: 1.05;
	margin: 0;
}
.ss-news-featured__title a { color: var(--color-ink); }
.ss-news-featured__title a:hover { color: var(--color-primary); text-decoration: none; }
.ss-news-featured__excerpt {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(15px, 1.4vw, 17px);
	line-height: 1.55;
	color: var(--color-muted);
	margin: 0;
	max-width: 52ch;
}
.ss-news-featured__meta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.ss-news-featured__meta time { font-variant-numeric: tabular-nums; }
.ss-news-featured__sep { opacity: .4; }
.ss-news-featured__cta {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 8px;
	padding: 12px 22px;
	background: var(--color-ink);
	color: #fff;
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	border-radius: 2px;
	align-self: flex-start;
	transition: background .2s ease, transform .2s ease, gap .25s ease;
}
.ss-news-featured__cta:hover {
	background: var(--color-primary);
	transform: translateY(-1px);
	gap: 18px;
	color: #fff;
	text-decoration: none;
}

/* --- Section header for "tous les articles" --- */
.ss-news-archive__head {
	display: flex;
	align-items: end;
	gap: 24px;
	margin-bottom: clamp(24px, 3vw, 36px);
}
.ss-news-archive__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(22px, 2.6vw, 30px);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0;
}
.ss-news-archive__head .ss-section__eyebrow { margin-bottom: 0; }

/* News card variant on archive (denser grid) */
.ss-cards--news {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(20px, 2.5vw, 32px);
	list-style: none;
	margin: 0; padding: 0;
}

/* --- Pagination --- */
.ss-news-pagination {
	margin-top: clamp(40px, 6vw, 64px);
	display: flex;
	justify-content: center;
	gap: 6px;
	flex-wrap: wrap;
}
.ss-news-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px; height: 40px;
	padding: 0 14px;
	font-family: var(--font-sans);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--color-ink);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.ss-news-pagination .page-numbers:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
	text-decoration: none;
}
.ss-news-pagination .page-numbers.current {
	background: var(--color-primary);
	border-color: var(--color-primary);
	color: #fff;
}
.ss-news-pagination .page-numbers.dots { border: none; background: transparent; }

/* =========================================================
   STANDINGS — page /classement/
   ========================================================= */

/* --- Leader spotlight card --- */
.ss-leader {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
	padding-block: clamp(28px, 4vw, 44px);
}
.ss-leader__inner {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: clamp(20px, 4vw, 40px);
}
.ss-leader__media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(96px, 12vw, 132px);
	height: clamp(96px, 12vw, 132px);
	background: linear-gradient(135deg,
		color-mix(in srgb, var(--color-primary) 8%, var(--color-paper)),
		color-mix(in srgb, var(--ss-accent)   6%, var(--color-paper)));
	border-radius: 50%;
	padding: 12px;
	position: relative;
}
.ss-leader__media::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 2px solid var(--ss-accent);
	opacity: .35;
}
.ss-leader__crest { width: 100%; height: 100%; object-fit: contain; }
.ss-leader__eyebrow em {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 18px;
	color: var(--color-primary);
}
.ss-leader__name {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(28px, 4vw, 48px);
	letter-spacing: -0.025em;
	line-height: 1;
	margin: 8px 0 20px;
	color: var(--color-ink);
	text-transform: uppercase;
}
.ss-leader__name a { color: inherit; }
.ss-leader__name a:hover { color: var(--color-primary); text-decoration: none; }
.ss-leader__stats {
	display: flex;
	gap: 0;
	margin: 0;
	flex-wrap: wrap;
}
.ss-leader__stats > div {
	padding-right: clamp(20px, 3vw, 36px);
	margin-right: clamp(20px, 3vw, 36px);
	border-right: 1px solid var(--color-line);
}
.ss-leader__stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.ss-leader__stats dt {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 6px;
}
.ss-leader__stats dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(20px, 2.5vw, 28px);
	letter-spacing: -0.01em;
	line-height: 1;
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}
.ss-leader__pts { color: var(--color-primary) !important; font-weight: 800 !important; }

@media (max-width: 540px) {
	.ss-leader__inner { grid-template-columns: 1fr; text-align: center; justify-items: center; }
	.ss-leader__stats { justify-content: center; }
}

/* --- Standings full table --- */
.ss-standings-section { padding-block: clamp(40px, 6vw, 80px) clamp(56px, 9vw, 110px); }
.ss-standings-table-wrap {
	overflow-x: auto;
	border: 1px solid var(--color-line);
	border-radius: 6px;
	background: var(--color-paper);
}
.ss-standings-table {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}
.ss-standings-table thead th {
	background: var(--ss-ink-deep);
	color: rgba(255,255,255,.85);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: 14px 10px;
	text-align: center;
	white-space: nowrap;
}
.ss-standings-table thead th.ss-team-col { text-align: left; padding-left: 18px; }
.ss-standings-table tbody td {
	padding: 14px 10px;
	border-bottom: 1px solid var(--color-line);
	text-align: center;
	color: var(--color-ink);
	font-family: var(--font-sans);
	font-size: 14px;
}
.ss-standings-table tbody tr:last-child td { border-bottom: none; }
.ss-standings-table tbody tr { transition: background .15s ease; }
.ss-standings-table tbody tr:hover { background: color-mix(in srgb, var(--color-primary) 3%, transparent); }

.ss-standings-row__rank {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px; height: 30px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--color-line);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
}
.ss-standings-row__team {
	display: flex;
	align-items: center;
	gap: 14px;
	text-align: left;
	padding-left: 18px;
}
.ss-standings-row__team a {
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 15px;
	letter-spacing: -0.005em;
}
.ss-standings-row__team a:hover { color: var(--color-primary); text-decoration: none; }
.ss-standings-row__crest {
	width: 36px; height: 36px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	padding: 3px;
	object-fit: contain;
	flex-shrink: 0;
}
.ss-standings-row__pts {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 17px;
	color: var(--color-primary);
}

/* Zones */
.ss-standings-row.is-leader .ss-standings-row__rank {
	background: var(--ss-accent);
	color: #fff;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--ss-accent) 25%, transparent);
}
.ss-standings-row.is-podium .ss-standings-row__rank {
	background: color-mix(in srgb, var(--ss-accent) 18%, var(--color-paper));
	color: var(--color-ink);
}
.ss-standings-row.is-leader {
	background: color-mix(in srgb, var(--ss-accent) 4%, transparent);
}
.ss-standings-row.is-relegation td {
	background: color-mix(in srgb, var(--color-primary) 3%, transparent);
	color: color-mix(in srgb, var(--color-ink) 80%, transparent);
}
.ss-standings-row.is-relegation .ss-standings-row__rank {
	background: color-mix(in srgb, var(--color-primary) 12%, var(--color-paper));
	color: var(--color-primary);
}

/* Legend */
.ss-standings-legend {
	list-style: none;
	margin: 24px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	font-family: var(--font-sans);
	font-size: 12px;
	color: var(--color-muted);
}
.ss-standings-legend li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.ss-standings-legend__dot {
	display: inline-block;
	width: 12px; height: 12px;
	border-radius: 50%;
}
.ss-standings-legend__dot--leader     { background: var(--ss-accent); }
.ss-standings-legend__dot--podium     { background: color-mix(in srgb, var(--ss-accent) 30%, var(--color-paper)); border: 1px solid color-mix(in srgb, var(--ss-accent) 40%, transparent); }
.ss-standings-legend__dot--relegation { background: color-mix(in srgb, var(--color-primary) 20%, var(--color-paper)); border: 1px solid color-mix(in srgb, var(--color-primary) 40%, transparent); }
.ss-standings-legend__note {
	margin-left: auto;
	font-family: var(--font-serif);
	font-style: italic;
}
.ss-standings-legend__note em { font-style: italic; }

@media (max-width: 720px) {
	.ss-standings-table thead th,
	.ss-standings-table tbody td { padding: 10px 6px; font-size: 12px; }
	.ss-standings-row__team { padding-left: 10px; gap: 8px; }
	.ss-standings-row__team a { font-size: 13px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: middle; }
	.ss-standings-row__crest { width: 28px; height: 28px; }
	.ss-standings-legend__note { margin-left: 0; flex-basis: 100%; }
}

/* =========================================================
   TEAMS ARCHIVE — page /equipes/
   ========================================================= */
.ss-teams-archive__stats {
	display: flex;
	gap: 0;
	margin: clamp(20px, 3vw, 32px) 0 0;
	padding: 0;
	border-top: 1px solid rgba(255,255,255,.18);
	padding-top: clamp(16px, 2.5vw, 24px);
}
.ss-teams-archive__stats > div {
	padding-right: clamp(24px, 4vw, 48px);
	margin-right: clamp(24px, 4vw, 48px);
	border-right: 1px solid rgba(255,255,255,.18);
}
.ss-teams-archive__stats > div:last-child { border-right: none; margin-right: 0; padding-right: 0; }
.ss-teams-archive__stats dt {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: rgba(255,255,255,.55);
	margin-bottom: 6px;
}
.ss-teams-archive__stats dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(28px, 3.4vw, 42px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.ss-teams-archive { padding-block: clamp(40px, 6vw, 72px) clamp(56px, 9vw, 110px); }
.ss-teams-archive__grid {
	list-style: none;
	margin: 0; padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: clamp(16px, 2vw, 24px);
}

/* --- Team card --- */
.ss-team-card {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 6px;
	overflow: hidden;
	position: relative;
	transition: border-color .25s ease, transform .3s ease, box-shadow .35s ease;
}
.ss-team-card::before {
	content: "";
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 4px;
	background: linear-gradient(90deg, var(--color-primary), var(--ss-accent));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}
.ss-team-card:hover {
	border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-line));
	transform: translateY(-4px);
	box-shadow: 0 18px 40px -22px rgba(0,0,0,.22);
}
.ss-team-card:hover::before { transform: scaleX(1); }

.ss-team-card__link {
	display: grid;
	gap: clamp(16px, 2vw, 22px);
	padding: clamp(22px, 3vw, 32px) clamp(20px, 2.5vw, 28px);
	color: var(--color-ink);
	position: relative;
}
.ss-team-card__link:hover { text-decoration: none; }

.ss-team-card__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 14px;
	color: var(--ss-accent);
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	align-self: flex-start;
}

.ss-team-card__media {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: clamp(96px, 14vw, 132px);
	height: clamp(96px, 14vw, 132px);
	margin: 0 auto;
	background: var(--color-paper);
	border-radius: 50%;
	padding: 10px;
	transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}
.ss-team-card:hover .ss-team-card__media {
	transform: scale(1.08) rotate(-3deg);
}
.ss-team-card__logo { width: 100%; height: 100%; object-fit: contain; }
.ss-team-card__placeholder {
	width: 100%; height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
	color: var(--color-primary);
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 36px;
	border-radius: 50%;
}

.ss-team-card__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 2vw, 22px);
	letter-spacing: -0.015em;
	line-height: 1.15;
	color: var(--color-ink);
	margin: 0;
	text-align: center;
}

.ss-team-card__stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 4px;
	padding: 14px 0;
	border-top: 1px solid var(--color-line);
	border-bottom: 1px solid var(--color-line);
}
.ss-team-card__stats > div {
	display: grid;
	justify-items: center;
	gap: 4px;
}
.ss-team-card__stat-num {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 20px;
	color: var(--color-ink);
	line-height: 1;
	font-variant-numeric: tabular-nums;
}
.ss-team-card__stat-label {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .18em;
	color: var(--color-muted);
}

.ss-team-card__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-ink);
	transition: gap .3s ease, color .2s ease;
	justify-self: center;
}
.ss-team-card:hover .ss-team-card__cta {
	gap: 16px;
	color: var(--color-primary);
}

@media (max-width: 480px) {
	.ss-teams-archive__grid { grid-template-columns: 1fr 1fr; gap: 12px; }
	.ss-team-card__link { padding: 18px 14px; gap: 14px; }
	.ss-team-card__name { font-size: 15px; }
	.ss-team-card__stat-num { font-size: 16px; }
	.ss-team-card__media { width: 80px; height: 80px; padding: 6px; }
}

/* =========================================================
   SCORE STATS — bandeau de chiffres clés (page /score/)
   ========================================================= */
.ss-score-stats {
	background: var(--color-paper);
	border-bottom: 1px solid var(--color-line);
	padding-block: clamp(28px, 4vw, 44px);
	margin-bottom: clamp(32px, 5vw, 56px);
}
.ss-score-stats__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 0;
	margin: 0;
}
.ss-score-stats__item {
	padding: 8px clamp(16px, 2.5vw, 28px);
	border-right: 1px solid var(--color-line);
}
.ss-score-stats__item:last-child { border-right: none; }
.ss-score-stats__item dt {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 8px;
}
.ss-score-stats__item dd {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(28px, 3.6vw, 44px);
	letter-spacing: -0.025em;
	line-height: 1;
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}
.ss-score-stats__item--feature {
	grid-column: span 2;
	background: color-mix(in srgb, var(--color-primary) 4%, transparent);
	border-right: none;
	border-radius: 4px;
	padding: 12px clamp(18px, 2.8vw, 32px);
}
.ss-score-stats__item--feature dt { color: var(--color-primary); }
.ss-score-stats__item--feature dd {
	font-size: clamp(16px, 1.8vw, 22px);
	font-weight: 700;
}
.ss-score-stats__item--feature dd a { color: var(--color-ink); }
.ss-score-stats__item--feature dd a:hover { color: var(--color-primary); text-decoration: none; }
.ss-score-stats__match {
	display: inline-flex;
	align-items: baseline;
	gap: 10px;
	flex-wrap: wrap;
}
.ss-score-stats__match strong {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(20px, 2.2vw, 28px);
	color: var(--color-primary);
	padding: 2px 10px;
	background: var(--color-paper);
	border-radius: 4px;
	letter-spacing: -0.01em;
	font-variant-numeric: tabular-nums;
}

@media (max-width: 640px) {
	.ss-score-stats__item { border-right: none; border-bottom: 1px solid var(--color-line); padding-block: 14px; }
	.ss-score-stats__item:last-child { border-bottom: none; }
	.ss-score-stats__item--feature { grid-column: span 1; }
}

/* --- Calendar list --- */
.ss-calendar { padding-bottom: clamp(56px, 9vw, 110px); }
.ss-calendar__empty { text-align: center; padding-block: 60px; }

.ss-calendar__month + .ss-calendar__month { margin-top: clamp(40px, 6vw, 64px); }
.ss-calendar__month-head {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-bottom: 18px;
}
.ss-calendar__month-label {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(20px, 2.4vw, 28px);
	letter-spacing: 0.06em;
	color: var(--color-ink);
}
.ss-calendar__month-rule {
	flex: 1;
	height: 1px;
	background: var(--color-line);
}
.ss-calendar__month-count {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-muted);
	font-variant-numeric: tabular-nums;
}

.ss-calendar__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* --- Fixture row --- */
.ss-fixture {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	overflow: hidden;
	transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.ss-fixture:hover {
	border-color: color-mix(in srgb, var(--color-primary) 40%, var(--color-line));
	box-shadow: 0 8px 24px -16px rgba(0,0,0,.18);
	transform: translateY(-1px);
}
.ss-fixture--played { background: color-mix(in srgb, var(--color-primary) 2%, var(--color-paper)); }

.ss-fixture__link {
	display: grid;
	/* 1fr auto 1fr : la matchup est dans la colonne centrale auto, encadrée par
	   deux 1fr qui partagent équitablement l'espace restant. Résultat : la
	   matchup est centrée sur la page, peu importe la largeur du venue. */
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: clamp(16px, 3vw, 32px);
	padding: clamp(14px, 2vw, 22px) clamp(16px, 2.5vw, 28px);
	color: var(--color-ink);
}
.ss-fixture__link:hover { text-decoration: none; }

.ss-fixture__date    { justify-self: start; }
.ss-fixture__matchup { justify-self: center; }
.ss-fixture__venue   { justify-self: end; text-align: right; }

.ss-fixture__date {
	display: grid;
	justify-items: center;
	gap: 2px;
	min-width: 56px;
	padding-right: clamp(12px, 2vw, 22px);
	border-right: 1px solid var(--color-line);
}
.ss-fixture__day-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(26px, 3vw, 36px);
	letter-spacing: -0.02em;
	line-height: 1;
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}
.ss-fixture__day-name {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	color: var(--color-muted);
}

.ss-fixture__matchup {
	display: grid;
	grid-template-columns: minmax(0, 240px) auto minmax(0, 240px);
	align-items: center;
	gap: clamp(14px, 2.5vw, 28px);
	min-width: 0;
}
.ss-fixture__side {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	width: 100%;
}
.ss-fixture__side:not(.ss-fixture__side--away) { justify-content: flex-end; }
.ss-fixture__side--away { justify-content: flex-start; }
.ss-fixture__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: clamp(14px, 1.5vw, 18px);
	letter-spacing: -0.005em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	color: var(--color-ink);
	opacity: .7;
	transition: opacity .15s ease;
	min-width: 0;
}
.ss-fixture__side.is-winner .ss-fixture__name { opacity: 1; font-weight: 700; }
.ss-fixture--upcoming .ss-fixture__name { opacity: 1; font-weight: 600; }
.ss-fixture__crest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px; height: 48px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	padding: 4px;
	flex-shrink: 0;
}
.ss-fixture__crest img { width: 100%; height: 100%; object-fit: contain; }

.ss-fixture__center {
	display: grid;
	justify-items: center;
	gap: 4px;
	min-width: 72px;
}
.ss-fixture__score {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(20px, 2.4vw, 28px);
	letter-spacing: -0.01em;
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
}
.ss-fixture__score em { font-style: normal; opacity: .25; font-weight: 500; }
.ss-fixture__kickoff {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(18px, 2vw, 22px);
	color: var(--color-ink);
	font-variant-numeric: tabular-nums;
	padding: 4px 12px;
	background: var(--ss-ink-deep);
	color: #fff;
	border-radius: 4px;
}
.ss-fixture__status {
	font-family: var(--font-sans);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--color-muted);
}
.ss-fixture--played .ss-fixture__status { color: var(--color-primary); }

.ss-fixture__venue {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-sans);
	font-size: 12px;
	letter-spacing: .03em;
	color: var(--color-muted);
	padding-left: clamp(12px, 2vw, 22px);
	border-left: 1px solid var(--color-line);
	max-width: 240px;
}
.ss-fixture__venue svg { color: var(--ss-accent); flex-shrink: 0; }

@media (max-width: 880px) {
	/* Stack vertical complet : date top, matchup centré, venue en bas.
	   Évite le déséquilibre date isolée gauche vs masse droite. */
	.ss-fixture__link {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 14px;
		padding: 16px 14px;
	}
	.ss-fixture__date {
		grid-row: auto;
		justify-self: stretch;
		flex-direction: row;
		display: flex;
		gap: 10px;
		align-items: baseline;
		justify-content: center;
		padding-right: 0;
		border-right: none;
		padding-bottom: 12px;
		border-bottom: 1px solid var(--color-line);
		width: 100%;
		text-align: center;
	}
	.ss-fixture__matchup {
		grid-column: auto;
		grid-row: auto;
		justify-self: stretch;
		width: 100%;
	}
	.ss-fixture__venue {
		grid-column: auto;
		grid-row: auto;
		justify-self: center;
		text-align: center;
		border-left: none;
		padding-left: 0;
		padding-top: 10px;
		font-size: 11px;
		border-top: 1px dashed var(--color-line);
		width: 100%;
	}
}

/* Tablette / mobile large : la matchup horizontale ne tient plus, on stack vertical (home / score / away)
   pour que les noms d'équipes restent lisibles en entier. */
@media (max-width: 720px) {
	.ss-fixture__matchup {
		grid-template-columns: 1fr;
		grid-template-rows: auto auto auto;
		gap: 10px;
		justify-items: center;
		text-align: center;
	}
	.ss-fixture__side,
	.ss-fixture__side--away {
		justify-content: center;
		max-width: none;
		width: auto;
	}
	.ss-fixture__center { order: 2; }
	.ss-fixture__side--away { order: 3; }
	.ss-fixture__name {
		font-size: 15px;
		max-width: 100%;
		opacity: 1;
		white-space: normal;
		overflow: visible;
		text-overflow: clip;
	}
	.ss-fixture--played .ss-fixture__side:not(.is-winner) .ss-fixture__name { opacity: .65; }
}
@media (max-width: 540px) {
	.ss-fixture__link { grid-template-columns: 1fr; gap: 12px; }
	.ss-fixture__date {
		flex-direction: row;
		display: flex;
		gap: 10px;
		justify-content: flex-start;
		padding-right: 0;
		border-right: none;
		border-bottom: 1px solid var(--color-line);
		padding-bottom: 10px;
		align-items: baseline;
	}
	.ss-fixture__day-num  { font-size: 22px; }
	/* Matchup stays vertical (déjà appliqué à 720px) — on garde juste les ajustements de taille. */
	.ss-fixture__name     { font-size: 14px; }
	.ss-fixture__crest    { width: 40px; height: 40px; }
	.ss-fixture__venue    { padding-top: 4px; }
	.ss-fixture__score    { font-size: 24px; }
	.ss-calendar-tabs__item { padding: 14px 16px; font-size: 11px; letter-spacing: .12em; }
}

/* =========================================================
   RESULT-LIST — résultats compacts avec logos
   ========================================================= */
.ss-result-list {
	list-style: none;
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;
}
.ss-result-list__item {
	border-bottom: 1px solid var(--color-line);
}
.ss-result-list__item:last-child { border-bottom: none; }
.ss-result-list__link {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 16px;
	padding: 14px 4px;
	color: var(--color-ink);
	transition: background .15s ease;
}
.ss-result-list__link:hover {
	background: color-mix(in srgb, var(--color-primary) 4%, transparent);
	text-decoration: none;
}
.ss-result-list__date {
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--color-muted);
	min-width: 42px;
}
.ss-result-list__row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 12px;
}
.ss-result-list__side {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}
.ss-result-list__side:not(.ss-result-list__side--away) { justify-content: flex-end; }
.ss-result-list__side--away { justify-content: flex-start; }
.ss-result-list__name {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 14px;
	letter-spacing: -0.005em;
	color: var(--color-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	opacity: .65;
	transition: opacity .15s ease;
}
.ss-result-list__side.is-winner .ss-result-list__name {
	opacity: 1;
	font-weight: 700;
}
.ss-result-list__crest {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px; height: 32px;
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: 50%;
	padding: 3px;
	flex-shrink: 0;
}
.ss-result-list__crest img { width: 100%; height: 100%; object-fit: contain; }
.ss-result-list__score {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 16px;
	font-variant-numeric: tabular-nums;
	color: var(--color-ink);
	padding: 4px 10px;
	background: color-mix(in srgb, var(--color-primary) 7%, var(--color-paper));
	border-radius: 4px;
	min-width: 60px;
	justify-content: center;
}
.ss-result-list__score em { font-style: normal; opacity: .35; font-weight: 500; }
.ss-result-list__pending { color: var(--color-muted); font-weight: 500; }

@media (max-width: 480px) {
	.ss-result-list__name { font-size: 12px; max-width: 90px; }
	.ss-result-list__crest { width: 26px; height: 26px; }
	.ss-result-list__date { display: none; }
	.ss-result-list__link { grid-template-columns: 1fr; }
}

/* =========================================================
   STANDINGS — refonte premium
   ========================================================= */
.ss-section--standings { background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--color-primary) 3%, transparent)); }
.ss-standings {
	background: var(--color-paper);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	overflow: hidden;
}
.ss-standings__table th,
.ss-standings__table td {
	padding: 16px 18px;
}
.ss-standings__table thead th {
	background: var(--ss-ink-deep);
	color: rgba(255,255,255,.8);
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	border-bottom: 1px solid var(--ss-line-soft);
}
.ss-standings__table tbody tr {
	transition: background .15s ease;
}
.ss-standings__table tbody tr.is-podium .ss-standings__rank-pill {
	background: var(--ss-accent);
	color: var(--ss-ink-deep);
}
.ss-standings__rank-pill {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border-radius: 999px;
	background: var(--color-line);
	color: var(--color-ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 14px;
	font-variant-numeric: tabular-nums;
}
.ss-standings__rank-pill--1 { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ss-accent) 50%, transparent); }
.ss-standings__team {
	display: flex;
	align-items: center;
	gap: 14px;
}
.ss-standings__logo {
	width: 36px; height: 36px;
	object-fit: contain;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--color-line);
	padding: 3px;
	flex-shrink: 0;
}
.ss-standings__pts { color: var(--color-primary); font-family: var(--font-display); font-size: 16px; }

/* =========================================================
   TEAMS GRID — mosaïque premium
   ========================================================= */
.ss-section--teams { background: var(--color-paper); }
.ss-teams-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1px;
	background: var(--color-line);
	border: 1px solid var(--color-line);
	border-radius: 4px;
	overflow: hidden;
}
.ss-teams-grid__item {
	background: var(--color-paper);
	transition: background .25s ease;
}
.ss-teams-grid__link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
	align-items: center;
	gap: 6px 16px;
	padding: 26px 24px;
	color: var(--color-ink);
	position: relative;
	overflow: hidden;
	min-height: 124px;
}
.ss-teams-grid__link::before {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(400px 200px at 30% 100%, color-mix(in srgb, var(--color-primary) 8%, transparent), transparent 70%);
	opacity: 0;
	transition: opacity .35s ease;
	pointer-events: none;
}
.ss-teams-grid__item:hover { background: color-mix(in srgb, var(--color-primary) 4%, var(--color-paper)); }
.ss-teams-grid__item:hover .ss-teams-grid__link::before { opacity: 1; }
.ss-teams-grid__media {
	grid-row: 1 / 3;
	width: 60px; height: 60px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--color-paper);
	border-radius: 50%;
	overflow: hidden;
	transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}
.ss-teams-grid__item:hover .ss-teams-grid__media { transform: scale(1.08) rotate(-3deg); }
.ss-teams-grid__logo { width: 100%; height: 100%; object-fit: contain; }
.ss-teams-grid__placeholder {
	width: 100%; height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 24px;
	color: var(--color-primary);
	background: color-mix(in srgb, var(--color-primary) 8%, transparent);
}
.ss-teams-grid__num {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 12px;
	color: var(--ss-accent);
	letter-spacing: 0;
	align-self: end;
}
.ss-teams-grid__name {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 17px;
	letter-spacing: -0.01em;
	line-height: 1.2;
	align-self: start;
}
.ss-teams-grid__arrow {
	grid-row: 1 / 3;
	justify-self: end;
	align-self: center;
	color: var(--color-muted);
	transform: translateX(-8px);
	opacity: 0;
	transition: transform .3s ease, opacity .25s ease, color .2s ease;
}
.ss-teams-grid__item:hover .ss-teams-grid__arrow {
	transform: translateX(0);
	opacity: 1;
	color: var(--color-primary);
}

/* =========================================================
   CARDS — editorial news
   ========================================================= */
.ss-card--editorial {
	background: var(--color-paper);
	border: none;
	border-radius: 4px;
	overflow: hidden;
	transition: transform .35s ease;
}
.ss-card--editorial:hover { transform: translateY(-4px); box-shadow: 0 14px 40px -16px rgba(0,0,0,.18); }
.ss-card--editorial .ss-card__media { display: block; overflow: hidden; }
.ss-card--editorial .ss-card__media img {
	width: 100%; height: auto;
	aspect-ratio: 4/3;
	object-fit: cover;
	transition: transform .8s cubic-bezier(.22, 1, .36, 1);
}
.ss-card--editorial:hover .ss-card__media img { transform: scale(1.05); }
.ss-card--editorial .ss-card__body { padding: 22px 4px 4px; }
.ss-card__date {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--color-muted);
	margin-bottom: 12px;
	padding-left: 22px;
	position: relative;
}
.ss-card__date::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	width: 14px; height: 1px;
	background: var(--ss-accent);
	transform: translateY(-50%);
}
.ss-card--editorial .ss-card__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 22px;
	letter-spacing: -0.018em;
	line-height: 1.2;
	margin: 0 0 12px;
}
.ss-card--editorial .ss-card__title a { color: var(--color-ink); }
.ss-card--editorial .ss-card__title a:hover { color: var(--color-primary); text-decoration: none; }
.ss-card--editorial .ss-card__excerpt { color: var(--color-muted); margin: 0 0 14px; }
.ss-card__more {
	font-family: var(--font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--color-primary);
}

/* =========================================================
   BUTTONS — variants premium
   ========================================================= */
.ss-button--gold {
	background: var(--ss-accent);
	border-color: var(--ss-accent);
	color: #fff;
}
.ss-button--gold:hover {
	background: #ef6e2c;
	border-color: #ef6e2c;
	color: #fff;
}
.ss-button--ghost-light {
	background: transparent;
	border-color: rgba(255,255,255,.3);
	color: #fff;
	gap: 10px;
}
.ss-button--ghost-light:hover {
	background: rgba(255,255,255,.06);
	border-color: var(--ss-accent);
	color: #fff;
}

/* =========================================================
   CTA final — refonte
   ========================================================= */
.ss-section--cta {
	background: var(--ss-ink-deep);
	color: #fff;
	position: relative;
	overflow: hidden;
	isolation: isolate;
	padding-block: clamp(80px, 12vw, 140px);
	margin-top: clamp(48px, 8vw, 96px);
}
/* Texture pelouse — couche du fond, sans blend (visible directement). */
.ss-section--cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grass-turf.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: saturate(.9) brightness(.55) contrast(1.1);
	z-index: -2;
}
/* Voile sombre + glow rouge/orange — assombrit la pelouse pour lisibilité, garde la texture lisible. */
.ss-section--cta::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 500px at 100% 50%, color-mix(in srgb, var(--color-primary) 55%, transparent), transparent 55%),
		radial-gradient(600px 500px at 0% 0%,   color-mix(in srgb, var(--ss-accent)   35%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--ss-ink-deep) 70%, transparent), color-mix(in srgb, var(--ss-ink-deep) 88%, transparent));
	z-index: -1;
	pointer-events: none;
}
.ss-section--cta .ss-section__eyebrow { color: rgba(255,255,255,.6); }
.ss-section--cta .ss-cta-block { max-width: 720px; margin-inline: auto; text-align: center; }
.ss-cta-block__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(32px, 5vw, 56px);
	letter-spacing: -0.025em;
	line-height: 1.05;
	color: #fff;
	margin: 0 0 18px;
}
.ss-cta-block__lead {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: clamp(17px, 1.6vw, 21px);
	color: rgba(255,255,255,.75);
	max-width: 52ch;
	margin: 0 auto 36px;
}

/* =========================================================
   Empty state — softer
   ========================================================= */
.ss-empty--soft {
	font-family: var(--font-serif);
	font-style: italic;
	color: var(--color-muted);
	text-align: left;
	padding: 16px 0;
}

/* =========================================================
   Match list — alignement à droite
   ========================================================= */
.ss-match-list__right { display: inline-flex; align-items: center; gap: 12px; }


/* =========================================================
   Roster — effectif éditorial premium (dark theme)
   ========================================================= */
.ss-roster-section {
	position: relative;
	padding: 88px 0 120px;
	background: var(--ss-ink-deep, #0b0d12);
	color: #fff;
	overflow: hidden;
	isolation: isolate;
}
/* Texture pelouse — couche du fond. */
.ss-roster-section::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grass-turf.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	filter: saturate(.9) brightness(.55) contrast(1.1);
	z-index: -2;
}
/* Voile sombre + glows pour lisibilité. */
.ss-roster-section::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(700px 500px at 100% 0%, color-mix(in srgb, var(--color-primary) 45%, transparent), transparent 55%),
		radial-gradient(600px 500px at 0% 100%, color-mix(in srgb, var(--ss-accent) 35%, transparent), transparent 60%),
		linear-gradient(180deg, color-mix(in srgb, var(--ss-ink-deep) 78%, transparent), color-mix(in srgb, var(--ss-ink-deep) 90%, transparent));
	z-index: -1;
	pointer-events: none;
}
.ss-roster-section > .ss-container { position: relative; z-index: 1; }

.ss-roster-section__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding-bottom: 28px;
	margin-bottom: 36px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.ss-roster-section__head-left { min-width: 0; }
.ss-section__eyebrow--accent {
	color: var(--color-primary, #ff1616);
	letter-spacing: 0.18em;
}
.ss-roster-section__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(36px, 5vw, 62px);
	line-height: 0.95;
	letter-spacing: -0.035em;
	margin: 10px 0 0;
	color: #fff;
}
.ss-roster-section__season-tag {
	display: inline-block;
	margin-left: 14px;
	padding: 6px 14px;
	font-family: var(--font-ui);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: #fff;
	background: var(--color-primary, #ff1616);
	border-radius: 6px;
	vertical-align: middle;
	transform: translateY(-8px);
}
.ss-roster-section__head-right {
	display: flex;
	align-items: baseline;
	gap: 10px;
}
.ss-roster-section__count-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(48px, 6vw, 80px);
	line-height: 1;
	letter-spacing: -0.04em;
	color: #fff;
}
.ss-roster-section__count-label {
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-style: italic;
	font-size: 18px;
	color: rgba(255, 255, 255, 0.55);
}

.ss-roster {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 14px;
}
.ss-roster__card {
	position: relative;
	display: grid;
	grid-template-columns: 88px 1fr;
	gap: 14px;
	padding: 18px 20px;
	background: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.08);
	border-radius: 4px;
	transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
	overflow: hidden;
}
.ss-roster__card::before {
	content: "";
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--color-primary, #ff1616);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.28s ease;
}
.ss-roster__card:hover {
	background: rgba(255, 255, 255, 0.07);
	border-color: rgba(255, 255, 255, 0.2);
	transform: translateY(-2px);
}
.ss-roster__card:hover::before { transform: scaleY(1); }

.ss-roster__jersey {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	background:
		linear-gradient(135deg, rgba(255, 22, 22, 0.18), rgba(216, 88, 23, 0.08)),
		rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 4px;
}
.ss-roster__card--nonum .ss-roster__jersey {
	background: rgba(255, 255, 255, 0.05);
}
.ss-roster__jersey-num {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 44px;
	line-height: 1;
	letter-spacing: -0.05em;
	color: #fff;
}
.ss-roster__jersey-initial {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 28px;
	line-height: 1;
	letter-spacing: 0.02em;
	color: rgba(255, 255, 255, 0.7);
}
.ss-roster__info {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
	min-width: 0;
}
.ss-roster__name {
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
	letter-spacing: -0.005em;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}
.ss-roster__nation {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-ui);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.55);
	text-transform: uppercase;
}
.ss-roster__flag {
	font-size: 18px;
	line-height: 1;
	filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
}

@media (max-width: 720px) {
	.ss-roster-section { padding: 56px 0 80px; }
	.ss-roster-section__head { align-items: flex-start; flex-direction: column; gap: 16px; }
	.ss-roster { grid-template-columns: 1fr; gap: 10px; }
	.ss-roster__card { grid-template-columns: 72px 1fr; padding: 14px 16px; }
	.ss-roster__jersey { width: 72px; height: 72px; }
	.ss-roster__jersey-num { font-size: 36px; }
}

/* =========================================================
   News carousel — homepage
   ========================================================= */
.ss-news-carousel-section { padding-block: clamp(56px, 8vw, 96px); }
.ss-news-carousel__head-right {
	display: inline-flex;
	align-items: center;
	gap: 18px;
}
.ss-news-carousel__nav {
	display: inline-flex;
	gap: 8px;
}
.ss-news-carousel__btn {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	color: var(--ss-ink-deep, #0b0d12);
	border: 1px solid rgba(11, 13, 18, 0.18);
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.ss-news-carousel__btn:hover:not(:disabled) {
	background: var(--ss-ink-deep, #0b0d12);
	color: #fff;
	border-color: var(--ss-ink-deep, #0b0d12);
}
.ss-news-carousel__btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}
.ss-news-carousel__btn:active:not(:disabled) { transform: scale(0.95); }

.ss-news-carousel {
	position: relative;
	margin-top: 36px;
}
.ss-news-carousel__track {
	list-style: none;
	padding: 6px 4px 24px;
	margin: 0 -4px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: calc((100% - 44px) / 3);
	gap: 22px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.ss-news-carousel__track::-webkit-scrollbar { display: none; }
.ss-news-carousel__slide {
	scroll-snap-align: start;
	scroll-snap-stop: always;
	min-width: 0;
}
.ss-news-carousel__slide.is-feature {
	grid-column: span 1;
}

.ss-news-card {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border: 1px solid rgba(11, 13, 18, 0.08);
	border-radius: 8px;
	overflow: hidden;
	transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
}
.ss-news-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 24px 48px -22px rgba(11, 13, 18, 0.28);
	border-color: rgba(11, 13, 18, 0.18);
}
.ss-news-card__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--ss-ink-deep, #0b0d12);
}
.ss-news-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.6s ease;
}
.ss-news-card:hover .ss-news-card__media img { transform: scale(1.04); }
.ss-news-card__placeholder {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 32px;
	color: rgba(255, 255, 255, 0.2);
	letter-spacing: -0.02em;
}
.ss-news-card__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 40%, rgba(11, 13, 18, 0.55) 100%);
	pointer-events: none;
}
.ss-news-card__date-chip {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	padding: 8px 12px;
	background: var(--color-primary, #ff1616);
	color: #fff;
	border-radius: 4px;
	font-family: var(--font-display);
	line-height: 1;
	letter-spacing: -0.02em;
	box-shadow: 0 4px 16px rgba(255, 22, 22, 0.4);
}
.ss-news-card__date-day {
	font-size: 22px;
	font-weight: 800;
}
.ss-news-card__date-month {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-top: 2px;
}

.ss-news-card__body {
	padding: 22px 22px 24px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	flex: 1;
}
.ss-news-card__eyebrow {
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-size: 13px;
	font-style: italic;
	color: var(--color-muted, #6b6f7a);
	letter-spacing: 0.04em;
}
.ss-news-card__title {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 20px;
	line-height: 1.18;
	letter-spacing: -0.018em;
	margin: 0;
	color: var(--ss-ink-deep, #0b0d12);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ss-news-card__title a {
	color: inherit;
	text-decoration: none;
}
.ss-news-card__title a:hover { color: var(--color-primary, #ff1616); }
.ss-news-card__excerpt {
	margin: 0;
	font-family: var(--font-ui);
	font-size: 13.5px;
	line-height: 1.55;
	color: var(--color-muted, #6b6f7a);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.ss-news-card__cta {
	margin-top: auto;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-top: 6px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ss-ink-deep, #0b0d12);
	text-decoration: none;
	transition: color 0.18s ease, gap 0.18s ease;
}
.ss-news-card__cta:hover {
	color: var(--color-primary, #ff1616);
	gap: 14px;
}

.ss-news-carousel__progress {
	position: relative;
	height: 3px;
	margin: 18px 0 0;
	background: rgba(11, 13, 18, 0.08);
	border-radius: 999px;
	overflow: hidden;
}
.ss-news-carousel__progress-bar {
	display: block;
	height: 100%;
	width: 100%;
	background: var(--color-primary, #ff1616);
	transform-origin: left center;
	transform: scaleX(0.08);
	transition: transform 0.2s ease;
}

@media (max-width: 980px) {
	.ss-news-carousel__track { grid-auto-columns: calc((100% - 22px) / 2); }
}
@media (max-width: 720px) {
	.ss-news-carousel__track {
		grid-auto-columns: 86%;
		gap: 14px;
	}
	.ss-news-card__title { font-size: 18px; }
	.ss-news-carousel__head-right { gap: 10px; }
	.ss-news-carousel__btn { width: 40px; height: 40px; }
}

/* =========================================================
   Footer credit — Softly Design
   ========================================================= */
.ss-footer__credit {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-ui);
	font-size: 12px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.45);
}
.ss-footer__credit > span {
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-style: italic;
	letter-spacing: 0.02em;
	font-size: 13px;
}
.ss-footer__credit-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding-bottom: 1px;
	color: #fff;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-decoration: none;
	border-bottom: 1px solid rgba(255, 255, 255, 0.25);
	transition: color 0.18s ease, border-color 0.18s ease;
}
.ss-footer__credit-link:hover {
	color: var(--color-primary, #ff1616);
	border-bottom-color: var(--color-primary, #ff1616);
}
.ss-footer__credit-link svg { transition: transform 0.18s ease; }
.ss-footer__credit-link:hover svg { transform: translate(2px, -2px); }

/* =========================================================
   TikTok section — homepage
   ========================================================= */
.ss-tiktok-section {
	position: relative;
	padding: clamp(72px, 9vw, 112px) 0;
	background: linear-gradient(180deg, #fafaf7 0%, #f1efe8 100%);
	overflow: hidden;
}
.ss-tiktok-section__title-em {
	display: block;
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-weight: 400;
	font-style: italic;
	color: var(--color-primary, #ff1616);
	letter-spacing: -0.005em;
}
.ss-tiktok-carousel {
	margin-top: 32px;
}
.ss-tiktok-carousel__track {
	grid-auto-columns: 340px;
	gap: 18px;
	align-items: start;
	padding-bottom: 16px;
}
.ss-tiktok-carousel__slide {
	scroll-snap-align: start;
	background: #fff;
	border: 1px solid rgba(11, 13, 18, 0.08);
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 10px 30px -18px rgba(11, 13, 18, 0.18);
	transition: transform 0.28s ease, box-shadow 0.28s ease;
}
.ss-tiktok-carousel__slide:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 40px -18px rgba(11, 13, 18, 0.32);
}
.ss-tiktok-carousel__slide .tiktok-embed {
	display: block;
	margin: 0 auto !important;
	min-width: 280px !important;
	max-width: 100% !important;
	width: 100% !important;
}

/* CTA pleine largeur sous le carrousel */
.ss-tiktok-cta {
	margin-top: 36px;
}
.ss-tiktok-follow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
	font-family: var(--font-ui);
	transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease;
}

/* Pill version (header) */
.ss-tiktok-follow--pill {
	padding: 9px 16px;
	border-radius: 999px;
	background: #0b0d12;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.02em;
}
.ss-tiktok-follow--pill:hover {
	background: var(--color-primary, #ff1616);
}

/* Block version (CTA full bar) */
.ss-tiktok-follow--block {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	width: 100%;
	padding: 22px 28px;
	background: #0b0d12;
	color: #fff;
	border-radius: 8px;
	position: relative;
	overflow: hidden;
}
.ss-tiktok-follow--block::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 0, 80, 0.18) 0%, transparent 35%, transparent 65%, rgba(0, 240, 255, 0.18) 100%);
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.4s ease;
}
.ss-tiktok-follow--block:hover::before { opacity: 1; }
.ss-tiktok-follow--block:hover { transform: translateY(-2px); }
.ss-tiktok-follow--block > svg:first-child {
	flex: 0 0 auto;
}
.ss-tiktok-follow--block > svg:last-child {
	flex: 0 0 auto;
	transition: transform 0.2s ease;
}
.ss-tiktok-follow--block:hover > svg:last-child { transform: translateX(4px); }
.ss-tiktok-follow--block > span {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	line-height: 1.25;
}
.ss-tiktok-follow--block strong {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.01em;
}
.ss-tiktok-follow--block em {
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-style: italic;
	font-size: 14px;
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.02em;
}

/* Boutons nav clairs (sur section fond clair) */
.ss-news-carousel__btn--light {
	border-color: rgba(11, 13, 18, 0.18);
	background: #fff;
}

@media (max-width: 720px) {
	.ss-tiktok-carousel__track { grid-auto-columns: 86%; gap: 12px; }
	.ss-tiktok-follow--block { flex-direction: column; padding: 18px; gap: 10px; text-align: center; }
	.ss-tiktok-follow--block > span { align-items: center; }
}

/* =========================================================
   Season switcher — tabs sur hero des pages de la ligue
   ========================================================= */
.ss-season-switcher {
	margin: 28px 0 0;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.ss-season-switcher__label {
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-style: italic;
	font-size: 15px;
	color: rgba(255, 255, 255, 0.55);
	letter-spacing: 0.04em;
}
.ss-season-switcher__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 0;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 999px;
	padding: 4px;
}
.ss-season-switcher__item {
	display: inline-flex;
	align-items: center;
	padding: 8px 18px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.06em;
	color: rgba(255, 255, 255, 0.62);
	text-decoration: none;
	border-radius: 999px;
	transition: background 0.18s ease, color 0.18s ease;
}
.ss-season-switcher__item:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.06);
}
.ss-season-switcher__item.is-active {
	background: var(--color-primary, #ff1616);
	color: #fff;
}
.ss-season-switcher__item.is-active:hover {
	background: var(--color-primary, #ff1616);
}

/* Variante sur fond clair (au cas où injecté ailleurs) */
.ss-section--light .ss-season-switcher__label { color: var(--color-muted, #6b6f7a); }
.ss-section--light .ss-season-switcher__list {
	background: rgba(11, 13, 18, 0.04);
	border-color: rgba(11, 13, 18, 0.08);
}
.ss-section--light .ss-season-switcher__item { color: var(--color-muted, #6b6f7a); }
.ss-section--light .ss-season-switcher__item:hover { color: var(--ss-ink-deep, #0b0d12); background: rgba(11, 13, 18, 0.05); }

/* =========================================================
   Overlay menu — full-screen premium (remplace l'ancien drawer)
   ========================================================= */

/* Burger button — passe à X quand .is-open */
.ss-header__toggle[aria-expanded="true"] .ss-header__toggle-burger > span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ss-header__toggle[aria-expanded="true"] .ss-header__toggle-burger > span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ss-header__toggle[aria-expanded="true"] .ss-header__toggle-burger > span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.ss-header__toggle-burger > span {
	transition: transform 0.3s cubic-bezier(.4,0,.2,1), opacity 0.2s ease;
	transform-origin: center;
}
/* Quand le menu est ouvert, élever le burger pour qu'il reste cliquable */
.ss-header__toggle[aria-expanded="true"] {
	position: relative;
	z-index: 10001;
}

/* Body lock quand overlay ouvert */
body.ss-overlay-open { overflow: hidden; }

/* Container — toujours au-dessus de tout */
.ss-overlay-menu {
	position: fixed;
	inset: 0;
	z-index: 10000;
	display: none;
	color: #fff;
	font-family: var(--font-ui);
	overflow: hidden;
	isolation: isolate;
}
.ss-overlay-menu[hidden] { display: none; }
.ss-overlay-menu.is-open {
	display: block;
	animation: ssOverlayIn 0.4s cubic-bezier(.4,0,.2,1) forwards;
}
.ss-overlay-menu.is-closing {
	display: block;
	animation: ssOverlayOut 0.3s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes ssOverlayIn  { from { opacity: 0; } to { opacity: 1; } }
@keyframes ssOverlayOut { from { opacity: 1; } to { opacity: 0; } }

/* Fond — pelouse + voile + glows (cohérent avec roster) */
.ss-overlay-menu__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--ss-ink-deep, #0b0d12);
}
.ss-overlay-menu__bg::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: url("../img/grass-turf.png");
	background-size: cover;
	background-position: center;
	filter: saturate(.85) brightness(.5) contrast(1.05);
	opacity: 0.65;
}
.ss-overlay-menu__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(900px 600px at 85% 10%, color-mix(in srgb, var(--color-primary) 50%, transparent), transparent 55%),
		radial-gradient(700px 600px at 0% 100%, color-mix(in srgb, var(--ss-accent) 38%, transparent), transparent 60%),
		linear-gradient(180deg, rgba(11,13,18,0.75), rgba(11,13,18,0.92));
}

.ss-overlay-menu__inner {
	position: relative;
	height: 100%;
	max-width: 1400px;
	margin: 0 auto;
	padding: 22px 40px 32px;
	display: grid;
	grid-template-rows: auto 1fr auto;
	gap: 24px;
}

/* Head : logo + close */
.ss-overlay-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.ss-overlay-menu__brand {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	text-decoration: none;
	color: #fff;
}
.ss-overlay-menu__logo {
	width: 44px;
	height: 44px;
	object-fit: contain;
}
.ss-overlay-menu__wordmark {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 13px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	max-width: 200px;
	line-height: 1.2;
}
.ss-overlay-menu__close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 10px 18px 10px 22px;
	background: transparent;
	border: 1px solid rgba(255,255,255,0.2);
	border-radius: 999px;
	color: #fff;
	cursor: pointer;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ss-overlay-menu__close:hover {
	background: var(--color-primary, #ff1616);
	border-color: var(--color-primary, #ff1616);
}
.ss-overlay-menu__close:active { transform: scale(0.96); }
.ss-overlay-menu__close-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: rgba(255,255,255,0.08);
}

/* Body : nav + aside (split) */
.ss-overlay-menu__body {
	display: grid;
	grid-template-columns: 1.4fr 1fr;
	gap: 60px;
	align-items: center;
	padding-block: 20px;
	overflow-y: auto;
	scrollbar-width: none;
}
.ss-overlay-menu__body::-webkit-scrollbar { display: none; }

/* Nav — gros menu numéroté éditorial */
.ss-overlay-menu__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
	counter-reset: navitem;
}
.ss-overlay-menu__list li {
	counter-increment: navitem;
	transform: translateX(-20px);
	opacity: 0;
}
.ss-overlay-menu.is-open .ss-overlay-menu__list li {
	animation: ssOverlayItemIn 0.5s cubic-bezier(.2,0,.2,1) forwards;
}
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(1) { animation-delay: 0.10s; }
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(2) { animation-delay: 0.16s; }
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(3) { animation-delay: 0.22s; }
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(4) { animation-delay: 0.28s; }
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(5) { animation-delay: 0.34s; }
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(6) { animation-delay: 0.40s; }
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(7) { animation-delay: 0.46s; }
.ss-overlay-menu.is-open .ss-overlay-menu__list li:nth-child(8) { animation-delay: 0.52s; }
@keyframes ssOverlayItemIn { to { transform: translateX(0); opacity: 1; } }

.ss-overlay-menu__list a {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 20px;
	padding: 6px 0;
	font-family: var(--font-display);
	font-weight: 800;
	font-size: clamp(40px, 6vw, 80px);
	line-height: 1;
	letter-spacing: -0.035em;
	color: #fff;
	text-decoration: none;
	transition: color 0.2s ease, transform 0.2s ease;
}
.ss-overlay-menu__list a::before {
	content: "0" counter(navitem);
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.4);
	min-width: 28px;
	transform: translateY(-12px);
	transition: color 0.2s ease;
}
.ss-overlay-menu__list a:hover {
	color: var(--color-primary, #ff1616);
	transform: translateX(8px);
}
.ss-overlay-menu__list a:hover::before { color: rgba(255,255,255,0.85); }
.ss-overlay-menu__list .current-menu-item > a,
.ss-overlay-menu__list .current_page_item > a {
	color: var(--color-primary, #ff1616);
}
.ss-overlay-menu__list .current-menu-item > a::after,
.ss-overlay-menu__list .current_page_item > a::after {
	content: "";
	display: inline-block;
	width: 12px;
	height: 12px;
	background: var(--color-primary, #ff1616);
	border-radius: 50%;
	margin-left: 8px;
	transform: translateY(-12px);
}

/* Aside — next match + socials */
.ss-overlay-menu__aside {
	display: flex;
	flex-direction: column;
	gap: 28px;
}
.ss-overlay-menu__next {
	display: block;
	padding: 24px;
	border: 1px solid rgba(255,255,255,0.14);
	background: rgba(255,255,255,0.04);
	border-radius: 8px;
	text-decoration: none;
	color: #fff;
	transition: transform 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}
.ss-overlay-menu__next:hover {
	transform: translateY(-3px);
	background: rgba(255,255,255,0.08);
	border-color: var(--color-primary, #ff1616);
}
.ss-overlay-menu__next-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-ui);
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.7);
}
.ss-overlay-menu__next-dot {
	width: 8px;
	height: 8px;
	background: var(--color-primary, #ff1616);
	border-radius: 50%;
	box-shadow: 0 0 0 4px rgba(255,22,22,0.18);
	animation: ssPulseDot 1.6s ease-in-out infinite;
}
@keyframes ssPulseDot {
	0%, 100% { box-shadow: 0 0 0 4px rgba(255,22,22,0.18); }
	50%      { box-shadow: 0 0 0 7px rgba(255,22,22,0.08); }
}
.ss-overlay-menu__next-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 20px;
	margin: 18px 0 14px;
}
.ss-overlay-menu__next-crest img {
	width: 56px;
	height: 56px;
	object-fit: contain;
}
.ss-overlay-menu__next-vs {
	font-family: var(--font-display);
	font-weight: 800;
	font-size: 22px;
	color: rgba(255,255,255,0.5);
	letter-spacing: -0.02em;
}
.ss-overlay-menu__next-when {
	display: block;
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-style: italic;
	font-size: 16px;
	color: rgba(255,255,255,0.75);
	text-align: center;
}

.ss-overlay-menu__socials {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.ss-overlay-menu__socials-label {
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-style: italic;
	font-size: 14px;
	color: rgba(255,255,255,0.55);
	letter-spacing: 0.02em;
}
.ss-overlay-menu__socials-row {
	display: inline-flex;
	gap: 8px;
}
.ss-overlay-menu__socials-row a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(255,255,255,0.18);
	border-radius: 50%;
	color: rgba(255,255,255,0.78);
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.ss-overlay-menu__socials-row a:hover {
	background: #fff;
	color: var(--ss-ink-deep, #0b0d12);
	border-color: #fff;
	transform: translateY(-2px);
}

/* Footer — CTA + saison */
.ss-overlay-menu__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(255,255,255,0.12);
}
.ss-overlay-menu__season {
	font-family: var(--font-ui);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	color: rgba(255,255,255,0.55);
}
.ss-overlay-menu__season em {
	font-family: var(--font-serif, "Instrument Serif", serif);
	font-style: italic;
	margin-right: 6px;
	color: rgba(255,255,255,0.35);
}

/* Responsive */
@media (max-width: 900px) {
	.ss-overlay-menu__inner { padding: 18px 22px 26px; gap: 16px; }
	.ss-overlay-menu__body {
		grid-template-columns: 1fr;
		gap: 28px;
		align-items: start;
	}
	.ss-overlay-menu__list a { font-size: clamp(34px, 9vw, 52px); }
	.ss-overlay-menu__close-label { display: none; }
	.ss-overlay-menu__close { padding: 6px; }
	.ss-overlay-menu__wordmark { display: none; }
}
@media (max-width: 480px) {
	.ss-overlay-menu__list a { font-size: 32px; }
	.ss-overlay-menu__list a::before { font-size: 11px; min-width: 22px; }
	.ss-overlay-menu__foot { flex-direction: column; align-items: stretch; gap: 12px; text-align: center; }
}

/* Override ancien drawer style (au cas où) */
.ss-drawer.ss-overlay-menu { background: transparent; transform: none; transition: none; }
.ss-drawer.ss-overlay-menu::before,
.ss-drawer.ss-overlay-menu::after { content: none; }