/* ==========================================================================
   MELV, site vitrine. Direction : galerie noir et blanc, une seule couleur
   (le rouge du coeur). Papier chaud, encre noire, serif editorial + grotesque.
   La foule de petits bonhommes est le motif du site : elle ouvre le site,
   se rassemble en dome, se dessine en tete de chaque page, remplit les cases vides.
   Tout ce qui montre une image est CARRE, comme les toiles.
   ========================================================================== */

:root {
  --ink: #111111;
  --ink-soft: #2a2a2a;
  --paper: #f4f1ec;
  --paper-deep: #e9e4dc;
  --grey: #6f6b66;
  --line: rgba(17, 17, 17, 0.14);
  --line-light: rgba(244, 241, 236, 0.18);
  --red: #e8323c;
  --red-soft: #ff4450;

  --font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --font-body: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;

  --text-base: clamp(1rem, 0.95rem + 0.3vw, 1.125rem);
  --text-lead: clamp(1.15rem, 1rem + 0.6vw, 1.5rem);
  --text-lg: clamp(1.8rem, 1.2rem + 2.4vw, 3.2rem);
  --text-xl: clamp(2.4rem, 1.4rem + 4.2vw, 5.2rem);
  --text-giant: clamp(2.6rem, 1rem + 6.4vw, 7rem);

  --space-section: clamp(3.25rem, 2.6rem + 3.2vw, 6.5rem);
  --gutter: clamp(1.25rem, 4vw, 4rem);
  --measure: 1240px;

  --duration-fast: 180ms;
  --duration-normal: 420ms;
  --duration-slow: 900ms;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* Le curseur : le coeur de Melv, fleche comprise. Un vrai curseur systeme,
     donc jamais cache derriere un element et sans retard. */
  --cursor-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='28' height='28'%3E%3Cpath d='M32 55C17 44 7 36 7 24A11.5 11.5 0 0 1 32 17.5A11.5 11.5 0 0 1 57 24C57 36 47 44 32 55Z' fill='%23e8323c' stroke='%23ffffff' stroke-width='3'/%3E%3Cpath d='M14 40L46 22M38 19L47 21.5L44 30' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 14 14, auto;
  --cursor-heart-big: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64' width='36' height='36'%3E%3Cpath d='M32 55C17 44 7 36 7 24A11.5 11.5 0 0 1 32 17.5A11.5 11.5 0 0 1 57 24C57 36 47 44 32 55Z' fill='%23e8323c' stroke='%23ffffff' stroke-width='3'/%3E%3Cpath d='M14 40L46 22M38 19L47 21.5L44 30' fill='none' stroke='%23ffffff' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 18 18, pointer;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
body.nav-open, body.lightbox-open { overflow: hidden; }

@media (pointer: fine) {
  body { cursor: var(--cursor-heart); }
  a, button, [data-cursor], summary, label { cursor: var(--cursor-heart-big); }
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; }
.cursor { display: none; }

.skip-link {
  position: absolute; left: 1rem; top: -4rem; padding: 0.6rem 1rem;
  background: var(--red); color: #fff; font-weight: 600; text-decoration: none; z-index: 100;
}
.skip-link:focus { top: 1rem; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

/* --- Typographie --- */
.eyebrow {
  font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase;
  font-weight: 600; color: var(--grey); margin-bottom: 1.25rem;
}
.section--ink .eyebrow, .page-hero .eyebrow { color: rgba(244, 241, 236, 0.55); }
.title-xl, .title-lg, .title-giant {
  font-family: var(--font-display); font-weight: 300; line-height: 0.98;
  letter-spacing: -0.02em; margin-bottom: 1.5rem; text-wrap: balance;
}
.title-xl { font-size: var(--text-xl); }
.title-lg { font-size: var(--text-lg); line-height: 1.05; }
.title-giant { font-size: var(--text-giant); line-height: 0.95; letter-spacing: -0.03em; }
.title-xl em, .title-lg em, .title-giant em { font-style: italic; font-weight: 300; color: var(--red); }
.outline { color: transparent; -webkit-text-stroke: 1.5px var(--ink); }
.page-hero .outline, .section--ink .outline { -webkit-text-stroke-color: var(--paper); }
.lead {
  font-family: var(--font-display); font-weight: 300; font-size: var(--text-lead);
  line-height: 1.35; margin-bottom: 1.25rem; max-width: 34ch;
}
p + p { margin-top: 1rem; }
.artiste-text > p:not(.eyebrow):not(.lead), .detail-text > p:not(.eyebrow):not(.lead) { max-width: 52ch; color: var(--ink-soft); }

/* --- Boutons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  padding: 0.85rem 1.5rem; border-radius: 999px; text-decoration: none; font-weight: 600;
  font-size: 0.95rem; letter-spacing: 0.01em; border: 1px solid transparent;
  transition: transform var(--duration-fast) var(--ease-out), background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn--red { background: var(--red); color: #fff; }
.btn--red:hover { background: var(--red-soft); }
.btn--paper { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--paper:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn--ghost { background: none; border-color: rgba(244, 241, 236, 0.4); color: var(--paper); }
.btn--ghost:hover { border-color: var(--paper); }
.btn--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ink:hover { background: var(--red); border-color: var(--red); color: #fff; }
.btn--ghost-ink { background: none; border-color: var(--line); color: var(--ink); }
.btn--ghost-ink:hover { border-color: var(--ink); }
.cta-row { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2rem; }

/* --- En-tete --- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.1rem var(--gutter); color: var(--paper);
  transition: color var(--duration-normal) var(--ease-out);
}
.site-header--ink { color: var(--ink); }
.site-header:not(.site-header--ink) .site-nav a { text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 2px rgba(0, 0, 0, 0.9); }
.brand { display: block; width: 132px; line-height: 0; position: relative; transition: width var(--duration-normal) var(--ease-out); }
.brand img { position: relative; }
.brand::before {
  /* halo sombre derriere le logo quand il est en clair sur la foule (pas de filtre : Safari) */
  content: ""; position: absolute; left: -22%; right: -22%; top: -55%; bottom: -55%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.98) 28%, rgba(0, 0, 0, 0.8) 50%, rgba(0, 0, 0, 0) 72%);
  opacity: 1; transition: opacity var(--duration-normal);
}
.site-header--ink .brand::before { opacity: 0; }
.site-header--ink .brand { width: 104px; }
.brand img { width: 100%; height: auto; }
.brand-ink { display: none; }
.site-header--ink .brand-light { display: none; }
.site-header--ink .brand-ink { display: block; }

