/*pour régler le problème du i minuscule qui s'affichait en I maj avec la police CCWhatchamacallit-Regular*/ 
body {
  /*font-family: "CCWhatchamacallit-Regular";
  font-variant: none;
  font-variant-caps: normal;*/
  font-feature-settings: "liga" 0, "c2sc" 0, "smcp" 0, "case" 0, "salt" 0;
  /*text-transform: none;*/
}


.swal2-popup {
  background-color: #366059;
  border-radius: 10px;
  color: #fff;
  height: 300px;
  max-height: 50vh;
  width: 800px !important;
  font-size: 2.5rem !important;
  box-sizing: border-box;
  font-family: "CCWhatchamacallit-Regular";

  display: flex;
  flex-direction: column;
  justify-content: center;   /* centre verticalement le contenu */
  align-items: center;       /* centre horizontalement */
  text-align: center;
  padding: 1.5rem;
}

/* Le texte à l’intérieur */
.swal2-popup .pop {
  max-width: 90%;
  line-height: 1.4;
}

/* Bouton personnalisé */
.custom-confirm-btn {
  background-color: #fff !important;
  color: #366059 !important;
  border-radius: 5px !important;
  font-weight: bold !important;
  padding: 0.6em 1.5em !important;
  margin-top: 1rem;
}



.swal2-container {
  z-index: 9999 !important;
}

.swal2-confirm.custom-confirm-btn {
    background-color: #96BE6A !important; /* Couleur personnalisée */
    border-color: #96BE6A !important;
    color: 000 !important;
}

.swal2-confirm.custom-confirm-btn:hover {
    background-color: #D8BF9F !important;
    border-color: #D8BF9F !important;    
}

.swal2-confirm.custom-confirm-btn:focus {
    box-shadow: none !important;
    outline: none !important;
}


.swal2-popup-jeu {
  display: block !important;
  position: relative;
  background-color: #007a8a;
  border-radius: 10px;
  color: #fff;
  width: 800px !important;
  font-size: 2.5rem !important;
  box-sizing: border-box;
  display: flex;
  text-align: center;
  padding: 0 !important;
  background: transparent !important;
}

.swal2-popup-jeu img {
  display: block;
  width: 100%;
  height: auto;
}

.swal2-popup-jeu .swal2-html-container {
  padding: 0 !important;
  margin: 0 !important;
}

.swal2-popup-jeu .swal2-close {
    position :absolute;
    top: 10px;
    right: 10px;
    color: black;
    color: #fff !important;
    font-size: 32px !important;
    background: transparent !important;
    box-shadow: none !important;
    width: 35px !important;
    height: 35px !important;
    line-height: 50px !important;
    display: flex !important;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.hidden {
  display: none !important;
}

/*
.address-feedback{
  font-size: 75%;
  text-align:left;
  font-family: Arial;
  line-height: 2rem;
  color: white;
}
*/
/* pour afficher la liste des adresse, on a besoin de mettre ces 2 styles */
.list-group-item{
  text-align:left;
  font-family: Arial;
}

#uploadFile {
  font-family: "gilroy-semibold";
  font-size: 1.5rem;
}

#btsupp {
  background-color: #45595A;
  border-radius: 5px;
  border: 1px solid #566963;
  display: inline-block;
  cursor: pointer;
  color: #ffffff;
  font-size: 1.2rem;
  padding:0;
  width: 160px;
}

.btn-block {
  display: flex;
  justify-content: center;
}  

.valid-check a {
  display:inherit;
  text-decoration:underline;
  color:#000;
}

.input-group #toggle-password {
  position: absolute;
  right: 488px;
  top: 50%;
  transform: translateY(-50%);
  border: none;
  background: transparent;
  cursor: pointer;
  color: #888;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/*
.input-group #toggle-password {
  position: absolute;
  background-color: transparent;
  border: none;
  z-index: 2;
  right: 10px;
}
*/
#password {
  border-radius : 22px;
}

.input-group #toggle-password:hover i {
  color: #333;
}

.input-group #toggle-password:focus {
  outline: none;
}

.input-group i {
  font-size: 16px;
}

