/* ─── THÈMES ─────────────────────────────────────────────────────────────── */
:root,
[data-theme="sombre"] {
  --bg: #0b0b0c;
  --fg: #ecebe6;
  --muted: #8a8882;
  --line: rgba(236, 235, 230, .14);
  --accent: #c8b89a;
  --seal: #c8553d;
  --filet: rgba(200, 184, 154, .45);
  --radius: 14px;
}
[data-theme="clair"] {
  --bg: #fafaf8;
  --fg: #141414;
  --muted: #84827d;
  --line: rgba(20, 20, 20, .13);
  --accent: #8c6f4a;
  --seal: #a8402d;
  --filet: rgba(20, 20, 20, .22);
}
[data-theme="sable"] {
  --bg: #DED4C3;
  --fg: #26221d;
  --muted: #7d7466;
  --line: rgba(38, 34, 29, .18);
  --accent: #8a3d24;
  --seal: #a8402d;
  --filet: rgba(38, 34, 29, .32);
}
[data-theme="grenat"] {
  --bg: #3B0C00;
  --fg: #f3e8dc;
  --muted: #b3907f;
  --line: rgba(243, 232, 220, .16);
  --accent: #e6a878;
  --seal: #ecc3a4;
  --filet: rgba(230, 168, 120, .55);
}
[data-theme="nuit"] {
  --bg: #03092E;
  --fg: #f3e8dc;
  --muted: #a89a8c;
  --line: rgba(243, 232, 220, .15);
  --accent: #e6a878;
  --seal: #dc6a4e;
  --filet: rgba(230, 168, 120, .5);
}

/* ─── PAGES COULEURS — le fond prend la couleur de la page (teintes de la v1), ──
   quel que soit le thème choisi */
body[data-series="rouge"],
body[data-tint="rouge"] {
  --bg: rgb(120, 10, 10);
  --fg: #f6e9e2;
  --muted: #d3a59b;
  --line: rgba(246, 233, 226, .2);
  --accent: #ffc9a8;
  --seal: #f6e9e2;
  --filet: rgba(246, 233, 226, .5);
}
body[data-series="bleu"],
body[data-tint="bleu"] {
  --bg: rgb(8, 1, 90);
  --fg: #e9eaf6;
  --muted: #9a9bd0;
  --line: rgba(233, 234, 246, .18);
  --accent: #b9c2ff;
  --seal: #e9eaf6;
  --filet: rgba(233, 234, 246, .42);
}
body[data-series="vert"],
body[data-tint="vert"] {
  --bg: rgb(51, 67, 60);
  --fg: #eaf0ec;
  --muted: #a3b5ab;
  --line: rgba(234, 240, 236, .18);
  --accent: #cfe6c9;
  --seal: #eaf0ec;
  --filet: rgba(234, 240, 236, .42);
}
body[data-series="jaune"],
body[data-tint="jaune"] {
  --bg: rgb(255, 210, 47);
  --fg: #2a2205;
  --muted: #7a6410;
  --line: rgba(42, 34, 5, .22);
  --accent: #8a3d00;
  --seal: #8a2a12;
  --filet: rgba(42, 34, 5, .4);
}
body[data-series="rose"] {
  --bg: rgb(255, 165, 165);
  --fg: #2e1414;
  --muted: #8a4f4f;
  --line: rgba(46, 20, 20, .22);
  --accent: #7a1f2a;
  --seal: #7a1f2a;
  --filet: rgba(46, 20, 20, .4);
}
body[data-series="orange"],
body[data-tint="orange"] {
  --bg: rgb(255, 166, 88);
  --fg: #2e1705;
  --muted: #8a4f1f;
  --line: rgba(46, 23, 5, .22);
  --accent: #7a1f08;
  --seal: #7a1f08;
  --filet: rgba(46, 23, 5, .4);
}

/* ─── BASE ───────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: "Cormorant Garamond", Georgia, serif;
  font-weight: 300;
  font-size: 19px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background .5s ease, color .5s ease;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

.label {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.wrap { padding: 0 clamp(20px, 5vw, 80px); }

/* ─── NAV ────────────────────────────────────────────────────────────────── */
.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 20;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 26px clamp(20px, 5vw, 80px);
  color: #fff;
  transition: background .4s ease, color .4s ease, padding .4s ease;
}
.nav.scrolled, .nav.open {
  color: var(--fg);
  padding-top: 16px;
  padding-bottom: 16px;
}
.nav.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(10px); }
.logo { font-family: "Michroma", sans-serif; font-size: 13px; letter-spacing: .12em; display: flex; align-items: center; gap: 12px; }
.nav-links { display: flex; gap: clamp(18px, 3vw, 40px); }
.nav-links a, .nav-links button { opacity: .85; transition: opacity .2s; }
.nav-links a:hover, .nav-links button:hover { opacity: 1; }
.nav.open .when-closed, .nav:not(.open) .when-open { display: none; }

