.carousel-item{position:absolute;top:0;left:0}.Carousel{width:100%}.carousel-initialized{overflow:hidden;position:relative}.carousel-arrow.carousel-hidden{display:none}.carousel-track{width:100%;display:flex;position:relative}.carousel-dots{display:flex;align-items:center;flex-direction:row;background-color:rgba(0,0,0,.3);border-radius:15px;padding:5px 0;position:absolute;top:440px;left:65%;z-index:1}.carousel-dots-item{background-color:rgba(255,255,255,.5);border-radius:5px;cursor:pointer;width:10px;height:10px;margin:0 7.5px;transition:all .5s linear}.carousel-dots-item-active{background-color:#fff;width:20px}.carousel-container{position:absolute;width:100%}.carousel-row-item{width:100%;height:460px;object-fit:cover}.carousel-img{width:100%;height:100%}
:root {
  --wheel-font: 'Lato', 'Quicksand', sans-serif;
  --wheel-size: 400px;
  --wheel-slice-spacing: 50px;
  --wheel-border-size: 0px;
  --wheel-color: #fcd209;/* #06489e; */
  --neutral-color: white;
  --PI: 3.14159265358979;
  --nb-item: 0;
  --item-nb: 0;
  --selected-item: 0;
  --nb-turn: 8;
  --spinning-duration: 4s;
  --reset-duration: 0.25s;
  --wheel-container-border-color: #c91820;
  --wheel-odd-color: #f2b618;
  --wheel-even-color: #fcd209;
}
/*
#c91820  red
#f2b618  gold
#fcd209  yellow
*/
/* Conteneur de la roue = cercle rose extérieur */
.wheel-container {
  display: block;
  position: relative;
  box-sizing: content-box;
  /* width: calc(var(--wheel-size) + 2 * var(--wheel-border-size));
  height: calc(var(--wheel-size) + 2 * var(--wheel-border-size)); */
  width: 364px;
  height: 364px;
  padding: 3px;
  margin: auto;
  background-color: var(--neutral-color);
  border: solid var(--wheel-container-border-color) 20px; /* var(--wheel-color) 10px; */
  border-radius: 50%;
  user-select: none;
  transform: rotate(-90deg);
  background: #c7c7c7;
}

/* Triangle de sélection = 1 rose +  1 blanc */
.wheel-container::before,
.wheel-container::after {
  /* content: ''; */
  display: block;
  position: absolute;
  height: 0;
  width: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  border: solid transparent 20px;
  border-left-width: 0;
  /* left: 48%; */
}

/* .wheel-container::before {
  right: 0px;
  border-right-color: var(--wheel-container-border-color);
} */

.wheel-container::after {
  right: -5px;
  border-right-color: var(--neutral-color);
}

/* Roue */
.wheel {
  display: block;
  position: relative;
  box-sizing: content-box;
  margin: auto;
  /* width: var(--wheel-size);
  height: var(--wheel-size); */
  overflow: hidden;
  border-radius: 50%;
  /* border: solid var(--wheel-color) var(--wheel-border-size);
  background-color: var(--wheel-color); */
  transition: transform var(--reset-duration);
  transform: rotate(0deg);
  /* cursor: pointer; */
  width: 360px;
    height: 360px;
    top: 2px;
    left: 0px;
}

.wheel.spinning {
  -webkit-transition: -webkit-transform var(--spinning-duration);
  -moz-transition: -moz-transform var(--spinning-duration);
  -o-transition: -o-transform var(--spinning-duration);
  -ms-transition: -ms-transform var(--spinning-duration); 
  transition: transform var(--spinning-duration);
  -webkit-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  -moz-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  -o-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  -ms-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
}

/* Centre de la roue = rond blanc au centre */
/* .wheel::after {
  display: block;
  position: absolute;
  content: 'Spin';
  background-color: var(--neutral-color);
  width: 60px;
  height: 47px;
  z-index: 2;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
    border: 7px solid rgb(19, 14, 29);
    padding-top: 16px;
    padding-left:4px;
    font-weight: 600;
    font-size: 25px;
    font-style: italic;
} */

/* .wheel::after {
  display: block;
  position: absolute;
  content: 'Spin';
  background-color: var(--neutral-color);
  width: 60px;
  height: 47px;
  z-index: 2;
  top: 40%;
  left: 40%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 7px solid var(--wheel-container-border-color);
  padding-top: 16px;
  padding-left: 4px;
  font-weight: 600;
  font-size: 25px;
  font-style: italic;
  transform: rotate(90deg);
  color: var(--wheel-container-border-color);
} */


.wheel1 {
  display: block;
  position: relative;
  box-sizing: content-box;
  margin: auto;
  /* width: var(--wheel-size);
  height: var(--wheel-size); */
  overflow: hidden;
  border-radius: 50%;
  /* border: solid var(--wheel-color) var(--wheel-border-size);
  background-color: var(--wheel-color); */
  transition: transform var(--reset-duration);
  transform: rotate(0deg);
  /* cursor: pointer; */
  width: 398px;
    height: 398px;
    top: -378px;
    left: -18px;
}

.wheel1.spinning {
  -webkit-transition: -webkit-transform var(--spinning-duration);
  -moz-transition: -moz-transform var(--spinning-duration);
  -o-transition: -o-transform var(--spinning-duration);
  -ms-transition: -ms-transform var(--spinning-duration); 
  transition: transform var(--spinning-duration);
  -webkit-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  -moz-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  -o-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  -ms-transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
  transform: rotate(calc(var(--nb-turn) * 360deg + (-360deg * var(--selected-item) / var(--nb-item, 1))));
}




/* Element sur la roue */
.wheel-item {
  display: block;
  position: absolute;
  box-sizing: border-box;

  /* position de l'item */
  top: 50%;
  left: 50%;
  width: 50%;
  transform-origin: center left;
  transform: translateY(-50%) rotate(calc(var(--item-nb) * (360deg / var(--nb-item, 1))));

  /* texte */
  color: #000;/* var(--neutral-color); */
  text-align: right;
  padding: 0 25px 0 50px;
  font-family: var(--wheel-font);
}

/* Background de l'élément = triangle rose plus clair */
.wheel-item:before {
  content: ' ';
  display: block;
  position: absolute;
  box-sizing: border-box;
  z-index: -1;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-left: 0px;
  opacity: 1;

  /* 
    Largeur du triangle
    Je ne sais pas pourquoi j'ai besoin d'ajouter 
      " + var(--wheel-size) / 2 " dans slice-max-width  ==> donne 2.PI.R + R
    mais globalement ca marche a peu près bien 
    TODO: A étudier 
  */
  --slice-max-width: calc(var(--PI) * var(--wheel-size) + var(--wheel-size) / 1);
  --slice-width: calc((var(--slice-max-width) / var(--nb-item)) - var(--wheel-slice-spacing));
  border: solid transparent calc(var(--slice-width) / 2);
  border-left: solid transparent 0;
  /* profondeur du triangle = du centre de la roue à la bordure = 300px / 2 */
  border-right: solid var(--neutral-color) calc(var(--wheel-size) / 2);
}

.wheel-item.wheel-item-odd:before {
  border-right: solid var(--wheel-odd-color) calc(var(--wheel-size) / 2);
}
.wheel-item.wheel-item-even:before {
  border-right: solid var(--wheel-even-color) calc(var(--wheel-size) / 2);
}


/* Element sur la roue */
.wheel-item-op {
  display: block;
  position: absolute;
  box-sizing: border-box;

  /* position de l'item */
  top: 50%;
  left: 50%;
  width: 50%;
  transform-origin: center left;
  transform: translateY(-50%) rotate(calc(var(--item-nb) * (360deg / var(--nb-item, 1))));

  /* texte */
  color: #000;/* var(--neutral-color); */
  text-align: right;
  padding: 0 25px 0 50px;
  font-family: var(--wheel-font);
  background: rgb(204 204 204 / 0%);
}

/* Background de l'élément = triangle rose plus clair */
.wheel-item-op:before {
  content: ' ';
  display: block;
  position: absolute;
  box-sizing: border-box;
  z-index: -1;
  width: 0;
  height: 0;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding-left: 0px;
  opacity: 1;

}




/* CSS for icon Adjustment */
.offericon{
  /* position: relative;
  left: -13px;
  top: 36px;
  transform: rotate(-90deg); */
  position: relative;
    left: -9px;
    top: -21px;
    transform: rotate(91deg);
    width: 78px;
}
.offericonImg{
  max-width:40px;
}

.offertxt{
  /* transform: rotate(-92deg);
  position: absolute;
  top: -10px;
  left: 95px;
  text-align: center;
  padding-top: 13px; */
  transform: rotate(90deg);
    position: absolute;
    top: -8px;
    left: 107px;
    text-align: center;
    padding-top: 15px;
    width: 95px;
    font-size: 13px;
}

.spinarrow{
  position:absolute;
  top: 133px;
  left: 152px;
  z-index:9999;
  transform: rotate(90deg);
  cursor: pointer;
  width: 78px;
  height: 104px;
}

.spintext{
  padding-top:52px;
  text-align:center;
  font-weight: 600;
  font-size: 18px;
  color:#c91820;
}
.wheelstandbase{
  position:relative;
  top:-50px;
  left:5px;
  z-index:-1;
}

@media only screen and (max-width: 600px) {
  :root {
    --wheel-font: 'Lato', 'Quicksand', sans-serif;
    --wheel-size: 250px;
    --wheel-slice-spacing: 30px;
    --wheel-border-size: 0px;
    --wheel-color: #fcd209;/* #06489e; */
    --neutral-color: white;
    --PI: 3.14159265358979;
    --nb-item: 0;
    --item-nb: 0;
    --selected-item: 0;
    --nb-turn: 8;
    --spinning-duration: 4s;
    --reset-duration: 0.25s;
    --wheel-container-border-color: #c91820;
    --wheel-odd-color: #f2b618;
    --wheel-even-color: #fcd209;
  }
  .wheel-container {
    
    width: 228px;
    height: 228px;
    padding: 3px;    
  }
  .wheel {    
    width: 225px;
      height: 225px;
      top: 2px;
      left: 0px;
  }
  .wheel1 {    
    width: 262px;
      height: 262px;
      top: -242px;
      left: -16px;
  }
  .wheelstandbase{    
    top:-30px;    
  }
  .spinarrow{    
    top: 78px;
    left: 94px;    
    width: 58px;
    height: 78px;
  }
  .spintext{
    padding-top:40px;    
    font-size: 12px;    
  }
  .offericon{    
      left: -36px;
      top: -28px;      
      width: 78px;
  }
  .offericonImg{
    max-width:25px;
  }
  .offertxt{    
      top: -12px;
      left: 70px;      
      padding-top: 10px;
      width: unset;
      font-size: 10px;
  }
  .nomob{
    display:none;
  }
}
:root {
  --app-font: 'Quicksand', 'Lato', sans-serif;
  --neutral-color: white;
}

.App {
  font-family: var(--app-font);
  text-align: center;
  background: var(--neutral-color);
  user-select: none;
}

.carousel-container{position:absolute;width:100%;top:59px;}.carousel-row-item{width:100%;height:460px;object-fit:cover}.carousel-img{width:100%;height:100%}

/*# sourceMappingURL=53.fbe32d9c7f4dad7e9deb.css.map*/