/* COPIE du systeme de design d'AvoCare Desktop — ne pas modifier ici. Source : AvoCareDesktop, branche trunk, commit 5e5b2fee63d63dd3a30bbb6c32a8331ef22590f5 (2026-09-26) Fichier : static/ds-tokens.css (blob 0cec73ea2b1dc6911615e72e373a10476f8175e6), recopie a l'identique Document : docs/pilot-v8/09_UI_DESIGN_SYSTEM.md du meme commit Pour suivre une evolution du Desktop : recopier le fichier entier et changer ces trois lignes (tests/test_socle.py verifie que l'entete est la et que le corps n'a pas ete retouche). */ /* =========================================================================== AvoCare — jetons de design (phase H) =========================================================================== SOURCE UNIQUE de toutes les valeurs visuelles. Aucun composant ne redefinit une couleur semantique, une hauteur de controle ou un rayon : il lit un jeton d'ici. POURQUOI CE FICHIER EXISTE -------------------------- L'inventaire de la phase H a compte 769 couleurs ecrites en dur pour 108 valeurs distinctes, 25 rayons pour 4 jetons declares, 27 hauteurs de controle et 30 largeurs maximales sans aucun jeton correspondant. Une part de ces valeurs recopiait litteralement un jeton existant — `#5a6478` EST `--ds-text-2` — l'autre introduisait une echelle de gris concurrente. Surtout, le depot portait DEUX familles de variables aux valeurs identiques : `--gold` et `--ds-gold` valent tous deux `#c9a227`, `--border` et `--ds-border` tous deux `#e5e8ee`. 368 usages de la premiere famille, 172 de la seconde. Les reecrire toutes aurait ete un chantier a risque pour un gain nul : la seconde famille est donc devenue un ALIAS de la premiere. Une seule valeur a changer, deux noms pour la lire. ORDRE DE CHARGEMENT ------------------- ds-tokens.css -> ds.css -> ds-components.css Les jetons d'abord, puisque tout le reste en depend ; les composants en dernier, pour qu'ils puissent corriger l'existant sans lutte de specificite. VALEURS VALIDEES (2026-09-22) ----------------------------- Les valeurs reprennent le systeme de design valide par le proprietaire (AvoCare365/design-system/jetons/avocare-jetons.css) : Inter et IBM Plex Sans Arabic, or en accent discret, densite confortable par defaut. Les NOMS ne changent pas (document 09, §5.1) ; les jetons que le Desktop n'avait pas s'ajoutent sous le nom du systeme valide. La barre laterale et la barre du haut ont pris les dimensions du catalogue au lot de la coquille. =========================================================================== */ :root { /* ── Marque ──────────────────────────────────────────────────────────── Le bleu nuit et l'or d'AvoCare. Ils ne sont pas negociables et ne changent pas d'un ecran a l'autre. */ --ds-navy: #0c1222; --ds-navy-600: #162032; --ds-navy-500: #1e2d47; --ds-navy-400: #2a3f5f; --ds-navy-300: #3d5a94; --ds-gold: #c9a227; --ds-gold-light: #e8cc6e; --ds-gold-dark: #a68619; --ds-gold-dim: rgba(201, 162, 39, 0.12); /* Or en accent DISCRET : un texte en or passe par --ds-gold-text (lisible sur fond clair), jamais par --ds-gold, trop pale pour un texte. */ --ds-gold-text: #7d6410; /* Element actif (carte, ligne) : fond creme, bordure or adoucie. */ --ds-cream: #fbf6e6; --ds-cream-border: #e6d291; /* ── Fonds et surfaces ───────────────────────────────────────────────── Trois niveaux suffisent. Au-dela, on empile des cartes dans des cartes, et la hierarchie cesse d'etre lisible. */ /* Fond de l'application. RECOPIE dans AvoCareWebPage.FOND_PAGE (app/main_window.py) pour que la fenetre Qt peigne la meme couleur avant l'affichage du document : les deux doivent bouger ensemble. */ /* VARIANTE A (decision du proprietaire : les listes sont sur A). Le fond descend d'un cran, a la valeur que --ds-surface-3 porte deja, pour que les cartes blanches des listes se detachent sans qu'aucune carte ne change de couleur. C'est aussi le PLANCHER : --ds-text-3 rend 4,57:1 sur #eae8e2 et 4,16:1 un cran plus bas — le fond de page ne peut pas descendre plus. */ --ds-bg: #eae8e2; /* fond de l'application : gris chaud soutenu */ /* --ds-surface etait l'alias de --ds-bg. Il ne l'est plus : ses usages sont des VOILES poses SUR une carte blanche (survol de ligne, barre d'onglets, fond de tableau) — les suivre jusqu'ici les rendrait sombres sur du blanc. Il garde donc l'ancienne valeur du fond. */ --ds-surface: #f7f6f3; /* voile clair pose sur une carte */ --ds-card: #ffffff; /* surface principale : carte, tableau, panneau */ --ds-surface-2: #f4f3ef; /* surface secondaire : en-tete de tableau, zone de filtres */ --ds-surface-3: #eae8e2; /* surface enfoncee : piste de progression, champ desactive */ /* JETON NEUF, et la raison de l'ajouter — a lire avant de le supprimer. La variante B pose la bande d'entete de section sur --ds-surface-3. Sous la variante A, --ds-bg VAUT --ds-surface-3 : la bande aurait exactement la couleur de la page, et comme --ds-border ne rend que 1,028 contre #eae8e2, le haut de la carte se dissolvait dans le fond. Aucune paire de jetons existants ne repare cela : au-dessus du plancher #eae8e2 il ne reste que #f4f3ef, #f7f6f3 et le blanc, et #f7f6f3 contre #f4f3ef ne rend que 1,027 — une bande invisible. Il faut donc UNE valeur, entre le corps de la carte et la page : 1,046 contre --ds-surface-2, 1,055 contre --ds-bg, et --ds-text-3 y rend 4,82:1. Elle sert a la bande de section, a rien d'autre — d'ou un nom de role et non un « --ds-surface-4 » qu'on empilerait. */ --ds-section-h-bg: #efeee9; /* bande d'entete d'une section (.ds-f360-h) */ /* ── Bordures ────────────────────────────────────────────────────────── Legeres. Une bordure qui se voit trop remplace une hierarchie qu'on n'a pas su construire autrement. */ --ds-border: #e7e5df; --ds-border-light: #f0eee9; --ds-border-strong: #cfccc3; /* Pouce des barres de defilement (lot D15, point 13). Le prompt demandait --ds-border : mesure, il rend 1,03:1 sur --ds-bg et 1,26:1 sur une carte — une barre invisible, loin du seuil de 3:1 d'un composant. --ds-border-strong ne rend que 1,31:1. D'ou ce gris chaud, de la famille des bordures : 3,13:1 sur --ds-bg (le fond le plus sombre), 3,83:1 sur --ds-card, 3,30 a 3,55:1 sur les voiles. Il fonce au survol : 5,44:1 sur --ds-bg, 6,66:1 sur --ds-card. La piste reste transparente. */ --ds-scroll-thumb: #85827b; --ds-scroll-thumb-hover: #5f5c56; /* ── Texte ───────────────────────────────────────────────────────────── Trois niveaux, et pas un de plus. Le quatrieme gris qu'on ajoute est toujours celui qui casse le contraste. */ --ds-text: #1a1f2e; /* principal */ --ds-text-2: #5a6478; /* secondaire */ --ds-text-3: #5f687a; /* discret — 4.5:1 atteint sur tous les fonds, --ds-surface-3 comprise (l'ancienne valeur #767f92 ne tenait le seuil que sur --ds-card) */ --ds-text-inverse: #ffffff; /* ── Accent ──────────────────────────────────────────────────────────── UNE couleur d'accent, avec ses etats. Le bleu nuit porte l'action principale ; l'or reste la couleur de marque et de mise en valeur, pas celle des boutons — un ecran ou tout est dore n'a plus de hierarchie. */ --ds-accent: #1e3a6e; --ds-accent-hover: #162d57; --ds-accent-active: #101f3d; --ds-accent-dim: rgba(30, 58, 110, 0.08); /* Bouton principal : marine, avec l'icone « + » en or clair. L'accent bleu reste celui des liens, du focus et de la selection. */ --ds-primary: var(--ds-navy-600); --ds-primary-hover: var(--ds-navy-500); --ds-primary-fg: #ffffff; --ds-btn-icon: var(--ds-gold-light); /* ── Couleurs semantiques ────────────────────────────────────────────── Reservees au sens : succes, attention, erreur, information. Jamais employees pour decorer. */ --ds-success: #0d7c5f; --ds-success-bg: #ecfdf5; --ds-success-border: #a7f3d0; --ds-warn: #92400e; --ds-warn-bg: #fffbeb; --ds-warn-border: #fde68a; --ds-danger: #c53030; --ds-danger-hover:#9b2c2c; --ds-danger-bg: #fef2f2; --ds-danger-border:#fecaca; --ds-info: #1e3a6e; --ds-info-bg: #eff6ff; --ds-info-border: #bfdbfe; /* Ton de CATEGORIE, distinct des quatre tons semantiques. Il ne signale ni succes, ni erreur : il distingue une nature — personne morale, huissier. Le confondre avec un ton semantique ferait lire un avertissement la ou il n'y en a pas. */ --ds-category: #6d28d9; --ds-category-bg: #f5f0ff; --ds-category-border: #ddd0fb; /* Ton NEUTRE : termine, sans objet. Ni succes, ni alerte. */ --ds-neutral: #5a6478; --ds-neutral-bg: #f4f3ef; /* Point colore des pastilles d'etat. Plus sature que le texte : c'est lui qui porte le ton d'un coup d'oeil, le libelle portant le sens. */ --ds-success-dot: #10a37f; --ds-warn-dot: #d98a0b; --ds-danger-dot: #e04848; --ds-info-dot: #3b6fd1; --ds-category-dot: #8b5cf6; --ds-neutral-dot: #9aa1af; /* Synchronisation : la pastille de chacun des six etats de la barre d'etat (lot O6, decision 13 du document 32). Les quatre d'AvoCare 365 gardent leur ton (reussie, en cours, echouee ; hors ligne en neutre) ; les deux du Desktop prennent les leurs : partielle en alerte, jamais lancee en categorie (rien n'est encore relie au greffe). Un alias par etat : une couleur a changer, un seul endroit. */ --ds-sync-jamais: var(--ds-category-dot); --ds-sync-en-cours: var(--ds-info-dot); --ds-sync-reussie: var(--ds-success-dot); --ds-sync-partielle: var(--ds-warn-dot); --ds-sync-echouee: var(--ds-danger-dot); --ds-sync-hors-ligne: var(--ds-neutral-dot); /* Tuiles d'icone des cartes de chiffres : cinq teintes douces. */ --ds-tile-gold-bg: #fbf1cf; --ds-tile-gold-fg: #7d6410; --ds-tile-blue-bg: #e8effc; --ds-tile-blue-fg: #2c58a8; --ds-tile-green-bg: #e6f6ef; --ds-tile-green-fg: #0d7c5f; --ds-tile-rose-bg: #fdecef; --ds-tile-rose-fg: #b83256; --ds-tile-violet-bg: #f1ecfd; --ds-tile-violet-fg: #6d28d9; /* ── Graphiques (tableau de bord, lot 5) ─────────────────────────────── Or et marine, repris des jetons de marque : aucune couleur propre aux graphiques. static/ds-tableau-de-bord.js les lit au moment du dessin, la legende HTML les lit par les memes noms : pastille et barre ont toujours la meme teinte. Les series sont ordonnees : marine, or, puis leurs nuances, puis le gris des « autres ». */ --ds-chart-1: var(--ds-navy-500); --ds-chart-2: var(--ds-gold); --ds-chart-3: var(--ds-navy-300); --ds-chart-4: var(--ds-gold-light); --ds-chart-5: var(--ds-border-strong); --ds-chart-facture: var(--ds-gold-light); --ds-chart-encaisse: var(--ds-navy-500); --ds-chart-grid: var(--ds-border-light); --ds-chart-texte: var(--ds-text-3); /* ── Focus et voile ──────────────────────────────────────────────────── Le focus doit se voir. C'est le seul repere d'un utilisateur au clavier, et le supprimer pour des raisons esthetiques rend l'application inutilisable sans souris. */ --ds-focus: #1e3a6e; --ds-focus-ring: 0 0 0 3px rgba(30, 58, 110, 0.28); --ds-focus-ring-danger: 0 0 0 3px rgba(197, 48, 48, 0.28); --ds-overlay: rgba(12, 18, 34, 0.45); /* ── Espacements ─────────────────────────────────────────────────────── Echelle de 4 px. Toute valeur hors echelle est un accident. */ --ds-space-1: 4px; --ds-space-2: 8px; --ds-space-3: 12px; --ds-space-4: 16px; --ds-space-5: 20px; --ds-space-6: 24px; --ds-space-7: 32px; --ds-space-8: 40px; /* ── Typographie ─────────────────────────────────────────────────────── Les tailles sont en rem pour respecter le reglage systeme, et l'echelle est courte : sept niveaux couvrent l'application entiere. */ /* La police latine passe en premier dans les deux langues : chiffres, numeros de dossier et montants ont le meme dessin en francais et en arabe ; le texte arabe tombe de lui-meme sur IBM Plex Sans Arabic, dont la plage unicode ne couvre que l'arabe (static/fonts/fonts.css). */ --ds-font: "Inter", "IBM Plex Sans Arabic", "Segoe UI", system-ui, -apple-system, sans-serif; --ds-font-ar: "Inter", "IBM Plex Sans Arabic", "Segoe UI", system-ui, sans-serif; --ds-font-mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace; /* Citations seulement. Aucune serif n'est embarquee : le repli systeme suffit tant qu'aucun ecran n'en affiche. */ --ds-font-quote: Georgia, "Times New Roman", serif; --ds-quote-style: italic; --ds-text-xs: 0.6875rem; /* 11 px : micro-entete de tableau, mention */ --ds-text-sm: 0.75rem; /* 12 px : precision, legende */ --ds-text-base: 0.875rem; /* 14 px : corps, champs, cellules */ --ds-text-md: 1rem; /* 16 px : titre de carte */ --ds-text-lg: 1.125rem; /* 18 px : titre de section */ --ds-text-xl: 1.875rem; /* 30 px : titre de page */ --ds-text-kpi: 1.75rem; /* 28 px : grand chiffre */ /* Chiffre d'une carte compacte (bandeau de chiffres au-dessus d'une liste) : les cartes de chiffres restent petites, la liste passe d'abord. */ --ds-text-kpi-sm: 1.25rem; /* 20 px */ /* Capitales espacees (micro-entetes) : latin seulement, 0 en arabe. */ --ds-tracking-caps: 0.09em; --ds-weight-normal: 400; --ds-weight-medium: 500; --ds-weight-semi: 600; --ds-weight-bold: 700; --ds-leading-tight: 1.25; --ds-leading-normal: 1.5; /* ── Dimensions de controle ──────────────────────────────────────────── Deux hauteurs, pas vingt-sept. La compacte sert aux barres d'outils et aux tableaux denses ; la standard, a tout le reste. La standard suit la densite (voir DENSITE plus bas) : 40 px en confortable, 32 en compacte. */ --ds-control-h: 40px; --ds-control-h-compact: 32px; --ds-control-h-large: 40px; --ds-icon-btn: 34px; --ds-icon-btn-compact: 28px; --ds-icon-size: 0.85rem; /* ── Rayons ────────────────────────────────────────────────────────────*/ --ds-radius-sm: 6px; --ds-radius: 10px; --ds-radius-lg: 14px; --ds-radius-xl: 20px; --ds-radius-pill: 999px; /* ── Ombres ──────────────────────────────────────────────────────────── Discretes. Une ombre forte partout aplatit la hierarchie au lieu de la creer. */ --ds-shadow-sm: 0 1px 2px rgba(12, 18, 34, 0.04); --ds-shadow: 0 2px 8px rgba(12, 18, 34, 0.06); --ds-shadow-lg: 0 8px 24px rgba(12, 18, 34, 0.10); --ds-shadow-xl: 0 20px 40px rgba(12, 18, 34, 0.14); /* ── Structure ─────────────────────────────────────────────────────────*/ /* Coquille (lot 3) : 248 et 60, les valeurs du catalogue AvoCare 365. Jusqu'a 1024 points de large, la barre revient a 200, sa valeur d'avant, pour laisser sa largeur aux listes (aucune ne doit defiler lateralement). */ --ds-sidebar-w: 248px; --ds-sidebar-w-etroit: 200px; --ds-sidebar-w-collapsed: 64px; --ds-topbar-h: 60px; --ds-actionbar-h: 48px; --ds-page-pad-x: var(--ds-space-6); --ds-page-pad-y: var(--ds-space-5); /* Largeur maximale des formulaires NARRATIFS uniquement. Les ecrans de donnees — tableaux, agenda, dossiers — n'ont pas de largeur maximale : l'espace disponible sur un ecran de poste doit servir. */ --ds-form-max-w: 760px; --ds-prose-max-w: 68ch; /* ── Mouvement ───────────────────────────────────────────────────────── AUCUNE duree ne s'ecrit ailleurs qu'ici (tests/test_mouvement_jetons.py) : une valeur a changer, et le mouvement reduit la ramene partout a 1 ms. Toujours en millisecondes : les scripts lisent ces jetons par parseFloat (l'animation de SortableJS, le fondu d'un message). Decision 15 du proprietaire (2026-09-24, document 32, §1.3 c) : la modale apparait en 120 ms par l'opacite seule ; le tiroir, l'assistant et leur voile en 200 ms, ensemble. Avant : voile 160 ms, tiroir 280 ms, modale 250 ms avec deplacement et echelle — un mouvement qui touchait tout l'ecran pendant pres d'un tiers de seconde. Les trois derniers crans ne sont pas des transitions mais des cycles (indicateurs de chargement, battements, reflet d'attente) ; ils suivent la meme regle. */ --ds-duration-fast: 120ms; /* modale, apparitions, petits etats */ --ds-duration: 160ms; /* survols, couleurs, bascules */ --ds-duration-panel: 200ms; /* tiroir, assistant, voile */ --ds-duration-slow: 280ms; /* barres de progression, message qui s'efface */ --ds-duration-spin: 1000ms; /* un tour d'indicateur de chargement */ --ds-duration-loop: 1200ms; /* battement, points de saisie, barre d'attente */ --ds-duration-long: 1400ms; /* reflet d'attente, ligne mise en avant */ --ds-ease: cubic-bezier(0.4, 0, 0.2, 1); --ds-transition: var(--ds-duration) var(--ds-ease); --ds-transition-fast: var(--ds-duration-fast) var(--ds-ease); --ds-transition-panel: var(--ds-duration-panel) var(--ds-ease); --ds-transition-slow: var(--ds-duration-slow) var(--ds-ease); /* ── Couches ───────────────────────────────────────────────────────────*/ --ds-z-sidebar: 40; --ds-z-topbar: 45; --ds-z-overlay: 9998; --ds-z-modal: 9999; --ds-z-toast: 10000; /* La modale du composant (static/ds-modale.js, document 09 §5.15) passe SOUS ce qu'elle ouvre : panneau lateral (9997), visionneuse (9995), confirmation (10001), messages (10000). */ --ds-z-modale: 9994; /* Marge du voile au-dessus et au-dessous de la modale : la fenetre moins 88 px (document 32, §2.2). */ --ds-modale-marge: 44px; } /* =========================================================================== DENSITE --------------------------------------------------------------------------- Confortable par defaut (decision du 2026-09-22). L'attribut agit sur son sous-arbre : pose sur , il regle toute l'application ; pose sur une liste seule, il n'en densifie que celle-ci. Aucun ecran ne le pose encore : le reglage des Parametres et le bouton « affichage dense » viendront avec leurs lots. =========================================================================== */ :root, [data-density="confortable"] { --ds-control-h: 40px; --ds-row-pad-y: 14px; --ds-card-pad: 20px; --ds-stack-gap: 16px; } [data-density="compacte"] { --ds-control-h: var(--ds-control-h-compact); --ds-row-pad-y: 7px; --ds-card-pad: 14px; --ds-stack-gap: 10px; } /* =========================================================================== ARABE : plus grand d'un cran, plus aere, JAMAIS espace --------------------------------------------------------------------------- A corps egal, l'ecriture arabe parait plus petite que la latine ; ses points et ses voyelles demandent de l'interligne. L'espacement des lettres est interdit : il casse la liaison des lettres. =========================================================================== */ :lang(ar) { --ds-text-xs: 0.75rem; --ds-text-sm: 0.8125rem; --ds-text-base: 0.9375rem; --ds-text-md: 1.0625rem; --ds-text-lg: 1.1875rem; --ds-leading-normal: 1.7; --ds-tracking-caps: 0; --ds-quote-style: normal; } /* =========================================================================== ALIAS HISTORIQUES --------------------------------------------------------------------------- Le depot utilise 172 fois une seconde famille de noms, aux valeurs identiques. Les aligner ici plutot que de reecrire 172 sites d'appel evite un chantier a risque pour un gain nul, et supprime malgre tout la double source de verite : une seule valeur a changer desormais. =========================================================================== */ :root { --navy: var(--ds-navy); --navy-light: var(--ds-navy-600); --navy-lighter: var(--ds-navy-500); --gold: var(--ds-gold); --gold-light: var(--ds-gold-light); --gold-dim: var(--ds-gold-dim); --surface: var(--ds-bg); --surface-card: var(--ds-card); --border: var(--ds-border); --border-light: var(--ds-border-light); --text-primary: var(--ds-text); --text-secondary:var(--ds-text-2); --text-muted: var(--ds-text-3); --sidebar-width: var(--ds-sidebar-w); --sidebar-width-collapsed: var(--ds-sidebar-w-collapsed); } /* =========================================================================== DIRECTION ET BIDIRECTIONNALITE --------------------------------------------------------------------------- Dans une interface arabe, une reference judiciaire, une date ou un montant doivent rester lisibles. L'algorithme bidirectionnel reordonne les suites de chiffres et de signes selon leur contexte : « 2026/1101/0007 » peut devenir « 0007/1101/2026 », et « 3 / 12 » peut devenir « 12 / 3 ». Un compteur qui ment est pire qu'un compteur absent. La regle : tout fragment dont l'ORDRE DES CARACTERES porte du sens est isole. `` cree l'isolat, `dir="ltr"` en fixe le sens. =========================================================================== */ /* Isolat generique. Sur un element non-`bdi`, `unicode-bidi: isolate` produit le meme effet que la balise. */ .ds-ltr, .ds-ref, .ds-date, .ds-num, .ds-amount, .ds-email, .ds-path { direction: ltr; unicode-bidi: isolate; } /* Reference judiciaire : le decoupage par barres obliques doit rester intact. */ .ds-ref { font-variant-numeric: tabular-nums; white-space: nowrap; } /* Chiffres alignes verticalement : une colonne de montants ne se lit pas si les chiffres n'ont pas la meme chasse. */ .ds-num, .ds-amount { font-variant-numeric: tabular-nums; } /* Les montants s'alignent sur la fin de la cellule, dans les deux sens de lecture — `end` et non `right`. */ .ds-amount { text-align: end; } .ds-path, .ds-mono { font-family: var(--ds-font-mono); font-size: var(--ds-text-xs); } /* Texte arabe : la police doit etre celle embarquee, jamais un repli systeme qui casserait les ligatures. */ [dir="rtl"] body, [lang="ar"] { font-family: var(--ds-font-ar); } /* Troncature respectueuse du sens de lecture. --------------------------------------------------------------------------- `text-overflow: ellipsis` coupe a la FIN VISUELLE. Quand une cellule d'une interface arabe contient du texte latin, la fin visuelle est le DEBUT du texte : le libelle « Affaire d'exemple — audience » s'affiche alors « ...exemple — audience », et l'utilisateur lit la queue au lieu de la tete. Le defaut a ete constate sur capture, pas deduit. L'isolat retablit l'ordre logique : la troncature retombe alors du bon cote, quelle que soit la langue de l'interface. */ .ds-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; unicode-bidi: isolate; min-width: 0; } /* Icone directionnelle : seules les fleches de navigation se retournent. Une icone de document ou de corbeille garde son sens dans les deux langues. */ [dir="rtl"] .ds-flip { transform: scaleX(-1); } /* =========================================================================== MOUVEMENT REDUIT --------------------------------------------------------------------------- Respecte le reglage systeme. Les transitions ne sont pas supprimees mais ramenees a une duree imperceptible : cela evite les sauts d'etat brutaux tout en retirant l'animation. =========================================================================== */ @media (prefers-reduced-motion: reduce) { :root { --ds-duration-fast: 1ms; --ds-duration: 1ms; --ds-duration-panel: 1ms; --ds-duration-slow: 1ms; --ds-duration-spin: 1ms; --ds-duration-loop: 1ms; --ds-duration-long: 1ms; } *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }