/*Global  */

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,/*ol,ul,li,*/
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:top}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}

html,
body,
#map {
  width: 100%;
  max-width: 768px;
  margin: auto;
}

html{width:100%;font-size: 13px;max-width: 768px;margin: auto;}

a{text-decoration : none; }
h1 {
  font-size: 1.7rem;
  padding: 1rem;
  padding-left: 0;
  padding-right: 0;
  color: #238fb9;
  font-weight: 600;
}
h2 {
  font-size: 1.4rem;
  padding: 1rem;
  padding-left: 0;
  padding-right: 0;
  color: #238fb9;
}

h3 {
  font-size: 1.2rem;
  padding: 0.6rem;
  padding-left: 0;
  padding-right: 0;
  color: black;
  font-weight:bold;
}
p {
  padding-top: 1rem;
  padding-bottom: 1rem;
}

strong{
  font-weight: bold;
}

li p {
  padding: 0.5rem;
}

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,/*ol,ul,li,*/
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video {
  font-family: "Trebuchet MS";
  user-select: none;
}

.c_green {
    color: #419443;
  }
  .bg_green {
    background-color: #419443;
  }
  .bd_green {
    border: 1px solid #419443;
    border-radius: 5px;
  }

  #APP_content {
    /* height: 100%; */
    height: 100vh;
    height: calc(calc(var(--vh, 1vh) * 100) - 56px - 42px);
  }
  .page {
    height: 100%;
  }

/* NAVBAR */

#header {
    position: fixed;
    z-index: 1001;
    width: 100%;
    box-shadow: 5px 3px 13px 0px rgba(0, 0, 0, 0.86);
    left: 0;
    top: 0;
}