.site-nav { display: flex; gap: 2.2rem; align-items: center; }
.site-nav a {
  position: relative; text-decoration: none; font-weight: 500; font-size: 0.95rem;
  letter-spacing: 0.01em; padding: 0.25rem 0;
}
.site-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-out);
}
.site-nav a:hover::after, .site-nav a:focus-visible::after, .site-nav a.is-active::after { transform: scaleX(1); }
.site-nav a.is-active::after { background: var(--red); }

.nav-toggle {
  display: none; width: 44px; height: 44px; padding: 0; border: 0; background: none;
  color: inherit; position: relative; z-index: 60;
}
.nav-toggle span {
  position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor;
  transition: transform var(--duration-normal) var(--ease-out), top var(--duration-normal) var(--ease-out);
}
.nav-toggle span:first-child { top: 16px; }
.nav-toggle span:last-child { top: 26px; }
.nav-toggle[aria-expanded="true"] span:first-child { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child { top: 21px; transform: rotate(-45deg); }

/* ==========================================================================
   OUVERTURE (index.html) : ecran noir, foule, dome, signature, bouton
   ========================================================================== */
.body--intro { background: #000; overflow: hidden; }
.intro { position: fixed; inset: 0; background: #000; color: var(--paper); overflow: hidden; }
#crowd { position: absolute; inset: 0; opacity: 1; transition: opacity 900ms var(--ease-out); }
.intro--fade #crowd { opacity: 0; }

.intro-signature {
  position: absolute; left: 50%; top: 50%; width: min(480px, 72vw); aspect-ratio: 1280 / 600;
  transform: translate(-50%, -75%); opacity: 0; transition: opacity 350ms var(--ease-out);
}
.intro--signature .intro-signature { opacity: 1; }
.intro-signature-canvas, .intro-signature-still { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-signature-still { display: none; object-fit: contain; }
.intro-signature--still .intro-signature-still { display: block; }
.intro-signature--still .intro-signature-canvas { display: none; }
/* la video n'est jamais affichee : elle sert de source au canvas */
.intro-signature-source { position: absolute; width: 2px; height: 2px; opacity: 0; pointer-events: none; }

.intro-enter {
  position: absolute; left: 50%; top: calc(50% + min(190px, 22vw)); transform: translate(-50%, 12px);
  display: inline-flex; align-items: center; gap: 0.7rem; isolation: isolate;
  padding: 0.95rem 1.6rem 0.95rem 1.8rem; border-radius: 999px;
  background: none; color: var(--paper); border: 0;
  font-family: var(--font-body); font-size: 0.98rem; font-weight: 600; letter-spacing: 0.03em;
  text-decoration: none; white-space: nowrap;
  opacity: 0; pointer-events: none;
  transition: opacity 350ms var(--ease-out), transform 500ms var(--ease-out), color var(--duration-fast);
}
.intro-enter-crowd { position: absolute; z-index: -1; pointer-events: none; }
.intro-enter svg { width: 18px; height: 18px; transition: transform var(--duration-normal) var(--ease-out); }
.intro-enter:hover { color: var(--red-soft); }
.intro-enter:hover svg { transform: translateX(4px); }
.intro--ready .intro-enter { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }

.intro-skip {
  position: absolute; right: var(--gutter); bottom: 1.5rem;
  color: rgba(244, 241, 236, 0.45); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase;
  text-decoration: none; padding: 0.5rem 0; transition: color var(--duration-fast);
}
.intro-skip:hover { color: var(--paper); }
.intro--ready .intro-skip { opacity: 0; pointer-events: none; }
.intro-noscript { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 2rem; background: #000; }
.intro-noscript img { width: min(480px, 72vw); }

/* ==========================================================================
   PAGES : entete noire ou la foule se dessine
   ========================================================================== */
.page-hero {
  position: relative; min-height: min(78svh, 760px); overflow: hidden;
  display: flex; align-items: flex-end; background: #000; color: var(--paper);
  padding: 8rem var(--gutter) clamp(3rem, 7vh, 5rem);
}
.page-hero-crowd { position: absolute; inset: 0; pointer-events: none; }
.page-hero::before {
  /* voile en haut : le menu reste lisible au-dessus de la foule */
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 190px; pointer-events: none; z-index: 1;
  background: linear-gradient(to bottom, #000 0%, rgba(0, 0, 0, 0.92) 45%, rgba(0, 0, 0, 0));
}
.page-hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 62%; pointer-events: none;
  background: linear-gradient(to top, #000 18%, rgba(0, 0, 0, 0.88) 55%, rgba(0, 0, 0, 0));
}
.page-hero-inner { position: relative; z-index: 1; max-width: var(--measure); width: 100%; margin: 0 auto; }
.page-hero-inner .title-giant { max-width: 14ch; }
.page-hero-sub {
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: var(--text-lead); color: rgba(244, 241, 236, 0.65); max-width: 40ch;
}

/* --- Bande defilante --- */
.marquee { overflow: hidden; border-bottom: 1px solid var(--line); padding: 0.9rem 0; background: var(--paper); }
.marquee-track {
  display: flex; align-items: center; gap: 2.5rem; width: max-content;
  font-family: var(--font-display); font-style: italic; font-weight: 300;
  font-size: clamp(1.1rem, 0.9rem + 1vw, 1.6rem); white-space: nowrap;
  animation: marquee 28s linear infinite;
}
.marquee-track span { padding-right: 0.5rem; }
.marquee-track i {
  width: 10px; height: 10px; background: var(--red); flex: none;
  clip-path: path("M5 9.5 C2.5 7.6 0.8 6 0.8 3.9 A2.1 2.1 0 0 1 5 2.8 A2.1 2.1 0 0 1 9.2 3.9 C9.2 6 7.5 7.6 5 9.5 Z");
}
@keyframes marquee { to { transform: translateX(-50%); } }

/* --- Sections --- */
.section { padding: var(--space-section) var(--gutter); position: relative; }

/* Deux sections de meme fond qui se suivent n'ont pas besoin de deux
   respirations pleines : 88 px en bas puis 88 px en haut font un trou de
   176 px entre deux blocs qui se repondent. La seconde repart de zero. */
.section--paper + .section--paper,
.section--ink + .section--ink { padding-top: 0; }
.section--paper { background: var(--paper); color: var(--ink); }
.section--ink { background: var(--ink); color: var(--paper); }
.section-head { max-width: var(--measure); margin: 0 auto 2.4rem; }
.section-head--split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 2rem; align-items: end; }
.section-head--split .lead { margin-bottom: 0.4rem; justify-self: end; }

.grain::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06;
  background: url("../assets/img/texture.jpg") center/420px repeat; filter: invert(1);
  mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%, #000 70%, transparent);
}
.grain > * { position: relative; z-index: 1; }

/* ==========================================================================
   GALERIE
   ========================================================================== */

/* --- A la une : la toile et sa loupe --- */
.featured { padding-bottom: 0; }
.featured-grid {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: clamp(2rem, 6vw, 7rem); max-width: var(--measure); margin: 0 auto; align-items: center;
}
.featured-frame {
  position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-deep);
  box-shadow: 0 40px 80px -40px rgba(17, 17, 17, 0.6); border: 14px solid var(--ink);
}
.featured-frame img { width: 100%; height: 100%; object-fit: cover; }
.lens {
  position: absolute; width: 200px; height: 200px; border-radius: 50%;
  border: 3px solid var(--paper); box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(17, 17, 17, 0.3);
  background-color: #fff; background-repeat: no-repeat; pointer-events: none;
  opacity: 0; transform: scale(0.8); transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.featured-frame--lens .lens { opacity: 1; transform: scale(1); }
.featured-hint { margin-top: 1rem; font-size: 0.82rem; color: var(--grey); letter-spacing: 0.02em; }
.featured-text .work-meta { margin: -0.5rem 0 1.5rem; }
.featured-desc { color: var(--ink-soft); max-width: 48ch; }
.featured-text .work-where { margin-top: 2rem; max-width: 48ch; }

/* --- Les oeuvres (toiles carrees) --- */
.works {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 2.5rem);
  max-width: var(--measure); margin: 0 auto;
}
.work { display: flex; flex-direction: column; }
.work-frame {
  position: relative; display: block; width: 100%; aspect-ratio: 1; padding: 0; border: 0;
  background: var(--paper-deep); overflow: hidden;
  box-shadow: 0 30px 60px -34px rgba(17, 17, 17, 0.55);
  transition: transform var(--duration-slow) var(--ease-out), box-shadow var(--duration-slow) var(--ease-out);
}
.work-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease-out); }
.work-frame::after {
  content: ""; position: absolute; inset: 0; border: 0 solid var(--ink);
  transition: border-width var(--duration-normal) var(--ease-out);
}
.work-frame:hover { transform: translateY(-6px) rotate(-0.6deg); box-shadow: 0 50px 80px -40px rgba(17, 17, 17, 0.6); }
.work-frame:hover img { transform: scale(1.04); }
.work-frame:hover::after { border-width: 10px; }
.work-body { padding: 1.2rem 0 0; }
.work-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.work-title { font-family: var(--font-display); font-weight: 600; font-size: 1.35rem; line-height: 1.15; }
.work-status {
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 600;
  padding: 0.3rem 0.6rem; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap;
}
.work-status--disponible { border-color: var(--red); color: var(--red); }
.work-subject { color: var(--grey); font-size: 0.95rem; margin-top: 0.2rem; }
.work-meta { font-size: 0.85rem; color: var(--grey); margin-top: 0.4rem; letter-spacing: 0.02em; }
.work-where { margin-top: 1rem; padding-top: 0.9rem; border-top: 1px solid var(--line); display: grid; gap: 0.25rem; }
.work-where-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); font-weight: 600; }
.work-where-value { font-size: 0.95rem; line-height: 1.5; color: var(--ink-soft); }
.work-where-value a { text-decoration-color: var(--red); text-underline-offset: 3px; }
.work-where-value strong { font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.work-where-map { font-size: 0.85rem; text-decoration-color: var(--red); text-underline-offset: 3px; margin-top: 0.3rem; }

/* --- Photos en carres (coulisses, format Instagram) --- */
.squares { display: grid; max-width: var(--measure); margin: 0 auto; grid-template-columns: repeat(3, 1fr); gap: clamp(0.6rem, 1.4vw, 1.2rem); }
.square { position: relative; aspect-ratio: 1; overflow: hidden; background: var(--paper-deep); }
.square img, .square video { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.square:hover img, .square:hover video { transform: scale(1.04); }
.square figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1rem;
  background: linear-gradient(to top, rgba(17, 17, 17, 0.72), transparent);
  color: var(--paper); opacity: 0; transform: translateY(6px);
  transition: opacity var(--duration-normal) var(--ease-out), transform var(--duration-normal) var(--ease-out);
}
.square figcaption span { font-size: 0.82rem; letter-spacing: 0.02em; color: rgba(244, 241, 236, 0.85); }
.square:hover figcaption, .square:focus-within figcaption { opacity: 1; transform: none; }

/* --- Reel --- */
.reel-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); max-width: var(--measure); margin: 0 auto; align-items: center; }
.reel-text .lead { color: rgba(244, 241, 236, 0.8); }
.reel { position: relative; width: min(440px, 100%); margin: 0 auto; aspect-ratio: 4 / 5; overflow: hidden; background: #000; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9); }
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel--playing video { object-fit: contain; }
.reel-play {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(17, 17, 17, 0.15); border: 0; color: var(--paper);
  font-size: 0.8rem; letter-spacing: 0.2em; text-transform: uppercase; transition: background var(--duration-normal);
}
.reel-play svg { width: 76px; height: 76px; padding: 22px; border-radius: 50%; background: var(--red); color: #fff; transition: transform var(--duration-normal) var(--ease-out); }
.reel-play:hover { background: rgba(17, 17, 17, 0.3); }
.reel-play:hover svg { transform: scale(1.08); }
.reel--playing .reel-play { display: none; }

/* --- Agrandissement --- */
.lightbox { border: 0; padding: 0; max-width: min(1200px, 94vw); width: 100%; max-height: 92vh; background: var(--paper); color: var(--ink); box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.7); }
.lightbox::backdrop { background: rgba(0, 0, 0, 0.82); backdrop-filter: blur(6px); }
.lightbox-body { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); max-height: 92vh; }
/* Colonne image de l'agrandissement : la photo prend la place restante, la
   legende et les vignettes gardent la leur en bas. Sans cette colonne souple,
   les vignettes se faisaient couper par le bord de la fenetre. */
