@charset "UTF-8";
/* =========================================================================
   Mireille Martin — feuille de style unique
   Toutes les valeurs vivent ici. Aucune couleur en dur ailleurs.
   La palette est prélevée sur les toiles : le vermillon de « Vice et versa »,
   l'ocre de la série 2111, le blanc de la toile apprêtée, le noir de l'aplat.
   ========================================================================= */

:root {
  /* --- encre : gamme neutre tiédie, jamais grise --------------------- */
  --ink-1000: #000000;      /* réservé aux œuvres */
  --ink-900:  #14120f;
  --ink-800:  #211e1a;
  --ink-700:  #33302a;
  --ink-600:  #4d4841;
  --ink-500:  #6b655c;
  --ink-400:  #8d867b;
  --ink-300:  #b1a99c;
  --ink-200:  #d2cabc;
  --ink-100:  #e6dfd2;
  --ink-050:  #f0ebe0;

  /* --- papier : le blanc de la toile, jamais #fff -------------------- */
  --paper-000: #fbf9f4;
  --paper-100: #f5f2ea;
  --paper-200: #efebe1;
  --paper-300: #e6e1d5;

  /* --- vermillon : le rouge de « Vice et versa » --------------------- */
  --red-700: #8f2214;
  --red-600: #a92a19;
  --red-500: #c9351f;
  --red-400: #dc4b32;
  --red-200: #f0b8ab;
  --red-050: #f9e4de;

  /* --- ocre : la série 2111 ------------------------------------------ */
  --ochre-600: #9a5313;
  --ochre-500: #c06a1a;
  --ochre-200: #ecc79b;

  /* --- rôles (thème clair par défaut) -------------------------------- */
  --bg:            var(--paper-100);
  --bg-raised:     var(--paper-000);
  --bg-sunken:     var(--paper-200);
  --bg-plate:      var(--paper-000);
  --fg:            var(--ink-900);
  --fg-muted:      var(--ink-600);
  /* ink-400 serait plus discret, mais les libellés mono font 11 px :
     il faut 4,5:1 minimum sur le papier. ink-500 donne 5,16:1. */
  --fg-faint:      var(--ink-500);
  --rule:          color-mix(in oklab, var(--ink-900) 14%, transparent);
  --rule-strong:   color-mix(in oklab, var(--ink-900) 30%, transparent);
  --accent:        var(--red-600);
  --accent-hover:  var(--red-700);
  --accent-soft:   var(--red-050);
  --shadow-plate:  0 1px 2px rgba(20, 18, 15, .05), 0 8px 24px -14px rgba(20, 18, 15, .30);
  --edge:          color-mix(in oklab, var(--ink-900) 22%, transparent);
  --edge-shadow:   rgba(20, 18, 15, .45);
  --grain-opacity: .035;
  --grain-blend:   multiply;

  /* --- typographie --------------------------------------------------- */
  --font-display: Optima, "Optima Nova", "Gill Sans", "Gill Sans MT", "Avenir Next", "Segoe UI", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", SFMono-Regular, Menlo, Consolas, monospace;

  --fs-label: .688rem;
  --fs-xs:    .78rem;
  --fs-sm:    .875rem;
  --fs-base:  1rem;
  --fs-md:    1.0625rem;
  --fs-lg:    clamp(1.15rem, .95rem + .7vw, 1.4rem);
  --fs-xl:    clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem);
  --fs-2xl:   clamp(2rem, 1.3rem + 3vw, 3.1rem);
  --fs-hero:  clamp(2.4rem, 1.2rem + 5.4vw, 5rem);

  --lh-tight: 1.12;
  --lh-snug:  1.3;
  --lh-body:  1.62;

  /* --- géométrie : angles marqués, la forme du sujet ------------------ */
  --r-0:  0px;
  --r-xs: 2px;
  --r-sm: 3px;
  --r-md: 4px;

  --space-1: .25rem;  --space-2: .5rem;   --space-3: .75rem;
  --space-4: 1rem;    --space-5: 1.5rem;  --space-6: 2rem;
  --space-7: 3rem;    --space-8: 4.5rem;  --space-9: 7rem;

  --measure: 34rem;
  --wide: 78rem;
  --gutter: clamp(1.1rem, 4vw, 3.5rem);

  --ease: cubic-bezier(.22, .61, .36, 1);
  --masthead-h: 60px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:           #131210;
    --bg-raised:    #1a1815;
    --bg-sunken:    #0d0c0b;
    --bg-plate:     #191714;
    --fg:           #ece5d8;
    --fg-muted:     #a9a094;
    --fg-faint:     #98907f;   /* 5,9:1 sur #131210 */
    --rule:         color-mix(in oklab, #ece5d8 15%, transparent);
    --rule-strong:  color-mix(in oklab, #ece5d8 32%, transparent);
    --accent:       var(--red-400);
    --accent-hover: #ea6b53;
    --accent-soft:  color-mix(in oklab, var(--red-500) 18%, transparent);
    --shadow-plate: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -16px rgba(0, 0, 0, .8);
  --edge:         color-mix(in oklab, #ece5d8 26%, transparent);
  --edge-shadow:  rgba(0, 0, 0, .75);
    --grain-opacity: .05;
    --grain-blend:  overlay;
  }
}

:root[data-theme="dark"] {
  --bg:           #131210;
  --bg-raised:    #1a1815;
  --bg-sunken:    #0d0c0b;
  --bg-plate:     #191714;
  --fg:           #ece5d8;
  --fg-muted:     #a9a094;
  --fg-faint:     #98907f;   /* 5,9:1 sur #131210 */
  --rule:         color-mix(in oklab, #ece5d8 15%, transparent);
  --rule-strong:  color-mix(in oklab, #ece5d8 32%, transparent);
  --accent:       var(--red-400);
  --accent-hover: #ea6b53;
  --accent-soft:  color-mix(in oklab, var(--red-500) 18%, transparent);
  --shadow-plate: 0 1px 2px rgba(0, 0, 0, .4), 0 10px 30px -16px rgba(0, 0, 0, .8);
  --edge:         color-mix(in oklab, #ece5d8 26%, transparent);
  --edge-shadow:  rgba(0, 0, 0, .75);
  --grain-opacity: .05;
  --grain-blend:  overlay;
}

/* ============================== socle ================================== */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  /* les ancres (#groupe) ne doivent pas finir sous le bandeau collant */
  scroll-padding-top: calc(var(--masthead-h) + env(safe-area-inset-top) + var(--space-4));
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* le grain : indispensable pour que les aplats ne bandent pas */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: var(--grain-opacity);
  mix-blend-mode: var(--grain-blend);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
}

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

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--accent); color: var(--paper-000); }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 10000;
  background: var(--fg); color: var(--bg);
  padding: var(--space-3) var(--space-4);
  font-family: var(--font-mono); font-size: var(--fs-xs);
}
.skip:focus { left: var(--space-4); top: var(--space-4); }

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ============================ typographie ============================== */

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-tight);
  letter-spacing: -.005em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 var(--space-4); }
