/* ===================================================
   FORM — Section formulaire Serapid
   Référence : src/components/serapid/contact/ContactSection.tsx
   Design : layout 2 colonnes, carte blanche, barre dorée
   =================================================== */

/* --------------------------------------------------
   1. Fallback background — quand aucun haut_de_page
   -------------------------------------------------- */
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;
      }
    }
  }
}

/* --------------------------------------------------
   2. Layout principal — 2 colonnes info + formulaire
   -------------------------------------------------- */
.form {
  .container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 48px;

    @media (min-width: 992px) {
      flex-direction: row;
      align-items: flex-start;
      gap: 80px;
    }

    /* Variante : infos à gauche, formulaire à droite */
    &.title_left {
      @media (min-width: 992px) {
        flex-direction: row;
      }

      .infos_company {
        align-items: flex-start;
      }
    }

    /* Variante : infos à droite, formulaire à gauche */
    &.title_right {
      @media (min-width: 992px) {
        flex-direction: row-reverse;
      }

      .infos_company {
        align-items: flex-end;

        h4,
        a,
        p {
          text-align: right;
        }
      }
    }
  }

  /* --------------------------------------------------
     3. Colonne gauche — Informations de contact
     -------------------------------------------------- */
  .infos_company {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: 1;

    /* Réorganisation : h4 (surtag doré) avant section__title (titre principal) */
    .section__title {
      order: 2;
      margin-bottom: 24px;
    }

    h4 {
      order: 1;
      font-family: var(--main-font);
      font-size: 12px;
      font-weight: var(--regular);
      text-transform: uppercase;
      letter-spacing: 0.24em;
      color: var(--color-gold);
      margin: 0 0 20px 0;
      line-height: 1.6;

      @media (min-width: 576px) {
        font-size: 14px;
      }
    }

    /* Sous-titre / paragraphe introductif */
    >p {
      order: 3;
      font-family: var(--main-font);
      font-size: 15px;
      line-height: 1.6;
      color: var(--color-text-grey);
      max-width: 440px;
      margin: 0 0 40px 0;
    }

    /* Adresse masquée — non affichée dans le design Lovable ContactSection */
    a.adresse {
      display: none;
    }

    /* Liens de contact — téléphone et email */
    a.phone,
    a.mail {
      order: 4;
      display: flex;
      flex-direction: row;
      align-items: center;
      gap: 16px;
      color: var(--color-navy);
      text-decoration: none;
      font-family: var(--title-font);
      font-size: 16px;
      font-weight: var(--semibold);
      line-height: 1.4;
      transition: var(--transition);

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

      &:hover {
        color: var(--color-gold);
      }

      /* Cercle navy avec icône Lucide blanche encodée en data URI */
      &::before {
        content: '';
        flex-shrink: 0;
        display: block;
        width: 48px;
        height: 48px;
        min-width: 48px;
        border-radius: 50%;
        background-color: var(--color-navy);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 20px;
        margin-right: 0;
        transition: background-color var(--transition);
      }

      /* Icône téléphone (Lucide Phone, stroke white) */
      &.phone::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07A19.5 19.5 0 0 1 4.69 12.9a19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 3.6 2h3a2 2 0 0 1 2 1.72c.127.96.361 1.903.7 2.81a2 2 0 0 1-.45 2.11L7.91 9.91a16 16 0 0 0 6.06 6.06l1.27-1.27a2 2 0 0 1 2.11-.45c.907.339 1.85.573 2.81.7A2 2 0 0 1 22 16.92z'%3E%3C/path%3E%3C/svg%3E");
      }

      /* Icône email (Lucide Mail, stroke white) */
      &.mail::before {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect width='20' height='16' x='2' y='4' rx='2'%3E%3C/rect%3E%3Cpath d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'%3E%3C/path%3E%3C/svg%3E");
      }
    }

    /* FAQ (optionnelle) */
    .navigation_faq {
      order: 5;
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-top: 40px;
      width: 100%;

      .faq-button {
        background: var(--white);
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-direction: row;
        border-radius: var(--border-radius);
        margin: 0;
        padding: 16px 24px;
        border: none;
        font-size: 16px;
        font-family: var(--main-font);
        color: var(--color-navy);
        text-align: left;
        width: 100%;
        transition: var(--transition);
        position: relative;
        cursor: pointer;

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

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

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

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

        &.active .faq-content {
          max-height: fit-content;
          pointer-events: auto;
          opacity: 1;
          border-top: 1px solid rgba(255, 255, 255, 0.3);
          margin: 16px 0 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;
          width: 100%;
          text-align: left;
        }
      }
    }
  }

  /* --------------------------------------------------
     4. Colonne droite — Carte formulaire GravityForms
     -------------------------------------------------- */
  .form__contener {
    flex: 1;

    /* Carte blanche — Lovable : rounded-[24px] + shadow-[0_24px_80px] */
    .gform_wrapper {
      >form {
        background: var(--white);
        border-radius: var(--border-radius-card);
        padding: 32px;
        box-shadow: 0 24px 80px -20px rgba(15, 26, 37, 0.22);

        @media (min-width: 576px) {
          padding: 40px;
        }

        @media (min-width: 992px) {
          padding: 48px;
        }
      }
    }

    /* --------------------------------------------------
       5. Barre de progression GravityForms multi-pages
       Lovable : "Step X/4" (or, uppercase) + barres discrètes
       -------------------------------------------------- */
    .gf_progressbar_wrapper {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 24px;
    }

    /* Label "Step X of 4" */
    .gf_progressbar_title {
      font-family: var(--main-font);
      font-size: 13px;
      font-weight: var(--regular);
      text-transform: uppercase;
      letter-spacing: 0.18em;
      color: var(--color-gold);
      margin: 0;
      line-height: 1;
      white-space: nowrap;
    }

    /* Barre fond gris clair */
    .gf_progressbar {
      flex: 1;
      max-width: 140px;
      height: 6px;
      border-radius: var(--border-radius-full);
      background-color: var(--color-light-grey);
      overflow: hidden;
    }

    /* Barre remplie en or */
    .gf_progressbar_percentage {
      height: 100%;
      border-radius: var(--border-radius-full);
      background-color: var(--color-gold);
      transition: width 0.4s ease;
    }

    /* --------------------------------------------------
       6. Titres et descriptions des étapes
       -------------------------------------------------- */
    .gsection_title {
      font-family: var(--title-font);
      font-size: 22px;
      line-height: 1.27;
      font-weight: var(--medium);
      color: var(--color-navy);
      margin: 0 0 8px 0;
      border-top: none;
      padding-top: 0;
    }

    .gsection_description {
      font-family: var(--main-font);
      font-size: 14px;
      color: var(--color-text-grey);
      margin: 0 0 24px 0;
    }

    .gform_title {
      font-family: var(--title-font);
      font-size: 22px;
      line-height: 1.27;
      font-weight: var(--medium);
      color: var(--color-navy);
      margin: 0 0 8px 0;
    }

    .gform_description {
      font-family: var(--main-font);
      font-size: 14px;
      color: var(--color-text-grey);
      margin: 0 0 24px 0;
    }

    /* --------------------------------------------------
       7. Champs de formulaire
       -------------------------------------------------- */
    .gform_fields {
      display: flex;
      flex-direction: column;
      gap: 20px;
      list-style: none;
      margin: 8px 0 0;
      padding: 0;
    }

    .gfield {
      margin: 0;
      padding: 0;

      /* Labels */
      .gfield_label,
      legend.gfield_label {
        display: block;
        font-family: var(--main-font);
        font-size: 14px;
        font-weight: var(--medium);
        color: var(--color-navy);
        margin-bottom: 8px;

        .gfield_required {
          color: var(--color-gold);
          font-size: 14px;
        }
      }

      /* Inputs texte, email, tel */
      .ginput_container {

        input[type="text"],
        input[type="email"],
        input[type="tel"],
        input[type="number"],
        input[type="url"],
        input[type="date"] {
          width: 100%;
          border-radius: var(--border-radius);
          background-color: var(--color-light-grey);
          border: 1px solid transparent;
          padding: 14px 16px;
          font-size: 14px;
          font-family: var(--main-font);
          color: var(--color-navy);
          box-shadow: none;
          transition: var(--transition);

          &::placeholder {
            color: var(--color-text-grey);
          }

          &:focus {
            outline: none;
            border-color: rgba(38, 69, 100, 0.3);
            box-shadow: 0 0 0 3px rgba(38, 69, 100, 0.12);
          }
        }

        /* Textarea */
        textarea {
          width: 100%;
          border-radius: var(--border-radius);
          background-color: var(--color-light-grey);
          border: 1px solid transparent;
          padding: 14px 16px;
          font-size: 14px;
          font-family: var(--main-font);
          color: var(--color-navy);
          box-shadow: none;
          resize: none;
          min-height: 120px;
          transition: var(--transition);

          &::placeholder {
            color: var(--color-text-grey);
          }

          &:focus {
            outline: none;
            border-color: rgba(38, 69, 100, 0.3);
            box-shadow: 0 0 0 3px rgba(38, 69, 100, 0.12);
          }
        }

        /* Select avec chevron SVG (Lucide ChevronDown) */
        select {
          width: 100%;
          border-radius: var(--border-radius);
          background-color: var(--color-light-grey);
          border: 1px solid transparent;
          padding: 14px 40px 14px 16px;
          font-size: 14px;
          font-family: var(--main-font);
          color: var(--color-navy);
          box-shadow: none;
          appearance: none;
          cursor: pointer;
          background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23264564' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
          background-repeat: no-repeat;
          background-position: right 14px center;
          background-size: 16px;
          transition: var(--transition);

          &:focus {
            outline: none;
            border-color: rgba(38, 69, 100, 0.3);
            box-shadow: 0 0 0 3px rgba(38, 69, 100, 0.12);
          }
        }
      }

      /* Checkboxes stylisées — grid 2 colonnes, bordered */
      &.gfield--type-checkbox {
        .gfield_checkbox {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 12px;
          list-style: none;
          margin: 0;
          padding: 0;

          @media (max-width: 575px) {
            grid-template-columns: 1fr;
          }
        }

        .gchoice {
          display: flex;
          align-items: center;

          label {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            cursor: pointer;
            border-radius: var(--border-radius);
            border: 1px solid var(--color-light-grey);
            background-color: var(--color-light-grey);
            padding: 12px 16px;
            font-family: var(--main-font);
            font-size: 14px;
            color: var(--color-navy);
            line-height: 1.4;
            transition: var(--transition);

            &:hover {
              border-color: rgba(38, 69, 100, 0.2);
            }
          }

          input[type="checkbox"] {
            accent-color: var(--color-gold);
            width: 16px;
            height: 16px;
            flex-shrink: 0;
            cursor: pointer;
          }

          &:has(input:checked) label {
            border-color: var(--color-gold);
            background-color: rgba(203, 187, 157, 0.05);
          }
        }
      }

      /* Radio buttons */
      &.gfield--type-radio {
        .gfield_radio {
          list-style: none;
          padding: 0;
          margin: 0;
          display: flex;
          flex-direction: column;
          gap: 12px;

          @media (min-width: 576px) {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
          }
        }

        .gchoice {
          display: flex;

          label {
            display: flex;
            align-items: center;
            gap: 12px;
            width: 100%;
            cursor: pointer;
            border-radius: var(--border-radius);
            border: 1px solid var(--color-light-grey);
            background-color: var(--color-light-grey);
            padding: 12px 16px;
            font-family: var(--main-font);
            font-size: 14px;
            color: var(--color-navy);
            transition: var(--transition);
          }

          input[type="radio"] {
            accent-color: var(--color-gold);
            flex-shrink: 0;
          }

          &:has(input:checked) label {
            border-color: var(--color-gold);
            background-color: rgba(203, 187, 157, 0.05);
          }
        }
      }

      /* Champ en erreur */
      &.gfield_error {

        .ginput_container input,
        .ginput_container textarea,
        .ginput_container select {
          border-color: #c0392b;
        }
      }

      .validation_message {
        font-family: var(--main-font);
        font-size: 13px;
        color: #c0392b;
        margin-top: 6px;
      }
    }

    /* --------------------------------------------------
       8. Boutons de navigation multi-pages
       Previous : pilule outline navy | Next/Send : pilule gold
       -------------------------------------------------- */
    .gform_page_footer,
    .gform_footer {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      margin-top: 32px;
      padding-top: 0;
      background: none;
      border: none;

      /* Bouton Précédent */
      .gform_previous_button {
        display: inline-flex !important;
        height: 45px !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: var(--border-radius-full) !important;
        border: 1px solid rgba(38, 69, 100, 0.2) !important;
        padding: 0 20px !important;
        font-family: var(--main-font) !important;
        font-size: 14px !important;
        font-weight: var(--regular) !important;
        color: var(--color-navy) !important;
        background: transparent !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        text-decoration: none !important;
        min-height: unset !important;
        width: fit-content !important;

        &:hover {
          background-color: var(--color-light-grey) !important;
        }

        /* Pas d'icône supplémentaire */
        &::after {
          display: none !important;
        }
      }

      /* Bouton Suivant / Envoyer */
      .gform_next_button,
      .gform_button {
        display: inline-flex !important;
        height: 45px !important;
        align-items: center !important;
        gap: 8px !important;
        border-radius: var(--border-radius-full) !important;
        background-color: var(--color-gold) !important;
        border: 1px solid var(--color-gold) !important;
        padding: 0 20px !important;
        font-family: var(--main-font) !important;
        font-size: 14px !important;
        font-weight: var(--regular) !important;
        color: var(--white) !important;
        cursor: pointer !important;
        transition: var(--transition) !important;
        text-decoration: none !important;
        margin-left: auto !important;
        min-height: unset !important;
        width: fit-content !important;

        &:hover {
          background-color: var(--color-dark-gold) !important;
          border-color: var(--color-dark-gold) !important;
          color: var(--white) !important;
        }

        /* Supprimer l'icône send de l'ancien CSS */
        &::after {
          display: none !important;
        }
      }
    }

    /* --------------------------------------------------
       9. Message de confirmation et erreurs globales
       -------------------------------------------------- */
    .gform_confirmation_wrapper,
    .gform_confirmation_message {
      font-family: var(--main-font);
      font-size: 16px;
      line-height: 1.6;
      color: var(--color-navy);
      text-align: center;
      padding: 40px 20px;
    }

    .gform_validation_errors {
      background: none;
      border: none;
      padding: 0 0 16px 0;
      box-shadow: none;

      h2 {
        font-family: var(--main-font);
        font-size: 14px;
        font-weight: var(--medium);
        color: #c0392b;
        margin: 0;
      }
    }

    /* --------------------------------------------------
       10. Éléments cachés — reset GravityForms
       -------------------------------------------------- */
    .gform_required_legend,
    .hidden_label label,
    fieldset.hidden_label legend,
    .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,
    .gform_wrapper .gform-body .gfield--type-number .ginput_container_number .gfield_description.instruction {
      display: none !important;
    }

    /* --------------------------------------------------
       11. Formulaire HubSpot — confirmé rendu dans un vrai <iframe>
       (l'inspecteur montre le CSS appliqué comme venant de "frame.html",
       un document HubSpot séparé). Aucune règle ni variable CSS de cette
       feuille de style ne peut atteindre l'intérieur — ni via classe, ni
       via variable --hsf-* (l'héritage CSS ne traverse pas un iframe).
       Seul le conteneur .hs-form-frame lui-même (dans notre page, pas
       dans l'iframe) reste stylable depuis ici.

       Le style interne du formulaire (champs, boutons, barre de
       progression) doit être fait dans HubSpot : édition du formulaire
       > Style & preview > Custom CSS. Voir le fichier fourni
       (hubspot_form_custom_css.css) reprenant les tokens de ce thème
       pour ce panneau.
       -------------------------------------------------- */
    .hs-form-frame {
      display: block;
      border-radius: var(--border-radius-card);
      overflow: hidden;
      box-shadow: 0 24px 80px -20px rgba(15, 26, 37, 0.22);
    }
  }
}