/* =========================================================
   Champs de formulaire MIRA EXPRESS (site + espace facturation)
   Style « titre posé sur la bordure » :
   - normal : cadre gris clair
   - en cours de saisie : cadre bleu MIRA
   - bien rempli : cadre vert + coche
   - erreur : cadre rouge + « ! » et message rouge en dessous
   Le titre (.fl-t) est placé sur la bordure ; son fond reprend celui du bloc (--field-bg).
   ========================================================= */
:root {
  --field-ok: #1fae6b;
  --field-err: #e5484d;
  --field-border: #c9d2e3;
  --field-bg: #fff;
  --ico-ok: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231fae6b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  --ico-err: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e5484d' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 7v6M12 16.5v.5'/%3E%3C/svg%3E");
}

/* Conteneur : le champ du site (.field) ou le libellé de l'espace facturation (label.f) */
.mf { position: relative; display: flex; flex-direction: column; margin-top: 10px; }
.mf > .fl-t {
  position: absolute; top: 0; left: 12px; transform: translateY(-50%); z-index: 2;
  max-width: calc(100% - 24px); padding: 0 6px; background: var(--field-bg);
  font-size: .78rem; font-weight: 700; line-height: 1.2; color: #5d6577;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color .2s;
}
.mf > :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
  width: 100%; background-color: var(--field-bg) !important; color: inherit;
  border: 1.5px solid var(--field-border) !important; border-radius: 14px !important;
  padding: 1.05em 1em .85em !important; font-size: .98rem; font-weight: 600;
  box-shadow: none; transition: border-color .2s, box-shadow .2s;
}
.mf > input::placeholder, .mf > textarea::placeholder { color: #9aa3b5; font-weight: 500; }
.mf > input:hover, .mf > select:hover, .mf > textarea:hover { border-color: #aab6cc !important; }

/* En cours de saisie : bleu MIRA */
.mf:focus-within > .fl-t { color: #0a62e3; }
.mf > input:focus, .mf > select:focus, .mf > textarea:focus {
  outline: none; border-color: #0a62e3 !important; box-shadow: 0 6px 18px -8px rgba(10, 98, 227, .45) !important;
}

/* Bien rempli (après saisie) : vert + coche */
.mf > input:not([readonly]):not([type="date"]):not([type="number"]):user-valid:not(:placeholder-shown):not(:focus) {
  border-color: var(--field-ok) !important; padding-right: 2.8em !important;
  background-image: var(--ico-ok); background-repeat: no-repeat; background-position: right 14px center; background-size: 20px;
}
.mf:has(> input:user-valid:not(:placeholder-shown):not(:focus):not([readonly]):not([type="date"]):not([type="number"])) > .fl-t { color: var(--field-ok); }

/* Erreur : rouge + « ! » */
.mf.error > input, .mf.error > select, .mf > input.invalid,
.mf > input:user-invalid:not(:focus) {
  border-color: var(--field-err) !important; padding-right: 2.8em !important;
  background-image: var(--ico-err); background-repeat: no-repeat; background-position: right 14px center; background-size: 22px;
}
.mf.error > .fl-t, .mf:has(> input.invalid) > .fl-t, .mf:has(> input:user-invalid:not(:focus)) > .fl-t { color: var(--field-err); }
.mf .err-msg { color: var(--field-err); font-size: .8rem; font-weight: 600; margin: 6px 0 0 14px; min-height: 0; }
.mf .err-msg:empty { display: none; }

/* Listes déroulantes : flèche bleue */
.mf > select {
  appearance: none; -webkit-appearance: none; padding-right: 2.8em !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230a62e3' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 14px center !important; background-size: 18px !important;
}

@media (prefers-color-scheme: dark) {
  :root { --field-border: #3a4256; }
  .mf > .fl-t { color: #a1a8bb; }
}