@charset "utf-8";
/* --- 0. Polices, servies par le site lui-même ---------------------------
   Elles étaient chargées depuis les serveurs de Google, ce qui transmettait
   l'adresse IP de chaque visiteur à un tiers sans son consentement. Les
   fichiers sont désormais déposés avec le site. « font-display: swap »
   affiche immédiatement la police de secours, puis substitue la bonne. */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-v21-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-v21-latin-300italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-v21-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-v21-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/cormorant-garamond-v21-latin-500.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/eb-garamond-v33-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/eb-garamond-v33-latin-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 300; font-display: swap;
  src: url("/assets/fonts/inter-v20-latin-300.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/assets/fonts/inter-v20-latin-regular.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("/assets/fonts/inter-v20-latin-500.woff2") format("woff2"); }

/* =====================================================================
   HÔTEL BAUDY — GIVERNY · Feuille de style principale
   Direction artistique : papier ancien, fusain, vert profond, or vieilli.
   ===================================================================== */

/* --- 1. Jetons de design ---------------------------------------------- */
:root {
  --paper:      #F3EEE3;
  --ink:        #292A25;
  --green:      #24382D;
  --green-soft: #5C6951;
  --gold:       #B69A59;
  --beige:      #D8CDB9;
  --off-white:  #FAF8F2;

  --ink-70: rgba(41, 42, 37, .72);
  --ink-55: rgba(41, 42, 37, .68);
  --ink-12: rgba(41, 42, 37, .12);
  --ink-08: rgba(41, 42, 37, .08);
  --gold-40: rgba(182, 154, 89, .40);
  --gold-20: rgba(182, 154, 89, .22);
  --paper-90: rgba(243, 238, 227, .90);

  --font-display: "Cormorant Garamond", "EB Garamond", Garamond, "Times New Roman", serif;
  --font-serif:   "EB Garamond", "Cormorant Garamond", Garamond, serif;
  --font-sans:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

  --step--1: clamp(.78rem, .76rem + .12vw, .86rem);
  --step-0:  clamp(1rem, .97rem + .16vw, 1.09rem);
  --step-1:  clamp(1.16rem, 1.10rem + .30vw, 1.35rem);
  --step-2:  clamp(1.45rem, 1.32rem + .62vw, 1.85rem);
  --step-3:  clamp(1.85rem, 1.60rem + 1.20vw, 2.75rem);
  --step-4:  clamp(2.30rem, 1.85rem + 2.10vw, 4.00rem);
  --step-5:  clamp(2.50rem, 1.90rem + 3.70vw, 5.60rem);

  --gutter: clamp(1.25rem, 4vw, 4.5rem);
  --wrap: 1320px;
  --measure: 64ch;
  --section-y: clamp(4.5rem, 10vw, 9.5rem);

  --ease: cubic-bezier(.22, .61, .27, 1);
  --dur: 700ms;
  --header-h: 78px;
}

/* --- 2. Base ----------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: 350;
  line-height: 1.75;
  letter-spacing: .004em;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* grain de papier, très discret, sur toute la page */
body::before {
  content: "";
  position: fixed;
  inset: -10%;
  z-index: 0;
  pointer-events: none;
  opacity: .38;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='.30'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
picture { display: block; }
picture > img { width: 100%; }
.hero__media picture, .page-hero__media picture, .garden-grid picture { height: 100%; }
a { color: inherit; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.08;
  letter-spacing: .002em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p  { margin: 0 0 1.15em; }
p:last-child { margin-bottom: 0; }

::selection { background: var(--gold-40); color: var(--ink); }

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

/* Lien d’évitement : sorti du flux par une translation plutôt que par un
   décalage de -9999px, qui allongeait la boîte de défilement du document. */
.skip-link {
  position: fixed; left: 1rem; top: 1rem; z-index: 200;
  background: var(--green); color: var(--off-white);
  padding: .85rem 1.4rem; font-size: var(--step--1);
  letter-spacing: .12em; text-transform: uppercase; text-decoration: none;
  transform: translateY(calc(-100% - 1.5rem));
  transition: transform 220ms var(--ease);
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* --- 3. Structures ------------------------------------------------------ */
.wrap { width: min(var(--wrap), 100% - var(--gutter) * 2); margin-inline: auto; position: relative; z-index: 1; }
.wrap--narrow { width: min(940px, 100% - var(--gutter) * 2); }
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: clamp(3rem, 6vw, 5.5rem); }
main { position: relative; z-index: 1; }

.rule { height: 1px; background: var(--ink-12); border: 0; margin: 0; }

/* --- 4. Micro-typographie ---------------------------------------------- */
.label {
  display: inline-flex; align-items: center; gap: .85rem;
  font-family: var(--font-sans);
  font-size: clamp(.66rem, .62rem + .12vw, .74rem);
  font-weight: 500;
  letter-spacing: .30em;
  text-transform: uppercase;
  color: var(--green-soft);
  margin: 0 0 1.5rem;
}
.label::before {
  content: ""; width: clamp(24px, 4vw, 46px); height: 1px;
  background: var(--gold); opacity: .8;
}
.label--center { justify-content: center; }
.label--center::after {
  content: ""; width: clamp(24px, 4vw, 46px); height: 1px; background: var(--gold); opacity: .8;
}
.label--light { color: rgba(250, 248, 242, .72); }

.lede {
  font-family: var(--font-serif);
  font-size: var(--step-2);
  line-height: 1.5;
  font-weight: 400;
  color: var(--ink-70);
  max-width: 34ch;
}
.lede--italic { font-style: italic; }

.prose { max-width: var(--measure); color: var(--ink-70); }
.prose p + p { margin-top: 0; }
.prose strong { font-weight: 500; color: var(--ink); }
.prose a { color: var(--ink); text-decoration-color: var(--gold); text-underline-offset: .25em; }

.meta {
  font-size: var(--step--1);
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-55);
}

/* ornement floral / losange doré */
.ornament { display: block; color: var(--gold); }
.ornament--center { margin-inline: auto; }

/* --- 5. Boutons -------------------------------------------------------- */
.btn {
  --btn-fg: var(--ink);
  --btn-bd: rgba(41, 42, 37, .38);
  display: inline-flex; align-items: center; gap: .8rem;
  padding: 1.05em 2.1em;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--btn-fg);
  border: 1px solid var(--btn-bd);
  background: transparent;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: color 500ms var(--ease), border-color 500ms var(--ease);
}
.btn::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--btn-fill, var(--ink));
  transform: scaleX(0); transform-origin: right;
  transition: transform 620ms var(--ease);
}
.btn > * { position: relative; }
.btn:hover::after, .btn:focus-visible::after { transform: scaleX(1); transform-origin: left; }
.btn:hover, .btn:focus-visible { color: var(--btn-hover-fg, var(--off-white)); border-color: transparent; }
.btn .arrow { transition: transform 500ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }

.btn--gold { --btn-bd: var(--gold); --btn-fill: var(--gold); --btn-hover-fg: var(--green); color: var(--gold); }
.btn--light { --btn-bd: rgba(250, 248, 242, .55); color: var(--off-white); --btn-fill: var(--off-white); --btn-hover-fg: var(--green); }
.btn--solid { background: var(--green); color: var(--off-white); border-color: var(--green); --btn-fill: var(--gold); --btn-hover-fg: var(--green); }

.link-more {
  display: inline-flex; align-items: center; gap: .7rem;
  font-size: var(--step--1); font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--ink);
  padding-bottom: .35rem;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-size: 100% 1px; background-position: 0 100%; background-repeat: no-repeat;
  transition: background-size 600ms var(--ease), color 400ms var(--ease);
}
.link-more:hover { background-size: 40% 1px; }
.link-more--light { color: var(--off-white); }

/* --- 6. En-tête -------------------------------------------------------- */
.header {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100;
  transition: background-color 600ms var(--ease), backdrop-filter 600ms var(--ease), box-shadow 600ms var(--ease), border-color 600ms var(--ease);
  border-bottom: 1px solid transparent;
}
.header__inner {
  width: min(var(--wrap), 100% - var(--gutter) * 1.4);
  margin-inline: auto;
  min-height: var(--header-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 3rem);
}
.header.is-scrolled {
  background: var(--paper-90);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--gold-20);
}
.header--solid { position: sticky; background: var(--paper-90); }

.brand { display: flex; align-items: center; gap: .95rem; text-decoration: none; color: inherit; margin-right: auto; }
.brand__mark { width: 46px; height: 46px; flex: none; color: var(--gold); }
.brand__text { display: grid; line-height: 1; }
.brand__name {
  font-family: var(--font-display); font-size: 1.24rem; font-weight: 400;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
}
.brand__place {
  font-size: .60rem; letter-spacing: .40em; text-transform: uppercase;
  color: var(--ink-55); margin-top: .42rem;
}

.nav { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2.1rem); }
.nav__link {
  font-size: .78rem; letter-spacing: .17em; text-transform: uppercase;
  text-decoration: none; color: var(--ink-70); white-space: nowrap;
  padding: .4rem 0; position: relative;
  transition: color 400ms var(--ease);
}
.nav__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 100%;
  background: var(--gold); transform: scaleX(0); transform-origin: right;
  transition: transform 500ms var(--ease);
}
.nav__link:hover, .nav__link[aria-current="page"] { color: var(--ink); }
.nav__link:hover::after, .nav__link[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }

.header__tools { display: flex; align-items: center; gap: 1.1rem; }
.langs { display: flex; align-items: center; gap: .45rem; font-size: .72rem; letter-spacing: .14em; }
.langs a { text-decoration: none; color: var(--ink-55); transition: color 350ms var(--ease); }
.langs a:hover { color: var(--ink); }
.langs a[aria-current="true"] { color: var(--ink); font-weight: 600; }
.langs span { color: var(--ink-12); }
.header__cta {
  font-size: .70rem; letter-spacing: .18em; text-transform: uppercase;
  text-decoration: none; color: var(--green); border: 1px solid var(--gold-40);
  padding: .68em 1.25em; transition: background-color 450ms var(--ease), color 450ms var(--ease), border-color 450ms var(--ease);
}
.header__cta:hover { background: var(--green); color: var(--off-white); border-color: var(--green); }

