/*Check box Desactiver */
.mlab-desactive {
  margin-left: 0%;
  display: flex;
  align-items: center;
}
.mlab-desactive::after {
  content: "Désactiver l'animation";
  color: #612DFA;          
  margin-left: 10px;
}


.mlab-desactive #desactivation-anim {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}


.mlab-desactive #desactivation-anim + label {
  position: relative;
  box-sizing: border-box;
  display: inline-block;
  width: 3rem;                 
  height: 1.5rem;              
  border-radius: 1.5rem;
  padding: 2px;                
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--base);
  transition: background-color .2s ease, box-shadow .1s ease;
  cursor: pointer;
}


.mlab-desactive #desactivation-anim + label::before {
  content: "";
  position: absolute;
  left: 2px; top: 2px;
  width: calc(1.5rem - 4px);
  height: calc(1.5rem - 4px);
  border-radius: 50%;
  background-color: var(--wp--preset--color--base);
  transition: transform .2s ease;
}

.mlab-desactive #desactivation-anim:checked + label {
  background-color: var(--wp--preset--color--accent-3);
  color: var(--wp--preset--color--accent-3);
}
.mlab-desactive #desactivation-anim:checked + label::before {
  transform: translateX(1.5rem);
}

/* Focus */
.mlab-desactive #desactivation-anim:focus-visible + label {
    outline: 2px solid var(--wp--preset--color--contrast);
    outline-offset: 4px;
}

/* Compat Windows High Contrast : fallback outline */
@media (forced-colors: active){
  .mlab-desactive #desactivation-anim:focus-visible + label{
    outline: 2px solid CanvasText;
    outline-offset: 3px;
    box-shadow: none;
  }
}

/* Respecte la réduction d’animations */
@media (prefers-reduced-motion: reduce){
  .mlab-desactive #desactivation-anim + label::before {
    transition: none;
  }
}


/* Animation des cercles */
.mlab-rond-wrapper
 {
    height: 145.76vw;
    position: relative;
    width: 91.1vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    left:20%;
}

@media only screen and (min-width: 767px) {
    .mlab-rond-wrapper {
        height:36.846vw;
        width: 90vw;
        left: 0%;
    }
    #rond1.rond-debut,
    #rond2.rond-debut,
    #rond3.rond-debut {
    top: 5vw!important;
    left:unset;
}
}

.mlab-rond-wrapper > li:focus-visible {
    outline: 3px solid var(--wp--preset--color--contrast);
    outline-offset:2px;
    outline-style: inset;
}

.rond {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    border-radius: 50%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-justify-content: center;
    justify-content: center;
    overflow: hidden;
    padding: 4.005vw;
    position: absolute;
    -webkit-transition: width 1s,height 1s,top 1s,left 1s;
    transition: width 1s,height 1s,top 1s,left 1s
}

.rond .number {
    font-size: 8vw;
    text-align: center;
    -webkit-transition: all 1s;
    transition: all 1s;
    color:#612DFA;
    font-family: var(--wp--preset--font-family--noka);
    font-weight:600;
}

@media only screen and (min-width: 767px) {
    .rond .number {
        font-size:3vw
    }
}

.rond .content {
    -ms-flex-item-align: center;
    -webkit-align-self: center;
    align-self: center;
    font-size:4.5vw;
    text-align: center;
    -webkit-transition: all 1s;
    transition: all 1s;
    width: 28.836vw;
    font-family: var(--wp--preset--font-family--noka);
    font-weight:500;
    color:#612DFA;
}

@media only screen and (min-width: 767px) {
    .rond .content {
        width:200px;
         font-size:1.5vw;
    }
}

@media only screen and (min-width: 1440px) {
    .rond .content {
        width:300px
    }
}

@media only screen and (min-width: 1920px) {
    .rond .content {
        width:300px
    }
}

.rond.large .number {
    font-size: 18vw;
    -webkit-transition: all 1s;
    transition: all 1s;
    font-family: var(--wp--preset--font-family--noka);
    font-weight:600;
}
.rond.large .content {
    font-family: var(--wp--preset--font-family--noka);
    font-weight:600;
}

@media only screen and (min-width: 767px) {
    .rond.large .number {
        font-size:5vw
    }
}

.rond.large .content {
    display: inline-block
}
#rond1, #rond2, #rond3 {
    background-color: var(--wp--preset--color--base);
    border: 2px solid #612DFA;
}
#rond1.rond-debut{
    top: 10vw!important;
    width:40vw!important;
    height:40vw!important;
    left: 7vw!important;
}
#rond2.rond-debut{
   top:59.5vw !important;
    width:40vw!important;
    height:40vw!important;
    left: 7vw!important;
}
#rond3.rond-debut {
    top: 109vw!important;
    width:40vw!important;
    height:40vw!important;
    left: 7vw!important;
}
@media (min-width:767px){
    #rond1.rond-debut{
        top: 15vw!important;
        width: 12vw!important;
        height: 12vw!important;
        left: 7vw !important;
    }
    #rond2.rond-debut{
        top: 5vw !important;
        width: 22.1vw !important;
        height: 22.1vw !important;
        left: 26.84vw !important;
    }
    #rond3.rond-debut {
       top: 12vw !important;
        width: 19vw !important;
        height: 19vw !important;
        left: 56.7vw !important;
    }
}
#rond1.small {
    height: 35vw;
    left: 25vw;
    top: 7vw;
    width: 35vw
}

#rond1.medium {
    height: 50vw;
    left: -5vw;
    top: 7vw;
    width: 50vw
}

#rond1.large {
    height: 65vw;
    left: -7vw;
    top: 7vw;
    width: 65vw
}

@media only screen and (min-width: 767px) {
    #rond1.small {
        height:15vw;
        left: 0;
        top: 17.61239vw;
        width: 15vw
    }

    #rond1.medium {
        height: 20vw;
        left: 0;
        top: 11.20118vw;
        width: 20vw
    }

    #rond1.large {
        height: 25vw;
        left: 0;
        top: 0;
        width: 25vw
    }
}



#rond2.small {
    height: 35vw;
    left: 25vw;
    top: 61.5vw;
    width: 35vw
}

#rond2.medium {
    height: 50vw;
    left: -15vw;
    top: 80vw;
    width: 50vw
}

#rond2.large {
    height: 65vw;
    left: -14vw;
    top: 46.5vw;
    width: 65vw
}

@media only screen and (min-width: 767px) {
    #rond2.small {
        height:15vw;
        left: 27.2vw;
        top: 6.26382vw;
        width: 15vw
    }

    #rond2.medium {
        height: 20vw;
        left: 33.2vw;
        top: 5.15844vw;
        width: 20vw
    }

    #rond2.large {
        height: 25vw;
        left:20.3vw;
        top: 0;
        width: 25vw
    }
}


#rond3 .number{
    color:#612DFA;
    
}
#rond3.small {
    height: 35vw;
    left: 25vw;
    top: 128vw;
    width: 35vw
}

#rond3.medium {
    height: 50vw;
    left: 16vw;
    top: 117vw;
    width: 50vw
}

#rond3.large {
    height: 65vw;
    left: -8vw;
    top: 103vw;
    width: 65vw
}

@media only screen and (min-width: 767px) {
    #rond3.small {
        height:15vw;
        left: 60.3vw;
        top: 0;
        width: 15vw
    }

    #rond3.medium {
        height: 20vw;
        left: 53.6vw;
        top: 2.39499vw;
        width: 20vw
    }

    #rond3.large {
        height: 25vw;
        left: 50.5vw;
        top: 2vw;
        width: 25vw
    }
}