/* ============================================
   COLLECTIF WEB — FORMULAIRES
   La feuille de Gravity Forms est coupée (voir inc/formulaires.php).
   Celle-ci habille le balisage qui reste, pour qu'un formulaire se pose
   exactement comme dans les maquettes validées.
   ============================================ */

/* ---------- Réinitialisation de ce que l'extension laisse ---------- */
.gform_wrapper { margin: 0; }
.gform_wrapper form { margin: 0; }
.gform_wrapper .gform_fields {
  display: grid;
  gap: var(--space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}
.gform_wrapper .gfield { margin: 0; }
.gform_wrapper .gfield_label {
  display: block;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  margin-bottom: 6px;
}
/* La précision sous un champ se met en retrait par sa couleur, jamais par son
   opacité : à 70 %, le gris secondaire tombait à 3,4 de contraste dans les deux
   modes d'affichage. Relevé au banc sur le formulaire d'audit, le premier du
   site à porter des précisions de champ. */
.gform_wrapper .gfield_description {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--muted);
  margin-top: 6px;
}

/* La mention d'un champ facultatif se pose dans le libellé, comme dans les
   maquettes. Sous le champ — la place que Gravity Forms lui donne — elle
   décalait tout ce qui suit. */
.gform_wrapper .champ--facultatif .gfield_label::after {
  content: " (facultatif)";
  font-weight: 400;
  color: var(--muted);
}

/* Les libellés masqués et la mention « nécessaire » restent lisibles au
   lecteur d'écran. Le design marque le champ facultatif plutôt que les cinq
   autres : la mention visible sur chaque champ obligatoire ferait du bruit. */
.gform_wrapper .screen-reader-text,
.gform_wrapper .gform_hidden,
.gform_wrapper .gfield_visibility_hidden,
.gform_wrapper .gfield_required,
.gform_wrapper .hidden_label .gfield_label,
.gform_wrapper .gform_fields.hidden_label .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Sauf pour le consentement : sa légende est le titre du groupe, et la case
   porte déjà son propre libellé juste à côté. */
.gform_wrapper .gfield--type-consent { border: 0; margin: 0; padding: 0; }
.gform_wrapper .gfield--type-consent > .gfield_label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ---------- Champs ---------- */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="tel"],
.gform_wrapper textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: inherit;
  background: transparent;
  border: var(--border-w) solid var(--border);
  border-radius: 0;
  padding: 12px 14px;
}
.gform_wrapper textarea { min-height: 140px; resize: vertical; }
.gform_wrapper input:focus-visible,
.gform_wrapper textarea:focus-visible,
.gform_wrapper select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Menu déroulant ---------- */
/* Le menu prend le trait des autres champs. Sa flèche d'usine change d'un
   système à l'autre : on la coupe et on pose un chevron au trait fin, comme le
   reste du dessin. La liste ouverte, elle, reste rendue par le système. */
.gform_wrapper .ginput_container_select { position: relative; }
.gform_wrapper select {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  color: inherit;
  background: transparent;
  border: var(--border-w) solid var(--border);
  border-radius: 0;
  padding: 12px 44px 12px 14px;
  appearance: none;
  cursor: pointer;
}
.gform_wrapper .ginput_container_select::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 50%;
  width: 8px;
  height: 8px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  opacity: .6;
  pointer-events: none;
}
/* La liste déroulée est peinte par le système : sur fond sombre, il faut lui
   dire les deux couleurs, sinon les choix sortent en noir sur noir. */
.gform_wrapper select option { background: var(--bg); color: var(--fg); }

/* L'aiguillage vers la page Recrutement — il prend toute la place quand ce
   choix est fait : les champs du message et le bouton se referment derrière
   lui. Le filet du dessus l'accroche au menu, comme les listes à filets du
   site. */
.gform_wrapper .cw-aiguillage__action { margin: var(--space-4) 0 0; }
/* Le bouton d'envoi part avec les champs. La logique conditionnelle de Gravity
   Forms le manque — Turnstile le renomme pour y accrocher son contrôle — alors
   le pied se retire d'ici, sur l'état du menu. Le refus, lui, est prononcé
   côté serveur : un navigateur sans `:has()` verra le bouton, et sa demande
   sera renvoyée avec le bon message. */
.gform_wrapper:has(select option[value="Recrutement"]:checked) .gform_footer { display: none; }
.gform_wrapper .cw-aiguillage {
  margin: 0;
  padding-top: 12px;
  border-top: 1.5px solid var(--rule);
  font-size: var(--fs-small);
  color: var(--fg-soft);
}
/* `--rule` est calibré sur le fond clair : en sombre, le filet se prend
   ailleurs, comme le font les listes du site. */
