feat(r3.3): écrans web de la gestion — stock, achats, coûts OT, documents, statistiques

- Stock : alertes sous seuil (strie ambre), « Préparer le BC » sur la ligne ;
  fiche pièce où les mouvements SONT le stock (entrée / ajustement motivé)
- Bons de commande : liste + panneau (envoi, annulation, réception → entrées
  de stock à PU figé) ; création préremplie depuis l'alerte de seuil
- Fiche OT : carte « Pièces & main-d'œuvre » réelle (consommation à prix figé
  annoncé avant le clic, temps au taux figé) + carte Documents (upload/download) ;
  même carte Documents sur la fiche ascenseur
- Statistiques : 4 KPI, pannes par organe (bilans codés), coûts par mois,
  top équipements ; le tableau de bord allume « Pannes par organe »
- Tiers, bibliothèque (upload rattaché, filtre par type), taux horaire
  éditable dans Personnes ; nav Ressources/Pilotage activée par la matrice
- Recette R3 Playwright (2 parcours autonomes) ; cleanup-e2e étendu aux
  entités R3 ; le formulaire BC attend la fin du refetch (stock périmé en cache)

13/13 e2e verts.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

apps/web/src/styles/app.css

@@ -873,6 +873,50 @@ table {
   color: var(--encre); text-align: right;
 }
 
+/* ═══ R3 — Gestion (classes extraites de maquette-r3.html validée) ═══ */
+/* Statuts de BON DE COMMANDE */
+.st.brouillon { color: var(--st-annule); background: var(--st-annule-fond); }
+.st.envoye { color: var(--st-ouvert); background: var(--st-ouvert-fond); }
+.st.recu { color: var(--st-termine); background: var(--st-termine-fond); }
+
+/* Alerte de stock sous seuil */
+.stock-bas {
+  display: inline-flex; align-items: center; gap: 6px;
+  color: var(--alerte); font-weight: 700; font-size: 12.5px;
+}
+.stock-bas::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--alerte); }
+.ligne-seuil td:first-child { box-shadow: inset 3px 0 0 var(--alerte); }
+
+/* Mouvements de stock */
+.mvt { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; font-size: 12.5px; }
+.mvt.entree { color: var(--succes); }
+.mvt.sortie { color: var(--danger); }
+
+/* Coûts */
+.total { display: flex; justify-content: space-between; font-weight: 700; padding-top: 10px; font-size: 14px; }
+
+/* Bibliothèque */
+.docs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
+@media (max-width: 1100px) { .docs { grid-template-columns: repeat(2, 1fr); } }
+.doc {
+  border: 1px solid var(--bordure); border-radius: var(--rayon); background: var(--surface);
+  padding: 12px; display: flex; flex-direction: column; gap: 8px; font-size: 12.5px;
+}
+.doc .vignette {
+  height: 84px; border-radius: 8px; background: var(--surface-2);
+  display: flex; align-items: center; justify-content: center;
+  color: var(--encre-3); font-size: 24px;
+}
+.doc b { font-size: 13px; word-break: break-all; }
+.doc .meta { color: var(--encre-2); font-size: 11.5px; }
+.type-doc {
+  display: inline-flex; font-size: 10.5px; font-weight: 700; letter-spacing: 0.05em;
+  text-transform: uppercase; color: var(--primaire); background: var(--primaire-doux);
+  padding: 2px 8px; border-radius: var(--rayon-pastille); align-self: flex-start;
+}
+.type-doc.certificat { color: var(--safran); background: var(--safran-doux); }
+.type-doc.photo { color: var(--graf-3); background: var(--st-termine-fond); }
+
 /* ═══ Portail demandeur (écran 6 validé R0 — aucun compte, aucun jargon) ═══ */
 .portail {
   max-width: 430px;