/*
 * Cadence Running United — feuille de style globale.
 *
 * Sommaire
 * 01. Polices
 * 02. Tokens
 * 03. Reset
 * 04. Base typographique
 * 05. Layout
 * 06. Utilitaires
 * 07. Animations d'apparition
 * 08. Boutons
 * 09. Logo
 * 10. Header et navigation
 * 11. Footer
 * 12. Cartes, recherche, état vide
 *
 * Convention de nommage : l- (layout), c- (composant), s- (section),
 * u- (utilitaire), is-/has- (état).
 */

/* ==========================================================================
   01. Polices — auto-hébergées (aucune requête vers Google)
   ========================================================================== */

/*
 * Inter en fonte variable : une seule requête couvre toutes les graisses.
 * Les .woff2 sont servis en priorité, le .ttf reste en repli.
 */
@font-face {
	font-family: "Inter";
	src: url("../fonts/Inter-Variable.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-Regular.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "IBM Plex Mono";
	src: url("../fonts/IBMPlexMono-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

/* ==========================================================================
   02. Tokens
   ========================================================================== */

:root {
	/* --- Couleurs de la charte ------------------------------------------- */
	--color-white: #ffffff;
	--color-violet: #7b3dff;
	--color-violet-deep: #2e136a;
	--color-magenta: #e134ee;
	--color-orange: #ff6922;
	--color-black: #101010;
	--color-black-warm: #1a1212;
	--color-grey: #d3d3d3;
	--color-off-white: #f7f7f7;

	--color-overlay: rgba(0, 0, 0, 0.8);
	--color-glass: rgba(255, 255, 255, 0.1);
	--color-violet-transparent: rgba(123, 61, 255, 0);

	/* Rôles */
	/* Couleur du corps de texte sur fond clair. */
	--color-text: var(--color-black-warm);
	--color-text-muted: #56565b;
	/* Fond général des pages (le hero et le footer posent le leur). */
	--color-bg: var(--color-off-white);
	--color-accent: var(--color-violet);
	--color-accent-hover: #6a2df0;

	/* --- Typographie ------------------------------------------------------ */
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", "Courier New", monospace;

	--fs-100: 0.75rem;    /* 12px — surtitres mono */
	--fs-200: 0.875rem;   /* 14px */
	--fs-300: 1rem;       /* 16px — texte courant et menu */
	--fs-400: 1.125rem;   /* 18px */
	--fs-500: 1.375rem;   /* 22px */
	--fs-600: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
	--fs-700: clamp(1.875rem, 1.3rem + 2.5vw, 3rem);
	--fs-800: clamp(2.25rem, 1.35rem + 3.9vw, 4.5rem);

	--lh-tight: 1.08;
	--lh-heading: 1.15;
	--lh-base: 1.55;

	--ls-mono: 0.08em;

	/* --- Espacements (échelle de 4 px) ------------------------------------ */
	--space-2xs: 0.25rem;
	--space-xs: 0.5rem;
	--space-sm: 0.75rem;
	--space-md: 1rem;
	--space-lg: 1.5rem;
	--space-xl: 2rem;
	--space-2xl: 3rem;
	--space-3xl: 4.5rem;
	--space-4xl: 6rem;
	--space-5xl: 9rem;

	/* --- Layout ----------------------------------------------------------- */
	--container-max: 1600px;
	--container-gutter: clamp(1.25rem, 4vw, 3.75rem);

	/* --- Header (mesures de la maquette) ---------------------------------- */
	--header-height: 112px;
	--header-offset: 40px;
	--header-padding-inline: 60px;
	--header-padding-block: 26px;
	--header-logo-height: 60px;

	/* --- Rayons et ombres -------------------------------------------------- */
	--radius-sm: 8px;
	--radius-md: 16px;
	--radius-lg: 24px;
	--radius-pill: 999px;
	--shadow-header: 0 10px 40px rgba(16, 16, 16, 0.08);
	--shadow-soft: 0 8px 30px rgba(16, 16, 16, 0.08);

	/* --- Transitions ------------------------------------------------------- */
	--ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
	--duration-fast: 180ms;
	--duration-base: 320ms;
	--duration-slow: 700ms;
}

/* ==========================================================================
   03. Reset
   ========================================================================== */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
	/* Le header est fixe : les ancres ne doivent pas passer dessous. */
	scroll-padding-top: calc(var(--header-height) + var(--header-offset) + 1rem);
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd {
	margin: 0;
}

/*
 * Listes stylées : on retire les valeurs par défaut du navigateur.
 * Le tout est enveloppé dans :where() pour annuler la spécificité du reset —
 * sans quoi ul[class] (0,1,1) l'emporterait sur une simple classe (0,1,0) et
 * écraserait silencieusement les marges définies par les composants.
 */
:where(ul[class], ol[class]) {
	margin: 0;
	padding: 0;
	list-style: none;
}

img,
picture,
video,
svg {
	display: block;
	max-width: 100%;
	height: auto;
}

input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

button {
	background: none;
	border: 0;
	cursor: pointer;
}

/* ==========================================================================
   04. Base typographique
   ========================================================================== */

body {
	background-color: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: var(--fs-300);
	line-height: var(--lh-base);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--font-heading);
	line-height: var(--lh-heading);
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* Surtitre en IBM Plex Mono, présent sur toutes les sections de la maquette. */
.c-eyebrow {
	margin: 0;
	font-family: var(--font-mono);
	font-size: 1.125rem;   /* 18 px */
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--color-violet);
}

/* Accessibilité : anneau de focus toujours visible au clavier. */
:focus-visible {
	outline: 2px solid var(--color-violet);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ==========================================================================
   05. Layout
   ========================================================================== */

.l-container {
	width: min(var(--container-max), 100% - var(--container-gutter) * 2);
	margin-inline: auto;
}

.l-main {
	display: block;
}

/* Le header en superposition sur l'accueil doit avoir un parent positionné. */
body {
	position: relative;
}

/* Contenu riche issu de l'éditeur (articles, pages légales). */
.s-prose > * + * {
	margin-top: var(--space-md);
}

.s-prose h2 {
	margin-top: var(--space-2xl);
	font-size: var(--fs-600);
}

.s-prose h3 {
	margin-top: var(--space-xl);
	font-size: var(--fs-500);
}

.s-prose ul,
.s-prose ol {
	padding-left: 1.25rem;
}

.s-prose img {
	border-radius: var(--radius-md);
}

/* Citations du communiqué : filet violet et attribution en mono. */
.s-prose blockquote {
	margin-block: var(--space-2xl);
	padding-left: var(--space-lg);
	border-left: 2px solid var(--color-violet);
	font-size: var(--fs-400);
}

.s-prose blockquote p {
	margin: 0;
	font-style: italic;
}

.s-prose blockquote cite {
	display: block;
	margin-top: var(--space-md);
	color: var(--color-text-muted);
	font-family: var(--font-mono);
	font-size: var(--fs-200);
	font-style: normal;
	line-height: 1.5;
}

/* ==========================================================================
   06. Utilitaires
   ========================================================================== */

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

.c-skip-link {
	position: absolute;
	top: -100px;
	left: var(--space-md);
	z-index: 999;
	padding: var(--space-sm) var(--space-md);
	background-color: var(--color-black);
	color: var(--color-white);
	border-radius: var(--radius-sm);
	text-decoration: none;
	transition: top var(--duration-fast) var(--ease-out);
}

.c-skip-link:focus {
	top: var(--space-md);
}

/* ==========================================================================
   07. Animations d'apparition
   ========================================================================== */

/*
 * data-reveal se pose dans le HTML ; is-revealed est ajoutée par
 * assets/js/reveal.js à l'entrée dans le viewport. L'état masqué dépend de
 * la classe .js sur <html> : sans JavaScript, le contenu reste visible.
 */
.js [data-reveal] {
	opacity: 0;
	transform: translateY(24px);
	transition:
		opacity var(--duration-slow) var(--ease-out),
		transform var(--duration-slow) var(--ease-out);
	transition-delay: var(--reveal-delay, 0ms);
	will-change: opacity, transform;
}

.js [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
	will-change: auto;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.js [data-reveal] {
		opacity: 1;
		transform: none;
		transition: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}

/* ==========================================================================
   08. Boutons
   ========================================================================== */

/* Mesures relevées sur la maquette : hauteur 50 px, retraits latéraux 46 px. */
.c-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	min-height: 50px;
	padding: 0.5rem 46px;
	border-radius: var(--radius-pill);
	background-color: var(--color-black);
	color: var(--color-white);
	font-size: var(--fs-300);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	white-space: nowrap;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.c-button:hover {
	transform: translateY(-1px);
}

.c-button__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--ease-out);
}

.c-button:hover .c-button__icon {
	transform: translateX(3px);
}

.c-button--primary {
	background-color: var(--color-violet);
	color: var(--color-white);
}

.c-button--primary:hover {
	background-color: var(--color-accent-hover);
}

.c-button--white {
	background-color: var(--color-white);
	color: var(--color-violet);
}

/* Bouton secondaire : contour clair sur les fonds sombres. */
.c-button--ghost {
	background-color: transparent;
	color: var(--color-white);
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6);
}

.c-button--ghost:hover {
	background-color: rgba(255, 255, 255, 0.12);
}

/*
 * Lien fléché souligné, utilisé dans les sections de contenu.
 * Mesures de la maquette : libellé et flèche séparés de 24 px, filet à 10 px
 * sous la ligne de base.
 */
.c-link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 24px;
	padding-bottom: 10px;
	border-bottom: 1px solid currentColor;
	color: var(--color-violet);
	font-size: var(--fs-300);
	text-decoration: none;
	transition: color var(--duration-fast) var(--ease-out);
}

