/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=GFS+Didot&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bodoni+Moda&display=swap');

*{
  box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

header {

background-image: url("../images/arbre.jpg");
	background-repeat: no-repeat;	
	
	background-size:100%;

}

/* Basic style */
body {
	 
    padding-left: 0px;
	
	margin: 0;
	
	align-items: center;
	justify-content: center;
	background-color:#EFEBEB;
	flex-direction: column;
	display: grid;
	font-size: 18px;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	line-height: 1.5;
	margin-left: auto;
	margin-right: auto;
	
}	
	
.image-apostrophe{
	
	
	width: 70px;
}
	
	main{
		flex-direction: column;
		display:grid;
		text-align: center;
		 background-color: white;
		width: 100%;
		margin-left:auto;
		margin-right: auto;
		margin-top:0px;
		
		padding: 5px 50px 50px 50px;
		
	}	

.logo-tetiere{
	
	
	width: 200px;
}

.lettrine{
	
	float: left; 
  text-shadow:3px 3px 3px silver;  
  font-size: 4em;  
  line-height: 80%; 
  margin:-.1em 0px;
  padding-right: .1em
	  
	  
}	

.text-bio{
	
	margin-left: auto;
	margin-right: auto;
	padding: 40px 200px 20px 200px;
	 text-align: justify;
	
	margin-bottom: 40px;
	
}



.grid-container-bio {
  display: grid;
	
 grid-template-rows: auto  ;
  grid-template-columns:auto ;

	
  margin-left:auto;
	margin-right:auto;
	
	
	
	font-size:1em;
	width: 100%;
	
}

.grid-item1-bio {
 
	
  text-align: justify;
  background-color:#FFFFFF;
  width:100%;
	padding: 30px 70px 50px 70px;
	
}

.apostrophe{
	
	color: #B10F2E;
	font-family: 'GFS Didot', serif;
	font-size: 2em;
	
}

.bodoni-L{
	
		font-family: 'Bodoni Moda', serif;
	font-size: 2em;
	color: #B10F2E;
}
.bodoni{
	
	font-family: 'Bodoni Moda', serif;
	font-size: 2em;
	color: #B10F2E;
}

.sous-titre{
	
	font-size: 200;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}



	
h3{
	
	text-align: center;
}



h2 {
 
		font-family: 'Bodoni Moda', serif;
  text-align: center;

	font-weight:200;
	

	font-size: 1.5em;
	
}

h1{
	
	font-size: 3em;
}
	

a {
	text-decoration: none;
	color: #B10F2E;
}

	
/*diaporama*/

.custom-slider { display: none; }

.slide-container {
  width:100%;
	
  position: relative;
  margin: auto;
	
	z-index:50;
		padding: 0px 10px 0px 10px;
	
	
}
.prev, .next {
  cursor: pointer;
  position: absolute;        
  top: 100%;
  transform: translateY(-100%);
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color:silver;
  font-size: 30px;
  background-color: rgba(0,0,0,0);
  transition: background-color 0.6s ease;
}
.prev{ left: 15px; }
.next { right: 15px; }
.prev:hover, .next:hover {
  background-color: rgba(0,0,0,0.5);
}
.slide-text {
  position: absolute;
  color: #ffffff;
  font-size: 15px;
  padding: 15px;
  bottom: 15px;
  width: 100%;
  text-align: center;
}
.slide-index {
  color: #ffffff;
  font-size: 13px;
  padding: 15px;
  position: absolute;
  top: 0;
}
.slide-img{ 
  width: 100%; 
  height: 100%;
  object-fit: contain;
  object-position: center;
 }
.slide-dot{ text-align: center; }
.dot {
  cursor: pointer;
  height: 10px;
  width: 10px;
  margin: 20px auto 40px auto;
  background-color: #999999;
  border-radius: 50%;
  display: inline-block;
  transition: background-color 0.6s ease;
	
	
}
.active, .dot:hover { background-color: #111111; }
.fade {
  animation-name: fade;
  animation-duration: 1s;
}
@keyframes fade {
  from {opacity: 0} 
  to {opacity: 1}
}


	

	
.courriel {
	
	text-decoration: none;
	color: #B10F2E;
	font-weight: bold;
	
	
}
	

/*grille*/


.grid-container-tetiere {
  display: grid;
  grid-template-rows: auto auto;
  grid-template-columns: auto  ;
 
	
}

.grid-item-logo{
	 grid-column-start: 1; 
  grid-column-end: 1; 
  grid-row-start: 1; 
  grid-row-end: 1;
	margin-left: 50px;	
	padding-top: 40px;
	padding-bottom: 40px;
	
}

.grid-item-atelier{
	 grid-column-start: 1; 
  grid-column-end: 1; 
  grid-row-start: 2; 
  grid-row-end: 2;
	text-align: center;
	font-size: 1.2em;
	align-self: center;
  justify-self: center;

	
	
	
}

/* Desktop Styles */
@media only screen and (min-width: 1024px) {
    
}



.text-presentation {
	
	grid-column-start:1;
	grid-column-end: 4;
	grid-row-start:4;
	grid-row-end:5; 
	text-align: justify;

}







/* Navbar */
.navbar {  
 display: flex;
   padding-top: 20px;
	background-color: white;
	align-items: left;
    justify-content: left;
   position: sticky;
    width: 100%;
	top: 0px;

	
	
}

.filet {
	position: absolute;
	display: inline;
}

.filet::after {
	content: "";
	display: block;
	position: absolute;
	height: 2px;
	width: 100%;
	background-color: #B10F2E;
	transform: scale(0);
	transition: transform 0.2s ease-in-out;
	
}

.filet:hover::after {
	
	transform: scale(1);
}
	



	

.nav-ul {
    display: flex;
    margin: 0;
   
    list-style: none;
	z-index:100;
	
	
	
}



.nav-ul a {
	
margin-bottom: 20px;
	padding: 0px 70px 0px 70px;
    display:flex;
    align-items: left;
    justify-content: center;
    height: 35px;
    /*Aulieu de 60px à cause des 4px de la progressBar*/
    width: 100%;
	
    font-size: 1rem;
	text-decoration: none;
	color: black;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	font-weight: normal;
	letter-spacing: 0.1em;
	
	
		
}




/*deroulant*/


nav ul li{
	
	float: 25%;
	position: relative;
text-align: left;
	
}


nav ul::after{
	
	content: "";
	display: table;
	clear: both;
}

nav a{
	
	display: block;
	text-decoration: none;
	
	
}

nav a:hover{
	
	color: #CED0CE;
	
	
	
}

.sous{
	box-shadow: 0px 1px 2px black;
	background-color: black;
	 list-style: none;
	display: none;
	border-radius: 4px 4px 4px 4px;
	border:  dashed 1px #C70B0E;
position: absolute;
	width: 140px;
	z-index: 1000;
	opacity: 0.8;
	top: 30px;
	transition: 1s;
	padding: 0;	
		
}



nav > ul li:hover .sous{
	
	display: block;
	
}

.text-deroulant a{
	
	color: white;
	text-align: left;
	font-size: 0.7em;
	padding: 0px 0px 10px 0px;
height: 1px;
	margin-top: 20px;

}

.sous li{
	
float: none;
	width: 100%;
	
	
	
}


.deroulant > a::after{
	
	content: "";
		font-size:12px;
	
}

/* fin deroulant*/

@keyframes flou {
    from {
        transform: translateX(-20px);
        filter: blur(2px);
    }
    to {
        transform: translateX(0);
        filter: blur(0);
    }
}


img {
    max-width: 100%;
    max-height: 100%;
    height: auto;
    vertical-align: middle;
	
	
}


h1 {
	font-size:1em;
	text-transform: none;
	font-weight: 200;
	margin-bottom: 60px;
	text-align: left;
}


p {
	font-size: 12px;
	font-weight: 400;
	margin-bottom: 35px;
}


/*footer*/
.content {

    /* grow shrink basis */

    flex: 1 0 auto;
	position: absolute;
	bottom: 0;

}

.content p {

    padding: 2vw 10vw 5vw;

    text-align: justify;

}



footer {

    

    border-top: 1px dashed #000;

    width: 100%;

    background: #bcc7b6;

    color: #FFFFFF;
	
	margin-left: auto;
	margin-right: auto;

}

.content-footer {

   

    

    display: flex;

    justify-content: center;

    align-items: flex-start;

    font-size: 16px;

    padding: 20px 0 20px;
	margin-left: auto;
	margin-right: auto;

}



.bloc {

    flex-basis: 20%;

    margin: 0 50px;

}



/* contact */

.footer-contact h3,

.footer-services h3,

.footer-schedule h3,

.footer-medias h3 {

    font-size: 22px;

    padding-bottom: 20px;

}



.contact a  {
	
	 text-decoration: none;

    color: #FFFFFF;

}

.contact a active {
	
	 text-decoration: none;

    color: #FFFFFF;

}

/* Services */





.services-list,

.contact,

.media-list
{

    list-style-type: none;
	margin-left: 0px;
	padding-left: 0px;

}

.services-list li {

    padding: 2px 0;

}

.services-list a {

    text-decoration: none;

    color: #FFFFFF;

}

.services-list a:hover {

    color: rgb(3,3,3);

}





/* Medias */



.media-list {

    position: relative;

    

}

.media-list svg {

    width: 30px;

    margin: 10px 10px;

}

.media-list a {

    text-decoration: none;

    color: #FFFFFF;

    display: flex;

    align-items: center;

    font-size: 20px;

}

.pied-logo {
	
	width: 100px;
	height: 100px;
	
}

/*exemple hover sur image */
.social-btn1:active {
	
}
.social-btn1:hover {
	
	filter: brightness(100);
}

.droits p{
	padding-left: 50px;
	margin-left: auto;
	margin-right: auto;
}

/*fin exemple hover sur image */
	
	


/*Icone Hamburger*/

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    

	
	z-index:100;
	

	

}

.hamburger:first-child {
    /*1ere barre pas de margin top*/
    margin-top: 0;
}

.bar1, .bar2, .bar3 {
    margin-top: 7px;
	margin-left: 0px;
    width: 35px;
    height:3px;
    border-radius:4px;
    background-color: black;
    transition: all 0.4s;
	
}

.open .bar1, .open .bar2, .open .bar3 {
    background-color: white;
}

.open .bar1 {
    transform: translateY(450%) rotate(-45deg);
}

.open .bar2 {
    opacity: 0;
    transform: rotate(45deg);
}

.open .bar3 {
    transform: translateY(-200%) rotate(45deg);
}

.noScroll {
    /*empeche le scroll sur le body via JS*/
    overflow: hidden;
}


/**Media Queries**/




@media screen and (max-width : 600px ){
	
	
	
	
	body {
	 
	
   
	margin: 0;
	min-height:100vh;
    background-color:#EFEBEB;
	align-items: center;
	justify-content: center;
	display: grid;
	font-size: 18px;
	line-height: 1.5;
	font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
	
	
}	
	
	
	
header {
	

	background-size:cover;
	border-top: 1px dashed#B10F2E;	
	
}
	
	
	
	
.grid-container-tetiere {
 
	margin-bottom: 0px;


}
	
	

	.grid-item-logo{

	align-self: left;
  justify-self:left;
	text-align: left;
		margin-left: 20px;
	
}
	
	.logo-tetiere{
		width: 150px;
	}

	
	.navbar {  
   display: flex;
   
	
	align-items: left;
    justify-content: left;
   padding-left:20px;
    width: 100%;
	
	
}
	
	.grid-item1-texte li{
	
	margin-left: auto;
		margin-right: 30px;
		font-size: 0.9em;
	line-height: 1em;
}
	
	.grid-container-titre {
  display: grid;
	top:20px;
 grid-template-rows: auto  ;
  grid-template-columns:auto;
  margin-left:auto;
	margin-right:auto;
	
	font-size:0.8em;
}	
	
	

.text-bio{
	
	margin-left: auto;
	margin-right: auto;
	padding: 40px 20px 20px 20px;
	 text-align: left;
	
}
	
	main{
	
		
	justify-content: center;
	text-align: justify;
	padding: 20px 20px 20px 20px;
	

}
	
	h1 {
	font-size: 1em;
	font-weight: normal;
	color: black;
	text-align:justify;
	margin-left:auto;
	margin-right: auto;
	
	
}
	
	.slide-container {
  width:100%;
	
  position: relative;
  margin: auto;
	
	z-index:50;
		padding: 0px 10px 0px 10px;
	
	
}
	
	
	.grid-item-1{
	
	font-size: 0.8em;
	
}
	
	
	
	.bodoni{
	
	
	font-size: 2em;
}

.bodoni-L{
	
	
	font-size: 1.5em;
}
	
	
	
.grid-item-atelier{
	
 	margin-left: auto;
		margin-right: auto;
	align-self: center;
  justify-self:center;
	
}
	
	.sous-titre{
		
		font-size: 0.8em;
	}
	



	ul{
		
		padding-left: 0;
		padding-right: auto;
		font-size: 0.8em;
		font-weight: normal;
		
	}
	
	
	
	 .hamburger {
       
	
        display:flex;
		 margin-left: 40px;
		  padding-bottom: 20px;
    }
	

   .nav-ul {
         
        position: fixed;
        top: 230px;
		padding: 100px;
		
        left: -100%;
        width:100%;
        height: 100%;
        flex-direction: column;
        -webkit-backdrop-filter: oopacity(50%);
        backdrop-filter: oopacity(50%);
        background-color: rgba(0, 0, 0, 0.8);
        transition: transform 0.5s ease-in-out;;
    }
    .slide {
        transform: translate(100%);
    }
    .nav-ul a {
		
		font-size: 1.2em;
		font-weight: 200; 
		padding: 5px;
		margin-left: auto;
		margin-right:auto;
   
       float:left;
		color:white;
		
    
    }
    .nav-ul a:hover {
        border-radius: 0;
        animation: none;
		color:#C8C8C8;
		font-weight: 200;
		
		
    }

    article p{
        font-size: 1rem;
    }
	
	

	

.content-footer {

        max-width: 100%;

        flex-wrap: wrap;
	

    }

    .bloc {

        flex-basis: auto;

        margin: 0px 70px;

    }
	
	
@media screen and (orientation: landscape) {
	
	
	main{
		width: 100%;
		margin-left: auto;
		margin-right: auto;
	}
	
header{
		
		width: 100%;
	}
}


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



    .content-footer {

        max-width: 100%;

        flex-wrap: wrap;
		

    }

    .bloc {

        flex-basis: auto;

        margin: 20px 20px;

    }

body {
		max-width: 1200px;
		margin-left: auto;
		margin-right: auto;
	}



}




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

    .content-footer {

        justify-content: center;

        padding-top: 30px;

    }

    .bloc {

        flex-basis: 70%;

        /* margin: 10px; */

    }

    .footer-contact h3,

    .footer-services h3,

    .footer-schedule h3,

    .footer-medias h3 {

        padding-bottom: 5px;

    }



}
	
	
		
		
	}

/*Desktop View*/

@media screen and (min-width: 1024px) {
	
	body {
		
		
		width:1400px;
		margin-left: auto;
		margin-right: auto;
	}
	.text-services{
	
	margin-left: auto;
	margin-right: auto;
		margin-top: 30px;
		
	padding: 40px 70px 20px 70px;
	 text-align: justify;
}

}