/*
Theme Name: ts-v1
Theme URI: https://www.thestint.com
Description: Thème créé spécifiquement pour thestint.com.
Version: 0.0.6
Author: Paul Argoud
Author URI: https://www.thestint.com
*/

/* ─── Variables ─── */

:root
{
	/* Fonts */
	--font-heading: 'Sora', 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
	--font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

	/* Font sizes */
	--font-size-base: 1rem;
	--font-size-h4: 1.25rem;
	--font-size-h3: 1.5rem;
	--font-size-h2: 2.25rem;
	--font-size-h1: 3rem;

	/* Line heights */
	--line-height-base: 1.5;
	--line-height-heading: 1.2;

	/* Spacing */
	--space-xs: 0.25rem;
	--space-sm: 0.5rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;

	/* Colors */
	--color-red: #d1002a;
	--color-black: #000;
	--color-white: #fff;
	--color-muted: #999;
	--color-border: #e5e7eb;
	--color-light: #eee;
	--color-dark: #101010;

	/* Layout */
	--wrap-max: 1190px;       /* largeur max du conteneur #wrap */
	--aside-width: 300px;     /* colonne latérale (classement / calendrier) */
	--content-max: 794px;     /* largeur de lecture d'un article/page = #wrap − aside − gap */
}

/* ─── Polices ─── */

/* Sora — police des titres (poids 600). */
@font-face {
	font-family: 'Sora';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/sora/SemiBold.woff2') format('woff2');
}

/* Inter — corps de texte. Seuls les poids 300→700 normaux + l'italique 400
   (légendes d'images) sont réellement utilisés ; latin + latin-ext conservés. */

/* latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('fonts/inter/latin-300-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 300;
	font-display: swap;
	src: url('fonts/inter/latin-ext-300-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter/latin-400-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter/latin-ext-400-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter/latin-400-italic.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Inter';
	font-style: italic;
	font-weight: 400;
	font-display: swap;
	src: url('fonts/inter/latin-ext-400-italic.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/inter/latin-500-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('fonts/inter/latin-ext-500-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter/latin-600-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url('fonts/inter/latin-ext-600-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/inter/latin-700-normal.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* latin-ext */
