@zevra/ui 0.35.0 → 0.36.0

package/src/components.css

@@ -1,4 +1,4 @@
-/* Zevra UI — composants : boutons, badges, cartes, encarts
+/* Zevra UI, composants : boutons, badges, cartes, encarts
  * Dépend de tokens.css et base.css.
  *
  * Les cinq maquettes ne divergent jamais sur l'intention, souvent sur le
@@ -12,7 +12,7 @@
  * s'il est répété. Les actions secondaires prennent la variante fantôme.
  *
  * Hauteur 48px : Main.html, Mobile.html et le prototype s'accordent.
- * DesignSystem.html pose 46px — planche isolée, écartée. */
+ * DesignSystem.html pose 46px : planche isolée, écartée. */
 
 .zv-btn,
 .zv-btn--ghost,
@@ -31,7 +31,7 @@
   text-decoration: none;
   border: 0;
   cursor: pointer;
-  /* La courbe maison, 160 ms — coupée globalement par prefers-reduced-motion
+  /* La courbe maison, 160 ms : coupée globalement par prefers-reduced-motion
    * (base.css). Le fond en dégradé du bouton plein ne s'interpole pas : lui
    * seul bascule sans fondu, l'écart est trop faible pour se voir. */
   transition:
@@ -46,15 +46,15 @@
  * `zv-btn`, `zv-btn--ghost`, `zv-btn--ink` et `zv-btn--danger` sont quatre
  * classes AUTONOMES et mutuellement exclusives : le socle commun ci-dessus
  * les groupe dans un même sélecteur, ce qui leur donne exactement l'air
- * d'une base et de ses modificateurs. `Button` n'en rend jamais qu'une —
+ * d'une base et de ses modificateurs. `Button` n'en rend jamais qu'une :
  * mais une app qui écrit ses classes à la main lit du BEM et compose les
  * deux. C'est arrivé (mcp-factory, 0.19.0), et le résultat était vicieux :
  * `.zv-btn:hover` (0,2,0) l'emportait sur `.zv-btn--ghost` (0,1,0), d'où un
- * fond indigo sous un texte encre — illisible, et seulement AU SURVOL, donc
+ * fond indigo sous un texte encre, illisible, et seulement AU SURVOL, donc
  * invisible en relecture comme en capture.
  *
  * Le `:not(:where(…))` dit ce que le système voulait déjà dire : ces quatre
- * classes s'excluent. `:where()` a une spécificité NULLE — la garde ne
+ * classes s'excluent. `:where()` a une spécificité NULLE : la garde ne
  * change donc aucun arbitrage existant, et une app qui surcharge `.zv-btn`
  * continue de gagner exactement comme avant.
  *
@@ -64,7 +64,7 @@
   /* Le sommet du dégradé. RELEVÉ dans Main.html à #2b2bb4, mais DÉRIVÉ de
    * --accent depuis la 0.19.0 : la déclaration étant portée par le bouton
    * lui-même, une redéfinition de marque héritée d'un conteneur ne
-   * l'atteignait pas — un cabinet en marque blanche obtenait un dégradé
+   * l'atteignait pas, un cabinet en marque blanche obtenait un dégradé
    * allant de l'indigo Zevra à SA couleur. Pour la charte par défaut,
    * l'écart avec la valeur relevée est d'un point de bleu, invisible.
    * Les états de survol le dérivent ensuite par color-mix. */
@@ -102,10 +102,10 @@
 
 /* ─── États de survol et d'appui ────────────────────────────────────────
  * HORS RELEVÉ (25/08/2026, voir DECISIONS.md) : aucune maquette n'a d'état
- * hover — elles sont figées. Le survol ASSOMBRIT, l'appui assombrit
+ * hover, elles sont figées. Le survol ASSOMBRIT, l'appui assombrit
  * davantage et rassoit le bouton (l'ombre tombe, le liseré s'éteint).
- * Les teintes sont DÉRIVÉES par color-mix — l'idiome du voile
- * (overlays.css) — des couleurs que le bouton porte déjà : le sommet de
+ * Les teintes sont DÉRIVÉES par color-mix, l'idiome du voile
+ * (overlays.css), des couleurs que le bouton porte déjà : le sommet de
  * dégradé relevé (--zv-btn-haut, sans token) et --accent-deep. Aucune
  * teinte nouvelle n'entre. Aucun déplacement : les entrées du système
  * montent au défilement, un bouton qui saute au survol raconterait autre
@@ -139,7 +139,7 @@
 }
 
 /* Un aplat d'encre ne peut pas s'assombrir visiblement : il s'ÉCLAIRCIT au
- * survol, et l'appui revient à l'encre pleine — plus sombre que le survol,
+ * survol, et l'appui revient à l'encre pleine, plus sombre que le survol,
  * c'est ce qui fait lire l'enfoncement. */
 .zv-btn--ink:hover {
   background: color-mix(in oklab, var(--ink) 82%, var(--white));
@@ -157,7 +157,7 @@
   background: color-mix(in oklab, var(--err) 72%, var(--ink));
 }
 
