/* DEMANDE ESSAI */  

.bandeau {
    margin-top: 55px ;
    padding: 40px 0 30px 0;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    align-items: center;
}

#bandeau1 {
    background-image : url(images/SUZUKI/essai_bckgrd.jpg) ;
    background-position: center bottom ;
    background-size: cover;
    height : 409px ;
}

#bandeau2 {
    background-image : url(images/SUZUKI/bg_step_1_desktop.jpg) ;
    background-position: center top ;
    background-size: cover;
    height : 409px ;
}

.bandeau h1 {
    margin : 60px 0 20px 0 ;
    color: #1e2e7c;
    font-family: "Barlow Condensed", sans-serif;
    font-size: 40px;
    font-weight: 900 ;
    line-height: 44px ;
}

.bandeau h2 {
    font-family: "Roboto", sans-serif ;
    font-size : 40px ;
    padding: 5px ;
    margin : 0 0 20px 0 ;
}

.bandeau h3 {
    color: #1e2e7c;
    font-family: "Montserrat" , sans-serif;
    font-size : 16px ;
    font-weight: bold;
    padding: 5px ;
    margin : 10px 0 0 0 ;
    line-height: 27px ;
}

#etape {
    display: flex;
    align-items: flex-end ;

    height : 45px ;

    color: #1e2e7c;
    font-family: "Barlow Condensed", sans-serif;
    font-weight: bold ;
}

#etape img {
    width: 18px ;
    height: 24px;
}

#etape h2 {
    font-size : 32px ;
    width: 45px ;
    height: 45px ;
    box-sizing: border-box ;
    border : 1px solid #1e2e7c ; 
    margin : 0 10px ;
    line-height: 43px;
    text-align: center;
    padding: 0 ;
}

#etape h3 {
    font-size: 32px ;
    font-weight: 100;
    margin: 0 ;
    line-height: 18px;
    padding: 5px 0;
}

#etape h4 {
    font-size: 18px ;
    font-weight:900 ;
    margin: 0 ;
    line-height: 20px;
}

#formulaire {
    max-width: 1170px ;
    padding: 30px 15px 0 15px ;
    box-sizing: border-box;
    margin: 40px auto 16px auto;
    height: 166px ;
    background-color: #0D3EBE;

    text-align: center;
}

#formulaire h3 {
    font-family: "Montserrat" , sans-serif;
    font-weight: bold ;
    line-height: 27px ;
    color: white ;
    font-size: 16px ;

    width: 100% ;
    text-align: center;
    margin : 0 0 30px 0 ;
}

#formulaire input {
    padding: 10px 12px 10px 47px ;
    max-width: 386px ;
    box-sizing: border-box;
    margin: auto;

    background-image: url(images/SUZUKI/cp.svg);
    background-repeat: no-repeat;
    background-position: 10px center;
    background-size: 27px ;

    border : 2px solid #dddddd ;
    border-radius: 3px ;

    font-size: 16px ;
    font-weight: 100;
    line-height: 28px ;
    color: grey;
}

#permis {
    text-align: center ;
    width: 100%;
    margin-bottom: 30px ;
}
#permis h3 {
    line-height: 27px;
    font-size: 16px;
    letter-spacing: 0.8px ;
    font-family: "Montserrat" , sans-serif;
    color : #0a2a7f ;
}

#radio {
    display: flex ;
    justify-content: space-between;
    width: 200px ;
    margin: 0 auto 40px auto ;
}

a.bouton-radio {
    min-width: 60px;
    height: 60px;
    border: 1px solid #0A2A7F;
    margin: 23px;
    text-align: center;
    font-size: 19px;
    font-weight: bold;
    line-height: 60px;
    background-color: #0A2A7F;
    border-radius: 6px;
    color: #FFFFFF;
    box-sizing: border-box;

    text-decoration: none;
    font-family: "Montserrat" , sans-serif;
}

a.bouton-radio:hover {
    background-color: #0D3EBE;
}

#bandeau2 > h2 {
    opacity: 0;
}

#content {
    max-width: 1140px ;
    margin: 40px auto ;

    text-align: center;
}

.type-moto {
    background-image: url(images/spacer-grey.svg);
    background-position: center;
    align-items: center ;
    display: flex;
    justify-content: center;
    height: 30px ;
}

.type-moto h3 {
    padding: 16px ;

    color: #1e2e7c;
    font-family: "Montserrat" , sans-serif;
    font-size : 16px ;
    font-weight: 800;
    background-color: white;
}

.images-moto {
    margin: 16px 0;
    display: flex;
    justify-content: center;
}

.images-moto a{
    text-decoration: none ;
    color: black;
}

.moto {
    width: 200px ;
    height: 108.6px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.moto img {
    width: 120px ;
    height: 80px ;
}

.moto p {
    width: 200px ;
    font-size : 14px ;
    font-weight: bold ;
    font-family: "Barlow Condensed", sans-serif;
    letter-spacing: 0.25px ;
    position: relative;
    margin-top: 5px ;
}

.moto p::after{
    display: block;
    content: "";
    width: 120px ;
    height: 7px;
    background-color: #ffffff;

    position: absolute;
    bottom: -10px ;
    left : 50% ;
    transform : translateX(-50%)
}

.moto:hover p::after{
    background-color:#0a2a7f ;
}

/* FORMULAIRE */

#bandeau3 {
    background-color: #F7F7F7 ;
    height : 395px ;
}

#calendrier {
    width : 45px ;
    height : 45px ;
    margin-top: 74px ;
}

#info-user {
    max-width: 788px ;
    margin: 35px auto 0 auto ;
    text-align: center;
    padding-bottom : 40px ;
}

#info-user input , #info-user select {
    padding : 13px ;
    border : 2px solid #dddddd ;
    border-radius: 3px ;
    background-color: white;
    margin: 0 2px 30px 2px ;
    width: 386px ;
    height: 55px ;
    box-sizing: border-box;

    color : #393939 ;
    font-family: "Montserrat" , sans-serif;
    font-size: 17px ;
    font-weight: 100;
}

#info-user select {
    background-image : url(images/SUZUKI/liste_deroulante.svg);
    background-repeat: no-repeat;
    background-position: right 10px center ;

    appearance: none;
}

#info-user option {
    color : #393939 ;
    font-family: "Montserrat" , sans-serif;
    font-size: 17px ;
    font-weight: 100;
}

#condition {
    display: flex ;
    height: 80px ;
    margin: 14px 0;
    text-align: left ;
    align-items: center;
    padding-left: 10px ;
    box-sizing: border-box;
}
#case-checkbox {
    margin-right : 10px ;

}

#case-checkbox input {
    display: none ;
}

#cercle-checkbox {
    width: 18px;
    height: 18px;
    box-sizing: border-box;
    border: 2px solid #0A2A7F;
    border-radius: 50%;
    display: inline-block;
    cursor: pointer;
}

#cercle:checked + #cercle-checkbox {
    background-color: red;
}

#condition label {
    font-size : 15px ;
    font-weight: 100;
    font-family: "Montserrat" , sans-serif;
}

#envoyer {
    width: 302px ;
    height : 60px ;
    border-radius: 4px ;
    margin-top : 20px ;
    background-color: #202A7F ;
    cursor: pointer;

    color : white ;
    font-size : 20px ;
    font-weight : bold ;
}
/* PHP */

#php-donnees {
    max-width: 788px ;
    margin: 40px auto;
    text-align: center ;
}

.important {
    font-weight: bold;
}