/* Code personnel de l'élève en six cases (note 225) — la même mise en forme
   que le 2FA de l'admin (`assets/css/admin-2fa.css`), aux couleurs de l'espace
   élève. Sans JavaScript, le champ unique d'origine reste affiché. */
#askAe .otp {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin: 6px 0 4px;
  transition: margin .35s ease;
}
#askAe .otp.tourne { margin: 46px 0 44px; }
#askAe .otp-case {
  width: 100%;
  max-width: 54px;
  min-width: 0;
  aspect-ratio: 5 / 6;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  border: 1.5px solid #c9d6d1;
  border-radius: 12px;
  background: #fff;
  color: #10231c;
  font: 700 24px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  text-align: center;
  caret-color: #0a7d5b;
  transition: border-color .15s, box-shadow .15s;
  will-change: transform;
}
#askAe .otp-case:focus {
  outline: none;
  border-color: #0a7d5b;
  box-shadow: 0 0 0 3px rgba(10, 125, 91, .22);
}
#askAe .otp-case.rempli { border-color: #0a7d5b; }
#askAe .otp.tourne .otp-case {
  pointer-events: none;
  background: #0a7d5b;
  border-color: #0a7d5b;
  color: #fff;
}
#askAe .otp.refuse .otp-case {
  border-color: #b42318;
  box-shadow: 0 0 0 3px rgba(180, 35, 24, .18);
}
#askAe .otp-cache { display: none !important; }
#askAe .code-err { color: #a33; }