/* JL Photo — charte julienlegrand.com
   Gris galerie, encre, une seule famille (Schibsted Grotesk), jaune signalétique réservé au focus. */

@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/schibsted-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: normal;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/schibsted-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/schibsted-italic-latin.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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Schibsted Grotesk";
	font-style: italic;
	font-weight: 400 800;
	font-display: swap;
	src: url("../fonts/schibsted-italic-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ---------- Jetons ---------- */
:root {
	--wall: #e7e7e4;      /* fond : mur de galerie, neutre */
	--paper: #f3f3f1;     /* champs de formulaire */
	--ink: #16181a;       /* texte, titres */
	--graphite: #5c6064;  /* texte secondaire, années */
	--rule: #cbcbc6;      /* filets */
	--signal: #f2c200;    /* focus et sélection uniquement */

	--font: "Schibsted Grotesk", "Helvetica Neue", Arial, sans-serif;
	--step-0: 1rem;                               /* 16 px, texte */
	--step-1: 1.25rem;                            /* 20 px, chapô */
	--step-2: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
	--step-3: clamp(2.25rem, 1.4rem + 3.6vw, 4.5rem); /* titres de série */
	--step-index: clamp(1.75rem, 1.1rem + 2.6vw, 3.5rem);

	--gutter: clamp(16px, 3.2vw, 48px);
	--page-max: 1920px;   /* au-delà, la page se centre au lieu d'agrandir les photos */
	--measure: 64ch;
	--gap: clamp(12px, 1.4vw, 20px);
	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root {
		--wall: #1d1e1f;
		--paper: #262728;
		--ink: #ecebe7;
		--graphite: #a3a6a9;
		--rule: #3a3b3d;
		color-scheme: dark;
	}
}

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

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

body {
	margin: 0;
	background: var(--wall);
	color: var(--ink);
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.55;
	font-feature-settings: "kern", "liga";
	-webkit-font-smoothing: antialiased;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}

::selection { background: var(--signal); color: #16181a; }

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

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

:focus-visible {
	outline: 3px solid var(--signal);
	outline-offset: 3px;
}

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.skip-link {
	position: absolute;
	left: var(--gutter);
	top: -100px;
	background: var(--ink);
	color: var(--wall);
	padding: 8px 14px;
	z-index: 100;
}
.skip-link:focus { top: 12px; }

/* ---------- En-tête et pied ---------- */
.site-header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px 24px;
	padding: 22px var(--gutter);
}

.wordmark {
	font-size: var(--step-1);
	font-weight: 700;
	letter-spacing: -0.01em;
	text-decoration: none;
}

.site-nav__list {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.site-nav a {
	text-decoration: none;
	color: var(--graphite);
}
.site-nav a:hover,
.site-nav .current-menu-item > a,
.site-nav .current-menu-parent > a,
.site-nav .current-post-ancestor > a {
	color: var(--ink);
	text-decoration: underline;
}
.site-main { flex: 1; }

.site-header,
.site-main,
.site-footer {
	width: 100%;
	max-width: var(--page-max);
	margin-inline: auto;
}

.site-footer {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 8px 24px;
	margin-top: clamp(64px, 10vw, 140px);
	padding: 22px var(--gutter) 28px;
	border-top: 1px solid var(--rule);
	color: var(--graphite);
	font-size: 0.875rem;
}
.site-footer p { margin: 0; }
.site-footer__links { display: flex; gap: 20px; margin: 0; padding: 0; list-style: none; }

/* ---------- Accueil : index des séries ---------- */
.front {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: var(--gutter);
	padding: clamp(24px, 5vw, 72px) var(--gutter) 0;
	align-items: start;
}

.index {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule);
}

.index__link {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: baseline;
	gap: 16px;
	padding: 0.32em 0 0.38em;
	border-bottom: 1px solid var(--rule);
	font-size: var(--step-index);
	line-height: 1.08;
	letter-spacing: -0.025em;
	text-decoration: none;
	color: var(--graphite);
	transition: color 0.15s ease;
}
.index__link:hover,
.index__link:focus-visible,
.index__link[aria-current="true"] { color: var(--ink); }

.index__title { font-weight: 600; }
.index__title .series-region {
	font-weight: 400;
	font-size: 0.42em;
	letter-spacing: 0;
	vertical-align: 0.95em;
	margin-left: 0.2em;
	white-space: nowrap;
}

.index__year {
	font-size: 0.875rem;
	letter-spacing: 0;
	font-variant-numeric: tabular-nums;
	color: var(--graphite);
}

.index__thumb { display: none; }

.preview {
	position: sticky;
	top: 24px;
	margin: 0;
	height: calc(100vh - 48px);
	max-height: 860px;
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
}
.preview__img {
	width: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
	transition: opacity 0.2s ease;
}
.preview__img.is-loading { opacity: 0.35; }

@media (max-width: 860px) {
	.front { grid-template-columns: 1fr; }
	.preview { display: none; }
	.index__link {
		grid-template-columns: 72px 1fr auto;
		align-items: center;
		gap: 14px;
		padding: 10px 0;
		color: var(--ink);
	}
	.index__thumb {
		display: block;
		width: 72px;
		height: 72px;
		object-fit: cover;
	}
	.index__title .series-region {
		display: block;
		vertical-align: baseline;
		margin: 2px 0 0;
		font-size: 0.875rem;
		color: var(--graphite);
	}
}

/* ---------- Titres de page ---------- */
.page-head {
	padding: clamp(24px, 5vw, 72px) var(--gutter) clamp(20px, 3vw, 40px);
}
.page-title {
	margin: 0;
	font-size: var(--step-3);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.03em;
}

/* ---------- Grille des séries (archives) ---------- */
.grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(28px, 4vw, 56px) var(--gap);
	margin: 0;
	padding: 0 var(--gutter);
	list-style: none;
}
@media (max-width: 1100px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .grid { grid-template-columns: 1fr; } }

