html,body {margin:0; padding:0; width:100%; height:100%;}
body {font-family:truenolight,Arial; font-size:16px; background:#fff; color:#222;}
.clear {clear:both;}
.s {margin:0 auto; max-width:1420px; width:100%; width:calc(100% - 20px);}
img, iframe {vertical-align:top; margin:0; border-radius:3px;}
#haut {position:relative; height:0;}
#top {position:relative; width:100%; height:400px; font-size:0; overflow:hidden; background:#000; text-align:center;}
#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% - 40px); height:100%; padding:0 20px; text-align:center; z-index:60; background:url('/ima/tsp.png');}
#accueil div, #top div {position:relative; top: 50%; transform: translateY(-50%);}
h1 {font-family:Italiana; font-size:90px; margin:0; padding:0; display:block; color:#fff;}
h2 {font-family:truenolight; font-size:28px; margin:5px 0 0 0; padding:0; color:#ddd; font-weight:normal; letter-spacing:2px;}
h2 span {font-size:20px; line-height:20px;}
#accueil img {margin-top:40px;}
#top h1 {font-size:70px;}
#top h2 {font-size:24px; margin:0;}
#scroll {position:absolute; bottom:30px; text-align:center; width:100%; animation: bounce 1.5s infinite; z-index:70;}
@keyframes bounce{from {transform: translateY(0);} to {transform: translateY(10px);}}
#menu {position:fixed; z-index:99; padding:40px 0 20px 0; left:0; width:100%; text-align:center; font-size:0; transition:0.5s;}
.fixmenu {background:#f5f5f5; padding-top:20px !important;}
.fixmenu .item a:link, .fixmenu .item a:visited {color:#222 !important;}
.fixmenu .item a:hover, .fixmenu .sitem a:link, .fixmenu .sitem a:visited, .fixmenu .item:hover a {color:#fff !important;}
.fleche {font-size:10px;}
.item, .on {position:relative; font-size:17px; display:inline-block; vertical-align:top; margin:5px;transition:0.5s;}
.item a:link, .item a:visited {color:#fff; display:block; padding:6px 8px;}
.item a:hover, .item:hover, .on {background:#9387d3 !important; border-radius:3px;}
.smenu {position:absolute; display:none; padding-top:10px; z-index:99;}
.sitem a:link, .sitem a:visited {transition:0.5s;display:inline-block; width:200px; text-align:left; font-size:16px; color:#fff; margin-bottom:2px; cursor:pointer;background:#9387d3; padding:6px 8px; border-radius:3px;}
.sitem a:hover {background:#bbb1f8 !important;}
#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:#9387d3;}
#page {position:relative; margin:60px auto; max-width:1440px; width:100%; z-index:70; min-height:400px;}
#page h3 {margin:0 20px 40px 20px; padding:0; display:inline-block; font-family:truenoregular; font-size:40px; color:#7064b0; letter-spacing:1px; text-align:left; font-weight:normal;}
#page h3:after {height:6px; display:block; width:80%; background:#7064b0; border-radius:3px; margin-top:5px; content: '';}
.pdf {margin-bottom:2px;vertical-align:middle;}
.text, .textarea {border: 1px solid #ddd; font-family:truenolight,Arial; font-size:16px; padding:4px; border-radius:3px; color:#443e6e; -webkit-appearance:none;}
.bouton {display:inline-block; font-family: truenoregular,Arial; font-size:18px; color:#fff; background: #02c204; border:0; border-radius:3px; padding:4px 8px; cursor:pointer; -webkit-appearance:none;}
.erreur {display:inline-block; background:#e00005; color:#fff; padding:4px; border-radius: 3px;font-size:16px;}
textarea:focus, input:focus{outline: none;}
#meteo {position:relative; padding:40px 0; background:#605699; color:#fff; font-size:0;}
.cinq {display:inline-block; vertical-align:top; position:relative; width:calc(20% - 20px); padding:0 10px; font-size:17px; text-align:left;}
.cinq img, .cinq iframe {max-width:100%;}
.titre {font-size:21px; display:block; padding-bottom:5px; margin-bottom:20px; font-family: truenoregular; border-bottom:3px solid #eee;}
#tendance {float:left; margin-right:20px;}
#tb_marees {border:0; border-collapse:collapse; width:100%;}
#tb_marees td {padding:6px 8px; color:#fff; font-size:16px; border-radius:3px;}
.rowgris {background:#443e6e;}
iframe {border-radius:3px;}
.cell {display:block; padding:6px 10px; background:#443e6e; color:#fff; font-size:17px; border-radius:3px; margin-bottom:5px;}
.cell a:link, .cell a:visited, #bas a:link, #bas a:visited {color:#fff;}
#bas {position:relative; padding:15px 0; background:#443e6e; color:#fff;}
a{outline:none;}
a:link{color:#443e6e;text-decoration:none}
a:visited{color:#443e6e;text-decoration:none}
a:hover{color:#000;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}
.diapophotos, .photos {position:relative; overflow:hidden; border-radius:3px;}
.diapophotos .data { display:none; }	
.diapophotos a.prev { position:absolute; left:-40px; top:calc(50% - 23px); z-index:20; width:40px; height:46px; outline:none; border-radius:3px;}
.diapophotos a.prev:hover { background:#fff; }
.diapophotos a.prev span { display:block; width:40px; height:46px; background:url(/ima/arrows.png) no-repeat -55px 50%; text-indent:-9999px; }
.diapophotos a.next { position:absolute; right:-40px; top:calc(50% - 23px); z-index:20; width:40px; height:46px; outline:none; border-radius:3px;}
.diapophotos a.next:hover { background:#fff; }
.diapophotos a.next span { display:block; width:40px; height:46px; background:url(/ima/arrows.png) no-repeat -5px 50%; text-indent:-9999px; }
@font-face {font-family: 'truenoregular'; src: url('/fonts/truenorg-webfont.woff2') format('woff2'),url('/fonts/truenorg-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'truenolight'; src: url('/fonts/truenolt-webfont.woff2') format('woff2'),url('/fonts/truenolt-webfont.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap;}
@font-face {font-family: 'Italiana'; src:url('/fonts/Italiana.ttf.woff') format('woff'),url('/fonts/Italiana.ttf.svg#Italiana') format('svg'),url('/fonts/Italiana.ttf.eot'),url('/fonts/Italiana.ttf.eot?#iefix') format('embedded-opentype');font-weight: normal; font-style: normal;}
@media screen and (max-width:900px)
  {
  h1, #top h1 {font-size:60px;}
  h2 {font-size:22px;}
  h2 span {font-size:15px;}
  #menu {display:none; top:0; left:0; right:0; padding:10px 0 0 0; transition:0; position:absolute !important;}
  .item {display:block; font-size:20px; background:#9387d3; border-radius:3px; margin:0 0 4px 0;}
  .item a:link, .item a:visited {padding:15px 10px;}
  .smenu {position:relative; top:0px !important; padding:0 10px 4px 10px;}
  .sitem a:link, .sitem a:visited {display:block; width:auto; text-align:center; background:#fff; color:#222; padding:15px 10px; font-size:18px; margin:0 0 4px 0;}
  .sitem a:hover {color:#fff; background:#605699;}
  #menur {display:block;}
  .text, .textarea {width:calc(100% - 8px) !important;}
  .cinq {width:calc(100% - 20px); margin:20px 0;}
  .cinq iframe {height:200px !important;}
  td {display:block;}
  table {width:100%;}
  #tb_marees td {display:revert;}
  }
@media screen and (max-height:700px)
  {
  #scroll {display:none;}
  }