@CHARSET "ISO-8859-1";

@font-face {
	font-family: 'book';
	src: url("../fonts/CooperHewitt-Book.eot");
	src: url("../fonts/CooperHewitt-Book.woff") format("woff"), url("../fonts/CooperHewitt-Book.ttf") format("truetype"), url("../fonts/CooperHewitt-Book.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	}
	
@font-face {
	font-family: 'bold';
	src: url("../fonts/CooperHewitt-Bold.eot");
	src: url("../fonts/CooperHewitt-Bold.woff") format("woff"), url("../fonts/CooperHewitt-Bold.ttf") format("truetype"), url("../fonts/CooperHewitt-Bold.svg") format("svg");
	font-weight: normal;
	font-style: normal;
	}

:root {
	
	--pad:4vw;
	--noir:#26231e;
	--bleu:#007f9c;
	--blanc:#fff;
	--gris:#f9f9f9;
	--gris2:#ececec;
	--grisfonce:#d1d1d1;
	--rouge:#bf164c;
	--rose:#f69eba;
	--orange:#f07c00;
	--jaune:#ffe17b;
	
} 

body, html {margin:0; padding:0; overflow:hidden;}
body {font-family: 'book', sans-serif; font-weight:400; line-height:1.7; color:#000000; font-size:1vw; background:#fff;}
a {text-decoration:none; webkit-transition: all .3s; -moz-transition: all .3s; transition: all .3s;}

p {margin-bottom:2rem; margin-top:0;}

ul {border-left:2px solid var(--gris2); padding-left:3rem; margin:0;}
li {list-style-type:none; display:inline-block; margin-bottom:1rem; position:relative; font-size:.9vw;}
li:first-child {margin-top:2rem;}
li:last-child {margin-bottom:2rem;}
li:before {content:''; position:absolute; background:var(--noir); height:10px; width:10px; border-radius:50%; top:1.2vh; left:calc(-3rem - 6px);}
.txtrouge li:before {background:var(--rouge);}
.txtorange li:before {background:var(--orange);}

h1, h2 {font-family: 'book', sans-serif; font-weight:400;}
h1 {font-size:2vw; line-height:1.2; font-weight:400; margin: 0;}
h2 {font-size:2.5vw; margin:0rem; color:var(--noir);}

.bggris {background:var(--gris);}
.bgrouge {background:var(--rouge); color:var(--blanc);}
.bgorange {background:var(--orange); color:var(--blanc);}

.grid {display:grid;}
.col-1-2 {grid-template-columns: 1.5fr 3fr;}
.col-2-4 {grid-template-columns: 2.5fr 4fr;}

section {height:100%; position:relative;}
.container {width:100%; height:100vh; position:relative;}
.wrapper {padding:var(--pad); position:relative;}

.center {position:absolute; top:50%; transform:translateY(-50%); text-align:right; width:calc(100% - calc(var(--pad) * 2));}

.underline a {text-decoration:none; background-position: bottom left; background-repeat: no-repeat;
background-size: 0% 1px; webkit-transition: all .4s; -moz-transition: all .4s; transition: all .4s; -o-transition: all .4s; -ms-transition: all .4s; padding: .3rem 0;}
.underline a:hover {background-size: 100% 1px;}
.txtrouge a {color:var(--rose);}
.txtrouge.underline a {background-image:linear-gradient(var(--rose), var(--rose));}
.txtorange a {color:var(--jaune);}
.txtorange.underline a {background-image:linear-gradient(var(--jaune), var(--jaune));}

.lines-wrapper {width:100%; height:100vh; position:fixed; z-index:-1; pointer-events:none;}
.lines-wrapper div:nth-child(1) {border-right:1px solid var(--gris2); margin-right:-1px;}
.lines-wrapper .col-2-4 div:nth-child(1) {border-right:1px solid var(--gris2);}



/* CONTENT */

.first {height:calc(100vh - 8vw);}
.first img {width:200px;}
.first sup {font-family:'bold', sans-serif; color:var(--bleu); font-size:40%;}

.col-1-2 div:nth-child(2) {display:grid;}
.col-1-2 div:nth-child(2) .tab--content:nth-child(1) {display:grid;}
.col-1-2 div:nth-child(2) .tab--content {display:none;}
.tab--link {color:var(--grisfonce);); transition:.3s; display:block; position:relative; white-space:nowrap; transform-style:preserve-3d;}
.tab--link sup {color:var(--grisfonce);}
.tab--link:hover {cursor:pointer; margin-right:1rem;}
.tab--link-active {color:var(--noir);}
.tab--link-active sup {color:var(--bleu);}
.tab--link-active:hover {margin-right:0;}

.tab--content {display:none;}
.tab-details {animation:tab-details 1s; transform-style:preserve-3d; position:relative;} 
.tab-details img {margin-bottom:3rem; width:200px;}
.tab-cnt {animation:tab-cnt 1.5s; transform-style:preserve-3d;} 

@keyframes tab-details {from{bottom:-20vw;}to{bottom:0;}}
@keyframes tab-cnt {from{bottom:-30vw;}to{bottom:0;}}



/* FOOTER */

.mrmobile {display:none!important;}
.mrdesktop {bottom:var(--pad); position:absolute;}
.marsrouge svg {fill:var(--noir); width:100px;}



@media screen and (max-width:1600px) {
	
	body {font-size:1rem;}
	li {font-size:.9rem;}
	h2 {font-size: 2.5rem;}
	
	.col-1-2 {grid-template-columns:calc(200px + 8vw) 1fr;}
	
}

@media screen and (max-width:1400px) {

	body, html {overflow:auto;}
	h2 {font-size:2rem;}
	ul {padding-left:2rem;}
	li:before {left:calc(-2rem - 6px);}

	.lines-wrapper {display:none;}
	.col-1-2 {grid-template-columns: 1fr;}

	.first {height: auto;}
	.first img {width: 180px;}
	.tab-details img {margin-bottom: 2rem; width: 150px;}
	.col-1-2 div:nth-child(2) {display:block;}
	
	.tab--link {display:inline-block; margin-left:2rem;}
	.tab--link:first-child {margin-left:0;}
	.tab--link:hover {margin-right:0;}
	.tab-details, .tab-cnt {height: 100%;}
	
	.mrdesktop {display:none;}
	.mrmobile {display:block!important; text-align: right;}
	
	.bgorange svg {fill:var(--jaune);}
	.bgrouge svg {fill:var(--rose);}
	
}

@media screen and (max-width:1000px) {
	
	:root {--pad:3rem;} 
	
	.center {position: relative; top: auto; transform: none; text-align: center; width:100%;}
	.first {text-align:center;}
	.tab-list {color:#8c8c8c;}
	.tab--link, .tab--link:hover, .tab--link-active:hover {margin:0 1rem!important;}
	.tab-details {text-align:center;}
	.tab-details img {margin-bottom: 1rem;}
	.tab-details, .tab-cnt {height:auto;}
	.tab-txt {text-align:center;}
	.first img {margin-bottom:2rem;}
	
	li:before {height: 8px; width: 8px; left:calc(-1.5rem - 4px);}
	li:first-child {margin-top: 1rem;}
	li:last-child {margin-bottom: 1rem;}
	
	.col-2-4 {grid-template-columns: 1fr; background:var(--gris);}
	li {display:block; margin-right:0;}
	li:before {content:none;}
	ul {border:0; padding-left:0;}
	
}

@media screen and (max-width:600px) {

	body {font-size:.9rem;}
	h2 {font-size: 1.5rem;}
	
}