/* ============================================================
                            RESET
============================================================ */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html, body {
  overflow-y: scroll;
  overflow-x: hidden;
  background-color: black;
  width: 100%;
}

a {
  color: #ffffff;
  text-decoration: none;
}

/* ============================================================
                            FONTS
============================================================ */

@font-face {
  font-family: 'FuturalHeavy';
  src: url('fonts/bbb-herthey-futural-95.woff') format('woff');
  font-weight: bold;
  font-style: normal;
}

@font-face {
  font-family: 'FuturalRegular';
  src: url('fonts/bbb-herthey-futural-40.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'FuturalThin';
  src: url('fonts/bbb-herthey-futural-15.woff') format('woff');
  font-weight: thin;
  font-style: normal;
}

@font-face {
  font-family: 'Baskervvol';
  src: url('fonts/bbbbaskervvol-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'BaskervvolItalic';
  src: url('fonts/bbbbaskervvol-italic.woff') format('woff');
  font-weight: normal;
  font-style: italic;
}

/* ============================================================
                            NAV BAR
============================================================ */

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px;
  border-bottom: 1px solid #ffffff;
}

.menu a {
  font-family: 'FuturalHeavy';
  color: #ffffff;
  font-size: clamp(14px, 2.8vw, 18px);
}

/* ============================================================
                       LISTE EXCEL
============================================================ */

h2 {
  padding: 2vh;
  margin-top: 4vh;
  font-family: 'FuturalHeavy';
  color: #ffffff;
  font-size: clamp(42px, 10vh, 52px);
  text-align: center;
}

p {
  font-family: 'Baskervvol';
  color: #ffffff;
  font-size: clamp(12px, 2vh, 18px);
  text-align: center;
  padding-bottom: 4vh;
}

.liste-excel ul {
  list-style: none;
  width: 60vw;
  margin: 0 auto;
  margin-top: 4vh;
  margin-bottom: 4vh;
}

.liste-excel li {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.liste-excel .nom {
  font-family: 'FuturalHeavy';
  color: #ffffff;
  font-size: clamp(11px, 2.4vw, 14px);
  padding: 18px 12px 18px 0;
}

.liste-excel .annee {
  font-family: 'FuturalRegular';
  color: #ffffff;
  font-size: clamp(11px, 2.4vw, 14px);
  padding: 18px 12px;
  text-align: center;
}

.liste-excel .contact {
  font-family: 'FuturalRegular';
  color: #ffffff;
  font-size: clamp(11px, 2.4vw, 14px);
  padding: 18px 0 18px 12px;
  text-align: right;
}

.liste-excel .en-tete .nom,
.liste-excel .en-tete .annee,
.liste-excel .en-tete .contact {
  color: #000000;
  font-size: clamp(16px, 3.4vw, 24px);
  -webkit-text-stroke: 4px #ffffff;
  paint-order: stroke fill;
}

/* ============================================================
                       RESPONSIVE
============================================================ */

@media (max-width: 768px) {

  .liste-excel ul {
    width: 92%;
  }

  .liste-excel .nom,
  .liste-excel .annee,
  .liste-excel .contact {
    font-size: clamp(11px, 3.5vw, 14px);
  }

  .liste-excel .en-tete .nom,
  .liste-excel .en-tete .annee,
  .liste-excel .en-tete .contact {
    font-size: clamp(14px, 4.5vw, 20px);
  }

}