.lightbox-figure {
  background: var(--ink);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  padding: 0 0 1.1rem;
  overflow: hidden;
  min-height: 0;
}
.lightbox-figure img { width: 100%; flex: 1 1 auto; min-height: 0; max-height: 92vh; object-fit: contain; }
.lightbox-info { padding: clamp(1.5rem, 4vw, 3.5rem); overflow: auto; display: flex; flex-direction: column; }
.lightbox-meta { font-size: 0.85rem; color: var(--grey); letter-spacing: 0.02em; margin-bottom: 1.2rem; }
.lightbox-desc { color: var(--ink-soft); }
.lightbox-where { margin-top: 1.5rem; }
.lightbox-nav { margin-top: auto; padding-top: 2rem; display: flex; align-items: center; gap: 1rem; }
.lightbox-count { font-size: 0.8rem; letter-spacing: 0.16em; color: var(--grey); }
.lightbox-arrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: none; color: var(--ink); display: grid; place-items: center; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast); }
.lightbox-arrow svg { width: 20px; height: 20px; }
.lightbox-arrow:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.lightbox-close {
  position: absolute; top: 0.8rem; right: 0.8rem; width: 44px; height: 44px; border-radius: 50%;
  border: 0; background: var(--paper); color: var(--ink); display: grid; place-items: center; z-index: 2;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.lightbox-close svg { width: 20px; height: 20px; }
.lightbox-close:hover { background: var(--red); color: #fff; }

/* ==========================================================================
   EVENEMENTS
   ========================================================================== */
.events { max-width: var(--measure); margin: 0 auto; display: grid; gap: 2.4rem; }
.events-group-title {
  display: flex; align-items: baseline; gap: 0.8rem;
  font-family: var(--font-display); font-weight: 300; font-size: 1.7rem;
  padding-bottom: 0.9rem; border-bottom: 1px solid var(--ink); margin-bottom: 0.5rem;
}
.events-count { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--red); font-weight: 600; }
.events-empty { color: var(--grey); font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 1.15rem; padding: 1.2rem 0; }
.event {
  display: grid; grid-template-columns: 7rem minmax(0, 1fr) 220px; gap: clamp(1.2rem, 3vw, 3rem);
  padding: 2rem 0; border-bottom: 1px solid var(--line); align-items: start;
  transition: background var(--duration-slow);
}
.event--targeted { background: linear-gradient(to right, rgba(232, 50, 60, 0.06), transparent 40%); }
.event-when { display: flex; flex-direction: column; line-height: 1; }
.event-day { font-family: var(--font-display); font-style: italic; font-weight: 300; font-size: 3.6rem; letter-spacing: -0.04em; }

/* Evenement qui dure : on montre les deux bornes, pas seulement le premier
   jour. Une exposition de trois semaines annoncee par un seul chiffre se lit
   comme une date unique, et le visiteur croit avoir rate. */
.event-when--periode { gap: 0.35rem; }
.event-when--periode .event-day { font-size: 2.3rem; }
.event-when--periode .event-month { margin-top: 0.15rem; }
.event-borne { display: flex; flex-direction: column; }
.event-vers { font-size: 1rem; line-height: 1; color: var(--red); margin: 0.1rem 0; }

.event-place-lien {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: rgba(17, 17, 17, 0.25);
  text-underline-offset: 3px;
  transition: text-decoration-color var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.event-place-lien:hover, .event-place-lien:focus-visible { color: var(--ink); text-decoration-color: var(--red); }
.event-month { font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); margin-top: 0.4rem; }
.event--now .event-day { color: var(--red); }
.event-kind { display: flex; align-items: center; gap: 0.5rem; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-weight: 600; color: var(--grey); margin-bottom: 0.5rem; }
.event-pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 0 rgba(232, 50, 60, 0.5); animation: pulse 1.8s ease-out infinite; }
@keyframes pulse { to { box-shadow: 0 0 0 10px rgba(232, 50, 60, 0); } }
.event-title { font-family: var(--font-display); font-weight: 600; font-size: 1.6rem; line-height: 1.15; margin-bottom: 0.4rem; }
.event-dates { font-size: 0.95rem; color: var(--ink-soft); }
.event-place { font-size: 0.95rem; color: var(--grey); }
.event-text { margin-top: 0.8rem; color: var(--ink-soft); max-width: 58ch; }
.event-link { display: inline-block; margin-top: 0.8rem; font-size: 0.9rem; text-decoration-color: var(--red); text-underline-offset: 3px; }
.event-figure { aspect-ratio: 1; overflow: hidden; }
.event-figure img { width: 100%; height: 100%; object-fit: cover; }

