:root {
	--bordeau: #6A0404;
	--bleu: #365373;
	--bleu-clair: #7CC8E8;
	--rouge: #F99393;
}

@font-face {
	font-family: "Turbinado Pro Regular";
	src: url('../fonts/Turbinado Pro Regular.woff2') format('woff2'),
		url('../fonts/Turbinado Pro Regular.woff') format('woff'),
		url('../fonts/Turbinado Pro Regular.ttf') format('ttf');

	font-weight: normal;
}

body {
	font-family: 'Montserrat', sans-serif;
	overflow-X: hidden;
	color: var(--bleu);
	background-image: url(../images/fond-body.jpg);
	background-repeat: no-repeat;
	background-size: 500px;
	background-attachment: fixed;
	background-position: right bottom;
}

main {
	margin-top: 95px;
}

a {
	text-decoration: none;
	transition: 500ms;
	color: var(--bleu);
	display: block;
}

p {
	margin-bottom: 5px;
}

.turbinado {
	font-family: "Turbinado Pro Regular", sans-serif;
}

@media(max-width:750px) {
	body {
		background-size: 350px;
	}
}

@media(max-width:450px) {
	body {
		background-size: 250px;
		background-image: url(../images/fond-body-tel.jpg);
	}
}

@media(max-width:395px) {
	body {
		background-size: 240px;
	}
}


/*HEADER*/
.contactBarre {
	background-color: var(--bleu-clair);
	padding: 4px 3%;
}

.contactBarre a {
	color: #fff !important;
}

.nav-fixed {
	color: #3d3d3d;
}

.logo-header {
	width: 68px;
	position: absolute;
	top: 36px;
	left: 8px;
}

.logo-header img {
	width: 100%;
}

.logo-header:hover {
	transform: scale(1.1);
}

header {
	height: 95px;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 10;
	box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.2);
	background-color: #fff;
}

.ul-fixed {
	height: 62px;
	padding-right: 10px;
}

.ul-fixed li {
	padding: 10px 16px;
	margin: auto 0;
}

.nav-fixed .btn {
	padding: 8px 18px !important;
}

header li a:hover {
	transform: translateY(4px);
	transition: 200ms;
}

/* Menu responsive*/
.nav-responsive {
	display: none;
}

.nav-responsive a span {
	position: fixed;
	left: 0;
	top: 10px;
	z-index: 60;
}

