.fw-600{
  font-weight: 600!important;
}

.see-more-plan{
  font-family: Nunito Sans;
  font-weight: 600;
  font-size: 14px;
  width: 130px;
  height: 40px;
  padding: 12px 16px;
  gap: 8px;
  bottom: 10px;
  align-items: center;
  border-radius: 8px;
  background: rgba(255, 255, 255, 1);
  z-index: 2;

  .img-plan{
      width: 16px;
      height: 16px;
  }
}

.content-plans {
  position: relative;
  width: 150px;
  height: 140px;
  gap: 10px;
  border-radius: 12px;
  padding: 10px;

}
.plan1{
  background: url("/img/icons/plan1.png") no-repeat center;
  background-size: contain;
  overflow: hidden; /* pour le border-radius */
}

.plan2{
  background: url("/img/icons/plan2.png") no-repeat center;
  background-size: cover;
  overflow: hidden; /* pour le border-radius */
}

.plan3{
  background: url("/img/icons/plan3.png") no-repeat center;
  background-size: cover;
  overflow: hidden; /* pour le border-radius */
}

.plan4{
  background: url("/img/icons/plan4.png") no-repeat center;
  background-size: cover;
  overflow: hidden; /* pour le border-radius */
}


.content-plans::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 12px;
  background: #00000040; /* ou tout autre couleur/alpha */
  pointer-events: none;
}

.border-bottom-dashed{
  padding-top: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(235, 235, 235, 1);
}

.top-container-formule{
  padding: 16px 24px;
  gap: 10px;
  background: rgba(245, 245, 245, 1);
  font-family: Manrope;
  font-weight: 600;
  font-size: 16px;
  color: rgba(0, 0, 0, 1);

}

.bot-container-formule{
  color: rgba(0, 0, 0, 1);
  font-family: Nunito Sans;
  font-weight: 400;
  font-size: 14px;
  height: 100%;
  padding: 16px 24px;
  gap: 4px;
}

.chip-logo-real{
  width: 80px;
  height: 48px;
  gap: 10px;
  left: 8px;
  bottom: 7px;
  border-top-right-radius: 12px;
  border-bottom-left-radius: 10px;
  padding: 8px;
  background: #F2F2F2;
  display: flex;
  justify-content: center;

  img{
      height: 32px!important;
      border-radius: 0px!important;
  }

}

.h2{
  font-family: Manrope;
  font-weight: 600;
  font-size: 28px;
}

.img-realisation img{
  border-radius: 12px;
  height: 200px;
  object-fit: cover;
}

@media (max-width: 576px){
  .img-realisation img{
      height: 120px;
  }
}

.img-reference{
  width: 96px;
  height: 69px;
  padding:10px;
  object-fit: contain;
}

.container-animation{
  padding: 16px 24px;
  gap: 8px;
  border-radius: 12px;
  border: 1px solid rgba(235, 235, 235, 1)
}



#partenaire .info-inline span {
  font-family: Nunito Sans, Arial, sans-serif;
  color: #777;
  font-weight: 400 !important;
  font-size: 18px !important;
  line-height: normal;
}

.text-xxs-regular{
  font-family: Nunito Sans;
  font-weight: 400;
  font-size: 12px;
}

.gap-img-reference{
  gap: 36px;

}

.chip-dark-icons{
  padding: 4px 6px;
  gap: 4px;
  border-radius: 10px;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 1);
}

.margin-hr{
  margin-top: 40px;
  margin-bottom: 40px;
}


.container-formule{
  border-radius: 12px;
  border: 1px solid rgba(235, 235, 235, 1);
  overflow: hidden;
}


.img-animation{
  object-fit: cover;
  height: 180px;
  width: 100%;
}



@media (min-width: 1200px){
  .container-animation-with-img {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3 colonnes égales */
      gap: 8px;
  }
}

.content-modal-animation{
  padding-right: 28px;
  padding-left: 28px;
}

.header-modal-animation{
  padding: 28px;
}


.overlay-dark {
  height: 100dvh;
  width: 100vw;
  position: fixed;
  top: 0;
  background: black;
  opacity: 0.4;
  left: 0;
  z-index: 999;
}

.radius-2{
  border-radius: 8px;
}

.table-gray {
  p {
      color: rgba(166, 166, 166, 1);
  }
}
.table-gray img {
  filter: grayscale(1) brightness(0.7);
  opacity: 0.3;
}

