@import url(https://fonts.googleapis.com/css?family=Merriweather);
@media all and (max-width: 800px){
    main {
        width: 100%;
    }
    section {
        width: 100%;
        flex-direction: column;
    }
    article {
        width: 100%;
        margin-top: 2px;
        margin-bottom: 2px;
    }

}

@media all and (min-width: 801px){
    main {
        width: 800px;
        margin: auto;
    }
    section {
        width: 100%;
    }
    article {
        width: 380px;
    }

}

* , ::before, ::after , body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family:  Merriweather;
    min-height: 90vh;

}
nav {
    color: #FFFFFF;
    padding: 5px;
    background-color: #9900CC;
}
nav a , footer a {
    font-weight: bold;
    color: #FFFFFF;
    text-decoration: none;
}

main {
    min-height: 85vh;
    padding: 5px;

}
section {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
article {
    background-color: linen;
    border: #000000 1px solid;
    padding: 5px;
}

footer {
    padding: 10px;
    text-align: center;
    background-color: #9900CC;
    color: #FFFFFF;
}
fieldset {
    width: 330px;
    margin: auto;
    padding: 5px;
    background-color: ivory;
    border: #000000 1px solid;
}
fieldset label, fieldset input, fieldset textarea, fieldset select {
    display: block;
    width: 100%;
    margin: auto;
    padding: 5px;
}
fieldset textarea {
    height: 150px;
    overflow-y: auto;
    resize: none;
}

fieldset button , fieldset input[type=file]::file-selector-button {
    display: block;
    background-image: linear-gradient(to bottom, #330066, #0060BF);
    color: #CCFFFF;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

input[type=file]::file-selector-button {
    background-image: linear-gradient(to bottom, #330066, #0060BF);
    color: #CCFFFF;
    padding: 5px;
    margin-top: 5px;
    margin-bottom: 5px;
}

input , select , textarea {
    border: #000000 1px solid;
}
input:hover , select:hover {
    background-color: #FFFFCC;
}
input:valid , select:valid {
   background-color: #99FF66;
}


li {
    list-style: none;
}


/*class*/

.msg-success {
    width: 100%;
    background-color: #99FF00;
    color: #006600;
    padding: 5px;
}
.msg-danger {
    width: 100%;
    background-color: #FF9999;
    color: #990000;
    padding: 5px;
}
.msg-info {
    width: 100%;
    background-color: #99CCFF;
    color: #000099;
    padding: 5px;
}
.msg-alert {
    width: 100%;
    background-color: #FFFF99;
    color: #FF6600;
    padding: 5px;
}
.msg-ok {
    color: #006600;
    font-size: small;
}
.msg-ok:before {
    content : url(images/ok.png);
    padding: 2px;
    display: inline-block;
}

.msg-ko {
    color: #990000;
    font-size: small;
}
.msg-ko:before {
    content : url(images/ko.png);
    padding: 2px;
    display: inline-block;
}
.icons {
    height: 20px;
    widows: 20px;
}
.delete {
    background-color: transparent;
    border: none;
    background-image: url(images/delete.png);
    width: 15px;
    height: 15px;
    cursor: pointer;
}
.apercu-photo{
    height: 100px;
    width: auto;

}
.inline-block {
    display: inline-block;
}
.photos {
    height: 150px;
    cursor: pointer;
}
.profil {
    margin: 5px;
    padding: 5px;
    background-color: #FFFFFF;
}