@ktortu/aaa 0.1.0-beta.0

package/themes/theme-ant.css

@@ -0,0 +1,44 @@
+/* Thème « Ant Design » (light) — uniquement des redéclarations de tokens.
+   Signature Ant : bleu vif, radius 6px, gris légers, look B2B/admin.
+   AA-corrigé : les officiels #1677ff (~4.0:1) et #ff4d4f (~3.2:1) échouent sur blanc en texte
+   → on prend les crans -7 de leurs palettes (blue-7 #0958d9, red-7 #cf1322), AA des deux côtés. */
+[data-theme='ant'] {
+  /* ============ Socle ============ */
+  --kt-primary: #0958d9; /* blue-7 — blanc 6.2:1 */
+  --kt-danger: #cf1322; /* red-7 — blanc 5.6:1 */
+  --kt-neutral: #434343;
+  --kt-surface: #ffffff;
+  --kt-on-surface: #1f1f1f; /* ≈ rgba(0,0,0,.88) Ant */
+  --kt-muted: #595959; /* ≈ rgba(0,0,0,.65) */
+  --kt-outline: #d9d9d9;
+  --kt-outline-strong: #8c8c8c;
+  --kt-font: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
+
+  /* ============ Géométrie ============ */
+  --kt-control-radius: 6px; /* borderRadius par défaut Ant v5 */
+  --btn-radius: 6px;
+  --chip-radius: 6px;
+
+  /* ============ Champs ============ */
+  --field-transition: border-color 0.2s ease; /* motionDurationMid Ant (rétrofit lot 3) */
+
+  /* ============ Boutons ============ */
+  --btn-tonal-weight: 12%; /* containers discrets façon Ant (color-bg variants) */
+  --btn-on-primary-container: #003eb3;
+  --btn-on-danger-container: #820014;
+  --btn-on-neutral-container: #1f1f1f;
+
+  /* ============ Select / tooltip ============ */
+  --select-popup-shadow: 0 6px 16px rgb(0 0 0 / 8%), 0 3px 6px rgb(0 0 0 / 12%);
+  --tooltip-bg: #1f1f1f; /* ≈ rgba(0,0,0,.85) */
+  --tooltip-fg: #ffffff;
+
+  /* ============ Dialog (Ant Design : rayon 8, sans bord) ============ */
+  --dialog-radius: 8px;
+  --dialog-border-width: 0;
+
+  /* ============ Card (Ant : rayon 8, boxShadowCard discret) ============ */
+  --card-radius: 8px;
+  --card-filled-bg: #fafafa; /* colorFillAlter */
+  --card-shadow: 0 1px 2px rgb(0 0 0 / 3%), 0 1px 6px -1px rgb(0 0 0 / 2%), 0 2px 4px rgb(0 0 0 / 2%);
+}

package/themes/theme-architecte.css

