html,body {margin:0; padding:0; width:100%; height:100%; -webkit-font-smoothing: antialiased;-webkit-text-size-adjust:none;}
body {font-family:museo500,Arial; font-size:16px; color:#111; overflow-x:hidden; background:#fff;}
.clear {clear:both;}
.s {margin:0 auto; max-width:1400px; padding-left:20px; padding-right:20px;}
.smax {margin:0 auto; max-width:1420px;}
img, iframe {vertical-align:top; margin:0;}
#load {position: fixed; left:0; top:0; width: 100%;	height: 100%; z-index: 9999; background: url('/ima/load.gif') center no-repeat rgba(0,0,0,0.9);}

#nav {position:fixed; top:0; z-index:99; width:100%; font-size:0; padding-top:10px; height:90px; transition:0.3s all;}
.fixnav {background:#000; border-bottom: 1px solid #ad9243;}
#logo {display:inline-block; vertical-align:middle; width:75px;}

#menu {display:inline-block; vertical-align:middle; width:calc(100% - 75px); text-align:right;}
.item {display:inline-block; position:relative; font-size:18px; font-family:museo500; margin-left:25px; line-height:18px;}
.item a:link, .item a:visited {color:#fff; padding:10px 0; display:block;transition:0.3s all;}
.item:hover, .item.active a, .item a:hover {cursor:pointer;color:#ad9243;}
.mussel {position:absolute; margin-left:calc(50% - 8px); opacity:0; transition:0.3s all ease; width:16px; height:15px; background:url('/ima/mussel.png');}
.item:hover .mussel, .item.active .mussel {opacity:1;transform:translateY(-18px);}
.item::after, .item.active::after {content:""; position:absolute; width:100%; height:0px; background:#ad9243; left:0; bottom:0; transition: 0.3s all ease; border-radius:2px;}
.item:hover::after, .item.active::after {height:3px; width:50%; left:25%; z-index: -1;}
#menur {display:none; position:fixed; bottom:15px; margin-left:calc(50% - 40px); text-align:center; z-index:99; line-height:60px; width:60px; height:60px; padding:10px; border-radius:50%; background:#ad9243;}

#elems {position:absolute; bottom:30px; width:100%; z-index:61;}
#maree {float:left; position:relative; color:#777; text-align:center; border-radius:50%; border: 3px solid rgba(100,100,100,0.5); width:120px; height:95px; padding-top:25px; font-size:14px; transition:0.3s all;}
#maree #plus {position:absolute; right:0; top:0; border-radius:50%; width:25px; height:25px; background:#777; font-size:18px; line-height:23px; transition:0.3s all;}
#maree span {font-size:24px;}
#maree a {color:#000;}
#maree:hover, .mouse:hover {border: 3px solid #ad9243; color:#ad9243;}
#maree:hover #plus {background:#ad9243;}
#scroll {float:right; position:relative; margin-top:60px;}
.mouse {display:inline-block; width:28px; height:44px; border-radius: 10px; border: 3px solid rgba(100,100,100,0.5); text-align: center; transition:0.3s all;}
.mouse:after {display: inline-block; width:20px; height:10px; background:#ad9243; border-radius:20%; content: ""; animation:zemouse 1s ease-out infinite;}
@keyframes zemouse{from {transform: translateY(0);} to {transform: translateY(20px);}}

#intro {position:relative; width:100%; height:100%; font-size:0; overflow:hidden; background:#000;}
#video {position:absolute;width:100%; height:100%; overflow:hidden; z-index:50;}
video {min-width:100%; min-height:100%;width:auto;height:auto; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#accueil {position:absolute; top:0; left:0; width:calc(100% - 80px); padding:0 20px; height:calc(100% - 40px); text-align:center; z-index:60;background:url('/ima/tsp.png'); border:20px solid #111;}
#accueil div {position:absolute; top: 50%; transform: translateY(-50%); width:calc(100% - 40px);}
#accueil img {margin-bottom:20px;}
#accueil h1 {display:block; font-size:32px; margin:30px 0 5px 0; padding:0; font-family:museo500; font-weight:normal; color:#fff;}
#accueil h2 {display:block; font-size:20px; margin:0; padding:0; font-family:museo500; font-weight:bold; color:#ad9243; letter-spacing:2px;}

#barre {position:absolute; right:50px; top:50%; transform: translateY(-50%) rotate(10deg); font-size:18px; width:150px; padding:0 75px; height:300px; background:url('/ima/barre.png'); z-index:70; text-align:center;}
#barre div {position:relative; top:50%; transform: translateY(-50%); color:#fff;}

.section{position:relative; width:100%; padding:50px 0; background:#fff; color:#000;}
.s:after, .smax:after {content: '';display: block; clear: both;}
.sep{position:relative;background:#ad9243;width:100%;height:5px;}
.pdf {vertical-align:middle;}
a{outline:none;}
a:link{color:#ddd;text-decoration:none}
a:visited{color:#ddd;text-decoration:none}
a:hover{color:#ddd;text-decoration:none}
a.b:link{color:#fff;text-decoration:none}
a.b:visited{color:#fff;text-decoration:none}
a.b:hover{color:#fff;text-decoration:none}

@font-face {font-family: 'museo500';src: url('/fonts/museosans_500.woff2') format('woff2'),url('/fonts/museosans_500.woff') format('woff');font-weight: normal;font-style: normal;font-display: swap;}

@media screen and (max-width:767px)
  {
  #accueil {border:0; width:calc(100% - 40px); height:100%;}
  #accueil div img {transform:scale(0.8); transform-origin: bottom;}
  #accueil h1 {font-size:24px;}
  #elems {position:relative; top:0;}
  #barre {transform:translateY(0) rotate(10deg) scale(0.5); top:20px; right:0; transform-origin: top right;}
  #maree {float:none; position:absolute; top:20px; left:20px;}
  .section {background-position: top center !important; background-attachment:scroll !important;}
  .smax {margin:0 10px;}
  img {max-width:100%;}
  #nav {display:none; position:absolute;}
  #scroll {display:none;}
  #menur {display:block;}
  #nav #logo {display:none;}
  #menu {width:100%; text-align:center;}
  .item {display:block;background:#000; margin:0 0 4px 0;padding: 20px 0; border-radius:6px; border:1px solid #ad9243;}
  }