/* blank


#f9c705 jaune
#0c2340 bleu

*/
:root {
  --bleu-charte: #0c2340;
  --jaune-charte: #f9c705;
  --right-part-questions : 50%;
}

/* blank */
@font-face {
 font-family: "Cogito";
 src: url("fonts/Cogito-Bold.otf") format("opentype"),
 src: url("fonts/Cogito-Bold.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

@font-face {
 font-family: "Cogito Light";
 src: url("fonts/Cogito-Light.otf") format("opentype"),
  font-weight: lighter;
  font-style: normal;
}

.texte-bleu{
  color: var(--bleu-charte);
}

.texte-jaune{
  color: var(--jaune-charte);
}

.texte-blanc{
  color:white;
}

.fond-jaune{
  background-color: var(--jaune-charte);
}

.fond-bleu{
  background-color: var(--bleu-charte);
}

.fond-blanc{
  background-color: white;
}


body{
  position: fixed;
  width:100vw;
  height:100vh;
  margin:0;
}

html::-webkit-scrollbar{
  display:none;
}


#logo-container img{
  max-width: 100%;
  opacity: 100%;
}

#fleche img{
  position: absolute;
  bottom:20px;
  width:100%;
  object-fit: contain;
  max-height: 80px;
  margin:auto;
  cursor: pointer;
  z-index: 400;
}

#corps{
  position: fixed;
  width:100%;
  height: 100%;
  top:0;
  left:0;
  font-family: "Cogito", sans-serif;
  font-weight: bold;
}


#corps-menu{
  position: fixed;
  width:100%;
  height: 100%;
  top:0;
  left:0;
}

#top-bar{
  position: fixed;
  z-index: 200;
  width:100%;
  height:50px;
}

.top-bar-item{
  display:inline-block;
  width:fit-content;
  text-align: center;
  border-radius: 20px;
  font-size: 20px;
  cursor: pointer;
  height: 40px;
  margin: 15px;
  z-index: 300;
  font-family: "Cogito", sans-serif;
  font-weight: bold;
}

.top-bar-item a{
  text-decoration: none;
  margin:0px;
  line-height: 40px;
  padding: 0px 20px;
  cursor: pointer;
  z-index: 300;
}

#back-button{
  background-color: white;
}

#back-button-blue{
  background-color: var(--bleu-charte);
}

#back-button-blue a{
  color: white;
}

#back-button a{
  color: #f9c705;
}

#menu-button{
  position: absolute;
  right:0px;
  background-color: #0c2340;
}

#menu-button a{
  color: white;
}

.side-part{
  display:inline-block;
  height:100%;
  width:50%;
}

#gauche{
  padding: 30px;
  box-sizing: border-box;
  position: relative;
}

#gauche p{
  font-size: 20px;
}

.title-big{
  font-size: 6em;
  margin: 0px;
  margin-top: 20vh;
}



#summary{
  margin-top: 50px;
}
#summary a{
  width: 50%;
  /*height: 40px;*/
  display:block;
  background-color: white;
  color: #0c2340;
  border-radius: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 43px;
  text-decoration: none;
  padding: 0px 20px;
}

.side-part img{
  max-width: 100%;
}


#droite{
  overflow: scroll;
  left: 50%;
  top: 0px;
  position: absolute;
  padding: 30px;
  padding-top: 80px;
  box-sizing: border-box;
  color: #0c2340;
  font-size: 20px;
  scroll-behavior: smooth;
  z-index: 50;
  /*-ms-overflow-style: none; 
  scrollbar-width: none;*/
}

#droite::-webkit-scrollbar{
  display:none;
}

#droite h4{
  width: fit-content;
  height: 40px;
  display:block;
  background-color: #0c2340;
  color: white;
  border-radius: 20px;
  margin-bottom: 20px;
  font-size: 20px;
  line-height: 43px;
  text-decoration: none;
  padding: 0px 20px;
}

#droite p{
  color: #0c2340;
  font-family: "Cogito Light", sans-serif;
}

#moving-panel {
  position: relative;
  top:0px;
  left:0px;
  height:100vh;
  width:100vw;
  transition: 1.5s ease;
  background-color: rgba(255,255,255, 0.5);
}

#logo-container{
  position: absolute;
  top: 50%;
  left:50%;
  max-width: 40vw;
  transform: translate(-50%, -50%);
}

#logo-container img{
  max-width: 100%;
  opacity: 100%;
}

#fleche img{
  position: absolute;
  bottom:20px;
  width:100%;
  object-fit: contain;
  max-height: 80px;
  margin:auto;
  cursor: pointer;
  z-index: 400;
}