.navigation {
	background-image: url(../images/fond-header-resp.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	position: fixed;
	z-index: 2;
	transform: translateX(100%);
	transition: 1000ms;
	top: 0;
}

.navigation.isopen {
	transform: translateX(0%);

}

.ul-navigation {
	margin: auto;
}

.logo-menu-resp {
	width: 180px;
	margin: 0 auto 5px auto;

}

.logo-menu-resp img {
	width: 100%;
}


.ul-navigation li {
	margin: 8px 0;
}

.ul-navigation li a {
	font-weight: 300;
	font-size: 120%;
	color: var(--bleu);
	text-align: center;

}

.navigation .transform {
	transform: translateX(-50%);

}

.btn-navigation {
	position: fixed;
	right: 17px;
	top: 53px;
	z-index: 50;
	cursor: pointer;
	width: 25px;
	height: 25px;
}

.btn-navigation .barre {

	height: 2px;
	background-color: var(--rouge);
	border-radius: 25px;
	margin: 4px 0 4px auto;
	transition: 200ms;
}

.btn-navigation .b0 {
	width: 25px;
}

.btn-navigation .b1 {
	width: 20px;
}

.btn-navigation .b2 {
	width: 15px;
}

.btn-navigation .barre.cross {

	transform: rotate(45deg);
	margin: 0;
	position: absolute;
	right: 0;
	top: 10px;
	transition: 500ms;
}

.btn-navigation .b1.cross1 {
	transform: rotate(-45deg);
	width: 25px;
}

.b2stop {
	display: none;
}

@media(max-width: 790px) {
	.contactBarre .email {
		display: none;
	}

	.contactBarre .phone {
		margin: 0 auto;
	}
}


/*FOOTER*/

footer {
	background-image: url(../images/fond-footer.jpg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	padding-top: 90px;
}

.wrapper-footer {
	margin: 0 6%;
}

footer .logo {
	width: 180px;
}

footer .logo img {
	width: 100%;
}

footer .col-g {
	width: 57%;
	margin-bottom: 20px;
}

footer .col-g ul {
	margin-bottom: 10px;
}

footer .col-d {
	width: 187px;
	margin-bottom: 10px;
}

footer .col-d h2 {
	margin-bottom: 10px;
}

footer h2 {
	font-weight: bold;
	font-size: 150%;
	margin-bottom: 5px;
}

footer p,
footer li {
	font-size: 95%;
}

footer .col-g ul li {
	margin-left: 30px;
}

footer .res-soc {
	padding-top: 15px;
	margin-bottom: 20px;
}

footer .res-soc a {
	font-size: 150%;

}

footer .res-soc a:first-child {
	margin: 0 5px 0 0;
}

footer .res-soc a:last-child i {
	transform: translateY(2px);
}

footer .col-d ul li:nth-last-child(-n+3) a {
	font-size: 80%;

}

footer .col-d ul li>i {
	font-size: 120%;
	transform: translateY(2px);
	margin-right: 3px;
}

.copyright {
	padding-top: 40px;
	font-size: 70%;
	padding-bottom: 7px;
	margin: 0;
}

@media(max-width: 1300px) {
	footer .col-g {
		width: 52%;
	}
}

@media(max-width: 1000px) {
	footer .col-g {
		width: 46%;
	}
}

@media(max-width: 935px) {
	.wrapper-footer {
		margin: 0 3%;
	}
}

@media(max-width: 875px) {

	footer .col-g,
	footer .col-d {
		width: 100%;
	}

	.wrapper-footer {
		margin: 0 6%;
	}

	footer .logo {
		width: 165px;
		margin: 0 auto 20px auto;
	}

	footer {
		background-image: url(../images/fond-footer-tel.jpg);
		padding-top: 45px;
		background-attachment: fixed;

	}

	.copyright {
		padding-top: 30px;
	}
}


/*------------------------------------
PAGE ACCUEIL
--------------------------------------*/

/*BANNIERE*/

.banniere-accueil {
	background-image: url(../images/fond-banniere-accueil.webp);
	background-repeat: no-repeat;
	background-position: right 24% bottom 50%;
	background-size: cover;
	padding: 155px 0 155px 0;
}

.banniereWrapper {
	max-width: 638px;
	margin: 0 auto 0 7%;
	padding: 0 25px;
}

.logo-banniere {
	width: 100%;
	display: block;
	margin-bottom: 20px;
}

.logo-banniere {
	animation: logoban 2200ms;
}

@keyframes logoban {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}

	20% {
		transform: translateY(50px);
		opacity: 0;
	}

	40% {
		transform: translateY(0);
		opacity: 1;
	}

}

.banniereWrapper .accroche {
	animation: accroche 2200ms;
}

@keyframes accroche {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}

	40% {
		transform: translateY(50px);
		opacity: 0;
	}

	60% {
		transform: translateY(0);
		opacity: 1;
	}
}

.banniereWrapper .theme {
	animation: theme 2200ms;
}

@keyframes theme {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}

	60% {
		transform: translateY(50px);
		opacity: 0;
	}

	80% {
		transform: translateY(0);
		opacity: 1;
	}
}

.banniereWrapper .blocBtn {
	animation: blocBtn 2200ms;
}

@keyframes blocBtn {
	0% {
		transform: translateY(50px);
		opacity: 0;
	}

	80% {
		transform: translateY(50px);
		opacity: 0;
	}

	100% {
		transform: translateY(0);
		opacity: 1;
	}

}

