.menu {
    text-align:center;
    height: 140px;
}

.disque {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform 1.6s ease, fill 1.6s ease;
  }

.disque.flipped {
  transform: rotateY(180deg);
  fill: white;
}
.bravo, .echec {
    font-size:18px;
    padding: 8px;
    display: inline-block;
    border-radius: 12px;
}
.bravo {
    background-color: rgba(0,200,0,0.3);
}
.echec {
    background-color: rgba(255,0,0,0.3);
}   
.btn {
  cursor: pointer;
  transition: transform 0.1s ease;
  transform-box: fill-box;
  transform-origin: center;
}

.btn:active {
  transform: translate(2px, 2px) scale(0.98);
  filter: brightness(0.8);
}
#bouton_demarrer {
    font-size:16px;
}
    
    
.timer {
  position: relative;
  display: inline-block;
  padding: 10px 20px;
  background: #FEE;
  border-radius: 14px;
  color:#800;
}

.timer::before {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  background:
    conic-gradient(
      rgba(200,0,0,0.3) 0deg,
      rgba(200,0,0,0.3) var(--angle),
      transparent var(--angle)
    );

  z-index: -1;
  animation: tour 60s linear infinite;
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes tour {
  from { --angle: 0deg; }
  to   { --angle: 360deg; }
}