@media (max-width: 992px){


  .gradient-scroll{
      overflow: scroll;
  }

  .gradient-scroll::after{
      content:"";
              position: sticky;
              right: -1px;
              top: 0;
              width: 40px;
              height: 60px;
              flex: 0 0 40px;
              background: linear-gradient(270deg, #FFFFFF 0%, rgba(255, 255, 255, 0) 100%);
              z-index: 100;
              pointer-events: none;
  }

  .img-animation{
      height: 220px!important;
  }

  .description-formule{
      height: auto!important;
  }

  .bot-container-formule{
      padding: 16px !important;
  }

  #partenaire .text-desc .desc-price{
      font-family: Nunito Sans, Arial, sans-serif;
      color: #000;
      font-weight: 600!important;
      font-size: 16px!important;
      line-height: normal;
  }

  .img-cover{
      height: 200px;
  }

  .modal-animation{
      top: 38%!important;
      height: 400px;
  }
  .margin-hr{
      margin-top: 32px!important;
      margin-bottom: 32px!important;
  }

  .btn_border_grey_noAnim{
      font-size: 14px!important;
      padding: 16px!important;
  }

  .chip-synthese{
      font-size: 14px!important;
  }

  .text-sm-semibold{
      font-family: Nunito Sans;
      font-weight: 600;
      font-size: 14px;
      text-wrap: balance;

  }


  h6{
      font-size: 14px!important;
  }

  .text-sm-regular{
      font-family: Nunito Sans;
      font-weight: 400;
      font-size: 14px;
      letter-spacing: 0%;

      strong{
          font-family: Nunito Sans;
          font-weight: 700;
          font-size: 14px;
          line-height: 100%;
          letter-spacing: 0%;

      }
  }


}

@media (max-width: 1200px){
  .container-animation-with-img {
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 3 colonnes égales */
      gap: 8px;
  }
}

@media (max-width: 576px){
  .container-animation-with-img {
      display: grid;
      grid-template-columns: repeat(1, 1fr); /* 3 colonnes égales */
      gap: 8px;
  }
  .content-modal-animation .img-cover{
      height: 180px;
  }

  .modal-animation{
      left: 46%!important;
  }
}


.chip-category-animation{
  top: 12px;
  left: 12px;
}

.btn-tertiary {
  background-color: #fff;
  color: #000;
  font-size: 16px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  min-width: -moz-fit-content;
  min-width: fit-content;
}

.body-no-scroll {
  overflow: hidden !important;
  height: 100vh; /* Évite certains bugs de scroll sur mobile */
}

.btn-tertiary:active {
  color: #1f1f1f;
}
.btn-tertiary:hover {
  color: #333;
}

.bottom-modal-animation{
  padding :28px;

}


.modal-animation{
  border-radius: 8px;
  overflow-y: scroll;
  background: white;
  z-index: 1000;
  max-width: 900px;
  width: 80%;
  max-height: 600px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  scrollbar-width: thin;
  scrollbar-color: #888 transparent;
}

.modal-animation::-webkit-scrollbar {
  width: 8px; /* plus fin */
  background: transparent;
}

.modal-animation::-webkit-scrollbar-track {
  background: transparent !important;
}

.modal-animation::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

@media (min-width: 993px){
  #partenaire .text-desc .desc-price{
      font-family: Nunito Sans, Arial, sans-serif;
      color: #000;
      font-weight: 600!important;
      font-size: 18px!important;
      line-height: normal;
  }

  .text-sm-regular{
      font-family: Nunito Sans;
      font-weight: 400;
      font-size: 16px;
      letter-spacing: 0%;

      strong{
          font-family: Nunito Sans;
          font-weight: 700;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: 0%;

      }
  }

}


.description-formule {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  height: 60px;
}

.h5{
  font-family: Manrope;
  font-weight: 600;
  font-size: 18px!important;
  line-height: 100%;
  letter-spacing: 0%;
  margin-bottom: 0;
}


.input-icon{
  position: absolute;
  right: 16px;
  top: 25%;
}



.text-md-semibold{
  font-family: Nunito Sans;
  font-weight: 600;
  font-size: 18px;
  color: rgba(0, 0, 0, 1);

}


.img-grey{
  filter: grayscale(1)!important;
}

.text-xs-regular{
  font-family: Nunito Sans;
  font-weight: 400;
  font-size: 14px;


}

.text-semibold{
  font-family: Nunito Sans;
  font-weight: 600;
  font-size: 12px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #7A7A7A;

}





.img-dark{
  filter: brightness(0);
}

