Corrige le débordement de la page admin (texte et onglets hors cadre)

Cause réelle : .main est un élément flex sans min-width:0. Sa valeur par défaut
min-width:auto l'autorise à dépasser la largeur de son conteneur dès qu'il
contient un bloc large — ici le tableau des documents, dont les titres sont
longs. La page entière partait donc plus large que l'écran, entraînant l'entête
et les onglets avec elle. Aucun point de rupture ne pouvait rattraper ça, le
problème étant en amont du responsive.

- .main : min-width:0 (corrige aussi les autres pages à tableau).
- .page : width:100% + min-width:0, pour ne jamais dépasser la place offerte.
- Onglets : bande défilante à toutes les largeurs, plus seulement sous le
  breakpoint — avec la sidebar de 16rem, quatre onglets débordent bien avant.
- Cellules : coupure des mots à toutes les largeurs, et borne de largeur sur la
  colonne titre, qu'un seul libellé long suffisait à étirer.
- Bascule en cartes remontée de 768 à 900px : la sidebar retire 16rem à la
  largeur utile, les tableaux étaient à l'étroit bien avant le seuil.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

src/App.module.css

@@ -14,6 +14,10 @@
 
 .main {
   flex: 1;
+  /* Sans min-width:0 un élément flex garde min-width:auto et déborde de son
+     conteneur dès qu'il contient un bloc large (tableau, titre non coupable) :
+     la page entière part alors plus large que l'écran. */
+  min-width: 0;
   margin-left: 16rem;
   padding: 2rem;
   min-height: 100vh;

src/styles/Admin.module.css

@@ -4,7 +4,9 @@
 
 .page {
   padding: 2rem;
+  width: 100%;
   max-width: 80rem;
+  min-width: 0;
   margin: 0 auto;
 }
 
@@ -16,6 +18,7 @@
   justify-content: space-between;
   gap: 1rem;
   flex-wrap: wrap;
+  min-width: 0;
   margin-bottom: 1.75rem;
 }
 
@@ -30,6 +33,14 @@
 .tabs {
   display: flex;
   gap: 0.5rem;
+  max-width: 100%;
+  overflow-x: auto;
+  scrollbar-width: none;
+  padding-bottom: 0.125rem;
+}
+
+.tabs::-webkit-scrollbar {
+  display: none;
 }
 
 .tabs button {
@@ -42,6 +53,7 @@
   font-weight: 500;
   cursor: pointer;
   white-space: nowrap;
+  flex-shrink: 0;
   transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
 }
 
@@ -123,6 +135,7 @@
   background: white;
   border: 1px solid rgb(229, 231, 235);
   border-radius: 0.75rem;
+  max-width: 100%;
   overflow-x: auto;
 }
 
@@ -137,6 +150,13 @@
   padding: 0.75rem 1rem;
   text-align: left;
   border-bottom: 1px solid rgb(243, 244, 246);
+  overflow-wrap: anywhere;
+}
+
+/* Sans cette borne, un seul titre long étire la colonne et donc tout le tableau. */
+.table td:nth-child(2) {
+  min-width: 12rem;
+  max-width: 26rem;
 }
 
 .table th {
@@ -463,7 +483,7 @@
   }
 }
 
-@media (max-width: 768px) {
+@media (max-width: 900px) {
   .page {
     padding: 1.25rem 1rem;
   }
@@ -478,16 +498,8 @@
     font-size: 1.75rem;
   }
 
-  /* Onglets en bande défilante plutôt qu'en retour à la ligne. */
   .tabs {
     width: 100%;
-    overflow-x: auto;
-    padding-bottom: 0.25rem;
-    scrollbar-width: none;
-  }
-
-  .tabs::-webkit-scrollbar {
-    display: none;
   }
 
   /* Chaque ligne devient une carte, avec l'intitulé de colonne en regard. */
@@ -506,6 +518,11 @@
     width: 100%;
   }
 
+  .table td:nth-child(2) {
+    min-width: 0;
+    max-width: none;
+  }
+
   .table thead {
     display: none;
   }