.c-link-arrow__icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--ease-out);
}

.c-link-arrow:hover {
	color: var(--color-accent-hover);
}

.c-link-arrow:hover .c-link-arrow__icon {
	transform: translate(3px, -3px);
}

/* ==========================================================================
   09. Logo
   ========================================================================== */

.c-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	color: currentColor;
	text-decoration: none;
}

.c-logo__svg--stacked {
	width: auto;
	height: var(--header-logo-height);
}

.c-logo__svg--line {
	width: 100%;
	height: auto;
}

.c-logo__text {
	font-size: var(--fs-400);
	font-weight: 800;
	letter-spacing: -0.02em;
	text-transform: uppercase;
}

/* ==========================================================================
   10. Header et navigation
   ========================================================================== */

/*
 * Header posé en haut de page : il défile avec le contenu (ni fixe ni sticky).
 * Sur la page d'accueil il se superpose au hero, ailleurs il reste dans le flux.
 * Deux variantes issues de la maquette : « glass » sur l'accueil, « light »
 * sur le reste du site.
 */
.c-header {
	position: absolute;
	top: var(--header-offset);
	left: 0;
	right: 0;
	z-index: 10;
	padding-inline: var(--container-gutter);
	pointer-events: none;
}

/* Hors page d'accueil, aucun visuel derrière : le header reprend sa place. */
body:not(.home) .c-header {
	position: relative;
	top: 0;
	margin-top: var(--header-offset);
}