.burger {
  display: none; width: 44px; height: 44px; border: 0; background: transparent;
  cursor: pointer; padding: 0; place-items: center; color: var(--ink);
}
.burger { display: none; align-content: center; justify-items: center; gap: 6px; }
.burger span { display: block; width: 24px; height: 1px; background: currentColor; margin: 0; transition: transform 450ms var(--ease), opacity 300ms var(--ease); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--paper);
  padding: calc(var(--header-h) + 2rem) var(--gutter) 3rem;
  display: flex; flex-direction: column; gap: 2rem;
  opacity: 0; visibility: hidden; transform: translateY(-12px);
  transition: opacity 500ms var(--ease), transform 600ms var(--ease), visibility 500ms;
  overflow-y: auto;
}
.drawer.is-open { opacity: 1; visibility: visible; transform: none; }
.drawer__nav { display: flex; flex-direction: column; }
.drawer__nav a {
  font-family: var(--font-display); font-size: clamp(1.9rem, 8vw, 2.6rem);
  text-decoration: none; padding: .42em 0; border-bottom: 1px solid var(--ink-08);
  display: flex; justify-content: space-between; align-items: baseline;
}
.drawer__nav a span { font-family: var(--font-sans); font-size: .62rem; letter-spacing: .2em; color: var(--gold); }
.drawer__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }


/* --- 6 bis. En-tête clair tant qu'il survole une image ------------------ */
.header:not(.is-scrolled) { color: var(--off-white); }
.header:not(.is-scrolled)::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 210%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(18, 29, 23, .58) 0%, rgba(18, 29, 23, .28) 45%, rgba(18, 29, 23, 0) 100%);
}
.header:not(.is-scrolled) .brand__name { color: var(--off-white); }
.header:not(.is-scrolled) .brand__place { color: rgba(250, 248, 242, .62); }
.header:not(.is-scrolled) .nav__link { color: rgba(250, 248, 242, .84); }
.header:not(.is-scrolled) .nav__link:hover,
.header:not(.is-scrolled) .nav__link[aria-current="page"] { color: var(--off-white); }
.header:not(.is-scrolled) .langs a { color: rgba(250, 248, 242, .72); }
.header:not(.is-scrolled) .langs a[aria-current="true"] { color: var(--off-white); }
.header:not(.is-scrolled) .langs span { color: rgba(250, 248, 242, .32); }
.header:not(.is-scrolled) .header__cta { color: var(--off-white); border-color: rgba(250, 248, 242, .55); }
.header:not(.is-scrolled) .header__cta:hover { background: var(--off-white); color: var(--green); border-color: var(--off-white); }
.header:not(.is-scrolled) .burger { color: var(--off-white); }
/* tiroir ouvert : l’en-tête repasse en fusain sur le fond papier */
.menu-open .header::before { display: none; }
.menu-open .header:not(.is-scrolled) .brand__name,
.menu-open .header:not(.is-scrolled) .burger { color: var(--ink); }
.menu-open .header:not(.is-scrolled) .brand__place,
.menu-open .header:not(.is-scrolled) .langs a { color: var(--ink-55); }
.menu-open .header:not(.is-scrolled) .langs a[aria-current="true"] { color: var(--ink); }
.menu-open .header:not(.is-scrolled) .langs span { color: var(--ink-12); }

/* --- 7. Hero ----------------------------------------------------------- */
.hero {
  position: relative; min-height: 100svh;
  display: grid; align-items: center;
  isolation: isolate; overflow: hidden;
  color: var(--off-white);
}
.hero--inner { min-height: clamp(58svh, 62vw, 76svh); }
.hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 56% 46%;
  filter: sepia(.26) saturate(.92) contrast(1.05);
  animation: kenburns 30s var(--ease) infinite alternate; }
@keyframes kenburns {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -1.2%, 0); }
}
.hero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(26, 41, 33, .58) 0%, rgba(26, 41, 33, .22) 30%, rgba(26, 41, 33, .50) 72%, rgba(16, 26, 21, .86) 100%),
    linear-gradient(100deg, rgba(20, 32, 26, .78) 0%, rgba(20, 32, 26, .44) 46%, rgba(20, 32, 26, .04) 78%),
    radial-gradient(130% 100% at 28% 46%, rgba(20, 32, 26, .04), rgba(20, 32, 26, .56));
}
/* grain photographique sur le hero, pour lier la photographie ancienne au papier du site */
.hero__scrim::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}
.hero__inner { padding-block: calc(var(--header-h) + 4rem) clamp(4rem, 10vw, 8rem); }
.hero__credit {
  position: absolute; right: var(--gutter); bottom: 2.4rem; z-index: 2; max-width: 24ch; text-align: right;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; line-height: 1.7;
  color: rgba(250, 248, 242, .78); margin: 0;
}
.hero__credit { max-width: 46ch; }
@media (max-width: 900px) { .hero__credit { display: none; } }
.hero__content { max-width: 46rem; }
.hero h1 {
  text-shadow: 0 2px 26px rgba(16, 26, 21, .38);
  font-size: var(--step-5);
  letter-spacing: .05em;
  text-transform: uppercase;
  font-weight: 300;
  margin: 1.6rem 0 0;
  display: grid;
  gap: .55rem;
}
.hero h1 .hero__place {
  font-family: var(--font-sans);
  font-size: clamp(.68rem, .6rem + .3vw, .82rem);
  font-weight: 400;
  letter-spacing: .48em;
  color: var(--gold);
  padding-left: .3em;
}
.hero__sub {
  text-shadow: 0 2px 20px rgba(16, 26, 21, .40);
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--step-2); line-height: 1.4;
  color: rgba(250, 248, 242, .92);
  margin: 1.6rem 0 0; max-width: 26ch;
}
.hero__text { color: rgba(250, 248, 242, .74); margin: 1.5rem 0 0; max-width: 44ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: clamp(2rem, 4vw, 3rem); }
.hero__scroll {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%);
  display: grid; justify-items: center; gap: .8rem; z-index: 2;
  font-size: .62rem; letter-spacing: .3em; text-transform: uppercase;
  color: rgba(250, 248, 242, .6); text-decoration: none;
}
.hero__scroll i { display: block; width: 1px; height: 46px; background: linear-gradient(rgba(250,248,242,.7), transparent); animation: drop 2.8s var(--ease) infinite; }
@keyframes drop { 0% { transform: scaleY(.2); transform-origin: top; } 60% { transform: scaleY(1); transform-origin: top; } 100% { transform: scaleY(.2); transform-origin: bottom; } }

/* hero de page intérieure */
.page-hero { position: relative; isolation: isolate; color: var(--off-white); overflow: hidden; display: grid; align-items: end; }
.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); }
.page-hero__scrim { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(26,42,34,.78), rgba(26,42,34,.54) 45%, rgba(16,26,21,.90)); }
.page-hero__inner { padding-block: calc(var(--header-h) + 4.5rem) clamp(3rem, 6vw, 5rem); }
.page-hero h1 { font-size: var(--step-4); letter-spacing: .03em; }
.page-hero .lede { color: rgba(250, 248, 242, .82); margin-top: 1.4rem; }


/* --- 7 bis. Hero mobile : la photographie est présentée entière ---------
   En plein écran étroit, une photographie ancienne au format paysage serait
   recadrée jusqu'à devenir illisible. Sur mobile, elle devient donc une
   « planche » posée en haut, et le texte se lit sur le fond vert. */
@media (max-width: 700px) {
  .hero {
    min-height: 0; display: block;
    background: var(--green);
    padding-top: var(--header-h);
  }
  .hero__media { position: relative; inset: auto; z-index: 0; overflow: hidden; }
  .hero__media img,
  .hero__media picture { height: auto; }
  .hero__media img {
    aspect-ratio: 4 / 3; object-fit: cover; object-position: 56% 44%;
    animation: none; transform: none;
  }
  .hero__scrim {
    top: var(--header-h); bottom: auto; height: 75vw; z-index: 1;
    background: linear-gradient(180deg, rgba(16, 26, 21, .48) 0%, rgba(16, 26, 21, .04) 34%, rgba(26, 41, 33, .28) 78%, var(--green) 100%);
  }
  .hero__inner { padding-block: 2.4rem 3.6rem; }
  .hero__scroll { display: none; }
  .hero__credit {
    display: block; position: static; text-align: left; max-width: none;
    margin-top: 2.2rem; font-size: .58rem;
  }
}

/* --- 8. Fil d'Ariane ---------------------------------------------------- */
.crumbs { font-size: .68rem; letter-spacing: .18em; text-transform: uppercase; color: rgba(250,248,242,.62); margin-bottom: 1.6rem; }
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .6rem; }
.crumbs li + li::before { content: "—"; margin-right: .6rem; color: var(--gold); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--off-white); }
.crumbs--dark { color: var(--ink-55); }

/* --- 9. Collage de documents ------------------------------------------- */
.split {
  display: grid; gap: clamp(2.5rem, 6vw, 6rem);
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 900px) {
  .split { grid-template-columns: 1.05fr .95fr; }
  .split--reverse > *:first-child { order: 2; }
}

