html
{
    width: 100%;
    background-image:url("img/fond.jpg");
    background-attachment: fixed;
    background-repeat: repeat;
    background-size: cover;
}

header
{
    flex-direction: row;
    display: flex;
    flex-wrap: wrap;
}

p.compte
{
    font-size: 20px;
    margin-left: 75%;
}

p.compte2
{
    font-size: 20px;
    margin-left: 85%;
}

img.titreimg
{
    padding-left: 9.5%;
    padding-top: 1%;
}

img.logo
{
    width: 11%;
    margin-top: 0%;
    margin-left: 3.2%;
    border: 3px solid;
    border-color: black;
}

body
{
    background: linear-gradient(to bottom, rgba(32, 11, 110, 0.8),70%, rgba(109, 22, 190, 0.8));
    margin-left: 12%;
    margin-right: 12%;
    margin-top: 3%;
    border: 4px solid;
    border-color: black;
}

main
{
    color:rgb(194, 173, 233);
    text-align: center;
    font-family: Arial, sans-serif;
}




div.container0
{
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 25px;
}

img.pochette0
{
    width: 300px;
    padding-bottom: 10%;
}

img.pochette0:hover 
{
    width:400px;
}




div.main
{
    color:rgb(132, 47, 211);
    font-size: 35px;
    text-shadow: rgb(40, 68, 221) 1px 0 10px;
    padding-top: 2%;
    display: grid;
    grid-template-columns: 0.98fr 1fr;
    text-align: center;
    align-items: center;
}

img.logo2
{
    width: 20%;
    margin-top: -7%;
    margin-left: 68%;
    border: 3px solid;
    border-color: black;
}

div.container 
{
    text-align: center;
    display: grid;
    grid-template-columns: 0.4fr 1.1fr;
}

img.pochette
{
    width: 150%;
    padding-top: 6%;
    padding-left: 20%;
}

div.resume
{
    font-size: 30px;
    padding-left: 30%;
    padding-top: 8%;
    padding-right: 5%;
}


div.detail
{
    font-size: 30px;
    padding-left: 6%;
    padding-top: 2%;
} 

p.titredetail
{
    color:rgb(194, 173, 233); 
    font-family: Arial, sans-serif;;
    font-size: 38px;
}

img.formulaire
{
    width: 15%;
    margin-left: 8%;
    margin-top: 3%;
    border: 3px solid;
    border-color: black;
}


p.footer
{
    font-size: 20px;
    text-align: right;
    padding-right: 2%;
}






label
{
    color:rgb(194, 173, 233); 
    font-family: Arial, sans-serif;;
    font-size: 20px;
    margin-left: 20%;
}

input
{
    border: 3px solid;
    border-color: black;
    font-size: 20px;
}

textarea
{
    border: 3px solid;
    border-color: black;
}

p.login1
{
    margin-left: 13%;
}

p.login2
{
    margin-left: 5.3%;
}

p.login3
{
    margin-left: 2.25%;
}

p.login4
{
    margin-left: 13.7%;
}

button
{
    margin-top: 2%;
    margin-left: 45%;
    border: 3px solid;
    border-color: black;
    font-size: 20px;
    color:rgb(32, 11, 110); 
}

img.logo3
{
    width: 11%;
    margin-top: 0%;
    margin-left: 3.2%;
    border: 3px solid;
    border-color: black;
}

p.titreform
{
    color:rgb(114, 78, 180); 
    font-family: Arial, sans-serif;
    font-size: 25px;
    margin-left: 39.5%;
    font-weight: bold;
}

p.titreform2
{
    color:rgb(114, 78, 180); 
    font-family: Arial, sans-serif;
    font-size: 25px;
    margin-left: 35%;
    font-weight: bold;
}

p.reponseform
{
    color:rgb(0, 0, 0); 
    font-family: Arial, sans-serif;
    font-size: 20px;
    margin-left: 33%;
}

img.logo4
{
    width: 11%;
    margin-top: 2.5%;
    margin-left: 3%;
    border: 3px solid;
    border-color: black;
}

div.commentaire
{
    background-color: rgb(133, 71, 192);
    border: 3px solid;
    border-color: rgb(0, 0, 0);
    margin-right: 6%;
}

p.uti
{
    margin-left: 2%;
    font-family: Arial, sans-serif;
    font-weight: bold;
}

p.com
{
    margin-left: 2%;
    font-size: 26px;
}

p.datecom
{
    margin-left: 2%;
    font-size: 18px;
}

p.titreform3
{
    color:rgb(114, 78, 180); 
    font-family: Arial, sans-serif;
    font-size: 36px;
    margin-left: 40%;
    margin-top: -8%;
    font-weight: bold;
}

p.reponseform2
{
    color:rgb(194, 173, 233); 
    font-family: Arial, sans-serif;
    font-size: 20px;
    margin-left: 33%;
}

button {
    display: inline-block;
    padding: 15px 25px;
    font-size: 20px;
    cursor: pointer;
    text-decoration: none;
    outline: none;
    color: #fff;
    background-color: #132266;
    border: none;
    border-radius: 15px;
    box-shadow: 0 9px rgb(255, 255, 255);
    margin-left: 43.3%;
}
  
button:hover {background-color: #3759a3}
  
button:active {
    background-color: #3759a3;
    box-shadow: 0 5px rgb(255, 255, 255);
    transform: translateY(4px);
}

img.pochetter{
    width: 180px;
    padding-bottom: 10%;
    margin-top: 10%;
}

p.pr{
    margin-top: 20%;
    color:rgb(194, 173, 233); 
    font-family: Arial, sans-serif;
    font-size: 30px;
}

p.dater{
    font-size: 24px;
    margin-top: 25%;
}

div.r{
    text-align: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    font-size: 25px;
    border: 5px solid;
    border-color: #08123f;
    margin-left: 5%;
    margin-right: 5%;
    margin-top: 2%;
}

p.reponseform3
{
    color:rgb(194, 173, 233); 
    font-family: Arial, sans-serif;
    font-size: 20px;
    text-align: center;
}

p.titreform4
{
    color:rgb(114, 78, 180); 
    font-family: Arial, sans-serif;
    font-size: 36px;
    font-weight: bold;
    text-align: center;
}

input.verifinput{
    width:40px;
}

u{
    font-weight: bold;
    color: #08123f;
    margin-left: 3%;
    text-decoration: none;
}

form.formverif{
    margin-left: -25%;
}