/* Fortunée Noël — style.css
   Thème « Encre de Prusse » : blanc de galerie, encre bleu de Prusse,
   un seul rouge, réservé à la pastille « vendu » des galeries. */

/* ── Variables ──────────────────────────────────────────────── */
:root {
  --mur:     #f6f6f3;   /* fond, blanc de galerie */
  --platre:  #ecebe6;   /* surfaces secondaires */
  --encre:   #16223b;   /* texte, bleu de Prusse */
  --ardoise: #5d6577;   /* texte secondaire */
  --filet:   #d6d5cf;   /* traits fins */
  --pastille:#c1121f;   /* point rouge : œuvre vendue */

  --serif: 'Bodoni Moda', 'Didot', 'Bodoni 72', Georgia, serif;
  --sans:  'Jost', 'Futura', 'Century Gothic', system-ui, sans-serif;

  --gutter: clamp(16px, 4vw, 64px);
  --max: 1440px;
  --ease: cubic-bezier(.22, .61, .36, 1);
  --row: 300px;   /* hauteur cible d'une rangée de la galerie */
}

/* ── Base ───────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--mur);
  color: var(--encre);
  font: 300 17px/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3 { margin: 0; font-family: var(--serif); font-weight: 400; line-height: 1.1; }
p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
em { font-style: italic; }
sup { font-size: .6em; line-height: 0; }
[hidden] { display: none !important; }

:focus-visible { outline: 1.5px solid var(--encre); outline-offset: 4px; }
.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 200;
  padding: 10px 16px; background: var(--encre); color: var(--mur);
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }

/* ── Boutons et liens ───────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 28px;
  background: var(--encre); color: var(--mur);
  font: 400 15px/1 var(--sans); letter-spacing: .04em;
  text-decoration: none;
  transition: background .3s var(--ease);
}
.btn:hover { background: #24345a; }
.link {
  font-size: 15px; letter-spacing: .03em; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding-bottom: 3px;
  transition: background-size .35s var(--ease);
}
.link:hover { background-size: 0 1px; background-position: 100% 100%; }

/* ── En-tête ────────────────────────────────────────────────── */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  height: 76px; padding: 0 var(--gutter);
  background: rgba(246, 246, 243, 0);
  transition: background .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.site-header.is-scrolled {
  height: 64px;
  background: rgba(246, 246, 243, .94);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--filet);
}
.site-header__logo {
  font: 400 22px/1 var(--serif); text-decoration: none; letter-spacing: .01em;
}
.site-nav ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 40px); }
.site-nav a { font-size: 15px; letter-spacing: .03em; text-decoration: none; color: var(--ardoise); transition: color .25s; }
.site-nav a:hover, .site-nav a.is-current { color: var(--encre); }
.site-nav .site-nav__contact { color: var(--encre); border-bottom: 1px solid currentColor; padding-bottom: 2px; }

.burger { display: none; width: 44px; height: 44px; position: relative; margin-right: -10px; }
.burger span { position: absolute; left: 11px; right: 11px; height: 1px; background: var(--encre); transition: transform .35s var(--ease); }
.burger span:first-child { top: 18px; }
.burger span:last-child  { top: 25px; }
.menu-open .burger span:first-child { transform: translateY(3.5px) rotate(45deg); }
.menu-open .burger span:last-child  { transform: translateY(-3.5px) rotate(-45deg); }

.mobile-menu {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; padding: 96px var(--gutter) 48px;
  background: var(--mur);
  opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s;
}
.menu-open .mobile-menu { opacity: 1; visibility: visible; }
.mobile-menu li + li { margin-top: 14px; }
.mobile-menu a { font: 400 clamp(32px, 9vw, 44px)/1.15 var(--serif); text-decoration: none; }

@media (max-width: 960px) {
  .site-nav { display: none; }
  .burger { display: block; }
}

/* ── Titres de section ──────────────────────────────────────── */
section { scroll-margin-top: 64px; }
.sec-head {
  max-width: var(--max); margin: 0 auto clamp(40px, 6vw, 80px);
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px 40px; flex-wrap: wrap;
}
.sec-head h2 { font-size: clamp(40px, 6vw, 76px); letter-spacing: -.01em; }
.sec-head p { max-width: 40ch; color: var(--ardoise); }