.collage { position: relative; padding-block: clamp(1rem, 4vw, 3rem); }
.collage__item {
  position: relative; background: var(--off-white);
  padding: clamp(.4rem, .8vw, .7rem);
  box-shadow: 0 18px 42px -22px rgba(41, 42, 37, .55), 0 2px 6px rgba(41, 42, 37, .09);
  transition: transform 800ms var(--ease), box-shadow 800ms var(--ease);
}
.collage__item img { width: 100%; }
.collage__item:hover { rotate: 0deg; transform: translateY(-8px); box-shadow: 0 34px 64px -26px rgba(41, 42, 37, .6); z-index: 9; }
.collage--stack { position: relative; aspect-ratio: 1 / 1.08; }
.collage--stack .collage__item { position: absolute; }
.collage--stack .c1 { left: 0;    top: 5%;     width: 61%; rotate: -2deg;   z-index: 2; }
.collage--stack .c2 { right: 0;   top: 0;      width: 45%; rotate: 2.4deg;  z-index: 3; }
.collage--stack .c3 { left: 5%;   bottom: 0;   width: 37%; rotate: 1.4deg;  z-index: 4; }
.collage--stack .c4 { right: 1%;  bottom: 12%; width: 46%; rotate: -1.6deg; z-index: 5; }
@media (max-width: 720px) {
  .collage--stack { aspect-ratio: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
  .collage--stack .collage__item { position: static; width: auto; rotate: 0deg; }
}

/* --- 10. Grille d'artistes --------------------------------------------- */
.grid-artists {
  display: grid; gap: clamp(1.6rem, 3vw, 2.6rem);
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.artist-card { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.artist-card__frame {
  position: relative; overflow: hidden; background: var(--beige);
  border: 1px solid var(--gold-40);
  padding: 8px;
}
.artist-card__frame::after {
  content: ""; position: absolute; inset: 8px; border: 1px solid rgba(250, 248, 242, .30); pointer-events: none; z-index: 2;
}
.artist-card__frame img {
  width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  filter: sepia(.28) contrast(1.02) saturate(.8);
  transition: transform 900ms var(--ease), filter 900ms var(--ease);
}
.artist-card:hover .artist-card__frame img, .artist-card:focus-visible .artist-card__frame img { transform: scale(1.055); filter: sepia(.12) contrast(1.06) saturate(.95); }
.artist-card__veil {
  position: absolute; inset: 8px; z-index: 3;
  background: linear-gradient(0deg, rgba(36, 56, 45, .82), rgba(36, 56, 45, 0) 55%);
  opacity: 0; transition: opacity 700ms var(--ease);
  display: flex; align-items: flex-end; justify-content: center; padding: 1.4rem;
}
.artist-card__veil span {
  font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--off-white);
  transform: translateY(10px); transition: transform 700ms var(--ease);
}
.artist-card:hover .artist-card__veil, .artist-card:focus-visible .artist-card__veil { opacity: 1; }
.artist-card:hover .artist-card__veil span { transform: none; }
.artist-card__body { padding-top: 1.35rem; display: block; }
.artist-card__body > span { display: block; }
.artist-card__name { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.2; }
.artist-card__dates { font-size: .74rem; letter-spacing: .16em; color: var(--green-soft); margin-top: .5rem; }
.artist-card__meta { font-size: .74rem; letter-spacing: .1em; color: var(--ink-55); margin-top: .35rem; text-transform: uppercase; }
.artist-card__note { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; line-height: 1.5; color: var(--ink-70); margin-top: .9rem; }

/* --- 11. Chronologie ---------------------------------------------------- */
.timeline { position: relative; }
.timeline__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(268px, 1fr);
  gap: clamp(1.6rem, 3vw, 2.8rem);
  overflow-x: auto; scroll-snap-type: x proximity;
  padding: 3.2rem 0 2.5rem;
  scrollbar-width: thin; scrollbar-color: var(--gold-40) transparent;
}
.timeline__track::-webkit-scrollbar { height: 2px; }
.timeline__track::-webkit-scrollbar-thumb { background: var(--gold-40); }
.timeline__item { scroll-snap-align: start; position: relative; padding-top: 2.6rem; }
.timeline__item::before {
  content: ""; position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--ink-12);
}
.timeline__item::after {
  content: ""; position: absolute; left: 0; top: 3px; width: 11px; height: 11px;
  background: var(--paper); border: 1px solid var(--gold); transform: rotate(45deg);
  transition: background-color 600ms var(--ease);
}
.timeline__item:hover::after { background: var(--gold); }
.timeline__year { font-family: var(--font-display); font-size: var(--step-2); color: var(--green); letter-spacing: .02em; }
.timeline__title { font-family: var(--font-display); font-size: var(--step-1); margin-top: .5rem; }
.timeline__desc { font-size: .95rem; color: var(--ink-70); margin-top: .8rem; line-height: 1.7; }
.timeline__img { margin-top: 1.3rem; border: 1px solid var(--ink-08); }
.timeline__img img { aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.timeline__hint { font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-55); display: flex; align-items: center; gap: .7rem; }
.timeline__hint::after { content: ""; flex: 1; height: 1px; background: var(--ink-12); }

@media (max-width: 780px) {
  .timeline__track { grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; padding-left: 1.6rem; gap: 2.8rem; }
  .timeline__item { padding-top: 0; padding-left: 1.8rem; }
  .timeline__item::before { left: -1.6rem; right: auto; top: 0; bottom: -2.8rem; width: 1px; height: auto; }
  .timeline__item:last-child::before { bottom: 0; }
  .timeline__item::after { left: calc(-1.6rem - 5px); top: 6px; }
  .timeline__hint { display: none; }
}

/* --- 12. Archives ------------------------------------------------------- */
.archives-band { background: var(--beige); position: relative; }
.archives-band::before, .archives-band::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--gold-20);
}
.archives-band::before { top: 0; } .archives-band::after { bottom: 0; }

.scatter { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(.8rem, 1.6vw, 1.6rem); align-items: start; }
.doc {
  background: var(--off-white);
  padding: clamp(.35rem, .7vw, .6rem) clamp(.35rem, .7vw, .6rem) clamp(.9rem, 1.4vw, 1.2rem);
  display: grid; gap: .75rem;
  box-shadow: 0 16px 34px -20px rgba(41, 42, 37, .55), 0 1px 3px rgba(41, 42, 37, .10);
  transition: transform 800ms var(--ease), box-shadow 800ms var(--ease);
  position: relative; text-decoration: none; color: inherit;
  border: 0; width: 100%; text-align: left; cursor: pointer; font: inherit;
}
.doc img { width: 100%; }
.doc__cap {
  /* dans le flux, en bloc : une légende de deux ou trois lignes allonge la
     carte au lieu de recouvrir la photographie. « min-width: 0 » est
     indispensable dans une grille, sinon la ligne refuse de s'enrouler. */
  display: block; min-width: 0; text-align: center; text-wrap: balance; padding-inline: .4rem;
  font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-55);
}
.doc:hover, .doc:focus-visible { rotate: 0deg; transform: translateY(-8px) scale(1.015); box-shadow: 0 34px 56px -28px rgba(41, 42, 37, .55); z-index: 4; }
.r-2 { rotate: -2deg; } .r-1 { rotate: -1deg; }
.r1 { rotate: 1deg; } .r2 { rotate: 2deg; } .r0 { rotate: .4deg; }

.scatter .s1 { grid-column: 1 / 5;  grid-row: 1; margin-top: 2.5rem; }
.scatter .s2 { grid-column: 5 / 9;  grid-row: 1; margin-top: 7rem; }
.scatter .s3 { grid-column: 9 / 13; grid-row: 1; }
.scatter .s4 { grid-column: 2 / 6;  grid-row: 2; margin-top: -6rem; }
.scatter .s5 { grid-column: 6 / 10; grid-row: 2; margin-top: -1rem; }
.scatter .s6 { grid-column: 10 / 13;grid-row: 2; margin-top: -3rem; }
@media (max-width: 860px) {
  /* En deux colonnes, la rotation des documents débordait de la fenêtre :
     on remet les pièces d’aplomb et on annule les décalages du grand format. */
  .scatter { grid-template-columns: repeat(2, 1fr); }
  .scatter > * { grid-column: auto !important; grid-row: auto !important; margin-top: 0 !important; }
  .scatter .doc { rotate: 0deg; }
}

/* --- 13. Page archives : filtres, masonry, lightbox --------------------- */
.filters { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: 3rem; }
.filters a {
  font: inherit; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase;
  padding: .7em 1.35em; background: transparent; color: var(--ink-70);
  border: 1px solid var(--ink-12); text-decoration: none;
  transition: color 400ms var(--ease), border-color 400ms var(--ease), background-color 400ms var(--ease);
}
.filters a:hover { border-color: var(--gold-40); color: var(--ink); }
.filters a[aria-current="page"] { background: var(--green); border-color: var(--green); color: var(--off-white); }

.masonry { columns: 3 260px; column-gap: clamp(1.2rem, 2.4vw, 2.2rem); }
.masonry > * { break-inside: avoid; margin-bottom: clamp(1.2rem, 2.4vw, 2.2rem); }
.masonry .doc:hover { transform: translateY(-6px); }
.count { font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-55); margin-bottom: 1.5rem; }

.lightbox {
  position: fixed; inset: 0; z-index: 140; display: none;
  background: rgba(21, 30, 25, .96);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  color: var(--off-white);
}
.lightbox.is-open { display: grid; grid-template-rows: auto 1fr auto; }
.lightbox__bar { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem var(--gutter); }
.lightbox__body { display: grid; grid-template-columns: 1fr; gap: 2rem; align-content: center; padding: 0 var(--gutter); overflow-y: auto; }
@media (min-width: 900px) { .lightbox__body { grid-template-columns: minmax(0, 1.4fr) minmax(260px, .6fr); align-items: center; } }
.lightbox__img { display: grid; place-items: center; }
.lightbox__img img { max-height: 66svh; width: auto; box-shadow: 0 30px 80px -30px #000; background: var(--off-white); padding: .5rem; }
.lightbox__info h3, .lightbox__title {
  font-family: var(--font-display); font-weight: 300; line-height: 1.1;
  font-size: var(--step-2); margin: 0;
}
.lightbox__info dl { display: grid; grid-template-columns: auto 1fr; gap: .5rem 1.2rem; margin: 1.8rem 0 0; font-size: .86rem; }
.lightbox__info dt { font-size: .64rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); padding-top: .28rem; }
.lightbox__info dd { margin: 0; color: rgba(250, 248, 242, .8); }
.lightbox__desc { color: rgba(250, 248, 242, .78); margin-top: 1.4rem; font-family: var(--font-serif); font-size: 1.1rem; line-height: 1.65; }
.lightbox__nav { display: flex; justify-content: space-between; align-items: center; padding: 1.4rem var(--gutter) 2rem; }
.icon-btn {
  background: transparent; border: 1px solid rgba(250, 248, 242, .3); color: inherit;
  font: inherit; font-size: .7rem; letter-spacing: .18em; text-transform: uppercase;
  padding: .75em 1.4em; cursor: pointer; transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
.icon-btn:hover { background: rgba(250, 248, 242, .12); }

/* --- 14. Carte de Giverny ---------------------------------------------- */
.map { background: var(--off-white); border: 1px solid var(--gold-20); padding: clamp(1.2rem, 3vw, 2.4rem); }
.map svg { width: 100%; height: auto; }
.map__legend { display: grid; gap: .75rem; margin-top: 1.8rem; }
.map__legend li { display: flex; gap: .8rem; align-items: baseline; font-size: .86rem; color: var(--ink-70); }
.map__legend b { font-weight: 500; color: var(--ink); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; }
.map__legend i { width: 9px; height: 9px; background: var(--gold); transform: rotate(45deg); flex: none; position: relative; top: .35rem; }
.map__legend .is-main i { background: var(--green); }

/* --- 15. Sections sombres (jardins) ------------------------------------ */
.dark { background: var(--green); color: var(--off-white); position: relative; overflow: hidden; }
.dark h2, .dark h3 { color: var(--off-white); }
.dark .prose, .dark p { color: rgba(250, 248, 242, .76); }
.dark .lede { color: rgba(250, 248, 242, .88); }
.garden-grid { display: grid; gap: clamp(1rem, 2vw, 1.6rem); grid-template-columns: repeat(2, 1fr); }
@media (min-width: 900px) { .garden-grid { grid-template-columns: repeat(3, 1fr); } }
.garden-grid figure { margin: 0; overflow: hidden; position: relative; }
.garden-grid img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 3/4; transition: transform 1200ms var(--ease); }
/* une vue large occupe deux colonnes : elle prend la hauteur de sa rangée */
.garden-grid .is-wide { grid-column: span 2; }
.garden-grid .is-wide img { aspect-ratio: auto; height: 100%; min-height: 100%; }
.garden-grid figure:hover img { transform: scale(1.05); }
.garden-grid figcaption {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 1.2rem;
  font-size: .66rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--off-white); background: linear-gradient(0deg, rgba(20, 32, 26, .8), transparent);
}

