html,body {margin:0; padding:0; width:100%; height:100%;-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-smoothing: antialiased; font-weight: normal;}
body {font-family:truenolight,Arial; color:#222; background:#fff; letter-spacing:-0.3px;}
.center {text-align:center;}
.tright {text-align:right;}
.left {float:left;}
.right {float:right;}
.clr {clear:left;}
.s {margin:auto; max-width:1400px; padding-left:20px; padding-right:20px;}
.smax {margin:auto; width:100%; max-width:1440px; font-size:0;}
.zero {font-size:0;}
a, input {outline: none; transition:0.4s;}
input, textarea {-webkit-appearance:none;}
a:link {color: #449cca; text-decoration: none}
a:visited {color:#449cca; text-decoration: none}
a:hover {color:#222; text-decoration: none}
#load {position: fixed; left:0; top:0; width: 100%; height: 100%; z-index:999; background:#fff; opacity:0.8;}
#accueil {position:absolute; width:calc(100% - 20px); padding:0 10px; top:25%; color:#fff; text-align:center; z-index:51; font-size:30px;}
h1{font-size:70px; font-family:truenolight,Arial; margin:0; padding:0; }
h2{font-size:100px; font-family:truenoregular,Arial; margin:-20px 0 -10px 0;padding:0;}
#accueil span {text-shadow:1px 1px 2px #000;}
#intro {position:relative; width:100%; height:100%; z-index:50;overflow:hidden;}
.cover {background-size:cover !important;}
.leaves {animation: leaves 10s ease-in-out infinite alternate; display:block; overflow:hidden;}
@keyframes leaves { 0% { transform: scale(1.0); -webkit-transform: scale(1.0);} 100% {transform: scale(1.05) translate(-2%,0);-webkit-transform: scale(1.05) translate(-1%,0);}}
#scroll {position:absolute; bottom:150px; text-align:center; width:100%; animation: bounce 2s ease infinite;}
@keyframes bounce{from {transform: translateY(0);} to {transform: translateY(-10px);}}
#nav {position:absolute; bottom:0; width:100%; z-index:98; text-align:center; height:140px;}
.fixnav {position:fixed !important; top:-50px;}
#hwaveb,#hwavev, #fwaveb, #fwavev {position:absolute; top:0; width:100%; height:50px;}
#menu {position:absolute; bottom:0; height:90px; background:#ffdf68; width:100%; font-size:0;}
.fixmenu {padding-top:10px; height:80px !important;}
#logo {display:inline-block; vertical-align:middle; width:130px;}
#backhome {display:none;}
#items {display:inline-block; vertical-align:middle; width:calc(100% - 130px); text-align:right;}
.item {position:relative; font-size:18px; display:inline-block; vertical-align:middle; margin:1px 0 1px 15px; cursor:pointer; border-radius:6px; padding:6px;}
.item a {color:#222; display:block; transition:0.4s;}
#showrec {display:none; position:absolute; padding:10px; background:#449cca; right:0px; margin-top:10px; width:180px; z-index:99; border-radius:6px;}
.smenu {position:absolute; display:none; padding-top:10px; z-index:99; margin-left:-6px;}
.sitem a:link, .sitem a:visited {display:inline-block; width:200px; text-align:left; font-size:16px; color:#fff; margin:1px 0; background:#449cca; padding:5px 10px; border-radius:3px;}
.sitem a:hover {background:#0b6fba;}
.arrow {font-size:12px; display:inline; bottom:2px; position:relative;}
#space {position:relative; height:100px;}
#bwaveb, #bwavev {position:absolute; bottom:-50px; width:100%; height:50px; z-index:98;}
.no {display:none;}
#home {position:relative; padding:30px 0; text-align:justify;}
#home::after {content: ""; display: block; clear: both;}
#ariane {display:inline-block; border-radius:3px; background:#449cca; padding:8px; color:#fff; font-size:15px;}
#ariane a {color:#fff;}
#ariane a:hover, #droite a:hover {text-decoration:underline; transition:0.4s;}
h3 {font-family:'truenoregular',Arial; color:#222; font-size:40px; margin:40px 0; padding:0; font-weight:normal;}
.l20 {margin-left:20px; margin-right:20px;}
.article {display:block; font-size:22px; font-weight:bold; cursor:pointer; margin:20px 0;}
.eye {display:inline-block; margin-right:10px;}
.sarticle {display:none; margin-bottom:40px;}
#meteo {position:relative; padding:0; background:#074a7b; color:#fff; font-size:0;}
.cinq {display:inline-block; vertical-align:top; position:relative; width:calc(20% - 40px); margin:10px 20px; font-size:16px; text-align:left;}
.cinq img, .cinq iframe {max-width:100%;}
.titre {font-size:20px; display:block; padding-bottom:5px; margin-bottom:20px; font-family: truenoregular; border-bottom:2px solid #eee;}
#tendance {float:left; margin-right:20px;}
#tb_marees {border:0; border-collapse:collapse; width:100%;}
#tb_marees td {padding:4px 8px; color:#fff; font-size:16px;border-radius:2px;}
.rowgris {background:#0b6fba;}
iframe {border-radius:2px;}
.cell {display:block; padding:5px 10px; background:#0b6fba; color:#fff; font-size:16px; border-radius:2px; margin-bottom:5px;}
.gp {float:left; margin:0 20px 20px 0;border-radius:6px;}
.gp:after, .dp:after {content:"";display:block;clear:both;}
.dp {float:right; margin:0 0 20px 20px;border-radius:6px;}
#une, #deux {display:inline-block; position:relative; vertical-align:top; width:calc(50% - 40px); margin:0 20px 40px 20px; border-radius:6px; overflow:hidden;}
#une {background:#449cca; color:#fff;}
#une .area a {color:#fff;}
#une .img {width:100%; display:block;}
#une .pdf {display:inline-block; vertical-align:middle; width:40px;}
#une .area, .tiers .area {font-size:16px; padding:20px; text-align:justify; cursor:pointer; min-height:80px;}
h4 {font-family:'truenoregular',Arial; font-size:26px; margin:0 0 10px 0; padding:0; font-weight:normal; text-align:left;}
h5 {font-family:'truenoregular',Arial; font-size:22px; margin:5px 0 10px 0; padding:0; font-weight:normal; color:#222; text-align:left;}
.theme {position:absolute; top:0; left:0; font-size:14px; background:#fff; color:#449cca; padding:6px; border-bottom-right-radius:6px;}
.filtheme:hover {text-decoration:underline; cursor:pointer;}
.actu {display:inline-block; vertical-align:middle; position:relative; background:#f9f9f9; width:calc(100% - 5px); padding-right:5px; font-size:16px; margin-bottom:20px; min-height:140px; text-align:justify;cursor:pointer; transition:0.4s; border-radius:6px;}
.actu:hover {background:none;}
.actu img {float:left; margin-right:20px; width:200px; border-radius:6px;}
.actu .date {position:absolute; bottom:5px; right:5px; font-size:14px;}
.pt {position:absolute; bottom:5px; left:220px; font-size:14px;}
.actu .pdf {display:inline-block; vertical-align:middle; width:40px; margin:0; float:none; border-radius:0;}
.actu .eye img {width:36px; height:20px; margin:0;}
#plusactu {display:block; background:#449cca; color:#fff; padding:12px 20px; border-radius:6px; text-align:center; font-size:16px; font-family:'truenoregular',Arial; cursor:pointer; transition:0.4s;}
#plusactu:hover {background:#0b6fba;}
.l20 {margin-left:20px;}
.r20 {margin-right:20px;}
#content_actus {clear:both;}
#content_actus .actu {width:calc(50% - 45px); margin:20px; vertical-align:top;}
#droite {float:right; margin:0 0 20px 20px; background:#449cca; padding:20px; border-radius:6px; font-size:16px; color:#fff;}
h6 {font-family:'truenoregular',Arial; font-size:20px; margin:0 0 10px 0; padding:0; font-weight:normal; color:#fff;}
#droite a {display:block; margin-bottom:5px; color:#fff;}
#actualites #droite {margin-right:20px;}
#actualites #droite .select {border:0;}
.tiers {display:inline-block; position:relative; vertical-align:top; width:calc(33.33% - 40px); margin:20px; border-radius:6px; overflow:hidden; background:#ffdf68;}
.tiers img {width:100%;}
.tiers .eye img {width:36px;}
.tiers .date {position:absolute; right:10px; margin-top:-55px; font-family:truenoregular; border-radius:50%; width:70px; height:58px; padding-top:12px; background:#0b6fba; text-align:center; color:#fff; font-size:18px;}
.tiers .date .jour {display:block; font-size:32px; line-height:26px;}
.tiers .pdf {display:inline-block; vertical-align:middle; width:40px;}
#plusagenda {display:inline-block; position:relative; vertical-align:top; width:calc(33.33% - 40px); margin:20px; border-radius:6px; background:#449cca; color:#fff; padding:12px 0; text-align:center; font-size:16px; font-family:'truenoregular',Arial; cursor:pointer; transition:0.4s;}
#plusagenda:hover {background:#0b6fba;}
.mask {display:none;}
.highslide-dimming {background:#fff;}
.highslide-image, .highslide img {border-radius:6px;}
#hfoot {position:relative; width:100%; height:50px;}
#foot {position:relative; padding:20px 0; background:#03243d; width:100%;}
#meteo a {color:#fff;}
.text, .select, .textq {border:1px solid #ddd; font-family:'truenolight',Arial; font-size:14px; color:#222; background:#fff; padding:8px; border-radius:3px; margin:5px 0;}
.text {width:300px;}
.textq {border:0; margin-right:10px; width:100px;}
.rec {display:inline-block; font-size:18px;font-family:'truenolight',Arial;border:1px solid #ddd; width:150px;padding:8px; border-radius:3px;}
.bouton {font-family:'truenoregular',Arial;-webkit-appearance:none;border:0;background:#00b002;color:#fff;padding:5px 10px;font-size:18px;cursor:pointer;transition:0.3s all ease; border-radius:3px; }
.bouton:hover {background:#10d413;}
.rouge {background:#ff0005;font-size:14px; border-radius:3px; padding:3px 6px; display:inline-block; color:#fff;}
.rouge a {color:#fff;}
.g-recaptcha {margin-bottom:5px;}
#mdp {cursor:pointer;}
@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;}
.stabilo {background:#02c204; color:#fff; padding:2px; border-radius:2px; display:inline-block; margin:0 2px;}
#rec_actus .actu {width:calc(50% - 25px); margin:0 20px 20px 0; vertical-align:top;}
#rec_actus .filtheme:hover {text-decoration:none;}
@media screen and (max-width: 1460px)
  {
  #une,#deux {width:calc(50% - 20px); margin:0 10px 40px 10px;}
  .actu {margin-bottom:20px;}
  .actu .date, .pt {position:static; margin-left:10px;}
  #tb_marees td {font-size:14px;}
  .smax {width:calc(100% - 20px); padding-left:10px; padding-right:10px;}
  .tiers, #plusagenda {margin:10px; width:calc(33.33% - 20px);}
  #ariane {margin-bottom:10px;}
  .cinq {width:calc(20% - 20px); margin:10px; overflow:hidden;}
  }

@media screen and (max-width: 800px)
  {
  #accueil {font-size:20px;}
  h1 {font-size:28px; line-height:28px;}
  h2 {font-size:44px; line-height:44px; margin:0 0 20px 0;}
  #home {padding:20px 0;}
  h3 {font-size:30px; margin:20px 0; text-align:left;}
  .l20 {margin:0 10px;}
  #une, #deux {width:calc(100% - 20px); margin-bottom:20px;}
  #une img {width:100%;}
  #content, .tiers, #plusagenda {width:calc(100% - 20px);}
  .actu {padding:0; width:100%; background:none;}
  .actu img, #content .actu img {float:none; width:100%; margin:0;}
  .actu .pdfactu img {height:auto;}
  .actu:hover {background:none;}
  #actualites, .s {display: flex; display: -webkit-flex; flex-direction: column;}

  #droite {float:none; width:calc(100% - 40px); margin:20px 0; order:2;} 
  #actualites #droite {margin:20px 10px; width:calc(100% - 60px);order:1;}
  .rouge {margin-top:10px;}
  .right {float:none;}
  .text {font-size:16px;}
  #content_actus {order:2;}
  #content_page {order:1;}
  #actualites .actu {width:calc(100% - 20px); margin:10px 10px 20px 10px;}
  #rec_actus .actu {width:100%; margin:10px 0;}
  #showrec {width:calc(100% - 20px);}


  #nav {height:0; top:0; bottom:auto;}
  #hwaveb, #hwavev {bottom:0; position:fixed; top:auto;}
  #menu, .fixmenu {height:0 !important; padding:0;}
  .fixnav {position:absolute !important;}
  #logo {display:none;}
  #menu .s {padding:0;}
  #items {display:none; position:absolute; top:0; width:100%; min-height:100vh; background:#ffdf68;}
  #menur {display:block; position:fixed; bottom:5px; margin-left:calc(50% - 40px); text-align:center; z-index:99; line-height:60px; width:60px; height:60px; padding:10px; border-radius:50%; background:#0b6fba;}
  #backhome{display:block;}
  .item {display:block; padding:12px 10px; margin:10px; text-align:center;}
  .smenu {position:relative; padding-top:10px;}
  .sitem a:link, .sitem a:visited {display:block; text-align:center; width:auto; padding:8px; margin:2px 0;}
  #bwaveb, #bwavev {display:none;}
  #space, #hfoot {display:none;}
  #foot {padding-bottom:100px;}
  #tb_contact {width:100%;}
  #foot td, #home td {display:block; text-align:center !important; margin-bottom:5px; padding:0; width:100%;}
  .cinq {width:calc(100% - 20px); margin:20px 10px;}
  .cinq iframe {height:200px !important;}
  img, td img {max-width:100%; float:none;}
  .gp, .dp {float:none; margin:20px 0; display:block; width:100%;}
  table {padding:0;}
  .g-recaptcha {transform:scale(0.9);}
  .cell a {display:block;}
  }