.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 1.4rem; }
.share-label { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--grey); font-weight: 600; margin-right: 0.4rem; }
.share-btn {
  display: inline-flex; align-items: center; padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--line); background: none; color: var(--ink); font-size: 0.85rem; font-weight: 500;
  text-decoration: none; transition: background var(--duration-fast), color var(--duration-fast), border-color var(--duration-fast);
}
.share-btn:hover { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.share-btn--main { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.share-btn--main:hover { background: var(--red); border-color: var(--red); color: #fff; }

.follow-inner { max-width: var(--measure); margin: 0 auto; }
.follow .title-xl { max-width: 18ch; }

.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translate(-50%, 20px); z-index: 300;
  background: var(--ink); color: var(--paper); padding: 0.8rem 1.2rem; border-radius: 999px;
  font-size: 0.9rem; box-shadow: 0 20px 40px -20px rgba(0, 0, 0, 0.6); opacity: 0;
  transition: opacity var(--duration-normal), transform var(--duration-normal) var(--ease-out);
  max-width: min(90vw, 480px); text-align: center;
}
.toast--on { opacity: 1; transform: translate(-50%, 0); }

/* ==========================================================================
   L'ARTISTE
   ========================================================================== */
.artiste { overflow: hidden; }
.artiste-grid, .detail-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: clamp(2rem, 6vw, 7rem); max-width: var(--measure); margin: 0 auto; align-items: center; }
.detail-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: start; }
.artiste-figure { position: relative; isolation: isolate; }
.artiste-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 40%; }
.artiste-figure::before { content: ""; position: absolute; inset: 1.5rem -1.5rem -1.5rem 1.5rem; border: 1px solid var(--line); z-index: -1; }
.artiste-sign { width: 220px; margin-top: 2.5rem; }
.facts { margin-top: 2.5rem; border-top: 1px solid var(--line); }
.facts li {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1rem; align-items: baseline;
  padding: 1.1rem 0; border-bottom: 1px solid var(--line);
  font-family: var(--font-display); font-weight: 300; font-size: 1.2rem; line-height: 1.3;
}
.facts-num { font-family: var(--font-body); font-size: 0.75rem; letter-spacing: 0.2em; color: var(--red); font-weight: 600; }