@@ -0,0 +1,83 @@
+/* Thème « Architecte » (dark, blueprint) — uniquement des tokens.
+   La démonstration des bordures PAR CÔTÉ (longhands : 1 à 4 valeurs par token) :
+   - champs = LIGNE DE COTE : underline seule (`--field-border-width: 0 0 2px 0`),
+     on écrit SUR la ligne comme sur un plan ; le popup du select garde sa bordure
+     complète via --select-popup-border-width (un menu flottant n'est pas un champ) ;
+   - boutons = CARTOUCHE : `--btn-border-style: solid dashed` => traits pleins
+     haut/bas, tirets sur les côtés, comme le cadre d'un cartouche de plan.
+   Bleu de Prusse, traits cyan crayon, sanguine en danger, Architects Daughter. */
+[data-theme='architecte'] {
+  color-scheme: dark;
+
+  /* ============ Socle ============ */
+  --kt-surface: #16344f; /* bleu de Prusse (blueprint) */
+  --kt-on-surface: #e8f1f8; /* 11.2:1 */
+  --kt-muted: #9dbdd4; /* 6.5:1 */
+  --kt-outline: #6f9dbd; /* trait de plan (4.4:1 non-texte) */
+  --kt-outline-strong: #a8cce4;
+  --kt-primary: #7fc8f0; /* crayon cyan, 7.0:1 en texte */
+  --kt-danger: #f0907c; /* sanguine, 5.5:1 */
+  --kt-neutral: #3e5c75;
+  --kt-focus-ring-color: #7fc8f0;
+  --kt-font: 'Architects Daughter', 'Segoe Print', cursive;
+
+  /* Gouttière = trait de plan : thumb bleu crayon (outline) sur le lavis des champs. */
+  --kt-scrollbar-color: #6f9dbd #1b3c5a;
+
+  /* ============ Géométrie : tracé technique ============ */
+  --kt-control-radius: 0; /* champs = lignes, pas de coins */
+  /* Coins COUPÉS des cartouches (hérité du thème Papier craft, supprimé) : bevel + radius
+     visible = chanfrein technique, cohérent avec le lettrage de plan. */
+  --btn-radius: 8px;
+  --btn-corner-shape: bevel;
+  --kt-sheet-radius: 8px;
+  --chip-radius: 2px;
+
+  /* ============ Champs : ligne de cote (underline par côté) ============ */
+  --field-border-width: 0 0 2px 0; /* SEULE la ligne du bas existe */
+  --field-bg: #1b3c5a; /* lavis léger au-dessus de la ligne */
+  --field-focus-ring: color-mix(in srgb, #7fc8f0 55%, transparent);
+  --field-focus-ring-style: dashed; /* trait de construction (rétrofit lot 6) */
+  /* Menu flottant du select : bordure complète et fine, lui. */
+  --select-popup-border-width: 1px;
+  /* Lettrage technique des cartouches (rétrofit lot 6). */
+  --field-label-transform: uppercase;
+  --field-label-letter-spacing: 0.06em;
+  --field-caret-color: #7fc8f0;
+  --kt-selection-bg: #7fc8f0;
+  --kt-selection-fg: #0d2438;
+
+  /* ============ Boutons : cartouche (style par côté) ============ */
+  --btn-border-style: solid dashed; /* haut/bas pleins, côtés en tirets */
+  --btn-border-width: 1.5px;
+  --btn-text-transform: uppercase; /* lettrage de plan (rétrofit lot 6) */
+  --btn-letter-spacing: 0.08em;
+  --btn-on-primary: #0d2438; /* 8.6:1 sur cyan */
+  --btn-on-danger: #381208; /* 7.1:1 sur sanguine */
+  --btn-on-neutral: #ffffff; /* 7.0:1 */
+  --btn-on-primary-container: #c9e6f8;
+  --btn-on-neutral-container: #d4e2ee;
+  --btn-on-danger-container: #f8cfc4;
+  --btn-fg-weight: 100%;
+  --btn-neutral-fg: #a9c4da;
+  --btn-tonal-weight: 24%;
+
+  /* ============ Select / tooltip ============ */
+  --select-popup-bg: #1b3c5a;
+  --select-popup-shadow: 0 8px 24px rgb(4 14 24 / 55%);
+  --kt-sheet-shadow: 0 -8px 24px rgb(4 14 24 / 55%);
+  --kt-sheet-scrim: rgb(4 14 24 / 60%);
+  --tooltip-bg: #0f2438;
+  --tooltip-fg: #dceaf5;
+
+  /* ============ Dialog (blueprint : cartouche cyan) ============ */
+  --dialog-radius: 8px;
+  --dialog-border-color: #6f9dbd;
+
+  /* ============ Card : cartouche blueprint (lavis + trait cyan via l'ombre) ============ */
+  --card-bg: #1b3c5a;
+  --card-filled-bg: #214a6e;
+  --card-radius: 8px;
+  --card-border-color: #6f9dbd;
+  --card-shadow: 0 0 0 1px rgb(111 157 189 / 30%), 0 8px 24px rgb(4 14 24 / 45%);
+}

package/themes/theme-aurora.css

@@ -0,0 +1,97 @@
+/* Thème « Aurora » (light, effets d'OMBRES) — vitrine des tokens --*-shadow* du système.
+   Identité = halos COLORÉS multicouches (indigo + rose) sous chaque surface, élévation au survol.
+   AUCUNE animation continue (≠ cyberpunk) : tout est statique, seules des transitions au survol.
+   Surfaces claires + texte navy => AA sans compromis (les halos sont décoratifs, jamais porteurs
+   d'information ni de contraste de texte). Inter, rondeurs douces. */
+[data-theme='aurora'] {
+  color-scheme: light;
+
+  /* ============ Socle ============ */
+  --kt-primary: #4f46e5; /* indigo — blanc ~6.6:1 */
+  --kt-danger: #be185d; /* rose profond — blanc ~6.2:1 */
+  --kt-neutral: #475569;
+  --kt-surface: #f7f9fc;
+  --kt-on-surface: #16203a; /* ~13:1 */
+  --kt-muted: #4a5878; /* ~6:1 */
+  --kt-outline: #cdd6e8;
+  --kt-outline-strong: #8493b3;
+  --kt-focus-ring-color: #4f46e5;
+  --kt-font: 'Inter', system-ui, sans-serif;
+
+  /* Gouttière indigo douce. */
+  --kt-scrollbar-color: color-mix(in srgb, #4f46e5 35%, #cdd6e8) #eef1f8;
+
+  /* Feuille / popup : halos colorés. */
+  --kt-sheet-radius: 24px;
+  --kt-sheet-shadow: 0 -16px 48px rgb(79 70 229 / 16%), 0 -4px 16px rgb(190 24 93 / 10%);
+  --kt-sheet-scrim: rgb(22 32 58 / 35%);
+
+  /* Caret + sélection. */
+  --field-caret-color: #4f46e5;
+  --kt-selection-bg: #ddd6fe;
+  --kt-selection-fg: #2e1065;
+
+  /* ============ Géométrie douce ============ */
+  --kt-control-radius: 12px;
+  --btn-radius: 12px;
+  --chip-radius: 999px;
+
+  /* ============ Champs : halo indigo au survol/focus ============ */
+  --field-bg: #ffffff;
+  --field-focus-ring: color-mix(in srgb, #4f46e5 50%, transparent);
+  --field-transition: border-color 180ms ease, box-shadow 180ms ease;
+  --field-shadow: 0 2px 8px rgb(22 32 58 / 6%);
+  --field-shadow-hover: 0 4px 14px rgb(79 70 229 / 12%);
+  --field-shadow-focus: 0 6px 20px rgb(79 70 229 / 22%);
+
+  /* ============ Boutons : élévation colorée, lève au survol ============ */
+  --btn-tonal-weight: 16%;
+  --btn-on-primary-container: #2e1065;
+  --btn-on-danger-container: #6b0f3a;
+  --btn-on-neutral-container: #16203a;
+  --btn-transition: transform 180ms ease, box-shadow 180ms ease;
+  --btn-transform-hover: translateY(-2px);
+  --btn-transform-active: translateY(0) scale(0.98);
+
+  /* ============ Chips : pilules à halo doux ============ */
+  --chip-shadow: 0 2px 8px rgb(79 70 229 / 12%);
+  --chip-shadow-hover: 0 4px 14px rgb(79 70 229 / 20%);
+
+  /* ============ Select / tooltip : panneaux à halo ============ */
+  --select-popup-bg: #ffffff;
+  --select-popup-shadow: 0 16px 48px rgb(79 70 229 / 18%), 0 4px 16px rgb(190 24 93 / 10%);
+  --tooltip-bg: #16203a;
+  --tooltip-fg: #f7f9fc;
+
+  /* ============ Dialog : halo aurora ample ============ */
+  --dialog-bg: #ffffff;
+  --dialog-radius: 20px;
+  --dialog-border-width: 0;
+  --dialog-shadow: 0 24px 64px rgb(79 70 229 / 22%), 0 8px 24px rgb(190 24 93 / 12%);
+
+  /* ============ Card : LA vitrine — double halo coloré, lève au survol ============ */
+  --card-bg: #ffffff;
+  --card-filled-bg: #f1f0fe; /* teinte indigo très pâle */
+  --card-radius: 16px;
+  --card-shadow: 0 6px 24px rgb(79 70 229 / 14%), 0 2px 8px rgb(190 24 93 / 8%);
+  --card-shadow-hover: 0 14px 40px rgb(79 70 229 / 22%), 0 6px 18px rgb(190 24 93 / 12%);
+  --card-transition: transform 200ms ease, box-shadow 200ms ease;
+  --card-transform-hover: translateY(-3px);
+}
+
+/* Élévation COLORÉE des boutons — la couleur suit le mode résolu (var(--btn-fill)), donc au
+   niveau ÉLÉMENT. Voile aurora subtil sur les filled (label blanc AA conservé : voile translucide
+   violet sur un fill déjà sombre). Disabled : la lib force background-image/box-shadow à none. */
+[data-theme='aurora'] [ktButton][data-mode='filled'] {
+  --btn-fill-image: linear-gradient(135deg, transparent 40%, rgb(124 58 237 / 35%));
+  --btn-shadow:
+    0 4px 14px color-mix(in srgb, var(--btn-fill) 38%, transparent),
+    0 2px 6px color-mix(in srgb, var(--btn-fill) 24%, transparent);
+  --btn-shadow-hover:
+    0 8px 22px color-mix(in srgb, var(--btn-fill) 50%, transparent),
+    0 4px 10px color-mix(in srgb, var(--btn-fill) 32%, transparent);
+}
+[data-theme='aurora'] [ktButton]:is([data-mode='tonal'], [data-mode='outlined'], [data-mode='text']) {
+  --btn-shadow: 0 2px 8px rgb(22 32 58 / 8%);
+  --btn-shadow-hover: 0 6px 18px color-mix(in srgb, var(--btn-fg) 22%, transparent);
+}

package/themes/theme-bootstrap.css

@@ -0,0 +1,46 @@
+/* Thème « Bootstrap 5 » (light) — uniquement des redéclarations de tokens.
+   Signature Bootstrap : stack système, radius .375rem (6px), focus ring translucide large.
+   AA-corrigé : les officiels #0d6efd (~4.4:1) et #dc3545 (~4.3:1) échouent de peu sur blanc
+   → on prend leurs variantes hover (#0b5ed7, #bb2d3b), quasi indiscernables et AA. */
+[data-theme='bootstrap'] {
+  /* ============ Socle ============ */
+  --kt-primary: #0b5ed7; /* btn-primary hover — blanc 5.8:1 */
+  --kt-danger: #bb2d3b; /* btn-danger hover — blanc 5.9:1 */
+  --kt-neutral: #6c757d; /* secondary — blanc 4.7:1 */
+  --kt-surface: #ffffff;
+  --kt-on-surface: #212529; /* body-color */
+  --kt-muted: #6c757d; /* secondary-color */
+  --kt-outline: #ced4da; /* border des inputs (authentique, < 3:1 — fidélité > 1.4.11 ici) */
+  --kt-outline-strong: #adb5bd;
+  --kt-font: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+
+  /* ============ Géométrie ============ */
+  --kt-control-radius: 6px; /* .375rem */
+  --btn-radius: 6px;
+
+  /* ============ Champs : le fameux ring translucide large de Bootstrap ============ */
+  --field-focus-ring-width: 4px; /* .25rem */
+  --field-focus-ring: rgb(13 110 253 / 25%);
+  /* LA transition des .form-control Bootstrap (rétrofit lot 3). */
+  --field-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
+
+  /* ============ Boutons ============ */
+  --btn-on-primary-container: #052c65; /* ≈ text-emphasis sur -subtle */
+  --btn-on-danger-container: #58151c;
+  --btn-on-neutral-container: #212529;
+
+  /* ============ Tooltip ============ */
+  --tooltip-bg: #212529;
+  --tooltip-fg: #ffffff;
+
+  /* ============ Dialog (Bootstrap 5 : rayon .5rem, ombre modale) ============ */
+  --dialog-radius: 0.5rem;
+  --dialog-border-color: rgb(0 0 0 / 17.5%);
+  --dialog-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
+
+  /* ============ Card (Bootstrap : rayon .5rem, bord + ombre-sm) ============ */
+  --card-radius: 0.5rem;
+  --card-border-color: rgb(0 0 0 / 17.5%);
+  --card-filled-bg: #f8f9fa; /* bg-body-tertiary */
+  --card-shadow: 0 0.125rem 0.25rem rgb(0 0 0 / 7.5%); /* shadow-sm */
+}

package/themes/theme-carbon.css

@@ -0,0 +1,49 @@
+/* Thème « IBM Carbon » (light, White/g10) — uniquement des redéclarations de tokens.
+   Signature Carbon : coins CARRÉS partout (radius 0) — le stress-test géométrie du contrat —,
+   champs gris #f4f4f4, bleu interactif #0f62fe, IBM Plex Sans (stack avec repli système). */
+[data-theme='carbon'] {
+  /* ============ Socle ============ */
+  --kt-primary: #0043ce; /* interactive — blanc 7.6:1 (AAA) */
+  --kt-danger: #750e13; /* support-error — blanc 9.0:1 (AAA) */
+  --kt-neutral: #393939; /* button-secondary Carbon */
+  --kt-surface: #ffffff;
+  --kt-on-surface: #161616; /* text-primary */
+  --kt-muted: #525252; /* text-secondary, ~7.4:1 */
+  --kt-outline: #8d8d8d; /* border-strong (les inputs Carbon ont une bordure marquée) */
+  --kt-outline-strong: #161616;
+  --kt-font: 'IBM Plex Sans', system-ui, sans-serif;
+
+  /* ============ Géométrie : coins carrés ============ */
+  --kt-control-radius: 0;
+  --btn-radius: 0; /* bascule : 0 sur toutes les tailles */
+  --kt-sheet-radius: 0;
+  --chip-radius: 0;
+
+  /* ============ Champs ============ */
+  --field-bg: #f4f4f4; /* field-01 sur fond blanc */
+  /* L'input Carbon authentique : fill gris + UNIQUEMENT la bordure du bas
+     (rétrofit lot 5, bordures par côté) ; le menu du select garde sa bordure complète. */
+  --field-border-width: 0 0 1px 0;
+  --select-popup-border-width: 1px;
+
+  /* ============ Boutons ============ */
+  --btn-letter-spacing: 0.01em; /* body-compact Carbon, +0.16px (rétrofit lot 6) */
+  --btn-on-primary-container: #002c9b; /* sur container dérivé bleu pâle, >7:1 (AAA) */
+  --btn-on-danger-container: #750e13;
+  --btn-on-neutral-container: #161616;
+
+  /* ============ Tooltip ============ */
+  --tooltip-bg: #393939;
+  --tooltip-fg: #ffffff;
+
+  /* ============ Dialog (IBM Carbon : angles vifs, sans bord) ============ */
+  --dialog-radius: 0;
+  --dialog-border-width: 0;
+  --dialog-shadow: 0 2px 6px rgb(0 0 0 / 20%);
+  --kt-sheet-shadow: 0 -2px 6px rgb(0 0 0 / 30%); /* ombre minimale et nette (Carbon) */
+
+  /* ============ Card (IBM Carbon : tuile carrée, layer-01) ============ */
+  --card-radius: 0;
+  --card-filled-bg: #f4f4f4; /* layer-01 */
+  --card-shadow: 0 2px 6px rgb(0 0 0 / 20%); /* élévation nette, sans flou diffus */
+}

package/themes/theme-catppuccin.css

@@ -0,0 +1,66 @@
+/* Thème « Catppuccin Mocha » (dark) — uniquement des redéclarations de tokens.
+   Palette officielle Mocha : base #1e1e2e, pastels doux (mauve en accent, red en danger).
+   Inversions dark : labels sombres sur fills pastel clairs, on-containers clairs,
+   --btn-fg-weight neutralisé, color-scheme dark.
+   Unique représentant des « palettes d'éditeur » (Dracula et Nord supprimés, 2026-06-12).
+   Rappel du pattern démontré par Nord pour un danger en TON MOYEN (échoue des deux côtés) :
+   l'assombrir en fill (--kt-danger) ET l'éclaircir en texte via les dérivés séparables
+   --btn-danger-fg / --field-error-color / --field-required-color. Inutile ici : le red
+   Mocha #f38ba8 est assez clair pour servir tel quel (texte 6.9:1, label sombre 8.1:1). */
+[data-theme='catppuccin'] {
+  color-scheme: dark;
+
+  /* ============ Socle ============ */
+  --kt-surface: #1e1e2e; /* base */
+  --kt-on-surface: #cdd6f4; /* text, ~12:1 */
+  --kt-muted: #a6adc8; /* subtext0, ~7.4:1 */
+  --kt-outline: #6c7086; /* overlay0 */
+  --kt-outline-strong: #9399b2; /* overlay2 */
+  --kt-primary: #cba6f7; /* mauve, ~8.5:1 en texte */
+  --kt-danger: #f38ba8; /* red, ~6.9:1 */
+  --kt-neutral: #585b70; /* surface2 */
+  --kt-focus-ring-color: #cba6f7;
+  --kt-font: 'JetBrains Mono', ui-monospace, monospace; /* thème d'éditeur => mono assumée */
+
+  /* Gouttière façon éditeur : thumb surface2 (overlay) sur le mantle, comme la scrollbar Mocha. */
+  --kt-scrollbar-color: #585b70 #181825;
+
+  /* ============ Champs ============ */
+  --field-bg: #313244; /* surface0 */
+  --field-focus-ring: color-mix(in srgb, #cba6f7 60%, transparent);
+
+  /* ============ Boutons : inversions dark ============ */
+  --btn-on-primary: #11111b; /* crust sur mauve, 9.2:1 */
+  --btn-on-danger: #11111b; /* 8.1:1 */
+  --btn-on-neutral: #ffffff; /* 6.7:1 sur surface2 */
+  --btn-on-primary-container: #e2d5fb;
+  --btn-on-neutral-container: #cdd6f4;
+  --btn-on-danger-container: #f8c8d4;
+  --btn-fg-weight: 100%;
+  --btn-neutral-fg: #bac2de; /* subtext1 */
+  --btn-tonal-weight: 24%;
+
+  /* ============ Caret + sélection (rétrofit lot 6 — l'identité d'un thème d'éditeur) ============ */
+  --field-caret-color: #f5e0dc; /* rosewater, LE curseur Catppuccin officiel */
+  --kt-selection-bg: #585b70; /* surface2 */
+  --kt-selection-fg: #cdd6f4;
+
+  /* ============ Select / tooltip ============ */
+  --select-popup-bg: #313244;
+  --select-popup-shadow: 0 8px 24px rgb(17 17 27 / 60%);
+  --kt-sheet-shadow: 0 -8px 24px rgb(17 17 27 / 60%);
+  --kt-sheet-scrim: rgb(17 17 27 / 60%);
+  --tooltip-bg: #313244;
+  --tooltip-fg: #cdd6f4;
+
+  /* ============ Dialog (Mocha dark) ============ */
+  --dialog-bg: #181825; /* mantle, légèrement sous la base */
+  --dialog-radius: 12px;
+  --dialog-border-color: #313244;
+
+  /* ============ Card (Mocha : surface élevée surface0/1) ============ */
+  --card-bg: #313244; /* surface0, au-dessus de la base */
+  --card-filled-bg: #45475a; /* surface1 */
+  --card-radius: 12px;
+  --card-shadow: 0 4px 12px rgb(17 17 27 / 45%);
+}

package/themes/theme-cyberpunk.css

@@ -0,0 +1,211 @@
+/* Thème « Cyberpunk » (dark, néon ANIMÉ) — vitrine ANIMATION + LASER du système de tokens.
+   Fusionne les deux bancs d'essai retirés (2026-06) :
+   - moteur d'animation par @property typés (ex-Motion) : --cyber-angle/-breathe/-laser animés
+     sur :root, consommés dans les ombres via cos()/sin() => la lumière ORBITE + balayage LASER ;
+   - fills en dégradé duotone + glows néon au niveau élément (ex-Synthwave).
+   TOUT le mouvement est derrière prefers-reduced-motion (repli néon STATIQUE — aucune régression
+   a11y, le glow orbital se fige à l'angle 0). Cyan électrique, magenta, quasi-noir bleuté, Oxanium.
+
+   Les @property sont permis car ce sont des tokens PRIVÉS du thème — jamais sur les tokens
+   publics de la lib (ça casserait leur surcharge par redéclaration). */
+
+@property --cyber-angle {
+  syntax: '<angle>';
+  inherits: true;
+  initial-value: 0deg;
+}
+@property --cyber-breathe {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: 0px;
+}
+@property --cyber-laser {
+  syntax: '<length>';
+  inherits: true;
+  initial-value: -400px;
+}
+
+@keyframes cyber-orbit {
+  to {
+    --cyber-angle: 360deg;
+  }
+}
+@keyframes cyber-breathe {
+  to {
+    --cyber-breathe: 7px;
+  }
+}
+@keyframes cyber-laser {
+  to {
+    --cyber-laser: 2600px;
+  }
+}
+
+[data-theme='cyberpunk'] {
+  color-scheme: dark;
+
+  /* ============ Socle (cyan/magenta sur quasi-noir) ============ */
+  --kt-surface: #0b0f1a;
+  --kt-on-surface: #e6f6ff; /* ~15:1 */
+  --kt-muted: #94b2c8; /* ~7:1 */
+  --kt-outline: #2f5a73; /* 3:1 non-texte */
+  --kt-outline-strong: #5fb6da;
+  --kt-primary: #28d6ef; /* cyan, texte ~10:1 */
+  --kt-danger: #ff3d8b; /* magenta, texte ~6:1 */
+  --kt-neutral: #2b3950;
+  --kt-focus-ring-color: #28d6ef;
+  --kt-font: 'Oxanium', system-ui, sans-serif;
+
+  /* Gouttière néon cyan sur la nuit. */
+  --kt-scrollbar-color: #28d6ef #10182a;
+
+  /* Feuille / popup : anneau cyan + ombre profonde. */
+  --kt-sheet-shadow: 0 0 0 1px rgb(40 214 239 / 25%), 0 -8px 32px rgb(0 0 0 / 65%);
+  --kt-sheet-scrim: rgb(4 8 18 / 70%);
+
+  /* Caret + sélection. */
+  --field-caret-color: #28d6ef;
+  --kt-selection-bg: #28d6ef;
+  --kt-selection-fg: #04141a;
+
+  /* ============ Géométrie HUD : coins chanfreinés ============ */
+  --kt-control-radius: 4px;
+  --btn-radius: 6px;
+  --btn-corner-shape: bevel; /* coins coupés façon interface SF */
+  --kt-sheet-radius: 8px;
+  --chip-radius: 4px;
+
+  /* ============ Champs : lavis sombre + halo bicolore qui ORBITE au focus ============ */
+  --field-bg: #10182a;
+  --field-focus-ring: color-mix(in srgb, #28d6ef 60%, transparent);
+  --field-transition: border-color 200ms ease;
+  --field-shadow-hover: 0 0 calc(7px + var(--cyber-breathe)) rgb(40 214 239 / 30%);
+  --field-shadow-focus:
+    calc(cos(var(--cyber-angle)) * 10px) calc(sin(var(--cyber-angle)) * 10px) 16px -4px rgb(40 214 239 / 70%),
+    calc(cos(var(--cyber-angle)) * -10px) calc(sin(var(--cyber-angle)) * -10px) 16px -4px rgb(255 61 139 / 55%),
+    0 0 calc(8px + var(--cyber-breathe)) rgb(40 214 239 / 30%);
+
+  /* ============ Boutons : inversions dark + pulsation au clic ============ */
+  --btn-on-primary: #04141a; /* sur cyan, AAA */
+  --btn-on-danger: #2a0312; /* sur magenta */
+  --btn-on-neutral: #ffffff;
+  --btn-on-primary-container: #b6f4ff;
+  --btn-on-neutral-container: #d4e2ee;
+  --btn-on-danger-container: #ffd0e2;
+  --btn-fg-weight: 100%;
+  --btn-neutral-fg: #a9c4da;
+  --btn-tonal-weight: 24%;
+  --btn-font-weight: 600;
+  --btn-letter-spacing: 0.03em;
+  --btn-transition: transform 140ms ease;
+  --btn-transform-active: scale(0.95);
+
+  /* ============ Chips ============ */
+  --chip-bg: color-mix(in srgb, #28d6ef 14%, transparent);
+  --chip-border: color-mix(in srgb, #28d6ef 30%, transparent);
+  --chip-shadow-hover: 0 0 14px rgb(40 214 239 / 45%);
+
+  /* ============ Select / tooltip ============ */
+  --select-popup-bg: #10182a;
+  --select-popup-shadow: 0 0 0 1px rgb(40 214 239 / 25%), 0 12px 40px rgb(0 0 0 / 65%);
+  --tooltip-bg: #10182a;
+  --tooltip-fg: #e6f6ff;
+
+  /* ============ Dialog : panneau HUD ============ */
+  --dialog-bg: #10182a;
+  --dialog-border-color: rgb(40 214 239 / 35%);
+  --dialog-radius: 8px;
+  --dialog-anim-from-transform: scale(0.96);
+
+  /* ============ Card : panneau néon, ombre qui orbite (+ laser en bord haut, cf. ::before) ============ */
+  --card-bg: #10182a;
+  --card-filled-bg: #16203a;
+  --card-radius: 6px;
+  --card-shadow:
+    calc(cos(var(--cyber-angle)) * 8px) calc(sin(var(--cyber-angle)) * 8px) 22px -8px rgb(40 214 239 / 40%),
+    0 8px 32px rgb(0 0 0 / 60%);
+  --card-shadow-hover:
+    calc(cos(var(--cyber-angle)) * 12px) calc(sin(var(--cyber-angle)) * 12px) 26px -6px rgb(40 214 239 / 60%),
+    0 10px 36px rgb(0 0 0 / 65%);
+  --card-transition: box-shadow 160ms ease;
+
+  /* ============ Tabs : base pour le laser ============ */
+  --tab-indicator-width: 0;
+  --tab-list-border-color: transparent;
+  --tab-bg: transparent;
+  --tab-bg-hover: rgb(16 24 42 / 60%);
+  --tab-bg-active: #10182a;
+  --tab-radius: 6px 6px 0 0;
+  --tab-border: none;
+  --tab-margin: 0 4px 0 0;
+}
+
+/* Fills DUOTONE cyan→magenta (ex-Synthwave) : niveau élément pour substituer var(--btn-fill) ;
+   le voile d'état s'empile par-dessus. Glow ORBITAL (ex-Motion). Disabled : la lib force none. */
+[data-theme='cyberpunk'] [ktButton][data-mode='filled'] {
+  --btn-fill-image: linear-gradient(135deg, transparent 30%, rgb(255 61 139 / 55%));
+  --btn-shadow:
+    calc(cos(var(--cyber-angle)) * 8px) calc(sin(var(--cyber-angle)) * 8px) 14px -4px
+      color-mix(in srgb, var(--btn-fill) 85%, transparent),
+    calc(cos(var(--cyber-angle)) * -8px) calc(sin(var(--cyber-angle)) * -8px) 14px -4px rgb(255 61 139 / 55%);
+  --btn-shadow-hover:
+    calc(cos(var(--cyber-angle)) * 12px) calc(sin(var(--cyber-angle)) * 12px) 18px -2px
+      color-mix(in srgb, var(--btn-fill) 95%, transparent),
+    0 0 calc(12px + var(--cyber-breathe) * 2) color-mix(in srgb, var(--btn-fill) 50%, transparent);
+}
+[data-theme='cyberpunk'] [ktButton]:is([data-mode='tonal'], [data-mode='outlined'], [data-mode='text']) {
+  --btn-shadow-hover: 0 0 14px color-mix(in srgb, var(--btn-fg) 60%, transparent);
+  --btn-shadow-focus: 0 0 16px color-mix(in srgb, var(--btn-fg) 75%, transparent);
+}
+
+/* LASER en bord HAUT des cartes : ligne néon qui balaie (signature « partout »). Le pseudo
+   est libre (le lien étiré utilise ::after du lien, pas de la carte). z-index au-dessus du média. */
+[data-theme='cyberpunk'] [ktCard] {
+  isolation: isolate;
+}
+[data-theme='cyberpunk'] [ktCard]::before {
+  content: '';
+  position: absolute;
+  inset-block-start: 0;
+  inset-inline: 0;
+  block-size: 2px;
+  background: linear-gradient(
+    90deg,
+    transparent calc(var(--cyber-laser) - 220px),
+    #0ff calc(var(--cyber-laser) - 40px),
+    var(--kt-primary) var(--cyber-laser),
+    transparent calc(var(--cyber-laser) + 180px)
+  );
+  z-index: 2;
+  pointer-events: none;
+}
+
+/* LASER de la liste d'onglets (repris de Motion). */
+[data-theme='cyberpunk'] [ngTabList] {
+  position: relative;
+}
+[data-theme='cyberpunk'] [ngTabList]::after {
+  content: '';
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: 1px;
+  background: linear-gradient(
+    90deg,
+    var(--kt-outline) calc(var(--cyber-laser) - 150px),
+    #0ff var(--cyber-laser),
+    var(--kt-primary) calc(var(--cyber-laser) + 20px),
+    var(--kt-outline) calc(var(--cyber-laser) + 150px)
+  );
+}
+
+/* MOTEUR d'animation — UNIQUEMENT hors prefers-reduced-motion. Sinon : --cyber-angle reste 0
+   => glow figé (cos0=1,sin0=0), --cyber-laser hors-champ => lignes laser invisibles. Néon statique. */
+@media (prefers-reduced-motion: no-preference) {
+  [data-theme='cyberpunk'] {
+    animation:
+      cyber-orbit 4s linear infinite,
+      cyber-breathe 5s ease-in-out infinite alternate,
+      cyber-laser 3.2s linear infinite;
+  }
+}

package/themes/theme-fluent.css

@@ -0,0 +1,45 @@
+/* Thème « Microsoft Fluent 2 » (light) — uniquement des redéclarations de tokens.
+   Signature Fluent : Segoe UI, radius 4px, gris doux, bleu brand #0f6cbd, élévations subtiles. */
+[data-theme='fluent'] {
+  /* ============ Socle ============ */
+  --kt-primary: #0f6cbd; /* brand-80 — blanc 5.4:1 */
+  --kt-danger: #c50f1f; /* status-danger — blanc 6.1:1 */
+  --kt-neutral: #424242;
+  --kt-surface: #fafafa; /* neutral-background-2 */
+  --kt-on-surface: #242424;
+  --kt-muted: #616161; /* neutral-foreground-3 */
+  --kt-outline: #d1d1d1; /* neutral-stroke-1 */
+  --kt-outline-strong: #757575;
+  --kt-font: 'Segoe UI Variable', 'Segoe UI', system-ui, sans-serif;
+
+  /* ============ Géométrie ============ */
+  --kt-control-radius: 4px; /* border-radius-medium */
+  --btn-radius: 4px;
+  --chip-radius: 4px;
+
+  /* ============ Champs ============ */
+  --field-bg: #ffffff;
+
+  /* ============ Boutons : élévation subtile Fluent ============ */
+  --btn-shadow: 0 1px 2px rgb(0 0 0 / 10%);
+  --btn-font-weight: 600; /* les boutons Fluent sont en semibold (rétrofit lot 6) */
+  --btn-on-primary-container: #0c4f87;
+  --btn-on-danger-container: #7a0c14;
+  --btn-on-neutral-container: #1f1f1f;
+
+  /* ============ Select / tooltip ============ */
+  --select-popup-shadow: 0 8px 16px rgb(0 0 0 / 14%); /* shadow-16 */
+  --tooltip-bg: #242424;
+  --tooltip-fg: #ffffff;
+
+  /* ============ Dialog (Fluent 2 : rayon 8, élévation 16 héritée) ============ */
+  --dialog-radius: 8px;
+  --dialog-border-width: 0;
+
+  /* ============ Card (Fluent 2 : rayon 8, élévation 4 → 8 au survol) ============ */
+  --card-radius: 8px;
+  --card-filled-bg: #f5f5f5; /* neutral-background-3 */
+  --card-shadow: 0 1px 2px rgb(0 0 0 / 12%), 0 0 2px rgb(0 0 0 / 8%); /* shadow-4 */
+  --card-shadow-hover: 0 4px 8px rgb(0 0 0 / 14%), 0 0 2px rgb(0 0 0 / 10%); /* shadow-8 */
+  --card-transition: box-shadow 150ms ease;
+}