.banniere-accueil h1 {
	padding-top: 10px;
	font-weight: 300;
	font-size: 100%;
	margin-bottom: 25px;
}

.banniereWrapper .btn {
	margin-top: 10px;
}

.banniereWrapper .btn:first-child {
	margin-right: 25px;
}

@media(max-width: 1500px) {
	.banniere-accueil {
		padding: 120px 0 120px 0;
	}
}

@media(max-width: 1250px) {
	.banniere-accueil {
		padding: 60px 0 60px 0;
	}
}

@media(max-width: 850px) {
	.banniere-accueil {
		background-image: url(../images/fond-banniere-accueil-tel.jpg);
	}

	.banniere-accueil .wrapper {
		margin: 0;
	}

	.banniere-accueil .txt265 {
		font-size: 190%;
	}
}

/*Presentation*/
.mainContent {
	padding-top: 70px;
}

.adoptez {
	font-size: 300%;
	line-height: 1.3;
}

.accueil .presentation h1 {
	font-size: 110%;
	margin-bottom: 45px;
}

.sitesSolutions {
	grid-template-columns: repeat(3, minmax(210px, 1fr));
	gap: 30px;
	padding-top: 60px;
}

.sitesSolutions .bloc {
	padding: 25px;
	border-radius: 30px;
	text-align: center;
}

.sitesSolutions .siteVitrine {
	background-color: var(--bleu-clair);
	color: #fff;
}

.sitesSolutions .siteEcommerce {
	border: solid 2px var(--bleu-clair);
	color: var(--bleu-clair);
}

.sitesSolutions .appliWeb {
	background-color: var(--rouge);
	color: #fff;
}

.sitesSolutions .bloc h2 {
	font-weight: bold;
}

.sitesSolutions .bloc img {
	width: 60px;
	display: block;
	margin: 0 auto 15px auto;
}

@media(max-width: 870px) {
	.sitesSolutions {
		grid-template-columns: repeat(1, minmax(210px, 1fr));
		gap: 20px;
	}
}

/*AVANTAGES*/
.accueil.avantages {
	padding-top: 70px;
}

.accueil.avantages h3 {
	padding-top: 20px;
	font-size: 110%;
}

/*POSSIBILITES*/
.possibilites {
	padding-top: 70px;
	margin-bottom: 50px;
}

.possibilites .grid {
	grid-template-columns: repeat(2, 1fr);
	gap: 60px;
}

.possibilites ul {
	margin-bottom: 20px;
}

.possibilites p {
	margin-bottom: 8px;
}

@media(max-width: 720px) {
	.possibilites .grid {
		grid-template-columns: repeat(1, 1fr);
		gap: 35px;
	}
}

/*ETAPES CLES*/
.etapes {
	padding-bottom: 70px;
}

.etapes .fc p {
	width: 205px;
	margin: 20px;
	text-align: center;
}

.etapes .fc p::before {
	content: '';
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	display: block;
	margin: auto;
}

.etapes .fc .etapesCles1::before {
	background-image: url(../images/calendrier.png);
	width: 45px;
	height: 45px;
	transform: translateY(-5px);
}

.etapes .fc .etapesCles2::before {
	background-image: url(../images/devis.png);
	width: 37px;
	height: 45px;
	transform: translateY(-2px);
}

.etapes .fc .etapesCles3::before {
	background-image: url(../images/accord.png);
	width: 53px;
	height: 45px;
}

.etapes .fc .etapesCles4::before {
	background-image: url(../images/theme.png);
	width: 40px;
	height: 45px;
	transform: translateY(-2px);
}

.etapes .fc .etapesCles5::before {
	background-image: url(../images/contenu.png);
	width: 43px;
	height: 45px;
	transform: translateY(-6px);
}

.etapes .fc .etapesCles6::before {
	background-image: url(../images/panneau-traveaux-plein.png);
	width: 45px;
	height: 45px;
	transform: translateY(-4px);
}