.c-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-xl);
	width: min(var(--container-max), 100%);
	height: var(--header-height);
	margin-inline: auto;
	padding: var(--header-padding-block) var(--header-padding-inline);
	border-radius: var(--radius-pill);
	pointer-events: auto;
}

/* Variante « verre » : remplissage blanc à 10 % et flou d'arrière-plan. */
.c-header--glass .c-header__inner {
	background-color: var(--color-glass);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
	color: var(--color-white);
}

/* Repli pour les navigateurs sans backdrop-filter : fond assombri lisible. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.c-header--glass .c-header__inner {
		background-color: rgba(16, 16, 16, 0.55);
	}
}

/* Variante claire : pastille blanche posée sur les fonds clairs. */
.c-header--light .c-header__inner {
	background-color: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(22px) saturate(150%);
	-webkit-backdrop-filter: blur(22px) saturate(150%);
	box-shadow: var(--shadow-header);
	color: var(--color-black);
}

.c-nav {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
}

.c-nav__list {
	display: flex;
	align-items: center;
	gap: var(--space-2xl);
}

.c-nav__list a {
	display: inline-block;
	font-size: var(--fs-300);
	font-weight: 400;
	text-decoration: none;
	transition: opacity var(--duration-fast) var(--ease-out);
}

.c-nav__list a:hover {
	opacity: 0.7;
}

