/*=============================================
=            Reset            =
=============================================*/

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

html,
body {
	margin: 0;
	padding: 0;
}

ul,
li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}
button {
	border:0;
}
address {
	font-style: normal;
}
/*=============================================
=            Variables            =
=============================================*/

:root {

	/*----------  Couleurs  ----------*/
	--color-main: 0,0,0;
	--color-main-high: rgba(var(--color-main),var(--opacity-text-high));
	--color-main-medium: rgba(var(--color-main),var(--opacity-text-medium));
	--color-main-disabled: rgba(var(--color-main),var(--opacity-text-disabled));

	--color-sub-main: #ffb82e;
	--color-sub-secondary: #45bed9;

	--color-alert-success: #5eba45;
	--color-alert-warning: #ff8a00;
	--color-alert-danger: #b00020;

	--color-bg-gradient: linear-gradient(to right, var(--color-sub-main) 0%,var(--color-sub-main) 50%,var(--color-sub-secondary) 50%,var(--color-sub-secondary) 100%);
	--color-bg-gradient-vertical: linear-gradient(to bottom, var(--color-sub-main) 0%,var(--color-sub-main) 50%,var(--color-sub-secondary) 50%,var(--color-sub-secondary) 100%);

	/*----------  Opacités  ----------*/
	--opacity-text-high: .80;
	--opacity-text-medium: .60;
	--opacity-text-disabled: .38;

	/*----------  Polices  ----------*/
	--font-main: 'PT Sans', sans-serif;
	--font-icons: "Font Awesome 5 Free";

	/*----------  Tailles  ----------*/
	--size-gap-main: 15px;
	--size-gap-main-double: calc(var(--size-gap-main) * 2);

	--size-container: 1200px;
}
/* LG */
@media (max-width: 1199px) { 
	:root {
		--size-container: 992px;
	}
}	
/* MD */
@media (max-width: 991px) {
	:root {
		--size-container: 768px;
	}
}
/* SM */
@media (max-width: 767px) {
	:root {
		--size-container: 576px;
	}
}
/* XS */
@media (max-width: 575px) {
	:root {
		--size-gap-main: 10px;
	}
}



/*----------  Responsive  ----------*/

/* XL */
@media (max-width: 1439px) { 

}	
/* LG */
@media (max-width: 1199px) { 

}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {

}
/* XS */
@media (max-width: 575px) {

}


/*=============================================
=            Général            =
=============================================*/

body {
	background: white;
	font-family: var(--font-main);
	font-size: 17px;
	color: var(--color-main-medium);
	background: rgba(0,0,0,.02);
}

h1 {
	font-size: 1.64em;
	color: var(--color-main-high);
	margin-top: 2em;
	text-align: center;
}

a {
	color:var(--color-main-high);
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
}

/* LG */
@media (max-width: 1199px) { 
	h1 {
		margin-top: 1.5em;
	}
}
/* MD */
@media (max-width: 991px) {
	body {
		font-size: 15px;
	}
	h1 {
		margin-top: 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	h1 {
		font-size: 1.4em;
	}
}
/* XS */
@media (max-width: 575px) {
	h1 {
		font-size: 1.3em;
	}
}


/*=============================================
=            Boutons            =
=============================================*/

.btn {
	display: inline-block;
	padding: .8em 3em;
	text-transform: uppercase;
	font-weight: 700;
	font-size: .88em;
	text-decoration: none;
	border-radius: 2px;
	font-family: var(--font-main);
	cursor: pointer;
	text-align: center;
	border: 1px solid transparent;
}
.btn:hover {
	opacity: .8;
	transform: translateY(1px);
	text-decoration: none;
}
.btn:hover {
	transition: all .15s ease-in-out;
}

.btnPrimary {
	background: var(--color-main-high);
	color: white;

}
.btnSecondary {
	background: transparent;
	color: var(--color-main-high);
	border-color: var(--color-main-medium);
}
.btnBlack {
	background: #211806;
	color: #FFFFFF;
}
.btnSubMain {
	background-color: var(--color-sub-main);
	color: white;
}
.btnSubSecondary {
	background-color: var(--color-sub-secondary);
	color: white;
}

/* MD */
@media (max-width: 991px) {
	.btn {
		padding: .8em 2em;
		font-size: .95em;
	}
}



/*=============================================
=            Formulaires            =
=============================================*/

input:required~label::after,
label.required::after {
	content:"*";
	color: darkred;
	opacity: .5;
	margin-left: 0.2em;
}
#fieldsRequired {
	margin:1em 0 2em 0;
	font-size:13px;
}

.field-text {
	position:relative;
	margin-bottom: 2em;
}

.field-text label {
	font-size: 1em;
	position: absolute;
	pointer-events: none;
	color: rgba(0,0,0,0.3);
	top: 4px;
	left: 0;
	z-index: 2;

	transition:0.2s ease all;
	-moz-transition:0.2s ease all;
	-webkit-transition:0.2s ease all;
}
.field-text label.active,
.field-text select+label, 
.field-text textarea+label  {
	font-size: .7em;
	top: -15px;
	left:0;
	color: var(--color-main-700);
}

.field-text input {
	width:100%;
	background:none;
	font-size: 1em;
	margin-top: .1em;
	padding-bottom:0.2em;


	border:0;
	border-bottom: 1px solid var(--color-main-disabled);
}

textarea {
	width:100%;
	height:250px;
	border: 1px solid var(--color-main-disabled);
	padding: .5em;
	margin-top: 0.5em;
	resize: vertical;
	font-family: var(--font-main);
}

.field-text .hint {
	font-size: .76em;
	margin-top: 0.5em;
}



/*=============================================
=            Template            =
=============================================*/

/*----------  Structure  ----------*/

.container {
	margin: 0 auto;
	max-width: var(--size-container);
	
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	column-gap: calc(var(--size-gap-main) * 2);
	padding: 0 var(--size-gap-main);
}


/*=============================================
=            Header            =
=============================================*/
header {
	position: relative;
	overflow-x: hidden;
	padding-bottom: 2em;
	background: white;
}

header .container {
	display: block;
	position: relative;
	max-width: var(--size-container);
}
header ul {
	position: absolute;
	top: 1em;
	right: 0;
}
header ul li {
	display: inline-block;
	border-right: 1px solid var(--color-main-medium);
	padding: 0 .5em;
}
header ul li i {
	margin-right: 0.5em;
}
header ul li:last-of-type {
	border-right: none;
}
header ul li a {
	color: var(--color-main-medium);
	text-decoration: none;
}


header ul li a:hover {
	text-decoration: underline;
}
header .logo {
	text-align: center;
	margin-top: calc(var(--size-gap-main) / 2);
}
#tagline {
	font-style:italic;
	text-align: center;
	font-size: 1.76em;
	position: relative;
}
#tagline span {
	background: white;
	display: inline-block;
	position: relative;
	z-index: 2;
	padding: 0 2em;
}
#tagline:after {
	background: var(--color-bg-gradient);
	position:absolute;
	content: '';
	top:50%;
	height: 2px;
	width:100%;
	display:block;
	width: 100vw;
	z-index: 1;
}

/* LG */
@media (max-width: 1199px) { 
	header {
		padding-bottom: 0;
	}
	#tagline {
		font-size: 1.4em;
	}
}	
/* MD */
@media (max-width: 991px) {
	header .logo img {
		max-width: 22em;
	}
	header ul li {
		display: block;
		margin-right: 0;
		border-right: none;
		text-align: left;
		margin-bottom: 0.2em;
	}
}
/* SM */
@media (max-width: 767px) {
	header {
		overflow-x: visible;
	}
	header .container {
		position: absolute;
		bottom: -1.3em;
		width:  100vw;
		max-width: 100vw;

	}
	header ul {
		position: relative;
		width: 100%;
		text-align: center;
		top: .5em;
	}
	header ul li {
		display: inline-block;
		border-right: 1px solid var(--color-main-medium);
		padding: 0 .5em;
	}
	header ul li:last-of-type {
		border-right: none;
	}
	#tagline {
		font-size: 1.2em;
	}

}
/* XS */
@media (max-width: 575px) {
	header .logo img {
		max-width: 270px;
	}
	#tagline {
		font-size: .9em;
		font-weight: 700;
	}
}


/*=============================================
=            Content            =
=============================================*/

#content {
	background: white;
	padding-bottom: 2em;
}

.headerBanner {
	position:relative;
	text-align: center;
	/* overflow-x: hidden; */
}

.headerBanner:before {
	background: 
		linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1)),
		var(--color-bg-gradient);
	background-repeat : no-repeat;
	background-size:
		100% 100%,
		100% 100%;
	background-position-x: 0vw, 100%;
	content: '';
	height: 4px;
	width: 100%;
	display: block;

	-webkit-transition:	all .75s ease-out;
	-moz-transition: 	all .75s ease-out;
	-ms-transition: 	all .75s ease-out;
	-o-transition: 		all .75s ease-out;
	transition: 		all .75s ease-out;

	transition-delay: .5s;
	
}
.headerBanner.inView:before {
	background-position-x: 100vw, 100%;
}
.headerBanner:after {
	background: 
		var(--color-bg-gradient),
		linear-gradient(rgba(255,255,255,1), rgba(255,255,255,1));
	background-repeat : no-repeat;
	background-size:
		100% 100%,
		100% 100%;
	background-position-x: 100vw, 100%;
	content: '';
	height: 4px;
	width: 100%;
	display:block;

	-webkit-transition:	all .55s ease-out;
	-moz-transition: 	all .55s ease-out;
	-ms-transition: 	all .55s ease-out;
	-o-transition: 		all .55s ease-out;
	transition: 		all .55s ease-out;

	transition-delay: .5s;
}
.headerBanner.inView::after {
	/* width: 100%; */
	background-position-x: 0vw, 100%;
}
.headerBanner img {
	vertical-align: top;
	width:100%;
	height:auto;
	object-fit: cover;
	min-height: 10em;
	opacity: 0;

	-webkit-transition:	all .75s ease-out;
	-moz-transition: 	all .75s ease-out;
	-ms-transition: 	all .75s ease-out;
	-o-transition: 		all .75s ease-out;
	transition: 		all .75s ease-out;
}
.headerBanner.inView img {
	opacity: 1;
}
/* LG */
@media (max-width: 1199px) { 
	.headerBanner {
		margin-top: 1em;
	}
	.headerBanner img {
		min-height: 9em;
	}
}	
/* MD */
@media (max-width: 991px) {
	.headerBanner img {
		min-height: 7em;
	}
}
/* SM */
@media (max-width: 767px) {
	.headerBanner {
		margin-top: 2.5em;
	}
	.headerBanner img {
		min-height: 5em;
	}
}


