/* ==========================================================================
   Kraaps — styles du thème
   Direction : minimalisme suisse. Blanc, noir, une seule famille (Hanken Grotesk) :
   titres en light légèrement resserrés, petites capitales espacées pour le reste,
   pas d'italique, beaucoup de blanc, compositions asymétriques alignées à gauche
   (seul le logotype est centré).
   Sommaire : polices · tokens · base · header · accueil · listes de noms ·
   en-têtes de page · commercial · editorial · projet · about · contenu ·
   footer · lightbox · utilitaires
   ========================================================================== */

/* Police auto-hébergée (aucun appel à Google Fonts : RGPD + performance).
   Une seule famille variable de 300 à 600 sert à tout le site. */
@font-face {
	font-family: "Hanken Grotesk";
	font-style: normal;
	font-weight: 300 600;
	font-display: swap;
	src: url("../fonts/hanken-grotesk-var-latin.woff2") format("woff2");
}

/* Tokens ------------------------------------------------------------------ */
:root {
	--paper: #ffffff;
	--ink: #0a0a0a;
	--ink-2: #2b2b2b;
	--muted: #737373;
	--faint: #bdbdbd;
	--line: #e7e7e7;
	--placeholder: #f3f3f3;

	--display: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--sans: "Hanken Grotesk", "Helvetica Neue", Helvetica, Arial, sans-serif;
	/* Titres : light, approche resserrée (plus serrée quand le corps est grand) */
	--display-weight: 300;
	--display-track: -0.04em;
	--display-track-s: -0.025em;

	/* Petites capitales espacées : la signature typographique du site */
	--label-size: 0.6875rem;
	--label-track: 0.22em;

	--gutter: clamp(18px, 3.4vw, 56px);
	--gap: clamp(14px, 2.4vw, 40px);
	/* Pleine largeur : la mise en page suit l'écran, seules les marges (--gutter) la bordent.
	   Les blocs de texte gardent leur propre largeur de lecture (ch). */
	--max: none;
	--max-wide: none;
	--header-h: 68px;

	--ease: cubic-bezier(0.22, 0.61, 0.21, 1);

	--z-header: 10;
	--z-preview: 15;
	--z-nav: 20;

	color-scheme: light;
}
@media (min-width: 861px) {
	:root { --header-h: 92px; }
}

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

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-behavior: smooth;
	scroll-padding-top: calc(var(--header-h) + 16px);
}
html:has(dialog[open]),
body.nav-open { overflow: hidden; }

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font: 400 0.9375rem/1.7 var(--sans);
	letter-spacing: 0.005em;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

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

button { font: inherit; color: inherit; }

:focus-visible {
	outline: 1px solid var(--ink);
	outline-offset: 4px;
}

::selection { background: var(--ink); color: var(--paper); }

h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

.wrap {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.wrap--text { max-width: calc(66ch + 2 * var(--gutter)); }

.site-main:focus { outline: none; }

/* Libellés et liens ------------------------------------------------------- */
.eyebrow {
	margin: 0 0 1.2rem;
	font: 400 var(--label-size)/1.5 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--muted);
}

.text-link,
.link-arrow {
	display: inline-flex;
	align-items: center;
	gap: 0.9em;
	padding-bottom: 7px;
	border-bottom: 1px solid currentColor;
	font: 400 var(--label-size)/1 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	text-decoration: none;
	transition: border-color 0.4s var(--ease), color 0.4s var(--ease);
}
.text-link:hover,
.link-arrow:hover { border-bottom-color: transparent; }
.link-arrow svg { flex: none; width: 13px; height: 13px; }

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.8em;
	min-height: 48px;
	padding: 0 30px;
	border: 1px solid var(--ink);
	background: var(--ink);
	color: var(--paper);
	font: 400 var(--label-size)/1 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.button:hover { background: var(--paper); color: var(--ink); }
.button--ghost { background: transparent; color: var(--ink); }
.button--ghost:hover { background: var(--ink); color: var(--paper); }
.button svg { width: 14px; height: 14px; }

/* Apparition : mouvement seulement, jamais d'opacité 0 (le titre est souvent
   l'élément LCP mesuré par Google, il doit être visible dès le premier rendu). */
