/* Feuille de style principale du site web. Bien penser à incrémenter le numéro de version dans son
nom à chaque modification ainsi que dans sa déclaration (head.php) pour forcer le navigateur client
à mettre à jour le cache à chaque nouvelle version du fichier */
h1
{
text-align: center;
}
h2
{
text-align: center;
}
h3
{
text-align: center;
}
h4
{
text-align: center;
}
textarea{
  font-size:16px;
  resize:none;
}
.mess_discu{
  resize: none;
  border-radius: 0.5em;
}
body
{
background-color: rgb(238, 242, 247);
margin-top: 0px;
margin-left: 0px;
margin-right: 0px;
font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
}

select {
  background-color: #eef2f7;
  font-family: Helvetica, Arial, sans-serif;
font-size: 16px;
text-align: center;
padding: 4px;
/*height:35px;*/
border-radius:0.5em;
}

kbd {
  background-color: #eee;
  border-radius: 3px;
  border: 1px solid #b4b4b4;
  box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.2),
    0 2px 0 0 rgba(255, 255, 255, 0.7) inset;
  color: #333;
  display: inline-block;
  font-size: 0.85em;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  white-space: nowrap;
}


.tablecreersortie td,tr {
  text-align: left;
  border: none;
}

#checkmembres {
  display: none;
}
#invitationS:checked  ~ #checkmembres {
  display: block; 
  height:118px;
}
#invitationG:checked  ~ #checkmembres {
  display: none; 
}
#invitationT:checked  ~ #checkmembres {
  display: none; 
}

.agauche {
  text-align: left;
  
}

.footermap {
  background: #107aca; 
  /*padding: 1em;*/
  border:2px solid #107aca;
  /*font-size: 1.2em;*/
  color:#f6f9f9;
  text-align: center;
}

#loader {
  position: absolute;
  top: 40%;
  left: 40%;
  width: 150px;
  height: 150px;
  z-index: 200;
  overflow: visible;
  background: #ff3a5e00 url('images/ZKZg50_50.gif') no-repeat center center;
  display:none;
}

.apropos {
margin: 5px;
padding: 5px;
text-align: justify;
}

fieldset{
  border:1px solid #107aca;
  border-radius:0.5em;
}

legend{
  font-size:16px;
  color:#107aca;
  
}
#legendaccueil{
  font-size:18px;
  color:#107aca;
}
#legendmasque{
  font-size:16px;
  color:#ba37c6;
}

ul.liste2 {
  text-align:left;
  list-style-type: none;
  margin-left: -2em;
}

li{
 margin-bottom: 0.8em; 
}

.formulaire{
	display: flex;
  flex-direction: column;
  align-items: center;
}
.formulaire input[type="text"],input[type="password"],input[type="number"],input[type="email"],input[type="tel"] {
padding: 2px;
height: 35px;
border-radius: 0.5em;
font-size: 16px;
}

.formulaire input[type="date"]{
height: 35px;
border-radius: 0.5em;
font-size: 16px;
width: 9em;
}
.formulaire input[type="time"] {
  height: 35px;
  border-radius: 0.5em;
  font-size: 16px;
  width: 5em;
  }

.formulaire-H{
	display: flex;
  /*flex-direction: row;*/
  /*align-items: center;*/
}


input:invalid {
  box-shadow: 0 0 3px 1px red;
}

select:invalid {
  box-shadow: 0 0 3px 1px red;
}



input:focus:invalid {
  outline: none;
}
textarea:invalid {
  box-shadow: 0 0 3px 1px red;
}

#number7{
  width: 5em;
}

#number3{
  width: 3em;
}

.grandecase{
  transform : scale(2);

}

.form-group{
margin: 5px;
text-align: center;

}


.form-group-wrapper{
  margin: 5px;
  text-align: center;
  
  display: flex;

  }

.form-group-wrapper input[type="text"] {
  flex: 1 1 auto;
}

.alert-danger{
	
margin: 5px 5px;
background-color: #FF3A5E;
text-align: center;
border-radius: .5em;
padding: 1px;

}
.alert-success{
margin: 5px 5px;
background-color: #21FF2C;
text-align: center;
border-radius: .5em;
padding: 1px;		
}

.affiche_error{
  text-align: center;
  color: #FF3A5E;
}

