@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');

:root {
    --couleur: #202023;
    --duration: 0.6s;
    font-family: 'Open Sans', sans-serif;
}

html {
    background-color: rgba(255, 255, 255, 0);
}

form {
    font-weight: bold;
    background: rgb(29, 30, 40);
    padding: 20px;
    margin: auto;
    width: 80vw;
    box-shadow: rgb(44, 47, 51) 0px 0px 10px;
    border-radius: 15px;
}

h1 {
    margin-left: 5%;
    margin-right: 5%;
    padding-left: 30px;
    padding-right: 30px;
    color: white;
    background: linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%);
    border-color: transparent;
    border-style: solid;
    text-align: center;
    border-radius: 10px 100px / 120px;
    ;
}

.Q {
    font-size: 1.7em;
    color: white;
    display: block;
    background: rgb(44, 47, 51);
    width: 73vw;
    min-height: 50px;
    text-align: center;
    padding: 0;
    margin: auto;
    margin-top: 10px;
    /* max-height: 120px; */
    font-weight: bold;
    box-shadow: black 0px 0px 5px;
    border-top: solid 1px #86b5fc;
    border-radius: 3px;
    margin-top: 10px;
    overflow-x: hidden;
    padding-bottom: 20px;
}

#rangeexp {
    text-align: center;
}

/* 
#DD .R{
    font-size:0.4em;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    display: block;
    background: linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%);
    margin: 0;
    width: 40vw;
    margin: auto;
    text-align: left;
    margin-top: 1px;
    color: black;
    padding: 2px;
    border-radius: 3px;
} */


/*! Switch Darkmode*/
label[for="checkbox"] {
    color: #fff;
}

.toggle {
    position: absolute;
    width: 50%;
    background-color: #34323D;
    box-shadow: 0 2px 15px rgba(0, 0, 0, .15);
    transition: transform .2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.dark{
    text-align: center;
}

.names {
    font-size: 90%;
    font-weight: bolder;
    width: 65%;
    margin-left: 15%;
    margin-right: 10%;
    margin-top: 5%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    user-select: none;
}

#checkbox {
    display: none;
}


#lbmode,
.toggle {
    height: 2.8rem;
    border-radius: 100px;
}


#lbmode {
    width: 20vw;
    min-width:150px;
    background-color: rgba(0, 0, 0, 0.1);
    border-radius: 100px;
    position: absolute;
    margin: 1.8rem 0 4rem 0;
    cursor: pointer;
}
/*! Dark Mode Switch Color*/
#checkbox:checked~.fond #logowhite{
    display:none;
}

#checkbox:checked~.fond #logodark{
    display:block;
}

#checkbox:checked ~#lbmode .toggle {
    transform: translateX(100%);
    background-color: #fff;
}
.light{
    opacity:.2;
}

#checkbox:checked~#lbmode .names .light{
    opacity: 0.9;
}

#checkbox:checked~#lbmode .names .dark{
    opacity: .2;
  }


#checkbox:checked~.fond {
    background-color:  #fff;

}

#checkbox:checked+label[for="checkbox"] {
    color: #34323D;
}

#checkbox:checked~.fond main form{
    background: rgb(211, 211, 211);
    
}

#checkbox:checked~.fond main form .Q{
    background-color: #fff;
    color:black;
}

#checkbox:checked~.fond h1{
    color:black;
}

#checkbox:checked~.fond footer{
    color:black;
}

/*!----------------------------------------------------------------------------*/
.fond {
    background: var(--couleur);
    display: flex;
    flex-direction: column;
    align-items: center;
}

label[for="checkbox"] {
    position: absolute;
    text-align: center;
    top: -20px;
}

#checkbox {

    position: absolute;
    /* posito */
}

#checkbox,
label[for="checkbox"] {
    margin-top: 100px;
}

.R {
    font-size: 0.6em;
    font-weight: normal;
    border: none;
    border-collapse: collapse;
    display: block;
    background: linear-gradient(45deg, #7abcff 0%, #60abf8 44%, #4096ee 100%);
    margin: 0;
    width: 60vw;
    margin: auto;
    text-align: left;
    margin-top: 1px;
    color: black;
    padding: 2px;
    border-radius: 3px;
    /* height:100px; */
}

label {
    display: inline-block;
    width: calc(100% - 3em);
}

.lbD {
    width: auto;
}

#P>.R>label {
    width: 170px;
}


