/* Galerie : en-tête, onglets de séries et visionneuse communs aux mises en page. */
.galerie-entete { display: grid; gap: 18px; padding-block: clamp(32px, 4vw, 64px) clamp(20px, 2.5vw, 32px); }
.galerie-entete .page-headline { margin-top: 12px; }
.galerie-entete .page-lede { margin-top: 0; }
.galerie-onglets { display: flex; flex-wrap: wrap; gap: 6px 34px; margin-top: 12px; border-bottom: 1px solid #182b3926; }
.galerie-onglets a { position: relative; display: grid; gap: 2px; padding-block: 14px; }
.galerie-onglets span { font-size: clamp(19px, 1.5vw, 23px); line-height: 1.1; }
.galerie-onglets small { font-family: var(--sans); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--stone); }
.galerie-onglets a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .25s; }
.galerie-onglets a[aria-current]::after, .galerie-onglets a:hover::after { transform: scaleX(1); }
.galerie-onglets a:hover span { color: var(--rust); }
.galerie-oeuvre { cursor: zoom-in; }

.visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #0e161ce6; color: #f3efe6; }
.visionneuse::backdrop { background: #0e161c; }
.visionneuse-ouverte { overflow: hidden; }
.visionneuse-cadre { position: relative; height: 100%; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); align-items: center; gap: 32px; padding: 56px 72px; }
.visionneuse-oeuvre { margin: 0; height: 100%; display: grid; place-items: center; min-height: 0; }
.visionneuse-oeuvre img { max-width: 100%; max-height: calc(100dvh - 112px); width: auto; height: auto; object-fit: contain; box-shadow: 0 30px 60px -30px #000; }
.visionneuse-infos { display: grid; gap: 10px; align-content: center; }
.visionneuse-compte { font-family: var(--sans); font-size: 11px; letter-spacing: .16em; color: #f3efe699; font-variant-numeric: tabular-nums; }
.visionneuse-titre { font-size: clamp(30px, 2.6vw, 42px); font-weight: 400; line-height: 1.05; letter-spacing: -.02em; text-transform: none; }
.visionneuse-format { font-style: italic; font-size: 20px; color: #f3efe6b3; }
.visionneuse-apropos { justify-self: start; display: inline-flex; align-items: center; gap: 10px; margin-top: 6px; padding: 7px 14px; border: 1px solid #f3efe640; border-radius: 999px; background: transparent; color: #f3efe6d9; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s, color .2s; }
.visionneuse-apropos:hover, .visionneuse-apropos[aria-expanded="true"] { background: #f3efe61a; color: #f3efe6; }
.visionneuse-apropos span { font-size: 15px; line-height: 1; }
.visionneuse-description { max-width: 34ch; font-size: 19px; font-style: italic; line-height: 1.45; color: #f3efe6e0; }
.visionneuse-contact { margin-top: 18px; justify-self: start; padding-bottom: 6px; border-bottom: 1px solid #f3efe666; font-family: var(--sans); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.visionneuse-contact:hover { border-color: #f3efe6; }
.visionneuse-bouton { position: absolute; width: 48px; height: 48px; display: grid; place-items: center; background: transparent; color: inherit; border: 1px solid #f3efe640; border-radius: 50%; font-size: 18px; cursor: pointer; transition: background .2s; }
.visionneuse-bouton:hover { background: #f3efe61a; }
.visionneuse-precedent { left: 14px; top: 50%; transform: translateY(-50%); }
.visionneuse-suivant { right: 14px; top: 50%; transform: translateY(-50%); }
.visionneuse-fermer { right: 14px; top: 14px; }
@media (max-width: 800px) {
  .visionneuse-cadre { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; padding: 64px 16px 24px; gap: 18px; }
  /* L’image prend la place laissée par le texte (titre, description ouverte). */
  .visionneuse-oeuvre { position: relative; height: 100%; min-height: 0; }
  .visionneuse-oeuvre img { position: absolute; inset: 0; margin: auto; max-width: 100%; max-height: 100%; }
  .visionneuse-precedent, .visionneuse-suivant { top: auto; bottom: 18px; transform: none; }
  .visionneuse-infos { padding-inline: 56px; text-align: center; justify-items: center; }
  .visionneuse-contact, .visionneuse-apropos { justify-self: center; }
  .visionneuse-description { max-width: 40ch; max-height: 22dvh; overflow-y: auto; font-size: 17px; }
}

/* Cimaise : les toiles à l’échelle sur un mur d’exposition, avec cartels. */
.cimaise { position: relative; background: #e8e3d9; background-image: radial-gradient(ellipse 70% 60% at 50% 0%, #f4f0e8 0%, transparent 70%); padding-block: clamp(40px, 5vw, 80px) clamp(56px, 7vw, 110px); overflow: hidden; }
.cimaise::before { content: ''; position: absolute; inset: auto 0 0; height: 22px; background: linear-gradient(#d9d2c5, #cfc7b8); box-shadow: inset 0 1px 0 #f4f0e8; }
.cimaise-echelle { display: flex; align-items: center; gap: 14px; margin-bottom: clamp(36px, 4vw, 60px); font-family: var(--sans); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--stone); }
.cimaise-echelle i { display: block; height: 7px; border: 1px solid var(--stone); border-top: 0; }
.cimaise-mur { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(48px, 5vw, 88px) clamp(40px, 4.5vw, 80px); }
.cimaise-oeuvre { margin: 0; display: grid; justify-items: center; gap: 18px; }
.cimaise-oeuvre button { padding: 0; border: 0; background: none; cursor: zoom-in; }
.cimaise-oeuvre img { display: block; max-width: none; box-shadow: 0 1px 1px #0000001f, 0 14px 22px -12px #1b140c80, 0 28px 40px -30px #1b140c66; transition: transform .35s, box-shadow .35s; }
.cimaise-oeuvre button:hover img, .cimaise-oeuvre button:focus-visible img { transform: translateY(-4px); box-shadow: 0 1px 1px #0000001f, 0 22px 30px -14px #1b140c8c, 0 40px 56px -34px #1b140c73; }
.cartel { min-width: 120px; max-width: 200px; padding: 8px 12px 9px; background: #f7f4ee; box-shadow: 0 1px 2px #0000001a; text-align: left; }
.cartel p:first-child { font-size: 16px; font-style: italic; line-height: 1.15; }
.cartel p:last-child { margin-top: 4px; font-family: var(--sans); font-size: 10px; letter-spacing: .06em; color: var(--stone); }