.c-nav__list .current-menu-item > a {
	font-weight: 600;
}

/* Le bouton de l'en-tête est légèrement plus bas que les autres (maquette). */
.c-header__cta {
	min-height: 48px;
	margin-left: var(--space-xs);
}

/* Bouton burger, masqué au-dessus du point de rupture. */
.c-burger {
	display: none;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	color: inherit;
}

.c-burger__bars,
.c-burger__bars::before,
.c-burger__bars::after {
	display: block;
	width: 24px;
	height: 2px;
	background-color: currentColor;
	transition: transform var(--duration-fast) var(--ease-out),
		opacity var(--duration-fast) var(--ease-out);
}

.c-burger__bars::before,
.c-burger__bars::after {
	content: "";
	position: relative;
}

.c-burger__bars::before {
	top: -7px;
}

.c-burger__bars::after {
	top: 5px;
}

.c-burger[aria-expanded="true"] .c-burger__bars {
	background-color: transparent;
}

.c-burger[aria-expanded="true"] .c-burger__bars::before {
	transform: translateY(7px) rotate(45deg);
}

.c-burger[aria-expanded="true"] .c-burger__bars::after {
	transform: translateY(-5px) rotate(-45deg);
}

@media (max-width: 1199px) {
	:root {
		--header-padding-inline: 1.5rem;
		--header-padding-block: 1rem;
		--header-height: 76px;
		--header-offset: 16px;
		--header-logo-height: 44px;
	}

	.c-burger {
		display: flex;
	}

	.c-header__inner {
		flex-wrap: wrap;
		border-radius: var(--radius-lg);
	}

	.c-nav {
		display: none;
		flex-basis: 100%;
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-lg);
		padding-block: var(--space-lg) var(--space-sm);
	}

	.c-nav.is-open {
		display: flex;
	}

	.c-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: var(--space-md);
	}

	.c-header__cta {
		margin-left: 0;
	}

	body.has-nav-open {
		overflow: hidden;
	}
}

/* ==========================================================================
   11. Footer
   ========================================================================== */

/*
 * Quatre colonnes de 634 / 322 / 322 / 322 px sur le conteneur de 1600,
 * mesurées sur la maquette puis exprimées en proportions.
 */
.c-footer {
	position: relative;
	min-height: 561.96px;
	overflow: hidden;
	background-color: var(--color-violet);
	color: var(--color-white);
}

/* --- Halo coloré ---------------------------------------------------------- */

/*
 * Halo repris de l'export SVG de la maquette. Les ellipses y sont posées par
 * une matrice dont les deux vecteurs de base font un angle de 57,8° et non 90° :
 * la forme est cisaillée, pas seulement pivotée. Aucune combinaison de largeur,
 * hauteur et rotate() ne peut la reproduire — d'où la matrice, reprise telle
 * quelle du fichier.
 *
 * Le repère est celui du SVG (1920 × 470), calé à 140 px du haut du footer.
 * Toutes les longueurs sont exprimées en proportion de cette largeur de
 * référence, afin que le halo suive l'échelle de la page.
 */
.c-footer__gradient {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
}

.c-footer__blobs {
	position: absolute;
	left: 0;
	top: calc(140 / 1920 * 100vw);
	width: 100%;
	height: calc(470 / 1920 * 100vw);
	/* stdDeviation="139.5" dans le SVG, soit le flou de calque 279 de Figma. */
	filter: blur(calc(139.5 / 1920 * 100vw));
}