.etapes .fc .etapesCles7::before {
	background-image: url(../images/mise-en-ligne.png);
	width: 50px;
	height: 45px;
}



/*------------------------------------
PAGE LOCATION
--------------------------------------*/
/*BANNIERE*/
.banniere {
	background-repeat: no-repeat;
	background-size: cover;
	background-position: right 24% bottom 50%;
	padding: 130px 0;
}

.location .banniere {
	background-image: url(../images/louer-site-internet.webp);
}

.location .avantages {
	grid-template-columns: repeat(auto-fit, minmax(242px, 1fr));
	gap: 40px;
	text-align: center;
	padding-top: 50px;
}

.location .avantages h3 {
	margin-bottom: 12px;
}

.location .questions h3 {
	margin-bottom: 5px;
	padding-top: 30px;
}

.location .questions {
	padding-bottom: 70px;
}

@media(max-width: 1500px) {
	.banniere {
		padding: 120px 0 120px 0;
	}
}

@media(max-width: 1250px) {
	.banniere {
		padding: 60px 0 60px 0;
	}
}

@media(max-width: 750px) {
	.location .banniere {
		background-image: url(../images/louer-site-internet-tel.jpg);
		background-position: center;
	}

	.banniere .wrapper {
		margin: 0;
	}

	.banniere .txt265 {
		font-size: 190%;
	}

	.txt273 {
		font-size: 210%;
	}

	.location .avantages {
		gap: 25px;
	}
}

@media(max-width: 420px) {
	.txt273 {
		font-size: 190%;
	}
}


/*-----------------------------------------------
PAGE E-COMMERCE
-------------------------------------------------*/
.eCommerce .banniere {
	background-image: url(../images/site-e-commerce-pas-cher.jpg);
}

.trad {
	margin-bottom: 152px;
}

.maintenance {
	padding-bottom: 155px;
}

.commerceElements .blocBtn .btn {
	margin: 10px;
}

.commerceElements {
	padding-bottom: 50px;

}

@media(max-width: 1000px) {
	.maintenance {
		padding-bottom: 70px;
	}
}

@media(max-width: 878px) {
	.trad {
		margin-bottom: 80px;
	}

	.maintenance {
		padding-bottom: 45px;
	}
}

@media(max-width: 750px) {
	.eCommerce .banniere {
		background-image: url(../images/site-e-commerce-pas-cher-tel.jpg);
		background-position: center;
	}

	.banniereWrapper {
		margin: 0;
		padding: 0 25px;
	}
}

/*---------------------------------------
PAGE TARIFS
---------------------------------------*/
.tarifs .banniere {
	background-image: url(../images/banniere-configurateur.webp);
	padding: 160px 0;
}

.tarifs .mainContent {
	padding-bottom: 70px;
}

.tarifs .configurateur {
	background-color: #CDDFE8;
	border-radius: 14px;
	/*	border: solid var(--bleu) 2px;*/
	padding: 30px;
}

.tarifs form .fc p {
	margin-right: 10%;
}

.tarifs form .fc p:last-child {
	margin-right: 0 !important;
}

.tarifs form fieldset {
	margin-bottom: 20px;
}

.tarifs form legend {
	margin-bottom: 5px;
}

.tarifs .configurateur .btn {
	font-size: 16px;
}

.legendRadioError:before {
	content: "Il est impératif de cocher l'une de ces cases";
	display: block;
	color: var(--rouge);
	font-weight: 400;
	font-size: 14px;
	border: solid var(--rouge) 1px;
	padding: 3px 8px;
	border-radius: 10px;
	background-color: #FFE4E4;
	margin-bottom: 5px;
}

.mon-resultat {
	display: none;
	background-color: var(--bleu-clair);
	border-radius: 14px;
	padding: 15px;
}

.mon-resultat-block {
	display: block;
}

#cout-mensuel {
	background-color: #fff;
	border-radius: 40px;
	padding: 9px 9px 6px 9px;
	margin: 0 5px;
}

