@dnax/ui 0.0.27 → 0.0.29

package/styles/main.css

@@ -6484,18 +6484,11 @@ html.dark body {
   }
 }
 
-/* slide-* : glisse depuis un bord (32px) avec fondu */
-.q-dialog-slide-up-enter-active,
-.q-dialog-slide-up-leave-active,
-.q-dialog-slide-down-enter-active,
-.q-dialog-slide-down-leave-active,
-.q-dialog-slide-left-enter-active,
-.q-dialog-slide-left-leave-active,
-.q-dialog-slide-right-enter-active,
-.q-dialog-slide-right-leave-active {
-  transition: opacity var(--q-dialog-duration-enter, 0.2s) ease;
-}
-
+/* slide-* : vrai glissement plein écran — le panneau arrive depuis le bord
+   (100vh / 100vw) et y retourne à la fermeture, comme les transitions par
+   position (q-dialog-in-bottom…). Le fondu du fond est porté par l'overlay ;
+   le panneau glisse sans fade (l'ancienne translation de 32px + fade
+   ressemblait à un simple fondu). */
 .q-dialog-slide-up-enter-active,
 .q-dialog-slide-down-enter-active,
 .q-dialog-slide-left-enter-active,
@@ -6520,19 +6513,16 @@ html.dark body {
 
 @keyframes q-dialog-slide-up-in {
   from {
-    opacity: 0;
-    transform: translateY(32px);
+    transform: translateY(100vh);
   }
   to {
-    opacity: 1;
     transform: none;
   }
 }
 
 @keyframes q-dialog-slide-up-out {
   to {
-    opacity: 0;
-    transform: translateY(32px);
+    transform: translateY(100vh);
   }
 }
 
@@ -6546,19 +6536,16 @@ html.dark body {
 
 @keyframes q-dialog-slide-down-in {
   from {
-    opacity: 0;
-    transform: translateY(-32px);
+    transform: translateY(-100vh);
   }
   to {
-    opacity: 1;
     transform: none;
   }
 }
 
 @keyframes q-dialog-slide-down-out {
   to {
-    opacity: 0;
-    transform: translateY(-32px);
+    transform: translateY(-100vh);
   }
 }
 
@@ -6572,19 +6559,16 @@ html.dark body {
 
 @keyframes q-dialog-slide-left-in {
   from {
-    opacity: 0;
-    transform: translateX(32px);
+    transform: translateX(100vw);
   }
   to {
-    opacity: 1;
     transform: none;
   }
 }
 
 @keyframes q-dialog-slide-left-out {
   to {
-    opacity: 0;
-    transform: translateX(32px);
+    transform: translateX(100vw);
   }
 }
 
@@ -6598,22 +6582,49 @@ html.dark body {
 
 @keyframes q-dialog-slide-right-in {
   from {
-    opacity: 0;
-    transform: translateX(-32px);
+    transform: translateX(-100vw);
   }
   to {
-    opacity: 1;
     transform: none;
   }
 }
 
 @keyframes q-dialog-slide-right-out {
   to {
-    opacity: 0;
-    transform: translateX(-32px);
+    transform: translateX(-100vw);
   }
 }
 
+/* sheet-up / sheet-down : mêmes mouvements que slide-up/down (plein écran),
+   mais l'OUVERTURE décélère en fin de course — courbe « pose » type sheet
+   natif (cubic-bezier(0.32, 0.72, 0, 1)) ; la fermeture reste identique à
+   slide. Keyframes partagées avec slide-*. */
+.q-dialog-sheet-up-enter-active,
+.q-dialog-sheet-down-enter-active {
+  transition: opacity var(--q-dialog-duration-enter, 0.2s) ease;
+}
+
+.q-dialog-sheet-up-leave-active,
+.q-dialog-sheet-down-leave-active {
+  transition: opacity var(--q-dialog-duration-leave, 0.15s) ease-in-out;
+}
+
+.q-dialog-sheet-up-enter-active .q-dialog__content {
+  animation: q-dialog-slide-up-in var(--q-dialog-duration-enter, 0.3s) cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.q-dialog-sheet-up-leave-active .q-dialog__content {
+  animation: q-dialog-slide-up-out var(--q-dialog-duration-leave, 0.15s) ease-in-out forwards;
+}
+
+.q-dialog-sheet-down-enter-active .q-dialog__content {
+  animation: q-dialog-slide-down-in var(--q-dialog-duration-enter, 0.3s) cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+.q-dialog-sheet-down-leave-active .q-dialog__content {
+  animation: q-dialog-slide-down-out var(--q-dialog-duration-leave, 0.15s) ease-in-out forwards;
+}
+
 /* swipe-* : le panneau glisse depuis un bord et y REVIENT à la fermeture
    (aller-retour, comme la sidebar) — swipe-left : vient de la droite et y
    retourne ; swipe-right : vient de la gauche et y retourne. */
@@ -6666,6 +6677,34 @@ html.dark body {
   }
 }
 
+/* Easing sur mesure — props transition-easing-enter / transition-easing-leave :
+   l'overlay porte les variables CSS inline (--q-dialog-easing-enter/leave),
+   posées uniquement quand la prop est fournie. Les sélecteurs d'attribut
+   `style*` ne matchent que dans ce cas → la courbe par défaut de chaque
+   transition (ease, ease-in-out, cubic-bezier de sheet/swipe…) reste intacte
+   tant qu'on n'a rien réglé. */
+/* Le panneau : animation-timing-function de TOUTES les transitions qui
+   animent .q-dialog__content (zoom, slide-*, sheet-*, swipe-*, défaut selon
+   position). */
+.q-dialog__overlay[style*="--q-dialog-easing-enter"] .q-dialog__content {
+  animation-timing-function: var(--q-dialog-easing-enter, ease);
+}
+
+.q-dialog__overlay[style*="--q-dialog-easing-leave"] .q-dialog__content {
+  animation-timing-function: var(--q-dialog-easing-leave, ease-in-out);
+}
+
+/* Le fond (overlay) : même easing pour son fondu d'opacité — la phase courante
+   est détectée via la classe de transition (*-enter-active / *-leave-active,
+   commune à fade, zoom, slide…). */
+.q-dialog__overlay[style*="--q-dialog-easing-enter"][class*="-enter-active"] {
+  transition-timing-function: var(--q-dialog-easing-enter, ease);
+}
+
+.q-dialog__overlay[style*="--q-dialog-easing-leave"][class*="-leave-active"] {
+  transition-timing-function: var(--q-dialog-easing-leave, ease-in-out);
+}
+
 /* ===== QContainer ===== */
 .q-container {
   width: 100%;
@@ -8352,3 +8391,2149 @@ html.dark body {
     animation: none;
   }
 }
+
+/* ===== QTiptap ===== */
+.q-tiptap {
+  --q-tiptap-bg: #fff;
+  --q-tiptap-toolbar-bg: #f6f7f9;
+  --q-tiptap-border: var(--border, rgb(0 0 0 / 0.12));
+  --q-tiptap-text: var(--foreground, #1d1d1d);
+  /* ⚠ --muted est un token de FOND (bg grisé shadcn), pas une couleur de texte
+     → icônes/secondary en gris texte explicite */
+  --q-tiptap-muted: #8b93a1;
+  --q-tiptap-primary: var(--primary, #1976d2);
+  --q-tiptap-radius: var(--q-radius, 12px);
+  --q-tiptap-code-bg: rgb(0 0 0 / 0.06);
+  --q-tiptap-quote-bg: rgb(25 118 210 / 0.07);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: var(--q-tiptap-radius);
+  background-color: var(--q-tiptap-bg);
+  color: var(--q-tiptap-text);
+}
+.dark .q-tiptap {
+  --q-tiptap-bg: #1e1e22;
+  --q-tiptap-toolbar-bg: #27272c;
+  --q-tiptap-border: rgb(255 255 255 / 0.12);
+  --q-tiptap-text: #ececef;
+  --q-tiptap-muted: #9aa2b1;
+  --q-tiptap-code-bg: rgb(255 255 255 / 0.08);
+  --q-tiptap-quote-bg: rgb(25 118 210 / 0.18);
+}
+.q-tiptap--filled {
+  --q-tiptap-bg: #f6f7f9;
+  --q-tiptap-toolbar-bg: transparent;
+  border-color: transparent;
+  box-shadow: inset 0 0 0 1px var(--q-tiptap-border);
+}
+.dark .q-tiptap--filled {
+  --q-tiptap-bg: #26262b;
+  --q-tiptap-toolbar-bg: transparent;
+  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.1);
+}
+.q-tiptap--square {
+  border-radius: 0;
+}
+.q-tiptap--disable {
+  opacity: 0.7;
+}
+.q-tiptap--disable .q-tiptap__body {
+  pointer-events: none;
+}
+
+/* — barre d'outils — */
+.q-tiptap__toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 2px;
+  padding: 4px 6px;
+  background-color: var(--q-tiptap-toolbar-bg);
+  border-bottom: 1px solid var(--q-tiptap-border);
+}
+.q-tiptap__group {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+}
+.q-tiptap__group + .q-tiptap__group {
+  margin-left: 6px;
+  padding-left: 6px;
+  border-left: 1px solid var(--q-tiptap-border);
+}
+.q-tiptap__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--q-tiptap-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+.q-tiptap__tool svg {
+  width: 17px;
+  height: 17px;
+}
+.q-tiptap__tool:hover:not(:disabled) {
+  background-color: rgb(0 0 0 / 0.06);
+  color: var(--q-tiptap-text);
+}
+.dark .q-tiptap__tool:hover:not(:disabled) {
+  background-color: rgb(255 255 255 / 0.08);
+}
+.q-tiptap__tool--active {
+  background-color: rgb(25 118 210 / 0.14);
+  background-color: color-mix(in srgb, var(--q-tiptap-primary) 14%, transparent);
+  color: var(--q-tiptap-primary);
+}
+.q-tiptap__tool:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.q-tiptap--dense .q-tiptap__tool {
+  width: 26px;
+  height: 26px;
+}
+
+/* — zone d'édition — */
+.q-tiptap__body {
+  position: relative;
+  flex: 1;
+  min-width: 0;
+}
+.q-tiptap__editor {
+  position: relative;
+  z-index: 1;
+  min-height: 180px;
+}
+.q-tiptap__editor > div,
+.q-tiptap__editor .ProseMirror {
+  min-height: inherit;
+}
+.q-tiptap__editor .ProseMirror {
+  padding: var(--q-tiptap-content-padding, 5%);
+  outline: none;
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--q-tiptap-text);
+  caret-color: var(--q-tiptap-primary);
+  word-wrap: break-word;
+}
+
+/* placeholder (visible quand le document est vide) — aligné sur le padding
+   par défaut (5% sur les 4 côtés) */
+.q-tiptap__placeholder {
+  position: absolute;
+  z-index: 0;
+  top: 5%;
+  left: 5%;
+  right: 5%;
+  font-style: italic;
+  font-size: 14px;
+  line-height: 1.7;
+  color: var(--q-tiptap-muted);
+  pointer-events: none;
+  white-space: pre-wrap;
+}
+
+/* — typographie du contenu édité (ProseMirror) — */
+.q-tiptap__editor .ProseMirror p {
+  margin: 0 0 0.6em;
+}
+.q-tiptap__editor .ProseMirror h1,
+.q-tiptap__editor .ProseMirror h2,
+.q-tiptap__editor .ProseMirror h3 {
+  margin: 0.8em 0 0.4em;
+  color: var(--q-tiptap-text);
+  font-weight: 700;
+  line-height: 1.3;
+}
+.q-tiptap__editor .ProseMirror h1 {
+  font-size: 1.55em;
+}
+.q-tiptap__editor .ProseMirror h2 {
+  font-size: 1.3em;
+}
+.q-tiptap__editor .ProseMirror h3 {
+  font-size: 1.1em;
+}
+.q-tiptap__editor .ProseMirror > *:first-child {
+  margin-top: 0;
+}
+.q-tiptap__editor .ProseMirror ul,
+.q-tiptap__editor .ProseMirror ol {
+  margin: 0 0 0.8em;
+  /* listes décalées d'un retrait (margin-left) ; petit padding pour les
+     marqueurs (puces / numéros) */
+  margin-left: 1.5em;
+  padding-left: 0.4em;
+}
+/* listes imbriquées : retrait réduit pour rester lisible */
+.q-tiptap__editor .ProseMirror ul ul,
+.q-tiptap__editor .ProseMirror ul ol,
+.q-tiptap__editor .ProseMirror ol ul,
+.q-tiptap__editor .ProseMirror ol ol {
+  margin-left: 0.75em;
+}
+/* Tailwind preflight met ul/ol { list-style: none } → restaurer les marqueurs */
+.q-tiptap__editor .ProseMirror ul {
+  list-style-type: disc;
+}
+.q-tiptap__editor .ProseMirror ol {
+  list-style-type: decimal;
+}
+.q-tiptap__editor .ProseMirror ul ul {
+  list-style-type: circle;
+}
+.q-tiptap__editor .ProseMirror ul ul ul {
+  list-style-type: square;
+}
+.q-tiptap__editor .ProseMirror li {
+  margin: 0.15em 0;
+}
+.q-tiptap__editor .ProseMirror li p {
+  margin: 0;
+}
+.q-tiptap__editor .ProseMirror blockquote {
+  margin: 0.6em 0;
+  padding: 6px 12px;
+  border-left: 3px solid var(--q-tiptap-primary);
+  border-radius: 0 8px 8px 0;
+  background: var(--q-tiptap-quote-bg);
+}
+.q-tiptap__editor .ProseMirror blockquote p {
+  margin: 0;
+}
+.q-tiptap__editor .ProseMirror pre {
+  margin: 0.6em 0;
+  padding: 10px 12px;
+  overflow-x: auto;
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: 8px;
+  background: var(--q-tiptap-code-bg);
+  font-size: 0.92em;
+}
+.q-tiptap__editor .ProseMirror pre code {
+  background: none;
+  padding: 0;
+  font-size: 1em;
+}
+.q-tiptap__editor .ProseMirror code {
+  padding: 0.1em 0.35em;
+  border-radius: 4px;
+  background: var(--q-tiptap-code-bg);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 0.92em;
+}
+.q-tiptap__editor .ProseMirror a {
+  color: var(--q-tiptap-primary);
+  text-decoration: underline;
+  cursor: pointer;
+}
+.q-tiptap__editor .ProseMirror hr {
+  margin: 0.8em 0;
+  border: none;
+  border-top: 1px solid var(--q-tiptap-border);
+}
+.q-tiptap__editor .ProseMirror img {
+  display: block;
+  max-width: 100%;
+  height: auto;
+  margin: 0.6em auto;
+  border-radius: 8px;
+  box-shadow: 0 0 0 1px var(--q-tiptap-border);
+}
+.q-tiptap__editor .ProseMirror .ProseMirror-selectednode {
+  outline: 2px solid var(--q-tiptap-primary);
+  border-radius: 4px;
+}
+
+/* — couleur de texte (toolbar + palette popover) — */
+.q-tiptap__tool--color {
+  position: relative;
+}
+.q-tiptap__color-bar {
+  position: absolute;
+  right: 7px;
+  bottom: 4px;
+  left: 7px;
+  height: 3px;
+  border-radius: 2px;
+  pointer-events: none;
+}
+.q-tiptap__tool--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.q-tiptap__tool--color:focus-visible {
+  box-shadow: inset 0 0 0 2px var(--q-tiptap-primary);
+}
+.q-tiptap__palette {
+  position: fixed;
+  z-index: 4000;
+  width: 224px;
+  padding: 10px;
+  background: var(--q-tiptap-bg);
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: 12px;
+  box-shadow: 0 14px 34px rgb(0 0 0 / 0.18);
+}
+.q-tiptap__palette-title {
+  margin: 0 2px 8px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: var(--q-tiptap-muted);
+}
+.q-tiptap__palette-swatches {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 6px;
+}
+.q-tiptap__swatch {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 1;
+  padding: 0;
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: 6px;
+  background: transparent;
+  cursor: pointer;
+  transition: transform 0.1s ease;
+}
+.q-tiptap__swatch:hover {
+  transform: scale(1.12);
+}
+.q-tiptap__swatch--active {
+  box-shadow:
+    0 0 0 2px var(--q-tiptap-bg),
+    0 0 0 4px var(--q-tiptap-primary);
+}
+.q-tiptap__swatch--none {
+  background: #fff;
+  background-image: linear-gradient(
+    to top right,
+    transparent calc(50% - 1px),
+    #e5484d calc(50% - 1px),
+    #e5484d calc(50% + 1px),
+    transparent calc(50% + 1px)
+  );
+}
+.q-tiptap__palette-custom {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--q-tiptap-border);
+  font-size: 12px;
+  color: var(--q-tiptap-muted);
+  cursor: pointer;
+}
+.q-tiptap__palette-custom input[type="color"] {
+  width: 26px;
+  height: 26px;
+  padding: 0;
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: 6px;
+  background: none;
+  cursor: pointer;
+}
+.q-tiptap__palette-custom input[type="color"]::-webkit-color-swatch-wrapper {
+  padding: 2px;
+}
+.q-tiptap__palette-custom input[type="color"]::-webkit-color-swatch {
+  border: none;
+  border-radius: 4px;
+}
+
+/* — mentions (@) : puce dans le document + popup de suggestion — */
+.q-tiptap__editor .ProseMirror span[data-type="mention"] {
+  display: inline-block;
+  padding: 0 5px;
+  margin: 0 1px;
+  border-radius: 6px;
+  background: rgb(25 118 210 / 0.12);
+  background: color-mix(in srgb, var(--q-tiptap-primary) 14%, transparent);
+  color: var(--q-tiptap-primary);
+  font-weight: 500;
+  white-space: nowrap;
+}
+.q-tiptap__mention-list {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 220px;
+  max-height: 240px;
+  overflow-y: auto;
+  padding: 4px;
+  background: var(--q-tiptap-bg);
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: 10px;
+  box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
+}
+.q-tiptap__mention-item {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--q-tiptap-text);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.q-tiptap__mention-item:hover,
+.q-tiptap__mention-item--active {
+  background: rgb(25 118 210 / 0.12);
+  background: color-mix(in srgb, var(--q-tiptap-primary) 14%, transparent);
+  color: var(--q-tiptap-primary);
+}
+.q-tiptap__mention-empty {
+  padding: 8px 10px;
+  font-size: 13px;
+  color: var(--q-tiptap-muted);
+}
+
+/* — bubble menu : barre contextuelle de formatage (sélection) — */
+.q-tiptap__bubble {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  width: max-content;
+  padding: 4px;
+  background: var(--q-tiptap-bg);
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: 12px;
+  box-shadow: 0 10px 28px rgb(0 0 0 / 0.16);
+}
+.q-tiptap__bubble-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 8px;
+  background: transparent;
+  color: var(--q-tiptap-muted);
+  cursor: pointer;
+  transition:
+    background-color 0.15s ease,
+    color 0.15s ease;
+}
+.q-tiptap__bubble-btn svg {
+  width: 15px;
+  height: 15px;
+}
+.q-tiptap__bubble-btn:hover:not(:disabled) {
+  background-color: rgb(0 0 0 / 0.06);
+  color: var(--q-tiptap-text);
+}
+.dark .q-tiptap__bubble-btn:hover:not(:disabled) {
+  background-color: rgb(255 255 255 / 0.08);
+}
+.q-tiptap__bubble-btn--active {
+  background-color: rgb(25 118 210 / 0.14);
+  background-color: color-mix(in srgb, var(--q-tiptap-primary) 14%, transparent);
+  color: var(--q-tiptap-primary);
+}
+.q-tiptap__bubble-btn:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+.q-tiptap__bubble-sep {
+  width: 1px;
+  height: 16px;
+  margin: 0 3px;
+  background: var(--q-tiptap-border);
+}
+.q-tiptap__bubble .q-tiptap__color-bar {
+  right: 6px;
+  bottom: 3px;
+  left: 6px;
+}
+
+/* — drag handle : poignée de déplacement des blocs — */
+.q-tiptap__drag-handle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  /* espace minimum entre l'icône et l'élément dragué (≥ 5% de la largeur de
+     l'éditeur, relatif au conteneur positionné .q-tiptap__body) */
+  margin-right: 5%;
+  color: var(--q-tiptap-muted);
+  cursor: grab;
+  border-radius: 6px;
+  transition: color 0.15s ease, background-color 0.15s ease;
+}
+.q-tiptap__drag-handle:hover {
+  color: var(--q-tiptap-primary);
+  background: rgb(25 118 210 / 0.12);
+  background: color-mix(in srgb, var(--q-tiptap-primary) 14%, transparent);
+}
+.q-tiptap__drag-handle:active {
+  cursor: grabbing;
+}
+.q-tiptap__drag-handle svg {
+  width: 16px;
+  height: 16px;
+}
+
+/* Les popups (mentions, palette, bubble) sont montés HORS de .q-tiptap
+   (Teleport / body via props.mount) → ils n'héritent PAS de --q-tiptap-*.
+   On leur redéfinit leurs variables localement : fond blanc en light
+   (--card), sombre via html.dark. */
+.q-tiptap__mention-list,
+.q-tiptap__palette,
+.q-tiptap__bubble,
+.q-tiptap__table-menu {
+  --q-tiptap-bg: var(--card, #ffffff);
+  --q-tiptap-border: var(--border, rgb(0 0 0 / 0.12));
+  --q-tiptap-text: var(--foreground, #1d1d1d);
+  --q-tiptap-muted: #8b93a1;
+  --q-tiptap-primary: var(--primary, #1976d2);
+}
+.dark .q-tiptap__mention-list,
+.dark .q-tiptap__palette,
+.dark .q-tiptap__bubble,
+.dark .q-tiptap__table-menu {
+  --q-tiptap-bg: #1e1e22;
+  --q-tiptap-border: rgb(255 255 255 / 0.12);
+  --q-tiptap-text: #ececef;
+  --q-tiptap-muted: #9aa2b1;
+  --q-tiptap-primary: var(--primary, #1976d2);
+}
+
+/* — sélecteur de taille de police (toolbar, q-select) — */
+.q-tiptap__size {
+  display: inline-flex;
+  align-items: center;
+  margin: 0 2px;
+}
+.q-tiptap__font-size {
+  width: 100px;
+  font-size: 12px;
+}
+.q-tiptap__font-size .q-select__display {
+  font-size: 12px;
+}
+.q-tiptap__font-size.q-field--dense .q-select__arrow {
+  width: 14px;
+  height: 14px;
+}
+.q-tiptap__font-size .q-select__popup {
+  width: 100px;
+  min-width: 100px;
+}
+.q-tiptap__font-size .q-select__option-label {
+  font-size: 12px;
+}
+
+/* — tableaux : rendu dans le document + popup d'actions — */
+.q-tiptap__editor .ProseMirror .tableWrapper {
+  overflow-x: auto;
+}
+.q-tiptap__editor .ProseMirror table {
+  width: 100%;
+  margin: 0.6em 0;
+  border-collapse: collapse;
+  table-layout: fixed;
+}
+.q-tiptap__editor .ProseMirror th,
+.q-tiptap__editor .ProseMirror td {
+  position: relative;
+  min-width: 60px;
+  padding: 6px 10px;
+  border: 1px solid var(--q-tiptap-border);
+  vertical-align: top;
+}
+.q-tiptap__editor .ProseMirror th {
+  background: var(--q-tiptap-toolbar-bg);
+  font-weight: 600;
+  text-align: left;
+}
+.q-tiptap__editor .ProseMirror .selectedCell::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: rgb(25 118 210 / 0.14);
+  background: color-mix(in srgb, var(--q-tiptap-primary) 14%, transparent);
+  pointer-events: none;
+}
+.q-tiptap__editor .ProseMirror .column-resize-handle {
+  position: absolute;
+  top: 0;
+  right: -3px;
+  bottom: 0;
+  width: 5px;
+  background: var(--q-tiptap-primary);
+  cursor: col-resize;
+}
+.q-tiptap__editor .ProseMirror td p,
+.q-tiptap__editor .ProseMirror th p {
+  margin: 0 0 0.2em;
+}
+.q-tiptap__table-menu {
+  position: fixed;
+  z-index: 4000;
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  width: 212px;
+  padding: 5px;
+  background: var(--q-tiptap-bg);
+  border: 1px solid var(--q-tiptap-border);
+  border-radius: 10px;
+  box-shadow: 0 12px 28px rgb(0 0 0 / 0.18);
+}
+.q-tiptap__table-action {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: 6px 10px;
+  border: 0;
+  border-radius: 7px;
+  background: transparent;
+  color: var(--q-tiptap-text);
+  font-size: 13px;
+  text-align: left;
+  cursor: pointer;
+}
+.q-tiptap__table-action:hover {
+  background: rgb(25 118 210 / 0.12);
+  background: color-mix(in srgb, var(--q-tiptap-primary) 14%, transparent);
+  color: var(--q-tiptap-primary);
+}
+
+/* ===== QBar ===== */
+.q-bar {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 40px;
+  padding: 0 12px;
+  font-size: 13px;
+  line-height: 1.4;
+  color: var(--foreground, #1d1d1d);
+  background: transparent;
+  user-select: none;
+}
+.q-bar--dense {
+  gap: 8px;
+  min-height: 32px;
+  padding: 0 10px;
+  font-size: 12px;
+}
+.q-bar--dark {
+  color: #ececef;
+  background: #1d1d1d;
+}
+.q-bar > * {
+  flex-shrink: 0;
+}
+.q-bar__dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+}
+
+/* ===== QEditorJs (Editor.js, éditeur par blocs) ===== */
+.q-editor-js {
+  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
+  border-radius: var(--q-radius, 12px);
+  background: var(--card, #ffffff);
+  color: var(--foreground, #1d1d1d);
+  overflow: hidden;
+  transition: border-color 0.15s ease;
+}
+.q-editor-js:focus-within {
+  border-color: var(--primary, #1976d2);
+}
+.q-editor-js--disable {
+  opacity: 0.7;
+  pointer-events: none;
+}
+.q-editor-js__holder {
+  padding: 14px 16px;
+}
+.q-editor-js .codex-editor__redactor {
+  padding-bottom: 40px;
+}
+.q-editor-js .ce-block__content,
+.q-editor-js .ce-toolbar__content {
+  max-width: none;
+}
+.q-editor-js .ce-block {
+  margin-bottom: 8px;
+}
+.q-editor-js .ce-paragraph {
+  color: var(--foreground, #1d1d1d);
+  font-size: 14px;
+  line-height: 1.7;
+  outline: none;
+}
+.q-editor-js .ce-paragraph[data-placeholder]:empty::before {
+  color: var(--muted, #8b93a1);
+}
+.q-editor-js .ce-header {
+  color: var(--foreground, #1d1d1d);
+  font-weight: 700;
+  line-height: 1.3;
+}
+.q-editor-js h1.ce-header {
+  font-size: 1.55em;
+}
+.q-editor-js h2.ce-header {
+  font-size: 1.3em;
+}
+.q-editor-js h3.ce-header {
+  font-size: 1.1em;
+}
+.q-editor-js .cdx-list {
+  color: var(--foreground, #1d1d1d);
+  line-height: 1.7;
+}
+.q-editor-js .cdx-checklist {
+  color: var(--foreground, #1d1d1d);
+}
+.q-editor-js .ce-code__textarea {
+  background: color-mix(in srgb, var(--foreground, #1d1d1d) 6%, transparent);
+  color: var(--foreground, #1d1d1d);
+  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+}
+.q-editor-js .cdx-quote {
+  margin: 0;
+  padding: 10px 14px;
+  border-left: 3px solid var(--primary, #1976d2);
+  background: color-mix(in srgb, var(--primary, #1976d2) 8%, transparent);
+  color: var(--foreground, #1d1d1d);
+  border-radius: 0 8px 8px 0;
+}
+.q-editor-js .ce-toolbar__plus,
+.q-editor-js .ce-toolbar__settings-btn {
+  color: var(--foreground, #1d1d1d);
+}
+.q-editor-js .ce-toolbar__plus:hover,
+.q-editor-js .ce-toolbar__settings-btn:hover {
+  color: var(--primary, #1976d2);
+}
+.q-editor-js .ce-inline-toolbar,
+.q-editor-js .ce-conv-toolbar,
+.q-editor-js .ce-toolbox__button,
+.q-editor-js .ce-popover {
+  background: var(--card, #ffffff);
+  color: var(--foreground, #1d1d1d);
+  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
+}
+.q-editor-js .ce-toolbox__button--active,
+.q-editor-js .ce-inline-tool--active {
+  color: var(--primary, #1976d2);
+}
+
+/* NodeView Vue de la table : wrapper + table + tbody (contentDOM) */
+.q-tiptap__editor .ProseMirror .q-tiptap__table-wrapper {
+  position: relative;
+  overflow-x: auto;
+  margin: 0.6em 0;
+}
+.q-tiptap__editor .ProseMirror .q-tiptap__table-wrapper table {
+  margin: 0;
+  width: 100%;
+  table-layout: fixed;
+}
+/* Poignées de redimensionnement des colonnes (NodeView Vue) */
+.q-tiptap__resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 7px;
+  margin-left: -3.5px;
+  cursor: col-resize;
+  touch-action: none;
+}
+.q-tiptap__resize-handle::after {
+  content: "";
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 2.5px;
+  width: 2px;
+  border-radius: 2px;
+  background: transparent;
+  transition: background-color 0.15s ease;
+}
+.q-tiptap__resize-handle:hover::after,
+.q-tiptap__resize-handle:active::after {
+  background: var(--q-tiptap-primary);
+}
+
+/* — dialog image / lien (saisie URL) — */
+.q-tiptap__dialog {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  min-width: 300px;
+  padding: 14px 16px;
+}
+
+/* — task list (NodeView Vue → q-checkbox dnax.ui) — */
+.q-tiptap__editor .ProseMirror ul[data-type="taskList"] {
+  padding-left: 0;
+  list-style: none;
+}
+.q-tiptap__editor .ProseMirror ul[data-type="taskList"] li[data-node-view-wrapper] {
+  display: flex;
+  align-items: flex-start;
+  gap: 9px;
+  list-style: none;
+}
+.q-tiptap__task-check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-top: 2px;
+  cursor: pointer;
+  user-select: none;
+}
+.q-tiptap__task-content {
+  flex: 1;
+  min-width: 0;
+}
+.q-tiptap__task-content--checked {
+  color: var(--q-tiptap-muted);
+  text-decoration: line-through;
+}
+
+/* ===== QSpreadsheet (tableur type Excel) ===== */
+.q-spreadsheet {
+  --q-spreadsheet-border: rgb(0 0 0 / 0.1);
+  --q-spreadsheet-header-bg: rgb(0 0 0 / 0.03);
+  --q-spreadsheet-row-alt: rgb(0 0 0 / 0.015);
+  --q-spreadsheet-range: rgb(25 118 210 / 0.1);
+  --q-spreadsheet-range-brd: var(--primary, #1976d2);
+
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: hidden;
+  border-radius: var(--q-radius, 0);
+  background: #fff;
+  color: var(--foreground, #1d1d1d);
+  font-size: 13px;
+}
+.q-spreadsheet--bordered {
+  border: 1px solid var(--q-spreadsheet-border);
+}
+.q-spreadsheet--flat {
+  box-shadow: none;
+}
+.q-spreadsheet--disable {
+  opacity: 0.6;
+  pointer-events: none;
+  user-select: none;
+}
+.q-spreadsheet--dark,
+.dark .q-spreadsheet {
+  --q-spreadsheet-border: rgb(255 255 255 / 0.12);
+  --q-spreadsheet-header-bg: rgb(255 255 255 / 0.05);
+  --q-spreadsheet-row-alt: rgb(255 255 255 / 0.02);
+  background: var(--card, #1d1d1d);
+  color: var(--foreground, #ececef);
+}
+
+/* ─── Barre d'outils ─── */
+.q-spreadsheet__toolbar {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 6px 8px;
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  background: var(--q-spreadsheet-header-bg);
+}
+.q-spreadsheet__sheet-name {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  margin-right: 6px;
+  padding: 3px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--foreground, #1d1d1d);
+  background: rgb(25 118 210 / 0.08);
+  border-radius: 6px;
+  white-space: nowrap;
+}
+.q-spreadsheet__tb-group {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+  padding: 0 4px;
+  border-left: 1px solid var(--q-spreadsheet-border);
+}
+.q-spreadsheet__tool {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 28px;
+  height: 28px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--foreground, #1d1d1d);
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+}
+.q-spreadsheet__tool:hover:not(:disabled) {
+  background: rgb(25 118 210 / 0.1);
+  color: var(--primary, #1976d2);
+}
+.q-spreadsheet__tool:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.q-spreadsheet__tool .iconify {
+  font-size: 17px;
+}
+.q-spreadsheet--dense .q-spreadsheet__tool {
+  width: 24px;
+  height: 24px;
+}
+
+/* ─── Viewport / table ─── */
+.q-spreadsheet__viewport {
+  position: relative;
+  overflow: auto;
+  outline: none;
+}
+.q-spreadsheet__table {
+  width: max-content;
+  min-width: 100%;
+  border-collapse: separate;
+  border-spacing: 0;
+  table-layout: fixed;
+  font-size: 13px;
+}
+
+/* ─── En-têtes ─── */
+.q-spreadsheet__corner,
+.q-spreadsheet__colhead,
+.q-spreadsheet__rownum {
+  position: sticky;
+  background-color: var(--q-spreadsheet-header-bg);
+  color: var(--foreground, #1d1d1d);
+  font-weight: 600;
+  user-select: none;
+}
+.q-spreadsheet__corner {
+  top: 0;
+  left: 0;
+  z-index: 6;
+  width: 34px;
+  min-width: 34px;
+  height: 28px;
+  border-right: 1px solid var(--q-spreadsheet-border);
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.q-spreadsheet__colhead {
+  top: 0;
+  z-index: 4;
+  height: 28px;
+  padding: 0 10px 0 6px;
+  border-right: 1px solid var(--q-spreadsheet-border);
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  cursor: pointer;
+}
+.q-spreadsheet__colhead--sel {
+  background: rgb(25 118 210 / 0.12);
+}
+.q-spreadsheet__colhead-inner {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+  height: 100%;
+  padding-right: 6px;
+}
+.q-spreadsheet__colhead-letter {
+  font-size: 9.5px;
+  font-weight: 700;
+  line-height: 1.1;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--primary, #1976d2);
+}
+.q-spreadsheet__colhead-label {
+  font-size: 11.5px;
+  line-height: 1.25;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.q-spreadsheet__rownum {
+  left: 0;
+  z-index: 3;
+  width: 34px;
+  min-width: 34px;
+  border-right: 1px solid var(--q-spreadsheet-border);
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  font-size: 11px;
+  font-weight: 500;
+  text-align: center;
+  vertical-align: middle;
+  cursor: pointer;
+}
+.q-spreadsheet__rownum--sel {
+  background: rgb(25 118 210 / 0.12);
+  color: var(--primary, #1976d2);
+}
+.q-spreadsheet__row--sel {
+  background: var(--q-spreadsheet-range);
+}
+.q-spreadsheet__resize {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 5;
+  width: 6px;
+  cursor: col-resize;
+}
+.q-spreadsheet__colhead {
+  position: sticky;
+}
+
+/* ─── Cellules ─── */
+.q-spreadsheet__cell {
+  position: relative;
+  height: var(--q-spreadsheet-row-height, 32px);
+  padding: 2px 8px;
+  border-right: 1px solid var(--q-spreadsheet-border);
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  background: transparent;
+  text-align: left;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  cursor: cell;
+  outline: none;
+}
+.q-spreadsheet__cell-text {
+  display: block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.q-spreadsheet__cell--number {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+}
+.q-spreadsheet__cell--center {
+  text-align: center;
+}
+.q-spreadsheet__cell--right {
+  text-align: right;
+}
+.q-spreadsheet__cell--in-range {
+  background: var(--q-spreadsheet-range);
+}
+.q-spreadsheet__cell--active {
+  background: var(--q-spreadsheet-range);
+  box-shadow: inset 0 0 0 2px var(--q-spreadsheet-range-brd);
+}
+.q-spreadsheet__cell--editing {
+  background: #fff;
+  box-shadow: none;
+}
+.q-spreadsheet__cell--readonly {
+  cursor: default;
+}
+.q-spreadsheet__cell--bool {
+  text-align: center;
+}
+
+/* ─── Case à cocher booléenne ─── */
+.q-spreadsheet__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 17px;
+  height: 17px;
+  padding: 0;
+  border: 1.5px solid var(--q-spreadsheet-border);
+  border-radius: 4px;
+  background: transparent;
+  color: #fff;
+  cursor: pointer;
+  vertical-align: middle;
+}
+.q-spreadsheet__checkbox--on {
+  background: var(--primary, #1976d2);
+  border-color: var(--primary, #1976d2);
+}
+.q-spreadsheet__checkbox:disabled {
+  cursor: default;
+  opacity: 0.6;
+}
+.q-spreadsheet__checkbox .iconify {
+  font-size: 12px;
+}
+
+/* ─── Badges (type select + chip) ─── */
+.q-spreadsheet__badge {
+  display: inline-block;
+  max-width: 100%;
+  padding: 1px 8px;
+  border-radius: 999px;
+  font-size: 11.5px;
+  font-weight: 600;
+  line-height: 1.6;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  vertical-align: middle;
+}
+
+/* ─── Éditeur overlay ─── */
+.q-spreadsheet__editor {
+  position: absolute;
+  z-index: 20;
+  display: flex;
+  align-items: center;
+  border: 2px solid var(--primary, #1976d2);
+  background: #fff;
+  box-shadow: 0 6px 18px rgb(0 0 0 / 0.14);
+}
+.q-spreadsheet--dark .q-spreadsheet__editor,
+.dark .q-spreadsheet__editor {
+  background: var(--card, #1d1d1d);
+}
+.q-spreadsheet__editor-input {
+  width: 100%;
+  min-width: 0;
+  height: 100%;
+  padding: 2px 6px;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--foreground, #1d1d1d);
+  font: inherit;
+}
+.q-spreadsheet__editor--select {
+  flex-direction: column;
+  align-items: stretch;
+  border-color: rgb(25 118 210 / 0.45);
+}
+.q-spreadsheet__editor--select .q-spreadsheet__editor-input {
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+}
+.q-spreadsheet__options {
+  max-height: 180px;
+  overflow: auto;
+  padding: 4px;
+}
+.q-spreadsheet__option {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 5px 8px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--foreground, #1d1d1d);
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+.q-spreadsheet__option:hover,
+.q-spreadsheet__option--active {
+  background: rgb(25 118 210 / 0.1);
+}
+.q-spreadsheet__option-swatch {
+  flex-shrink: 0;
+  width: 12px;
+  height: 12px;
+  border-radius: 3px;
+  border: 1px solid var(--q-spreadsheet-border);
+}
+
+/* ─── Barre de formule (fx) ─── */
+.q-spreadsheet__fx {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  background: var(--q-spreadsheet-header-bg);
+}
+.q-spreadsheet__fx-ref {
+  flex-shrink: 0;
+  min-width: 46px;
+  padding: 2px 6px;
+  text-align: center;
+  font-weight: 700;
+  font-size: 11.5px;
+  color: var(--primary, #1976d2);
+  background: rgb(25 118 210 / 0.08);
+  border: 1px solid var(--q-spreadsheet-border);
+  border-radius: 4px;
+}
+.q-spreadsheet__fx-badge {
+  flex-shrink: 0;
+  font-style: italic;
+  font-weight: 600;
+  font-size: 11px;
+  color: #8b93a1;
+  user-select: none;
+}
+.q-spreadsheet__fx-input {
+  flex: 1;
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 4px;
+  background: transparent;
+  color: var(--foreground, #1d1d1d);
+  font: inherit;
+  font-size: 12.5px;
+  outline: none;
+}
+.q-spreadsheet__fx-input:focus {
+  border-color: var(--primary, #1976d2);
+  background: #fff;
+}
+.dark .q-spreadsheet__fx-input:focus,
+.q-spreadsheet--dark .q-spreadsheet__fx-input:focus {
+  background: var(--card, #1d1d1d);
+}
+.q-spreadsheet__fx-input:disabled {
+  opacity: 0.55;
+}
+
+/* ─── Éditeur formule (textarea monospace) ─── */
+.q-spreadsheet__editor--formula {
+  align-items: stretch;
+  border-color: rgb(25 118 210 / 0.55);
+}
+.q-spreadsheet__editor-area {
+  width: 100%;
+  min-height: 28px;
+  padding: 4px 6px;
+  border: 0;
+  outline: none;
+  background: transparent;
+  color: var(--foreground, #1d1d1d);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-size: 12.5px;
+  line-height: 1.45;
+  resize: none;
+}
+
+/* ─── Erreurs de formule ─── */
+.q-spreadsheet__cell--error {
+  color: #c62828;
+  font-weight: 600;
+}
+.q-spreadsheet--dark .q-spreadsheet__cell--error,
+.dark .q-spreadsheet__cell--error {
+  color: #ff8a80;
+}
+
+/* ─── fond opaque pour le freeze (variables) ─── */
+.q-spreadsheet {
+  --q-spreadsheet-bg: #ffffff;
+}
+.q-spreadsheet--dark,
+.dark .q-spreadsheet {
+  --q-spreadsheet-bg: var(--card, #1d1d1d);
+}
+
+/* ─── Resize lignes (handle bas du numéro) ─── */
+.q-spreadsheet__row-resize {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  height: 5px;
+  cursor: row-resize;
+}
+/* ─── Bouton filtre colonne ─── */
+.q-spreadsheet__fbtn {
+  position: absolute;
+  top: 50%;
+  right: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: #8b93a1;
+  opacity: 0.45;
+  cursor: pointer;
+  transform: translateY(-50%);
+}
+.q-spreadsheet__colhead:hover .q-spreadsheet__fbtn,
+.q-spreadsheet__fbtn--on {
+  opacity: 1;
+}
+.q-spreadsheet__fbtn--on {
+  color: var(--primary, #1976d2);
+  background: rgb(25 118 210 / 0.12);
+}
+.q-spreadsheet__fbtn .iconify {
+  font-size: 13px;
+}
+
+/* ─── Freeze panes ─── */
+.q-spreadsheet__cell--frozen-row,
+.q-spreadsheet__cell--frozen-col {
+  position: sticky;
+  z-index: 2;
+}
+.q-spreadsheet__cell--frozen-both {
+  position: sticky;
+  z-index: 3;
+}
+.q-spreadsheet__colhead--frozen {
+  z-index: 5;
+}
+.q-spreadsheet__rownum--frozen {
+  z-index: 3;
+}
+.q-spreadsheet__rownum--frozen,
+.q-spreadsheet__colhead--frozen,
+.q-spreadsheet__cell--frozen-row,
+.q-spreadsheet__cell--frozen-col,
+.q-spreadsheet__cell--frozen-both {
+  box-shadow: -1px 0 0 0 var(--q-spreadsheet-border), 0 -1px 0 0 var(--q-spreadsheet-border);
+}
+
+/* ─── Poignée autofill + prévisualisation ─── */
+.q-spreadsheet__fill {
+  position: absolute;
+  z-index: 40;
+  width: 8px;
+  height: 8px;
+  border: 1.5px solid #fff;
+  border-radius: 2px;
+  background: var(--primary, #1976d2);
+  cursor: crosshair;
+  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.2);
+}
+.q-spreadsheet__cell--fill {
+  box-shadow: inset 0 0 0 2px var(--primary, #1976d2);
+}
+
+/* ─── Pas de lignes ─── */
+.q-spreadsheet__no-rows {
+  padding: 14px 16px;
+  color: #8b93a1;
+  font-size: 12.5px;
+  text-align: center;
+  border-right: 1px solid var(--q-spreadsheet-border);
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+}
+
+/* ─── Menu contextuel / popup filtre (téléportés body) ─── */
+.q-spreadsheet__ctx,
+.q-spreadsheet__fpop {
+  z-index: 1300;
+  min-width: 214px;
+  max-width: 300px;
+  padding: 5px;
+  color: var(--foreground, #1d1d1d);
+  background: var(--card, #fff);
+  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
+  border-radius: 9px;
+  box-shadow: 0 12px 32px rgb(0 0 0 / 0.16);
+  font-size: 13px;
+  user-select: none;
+}
+.dark .q-spreadsheet__ctx,
+.dark .q-spreadsheet__fpop {
+  color: #ececef;
+  background: #1d1d1d;
+}
+.q-spreadsheet__ctx-title {
+  padding: 4px 8px 6px;
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #8b93a1;
+  border-bottom: 1px solid var(--border, rgb(0 0 0 / 0.08));
+  margin-bottom: 4px;
+}
+.q-spreadsheet__mi {
+  display: flex;
+  align-items: center;
+  gap: 9px;
+  width: 100%;
+  padding: 5px 9px;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+.q-spreadsheet__mi:hover:not(:disabled) {
+  background: rgb(25 118 210 / 0.09);
+}
+.q-spreadsheet__mi--on {
+  color: var(--primary, #1976d2);
+  background: rgb(25 118 210 / 0.12);
+}
+.q-spreadsheet__mi:disabled {
+  opacity: 0.38;
+  cursor: default;
+}
+.q-spreadsheet__mi .iconify {
+  font-size: 15px;
+  flex-shrink: 0;
+}
+.q-spreadsheet__sep {
+  height: 1px;
+  margin: 5px 6px;
+  background: var(--border, rgb(0 0 0 / 0.09));
+}
+.q-spreadsheet__ctx-label {
+  padding: 6px 8px 3px;
+  font-size: 10px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  color: #8b93a1;
+}
+.q-spreadsheet__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  padding: 2px 6px 6px;
+}
+.q-spreadsheet__swatch {
+  width: 17px;
+  height: 17px;
+  padding: 0;
+  border: 1px solid var(--border, rgb(0 0 0 / 0.14));
+  border-radius: 4px;
+  cursor: pointer;
+}
+.q-spreadsheet__swatch--on {
+  outline: 2px solid var(--primary, #1976d2);
+  outline-offset: 1px;
+}
+.q-spreadsheet__swatch:disabled {
+  opacity: 0.45;
+  cursor: default;
+}
+
+/* ─── Popup filtre ─── */
+.q-spreadsheet__fpop {
+  width: 248px;
+}
+.q-spreadsheet__fpop-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 4px 6px 6px;
+}
+.q-spreadsheet__fpop-head .iconify {
+  color: var(--primary, #1976d2);
+  flex-shrink: 0;
+}
+.q-spreadsheet__fpop-name {
+  flex: 1;
+  font-weight: 600;
+  font-size: 12.5px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.q-spreadsheet__fpop-close {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 22px;
+  height: 22px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+}
+.q-spreadsheet__fpop-close:hover {
+  background: rgb(0 0 0 / 0.08);
+}
+.q-spreadsheet__fpop-search {
+  width: 100%;
+  padding: 5px 8px;
+  border: 1px solid var(--border, rgb(0 0 0 / 0.16));
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12.5px;
+  outline: none;
+}
+.q-spreadsheet__fpop-search:focus {
+  border-color: var(--primary, #1976d2);
+}
+.q-spreadsheet__fpop-list {
+  max-height: 240px;
+  overflow: auto;
+  margin-top: 6px;
+}
+.q-spreadsheet__fpop-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+.q-spreadsheet__fpop-row:hover {
+  background: rgb(25 118 210 / 0.08);
+}
+.q-spreadsheet__fpop-check {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 15px;
+  height: 15px;
+  flex-shrink: 0;
+  border: 1px solid var(--border, rgb(0 0 0 / 0.2));
+  border-radius: 4px;
+  color: #fff;
+}
+.q-spreadsheet__fpop-row--on .q-spreadsheet__fpop-check {
+  background: var(--primary, #1976d2);
+  border-color: var(--primary, #1976d2);
+}
+.q-spreadsheet__fpop-check .iconify {
+  font-size: 11px;
+}
+.q-spreadsheet__fpop-label {
+  flex: 1;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.q-spreadsheet__fpop-label--blank {
+  color: #8b93a1;
+  font-style: italic;
+}
+.q-spreadsheet__fpop-count {
+  color: #8b93a1;
+  font-size: 11.5px;
+}
+.q-spreadsheet__fpop-empty {
+  padding: 10px;
+  color: #8b93a1;
+  font-size: 12px;
+  text-align: center;
+}
+.q-spreadsheet__fpop > .q-spreadsheet__mi {
+  margin-top: 4px;
+}
+
+/* ─── place pour le bouton filtre dans l'en-tête ─── */
+.q-spreadsheet__colhead-inner {
+  padding-right: 26px;
+}
+
+/* ─── Suggestions de fonctions (formule) ─── */
+.q-spreadsheet__editor--formula {
+  flex-direction: column;
+  align-items: stretch;
+}
+.q-spreadsheet__fnsug {
+  display: flex;
+  flex-direction: column;
+  max-height: 208px;
+  overflow: auto;
+  padding: 3px;
+  border-top: 1px solid var(--q-spreadsheet-border);
+  background: var(--card, #fff);
+}
+.q-spreadsheet--dark .q-spreadsheet__fnsug,
+.dark .q-spreadsheet__fnsug {
+  background: var(--card, #1d1d1d);
+}
+.q-spreadsheet__fnsug-item {
+  display: flex;
+  align-items: baseline;
+  gap: 8px;
+  width: 100%;
+  padding: 4px 8px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12.5px;
+  text-align: left;
+  cursor: pointer;
+}
+.q-spreadsheet__fnsug-item code {
+  color: var(--primary, #1976d2);
+  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  font-weight: 700;
+}
+.q-spreadsheet__fnsug-item span {
+  color: #8b93a1;
+  font-size: 11.5px;
+}
+.q-spreadsheet__fnsug-item:hover,
+.q-spreadsheet__fnsug-item--on {
+  background: rgb(25 118 210 / 0.1);
+}
+.q-spreadsheet__fnsug--fx {
+  position: fixed;
+  z-index: 1320;
+  border: 1px solid var(--border, rgb(0 0 0 / 0.12));
+  border-radius: 8px;
+  box-shadow: 0 10px 26px rgb(0 0 0 / 0.16);
+}
+
+/* ─── Virtualisation : rangées d'espacement ─── */
+.q-spreadsheet__vpad td {
+  padding: 0 !important;
+  border: none !important;
+}
+
+/* ─── Onglets de feuilles (classeur multi) ─── */
+.q-spreadsheet__sheets {
+  display: flex;
+  align-items: flex-end;
+  gap: 2px;
+  padding: 6px 8px 0;
+  overflow-x: auto;
+  background: var(--q-spreadsheet-header-bg);
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  user-select: none;
+}
+.q-spreadsheet__sheet-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  max-width: 180px;
+  padding: 5px 10px 6px;
+  border: 1px solid transparent;
+  border-bottom: 0;
+  border-radius: 7px 7px 0 0;
+  background: transparent;
+  color: var(--foreground, #1d1d1d);
+  font-size: 12px;
+  cursor: pointer;
+  white-space: nowrap;
+}
+.q-spreadsheet__sheet-tab:hover {
+  background: rgb(0 0 0 / 0.05);
+}
+.dark .q-spreadsheet__sheet-tab:hover,
+.q-spreadsheet--dark .q-spreadsheet__sheet-tab:hover {
+  background: rgb(255 255 255 / 0.08);
+}
+.q-spreadsheet__sheet-tab--on {
+  background: var(--card, #fff);
+  border-color: var(--q-spreadsheet-border);
+  color: var(--primary, #1976d2);
+  font-weight: 600;
+}
+.dark .q-spreadsheet__sheet-tab--on,
+.q-spreadsheet--dark .q-spreadsheet__sheet-tab--on {
+  background: var(--card, #1d1d1d);
+}
+.q-spreadsheet__sheet-name-label {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.q-spreadsheet__sheet-rename {
+  width: 110px;
+  padding: 2px 4px;
+  border: 1px solid var(--primary, #1976d2);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+  outline: none;
+}
+.q-spreadsheet__sheet-close,
+.q-spreadsheet__sheet-add {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 18px;
+  height: 18px;
+  padding: 0;
+  border: 0;
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  cursor: pointer;
+  flex-shrink: 0;
+}
+.q-spreadsheet__sheet-close:hover {
+  color: #c62828;
+  background: rgb(198 40 40 / 0.12);
+}
+.q-spreadsheet__sheet-close .iconify {
+  font-size: 12px;
+}
+.q-spreadsheet__sheet-add {
+  margin: 0 2px 4px;
+  color: #8b93a1;
+  font-size: 15px;
+}
+.q-spreadsheet__sheet-add:hover {
+  color: var(--primary, #1976d2);
+  background: rgb(25 118 210 / 0.1);
+}
+
+/* ─── Find & Replace ─── */
+.q-spreadsheet__find {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 8px;
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  background: rgb(255 251 235);
+}
+.dark .q-spreadsheet__find,
+.q-spreadsheet--dark .q-spreadsheet__find {
+  background: rgb(255 180 0 / 0.08);
+}
+.q-spreadsheet__find-icon {
+  flex-shrink: 0;
+  color: #8b93a1;
+  font-size: 15px;
+}
+.q-spreadsheet__find-input {
+  min-width: 0;
+  padding: 4px 8px;
+  border: 1px solid var(--q-spreadsheet-border);
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12.5px;
+  outline: none;
+}
+.q-spreadsheet__find-input:focus {
+  border-color: var(--primary, #1976d2);
+}
+.q-spreadsheet__find-input--repl {
+  flex: 1;
+}
+.q-spreadsheet__find-count {
+  font-size: 11.5px;
+  color: #8b93a1;
+  white-space: nowrap;
+}
+.q-spreadsheet__find-close {
+  margin-left: 2px;
+}
+.q-spreadsheet__cell--find {
+  background-color: rgb(255 235 59 / 0.35) !important;
+}
+.q-spreadsheet__cell--find-cur {
+  background-color: rgb(255 214 0 / 0.45) !important;
+  box-shadow: inset 0 0 0 2px #f5b301 !important;
+}
+
+/* ─── Wrap text / hauteur auto / fusion / lignes masquées ─── */
+.q-spreadsheet__cell-text--wrap {
+  white-space: pre-wrap;
+  overflow: visible;
+  text-overflow: clip;
+  word-break: break-word;
+  line-height: 1.35;
+}
+.q-spreadsheet__cell--merged {
+  overflow: hidden;
+}
+.q-spreadsheet__cell--invalid {
+  box-shadow: inset 0 0 0 2px #ef4444 !important;
+}
+
+/* ─── Toolbar actif ─── */
+.q-spreadsheet__tool--on {
+  color: var(--primary, #1976d2);
+  background: rgb(25 118 210 / 0.14);
+}
+
+/* ─── Panneau Conditional formatting ─── */
+.q-spreadsheet__cf {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 6px;
+  padding: 5px 8px;
+  border-bottom: 1px solid var(--q-spreadsheet-border);
+  background: rgb(239 246 255);
+  font-size: 12.5px;
+}
+.dark .q-spreadsheet__cf,
+.q-spreadsheet--dark .q-spreadsheet__cf {
+  background: rgb(30 58 138 / 0.25);
+}
+.q-spreadsheet__cf-title {
+  font-weight: 600;
+  color: var(--primary, #1976d2);
+}
+.q-spreadsheet__cf-kind {
+  padding: 4px 6px;
+  border: 1px solid var(--q-spreadsheet-border);
+  border-radius: 6px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 12px;
+}
+.q-spreadsheet__swatches--mini {
+  gap: 3px;
+  padding: 2px;
+}
+.q-spreadsheet__swatches--mini .q-spreadsheet__swatch {
+  width: 14px;
+  height: 14px;
+}
+.q-spreadsheet__cf-apply {
+  padding: 3px 10px !important;
+}
+.q-spreadsheet__cf-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  width: 100%;
+}
+.q-spreadsheet__cf-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 6px;
+  border: 1px solid var(--q-spreadsheet-border);
+  border-radius: 999px;
+  font-size: 11px;
+}
+.q-spreadsheet__cf-chip .q-spreadsheet__sheet-close {
+  width: 14px;
+  height: 14px;
+}
+.q-spreadsheet__cell--hide,
+.q-spreadsheet__colhead--hide {
+  display: none;
+}
+
+/* ─── Barre d'état + zoom ─── */
+.q-spreadsheet__status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-height: 24px;
+  padding: 2px 8px;
+  border-top: 1px solid var(--q-spreadsheet-border);
+  background: var(--q-spreadsheet-header-bg);
+  font-size: 11.5px;
+  color: #8b93a1;
+  user-select: none;
+}
+.q-spreadsheet__status-cell {
+  display: inline-flex;
+  align-items: center;
+  gap: 5px;
+  font-weight: 600;
+  color: var(--foreground, #1d1d1d);
+}
+.q-spreadsheet__status-item {
+  color: #8b93a1;
+}
+.q-spreadsheet__status-stats {
+  font-variant-numeric: tabular-nums;
+  color: var(--primary, #1976d2);
+}
+.q-spreadsheet__status-chip {
+  padding: 1px 7px;
+  border-radius: 999px;
+  background: rgb(25 118 210 / 0.12);
+  color: var(--primary, #1976d2);
+}
+.q-spreadsheet__status-spacer {
+  flex: 1;
+}
+.q-spreadsheet__status-zoom {
+  display: inline-flex;
+  align-items: center;
+  gap: 2px;
+}
+.q-spreadsheet__status-zoom .q-spreadsheet__tool {
+  width: 22px;
+  height: 20px;
+}
+.q-spreadsheet__status-zoom-pct {
+  min-width: 42px;
+  padding: 2px 4px;
+  border: 1px solid var(--q-spreadsheet-border);
+  border-radius: 4px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 11px;
+  text-align: center;
+  cursor: pointer;
+}
+.q-spreadsheet__status-zoom-pct:hover {
+  color: var(--primary, #1976d2);
+  border-color: var(--primary, #1976d2);
+}
+
+/* ─── Scroll animé (smooth) pour la virtualisation ─── */
+.q-spreadsheet__viewport {
+  scroll-behavior: smooth;
+}
+.q-spreadsheet__viewport:focus {
+  outline: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .q-spreadsheet__viewport {
+    scroll-behavior: auto;
+  }
+}
+
+/* ─── Onglets de feuilles en bas (Excel) ─── */
+.q-spreadsheet__sheets--bottom {
+  align-items: flex-start;
+  padding: 0 8px 6px;
+  border-bottom: 0;
+  border-top: 1px solid var(--q-spreadsheet-border);
+}
+.q-spreadsheet__sheets--bottom .q-spreadsheet__sheet-tab {
+  border-top: 0;
+  border-bottom: 1px solid transparent;
+  border-radius: 0 0 7px 7px;
+}
+.q-spreadsheet__sheets--bottom .q-spreadsheet__sheet-tab--on {
+  border-color: var(--q-spreadsheet-border);
+}
+.q-spreadsheet__sheets--bottom .q-spreadsheet__sheet-add {
+  margin: 4px 2px 0;
+}
+
+/* ─── Drag & drop réordonner lignes / colonnes ─── */
+.q-spreadsheet__rownum,
+.q-spreadsheet__colhead {
+  cursor: grab;
+}
+.q-spreadsheet__rownum--drop,
+.q-spreadsheet__colhead--drop {
+  background: rgb(25 118 210 / 0.22) !important;
+}
+
+/* ===== QInteract (drag & resize de widgets) ===== */
+.q-interact {
+  --q-interact-border: rgb(0 0 0 / 0.1);
+  --q-interact-line: rgb(25 118 210 / 0.14);
+  --q-interact-accent: var(--primary, #1976d2);
+
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+  border: 1px solid var(--q-interact-border);
+  border-radius: 10px;
+  background: rgb(0 0 0 / 0.015);
+  user-select: none;
+}
+.q-interact--grid {
+  background-image:
+    linear-gradient(var(--q-interact-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--q-interact-line) 1px, transparent 1px);
+  background-position: -1px -1px;
+}
+.q-interact--static {
+  cursor: default;
+}
+.q-interact__item {
+  position: absolute;
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--q-interact-border);
+  border-radius: 8px;
+  background: var(--card, #fff);
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.08);
+  cursor: grab;
+  touch-action: none;
+}
+.q-interact__item--active {
+  border-color: var(--q-interact-accent);
+  box-shadow: 0 0 0 1.5px var(--q-interact-accent), 0 6px 18px rgb(0 0 0 / 0.12);
+  z-index: 10;
+}
+.q-interact__item--dragging,
+.q-interact__item--resizing {
+  z-index: 11;
+  cursor: grabbing;
+  box-shadow: 0 12px 26px rgb(0 0 0 / 0.18);
+}
+.q-interact__handle {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 5px 10px;
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--foreground, #1d1d1d);
+  border-bottom: 1px solid var(--q-interact-border);
+  background: rgb(0 0 0 / 0.03);
+  cursor: grab;
+}
+.q-interact--dense .q-interact__handle {
+  padding: 3px 8px;
+  font-size: 11px;
+}
+.q-interact__grip {
+  display: inline-flex;
+  color: #8b93a1;
+}
+.q-interact__content {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+.q-interact__default {
+  padding: 12px;
+  font-size: 13px;
+}
+.q-interact__resize {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  z-index: 2;
+  width: 18px;
+  height: 18px;
+  cursor: nwse-resize;
+}
+.q-interact__resize::after {
+  content: "";
+  position: absolute;
+  right: 3px;
+  bottom: 3px;
+  width: 8px;
+  height: 8px;
+  border-right: 2px solid var(--q-interact-accent);
+  border-bottom: 2px solid var(--q-interact-accent);
+  opacity: 0.55;
+}
+.q-interact__item:hover .q-interact__resize::after {
+  opacity: 1;
+}
+.q-interact--dark {
+  --q-interact-border: rgb(255 255 255 / 0.12);
+  background: rgb(255 255 255 / 0.02);
+}
+.q-interact--dark .q-interact__item {
+  background: var(--card, #1d1d1d);
+  color: #ececef;
+}
+.q-interact--dark .q-interact__handle {
+  background: rgb(255 255 255 / 0.05);
+}
+
+/* ===== QBoard (dashboard type Power BI) ===== */
+.q-board {
+  --q-board-line: rgb(25 118 210 / 0.12);
+  --q-board-label: rgb(139 147 161 / 0.6);
+
+  position: relative;
+  width: 100%;
+  border: 1px solid var(--q-interact-border, rgb(0 0 0 / 0.1));
+  border-radius: 10px;
+  background: rgb(0 0 0 / 0.02);
+  overflow: hidden;
+}
+.q-board__grid {
+  position: absolute;
+  inset: 0;
+  background-image:
+    linear-gradient(var(--q-board-line) 1px, transparent 1px),
+    linear-gradient(90deg, var(--q-board-line) 1px, transparent 1px);
+  background-position: -1px -1px;
+  pointer-events: none;
+}
+.q-board__cell-label {
+  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  color: var(--q-board-label);
+  user-select: none;
+}
+.q-board__cell-label--col {
+  top: 2px;
+}
+.q-board__cell-label--row {
+  left: 3px;
+}
+.q-board__interact {
+  position: absolute !important;
+  inset: 0 !important;
+  width: 100% !important;
+  height: 100% !important;
+  border: 0 !important;
+  border-radius: 0 !important;
+  background: transparent !important;
+  box-shadow: none !important;
+}
+.q-board--dark {
+  --q-board-line: rgb(255 255 255 / 0.1);
+  background: rgb(255 255 255 / 0.02);
+}
+.q-board--dense .q-board__cell-label {
+  font-size: 9px;
+}