@font-face {
	font-family: 'Inter';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('fonts/inter/latin-ext-700-normal.woff2') format('woff2');
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ─── Reset ─── */

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

/* ─── Base ─── */

html
{
	font-size: 100%;
}

body
{
	font-family: var(--font-body);
	font-size: var(--font-size-base);
	font-weight: 400;
	line-height: var(--line-height-base);
	text-align: center;
	color: var(--color-black);
	background-color: var(--color-white);

	main
	{
		text-align: left;
	}


}

h1, h2, h3, h4, h5, h6
{
	font-family: var(--font-heading);
	font-weight: 600;
	line-height: var(--line-height-heading);
	hyphens: auto;
}

h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); margin-top: var(--space-2xl); margin-bottom: var(--space-sm); }
h3 { font-size: var(--font-size-h3); margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
h4 { font-size: var(--font-size-h4); margin-top: var(--space-lg); margin-bottom: var(--space-xs); }

p { margin-bottom: var(--space-lg); }

figure { margin: 0; }

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

a:focus-visible,
button:focus-visible
{
	border-radius: 2px;
	outline: 2px solid var(--color-red);
	outline-offset: 3px;
}

/* ─── Utilitaires ─── */

.aligncenter
{
	display: block;
	margin-inline: auto;
	text-align: center;
}

.alignleft
{
	display: block;
	margin-inline-end: var(--space-sm);
}

.alignright
{
	display: block;
	margin-inline-start: var(--space-sm);
}

.sr-only
{
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement : masqué jusqu'au focus clavier, puis visible en haut de page. */
.skip-link
{
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: .75rem 1.25rem;
	background: var(--color-black);
	color: var(--color-white);
	font-weight: 600;
}

.skip-link:focus { left: 0; }

/* Respect de prefers-reduced-motion : neutralise les animations décoratives
   (dégradé du bandeau, brillance du logo, tracé du circuit, transitions). */
@media (prefers-reduced-motion: reduce)
{
	*, *::before, *::after
	{
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}

#wrap
{
	width: min(var(--wrap-max), 100% - var(--space-xl));
	margin-inline: auto;
	padding: 2rem;
}

/* ─── Logo animé ─── */

/* Apparition en cascade (une seule fois) */
.ink { opacity: 0; animation: appear .55s ease forwards; }
.core { animation-delay: .10s; }
.r1   { animation-delay: .35s; }
.r2   { animation-delay: .50s; }
.r3   { animation-delay: .65s; }
@keyframes appear { from { opacity: 0; } to { opacity: 1; } }

/* Reflet glacé qui balaie le S, en boucle */
.shine { animation: sweep 3.6s ease-in-out 1.3s infinite; }
@keyframes sweep
{
	0%, 18%   { transform: translateX(-360px) skewX(-18deg); }
	48%, 100% { transform: translateX(1120px) skewX(-18deg); }
}

/* ─── Layout ─── */

body > header
{
	font-weight: 500;
	color: var(--color-white);
	background-color: var(--color-black);

	> #wrap
	{
		display: flex;
		padding: 2rem 0;
	}

	.logo
	{
		display:block;
		width: 12rem;
		height: auto;
	}
	.logo-s
	{
		display:block;
		width: 20rem;
		height: auto;
	}
	.logo-ier
	{
		display:none;
	}

	svg.logo-s,
	svg.logo-s path
	{
		image-rendering: auto;
		shape-rendering: geometricPrecision;
	}

	.logo3
	{
		display:block;
		height:3rem;
		width:auto;
	}

	nav
	{
		display: flex;
		align-items: center;
		justify-content: center;
		width:100%;
		flex-wrap:wrap;
	}

	> .gradient
	{
		height: .25rem;
		background: linear-gradient(90deg, var(--color-red) 0%, var(--color-black) 50%, var(--color-red) 100%);
		background-size: 200% 100%;
		animation: bandeau-slide 8s linear infinite;
	}
}
main > section
{
	display:flex;
}
main > section h2
{
	margin-bottom:2rem;
}

body > footer
{
	background-color: var(--color-black);
	color: var(--color-white);
	text-align:left;

	> #wrap
	{
		padding:5rem 0;
	}
}

body > footer .logo
{
	max-width:100px;
}

body > footer .copyright
{
	text-align:center;
}

body > footer .identity
{
	width:27rem;
}

.flex
{
	display: flex;
	align-items: center;
	justify-content:space-between;
}

body > footer .reseauxsociaux
{
	display:flex;
	justify-content:space-between;
	min-width:16rem;
}

body > footer .reseauxsociaux svg
{
	display: block;            /* supprime l'espace fantôme sous l'inline */
	width: 32px;
	height: 32px;
	fill: currentColor;
}

.reseauxsociaux .youtube:hover  { color: #FF0000; }
.reseauxsociaux .instagram:hover{ color: #E4405F; }
.reseauxsociaux .facebook:hover { color: #1877F2; }
.reseauxsociaux .x:hover        { color: var(--color-white); }  /* blanc au lieu de noir */
.reseauxsociaux .tiktok:hover   { color: var(--color-white); }  /* blanc au lieu de noir */

body > footer .reseauxsociaux .tiktok
{
	display:none;
}

/* Navigation de pied de page (.pages) : liens épurés */
body > footer .pages ul
{
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--space-sm);
}

body > footer .pages a
{
	color: var(--color-white);
	opacity: 0.75;
	transition: opacity 200ms ease, color 200ms ease;
}

body > footer .pages a:hover
{
	opacity: 1;
	color: var(--color-red);
}

body.archive main#contenu header
{
	padding:1rem;
}

body.archive h2
{
	margin-top:0;
}

body.post-type-archive-evenement
{
	#wrap > header
	{
		text-align: left;
		margin-bottom: var(--space-xl);
	}

	#wrap > .flex
	{
		align-items: flex-start;
		gap: var(--space-xl);
		flex-wrap: wrap;
	}

	section.championnat
	{
		flex: 1 1 calc(50% - var(--space-xl));
		min-width: 280px;
	}

	section.championnat h2
	{
		margin-top: 0;
		padding-bottom: var(--space-sm);
		border-bottom: 2px solid currentColor;
	}

	section.championnat--wec h2  { color: var(--color-red); }
	section.championnat--imsa h2 { color: var(--color-black); }

	section.championnat .grid
	{
		display: flex;
		flex-direction: column;
		gap: var(--space-sm);
	}

	section.championnat article
	{
		border-radius: 0.5rem;
		background-color: var(--color-white);
		border: 1px solid var(--color-border);
		transition: border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease;
	}

	section.championnat article:hover
	{
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
	}

	section.championnat--wec  article:hover { border-color: var(--color-red); }
	section.championnat--imsa article:hover { border-color: var(--color-black); }

	section.championnat article a
	{
		display: block;
		padding: var(--space-md) var(--space-lg);
	}

	section.championnat article h3
	{
		margin: 0;
		display: flex;
		align-items: baseline;
		gap: var(--space-md);
		font-size: 1.125rem;
		font-weight: 500;
	}

	section.championnat article h3 .dates
	{
		flex: 0 0 6rem;
		font-size: 0.875rem;
		font-weight: 600;
		color: var(--color-muted);
		font-variant-numeric: tabular-nums;
		transition: color 150ms ease;
	}

	section.championnat--wec  article:hover h3 .dates { color: var(--color-red); }
	section.championnat--imsa article:hover h3 .dates { color: var(--color-black); }
}

/* Carousel des réels (section #reels) */
#reels .reels-carousel {
	display: flex;
	gap: 1rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: .5rem;        /* respiration sous la scrollbar */
	scrollbar-width: thin;
}
#reels .reel-slide {
	position: relative;
	flex: 0 0 auto;
	width: 180px;
	aspect-ratio: 9 / 16;
	scroll-snap-align: start;
	overflow: hidden;
	display: block;
	text-decoration: none;
}
#reels .reel-slide img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Titre masqué sur les réels. Pour le réafficher : remplacer `display: none`
par `display: -webkit-box` et décommenter les propriétés ci-dessous. */
#reels .reel-slide__title {
	display: none;
	/*
	position: absolute;
	inset: auto 0 0 0;
	padding: 2rem .6rem .6rem;
	color: var(--color-white);
	font-size: .8rem;
	line-height: 1.25;
	background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,0));
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	*/
}

#cejourla
{
	background-color: var(--color-light);
	h2
	{
		margin-top:0;
	}
	.cejourla-carousel
	{
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: 100%;
		gap: var(--space-md);
		overflow-x: auto;
		scroll-snap-type: x mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		padding-bottom: var(--space-md);
		&::-webkit-scrollbar { height: 6px; }
		&::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 3px; }

	}

	.cejourla-slide
	{
		position: relative;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		aspect-ratio: 4 / 3;
		color: var(--color-white);
		background: var(--color-black);
		scroll-snap-align: start;

		img
		{
			display: block;
			width: 100%;
			height: 100%;
			object-fit: cover;
			filter: grayscale(100%);
			transition: transform 400ms ease, opacity 300ms ease, filter 400ms ease;
		}

		&:hover img { transform: scale(1.05); opacity: 0.8; filter: grayscale(0); }

		h3
		{
			position: absolute;
			inset: auto 0 0 0;
			margin: 0;
			padding: 1.5rem var(--space-md) 0.75rem;
			font-size: var(--font-size-base);
			line-height: var(--line-height-heading);
			text-align: left;
			background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);




		}
		.date
		{
			position: absolute;
			top: 0;
			left: 1rem;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: .5rem .75rem;
			font-weight: 700;
			line-height: 1.1;
			text-align: center;
			background-color: var(--color-black);
		}

		.date hr
		{
			width: 100%;
			margin: .25rem 0;
			border: 0;
			border-top: 1px solid currentColor;
		}


	}

	.cejourla-slide--all
	{
		align-items: center;
		justify-content: center;
		padding: var(--space-md);
		font-weight: 700;
		text-align: center;
		background: var(--color-black);

		span { font-size: 1.125rem;background:none; }
		&:hover { filter: brightness(0.85); }
	}
}

