/* ==========================================================================
   Charlotte de Soos — « La cimaise »
   Le site est une salle de musée : le mur porte la couleur, les tableaux y
   sont accrochés, les textes sont du lettrage posé sur le mur ou des cartels.
   Une couleur de mur par famille de pages (verte : œuvres ; rouge :
   expositions ; bleue : atelier, cours, stages).
   ========================================================================== */

@font-face { font-family: "Commissioner Flare"; src: url("../fonts/commissioner-flare.woff2") format("woff2"); font-weight: 200 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Commissioner"; src: url("../fonts/commissioner-texte.woff2") format("woff2"); font-weight: 300 700; font-style: oblique 0deg 12deg; font-display: swap; }

:root {
  /* salle verte (par défaut) */
  --mur: oklch(0.335 0.058 162);
  --mur-ombre: oklch(0.265 0.05 162);
  --mur-nuit: oklch(0.17 0.035 162);
  --plinthe: oklch(0.44 0.055 162);
  --lettrage: oklch(0.955 0.018 95);
  --lettrage-2: oklch(0.87 0.04 162);
  --filet: oklch(0.955 0.018 95 / .24);
  --or: oklch(0.83 0.105 88);
  --sur-or: oklch(0.22 0.03 88);
  --cartel: oklch(0.965 0.012 95);
  --encre: oklch(0.24 0.025 162);
  --encre-2: oklch(0.41 0.035 162);
  --filet-cartel: oklch(0.24 0.025 162 / .22);
  --erreur: oklch(0.48 0.17 27);
  --ombre-toile: 0 .2rem .35rem oklch(0.12 0.03 162 / .45), 0 1.1rem 1.6rem -.5rem oklch(0.12 0.03 162 / .6);
  --ombre-cartel: 0 .1rem .2rem oklch(0.12 0.03 162 / .4), 0 .5rem .9rem -.35rem oklch(0.12 0.03 162 / .45);

  --cimaise: "Commissioner Flare", Optima, Candara, "Segoe UI", sans-serif;
  --texte: "Commissioner", "Segoe UI", system-ui, sans-serif;
  --t-affiche: clamp(2.6rem, 1.1rem + 6vw, 6rem);
  --t-titre: clamp(1.85rem, 1.25rem + 2.3vw, 3.25rem);
  --t-sous-titre: clamp(1.3rem, 1.1rem + .8vw, 1.75rem);
  --t-chapo: clamp(1.1rem, 1rem + .55vw, 1.4rem);

  --bord: max(clamp(1.25rem, 4.5vw, 4.5rem), calc(50% - 44rem));
  --bandeau: 4.25rem;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);
}
.salle-rouge {
  --mur: oklch(0.36 0.105 22); --mur-ombre: oklch(0.285 0.085 22); --mur-nuit: oklch(0.18 0.05 22); --plinthe: oklch(0.46 0.1 22);
  --lettrage-2: oklch(0.89 0.04 40); --encre: oklch(0.25 0.035 22); --encre-2: oklch(0.42 0.05 22); --filet-cartel: oklch(0.25 0.035 22 / .22);
  --ombre-toile: 0 .2rem .35rem oklch(0.13 0.04 22 / .45), 0 1.1rem 1.6rem -.5rem oklch(0.13 0.04 22 / .6);
  --ombre-cartel: 0 .1rem .2rem oklch(0.13 0.04 22 / .4), 0 .5rem .9rem -.35rem oklch(0.13 0.04 22 / .45);
}
.salle-bleue {
  --mur: oklch(0.325 0.07 252); --mur-ombre: oklch(0.255 0.06 252); --mur-nuit: oklch(0.17 0.04 252); --plinthe: oklch(0.43 0.07 252);
  --lettrage-2: oklch(0.88 0.035 252); --encre: oklch(0.24 0.03 252); --encre-2: oklch(0.41 0.04 252); --filet-cartel: oklch(0.24 0.03 252 / .22);
  --ombre-toile: 0 .2rem .35rem oklch(0.12 0.035 252 / .45), 0 1.1rem 1.6rem -.5rem oklch(0.12 0.035 252 / .6);
  --ombre-cartel: 0 .1rem .2rem oklch(0.12 0.035 252 / .4), 0 .5rem .9rem -.35rem oklch(0.12 0.035 252 / .45);
}

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

html {
  background: var(--mur); color: var(--lettrage);
  scrollbar-color: var(--lettrage-2) var(--mur-ombre);
  scroll-behavior: smooth; scroll-padding-top: 6rem;
  -webkit-text-size-adjust: 100%;
}
body { margin: 0; font: 400 1.0625rem/1.65 var(--texte); font-variant-numeric: lining-nums; -webkit-font-smoothing: antialiased; overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
figure, blockquote { margin: 0; }
address { font-style: normal; }
p { max-width: 68ch; margin: 0 0 1em; text-wrap: pretty; }
h1, h2, h3, h4 { margin: 0; font-family: var(--cimaise); font-weight: 350; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
a { color: inherit; text-decoration-line: underline; text-decoration-color: var(--or); text-decoration-thickness: 1px; text-underline-offset: .24em; }
a:hover { text-decoration-thickness: 2px; }
strong { font-weight: 600; }
:focus-visible { outline: 2px solid var(--or); outline-offset: 3px; }
::selection { background: var(--or); color: var(--sur-or); }
input, textarea { caret-color: var(--mur); accent-color: var(--mur); }

.evitement { position: absolute; left: 1rem; top: -5rem; z-index: 100; padding: .7rem 1rem; background: var(--cartel); color: var(--encre); }
.evitement:focus { top: 1rem; }
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--sortie); }

/* ───────── Plaques (boutons) et liens ───────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  padding: .85em 1.3em; border: 1px solid var(--or); border-radius: 2px;
  background: transparent; color: var(--lettrage);
  font: 600 .9375rem/1.15 var(--texte); text-decoration: none; cursor: pointer;
  transition: background-color .3s var(--sortie), color .3s var(--sortie), border-color .3s var(--sortie);
}
.btn:hover { background: var(--or); color: var(--sur-or); }
.btn:hover .ico, .lien:hover .ico { transform: translateX(.25em); }
.btn--plein { background: var(--cartel); border-color: var(--cartel); color: var(--encre); }
.btn--plein:hover { background: var(--or); border-color: var(--or); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn:disabled:hover { background: transparent; color: var(--lettrage); }
.lien { display: inline-flex; align-items: center; gap: .4em; font-weight: 600; }
.actions { display: flex; flex-wrap: wrap; gap: .75rem; max-width: none; margin: 0; }
.suite { display: flex; flex-wrap: wrap; gap: 1rem 2.25rem; max-width: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; }

/* ───────── Signalétique (en-tête) ───────── */

