/* =========================
   1) TEXTE GÉNÉRAL
   ========================= */

html,
body {
  height: auto !important;
  overflow-y: auto !important;
}

body {
  font-size: 1.3rem;
  line-height: 1.9;
  padding-bottom: 60vh;
}


/* =========================
   2) TITRES
   ========================= */

h2 {
  margin: 10px auto 0;
  font-size: clamp(1.5rem, 3vw, 2rem);
  line-height: 1.9;
  color: #fff;
}


/* =========================
   3) SCOREBOARD
   ========================= */

#scoreboard {
  display: inline-block;
  margin: 22px auto 16px;
  padding: 12px 22px;
  border-radius: 14px;

  background: rgba(0, 0, 0, 0.55);
  color: #fff;

  font-size: clamp(1.9rem, 4.5vw, 3rem);
  font-weight: 800;
}


/* =========================
   4) CONTRÔLES
   ========================= */

#controls {
  margin: 18px auto 0;
  color: #fff;
  font-size: 1.4rem;
}

label {
  margin: 0 12px;
  font-size: 1.3rem;
}

#soundToggle {
  margin-top: 12px;
  padding: 12px 20px;
  border: 1px solid #666;
  border-radius: 12px;

  background: #444;
  color: #fff;
  cursor: pointer;

  font-size: 1.3rem;
}


/* =========================
   5) FOOTER VISIBILITÉ
   ========================= */

footer {
  position: relative !important;
  z-index: 2;
  margin-top: 30px;
  background: transparent !important;
}

body::after {
  content: none !important;
}


/* =========================
   6) BLOCS IMAGES SPÉCIAUX
   ========================= */

.ima-container,
.ima-container2,
.ima-container3 {
  position: relative;
  display: block;
  clear: both;

  width: 300px;
  height: 400px;
  margin: 0 auto;

  background: transparent;
}

.ima-container {
  margin-bottom: 200px;
}

.ima-container2 {
  margin-top: -50px;
}

.ima-container3 {
  margin-top: -10px;
  margin-bottom: 200px;
}

.ima-container::before,
.ima-container2::before,
.ima-container3::before {
  content: "";
  position: absolute;
  inset: 0;

  background-size: contain;
  background-repeat: no-repeat;
  background-position: center 40px;
}

.ima-container::before,
.ima-container2::before {
  background-image: url("../source/img/logo-base-2028.png");
}

.ima-container3::before {
  background-image: url("logo-base-2.png");
  background-color: black;
}


/* =========================
   7) ZONE DE FIN
   ========================= */

#fin {
  position: static !important;
  width: 100%;
  margin: 80px 0;
  padding: 24px 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}

#fin .centered,
#fin .centered-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

#fin img {
  display: block;
  width: 350px;
  max-width: 90vw;
  height: auto;
  cursor: pointer;
}


/* =========================
   8) MENU DROPDOWN
   ========================= */

.menu-dropdown li a,
.menu-dropdown li a:link,
.menu-dropdown li a:visited,
.menu-dropdown .menu-lien {
  font-size: 2.5rem !important;
  line-height: 1.2;
}