@font-face {
  font-family: 'GothamBook';
  src: url('./assets-original/fonts/GothamBook.eot');
  src: local('GothamBook'),
       url('./assets-original/fonts/GothamBook.woff') format('woff'),
       url('./assets-original/fonts/GothamBook.ttf') format('truetype');
  font-display: swap;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  font-family: din-condensed, sans-serif;
  font-weight: 200;
  font-style: normal;
  font-size: 15px;
  color: #808080;
  text-transform: uppercase;
  overflow: hidden;
}

.gotham { font-family: 'GothamBook', sans-serif !important; }

/* Diaporama plein écran en fond */
#diaporama { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; }
#diaporama .wrapper { height: 100%; }
#diaporama .diaporama { position: relative; height: 100%; }
#diaporama ul.medias { position: relative; z-index: 1; overflow: hidden; width: 100%; height: 100%; list-style: none; margin: 0; padding: 0; }
#diaporama ul.medias li {
  position: absolute; inset: 0; z-index: 0; opacity: 0;
  transition: all 0.2s ease;
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
#diaporama ul.medias li.on { opacity: 1; z-index: 1; }

.nav-arrow { position: fixed; top: 50%; margin-top: -20px; z-index: 15; cursor: pointer; width: 24px; height: 24px; }
#precedent { left: 5%; }
#suivant { right: 5%; }

/* Boîte centrale */
/* Note : dans le CSS original, une règle @media all (qui s'applique à
   toutes les tailles d'écran) réduit la boîte à 220px de large en
   permanence — ce n'est donc pas une largeur "desktop" de 325px comme on
   pourrait le penser en lisant la première déclaration. */
.page {
  width: 220px;
  height: 370px;
  background-color: #000;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 50%;
  margin: -185px 0 0 -110px;
  text-align: center;
  padding: 30px;
}

.page h1 {
  font-family: 'GothamBook', sans-serif;
  font-weight: 400;
  letter-spacing: 2px;
  font-style: normal;
  margin: 0;
  font-size: 18px;
  color: #fff;
  padding: 0; /* la règle @media all d'origine annule le padding:0 40px initial */
}

.page > img { margin: 15px 0 25px; width: 17px; }

.page a { color: #fff; text-decoration: none; display: block; }
.page a:hover { color: #808080; }
.page a.spip_mail { text-transform: none; }

.page p {
  margin: 0;
  line-height: 17px;
  font-family: 'GothamBook', sans-serif;
  font-size: 12px;
}
.page p a:first-of-type { margin-top: 18px; }
.page p + p:before {
  content: '';
  display: block;
  background: url('./assets-original/images/croix-noire.png') no-repeat center;
  background-size: 17px;
  margin: 15px auto 25px;
  width: 17px;
  height: 17px;
}
.page p + p a { color: #808080; }