.signaletique {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
  min-height: var(--bandeau); padding: .5rem var(--bord);
  background: var(--mur); border-bottom: 1px solid var(--filet);
}
.enseigne { font: 400 1.3rem/1 var(--cimaise); letter-spacing: .005em; white-space: nowrap; text-decoration: none; }
/* À l'accueil, le nom est déjà écrit en grand sur le mur : l'enseigne n'apparaît qu'une fois ce titre dépassé. */
@supports (animation-timeline: scroll()) {
  .accueil .enseigne { animation: enseigne linear both; animation-timeline: scroll(root); animation-range: 4rem 13rem; }
}
@keyframes enseigne { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.nav__liste { display: flex; align-items: center; gap: clamp(1rem, 2.1vw, 2.1rem); margin: 0; padding: 0; list-style: none; }
.nav__lien {
  position: relative; display: inline-flex; align-items: center; gap: .35em;
  padding: .7rem 0; border: 0; background: none; color: var(--lettrage);
  font: 500 .9375rem/1 var(--texte); text-decoration: none; cursor: pointer;
}
.nav__lien::after { content: ""; position: absolute; left: 0; right: 0; bottom: .15rem; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sortie); }
.nav__lien:hover::after, .nav__lien[aria-current="page"]::after, .est-courant > .nav__lien::after { transform: scaleX(1); }
.nav__lien .ico { width: .9em; height: .9em; }
.nav__lien[aria-expanded="true"] .ico { transform: rotate(180deg); }
.nav__groupe { position: relative; }
.nav__sous {
  position: absolute; top: calc(100% + .6rem); right: -1rem; z-index: 5;
  min-width: 18rem; margin: 0; padding: .4rem; list-style: none;
  background: var(--cartel); color: var(--encre); box-shadow: var(--ombre-cartel);
  opacity: 0; visibility: hidden; transform: translateY(-.4rem);
  transition: opacity .25s var(--sortie), transform .25s var(--sortie), visibility .25s;
}
.nav__sous::before { content: ""; position: absolute; left: 0; right: 0; top: -.7rem; height: .7rem; }
.nav__groupe:hover .nav__sous, .nav__groupe:focus-within .nav__sous, .nav__lien[aria-expanded="true"] + .nav__sous { opacity: 1; visibility: visible; transform: none; }
.nav__sous a { display: block; padding: .7rem .9rem; font-weight: 600; line-height: 1.3; text-decoration: none; }
.nav__sous a span { display: block; font-size: .8125rem; font-weight: 400; color: var(--encre-2); }
.nav__sous a:hover, .nav__sous a[aria-current="page"] { background: var(--mur); color: var(--lettrage); }
.nav__sous a:hover span, .nav__sous a[aria-current="page"] span { color: var(--lettrage-2); }
.nav__sous a:focus-visible { outline-color: var(--mur); outline-offset: -2px; }

.burger { display: none; align-items: center; gap: .65rem; padding: .7rem 0; border: 0; background: none; color: var(--lettrage); font: 600 .9375rem/1 var(--texte); cursor: pointer; }
.burger__barres { position: relative; width: 22px; height: 12px; }
.burger__barres::before, .burger__barres::after { content: ""; position: absolute; left: 0; right: 0; height: 1.5px; background: currentColor; transition: transform .4s var(--sortie); }
.burger__barres::before { top: 0; }
.burger__barres::after { bottom: 0; }
.burger[aria-expanded="true"] .burger__barres::before { transform: translateY(5.25px) rotate(45deg); }
.burger[aria-expanded="true"] .burger__barres::after { transform: translateY(-5.25px) rotate(-45deg); }

/* ───────── Salles, titres, textes ───────── */

.salle { margin-block: clamp(4.5rem, 9vw, 8rem); padding-inline: var(--bord); }
.salle--serree { margin-top: clamp(2rem, 4vw, 3.5rem); }
.tete { margin-bottom: clamp(1.75rem, 3.5vw, 3rem); }
.tete h2 { max-width: 20ch; font-size: var(--t-titre); }
.tete__chapo { max-width: 54ch; margin: 1.1rem 0 0; font-size: var(--t-chapo); line-height: 1.5; color: var(--lettrage-2); }

.entree { padding: clamp(2.5rem, 6vw, 5rem) var(--bord) 0; }
.entree h1 { max-width: 16ch; font-size: var(--t-affiche); font-weight: 300; line-height: 1; letter-spacing: -.03em; }
.entree__chapo { max-width: 46ch; margin: clamp(1rem, 2vw, 1.5rem) 0 0; font-size: var(--t-chapo); line-height: 1.5; color: var(--lettrage-2); }
.entree__image { margin-top: clamp(2rem, 4.5vw, 3.75rem); aspect-ratio: 21 / 8; overflow: hidden; box-shadow: var(--ombre-toile); }
.entree__image img { width: 100%; height: 100%; object-fit: cover; }

.prose > * + * { margin-top: 1em; }
.prose p { margin-bottom: 0; }
.prose ul { display: grid; gap: .55em; margin-bottom: 0; padding: 0; list-style: none; }
.prose ul li { position: relative; max-width: 66ch; padding-left: 1.4em; }
.prose ul li::before { content: ""; position: absolute; left: 0; top: .78em; width: .7em; height: 1px; background: var(--or); }
.prose--chapo { font-size: var(--t-chapo); line-height: 1.5; }
.prose h3 { margin-top: 1.75em; font-size: var(--t-sous-titre); }
.prose h4 { margin-top: 1.5em; font: 600 1rem/1.4 var(--texte); letter-spacing: 0; }

