@zevra/ui 0.31.0 → 0.32.0

package/src/components.css

@@ -1362,3 +1362,124 @@
 .zv-legal__encart--important .zv-legal__encart-label {
   color: var(--warn-ink);
 }
+
+/* ─── Page d'erreur ─────────────────────────────────────────────────────
+ * HORS RELEVÉ (28/08/2026), voir DECISIONS.md « La page d'erreur ».
+ *
+ * Une page entière, pas un encart : 404, 403, 410, 500, maintenance. Elle
+ * est ICI et non dans feedback.css parce que la landing Astro en a besoin
+ * autant que les apps Next, et que components.css est le seul module que
+ * les deux couches chargent réellement — c'est lui qui porte le bouton.
+ *
+ * ⚠️ Le bloc ne pose AUCUN texte et n'embarque AUCUNE image. Le glyphe
+ * arrive en propriété (`@zevra/ui/glyphes`), la copie vient de l'app. Une
+ * plaisanterie câblée dans un design system part dans les sept apps, dans
+ * une seule langue, et n'en revient jamais. */
+
+.zv-errpage {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  /* 70vh et non 100 : la page garde sa barre de navigation au-dessus et son
+   * pied en dessous — une erreur n'est pas une raison de perdre la sortie. */
+  min-height: 70vh;
+  padding: 72px 24px;
+  text-align: center;
+}
+
+/* La marque, en tête : sur une page qui n'a plus de contenu, c'est le seul
+ * repère qui dit encore où l'on se trouve. */
+.zv-errpage__glyphe {
+  width: 56px;
+  height: 56px;
+  object-fit: contain;
+}
+
+/* Le kicker, avec le filet de spectre — PREMIER de ses trois emplois
+ * autorisés. C'est là que le code d'erreur se dit, en mono comme toutes les
+ * métadonnées du système. */
+.zv-errpage__kicker {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+.zv-errpage__titre {
+  margin-top: 16px;
+  font-family: var(--font-display);
+  font-size: var(--h3);
+  font-weight: 300;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  color: var(--ink);
+}
+
+.zv-errpage__texte {
+  /* La mesure bornée n'est pas décorative : centré et pleine largeur, ce
+   * paragraphe devient illisible dès 900px. Même raison qu'en
+   * .zv-empty__text, et même ordre de grandeur. */
+  margin: 14px auto 0;
+  max-width: 480px;
+  font-size: var(--lead);
+  line-height: 1.6;
+  color: var(--muted);
+}
+
+/* Deux actions au plus, et UN SEUL bouton plein : la sortie principale et
+ * un recours. Au-delà, la page d'erreur devient un menu. */
+.zv-errpage__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 12px;
+  margin-top: 30px;
+}
+
+/* La cote de l'incident : le code et le chemin demandé. Ce n'est pas un
+ * ornement — elle donne au visiteur de quoi signaler la panne et au support
+ * de quoi la retrouver. Sa forme est celle d'une référence de dossier, ce
+ * qui est la seule illustration dont cette maison ait besoin. */
+.zv-errpage__ref {
+  margin-top: 44px;
+  padding-top: 14px;
+  /* --line et NON --hairline : le cheveu (#eef1f8) est plus CLAIR que le
+   * papier (#f5f6fa), donc invisible dès que la page ne repose pas sur du
+   * blanc — et une page d'erreur repose sur le papier. Vu au navigateur ; le
+   * trait était bien là, et ne se voyait pas. */
+  border-top: 1px solid var(--line);
+  min-width: 220px;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+  /* Un chemin long ne doit pas pousser la page en défilement horizontal. */
+  max-width: 100%;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 767px) {
+  .zv-errpage {
+    min-height: 60vh;
+    padding: 48px 20px;
+  }
+
+  /* --h3 (38px) sur 320px de large coupe « introuvable » en deux. */
+  .zv-errpage__titre {
+    font-size: var(--card-title);
+  }
+
+  .zv-errpage__texte {
+    font-size: var(--body);
+  }
+
+  /* Empilées : côte à côte, deux boutons de 48px ne laissent pas la place
+   * aux libellés et se coupent. */
+  .zv-errpage__actions {
+    flex-direction: column;
+    align-self: stretch;
+  }
+}