/* Font */
@font-face {
    font-family: 'BebasNeueRegular';
    src: url('fonts/BebasNeue-webfont.eot');
    src: url('fonts/BebasNeue-webfont.eot?#iefix') format('embedded-opentype'), 
    url('fonts/BebasNeue-webfont.woff') format('woff'), 
    url('fonts/BebasNeue-webfont.ttf') format('truetype'), 
    url('fonts/BebasNeue-webfont.svg#BebasNeueRegular') format('svg');
    font-weight: normal;
    font-style: normal;}
    
html{font-size: 100%} 
body{background-color:#dddddd; margin-left: auto; margin-right: auto; margin-top: 0px; margin-bottom: 0px; text-align: center; font-family: Arial; font-size: 1em}

#content{width:920px; background-color:#ffffff; margin:auto; text-align:center}
#header{width:920px; height:64px; background-image:url("img/headerlarge3.gif"); background-repeat:none}
#search {height: 46px; width: 360px; margin-left: 550px; text-align:left; padding-top:18px}
#blocs{width:920px; background-color:#dddddd}
#blocgauche {width: 605px; display:inline-block; vertical-align:top; height: auto; padding: 0px 0; background-color:#ffffff}
#sidebar {width:300px; display:inline-block; vertical-align:top; background-color:#dddddd; margin-left:10px}
#article {padding-right:20px; padding-left:20px; margin-top:0px; margin-bottom:0px; padding-bottom:0px; padding-top:15px}
#footertest {background-color: #2E2E2E; box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.12); box-sizing: border-box; width: 100%; text-align: center; padding: 8px; margin-top: 20px; }
.col {width:280px; display:inline-block; vertical-align:top}

/* Sidebar */
#pub1 {width:300px; height:600px; margin-top:0px; margin-bottom:15px}

/* Pub Flottante */
#pubflottante {width:300px; height:560px; z-index: 0;}
#pubflottante.floatable {position: fixed; top: 0; z-index: 0;}

/* Page article */
.texte {text-align:left;}
.texte p {color:#4E4E4E; font-family:arial; font-size:0.9em; LINE-HEIGHT:1.5em; margin:0px; margin-bottom:1.4em; padding-top:0px}
.texte h1 {color:#336699; font-weight:normal; font-family:BebasNeueregular,arial; font-size:2.0em; line-height:1.23em; margin-top:0px; margin-bottom:0.30em}
.texte h2 {color:#3B3B3B; font-family:BebasNeueregular,arial; font-size:1.5em; font-weight:normal; margin-bottom:0.28em; line-height:1.42em} 
.texte h3 {color:#3B3B3B; font-family:BebasNeueregular,arial; font-size:1.3em; font-weight:normal; margin-bottom:0.28em; line-height:1.3em; padding-left:1.1em; background:url("img/arrow.png") left .2em no-repeat;}
.texte p a:link {color: #336699; text-decoration:underline; font-family:arial;} /* Liens article */
.texte p a:visited {color: #336699; text-decoration:underline; font-family:arial;}
.texte p a:hover {color: #336699; text-decoration:none; font-family:arial;}
.texte p a:active {color: #336699; text-decoration:underline; font-family:arial;}
.texte p.qr {color:#4E4E4E; font-family:arial; font-size:1em; font-style:italic; font-weight:bold; line-height:1.3em}
.texte p.com {color:#4E4E4E; font-family:arial; font-size:0.9em; LINE-HEIGHT:1.8em; margin:0px; padding-top:0px; padding-left:1.4em; background:url("img/comment.gif") left 0.2em no-repeat;}
p.desc {font-family:arial; font-size:14px; color:#333; text-align:center; font-style:italic; line-height:20px; padding-bottom:0px}
#toggle{height:auto;}
#footertest p {font-family:arial; font-size:14px; color:#bbbbbb}

/* Page categorie */
.categorie p {text-align:left; color:#4E4E4E; font-family:arial; font-size:0.9em; LINE-HEIGHT:1.3em; margin:0px; margin-bottom:0.9em; padding-top:0px; }
.categorie h1 {text-align:left; font-family:BebasNeueregular,arial; color:#4E4E4E; font-size:1.8em; font-weight:normal; margin-bottom:0.45em; margin-top:0px; line-height:1.23em; border-bottom: 0.04em solid #ABA8A8}
.categorie h2 {text-align:left; color:#3B3B3B; font-family:BebasNeueregular,arial; font-size:1.5em; font-weight:normal; margin-bottom:0.12em; line-height:1.42em}
.categorie p a:link {color: #336699; text-decoration:none; font-family:arial;} 
.categorie p a:visited {color: #336699; text-decoration:none; font-family:arial;}
.categorie p a:hover {color: #336699; text-decoration:underline; font-family:arial;}
.categorie p a:active {color: #336699; text-decoration:none; font-family:arial;}
.categorie p.qr {color:#4E4E4E; font-family:arial; font-size:1em; font-style:italic; font-weight:bold; line-height:1.2em}
.categorie p.srub {color:#3B3B3B; font-family:arial; font-size:0.9em; font-style:italic; font-weight:bold; line-height:1.2em; margin-bottom:0.6em}

/* Page accueil */
.accueil p {text-align:left; color:#4E4E4E; font-family:arial; font-size:0.9em; line-height:1.4em; margin:0px; margin-bottom:1.15em; padding-top:0px}
.accueil h1 {text-align:left; font-family:BebasNeueregular,arial; color:#4E4E4E; font-size:1.7em; font-weight:normal; margin-bottom:0.1em; margin-top:0.4em; line-height:1.25em; border-bottom: 0.04em solid #ABA8A8}
.accueil h2 {text-align:left; font-family:BebasNeueregular,arial; font-size:1.5em; font-weight:normal; margin-bottom:0.12em; line-height:1.2em}
.accueil h2 a:link {color:#336699; text-decoration:none;}
.accueil h2 a:visited {color:#336699; text-decoration:none;}
.accueil h2 a:active {color:#336699; text-decoration:none;}
.accueil h2 a:hover {color:#000000; text-decoration:none;}
.accueil h3 {text-align:center; font-family:BebasNeueregular,arial; font-size:1.3em; font-weight:normal; margin-bottom:0.12em; margin-top:0.6em; line-height:1.2em}
.accueil h3 a:link {color:#336699; text-decoration:none;}
.accueil h3 a:visited {color:#336699; text-decoration:none;}
.accueil h3 a:active {color:#336699; text-decoration:none;}
.accueil h3 a:hover {color:#000000; text-decoration:none;}

.sep {border-bottom: 0.07em solid #F2F2F2;}
.cols {width:272px; display:inline-block; vertical-align:top}
.cols2 {width:176px; display:inline-block; vertical-align:top; padding-top:17px; margin-top:5px}

/** --- INDEX: Une --- **/
.saturate:hover{filter: saturate(150%); -webkit-filter: saturate(150%); -moz-filter: saturate(150%); -o-filter: saturate(150%); -ms-filter: saturate(150%);}
.index {width:565px; height:auto; background-color:#212121; text-align:center; padding-top:10px; padding-bottom:10px}
.index a {}
.index a:link {font-family: BebasNeueregular,verdana; font-size:23px; font-weight:normal; color:#FBFAFA; text-decoration:none;}
.index a:visited {color:#FBFAFA; text-decoration:none;}
.index a:active {color:#FBFAFA; text-decoration:none;}
.index a:hover {color:#FBFAFA; text-decoration:underline;}
.spacer2 {height: 4px;}
#une {width:565px; overflow:hidden} 

/* Police & liens footer */
#footertest p a:link {color:#bbbbbb; text-decoration:none;}
#footertest p a:visited {color:#bbbbbb; text-decoration:none;}
#footertest p a:active {color:#bbbbbb; text-decoration:none;}
#footertest p a:hover {color:#bbbbbb; text-decoration:underline;}

/* Temoignez polices */
#temoigner {width:300px; background-color:#ffffff; padding-top:0px; padding-bottom:1px}
.tem p {text-align:left; color:#4E4E4E; font-family:arial; font-size:0.9em; line-height:18px; margin-top:0.6em; padding-bottom:0.45em}
.tem h3 {color:#336699; font-weight:normal; font-family:BebasNeueregular,arial; font-size:1.5em; line-height:1.3em; margin-top:0px; margin-bottom:0px}
.tem a:link {color:#ffffff; text-decoration:none;}
.tem a:visited {color:#ffffff; text-decoration:none;}
.tem a:active {color:#ffffff; text-decoration:none;}
.tem a:hover {color:#ffffff; text-decoration:none;}
.tem p.marges {margin-right:15px; margin-left:40px;}

/* Box FAQ */
.box {background-color:#BBE4F9; padding:1em; border-radius: 5px; margin-bottom:1em}

/* Images */
.imgintro {margin-bottom:15px; text-align:center} /* Image intro */
.img {text-align:center; margin-top:0.25em; MARGIN-BOTTOM:0.8em;} /* Image article large , 0.5em */
.img1 {float: left; Margin-right:14px; Margin-bottom:0px; Margin-top:6px;} 
.img2 {float: left; Margin-right:14px; Margin-bottom:0px; Margin-top:6px;} /* Image gauche de catégorie 172x100px */
.img3 {float: right; Margin-left:10px; Margin-bottom:0px; Margin-top:4px;} /* Petite image article fottante */
.imgsearch {float:left; margin-top:3px; margin-right:5px} /* Loupe */
.img4 {text-align:center; margin-top:0.25em; margin-bottom:0.5em;} /* Image temoignage */
.space1 {margin-top:5px}

/* Formulaires */
.form {font-family: arial; font-size:1.1em; color:#4E4E4E; border:none;}

/* Input */
input {font-family: arial; font-size:1.1em; color:#4E4E4E}
textarea {font-family: arial; color:#4E4E4E; width:560px;}
.styleinput {border:0; font-size:1em; margin-top:0.6em; text-align:center;}

/* Boutons */
.btn {-webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 2px; font-family: arial; color: #ffffff; font-size:0.8em; font-weight:bold; background:#3498db; padding: 5px 10px 3px 10px; text-decoration: none; border:none;}
.btn:hover {background: #A09F9D; text-decoration: none;}
.btn2 {-webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 2px; font-family: Arial; color: #ffffff;  background: #3498db; padding: 8px 16px 8px 16px; text-decoration: none}
.btn2:hover {background: #A09F9D; text-decoration: none;}
.btn3 {-webkit-border-radius: 2; -moz-border-radius: 2; border-radius: 10px; font-family: Arial; font-weight:bold; font-size:1.3em; color: #ffffff;  background: #3498db; padding: 8px 16px 8px 16px; text-decoration: none}
.btn3:hover {background: #A09F9D; text-decoration: none;}

/* Puces */
#article ul {padding:0; padding-left:20px; margin-top:11px; margin-bottom:20px;}
#article ul li {font-family:Arial; font-size:0.9em; line-height:1.4em; color:#4E4E4E; text-align:left; margin:0px; padding:2px; padding-left:18px; list-style-type:none; background-image: url("img/ptpetit.gif"); background-repeat: no-repeat; background-position: 0 4px;}
#article ul li a:link, a:visited, a:active, a:hover {color:#336699; text-decoration:none;}
#article ul li a:hover {color:#336699; text-decoration:underline;}

#article ol {padding:0; padding-left:20px; margin-top:11px; margin-bottom:20px;}
#article ol li {font-family:Arial; font-size:0.9em; line-height:1.4em; color:#4E4E4E; text-align:left; margin:0px; padding:2px; padding-left:4px; }
#article ol li a:link, a:visited, a:active, a:hover {color:#336699; text-decoration:none;}
#article ol li a:hover {color:#336699; text-decoration:underline;}

/** Divers **/
.brd {display:inline-block; width:276px; background-color:#FBFAFA; border:1px solid #B2B2B1; margin-bottom:5px}
.brd2 {background-color:#FBFAFA; border:1px solid #B2B2B1; padding:10px}
.brd3 {background-color:#FBFAFA; border:1px solid #B2B2B1; padding:10px; padding-bottom:0px; padding-left:0px; margin-bottom:12px}
.brd4 {background-color:#FBFAFA; border:0; padding:10px; padding-top:40px;}

/** --- YT --- **/
.video-conteneur {margin-bottom:20px;}

/** Scroll to the top **/
.scrollToTop {width:32px; height:32px; padding:10px; background: whiteSmoke; position:fixed; bottom:15px; right:0px; display:none; background: url('img/up.png') no-repeat 0px 20px;  z-index:2;}

/* Menu */
/*@import url(http://fonts.googleapis.com/css?family=Open+Sans:700);*/
#cssmenu {
  background: #ffffff;
  width: auto;
}
#cssmenu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  line-height: 1;
  display: block;
  zoom: 1;
}
#cssmenu ul:after {
  content: " ";
  display: block;
  font-size: 0;
  height: 0;
  clear: both;
  visibility: hidden;
}
#cssmenu ul li {
  display: inline-block;
  padding: 0;
  margin: 0;
}
#cssmenu.align-right ul li {
  float: right;
}
#cssmenu.align-center ul {
  text-align: center;
}
#cssmenu ul li a {
  color: #888888;
  text-decoration: none;
  display: block;
  padding: 20px 25px;
  font-family: arial; 
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.9em;
  position: relative;
  -webkit-transition: color .25s;
  -moz-transition: color .25s;
  -ms-transition: color .25s;
  -o-transition: color .25s;
  transition: color .25s;
}
#cssmenu ul li a:hover {
  color: #333333;
}
#cssmenu ul li a:hover:before {
  width: 100%;
}
#cssmenu ul li a:after {
  content: "";
  display: block;
  position: absolute;
  right: -3px;
  top: 19px;
  height: 6px;
  width: 6px;
  background: #ffffff;
  opacity: .5;
}
#cssmenu ul li a:before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 0;
  background: #3498DB; /*398908*/
  -webkit-transition: width .25s;
  -moz-transition: width .25s;
  -ms-transition: width .25s;
  -o-transition: width .25s;
  transition: width .25s;
}
#cssmenu ul li.last > a:after,
#cssmenu ul li:last-child > a:after {
  display: none;
}
#cssmenu ul li.active a {
  color: #333333;
}
#cssmenu ul li.active a:before {
  width: 100%;
}
#cssmenu.align-right li.last > a:after,
#cssmenu.align-right li:last-child > a:after {
  display: block;
}
#cssmenu.align-right li:first-child a:after {
  display: none;
}




/** TAILLE ECRAN > 769px **/
@media screen and (min-width: 769px) {
/** --- PUBS --- **/
#pubfooter-xs {display: none}
#pubheader-md-lg {height:105px; text-align:center; background-color:#dddddd; padding-top:15px}
#pubcontenu1-sm {display: none}
#pubcontenu1-xs {display: none}
#pubcontenu2-sm {display: none}
#pubcontenu2-xs {display: none}
#top-mobile {display:none}
}
	
/** Taille ECRAN 351 à 768px **/
@media screen and (min-width: 351px) and (max-width: 768px) {
#pubfooter-xs {margin:auto; margin-top: 22px; text-align:center}
#pubheader-md-lg {display: none}
#pubcontenu1-sm {margin-top: 14px;}
#pubcontenu1-xs {display: none}
#pubcontenu2-sm {margin-top: 20px; margin-bottom: 20px}
#pubcontenu2-xs {display: none}
.boxindex {width: 100%; height: 100%; display: inline-block;}
.cols {float: left; width: 47%; height: 100%; text-align: left;}
}

/** TAILLE ECRAN < 350px **/
@media screen and (max-width: 350px) {
/** --- PUBS --- **/
#pubfooter-xs {margin:auto; margin-top: 22px; text-align:center}
#pubheader-md-lg {display: none}
#pubcontenu1-xs {margin-top: 14px;}
#pubcontenu1-sm {display: none}
#pubcontenu2-xs {margin-top: 20px; margin-bottom: 20px}
#pubcontenu2-sm {display: none}
.boxindex {width: 100%; height: 100%; display: inline-block;}
.cols {float: left; text-align: left; width: 100%; height: 100%;}
}
	
/** TAILLE ECRAN < 768px **/
@media screen and (max-width: 768px) {

/** --- DIV ID --- **/
#header {display: none}
#cssmenu {display: none}
#logo {display: none}
#top-mobile {width:100%; height: 80px; margin: 0px; padding: 0px; text-align:center; background-color:#336699;}
#logo-mobile {width:90%; float:left; margin-top:18px; text-align:center}
#sidebar {display: none}
#content {width: 100%;}
#blocs {width: 100%}
#blocgauche {width: 100%}
#article {padding-right: 10px; padding-left: 10px; padding-top: 0px; padding-bottom: 8px}

/** --- IMAGES --- **/
.imgintro {width: 100%; height:auto; margin-bottom:10px; margin-top:15px}
.img {width: 100%; height:auto;}
.imgleft {float:left; margin-right:14px; margin-top:4px; margin-bottom:-2px;}
.imgresp {width:100%}
.img1 {float: left; Margin-right:14px; Margin-bottom:0px; Margin-top:6px;} 
.img2 {width:100%; Margin-right:14px; Margin-bottom:12px; Margin-top:6px; max-width:172px}

/** --- .CLASS --- **/
.col {width:100%; display:inline-block; vertical-align:top}
.sep {border-bottom: 0.07em solid #F2F2F2; padding-bottom:14px}
.brd {width:100%}
.brd3 {padding-bottom:10px;}

/** --- POLICES --- **/
.h1grand {padding-left:10px;}    /** Si pas d'img intro : padding-bottom:0px; margin-bottom:0px **/
.texte h2 {line-height:1.42em}
.texte h3 {line-height:1.3em; background:url("img/arrow.png") left .2em no-repeat;}
.texte p {text-align:left; font-size:0.9em; LINE-HEIGHT:1.5em; margin:0px; padding-top:0px; margin-bottom:1.4em}
.navig p {line-height:20px; font-size: 14px;}
#footertest p {font-family:arial; font-size:13px; color:#bbbbbb; line-height:20px}
p.desc {font-family:arial; font-size:14px; color:#333; text-align:center; font-style:italic; line-height:20px; padding-bottom:5px}
.categorie h1 {margin-top:10px; line-height:1.23em}
.categorie p.srub {margin-bottom:0.6em; margin-top:14px}

/* Puces */
#article ul {padding:0; padding-left:20px; margin-top:0px; margin-bottom:0px;}

/** --- YT responsive --- **/
.video-conteneur {position:relative; padding-bottom:56.25%; height:0; overflow:hidden; margin-bottom:20px;}
.video-conteneur iframe, .video-conteneur object, .video-conteneur embed {position:absolute; top:0; left:0; width:100%; height:100%;}

/** --- Index --- **/
#une {width:100%;  padding-top:10px} 
.index {width:100%; height:auto;}

/** --- Scroll to the top Button  Mobile --- **/
.scrollToTop {width:32px; height:32px; padding:10px; background: whiteSmoke; position:fixed; bottom:20px; right:5px; display:none; background: url('img/up.png') no-repeat 0px 0px; }

/** --- Menu Mobile --- **/
.menu {
  padding: 0;
  margin: 0;
  width: 100%;
  min-height: 100%;
  position: relative;
  line-height: 70px;
  font-size: 14px;
  background: rgba(0, 0, 0, 0.6); /** Fond general 0,8**/
}

.menu a.active-parent {
  background: #313131;
  color: white;
}

.menu > ul {
  margin: 0;
  padding: 0;
}

.menu > ul > li > a {
  padding: 0 30px;
}

.menu__item {
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  line-height: 45px; /* hauteur cellules */
  position: relative;
  list-style: none;
}

.menu__item a .arrow {
  transform: rotate(-45deg);
  width: 50px;
  text-align: center;
  position: absolute;
  right: 0;
  display: inline-block;
  transition: transform 0.3s;
}


.menu__item a .arrow:before {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  content: '';
}

.menu__item a .arrow.open {
  transform: rotate(45deg);
}

.menu__item a {
  font-family: arial, sans-serif;
  font-size: 14px;
  text-decoration: none;
  transition: all 0.3s;
  display: block;
  position: relative;
  font-weight: 300 !important;
  transform: translate(0, 0) !important;
  background: #212121;
  color: white;
}

.menu__item a:hover {
  background: rgba(255, 255, 255, 1);
  color: #000000; /* Couleur hover menu */
}

.menu__item a:hover .arrow:before {
  border: solid #000000;
  border-width: 0 2px 2px 0;
}

.menu__link {
  font-weight: 300 !important;
  transform: translate(0, 0) !important;
}

.menu__sub-menu {
  margin: 0;
  padding: 0;
  text-align: left;
  background: #000000;
  pointer-events: none;
  top: 0;
  display: none;
  opacity: 1;
  visibility: visible;
  position: relative;
}

.menu__sub-menu a .arrow {
  display: inline-block;
  margin-left: 10px;
  transform: rotate(-45deg);
}

.menu__sub-menu a .arrow:before {
  border: solid white;
  border-width: 0 2px 2px 0;
  display: inline-block;
  padding: 2px;
  content: '';
}

.menu__sub-menu.open {
  visibility: visible;
  opacity: 1;
  display: block;
  pointer-events: auto;
  transform: translate(0, 0);
}

.menu__sub-menu__item {
  display: block;
  width: 300px;
  position: relative;
  min-width: 100%;
}

.menu__sub-menu__item a {
  display: block;
  font-size: 12px; /* Police sous menu*/
  font-weight: normal;
  text-align: left;
  background: #464545;
  color: white;
}

.menu__sub-menu__item a:hover {
  background: #212121;
  color: white;
  font-weight: normal;
}

.menu__sub-menu__item a:hover .arrow:before {
  border: solid white;
  border-width: 0 2px 2px 0;
}

.menu__sub-menu .menu__sub-menu {
  top: 0;
  left: 0;
  position: relative;
}

.menu__sub-menu .menu__sub-menu.open {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

.menu__sub-menu > li > a {
  padding-left: 2em;
}

.menu__sub-menu li ul a {
  padding-left: 3em;
}

.menu__sub-menu li ul li ul a {
  padding-left: 4em;
}

.menu__sub-menu li ul li ul li ul a {
  padding-left: 5em;
}

.menu-button {
  padding: 10px;
  background: #212121; /** linear-gradient(-90deg, #00e5e2, #464545); **/
  border: none;
  cursor: pointer;
  transition: 0s;
  border-radius: 2px;
  width: auto;
  position: fixed;
  top: 14px;
  right: 14px;
}

.burger-icon {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.burger-icon, .burger-icon::before, .burger-icon::after {
  display: block;
  width: 30px;
  height: 4px;
  background-color: white;
  outline: 1px solid transparent;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.burger-icon::before, .burger-icon::after {
  position: absolute;
  content: "";
}

.burger-icon::before {
  top: -10px;
}

.burger-icon::after {
  top: 10px;
}

.menu.open .burger-icon {
  position: relative;
  margin-top: 10px;
  margin-bottom: 10px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.menu.open .burger-icon, .menu.open .burger-icon::before, .menu.open .burger-icon::after {
  display: block;
  width: 30px;
  height: 4px;
  background-color: #222;
  outline: 1px solid transparent;
  -webkit-transition-property: background-color, -webkit-transform;
  -moz-transition-property: background-color, -moz-transform;
  -o-transition-property: background-color, -o-transform;
  transition-property: background-color, transform;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

.menu.open .burger-icon::before, .menu.open .burger-icon::after {
  position: absolute;
  content: "";
}

.menu.open .burger-icon::before {
  top: -10px;
}

.menu.open .burger-icon::after {
  top: 10px;
}

.menu-button.is-active .burger-icon {
  background-color: transparent;
}

.menu-button.is-active .burger-icon::before {
  -webkit-transform: translateY(10px) rotate(45deg);
  -moz-transform: translateY(10px) rotate(45deg);
  -ms-transform: translateY(10px) rotate(45deg);
  -o-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}

.menu-button.is-active .burger-icon::after {
  -webkit-transform: translateY(-10px) rotate(-45deg);
  -moz-transform: translateY(-10px) rotate(-45deg);
  -ms-transform: translateY(-10px) rotate(-45deg);
  -o-transform: translateY(-10px) rotate(-45deg);
  transform: translateY(-10px) rotate(-45deg);
}

.menu-content {
  position: fixed;
  height: 100%;
  transform: translate(-100%, 0);
  width: 0;
  overflow: hidden;
  z-index: 1;
}

.menu-content.open {
  transform: translate(0, 0);
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.62, 0.04, 0.82, 0.13);
  width: 60%;
  box-shadow: 5px 5px 15px 0 rgba(0, 0, 0, 0.1);
  min-height: 100% !important;
}

.menu-content.close {
  transform: translate(-100%, 0);
  transition: all 0.5s;
  transition-timing-function: cubic-bezier(0.62, 0.04, 0.82, 0.13);
  text-shadow: none;
  width: 0;
}

.page-content {
  position: relative;
  width: 80%;
  padding: 25% 10%;
}

.page-content__text {
  padding: 30px;
  text-align: center;
  font-size: 14px;
  line-height: 1.5em;
  color: white;
  background: linear-gradient(-90deg, rgba(0, 229, 226, 0.2), #464545);
}

.page-content__text h1 {
  font-size: 30px;
  line-height: 30px;
  color: white;
}


/* La RECHERCHE dans Menu Mobile */
* {box-sizing: border-box;}
form.example input[type=text] {padding: 10px; font-size: 17px; border: 0px solid grey; float: left; width: 80%; background: #FFFFFF;}
form.example button {float: left; width: 20%; padding: 10px; background: #66B8E5; color: white; font-size: 17px; border: 0px solid grey; border-left: none; cursor: pointer;} /* submit button */
form.example button:hover {background: #0b7dda;}
form.example::after {content: ""; clear: both; display: table;} /* Clear floats */


} /** FIN TAILLE ECRAN < 768px **/



/* Cookies Silktide */
.cc-window{opacity:1;transition:opacity 1s ease}.cc-window.cc-invisible{opacity:0}.cc-animate.cc-revoke{transition:transform 1s ease}.cc-animate.cc-revoke.cc-top{transform:translateY(-2em)}.cc-animate.cc-revoke.cc-bottom{transform:translateY(2em)}.cc-animate.cc-revoke.cc-active.cc-bottom,.cc-animate.cc-revoke.cc-active.cc-top,.cc-revoke:hover{transform:translateY(0)}.cc-grower{max-height:0;overflow:hidden;transition:max-height 1s}
.cc-link,.cc-revoke:hover{text-decoration:underline}.cc-revoke,.cc-window{position:fixed;overflow:hidden;box-sizing:border-box;font-family:Arial,Helvetica,Calibri,sans-serif;font-size:13px;line-height:1.5em;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;z-index:9999}.cc-window.cc-static{position:static}.cc-window.cc-floating{padding:2em;max-width:24em;-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner{padding:1em 1.8em;width:100%;-ms-flex-direction:row;flex-direction:row}.cc-revoke{padding:.5em}.cc-header{font-size:18px;font-weight:700}.cc-btn,.cc-close,.cc-link,.cc-revoke{cursor:pointer}.cc-link{opacity:.8;display:inline-block;padding:.2em}.cc-link:hover{opacity:1}.cc-link:active,.cc-link:visited{color:initial}.cc-btn{display:block;padding:.4em .8em;font-size:.9em;font-weight:700;border-width:2px;border-style:solid;text-align:center;white-space:nowrap}.cc-banner .cc-btn:last-child{min-width:140px}.cc-highlight .cc-btn:first-child{background-color:transparent;border-color:transparent}.cc-highlight .cc-btn:first-child:focus,.cc-highlight .cc-btn:first-child:hover{background-color:transparent;text-decoration:underline}.cc-close{display:block;position:absolute;top:.5em;right:.5em;font-size:1.6em;opacity:.9;line-height:.75}.cc-close:focus,.cc-close:hover{opacity:1}
.cc-revoke.cc-top{top:0;left:3em;border-bottom-left-radius:.5em;border-bottom-right-radius:.5em}.cc-revoke.cc-bottom{bottom:0;left:3em;border-top-left-radius:.5em;border-top-right-radius:.5em}.cc-revoke.cc-left{left:3em;right:unset}.cc-revoke.cc-right{right:3em;left:unset}.cc-top{top:1em}.cc-left{left:1em}.cc-right{right:1em}.cc-bottom{bottom:1em}.cc-floating>.cc-link{margin-bottom:1em}.cc-floating .cc-message{display:block;margin-bottom:1em}.cc-window.cc-floating .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-banner{-ms-flex-align:center;align-items:center}.cc-banner.cc-top{left:0;right:0;top:0}.cc-banner.cc-bottom{left:0;right:0;bottom:0}.cc-banner .cc-message{-ms-flex:1;flex:1}.cc-compliance{display:-ms-flexbox;display:flex;-ms-flex-align:center;align-items:center;-ms-flex-line-pack:justify;align-content:space-between}.cc-compliance>.cc-btn{-ms-flex:1;flex:1}.cc-btn+.cc-btn{margin-left:.5em}
@media print{.cc-revoke,.cc-window{display:none}}@media screen and (max-width:900px){.cc-btn{white-space:normal}}@media screen and (max-width:414px) and (orientation:portrait),screen and (max-width:736px) and (orientation:landscape){.cc-window.cc-top{top:0}.cc-window.cc-bottom{bottom:0}.cc-window.cc-banner,.cc-window.cc-left,.cc-window.cc-right{left:0;right:0}.cc-window.cc-banner{-ms-flex-direction:column;flex-direction:column}.cc-window.cc-banner .cc-compliance{-ms-flex:1;flex:1}.cc-window.cc-floating{max-width:none}.cc-window .cc-message{margin-bottom:1em}.cc-window.cc-banner{-ms-flex-align:unset;align-items:unset}}
.cc-floating.cc-theme-classic{padding:1.2em;border-radius:5px}.cc-floating.cc-type-info.cc-theme-classic .cc-compliance{text-align:center;display:inline;-ms-flex:none;flex:none}.cc-theme-classic .cc-btn{border-radius:5px}.cc-theme-classic .cc-btn:last-child{min-width:140px}.cc-floating.cc-type-info.cc-theme-classic .cc-btn{display:inline-block}
.cc-theme-edgeless.cc-window{padding:0}.cc-floating.cc-theme-edgeless .cc-message{margin:2em 2em 1.5em}.cc-banner.cc-theme-edgeless .cc-btn{margin:0;padding:.8em 1.8em;height:100%}.cc-banner.cc-theme-edgeless .cc-message{margin-left:1em}.cc-floating.cc-theme-edgeless .cc-btn+.cc-btn{margin-left:0}