-/* Variante compacte : barres de navigation. L'ombre tombe — un bouton de
+/* Variante compacte : barres de navigation. L'ombre tombe : un bouton de
  * chrome ne décolle pas de la page. */
 .zv-btn--sm {
   height: 40px;
@@ -174,7 +174,7 @@
  * d'une barre. HORS RELEVÉ (25/08/2026, voir DECISIONS.md). Le libellé
  * accessible est OBLIGATOIRE (aria-label), et s'écrit pour l'ACTION.
  * Ne pas confondre : .zv-icon-btn est le chrome nu (40 px, sans cadre),
- * .zv-chrome-btn la croix bordée (26 px) — le carré est une action, il en
+ * .zv-chrome-btn la croix bordée (26 px), le carré est une action, il en
  * a le poids et l'aplat. */
 .zv-btn--carre {
   width: 48px;
@@ -190,14 +190,14 @@
 .zv-btn--ghost[disabled],
 .zv-btn--ink[disabled],
 .zv-btn--danger[disabled] {
-  /* HORS RELEVÉ — aucune maquette ne montre de bouton désactivé. Traitement
+  /* HORS RELEVÉ : aucune maquette ne montre de bouton désactivé. Traitement
    * minimal et neutre plutôt qu'une couleur inventée. */
   opacity: 0.5;
   cursor: not-allowed;
   box-shadow: none;
 }
 
-/* Ni le survol ni l'appui ne doivent rattraper un bouton inerte —
+/* Ni le survol ni l'appui ne doivent rattraper un bouton inerte,
  * désactivé OU occupé (dont le clic est avalé par la façade) : sans ces
  * règles, les états ci-dessus repeignent le fond et le bouton a l'air
  * actif. Même précaution que les contrôles désactivés de forms.css. */
@@ -206,7 +206,7 @@
   background: linear-gradient(180deg, var(--zv-btn-haut) 0%, var(--accent-deep) 100%);
 }
 
-/* Occupé mais pas désactivé, le bouton plein garde son ombre à l'appui —
+/* Occupé mais pas désactivé, le bouton plein garde son ombre à l'appui :
  * un enfoncement qui ne déclenche rien serait un mensonge de rendu. Le
  * compact, lui, n'a pas d'ombre à garder. */
 .zv-btn:not(.zv-btn--sm)[aria-busy='true']:active {
@@ -231,12 +231,12 @@
   background: var(--err);
 }
 
-/* Attente : le motif de Mémoire (feedback.css le documente) — le LIBELLÉ
+/* Attente : le motif de Mémoire (feedback.css le documente), le LIBELLÉ
  * change (« Connexion… ») pendant que le bouton s'estompe, en
  * `cursor-wait; opacity: .7`, valeurs relevées reprises telles quelles.
  * Codé sur [aria-busy], l'attribut qui rend l'attente audible : le
  * balisage correct ne coûte rien. La façade React l'expose en prop
- * `occupe` — qui pose aria-disabled et AVALE le clic plutôt que de poser
+ * `occupe` : qui pose aria-disabled et AVALE le clic plutôt que de poser
  * `disabled`, pour que le bouton reste dans le parcours clavier pendant
  * que l'attente s'annonce (voir DECISIONS.md). Déclaré APRÈS [disabled]
  * pour l'emporter à spécificité égale quand les deux se combinent. */
@@ -264,10 +264,10 @@
 /* ─── Lien fléché ───────────────────────────────────────────────────────
  * Le SVG fait 15×15 : quatre occurrences dans Main.html contre une seule
  * à 16px dans DesignSystem.html. Tracés : M5 12h14 et M13 6l6 6-6 6, sur
- * un viewBox 0 0 24 24 — au trait carré depuis le 25/08/2026, comme tout
+ * un viewBox 0 0 24 24, au trait carré depuis le 25/08/2026, comme tout
  * le jeu d'icônes (DECISIONS.md, « Le trait carré »). */
 
-/* ⚠️ REPRIS le 25/08/2026 — la DA le jugeait « pas ouf ». Le diagnostic :
+/* ⚠️ REPRIS le 25/08/2026 : la DA le jugeait « pas ouf ». Le diagnostic :
  * c'était un lien bleu avec un chevron collé, sans rien qui le distingue
  * d'un lien de texte, et sans aucune récompense au survol. Le mouvement du
  * paquet est réservé à la vitrine et piloté au défilement ; il n'y avait
@@ -275,12 +275,12 @@
  *
  * Trois ajouts, tous dessinés dans les tokens existants :
  *   · un FILET qui se déploie sous le libellé au survol, de gauche à droite
- *     (scaleX sur une origine gauche) — pas un `text-decoration`, qui ne
+ *     (scaleX sur une origine gauche), pas un `text-decoration`, qui ne
  *     s'anime pas et coupe les jambages ;
  *   · la flèche avance de 4px, ce qui donne au lien sa direction ;
  *   · le libellé passe en --accent-deep.
  * Le tout est repeint en une seule transition, donc coupé net par
- * prefers-reduced-motion (base.css) — l'état final reste lisible sans. */
+ * prefers-reduced-motion (base.css) : l'état final reste lisible sans. */
 
 .zv-link-arrow {
   position: relative;
@@ -322,8 +322,8 @@
   width: 15px;
   height: 15px;
   flex: none;
-  /* ⚠️ CORRIGÉ le 25/08/2026 : le trait n'avait JAMAIS été déclaré — ni
-   * fill:none ni stroke —, la flèche se rendait en triangle PLEIN noir (le
+  /* ⚠️ CORRIGÉ le 25/08/2026 : le trait n'avait JAMAIS été déclaré, ni
+   * fill:none ni stroke, la flèche se rendait en triangle PLEIN noir (le
    * fût, d'aire nulle, disparaissait) au lieu du tracé que le commentaire
    * d'en-tête promettait depuis le premier jour. Posé au trait carré, avec
    * le reste du jeu. */
@@ -341,7 +341,7 @@
 }
 
 /* Sur la bande manifeste : le filet suit `currentColor`, il n'y a donc rien
- * à redéclarer — c'est tout l'intérêt de l'avoir posé en currentColor. */
+ * à redéclarer, c'est tout l'intérêt de l'avoir posé en currentColor. */
 .zv-link-arrow--on-dark {
   color: var(--white);
 }
@@ -600,7 +600,7 @@
 
 /* ─── Carte de tarif ────────────────────────────────────────────────────
  * Trois par page au maximum. La formule recommandée se signale par le
- * bandeau indigo et sa pastille — pas par une couleur de fond. */
+ * bandeau indigo et sa pastille : pas par une couleur de fond. */
 
 .zv-price {
   background: var(--white);
@@ -638,7 +638,7 @@
 
 /* Le filet, comme `.zv-fold` : sans lui, la FAQ est un aplat blanc posé sur
  * le papier, sans début ni fin. Toutes les autres surfaces blanches de la
- * vitrine — carte, encart, tarif — en portent un ; celle-ci faisait tache. */
+ * vitrine (carte, encart, tarif) en portent un ; celle-ci faisait tache. */
 .zv-faq {
   background: var(--white);
   border: 1px solid var(--line);
@@ -677,7 +677,7 @@
 /* Une FAQ de vitrine veut ses questions dans le PLAN DU DOCUMENT : c'est ce
  * que lisent les moteurs, et ce que parcourt un lecteur d'écran qui saute de
  * titre en titre. On accepte donc un `<h2>`/`<h3>`/`<h4>` comme question,
- * et on lui retire ce que le navigateur lui met — taille, graisse, marges —
+ * et on lui retire ce que le navigateur lui met (taille, graisse, marges)
  * pour qu'il se rende comme le reste des questions. Le niveau reste au
  * balisage, l'apparence au système. */
 .zv-faq__q > :is(h2, h3, h4) {
@@ -715,7 +715,7 @@
 /* ─── Aperçu d'interface ────────────────────────────────────────────────
  * La preuve produit : une question, une réponse, ses sources.
  * ⚠️ Règle de la passation : toujours de vraies données réalistes, jamais
- * de lorem — c'est ce bloc qui porte la crédibilité de la page. */
+ * de lorem, c'est ce bloc qui porte la crédibilité de la page. */
 
 .zv-ui-preview {
   background: var(--white);
@@ -807,7 +807,7 @@
 
 
 /* ─── Blocs éditoriaux ──────────────────────────────────────────────────
- * HORS RELEVÉ — ajoutés le 24/08/2026 à la demande de la DA (règle de
+ * HORS RELEVÉ, ajoutés le 24/08/2026 à la demande de la DA (règle de
  * variété : jamais deux blocs de même forme qui se suivent, 80 % de formes
  * différentes par page). Quatre façons de poser du contenu SANS carte,
  * pour que les grilles de cartes redeviennent un choix et non un réflexe.
@@ -842,7 +842,7 @@
 .zv-rows__val {
   flex: 1;
   min-width: 260px;
-  /* C'est le corps de texte du paquet — le token, pas sa valeur recopiée. */
+  /* C'est le corps de texte du paquet : le token, pas sa valeur recopiée. */
   font-size: var(--body);
   line-height: 1.6;
   color: var(--muted);
@@ -885,7 +885,7 @@
 }
 
 /* Variante en colonnes : les mêmes entrées numérotées, posées en grille
- * de trois, sans filets — l'espace fait la séparation. */
+ * de trois, sans filets, l'espace fait la séparation. */
 .zv-index--cols {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -984,7 +984,7 @@
 @media (max-width: 767px) {
 
   /* Le `min-width: 260px` de la valeur ne tient pas sous le seuil : dans une
-   * carte de 215px — un écran de 320px — elle débordait de 45px. La CLÉ
+   * carte de 215px, un écran de 320px, elle débordait de 45px. La CLÉ
    * était déjà libérée (flex-basis 100%), il manquait la valeur. */
   .zv-rows__val {
     min-width: 0;
@@ -1059,13 +1059,13 @@
  * Le mot est donc un SVG (`logos/svg/<produit>-wordmark.svg`), à
  * `currentColor` : net à toute taille, et il prend enfin les nuances encre
  * / navy / blanc que le registre des logos décrit. La marque reste le PNG
- * couleur du paquet — c'est un dégradé, il ne se recolore pas.
+ * couleur du paquet : c'est un dégradé, il ne se recolore pas.
  *
  * ⚠️ Ces tracés sont RELEVÉS sur le lockup bitmap d'origine, faute de son
  * fichier vectoriel. Ils sont fidèles à 0,1 % en largeur et nettement plus
  * lisibles que le bitmap partout où le site les pose, mais ils portent les
  * approximations du relevé : réservés à l'ÉCRAN, jusqu'à 120px de capitale.
- * Au-delà — grand format, impression — exiger le fichier d'origine.
+ * Au-delà (grand format, impression) exiger le fichier d'origine.
  *
  * Les proportions viennent du lockup, mesurées au pixel : la marque vaut
  * 2,86 fois la capitale, l'écart entre les deux 0,64 fois, et les deux
@@ -1097,7 +1097,7 @@
 
 /* Le seuil de lisibilité. Sous 11px de capitale, le mot ne se lit plus :
  * ce n'est plus une question de netteté mais de taille, et aucun fichier
- * n'y changera rien. On montre la marque, seule — c'est elle qui identifie.
+ * n'y changera rien. On montre la marque, seule : c'est elle qui identifie.
  * Poser cette classe, ou masquer .zv-lockup__word sous un point de rupture
  * quand la barre se resserre. */
 .zv-lockup--marque-seule {
@@ -1110,13 +1110,13 @@
 
 /* ─── Cadre média ───────────────────────────────────────────────────────
  * HORS RELEVÉ (27/08/2026, 0.18.0). Aucune des dix planches ne montre
- * d'image de contenu — elles sont composées, pas photographiées. Le manque
+ * d'image de contenu : elles sont composées, pas photographiées. Le manque
  * était pourtant total : pas un `aspect-ratio`, pas un `object-fit` dans le
  * paquet, et quatre réécritures du même cadre chez un seul consommateur.
  *
  * ⚠️ Le rapport vit sur le CADRE, jamais sur l'image. Posé sur un enfant de
  * grille aligné au centre, il ne se résout pas et la colonne s'effondre à
- * zéro — c'est un correctif de production, pas une précaution théorique.
+ * zéro : c'est un correctif de production, pas une précaution théorique.
  *
  * Le fond est posé et non laissé transparent : une image qui tarde, échoue
  * ou porte de la transparence laisserait voir la surface du dessous, soit un
@@ -1164,7 +1164,7 @@
   display: block;
 }
 
-/* Le cas inverse — un logo, un schéma, une pièce qu'on ne peut pas rogner.
+/* Le cas inverse : un logo, un schéma, une pièce qu'on ne peut pas rogner.
  * Le papier passe derrière : il restera du vide, autant qu'il soit choisi. */
 .zv-media--contient {
   background: var(--paper);
@@ -1175,7 +1175,7 @@
 }
 
 /* Le coin d'un cadre : durée d'une vidéo, nombre de pages, mention de
- * réserve. Encre diluée et non un gris opaque — le fond d'image est
+ * réserve. Encre diluée et non un gris opaque : le fond d'image est
  * imprévisible, et l'encre de charte s'y pose sans jurer. */
 .zv-media__coin {
   position: absolute;
@@ -1206,7 +1206,7 @@
 
 /* Voile de lecture : un titre posé SUR une image n'est lisible qu'au-dessus
  * d'un dégradé. Il part du bas, là où le texte se pose, et n'assombrit pas
- * le sujet. Il ne capte pas le pointeur — le cadre reste cliquable. */
+ * le sujet. Il ne capte pas le pointeur : le cadre reste cliquable. */
 .zv-media__voile {
   position: absolute;
   inset: 0;
@@ -1221,7 +1221,7 @@
 
 /* ─── Page légale ───────────────────────────────────────────────────────
  * HORS RELEVÉ (27/08/2026, voir DECISIONS.md). La forme d'un document
- * contractuel — CGVU, mentions légales, DPA. Le TEXTE, lui, n'est pas ici :
+ * contractuel : CGVU, mentions légales, DPA. Le TEXTE, lui, n'est pas ici :
  * il vit dans @zevra/legal, versionné et archivé. Ce module ne porte que la
  * mise en page ; c'est ce qui permet au même texte de s'afficher sur la
  * vitrine et dans une application sans exister en deux exemplaires.
@@ -1237,7 +1237,7 @@
   gap: 48px;
   /* La MESURE, et c'est la seule règle qui compte vraiment pour un contrat :
    * au-delà d'environ 80 signes par ligne, l'œil perd le début de la ligne
-   * suivante — sur un texte qu'on lit déjà à reculons, c'est rédhibitoire. */
+   * suivante, sur un texte qu'on lit déjà à reculons, c'est rédhibitoire. */
   max-width: 72ch;
 }
 
@@ -1332,7 +1332,7 @@
 
 /* Encart d'accompagnement d'une clause : la reformulation en langage courant
  * (« En clair ») ou le point à ne pas manquer. Il COMMENTE la clause et ne
- * la remplace pas — d'où une surface d'accompagnement, et non l'aplat d'une
+ * la remplace pas : d'où une surface d'accompagnement, et non l'aplat d'une
  * alerte, qui annoncerait un incident.
  * Il vit ici et non dans feedback.css : une page légale de vitrine n'a pas à
  * charger la couche applicative pour afficher une glose. */
@@ -1369,7 +1369,7 @@
  * 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.
+ * 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
@@ -1382,7 +1382,7 @@
   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. */
+   * pied en dessous, une erreur n'est pas une raison de perdre la sortie. */
   min-height: 70vh;
   padding: 72px 24px;
   text-align: center;
@@ -1396,7 +1396,7 @@
   object-fit: contain;
 }
 
-/* Le kicker, avec le filet de spectre — PREMIER de ses trois emplois
+/* 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 {
@@ -1438,7 +1438,7 @@
 }
 
 /* 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
+ * 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 {
@@ -1446,7 +1446,7 @@
   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
+   * 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;