/*Header local color styles*/

.header_contact_container a{
	background: #000;
	color: #fff;
}
.header_contact_container a:hover{
	background: #39AEC2;
}
.header_w nav{
	background: #fff;
}
.header_logo{
	background: #fff;
}
.header_nav{
	background: #fff;
}
.header_logo svg .logo_path{
	fill:#000;
}

/**********MAIN TITLE**********/
.main_title{
	display: grid;
	margin: 100px 0 100px 0;
	grid-template-columns: 50px repeat(12, 1fr) 50px;
	grid-column-gap: 30px;
	grid-template-areas: 
	". . . main_title main_title main_title main_title main_title main_title main_title main_title . . .";
}
.main_title .h1{
	grid-area: main_title;
	text-align: center;
}
.main_title .h1 span{
	background: rgba(255,177,3,.7); 
	padding: 0 5px;
}


/**********SPECIAL TARIFS**********/
.special_tarifs{
	margin-bottom: 100px;
	display: grid;
	width: 100%;
	grid-template-columns: 50px repeat(12, 1fr) 50px;
	grid-template-rows: max-content max-content;
	grid-gap:80px 30px;
	grid-template-areas: 
	". . . . . special_tarifs_title special_tarifs_title special_tarifs_title special_tarifs_title . . . . ."
	". . . special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container . . .";
}
.special_tarifs_title{
	grid-area: special_tarifs_title;
}
.special_tarifs_title .h2{
	text-align: center;
	font-size: 1.4em;
	margin-bottom: 15px;
}
.special_tarifs_title p{
	grid-area: special_tarifs_title;
	text-align: center;
	font-size: .8em;
	line-height: 1.4em;
	font-variation-settings: 'wght' 350;
}
.special_tarifs_title p span{
	font-variation-settings: 'wght' 500;
}
.special_tarifs_title{
	grid-area: special_tarifs_title;
}
.special_tarifs_container{
	grid-area: special_tarifs_container;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	grid-column-gap: 30px;
}

.special_tarif{
	display: grid;
	grid-template-rows: max-content auto;
	border: 3px solid #EDF3F5;
}
.tarif_img{
	display: grid;
	justify-content: center;
	align-content: center;
	padding: 20px 0 0 0;
}
.tarif_img img, .tarif_img svg{
	width: 200px;
	height: 200px;
	display: block;
}

.special_tarif .tarif_info .h3{
	font-family: "IBM Plex Sans";
	font-size: 2em;
	line-height: 1.2em;
	text-align: center; 
}

.tarif_price{
	display: grid;
}
.tarif_price p{
	justify-self: center;
	font-size: .8em;
	text-align: center;
	line-height: 2em;
	color: rgba(0,0,0,.5);

}
.tarif_price p span{
	text-align: center;
	font-size:1.4em;
	font-variation-settings: 'wght' 500;
	color: rgba(0,0,0,.5);
}
.tarif_desc{
	margin: 35px 60px;
	font-size: .8em;
	line-height: 1.6em;
	color: rgba(0,0,0,.7);
	font-variation-settings: 'wght' 350;
}
.tarif_features{
	display: grid;
	grid-template-rows: auto;
}
.tarif_features li{
	border-top: 3px solid #EDF3F5;
	display: grid;
	grid-template-columns: 65px auto;
}
.feature_number{
	border-right: 3px solid #EDF3F5;
	text-align: center;
	font-size: .8em;
	font-variation-settings: 'wght' 700;

	display: grid;
	height: 65px;
	align-items: center;
}
.feature_desc{
	padding: 0 20px;
	font-size: .8em;
	line-height: 1.4em;
	color: rgba(0,0,0,.7);

	display: grid;
	height: 65px;
	align-items: center;
}
.tarif_contact {
	color: rgba(0,0,0,.7);
	font-size: .8em;
	margin: 20px 0;
}
.tarif_contact a{
	color: rgba(0,0,0,1);
	margin-right: 10px;
	font-weight: 500;
	font-family: "IBM Plex Mono";
}
.tarif_contact a:hover{
	color: #39AEC2;
	text-decoration: none;
}
.tarif_footnote{
	width: 70%;
	font-size: .6em;
	line-height: 1.6em;
	color: rgba(0,0,0,.7);
}
.tarif_footnote span{
	margin-right: 10px;

}




