/* ==========================================
   SN UFS — CONTACT FORM 7
   Design system des formulaires

   1. Variables communes
   2. Structure et grille
   3. Champs et labels
   4. Upload PDF
   5. Boutons
   6. Validation
   7. Variante candidature
   8. Variante contact
   9. Responsive
   10. Accessibilité
   ========================================== */


/* ==========================================
   1. VARIABLES COMMUNES
   ========================================== */

.ufs-form {
  /* Couleurs */
  --ufs-accent: #21B8ED;
  --ufs-accent-hover: #1599C7;
  --ufs-text: #3B4A52;
  --ufs-dark: #0F2A36;
  --ufs-white: #FFFFFF;
  --ufs-error: #B42318;

  /* Champs */
  --ufs-field-border: #21B8ED;
  --ufs-field-border-width: 1px;
  --ufs-field-bg: #FFFFFF;
  --ufs-field-height: 40px;
  --ufs-field-radius: 8px;

  /* Labels */
  --ufs-label-size: 20px;
  --ufs-label-weight: 500;
  --ufs-label-line-height: 1.2;
  --ufs-label-gap: 6px;

  /* Grille */
  --ufs-grid-column-gap: 20px;
  --ufs-grid-row-gap: 20px;

  /* Textarea */
  --ufs-textarea-height: 174px;

  /* Bouton */
  --ufs-button-width: auto;
  --ufs-button-height: 50px;
  --ufs-button-size: 17px;
  --ufs-button-border-width: 1px;
  --ufs-button-padding: 12px 24px;
  --ufs-button-margin-top: 24px;

  /* Focus */
  --ufs-focus-border: #1599C7;

  width: 100%;
  font-family: "Manrope", sans-serif;
  color: var(--ufs-text);
}

.ufs-form *,
.ufs-form *::before,
.ufs-form *::after {
  box-sizing: border-box;
}


/* ==========================================
   2. STRUCTURE ET GRILLE
   ========================================== */

.ufs-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  column-gap: var(--ufs-grid-column-gap);
  row-gap: var(--ufs-grid-row-gap);
}

.ufs-form__field {
  display: flex;
  flex-direction: column;
  gap: var(--ufs-label-gap);

  min-width: 0;
}

.ufs-form__field--full {
  grid-column: 1 / -1;
}

/* Neutralisation des espacements CF7 */

.ufs-form__field > br,
.ufs-form__actions > br {
  display: none;
}

.ufs-form__field > p,
.ufs-form__actions > p {
  margin: 0;
  padding: 0;
}

.ufs-form .wpcf7-form-control-wrap {
  display: block;
  width: 100%;
  margin: 0;
}


/* ==========================================
   3. LABELS ET CHAMPS
   ========================================== */

/* Labels */

.ufs-form__label {
  display: block;
  margin: 0;
  padding: 0;

  font-family: inherit;
  font-size: var(--ufs-label-size);
  font-weight: var(--ufs-label-weight);
  line-height: var(--ufs-label-line-height);

  color: var(--ufs-text);
}

/* Inputs, selects et textarea */

.ufs-form :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea
) {
  display: block;
  width: 100%;
  min-width: 0;

  margin: 0;
  padding: 8px 14px;

  border: var(--ufs-field-border-width) solid
          var(--ufs-field-border);

  border-radius: var(--ufs-field-radius);

  background-color: var(--ufs-field-bg);
  box-shadow: none;

  font-family: inherit;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--ufs-text);

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

/* Hauteur des champs simples */

.ufs-form :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select
) {
  height: var(--ufs-field-height);
  min-height: var(--ufs-field-height);
}

/* Textarea */

.ufs-form textarea {
  height: var(--ufs-textarea-height);
  min-height: var(--ufs-textarea-height);

  padding: 12px 14px;
  resize: vertical;
}

/* Focus */

.ufs-form :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="file"],
  select,
  textarea
):focus-visible {
  border-color: var(--ufs-focus-border);

  box-shadow:
    0 0 0 3px rgba(33, 184, 237, 0.15);
}


/* ==========================================
   4. UPLOAD PDF
   Formulaire candidature uniquement
   ========================================== */

.ufs-form--career input[type="file"] {
  display: block;
  width: 100%;

  height: auto;
  min-height: 40px;

  margin: 0;
  padding: 5px 8px;

  border: 1px solid var(--ufs-field-border);
  border-radius: var(--ufs-field-radius);

  background-color: var(--ufs-field-bg);

  font-family: inherit;
  font-size: 14px;
  font-weight: 400;
  color: var(--ufs-text);

  cursor: pointer;
}

/* Bouton natif de sélection */

.ufs-form--career input[type="file"]::file-selector-button {
  margin-right: 12px;
  padding: 5px 10px;

  border: 0;
  border-radius: 5px;

  background-color: #E7F7FD;

  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ufs-dark);

  cursor: pointer;
  transition: background-color 0.2s ease;
}

.ufs-form--career input[type="file"]::file-selector-button:hover {
  background-color: #C9EEFC;
}

/* Texte d'aide */

.ufs-form__help {
  display: block;
  margin-top: 2px;

  font-size: 13px;
  line-height: 1.5;
  color: #6B7C86;
}


/* ==========================================
   5. BOUTONS
   ========================================== */

.ufs-form__actions {
  position: relative;

  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;

  width: 100%;
  margin-top: var(--ufs-button-margin-top);
  padding: 0;
}

