* {
    margin: 0;
    box-sizing: border-box;
}

@media only screen and  (max-device-width: 600px) {

    /*éléments*/
    body {
        text-align: center;
    }

    header {
        text-align: center;
    }

    main {
        width: 800px;
        margin: auto;
        margin-top: 300px;
    }

    main.loginSuccess, main.logoutSuccess {
        margin-top: 100px;
        background-color: #b6ece4;
        padding: 50px;
    }

    H1 {
        color: #c0116f;
        font-family: "montserrat", sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 27pt;
    }

    label {
        color: #969696;
        font-size: 22pt;
        font-family: "montserrat", sans-serif;
        font-weight: 800;
        font-style: normal;
    }

    input {
        border: 2px solid #00cdaa;
        width: 800px;
        height: 80px;
        margin-top: 15px
    }

    /*Boites*/
    form div {
        text-align: left;

    }

    #BoiteIdentifiant, #BoiteMotdepasse, #BoiteSubmit {
        margin-top: 50px;
    }

    #BoiteLogo img {
        width: 432px;
    }

    #BoiteTitre, #BoiteCadenas {
        display: flex;
    }

    #BoiteTitre {
        flex-flow: wrap;
        align-items: center;
    }

    #BoiteCadenas img {
        width: 48px;
        margin-right: 20px;
    }

    #BoiteSubmit input {
        background-color: #c0116f;
    }

    #BoiteSubmit input {
        border: none;
        color: #ffffff;
        font-family: "montserrat", sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 22pt;
    }

    #BoiteTexte {
        text-align: left;
        font-size: 16pt;
        font-family: "montserrat", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #969696;
        margin-top: 30px;
    }
}

/*********************************************************************************/

@media only screen and  (min-device-width: 600px) {
    body {
        text-align: center;
    }

    header {
        text-align: center;
    }

    main {
        width: 800px;
        margin: 100px auto auto;
    }

    main.loginSuccess, main.logoutSuccess {
        margin-top: 100px;
        background-color: #b6ece4;
        padding: 50px;
    }

    H1 {
        color: #c0116f;
        font-family: "montserrat", sans-serif;
        font-weight: 900;
        font-style: normal;
        font-size: 20pt;
    }

    H1.loginSuccess, H1.logoutSuccess {
        font-size: 30pt;
    }

    label {
        color: #969696;
        font-size: 18pt;
        font-family: "montserrat", sans-serif;
        font-weight: 800;
        font-style: normal;
    }

    input {
        border: 2px solid #00cdaa;
        width: 800px;
        height: 50px;
        margin-top: 15px
    }

    /*Boites*/
    form div {
        text-align: left;

    }

    #BoiteIdentifiant, #BoiteMotdepasse, #BoiteSubmit {
        margin-top: 30px;
    }

    #BoiteLogo img {
        width: 400px;
    }

    #BoiteTitre, #BoiteCadenas {
        display: flex;
    }

    #BoiteTitre {
        flex-flow: wrap;
        align-items: center;
    }

    #BoiteCadenas img {
        width: 30px;
        margin-right: 20px;
    }

    #BoiteSubmit input {
        background-color: #c0116f;
    }

    #BoiteSubmit input {
        border: none;
        color: #ffffff;
        font-family: "montserrat", sans-serif;
        font-weight: 800;
        font-style: normal;
        font-size: 18pt;
    }

    #BoiteTexte {
        text-align: left;
        font-size: 16pt;
        font-family: "montserrat", sans-serif;
        font-weight: 700;
        font-style: normal;
        color: #969696;
        margin-top: 30px;
    }

    #BoiteTexte.loginSuccess p {
        margin-top: 30px;
    }
}