.affiche_sortie{
  text-align: center;
}
.mevmess{

  color:#8fa0b5;
  font-size:12px;

}
.mevrelief{

  text-shadow: 1px 1px 3px;
  color:#144d79;
}
.mevc{
  border-radius: .5em;
  background: #d4a1edc1;
  padding: 2px;
  margin: 15px;
  
} 
.mev{
  font-weight: bold;
}
.mevi{
  font-style: italic;
}
.mevlr{
  font-weight: bold;
  color:  rgb(243, 77, 77);
}

.mevr{
  font-weight: bold;
  background: rgb(243, 77, 77);
  border-radius: .2em;
  color: #fff;
  padding: 2px;

}
.mevg{
  font-weight: bold;
  background: green;
  border-radius: .2em;
  color: #fff; 
  padding: 2px;
}
.mevw{
  font-weight: bold;
  background: #b0d0f7;
  border-radius: .2em;
  color: #fff;
  padding: 2px;
}
.mevo{
  font-weight: bold;
  background: orange;
  border-radius: .2em;
  color: #fff;
  padding: 2px; 
}

.image{
  border-radius: .5em;
  vertical-align: middle;
}

.icone{
  vertical-align:middle;
}


#map {
  /*height: 400px;
  width: 100%;*/
 /*width: 340px;*/
  
  height: 90%;
  width: 100%;
  border:2px solid #104bca;
  z-index: 2;
}

#carteentiere{
  height: 480px;
  width: 100%;
  background:#104bca;
  z-index: 2;
  }

#entetecarto{
  
  background:#104bca;
  color:#f6f9f9;
  text-align:center;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
 padding:0.5em;
  
}

#bascarto{
  
  background:#104bca;
  color:#f6f9f9;
  text-align:center;
  height:1.5em;
  
}

.btn {
    background: rgb(98, 174, 237);
    color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    text-shadow:none;
    font: bold 18px arial, sans-serif;
    padding: 8px;
    box-shadow:0px 0px 4px 3px rgba(106,179,238,.3);
    vertical-align: middle;
    }
.btn:hover {
    background: #107aca;
    color: #fff;
    border: 1px solid #eee;
    border-radius: 20px;
    box-shadow: 5px 5px 5px #eee;
    text-shadow:none;
    font: bold 18px arial, sans-serif;
    padding: 8px;
    vertical-align: middle;
    }

.btn-small {
      background: rgb(98, 174, 237);
      color: #fff;
      border: 1px solid #eee;
      border-radius: 10px;
      text-shadow:none;
      font: bold 14px arial, sans-serif;
      padding: 4px;
      box-shadow:0px 0px 3px 1px rgba(106,179,238,.3);
      vertical-align: middle;
      }
.btn-small:hover {
      background: #107aca;
      color: #fff;
      border: 1px solid #eee;
      border-radius: 10px;
      box-shadow: 5px 5px 5px #eee;
      text-shadow:none;
      font: bold 14px arial, sans-serif;
      padding: 4px;
      vertical-align: middle;
      }



.modal{
  visibility: hidden;
  opacity: 0;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
background: rgba(77,77,77,.7);
display: flex;
justify-content: center;
align-items: center;
transition: .3s;
z-index: 180;
overflow: auto; /* Enable scroll if needed */
}

.modal:target{
  visibility: visible;
  opacity: 1;
}
.modal_content{
  background-color: rgb(238,242,247);
  /*border: 2px rgb(16, 122, 202);*/
  padding: 40px 5px 5px;
  width: 340px;
  max-width: 90%;
  border-radius: 10px;
  position: relative;
  font-size: smaller;
  
}
.modal_content p {
margin: 2px;
}
.modal_close{
  position: absolute;
  right: 10px;
  top: 10px;
  text-decoration: none;
  color: grey;
}

#conteneur-raccourcis{
  display: flex;
  flex-wrap: wrap; 
  justify-content: center;
  margin: 5px;
  border-radius: .2em;
}