p:last-child { margin-bottom: 0; }

.label {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  text-transform: uppercase;
  letter-spacing: .16em;
  color: var(--fg-faint);
  font-weight: 500;
}

.lede {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--fg-muted);
  max-width: 40rem;
}

.prose { max-width: var(--measure); font-size: var(--fs-md); }
.prose h2 {
  font-size: var(--fs-xl);
  margin: var(--space-7) 0 var(--space-4);
}
.prose h2:first-child { margin-top: 0; }
.prose blockquote {
  margin: var(--space-6) 0;
  padding-left: var(--space-5);
  border-left: 2px solid var(--accent);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.45;
  color: var(--fg);
}
.prose .signature {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .08em;
  color: var(--fg-faint);
  margin-top: var(--space-6);
}

/* ============================== structure ============================== */

.wrap { max-width: var(--wide); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 52rem; }

section { padding-block: clamp(var(--space-7), 9vw, var(--space-8)); }
section + section { border-top: 1px solid var(--rule); }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-6);
}
.section-head h2 { font-size: var(--fs-xl); }

/* ============================== en-tête ================================ */

.masthead {
  position: sticky;
  top: 0;
  z-index: 100;
  /* opaque : translucide, le texte défilait visiblement derrière lui, et Safari
     iOS ne teinte proprement la barre d'état que sur un aplat */
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding-top: env(safe-area-inset-top);
  view-transition-name: masthead;
}
.masthead__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  min-height: var(--masthead-h);
}
.wordmark {
  position: relative;
  z-index: 3;
  font-family: var(--font-display);
  font-size: clamp(.95rem, .8rem + .35vw, 1.1rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  white-space: nowrap;
  line-height: 1;
}
.wordmark b { font-weight: 400; }
.wordmark span { color: var(--fg-faint); }

.nav { display: flex; align-items: center; gap: clamp(.75rem, 2vw, 1.9rem); }
.nav a {
  font-size: var(--fs-sm);
  letter-spacing: .01em;
  color: var(--fg-muted);
  padding-block: var(--space-2);
  position: relative;
  transition: color .2s var(--ease);
}
.nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 2px;
  height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform .28s var(--ease);
}
.nav a[aria-current="page"]::after { transform: scaleX(1); }
@media (hover: hover) {
  .nav a:hover { color: var(--fg); }
  .nav a:hover::after { transform: scaleX(1); }
}
.nav a[aria-current="page"] { color: var(--fg); }