/*=============================================
=            Footer            =
=============================================*/

/*----------  Prefooter  ----------*/
footer #preFooter {
	background: linear-gradient(to right, var(--color-sub-main) 0%,var(--color-sub-main) 50%,var(--color-sub-secondary) 50%,var(--color-sub-secondary) 100%);
	padding: .9em 0;
}
footer #preFooter .left,
footer #preFooter .right {
	grid-column: auto / span 6;
	align-self: center;
}
footer #preFooter .left {
	font-weight: 700;
	text-align: right;
	font-size: 1.76em;
}
footer #preFooter .right {
	color: white;
	font-size: 1.17em;
}
footer #preFooter .right i {
	width: 1em;
	text-align: center;
	margin-right: 0.5em;
}
footer #preFooter .right a {
	color: white;
	text-decoration: none;
}
footer #preFooter .right a:hover {
	text-decoration: underline;
}
footer #preFooter .phone {
	font-weight: 700;
}
footer #preFooter .phone span {
	font-size: .75em;
	margin-left: .5em;
}

/* XS */
@media (max-width: 575px) {
	footer #preFooter {
		background: none;
	}
	footer #preFooter .container {
		display: block;
		padding: 0;
	}
	footer #preFooter .left,
	footer #preFooter .right {
		text-align: center;
		padding: .3em 0;
	}
	footer #preFooter .left {
		background: var(--color-sub-main);
		font-size: 1.3em;
	}
	footer #preFooter .right {
		background: var(--color-sub-secondary);
	}
}


/*----------  Vrai footer ;)  ----------*/
footer .content {
	padding: 1em 0;
}
footer .content a {
	color: var(--color-main-medium);
	text-decoration: none;
}
footer .content a:hover {
	text-decoration: underline;
}
footer .content ul {
	grid-column: auto / span 3;
	line-height: 1.5em;
}
footer .content .company {
	grid-column: auto / span 6;
	text-align: center;
	font-weight: 700;
}
footer .content .company span {
	font-weight: 400;
	font-size: .8em;
}
footer .content .copyright {
	text-align: center;
	font-size: .7em;
	margin-bottom: 1em;
	margin-top: 2em;
}

/* SM */
@media (max-width: 767px) {
	footer .content ul,
	footer .content .company {
		grid-column: auto / span 4;
	}
	footer .content .company a {
		display: block;
	}
}
/* XS */
@media (max-width: 575px) {
	footer .content ul {
		grid-column: auto / span 6;
	}
	footer .content .company {
		grid-column: auto / span 12;
		margin-top: 1em;
	}
	footer .content .company a {
		display: inline;
	}
}


/*=============================================
=            Home            =
=============================================*/

h2 {
	font-weight: 700;
	font-size: 1.76em;
	padding-bottom: 0;
	margin-bottom: 1em;
	color: var(--color-main-high);
}

h2 span {
	font-size: 1.17rem;
	display: block;
}

/* LG */
@media (max-width: 1199px) { 
	h2 {
		font-size: 1.5em;
	}
	h2 span {
		font-size: .7em;
	}
}
/* MD */
@media (max-width: 991px) {
	h2 {
		font-size: 1.35em;
	}
	h2 span {
		font-size: .85em;
	}
}

#homeMain {
	background: 
		url('../images/home-main-bg.png'),
		var(--color-bg-gradient);
	background-size:
		auto 22.17em,
		100vw 16.76em;
	background-repeat: 
		no-repeat,
		no-repeat;
	background-position:
		center center,
		center 3.1em;
	
	overflow-x: hidden;
}
#homeMain .user {
	grid-column: auto / span 3;
	padding-top: 82px;
	
}

#homeMain .userType {
	color: white;
	font-size: 1.25em;
	font-weight: 700;
	text-transform: uppercase;
	display: inline-block;
	position: relative;
	padding-bottom: .2em;
	margin-bottom: 0.5em;
}
#homeMain .userType::after {
	content: "";
	display: block;
	background: white;
	height: 2px;
	width: 100vw;
	position: absolute;
	bottom: 0;
	right: 0;

	-moz-transform: 	translateX(-100%);
	-webkit-transform: 	translateX(-100%);
	-o-transform: 		translateX(-100%);
	-ms-transform: 		translateX(-100%);
	transform: 			translateX(-100%);

	-webkit-transition:	all 2s cubic-bezier(.07,.73,0,1);
	-moz-transition: 	all 2s cubic-bezier(.07,.73,0,1);
	-ms-transition: 	all 2s cubic-bezier(.07,.73,0,1);
	-o-transition: 		all 2s cubic-bezier(.07,.73,0,1);
	transition: 		all 2s cubic-bezier(.07,.73,0,1);
}
#homeMain .userIndividual .userType::after {
	-moz-transform: 	translateX(100%);
	-webkit-transform: 	translateX(100%);
	-o-transform: 		translateX(100%);
	-ms-transform: 		translateX(100%);
	transform: 			translateX(100%);
}
#homeMain.inView .userType::after {
	-moz-transform: 	translateX(0);
	-webkit-transform: 	translateX(0);
	-o-transform: 		translateX(0);
	-ms-transform: 		translateX(0);
	transform: 			translateX(0);
}
#homeMain .userIndividual .userType::after {
	left: 0;
}
#homeMain li{
	color:var(--color-main-high);
	line-height: 2em;
	font-weight: 700;
}

#homeMain li::before {
	content: "\f111"; 
	font-family: var(--font-icons);
	font-weight: 900;
	color:var(--color-main-high);
	font-size: .66em;
	margin-right: 1em;
	line-height: 2.2em;
}
#homeMain .btn {
	margin-top: 2em;
}

#homeMain .illustration {
	grid-column: auto / span 6;
	align-self: center;
	justify-self: center;
	opacity: 0;
	/* display:grid; */
	/* justify-content: center; */

	-moz-transform: 	scale(.95);
	-webkit-transform: 	scale(.95);
	-o-transform: 		scale(.95);
	-ms-transform: 		scale(.95);
	transform: 			scale(.95);

	-webkit-transition:	all .75s ease-out;
	-moz-transition: 	all .75s ease-out;
	-ms-transition: 	all .75s ease-out;
	-o-transition: 		all .75s ease-out;
	transition: 		all .75s ease-out;
}
#homeMain.inView .illustration {
	opacity: 1;
	-moz-transform: 	scale(1);
	-webkit-transform: 	scale(1);
	-o-transform: 		scale(1);
	-ms-transform: 		scale(1);
	transform: 			scale(1);
}
#homeMain .illustration img {
	max-width: 100%;
}

/* LG */
@media (max-width: 1199px) { 
	#homeMain {
		background-size:
			auto 15.52em,
			0px 0px;
		margin-bottom: 3em;
	}
	#homeMain .user {
		grid-column: auto / span 4;
		padding-top: 62px;
	}
	#homeMain .illustration {
		grid-column: auto / span 4;
	}

	#homeMain .btn {
		margin-top: 3em;
	}

}	
/* MD */
@media (max-width: 991px) {
	#homeMain {
		background-size:
			auto 14.52em,
			0px 0px;
		margin-bottom: 2em;
	}
	#homeMain .userType {
		font-size: 1.02em;
	}
	#homeMain .btn {
		padding: .8em 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	#homeMain {
		margin-top: 2em;
		background: var(--color-bg-gradient);
		background-size: 100% calc(50% + .5em);
		background-position: center bottom;
		background-repeat: no-repeat;
	}
	#homeMain .user {
		grid-column: auto / span 6;
		grid-row: 2 / 3;
		padding-top: 1em;
		padding-bottom: 1em;
	}
	#homeMain .userType {
		font-size: 1.2em;
	}
	#homeMain .illustration {
		grid-column: auto / span 12;
		grid-row: 1 / 2;
		text-align: center;
	}
	#homeMain .illustration img {
		max-width: 50%;
	}
	#homeMain .btn {
		margin-top: 1em;
	}
}
/* XS */
@media (max-width: 575px) {
	#homeMain {
		margin-top: 3em;
		/* background-image: var(--color-bg-gradient-vertical); */
		/* background-size: 100% calc(66% + 1em); */
		background: none;
	}
	#homeMain .illustration img {
		max-width: min(280px,75%);
	}
	#homeMain .user {
		grid-column: auto / span 12;
		grid-row: 2 / 3;
		padding-top: 1em;
		padding-bottom: 1em;
		margin: 0 calc(var(--size-gap-main) * (-1));
		padding-left: var(--size-gap-main);
		padding-right: var(--size-gap-main);
	}
	#homeMain .userType::after {
		left: 0;
	}
	#homeMain .userPro {
		background: var(--color-sub-main);
	}
	#homeMain .userIndividual {
		grid-row: 3 / 4;
		background: var(--color-sub-secondary);
	}
	#homeMain .btn {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
	#homeMain .userType {
		font-size: 1.3em;
	}
}



#homePro {
	background: url('../images/home-pro-bg.jpg') no-repeat right center;
	background-size: auto min(570px,35vw);
	min-height: min(570px,35vw);
	margin-bottom: 2em;
	background-position: 110% center;
	opacity: 0;


	-webkit-transition:	all .5s ease-out, background 1s ease-out;
	-moz-transition: 	all .5s ease-out, background 1s ease-out;
	-ms-transition: 	all .5s ease-out, background 1s ease-out;
	-o-transition: 		all .5s ease-out, background 1s ease-out;
	transition: 		all .5s ease-out, background 1s ease-out;
}
#homePro.inView {
	opacity: 1;
	background-position: center right;
}
#homePro .container {
	height: 100%;
}
#homePro .content {
	grid-column: auto / span 7;
	align-self: center;
}
/* SM */
@media (max-width: 767px) {
	#homePro {
		background-size: auto 36vw;
		background-position: 150% 20%;
	}
	#homePro.inView {
		background-position: 120% 20%;
	}
	#homePro .content {
		grid-column: auto / span 8;
	}
}
/* XS */
@media (max-width: 575px) {
	#homePro {
		background: white;
		background-image: url('../images/home-pro-bg.jpg'); /* fallback */
		background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),url('../images/home-pro-bg.jpg'); /* W3C */
		background-repeat: 
			no-repeat,
			no-repeat;
		background-size:
			100% 100%,
			contain;
		background-position:
			center center,
			right center;
	}
	#homePro.inView {
		background-position:
			center center,
			right center;
	}
	#homePro .content {
		grid-column: auto / span 12;
	}
	#homePro .btn {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}

