/* ===========================================================================
   FORMULAIRES — champs, listes, cases, et l'état d'erreur
   ===========================================================================

   Champ texte, mot de passe, liste déroulante, case à cocher, zone de texte,
   et l'état d'erreur avec son message.

   TROIS RÈGLES, toutes issues de défauts réels :

   1. UN CHAMP A TOUJOURS UNE ÉTIQUETTE `<label for>`. Un `placeholder` n'en est
      pas une : il disparaît dès qu'on tape, et l'utilisateur ne sait plus ce
      qu'il remplit. Un lecteur d'écran, lui, n'annonce parfois rien du tout.

   2. L'ERREUR NE SE DIT PAS PAR LA COULEUR SEULE. Un contour rouge n'existe pas
      pour qui ne distingue pas le rouge. Il faut le MESSAGE, à côté du champ,
      qui dit ce qui ne va pas et comment le corriger.

   3. LE MESSAGE D'ERREUR EST RATTACHÉ AU CHAMP par `aria-describedby`, et le
      champ porte `aria-invalid="true"`. Sans ce lien, le message existe à
      l'écran et pas pour un lecteur d'écran : il est lu au petit bonheur, ou
      jamais.

   Voir `formulaires.html`.
   =========================================================================== */

.iav-champ {
  display: flex;
  flex-direction: column;
  gap: var(--iav-espace-minuscule, 4px);
  margin-bottom: var(--iav-espace-grand, 16px);
}

