/* Typo */
@font-face {
	font-family: 'Como';
	src: url('/media/fonts/Como.eot');
	src: local('Como'),
		url('/media/fonts/Como.eot?#iefix') format('embedded-opentype'),
		url('/media/fonts/Como.woff2') format('woff2'),
		url('/media/fonts/Como.woff') format('woff'),
		url('/media/fonts/Como.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'ComoBold';
	src: url('/media/fonts/Como-Bold.eot');
	src: local('Como Bold'), local('Como-Bold'),
		url('/media/fonts/Como-Bold.eot?#iefix') format('embedded-opentype'),
		url('/media/fonts/Como-Bold.woff2') format('woff2'),
		url('/media/fonts/Como-Bold.woff') format('woff'),
		url('/media/fonts/Como-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
}
@font-face {
	font-family: 'Diavlo';
	src: url('/media/fonts/DiavloBold-Regular.eot');
	src: url('/media/fonts/DiavloBold-Regular.eot?#iefix') format('embedded-opentype'),
		url('/media/fonts/DiavloBold-Regular.svg#DiavloBold-Regular') format('svg'),
		url('/media/fonts/DiavloBold-Regular.ttf') format('truetype'),
		url('/media/fonts/DiavloBold-Regular.woff') format('woff'),
		url('/media/fonts/DiavloBold-Regular.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
@font-face {
	font-family: 'Avenir';
	src: url('/media/fonts/AvenirLTStd-Roman.eot');
	src: url('/media/fonts/AvenirLTStd-Roman.eot?#iefix') format('embedded-opentype'),
		url('/media/fonts/AvenirLTStd-Roman.svg#AvenirLTStd-Roman') format('svg'),
		url('/media/fonts/AvenirLTStd-Roman.ttf') format('truetype'),
		url('/media/fonts/AvenirLTStd-Roman.woff') format('woff'),
		url('/media/fonts/AvenirLTStd-Roman.woff2') format('woff2');
	font-weight: normal;
	font-style: normal;
}
/* @font-face {
    font-family: 'CenturyGothic';
    src: url('/media/fonts/CenturyGothic.eot');
    src: url('/media/fonts/CenturyGothic.eot') format('embedded-opentype'),
         url('/media/fonts/CenturyGothic.woff2') format('woff2'),
         url('/media/fonts/CenturyGothic.woff') format('woff'),
         url('/media/fonts/CenturyGothic.ttf') format('truetype'),
         url('/media/fonts/CenturyGothic.svg#CenturyGothic') format('svg');
} */
/* @font-face {
    font-family: 'FuturaBold';
    src: url('/media/fonts/FuturaBold.eot');
    src: url('/media/fonts/FuturaBold.eot') format('embedded-opentype'),
         url('/media/fonts/FuturaBold.woff2') format('woff2'),
         url('/media/fonts/FuturaBold.woff') format('woff'),
         url('/media/fonts/FuturaBold.ttf') format('truetype'),
         url('/media/fonts/FuturaBold.svg#FuturaBold') format('svg');
} */

body { 
	font-family: Como;
	font-size: 1.8rem;
	color: #4e4e4e;
}

a {
	color: #656565;
	text-decoration: none;
	transition: all .4s;
}
	a:hover { 
		color: #656565;
		text-decoration: underline;
	}

h1, .h1-like, 
#ss-titre { 
	font-size: 5rem; 
	text-align: center;
}

h1 b {
	background-color: #F25C54;
	font-family: Diavlo;
	padding: 0.1rem 0.5rem;
}

#ss-titre b { font-family: Comobold; }

h2, .h2-like {
	font-family: 'Diavlo';
	color: #F25C54;
}

h3, .h3-like {
	font-family: 'Diavlo';
	font-weight: bold;
	font-size: 2rem;
	margin-bottom: 0;
}


/* Fonts */
/* .font-cg { font-family: CenturyGothic; } */
/* .font-como { font-family: FuturaBold; } */
.font-como { font-family: 'Como'; }
.font-comobold { font-family: 'Comobold'; }
.font-diavlo { font-family: 'Diavlo'; }
.font-avenir { font-family: 'Avenir'; }
.spacing { letter-spacing: 3px; }
.step { font-size: 3em; }

.pt8 { padding-top: 8rem; }
.pb8 { padding-bottom: 8rem; }


/* bouton pour les liens */
.bt, .bt.internal {
	background-color: #F25C54;
	color: #fff;

	font-family: Como;

	padding: 3px 2rem;

	border: 1px solid #F25C54;
	border-radius: 5px ;
}
	.bt:hover {
		background-color: transparent;
		color: #F25C54 !important;
		box-shadow: none;
	}

.bt.vermillon {
	background-color: transparent;
	color: #F25C54;
	border: 1px solid #F25C54;
}
	.bt.vermillon:hover {
		background-color: #F25C54;
		color: #fff !important;
	}

/* .bt.bleu {
	color: #3c3a6d;
	border: 1px solid #3c3a6d;
}
	.bt.bleu:hover {
		background-color: #3c3a6d;
		color: #fff;
	} */


/* Couleur */
.vert, .color { color: #1fba9a; }
.orange { color: #fb9672 !important; }
.bleu { color: #3c3a6d; }
.white { color: #fff; }
.vermillon { color: #F25C54; }
.marine { color: #003049; }
.plomb { color: #454140; }
.abricot { color: #f9cb9c; }
.gris { color: #f3f3f3; }

.bg-orange { background-color: #fb9672; }
.bg-marine { background-color: #003049;}
.bg-vermillon { 
	background-color: #F25C54;
	padding: 0.1rem 0.5rem; 
}
.bg-gris { background-color: #f3f3f3; }

/* .bg-vert { 
	background-color: #1fba9a;
	color: #fff;
} */

/* .bg-orange {
	background: no-repeat center url('/media/tpl/fond-orange.png');
} */

/* .bg-100 { background-size: 100% 100% !important; } */

/* Stickers */
.sticker {
	color: #fff;
	background-color: #003049;
	transform: rotate(-4.5deg);
	padding: 0.5rem 0.8rem;
	font-weight: bold;
	text-align: center;
}

/* #demarche h3:nth-of-type(2):after {
	content: "";
	color: #fff;
	background-color: #003049;
	transform: rotate(-4.5deg);
	padding: 0.5rem 0.8rem;
	font-weight: bold;
	text-align: center;
} */

/* Ligne de séparation */
hr {
	margin: 2.5rem 0;
	border: 0;
    border-bottom: 3px solid #1fba9a;/* vert */
    text-align: left;
}
hr.orange { border-color: #fb9672; }
hr.bleu { border-color: #3c3a6d; }
/* hr.vermillon { border-color: #F25C54; } */


.masque { 
	position: relative;
	    display: inline-block;
}
.masque::before {
	background: url('/media/tpl/masque-article.png') no-repeat center;
	position: absolute;
	content: "";
	top: -1px;
	left: 0;
	width: 100%;
    height: 101%;
    background-size: 100% 100%;
}

/* Alignement grids */
.jcc { justify-content: center; }
.jce { justify-content: end; }
.jic { justify-items: center; }
.aic { align-items: center; }
.acc { align-content: center; }
.asc { align-self: center; }
.jcsb { justify-content: space-between; }
.jcsa { justify-content: space-around; }

.flex { display: flex; }
.flex.wrap {
	flex-wrap: wrap;
}
	/* space */
	.flex.space,
	[class*=" grid-"].space,
	[class^="grid-"].space {
		grid-gap: 1rem;
	}

	.flex.space-l,
	[class*=" grid-"].space-l,
	[class^="grid-"].space-l {
		grid-gap: 2rem;
	}

	.flex.space-xl,
	[class*=" grid-"].space-xl,
	[class^="grid-"].space-xl {
		grid-gap: 4rem;
	}

/* Alignements */
.ibl { display: inline-block !important;}

/* .mw160p { max-width: 160px; } */
.mw200p { max-width: 200px; }
.mw250p { max-width: 250px; }
.mw400p { max-width: 400px; }
.mw440p { max-width: 440px; }
.mw700p { max-width: 700px; }
.mw800p { max-width: 800px; }

.w100p { width: 100px; }
.w270p { width: 270px; }
.w460p { width: 460px; }

.w45 { width: 45%; }

[id^='txt'] b {
	font-family: Diavlo;
}

#ss-titre-service b {
	color: #fff;
	background-color: #F25C54;
	padding: 0.1rem 0.5rem;
}

[id^='realisation-txt'] b {
	font-family: 'Diavlo';
	color: #fb9672;
}

/* Header */
header #social i,
footer i
	{ 
		font-size: 1.5em !important;
		vertical-align: middle;
	}

header #social i a { color: #f4a98f; }
header #social i a:hover { 
	color: #fb9672;
	text-decoration: none;
}

/* header nav a { color: #4e4e4e; } */
	header nav a:hover,
	header nav a.selected
	{ 
		/* padding-bottom: 5px; */
		font-family: Diavlo;
		/* font-weight: bold; */
		text-decoration: none;
		color: #fb9672;
		/* border-bottom: 2px solid #4e4e4e; */
	}

	#bandeau-intro-home {
		background: url('/media/service marketing communication responsables nantes laubelia solenne raimond.jpg') no-repeat;
		background-position: center center;
		background-size: cover;
		opacity: 0.7;
		height: 650px;
	}

	#bandeau-intro-responsabilite img {
		opacity: 0.7;
	}

	#valeur li {
		min-width: ;
	}


/* Footer */
footer i a { color: #4cc8ad; }
footer i a:hover { 
	color: #1fba9a;
	text-decoration: none;
}

/* .footer {
	background: no-repeat center/cover url('/media/tpl/footer.png');
} */
	footer #sitemap a,
	footer #webmaster-3 a { 
		display: block;
		color: #f3f3f3; 
		text-decoration: underline;
	}

	footer .editable-href,
	header .editable-href {
		position: static;
	}

	 #contact-mail { text-decoration: underline; }

/* Formulaire contact */
#contact input[name='reponse'] { display: none; }

.content input,
footer input,
footer textarea 
{
	padding: 0.4em 1.5rem 0.5rem;
	border-radius: 15px;
	background-color: transparent;
	border: 1px solid #F25C54;
}
	footer input, footer textarea { color: #fff; }
	.content input.orange { border-color: #fb9672; }



/* Barre de cookie */
#cnilcookie {
	border: none;
	position: fixed;
    left: 0;
    right: 0;
    bottom: 25px;
    text-align: center;
    font-size: 1.4rem;
    display: none;
}
	#cnilcookie:hover { opacity: 1 !important; }
	#cnilcookie .bt {
		padding: .3rem .8rem;
		border: none;
	}


/* Responsive */
@media (max-width: 1000px) {
	[id^='realisation-img'] img {
		max-width: 100% !important;
	}
}


@media (max-width: 850px)
{

	header nav .burger { background-color: #fb9672;	}

	.jcsb { justify-content: center; }

	/* .mw960p {
		padding-left: 2rem !important;
		padding-right: 2rem !important;
	} */

	#reseau.grid-2 {
		display: grid;
		grid-template-columns: 1fr;
		width: 80%;
	}

	#contact label.w200p { width: 100%; }
	#contact input.w460p { width: 400px; }

	#contact div.flex {
		display: block;
	}
}

@media (max-width: 480px) {
	
	h1,
	.h1-like,
	#ss-titre {
		font-size: 4rem;
	}

	.biggest { font-size: 1.5em !important; }

	.plm, .pll { padding-left: 1rem; }
	.prm, .prl { padding-right: 1rem; }

	#temoin.grid-3 {
		display: grid;
	}

	.editable-media img { 
		max-width: 100% !important;
	}

	[id^='service-img'] img {
		max-width: 120px !important;
	}

	#reseau.grid-2 {
		width: 100%;
	}

	/* #tel { padding-top: 4rem !important; }
	#tel, #social { 
		display: block;
		padding: 1rem 0 0;
		text-align: right
	} */

	/* .bg-100 { background-size: cover !important; } */

	#contact input.w460p { width: 280px; }
	#contact input#autrevaleur {width: 200px; } 

	footer img.fr {
		float: right !important;
	}

}