:root {
    color-scheme: light;
    --papier: #f5f0e7;
    --encre: #2b2622;
    --doux: #6a6058;
    --terre: #a14e27;
    --filet: #d8cfbf;
    --mur: #ebe4d7;
    --mur-encre: #2b2622;
    --mur-doux: #6a6058;
    --vue: #1f1c1a;
    --vue-encre: #efe9df;
    --vue-doux: #cfc7ba;
    --cadre: #fff;
    --cadre-l: clamp(10px, 1.4vw, 18px);
    --cadre-accueil: clamp(14px, 2.4vw, 34px);
    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Noto Serif", serif;
    --bord: clamp(16px, 5vw, 72px);
}
* { box-sizing: border-box; }
html:has(dialog[open]) { overflow: hidden; }
html { scroll-behavior: smooth; scroll-padding-top: 72px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font-family: var(--serif); font-size: 18px; line-height: 1.6; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--terre); outline-offset: 3px; }

.entete { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px var(--bord); background: var(--papier); border-bottom: 1px solid var(--filet); }
.marque { font-size: 20px; letter-spacing: .03em; text-decoration: none; }
.entete nav { display: flex; gap: clamp(14px, 3vw, 32px); font-size: 16px; }
.entete nav a { text-decoration: none; color: var(--doux); padding: 4px 0; white-space: nowrap; }
.entete nav a:hover { color: var(--terre); }

.accueil { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 6vw, 96px); align-items: center; min-height: calc(100vh - 62px); padding: clamp(32px, 5vw, 64px) var(--bord); }
.sur-titre { margin: 0; color: var(--terre); font-size: 17px; letter-spacing: .22em; text-transform: uppercase; }
h1 { margin: .12em 0 .25em; font-size: clamp(64px, 11vw, 148px); font-weight: 400; line-height: .98; letter-spacing: -.015em; }
.accroche { max-width: 26em; margin: 0 0 1.6em; color: var(--doux); font-size: clamp(18px, 1.7vw, 22px); }
.lien-suite { display: inline-block; padding-bottom: 3px; border-bottom: 1px solid var(--terre); color: var(--terre); text-decoration: none; }
.lien-suite:hover { color: var(--encre); border-color: var(--encre); }
.installer { display: block; margin-top: 20px; padding: 8px 0; border: 0; background: none; color: var(--doux); font: inherit; font-size: 16px; text-decoration: underline; cursor: pointer; }
.installer[hidden] { display: none; }
.accueil-oeuvre { justify-self: end; background: var(--cadre); padding: var(--cadre-accueil); box-shadow: 0 18px 40px -22px rgba(43, 38, 34, .55); }
.accueil-oeuvre img { max-height: max(420px, calc(100vh - 182px - 2 * var(--cadre-accueil))); width: auto; }

.salle { padding: clamp(48px, 7vw, 96px) var(--bord); background: var(--mur); color: var(--mur-encre); }
.salle:has(+ .salle) { padding-bottom: 0; }
h2 { margin: 0 0 clamp(24px, 4vw, 44px); font-size: clamp(32px, 4vw, 46px); font-weight: 400; }
.mur { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(32px, 5vw, 72px); align-items: center; max-width: 1400px; }
.oeuvre { display: block; justify-self: center; width: fit-content; max-width: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: zoom-in; }
.oeuvre img { width: auto; max-height: 74vh; object-fit: contain; padding: var(--cadre-l); background: var(--cadre); box-shadow: 0 14px 30px -20px rgba(43, 38, 34, .6); transition: box-shadow .25s; }
.oeuvre:hover img { box-shadow: 0 22px 40px -20px rgba(43, 38, 34, .75); }
.cartel-prix { display: block; margin-top: 2px; color: var(--mur-encre); font-size: 16px; font-weight: 600; }
.cartel { display: block; margin-top: 12px; color: var(--mur-doux); font-size: 16px; }

.artiste { max-width: calc(36em + 2 * var(--bord)); padding: clamp(48px, 7vw, 96px) var(--bord); }
.artiste { font-size: calc(clamp(19px, 2vw, 23px) * var(--bio-k, 1)); line-height: 1.55; }
#biographie { color: var(--bio, inherit); }
#biographie p { margin: 0 0 .8em; }
#biographie h3 { margin: 1.2em 0 .4em; font-size: 1.25em; font-weight: 400; color: var(--bio, var(--terre)); }
#biographie h3:first-child { margin-top: 0; }
#biographie ul { margin: 0 0 .8em; padding-left: 1.2em; }
.artiste .portrait { width: min(100%, 320px); margin-bottom: 24px; padding: var(--cadre-l); background: var(--cadre); }
#coordonnees p { margin: 0 0 6px; }
[hidden] { display: none !important; }
.pied { padding: 24px var(--bord) calc(24px + env(safe-area-inset-bottom)); border-top: 1px solid var(--filet); color: var(--doux); font-size: 15px; }
.pied p { margin: 0; }

dialog#visionneuse { width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--vue); color: var(--vue-encre); overflow: hidden; }
dialog#visionneuse[open] { display: flex; align-items: center; justify-content: center; }
dialog::backdrop { background: var(--vue); }
#visionneuse figure { flex: 1; min-width: 0; height: 100%; margin: 0; padding: 20px 8px 14px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; pointer-events: none; }
#v-image { flex: 0 1 auto; min-height: 0; max-height: 100%; width: auto; object-fit: contain; }
#visionneuse figcaption { flex: none; max-width: 40em; max-height: 30%; overflow-y: auto; text-align: center; font-size: 16px; color: var(--vue-doux); pointer-events: auto; }
#visionneuse figcaption span { display: block; }
#v-prix { color: var(--vue-encre); font-weight: 600; }
#v-description { margin-top: 4px; }
.v-nav, .v-fermer { border: 0; background: none; color: var(--vue-encre); cursor: pointer; font-family: var(--serif); line-height: 1; }
.v-nav { flex: none; width: 64px; height: 96px; font-size: 48px; }
.v-fermer { position: absolute; top: calc(6px + env(safe-area-inset-top)); right: 8px; z-index: 2; width: 48px; height: 48px; font-size: 36px; }
.v-nav:hover, .v-fermer:hover { color: var(--terre); }

@media (max-width: 800px) {
    body { font-size: 17px; }
    .accueil { grid-template-columns: 1fr; min-height: 0; }
    .accueil-oeuvre { justify-self: stretch; }
    .accueil-oeuvre img { max-height: none; width: 100%; }
    .v-nav { position: absolute; bottom: 4px; z-index: 2; width: 56px; height: 56px; font-size: 40px; }
    .v-prec { left: 4px; } .v-suiv { right: 4px; }
    #visionneuse figure { padding: 56px 10px 66px; }
    #v-legende { padding: 0 48px; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .oeuvre img { transition: none; } }