.c-footer__blob {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	border-radius: 50%;
	background-color: var(--blob-color);
	width: calc(var(--blob-w) / 1920 * 100vw);
	height: calc(var(--blob-h) / 1920 * 100vw);
	transform-origin: 0 0;
	/*
	 * La translation est séparée de la matrice : matrix() n'accepte que des
	 * nombres pour ses deux derniers termes, jamais d'unités relatives.
	 */
	transform:
		translate(calc(var(--blob-x) / 1920 * 100vw), calc(var(--blob-y) / 1920 * 100vw))
		matrix(0.609634, -0.792683, 0.995671, 0.0929503, 0, 0);
}

/* Ordre du DOM = de l'arrière-plan vers le premier plan. */
.c-footer__blob--1 { --blob-color: #ffffff; --blob-x: -52;      --blob-y: 594.678; --blob-w: 329.276; --blob-h: 752.42; }
.c-footer__blob--2 { --blob-color: #ff6922; --blob-x: 212.557;  --blob-y: 619.376; --blob-w: 531.404; --blob-h: 1214.3; }
.c-footer__blob--3 { --blob-color: #7b3dff; --blob-x: 936.994;  --blob-y: 687.005; --blob-w: 531.404; --blob-h: 1214.3; }

/* --- Contenu -------------------------------------------------------------- */

.c-footer__content {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	min-height: inherit;
	padding-top: 64px;
}

.c-footer__inner {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: var(--space-xl) 0;
}

.c-footer__col {
	flex: 1 1 20%;
	min-width: 0;
}

.c-footer__col--brand {
	flex: 0 0 39.625%;   /* 634 / 1600 */
	padding-right: var(--space-xl);
}

.c-footer__baseline {
	max-width: 30ch;
	margin: 0;
	font-size: 1.125rem;
	line-height: 1.6;
}

.c-footer__action {
	margin: 20px 0 0;
}

/* Titres de colonnes, en IBM Plex Mono comme les surtitres de sections. */
.c-footer__title {
	margin: 0 0 28px;
	font-family: var(--font-mono);
	font-size: 1.125rem;
	font-weight: 400;
	line-height: 1.3;
	text-transform: uppercase;
}

.c-footer__title:not(:first-child) {
	margin-top: 36px;
}

.c-footer__list {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Colonnes 2 à 4 en Light ; seule la première colonne reste en Regular. */
.c-footer__list a,
.c-footer__email a,
.c-footer__event {
	font-weight: 300;
}

.c-footer__list a,
.c-footer__email a {
	font-size: 1.125rem;
	line-height: 1.6;
	text-decoration: none;
}

.c-footer__email {
	margin: 0;
	font-size: 1.125rem;
}

/* Lien LinkedIn et liens d'événements : soulignés, avec flèche sortante. */
.c-footer__social {
	display: inline-flex;
	align-items: center;
	gap: var(--space-sm);
	margin-top: 28px;
	padding-bottom: 10px;
	border-bottom: 1px solid currentColor;
	text-decoration: none;
}

.c-footer__social-icon {
	width: 30px;
	height: 30px;
	flex-shrink: 0;
}

.c-footer__social-label {
	padding-right: var(--space-lg);
}

.c-footer__social-arrow,
.c-footer__event-arrow {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	transition: transform var(--duration-fast) var(--ease-out);
}

.c-footer__social:hover .c-footer__social-arrow,
.c-footer__event:hover .c-footer__event-arrow {
	transform: translate(3px, -3px);
}

.c-footer__events {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 22px;
}

.c-footer__event {
	display: inline-flex;
	align-items: center;
	gap: var(--space-lg);
	padding-bottom: 10px;
	border-bottom: 1px solid currentColor;
	font-size: 1.125rem;
	text-decoration: none;
}

/* --- Bas de page ---------------------------------------------------------- */

.c-footer__bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-md);
	margin-top: 56px;
	padding-top: 28px;
	border-top: 1px solid rgba(255, 255, 255, 0.4);
	font-size: 1rem;
}

.c-footer__legal-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-lg);
}

.c-footer__legal-list a {
	font-size: 0.875rem;   /* 14 px */
	font-weight: 300;
	text-decoration: none;
}

.c-footer__copyright {
	margin: 0;
}