@keyframes kraaps-rise {
	from { transform: translateY(10px); }
}
.home-intro__name,
.page-head__title,
.project__title,
.about__title { animation: kraaps-rise 1s var(--ease) both; }

/* Images chargées à la demande : fondu à l'arrivée (jamais les premières, candidates LCP) */
.js :is(.mosaic, .strip, .gallery, .ed-index__thumb, .about__portrait) img[loading="lazy"]:not(.is-loaded) { opacity: 0; }
:is(.mosaic, .strip, .gallery, .ed-index__thumb, .about__portrait) img { transition: opacity 0.8s var(--ease); }

/* Fondu discret entre les pages (navigateurs compatibles) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.3s; animation-timing-function: var(--ease); }

/* Header ------------------------------------------------------------------ */
.skip-link {
	position: absolute;
	top: -100px;
	left: 8px;
	z-index: 100;
	padding: 12px 18px;
	background: var(--ink);
	color: var(--paper);
	font-size: var(--label-size);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	text-decoration: none;
}
.skip-link:focus { top: 8px; }

.site-header {
	position: sticky;
	top: 0;
	z-index: var(--z-header);
	transition: transform 0.5s var(--ease);
	view-transition-name: site-header;
}
/* Fond sur un pseudo-élément : un backdrop-filter sur le header casserait
   le position: fixed du menu mobile. */
.site-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.94);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border-bottom: 1px solid transparent;
	transition: border-color 0.4s var(--ease);
}
.site-header.is-scrolled::before { border-bottom-color: var(--line); }
.site-header.is-hidden { transform: translateY(-100%); }

.site-header__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	max-width: var(--max-wide);
	height: var(--header-h);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.site-nav { grid-column: 1; justify-self: start; }
.brand { grid-column: 2; }
.site-header__aside {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	gap: 30px;
}

.brand {
	position: relative;
	z-index: calc(var(--z-nav) + 1);
	display: inline-flex;
	align-items: center;
	text-decoration: none;
}
.brand__word {
	/* Le tracking ajoute un espace après la dernière lettre : on le compense pour un centrage optique. */
	margin-right: -0.42em;
	font: 500 1.0625rem/1 var(--sans);
	letter-spacing: 0.42em;
	text-transform: uppercase;
}
.brand__logo { width: auto; height: 22px; }

.site-nav__list {
	display: flex;
	gap: clamp(22px, 2.6vw, 44px);
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav__list a,
.site-header__link {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding-block: 8px;
	font: 400 var(--label-size)/1 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	text-decoration: none;
}
.site-nav__list a::after,
.site-header__link:not(.site-header__social)::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.5s var(--ease);
}
.site-nav__list a:hover::after,
.site-header__link:hover::after,
.site-nav__list .current-menu-item > a::after,
.site-nav__list .current-menu-ancestor > a::after,
.site-nav__list .current_page_item > a::after {
	transform: scaleX(1);
	transform-origin: left;
}
.site-header__social svg { width: 16px; height: 16px; }
.site-header__social:hover { opacity: 0.55; }
.site-nav__extra { display: none; }

.nav-toggle,
.site-header__ig { display: none; }

