#simulator-app {
  
  --color-primary: #1b51dc;
  --color-secondary: #00eb5e;
  --color-error: #b30000;
  --color-text: #221c46;
  --color-text-light: #5a5469;
  --color-background: #ffffff;
  --color-border: #908c99;
  --color-hover: #def3fb;
  --color-disabled: #efefef;
  --color-disabled-text: #b5b2bc;
  --color-popup-overlay: rgba(0, 0, 0, 0.5);
  --color-shadow: #221c4633;
  --color-radios-container :#faf8ff;

  --font-size-small: 12px;
  --font-size-medium: 14px;
  --font-size-large: 16px;
  --font-size-xlarge: 20px;
  --font-size-xxlarge: 24px;
  --font-size-xxxlarge: 32px;

  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;

  --border-radius-sm: 0.375rem;
  --border-radius-md: 5rem;
  --border-radius-lg: 8px;

  --transition-duration: 0.15s;
}

#simulator-app input::-webkit-outer-spin-button,
#simulator-app input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

#simulator-app input[type=number] {
  -moz-appearance: textfield;
}
#simulator-app .titre_pluxee {
  text-transform: none!important;
}
#simulator-app .form-section {
  padding: var(--spacing-xs);
  margin: 0 var(--spacing-md);
  position: relative;
  --border-width: 3px;
  --corner-offset: 64px;
  background: #17ccf9;
  display: inline-flex;
  clip-path: polygon(
    0% 0%,
    100% 0,
    100% calc((100% - var(--border-width)) - var(--corner-offset)),
    calc((100% - var(--border-width)) - var(--corner-offset)) 100%,
    0% 100%
  );
}

#simulator-app .form-simulator {
  display: flex;
  flex-direction: column;
  background-color: var(--color-background);
  width: 100%;
  padding: var(--spacing-lg);
  clip-path: polygon(
    0% 0%,
    100% 0,
    100% calc(100% - calc(var(--corner-offset) + var(--border-width))),
    calc(100% - calc(var(--corner-offset) + var(--border-width))) 100%,
    0% 100%
  );
}

#simulator-app .btns-container {
  gap: var(--spacing-sm);
}

#simulator-app .result-section {
  width: 100%;
}
#simulator-app #result-col {
  gap: 10px;
}
#simulator-app .tabs {
  position: relative;
  display: flex;
  height: 3.75rem;
  background-color: var(--color-background);
  border: 0;
  width: 100%;
  margin-bottom: var(--spacing-xl);
}

#simulator-app .primary-tablist {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  margin: 0;
  flex-grow: 1;
  border: 0;
}

#simulator-app .secondary-tabs {
  position: relative;
  display: block;
  background-color: var(--color-background);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  padding: var(--spacing-xs);
  min-width: 220px;
  margin-bottom: var(--spacing-lg);
}

#simulator-app .secondary-tablist {
  display: flex;
  justify-content: flex-start;
  flex-direction: row;
  margin: 0;
  border: 0;
  gap: var(--spacing-xs);
}

#simulator-app .tab {
  border: 0;
  outline: none;
  display: block;
  align-items: center;
  justify-content: center;
  flex: 1 1 0%;
  transition: background-color var(--transition-duration), color var(--transition-duration);
  font-size: var(--font-size-large);
  padding: var(--spacing-sm) var(--spacing-md);
  color: var(--color-text);
  background-color: #f3f3fc;
  position: relative;
}

#simulator-app .tab.secondary {
  border-radius: var(--border-radius-md);
}

#simulator-app .tab.active {
  background-color: var(--color-primary);
  color: var(--color-background);
}

#simulator-app .tab:not(.active):hover {
  background-color: var(--color-hover);
}

#simulator-app .tab-content {
  margin-top: var(--spacing-md);
  gap: 15px;
}
#simulator-app .bi-check {
  align-self: baseline;
}

#simulator-app .hidden-image {
  text-align: center;
}