/* ── Accueil ────────────────────────────────────────────────── */
.hero {
  max-width: var(--max); margin: 0 auto;
  min-height: 100svh;
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center; gap: clamp(32px, 6vw, 96px);
  padding: 120px var(--gutter) 72px;
}
.hero__name {
  font-size: clamp(64px, 10.5vw, 168px);
  line-height: .9; letter-spacing: -.02em;
  /* pivote de l'envers vers l'endroit, comme un tableau vu au travers du plexiglas */
  transform-origin: 50% 50%;
  animation: retourne 1.8s cubic-bezier(.7, 0, .2, 1) .25s both;
}
.hero__name span { display: block; }
.hero__name span + span { padding-left: .55em; }
@keyframes retourne {
  from { transform: perspective(1400px) rotateY(180deg); opacity: .28; }
  to   { transform: perspective(1400px) rotateY(0deg);   opacity: 1; }
}
.hero__lede { max-width: 34ch; margin-top: clamp(32px, 4vw, 56px); font-size: 18px; color: var(--ardoise); }
.hero__actions { margin-top: 36px; display: flex; align-items: center; gap: 32px; flex-wrap: wrap; }

.hero__work { margin: 0; justify-self: end; width: 100%; max-width: 640px; }
.hero__frame { display: block; width: 100%; cursor: zoom-in; }
.hero__frame img { width: 100%; box-shadow: 0 30px 60px -30px rgba(22, 34, 59, .45); }

/* Cartel : la petite étiquette posée à côté d'une œuvre au musée */
.cartel { display: grid; gap: 2px; margin-top: 18px; font-size: 14px; line-height: 1.5; color: var(--ardoise); }
.cartel__title { font: italic 400 17px/1.4 var(--serif); color: var(--encre); }

@media (max-width: 860px) {
  .hero { grid-template-columns: 1fr; min-height: 0; padding-top: 112px; }
  .hero__work { justify-self: start; }
}

/* ── Démarche ───────────────────────────────────────────────── */
.statement {
  padding: clamp(80px, 12vw, 180px) var(--gutter);
  border-top: 1px solid var(--filet);
}
.statement__text {
  max-width: 30ch; margin: 0 auto;
  font: 400 clamp(26px, 3.4vw, 44px)/1.32 var(--serif);
  text-align: center; text-wrap: balance;
}

/* ── Séries ─────────────────────────────────────────────────── */
.series { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--platre); }
.chapter {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: center; gap: clamp(32px, 6vw, 112px);
}
.chapter + .chapter { margin-top: clamp(80px, 11vw, 160px); }
.chapter--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.chapter--flip .chapter__pic { order: 2; }
.chapter__pic { margin: 0; display: flex; justify-content: center; }
.chapter__pic img { width: min(100%, calc(78vh * var(--r, 1))); box-shadow: 0 30px 60px -34px rgba(22, 34, 59, .5); }
.chapter__text { max-width: 44ch; }
.chapter__when { font-size: 15px; letter-spacing: .03em; color: var(--ardoise); }
.chapter__text h3 { margin: 14px 0 24px; font-size: clamp(36px, 4.6vw, 60px); }
.chapter__text p:not(.chapter__when) { margin-bottom: 28px; }

@media (max-width: 800px) {
  .chapter, .chapter--flip { grid-template-columns: 1fr; }
  .chapter--flip .chapter__pic { order: 0; }
  .chapter__pic img { width: min(100%, calc(70vh * var(--r, 1))); }
}

/* ── Œuvres ─────────────────────────────────────────────────── */
.works { padding: clamp(96px, 11vw, 160px) var(--gutter) clamp(80px, 10vw, 140px); }
.sec-head--works { margin-bottom: 32px; align-items: flex-end; }
.works__tabs { position: relative; display: flex; flex-wrap: wrap; gap: 6px 28px; }
.tab-btn {
  font: 400 clamp(19px, 1.8vw, 24px)/1.4 var(--serif); color: var(--ardoise);
  padding: 4px 0; border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s;
}
.tab-btn:hover { color: var(--encre); }
.tab-btn[aria-pressed="true"] { color: var(--encre); }

.works__bar {
  max-width: var(--max); margin: 0 auto clamp(40px, 5vw, 64px);
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px 48px; flex-wrap: wrap;
  padding-top: 24px; border-top: 1px solid var(--filet);
}
.works__desc { max-width: 62ch; color: var(--ardoise); transition: opacity .25s; }
.works__count { display: flex; gap: 24px; align-items: baseline; font-size: 15px; color: var(--ardoise); white-space: nowrap; }
.sold-toggle { font-size: 15px; color: var(--encre); border-bottom: 1px solid var(--filet); padding-bottom: 2px; }
.sold-toggle:hover { border-color: var(--encre); }

