/* 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); }
:root{
	--bodyFont: 'Mont', sans-serif;
	--bodyColor: #707070;
	--bodyFontRegular: 400;
	--bodyFontBold: 700;
	--bodyFontSize: 1.5rem;
	--titleFont: 'Playfair Display', serif;
	--titleColor: #D5B98A;
	--titleFontRegular: 400;
	
	--containerWidth: 1320px;
	--asideWidth: calc( (100vw - var(--containerWidth)) / 2 );
	--dore: #D6B888;
	
	--noir:  #000;
	--blanc: #FFF;
	--rose:  #F8EDDC;
	--gris:  #707070;
}
html{ font-size: 10px; }
body{ font-size: var(--bodyFontSize); font-family: var(--bodyFont); font-weight: var(--bodyFontRegular); color: var(--bodyColor); }

section{ overflow: hidden; }
/**
 * General Elements
 **/

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

/* Images */
img, svg { max-width:100%; height:auto; }
[data-sizes] { display:block; width:100%; }
[data-bg] { background-size:cover; background-repeat:no-repeat; background-position:center center; }
.bg-cover{ position: relative; overflow: hidden; }
.bg-cover > img{ position: absolute; min-width: 100%; height: auto; min-height: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; z-index: 0; }
.bg-cover .container { position: relative; z-index: 1; }
.bg-cover .swiper-container { position: absolute; width:100%; height:100%; z-index:-1; }
.bg-cover .swiper-container img { position: absolute; width:100%; height:100%; object-fit:cover; }

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

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

/* Headers */
h1, h2, h3, h4, h5{ font-family: var(--titleFont); font-weight: var(--titleFontRegular); margin: 1em 0 0.5em; color: var(--titleColor); margin: 1em 0 0.5em; }
h1{ margin: 0; font-size: 6rem; line-height: 1em; }
h2{ font-size: 6rem; }
h3{ font-size: 2.8rem; }
h4{ font-size: 2.2rem; }
h5{ font-size: 1.8rem; }

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

/* Forms */
.invalid-feedback.visible { display:block !important; }