#simulator-app .hidden-image img {
  max-width: 100%;
  height: auto;
}

@media screen and (max-width: 992px) {
  #simulator-app .hidden-image {
    display: none !important;
  }
}

#simulator-app .error {
  color: var(--color-error);
  font-size: var(--font-size-small);
  margin-bottom: var(--spacing-xs);
}

#simulator-app input[type="range"] {
  width: 100%;
}

#simulator-app .input-container,#simulator-app #question-container {
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
  display: flex;
  flex-direction: column; 
  align-items: flex-start; 
  
  
}
#simulator-app #question-container {
  background: var(--color-radios-container);
  margin-bottom: var(--spacing-md);
  padding: var(--spacing-md);
}
#simulator-app #question-container .question-accordion-button{
 border: 0;
 background: transparent;
 display: flex;
 flex-direction: row;
 justify-content: space-around;
 align-items: center;
 width: 100%;
}
/* #simulator-app #question-container .question-accordion-button span {
  flex-grow: 1;
  text-align: left; 
  max-width: 80%;
} */
#simulator-app #question-container .question-accordion-button .arrow {
  transition: transform 0.3s ease;
  color: #0d6efd;
}
#simulator-app #question-container .question-accordion-button .arrow.open {
  transform: rotate(180deg);
}

#simulator-app #question-container .accordion-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  padding-left: var(--spacing-md);
}

#simulator-app .input-container label,#simulator-app #question-container .question,#simulator-app #question-container label,#simulator-app .input-container,#simulator-app #question-container .question-accordion-button {
  font-size: var(--font-size-medium);
  font-weight: 600;
  line-height: 145%;
  letter-spacing: -0.05em;
  color: var(--color-text);
  padding-bottom: var(--spacing-xs);
}
#simulator-app .question-radios {
display: flex;
  flex-direction: column; /* Ensure radio buttons stay in a column */
  gap: 5px;
}
#simulator-app .question-radios label {
display: flex;
flex-direction: row;
gap: 10px;
}
#simulator-app .question-radios input {
  transform: scale(1.5);
  }

#simulator-app .input-container .form-input {
  width: 100%;
  padding: var(--spacing-xs);
  margin-top: var(--spacing-xs);
  height: 3rem;
  font-size: var(--font-size-large);
  padding-inline: var(--spacing-md);
  /*border-radius: var(--border-radius-sm);*/
  outline: transparent solid 2px;
  transition: background-color var(--transition-duration), border-color var(--transition-duration);
  font-weight: 600;
  line-height: 150%;
  letter-spacing: -0.05em;
  color: var(--color-text);
  background: var(--color-background);
  border: 1px solid var(--color-border);
}

#simulator-app .input-container .form-input:hover{
  background: var(--color-hover);
  border-color: var(--color-primary);

}


#simulator-app .input-container .form-input:active,#simulator-app .input-container .form-input:focus {
  border: 3px solid;
  border-color: var(--color-primary);
}
#simulator-app .info-cheque span {
  font-size: 12px;
  font-weight: 600;
  line-height: 135%;
  letter-spacing: -0.05em;
  text-decoration: none;
  text-transform: none;
  color: var(--color-text-light);
}
#simulator-app .input-container .form-range {
  --progress: 100%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: linear-gradient(to right, var(--color-text) var(--progress), #ccc var(--progress));
  height: 10px;
  background-repeat: no-repeat;
  background-size: calc(100% - 2px) 100%;
}
#simulator-app .input-container .form-range::-moz-range-track  {
  --progress: 100%;
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  background: linear-gradient(to right, var(--color-text) var(--progress), #ccc var(--progress));
  height: 10px;
  background-repeat: no-repeat;
  background-size: calc(100% - 2px) 100%;
}

#simulator-app .input-container .form-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  background: blue;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px;

}
#simulator-app .input-container .form-range::-moz-range-thumb {
  -webkit-appearance: none;
  width: 30px;
  height: 30px;
  background: blue;
  border-radius: 50%;
  cursor: pointer;
  margin-top: -6px;

}

