* {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:20vh;}
section.csText div {padding:0 1em;}
section.csForm {height:40vh;}

.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: 35vw;
  max-width: 500px;
    max-height: 40vh;
  aspect-ratio: 1 / 1; /* carré */
  display:inline-block;
}



.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; }