/* ------------------------------------------------------------------
   Police des titres : The Seasons
   C'est une police payante. Déposez les fichiers sous licence web
   dans /fonts (TheSeasons-Regular.woff2 / .woff) : elle s'affiche
   automatiquement. Sans ces fichiers, Playfair Display prend le relais.
------------------------------------------------------------------- */
@font-face {
  font-family: "The Seasons";
  src: local("The Seasons"), local("TheSeasons-Regular"),
       url("../fonts/TheSeasons-Regular.woff2") format("woff2"),
       url("../fonts/TheSeasons-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --bg: #000;
  --fg: #f4f1ec;
  --muted: #9a958e;
  --line: rgba(244, 241, 236, 0.22);
  --font-title: "The Seasons", "Playfair Display", Georgia, serif;
  --font-body: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --rail: 72px;
  --pad: clamp(20px, 5vw, 72px);
  --header: 60px;

  /* Lambrequin : bande pleine et pendants festonnés (triangle, volutes et losange découpés), d'après le modèle fourni */
  --lambrequin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 150'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='140' height='150' fill='white'/%3E%3Cpath fill='black' d='M57 26H83L70 42Z M70 86L77 99L70 114L63 99Z'/%3E%3Cg fill='none' stroke='black' stroke-width='7' stroke-linecap='round'%3E%3Cpath d='M52 34C40 30 28 38 30 50C32 60 44 62 48 54C50 48 44 45 41 49 M34 60C42 70 50 72 56 80'/%3E%3Cpath transform='matrix(-1 0 0 1 140 0)' d='M52 34C40 30 28 38 30 50C32 60 44 62 48 54C50 48 44 45 41 49 M34 60C42 70 50 72 56 80'/%3E%3C/g%3E%3C/mask%3E%3C/defs%3E%3Cg mask='url(%23m)'%3E%3Crect width='140' height='18'/%3E%3Cpath d='M10 18C20 18 20 22 20 28C14 28 10 38 22 42C8 50 10 76 30 80C20 86 26 106 44 108C38 114 44 128 58 130C64 132 66 142 70 148C74 142 76 132 82 130C96 128 102 114 96 108C114 106 120 86 110 80C130 76 132 50 118 42C130 38 126 28 120 28C120 22 120 18 130 18Z'/%3E%3C/g%3E%3C/svg%3E");
}

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

html { scroll-behavior: smooth; scroll-padding-top: var(--header); }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

/* ---------- Titres ---------- */
.title {
  font-family: var(--font-title);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin: 0 0 0.9em;
  width: fit-content;
  max-width: 100%;
}

h1.title { font-size: clamp(48px, 9vw, 116px); }
h2.title { font-size: clamp(38px, 5.6vw, 72px); }
h3.title {
  font-size: clamp(24px, 2.4vw, 30px);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  margin-bottom: 0.8em;
}

/* ---------- En-tête ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--header);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--pad);
  background: rgba(0, 0, 0, 0.92);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.brand {
  font-family: var(--font-title);
  font-size: 22px;
  text-decoration: none;
  white-space: nowrap;
}
.site-header nav { display: flex; gap: clamp(14px, 3vw, 36px); }
.site-header nav a {
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--muted);
  transition: color 0.2s;
}
.site-header nav a:hover, .site-header nav a:focus-visible { color: var(--fg); }

/* ---------- Couverture ---------- */
.hero {
  position: relative;
  height: min(calc(100svh - var(--header)), 860px);
  min-height: 520px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.hero-collage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.45fr;
  grid-template-rows: 1fr 1.5fr 1fr;
}
.hero-collage img { width: 100%; height: 100%; object-fit: cover; }
.hero-collage .c1 { grid-area: 1 / 1 / 3 / 2; object-position: 50% 40%; }
.hero-collage .c2 { grid-area: 1 / 2 / 2 / 3; object-position: 40% 60%; }
.hero-collage .c3 { grid-area: 1 / 3 / 3 / 4; object-position: 50% 70%; }
.hero-collage .c4 { grid-area: 2 / 2 / 4 / 3; object-position: 50% 60%; }
.hero-collage .c5 { grid-area: 3 / 1 / 4 / 2; object-position: 80% 50%; }
.hero-collage .c6 { grid-area: 3 / 3 / 4 / 4; object-position: 30% 88%; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.35) 70%),
    linear-gradient(0deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 45%);
}
.hero-text {
  position: absolute;
  z-index: 1;
  left: calc(var(--pad) + var(--rail));
  right: var(--pad);
  bottom: clamp(40px, 12vh, 120px);
}
.hero-text .title { margin-bottom: 0.25em; }
.hero-sub {
  margin: 0;
  font-size: clamp(16px, 1.6vw, 20px);
  letter-spacing: 0.04em;
}

