@charset "utf-8";

/*code pour RESET le navigateur par Eric MEYER */

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}

/*fin du reset*/

header{
	overflow:hidden;
			}

header{
	position:fixed;	
	width:100%;
		/*margin:0 auto;*/
	left:0;
	right:0;
	z-index:1;
	/*height:40px;
	background-image:url("images/fondheader.jpg");
	background-size: 100vw;
	background-position:bottom;*/	
	background-color:rgb(120,120,120);	
	/*overflow:hidden;	*/
}


/*mise en forme du menu*/

#menu{
	width:100%;
	padding-top:20px;
	padding-bottom:20px;
	padding-right:30px;
	position:fixed;
	right:0;
	text-align:right;
	font-size:0px;
	overflow:hidden;
	z-index:2;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#9e480b+0,000000+100&0.86+0,0+100 */
background: linear-gradient(to bottom,  rgba(158,72,11,0.86) 0%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
}
	
#menu ul li a{
		font-family: 'Josefin Sans', sans-serif;
		font-weight:500;
		font-size:0.9rem;
		color:white;
	padding-right:12px;
	padding-left:12px;
-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;	
	}
	
	#menu li {
	padding-top:5px;
	padding-bottom:5px;
	display: inline-block;
	margin-bottom: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
			}

#menu li a:hover{
	/*background-color:silver;*/
	color:orange;
}

#menu a{
	/*padding-top:5px;
	padding-bottom:5px;*/
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
	}
	
.current, .active{
	color:#75D2DC!important;
	font-weight:bold;
}

a{
	text-decoration:none;
	color:#0C91A4;
	}
	
#menu{		
	margin:0;
	text-align:right;
	font-size:0px;
	}

#menu a{
	text-decoration: none;		
  display: block;
  float: left;
  text-align:center;
	/*font-family: 'Saira Condensed', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1.1rem;
  padding: 10px;
  transition : all 0.5s ease;
	color: white;	
}

#menu li {
	padding-top:5px;
	padding-bottom:5px;
	display: inline-block;
	margin-bottom: 0;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
			}
.trigram{
	display: block;
	position:fixed;
	top:2px;
	left:20px;
	z-index:1;
    width: 16px;
    height: 0;
    -webkit-box-shadow: 1px 10px 1px 1px white,1px 16px 1px 1px white,1px 22px 1px 1px white;
    box-shadow: 0 10px 0 1px white,0 16px 0 1px white,0 22px 0 1px white;
	-moz-box-shadow: 1px 10px 1px 1px white,1px 16px 1px 1px white,1px 22px 1px 1px white;
	color:white;
	cursor:pointer;
	opacity:0;
}
.trigram p{
opacity:0;
color:white;
}
	
.closebtn{
	font-size:2rem !important;
}

/*POUR MENU Principal SANDWICH QUI SE DEPLOIE*/
.sidenav,.sidenavgris {
    height: 100vh; /* 100% Full-height */
    width: 0; /* 0 width - change this with JavaScript */
    position: fixed; /* Stay in place */
    z-index: 2; /* Stay on top */
    top: 0; /* Stay at the top */
    left: 0;
    /*background-color:rgb(120,120,120); */
	/*background-image:linear-gradient(#75D2DC, white);*/
	/*background-color:#75D2DC;*/
	overflow-x: hidden; /* Disable horizontal scroll */
    padding-top: 60px; /* Place content 60px from the top */
    transition: 0.5s; /* 0.5 second transition effect to slide in the sidenav */
}
.sidenav{
	background-image:linear-gradient(#75D2DC, white);
}
.sidenavgris{
background-image:linear-gradient(#9c9c9c, white);
}

/* The navigation menu links */
.sidenav a, .sidenavgris a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
	font-family:Arial;
	/*text-transform:uppercase;*/
    font-size: 0.9rem;
	/*font-weight:bold;*/
    color: white;
    display: block;
    transition: 0.3s;
}

/* When you mouse over the navigation links, change their color */
.sidenav a:hover {
    background-color:white;
}

.sidenavgris a:hover {
    background-color:#75D2DC;
}


/* Position and style the close button (top right corner) */
.sidenav .closebtn, .sidenavgris .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
	
}