@media (max-width: 860px) {
	.site-header__link { display: none; }
	/* Le menu est un calque plein écran : la colonne de gauche accueille Instagram. */
	.site-header__ig {
		grid-column: 1;
		grid-row: 1;
		justify-self: start;
		display: grid;
		place-items: center;
		width: 44px;
		height: 44px;
		margin-left: -13px; /* icône alignée sur la marge, zone tactile de 44 px */
		transition: opacity 0.4s var(--ease);
	}
	.site-header__ig svg { width: 17px; height: 17px; }
	.site-header__ig:hover { opacity: 0.55; }
	.nav-toggle {
		position: relative;
		z-index: calc(var(--z-nav) + 1);
		display: inline-flex;
		align-items: center;
		justify-content: flex-end;
		min-width: 44px;
		min-height: 44px;
		padding: 0;
		border: 0;
		background: none;
		cursor: pointer;
	}
	.nav-toggle__icon {
		position: relative;
		width: 22px;
		height: 7px;
	}
	.nav-toggle__icon::before,
	.nav-toggle__icon::after {
		content: "";
		position: absolute;
		left: 0;
		width: 100%;
		height: 1px;
		background: currentColor;
		transition: transform 0.4s var(--ease), top 0.4s var(--ease);
	}
	.nav-toggle__icon::before { top: 0; }
	.nav-toggle__icon::after { top: 6px; }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { top: 3px; transform: rotate(45deg); }
	.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { top: 3px; transform: rotate(-45deg); }

	.site-nav {
		position: fixed;
		inset: 0;
		/* Dans la grille du header, « start » rétrécirait le menu plein écran. */
		justify-self: stretch;
		align-self: stretch;
		width: 100%;
		z-index: var(--z-nav);
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		gap: 56px;
		padding: var(--header-h) var(--gutter) 48px;
		background: var(--paper);
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.45s var(--ease), visibility 0.45s;
	}
	.site-nav.is-open { opacity: 1; visibility: visible; }
	.site-nav__list { flex-direction: column; align-items: flex-start; gap: 14px; }
	.site-nav__list a {
		font-family: var(--display);
		font-size: clamp(2rem, 9vw, 2.75rem);
		letter-spacing: 0;
		text-transform: none;
	}
	.site-nav__list a::after { display: none; }
	.site-nav__list .current-menu-item > a,
	.site-nav__list .current-menu-ancestor > a { font-weight: 400; }
	.site-nav__extra {
		display: flex;
		gap: 32px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.site-nav__extra a {
		font-size: var(--label-size);
		letter-spacing: var(--label-track);
		text-transform: uppercase;
		text-decoration: none;
		color: var(--muted);
	}
}

/* Accueil ----------------------------------------------------------------- */
.home-intro {
	display: grid;
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	align-items: end;
	gap: 36px 64px;
	padding-block: clamp(56px, 9vw, 140px) clamp(48px, 6vw, 96px);
}
.home-intro__title { margin: 0; font-weight: 400; }
.home-intro__name {
	display: block;
	font-family: var(--display);
	font-size: clamp(2.6rem, 6.6vw, 6.25rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}
.home-intro__role {
	display: block;
	margin-top: 26px;
	font: 400 var(--label-size)/1.6 var(--sans);
	letter-spacing: 0.26em;
	text-transform: uppercase;
	color: var(--muted);
}
.home-intro__aside {
	justify-self: end;
	max-width: 40ch;
	padding-bottom: 6px;
}
.home-intro__text {
	margin: 0 0 30px;
	color: var(--ink-2);
}
.home-intro__text p { margin: 0; }
.home-intro__links {
	display: flex;
	flex-wrap: wrap;
	gap: 18px 44px;
}
@media (max-width: 860px) {
	.home-intro { grid-template-columns: 1fr; }
	.home-intro__aside { justify-self: start; }
}

.mosaic {
	max-width: var(--max-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.mosaic__grid {
	display: flex;
	align-items: flex-start;
	gap: var(--gap);
}
.mosaic__col {
	display: flex;
	flex: 1 1 0;
	flex-direction: column;
	gap: var(--gap);
	min-width: 0;
}
.mosaic__item { margin: 0; }
.mosaic__link {
	display: block;
	background: var(--placeholder);
	cursor: zoom-in;
}
.mosaic__link img { width: 100%; }
.mosaic__link:hover img { opacity: 0.88; }

/* Légende au survol (souris uniquement) */
.plate {
	overflow: hidden;
	padding-top: 12px;
	font: 400 0.625rem/1.4 var(--sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--muted);
	text-overflow: ellipsis;
	white-space: nowrap;
	opacity: 0;
	transition: opacity 0.5s var(--ease);
}
.mosaic__item:hover .plate,
.mosaic__item:focus-within .plate { opacity: 1; }
@media (hover: none) {
	.plate { display: none; }
}

@media (max-width: 720px) {
	.mosaic__grid {
		display: block;
		columns: 2;
		column-gap: 12px;
	}
	.mosaic__col { display: contents; }
	.mosaic__item {
		margin-bottom: 12px;
		break-inside: avoid;
	}
}

/* Listes clients / publications ------------------------------------------ */
.name-lists {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr));
	gap: 56px clamp(40px, 6vw, 112px);
	padding-block: clamp(110px, 13vw, 200px) 0;
}
.name-lists__block .eyebrow { margin-bottom: 26px; }
.name-list {
	display: flex;
	flex-wrap: wrap;
	gap: 14px 36px;
	margin: 0;
	padding: 0;
	list-style: none;
	font: 400 0.75rem/1.6 var(--sans);
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.name-list a {
	color: var(--ink-2);
	text-decoration: none;
	transition: color 0.4s var(--ease);
}
.name-list a:hover { color: var(--muted); }

/* En-têtes de pages ------------------------------------------------------- */
.page-head {
	padding-block: clamp(44px, 7vw, 112px) clamp(44px, 6vw, 92px);
}
.page-head__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(2.75rem, 7.4vw, 6.65rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}
.page-head__intro {
	max-width: 52ch;
	margin: 28px 0 0;
	color: var(--ink-2);
}

.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: 0.7em;
	margin: 0 0 32px;
	padding: 0;
	list-style: none;
	font: 400 0.625rem/1.5 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--muted);
}
.breadcrumbs li:not(:last-child)::after { content: "/"; margin-left: 0.7em; color: var(--faint); }
.breadcrumbs a { text-decoration: none; }
.breadcrumbs a:hover { color: var(--ink); }

/* Commercial -------------------------------------------------------------- */
.client-index ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 30px;
	margin: 44px 0 0;
	padding: 0;
	list-style: none;
	font: 400 0.625rem/1.5 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
}
.client-index a {
	color: var(--muted);
	text-decoration: none;
	transition: color 0.4s var(--ease);
}
.client-index a:hover { color: var(--ink); }

