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

:root{
    --font-label:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
    margin: 0;
    padding: 0;
    background: url('https://media.meteojob.com/theme/2.3/images/bg-clouds.png'),linear-gradient(to top,#6cc2eb,#1299d8);
    height: 100vh;
    font-family: 'Open Sans',Arial, Helvetica, sans-serif;
}

main{
    width: 45%;
    margin: auto;
}

.mb-1{
    margin-bottom: 1.2em;
}

form{
    background-color: #ffffff;
    padding: 2em;
    box-sizing: border-box;
    margin-bottom: 1em;
    border-radius: 4px;
}

label,input{
    display: block;
}

/* ------------ header ---------------- */

header{
    text-align: center;
}

header > h2{
    color: #ffffff;
    font-size: 1.3em;
    font-weight: 600;
    font-family: 'Poiret One','Open Sans',Arial, Helvetica, sans-serif;
}

/* -------- On cache nos btns radio ----------- */

input[type="checkbox"]{
    display: none;
}

/* ---------------- Champ de saisie -------------------- */

.group-field{
    display: grid;
    grid-template-columns: repeat(2,1fr);
    gap: 4%;
}

.input__field > label{
    font-size: .875rem;
    font-family: 'Open Sans',Arial, Helvetica, sans-serif;
    font-weight: 600;
    color: #16354e;
    margin-bottom: 4px;
}

.input__field > input{
    width: 100%;
    border:1px solid #bbb8b87a;
    box-sizing: border-box;
    padding: 10px 9px;
}

.input__field  input::placeholder{
    font-family: var(--font-label);
    color: #919396;
    font-size: 1.1em;
}

/* ------------Password ---------------- */

.password__input{
    display: flex;
    align-items: center;
    border: 1px solid #bbb8b87a;
    box-sizing: border-box;
    padding: 10px 9px;
}

.password__input > input{
    border: none;
    outline: none;
    flex: 1;
}

.password__input > i{
    color: #5f5d5dec;
}

/* --------------- Style des selection du contrat ---------------------- */

.select__field{
    display: flex;
    flex-wrap: wrap;
}

h2{
    font-size: .9em;
    color: #272525da;
}

.select__field > label{
    width: 21%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 5px 5px;
    font-size: .8em;
    margin: 5px;
    background-color: #f2f2f2;
    color: #16354e;
    user-select: none;
    cursor: pointer;
}

.select__field > label:last-of-type{
    background-color: transparent;
    width: auto;
}

.select__field > label:last-of-type a{
    color: #16354e;
    font-weight: 600;
}

.select__field > label > span{
    /* white-space:wrap; */
    word-wrap: break-word;
    text-align: center;
}
/* ----------Animation de la selection ----------- */

#deal-1:checked ~ .label-1,
#deal-2:checked ~ .label-2,
#deal-3:checked ~ .label-3,
#deal-4:checked ~ .label-4,
#deal-5:checked ~ .label-5,
#deal-6:checked ~ .label-6{
    background-color: #3498db;
    color: #ffffff;
}

/* ------------ Style des conditions d'utilisation --------------- */

.term__field{
    display: flex;
}

.term__field > span:first-child{
    width: 80%;
    /* word-wrap: break-word; */
    /* word-spacing: .2em; */
    color: #16354e;
    font-family:'Open Sans',Arial, Helvetica, sans-serif;
    font-size: .875em;
    font-weight: 600;
    /* text-align: justify; */
}

.term__field > span > a{
    color: #16354e;
}

.btn--switch{
    display: flex;
    align-items: center;
    border-radius: 4px;
    color: #919396;
    overflow: hidden;
}

.btn--switch label{
    display: inline-block;
    font-family: var(--font-label);
    color: transparent;
    padding: 6px;
    transition: background-color .5s ease-in-out;
}

#term:not(:checked) ~ .btn__refused{
    background-color: #919396;
    color: #ffffff;
}

#term:checked ~ .btn__accepted{
    background-color: #0964ee;
    color: #ffffff;
}


/* ------------- Style du bouton submit ---------------- */

input[type="submit"]{
    margin: 6px auto;
    padding: 10px 25px;
    color: #ffffff;
    background-color: #3498db;
    outline: none;
    border: none;
    font-size: 1.2em;
    cursor: pointer;
}

@media all and (max-width:800px){
    main{
        width: 80%;
    }
}