/* ========================================================================
   WORDPRESS BLOCK ADJUSTMENTS (Contact Form 7)
   ======================================================================== */

.wp-block-columns:has(.wp-block-contact-form-7-contact-form-selector) {
  height: fit-content !important;
}

.wp-block-column:has(.wp-block-contact-form-7-contact-form-selector) {
  min-height: fit-content;
  max-height: 100%;
}


/* ========================================================================
   CONTACT FORM CONTAINER (Formulaire de contact simple avec image)
   ======================================================================== */

.contact-form-container {
  overflow: hidden;
}

.contact-form-container .wp-block-column:has(figure) {
  min-height: fit-content;
}

.contact-form-container .wp-block-column:has(figure) img {
  width: 100% !important;
  height: 100%;
  object-fit: cover;
}

.contact-form-container .wp-block-column:has(figure) figure {
  min-height: fit-content;
  max-height: 100%;
  height: 100%;
}
@media (max-width: 768px) {
  .contact-form-container-2 {
      padding-left: 2rem !important;
      padding-right: 2rem !important;
  }
  .contact-form-container-2 .form-container {
      padding: 2rem 0rem !important;
  }
  .contact-form-container-2 .form-header {
      flex-direction: column !important;
  }
  .contact-form-container .wp-block-column:not(:has(figure)) {
      min-height: fit-content !important;
}
}

/* ========================================================================
   BASE FORM CONTAINER (Styles communs à tous les formulaires)
   ======================================================================== */

.form-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  width: 100%;
  padding: 4rem 2rem;
  color: var(--wp--preset--color--patchwork-white) !important;
  box-sizing: border-box;
  overflow: hidden;
}

.form-container hr {
  margin: 0 !important;
}

.form-container .form-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  width: 100%;
  height: min-content;
}

.form-container .form-header img {
  height: 3rem;
  width: auto;
  object-fit: contain;
}

/* ========================================================================
   FORM TYPE 1: Contact Form (Formulaire simple avec image latérale)
   Classe: .contact-form-container
   ======================================================================== */

.contact-form-container .form-container {
  padding: 3rem 2rem;
}

.contact-form-container .form-container .form-header {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.contact-form-container .form-container .form-header h2,
.contact-form-container .form-container .form-header h3 {
  margin: 0;
}
.contact-form-container .form-container .form-header p {
  font-size: var(--wp--preset--font-size--normal);
}

.form-container .form-intro {
  width: 100%;
  opacity: 0.9;
}

.form-container .form-intro p {
  margin: 0.5rem 0;
}


.form-container .form-body {
  display: flex;
  width: 100%;
  gap: 2rem;
  flex-wrap: wrap;
}

.form-container .form-body > [class*="col"] {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

@media (min-width: 768px) {
  .form-container .form-body > .col-md-6 {
    width: calc(50% - 1rem);
  }
}

.form-container .form-body .col-md-6:nth-child(2) {
  justify-content: space-between;
}

/* ========================================================================
   FORM TYPE 2: Multi-Step Form (Formulaire avec navigation par étapes)
   Classe: #rejoin-form ou formulaire avec .form-nav
   ======================================================================== */

.form-container .form-header:has(.nav) {
  flex-direction: column;
}

.form-container .form-nav {
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: space-between;
}

.form-container .nav {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 1rem 0 1rem 0;
  font-weight: 700;
  font-size: var(--wp--preset--font-size--medium);
  cursor: pointer;
  position: relative;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  transition: background-color 0.3s ease-in-out, border-color 0.3s ease-in-out;
}

.nav-light {
  background-color: var(--wp--preset--color--patchwork-white);
  border: solid 0.05rem transparent;
  color: var(--wp--preset--color--patchwork-turquoise);
}

.nav-outline-light {
  background-color: transparent;
  border: solid 0.05rem var(--wp--preset--color--patchwork-white);
  color: var(--wp--preset--color--patchwork-white);
}

.nav-outline-light:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.form-container .nav p,
.form-container .nav span,
.form-container .nav * {
  pointer-events: none;
  user-select: none;
}

.nav.completed {
  background-color: var(--wp--preset--color--patchwork-white);
  border-color: transparent;
  color: transparent;
}

.nav.completed::after {
  content: "\f00c";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  top: 50%;
  left: 50%;
  font-size: 1rem;
  color: var(--wp--preset--color--patchwork-turquoise);
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
  transition: transform 0.3s ease-out, opacity 0.3s ease-out;
}

.form-container .button-separator-wrapper {
  display: flex;
  align-items: center;
  position: relative;
  width: 3rem;
  height: 0.125rem;
  overflow: hidden;
}

.form-container .button-separator {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--wp--preset--color--patchwork-white-transparent-25);
  opacity: 0.7;
}

.form-container .button-separator::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: var(--wp--preset--color--patchwork-white);
  opacity: 1;
  transition: width 0.6s ease-in-out;
  z-index: 1;
}

.form-container .button-separator.completed::before {
  width: 100%;
}

.form-pages {
  display: flex;
  position: relative;
  align-self: stretch;
  gap: 4rem;
  overflow: visible;
  transition: transform 0.45s ease-in-out;
}