.client {
	display: grid;
	grid-template-columns: minmax(200px, 20%) minmax(0, 1fr);
	align-items: center;
	gap: clamp(28px, 4vw, 80px);
	max-width: var(--max-wide);
	margin-inline: auto;
	padding: clamp(48px, 6vw, 104px) 0 clamp(48px, 6vw, 104px) var(--gutter);
	border-top: 1px solid var(--line);
}
.client__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}
.client__logo {
	display: flex;
	align-items: center;
	width: min(170px, 100%);
	min-height: 56px;
	margin-bottom: 14px;
	text-decoration: none;
	transition: opacity 0.4s var(--ease);
}
.client__logo:hover { opacity: 0.55; }
.client__logo img {
	width: auto;
	max-width: 100%;
	max-height: 48px;
	object-fit: contain;
	object-position: left center;
}
.client__logo-text {
	font: 400 1.5rem/1.1 var(--display);
	letter-spacing: 0;
}
.client__name {
	margin: 0;
	font: 400 var(--label-size)/1.4 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
}
.client__name a { text-decoration: none; }
.client__meta {
	margin: 0;
	font: 400 0.625rem/1.4 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--muted);
}
.client__meta:empty { display: none; }
.client__more { margin-top: 16px; }

.strip { position: relative; min-width: 0; }
.strip__track {
	display: flex;
	gap: clamp(10px, 1.2vw, 20px);
	margin: 0;
	padding: 0 var(--gutter) 0 0;
	overflow-x: auto;
	list-style: none;
	/* Défilement libre : pas d'aimantation, la bande glisse et s'arrête où on la lâche. */
	overscroll-behavior-x: contain;
	scrollbar-width: none;
	cursor: grab;
}
.strip__track::-webkit-scrollbar { display: none; }
.strip__track.is-dragging { cursor: grabbing; user-select: none; }
.strip__track.is-dragging a { pointer-events: none; }
.strip__item {
	flex: 0 0 auto;
	background: var(--placeholder);
}
.strip__item a { display: block; }
.strip__item img {
	width: auto;
	max-width: none;
	height: clamp(280px, 32vw, 560px);
	-webkit-user-drag: none;
	user-select: none;
	transition: opacity 0.6s var(--ease);
}
.strip__item a:hover img { opacity: 0.88; }
.strip__controls {
	display: flex;
	gap: 10px;
	margin-top: 22px;
}
.strip__controls[hidden] { display: none; }
.strip__btn {
	display: grid;
	place-items: center;
	width: 42px;
	height: 42px;
	padding: 0;
	border: 1px solid var(--line);
	border-radius: 50%;
	background: transparent;
	cursor: pointer;
	transition: border-color 0.4s var(--ease), opacity 0.4s;
}
.strip__btn svg { width: 14px; height: 14px; }
.strip__btn:hover { border-color: var(--ink); }
.strip__btn:disabled { opacity: 0.3; cursor: default; border-color: var(--line); }