/*
.valid-check form [type="checkbox"]:not(:checked) + label::after, .valid-check form [type="checkbox"]:checked + label::after, .valid-check .form [type="checkbox"]:not(:checked) + label::after, .valid-check .form [type="checkbox"]:checked + label::after {
  background-color: #042C53;
  width: 2rem;
  height: 2rem;
  top: 9px;
  left: 7px;
}
*/
.error{
  background-color: #f00;
  color: #fff;
  padding: 10px;
  font-size: 80%;
  margin-bottom: 1rem;
  text-align: center;
}

.recaptcha-container{
  display: flex;
  justify-content: center;
  align-items: center; /* Optionnel : si tu veux aussi centrer verticalement */
  margin: 20px 0; /* Pour aérer un peu */
}
.text-center {
  text-align:center;
}
.pagination {
  text-align:right;
}
.pagination a {
  display:inline;
  font-size: 1.8rem;
}
@media only screen and (max-width: 767px) {
  .pagination a {
    font-size: 1.3rem;
  }
}
.active {
  /*background-color: #D8E3E6;*/
  /*96be6a*/
  /*padding:2px;*/
}


.badge {
  position: absolute;
  top: -5px;
  right: -22px;
  background: red;
  color: white;
  font-size: 12px;
  font-weight: bold;
  width: 20px;
  height: 20px;
  line-height: 9px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

@media only screen and (max-width:650px) {
  .badge {
  position: relative;
  top :0;
  }
}
.tooltip-container {
    position: relative;
    display: inline-block;
    cursor: pointer;
}

.tooltip-text {
    visibility: hidden;
    opacity: 0;
    width: 170px;
    background-color: #8fa9b1;
    color: white;
    text-align: center;
    padding: 8px;
    border-radius: 5px;
    position: absolute;
    /*bottom: 125%;*/ /* Positionne l'infobulle au-dessus */
    left: 50%;
    transform: translateX(-50%);
    transition: opacity 0.3s ease-in-out;
    font-size: 14px;
}

.pagecourte1 {
  text-align:center;
  margin-bottom:32rem;
}
.pagecourte2 {
  text-align:center;
  margin-bottom:28rem;
}

.tooltip-container:hover .tooltip-text {
    visibility: visible;
    opacity: 1;
}


@media only screen and (max-width:1580px) {
  .tooltip-text {
      width: 88px;
      padding: 6px;
      left: 0;
      font-size: 12px;
      z-index : 100;
  }
  
}

@media only screen and (max-width:767px) {
  .pagecourte1 {
    margin-bottom:17rem;
  }
  .pagecourte2 {
    margin-bottom:17rem;
  }
}

.notabene{
  font-style:italic;
  font-size:1.5rem !important;
}

.path-frontpage .container .formulaire form .input-group .select::before {
  pointer-events: none !important; /* permet de cliquer à travers l'image */
}

.activated {
  text-align: center;
  padding-bottom: 2rem;
  color: rgba(0, 0, 0, 0.7) !important;
}

.valid-check .form label {
  font-family: "CCWhatchamacallit-Regular";
  font-size:18px;
}
@media only screen and (max-width:650px) {
  .valid-check .form label {
    font-size:14px;
  }
  .valid-check .form [type="checkbox"]:not(:checked) + label::before {
  width: 28px;
  height: 28px;  
  }  
}

.input-qte{
  width:60px;
  padding-left: 8px;
  padding-right: 2px;
  padding-top:2px;
  padding-bottom : 2px;
}

.btn-last {
  position: relative;
  background-color: transparent;
  box-shadow: inherit;
  width: 261px;
  height: 82px;
  padding: 0;
}
.btn-last img {
  position: absolute;
  top: 0;
  left: 0;
}
.btn-last span {
  position: relative;
  z-index: 2;
  font-size: 20px;
  display: block;
  width: 100%;
}
@media only screen and (max-width:992px) {
  .btn-last span {
    font-size: 20px;
    line-height: 20px;
  }
}

.link{
  text-transform:none;
}

.desactive{
  filter: grayscale(100%);
  cursor: not-allowed;
}

.mention_obl{
  text-align: left;
  margin-top:2rem;
}