@charset "UTF-8";
.page-discount {
  /* Compact Toggle Section */
  /* masquer spinner defaut html buttons for number input */
  /* masquer spinner defaut html buttons for number input mozilla */
  /* For text mode - different styling */
  /* masquer bouton html par défaut plus et moins */
}
.page-discount h2 input {
  font-family: "Lato", sans-serif;
  width: 60%;
  text-align: center;
}
.page-discount .price h2 sup {
  font-family: "Lato", sans-serif;
}
.page-discount input:not(#main_title),
.page-discount textarea {
  background: transparent;
  border-top: transparent !important;
  border-left: transparent !important;
  border-right: transparent !important;
  border-bottom: transparent !important;
  padding: 0;
}
.page-discount input:not(#main_title):not(.list-input),
.page-discount textarea:not(.list-input) {
  width: 100%;
  text-align: center;
}
.page-discount input:not(#main_title).titre,
.page-discount textarea.titre {
  font-size: 36px;
  color: #bbbbbb;
  text-transform: uppercase;
}
.page-discount input:not(#main_title).sub_title,
.page-discount textarea.sub_title {
  position: relative;
  font-size: 15px;
  margin-bottom: 10px;
  color: #bbbbbb;
}
.page-discount input:not(#main_title).offer-message .message,
.page-discount textarea.offer-message .message {
  font-size: 1.75rem;
}
.page-discount .promo-label {
  position: absolute;
  top: -15px; /* Positionne l'étiquette en partie au-dessus de la box */
  left: 50%;
  transform: translateX(-50%); /* Centre horizontalement */
  z-index: 10;
}
.page-discount .promo-label select {
  background-color: #0072CE !important; /* Bleu */
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 20px; /* Forme arrondie d'étiquette */
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  min-width: 150px;
}
.page-discount .promo-label input::placeholder {
  color: rgba(255, 255, 255, 0.8);
  font-weight: normal;
}
.page-discount .checkbox label::after {
  font-size: 25px;
}
.page-discount .title textarea {
  color: #ffffff;
  font-size: 3.5rem;
}
.page-discount .compact-toggle-section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-bottom: 15px;
  padding: 8px 15px;
  background: rgba(58, 58, 58, 0.5);
  border-radius: 20px;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.page-discount .toggle-text {
  font-size: 2rem;
  color: #bbbbbb;
  font-weight: 500;
  transition: color 0.3s;
}
.page-discount .toggle-switch.active ~ .toggle-text {
  color: #97D700;
}
.page-discount .price-input-container {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  gap: 10px;
}
.page-discount .price-input {
  font-weight: 700;
  color: #97D700;
  line-height: 1;
  background: rgba(58, 58, 58, 0.3);
  border: 2px solid rgba(126, 211, 33, 0.2);
  border-radius: 12px;
  text-align: center;
  width: 220px;
  padding: 10px 35px 10px 10px;
  outline: none;
  transition: all 0.3s;
}
.page-discount .price-input:focus {
  border-color: #97D700;
  background: rgba(58, 58, 58, 0.5);
}
.page-discount .price-input::-webkit-outer-spin-button,
.page-discount .price-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.page-discount .price-input {
  -moz-appearance: textfield;
  position: relative;
}
.page-discount .price-input-wrapper {
  position: relative;
  display: inline-block;
}
.page-discount .spinner-buttons {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.page-discount .spinner-btn {
  width: 20px;
  height: 20px;
  background: linear-gradient(135deg, #97D700 0%, #6bc116 100%);
  border: none;
  border-radius: 3px;
  color: white;
  font-size: 2rem;
  font-weight: bold;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  box-shadow: 0 1px 3px rgba(126, 211, 33, 0.3);
  line-height: 1;
}
.page-discount .spinner-btn:hover {
  background: linear-gradient(135deg, #8fe632 0%, #97D700 100%);
  transform: scale(1.15);
  box-shadow: 0 2px 6px rgba(126, 211, 33, 0.5);
}
.page-discount .spinner-btn:active {
  transform: scale(0.9);
}
.page-discount .price-input::placeholder {
  color: #97D700;
  opacity: 0.5;
}
.page-discount .price-input:focus {
  outline: 2px solid #97D700;
  outline-offset: 5px;
  border-radius: 8px;
}
.page-discount .price-text-input {
  line-height: 0.5em;
  color: #97D700;
  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
  font-size: 2rem;
  font-weight: 700;
}
.page-discount .price-text-input::placeholder {
  color: #97D700;
  opacity: 0.5;
}
.page-discount .price-text-input:focus {
  border-color: #97D700;
  background: rgba(58, 58, 58, 0.5);
}
.page-discount .currency {
  font-size: 40px;
  color: #97D700;
  margin-left: 10px;
}
.page-discount .toggle-switch {
  position: relative;
  width: 44px;
  height: 22px;
  background-color: #bbbbbb;
  border-radius: 22px;
  cursor: pointer;
  transition: background-color 0.3s;
  flex-shrink: 0;
}
.page-discount .toggle-switch.active {
  background-color: #97D700;
}
.page-discount .toggle-slider {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.page-discount .toggle-switch.active .toggle-slider {
  transform: translateX(22px);
}
.page-discount textarea {
  resize: vertical;
}
.page-discount input[type=number] {
  font-size: 6rem;
  color: #97D700;
}
.page-discount input[type=number]::-webkit-outer-spin-button,
.page-discount input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.page-discount input[type=number] {
  -moz-appearance: textfield;
}
.page-discount input[type=number]:focus,
.page-discount textarea:focus {
  outline: none;
  border-color: #97D700;
  box-shadow: 0 0 0 3px rgba(126, 211, 33, 0.2);
}
.page-discount input[type=number]::placeholder,
.page-discount textarea::placeholder {
  color: #313131;
}

.titre-promotion h2 {
  color: #ffffff;
  line-height: 1;
  font-size: 2rem;
}

.page-title,
.pricing-section {
  padding: 15px 0;
}
.page-title .row.responsive-block,
.pricing-section .row.responsive-block {
  justify-content: center;
}

section.titre-promotion h2 {
  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.5);
  margin-bottom: 15px;
}

.offer-message {
  color: #ffffff;
  font-size: 1rem;
}

.discount-img {
  display: block;
  margin: 0 auto;
}

.pricing-section {
  max-width: 1600px;
  margin: 0 auto;
}

.pricing-table .title h2 {
  color: #ffffff !important;
  font-size: 2.5rem;
}
.pricing-table .price {
  margin-bottom: 10px;
}
.pricing-table .price p {
  color: #bbbbbb;
  margin-top: 25px;
  font-weight: bold;
}
.pricing-table .title p,
.pricing-table .price p {
  color: #bbbbbb;
  font-size: 1rem;
}
.pricing-table .price h2 sup {
  font-size: 35%;
  top: -1.2em;
}
.pricing-table ul {
  text-align: left;
  margin-left: 15%;
}
.pricing-table ul li {
  font-size: 13px;
  border: none;
  color: #ffffff;
  padding: 0;
  line-height: 2.3;
  font-weight: bold;
}
.pricing-table ul li:first-child {
  border: none;
}
.pricing-table ul li:hover {
  background-color: #1F1F1F;
}
.pricing-table ul li input {
  width: 70%;
}
.pricing-table ul li .text-green:before {
  color: #97D700;
}
.pricing-table .inner-box {
  border-radius: 15px;
  border: none;
  background-color: #1F1F1F;
  box-shadow: rgba(255, 250, 240, 0.5) 0px 0px 35px 10px;
}
.pricing-table .inner-box.inner-box-client {
  height: 550px;
  width: 400px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.pricing-table .inner-box.inner-box-client .title {
  font-weight: 700 !important;
  padding-bottom: 0;
}
.pricing-table .inner-box .promo-label {
  position: absolute;
  top: -15px; /* Positionne l'étiquette en partie au-dessus de la box */
  left: 50%;
  transform: translateX(-50%); /* Centre horizontalement */
  z-index: 10;
}
.pricing-table .inner-box .promo-label span {
  background-color: #0072CE; /* Bleu */
  color: #ffffff;
  border: none;
  padding: 8px 20px;
  border-radius: 20px; /* Forme arrondie d'étiquette */
  font-size: 14px;
  font-weight: bold;
  text-align: center;
  min-width: 150px;
}
.pricing-table .inner-box .theme-btn {
  border-radius: 10px !important;
  background: #0072CE;
}
.pricing-table .inner-box.mise-en-avant {
  border: 3px solid #97D700;
}
.pricing-table .inner-box.mise-en-avant .promo-label span {
  background-color: #ff8d00;
}
.pricing-table .inner-box.mise-en-avant .theme-btn {
  background: #97D700;
  padding: 25px;
  width: 70%;
  color: #1F1F1F;
  font-size: 1.4em;
}
.pricing-table .inner-box.mise-en-avant.inner-box-client {
  height: 600px;
  width: 420px;
  padding: 25px 0;
}
.pricing-table .inner-box .table-content {
  margin-bottom: 0;
}
.pricing-table .inner-box .dynamic-block {
  border: 1px solid #bbbbbb;
  margin-bottom: 20px;
}
.pricing-table .inner-box .dynamic-block .dynamic-line {
  position: relative;
  width: 100%;
}
.pricing-table .inner-box .dynamic-block .btn-remove-line {
  background: #ff7676;
  color: #ffffff;
  border: none;
  padding: 0 5px;
  margin-left: 10px;
  cursor: pointer;
  border-radius: 3px;
  transition: background 0.2s;
}
.pricing-table .inner-box .dynamic-block #btn-add-line {
  display: inline-block;
}
.pricing-table .inner-box .dynamic-block #btn-add-line.hidden {
  display: none;
}
.pricing-table .price h2 {
  font-size: 8rem;
  line-height: 0.5em;
  color: #97D700;
  text-shadow: 0px 2px 10px rgba(0, 0, 0, 0.24);
  font-family: "Lato";
  font-weight: 700;
}
.pricing-table .price h2.decrease-font-size {
  font-size: 2.5rem;
}

section .is_featured .page-title:before {
  background-color: unset;
}
section .is_featured img.discount-img {
  margin: 0 auto;
}

/* Forcer breakpoint bootstrap mobile/tablette à 1300 px au lieu de 991 */
@media (max-width: 1300px) {
  .responsive-block .col-lg-4 {
    width: unset !important;
    flex: unset !important;
    max-width: unset !important;
    margin-bottom: unset; /* Espacement entre les blocs */
  }
}
/* tablette  et mobile */
/* Sur mobile : l'encart mis en avant passe en premier */
@media screen and (max-width: 991px) {
  .pricing-section {
    /* L'encart mis en avant en premier */
    /* Les autres encarts après */
  }
  .pricing-section .row,
  .pricing-section .pricing-table {
    display: flex;
    flex-wrap: wrap;
    justify-content: center; /* Centre les éléments */
  }
  .pricing-section .pricing-table.mise-en-avant-container {
    order: -1;
  }
  .pricing-section .pricing-table:not(.mise-en-avant-container) {
    order: 0;
  }
  .pricing-section .pricing-table {
    margin-bottom: 50px;
  }
  .pricing-section .pricing-table .inner-box.inner-box-client {
    width: 420px;
  }
  .pricing-section .pricing-table ul {
    margin-left: 8%;
  }
}
@media screen and (max-width: 500px) {
  .pricing-section .pricing-table .inner-box.inner-box-client {
    width: 360px;
  }
}