@media (max-width: 860px) {
	.client { grid-template-columns: 1fr; gap: 28px; }
	/* Logo en haut, puis nom à gauche et « View the project » à droite sur la même ligne. */
	.client__head {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		align-items: center;
		column-gap: 24px;
		row-gap: 10px;
		padding-right: var(--gutter);
	}
	.client__logo { grid-column: 1 / -1; }
	.client__name,
	.client__meta { grid-column: 1; }
	.client__more {
		grid-column: 2;
		grid-row: 2;
		justify-self: end;
		margin-top: 0;
	}
	.strip__item img { height: clamp(260px, 64vw, 400px); }
	.strip__controls { display: none; }
}

/* Editorial --------------------------------------------------------------- */
.ed-index {
	margin-block: 0;
	padding-block: 0 clamp(32px, 5vw, 80px);
	list-style: none;
}
.ed-index__item { border-top: 1px solid var(--line); }
.ed-index__item:last-child { border-bottom: 1px solid var(--line); }
.ed-index__link {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto 4.5rem;
	align-items: baseline;
	gap: 6px 36px;
	padding-block: clamp(22px, 2.6vw, 40px);
	text-decoration: none;
}
.ed-index__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(1.85rem, 4.05vw, 3.7rem);
	font-weight: 400;
	line-height: 1.05;
	transition: color 0.5s var(--ease);
}
.ed-index__pub,
.ed-index__year {
	font: 400 0.625rem/1.4 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--muted);
}
.ed-index__year { text-align: right; }
@media (max-width: 860px) {
	.ed-index__link { grid-template-columns: minmax(0, 1fr) auto; }
	.ed-index__title { grid-column: 1 / -1; }
	.ed-index__year { text-align: left; }
}
.ed-index__thumb { display: none; }

/* Sans survol possible (mobile, tablette, écran tactile) : la couverture est une vignette à droite de chaque ligne. */
@media not all and (hover: hover) and (pointer: fine) and (min-width: 861px) {
	.ed-index__link {
		--ed-thumb: clamp(76px, 20vw, 132px);
		grid-template-columns: minmax(0, 1fr) auto var(--ed-thumb);
		column-gap: 20px;
	}
	.ed-index__title {
		grid-column: 1 / 3;
		grid-row: 1;
		align-self: end;
		text-wrap: balance;
	}
	.ed-index__pub { grid-column: 1; grid-row: 2; align-self: start; }
	.ed-index__year { grid-column: 2; grid-row: 2; align-self: start; text-align: right; }
	.ed-index__thumb {
		display: block;
		grid-column: 3;
		grid-row: 1 / 3;
		align-self: center;
		aspect-ratio: 4 / 5;
		overflow: hidden;
		background: var(--placeholder);
	}
	.ed-index__thumb img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}

/* Survol desktop : les autres titres s'effacent, la couverture suit le curseur */
@media (hover: hover) and (pointer: fine) and (min-width: 861px) {
	.ed-index:hover .ed-index__title { color: var(--faint); }
	.ed-index__link:hover .ed-index__title,
	.ed-index__link:focus-visible .ed-index__title { color: var(--ink); transform: translateX(10px); }
	.ed-index__title { transition: color 0.5s var(--ease), transform 0.6s var(--ease); }
	.ed-index__thumb {
		position: fixed;
		top: 0;
		left: 0;
		z-index: var(--z-preview);
		display: block;
		width: clamp(200px, 18vw, 300px);
		pointer-events: none;
		opacity: 0;
		transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0) translate(-50%, -50%) scale(0.96);
		transition: opacity 0.4s var(--ease), transform 0.6s var(--ease);
	}
	.ed-index__link:hover .ed-index__thumb {
		opacity: 1;
		transform: translate3d(var(--mx, 50vw), var(--my, 50vh), 0) translate(-50%, -50%) scale(1);
	}
	.ed-index__thumb img { width: 100%; }
}