.repligne {
    margin-left: 10%;
    width: 130px;
}

.masquer {
    display: none;
}

body {
    background: var(--couleur);
    margin: 0;
}

h1 {
    margin-top: calc(10vmax + 5%);
    
    color: white;
}
#logodark{
    position:absolute;
    display: none;
}

#logowhite{
    position:absolute;
}
.logo {
    z-index: 10;
    margin-top: 0px;
    width: 20%;
    min-width: 150px;
    /* opacity: 0; */
}

input.activateur:checked~.masquer {

    display: inline-block;
}


#C2:checked+.masquer {
    margin: 100px;
    display: inline;
}

#C2:after {
    content: 'Oui';
    padding: 15px;
    font-family: 'Open Sans', sans-serif;
    font-size: 1.2em;
}

p {
    margin: 0;
    margin-left: 10%;
    width: 80%;
}

.V {
    display: flex;
    justify-content: center;
}

#V1 {
    padding: 10px;
    background-color: #86b5fc;
    border-radius: 15px;
    font-size: 1.5em;
}

td {
    font-size: 0.9em;
    display: inline;
    margin: auto;
}

tr {
    width: 40vw;
}

#D1,
#D2,
#D3 {
    width: 11.75vw;
    margin-right: 7%;
}

/* #D1{ 
    text-align:left;
}

#D2{
    text-align:center;
    left:10em;
}

#D3{
    text-align:center;
}

#D4{
    text-align:right;
} */

input[type="range"] {
    width: 47vw;

}

form {
    overflow-x: hidden;
}

#D {
    width: 55vw;
}

#DD {
    width: 55vw;
}

#D .R {
    width: 50vw;
}

#DD .R {
    width: 50vw;
}

input+span {
    padding-right: 30px;
}

/* input:invalid{
    border: 2px dashed red;
} */

#F1 {
    width: 30vw;
    margin-left: 3vw;
    margin-right: 3vw;
}

label[for="F1"] {
    margin-left: 2vw;
}

input:valid+span:after {
    content: '✓';
    padding-left: 5px;
}

input:invalid+span:after {
    content: '✖';
    padding-left: 5px;
}

/* input:valid{
    border: 2px double green;
} */

input[type="text"],
input[type="date"],
input[type="email"],
input[type="tel"] {
    border-radius: 3px;
    border-width: 1px;
}

.Q {
    position: relative;
    animation-duration: var(--duration);
    animation-iteration-count: 1;
    animation-timing-function: linear;
}

#P {
    z-index: 20;
    animation-name: animP;
}

#A {
    z-index: 19;
    animation-name: animA;
}

#B {
    z-index: 18;
    animation-name: animB;
}

#C {
    z-index: 17;
    animation-name: animC;
}

#E {
    z-index: 16;
    animation-name: animE;
}

#F {
    z-index: 15;
    animation-name: animF;
}

#G {
    z-index: 14;
    animation-name: animG;
}

#H {
    z-index: 13;
    animation-name: animH;
}

footer {
    font-size: .8em;
    color: white;
}

@keyframes animP {
    from {
        transform: translate(0px, -271px);
    }

    to {
        transform: translate(0px, 0px);
    }


}

@keyframes animA {
    from {
        transform: translate(0px, -523px);
    }

    to {
        transform: translate(0px, 0px);
    }


}

@keyframes animB {
    from {
        transform: translate(0px, -700px);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes animC {
    from {
        transform: translate(0px, -802px);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes animE {
    from {
        transform: translate(0px, -932px);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes animF {
    from {
        transform: translate(0px, -1011px);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes animG {
    from {
        transform: translate(0px, -1241px);
    }

    to {
        transform: translate(0px, 0px);
    }
}

@keyframes animH {
    from {
        transform: translate(0px, -1506px);
    }

    to {
        transform: translate(0px, 0px);
    }
}




@media screen and (max-width: 1000px) {
    form {
        margin: auto;
        width: 90vw;
    }

    #period {
        width: 40vw;
    }

    #D1,
    #D2,
    #D3 {
        width: 11.75vw;
        margin-right: 0%;
    }

    .Q {
        width: 80vw;
        margin-left: auto;
        ;
    }

    .R {
        width: 72vw;
    }

    .lbD {
        width: 10vw;
    }

    label[for="F1"] span {
        display: none;
    }

    h1 {
        width: 94%;
    }
}