/* --- 15 bis. Saisons et roseraie ---------------------------------------- */
.seasons { display: grid; gap: 1px; background: var(--ink-08); border-block: 1px solid var(--ink-08); }
@media (min-width: 760px) { .seasons { grid-template-columns: repeat(4, 1fr); } }
.season { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.4rem); }
.season h3 { font-size: var(--step-1); color: var(--green); }
.season p { margin-top: .9rem; color: var(--ink-70); font-size: .95rem; line-height: 1.7; }
.rose-list { list-style: none; margin: 1rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.rose-list li {
  font-size: .8rem; letter-spacing: .06em; padding: .45em .9em;
  border: 1px solid var(--gold-40); color: var(--ink-70); background: var(--off-white);
}

/* --- 16. Citation ------------------------------------------------------- */
.quote { text-align: center; }
.quote blockquote {
  margin: 2.4rem auto 0; max-width: 30ch;
  font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: var(--step-4); line-height: 1.25; color: var(--ink);
}
.quote figcaption { margin-top: 2.2rem; font-size: .7rem; letter-spacing: .24em; text-transform: uppercase; color: var(--ink-55); }

/* --- 17. Cartes « aujourd'hui » ---------------------------------------- */
.cards-2 { display: grid; gap: clamp(1.6rem, 3vw, 3rem); grid-template-columns: 1fr; }
@media (min-width: 860px) { .cards-2 { grid-template-columns: 1fr 1fr; } }
.feature { display: flex; flex-direction: column; background: var(--off-white); border: 1px solid var(--ink-08); }
.feature__media { overflow: hidden; }
.feature__media img { width: 100%; aspect-ratio: 7/5; object-fit: cover; transition: transform 1100ms var(--ease); }
.feature:hover .feature__media img { transform: scale(1.045); }
.feature__body { padding: clamp(1.6rem, 3vw, 2.6rem); display: flex; flex-direction: column; gap: 1.1rem; align-items: flex-start; }
.feature__body h3 { font-size: var(--step-2); }

/* --- 18. Chapitres éditoriaux ------------------------------------------ */
.chapter { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
@media (min-width: 900px) {
  .chapter { grid-template-columns: 1fr 1fr; }
  .chapter--reverse .chapter__media { order: 2; }
}
.chapter__num { font-family: var(--font-display); font-size: var(--step-1); color: var(--green-soft); letter-spacing: .3em; }
.chapter__media figure { margin: 0; }
.chapter__media img { width: 100%; }
.chapter__media figcaption { font-size: .7rem; letter-spacing: .12em; color: var(--ink-55); margin-top: .9rem; text-transform: uppercase; }
.chapter h2 { font-size: var(--step-3); margin: 1rem 0 1.6rem; }

.interlude { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.interlude .scatter { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 700px) { .interlude .scatter { grid-template-columns: repeat(2, 1fr); } }

/* --- 19. Page artiste --------------------------------------------------- */
.artist-head { display: grid; gap: clamp(2rem, 5vw, 4.5rem); }
@media (min-width: 900px) { .artist-head { grid-template-columns: minmax(260px, 400px) 1fr; align-items: start; } }
.artist-head__portrait { border: 1px solid var(--gold-40); padding: 10px; background: var(--off-white); }
.artist-head__portrait img { width: 100%; filter: sepia(.24) contrast(1.02); }
.portrait-missing {
  display: grid; place-content: center; justify-items: center; gap: 1.1rem;
  aspect-ratio: 4 / 5; background: var(--off-white);
  border: 1px solid var(--gold-40); color: var(--green-soft);
}
.portrait-missing > span { font-size: .62rem; letter-spacing: .26em; text-transform: uppercase; }
.portrait-note {
  font-size: .68rem; line-height: 1.6; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-55); margin-top: .9rem;
}
.artist-facts { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 0; }
.artist-facts li { display: grid; grid-template-columns: 10rem 1fr; gap: 1rem; padding: .9rem 0; border-top: 1px solid var(--ink-08); font-size: .92rem; }
.artist-facts li:last-child { border-bottom: 1px solid var(--ink-08); }
.artist-facts dt, .artist-facts b { font-weight: 500; font-size: .66rem; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-55); padding-top: .3rem; }
.gallery-grid { display: grid; gap: clamp(1rem, 2vw, 1.8rem); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.pager { display: grid; gap: 1px; background: var(--ink-08); border-block: 1px solid var(--ink-08); margin-top: var(--section-y); }
@media (min-width: 700px) { .pager { grid-template-columns: 1fr 1fr; } }
.pager a { background: var(--paper); padding: clamp(1.6rem, 3vw, 2.6rem); text-decoration: none; display: grid; gap: .6rem; transition: background-color 500ms var(--ease); }
.pager a:hover { background: var(--off-white); }
.pager .dir { font-size: .68rem; letter-spacing: .22em; text-transform: uppercase; color: var(--green-soft); }
.pager .nm { font-family: var(--font-display); font-size: var(--step-2); }
.pager a:last-child { text-align: right; }
@media (max-width: 699px) { .pager a:last-child { text-align: left; } }

/* --- 20. Pied de page --------------------------------------------------- */
.footer { background: var(--green); color: rgba(250, 248, 242, .78); padding-block: clamp(3.5rem, 7vw, 6rem) 2.5rem; position: relative; z-index: 1; }
.footer a { color: inherit; text-decoration: none; transition: color 400ms var(--ease); }
.footer a:hover { color: var(--off-white); }
.footer__top { display: grid; gap: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 860px) { .footer__top { grid-template-columns: 1.2fr 1fr 1fr; } }
.footer .brand__name, .footer .brand__place { color: var(--off-white); }
.footer .brand__place { color: rgba(250, 248, 242, .55); }
.footer h2, .footer h4 { font-family: var(--font-sans); font-size: .66rem; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.4rem; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .75rem; font-size: .92rem; }
.footer__note { font-size: .82rem; line-height: 1.7; color: rgba(250, 248, 242, .55); max-width: 40ch; margin-top: 1.6rem; }
.footer__bottom {
  margin-top: clamp(3rem, 6vw, 5rem); padding-top: 1.8rem; border-top: 1px solid rgba(250, 248, 242, .14);
  display: flex; flex-wrap: wrap; gap: 1rem 2rem; justify-content: space-between;
  font-size: .74rem; letter-spacing: .1em; color: rgba(250, 248, 242, .55);
  /* le bouton « retour en haut » flotte dans ce coin : on lui laisse la place */
  padding-right: 4rem;
}
.social { display: flex; gap: 1.4rem; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; }

/* --- 20 bis. Pages réglementaires --------------------------------------- */
.legal { margin-top: clamp(2.5rem, 5vw, 4rem); }
.legal-block { padding-block: clamp(1.8rem, 3.5vw, 2.6rem); border-top: 1px solid var(--ink-08); }
.legal-block h2 { font-size: var(--step-2); margin-bottom: 1.2rem; }
.legal-block .prose { max-width: none; }

/* --- 21. Animations ----------------------------------------------------- */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity 900ms var(--ease), transform 900ms var(--ease); transition-delay: var(--d, 0ms); }
.js .reveal.is-in { opacity: 1; transform: none; }
/* Le volet est posé sur l'image, jamais sur l'élément observé : un élément
   entièrement rogné a une intersection nulle, et l'observateur ne se
   déclencherait alors jamais — l'image resterait invisible. */
.js .reveal-img > :is(picture, img, figure) {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1100ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .reveal-img.is-in > :is(picture, img, figure) { clip-path: inset(0 0 0 0); }
.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  .reveal, .reveal-img { opacity: 1; transform: none; clip-path: none; }
  .hero__media img { animation: none; transform: scale(1.04); }
}

/* --- 23. Responsive ----------------------------------------------------- */
/* Huit entrées, la recherche, les langues et le bouton Restaurant : il faut
   de la place. En dessous, tout passe par le tiroir — mieux vaut un menu
   franc qu'un bouton d'appel poussé hors de l'écran. */
@media (max-width: 1240px) {
  .nav, .header__cta { display: none; }
  .burger { display: grid; }
}
/* Jusqu’à 1700 px, on resserre pour que le bouton d’appel reste visible. */
@media (min-width: 1241px) and (max-width: 1699px) {
  .header__inner { gap: 1.1rem; }
  .nav { gap: 1.15rem; }
  .nav__link { font-size: .72rem; letter-spacing: .12em; }
  .chercher span { display: none; }
}
@media (max-width: 700px) {
  .grid-artists { grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 1.4rem 1.1rem; }
  .artist-card__name { font-size: 1.06rem; }
  .artist-card__note { font-size: .92rem; }
}
@media (max-width: 640px) {
  :root { --header-h: 66px; }
  .brand__mark { width: 38px; height: 38px; }
  .brand__name { font-size: 1.02rem; letter-spacing: .18em; }
  .hero__actions .btn { width: 100%; justify-content: center; }
  .collage--stack .c4 { width: 86%; }
  .masonry { columns: 1; }
  .artist-facts li { grid-template-columns: 1fr; gap: .2rem; }
}

/* --- 24. Fonds conservés ailleurs (archives) ---------------------------- */
.section--fonds { background: var(--off-white); border-block: 1px solid var(--ink-12); }
.fonds {
  list-style: none;
  margin: clamp(2.2rem, 4vw, 3.2rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.6rem, 3vw, 2.4rem);
  counter-reset: fonds;
}
.fonds__item {
  counter-increment: fonds;
  position: relative;
  padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 2.6vw, 2.2rem);
  background: var(--paper);
  border: 1px solid var(--ink-12);
  border-left: 2px solid var(--gold);
  max-width: 74ch;
}
.fonds__item::before {
  content: counter(fonds, decimal-leading-zero);
  position: absolute;
  top: clamp(1.4rem, 2.6vw, 2rem);
  right: clamp(1.2rem, 2.4vw, 1.8rem);
  font-family: var(--font-display);
  font-size: 1.5rem;
  color: var(--gold);
  opacity: .5;
  line-height: 1;
}
.fonds__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(1.12rem, 1.7vw, 1.34rem);
  line-height: 1.28;
  margin: 0 0 .7rem;
  padding-right: 3rem;
}
.fonds__item .prose { margin: 0 0 .8rem; }
.fonds__item .meta { margin: 0; font-style: italic; }