/* ─── Carte article (squelette partagé #articles + #latestposts) ─── */
/* Côté #articles : limité à l'accueil — sur les autres gabarits (ex. category.php)
   la section #articles contient .cat-layout/.cat-main et ne doit pas hériter de ces cartes. */

body.home #articles article,
#latestposts article
{
	--gap: 15px;
	padding: var(--gap);
}

#latestposts article
{
	padding: 0;
}

body.home #articles article,
body.home #articles article h2,
#latestposts article,
#latestposts article h2
{
	transition:
		color 250ms ease-in-out,
		border-color 250ms ease-in-out,
		-webkit-backdrop-filter 250ms ease-in-out,
		backdrop-filter 250ms ease-in-out;
}

body.home #articles article > a,
#latestposts article a
{
	display: flex;
	justify-content: space-between;
}

body.home #articles article img,
#latestposts article img
{
	aspect-ratio: 3 / 2;
	width: calc(50% - 1rem);
	height: auto;
}

body.home #articles article .texte,
#latestposts article .texte
{
	width: calc(50% - 1rem);
	text-align: left;
}

body.home #articles article:hover {
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border-color: var(--color-red);
}

body.home #latestposts article:hover {
	border-color: var(--color-red);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
}

body.home #latestposts article:hover h2 { color: var(--color-red); }