/* ─── LANGUE — petit bouton discret (affiche la langue vers laquelle on bascule) ── */
[data-lang-toggle] { font: inherit; letter-spacing: inherit; opacity: .55; transition: opacity .2s; }
[data-lang-toggle]:hover { opacity: 1; }
.v-right { display: flex; align-items: center; gap: 28px; }

/* ─── SCEAU 狐 — tampon façon hanko, repris du CV ────────────────────────── */
.seal {
  display: inline-grid;
  place-items: center;
  width: 1.75em;
  height: 1.75em;
  border: .09em solid var(--seal);
  border-radius: .24em;
  color: var(--seal);
  font-family: "Hiragino Mincho ProN", "Noto Serif JP", serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0;
  transition: color .4s ease, border-color .4s ease;
}
.seal > span { font-size: 1.12em; transform: translateY(-.03em); }
.nav:not(.scrolled):not(.open) .seal { color: #fff; border-color: #fff; }
.seal.large { font-size: clamp(34px, 4.5vw, 56px); flex: none; }

/* ─── PANNEAU PLEIN ÉCRAN ────────────────────────────────────────────────── */
.panel {
  position: fixed;
  inset: 0;
  z-index: 15;
  background: var(--bg);
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: clamp(24px, 6vw, 100px);
  align-items: center;
  overflow-y: auto;
  padding-top: 80px;
  padding-bottom: 40px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}
.panel.open { opacity: 1; visibility: visible; }
.panel ul { list-style: none; }
.panel-series a {
  display: inline-block;
  font-size: clamp(28px, 5.6vh, 54px);
  line-height: 1.25;
  transition: color .2s, transform .3s ease;
}
.panel-series a:hover { color: var(--accent); transform: translateX(10px); }
.panel-series a .jp { font-size: .5em; color: var(--muted); margin-left: .6em; }
.panel-side h2 { color: var(--muted); font-weight: 400; margin: 0 0 12px; }
.panel-side ul + h2 { margin-top: 36px; }
.panel-side a { font-size: clamp(20px, 3vh, 26px); line-height: 1.5; transition: color .2s; }
.panel-side a:hover { color: var(--accent); }
.panel-side a .jp { font-size: .7em; color: var(--muted); margin-left: .5em; }

/* ─── HERO ───────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  background: #000;
  border-radius: 0 0 calc(var(--radius) * 2) calc(var(--radius) * 2);
}
.hero img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 2.4s ease;
}
.hero img.active { opacity: 1; }
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.5), transparent 40%, transparent 80%, rgba(0,0,0,.3));
}
.hero-text {
  position: absolute;
  z-index: 2;
  left: clamp(20px, 5vw, 80px);
  right: clamp(20px, 5vw, 80px);
  bottom: clamp(28px, 6vh, 64px);
  color: #fff;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
}
.hero-text h1 { font-weight: 300; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.1; }
.hero-text h1 em { font-style: italic; }
.hero-text p { max-width: 26em; margin-top: 12px; opacity: .85; }
.hero.quick img { transition-duration: .7s; }
.hero-nav { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.hero-nav button { width: 38px; height: 38px; border-radius: 50%; font-size: 17px; opacity: .8; transition: opacity .2s, background .2s; }
.hero-nav button:hover { opacity: 1; background: rgba(255, 255, 255, .16); }

/* ─── SECTIONS ───────────────────────────────────────────────────────────── */
section.block { padding-top: clamp(80px, 14vh, 170px); }
.block-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--line);
  padding-bottom: 14px;
  margin-bottom: clamp(24px, 5vh, 56px);
  color: var(--muted);
}
.block-head a:hover { color: var(--fg); }

/* onglets Works / Colors de l'accueil */
.tabs { display: flex; gap: clamp(18px, 3vw, 36px); }
.tabs button { font: inherit; letter-spacing: inherit; text-transform: inherit; padding-bottom: 4px; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; }
.tabs button:hover { color: var(--fg); }
.tabs button[aria-selected="true"] { color: var(--fg); border-bottom-color: var(--fg); }
/* survol d'une couleur : traits et textes suivent le fondu du fond */
.block-head, .cat-list a, .foot { transition: border-color .5s ease, color .5s ease, padding-left .35s ease; }

