@font-face {
	font-family: "Sofia Sans Extra Condensed";
	src: url("../fonts/sofia-sans-extra-condensed-700.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-400.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-400-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("../fonts/source-serif-4-600.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}

:root {
	--bg: #0F141A;
	--surface: #18202A;
	--ink: #E9EDF3;
	--muted: #9AA6B4;
	--line: #2B3642;
	--accent: #E0A458;
	--font-display: "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif;
	--font-body: "Source Serif 4", Georgia, serif;
	--space-sm: 8px;
	--space-md: 16px;
	--space-lg: 32px;
	--space-xl: 96px;
	--gutter: clamp(16px, 4vw, 48px);
	--container: 1240px;
	--measure: 68ch;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
	line-height: 1.65;
	overflow-x: hidden;
}

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

a { color: inherit; text-decoration-color: var(--accent); text-underline-offset: 0.18em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

:where(h1, h2, h3, h4) {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.02;
	text-transform: uppercase;
	letter-spacing: 0.01em;
}
h1 { font-size: clamp(3.25rem, 7.4vw, 6.75rem); }
h2 { font-size: clamp(2.25rem, 4vw, 3.5rem); }
h3 { font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.08; }

.conteneur {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.evitement {
	position: absolute;
	left: var(--space-md);
	top: -100px;
	z-index: 10;
	padding: var(--space-sm) var(--space-md);
	background: var(--accent);
	color: var(--bg);
}
.evitement:focus { top: var(--space-md); }

/* En-tête */
.entete { position: relative; z-index: 2; border-bottom: 1px solid var(--line); }
.entete__rang {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	min-height: 76px;
}
.logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.625rem;
	letter-spacing: 0.04em;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
	white-space: nowrap;
}
.logo:hover { color: var(--ink); }
.marque { width: 40px; height: 40px; flex: none; }
.nav__liste {
	display: flex;
	gap: clamp(16px, 2.4vw, 32px);
	margin: 0;
	padding: 0;
	list-style: none;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.nav__liste a { text-decoration: none; }

/* Première vue */
.une {
	position: relative;
	display: flex;
	align-items: center;
	min-height: min(calc(100svh - 77px), 780px);
	padding-block: clamp(56px, 8vw, 96px);
	overflow: hidden;
}
.une__angle {
	position: absolute;
	top: 50%;
	right: -6vw;
	width: min(50vw, 680px);
	height: auto;
	aspect-ratio: 1;
	transform: translateY(-50%);
	overflow: visible;
}
.une__cercle { fill: none; stroke: var(--line); stroke-width: 3; }
.une__base, .une__rayon { fill: none; stroke: var(--accent); stroke-width: 12; stroke-linecap: square; }
.une__rayon {
	transform-box: view-box;
	transform-origin: 210px 690px;
	transform: rotate(-40deg);
	animation: ouverture 1100ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
@keyframes ouverture {
	from { transform: rotate(-2deg); }
	to { transform: rotate(-40deg); }
}
.une__texte { position: relative; }
.une h1 { max-width: 11.5em; font-size: clamp(3.25rem, 6.1vw, 5.75rem); }
.une__chapo {
	max-width: 40ch;
	margin: var(--space-lg) 0;
	color: var(--muted);
	font-size: clamp(1.125rem, 1.4vw, 1.3125rem);
	line-height: 1.5;
}
.bouton {
	display: inline-block;
	padding: 14px 28px 12px;
	background: var(--accent);
	color: var(--bg);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.375rem;
	line-height: 1.1;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 120ms ease;
}
.bouton:hover { color: var(--bg); transform: translateX(4px); }

/* Sections */
.section { padding-block: clamp(56px, 8vw, var(--space-xl)); }
.section__titre-discret { color: var(--muted); }
.section h2 { margin-bottom: var(--space-lg); }

.verticales { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.verticales li { border-bottom: 1px solid var(--line); }
.verticales a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-lg);
	padding-block: clamp(14px, 1.8vw, 22px);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: clamp(2.75rem, 7vw, 5.5rem);
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}
.verticales svg { width: clamp(32px, 4vw, 56px); flex: none; color: var(--accent); transition: transform 120ms ease; }
.verticales a:hover svg { transform: translateX(8px); }

/* Listes d'articles */
.titre-liste { margin-bottom: var(--space-lg); }
.titre-liste__description { max-width: var(--measure); margin-top: var(--space-md); color: var(--muted); }
.liste { border-top: 1px solid var(--line); }
.ligne {
	display: grid;
	gap: var(--space-lg);
	padding-block: var(--space-lg);
	border-bottom: 1px solid var(--line);
}
.ligne:has(.ligne__image) { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); }
.ligne h3 a { text-decoration: none; }
.ligne p:last-child { max-width: var(--measure); margin: var(--space-sm) 0 0; color: var(--muted); }
.meta {
	margin: 0 0 var(--space-sm);
	color: var(--muted);
	font-size: 0.9375rem;
}
.meta a { color: var(--accent); margin-right: var(--space-sm); text-decoration: none; }
.vide p { color: var(--muted); }
.lien { color: var(--accent); }

/* Article */
.article { padding-block: clamp(48px, 7vw, 80px) var(--space-xl); }
.article__tete h1 { max-width: 15em; font-size: clamp(2.75rem, 6vw, 5.25rem); }
.article__chapo { max-width: 52ch; margin: var(--space-md) 0 0; color: var(--muted); font-size: 1.25rem; line-height: 1.5; }
.article__image { margin-block: var(--space-lg) 0; }
.article__image img { width: 100%; }
.article__corps { margin-top: var(--space-lg); }
.article__corps > * { max-width: var(--measure); margin-inline: 0; }
.article__corps > .alignwide, .article__corps > .alignfull { max-width: none; }
.article__corps h2 { margin-block: 1.6em 0.5em; }
.article__corps h3 { margin-block: 1.4em 0.4em; }
.article__corps blockquote {
	margin-block: var(--space-lg);
	padding-left: var(--space-md);
	border-left: 3px solid var(--accent);
	font-style: italic;
}
.article__corps figcaption { color: var(--muted); font-size: 0.9375rem; }

/* Pagination */
.navigation.pagination { margin-top: var(--space-lg); font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; text-transform: uppercase; }
.nav-links { display: flex; flex-wrap: wrap; gap: var(--space-md); }
.page-numbers { text-decoration: none; }
.page-numbers.current { color: var(--accent); }

/* Pied de page */
.pied { border-top: 1px solid var(--line); padding-block: var(--space-lg); color: var(--muted); }
.pied__rang { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-md); }
.pied .logo { color: var(--ink); }
.pied p { margin: 0; }

/* Petits écrans */
@media (max-width: 760px) {
	.entete__rang { flex-direction: column; align-items: flex-start; gap: var(--space-sm); padding-block: var(--space-md); }
	.nav { width: 100%; overflow-x: auto; }
	.nav__liste { font-size: 1.125rem; }
	.une { display: block; min-height: 0; padding-block: 48px 56px; }
	.une__angle { top: auto; bottom: -60px; right: -90px; width: 300px; transform: none; opacity: 0.55; }
	.une__cercle { display: none; }
	.ligne:has(.ligne__image) { grid-template-columns: minmax(0, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.une__rayon { animation: none; }
	.bouton, .verticales svg { transition: none; }
}