main {
  article:not(:has(section.hdp)) {
    section.form {
      margin-top: 80px;

      @media (min-width: 992px) {
        margin-top: 125px;
      }

      &:after {
        content: '';
        background-image: url('../../img/bg_hdp.jpg');
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        width: 100%;
        height: 515px;
        position: absolute;
        top: 0;
        z-index: 0;

        @media (max-width: 992px) {
          mask: linear-gradient(to top, transparent 0%, black 20%);
        }
      }

      .container {
        z-index: 1;
        position: relative;
      }
    }
  }
}

.form {
  .container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 40px;

    @media (min-width: 992px) {
      align-items: start;
    }

    &:not(.title_left, .title_right) {
      .infos_company {
        a {
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          gap: 10px;

          &:before {
            margin: 0px;
          }
        }
      }
    }

    .infos_company {
      display: flex;
      flex-direction: column;
      align-items: center;

      h4 {
        color: var(--color-secondary-muted);
      }

      a {
        position: relative;
        color: var(--dark);

        @media (max-width: 991px) {
          flex-direction: column;
          text-align: center;
        }

        &:not(:first-child) {
          margin-top: 20px;
        }

        &:before {
          content: '';
          width: 16px;
          height: 16px;
          display: inline-block;
          margin-right: 10px;
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
        }

        &.adresse {
          line-height: 1.2;
          display: flex;

          @media (max-width: 991px) {
            flex-direction: column;
            align-items: center;

            &:before {
              margin: 0 0 20px 0;
            }
          }

          &:before {
            background-image: url(../../img/icon_address.svg);
          }
        }

        &.phone {
          &:before {
            background-image: url(../../img/icon_phone.svg);
          }
        }

        &.mail {
          &:before {
            background-image: url(../../img/icon_mail.svg);
          }
        }
      }

      .navigation_faq {
        display: flex;
        flex-direction: column;
        gap: 16px;

        @media (max-width: 991px) {
          margin-top: 40px;
        }

        .faq-button {
          background: transparent;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          align-items: center;
          border-radius: 8px;
          margin: 0px;
          transition: var(--transition);
          position: relative;
          padding: 16px 24px;
          border: 0px;
          font-size: 16px;
          background-color: var(--white);
          transition: var(--transition);

          @media (max-width: 991px) {
            padding-right: 60px;
            text-align: left;
          }

          @media (min-width: 1200px) {
            font-size: 20px;
          }

          &:after {
            content: '+';
            border: 1px solid var(--dark);
            color: var(--dark);
            border-radius: var(--border-radius-full);
            width: 25px;
            height: 25px;
            font-size: 16px;
            position: absolute;
            right: 24px;
            display: grid;
            place-items: center;
            padding: 0px 0px 0px 1px;
          }

          &.active,
          &:hover {
            background-color: var(--color-secondary);
            color: var(--white);

            &:after {
              content: '-';
              border: 1px solid var(--white);
              color: var(--white);
            }
          }

          &.active {
            .faq-content {
              max-height: fit-content;
              pointer-events: auto;
              opacity: 1;
              text-align: left;
              border-top: 1px solid var(--dark);
              margin: 16px 0;
              padding-top: 16px;

              * {
                margin-bottom: 0;
              }
            }
          }

          .faq-content {
            max-height: 0;
            overflow: hidden;
            opacity: 0;
            pointer-events: none;
            transition: var(--transition);
            padding-top: 0;
          }
        }
      }
    }

    @media (min-width: 992px) {

      &.title_left,
      &.title_right {
        justify-content: space-between;
        gap: 80px;

        .infos_company {
          .navigation_faq {
            margin-top: 30px;
          }
        }
      }

      &.title_left {
        flex-direction: row;

        .infos_company {
          align-items: start;

          .section__title,
          a,
          p,
          li,
          span,
          button {
            text-align: left;
          }

          .navigation_faq {
            button {
              align-items: start;
            }
          }
        }
      }

      &.title_right {
        flex-direction: row-reverse;

        .infos_company {
          align-items: end;

          .section__title,
          a,
          p,
          li,
          span,
          button {
            text-align: right;
          }

          .navigation_faq {
            button {
              align-items: end;
            }
          }
        }
      }
    }

    .gform_wrapper>form {
      /* Fond, bordure, radius et padding de la carte : voir règles plates
         .form .container .gform_wrapper>form en fin de fichier (calées sur
         lovable/src/components/postuler/PostulerForm.tsx). */

      .gform_fields {
        gap: 24px;

        /* Style des champs (fond, bordure, radius, focus) : voir règles plates
           .form .container .gform_wrapper>form .gform_fields input/textarea
           en fin de fichier. */

        .gfield {

          label,
          legend {
            font-size: 16px;

            .gfield_required {
              color: var(--color-primary);
              font-size: 16px;
            }
          }

          &.gfield--type-consent {

            input {
              border-width: 2px;
            }
            
            legend {
              display: none;
            }
          }

          @media (min-width: 992px) {
            .gfield_radio {
              flex-direction: row;
              justify-content: space-between;
              flex-wrap: wrap;

              .gchoice {
                width: 45%;
              }
            }
          }
        }
      }

      .gform_footer {
        .gform_button {
          padding: 10px 16px !important;
          text-decoration: none !important;
          width: fit-content !important;
          border-radius: var(--border-radius-full) !important;
          color: var(--white) !important;
          transition: var(--transition) !important;
          gap: 6px !important;
          min-height: 40px !important;
          align-items: center !important;
          font-size: 14px !important;
          font-weight: var(--regular) !important;
          border: 1px solid transparent !important;
          background-color: var(--color-primary) !important;

          &:after {
            content: '';
            background-image: url(../../img/send.svg);
            display: inline-block;
            width: 14px;
            height: 14px;
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
          }

          &:hover {
            background-color: var(--color-primary) !important;
            border: 1px solid var(--color-primary) !important;
            color: var(--white) !important;
          }
        }
      }
    }

    /* Reset form styles gravity */
    .gform_required_legend,
    .hidden_label label,
    fieldset.hidden_label legend,
    .gform_wrapper.gravity-theme .gf_progressbar_percentagepercentbar_100,
    .gform_wrapper.gravity-theme .gf_progressbar_percentage span,
    .gform_validation_container,
    .gform_wrapper.gravity-theme .gform_validation_container,
    body .gform_wrapper.gravity-theme .gform_body .gform_fields .gfield.gform_validation_container,
    body .gform_wrapper.gravity-theme .gform_fields .gfield.gform_validation_container,
    body .gform_wrapper.gravity-theme .gform_validation_container,
    .gform_wrapper .gform-body .gfield--type-number .ginput_container_number .gfield_description.instruction,
    .hidden_label label {
      display: none;
    }
  }
}