#mySidenav  a, #mySidenavgris  a{
	display:block;
	/*padding:5px;
	border-right:solid;*/
	text-decoration:none;
	text-align:center;
	/*font-family: 'Amiko', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	font-size:1.2rem;
	color:white;
}

	
#travauxlien{
	color:rgb(110,110,110) !important;
}
	
#main {
    transition: margin-left .5s;
    padding-left: 20px;
	padding-right:20px;
}	
	/*FIN MENU SANDWICH*/	
	
	
/*MENU SECONDAIRE TRAVAUX*/
 

/* Hide the link that should open and close the topnav on small screens */
#icon {
	color:white;
}
#menu #icon {
    display: none;
}


/*FIN MENU SECONDAIRE*/

/*mise en forme section accueil*/

#sectionaccueil{
	position:relative;
	background-image:url("imagesterre/sculpture_entete2.jpg");
	background-size: 100%;
	min-height:100vh;
	/*height:75vh;*/
	background-position:0 -25vh;
	background-attachment: fixed;
	background-repeat:no-repeat;
	z-index:0;
	overflow:hidden;
			}
		
#soustitreaccueil{
	text-align:center;
	font-size:2rem;
	letter-spacing: 0.1rem;
	padding-top:4px;
	padding-bottom:20px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:200;
	color:white;
	
}
		
#flechebas{
	position:absolute;
	display:block;
	bottom:30px;
	width:100vw;
	text-align:center;
	/*opacity:0.5;*/
	margin-left:-15px;
	overflow:hidden;
}

#flechebas img{
	width:20px;}
	
/*
#papillonvole{
	position:absolute;
	bottom:0vh;
	right:0vw;
	width:40%;
	height:85vh;
	opacity:0.5;
	z-index:1;
}*/
	

#logo{
	padding-top:20px;
	padding-left:30px;
	position:fixed;
	left:0;
	font-family: 'Josefin Sans', sans-serif;
	font-size:2rem;
	font-weight:300;
	font-style:normal;
	letter-spacing:0.03em;
	color:white;
	z-index:3;
}
	
#h1accueil{
	text-align:center;
	font-weight:400;
	font-size:3.3rem;
	letter-spacing: 0.1rem;
	padding-top:40vh;
	padding-bottom:20px;
	/*font-family: 'Macondo', sans-serif;	*/
	font-family: 'Macondo', sans-serif;	
	color:white;	
	text-transform: uppercase;
}

#ct{
	width:100%;
	margin:0 auto;
	/*border:solid thin blue;*/	
	background-color:white;
	/*overflow:hidden;*/
	padding-bottom:20px;
}




			
 /*effet scroll to top */
button{
  position: relative;
}
.scrollToTop{
	color: #444;
	text-decoration: none;
	position:fixed;
	z-index: 9999;
    bottom:5%;
	left: 90%;
	background-color: rgba(50,50,50,0.8);
	color: white;
    display:none;
	border: none;
	padding: 5px;
	cursor: pointer;
}			


.w100{
	width:100%;
	padding-left:15px;
	padding-right:15px;
	box-sizing:border-box;
	padding-top:50px;
}


.w33{
	width:33.33%;
}

.w20{width:20%;
}

.w25{
	width:25%;
}

.w11{
	width:11.11%;
}


.w66{
	width:66.66%;
}
.w50,.w40, .w66,.w33,.w25,.w20,.w80,.w11{
	float:left;
	box-sizing:border-box;
}

.row{
	overflow:hidden;
	
}

.bloccentral{
	padding:4% 10% 0 10%;
	height:90vh;
	/*overflow:hidden;
	box-sizing:border-box;*/
	display: flex;
	justify-content: center;
	 align-content: center;
    /*flex-wrap: wrap;*/
		}


