body {
    font-family: Arial;
    text-align: center;
    padding: 0px;
    display: flex;
    justify-content: center; /* Centrage horizontal */
    /*align-items: center;     /* Centrage vertical */
    margin: 0px;               /* Supprime les marges par défaut */
}

button {
  background: darkgreen;
  color: white;
  font-size: 16px;
}
#divMain {
  position: relative;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  width: 400px;
  height: 750px;
  border: 10px solid #003300;
}





#divPanelIntro {
  position: absolute;
  left: 500px;
  width: 400px;
  margin: 0px;
  padding: 10px;
  background: darkgray;
  color: white;
  transition: left 1s ease;
}
#divPanelConfig {
  position: absolute;
  left: 500px;
  width: 400px;
  margin: 0px;
  padding: 10px;
  background: darkblue;
  color: white;
  transition: left 1s ease;
}
/* ====================================================================== */
#divPanelBet {
  position: absolute;
  left: 500px;
  width: 400px;
  margin: 0px;
  padding: 0px;
  background: darkred;
  color: white;
  transition: left 1s ease;
}

.statTable {
  background-color: forestgreen;
}
.divBet {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  border-radius: 10px;
  padding: 2px;
  border: 2px solid white;
}
.divBetName {
  font-size: 20px;
}

.divBetChevColor {
  border-radius: 50%;
  width: 30px;
  height: 30px;
}

.selBetHorse {
  background-color: forestgreen;
  font-size: 18px;
  border-radius: 4px;
}
.selBetHorseMode {
  background-color: lightgray;
  font-size: 12px;
  border-radius: 4px;
}
.inputBetPari {
  background-color: forestgreen;
  font-size: 18px;
  border-radius: 4px;
  color: white;
}
.selBetPariMode {
  background-color: lightgray;
  font-size: 12px;
  border-radius: 4px;
}
.chev0 {
    color: #00EAFF;
    background-color: forestgreen;
}
.chev1 {
  color: #FFFF00;
  background-color: forestgreen;
}
.chev2 {
  color: #AA00FF;
  background-color: forestgreen;
}
.chev3 {
  color: #FF0000;
  background-color: forestgreen;
}
.chev4 {
  color: #FF7F00;
  background-color: forestgreen;
}
.chev5 {
  color: #BFFF00;
  background-color: forestgreen;
}
.chev6 {
  color: #E7E9B9;
  background-color: forestgreen;
}
.chev7 {
  color: #FF00AA;
  background-color: forestgreen;
}
.chev8 {
  color: #EDB9B9;
  background-color: forestgreen;
}
.chev9 {
  color: #0040FF;
  background-color: forestgreen;
}
/* ====================================================================== */
#divPanelRace {
  position: absolute;
  left: 500px;
  width: 400px;
  margin: 0px;
  padding: 0px;
  background: #003300;
  color: white;
  transition: left 1s ease;
}
#divRace {
  width: 400px;
  height: 400px;
  position: relative;
  overflow: hidden;
  background-color: forestgreen;
  /*background: radial-gradient(circle at 180px 220px,lightgreen,green, darkgreen);*/
  /*background: url(TierceGrass.jpg);*/
}
#divRace img {
  position: absolute;
}



.divBox {
  position: absolute;
  width: 33px;
  height: 40px;
  border: 1px solid darkgray;
}
.divBox::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Partie haute transparente */
  background: transparent;
  border: 1px solid darkgray;
}
.divBox::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Partie basse pleine */
  background: #002200;
  border: 1px solid darkgray;
}

.divPorteHaute {
  position: absolute;
  width: 20px;
  height: 40px;
  /*background-color: darkgreen;*/
  border: 1px solid darkgray;
  transition: transform 1s ease; /* Transition sur la propriété transform avec effet ease */
  transform-origin: left center; /* Changer le centre de rotation à gauche */
  transform: perspective(20px) rotateY(90deg); /* Initialement fermé */
}
.ouvrePorte {
  transform: perspective(20px) rotateY(0deg);
}
.divPorteHaute::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Partie haute transparente */
  background: transparent;
  border: 1px solid darkgray;
}
.divPorteHaute::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50%; /* Partie basse pleine */
  background: #002200;
  border: 1px solid darkgray;
}