.detail { padding-top: 0; }
.detail::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: min(46vw, 640px);
  background: url("../assets/img/texture.jpg") center/380px repeat; opacity: 0.07;
  mask-image: linear-gradient(to left, #000, transparent); -webkit-mask-image: linear-gradient(to left, #000, transparent);
  pointer-events: none;
}
.detail-grid { position: relative; z-index: 1; }
.detail-figure { position: sticky; top: 6rem; }
.detail-figure img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center 35%; box-shadow: 0 30px 60px -30px rgba(17, 17, 17, 0.45); }
.detail-figure figcaption { margin-top: 0.9rem; font-size: 0.82rem; color: var(--grey); letter-spacing: 0.02em; }
.detail-text { padding-top: clamp(0rem, 4vw, 4rem); }

.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 6vw, 7rem); align-items: center; max-width: var(--measure); margin: 0 auto; }
.contact-section .lead { color: rgba(244, 241, 236, 0.8); max-width: 40ch; }

/* --- Boutons de contact ---
   Trois actions de meme forme, une par canal, plutot qu'une liste de liens
   soulignes. Le courriel est plein, les deux autres sont en contour : la
   hierarchie se lit sans avoir a lire. Le rouge reste reserve au coeur, il
   n'apparait ici que sur la fleche au survol. */
