/* --------------- TYPOGRAPHIES --------------- */
@font-face {
    font-family: 'feroniapi';
    src: url('webfonts/feroniapi.woff2') format('woff2'),
         url('webfonts/feroniapi.woff') format('woff');
    font-weight: normal;
    font-style: normal;
			}

@font-face {
    font-family: 'gilroy-extrabold';
    src: url('webfonts/gilroy-extrabold.woff2') format('woff2'),
         url('webfonts/gilroy-extrabold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
			}

    @font-face {
    font-family: 'gilroy-medium';
    src: url('webfonts/gilroy-medium.woff2') format('woff2'),
         url('webfonts/gilroy-medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
			}
/* * License URL: https://www.fontspring.com/licenses/radomir-tinkov/webfont*/


/* --------------- DEBUT NAVIGATION MENU --------------- */


* {
  margin: 0;
  padding: 0;
}


header {
	height:70px;
	width:80%;
	margin:auto;
	border-bottom:solid;
  	border-bottom-color:#001ac4;
  	min-width:600px;
  	padding-top:15px;
}

nav a {
	text-decoration: none;
	color:#001ac4;	
}


nav{
	padding-top:20px;
	display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;	
}

/* ------ MENU DROITE ------*/
#menu-droite{
	font-family: gilroy-extrabold, sans-serif;
	width:500px;
	display: flex;
  	flex-direction: row;
  	align-items: center;
  	justify-content: space-between;
}

#menu1{
	text-decoration: none;
	height:25px;
	width:100px;
	display: flex;
	justify-content: center;
	align-items: center;

}

#menu1:hover a{
	color:white;
}

#menu1:hover{
	background-color:#ff92a6;
}

#menu1:active{
	background-color:#ff92a6;
}

#menu1 a:visited{
	background-color:#ff92a6;
}

#menu1 a:visited:hover {
	text-decoration: none;
	color:white;
}

#menu2{
	text-decoration: none;
	height:25px;
	width:80px;
	display: flex;
	justify-content: center;
	align-items: center;
}

 #menu2:hover a{
 	color:white;
}

#menu2:hover{
	background-color:#ff92a6;
}

#menu2:active{
	background-color:#ff92a6;
}

#menu2 a:visited{
	background-color:#ff92a6;
}

#menu2 a:visited:hover {
	color:white;
}

#menu3{
	text-decoration: none;
	height:25px;
	width:90px;
	display: flex;
	justify-content: center;
	align-items: center;
}

 #menu3:hover a{
 	color:white;
 }

#menu3:hover{
	background-color:#ff92a6;
}

#menu3:active{
	background-color:#ff92a6;
}

#menu3 a:visited{
	background-color:#ff92a6;
}

#menu3 a:visited:hover {
	color:white;
}

#menu4{
	text-decoration: none;
	height:25px;
	width:85px;
	display: flex;
	justify-content: center;
	align-items: center;
}

 #menu4:hover a{
 	color:white;
 }

 #menu4:hover{
	background-color:#ff92a6;
}

#menu4:active{
	background-color:#ff92a6;
}

#menu4 a:visited{
	background-color:#ff92a6;
}

#menu4 a:visited:hover {
	color:white;
}

#menu5{
	text-decoration: none;
	height:25px;
	width:55px;
	display: flex;
	justify-content: center;
	align-items: center;
}

 #menu5:hover a{
 	color:white;
 }

#menu5:hover{
	background-color:#ff92a6;
}

#menu5:active{
	background-color:#ff92a6;
}

#menu5 a:visited{
	background-color:#ff92a6;
}

#menu5 a:visited:hover {
	color:white;
}


/* ------ MENU GAUCHE ------*/

#menu-gauche{
	font-family: feroniapi, sans-serif;
	text-decoration:none;
	height:100%;
	font-size:1.6em;
	color:#001ac4;
}

#menu-gauche a:visited:hover {
	text-decoration: none;
	color:#001ac4;
}

#menu-gauche a:visited {
	text-decoration: none;
	color:#001ac4;
}

/* --------------- FIN NAVIGATION MENU --------------- */


/* --------------- DEBUT PORTFOLIO -------------- */
main{
	margin-bottom:4%;
}

.portfolio {
	width:80%;
	margin:auto;
	display:flex;
	flex-direction:row;
	align-items: stretch;
    justify-content: space-between;	
    gap:15px;
    margin-top:30px;
}

.colonne{
	width:100%;

}

section img{
	width:100%;
	-webkit-transition: all 0.4s ease; /* Safari et Chrome */
	-moz-transition: all 0.4s ease; /* Firefox */
	-ms-transition: all 0.4s ease; /* Internet Explorer 9 */
	-o-transition: all 0.4s ease; /* Opera */
}


.colonne img:hover{
	border-radius: 30px;
}

/*.colonne img:hover{
	-webkit-transform:scale(0.95); 
	-moz-transform:scale(0.95); 
	-ms-transform:scale(0.95); 
	-o-transform:scale(0.95); 
	transform:scale(0.95);
}*/