.divRaceHead {
  position: absolute;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  left: -100px;
  top:-100px
}
.divRaceHorseName {
  position: absolute;
  border-radius: 50%;
  left: -100px;
  top:-100px
}
.divRacePlayer {
  font-size: 12px;
  position: absolute;
  text-align: right;
  width: 100px;
  border-radius: 50%;
  left: -100px;
  top:-100px
}

.divRacePos {
  background-color: forestgreen;
}

#divRaceFinish {
  position: absolute;
  left: 380px;
  top: 0px;
  padding: 0px;
  height: 400px;
  width: 10px;
  background-color: lightgreen;
  background-image: linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%), linear-gradient(45deg, #000 25%, transparent 25%, transparent 75%, #000 75%);
  background-size: 10px 10px;
  background-position: 0 0, 5px 5px;
}
/* ============================================================== */



/***********************************************************
                         SNACKBAR
************************************************************/

#snackbar {
  visibility: hidden;
  min-width: 250px;
  margin-left: -170px;
  background-color: #333;
  color: #fff;
  text-align: center;
  border-radius: 2px;
  padding: 16px;
  position: fixed;
  z-index: 1;
  left: 50%;
  bottom: 30px;
  font-size: 17px;
}

#snackbar.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {bottom: 0; opacity: 0;} 
  to {bottom: 30px; opacity: 1;}
}

@keyframes fadein {
  from {bottom: 0; opacity: 0;}
  to {bottom: 30px; opacity: 1;}
}

@-webkit-keyframes fadeout {
  from {bottom: 30px; opacity: 1;} 
  to {bottom: 0; opacity: 0;}
}

@keyframes fadeout {
  from {bottom: 30px; opacity: 1;}
  to {bottom: 0; opacity: 0;}
}

/***********************************************************
      _ _     _                 
 _ __(_) |__ | |__   ___  _ __  
| '__| | '_ \| '_ \ / _ \| '_ \ 
| |  | | |_) | |_) | (_) | | | |
|_|  |_|_.__/|_.__/ \___/|_| |_|
************************************************************/

/* HTML: <div class="ribbon">Your text content</div> */
/* HTML: <div class="scalloped-box"></div> */
.ribbonMenu {
  --r: 10px; /* radius of circles */
  width: 300px;
  height: 300px;
  left: 50%;
  transform: translateX(-50%);
  top: -600px; /* 30px; */
  position: absolute;
  transition: top .5s ease;
  aspect-ratio: 1;
  padding: calc(1.5*var(--r));
  background: darkred;
  mask: 
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;
}


/* HTML: <div class="ribbon">Your text content</div> */
.ribbon {
    font-size: 14px;
    text-align: center;
    color: #fff;
    width:380px;
    left: 50%;
    transform: translateX(-50%);
    top: -400px; /* 30px; */
    position: absolute;
    transition: top 2s ease;
  }
  .ribbon {
    --s: 1.8em; /* the ribbon size */
    --d: .8em;  /* the depth */
    --c: .8em;  /* the cutout part */
    
    padding: 0 calc(var(--s) + .5em) var(--d);
    line-height: 1.8;
    background:
      conic-gradient(at left  var(--s) bottom var(--d),
       #0000 25%,#0008 0 37.5%,#0004 0) 0   /50% 100% no-repeat,
      conic-gradient(at right var(--s) bottom var(--d),
       #0004 62.5%,#0008 0 75%,#0000 0) 100%/50% 100% no-repeat;
    clip-path: polygon(0 var(--d), var(--s) var(--d),var(--s) 0,calc(100% - var(--s)) 0,calc(100% - var(--s)) var(--d),100% var(--d),calc(100% - var(--c)) calc(50% + var(--d)/2),100% 100%,calc(100% - var(--s) - var(--d)) 100%,calc(100% - var(--s) - var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) calc(100% - var(--d)),calc(var(--s) + var(--d)) 100%,0 100%,var(--c) calc(50% + var(--d)/2));
    background-color: darkred; /* the main color */
    width:220px;
  }