.html{
    background: #fff;
    width: 100%;
}

body {
    margin:0;
    min-height: 100vh;
}

form{
    text-align: center;
    width: 320px;
    margin-left:auto;
    margin-right:auto;
    margin-top:15%;
    justify-content: center;
}
.mdp i {
    position:absolute;
    top:10px;
    right: 10px;
    cursor:pointer;
}

.mdp i.active::before{
    content:'\f070';
}

.logo{
width: 20%;
height: auto;
}

.header{
    text-align: center;
    padding-top:10px ;
    padding-bottom:10px;
    padding-left: 2%;
    padding-right: 2%;
    border-radius: 15px 15px 0px 0px;
    background: var(--bleuRodrigue, #253451);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

h2{
    margin-block-start: 0;
    margin-block-end: 0;
    color: #FFF;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 25px;
    font-style: normal;
    font-weight: 200;
    line-height: normal; 
}

/* *{
    --border:#A8A8A8;
    --cursor: #f9af15;
    box-sizing: border-box;
    
} */

/* .grid{     
    display:grid;
    grid-template-columns: 50% 50%;
    grid-template-rows:auto;
    width: 100%;
}

.box1{
    grid-column-start: 1;
    grid-column-end: 2;
}

.box2{
    grid-column-start: 2;
    grid-column-end: 3;
} */

section{
    border-radius: 0px 0px 15px 15px;
    background: var(--white, #FFF);
    box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
}

span{
    text-align: center;
    padding-left: 10px;
    padding-right: 10px;
    padding-top:20px;
    color: #000;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    display:block;
}

.button{
    text-align: center;
    justify-content: center;
}

canvas{
    border: 1px solid #000;
}

.champ{
    text-align: center;
}

input[type=submit]{
    text-align: center;
    justify-content: center;
    border: none !important;
    width: auto;
    height: 22px;
    flex-shrink: 0;
    border-radius: 5px;
    background:#f9af15;
    color: #FFF;
    margin-top: 20px;
    margin-bottom:20px;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 18px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.input{
    text-align: center;
    color: var(--Gray, #000);
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 100%;
    font-style: normal;
    font-weight: 400;
    width:70%;
    line-height: normal;
    height:20px;
    border-radius: 5px;
    border: 1px solid var(--Gray, #A8A8A8);
    margin-top: 5px;
    margin-bottom: 5px;
    background: var(--white, #FFF);
}


@media(max-width: 430px){
    .html{
        background: #fff;
        width: 100%;
    }
    
    form{
        text-align: center;
        width: 320px;
        margin-left:auto;
        margin-right:auto;
        margin-top:40%;
        justify-content: center;
    }
    
    .logo{
    width: 10%;
    height: auto;
    }
    
    .header{
        text-align: center;
        padding-top:10px ;
        padding-bottom:10px;
        padding-left: 2%;
        padding-right: 2%;
        border-radius: 15px 15px 0px 0px;
        background: var(--bleuRodrigue, #253451);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }
    
    h2{
        margin-block-start: 0;
        margin-block-end: 0;
        color: #FFF;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 25px;
        font-style: normal;
        font-weight: 200;
        line-height: normal; 
    }
    canvas{
        border: 1px solid #000;
    }
    
    /* *{
        --border:#A8A8A8;
        --cursor: #f9af15;
        box-sizing: border-box;
        
    } */
    
    /* .grid{     
        display:grid;
        grid-template-columns: 50% 50%;
        grid-template-rows:auto;
        width: 100%;
    }
    
    .box1{
        grid-column-start: 1;
        grid-column-end: 2;
    }
    
    .box2{
        grid-column-start: 2;
        grid-column-end: 3;
    } */
    
    section{
        padding-left: 2%;
        border-radius: 0px 0px 15px 15px;
        background: var(--white, #FFF);
        box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
    }
    
    span{
        text-align: center;
        padding-left: 10px;
        padding-right: 10px;
        padding-top:20px;
        color: #000;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 16px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
        display:block;
    }
    
    .button{
        text-align: center;
        justify-content: center;
    }
    
    .oui{
        text-align: center;
    }
    input[type=submit]{
        text-align: center;
        justify-content: center;
        border: none !important;
        width: auto;
        height: 22px;
        flex-shrink: 0;
        border-radius: 5px;
        background:#f9af15;
        color: #FFF;
        margin-top: 20px;
        margin-bottom:20px;
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 18px;
        font-style: normal;
        font-weight: 400;
        line-height: normal;
    }
    
    .input{
        text-align: center;
        color: var(--Gray, #000);
        font-family: 'Source Sans Pro', sans-serif;
        font-size: 100%;
        font-style: normal;
        font-weight: 400;
        width:70%;
        line-height: normal;
        height:20px;
        border-radius: 5px;
        border: 1px solid var(--Gray, #A8A8A8);
        margin-top: 5px;
        margin-bottom: 5px;
        background: var(--white, #FFF);
    }
}