.contact-actions { display: grid; gap: 0.85rem; }

.contact-btn {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 1.15rem;
  padding: 1.1rem 1.35rem;
  border: 1px solid rgba(244, 241, 236, 0.28);
  border-radius: 3px;
  color: var(--paper);
  text-decoration: none;
  transition: background-color var(--duration-normal) var(--ease-out),
              border-color var(--duration-normal) var(--ease-out),
              color var(--duration-normal) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}
.contact-btn:hover,
.contact-btn:focus-visible {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
  transform: translateY(-2px);
}
.contact-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }

.contact-btn--principal {
  background: var(--paper);
  border-color: var(--paper);
  color: var(--ink);
}
.contact-btn--principal:hover,
.contact-btn--principal:focus-visible { background: #fff; border-color: #fff; }

.contact-btn-icone { display: flex; }
.contact-btn-icone svg { width: 22px; height: 22px; }

.contact-btn-texte { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.contact-btn-label {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.62;
}
.contact-btn-valeur {
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.45rem);
  line-height: 1.15;
  overflow-wrap: anywhere;
}

.contact-btn-fleche { display: flex; opacity: 0.45; transition: opacity var(--duration-normal), transform var(--duration-normal) var(--ease-out); }
.contact-btn-fleche svg { width: 20px; height: 20px; }
.contact-btn:hover .contact-btn-fleche,
.contact-btn:focus-visible .contact-btn-fleche { opacity: 1; transform: translateX(5px); color: var(--red); }

.contact-lieu {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  color: rgba(244, 241, 236, 0.55);
}
.contact-lieu svg { width: 16px; height: 16px; flex: none; }

@media (prefers-reduced-motion: reduce) {
  .contact-btn, .contact-btn-fleche { transition: none; }
  .contact-btn:hover { transform: none; }
}

/* --- Pied de page --- */
.site-footer { background: var(--ink); color: rgba(244, 241, 236, 0.7); padding: 3rem var(--gutter) 2.5rem; text-align: center; font-size: 0.9rem; border-top: 1px solid var(--line-light); }
.site-footer img { width: 120px; margin: 0 auto 1.5rem; }
.site-footer-nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 1.6rem; margin-bottom: 1.5rem; }
.site-footer-nav a { color: var(--paper); text-decoration: none; font-size: 0.9rem; border-bottom: 1px solid transparent; transition: border-color var(--duration-fast); }
.site-footer-nav a:hover { border-color: var(--red); }
.site-footer-small { font-size: 0.78rem; color: rgba(244, 241, 236, 0.45); margin-top: 0.5rem; }
.site-footer-replay { display: inline-block; margin-top: 1.5rem; font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(244, 241, 236, 0.45); text-decoration: none; }
.site-footer-replay:hover { color: var(--paper); }

/* --- Apparitions --- */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out); }
/* Le decoupage porte sur le CONTENU, jamais sur l'element observe.
   Un element ecrete a zero a une aire nulle : l'IntersectionObserver ne le
   voit jamais croiser la fenetre, il ne recoit donc jamais sa classe
   d'apparition, et reste ecrete pour toujours. Huit figures etaient dans ce
   cas et n'apparaissaient jamais. */
[data-reveal="clip"] { transform: none; clip-path: none; }
[data-reveal="clip"] > * { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-out); }
[data-reveal="clip"].is-visible > * { clip-path: inset(0 0 0 0); }
[data-reveal].is-visible { opacity: 1; transform: none; }
[data-reveal]:nth-child(2) { transition-delay: 80ms; }
[data-reveal]:nth-child(3) { transition-delay: 160ms; }
[data-reveal]:nth-child(4) { transition-delay: 240ms; }
[data-reveal]:nth-child(5) { transition-delay: 320ms; }