body.home #articles
{
	background-color: var(--color-black);
	background-size: 100%;
  background-position: center bottom;


	article
	{
		border-color: var(--color-white);

		background: rgba(255, 255, 255, 0.15);
		backdrop-filter: blur(5px);
		-webkit-backdrop-filter: blur(5px);
		border: 1px solid rgba(255, 255, 255, 0.3);
		box-shadow: 
			0 8px 32px rgba(0, 0, 0, 0.1),
			inset 0 1px 0 rgba(255, 255, 255, 0.5),
			inset 0 -1px 0 rgba(255, 255, 255, 0.1),
			inset 0 0 4px 2px rgba(255, 255, 255, 0.2);

		h2
		{
			margin: 0 0 1rem;
			font-size: 2.75rem;
			font-weight: 500;
			text-align: left;
		}

		p
		{
			margin: 0;
			font-size: 1.125rem;
			font-weight: 300;
			text-align: justify;
			hyphens: auto;
			display: -webkit-box;
			-webkit-line-clamp: 5;
			line-clamp: 5;
			-webkit-box-orient: vertical;
			overflow: hidden;
		}

		> a
		{
			color: var(--color-white);
		}

		.texte
		{
			time { font-size: 0.625rem; display:none; }
		}
	}
	.grid
	{
		display: grid;
		grid-template-columns: 1fr;
		gap: 1rem;
		margin-top: 1rem;
		p
		{
			display:none;
		}

		article > a
		{
			flex-direction: column;
		}

		article .texte
		{
			font-family: var(--font-body);
			font-size: 0.75rem;
		}

		article .texte h2
		{
			display: -webkit-box;
			-webkit-line-clamp: 3;
			line-clamp: 3;
			-webkit-box-orient: vertical;
			overflow: hidden;
			font-size: 1.375rem;
			margin-top:1rem;
		}

		article img,
		article .texte
		{
			width: 100%;
		}
	}
}

section#latestposts article
{
	border-color: var(--color-black);
}

section#latestposts article a
{
	color: var(--color-black);
	align-items: center;
	gap: 1rem;
}

section#latestposts .grid
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	margin-top: 1rem;
}

section#latestposts article .texte h3
{
	font-size:1.4rem;
	margin: 0;
}

section#latestposts article img
{
	height:6rem;
	width: auto;
	object-fit: cover;
}

section#latestposts article .texte
{
	width: auto;
	flex: 1;
}

/* ─── #latestvids : 2 vedettes + liste façon « player » ─── */

section#latestvids .vids-featured
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

section#latestvids .vid-feature
{
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 16 / 9;
	color: var(--color-white);
}

section#latestvids .vid-feature img
{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

section#latestvids .vid-feature::after
{
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .75) 0%, rgba(0, 0, 0, 0) 55%);
}

section#latestvids .vid-feature-title
{
	position: absolute;
	left: 5rem;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	font-size: 1.125rem;
	font-weight: 600;
	line-height: 1.25;
}

section#latestvids .vid-play
{
	position: absolute;
	left: 1.25rem;
	bottom: 1.25rem;
	z-index: 2;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--color-red);
}

section#latestvids .vid-play::before
{
	content: "";
	position: absolute;
	top: 50%;
	left: 54%;
	transform: translate(-50%, -50%);
	border-style: solid;
	border-width: .5rem 0 .5rem .8rem;
	border-color: transparent transparent transparent var(--color-white);
}

/* Liste */
section#latestvids .vids-list
{
	width: 100%;
	border-collapse: collapse;
}

section#latestvids .vids-list thead th
{
	padding: .5rem .75rem 1rem;
	font-size: .8rem;
	font-weight: 600;
	text-align: left;
	color: var(--color-black);
	border-bottom: 1px solid rgba(0, 0, 0, .15);
}

section#latestvids .vids-list thead th.vids-col-duration
{
	text-align: right;
}

section#latestvids .vids-list tbody td
{
	padding: .85rem .75rem;
	border-bottom: 1px solid rgba(0, 0, 0, .12);
	vertical-align: middle;
}

section#latestvids .vids-col-num { width: 80px; }

section#latestvids .vids-col-duration
{
	text-align: right;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}

section#latestvids .vids-thumb
{
	display: block;
	overflow: hidden;
}

section#latestvids .vids-thumb img
{
	display: block;
	width: 128px;
	aspect-ratio:16/9;
	object-fit: cover;
	transition: transform 250ms ease;
}

section#latestvids .vids-thumb:hover img { transform: scale(1.06); }

section#latestvids .vids-title-link
{
	display: flex;
	align-items: center;
	color: var(--color-black);
}

section#latestvids .vids-text { display: flex; flex-direction: column; }

section#latestvids .vids-label
{
	font-size: .875rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--color-red);
}

section#latestvids .vids-name { font-size:1.25rem; }

.readmore
{
	float:right;
	margin-top: 1.5rem;
	padding: .85rem 1.75rem;
	
	background: var(--color-black);
	color: var(--color-white);
	font-weight: 600;
}

.readmore:hover { background: var(--color-red); }

/* Bouton d'envoi des formulaires WPForms aligné sur le style .readmore.
   !important nécessaire : WPForms pose la couleur via ses propres règles/variables. */