@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.texte-projet {
    animation: fadeIn 0.3s ease-in ; /* remove infinite*/
}


.projet{
	width:100%;
	overflow:hidden;
	z-index:0;
	margin-bottom:10px;
	
}


.texte-projet{
	font-family:feroniapi, sans-serif;
	font-size:1em;
	font-weight: normal;
    font-style: normal;
    text-decoration:none;
    color:#001ac4;
}

.texte-projet a{
	font-family:feroniapi, sans-serif;
	font-size:1em;
	font-weight: normal;
    font-style: normal;
    text-decoration:none;
    color:#001ac4;
}

.texte-projet a active{
    color:#001ac4;
}

.texte-projet a visited{
    text-decoration:none;
    color:#001ac4;
}


.span-texte-projet {
	font-family:gilroy-extrabold, sans-serif;
	font-weight: normal;
    font-style: normal;
    text-decoration:none;
    color:#001ac4;
    padding-top:;
}


/* --------------- FIN PORTFOLIO -------------- */

/* --------------- CODE COMMUN -------------- */

section{
	width:80%;
	margin:auto;
	display:flex;
	flex-direction:column;
	border-bottom: solid;
    border-bottom-color: #001ac4;
    margin-bottom:20px;
}

h1{
	color:#001ac4;
	font-family: 'feroniapi', sans-serif;	
	font-size:1.6em;
	font-weight:normal;
	font-style:normal;
	text-decoration:underline;
	text-decoration-thickness:6px;
	text-decoration-skip-ink: none;
	text-align:left;
	text-decoration-color:#ff92a6;
	padding-bottom:5px;
	padding-top:20px;
}


.h2-presentation{
	color:#001ac4;
	font-family: 'feroniapi', sans-serif;	
	font-size:1.5em;
	font-weight:normal;
	font-style:normal;
	text-decoration:underline;
	text-decoration-thickness:5px;
	text-decoration-skip-ink: none;
	text-align:left;
	text-decoration-color:#ff92a6;
	padding-bottom:5px;

}

h3{
	color:#001ac4;
	font-family: 'gilroy-extrabold', sans-serif;	
	font-size:0.9em;
	font-weight:normal;
	font-style:normal;
	text-align:left;
}

.titre-prix {
	color:#ff92a6;
	font-family: feroniapi, sans-serif;
	font-size:1.3em;
	font-weight:normal;
	font-style:normal;
}

p{
	color:#001ac4;
	font-family: 'gilroy-medium', sans-serif;	
	font-size:1.15em;
	font-weight:normal;
	font-style:normal;
}

/* ------------ DEBUT FOOTER ----------- */

footer{
	color:#001ac4;
	display:flex;
	flex-direction: column;
	align-items: center;
	font-size:0.7em;
	text-align:center;
	padding-bottom:3%;
}

#logos{
	height:3em;
	padding-bottom:1%;
}

#logos a{
	text-decoration:none;
}

#logos img{
	height:100%;
	padding-right:0.3em;
	padding-left:0.3em;
}

footer a{
	color:#001ac4;
	text-decoration:underline;
}

footer a:hover{
	text-decoration:none;
}

footer a:visited{
	color:#001ac4;
}

footer a:active{
	color:#001ac4;
}

/* ------------ FIN FOOTER ----------- */



/* --------------- PAGE A PROPOS ----------*/

.grande-rubrique{
	margin:auto;
	display:grid;
	align-items: top;
	grid-template-columns:1fr 1fr;
    gap:20px;

    margin-bottom:0px;
}

.grande-rubrique-ateliers{
	margin:auto;
	display:grid;
	align-items: top;
	grid-template-columns:66.5% 32.5%;
    gap:20px;
    margin-bottom:0px;
}

.grande-rubrique img{
	width:85%;
}

#image-contact{
	width:85%;
	margin:auto;
	padding-bottom: 10px;
}


.photo-portrait{
	background-color:#001ac4;
	height:100%;
	width:100%;  
	display: flex;
  	align-items: center;
  	justify-content: center;
}


/* --------------- PAGE ATELIERS --------------- */
aside p{
	font-family: gilroy-medium, sans-serif;
	color:#ff92a6;
	font-size:1em;
}

aside a{
	font-family: feroniapi, sans-serif;
	text-decoration: none;
	color:#ff92a6;
	font-size:1em;
}

aside span{
	font-family: gilroy-extrabold, sans-serif;
	font-style: normal;
	font-weight: normal;
}


.presentation{

    justify-content: center;
   	display: grid;
  	grid-template-columns: 1fr 1fr 1fr;
  	gap:20px;
}

.presentation-colonne{
	display: flex;
  	align-items: left;
  	justify-content: top;
  	flex-direction:column;
}

.presentation-colonne img{
	width:100%;
}


