body {
    /*background-color: #d6003e;*/
    color: white;
    font-family: "Tw Cen MT", sans-serif;

}
body{
    /*background-image: url('/images/fond.svg');*/
    background-repeat: no-repeat;
    background-size: 150% auto;
    background-color: #fbeffa4d;
}

h1 {
  font-size: calc(1.75rem + 1.5vw);
  text-align: center;
  margin-top: 10px;
}
h2 {
  font-family: "Tw Cen MT", sans-serif;
  text-align: center;
  font-size: 1.5rem;
}
.classTitle{
  position: fixed;
  left: -100000px;
  height: 0px;
}

h3{
    text-align: center;
}

.grid-form-info{
  display: grid;
    grid-template-columns: 48% 48%;
    column-gap: 4%;
}
.grid-form-info >div >div > label{
  font-weight: 600;
  padding-top: 10px;
}
.grid-container-2{
    height: 100%;          /* WebKit-based browsers will ignore this. */
    height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
    height: fill-available;
    overflow: unset;
    display: grid;
    grid-template-columns: auto 35%;
    padding: 20px 5% ;
    /* permet de faire un effet de fondues */
    -webkit-animation-name: fadeInOpacity;
    animation-name: fadeInOpacity;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
}
.grid-container-2.creatCount {
    grid-template-columns: auto 45%;
}

.grid-container-2-Carte{
  height: 100%;          /* WebKit-based browsers will ignore this. */
  height: -webkit-fill-available;  /* Mozilla-based browsers will ignore this. */
  height: fill-available;
  overflow: unset;
  display: grid;
  grid-template-columns: auto 35%;
  padding: 20px 5% ;
  /* permet de faire un effet de fondues */
  -webkit-animation-name: fadeInOpacity;
  animation-name: fadeInOpacity;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
  -webkit-animation-timing-function: ease-in;
  animation-timing-function: ease-in;
  -webkit-animation-duration: 0.5s;
  animation-duration: 0.5s;
}

#info-site{
    margin: 10px;
    text-align: center;
}
#image-accueil{
    max-width: 600px;
    margin-top: 20px;
}

.form-info-user{
    display: grid;
    grid-template-columns: auto auto;
    grid-gap: 3em;
    margin: 10px;
}
.form-connection, .form-creer-compte, .form-information-personnel, .form-pratique-velo, .form-contact {
    background-color: white;
    padding: 30px;
    padding-top: 15px;
    padding-right: 50px ;
    color: black;
    border: solid #474747 1px;
    border-radius: 15px;
    font-size: calc(1.1rem);
    height: fit-content;
}
.form-information-personnel > label, .form-pratique-velo > label{
    font-weight: 600;
    display:block;
}

.form-information-personnel > label:not(:first-child), .form-pratique-velo > label:not(:first-child) {
    padding-top: 10px;
  }

.form-connection > form > div > input {
    margin-left: 20px;
}

.form-connection > h3 {
    text-align: center;
}

.btn.btn-accueil{
    color: #fff;
    border-color: #9c002d;
    background-color: #d6003e;
}