.theme-toggle {
  appearance: none; background: none; border: 1px solid var(--rule);
  color: var(--fg-muted); border-radius: var(--r-xs);
  width: 34px; height: 34px; display: grid; place-items: center;
  cursor: pointer; transition: border-color .2s, color .2s;
  flex: none;
}
@media (hover: hover) { .theme-toggle:hover { border-color: var(--rule-strong); color: var(--fg); } }
.theme-toggle svg { width: 15px; height: 15px; }
:root[data-theme="dark"] .icon-sun, .icon-moon { display: block; }
:root[data-theme="dark"] .icon-moon, .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-sun { display: block; }
  :root:not([data-theme="light"]) .icon-moon { display: none; }
}
:root[data-theme="light"] .icon-moon { display: block; }
:root[data-theme="light"] .icon-sun { display: none; }

.nav-toggle { display: none; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-burger { display: none; }

@media (max-width: 860px) {
  .theme-toggle { width: 40px; height: 40px; }
  .nav-toggle {
    display: grid; place-items: center;
    appearance: none; background: none; border: 1px solid var(--rule);
    color: var(--fg); border-radius: var(--r-xs);
    width: 40px; height: 40px; cursor: pointer;
  }
  .nav-toggle svg { width: 18px; height: 18px; }
  /* menu plein écran : le bandeau reste en place au-dessus, la page disparaît */
  .nav {
    position: fixed; inset: 0;
    height: 100vh; height: 100dvh;
    flex-direction: column; align-items: stretch; justify-content: flex-start;
    gap: 0;
    background: var(--bg);
    padding: calc(env(safe-area-inset-top) + var(--masthead-h) + var(--space-5)) var(--gutter)
             calc(env(safe-area-inset-bottom) + var(--space-6));
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .24s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
    visibility: hidden;
  }
  .nav[data-open="true"] {
    opacity: 1; transform: none; visibility: visible;
    transition: opacity .24s var(--ease), transform .3s var(--ease), visibility 0s;
  }
  .nav a {
    font-family: var(--font-display);
    font-size: 1.6rem;
    letter-spacing: 0;
    color: var(--fg);
    padding-block: var(--space-4);
    border-bottom: 1px solid var(--rule);
  }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--accent); }
  .masthead__inner { position: relative; z-index: 2; }
  .masthead__tools { display: flex; gap: var(--space-2); position: relative; z-index: 3; }
  html.nav-open, html.nav-open body { overflow: hidden; }
}
@media (min-width: 861px) { .masthead__tools { display: flex; gap: var(--space-3); } }