/* Projet ------------------------------------------------------------------ */
.project__head { padding-block: clamp(48px, 7vw, 112px) clamp(56px, 8vw, 124px); }
.project__intro {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
	align-items: end;
	gap: 40px clamp(40px, 7vw, 128px);
}
.project__titles {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.project__logo img {
	width: auto;
	max-height: 44px;
	margin-bottom: 30px;
}
/* Le logo remplace le titre : un peu plus présent, sans marge sous lui. */
.project__titles--logo .project__logo img {
	max-width: min(480px, 100%);
	max-height: clamp(48px, 5.5vw, 88px);
	margin-bottom: 0;
}
.project__title {
	margin: 0;
	font-family: var(--display);
	font-size: clamp(2.75rem, 7vw, 6.45rem);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.01em;
}
.project__sub {
	margin: 18px 0 0;
	font-size: 1.0625rem;
	color: var(--muted);
}
.project__sub strong { font-weight: 500; color: var(--ink); }
.project__info {
	justify-self: end;
	width: 100%;
	max-width: 580px;
}
.project__lede,
.about__text > p:first-child {
	font-family: var(--display);
	font-size: clamp(1.125rem, 1.6vw, 1.375rem);
	line-height: 1.55;
	color: var(--ink-2);
}
.project__text { margin-bottom: 48px; }

.credits {
	margin: 0;
	border-top: 1px solid var(--line);
}
.credits > div {
	display: grid;
	grid-template-columns: 9.5rem minmax(0, 1fr);
	align-items: baseline;
	gap: 28px;
	padding: 13px 0;
	border-bottom: 1px solid var(--line);
	font-size: 0.8125rem;
}
.credits dt {
	font: 400 0.625rem/1.5 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--muted);
}
.credits dd { margin: 0; }

.gallery {
	display: flex;
	flex-direction: column;
	gap: clamp(24px, 4.4vw, 80px);
	max-width: var(--max-wide);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.gallery__row {
	display: grid;
	gap: clamp(16px, 2.6vw, 40px);
}
.gallery__row--full { grid-template-columns: 1fr; }
.gallery__row--pair { grid-template-columns: 1fr 1fr; align-items: start; }
.gallery__row--solo {
	grid-template-columns: minmax(0, 620px);
	justify-content: center;
}
.gallery__item { margin: 0; }
.gallery__item a {
	display: block;
	background: var(--placeholder);
	cursor: zoom-in;
}
.gallery__item img { width: 100%; }

.project-nav {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 32px;
	padding-block: clamp(80px, 10vw, 160px) 0;
}
.project-nav__next {
	display: grid;
	grid-template-areas:
		"label img"
		"title img";
	grid-template-columns: auto auto;
	align-items: end;
	column-gap: 28px;
	text-align: right;
	text-decoration: none;
}
.project-nav__next .eyebrow { grid-area: label; margin: 0 0 0.6rem; }
.project-nav__title {
	grid-area: title;
	font-family: var(--display);
	font-size: clamp(1.75rem, 3.6vw, 3rem);
	line-height: 1.05;
	transition: opacity 0.4s var(--ease);
}
.project-nav__next:hover .project-nav__title { color: var(--muted); }
.project-nav__img {
	grid-area: img;
	width: clamp(84px, 9vw, 140px);
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

@media (max-width: 720px) {
	.gallery__row--pair,
	.gallery__row--solo { grid-template-columns: 1fr; }
	.project__intro { grid-template-columns: 1fr; }
	.project__info { justify-self: start; }
	.project-nav { flex-direction: column-reverse; align-items: stretch; }
	/* Le lien de retour garde la largeur de son texte (sinon le filet traverse l'écran). */
	.project-nav__back { align-self: flex-start; }
	.project-nav__next { grid-template-columns: 1fr auto; text-align: left; }
}

/* About ------------------------------------------------------------------- */
.about__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: clamp(40px, 7vw, 128px);
	max-width: var(--max-wide);
	padding-block: clamp(24px, 4vw, 64px) 0;
}
.about__portrait {
	margin: 0;
	background: var(--placeholder);
}
.about__portrait img {
	width: 100%;
	max-height: calc(100dvh - var(--header-h) - 48px);
	object-fit: cover;
}
.about__body { max-width: 560px; }
.about__title {
	margin: 0 0 1.2rem;
	font-family: var(--display);
	font-size: clamp(2.25rem, 4.2vw, 3.75rem);
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: -0.01em;
}
.about__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 2.25rem 0 0;
	padding: 0;
	list-style: none;
}
.about__agent {
	margin: 1.2rem 0 0;
	font: 400 0.625rem/1.6 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--muted);
}
.about__agent a { color: var(--ink); text-decoration: none; border-bottom: 1px solid currentColor; }
.about__text { margin-top: 3rem; }

