/* ============ Galerie Hors-Cadre – démo Noltron Studios ============ */
:root {
  --papier: #ece8df;
  --encre: #14130f;
  --doux: #5b574c;
  --brique: #d9654a;
  --nuit: #2c3a5c;
  --vert: #3f7d6b;
  --rose: #e9b7a8;
  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans: "Instrument Sans", "Segoe UI", system-ui, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --gut: clamp(18px, 3vw, 48px);
  color-scheme: light;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papier); color: var(--encre); font: 400 17px/1.6 var(--sans); overflow-x: clip; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3, p, figure, dl, dd, address { margin: 0; }
address { font-style: normal; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--brique); outline-offset: 4px; }
.saut { position: absolute; left: 12px; top: -60px; z-index: 200; padding: 10px 16px; background: var(--encre); color: var(--papier); transition: top .2s; }
.saut:focus { top: 12px; }

/* ---------- Coins : le menu est réparti aux quatre angles ---------- */
.coins { position: fixed; inset: 0; z-index: 50; pointer-events: none; mix-blend-mode: difference; color: #fff; }
.coins a { position: absolute; pointer-events: auto; text-decoration: none; font-weight: 500; font-size: 14px; letter-spacing: .06em; padding: 8px 4px; }
.coins .marque { left: var(--gut); top: 14px; font: 600 20px/1 var(--serif); letter-spacing: 0; }
.coin { }
.c-hd { right: var(--gut); top: 16px; }
.c-bg { left: var(--gut); bottom: 14px; }
.c-bd { right: var(--gut); bottom: 14px; }
.coins a::after { content: ""; position: absolute; left: 4px; right: 4px; bottom: 4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: 0 50%; transition: transform .4s var(--ease); }
.coins a:hover::after, .coins a:focus-visible::after { transform: scaleX(1); }
.coins .marque::after { display: none; }

/* ---------- Le mur : aucune grille, chaque œuvre a sa place ---------- */
.mur-cadre { container-type: inline-size; max-width: 1700px; margin: 0 auto; padding: 0 var(--gut); }
.mur { position: relative; height: calc(162 * 1cqw); margin-inline: calc(var(--gut) * -1 + var(--gut)); }
.titre { font: 600 clamp(80px, 17cqw, 300px)/.8 var(--serif); letter-spacing: -.04em; pointer-events: none; position: absolute; inset: 0; z-index: 5; mix-blend-mode: difference; color: #ece8df; font-variation-settings: "wght" 600; }
.titre span { position: absolute; white-space: nowrap; }
.t1 { left: -1cqw; top: 3cqw; }
.t2 { left: 36cqw; top: 33cqw; font-style: italic; font-weight: 300; font-variation-settings: "wght" 300; }
.intro { position: absolute; left: 68cqw; top: 7cqw; width: 26cqw; z-index: 4; }
.intro .expo { font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--brique); font-weight: 600; }
.intro .gros { font: 500 clamp(30px, 3.6cqw, 56px)/1.05 var(--serif); margin: 8px 0 14px; letter-spacing: -.02em; }
.intro p:not(.expo):not(.gros):not(.dates) { max-width: 34ch; color: var(--doux); }
.intro .dates { margin-top: 14px; font-weight: 600; font-size: 15px; }

.oeuvre { position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1cqw); width: calc(var(--w) * 1%); z-index: 2; }
.vue { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.pl { display: block; will-change: transform; transition: transform .6s var(--ease); }
.pl img { width: 100%; box-shadow: 0 30px 50px -34px rgba(20, 19, 15, .7), 0 2px 0 rgba(20, 19, 15, .08); transition: transform .6s var(--ease), box-shadow .6s; }
.vue:hover img, .vue:focus-visible img { transform: scale(1.02); box-shadow: 0 40px 60px -34px rgba(20, 19, 15, .8); }
.oeuvre { opacity: 0; transform: translateY(24px); animation: entre 1s var(--ease) forwards; animation-delay: calc(var(--i) * 90ms + 150ms); }
@keyframes entre { to { opacity: 1; transform: none; } }

figcaption { position: absolute; width: clamp(120px, 15cqw, 240px); font-size: 14px; line-height: 1.4; }
figcaption em { display: block; font: italic 400 clamp(17px, 1.5cqw, 22px)/1.15 var(--serif); }
figcaption span { display: block; margin-top: 2px; }
figcaption small { display: block; margin-top: 6px; font-size: 12px; color: var(--doux); }
.c-bas figcaption { top: 100%; left: 0; margin-top: 12px; }
.c-haut figcaption { bottom: 100%; right: 0; margin-bottom: 12px; text-align: right; }
.c-gauche figcaption { right: 100%; top: 0; margin-right: 16px; text-align: right; }
.c-droite figcaption { left: 100%; bottom: 0; margin-left: 16px; }

/* ---------- Artistes : cassés à l'écart ---------- */
.artistes { max-width: 1400px; margin: 0 auto; padding: clamp(60px, 10vw, 140px) var(--gut); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; }
.artistes h2 { grid-column: 3 / 12; font: 300 clamp(40px, 8vw, 128px)/.92 var(--serif); letter-spacing: -.035em; margin-bottom: clamp(30px, 6vw, 80px); }
.art { max-width: 38ch; }
.art h3 { font: italic 500 clamp(24px, 2.4vw, 34px)/1.1 var(--serif); margin-bottom: 8px; }
.art p { color: var(--doux); }
.a1 { grid-column: 1 / 6; margin-top: 10px; }
.a2 { grid-column: 8 / 13; margin-top: -30px; }
.a3 { grid-column: 3 / 8; margin-top: 60px; }
.a4 { grid-column: 9 / 13; margin-top: 110px; }

/* ---------- Visite ---------- */
.visite { max-width: 1400px; margin: 0 auto; padding: clamp(40px, 8vw, 120px) var(--gut) clamp(90px, 12vw, 170px); display: grid; grid-template-columns: repeat(12, 1fr); column-gap: 20px; row-gap: 26px; }
.visite h2 { grid-column: 1 / 8; font: 600 clamp(52px, 11vw, 180px)/.85 var(--serif); letter-spacing: -.045em; }
.visite address { grid-column: 6 / 13; font: italic 300 clamp(26px, 3.6vw, 52px)/1.1 var(--serif); }
.horaires { grid-column: 2 / 7; border-top: 1px solid var(--encre); }
.horaires div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(20, 19, 15, .25); }
.horaires dt { color: var(--doux); }
.horaires dd { font-weight: 600; }
.gratuit { grid-column: 8 / 13; align-self: end; color: var(--doux); max-width: 34ch; }
.invit { grid-column: 4 / 11; margin-top: 30px; padding: clamp(22px, 3vw, 40px); background: var(--nuit); color: var(--papier); transform: rotate(-1.2deg); }
.invit label { display: block; font: italic 400 clamp(22px, 2.4vw, 32px)/1.15 var(--serif); margin-bottom: 18px; }
.ligne-form { display: flex; gap: 10px; flex-wrap: wrap; }
.invit input { flex: 1 1 240px; min-width: 0; padding: 14px 16px; border: 1.5px solid rgba(236, 232, 223, .5); background: transparent; color: var(--papier); border-radius: 0; }
.invit input::placeholder { color: rgba(236, 232, 223, .6); }
.invit button { padding: 14px 24px; border: 0; background: var(--brique); color: #fff; font-weight: 600; cursor: pointer; transition: background .3s; }
.invit button:hover { background: #c4543a; }
.invit button { color: #14130f; background: var(--rose); }
.invit button:hover { background: #fff; }
.retour { margin-top: 12px; min-height: 1.6em; font-weight: 600; }

.pied { border-top: 1px solid rgba(20, 19, 15, .2); padding: 28px var(--gut) 70px; max-width: 1400px; margin: 0 auto; }
.cr { max-width: 80ch; font-size: 13px; color: var(--doux); }

/* ---------- Visionneuse ---------- */
dialog { border: 0; padding: 0; background: var(--papier); color: var(--encre); max-width: min(1200px, 94vw); max-height: 92vh; width: 100%; overflow: auto; }
dialog::backdrop { background: rgba(20, 19, 15, .78); }
.vd-cadre { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, 1fr); gap: clamp(20px, 3vw, 44px); padding: clamp(18px, 3vw, 40px); align-items: center; }
#vd-img { width: 100%; max-height: 78vh; object-fit: contain; background: #fff; }
#vd-titre { font: italic 400 clamp(30px, 3.4vw, 52px)/1.05 var(--serif); letter-spacing: -.02em; }
.vd-art { margin-top: 10px; font-weight: 600; }
.vd-tech { color: var(--doux); font-size: 15px; }
.vd-txt { margin-top: 18px; }
.vd-prix { margin-top: 18px; font: italic 400 20px/1 var(--serif); color: var(--brique); }
.vd-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 28px; }
.vd-nav button { padding: 11px 18px; border: 1.5px solid var(--encre); background: transparent; cursor: pointer; transition: background .25s, color .25s; }
.vd-nav button:hover { background: var(--encre); color: var(--papier); }
.vd-x { margin-left: auto; }

/* ---------- Téléphone : même désordre, en colonne ---------- */
@media (max-width: 760px) {
  body { font-size: 16px; }
  .mur { height: auto; display: flex; flex-direction: column; gap: 44px; padding: 96px 0 40px; margin: 0; }
  .titre { position: static; font-size: 24cqw; line-height: .84; }
  .titre span { position: static; display: block; }
  .t2 { margin-left: 22%; }
  .intro { position: static; width: auto; margin-left: 10%; }
  .oeuvre { position: relative; left: auto; top: auto; width: var(--mw); margin-left: var(--mx); }
  figcaption, .c-bas figcaption, .c-haut figcaption, .c-gauche figcaption, .c-droite figcaption { position: static; width: auto; margin: 10px 0 0; text-align: left; max-width: 34ch; }
  .oeuvre.c-haut figcaption, .oeuvre.c-droite figcaption { margin-left: 0; }
  .artistes, .visite { display: block; }
  .artistes h2 { margin-bottom: 30px; }
  .art { margin-bottom: 30px; }
  .a2, .a4 { margin-left: 18%; }
  .a3 { margin-left: 6%; }
  .visite h2 { margin-bottom: 24px; }
  .visite address { margin-bottom: 26px; margin-left: 12%; }
  .horaires { margin-left: 6%; }
  .gratuit { margin: 22px 0 0 12%; }
  .invit { margin-top: 34px; transform: rotate(-1deg); }
  .vd-cadre { grid-template-columns: 1fr; }
  #vd-img { max-height: 52vh; }
  .coins .marque { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .oeuvre { animation: none; opacity: 1; transform: none; }
  .pl, .pl img { transition: none; }
}