/* CSS Document */

/*-FONT------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');


@font-face {    font-family: 'abc_ginto_regular';    src: url('../font/ABCGintoNordVariable-Trial.woff2') format('woff2'),   url('../font/ABCGintoNordVariable-Trial.woff') format('woff');    font-weight: normal;    font-style: normal;}

@font-face {    font-family: 'abc_ginto_black';    src: url('../font/ABCGintoNordVariable-Trial.woff2') format('woff2'),         url('../font/ABCGintoNordVariable-Trial.woff') format('woff');    font-weight: 900;
}

@font-face {    font-family: 'abc_ginto_thin';    src: url('../font/ABCGintoNordVariable-Trial.woff2') format('woff2'),         url('../font/ABCGintoNordVariable-Trial.woff') format('woff');    font-weight: 200;
}


/*-----------------------------------------------------------------------*/

*,
*:before,
*:after {
  box-sizing: border-box;
}

/*--REGULAR STYLE--------------------------------------------------------*/

body{
	margin: 0;
	padding: 0!important;
	
	background-color: #FFF5F0;
}

#adhesion, header, #aProposTop, #formContact{
	padding-top: 56px;
}


.degradeOrangeFon{
background: rgb(255,242,235);
background: -moz-linear-gradient(180deg, rgba(255,242,235,0.4318102240896359) 10%, rgba(247,92,4,0.5130427170868348) 100%);
background: -webkit-linear-gradient(180deg, rgba(255,242,235,0.4318102240896359) 10%, rgba(247,92,4,0.5130427170868348) 100%);
background: linear-gradient(180deg, rgba(255,242,235,0.4318102240896359) 10%, rgba(247,92,4,0.5130427170868348) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#fff2eb",endColorstr="#f75c04",GradientType=1);
}
/*-GENERAL------------------------------------------------------*/
span{	 font-family: 'abc_ginto_black';}
p{	font-family: "Montserrat", sans-serif;}
h1{	font-family: "Montserrat", sans-serif;}
h2{	font-family: 'abc_ginto_black';}
h3{	font-family: 'abc_ginto_black';	}
h4{	font-family: 'abc_ginto_black';}
ul{	list-style-type: none;}



.customBouton{
	align-items: center;
	background-color: #FFF5F0;
	border: 2px solid #f75c04;
	color: #f75c04;
	cursor: pointer;
	display: inline-flex;
	fill: #f75c04;
	font-family: "Montserrat", sans-serif;
	font-size: 1.2em;
	font-weight: 600;
	height: 48px;
	justify-content: center;
	line-height: 24px;
	text-align: center;
	text-decoration: none;
	transition: all .3s;
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
	
	width: 200px;
}

.customBouton:focus {
  color: #171e29;
}

.customBouton:hover {
  border-color: #000;
  color: #000;
  fill: #f75c04;
}

a:link, a:visited{
	text-decoration: none;
	color: #f75c04;
	
	font-family: abc_ginto_regular;
}

a:hover, a:active{
	color: #000;
}



/*-NAVIGATION------------------------------------------------------------*/
.bg-custom{
	font-family: "Montserrat", sans-serif;
	background-color: #FFF5F0!important;
	color: #000!important;
}

.navbar-light.active{
	font-family: "Montserrat", sans-serif!important;
	font-weight: bolder!important;
}

.navbar-nav a:link, .navbar-nav a:visited{
	color: #000000;
}

.navbar-nav a:hover, .navbar-nava:active{
	color: #f75c04;
}

.container-fluid, .container{
	overflow-x: hidden;
}


.navbar-toggler {
	background-color: #f75c04; 
	border-color: #f75c04;
}


/*-HEADER----------------------------------------------------------------*/
header #logoTourne{	width: 20%;}
#logo-header {font-size: 10em; font-family: abc_ginto_black;}

#background1{
	position: absolute;
	top: 60%;
	left: 90%;
	transform: translate(-50%, -50%);
	z-index: -7;
	width: 800px;
}
	#background2{
	position: absolute;
	top: 20%;
	left: 70%;
	transform: translate(-50%, -50%);
	z-index: -8;
	width: 800px;
}

#background3{
	position: absolute;
	top: 80%;
	left: 0%;
	transform: translate(-50%, -50%);
	z-index: -10;
	width: 800px;
	}

