html, body {
    max-width: 100%;
    overflow-x: hidden;
      padding: env(safe-area-inset-top, 20px) env(safe-area-inset-right, 20px) env(
      safe-area-inset-bottom,
      20px
    ) env(safe-area-inset-left, 20px);
}

#bottomNav.row{
  margin-right: 0;
  margin-left: 0;
}

.btn{
  width: 100%;
}



.navbar-fixed-bottom {
  border: 1px solid rgba(86,61,124,.2);
  background-color: #f5f5f5;
  padding-bottom: constant(safe-area-inset-bottom) !important;
  padding-bottom: env(safe-area-inset-bottom) !important;
}
#footer .row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
     margin-left: auto;
  margin-right: auto;
  text-align: center;
}
#footer .col {
  	width: 100%;
    margin-left: auto;
  	margin-right: auto;
  	text-align: center;
}

#navfooter{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
}

#mon_nav{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  //padding-bottom: constant(safe-area-inset-bottom) !important;
  //padding-bottom: env(safe-area-inset-bottom) !important;
  padding: .5rem 0.2rem;
	padding-top: 5px;
	padding-bottom: 5px;
	background-color: white;
}

#mon_nav .row {
    margin-right: 0;
    margin-left: 0;
}

#mon_nav .boutonNav{
	text-align: center;
}


#mon_nav .boutonNav button {
    max-width: 120px; /* Limiter la largeur maximale des boutons à 70px */
    width: 100%; /* Assurer que les boutons utilisent toute la largeur disponible */
}




.pbutton{
  padding-right: 0; 
  padding-left: 0;
  width: 70%;
  margin: 0 auto;
}


@media screen and (min-width: 650px) and (max-width: 810px) {
  
  .navbar-fixed-bottom{
    font-size: 2em;
  }
}
@media screen and (min-width: 800px) and (max-width: 910px) {

  .navbar-fixed-bottom{
    font-size: 2em;
  }
}
@media screen and (min-width: 910px) {

  .navbar-fixed-bottom{
    font-size: 2em;
  }
}







/* Modifier la couleur de fond du bouton */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: #fff; /* Couleur de fond blanche lorsque le bouton est coché */
}

.custom-switch .custom-control-input:not(:checked) ~ .custom-control-label::before {
    background-color: #fff; /* Couleur de fond blanche lorsque le bouton n'est pas coché */
}


/* Modifier la couleur du curseur lorsqu'il est coché */
.custom-switch .custom-control-input:checked ~ .custom-control-label::after {
    background-color: #808080 !important; /* Couleur du curseur en gris lorsque le bouton est coché */
}