#simulator-app .input-container .input-error {
  background: #fcf1ee;
  border-color: var(--color-error);
}

#simulator-app .mini-text {
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 135%;
  letter-spacing: -0.05em;
  color: var(--color-text-light);
}

#simulator-app .mini-text-picture-container:has(.bi-exclamation-circle-fill) {
  display: flex;
  padding-right: var(--spacing-xs);
  color: var(--color-primary);
}
#simulator-app .mini-text-picture-container:has(.bi-asterisk-circle-fill) {
  display: flex;
  color: var(--color-primary);
  align-self: baseline;
}
#simulator-app .mini-text-picture.bi-asterisk-circle-fill{
  height: 10px;
}


#simulator-app #short-title {
  font-size: var(--font-size-large);
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.05em;
  color: #cc1480;
}

#simulator-app .simple-text {
  font-size: var(--font-size-large);
  font-weight: 500;
  line-height: 150%;
  letter-spacing: -0.05em;
  text-align: center;
  color: var(--color-text);
}

#simulator-app .btns-container button,
#simulator-app #modal-close-btn,
#simulator-app #send-mail-modal-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  outline: transparent solid 2px;
  line-height: 145%;
  /*border-radius: var(--border-radius-sm);*/
  font-weight: 700;
  transition: background-color var(--transition-duration), border-color var(--transition-duration);
  border: 0;
  height: 2.5rem;
  font-size: var(--font-size-medium);
  padding: var(--spacing-sm) var(--spacing-md);
  letter-spacing: -0.05em;
  min-width: 72px;
  margin-left: var(--spacing-xs);
}

#simulator-app .btns-container button.primary {
  background: var(--color-primary);
  color: var(--color-background);
}

#simulator-app .btns-container button.secondary {
  background: var(--color-background);
  color: var(--color-primary);
  border: 3px solid var(--color-primary);
}

#simulator-app .btns-container button.primary:hover {
  box-shadow: 4px 4px 0px 0px var(--color-shadow);
  background: var(--color-hover);
  color: var(--color-text);
}

#simulator-app .btns-container button.primary:active {
  box-shadow: 2px 2px 0px 0px var(--color-shadow);
  background: #0f266d;
  color: var(--color-background);
}

#simulator-app .btns-container button.secondary:hover {
  box-shadow: 4px 4px 0px 0px var(--color-shadow);
  border-color: var(--color-primary);
  background: var(--color-hover);
  color: var(--color-primary);
}

#simulator-app .btns-container button.secondary:active {
  box-shadow: 2px 2px 0px 0px var(--color-shadow);
  border-color: #0f266d;
  background: #0f266d;
  color: var(--color-background);
}

#simulator-app .btns-container button.primary:disabled,
#simulator-app #send-mail-modal-btn:disabled {
  background: var(--color-disabled);
  box-shadow: none;
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

#simulator-app .btns-container button.secondary:disabled {
  background: var(--color-background);
  color: var(--color-disabled-text);
  border: 3px solid var(--color-disabled-text);
  cursor: not-allowed;
}

#simulator-app .btn-text {
  font-size: var(--font-size-xlarge);
  font-weight: 500;
  line-height: 125%;
  letter-spacing: -0.05em;
}

#simulator-app .tab:not(.secondary)::after {
  content: "";
  width: 0%;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid transparent;
  position: absolute;
  bottom: 0;
  transform: translateY(100%);
  left: calc(50% - 8px);
  transition: border-color var(--transition-duration);
}

#simulator-app .tab.active::after {
  border-top-color: var(--color-primary);
}

#simulator-app .tab:not(.active):hover::after {
  border-top-color: var(--color-hover);
}

#simulator-app .inner-text {
  /* font-size: var(--font-size-large); */
  font-weight: 700;
  line-height: 150%;
  letter-spacing: -0.05em;
  max-width: 60%;
  color: var(--color-text);
  font-size: calc(var(--font-size-small) + (var(--font-size-large) - var(--font-size-small)) * ((100vw - 320px) / (1600 - 320)));
}