figure{
	position:relative;
	display:inline-block;
	/*overflow:hidden;/*tout ce qui dépasse du bloc figure n'apparait pas*/
	padding:5px;
	margin-left:2px;
	margin-right:2px;
		}
img{
	max-width:100%;	
		}


.bordimage{ /*cadre ombré aux images*/
	border: 1px solid #ddd;
	border-radius: 1px;
	padding: 5px;
	height:70%;
	box-shadow: 1px 1px 5px rgba(3, 3, 3, .2);/*ombrage*/ 
	display: block;
	margin: auto;
	object-fit:cover; /*rajouté pour éviter étirement sur iphone*/
}
	
.ef1  img{
  display: block;
  max-width:100%;
  /*position: relative;*/
  filter: grayscale(0%);/*en couleur*/
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
  -webkit-transform:  scale(1);
  -ms-transform:  scale(1);
  transform:  scale(1);
  margin: 0 auto;
 /*box-shadow: 3px 3px 10px #555;/*ombrage pour donner aspect bouton*/ 
  }
  
    
.ef1:hover img{
	 filter: grayscale(85%);/*on remet la couleur*/	 
  -webkit-transform: scale(1.03) ;
  -ms-transform: scale(1.03));
  transform: scale(1.03) ;
  /*-webkit-transform: scale(1.05) rotate(-0.5deg); 
   -ms-transform: scale(1.05) rotate(-0.5deg);
   transform: scale(1.05) rotate(-0.5deg);si en plus on voulait une légère rotation*/
    
}

.textblanc{
	color:#ebe8e8; /*gris très clair pour écriture sur fond sombre*/
}

#realisations{
/*background: no-repeat url("imagesterre/fond_terre.jpg");*/
	background-color:white;	
}

h2{
	display:inline-block;
	padding-top:22px;
	padding-bottom:22px;
	padding-left:20px;
	padding-right:20px;		
	border: solid 2px white;
	border-radius: 40px;
	/*background-color:#944913; /*roux*/
	background-color:hsl(25, 21%, 69%);/*gris*/
	text-align:center;
	font-weight:bold;
	font-size:1.3rem;
	letter-spacing: 0.3rem;
	text-transform:uppercase;
	/*font-family: 'Quicksand', sans-serif;*/
	font-family: 'Macondo', sans-serif;		
		/*color:#0C91A4;*/
	color:white;	
		}


h3{
	/*font-size:0.7rem;*/
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:0.85rem;
	font-weight:bold;
	padding-top:15px;
	padding-bottom:1px;
	font-family: 'Anaheim', sans-serif, Arial;
	color:rgb(160,160,160);
	text-align: center;
}


p{
	margin-top:5px; /*pour éviter que le texte soit collé sous l'image */
	font-family: 'Anaheim', sans-serif;
	/*font-family: Helvetica, Arial, sans-serif;*/
	/*font-size:0.7rem;
	line-height: 1.1rem;*/
	font-size:14px;/*pour les vieux navigateurs qui ne lisent pas les rem*/
	font-size:0.85rem;
	line-height:18px;
	line-height:1.2rem;
	color:rgb(160,160,160);
	text-align: center;
}

#realisations, #demarche, #expositions,#contact{
	text-align:center;
}

#expositions{
	margin-bottom:80px;
}
#salamandres,#anoures{
	/*background-color:#195B6B;  /*bleu canard*/
	background-color:hsl(40, 3%, 22%);
	margin-left:-15px;
	margin-right:-15px;
	}

#Ors{
	background-color:hsl(36, 65%, 42%);
	margin-left:-15px;
	margin-right:-15px;
}

#blaireaugenette{
	background-color:hsl(210, 4%, 11%);
	margin-left:-15px;
	margin-right:-15px;
} 

