/* ============================================================
                            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;
}

/* ============================================================
                          BODY
============================================================ */

h1 {
  font-family: 'FuturalHeavy';
  color: #ffffff;
  font-size: clamp(42px, 10vh, 52px);
}

h2 {
  font-family: 'FuturalRegular'; 
  color: #ffffff;
  font-size: clamp(18px, 3vh, 36px);
}

h3 {
  font-family: 'FuturalThin'; 
  color: #ffffff;
  font-size: clamp(12px, 2vh, 18px);
  line-height: 160%;
}

p {
  font-family: 'Baskervvol';
  color: #ffffff;
  font-size: clamp(12px, 2vh, 18px);
}

/* ============================================================
                            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);
}

/* ============================================================
                            HEADER
============================================================ */

header {
  display: flex;
  justify-content: center;
  padding: 80px 20px 50px;
}

header img {
  width: 45%;
  max-width: 180px;
  height: auto;
}

.lien-formation {
  font-family: 'FuturalHeavy';
  color: #ffffff;
  font-size: clamp(16px, 1.8vw, 22px);
  text-decoration: none;
}

/* ============================================================
                            COLONNES
============================================================ */

.colonne1 {
  padding: 8vh 20px;
  width: 50vw;
}

.colonne1 h1 {
  margin-bottom: 18px;
}

.colonne1 p {
  text-align: justify;
  margin-bottom: 20px;
}

.colonne1 .liens {
  font-family: 'FuturalHeavy';
  font-size: clamp(11px, 2.6vw, 13px);
  line-height: 1.7;
}

.colonne1 .liens a {
  text-decoration: underline;
}

.colonne1 img {
  display: inline-block;
  width: 8vw;
  height: auto;
  margin: 1vw 1vw 2vw 0;
  vertical-align: middle;
}

.colonne1 .logos {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.colonne1 .logos img {
  height: 22px;
  width: auto;
}

.colonne2 {
  width: 50vw;
  margin-left: 60%;
  padding: 60px 40px 40px 0;
}

.colonne2 h2 {
  margin-bottom: 20px;
}

/* ============================================================
                            CREDITS
============================================================ */

.credits {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding: 20px;
  margin-bottom: 2vh;
}

details.credits summary {
  cursor: pointer;
  list-style: none;
  font-family: 'FuturalRegular'; 
  color: #ffffff;
  font-size: clamp(14px, 2vh, 24px);
}

details.credits summary::-webkit-details-marker {
  display: none; 
}

.credits h3 {
  font-family: 'FuturalRegular'; 
  color: #ffffff;
  font-size: clamp(12px, 1.6vh, 20px);
  display: inline;
}

.credits h4 {
  font-family: 'BaskervvolItalic'; 
  color: #ffffff;
  font-size: clamp(10px, 1.2vh, 16px);
  line-height: 160%;
  display: inline;
}

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

@media (max-width: 768px) {

  h1 {
    font-family: 'FuturalHeavy';
    color: #ffffff;
    font-size: clamp(32px, 8vh, 40px);
  }

  .colonne1 {
    width: 92%;
    margin: 0 auto;
    padding: 6vh 0;
  }

  .colonne1 img {
    width: 20vw;
  }

  .colonne2 {
    width: 92%;
    margin: 0 auto;
    padding: 0 0 6vh 0;
  }

  .credits {
    flex-wrap: wrap;
    gap: 1rem;
  }

}