:root {
    --textColor: white;
    --textHoverColor: #b9b4b9;
    /*preview, infoBox,*/
    --color1: #433443;
    --color1Hover: #523f52;
    --color1Active: rgb(75, 57, 75);

    --colorButton: #534253;
    --colorButtonHover: #523f52;
    --colorButtonActive: #3b2d3b;
    /* header + nav*/
    --color2: #312631;
    /*body + contenant*/
    --color3: #221b22;

    --colorThead: #332833;
    --colorTd: #837a83;
    --colorFooter: #161116;
    
}

body{
    background-color: var(--color3);
}
#contenant{
    top: 0px;
    left: 0px;
    position: absolute;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr 8fr 1fr;
    margin: 0 auto;
    grid-template-areas:
     "header"
     "nav"
     "main "
     "footer";
    justify-content:space-evenly;
    background-color: var(--color3);
 }
@media screen and (min-width: 760px) {
    #contenant{
       display: grid;
       grid-template-columns: 10fr;
       grid-template-rows: 1fr 0.5fr 12fr;
       grid-template-areas:
    	"header  header"
        "nav     nav   "
    	"main     main "
    	"footer footer";
        justify-content:space-evenly;
    }
}
main{
    margin: 0 auto;
    width: 100%;
    height: 100%;
    color: var(--textColor);
}
header{
    grid-area: header;
    color: var(--textColor);
    background-color: VAR(--color2);
    font-family: "Motiva Sans", Sans-serif;
    width: 100%;
}
header button, header input[type="button"]{
    margin-right: 10px;
    margin-left: 5px;
}
.main-title{
    color: var(--textColor);
    text-decoration: none;
}
header span{
    text-align: center;
    margin-top:25px;
    float:right;
}
header H1{
    float: left;
    margin-left: 10px;
}
footer{
    grid-area: footer;
    background-color: VAR(--colorFooter);
    border-radius: 4px;
    color: var(--textColor);
    text-align: center;
}
section{
    margin: 10px;
}
nav{
    grid-area: nav;
    background-color: VAR(--color2);
    font-family: "Motiva Sans", Sans-serif;
    font-size: 19px;
    padding-top: 5px;
    padding-bottom: 5px;
    display: flex;
    flex-direction: row;
    justify-content:  space-between;
    /*text-align: center;*/
}
nav a{
    color: var(--textColor);
    text-decoration: none;
    margin-right: 10px;
}
nav a:hover{
    color: var(--textHoverColor)

}

.erreur{
    color: var(--textColor);
    text-shadow: 1px 1px 2px black;
    background-color: red;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
    border-radius: 10px;
}
.erreur:empty
{
    display:none;/*Aussi non, il s'affiche avec le padding*/
}
button,input[type="button"]{
    background-color: VAR(--colorButton);
    color: var(--textColor);
    padding: 10px;
    text-align: center;
    border: 1px solid #5f5f5f; 
    text-shadow: 0 0 8px #000000;
    border-radius: 4px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}
button:hover,input[type="button"]:hover{
    background-color: var(--colorButtonHover);
}
button:active,input[type="button"]:active{
    background-color: var(--colorButtonActive);
}
header,header h1{
    height: 75px;
}

section h2{
    text-align: center;
}
section figure{
    display: inline-block;
}
.galerie{
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.figurePreview img{
    object-fit: contain;
    max-width: 200px;
    max-height: 150px;
}
.imgPreview{
    width: 100px;
    height: 100px;
}
.figurePreview{
    background: VAR(--color1);
    border-radius: 10px;
    padding: 1px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    height: auto;
    width: 210px;
    max-height: 300px;
    padding: 10px;
    text-align: center;
    height: 220px;
    transition: 0.5s;
}
.galerie a{
    text-decoration: none;
    color: var(--textColor);
}
.triage{
    margin: 0 auto;
    height: auto;
    width: 40rem;
    padding-bottom: 10px;
    text-align: center;
    background-color: VAR(--color1);
    border-radius: 10px;
}
.triage label{
    margin-right: 5px;
}
.figurePreview:hover{
    background: var(--color1Hover);
    transition: 0.5s;
}
.figurePreview:active{
    background: var(--color1Active);
}
.aug{
    max-width: 600px;
    max-height: 450px;
    object-fit: contain;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.img_upload{
    margin-left: auto;
    margin-right: auto;
    display: block;
    max-height: 200px;
    max-width: 400px;
}

.figDiv{
    word-wrap: break-word;
}
.figDiv h4{
    text-decoration: underline;
    display: block;
    margin: 0px;
    margin-bottom: 10px;
}
.message{
    color: rgb(0, 255, 0);
}
textarea{
    resize:none;
    font-size: 15px;
}
.conn_comment{
    color: #c0c0c0;
    text-align: center;

}
.conn_comment a{
    text-decoration: none;
    color: #c0c0c0;
}
.conn_comment a:hover{
    color: #c7c5c5;
}
.conn_comment a:active{
    color: #adadad;
}
.commentaire{
    font-size: 15px;
    word-wrap: break-word;
    padding: 10px;
}

.contenant_comment{
    background-color:VAR(--color1);
    border-radius: 10px;
    box-shadow:0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    margin: 0 auto;
    width: 50rem;
   
}
.contenant_comment b{
    color:#dddddd;
    display: block;
}
.contenant_comment h2{
    text-align: left;
}


.capsPreview{
    width: 20px;
    height: 20px;
    position: relative;
    top: 8px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 3px;
    padding-left: 3px;
}

.infoBox{
    text-align: center;
    background-color: VAR(--color1);
    border-radius: 10px;
    width: 50rem;
    margin: auto;
}

thead tr{
    background-color: VAR(--colorThead);
}

td,th{
    padding: 10px;
    border: 1px solid black;
}
td{
    background-color: VAR(--colorTd);
}

.tabDonnees{
    height: 15rem;
    overflow: auto;
}

.tabDonnees table{
    margin: auto;
}

.buttonCaps{
    width: 200px !important; 
}

.infoConfirmation{
    width: 20rem;
    margin: auto;
    background-color: #503e50;
    text-align: left;
}

.lienProfil{
    color: var(--textColor);
    text-decoration: none;
}

.lienProfil:hover{
    color: #e6e6e6;

}

.lienProfil:active{
    color: var(--textHoverColor)

}

#contenantEvaluation{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
    grid-template-areas: "etoiles" "nbEtoiles";
    justify-content:space-evenly;
    text-align: left;
    width: 13rem;
    margin: auto;
 }
.nbEtoiles{
    text-align: right;
}
.nbEtoiles p{
    padding-bottom: 3.6px;

}

.smallInfoBox{
    text-align: center;
    background-color: VAR(--color1);
    border-radius: 10px;
    width: 39.5rem;
    margin: auto;
}

.infoJoueur{
    color: var(--textColor);
    margin-right: 10px;
}
.navLinks{
    margin-left: 10px;
}