/* Police de la maquette : deposer les fichiers dans fonts/ (voir @font-face, fichiers .ttf). Sinon police de secours. */
@font-face { font-family: "Museo Sans Cyrl"; font-weight: 500;
  src: local("MuseoSansCyrl-500"), url("../fonts/MuseoSansCyrl-500.ttf") format("truetype"); }
@font-face { font-family: "Museo Sans Cyrl"; font-weight: 700;
  src: local("MuseoSansCyrl-700"), url("../fonts/MuseoSansCyrl-700.ttf") format("truetype"); }
@font-face { font-family: "Museo Sans Cyrl"; font-weight: 900;
  src: local("MuseoSansCyrl-900"), url("../fonts/MuseoSansCyrl-900.ttf") format("truetype"); }

:root {
  --blue: #005394;
  --blue-text: #004e90;
  --grey-text: #4d4d4d;
  --line: #999;
  --font: "Museo Sans Cyrl", "Museo Sans", "Avenir Next", "Nunito Sans", Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #000; overflow: hidden; }
body { font-family: var(--font); font-weight: 500; color: #000;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:active { opacity: .7; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
.txt { white-space: pre-line; transition: opacity 200ms linear; }

/* Scene fixe 1920x1080, mise a l'echelle par js/app.js */
#stage { position: absolute; left: 0; top: 0; width: 1920px; height: 1080px; overflow: hidden; transform-origin: 0 0;
  background: radial-gradient(circle farthest-corner at 50% 50%, #f7f7f7 0%, #e8e8e8 100%); }
.page { position: absolute; inset: 0; will-change: opacity; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms linear, visibility 0s linear 200ms; }
.page.active { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 200ms linear; }
.page > * { position: absolute; }

.hline { height: 1px; background: var(--line); }
.vline { width: 4px; background: #000; }
.ruler { top: 0; width: 52px; height: 1080px; }
.ruler svg { display: block; }

.heading { text-align: center; font-weight: 900; color: var(--grey-text); text-transform: uppercase; letter-spacing: .26em; padding-left: .26em; }
.shadow { box-shadow: 0 6px 26px rgba(0, 0, 0, .3); }

/* Ronds photo */
.circle { border-radius: 50%; background: #ccc center / cover no-repeat; border: 4px solid #fff; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.circle.big { width: 220px; height: 220px; border-width: 10px; }

/* Accueil */
.choice { left: 670px; width: 760px; height: 220px; cursor: pointer; }
.choice .circle { position: absolute; left: 0; top: 0; }
.ctext { position: absolute; left: 252px; top: 52px; }
.ctext h3 { font-size: 50px; line-height: 56px; font-weight: 900; color: var(--blue-text); }
.ctext p { margin-top: 14px; font-size: 30px; line-height: 36px; }
#logo { left: 105px; top: 900px; width: 294px; height: 92px; object-fit: contain; }

/* Visite interactive */
#pois { left: 0; top: 0; }
.poi { position: absolute; width: 144px; height: 144px; }
.poi .circle { position: absolute; inset: 0; }
.poi .label { position: absolute; left: -98px; top: 161px; width: 340px; text-align: center; font-size: 25px; line-height: 30px; font-weight: 700; }

/* Detail */
#detail-photo { left: 192px; top: 200px; width: 828px; height: 553px; overflow: hidden; background: #ccc; touch-action: none; }
#detail-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#detail-photo img.sliding { transition: transform 200ms linear; }
#detail-content { left: 1051px; top: 216px; width: 530px; display: flex; flex-direction: column; overflow-wrap: break-word; }
#detail-title { margin-bottom: 30px; font-size: 42px; line-height: 52px; letter-spacing: -0.02em; font-weight: 900; }
#detail-content.has-sub #detail-title { margin-bottom: 33px; }
#detail-subtitle { margin-bottom: 15px; font-size: 32px; line-height: 36px; font-weight: 700; }
#detail-text { font-size: 26px; line-height: 34px; }
#detail-subtitle:empty { display: none; }
.arrow { top: 750.6px; width: 120px; height: 120px; opacity: 1; visibility: visible;
  transition: opacity 200ms linear, visibility 0s linear; }
.arrow svg { position: absolute; left: 35.5px; top: 31px; width: 48.9px; height: 58.1px; fill: var(--blue); }
#slide-prev { left: 157.5px; }
#slide-next { left: 934.3px; }
.arrow.hidden { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms linear, visibility 0s linear 200ms; }

/* Histoire */
#story-media { left: 492px; top: 180px; width: 936px; height: 625px; background: #000; overflow: hidden; }
#story-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#story-media img.story-motion { animation: story-ken-burns var(--story-motion-duration) linear infinite alternate paused; }
#story-media img.story-motion-reverse { animation-direction: alternate-reverse; }
#story-media.story-playing img.story-motion { animation-play-state: running; }
@keyframes story-ken-burns {
  from { transform: scale(var(--story-zoom-min)) translate(var(--story-pan-start), var(--story-pan-start)); }
  to { transform: scale(var(--story-zoom-max)) translate(var(--story-pan-end), var(--story-pan-end)); }
}
#story-media img.story-fade { transition: opacity 500ms linear; }
#story-play, #story-replay { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms linear, visibility 0s linear 200ms; }
#story-play.story-control-visible, #story-replay.story-control-visible { opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 200ms linear, visibility 0s linear; }
#story-play.story-control-visible:active, #story-replay.story-control-visible:active { opacity: 1; }
#story-play svg, #story-replay svg { position: absolute; fill: #fff; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .3)); }
#story-play svg { left: 430.9px; top: 241.9px; width: 117.1px; height: 139px; }
#story-replay svg { left: 50%; top: 50%; width: 180px; height: 180px; transform: translate(-50%, -50%); }
#story-error { position: absolute; z-index: 3; left: 0; right: 0; bottom: 30px; text-align: center; color: #fff; font-size: 24px; text-shadow: 0 2px 6px #000; }
#story-caption { left: 502px; top: 821px; width: 936px; text-align: center; font-size: 28px; line-height: 38px; }
#story-caption.caption-out { opacity: 0; }

/* Colonne de droite */
#side { position: absolute; inset: 0; pointer-events: none; }
#side > * { pointer-events: auto; }
#side-line { position: absolute; left: 1620px; top: 0; width: 1px; height: 1080px; background: var(--line); }
#side-bar { position: absolute; left: 1617.8px; top: 179.3px; width: 4px; height: 720.7px; background: #000; }
#menu-home { position: absolute; left: 1627.8px; top: 155.9px; width: 120px; height: 120px; }
#menu-home img { position: absolute; left: 16px; top: 16px; width: 88px; height: 88px; }
#side-back { position: absolute; left: 1625px; top: 482px; width: 150px; height: 128px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 200ms linear, visibility 0s linear 200ms; }
#side-back svg { position: absolute; left: 24.9px; top: 31.8px; width: 108.6px; height: 64.4px; fill: var(--blue); transform: rotate(180deg); }
#side-note { position: absolute; left: 0; top: 0; display: none; }
#side-note img { position: absolute; left: 1649px; top: 458px; width: 67px; height: 68px; }
#side-note p { position: absolute; left: 1651px; top: 537px; width: 260px; font-size: 18px; line-height: 21.5px; }
body[data-page="detail"] #side-back { opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity 200ms linear, visibility 0s linear; }
body[data-page="story"] #side-note { display: block; }

.lang { position: absolute; left: 1640px; width: 150px; height: 50px; opacity: .5; transition: opacity 200ms linear; }
.lang:active { opacity: .5; }
.lang.active { opacity: 1; }
.lang .flag { position: absolute; left: 9.4px; top: 6px; width: 37.6px; height: 37.6px; border-radius: 50%;
  background: center / cover no-repeat; box-shadow: 0 0 0 1px #000, inset 0 0 0 1px #000; }
.lang span { position: absolute; left: 59px; top: 9.4px; font-size: 27.6px; line-height: 31px; font-weight: 900; }

/* Panneaux de test (navigateur PC uniquement) */
#debug, #debug-timers { position: fixed; bottom: 0; z-index: 10; display: none;
  padding: 10px; background: #222; color: #fff; font: 15px/1.4 var(--font); }
#debug { left: 0; }
#debug button { padding: 5px 10px; font-size: 15px; background: #444; border-radius: 4px; }
.debug-led-form { display: flex; flex-wrap: wrap; align-items: end; gap: 8px; }
.debug-led-form label { display: flex; flex-direction: column; gap: 2px; font-size: 14px; }
.debug-led-form select { padding: 4px; font-size: 15px; }
.debug-led-form select:disabled { opacity: .5; }
#log { font-size: 12px; opacity: .6; }
#debug-timers { right: 0; pointer-events: none; white-space: pre-line; }

/* Fondu des seuls textes lors d'un changement de langue ou de diapo */
body.txt-out .txt { opacity: 0; transition: opacity 200ms linear; }

#cursor { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; display: none; }

/* Ecran de veille */
#page-saver { background: #000; }
.saver-img { left: 0; top: 0; width: 1920px; height: 1080px; object-fit: cover; opacity: 0; will-change: transform, opacity; }
.saver-img.show { opacity: 1; }
#saver-prompt { left: 0; top: 480px; width: 1920px; text-align: center; color: #fff; font-size: 72px; line-height: 80px;
  font-weight: 900; text-shadow: 0 2px 28px rgba(0, 0, 0, .7); opacity: 0; transition: opacity 600ms linear; white-space: pre-line; }
#saver-prompt.show { opacity: 1; }
#side { transition: opacity 200ms linear; }
body[data-page="saver"] #side { opacity: 0; pointer-events: none; }