#homeIndividual {
	background: url('../images/home-individual-bg.jpg') no-repeat left center;
	background-size: auto min(580px,36vw);
	min-height: min(580px,36vw);
	margin-bottom: 4em;

	background-position: -20% center;
	opacity: 0;

	-webkit-transition:	all .5s ease-out, background 1s ease-out;
	-moz-transition: 	all .5s ease-out, background 1s ease-out;
	-ms-transition: 	all .5s ease-out, background 1s ease-out;
	-o-transition: 		all .5s ease-out, background 1s ease-out;
	transition: 		all .5s ease-out, background 1s ease-out;
}
#homeIndividual.inView {
	background-position: center left;
	opacity: 1;
}
#homeIndividual .container {
	height: 100%;
}
#homeIndividual .content {
	grid-column: 6 / span 7;
	align-self: center;
}
/* SM */
@media (max-width: 767px) {
	#homeIndividual {
		background-size: auto 36vw;
		background-position: -15% 20%;
	}
	#homeIndividual .content {
		grid-column: 5 / span 8;
	}
}
/* XS */
@media (max-width: 575px) {
	#homeIndividual {
		background: white;
		background-image: url('../images/home-individual-bg.jpg'); /* fallback */
		background-image: linear-gradient(rgba(255,255,255,.9), rgba(255,255,255,.9)),url('../images/home-individual-bg.jpg'); /* W3C */
		background-repeat: 
			no-repeat,
			no-repeat;
		background-size:
			100% 100%,
			contain;
		background-position:
			left center,
			left center;
	}
	#homeIndividual.inView {
		background-position:
			left center,
			left center;
	}
	#homeIndividual .content {
		grid-column: auto / span 12;
	}
	#homeIndividual .btn {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
	}
}



#features {
	padding: 2em 0;
	position: relative;
}
#features:before {
	position:absolute;
	background: var(--color-bg-gradient);
	content: '';
	height: 4px;
	width:100%;
	display:block;
	top: 0;
}
#features .title {
	text-align: center;
	font-size: 1.4em;
	font-weight: 700;
	margin-bottom: 2em;
}
#featuresDetails ul {
	grid-column: auto / span 4;
}
#featuresDetails li {
	display: flex;
	font-size: .88em;
	margin-bottom: .5em;
	opacity: 0;

	-moz-transform: 	scale(0) translateY(100px);
	-webkit-transform: 	scale(0) translateY(100px);
	-o-transform: 		scale(0) translateY(100px);
	-ms-transform: 		scale(0) translateY(100px);
	transform: 			scale(0) translateY(100px);

	-webkit-transition:	all .5s ease-out;
	-moz-transition: 	all .5s ease-out;
	-ms-transition: 	all .5s ease-out;
	-o-transition: 		all .5s ease-out;
	transition: 		all .5s ease-out;

}
#features.inView #featuresDetails li {
	opacity: 1;

	-moz-transform: 	scale(1) translateY(0);
	-webkit-transform: 	scale(1) translateY(0);
	-o-transform: 		scale(1) translateY(0);
	-ms-transform: 		scale(1) translateY(0);
	transform: 			scale(1) translateY(0);
}

#featuresDetails ul:nth-last-of-type(2) li {
	transition-delay: .15s;
}
#featuresDetails ul:nth-last-of-type(1) li {
	transition-delay: .3s;
}

#featuresDetails li::before {
	content: "\f111"; 
	font-family: var(--font-icons);
	font-weight: 900;
	color: var(--color-sub-main);
	font-size: .66em;
	margin-right: 1em;
	line-height: 2.2em;
}
#featuresDetails ul:last-child li::before {
	color:var(--color-sub-secondary);
}

/* MD */
@media (max-width: 991px) {
	#featuresDetails ul {
		grid-column: auto / span 6;
	}
	#featuresDetails ul:last-of-type {
		margin-top: 2em;
	}
}
/* SM */
@media (max-width: 767px) {
	#featuresDetails ul {
		grid-column: auto / span 12;
	}
}




/*=============================================
=            Annuaire            =
=============================================*/

#annuaire {
	margin: 0 auto;
	max-width: var(--size-container);
	padding: 0 var(--size-gap-main);
	min-height: 38em;
}

#prochainement {
	background-image:url(/images/france-map.png);
	background-size: contain;
	background-repeat: no-repeat;
	background-position:center;
	height: 24.41em;
	text-align: center;
	position:relative;

}
#prochainement a {
	margin-top: 16em;
}
/* MD */
@media (max-width: 991px) {
	#prochainement a {
		margin-top: 15em;
	}
}
/* XS */
@media (max-width: 575px) {
	#prochainement {
		height: 20em;
	}
	#prochainement a {
		margin-top: 12em;
	}
}




/*=============================================
=            Contact            =
=============================================*/

#contact h1 {
	text-align: center;
}
#contact .container {
	margin-bottom:40px;
}
#contact .title {
	font-size: 1.3em;
	color: var(--color-main-high);
	font-weight: 700;
}
/*
#horaires {
	margin-top:3em;
	text-align: center;
	border-top:1px solid #d9d9d9;
}
#horaires>div {
	border-bottom:1px solid #d9d9d9;
	padding:0.25em 0;
}
#horaires span {
	padding:0 1em;
}
*/

.openingTimeTable {
	margin-top: 3em;
	display: inline-block;
}

.openingTimeTable .specialTitle {
	text-align: center; 
	font-weight: bold; 
	text-transform: uppercase; 
	border-top: 1px solid rgba(0,0,0,.1); 
	border-bottom: 1px solid rgba(0,0,0,.1); 
	margin: .5em 0;
	padding: .3em 3em;
}
.openingTimeTable table {
	display: inline-block;
	margin: 0 0 1em 0;
	text-align: left;
}
.openingTimeTable table th,
.openingTimeTable table td {
	padding: .3em .5em;
}

#contact .companyInformations,
#contact .contactForm {
	grid-column: auto / span 6;
}

#contact form {
	margin-top:1em;
}

#contact address {
	color: var(--color-main-high);
}


#contactSent {
	min-height: 30em;
}
#contactSent .container {
	margin-bottom:40px;
}


/* MD */
@media (max-width: 991px) {
	#contact .companyInformations,
	#contact .contactForm {
		grid-column: auto / span 12;
		margin-bottom: 2em;
	}
	#contact .companyInformations {
		display: flex;
	}
	#contact .companyInformations > address,
	#contact .companyInformations > div {
		flex: 1 0;
		margin-top: 0;
	}
}
/* SM */
@media (max-width: 767px) {
	#contact .companyInformations {
		display: block;
	}
	#contact .companyInformations > div.openingTimeTable {
		margin-top: 3em;
	}
}

/*=============================================
=            FAQ            =
=============================================*/

#faq h1 {
	text-align: center;
}
#faq a:hover {
	color: var(--color-main-high);
	text-decoration: underline;
}
#faq .container {
	margin-bottom:40px;
}
.faqCategorie {
	font-size: 1.4em;
	font-weight:bold;
	margin:2em 0 1em 0;
}
.faqCategorie::before {
	content: "\f0c8"; 
	font-family: var(--font-icons);
	color:var(--color-sub-main);
	font-weight: 900;
	margin-right:0.25em;
	vertical-align: baseline;
	font-size:0.8em;
}
.faqQuestion {
	font-weight:bold;
	margin:1em 0;
}
.faqAnswer {
	padding-bottom: 1.5em;
	margin-bottom: 1.5em;
	border-bottom: 1px solid rgba(0,0,0,.1);
}
div.faqAnswer:last-of-type {
	border-bottom: none;
}

/* MD */
@media (max-width: 991px) {
	.faqCategorie {
		font-size: 1.2em;
	}
}




/*=============================================
=            Qui sommes nous            =
=============================================*/
#page-qui-sommes-nous .headerBanner img {
	min-height: 15em;
}
#page-qui-sommes-nous h1 {
	position:absolute;
	bottom:-10px;
	margin:0;
	background-color:#FFF;
	font-size: 2em;
	padding:.2em 2.5em 0;
	left:50%;
	transform:translateX(-50%);
	line-height: 1.1em;
	z-index: 2;;
}
#page-qui-sommes-nous h1 span {
	display:block;
	font-size: .82em;
}
#quiSommesNous {
	overflow-x: hidden;
}
#quiSommesNous .container {
	opacity: 0;

	-webkit-transition:	all .5s ease-out;
	-moz-transition: 	all .5s ease-out;
	-ms-transition: 	all .5s ease-out;
	-o-transition: 		all .5s ease-out;
	transition: 		all .5s ease-out;
}
#quiSommesNous .container.inView {
	opacity: 1;
}
#quiSommesNous .container img {
	max-width:100%;
}
#quiSommesNous > div {
	margin:3em auto;
}
#quiSommesNous .links a[href*="//"]::before {
	content: "\f054"; 
	font-family: var(--font-icons);
	font-weight: 900;
	margin-right:0.25em;
	vertical-align: middle;
}
#quiSommesNous .container .illustration,
#quiSommesNous .container .description {
	align-self: center;
}

#quiSommesNous .container .illustration,
#quiSommesNous div.container:nth-of-type(2n) .illustration {
	grid-column: auto / span 5;
	opacity: 0;

	-webkit-transition:	all .75s ease-out;
	-moz-transition: 	all .75s ease-out;
	-ms-transition: 	all .75s ease-out;
	-o-transition: 		all .75s ease-out;
	transition: 		all .75s ease-out;

	-moz-transform: 	translateX(100%);
	-webkit-transform: 	translateX(100%);
	-o-transform: 		translateX(100%);
	-ms-transform: 		translateX(100%);
	transform: 			translateX(100%);

}
#quiSommesNous div.container:nth-of-type(2n) .illustration {
	-moz-transform: 	translateX(-100%);
	-webkit-transform: 	translateX(-100%);
	-o-transform: 		translateX(-100%);
	-ms-transform: 		translateX(-100%);
	transform: 			translateX(-100%);
}

#quiSommesNous .container.inView .illustration,
#quiSommesNous div.container.inView:nth-of-type(2n) .illustration {
	-moz-transform: 	translateX(0);
	-webkit-transform: 	translateX(0);
	-o-transform: 		translateX(0);
	-ms-transform: 		translateX(0);
	transform: 			translateX(0);
	opacity: 1;
}
#quiSommesNous .container .description,
#quiSommesNous div.container:nth-of-type(2n) .description {
	grid-column: auto / span 7;
}

