/* ============================================================
   1. LAYOUT & TYPOGRAPHIE (Base de la page)
   ============================================================ */
main {
  display: block;
  margin-left: auto;
  margin-right: auto;
  
  margin-top: max(30px, 4vw);
  line-height: 1.5;
  max-width: 95ch;
  font-size: clamp(16px, 1.2vw, 1.2vw);
}

p { 
  margin-bottom: max(10px, 1vw);
}

.sign {
  margin-top: max(15px, 2.5vw);
}

/* Traduction et Langues */
.hidden-lang {
  display: none !important;
}

#traduction {
  font-size: inherit; 
  user-select: none;
  border: none;
  background-color: transparent;
  cursor: pointer;
  color: var(--text-muted);
  font-weight: 800;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  word-spacing: -0.15em;
}

@media (hover: hover) {
  #traduction:hover {
    color: var(--text-secondary);
  }
}

/* ============================================================
   2. COMPOSANTS (Lecteur Audio & Badge Carbone)
   ============================================================ */
/* Lecteur Audio */
#player {
  width: fit-content;
  margin-top: 2%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  flex-direction: column;
}

#myAudio {
  opacity: 0.7;
  height: clamp(35px, 2.7vw, 2.7vw);
  width: clamp(266px, 25vw, 25vw);
}

#impro {
  margin: 0; 
  transform: translateX(-30px);
  font-size: clamp(12px, 0.9vw, 0.9vw);
  user-select: none; 
}

/* Badge WebCarbon */
#wcb {
  position: static;
  display: flex;
  transform: scale(max(0.6, calc(100vw / 1828.57px))) !important;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  flex-direction: row;
  align-items: center;
  position: absolute;
  bottom: 0;
  left: 0; 
  transform-origin: bottom left; 
  margin: 0;
  padding: 0;
  user-select: none;
}

#wcb.wcb-d #wcb_a { color: var(--text-muted)!important; background: #a36d6d00!important; }
#wcb #wcb_g { color: black!important; background: #7d7d7d!important; }
#wcb #wcb_a, #wcb #wcb_g { border: 0!important; }
#wcb_2 { display: none!important; }


/* ============================================================
   4. RESPONSIVE : DESIGN VERTICAL (Mobile et Tablette)
   ============================================================ */
@media only screen and (max-width: 767px),
only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait),
only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (min-resolution: 1.90001dppx),
only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) and (max-resolution: 1.9dppx) and (pointer: fine) {
  main {
    margin-left: 5%;
    margin-right: 5%;
  }

  #wcb {
    transform: scale(0.6);
    position: static;
    display: flex;
    justify-content: flex-start;
    margin-top: 15px;
  }
}