# Correction : Encadrés 2FA trop grands sur la page de connexion

## 🐛 Problème

Sur la page de connexion (`/signin`), lors de la saisie du code 2FA (authentification à deux facteurs), les encadrés pour les 6 chiffres étaient beaucoup trop grands par rapport aux encadrés utilisés pour le code OTP par email.

## 🔍 Cause

Les inputs du 2FA utilisaient la classe CSS `flex-1` qui les rendait extensibles pour remplir tout l'espace disponible, combiné avec `justify-between` au lieu de `justify-center`.

**Code problématique** :
```tsx
<div className="flex justify-between gap-1 sm:gap-2">
  <input
    className="flex-1 h-12 sm:h-14 text-center text-xl sm:text-2xl font-mono border-2 border-[#6366f1]/40 rounded-xl bg-white/30 text-[#171424] focus:outline-none focus:ring-2 focus:ring-[#6366f1] shadow-md transition"
  />
</div>
```

## ✅ Solution

Alignement du style des inputs 2FA sur celui des inputs OTP en utilisant :
- Des largeurs fixes (`w-12 sm:w-14` + style inline `width: 3rem`)
- `justify-center` au lieu de `justify-between`
- Les mêmes classes de style pour une apparence cohérente

### Changements apportés

**Fichier** : `/app/signin/page.tsx`

#### Avant :
```tsx
<div className="flex justify-between gap-1 sm:gap-2">
  <input
    className="flex-1 h-12 sm:h-14 text-center text-xl sm:text-2xl font-mono border-2 border-[#6366f1]/40 rounded-xl bg-white/30 text-[#171424] focus:outline-none focus:ring-2 focus:ring-[#6366f1] shadow-md transition"
  />
</div>
```

#### Après :
```tsx
<div className="flex justify-center gap-1 sm:gap-2">
  <input
    className="w-12 sm:w-14 h-14 sm:h-16 text-center text-2xl sm:text-3xl rounded-xl sm:rounded-2xl bg-white/70 border-2 border-[#6366f1]/40 text-[#171424] placeholder-[#171424]/40 focus:outline-none focus:ring-2 focus:ring-[#6366f1]/40 shadow-lg transition flex-shrink-0"
    style={{ fontWeight: 700, letterSpacing: "0.1em", width: "3rem", minWidth: "3rem", maxWidth: "3rem" }}
  />
</div>
```

## 🎯 Améliorations

- ✅ Encadrés 2FA de taille fixe (3rem / ~48px)
- ✅ Cohérence visuelle entre OTP et 2FA
- ✅ Centrés sur la page au lieu d'être étirés
- ✅ Même espacement et style que les inputs OTP
- ✅ Meilleure lisibilité et UX

## 📸 Différences visuelles

### Avant
- Inputs 2FA : Largeur flexible (trop large)
- Distribution : `justify-between` (étalés sur toute la largeur)

### Après
- Inputs 2FA : Largeur fixe de 3rem chacun
- Distribution : `justify-center` (centrés et groupés)
- Style identique aux inputs OTP pour cohérence