/* LG */
@media (max-width: 1199px) { 
	#page-qui-sommes-nous .headerBanner img {
		min-height: 14em;
	}
	#page-qui-sommes-nous h1 {
		font-size: 1.8em;
		padding: .3em 2.5em 0;
	}
}	
/* MD */
@media (max-width: 991px) {
	#page-qui-sommes-nous .headerBanner img {
		min-height: 12em;
	}
	#page-qui-sommes-nous h1 {
		font-size: 1.7em;
	}
}
/* SM */
@media (max-width: 767px) {
	#page-qui-sommes-nous .headerBanner img {
		min-height: 10em;
	}
	#page-qui-sommes-nous h1 {
		font-size: 1.5em;
		padding: .3em 1.5em 0;
	}
	#quiSommesNous .container .illustration,
	#quiSommesNous .container .description {
		grid-column: auto / span 12;
	}
	
	#quiSommesNous div.container:nth-of-type(2n) .illustration,
	#quiSommesNous div.container:nth-of-type(2n) .description {
		grid-column: auto / span 12;
		grid-row: 1 / 2;
	}
	#quiSommesNous div.container:nth-of-type(2n) .illustration {
		grid-row: 2 / 3;
	}
	#quiSommesNous .container .illustration {
		text-align: center;
		margin-top: 1em;
	}
	#quiSommesNous .container .illustration img {
		max-width: 70%;
	}
}
/* XS */
@media (max-width: 575px) {
	#page-qui-sommes-nous .headerBanner {
		margin-bottom: 5em;
	}
	#page-qui-sommes-nous .headerBanner img {
		min-height: 5em;
	}
	#page-qui-sommes-nous h1 {
		bottom: -3em;
		padding: 0;
		width: 90%;
	}
	#quiSommesNous .container .description .btn {
		position: relative;
		left: 50%;
		transform: translateX(-50%);

	}
}




/*=============================================
=            Inscription            =
=============================================*/
#inscription .introduction {
	grid-column: auto / span 12;
}
#inscription .introduction h1 span {
	font-size: 1.2em;
	color: var(--color-main-medium);
	font-weight: 400;
	display: block;
}

#inscription #basicOfferInfo {
	background: var(--color-sub-main);
	padding: 1em;
	font-size: .88em;
}
#inscription #basicOfferInfo strong {
	text-transform: uppercase;
}

#inscription .step {
	grid-column: auto / span 12;
	display: none;
	min-height: 20em;
}
#inscription .step .field-text {
	width: 50%;
}

#inscription h2 {
	margin-bottom: 0.5em;
}
#inscription .stepIntroduction {
	margin-bottom: 2em;
}


#signInProgress {
	grid-column: auto / span 12;
	margin: 2em 0;
}
#signInProgress ul {
	display: flex;
}
#signInProgress li {
	flex: 1 0;
	text-align: center;
	border-bottom: 2px solid rgb(0,0,0,var(--opacity-text-disabled));
	padding-bottom: 1em;
	font-size: .88em;
	position: relative;
}
#signInProgress li::after {
	content: '\f111';
	font-family: var(--font-icons);
	font-weight: 400;
	display: block;
	position: absolute;
	bottom: calc(1.15em / -2);
	line-height: 1em;
	left: calc(50% - 1em / 2);
	background: white;
}
#signInProgress li.selected,
#signInProgress li.completed {
	border-bottom-color: rgb(0,0,0,var(--opacity-text-high));
}
#signInProgress li.selected {
	font-weight: 700;
	color: var(--color-main-high);
}
#signInProgress li.selected::after {
	content: '\f192';
}
#signInProgress li.completed::after {
	content: '\f058';
	color: var(--color-main-high);
}

#inscription #fieldsRequired {
	grid-column: auto / span 12;
}

#inscription .actions {
	grid-column: auto / span 12;
}
#inscription .actions ul {
	
	display: flex;
	justify-content: space-between;
}
#inscription .actions ul li {
	flex: 1 0;
}
#inscription .actions ul li.next {
	text-align: right;
}
#inscription .actions ul li .stepBtn,
#inscription .actions ul li .submitBtn {
	display: inline-block;
	/* background: yellow; */
	padding: .5em 0em;
	text-transform: uppercase;
	font-weight: 700;
	border-radius: 2px;
	cursor: pointer;
	color: var(--color-main-high);
	font-family: var(--font-main);
	font-size: 1em;
	background: none;
}
#inscription .actions ul li .submitBtn {
	background: var(--color-sub-main);
	padding: .5em 2em;
}
#inscription .actions ul li.prev .stepBtn i {
	margin-right: 0.5em;
}
#inscription .actions ul li.next .stepBtn i {
	margin-left: 0.5em;
}
#inscription .actions ul li .hidden {
	display: none;
}
#inscription input[name=domainName] {
	padding-right: 8em;
}
#inscription input[name=domainName] + span.suffix {
	position: absolute;
	right: 0;
	top: .1em;
	width: 7em;
}


/* algolia */
.ap-input-icon {
    display: none;
}
.ap-name, .ap-footer {
    color: #333333;
}
.ap-input {
	border-radius: 0;
	padding-left: 0;
	height: auto;
}


/* LG */
@media (max-width: 1199px) { 
	#inscription .step .field-text {
		width: 75%;
	}
}	
/* MD */
@media (max-width: 991px) {
	#inscription .step .field-text {
		width: 100%;
	}
}
/* XS */
@media (max-width: 575px) {
	#inscription input[name=domainName] + span.suffix {
		display: none;
	}
	#inscription input[name=domainName] {
		padding-right: 1em;
	}
}



/*=============================================
=            Confirmation d'inscription            =
=============================================*/

#confirmation-inscription {
	min-height: 20em;
}
#confirmation-inscription .message,
#confirmation-inscription .description {
	grid-column: auto / span 12;
}
#confirmation-inscription .message {
	margin-top: 2em;
	text-align: center;
	font-size: 1.41em;
	color: var(--color-main-high);
	margin-bottom: 1em;
}
#confirmation-inscription .message i {
	font-size: 2.7em;
	margin-bottom: 0.2em;
}
#confirmation-inscription .message i {
	color: var(--color-alert-danger);
}
#confirmation-inscription .message i {
	color: var(--color-alert-success);
}
#confirmation-inscription .description {
	text-align: center;
}




/*=============================================
=            Créer sa boutique en ligne            =
=============================================*/
#page-creer-sa-boutique-en-ligne #content {
	padding-bottom: 0;
}
#creerSaBoutiqueEnLigneHeaderBanner img {
	min-height: 15em;
}
#creerSaBoutiqueEnLigne h2 {
	font-size: 1.76em;
	margin-top: 0;
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne h2 {
		font-size: 1.3em;
	}
}

/*----------  Introduction  ----------*/

#creerSaBoutiqueEnLigne #introduction {
	padding-bottom: 2em;
}
#creerSaBoutiqueEnLigne #introduction.container > * {
	grid-column: auto / span 12;
}
#creerSaBoutiqueEnLigne #introduction .illustration {
	margin-top: -15em;
	text-align: center;
	position: relative;
	z-index: 2;

	transform: scale(.9) translateY(-20px);
	opacity: 0;
	transition: all .75s ease-out;
}
#creerSaBoutiqueEnLigne #introduction.inView .illustration {
	transform: scale(1) translateY(0px);
	opacity: 1;
}
#creerSaBoutiqueEnLigne #introduction h1 {
	margin-top: 1rem;
	margin-bottom: 0.3em;
	font-size: 2.52em;
	display: grid;
	align-items: center;
	justify-items: center;

	grid-template-columns: repeat(12, 1fr);
	column-gap: var(--size-gap-main-double);
}

#creerSaBoutiqueEnLigne #introduction h1 .click,
#creerSaBoutiqueEnLigne #introduction h1 .collect {
	max-height: 125px;
	
	opacity: 0;
	transform: translateX(-30px);
	transition: all .5s ease-in-out .15s;
}

#creerSaBoutiqueEnLigne #introduction.inView h1 .click,
#creerSaBoutiqueEnLigne #introduction.inView h1 .collect {
	transform: translateX(0);
	opacity: .5;
}
#creerSaBoutiqueEnLigne #introduction.inView h1 .collect {
	transition-delay: .4s;
}


#creerSaBoutiqueEnLigne #introduction h1 .click {
	grid-column: 2 / span 2;
}
#creerSaBoutiqueEnLigne #introduction h1 .collect {
	grid-column: 10 / span 2;
}
#creerSaBoutiqueEnLigne #introduction h1 > span {
	grid-column: auto / span 6;
	line-height: 1em;

	opacity: 0;
	transform: translateY(-10px);
	transition: all .5s ease-out;
}
#creerSaBoutiqueEnLigne #introduction.inView h1 > span {
	transform: translateY(0px);
	opacity: 1;
}
#creerSaBoutiqueEnLigne #introduction h1 > span span {
	display: block;
	font-size: .8em;

	opacity: 0;
	transform: scale(.8);
	transition: all .25s ease-out .5s;
}
#creerSaBoutiqueEnLigne #introduction.inView h1 > span span {
	transform: scale(1);
	opacity: 1;
}
#creerSaBoutiqueEnLigne #introduction .actions {
	display: flex;
	justify-content: center;
	margin-bottom: 1.5em;
}
#creerSaBoutiqueEnLigne #introduction .actions .btn {
	font-size: 1.17em;
	padding: .6em 4em;
}

/* XL */
@media (max-width: 1439px) { 
	#creerSaBoutiqueEnLigne #introduction .illustration {
		margin-top: -14em;
	}
	#creerSaBoutiqueEnLigne #introduction .illustration img {
		width: 40em;
		height: auto;
	}
	
}	
/* LG */
@media (max-width: 1199px) { 
	#creerSaBoutiqueEnLigneHeaderBanner img {
		min-height: 12em;
	}
	#creerSaBoutiqueEnLigne #introduction {
		padding-bottom: 3em;
	}
	#creerSaBoutiqueEnLigne #introduction .illustration {
		margin-top: -11em;
	}
	#creerSaBoutiqueEnLigne #introduction .illustration img {
		width: 35em;
	}

	
	#creerSaBoutiqueEnLigne #introduction h1 .click,
	#creerSaBoutiqueEnLigne #introduction h1 .collect {
		max-height: 100px;
	}
	#creerSaBoutiqueEnLigne #introduction h1 {
		font-size: 2em;
	}
	
}	

