#toggleToolbar {
  font-size: 50%;
  position: fixed;
  top: -3px; /* cachée */
  left: 50.55%;
  transform: translateX(-50%);
  width: 30px;
  height: 18px;
   transition: top 1s ease;
  background: none;      /* supprime le fond */
  border: none;          /* supprime le contour */
  box-shadow: none;      /* supprime les ombres */
  outline: none;         /* supprime le focus visuel */
padding: 0px 0px;
max-width: 80vw;
}

#toggleToolbar.active {
  top: 27px; /* visible */
}

#toggleToolbar button {
  background: none;
  border: none;
  color: white;
  font-size: 22px;
  cursor: pointer;

}






#toolbar {
  position: fixed;
  top: -80px; /* cachée */
  left: 50%;
  transform: translateX(-50%);
  width: 200px;
  height: 30px;
      text-align: center;
  background: #111;
  border-radius:  0 0 16px 16px;

  display: flex;
  justify-content: space-around;
    align-items: center;
max-width: 37vw;
  transition: top 1s ease ,background 3s ease, max-width 1.5s ease;
}

#toolbar.light {


  background: #c7c7c7;

}

#toolbar.active {
  top: 0; /* visible */
}







.status {
  color: transparent; /* cache le texte réel */
  position: relative;
}

.status::after {
 content: "🔽";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: 180%;
  color: aliceblue;
}
.status.active::after {
  content: "🔼";

   
}