@CHARSET "UTF-8";
:root{
    --main-bg-color:#e9e3e3;
    --main-bg-color-white:#ffffff;
    --second-bg-color:#e94135;
    --chart-color-1:#2c6eeb;
    --chart-color-2:#e7a645;
    --chart-color-3:#062486;
    --chart-color-4:#ca9d09;
    --selection-background:#4CAF50;
    --body-color:#28332f;
    --title-color:rgb(164, 35, 175);
    --header-text-color:#ffffff;
  }
  body{
    font-size: 1.0em;
    font-weight: 400;
    font-family: 'ABeeZee';
    color:var(--body-color);
    background-color:var(--main-bg-color);
    margin: 0;
  }
  /*#6245e7*/
  ul {
   padding: 10px;
   list-style-type: none;
  }
  li{
      padding-top:10px;
  }
  
  .title{
      text-align: center;
  }
  
  .box{
      padding: 10px;
      transition: 0.4s;
      scroll-behavior: smooth;
      /*background:url(resourses/images/attractor.svg) no-repeat center;*/
  }
  .menu{
    display: flex;
    position:fixed;
    overflow: hidden;
    width:100%;
    height:45px;
    background-color:var(--second-bg-color);
    padding: 10px;
    text-align: center;
    z-index:100;
  }

  /*#d2cfc4;*/
  
  .titleSheet{
      text-align: center;
      padding: 1px 0;
      margin-left: 10px;
      margin-top: 5px;
      font-style: normal;
      font-size: 2.0em;
      font-weight: 600;
      font-family: 'ABeeZee';
      color:var(--header-text-color);
  }
  .container-header-menu p{
    margin-right:50px;
      font-weight: 600;
      color:var(--header-text-color);
  }
.text{
    font-size: larger;
    margin-top:20%;
}
p span{
    font-weight: bold;
}
.container-top{
    width: 100%;
    height: 65px;
}

.container-block{
    display: block;
    width: 100%;
}
.container-header-menu{
    margin-left:auto;
    margin-right:auto;
}
.container-header-phone{
    margin-right:50px;
}
.container-icon{
 width: 30%;
}
.container-reader{
  
    width: 60%;
    margin-top:30px;
    margin-bottom:30px;
}
.container-player{
    display: block;
    margin-bottom:30px;
}
.container-inline{
    display: inline-block;
}
.container-inline-two{
    display: inline-block;
    width: 45%;
}
.container-inline-three{
    display: inline-block;
    width: 33%;
}
.container-inline-two-third{
    display: inline-block;
    width: 66%;
}
.hidden{
    visibility: hidden;
}
.margin-center{
    margin-left: auto;
    margin-right: auto;
}
.margin-global{
    margin-top:30px;
    margin-bottom:30px;
}
.margin-bottom{
    margin-bottom:30px;
}
.container-box{
    width: 100%;
    height: 100%;
    border-radius: 30px;
    background-color: #ffffff;
}
.container-global-text{
    width: 60%;
    margin-left:auto;
    margin-right:auto;
    margin: 2% auto;
    padding: 30px;
}
.container-global-text p{
    font-size: x-large;
    font-weight: 400;
    text-align: center;
}
.container-global-text span{
    font-weight: bold;
}

.container-contact{
    width: 60%;
    border-radius: 30px;
    background-color: var(--second-bg-color);
    margin-left:auto;
    margin-right:auto;
}
.container-box-embed{
    /*border-color: #371ab6;
    border-width: 2px;
    border-style: solid;*/
    border-radius: 30px;
    background-color: #ffffff;
}

.container-flex{
    display: flex;
   
}
.container-flex-column{
    display: flex;
    flex-direction: column;
  
}

.container-main{
    width: 100%;
    height: 600px;
    background-image: url(../images/entrance.JPG);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
}
.container-service{
    width: 70%;
    margin-top: -10%;
    margin-left:auto;
    margin-right: auto;
}

.container-article{
    margin: 2% auto;
    padding: 30px;
    width: 70%;
}
.container-hero-bloc{
    margin: 2% auto;
    padding: 30px;
    width: 70%;
    color:#ffffff;
    font-size: 2em;
    text-align: center;
}
.container-relative{
    position:relative;
    top: 20px;
    left: 50px;
}
.container-relative-right {
    position: relative;
    top: 20px;
    right: 50px;
}
.container-data-2d .data-title{
    color:var(--title-color);
    font-size: large;
    /*margin:  10px;*/
    font-size: larger;
    font-weight: bold;
}
.container-data-2d .icon{
    display: block;
}
.container-data-2d .data-chart{
    display: block;
    width: 80%;
    padding:  10px;

}
.container-data-2d .data-text{
    display: block;
    width: 80%;
    padding:  10px;
}

.button_player{
    background-color:transparent;
    border-style:none;
}
.button_player:hover{
    cursor: pointer;
}
.button_player img{
    width: 50px;
}

.data-title{
    color:var(--title-color);
    font-size: large;
    font-size: larger;
    font-weight: bold;
}
.container-text-centered{
    text-align: center;
    margin-top:auto;
    margin-bottom:auto;
}
.container-bar-color{
    width: 80%;
    height: 5px;
    background-color: var(--second-bg-color);
    margin-left:auto;
    margin-right:auto;
}
.container-modal-img img {
    width:300px;
}
.init-condition-span{
    font-weight: bold;
}

.service-content-text{
    margin: 5%;
    width: 100%;
}

.service-content-text h1{
    color: var(--body-color);
    font-weight: bold;
}
.service-content-text p{
    color: var(--body-color);
    font-size: large;
}

.service-content-img{
    margin: 5%;
    
}
.service-content-img img{
    max-width: 600px;
    max-height: 600px;
}

.horaire p{
    font-size: 1.5em;
    text-align: center;
    vertical-align: middle;
}
.phone p{
    font-size: 3em;
    padding: 10px;
    background-color: var(--second-bg-color);
    border-radius: 30px;
    color: white;
    margin-left: 20%;
    margin-right: 20%;
    text-align: center;
    vertical-align: middle;
}

.horaire span{
    font-weight: bold;
}

.img-block{
    width: 500px;
    height: 600px;
}
.container-footer-colored{
    margin: 0;
    background: var(--second-bg-color);
}
.container-footer{
    border-radius: 100% / 0 0 100% 50%;
    background: var(--main-bg-color);
}
footer {
    height: 100px;
    background-color: var(--second-bg-color);
  }

/* Responsive layout - makes a one column layout instead of a two-column layout */

  @media (max-width: 800px) {
    .container-flex {
      flex-direction: column;
    }
    .container-inline-two{
        display: block;
        width: 100%;
    }
    .container-inline-three{
        display: block;
        width: 100%;
    }
    .container-inline-two-third{
        display: block;
        width: 100%;
    }
    .img-block{
        width: 100%;
 
    }
    .container-article{
        margin: 2% auto;
        padding: 0px;
 
    }
    .container-footer{
        border-radius: 0px;
        background: var(--main-bg-color);
    }
    .container-inline-three .container-box{
        border-radius: 30px;
    }
    .container-box{
        width: 100%;
        height: 100%;
        border-radius: 0px;
        background-color: #ffffff;
        padding:10px;
    }
    .service-content-text{
        margin: 0px;
        width: 100%;
    }
    #web{
        display:none;
    }
    .container-header-phone{
        margin-right:calc(1vw/2 + 115px);
    }
    
  }