/* Formulaires du site — présentation commune (téléphone surtout).
   Vaut pour tous les formulaires : demande d'hébergement, demande
   d'accompagnement, candidature (Emplois), page Nous joindre et candidature
   au conseil d'administration. Le thème dimensionne tout en fonction de la
   largeur de l'écran et laisse des champs hauts, des zones de texte
   gigantesques et un bouton « Envoyer » tout en bas ; ce fichier resserre et
   uniformise sans toucher aux fichiers du thème. Chargé sur toutes les pages
   (une transition de page ne recharge pas le <head>). */

/* Les champs du thème se calent sur ces variables (le texte flottant de
   l'étiquette aussi) : les changer garde l'alignement. */
.c-form {
  --form-field-v-pad: 1.15rem;
  --form-field-h-pad: 1.8rem;
  /* Recalculés ici : le thème les calcule une seule fois, sur <html>. */
  --form-field-top-pad: calc(var(--form-field-v-pad) + var(--form-field-pad-offset));
  --form-field-btm-pad: calc(var(--form-field-v-pad) - var(--form-field-pad-offset));
}

/* Une zone de texte doit se laisser parcourir : le thème la fige en
   « overflow: hidden », ce qui cache le texte qui dépasse. */
.c-form textarea.c-form__field,
.c-form .c-form__textarea {
  overflow-y: auto;
  min-height: 11rem;
  height: 11rem;
  max-height: 24rem;
  resize: none;
  -webkit-overflow-scrolling: touch;
}

/* Une étiquette trop longue est coupée avec « … » plutôt que de sortir du champ. */
.c-form .c-form__label {
  max-width: calc(100% - 2 * var(--form-field-h-pad));
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Le bandeau de cookies ne doit pas recouvrir un formulaire ouvert. */
html:has(.c-form-overlay.--is-open) .consent-banner {
  display: none;
}

@media (max-width: 640px) {
  .c-form {
    --form-fz: 16px;
    --form-field-v-pad: 1.05rem;
    --form-field-h-pad: 1.6rem;
    --form-field-top-pad: calc(var(--form-field-v-pad) + var(--form-field-pad-offset));
    --form-field-btm-pad: calc(var(--form-field-v-pad) - var(--form-field-pad-offset));
  }

  /* Rythme régulier entre les champs. */
  .c-form .c-form__fields {
    row-gap: 1.1rem;
    margin-top: 0;
  }

  .c-form .c-form__input-ctn {
    margin: 0;
  }

  /* Fenêtres des formulaires (superpositions du thème). */
  .c-form-overlay .c-form-block__text {
    margin-bottom: 1.4rem;
    padding-bottom: 0;
  }

  /* Le bouton « Fermer » flotte en haut à droite : le titre lui laisse la place. */
  .c-form-overlay .c-form-block__text h4 {
    padding-right: 5rem;
    font-size: 1.85rem;
    line-height: 1.15;
    margin: 0 0 0.8rem;
  }

  .c-form-overlay .c-form-block__text p {
    font-size: 1.05rem;
    line-height: 1.45;
    margin: 0;
  }

  .c-form-overlay .c-overlay__close-button {
    width: 4.4rem;
    height: 4.4rem;
  }

  .c-form-overlay .c-form-block__content {
    margin-top: 0;
  }

  /* Après l'envoi : le message ne doit pas toucher le bouton « Fermer ». */
  .c-form-overlay .c-form-block__content-message {
    margin-top: 2.4rem;
  }

  /* Le thème coupe ce qui dépasse du bloc : cela empêche « Envoyer » de rester collé. */
  .c-form-overlay .c-form-block {
    overflow: visible;
  }

  /* « Envoyer » reste visible en bas de la fenêtre. */
  .c-form-overlay .c-form__submit-button-container {
    position: sticky;
    bottom: 0;
    z-index: 5;
    margin: 1.2rem 0 0;
    padding: 1rem 0 calc(1.2rem + env(safe-area-inset-bottom));
    background: #f8f5ef;
    box-shadow: 0 -1.2rem 1.2rem -0.4rem #f8f5ef;
  }
}