@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400,700);

.retour{position: absolute;top:0px;left: 0px;margin: 0;padding: 1em; }
.retour li.ligne{vertical-align:top;}
h4{margin: 0;margin-top: 0.7em;padding: 0;font-size: 0.8em;}

#retour:hover{text-shadow: 0 0 0.1em black;}


    body {
 text-align: center;
  margin-top: 8em;
  line-height: 1.1em;

}

a {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}

div.boutton{width: 10em;}

a{text-decoration: none;color: #111;}

.boutton:hover a{color:  #666;}

p{font-size: 0.8em;margin: 0;padding: 0;margin-left: 2em;line-height: 1em;}

.box-form{
  background-color: #333;
  width: 30em;
  margin: auto;
  text-align: center;
  color: white;
  border-radius: 3em;
  padding: 1em;
  padding-top: 0.1em;
  padding-bottom: 0;
  box-shadow: 0px 0px 1em 1em rgba(0,0,0,0.25);
}

.deux{width: 1em;}
.prem{padding-bottom: 0.5em;}

.petitelettre{text-transform: none;}

.submit input , .boutton{
  text-decoration: none;
  color: black;
  font-weight: bold;
  background-color: #666;
  padding: 0.5em;
  margin-left: 2em;
  box-shadow: 0px 0px 0.5em 0.1em rgba(0,0,0,0.25);
  font-size: 0.8em;
  border: none;
  border-style: none;
}

.boutton{text-transform: none;}

.boutton:hover,.submit input:hover{
  background-color:#D4D4D4;
  box-shadow: -1px 1px, -2px 2px, -3px 3px, -4px 4px;
      transform: translate3d(4px, -4px, 0);
      color:  #666;
      transition: 0.5s;
}


h2{font-weight: normal; position: relative; font-size: 1.2em;text-transform: uppercase;margin-bottom: 0px;}

label{font-size: 0.9em;text-transform: uppercase;}

table{width: 100%; }

ul{margin: 0;padding: 0;text-align: center;}

input.saisie {width: 100%;background-color: transparent;margin-bottom: 2em;
appearance: unset;
    -moz-appearance: unset;
    -webkit-appearance: unset;
    -o-appearance: unset;
    -ms-appearance: unset;
    outline: none;
    -moz-outline: none;
    -webkit-outline: none;
    -o-outline: none;
    -ms-outline: none;
    box-sizing: border-box;
    -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
    border:none;border-bottom: 0.12em solid #999;
    font-family: 'Open Sans', sans-serif;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 1em;
    color: white;
}
    
input.saisie:focus{
  border-bottom: 2px solid #2bb33e;
}

tr{text-align: left;font-weight: normal;font-size: 1em;}

#feca{position:relative;margin-top: -5em;margin-right: -9em;}
#osa{position:relative;margin-top: -5.5em;margin-left: -13em;}
#sadi{position:relative;margin-top: 8.5em;margin-right: -9em;margin-left: 2em;}
#elio{position:relative;margin-top: 3em;margin-left: -9em;}

.ligne{display: inline-block;}

.haut{vertical-align: top;}

.bas{vertical-align: bottom;}

li{list-style: none;}

.big{text-transform: uppercase;}

.customcheck .checkmark:after {
    left: 0.3em;
    bottom: 0.2em;
    width: 4px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
}


div.nightdaymode {
  position: absolute;
  display: inline-block;
  margin: 0;
  margin-left: -110px;
  margin-top: 10px;
}

#time {
  display: none;
}

#time + label {
  --i: 0;
  --j: calc(1 - var(--i));
  display: grid;
  overflow: hidden;
  padding: 0.5em;
  height: 2px;
  width: 20px;
  border-radius: 1em;
  background: hsl(0, 100%, calc(var(--j)*100%));
  color: transparent;
  user-select: none;
  transition: .3s;
  cursor: pointer;
  border: solid 1px #dcddde;
}

#time + label:before, #time + label:after {
  width: 13px;
  height: 13px;
  transition: inherit;
  content: "";
  margin-top: -5px;
}
#time + label:before {
  transform-origin: 20% 20%;
  transform: translate(calc(var(--i)*(100% + 0.25em))) scale(calc(1 - var(--i)*.7));
  background: #F09800;
  --poly: polygon(44.13371% 12.96169%, 50% 0%, 55.86629% 12.96169%, 59.70571% 13.77778%, 63.4388% 14.99073%, 67.02464% 16.58726%, 79.38926% 9.54915%, 76.5165% 23.4835%, 79.14297% 26.40049%, 81.45015% 29.57604%, 83.41274% 32.97536%, 97.55283% 34.54915%, 87.03831% 44.13371%, 87.44861% 48.0374%, 87.44861% 51.9626%, 87.03831% 55.86629%, 97.55283% 65.45085%, 83.41274% 67.02464%, 81.45015% 70.42396%, 79.14297% 73.59951%, 76.5165% 76.5165%, 79.38926% 90.45085%, 67.02464% 83.41274%, 63.4388% 85.00927%, 59.70571% 86.22222%, 55.86629% 87.03831%, 50% 100%, 44.13371% 87.03831%, 40.29429% 86.22222%, 36.5612% 85.00927%, 32.97536% 83.41274%, 20.61074% 90.45085%, 23.4835% 76.5165%, 20.85703% 73.59951%, 18.54985% 70.42396%, 16.58726% 67.02464%, 2.44717% 65.45085%, 12.96169% 55.86629%, 12.55139% 51.9626%, 12.55139% 48.0374%, 12.96169% 44.13371%, 2.44717% 34.54915%, 16.58726% 32.97536%, 18.54985% 29.57604%, 20.85703% 26.40049%, 23.4835% 23.4835%, 20.61074% 9.54915%, 32.97536% 16.58726%, 36.5612% 14.99073%, 40.29429% 13.77778%);
  -webkit-clip-path: var(--poly);
  clip-path: var(--poly);
  margin-top: -6px;
  margin-left: -3px;
}
#time + label:after {
  grid-column: 2;
  border-radius: 50%;
  transform: translatey(calc(var(--i)*(-100% - 0.5em)));
  background: radial-gradient(circle at 19% 19%, rgba(0, 0, 0, 0) 41%, #ffffff 43%);
  margin-left: 3px;
}
#time:checked + label {
  --i: 1;
  border: solid 1px #000000;
}

#time:checked + label:before{ margin-left: -7px;}


html::-webkit-scrollbar {
      width: 13px;
    }

    html::-webkit-scrollbar-track {
      box-shadow: inset 0 0 5px grey; 
      border-radius: 10px;
    }
     
    html::-webkit-scrollbar-thumb {
      background: #999; 
      border-radius: 10px;
    }

    html::-webkit-scrollbar-thumb:hover {
      background: #666; 
    }


    .logo {
    position: absolute;
    right: 20px;
    top: 20px;
}