.form-page {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
  min-width: 100%;
  padding: 0;
  box-sizing: border-box;
  flex-shrink: 0;
  flex-grow: 0;
  position: relative;
}

/* ========================================================================
   FORM FIELDS (Styles communs pour tous les champs de formulaire)
   ======================================================================== */

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
}

.form-group p {
  position: relative;
  margin: 0;
}

.form-group br,
.form-container .form-body br {
  display: none;
}

.form-group p .wpcf7-not-valid-tip {
  position: absolute;
  top: 0;
  right: 0;
  margin: 0;
  white-space: nowrap;
  background-color: var(--wp--preset--color--patchwork-white) !important; 
  padding: 0.2rem 0.6rem;
  border-radius: 0.25rem ;
  font-weight: 700;
  box-shadow: inset 0 0 0 0.075rem #dc3232;
}

.form-group label,
.form-container .form-body label {
  font-weight: 700;
  margin-bottom: 0.5rem;
  display: block;
}

.required-mention {
  opacity: 0.5;
}

.wpcf7-form-control-wrap {
  position: unset;
}


.form-group input,
.form-group textarea {
  width: 100%;
  padding: 0.75rem;
  font-size: var(--wp--preset--font-size--normal);
  font-family: inherit;
  color: var(--wp--preset--color--patchwork-white);
  background-color: transparent;
  border: 0.125rem solid var(--wp--preset--color--patchwork-white) !important;
  border-radius: 0.5rem;
  box-sizing: border-box;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-group textarea {
  min-height: 200px;
  resize: vertical;
}

.form-group input:focus,
.form-group textarea:focus {
  border-color: var(--wp--preset--color--patchwork-white);
  box-shadow: 0 0 0 0.15rem rgba(255, 255, 255, 0.3);
  outline: none;
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(255, 255, 255, 0.6);
}
/* ========================================================================
   FORM FOOTER (Boutons de soumission et navigation)
   ======================================================================== */

.form-footer {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}

.form-footer p {
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin: 0;
}

.form-footer .wpcf7-spinner {
  position: absolute;
}

/* ========================================================================
   RESPONSE OUTPUT (Messages de confirmation/erreur)
   ======================================================================== */

.wpcf7-response-output {
  padding: 1rem 1.5rem !important;
  margin: 1rem !important;
  border-radius: 0.5rem !important;
  font-size: var(--wp--preset--font-size--normal) !important;
  font-weight: 600 !important;
  text-align: center;
}

.wpcf7 form.sent .wpcf7-response-output {
  background-color: rgba(70, 180, 80, 0.15) !important;
  border: 0.125rem solid #46b450 !important;
  color: #46b450 !important;
}

.wpcf7 form.failed .wpcf7-response-output,
.wpcf7 form.aborted .wpcf7-response-output {
  background-color: rgba(220, 50, 50, 0.15) !important;
  border: 0.125rem solid #dc3232 !important;
  color: #dc3232 !important;
}

.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.unaccepted .wpcf7-response-output {
  background-color: rgba(255, 180, 0, 0.15) !important;
  border: 0.125rem solid #ffb900 !important;
  color: #ffb900 !important;
}

.form-footer button,
.form-footer input[type="submit"],
.form-container .form-body input[type="submit"] {
  padding: 0.75rem 1.5rem;
  font-size: var(--wp--preset--font-size--normal);
  font-weight: 700;
  color: var(--wp--preset--color--patchwork-turquoise);
  background-color: var(--wp--preset--color--patchwork-white);
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
  box-sizing: border-box;
  transition: opacity 0.3s ease-in-out, background-color 0.3s ease-in-out, filter 0.3s ease-in-out;
}

.form-footer button:not(:disabled):hover,
.form-footer input[type="submit"]:not(:disabled):hover,
.form-container .form-body input[type="submit"]:not(:disabled):hover {
  filter: brightness(0.95);
}

.form-footer button:disabled,
.form-footer input[type="submit"]:disabled,
.form-container .form-body input[type="submit"]:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.form-footer:has(button[data-role]) {
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

.form-footer button[data-role="previous"] {
  flex: 0 0 auto;
  background-color: transparent;
  border: 0.125rem solid var(--wp--preset--color--patchwork-white);
  color: var(--wp--preset--color--patchwork-white);
}

.form-footer button[data-role="next"],
.form-footer input[type="submit"] {
  flex: 1;
  max-width: 12rem;
  margin-left: auto;
}


/* ========================================================================
   RESPONSIVE STYLES
   ======================================================================== */

@media (max-width: 781px) {
  .contact-form-container .wp-block-column:has(figure) {
    max-height: 30vh;
    min-height: inherit !important;
  }

  .form-container {
    padding: 2rem;
  }

  .buttons-education {
    gap: 0.5rem;
  }
  .form-title .wp-block-separator {
    display: none !important;
  }
  .form-footer:has(p button) {
    justify-content: end !important;
  }
  .buttons-education .wp-block-button a {
    padding: 1rem;
    font-size: 16px;
  }
}