/* Panneau de salle et cartel : les seules surfaces claires */
.panneau { padding: clamp(1.5rem, 3.2vw, 2.75rem); background: var(--cartel); color: var(--encre); box-shadow: var(--ombre-cartel); }
.panneau :focus-visible { outline-color: var(--mur); }
.panneau ::selection { background: var(--mur); color: var(--lettrage); }
.panneau a { text-decoration-color: var(--encre-2); }
.panneau .prose ul li::before { background: var(--encre-2); }
.panneau .btn { border-color: var(--encre); color: var(--encre); }
.panneau .btn:hover { background: var(--encre); color: var(--cartel); }
.panneau .btn--plein { background: var(--mur); border-color: var(--mur); color: var(--lettrage); }
.panneau .btn--plein:hover { background: var(--encre); border-color: var(--encre); color: var(--cartel); }
.cartel { width: 14rem; padding: .85rem 1rem 1rem; background: var(--cartel); color: var(--encre); box-shadow: var(--ombre-cartel); font-size: .8125rem; line-height: 1.5; }
.cartel strong { display: block; margin-bottom: .2rem; font-size: .9688rem; line-height: 1.3; }
.cartel p { margin: 0; }
.cartel a { display: inline-flex; align-items: center; gap: .35em; margin-top: .6rem; font-weight: 600; text-decoration-color: var(--encre-2); }
.cartel a:focus-visible { outline-color: var(--mur); }

/* ───────── Accueil : le mur d'entrée ───────── */

.mur-entree { padding-top: clamp(1.25rem, 3.5vh, 3rem); }
.titre-expo { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem 3rem; padding-inline: var(--bord); }
.titre-expo h1 { font-size: var(--t-affiche); font-weight: 300; line-height: .98; letter-spacing: -.03em; }
.titre-expo h1 span { display: block; margin-top: .75rem; font: 400 var(--t-chapo)/1.35 var(--texte); letter-spacing: 0; color: var(--lettrage-2); }

.titre-expo__cote { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: .75rem 2.5rem; }
.promenade { margin-top: clamp(1rem, 3vh, 2.5rem); }
.promenade__mur {
  display: flex; align-items: center; gap: clamp(1.75rem, 3.6vw, 3.75rem);
  padding: clamp(2.25rem, 4.5vh, 3.25rem) var(--bord) clamp(2.25rem, 4.5vh, 3rem);
  border-top: 3px double var(--or);                   /* la cimaise : le rail d'accrochage */
  overflow: auto hidden; scroll-snap-type: x proximity; scroll-padding-inline: var(--bord);
  scrollbar-width: thin; scrollbar-color: var(--or) transparent;
  cursor: grab;
}
.promenade__mur.est-saisi { cursor: grabbing; scroll-snap-type: none; }
.toile { position: relative; flex: none; height: calc(var(--t, 1) * clamp(15rem, 54vh, 32rem)); aspect-ratio: var(--r); scroll-snap-align: start; box-shadow: var(--ombre-toile); }
.toile::before { content: ""; position: absolute; left: 20%; right: 20%; bottom: 100%; height: 40rem; border-inline: 1px solid oklch(0.955 0.018 95 / .38); pointer-events: none; }   /* tiges d'accrochage */
.toile img { width: 100%; height: 100%; object-fit: cover; -webkit-user-drag: none; user-select: none; }
.toile:focus-visible { outline-offset: 6px; }
.promenade__mur > .cartel, .promenade__mur > .texte-salle { flex: none; scroll-snap-align: start; }
.promenade__mur > .cartel { align-self: flex-end; margin-bottom: 1.5rem; }
.texte-salle { width: min(23.5rem, 78vw); padding: 1.5rem 1.6rem 1.65rem; background: var(--cartel); color: var(--encre); box-shadow: var(--ombre-cartel); }
.texte-salle h2 { margin-bottom: .85rem; font-size: 1.35rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; }
.texte-salle p { margin: 0; font-size: .9688rem; line-height: 1.6; }
.promenade__pas { display: flex; gap: .5rem; max-width: none; margin: 0; }
.promenade__pas .btn { width: 2.9rem; height: 2.9rem; padding: 0; }
.promenade__pas .btn:first-child .ico { transform: scaleX(-1); }

@media (prefers-reduced-motion: no-preference) {
  .promenade__mur > * { animation: accroche 1s var(--sortie) backwards; animation-delay: calc(var(--i, 0) * 80ms + 120ms); }
}
@keyframes accroche { from { opacity: 0; transform: translateY(-1.5rem); } }

/* ───────── Accueil : présentation, répertoire, atelier, parcours ───────── */

.presentation { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 2rem clamp(1rem, 2vw, 2rem); }
.presentation__photo { grid-column: 1 / span 5; box-shadow: var(--ombre-toile); }
.presentation__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 30%; }
.presentation__texte { grid-column: 7 / -1; padding-bottom: clamp(0rem, 2vw, 2rem); }
.presentation h2 { margin-bottom: 1.5rem; font-size: var(--t-titre); }
.presentation p { font-size: var(--t-chapo); line-height: 1.55; color: var(--lettrage-2); }

.repertoire { margin: 0; padding: 0; border-top: 1px solid var(--filet); list-style: none; }
.repertoire li { display: grid; grid-template-columns: clamp(5.5rem, 15vw, 12rem) minmax(0, 1fr) auto; align-items: center; gap: 1rem clamp(1.25rem, 3.5vw, 3.5rem); padding: clamp(1rem, 2vw, 1.5rem) 0; border-bottom: 1px solid var(--filet); }
.repertoire__img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.repertoire h3 { font-size: clamp(1.5rem, 1rem + 2.4vw, 2.9rem); font-weight: 300; }
.repertoire__liens { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; margin: 0; font-size: 1.0625rem; }

.atelier-mur { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: start; gap: clamp(2rem, 4vw, 3.5rem) clamp(1rem, 2vw, 2rem); }
.atelier-mur h2 { grid-column: 1 / -1; font-size: var(--t-titre); }
.atelier-mur__citation { grid-column: 1 / span 10; margin-top: calc(clamp(2rem, 4vw, 3.5rem) * -.5); }
.atelier-mur__citation p { max-width: none; margin: 0; font: 300 clamp(1.45rem, 1rem + 2.1vw, 2.6rem)/1.24 var(--cimaise); letter-spacing: -.015em; }
.atelier-mur__grande { grid-column: 1 / span 7; box-shadow: var(--ombre-toile); }
.atelier-mur__grande img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.atelier-mur__cote { grid-column: 9 / -1; }
.atelier-mur__cote figure { margin-bottom: 1.5rem; box-shadow: var(--ombre-toile); }
.atelier-mur__cote img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.atelier-mur__cote p { color: var(--lettrage-2); }