.wpforms-container .wpforms-submit-container button.wpforms-submit
{
	padding: 0.85rem 1.75rem;
	border: 0;
	border-radius: 0;
	font-size: 1rem;
	font-weight: 600;
	color: var(--color-white) !important;
	background-color: var(--color-black) !important;
	transition: background-color 200ms ease;
}

.wpforms-container .wpforms-submit-container button.wpforms-submit:hover,
.wpforms-container .wpforms-submit-container button.wpforms-submit:active
{
	background-color: var(--color-red) !important;
}

/* Message de confirmation après envoi : fond noir / texte blanc (cohérent avec le thème) */
div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message)
{
	background-color: var(--color-black) !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full
{
	color: var(--color-white) !important;
}

/* ─── #latestposts : 2 colonnes (articles + classements) ─── */

section#latestposts #wrap
{
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

/* Onglets */
section#latestposts .tabs-nav
{
	display: flex;
	gap: 0.5rem;
	margin: 1rem 0;
}

section#latestposts .tab-btn
{
	flex: 1;
	padding: 0.6rem 1rem;
	border: 2px solid var(--tab-color);
	background: none;
	color: var(--tab-color);
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	cursor: pointer;
	transition: background-color 200ms ease, color 200ms ease;
}

section#latestposts .tab-btn.is-active
{
	background: var(--tab-color);
	color: var(--color-white);
}

section#latestposts .tab-panel[hidden]
{
	display: none;
}

/* Tableau de classement (partagé : #latestposts + aside catégorie) */
table.classement
{
	width: 100%;
	border-collapse: collapse;
}

table.classement td
{
	padding: 0.5rem 0.75rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
	vertical-align: middle;
}

table.classement tr:last-child td
{
	border-bottom: 0;
}

.classement-rang
{
	width: 2rem;
	text-align: center;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--color-red);
}

.classement-logo
{
	width: 64px;
	text-align: center;
}

.classement-logo svg
{
	display: block;
	height: 32px;
	width: auto;
	max-width: 56px;
	margin: 0 auto;
}

.classement-nom
{
	font-weight: 600;
}

.classement-points
{
	text-align: right;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	white-space: nowrap;
}

.classement-vide
{
	margin: 1rem 0;
	opacity: 0.7;
}

/* ─── Catégorie / article : contenu + aside latéral (300px) ─── */

.cat-layout
{
	display: flex;
	gap: 2rem;
	align-items: flex-start;
	margin-top:1rem;
}

.cat-main
{
	flex: 1;
	min-width: 0;
}

/* Pages statiques (page.php) : même colonne de lecture que les articles, mais
   sans aside → cat-main seul. On la recentre et on la borne à la largeur de la
   colonne d'article (794px) pour un rendu identique à single.php. */
.cat-layout > .cat-main:only-child
{
	width: 100%;          /* remplit le conteneur (sinon se rétracte au contenu en flex) */
	max-width: var(--content-max);
	margin-inline: auto;
}

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

/* Article vedette (le plus récent, en tête de la colonne catégorie) */
.cat-main article.latest
{
	margin-bottom: var(--space-xl);
}

.cat-main article.latest a
{
	display: block;
	color: var(--color-black);
}

.cat-main article.latest img
{
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.cat-main article.latest .texte
{
	padding-top: var(--space-md);
	text-align: left;
}

.cat-main article.latest h2
{
	margin: 0;
	font-size: var(--font-size-h2);
	font-weight: 600;
	transition: color 200ms ease;
}

.cat-main article.latest:hover h2
{
	color: var(--color-red);
}

/* Grille des articles suivants */
.cat-main .grid
{
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--space-lg);
	margin-top: var(--space-xl);
}

.cat-main .grid article
{
	transition: transform 200ms ease;
}

.cat-main .grid article:hover
{
	transform: translateY(-2px);
}

.cat-main .grid a
{
	display: flex;
	flex-direction: column;
	color: var(--color-black);
}

.cat-main .grid img
{
	width: 100%;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.cat-main .grid .texte
{
	padding-top: var(--space-sm);
	text-align: left;
}

.cat-main .grid h2
{
	margin: 0;
	font-size: 1.25rem;
	font-weight: 600;
	line-height: var(--line-height-heading);
	transition: color 200ms ease;
}

.cat-main .grid article:hover h2
{
	color: var(--color-red);
}

/* Date affichée sous le titre (vedette + grille) */
.cat-main article.latest time,
.cat-main .grid time
{
	display: block;
	margin-top: var(--space-xs);
	font-size: 0.75rem;
	color: var(--color-muted);
}

/* Pagination des archives : liens calqués sur .readmore.
   Les deux conteneurs restent présents même vides : « page suivante »
   reste ainsi calé à droite en 1re page (sans « précédente ») comme
   « précédente » à gauche en dernière page (sans « suivante »). */
.cat-main nav.pagination
{
	display: flex;
	justify-content: space-between;
	margin-top: 1.5rem;
}

.cat-main nav.pagination a
{
	display: inline-block;
	padding: .85rem 1.75rem;

	background: var(--color-black);
	color: var(--color-white);
	font-weight: 600;
}

.cat-main nav.pagination a:hover { background: var(--color-red); }

/* Tweets intégrés centrés dans le contenu */
.cat-main .twitter-tweet
{
	margin: 0 auto;
}

/* Paragraphes (blocs Gutenberg) */
.wp-block-paragraph
{
	font-size: 1.2rem;
}

/* Légendes d'images (blocs Gutenberg) */
figcaption.wp-element-caption
{
	font-size: 0.75rem;
	font-style: italic;
	color: #3A3A3A;
}

/* Rubrique affichée au-dessus du titre de l'article */
.article-rubrique
{
	display: inline-block;
	margin-bottom: 0.5rem;
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--color-red);
	text-decoration: none;
}

.article-rubrique:hover
{
	text-decoration: underline;
}

/* Chapô (extrait) en intro de l'article */
.article-chapo
{
	font-size: 1.4rem;
	margin:4rem 0;
}

.cat-side
{
	flex: 0 0 var(--aside-width);
	width: var(--aside-width);
	padding-top:1rem;
}

.classement-side h2,
.calendrier-side h2
{
	font-size: 1.5rem;
	font-weight: 600;
	margin-top: 0;
}

/* Espacement entre les blocs de l'aside (classement, calendrier…) */
.cat-side > section + section
{
	margin-top: 4rem;
}

/* Calendrier dans l'aside */
.calendrier-side .grid
{
	display: flex;
	flex-direction: column;
}

.calendrier-side article
{
	border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.calendrier-side article:last-child
{
	border-bottom: 0;
}

.calendrier-side a
{
	display: block;
	padding: 0.5rem 0;
	color: var(--color-black);
}

.calendrier-side h3
{
	margin: 0;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.25;
}

.calendrier-side .dates
{
	display: block;
	margin-bottom: 0.15rem;
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-transform: uppercase;
	color: var(--color-red);
}

section#bandeau .circuit
{
	display: block;
	width: 100%;
	max-width: 200px;
	height: auto;
	color: var(--color-red);
}

section#bandeau .circuit path
{
	fill: none;
	stroke: currentColor;
	stroke-width: 25px;
	stroke-linecap: round;
	stroke-linejoin: round;
}

/* Logo du championnat dans le bandeau (WEC / IMSA), voir fiawec_competition_logo(). */
section#bandeau .bandeau-champ-logo
{
	line-height: 0;                    /* supprime l'espace sous le SVG inline */
	margin-bottom: var(--space-sm);    /* léger espace au-dessus du nom de course */
}

section#bandeau .bandeau-champ-logo svg
{
	display: inline-block;
	width: auto;
	height: clamp(1.75rem, 5vw, 2.5rem);
	max-width: 100%;
}

/* Le logo WEC fourni est monochrome noir : forcé en blanc pour rester lisible
   sur le fond sombre du bandeau. L'IMSA (blanc + rouge) garde ses couleurs. */
section#bandeau .bandeau-champ-logo svg.wec path,
section#bandeau .bandeau-champ-logo svg.wec rect
{
	fill: var(--color-white) !important;
	fill-opacity: 1 !important;
}

@keyframes trace { to { stroke-dashoffset: 0; } }

@keyframes bandeau-slide
{
	0%   { background-position: 0% 0; }
	100% { background-position: 200% 0; }
}

body.single h1,
body.page h1
{
	font-size:3rem;
	font-weight:600;
}

body.single .postmetadata
{
	border-bottom:1px solid var(--color-black);
	border-top:1px solid var(--color-black);
	padding:.25rem;
	margin:1rem 0;
	text-align:center;
}

body.single footer.author-box
{
	display:none;
}

body.single p,
body.page p
{
	text-align:left;
	/*-webkit-hyphens: auto;
	hyphens: auto;*/
}

body.home section#bandeau
{
	text-align: left;
	color: var(--color-white);
	background: linear-gradient(-90deg, var(--color-red) 0%, var(--color-black) 50%, var(--color-red) 100%);
	background-size: 200% 100%;
	animation: bandeau-slide 8s linear infinite;

	.texte
	{
		text-align:center;
		width: calc(100% - 200px);

		span
		{
			color: var(--color-red);
			text-transform: uppercase;
		}

		h1, h2
		{
			margin: 0;
			font-size: 1.875rem;
			font-weight: 700;
		}

		p.dates
		{
			font-size: 1.25rem;
			font-weight: 500;
			margin: 0;
			text-align:center;
		}
	}

	p.countdown
	{
		display: flex;
		gap: 0.625rem;
		margin:0;

		> span
		{
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 5rem;
			padding: 0.625rem;
			border-radius: 4px;
			font-family: var(--font-heading);
			font-size: 2.5rem;
			line-height: 1;
			text-align: center;
			text-transform: none;
			color: var(--color-white);
			background-color: var(--color-dark);

			&::after
			{
				content: attr(data-label); /* libellé traduit, fourni par le PHP */
				margin-top: 0.25rem;
				font-size: 0.625rem;
				font-weight: 400;
				text-transform: uppercase;
				opacity: 0.7;
			}
		}
	}
}

/* Bandeau d'inscription à la newsletter (pied de page, toutes les pages) */
section#newsletter
{
	text-align: left;
	color: var(--color-white);
	background-color: var(--color-red);

	.texte
	{
		h2
		{
			margin: 0;
			font-size: 1.875rem;
			font-weight: 700;
		}

		p
		{
			margin: 0.25rem 0 0;
			font-size: 1.25rem;
			font-weight: 500;
		}
	}

	.inscription
	{
		min-width: 22rem;

		/* Champ e-mail et bouton sur une même ligne */
		.mailpoet_form
		{
			display: flex;
			flex-wrap: wrap;
			align-items: stretch;
			gap: var(--space-sm);
			margin: 0;
		}

		.mailpoet_paragraph { margin: 0; }

		/* Le champ e-mail occupe l'espace restant, le bouton garde sa taille */
		.mailpoet_paragraph:has(.mailpoet_text),
		.mailpoet_paragraph:has(.mailpoet_email) { flex: 1 1 12rem; }
		.mailpoet_paragraph:has(.mailpoet_submit) { flex: 0 0 auto; }

		/* Messages de validation : sur toute la largeur, sous la ligne */
		.mailpoet_message,
		.mailpoet_validate_success,
		.mailpoet_validate_error { flex-basis: 100%; }

		/* !important nécessaire : MailPoet impose ses propres styles (souvent inline,
		   définis dans l'éditeur de formulaire) qui priment sinon — cf. bloc WPForms. */
		.mailpoet_text,
		.mailpoet_email
		{
			width: 100% !important;
			padding: 0.85rem 0.75rem !important;
			border: 0 !important;
			border-radius: 0 !important;
			font-size: 1rem !important;
		}

		/* Bouton calqué sur .readmore : noir, blanc, gras, sans arrondi */
		.mailpoet_submit
		{
			height: 100%;
			padding: 0.85rem 1.75rem !important;
			border: 0 !important;
			border-radius: 0 !important;
			font-family: var(--font-heading) !important;
			font-size: 1rem !important;
			font-weight: 600 !important;
			line-height: 1.2 !important;
			color: var(--color-white) !important;
			background-color: var(--color-black) !important;
			cursor: pointer;
			transition: color 200ms ease, background-color 200ms ease;
		}

		/* Le survol rouge de .readmore se confondrait avec le fond du bandeau : on inverse */
		.mailpoet_submit:hover
		{
			color: var(--color-red) !important;
			background-color: var(--color-white) !important;
		}

		.mailpoet_validate_success,
		.mailpoet_validate_error { color: var(--color-white); }
	}
}

/* ─── Composants ─── */

.load-more-btn
{
	display: block;
	margin: 2rem auto;
	padding: 1rem 2rem;
	border: 1px solid transparent;
	border-top-color: var(--color-black);
	border-bottom-color: var(--color-black);
	font-size: 1.1rem;
	color: var(--color-black);
	background: none;
	cursor: pointer;
	transition: color 250ms linear, border-color 250ms linear;
}

.load-more-btn:hover
{
	color: var(--color-red);
	border-color: var(--color-red);
}

/* ═══════════════════════════════════════════════════════════════════
 *  MEDIA QUERIES (regroupées)
 *  Breakpoints : sm ≥ 480px | md ≥ 768px | lg ≥ 1024px
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── Mobile-first (min-width) ─── */

@media (min-width: 480px)
{
	body.home #articles .grid    { grid-template-columns: repeat(2, 1fr); }
	.cat-main .grid              { grid-template-columns: repeat(2, 1fr); }
	#cejourla .cejourla-carousel { grid-auto-columns: calc((100% - var(--space-md)) / 2); }
}

@media (min-width: 768px)
{
	section#latestvids .vids-featured { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px)
{
	body.home #articles .grid    { grid-template-columns: repeat(3, 1fr); }
	.cat-main .grid              { grid-template-columns: repeat(3, 1fr); }
	#cejourla .cejourla-carousel { grid-auto-columns: calc((100% - (var(--space-md) * 3)) / 4); }
	section#latestposts #wrap    { grid-template-columns: 5fr 2fr; align-items: start; }
}

/* ─── Desktop-first (max-width) ─── */

/* En-tête mobile : on passe en mode hamburger (Max Mega Menu bascule à 768px).
   Le wordmark .logo3 (≈409px de large) débordait le viewport sur toutes les pages. */
@media (max-width: 768px)
{
	body > header > #wrap
	{
		align-items: center;
		justify-content: space-between;
		gap: var(--space-md);
		padding: 1rem 0;
	}

	body > header .logo-s { width: 11rem; }   /* swoosh réduit pour laisser la place au menu */
	body > header .logo3 { display: none; }  /* wordmark masqué : c'est lui qui débordait */

	body > header nav
	{
		width: auto;
		flex: 0 0 auto;
		justify-content: flex-end;
	}
}

@media (max-width: 900px)
{
	.cat-layout { flex-direction: column; }
	.cat-side   { flex-basis: auto; width: 100%; }
}

/* Sous le breakpoint md (768px) — 767.98 pour ne pas chevaucher min-width: 768px */
@media (max-width: 767.98px)
{
	svg.logo-s
	{
		display:none !important;
	}
	.logo-ier
	{
		display:block !important;
	}
	body.post-type-archive-evenement
	{
		#wrap > .flex { flex-direction: column; gap: var(--space-2xl); }
		section.championnat { flex-basis: 100%; }
	}

	section#latestvids .vids-col-playlist { display: none; }

	/* Pied de page : colonnes empilées, identité en pleine largeur
	   (.identity avait une largeur fixe de 27rem qui débordait). */
	body > footer > #wrap { padding: 3rem 0; }

	body > footer .flex
	{
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-xl);
	}

	body > footer .identity { width: 100%; }

	/* Réseaux sociaux : groupe centré, espacement régulier (au lieu de space-between étiré) */
	body > footer .reseauxsociaux
	{
		min-width: 0;
		width: 100%;
		justify-content: center;
		gap: var(--space-xl);
	}

	/* Espace entre les réseaux sociaux et la ligne « Tous droits réservés » */
	body > footer .copyright { margin-top: var(--space-xl); }

	/* Bandeau « prochaine course » : texte au-dessus, compteur centré en dessous.
	   Le compteur (4 × 5rem) débordait l'écran ; on réduit les cases. */
	body.home section#bandeau .flex
	{
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-md);
	}

	body.home section#bandeau .texte { width: 100%; }

	body.home section#bandeau p.countdown
	{
		justify-content: center;
		gap: 0.4rem;
	}

	body.home section#bandeau p.countdown > span
	{
		width: 4rem;
		padding: 0.5rem;
		font-size: 1.75rem;
	}

	/* Newsletter : texte au-dessus, formulaire pleine largeur en dessous */
	section#newsletter .flex
	{
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-md);
		text-align: center;
	}

	section#newsletter .texte,
	section#newsletter .inscription { width: 100%; }

	/* Liste des dernières vidéos : vignette + colonnes resserrées pour tenir dans le viewport */
	section#latestvids .vids-thumb img { width: 92px; }
	section#latestvids .vids-list tbody td { padding: 0.6rem 0.4rem; }
	section#latestvids .vids-list thead th { padding: 0.4rem 0.4rem 0.75rem; }
	section#latestvids .vids-name { overflow-wrap: anywhere; }
}