/* ================================ hero ================================= */

.hero {
  display: grid;
  gap: var(--space-7);
  padding-block: clamp(var(--space-6), 6vw, var(--space-9)) var(--space-8);
  align-items: center;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: var(--space-8); }
}
.hero__title {
  font-size: var(--fs-hero);
  line-height: .96;
  letter-spacing: -.02em;
}
.hero__title em {
  font-style: normal;
  display: block;
  color: var(--fg-faint);
}
.hero__meta { margin-top: var(--space-5); display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); }
.hero__quote {
  margin-top: var(--space-6);
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: 1.4;
  max-width: 32rem;
  border-left: 2px solid var(--accent);
  padding-left: var(--space-4);
}
.hero__figure { position: relative; }
.hero__figure img {
  width: 100%;
  background: var(--bg-plate);
  box-shadow: var(--shadow-plate);
  border: 1px solid var(--rule);
}

/* ============================== boutons ================================ */

.btn {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: .13em;
  text-transform: uppercase;
  border: 1px solid var(--fg);
  border-radius: var(--r-xs);
  background: var(--fg);
  color: var(--bg);
  cursor: pointer;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
}
.btn--ghost { background: none; color: var(--fg); border-color: var(--rule-strong); }
@media (hover: hover) {
  .btn:hover { background: var(--accent); border-color: var(--accent); color: var(--paper-000); }
  .btn--ghost:hover { background: none; border-color: var(--accent); color: var(--accent); }
}
.btn:active { opacity: .82; }
.btn:disabled { opacity: .55; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }

.link-arrow {
  font-family: var(--font-mono); font-size: var(--fs-xs);
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--fg-muted); display: inline-flex; align-items: center; gap: .5em;
  transition: color .2s, gap .2s;
}
.link-arrow:hover { color: var(--accent); gap: .85em; }

/* ============================== planches =============================== */

.plates {
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.75rem) clamp(.75rem, 2.4vw, 2rem);
  /* deux colonnes dès le petit écran : 108 planches sur une seule colonne,
     c'est un défilement interminable */
  grid-template-columns: repeat(auto-fill, minmax(clamp(150px, 20vw, 255px), 1fr));
}
.plates--tall { grid-template-columns: repeat(auto-fill, minmax(clamp(100px, 13vw, 155px), 1fr)); }
.plates--wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }

.plate { display: flex; flex-direction: column; gap: var(--space-3); }
.plate__frame {
  position: relative;
  aspect-ratio: var(--plate-ratio, 1 / 1);
  background: var(--bg-plate);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-plate);
  display: grid;
  place-items: center;
  padding: clamp(.6rem, 1.6vw, 1.15rem);
  overflow: hidden;
  transition: box-shadow .3s var(--ease), border-color .3s var(--ease);
}
.plates--tall .plate__frame { --plate-ratio: 2 / 5; }
/* Les toiles sont à fond blanc : sans filet, leur bord se dissout dans le papier
   du site. Le filet joue le rôle du passe-partout d'un accrochage. */
.plate img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
  box-shadow: 0 0 0 1px var(--edge), 0 6px 18px -12px var(--edge-shadow);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
.plate a:focus-visible .plate__frame {
  border-color: var(--rule-strong);
  box-shadow: 0 2px 4px rgba(20, 18, 15, .06), 0 18px 40px -20px rgba(20, 18, 15, .45);
}
@media (hover: hover) {
  .plate a:hover .plate__frame {
    border-color: var(--rule-strong);
    box-shadow: 0 2px 4px rgba(20, 18, 15, .06), 0 18px 40px -20px rgba(20, 18, 15, .45);
  }
  .plate a:hover img { transform: scale(1.022); }
}
@media (prefers-reduced-motion: reduce) { .plate a:hover img { transform: none; } }