/* --- Responsive --- */
@media (max-width: 1000px) {
  .works { grid-template-columns: repeat(2, 1fr); }
  .event { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .event-figure { grid-column: 2; max-width: 240px; }
}
@media (max-width: 900px) {
  .featured-grid, .reel-grid, .artiste-grid, .detail-grid, .contact-grid, .section-head--split, .lightbox-body { grid-template-columns: 1fr; }
  .section-head--split .lead { justify-self: start; }
  .featured-frame { border-width: 10px; }
  .lens { display: none; }
  .detail-figure { position: static; }
  .detail::after { display: none; }
  .artiste-figure { order: -1; max-width: 480px; }
  .squares { grid-template-columns: repeat(2, 1fr); }
  .square figcaption { opacity: 1; transform: none; }
  .lightbox-figure img { max-height: 50vh; }
  .page-hero { min-height: min(70svh, 640px); }
}
@media (max-width: 720px) {
  .nav-toggle { display: block; }
  .site-nav {
    position: fixed; inset: 0; background: var(--ink); color: var(--paper);
    flex-direction: column; justify-content: center; gap: 2rem;
    transform: translateY(-100%); transition: transform var(--duration-normal) var(--ease-out); z-index: 55;
  }
  .site-nav a { font-family: var(--font-display); font-size: 2rem; font-weight: 300; }
  .site-nav--open { transform: none; }
  body.nav-open .site-header { color: var(--paper); }
  body.nav-open .brand-light { display: block; }
  body.nav-open .brand-ink { display: none; }
  .works { grid-template-columns: 1fr; }
  .event { grid-template-columns: 1fr; gap: 0.8rem; }
  .event-when { flex-direction: row; align-items: baseline; gap: 0.6rem; }
  .event-figure { grid-column: 1; }
  .intro-enter { white-space: normal; text-align: center; width: min(280px, 80vw); justify-content: center; }
}

/* --- Mouvement reduit --- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .marquee-track, .event-pulse { animation: none; }
  [data-reveal], [data-reveal="clip"], [data-reveal="clip"] > * { transition: none; opacity: 1; transform: none; clip-path: none; }
  .square img, .square video, .work-frame, .work-frame img, .btn, .site-nav a::after, .lens { transition: none; }
  #crowd, .intro-signature, .intro-enter { transition: none; }
}

/* ---------------------------------------------------------------------------
   Pages legales : mentions legales, confidentialite.
   Texte long, une seule colonne etroite, meme papier que le reste du site.
   --------------------------------------------------------------------------- */
.legal-inner { max-width: 62ch; margin: 0 auto; }
.legal-lead {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink);
  margin: 0 0 3.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--line);
}
.legal h2 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem);
  line-height: 1.15;
  margin: 3.5rem 0 1rem;
  color: var(--ink);
}
.legal h2:first-child { margin-top: 0; }
.legal p { font-size: var(--text-base); line-height: 1.7; color: var(--ink-soft); margin: 0 0 1.1rem; }
.legal a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.25em; text-decoration-thickness: 1px; }
.legal a:hover, .legal a:focus-visible { color: var(--red); text-decoration-color: var(--red); }
.legal code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--paper-deep);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}
.legal-list { list-style: none; padding: 0; margin: 0 0 1.6rem; }
.legal-list li {
  font-size: var(--text-base);
  line-height: 1.7;
  color: var(--ink-soft);
  padding: 0.55rem 0 0.55rem 1.1rem;
  border-left: 2px solid var(--line);
  margin-bottom: 0.35rem;
}
.legal-list strong { color: var(--ink); }
.legal-date {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
  color: var(--grey);
}

/* Marqueur de champ non renseigne. Volontairement criard : rien ne doit
   partir en production avec un trou dedans. */
.a-completer {
  background: var(--red);
  color: #fff;
  padding: 0.08em 0.4em;
  border-radius: 2px;
  font-size: 0.92em;
  font-style: italic;
}

/* Ligne legale du pied de page, sous la mention de reproduction. */
.site-footer-legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  margin-top: 1.6rem;
}
.site-footer-legal a {
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  /* var(--grey) sur le noir du pied de page ne donne que 3,6:1, sous le
     minimum de 4,5:1 exige pour du texte de cette taille. */
  color: rgba(244, 241, 236, 0.66);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out);
}
.site-footer-legal a:hover, .site-footer-legal a:focus-visible {
  color: var(--red);
}

/* Legende sous l'apercu video : dit ou part le clic. */
.reel-note {
  margin-top: 0.9rem;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--grey);
  text-align: center;
}
.reel .reel-play { text-decoration: none; }

/* ---------------------------------------------------------------------------
   « Mon regard » : le livre d'or. Formulaire sur papier, regards sur fond noir,
   en cartes carrees pour rester dans la grille du site.
   --------------------------------------------------------------------------- */
.regard-form-inner { max-width: 46rem; margin: 0 auto; }
.regard-form { margin-top: 2.5rem; }
.regard-champ { margin-bottom: 1.6rem; }
.regard-champ label {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 0.5rem;
}
.regard-champ input,
.regard-champ textarea {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--ink);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0.7rem 0;
  border-radius: 0;
  transition: border-color var(--duration-fast) var(--ease-out);
}
.regard-champ textarea { resize: vertical; line-height: 1.6; }
.regard-champ input:focus,
.regard-champ textarea:focus {
  outline: none;
  border-bottom-color: var(--red);
}
.regard-champ input::placeholder,
.regard-champ textarea::placeholder { color: rgba(17, 17, 17, 0.3); }
.regard-compteur {
  margin: 0.4rem 0 0;
  text-align: right;
  font-size: 0.75rem;
  color: var(--grey);
}

/* Le piege a robots. Hors ecran plutot que display:none : certains robots
   ignorent les champs caches, aucun n'ignore un champ qui existe vraiment. */
.regard-piege {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.regard-mention {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--grey);
  margin: 0 0 1.8rem;
  padding-left: 1rem;
  border-left: 2px solid var(--line);
}
.regard-mention a { color: var(--ink); text-underline-offset: 0.2em; }

.regard-retour {
  margin: 1.2rem 0 0;
  font-size: 0.9rem;
  min-height: 1.4em;
}
.regard-retour--ok { color: var(--ink); }
.regard-retour--erreur { color: var(--red); }

/* --- La liste des regards ---
   Une liste, pas une grille de carres : avec une centaine de messages, des
   cartes carrees deviennent un mur illisible. Ici chaque regard est une ligne,
   separee par un filet net, la signature a gauche et le texte a droite comme
   dans une page de credits. Le texte peut respirer sur toute sa longueur. */
.regards-liste {
  max-width: var(--measure);
  margin: 0 auto;
  border-top: 1px solid rgba(244, 241, 236, 0.28);
}
.regard {
  display: grid;
  grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr);
  column-gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
  padding: clamp(1.8rem, 1.2rem + 1.4vw, 2.8rem) 0;
  border-bottom: 1px solid rgba(244, 241, 236, 0.28);
  transition: background-color var(--duration-normal) var(--ease-out);
}
.regard:hover { background-color: rgba(244, 241, 236, 0.035); }