/* MD */
@media (max-width: 991px) {
	#creerSaBoutiqueEnLigne #introduction {
		padding-bottom: 2em;
	}
	#creerSaBoutiqueEnLigne #introduction h1 {
		display: flex;
	}
	#creerSaBoutiqueEnLigne #introduction h1 .click,
	#creerSaBoutiqueEnLigne #introduction h1 .collect {
		flex: 1 0;
		max-height: 75px;
	}
	#creerSaBoutiqueEnLigne #introduction .actions .btn {
		font-size: 1em;
	}
}
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #introduction {
		padding-bottom: 1em;
	}
	#creerSaBoutiqueEnLigne #introduction .illustration img {
		width: 25em;
	}
	#creerSaBoutiqueEnLigne #introduction h1 {
		font-size: 1.7em;
	}
	
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigneHeaderBanner img {
		min-height: 8em;
	}
	#creerSaBoutiqueEnLigne #introduction .illustration {
		margin-top: -7em;
	}
	#creerSaBoutiqueEnLigne #introduction .illustration img {
		max-width: 100%;
	}
	#creerSaBoutiqueEnLigne #introduction h1 {
		display: block;
		font-size: 1.5em;
	}
	#creerSaBoutiqueEnLigne #introduction h1 img {
		display: none;
	}
}


/*----------  Plan numérique  ----------*/
#creerSaBoutiqueEnLigne #planNumerique {
	background: var(--color-sub-main);
	text-align: center;
	padding: 1em 0;
}
#creerSaBoutiqueEnLigne #planNumerique .container > * {
	grid-column: auto / span 12;
	
	font-size: 1.2em;
}
#creerSaBoutiqueEnLigne #planNumerique i {
	margin-right: 0.5em;
}
#creerSaBoutiqueEnLigne #planNumerique a {
	text-decoration: underline;
}
#creerSaBoutiqueEnLigne #planNumerique a:hover {
	text-decoration: none;
}

/*----------  Main description  ----------*/
#creerSaBoutiqueEnLigne #mainDescription {
	background: url('../images/creer-sa-boutique-en-ligne/main-description-bg.jpg') center center no-repeat;
	background-size: cover;
	position: relative;
	padding: 3em 0;
}
#creerSaBoutiqueEnLigne #mainDescription::before {
	content: "";
	right: 0;
	bottom: 0;
	height: 100%;
	background: var(--color-sub-secondary);
	position: absolute;
	/* z-index: 2; */

	width: 100%;
	transition: all 1s ease-out;
}
#creerSaBoutiqueEnLigne #mainDescription.inView::before {
	width: 50%;
}
#creerSaBoutiqueEnLigne #mainDescription .content {
	grid-column: 8/13;
	color: white;
	position: relative;
	z-index: 2;
}
#creerSaBoutiqueEnLigne #mainDescription h2 {
	color: white;
	font-size: 1.53em;
	margin-top: 0;
}
#creerSaBoutiqueEnLigne #mainDescription .content div {
	line-height: 1.5em;
}
/* LG */
@media (max-width: 1199px) { 
	#creerSaBoutiqueEnLigne #mainDescription.inView::before {
		width: 60%;
	}
	#creerSaBoutiqueEnLigne #mainDescription .content {
		grid-column: 6/13;
	}
}	
/* MD */
@media (max-width: 991px) {

}
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #mainDescription {
		padding: 14em 0 1em;
		background-size: 100% auto;
		background-position: top center;		
	}
	#creerSaBoutiqueEnLigne #mainDescription::before {
		transition-delay: .5s;
	}
	#creerSaBoutiqueEnLigne #mainDescription.inView::before {
		width: 100%;
		height: calc(100% - 13em);
	}
	#creerSaBoutiqueEnLigne #mainDescription .content {
		grid-column: auto / span 12;
	}
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne #mainDescription {
		padding: 1em 0;
		background: var(--color-sub-secondary);
	}
	#creerSaBoutiqueEnLigne #mainDescription::before {
		display: none;
	}
	#creerSaBoutiqueEnLigne #mainDescription h2 {
		color: white;
		font-size: 1.3em;
	}
}


/*----------  Order Process  ----------*/
#creerSaBoutiqueEnLigne #orderProcess {
	padding: 3em 0;
}
#creerSaBoutiqueEnLigne #orderProcess .container > * {
	grid-column: auto / span 12;
}
#creerSaBoutiqueEnLigne #orderProcess h2 {
	text-align: center;
	color: var(--color-main-medium);
}
#creerSaBoutiqueEnLigne #orderProcess h2 span {
	display: inline;
	font-size: 1em;
}
#creerSaBoutiqueEnLigne #orderProcess ul {
	display: grid;
	grid-template-columns: repeat(4,1fr);
	gap: var(--size-gap-main-double);
}
#creerSaBoutiqueEnLigne #orderProcess ul li * {
	transition: all .25s ease-out;
}
#creerSaBoutiqueEnLigne #orderProcess ul li:nth-of-type(even) .illustration {
	color: var(--color-sub-main);
}
#creerSaBoutiqueEnLigne #orderProcess ul li:nth-of-type(odd) .illustration {
	color: var(--color-sub-secondary);
}
#creerSaBoutiqueEnLigne #orderProcess ul li i {
	width: 100%;
	position: relative;
	font-size: 3.64em;

	transform: translateX(-20px) scale(0);
	opacity: 0;
}
#creerSaBoutiqueEnLigne #orderProcess ul.inView li i {
	transform: translateX(0) scale(1);
	opacity: 1;

	transition-delay: calc(var(--list-item-key) * .35s);
}
#creerSaBoutiqueEnLigne #orderProcess ul li:not(:last-of-type) i::after {
	content: '';
	background: url(../images/creer-sa-boutique-en-ligne/arrow.svg) no-repeat;
	display: block;
	position: absolute;
	width: var(--size-gap-main-double);
	height: var(--size-gap-main-double);
	right: 0;
	z-index: 20;
	margin-right: calc(var(--size-gap-main-double) * -1);
	opacity: .1;
	top: calc(50% - var(--size-gap-main));
}

#creerSaBoutiqueEnLigne #orderProcess ul .illustration {
	text-align: center;
	margin: 1.5em 0 3em;
}
#creerSaBoutiqueEnLigne #orderProcess ul .title {
	font-size: 1.06em;
	color: var(--color-main-high);
	font-weight: 700;
	margin-bottom: 0.5em;
}
#creerSaBoutiqueEnLigne #orderProcess ul .description {
	font-size: 0.94em;
}

/* LG */
@media (max-width: 1199px) { 
	#creerSaBoutiqueEnLigne #orderProcess ul .description {
		font-size: 0.8em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#creerSaBoutiqueEnLigne #orderProcess ul .description {
		font-size: 0.85em;
	}
}
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #orderProcess ul {
		display: grid;
		grid-template-columns: repeat(2,1fr);
	}
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne #orderProcess {
		padding: 1.5em 0;
	}
	#creerSaBoutiqueEnLigne #orderProcess h2 span {
		display: block;
	}
	#creerSaBoutiqueEnLigne #orderProcess ul {
		grid-template-columns: 1fr;
	}
	#creerSaBoutiqueEnLigne #orderProcess ul li:not(:last-of-type) i::after {
		display: none;
	}
	#creerSaBoutiqueEnLigne #orderProcess ul li {
		display: grid;
		grid-template-columns: 1fr 3fr;
		column-gap: var(--size-gap-main-double);
	}
	#creerSaBoutiqueEnLigne #orderProcess ul li .illustration {
		grid-row: 1/3;
		margin-top: 0;
		margin-bottom: 0;
	}
	#creerSaBoutiqueEnLigne #orderProcess ul li .illustration i {
		font-size: 3em;
	}
	#creerSaBoutiqueEnLigne #orderProcess ul .title {
		/* margin-bottom: 0; */
		line-height: 1em;
	}
}


/*----------  shopExamples  ----------*/
#shopExamples {
	background: linear-gradient(180deg, rgba(0,0,0,.03) 63%, rgba(0,0,0,0) 100%);
	padding: 3em 0;
}
#shopExamples .container > * {
	grid-column: auto / span 12;
}
#shopExamples h2 {
	text-align: center;
	color: var(--color-main-medium);
}
#shopExamples ul {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: var(--size-gap-main-double);
}
#shopExamples ul li {
	background: white;
	text-align: center;
	box-shadow: 0px 0px 29px 0px rgba(0, 0, 0, 0.07);
	position: relative;
}
#shopExamples .demo {
	position: absolute;
	top: 0;
	right: 0;
	overflow: hidden;
	width: 4em;
	height: 4em;
}
#shopExamples .demo span {
	position: absolute;
	right: -3em;
	top: 1.2em;
	background: var(--color-sub-main);
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
	font-size: .7em;
	color: white;
	padding: .2em 3em;
	transform: rotate(45deg);
	transform-origin: top center;

}
#shopExamples ul li .illustrations {
	width: 100%;
	height: 16.47em;
	overflow: hidden;
	position: relative;
}
#shopExamples ul li .illustrations .device {
	position: absolute;
	bottom: 0;
	transform: rotate(26deg) translateX(-150px) translateY(75px);
	transform-origin: bottom right;
	z-index: 1;

	opacity: 0;
	transition: all .75s ease-out;
}

#shopExamples ul.inView li .illustrations .device {
	transform: rotate(26deg);
	opacity: 1;

	transition-delay: calc(var(--list-item-key) * .25s + .5s);
}
#shopExamples ul li:nth-of-type(1) .illustrations .device {
	left: -36%;
}
#shopExamples ul li:nth-of-type(2) .illustrations .device {
	left: -86%;
}
#shopExamples ul li:nth-of-type(3) .illustrations .device {
	left: -22%;
}
#shopExamples ul li .illustrations .logo {
	z-index: 2;
	position: absolute;
	bottom: 0;
	left: 50%;
	border-radius: 5px;
}
#shopExamples ul li .illustrations .logo img {
	border-radius: 5px;
}
#shopExamples .shopInfos {
	margin: 1em .5em;
	display: flex;
	flex-direction: column;
}
#shopExamples .shopInfos .name {
	font-size: 1.24em;
	font-weight: 700;
	color: var(--color-main-high);
}
#shopExamples .shopInfos .link {
	margin: 1em 0;
}

