/**CERCLE tableau de bord*/
/*20220429*/
/*media*/
@media all and (min-width:360px) and (max-width:1024px) {
    #body{width:100%;}
#navbar, #titre, #footer{min-width:100%; display:contents;}
#navbar p{margin:10px;}
#contain{width:100%; display:table-cell;}
.ligne img{border:5px solid #eee;}
}
/*standard*/
#body{
    max-width:1500px; font-family:arial, verdana; font-size:14px;
    background:#ccc;margin:0px auto;border:1px solid #000;}
/**header**/
#header{
    max-width:100%;text-transform :uppercase;
    position:relative; display: inline-block;
    background:#000;
    color:#fff;
}
#header img{max-width:100%; object-fit: contain;
    margin: auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    align-content: stretch;
    
}
#navbar{
float:right;width:30%;padding:10px;}
#titre{
width:70%;padding:10px;}
/**contain**/
#contain{
    width:80%; margin:50px auto; 
    padding:20px; border:1px solid #000;
    position:relative; 
    background:#eee;}
.ligne {
    width: 100%;
    margin: 10px auto;
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-wrap: wrap;
    align-content: stretch;
}
.ligne img {
    max-width: 15rem;
    max-height: 15rem;}
/** block**/
#block {
max-width: 100%;
    margin: 50px auto;
    padding: 20px;
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
}
    
#left, #right, #bas{
max-width: 100%;
    min-width: 95%;
    margin: 1vw;
    padding: 10px;
    color:#fff;
}
#left {background:#ed1e79;}
#right{background:#d10034; }
#bas{
    background: #000;}
/** footer**/
#footer{
    max-width:100%;text-transform :uppercase;
    position:relative; display: inline-block;
    background:#000;
    color:#fff;}
/**********ANNEXES*/
a {text-decoration:none; text-transform : uppercase;color:#81d742;word-spacing:5px;}
#header a:hover{color:#d10034;}
a:hover{color:#fff;}
#header a[target^="_blank"]:after, #block a[target^="_blank"]:after, #footer a[target^="_blank"]:after {padding:10px;content:"(+)";color:#fff;}
#header a:hover[target^="_blank"]:after, #block a:hover[target^="_blank"]:after, #footer a:hover[target^="_blank"]:after {content:"(go)";color:#d10034;}
/*****IMG*/
a img:hover{opacity:0.5;}
object {
    /* position: absolute; */
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    overflow: hidden;
}
/*****FONTS*/
h1 {text-transform :uppercase;font-size :3rem;}
h2 {text-transform :uppercase;font-size :2.2rem; text-align : center;}
h3 {text-transform :uppercase;font-size :1.4rem;border-left: 15px solid #000;
    padding-left: 15px;}
li {line-height: 18pt;}