.parcours { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2.5rem, 6vw, 6rem); }
.parcours h3 { padding-bottom: .9rem; border-bottom: 1px solid var(--filet); font-size: var(--t-sous-titre); }
.frise { margin: 0; padding: 0; list-style: none; }
.frise li { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1.25rem; padding: 1.15rem 0; border-bottom: 1px solid var(--filet); }
.frise__date { color: var(--or); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.frise__corps { line-height: 1.55; color: var(--lettrage-2); }
.frise__corps strong { color: var(--lettrage); font-size: .875rem; letter-spacing: .04em; }
.parcours__suite { margin: clamp(2rem, 4vw, 3rem) 0 0; }

.cloture { padding-block: clamp(3rem, 6vw, 5rem); border-top: 3px double var(--or); }
.cloture h2 { max-width: 16ch; font-size: clamp(2.2rem, 1.2rem + 4.4vw, 4.75rem); font-weight: 300; line-height: 1.02; letter-spacing: -.03em; }
.cloture > p:not(.actions) { max-width: 50ch; margin: 1.5rem 0 2rem; font-size: var(--t-chapo); line-height: 1.5; color: var(--lettrage-2); }

/* ───────── Plinthe (pied de page) ───────── */

.plinthe { padding: clamp(3rem, 6vw, 4.5rem) var(--bord) clamp(2.5rem, 5vw, 3.5rem); background: var(--mur-ombre); border-top: .55rem solid var(--plinthe); font-size: .9688rem; }
.plinthe__in { display: grid; grid-template-columns: 1.5fr 1fr .9fr 1.2fr; gap: 2.5rem; }
.plinthe h2 { margin-bottom: .9rem; font: 600 1rem/1.3 var(--texte); letter-spacing: 0; color: var(--or); }
.plinthe p, .plinthe address { margin: 0; color: var(--lettrage-2); }
.plinthe__nom { font: 300 clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem)/1.05 var(--cimaise); letter-spacing: -.02em; text-decoration: none; }
.plinthe__nom + p { margin-top: .9rem; }
.plinthe__liste { display: grid; gap: .45rem; margin: 0; padding: 0; list-style: none; color: var(--lettrage-2); }
.plinthe__liste a { display: inline-flex; align-items: center; gap: .35em; color: var(--lettrage); }
.plinthe__liste .ico { width: .9em; height: .9em; }

/* ───────── Blocs texte + image ───────── */

.duo { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
.duo--inverse { grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); }
.duo--haut { align-items: start; }
.duo--galerie { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); align-items: start; }
.duo__texte .tete { margin-bottom: 1.5rem; }
.duo__texte > .lien { margin-top: 1.5rem; }
.duo__media img { width: 100%; }
.duo__media--paire { display: grid; grid-template-columns: 1.25fr 1fr; align-items: end; gap: clamp(.75rem, 1.5vw, 1.5rem); }
.duo__media--paire img { aspect-ratio: 3 / 4; object-fit: cover; }
.duo__media--paire figure:last-child img { aspect-ratio: 4 / 5; }
.sous-titre { margin: 2.5rem 0 1rem; font-size: var(--t-sous-titre); }
.rappel { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--filet); }
.rappel h3 { margin-bottom: .35rem; font: 600 1rem/1.4 var(--texte); letter-spacing: 0; color: var(--or); }
.rappel p { margin: 0; }
.rappel p::first-letter { text-transform: uppercase; }

.intro { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(1.5rem, 6vw, 6rem); }
.intro h2 { font-size: var(--t-titre); }
.intro__texte p { max-width: 40ch; margin: 0; font: 300 clamp(1.3rem, 1rem + 1.2vw, 1.85rem)/1.38 var(--cimaise); letter-spacing: -.01em; }
.volets { display: grid; gap: clamp(3.5rem, 8vw, 7rem); }
.volet { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); align-items: center; gap: clamp(2rem, 5vw, 5rem); }
.volet:nth-child(even) { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.volet:nth-child(even) .volet__media { order: 2; }
.volet__media figure { box-shadow: var(--ombre-toile); }
.volet__media figure img { width: 100%; max-height: min(38rem, 82vh); object-fit: cover; }
.volet__texte p { font-size: var(--t-chapo); line-height: 1.5; }
.volet__texte .lien { margin-top: .5rem; }
.volet .galerie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
.volet .galerie::after { display: none; }
.volet .galerie__item { aspect-ratio: 4 / 3; }

/* ───────── Accrochages (galeries) ───────── */

.galerie { --h: 11rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: .5rem; }
.galerie::after { content: ""; flex: 1000000 1 0; }
.galerie.est-replie::after { display: none; }
.galerie--oeuvre { --h: 19rem; gap: clamp(1.25rem, 2.4vw, 2.25rem); }
.galerie--grand { --h: 24rem; gap: clamp(1.5rem, 3vw, 2.75rem); }
.galerie__item { position: relative; flex: calc(var(--r) * 100) 1 calc(var(--r) * var(--h)); aspect-ratio: var(--r); background: var(--mur-ombre); cursor: zoom-in; outline: 1px solid transparent; outline-offset: 0; transition: outline-color .3s var(--sortie), outline-offset .3s var(--sortie); }
.galerie__item[hidden] { display: none; }
.galerie__item img { width: 100%; height: 100%; object-fit: cover; }
.galerie__item:hover { outline-color: var(--or); outline-offset: 5px; }
.galerie__item:focus-visible { outline: 2px solid var(--or); outline-offset: 5px; }
.galerie--oeuvre .galerie__item { box-shadow: var(--ombre-toile); }
.galerie__plus { margin-top: 2rem; }
.zoom { display: inline-block; cursor: zoom-in; }

.onglets__liste { display: flex; flex-wrap: wrap; gap: .25rem 2rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--filet); }
.onglets__liste button { position: relative; padding: .8rem 0; border: 0; background: none; color: var(--lettrage-2); font: 500 1.0625rem/1.2 var(--texte); cursor: pointer; }
.onglets__liste button span { margin-left: .3em; font-size: .875rem; font-variant-numeric: tabular-nums; }
.onglets__liste button::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sortie); }
.onglets__liste button:hover, .onglets__liste button[aria-selected="true"] { color: var(--lettrage); }
.onglets__liste button[aria-selected="true"]::after { transform: scaleX(1); }
.onglets__panneau > h3 { margin: 2.5rem 0 1.25rem; font-size: var(--t-sous-titre); }
.onglets__panneau[hidden] { display: none; }
.js .onglets__panneau > h3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Visionneuse : on éteint la salle, le tableau reste éclairé */
.visionneuse { width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; overflow: hidden; background: var(--mur-nuit); color: var(--lettrage); }
.visionneuse::backdrop { background: var(--mur-nuit); }
.visionneuse__scene { position: absolute; inset: 4.5rem clamp(.5rem, 7vw, 6rem) 5rem; display: grid; grid-template: minmax(0, 1fr) / minmax(0, 1fr); place-items: center; }
.visionneuse__img { width: auto; height: auto; max-width: 100%; max-height: 100%; min-height: 0; object-fit: contain; box-shadow: 0 1.5rem 4rem oklch(0.08 0.02 162 / .7); }
.visionneuse__attente { position: absolute; margin: 0; font-size: .9375rem; color: var(--lettrage-2); }
.visionneuse__attente[hidden] { display: none; }
.visionneuse__barre { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; justify-content: space-between; padding: .8rem 1rem .8rem 1.5rem; font-size: .9375rem; }
.visionneuse__compte { font-variant-numeric: tabular-nums; }
.visionneuse__legende { position: absolute; left: 0; right: 0; bottom: 0; max-width: none; margin: 0; padding: 0 1.5rem 1.5rem; text-align: center; font-size: 1rem; }
.visionneuse .btn { width: 2.9rem; height: 2.9rem; padding: 0; }
.visionneuse__pas { position: absolute; top: 50%; z-index: 2; margin-top: -1.45rem; }
.visionneuse__prec { left: clamp(.5rem, 2vw, 1.5rem); }
.visionneuse__prec .ico { transform: scaleX(-1); }
.visionneuse__suiv { right: clamp(.5rem, 2vw, 1.5rem); }
.visionneuse__pas[hidden] { display: none; }
::view-transition-group(toile) { animation-duration: .55s; animation-timing-function: var(--sortie); }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }

