@font-face {
  font-family: Aeonik;
  src: url("typo/aeonik-regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; overscroll-behavior: none; background: #505050; }
body { color: #fff; font: 400 14px/1.4 Aeonik, "Helvetica Neue", Arial, sans-serif; -webkit-tap-highlight-color: transparent; }
.lv { position: fixed; inset: 0; overflow: hidden; }
.lv-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.lv-toile { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; outline: none; user-select: none; -webkit-user-select: none; }
.lv-toile[hidden] { display: none; }


.lv-plat { position: absolute; display: flex; justify-content: center; }
.lv-plat[hidden] { display: none; }
.lv-plat img { display: block; height: 100%; background: #f4f3f1; cursor: pointer; }
.lv-plat img[hidden] { display: none; }
.lv-sans-js { position: absolute; top: 40%; left: 10%; right: 10%; text-align: center; }
.lv-sans-js a { color: inherit; }

.lv-logo { position: absolute; top: 14px; left: 16px; z-index: 3; display: block; }
.lv-logo img { display: block; width: auto; height: 30px; filter: brightness(0) invert(1); }

button { color: inherit; font: inherit; background: none; border: 0; cursor: pointer; }
button:disabled { cursor: default; }
button svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }


.lv-fleche, .lv-bout {
  position: absolute;
  z-index: 3;
  top: var(--lv-centre, 50%);
  opacity: .85;
  transition: opacity .2s;
}
.lv-fleche { width: 40px; height: 56px; padding: 8px 4px; margin-top: -28px; }
.lv-bout { width: 34px; height: 34px; padding: 8px; margin-top: 256px; opacity: .55; }
.lv-fleche--g { left: 8px; }
.lv-fleche--d { right: 8px; }
.lv-bout--g { left: 12px; }
.lv-bout--d { right: 12px; }
.lv-fleche:hover, .lv-bout:hover { opacity: 1; }
.lv-fleche:disabled, .lv-bout:disabled { visibility: hidden; }


.lv-barre {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  height: 42px;
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 32px;
}
.lv-barre__cote { display: flex; align-items: center; flex: none; gap: 4px; }
.lv-outil { flex: none; width: 34px; height: 34px; padding: 6px; opacity: .92; transition: opacity .2s; }
.lv-outil:hover { opacity: 1; }
.lv-outil:disabled { opacity: .35; }
.lv-num { min-width: 52px; margin-left: 10px; font-size: 14px; white-space: nowrap; text-align: center; font-variant-numeric: tabular-nums; }

.lv-telecharger {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 34px;
  margin-right: 10px;
  padding: 0 12px 0 9px;
  border: 1px solid rgba(255, 255, 255, .7);
  color: inherit;
  font-size: 13px;
  white-space: nowrap;
  text-decoration: none;
  transition: background .2s, color .2s;
}
.lv-telecharger[hidden] { display: none; }
.lv-telecharger:hover { background: #fff; color: #333; }
.lv-telecharger svg { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lv-telecharger small { margin-left: 3px; font-size: 11.5px; opacity: .75; }

.lv-curseur { position: relative; flex: 1; min-width: 0; display: flex; align-items: center; }
.lv-curseur input {
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
}
.lv-curseur input::-webkit-slider-runnable-track { height: 2px; background: rgba(255, 255, 255, .9); }
.lv-curseur input::-moz-range-track { height: 2px; background: rgba(255, 255, 255, .9); }
.lv-curseur input::-webkit-slider-thumb { width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: #fff; -webkit-appearance: none; appearance: none; }
.lv-curseur input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: #fff; }
.lv-apercu {
  position: absolute;
  bottom: 30px;
  width: 112px;
  margin-left: -56px;
  padding: 4px 4px 6px;
  text-align: center;
  font-size: 12px;
  background: #2e2e2e;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  pointer-events: none;
}
.lv-apercu[hidden] { display: none; }
.lv-apercu img { display: block; width: 100%; aspect-ratio: 339 / 480; margin-bottom: 5px; background: #444; }


.lv-panneau {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(320px, 100%);
  display: flex;
  flex-direction: column;
  background: rgba(40, 40, 40, .97);
  box-shadow: 8px 0 32px rgba(0, 0, 0, .3);
}
.lv-panneau[hidden] { display: none; }
.lv-panneau__tete { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 12px 12px 12px 20px; font-size: 14px; }
.lv-grille {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 2px;
  align-content: start;
  padding: 4px 20px 24px;
}

.lv-grille .lv-vignette:first-child { grid-column: 2; }
.lv-vignette { display: block; text-align: center; font-size: 12px; opacity: .9; }
.lv-vignette:hover { opacity: 1; }
.lv-vignette img { display: block; width: 100%; aspect-ratio: 339 / 480; margin-bottom: 4px; background: #555; }
.lv-vignette[aria-current="page"] { opacity: 1; }
.lv-vignette[aria-current="page"] img { outline: 2px solid #fff; outline-offset: -2px; }


.lv--zoom .lv-barre { bottom: 0; height: 58px; padding-bottom: env(safe-area-inset-bottom, 0px); background: rgba(50, 50, 50, .9); }
.lv--zoom .lv-fleche { border-radius: 4px; background: rgba(50, 50, 50, .7); opacity: 1; }
.lv--zoom .lv-logo, .lv--zoom .lv-bout { display: none; }


.lv--simple .lv-fleche, .lv--simple .lv-bout { display: none; }
.lv--simple .lv-barre { padding: 0 12px; gap: 12px; }


@media (pointer: coarse) {
  .lv-zoom { display: none; }
}

@media (max-width: 760px) {
  .lv-barre { padding: 0 12px; gap: 12px; }
  
  .lv-telecharger { margin-right: 2px; padding: 0 8px 0 5px; gap: 4px; }
  .lv-telecharger > span { font-size: 0; }
  .lv-telecharger > span::after { content: "PDF"; font-size: 13px; }
  .lv-telecharger small { display: none; }
  .lv-fleche { width: 30px; padding: 12px 2px; }
  .lv-fleche--g { left: 2px; }
  .lv-fleche--d { right: 2px; }
  .lv-bout { display: none; }
}
@media (max-height: 480px) {
  .lv-barre { bottom: 2px; height: 36px; }
  .lv-outil { width: 30px; height: 30px; padding: 5px; }
  .lv-bout { display: none; }
  .lv-logo img { height: 22px; }
}