@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;}

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: var(--color-background1);}

.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%; margin-bottom:20px;}
.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:var(--color-background1); line-height : 2}
*/

.ln_boutiqueindex { display:block; text-decoration: none; border:0px 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-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:var(--color-background1); }
.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:var(--color-background1); }   
.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; }
.left { text-align:left; }
.center_box { display:inline-block;} /* avec text-align:center dans le parent */
.right { text-align:right; }
.text_size1 { font-size: 1.10em; }
.block { display:block; }

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

.dv_shadow {box-shadow: 3px 3px 3px 2px var(--color-shadow); }
.dv_line {border-bottom: 1px solid var(--color-shadow)}
.padding10 { padding:10px; }
.padding20 { padding:20px; }

.dv_accueil {
        display: flex;
        justify-content: center;
        align-items: center;  /* dans la hauteur aligne au milieu les elements enfants */
        margin-left: 1px;
	margin-right: 1px;
	margin-top:5px;
	margin-bottom:15px;
	border: 0px solid #777777;
        overflow: hidden;  /* pour que dv_auteur s adpate en hauteur aux  div en float à l interieur */
	font-size: 1.10rem;
        line-height: 1.5;
        text-align:justify; 
}
.dv_accueil img{  width:100%;  border: 0px solid black; object-fit: contain; /* max-height:800px; */ }
.dv_accueil h3 { padding:3px; width:95%; margin:auto; text-align: center; margin-bottom:4px; margin-top:4px;  }



.boite_flex,.boite_flex_hor { display:flex;  margin:1px solid; flex-wrap: wrap;} 
.boite_flex_vert { display:flex; flex-direction: column; margin:1px solid; flex-wrap: wrap;} 
.box_supports { width: 30%; margin:10px; text-align:center; font-size:1rem; border:1px solid var(--color-shadow); box-shadow: 2px 2px 2px  var(--color-shadow); padding:10px; }

.box_supports img { margin:0px; }
.box_icones {margin: auto; text-align:center; font-size:0.8rem; }

.img_vertical { max-width:280px; margin: auto; }
a.lien_txt:hover	{ background-color: #FEFEFE; color:#202020;}  

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

input,textarea {  font-size:1.05rem; color:#202020; padding:5px; }

.titre1,.titre2 {
	font-size: 1.8rem;
        margin: 5px 3px;
	text-align:center;
}
.titre1_small {font-size: 1.3rem;  margin: 5px 3px; text-align:center; }

.titre2 {
	margin: 2px;
}

.titre3 {
	font-weight: normal;
	font-size: 1.25rem; 
        margin: 10px 0 10px 0;
}




.titre_100pc {
   font-size:1.3rem; 
   margin:0px; 
}

.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; }  
 
.img_extraitlandes { object-fit: contain; width:100%; max-width:200px; margin:6px;border:10px solid white; }

/* ============================================================================ */
/*   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; }

.img_ln_galerie { width:250px; }
/* ============================================
      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: 990px) {   /* 767px  */
    .container { min-width:350px; max-width: 99%;  padding-left:0px;   padding-right:0px; }  
    .bandeau_accueil { 	width:100%; }
    .head_titre { margin-top:10px; }
    .header_titre 	{ margin-top:1px; font-size:1.2rem;  } 
    .header_lib { width:100%; margin:auto; font-size:0.8rem; padding-bottom:5px; }
    .titre1 { font-size: 1.3rem;  }
    .titre_100pc { font-size: 1.1rem;  }
    .header_left { width:65%; }
    .header_right { width:35%; margin-right:10px;}
    .header_left div { margin-left:10px; margin-top:5px; }
    .header_nom  {  font-size:0.8rem; } 
    .lien_rzosociaux { text-align:left; }
    img.logo-facebook { margin:0px 2px 0px 2px; width:32px;}
    .menu_icone { display:block;  float:left; margin: 10px; width:60px; }
    .menu_icone img { width:100%; }
    .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; }
    .lstnews_gauche,.lstnews_droit { width:100%; display:inline-block; float:none;} 
    .lstnews_droit { margin-left: 0;} 
     .dv_accueil {display:block; margin-left: 10px;  margin-right: 10px; }
    .bloc_30pourc,.bloc_40pourc,.bloc_60pourc,.bloc_70pourc { width:100%; }
    .galerie_vig2 { width:97%; max-width: 470px;  }
    .galerie_vig2_pano { width:97%; max-width: 470px; }
    .galerie_vigvideo { width:100%; }
    .galerie_videolarge { width:600px; }
    .galerie_planche { display: block; }
    .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.8rem;}
    .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; }
    .img_extraitlandes {width:160px;}
}
		
        
@media (max-width: 430px) { 
    /*.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; height: auto; } /* height:auto permet d'annuler le height:100% quand container est display:flex */
    
    .boite_flex { display:block; }
    .box_supports { width:90%; padding:20px; }
}
@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: 992px) {
   .container {    max-width: 960px;	/* background-color: #DDDDDD; */  }	
   .header_titre { font-size:1.8rem; } 
   .header_nom  {  font-size:1rem; } 
   .lstnews_gauche,.lstnews_droit { display:block; float:left;} 
   .lstnews_gauche { width:66%; }
   .lstnews_droit { width:32%; margin-left: 1%;}
   .galerie_vig2 { width:470px;   }
   .galerie_vig2_pano { width:972px; }
   .galerie_vigvideo { width:99%; }
   .galerie_video { width:520px; }
   .galerie_videolarge { width:900px; }
   .galerie_container {    grid-template-columns: repeat(auto-fill, minmax(130px, 130px)); grid-auto-rows: 130px;  grid-gap: 25px;   }
   .logo {  height:40px;}
   .menu_lg { font-size:0.9rem; }
   .menu_lg a { margin-left:1px; margin-right:1px;  padding-left:4px; padding-right:4px; }
   .menu_icone { display:none; }
   .menu_xs { display:none; }
   .diapotxt {font-size:0.8rem;}
   /*
    .lstnews_gauche,.lstnews_droit { width:100%; display:inline-block; float:none;} 
    .lstnews_droit { margin-left: 0;} 
    .galerie_vig2 { width:360px;   }
    .galerie_vig2_pano { width:726px; }
    .galerie_videolarge { width:700px; }
        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;  }
    .header_left { width:25%; }
    .header_right { width:75%; margin-right:15px;}
    .header_right div { margin-top:10px; }
    */
}
@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_vigvideo { width:99%; }
  .galerie_video { width:520px; }
  .galerie_videolarge { width:1180px; }
  /* #masonry-grid { width:1190px; } */
  .diapotxt {font-size:1.5rem; }
  .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.0rem; }
  .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.2rem; }
}
*/
@media (min-width: 1800px) {
  .menu_lg { font-size: 1.2rem; }
  .galerie_vig2 { width:550px; height:366px;  }
  .galerie_vig2_pano { width:1132px;  } 
}