/* ---------- Blocs numérotés (rail comme dans le portfolio) ---------- */
.block {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  border-bottom: 1px solid var(--line);
  max-width: 1440px;
  margin: 0 auto;
}
.rail {
  border-right: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.block-body { padding: clamp(56px, 9vw, 120px) var(--pad); }

.text p { max-width: 62ch; margin: 0 0 1.2em; }
.text p:last-child { margin-bottom: 0; }
.text.wide p { max-width: 78ch; }

/* Origines du regard */
.origines {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 88px);
  align-items: center;
}
.portrait { margin: 0; }
.portrait img { width: 100%; filter: grayscale(1); }

/* Sommaire des œuvres */
.toc {
  list-style: none;
  counter-reset: toc;
  margin: 0;
  padding: 0;
  columns: 2 260px;
  column-gap: 48px;
}
.toc li {
  counter-increment: toc;
  break-inside: avoid;
  border-top: 1px solid var(--line);
}
.toc a {
  display: flex;
  gap: 18px;
  padding: 12px 0;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 15px;
  font-weight: 400;
  transition: color 0.2s, padding-left 0.2s;
}
.toc a::before {
  content: counter(toc, decimal-leading-zero);
  color: var(--muted);
  font-size: 12px;
  padding-top: 2px;
  min-width: 20px;
}
.toc a:hover, .toc a:focus-visible { padding-left: 8px; color: #fff; }

/* ---------- Œuvres ---------- */
.work-body {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: center;
}
.work-body.landscape { grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr); }
.work:nth-of-type(even) .work-image { order: 2; }
.work:nth-of-type(even) .work-body { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.work:nth-of-type(even) .work-body.landscape { grid-template-columns: minmax(0, 1fr) minmax(0, 1.9fr); }
.work-caption { max-width: 440px; }
.work:nth-of-type(even) .work-caption { justify-self: end; width: 100%; }

.work-image {
  display: block;
  justify-self: center;
  cursor: zoom-in;
}
.work-image img {
  width: auto;
  max-height: min(78vh, 900px);
  transition: opacity 0.3s;
}
.work-image:hover img { opacity: 0.88; }

.meta {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  color: var(--fg);
}
/* ---------- Séparations entre les œuvres ---------- */
.work, .interlude { border-bottom: 0; }
.sep-lambrequin {
  max-width: 1440px;
  margin: 0 auto;
  height: 64px;
  background: var(--fg);
  -webkit-mask-image: var(--lambrequin);
          mask-image: var(--lambrequin);
  -webkit-mask-size: auto 100%;
          mask-size: auto 100%;
  -webkit-mask-position: left top;
          mask-position: left top;
  -webkit-mask-repeat: round no-repeat;
          mask-repeat: round no-repeat;
}
.sep-line {
  max-width: 1440px;
  margin: 0 auto;
  border: 0;
  border-top: 1px solid var(--line);
}
.interlude .block-body { padding-top: clamp(48px, 7vw, 96px); padding-bottom: clamp(48px, 7vw, 96px); }
.interlude p {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 300;
  text-align: center;
  text-wrap: balance;
}
/* Texte toujours centré ; le bloc alterne taille, opacité et position (gauche, droite, milieu) */
.interlude:nth-of-type(3n+1) p {
  max-width: 30ch;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.3;
  opacity: 1;
}
.interlude:nth-of-type(3n+2) p {
  max-width: 44ch;
  margin-left: auto;
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.6;
  opacity: 0.6;
}
.interlude:nth-of-type(3n+3) p {
  max-width: 36ch;
  margin: 0 auto;
  font-size: clamp(20px, 2.2vw, 28px);
  line-height: 1.45;
  opacity: 0.82;
}

.eyebrow {
  margin: 0 0 0.9em;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- Contact ---------- */
.contact { list-style: none; margin: 0; padding: 0; }
.contact li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 24px;
  padding: 20px 0;
  border-top: 1px solid var(--line);
}
.contact li:last-child { border-bottom: 1px solid var(--line); }
.contact .label {
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact a {
  font-family: var(--font-title);
  font-size: clamp(22px, 3.4vw, 40px);
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact a:hover, .contact a:focus-visible { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; }

.site-footer {
  padding: 28px var(--pad);
  font-size: 13px;
  color: var(--muted);
  text-align: center;
}

/* ---------- Visionneuse ---------- */
.lightbox {
  width: 100vw;
  height: 100vh;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: rgba(0, 0, 0, 0.96);
  color: var(--fg);
}
.lightbox[open] { display: flex; align-items: center; justify-content: center; }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.9); }
.lightbox figure { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lightbox img { max-width: calc(100vw - 140px); max-height: calc(100vh - 110px); width: auto; }
.lightbox figcaption { font-family: var(--font-title); font-size: 20px; text-transform: uppercase; letter-spacing: 0.03em; }
.lightbox button {
  position: absolute;
  background: none;
  border: 0;
  color: var(--fg);
  font-size: 44px;
  line-height: 1;
  padding: 12px 18px;
  cursor: pointer;
  opacity: 0.7;
}
.lightbox button:hover, .lightbox button:focus-visible { opacity: 1; }
.lb-close { top: 8px; right: 8px; }
.lb-prev { left: 4px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 4px; top: 50%; transform: translateY(-50%); }

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

/* ---------- Mobile ---------- */
@media (max-width: 820px) {
  :root { --rail: 40px; --header: 54px; }
  body { font-size: 16px; }
  .brand { font-size: 19px; }
  .site-header nav a { font-size: 11px; letter-spacing: 0.08em; }

  .hero-collage { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr 1fr; }
  .hero-collage .c1 { grid-area: 1 / 1 / 3 / 2; }
  .hero-collage .c2 { grid-area: 1 / 2 / 2 / 3; }
  .hero-collage .c4 { grid-area: 2 / 2 / 4 / 3; }
  .hero-collage .c5 { grid-area: 3 / 1 / 4 / 2; }
  .hero-collage .c3, .hero-collage .c6 { display: none; }
  .hero-text { left: var(--pad); }

  .rail { font-size: 11px; }
  .sep-lambrequin { height: 40px; }
  .block-body { padding: 56px 20px; }
  .origines, .work-body, .work-body.landscape,
  .work:nth-of-type(even) .work-body,
  .work:nth-of-type(even) .work-body.landscape { grid-template-columns: minmax(0, 1fr); }
  .work:nth-of-type(even) .work-caption { justify-self: start; }
  .work:nth-of-type(even) .work-image { order: 0; }
  .work-image img { max-height: none; width: 100%; }

  .lightbox img { max-width: 100vw; max-height: calc(100vh - 120px); }
  .lb-prev, .lb-next { top: auto; bottom: 8px; transform: none; }
}

@media (max-width: 420px) {
  .site-header { gap: 10px; }
  .site-header nav { gap: 12px; }
  .site-header nav a { letter-spacing: 0.04em; }
}