.plate__caption { display: flex; flex-direction: column; gap: 2px; }
.plate__title {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: 1.25;
}
.plate__title .ideo { color: var(--fg-faint); margin-left: .45em; font-size: .95em; }
.plate__meta {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: .08em;
  color: var(--fg-faint);
}

/* --------- deux colonnes texte / repères --------- */
.split { display: grid; gap: var(--space-7); }
@media (min-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr) 17rem; gap: var(--space-8); align-items: start; }
  .split .prose { max-width: 38rem; }
}
.facts { display: grid; gap: var(--space-4); }
.facts > div { display: grid; gap: 1px; padding-bottom: var(--space-4); border-bottom: 1px solid var(--rule); }
.facts b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
}
.facts span:not(.label) { font-size: var(--fs-sm); color: var(--fg-muted); }
.facts__memb { border-bottom: none !important; padding-bottom: 0 !important; }
.facts__memb ul { list-style: none; margin: var(--space-2) 0 0; padding: 0; display: grid; gap: var(--space-2); }
.facts__memb a {
  font-size: var(--fs-sm); color: var(--fg-muted);
  border-bottom: 1px solid var(--rule); transition: color .2s, border-color .2s;
}
.facts__memb a:hover { color: var(--accent); border-color: var(--accent); }

/* --------- groupes de série --------- */
.group + .group { margin-top: var(--space-8); }
.group__head {
  display: flex; align-items: baseline; gap: var(--space-4);
  padding-bottom: var(--space-3);
  margin-bottom: var(--space-6);
  border-bottom: 1px solid var(--rule);
}
.group__head h3 { font-size: var(--fs-lg); }
.group__head .label { margin-left: auto; }

/* --------- filtres --------- */
.filters {
  display: flex; flex-wrap: wrap; gap: var(--space-2);
  margin-bottom: var(--space-7);
  padding-bottom: var(--space-5);
  border-bottom: 1px solid var(--rule);
}
.filter {
  appearance: none; cursor: pointer;
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .13em; text-transform: uppercase;
  padding: var(--space-2) var(--space-4);
  min-height: 34px;
  background: none;
  border: 1px solid var(--rule);
  border-radius: var(--r-xs);
  color: var(--fg-muted);
  transition: all .2s var(--ease);
}
@media (hover: hover) { .filter:hover { border-color: var(--rule-strong); color: var(--fg); } }
.filter[aria-pressed="true"] { background: var(--fg); border-color: var(--fg); color: var(--bg); }
.filter em { font-style: normal; opacity: .55; margin-left: .5em; }
.filters:last-child { margin-bottom: 0; }

/* ============================== fiche œuvre ============================ */

.work { display: grid; gap: var(--space-7); padding-block: var(--space-7) var(--space-8); }
@media (min-width: 940px) {
  .work { grid-template-columns: minmax(0, 1fr) 20rem; gap: var(--space-8); align-items: start; }
  .work__aside { position: sticky; top: 96px; }
}
.work__stage {
  background: var(--bg-plate);
  border: 1px solid var(--rule);
  box-shadow: var(--shadow-plate);
  padding: clamp(1rem, 3.5vw, 3rem);
  display: grid;
  place-items: center;
  min-height: 40vh;
}
.work__stage img {
  max-height: min(74vh, 900px); width: auto; object-fit: contain;
  box-shadow: 0 0 0 1px var(--edge), 0 14px 40px -24px var(--edge-shadow);
}
.zoom {
  appearance: none; background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; cursor: zoom-in;
  display: block; max-width: 100%;
}
.zoom picture { display: block; }
.work__title { font-size: var(--fs-2xl); line-height: 1.05; }
.work__ideo { display: block; font-size: .5em; color: var(--fg-faint); margin-top: .3em; letter-spacing: .1em; }