.presentation-colonne p{
	color:#001ac4;
	font-family: 'gilroy-medium', sans-serif;	
	font-size:0.9em;
	font-weight:normal;
	font-style:normal;
	text-align:left;
}


.presentation-colonne-texte{
	display: flex;
  	justify-content: bottom;
  	flex-direction:column;
}

.presentation-colonne-texte p{
	font-size:1.1em;
}

.presentation-colonne-texteA{
	padding-bottom:20px;
}


.a-propos{
	padding-bottom:25px;
}
.texte-presentation{
	color:#001ac4;
	font-family: 'gilroy-extrabold', sans-serif;
		
}

.sous-titre-projet{
	color:#001ac4;
	font-family: 'feroniapi', sans-serif;	
	font-size:1em;
}
.ateliers{
	padding-bottom:40px;
}

.ateliers img:hover{
	border-radius:30px;
}

.texte-grande-rubrique{
	padding-bottom:20px;
}

/* --------------- PAGE CONTACT --------------- */


#contact{
	height:30%;
	width:100%;

}

#contact img{
	width:5%;
	padding-top:8px;
	padding-right:8px;
}


#contact a{
	text-decoration: none;
}

#contact a:visited{
	text-decoration: none;
}

.mail{
	display:none;
}


/* ----------------  PAGE PROJET ------------------- */

.page-projet{
	border-bottom: none;
	width:80%;
}

.page-projet2{
	padding-bottom: 5%;
}
/* -----  SLIDER -------- */

.fade {
  -webkit-animation-name: fade;
  -webkit-animation-duration: 0.8s;
  animation-name: fade;
  animation-duration: 0.8s;
}

@-webkit-keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}

@keyframes fade {
  from {opacity: .4}
  to {opacity: 1}
}


#slider img{
	width:100%;
}

#slide1{
	z-index:7;
}

#slide2{
	z-index:6;
	display:none;
}

#slide3{
	z-index:5;
	display:none;
}

#slide4{
	z-index:4;
	display:none;
}

#slide5{
	z-index:3;
	display:none;
}


#slide6{
	z-index:2;
	display:none;
}

#slider{
	width:100%;
	height:100%;
	postion:relative;
	margin-top:20px;
}

/* -------  BOUTONS ------- */

#buttons{
	z-index:1;
	position:absolute;
	width:82%;
	margin-top:26%;
	margin-left:-1%;
}


#button_left{
	float:left;
	height:25px;
	width:25px;
	cursor: pointer;
	z-index:1;
}


#button_right{
	float:right;
	height:25px;
	width:25px;
	cursor: pointer;
	z-index:1;
}


#button_right:active{
	transform:translateY(4px);
}


#button_left:active{
	transform:translateY(4px);
}

section span{
	font-family: gilroy-extrabold, sans-serif;
}

.mentions{
	width:50%;
	padding-bottom: 20px;
}
/* ------------ FIN NAVIGATION PORTFOLIO ----------- */

/* ------------ MEDIA QUERY - RESPONSIVE ----------- */

label, #toggle, .main_pages
{
    display: none;
}




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

	#menu-droite{
		display:none;
	}

	.portfolio{
		flex-direction:column;
		orientation:portrait;
	}

	header{	
		height:60px;
		width:80%;
		margin:auto;
		border-bottom:solid;
  		border-bottom-color:#001ac4;
  		min-width:100px;
  		padding-top:5px;
  	}

	#menu-gauche a{
		font-size:0.9em;
	}


	#menu-gauche {
		position:relative; 

	}

	label {
        display: flex;
  		flex-direction: row;
  		align-items: center;
  		justify-content: flex-end;
        margin: 0 auto;
        font-size: 1.5em;
        color: #001ac4;
        cursor: pointer;
    }

	nav {
		align-items: start;
	}

    nav .main_pages {
        display: none;
        flex-direction: column;
        align-items: center;
        background-color: #001ac4;
        padding:10px;

    }

     nav .main_pages a {
        font-family: gilroy-extrabold, sans-serif;
        color:white;
        padding-bottom: 5px;
        padding-top: 5px;
    }

     #toggle:checked + .main_pages {
        display: flex;
        flex-direction: column;
        align-items: center;
        position:relative;
        margin-right:0px;
    }

   	.grande-rubrique-ateliers{
   		display: flex;
        flex-direction: column;
   	}
    
    .grande-rubrique{
   		display: flex;
        flex-direction: column;
   	}

   	.photo-portrait img{
   		padding:5px;
   	}

   	.presentation{
   		display: flex;
        flex-direction: column;
   	}

   	.presentation-colonne-texteA{
	padding-bottom:20px;
	}

	.presentation{
  	gap:0px;
	}

	#image-contact{
	display:none;
	}

	#contact img{
	width:12%;
	padding-top:8px;
	padding-right:8px;
	padding-bottom: 25px;
	}

	.mentions{
	width:100%;
	}

	.page-projet2 h1{
	padding-top:0px;
	}

	.texte-grande-rubrique{
	padding-bottom:0px;
}

}