root::selection{background-color:#7B4A21; color:white }
@font-face {
  	font-family: 'nunitogras';
  	src: url('nunito-bolditalic.ttf');
}
body{
    font-family: sans-serif;
    vertical-align: text-top;    
	/*background: url("images/image.jpg");*/
	background : repeating-linear-gradient(-45deg, #eee 0, #eee 16px, #A0ADCC  17px, #eee 18px)
}
h1, h2, h3, h4, h5{
    color: #7C4D25;
}
h1{
    margin: 0.4em 0.2em;
    font-family: 'nunitogras', sans-serif;
    text-shadow: 1px 2px 4px #d2bc8f;
}
h2 {font-size:1.35em}
h3 {font-size:1.10em}
h4 {font-size:1em}
table{
    border-collapse: collapse;
}
td, th{
    border: 1px solid #ccc;
    padding: 0.2em;
}
sup{
    position:relative;
    top:-0.25em;
    vertical-align:top;
    font-size:0.75em;
}

/* menu */
#nav{
    display:block;
    background-color:#0E71B4;
    margin: 0 0 0.5em 0;
    padding:0.5em 1em;
    color:white;
    display:flex;
    flex-wrap:wrap;
    justify-content:space-around;
}
#nav a { padding:0 0.5em; text-decoration-style:dotted}
#nav a, #nav .textess {
    background-color: inherit;
    white-space: nowrap;
    font-weight: bold;
    color: inherit;
    position: relative;
    line-height: 1.8em;
    transition: all 0.5s;
}
.textess{cursor: default}
#nav a:hover{ 
    background-color: #29B0E0;
    transition: all 0.1s;
}
#nav a:active{background-color:#A9D1EA}
#nav a.cettepage{ background-color:#A9D1EA }
.contentss{background-color: inherit; position: relative;}
.ssmenu{
    position: absolute;
    top: 2em; left: -0.2em;
    max-height: 0;
    min-width: 100%;
    overflow: hidden;
    z-index:2;
    background-color: #28ADDE;
    line-height: 1.8em;
    border-top : 0;
    transition: max-height 0.5s
}
.ssmenu a{
    padding: 0 0.3em;
    transition: max-height 0.5s;
}
.ssmenu a:hover{padding-left:1.5em;}
.contentss:hover .ssmenu{
    max-height: 20em;
    transition: max-height 1s
}
#nav2.nav2std {
    position: fixed;
    z-index:5;
    top : 49px;
    left: 11px;
    transform: scaleX(0);
    transform-origin: left;
    margin-top: 0;
    background-color: #7B4A21;
    color: white;
    padding: 0.5em;
    transition: all 0.5s
}
#nav2.fullopen { transform: scaleX(1); }
#nav2 b {
    font-style: italic;
    font-size: 1.1em;
    color: #E8CFBB;
}
#nav2 a.cettepage { color: grey}
.textess {font-style: italic;}
#nav2 a {color: white; margin-bottom: 0.4em; display: inline-block;}
#nav2 li {list-style: none; line-height: 1.8em}
#nav2 ul {margin-left: -1.2em}
#burger {
    display: none;
    float:left;
    padding: 0 4px;
    background-color: #7B4A21;
    position: fixed;
    top: 11px;
    height: 38px;
    z-index:2;
}
.open #painhaut, .open #steack, .open #painbas {background-color: orange;}
.open #painhaut { transform: translateY(8px) rotate(45deg)}
.open #painbas { transform: translateY(-8px) rotate(-45deg) }
.open #steack { opacity: 0}
#painhaut, #steack, #painbas {
    background-color: white ;
    height:4px;
    margin:2px;
    border-radius:3px; 
    width:30px;
    transition: all 0.5s;
}
blockquote{
    border-left:3px solid orange;
    padding-left:1em;
    margin-left:2em;
}

#content img{
    border: 3px solid white;
    box-shadow: 3px 4px 9px #333;
    margin:6px;
}
.galerie img {box-shadow: none !important; padding:3px; border: 1px solid grey !important;}
#principal, #rubriques{
    float:left;
    box-sizing:border-box;
    max-width:98%
}