#annuaire #shopExamples {
	background: white;
	padding-top: 0;
}

/* LG */
@media (max-width: 1199px) { 
	#shopExamples ul li .illustrations {
		height: 14em;
	}
	#shopExamples ul li .illustrations .device {
		transform: scale(.9) rotate(26deg) translateX(-150px) translateY(75px);
	}
	#shopExamples ul.inView li .illustrations .device {
		transform: scale(.9) rotate(26deg);
	}
	#shopExamples ul li:nth-of-type(1) .illustrations .device {
		left: -51%;
	}
	#shopExamples ul li:nth-of-type(2) .illustrations .device {
		left: -113%;
	}
	#shopExamples ul li:nth-of-type(3) .illustrations .device {
		left: -31%;
	}
	#shopExamples ul li .illustrations .logo img {
		max-width: 7.5em;
	}
	#shopExamples .shopInfos .link {
		font-size: .9em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#shopExamples {
		padding: 2em 0;
	}
	#shopExamples ul li .illustrations .device {
		transform: scale(.7) translateX(-150px);
	}
	#shopExamples ul.inView li .illustrations .device {
		transform: scale(.7);
	}
	#shopExamples ul li:nth-of-type(1) .illustrations .device {
		left: -53%;
	}
	#shopExamples ul li:nth-of-type(2) .illustrations .device {
		left: -150%;
	}
	#shopExamples ul li:nth-of-type(3) .illustrations .device {
		left: -25%;
	}
	#shopExamples ul li .illustrations .logo img {
		max-width: 6.5em;
	}
	#shopExamples ul li .activity {
		font-size: .9em;
	}
}
/* SM */
@media (max-width: 767px) {
	#shopExamples ul {
		display: grid;
		grid-template-columns: 1fr;
	}
	#shopExamples ul li {
		display: flex;
	}
	#shopExamples ul li .shopInfos {
		flex: 1 0;
	}
	#shopExamples ul li .illustrations {
		width: 12em;
		height: 9em;
	}
	#shopExamples ul li .illustrations .device {
		transform: scale(.5) translateX(-150px);
	}
	#shopExamples ul.inView li .illustrations .device {
		transform: scale(.5);
	}
	#shopExamples ul li:nth-of-type(1) .illustrations .device {
		left: -81%;
	}
	#shopExamples ul li:nth-of-type(2) .illustrations .device {
		left: -202%;
	}
	#shopExamples ul li:nth-of-type(3) .illustrations .device {
		left: -40%;
	}
	#shopExamples ul li .illustrations .logo {
		bottom: 10%;
		right: 0;
		left: unset;
	}
}
/* XS */
@media (max-width: 575px) {
	#shopExamples ul li {
		display: block;
	}
	#shopExamples ul li .illustrations .device {
		display: none;
	}
	#shopExamples ul li .illustrations {
		width: 100%;
		height: auto;
		padding-top: 1em;
	}
	#shopExamples ul li .illustrations .logo {
		bottom: unset;
		right: unset;
		text-align: center;
		position: relative;
	}
	#shopExamples .shopInfos {
		margin-top: 0.5em;
	}
}


/*----------  Témoignage  ----------*/
#creerSaBoutiqueEnLigne #testimony {
	background: var(--color-sub-main);
	padding: 4em 0 3em;
	overflow-x: hidden;
	
}
#creerSaBoutiqueEnLigne #testimony a {
	color: white;
}
#creerSaBoutiqueEnLigne #testimony .container {
	justify-items: center;
	align-items: center;
}
#creerSaBoutiqueEnLigne #testimony .description {
	grid-column: auto / span 9;
	color: white;
	padding: 0 6em;
	position: relative;
}


#creerSaBoutiqueEnLigne #testimony .description .quote {
	font-size: 1.4em;
	font-style: italic;
	margin-bottom: 1em;
}

#creerSaBoutiqueEnLigne #testimony .description .quote::before,
#creerSaBoutiqueEnLigne #testimony .description .quote::after {
	content: '\f10d';
	font-family: var(--font-icons);
	font-size: 3em;
	font-weight: 900;
	display: block;
	position: absolute;
	font-style: normal;
	opacity: .4;
}
#creerSaBoutiqueEnLigne #testimony .description .quote::before {
	top: -.5em;
	left: 0;

}
#creerSaBoutiqueEnLigne #testimony .description .quote::after {
	content: '\f10e';
	bottom: .5em;
	right: 0;
}
#creerSaBoutiqueEnLigne #testimony .description .customer span {
	display: block;
	font-weight: 700;
	font-size: 1.17em;
}

#creerSaBoutiqueEnLigne #testimony .illustration {
	grid-column: auto /span 3;

	transition: all 1s ease-out;
	transform: translateX(100%);
	opacity: 0;
}
#creerSaBoutiqueEnLigne #testimony.inView .illustration {
	transform: translateX(0);
	opacity: 1;
}
#creerSaBoutiqueEnLigne #testimony .illustration img {
	border-radius: 50%;
	border: 4px solid rgba(255,255,255,.4);
	max-width: 100%;
}
#creerSaBoutiqueEnLigne #testimony .description .quote::before,
#creerSaBoutiqueEnLigne #testimony .description .quote::after {
	transition: all .25s ease-out .35s;
	transform: scale(0) rotate(180deg);
}
#creerSaBoutiqueEnLigne #testimony .description .quote::after {
	transition-delay: .75s;
}
#creerSaBoutiqueEnLigne #testimony.inView .description .quote::before,
#creerSaBoutiqueEnLigne #testimony.inView .description .quote::after {
	transform: scale(1);
}

/* LG */
@media (max-width: 1199px) { 
	#creerSaBoutiqueEnLigne #testimony .description {
		padding: 0 4em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .quote {
		font-size: 1.3em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .quote::before,
	#creerSaBoutiqueEnLigne #testimony .description .quote::after {
		font-size: 2em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .quote::before {
		top: -.5em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .quote::after {
		bottom: .5em;
	}
}	
/* MD */
@media (max-width: 991px) {
	#creerSaBoutiqueEnLigne #testimony {
		padding: 2em 0;
	}
	#creerSaBoutiqueEnLigne #testimony .description {
		grid-column: auto / span 8;
	}
	#creerSaBoutiqueEnLigne #testimony .illustration {
		grid-column: auto /span 4;
	}
	#creerSaBoutiqueEnLigne #testimony .description {
		padding: 0 2em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .quote {
		font-size: 1.2em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .quote::before,
	#creerSaBoutiqueEnLigne #testimony .description .quote::after {
		font-size: 3em;
		opacity: .15;
	}
}
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #testimony .description {
		grid-column: auto / span 12;
	}
	#creerSaBoutiqueEnLigne #testimony .description {
		padding: 0 4em;
	}
	#creerSaBoutiqueEnLigne #testimony .illustration {
		display: none;
	}
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne #testimony .description {
		padding: 0 1em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .quote {
		font-size: 1em;
	}
	#creerSaBoutiqueEnLigne #testimony .description .customer span {
		font-size: 1em;
	}
}

/*----------  étapes création  ----------*/

#creerSaBoutiqueEnLigne #creationSteps {
	padding: 2em 0;
}
#creerSaBoutiqueEnLigne #creationSteps .container > * {
	grid-column: auto / span 12;
}
#creerSaBoutiqueEnLigne #creationSteps h2 {
	text-align: center;
	color: var(--color-sub-secondary);
}
#creerSaBoutiqueEnLigne #creationSteps ul {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: var(--size-gap-main-double);
}
#creerSaBoutiqueEnLigne #creationSteps ul li {
	background: var(--color-sub-secondary);
	color: white;
	padding: 1.5em 1em;
	position: relative;
	counter-increment: steps;
	overflow: hidden;
}
#creerSaBoutiqueEnLigne #creationSteps ul li::before {
	content: counter(steps);
	position: absolute;
	font-weight: 700;
	top: 0;
	left: -3rem;
	font-size: 22em;
	opacity: .13;
	line-height: 1em;

	transform: translateX(-100%);
	transition: all .75s ease-out;
	transition-delay: calc(var(--list-item-key) * .5s);
}
#creerSaBoutiqueEnLigne #creationSteps.inView ul li::before {
	transform: translateX(0);
}
#creerSaBoutiqueEnLigne #creationSteps ul li .illustration {
	font-size: 4.7em;
	text-align: center;
	margin-top: 2rem;

	transform: scale(1.5);
	opacity: 0;
	transition: all .5s ease-out .25s;
}
#creerSaBoutiqueEnLigne #creationSteps.inView ul li .illustration {
	opacity: 1;
	transform: scale(1);
}
#creerSaBoutiqueEnLigne #creationSteps ul li .title {
	font-weight: 700;
	text-transform: uppercase;
	font-size: 1.41em;
	text-align: center;
	margin-bottom: 2rem;
}

/* XL */
@media (max-width: 1439px) { 
	#creerSaBoutiqueEnLigne #creationSteps ul li .illustration {
		font-size: 3.5em;
		margin-top: 1rem;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li .title {
		font-size: 1.2em;
		margin-bottom: 1rem;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li .description {
		font-size: .9em;
	}
}	
/* LG */
@media (max-width: 1199px) { 
	#creerSaBoutiqueEnLigne #creationSteps ul {
		display: grid;
		grid-template-columns: 1fr;
		row-gap: var(--size-gap-main);
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li {
		display: grid;
		grid-template-columns: 34% auto;
		align-items: center;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li::before {
		font-size: 10em;
		left: .5rem;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li .illustration {
		grid-row: 1/3;
		margin-top: 0;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li .description {
		font-size: 1em;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li .title {
		font-size: 1.2em;
		margin-bottom: .5rem;
	}
}	
/* MD */
@media (max-width: 991px) {
	#creerSaBoutiqueEnLigne #creationSteps ul li {
		grid-template-columns: 25% auto;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li::before {
		left: -1.5rem;
	}
}
/* SM */
@media (max-width: 767px) {

}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne #creationSteps ul li {
		display: block;
	}
	#creerSaBoutiqueEnLigne #creationSteps ul li::before {
		font-size: 15em;
		left: -1.5rem;
	}
}

/*----------  tarifs  ----------*/

#creerSaBoutiqueEnLigne #prices {
	padding-top: 3em;
	padding-bottom: 3em;
}
#creerSaBoutiqueEnLigne #prices h2 {
	margin: 0;
}
#creerSaBoutiqueEnLigne #prices h2 span {
	display: block;
	font-size: 1em;
}
#creerSaBoutiqueEnLigne #prices.container > * {
	grid-column: auto / span 12;
}
#creerSaBoutiqueEnLigne #prices thead th:not(:first-of-type) span.popularLabel {
	font-size: .7em;
	padding: 0em 1em;
	background: var(--color-sub-main);
	color: white;
	display: inline-block;
	border-radius: 1em;
}

