/* css pour reportages */

body { background-color: rgba(0, 0, 0, 0); padding: 0; margin:0 }
#reportages-liste a:link, a:visited, a:hover, a:active {  font-size: 12pt;  font-family: arial;  font-style: normal;  font-weight: normal;}
#reportages-liste a:link { color: #14e1f3;}
#reportages-liste a:visited { color: #fff200;}
#reportages-liste a:hover { color: #53ff88;}
#reportages-liste a:active { color: #ff7f27;}

/* MENU TOP*/ 
#menu-sur-bloc {margin:0; padding: 0; }
#all {margin:0 auto; width: 100%; text-align: center;}
#header {position: fixed; display: block; background-color: #242424; margin: 0; padding: 0; width: 100%; top: 0;}
#menu-bloc {padding: 0; margin:0 auto}
#logo { font-size: 18pt; background-color: #242424; white-space: nowrap; font-family: Segoe Script; font-style: italic; color: #cccccc; float: left; padding: 4px 10px 0px 10px;}
h2 {background-color: #242424;  font-size: 12pt; white-space: nowrap; font-family: arial; font-style: normal; font-weight: normal; color: #cccccc; float: left; margin: 0; padding: 15px 15px}
/* MENU TOP BOUTONS*/ 
#footer-bloc, #menu-bloc {display: inline-block; }
#footer-bloc ul, #header ul { list-style-type: none; margin: 0; padding: 0; overflow: hidden; background-color: #242424;}
#footer-bloc li, #header li { float: right; border-right: 1px solid #404040;}
#footer-bloc li a, #header li a {display: block; color: #cccccc; font-family: arial; font-size: 12pt; font-style: normal; font-weight: normal; text-align: center; padding: 15px 7px; text-decoration: none; }
#footer-bloc li a:hover, #header li a:hover {font-family: arial; font-size: 12pt; background: linear-gradient(#242424, #000103 );}
.onglet-active {font-family: arial; font-size: 12pt; background: linear-gradient(#242424, #000103 );}

/* FOOTER */  
.popup-liens-soc {position: fixed; z-index: 99999; top: 0;right: 0; bottom: 0;left: 0; background: rgba(36, 36, 36, 0); opacity:0;pointer-events: none;}
.popup-liens-soc:target {opacity:1;   pointer-events: auto;}
.popup-liens-soc > div {max-width: 350px;   position: relative;   margin: 20% auto; padding: 3px; border-radius: 6px; background: rgba(36, 36, 36, 1);}
.btn {color: #cccccc;font-size: 12pt;  font-family: arial;  font-style: normal;  font-weight: bold;text-decoration: none; text-align: right}
#footer-bloc .popup-open {color: #14e1f3;font-size: 12pt;  font-family: arial;  font-style: normal;  font-weight: normal;padding: 10px 5px 5px 5px;  margin:0;}
#footer-bloc li {padding: 0 0 5px 0;  margin:0 0 0 0; height: 28px}
#footer-bloc {display: inline-block; padding: 0 0 0 0; margin:0 0 0 0;}
#footer-sea { background-color: #242424; position: fixed; width: 100%; bottom: 0; margin:0; font-size: 12pt; padding: 0 0 0 0;}
.liens-soci {margin: 10px 10px 0 0; }
#copyright {font-size: 12pt; white-space: nowrap; font-family: arial; font-style: normal; color: #cccccc; float: left; padding: 10px 0px 0px 10px; margin: 0}
.x-fermer {color: #cccccc;font-size: 12pt;  font-family: arial;  font-style: normal;  font-weight: bold;text-decoration: none; text-align: right}
.cf {font-size: 12pt; margin: 0 auto; text-align: center}
#copyright a:link { color: #14e1f3;}

/* Menu gauche*/
#reportages-liste { display: block; margin: 70px 0 0 5px;}
#reportages-liste ul { list-style-type: none;    margin: 0;    padding: 0;    max-width: 300px;    background-color: rgba(0, 0, 0, 0);}
#reportages-liste li a { display: block;    color: #cccccc;    padding: 3px 3px;    text-decoration: none;}
#reportages-liste li a:hover { background: radial-gradient(circle, #505050, #000000);   color: #53ff88;}/* couleurs hover  bar puis text*/

/* iframe menu gauche*/
.reportages_menu {height: 2000px; width: 180px; border: none; } 
.scroll { overflow: auto;}
nav {float: left; width: 180px; height: 2000px; border: none; margin: 0; padding:0;}/*  dimensions iframe menu  */
div {border: none;  margin: 0; padding:0;}
section { margin: 0 0 0 180px; border: none; padding:0;}/* affichage droite faune*/

/*  reportage_menu.htm  */
.icones {width: 16px; height: 16px;}
h1 { margin-top: 100px; font-size: 30pt;  font-family: arial;  color: #53ff88;  font-style: italic;  font-weight: bold; line-height:100%} /* Titre  Faune */
h3 { margin: 60px 0 10px 10px; font-size: 14pt;  font-family: arial;  color: #53ff88;  font-style: italic;  font-weight: bold;} 

/*  reportages  */
p { text-align: center; } 
table { max-width: 1500px; height: 100%; margin: 0; padding: 4pt; line-height: 150%; font-family: arial; font-style: normal; font-weight: normal; font-size: 12pt; color: #cccccc;}
tr { text-align: center; }
td {padding: 4px; width:50%;}
.txt { max-width: 500px;  text-align: justify; font-size: 12pt;  font-family: arial;  color: #cccccc;  font-style: normal;  font-weight: normal; margin-left: auto; margin-right: auto;} /*  texte 4 paragraphes*/
.txtjpg { font-size: 12pt;  font-family: arial;  color: #53ff88;  font-style: normal;  font-weight: normal;  text-align: center; } /* texte sous les jpg*/
.imgh {width: 100%; max-width: 467px; height: auto; border:0; } /* jpg hauteur*/
.imgl {width: 100%; max-width: 700px; height: auto; border:0; } /* jpg largeur*/
#images li img { max-height: 100%;}/* clic jpg agrandissement*/

/* mq*/
@media only screen and (max-device-width: 500px) {
.reportages_menu {width: 100px; height: 2000px; } 
section { margin-left: 100px; }
nav {width: 100px; height: 2000px;} 
.txtjpg { font-size: 11pt;} 
.txt {font-size: 11pt; }
h1{font-family: arial; font-size: 13pt; margin-top: 70px;} 
h2{font-family: arial; font-size: 11pt; padding: 6px 8px;} 
h3{ font-size: 12pt;}
#header li a, #footer-bloc li a, #header li a:hover , #footer-bloc a:hover {font-size: 10pt;padding: 8px 5px; } 
#logo {font-size: 13pt; padding: 0px 5px; } 
#menu-bloc {padding: 0; margin:0; height: 32px;}
}

@media only screen and (max-device-width: 700px) and (min-device-width: 501px){
section { margin-left: 130px; }
.txtjpg { font-size: 12pt;} 
.txt {font-size: 11pt; }
.reportages_menu {width: 130px; height: 2000px; } nav {width: 130px; height: 2000px;} 
h1{ font-size: 17pt; margin-top: 85px;} 
h2{font-family: arial; font-size: 12pt; padding: 6px 8px;} 
#header li a, #footer-bloc li a, #header li a:hover , #footer-bloc a:hover {font-size: 12pt;padding: 8px 5px; } 
#logo {font-size: 15pt; padding: 0px 5px; } 
#menu-bloc {padding: 0; margin:0; height: 35px;}
}

@media only screen and (max-device-width: 1080px) and (min-device-width: 701px){
section { margin: 0 0 0 180px; border: none; padding:0;}
.txtjpg { font-size: 13pt;} 
.txt {font-size: 12pt; }
h1{font-family: arial; font-size: 20pt; margin-top: 90px; } 
h2{font-family: arial; font-size: 12pt; padding: 6px 8px;} 
#header li a, #footer-bloc li a, #header li a:hover , #footer-bloc a:hover {font-size: 12pt;padding: 8px 5px; } 
#logo {font-size: 15pt; padding: 0px 5px; } 
#menu-bloc {padding: 0; margin:0; height: 35px;}
}

@media only screen and (max-device-width: 1600px) and (min-device-width: 1081px) {
.menu-div { width: 100%; white-space: nowrap} h1{ font-size: 26pt; margin-top: 100px;}
}