/* pages sans photo d'accueil : le contenu démarre sous le menu fixe */
main.page { padding-top: clamp(110px, 18vh, 180px); }

/* ─── INTRO ──────────────────────────────────────────────────────────────── */
.lead { font-size: clamp(24px, 3.2vw, 44px); line-height: 1.3; max-width: 22em; }
.lead em { color: var(--accent); }
.intro-row { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(24px, 5vw, 80px); }

/* ─── CATÉGORIES (accueil) ───────────────────────────────────────────────── */
.cats { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 6vw, 100px); align-items: start; }
.cat-list { list-style: none; }
.cat-list a {
  display: flex;
  align-items: baseline;
  gap: 22px;
  padding: 14px 0;
  border-bottom: 1px solid var(--line);
  transition: padding-left .35s ease, color .25s;
}
.cat-list .num { color: var(--muted); width: 2em; }
.cat-list .name { font-size: clamp(28px, 3.6vw, 50px); line-height: 1.15; }
.cat-list .jp { margin-left: auto; color: var(--muted); font-size: 20px; }
.cat-list a:hover, .cat-list a.current { padding-left: 14px; color: var(--accent); }
.cat-list .thumb { display: none; }

.cat-preview {
  position: sticky;
  top: 110px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--line);
}
.cat-preview img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity .6s ease, transform 1.2s ease;
}
.cat-preview img.active { opacity: 1; transform: none; }

/* ─── SÉLECTION (accueil) ────────────────────────────────────────────────── */
.selection {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: clamp(16px, 2.5vw, 40px);
  row-gap: clamp(60px, 12vh, 150px);
  align-items: center;
}
.selection figure:nth-child(6n+1) { grid-column: 1 / span 7; }
.selection figure:nth-child(6n+2) { grid-column: 9 / span 4; }
.selection figure:nth-child(6n+3) { grid-column: 3 / span 8; }
.selection figure:nth-child(6n+4) { grid-column: 1 / span 4; }
.selection figure:nth-child(6n+5) { grid-column: 6 / span 7; }
.selection figure:nth-child(6n+6) { grid-column: 4 / span 6; }
.selection img { width: 100%; height: auto; border-radius: var(--radius); }
.selection figcaption { margin-top: 12px; color: var(--muted); display: flex; justify-content: space-between; }
.selection figcaption a:hover { color: var(--fg); }

/* ─── PAGE SÉRIE ─────────────────────────────────────────────────────────── */
.series-title { font-weight: 300; font-size: clamp(48px, 9vw, 130px); line-height: 1; }
.series-title .jp { font-size: .38em; color: var(--muted); margin-left: .35em; }
/* rythme éditorial : une grande, deux, trois — dans une ligne, toutes les photos ont la même hauteur */
.grid {
  --gap: clamp(12px, 1.6vw, 24px);
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 5vw, 80px);
  margin-top: clamp(48px, 9vh, 110px);
}
.grid .row { display: flex; justify-content: center; align-items: flex-start; gap: calc(var(--gap) * 2); }
.grid figure { flex: var(--r, 1.5) 1 0; min-width: 0; }
.grid .row.single figure { flex: 0 1 auto; width: min(100%, calc(80vh * var(--r, 1.5))); }
.grid a {
  display: block;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--line);
  /* --r = largeur / hauteur ; ratio provisoire avant l'arrivée de l'image (sinon tout charge d'un coup) */
  aspect-ratio: var(--r, 1.5);
}
.grid figcaption { margin-top: 10px; color: var(--muted); }

.grid img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .8s ease, transform 1.2s ease; }
.grid img.loaded { opacity: 1; }
.grid a:hover img { transform: scale(1.03); }

.series-next {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-top: clamp(80px, 14vh, 160px);
  padding-top: 26px;
  border-top: 1px solid var(--line);
}
.series-next .label { color: var(--muted); }
.series-next a { font-size: clamp(32px, 5vw, 72px); line-height: 1.1; transition: color .25s; }
.series-next a:hover { color: var(--accent); }
.series-next a .jp { font-size: .45em; color: var(--muted); margin-left: .4em; }