/* --- 25. Repères et citations (histoire) -------------------------------- */
.reperes {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: clamp(1.4rem, 3vw, 2.4rem);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  border-block: 1px solid var(--ink-12);
  padding-block: clamp(1.8rem, 3.5vw, 2.8rem);
}
.reperes li { display: grid; gap: .5rem; }
.reperes b {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(1.9rem, 3.4vw, 2.9rem); line-height: 1;
  color: var(--green); letter-spacing: .01em;
}
.reperes span {
  font-family: var(--font-sans); font-size: var(--step--1);
  line-height: 1.5; color: var(--ink-70); max-width: 30ch;
}
.pull {
  margin: clamp(2rem, 3.5vw, 2.8rem) 0 0;
  padding-left: clamp(1.1rem, 2vw, 1.6rem);
  border-left: 2px solid var(--gold);
}
.pull blockquote {
  margin: 0; font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.55; color: var(--ink);
  text-wrap: pretty;
}
.pull figcaption {
  margin-top: .8rem; font-family: var(--font-sans); font-size: .74rem;
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-55);
}
@media (max-width: 640px) { .reperes { gap: 1.5rem; } }

/* --- 26. Carte Google (chargement à la demande) -------------------------- */
.map__frame {
  position: relative;
  margin-top: 1.4rem;
  aspect-ratio: 16 / 10;
  border: 1px solid var(--ink-12);
  background:
    repeating-linear-gradient(90deg, transparent 0 38px, var(--ink-08) 38px 39px),
    repeating-linear-gradient(0deg, transparent 0 38px, var(--ink-08) 38px 39px),
    var(--off-white);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.map__frame iframe { width: 100%; height: 100%; border: 0; display: block; }
.map__frame.is-loaded { background: none; }
.map__poster {
  display: grid;
  justify-items: center;
  gap: 1rem;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  text-align: center;
  max-width: 46ch;
}
.map__addr {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: var(--green);
}
.map__consent {
  margin: 0;
  font-family: var(--font-sans);
  font-size: .74rem;
  line-height: 1.55;
  color: var(--ink-55);
}
.map__links {
  margin: 1rem 0 0;
  font-family: var(--font-sans);
  font-size: .76rem;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.map__links a { color: var(--ink-70); text-decoration: none; border-bottom: 1px solid var(--gold-40); }
.map__links a:hover { color: var(--green); border-bottom-color: var(--green); }
.map__links span { margin: 0 .6rem; color: var(--ink-12); }
.map__legend a { color: inherit; text-decoration: none; border-bottom: 1px solid var(--gold-40); }
.map__legend a:hover { color: var(--green); border-bottom-color: var(--green); }
@media (max-width: 640px) { .map__frame { aspect-ratio: 4 / 3; } }

/* --- 27. En-tête sans monogramme ---------------------------------------- */
.brand--nomark { gap: 0; }
.brand--nomark .brand__name { font-size: 1.32rem; }
.brand--nomark .brand__place { margin-top: .5rem; }
@media (max-width: 640px) {
  .brand--nomark .brand__name { font-size: 1.08rem; letter-spacing: .18em; }
}


/* --- 28. Corrections d'accessibilité ------------------------------------ */
:root { color-scheme: light; }
html { scroll-padding-block-start: calc(var(--header-h) + 1rem); }

/* cibles tactiles : 24 px minimum (WCAG 2.2 §2.5.8) */
.langs a, .langs span { display: inline-block; padding: .45rem .35rem; margin: -.45rem -.35rem; }
.footer ul a, .footer__bottom a { display: inline-block; padding-block: .32rem; }
.footer ul { gap: .85rem; }

/* focus sur fond sombre : l'or reprend la main */
.dark :focus-visible, .footer :focus-visible, .lightbox :focus-visible, .drawer :focus-visible,
.hero :focus-visible, .header:not(.is-scrolled) :focus-visible {
  outline-color: var(--gold);
  box-shadow: 0 0 0 5px rgba(250, 248, 242, .28);
}

/* --- 29. Renvois de fin de page ----------------------------------------- */
.suite {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .6rem clamp(1.2rem, 2.5vw, 2rem);
  margin: 0; padding-top: clamp(1.4rem, 3vw, 2rem);
  border-top: 1px solid var(--ink-12);
  font-family: var(--font-sans); font-size: .78rem;
  letter-spacing: .14em; text-transform: uppercase;
}
.suite > span { color: var(--ink-55); }
.suite a {
  color: var(--green); text-decoration: none;
  border-bottom: 1px solid var(--gold-40);
  padding-block: .3rem;
}
.suite a:hover { border-bottom-color: var(--green); }

/* --- 30. Fiche d'un document d'archive ---------------------------------- */
.fiche {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  margin-top: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 900px) { .fiche { grid-template-columns: 1.35fr 1fr; } }
.fiche__vue { margin: 0; background: var(--off-white); border: 1px solid var(--ink-12); padding: clamp(.8rem, 2vw, 1.6rem); }
.fiche__vue img, .fiche__vue picture { display: block; width: 100%; height: auto; }
.fiche__texte h1 { font-size: var(--step-3); margin: .4rem 0 1.4rem; }
.fiche__meta { margin: clamp(2rem, 4vw, 2.8rem) 0 0; padding: 0; border-top: 1px solid var(--ink-12); }
.fiche__ligne {
  display: grid; gap: .2rem .9rem; padding: .9rem 0;
  border-bottom: 1px solid var(--ink-12);
}
@media (min-width: 560px) { .fiche__ligne { grid-template-columns: 8.5rem 1fr; } }
.fiche__ligne dt {
  font-family: var(--font-sans); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-55);
}
.fiche__ligne dd { margin: 0; font-size: var(--step-0); line-height: 1.6; }
.fiche__droits { margin-top: 1.4rem; max-width: 52ch; font-style: italic; }
.fiche__voisins { display: grid; gap: clamp(1.2rem, 3vw, 2.2rem); grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.vignette { text-decoration: none; color: inherit; display: grid; gap: .8rem; }
.vignette img, .vignette picture { display: block; width: 100%; height: auto; border: 1px solid var(--ink-12); transition: transform 600ms var(--ease); }
.vignette:hover img { transform: scale(1.02); }
.vignette span {
  font-family: var(--font-sans); font-size: .82rem; line-height: 1.45; color: var(--ink-70);
}
.lightbox__more { margin-top: 1.6rem; }
.lightbox__more a {
  font-family: var(--font-sans); font-size: .76rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold); text-decoration: none;
  border-bottom: 1px solid var(--gold-40); padding-block: .3rem;
}
.lightbox__more a:hover { border-bottom-color: var(--gold); }

/* --- 31. Regroupement des artistes par degré de rattachement ------------- */
.famille + .famille { margin-top: clamp(3.5rem, 7vw, 6rem); }
.famille__tete {
  margin-bottom: clamp(1.6rem, 3vw, 2.4rem);
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--ink-12);
  display: grid; gap: .5rem;
}
.famille__tete h2 {
  font-size: clamp(1.3rem, 2.2vw, 1.7rem);
  font-weight: 400; margin: 0;
}
.famille__note {
  margin: 0; max-width: 68ch;
  font-family: var(--font-sans); font-size: .86rem;
  line-height: 1.55; color: var(--ink-70);
}
.fiche__lien {
  display: inline-block; margin-bottom: 1rem;
  font-family: var(--font-sans); font-size: .68rem;
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--green-soft);
  border: 1px solid var(--gold-40); border-radius: 2px;
  padding: .35rem .7rem;
}

/* --- 32. Œuvres principales illustrées ---------------------------------- */
.oeuvres {
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.2rem);
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  margin-top: 0;
}
.oeuvre { margin: 0; display: grid; gap: .8rem; align-content: start; }
.oeuvre__cadre {
  display: grid; place-items: center;
  aspect-ratio: 4 / 5;
  background: var(--off-white);
  border: 1px solid var(--ink-12);
  padding: .55rem;
  box-shadow: 0 14px 30px -22px rgba(41, 42, 37, .5);
  overflow: hidden;
}
/* les formats varient d'une œuvre à l'autre : le cadre garde une hauteur
   constante et l'image s'y inscrit entièrement, comme un accrochage. */
button.oeuvre__cadre { font: inherit; color: inherit; cursor: zoom-in; text-align: inherit;
  -webkit-appearance: none; appearance: none; }
