Rend l'attente visible, et met le champ de création sur une ligne

Une recherche BnF coûte environ une seconde par page, et jusqu'à dix pages pour
les nouveautés : sans rien à l'écran, l'application se lit comme plantée. Le lot
H l'avait montré — un écran qui ne dit rien pousse à recliquer, donc à relancer
l'appel.

Un indicateur ne remplace aucun message d'échec : une source muette garde ses
`EtatSourceBibliographie` et ses motifs. Ici on dit « ça travaille », jamais
« ça a marché ». L'animation se neutralise sous `prefers-reduced-motion`, la
rondelle restant visible : c'est elle qui porte l'information, pas sa rotation.

Le champ « nom d'une nouvelle série » et son bouton tiennent maintenant sur une
ligne. `min-width: 0` est ce qui la fait tenir à 320 px : sans lui, un élément de
formulaire refuse de rétrécir sous sa largeur intrinsèque et pousse le bouton
hors de l'écran.

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

MaBibli.Client/wwwroot/css/app.css

@@ -1383,3 +1383,66 @@ body {
         border-bottom-color: #f5d76e;
     }
 }
+
+/* --- Attente (lot L1) -------------------------------------------------
+   Un appel lent doit se voir : une recherche BnF coûte ~1 s par page, et
+   jusqu'à dix pages pour les nouveautés. Sans indicateur, l'écran se lit
+   comme planté et l'on reclique, ce qui relance l'appel.
+   ------------------------------------------------------------------- */
+
+.attente {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--mb-texte-doux);
+    font-size: 0.9rem;
+    margin: 0.75rem 0;
+}
+
+.attente-rondelle {
+    flex: 0 0 auto;
+    width: 1rem;
+    height: 1rem;
+    border: 2px solid var(--mb-bord);
+    border-top-color: var(--mb-accent);
+    border-radius: 50%;
+    animation: attente-tourne 0.8s linear infinite;
+}
+
+@keyframes attente-tourne {
+    to { transform: rotate(360deg); }
+}
+
+/* Une animation perpétuelle est précisément ce que ce réglage demande d'éviter.
+   L'indicateur reste visible — c'est lui qui porte l'information, pas sa rotation. */
+@media (prefers-reduced-motion: reduce) {
+    .attente-rondelle {
+        animation: none;
+        border-top-color: var(--mb-accent);
+        border-right-color: var(--mb-accent);
+    }
+}
+
+/* --- Créer depuis une liste : champ + bouton sur une ligne (lot M1) ----
+   ⚠️ min-width: 0 sur le champ est ce qui fait tenir la ligne à 320 px : sans
+   lui, un élément de formulaire refuse de rétrécir sous sa largeur intrinsèque
+   et pousse le bouton hors de l'écran. Le bouton, lui, ne rétrécit pas et son
+   libellé ne se coupe pas — un bouton tronqué ne se lit plus.
+   ------------------------------------------------------------------- */
+
+.ligne-creation {
+    display: flex;
+    gap: 0.5rem;
+    align-items: stretch;
+    margin-bottom: 0.75rem;
+}
+
+.ligne-creation .champ-saisie {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.ligne-creation .bouton {
+    flex: 0 0 auto;
+    white-space: nowrap;
+}