body {
font-size:14px;
font-family:  Verdana,Arial,Helvetica,sans-serif;
background: #ddd url(https://www.piloter.org/images/fond.png) repeat-y 49% 0;
color: #333333;
margin:0;
padding:0;
}

div.conteneur {
 background: white;
 position : relative;
  margin : 0 auto;          
    padding : 0;
  text-align : left;
 
    width : 1008px;
   
 
    }
    
   
h1{font-family: Verdana,Arial, Helvetica, sans-serif;font-size:20px;color:#023666;margin-bottom:4px; border-bottom:0px solid #ccc; font-weight:bold}
h2{font-family: verdana,Arial,Helvetica,sans-serif;font-weight:normal;font-size:140%;margin-top:10px;text-decoration:none;margin-bottom:2px;color:#023666}
h3{font-family: Arial,Helvetica,sans-serif;font-weight:normal;font-size:120%;margin-top:10px;margin-left:0px;margin-bottom:0px;text-decoration:none;color:#023666}

li{list-style-image:url(/images/icones/pucepetitcarre.png);margin-left:0px}
 
.pucemusee{list-style-image:url(/images/musee.jpg);margin-left:0px}
.index{list-style-type: none;margin-left:-20px}
.ulinside{list-style-type: square;font-size:14px;color:#023666;list-style-position: inside;margin-left:-35px;}
.uloutside{list-style-type: square;font-size:14px;color:#023666;list-style-position: outside;margin:0 0 0 -35px;}

hr{border: 0px solid #023666;background:#023666;height:3px}
.hrvert {height: 3px;background:#73A829;}
.hrdotted {height: 0px;;background:#fff;border-bottom:1px dotted #ccc}
.hrfin{height:1px;color:#ccc;background:#ccc;border:0px;margin-top:0px;width:100%}
blockquote{background:url(images/citation.gif) no-repeat top left;padding:0 0 0 60px;min-height:50px;font-style: italic}
div.reculer { margin:0 0 0 -20px;}
div.reculerindex { margin:0 0 0 -40px;}
span {color: #333333;font-size:14px}

a{font-family: Verdana,Arial,sans-serif;font-size:14px;font-weight:normal;border-style:none;}
a:link{color:#000;text-decoration:none;background:transparent;text-decoration:none}
a:visited{color:#023666;text-decoration:none;background:transparent;border-style:none;}
a:active{color:#023666}
a:hover{color:#73A829;text-decoration:none;background:transparent;font-weight:normal}

.lien-exergue{font-size:140%;font-family:georgia, serif}
.li-exergue{border:4px solid #73A829;padding:10px 10px 0px 10px;margin-bottom:10px;font-size:105%;list-style-type:none;}
.div.exergue{font-size:140%;font-family:georgia, serif;border:2px solid #73A829;padding:10px 10px 0px 10px;margin-bottom:10px;font-size:105%;list-style-type:none;}
a img {border: none;}


/* PRINCIPALES DIVISIONS */


/* Division enseigne  en haut de l'écran */
div.enseigne{position:absolute;top:0px;left:0px;width:100%;height:120px;}

 /* div.pubhaut{position:absolute;top:10px;left:270px;text-align:center;height:100px;border: 1px solid #ccc;margin:0px;padding:0px} */

/*Division recherche*/
div.recherche{position:absolute;top:160px;left:662px;width:342px}

/*Division Titre*/
div.titre{}



.lettrine{font-size:3em;line-height:0.8em;float:left;width:0,9em;padding: 3px 3px 0px 0px;margin-top:10px;color:#023666}


/*Division twitter*/
div.twit{position:absolute;top:165px;left:685px;width:300pxheight:20px;text-align: left;background:#fff;padding-left:20px;padding-right:0px}
div.twitblog{position:absolute;top:155px;left:430px;width:270px;height:20px;text-align: left;background:#fff;padding-left:20px;padding-right:0px}

/*Division reseaux*/
div.res{position:absolute;top:190px;left:450px;height:20px;text-align: left;padding-left:0px;padding-right:0px;background:#ffffff;color:black}

/*Division chapeau*/
div.chapeau{font-family:arial;font-size:15px;color:#585858;font-weight:bold;border-top:3px solid #73A829;padding-top:10px}




/* division centrale  */
div.texte table{border:0px solid #333333; border-spacing:2px; width:100%;margin:0px;font-size:14px;
font-family: Verdana,Arial,helvetica,sans-serif;}
div.table tr {text-align: center}
div.texte th{padding : 3px 3px; border : 0px solid #ccc;background:white;text-align: center}
div.texte td{padding : 3px 3px; border : 0px solid #ccc; background: white;text-align: center}


/* division de droite */
div.droite{}
div.droite a{font-size:14px;}
div.droite a:link{color:#023666;text-decoration:none}
div.droite a:visited{color:#023666}
div.droite a:active{color:#023666}
div.droite a:hover{color:#73A829;text-decoration:none}
div.droite table{border:0px ; border-spacing:2px; width:100%;margin-left:0px;margin-right:5px;font-size:14px;
font-family: Verdana,Arial,helvetica,sans-serif;}
div.droite th{padding : 3px 3px; border : none;background:white;color:#023666;border-top:3px solid #73A829;border-bottom:1px solid #ccc}
div.droite td{padding : 3px 3px; border : none; background:white;text-align:center}
div.droiteblog{position:absolute;top:172px;left:680px;width:300px;height:1300px;font-size:14px;
color:#333333;margin : 1em;text-align:left}
div.droite li{list-style-image:url(/images/icones/pucepetitcarre.png);margin-left:0px}

div.encadre{font-family:14px;color:#333333;background:white;border:1px solid #ccc;padding:0.5em}

div.photo{border:0px solid #ccc;text-align:center;padding:10px;margin:10px;font-size:14px;font-weight:bold}
div.photodroite{border:0px solid #ccc;float:right;text-align:center;padding:0px;margin-top:5px;margin-left:0px;font-size:12px;font-weight:bold}
div.photogauche {border:0px solid #ccc;float:left;text-align:center;padding:5px 5px 0px 0px;margin:0px;font-size:12px;font-weight:bold}

div.plus{float:right;margin-top:10px; padding:}
div.plus a{font-size:15px;font-weight:}
div.plus a:link{color:#023666;text-decoration:none}
div.plus a:visited{color:#023666;background:#ccc}
div.plus a:active{color:#023666}
div.plus a:hover{color:#990000;background:#ccc;text-decoration:none;}

div.guides{text-align:center;}
div.guides a {}
div.guides a:link{color:#023666;text-decoration:none;font-weight:normal}
div.guides a:visited{color:#023666;}
div.guides a:active{color:#023666}
div.guides a:hover{color:#73A829;text-decoration:none;}


/* Division pour un tableau avec lignes et colonnes et cadre en bleu */
div.tableau {}
div.tableau table {border:solid 0px #dddddd}
div.tableau tr {text-align: center}
div.tableau tr {border:solid 1px #dddddd}
div.tableau td {border:solid 1px #dddddd;background:#ddd} 

div.conclusion {border-left:3px solid #73A829;padding-left:10px} 


  
    
/* DÉBUT RESPONSIVE DESIGN */

/* ÉCRAN STANDARD  MINI 961px*/

@media screen and (min-width: 961px)


{
div.texte{position:absolute;top:215px;left:0px;width:650px;background:white;color:#333333;margin : 0px;
padding:5px 20px 10px 5px;text-align:justify;}

/* box-shadow:8px 0 8px -10px #000000 (gauche)
box-shadow:-8px 0 8px -10px #000000 (droite)    
box-shadow:8px 0 8px -10px #000000,-8px 0 8px -10px #000000 (les deux)*/

div.pubgauche{float:right}
div.droite{position:absolute;top:185px;left:670px;width:300px;font-size:14px;color:#333333;margin : 1em;text-align:left;padding-left:20px}
div.droite a{font-size:14px;}
div.droite th{padding : 3px 3px; border : none;background:#fff;color:#023666;border-top:3px solid #73A829;border-bottom:1px solid #ccc}
div.droite td{width:300px;padding : 3px 3px; border : none; background:#fff;text-align:center}

div.titre{position:absolute;top:150px;left:0px;width:645px;height:50px;text-align: left;background:#fff;padding-left:5px;padding-right:0px;}

div.side{position:absolute;top:117px;left:0px;width:99%;height:26px;background:#777;padding: 9px 0px 0px 5px;color:#fff}

  
div.side a {;font-family: verdana,sans-serif;font-size:100%; text-align: center;font-weight:none;font-weight:normal;text-decoration: none;color:#fff}
div.side a:link, div.side a:visited, div.side a:active {padding:5px ;margin-top: 0px; display: inline;background:#777;}
div.side a:hover {color:#fff; background:#73A829;font-style: none; text-decoration: none;display: inline;}
   

}

@media screen and (max-width:960px)
{

    

 /* 1ERE ADAPTATION (MAX :960px)*/
.titre{position:absolute;left:05px;top:55px;width:440px;height:50px; text-align:left;line-height:1.6em;padding-top:6px;padding-left:5px;padding-right:0px }

div.texte{position:absolute;top:140px;left:5px;width:480px;font-size:105%;height:;background:white;color:#333333;margin : 0px;padding:5px 15px 5px 5px;text-align:justify;}

div.droite{position:absolute;top:0px;left:500px;width:280px;height:220%;margin : 0.5em;font-size:105%}
div.droite a{font-size:105%}





div.side { 
  position: absolute; top:0px; left: 10px; z-index; 1; 
  width: 50%; height: ; line-height: 2.2;
  color: #333;
  padding: 0px;text-align:left;}
  
    
div.side a, div.side a:link, div.side a:visited, div.side a:active { 

  padding: 5px 5px 5px 5px; 
  margin-top: 16px; margin-bottom: 16px; 

  color: #fff; background: #777; 
  font-weight: ; text-decoration: none; ;
  font-family: Arial, sans-serif;font-size:100%;text-align:center;  }
  
 div.side a:hover {color:#fff; background:#73A829;font-style: none; text-decoration: none;display: inline} 

.recherche {display:none}
.res{display:none}
.enseigne {display:none}
.nom {display:none}



h1{font-family: Verdana,Arial, Helvetica, sans-serif;font-size:150%;color:#023666;margin-bottom:4px; border-bottom:0px solid #ccc; font-weight:bold}
h2{font-family: verdana,Arial,Helvetica,sans-serif;font-size: 150%;margin-top:10px;text-decoration:none;margin-bottom:2px;color:#023666;font-weight:normal}
h3{font-family: Arial,Helvetica,sans-serif;font-size: 130%;margin-top:10px;margin-left:0px;margin-bottom:0px;text-decoration:none;color:#023666;font-weight:normal}

 }

 /* 2EME ADAPTATION (MAX :751 px)*/
 div.chapeau{font-size:115%}
 @media screen and (max-width:751px){

 div.texte{position:absolute;top:120px;left:5px;width:630px;font-size:110%;height:105%;background:white;color:#333333;margin : 0px; 
padding:5px 15px 5px 5px;text-align:justify;;box-shadow:8px 0 8px -10px #000000}

div.droite{display:none}

.titre{position:absolute;left:5px;top:55px;width:600px;height:40px; text-align:left;line-height: 1.6em;;padding-top:6px;padding-left:5px;padding-right:0px }



div.side { 
  position: absolute; top:0px; left: 10px; z-index; 1; 
  width: 630px; height: ; ;
  color: #333;
  padding: 0px;text-align:left;}
  
    
div.side a, div.side a:link, div.side a:visited, div.side a:active { 

  padding: 5px 5px 5px 5px; 
  margin-top: 16px; margin-bottom: 16px; 
  color: #fff; background: #777;  
  font-weight: normal; text-decoration: none; ;
  font-family: Arial, sans-serif;font-size:105%;text-align:left; 
  
  div.side a:hover {color:#fff; background:#73A829;font-style: none; text-decoration: none;display: inline;}
  



h1{font-family: Verdana,Arial, Helvetica, sans-serif;font-size:170%;color:#023666;margin-bottom:4px; border-bottom:0px solid #ccc; font-weight:bold}
h2{font-family: verdana,Arial,Helvetica,sans-serif;font-weight:bold;font-size: 105%;margin-top:10px;text-decoration:none;margin-bottom:2px;color:#023666}
h3{font-family: Arial,Helvetica,sans-serif;font-weight:normal;font-size: 105%;margin-top:10px;margin-left:0px;margin-bottom:0px;text-decoration:none;color:#023666;}
a{font-family: Verdana,Arial,sans-serif;font-size:100%;font-weight:normal;border-style:none;}
a:link{color:#023666;text-decoration:none;background:transparent}
a:visited{color:#023666;text-decoration:none;background:tranparent;border-style:none;}
a:active {color:#023666}
a:hover{color:#990000;text-decoration:none;background:transparent;}
.lien-exergue{font-size:140%;font-family:georgia, serif}
.li-exergue{border:2px solid #73A829;padding:10px 10px 0px 10px;margin-bottom:10px;font-size:105%;list-style-type:none;}
.div.exergue{font-size:140%;font-family:georgia, serif;border:2px solid #73A829;padding:10px 10px 0px 10px;margin-bottom:10px;font-size:105%;list-style-type:none;}
a img {border: none;}

 

}

 /* 3EME ADAPTATION (MAX :675 px)*/

 @media screen and (max-width:675px){
 
div.texte{position:absolute;top:140px;left:0px;width:640px;font-size:115%;height:105%;background:white;color:#333333;margin : 0px; 
padding:5px 15px 0px 15px;text-align:justify;}

div.droite{display:none}

.titre{position:absolute;left:5px;top:60px;width:600px;height:40px; text-align:left;line-height: 1.6em;;padding-top:6px;padding-left:5px;padding-right:0px }


h1{font-family: Verdana,Arial, Helvetica, sans-serif;font-size:160%;color:#023666;margin-bottom:4px; border-bottom:0px solid #ccc; font-weight:bold}
h3{font-family: Arial,Helvetica,sans-serif;font-weight:normal;font-size: 120%;margin-top:10px;margin-left:0px;margin-bottom:0px;text-decoration:none;color:#023666;}
div.side a:hover {color:#fff; background:#73A829;font-style: none; text-decoration: none;display: inline;}


}

}

 /* 3EME ADAPTATION (MAX :640 px)*/

 @media screen and (max-width:640px){
 
div.texte{position:absolute;top:140px;left:0px;width:600px;font-size:115%;height:105%;background:white;color:#333333;margin : 0px; 
padding:5px 15px 0px 15px;text-align:justify;}

div.droite{display:none}

.titre{position:absolute;left:5px;top:60px;width:600px;height:40px; text-align:left;line-height: 1.6em;;padding-top:6px;padding-left:5px;padding-right:0px }


h1{font-family: Verdana,Arial, Helvetica, sans-serif;font-size:160%;color:#023666;margin-bottom:4px; border-bottom:0px solid #ccc; font-weight:bold}
h3{font-family: Arial,Helvetica,sans-serif;font-weight:normal;font-size: 120%;margin-top:10px;margin-left:0px;margin-bottom:0px;text-decoration:none;color:#023666;}
div.side a:hover {color:#fff; background:#73A829;font-style: none; text-decoration: none;display: inline;}


}


 /* 4EME ADAPTATION (MAX :480 px)*/
 
 @media screen and (max-width:480px){
 
 .titre{position:absolute;left:5px;top:90px;width:480px;height:40px; text-align:left;line-height: 1.6em;;padding-top:6px;padding-left:5px;padding-right:0px }
 
div.texte{position:absolute;top:170px;left:0px;width:445px;font-size:115%;padding:5px 10px 0px 10px

}
a{font-size:105%}

div.side {width: 450px;}
 }



 /* 5EME ADAPTATION (MAX :380p px)*/

@media screen and (max-width:380px){
div.side {width:360px;}
div.titre{position:absolute;top:120px;width:300px;margin-left:5px;padding-left:5px;line-height:1.6em}
div.chapeau{font-size:115%}
div.texte{position:absolute;top:230px;left:0px;width:330px;font-size:120%;padding:5px 15px 0px 15px;box-shadow:none;}
h2{font-size: 115%;}
a{font-size:110%}
div.pubgauche{display:none}

}
 
 /* 6EME ADAPTATION (MAX :320px)*/

@media screen and (max-width:320px){
div.side {width:310px}
div.titre{position:absolute;top:120px;width:300px;margin-left:5px;padding-left:5px;line-height:1.6em}
div.chapeau{font-size:120%}
div.texte{position:absolute;top:220px;left:0px;width:290px;font-size:120%;padding:5px 15px 0px 15px;box-shadow:none;}
h2{font-size: 115%;}
a{font-size:115%}
div.pubgauche{display:none}

}
 

/*FIN RESPONSIVE DESIGN */

/* CSS spécifique  */

button.accordion {
    background-color: #fff;
    color: #585858;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    font-weight:bold;
    transition: 0.4s;
    
}
button.accordionstat {
    background-color: #fff;
    color: #585858;
    cursor: pointer;
    padding: 5px;
    width: 100%;
    border: none;
    text-align: left;
    outline: none;
    font-size: 15px;
    font-weight:bold;
    transition: 0.4s;
    
}

button.accordion.active, button.accordion:hover {
    background-color: #fff;
}

button.accordion:after {
    content: '\02795';
    font-size: 14px;
    color: #ddd;
    float: right;
    margin-left: 0px;
}

button.accordion.active:after {
    content: "\2796";
}

div.panel {
    padding: 0 5px;
    background-color: #eee;
    font-weight:normal;
    color : #73A829 ;
    max-height: 0;
    overflow: hidden;
    transition: 0.6s ease-in-out;
    opacity: 0;
 
}

div.panel.show {
    opacity: 1;
    max-height: 1000px;  
}
}



/*Fin CSS spécifique  */