cf/* CSS Document */
/* color
bleu:  #2d61f1
jaune:  #ffff66
rouge:  #E96861
vert clair:  #D1F7D5
vert: #38A56F
gris:  #E3DFE8
vert bleu : #09BAAE
rose: #FDD7AB
noir: #2F2F2F
*/
/* font
Source code pro-Bold / 700
Source code pro-Semi-bold / 600
Roboto-Bold / 700
Roboto-Regular / 400
Roboto-Light / 300
*/
/*
* @autor: Yannick Guéguen & Pierre Arnaud Yahya Vargas
* @date: 2019. Septembre
*/
/*------------------ MAP -------------------------------*/
* {
  box-sizing: border-box
}
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
}

.poeme{
    background-color: #FDD7AB;
}
/*------info-menu---------*/
#wrapper-info {
  position: absolute;
  /*top: 100px;*/
  width: 0;
  display: flex;
  flex-direction: column;
  height: calc(100% - 100px);
  transition: all .3s ease;
  color: #ffff66;
  background: #2d61f1;
  z-index: 700;
  box-shadow: none;
  pointer-events: auto;
  border-top-right-radius: 30px;
  bottom: 0;
  left: 0;
  overflow: hidden
}
#wrapper-info.open {
  width: 100%;
  height: calc(100% - 100px);
  overflow: hidden;
}
@media screen and (min-width:768px) {
  #wrapper-info.open {
    width: 50%;
  }
}
@media screen and (min-width:1920px) {
  #wrapper-info.open {
    width: 33% !important;
  }
}
.openCloseInfo {
  display: flex;
  cursor: pointer;
  z-index: 150;
  width: 70px;
  height: 70px;
  position: absolute;
  right: -60px;
  top: 0;
  border: none;
  outline: none
}
#wrapper-info.open .openCloseInfo {
  position: static
}
.openCloseInfo img {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1px;
  width: 50px;
  height: 50px;
}
.info-open {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 600;
  padding: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 2px solid #bcbcbe;
  color: #2F2F2F;
  background: white;
}
.info-open:hover {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 600;
  padding: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1.5px solid #2F2F2F;
  color: white;
  background: #2F2F2F;
  transition: all .5s ease-in-out;
}
.info-open:active {
  position: fixed;
  left: 10px;
  top: 10px;
  z-index: 600;
  padding: 0;
  width: 50px;
  height: 50px;
  border-radius: 100%;
  border: 1.5px solid #2F2F2F;
  color: white;
  background: #2F2F2F;
}
.scroll-section {
  overflow: auto;
  position: relative;
  flex: 1;
}
@media screen and (min-width:768px) {
  /*------info-menu---------*/
  #wrapper-info.open {
    width: 50%;
    max-width: 50%;
    left: auto;
  }
}
/*------H2---------*/
div.titre-info h2 {
  box-sizing: border-box;
  display: flex;
  text-transform: uppercase;
  text-decoration: underline;
  letter-spacing: -0.03em;
  padding: 10px 26px 10px 26px;
  height: 123px;
  font: 600 30px/110% 'source_code_proregular', Arial;
  align-items: center;
  align-content: center;
  width: 100%;
  color: #ffff66;
  background: #2d61f1;
  overflow: hidden;
  border-top-right-radius: 30px;
  white-space: nowrap;
}
#scroll-section {
  position: relative;
  overflow: auto;
  background: transparent;
}
#scroll-section h3 {
  font: 500 20px/25px 'robotoregular', sans-serif, Arial;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  padding: 30px 26px 15px 26px;
  display: flex;
  align-items: center;
  align-content: center;
  width: 100%;
}
#scroll-section h3 span {
  font: 600 48px/97% 'source_code_prosemibold', Arial;
}
#scroll-section p {
  font: normal 300 1.3rem/1.8rem "Cormorant Garamond", serif;;
  padding: 15px 26px 52px 26px;
  margin: 0px;
}
#scroll-section p span {
  font: normal 600 1.3rem/2rem 'robotoregular', sans-serif, Arial;
}
.section-blue {
  color: #ffff66;
  background: #2d61f1;
}
.section-yellow {
  color: #2d61f1;
  background: #ffff66;
}
.buttonClose {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1px;
  width: 50px;
  height: 50px;
  border: none;
  background: transparent;
}
.buttonClose:hover {
  transform: rotate(45deg);
  transition: all .3s ease;
}
img#button-share {
  bottom: -100px;
  right: 10px;
  padding: 1px;
  width: 50px;
  height: 50px;
}
.icon-info:before {
  z-index: 600;
  width: 50px;
  height: 50px;
  font-size: 45px;
  line-height: 50px;
}
/*------------------Share buttons--------------------------*/
ul.share-buttons {
  list-style: none;
  padding: 0;
}
ul.share-buttons li {
  display: inline;
}
ul.share-buttons .sr-only {
  position: absolute;
  clip: rect(1px 1px 1px 1px);
  padding: 0;
  border: 0;
  height: 1px;
  width: 1px;
  overflow: hidden;
}
/*------------------Liens--------------------------*/
#scroll-section a:link {
  font: normal 600 1.3rem/2rem 'robotoregular', sans-serif, Arial;
  color: #2d61f1;
  text-decoration: none;
  pointer-events: auto;
  padding: 2px 4px;
}
#scroll-section a:visited {
  color: #2d61f1;
  text-decoration: line-through;
  pointer-events: auto;
  padding: 2px 4px;
}
#scroll-section a:hover {
  color: #ffff66;
  background-color: #2d61f1;
  text-decoration: none;
  padding: 2px 4px;
}
#scroll-section a:active {
  color: #ffff66;
  background-color: #2d61f1;
  text-decoration: none;
  padding: 2px 4px;
}
@media screen and (min-width:750px) {
  div.titre-info h2 {
    padding: 0px 40px 0px 40px;
    height: 160px;
    color: #ffff66 !important;
  }
  #scroll-section h3 {
    padding: 30px 40px 15px 40px;
  }
  #scroll-section p {
    padding: 15px 40px 52px 40px;
  }
}
@media screen and (min-width:992px) {
  div.titre-info h2 {
    font: 600 normal 48px/110% 'source_code_proregular', Arial;
    padding: 0px 60px 0px 60px;
    height: 230px;
    white-space: nowrap;
  }
  #scroll-section h3 {
    padding: 30px 40px 15px 40px;
  }
  #scroll-section p {
    padding: 15px 40px 52px 40px;
  }
}
/*------------------SIDEBAR openclosebtn--------------------------*/
#wrapper-menu {
  position: absolute;
  bottom: 0;
  z-index: 2;
  width: 0;
  display: flex;
  flex-direction: column;
  height: calc(100% - 100px);
  transition: all .3s ease;
}
.listings {
  position: relative;
  width: 0;
  overflow: auto;
  flex: 1;
}
#wrapper-menu.open {
  width: 100%;
  overflow: hidden
}
@media screen and (min-width:768px) {
  #wrapper-menu.open {
    width: 50%
  }
}
@media screen and (min-width:1920px) {
  #wrapper-menu.open {
    width: 33%
  }
}
.header-nav {
  display: flex;
  position: relative;
  background-color: transparent;
  border-top-right-radius: 30px;
}
.wrapper-nav.open .header-nav {
  background-color: #38A56F;
  overflow: hidden;
  border-top-right-radius: 30px;
}
.openclosebtn {
  display: flex;
  cursor: pointer;
  z-index: 100;
  width: 100px;
  height: 123px;
  transition: all .3s ease;
  position: absolute;
  right: -70px;
  top: 0;
  border: none;
  background-color: #009966;
  border-top-right-radius: 30px;
  outline: none;
}
.openclosebtn:hover {
  transform: translateX(10px);
}
#wrapper-menu.open .openclosebtn:hover {
  transform: translateX(0px);
  transition: all .2s ease;
}
@media screen and (min-width:768px) {
  .openclosebtn {
    width: 100px;
    height: 160px;
  }
}
@media screen and (min-width:992px) {
  .openclosebtn {
    width: 100px;
    height: 230px;
  }
}
#wrapper-menu.open .openclosebtn {
  position: static;
}
.header-nav h2 {
  opacity: 0;
}
#wrapper-menu.open .header-nav h2 {
  display: flex;
  width: 100%;
  font: 600 26px/97% 'source_code_proregular', Arial;
  color: #ffff66;
  z-index: 100;
  white-space: nowrap;
  background-color: #009966 !important;
  align-items: center;
  align-content: center;
  text-transform: uppercase;
  text-decoration: underline;
  overflow: hidden;
  padding: 0px 0px 0px 26px !important;
  height: 123px;
  opacity: 1;
}
@media screen and (min-width:350px) {
  #wrapper-menu.open .header-nav h2 {
    font: 600 30px/97% 'source_code_proregular', Arial;
  }
}
@media screen and (min-width:750px) {
  #wrapper-menu.open .header-nav h2 {
    white-space: nowrap;
    padding: 0px 40px 0px 40px !important;
    height: 160px;
    color: #ffff66;
  }
}
@media screen and (min-width:992px) {
  #wrapper-menu.open .header-nav h2 {
    white-space: nowrap;
    font: 600 normal 48px/97% 'source_code_proregular', Arial;
    padding: 0px 60px 0px 60px !important;
    height: 230px;
  }
}
.openclosebtn img {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 1px;
  width: 60px;
  height: 60px;
  transition: all .5s ease-in-out;
}
#wrapper-menu.open button .openclosebtn img {
  transform: rotate(45deg);
  transform: scale(150);
  width: 100px;
  height: 100px;
  z-index: 400;
}
.openclosebtn img:hover {
  transition: all .5s ease-in-out;
  transform: rotate(90deg);
}
/*------------------Sidebar -------------------------*/
@media screen and (min-width:992px) {
  .sidebar {
    top: 399px;
  }
  .sidebar .openclosebtn {
    width: 70px;
    height: 199px;
  }
}
/*-------LISTING-------------*/
#wrapper-menu.open .listings {
  width: 100%;
}
.listings .item a {
  text-transform: uppercase;
  font: 300 20px/35px 'robotolight', sans-serif;
  text-decoration: none;
  color: #ff61b8;
  background-color: #ffff66;
  border-bottom: 1px solid #ff61b8;
  display: block;
  padding: 5px 26px;
}
@media screen and (min-width:768px) {
  .listings .item a {
    font: 300 25px/35px 'robotolight', sans-serif;
    padding: 8px 40px;
  }
}
@media screen and (min-width:992px) {
  .listings .item a {
    font: 300 26px/35px 'robotolight', sans-serif;
    padding: 10px 60px;
  }
}
/* menu list / mouse over link */
.listings .item a:hover {
  color: #2d61f1;
  font-size: 110%;
  transition: all .3s ease;
}
@media screen and (min-width:768px) {
  .listings .item a:hover {
    font-size: 130%;
  }
}
@media screen and (min-width:992px) {
  .listings .item a:hover {
    font-size: 140%;
  }
}
/* menu list / selected link */
.listings .item a:active {
  color: #2d61f1;
}
.listings .item a:visited:hover {
  color: #2d61f1;
}
::-webkit-scrollbar {
  width: 3px;
  height: 3px;
  border-left: 0;
  background: rgba(255, 255, 255, 0.804);
}
::-webkit-scrollbar-track {
  /* background: azure; */
}
::-webkit-scrollbar-thumb {
  background: #002634;
  border-radius: 0;
}
.clearfix {
  display: block;
}
.clearfix::after {
  content: '.';
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}
.boite-mots {
  background-color: #FDD7AB;
}
.item-bandeau-poeme {
  background: #09BAAE;
  text-transform: uppercase;
  text-decoration: underline;
  letter-spacing: -0.03em;
  color: #FDD7AB;
  border-radius: 0px 30px 0px 0px;
  padding: 10px 26px 10px 26px;
  height: 123px;
  display: flex;
  font: 600 20px/90% 'source_code_proregular', Arial;
  align-items: center;
  align-content: center;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
}
.item-bandeau-poeme h2 {
  line-height: 32px;
}
/* INSTRUCTION */
.instruction {
  font: 300 20px/35px 'robotolight', sans-serif;
  padding: 30px 30px 30px 26px;
  color: #09BAAE;
  display: block;
  border: none;
}
/* BOUTON ACCORDEON */
accordionholder {
  padding: 0px !important;
  margin: 0px !important;
  display: none;
}
/*-------LISTING POEME RETURN------------*/
button.accordion {
  width: 100%;
  text-align: left;
  transition: all 1s ease;
  text-transform: uppercase;
  font: 300 20px/35px 'robotolight', sans-serif;
  text-decoration: none;
  color: #09BAAE;
  background-color: #FDD7AB;
  padding: 5px 26px;
  border-bottom: 1px solid #09BAAE;
  border-top: none;
  border-left: none;
  border-right: none;
  display: block;
}
@media screen and (min-width:768px) {
  button.accordion {
    font: 300 25px/35px 'robotolight', sans-serif;
    padding: 8px 40px;
  }
  .item-bandeau-poeme {
    padding: 10px 40px 10px 40px;
    height: 140px;
  }
}
@media screen and (min-width:992px) {
  button.accordion {
    font: 300 26px/35px 'robotolight', sans-serif;
    padding: 10px 60px;
  }
}
button.accordion.active {
  background-position: left bottom;
  background-color: #09BAAE;
  color: #FDD7AB;
  border: none;
}
button.accordion:hover {
  background-position: left bottom;
  background-color: #09BAAE;
  color: #FDD7AB;
  border: none;
  opacity: 0.5;
  font-size: 110%;
  transition: all 0.3s ease-in;
}
@media screen and (min-width:768px) {
  button.accordion:hover {
    font-size: 130%;
  }
}
@media screen and (min-width:992px) {
  button.accordion:hover {
    font-size: 140%;
  }
}
/* Style the accordion panel. Note: hidden by default */
div.panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.6s ease;
  font: 300 20px/30px 'robotolight', sans-serif;
  text-decoration: none;
  color: #09BAAE;
  background-color: #FDD7AB;
  padding: 0px 26px;
  list-style: none;
}
@media screen and (min-width:768px) {
  div.panel {
    padding: 0px 40px;
    transition: all 0.3s ease;
  }
  .instruction {
    padding: 30px 40px 30px 40px;
    font: 300 26px/35px 'robotolight', sans-serif;
  }
}
@media screen and (min-width:992px) {
  div.panel {
    padding: 0px 60px;
    transition: all 0.3s ease;
  }
  .instruction {
    padding: 30px 60px 30px 60px;
    font: 300 26px/35px 'robotolight', sans-serif;
  }
}
div.panel li {
  border-bottom: 1px solid #09BAAE;
}
button.accordion:after {
  content: '\00002B';
  color: #09BAAE;
  font: 300 20px/35px 'robotolight', sans-serif;
  float: right;
  margin-right: 26px;
  transition: all 0.3s ease-in;
}
@media screen and (min-width:992px) {
  .item-bandeau-poeme {
    white-space: nowrap;
    font: 600 34px/97% 'source_code_proregular', Arial;
    padding: 0px 40px 0px 60px !important;
    height: 199px;
  }
  .item-bandeau-poeme h2 {
    line-height: 48px;
  }
  #image-tuto-app {
    padding: 10px 60px 26px 60px;
  }
}
.list-mots {
  text-transform: uppercase;
  font: 300 20px/35px 'robotolight', sans-serif;
  text-decoration: none;
  color: #09BAAE;
  background-color: #FDD7AB;
  border-bottom: 1px solid #09BAAE;
  display: block;
  transition: all .3s ease;
  padding: 5px 26px;
}
.instruction {
  padding: 30px 26px 0px 26px;
  font: 300 20px/30px 'robotoregular', sans-serif;
}
.instruction span {
  text-transform: uppercase;
}
@media screen and (min-width:750px) {
  .list-mots {
    font: 300 25px/35px 'robotolight', sans-serif;
    padding: 8px 40px;
  }
  .button-return {
    margin: 26px 40px !important;
  }
  .button-app-poeme {
    margin: 26px 40px !important;
  }
  .instruction {
    padding: 30px 40px 30px 40px;
    font: 400 25px/30px 'robotoregular', sans-serif, Arial;
  }
}
@media screen and (min-width:992px) {
  .list-mots {
    font: 300 26px/35px 'robotolight', sans-serif;
    padding: 10px 60px;
  }
  .button-return {
    margin: 26px 60px !important;
  }
  .button-app-poeme {
    margin: 26px 60px !important;
  }
  .instruction {
    padding: 30px 60px 30px 60px;
    font: 400 25px/30px 'robotoregular', sans-serif, Arial;
  }
}
/*-----------Bouton Carte------------*/
.button-return {
  display: inline-block;
  padding: .50rem 1.25rem;
  border-radius: 10rem;
  color: #2F2F2F;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .15rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 2px solid #bcbcbe;
  font: 600 18px/25px 'robotoregular', sans-serif, Arial;
  text-decoration: none;
  margin: 26px 26px;
}
.button-return:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10rem;
  z-index: -2;
}
.button-return:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #2F2F2F;
  transition: all .3s;
  border-radius: 10rem;
  z-index: -1;
}
.button-return:hover {
  color: #fff;
}
.button-return:hover:before {
  width: 100%;
}
.container-return {
  padding-top: 0px;
  width: 100%;
  text-align: left;
}
.container-button-app-poeme {
  padding-bottom: 0px;
  width: 100%;
  text-align: left;
}
.button-app-poeme {
  display: inline-block;
  padding: .50rem 1.25rem;
  border-radius: 10rem;
  color: #2F2F2F;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .15rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 2px solid #bcbcbe;
  font: 600 18px/25px 'robotoregular', sans-serif, Arial;
  text-decoration: none;
  margin: 26px 26px;
  background-color: white;
}
.button-app-poeme:hover {
  color: white;
  background-color: black;
  transition: all .3s;
  z-index: 1;
  border: 2px solid #bcbcbe;
}
/*----------Bandeau-------*/
.form-html {
  background-color: #B1D8FF;
}
.form-background {
  background: #D96B43;
}
.wrapper-form {
  max-width: 100% !important;
  width: 100% !important;
  background: transparent !important;
  display: flex;
  flex-direction: column;
  height: calc(100% - 100px);
  z-index: 400;
  position: absolute;
}
.label-form {
  border-top: 2px dashed #B1D8FF;
  display: block;
  font: normal normal 25px/23px 'robotoregular', sans-serif;
  color: #B1D8FF;
  padding: 30px 15px 1px 26px;
  text-transform: uppercase;
}
.label-form-1 {
  display: block;
  font: normal normal 25px/23px 'robotoregular', sans-serif;
  color: #B1D8FF;
  padding: 30px 15px 1px 26px;
  text-transform: uppercase;
}
.area-form {
  background: #B1D8FF;
  font: normal 300 1.3rem/1.8rem 'robotolight', sans-serif, Arial;
  padding: 6px;
  text-align: justify;
  color: #D96B43;
  margin: 15px 26px 15px 26px;
  width: 86% !important;
  outline-style: none;
}
.item-entete {
  background: #D96B43;
  text-transform: uppercase;
  text-decoration: underline;
  letter-spacing: -0.03em;
  color: #B1D8FF;
  border-radius: 0px 30px 0px 0px;
  padding: 10px 20px 10px 26px;
  height: 123px;
  display: flex;
  font: 600 20px/97% 'source_code_proregular', Arial;
  align-items: center;
  align-content: center;
  width: auto;
  overflow: hidden;
  white-space: nowrap;
  opacity: 1;
}
.item-entete h2 {
  line-height: 32px;
}
.form-text {
  font: normal 400 1.5rem/2rem 'robotoregular', sans-serif, Arial;
  padding: 30px 60px 30px 26px;
  background: #B1D8FF;
  color: #B1D8FF;
}
.item-1 h3 {
  font: normal 300 1.3rem/1.8rem 'robotolight', sans-serif, Arial;
  padding: 15px 15px 15px 26px;
  color: #B1D8FF;
  display: block;
}
#form-intro {
  color: #D96B43;
  display: block;
  font: 300 20px/30px 'robotoregular', sans-serif;
  padding: 30px 26px;
}
#form-intro span {
  text-transform: uppercase;
}
@media screen and (min-width:750px) {
  .label-form {
    padding: 30px 15px 1px 40px;
    text-transform: uppercase;
  }
  .label-form-1 {
    padding: 30px 15px 1px 40px;
  }
  .area-form {
    margin: 15px 40px;
  }
  .item-entete {
    white-space: nowrap;
    padding: 0px 40px 0px 40px !important;
    height: 160px;
  }
  .item-entete h2 {
    line-height: 32px;
  }
  .form-text {
    padding: 30px 60px 30px 40px;
  }
  .item-1 h3 {
    padding: 15px 15px 15px 40px;
  }
  #form-intro {
    padding: 40px 40px;
    font: 300 25px/30px 'robotoregular', sans-serif;
  }
  .button-return {
    margin: 26px 40px !important;
  }
  .button-send {
    margin: 26px 40px !important;
  }
}
@media screen and (min-width:992px) {
  .label-form {
    padding: 30px 15px 1px 60px;
    text-transform: uppercase;
  }
  .label-form-1 {
    padding: 30px 15px 1px 60px;
  }
  .area-form {
    margin: 15px 60px;
    width: 45% !important;
  }
  .item-entete {
    white-space: nowrap;
    font: 600 normal 34px/97% 'source_code_proregular', Arial;
    padding: 0px 40px 0px 60px !important;
    height: 199px;
  }
  .item-entete h2 {
    line-height: 48px;
  }
  .form-text {
    padding: 30px 60px 30px 60px;
  }
  .item-1 h3 {
    padding: 15px 15px 15px 60px;
  }
  #form-intro {
    padding: 60px 60px;
  }
  .button-return {
    margin: 26px 60px !important;
  }
  .button-send {
    margin: 26px 60px !important;
  }
}
/*-----------Bouton Carte------------*/
.button-return {
  display: inline-block;
  padding: .50rem 1.25rem;
  border-radius: 10rem;
  color: #2F2F2F;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .15rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 2px solid #bcbcbe;
  font: 600 18px/25px 'robotoregular', sans-serif, Arial;
  text-decoration: none;
  margin: 26px 1px 26px 26px;
}
.button-return:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #fff;
  border-radius: 10rem;
  z-index: -2;
}
.button-return:before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #2F2F2F;
  transition: all .3s;
  border-radius: 10rem;
  z-index: -1;
}
.button-return:hover {
  color: #fff;
}
.button-return:hover:before {
  width: 100%;
}
.container-return {
  padding-top: 0px;
  width: 100%;
  text-align: left;
}
.container-send {
  padding-top: 0px;
  width: 100%;
  text-align: right;
  padding-bottom: 60px;
}
.button-send {
  display: inline-block;
  padding: .50rem 1.25rem;
  border-radius: 10rem;
  color: #2F2F2F;
  text-transform: uppercase;
  font-size: 1rem;
  letter-spacing: .15rem;
  transition: all .3s;
  position: relative;
  overflow: hidden;
  z-index: 1;
  border: 2px solid #bcbcbe;
  font: 600 18px/25px 'robotoregular', sans-serif, Arial;
  text-decoration: none;
  margin: 26px 26px;
}
.button-send:hover {
  color: white;
  text-transform: uppercase;
  background-color: black;
      padding: .50rem 1.25rem;
  border-radius: 10rem;
  transition: all .3s;
  z-index: 1;
     font: 600 18px/25px 'robotoregular', sans-serif, Arial;
  border: 2px solid #bcbcbe;
}

  /* -------------Scrollbar-------------- */ ::-webkit-scrollbar {
    width: 8px;
  }
  ::-webkit-scrollbar-thumb {
    background: #BAB9B9;
    border-radius: 10px;
  }
  /* Handle on hover */ ::-webkit-scrollbar-thumb:hover {
    background: #CFCFCF;
  }
  /* -------------POPUP CSS-------------- */
  .mapboxgl-popup-tip {
    display: none !important
  }
  #map .mapboxgl-popup.mypopup {
    max-width: 100% !important;
    width: 100% !important;
    background: transparent !important;
    display: flex;
    flex-direction: column;
    height: calc(100% - 100px);
    z-index: 400;
    position: fixed;
  }
  @media screen and (min-width:768px) {
    #map .mapboxgl-popup.mypopup {
      width: 50% !important;
      max-width: 50% !important;
      right: 0 !important;
      left: auto !important;
    }
  }
  @media screen and (min-width:1920px) {
    #map .mapboxgl-popup.mypopup {
      width: 33% !important;
      max-width: 33% !important;
      right: 0 !important;
      left: auto !important;
    }
  }
  .mapboxgl-popup {
    transform: none !important;
    right: 0px !important;
    top: 100px !important;
    left: auto;
  }
  #map .mapboxgl-popup-content {
    border: 0px !important;
    border-radius: 0px !important;
    color: #D1F7D5 !important;
    position: relative !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 0 !important;
    pointer-events: auto !important;
  }
  /*------------------Button close Pop up--------------------------*/
  #map .mapboxgl-popup-close-button {
    border-radius: 100%;
    cursor: pointer;
    background-color: #000;
    font: normal 100 65px/1rem 'roboto', sans-serif, Arial;
    align-items: center;
    align-content: center;
    width: 49px;
    height: 49px;
    color: #ffff66;
    margin: 11px 11px 61px 0px;
    padding: 0px 3px 16px 3px;
    z-index: 500;
    transition: all .5s ease-in-out;
  }
  #map .mapboxgl-popup-close-button:hover {
    background-color: #ffff66;
    color: #000;
    transition: all .5s ease-in-out;
  }
  /*------------------MY POP UP--------------------------*/
  #map .mapboxgl-popup-content {
    position: relative;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    pointer-events: auto;
    height: 100%;
  }
  #map .mapboxgl-popup-content button + div {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .mypopup-content {
    color: #E4572E;
    background: #ffff66;
    padding: 0px !important;
    overflow: auto;
    flex: 1;
  }
  .mypopup-content img {
    display: block;
    font: normal 600 30px/35px 'source_code_proregular', arial !important;
    text-align: center !important;
    text-transform: uppercase !important;
    padding: 26px 0px 26px 0px;
    width: auto;
    margin: auto;
  }
  .mypopup-content img[alt] {
    text-align: center;
    text-transform: uppercase;
    margin: auto;
  }
  .mypopup-content h4 {
    border-bottom: 1px dashed #E96861;
    margin: 26px 0px 26px 0px;
  }
  .titrepoeme {
    font: normal 300 15px/18px 'robotolight', sans-serif;
    color: #E96861;
    align-items: center;
    text-align: right;
    text-transform: uppercase;
    padding: 0px 26px 0px 26px !important;
  }
  .mapboxgl-popup-content h1 {
    background: #E4572E;
    text-transform: uppercase;
    text-decoration: underline;
    letter-spacing: -0.03em;
    color: #ffff66;
    border-radius: 0px 30px 0px 0px;
    padding: 0px 48px 0px 26px;
    height: 123px;
    display: flex;
    font: 600 30px/97% 'source_code_proregular', Arial;
    align-items: center;
    align-content: center;
    width: auto;
    overflow: hidden;
  }
  .mapboxgl-popup-content h1:hover {
    opacity: 0.98;
  }
  h2 #position {
    display: flex;
    flex-direction: row;
    align-items: center;
    height: 70px;
    padding: 10px 26px 10px 0px;
  }
  .mypopup-content h2 {
    display: flex;
    flex-direction: row;
    align-items: center;
    font: normal normal 20px/23px 'robotoregular', sans-serif;
    color: #E4572E;
    border-bottom: 1px dashed #E4572E;
    padding: 15px 26px 15px 26px;
    text-transform: uppercase;
  }
  .mypopup-content h3 {
    font: normal 300 15px/18px 'robotolight', sans-serif;
    color: #E96861;
    align-items: center;
    text-align: right;
    text-transform: uppercase;
    padding: 26px 26px 0px 26px;
  }
  .mypopup-content p.poeme {
    font: normal 600 30px/35px 'source_code_proregular', arial;
    text-align: center;
    text-transform: uppercase;
    padding: 26px 26px 26px 26px;
    margin: 1px;
  }
  .mypopup-content audio {
    display: block;
    height: 5rem !important;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 50px;
  }
  .mypopup-content .agepoeme {
    display: inline;
    font: normal 300 15px/18px 'robotolight', sans-serif;
    padding: 5px 26px 52px 6px;
    margin: 55px;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
  }
  .mypopup-content h4 {
    border-bottom: 1px dashed #E96861;
    margin: 26px 0px 26px 0px;
  }
  .mypopup-content blockquote {
    font: normal 400 1.5rem/2rem "Cormorant Garamond", serif;
    padding: 13px 26px 13px 26px;
    text-align: justify;
  }
  /*.mypopup-content blockquote::before {
  content: open-quote;
  font: normal 400 2rem/2rem 'Roboto-Regular', sans-serif, Arial;
  }
.mypopup-content blockquote::after {
  content: close-quote;
  font: normal 400 2rem/2rem 'Roboto-Regular', sans-serif, Arial;
}*/
  .mypopup-content .auteur {
    display: inline;
    font: normal 300 15px/18px 'robotolight', sans-serif;
    padding: 5px 0px 26px 26px;
    margin: 0 !important;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
  }
  .mypopup-content .age {
    display: inline;
    font: normal 300 15px/18px 'robotolight', sans-serif;
    padding: 5px 26px 52px 6px;
    margin: 0 !important;
    width: 100%;
    text-align: left;
    text-transform: uppercase;
  }
  /*.mypopup-content .age::before{
  content:"/";
      padding: 0px 7px 0px 0px;
}*/
  @media screen and (min-width:750px) {
    .mapboxgl-popup-content {
      padding: 0px 40px 0px 40px;
    }
    .mapboxgl-popup-content h1 {
      color: #ffff66 !important;
      -webkit-text-fill-color: #ffff66;
      padding: 20px 40px 40px 40px;
      height: 100px;
    }
    .mypopup-content h2 {
      padding: 30px 40px 30px 40px;
    }
    .mypopup-content h3 {
      padding: 26px 40px 0px 40px;
    }
    .titrepoeme {
      padding: 0px 40px 0px 40px !important;
    }
    .mypopup-content p.poeme {
      padding: 40px 40px 40px 40px;
    }
    .mypopup-content p {
      padding: 20px 40px 40px 40px;
    }
    .mypopup-content audio {
      /*padding: 15px 40px 15px 40px;*/
    }
    .mypopup-content blockquote {
      padding: 20px 40px 20px 40px;
    }
    .mypopup-content .auteur {
      padding: 8px 0px 20px 40px;
    }
    .mypopup-content p.age {
      padding: 1px 40px 40px 6px;
    }
  }
  #map .mapboxgl-ctrl-top-right {
    display: flex !important;
    top: 0;
    right: 0;
  }
  @media screen and (min-width:992px) {
    .mapboxgl-popup-content {
      padding: 0px 60px 0px 60px;
    }
    .mapboxgl-popup-content h1 {
      padding: 0px 60px 0px 60px;
      height: 230px;
      color: #D1F7D5;
      font: 600 48px/97% 'source_code_proregular', Arial;
    }
    .mypopup-content h2 {
      padding: 30px 60px 30px 60px;
    }
    .mypopup-content h3 {
      padding: 26px 60px 0px 60px;
    }
    .titrepoeme {
      padding: 0px 60px 0px 60px !important;
    }
    .mypopup-content p.poeme {
      padding: 60px 60px 60px 60px;
    }
    .mypopup-content p {
      padding: 30px 60px 60px 60px;
    }
    .mypopup-content audio {
      /*padding: 20px 60px 20px 60px;*/
    }
    .mypopup-content blockquote {
      padding: 30px 60px 30px 60px;
    }
    .mypopup-content .auteur {
      padding: 10px 0px 30px 60px;
    }
    .mypopup-content p.age {
      padding: 1px 60px 60px 6px;
    }
  }
  /*------------------bouton geolocalisation et search--------------------------*/
  /*-----------Taille de l'icône---------------*/
  #map button.mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {
    width: 50px;
    height: 50px;
  }
  #map .mapboxgl-ctrl-top-right .mapboxgl-ctrl mapboxgl-ctrl-group {
    margin: 10px 10px 0 0;
  }
  #map .mapboxgl-ctrl-top-right .mapboxgl-ctrl .mapboxgl-ctrl-group {}
  #map .mapboxgl-ctrl-geocoder--input {}
  #map .mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder .suggestions {
    box-shadow: 0 0 10px 2px rgba(0, 0, 0, .1);
  }
  #map .mapboxgl-ctrl-geocoder--input {}
  #map input.mapboxgl-ctrl-geocoder--input {}
  #map .mapboxgl-ctrl-geocoder, .mapboxgl-ctrl-geocoder *, .mapboxgl-ctrl-geocoder *:after, .mapboxgl-ctrl-geocoder *:before {
    box-sizing: border-box;
  }
  #map .mapboxgl-ctrl-group:not(:empty) {}
  #map .mapboxgl-ctrl-icon.mapboxgl-ctrl-geolocate {}
  /*------------------Search bar--------------------------*/
  #map .mapboxgl-ctrl-top-right .mapboxgl-ctrl {
    margin: 10px 10px 0 0;
    float: none;
  }
  /*border: 1px solid #38A56F;
box-sizing: border-box;*/
  /*------------------logo mapbox--------------------------*/
  .mapboxgl-ctrl-attrib .mapbox-improve-map {
    display: none;
  }
  .mapboxgl-ctrl-attrib {
    display: none;
  }
  .mapboxgl-ctrl-attrib a:hover {
    display: none;
  }
  .mapboxgl-ctrl-logo {
    display: none;
  }
  #map a.mapboxgl-ctrl-logo {
    display: none;
  }
  /*------------------share button--------------------------*/
  .resp-sharing-button__link, .resp-sharing-button__icon {
    display: inline-block
  }
  .resp-sharing-button__link {
    text-decoration: none;
    color: #fff;
    margin: 0.5em
  }
  .resp-sharing-button {
    border-radius: 5px;
    transition: 25ms ease-out;
    padding: 0.5em 0.75em;
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif
  }
  .resp-sharing-button__icon svg {
    width: 1em;
    height: 1em;
    margin-right: 0.4em;
    vertical-align: top
  }
  .resp-sharing-button--small svg {
    margin: 0;
    vertical-align: middle
  }
  /* Non solid icons get a stroke */
  .resp-sharing-button__icon {
    stroke: #fff;
    fill: none
  }
  /* Solid icons get a fill */
  .resp-sharing-button__icon--solid, .resp-sharing-button__icon--solidcircle {
    fill: #fff;
    stroke: none
  }
  .resp-sharing-button--twitter {
    background-color: #55acee
  }
  .resp-sharing-button--twitter:hover {
    background-color: #2795e9
  }
  .resp-sharing-button--pinterest {
    background-color: #bd081c
  }
  .resp-sharing-button--pinterest:hover {
    background-color: #8c0615
  }
  .resp-sharing-button--facebook {
    background-color: #3b5998
  }
  .resp-sharing-button--facebook:hover {
    background-color: #2d4373
  }
  .resp-sharing-button--tumblr {
    background-color: #35465C
  }
  .resp-sharing-button--tumblr:hover {
    background-color: #222d3c
  }
  .resp-sharing-button--reddit {
    background-color: #5f99cf
  }
  .resp-sharing-button--reddit:hover {
    background-color: #3a80c1
  }
  .resp-sharing-button--google {
    background-color: #dd4b39
  }
  .resp-sharing-button--google:hover {
    background-color: #c23321
  }
  .resp-sharing-button--linkedin {
    background-color: #0077b5
  }
  .resp-sharing-button--linkedin:hover {
    background-color: #046293
  }
  .resp-sharing-button--email {
    background-color: #777
  }
  .resp-sharing-button--email:hover {
    background-color: #5e5e5e
  }
  .resp-sharing-button--xing {
    background-color: #1a7576
  }
  .resp-sharing-button--xing:hover {
    background-color: #114c4c
  }
  .resp-sharing-button--whatsapp {
    background-color: #25D366
  }
  .resp-sharing-button--whatsapp:hover {
    background-color: #1da851
  }
  .resp-sharing-button--hackernews {
    background-color: #FF6600
  }
  .resp-sharing-button--hackernews:hover, .resp-sharing-button--hackernews:focus {
    background-color: #FB6200
  }
  .resp-sharing-button--vk {
    background-color: #507299
  }
  .resp-sharing-button--vk:hover {
    background-color: #43648c
  }
  .resp-sharing-button--facebook {
    background-color: #3b5998;
    border-color: #3b5998;
  }
  .resp-sharing-button--facebook:hover, .resp-sharing-button--facebook:active {
    background-color: #2d4373;
    border-color: #2d4373;
  }
  .resp-sharing-button--twitter {
    background-color: #55acee;
    border-color: #55acee;
  }
  .resp-sharing-button--twitter:hover, .resp-sharing-button--twitter:active {
    background-color: #2795e9;
    border-color: #2795e9;
  }
  .resp-sharing-button--email {
    background-color: #777777;
    border-color: #777777;
  }
  .resp-sharing-button--email:hover, .resp-sharing-button--email:active {
    background-color: #5e5e5e;
    border-color: #5e5e5e;
  }
  .resp-sharing-button--pinterest {
    background-color: #bd081c;
    border-color: #bd081c;
  }
  .resp-sharing-button--pinterest:hover, .resp-sharing-button--pinterest:active {
    background-color: #8c0615;
    border-color: #8c0615;
  }
  /*------------------share button--------------------------*/
  ul.share-buttons {
    list-style: none;
    padding: 26px 26px 26px 26px;
    margin: auto;
    display: flex;
    align-items: center;
    flex-direction: row;
    justify-content: flex-end;
  }
  ul.share-buttons li {
    display: inline;
  }
  ul.share-buttons li img {
    height: 50px;
  }
  ul.share-buttons li a {
    list-style: none;
  }
  #scroll-section ul.share-buttons li a:hover {
    opacity: 0.5;
    background: transparent;
  }
  #scroll-section ul.share-buttons li a:active {
    background: transparent;
  }
  #scroll-section ul.share-buttons li a:visited {
    background: transparent;
  }
  #scroll-section ul.share-buttons li a:link {
    background: transparent;
  }
  ul.share-buttons .sr-only {
    position: absolute;
    clip: rect(1px 1px 1px 1px);
    clip: rect(1px, 1px, 1px, 1px);
    padding: 0;
    border: 0;
    height: 1px;
    width: 1px;
    overflow: hidden;
  }
  /*-----------Bouton Participer------------*/
  .button-contribute {
    display: inline-block;
    padding: .50rem 1.25rem;
    border-radius: 10rem;
    color: #2F2F2F;
    text-transform: uppercase;
    font-size: 1rem;
    letter-spacing: .15rem;
    transition: all .3s;
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: 2px solid #bcbcbe;
    font: 600 18px/25px 'robotoregular', sans-serif, Arial;
    text-decoration: none;
  }
  .button-contribute:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 10rem;
    z-index: -2;
  }
  .button-contribute:before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0%;
    height: 100%;
    background-color: #2F2F2F;
    transition: all .3s;
    border-radius: 10rem;
    z-index: -1;
  }
  .button-contribute:hover {
    color: #fff;
  }
  .button-contribute:hover:before {
    width: 100%;
  }
  .container-contribute {
    padding-top: 9px;
    margin: 0 auto;
    width: 100%;
    text-align: center;
  }