body {
  margin-top: 55px;
  /* fond menu et couleur écriture */
  --couleurprincipale: teal; 
  /* fond des éléments */
  --couleurfond: #E8E7CE;
  /* lien */
  --couleurlien: #bf565f;
  /* over et sous-titres */
  --couleurover: #567356;
  /* écriture menu */
  /*--couleurmenu: #BCD99C;*/
  --couleurmenu: lightcyan;
  /* gris ombre */
  --couleurombre: #7f7f7f;
   /* fond leste complémentaire */
  --couleursup: #B15F16;
  /*font-family: averia-gruesa-libre;*/
    font-family: sans-serif;
  font-style: normal;
  font-weight: 400;
  color: var(--couleurprincipale);
}

a, a:visited, a:focus {
  color: var(--couleurlien);
  font-weight: bold;
}
a:active, a:hover {
  color: var(--couleurover);
  font-style: normal;
  font-weight: bold;
  text-decoration: none;
}
main {
    margin-bottom: 50px;
}
#footer {
    background-color: #E4F2FF;
    position: fixed;
    bottom: 0;
    padding-top: 2px;
    width: 100%;
    zindex: 1000;
    color: firebrick;
    font-size: 10px;
    line-height: 12px;
}
#compteur {
    font-family: "digital dark system";
}
#pseudo2 {
    color: #AF8E02;
    font-size: 33px;
    margin-top: 4px;
    margin-bottom: 8px;
}
#macarte {
  border-radius: 15px;
  max-width: 1500px;
  height: 35vw;
  min-height: 450px;
  max-height: 600px;
  margin: 0em;
  margin-bottom: 10px;
}
#logocarte {
  position: relative;
  display: block;
  top: 406px;
  right: 15px;
  cursor: pointer;
}
#cartedialog {
  padding: 0px;
  max-width: 1000px;
  width: 95%
}
#cartediv {
  margin: 0px;
  height: 500px;
  cursor: pointer;
}
#boutoncarte {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
#bouton2carte {
  position: absolute;
  display: block;
  top: 50px;
  right: 10px;
  cursor: pointer;
}
#logocarteclub {
  position: relative;
  display: block;
  top: 93px;
  right: 2px;
  cursor: pointer;
}
#cartedialogclub {
  padding: 0px;
  max-width: 1000px;
  width: 95% 
}
#cartedivclub {
  margin: 0px;
  height: 500px;
  cursor: pointer;
}
#boutoncarteclub {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
#logocarteprofilclub {
  position: relative;
  display: block;
  top: 439px;
  right: 2px;
  cursor: pointer;
}
#cartedialogprofilclub {
  padding: 0px;
  max-width: 1000px;
  width: 95% 
}
#cartedivprofilclub {
  margin: 0px;
  height: 500px;
  cursor: pointer;
}
#boutoncarteprofilclub {
  position: absolute;
  display: block;
  top: 10px;
  right: 10px;
  cursor: pointer;
}
#sites {
  background-color: var(--couleurmenu);
}
#choisirsite {
    line-height: 1.1rem;
}
.messajoute {
    color: firebrick;
    font-weight: bold;
    font-size: 0.8em;
    text-align: center;
    line-height: 11px;
}
.selectclub {
    margin-top: 10px;
}
.clubplongee1 {
    font-size: 1.3em;
    margin-top: 5px;
    margin-left: 5px;
}
.listeactions {
    line-height: 19px;
}
.cartechamp {
  padding: 0px;
  height: 30px;
  border: solid 1px gray;
  cursor: pointer;
}
.carteclub {
  padding: 0px;
  margin-top: -5px;
  height: 30px;
  border: solid 1px gray;
  cursor: pointer;
}
.pashaut {
   margin-top: 5px;
   height: 33px;
   padding: 0px;
   padding-left: 10px;
   padding-right: 10px;
}
.navbar {
  background-color: var(--couleurprincipale);
}
.dropdown-menu {
  background-color: var(--couleurprincipale);
   color: var(--couleurmenu);
}
.dropdown-menu a {
  background-color: var(--couleurprincipale);
  text-decoration: none;
  color: var(--couleurmenu);
  font-weight: bold;
}
.dropdown-menu a:visited {
  background-color: var(--couleurprincipale);
  text-decoration: none;
  /*color: var(--couleurmenu);*/
  font-weight: bold;
}
.dropdown-menu :hover {
  color: var(--couleurfond);
  /*color: var(--couleurmenu);*/
  font-weight: bold;
  background-color: var(--couleurprincipale);
}
.dropdown-item {
    cursor: pointer;
}
.dropdown-item.active{
    background-color: var(--couleurprincipale);
}

