:root {
  --nav-w: 360px;
  --bar-h: 42px;
  --fg: #fff;
  --base: #216f83;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #222; font-family: Roboto, system-ui, sans-serif; color: var(--fg); }
#mp, .mp-next { position: fixed; inset: 0; width: 100%; height: 100%; border: 0; }
.mp-next { opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.mp-next.shown { opacity: 1; }
body.busy::after { content: ""; position: fixed; left: 50%; bottom: 80px; z-index: 8; width: 28px; height: 28px; margin-left: -14px; border: 3px solid rgba(255,255,255,.35); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; filter: drop-shadow(0 1px 3px rgba(0,0,0,.5)); }

.loader { position: fixed; inset: 0; display: grid; place-items: center; background: #222; z-index: 1; transition: opacity .4s; pointer-events: none; }
.loader.done { opacity: 0; }
.loader span { width: 34px; height: 34px; border: 3px solid rgba(255,255,255,.2); border-top-color: #fff; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.ico { width: 20px; height: 20px; flex: none; }

.logo { position: fixed; top: 24px; left: 24px; z-index: 5; max-width: min(300px, 40vw); }
/* lecteur standard my.matterport.com : son logo est en haut à gauche -> on se décale */
body.std-player .logo { top: 10px; left: 168px; max-width: min(300px, 32vw); }
.logo img { display: block; max-width: 100%; max-height: 110px; }
body.std-player .logo img { max-height: 80px; }

.menu-btn { position: fixed; top: 0; right: 0; z-index: 7; height: var(--bar-h); display: flex; align-items: center; gap: 10px; padding: 0 16px; border: 0; background: var(--base); color: #fff; font: 500 19px Roboto, sans-serif; letter-spacing: .02em; cursor: pointer; }
.menu-btn .ico { width: 24px; height: 24px; }
.menu-btn .when-open, .menu-btn[aria-expanded="true"] .when-closed { display: none; }
.menu-btn[aria-expanded="true"] .when-open { display: inline-flex; }
.menu-btn .when-closed { display: inline-flex; }

.nav { position: fixed; top: var(--bar-h); right: 0; z-index: 6; width: var(--nav-w); max-width: 100vw; max-height: calc(100% - var(--bar-h) - 70px); overflow-y: auto; overscroll-behavior: contain; transform: translateX(105%); transition: transform .3s ease; scrollbar-width: thin; }
.nav.open { transform: none; }

.nav-title { background: var(--base); padding: 12px 10px 10px; border-bottom: 2px solid rgba(0,0,0,.15); }
.nav-title .present { display: block; color: #fff; font-size: 12px; font-style: italic; text-decoration: none; }
.nav-title .project { font-size: 17px; margin-top: 2px; }

.sec { background: var(--c, var(--base)); border-bottom: 2px solid rgba(0,0,0,.15); }
.sec-head { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 45px; padding: 10px; border: 0; background: none; color: #fff; font: 400 16px Roboto, sans-serif; text-align: left; text-decoration: none; cursor: pointer; }
.sec-head .label { flex: 1; }
a.sec-head .label, button.sec-head.is-action .label { text-decoration: underline; text-underline-offset: 3px; }
.sec-head .arrow { width: 20px; height: 20px; transition: transform .25s; }
.sec.open .sec-head .arrow { transform: rotate(-90deg); }
.sec-body { padding: 0 10px 12px 40px; }
.sec.collapsible:not(.open) .sec-body { display: none; }
.sec-body p { margin: 0 0 10px; font-size: 15px; line-height: 1.4; }
.sec-body a { color: #fff; }
.sec-body iframe.map { width: 100%; height: 180px; border: 0; margin-top: 8px; display: block; }

.items { list-style: none; margin: 0; padding: 0; }
.items button, .items a { display: flex; align-items: center; gap: 6px; width: 100%; padding: 7px 0; border: 0; background: none; color: #fff; font: 400 15px Roboto, sans-serif; text-align: left; text-decoration: none; cursor: pointer; opacity: .92; }
.items .ico { width: 16px; height: 16px; }
.items button:hover, .items a:hover, .items .current { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.items .current { font-weight: 500; }

.social { display: flex; gap: 8px; padding-top: 4px; }
.social a { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #000; }
.social .ico { width: 16px; height: 16px; }

.modal { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; background: rgba(0,0,0,.65); padding: 24px; }
.modal[hidden] { display: none; }
.modal-box { display: flex; flex-direction: column; width: min(1100px, 100%); height: min(90vh, 100%); background: #fff; border-radius: 6px; overflow: hidden; }
.modal-bar { display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; background: var(--base); color: #fff; }
.modal-bar span { flex: 1; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-bar a, .modal-bar button { display: grid; place-items: center; width: 36px; height: 36px; border: 0; background: none; color: #fff; cursor: pointer; }
#modalFrame { flex: 1; width: 100%; border: 0; }
.modal-body { display: none; flex: 1; overflow-y: auto; padding: 20px 24px 28px; color: #222; font-size: 15px; line-height: 1.55; }
.modal.is-fiche #modalFrame, .modal.is-fiche #modalExt { display: none; }
.modal.is-fiche .modal-body { display: block; }
.modal.is-fiche .modal-box { width: min(760px, 100%); height: auto; max-height: 90vh; }
.modal-body img { display: block; max-width: 100%; max-height: 55vh; margin: 0 auto 16px; border-radius: 4px; }
.modal-body h2 { margin: 0 0 10px; font-size: 20px; font-weight: 500; }
.modal-body a { color: var(--base); }

.items .group-head { font-weight: 500; }
.items .group-head .arrow { width: 16px; height: 16px; transition: transform .25s; }
.items .group.open > .group-head .arrow { transform: rotate(-90deg); }
.items .sub { padding-left: 18px; display: none; }
.items .group.open > .sub { display: block; }

@media (max-width: 700px) {
  :root { --nav-w: 100vw; }
  .logo { top: 12px; left: 12px; max-width: 40vw; }
  body.std-player .logo { top: 8px; left: 130px; max-width: 30vw; }
  .logo img { max-height: 60px; }
  .nav { max-height: calc(100% - var(--bar-h)); }
  .modal { padding: 0; }
  .modal-box { height: 100%; border-radius: 0; }
}