@media (max-width: 900px) {
	.about__grid { grid-template-columns: 1fr; }
	.about__portrait img { max-height: 72vh; }
}

/* Contenu éditable -------------------------------------------------------- */
.entry > * { margin-block: 0; }
.entry > * + * { margin-top: 1.2em; }
.entry h2 {
	margin-top: 2.6em;
	font-family: var(--display);
	font-size: clamp(1.75rem, 2.6vw, 2.25rem);
	font-weight: 400;
	line-height: 1.1;
}
.entry h3 {
	margin-top: 2em;
	font: 400 var(--label-size)/1.5 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
}
.entry a { text-decoration-color: var(--faint); }
.entry a:hover { text-decoration-color: currentColor; }
.entry ul,
.entry ol { padding-left: 1.2em; }
.entry figure { margin-inline: 0; }
.entry figcaption { margin-top: 0.8em; font-size: 0.75rem; color: var(--muted); }

.wp-block-details {
	padding: 18px 0;
	border-top: 1px solid var(--line);
}
.wp-block-details:last-of-type { border-bottom: 1px solid var(--line); }
.wp-block-details summary {
	display: flex;
	justify-content: space-between;
	gap: 18px;
	list-style: none;
	cursor: pointer;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	flex: none;
	font-weight: 300;
	transition: transform 0.4s var(--ease);
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details > :not(summary) { margin-top: 0.8rem; color: var(--ink-2); }

.post-list { margin: 0; padding: 0; list-style: none; }
.post-list li {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 16px 0;
	border-top: 1px solid var(--line);
}
.post-list time { font-size: 0.75rem; color: var(--muted); }

.empty { padding-block: 56px; color: var(--muted); }

.not-found { padding-block: clamp(72px, 12vw, 200px) 0; }
.not-found__links { display: flex; flex-wrap: wrap; gap: 22px 40px; margin-top: 3rem; }

/* Footer ------------------------------------------------------------------ */
.site-footer {
	margin-top: clamp(110px, 13vw, 220px);
	border-top: 1px solid var(--line);
}
.footer-cta {
	max-width: var(--max-wide);
	margin-inline: auto;
	padding: clamp(80px, 10vw, 160px) var(--gutter) clamp(64px, 8vw, 120px);
}
.footer-cta .eyebrow { margin-bottom: 26px; }
.footer-cta__mail {
	display: inline-block;
	max-width: 100%;
	font-family: var(--display);
	font-size: clamp(2.25rem, 6.4vw, 6rem);
	line-height: 1.05;
	text-decoration: none;
	overflow-wrap: anywhere;
	background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
	transition: background-size 0.6s var(--ease);
}
.footer-cta__mail:hover { background-size: 100% 1px; }
.footer-cta__agent {
	margin: 26px 0 0;
	font: 400 0.625rem/1.6 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	color: var(--muted);
}
.footer-cta__agent a { color: var(--ink); text-decoration: none; }

.footer-bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px 40px;
	max-width: var(--max-wide);
	margin-inline: auto;
	padding: 28px var(--gutter) 34px;
	border-top: 1px solid var(--line);
	font: 400 0.625rem/1.6 var(--sans);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--muted);
}
.footer-bottom p { margin: 0; }
.footer-bottom ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.footer-bottom a { text-decoration: none; transition: color 0.4s var(--ease); }
.footer-bottom a:hover { color: var(--ink); }
.footer-bottom__cookies {
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	letter-spacing: inherit;
	text-transform: inherit;
	cursor: pointer;
	transition: color 0.4s var(--ease);
}
.footer-bottom__cookies:hover { color: var(--ink); }

