@charset "utf-8";

/*---------------SCROLLBAR---------------*/
html {scroll-behavior: smooth;}
body::-webkit-scrollbar {width: 6px;} /* width of the entire scrollbar */
body::-webkit-scrollbar-track {background: #e9f2e9;} /* color of the tracking area */
body::-webkit-scrollbar-thumb {background-color: #586758;border-radius: 20px;}

/*---------------BODY---------------*/
body{
    font-family: 'Raleway', sans-serif;
    scrollbar-width: thin;
    scrollbar-color: #586758 #e9f2e9/* scroll thumb and track */;
    background-color: #d5dfd5;
    overflow-x: hidden;
}
a{
    text-decoration: none;
    color: black;cursor: url("../img/cursor.svg") 9 9, pointer
}
a:hover{
    text-decoration:underline;
}
/*---------------ERROR---------------*/
.error-container{
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    position: absolute;
    display:grid;
    align-content: center;
    align-items: center;
    justify-content: center;
    text-align: center;
    
}
.error-name:before{
    content: "OUPS,";
}
.error-name{
    height: auto;
    position: relative;
    font-size: 100px;
    z-index: 20;
}
.error-back{
    height: auto;
    position: relative;
    font-size: 50px;
    z-index: 20;
}
.broken{
    background: url("../img/ERROR/404.jpg") center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}
.broken-server{
    background: url("../img/ERROR/504.jpg") center no-repeat;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 10;
}
/*---------------FONT---------------*/
h1{font-size: 65px;    margin: 0px;}
h2{font-size: 48px;    margin: 0px;}
h3{font-size: 36px;    margin: 0px;}
h4{font-size: 20px;    margin: 0px;}
h5{font-size: 16px;    margin: 0px; display: inline;}
h10{font-size: 90px;    margin: 0px;}
h20{font-size: 15px;    margin: 0px;}
h30{font-size: 28px;    margin: 0px;}
p{margin: 0px;}
.h100{line-height: 100px;}
.h60{line-height: 60px;}
.h50{line-height: 50px;}
.h40{line-height: 40px;}
.h30{line-height: 30px;}
.h25{line-height: 22px;}
.h20{line-height: 20px;}
.h14{line-height: 14px;}
.light{font-weight:200;}
.regular{font-weight:300;}
.bold{font-weight:500;}
.xbold{font-weight:700;}
.black{font-weight:800;}
.xblack{font-weight:900;}
.darkgreen{color: #586758}
.center{text-align: center;}
.serif{font-family: 'Playfair Display', serif;}
.sansserif{font-family: 'Raleway', sans-serif;}
.inline{display: inline;}
.break{word-break: break-all;}
.homelink{text-decoration:none;}
.homelink:hover{text-decoration:none !important;}
.upper{text-transform: uppercase;}
/*---------------MO.RE---------------*/
.morelogo{
    position: absolute;
    width: 60%;
    height: 60%;
    top: 10%;
    left: 20%;
    background-image: url("../img/index.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    animation: fadeIn .5s;    
}
.entre{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 30%;
    text-align: center;
    text-transform: uppercase;
}
.morehead{
    height: 100%;
    width: auto;
    left: 0px;
    top: 0px;
    position: absolute;
    display: inline-flex;
    animation: fadeIn 1s;
    
}
.logo{
    width: 60px;
    height: 70%;
    top: 15%;
    left: 0px;
    position: relative;
    display: inline-flex;
    background-image:url("../img/MORELOGO.svg");
    background-position: bottom ;
    background-repeat: no-repeat;
    background-size: contain;
    z-index: 50;
}

/*---------------STRUCTURE---------------*/

.container{width: 100%;height: 100%;position: absolute;top: 0px;left: 0px;background-color: #d5dfd5;z-index: 4;}

.left-container{
    width: 50%;
    height: 92%;
    position: fixed;
    top: 8%;
    left: 0px;
    display: flex;
    align-items: center;
    animation: fadeIn 1s;
}
.left-container-objet{
    width: 50%;
    height: 92%;
    position: fixed;
    top: 8%;
    left: 0px;
    display: flex;
    align-items:center;
    animation: fadeIn 1s;
    z-index: 200;
}
.left-container-about{
    width: 50%;
    height: 92%;
    position: fixed;
    top: 8%;
    left: 0px;
    display: flex;
    align-items:center;
    animation: fadeIn 1s;
}
.left-container-allmodel{
    width: 100%;
    height: auto;
    position: absolute;
    top: 13%;
    left: 0px;
    display: flex;
    align-items: flex-start;
    animation: fadeIn 1s;
}
.left-container-download{
    width: 100%;
    height: auto;
    position: absolute;
    top: 8%;
    left: 0px;
    animation: fadeIn 1s;
}
.right-container{
    width: 50%;
    height: 92%;
    padding-left: 7%;
	max-height: 92%;
    position: absolute;
    top: 8%;
    right: 0px; 
    background-color:#d5dfd5;
    z-index: 3000;
}
.right-container-contact{
    width: 50%;
    height: 92%;
    position: absolute;
    top: 8%;
    right: 0px; 
    display:flex;
    align-items:flex-start;  
    justify-content:flex-end;
    padding-left: 3%;
}

/*---------------MENU---------------*/

.head{
    width: 100%;
    top: 0px;
    position: fixed;
    left: 0px;
    height: 8%;
    border-bottom: 1px solid #586758;
    display: inline-block;
    background-color: #d5dfd5;
	align-content: center;
    z-index: 9999999999999999999999;
}
.brand{
    width: auto;
    height: 100%; 
    top: 0px;
    position: relative;
    display: inline-flex;
    align-items:flex-end;
    padding-left: 5px;
}
.catch{
    width: auto;
    height: auto;
    top: 9%;
    left: 0px;
    position: absolute;
    padding-left: 20px;
    display: flex;
    color:#586758;
}
.menuright{
    width: 50%;
    height: 100%;
    right: 10px;
    bottom: 0px;
    position: absolute;
    text-transform: uppercase;
    font-size: 17px;
	align-items: flex-end;
	display:inline-flex;
    animation: fadeIn 1.5s;
}
.navzone{
    width: auto;
    height: auto;
	position: absolute;
	right: 0px;
}
.model{
    width: auto;
    height: auto;
    bottom: 0px;
}
.model:after{content:"|";font-weight: 300;}
a:hover.model{font-weight:700;}
.lang{
    width: auto;
    height: auto;
    bottom: 0px;
}
.lang:after{content:"|";font-weight: 300;}
a:hover.lang{font-weight:700;}

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

/*---------------HOME---------------*/
.blanc{
    width: 48%;
    height: auto;
    top: 30px;
    left: 0px;
    position: relative;
    background-color: white; 
    text-transform: uppercase;
    word-wrap: break-word;
    line-height: 90px;
    padding: 20px 0px 20px 20px;
    z-index: 10;
}
.picture{
    width:100%;
    height: 100%;
    position: absolute;
    bottom:0px;
    right: 0px;
    background: url("../img/_MG_1420-V2-GR.jpg") center no-repeat ;
    background-size: cover;
    z-index: 9;
}
.esprit{
    bottom: 40px;
    left: 80px;
    width: 41%;
    height: auto;
    position: absolute;
}

/*---------------SOMMAIRE HOME---------------*/

th{border: solid 0px;}
.sommaire{
    border-collapse: collapse;
    width: 100%;
	height: auto;
	max-height: 100%;
    position: relative;
    text-align: left;
    display:contents list-item;
    animation: fadeIn 1.5s;
    
}
.bordure{border-color: #586758; border-width: 0px 0px 1px 0px;}
.tab{padding-left: 90px;}
.move{transition: transform .5s}
.move:hover{transform: translate(20px);cursor: url("../img/cursor.svg")9 9,pointer;}
.move-left{transition: transform .5s}
.move-left:hover{transform: translate(-20px);cursor: url("../img/cursor.svg")9 9,pointer;}

/*---------------SOMMAIRE PRODUIT---------------*/
.sommaire-product-container{
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    display: grid;
    align-content: center;
}
.sommaire-product{
    border-collapse: collapse;
    width: 90%;
    top: 0px;
    right: 0px;
    position:relative;
    align-content: center;
    text-align: left;
}
.bordure-product{border-color: #586758; border-width: 0px 0px 1px 0px;}
.tab-product{padding-left: 90px;}
.list-product{
    border-collapse: collapse;
    width: 100%;
    height: auto;
    right: 0px;
    position: relative;
    text-align: center;
}
.img-product{
    border-color: #586758;
    border-width: 0px 0px 0px 0px;
    vertical-align: middle;
    text-transform: uppercase;
    }

a:hover.img-product{text-decoration: underline;}
.image{transition: transform .5s;height: inherit;padding-bottom: 0px;object-fit: cover;width:100%;}
.image:hover{transform: scale(1.05);}

/*---------------OBJET---------------*/

.sommaire-objet{
    border-collapse: collapse;
    width: 75%;
    height: 100%;
    position: relative;
    text-align: left;
    display:flex;
    align-items:flex-start;
    animation: fadeIn 1.5s;
    padding-top: 50px;
}
.bordure-objet{border-color: #586758; border-width: 0px 0px 1px 0px;text-transform: uppercase;}
.tab-objet{padding: 20px 40px 30px 90px;}
p.objet{padding-bottom: 20px;}
p.spec{padding-top: 0px;}
.moveleft{
    transition: transform .5s;
    position: relative;
    display: inline-flex;
    width: auto;
    height: auto;
    padding-right: 30px;
}
.moveleft:hover{transform: translate(-20px);}
.moveright{
    transition: transform .5s;
    position: relative;
    display:inline-flex;
    width: auto;
    height: auto;
    padding-left: 30px;
}
.moveright:hover{transform: translate(20px);}
.navobjcontain{
    width: 100%;
    height: auto;
    position: inherit;
    padding: 10px 0px 0px 0px;
    display: inline-block;
}
.blanc-objet{
    width: auto;
    height: auto;
    position: relative;
    left: 0%;
    background-color: white; 
    text-transform: uppercase;
    word-wrap: break-word;
    line-height: 90px;
    padding: 20px 20px 20px 20px;
    z-index: 10;
    display: inline-block;
}
.picture-objet{
    width:100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
}
.download:before{
    content:url("../img/download.svg");  
    padding-right: 10px;
    display: inline-flex;
    align-items: flex-end;
    
}
/*---------------SOMMAIRE ALL MODEL---------------*/

.sommaire-allmodel{
    border-collapse: collapse;
    width: 90%;
    right: 0px;
    position: relative;
    text-align: left;
    display: flex;
    align-items: baseline;
    align-content: space-between;
}
.bordure-allmodel{border-color: #586758; border-width: 0px 0px 1px 0px;}
.tab-allmodel{padding-left: 90px;}

.img-allmodel{
    height: 180px;
    text-transform: uppercase;
    position: relative;
    text-align: center;
    }

a:hover.img-product{text-decoration: underline;}
.image{transition: transform .5s;height: inherit;}
.image:hover{transform: scale(1.05);}

.allmodel-container{
    width: auto;
    height: auto;
    position: absolute;
    left: 0px;
}
.allmodel-number{
    width: 100px;
    height: auto;
    position: relative;
    left: 30px;
    display:flex; 
    text-align: left;
    border-bottom: 1px solid;
    border-color: #586758;
}

.allmodel-name{
    width: auto;
    height: auto;
    position: relative;
    left: 30px;
    padding: 5px 0px 5px 0px;
    display:block; 
    text-align: left;
    border-bottom: 1px solid;
    border-color: #586758;
}
.allmodel-img-container{
    height: auto;
    width: 100%;
    position: relative;
    padding-bottom: 10px;
    padding-left: 90px;
    display:inline-flex;
}
.allmodel-img{
    height: 140px;
    padding-right: 30px;
    padding-top: 15px;
    text-transform: uppercase;
    width: auto;
    text-align: center;
    position: relative;
    object-fit: contain;
    display:grid;
}
/*---------------DOWNLOAD---------------*/
.download-container{
    width: auto;
    height: auto;
    position: absolute;
    left: 0px;
    align-content: flex-start;

}
.download-number{
    width: auto;
    height: auto;
    position: relative;
    left: 30px;
    display:flex; 
    text-align: left;
	text-transform: uppercase;
    border-bottom: 1px solid;
    border-color: #586758;
}
.download-text{
    width: auto;
    height: auto;
    position: relative;
    left: 30px;
    padding: 5px 0px 5px 0px;
    display:block; 
    text-align: left;
    border-bottom: 1px solid;
    border-color: #586758;
}
.download-thumb{
    width: inherit;
    height: 300px;
    position: relative;
    left: 30px;
    padding: 15px 0px 15px 0px;
    display:inline-block; 
    text-align: left;
}
.download-contain{
	object-fit: contain;
	height: 100%;
	padding-right: 20px;
	padding-top: 20px;
	transition: transform.5s;	
}
.download-contain:hover{
transform: scale(1.03);
}
/*---------------CONTACT+ABOUT---------------*/

.picture-contact{
    width:100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../img/contact.jpg");
    background-size: cover;
}
.picture-about{
    width:100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../img/about.jpg");
    background-size: cover;
}
.adressemail{
    position: relative;
    background-color: white;
    height: auto;
    width: 100%;
    text-align: center;
    top:15px;
    padding: 8px;
    border-radius: 8px;
    font-size: 20px; 
}

.sommaire-contact{
    border-collapse: collapse;
    width: 90%;
    position: relative;
    text-align: left;
    display:block;
    animation: fadeIn 1.5s;
}
.mention{
    width: 100%;
    height: auto;
    bottom: 0px;
    text-align: center;
    position: absolute;
}
.picture-mention{
    width:100%;
    height: 100%;
    position: absolute;
    right: 0px;
    bottom: 0px;
    background: url("../img/legal.jpg");
    background-size: cover;
}
.vertical{
    right: 160px;
    top: 0px;
    height: 100%;
    position: absolute;
    writing-mode: vertical-rl;
    text-align: center;
    transform: rotate(180deg);
}

/*---------------ANIMATION---------------*/

@keyframes fadeIn {0% { opacity: 0;}100% { opacity: 1;}}

/*---------------MEDIAQUERRY MIN 1919px---------------*/

@media (min-width:1919px)
{	
h1{font-size: 75px;margin: 0px;}
h2{font-size: 48px;margin: 0px;}
h3{font-size: 44px;margin: 0px;}
h20{font-size: 16px;margin: 0px;}
p.objet{padding-bottom: 30px;}
.tab-objet{padding: 50px 60px 50px 90px;}
.head{height: 5%;}
.left-container,.left-container-objet,.left-container-about {height: 95%;top: 5%;}
.blanc{width: 45%;}
.right-container, .right-container-contact{height: 95%;top: 5%;}	
.sommaire-objet, .right-container-contact{align-items:center;}		
}

/*---------------MEDIAQUERRY MAX 1601px---------------*/
@media (max-width:1601px)
{
h1{font-size: 55px;margin: 0px;}	
.lang, .model{font-size:17px; }
}
/*---------------MEDIAQUERRY MAX 1400px---------------*/
@media (max-width:1400px) 
{
h1{font-size: 55px;margin: 0px;}
.head{height: 8%;position: fixed;z-index: 99999999;background-color:#d5dfd5; } 
.left-container,.left-container-objet,.left-container-about {height: 70%;top: 8%; width: 100%;position: absolute;}
.right-container, .right-container-contact{height: auto;width: 100%; left: 0px;top: 78%;padding-left: 20px;}
.sommaire-contact{width: 100%; text-align: left; padding-left: 20px;}
}
/*---------------MEDIAQUERRY MIN 1100px MAX 1580px---------------*/
@media (min-width:1100px) and (max-width:1580px){
    .tab-objet{padding: 20px 20px 30px 20px;}
}
/*---------------MOBILE---------------*/
@media only screen and (hover:none) and (pointer:coarse)
{
h1{font-size: 55px;margin: 0px;}	
.left-container,.left-container-objet,.left-container-about {height: 50%;top: 5%; width: 100%;}
.right-container, .right-container-contact{height: 45%;width: 100%; left: 0px;top: 55%;padding-left: 20px;}
.sommaire-contact{width: 100%; text-align: left; padding-left: 20px;}
.head{height: 5%;padding-left: 20px;} 
.menuright{font-size: 30px;}
.sommaire{padding-left: 20px;}
}