/* ───────── Œuvres : thèmes ───────── */

.sommaire { position: sticky; top: var(--bandeau); z-index: 20; margin-top: clamp(2rem, 4vw, 3.5rem); padding: 0 var(--bord); background: var(--mur); border-block: 1px solid var(--filet); }
.sommaire ul { position: relative; display: flex; gap: clamp(1.25rem, 2.6vw, 2.5rem); margin: 0; padding: 0; overflow-x: auto; list-style: none; white-space: nowrap; scrollbar-width: none; }
.sommaire ul::-webkit-scrollbar { display: none; }
.sommaire a { position: relative; display: block; padding: 1rem 0; color: var(--lettrage-2); font-weight: 500; text-decoration: none; }
.sommaire a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--or); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--sortie); }
.sommaire a:hover, .sommaire a.est-actif { color: var(--lettrage); }
.sommaire a.est-actif::after { transform: scaleX(1); }
.theme { display: grid; grid-template-columns: minmax(0, .42fr) minmax(0, 1fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); margin-block: clamp(4rem, 8vw, 7rem); padding-inline: var(--bord); scroll-margin-top: 8rem; }
.theme h2 { margin-bottom: 1.25rem; font-size: var(--t-titre); }
.theme .prose { color: var(--lettrage-2); }
.theme .prose em { color: var(--lettrage); font-style: normal; font-weight: 500; }
.theme__compte { margin: 1.5rem 0; color: var(--or); font-weight: 500; font-variant-numeric: tabular-nums; }
.theme .galerie--oeuvre { --h: 15rem; }

/* ───────── Cours ───────── */

.pedagogie { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: clamp(2.5rem, 6vw, 6rem); }
.pedagogie .tete { margin-bottom: 1.5rem; }
.pedagogie .prose + .prose { margin-top: 1.5rem; color: var(--lettrage-2); }
.pedagogie__themes p { margin: 0 0 .5rem; font-weight: 600; color: var(--or); }
.pedagogie__themes ul { margin: 0; padding: 0; list-style: none; }
.pedagogie__themes li { padding: .65rem 0; border-bottom: 1px solid var(--filet); font: 350 var(--t-sous-titre)/1.25 var(--cimaise); letter-spacing: -.01em; }

.tarifs { container-type: inline-size; }
.tarifs__grille { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: clamp(1.5rem, 3vw, 3rem); }
.tarif { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; scroll-margin-top: 7rem; }
.tarif + .tarif { padding-left: clamp(1.5rem, 3vw, 3rem); border-left: 1px solid var(--filet-cartel); }
.tarif > * { margin: 0; padding: .9rem 0; border-top: 1px solid var(--filet-cartel); }
.tarif > h3, .tarif > .tarif__prix { padding-top: 0; border-top: 0; }
.tarif h3 { padding-bottom: 0; font-size: var(--t-sous-titre); font-weight: 500; }
.tarif h3 span { display: block; margin-top: .3rem; font: 400 .9375rem/1.4 var(--texte); letter-spacing: 0; color: var(--encre-2); }
.tarif > .tarif__prix { padding-bottom: 1.25rem; color: var(--encre-2); }
.tarif__prix strong { display: block; margin: 1rem 0 .15rem; font: 300 clamp(2.75rem, 2rem + 2.4vw, 3.9rem)/1 var(--cimaise); letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; color: var(--encre); }
.tarif__prix small { display: block; margin-top: .5rem; font-size: .875rem; line-height: 1.45; }
.tarif dl { display: grid; grid-template-columns: 5.75rem minmax(0, 1fr); gap: .75rem; }
.tarif dt { font-weight: 600; font-size: .9375rem; }
.tarif dd { margin: 0; font-size: .9688rem; line-height: 1.5; }
.tarif dl.tarif__apporter { grid-template-columns: minmax(0, 1fr); gap: .35rem; }
.tarif ul { margin: 0; padding-left: 1.1em; }
.tarif > .tarif__action { padding-top: 1.25rem; }
.tarif__action .btn { width: 100%; }
@container (max-width: 50rem) {
  .tarifs__grille { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; row-gap: 2.75rem; }
  .tarif { grid-row: auto; grid-template-rows: none; }
  .tarif + .tarif { padding: 2.75rem 0 0; border-left: 0; border-top: 1px solid var(--encre); }
}

/* ───────── Stages ───────── */

