/**
 * Forms
 */
form a{ color: #d74f5c; }

/* All elements */
.field { margin-bottom: 30px; position:relative; }
.field label { display: inline-block; margin:0; }

[data-validate-for] { display:none; font-size:10px; line-height:10px; position:absolute; right:0; bottom:-1.2em; }
[data-validate-for].visible { display:block; }

/* Textfields & textareas */
.field.textfield input,
.field.textarea textarea { display: block; width: 100%; padding: 10px; border: 1px solid #ccc; }

/* Checkbox & Radio */
.field.checkbox label,
.field.radio label { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; position:relative; margin-bottom:10px; }

.field.checkbox input,
.field.radio input,
.field.checkbox span:before,
.field.radio span:before { width:20px; height:20px; margin-right:10px; cursor: pointer; }

.field.checkbox span:before,
.field.radio span:before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); border:1px solid #ccc; background:#fff; }

.field.checkbox span:after,
.field.radio span:after { content:''; position:absolute; left:3px; top:50%; transform:translateY(-50%); width: 14px; height:14px; background:#d74f5c; opacity:0; transition:all 0.5s ease 0s; }

.field.checkbox input:checked+span:after,
.field.radio input:checked+span:after { opacity: 1; }

.field.checkbox span:before,
.field.checkbox span:after { border-radius: 0; }

.field.radio span:before,
.field.radio span:after { border-radius: 50%; }

.field.radio.inline,
.field.checkbox.inline { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; }
.field.radio.inline label,
.field.checkbox.inline label { margin-right:15px; margin-bottom:0; }

/* Select */
.field.select select { display:block; width:100%; padding:10px; border:1px solid #ccc; }

/* Captcha */
.field.captcha { display:flex; flex-direction:row; justify-content:center; }

/* Alert */
.alert { position: fixed; padding: 3%; margin-bottom: 1rem; border: 1px solid transparent; z-index: 2; top: 24%; left: 10%; right: 10%; width: 80%; max-width: 700px; margin: auto; font-size: 2rem; border-radius: 5px; }
.alert-success { color: #155724; background-color: #d4edda; border-color: #c3e6cb; } .alert-success .close { fill: #155724; }
.alert-primary { color: #004085; background-color: #cce5ff; border-color: #b8daff; } .alert-primary .close { fill: #004085; }
.alert-secondary { color: #383d41; background-color: #e2e3e5; border-color: #d6d8db; } .alert-secondary .close { fill: #383d41; }
.alert-danger { color: #721c24; background-color: #f8d7da; border-color: #f5c6cb; } .alert-danger .close { fill: #721c24; }
.alert-warning { color: #856404; background-color: #FFF3cd; border-color: #ffeeba; } .alert-warning .close { fill: #856404; }
.alert-info { color: #0c5460; background-color: #d1ecf1; border-color: #bee5eb; } .alert-info .close { fill: #0c5460; }

.alert .close { width: 3rem; height: 3rem; display: block; float: right; cursor: pointer; border: 0; background-color: transparent; padding: 5px; margin: -15px -15px 0 0; }
.alert .close:before{ content: ""; background: url(../themes/ecrinbeaute/assets/img/close.svg) no-repeat 50% 50%; background-size: 50%; display: block; height: 100%; width: 100%; }
.alert .close span{ display: none; }

/* Frontend editor */
.ct-widget.ct-ignition { position:fixed; left:auto; top:auto; right:20px; bottom:20px; z-index:10000; transition:all 0.5s ease 0s; }
.ct-widget.ct-ignition .ct-ignition__button { position:static; margin-top:10px;}

.ce-element { outline:2px dashed rgba(243, 156, 18, 0.5); }
.ce-element--focused, .ce-element:focus { outline:2px dashed rgba(243, 156, 18, 1); }

/**
 * Legal
 **/
.legal { padding: 15rem 0 0; }
.legal h1 { font-size:4rem; margin:0 0 1em 0; }
.legal h2 { font-size:3rem; margin:1em 0; }
.legal h3 { font-size:2.5rem; margin:1em 0; }
.legal h4 { font-size:2rem; margin:1em 0; }
.legal h5 { font-size:1.5rem; margin:1em 0; }
.legal table { width:100%; margin:2em 0; }
.legal table th,
.legal table td { padding:1em; border:1px solid rgba(0,0,0,0.25); }
/**
 * General Elements
 **

Mont
	Light:		300
	Book:		350
	Regular:	400
	SemiBold: 	600
	Bold:		700
	Black:		900
	
Colors
	rose:		#D74F5C;
	btn vert: 	#80D8C4;
	txt vert: 	#1ABB8F;
*/

.booksy-widget-container-default .booksy-business-link { display:none !important; }

html { font-size:10px; }
body { font-size:1.8rem; font-family: 'Mont', sans-serif; font-weight: 350; color: #000; }

h1, h2, h3, h4, h5, h6{ line-height: 1em; margin-bottom: 0.5em; color: #D74F5C; }

h1{ font-size: 3rem; font-weight: 900; color: #D74F5C; margin: 1.5em 0 1em; }
h1:before{ content: ""; background-color: #D74F5C; height: 2rem; width: 1.5rem; -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; position: absolute; left: -1.5rem; top: 1.5em; transition: all 0.3s ease-in; }
h1 a{ opacity: 1; transition: all 0.3s ease-in; }
h1 a:hover{ opacity: 0.8; }
h1:hover:before{ transform: rotation(90deg); }

h2{ font-size: 2.6rem; font-weight: 400; line-height: 1em; }
h3{ font-size: 4rem; font-weight: 300; }
h4{ font-size: 3rem; font-weight: 900; }

b,strong{ font-weight: 700; }

/* forms */

:focus, 
button:focus { outline:none; }

.field label{ display: block; }
.field label{ display: block; }

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button{-webkit-appearance: none; margin: 0; }
input[type="number"]{-moz-appearance: textfield; }

.field{ margin-bottom: 15px; margin-right: -15px; }
.field.textfield input,
.field.textarea textarea{ padding:2.5rem 3rem 0.5rem 3rem; }
.field.textfield label,
.field.textarea label{ position:absolute; left: 20px; top: 2.5rem; transform:translateY(-50%); transition:all 0.3s ease 0s; }
.field.textfield.active label,
.field.textfield.filled label,
.field.textarea.active label,
.field.textarea.filled label{ top:10px; transform:translateY(0); font-size:1.4rem; }

.field.required > label:after{ content: ' *'; color: #900; }

[data-validate-for] { font-size: 11px; color: #c00; }
.textfield.error input, 
.textarea.error textarea{ border-color: #900;}

.btn{ display: inline-block; color: #FFF; line-height: 3rem; padding: 1rem 2.5rem; border-radius: 3rem; margin: 2rem 0 0; transition: all 200ms linear; border: 0; }
.btn:hover{ cursor: pointer; color: #FFF; }
.btn.vert{ font-size: 2.2rem; font-weight: 900; background-color: #80D8C4; }
.btn.vert:hover{ background-color: #5BAC96; }
.btn.rose{ font-size: 1.6rem; font-weight: 700; background-color: #D74F5C; }
.btn.rose:hover{ background-color: #b93e4a; }
.btn.outline{ border: 1px solid #b93e4a; color: #b93e4a; background-color: transparent; }
.btn.outline:hover{ background-color: #b93e4a; color: #fff; }

/* Images */
img, svg { max-width:100%; height:auto; fill: inherit; }
svg { display: block; }
img[data-sizes] { display:block; width:100%; background-size: 100%; }

/* Paragraphs */
p { margin-bottom:1em; }

/* Link */
a{ color:inherit; }
a:hover { text-decoration:none; color:inherit; }

/* Lists */
ul, ol { margin-bottom:0; padding:0; list-style:none; }

/* Autres */
iframe{ border: 0; display: block; }

[data-bg]{ background-size: 100%; background-repeat: no-repeat; background-position: 50% 100%; }

/* Icons */
i.icon{ display: inline-block; width: 3rem; height: 3rem; overflow: hidden; background-size: 100%; text-indent: 3rem; white-space: nowrap; overflow: hidden; }
i.icon-cadeau{ fill: none; }

i.icon{ display: block; background-color: #FFF; width: 3rem; height: 3rem; -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
i.icon.icon-contact{ -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/contact.svg); mask-image: url(../themes/ecrinbeaute/assets/img/contact.svg); }
i.icon.icon-cadeau{ -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/cadeau.svg); mask-image: url(../themes/ecrinbeaute/assets/img/cadeau.svg); }
i.icon.icon-fleche{ -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/arrow.svg); mask-image: url(../themes/ecrinbeaute/assets/img/arrow.svg); }
i.icon.icon-fb{ -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/fb.svg); mask-image: url(../themes/ecrinbeaute/assets/img/fb.svg); }
i.icon.icon-in{ -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/instagram.svg); mask-image: url(../themes/ecrinbeaute/assets/img/instagram.svg); }
i.icon.icon-tel{ -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/phone.svg); mask-image: url(../themes/ecrinbeaute/assets/img/phone.svg); }
i.icon svg{ display: none; }

/**
 * Classes
 **/
.casper{ display: none; }

.text-center{ text-align: center; }
.text-right{ text-align: right; }

.text-blanc{ color: #FFF; }
.text-rose{ color: #D74F5C; }
.text-vert{ color: #1ABB8F; }

.bg-vert{ background-color: #e1f6f1; }
.bg-gris{ background-color: #F1F1F1; }

.flex-row{ display: flex; flex-direction: row; align-items: center; }
.flex-row.justify{ justify-content: space-between; }
.align-bottom{ align-items: flex-end; }

/**
 * Components
 **/
.extra-container-bg{ position: relative; }
.extra-container-bg > *{ position: relative; z-index: 1; }
.extra-container-bg:before{ content: ''; position: absolute; height: 100%; z-index: 0; top: 0; right: 0; }

.square-list{ display: flex; flex-wrap: wrap; }
.square-item{ width: 33.3333%; padding-top: 33.333333%; height: 0; overflow: hidden; position: relative; font-size: 1.3rem; }
.square-item-data{ position: absolute; top: 7px; left: 7px; width: calc(100% - 14px); height: calc(100% - 14px); display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #fff; }

.square-item-data h2{ text-align: center; }
.square-item-data .img{ height:50%; margin-top: 10%; max-width: 80%; display: flex; align-items: center; justify-content: center; }
.square-item-data .img img{ max-height: 50%; }
.square-item-data .desc{ height:40%; max-width: 80%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
a.square-item-data{ border-bottom: 1rem solid #D74F5C; }
a.square-item-data:hover .btn.outline{ background-color: #b93e4a; color: #fff; }


/**
 * Layout
 **/
#page { position:relative; width:100%; overflow:hidden; }


	#header{ position: fixed; z-index: 10; width: 100%; height: 10rem; }
	#header:before{ content: ""; position: absolute; top: 0rem; width: 100%; height: 100%; z-index: 0; background-color: rgb(222 83 96 / 60%); opacity: 0.95; transition: all 0.7s ease-out; }
	#header.not-top:before{ background-color: #EE979D; }
	#header > div,
	#header > div > div{ height: 100%; }
	#header > .container{ position: relative; z-index: 1; }
	#header > .container > .flex-row{ align-items: center; justify-content: space-between; }
	
	/*
	#header .lotus-wrapper { position: absolute; width:100%; height: 100%; top: 0; overflow: hidden; z-index: 0; }
	#header .lotus { display: block; transform: rotate(-40deg); position: absolute; z-index: 0; fill: #1B847C; opacity: 0.2; width: 50vw; top: -33rem; right: -30vw; }*/
	
	#header .logo{ display: block; text-align: center; height: 7rem; margin: 1.5rem 0; transition: all 0.8s ease-out; }
	#header .logo img{ max-height: 100%; width: auto; }
	
		.navigation{ height: 100%; display: flex; }
		.primary-menu{ width: 150px; }
		
		.hamburger{ font-size: 2.2rem; font-weight: 900; color: #FFF; z-index: 2; position: relative; float: left; transition: color 0.8s ease-out; display: flex; align-items: center; }
		.hamburger-box{ width: 30px; }
		.hamburger-inner, 
		.hamburger-inner:after, 
		.hamburger-inner:before,
		.hamburger.is-active .hamburger-inner, 
		.hamburger.is-active .hamburger-inner:after, 
		.hamburger.is-active .hamburger-inner:before{ background-color: #80D8C4; height: 4px; width: 30px; }
		.hamburger-inner { width: 2rem; }
		.hamburger-inner:after{ opacity: 0; }
		.hamburger--collapse.is-active .hamburger-inner:after{ opacity: 1; }
		.hamburger span.text{ margin-left: 2rem; }
		
		#menu { color: #FFF; padding: 10rem 5rem 5rem; z-index: 1; font-family: "Mont"; font-weight: 900; font-size: 2.7rem; position: absolute; top: 0; right: 200%; width: 100%; opacity: 0.5; transition: right 0.7s cubic-bezier(.46,.93,.69,.95), left 0.7s cubic-bezier(.46,.93,.69,.95), opacity 0.9s ease-in-out; width: 33.3333%;}
		#menu.extra-container-bg:before{ background-color: rgb(215 79 92 / 90%); }
		#menu li a { padding: 0.5em 0; display: block; }
			.btns-available-up{ display: none; }
		
		body.open .hamburger{ color: #80D8C4; }
		body.open .hamburger:hover{ opacity: 1; }
		body.open #menu{ right: 0; top: 0; opacity: 1; right: 67.666%; }
		
		.secondary-menu{ justify-content: flex-end; }
		.secondary-menu .btn{ margin: 0 10px; }
	
	/* 3 cubes contact/cadeau/pagetop*/
	#aside{ position: fixed; width: 50px; right: 0; top: 50%; margin-top: -120px; z-index: 9; }
	#aside .item{ text-align: right; }
	#aside .item a{ display: block; width: 5rem; height: 5rem; background-size: 3rem; fill: #FFF; padding: 1rem; float: right; transition: width 0.4s ease-in-out; }
	#aside .item a:hover{ width: 7rem; }
	#aside .item-contact a{ background-color: #D74F5C; }
	#aside .item-cadeau a{ background-color: #80D8C4; fill: none; }
	#aside .item-fleche a{ background-color: #5BAC96; }
	#aside .item-fleche a i{ transform: rotate(180deg); }
		
	#main{ position: relative; z-index: 0; background-color: #F2F2ED; padding-bottom: 10rem; }
		#entete{ margin: 10rem 0 0rem; position: relative; }
		#entete .container{ position: relative; }
		#entete .container:before{ content: ''; position: absolute; background-size: contain; background-repeat: no-repeat; }
		#entete .container:after { content: ''; background: url(../themes/ecrinbeaute/assets/img/lotus-bleu.svg) no-repeat; position: absolute; top: 0; right: -73%; width: 50%; padding-top: 65%; transform: rotate(-45deg) translateY(-69%); opacity: .5; background-size: contain; opacity: 0.2; }
		
		#entete .aside{ writing-mode: vertical-rl; position: absolute; top: 12rem; color: #D74F5C; transform: rotate(180deg); display: flex; flex-direction: row; align-items: flex-end; height: 80%; max-height: 570px; justify-content: center; text-transform: uppercase; z-index: 1; font-size: 2.6rem; font-weight: 900; opacity: 0.45; right: 0; width: 8.3333333%; }
		/*#entete .aside p{ margin: 0; height: 100%; justify-content: flex-end; }*/
		#entete .aside a{ display: block; height: 3rem; width: 3rem; margin: 7px; }
		#entete .aside .telephone{ height: auto; margin-top: 3rem; display: flex; }
		#entete .aside .icon{ transform: rotate(90deg); min-width: 3rem; background-color: #D74F5C; }
		#entete .aside .icon-fleche{ transform: rotate(180deg); }
		#entete .aside .text{ white-space: nowrap; line-height: 100%; }
	
		#facebook{ padding: 10% 0 7%; background-size: cover; color: #fff; background-color: rgb(244,173,177); 
			/*background: linear-gradient(125deg, rgba(228,123,133,1) 0%, rgba(244,173,177,1) 50%, rgba(215,79,92,1) 100%); */
			}
			
		#instagram{ background-color: #FFF; padding: 3% 0 5rem; text-align: center; }
		#instagram h4{ line-height: 1em; margin-bottom: 0; }
		#instagram .eapps-instagram-feed-posts-grid-load-more-container{ display: none; }
			#eapps-instagram-feed-1{ margin-top: 1rem; }
			
		#avis-google{ background-color: #FFF; padding: 3% 0 5rem; text-align: center; }
		#avis-google h4{ line-height: 1em; margin-bottom: 0; color: #1b847c; }
	
	#footer{ background-color: #1B847C; color: #FFF; padding: 5% 0 3%; position: relative; overflow: hidden; font-size: 1.9rem; }
	#footer .nowrap{ white-space: nowrap; }
	#footer .align-bottom{ margin-bottom: 3rem; }
	#footer p{ margin-bottom: 0; }
	#footer strong{ font-weight: 700; font-size: 2.1rem; }
	#footer .flex-row{ align-items: flex-end; }
	#footer a{ opacity: 0.8; }
	#footer a:hover{ opacity: 1; }
	#footer .telephone{ margin-bottom: 1em; margin-top: 2em; }
	#footer .telephone a{ font-weight: 900; white-space: nowrap; }
	#footer .horaires{ font-size: 0.9em; color: #fff !important; }
	#footer .social{ white-space: nowrap; display: flex; justify-content: space-evenly; }
	#footer .localiser{ height: 8rem; }
	#footer .localiser a{ display: flex; flex-direction: column; align-items: center; justify-content: space-evenly; border: 2px solid #fff; border-radius: 50%; width: 100px; height: 100px; text-align: center; line-height: 1.2em; font-size: 13px; font-weight: bold; padding: 1rem 1rem; background-color: rgb(27 132 124 / 80%); position: relative; z-index: 1; }
	#footer .localiser a:before{ content: ''; background: url(../themes/ecrinbeaute/assets/img/marker.svg) no-repeat 50% 50%; background-size: contain; width: 2rem; height: 3rem; }
	#footer .lotus{ position: absolute; width: 40%; height: 200%; transform: rotate(-23deg); right: -20%; bottom: -47%; fill: #FFF; opacity: 0.8; z-index: 0; background-size: 100%; padding-top: 40%; }
	#footer .legal{ font-size: 1.4rem; margin: 0; padding-top: 0; }


/**
 * Pages
 **/
 
/* Accueil */
#accueil{}
#accueil #header:before{ opacity: 0; }
#accueil #header .logo{ margin-top: -13rem; }
#accueil #header.not-top:before{ opacity: 0.95; }
#accueil #header.not-top .logo{ margin-top: 1.5rem; }

#accueil #main{ padding-bottom: 0rem; }
#accueil #entete{ height: 56vw; max-height: 100vh; margin-top: 0; background: rgb(230,143,152); background: linear-gradient(125deg, rgba(215,79,92,1) 0%, rgba(244,173,177,1) 50%, rgba(228,123,133,1) 100%); background-size: 100%; overflow: hidden; }
#accueil #entete-before{ background-repeat: no-repeat; background-position: 100% 0%; background-size: 25vw; position: absolute; width: 100%; height: 100%; z-index: 0; }
#accueil #entete .container:after{ content: none; }
#accueil #entete .lotus{ content: ""; position: absolute; z-index: 0; width: 100%; height: 120%; top: inherit; right: inherit; left: -20vw; bottom: -48%; transform: rotate(20deg); fill: #fff; }
#accueil #entete .background{ padding-top: 28%; width: 100%; height: 0; position: relative; height: 100%; padding-top: 0; max-width: 1400px; margin: auto; }
#accueil #entete .background .container{ position: relative; height: 100%; max-width: 90%; background-repeat: no-repeat; background-position: 57% 100%; background-size: auto 85%; z-index:1; }

#accueil #entete .aside{ color: #FFF; opacity: 1; max-height: 100%; }
#accueil #entete .aside .icon{ background-color: #FFF; }
/*#accueil #entete .aside p { justify-content: center; }*/

#accueil #entete h1{ max-width: 32%; margin: 0; padding: 0; display: flex; height: 40%; align-items: flex-end;}
#accueil #entete h1:before{ content: none; }
	#faites-plaisir { width: 17vw; height: 17vw; background-color: rgb(255 255 255 / 23%); border-radius: 50%; overflow: hidden; display: flex; flex-direction: column; align-items: center; color: #D74F5C; float: right; margin-right: 8vw; margin-top: -8%; text-align: center; padding: 2%; max-width: 300px; max-height: 300px; justify-content: space-around; }
	#faites-plaisir .icon-cadeau svg{ stroke: #D74F5C; }
	#faites-plaisir p{ margin: 0; font-weight: bold; white-space: nowrap; }
	#faites-plaisir .btn{ margin: 0; white-space: nowrap; font-size: 1.5rem; text-transform: uppercase; }
	
#accueil #edito{ background-color: #79dfc7;/*background: linear-gradient(169deg, rgba(119,223,200,1) 0%, rgba(199,246,235,1) 43%);*/ padding: 10% 0; }
#accueil #edito .container{ max-width: 80%; }
#accueil #edito .offset-lg-1{ padding-bottom: 5%; }
#accueil #edito .text-rose{ font-weight: 900; }
	
#accueil #cadeaux{ overflow: hidden; position: relative; }
#accueil #cadeaux .padding{ padding: 15% 15% 28% 15% }
#accueil #cadeaux .icon{ margin: 0 auto 3rem; }
	#cadeau{ background-color: #D74F5C; }
	#cadeau .lotus{ position: absolute; bottom: -32%; width: 80%; left: -12%; transform: rotate(26deg); padding-top: 65%; }
	#coeur{ background-color: #dd6974; }
	#coeur h3{ font-size: 3rem; }
	#coeur .lotus{ position: absolute; bottom: -17%; width: 80%; right: -45%; transform: rotate(-23deg); padding-top: 65%; }
#accueil #main #cadeaux .center-btn{ position: absolute; top: 70%; left: 50%; margin-left: -120px; z-index: 1; width: 240px; }

#accueil #marques{ background-color: #FFF; padding: 5% 0; }
#accueil #marques h4{ position: relative; text-align: center; color: #000; }
#accueil #marques h4:before{ content: ''; position: absolute; top: 50%; left: 5%; height: 1px; width: 90%; background-color: #000; z-index: 0; }
#accueil #marques h4 span{ display: inline-block; position: relative; background-color : #FFF; padding: 0 20px; }
.swiper-container.outer{ position: relative; padding: 5rem 10rem; }
	.swiper-wrapper{}
		.swiper-slide{ display: flex; align-items: center; justify-content: center; height: auto; }
		.swiper-slide img{ max-height: 120px; width: 80%; object-fit: contain; }
	.swiper-container-horizontal > .swiper-pagination-bullets{ display: flex; align-items: center; justify-content: center; bottom: 0; }
		.swiper-pagination-bullet{ background: #80D8C4; opacity: 0.4; width: 10px; height: 10px; }
		.swiper-pagination-bullet-active{ opacity: 1; width: 16px; height: 16px; }
	.swiper-button-next,
	.swiper-button-prev{ background-color: #eee; border-radius: 50%; width: 50px; height: 50px; color: #7B7B7B; }
	.swiper-button-next:hover,
	.swiper-button-prev:hover{ background-color: #80D8C4; color: #fff; }
	.swiper-button-next:after,
	.swiper-button-prev:after{ font-size: 20px; font-weight: bold; color: inherit; }
/*
#accueil .marques{ display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-around; margin-top: 5%; }
#accueil .marques li{ margin: 15px; }
#accueil .marques li img{ height: 13rem; width: auto !important; max-width: inherit; }
*/
#accueil #map{ background-color: #FFF; position: relative;}
#accueil #map:before{ content:""; display: block; padding-top: 40%; }
#accueil #map iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

/* L'institut */
#institut #entete .container:before{ background: url(../themes/ecrinbeaute/assets/img/feuilles-ficus-x2.png) no-repeat 0 0; background-size: contain; left: -10rem; top: 12rem; width: 16rem; height: 14rem; }
#institut .intro{ margin-bottom: 4rem; }
	.masonry-grid-row > div{ margin-bottom: 15px; }
	.masonry-grid-col{ overflow: hidden; padding-left: 0; padding-right: 0; border-left: 7px solid #f2f2ed; border-right: 7px solid #F2F2ED; }
	.masonry-grid-col img{ width: 100%; }
	.masonry-grid-col.slave img{ position: absolute; width: auto; max-width: none; height: 100%; top: 50%; left: 50%; object-fit: cover; transform: translate(-50%, -50%); }
	.color-block{ color: #FFF; font-weight: 700; text-align: center; padding: 0 3rem; display: flex; align-items: center; justify-content: center; height: 100%; }
	.color-block.blue{ background-color: #80D8C4; }
	.color-block.pink{ background-color: #D74F5C; }
	.color-block.pink:before{ content: ""; display: block; background-color: #FFF; height: 2rem; width: 1.5rem; -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
	.color-block p:last-child{ margin-bottom: 0; } 
	.text-content{ text-align: center; padding: 3rem 0; }
	
#institut #vente{ margin-top: 13rem; }
#institut #vente .container{ position: relative; }
#institut #vente .container:before{ content: ''; background: url(../themes/ecrinbeaute/assets/img/feuille-institut.png) no-repeat 0 0; position: absolute; background-size: contain; left: -30rem; top: -25rem; width: 45rem; height: 35rem; }

#institut #vente .square-item{ padding-top: 40%; }
#institut #vente .square-item-data p{ margin-bottom: 0.5em; }
#institut #vente .square-item-data .btn{ margin-top: 0; }
#institut #vente .square-item-data .img{ margin-top: 0; }
#institut #vente h2{ text-align: center; }

/* Les soins (liste des marques) */
body.dossier-soins #main{ padding-bottom: 0; }
body.dossier-soins #entete{ padding-bottom: 10rem; }
#entete.soins-marque .container:before{ background-image: url(../themes/ecrinbeaute/assets/img/feuilles-ficus-x2.png); width: 16rem; height: 14rem; bottom: -8rem; right: -10%; }
#entete.soins-marque.hide-lg-bg{ background-image: url(../themes/ecrinbeaute/assets/img/feuille-ficus.png) !important; background-position: 7% 95% !important; background-size: auto !important; }
.soins-marque .square-list{ justify-content: flex-end; }
.soins-marque h2{ font-weight: 700; color: #909090; font-size: 3.8rem; line-height: 1.2em; }

	/* Soins du visage */
	#soins-soins-du-visage #entete{ background-position: -15% 100%; background-size: auto 60%; }
	
	/* Soins du corps */
	#soins-soins-du-corps #entete{ background-position: -15% 100%; background-size: auto 60%; }
	
	/* Minceur */
	#soins-minceur #entete{ background-position: 0% 100%; background-size: auto 70%; }
	
/* Les soins */
#soins{ align-items: stretch; }
body.param-marque #main .container:after{ content: none; }
	.soin-wrapper{ height: auto; }
	.soin{ margin: 7px -7px; cursor: pointer; height: calc(100% - 15px); }
	
	.soin .front{ display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; color: #fff; }
	.soin .front:after { content: ''; position: absolute; height: 0; width: 0; right: -2.8rem; bottom: -2.8rem; border: 2.7rem solid transparent; border-top-color: #f2f2ed; transform: rotate(-45deg); z-index: 0; }
	.soin .back{ display: flex; flex-direction: column; align-items: center; justify-content: space-between; position: relative; padding: 15px; color: #fff; }
	.soin h2,
	.soin p.h2{ color: inherit; text-transform: uppercase; text-align: center; font-weight: 900; font-size: 2.5rem; line-height: 1.2em; position: relative; z-index: 1; padding: 0 15px; }
	.soin p.h2{ margin-top: 1em; }
	.soin h2:before,
	.soin p.h2:after{ content: ""; display: block; background-color: #FFF; height: 1.2rem; width: 100%; text-align: center; margin: 1rem auto 3rem; -webkit-mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); mask-image: url(../themes/ecrinbeaute/assets/img/coeur.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
	span.more { position: absolute; bottom: -1rem; right: -1rem; font-family: 'Mont'; font-weight: 600; color: #d74f5c; font-size: 2.7rem; width: 2.5rem; z-index: 1; }
	
	.soin h2{ position: absolute; }
	.soin img{ z-index: 0; opacity: 30%; min-width: 100%; min-height: 100%; max-width: none; object-fit: cover; transition: opacity 1s ease-out; }
	.soin:hover img{ opacity: 70%; }
	.soin .desc{ font-size: 1.3rem; text-align: center; line-height: 1.8em; padding: 0 15px; }
	.soin .info{ text-transform: uppercase; font-size: 2rem; }
	.soin .prix{ font-weight: 700; }
	.soin .cols{ display: flex; }
	.soin .cols .text{ }
	.soin .cols .pricelist{ text-align: left; }
	.soin .cols .pricelist ul { padding-left: 2em; }
	.soin .cols .pricelist li{ list-style-type: disc; }
	.soin .cols .pricelist li strong{ text-transform: uppercase; font-weight: 700; font-style: initial; }
	
	.soin.gris  .front,
	.soin.gris  .back{ background-color: #DEDED3; color: #D74F5C; }
	.soin.gris h2:before,
	.soin.gris p.h2:after{ background-color: #D74F5C; }
	.soin.gris .desc{ color: #000; }
	.soin.gris span.more { color: #DEDED3; }
	
	.soin.rouge .front,
	.soin.rouge .back{ background-color: #D74F5C; }
	.soin.rouge span.more { color: #D74F5C; }
	
	.soin.rose  .front,
	.soin.rose  .back{ background-color: #D68991; }
	.soin.rose span.more { color: #D68991; }
	
	.param-marque .titre{ display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: flex-start; margin-bottom: 2em; }
	.param-marque .titre h1{ margin-right: 2rem; margin-bottom: 0; }
	.param-marque .desc{ text-align: center; padding: 1rem 0 2rem; }
	.param-marque .autres-marques{ display: flex; flex-wrap: wrap; }
	.param-marque .autres-marques a{ font-size: 2rem; color: #c7c7bd; display: block; margin: 0 0.5rem; font-weight: 700; transition: all 0.3s ease-in;}
	.param-marque .autres-marques a:hover{ color: #868686; }
	
#entete.tarifs{ background-image: url(../themes/ecrinbeaute/assets/img/feuille-ficus.png); background-repeat: no-repeat; background-position: 93% 95%; background-size: auto; }
#entete.tarifs .container:before{ background: url(../themes/ecrinbeaute/assets/img/feuilles-ficus-x2.png) no-repeat 0 0; background-size: contain; left: -10rem; top: 12rem; width: 16rem; height: 14rem; }
	.tarifs .soin h2{ position: relative; }
	.tarifs .soin .pricelist{ width: 100%; }
	.tarifs .soin .pricelist ul{ margin: 3rem 5%; }
	.tarifs .soin .pricelist li{ margin: 1em 0; position: relative; padding-right: 12rem; }
	.tarifs .soin .pricelist strong{ text-transform: uppercase; }
	.tarifs .soin .pricelist i{ white-space: nowrap; position: absolute; right: 0; top: 0; text-transform: uppercase; }

/* Cadeaux */
#bons-cadeaux #main{ padding-bottom: 0; }
#bons-cadeaux #entete{ background-size: 43%; background-position: 0 100%; background-color: #fcfcfc; }
#bons-cadeaux #entete .row{ min-height: 25vw; align-items: center; }
#bons-cadeaux h2{ margin-top: 1em; color: #D74F5C; font-weight: 900; font-size: 4rem; }
#bons-cadeaux h2 i.coeur { width: 40px; top: -5px; display: inline-block; position: relative; margin-right: 0.3em; }
#bons-cadeaux h2 i.coeur svg{ fill: #D74F5C; }
/*
#bons-cadeaux #entete .aside{ opacity: 0.46; bottom: -80px; }*/
#bons-cadeaux h3{ font-size: 2.4rem; text-align: center; margin-top: 3em; }
	#cheques-cadeaux{ padding-bottom: 40px; background-color: #fff;}
	#cheques-cadeaux .offset-1-auto{ padding-left: 8.333333%; padding-right: 8.333333%; }
	.cadeaux{ text-align: center; }
		.cadeau{ position: relative; height: 100%; background-color: #80D8C4; color: #FFF; overflow: hidden; border: solid #FFF; border-width: 3rem 0; padding: 15px 15px 80px;  max-width: 350px; margin: auto; }
		.cadeau:before{ content: ''; display: block; height: 3rem; margin: 10px 0 20px; background: url('../themes/ecrinbeaute/assets/img/cadeau.svg') no-repeat 50% 50%; background-size: 3rem auto; }
		.cadeau .flex-col{ display: flex; flex-direction: column; flex-flow: wrap; align-content: space-between; height: 87%; }
		.cadeau .flex-col > div{ width: 100%; }
		.cadeau h4{ text-transform: uppercase; color: inherit; }
		.cadeau h4.titre{ font-size: 3.5rem; font-weight: 900; height: 3em; }
		.cadeau h4, 
		.cadeau small{ font-size: 2.7rem; font-weight: 700; display: block; }
		.cadeau p{ margin-bottom: 0; }
		.cadeau .prix{ font-size: 5rem; font-weight: 900; }
		.cadeau .prix small{ display: inline; }
		.cadeau .qte{ background-color: #FFF; overflow: hidden; position: absolute; bottom: 0; left: 0; width: 100%; }
		.cadeau .js-spinner{ width: 70%; margin: 3rem auto 0; display: flex; flex-direction:row; align-items:center; align-content: stretch; justify-content:center; border: 1px solid #1ABB8F; border-radius:3rem; overflow: hidden; position: relative;}
		.cadeau .js-spinner input { text-align:center; font-size:2.6rem; font-weight:600; flex-grow: 2; display: block; width: 100%; border: 0px none; }
		.cadeau .js-spinner button { margin:0; background:none; border:none; font-size:2.6rem; padding:0 15px; display: block; }
		.cadeau .js-spinner .minus { flex-grow: 1; }
		.cadeau .js-spinner .plus { flex-grow: 1; }
		
#bons-cadeaux section{ padding: 20px 0 50px; }
#bons-cadeaux section:empty{ display: none; }

#bons-cadeaux .summary li { display:flex; flex-direction:row; align-items:center; justify-content:flex-start; padding:3rem 0; border-top:1px solid #D9D9D9; }
#bons-cadeaux .summary li.empty{ opacity: 0.5; }
#bons-cadeaux .summary li .name { width:80%; }
#bons-cadeaux .summary li .number { width:10%; white-space:nowrap; }
#bons-cadeaux .summary li .remove { width:10%; text-align:right; }
#bons-cadeaux .summary li .remove svg { width:14px; height:14px; fill:#D74F5C; }
#bons-cadeaux .summary .checkbox { margin-top:50px; }
#bons-cadeaux .summary [data-validate-for] { right:auto; left:90px; }
#bons-cadeaux .summary .total { font-size: 2; font-weight: 700; }

#bons-cadeaux .payment .card-field { border:1px solid #D9D9D9; background:#FFF; padding:15px 3rem; }
#bons-cadeaux .payment .card-field.StripeElement--invalid { border-color:#F94661; }
#bons-cadeaux .payment .error { color:#F94661; padding:0 3rem; margin-top:10px;}
#bons-cadeaux .payment .logos { font-size:1.4rem; margin:60px 0; padding:0 3rem; }
#bons-cadeaux .payment .logos p { font-size:1.6rem; }
#bons-cadeaux .payment .logos svg { width:18px; max-height:18px; fill:#341D89; margin-right:3rem; }
#bons-cadeaux .payment .logos img { margin-left:45px; display: block; }

#bons-cadeaux .payment .btn[disabled] { opacity:0.5; background:#ccc; }

	.alert-success h2 i.coeur { fill: #155724; width: 25px; height: 25px; display: inline-block; top: -3px; position: relative; margin-right: 0.3em; }


/* Contact */
#contact{}
#contact #main{ padding-bottom: 0; }
#contact #entete{ padding: 5rem 0; background-color: #EEFAF7; }
#contact .title{ align-items: flex-end; margin-bottom: 3rem; }
#contact h1{ font-size: 4.2rem; margin: 0 0 1.6rem; margin: 0; }
#contact h1:before{ content: none; }
#contact .textarea{ height: 100%; }
#contact .textarea textarea{ height: calc(100% - 15px); }
#contact-coords strong{ font-size: 2.2rem; }
#contact .text-right{ font-size: 1.3rem; line-height: 1.4em; color: #8a8a8a; }
#contact .text-right p{ margin-bottom: 0; }
#contact .horaires{ font-size: 0.9em; }
#contact-button{ margin: 0 -15px; border-radius: 0; height: 62px; width: calc(100% + 3rem); font-size: 13px; }
.g-recaptcha { overflow: hidden; }
.g-recaptcha > div { margin: auto; }
.g-recaptcha iframe { transform: scale(0.8); transform-origin: 0 0; }


/* Legal */
section.legal a{ color: #1ABB8F; }
section.legal a:hover{ color: #1B847C; text-decoration: underline; }










body.admin:after{ content:"xxl"; position: fixed; bottom: 0; right: 0; padding: 5px 10px; line-height: 30px; background-color:#EEE; }
/**
 * Wide
 **/
@media (min-width: 1600px) {
	#header .container{ max-width: 90%; }
	#accueil #entete .background{ max-width: 90%; }
	#accueil #entete .background .container{ max-width: 90%; }
}
	

/**
 * Extra Extra large
 **/
@media (min-width: 1400px) {
.container{ max-width: 1320px; }
.extra-container{ width: calc( 100% + 15px + (100vw - 1320px)/2 ); }
.extra-container-bg:before{ width: calc( 100% + 15px + (100vw - 1320px)/2 ); }

}
/**
 * Extra large
 **/
@media (max-width: 1399px) {
body.admin:after{ content:"xl"; background-color: red; }
.extra-container{ width: calc( 100% + 15px + (100vw - 1140px)/2 ); }
.extra-container-bg:before{ width: calc( 100% + 15px + (100vw - 1140px)/2 ); }

}
/**
 * Large devices
 **/
@media (max-width: 1199px) {
body.admin:after{ content:"lg"; background-color: orange; }
html { font-size: 8px; }
.extra-container{ width: calc( 100% + 15px + (100vw - 960px)/2 ); }
.extra-container-bg:before{ width: calc( 100% + 15px + (100vw - 960px)/2 ); }

	#accueil #scroll{ display: none; }
	#faites-plaisir { width: 20vw; height: 20vw; }
}

/**
 * Medium devices
 **/
@media (max-width: 991px) {
body.admin:after{ content:"md"; background-color: green; }
html { font-size: 7px; }
body { font-size: 2rem; }
.extra-container{ width: calc( 100% + 15px + (100vw - 720px)/2 ); }
.extra-container-bg:before{ width: calc( 100% + 15px + (100vw - 720px)/2 ); }
	
	.btn{ font-size: 2rem; }
	#menu{ min-width: 210px; left: -200%; }
	body.open #menu{ left: 0; }
	#footer .text{ margin-bottom: 2rem; }
	#footer .localiser{ height: 10rem; }
	
	#institut #vente .square-item,
	.square-item{ width: 50%; padding-top: 50%; font-size: 12px; }
	
	.color-block.blue{ font-size: 1.7rem; }
	
	.cadeau{ border-width: 20px 0px; padding: 15px 15px 70px; }
	.cadeau .js-spinner{ margin: 20px auto 0; }
	
	#contact .text-right{ text-align: left; }
	#contact-button{ margin: 0; width: calc(100% + 15px); }
}

/**
 * Small devices
 **/
@media (max-width: 767px) {
body.admin:after{ content:"sm"; background-color: blue; }
html { font-size: 6px; }
.extra-container{ width: calc( 100% + 15px + (100vw - 540px)/2 ); }
.extra-container-bg:before{ width: calc( 100% + 15px + (100vw - 540px)/2 ); }
	

	.btn{ font-size: 1.8rem; }
	#header .btn { margin: 0 5px; padding: 5px 15px; }
	#header > .container{ max-width: 100%; }

	#entete .container:after { content: none; }
	#entete .aside{ display: none; }
	
	#footer .flex-row.justify{ display: block; }
	#footer .lotus { width: 60%; opacity: 0.4;  }

	.field { margin-right: 0px; }
	
	#main > header .background{ height: auto; padding: 0; }
	#main > header .container-fluid{ position: relative; }
	#main > header .lotus{ width: 100vw; top: -55vw; right: -65vw; }/*
	#main > header .aside { transform: none; writing-mode: inherit; position: static; margin-right: 35px; }
	#main > header .aside .icon{ transform: inherit; }
	#main > header .aside .telephone{ width: auto; margin: 7px 7px 7px 15px; }*/
	#accueil #entete .background .container{ max-width: 100%; }
	#accueil #entete #faites-plaisir { width: 25vw; height: 25vw; margin-right: 0vw; }
	#accueil #entete #faites-plaisir p { font-size: 2.2rem; }
	#accueil #entete .aside{ display: flex; transform: none; writing-mode: inherit; width: 100%; height: auto; bottom: 0; }
	#accueil #entete .aside .icon{ transform: none; }
	#accueil #entete .aside .telephone{ margin-top: 7px; width: auto; align-items: flex-end;}
	
	#accueil #edito{ }
	#accueil #edito .padding{ padding: 3% 0 0%; max-width: 500px; margin: auto; }
	
	#accueil #main #cadeaux .center-btn{ position: relative; margin: 0; height: 0; overflow: visible; top: inherit; left: inherit; width: 100%; }
	#accueil #main #cadeaux .center-btn .btn{ position: absolute; top: -3rem; z-index: 1; left: 50%; margin: 0; width: 200px; margin-left: -100px; }
	
	#institut #entete .container:before { left: -17rem; }
		.masonry-grid-col.slave img{ position: relative; transform: translateX(-50%); top: 0; }
		.color-block{ padding-top: 10%; padding-bottom: 10%; }
		
	#soins-du-visage #entete{ background-position: -75% 100%; background-size: 70% auto; }
	#soins-du-corps  #entete{ background-image: none !important; }
	#soins-minceur  #entete{ background-image: none !important; }
	#entete.tarifs{ background-image: none; }
	#entete.tarifs .container:before{ content: none; }
	
	#bons-cadeaux #entete{ background-position: 0% 80%; }
	#bons-cadeaux #main > header .aside { margin-top: 90px; height: auto; }
	
	#contact .textarea{ height: auto; }
	.g-recaptcha { margin-bottom: 1em; }
	.g-recaptcha iframe { transform: scale(1); }
	
	#contact-button{ margin: 15px auto; width: auto; display: block; min-width: 150px; }
}

/**
 * Extra small devices
 **/
@media (max-width: 575px) {
body.admin:after{ content:"--"; background-color: yellow; }
.extra-container{ width: calc(100% + 15px); }
.extra-container-bg:before{ width: calc(100% + 15px); }
	
	.secondary-menu{ display: none; }
	.btns-available-up{ display: list-item; }
	#header .logo { text-align:right; }
	#footer .localiser{ height: auto; }
	
	#accueil #entete{ height: 100vh; }
	#accueil #entete-before { background-repeat: no-repeat; background-position: 100% 0vw; background-size: 50vw; }
	#accueil #entete .background .container{ background-position: -20vw 100%; background-size: 90% auto; max-width: 100%; overflow: hidden; }
	#accueil #entete .background .lotus{ transform: rotate(-50deg); left: 40vw; height: 80%; bottom: -30%; opacity: 0.3; }
	#accueil #entete h1{ max-width: 70%; height: 35%; float: right; margin-right: 50px; }
	#accueil #entete #faites-plaisir { width: 45vw; height: 45vw; margin-right: 0vw; margin-top: 45%; background-color: rgb(255 255 255 / 35%); }
	#accueil #entete #faites-plaisir p { font-size: 2rem; }
	
	.square-item{ width: 100%; max-width: 370px; margin-left: auto; margin-right: auto; padding-top: 0; height: auto; }
	.square-item-data{ position: static; height: auto; padding-bottom: 4rem; margin-bottom: 3rem; }
	.square-item-data .img img { max-height: 100px; }
	.masonry-grid-col{ border-width: 0 15px;}
	#institut #vente h2{ max-width: 370px; margin: 1em auto; position: relative; left: -7px; }
	#institut #vente .square-item-data .img{ margin: 10% 0; }
	
	#soins-du-visage #entete{ padding-bottom: 40%; }
	
	#institut #vente li.square-item {padding-top: 5%;}
	#menu {min-width: 270px;}
}