.specs { margin: var(--space-6) 0 0; display: grid; gap: 0; }
.specs div {
  display: grid; grid-template-columns: 7.5rem 1fr;
  gap: var(--space-3);
  padding: var(--space-3) 0;
  border-top: 1px solid var(--rule);
  font-size: var(--fs-sm);
}
.specs div:last-child { border-bottom: 1px solid var(--rule); }
.specs dt {
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .13em; color: var(--fg-faint);
  padding-top: .18em;
}
.specs dd { margin: 0; }
.specs dd ul { margin: 0; padding: 0; list-style: none; }

.work__nav {
  display: flex; justify-content: space-between; gap: var(--space-4);
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
}

/* ============================ expositions ============================== */

.timeline { display: grid; gap: 0; }
.tl-year {
  display: grid;
  grid-template-columns: 5rem 1fr;
  gap: var(--space-5);
  padding-block: var(--space-5);
  border-top: 1px solid var(--rule);
}
@media (max-width: 640px) { .tl-year { grid-template-columns: 1fr; gap: var(--space-3); } }
.tl-year > h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-sm);
  letter-spacing: .1em;
  color: var(--fg-faint);
  padding-top: .35em;
}
.tl-list { display: grid; gap: var(--space-4); }
.tl-item { display: grid; gap: 2px; padding-left: var(--space-4); border-left: 2px solid var(--rule); }
.tl-item[data-solo="true"] { border-left-color: var(--accent); }
.tl-item strong { font-family: var(--font-display); font-weight: 400; font-size: var(--fs-md); }
.tl-item span { font-size: var(--fs-sm); color: var(--fg-muted); }
.tl-item .tag {
  font-family: var(--font-mono); font-size: var(--fs-label);
  letter-spacing: .13em; text-transform: uppercase; color: var(--accent);
}

.views { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.view figure { margin: 0; }
.view img {
  width: 100%;
  border: 1px solid var(--rule);
  background: var(--bg-plate);
  box-shadow: var(--shadow-plate);
}
.view figcaption {
  margin-top: var(--space-3);
  font-size: var(--fs-sm);
  color: var(--fg-muted);
  line-height: 1.45;
}

/* ============================== livre d'or ============================= */

.voices { columns: 3 20rem; column-gap: var(--space-6); }
.voice {
  break-inside: avoid;
  margin: 0 0 var(--space-6);
  padding-left: var(--space-4);
  border-left: 2px solid var(--rule);
  font-family: var(--font-display);
  font-size: var(--fs-md);
  line-height: 1.5;
  color: var(--fg-muted);
}
.voice:nth-child(4n+1) { border-left-color: var(--accent); color: var(--fg); }

/* =============================== contact =============================== */

.contact-grid { display: grid; gap: var(--space-8); }
@media (min-width: 900px) { .contact-grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: var(--space-8); } }

.field { display: grid; gap: var(--space-2); margin-bottom: var(--space-5); }
.field label {
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .13em; color: var(--fg-muted);
}
.field input, .field textarea, .field select {
  font: inherit;
  font-size: var(--fs-base);
  color: var(--fg);
  background: var(--bg-raised);
  border: 1px solid var(--rule-strong);
  border-radius: var(--r-xs);
  padding: var(--space-3);
  min-height: 44px;
  width: 100%;
  transition: border-color .2s var(--ease);
}
.field textarea { min-height: 9rem; resize: vertical; line-height: 1.55; }
.field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); outline: none; }
.hp { position: absolute; left: -9999px; }

.form-note { font-size: var(--fs-sm); color: var(--fg-faint); margin-top: var(--space-4); }
.form-status { margin-top: var(--space-4); font-size: var(--fs-sm); min-height: 1.5em; }
.form-status[data-state="ok"] { color: var(--accent); }
.form-status[data-state="err"] { color: var(--accent); }

.info-list { display: grid; gap: var(--space-5); align-content: start; }
.info-list h3 { font-size: var(--fs-base); font-family: var(--font-mono); font-weight: 500; text-transform: uppercase; letter-spacing: .13em; color: var(--fg-faint); font-size: var(--fs-label); }
.info-list a { border-bottom: 1px solid var(--rule-strong); transition: border-color .2s, color .2s; }
.info-list a:hover { color: var(--accent); border-color: var(--accent); }