#moving-menu{
  position: fixed;
  top:100%;
  left:0px;
  width:100%;
  height:100vh;
  transition: 1.5s ease;
  box-sizing: border-box;
}

#menu-wrapper {
  width:60%;
  height: 40vw;
  margin-top: -webkit-calc(50vh - 40vw / 2);
  margin-top: -ms-calc(50vh - 40vw / 2);
  margin-top: -moz-calc(50vh - 40vw / 2);
  margin-top: -o-calc(50vh - 40vw / 2);
  margin-top: calc(50vh - 40vw / 2);
  /*margin-top: -webkit-calc(50vh / 2);*/
  margin-left:20%;
}

#menu-wrapper a{
  text-decoration: none;
}


.snakeSegment {
  position: absolute;
  width: 0;
  height: 0;
  margin:auto;
}

.snakeSegment p{
  transform: rotate(90deg);
  font-family: "Cogito", sans-serif;
  font-weight: bold;
  font-size: 40px;
  color: var(--jaune-charte);
}

#snakeShadowDemo {
  width: 100vw;
  height: 100vh;
  top:0px;
  left: 0px;
  margin: auto;
  position: relative;
  z-index: 200;
}

#phrase-follow{
  display:none;
}

#photo-holder{
  position: absolute;
  bottom:30px;
  max-width: 400px;
  float: left;
}

#photo-holder img{
  object-fit:cover;
  max-width: 100%;
  border-radius: 25px;
}

.block-scroll img{
  height:100%;
  max-width: 30px;
  object-fit: contain;
}

#bordure-gauche img{
  left: 30px;
  transform: rotate(180deg);
}

#bordure-droite img{
  right: 30px;
}

#bordure-haut img{
  width: 100%;
  max-height: 30px;
  object-fit: contain;
  padding-top:30px;
  object-fit: contain;
  transform: rotate(-90deg);
}

#bordure-bas img{
  width: 100%;
  max-height: 30px;
  object-fit: contain;
  padding-bottom:30px;
  object-fit: contain;
  transform: rotate(90deg); 
}

.filler-text{
    border-radius: 15px;
    width: fit-content;
}

.filler-text img{
  object-fit: cover;
}

.contact-side p{
  font-family: Cogito, sans-serif;
  font-weight: bold;
}

.contact-side a{
  color: var(--bleu-charte);
  text-decoration: none;
  cursor: pointer;
  font-family: Cogito, sans-serif;
  font-weight: bold;
}


#rs-links{
  position: absolute;
  bottom:0px;
  left:0px;
  padding:30px;
}

#rs-links img{
  max-width: 40px;
  margin:10px;
}

.rs-img img{
  max-width: 40px!important;
  margin:10px;
  display:inline-block;
}

#partenaires img{
  max-width: 20%;
  display:inline-block;
  margin:20px;
  vertical-align: top;
}

input {
  border: 2px solid var(--bleu-charte);
  height:30px;
  border-radius: 20px;
  padding: 0px 15px;
}

.temoignages{
  margin: 50px 0px;
}

.mots-cles{
  display:none;
}


.contact-side img{
  max-height: 100px;
}
.corps-tech{
  padding: 100px 30px 30px 30px;
  box-sizing: border-box;
  overflow: scroll;
}

#body-technique p{
  margin:0px;
  max-width: 500px;
}

.corps-tech ul{
  color:white;
}

li a{
  color:white;
}

.services-part p{
  text-align: justify;
}

@media screen and (max-height: 1030px){
  .title-big{
   font-size:4em;
  }
}

@media screen and (max-height: 900px){
  .title-big{
    font-size: 4em;
    margin-top:14vh;
  }
}


@media screen and (max-width: 900px){
  :root {
    --right-part-questions : 0%; 
    ;
  }
  .sidepart{
    display:block;
  }

   #gauche{
    position: fixed;
    display: inline-block;
    height: 200px;
    width: 100%;
    z-index: 199;
  }

  #droite {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0%;
    padding-top: 230px;
  }

  .title-big {
    font-size: 3em;
    margin: auto;
    margin-top: 100px;
  }

  #summary, #gauche p{
    display:none;
  }

  #photo-holder {
    position: sticky;
    padding: 0px;
    max-width: 200px;
    float: initial;
    border-radius: 25px;
  }

  #questions-button p{
    display:none;
  }

  #img-question{
    display:none;
  }

#img-temoignage{
  display:none;
}

}