.programme { margin: 0; padding: 0; border-top: 1px solid var(--filet); list-style: none; container-type: inline-size; }
.stage { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: 1rem clamp(1.5rem, 4vw, 4.5rem); padding: clamp(1.5rem, 3vw, 2.5rem) 0; border-bottom: 1px solid var(--filet); }
.stage__date { margin: 0; color: var(--or); font-weight: 500; font-variant-numeric: tabular-nums lining-nums; }
.stage__date span { display: block; color: var(--lettrage-2); font-weight: 400; }
.stage h3 { margin-bottom: 1rem; font-size: var(--t-sous-titre); font-weight: 400; }
.stage__infos { margin: 0; padding: 0; list-style: none; color: var(--lettrage-2); }
.stage__infos li + li { margin-top: .3rem; }
.stage__chapo { font-size: var(--t-chapo); line-height: 1.5; }
.stage__texte { margin: 1.25rem 0 0; color: var(--lettrage-2); }
.stage__details { margin: 1.25rem 0 0; }
.stage__details > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; padding: .7rem 0; border-top: 1px solid var(--filet); }
.stage__details dt { font-weight: 600; }
.stage__details dd { max-width: 60ch; margin: 0; color: var(--lettrage-2); }
.annonce { max-width: none; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font: 350 var(--t-sous-titre)/1.3 var(--cimaise); letter-spacing: -.01em; }
@container (max-width: 40rem) {
  .stage { grid-template-columns: minmax(0, 1fr); }
  .stage__details > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
}

.fiche h3 { margin-bottom: .9rem; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); }
.fiche__date { margin: 0 0 .6rem; font-weight: 600; color: var(--encre-2); }
.fiche__chapo { font-size: 1.125rem; line-height: 1.5; }
.fiche__prog { margin: 1.5rem 0; padding: 0 0 0 1.4em; }
.fiche__prog > li { padding: .75rem 0 .75rem .35em; border-top: 1px solid var(--filet-cartel); }
.fiche__prog > li::marker { font-weight: 600; font-variant-numeric: tabular-nums; }
.fiche__prog ul { margin: .25rem 0 0; padding-left: 1.1em; color: var(--encre-2); }
.fiche h4 { margin: 2rem 0 .5rem; font: 600 1.0625rem/1.3 var(--texte); letter-spacing: 0; }
.fiche__pratique { margin: 0; }
.fiche__pratique > div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: 1rem; padding: .75rem 0; border-top: 1px solid var(--filet-cartel); }
.fiche__pratique dt { font-weight: 600; }
.fiche__pratique dd { margin: 0; }
.fiche__contact { margin: .5rem 0 0; padding-top: 1.1rem; border-top: 1px solid var(--filet-cartel); }

/* ───────── Expositions ───────── */

.chrono-tete { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); align-items: end; gap: clamp(2rem, 6vw, 6rem); margin-bottom: clamp(2rem, 5vw, 4rem); }
.chrono-tete .tete { margin-bottom: 0; }
.chrono-tete figure { box-shadow: var(--ombre-toile); }
.chrono-tete img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 50% 22%; }
.chrono { margin: 0; padding: 0; border-top: 1px solid var(--filet); list-style: none; }
.expo { display: grid; grid-template-columns: clamp(6.5rem, 16vw, 13rem) minmax(0, 1fr); align-items: baseline; gap: clamp(1rem, 3vw, 3rem); padding: clamp(1.25rem, 2.6vw, 2rem) 0; border-bottom: 1px solid var(--filet); scroll-margin-top: 7rem; }
.expo__date { display: flex; flex-direction: column; gap: .2rem; margin: 0; color: var(--lettrage-2); }
.expo__date span { font: 300 clamp(1.9rem, 1.4rem + 1.9vw, 2.9rem)/1 var(--cimaise); letter-spacing: -.02em; font-variant-numeric: tabular-nums lining-nums; color: var(--or); }
.expo h3 { max-width: 34ch; font-size: clamp(1.2rem, 1rem + .9vw, 1.65rem); font-weight: 400; line-height: 1.28; letter-spacing: -.01em; }
.expo__docs { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 1.25rem; }
.expo__docs img { width: auto; height: 8.5rem; box-shadow: var(--ombre-cartel); }
.expo__docs .zoom { outline: 1px solid transparent; transition: outline-color .3s var(--sortie), outline-offset .3s var(--sortie); }
.expo__docs .zoom:hover { outline-color: var(--or); outline-offset: 4px; }

.coupures { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; gap: clamp(1.5rem, 3.5vw, 3.5rem); }
.coupure__img { display: block; aspect-ratio: 4 / 3; overflow: hidden; box-shadow: var(--ombre-cartel); }
.coupure__img .zoom { display: block; height: 100%; }
.coupure__img img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.coupure h3 { margin: 1.25rem 0 .6rem; font-size: var(--t-sous-titre); font-weight: 400; }
.coupure h3 a { text-decoration: none; }
.coupure p { color: var(--lettrage-2); }

.livre-dor { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 6vw, 6rem); }
.livre-dor blockquote p { max-width: none; margin: 0; font: 300 clamp(1.4rem, 1rem + 1.6vw, 2.2rem)/1.28 var(--cimaise); letter-spacing: -.015em; }
.livre-dor figcaption { margin-top: 1.25rem; color: var(--or); font-weight: 600; }

.lecture { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.lecture__img img { width: 100%; box-shadow: var(--ombre-toile); }
.lecture .panneau { font-size: 1.0938rem; }
.lecture .panneau p { max-width: 66ch; }
.lecture .panneau > .prose > p:first-child { font: 500 clamp(1.35rem, 1rem + 1.2vw, 1.8rem)/1.25 var(--cimaise); letter-spacing: -.01em; }
.lecture .suite { grid-column: 1 / -1; margin-top: 0; }

/* ───────── Contact ───────── */

.contact { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); align-items: start; gap: clamp(2rem, 6vw, 6rem); }
.coordonnees { margin: 0; }
.coordonnees > div { padding: 1.25rem 0; border-top: 1px solid var(--filet); }
.coordonnees dt { margin-bottom: .35rem; color: var(--or); font-weight: 600; }
.coordonnees dd { margin: 0; font: 350 var(--t-sous-titre)/1.35 var(--cimaise); letter-spacing: -.01em; }
.coordonnees ul { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; margin: 0; padding: 0; list-style: none; font: 400 1.0625rem/1.5 var(--texte); letter-spacing: 0; }
.coordonnees ul a { display: inline-flex; align-items: center; gap: .35em; }
.plan { position: relative; min-height: 15rem; margin-top: .5rem; padding: clamp(1.25rem, 3vw, 2rem); background: var(--mur-ombre); }
.plan p { margin: 0 0 1.1rem; }
.plan__note { font-size: .875rem; color: var(--lettrage-2); }
.plan iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.plan.est-charge { min-height: 24rem; }