.alert{
    transition: opacity 2s;
    position: absolute;
    z-index:1000;
    left: 30%;
    right: 30%;
    /* permet de faire un effet de fondues */
    -webkit-animation-name: fadeInOpacity;
    animation-name: fadeInOpacity;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

.labelle-obligatoire-etoile{
    color:red;
    font-weight: bold;
}


.navbar-brand.tilte{
    
    font-size: calc(1.75rem + 1.5vw);
    text-align: center;
    padding: 20px;
    color: white;
    font-weight: 500;
    line-height: 1.2;

}

.offcanvas-title {
    font-size: 1.35rem;
}

.offcanvas-title > h6 {
    font-size: 1.25rem;
}


/* Style de la page info user*/
.form-check-input:checked {
    background-color: #d6003e;
    border-color: #d6003e;
    
  }
  .form-check-input:focus{
    box-shadow: 0 0 0 .25rem #d6003e40;
  }
  .form-select:focus {
  border-color: #d6003e;
  box-shadow: 0 0 0 .25rem #d6003e40;
}

.form-control:focus {

  border-color: #d6003e;
  box-shadow: 0 0 0 .25rem #d6003e40;
}
.popover-header{
    background-color: #d6003e !important;
}
/* permet de faire un effet de fondues */

.btn-home{
  color: white !important;
  background-color: #d6003e; 
  border-color: white; 
  position: initial; 
  /* top: 15px;  
  right: 15px; */
  max-width: 90%;
  text-overflow: clip;
  overflow: hidden;
}

@-webkit-keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@keyframes fadeInOpacity {
	0% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

@-webkit-keyframes fadeOutOpacity {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

@keyframes fadeOutOpacity {
	0% {
		opacity: 1;
	}
	100% {
		opacity: 0;
	}
}

/* gestion des écran inférieur à 8OOpx*/

@media screen and (max-width: 800px) {

  #sub-cont1 {
    flex-wrap: nowrap;
  }
  
  #sub-cont> div:nth-child(3) {
    order: 2;
  }
  
  #sub-cont2 > div:nth-child(1) {
    order: 3;
  }
  
  #sub-cont2 > div:nth-child(2) {
    order: 4;
  }
  
  #sub-cont2 > div:nth-child(3) {
    order: 5;
  }

  
    /* Pour rappel grid-container-2 contient les onglet connexion et createAccount */
    .grid-form-info{
      display: grid;
        grid-template-columns: auto;
       
    }
    .grid-container-2 {
        grid-template-columns: auto ;
    }

    .grid-container-2-Carte{
      grid-template-columns: auto !important;
      /* grid-template-rows: minmax(min-content, max-content) !important; */
    }
    /* permet d'inverser la position de la div d'information et des div de connexion et createAccount' */
    /* .grid-container-2  > div:first-child{ order:1 ;color:black} */
    /* .grid-container-2  > div:last-child{order:-1 } */
    #divpictokleber {position: initial !important;max-width: 100% !important;}
    #divpictokleber > .text > p{font-size: initial !important}
    #pictokleber {margin-top: 10%;}

}

.nav-link-page{
  display: flex;
  align-items: center;
  justify-content: space-evenly;
  padding: 0.5rem 1rem;
  color: #000000;
  text-decoration: none;
  transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}




/* pour les téléphone */
@media only screen and (hover: none) and (pointer: coarse){

  #avie > ul > li:last-child{
    display: none;
  }
  
  }




/* OLIVIER */
      #header {
        min-height:60px; 
        position : fixed; 
        background-color: #d6003e ; 
        height:12% ; 
        max-height : 20% ;
        top : 0 ; 
        left : 0 ; 
        right : 0 ; 
        border-bottom: 0.5rem solid white  ; 
        z-index: 999 ;}
      
      #logo {
        /* position:absolute;  */
        height : auto ; 
        width : auto ; 
        max-height: 95%; 
        max-width : 85%; 
        /* padding : 0% 1% 1% 1% ;  */
        top: 0; 
        bottom: 0; 
        /* margin: auto; */
      }
      
      #logo-long {
        /* position:absolute;  */
        height : auto ; 
        width : auto ;  
        max-height: 95%; 
        max-width : 85%;
        /* padding : 0% 1% 1% 1% ;  */
        top: 0; 
        bottom: 0; 
        /* margin: auto; */
      }
      
      
     
      @media (min-width: 600px) {
        #logo-long {
          display: block !important;
        }
        #logo {
          display: none !important;
        }
      }
      
      @media (max-width: 599px) {
        #logo-long {
          display: none !important;
        }
        #logo {
          display: block !important;
        }
      }
      
      
      #content {
        position : fixed ;
        top : 12%; bottom:10%; left : 0; right : 0;
        padding : 0 0 0 0 ; 
        
        background-size: cover;
        background-position: center left;
        background-color: #000000;
        border-top: 0.25rem solid white  ; 
        overflow: auto;
      }
      
      #picto {
        position: fixed;
        height : auto ; width : auto ; max-height: 45%; max-width : 15%;
        left:15%; bottom : 30%;
      }
      
      #divpictokleber {
        height : auto ; width : auto ; max-height: 100%; max-width : 90%;
        left:10%; 
        overflow-y : scroll;
      }
      
      #divpictokleber {
        -ms-overflow-style: none;  /* Internet Explorer 10+ */
        scrollbar-width: none;  /* Firefox */
      }
      #divpictokleber::-webkit-scrollbar { 
        display: none;  /* Safari and Chrome */
      }
      
      
      #pictokleber {
        max-width : 100%;
        
        max-height: 100%;
        
      }
      
      #pictoandtext {
        position: fixed;
        height : auto ; width : auto ; max-height: 35%; max-width : 15%;
        left:35%; bottom : 30%;
      }
      
      #textpicto {
        position: fixed;
        height : auto ; width : auto ; max-height: 45%; max-width : 20%;
        bottom : 50%;
      }
      
      #notes-places-kleber {
        position: fixed;
        height : auto ; width : auto ; max-height: 35%; max-width : 20%;
        top : 20%;
      }
      
      #footer {position : fixed; background-color: black ; height:10% ; bottom : 0; left: 0 ; right : 0 ; border-top: 0.25rem solid white  ; }
      
      #partenaires {
        position: fixed;
        height : auto ; width : auto ; max-height: 8%; max-width : 60%;
        right:3%; bottom : 0.5%;
      }
      
   
      
      p {
        font-family: "Tw Cen MT", sans-serif;
        color: #333333;
        font-size: 2vw;
        background-color:rgba(255,255,255, 0.75);
        padding: 2.5% 2.5% 2.5% 2.5%;
      }
      
     /* h3 {
        font-family: "Tw Cen MT", sans-serif;
        color: dimgrey;
        font-size: 2vw;
        
        background-color:rgba(255,255,255, 0.5);
        margin: 2% 2% 2% 2%;
      }
     */
      
      
      .img-src {
    position: fixed;
    background-position: center left;
  
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: -1;
    background-size: cover;
}

