/* ============================================================
   Le formulaire de connexion : champs, croix « Effacer la saisie »,
   œil du mot de passe, message à place réservée, bouton.
   Règles : ~/.claude/regles/interface-web.md (focus = seul le bord
   change de couleur ; icônes et textes centrés au pixel).
   ============================================================ */

.formulaire { display: grid; gap: 16px; }

.champ { display: grid; gap: var(--air-libelle); }
.champ__libelle { font-size: 0.875rem; font-weight: 700; }
.champ__boite { position: relative; }
.champ__saisie {
  width: 100%;
  height: var(--hauteur-champ);
  padding: 0 40px 0 12px;
  border: 1.5px solid var(--bord-champ);
  border-radius: var(--rayon);
  background: var(--surface);
  color: var(--texte);
  font: inherit;
  outline: none;
}
.champ__saisie--mdp { padding-right: 76px; }
.champ__saisie:focus { border-color: var(--bord-focus); }
/* Le texte d'exemple s'efface dès qu'on entre dans le champ, et revient en sortant s'il est vide */
.champ__saisie:focus::placeholder { color: transparent; }
.champ__saisie[aria-invalid="true"] { border-color: var(--rouge); }
/* Une seule croix et un seul œil : ceux du navigateur sont cachés */
.champ__saisie::-ms-reveal,
.champ__saisie::-ms-clear { display: none; }

/* Croix et œil : centrés sur la hauteur du champ */
.icone-champ {
  position: absolute;
  inset-block: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin: auto 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--icone-champ);
  cursor: pointer;
}
.icone-champ:hover { background: var(--fond-page); }
.icone-champ:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.icone-champ[hidden] { display: none; }
.icone-champ--croix { right: 6px; }
.champ__saisie--mdp ~ .icone-champ--croix { right: 40px; }
.icone-champ--oeil { right: 6px; }
.icone-champ svg { width: 18px; height: 18px; }
.icone-champ__barre[hidden] { display: none; }

/* Message : place toujours réservée, rien ne bouge quand il apparaît */
.message {
  display: flex;
  align-items: center;
  min-height: var(--hauteur-message);
  padding: 0 12px;
  border-radius: var(--rayon);
  font-size: 0.875rem;
  line-height: 1;
}
.message--erreur { background: var(--rouge-pale); color: var(--rouge); }
.message > span { transform: translateY(1px); }

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: var(--hauteur-bouton);
  padding: 0 20px;
  border: 0;
  border-radius: var(--rayon);
  background: var(--accent);
  color: #ffffff;
  font: 700 1rem/1 var(--police);
  cursor: pointer;
}
.bouton > span { transform: translateY(1px); }
.bouton:hover { background: var(--accent-survol); }
.bouton:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }