@import url('https://fonts.googleapis.com/css?family=KoHo:200,300,400,500,600');
html {margin:0; padding:0; border:0px; height:100%; width:100%; font-size: 12px; font-weight: normal ; color: #222;  } 

body {background : #fff; font-family: 'KoHo', verdana, sans-serif; font-weight:400; overflow:hidden} 

 
 
a {color: #000;  text-decoration:none; } 
a:hover{ text-decoration:none;  background-color:rgba(240,220,256,0.8); }

h2 {font-size: 24px; color:#222; text-align:center; margin-left: 20px; font-weight: 300;}
h3 {font-size: 20px; color:#000; text-align:left;  line-height:21px; margin: 0 0 5px 0; font-weight: 400;}
h4 {font-size:19px; font-weight:500; color:#000; line-height:24px; margin: 13px 1px 6px 1px; text-align:center; width:100%;  }
h5 {font-size:16px; font-weight:400; color:#333; line-height:21px; margin:15px 0 5px 0; text-align:center; display:inline block; }
h6 {font-size:15px; text-align:center; color:#111; line-height:20px; font-weight: 300; margin: 0px 2px 15px 2px ; }

.suppl {position:relative; width:86%; margin: 5px 7% 10px 7%; text-align:left; line-height:25px;  color: #333; font-weight:300;}   /****  utilisé pour photographes****/
.suppl { line-height:25px;  font-size: 16px;} 
.suppl { line-height:2.4vw;  font-size: 1.8vw;} 
@media screen and (min-width: 1320px) {.suppl {font-size: 24px;}}


 /****  ==== pied ==== ****/
footer {position:fixed; bottom:0px; left:0px; background : #fff ; color:#333; height:40px; width: 100%; overflow:hidden; border-top: 1px #DDD solid;}

.piedgauche, .piedgauche a {position:absolute; top:11px; height:16px; left:40px; width:auto; text-align: left;  font-size:15px; font-weight:300; line-height :16px; display:inline; background:transparent; color:#222;} 
.piedgauche:hover, .pidegauche:hover a { background:#5F2; color:#222;} 

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

.cherche {position:relative; top:3px; left:0px; height: 20px; width:auto; float:right; background:#FFF; font-size:12px; display :inline; } 


.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(240,180,256,0.8);}
.gohaut img {margin : 5px; height:20px; width:20px}

 /****  ====  fin pied  ==== ****/
 
 /****  ====  debut tete   ==== ****/

#header {position:fixed; left:0px; top:0px; color:#FFF; width:100%;  display:inline; text-align:center; overflow:hidden; text-align:left;} 
#header {height:42px; background:#343a40; color:#fff; }
#header a {display: inline-block; margin-top:14px; padding-bottom:3px; margin-left: 5px; font-size: 13px;  color:#fff; line-height: 14px; }
#header a:hover {color:#2F0; background:#777;}

.titre {width:420px; position: absolute; top:9px; height:40px; left:50%; margin-left:-210px; text-align:center;background:transparent}   /****  dans header.....****/
.titre h2 {font-size: 20px; color:#FFF; line-height: 22px; margin:0; padding:0; text-align:center; font-weight: 500;}

#tete-g {position:absolute; top:10px; left:14px; width:24px; height:24px; background:transparent;}
#tete-g img {position:absolute; top:0px; left:0px; width:24px; height:24px;}
#tete-g:hover img { left:-2px; width:24px; height:24px;}

#tete-d {position:absolute; top:10px; right:20px; width:24px; height:24px; font-size:14px; color: #888 ; text-align:left; background:transparent;}
#tete-d:hover {background:transparent}
.menulogo img {position:absolute; right:0px; top: 0px; height:24px; width:24px; border:0px; margin:0 0 0 0 px;padding:0;}  

#header a {display: inline-block; margin-top:14px; padding-bottom:3px; margin-left: 5px; font-size: 15px;  color:#fff; line-height: 14px; }
#header a:hover {color:#2F0; background:#777;}

#depliant {position:fixed; right:10px; top: 42px; height:auto; width:320px; border:0px; margin:0; padding:5px 0 10px 0; color:#FFF; line-height:24px; text-align:left; background-color: rgba(50, 50, 50, 0.8 ); display:none;}
#header #depliant a {color:#FFF;  font-size:16px; text-align:left; line-height:28px; margin:0 0 3px 10px; padding:0; display:inline}  
#header #depliant a:hover {text-decoration:none; background-color: rgba(50, 200, 50, 0.8 )}  

@media (max-width:767.98px) {
    #depliant{
        padding-right: 0;
        padding-left: 0
    }
}

@media (max-width:560px) {
 #depliant {width:280px; line-height:24px;}
 #header #depliant a {height:auto; margin:0 0 2px 10px;  font-size:14px;  line-height:20px; }
.titre {top:9px; width:320px;  margin-left:-160px;} .titre h2  {font-size: 17px; line-height:22px; text-align:center; background:transparent}
    }
    
@media (min-width:1100px) {
 #depliant {width:400px; line-height:34px;}
 #header #depliant a {height:auto;  text-align:left; margin:0 0 4px 10px;  font-size:18px; line-height:24px;}
.titre {top:9px; width:540px;  margin-left:-270px;} .titre h2  {font-size: 22px; background:transparent}
    }
  
    

 /****  ====  fin tete   ==== ****/
 

.stitre {position:absolute; top:8px; left :10px; height: 15px; width:auto; margin: 0px; font-weight:500; padding:0px 5px 4px 6px; background:#666; text-align:left; color:#fff; display:inline-block;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0px #FFF solid;}
.stitre-d {position:absolute; top:8px; right :8px; height: 15px; line-height:15px; font-size:14px; width:auto; margin: 0px; font-weight:500; padding:0px 4px 2px 5px; background:#666; text-align:right; color:#fff; display:inline-block;
	-webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; border: 0px #FFF solid;}
.intertitre {text-align:center; font-size: 22px; line-height:28px; color:#222; padding : 4px 0px 0px 0; font-weight: 300; }


#boite {position:absolute; border:0px; top:0px; bottom:0px;  /**** iIMPORTANT.....ET.. sans spécifier height.....****/
left:50%; margin-left:-50%; width:100%; margin-top:53px;  margin-bottom:45px; text-align:center; background:transparent;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 {position:absolute; top:10px; left:0px; text-align:center;  background:#FFF; 
	margin:0px auto 0px auto; 
	min-height:300px; 
    min-width:260px; 
}

.pin {width: 300px;  height:auto;background-color: #FFF; margin :14px 18px 28px 18px; 
	 font-size: 17px; -webkit-border-radius: 6px; -moz-border-radius: 6px; border-radius: 6px; }
.photo img, .pin img {width:300px; height:auto ; border:0px; margin:0px 0px -3px 0px; -webkit-border-radius: 6px;-moz-border-radius: 6px; border-radius: 6px;} 

.pin:hover {opacity:0.8; cursor:pointer; background-color:rgba(240,220,256,0.6); }


.masonry, .masonry .masonry-brick {  -webkit-transition-duration: 0.7s;   -moz-transition-duration: 0.7s; -ms-transition-duration: 0.7s;  -o-transition-duration: 0.7s; transition-duration: 0.7s;}
.masonry {-webkit-transition-property: height, width; -moz-transition-property: height, width;  -ms-transition-property: height, width;  -o-transition-property: height, width;  transition-property: height, width;}

@media (max-width: 1010px) {
.chapeau p {font-size:16px;}}
@media (max-width: 672px) {
.chapeau {width:0px; display:none;}
.chape p {font-size:16px;}
}



.lect {background: #FFF ; width:250px; height:21px; margin-left:20px; margin-top:2px; overflow:hidden; margin-bottom:5px; }
.lect:hover {height:35px;  display:block;}

.blanc  {color: #fff; }
.blanc a {font-size: 11px; color: #fff; text-decoration:none;}
.blanc a:hover {font-size: 11px; color: #f00; }

.gris {background:#555; color:#FFF; font-size: 15px;line-height:21px}  /****  utilisé pour  premiere case ? ****/
.gris a {color:#FFF;text-decoration:none; line-height:24px}
.gris a:hover {color:#FFF; background: #F80}

.color9 {color:#999;}
.color7 {color:#777;}

p {margin : 0 0 9px 0}
.texte2 {font-size: 18px; color: #444;  line-height: 26px; font-weight:300;}  
.texte3 {font-size: 18px; color: #444;  line-height: 28px; font-weight:300;} 
.marge50 {position:absolute; margin-right:50%}

.fw200 { font-weight:200;}
.fw300 { font-weight:300;}
.fw400 { font-weight:400;}
.fw500 { font-weight:500;}
.fw600 { font-weight:600;}


.fd0 {background:#000}
.fd3 {background:#333}
.fd9 {background:#999}
.fdc {background:#CCC; color:#000}
.fdf {background:#FFF; color:#000}
.rouge {background:#F00}
.bleu {background:#00F}

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