@import url('https://fonts.googleapis.com/css2?family=Roboto+Serif:wght@100;200;300;400;500;600;700;800&display=swap');

body {margin:0px; border:0px; padding:0px; line-height:18px; line-height: calc(16px + 1vw); height:100%; width:100%;
font-family: 'Roboto Serif', serif; font-weight:300; overflow:hidden} 

a {color:#f0F; }
a:hover {color:#0a0; background:#ddd}
a:active{color:green}
a, a:hover {text-decoration:none;}


h1 { font-size: calc(18px + 2.6vw); line-height: calc(25px + 2.6vw); text-align:center;  font-weight:bold; font-weight:400; color:#111;  }
h2 { font-size: calc(12px + 2vw);   line-height: calc(16px + 2vw);     text-align:center;  font-weight:bold; font-weight:400; color:#111; }
h3 { font-size: calc(8px + 1.7vw);  line-height: calc(14px + 1.8vw);  text-align:center;  font-weight:bold; font-weight:400; color:#222;   margin:0;}


h4 {font-size: calc(14px + 0.6vw); line-height: calc(18px + 1vw);  text-align:justify; font-weight:300;  color:#111;  text-indent:4%;  margin:0 0 10px 0;}
h5 {font-size: calc(12px + 0.5vw); line-height: calc(15px + 0.9vw);  text-align:left;    font-weight:300;  color:#222;   margin: 0 0 10px 0; }

h6 {font-size: calc(10px + 0.5vw); line-height: calc(14px + 0.9vw);  text-align:left;  font-weight:200;  color:#000;   margin: 0 0 10px 0; }
h6 a {color:#600; font-weight:300; text-align:left;  }
h6 a:hover {color:#282; }

.citation {font-size: calc(12px + 0.6vw); line-height: calc(15px + 0.9vw);  text-align:left; font-weight:300; color:#333; font-style:italic;  margin:0 0  0.9vw 15vw; }


@media only screen and (max-width: 440px) {
h4 {text-align:left}
}

 /****  ====  et==== ****/ 
 #boite {position:absolute; border:0px; top:0px; bottom:0px;  /**** iIMPORTANT.....ET.. sans spécifier height.....****/
 width:100%; margin-top:53px;  margin-bottom:45px; text-align:center; background:#FFF; overflow-x:hidden;  overflow-y:scroll; scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }   /**** scroll behavior ne marche pas avec safari - ca va avec .gohaut.....****/
#container {width:76%; margin : 0 12% 0 12% ; background:transparent}


header {position:fixed; left:0px; top:0px; width:100%;  height:42px; background:#EEE; color:#222; overflow:hidden; margin:0; border:0;} 
footer {position:fixed; bottom:0px; left:0px; background : #fff; ; color:#333; height:40px; width: 100%; overflow:hidden; border-top: 1px #DDD solid;}


.piedcentre {position:absolute; top:2px; height:30px; left:50%; width:460px; margin-left:-230px; text-align: center;  font-size:16px; font-weight:400; line-height :24px; display:inline; background:#fff; color:#222;} 

.somm {position:absolute; top:12px; height:16px; left:12px; width:auto; text-align: left; font-size: calc(11px + 0.5vw); font-weight:300; line-height :16px; display:inline; background:transparent; color:#222;} 
.somm a {color:#222; margin-left:10px } 
.somm a:hover {color:#000; margin-left:10px;  background:#2F2; } 

.hautG {position:absolute; margin:0px; height:30px; width:30px; left:50%; top:7px; margin-left :-60px; background:transparent;  -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.hautD {position:absolute; margin:0px; height:30px; width:30px; left:50%;  top:7px; margin-left :16px; background:transparent;  -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }

.hautG:hover {background-color:rgba(50,240,50,0.6);}
.hautD:hover {background-color:rgba(50,240,50,0.6);}

.hautG img {height:30px; width:30px; margin:0px; position :absolute; top:0px; left:0px}
.hautD img {height:30px; width:30px; margin:0px; position :absolute;  right:0px; top:0px;}


.titre {width: 40px;  height: 25px; position: absolute; top:8px; left:50%; margin-left: -29px ; text-align:center;  font-size: calc(12px + 0.5vw); line-height: calc(14px + 1vw);  color:#222; background:transparent }   /****  dans header.....****/
.ttx {font-size: calc(14px + 0.6vw); line-height: calc(16px + 1vw); }



.gauche {text-align:left;}
.droite {text-align:right;}
.centre {text-align:center;}



.gohaut  {position:absolute; right:25px; top:5px; background:#fFf; font-size: 10px; width:30px; height:30px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.gohaut:hover { background-color:rgba(50,240,50,0.8);}
.gohaut img {margin : 5px; height:20px; width:20px}