.ufs-form input.wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: var(--ufs-button-width);
  max-width: 100%;
  min-height: var(--ufs-button-height);

  margin: 0;
  padding: var(--ufs-button-padding);

  border: var(--ufs-button-border-width) solid
          var(--ufs-accent);

  border-radius: 8px;

  background-color: var(--ufs-accent);

  font-family: inherit;
  font-size: var(--ufs-button-size);
  font-weight: 700;
  line-height: 1.4;

  text-align: center;
  text-transform: none;
  white-space: normal;

  color: #FFFFFF !important;

  cursor: pointer;

  transition:
    background-color 0.2s ease,
    border-color 0.2s ease,
    transform 0.2s ease;
}

/* Hover */

.ufs-form input.wpcf7-submit:hover {
  background-color: var(--ufs-accent-hover);
  border-color: var(--ufs-accent-hover);

  color: #FFFFFF !important;

  transform: translateY(-1px);
}

/* Focus bouton */

.ufs-form input.wpcf7-submit:focus-visible {
  outline: 3px solid var(--ufs-dark);
  outline-offset: 3px;
}

/* Bouton désactivé */

.ufs-form input.wpcf7-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  transform: none;
}


/* ==========================================
   6. VALIDATION CONTACT FORM 7
   ========================================== */

/* Champs invalides */

.ufs-form .wpcf7-not-valid {
  border-color: var(--ufs-error) !important;
}

/* Message d'erreur */

.ufs-form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;

  font-family: inherit;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;

  color: var(--ufs-error);
}


/* ==========================================
   7. FORMULAIRE CANDIDATURE
   ========================================== */

.ufs-form--career {
  /* Bordures cyan */
  --ufs-field-border: #21B8ED;
  --ufs-field-border-width: 1px;
  --ufs-field-bg: #FFFFFF;

  /* Labels */
  --ufs-label-size: 20px;
  --ufs-label-weight: 500;
  --ufs-label-line-height: 1.2;
  --ufs-label-gap: 6px;

  /* Espacements */
  --ufs-grid-column-gap: 20px;
  --ufs-grid-row-gap: 20px;

  /* Message */
  --ufs-textarea-height: 174px;

  /* Bouton compact */
  --ufs-button-width: auto;
  --ufs-button-height: 50px;
  --ufs-button-size: 17px;
  --ufs-button-border-width: 1px;
  --ufs-button-padding: 12px 24px;
  --ufs-button-margin-top: 24px;

  /* Focus */
  --ufs-focus-border: #1599C7;
}


/* ==========================================
   8. FORMULAIRE DE CONTACT
   ========================================== */

.ufs-form--contact {
  /* Bordures gris foncé */
  --ufs-field-border: #3B4A52;
  --ufs-field-border-width: 2px;
  --ufs-field-bg: #FBFBFB;

  /* Labels */
  --ufs-label-size: 15px;
  --ufs-label-weight: 400;
  --ufs-label-line-height: 1.4;
  --ufs-label-gap: 10px;

  /* Espacements */
  --ufs-grid-column-gap: 5%;
  --ufs-grid-row-gap: 26px;

  /* Message */
  --ufs-textarea-height: 168px;

  /* Bouton pleine largeur */
  --ufs-button-width: 100%;
  --ufs-button-height: 56px;
  --ufs-button-size: 20px;
  --ufs-button-border-width: 0px;
  --ufs-button-padding: 13px 24px;
  --ufs-button-margin-top: 30px;

  /* Focus bleu */
  --ufs-focus-border: #21B8ED;
}

/* Typographie des champs */

.ufs-form--contact :is(
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  select,
  textarea
) {
  font-size: 15px;
}

/* Menus déroulants */

.ufs-form--contact select {
  appearance: none;
  -webkit-appearance: none;

  padding-right: 44px;

  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M2 1h8L6 7z' fill='%233B4A52'/%3E%3C/svg%3E");

  background-repeat: no-repeat;
  background-position: right 16px center;
  background-size: 12px 8px;

  cursor: pointer;
}

/* Spinner de chargement */

.ufs-form--contact .wpcf7-spinner {
  position: absolute;
  top: 50%;
  right: 14px;

  margin: 0;
  transform: translateY(-50%);
}


/* ==========================================
   9. RESPONSIVE
   ========================================== */

/* Formulaire de contact */

@media (max-width: 767px) {

  .ufs-form--contact {
    --ufs-grid-row-gap: 22px;
    --ufs-textarea-height: 160px;

    --ufs-button-height: 52px;
    --ufs-button-size: 17px;
  }

  .ufs-form--contact .ufs-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ufs-form--contact .ufs-form__field--full {
    grid-column: 1 / -1;
  }
}

/* Formulaire candidature */

@media (max-width: 640px) {

  .ufs-form--career {
    --ufs-label-size: 17px;
    --ufs-grid-row-gap: 20px;
    --ufs-textarea-height: 160px;
    --ufs-button-size: 16px;
  }

  .ufs-form--career .ufs-form__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .ufs-form--career .ufs-form__field--full {
    grid-column: 1 / -1;
  }
}


/* ==========================================
   10. ACCESSIBILITÉ
   ========================================== */

@media (prefers-reduced-motion: reduce) {

  .ufs-form input,
  .ufs-form select,
  .ufs-form textarea,
  .ufs-form input.wpcf7-submit {
    transition: none;
  }

  .ufs-form input.wpcf7-submit:hover {
    transform: none;
  }
}