.badge-service{
  gap: 4px;
  padding: 16px 24px;
  border-radius: 12px;
  border: 1px solid #EBEBEB
}

@media (max-width: 768px){
  .container-chips-animation{
      max-width: 94%!important;
  }

}

.container-chips-animation{
  max-width: 600px;
}

p{
  margin-bottom: 0px!important;
}



.container-badge_scroll{
  padding: 16px!important;
}

.container-badge_alert{
  padding: 16px!important;
}

.chip-synthese{
  padding: 4px 8px;
  gap: 6px;
  border-radius: 6px;
  border: 1px solid #EBEBEB;
  display: flex;
  font-family: Nunito Sans;
  font-weight: 400;

}

.w-fit{
  width: fit-content!important;
}

.chip-top-capacite{
  padding-top: 8px;
  padding-bottom: 8px;
  font-family: "Nunito Sans";
  font-weight: 600;
  border-radius: 12px 12px 0px 0px;
  font-size: 12px;
  text-align: center;
  line-height: 100%;
  vertical-align: middle;
  color: #7A7A7A;
  background: #F5F5F5;
}

.chip-capacite{
  border-radius:12px;
  border: 1px solid #EBEBEB
}

.chip-bottom-capacite{
  padding: 4px 8px;
  border-right: 1px solid #EBEBEB;
  display: flex;
  margin: 12px 0;
  width: 100px;
  flex-direction: column;
  align-items: center;
  font-family: Nunito Sans;
  font-weight: 400;
  font-size: 14px;
  line-height: 100%;
  letter-spacing: 0%;
  vertical-align: middle;
  color: #000000;



  strong{
      font-family: Nunito Sans;
      font-weight: 600;
      font-size: 20px;
      line-height: 100%;
      letter-spacing: 0%;
      vertical-align: middle;
      color: #000000;

  }
}

.chip-bottom-capacite.last{
  border-right: none!important;
}

/* seconde page */

.btn-secondary {
  border: 1px solid rgba(0, 0, 0, 1);
  padding: 12px 24px 12px 24px;
  border-radius: 8px;
  background-color: #fff;
  width: 100%;
  height: 48px;
  text-align: center;
  font-family: Nunito Sans;
  font-weight: 600;
  font-size: 16px;
  gap: 8px;
  line-height: 100%;
  display: flex;
  align-items: center;
}

.btn-secondary:hover {
  color: #333;
  border: 1px solid #333;
}

.btn-secondary:active {
  color: #1f1f1f;
  border: 1px solid #1f1f1f;
}

.h4{
  font-family: Manrope;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
}

.pointer{
  cursor: pointer;
}

.details-avis-google{
  font-size: 13px;
  font-weight: 400;
}


.text-700{
  font-weight: 700;
}

.text-400{
  font-weight: 400;
}

.modal-avis-google {
  gap: 40px;
  background: rgba(255, 255, 255, 1);
  border-radius: 8px;
  padding:28px;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 600px;
  width: 95%;
  max-height: 500px;
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 1001;
  display: flex;
  flex-direction: column;
}



.current{
  border-radius: 4px;
  border:solid 1px #000000;
}

.avis-google {
  gap: 40px;
  max-height: 572px;
  overflow-y: scroll;
  padding-right: 32px;
  scrollbar-width: thin;
  scrollbar-color: #999 transparent;
}

.avis-google::-webkit-scrollbar {
  width: 12px;
  height: 358px;
  color: rgba(204, 204, 204, 1);
}

.avis-google::-webkit-scrollbar-track {
  background: transparent;
  border: none;
}

.avis-google::-webkit-scrollbar-thumb {
  background-color: #999;
  border-radius: 6px;
  border: none;
}

.color-primary-500{
  color:rgba(166, 166, 166, 1);
  font-size:16px !important;
}


.chip-gray-overflow{
  font-family: "Nunito Sans";
  font-size: 14px;
  align-items: center;
  display: flex;
  background: rgba(242, 242, 242, 1);
  padding: 4px 8px;
  border-radius: 10px;
  gap:6px;
}


.chip-img-gray{
  background: rgba(242, 242, 242, 1);
  padding: 4px 8px;
  border-radius: 2px;
  height: 41px;
}

.chip-gray{
  font-family: "Nunito Sans";
  font-size: 14px;
  height: fit-content;
  align-items: center;
  background: rgba(242, 242, 242, 1);
  padding: 4px 8px;
  border-radius: 6px;
}