/* Mur d'accrochage : rangées justifiées qui respectent les proportions de chaque œuvre.
   Chaque œuvre reçoit --r (largeur / hauteur), lu dans oeuvres.json. */
.wall {
  max-width: var(--max); margin: 0 auto;
  display: flex; flex-wrap: wrap; gap: clamp(28px, 3vw, 48px) clamp(16px, 2vw, 32px);
}
.wall::after { content: ''; flex-grow: 999; }   /* la dernière rangée ne s'étire pas */
.work {
  flex: var(--r, 1) 1 calc(var(--r, 1) * var(--row));
  min-width: 0; max-width: calc(var(--r, 1) * var(--row) * 1.3);
  cursor: zoom-in;
}
.work__frame {
  position: relative; display: flex; gap: 4px;
  aspect-ratio: var(--r, 1);
  background: var(--platre); overflow: hidden;
}
.work__frame img {
  flex: 1; min-width: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity .6s var(--ease), transform 1.2s var(--ease);
}
.work__frame img.is-loaded { opacity: 1; }
.work:hover .work__frame img { transform: scale(1.025); }
.work__cap { display: grid; margin-top: 12px; font-size: 14px; line-height: 1.5; color: var(--ardoise); }
.work__title { display: flex; align-items: center; gap: 8px; font: italic 400 16px/1.4 var(--serif); color: var(--encre); }
.dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--pastille); }
.work:focus-visible { outline-offset: 6px; }

@media (max-width: 1100px) { :root { --row: 230px; } }
@media (max-width: 640px)  { :root { --row: 140px; } .work__cap { font-size: 13px; } .work__title { font-size: 15px; } }

/* ── Biographie ─────────────────────────────────────────────── */
.bio {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
  gap: clamp(40px, 7vw, 120px); align-items: start;
  padding: clamp(80px, 10vw, 140px) var(--gutter);
  border-top: 1px solid var(--filet);
}
.bio__pic { margin: 0; position: sticky; top: 96px; }
.bio__pic img { width: 100%; filter: grayscale(1) contrast(1.05); }
.bio__text { max-width: 58ch; }
.bio__text h2 { font-size: clamp(40px, 6vw, 76px); margin-bottom: 40px; }
.bio__text > p + p { margin-top: 1.1em; }
.facts { margin: 56px 0 0; border-top: 1px solid var(--filet); }
.facts div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); }
.facts dt { color: var(--ardoise); font-size: 15px; }
.facts dd { margin: 0; }

@media (max-width: 860px) {
  .bio { grid-template-columns: 1fr; }
  .bio__pic { position: static; }
  .facts div { grid-template-columns: 1fr; gap: 2px; }
}

/* ── Expositions ────────────────────────────────────────────── */
.expos { padding: clamp(80px, 10vw, 140px) var(--gutter); background: var(--platre); }
.expos__cols {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(40px, 6vw, 112px); align-items: start;
}
.expos h3 { font-size: clamp(24px, 2.4vw, 32px); padding-bottom: 20px; border-bottom: 1px solid var(--encre); }
.expo-list li { display: grid; grid-template-columns: 4em 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--filet); color: var(--ardoise); font-size: 15px; }
.expo-list__year { font-variant-numeric: tabular-nums; color: var(--encre); }
.expo-list strong { display: block; font: 400 18px/1.35 var(--serif); color: var(--encre); margin-bottom: 2px; }

.expo-list li.is-extra { display: none; }
.expo-list.is-open li.is-extra { display: grid; }
.expo-more { margin-top: 20px; font-size: 15px; border-bottom: 1px solid var(--encre); padding-bottom: 2px; }
.expos__prizes { max-width: var(--max); margin: clamp(56px, 7vw, 96px) auto 0; }
.expo-list--cols { display: grid; grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 6vw, 112px); }

@media (max-width: 860px) { .expos__cols, .expo-list--cols { grid-template-columns: 1fr; } }

/* ── Presse ─────────────────────────────────────────────────── */
.press { padding: clamp(80px, 10vw, 140px) var(--gutter); }
.press-list {
  max-width: var(--max); margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); column-gap: clamp(24px, 4vw, 64px);
  border-top: 1px solid var(--filet);
}
.press-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 20px 0; border-bottom: 1px solid var(--filet); text-align: left;
  transition: padding .35s var(--ease);
}
.press-name { font: 400 clamp(20px, 1.8vw, 24px)/1.3 var(--serif); }
.press-year { font-size: 14px; color: var(--ardoise); font-variant-numeric: tabular-nums; white-space: nowrap; }
.press-btn:hover { padding-left: 10px; }