/* Bandeau cookies : discret, en bas à gauche ; refuser pèse autant qu'accepter. */
.consent {
	position: fixed;
	bottom: var(--gutter);
	left: var(--gutter);
	z-index: calc(var(--z-nav) - 1);
	width: min(420px, calc(100% - 2 * var(--gutter)));
	padding: 22px 24px 24px;
	border: 1px solid var(--line);
	background: var(--paper);
	font: 400 0.8125rem/1.6 var(--sans);
	color: var(--ink);
}
.consent[hidden] { display: none; }
.consent__text { margin: 0 0 18px; }
.consent__text a { color: inherit; text-underline-offset: 3px; }
.consent__actions { display: flex; gap: 10px; }
.consent__btn {
	flex: 1;
	min-height: 44px;
	padding: 0 18px;
	border: 1px solid var(--ink);
	background: transparent;
	color: var(--ink);
	font: 400 var(--label-size)/1 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.4s var(--ease), color 0.4s var(--ease);
}
.consent__btn:hover,
.consent__btn:focus-visible { background: var(--ink); color: var(--paper); }

.footer-bottom__credit a {
	display: inline-flex;
	align-items: center;
	gap: 12px;
}
.footer-bottom__luds {
	width: auto;
	height: 22px;
	margin-top: -2px; /* la signature descend sous la ligne : recentrage optique */
}

/* Lightbox ---------------------------------------------------------------- */
.lightbox {
	width: 100%;
	max-width: none;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: var(--paper);
	color: var(--ink);
	overscroll-behavior: contain;
}
.lightbox[open] {
	display: grid;
	grid-template-rows: minmax(0, 1fr) auto;
	animation: kraaps-fade 0.4s var(--ease);
}
.lightbox::backdrop { background: var(--paper); }
@keyframes kraaps-fade { from { opacity: 0; } }

.lightbox__stage {
	display: grid;
	place-items: center;
	min-height: 0;
	margin: 0;
	padding: 72px clamp(64px, 8vw, 140px) 8px;
}
.lightbox__img {
	width: auto;
	max-width: 100%;
	height: auto;
	max-height: calc(100dvh - 150px);
	object-fit: contain;
	transition: opacity 0.4s var(--ease);
}
.lightbox__img.is-loading { opacity: 0; }
.lightbox__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding: 16px var(--gutter) 26px;
	font: 400 0.625rem/1.5 var(--sans);
	letter-spacing: var(--label-track);
	text-transform: uppercase;
}
.lightbox__bar p { margin: 0; }
.lightbox__count {
	min-width: 6ch;
	font-variant-numeric: tabular-nums;
	color: var(--muted);
}
.lightbox__caption { flex: 1; text-align: center; color: var(--muted); }
.lightbox__link[hidden] { display: none; }
.lightbox__btn {
	position: absolute;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	transition: opacity 0.3s var(--ease);
}
.lightbox__btn[hidden] { display: none; }
.lightbox__btn:hover { opacity: 0.5; }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__btn--prev { top: 50%; left: 12px; translate: 0 -50%; }
.lightbox__btn--next { top: 50%; right: 12px; translate: 0 -50%; }
.lightbox__btn--close { top: 14px; right: 12px; font-size: 1.75rem; font-weight: 200; line-height: 1; }

@media (max-width: 720px) {
	.lightbox__stage { padding: 64px 0 0; }
	.lightbox__btn--prev,
	.lightbox__btn--next { top: auto; bottom: 8px; translate: none; }
	.lightbox__bar { flex-wrap: wrap; padding-inline: 68px; }
	.lightbox__caption { order: 3; flex-basis: 100%; }
}

/* Titres Hanken Grotesk : light partout, approche resserrée ----------------- */
.home-intro__name,
.page-head__title,
.project__title,
.ed-index__title,
.about__title,
.project-nav__title,
.footer-cta__mail,
.client__logo-text,
.entry h2,
.project__lede,
.about__text > p:first-child {
	font-weight: var(--display-weight);
}
.home-intro__name,
.page-head__title,
.project__title { letter-spacing: var(--display-track); }
.ed-index__title,
.about__title,
.project-nav__title,
.footer-cta__mail,
.client__logo-text,
.entry h2 { letter-spacing: var(--display-track-s); }
@media (max-width: 860px) {
	.site-nav__list a { font-weight: var(--display-weight); letter-spacing: var(--display-track-s); }
}

/* Utilitaires ------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
	::view-transition-old(root),
	::view-transition-new(root) { animation: none !important; }
}