@ephia/dova-sdk 1.0.0

package/dist/style.css

@@ -0,0 +1,1093 @@
+/**
+ * Ephia Audio — Theme Variables + Floating Button Styles
+ *
+ * Import this file to get default styling:
+ *   import "ephia-audio/style.css";
+ *
+ * All colors use CSS custom properties so you can override them
+ * without a build step.
+ */
+
+/* ── Root Tokens ───────────────────────────────────── */
+:root {
+  /* Ephia palette */
+  --ephia-bg: #ffffff;
+  --ephia-fg: #171717;
+  --ephia-muted: #737373;
+  --ephia-border: #e5e5e5;
+
+  /* Brand mark (apps/ephia-website/public/ephia_logo.svg) */
+  --ephia-brand-purple: #723ade;
+  --ephia-brand-teal: #00ebd0;
+
+  --ephia-primary: #723ade;
+  --ephia-active: #00ebd0;
+  --ephia-soft: #fdf5ed;
+  --ephia-lavender: #c8b6ff;
+  --ephia-danger: #ef4444;
+  --ephia-warning: #f59e0b;
+  --ephia-success: #10b981;
+
+  --ephia-radius-sm: 10px;
+  --ephia-radius-md: 16px;
+  --ephia-radius-lg: 24px;
+
+  --ephia-shadow-card: 0 14px 40px rgba(15, 23, 42, 0.08);
+
+  /* Connection Indicator */
+  --ephia-indicator-connected: #22c55e;
+  --ephia-indicator-connecting: #f59e0b;
+  --ephia-indicator-idle: #d4d4d4;
+  --ephia-indicator-warning: #f97316;
+  --ephia-indicator-error: #dc2626;
+  --ephia-indicator-size: 0.5rem;
+
+  /* Recorder Button */
+  --ephia-btn-record-bg: #2563eb;
+  --ephia-btn-record-text: #ffffff;
+  --ephia-btn-stop-bg: #dc2626;
+  --ephia-btn-stop-text: #ffffff;
+  --ephia-btn-disabled-opacity: 0.5;
+  --ephia-btn-radius: 0.5rem;
+  --ephia-btn-padding-x: 1rem;
+  --ephia-btn-padding-y: 0.5rem;
+  --ephia-btn-font-size: 0.875rem;
+
+  /* Animation */
+  --ephia-pulse-duration: 2s;
+}
+
+/* ── Recorder Button (primitive) ──────────────────── */
+.ephia-recorder-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 500;
+  border: none;
+  cursor: pointer;
+  transition: opacity 0.15s ease;
+}
+
+.ephia-recorder-button:disabled {
+  cursor: not-allowed;
+}
+
+/* ── Floating wrapper (fixed position) ───────────── */
+.ephia-transcribe-floating-root {
+  position: fixed;
+  z-index: 200;
+}
+
+/* ── TranscriptionButton — ported from @ephia/transcribe-sdk ── */
+
+.ephia-transcribe-root {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --ephia-transcribe-radius: 0.625rem;
+  --ephia-transcribe-ink: var(--ephia-brand-purple);
+  border: 1px solid transparent;
+  border-color: color-mix(in srgb, var(--ephia-transcribe-ink) 40%, transparent);
+  border-radius: var(--ephia-transcribe-radius);
+  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
+  overflow: visible;
+  padding: 8px;
+  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
+}
+
+.ephia-transcribe-radius--sm {
+  --ephia-transcribe-radius: 0.375rem;
+}
+
+.ephia-transcribe-radius--md {
+  --ephia-transcribe-radius: 0.625rem;
+}
+
+.ephia-transcribe-radius--lg {
+  --ephia-transcribe-radius: 1rem;
+}
+
+.ephia-transcribe-radius--full {
+  --ephia-transcribe-radius: 9999px;
+  /* Pill : un peu plus d'air sur les côtés (standard/minimal inchangés). */
+  padding: 8px 13px;
+}
+
+.ephia-transcribe-poweredby {
+  position: absolute;
+  top: 4px;
+  right: 4px;
+  z-index: 20;
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease;
+  /* Conteneur compact — le bouton ne doit pas influencer la hauteur du widget */
+  width: 14px;
+  height: 14px;
+  line-height: 0;
+}
+
+.ephia-transcribe-size--S .ephia-transcribe-poweredby {
+  top: 2px;
+  right: 2px;
+}
+
+.ephia-transcribe-root:hover .ephia-transcribe-poweredby {
+  opacity: 1;
+  pointer-events: auto;
+}
+
+.ephia-transcribe-poweredby-btn {
+  position: relative;
+  box-sizing: border-box;
+  width: 14px;
+  height: 14px;
+  min-width: 0;
+  min-height: 0;
+  max-width: 14px;
+  max-height: 14px;
+  flex: 0 0 auto;
+  border-radius: 9999px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  text-decoration: none;
+  user-select: none;
+  padding: 0;
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.65);
+  color: rgba(0, 0, 0, 0.55);
+  backdrop-filter: blur(8px);
+  transition: opacity 120ms ease, transform 120ms ease;
+}
+
+/* Zone cliquable élargie sans grossir le rendu visuel */
+.ephia-transcribe-poweredby-btn::before {
+  content: "";
+  position: absolute;
+  inset: -8px;
+  border-radius: 9999px;
+}
+
+.ephia-transcribe-poweredby-icon {
+  width: 7px;
+  height: 7px;
+  flex-shrink: 0;
+  stroke: currentColor;
+  fill: none;
+  stroke-width: 2.5;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.ephia-transcribe-poweredby-btn:focus-visible {
+  outline: 2px solid color-mix(in srgb, var(--ephia-brand-purple) 55%, transparent);
+  outline-offset: 1px;
+}
+
+.ephia-transcribe-size--S .ephia-transcribe-poweredby {
+  width: 12px;
+  height: 12px;
+}
+
+.ephia-transcribe-size--S .ephia-transcribe-poweredby-btn {
+  width: 12px;
+  height: 12px;
+  max-width: 12px;
+  max-height: 12px;
+}
+
+.ephia-transcribe-size--S .ephia-transcribe-poweredby-icon {
+  width: 6px;
+  height: 6px;
+  stroke-width: 2.75;
+}
+
+.ephia-transcribe-size--L .ephia-transcribe-poweredby {
+  width: 16px;
+  height: 16px;
+}
+
+.ephia-transcribe-size--L .ephia-transcribe-poweredby-btn {
+  width: 16px;
+  height: 16px;
+  max-width: 16px;
+  max-height: 16px;
+}
+
+.ephia-transcribe-size--L .ephia-transcribe-poweredby-icon {
+  width: 8px;
+  height: 8px;
+}
+
+.ephia-transcribe-poweredby-tooltip {
+  position: absolute;
+  top: 50%;
+  left: calc(100% + 4px);
+  transform: translateY(-50%) translateY(2px);
+  white-space: nowrap;
+  padding: 4px 6px;
+  border-radius: 8px;
+  font-size: 10px;
+  font-style: italic;
+  letter-spacing: 0.2px;
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
+  backdrop-filter: blur(10px);
+  opacity: 0;
+  pointer-events: none;
+  transition: opacity 120ms ease, transform 120ms ease;
+  background: rgba(255, 255, 255, 0.6);
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.ephia-transcribe-size--S .ephia-transcribe-poweredby-tooltip {
+  font-size: 9px;
+  padding: 3px 5px;
+}
+
+.ephia-transcribe-poweredby:hover .ephia-transcribe-poweredby-btn {
+  opacity: 0.95;
+  transform: translateY(-0.5px);
+}
+
+.ephia-transcribe-poweredby:hover .ephia-transcribe-poweredby-tooltip {
+  opacity: 1;
+  transform: translateY(-50%) translateY(0);
+}
+
+.ephia-transcribe-poweredby--light .ephia-transcribe-poweredby-btn {
+  border: 1px solid rgba(255, 255, 255, 0.18);
+  background: rgba(30, 30, 30, 0.55);
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.ephia-transcribe-poweredby--light .ephia-transcribe-poweredby-tooltip {
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  background: rgba(30, 30, 30, 0.6);
+  color: rgba(255, 255, 255, 0.55);
+}
+
+.ephia-transcribe-poweredby--dark .ephia-transcribe-poweredby-btn {
+  border: 1px solid rgba(0, 0, 0, 0.12);
+  background: rgba(255, 255, 255, 0.65);
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.ephia-transcribe-poweredby--dark .ephia-transcribe-poweredby-tooltip {
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  background: rgba(255, 255, 255, 0.6);
+  color: rgba(0, 0, 0, 0.55);
+}
+
+/* theme="light" — bouton fond sombre */
+.ephia-transcribe-root--light {
+  background-color: #2e2e2e;
+  --ephia-transcribe-ink: #ffffff;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+/* theme="dark" — bouton fond clair */
+.ephia-transcribe-root--dark {
+  background-color: #fafafa;
+  --ephia-transcribe-ink: var(--ephia-brand-purple);
+  box-shadow: 0 4px 16px rgba(114, 58, 222, 0.08);
+}
+
+.ephia-transcribe-ring {
+  position: absolute;
+  inset: -2px;
+  border-radius: calc(var(--ephia-transcribe-radius) + 2px);
+  opacity: 1;
+  transition: box-shadow 0.15s ease-out;
+  pointer-events: none;
+}
+
+.ephia-transcribe-btn {
+  flex-shrink: 0;
+  position: relative;
+  z-index: 10;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  outline: none;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  padding: 0;
+  border-radius: var(--ephia-transcribe-radius);
+}
+
+.ephia-transcribe-btn-inner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 0;
+}
+
+.ephia-transcribe-btn-inner--standard {
+  gap: 4px;
+  width: 100%;
+  min-width: 0;
+}
+
+.ephia-transcribe-btn-inner--standard .ephia-transcribe-standard-right-swap {
+  flex: 1 1 0;
+  min-width: 0;
+}
+
+/* Traitement : largeur fixée au libellé, pas d'expansion waveform */
+.ephia-transcribe-btn-inner--standard.ephia-transcribe-btn-inner--processing {
+  width: auto;
+}
+
+.ephia-transcribe-btn-inner--standard .ephia-transcribe-standard-right-swap--processing {
+  flex: 0 0 auto;
+  width: auto;
+  min-width: 0;
+}
+
+.ephia-transcribe-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.ephia-transcribe-logo-clip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: inherit;
+  mask-image: radial-gradient(white, black);
+  -webkit-mask-image: -webkit-radial-gradient(white, black);
+}
+
+.ephia-transcribe-logo-slot {
+  position: relative;
+  transition: width 220ms ease, padding 220ms ease;
+  padding: 0;
+}
+
+.ephia-transcribe-logo-slot-layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 180ms ease, transform 220ms ease;
+  will-change: opacity, transform;
+}
+
+.ephia-transcribe-logo-slot-layer--logo {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.ephia-transcribe-logo-slot-layer--timer {
+  opacity: 0;
+  transform: translateY(2px);
+}
+
+.ephia-transcribe-logo-slot--recording .ephia-transcribe-logo-slot-layer--logo {
+  opacity: 0;
+  transform: translateY(-2px);
+}
+
+.ephia-transcribe-logo-slot--recording .ephia-transcribe-logo-slot-layer--timer {
+  opacity: 1;
+  transform: translateY(0);
+}
+
+.ephia-transcribe-session-timer {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.6px;
+  font-weight: 600;
+  font-size: 0.75rem;
+  line-height: 1;
+  color: var(--ephia-transcribe-ink);
+}
+
+.ephia-transcribe-logo-slot--recording {
+  padding: 0 6px;
+}
+
+.ephia-transcribe-session-timer--measure {
+  position: absolute;
+  left: -9999px;
+  top: -9999px;
+  opacity: 0;
+  pointer-events: none;
+  white-space: nowrap;
+}
+
+.ephia-transcribe-size--S .ephia-transcribe-session-timer {
+  font-size: 10px;
+}
+
+.ephia-transcribe-size--M .ephia-transcribe-session-timer {
+  font-size: 0.8125rem;
+}
+
+.ephia-transcribe-size--L .ephia-transcribe-session-timer {
+  font-size: 0.875rem;
+}
+
+.ephia-transcribe-logo-svg {
+  flex-shrink: 0;
+  display: block;
+  transition: transform 0.2s ease, filter 0.2s ease;
+}
+
+.ephia-transcribe-logo-svg--recording {
+  transform: scale(1.04);
+  filter: drop-shadow(0 0 6px rgba(114, 58, 222, 0.45))
+    drop-shadow(0 0 10px rgba(0, 235, 208, 0.35));
+}
+
+/* Standard variant: historique de barres d'intensité (fenêtre INTENSITY_SAMPLE_MS) */
+.ephia-transcribe-standard-placeholder {
+  flex: 1 1 auto;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-width: 0;
+  height: 28px;
+  overflow: hidden;
+}
+
+.ephia-transcribe-standard-placeholder__rect {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 24px;
+  box-sizing: border-box;
+  overflow: hidden;
+  -webkit-mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    #000 14%,
+    #000 72%,
+    transparent 100%
+  );
+  mask-image: linear-gradient(
+    to right,
+    transparent 0%,
+    #000 14%,
+    #000 72%,
+    transparent 100%
+  );
+}
+
+.ephia-transcribe-standard-placeholder__viewport {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  overflow: hidden;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.ephia-transcribe-standard-placeholder__track {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 2px;
+  height: 100%;
+  will-change: transform;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.ephia-transcribe-standard-placeholder__history-bar {
+  flex: 0 0 3px;
+  width: 3px;
+  min-height: 2px;
+  border-radius: 1px;
+  align-self: center;
+  background: var(--ephia-transcribe-intensity-bar, #723ade);
+}
+
+.ephia-transcribe-root--light .ephia-transcribe-standard-placeholder__history-bar {
+  background: var(--ephia-transcribe-intensity-bar, #723ade);
+}
+
+.ephia-transcribe-root--dark .ephia-transcribe-standard-placeholder__history-bar {
+  background: var(--ephia-transcribe-intensity-bar, #ffffff);
+}
+
+/* Standard variant: swap "Commencer à dicter" ↔ waveform */
+.ephia-transcribe-standard-right-swap {
+  position: relative;
+  flex: 1 1 0;
+  min-width: 0;
+  height: 28px;
+  display: inline-grid;
+  align-items: center;
+  justify-items: stretch;
+}
+
+.ephia-transcribe-standard-right-layer {
+  grid-area: 1 / 1;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 180ms ease, transform 180ms ease;
+  will-change: opacity, transform;
+}
+
+.ephia-transcribe-standard-right-layer--prompt {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  color: var(--ephia-transcribe-ink);
+  opacity: 0.9;
+  transform: translateY(0);
+  white-space: nowrap;
+  padding-right: 6px;
+}
+
+.ephia-transcribe-standard-right-layer--waveform {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(2px);
+}
+
+.ephia-transcribe-standard-right-swap--prompt .ephia-transcribe-standard-right-layer--waveform {
+  visibility: hidden;
+  pointer-events: none;
+}
+
+.ephia-transcribe-standard-right-swap--waveform .ephia-transcribe-standard-right-layer--prompt {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-2px);
+}
+
+.ephia-transcribe-standard-right-swap--waveform .ephia-transcribe-standard-right-layer--waveform {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+  width: 100%;
+  justify-content: stretch;
+}
+
+.ephia-transcribe-standard-right-swap--waveform .ephia-transcribe-standard-placeholder {
+  /* IMPORTANT:
+     La waveform ne doit pas influencer la largeur du bouton.
+     Si ce bloc devient flex:1/width:100%, la largeur peut croître avec l'historique (boucle). */
+  width: clamp(50px, 9vw, 90px) !important;
+  max-width: 90px !important;
+  min-width: 0 !important;
+  flex: 0 0 auto !important;
+  overflow: hidden !important;
+}
+
+/* ── Processing layer (finalizing) ───────────────────────────────── */
+
+.ephia-transcribe-standard-right-layer--processing {
+  font-size: 11px;
+  font-weight: 500;
+  letter-spacing: 0.2px;
+  color: var(--ephia-transcribe-ink);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(2px);
+  white-space: nowrap;
+  padding-right: 6px;
+}
+
+.ephia-transcribe-standard-right-swap--processing .ephia-transcribe-standard-right-layer--prompt {
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  transform: translateY(-2px);
+}
+
+.ephia-transcribe-standard-right-swap--processing .ephia-transcribe-standard-right-layer--waveform {
+  display: none;
+}
+
+.ephia-transcribe-standard-right-swap--processing .ephia-transcribe-standard-right-layer--processing {
+  opacity: 0.9;
+  visibility: visible;
+  pointer-events: auto;
+  transform: translateY(0);
+}
+
+/* Priorité sur @ephia/transcribe-sdk/styles.css (chargé après dans la platform) */
+.ephia-transcribe-root .ephia-transcribe-standard-right-swap:not(.ephia-transcribe-standard-right-swap--processing) {
+  flex: 1 1 0 !important;
+  min-width: 0 !important;
+  height: 28px !important;
+  justify-items: stretch !important;
+}
+
+.ephia-transcribe-root .ephia-transcribe-standard-right-swap--processing {
+  flex: 0 0 auto !important;
+  width: auto !important;
+  height: 28px !important;
+  justify-items: center !important;
+}
+
+.ephia-transcribe-root .ephia-transcribe-standard-right-layer--prompt {
+  color: var(--ephia-transcribe-ink) !important;
+}
+
+/* Minimal variant: swap logo ↔ indicateur d'activité (3 barres), sans élargissement */
+.ephia-transcribe-minimal-swap {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border-radius: 0;
+  transition: opacity 200ms ease;
+  flex-shrink: 0;
+}
+
+.ephia-transcribe-minimal-swap-layer {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: opacity 180ms ease, transform 180ms ease;
+  will-change: opacity, transform;
+}
+
+.ephia-transcribe-minimal-swap-layer--logo {
+  opacity: 1;
+  transform: scale(1);
+}
+
+.ephia-transcribe-minimal-swap-layer--activity {
+  opacity: 0;
+  transform: scale(0.88);
+}
+
+.ephia-transcribe-minimal-swap--recording .ephia-transcribe-minimal-swap-layer--logo {
+  opacity: 0;
+  transform: scale(0.88);
+}
+
+.ephia-transcribe-minimal-swap--recording .ephia-transcribe-minimal-swap-layer--activity {
+  opacity: 1;
+  transform: scale(1);
+}
+
+/* 3 barres verticales (variant minimal, enregistrement) */
+.ephia-transcribe-minimal-bars {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ephia-minimal-bar-gap, 3px);
+  height: 90%;
+  max-height: 100%;
+  width: 100%;
+}
+
+.ephia-transcribe-minimal-bar {
+  display: block;
+  flex-shrink: 0;
+  align-self: center;
+  border-radius: 9999px;
+  height: calc(var(--ephia-bar-scale, 0.4) * 100%);
+  min-height: 3px;
+  max-height: 100%;
+  /* Hauteur pilotée par rAF + lerp (pas de balayage CSS min/max). */
+  transition: none;
+  will-change: height;
+}
+
+/* ── EphiaTextarea — overlay Dragon-style ──────────── */
+.ephia-textarea-wrapper {
+  position: relative;
+  display: block;
+}
+
+/*
+ * L'overlay affiche TOUT le texte committed + le partial grisé.
+ * Le texte de la <textarea> est transparent : seul le caret reste visible.
+ * Technique standard (CodeMirror, Monaco, Dragon Medical SDK).
+ */
+.ephia-textarea-overlay {
+  position: absolute;
+  inset: 0;
+  overflow: hidden;
+  resize: none;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+  color: inherit; /* texte committed affiché normalement */
+  pointer-events: none;
+  user-select: none;
+  z-index: 0;
+}
+
+/* Texte interim : grisé + italique, comme Dragon Medical */
+.ephia-textarea-overlay .ephia-text--streaming {
+  color: rgba(0, 0, 0, 0.55);
+  font-style: italic;
+  padding-left: 0.15em;
+}
+
+/* Le texte de la textarea est invisible : l'overlay le remplace visuellement */
+.ephia-textarea-input {
+  position: relative;
+  z-index: 1;
+  background: transparent;
+  color: transparent;
+  caret-color: var(--ephia-fg, #171717);
+}
+
+/* Masquer le curseur pendant l'enregistrement — sa position est imprévisible
+   quand l'élément n'a pas le focus ou entre deux commits. */
+.ephia-textarea-input[data-ephia-recording="true"] {
+  caret-color: transparent;
+}
+
+/* ── Spinner ASCII au point d'insertion ────────────── */
+.ephia-cursor {
+  font-style: normal;
+  color: var(--ephia-primary, #3933d3);
+  opacity: 0.85;
+}
+
+/* ── A11y : pas d'animations si reduce-motion ─────── */
+@media (prefers-reduced-motion: reduce) {
+  .ephia-transcribe-ring,
+  .ephia-transcribe-logo-slot-layer,
+  .ephia-transcribe-logo-slot,
+  .ephia-transcribe-minimal-swap,
+  .ephia-transcribe-minimal-swap-layer,
+  .ephia-transcribe-standard-right-layer,
+  .ephia-transcribe-logo-svg {
+    transition: none !important;
+    animation: none !important;
+  }
+}
+/* ephia-audio React SDK — visual feedback for active target, recording state & text states.
+ * Import: `import "ephia-audio/react/ephia-react.css"` (ou via styles.css du package).
+ * Tout est dérivé de variables CSS pour être surchargeable.
+ *
+ * Système de text states :
+ *   .ephia-text--streaming   → texte en cours d'arrivée STT (partial)
+ *   .ephia-text--committed   → transition de validation (streaming → normal)
+ *   .ephia-text--revised     → texte corrigé par le review pipeline
+ */
+
+:root {
+  /* ── Couleurs sémantiques ─────────────────────────────────────────────── */
+  --ephia-color-active: #6366f1;
+  --ephia-color-recording: #ef4444;
+  --ephia-color-streaming: #6366f1;
+  --ephia-color-committed: #22c55e;
+  --ephia-color-revised: #f59e0b;
+
+  /* ── Épaisseurs / radius ──────────────────────────────────────────────── */
+  --ephia-ring-width: 2px;
+  --ephia-ring-radius: 6px;
+  --ephia-transition: 180ms ease;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   HALOS — états du target (container)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Session active : griser les non-cibles pendant une dictée ──────────── */
+/* Cible les descendants directs du body ET les enfants directs des containers
+   pour éviter d'affecter des composants imbriqués non liés à Ephia.         */
+[data-ephia-session-active="true"] > [data-ephia-target]:not([data-ephia-recording="true"]),
+[data-ephia-session-active="true"] [data-ephia-target]:not([data-ephia-recording="true"]) {
+  opacity: 0.55;
+  filter: grayscale(0.6);
+  transition: opacity 0.2s ease, filter 0.2s ease;
+}
+
+/* ─── Target actif : halo discret (uniquement en session active) ────────── */
+body[data-ephia-session-active="true"] [data-ephia-target-active="true"] {
+  outline: var(--ephia-ring-width) solid
+    color-mix(in srgb, var(--ephia-color-active) 35%, transparent);
+  outline-offset: 1px;
+  border-radius: var(--ephia-ring-radius);
+  transition: outline-color var(--ephia-transition),
+    box-shadow var(--ephia-transition);
+}
+
+/* ─── Target en enregistrement : border + glow ───────────────────────────── */
+[data-ephia-recording="true"] {
+  position: relative;
+  outline: none !important;
+  border: 2px solid color-mix(in srgb, var(--ephia-color-recording) 55%, transparent);
+  border-radius: var(--ephia-ring-radius);
+}
+
+[data-ephia-recording="true"]::before {
+  content: "";
+  position: absolute;
+  inset: -3px;
+  border-radius: calc(var(--ephia-ring-radius) + 3px);
+  pointer-events: none;
+  z-index: 50;
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ephia-color-recording) 30%, transparent),
+    0 0 18px color-mix(in srgb, var(--ephia-color-recording) 25%, transparent);
+  animation: ephia-recording-pulse 1.8s ease-in-out infinite;
+}
+
+@keyframes ephia-recording-pulse {
+  0%, 100% { opacity: 0.8; transform: scale(1); }
+  50% { opacity: 1; transform: scale(1.01); }
+}
+
+/* ─── Indicateur public processing : discret, piloté par EphiaStatusBar ─── */
+[data-ephia-state="processing"] {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  padding: 2px 6px;
+}
+
+[data-ephia-state="processing"]::before,
+[data-ephia-state="processing"]::after {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 999px;
+  background: currentColor;
+  opacity: 0.4;
+  animation: ephia-processing-pulse 1.2s ease-in-out infinite;
+}
+
+[data-ephia-state="processing"]::after {
+  animation-delay: 0.4s;
+  margin-left: 3px;
+}
+
+@keyframes ephia-processing-pulse {
+  0%, 80%, 100% { opacity: 0.2; transform: scale(0.85); }
+  40% { opacity: 0.8; transform: scale(1); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   FLASHES — overlays temporaires (position: fixed)
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Flash sur plage révisée ────────────────────────────────────────────── */
+.ephia-reformat-flash {
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  border-radius: 3px;
+  background-color: color-mix(in srgb, var(--ephia-color-active) 22%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ephia-color-active) 40%, transparent);
+  animation: ephia-reformat-fade 1.2s ease-out forwards;
+}
+
+@keyframes ephia-reformat-fade {
+  0% { opacity: 0; }
+  15% { opacity: 1; }
+  100% { opacity: 0; }
+}
+
+/* ─── Flash chunk committed : bleu → vert ────────────────────────────────── */
+.ephia-committed-flash {
+  position: fixed;
+  pointer-events: none;
+  z-index: 100;
+  border-radius: 3px;
+  background-color: color-mix(in srgb, #3b82f6 22%, transparent);
+  box-shadow: 0 0 0 1px color-mix(in srgb, #3b82f6 40%, transparent);
+  animation: ephia-committed-fade 1s ease-out forwards;
+}
+
+@keyframes ephia-committed-fade {
+  0% { opacity: 0; background-color: color-mix(in srgb, #3b82f6 30%, transparent); }
+  30% { opacity: 1; background-color: color-mix(in srgb, #3b82f6 25%, transparent); }
+  60% { background-color: color-mix(in srgb, #22c55e 20%, transparent); }
+  100% { opacity: 0; background-color: color-mix(in srgb, #22c55e 15%, transparent); }
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   TEXT STATES — styles appliqués au texte lui-même
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── 1. STREAMING — texte en cours d'arrivée STT ──────────────────────────
+   Visuel : fond lavande "respirant" + border-bottom dotted + italique léger.
+   Le texte est vivant, il peut encore changer. */
+.ephia-streaming,
+.ephia-text--streaming {
+  background-color: color-mix(in srgb, var(--ephia-color-streaming) 8%, transparent);
+  border-bottom: 1.5px dotted color-mix(in srgb, var(--ephia-color-streaming) 30%, transparent);
+  border-radius: 2px;
+  padding: 0 2px;
+  margin: 0 -2px;
+  font-style: italic;
+  animation: ephia-streaming-breathe 2.2s ease-in-out infinite;
+  transition: background-color 350ms ease, border-bottom-color 350ms ease, opacity 350ms ease;
+}
+
+@keyframes ephia-streaming-breathe {
+  0%, 100% { background-color: color-mix(in srgb, var(--ephia-color-streaming) 6%, transparent); }
+  50% { background-color: color-mix(in srgb, var(--ephia-color-streaming) 11%, transparent); }
+}
+
+/* ─── 1b. PLACEHOLDER — texte interim au démarrage (avant premier partial) ─
+   Visuel : points de suspension avec un shimmer horizontal qui simule
+   une onde traversant le texte en attendant l'arrivée du STT. */
+.ephia-text--placeholder {
+  background: linear-gradient(
+    90deg,
+    rgba(99, 102, 241, 0.2) 0%,
+    rgba(99, 102, 241, 0.7) 40%,
+    rgba(99, 102, 241, 0.2) 80%
+  );
+  background-size: 250% 100%;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  animation: ephia-placeholder-shimmer 1.6s ease-in-out infinite;
+  font-style: italic;
+}
+
+@keyframes ephia-placeholder-shimmer {
+  0% { background-position: 250% 0; }
+  100% { background-position: -250% 0; }
+}
+
+/* ─── 2. COMMITTED — transition streaming → normal ─────────────────────────
+   Quand le backend valide le texte, le fond lavande glisse vers le vert
+   puis disparaît complètement. Feedback de confirmation visuelle. */
+.ephia-committed,
+.ephia-text--committed {
+  animation: ephia-committed-settle 1.2s ease-out forwards;
+  font-style: normal;
+}
+
+@keyframes ephia-committed-settle {
+  0% {
+    background-color: color-mix(in srgb, var(--ephia-color-streaming) 8%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-streaming) 30%, transparent);
+  }
+  25% {
+    background-color: color-mix(in srgb, var(--ephia-color-committed) 18%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-committed) 45%, transparent);
+  }
+  100% {
+    background-color: transparent;
+    border-bottom-color: transparent;
+  }
+}
+
+/* ─── 3. REVISED — texte corrigé par le review pipeline ────────────────────
+   Visuel : fond ambre + ligne ondulée (style suggestion). S'efface après 2s.
+   L'utilisateur remarque que le backend a modifié quelque chose. */
+.ephia-revised,
+.ephia-text--revised {
+  background-color: color-mix(in srgb, var(--ephia-color-revised) 14%, transparent);
+  border-bottom: 2px wavy color-mix(in srgb, var(--ephia-color-revised) 45%, transparent);
+  border-radius: 2px;
+  padding: 0 2px;
+  margin: 0 -2px;
+  animation: ephia-revised-settle 2s ease-out forwards;
+}
+
+@keyframes ephia-revised-settle {
+  0% {
+    background-color: color-mix(in srgb, var(--ephia-color-revised) 22%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-revised) 55%, transparent);
+  }
+  50% {
+    background-color: color-mix(in srgb, var(--ephia-color-revised) 10%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-revised) 35%, transparent);
+  }
+  100% {
+    background-color: transparent;
+    border-bottom-color: transparent;
+  }
+}
+
+/* ─── 5. ERROR — erreur de transcription ─────────────────────────────────── */
+.ephia-error {
+  color: #dc2626;
+  text-decoration: line-through;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   UTILITAIRES & A11Y
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ─── Lock cursor TipTap / ProseMirror ───────────────────────────────────── */
+[data-ephia-recording="true"] .ProseMirror {
+  caret-color: transparent !important;
+}
+
+/* ─── Curseur d'insertion ─────────────────────────────────────────────────── */
+.ephia-insertion-cursor {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+@keyframes ephia-pulse {
+  0%, 100% {
+    transform: translateX(-50%) scale(0.9);
+    opacity: 0.7;
+  }
+  50% {
+    transform: translateX(-50%) scale(1.15);
+    opacity: 1;
+  }
+}
+
+/* ─── A11y : pas d'animations si reduce-motion ────────────────────────────── */
+@media (prefers-reduced-motion: reduce) {
+  [data-ephia-recording="true"] {
+    animation: none;
+  }
+  [data-ephia-recording="true"]::before {
+    animation: none !important;
+  }
+  .ephia-insertion-cursor > * {
+    animation: none !important;
+  }
+  .ephia-reformat-flash,
+  .ephia-committed-flash {
+    animation: none;
+    opacity: 0.5;
+  }
+  .ephia-streaming,
+  .ephia-text--streaming {
+    animation: none;
+    background-color: color-mix(in srgb, var(--ephia-color-streaming) 8%, transparent);
+  }
+  .ephia-text--placeholder {
+    animation: none;
+    background: transparent;
+    -webkit-text-fill-color: color-mix(in srgb, var(--ephia-color-streaming) 50%, transparent);
+    color: color-mix(in srgb, var(--ephia-color-streaming) 50%, transparent);
+  }
+  .ephia-committed,
+  .ephia-text--committed {
+    animation: none;
+    background-color: transparent;
+    border-bottom-color: transparent;
+  }
+  .ephia-revised,
+  .ephia-text--revised {
+    animation: none;
+    background-color: color-mix(in srgb, var(--ephia-color-revised) 10%, transparent);
+    border-bottom-color: color-mix(in srgb, var(--ephia-color-revised) 40%, transparent);
+  }
+  .ephia-error {
+    color: #dc2626;
+    text-decoration: line-through;
+  }
+}