#creerSaBoutiqueEnLigne #prices table {
	border-collapse: collapse;
}
#creerSaBoutiqueEnLigne #prices th,
#creerSaBoutiqueEnLigne #prices td {
	padding: .75em .5em;
}
#creerSaBoutiqueEnLigne #prices tr th {
	width: calc(66% / 5);
}
#creerSaBoutiqueEnLigne #prices tr th:first-of-type {
	width: 34.2%;
}
#creerSaBoutiqueEnLigne #prices thead th:first-of-type {
	text-align: left;
}
#creerSaBoutiqueEnLigne #prices thead th:not(:first-of-type) {
	text-transform: uppercase;
	line-height: 1em;
	color: var(--color-main-high);
}
#creerSaBoutiqueEnLigne #prices thead th:not(:first-of-type) span {
	font-size: .76em;
	display: block;
}
#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(2),
#creerSaBoutiqueEnLigne #prices tbody tr {
	border-bottom: 1px solid rgba(0,0,0,.14);
}
#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(2) th:nth-of-type(even),
#creerSaBoutiqueEnLigne #prices tbody td:nth-of-type(odd),
#creerSaBoutiqueEnLigne #prices tfoot tr:not(:last-of-type) td:nth-of-type(odd) {
	background: rgba(0,0,0,.04);
}
#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(1) th {
	padding: 0;
}
#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(1) th.default {
	border-top: 1px solid var(--color-sub-main);
	border-left: 1px solid var(--color-sub-main);
	border-right: 1px solid var(--color-sub-main);

	padding: 0.3em 0 0;

	box-shadow: 0px 10px 1em 0px rgba(0, 0, 0, 0.3);
	clip-path: inset(-1em -1em 0 -1em);
}
#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(2) .default {
	border-left: 1px solid var(--color-sub-main);
	border-right: 1px solid var(--color-sub-main);
}
#creerSaBoutiqueEnLigne #prices tbody .default {
	border-left: 1px solid var(--color-sub-main);
	border-right: 1px solid var(--color-sub-main);
}
#creerSaBoutiqueEnLigne #prices tfoot .default {
	border-left: 1px solid var(--color-sub-main);
	border-right: 1px solid var(--color-sub-main);
}
#creerSaBoutiqueEnLigne #prices tfoot tr:last-of-type td {
	padding: 0;
}
#creerSaBoutiqueEnLigne #prices tfoot tr:last-of-type td.default {
	padding: 0 0 0.3em 0;

	border-bottom: 1px solid var(--color-sub-main);
	box-shadow: 0px -10px 1em 0px rgba(0, 0, 0, 0.3);
	clip-path: inset(0 -1em -1em -1em);
}

#creerSaBoutiqueEnLigne #prices tfoot tr:not(:last-of-type) {
	display: none;
}
#creerSaBoutiqueEnLigne #prices tfoot tr.show {
	display: table-row;
}
#creerSaBoutiqueEnLigne #prices tbody {
	font-size: .88em;
}
#creerSaBoutiqueEnLigne #prices tbody td {
	text-align: center;
}
#creerSaBoutiqueEnLigne #prices tbody span,
#creerSaBoutiqueEnLigne #prices tfoot th span {
	font-weight: 400;
	font-size: .76em;
	display: block;
}
#creerSaBoutiqueEnLigne #prices tbody th,
#creerSaBoutiqueEnLigne #prices tfoot th {
	text-align: left;
}
#creerSaBoutiqueEnLigne #prices tfoot th {
	font-size: .88em;
}
#creerSaBoutiqueEnLigne #prices tfoot td {
	font-size: 1.29em;
	color: var(--color-main-high);
	text-transform: uppercase;
	font-weight: 700;
	text-align: center;
}
#creerSaBoutiqueEnLigne #prices tfoot td span {
	font-size: .6em;
	font-weight: normal;
	text-transform: none;
}

/* MD */
@media (max-width: 991px) {
	#creerSaBoutiqueEnLigne #prices tr th:first-of-type {
		width: 30%;
	}
	#creerSaBoutiqueEnLigne #prices tfoot td {
		font-size: 1.15em;
	}
}
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #prices {
		padding: 0em 0 1em;
	}
	#creerSaBoutiqueEnLigne #prices table {
		margin: 0 1em;
	}
	#creerSaBoutiqueEnLigne #prices thead {
		display: block;
		margin-bottom: 3em;
	}
	#creerSaBoutiqueEnLigne #prices thead tr:first-of-type {
		display: none;
	}
	#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(2) {
		display: block;
		text-align: center;
		border-bottom: none;
	}
	#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(2) > th:not(:first-of-type) {
		width: auto;
		display: inline-block;
		background: none !important;
		border: 1px solid rgba(0,0,0,.4);
		font-size: .95em;
		border-radius: 2px;
		padding: .5em 1em;
		margin-bottom: 0.5em;
		margin-right: .5em;
		cursor: pointer;
	}
	#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(2) > th.selected {
		border-color: var(--color-sub-main);
		box-shadow: 0 0 0 1px var(--color-sub-main);
	}
	#creerSaBoutiqueEnLigne #prices thead tr:nth-of-type(2) th:first-of-type {
		display: block;
		width: auto;
	}
	#creerSaBoutiqueEnLigne #prices thead th:not(:first-of-type) span {
		font-size: unset;
		display: unset;
		margin-left: 0.5em;
	}
	#creerSaBoutiqueEnLigne #prices h2 {
		text-align: center;
	}
	#creerSaBoutiqueEnLigne #prices h2 span {
		display: inline;
	}
	#creerSaBoutiqueEnLigne #prices tbody th,
	#creerSaBoutiqueEnLigne #prices tfoot th {
		padding-left: 0;
	}
	#creerSaBoutiqueEnLigne #prices tbody tr th:first-of-type,
	#creerSaBoutiqueEnLigne #prices tfoot tr th:first-of-type {
		width: auto;
	}

	#creerSaBoutiqueEnLigne #prices tbody td,
	#creerSaBoutiqueEnLigne #prices tfoot td {
		display: none;
		background: rgba(0,0,0,.04) !important;
		border: none !important;

	}
	#creerSaBoutiqueEnLigne #prices tbody td.show,
	#creerSaBoutiqueEnLigne #prices tfoot td.show{
		display: table-cell;
	}
	#creerSaBoutiqueEnLigne #prices tfoot tr.show {
		display: grid;
	}
	#creerSaBoutiqueEnLigne #prices tbody tr,
	#creerSaBoutiqueEnLigne #prices tfoot tr {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
	}
	#creerSaBoutiqueEnLigne #prices tbody tr:first-of-type td {
		position: relative;
	}
	#creerSaBoutiqueEnLigne #prices tbody tr:first-of-type td::before{
		content: "Standard";
		display: block;
		position: absolute;
		top: -2.3em;
		padding: .5em 0;
		left: 0;
		font-weight: 700;
		width: 100%;
		color: var(--color-main-high);
		text-transform: uppercase;
		text-align: center;
		background: rgba(0,0,0,.04) !important;
	}
	#creerSaBoutiqueEnLigne #prices tbody tr:first-of-type td::before{
		content: var(--offer-title);
	}
	#creerSaBoutiqueEnLigne #prices tfoot tr:last-of-type {
		display: none;
	}
}


#creerSaBoutiqueEnLigne #subscriptionPeriodChoice {
	display: flex;
	font-size: 1.1em;
	margin-top: 2em;
	/* flex-direction: column; */
	text-align: center;
	justify-content: center;
}
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice .title {
	margin-bottom: 0.5em;
	font-weight: 700;
}
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice .title i {
	margin-right: .5em;
	display: none;
}
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice ul {
	margin-left: 1em;
}
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice ul li {
	display: inline-block;
}
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice ul li:not(:last-of-type) {
	margin-right: 1em;
}
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice label,
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice input {
	cursor: pointer;
}
#creerSaBoutiqueEnLigne #subscriptionPeriodChoice input {
	margin-right: 0.5em;
}
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #prices #subscriptionPeriodChoice{
		padding: 0 var(--size-gap-main);
	}
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne #subscriptionPeriodChoice {
		display: block;
		text-align: center;
	}
	#creerSaBoutiqueEnLigne #subscriptionPeriodChoice .title {
		margin-bottom: 0.5em;
	}
	#creerSaBoutiqueEnLigne #subscriptionPeriodChoice ul {
		margin-left: 0;
	}
	#creerSaBoutiqueEnLigne #subscriptionPeriodChoice ul li:not(:last-of-type) {
		margin-right: 0;
	}
}


/*----------  fonctionnalités  ----------*/

#creerSaBoutiqueEnLigne #frameworkFeatures {
	padding: 2em 0 4em;
}
#creerSaBoutiqueEnLigne #frameworkFeatures .container > * {
	grid-column: auto / span 12;
}
#creerSaBoutiqueEnLigne #frameworkFeatures .container > ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--size-gap-main-double);
}
#creerSaBoutiqueEnLigne #frameworkFeatures .category {
	font-weight: 700;
	margin-bottom: .5em;
}
#creerSaBoutiqueEnLigne #frameworkFeatures ul > li {
	margin-bottom: 1em;
}
#creerSaBoutiqueEnLigne #frameworkFeatures ul ul li {
	font-size: .8em;
	display: flex;
	margin-bottom: .5em;
}
#creerSaBoutiqueEnLigne #frameworkFeatures ul ul li::before {
	content: "\f00c";
	font-family: var(--font-icons);
	font-weight: 900;
	font-size: .5em;
	margin-top: 0.8em;
	margin-right: 1rem;
	color: var(--color-alert-success);
}

/* MD */
@media (max-width: 991px) {
	#creerSaBoutiqueEnLigne #frameworkFeatures .container > ul {
		grid-template-columns: 1fr;
	}
	#creerSaBoutiqueEnLigne #frameworkFeatures ul > li {
		margin-bottom: 0;
	}
	#creerSaBoutiqueEnLigne #frameworkFeatures ul ul li {
		font-size: .9em;
	}
}


/*----------  one more step  ----------*/