/* ================================ pied ================================= */

.foot {
  border-top: 1px solid var(--rule);
  padding-block: var(--space-7) calc(var(--space-6) + env(safe-area-inset-bottom));
  font-size: var(--fs-sm);
  color: var(--fg-faint);
}
.foot__grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.foot h4 {
  font-family: var(--font-mono); font-size: var(--fs-label);
  text-transform: uppercase; letter-spacing: .16em; color: var(--fg-faint);
  margin-bottom: var(--space-3); font-weight: 500;
}
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.foot a:hover { color: var(--accent); }
.foot__bottom {
  margin-top: var(--space-7); padding-top: var(--space-4);
  border-top: 1px solid var(--rule);
  display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: space-between;
  font-size: var(--fs-xs);
}

/* ============================== visionneuse ============================ */

dialog.lightbox {
  border: none; padding: 0; margin: 0;
  width: 100%; max-width: 100%; height: 100%; max-height: 100%;
  background: color-mix(in oklab, var(--bg-sunken) 96%, transparent);
  color: var(--fg);
}
dialog.lightbox::backdrop { background: rgba(10, 9, 8, .82); }
.lightbox__inner { height: 100%; display: grid; grid-template-rows: 1fr auto; padding: var(--space-5); gap: var(--space-4); }
.lightbox__img { display: grid; place-items: center; min-height: 0; }
.lightbox__img img { max-height: 100%; max-width: 100%; width: auto; object-fit: contain; }
.lightbox__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.lightbox__close {
  position: absolute; top: var(--space-4); right: var(--space-4);
  width: 44px; height: 44px; display: grid; place-items: center;
  background: none; border: 1px solid var(--rule); color: var(--fg);
  border-radius: var(--r-xs); cursor: pointer;
}

/* ============================ transitions ============================== */

@view-transition { navigation: auto; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

@media print {
  .masthead, .foot, .filters, .btn-row, .theme-toggle { display: none; }
  body::after { display: none; }
}

/* ============================ écrans tactiles ========================== */

@media (hover: none) {
  .lightbox__hint { display: none; }
}
@media (max-width: 640px) {
  .lightbox__inner { padding: calc(env(safe-area-inset-top) + var(--space-8)) var(--space-3) calc(env(safe-area-inset-bottom) + var(--space-4)); }
  .lightbox__close { top: calc(env(safe-area-inset-top) + var(--space-3)); right: var(--space-3); }
  .work { padding-block: var(--space-5) var(--space-7); gap: var(--space-6); }
  .work__stage { min-height: 0; }
  .work__nav { flex-direction: column; gap: var(--space-3); }
  .work__nav a:last-child { align-self: flex-end; text-align: right; }
  .group + .group { margin-top: var(--space-7); }
  .group__head { flex-wrap: wrap; gap: var(--space-1) var(--space-4); }
  .group__head .label { margin-left: 0; }
  .foot__bottom { flex-direction: column; gap: var(--space-2); }
}

/* ==================== fiche : texte, crédit, critiques ================= */

.work__about { margin-top: var(--space-5); font-size: var(--fs-md); color: var(--fg-muted); }
.work__about p { margin-bottom: var(--space-3); }
.work__credit { margin-top: var(--space-3); }
.hint-touch { display: none; }
@media (hover: none) { .hint-mouse { display: none; } .hint-touch { display: inline; } }
.critiques { display: grid; gap: var(--space-8); }
.critique + .critique { padding-top: var(--space-8); border-top: 1px solid var(--rule); max-width: var(--measure); }
@media (max-width: 640px) {
  /* l'introduction d'une page et son contenu : un seul souffle, pas deux */
  main > .wrap:first-child + section,
  main > .wrap:first-child + section + section { padding-top: var(--space-6); }
  main > .wrap:first-child + section { border-top: 0; }
  .hero { padding-top: var(--space-6); gap: var(--space-6); }
}
.foot__bottom a { white-space: nowrap; }