@media screen and (min-width: 420px){
    .children-line .input,
    .children-new-line .input{
        min-width: 64px;
    }
}

@media screen and (min-width: 500px){
    article.vignet-carre-container{
        width: 42%;
      }
      .vignet-carre-container .talent-container{
          width: 100%;
      }
      .talent-content{
          width: calc(200% - 5px);
      }
}

@media screen and (min-width: 650px){
    .content-container{
        margin: 0px  auto;
    }
}


@media screen and (min-width: 885px){
    /*Navigation mobiler-Barre de progression*/
    header,
    .progression-container{
        display: none;
    }

    /*Titre des pages-Barre latérale-Bouton Retour*/
    aside,
    .title-content,
    .retour{
        display: block;
    }

    .logo{
        margin: 60px;
        width: 240px;
    }


    /*Bloc du contenu global*/
    .content-container{
        margin-left: 420px;
        width: 405px;
        justify-content: flex-start;
    }

    /*Bloc du formulaire*/
    .form-container{
        width: 100%;
        padding: 0px;
        background-color: transparent;
    }

    /*Conversion de la mise en forme*/
    .input,
    .select-selected,
    .select-selected:after,
    .vignet-rectangle-container,
    .vignet-carre-container,
    .vignet-edit-container{
        background-color: var(--fond);
        box-shadow: none;
        font-weight: 300;
    }

    /*Conversion de la couleur seulement*/
    .day,
    .checkbox-custom,
    .checkbox:checked ~ .checkbox-custom,
    .vignet-thin-container{
        background-color: var(--fond);
        box-shadow: none;
    }

    /*Grand champ Étudiant*/
    textarea.input,
    textarea.input::placeholder{
        /*background-color: #DCF3FF;*/
        color: black;
        font-size: 16px;
    }



    /*Bloc rectangulaire*/
    .vignet-rectangle-container .text-classique{
        text-align: left;
    }


    /* Bloc édition étapes de garde*/
    .vignet-edit-container{
        margin-left: 0px;
        width: calc(100% - 30px);
        margin-top: 30px;
    }


    /*Bloc du jour avec select*/
    .day-hours-container{
        width: 60%;
    }


    /*Popup des talents*/
    .talent-content{
        width: calc(405px - 30px);
        padding: 0px 15px;
        padding-bottom: 30px;
    }
    .talent-content .checkbox-container{
        margin-top: 30px;
    }

    .talent-content .checkbox-container .text-fin{
        font-size: 16px;
    }

    .talent-content .button{
        margin-top: 30px;
    }
    .talent-content .edit{
        margin-top: 30px;
    }


    /*Textes du formulaire*/
    .text-question,
    .text-classique{
        width: 100%;
    }

    /*Bouton du formulaire*/
    .content-container > .button{
        margin: 60px 0px;
        padding: 16px 32px;
    }


    /*Bloc d'expérience Étudiant*/
    .experience-container{
        background-color: transparent;
        background-color: rgba(220, 243, 255,0.25);
        margin-bottom: 30px;
    }

    .add-experience{
        padding: 0px;
    }


    /*Petit bouton de fin Étudiant*/
    .little.button{
        margin: 0px;
        margin-top: 15px;
        width: 180px;
        padding: 8px 0px;
    }

    .visible-xs {
        display: none;
        margin-top: 0px;
    }

}

@media screen and (min-width: 1024px){
    .content-container{
        margin-left: 480px;
    }
}