@import url("reset.css")screen;
@import url("header.css")screen;
@import url("footer.css")screen;
@import url("typo.css")screen;
@import url("card.css")screen;

:root{
    --primary:#1a237e;
    --light:#534bae;
    --dark:#000051;
    --secondary:white;
    --fondbody:#f0f0f0;
    --fondmain:white;
    --colortext:white;
    --colorlien:#7e1a23;
    --moyenclair:#A3A7CB;
    --tresclair:#BABDD8;
    --trestresclair:#D1D3E5;
    --superclair:#E8E9F2;
    --colorbout:#474f97;
    --colortriadique:#7e1a23;
    --colortriadique2:#237E1A;
    --colorcomplem:#E5DC81;
}

html{
    font-size: 100%;
}

body{  
    font-family:Verdana,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    background-color: var(--fondbody);
}


#container{
    height:auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
    padding: 0;
    margin: 0;   
}


#header{
    height: auto;
    margin-top: -3px;
    background-color: var(--dark);
}


#main{
   height: auto;
   flex:1 0 auto; 
}

#content-main{
    width: 90%;
    max-width:1300px;
    height:auto;
    margin:0 auto 1rem  auto;
    padding:1rem;
    background-color: var(--fondmain);
/*    border:1px solid var(--superclair); */
/*    box-shadow: 1px 1px 5px #0c1103;*/
}


/* Espace */
.espa{ 
    width:100%;
    clear:both;
}

.espa2{
    height:5em;
    clear:both;
}

.espa3{
    margin-bottom:2em;
    clear:both;
}

/* trait */


/* Footer */

#footer{
   height: auto;
   margin-bottom: 10px;
   background-color:var(--tresclair);  
}

/*traitement des images*/

.respons-img{
    max-width: 100%;
    height: auto;
}

/* messages erreurs et succès */ 
 
.affiche-message-error{
    background-color:rosybrown; 
    text-align: center;
    margin-bottom: 10px;
}

.affiche-message-error2{
    background-color:rosybrown; 
    margin-bottom: 10px;
    padding: 1rem;
}

.affiche-message-success{
    background-color:lightgreen; 
    text-align: center;
    margin-bottom: 10px;
}

.error-champ{
    color: red;
}

/* Compte nom activé */ 

#compte-false{
    width: 100%;
    display: flex;
    justify-content: center;
    background-color:rosybrown; 
    margin:10px 0 10px 0;
    padding: 10px;
}

#compte-false div{
    margin-right: 20px;
    color: white;
}



@media screen and (max-width:1024px){
    
    #content-main{
        width: 95%;
        max-width:1300px;
        height:auto;
        margin:1rem auto 1rem  auto;
        padding:0rem;
        background-color: var(--fondmain);
    }

       
}

@media screen and (max-width: 600px) {
       
    #content-main{
        width: 98%;
        max-width:1300px;
        height:auto;
        margin:1rem auto 1rem  auto;
        padding:0rem;
        background-color: var(--fondmain);
    }
    
}