#demarche{
	background-color:#195B6B;
	padding-bottom:5vh;
}

	.technique p, .technique h3{
	text-align:start;
	}
	
	.technique h3,#telephone p{
	font-size:1rem;
	/*font-size:0.8rem;*/
	line-height: 1.2rem;
	letter-spacing: 0.1rem;
	text-transform:uppercase;
	padding-top:20px;
	/*padding-bottom:10px;*/
	/*font-family: 'Yanone Kaffeesatz', sans-serif;*/
	font-family: 'Barlow Semi Condensed', sans-serif, Arial;
	/*font-family:Arial;*/
	/*font-weight:bold;*/
	/*color:rgb(180,180,180);*/
	}

#date{
	padding-top:35px;
	}

#contact{
background-color:hsl(213, 9%, 25%);
}
#textecontact{
	padding:5% 20% 0 5%;
}
#telephone {
		width:100%;
		text-align:center;
		padding-top:40px;
		padding-bottom:40px;		
			}
			
	#mel {
		width:100%;
		text-align:center;
		padding-top:5px;
		padding-bottom:5px;
	}
		#mel p{
			font-family: 'Barlow Semi Condensed', sans-serif, Arial;
		color:white;
	font-weight:bold;
	font-size:1.2rem;
		}	
			
	#mel p:before {
    content: 'fabricehibert';	
}

	#mel p:after {
    content: '@protonmail.com';
	}

	#telephone h2, #telephone p a{
		color:white;
	}
	#telephone p a{
		font-weight:bold;
		font-size:1rem;
	}
	
	
	
/********************************************/
/*essai flex*/


.container{
	display: -webkit-box;
	display: -webkit-flex;
	display: -ms-flexbox;
	display:flex;
	flex-direction:row;
	flex-wrap:nowrap;
	justify-content:space-around;
	align-items:flex-end;
	max-width:100vw;	
	padding:20px;
	box-sizing: border-box;
	
	
}

.item{
	flex-grow:1;
	max-width:40vw;
	scale:1.01;	
	}

#aventure{ /*texte démarche 33% à côté rhino*/
	width:33%;
	}


#testresolution p {
    background-color: pink;
  }

@media (-webkit-min-device-pixel-ratio: 0.5
) {
 #testresolution p {
    background: red;
  }
}

@media (-webkit-min-device-pixel-ratio: 1
) {
 #testresolution p {
    background: pink;
  }
}

@media (-webkit-min-device-pixel-ratio: 2
) {
 #testresolution p {
    background: black;
  }
}

@media (-webkit-min-device-pixel-ratio: 3
) {
	
 #testresolution p {
    background: blue;
  }

}
	
		
/*******************************************************************************/
									/* RESPONSIVE*/
/******************************************************************************/
	
/* pour écran taille tablette*/
/*@media screen and (min-width:768px) and (max-width:1030px){*/
	@media screen and (min-width:768px) and (max-width:1200px){
	
  

h3, p{
	font-size:18px;/*pour vieux navigateurs qui lisent pas rem*/
	font-size:1.3rem;
	line-height:20px;
	line-height:1.6rem;
	}


.bloccentral{   /*moins d'espace sur les bords*/
	padding:4% 5% 3 15%;
		}
		
figure{  /*les images se collent moins*/
	padding:5px;
	margin-left:5px;
	margin-right:25px;
		}
}
	
	.item{
	flex-grow:1;
	max-width:80vw;
	scale:1.01;
	margin:auto;
	padding-top:30px;
	}
	
	#aventure{ /*texte démarche passe sous l'image et prend la largeur de page pour meilleure lisibilité*/
	width:100%;
	}