/* Carte formulaire : calée sur lovable/src/components/postuler/PostulerForm.tsx (relevé
   le 2026-09-09). Chrome générique (fond blanc, bordure/radius/padding de carte, champs) :
   appliqué à toutes les pages utilisant le layout "form" (937 Contact et 1177 design-system-2)
   -- pur habillage visuel sans impact structurel, ne modifie ni la présence ni l'agencement
   du bloc .infos_company (donc pas de régression sur la démo 1177). CSS plat, mobile-first,
   conforme à l'étape 7 du brief. */
.form .container .gform_wrapper>form {
  background: var(--white);
  border: 1px solid color-mix(in srgb, var(--color-primary) 12%, transparent);
  border-radius: var(--border-radius-xl);
  padding: 24px;
}

@media (min-width: 992px) {
  .form .container .gform_wrapper>form {
    padding: 40px;
  }
}

.form .container .gform_wrapper>form .gform_fields input,
.form .container .gform_wrapper>form .gform_fields textarea {
  background: var(--white);
}

.form .container .gform_wrapper>form .gform_fields input,
.form .container .gform_wrapper>form .gform_fields textarea,
.form .container .gform_wrapper>form .gform_fields select {
  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
  border-radius: var(--border-radius-lg);
  box-shadow: none;
  outline: none;
  transition: var(--transition);

  option {
    font-size: 16px;
  }
}

.form .container .gform_wrapper>form .gform_fields input:focus,
.form .container .gform_wrapper>form .gform_fields textarea:focus,
.form .container .gform_wrapper>form .gform_fields select:focus {
  border-color: var(--color-primary);
}

.form .container .gform_wrapper>form .gform_fields input::placeholder,
.form .container .gform_wrapper>form .gform_fields textarea::placeholder,
.form .container .gform_wrapper>form .gform_fields select::placeholder {
  color: color-mix(in srgb, var(--color-secondary) 40%, transparent);
}

/* Bouton submit centré (lovable : "flex justify-center") */
.form .container .gform_wrapper>form .gform_footer {
  display: flex;
  justify-content: center;
}

/* Page Contact/Postuler (937) uniquement : PostulerForm.tsx n'a pas de bloc "infos_company"
   (coordonnées + FAQ) à côté du formulaire -- juste une carte centrée max-w-[760px].
   builder/form.php affiche pourtant toujours .infos_company (contenu issu des Options
   footer_adresse/footer_telephone/footer_mail, pas d'un champ ACF de la page, donc pas de
   condition possible côté PHP sans toucher le template). Scopé par body.page-id-937 car la
   page 1177 (design-system-2, page de démo du design system) affiche volontairement ce bloc
   pour la disposition "title_up" -- un masquage générique la dénaturerait. */
body.page-id-937 .form .infos_company {
  display: none;
}

body.page-id-937 .form .container {
  align-items: center;
}

body.page-id-937 .form .container .form__contener {
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
}