/**********SERVICES**********/
.services{
	display: grid;
	grid-template-columns: 50px repeat(12, 1fr) 50px;
	margin-bottom: 100px;
	grid-column-gap: 30px;
	grid-template-areas: 
	". . . . services_title services_title services_title services_title services_title services_title . . . ."
	". services_container services_container services_container services_container services_container services_container services_container services_container services_container services_container services_container services_container .";
}
.services_title{
	margin-bottom: 100px;
	grid-area: services_title;
}
.services_title .h2{
	text-align: center;
}
.services_title p{
	text-align: center;
	color: rgba(0,0,0,.8);
	font-variation-settings:"wght" 350;
	margin:20px auto 0 auto;
}
.services_title p a{
	font-family: "IBM Plex Mono";
	color: rgba(0,0,0,1);
	text-decoration: underline;
	font-weight: 500;

}
.services_container{
	grid-area:services_container;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: max-content;
	grid-gap: 80px;
}
.service_block:hover{
	border: 3px solid #39AEC2;
	background: #EDF3F5;
	transition: .1s ease-in;
	transform: translateY(-10px);
	box-shadow: 0 10px 20px rgba(57,174,194,.2);
}
.service_block{
	border: 3px solid #EDF3F5;
	padding: 30px;
	display: flex;
	flex-direction: column;
	gap: 30px;
	transition: .2s ease-out;
	transform: translateY(0);
}
.service_desc{
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: 20px;
}
.service_desc .h3{
	font-family: "IBM Plex Sans";
	font-weight: 500;
	font-size: 1.4em;
	margin-bottom: 30px;
}
.service_desc p{
	font-size: .8em;
	line-height: 1.6em;
	color: rgba(0,0,0,.8);
	margin-bottom: 20px;
}
.service_desc a{
	font-size: .7em;
	line-height: 1.4em;
	margin-top: auto;
}
.service_desc_price{
	width: 100%;
}
.service_desc_price .service_desc_price_item {
	font-family: "IBM Plex Sans";
    font-weight: 500;
    font-size: 1em;
	color: #000;
	margin: 20px 0 0;
}
.service_audience{
	display: grid;
	gap: 30px;
	margin-top: auto;
}
.service_point{
	display: grid;
	grid-template-columns: 30px auto;
	grid-column-gap: 15px;
	align-items: start;
}

.service_point_desc .h3{
	font-size: .7em;
	font-variation-settings: "wght" 700;
	color: rgba(0,0,0,1);
}
.service_point_desc p{
	font-size: .7em;
	font-variation-settings: "wght" 350;
	line-height: 1.6em;
	color: rgba(0,0,0,.7);
}

.service_point_img svg {
    fill: #39AEC2 !important;
    width: auto;
    height: 32px;
}
.service_point_img img {
	display: block;
	width: 32px;
	height: 32px;
	object-fit: contain;
}
.service_point_img svg path, .service_point_img svg circle,  .service_point_img svg #Solid rect {
    fill: #39AEC2 !important;
}

/*SEO BLOCK*/
.seo_block{
	padding-top:0;
}


/*MEDIA 1440*/

