Appliquer les retours d'interface : fiche en lecture seule, liste allegee

Cinq retours d'IDEES.md, tous pensés pour le mobile d'abord.

Fiche du livre en deux modes, portés par deux routes : « /livres/{id} »
consulte, « /livres/{id}/edition » modifie. Ouvrir une fiche depuis le
catalogue ne place plus un formulaire vivant sous le pouce. Mettre le mode
dans l'adresse fait du retour navigateur une sortie d'édition naturelle.

Piège rencontré : les deux routes visent le même composant avec le même Id,
donc aucun paramètre ne change et le routeur ne redessine pas — l'URL passait
à « /edition » sans que l'écran bascule, alors qu'un chargement direct de
cette URL marchait, ce qui masque le défaut. Le composant s'abonne donc à
LocationChanged.

Restent hors « Éditer », parce que ce ne sont pas des modifications de la
fiche : le statut de lecture (action la plus fréquente, et personnelle) et
les prêts (gestes du quotidien, donnée du foyer). La suppression, elle, est
réservée au mode édition.

Dans la liste, le statut devient une pastille en lecture seule sur la ligne
des étiquettes ; les trois boutons actionnables par carte partaient trop
facilement en faisant défiler. Le format ne s'affiche plus que pour les
ebooks, le physique étant le cas par défaut — le formulaire le
présélectionne déjà, l'énumération valant 0.

Couverture agrandissable au clic, fermeture au clic extérieur ou par Échap
(le calque est focalisé à l'ouverture, sans quoi Échap resterait sans effet).
Le substitut à initiale n'est jamais cliquable : le déclencheur n'existe que
s'il y a une image.

Le regroupement par auteur existait déjà (table Auteur, page /auteurs, filtre
« ?auteur= ») ; y manquaient les liens depuis la fiche et les styles de la
page auteurs, jamais écrits — la liste sortait en puces brutes.

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

MaBibli.Client/wwwroot/css/app.css

@@ -560,3 +560,181 @@ body {
 .scanner-mesure {
     font-variant-numeric: tabular-nums;
 }
+
+/* --- Agrandissement de la couverture --- */
+
+/* Le déclencheur recouvre exactement la vignette. Il n'existe que quand il y a
+   une image : sans couverture, le substitut à initiale reste un décor inerte. */
+.couverture-declencheur {
+    position: absolute;
+    inset: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    cursor: zoom-in;
+}
+
+.calque-couverture {
+    position: fixed;
+    inset: 0;
+    z-index: 50;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 1.5rem;
+    background: rgba(0, 0, 0, 0.82);
+    cursor: zoom-out;
+}
+
+.calque-couverture:focus {
+    outline: none;
+}
+
+/* Bornée par la fenêtre : sur mobile la couverture occupe la largeur,
+   sur PC elle ne dépasse pas la hauteur utile. */
+.calque-image {
+    max-width: 100%;
+    max-height: 100%;
+    object-fit: contain;
+    border-radius: 6px;
+    background: #fff;
+    cursor: default;
+}
+
+.calque-image.image-cassee {
+    display: none;
+}
+
+.calque-fermer {
+    position: absolute;
+    top: calc(0.5rem + env(safe-area-inset-top));
+    right: 0.5rem;
+    min-width: 2.75rem;
+    min-height: 2.75rem;
+    border: 0;
+    border-radius: 999px;
+    background: rgba(255, 255, 255, 0.15);
+    color: #fff;
+    font-size: 1.1rem;
+    cursor: pointer;
+}
+
+/* --- Statut de lecture en lecture seule --- */
+
+/* Pastille pleine, aux couleurs des segments actifs, pour ne pas se confondre avec
+   l'étiquette pâle du prêt : le statut est personnel, le prêt est celui du foyer. */
+.etiquette-statut {
+    color: #fff;
+    font-weight: 600;
+}
+
+.etiquette-statut.statut-a-lire { background: #6b4fa8; }
+.etiquette-statut.statut-en-cours { background: #b06b00; }
+.etiquette-statut.statut-lu { background: #1f7a44; }
+
+/* --- Fiche du livre en lecture seule --- */
+
+.couverture-grande { width: 8rem; height: 12rem; }
+
+.fiche-entete {
+    display: flex;
+    gap: 1rem;
+    align-items: flex-start;
+    margin-bottom: 1rem;
+}
+
+.fiche-infos {
+    min-width: 0;
+    flex: 1;
+}
+
+.fiche-titre {
+    font-size: 1.15rem;
+    margin: 0 0 0.25rem;
+}
+
+.fiche-auteurs {
+    margin: 0 0 0.5rem;
+    color: var(--mb-texte-doux);
+}
+
+/* Deux colonnes « libellé / valeur » qui restent lisibles à 320 px. */
+.fiche-champs {
+    margin: 0;
+    font-size: 0.9rem;
+}
+
+.fiche-champs div {
+    display: flex;
+    gap: 0.5rem;
+    padding: 0.15rem 0;
+}
+
+.fiche-champs dt {
+    flex: 0 0 5rem;
+    color: var(--mb-texte-doux);
+}
+
+.fiche-champs dd {
+    margin: 0;
+    min-width: 0;
+    word-break: break-word;
+}
+
+/* Le statut reste manipulable hors édition : c'est le geste le plus fréquent
+   de l'application, l'enfouir derrière « Éditer » serait un recul. */
+.bloc-statut {
+    margin-top: 1.25rem;
+    padding-top: 1rem;
+    border-top: 1px solid var(--mb-bord);
+}
+
+/* --- Auteurs --- */
+
+/* Le nom d'un auteur est un point d'entrée, pas une décoration : il doit se voir comme
+   cliquable, et rester une cible atteignable au pouce dans une liste dense. */
+.lien-auteur {
+    color: var(--mb-accent);
+    text-decoration: none;
+    padding: 0.1rem 0;
+}
+
+.lien-auteur:hover,
+.lien-auteur:focus {
+    text-decoration: underline;
+}
+
+.liste-auteurs,
+.liste-rapprochements {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+}
+
+.carte-auteur-ligne {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    justify-content: space-between;
+    min-height: 2.75rem;
+    padding: 0.4rem 0;
+    border-bottom: 1px solid var(--mb-bord);
+}
+
+.rapprochements {
+    margin-bottom: 1.5rem;
+    padding: 0.75rem;
+    border: 1px solid var(--mb-bord);
+    border-radius: 8px;
+    background: var(--mb-fond-doux);
+}
+
+.carte-rapprochement {
+    padding: 0.5rem 0;
+    border-top: 1px solid var(--mb-bord);
+}
+
+.rapprochement-noms {
+    margin: 0;
+    font-size: 0.95rem;
+}