.benevole-contact-form-container {
  display: none;
}  

.modal-form-cta {
  text-transform: underline;
  cursor: pointer
}

/* ============ STYLE DU BLOC DE TEXTE & COULEUR QUESTION ============ */
.benevole-contact-form-container .info-box {
  background-color: var(--grey-400);
  padding: 30px 50px;
  font-size: 14px;
  color: var(--black);
  line-height: 1.5;
  margin-bottom: 20px;
}


/* ============ CONTAINER DU FORMULAIRE BÉNÉVOLE couleur ect.. ============ */
.benevole-form {
  background-color: var(--grey-300);
  margin-right: -4px;
  padding: 17px;
}

.benevole-form .form-group {
  margin-bottom: 1em;
}

.benevole-form input:not([type="checkbox"]),
.benevole-form textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid var(--grey-100-menu);
  border: 1px solid var(--grey-200);
  border-radius: 5px;
  font-size: var(--font-size-16);
  background-color: var(--white);
}

.benevole-form textarea {
  resize: vertical;
  min-height: 80px;
}

.benevole-form label {
  display: block;
  font-size: var(--font-size-14);
  margin-bottom: 5px;
  color: var(--black);
  line-height: 1.3;
}



/* ============ CASE À COCHER ============ */
.benevole-form .checkbox-group {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 11px;
  font-size: var(--font-size-12);
  color: var(--grey-750);
  color: var(--grey-800);
  padding: 8px;
}


.benevole-form #consentement {
  margin: unset !important;
}

/* ============ BOUTON ENVOYER ============ */
.benevole-form .submit-btn {
  background-color: var(--yellow-bar);
  color: black;
  font-weight: bold;
  padding: 12px;
  width: 100%;
  border: none;
  border-radius: 4px;
  font-size: var(--font-size-16);
  cursor: pointer;
  transition: background-color 0.2s;
}

.benevole-form .submit-btn:hover {
  background-color: var(--yellow-bar);
}

.benevole-form .arrow {
  margin-left: 10px;
}

.benevole-form .confirmation-message {
  display: none;
  margin-top: 15px;
  color: var(--green-text);
  font-size: var(--font-size-14);
}

/* ============ MODAL ============ */
.benevole-form.modal-form {
  position: fixed;
  top: 120px;
  z-index: 4;
  height: calc(100vh - 120px);
  padding: 30px;
  overflow: auto;
  transition: transform 0.3s ease-out;
  transform: translateX(-100%);
}

.benevole-form.modal-form.opening {
  transform: translateX(0);
}

.benevole-form.modal-form.closing {
  transform: translateX(-100%);
  
}

.benevole-contact-form-container .benevole-form .close-btn {
  display: none;
}

.benevole-form.modal-form .close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 16px;
  cursor: pointer;
  color: var(--black);
}


/* ============ RESPONSIVE ============ */
@media screen and (min-width: 1024px) {  
  .benevole-contact-form-container {
    display: block;
  }  
}