@media (max-width: 600px)
{
	#reels .reel-slide { width: 150px; }

	/* Article vedette de l'accueil : image au-dessus, texte dessous.
	   En 50/50 la colonne texte était trop étroite et cassait le titre mot à mot. */
	body.home #articles article.latest > a { flex-direction: column; }

	body.home #articles article.latest img,
	body.home #articles article.latest .texte { width: 100%; }

	body.home #articles article.latest h2 { font-size: 2rem; }

	/* Titres adoucis sur petits écrans */
	body.single h1,
	body.page h1 { font-size: 2.125rem; }
	.category-title { font-size: 2rem; }
	.cat-main article.latest h2 { font-size: 1.6rem; }
	.article-chapo { margin: 2rem 0; font-size: 1.25rem; }

	/* #latestposts : carte empilée (photo au-dessus, titre dessous) */
	section#latestposts article a
	{
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-sm);
	}

	section#latestposts article img
	{
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 2;
	}
}

/* ─── Mouvement réduit (prefers-reduced-motion) ─── */

@media (prefers-reduced-motion: no-preference)
{
	html { scroll-behavior: smooth; }

	section#bandeau .circuit.draw path
	{
		stroke-dasharray: var(--len);
		stroke-dashoffset: var(--len);
		animation: trace 3s ease forwards;
	}
}

@media (prefers-reduced-motion: reduce)
{
	body.home section#bandeau,
	.gradient { animation: none; }

	.load-more-btn { transition: none; }

	.ink { opacity: 1; animation: none; }
	.shine { display: none; }
}