#conteneur
    {
        display: flex;
        flex-wrap: wrap; 
        justify-content: center;
        margin: 5px;
        border-radius: .2em;
    }

  #conteneur_mess
  {
      display: flex;
     /* height: 300px;*/
      /*overflow-y: scroll;*/
      scroll-snap-type: y mandatory;
      /*flex-wrap: wrap; */
      flex-direction: column;
      align-items: center;
      margin: 5px;
  }

  #conteneur_infos
  {
      display: flex;
      flex-wrap: wrap; 
      justify-content: center; 
      margin: 5px;
      border-radius: .2em;
  }

  .box_mess
    {
    margin: 5px;
    width: 340px;

     /* height: 400px;*/
      border-radius: 0.5em;
      background-color:#d8e6f7;
      text-align: left;
      padding: 3px;
    }
    .speechd {
      margin:2px;
      width: 310px;
      background-color:#c1d8bd;
      padding: 2px;
      text-align: left;
      border-radius: 0.5em;
      position: relative;
  }

  /* Creates triangular tip on the
     end, for our speech bubble 
     with some styling */
  .speechd::before {
      content: "";
      position: absolute;
      border-left: 5px solid #C1D8BD;
      border-right: 5px solid transparent;
      border-top: 5px solid #C1D8BD;
      border-bottom: 5px solid transparent;
      right: -10px;
      top: 8px;
  }

  .speechg {
    margin:2px;
    width: 310px;
    background-color:#c6dcf7;
    padding: 2px;
    text-align: left;
    border-radius: 0.5em;
    position: relative;
}

/* Creates triangular tip on the
   end, for our speech bubble 
   with some styling */
.speechg::before {
    content: "";
    position: absolute;
    border-left: 5px solid transparent;
    border-right: 5px solid #C6DCF7;
    border-top: 5px solid #C6DCF7;
    border-bottom: 5px solid transparent;
    right: 310px;
    top: 8px;
}

  .boxcontent{
  flex: 1 1 auto;

}

  .box3{
    margin: 1px;
    width: 340px;
    padding: 5px; 
    border: 1px solid #107aca ;
    border-radius: 1em;


  }

  .box
    {
      margin: 5px;
      border-radius: 1em;
      background-color:rgba(212, 153, 242, 0.7);
      box-shadow:4px 4px 3px 0px rgba(98, 68, 112, 0.5);
      text-align: center;
      padding: 3px;
      width: 310px;
      display: flex;
      flex-direction: column;
    }
  
  .box p {
    margin: 0.5em;
  }

    .boxcreersortie
    {
      margin: 1px;
      /*background-color:rgba(212, 153, 242, 0.7);*/
      text-align: left;
      /*border-radius: 1em;
      
      box-shadow:4px 4px 3px 0px rgba(98, 68, 112, 0.5);
     */
      padding: 2px;
      margin: 1px;
      width: 360px;
      display: flex;
      flex-direction: column;
      /*border: 1px solid #107aca ;*/
      /*font-size: 14px;*/
    }

    .boxroadbook
    {
      background-color:#c1dcf0;
      text-align: left;
      border-radius: 1em;
      
      /*box-shadow:4px 4px 3px 0px rgba(98, 68, 112, 0.5);*/
     
      padding: 5px;
      /*margin: 1px;*/
      width: 360px;
      display: flex;
      flex-direction: column;
      border: 1px solid #107aca ;
      /*font-size: 14px;*/
    }    

    .boxaide
    {
      margin: 1px 1px;
      text-align: justify;
      padding: 5px;
      /*width: 350px;*/
      display: flex;
      flex-direction: column;
      border-style: solid;
      border-color:#107aca;
      border-width: 1px;

    }
    .parag-aide{
      margin-bottom: 0em;
    }

    .boxa
    {
    margin: 5px;
    width: 310px;
      border-radius: 1em;
      background-image: url("../images/filigrane_annul.png");
      background-color:#d499f2b4;
      box-shadow:4px 4px 3px 0px rgba(98, 68, 112, 0.5);
      text-align: center;
      padding: 3px;
      display: flex;
      flex-direction: column;
    }

  .box1
    {
    margin: 5px;
    width: 300px;
      border-radius: 1em;
      background-color: rgba(208, 242, 116, 0.7);
      box-shadow:4px 4px 3px 0px rgba(108, 126, 60, 0.5);
      text-align: center;
      display: flex;
      flex-direction: column;
    }
    .box2
    {
    margin: 5px;
    padding: 3px;
    width: 300px;
      border-radius: 1em;
      background-color:rgba(127, 184, 253, 0.7);
      box-shadow:4px 4px 3px 0px rgba(65, 94, 130, 0.5);
      text-align: left;
      display: flex;
      flex-direction: column;
    }  

#barredemenu /* elle intègre le menu burger, le nom du site,..*/
{
     display: flex;
    justify-content: space-between;
    /*position: fixed;  pour que la barre de menu et ce qu'elle contient reste en place quand on scroll */
    background-color: #107aca;

  
    margin-top: -20px; /* Pour corriger le fait qu'un décalage se crèe en haut de la page quand on charge un script avec require (??)*/

    height: 70px;
    width: 100%; /* precedemment en commentaire */
    
    
}
.nomsite /* nom du site dans la barre de menu*/
{
margin: auto;
font-size: xx-large;
font-style: italic;
font-weight: bold;
color:#eef2f7
}
.site_logo  /*logo du site dans la barre de menu */
{
margin-top: 5px;
margin-right: 5px;
vertical-align: middle;
}

