@font-face {
    font-family: 'Rockwell';
    src: url('../fonts/ufonts.com_rockwell.eot');
    src: url('../fonts/ufonts.com_rockwell.eot') format('embedded-opentype'),
         url('../fonts/ufonts.com_rockwell.woff') format('woff'),
         url('../fonts/ufonts.com_rockwell.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

html,body {
  height:100%;
  width:100%;
  font-family:'Rockwell';
  background-color: #9ac8c3;
}
#menu_overlay{
  -webkit-transition: opacity 2s linear;
   transition: opacity 2s linear;
}
.sommaire .inner-wrap,
.sommaire .inner-wrap > .container-fluid,
.sommaire .inner-wrap > .container-fluid >.row,
.sommaire .inner-wrap > .container-fluid >.row > .col-xs-12,
.sommaire .inner-wrap > .container-fluid >.row > .col-xs-12 > .row ,
.sommaire .inner-wrap > .container-fluid >.row > .col-xs-12 > .row ,
.sommaire .inner-wrap > .container-fluid >.row > .col-xs-12 > .row > .col-xs-12,
.sommaire #board {height:100%;width:100%}

.no-svg svg{display:none!important;}
.no-svg .retour{display:none}/* pas de lien vers la carte si on sait pas la voir */

h1{ margin-top:40px;}

body.article .close{
display:none;
}
svg.mots4 {
height:22px;
width:80px}

.modal-lg{ width:90%;}
body.rubrique.rubrique1.modal-open  div.modal-header div.logo a.lien svg.bonhomme{ float:left;}
.inner-wrap {min-height:100%}
body.mot h1{ margin: 40px 0 30px 0;}
#navbar {max-width:500px;width:50%}

#board {position:relative;overflow:hidden;}

#main{width:4000px;height:2659px;position:absolute;transform:matrix(1,0,0,1,-500,-800);}
/* webview chrome forcer height dans les svg*/

a.move.left{position:absolute;top:50%;left:20px;z-index:1000;
-webkit-transform:rotate(-180deg) ;
-moz-transform:rotate(-180deg) ;
-o-transform:rotate(-180deg) ;
-ms-transform:rotate(-180deg) ;
transform:rotate(-180deg) ;
color:#fff; cursor:move;}
a.move.right{cursor:move; position:absolute;top:50%;right:20px;z-index:1000; color:#fff;  }
a.move.up{position:absolute;top:0;left:50%;z-index:1000;

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform:rotate(-90deg);
color:#fff; cursor:move;}
a.move.down{position:absolute;bottom:20px;left:50%;z-index:1000;
-webkit-transform:rotate(90deg);
-moz-transform:rotate(90deg);
-o-transform:rotate(90deg);
-ms-transform:rotate(90deg);
transform:rotate(90deg);
color:#fff;cursor:move;}

/*on cache les fleches */
a.move{display:none}


html.svg .pngfallback{display:none}

html.no-svg .pngfallback{display:block}
html.no-svg .fiche .pngfallback{display:block;background-position: 0 -118px;}
.tools_box {
    position: absolute;
    bottom: 0;
    left: 0;
    background: #f27b76;
    width: 18%;
    height: 126px;
}
.tools_box a.zoom_plus {
  color: #fff;
  font-size: 2em;
}
/* couleur plateau */
.mot_1_1 {background-color: #222; }
.mot_1_2 {background-color: #555; }
.mot_1_3 {background-color: #888; }
.mot_1_8 {background-color: #aaa; }
.mot_1_9 {background-color: #ccc; }
.mot_1_15 {background-color: #ddd; }

/* cookie */
div#cookieChoiceInfo span {
  padding: 10px;
  display: inline-block;
}

/*test*/
#preview {
width: 200px;
height: 126px;

background: rgb(242, 123, 118) url("../images/page.png") no-repeat scroll 0 0;

overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
border-left: 1px solid #e4e4e4;
}
.commands {
  position: absolute;
  bottom: 0;
  right: 200px;
  background: rgb(242, 123, 118);
  height: 126px;
  width: 65px;
}
commands ul li:first-child {
    border-bottom: 1px solid white;
}
.commands ul {
  list-style: none;
      padding-left: 0;
}
.commands li {
    padding-top: 33px;
    text-align: center;
}
.commands li a {
  color: #fff;
  padding: 16px 26px 15px 26px;
}
.svgneeded {position:absolute;top:0;left:0;width:100%;height:100%;
background-color: white;
text-align: center;
z-index: 10000;
}
#viewport {
border: 1px solid red;
height: 30px;
left: 15px;
position: absolute;
top: 8px;
width: 30px;
z-index: 30;
}
.tools {
  display: block;
width: 300px;
height: 126px;
position: absolute;
bottom: 0;
right: 0;
}
a{ color:#F27B76;}

.panel {
    background-color: #fcf8e3;
    border-color: #f27b76;
  }
  .panel-group .panel-heading {
    border-bottom: 0;
    background-color: #f27b76;
}
.panel-title h3 a {
  color: #f27b76;
}
.panel-title>.small, .panel-title>.small>a, .panel-title>a, .panel-title>small, .panel-title>small>a {
  color: #fcf8e3;
}
.retour {display: none;}
.panel-primary {
    border-color: #f27b76;
}
.panel-primary>.panel-heading+.panel-collapse>.panel-body {
    border-top-color: #FCF8E3;
}
#board.small { /* mon mets la carte en petit*/
transform-origin:0% 0%;
top:    0px !important;
left:   calc(100% - 300px) !important;
right:  0% !important;
bottom: 0%!important;
transform:scale(0.1);
}

.introjs-helperNumberLayer {
  display: none;
}
.introClass_step_1 {
  display: none;
}
.test .fiche {height: 492px;}
/*
.introjs-helperLayer {}
.introjs-tooltip {}*/

.modal-content {padding: 1%; background-color: #FFF7DB; color: #5B3349; max-width: 1000px; margin: auto;}
.sommaire .intro .modal-content {max-width: 700px; margin: auto;}
a.bigger span, a.smaller span {
    font-size: 1.2em;
}
.tab-content{ border-bottom: #ddd solid 1px; border-left: #ddd solid 1px; border-right: #ddd solid 1px; padding: 10px; background-color: #fff; margin: 0  0 30px;}

/*.bulle_texte {font-size:7px;line-height:8px; text-align:center;}*/
text.texte{ font-size: 17px; text-transform: uppercase; font-weight: bold; }
/*
.inner-wrap{ margin: 40px auto;max-height: 1200px;}
*/
.inner-wrap{ margin: 0px;}
.ceuxquivolent{  z-index:1001;  position: absolute;}

button, .btn-default { background-color: #F27B76; color:#fff; font-weight: bold; margin: 0 auto; padding:4px 10px; text-transform: uppercase; border: none; font-size: 12px;}
button.lang { background-color: #F27B76; color:#fff; font-weight: bold; margin: 0 auto; padding:4px 10px; text-transform: uppercase; border: none; font-size: 12px;}
a.btn.btn-primary.tutorial {
    width: 100%;
    text-transform: uppercase;
}
/* parce que le style de bootstrap a été écrasé juste avant sur btn-default */
.btn.btn-default.non_merci {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    text-transform: lowercase;;
    width: 100%;
}
.navbar-default{ background-color:rgba(48, 26, 39, 0.4); width: 20%; top:10px; left:10px; position: absolute;}
.navbar-default .navbar-toggle{ background-color: transparent; border-color:transparent;}
.navbar2-toggle{ float:left; margin:10px;}
.navbar-collapse2{ clear: both; background-color:#301a27;background-color:rgba(48, 26, 39, 0.4); color: #fff ; padding: 15px 10px;}
.navbar-collapse2 ul li{ display: block; list-style: none;}
.navbar-collapse2 ul li a{ color: #fff ; text-transform: uppercase; font-weight: bold; }
.navbar-collapse2 ul li a:before{ content: "  |  ";}
.container > .navbar-collapse2{ margin: 0 10px;}


a.voir{ background-color: #F27B76; color:#fff;  margin: 30px 0; padding:5px 15px 6px; text-transform: uppercase; border: none; font-size: 13px;}
a.voir:hover{ background-color: #7E273A; text-decoration: none;}
a.voir.titre{ background-color: inherit;  color:inherit; margin: 30px 0; padding:8px 15px; text-transform: uppercase; border: none; font-size: 14px;}
a.voir.btn_voir {margin-top: 20px;    display: inline-block;}
.bulle_texte h3 a.voir.titre{ padding: 0; color: #F27B76; font-size: 18px; text-transform: inherit;}

.panel-primary > .panel-heading{ background-color: #F27B76; border-color: #F27B76; }
a.move{ background-color: rgba(48, 26, 39, 0.4); padding: 13px 32px; border-radius: 40px; height: 80px; width:80px;}
footer{ font-size: 11px;background-color:rgb(255, 247, 219);margin-top: 30px;padding-top: 30px;}
.legend-footer IMG.logo-eu{ vertical-align: middle; float: left; margin: 0 6px 0 0;}
.copyright {
    text-align: center;
}

.mots ul{ margin: 0 0 4px; padding: 0 0 15px; border-bottom:1px solid #e5e5e5;}
li.mots-cle{  background-color: #5B3348; list-style: none; margin: 0 0 4px 0 ; padding: 4px 10px; font-size: 11px; display: inline-block;}
li.mots-cle a{ color:#FFF7DB; }
.modal-header{
  border:none;
  padding: 1%;
}
h3.modal-title{ padding: 20px 0 20px 40px; color:#B2536A;}
footer .box_editeur {
    border-top: 1px solid #9ac8c3;
    padding: 20px;
}
.texte_modal_explications img {
    width: 30%;
    float: left;
    margin-right: 2em;
}
/* beurk */
.texte_modal_explications p strong {
    display: block;
}
.texte_modal_explications p {
    padding-top: 10px;
}
.boutons_modal_explications {
    clear: both;
    margin-top: 3em;
}
p.interet{ margin:20px; font-size: 16px; }
.footer .container-fluid{ background-color: #FFF7DB; padding: 20px;}
.footer .container-fluid p{ text-align: center; margin: 0 0 0 0;}
.close {
opacity:1;
float:none;
}
.close:hover {
opacity:1;
}
.editeur {text-align: center;}

.legend-footer IMG{ margin: 0 15px 15px;}
span.eu{display: block; float: left; width:520px; line-height: 14px;}
span.other{display: block; float: left;}
.bulle_texte {text-align:right;}
.bulle_texte > div {text-align:left;}
.move{display:none;}
/*.fiches{ width:87%; margin: auto;}*/
.fiche{ max-width: 650px; margin: 0 18px 18px 0; float:left; border-radius: 20px; height:460px; box-shadow: 1px 2px 3px #5B3348; position: relative; background-color: #FFF7DB;width: 100%;}
.fiche .desc p{ min-height: 56px;}


.fiche h2 {
    font-size: 1.9em;
    display: block;
    min-height: 60px;
    margin: 33px 20px 10px 20px;
    color: #5B3348;
}
.fiche .mots { position: absolute; bottom: 5px; left:6px; border: none; margin: 0 4px 4px 0;  height: 60px;}
.fiche .mots ul{ border: none; margin: 0 10px; border-top: #AC9E93 solid 1px; padding: 4px 0 0 0;}
.fiche .chapo p {
    font-size: .9em;
    padding: 0 10px 0 10px;
    margin-bottom: 0;
}
.fiche .desc {
    padding: 0 20px;
}
.btn_filtre .btn-default {
    background-color: #fff7db;
}
.bouton_fiche a {
    background: #f27b76;
    color: #fff;
    padding: 10px;
    border-radius: 20px;
}
.btn_filtre {
    margin-bottom: 20px;
}
.icones_fiche {
  float: right;
  width: 22%;
  margin-top: 13px;
}
.icones_fiche .groupe5 img {
    background: #fff7db none repeat scroll 0 0;
    border-radius: 35px;
    border-top: 1px solid #8da9a9;
    height: auto;
    left: 30px;
    padding: 5px;
    position: absolute;
    top: -10px;
    width: 35px;
}

.icones_fiche .difficulte{ position: absolute; right: 15px;}
.spip_logos {
    float: left;
    margin: 0 10px 0 0;
}
.bouton_fiche {
  text-align: center;
}
/*.groupe5 {
  margin-top: 15px;
  float: right;
  margin-right: -6px;
}
.groupe5 img {
  width: 75%;
  height: auto;
  margin: 0 auto;
}*/
/*  ?? bug webview android le float je crois il n'aime pas vraiment ... faudrai pe le mettre dans un div (et float le div)
.fiche svg.mots4{ height:40px; width:auto; margin:-16px 4px 0 0; float:right;}
*/
h1 {
  margin: 55px 0 30px 0;
  color: white;
  font-size: 3.5em;
}
body.mot .inner-wrap {
  background-color: #9ac8c3;
}

.fiches::after {
clear: both;
content: " ";
display: block;
}
.fiche h2 svg {
height:20px;
width:auto;
}
.fiche .bonhomme {
/*min-height:300px;
min-width:300px;
height: auto;
width: 100%;*/
height: 200px;
width: 100%;
}

.close{font-size:30px;}
.modal-header button.close{ position: absolute; top:10px; right: 20px;}

/* OLDIES */
.navbar-collapse2{
filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#66301a27', endColorstr='#66301a27')";


}
#cookieChoiceInfo{ width:90%;}
.icones_type_activites .difficulte IMG.spip_logo{
  position: absolute;top:60px;
}

.test8{ position: absolute; left: 50px; top:70px;}

.icones_type_activites .groupe5 img{ background-color: #fff7db;
    border-radius: 40px;
    border-top: 1px solid #4c6360;
    height: 60px;
    padding: 6px;
    position: absolute;
    top: -25px;
    width: 60px;}
.groupe5{/*display: inline-block; width:50px; height: 60px;*/}
/*---------- SPIP --------------*/
h3.spip{ font-size:16px; font-weight: bold; color:#000000;}
.spip_logos{ float:left; margin:0 10px 0 0;}
hr.spip{ border-top:#D1D1D1 solid 1px; border-bottom:#fff solid 1px;  border-left:#fff solid 1px;  border-right:#fff solid 1px;}
span.spip_documents {margin-right:5px;}
.spip_documents_left, span.spip_documents_left{ margin-right: 20px; margin-top:0; margin-bottom:8px; text-align: center; clear:both; }
.spip_documents_left img{ margin-bottom:4px;}
.spip_documents_right, span.spip_documents_right{ margin-left: 20x;  margin-top:0px;  margin-bottom:8px;  text-align: center;  clear:both;  }
.spip_documents_right img{ margin-bottom:4px;  }
.spip_documents {  text-align: center; max-width  : 640px;}
.spip_documents_center {   clear: both;    padding:5px;  background-color:#FFFFFF;  display: block;  }
.spip_documents_center IMG{ border:none; text-align: center;  margin:auto;   max-width  : 640px;}
.spip_documents_center DT{   text-align: center;   margin:auto;}
p.spip_note, span.spip_note_ref {  font-size:0.8em; margin-top: 25px;  border-top:#CCCCCC 1px solid;  margin-bottom: 5px;   margin-top: 15px;   text-align:justify; }
dd.spip_doc_descriptif{ font-size:11px;}
.spip_bouton input{   height: 25px;}
.formulaire_spip fieldset{   margin-bottom: 10px;}
table {    border:1px #4EBDD8 #CCCCCC;    border-collapse:collapse;    margin:10px auto ;   width:95%;}
td {   border:1px solid #CCCCCC;   padding:10px;    text-align:left;}
th{ background-color: #f1f1f1; text-align:center; border:1px solid #CCCCCC;padding:6px;}
ol{ margin:20px 0 20px 30px;}
ol.spip li ol.spip{ margin:10px 0 20px 30px; }
Blockquote{    border:#F27B76 solid 5px; background:#FFF7DB; padding:24px; margin:10px 0; color:#5B3349; font-size: 15px;}
Blockquote.spip_poesie{text-transform:italic;text-align:center;}
.chapo{font-weight:bold;color:#5B3349;margin:10px 0 20px; }
.spip_documents_center DT{ text-align: center; margin:auto; }
.spip_documents_center dd{ text-align: center; margin:auto; font-size:0.8em;}
.spip_doc_titre, .spip_doc_descriptif{margin:0 auto;}
.image_article{ float:left; margin:0 10px 0 0;}




/*--- menu -- */

.slide_content {
width:300px;
max-width: 78%;
float:left;
background-color:rgb(242, 123, 118);
min-height: 100vh;
}
.slide_btn {
  width:80px;
  float:left;
  max-width: 18%;
}
.slide_btn:focus {
    outline: #F27B76;
}
.slide_menu {
min-height: 100vh;
margin-left:-300px;
transition:margin 1s;
z-index:1003;
/*position: fixed; */
}
.slide_menu.opened {
transition:margin 1s;
margin-left:0px;
}

.slide_menu h3 {
margin-left: 20px;
font-size: 2.5em;
}
.slide_menu ul {
padding-left: 21px;
margin-top: 20px;
}
.slide_menu ul li {
  padding: 10px 0;
}
.slide_menu ul li.active {
background: rgb(255, 144, 139);
}
.slide_menu ul li a {
font-size: 1.2em;
}
.slide_menu ul li.retour_carte {
    margin-top: 20px;
    font-size: .8em;
    font-style: italic;
}
.slide_menu ul li.retour_carte a:before {
  content:"";
}
.slide_btn .icon-bar {
border-radius: 1px;
border-top: 2px solid white;
display: block;
height: 4px;
width: 10px;
}

.slide_btn .pngfallback {
padding: 10px;
}

.no-svg div.etoiles1{
background-image:url(../assets/1etoiles.png);
}

.no-svg div.etoiles2{
background-image:url(../assets/2etoiles.png);
}

.no-svg div.etoiles3{
background-image:url(../assets/3etoiles.png);
}

.no-svg div.mots4 {
height: 22px;
width: 47px;
background-size: 100% 100%;
display: inline-block;
}

.mot_1_1 .footer_fiche_1_1{color:#9a7819; background-color: #F4C284; border-radius: 0 0 20px 20px; bottom: 0; font-size: 20px; padding: 6px;position: absolute; text-align: center; width: 100%;}
.mot_1_2 .footer_fiche_1_1{color:#7e5345; background-color: #F5A286; border-radius: 0 0 20px 20px; bottom: 0; font-size: 20px; padding: 6px;position: absolute; text-align: center; width: 100%;}
.mot_1_3 .footer_fiche_1_1{color:#457e77; background-color:#70C8BC; border-radius: 0 0 20px 20px; bottom: 0; font-size: 20px; padding: 6px;position: absolute; text-align: center; width: 100%;}
.mot_1_8 .footer_fiche_1_1{color:#7e273a; background-color:#bf3b58;border-radius: 0 0 20px 20px; bottom: 0; font-size: 20px; padding: 6px;position: absolute; text-align: center; width: 100%;}
.mot_1_9 .footer_fiche_1_1{color:#bb92aa; background-color:#5B3349;border-radius: 0 0 20px 20px; bottom: 0; font-size: 20px; padding: 6px;position: absolute; text-align: center; width: 100%;}

/* -- welcome -- */


.welcome {
background: rgba(90,90,90,0.5) none repeat scroll 0 0;
color: #5b3349;
position: absolute;height: 100%;width: 100%;z-index: 10000;/* un spash*/
}

.welcome_content{
width:50%;
margin: 10% auto;
background-color: #fff7db;
padding: 2%;
}

.rub_lies {
    list-style: outside none none;
}
.btn.btn-default.off {
    background-color: #fff;
}

.toolsbox{
  right:0;
  bottom:0;
  width: 265px;
  height: 126px;
}
/* berk */
.introjs-tooltip {
    max-width: 215px!important;
}
h3.modal-title {
    padding: 49px 0 20px 70px;
    color: #B2536A;
}

@media (min-width: 995px) {
  .fiche {
    width: 350px;
  }
  .copyright {
      text-align: right;
  }
}


@media (min-width: 1200px) {
.move{display:block;}
.close{font-size:34px; color: #5B3349; font-weight: normal;}
}