/* ==========================================================================
   Formulaires — Contact (§7.11) et Carrières (§7.10)
   --------------------------------------------------------------------------
   Porté du prototype (`style.css` 596-611), qui fait foi (ADR-0006).
   Enfilée par `inc/forms.php` sur les deux écrans qui portent un formulaire.

   TROIS ÉCARTS, tous assumés et tous nécessaires :

   1. La MISE EN GRILLE des éléments hors champs. Dans le prototype, `.consent`,
      `.form__submit` et `.form__note` sont des frères de `.form`, hors de la
      grille. Ici le plugin les rend DANS le `<form>` — c'est-à-dire dans la
      grille — parce qu'un bouton d'envoi hors du formulaire n'envoie rien.
      Ils reprennent donc `grid-column:1/-1`, le mécanisme que le prototype
      utilise déjà pour `.field--full`. Aucune valeur nouvelle.

   2. Le CADRE DE DÉPÔT du CV est un VRAI `<input type="file">`, là où le
      prototype pose un `<div>` décoratif : il porte la classe `.field__drop`
      et son dessin, augmenté du strict nécessaire pour qu'un champ de fichier
      natif tienne dans un cadre de 52px.

   3. Le GRIS DU TEXTE SECONDAIRE. Le prototype écrit `.form__note` et le texte
      du cadre de dépôt en `--muted-2` (#8A939C), soit ≈ 3,1:1 sur blanc —
      sous le seuil AA pour du texte (README §12, spec §4.3). C'est une
      question d'accessibilité, pas d'apparence : l'arbitrage du prototype ne
      s'y applique pas. Ces deux textes passent en `--muted` (#6B7480, ≈ 4,9:1).
   ========================================================================== */

/* ---------------------------------------------------------- la grille --- */
.form{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;}
.form--200{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;}

/* Écart 1 — les éléments qui, dans le prototype, vivaient hors de la grille. */
.form > .consent,
.form > .form__submit,
.form > .form__note,
.form > .form__errors,
.form > .form__success{grid-column:1 / -1;}
.form > .form__submit{justify-self:start;}

/* ------------------------------------------------------------- champs --- */
.field{display:grid;gap:8px;}
.field--full{grid-column:1 / -1;}
.field__l{font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--secondaire);}
.field input,.field select{height:56px;padding:0 14px;border:1px solid var(--line-soft);background:#fff;font-family:inherit;font-size:15px;color:var(--ink);outline:none;}
.form--200 .field input{height:52px;}
.field textarea{padding:14px;border:1px solid var(--line-soft);background:#fff;font-family:inherit;font-size:15px;line-height:1.6;color:var(--ink);outline:none;resize:vertical;}
/* TROUVÉ AU LOT 9 par la sonde de focus (`scripts/recette.php --navigateur`) :
   neuf champs de la page Contact n'avaient AUCUN indicateur de focus.
   `outline:none` est porté du prototype (`style.css` 601) et vit dans cette
   feuille, chargée APRÈS `base.css` ; à spécificité égale, il écrasait le
   `input:focus-visible{outline:2px solid var(--orange)}` du socle. Le seul
   repère restant était le passage de la bordure à l'orange — 1px, sur un
   champ dont la bordure est déjà là. Ce n'est pas un focus visible.
   Les deux sont donc rétablis : la bordure orange (dessin du prototype) ET
   le contour (accessibilité, README §12). */
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--orange);}
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}
/* Idem : le fond passe à #F7F8F8, donc le texte descend à `--body`. */
.field input[readonly]{background:var(--grey-soft);color:var(--body);}

/* Écart 2 — le cadre de dépôt porté par le champ de fichier lui-même.
   La spécificité `.field input.field__drop` est obligatoire : sans elle, la
   règle `.field input` ci-dessus (deux sélecteurs) l'emporterait sur une
   classe seule et rendrait la bordure pleine et la hauteur à 56px. */
.field input.field__drop,
.form--200 .field input.field__drop{height:52px;border:1px dashed var(--line-soft);background:#fff;display:flex;align-items:center;padding:14px;font-size:14px;color:var(--secondaire);}

/* --------------------------------------------- groupe de boutons radio --- */
/* C1 de la vague A, soldé au Lot 7ter. Le prototype ne dessine AUCUN radio :
   comme le résumé d'erreurs et la confirmation, le groupe est composé avec les
   primitives existantes — `.field`, `.field__l`, l'accent unique — et deux
   classes qui ne portent QUE la mise en page.

   `<fieldset>` arrive avec des marges et une bordure de navigateur : elles sont
   remises à zéro, sinon un groupe de deux boutons sortirait plus large et plus
   haut que le champ voisin, dans une grille qui les aligne. */
.field--group{border:0;margin:0;padding:0;min-width:0;}
.field__radios{display:flex;flex-wrap:wrap;gap:10px 22px;padding:14px 0 2px;}
.field__radio{display:inline-flex;align-items:center;gap:10px;font-size:15px;color:var(--ink);cursor:pointer;}
.field__radio input{width:20px;height:20px;margin:0;padding:0;border:0;accent-color:var(--orange);flex-shrink:0;}
.field__radio input:focus-visible{outline:2px solid var(--orange);outline-offset:2px;}

/* ------------------------------------------------ consentement, envoi --- */
.consent{display:flex;align-items:flex-start;gap:12px;margin-top:20px;font-size:13.5px;line-height:1.65;color:var(--secondaire);max-width:600px;}
.consent input{width:20px;height:20px;margin:2px 0 0;accent-color:var(--orange);flex-shrink:0;}
.form__submit{margin-top:24px;height:56px;padding:0 34px;border:0;background:var(--orange);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;}
.form__submit:hover{background:var(--ink);}
.form__note{margin:16px 0 0;font-size:12.5px;line-height:1.7;color:var(--secondaire);max-width:520px;}

/* Message d'erreur d'un champ : même vocabulaire, couleur d'accent unique.
   Le `margin` haut de `.form__note` n'a pas de sens sous un contrôle : il est
   ramené à l'écart de la grille du champ (8px, déjà posé par `.field`). */
.form__note--err{margin:0;color:var(--orange);font-weight:600;}
.consent .form__note--err{margin-top:6px;display:block;}

/* --------------------------------- résumé d'erreurs et confirmation ----- */
/* Sans dessin dans le prototype (spec §3.3) : composés avec `.box`,
   `.eyebrow` et `.form__note`, sans un token de plus. Seule la mise en page
   est écrite ici. */
.form__errors,
.form__success{margin:0;}
.form__errors ul{margin:0;padding-left:20px;}
.form__errors li{margin:0 0 6px;}
.form__errors li:last-child{margin-bottom:0;}
.form__success .h2{margin:0 0 10px;}