.jumbotron-fluid {
  /*border-radius: 10px; 4px;*/
  /*border: medium groove var(--couleurmenu);*/
  margin-top: 0.5em;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0em;
  padding-top: 0.2em;
  padding-right: 1em;
  padding-left: 1em;
  padding-bottom: 0.2em;
  background-color: white; /*white;*/
  max-width: 1350px;
}
.mention {
  max-width: 800px; 
}
.membres {
  /*border-radius: 6px;
  border: medium groove var(--couleurmenu);*/
    
  color: firebrick;
  background-color: #A9F5F2;
  /*margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: auto;*/
  border-radius: 15px;
  padding-top: 5px;
  padding-left: 13px;
  padding-right: 10px;
  padding-bottom: 10px;
  border: none;
  width: 300px;
  line-height: 1.2rem;
    
  /*margin-top: 8em;*/
}
.mesmails {
 color: var(--couleurprincipale);
 line-height: 1em;
}
#information {
  margin-bottom: 0em;
  margin-top: -0.5em;
  padding: 0px ;
  line-height: 100% ;  
}
#entete {
  margin-bottom: 2px;
  margin-top: 0em;
  padding: 0px ;
  line-height: 100% ;
  text-align: center;
}
.plusvert {
  position: fixed;
  z-index: 5000;
  bottom : 10px;
  right : 10px;
  cursor: move;
}
#plongeur {
  -webkit-box-shadow: 3px 3px 5px 0px var(--couleurombre);
  box-shadow: 3px 3px 5px 0px var(--couleurombre);  
}
.card-body {
  padding-left: 8px;
  padding-right: 8px;
}
.card {
  border: none;
  border-radius: 15px;
  overflow: hidden;
  background-color: #A9F5F2;
  margin-top: 0.5px;
  margin-right: auto;
  margin-left: auto;
  margin-bottom: 0.5em;
  padding: 0;
  cursor: pointer;
  max-width: 300px;
}
.cardindex {
  border: none;
  border-radius:15px;
  overflow: hidden;
  background-color: #A9F5F2;
  margin-bottom: 0.5em;
  padding: 5px;
}
.card-img-top {
  border-radius: 10px;
  border: medium solid var(--couleurmenu);
}
.card-body .btn.btn-primary {
  background-color: var(--couleurprincipale);
}
.card p {
  margin-bottom: 0em;
  margin-top: -0.5em;
  padding: 0px ;
  line-height: 105% ;
  font-size: 0.9rem;
}
.card-header h4 {
    font-size: 1.2rem;
}
.card-header {
  /*height: 70px;*/
  line-height: 80%;
  color: var(--couleurlien);
  /*background-color:red; */  
  /*margin: -0.1em;*/
  /*padding-top: 0.5em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  padding-right: 1em;*/
}
.card-header p { 
  font-weight: normal;
  color: var(--couleurprincipale);
}
.cardfiche {
  padding-top: 0em;
  padding-bottom: 0em;
  cursor: default;
}
.cardfiche-header {
  margin: 0px;
  background-color: var(--couleurmenu);
}
.cardfiche-header h4 {
  color: var(--couleurprincipale);
}
.cardfiche-headerhorsclub  {
  margin: 0px;
  background-color: lavender;
  color: royalblue;
}
.cardfiche h4 {
  line-height: 80%;
  margin-top: 0em;
  margin-bottom: 0em;
}
.cardfiche p {
  margin-top: -10px;
  margin-bottom: -10px;
  padding-top: 0em;
  padding-bottom: 0em;
}
.cardfiche-footer {
  padding-top: 0px;
}
.ducode {
  margin-bottom: 0em;
  margin-top: 0em;
}
.codereponse {
  margin-left: auto;
  margin-right: auto;
  width: 280px;
}
.codereponse p {
  margin-bottom: 1.2em;
  margin-top: 0.5em;
  line-height: 14px;
}
.anavant {
  margin-top: -1.4em;
  margin-left: auto;
  margin-right: auto;
  width: 140px;
}
.formcode {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.1em;
  margin-bottom: -0.1em; 
  width: 280px;
}
.moncheck {
  margin-top: 0.7em;
  margin-bottom: -0.9em;
}
.troispoints {
  position: absolute;
  top : 0px;
  right : 0px;
  cursor: pointer;
}
.pastille {
  position: absolute;
  right : 4px;
  top : 27px;    
}
.flechebas {
  position: absolute;
  top : 46px;
  right : 0px;
  cursor: pointer;
}
.boitedialog {
  /*background-color: var(--couleurfond);*/
  border: none;
  /*border-style: solid;*/
  border-radius: 15px;
  /*border: medium groove var(--couleurover); */
  background-color: #A9F5F2;
}
dialog::backdrop {
  background-color: black;
  opacity: 0.8;
}
.bordrouge {
  border-color: red;
}
.texteindex {
  background-color: var(--couleurmenu);
  /*font-weight: bold;*/
}
.textesup {
  color: var(--couleursup);
}
.fondfonce {
  background-color: var(--couleurover);  
}
.list-group.list-group-flush .list-group-item {
  border-radius: 10px;
  background-color: var(--couleurmenu);
  padding: 0.1em;
  margin-top: 5px;
  text-align: center;
  font-size: small;
}
#imagebandeau {
  margin-top: 3.5em;
}
.newplongeeclass {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0em;
  margin-bottom: 0em;
  /*height: 5em;*/
}
.newsiteclass {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0em;
  margin-bottom: 0em;
  height: 5em;
  width: 330px
}
.newplongeeclass #comment {
  margin-top: 0em;
}
/*.profilclass {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: auto;
  border-radius: 10px;
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  border: medium ridge var(--couleurover);
  width: 280px;
  -webkit-box-shadow: 5px 5px 5px 0px var(--couleurombre);
  box-shadow: 5px 5px 5px 0px var(--couleurombre);
  /*height: 3.3em;*/