/*-TOPLA c'est quoi------------------------------------------------------*/

/*#toplaEstQuoi{padding-top: 100px;}*/

/*-METIER----------------------------------------------------------------*/

#metier{
	padding-top: 60px;
}

#metier{
	padding-bottom: 100px;
	background-image: url("../img/forme/bouba-demiteinte.svg");
	background-repeat: no-repeat;
	background-position: bottom;
}

		.overlay {
		display: none;
		position: fixed;
			
		border: 2px solid #000;
		padding: 10px 50px;
		background: rgb(255,255,255);
		background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(211,181,244,1) 100%);
		background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(211,181,244,1) 100%);
		background: linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(211,181,244,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#d3b5f4",GradientType=1);
		z-index: 999;
	}

	.overlay h3{
		font-size: 1.8em;
		font-family: abc_ginto_regular;
		line-height: 1em;
	}

	.overlay h5{
		font-size: 1em;
		font-family: abc_ginto_regular;
		border-bottom: 2px solid #000;
		padding-bottom: 5px;
	}

	.overlay ul{
		margin-bottom: 50px;
	}

	.show-overlay {
		display: block;
	}

	#overlayImage{
		display: block;
		margin: auto;
	}

	#closeOverlay{
		font-size: 3em;
		line-height: 1em;
		font-family: abc_ginto_regular;
	}


	#categorieListe{
		font-size: 1.4em;
		font-family: "Montserrat", sans-serif;
		font-weight: 900;
		 
		
	}

	#categorieListe li:hover, #categorieListe li:active{
		color: #a64ffa;
	}

 h4{
	padding: 0px 0px;
	font-family: abc_ginto_thin;
	font-size: 1.3em;
	font-style: italic;
	margin-bottom: 30px;
}
   
#aPropos{
	margin-bottom: 100px;
}

/*-A PROPOS--------------------------------------------------------------*/
	
	#background12{
	position: absolute;
	top: 2900px;
	left: 85%;
	transform: translate(-50%, -50%);
	z-index: -8;
	width: 800px;
}

	#background13{
	position: absolute;
	top: 3200px;
	left: 0%;
	transform: translate(-50%, -50%);
	z-index: -6;
	width: 900px;
	}
	
#solidariteImage, #envirImage, #partageImage{
		width: 200px; 
		height: 200px;
}
	
/*-NEWSLETTER------------------------------------------------------------*/
#newsletter h3{
	font-size: 1em;
	font-family: abc_ginto_regular;
}

	#newsletter{
		padding: 50px 0px;
	}

	


/*-REMERCIEMENT---------------------------------------------------------*/

#remerciement{
	padding: 10px 10px 50px;
}

/*-FOOTER--------------------------------------------------------------*/
	
footer{
	font-size: 1em;
	font-style: italic;
	}

footer{
	color: #000;
	font-family: abc_ginto_thin;
}
	
footer h5{
	font-family: abc_ginto_thin;
}

	
footer a:link, footer a:visited{
	color: #000;
	text-decoration: none;
}
	
footer a:hover, footer a:active{
	color: #f75c04;
	font-family: abc_ginto_regular;
	}


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



#logoTourneApropos{
	width: 11%;
}

#aProposTop h1{
	font-family: abc_ginto_black;
	font-size: 8em;
}

#aProposTop a:link, #aProposTop a:visited{
	font-size: 1.5em;
}

#aProposTop a:hover, #aProposTop a:active{
	
}

#aPropos img, #interet img{
	width: 80%;
}

#background4{
	position: absolute;
	top: 10%;
	left: 50%;
	
	z-index: -10;
	width: 1500px;
}
	
	/*-VALEURS----------------------------------------------------------*/
#valeurs{
	margin-top: 150px;
	margin-bottom: 150px;
}

#valeurs img{
	height: 300px;
	width: auto;
}
	/*-ROLE--------------------------------------------------------------*/

#role{
	margin-top: 50px;
}

#role img{
	height: 200px;
	width: auto;
}