.formulaire h2 { margin-bottom: .6rem; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.4rem); }
.formulaire__chapo { margin-bottom: 1.75rem; color: var(--encre-2); }
.form__grille { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.5rem; }
.champ { display: grid; gap: .3rem; max-width: none; margin: 0 0 1.35rem; }
.champ label { font-weight: 600; font-size: .9375rem; }
.champ input:not([type="checkbox"]), .champ textarea { width: 100%; padding: .65rem 0; border: 0; border-bottom: 1px solid var(--encre-2); border-radius: 0; background: transparent; color: var(--encre); font: inherit; transition: border-color .3s var(--sortie), box-shadow .3s var(--sortie); }
.champ textarea { min-height: 8rem; padding: .65rem .75rem; border: 1px solid var(--encre-2); resize: vertical; }
.champ input:not([type="checkbox"]):hover, .champ textarea:hover { border-color: var(--encre); }
.champ input:not([type="checkbox"]):focus-visible { outline: 0; border-bottom-color: var(--mur); box-shadow: 0 2px 0 var(--mur); }
.champ textarea:focus-visible { outline: 2px solid var(--mur); outline-offset: 2px; }
.champ.est-invalide input:not([type="checkbox"]), .champ.est-invalide textarea { border-color: var(--erreur); }
.champ__erreur { font-size: .875rem; font-weight: 600; color: var(--erreur); }
.champ--case { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .3rem .8rem; }
.champ--case input { width: 1.2rem; height: 1.2rem; margin: .22rem 0 0; }
.champ--case label { font-size: .9063rem; font-weight: 400; line-height: 1.5; }
.champ--case .champ__erreur { grid-column: 2; }
.form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; max-width: none; margin: 1.75rem 0 1.1rem; }
.form__etat { font-size: .9375rem; font-weight: 600; }
.form__note { margin: 0; font-size: .875rem; color: var(--encre-2); }
.siret { max-width: none; margin: clamp(2.5rem, 5vw, 4rem) 0 0; font-size: .875rem; color: var(--lettrage-2); }

/* ───────── Mentions légales ───────── */

.legal { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 46rem); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.legal__sommaire { position: sticky; top: 6rem; font-size: .9375rem; }
.legal__sommaire ol { display: grid; margin: 0; padding: 0; list-style: none; }
.legal__sommaire a { display: block; padding: .32rem 0; color: var(--lettrage-2); line-height: 1.4; text-decoration: none; }
.legal__sommaire a:hover { color: var(--lettrage); text-decoration: underline; text-decoration-color: var(--or); }
.prose--legal { overflow-wrap: anywhere; }
.prose--legal h2 { margin-top: 2.75rem; padding-top: 1.5rem; border-top: 1px solid var(--filet-cartel); font-size: 1.6rem; font-weight: 500; scroll-margin-top: 6rem; }
.prose--legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose--legal h3 { margin-top: 1.5rem; font: 600 1rem/1.4 var(--texte); letter-spacing: 0; }

/* ───────── Adaptations ───────── */