#simulator-app .price-text {
 /* font-size: var(--font-size-xxlarge); */
  font-weight: 700;
  line-height: 130%;
  letter-spacing: 0.04em;
  color: #cc4080;
  font-size: calc(var(--font-size-small) + (var(--font-size-xxlarge) - var(--font-size-small)) * ((100vw - 320px) / (1600 - 320)));
}

#simulator-app #send-mail-simulator {
  border: 3px solid var(--color-text);
  color: var(--color-text);
}

#simulator-app #cmd-simulator,
#simulator-app #send-mail-modal-btn {
  border: 3px solid var(--color-text);
  background: var(--color-secondary);
  white-space: nowrap;
}

#simulator-app #cmd-simulator:hover,
#simulator-app #send-mail-simulator:hover,
#simulator-app #send-mail-modal-btn:hover {
  background: #c7fcca;
  box-shadow: 4px 4px 0px 0px var(--color-shadow);
}

#simulator-app .popup-overlay {
  display: flex;
  width: 100vw;
  height: 100vh;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  justify-content: center;
  align-items: center;
  overflow: auto;
  background-color: var(--color-popup-overlay);
}

#simulator-app .popup-content {
  display: flex;
  gap: var(--spacing-xs);
  flex-direction: column;
  position: relative;
  z-index: 101;
  background: var(--color-background);
  box-shadow: 0 10px 15px rgba(0, 0, 0, 0.2);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  min-width: 320px;
  max-width: 630px;
}

#simulator-app #modal-close-btn {
  top: 0;
  right: 0;
  background: transparent;
}

#simulator-app .modal-title {
  font-size: var(--font-size-xxxlarge);
  font-weight: 800;
  line-height: 125%;
  letter-spacing: -0.05em;
}

#simulator-app .check-modal {
  cursor: pointer;
  display: flex;
  align-items: start;
  vertical-align: top;
  position: relative;
}

#simulator-app .checkbox-control {
  display: flex;
  align-items: center;
  justify-content: center;
  vertical-align: top;
  user-select: none;
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  transition: box-shadow var(--transition-duration);
  border: 2px solid var(--color-border);
  border-radius: 0;
  color: var(--color-background);
  background-color: var(--color-background);
}

#simulator-app .checkbox-control.checked,
#simulator-app .checkbox-control:hover {
  border-color: var(--color-primary);
}

#simulator-app .modal-text {
  margin-inline-start: var(--spacing-xs);
  user-select: none;
  color: var(--color-text);
  align-items: center;
  padding-top: var(--spacing-xs);
  font-size: var(--font-size-medium);
  font-weight: 600;
  line-height: 145%;
  letter-spacing: -0.05em;
}

#simulator-app .star {
  font-size: var(--font-size-small);
  font-weight: 600;
  line-height: 135%;
  letter-spacing: -0.05em;
  color: #cc1480;
}

#simulator-app .modal-link {
  color: #0f266d;
}

#simulator-app .modal-link:hover {
  text-decoration: none;
  color: var(--color-primary);
}

#simulator-app .modal-link-text {
  border-bottom: 0.125rem solid;
  font-size: var(--font-size-medium);
  font-weight: 600;
  line-height: 145%;
  letter-spacing: -0.05em;
}

#simulator-app .loading-dots {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

#simulator-app .loading-dots span {
  animation: wave 1.4s infinite;
  opacity: 0;
  font-size: var(--font-size-xlarge);
}

#simulator-app .loading-dots span:nth-child(1) {
  animation-delay: 0s;
}

#simulator-app .loading-dots span:nth-child(2) {
  animation-delay: 0.2s;
}

#simulator-app .loading-dots span:nth-child(3) {
  animation-delay: 0.4s;
}

@keyframes wave {
  0%, 60%, 100% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
}