@zevra/ui 0.1.0 → 0.2.0

package/src/forms.css

@@ -0,0 +1,815 @@
+/* Zevra UI — formulaires : champ, recherche, zone de texte, sélection,
+ * case/radio, interrupteur, puces de filtre, zone de dépôt.
+ *
+ * DÉPEND de tokens.css (toutes les valeurs) et de base.css (reset
+ * box-sizing, anneau :focus-visible). RIEN D'AUTRE : ce module ne lit ni
+ * layout.css, ni components.css, ni motion.css. C'est volontaire — une app
+ * purement applicative n'a aucune raison de charger la mise en page de la
+ * vitrine.
+ *
+ * Ce qu'il NE porte PAS :
+ *   · le menu déroulé par .zv-select — il appartient à navigation.css
+ *     (.zv-menu) ; ce module pose l'ancre (.zv-select-anchor) et le
+ *     déclencheur, rien de plus ;
+ *   · le bouton d'envoi d'un formulaire — c'est .zv-btn (components.css) ;
+ *   · l'alerte de bloc (role="alert") — module de retours.
+ *
+ * PROVENANCE. Relevé dans l'application Mémoire (production, mêmes tokens de
+ * charte) sur six écrans : /connexion, /chat, /repertoire, /bibliotheque,
+ * /logs, /import. Deux écrans de plus ont été rouverts APRÈS le premier
+ * relevé, parce qu'ils contiennent des motifs que les six premiers n'ont
+ * pas : /admin (add-member-form.tsx, billing-card.tsx) pour les deux seuls
+ * <select> natifs et le seul message d'erreur au niveau du champ. Restent
+ * NON relevés : /tableau-de-bord et /documents/[slug]. Chaque section dit ce
+ * qui est relevé et ce qui est dérivé ; rien n'est comblé en silence.
+ *
+ * VOCABULAIRE. Le relevé emploie huit paliers de texte dans 5,5 px et une
+ * demi-douzaine de gris intermédiaires ; tokens.css les regroupe. Les
+ * rabattements appliqués ici, une fois pour toutes :
+ *   #4A5468 et #727C93 → var(--ink-2) / var(--muted)
+ *   #9AA3B5 (placeholder) → var(--label)
+ *   #C9CEDD (filet ferme) → var(--accent-line)
+ *   #FDFDFF (survol papier) → var(--panel)
+ *   13/14/12,5/11,5 px → var(--app) / var(--app-lg) / var(--app-sm)
+ *   11/10,5/9,5/8,5 px mono → var(--mono-lg) / var(--mono) / var(--mono-sm)
+ * Deux d'entre eux font disparaître une nuance du relevé : c'est dit sur
+ * place, à l'endroit exact où la nuance tombe.
+ *
+ * POINT DE RUPTURE : 768px, comme les autres modules. Les sources basculent
+ * à 1024px (`lg` de Tailwind) : les valeurs sont reprises telles quelles,
+ * seul le seuil change.
+ */
+
+/* ─── Groupe de champ ───────────────────────────────────────────────────
+ * Intitulé au-dessus, contrôle, puis aide ou erreur. Relevé sur les
+ * formulaires de connexion (login-card.tsx:16-18, 163-200 ;
+ * reset-password-card.tsx:102-140) et confirmé sur /admin
+ * (add-member-form.tsx). L'écart intitulé → contrôle vaut 6px et non 8 :
+ * c'est le `mt-[6px]` du champ, pas une estimation. */
+
+.zv-field {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+  /* Sans min-width:0, un champ placé dans une ligne flex refuse de rétrécir
+   * sous la largeur de son placeholder et fait déborder la page. */
+  min-width: 0;
+}
+
+/* Ligne d'intitulé quand un lien l'accompagne (« Mot de passe oublié ? ») :
+ * les deux se lisent sur la même ligne de base plutôt que de s'empiler.
+ * Gouttière NULLE ici : le relevé ferme l'écart au-dessus du seuil
+ * (login-card.tsx:180, `gap-3 … lg:gap-0`) et laisse space-between faire
+ * tout le travail. Les 12px sont une valeur MOBILE, ils sont en fin de
+ * fichier. */
+.zv-field__head {
+  display: flex;
+  align-items: baseline;
+  justify-content: space-between;
+  gap: 0;
+}
+
+/* Les capitales sont LITTÉRALES dans le JSX de Mémoire. Elles passent en CSS
+ * ici : recopiées dans le contenu, elles seraient épelées lettre par lettre
+ * par un lecteur d'écran. */
+.zv-field__label {
+  display: block;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--label);
+}
+
+.zv-field__help {
+  font-size: var(--app-sm);
+  color: var(--muted);
+}
+
+/* Le message d'erreur AU NIVEAU DU CHAMP existe — une seule fois dans toute
+ * l'application, hors des six écrans du relevé initial
+ * (add-member-form.tsx:94). Ses valeurs propres (taille, graisse, écart)
+ * n'ont PAS été relevées : celles ci-dessous sont dérivées du reste du
+ * groupe de champ et de la teinte de l'alerte de bloc. Aucune couleur
+ * nouvelle n'est introduite. */
+.zv-field__err {
+  font-size: var(--app-sm);
+  font-weight: 500;
+  color: var(--err);
+}
+
+/* ─── Champ de saisie ───────────────────────────────────────────────────
+ * Référence : le champ des formulaires de connexion, seul <input> bordé de
+ * l'application (login-card.tsx:18), au motif strictement identique dans
+ * /admin. Les 10px/13px de l'inventaire venaient du CADRE de recherche, pas
+ * d'un champ : ils restent sur .zv-search. */
+
+.zv-input {
+  width: 100%;
+  min-width: 0;
+  border: 1px solid var(--line);
+  /* Angle vif : aucun rounded-* sur un seul champ des huit écrans. Posé
+   * explicitement, sinon Safari arrondit les champs de lui-même. */
+  border-radius: 0;
+  background: var(--white);
+  padding: 9px 12px;
+  /* Un <input> n'hérite pas de la police du document : sans cette ligne, le
+   * champ repasse en police système et jure avec le reste de la page. */
+  font-family: var(--font-text);
+  font-size: var(--app);
+  color: var(--ink);
+}
+
+.zv-input::placeholder {
+  color: var(--label);
+}
+
+/* Relevé (`focus:border-accent-line`) : c'est :focus et non :focus-visible,
+ * la bordure réagit donc aussi à la souris. L'anneau clavier de base.css
+ * s'y AJOUTE — on ne reprend PAS le `input { outline: none }` de la prod,
+ * qui laissait l'application inutilisable au clavier. */
+.zv-input:focus {
+  border-color: var(--accent-line);
+}
+
+/* Identifiant d'organisation : même champ, chiffres et tirets alignés
+ * (login-card.tsx:145). */
+.zv-input--mono {
+  font-family: var(--font-mono);
+}
+
+/* <select> NATIF, habillé comme le champ. C'est le motif de sélection
+ * accessible de l'application, relevé deux fois (add-member-form.tsx:82,
+ * billing-card.tsx:135) avec exactement les valeurs de .zv-input —
+ * `border-line bg-white px-3 py-[9px] text-[13px] text-ink`. D'où un simple
+ * modificateur : tout est déjà là.
+ *
+ * L'`appearance` n'est PAS neutralisée : la flèche, l'ouverture au clavier,
+ * la liste native et son annonce viennent du navigateur. La remplacer
+ * imposerait de redessiner tout cela, et le relevé ne le fait pas non plus.
+ * À ne pas confondre avec .zv-select, qui est un déclencheur de menu maison
+ * — voir plus bas. */
+.zv-input--select {
+  cursor: pointer;
+}
+
+/* Champ nu : ni fond ni filet propres, c'est le CADRE qui l'entoure qui fait
+ * le champ (composeur du chat). Lui redonner une bordure dessinerait deux
+ * cadres imbriqués. */
+.zv-input--bare {
+  flex: 1 1 0%;
+  border: none;
+  background: transparent;
+  padding: 2px 0;
+  font-size: var(--app-lg);
+}
+
+/* ─── Recherche ─────────────────────────────────────────────────────────
+ * Cadre en flex, loupe au filet, saisie sans bordure propre. Deux relevés
+ * identiques (repertoire-client.tsx:59-78, bibliotheque-client.tsx:185-204).
+ *
+ * La loupe est un SVG dans le balisage, pas un fond CSS : viewBox 0 0 13 13,
+ * fill="none", stroke-width="1.5",
+ *   <circle cx="5.5" cy="5.5" r="4"/><line x1="8.6" y1="8.6" x2="12" y2="12"/> */
+
+.zv-search {
+  display: flex;
+  width: auto;
+  min-width: 240px;
+  flex: 1 1 0%;
+  align-items: center;
+  gap: 9px;
+  border: 1px solid var(--line);
+  background: var(--white);
+  padding-inline: 13px;
+}
+
+/* DÉRIVÉ : la bordure de focus relevée sur .zv-input, portée par le cadre.
+ *
+ * DEUX MARQUAGES, ASSUMÉS. L'anneau :focus-visible de base.css est un
+ * sélecteur universel : au clavier il se dessine AUSSI autour du champ nu,
+ * à l'intérieur du cadre, en plus de ce filet. On le garde tel quel plutôt
+ * que de trancher l'un des deux :
+ *   · supprimer l'anneau (outline:none) rendrait le champ nu invisible au
+ *     clavier — c'est exactement la faute de la production ;
+ *   · supprimer ce filet priverait la souris de tout retour, alors que le
+ *     relevé lui en donne un sur les champs bordés.
+ * La redondance coûte moins cher que l'une ou l'autre perte. */
+.zv-search:focus-within {
+  border-color: var(--accent-line);
+}
+
+.zv-search__icon {
+  flex: none;
+  width: 13px;
+  height: 13px;
+  /* Même gris que le placeholder : la loupe est une invite, pas une donnée. */
+  stroke: var(--label);
+}
+
+.zv-search__input {
+  min-width: 0;
+  flex: 1 1 0%;
+  border: none;
+  background: transparent;
+  padding-block: 10px;
+  font-family: var(--font-text);
+  font-size: var(--app);
+  color: var(--ink);
+}
+
+.zv-search__input::placeholder {
+  color: var(--label);
+}
+
+/* ─── Zone de texte ─────────────────────────────────────────────────────
+ * DÉCISION, PAS UN RELEVÉ : il n'existe AUCUN <textarea> dans l'application,
+ * sur aucun des huit écrans ouverts. Le composeur du chat est un <input> où
+ * Entrée envoie (chat-client.tsx:365). Le bloc ci-dessous est dérivé mot à
+ * mot de .zv-input ; seules min-height et resize s'y ajoutent — sans elles
+ * le champ se rend sur une ligne et le composant n'existe pas. min-height
+ * est la SEULE valeur de ce module sans aucune source, dans aucun écran.
+ *
+ * Ne PAS remplacer l'input du composeur par ce bloc : ce serait un
+ * changement de comportement (Entrée n'enverrait plus). */
+
+.zv-textarea {
+  width: 100%;
+  min-width: 0;
+  min-height: 96px; /* sans source — voir ci-dessus */
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--white);
+  padding: 9px 12px;
+  font-family: var(--font-text);
+  font-size: var(--app);
+  /* 1.6 : l'interligne du corps de texte du paquet (base.css, .zv-body). */
+  line-height: 1.6;
+  color: var(--ink);
+  /* Vertical seul : en libre, l'utilisateur élargit le champ hors de sa
+   * colonne et casse la mise en page. */
+  resize: vertical;
+}
+
+.zv-textarea::placeholder {
+  color: var(--label);
+}
+
+.zv-textarea:focus {
+  border-color: var(--accent-line);
+}
+
+/* ─── Déclencheur de sélection (menu maison) ────────────────────────────
+ * « PÉRIMÈTRE : Toute la base ▾ » (chat-client.tsx:168-175). Ce n'est pas un
+ * <select> : c'est un bouton qui ouvre .zv-menu (navigation.css). Pour un
+ * vrai choix dans une liste, préférer .zv-input--select, qui est natif.
+ *
+ * ANCRAGE — arbitrage à consigner dans DECISIONS.md, les deux modules ne
+ * disent pas la même chose. Le relevé donne raison à celui-ci : c'est
+ * l'ENVELOPPE qui porte position:relative (`relative inline-block
+ * max-w-full`), pas le déclencheur. Ancrer le menu sur .zv-select
+ * fonctionnerait par accident, mais casserait son `max-width` calculé sur
+ * la fenêtre. D'où .zv-select-anchor, posée ici, à côté de son
+ * déclencheur. */
+
+.zv-select-anchor {
+  position: relative;
+  display: inline-block;
+  max-width: 100%;
+}
+
+.zv-select {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  border: 1px solid var(--line);
+  background: var(--white);
+  padding: 6px 11px;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  /* La valeur courante peut être longue : elle sort du cadre plutôt que de
+   * casser la pastille en deux lignes. */
+  white-space: nowrap;
+  color: var(--ink-2);
+  cursor: pointer;
+}
+
+.zv-select:hover {
+  border-color: var(--accent-line);
+}
+
+/* La valeur choisie, seule partie mise en avant du déclencheur. */
+.zv-select strong {
+  font-weight: 700;
+  color: var(--accent);
+}
+
+/* ▾ (U+25BE) posé dans le balisage. */
+.zv-select__chevron {
+  font-size: var(--mono-sm);
+  color: var(--label);
+}
+
+/* ─── Case à cocher et bouton radio ─────────────────────────────────────
+ * DÉRIVÉS INTÉGRALEMENT, ET ILS DOIVENT ÊTRE LUS COMME TELS : il n'existe
+ * zéro <input type="checkbox"> et zéro <input type="radio"> dans toute
+ * l'application — la sélection s'y fait toujours par .zv-seg ou .zv-switch.
+ * Le bloc ci-dessous réemploie la grammaire déjà en production (carré au
+ * filet --line sur --white, coché en aplat --accent, rond des pastilles)
+ * sans introduire de valeur de charte nouvelle ; ses DIMENSIONS, elles
+ * (16px, taille du glyphe, épaisseur de l'anneau intérieur), n'ont aucune
+ * source. Le jour où un vrai écran en pose, c'est lui qui tranche.
+ *
+ * ⚠️ .zv-check est DÉJÀ PRIS par la pastille de validation
+ * (components.css:482) — d'où .zv-check-box.
+ *
+ * Contrôles natifs volontairement conservés (appearance:none seulement) : le
+ * clavier, :focus-visible, [disabled] et l'annonce au lecteur d'écran
+ * viennent alors du navigateur, pas d'un <div> à réoutiller. */
+
+.zv-check-box,
+.zv-radio {
+  appearance: none;
+  flex: none;
+  width: 16px;
+  height: 16px;
+  margin: 0;
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--white);
+  cursor: pointer;
+}
+
+.zv-radio {
+  border-radius: 9999px;
+}
+
+.zv-check-box:hover,
+.zv-radio:hover {
+  border-color: var(--accent-line);
+}
+
+/* Le blanc du glyphe est écrit en clair (%23fff) : une data-URI ne lit pas
+ * les variables CSS. Valeur strictement égale à --white. */
+.zv-check-box:checked {
+  border-color: var(--accent);
+  background-color: var(--accent);
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='2.5,6.5 5,9 9.5,3.5'/%3E%3C/svg%3E");
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 12px 12px;
+}
+
+/* Le point du radio est creusé dans l'aplat par un anneau blanc interne :
+ * un pseudo-élément sur un <input> n'est pas fiable d'un moteur à l'autre.
+ * Ce box-shadow est une géométrie, pas une ombre de charte — d'où l'absence
+ * de token. */
+.zv-radio:checked {
+  border-color: var(--accent);
+  background-color: var(--accent);
+  box-shadow: inset 0 0 0 4px var(--white);
+}
+
+/* ─── Interrupteur ──────────────────────────────────────────────────────
+ * Ligne de réglage des dossiers (logs-client.tsx:267-293). Piste
+ * RECTANGULAIRE, bouton rond : relevé tel quel, ne pas arrondir la piste.
+ *
+ * ⚠️ RABATTEMENT VISIBLE : la piste éteinte était un gris ferme (#C9CEDD),
+ * rabattu sur --accent-line, qui est bleuté. L'état éteint prend donc une
+ * teinte indigo très pâle. La distinction éteint/allumé tient quand même —
+ * elle est portée par l'aplat plein et par le libellé accolé, pas par cette
+ * nuance-là. */
+
+.zv-switch {
+  position: relative;
+  display: inline-block;
+  width: 28px;
+  height: 16px;
+  flex: none;
+  background: var(--accent-line);
+  /* La courbe est celle du paquet (motion.css, `--zv-easing`), recopiée en
+   * clair : forms.css ne dépend pas de motion.css et n'a pas à en dépendre
+   * pour une transition de couleur. Ce n'est PAS `ease` — le défaut d'un
+   * framework tiers n'a rien à faire dans le système. */
+  transition: background-color 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-switch--on {
+  background: var(--accent);
+}
+
+.zv-switch__knob {
+  position: absolute;
+  inset-block-start: 2px;
+  inset-inline-start: 2px;
+  width: 12px;
+  height: 12px;
+  border-radius: 9999px;
+  background: var(--white);
+  transition: inset-inline-start 150ms cubic-bezier(0.2, 0.7, 0.2, 1);
+}
+
+.zv-switch--on .zv-switch__knob {
+  inset-inline-start: 14px;
+}
+
+/* Cible tactile portée par une enveloppe : agrandir la piste elle-même
+ * décalerait toute la ligne de réglage (cf. mobile en fin de fichier). */
+.zv-switch-hit {
+  display: flex;
+  /* La source place la gouttière de 7px sur une enveloppe PARENTE, et
+   * n'entoure que la piste de sa zone tactile (logs-client.tsx:267-273).
+   * Elle est ramenée ici : cette classe enveloppe le contrôle ET son
+   * libellé, ce qui rend le texte cliquable — un <label> qui n'entoure que
+   * l'interrupteur laisse une cible de 28px là où il en faut 40. Sans la
+   * gouttière, le libellé vient coller à la piste. */
+  align-items: center;
+  gap: 7px;
+  cursor: pointer;
+}
+
+/* Le libellé accolé change avec l'état : c'est lui qui porte le sens, la
+ * piste seule ne dit pas ce qui est activé. */
+.zv-switch__text {
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 600;
+  color: var(--label);
+}
+
+.zv-switch__text--on {
+  color: var(--accent);
+}
+
+/* ─── Puces de filtre ───────────────────────────────────────────────────
+ * Le seul mécanisme de filtrage de l'application (bibliotheque-client.tsx:
+ * 143-180, repertoire-client.tsx:79-94, logs-client.tsx:193-207).
+ *
+ * ⚠️ LA SOURCE DIVERGE, ET C'EST TRANCHÉ ICI :
+ *   · gouttière du groupe — bibliothèque 5px, répertoire et logs 6px. On
+ *     retient 6px : deux écrans sur trois, et c'est la valeur de .zv-tabs
+ *     (navigation.css), qui héberge les mêmes puces. Deux conteneurs des
+ *     mêmes puces avec deux écarts différents, c'est un défaut, pas une
+ *     nuance.
+ *   · taille et densité — bibliothèque descend à 11px/4-9px au-dessus du
+ *     seuil, le répertoire reste à 11px/8-12px partout, en graisse 600. On
+ *     retient la puce DENSE de la bibliothèque au-dessus du seuil, et la
+ *     graisse 500 (la 600 est réservée à l'état sélectionné, sinon
+ *     sélectionné et non sélectionné ne se distinguent plus que par la
+ *     couleur).
+ *   · corps — 11 et 12px se rabattent tous les deux sur --app-sm (12px) :
+ *     l'écart d'un pixel entre les deux écrans disparaît, et la variante
+ *     mobile de la bibliothèque avec lui. C'est le prix de l'échelle
+ *     rationalisée, assumé.
+ *
+ * ⚠️ L'état sélectionné n'est porté par AUCUN aria-pressed en production :
+ * il est invisible pour un lecteur d'écran. Le paquet impose <button
+ * aria-pressed="true|false"> — et le style suit l'attribut autant que la
+ * classe, pour que le balisage correct ne coûte rien. */
+
+.zv-seg-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+}
+
+/* ⚠️ HORS RELEVÉ. Les quatre rangées de puces du dépôt passent TOUTES à la
+ * ligne ; le motif « nowrap + défilement » n'apparaît que sur des CADRES
+ * (tableau, bande de trente jours), jamais sur une rangée de puces.
+ * Cette variante n'existe que parce que la règle du projet interdit tout
+ * défilement horizontal de PAGE : une rangée qu'on refuse d'enrouler doit
+ * alors déborder dans son propre cadre. À poser explicitement, jamais par
+ * défaut. */
+.zv-seg-group--rail {
+  flex-wrap: nowrap;
+  overflow-x: auto;
+}
+
+.zv-seg {
+  border: 1px solid var(--line);
+  border-radius: 0;
+  background: var(--white);
+  padding: 4px 9px;
+  font-family: var(--font-text);
+  font-size: var(--app-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  color: var(--ink-2);
+  cursor: pointer;
+}
+
+/* La rangée de puces vit souvent dans un rail qui défile horizontalement
+ * (.zv-tabs--rail, navigation.css). L'anneau de base.css y serait rogné aux
+ * deux bords. On ne le REDÉFINIT pas — on déplace seulement son tracé à
+ * l'intérieur de la puce, où rien ne le coupe. */
+.zv-seg:focus-visible {
+  outline-offset: -2px;
+}
+
+/* Sélection DOUCE (bibliothèque), la seule livrée par défaut : elle
+ * n'ajoute pas un second aplat indigo à l'écran, là où la charte n'autorise
+ * qu'un seul plein par page. */
+.zv-seg--on,
+.zv-seg[aria-pressed="true"] {
+  border-color: var(--accent-line);
+  background: var(--accent-soft);
+  font-weight: 600;
+  color: var(--accent);
+}
+
+/* Sélection PLEINE (répertoire, logs) : OPT-IN, à poser explicitement, et
+ * BORNÉE — un seul groupe plein par page, jamais sur une page qui porte
+ * déjà un bouton plein. Une page de filtres à plusieurs groupes (la
+ * bibliothèque en a deux) afficherait sinon autant d'aplats indigo que de
+ * groupes, simultanément : c'est le seul mécanisme du paquet capable de
+ * multiplier le plein sans le dire. */
+.zv-seg--on-solid,
+.zv-seg--on-solid[aria-pressed="true"] {
+  border-color: var(--accent);
+  background: var(--accent);
+  color: var(--white);
+}
+
+.zv-seg__count {
+  margin-inline-start: 6px;
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  color: var(--label);
+}
+
+/* Niveaux de log : libellés de longueur inégale (INFO, WARN, ERROR) centrés
+ * pour que la rangée ne danse pas d'une puce à l'autre. */
+.zv-seg--mono {
+  justify-content: center;
+  padding: 4px 8px;
+  font-family: var(--font-mono);
+  font-size: var(--mono-sm);
+  font-weight: 600;
+  letter-spacing: 0.06em;
+}
+
+/* ─── Zone de dépôt ─────────────────────────────────────────────────────
+ * Elle tient lieu d'action principale de l'écran d'import : il n'y a aucun
+ * bouton plein sur cette page (import-client.tsx:144-202).
+ *
+ * ⚠️ En production c'est un <div onClick> sans role ni tabIndex : la page
+ * d'import est inatteignable au clavier. Le paquet impose role="button" +
+ * tabindex="0" (l'anneau de base.css suit alors tout seul).
+ *
+ * L'icône est un SVG du balisage (import-client.tsx:159-166) : viewBox
+ * 0 0 30 30, fill="none", stroke="var(--accent)", stroke-width="1.5",
+ * stroke-linecap="round" — et PAS de stroke-linejoin, le tracé n'a qu'un
+ * angle franc et la source ne le pose pas :
+ *   <line x1="15" y1="4" x2="15" y2="18"/>
+ *   <polyline points="9.5,12.5 15,18 20.5,12.5"/>
+ *   <path d="M5 21 v3 a2 2 0 0 0 2 2 h16 a2 2 0 0 0 2-2 v-3"/> */
+
+.zv-drop {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 10px;
+  /* 1,5px : l'épaisseur du pointillé est celle du tracé de l'icône, les deux
+   * se répondent. */
+  border: 1.5px dashed var(--accent-line);
+  background: var(--white);
+  padding: 38px 24px;
+  cursor: pointer;
+}
+
+/* Survol et survol de dépôt rendus à l'identique : la zone répond pareil que
+ * le fichier soit traîné ou non, sinon le retour visuel se contredit.
+ *
+ * ⚠️ RABATTEMENT VISIBLE : le fond de survol du relevé (#FDFDFF) tombe sur
+ * --panel, à peine distinct du --white de repos. Le fond ne SIGNALE donc
+ * plus rien — le retour visuel repose entièrement sur le filet qui passe à
+ * --accent. Ne pas le supprimer en croyant que le fond compense. */
+.zv-drop:hover,
+.zv-drop.is-dragging {
+  border-color: var(--accent);
+  background: var(--panel);
+}
+
+/* Stockage indisponible : la zone reste visible mais inerte — la masquer
+ * ferait croire à une page cassée. */
+.zv-drop--disabled {
+  cursor: not-allowed;
+  border-color: var(--line);
+  background: var(--panel);
+  opacity: 0.6;
+}
+
+.zv-drop--disabled:hover {
+  border-color: var(--line);
+  background: var(--panel);
+}
+
+/* 15px : c'est une phrase, pas un libellé d'interface — d'où le palier de
+ * corps de texte (--body) plutôt que l'échelle applicative, qui s'arrête à
+ * 14px. */
+.zv-drop__title {
+  font-size: var(--body);
+  font-weight: 500;
+  color: var(--ink);
+  text-align: center;
+}
+
+.zv-drop__hint {
+  font-size: var(--app-sm);
+  color: var(--muted);
+}
+
+.zv-drop__hint a,
+.zv-drop__hint strong {
+  font-weight: 600;
+  color: var(--accent);
+  text-decoration: underline;
+}
+
+/* Sous le seuil il n'y a pas de glisser-déposer : le lien souligné cède la
+ * place à une vraie cible tactile. LES DEUX NŒUDS SONT POSÉS EN PERMANENCE
+ * DANS LE BALISAGE et c'est CE fichier qui les échange, au seul seuil du
+ * paquet. Ne pas y ajouter .zv-only-desktop / .zv-only-mobile (layout.css) :
+ * les deux mécanismes se disputeraient la même déclaration `display`, et le
+ * module tirerait la mise en page de la vitrine derrière lui. */
+.zv-drop__browse {
+  display: none;
+}
+
+.zv-drop__spec {
+  font-family: var(--font-mono);
+  font-size: var(--mono);
+  font-weight: 500;
+  color: var(--label);
+}
+
+/* Le vrai <input type="file"> est retiré du flux, la zone entière lui sert
+ * de déclencheur. Nommé en élément de .zv-drop, et non `.zv-file` : le
+ * paquet a par ailleurs une vignette de format (.zv-filetype, data.css) et
+ * les deux se liraient comme un seul bloc.
+ *
+ * Conséquence du retrait du flux : l'input n'est PAS focusable — d'où le
+ * role/tabindex exigés sur .zv-drop ci-dessus. Remettre value='' après
+ * chaque sélection, sinon redéposer le même fichier ne déclenche rien. */
+.zv-drop__input {
+  display: none;
+}
+
+/* ─── États transverses ─────────────────────────────────────────────────
+ * HORS RELEVÉ pour l'essentiel, et assumé : la production ne désactive aucun
+ * champ (seul le bouton d'envoi passe en `cursor-wait; opacity:.7` pendant
+ * la requête) et ne signale l'erreur au niveau du champ qu'à un seul
+ * endroit. Un système livré sans ces deux états oblige chaque app à les
+ * réinventer, chacune à sa façon. Les valeurs sont empruntées, sans
+ * exception, à ce qui existe déjà : le traitement désactivé de
+ * .zv-drop--disabled et le filet de l'alerte d'erreur. */
+
+.zv-input[disabled],
+.zv-textarea[disabled],
+.zv-select[disabled],
+.zv-seg[disabled],
+.zv-check-box[disabled],
+.zv-radio[disabled] {
+  cursor: not-allowed;
+  border-color: var(--line);
+  background: var(--panel);
+  opacity: 0.6;
+}
+
+/* Le survol ne doit pas rattraper un contrôle désactivé : sans ces règles,
+ * .zv-seg:hover et .zv-select:hover repeignent le filet et le contrôle a
+ * l'air actif. */
+.zv-select[disabled]:hover,
+.zv-check-box[disabled]:hover,
+.zv-radio[disabled]:hover {
+  border-color: var(--line);
+}
+
+/* Champ en erreur : seul le filet change. Un fond rouge sur un champ à
+ * remplir rendrait la saisie illisible — l'aplat --err-soft reste réservé au
+ * bandeau d'alerte. Le sélecteur suit l'attribut autant que la classe :
+ * aria-invalid est ce qui rend l'erreur audible, il ne doit rien coûter. */
+.zv-field--err .zv-input,
+.zv-field--err .zv-textarea,
+.zv-field--err .zv-select,
+.zv-input[aria-invalid="true"],
+.zv-textarea[aria-invalid="true"] {
+  border-color: var(--err-line);
+}
+
+/* Le focus l'emporte sur l'erreur : pendant la correction, l'utilisateur doit
+ * voir où il est, pas ce qui était faux. */
+.zv-field--err .zv-input:focus,
+.zv-field--err .zv-textarea:focus,
+.zv-input[aria-invalid="true"]:focus,
+.zv-textarea[aria-invalid="true"]:focus {
+  border-color: var(--accent-line);
+}
+
+/* ─── Mobile ────────────────────────────────────────────────────────────
+ * Valeurs relevées aux mêmes endroits, sous le seuil des sources (1024px),
+ * ramenées ici au seuil unique du paquet.
+ *
+ * NOTE : le micro-libellé du groupe de champ ne bouge PAS ici. Le relevé le
+ * grossit d'un pixel sous le seuil (9,5 → 10,5) ; les deux valeurs tombent
+ * sur --mono. La nuance n'existe plus, et une règle qui ne change rien vaut
+ * moins qu'une ligne qui dit pourquoi. */
+
+@media (max-width: 767px) {
+  /* Le lien qui accompagne l'intitulé devient une cible tactile : la ligne
+   * de base ne tient plus quand les deux éléments font 40px de haut, et il
+   * leur faut alors une gouttière (gap-3), là où space-between suffisait. */
+  .zv-field__head {
+    align-items: center;
+    gap: 12px;
+  }
+
+  /* 44px, pas --tap (40px) : c'est la valeur des formulaires de connexion et
+   * du pavé d'import, les deux seuls endroits où l'on saisit au doigt.
+   * 16px : en dessous, Safari iOS zoome à la mise au point du champ et
+   * décale toute la page — ce n'est pas un choix typographique, aucun token
+   * n'a à porter cette valeur. */
+  .zv-input,
+  .zv-textarea {
+    min-height: 44px;
+    font-size: 16px;
+  }
+
+  /* Les <select> de /admin, eux, sont relevés à 40px (`min-h-10 lg:min-h-0`)
+   * et non à 44 : un autre écran, une autre main. */
+  .zv-input--select {
+    min-height: var(--tap);
+  }
+
+  .zv-input--bare {
+    min-height: var(--tap);
+    font-size: var(--app-lg);
+  }
+
+  /* Le cadre passe pleine largeur. Il n'est PAS figé (`flex: none`) : le
+   * relevé lui laisse le `0 1 auto` par défaut, il peut donc encore se
+   * comprimer si la ligne qui l'accueille l'exige. */
+  .zv-search {
+    width: 100%;
+    min-width: 0;
+    flex: 0 1 auto;
+  }
+
+  .zv-search__input {
+    padding-block: 12px;
+  }
+
+  /* Le déclencheur peut passer à la ligne : sa valeur courante est un nom de
+   * dossier libre, qui déborderait sinon de l'écran. */
+  .zv-select {
+    min-height: var(--tap);
+    flex-wrap: wrap;
+  }
+
+  /* La puce se desserre pour devenir une cible tactile. Le corps, lui, ne
+   * change plus : 11 et 12px se rabattent sur le même palier (voir la
+   * section « Puces de filtre »). */
+  .zv-seg {
+    display: flex;
+    align-items: center;
+    min-height: var(--tap);
+    padding: 8px 12px;
+  }
+
+  /* Cible de 40px sans gonfler la ligne de réglage : la marge négative
+   * annule exactement le padding ajouté. */
+  .zv-switch-hit {
+    margin-block: -12px;
+    padding-block: 12px;
+  }
+
+  .zv-drop {
+    padding: 32px 16px;
+  }
+
+  /* Pas de glisser-déposer au doigt : le lien souligné est remplacé par une
+   * cible pleine largeur. Les deux nœuds appartiennent à ce module, l'échange
+   * se fait ici et nulle part ailleurs. */
+  .zv-drop__hint {
+    display: none;
+  }
+
+  .zv-drop__browse {
+    display: flex;
+    width: 100%;
+    max-width: 280px;
+    min-height: 44px;
+    align-items: center;
+    justify-content: center;
+    border: 1px solid var(--accent-line);
+    background: var(--accent-soft);
+    padding-inline: 16px;
+    font-size: var(--app);
+    font-weight: 600;
+    color: var(--accent);
+  }
+}