.grid__link { display: block; text-decoration: none; }
.grid__img {
	width: 100%;
	margin-inline: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	background: var(--rule);
}
.grid__caption {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	margin-top: 10px;
}
.grid__title .series-name { font-weight: 600; }
.grid__title .series-region { color: var(--graphite); }
.grid__year { color: var(--graphite); font-variant-numeric: tabular-nums; font-size: 0.875rem; }
.grid__link:hover .series-name { text-decoration: underline; }

.pagination { padding: 40px var(--gutter) 0; }
.pagination .nav-links { display: flex; gap: 16px; }

.empty { padding: 0 var(--gutter); }

/* ---------- Série ---------- */
.series__head {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: end;
	gap: 16px;
	padding: clamp(24px, 5vw, 72px) var(--gutter) clamp(24px, 3vw, 44px);
}
.series__title {
	margin: 0;
	font-size: var(--step-3);
	font-weight: 600;
	line-height: 1.02;
	letter-spacing: -0.03em;
}
.series__title .series-region {
	display: block;
	margin-top: 0.3em;
	font-size: var(--step-1);
	font-weight: 400;
	letter-spacing: 0;
	color: var(--graphite);
}
.series__year {
	font-size: var(--step-1);
	font-variant-numeric: tabular-nums;
	color: var(--graphite);
}

/* Contenu : texte en colonne étroite, galeries en grand. */
.entry { padding: 0 var(--gutter); }
.entry > p,
.entry > ul,
.entry > ol,
.entry > h2,
.entry > h3,
.entry > h4,
.entry > blockquote,
.entry > .wp-block-group,
.entry > .jl-bio,
.entry > .contact {
	max-width: var(--measure);
}
.series .entry > p:first-child { font-size: var(--step-1); line-height: 1.5; }
.entry p { margin: 0 0 1em; }
.entry h2 { font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 2em 0 0.6em; }
.entry h3 { font-size: var(--step-1); font-weight: 600; margin: 1.6em 0 0.4em; }
.entry blockquote { margin: 1.5em 0; padding-left: 1em; border-left: 2px solid var(--ink); }

/* Galeries Gutenberg : deux colonnes d'images entières, sans recadrage.
   Le sélecteur reprend :not(#individual-image) pour passer devant le style du cœur. */
