* {margin:0; padding:0;}

body {text-align:center; font-family: "DINOT-Regular"; font-size:18px;}

strong {color:#117b88;}
h1 {font-weight: normal; font-family: "DINOT-Bold"; line-height: 100%; text-transform: uppercase;}
header,
footer {height:15vh; overflow: hidden; background:#117b88; color:#FFF }
footer {/*position:absolute; bottom:0; */width: 100%;}

header {display: flex;
  align-items: center;
    justify-content: center;}

footer img {max-height:9vh; height:9vh; margin-top:3vh; display: inline-block;}

section {
    display: flex;
      align-items: center; 
  justify-content: center;}

section.csText {height:25vh;}
section.csText2 {height:20vh;}
section.csText div {padding:0 1em;}
section.csForm {height:30vh;}

body.csDebut1 section.csText {height:70vh;}

body.csDebut1 section.csText2,
body.csDebut1 section.csForm {display:none;}
form.csLetsGo input {color:#FFF; background-color: #117b88; border:none; border-radius: 5px; padding:5px 15px; font-size:1.2em;cursor: pointer;}


.csNone {height:0 !important; opacity:0 !important; display:none !important; }


#jsContenuScan.csActif {display:block;}
#jsContenuScan {display:none; z-index:20; position:fixed; top:0; left:0; height:100%; width:100%; background-color:rgba(255,255,255,0.97);}




.csLoader.csActif {display:block;}
.csLoader {display:none;position:fixed; top:0; left:0; height:100%; width:100%; background-color:rgba(255,255,255,0.97);}
.csLoader > div {display:flex; height:100vh; width:100vw; align-items: center; justify-content: center; }
.csLoader svg  {width:60%; height:auto;}
.csLoader svg rect {}
.upload-wrapper {
  position: relative;
  width: 30vw;
  max-width: 500px;
    max-height: 30vh;
  aspect-ratio: 1 / 1; /* carré */
  display:inline-block;
}

.jsBt {

  width: 50px;
  height: 50px;
  font-size: 2em;
  background-color: #117b88;
  color: white;
  border: none;
  border-radius: 5px;
  display: inline-block;
  vertical-align:center;
  cursor: pointer;
background-size:70%; background-position:center; background-repeat:no-repeat;
}

#stopBtn {background-image:url("close.png");}
#switchBtn {background-image:url("apn.png");}

.upload-icon {

  width: 100%;
  height: 100%;
  font-size: 2em;
  background-color: #117b88;
  color: white;
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color 0.3s, transform 0.1s;

}

.csTermine1 .csForm {display:none !important;}
.csTermine1 .csText {height:70vh !important;}

.photo-camera {width: 55%; height:auto;}
.photo-camera path, .photo-camera circle { fill:#fff;}

.upload-wrapper:hover .upload-icon {

  background-color: #72afaa;
  transform: scale(0.95);
}



.upload-wrapper:active .upload-icon {

  transform: scale(0.95);

}



.upload-wrapper input[type="file"] {

  position: absolute;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  cursor: pointer;

}

.upload-icon.csInactif {opacity:0.2 !important; }