/* ── Contact ────────────────────────────────────────────────── */
.contact {
  padding: clamp(96px, 13vw, 200px) var(--gutter);
  background: var(--encre); color: var(--mur);
  text-align: center;
}
.contact h2 { max-width: 20ch; margin: 0 auto; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.12; text-wrap: balance; }
.contact > p { max-width: 46ch; margin: 28px auto 0; color: #b9c0cf; }
.contact__mail {
  display: inline-block; margin-top: clamp(40px, 5vw, 64px);
  font: italic 400 clamp(24px, 3.6vw, 48px)/1.2 var(--serif);
  text-decoration: none; overflow-wrap: anywhere;
  border-bottom: 1px solid rgba(246, 246, 243, .35); padding-bottom: 6px;
  transition: border-color .3s;
}
.contact__mail:hover { border-color: var(--mur); }
.contact__links { display: flex; justify-content: center; gap: 36px; margin-top: 44px; font-size: 15px; letter-spacing: .03em; }
.contact__links a { color: #b9c0cf; text-decoration: none; transition: color .25s; }
.contact__links a:hover { color: var(--mur); }
.contact :focus-visible { outline-color: var(--mur); }

/* Contact sur deux colonnes : le texte à gauche, le formulaire à droite */
.contact {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 5fr);
  gap: clamp(48px, 8vw, 128px); align-items: start; text-align: left;
}
.contact h2 { margin: 0; max-width: 16ch; font-size: clamp(32px, 3.8vw, 54px); }
.contact__intro > p { max-width: 40ch; margin-top: 28px; color: #b9c0cf; }
.contact__links { justify-content: flex-start; }
.contact-form { display: grid; gap: 28px; max-width: 520px; width: 100%; justify-self: end; }
.field { display: grid; gap: 8px; }
.field label { font-size: 15px; color: #b9c0cf; }
.field input, .field textarea {
  width: 100%; padding: 10px 0 12px; border: 0; border-bottom: 1px solid rgba(246, 246, 243, .35); border-radius: 0;
  background: transparent; color: var(--mur); font: 300 18px/1.5 var(--sans);
  transition: border-color .3s var(--ease);
}
.field textarea { resize: vertical; min-height: 120px; }
.field input:focus, .field textarea:focus { outline: 0; border-color: var(--mur); box-shadow: 0 1px 0 var(--mur); }
.field [aria-invalid="true"] { border-color: #ff9a9a; }
.field__error { font-size: 14px; color: #ffb3b3; }
.field__error:empty { display: none; }
.field--trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.btn--light { background: var(--mur); color: var(--encre); justify-self: start; }
.btn--light:hover { background: #fff; }
.btn--light:disabled { opacity: .6; cursor: default; }
.contact-form__work {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding: 14px 16px; border: 1px solid rgba(246, 246, 243, .3); font-size: 15px; color: #b9c0cf;
  animation: descend .45s var(--ease) both;
}
.contact-form__work em { font: italic 400 17px/1.4 var(--serif); color: var(--mur); }
.contact-form__work button { flex: none; font-size: 14px; color: #b9c0cf; border-bottom: 1px solid rgba(246, 246, 243, .35); }
.contact-form__work button:hover { color: var(--mur); }
.contact-form__status { min-height: 1.6em; font-size: 15px; color: #b9c0cf; }
.contact-form__status:empty { display: none; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; }
  .contact-form { justify-self: start; }
}

/* ── Pied de page ───────────────────────────────────────────── */
.site-footer {
  display: flex; flex-wrap: wrap; gap: 12px 40px; align-items: baseline;
  padding: 36px var(--gutter);
  background: var(--encre); color: #8f98ab; font-size: 14px;
  border-top: 1px solid rgba(246, 246, 243, .12);
}
.site-footer__name { font: 400 18px/1 var(--serif); color: var(--mur); margin-right: auto; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--mur); }

/* ── Vue agrandie ───────────────────────────────────────────── */
.lb {
  position: fixed; inset: 0; z-index: 120;
  display: grid; grid-template-columns: minmax(0, 1fr) 340px;
  background: var(--mur);
  animation: fondu .35s var(--ease);
}
@keyframes fondu { from { opacity: 0; } }
.lb-stage { position: relative; display: flex; align-items: center; justify-content: center; padding: clamp(24px, 4vw, 64px); min-height: 0; overflow: hidden; }
.lb-img-wrap { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.lb-img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain;
  box-shadow: 0 30px 70px -30px rgba(22, 34, 59, .5);
  cursor: zoom-in; user-select: none; -webkit-user-drag: none;
  transition: opacity .3s var(--ease);
}
.lb-img.is-loading { opacity: .25; }
.lb-img.is-zoomed { cursor: grab; box-shadow: none; }
.lb-img.is-dragging { cursor: grabbing; }
.lb-duo { width: 100%; height: 100%; display: flex; gap: 16px; align-items: center; justify-content: center; }
.lb-duo img { max-width: calc(50% - 8px); max-height: 100%; object-fit: contain; }
.lb-zoom-reset {
  position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%);
  padding: 10px 18px; background: var(--encre); color: var(--mur); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity .25s;
}
.lb-zoom-reset.is-visible { opacity: 1; pointer-events: auto; }

.lb-info {
  display: flex; flex-direction: column; gap: 14px;
  padding: 104px 40px 40px; border-left: 1px solid var(--filet);
  overflow-y: auto;
}
.lb-count { font-size: 14px; color: var(--ardoise); font-variant-numeric: tabular-nums; }
.lb-title { font: italic 400 30px/1.15 var(--serif); }
.lb-meta { display: grid; gap: 2px; font-size: 15px; color: var(--ardoise); }
.lb-sold { display: flex; align-items: center; gap: 10px; font-size: 15px; }
.lb-ask { margin-top: 12px; align-self: flex-start; }
.lb-hint { font-size: 13px; color: var(--ardoise); }
.lb-nav { display: flex; gap: 8px; margin-top: auto; padding-top: 24px; }
.lb-arrow, .lb-close, .pm-btn {
  display: grid; place-items: center; width: 48px; height: 48px;
  border: 1px solid var(--filet); border-radius: 50%;
  transition: border-color .25s, background .25s;
}
.lb-arrow:hover, .lb-close:hover, .pm-btn:hover:not(:disabled) { border-color: var(--encre); }
.lb-arrow svg, .lb-close svg, .pm-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.lb-close { position: absolute; top: 28px; right: 32px; background: var(--mur); }
.lb.is-zoomed .lb-info { opacity: .25; transition: opacity .3s; }

@media (max-width: 860px) {
  .lb { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .lb-stage { padding: 72px 16px 12px; }
  .lb-info {
    display: grid; grid-template-columns: 1fr auto; column-gap: 16px; align-items: center;
    gap: 6px 16px; padding: 16px 16px 20px; border-left: 0; border-top: 1px solid var(--filet);
    max-height: 42vh;
  }
  .lb-info > * { grid-column: 1; }
  .lb-count { grid-row: 1; }
  .lb-title { font-size: 22px; }
  .lb-text { gap: 6px; }
  .lb-nav { grid-column: 2; grid-row: 1 / span 3; margin: 0; padding: 0; }
  .lb-ask { margin-top: 6px; min-height: 44px; }
  .lb-hint { display: none; }
  .lb-close { top: 14px; right: 16px; }
}

/* ── Fenêtre presse ─────────────────────────────────────────── */
.press-modal { position: fixed; inset: 0; z-index: 110; display: flex; align-items: center; justify-content: center; padding: 16px; }
.pm-backdrop { position: absolute; inset: 0; background: rgba(22, 34, 59, .55); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: fondu .3s; }
.pm-box {
  position: relative; width: min(760px, 100%); max-height: calc(100svh - 32px);
  display: flex; flex-direction: column; gap: 20px;
  padding: clamp(20px, 3vw, 36px); background: var(--mur);
  animation: fondu .35s var(--ease);
}
.pm-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.pm-title { font-size: clamp(24px, 3vw, 34px); }
.pm-controls { display: flex; align-items: center; gap: 8px; }
.pm-count { font-size: 14px; color: var(--ardoise); margin-right: 8px; font-variant-numeric: tabular-nums; }
.pm-btn:disabled { opacity: .3; cursor: default; }
.pm-stage { overflow: hidden; min-height: 0; flex: 1; }
.pm-track { display: flex; gap: 20px; transition: transform .5s var(--ease); height: 100%; }
.pm-card {
  position: relative; flex: 0 0 100%; display: flex; flex-direction: column;
  height: min(62svh, 620px); background: var(--platre); cursor: zoom-in; text-decoration: none;
}
.pm-card img { flex: 1; min-height: 0; width: 100%; object-fit: contain; padding: 16px; }
.pm-card-body { padding: 14px 18px; border-top: 1px solid var(--filet); }
.pm-card-title { font: italic 400 18px/1.3 var(--serif); }
.pm-card-year { font-size: 14px; color: var(--ardoise); }
.pm-card--pdf { justify-content: center; align-items: center; text-align: center; cursor: pointer; }
.pm-card--pdf .pm-card-body { border: 0; }
.pm-pdf-icon { font: 400 44px/1 var(--serif); letter-spacing: .08em; margin-bottom: 8px; }
.pm-card-overlay { display: none; }
.pm-dots { display: flex; justify-content: center; gap: 4px; }
.pm-dot { width: 28px; height: 28px; display: grid; place-items: center; }
.pm-dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--filet); transition: background .25s; }
.pm-dot.is-active::before { background: var(--encre); }

/* ── Mentions légales ───────────────────────────────────────── */
.legal { max-width: 720px; margin: 0 auto; padding: clamp(48px, 8vw, 112px) var(--gutter); }
.legal-back { font-size: 15px; text-decoration: none; border-bottom: 1px solid var(--filet); padding-bottom: 2px; }
.legal-back:hover { border-color: var(--encre); }
.legal h1 { margin: 48px 0 56px; font-size: clamp(40px, 6vw, 64px); }
.legal section { padding: 28px 0; border-top: 1px solid var(--filet); }
.legal h2 { font-size: 26px; margin-bottom: 14px; }
.legal p + p, .legal ul { margin-top: 12px; }
.legal ul { padding-left: 1.1em; list-style: disc; }
.legal li + li { margin-top: 6px; }
.legal-date { margin-top: 40px; font-size: 14px; color: var(--ardoise); }

/* ── Animations au clic et glissements ──────────────────────── */
/* Boutons : légère pression, puis une onde part du point cliqué */
.btn, .lb-arrow, .pm-btn { position: relative; overflow: hidden; }
.lb-close { overflow: hidden; }
.btn, .lb-arrow, .lb-close, .pm-btn, .tab-btn, .press-btn, .sold-toggle, .expo-more, .burger, .work {
  transition-property: transform, background, border-color, color, padding;
  transition-duration: .3s; transition-timing-function: var(--ease);
}
.btn:active, .lb-arrow:active, .lb-close:active, .pm-btn:active:not(:disabled) { transform: scale(.94); transition-duration: .08s; }
.tab-btn:active, .sold-toggle:active, .expo-more:active { transform: translateY(2px); transition-duration: .08s; }
.press-btn:active { padding-left: 18px; transition-duration: .08s; }
.work:active { transform: scale(.985); transition-duration: .08s; }
.ripple {
  position: absolute; border-radius: 50%; background: currentColor; opacity: .28;
  transform: scale(0); pointer-events: none;
  animation: onde .6s var(--ease) forwards;
}
@keyframes onde { to { transform: scale(1); opacity: 0; } }

/* Liens du menu : le trait glisse de gauche à droite */
.site-nav a:not(.site-nav__contact) {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  padding-bottom: 3px; transition: color .25s, background-size .35s var(--ease);
}
.site-nav a:not(.site-nav__contact):hover, .site-nav a.is-current { background-size: 100% 1px; }

/* Onglets des séries : le trait glisse sous l'onglet choisi */
.tab-ink {
  position: absolute; left: 0; top: 0; height: 1px; width: 0; background: var(--encre);
  transition: transform .5s var(--ease), width .5s var(--ease); pointer-events: none;
}

/* Galerie : la série quittée glisse d'un côté, la nouvelle arrive de l'autre */
.wall { transition: opacity .25s var(--ease), transform .25s var(--ease); }
.wall.is-leaving { opacity: 0; transform: translateX(calc(var(--dir, 1) * -28px)); }
.work { animation: arrive .6s var(--ease) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes arrive { from { opacity: 0; transform: translateX(calc(var(--dir, 1) * 36px)); } }

/* Listes d'expositions : les lignes dépliées descendent en cascade */
.expo-list.is-open li.is-extra { animation: descend .45s var(--ease) both; animation-delay: calc(var(--i, 0) * 30ms); }
@keyframes descend { from { opacity: 0; transform: translateY(-10px); } }

/* Menu téléphone : les liens montent l'un après l'autre */
.mobile-menu li { opacity: 0; transform: translateY(18px); transition: opacity .4s var(--ease), transform .5s var(--ease); }
.menu-open .mobile-menu li { opacity: 1; transform: none; }
.menu-open .mobile-menu li:nth-child(2) { transition-delay: .05s; }
.menu-open .mobile-menu li:nth-child(3) { transition-delay: .1s; }
.menu-open .mobile-menu li:nth-child(4) { transition-delay: .15s; }
.menu-open .mobile-menu li:nth-child(5) { transition-delay: .2s; }
.menu-open .mobile-menu li:nth-child(6) { transition-delay: .25s; }

/* Vue agrandie : l'œuvre s'avance, la fiche glisse depuis le bord, puis tout s'efface à la fermeture */
.lb-text { display: grid; gap: 14px; }
.lb-stage { animation: avance .5s var(--ease) both; }
.lb-info  { animation: glisse-fiche .5s var(--ease) both; }
@keyframes avance { from { opacity: 0; transform: scale(.96) translateY(14px); } }
@keyframes glisse-fiche { from { opacity: 0; transform: translateX(28px); } }
.lb.is-closing { animation: efface .22s var(--ease) forwards; }
@keyframes efface { to { opacity: 0; transform: scale(.985); } }
.slide-next { animation: vient-droite .45s var(--ease) both; }
.slide-prev { animation: vient-gauche .45s var(--ease) both; }
@keyframes vient-droite { from { opacity: 0; transform: translateX(48px); } }
@keyframes vient-gauche { from { opacity: 0; transform: translateX(-48px); } }

/* Fenêtre presse : elle monte en s'ouvrant */
.pm-box { animation: monte-fenetre .45s var(--ease) both; }
@keyframes monte-fenetre { from { opacity: 0; transform: translateY(28px); } }

@media (max-width: 860px) {
  @keyframes glisse-fiche { from { opacity: 0; transform: translateY(24px); } }
}

/* ── Mouvement réduit ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; }
}

/* Voile de transition : monte depuis le bas, puis se lève par le haut */
.veil {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center; overflow: hidden;
  background: var(--encre); color: var(--mur);
  transform: translateY(100%); visibility: hidden; pointer-events: none;
}
.veil.is-in, .veil.is-out { visibility: visible; transition: transform .6s cubic-bezier(.76, 0, .24, 1); }
.veil.is-in  { transform: translateY(0); }
.veil.is-out { transform: translateY(-100%); }
.veil__label {
  font: 400 clamp(44px, 9vw, 132px)/1 var(--serif); letter-spacing: -.01em;
  opacity: 0; transform: translateY(60px);
}
.veil.is-in .veil__label { opacity: 1; transform: none; transition: opacity .5s var(--ease) .2s, transform .7s var(--ease) .2s; }
.veil.is-out .veil__label { opacity: 0; transform: translateY(-60px); transition: opacity .35s var(--ease), transform .5s var(--ease); }

/* À l'arrivée, le contenu de la section monte à son tour */
.is-arriving > *, .hero.is-arriving > *, main.is-arriving .hero > * { animation: arrive-section .9s var(--ease) .35s both; }
.is-arriving > *:nth-child(2) { animation-delay: .47s; }
.is-arriving > *:nth-child(n+3) { animation-delay: .59s; }
@keyframes arrive-section { from { opacity: 0; transform: translateY(40px); } }
main.is-arriving > * { animation: none; }

/* les glissements ne doivent jamais créer de défilement horizontal */
.works { overflow-x: clip; }
.lb { overflow: hidden; }

/* ── Choix de la langue ─────────────────────────────────────── */
.site-header__logo { margin-right: auto; }
.lang { display: flex; align-items: center; gap: 2px; }
.lang button {
  min-width: 36px; height: 36px; padding: 0 6px;
  font-size: 14px; letter-spacing: .06em; color: var(--ardoise);
  border-bottom: 1px solid transparent;
  transition: color .25s, border-color .25s, transform .3s var(--ease);
}
.lang button:hover { color: var(--encre); }
.lang button[aria-pressed="true"] { color: var(--encre); border-color: var(--encre); }
.lang button:active { transform: translateY(2px); transition-duration: .08s; }
/* au changement de langue, le contenu s'efface puis revient */
main, .site-footer { transition: opacity .24s var(--ease); }
.is-switching main, .is-switching .site-footer { opacity: 0; }

/* ── Épaisseur des lettres ──────────────────────────────────── */
/* Bodoni Moda affine ses traits horizontaux quand le texte grandit (réglage « opsz »).
   En grande taille ils devenaient presque invisibles : on fixe une taille optique plus
   basse, qui épaissit les traits fins, et une graisse un peu plus forte (« wght »).
   Pour épaissir ou affiner, changer les deux nombres de chaque ligne. */
.hero__name, .veil__label { font-variation-settings: 'opsz' 18, 'wght' 480; }
.sec-head h2, .bio__text h2, .contact h2, .legal h1 { font-variation-settings: 'opsz' 26, 'wght' 470; }
.statement__text, .chapter__text h3, .expos h3, .legal h2, .contact__mail, .lb-title, .pm-title, .pm-pdf-icon, .mobile-menu a { font-variation-settings: 'opsz' 22, 'wght' 480; }
.site-header__logo, .site-footer__name, .tab-btn, .press-name, .expo-list strong,
.cartel__title, .work__title, .pm-card-title, .contact-form__work em { font-variation-settings: 'opsz' 14, 'wght' 500; }

/* Adresse email : bouton qui copie l'adresse */
button.contact__mail { cursor: copy; text-align: left; user-select: text; transition: border-color .3s, transform .3s var(--ease); }
button.contact__mail:active { transform: translateY(2px); transition-duration: .08s; }
button.contact__mail.is-copied { border-color: var(--mur); }
.contact__copy { margin-top: 12px; min-height: 1.6em; font-size: 14px; color: #b9c0cf; }
.contact__intro .contact__links { margin-top: 28px; }

/* ── Invitation au contact, en bas du site ──────────────────── */
.outro {
  padding: clamp(96px, 12vw, 180px) var(--gutter); background: var(--encre); color: var(--mur);
  display: grid; justify-items: center; gap: clamp(32px, 4vw, 56px); text-align: center;
}
.outro h2 { max-width: 20ch; font-size: clamp(34px, 4.6vw, 64px); line-height: 1.12; text-wrap: balance; font-variation-settings: 'opsz' 26, 'wght' 470; }
.outro .btn--light { justify-self: center; }

/* ── Page contact : elle occupe tout l'écran ────────────────── */
.contact {
  position: fixed; inset: 0; z-index: 90;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 0 var(--gutter) clamp(32px, 5vw, 64px);
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-rows: auto 1fr;
  column-gap: clamp(48px, 8vw, 128px); row-gap: 0; align-items: center;
}
.contact__bar { grid-column: 1 / -1; display: flex; align-items: center; gap: clamp(12px, 2vw, 28px); height: 76px; }
.contact__logo { margin-right: auto; font: 400 22px/1 var(--serif); letter-spacing: .01em; text-decoration: none; font-variation-settings: 'opsz' 14, 'wght' 500; }
.contact .lang button { color: #8f98ab; }
.contact .lang button:hover, .contact .lang button[aria-pressed="true"] { color: var(--mur); }
.contact .lang button[aria-pressed="true"] { border-color: var(--mur); }
.contact__close {
  display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 6px 0 18px;
  border: 1px solid rgba(246, 246, 243, .3); border-radius: 22px; font-size: 15px; letter-spacing: .03em;
  transition: border-color .3s, transform .3s var(--ease);
}
.contact__close:hover { border-color: var(--mur); }
.contact__close:active { transform: scale(.96); transition-duration: .08s; }
.contact__close svg { width: 30px; height: 30px; padding: 7px; fill: none; stroke: currentColor; stroke-width: 1.4; }
.contact__intro, .contact .contact-form { padding: clamp(24px, 4vh, 56px) 0; }
.contact h2 { max-width: 9ch; font-size: clamp(48px, 7.4vw, 128px); line-height: .98; letter-spacing: -.01em; font-variation-settings: 'opsz' 20, 'wght' 480; outline: 0; }
.contact__intro > p { font-size: 19px; max-width: 34ch; margin-top: clamp(24px, 3vw, 40px); }
.contact .contact__mail { font-size: clamp(24px, 3vw, 42px); margin-top: clamp(32px, 5vh, 64px); }
.contact .contact-form { max-width: 560px; gap: clamp(22px, 3.4vh, 36px); }
.contact .field input, .contact .field textarea { font-size: 20px; }

/* V1 sans formulaire : une seule colonne */
.contact--simple { grid-template-columns: 1fr; }

@media (max-width: 860px) {
  .contact { grid-template-columns: 1fr; grid-template-rows: auto; align-items: start; }
  .contact__close span { display: none; }
  .contact__close { padding: 0 6px; }
  .contact__intro { padding-bottom: 8px; }
}