/*
 * Les liens héritent déjà du blanc via le reset : redéclarer la couleur ici
 * écrasait celle du bouton blanc, dont le libellé doit rester violet.
 * Le soulignement au survol ne vise donc que les liens de texte.
 */
.c-footer__list a:hover,
.c-footer__email a:hover {
	text-decoration: underline;
}

/* Les mentions légales restent sans soulignement, y compris au survol. */
.c-footer__legal-list a:hover {
	opacity: 0.75;
}

/* Logotype pleine largeur, calé en bas de page. */
.c-footer__wordmark {
	margin-top: auto;
	padding-top: 48px;
	line-height: 0;
}

.c-footer__wordmark .c-logo__svg--line {
	width: 100%;
	height: auto;
}

/* --- Adaptations ---------------------------------------------------------- */

@media (max-width: 1023px) {
	.c-footer__col,
	.c-footer__col--brand {
		flex: 1 1 100%;
		padding-right: 0;
	}

	.c-footer__inner {
		gap: var(--space-2xl) 0;
	}
}


/* ==========================================================================
   12. Cartes, recherche, état vide
   ========================================================================== */

.c-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-md);
	height: 100%;
}

.c-card__media {
	overflow: hidden;
	border-radius: var(--radius-md);
}

.c-card__image {
	width: 100%;
	transition: transform var(--duration-base) var(--ease-out);
}

.c-card:hover .c-card__image {
	transform: scale(1.03);
}

.c-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-xs);
}

.c-card__category {
	font-family: var(--font-mono);
	font-size: var(--fs-100);
	letter-spacing: var(--ls-mono);
	text-transform: uppercase;
	color: var(--color-violet);
}

.c-card__title {
	font-size: var(--fs-500);
}

.c-card__link {
	text-decoration: none;
}

.c-card__excerpt,
.c-card__meta {
	color: var(--color-text-muted);
}

.c-card__meta {
	font-size: var(--fs-200);
}

.c-search {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-sm);
	margin-top: var(--space-lg);
}

.c-search__input {
	flex: 1 1 240px;
	padding: 0.9375rem 1.5rem;
	border: 1px solid var(--color-grey);
	border-radius: var(--radius-pill);
	background-color: var(--color-white);
}

.c-empty {
	padding-block: var(--space-3xl);
	color: var(--color-text-muted);
	text-align: center;
}


/* ==========================================================================
   13. Carte d'article
   ==========================================================================
   Utilisée sur la page d'accueil comme sur la page des actualités : elle est
   donc définie ici plutôt que dans la feuille d'une seule page.
   ========================================================================== */

/*
 * L'atténuation est pilotée par assets/js/card-stack.js, qui écrit opacity et
 * transform. Le point de transformation est placé en haut : la carte semble
 * s'enfoncer sous la suivante plutôt que de rétrécir vers son centre.
 */
.s-news__card {
	transform-origin: top center;
	will-change: opacity, transform;
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	min-height: 530px;
}

.s-news__media,
.s-news__content {
	flex: 1 1 calc(50% - 10px);
	min-width: 0;
	border-radius: 10px;
}

/* Colonne image : la date et la catégorie reposent sur le visuel. */
.s-news__media {
	position: relative;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	background-color: var(--color-grey);
}

.s-news__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.s-news__meta {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: 48px;
	color: var(--color-white);
	/* Voile discret : la date reste lisible quelle que soit la photographie. */
	background: linear-gradient(to top, rgba(16, 16, 16, 0.45), transparent);
}

.s-news__date {
	font-size: 0.75rem;
	letter-spacing: 0.02em;
}