/* ─── VISIONNEUSE ────────────────────────────────────────────────────────── */
body.viewer { height: 100vh; height: 100svh; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; }
.v-bar { display: flex; justify-content: space-between; align-items: center; padding: 22px clamp(20px, 5vw, 80px); color: var(--muted); }
.v-bar a:hover { color: var(--fg); }
.v-bar a, .v-bar #count { white-space: nowrap; }
.v-stage { position: relative; min-height: 0; display: grid; place-items: center; padding: 0 clamp(16px, 6vw, 90px); }
.v-stage img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  min-height: 0;
  border-radius: var(--radius);
  transition: opacity .35s ease;
}
.v-stage img.loading { opacity: 0; }
.v-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  font-size: 20px;
  color: var(--muted);
  transition: color .2s, background .2s;
}
.v-arrow:hover { color: var(--fg); background: var(--line); }
.v-arrow.prev { left: clamp(4px, 1.5vw, 24px); }
.v-arrow.next { right: clamp(4px, 1.5vw, 24px); }
.v-cap { min-height: 64px; padding: 18px clamp(20px, 5vw, 80px) 22px; text-align: center; color: var(--muted); font-style: italic; }

/* ─── À PROPOS / CONTACT ─────────────────────────────────────────────────── */
.about { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(32px, 7vw, 120px); align-items: start; }
.about p + p { margin-top: 1em; }
.about .text { max-width: 30em; font-size: 22px; }
.about .text .lead { margin-bottom: .8em; }
.about img { width: 100%; border-radius: var(--radius); }
.links { list-style: none; margin-top: clamp(32px, 6vh, 64px); }
.links li { border-top: 1px solid var(--line); }
.links li:last-child { border-bottom: 1px solid var(--line); }
.links a { display: flex; justify-content: space-between; align-items: baseline; gap: 20px; padding: 16px 0; transition: padding-left .35s ease, color .25s; }
.links a:hover { padding-left: 14px; color: var(--accent); }
.links .label { color: var(--muted); }
.big-link { display: inline-block; font-size: clamp(26px, 5.2vw, 76px); line-height: 1.15; overflow-wrap: anywhere; transition: color .25s; }
.big-link:hover { color: var(--accent); }

/* ─── FILET — liseré de 2px autour des photos, d'une couleur propre à chaque fond (--filet) ── */
.grid a,
.selection img,
.cat-preview,
.cat-list .thumb,
.about img,
.v-stage img {
  box-shadow: 0 0 0 2px var(--filet);
}

/* ─── FOOTER ─────────────────────────────────────────────────────────────── */
footer.foot {
  margin-top: clamp(100px, 18vh, 200px);
  border-top: 1px solid var(--line);
  padding-top: 26px;
  padding-bottom: 26px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  color: var(--muted);
}
.foot .mark { display: flex; align-items: center; gap: 12px; }
.foot nav { display: flex; gap: 28px; }
.foot a:hover { color: var(--fg); }

/* ─── SÉLECTEUR DE THÈME — cinq petits ronds, chacun de la couleur de fond de son thème ── */
.theme-dots { display: inline-flex; align-items: center; gap: 10px; }
.theme-dots button {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--dot);
  border: 1px solid var(--muted);
  opacity: .7;
  transition: opacity .2s, transform .2s, box-shadow .2s;
}
.theme-dots button:hover { opacity: 1; transform: scale(1.2); }
.theme-dots button[aria-pressed="true"] { opacity: 1; box-shadow: 0 0 0 2px var(--bg), 0 0 0 3px var(--fg); }
.panel-side ul + h2 + .theme-dots { margin-top: 4px; }

/* ─── APPARITION ─────────────────────────────────────────────────────────── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 1.1s ease, transform 1.1s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ─── MOBILE ─────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  body { font-size: 17px; }
  .nav-links a.hide-m { display: none; }
  .hero-text { flex-direction: column; align-items: flex-start; gap: 10px; }
  .hero-nav { margin-left: -10px; }
  .panel { grid-template-columns: 1fr; align-items: start; }
  .intro-row { flex-direction: column-reverse; }
  .cats { grid-template-columns: 1fr; }
  .cat-preview { display: none; }
  .cat-list a { align-items: center; gap: 14px; }
  .cat-list .thumb { display: block; width: 54px; height: 54px; object-fit: cover; border-radius: 10px; }
  .cat-list .num { display: none; }
  .selection { row-gap: 56px; }
  .selection figure:nth-child(n) { grid-column: 1 / -1; }
  .selection figure:nth-child(even) { grid-column: 3 / -1; }
  .about { grid-template-columns: 1fr; }
  .about .text { font-size: 19px; }
  .v-arrow { display: none; }
  .v-bar .theme-dots { display: none; }
  .v-right { gap: 18px; }
  .series-next { flex-direction: column; }
}