@media screen and (max-width: 1440px){
	.main_title{
	grid-template-columns: 10px repeat(12, 1fr) 10px;
	grid-column-gap: 30px;
	grid-template-areas: 
	". . main_title main_title main_title main_title main_title main_title main_title main_title main_title main_title . .";
	}
	.special_tarifs{
	grid-template-columns: 10px repeat(12, 1fr) 10px;
	grid-template-areas: 
	". . . . special_tarifs_title special_tarifs_title special_tarifs_title special_tarifs_title special_tarifs_title special_tarifs_title . . . ."
	". . special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container . .";
	}

	.services{
	grid-template-columns: 10px repeat(12, 1fr) 10px;
	grid-column-gap: 30px;
	grid-template-areas: 
	". . . services_title services_title services_title services_title services_title services_title services_title services_title . . ."
	". services_container services_container services_container services_container services_container services_container services_container services_container services_container services_container services_container services_container .";
	}
	
	.services_title p{
		font-size: .9em;
	}
	.services_container{
	grid-gap: 30px;
	}
	.service_desc .h3{
		font-size: 1.2em;
	}
	.service_desc p{
		font-size: .7em;
	}
}

/*MEDIA 1080*/
@media screen and (max-width:  1080px){
	
	.main_title{
	grid-template-columns: 0px repeat(6, 1fr) 0px;
	grid-column-gap: 30px;
	grid-template-areas: 
	". main_title main_title main_title main_title main_title main_title .";
	}
	.special_tarifs{
	grid-template-columns: 0px repeat(6, 1fr) 0px;
	grid-gap: 60px 30px;
	grid-template-areas: 
	". . special_tarifs_title special_tarifs_title special_tarifs_title special_tarifs_title . ."
	". special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container  .";
	}

	.feature_number{
		font-size: .7em;
	}
	.feature_desc{
		padding: 0 15px;
		font-size: .7em;
		line-height: 1.4em;
	}

	.services{
	grid-template-columns: 0px repeat(6, 1fr) 0px;
	grid-template-areas: 
	". services_title services_title services_title services_title services_title services_title ."
	". services_container services_container services_container services_container services_container services_container .";
	}

	.tarif_img img{
		width: 140px;
		height: 140px;
	}
	.special_tarif .tarif_info .h3{
		font-size: 1.8em;
	}

	.tarif_price p{
		font-size: .7em;
	}
	.tarif_price p span{
		font-size:1.4em;
	}
	.tarif_desc{
		margin: 35px 20px;
	}
	.tarif_footnote{
		width: 100%;
	}

	.services_title p{
		font-size: .9em;
	}
	.services_container{
	grid-template-columns: 1fr 1fr;
	}
}


/*MEDIA 600*/
@media screen and (max-width:  600px){
	
	.main_title{
	grid-template-columns: 0px repeat(4, 1fr) 0px;
	grid-column-gap: 20px;
	grid-template-areas: 
	". main_title main_title main_title main_title .";
	}
	.special_tarifs{
	grid-template-columns: 0px repeat(4, 1fr) 0px;
	grid-gap: 60px 20px;
	grid-template-areas: 
	". special_tarifs_title special_tarifs_title special_tarifs_title special_tarifs_title ."
	". special_tarifs_container special_tarifs_container special_tarifs_container special_tarifs_container  .";
	}

	.special_tarifs_container{
		grid-area: special_tarifs_container;
		display: grid;
		grid-template-columns: 1fr;
		grid-column-gap: 20px;
		grid-row-gap: 80px;
	}

	.feature_number{
		font-size: .7em;
	}
	.feature_desc{
		padding: 0 15px;
		font-size: .7em;
		line-height: 1.4em;
	}

	.services{
	grid-template-columns: 0px repeat(4, 1fr) 0px;
	grid-gap: 20px;
	grid-template-areas: 
	". services_title services_title services_title services_title ."
	". services_container services_container services_container services_container .";
	}

	.tarif_img img{
		width: 140px;
		height: 140px;
	}
	.special_tarif .tarif_info .h3{
		font-size: 1.8em;
	}

	.tarif_price p{
		font-size: .7em;
	}
	.tarif_price p span{
		font-size:1.4em;
	}
	.tarif_desc{
		margin: 35px 20px;
	}
	.tarif_footnote{
		width: 100%;
	}

	.services_title p{
		font-size: .9em;
	}
	.services_container{
	grid-template-columns: 1fr;
	}

}