.s-news__tag {
	padding: 5px 12px;
	border-radius: var(--radius-pill);
	background-color: var(--color-violet);
	font-size: 0.6875rem;   /* 11 px */
	font-weight: 600;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Colonne texte : dégradé vertical relevé sur la maquette. */
.s-news__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	padding: 48px;
	background-image: linear-gradient(180deg, #f2ebff 0%, #f4f2f7 100%);
}

.s-news__article-title {
	margin: 0;
	font-size: 1.625rem;    /* 26 px */
	font-weight: 500;
	line-height: 1.2;
}

.s-news__link {
	text-decoration: none;
}

.s-news__link:hover {
	color: var(--color-violet);
}

.s-news__excerpt {
	margin: 12px 0 0;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.875;     /* 30 px */
}

/* Le bouton se cale en bas à droite, quelle que soit la longueur de l'extrait. */
.s-news__action {
	margin: auto 0 0;
	align-self: flex-end;
}



/* ==========================================================================
   14. Halo de marque
   ==========================================================================
   Douze cercles floutés, communs à la section d'appel à l'action de l'accueil
   et aux bandeaux de fin des pages intérieures.
   ========================================================================== */

/*
 * Douze cercles floutés d'un seul bloc, dans le repère de la maquette
 * (1920 × 781). Les six derniers reprennent le même motif que les six
 * premiers, positionné différemment.
 *
 * La rotation indiquée dans la maquette n'est pas reprise : ces formes sont
 * des cercles parfaits, qu'une rotation laisse strictement identiques.
 */
.c-brand-glow {
	--glow-height: 781;
	/*
	 * Flou de calque Figma, divisé par deux ci-dessous : Figma exprime le
	 * double de l'écart-type attendu par blur().
	 *
	 * --glow-height est la hauteur de référence du repère ; un contexte plus
	 * court peut la redéfinir pour resserrer le halo.
	 */
	--glow-blur: 279;

	z-index: 1;
	position: relative;
	overflow: hidden;
}

.c-brand-glow__layer {
	position: absolute;
	inset: 0;
	filter: blur(calc(100vw * var(--glow-blur) / 2 / 1920));
}

.c-brand-glow__blob {
	position: absolute;
	display: block;
	aspect-ratio: 1;
	border-radius: 50%;
	background-color: var(--blob-color);
	left: calc(var(--blob-x) / 1920 * 100%);
	top: calc(var(--blob-y) / var(--glow-height) * 100%);
	width: calc(var(--blob-size) / 1920 * 100%);
}

.c-brand-glow__blob--1 {
	--blob-color: #ff6922;
	--blob-x: 1493;
	--blob-y: 368;
	--blob-size: 485;
}

.c-brand-glow__blob--2 {
	--blob-color: #e134ee;
	--blob-x: 1543;
	--blob-y: 368;
	--blob-size: 435;
}

.c-brand-glow__blob--3 {
	--blob-color: #ff6922;
	--blob-x: 954;
	--blob-y: 586;
	--blob-size: 702;
}

.c-brand-glow__blob--4 {
	--blob-color: #7b3dff;
	--blob-x: 1305;
	--blob-y: 773;
	--blob-size: 702;
}

.c-brand-glow__blob--5 {
	--blob-color: #2e136a;
	--blob-x: 309;
	--blob-y: 650;
	--blob-size: 1195;
}

.c-brand-glow__blob--6 {
	--blob-color: #ffffff;
	--blob-x: 1417;
	--blob-y: 466;
	--blob-size: 435;
}

.c-brand-glow__blob--7 {
	--blob-color: #ff6922;
	--blob-x: -624.06;
	--blob-y: 265.99;
	--blob-size: 485;
}

.c-brand-glow__blob--8 {
	--blob-color: #e134ee;
	--blob-x: -624.06;
	--blob-y: 300.37;
	--blob-size: 435;
}

.c-brand-glow__blob--9 {
	--blob-color: #ff6922;
	--blob-x: -244.37;
	--blob-y: 200.71;
	--blob-size: 702;
}

.c-brand-glow__blob--10 {
	--blob-color: #7b3dff;
	--blob-x: -349.92;
	--blob-y: -182.73;
	--blob-size: 702;
}

.c-brand-glow__blob--11 {
	--blob-color: #2e136a;
	--blob-x: -102.56;
	--blob-y: -72.84;
	--blob-size: 1195;
}

.c-brand-glow__blob--12 {
	--blob-color: #ffffff;
	--blob-x: -466.26;
	--blob-y: 324.48;
	--blob-size: 435;
}