/* =========================================================================
   Angelo Simoes — styles du site
   DA « Tribune » : sombre, condensée, un seul accent (--accent).
   Sommaire : polices · jetons · base · boutons · en-tête · hero · sections ·
   cartes · filtres · affiche d'album · galerie · lightbox · vidéo · textes ·
   à propos · contact · pied de page · 404 · mouvement
   ========================================================================= */

/* ---------- Polices (auto-hébergées, latin) ---------- */
@font-face {
	font-family: "Big Shoulders Display";
	src: url(../fonts/big-shoulders-display-latin.woff2) format("woff2");
	font-weight: 600 900;
	font-style: normal;
	font-display: swap;
	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: "Inter";
	src: url(../fonts/inter-latin.woff2) format("woff2");
	font-weight: 400 600;
	font-style: normal;
	font-display: swap;
	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;
}

/* ---------- Jetons ---------- */
:root {
	/* Accent : changer ces deux lignes suffit. --accent-ink = version lisible sur fond clair. */
	--accent: #d4ff3a;
	--accent-ink: #4f6400;
	/* Autres accents validés : orange #ff5b2e / #b23000 · bleu glace #7cc8ff / #0b5e99 */
	--on-accent: #0b0b0c;

	--font-display: "Big Shoulders Display", "Arial Narrow", sans-serif;
	--font-body: "Inter", system-ui, -apple-system, sans-serif;
	--gutter: clamp(16px, 4vw, 56px);
	--header-h: 72px;
	--radius: 2px;
	--ease: cubic-bezier(.2, .7, .1, 1);
	--light: #f2eee6; /* texte sur photo, identique dans les deux thèmes */

	color-scheme: dark;
	--bg: #0b0b0c;
	--surface: #151517;
	--line: #2a2a2d;
	--text: #edeae3;
	--muted: #9c978d;
	--link: var(--accent);
}
:root[data-theme="light"] {
	color-scheme: light;
	--bg: #f2eee6;
	--surface: #e8e2d6;
	--line: #d3ccbe;
	--text: #16150f;
	--muted: #5e5a52;
	--link: var(--accent-ink);
}
/* Zones toujours sombres (photo en fond) : l'accent vif y reste lisible. */
.hero, .poster, .facade, .card-info, .lightbox { --link: var(--accent); }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--bg);
	color: var(--text);
	font: 400 1rem/1.6 var(--font-body);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3 {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 800;
	line-height: .88;
	letter-spacing: .005em;
	text-transform: uppercase;
	text-wrap: balance;
}
p { text-wrap: pretty; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
::selection { background: var(--accent); color: var(--on-accent); }

.skip { position: absolute; left: -9999px; }
.skip:focus { left: 16px; top: 16px; z-index: 100; padding: .6em 1em; background: var(--accent); color: var(--on-accent); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.wrap { width: 100%; max-width: 1600px; margin-inline: auto; padding-inline: var(--gutter); }
.eyebrow { margin: 0; font: 600 .75rem/1.3 var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.accent { color: var(--link); font-style: normal; }
[hidden] { display: none !important; }

/* ---------- Boutons et liens ---------- */
.btn {
	display: inline-flex; align-items: center; justify-content: center; gap: .6em;
	min-height: 48px; padding: .8em 1.4em;
	border: 1px solid currentColor; border-radius: var(--radius);
	background: transparent; color: inherit; cursor: pointer;
	font: 600 .875rem/1 var(--font-body); letter-spacing: .08em; text-transform: uppercase; text-decoration: none;
	transition: background-color .3s, color .3s, border-color .3s;
}
.btn:hover { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn--accent { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.btn--accent:hover { background: var(--light); border-color: var(--light); color: #0b0b0c; }
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.link-arrow { font-size: .8125rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; color: var(--link); }
.link-arrow::after { content: " →"; transition: margin-left .3s var(--ease); }
.link-arrow:hover::after { margin-left: .3em; }
.icon-btn { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius); background: none; color: inherit; cursor: pointer; font: 600 .75rem var(--font-body); letter-spacing: .1em; text-decoration: none; }
.icon-btn svg { width: 20px; height: 20px; }

/* ---------- En-tête ---------- */
.site-header {
	position: fixed; inset: 0 0 auto; z-index: 30;
	display: flex; align-items: center; justify-content: space-between; gap: 1rem;
	height: var(--header-h); padding-inline: var(--gutter);
	background: var(--bg); color: var(--text); border-bottom: 1px solid var(--line);
	transition: background-color .4s, color .4s, border-color .4s;
}
/* Au-dessus d'une photo (accueil, album) : transparent, puis plein au défilement (main.js). */
.has-hero .site-header:not(.is-solid) { background: linear-gradient(rgb(0 0 0 / .55), transparent); color: var(--light); border-color: transparent; }
.logo { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; line-height: 1; letter-spacing: .02em; text-transform: uppercase; text-decoration: none; white-space: nowrap; }
.logo span { color: var(--accent); }
.nav ul { display: flex; gap: 1.8rem; margin: 0; padding: 0; list-style: none; }
.nav a {
	padding-block: .5em; text-decoration: none;
	font-size: .8125rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
	background: linear-gradient(var(--accent), var(--accent)) left bottom / 0 1px no-repeat;
	transition: background-size .4s var(--ease);
}
.nav a:hover, .nav [aria-current], .nav .current-menu-ancestor > a { background-size: 100% 1px; }
.tools { display: flex; align-items: center; gap: .25rem; }
.theme-toggle .i-moon, [data-theme="light"] .theme-toggle .i-sun { display: none; }
[data-theme="light"] .theme-toggle .i-moon { display: block; }
.menu-btn { display: none; }
@media (max-width: 899px) {
	.menu-btn { display: grid; }
	.nav { display: none; }
	.nav.is-open {
		display: block; position: fixed; inset: var(--header-h) 0 auto;
		padding: .5rem var(--gutter) 1.5rem; background: var(--bg); color: var(--text); border-bottom: 1px solid var(--line);
	}
	.nav.is-open ul { flex-direction: column; gap: 0; }
	.nav.is-open a { display: block; padding-block: .9em; font-size: 1rem; }
}
main { display: block; }
body:not(.has-hero) main { padding-top: var(--header-h); }

/* ---------- Hero (accueil) ---------- */
.hero { position: relative; display: grid; align-items: end; min-height: 100svh; overflow: hidden; background: #000; color: var(--light); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media::after {
	content: ""; position: absolute; inset: 0;
	background:
		linear-gradient(to top, rgb(8 8 9 / .92), rgb(8 8 9 / .55) 45%, rgb(8 8 9 / .15) 75%),
		linear-gradient(to right, rgb(8 8 9 / .55), transparent 60%);
}
.hero-content { position: relative; max-width: 1100px; padding: 0 var(--gutter) clamp(40px, 8vh, 96px); }
.hero .eyebrow { color: rgb(242 238 230 / .78); }
.hero h1 { margin: .35em 0 .3em; font-size: clamp(3.4rem, 11vw, 9.5rem); }
.hero p:not(.eyebrow) { max-width: 34rem; margin: 0 0 2rem; font-size: clamp(1rem, 1.4vw, 1.15rem); color: rgb(242 238 230 / .86); }

/* === Fin du CSS critique : tout ce qui précède est écrit dans le HTML de l'accueil (inc/front.php) === */

/* ---------- Sections ---------- */
.section { padding-block: clamp(64px, 10vw, 140px); }
.section + .section--tight, .section--flush { padding-top: 0; }
.section-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem; margin-bottom: clamp(24px, 4vw, 48px); }
.section-head h2 { margin-top: .2em; font-size: clamp(2.2rem, 5.5vw, 4.5rem); }
.page-head { padding-block: clamp(40px, 7vw, 96px) clamp(24px, 4vw, 48px); }
.page-head h1 { margin: .15em 0 .25em; font-size: clamp(3rem, 10vw, 8rem); }
.page-head p:not(.eyebrow) { max-width: 40rem; margin: 0; color: var(--muted); font-size: 1.0625rem; }

/* ---------- Cartes ---------- */
.card { position: relative; display: block; overflow: hidden; background: var(--surface); color: var(--light); text-decoration: none; }
.card-media { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.card:hover .card-media img, .card:focus-visible .card-media img { transform: scale(1.045); }
.card-info { position: absolute; inset: auto 0 0; padding: 20px; background: linear-gradient(to top, rgb(0 0 0 / .85), transparent); }
.card-info h3 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); }
.card-meta {
	display: flex; flex-wrap: wrap; gap: .25rem .75rem; margin: .5rem 0 0;
	font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(242 238 230 / .78);
	opacity: 0; transform: translateY(6px); transition: opacity .5s, transform .5s var(--ease);
}
.card:hover .card-meta, .card:focus-visible .card-meta { opacity: 1; transform: none; }
@media (hover: none) { .card-meta { opacity: 1; transform: none; } }
.tag { color: var(--accent); }
.card-placeholder { display: grid; place-items: center; height: 100%; padding: 1rem; color: var(--muted); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; text-align: center; border: 1px dashed var(--line); }

.selection-grid { display: grid; gap: 12px; }
@media (min-width: 760px) {
	.selection-grid { grid-template-columns: 1.35fr 1fr 1fr; }
	.selection-grid > :first-child { grid-row: span 2; }
	.selection-grid > :first-child .card-media { aspect-ratio: auto; height: 100%; }
	.selection-grid > :first-child h3 { font-size: clamp(2rem, 4vw, 3.4rem); }
	.selection-grid > :nth-child(4):last-child { grid-column: span 2; }
	.selection-grid > :nth-child(4):last-child .card-media { aspect-ratio: 2 / 1; }
	.selection-grid > :nth-child(2):last-child, .selection-grid > :nth-child(3):last-child { grid-row: span 2; } /* 2 ou 3 épinglés */
}
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
@media (min-width: 900px) { .grid { grid-template-columns: repeat(3, 1fr); } }
.grid--2 { grid-template-columns: 1fr; }
@media (min-width: 760px) { .grid--2 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 479px) { .grid .card-info { padding: 12px; } .grid .card-info h3 { font-size: 1.25rem; } }
.card--more { display: grid; place-items: center; aspect-ratio: 4 / 5; padding: 1rem; background: none; border: 1px solid var(--line); color: var(--text); text-align: center; }
.card--more strong { display: block; font: 800 clamp(3rem, 7vw, 6rem)/1 var(--font-display); color: var(--link); }

/* ---------- Services ---------- */
.services { border-top: 1px solid var(--line); }
.services ol { display: grid; margin: 0; padding: 0; list-style: none; counter-reset: s; }
@media (min-width: 760px) { .services ol { grid-template-columns: repeat(4, 1fr); } }
.services li { padding: 28px 24px 28px 0; border-bottom: 1px solid var(--line); counter-increment: s; }
@media (min-width: 760px) {
	.services li { padding-left: 24px; border-bottom: 0; border-right: 1px solid var(--line); }
	.services li:first-child { padding-left: 0; }
	.services li:last-child { border-right: 0; }
}
.services li::before { content: "0" counter(s); display: block; margin-bottom: 1rem; font: 600 .75rem var(--font-body); letter-spacing: .14em; color: var(--link); }
.services h3 { margin-bottom: .6rem; font-size: clamp(1.4rem, 2vw, 1.8rem); }
.services p { margin: 0; color: var(--muted); font-size: .9375rem; }

/* ---------- Filtres (Photos, Design & Web) ---------- */
.filters { display: grid; gap: 12px; margin-bottom: clamp(24px, 4vw, 40px); }
.filter-group { display: flex; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-block: 2px; }
.filter-group::-webkit-scrollbar { display: none; }
.filter-group > span { flex: none; min-width: 7.5em; font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.chip {
	flex: none; min-height: 36px; padding: .45em 1em; border: 1px solid var(--line); border-radius: 999px;
	background: none; cursor: pointer; font-size: .8125rem; white-space: nowrap; transition: background-color .25s, color .25s, border-color .25s;
}
.chip:hover { border-color: var(--text); }
.chip[aria-pressed="true"] { background: var(--text); border-color: var(--text); color: var(--bg); }
.results { min-height: 1.6em; margin: 0 0 16px; color: var(--muted); font-size: .875rem; } /* place réservée : pas de décalage */
html:not(.js) .filters, html:not(.js) .results { display: none; } /* filtres inutiles sans JS */
.more { display: flex; justify-content: center; margin-top: clamp(32px, 5vw, 56px); }
.empty { padding-block: 48px; color: var(--muted); }

/* ---------- Affiche d'album ---------- */
.poster { position: relative; display: grid; align-items: end; min-height: 88svh; overflow: hidden; background: #000; color: var(--light); }
.poster > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; }
.poster::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgb(8 8 9 / .95), rgb(8 8 9 / .2) 70%); }
.poster-inner { position: relative; z-index: 1; width: 100%; max-width: 1600px; margin-inline: auto; padding: calc(var(--header-h) + 48px) var(--gutter) clamp(32px, 6vw, 72px); }
.poster .eyebrow { color: var(--accent); }
.matchup { display: grid; gap: .1em; margin: .25em 0 .35em; font-size: clamp(3.4rem, 12vw, 11rem); }
.matchup--solo { font-size: clamp(2.8rem, 9vw, 8rem); }
.matchup .vs { display: flex; align-items: center; gap: .4em; font-size: .38em; color: var(--accent); }
.matchup .vs::before, .matchup .vs::after { content: ""; flex: 0 0 1.2em; height: 2px; background: currentColor; }
.poster-meta { display: flex; flex-wrap: wrap; gap: .75rem 2.5rem; margin: 0; font-size: .8125rem; letter-spacing: .12em; text-transform: uppercase; color: rgb(242 238 230 / .85); }
.poster-meta dt { font-size: .6875rem; color: rgb(242 238 230 / .55); }
.poster-meta dd { margin: 0; }
.album-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 24px; border-bottom: 1px solid var(--line); }
.album-bar .hint { display: block; margin-top: .5rem; font-size: .8125rem; color: var(--muted); }
.album-bar .hint code { padding: .1em .4em; background: var(--surface); border-radius: var(--radius); font-size: .95em; color: var(--text); user-select: all; }

/* ---------- Galerie justifiée (ordre conservé, sans JS, sans saut de mise en page) ---------- */
.gallery { --row: 180px; display: flex; flex-wrap: wrap; gap: 8px; padding-block: 12px clamp(48px, 8vw, 120px); }
@media (min-width: 600px) { .gallery { --row: 260px; gap: 12px; } }
@media (min-width: 1100px) { .gallery { --row: 340px; } }
.gallery::after { content: ""; flex-grow: 1e6; } /* la dernière ligne ne s'étire pas */
.gallery a { position: relative; flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--row)); /* ×100 : une somme de flex-grow < 1 ne remplirait pas la ligne */ display: block; overflow: hidden; background: var(--surface); cursor: zoom-in; }
.gallery img { width: 100%; height: auto; aspect-ratio: var(--r); object-fit: cover; transition: transform 1.2s var(--ease); }
.gallery a:hover img { transform: scale(1.03); }