button.oeuvre__cadre img { transition: transform 900ms var(--ease); }
button.oeuvre__cadre:hover img { transform: scale(1.03); }
.oeuvre__cadre picture { display: contents; }
.oeuvre__cadre img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.oeuvre-missing {
  display: grid; place-content: center; justify-items: center; gap: .7rem;
  width: 100%; height: 100%; background: var(--paper);
  border: 1px solid var(--gold-20); text-align: center; padding: 1rem;
}
.oeuvre-missing > span {
  font-family: var(--font-sans); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--ink-55);
  max-width: 14ch; line-height: 1.5;
}
.oeuvre figcaption { display: grid; gap: .3rem; }
.oeuvre figcaption b {
  font-family: var(--font-display); font-weight: 400;
  font-size: 1.02rem; line-height: 1.25; color: var(--ink);
}
.oeuvre figcaption span {
  font-family: var(--font-sans); font-size: .74rem;
  line-height: 1.5; color: var(--ink-70);
}
@media (max-width: 560px) { .oeuvres { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }

/* --- 33. Animations, seconde couche ------------------------------------
   Toutes gouvernées par la classe .js : sans script, la page reste
   entièrement lisible. Durées tenues entre 500 et 900 ms, jamais d'effet
   de rebond ni de translation spectaculaire — le mouvement doit se
   remarquer après coup, comme une page que l'on tourne. */

/* Titres : les mots montent l'un après l'autre */
.js .mot { display: inline-block; will-change: transform, opacity; }
.js .mot > span {
  display: inline-block; opacity: 0; transform: translateY(.42em);
  transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .mot.is-in > span { opacity: 1; transform: none; }

/* Filets dorés des intitulés : ils se tracent */
.js .label.trait::before, .js .label.trait::after {
  transform: scaleX(0); transform-origin: left;
  transition: transform 800ms var(--ease) 140ms;
}
.js .label.trait.is-in::before, .js .label.trait.is-in::after { transform: scaleX(1); }

/* Images : dévoilées par un volet, comme un cache que l'on retire.
   Le rognage porte sur le contenu, pas sur le cadre observé. */
.js .volet > :is(picture, img, span) {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 900ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .volet.is-in > :is(picture, img, span) { clip-path: inset(0 0 0 0); }

/* Liens de texte : le soulignement doré se déploie */
.prose a, .link-inline {
  text-decoration: none;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 560ms var(--ease), color 560ms var(--ease);
  padding-bottom: .12em;
}
.prose a:hover, .link-inline:hover { background-size: 100% 1px; }

/* Retour en haut de page */
.haut {
  position: fixed; right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(1rem, 3vw, 2.2rem);
  z-index: 90; display: grid; place-items: center; gap: .3rem;
  width: 3.1rem; height: 3.1rem; border-radius: 50%;
  background: var(--paper-90);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--gold-40); color: var(--green);
  cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 600ms var(--ease), transform 600ms var(--ease), visibility 600ms,
              border-color 500ms var(--ease), color 500ms var(--ease);
}
.haut.is-in { opacity: 1; visibility: visible; transform: none; }
.haut:hover { color: var(--gold); border-color: var(--gold); }
.haut svg { width: 15px; height: 15px; }

@media (prefers-reduced-motion: reduce) {
  .js .mot > span { opacity: 1; transform: none; }
  .js .label.trait::before, .js .label.trait::after { transform: scaleX(1); }
  .js .reveal-img > *, .js .volet > * { clip-path: none; }
  .haut { transition: none; }
}

/* --- 34. Planche isolée -------------------------------------------------
   Une image seule au fil de la lecture se tient à la largeur d'une planche
   de livre, pas à celle de la page : elle s'inscrit dans le texte au lieu
   de l'interrompre. */
.planche { max-width: 720px; margin: 0 auto; }
.planche figcaption {
  font-family: var(--font-sans);
  font-size: .68rem; letter-spacing: .1em; line-height: 1.7;
  color: var(--ink-55); margin-top: .95rem; text-align: center;
}

/* --- 35. Recherche ------------------------------------------------------
   Un cartouche de papier posé sur la page, dans le registre du reste :
   filets d'or, serif pour les titres, pas d'ombre portée bavarde. */
.chercher {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-sans); font-size: .68rem; letter-spacing: .18em;
  text-transform: uppercase; color: inherit; background: none; border: 0;
  padding: .45rem .2rem; cursor: pointer; opacity: .82;
  transition: opacity 400ms var(--ease), color 400ms var(--ease);
}
.chercher:hover { opacity: 1; color: var(--gold); }
.chercher svg { width: 15px; height: 15px; }
.header:not(.is-scrolled) .chercher { color: rgba(250, 248, 242, .84); }

/* la classe l'emporterait sur la règle « hidden » du navigateur : sans
   cette ligne, le calque reste étendu sur toute la page et intercepte
   chaque clic, même fermé. */
.recherche[hidden] { display: none !important; }
.recherche { position: fixed; inset: 0; z-index: 300; display: grid; }
.recherche__fond {
  position: absolute; inset: 0; background: rgba(41, 42, 37, .5);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  opacity: 0; transition: opacity 320ms var(--ease);
}
.recherche.is-open .recherche__fond { opacity: 1; }
.recherche__boite {
  position: relative; z-index: 1;
  width: min(680px, 100% - 2rem); margin: min(11vh, 6rem) auto 2rem;
  max-height: min(74vh, 640px); display: flex; flex-direction: column;
  background: var(--off-white); border: 1px solid var(--gold-40);
  box-shadow: 0 40px 90px -50px rgba(41, 42, 37, .8);
  opacity: 0; transform: translateY(-10px);
  transition: opacity 320ms var(--ease), transform 380ms var(--ease);
}
.recherche.is-open .recherche__boite { opacity: 1; transform: none; }
.recherche__tete { display: flex; align-items: center; gap: .8rem; padding: .3rem .9rem .3rem 1.2rem; border-bottom: 1px solid var(--ink-12); }
.recherche__champ { display: flex; align-items: center; gap: .8rem; flex: 1; }
.recherche__champ svg { width: 17px; height: 17px; color: var(--green-soft); flex: none; }
.recherche__champ input {
  flex: 1; border: 0; background: none; padding: 1.05rem 0;
  font-family: var(--font-display); font-size: var(--step-1); color: var(--ink);
}
.recherche__champ input::placeholder { color: var(--ink-40, rgba(41,42,37,.42)); }
.recherche__champ input:focus { outline: none; }
.recherche__champ input::-webkit-search-cancel-button { display: none; }
.recherche__fermer {
  border: 1px solid var(--ink-12); background: none; cursor: pointer;
  font-family: var(--font-sans); font-size: .6rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--green-soft); padding: .5rem .8rem;
  transition: color 400ms var(--ease), border-color 400ms var(--ease);
}
.recherche__fermer:hover { color: var(--green); border-color: var(--gold-40); }
.recherche__etat {
  margin: 0; padding: .75rem 1.2rem; font-family: var(--font-sans);
  font-size: .62rem; letter-spacing: .18em; text-transform: uppercase; color: var(--green-soft);
  border-bottom: 1px solid var(--ink-08);
}
.recherche__liste { list-style: none; margin: 0; padding: 0; overflow-y: auto; }
.recherche__liste a {
  display: grid; grid-template-columns: 6.5rem 1fr; gap: .1rem 1rem;
  padding: .95rem 1.2rem; text-decoration: none; color: inherit;
  border-bottom: 1px solid var(--ink-08);
  transition: background-color 260ms var(--ease);
}
.recherche__liste a:hover, .recherche__liste a.is-cible { background: var(--paper); }
.recherche__nature {
  grid-row: span 2; font-family: var(--font-sans); font-size: .58rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--gold);
  padding-top: .35rem;
}
.recherche__titre { font-family: var(--font-display); font-size: 1.12rem; color: var(--ink); }
.recherche__extrait {
  font-family: var(--font-sans); font-size: .78rem; line-height: 1.6; color: var(--ink-55);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* dès que l'en-tête se resserre, la loupe se passe de son intitulé */
@media (max-width: 1400px) {
  .chercher span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 640px) {
  .recherche__liste a { grid-template-columns: 1fr; }
  .recherche__nature { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .recherche__fond, .recherche__boite { transition: none; }
}

/* la vignette d'un repère mène à la pièce qui l'atteste */
a.timeline__img { display: block; overflow: hidden; }
a.timeline__img img { transition: transform 900ms var(--ease); }
a.timeline__img:hover img { transform: scale(1.04); }

/* --- 36. Impression -----------------------------------------------------
   Une notice imprimée doit se lire comme une fiche de catalogue : le
   contenu, ses images, ses références. Rien de la navigation. */
@media print {
  :root { --paper: #fff; --off-white: #fff; --ink: #1a1a1a; }
  html { font-size: 11pt; scroll-behavior: auto; }
  body { background: #fff; color: #000; padding: 0; }
  body::before { display: none; }               /* le grain de papier */

  .header, .drawer, .burger, .header__cta, .langs, .chercher, .recherche,
  .haut, .pv-note, .skip-link, .lightbox, .filters, .suite, .voisins,
  .hero__scroll, .hero__actions, .btn, .link-more, footer, .map, [data-map] { display: none !important; }

  main { padding-top: 0 !important; }
  /* les pages réservent en haut la hauteur de l'en-tête fixe : inutile ici */
  .section, .section--tight, article.section { padding-top: 0 !important; padding-bottom: 1.2cm; }
  .wrap, .wrap--narrow { width: auto; max-width: none; margin: 0; }

  /* aucune animation ne doit retenir un contenu hors de la page */
  .reveal, .reveal-img, .volet, .mot > span, .label.trait::before, .label.trait::after {
    opacity: 1 !important; transform: none !important; clip-path: none !important;
  }
  .js .reveal-img > *, .js .volet > * { clip-path: none !important; }

  h1 { font-size: 22pt; margin: 0 0 .4cm; }
  h2 { font-size: 15pt; }
  h3 { font-size: 12.5pt; }
  h1, h2, h3, figure, .oeuvre, .fiche__meta { break-inside: avoid; page-break-inside: avoid; }
  h2, h3 { break-after: avoid; }

  img { max-width: 100% !important; height: auto !important; filter: none !important; }
  /* une image ne monopolise pas une page : elle accompagne le texte */
  .artist-head__portrait img, .fiche__vue img, .planche img, .chapter__media img { max-height: 11cm; width: auto; }
  .artist-head { display: grid; grid-template-columns: 7cm 1fr; gap: .9cm; align-items: start; }
  .artist-head__portrait { margin: 0; }
  .page-hero, .hero { min-height: 0 !important; padding: 0 0 .6cm !important; }
  .page-hero__media, .hero__media, .hero__scrim, .page-hero__scrim { display: none !important; }
  .page-hero *, .hero__content * { color: #000 !important; text-shadow: none !important; }

  .fiche { display: block; }
  .fiche__vue { max-width: 12cm; margin: 0 0 .6cm; }
  .fiche__meta { border-top: 1px solid #999; padding-top: .3cm; }

  /* l'adresse des liens externes est rappelée : le papier ne clique pas */
  .prose a[href^="http"]::after, .fonds a[href^="http"]::after,
  .sources a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8.5pt; color: #555; word-break: break-all; }

  .crumbs { font-size: 8.5pt; color: #555; }
  .oeuvres { grid-template-columns: repeat(3, 1fr); gap: .5cm; }
}

/* --- 37. Collections et index des noms ---------------------------------- */
.collections { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(2.4rem, 5vw, 4rem); }
.collection { display: grid; grid-template-columns: minmax(0, 22rem) 1fr;
  grid-template-rows: min-content 1fr; gap: .4rem clamp(1.6rem, 4vw, 3.4rem);
  padding-bottom: clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--ink-08); }
.collection__nom { font-family: var(--font-display); font-size: var(--step-1); font-weight: 400;
  margin: 0; line-height: 1.25; color: var(--ink); }
.collection__compte { grid-column: 1; grid-row: 2; align-self: start; margin: .35rem 0 0; font-family: var(--font-sans);
  font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; color: var(--green-soft); }
.collection__liste { grid-column: 2; grid-row: 1 / span 2; list-style: none; margin: 0; padding: 0;
  display: grid; gap: 1.15rem; }
.collection__liste > li { display: grid; gap: .25rem; }
.collection__liste a { text-decoration: none; color: inherit; display: grid; gap: .1rem; }
.collection__liste a b { font-family: var(--font-display); font-size: 1.18rem; font-weight: 400;
  border-bottom: 1px solid transparent; justify-self: start;
  transition: border-color 500ms var(--ease), color 500ms var(--ease); }
.collection__liste a:hover b { border-bottom-color: var(--gold); }
.collection__artiste { font-family: var(--font-sans); font-size: .68rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green-soft); }
.collection__notice { font-size: .84rem; line-height: 1.65; color: var(--ink-55); max-width: 62ch; }

.alphabet { display: flex; flex-wrap: wrap; gap: .1rem .55rem; margin-bottom: 1.6rem; }
.alphabet a { font-family: var(--font-display); font-size: 1.05rem; color: var(--green-soft);
  text-decoration: none; padding: .1rem .3rem; transition: color 400ms var(--ease); }
.alphabet a:hover { color: var(--gold); }

.index { list-style: none; margin: 0; padding: 0; }
.index__lettre { margin: clamp(2rem, 4vw, 3rem) 0 .9rem; display: flex; align-items: center; gap: 1rem; }
.index__lettre span { font-family: var(--font-display); font-size: var(--step-2); color: var(--gold); line-height: 1; }
.index__lettre::after { content: ""; flex: 1; height: 1px; background: var(--ink-12); }
.index__entree { display: grid; grid-template-columns: minmax(0, 18rem) minmax(0, 12rem) 1fr;
  gap: .2rem clamp(1rem, 2.5vw, 2.2rem); align-items: baseline;
  padding: .75rem 0; border-bottom: 1px solid var(--ink-08); }
.index__nom { font-family: var(--font-display); font-size: 1.15rem; color: var(--ink); text-decoration: none; }
a.index__nom { border-bottom: 1px solid var(--gold-40); transition: border-color 500ms var(--ease); }
a.index__nom:hover { border-bottom-color: var(--gold); }
.index__role { font-family: var(--font-sans); font-size: .66rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--green-soft); }
.index__renvois { font-size: .82rem; line-height: 1.7; color: var(--ink-55); }
.index__renvois a { color: var(--ink-70); text-decoration: none;
  border-bottom: 1px solid var(--ink-12); transition: border-color 400ms var(--ease), color 400ms var(--ease); }
.index__renvois a:hover { color: var(--ink); border-bottom-color: var(--gold); }

@media (max-width: 860px) {
  .collection { grid-template-columns: 1fr; }
  .collection__liste { grid-column: 1; grid-row: auto; margin-top: 1.2rem; }
  .index__entree { grid-template-columns: 1fr; gap: .35rem; }
}

/* --- 38. Confort tactile et lisibilité ---------------------------------
   Aucun changement d'apparence : on agrandit la zone sensible autour des
   petites commandes et on relève les tailles de texte les plus basses,
   pour que le site se manipule au doigt aussi bien qu'à la souris. */

/* la loupe garde sa taille dessinée mais devient un carré de 44 px */
.chercher { min-width: 44px; min-height: 44px; justify-content: center; padding: .45rem .5rem; }
@media (min-width: 1401px) { .chercher { justify-content: flex-start; padding-inline: .2rem .5rem; } }

/* le sélecteur de langue : deux mots courts, deux zones franches */
.langs { gap: .2rem; }
.langs a, .langs > span[aria-current] {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; min-height: 40px;
}
.langs span[aria-hidden] { min-width: 0; }

/* l'alphabet de l'index */
.alphabet a { min-width: 36px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; padding: 0; }

/* la visionneuse et la recherche */
.recherche__fermer, .icon-btn { min-height: 40px; display: inline-flex; align-items: center; }

/* les liens du bas de page */
.footer__bottom a { padding-block: .55rem; }

/* --- lisibilité : plus rien sous 11 px --- */
.brand__place { font-size: .70rem; letter-spacing: .34em; }
.footer ul { font-size: .95rem; }
.footer__bottom { font-size: .78rem; }
.meta, .count, .crumbs, .timeline__hint, .oeuvre figcaption span,
.index__role, .collection__compte, .recherche__etat, .recherche__nature,
.doc__cap, .fiche__meta dt, .lightbox__info dt, .label,
.pager .dir, .garden-grid figcaption, .collection__artiste, .planche figcaption,
.fiche__lien, .artist-card__veil span, .collection__artiste,
.footer h2, .footer h4, .social {
  font-size: max(.72rem, 11.5px);
}
/* trois intitulés définis plus haut avec une sélection plus forte */
.hero h1 .hero__place { font-size: clamp(11.5px, .6rem + .3vw, .82rem); }
.hero__scroll { font-size: max(.62rem, 11.5px); }
.chercher { font-size: max(.68rem, 11.5px); }
/* les liens « poursuivre » sont des commandes : ils méritent la même
   surface que les boutons */
.link-more { min-height: 40px; display: inline-flex; align-items: center; gap: .5rem; }
.oeuvre-missing > span, .portrait-missing > span { font-size: max(.62rem, 11px); }

/* --- l'en-tête à 320 px : le tiroir prend le relais plus tôt --- */
@media (max-width: 400px) {
  /* le collage de l'accueil déborde de deux pixels sur les plus petits écrans */
  .collage--stack { max-width: 100%; overflow: hidden; }
  .header__inner { gap: .6rem; }
  .header__tools { gap: .35rem; }
  .brand--nomark .brand__name { font-size: 1rem; letter-spacing: .14em; }
}

/* --- 39. Loupe de la visionneuse ---------------------------------------
   Les cartes postales portent des mentions manuscrites, les tirages des
   dates à l'encre : il faut pouvoir approcher. */
.lightbox__img img { cursor: zoom-in; transition: transform 500ms var(--ease); transform-origin: center; will-change: transform; }
.lightbox__img img.is-zoom { cursor: grab; transition: transform 120ms linear; }
.lightbox__img img.is-zoom:active { cursor: grabbing; }
.lightbox.is-zoom .lightbox__img { overflow: hidden; }
.lightbox.is-zoom .lightbox__info { opacity: .28; transition: opacity 400ms var(--ease); }
.lightbox__img::after {
  content: attr(data-loupe); position: absolute; inset-inline: 0; bottom: -1.8rem;
  text-align: center; font-family: var(--font-sans); font-size: max(.6rem, 11px);
  letter-spacing: .18em; text-transform: uppercase; color: rgba(250,248,242,.42);
  pointer-events: none;
}
.lightbox__img { position: relative; }
/* rien ne passe devant une pièce d'archive ouverte */
html:has(.lightbox.is-open) .header { display: none; }
html:has(.recherche:not([hidden])) .header { opacity: 0; pointer-events: none; }
.lightbox.is-zoom .lightbox__img::after { content: ""; }
@media (prefers-reduced-motion: reduce) { .lightbox__img img { transition: none; } }

/* --- 40. Citer cette page ----------------------------------------------
   Un fonds documentaire sert à être cité : la référence est donnée toute
   faite, avec la date de consultation. */
.citer {
  margin-top: clamp(2.4rem, 5vw, 3.4rem); padding: 1.4rem 1.6rem;
  background: var(--paper); border: 1px solid var(--ink-08); border-left: 2px solid var(--gold-40);
  display: grid; gap: .7rem; justify-items: start;
  /* « 62ch » seul imposerait sa largeur à la colonne qui le contient */
  max-width: min(62ch, 100%); min-width: 0;
}
.citer__texte { overflow-wrap: anywhere; }
.citer__tete {
  margin: 0; font-family: var(--font-sans); font-size: max(.62rem, 11.5px);
  letter-spacing: .2em; text-transform: uppercase; color: var(--green-soft);
}
.citer__texte { margin: 0; font-size: .86rem; line-height: 1.7; color: var(--ink-70); }
.citer__copier {
  font-family: var(--font-sans); font-size: max(.6rem, 11.5px); letter-spacing: .18em;
  text-transform: uppercase; color: var(--green); background: none;
  border: 1px solid var(--ink-12); padding: .55rem 1.1rem; cursor: pointer; min-height: 40px;
  transition: color 400ms var(--ease), border-color 400ms var(--ease);
}
.citer__copier:hover { color: var(--gold); border-color: var(--gold-40); }
.citer__copier.is-fait { color: var(--gold); border-color: var(--gold); }
@media print { .citer__copier { display: none; } .citer { border-left-color: #999; } }

/* --- 41. Finitions animées ---------------------------------------------
   Rien de tapageur : on cherche le geste d'un beau livre qu'on feuillette.
   Tout est désactivé plus bas si le visiteur demande moins d'animation. */

/* Filet de progression de lecture, en haut de page. Piloté par le
   défilement lui-même, sans JavaScript ; les navigateurs qui ne savent pas
   le faire n'affichent simplement rien. */
@supports (animation-timeline: scroll()) {
  .js body::after {
    content: ""; position: fixed; inset: 0 auto auto 0;
    height: 2px; width: 100%; z-index: 200;
    background: linear-gradient(90deg, var(--gold-40), var(--gold));
    transform-origin: 0 50%; transform: scaleX(0);
    animation: bandeau-lecture linear both;
    animation-timeline: scroll(root block);
  }
  html.menu-open body::after { opacity: 0; }
}
@keyframes bandeau-lecture { to { transform: scaleX(1); } }

/* L'ornement se dessine au lieu d'apparaître : les deux filets s'écartent
   du losange central. */
.js .ornament path:first-child {
  stroke-dasharray: 26; stroke-dashoffset: 26;
  transition: stroke-dashoffset 900ms var(--ease) 120ms;
}
.js .reveal.is-in .ornament path:first-child,
.js .hero .ornament path:first-child { stroke-dashoffset: 0; }

/* Un filet doré se tire sous les titres de section quand ils entrent. */
.js .reveal > h2::after,
.js .reveal h2:first-of-type::after {
  content: ""; display: block; height: 1px; width: 0;
  margin-top: .9rem; background: var(--gold-40);
  transition: width 900ms var(--ease) 200ms;
}
.js .reveal.is-in > h2::after,
.js .reveal.is-in h2:first-of-type::after { width: min(4.5rem, 30%); }

/* Entrée de page : le contenu monte d'un souffle, une seule fois. */
.js body > main { animation: page-entree 700ms var(--ease) both; }
@keyframes page-entree { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

/* La chronologie s'efface sur ses bords : on comprend qu'elle continue.
   Uniquement quand elle défile horizontalement — en dessous de 780 px elle
   s'empile verticalement, et le masque rognerait le texte. */
@media (min-width: 781px) {
.timeline__track {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
}

/* Les vignettes d'archives se soulèvent à peine sous le curseur. */
@media (hover: hover) {
  .vignette:hover img, .vignette:focus-within img { transform: scale(1.03); }
  .oeuvre__cadre:hover img { transform: scale(1.04); }
}

@media (prefers-reduced-motion: reduce) {
  .js body::after { display: none; }
  .js .ornament path:first-child { stroke-dashoffset: 0; }
  .js .reveal > h2::after, .js .reveal h2:first-of-type::after { width: min(4.5rem, 30%); transition: none; }
  .js body > main { animation: none; }
}

/* --- 42. En-tête sur page claire ---------------------------------------
   L'en-tête était conçu pour flotter au-dessus d'une image : texte clair et
   voile sombre. Sur les pages qui n'ont pas de héros — une fiche de document,
   les mentions légales — cela posait un voile gris sur du papier crème et du
   texte blanc à peine lisible, jusqu'au premier défilement. */
body:not(:has(.hero, .page-hero)) .header {
  background: var(--paper-90);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--gold-20);
  color: var(--ink);
}
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled)::before { display: none; }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .brand__name { color: var(--ink); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .brand__place { color: var(--green-soft); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .nav__link { color: var(--ink-70); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .nav__link:hover,
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .nav__link[aria-current="page"] { color: var(--ink); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .langs a { color: var(--ink-55); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .langs a[aria-current="true"] { color: var(--ink); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .langs span { color: var(--ink-12); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .header__cta { color: var(--green); border-color: var(--ink-12); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .header__cta:hover { background: var(--green); color: var(--off-white); border-color: var(--green); }
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .burger,
body:not(:has(.hero, .page-hero)) .header:not(.is-scrolled) .chercher { color: var(--ink); }

/* --- 43. Lisibilité des titres de page ---------------------------------
   Le voile général suffit sur une photographie sombre ; sur un intérieur
   clair — l'atelier, par exemple — le fil d'Ariane et l'intertitre se
   perdaient. On pose une ombre douce sous le seul bloc de texte, ce qui
   garde la photographie lumineuse. */
.page-hero__inner {
  position: relative; isolation: isolate;
  padding-block: calc(var(--header-h) + 4.5rem) clamp(3rem, 6vw, 5rem);
}
.page-hero__inner::before {
  content: ""; position: absolute; z-index: -1;
  inset: -2rem -3rem -3rem -50vw;
  background: radial-gradient(120% 100% at 12% 78%, rgba(14, 24, 19, .72) 0%, rgba(14, 24, 19, .42) 45%, rgba(14, 24, 19, 0) 78%);
  pointer-events: none;
}
.page-hero .crumbs { color: rgba(250, 248, 242, .86); }
.page-hero .label { color: rgba(250, 248, 242, .92); }
.page-hero .lede { color: rgba(250, 248, 242, .94); }

/* Le premier paragraphe d'une page tient une largeur de lecture, et ne
   flotte plus seul au bord d'une grande plage vide. */
.section > .wrap > .prose:first-child { max-width: 62ch; }

/* La première section après un grand titre de page respire moins : le héros
   a déjà donné l'air nécessaire. */
.page-hero + .section { padding-block-start: clamp(2.6rem, 5vw, 4.2rem); }

/* --- 44. Le plan du domaine --------------------------------------------
   La gravure sert de plan : sept zones y sont repérées. Ce sont de simples
   liens vers des sections toujours présentes plus bas — la page reste
   entière sans JavaScript, et se parcourt au clavier. */
.plan { margin: 0; }
.plan__cadre {
  /* « clip » avec une marge : rien ne s'échappe du cadre — ni l'étiquette de
     la zone la plus à droite — mais l'ombre des pastilles respire encore. */
  overflow: clip; overflow-clip-margin: 14px;
  position: relative; display: block;
  background: var(--off-white); padding: clamp(.4rem, .8vw, .7rem);
  box-shadow: 0 18px 40px -24px rgba(41, 42, 37, .55), 0 1px 3px rgba(41, 42, 37, .10);
}
.plan__cadre img { display: block; width: 100%; height: auto; }
.plan__zone {
  position: absolute; left: var(--x); top: var(--y); width: var(--w); height: var(--h);
  display: grid; place-items: center; text-decoration: none; color: inherit;
  border: 1px solid transparent; border-radius: 2px;
  transition: background-color 500ms var(--ease), border-color 500ms var(--ease);
}
.plan__num {
  display: grid; place-items: center;
  width: clamp(24px, 2.2vw, 30px); aspect-ratio: 1; border-radius: 50%;
  background: var(--green); color: var(--off-white);
  font-family: var(--font-sans); font-size: max(.66rem, 11px); font-weight: 500;
  box-shadow: 0 2px 8px rgba(20, 32, 26, .45);
  transition: background-color 450ms var(--ease), transform 450ms var(--ease);
}
.plan__nom {
  position: absolute; inset-block-end: -1.9rem; inset-inline-start: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap; font-family: var(--font-sans);
  font-size: max(.62rem, 11px); letter-spacing: .14em; text-transform: uppercase;
  background: var(--green); color: var(--off-white); padding: .3rem .6rem;
  opacity: 0; pointer-events: none;
  transition: opacity 400ms var(--ease), transform 400ms var(--ease);
  z-index: 3;
}
.plan__zone:hover, .plan__zone:focus-visible {
  background: rgba(182, 154, 89, .18); border-color: var(--gold);
  outline: none;
}
.plan__zone:hover .plan__num, .plan__zone:focus-visible .plan__num {
  background: var(--gold); transform: scale(1.12);
}
.plan__zone:hover .plan__nom, .plan__zone:focus-visible .plan__nom {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.plan figcaption {
  margin-top: 1rem; font-family: var(--font-sans);
  font-size: max(.68rem, 11.5px); color: var(--ink-55);
}

.lieu { padding-block: clamp(2.6rem, 5vw, 4.2rem); border-top: 1px solid var(--ink-08); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.lieu:first-child { border-top: 0; }
.lieu__tete { display: grid; grid-template-columns: auto 1fr; gap: clamp(1rem, 2.5vw, 2.2rem); align-items: start; }
.lieu__num {
  font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem);
  color: var(--gold); line-height: 1; margin: 0;
}
.lieu__tete h2 { margin: 0; }
.lieu__texte { margin: .8rem 0 0; max-width: 58ch; color: var(--ink-70); }
.lieu__pieces {
  margin-top: clamp(1.6rem, 3vw, 2.4rem);
  display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: clamp(1.2rem, 2.4vw, 2rem); align-items: start;
}
/* L'étiquette est un agrément au survol ; en dessous de 900 px elle manque
   de place, et les appareils tactiles ne survolent pas. */
@media (max-width: 900px) { .plan__nom { display: none; } }
@media (max-width: 700px) {
  .lieu__tete { grid-template-columns: 1fr; gap: .6rem; }
}
@media (prefers-reduced-motion: reduce) {
  .plan__zone, .plan__num, .plan__nom { transition: none; }
}

/* Le compte de documents et le renvoi vers le plan partagent une ligne. */
.compte-barre {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem 2rem; flex-wrap: wrap; margin-bottom: 1.5rem;
}
.compte-barre .count { margin-bottom: 0; }

/* --- 45. Le texte courant passe au Garamond -----------------------------
   Un catalogue d'exposition ne compose pas ses textes en caractère
   d'interface. L'Inter reste ce qu'il est bon à faire — la navigation, les
   intitulés, les tableaux de métadonnées — et la lecture suivie revient au
   Garamond, qui a été dessiné pour ça. */
.prose,
.prose p,
.fiche__texte,
.lieu__texte,
.collection__notice,
.citer__texte {
  font-family: var(--font-serif);
  font-size: clamp(1.04rem, .99rem + .22vw, 1.16rem);
  line-height: 1.66;
  letter-spacing: .002em;
  text-wrap: pretty;
}
.prose p + p { margin-top: 1.15em; }
.prose strong { font-weight: 500; }

/* La légende d'une œuvre se lit comme dans un catalogue : le titre en
   romain, la notice en italique, toutes deux en Garamond. */
.oeuvre figcaption span,
.collection__notice {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .94rem;
  line-height: 1.5;
}

/* Lettrine d'ouverture : le premier paragraphe de chaque chapitre s'ouvre
   sur une capitale de trois lignes, comme un livre. */
.chapter .prose > p:first-of-type::first-letter,
.lede + .prose > p:first-of-type::first-letter {
  float: left;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 3.5em;
  line-height: .82;
  margin: .06em .12em 0 0;
  color: var(--gold);
}
@media (max-width: 560px) {
  .chapter .prose > p:first-of-type::first-letter { font-size: 3em; }
}

/* ── 46. Légendes d'illustration ─────────────────────────────────────────
   Dans un catalogue, la légende d'une planche est en italique, dans la même
   fonte que le texte : elle accompagne l'image sans la concurrencer. Les
   capitales espacées restent réservées aux étiquettes de navigation. */
.chapter__media figcaption,
.garden-grid figcaption,
.planche figcaption,
.plan figcaption {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: .95rem;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
  color: var(--ink-55);
}
.chapter__media figcaption { margin-top: .85rem; }