.iav-champ-etiquette {
  font-size: var(--iav-taille-secondaire, 12px);
  font-weight: var(--iav-graisse-semi, 600);
  color: var(--iav-texte-principal, #1B2733);
}

/* Le repère d'obligation. `aria-hidden` sur l'astérisque dans le balisage : le
   lecteur d'écran a déjà l'attribut `required`, et « étoile » lu à voix haute
   n'apprend rien. */
.iav-champ-requis {
  color: var(--iav-avertissement-texte, #7B241C);
  font-weight: var(--iav-graisse-forte, 700);
}

/* --- Le contrôle lui-même --------------------------------------------------
   Une seule règle pour les cinq types : ils doivent s'aligner au pixel près
   quand ils se suivent dans une colonne, et cinq déclarations séparées finiront
   par diverger.
   --------------------------------------------------------------------------- */
.iav-controle {
  width: 100%;
  padding: var(--iav-espace-petit, 8px) var(--iav-espace-moyen, 12px);
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  border-radius: var(--iav-rayon, 8px);
  background: var(--iav-fond-page, #FFFFFF);
  color: var(--iav-texte-principal, #1B2733);
  /* `inherit` et non la pile : sinon un <input> retombe sur la police du
     système d'exploitation et jure avec le reste de la page. C'est le défaut
     par défaut des navigateurs, et il ne se voit qu'une fois la page finie. */
  font-family: inherit;
  font-size: var(--iav-taille-texte, 14px);
  line-height: var(--iav-interligne, 1.5);
  min-height: 40px;
}

.iav-controle::placeholder {
  color: var(--iav-texte-desactive, #9AA7B5);
}

.iav-controle:hover:not(:disabled) {
  border-color: var(--iav-texte-secondaire, #5A6B7F);
}

.iav-controle:disabled {
  background: var(--iav-fond-desactive, #EDF2F7);
  color: var(--iav-texte-desactive, #9AA7B5);
  cursor: not-allowed;
}

/* La zone de texte se redimensionne à la verticale seulement : en largeur, elle
   sortirait de sa colonne. */
textarea.iav-controle {
  resize: vertical;
  min-height: 96px;
}

/* La liste déroulante. La flèche est dessinée en SVG dans l'URL plutôt que
   déposée en fichier : aucune requête, aucune image à versionner, et rien à
   charger depuis un tiers — `auth/spec.md` HT-4 l'interdit sur les pages
   d'authentification, et ce champ y sert. */
select.iav-controle {
  appearance: none;
  padding-right: var(--iav-espace-section, 32px);
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%235A6B7F' d='M1 1.5 6 6.5 11 1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--iav-espace-moyen, 12px) center;
  cursor: pointer;
}

/* --- Aide et compteur ------------------------------------------------------ */

.iav-champ-aide {
  font-size: var(--iav-taille-secondaire, 12px);
  color: var(--iav-texte-secondaire, #5A6B7F);
  margin: 0;
}

/* --- L'état d'erreur -------------------------------------------------------
   Le contour ET le message. Jamais le contour seul.
   --------------------------------------------------------------------------- */

.iav-controle-erreur,
.iav-controle[aria-invalid="true"] {
  border-color: var(--iav-erreur-texte, #A61B2B);
  /* Doublé d'une ombre intérieure : sur un écran mal réglé, un trait d'un
     pixel qui change de couleur ne se voit pas. */
  box-shadow: inset 0 0 0 1px var(--iav-erreur-texte, #A61B2B);
}

.iav-champ-erreur {
  display: flex;
  align-items: flex-start;
  gap: var(--iav-espace-minuscule, 4px);
  font-size: var(--iav-taille-secondaire, 12px);
  font-weight: var(--iav-graisse-semi, 600);
  color: var(--iav-erreur-texte, #A61B2B);
  margin: 0;
}

/* --- Case à cocher et bouton radio -----------------------------------------
   L'étiquette ENTOURE le contrôle : toute la ligne devient alors cliquable, ce
   qui compte au doigt sur un téléphone. Une case de 16 px seule est une cible
   qu'on rate.
   --------------------------------------------------------------------------- */

.iav-case {
  display: flex;
  align-items: flex-start;
  gap: var(--iav-espace-petit, 8px);
  margin-bottom: var(--iav-espace-moyen, 12px);
  cursor: pointer;
  font-size: var(--iav-taille-texte, 14px);
  color: var(--iav-texte-principal, #1B2733);
}

.iav-case input {
  /* `accent-color` habille la case native aux couleurs de la maison sans la
     remplacer. Une case redessinée à la main perd le clavier, le mode contraste
     élevé du système et l'état indéterminé — pour un gain purement décoratif. */
  accent-color: var(--iav-bleu-lien, #2B6CB0);
  width: 18px;
  height: 18px;
  /* Aligné sur la première ligne du texte, pas sur le bloc entier : sur une
     étiquette de deux lignes, la case se centrerait entre les deux. */
  margin: 2px 0 0;
  flex: 0 0 auto;
  cursor: pointer;
}

.iav-case input:disabled,
.iav-case input:disabled + span { cursor: not-allowed; color: var(--iav-texte-desactive, #9AA7B5); }

/* --- Disposition en colonnes -----------------------------------------------
   Deux champs par ligne au-dessus de 640 px, un seul en dessous. Jamais trois :
   au troisième, chaque champ devient trop étroit pour son contenu.
   --------------------------------------------------------------------------- */

.iav-formulaire-colonnes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 var(--iav-espace-grand, 16px);
}

@media (max-width: 640px) {
  .iav-formulaire-colonnes { grid-template-columns: 1fr; }
}

/* Un groupe de champs qui va ensemble. `<fieldset>` et `<legend>` : c'est ce
   qui fait annoncer « Adresse, 3 champs » au lieu de trois champs orphelins. */
.iav-groupe {
  border: var(--iav-trait, 1px) solid var(--iav-bordure, #E3E9F0);
  border-radius: var(--iav-rayon, 8px);
  padding: var(--iav-espace-grand, 16px);
  margin: 0 0 var(--iav-espace-large, 24px);
}

.iav-groupe legend {
  padding: 0 var(--iav-espace-petit, 8px);
  font-size: var(--iav-taille-secondaire, 12px);
  font-weight: var(--iav-graisse-forte, 700);
  color: var(--iav-texte-secondaire, #5A6B7F);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}