.blurred-img { opacity: 0; }
      
    
/* Style forget password*/

.center-button {
  text-align: center;
}


.btn-check:focus+.btn, .btn:focus {
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(214, 0 , 62,.25);
}




.dropdown-menu > li > a:hover{
  background-color:#d6003e;
  color:white !important
}



.shepherd-footer {
  align-items: center;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  display: flex;
  justify-content: space-between;
  padding: 0 .75rem .75rem;
  
  .shepherd-button:last-child {
    margin-right: 0;
  }
    
  .shepherd-progress {
    font-size: .8rem;
    position: absolute;
    left: 10px;
    color: black;
  }
}

.shepherd-button{
  background-color:#d6003e !important ;
  color:white !important
}
.shepherd-cancel-icon{
  color:white !important;
}
.shepherd-button:hover{
  background-color:#b40033 !important ;

}

p.shepherd{
  font-family: Tw Cen MT,sans-serif;
    color: #333;
    font-size: 1.15rem;
    
    padding:0;
}
li.shepherd, label.shepherd{
  font-family: Tw Cen MT,sans-serif;
    color: #333;
    font-size: 1rem;
}
.shepherd-header{
  background-color: #d6003e !important;
}
.shepherd-title{
  font-family: Tw Cen MT,sans-serif !important;
  color: #fff !important;
  font-size: 1.3rem !important;
}

.unselect-div-shepherd{
  cursor: not-allowed;
}

.unselect-div-shepherd:hover::before {
  content: "🚧 Le formulaire vous sera accesible à la fin du tutoriel 🚧"; /* Le message "Je reviens" */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: #d6003e; /* Couleur d'arrière-plan */
  color: #fff; /* Couleur du texte */
  padding: 5px 10px;
  border-radius: 5px;
  font-size:1.2rem;
  z-index: 1100;
  text-align: center;
}

.unselect-div-shepherd > * {
  pointer-events: none;
}
#partners-carousel {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.partner {
  text-align: center;
  padding: 20px;
  background-color: white;
  border-radius: 3px;
  border: solid black 1px;
  height: 100%;
}

.partner img {
  /* width: 200px;
  height: 200px;
  object-fit: cover;
  border-radius: 50%; */
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
}

.partner h3 {
  font-size: 24px;
  margin-bottom: 10px;
}

.partner p {
  font-size: 16px;
  margin-bottom: 10px;
}

.partner a {
  font-size: 16px;
  text-decoration: none;
}

.carousel-item {
  display: flex;
  justify-content: center;
}

.carousel-indicators {
  display: none;
}


#flexSwitchCheckDefaultTypeMapPhone{

    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23d6003d'/></svg>");

}

#flexSwitchCheckDefaultTypeMapPhonet:focus {
  border-color: #d6003dab!important;
  box-shadow: 0 0 0 .25rem #d6003e40!important;
}

#flexSwitchCheckDefaultTypeMapPhone:checked {
background-color: #d6003e;
border-color: #d6003e;
}

#flexSwitchCheckDefaultTypeMapPhone.form-check-input {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23d6003d'/></svg>");
}
#flexSwitchCheckDefaultTypeMapPhone.form-check-input:focus {
background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='%23d6003d'/></svg>");
}
#flexSwitchCheckDefaultTypeMapPhone.form-check-input:checked {
background-position: right center;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
}

.form-check-input {
border-color: #d6003e;

}

#map .form-check-input[type=radio] {
	margin-top:0.4em !important;
}