#principal{
    width:70%;
	
    text-align:justify;
	/*background-image: url("images/image.jpg");*/
}
#rubriques{
    width:30%;
}
.rubrique{
    margin:0.4em 0.4em 0.4em 0;
    padding:0.4em;
    background:linear-gradient(300deg, #fff, #e8e8e8) #eee;
    border-radius:0.6em;
    box-shadow:inset 2px 3px 2px #fff, inset -2px -3px 2px #dfdfdf;
    border:1px solid #cfcfcf;
}
.rubrique, .actu{box-shadow:inset 2px 3px 2px #fff, inset -2px -3px 2px #eee6df;}
.rubrique h3 {
    cursor:pointer;
    margin:0
}
.titrubrique {
    background: #e4e4e4;
    margin-bottom:0.3em;
    border-radius:5px;
    padding:0.3em 0 0.3em 0;
    border:1px solid #ddd;
}
.ctnrubric {
    background-color: #eee;
    scrollbar-width:thin;
    padding-left:3px;
    max-height:0em;
    overflow:hidden;
    transition:all 0.5s;
}
.rubopen {
    max-height:20em;
    overflow:auto;
}
.titrubrique h3 b {
    display: inline-block;
}
.uninvert{ transform: rotate(0deg); transition: all 0.5s; }
.invert{ transform: rotate(180deg); transition: all 0.5s; }
form{
    position: relative;
    margin:0.8em;
    padding :0.5em;
    background:linear-gradient(#E7EEF3, #B3B6B7); 
    border-radius:1em;
}
form label{
    display:inline-block;
    margin:0.3em 0;
    text-align:right;
    margin-right:0.7em;
}
input[type=text], input[type=password],textarea,select{
    font:inherit;
    padding:0.2em;
    border-radius:0.2em;
    box-shadow:inset 4px 4px 8px #aaa;
    border:1px solid grey;
}
input[type=submit], input[type=button]{font-weight:bold; padding:0.3em}
.cent {text-align:center}
.actu {
    margin-top:1em;
    background:linear-gradient(315deg, #f6f6f6 0%, #f0f0f0 100%) #eee;
    border:1px solid #ddd;
}
.titreactu {
    background:#e4e4e4;
    padding:0.5em;
    border-bottom:1px solid #ccc;
    border-right:none;
    margin:3px
}
.titreactu h2{
    display:inline-block;
    font-style:italic;
    text-shadow:0 0 6px white;
    margin:0.3em;
}
.titreimg {
    position:relative;
    top:-0.4em;
    font-style:italic;
}
.contenuactu {
    padding :0 0.5em 0.5em 0.5em;
}
.ok {color: green}
.no {color: red}
.msg{
    font-weight:bold;
    border:2px solid;
    padding:1em;
}
.deconnect{margin:3em}
.contenuactu span{
    display:inline-block;
    float:left;
    margin-right:1em;
    position:relative;
}
.marker {background-color: Yellow;}
.contenuactu span span{
    position:absolute;
    left:2em;
    top:1em;
    padding:0.2em 0.5em;
    background-color:#fff;
    border:1px solid #aaa;
}
.contenuactu figure { position: relative;}
.contenuactu figcaption {
    position: absolute; top:-0.6em; left: 2em;
    display: inline-block;
    padding: 0.3em;
    background-color: white;
    border: 1px solid silver;
}
.destinataire {
    color:maroon;
    position:relative;
    top:0.5em
}
.ssbordures{
    background: none;
    border: none;
    font-weight: bold;
    font-style: italic;
    color:#a68b74
}
#content{
    max-width:1000px;
    border-radius:1em;
    box-shadow:0 0 10px grey;
    padding:0.5em;
    margin:auto;
    background-color: white;
}
#banner{
    height:20vw;
    max-height:200px;
    background:url(images/logotrans15.png) center no-repeat #EAF7FF;
    background-size:contain;
    transition:background-color 1s;
    border-radius:0.7em 0.7em  0 0;
    position: relative;
}
#banner:hover{
    background-color:#0672B4;
    transition: background-color 0.5s;
}
#marquee{
    overflow: hidden;
    position: relative;
    line-height:2em;
    top: calc(100% - 2.1em);}
#marqueespan{
    white-space:nowrap;
    display:inline-block;
    padding-left:100%;
	font-weight:bold;
	font-size:1.6em;
    color:red;
    animation:linear accross 25s 1s infinite;
}
#marquee span span {
    margin-right : 15em;
    font-style: italic
}
#marquee a {margin-right : 15em; color: red; text-decoration-style:dotted }
#marquee a:hover {color: #EAF7FF; text-shadow: 1px 1px #000 }
@keyframes accross {
    0% {transform:translate(0, 0);}
    100%{transform:translate(-100%, 0);}
}
#retouradmin{
    display:inline-block;
    position:absolute;
    right:1em; top:1em;
    z-index:3;
    padding:2em;
    background-color:yellow;
    border-radius:50%;
    box-shadow:0 0 15px orange;
}
@media (max-width: 1030px){
    #content{box-shadow:none; padding:2px}
}
@media (max-width: 60em){
    #content img, iframe {max-width:95%;}
    #content{
        padding: 3px 3px 0 3px;
    }
    #nav {display: none;}
    #burger {
        display:flex;
        justify-content:center;
        flex-direction:column;
    }
    #principal{width:65%}
    #rubriques{width:35%}
}
@media (max-width: 50em){
    #principal, #rubriques {float:none; width:100%}
}
@media (max-width: 30em){
    #content img {
        border:none;
        box-shadow:none;
        max-width:99%
    }
    #principal h1, #principal h2, #principal h3 {text-align:left}
}