#background8{
	position: absolute;
	top: 1500px;
	left: 0%;
	transform: translate(-50%, -50%);
	z-index: -7;
	width: 900px;
	height: auto;
}
	#background10{
	position: absolute;
	top: 1500px;
	left: 85%;
	transform: translate(-50%, -50%);
	z-index: -8;
	width: 800px;
}

	#background9{
	position: absolute;
	top: 1900px;
	left: 20%;
	transform: translate(-50%, -50%);
	z-index: -6;
	width: 600px;
	}

	#background11{
	position: absolute;
	top: 3200px;
	left: 0%;
	transform: translate(-50%, -50%);
	z-index: -6;
	width: 900px;
	}

	/*-BASELINE--------------------------------------------------------------*/

#ToplaResultat{
	width: 100%;
	font-size: 1.3em;
	
}
#ToplaResultat h4{
	max-width: 1500px;
	height: 200px;
	padding-top: 50px;
}

#tricatel{
	margin-top: 120px;
}

/*#tricatel{
	margin:100px 0px 0px;
}*/

#bejune{
	margin-top: 100px;
	margin-bottom: 100px;
}
/*-MEDIA QUERIES---------------------------------------------------------*/

@media (max-width: 576px) {

/*-HEADER-----------------------------------------------------------*/
	header #logoTourne{
		width: 20%;
	}
	
	
	#logo-header{
		margin-top: 100px;
		font-size: 5em ;
		font-family: abc_ginto_black;
	}
	
	#background1{
		position: absolute;
		top: 60%;
		left: 90%;
		transform: translate(-50%, -50%);
		z-index: -7;
		width: 800px;
	}
	#background2{
		position: absolute;
		top: 20%;
		left: 70%;
		transform: translate(-50%, -50%);
		z-index: -8;
		width: 800px;
	}

	#background3{
		position: absolute;
		top: 80%;
		left: 0%;
		transform: translate(-50%, -50%);
		z-index: -10;
		width: 800px;
	}
	
	header button{
		
	}
	
	header h1{
		margin-bottom: 150px;
	}
	

	/*METIER*/
	#metier{
		margin-top: 100px;
		padding-bottom: 50px;
		
		
	}
	
	.metierEtCategorie{
		background-image: url("../img/forme/bouba-demiteinte.svg");
		background-position: bottom;
		background-repeat: no-repeat;
	}	
	
	#categorieListe ul{
		margin:0;
	}
	
	.overlay{
		top: 60px;
		right: 0;
		width: 100%;
		height: 100%;
		
	}
	
	/*-PAGE A PROPOS----------------------------------------------------------------*/
	
	#aProposTop h1{
		font-size: 5em;
	}
	
	#logoTourneApropos{
		width: 20%;
	}
	
}


@media (min-width: 768px) {
	
	
	h1{
		font-size:3em;
	}

/*-HEADER----------------------------------------------------------------*/
	header #logoTourne{
		width: 18%;
	}
	
	#logo-header{
		margin-top: 100px;
		font-size: 10em;
		font-family: abc_ginto_black;
	}
	
	#background1{
		position: absolute;
		top: 60%;
		left: 90%;
		transform: translate(-50%, -50%);
		z-index: -7;
		width: 800px;
	}
	#background2{
		position: absolute;
		top: 20%;
		left: 70%;
		transform: translate(-50%, -50%);
		z-index: -8;
		width: 800px;
	}

	#background3{
		position: absolute;
		top: 80%;
		left: 0%;
		transform: translate(-50%, -50%);
		z-index: -10;
		width: 1500px;
	}
	
	header button{
		margin-right: 20px;
	}
/*-TOP C’EST QUOI -------------------------------------------------------*/
/*-METIER----------------------------------------------------------------*/



	
		.overlay h3{
		font-size: 1.8em;
		font-family: abc_ginto_regular;
		line-height: 1em;
	}

	.overlay h5{
		font-size: 1em;
		font-family: abc_ginto_regular;
		border-bottom: 2px solid #000;
		padding-bottom: 5px;
	}

	.overlay ul{
		margin-bottom: 50px;
	}

	.show-overlay {
		display: block;
	}
/*-A PROPOS -------------------------------------------------------------*/
/*-INTERESSE-------------------------------------------------------------*/
/*-NEWSLETTER------------------------------------------------------------*/
/*-REMERICEMENT----------------------------------------------------------*/
/*-FOOTER----------------------------------------------------------------*/
	
/*-NEWSLETTER------------------------------------------------------------*/

}

@media (min-width: 992px) {

/*-GENERAL---------------------------------------------------------------*/

p{

	font-size: 1.2em;
}

h1{

	font-size: 6em;
}

h2{
	font-size: 3em;
}

#remerciement h2, #newsletter h2{
	font-size: 2em;
}