.dark-mode .gform_wrapper .cw-aiguillage { border-color: var(--rule-dark); }
.gform_wrapper .cw-aiguillage a { color: var(--fg); }

/* ---------- Consentement ---------- */
.gform_wrapper .ginput_container_consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gform_wrapper .ginput_container_consent input[type="checkbox"] {
  width: 24px;
  height: 24px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--vert-bright);
}
.gform_wrapper .gfield_consent_label {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
}

/* ---------- Erreurs et confirmation ---------- */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea { border-color: var(--accent); }
.gform_wrapper .validation_message {
  font-family: var(--font-sans);
  font-size: 16px;
  color: var(--accent);
  margin-top: 6px;
}
.gform_wrapper .gform_validation_errors {
  border: var(--border-w) solid var(--accent);
  padding: var(--space-3);
  margin-bottom: var(--space-4);
}
.gform_wrapper .gform_validation_errors h2 { font-size: 18px; margin: 0; }
.gform_confirmation_message {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  border: var(--border-w) solid var(--vert-bright);
  padding: var(--space-4);
}

/* ---------- Pied du formulaire ---------- */
.gform_wrapper .gform_footer { margin: var(--space-4) 0 0; padding: 0; }

/* ---------- L'infolettre du pied de page ----------
   Le pied est toujours sur fond sombre : les champs y prennent le contour
   clair de la maquette, jamais le contour courant.

   Le champ et le bouton tiennent sur une seule ligne (retour de revue du
   9 août, commentaire n° 18) : `gform_body` et `gform_footer` sont deux frères
   dans le formulaire, il suffit de les poser côte à côte. */
.site-footer .infolettre .gform_wrapper form {
  --infolettre-h: 44px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.site-footer .infolettre .gform_wrapper .gform_body { flex: 1 1 auto; min-width: 0; }
.site-footer .infolettre .gform_wrapper .gform_fields { gap: 8px; }
/* Champ et bouton partagent une hauteur déclarée (retour de revue du 10 août,
   commentaire n° 33). Le calage par le padding laissait 5 px d'écart : un champ
   se dimensionne sur les métriques de sa police, un bouton sur son interligne,
   et les deux ne tombent jamais d'aplomb. Une hauteur commune règle la
   question, et 44 px donnent la cible confortable au doigt. */
.site-footer .infolettre .gform_wrapper input[type="email"] {
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  background: var(--coal);
  color: var(--brume);
  border: 1.5px solid rgba(237, 241, 239, .35);
  height: var(--infolettre-h);
  padding: 0 12px;
}
.site-footer .infolettre .gform_wrapper input[type="email"]:focus { border-color: var(--vert-bright); }
.site-footer .infolettre .gform_wrapper .gfield_consent_label { color: rgba(237, 241, 239, .75); }
.site-footer .infolettre .gform_wrapper .gform_footer { flex: 0 0 auto; margin: 0; }
.site-footer .infolettre .gform_wrapper .btn {
  height: var(--infolettre-h);
  padding: 0 18px;
  color: var(--paper);
  border-color: var(--paper);
}
.site-footer .infolettre .gform_confirmation_message {
  font-size: 16px;
  color: var(--paper);
  border-color: var(--vert-bright);
  padding: var(--space-3);
}

/* ---------- Turnstile ----------
   Le module se pose avant le bouton.

   Il ne dicte pas la largeur du formulaire. Laissé libre, il poussait le pied
   du formulaire à 461 px sur Contact et 578 px sur les deux pages d'audit,
   dans une fenêtre de 375 : la page débordait vers la droite et se défilait
   latéralement. L'extension pose `display: flex` sur ce pied et `width: 100%`
   sur son conteneur ; il manquait seulement de quoi autoriser le rétrécissement.
   Le widget lui-même descend à 300 px, ce qui tient dans le plus petit écran. */
.gform_wrapper .gform_footer,
.gform_wrapper .gform-footer {
  min-width: 0;
  max-width: 100%;
  flex-wrap: wrap;
}
.gf-turnstile-container,
.cf-turnstile {
  min-width: 0;
  max-width: 100%;
}
.cf-turnstile iframe { max-width: 100%; }
.cf-turnstile { margin: var(--space-3) 0; }

/* Le widget ne descend pas sous 300 px : c'est son plancher, imposé par
   Cloudflare. Sur un écran de 375, la fenêtre dessinée laissait 291 px à
   l'intérieur (16 px de marge de page, puis 24 px de marge du cadre de chaque
   côté), et le logo comme le lien « Aide » se retrouvaient rognés à droite.
   On rend les neuf pixels manquants, sur petit écran seulement, et seulement
   dans les cadres qui portent un formulaire. */
@media (max-width: 420px) {
  .fenetre__corps:has(.gform_wrapper) {
    padding-left: 14px;
    padding-right: 14px;
  }
}