.series .wp-block-gallery.has-nested-images {
	display: block;
	columns: 2;
	column-gap: var(--gap);
	/* padding et non margin : le CSS personnalisé du site force margin-block à 0 sur les figure. */
	padding: clamp(28px, 5vw, 72px) 0 0;
}
.series .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) {
	display: block;
	width: auto !important;
	margin: 0 0 var(--gap) !important;
	break-inside: avoid;
}
.series .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image:not(#individual-image) img,
.series .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img {
	width: 100%;           /* plafonnée en ligne à la largeur de l'original (max-width) */
	height: auto;
	margin-inline: auto;
	object-fit: initial;
	flex: none;
}
.series .wp-block-gallery figure.wp-block-image figcaption {
	position: static;
	background: none;
	color: var(--graphite);
	padding: 6px 0 0;
	text-align: left;
	font-size: 0.875rem;
}
.series .wp-block-gallery figure.wp-block-image a { display: block; cursor: zoom-in; }
@media (max-width: 760px) {
	.series .wp-block-gallery.has-nested-images { columns: 1; }
}

/* Images isolées dans une série */
.series .entry > .wp-block-image { margin: clamp(32px, 5vw, 64px) 0; }
.series .entry > .wp-block-image img { max-height: 92vh; width: auto; }

/* Navigation entre séries */
.series-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--gutter);
	margin: clamp(48px, 8vw, 120px) var(--gutter) 0;
	border-top: 1px solid var(--rule);
	padding-top: 20px;
}
.series-nav__link { text-decoration: none; display: block; }
.series-nav__link--newer { grid-column: 2; text-align: right; }
.series-nav__label { display: block; color: var(--graphite); font-size: 0.875rem; }
.series-nav__title { display: block; font-size: var(--step-2); font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; }
.series-nav__link:hover .series-nav__title { text-decoration: underline; }

/* ---------- About ---------- */
.about .page-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 16px 32px; }
.bio-switch { display: inline-flex; border: 1px solid var(--ink); }
.bio-switch button {
	font: inherit;
	font-size: 0.875rem;
	padding: 6px 14px;
	border: 0;
	background: transparent;
	color: var(--ink);
	cursor: pointer;
}
.bio-switch button[aria-pressed="true"] { background: var(--ink); color: var(--wall); }
.jl-bio p:first-child { font-size: var(--step-1); line-height: 1.5; }
.jl-bio + .jl-bio { margin-top: 2.5em; }
.has-bio-switch .jl-bio + .jl-bio { margin-top: 0; }
.jl-bio[hidden] { display: none; }

/* Parcours : années en marge sur grand écran */
.about .entry > h2 { margin-top: 2.4em; }
.about .entry > h3 {
	margin: 1.6em 0 0.3em;
	padding-top: 0.6em;
	border-top: 1px solid var(--rule);
	max-width: var(--measure);
	font-variant-numeric: tabular-nums;
}
.about .entry > h3 + p,
.about .entry > p { margin-bottom: 0.4em; }

/* ---------- Contact ---------- */
.contact { margin-top: 32px; }
.contact__form { display: grid; gap: 20px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 600; }
.field input,
.field textarea {
	font: inherit;
	color: var(--ink);
	background: var(--paper);
	border: 1px solid var(--rule);
	border-radius: 0;
	padding: 12px 14px;
	width: 100%;
}
.field input:hover,
.field textarea:hover { border-color: var(--graphite); }
.field--error input,
.field--error textarea { border-color: #b3261e; }
.field__error { margin: 0; color: #b3261e; font-size: 0.875rem; }
@media (prefers-color-scheme: dark) {
	.field--error input, .field--error textarea { border-color: #f2b8b5; }
	.field__error { color: #f2b8b5; }
}
.contact__trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.contact__notice { padding: 12px 16px; margin: 0 0 20px; border-left: 3px solid var(--ink); background: var(--paper); }
.contact__notice--error { border-left-color: #b3261e; }

.button {
	justify-self: start;
	display: inline-block;
	font: inherit;
	font-weight: 600;
	padding: 12px 22px;
	background: var(--ink);
	color: var(--wall);
	border: 1px solid var(--ink);
	border-radius: 0;
	cursor: pointer;
	text-decoration: none;
}
.button:hover { background: transparent; color: var(--ink); }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; }
}