* { box-sizing: border-box; }
:root { color-scheme: light; font-family: system-ui, -apple-system, sans-serif; color: #302d29; background: #f7f5f1; }
body { margin: 0; }
.galerie { max-width: 1260px; padding: 36px 28px 64px; margin: auto; }
.galerie-entete { max-width: 780px; margin-bottom: 30px; }
.surtitre { color: #796653; font-size: .75rem; letter-spacing: .15em; }
h1 { font-family: Georgia, serif; font-weight: normal; font-size: clamp(2rem, 5vw, 3.5rem); margin: 12px 0; }
h2 { font-family: Georgia, serif; font-weight: normal; }
p { line-height: 1.6; }
a { color: #624730; text-underline-offset: 4px; }
a, button { -webkit-tap-highlight-color: transparent; }
.salle-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.salle-cadre { position: relative; background: #e9e5df; border: 1px solid #d5cec4; border-radius: 6px; overflow: hidden; }
#salle { display: block; width: 100%; height: clamp(300px, 53vw, 570px); touch-action: none; }
.statut { position: absolute; left: 16px; right: 16px; bottom: 8px; margin: 0; padding: 9px 14px; font-size: .85rem; background: #fffef5ed; border-radius: 4px; pointer-events: auto; }
button { font: inherit; background: #fffdfa; color: #403a32; border: 1px solid #c5b9a9; border-radius: 4px; padding: 12px 16px; min-height: 46px; cursor: pointer; touch-action: none; }
button[aria-pressed="true"] { background: #e8dfd2; }
@media (hover: hover) { button:hover { background: #e8dfd2; } }
:focus-visible { outline: 3px solid #947034; outline-offset: 4px; }
.commandes { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; }
[hidden] { display: none !important; }
#oeuvres { margin-top: 40px; scroll-margin-top: 20px; }
.oeuvres-liste { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.oeuvres-liste li { min-width: 0; }
.oeuvre-lien { display: block; }
.oeuvre-lien img { width: 100%; height: 230px; object-fit: contain; background: #ece7df; padding: 12px; border-radius: 4px; }
h3 { font-size: 1rem; margin-bottom: 0; }
.oeuvres-liste p { font-size: .9rem; color: #686057; }
.image-erreur { padding: 10px; border-left: 3px solid #a54935; }
dialog { border: 0; border-radius: 6px; width: min(960px, 94vw); max-height: 92dvh; padding: 24px; box-shadow: 0 20px 90px #0005; }
dialog::backdrop { background: #171510c7; }
.vue-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 16px; }
#vue-image { display: block; margin: auto; max-width: 100%; width: auto; height: auto; max-height: 58dvh; object-fit: contain; }
#vue-description { white-space: pre-line; }
body:has(dialog[open]) { overflow: hidden; }
@media (max-width: 640px) { .galerie { padding: 24px 16px 40px; } .salle-entete { align-items: start; flex-direction: column; gap: 0; } .oeuvres-liste { grid-template-columns: 1fr; } .commandes button { flex: 1 1 28%; padding: 10px; font-size: .85rem; } .commandes span { display: block; } dialog { padding: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }
.atelier-grille { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 22px; align-items: start; }
.atelier-grille #salle { height: 520px; }
#atelier { background: #fffdfa; border: 1px solid #d5cec4; border-radius: 6px; padding: 18px; }
.atelier-entete h2 { margin-top: 0; }
#atelier label { display: block; margin: 12px 0 5px; font-size: .9rem; }
#atelier input, #atelier select { width: 100%; font: inherit; padding: 9px; border: 1px solid #b9ae9e; border-radius: 4px; min-height: 42px; color: #302d29; background: #fff; }
#atelier input[type="file"] { font-size: .8rem; padding: 6px; }
#atelier fieldset { border: 1px solid #d5cec4; padding: 12px; margin-top: 16px; }
#atelier legend { font-size: .85rem; }
#atelier p, #atelier details { font-size: .85rem; line-height: 1.5; }
#atelier button { width: 100%; }
#atelier details { margin-top: 18px; }
#atelier summary { cursor: pointer; }
#atelier li { margin-bottom: 8px; }
#chevauchements { color: #822f23; background: #fae9e1; padding: 10px; }
#etat-enregistrement[data-modifie="true"] { border-left: 3px solid #a77127; padding-left: 10px; }
.atelier-fichiers { display: grid; gap: 4px; }
body[data-mode="amenagement"] #salle { cursor: grab; }
body[data-mode="amenagement"] #salle[data-manipulation="true"] { cursor: grabbing; }
button:disabled { opacity: .55; cursor: default; }
@media (max-width: 900px) { .atelier-grille { grid-template-columns: 1fr; } .atelier-grille #salle { height: 380px; } }

/* Visite publique : hauteur dynamique et marges des encoches en mode immersif. */
.immersif-barre { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 8px; }
#visite-immersive.immersive { position: fixed; inset: 0; z-index: 10000; width: 100%; height: 100vh; height: 100dvh; background: #e9e5df; padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px); display: flex; flex-direction: column; overscroll-behavior: none; }
.immersive .immersif-barre { flex: none; margin: 0; padding: 6px 8px; }
.immersive .salle-cadre { flex: 1; min-height: 0; border: 0; border-radius: 0; }
.immersive #salle { width: 100%; height: 100%; touch-action: none; }
.immersive .commandes { flex: none; padding: 6px; }
.immersive-tactile .commandes, .immersive .statut { display: none; }
#aide-immersive { padding: 6px 12px; background: #fffdfa; flex: none; display: flex; align-items: center; gap: 12px; }
#aide-immersive p { margin: 0; font-size: .85rem; line-height: 1.35; }
#vue-oeuvre { overflow-y: auto; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; scroll-padding-top: 80px; }
#vue-oeuvre .vue-entete { position: sticky; top: -1px; background: #fff; z-index: 1; padding: 4px 0; }
.immersive #vue-oeuvre { max-width: calc(100% - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px) - 24px); max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 24px); }

.immersif-barre { flex-wrap: wrap; }

/* La hauteur reste disponible en immersion tactile. */
.commandes [data-hauteur] { touch-action: none; }
.immersive-tactile .commandes { display: flex; }
.immersive-tactile .commandes > :not([data-hauteur]) { display: none; }

/* Panneau de visite uniquement : une place réservée sous la scène, sans superposition. */
#visite-immersive .commandes-compactes {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 6px max(4px, env(safe-area-inset-right, 0px)) max(6px, env(safe-area-inset-bottom, 0px)) max(4px, env(safe-area-inset-left, 0px));
    background: #eee9e1; flex: none;
}
#visite-immersive .commandes-compactes button { flex: none; min-width: 44px; min-height: 44px; padding: 4px 8px; font-size: 1rem; touch-action: none; user-select: none; }
#visite-immersive #panneau-commandes { display: grid; grid-template-columns: auto auto; gap: 4px 12px; align-items: center; }
#visite-immersive .commandes-mouvements, #visite-immersive .commandes-secondaires { display: flex; gap: 4px; }
#visite-immersive .commandes-mouvements button { width: 44px; font-size: 1.3rem; }
#visite-immersive .commandes-legende { margin: 0; font-size: .75rem; grid-column: 1; text-align: center; }
#visite-immersive .commandes-secondaires { grid-column: 2; grid-row: 1 / 3; }
#visite-immersive .commandes-compactes > :not([data-hauteur]) { display: revert; }
#visite-immersive .commandes-compactes > #panneau-commandes { display: grid; }
@media (max-width: 680px) {
    #visite-immersive #panneau-commandes { grid-template-columns: auto; gap: 2px; }
    #visite-immersive .commandes-secondaires { grid-column: 1; grid-row: auto; justify-content: center; }
}
@media (max-height: 480px) {
    .immersive #aide-immersive p { max-height: 44px; overflow-y: auto; }
    .immersive .immersif-barre { padding-top: 0; padding-bottom: 0; }
}

/* Huit commandes : deux rangées compactes sur les petits téléphones. */
@media (max-width: 420px) {
    #visite-immersive .commandes-mouvements { display: grid; grid-template-columns: repeat(4, 44px); justify-content: center; }
}