h3{
	font-size: 3em;
}

h4{
	font-size: 1.5em;
}

ul{
	list-style-type: none;
	padding: 0;
	margin: 0;
}

/*-NAVIGATION------------------------------------------------------------*/
	
/*-HEADER---------------------------------------------------------------*/

	header h1{
		color: #282828;
	}
	header #logoTourne{
		width: 18%;
	}
	
	#logo-header{
		margin-top: 100px;
		font-size: 18em;
		font-family: abc_ginto_black;
	}
	
	#background1{
		position: absolute;
		top: 60%;
		left: 90%;
		transform: translate(-50%, -50%);
		z-index: -7;
		width: 800px;
	}
	#background2{
		position: absolute;
		top: 20%;
		left: 70%;
		transform: translate(-50%, -50%);
		z-index: -8;
		width: 800px;
	}

	#background3{
		position: absolute;
		top: 80%;
		left: 0%;
		transform: translate(-50%, -50%);
		z-index: -10;
		width: 1500px;
	}
	
	header button{
		margin-right: 20px;
	}
	
	header{
		height: 1080px;
	}
	
	header h1:nth-child(2){
		margin-top: 100px;
	}
	
/*-C'est quoi------------------------------------------------------------*/
	#toplaEstQuoi{
		margin-top: 100px;
		margin-bottom: 100px;
	}
	
	
	
/*-METIER------------------------------------------------------------*/
	.overlay {
		display: none;
		position: fixed;
		bottom: 0;
		right: 0;
		width: 50%;
		height: 50%;
		
		padding: 10px 50px;
		background: rgb(255,255,255);
		background: -moz-linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(211,181,244,1) 100%);
		background: -webkit-linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(211,181,244,1) 100%);
		background: linear-gradient(180deg, rgba(255,255,255,1) 20%, rgba(211,181,244,1) 100%);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffffff",endColorstr="#d3b5f4",GradientType=1);
		z-index: 999;
	}
	
	
	.metierEtCategorie img{
		cursor: pointer;
	}

	
		.overlay h3{
		font-size: 1.8em;
		font-family: abc_ginto_regular;
		line-height: 1em;
	}

	.overlay h5{
		font-size: 1em;
		font-family: abc_ginto_regular;
		border-bottom: 2px solid #000;
		padding-bottom: 5px;
	}

	.overlay ul{
		margin-bottom: 50px;
	}

	.show-overlay {
		display: block;
	}

#closeOverlay{
	font-size: 3em;
	font-family: abc_ginto_regular;
}


	#overlayImage{
		display: block;
		margin: 0;
		
		width: 20%;
	}



#categorieListe li:hover, #categorieListe li:active{
	color: #a64ffa;
	cursor: pointer;
}

	#categorieListe{
		font-size: 2em;
		font-family: "Montserrat", sans-serif;
		font-weight: 900;
		
	}

	#categorieListe li:hover, #categorieListe li:active{
		color: #a64ffa;
	}

	
	
/*-A PROPOS ---------------------------------------------------------*/
	#aPropos{
		padding: 50px 0px;
	}
	
	#aPropos h3{
		font-size: 1.5em;
	}
	
#aPropos h4{
		padding: 10px 0px;
		font-size: 2em;
		margin-bottom: 30px;
	}
	
	/*.pictogrammeApropos{
		width: 400px; 
		height: 200px;
		text-align: center;
	}*/
	
/*-INTERESSE---------------------------------------------------------*/
	


	#interet{
		padding-bottom: 50px;
	}
	

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


	#newsletter{
		padding: 50px 0px 50px;
	}



/*-REMERICEMENT------------------------------------------------------*/
	
	#remerciement img{
		width: 20%;
		height: 20%;
		padding-bottom: 50px;
	}
	
	#remerciement h3{
		padding-bottom: 50px;
	}


	
/*-CONTACT------------------------------------------------------*/
	
	#contact h5{
		font-weight: 700;
	}
	
	
	/*-PAGE A PROPOS----------------------------------------------------------*/

	#aProposTop{
		padding-top: 200px;
	}

#aProposTop{}


#aProposTop h1{
	font-family: abc_ginto_black;
}
	

}