@zevra/ui 0.1.0

package/src/components.css

@@ -0,0 +1,553 @@
+/* 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
+ * chiffre. La règle appliquée ici : Main.html fait foi (c'est la page de
+ * référence, la plus complète), les écarts des autres planches sont notés
+ * en commentaire et détaillés dans DECISIONS.md.
+ */
+
+/* ─── Boutons ───────────────────────────────────────────────────────────
+ * UN SEUL bouton plein par écran : l'indigo porte l'action, il perd tout
+ * 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. */
+
+.zv-btn,
+.zv-btn--ghost,
+.zv-btn--ink {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  height: 48px;
+  padding: 0 24px;
+  border-radius: var(--r-btn);
+  font-family: var(--font-text);
+  font-weight: 600;
+  font-size: 14px;
+  text-decoration: none;
+  border: 0;
+  cursor: pointer;
+}
+
+.zv-btn {
+  background: linear-gradient(180deg, #2b2bb4 0%, var(--accent-deep) 100%);
+  color: var(--white);
+  /* Le liseré interne fait tout le galbe du bouton : il est dans Main.html
+   * mais absent de --shadow-btn, d'où la composition ici. */
+  box-shadow:
+    0 1px 0 rgba(255, 255, 255, 0.18) inset,
+    var(--shadow-btn);
+}
+
+.zv-btn--ghost {
+  background: var(--white);
+  color: var(--ink);
+  border: 1px solid var(--accent-line);
+}
+
+.zv-btn--ink {
+  background: var(--ink);
+  color: var(--white);
+}
+
+/* Variante compacte : barres de navigation. L'ombre tombe — un bouton de
+ * chrome ne décolle pas de la page. */
+.zv-btn--sm {
+  height: 40px;
+  padding: 0 18px;
+  box-shadow: none;
+}
+
+/* CTA mobile : le bouton prend toute la largeur. */
+.zv-btn--block {
+  width: 100%;
+}
+
+.zv-btn[disabled],
+.zv-btn--ghost[disabled],
+.zv-btn--ink[disabled] {
+  /* 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;
+}
+
+.zv-btn-row {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex-wrap: wrap;
+}
+
+.zv-btn-row--stack {
+  flex-direction: column;
+  gap: 10px;
+  width: 100%;
+}
+
+/* ─── 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, stroke currentColor, épaisseur 2, bouts arrondis. */
+
+.zv-link-arrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.zv-link-arrow:hover {
+  color: var(--accent-deep);
+}
+
+.zv-link-arrow svg {
+  width: 15px;
+  height: 15px;
+  flex: none;
+}
+
+.zv-link-arrow--on-dark {
+  color: var(--white);
+}
+
+/* ─── Badges et puces ───────────────────────────────────────────────────*/
+
+/* Pastille pleine : numéro de pièce, catégorie de section. */
+.zv-pill {
+  display: inline-flex;
+  align-items: center;
+  align-self: flex-start;
+  height: 28px;
+  padding: 0 13px;
+  background: var(--accent-deep);
+  color: var(--white);
+  font-family: var(--font-mono);
+  text-transform: uppercase;
+  letter-spacing: 0.18em;
+  font-size: 10px;
+  font-weight: 700;
+  border-radius: var(--r-pill);
+}
+
+/* Puce de source (BOSS, Judilibre, KALI…). Le rayon 4px n'a pas de token :
+ * il est entre --r-pill (3) et --r-panel (10), sans équivalent. */
+.zv-src {
+  display: inline-block;
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--accent-deep);
+  background: var(--white);
+  border: 1px solid var(--accent-line);
+  border-radius: 4px;
+  padding: 6px 10px;
+}
+
+/* Variante atténuée : le « + 11 » qui clôt une liste de sources. */
+.zv-src--quiet {
+  color: var(--label);
+  border-color: var(--line);
+}
+
+.zv-src-row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+/* Entité pseudonymisée Lexform, posée dans le fil du texte. */
+.zv-ent {
+  display: inline-block;
+  background: linear-gradient(135deg, var(--accent-deep), #3d36d6);
+  color: var(--white);
+  font-family: var(--font-mono);
+  font-size: 10px;
+  padding: 1px 6px;
+  border-radius: var(--r-pill);
+  vertical-align: middle;
+}
+
+/* Le paragraphe qui accueille des entités respire davantage : sans cette
+ * interligne, les tags se télescopent d'une ligne à l'autre. */
+.zv-ent-text {
+  font-size: 14px;
+  line-height: 1.9;
+  color: var(--ink);
+}
+
+/* Micro-label de statut. */
+.zv-tag {
+  font-family: var(--font-mono);
+  font-size: 9px;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--label);
+  white-space: nowrap;
+}
+
+.zv-tag--ok {
+  color: var(--ok);
+}
+
+.zv-tag--err {
+  color: var(--err);
+}
+
+/* Sur fond sombre les états s'éclaircissent, sinon ils virent au noir. */
+.zv-tag--ok-on-dark {
+  color: #8fd3a8;
+}
+
+.zv-tag--err-on-dark {
+  color: #f0a5ad;
+}
+
+/* ─── Cartes ────────────────────────────────────────────────────────────
+ * ⚠️ ARBITRAGE : le rayon vient de --r-card (16px), comme dans Main.html et
+ * Mobile.html. DesignSystem.html et Logos.html codent 14px en dur, le
+ * prototype 12px. Voir DECISIONS.md. */
+
+.zv-card {
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow-card);
+}
+
+/* Paddings relevés : 22 / 24 / 28 / 32px selon la densité. */
+.zv-card--pad {
+  padding: 24px;
+}
+
+.zv-card--pad-lg {
+  padding: 32px;
+}
+
+/* Carte de statut. L'état « refusé » n'a pas de token de filet — il n'existe
+ * pas de --err-line, là où --ok-line existe. Asymétrie du jeu de tokens. */
+.zv-card--ok {
+  border-color: var(--ok-line);
+}
+
+.zv-card--err {
+  border-color: #efc9cd;
+}
+
+/* Carte flottante : celle qui se détache au-dessus d'une scène. */
+.zv-card--float {
+  box-shadow: var(--shadow-panel);
+}
+
+/* ─── Carte verre ───────────────────────────────────────────────────────
+ * Surface semi-opaque posée sur un halo ou une scène. Ne fonctionne QUE
+ * devant quelque chose : sur du papier nu, elle disparaît. */
+
+.zv-glass {
+  background: rgba(255, 255, 255, 0.86);
+  border: 1px solid rgba(255, 255, 255, 1);
+  border-radius: var(--r-card);
+  box-shadow:
+    0 30px 70px rgba(30, 27, 140, 0.18),
+    0 2px 8px rgba(11, 16, 32, 0.05);
+}
+
+/* ─── Encarts ───────────────────────────────────────────────────────────
+ * Deux encarts distincts au relevé, longtemps confondus. Ils ne se
+ * substituent pas : le premier est une citation d'interface (fond blanc,
+ * texte gris), le second un extrait de document (fond panel, texte encre,
+ * très aéré). */
+
+.zv-inset {
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: var(--r-panel);
+  padding: 14px 16px;
+  font-size: 13px;
+  line-height: 1.6;
+  color: var(--muted);
+  max-width: 380px;
+}
+
+.zv-inset__key,
+.zv-inset em {
+  font-style: normal;
+  color: var(--accent);
+  font-weight: 600;
+}
+
+.zv-inset--quiet {
+  background: var(--panel);
+  border-color: var(--hairline);
+  font-size: 12px;
+  line-height: 1.9;
+  color: var(--ink);
+}
+
+/* Poussé en bas de la carte qui l'accueille. */
+.zv-inset--bottom {
+  margin-top: auto;
+}
+
+/* ─── Statistiques ──────────────────────────────────────────────────────*/
+
+/* Paire de mini-statistiques au pied d'une carte produit. */
+.zv-ministat {
+  display: flex;
+  gap: 10px;
+}
+
+.zv-ministat__item {
+  flex: 1;
+  background: var(--panel);
+  border: 1px solid var(--hairline);
+  border-radius: var(--r-panel);
+  padding: 12px 14px;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.zv-ministat__value {
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: 18px;
+  font-weight: 500;
+}
+
+/* Carte statistique autonome (prototype). */
+.zv-stat-card {
+  flex: 1;
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: var(--r-panel);
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  box-shadow: 0 12px 32px rgba(30, 27, 140, 0.08);
+}
+
+.zv-stat-card__value {
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: 22px;
+  font-weight: 500;
+}
+
+/* ─── Citation ──────────────────────────────────────────────────────────
+ * Fond navy, filet clair, citation en Outfit 300.
+ * ⚠️ Règle de la passation : jamais de fausse citation. Tant qu'un verbatim
+ * n'a pas été recueilli, le bloc reste en réserve, pas en placeholder crédible. */
+
+.zv-quote {
+  background: linear-gradient(135deg, #06063a, var(--accent-deep));
+  color: var(--white);
+  border-radius: var(--r-card);
+  padding: 28px 32px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.zv-quote__text {
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: 17px;
+  font-weight: 300;
+}
+
+/* ─── 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. */
+
+.zv-price {
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: var(--r-card);
+  box-shadow: var(--shadow-card);
+  padding: 26px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.zv-price--featured {
+  border-top: 3px solid var(--accent-deep);
+}
+
+.zv-price__amount {
+  font-family: var(--font-display);
+  letter-spacing: -0.02em;
+  font-size: 28px;
+  font-weight: 300;
+}
+
+/* Le « HT · 1re année » accolé au montant, et la mention sous la carte. */
+.zv-price__unit,
+.zv-price__note {
+  font-size: 12px;
+  color: var(--muted);
+  font-weight: 400;
+  letter-spacing: normal;
+}
+
+/* ─── FAQ ───────────────────────────────────────────────────────────────
+ * Cinq questions par page au maximum. */
+
+.zv-faq {
+  background: var(--white);
+}
+
+.zv-faq__q {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+  padding: 18px 24px;
+  border-bottom: 1px solid var(--hairline);
+  font-size: 14px;
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.zv-faq__q svg {
+  width: 14px;
+  height: 14px;
+  flex: none;
+  color: var(--accent);
+}
+
+.zv-faq__a {
+  padding: 14px 24px;
+  font-size: 13px;
+  color: var(--muted);
+}
+
+/* ─── 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. */
+
+.zv-ui-preview {
+  background: var(--white);
+  border: 1px solid var(--line);
+  border-radius: var(--r-panel);
+  padding: 18px 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.zv-ui-preview__q {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 12px;
+  color: var(--ink);
+}
+
+.zv-ui-preview__q svg {
+  width: 12px;
+  height: 12px;
+  flex: none;
+  color: var(--label);
+}
+
+.zv-ui-preview__a {
+  font-size: 11px;
+  color: var(--muted);
+}
+
+/* Le compteur de sources, seul élément mis en avant de la réponse. */
+.zv-ui-preview__count {
+  color: var(--accent-deep);
+  font-weight: 600;
+}
+
+/* Les puces de source rétrécissent dans un aperçu. */
+.zv-ui-preview .zv-src {
+  font-size: 8px;
+}
+
+/* ─── Pastille de validation ────────────────────────────────────────────*/
+
+.zv-check {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background: var(--ok-soft);
+  color: var(--ok);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+}
+
+/* ─── Filets ────────────────────────────────────────────────────────────*/
+
+.zv-divider {
+  height: 1px;
+  background: var(--hairline);
+  border: 0;
+}
+
+.zv-divider--strong {
+  background: var(--line);
+}
+
+/* Sur fond sombre. La valeur est relevée en border-top de la ligne de
+ * statistiques du manifeste ; elle est reprise ici en fond de filet. */
+.zv-divider--on-dark {
+  background: rgba(255, 255, 255, 0.18);
+}
+
+/* ─── Barre de progression ──────────────────────────────────────────────
+ * Deuxième des trois emplois autorisés du spectre. */
+
+.zv-progress {
+  height: 3px;
+  background: var(--hairline);
+  border-radius: 2px;
+  overflow: hidden;
+}
+
+.zv-progress__fill {
+  height: 3px;
+  background: var(--spectre);
+}
+
+/* ─── Mobile ────────────────────────────────────────────────────────────*/
+
+@media (max-width: 767px) {
+  .zv-btn--sm {
+    height: 36px;
+    padding: 0 14px;
+    font-size: 13px;
+  }
+
+  .zv-pill {
+    height: 26px;
+    padding: 0 12px;
+    letter-spacing: 0.16em;
+  }
+
+  .zv-glass {
+    background: rgba(255, 255, 255, 0.88);
+    box-shadow:
+      0 20px 48px rgba(30, 27, 140, 0.18),
+      0 2px 8px rgba(11, 16, 32, 0.05);
+  }
+
+  .zv-inset {
+    max-width: none;
+  }
+}

package/src/fonts.css

@@ -0,0 +1,16 @@
+/* Zevra — chargement des trois familles de la DA.
+ *
+ * Import SÉPARÉ du reste : une @import CSS bloque le rendu le temps d'un
+ * aller-retour réseau. En production, préférez la balise <link> en tête de
+ * document (voir README, section « Polices ») ou l'auto-hébergement ; ce
+ * fichier existe pour les prototypes, les maquettes et les canvas de design,
+ * où la simplicité prime sur la milliseconde.
+ *
+ * Graisses volontairement restreintes à ce que la DA utilise réellement —
+ * charger la famille entière alourdirait la page sans rien apporter :
+ *   Outfit 200-600 (titres en 300, wordmarks en 600)
+ *   Public Sans 400/600 (texte courant)
+ *   Space Grotesk 500-700 (labels capitales)
+ */
+
+@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@200;300;400;500;600&family=Public+Sans:wght@400;600&family=Space+Grotesk:wght@500;600;700&display=swap");

package/src/index.css

@@ -0,0 +1,11 @@
+/* Zevra UI — feuille complète.
+ * L'ordre compte : les tokens d'abord, le socle ensuite, puis ce qui
+ * s'appuie dessus. Pour n'en charger qu'une partie, importer les modules
+ * un à un dans ce même ordre.
+ */
+@import "./tokens.css";
+@import "./base.css";
+@import "./components.css";
+@import "./layout.css";
+@import "./surfaces.css";
+@import "./motion.css";