@media(max-width: 400px) {
	.tarifs form .fc p {
		margin-right: 0;
		width: 100%;
	}
}

/*-------------------------------
PAGE BLOG
-------------------------------*/
.blog {}

.blog .banniere {
	background-image: url(../images/blog.jpg);
	padding: 170px 0;
}

.articles {
	grid-template-columns: repeat(3, minmax(300px, 1fr));
	gap: 20px;
	padding: 70px 0;
}

.articles .blocArticle {
	background-color: #E2F5FF;
	border-radius: 14px;
	overflow: hidden;
}

.articles .blocArticle img {
	width: 100%;
	height: 235px;
	object-fit: cover;
}

.articles .blocArticle .contentText {
	padding: 20px;
}

.articles .blocArticle .btn {
	margin-top: 20px;
}

@media(max-width: 750px) {
	.blog .banniere {
		background-image: url(../images/blog-tel.jpg);
		background-position: center;
		padding: 130px 0;
	}
}

/*-----------------------
Template Article
------------------------*/
.article .blog {
	padding: 80px 0 50px 0;
}

.article .blog h1 {
	font-size: 210%;
}

.article .blog h2 {
	font-size: 170%;
	font-weight: bold;
	margin-bottom: 10px;
	text-align: center;
	padding-top: 45px;
}

.article .blog h2::after {
	content: "";
	display: block;
	margin: 20px auto 35px;
	height: 2px;
	width: 48px;
	background-color: var(--rouge);
	border-radius: 10px;
}

.article .blog h3 {
	font-size: 120%;
	font-weight: bold;
	padding-top: 18px;
	margin-bottom: 5px;
}

.article .blog h3::before {
	content: '';
	width: 3px;
	height: 19px;
	background-color: var(--rouge);
	display: inline-block;
	margin-right: 8px;
	transform: translateY(2px);
	border-radius: 10px;
}

.article .blog p {
	margin-bottom: 10px;
}

.article .imgArticle {
	display: block;
	border-radius: 15px;
	width: 100%;
	margin-bottom: 35px;
	max-height: 485px;
	object-fit: cover;
}

.article .conseil {
	background-image: url(../images/conseils.jpg);
	border-radius: 14px;
	padding: 40px;
	background-position: right center;
	background-size: cover;
	background-repeat: no-repeat;
}

.article .conseil h3,
.article .conseil h4 {
	font-size: 170%;
	margin-bottom: 25px;
	padding-top: 0;
}

.article .blog .boutons .btn {
	margin: 12px;
}

@media(max-width: 590px) {
	.article .conseil {
		background-image: url(../images/conseils-tel.jpg);
		background-position: center;
	}
}

@media(max-width: 500px) {
	.article .blog h1 {
		font-size: 180%;
	}

	.article .blog h2 {
		font-size: 150%;
	}
}


/*-------------------------------------------------
CONTACT
---------------------------------------------------*/
.contact main {
	background-image: url(../images/fond-contact.jpg);
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 60px 0;
}

.contact h1,
.mentions-legales h1,
.cgu h1,
.politique-de-confidentialite h1,
.conditions-generales-de-vente h1 {
	margin-bottom: 70px;
	text-align: center;
	text-transform: uppercase;
	font-weight: 300;
	font-size: 280%;
	letter-spacing: 1px;
}

.intro-contact {
	margin-bottom: 40px;
	line-height: 1.4;
}

