@charset "utf-8";
/* auteur: peyronnet christophe*/
/* Date de création: 18/01/2006 */
/* ============================================
          parametres generaux du site */
*,
*::before,
*::after {
    box-sizing: inherit;
}

html { height: 100%; box-sizing: border-box;}

element {
  --color-grey1: #222222;
  --color-grey2: #565656;
  --color-white1:#FFFFFF;
  --color-white2:#FEFEFE;
}

body { 
    position: relative;
    margin:0;
    padding:0;
    padding-bottom:50px;
    /* background: url(/images/fond_page_clair_1000.jpg) no-repeat center fixed; */
     -webkit-background-size: cover;  /* pour anciens Chrome et Safari */
     background-size: cover;  /* version standardisée */
    color: #FEFEFE;
    font-family: Palatino Linotype,Times new roman,sans-serif;
    text-align:center;
    min-height:100%;
}  

body a 		{ color: #FEFEFE; 	 } 
 body a:hover    { color:#FEFEFE; text-decoration:none; }  

.no_background { background-color: #FFFFFF;}

.img_fond { 
  margin:0;  padding:0;
  background: url('/images/img_fond.jpg') no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}
.img_fond_trans { 
  margin:0;  padding:0;
  background: url('/images/img_fond_trans.jpg') no-repeat center fixed; 
  -webkit-background-size: cover; /* pour anciens Chrome et Safari */
  background-size: cover; /* version standardisée */
}

/* Mise en forme et gestion du diaporma sur page d'accueil index.xxx */
@keyframes diaporama {
      0%{background-image: url("/images/img_fond.jpg");}
      33.33%{background-image: url("/images/img_fond2.jpg");}
      66.67%{background-image: url("/images/img_fond3.jpg");}
      100%{background-image: url("/images/img_fond4.jpg");}
  }
 .bandeau_accueil {    display: block;    position: relative; background-size: contain; width:80%; margin:auto; margin-top:20px;}
.conteneur_diapo {    max-width:1920px;    margin:0px auto; }
.img_accueil_large { display:block; width:100%; }
.diapo {
    width:100%; height:0px; 
    padding-top:46.354% ; /*  53.125% */
    margin: 0px auto; 
    background-color: #EEEEEE;
    background-size:contain;
    animation: diaporama 15s ease-in-out infinite both;
}
.diapo_divtxt {
    z-index: 1;
    position: absolute;
    text-align: center;
    margin: 0 auto;
    left: 0;
    right: 0;
    top: 2%;
    width: 70%;
}
.diapotxt { font-family: Merienda,Gabriola; font-size: 1em; text-align: center; color:#FFFFFF; line-height : 2}

.ln_boutiqueindex { display:block; text-decoration: none; border:1px solid #EEEEEE;text-align:center; margin:10px 0;}
.ln_boutiqueindex img { margin:0px;width:100%;}

.dvleft_presentation,.dvright_presentation { display:table; margin: 10px 1px ; font-family: Palatino Linotype, Verdana, Arial; font-size:1.1em;  }
.dvleft_presentation a {float:right; margin:20px 30px 20px 20px;}
.dvright_presentation a {float:left; margin:20px 30px 20px 20px;}
.dvleft_presentation,.dvright_presentation p { text-align:justify; }

.pp_overlay { opacity: 0.85; }

/* container=conteneur classique du site web, container_hd=conteneur du header du site web,container_full=conteneur specifique a galeries et aff_vignette pour affichage grande largeur   */
.container,.container_full {   
  /* width: 99%; */
  border: 0px groove #777777; 
  padding-right: 10px;  /* 15px */
  padding-left: 10px;   /* 15px */
  margin-right: auto;
  margin-left: auto;
  /* text-align:left; */
}
.container_hd { padding:0px; margin: auto;}
.container_full {width:100%; max-width:100%; }
footer {   position: absolute; bottom: 0; left: 0; right: 0;  }
footer a        { text-decoration:none; background-color: #EEEEEE; padding:5px 10px 5px 10px; border:1px solid #DDDDDD;  }
footer a:hover  { background-color: #565656; color:#FEFEFE;  }
footer.transparent,footer.transparent a { color:#FEFEFE; background: none; border:0px; } 
footer.transparent a:hover              { background-color: #FEFEFE; color:#222222;  }

/* panneau gauche qui affiche la liste des mots clés  */
.pnl_motcle { border:1px solid black; float:left; text-align:left; padding:10px; margin-right: 10px; border-radius: 5px; }

/* .mentions {  margin-top:5px; margin-bottom:10px;} 
.mentions a { text-decoration:none; background-color: #EEEEEE; padding:5px 10px 5px 10px; border:1px solid #DDDDDD; }
.mentions a:hover    { background-color: #565656; color:#FFFFFF;  }  */

/* bandeaux larges en blanc ou sombre pour pages auteur et liens */
.bandeau_white {display:block; clear:both; margin:0; padding: 10px 0 10px 0; background-color:#FFFFFF; }
.bandeau_black {display:block; clear:both; margin:0; padding: 10px 0 10px 0; background-color:#444444; color:#FEFEFE;}
.bandeau_fond1 {display:block; clear:both; margin:0; padding: 10px 0 10px 0; background-color:#FFFFFF; }   
.bandeau_fond2 {display:block; clear:both; margin:0; padding: 10px 0 10px 0; background-color:#444444; color:#FEFEFE;}    /* couleur sable: #faf5ed   */


.center { text-align:center; }
.center_box { display:inline-block;} /* avec text-align:center dans le parent */
.right { text-align:right; }

.bloc_70pourc { width:70% }
.bloc_40pourc { width:40% }
.bloc_30pourc,.bloc_30pourcfx { width:30% }
.bloc_20pourc { width:20% }

a.lien_txt:hover	{ background-color: #FEFEFE; color:#202020;}  

ul { line-height:1.3; margin:0px; padding: 0px; }
li { display:inline; }

input,textarea { font-family: Palatino Linotype, Verdana, Arial; font-size:1.05em; color:#202020; padding:5px; }

.titre1,.titre2 {
	font-size: 1.8em;
        margin: 5px 3px;
	/* font-family:  sans-serif,Times new roman,Monotype Corsiva;  */
	text-align:center;
}

.titre2 {
	margin: 2px;
}

.titre3 {
	font-family: Times new roman,Arial;
	font-weight: normal;
	font-size: 1.25em;
        margin: 10px 0 10px 0;
}

.fond_frame { /* background: url('/images/fond_1c.jpg') repeat;  */ border-radius: 4px; }

.icone_fbk   		{ display:inline-block; width:28px; height:28px; margin-left:10px;  margin-right:10px; background: url(images/img_facebook.png); }	
.icone_fbk2   		{ display:inline-block; margin-left:10px;  margin-right:10px;  }
.icone_fbk:hover        { background: url(images/img_facebook2.png); }
.icone_twr		{ display:inline-block; width:28px; height:28px; margin-bottom:-6px; margin-left:10px;  margin-right:10px; background: url(images/img_twitter.png); }	
.icone_twr:hover 	{ background: url(images/img_twitter2.png); }

.img_acceuil {
    margin-right: auto;
    margin-left: auto;
    text-align:center;
    font-weight: bold;
    color: #444444;
}

#imgacceuil1 {  display:none; }  /* image temporaire pour pre-chargement */
   
 .img_acceuil p {  margin:30px 0px 10px 0px; }
 
 .img_acceuil img { max-width:100%; box-shadow: 10px 10px 9px 2px #333333; }  
.div_img { width: 500px; height: 400px; max-width:100%; box-shadow: 10px 10px 9px 2px #333333; }  
 

/* ============================================================================ */
/*   thumbs....... : vignette utilisée pour vignettes.php et articles.php       */	

/* !!!!!!!! VOIR POUR SUPPRIMER THUMBS2 QUI N A PAS L AIR D SERVIR
  A QUOIQUE SE SOIT !!!!!!!!
*/ 

.thumbs,.thumbs2 {		
	display:inline-block;
	position: relative;	/* a laisser pour pouvoir mettre image poubelle en absolute par dessus en etant en mode admin */
	border:1px solid #AAAAAA;
	vertical-align: middle; 
        margin-bottom:10px;  
	cursor: zoom-in;   /* pointer; */
}

/*
M : 402 x 268 (+2 sont comptés pour les bordures fine de 1px)
L : 814 (taille M x2 + 10 demarge =814)
H : 536 

*/

/* thumbs--xxxx plus utlisé pour les galeries mais encore utilisé pour les articles du blog */
.thumbs--pays { width:  402px; max-height:268px; overflow: hidden; }  
.thumbs--port { width: 320px; max-height:462px; overflow: hidden; border:42px solid #777777;}  
.thumbs--pano { width:  820px; max-height:268px; overflow: hidden }  
.thumbs:hover,	.thumbs2:hover {	box-shadow: -2px -2px 6px #BBBBBB;   }

#planche_container { display:block; width:100%; padding:10px;}  
/* #masonry-grid { visibility:hidden;  margin:0 auto; padding-top:10px; } */

#lbl_inprogress { width: 100%; text-align: center;}

/*
.wrapper {
   margin: 0 auto;
   display: block;  
   position: relative;
   width: 90%; 
   padding: 10px;
   background-color: blanchedalmond;
}
*/
.galerie_container {
    display: grid;
    justify-content: center;
    /*grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); */
    /*
    la grille est composée de colonnes de 130px de largeur avec 25px entre chaque. nbre de colonne definit en auto-fill au max de la largeur du conteneur 
    pour photo class= paysage  => elle prend 3 col de largeur (auto/span 3) et 2 lignes de hauteur (format 3x2)
    pour photo class= portrait => elle prend 3 col de largeur (auto/span 3) et 4 lignes de hauteur (format 2x3)
    pour photo class= carre    => elle prend 2 col de largeur (auto/span 2) et 2 lignes de hauteur (format 2x2)
    pour photo class= pano     => elle prend 6 col de largeur (auto/span 6) et 2 lignes de hauteur (format 3x1)
    affichage mini de 2 vignettes paysages cote à cote donc il faut minimum 6 colonnes soit largeur conteneur= 6x(130+25px)=930px
    si largeur conteneur < 930px alors on passe à colonne et row =100px et gap = 15px via les mediaqueries (alors larg max=690px)
    */
    grid-template-columns: repeat(auto-fill, minmax(130px, 130px));   
    grid-auto-rows: 130px;
    grid-gap: 25px;
    grid-auto-flow: dense;
}
/* 
ci-dessous : 
div-recadrage prend toute la largeur/hauteur d'un element de GRID, sauf si on lui applique une classe paysage/portrait, etc ... 
*/
.galerie_container .div_recadrage {  
    width: 100%;
    height: 100%; 
    display:flex;
    align-items: center;  /* pour centrer verticalement les images qui depassent ! */
    overflow: hidden; /* à l interieur , l image qui n a pas les proportion du recadrage est rognée ! */
    margin:0px;
   /*  object-position: 50% 50%;  centre horiz et verti l image dans la box */  
}
.galerie_container .div_recadrage:hover {
    box-shadow: 4px 4px 6px #222222; 
    border:1px solid white;
}
/* 
ci-dessous : 
img prend par defaut larg de div_recadrage (sa hauteur est proportionnelle à l image mais sensiblement identique à di_recadrage,
sauf pour les image en portrait qui sont rognées en haut et en bas (en combinaison avec overflow:hidden)
*/
.galerie_container .div_recadrage img {
    width: 100%;
    height:auto;  /* height: 100%; */
    cursor: zoom-in; 
}
    
.galerie_container .paysage {
     grid-column: auto / span 3; 
     grid-row: auto / span 2;
}

.galerie_container .portrait {
    grid-column: auto / span 3;
    grid-row: auto / span 4;
}

.galerie_container .carre {
    grid-column: span 2;
    grid-row: span 2;
}
.galerie_container .pano {
    grid-column: auto / span 6;
    grid-row: span 2;
}

.nomargin { margin:0px; }
.image_legende {display:none; }

#cookieChoiceInfo { max-height: 50%; }
#cookieChoiceInfo a { max-height: 70px; }


/* ============================================
      media queries pour responsive du site 
xl : min 1200
lg : min 992
md : min 768
sm : min 576
*/	

/*
@media (min-width: 576px) {
  .container {
    max-width: 540px; 
  }
}
*/

@media (max-width: 767px) {
	 .container { min-width:350px; max-width: 99%;  padding-left:0px;   padding-right:0px; }  
	/* .header-vs { height: 200px; margin-bottom:17px; } */
        .header-vs { height:125px; }
        .head_titre { margin-top:10px; }
	.header_titre 	{ margin-top:1px; font-size:1.2em;  font-size:1.2em;} 
	/* .header_lib { width:75%; margin:auto; font-size:0.8em; padding-bottom:5px; }  */
        .header_lib { width:100%; margin:auto; font-size:0.8em; padding-bottom:5px; }
	.header_left { width:65%; }
        .header_right { width:35%; margin-right:10px;}
        .header_left div { margin-left:10px; margin-top:5px; }
	
	/* .header_lib h2  {  font-size:1em; margin-top:5px; margin-bottom:5px; } */
	.header_nom  {  font-size:0.7em; } 
	.lien_rzosociaux { text-align:left; }
	img.logo-facebook { margin:0px 2px 0px 2px; width:32px;}
	/* .header_nom 	{ font-size:1em; }  */
	/* .menu_icone { position:absolute; display:block;  margin:-56px 0 0px 0px; z-index:99; float:left; } */
        .menu_icone { display:block;  float:left; margin-top: 5px;}
	.menu_icone img { width:60px; margin-left:10px; margin-bottom:10px; border: 2px solid white;}
	.menu_xs { display:none;  position:absolute; z-index:99; width:100%; } /* sera activé par le bouton mini_menu */ 	
	.menu_lg { display:none; }
        .container_hd {     min-height: 40px;  /* display:block;   */}
        /*  #masonry-grid { padding:10px; }         */
        .lstnews_gauche,.lstnews_droit { width:100%; display:inline-block; float:none;} 
        .lstnews_droit { margin-left: 0;} 
        /* .img_accueil_large { display:none; }
        .img_accueil_small { display:block; }  */
        .bloc_30pourc,.bloc_40pourc,.bloc_70pourc { width:100%; }
        /* .galerie_vig2 { width:100%; }    WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW */
        .galerie_vig2 { width:97%;   }
        .galerie_vig2_pano { width:97%; }
        .galerie_vigvideo { width:100%; }
        .galerie_videolarge { width:600px; }
	.lstnews_row img {   max-width: 92%;  }
	.lstnews_titre { margin-bottom: 3px; }
        .lstnews_text { margin-top: 5px; }
        .thumbs--pano,.thumbs2--pano,.thumbs--pano--art  {   max-width: 96%; } 
	.bandeau_titre .thumbs,.bandeau_titre .thumbs2 { display:block; float:none; clear:both; }  /* annule l ecriture du texte à droite de l image et permet de le basculer en dessous */
	.entete_nav div,.entete_nav ul { display:block; padding: 3px 1px 3px 1px; }
	.lnpg_img_home,.lnpg_img_prior,.lnpg_img_next, .lnpg, .lnpg_cur { margin-left:1px; margin-right:1px; padding:3px 2px;}
	.entete_nav2 li { margin-left:4px; margin-right:4px; }
	.liens_ext_link { float:none; }
        .dv_contact,.dv_auteur { display:block;}
        .dv_auteur img { margin:5px; }
        .contact_gauche { width:98%; }
        .contact_droit { width:98%; }
	.auteur_coltxt1,.auteur_colimg1 ,.auteur_coltxt2,.auteur_colimg2,.auteur_coltxt3,.auteur_colimg3,.auteur_coltxt4,.auteur_colimg4 {width:100%; }
        .diapotxt {font-size:0.6em;}
        .header_fdind       {    background: url('/images/bannieres/fond_hdx-2.jpg'); }
        .header_fdgal       {    background: url('/images/bannieres/fond_hd_land3small.jpg'); }
        .header_fdactu      {    background: url('/images/bannieres/fond_hd_a5.jpg'); }
        .header_fdvideo     {    background: url('/images/bannieres/fond_hd_land3small.jpg'); }
        .header_fdapropos   {    background: url('/images/bannieres/fond_hd_land3small.jpg'); }
        .header_fdcontact   {    background: url('/images/bannieres/fond_hd_land3small.jpg'); }
        .header_fdlien      {    background: url('/images/bannieres/fond_hd_land3small.jpg'); }
        .header_fdanimaux   {    background: url('/images/bannieres/fond_hd_a1.jpg'); }
        .header_fdoiseauxf  {    background: url('/images/bannieres/fond_hd_o5.jpg'); }
        .header_fdoiseauxm  {    background: url('/images/bannieres/fond_hd_o4.jpg'); }
        .header_fdinsectes  {    background: url('/images/bannieres/fond_hd_i1.jpg'); }
        .header_fdfleurs    {    background: url('/images/bannieres/fond_hd_f2.jpg'); }
        .header_fdlandes    {    background: url('/images/bannieres/fond_hd_land1.jpg'); }
        .header_fdpaysba    {    background: url('/images/bannieres/fond_hd_pb1.jpg'); }
        .header_vsimg {height:140px; background-repeat: no-repeat; background-size: cover; background-position: center center; }
}
		
        
@media (max-width: 420px) { 
    /*.galerie_vigimg         { max-width:310px;   }
    .galerie_vig2_pano img  { max-width:310px;   } */
    .logo { /* width:42px; */ height:40px;}
    .bandeau_titre .thumbs  { max-width:310px;   }
    #cookieChoiceInfo { display:block!important; }
    .galerie_container {    display:block;   }
    .galerie_container .div_recadrage {  margin:5px;}
}
@media (min-width:421px) and (max-width: 767px) { 
    /*.galerie_vigimg         { width:86%; max-width:520px;   }
    .galerie_vig2_pano img  { width:86%; max-width:520px;   } */
    .logo { /* width:42px; */ height:40px;}
    .bandeau_titre .thumbs  { width:86%; max-width:520px;  }
    .galerie_container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(65px, 65px)); grid-auto-rows: 65px;  grid-gap: 5px;   }
}
	  
@media (min-width: 768px) {
    .container {   max-width: 720px;	}	 /* background-color: #CCCCCC; */  
    .header_titre { font-size:1.2em; }   /* .header_nom 	{ font-size:1.25em; }    */
    .header_nom  {  font-size:0.7em; } 
    .logo { /* width:42px; */ height:40px;}
    .menu_lg { font-size:0.9em; }
    .menu_lg a { margin-left:1px; margin-right:1px;  padding-left:4px; padding-right:4px; }
    /*.img_accueil_large { display:block; }
    .img_accueil_small { display:none; } */
    .menu_icone { display:none; }
    .menu_xs { display:none; }
    .lstnews_gauche,.lstnews_droit { width:100%; display:inline-block; float:none;} 
    .lstnews_droit { margin-left: 0;}
    /* a.ln_menu, a.ln_menu_select { padding: 4px 30px 4px 30px;  	} */
    .galerie_vig2 { width:360px;   }
    .galerie_vig2_pano { width:726px; }
    /* .galerie_vigimg { max-width:310px;   }
    .galerie_vig2_pano img { max-width:650px;   }  */
    .galerie_vigvideo { width:100%; }
    .galerie_videolarge { width:700px; }
    .diapotxt {font-size:0.8em;}
    /*  #masonry-grid { width:590px; }  */
    /*    si largeur conteneur < 930px alors on passe à colonne et row =100px et gap = 10px pour garder mini 2 paysage cote à cote (alors larg max=660px)    */
    .galerie_container {  display: grid;  grid-template-columns: repeat(auto-fill, minmax(100px, 100px)); grid-auto-rows: 100px;  grid-gap: 10px;   }
    .header_left div { margin-left:20px; /* margin-top:10px; */ }
    .header_left { width:25%; }
    .header_right { width:75%; margin-right:15px;}
    .header_right div {/* margin-left:20px; */ margin-top:10px; }
}	

@media (min-width: 992px) {
   .container {    max-width: 960px;	/* background-color: #DDDDDD; */  }	
   .header_titre { font-size:1.8em; } 
   .header_nom  {  font-size:1em; } 
   .lstnews_gauche,.lstnews_droit { display:block; float:left;} 
   .lstnews_gauche { width:66%; }
   .lstnews_droit { width:32%; margin-left: 1%;}
   	/* .menu_lg { font-size: 1.1em; } */
   .galerie_vig2 { width:470px;   }
   .galerie_vig2_pano { width:972px; }
   /*.galerie_vigimg { max-width:410px;   }
   .galerie_vig2_pano img { max-width:890px;   }*/
   .galerie_vigvideo { width:99%; }
   .galerie_video { width:520px; }
   .galerie_videolarge { width:900px; }
   .diapotxt {font-size:0.9em;}
 /*  #masonry-grid { width:890px; }  */
  .galerie_container {    grid-template-columns: repeat(auto-fill, minmax(130px, 130px)); grid-auto-rows: 130px;  grid-gap: 25px;   }

}
@media (min-width: 1260px) {
  .container {    max-width: 1240px; 	/* background-color: #EEEEEE; ,.container_hd */  }
  .galerie_vig2 { width:550px; height:366px;  }
  .galerie_vig2_pano { width:1132px;   }
  /*.galerie_vigimg { max-width:500px;   }
  .galerie_vig2_pano img { max-width:1000px;   }*/
  .galerie_vigvideo { width:99%; }
  .galerie_video { width:520px; }
  .galerie_videolarge { width:1180px; }
  /* #masonry-grid { width:1190px; } */
  .diapotxt {font-size:1.5em; }
  .header_left { width:30%; }
  .header_left div { margin-left:50px; /*margin-top:20px; */ }
  .header_right { width:70%; margin-right:40px; text-align:right; } 
  .menu_lg { font-size: 1.0em; }
  .menu_lg a {   padding: 4px 8px 4px 8px;  }
  .logo { /* width:64px; */ height:60px;}
}

@media (min-width: 1340px) {
  .container {    max-width: 1320px;	/* background-color: #EEEEEE; .container_hd */  }
}	

@media (min-width: 1460px) {
  .menu_lg { font-size: 1.2em; }
}