#fleche {
  /* Pour que la checkbox de la flèche ne s'affiche pas */
  display: none;
}

#fleche-logo {
  /* Pour que le curseur soit un pointeur */
  cursor: pointer;
  display: inline-block;
  font-size: 30px;
    /* Pour qu'il y ait une animation */
  transition: 0.7s;
}

#fleche:checked ~ #fleche-logo {/*Lorsque la case (devenue flèche) est cochée.*/
  /* la flèche tourne quand on clique dessus */
  transform: rotate(-0.50turn);
  transform-origin: 50% 60%;
}


/* début du menu burger*/
* {
  /* Pour que les tailles soient correctes */
  box-sizing: border-box;
}

.menu {

  /* Pour que le menu ne soit pas sur le texte et que ce dernier puisse être sélectionné */
  width: 0px;
  z-index: 100;
  
}

#hamburger {
  /* Pour que la checkbox ne s'affiche pas */
  display: none;
}

#hamburger-logo {
  /* Pour que le curseur soit un pointeur */
  cursor: pointer;
  background:#107aca;
  width: 35px;
  border-radius: 1em;
  display: block;
  color:#eef2f7;
  font-size: 35px;
  /* Pour que le menu hamburger s'affiche toujours */
  text-align: left;
  /* Pour que le menu hamburger soit "rangé" par défaut */
  /*transform: translateX(-10px);*/
  padding: 9px 0px 3px 5px;
}



.navmenu {
  display: flex;
  flex-direction: column;
  /*background: #72DD6A;*/
  background:#107aca;
  overflow: hidden;
  width: 190px;
  
  /* Pour que les liens soient "rangés" par défaut */
  transform: translateX(-190px);
}

#hamburger-logo,
nav {
  /* Pour qu'il y ait une animation */
  transition: 0.7s;
}

/* Lorsque #hamburger est coché, le #hamburger-logo et le nav qui sont dans le même parent changent de propriété */
#hamburger:checked ~ #hamburger-logo,
#hamburger:checked ~ nav {
  /* Changement de la position pour afficher les menus */
  transform: translate(0);
}
#hamburger:checked ~ #hamburger-logo {
  /* le hamburger tourne quand on clique dessus */
  transform: rotate(0.25turn);
  transform-origin: center;
}

nav a {
  color: white;
  text-decoration: none;
  padding: 7px;
}

nav a:hover {
  /*background: #72DD6A;*/
  background:#4095d5;
}
/* fin du menu burger*/

#pieddepage /* ..ou footer: affiché en bas de chaque page*/
{
    display: flex;
    flex-wrap: wrap; /* les élements du footer vont � la ligne quand il n'y a plus de place sur la ligne*/
    justify-content: space-around; /*les �l�ments sont �tir�s sur tout l'axe, mais ils laissent aussi de l'espace sur les extr�mit�s.*/
    height: 50px;
    vertical-align: middle;
    /*background-color: #72DD6A;*/
    background-color:#107aca;
    
}

.eltpied /* les �l�ments qui composent le footer */
{
    margin: auto;
    color:#eef2f7;
}

/* le css relatif à l'affichage de lat et long sur la carte*/
.leaflet-control-coordinates {
	background: white;
	border-radius: 4px;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.65);
	cursor: pointer;
	padding: 2px 5px;
}

.leaflet-control-coordinates.hidden {
	display: none;
}

.leaflet-control-coordinates-lng {
	padding-left: 5px;
}
td,th{
  border: 1px solid #107aca;
  text-align: center;
  padding: 5px;
}

thead,
tfoot {
  background-color: #107aca;
  color: #fff;
}

.suggestions {
  border: 2px solid #107aca;
  border-radius:0.5em;
  max-height: 200px;
  max-width: 300px;
  overflow-y: auto;
  position: absolute;
  background-color: white;
  z-index: 1000;
}
.suggestion-item {
  padding: 3px;
  cursor: pointer;
}
.suggestion-item:hover {
  background-color: #f0f0f0;
}
#imageClignotante {
  animation: clignoter 1s infinite;
}

@keyframes clignoter {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}