.amazing {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.contact-wrapper {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 20px;
}

.amazing .bloc {
	width: 49%;
}

.amazing .bloc input,
.contact textarea,
.champ-100 {
	width: 100%;
	border: none;
	margin: 7px 0;
	padding: 12px;
	font-family: 'Montserrat', sans-serif;
	font-size: 78%;
	border-radius: 30px;
}

.contact textarea {
	border-radius: 10px;
	min-height: 220px;
}

.alerte {
	font-size: 92%;
}

/* ---------------------------
CONTACT SENT
--------------------------- */
.contactSent .main-section {
	background-image: url(../images/contact-sent.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	padding: 200px 0;
}

.contactSent h1 {
	font-size: 340%;
}

@media(max-width:968px) {
	.contactSent .main-section {
		background-image: url(../images/contact-sent-tel.jpg);
		padding: 150px 0;
	}

	.contactSent h1 {
		font-size: 280%;
	}
}



/*-----------------------------------------
MENTIONS LEGALES
------------------------------------------*/
.mentions-legales main h2,
.politique-de-confidentialite main h2,
.cgu main h2,
.conditions-generales-de-vente main h2 {
	margin: 20px 0 10px 0;
	font-size: 170%;
	font-weight: bold;
}

.mentions-legales main h2::before,
.politique-de-confidentialite main h2::before,
.cgu main h2::before,
.conditions-generales-de-vente main h2::before {
	content: '';
	width: 2px;
	height: 21px;
	display: inline-block;
	background-color: var(--rouge);
	margin-right: 5px;
	transform: translateY(1px);
	border-radius: 5px;
}

/*-------------------------------------------------
RESPONSIVE
---------------------------------------------------*/
/*menu responsive*/
@media(max-width: 834px) {
	.nav-fixed {
		display: none;
	}

	.nav-responsive {
		display: block;
	}
}

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

@media(max-width: 588px) {
	.amazing p {
		width: 100%;
	}
}

@media(max-width: 500px) {

	.cookie-alert p {
		width: 100%;
		margin-bottom: 20px;
	}
}


/* ----------------------
PAGE LOGIN
----------------------- */

.section-connect {
	height: 100vh;
	background-image: url(../images/login.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	background-attachment: fixed;
}

.connect-wrapper {
	width: 480px;
	margin: auto;
	color: #fff;
	padding: 35px;
	border-radius: 15px;
	background-color: rgba(56, 122, 188, 0.4);
}

.section-connect .logo-connect {
	margin: 0 auto;
	display: block;
	width: 100%;
}

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="password"] {
	border-radius: 50px;
	padding: 12px 17px;
	width: 100%;
	/* font-size: 15.5px; */
	border: none;
}

/* -----------------------------
Page Admin Back Office 
------------------------------*/
.navbar .navigation .btn:before {
	content: '';
	display: inline-block;
	width: 36px;
	height: 36px;
	margin-right: 8px;
	background-image: url(../images/add-pro.png);
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateY(10px);
}

.accueil-admin .img-container {
	width: 250px;
	margin: 20px auto;
}

.accueil-admin .img-container img {
	width: 100%;
	display: block;
}

.accueil-admin h1 {
	font-size: 31px;
}

.admin-container {
	padding-bottom: 50px;
}

.accueil-admin .btn {
	margin: 10px 20px;
}

/* .accueil-admin .btn::before {
	content: '';
	display: inline-block;
	width: 36px;
	height: 29px;
	margin-right: 8px;
	background-size: 100%;
	background-repeat: no-repeat;
	background-position: center;
	transform: translateY(8px);
} */
.accueil-admin .green-btn:before {
	background-image: url(../images/eye-white.png);
}

.accueil-admin .blue-btn:before {
	background-image: url(../images/add-pro.png);
}

.admin-container input[type="text"],
.admin-container input[type="email"],
.admin-container input[type="tel"],
.admin-container input[type="date"],
.admin-container input[type="password"] {
	background-color: #eaf3fb;
}

.admin-container textarea {
	width: 100%;
	min-height: 290px;
	background-color: #eaf3fb;
	border: none;
	border-radius: 15px;
}

.admin-container .element {
	margin-bottom: 10px;
}

.admin-container .breadcrumb {
	font-size: 85%;
	color: #868686;
	margin-bottom: 50px;
}

.admin-container .breadcrumb a {
	display: inline !important;
	font-weight: bold;
}