.navbar-header {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    top: 0;
    width: 100%;
    z-index: 1000;
    color: #54545A;
    /* background-color: #4caf50; */
    font-size: 19px;
    box-shadow: 0 0px 3px 1px rgba(0,0,0,0.2);
    background-image: linear-gradient(135deg, #00b7ff, #00b7ff);
}

.tampon{
    height: 58px;
}

.navbar-header > div {
    height: 58px;
}
.navbar-header > .ligne1 > div {
    height: 58px;
    /* width: 58px; */
    line-height: 58px;
    display: inline-block;
    min-width: 20px;
    overflow: hidden;
    /* padding-left: 16px; */
    font-size: 20px;
    color: white;
    float: left;
    overflow: hidden;
}

.navbar-header > .ligne1 .button-1 {
    width: 14%;
    /* margin-left: 16px; */
     text-align: center;
cursor:pointer;
}

.ligne1 .button-1 img {
    /* width: 23px; */
    height: 23px;
    margin-top: 17px;
    margin-left: auto;
    margin-right: auto;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.navbar-header > .ligne1 .Text-1 {
    width: 86%;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.navbar-header > .ligne1 .Text-1.noButton{
    margin-left:16px;
}



/* FOOTER */

.tampon_footer {
    height: 42px;
  }
  .zoneButton {
    text-align: center;
    position: relative;
    width: 100%;
    height: 60px;
  }
  
  menufooter {
    display: block;
    position: fixed;
    background-color: #ffffff;
    height: 100vh;
    width: 100%;
    z-index: 10000;
    top: 0;
    transform: translateY(59px);
    box-shadow: 0px 6px 16px 0px rgba(0, 0, 0, 0.38);
    /* background-image: linear-gradient(#1c91bf,#ffffc2); */
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    left: 0;
  }
  
  menufooter .listItemMenu {
    height: calc(100% - 130px);
    /* height: 100%; */
    overflow-y: scroll;
  }
  
  menufooter.down {
    transform: translateY(calc(100% - 42px));
  }
  
  menufooter .zoneButton img {
    padding: 5px;
    top: 0px;
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    transition: top 0.4s 0.2s ease-in-out, opacity 0.2s 0.2s linear;
  }
  menufooter .zoneButton div {
    border-radius: 35px;
    border: 4px solid #ffffff;
    padding: 5px;
    /* top: 0px; */
    transform: translateY(0px);
    position: absolute;
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    width: 42px;
    background-image: linear-gradient(-45deg,#00b7ff,#ffffc2);
    height: 42px;
    transition: transform 0.4s 0.3s ease-in-out;
  }
  
  menufooter .zoneButton div.down {
    transform: translateY(-29px);
    border-color: #1e92bf;
  }
  
  menufooter .zoneButton img.hamburger.down {
    opacity: 1;
  }
  
  menufooter .zoneButton img.close.down {
    opacity: 0;
  }
  
  menufooter .zoneButton img.hamburger {
    opacity: 0;
  }
  
  menufooter .zoneButton img.close {
    opacity: 1;
  }
  
  menufooter .listItemMenu .item {
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    width: calc( 100% - 22.500px );
    margin: auto;
    max-width: 768px;
    margin-top: 9.25px;
    height: 72px;
    border-radius: 5px;
    display: -webkit-box;
    display: -moz-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    font-weight: bold;
    display: flex;
    background-image: linear-gradient(153deg, #00b7ff, #00b7ff);
  }
  menufooter .listItemMenu .tamponbottommenu {
    height: 10px;
  }
  
  menufooter .listItemMenu .item .icon {
    padding: 8px;
    flex-grow: 0; /* do not grow   - initial value: 0 */
    flex-shrink: 0; /* do not shrink - initial value: 1 */
    flex-basis: 40px;
    height: 40px;
    text-align: center;
    background-color: rgb(255, 255, 255);
    margin: 6px;
    border: 2px solid #ADB1AE;
    border-radius: 25px 7px 25px 7px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 72%;
  }
  
  menufooter .listItemMenu .item .icon img {
    /* width: 56px; */
  }
  
  menufooter .listItemMenu .item .text {
    flex: 1 1 auto;
    padding: 7px;
    color: white;
    font-size: 0.9rem;
  }
  
  menufooter .listItemMenu .item .text .title {
    font-size: 1.4rem;
    font-weight: 500;
    text-transform: uppercase;
    font-weight: bold;
  }
  menufooter .listItemMenu .item .text .description {
    text-align: justify;
    padding-top: 5px;
  }

  @media (max-width: 330px) {
    div#APP_content {
      /* height: 100%; */
      /* height: calc(100vh - 60px - 42px); */
    }
  
    menufooter {
      transform: translateY(62px);
    }
    .tampon {
      height: 60px;
    }
}



/*
Les pages
*/


.simplepage {padding: 10px;padding-bottom:20px;}


/*
Accueil 
*/
.zone_fiche {
    background-image: linear-gradient(-21deg, #ffffff4d, #ffffff);
    /* border: 1px solid #dad6d6; */
    box-shadow: 0 0px 3px 1px rgba(0,0,0,0.2);
}

.zone_fiche .item {
    padding-left: 10px;
    padding-right: 10px;
    font-size: 1.3rem;
    padding-bottom: 10px;
    padding-top: 5px;
    border-bottom: 1px solid #8080802b;
}

.zone_fiche .item .label, .zone_fiche .item .label a {
    color: #00415a7a;
    padding: 0;
}

.zone_fiche .item .Title {font-weight:bold;}
.zone_fiche .item .Title a{padding-top:5px;}

.zone_fiche .item .motscle {
  font-size: 1.1rem;
  padding-top: 10px;
  color: grey;
}

.zone_fiche .item a {
  display: block;
  padding-top: 15px;
  color: #25799a;
}

.zone_fiche.list {
  background-image: none;
  box-shadow: 0px 0px;
}

.zone_fiche.list .item {
  background-image: linear-gradient(-21deg, #ffffff4d, #efefef);
  box-shadow: 0 0px 3px 1px rgba(0,0,0,0.2);
  margin-bottom: 15px;
}

.zone_button {
  padding: 15px;
  text-align: center;
    cursor: pointer;
}

button {
  background-image: linear-gradient(135deg,#00b7ff,#2e6980);
  border: aqua;
  padding: 1rem;
  font-size: 1.3rem;
  font-weight: bold;
  color: #f3f3f3;
  border-radius: 11px;
  box-shadow: 1px 1px 3px 0px rgb(0 0 0);
    cursor: pointer;
    padding-left: 2rem;
    padding-right: 2rem;
}
button a {
  color: #f3f3f3;
}

button:hover {
  background-image: linear-gradient(135deg,#7aceef,#41aed8);
}

.simplepage.projet img {
  max-width: 100%;
}


.simplepage.projet .motsClé {
  background-color: #f1f1f1;
  padding: 10px;
  padding-top: 0;
  padding-bottom: 0;
}


/*Carto*/

div#containermapboxGl {
  height: 100%;
  position: relative;
  overflow: hidden;
}

#mapboxgl {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
}