.pager { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line); }
.pager a { padding-block: clamp(24px, 4vw, 48px); text-decoration: none; }
.pager a[rel="next"] { grid-column: 2; padding-left: 16px; border-left: 1px solid var(--line); text-align: right; }
.pager span { display: block; margin-bottom: .5rem; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager strong { font: 800 clamp(1.2rem, 3vw, 2.4rem)/1 var(--font-display); text-transform: uppercase; }

/* ---------- Lightbox (<dialog> natif : focus piégé et Échap gérés par le navigateur) ---------- */
.lightbox { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #060607; color: var(--light); }
.lightbox[open] { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox::backdrop { background: #060607; }
.lb-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px 8px 20px; font-size: .8125rem; letter-spacing: .12em; }
.lb-stage { position: relative; display: grid; place-items: center; min-height: 0; padding: 0 16px; touch-action: pan-y; }
.lb-stage img { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0 16px; object-fit: contain; } /* toujours entière à l'écran */
.lb-nav { position: absolute; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 56px; height: 56px; border: 1px solid rgb(242 238 230 / .3); border-radius: 50%; background: rgb(0 0 0 / .4); color: inherit; cursor: pointer; }
.lb-nav svg { width: 22px; height: 22px; }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (hover: none) { .lb-nav { display: none; } }
.lb-caption { margin: 0; padding: 12px 16px 20px; text-align: center; font-size: .8125rem; color: rgb(242 238 230 / .72); }

/* ---------- Vidéo en façade (iframe chargée au clic) ---------- */
.facade { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; padding: 0; border: 0; background: #000; color: var(--light); text-align: left; cursor: pointer; text-decoration: none; }
.facade img { width: 100%; height: 100%; object-fit: cover; opacity: .72; transition: opacity .6s, transform 1.4s var(--ease); }
.facade:hover img { opacity: .85; transform: scale(1.02); }
.facade iframe, .facade video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.facade video { object-fit: contain; }
.play { position: absolute; left: 50%; top: 50%; translate: -50% -50%; display: grid; place-items: center; width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%; background: var(--accent); color: var(--on-accent); }
.play svg { width: 36%; height: 36%; margin-left: 6%; }
.facade-text { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(20px, 4vw, 56px); }
.facade-text .eyebrow { color: rgb(242 238 230 / .78); }
.facade-text h2, .facade-text h3 { margin-top: .2em; font-size: clamp(1.6rem, 5vw, 5rem); }
.video-band .facade { max-height: 86svh; }
@media (max-width: 759px) { .video-band .facade { aspect-ratio: 4 / 5; } }
.video-grid { display: grid; gap: 12px; padding-bottom: clamp(64px, 10vw, 140px); }
@media (min-width: 760px) { .video-grid { grid-template-columns: 1fr 1fr; } }
.video-grid .facade-text :is(h2, h3) { font-size: clamp(1.4rem, 2.6vw, 2.2rem); }
/* Fichier vidéo du site : la façade prend le format réel (une vidéo verticale reste verticale, sans dépasser l'écran). */
.facade[style*="--ar"] { aspect-ratio: var(--ar); width: min(100%, calc(86svh * var(--ar))); margin-inline: auto; }
.wrap .video-band { margin-bottom: clamp(24px, 4vw, 48px); }
.wrap .wrap { padding-inline: 0; } /* grille de vidéos dans une page de projet : pas de double marge */

/* ---------- Textes (pages légales, projet, à propos) ---------- */
.prose { max-width: 44rem; font-size: 1.0625rem; }
.prose > * + * { margin-top: 1em; }
.prose h2 { margin-top: 2.2em; font-size: clamp(1.8rem, 4vw, 2.6rem); }
.prose h3 { margin-top: 1.8em; font: 600 1.125rem/1.3 var(--font-body); text-transform: none; letter-spacing: 0; }
.prose a { color: var(--link); text-underline-offset: .2em; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .35em; }
.prose p, .prose li { color: color-mix(in srgb, var(--text) 82%, var(--muted)); }
.prose strong { color: var(--text); font-weight: 600; }

/* ---------- Projet ---------- */
.project-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 20px 32px; margin: 0 0 clamp(32px, 5vw, 56px); padding-block: 24px; border-block: 1px solid var(--line); }
.project-meta dt { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.project-meta dd { margin: .3em 0 0; }
.project-meta a { color: var(--link); }

/* ---------- À propos ---------- */
.about { display: grid; gap: clamp(28px, 5vw, 80px); align-items: start; }
@media (min-width: 900px) { .about { grid-template-columns: 5fr 7fr; } .about > :first-child { position: sticky; top: calc(var(--header-h) + 24px); } }
.about--teaser { align-items: center; }
.about--teaser > :first-child { position: static; }
.portrait { aspect-ratio: 4 / 5; overflow: hidden; background: var(--surface); }
.portrait img { width: 100%; height: 100%; object-fit: cover; }
.about--teaser h2 { margin: .35em 0 .5em; font-size: clamp(2.2rem, 5vw, 4.2rem); }
.about-page { padding-top: clamp(40px, 7vw, 96px); }
.about-page h1 { margin: .2em 0 .5em; font-size: clamp(2.6rem, 5.5vw, 4.8rem); }
.about-page .actions { margin-bottom: 2.5rem; }
.about-page .socials { margin-top: 24px; }
.about-text { color: var(--muted); max-width: 38rem; }
.facts { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin: 2rem 0; padding: 0; list-style: none; }
.facts b { display: block; font: 800 clamp(2.2rem, 4vw, 3.2rem)/1 var(--font-display); color: var(--text); }
.facts span { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
/* CV : un h3 = un poste / diplôme, le paragraphe qui suit = dates et lieu. */
.cv h2 { font-size: clamp(2rem, 4.5vw, 3.2rem); }
.cv h3 { position: relative; margin-top: 1.6em; padding-left: 24px; }
.cv h3::before { content: ""; position: absolute; left: 0; top: .45em; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); }
.cv h3 + p { margin-top: .2em; padding-left: 24px; font-size: .875rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.cv h3 + p + ul { padding-left: 42px; }
.cv ul.tags, .cv h2 + ul { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.cv h2 + ul li { margin: 0; padding: .35em .9em; border: 1px solid var(--line); border-radius: 999px; font-size: .875rem; color: var(--text); }

/* ---------- Contact ---------- */
.contact { display: grid; gap: clamp(32px, 6vw, 96px); }
@media (min-width: 900px) { .contact { grid-template-columns: 7fr 4fr; } }
.form { display: grid; gap: 20px; }
@media (min-width: 600px) { .form { grid-template-columns: 1fr 1fr; } .form .full { grid-column: 1 / -1; } }
.field label { display: block; margin-bottom: 6px; font-size: .75rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.field input, .field select, .field textarea {
	width: 100%; min-height: 52px; padding: .8em 1em;
	border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); color: var(--text); font: inherit;
	transition: border-color .25s;
}
.field textarea { min-height: 180px; resize: vertical; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: var(--muted); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--accent); outline-offset: 0; border-color: transparent; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* piège à robots */
.notice { padding: 16px 20px; border-left: 3px solid var(--accent); background: var(--surface); }
.notice--error { border-color: #ff5b5b; }
.page-head .intro, .page-head .intro p { color: var(--muted); }
.contact aside .eyebrow { margin-bottom: 12px; }
.form-legal { margin: 0; font-size: .8125rem; color: var(--muted); }
.form-legal a { color: inherit; }
.socials { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.socials a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--line); text-decoration: none; font: 800 clamp(1.4rem, 3vw, 2rem)/1 var(--font-display); text-transform: uppercase; }
.socials a span { font: 400 .875rem var(--font-body); text-transform: none; color: var(--muted); }
.socials a:hover { color: var(--link); }

/* ---------- Appel à l'action ---------- */
.cta { text-align: center; border-top: 1px solid var(--line); }
.cta h2 { margin: .3em 0 .4em; font-size: clamp(3rem, 10vw, 8.5rem); }
.cta p:not(.eyebrow) { max-width: 34rem; margin: 0 auto 2rem; color: var(--muted); }
.cta .actions { justify-content: center; }

/* ---------- Pied de page ---------- */
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 32px 40px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); }
.site-footer ul { display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; margin: 0; padding: 0; list-style: none; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--text); }
.site-footer p { margin: 0; }

/* ---------- 404 ---------- */
.error-404 h1 { font-size: clamp(4rem, 16vw, 13rem); }
.error-404 .actions { margin-bottom: clamp(40px, 6vw, 72px); }

/* =========================================================================
   MOUVEMENT — règle d'or : un seul effet marquant à l'écran à la fois.
   Tout est coupé si le visiteur a demandé moins d'animations (prefers-reduced-motion).
   ========================================================================= */

/* ---------- Hero : un seul mouvement, au chargement ---------- */
@keyframes hero-in { from { transform: scale(1.08); opacity: .4; } to { transform: none; opacity: 1; } }
.hero-media img { animation: hero-in 2.6s var(--ease) both; }

/* ---------- Apparition au défilement ---------- */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: calc(var(--i, 0) * 70ms); }
.js .reveal.in { opacity: 1; transform: none; }

/* ---------- Transitions entre pages (View Transitions) ----------
   Chrome / Edge 126+, Safari 18.2+. Ailleurs : navigation classique, rien ne casse.
   L'activation (@view-transition) est écrite dans le <head> (inc/front.php), pas ici : voir la note là-bas.
   La couverture cliquée (nommée par main.js au départ) s'agrandit jusqu'à l'affiche de l'album. */
.site-header { view-transition-name: header; }
::view-transition-group(*) { animation-duration: .45s; animation-timing-function: var(--ease); } /* ex. cartes filtrées (filters.js) */
::view-transition-group(root), ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(album-cover) { animation-duration: .6s; }
::view-transition-old(album-cover), ::view-transition-new(album-cover) { height: 100%; object-fit: cover; }

/* ---------- Visionneuse : ouverture / fermeture en fondu, photo qui suit le doigt ---------- */
.lightbox { opacity: 0; transition: opacity .3s, overlay .3s allow-discrete, display .3s allow-discrete; }
.lightbox[open] { opacity: 1; }
.lb-stage img { transition: opacity .25s, transform .45s var(--ease); user-select: none; -webkit-user-drag: none; }
.lb-stage img.is-loading { opacity: 0; }
.lb-stage.is-dragging img { transition: none; }
@starting-style {
	.lightbox[open] { opacity: 0; }
	.lightbox[open] .lb-stage img { transform: scale(.96); }
}

/* ---------- Curseur contextuel : étiquette près de la souris au-dessus des photos ----------
   Le curseur du système reste affiché. Souris uniquement (main.js), jamais au tactile. */
.cursor {
	position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none;
	translate: -50% -50%; padding: .7em 1.1em; border-radius: 999px;
	background: var(--accent); color: var(--on-accent);
	font: 600 .6875rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; white-space: nowrap;
	opacity: 0; scale: .5; transition: opacity .25s, scale .35s var(--ease);
}
.cursor.is-on { opacity: 1; scale: 1; }

/* ---------- Moins d'animations demandé : tout s'arrête ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
	.js .reveal { opacity: 1; transform: none; }
	.cursor { display: none; }
}