@media (max-width: 66rem) {
  .plinthe__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 58rem) {
  .js .burger { display: inline-flex; }
  .js .nav { position: fixed; inset: var(--bandeau) 0 0; z-index: 40; padding: 1rem var(--bord) 3rem; overflow-y: auto; background: var(--mur); opacity: 0; visibility: hidden; transform: translateY(-.6rem); transition: opacity .35s var(--sortie), transform .35s var(--sortie), visibility .35s; }
  .js .nav.est-ouvert { opacity: 1; visibility: visible; transform: none; }
  .menu-ouvert { overflow: hidden; }
  .nav__liste { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__liste > li { border-bottom: 1px solid var(--filet); }
  .nav__lien { width: 100%; justify-content: space-between; padding: 1.05rem 0; font: 300 1.9rem/1.1 var(--cimaise); letter-spacing: -.02em; }
  .nav__lien::after { display: none; }
  .nav__lien[aria-current="page"], .est-courant > .nav__lien { color: var(--or); }
  .nav__sous, .nav__groupe:hover .nav__sous, .nav__groupe:focus-within .nav__sous { position: static; display: none; min-width: 0; padding: 0 0 1rem; background: none; color: inherit; box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav__lien[aria-expanded="true"] + .nav__sous { display: block; }
  html:not(.js) .nav__sous { display: block; }
  html:not(.js) .signaletique { flex-wrap: wrap; }
  .nav__sous a { padding: .55rem 0; font-size: 1.125rem; }
  .nav__sous a span { color: var(--lettrage-2); }
  .nav__sous a:hover, .nav__sous a[aria-current="page"] { background: none; color: var(--or); }
  .nav__sous a:focus-visible { outline-color: var(--or); }

  .parcours, .duo, .duo--inverse, .duo--galerie, .intro, .volet, .volet:nth-child(even),
  .pedagogie, .theme, .chrono-tete, .lecture, .contact, .legal { grid-template-columns: minmax(0, 1fr); }
  .presentation__photo { grid-column: 1 / span 8; }
  .presentation__texte, .atelier-mur__citation, .atelier-mur__grande { grid-column: 1 / -1; }
  .atelier-mur__cote { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: end; gap: 1.25rem; }
  .atelier-mur__cote figure { margin: 0; }
  .volet:nth-child(even) .volet__media { order: 0; }
  .duo--inverse .duo__media { order: 2; }
  .coupures { grid-template-columns: minmax(0, 1fr); max-width: 30rem; }
  .livre-dor { grid-template-columns: minmax(0, 1fr); }
  .legal__sommaire { position: static; padding-bottom: 1.5rem; border-bottom: 1px solid var(--filet); }
  .legal__sommaire ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; }
  .chrono-tete figure { max-width: 26rem; }
  .entree__image { aspect-ratio: 16 / 9; }
  .repertoire li { grid-template-columns: clamp(5.5rem, 24vw, 9rem) minmax(0, 1fr); }
  .repertoire__liens { grid-column: 2; }
}

@media (max-width: 40rem) {
  body { font-size: 1rem; }
  .galerie { --h: 7.2rem; gap: .35rem; }
  .galerie--oeuvre, .theme .galerie--oeuvre { --h: 11rem; gap: 1rem; }
  .galerie--grand { --h: 13rem; }
  .toile { height: calc(var(--t, 1) * clamp(14rem, 42vh, 20rem)); }
  .frise li { grid-template-columns: minmax(0, 1fr); gap: .25rem; }
  .plinthe__in { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
  .form__grille { grid-template-columns: minmax(0, 1fr); }
  .fiche__pratique > div { grid-template-columns: minmax(0, 1fr); gap: .15rem; }
  .legal__sommaire ol { grid-template-columns: minmax(0, 1fr); }
  .expo { grid-template-columns: minmax(0, 1fr); gap: .6rem; }
  .expo__date { flex-direction: row; align-items: baseline; gap: .7rem; }
  .presentation__photo { grid-column: 1 / -1; }
  .atelier-mur__cote { grid-template-columns: minmax(0, 1fr); }
  .visionneuse__scene { inset: 4.25rem .5rem 4.75rem; }
  .visionneuse__pas { top: auto; bottom: .75rem; margin-top: 0; }
  .visionneuse__legende { padding-inline: 4.5rem; font-size: .9375rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0s !important; transition-duration: .01ms !important; }
}

@media print {
  .signaletique, .cloture, .plinthe, .galerie__plus, .sommaire, .plan, .promenade__pas { display: none !important; }
  html { background: none; color: oklch(0.2 0.02 162); }
  .galerie__item[hidden] { display: block; }
}

/* ==========================================================================
   Version « blanc » : galerie blanche, sans ombres ni couleurs de mur.
   Ces règles s'ajoutent à la base de mise en page et la remplacent.
   ========================================================================== */

:root, .salle-rouge, .salle-bleue {
  --mur: #fff;
  --mur-ombre: #f5f5f3;
  --mur-nuit: #fff;
  --plinthe: #e4e4e0;
  --lettrage: #111;
  --lettrage-2: #666;
  --filet: #e4e4e0;
  --or: #111;
  --sur-or: #fff;
  --cartel: #f5f5f3;
  --encre: #111;
  --encre-2: #666;
  --filet-cartel: #dcdcd7;
  --ombre-toile: none;
  --ombre-cartel: none;
  --cimaise: "Commissioner", "Helvetica Neue", Arial, sans-serif;
  --t-affiche: clamp(2.4rem, 1rem + 5vw, 5rem);
  --t-titre: clamp(1.7rem, 1.2rem + 1.8vw, 2.75rem);
}

html { scrollbar-color: #bbb #fff; }
h1, h2, h3, h4 { font-weight: 400; letter-spacing: -.025em; }
a { text-decoration-color: #bbb; }
a:hover { text-decoration-color: #111; text-decoration-thickness: 1px; }
input, textarea { caret-color: #111; accent-color: #111; }
.panneau :focus-visible, .nav__sous a:focus-visible, .cartel a:focus-visible, .champ textarea:focus-visible { outline-color: #111; }
.panneau ::selection { background: #111; color: #fff; }
.champ input:not([type="checkbox"]):focus-visible { border-bottom-color: #111; box-shadow: 0 1px 0 #111; }

/* Boutons */
.btn { border-color: #111; border-radius: 0; font-weight: 500; }
.btn--plein, .panneau .btn--plein { background: #111; border-color: #111; color: #fff; }
.btn--plein:hover, .panneau .btn--plein:hover { background: #444; border-color: #444; color: #fff; }
.btn:disabled { border-color: #ccc; color: #999; opacity: 1; }
.btn:disabled:hover { color: #999; }
.lien { font-weight: 500; }

/* En-tête */
.signaletique { border-bottom-color: transparent; }
.enseigne { font: 500 1.0625rem/1 var(--texte); letter-spacing: -.01em; }
.accueil .enseigne { animation: none; }
.nav__lien { font-weight: 400; }
.nav__lien::after { height: 1px; }
.nav__sous { border: 1px solid var(--filet); background: #fff; }
.nav__sous a:hover, .nav__sous a[aria-current="page"] { background: var(--mur-ombre); }
.nav__sous a:hover span, .nav__sous a[aria-current="page"] span { color: var(--encre-2); }

/* Titres de page */
.entree h1, .titre-expo h1, .cloture h2 { font-weight: 400; letter-spacing: -.035em; }
.entree__image { aspect-ratio: 21 / 9; }

/* Accueil : les tableaux, simplement alignés */
.mur-entree { padding-top: clamp(2rem, 6vh, 4.5rem); }
.promenade__mur { align-items: flex-end; gap: clamp(1.25rem, 2.5vw, 2.5rem); padding-top: clamp(1.5rem, 4vh, 3rem); border-top: 0; scrollbar-color: #bbb transparent; }
.toile { height: clamp(16rem, 56vh, 34rem); }
.toile::before { display: none; }
.promenade__mur > * { animation: none; }
.promenade__mur > .cartel { margin-bottom: 0; }
.cartel { padding: 0; background: none; }
.cartel a { text-decoration-color: #bbb; }

.presentation__texte { padding-bottom: 0; }
.repertoire h3 { font-weight: 400; }
.atelier-mur__citation p, .livre-dor blockquote p, .intro__texte p { font-weight: 400; color: #111; }
.frise__date, .stage__date, .theme__compte, .livre-dor figcaption, .coordonnees dt, .rappel h3, .pedagogie__themes p, .plinthe h2 { color: var(--lettrage-2); font-weight: 400; }
.expo__date span { color: #111; font-weight: 400; }
.pedagogie__themes li { font-weight: 400; }
.tarif__prix strong { font-weight: 400; }
.galerie__item { background: var(--mur-ombre); }
.galerie__item:hover { outline-color: transparent; }
.galerie__item img { transition: opacity .3s var(--sortie); }
.galerie__item:hover img { opacity: .82; }

.cloture { border-top: 1px solid var(--filet); }
.plinthe { background: #fff; border-top: 1px solid var(--filet); }
.plinthe__nom { font-weight: 400; }
.visionneuse__img { box-shadow: none; }

@media (max-width: 58rem) {
  .nav__lien { font-weight: 400; }
  .nav__lien[aria-current="page"], .est-courant > .nav__lien { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
  .nav__sous a:hover, .nav__sous a[aria-current="page"] { color: #111; text-decoration: underline; }
}
@media (max-width: 40rem) {
  .toile { height: clamp(15rem, 48vh, 22rem); }
}