/* Table */
table{ width: 100%; margin-bottom: 1em; border-collapse: separate; border-spacing: 5px; }
table th{ padding: 0.5em; border-bottom: 2px solid #ddd; }
table td{ padding: 0.5em; border-bottom: 1px solid #ddd; }

/**
 * Layout
 **/
header,
main,
footer{ position: relative; z-index: 0; }

figure{ margin-bottom: 0; }

.container{ position: relative; z-index: 1; }

 /* Global */
#page { position:relative; width:100%; overflow:hidden; }
	
	.extra.content{ width: calc(100% + var(--bs-gutter-x) + (100vw - var(--containerWidth) )/2); }
	.extra.bg{ position: relative; }
	.extra.bg:before{ content: ''; position: absolute; z-index: -1; left: 0; top: 0; width: calc(100% + (100vw - var(--containerWidth) )/2); height: 100%; }
	.extra.bg.rose:before{ background-color: var(--rose); }
	
	.casper{ display: none; }
	
	.ico{ position: relative; display: block; min-width: 4rem; width: 4rem; height: 4rem; overflow: hidden; white-space:nowrap; transition: all 0.3s ease-out; border: 2px solid var(--titleColor); color: var(--titleColor); background-color: var(--blanc); }
	.ico:before{ content: ''; position: absolute; left: -100%; top: 0; width: 100%; height: 100%; background-color: var(--titleColor); transition: all 0.3s ease-out; }
	.ico > svg{ height: 100%; position: relative; z-index: 1; }
	.ico:hover{ color: #fff; }
	.ico:hover:before{ left: 0; }
	
	.button{ position: relative; display: block; height: 4rem; white-space: nowrap; line-height: 4rem; padding: 0 1em; font-size: 97%; font-weight: 300; text-transform: uppercase; color: var(--titleColor); border: 1px solid var(--titleColor); text-decoration: none; overflow: hidden; transition: color 0.8s ease-out; }
	.button:before{ content: ''; position: absolute; width: 100%; height: 100%; left: -100%; top: 0; transition: left 0.3s ease-out; background-color: var(--dore); z-index: -1; }
	.button:hover{ color: var(--noir); }
	.button:hover:before{ left: 0; }

	.button.goto{ margin-top: 4rem; font-weight: var(--bodyFontRegular); display: flex; justify-content: space-between; align-items: center; padding: 0 2em; transition: all 0.3s ease-out; }
	.button.goto:before{ left: calc(-100% + 7px); opacity: 0.3; }
	.button.goto:hover{ color: var(--dore); }
	.button.goto:hover:before{ left: 0; }
		.fleche{ margin-right: 28px; width: 36px; height: 12px; transition: all 0.5s ease-out; overflow: hidden; }
		.fleche svg{ height: 12px; width: auto; float: right; max-width: none; }
	.button.goto:hover .fleche{ margin-right: 0; width: 64px; }
	
	.button.goto.swiper-btn{ padding: 0; border: 0; color: var(--gris); cursor: pointer; margin: 0; }
	.button.goto.swiper-btn:before{ left: -100%; height: 50%; top: 25%; opacity: 0; }
	.button.goto.swiper-btn.prev{ transform: rotate(180deg); transform-origin: center center; }
	.button.goto.swiper-btn .fleche{ margin-right: 14px; z-index: 1; }
	.button.goto.swiper-btn:hover .fleche{ margin-right: 0; width: 60px; margin-left: 25%; }
	.button.goto.swiper-btn:hover:before{ left: -50%; opacity: 0.3; }
	.button.goto.swiper-btn.disabled{ pointer-events: none; opacity: 0.1; }
	
	a.h3style 		.button.goto{ color: inherit; pointer-events: none; margin: 0; border: 0; padding: 0; font-family: var(--bodyFontRegular); font-size: calc( var(--containerWidth) / 60 ); text-transform: uppercase; justify-content: flex-start; }
	a.h3style 		.button.goto:before{ width: 2.5em; left: -3em; height: 2.5rem; top: calc(50% - 1.25rem);}
	a.h3style 		.button.goto .fleche{ width: 26px; margin-left: 0; opacity: 0; }
	a.h3style:hover .button.goto{ margin-left: -2em; padding-left: 1em; }
	a.h3style:hover .button.goto:before{ left: 0; opacity: 1; }
	a.h3style:hover .button.goto .fleche{ margin-left: 1em; opacity: 1; }
	
	.swiper-container{ position: relative; z-index: 0; }
	.swiper-btn{ z-index: 1; }
	.swiper-btn.prev{ position: absolute; top: calc( 50% - 16px); left: 0; }
	.swiper-btn.next{ position: absolute; top: calc( 50% - 16px); right: 0; }
	
	.separateur{ display: block; height: 5vh; position: relative; }
	.separateur.bar:before{ content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, 0); height: 2px; width: 25%; background-color: var(--titleColor); }
	
/* Header */
	#header{ top: 0; opacity: 1; background: rgb(0 0 0 / 80%); color: var(--blanc); height: 8rem; position: fixed; width: 100%; z-index: 10; transition: all 0.5s ease-out; }
	#header .container{ display: flex; align-items: center; justify-content: space-between; height: 100%; }
		
	#logo{ height: 85%; width: 50%; display: flex; align-items: center; color: var(--blanc); }
	#logo a{ display: flex; width: 100%; height: 100%; align-items: center; }
	#logo img{ max-height: 100%; }
	#logo img.typo{ max-height: 46%; margin-left: 2rem; }
		
	#menu{ justify-content: flex-end; width: 50%; width: 42rem; }
	.menu{ display: flex; flex-wrap: wrap; justify-content: center; width: 100%; max-width: 100%; }
	.menu > *{ width: 50%; }
	.menu > * > .button{ width: 95%; margin: 0.5em 2.5%; text-align: center; }
		

/* Main */
	#main{ margin-top: 8rem; }
	#main:before{ content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 8rem; background-color: var(--rose); z-index: -1; }
	#main header{ display: flex; flex-direction: row-reverse; align-items: flex-end; justify-content: flex-end; padding: 4rem 0; margin-bottom: 5rem; }
	#main header h1{ margin-left: 1em; }
	
	.vertical-marque{ position: relative; z-index: 1; overflow: visible; }
	.vertical-marque:before{ content: ''; position: absolute; z-index: 1; width: 60vw; height: 9vw; transform: rotate(-90deg); transform-origin: left bottom; 
	-webkit-mask-image: url(../themes/bellecour/assets/img/logotexte-blanc.svg); mask-image: url(../themes/bellecour/assets/img/logotexte-blanc.svg); -webkit-mask-size: contain; mask-size: contain; left: 100vw; bottom: 20vh; opacity: 0.8; pointer-events: none; 
	-webkit-mask-position: 0 0; mask-position: 0 0; background-color: #FFF; mix-blend-mode: soft-light; }

/* Footer */
	#footer{ color: var(--dore); background-color: var(--noir); background-repeat: no-repeat; background-position: 50% 50%; background-size: cover; padding-top: 3vw; }
	#footer p{ line-height: 1.5em; margin-bottom: 0; }
	#footer .col-logo{ display: flex; flex-direction: column; justify-content: space-around; }
	#footer .coordonnees{ text-align: center; font-size: 1.7rem; }
	#footer .menu{ max-width: 66.6%; margin-top: 2vw; }
	#footer .collections:before { content: ''; position: absolute; bottom: 0; width: 100%; height: 0; border-bottom: 2px solid var(--dore); }
	#footer .collections ul{ font-size: 2rem; column-count: 3; column-gap: 2rem; margin: 5vw 0.5em 2vw; }
	#footer .collections li:first-child{ column-span: all; }
	#footer .collections li a{ text-transform: uppercase; text-decoration: none; white-space: nowrap; }
	#footer .collections li a.h3style .button.goto{ font-size: calc( var(--containerWidth) / 95 ); }
	#footer .collections li a:hover{ color: #fff; }
	#footer .legals{ font-size: 1.5rem; text-align: right; padding: 5vw 2em 0; display: flex; justify-content: flex-end; flex-wrap: wrap; position: relative; }
	#footer .legals span{ white-space: nowrap; }
	#footer .legals a{ text-decoration: none; }


/**
 * PAGES
 **/

/* Accueil */
body#accueil{}
body#accueil	#header{ top: -8rem; opacity: 0.5; }
body#accueil	#header.not-top{ top: 0; opacity: 1; }

body#accueil	#main{ margin-top: 0; }

body#accueil	#splash{ height: 100vh; }
body#accueil	#splash > .container,
body#accueil	#splash > .container > .row,
body#accueil	#splash > .container > .row > .identity{ height: 100%; }
body#accueil	#splash .identity{ padding-top: 7vh; padding-bottom: 10vh; display: flex; flex-direction: column; justify-content: space-around; text-align: center; }
body#accueil	#splash .slogan h2{ font-size: calc( var(--containerWidth) / 26); text-transform: uppercase; line-height: 1.2em; position: relative; margin: 0; }
body#accueil	#splash .slogan h2 span{ display: block; }
body#accueil	#splash .slogan h2 span.br{ display: none; }

body#accueil	#philosophie{ background: url(../themes/bellecour/assets/img/logotype-thin.svg) no-repeat -5% 90%; background-size: 30vw; padding-bottom: 5rem; }
body#accueil	#philosophie .container{ mix-blend-mode: multiply; }
body#accueil	#philosophie .extra.bg{ height: 100%; }
body#accueil	#philosophie .extra.bg.rose:before{ width: 180%; left: -9%; top: -5.5rem; height: calc(100% + 10rem); }
body#accueil	#philosophie .text{ margin-right: 10%; }
body#accueil	#philosophie .signature{ text-align: right; }
body#accueil	#philosophie .signature p{ line-height: 2em; }
body#accueil	#philosophie .signature-img{ float: right; }
body#accueil	#philosophie .visuel{ margin-top: 5vw; }
	
body#accueil	#collections{ background-color: var(--rose); position: relative; padding: 5vw 0; height: calc(100vh - 8rem); }
body#accueil	#collections .container{ height: 100%; }
body#accueil	#collections .container:before{ content: ''; background-color: var(--blanc); position: absolute; z-index: -1; right: 0; width: calc( var(--containerWidth) + (100vw - var(--containerWidth))/2 ); height: 100%; }
body#accueil	#collections h2{ position: absolute; top: -0.8em; margin-top: 0; padding-left: 2.4rem; }
body#accueil	#collections .row{ height: 100%; align-items: center; padding-top: 5rem; padding-bottom: 2rem; }
body#accueil	#collections .row > div{ height: 100%; }
body#accueil	#collections-ancres{ display: flex; flex-direction: column; justify-content: center; position: relative; }
body#accueil	#collections-ancres ul{ width: 100%; height: 100%;  max-height: 45rem; min-height: calc(7 * 2.5rem); display: flex; flex-direction:column; justify-content: space-around; }
body#accueil	#collections-ancres ul li{ font-size: 2.5rem; padding-left: 1em; overflow: hidden; }
body#accueil	#collections-ancres ul li span{ display: block; cursor: pointer; white-space: nowrap; color: var(--titleColor); text-decoration: none; text-transform: uppercase; line-height: 1em; transition: all 0.3s ease-out; position: relative; }
body#accueil	#collections-ancres ul li span:before{ content: ''; position: absolute; height: 100%; width: 4em; left: -5em; top: 0; background-color: var(--rose); transition: all 0.3s ease-out; z-index: -1; }
body#accueil	#collections-ancres ul li.active span{ font-weight: var(--bodyFontBold); text-indent: 1em; }
body#accueil	#collections-ancres ul li.active span:before{ left: -1.8em; }
body#accueil	#collections-details{ display: flex; flex-direction: column; align-items: flex-end; position: relative; }
body#accueil	#collections-details .swiper-container{ max-width: 100%; height: 100%; }
				.montre.teaser{ display: flex; align-items: center; text-decoration: none; height: 100%; }
				.montre.teaser h3{ position: relative; font-family: var(--bodyFontRegular); color: var(--gris); text-transform: uppercase; margin-top: 0; margin-bottom: 1em; display: flex; align-items: center; justify-content: center; white-space: nowrap; }
				.montre.teaser h3:after{ content: ''; position: absolute; bottom: -0.4em; left: calc(50% - 6rem); width: 12rem; height: 2px; background-color: var(--gris); }
				.montre.teaser h3 .collection{ display: none; margin-right: 0.5em; }
				.montre.teaser h3 .ref{ font-size: 0.8em; }
				.montre.teaser figure{ width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: 0; }
				.montre.teaser figure img{ max-height: 100%; max-width: 70%; margin: 0 auto; min-height: 0; flex: 0 1 auto; object-fit: contain; }
				.montre.teaser figcaption{ min-width: 50%; max-width: calc( 100% - 12rem); padding-top: 2rem; margin-right: 4%; }
				.montre.teaser figcaption .b-flex-row{ display: flex; position: relative; max-width: 65%; margin: auto; }
				.montre.teaser figcaption .paragraphs{ width: 100%; text-align: center; }
				.montre.teaser figcaption .paragraphs p{ line-height: 1.2em; font-size: 1.5rem; margin-bottom: 0.5em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
				.montre.teaser figcaption .ico{ position: absolute; right: -5.5rem; }
		
		
/* Collection */
body#collection{ position: relative; }

				.montres-nav-container{ z-index: 2; }
				.montres-nav-container > div > div{ position: relative; }
				.montres-nav{ display: flex; flex-wrap: wrap; align-items: center; position: absolute; right: calc(var(--bs-gutter-x)/ 2); width: calc(100% - var(--bs-gutter-x)); z-index: 2; }
				.montres-nav li{ text-transform: uppercase; cursor: pointer; font-size: 1.7rem; white-space: nowrap; display: flex; align-items: center; justify-content: space-between; opacity: 0.7; transition: all 0.5s ease-out; }
				.montres-nav li span{ width: 100%; text-align: left; display: block; padding: 0 1rem; }
				.montres-nav li:before,
				.montres-nav li:after{ content: ''; display: block; width: 0rem; height: 1.9rem; background-color: var(--gris); transition: all 0.3s ease-out; }
				.montres-nav li.active{ opacity: 1; width: fit-content; }
				.montres-nav li.active:before{ width: 6rem; }
				.montres-nav li.active:after{ width: 0.5rem; }
				.montres-nav li.active span{ font-size: 2.5rem; margin-top: 0.4rem; }

				.collection-montres .swiper-slide{ margin-bottom: 6rem; }
				.montre.detail{ min-height: calc(100vh - 22rem); align-items: stretch; padding-top: 2.5em; }
				.montre.detail .visuels-wrapper{ position: relative; height: 100%; }
				.montre.detail .visuels-wrapper .recto-verso{ pointer-events: none; display: flex; align-items: center; transform: rotate(-90deg); transform-origin: bottom left; position: absolute; bottom: 0; left: 90%; }
				.montre.detail .visuels-wrapper .recto-verso:before{ content: ''; background: url('../themes/bellecour/assets/img/recto-verso.svg') no-repeat 0% 50%; background-size: contain; width: 5vw; max-width: 5rem; height: 5vw; max-height: 5rem; margin: 0.5rem; opacity: 0.6; transition: all 0.5s ease-in; }
				.montre.detail:hover .visuels-wrapper .recto-verso:before{ transform: rotate(-90deg); }
				.montre.detail .visuels{ overflow: hidden; height: 100%; max-height: 700px; }
				.montre.detail .visuels .bg-cover{ position: relative; display: flex; align-items: center; }
				.montre.detail .visuels .bg-cover > img{ object-fit: inherit; max-width: 100%; max-height: 100%; min-width: 0; min-height: 0; width: auto; height: auto; transform: translate(-50%, -50%);}
				.montre.detail .visuels .bg-cover.back > img{ max-width: 90%; }
				
				.montre.detail .descriptif{ display: flex; flex-direction: column; align-items: flex-start; justify-content: center; height: 100%; }
				.montre.detail dl{ margin: 4rem 0px; }
				.montre.detail dl > div{ display: flex; margin: 0.7em 0; }
				.montre.detail dt{ width: 30%; min-width: 12rem; font-weight: var(--bodyFontRegular); }
				.montre.detail dd{ width: 100%; }
				.montre.detail .serie-limitee{ color: var(--dore); }
				
				.montre-tranche{ align-items: center; margin-top: 7vmin; }
				.montre-tranche img{ margin: auto; }
				.montre-tranche dl{ padding-top: 3em; }
				
body#collection #collections{ background-color: var(--rose); overflow: visible; }
body#collection #collections .container:after{ content: ''; position: absolute; left: calc(var(--containerWidth) - 14.5vw); top: calc( var(--containerWidth) * -0.12); width: calc( var(--containerWidth) * 0.35); height: 30vw; background: url(../themes/bellecour/assets/img/logotype-thin.svg) no-repeat 0 0; background-size: 25vw; mix-blend-mode: multiply; pointer-events: none; }
body#collection #collections h2{ top: -0.7em; position: relative; padding-left: 1rem; text-align: right; }
			#collections-list{ display: flex; margin-right: calc(var(--bs-gutter-x)/ -2); margin-left: calc(var(--bs-gutter-x)/ -2); margin-bottom: 2rem; flex-wrap: wrap; }
				.collections-item{ width: 33.333333%; padding-right: calc(var(--bs-gutter-x)/ 2); padding-left: calc(var(--bs-gutter-x)/ 2); margin-bottom: 2rem; }
				.collections-item a{ display: block; text-decoration: none; }
				
				.collections-item a 	  figure{ display: flex; flex-direction: column-reverse; }
				.collections-item a 	  figure .bg-cover{ padding-top: 150%; background-color: #fff; }
				.collections-item a 	  figure .bg-cover > img{ max-width: 95%; max-height: 95%; min-width: auto; min-height: auto; transition: all 0.3s ease-out; }
				.collections-item a:hover figure .bg-cover > img{ max-width: 100%; max-height: 100%; }
				
				.collections-item a 	  figcaption{ white-space: nowrap; color: var(--gris); }
				
				#collection-chrono a figure .bg-cover > img{ max-height: 102%; }
				#collection-chrono a:hover figure .bg-cover > img{ max-height: 107%; }
				

body#collection #ecrins{ padding-bottom: 5%; overflow: visible; position: relative; }
body#collection #ecrins:after{ content: ''; position: absolute; opacity: 0.4; left: calc( var(--asideWidth) + var(--containerWidth) ); bottom: 0; width: var(--asideWidth); max-width: 260px; height: 120%; background: url(../themes/bellecour/assets/img/squelette_fili.jpg) no-repeat 0 0; background-size: cover; }
body#collection #ecrins .vertical-marque:before{ background-color: #000; transform-origin: bottom left; left: 104%; opacity: 0.05; bottom: 40%; }
body#collection #ecrins .ecrins-wrapper{ padding: 6% 10.1%; background-color: #DDD; position: relative; left: -10.1%; }
body#collection #ecrins h2{ margin: 0; position: relative; top: 0.4em; z-index: 1; }


/* CollectionS (liste) */
body#collections #main{background-color: var(--rose); }
body#collections #main:before{ background-color: var(--blanc); }

/* Mentions légales */
section.legal{ margin: 5vw 0; }
section.legal h1{ margin: 1em 0; }
section.legal h2{ font-size: 3rem; }
section.legal p{ line-height: 1.4em; }

















body.admin:after{ content:"xxl"; position: fixed; bottom: 0; right: 0; padding: 5px 10px; line-height: 30px; background-color:black; color: #fff; z-index: 1000; }

@media (min-height: 730px) {
	.montre.teaser figure { margin-left: calc( var(--containerWidth) * .083 ); }
	.montre.teaser h3{ margin: 0; justify-content: center; transform: rotate(-90deg); transform-origin: bottom left; width: calc(100vh - 8rem - 10vw); position: absolute; left: calc( var(--containerWidth) * 0.083 + 3.5rem); bottom: 0; height: 3rem; }
	.montre.teaser h3:before{ content: ''; display: block; height: 2.5rem; background-color: var(--gris); width: 6.6rem; margin-right: 0.7em; }
	.montre.teaser h3:after{ content: none; }
	.montre.teaser h3 .collection{ display: block; }
	.montre.teaser h3 .ref { margin-top: 1rem; }
}

/**
 * XXL
 **/
@media (min-width: 1400px) {
}

/**
 * XL
 **/
@media (max-width: 1399px) {
:root{ --containerWidth: 1140px; }
body.admin:after{ content:"xl"; background-color: red; }

}

/**
 * LG
 **/
@media (max-width: 1199px) {
:root{ --containerWidth: 960px; }
body.admin:after{ content:"lg"; background-color: orange; }
p{ line-height: 2.5em; }
.slogan h2{ font-size: calc( var(--containerWidth) / 21); }

body#accueil #philosophie .extra.bg.rose:before { height: calc(100% + 10rem); }
body#accueil #collections-ancres ul li{ font-size: 2.5rem; }

#footer .collections ul { font-size: 1.8rem; }

}

/**
 * MD
 **/
@media (max-width: 991px) {
:root{ --containerWidth: 720px; }
body.admin:after{ content:"md"; background-color: green; }

h2{ font-size: 3.8rem; }

#footer .collections li a.h3style .button.goto{ font-size: calc( var(--containerWidth) / 60 ); }

body#accueil #philosophie .extra.bg.rose:before { width: 110%; height: calc(100% + 20rem); }
body#accueil #collections{ padding: 10vh 0; }
body#accueil #collections h2{ padding-left: 1.5rem; }
body#accueil #collections-ancres ul li{ font-size: 1.8rem; }

body#collection #collections .container:after{ content: none; }
	.montre.detail .visuels .bg-cover > img{ min-height: auto; }

#footer .menu{ max-width: none; }
#footer .collections ul { column-count: 2; }
}
/**
 * SM
 **/
@media (max-width: 767px) {
:root{ --containerWidth: 540px; }
body.admin:after{ content:"sm"; background-color: blue; }
	
h2{ text-align: center; }

	#header { top: 0; opacity: 1; }
		#logo { width: 100%; }
		#logo img { max-width: 13vw; }
		#logo img.typo { max-width: calc( 100% - 60px); margin-left: 1rem; }
	#header .menu{ max-width: 100px; }
	#header .menu > span > .button{ background: url(../themes/bellecour/assets/img/menu-contact.svg) no-repeat 50% 50%; background-size: 75% 100%; text-indent: 100vw; border: 0; }
	#header .menu > span:first-child > .button{ background-image: url(../themes/bellecour/assets/img/menu-collections.svg); }
	
	#footer{ padding-top: 6rem; }
	#footer .logo { width: 80%; max-width: 300px; margin: auto; }
	#footer .separateur { height: 8rem; }
	#footer .menu { flex-direction: column; align-items: center; margin: 4rem 0 2rem; }
	#footer .menu > *{ width: 180px; }
	#footer .collections { display: none; }
	#footer .legals{ justify-content: center; flex-direction: column; font-size: 1.2rem; }
	#footer .legals p:first-child{ margin-bottom: 1em; }
	#footer .legals span{ display: block; text-align: center; white-space: normal; }
	#footer .legals span.dot{ display: none; }
	
	
body#accueil #header { top: 0; opacity: 1; }

body#accueil #splash{ height: auto; background-color: var(--noir); }
body#accueil #splash.bg-cover > img{ position: static; transform: translate(-6%, 0); left: 0; width: 200%; max-width: none; max-height: calc( 100vh - 16rem); }
body#accueil #splash.bg-cover .swiper-container { position: static;  }
body#accueil #splash.bg-cover .swiper-container img { position: static;  }
body#accueil #splash .identity{ padding-top: 0; padding-bottom: 0; }
body#accueil #splash .logo { display: none; }
body#accueil #splash .menu { display: none; }
body#accueil #splash .separateur { display: none; }
body#accueil #splash .slogan { margin: 3rem 0; }
body#accueil #splash .slogan h2{ font-size: 1.7rem; }
body#accueil #splash .slogan h2:before{ content: none; }
body#accueil #splash .slogan h2 span,
body#accueil #splash .slogan h2 span.br{ display: inline; }
	
body#accueil #philosophie{ background-color: var(--rose); position: relative; }
body#accueil #philosophie:before{ content: ''; background-color: var(--blanc); position: absolute; width: 100%; height: 7rem; left: 0; top: 0; z-index: 0; }
body#accueil #philosophie .container{ position: relative; z-index: 1; }
body#accueil #philosophie .extra.bg.rose:before{ content: none; }
body#accueil #philosophie .text { margin-right: 0; }
	
body#accueil #collections{ background-color: var(--blanc);  padding: 3vh 0; }
body#accueil #collections .container:before{ content: none; }
body#accueil #collections h2{ position: static; padding-left: 0; margin-top: 0; margin-bottom: 0; }
body#accueil #collections-ancres{ display: none; }
body#accueil #collections .row{ padding-top: 0; padding-bottom: 0; height: calc(100% - 4.5rem); }
	.montre.teaser h3{ flex-direction: column; transform: none; position: static; width: auto; height: auto; }
	.montre.teaser h3 .collection{ display: block; margin: 0; }
	.montre.teaser h3:before{ content: none; }
	.montre.teaser h3:after{ content: none; }
	.montre.teaser h3 span{ display: block; margin: auto; }
	.montre.teaser figure{ justify-content: space-between; margin-left: 0; }
	.montre.teaser figcaption .b-flex-row { display: block; position: static; max-width: 100%; margin: 0; }
	.montre.teaser figcaption .paragraphs{ display: none; }
	.montre.teaser figcaption .ico{ position: relative; right: 0; left: 0; margin: auto; }
	
body#accueil #collections-details .swiper-btn.prev,
body#accueil #collections-details .swiper-btn.next { top: calc( (100% - 18rem) /2 ); }
	
	.fleche { width: 20px; }
	.button.goto:hover .fleche { width: 30px; }
	.button.goto.swiper-btn:hover .fleche{ width: 30px; }
	
	
body#collection .collection:before{ content: none; }
body#collection .collection header{ flex-direction: column-reverse; align-items: center; padding: 0; z-index: 1; }
body#collection .collection header h1{ margin-top: 2rem; margin-left: 0; }
	.montres-nav-container{ margin-top: -2rem; z-index: 0; }
	.montres-nav-container:before{ content: ''; position: absolute; width: 200%; left: -50%; height: 100%; background-color: var(--rose); }
	.montres-nav{ padding: 3.8rem 0 1.5em; position: relative; justify-content: space-between; flex-wrap: wrap; align-items: center; }
	.montres-nav li{ margin: 0 1rem; }
	.montres-nav li span{ padding: 0; }
	.montres-nav li.active{ width: auto; }
	.montres-nav li.active:before{ width: 0.7rem; margin-right: 0.5rem; }
	.montres-nav li.active:after{ content: none; }
	.montres-nav li.active span{ font-size: 1.8rem; }
	
	.montre.detail{ min-height: none; }
	.montre.detail .descriptif{ margin-top: 3rem; }
	.montre.detail .visuels-wrapper{ min-height: 100vw; }
	.montre.detail .visuels-wrapper .recto-verso{ width: 10vw; max-width: none; height: 10vw; max-height: none; overflow: hidden; }
	.montre.detail .visuels-wrapper .recto-verso:before{ min-width: 10vw; }

body#collection #collections h2{ padding-left: 0; }
	.collections-item a figcaption h3.button.goto { font-size: calc( var(--containerWidth) / 45 ); }
	
body#collection #ecrins:after{ content: none; }
body#collection #ecrins .ecrins-wrapper{ left: 0; }
	.vertical-marque:before{ content: none; }
}

/**
 * XS
 **/
@media (max-width: 575px) {
:root{ --containerWidth: 100%; }
body.admin:after{ content:"xs"; background-color: yellow; }

h1{ font-size: 3.5rem; }

#regional{ position: relative; }
#regional:before{ bottom: 5vh; }
#regional img{ max-width: none; width: 150%; transform: translateX(-25%); }

body#accueil #collection{}
	.montres-nav{ justify-content: center; }

body#collection{}
	.montres-nav-container:before{ top: 0.5em; }
body#collection #collections{ background-color: var(--noir); overflow: hidden; }
body#collection #collections h2{ margin: 0.5em 0; position: static; display: none; }
	#collections-list{ flex-direction: column; align-items: flex-start; margin-bottom: 0; padding: 2rem 3rem; }
	.collections-item { width: 100%; margin: 0; }
	.collections-item a figure .bg-cover{ display: none; }
	.collections-item a figcaption h3.button.goto{ font-size: 2rem; color: var(--dore);}
	
body#collection #ecrins{ padding-bottom: 0; }
body#collection #ecrins .container{ padding: 0; }
body#collection #ecrins .container h2{ margin: 1em 0; }
body#collection #ecrins .ecrins-wrapper{ padding: 0; background-color: transparent; }

}