/********************************mode taille d'écran de mobile ************************/
@media screen and (max-width: 767px){

	
		
	#sectionaccueil{
		background-attachment: local;
		background-position:0vh 5vh;
		min-width:100vw;
		height:60vh;
		background-size: cover;
	}
	
	#logo{
	padding:20px;
	position:static;
	margin:auto;
	font-family: 'Josefin Sans', sans-serif;
	font-size:1.2rem;
	font-weight:300;
	font-style:normal;
	letter-spacing:0.03em;
	color:white;
	z-index:3;
	}
	
	#h1accueil{
	text-align:center;
	font-weight:400;
	font-size:2.3rem;
	letter-spacing: 0.1rem;
	padding-top:50vh;
	padding-bottom:20px;
	/*font-family: 'Macondo', sans-serif;	*/
	font-family: 'Macondo', sans-serif;	
	color:white;	
	text-transform: uppercase;
	}

	#soustitreaccueil{
	text-align:center;
	font-size:2rem;
	line-height:2rem;
	letter-spacing: 0.1rem;
	padding-top:4px;
	padding-bottom:20px;
	font-family: 'Josefin Sans', sans-serif;
	font-weight:200;
	color:white;	
	}

#flechebas{
	position:absolute;
	display:block;
	bottom:15vh;
	width:100vw;
	text-align:center;
	/*opacity:0.5;*/
	margin-left:-15px;
	overflow:hidden;
}	
	
	h3, p{ /*écriture plus grosse*/
	font-size:18px;/*pour vieux navigateurs qui lisent pas rem*/
	font-size:1.3rem;
	line-height:20px;
	line-height:1.6rem;
	}
	
	.bloccentral{		
	padding:4% 3% 0 3%;
	/*min-height:100vh;*/
	max-height:100vh; /*rajouté à la place de min-height (ligne précédente) pour tester si mieux pour iphone, mais en fait pas mieux*/
	width:100%;
	display: inline; 
	/*box-sizing:border-box;*/
	/*overflow:hidden;*/
	}
	
	.bloccentral figure{
	padding:10% 15% 10% 15%;
	height:50%;
	/*width:100%;*/
	display: inline-block;
	overflow:hidden;
	/*box-sizing:border-box;*/
	max-width:100vw;
	margin: auto;
	}
	
	.textblanc{
	color:rgb(160,160,160); /*gris très clair pour écriture sur fond sombre*/
	}

	#salamandres,#anoures, #Ors, #blaireaugenette{
	background-color:white;		
	}
	
	#headergalerie{
		position:static;
	}
	
	#menu{
	top:0px;
	width:100%;
	right:0;
	z-index:5;
	position:static;
	}
		
	.tab li {
		width:100%;
			}
			
	.trigram{
		opacity:1;
	}
	
		
	/*#menuaccueil{
		font-family: 'Barlow Semi Condensed', sans-serif, Arial;
		font-size:1.1rem;
		/*font-size:30px;
		color:white;
		background-color:rgb(150,150,150);
		cursor:pointer;
		position:fixed;
		top:15px;
		left:20px;
		z-index:1;
		display:block;
	}*/
	
	#menu{
		display:none;
	}
	
	
	.w33,.w66{
	width:100%;
	padding-top:4%;
	padding-bottom:5%;
	}
	
  #aventure{ /*texte démarche passe sous l'image et prend la largeur de page pour meilleure lisibilité*/
	width:100%;
	}
	
	#textecontact{
		padding:5% 5% 0 5%;
	}

	#textecontact p, .technique h3, .technique p{
		color:white;
	}
	
	
	.container{
	display:flex;
	flex-direction:column;
	flex-wrap:wrap;
	justify-content:space-around;
	align-items:flex-end;
	margin:auto;
	padding:0px;
	}

	.item{
	flex-grow:1;
	max-width:80vw;
	scale:1.01;
	margin:auto;
	padding-top:0px;
	}
	
	.item figure{
		padding-top:60px;
	}
	

}

/********************************mode taille d'écran de mobile ***********************/


@media screen and (max-width: 719px){ /*cible le iphone de Frédérique 320x450 */
	
	
	#h1accueil{
	text-align:center;
	font-weight:400;
	font-size:2rem;
	}
		
	#mel p{
	font-size:0.8rem;	
		}	

	
}