#creerSaBoutiqueEnLigne #oneMoreStep {
	padding: 0 0 ;
	position: relative;
	background: var(--color-sub-main);
	overflow: hidden;
}
#creerSaBoutiqueEnLigne #oneMoreStep::before,
#creerSaBoutiqueEnLigne #oneMoreStep::after {
	content: "";
	width: 50%;
	height: 100%;
	position: absolute;
	z-index: 1;
	display: block;
	top: 0;
}
#creerSaBoutiqueEnLigne #oneMoreStep::before {
	background: var(--color-sub-main);
	left: 0;	
}

#creerSaBoutiqueEnLigne #oneMoreStep::after {
	background: url(../images/creer-sa-boutique-en-ligne/one-more-step-bg.jpg) center center no-repeat;
	background-size: cover;
	right: 0;

	transition: all 1s ease-out;
	opacity: 0;
	transform: scale(1.3);
}
#creerSaBoutiqueEnLigne #oneMoreStep.inView::after {
	opacity: 1;
	transform: scale(1);
}
#creerSaBoutiqueEnLigne #oneMoreStep .container .content {
	grid-column: auto / span 6;
	position: relative;
	z-index: 2;
	padding: 3em 0;
	background: var(--color-sub-main);
}
#creerSaBoutiqueEnLigne #oneMoreStep .description {
	text-align: center;
	font-size: 1.47em;
	margin-bottom: 1em;;
}
#creerSaBoutiqueEnLigne #oneMoreStep .description strong {
	font-size: 1.76rem;
	display: block;
}
#creerSaBoutiqueEnLigne #oneMoreStep .actions {
	display: flex;
	justify-content: center;
}
#creerSaBoutiqueEnLigne #oneMoreStep .actions li:not(:last-of-type) {
	margin-right: 1em;
}

/* LG */
@media (max-width: 1199px) { 
	#creerSaBoutiqueEnLigne #oneMoreStep .container .content {
		grid-column: auto / span 7;
	}
	#creerSaBoutiqueEnLigne #oneMoreStep::after {
		width: 45%;
	}
	#creerSaBoutiqueEnLigne #oneMoreStep .description {
		font-size: 1.2em;
	}
	#creerSaBoutiqueEnLigne #oneMoreStep .description strong {
		font-size: 1.4rem;
	}
}	
/* MD */
@media (max-width: 991px) {
	#creerSaBoutiqueEnLigne #oneMoreStep .container .content {
		grid-column: auto / span 8;
	}
	#creerSaBoutiqueEnLigne #oneMoreStep::after {
		width: 40%;
	}
}
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #oneMoreStep::after {
		display: none;
	}
	#creerSaBoutiqueEnLigne #oneMoreStep .container .content {
		grid-column: auto / span 12;
		padding: 1em 0;
	}
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne #oneMoreStep .actions {
		flex-direction: column;
		justify-content: center;
	}
	#creerSaBoutiqueEnLigne #oneMoreStep .actions li:not(:last-of-type) {
		margin-right: 0;
	}
	#creerSaBoutiqueEnLigne #oneMoreStep .actions a {
		display: block;
		margin-bottom: 0.5em;
	}
}


/*----------  framework informations  ----------*/
#creerSaBoutiqueEnLigne #frameworkInformations {
	padding: 4em 0;
	background:
		linear-gradient(90deg, rgba(255,255,255,0) 20%, rgba(255,255,255,1) 45%),
		url(../images/creer-sa-boutique-en-ligne/ietc-signs.jpg) center left no-repeat
		;	
	background-size:
		auto auto,
		auto 100%;
}
#creerSaBoutiqueEnLigne #frameworkInformations .container .content {
	grid-column: 7 / span 6;
	position: relative;
	z-index: 2;
}
#creerSaBoutiqueEnLigne #frameworkInformations .container .content > * {
	opacity: 0;
	transition: all .25s ease-out calc(var(--item-key) * .25s);
}
#creerSaBoutiqueEnLigne #frameworkInformations.inView .container .content > * {
	opacity: 1;
}
#creerSaBoutiqueEnLigne #frameworkInformations h2 {
	line-height: 1em;
}
#creerSaBoutiqueEnLigne #frameworkInformations h2 span {
	font-size: 1.4rem;
}
#creerSaBoutiqueEnLigne #frameworkInformations .actions {
	margin-top: 2em;
}

/* LG */
@media (max-width: 1199px) { 
	#creerSaBoutiqueEnLigne #frameworkInformations {
		padding: 2em 0;
		background:
		linear-gradient(90deg, rgba(255,255,255,0) 10%, rgba(255,255,255,1) 35%),
		url(../images/creer-sa-boutique-en-ligne/ietc-signs.jpg) center left no-repeat
		;
	}
	#creerSaBoutiqueEnLigne #frameworkInformations .container .content {
		grid-column: 5 / span 8;
	}
}	
/* SM */
@media (max-width: 767px) {
	#creerSaBoutiqueEnLigne #frameworkInformations {
		padding: 2em 0;
		background:
		linear-gradient(90deg, rgba(255,255,255,.8) 0%, rgba(255,255,255,1) 50%),
		url(../images/creer-sa-boutique-en-ligne/ietc-signs.jpg) center left no-repeat
		;
	}
	#creerSaBoutiqueEnLigne #frameworkInformations .container .content {
		grid-column: auto / span 12;
	}
}
/* XS */
@media (max-width: 575px) {
	#creerSaBoutiqueEnLigne #frameworkInformations h2 {
		text-align: center;
	}
	#creerSaBoutiqueEnLigne #frameworkInformations h2 span {
		font-size: 1.1rem;
	}
	#page-creer-sa-boutique-en-ligne footer #preFooter {
		padding-top: 0;
	}
}	



/*=============================================
=            CGV + mentions légales            =
=============================================*/
#page-CGV #content .container div,
#page-mentions-legales #content .container div {
	font-size: .8em;
}





/*=============================================
=            404            =
=============================================*/

#error404 {
	min-height: 15em;
	text-align: center;
}



/*=============================================
=            Tchat            =
=============================================*/
#lhc_need_help_container {
	display: none;
}




/*=============================================
=            Boutique non trouvée            =
=============================================*/

#page-shopNotFound {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100vh;
	overflow: hidden;
}
#page-shopNotFound #content {
	padding: 4em;
	width: 100%;
	max-width: calc(600px + 4em);
}
#page-shopNotFound #content img {
	width: 100%;
	transform: translateX(4em);
	transition: all 1s ease-out;
	opacity: 0;
}
#page-shopNotFound #content.inView img {
	transform: translateX(0);
	opacity: 1;
}
#page-shopNotFound #content .title {
	text-align: center;
	margin: 1em 0 .5em;
	font-size: 1.5em;
}
#page-shopNotFound #content .description {
	margin-bottom: 2em;
}
#page-shopNotFound #content .title,
#page-shopNotFound #content .description {
	opacity: 0;
	transform: translateX(-4em);
	transition: all 1s ease-out;
}
#page-shopNotFound #content.inView .title,
#page-shopNotFound #content.inView .description {
	opacity: 1;
	transform: translateY(0);
}
#page-shopNotFound #content .actions {
	text-align: center;
	transform: translateX(4em);
	transition: all 1s ease-out;
	opacity: 0;
}
#page-shopNotFound #content.inView .actions {
	transform: translateY(0);
	opacity: 1;
}
#page-shopNotFound #content .actions .btn {
	background: var(--color-sub-secondary);
}
/* XS */
@media (max-width: 575px) {
	#page-shopNotFound #content {
		padding: 1em;
	}
}

/*=============================================
=            Support            =
=============================================*/

#support .container > div {
	grid-column: auto / span 12;
	min-height: 30em;;
}





/*=============================================
=            Temp            =
=============================================*/

.col1 {
	grid-column: auto / span 1;
}
.col2 {
	grid-column: auto / span 2;
}
.col3 {
	grid-column: auto / span 3;
}
.col4 {
	grid-column: auto / span 4;
}
.col5 {
	grid-column: auto / span 5;
}
.col6 {
	grid-column: auto / span 6;
}
.col7 {
	grid-column: auto / span 7;
}
.col8 {
	grid-column: auto / span 8;
}
.col9 {
	grid-column: auto / span 9;
}
.col10 {
	grid-column: auto / span 10;
}
.col11 {
	grid-column: auto / span 11;
}
.col12 {
	grid-column: auto / span 12;
}





/*=============================================
=            Debug Reponsive            =
=============================================*/
/* ------
	GRILLE
   ----------- */
#grille {
	position: fixed;
	top: 0;
	z-index: 6000;
	width: 100%;
	display: none;
	cursor: pointer;
}

#grille .element {
	background: rgb(255,0,0,.5);
	height: 500px;
	/* float: left; */
	/* width: 8.33333%; */
	box-sizing: border-box;
}
#grille .element .content {
	background: rgb(255,255,255,.5);
	height: 500px;
	margin: 0 var(--size-margin-default);
}
#grille.showGrid {
	display: block;
}

/* 	-----
	breakpoints
	-----
*/
#debug-responsive  {
	position: fixed;
	bottom: 50px;
	left: var(--size-margin-default);
	color: #333;
	z-index: 2000;
	font-size: 33px;
	cursor: pointer;

	/* display: none; */
}
#debug-responsive .container {
	width: 100px;
	height: 100px;
	background: #a2a2a2;
	text-align: center;
	border-radius: 100px;
	line-height: 2.9em;
	opacity: .3;
}

/* Extra small devices (phones, less than 768px) */
/* No media query since this is the default in Bootstrap */

#debug-responsive .container div#sm,
#debug-responsive .container div#md, 
#debug-responsive .container div#lg,
#debug-responsive .container div#xl {
	display: none;
}
	
#debug-responsive .container div#xs {
	display: block;
}

/* Small devices (tablets, 768px and up) */
@media (min-width: 576px) {
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#md, 
	#debug-responsive .container div#lg,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#sm {
		display: block;
	}	
}

/* Medium devices (desktops, 992px and up) */
@media (min-width: 768px) {
	#debug-responsive .container div#xs,
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#lg,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#md {
		display: block;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 992px) { 
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#md,
	#debug-responsive .container div#xl {
		display: none;
	}
		
	#debug-responsive .container div#lg {
		display: block;
	}
}

/* Large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) { 
	#debug-responsive .container div#xs, 
	#debug-responsive .container div#sm, 
	#debug-responsive .container div#md,
	#debug-responsive .container div#lg {
		display: none;
	}
		
	#debug-responsive .container div#xl {
		display: block;
	}
}