/*}*/
.profilplus {
  color: firebrick;
  background-color: #A9F5F2;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: auto;
  border-radius: 15px;
  padding-top: 5px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
  border: none;
  /*width: 280px;*/
  line-height: 1.2rem;
}
.profilclass {
  color: firebrick;
  background-color: #A9F5F2;
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: auto;
  border-radius: 15px;
  padding-top: 5px;
  padding-left: 13px;
  padding-right: 10px;
  padding-bottom: 10px;
  border: none;
  width: 280px;
  line-height: 1.2rem;
}
.profilclass small {
  color: var(--couleurprincipale);
  margin-top: 5px;
  margin-bottom: 1px;
  line-height: 11px;
}
.profilajoutesite {
  margin-left: auto;
  margin-right: auto;
  margin-top: 5px;
  margin-bottom: auto;
  border-radius: 10px;
  padding-top: 0px;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 10px;
}
.profilajoutesite small {
  margin-top: 3px;
  margin-bottom: 2px;
  line-height: 11px;
  color: var(--couleurprincipale);
}
.telprofil {
  height: 30px;
  width: 180px;
  background-color:  var(--couleurmenu);
}
.longprofil {
  height: 30px;
  width: 250px;
  background-color:  var(--couleurmenu);
}
.latprofil {
  height: 30px;
  width: 200px;
  background-color:  var(--couleurmenu);
}
.latprofil:disabled {
  color: var(--couleurprincipale);
  background-color:   var(--couleurmenu);
  /*border: solid 1px green;
  /* border:  red;
 border: medium ridge var(--couleurprincipale);
  border: solid;
  */ 
}
.longprofil:disabled {
  color: var(--couleurprincipale);
  background-color:   var(--couleurmenu);
  /*border: solid 1px green;
  /* border:  red;
 border: medium ridge var(--couleurprincipale);
  border: solid;
  */ 
}
.longprofilneutre {
  border-radius: 4px;
  border: medium ridge gray;
  height: 30px;
  width: 250px;
  background-color: var(--couleurfond);
}
.courtprofil {
  height: 30px;
  width: 80px;
  background-color:  var(--couleurmenu);
}
.microprofil {
  height: 30px;
  width: 40px;
  background-color:  var(--couleurmenu);
}
.moyenprofil {
  height: 30px;
  width: 140px;
  background-color:  var(--couleurmenu);
}
#memeadresse {
  margin-bottom: 0px;  
  margin-top: 8px;
}
.serre {
  line-height: 15px;
  padding: 4px;
}
.labelclass {
  color:  var(--couleurprincipale);
}
.newplongeeclass small {
  color:  var(--couleurprincipale);
  margin-top: 4px;
  margin-bottom: 0.3em;
}
.newsiteclass small {
  color:  var(--couleurprincipale);
  margin-top: -0.7em;
  margin-bottom: 0.5em;
}
.profilclass h2{
  margin-top:0.5em;
  font-size: 1em;
  line-height: 0.4em;
}
.videoclass {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
  border: solid 1px var(--couleurprincipale);
}
.identclass {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.3em;
  margin-bottom: 0.3em;
}
.identclass small {
  color:  var(--couleurprincipale);
  margin-top: -0.7em;
  margin-bottom: 0.3em;
}
.identclass2 {
  margin-left: auto;
  margin-right: auto;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  height: 4.7em;
  align-content: center;
}
.labelcode {
  color:  var(--couleurprincipale);
  margin-top: 0em;
  margin-bottom: 0em;
}
/*#repcaptcha1 {
  align: center;
  margin-top: 0.2em;
  margin-left: auto;
  margin-right: auto;
  background-color: var(--couleurmenu);
  width: 120px;
}*/
#boutoncaptcha {
  padding: 1px;
  border: solid 1px gray;
}
#identification h1{
  margin-top: -0.2em;
  margin-bottom: -0.1em;
}
#classcheck {
  height: 2em;
}
.cardbouton {
  margin-left: auto;
  margin-right: auto;
  margin-top: 1em;
  padding: 0px;
  width: 300px;
}
.newbouton {
  margin-left: auto;
  margin-right: auto;
  margin-top: 2px;
  margin-bottom: 2px;
}
.champnouveau {
  height: 30px;
  width: 200px;
  background-color: var(--couleurmenu);
  margin-bottom: 0.4em;
  margin-top: -0.2em;
}
.champ {
  height: 30px;
  width: 280px;
  background-color: var(--couleurmenu);
  margin-bottom: -5px;
}
.champident {
  height: 30px;
  width: 250px;
  background-color: var(--couleurmenu);
  margin-bottom: -5px;
}
.champsite {
  height: 30px;
  width: 100%;
  background-color: var(--couleurmenu);
  margin-bottom: -5px;
  margin-top: -5px;
  border: solid 1px green;
}
.longprofil {
  height: 30px;
  width: 250px;
  background-color: var(--couleurmenu);
}
.profil {
  padding-bottom: 10px; 
}
.profil h1 {
  margin-top: -5px;
  margin-bottom: -5px;
  text-align: center;
  color : var(--couleurlien);
  font-size: 2.2em;
}
.profilclass {
    padding-top: 5px;
    padding-bottom: 5px;
}
.profilclass p {
  font-size: 1.5em;
  margin-bottom: 0em;
}
.profilclass h3 {
  font-size: 1.4em;
  color: firebrick;
  margin-top: -0.3em;
  margin-bottom: -0.1em;
}
.creer {
  padding-bottom: 10px;
}
.creer h1 {
  text-align: center;
  color : var(--couleurlien);
  font-size: 2.2em;
}
.creer label {
  font-size: large;
  margin: 0px;
}
.boite {
  max-width: 980px;
  padding: 0em;
  margin-top: 1em;
  margin-bottom: 1em;
  margin-left: auto;
  margin-right: auto;
}
.boite h2 {
  text-align: center;
  padding-left: 10px;
  padding-right: 10px;
  margin-top: 10px;
}
.boite h1 {
  text-align: center;
  color : var(--couleurlien);
  paddind-top: 0px;
  padding-bottom: 0px;
  margin-top  : 0px;
  margin-bottom : 0px;
  font-weight: bold;
}
.boite h3 {
  color: var(--couleurover);
  font-style: italic;
}
.boite h4 {
  text-align: center;
  margin-top: 5px;
  margin-bottom: 1em;
}
.boite p {
  text-align: center;
}
.champsaccueil {
  margin-bottom: 5px;
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-width: 92%; 
}
.beaubouton {
    border: 0;
    line-height: 2.5;
    padding: 0 10px;
    font-size: 1.5rem;
    text-align: center;
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: var(--couleurprincipale);
    background-image: linear-gradient(to top left, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) 30%, rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, 0.6), inset -2px -2px 3px rgba(0, 0, 0, 0.6);
}
.beaubouton:hover {
    background-color: var(--couleurover);
}
.beaubouton:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, 0.6), inset 2px 2px 3px rgba(0, 0, 0, 0.6);
}
.table-striped > tbody > tr:nth-child(odd) {
  background-color: var(--couleurover);
  color: var(--couleurfond);
}
.table-striped > tbody > tr:nth-child(even) {
  color: var(--couleurfond);
  background-color: var(--couleurprincipale);
}
.table-striped > thead > tr {
  color: var(--couleurprincipale);
  background-color: var(--couleurmenu);
}
.minimenu {
  width: 200px;
  height: 50px;
  text-align: center;
  font-size: x-large;
  font-weight: bold;
  display: table;
  padding: 10px;
  border-color: var(--couleurmenu);
}
.container.cadredash {
  margin-top: 1rem;
  max-width: 1000px;
}
.container-fluid.cadrevoyages {
  max-width: 1000px;
}
.container-fluid #montexte .ladate {
  color: var(--couleurover);
  font-style: italic;
  text-align: center;
}