.regard-signature {
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  margin: 0;
  padding: 0;
  border: 0;
}
.regard-nom {
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: 0;
  color: var(--paper);
  line-height: 1.2;
}
.regard-nom::before { content: '— '; color: var(--red); }
.regard-date {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(244, 241, 236, 0.5);
  white-space: nowrap;
}

.regard-message {
  grid-column: 2;
  grid-row: 1;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem);
  line-height: 1.5;
  color: var(--paper);
  margin: 0;
  max-width: 54ch;
}

@media (max-width: 40rem) {
  .regard {
    grid-template-columns: 1fr;
    row-gap: 0.9rem;
    padding: 1.6rem 0;
  }
  .regard-signature, .regard-message { grid-column: 1; }
  .regard-signature { grid-row: 2; flex-direction: row; align-items: baseline; gap: 0.8rem; }
  .regard-message { grid-row: 1; font-size: 1.1rem; }
}

.regard--neuf { animation: regard-arrive var(--duration-slow) var(--ease-out) both; }
@keyframes regard-arrive {
  from { opacity: 0; transform: translateY(10px); background-color: rgba(232, 50, 60, 0.12); }
  to   { opacity: 1; transform: none; }
}

.regards-attente {
  text-align: center;
  color: rgba(244, 241, 236, 0.5);
  font-size: var(--text-base);
  padding: 3rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .regard, .regard--neuf { transition: none; animation: none; }
}

/* --- Vignettes de l'agrandissement ---
   Les photos d'une meme oeuvre, et elles seules. Le bandeau ne s'affiche que
   s'il y a au moins deux photos. */
.lightbox-legende {
  flex: none;
  margin-top: 0.7rem;
  font-size: 0.82rem;
  letter-spacing: 0.03em;
  color: var(--grey);
  min-height: 1.2em;
}
.lightbox-vignettes {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 0.9rem;
}
.lightbox-vignette {
  width: 62px;
  height: 62px;
  padding: 0;
  border: 1px solid var(--line);
  background: none;
  overflow: hidden;
  opacity: 0.55;
  transition: opacity var(--duration-fast) var(--ease-out), border-color var(--duration-fast) var(--ease-out);
}
.lightbox-vignette img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lightbox-vignette:hover, .lightbox-vignette:focus-visible { opacity: 1; }
.lightbox-vignette.is-active { opacity: 1; border-color: var(--red); }

/* --- Ancres ---
   L'entete est fixe : sans cette marge, un titre vise par une ancre se
   retrouve cache derriere le menu. */
[id] { scroll-margin-top: 6.5rem; }

/* Annonce d'evenement : la periode passe devant le titre. C'est la premiere
   information qu'on cherche, elle ne doit pas etre une ligne de detail. */
.event-dates { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.9rem; margin-bottom: 0.35rem; }
.event-dates-periode {
  font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--ink);
}
.event-horaires { font-size: 0.9rem; color: var(--grey); }
.event-place { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.7rem; margin-top: 0.5rem; }
.event-place-label {
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  flex: none;
}

/* Texte d'introduction de la galerie, a la place de l'oeuvre a la une.
   Composition centree : un titre a gauche avec deux colonnes poussees a
   droite laissait un grand trou au milieu. Ici tout est aligne sur un meme
   axe, et la colonne de lecture reste a une largeur confortable. */
.manifeste-inner {
  max-width: 46rem;
  margin: 0 auto;
  text-align: center;
}
.manifeste .eyebrow { justify-content: center; }
.manifeste-titre {
  max-width: 18ch;
  margin: 0.6rem auto 0;
  text-align: center;
}

/* Un filet court sous le titre, pour poser l'axe central. */
.manifeste-titre::after {
  content: "";
  display: block;
  width: 3.5rem;
  height: 1px;
  margin: 2.2rem auto 0;
  background: var(--red);
}

.manifeste-texte {
  max-width: 46ch;
  margin: 2rem auto 0;
  text-align: left;
}
/* Le bloc ne porte plus qu'une phrase : inutile de garder une respiration
   pleine sous lui, la grille des oeuvres remonte d'autant. */
.manifeste { padding-bottom: clamp(2rem, 1.5rem + 1.5vw, 3rem); }
.manifeste-texte p {
  font-size: var(--text-base);
  line-height: 1.75;
  color: var(--ink-soft);
  margin: 0 0 1.2rem;
}
.manifeste-texte p:last-child { margin-bottom: 0; }

/* La premiere phrase porte le texte : elle est centree et plus grande, les
   suivantes reprennent le fil en lecture normale. */
.manifeste-texte p:first-child {
  font-family: var(--font-display);
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--ink);
  text-align: center;
  margin-bottom: 2rem;
}

@media (max-width: 40rem) {
  .manifeste-texte { max-width: 100%; }
  .manifeste-titre::after { margin-top: 1.6rem; }
}

/* Contenu destine aux lecteurs d'ecran et aux moteurs, sorti du champ visuel.
   Ce n'est pas du texte cache au sens des moteurs : il decrit exactement ce
   que la page montre, ici une animation qui tient lieu de titre. */
.hors-ecran {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.intro-noscript p { max-width: 46ch; margin: 1.2rem auto; color: rgba(244, 241, 236, 0.75); }
.intro-noscript nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 1.4rem; margin-top: 1.6rem; }
.intro-noscript nav a { color: rgba(244, 241, 236, 0.75); font-size: 0.9rem; }