html,body {margin:0; padding:0; width:100%; height:100%;}
body {font-family:Graphik,Arial; font-size:16px; background:#fff; color:#444;}
.clear {clear:both;}
.s {margin:0 auto; max-width:1400px;}
#facebook, #tel {display:none; z-index:98;}
#top {position:relative; margin:0 auto; max-width:1400px; height:140px; font-size:0; padding:10px 20px; text-align:center; color:#555; cursor:default;}
#top span {font-size:24px; font-weight:bold; display:block;}
#top #g, #top #c, #top #d {display:inline-block; vertical-align:middle; width:33.33%; font-size:16px;}
#top #g {text-align:left;}
#top #d {text-align:right;}
#menu {position:relative; z-index:98; width:100%; font-size:0; text-align:center;}
.fixmenu {position:fixed !important; top:20px;}
.fleche {margin:0 0 5px 5px; font-size:14px;}
.item {position:relative; font-family:Clementine; font-size:24px; display:inline-block; vertical-align:middle; background-color: var(--my-color-var); border-radius:15px; margin:0 10px; transition:0.3s all ease;}
.item a:link, .item a:visited {color:#fff; display:block; padding:20px;}
.item:hover, .on {transform:translateY(-10px);}
.smenu {position:absolute; display:none; z-index:99; margin-left: calc(50% - 110px); padding-top: 12px; padding-bottom:10px;}
.sitem a:link, .sitem a:visited {display:inline-block; width:200px; text-align:left; font-size:18px; color:#fff; margin-bottom:4px; cursor:pointer; background-color: var(--my-color-var); padding:10px; border-radius:10px;}
#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:#0099ff;}
#loupe {background:#444; padding:20px; cursor:pointer;}
#loupe .smenu {padding-top:30px;}
#recherche {width:200px; padding:10px; border-radius:10px;background:#444;}
#recherche .text {width:150px; border:0; font-family:Graphik,Arial; font-size:16px; padding:4px; border-radius:3px; color:#0761a2; -webkit-appearance:none; margin-right:5px;}
.ritem {display:inline-block; text-align:left; font-size:18px; color:#fff; margin-bottom:4px; cursor:pointer; background-color: var(--my-color-var); padding:10px; border-radius:10px; margin-bottom:10px;}
.ritem a:link, .ritem a:visited {color:#fff;}
#intro {position:relative; width:100%; overflow:hidden; margin-top:-34px; max-height:550px; z-index:50;}
.fixintro {margin-top:30px !important;}
.fixdiapo {height:350px;}
.swiper-slide img {width:100%;}
.swiper-container {overflow: hidden; z-index: 1;-webkit-transform: translateZ(0);}
.swiper-wrapper {position: relative; z-index: 1; display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; -o-transition-property: -o-transform; -ms-transition-property: -ms-transform; transition-property: transform;  -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box; pointer-events:none;}
.swiper-container-android .swiper-slide, .swiper-wrapper { -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(0px, 0, 0); -o-transform: translate(0px, 0px); -ms-transform: translate3d(0px, 0, 0); transform: translate3d(0px, 0, 0);}
.swiper-slide {float: left;-webkit-flex-shrink: 0; -ms-flex: 0 0 auto; flex-shrink: 0; width: 100%; position: relative; overflow:hidden; z-index:1;}
.pagination {position:absolute; text-align:center; bottom:120px; width:100%; z-index:98;}
.fixdiapo .pagination {bottom:80px;}
.swiper-pagination-bullet {display:inline-block;width:14px;height:14px;border:2px solid #fff;margin:0 5px;cursor:pointer; border-radius:50%;}
.swiper-pagination-bullet-active {background:#fff;border:2px solid #fff;}
.minidiapo {border-radius: 10px; width:100%; height:100%;}
.minidiapo .pagination {bottom:10px;}
#svg {position:relative; width:100%; margin-top:-100px; z-index:55;}
#page {position:relative; margin:-120px auto 20px auto; max-width:1400px; z-index:60; min-height:400px; padding:0 10px;}
#page img, iframe {vertical-align:top; margin:0; border-radius:10px;}
.int {margin-top:0 !important;}
#page h1 {font-size:16px; font-weight:normal; display:block; margin:0 10px 10px 10px; font-family:Graphik,Arial;}
.pdf {vertical-align:middle !important;}
.info {display:none; text-align:justify;}
form {display:inline;}
.text, .textarea, .select {border: 1px solid #ddd; font-family:Graphik,Arial; font-size:16px; padding:4px; border-radius:5px; color:#0761a2;}
.text, .textarea {-webkit-appearance:none;}
.bouton, .mbouton {display:inline-block; font-family: Clementine,Arial; font-size:26px; color:#fff; background: #02c204; border:0; border-radius:5px; padding:8px; cursor:pointer; -webkit-appearance:none;}
.mbouton {font-size:16px; padding:4px; font-weight:bold;}
.erreur {display:inline-block; background:#e00005; color:#fff; padding:4px; border-radius:5px;font-size:16px;}
textarea:focus, input:focus{outline: none;}
.stabilo {background:#ffd40d; padding:2px; border-radius:5px; display:inline-block; margin:0 2px;}
.same {display:inline-block; margin:0 5px; background-color: var(--my-color-var); color:#fff; padding:4px; border-radius:5px;}
#ariane {position:relative; padding:10px 0; background-color: var(--my-color-var); color:#fff;}
#ariane .s {max-width:1380px; padding:0 20px;}
#bas {position:relative; padding:15px 10px; background:#222; color:#fff;}
#bas a:link, #bas a:visited, #bas a:hover, .same a:link, .same a:visited, .same a:hover {color:#fff;}
a{outline:none;}
a:link{color:#444;text-decoration:none}
a:visited{color:#444;text-decoration:none}
a:hover{color:#111;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: 'Graphik';
    src: url('/fonts/graphik.woff2') format('woff2'),
        url('/fonts/graphik.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Clementine';
    src: url('/fonts/clementine.woff2') format('woff2'),
        url('/fonts/clementine.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@media screen and (max-width:1440px)
  {
  .text, .textarea {width:calc(100% - 8px) !important;}
  .item {font-size:20px; margin:0 5px;}
  }
@media screen and (max-width:1250px)
  {
  .item {font-size:16px; margin:0 5px;}
  }
@media screen and (max-width:1150px)
  {
  .item {font-size:14px; margin:0 5px;}
  }
@media screen and (max-width:1000px)
  {
  #facebook {position:absolute; top:40px; display:block; right:15px;}
  #tel {position:absolute; top:40px; display:block; left:15px;}
  .pagination, #svg {display:none;}
  #top {height:auto;}
  #top #g, #top #d {display:none;}
  #top #c {width:100%;}
  #intro {margin-top:0;}
  .fixdiapo {height:auto;}
  #page {margin:10px 0;}
  .int {margin-top: 10px !important;}
  #menu {display:none; top:0; left:0; right:0; position:absolute; background:rgba(255,255,255,0.7); height:100%;}
  .item {display:block; margin:10px 20px; font-size:24px;}
  .item:hover, .on {transform:none;}
  .smenu {position:relative; top:0px !important; padding:0 10px 10px 10px; margin:0;}
  .sitem a:link, .sitem a:visited {display:block; width:auto; text-align:center; background:#fff; color:#444; padding:15px 10px; font-size:18px; margin:0 0 4px 0;}
  #menur {display:block;}
  #bas {padding:10px;}
  #bas a {color:#fff;}
  table {width:100%;}
  td {display:block;}
  .text, .textarea {width:calc(100% - 8px) !important;}
  .same {display:block; margin:4px 0 0 0;padding: 10px;}
  #loupe .smenu {padding:0;}
  #recherche {width:auto;}
  #recherche .text {padding:8px; width:calc(100% - 70px) !important;}
  #recherche .mbouton {padding:8px;}
  .ritem {display:block;}
  #loupe img {display:none;}
  #sloupe {display:block;}
  .minidiapo .pagination {display:block;}
  }