body {
    margin: 0;
}
header {
    background-color: #D7CCC8;
    border-bottom: 1px solid #B766F7;
    text-align: center;
    position :sticky;
    top:0;
}
.clearboth {
    clear: both;
}
#homenav {
    float: left;
}
#profilenav {
    float: right;
}
#sitenav {
    display: inline-block;
}
#homenav > a, #profilenav > a, #sitenav > div > a {
    display: inline-block;
    padding: 0.5em;
    /*border-left: 2px solid #DDD;*/
    border-right: 1px solid #B766F7;
}
#homenav > a, #profilenav > a, #sitenav > div {
    float: left;
}
#homenav > a:hover, #profilenav > a:hover, #sitenav > div > a:hover {
    background-color: #B766F7;
}
#homenav > a:first-child, #profilenav > a:first-child, #sitenav > div > a:first-child {
    border-left: 1px solid #B766F7;
}
.hovermenu {
    position: relative;
}
.submenu {
    display: none;
    visibility: hidden;
    position: absolute;
    top : 34px;
    background-color: #D7CCC8;
    
    border: 1px solid #B766F7;
    border-top-width : 0;
}
.submenu a{
      display: inline-block;
    padding: 0.5em;
    /*border-left: 2px solid #DDD;*/
    border-right: 1px solid #B766F7;
}
.submenu a :hover{
    background-color: #D7CCC8;
}
.hovermenu:hover .submenu {
    display: block;
    visibility: visible;
}


/*FOOTER*/

footer img{
    width :30px;
    height :30px;
}
footer {
    background-color: #D7CCC8;
    padding: 1em;
    text-align: center;
    margin:0;
    bottom:0;
    right:0;
    left:0;
    position:fixed;
}

/*Article*/

h1{
    text-align :center;
}
article {
    border: 2px solid #DDD;
    width: 80%;
    margin: auto;
}

article img {
     float: left;
     max-width: 256px;
     max-height: 256px;
}

article #imgdiv {
    float: left;
    width: 256px;
    height: 256px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
.align-right {
    text-align: right;
}

.cta {
    background-color: #CD6155;
    border: 2px solid #C0392B;
    padding: 8px;
    border-radius: 4px;
    margin: 8px;
    color: white;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s, color 0.3s;
    display: inline-block;
}

.cta:hover {
    background-color: #FFFFFF;
    color: #CD6155;
}



/* Formulaires*/

body{
    background-color: #FFFFFF;
    margin : 0;
}
form{
    background-color: #FFF;
    border : 2px solid #DDD;
    max-width : 50%;
    margin :50px auto;
}
form>div{
   margin :8px;
}
form > div >label{
    min-width :200px;
    display : inline-block;
}
form > div > input{
    border-top-width : 0 !important;
    border-left-width : 0 !important;
    border-right-width : 0 !important;
}
form > button {
    width: 100%;
}

form > button:hover {
    cursor: pointer;
}