/* ==========================================================
   MYLIB - MOTEUR DE THÈMES MODULAIRE & DESIGN TOKENS
   Auteur : ArchiSys3.0 & AImi (Architecture R&D)
   ========================================================== */

/* ----------------------------------------------------------
   1. THÈME NUIT SOMBRE (Midnight Slate & Indigo)
   ---------------------------------------------------------- */
html.dark,
html[data-theme="dark"] {
  --bg-app: #020617;
  --bg-header: rgba(15, 23, 42, 0.95);
  --bg-sidebar: #0b0f19;
  --bg-list: #090d16;
  --bg-main: #020617;
  --bg-card: #0b0f19;
  --bg-card-hover: rgba(30, 41, 59, 0.5);
  --bg-card-active: rgba(49, 46, 129, 0.4);
  --border-color: #1e293b;
  --border-subtle: rgba(30, 41, 59, 0.8);
  --text-main: #f8fafc;
  --text-muted: #94a3b8;
  --text-secondary: #94a3b8;
  --accent-color: #6366f1;
  --accent-hover: #4f46e5;
  --accent-badge-bg: rgba(99, 102, 241, 0.2);
  --accent-badge-border: rgba(99, 102, 241, 0.4);
  --accent-badge-text: #818cf8;
  --code-bg: #0d1117;
  --code-border: #30363d;
  --code-text: #c9d1d9;
  --input-bg: #0b0f19;
  --input-border: #1e293b;
  --modal-bg: #0f172a;
  --hero-bg: linear-gradient(135deg, rgba(15, 23, 42, 0.95), rgba(30, 27, 75, 0.4), rgba(15, 23, 42, 0.95));
  --hero-border: #1e293b;
  --hero-text: #f8fafc;
  --shadow-subtle: 0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --shadow-elevation: 0 4px 14px 0 rgba(0, 0, 0, 0.5);
  --item-action-bg: rgba(15, 23, 42, 0.9);
  --item-action-border: rgba(51, 65, 85, 0.7);
}

/* ----------------------------------------------------------
   2. THÈME GITHUB LIGHT (Blanc Pur, Gris Technique & Bleu Dev)
   ---------------------------------------------------------- */
html[data-theme="github"] {
  --bg-app: #ffffff;
  --bg-header: #f6f8fa;
  --bg-sidebar: #f6f8fa;
  --bg-list: #ffffff;
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3f4f6;
  --bg-card-active: #ddf4ff;
  --border-color: #d0d7de;
  --border-subtle: #eaeef2;
  --text-main: #1f2328;
  --text-muted: #656d76;
  --text-secondary: #475569;
  --accent-color: #0969da;
  --accent-hover: #0860ca;
  --accent-badge-bg: #ddf4ff;
  --accent-badge-border: #54aeff;
  --accent-badge-text: #0969da;
  --code-bg: #f6f8fa;
  --code-border: #d0d7de;
  --code-text: #1f2328;
  --input-bg: #ffffff;
  --input-border: #d0d7de;
  --modal-bg: #ffffff;
  --hero-bg: linear-gradient(135deg, #f6f8fa 0%, #ffffff 100%);
  --hero-border: #d0d7de;
  --hero-text: #1f2328;
  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
  --shadow-elevation: 0 4px 14px 0 rgba(0, 0, 0, 0.08);
  --item-action-bg: #ffffff;
  --item-action-border: #d0d7de;
}

/* ----------------------------------------------------------
   3. THÈME WARM PAPER (Crème Ivoire, Esprit Notion & iA Writer)
   ---------------------------------------------------------- */
html[data-theme="paper"] {
  --bg-app: #fbf9f4;
  --bg-header: #f4efe6;
  --bg-sidebar: #f4efe6;
  --bg-list: #fbf9f4;
  --bg-main: #fdfbf7;
  --bg-card: #ffffff;
  --bg-card-hover: #f7f2ea;
  --bg-card-active: #faebd7;
  --border-color: #e5ded3;
  --border-subtle: #eee8de;
  --text-main: #292524;
  --text-muted: #78716c;
  --text-secondary: #57534e;
  --accent-color: #c2410c;
  --accent-hover: #9a3412;
  --accent-badge-bg: #ffedd5;
  --accent-badge-border: #fdba74;
  --accent-badge-text: #9a3412;
  --code-bg: #f5f0e8;
  --code-border: #e6ded1;
  --code-text: #292524;
  --input-bg: #ffffff;
  --input-border: #e5ded3;
  --modal-bg: #fdfbf7;
  --hero-bg: linear-gradient(135deg, #f5efe6 0%, #fdfbf7 100%);
  --hero-border: #e5ded3;
  --hero-text: #292524;
  --shadow-subtle: 0 1px 3px 0 rgba(41, 37, 36, 0.06);
  --shadow-elevation: 0 4px 14px 0 rgba(41, 37, 36, 0.09);
  --item-action-bg: #ffffff;
  --item-action-border: #e5ded3;
}

/* ----------------------------------------------------------
   4. THÈME STUDIO LAVANDE (Pastel Créatif, Lilas & Violet Figma/Arc)
   ---------------------------------------------------------- */
html[data-theme="lavender"] {
  --bg-app: #faf5ff;
  --bg-header: #ffffff;
  --bg-sidebar: #f3e8ff;
  --bg-list: #faf5ff;
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f3e8ff;
  --bg-card-active: #ede9fe;
  --border-color: #e9d5ff;
  --border-subtle: #f5d0fe;
  --text-main: #3b0764;
  --text-muted: #7e22ce;
  --text-secondary: #6b21a8;
  --accent-color: #9333ea;
  --accent-hover: #7e22ce;
  --accent-badge-bg: #f3e8ff;
  --accent-badge-border: #d8b4fe;
  --accent-badge-text: #7e22ce;
  --code-bg: #faf5ff;
  --code-border: #e9d5ff;
  --code-text: #3b0764;
  --input-bg: #ffffff;
  --input-border: #d8b4fe;
  --modal-bg: #ffffff;
  --hero-bg: linear-gradient(135deg, #f3e8ff 0%, #ffffff 100%);
  --hero-border: #e9d5ff;
  --hero-text: #3b0764;
  --shadow-subtle: 0 1px 3px 0 rgba(88, 28, 135, 0.05);
  --shadow-elevation: 0 4px 14px 0 rgba(88, 28, 135, 0.08);
  --item-action-bg: #ffffff;
  --item-action-border: #e9d5ff;
}

/* ----------------------------------------------------------
   5. THÈME BICOLORE CONTRAST (Sidebar Nuit Marine & Page Blanche)
   ---------------------------------------------------------- */
html[data-theme="contrast"] {
  --bg-app: #ffffff;
  --bg-header: #0f172a;
  --bg-sidebar: #0f172a;
  --bg-list: #f8fafc;
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f1f5f9;
  --bg-card-active: #e2e8f0;
  --border-color: #cbd5e1;
  --border-subtle: #e2e8f0;
  --text-main: #0f172a;
  --text-muted: #64748b;
  --text-secondary: #334155;
  --accent-color: #0284c7;
  --accent-hover: #0369a1;
  --accent-badge-bg: #e0f2fe;
  --accent-badge-border: #bae6fd;
  --accent-badge-text: #0284c7;
  --code-bg: #0f172a;
  --code-border: #334155;
  --code-text: #f8fafc;
  --input-bg: #ffffff;
  --input-border: #cbd5e1;
  --modal-bg: #ffffff;
  --hero-bg: linear-gradient(135deg, #f1f5f9 0%, #ffffff 100%);
  --hero-border: #cbd5e1;
  --hero-text: #0f172a;
  --shadow-subtle: 0 1px 3px 0 rgba(15, 23, 42, 0.06);
  --shadow-elevation: 0 4px 14px 0 rgba(15, 23, 42, 0.1);
  --item-action-bg: #ffffff;
  --item-action-border: #cbd5e1;
}

/* ----------------------------------------------------------
   6. THÈME CLICKUP DAY (SaaS Moderne, Blanc Nacré & Gradient ClickUp)
   ---------------------------------------------------------- */
html[data-theme="clickup-day"] {
  --bg-app: #f8f9fb;
  --bg-header: #ffffff;
  --bg-sidebar: #f6f7fb;
  --bg-list: #f8f9fb;
  --bg-main: #ffffff;
  --bg-card: #ffffff;
  --bg-card-hover: #f0f2f7;
  --bg-card-active: #eceffd;
  --border-color: #e4e7ec;
  --border-subtle: #edf0f5;
  --text-main: #1e1f24;
  --text-muted: #6e7687;
  --text-secondary: #475467;
  --accent-color: #7b2cbf;
  --accent-hover: #6a24a6;
  --accent-badge-bg: #f4ecfb;
  --accent-badge-border: #dcb8f7;
  --accent-badge-text: #7b2cbf;
  --code-bg: #f4f5f8;
  --code-border: #e4e7ec;
  --code-text: #1e1f24;
  --input-bg: #ffffff;
  --input-border: #d0d5dd;
  --modal-bg: #ffffff;
  --hero-bg: linear-gradient(135deg, #f6f7fb 0%, #ffffff 100%);
  --hero-border: #e4e7ec;
  --hero-text: #1e1f24;
  --shadow-subtle: 0 1px 3px 0 rgba(16, 24, 40, 0.06);
  --shadow-elevation: 0 4px 20px -2px rgba(123, 44, 191, 0.12);
  --item-action-bg: #ffffff;
  --item-action-border: #e4e7ec;
  --clickup-gradient: linear-gradient(135deg, #7b2cbf 0%, #ff007f 100%);
}

/* ----------------------------------------------------------
   7. THÈME CLICKUP NIGHT (Ardoise Velours Sombre & Néon Fuchsia)
   ---------------------------------------------------------- */
html[data-theme="clickup-night"],
html.dark[data-theme="clickup-night"] {
  --bg-app: #141418;
  --bg-header: #1a1a20;
  --bg-sidebar: #18181e;
  --bg-list: #16161c;
  --bg-main: #141418;
  --bg-card: #202028;
  --bg-card-hover: #292934;
  --bg-card-active: rgba(157, 78, 221, 0.25);
  --border-color: #2c2c38;
  --border-subtle: #242430;
  --text-main: #f5f5f7;
  --text-muted: #9e9ea7;
  --text-secondary: #b5b5c0;
  --accent-color: #9d4edd;
  --accent-hover: #b76eeb;
  --accent-badge-bg: rgba(157, 78, 221, 0.2);
  --accent-badge-border: rgba(157, 78, 221, 0.45);
  --accent-badge-text: #c77dff;
  --code-bg: #101014;
  --code-border: #2c2c38;
  --code-text: #f5f5f7;
  --input-bg: #18181e;
  --input-border: #2c2c38;
  --modal-bg: #1c1c24;
  --hero-bg: linear-gradient(135deg, #1c1c24 0%, #291b38 100%);
  --hero-border: #2c2c38;
  --hero-text: #f5f5f7;
  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.5);
  --shadow-elevation: 0 4px 22px 0 rgba(157, 78, 221, 0.2);
  --item-action-bg: #202028;
  --item-action-border: #383848;
  --clickup-gradient: linear-gradient(135deg, #9d4edd 0%, #ff007f 100%);
}

/* ----------------------------------------------------------
   8. THÈME COBALT & VERT FORÊT NIGHT (Abyssal Sombre, Bleu Cobalt Royal & Émeraude)
   ---------------------------------------------------------- */
html[data-theme="cobalt-forest-night"],
html.dark[data-theme="cobalt-forest-night"] {
  --bg-app: #080e1a;
  --bg-header: #0d1627;
  --bg-sidebar: #0b1322;
  --bg-list: #0a1120;
  --bg-main: #080e1a;
  --bg-card: #0f1c32;
  --bg-card-hover: #162642;
  --bg-card-active: rgba(37, 99, 235, 0.28);
  --border-color: #1e2f4d;
  --border-subtle: #16243d;
  --text-main: #f0f6fc;
  --text-muted: #8b9eb7;
  --text-secondary: #a3b8d2;
  --accent-color: #2563eb;
  --accent-hover: #3b82f6;
  --accent-badge-bg: rgba(37, 99, 235, 0.2);
  --accent-badge-border: rgba(37, 99, 235, 0.45);
  --accent-badge-text: #60a5fa;
  --code-bg: #091222;
  --code-border: #1e2f4d;
  --code-text: #f0f6fc;
  --input-bg: #0d1627;
  --input-border: #1e2f4d;
  --modal-bg: #0d1627;
  --hero-bg: linear-gradient(135deg, #0d1627 0%, #080e1a 100%);
  --hero-border: #1e2f4d;
  --hero-text: #f0f6fc;
  --shadow-subtle: 0 1px 3px 0 rgba(0, 0, 0, 0.4);
  --shadow-elevation: 0 4px 20px -2px rgba(37, 99, 235, 0.18);
  --item-action-bg: #0f1c32;
  --item-action-border: #1e2f4d;
  --clickup-gradient: linear-gradient(135deg, #2563eb 0%, #15803d 100%);
}

/* ----------------------------------------------------------
   9. THÈME COBALT & VERT FORÊT DAY (Blanc Nacré Épuré, Bleu Cobalt Royal & Forêt)
   ---------------------------------------------------------- */
html[data-theme="cobalt-forest-day"] {
  --bg-app: #e2eaf5;
  --bg-header: #ebf3fb;
  --bg-sidebar: #dbe7f4;
  --bg-list: #e4eef8;
  --bg-main: #edf5fc;
  --bg-card: #f4f8fd;
  --bg-card-hover: #e0edfa;
  --bg-card-active: #cfe2f8;
  --border-color: #bcd0ea;
  --border-subtle: #cde0f5;
  --text-main: #0f172a;
  --text-muted: #52637a;
  --text-secondary: #334155;
  --accent-color: #0047ab;
  --accent-hover: #1d4ed8;
  --accent-badge-bg: #dbe9fc;
  --accent-badge-border: #93c5fd;
  --accent-badge-text: #0047ab;
  --code-bg: #e1ebf6;
  --code-border: #bcd0ea;
  --code-text: #0f172a;
  --input-bg: #f5f9fd;
  --input-border: #bcd0ea;
  --modal-bg: #edf5fc;
  --hero-bg: linear-gradient(135deg, #dce9f8 0%, #d8f1e5 100%);
  --hero-border: #bad0ea;
  --hero-text: #0f172a;
  --shadow-subtle: 0 1px 3px 0 rgba(0, 71, 171, 0.06);
  --shadow-elevation: 0 4px 20px -2px rgba(0, 71, 171, 0.12);
  --item-action-bg: #f4f8fd;
  --item-action-border: #bcd0ea;
  --btn-gradient-shadow: rgba(0, 71, 171, 0.3);
  --btn-gradient-shadow-hover: rgba(0, 71, 171, 0.45);
  --card-active-shadow: rgba(0, 71, 171, 0.15);
  --clickup-gradient: linear-gradient(135deg, #0047ab 0%, #15803d 100%);
}

html[data-theme="cobalt-forest-day"] ::selection,
html[data-theme="cobalt-forest-night"] ::selection {
  background-color: rgba(37, 99, 235, 0.25) !important;
  color: inherit !important;
}



/* Specificités du Thème Bicolore pour la Sidebar sombre */
html[data-theme="contrast"] #sidebarNav,
html[data-theme="contrast"] #sidebarNavCollapsedRail {
  color: #f8fafc;
}
html[data-theme="contrast"] #sidebarNav .border-slate-800,
html[data-theme="contrast"] #sidebarNavCollapsedRail .border-slate-800 {
  border-color: #1e293b !important;
}
html[data-theme="contrast"] #sidebarNav .text-slate-400,
html[data-theme="contrast"] #sidebarNav .text-slate-500 {
  color: #94a3b8 !important;
}
html[data-theme="contrast"] #sidebarNav button.bg-slate-800 {
  background-color: #1e293b !important;
  color: #f8fafc !important;
}
html[data-theme="contrast"] #sidebarNav button:hover {
  background-color: #334155 !important;
  color: #ffffff !important;
}
html[data-theme="contrast"] header {
  background-color: #0f172a !important;
  border-color: #1e293b !important;
}
html[data-theme="contrast"] header .text-slate-100 {
  color: #f8fafc !important;
}
html[data-theme="contrast"] header nav button {
  color: #94a3b8 !important;
}
html[data-theme="contrast"] header nav button:hover {
  color: #ffffff !important;
}

/* ==========================================================
   APPLICATION UNIVERSELLE DES TOKENS SUR TOUS LES THÈMES
   ========================================================== */
body {
  background-color: var(--bg-app) !important;
  color: var(--text-main) !important;
}

/* En-tête Universel */
header {
  background-color: var(--bg-header) !important;
  border-color: var(--border-color) !important;
}
header .text-slate-100 {
  color: var(--text-main) !important;
}
header .border-slate-800 {
  border-color: var(--border-color) !important;
}
header #syncBadgeBtn,
header #topTocBtn,
header #focusModeBtn,
header button.text-slate-200 {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
  box-shadow: var(--shadow-subtle) !important;
}
header #syncBadgeBtn:hover,
header #topTocBtn:hover,
header #focusModeBtn:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
}
header nav button {
  color: var(--text-secondary) !important;
}
header nav button:hover {
  color: var(--text-main) !important;
}
header nav button.text-indigo-400 {
  color: var(--accent-color) !important;
}

/* Sidebar Gauche Universelle (Tous thèmes sauf exception contrast) */
html:not([data-theme="contrast"]) #sidebarNav,
html:not([data-theme="contrast"]) #sidebarNavCollapsedRail {
  background-color: var(--bg-sidebar) !important;
  border-color: var(--border-color) !important;
}
html:not([data-theme="contrast"]) #sidebarNav .border-slate-800,
html:not([data-theme="contrast"]) #sidebarNavCollapsedRail .border-slate-800 {
  border-color: var(--border-color) !important;
}
html:not([data-theme="contrast"]) #sidebarNav .text-slate-400,
html:not([data-theme="contrast"]) #sidebarNav .text-slate-500 {
  color: var(--text-muted) !important;
}
html:not([data-theme="contrast"]) #sidebarNav button.bg-slate-800 {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-subtle) !important;
}
html:not([data-theme="contrast"]) #sidebarNav button:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
}
html:not([data-theme="contrast"]) #sidebarNav button.bg-indigo-950\/70,
html:not([data-theme="contrast"]) #sidebarNav button.bg-indigo-950\/50 {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border-color: var(--accent-badge-border) !important;
  font-weight: 600 !important;
}

/* Section Liste des Prompts Universelle (Sidebar 2) */
#promptListSection,
#promptListCollapsedRail {
  background-color: var(--bg-list) !important;
  border-color: var(--border-color) !important;
}
#promptListSection .border-slate-800 {
  border-color: var(--border-color) !important;
}
#searchInput {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-main) !important;
}
#searchInput:focus {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px var(--accent-badge-bg) !important;
}
#searchInput::placeholder {
  color: var(--text-muted) !important;
}
#sortSelect {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-main) !important;
}
#promptItemsList > div {
  border-color: var(--border-subtle) !important;
}
#promptItemsList > div:hover {
  background-color: var(--bg-card-hover) !important;
}
#promptItemsList > div.prompt-item-active,
#promptItemsList > div.bg-indigo-950\/50,
#promptItemsList > div.bg-indigo-950\/40 {
  background-color: var(--bg-card-active) !important;
  border-left: 3px solid var(--accent-color) !important;
}
#promptItemsList > div.prompt-item-active h4,
#promptItemsList > div.bg-indigo-950\/50 h4,
#promptItemsList > div.bg-indigo-950\/40 h4,
#promptItemsList h4.text-indigo-200 {
  color: var(--accent-color) !important;
  font-weight: 700 !important;
}
#promptItemsList > div.prompt-item-active .text-slate-400,
#promptItemsList > div.prompt-item-active .text-slate-500,
#promptItemsList > div.bg-indigo-950\/50 .text-slate-400,
#promptItemsList > div.bg-indigo-950\/50 .text-slate-500 {
  color: var(--text-muted) !important;
}
#promptItemsList > div.prompt-item-active .bg-slate-900\/95,
#promptItemsList > div.bg-indigo-950\/50 .bg-slate-900\/95 {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
}
#promptItemsList h4 {
  color: var(--text-main) !important;
}
#promptItemsList .text-slate-400 {
  color: var(--text-muted) !important;
}
#promptItemsList .bg-slate-800\/80 {
  background-color: var(--bg-card) !important;
  color: var(--text-muted) !important;
  border: 1px solid var(--border-subtle) !important;
}

/* Colonne Principale & Détail Universelle */
#mainContent {
  background-color: var(--bg-main) !important;
}
#mainContent .bg-slate-900,
#mainContent .bg-slate-900\/60,
#mainContent .bg-slate-900\/70,
#mainContent .bg-slate-900\/40,
#mainContent .bg-slate-900\/30 {
  background-color: var(--bg-header) !important;
}
#mainContent .border-slate-800,
#mainContent .border-slate-800\/60 {
  border-color: var(--border-color) !important;
}
#mainContent h2 {
  color: var(--text-main) !important;
}
#mainContent .text-slate-400 {
  color: var(--text-secondary) !important;
}
#mainContent .text-slate-500 {
  color: var(--text-muted) !important;
}
#mainContent .text-slate-200,
#mainContent .text-slate-100 {
  color: var(--text-main) !important;
}
#mainContent .bg-slate-800\/80,
#mainContent .bg-slate-800 {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}
#mainContent .bg-indigo-950,
#mainContent .bg-indigo-950\/80 {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border-color: var(--accent-badge-border) !important;
}
#mainContent .bg-slate-950 {
  background-color: var(--bg-main) !important;
}

/* Bannière Hero Dossier Adaptative & Cartes Dashboard */
.folder-hero-card {
  background: var(--hero-bg) !important;
  border: 1px solid var(--hero-border) !important;
  box-shadow: var(--shadow-elevation) !important;
  color: var(--hero-text) !important;
  transition: all 0.25s ease;
}
html:not(.dark) .folder-hero-card h2 {
  color: var(--text-main) !important;
}
html:not(.dark) .folder-hero-card p {
  color: var(--text-secondary) !important;
}
html:not(.dark) .folder-hero-card .text-slate-400 {
  color: var(--text-secondary) !important;
}
html:not(.dark) .folder-hero-card .text-slate-500 {
  color: var(--text-muted) !important;
}

.folder-child-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-subtle) !important;
  color: var(--text-main) !important;
  transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease, border-color 0.2s ease;
}
.folder-child-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-elevation) !important;
  border-color: var(--accent-color) !important;
}
html:not(.dark) .folder-child-card h4 {
  color: var(--text-main) !important;
}
html:not(.dark) .folder-child-card .text-slate-500 {
  color: var(--text-muted) !important;
}

/* Micro-Boutons d'Actions Rapides d'Arborescence & Relief */
.prompt-item-action-bar {
  background-color: var(--item-action-bg) !important;
  border: 1px solid var(--item-action-border) !important;
  box-shadow: var(--shadow-subtle) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: opacity 0.15s ease, transform 0.15s ease;
}
@media (min-width: 768px) {
  .prompt-list-item .prompt-item-action-bar {
    opacity: 0;
    pointer-events: none;
    transform: translateY(-1px);
  }
  .prompt-list-item:hover .prompt-item-action-bar,
  .prompt-list-item:focus-within .prompt-item-action-bar {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }
}
.prompt-item-action-bar button {
  color: var(--text-secondary) !important;
  transition: all 0.15s ease;
}
.prompt-item-action-bar button:hover {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-color) !important;
}

/* Typographie & Métadonnées Arborescence (Contraste WCAG AAA) */
.prompt-item-meta {
  color: var(--text-secondary) !important;
  font-weight: 500;
}
.prompt-item-tokens {
  color: var(--text-muted) !important;
}

/* Prose Markdown */
html:not(.dark) .prose-custom h1 { color: var(--text-main) !important; border-bottom: 1px solid var(--border-color) !important; }
html:not(.dark) .prose-custom h2 { color: var(--text-main) !important; border-bottom: 1px solid var(--border-color) !important; }
html:not(.dark) .prose-custom h3 { color: var(--text-main) !important; }
html:not(.dark) .prose-custom p,
html:not(.dark) .prose-custom ul,
html:not(.dark) .prose-custom ol { color: var(--text-main) !important; }
html:not(.dark) .prose-custom blockquote {
  border-left-color: var(--accent-color) !important;
  background: var(--accent-badge-bg) !important;
  color: var(--text-muted) !important;
}
html:not(.dark) .prose-custom table th { background: var(--bg-sidebar) !important; color: var(--text-main) !important; border-color: var(--border-color) !important; }
html:not(.dark) .prose-custom table td { border-color: var(--border-color) !important; color: var(--text-main) !important; }
html:not(.dark) .prose-custom hr { border-top-color: var(--border-color) !important; }
html:not(.dark) .prose-custom code {
  background: var(--bg-sidebar) !important;
  color: var(--accent-color) !important;
  border: 1px solid var(--border-color) !important;
}
html:not(.dark) .prompt-var-tag {
  background: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border-color: var(--accent-badge-border) !important;
}

/* Blocs de Code Markdown */
html:not(.dark) .prose-custom pre,
html:not(.dark) pre.bg-slate-950,
html:not(.dark) #previewPane pre {
  background: var(--code-bg) !important;
  border: 1px solid var(--code-border) !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05);
}
html:not(.dark) .prose-custom pre code,
html:not(.dark) pre.bg-slate-950 code,
html:not(.dark) #previewPane pre code {
  color: var(--code-text) !important;
}

/* Éditeur & Modales */
#editTitle,
#editFilename,
#editCategory,
#editModel,
#editTags {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-main) !important;
}
#editContent {
  background-color: var(--input-bg) !important;
  color: var(--text-main) !important;
}
#previewPane {
  background-color: var(--bg-app) !important;
}
#categoryModal > div,
#variableModal > div,
#importModal > div,
#purgeModal > div {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
}

/* Dropdown Menu de Thèmes */
#themeDropdownMenu {
  background-color: var(--modal-bg);
  border-color: var(--border-color);
  color: var(--text-main);
}
#themePickerBtn {
  background-color: var(--bg-card);
  border-color: var(--border-color);
  color: var(--text-main);
}
#themePickerBtn:hover {
  background-color: var(--bg-card-hover);
}

/* Contraste Parfait en Mode Clair (GitHub, Papier, Lavande, Contrast) */
html:not(.dark) #themeDropdownMenu {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
}
html:not(.dark) #themeDropdownMenu .text-slate-200 {
  color: var(--text-main) !important;
  font-weight: 600 !important;
}
html:not(.dark) #themeDropdownMenu .text-slate-400 {
  color: var(--text-muted) !important;
}
html:not(.dark) #themeDropdownMenu .border-slate-800\/80 {
  border-color: var(--border-color) !important;
  color: var(--text-muted) !important;
}
html:not(.dark) #themeDropdownMenu button:hover {
  background-color: var(--bg-card-hover) !important;
}

/* Dropdown Ingestion Multi-Formats Nouveau (Sous-Phase 48.1) */
#newPromptDropdownMenu {
  background-color: var(--modal-bg);
  border-color: var(--border-color);
  color: var(--text-main);
}
html:not(.dark) #newPromptDropdownMenu {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
  box-shadow: 0 14px 35px rgba(0, 0, 0, 0.12) !important;
}
html:not(.dark) #newPromptDropdownMenu .text-slate-100,
html:not(.dark) #newPromptDropdownMenu .text-slate-200 {
  color: var(--text-main) !important;
  font-weight: 600 !important;
}
html:not(.dark) #newPromptDropdownMenu .text-slate-400 {
  color: var(--text-muted) !important;
}
html:not(.dark) #newPromptDropdownMenu .border-slate-800\/80,
html:not(.dark) #newPromptDropdownMenu .border-slate-800\/60 {
  border-color: var(--border-color) !important;
}
html:not(.dark) #newPromptDropdownMenu button:hover {
  background-color: var(--bg-card-hover) !important;
}

/* ==========================================================
   COLORATION SYNTAXIQUE DES CODES (PRISM.JS)
   ========================================================== */
html:not(.dark) .token.comment,
html:not(.dark) .token.prolog,
html:not(.dark) .token.doctype,
html:not(.dark) .token.cdata { color: #94a3b8 !important; font-style: italic; }
html:not(.dark) .token.punctuation { color: #475569 !important; }
html:not(.dark) .token.property,
html:not(.dark) .token.tag,
html:not(.dark) .token.boolean,
html:not(.dark) .token.number { color: #0284c7 !important; }
html:not(.dark) .token.selector,
html:not(.dark) .token.attr-name,
html:not(.dark) .token.string,
html:not(.dark) .token.char { color: #16a34a !important; }
html:not(.dark) .token.operator,
html:not(.dark) .token.entity,
html:not(.dark) .token.url { color: #d97706 !important; }
html:not(.dark) .token.keyword { color: #7c3aed !important; font-weight: 600; }
html:not(.dark) .token.function,
html:not(.dark) .token.class-name { color: #2563eb !important; }
html:not(.dark) .token.regex { color: #ea580c !important; }
html:not(.dark) .token.variable { color: #4f46e5 !important; }

html.dark .token.comment,
html.dark .token.prolog,
html.dark .token.doctype,
html.dark .token.cdata { color: #8b949e !important; font-style: italic; }
html.dark .token.punctuation { color: #c9d1d9 !important; }
html.dark .token.property,
html.dark .token.tag,
html.dark .token.boolean,
html.dark .token.number { color: #79c0ff !important; }
html.dark .token.selector,
html.dark .token.attr-name,
html.dark .token.string,
html.dark .token.char { color: #a5d6ff !important; }
html.dark .token.operator,
html.dark .token.entity,
html.dark .token.url { color: #d2a8ff !important; }
html.dark .token.keyword { color: #ff7b72 !important; font-weight: 600; }
html.dark .token.function,
html.dark .token.class-name { color: #d2a8ff !important; }
html.dark .token.regex { color: #7ee787 !important; }
html.dark .token.variable { color: #ffa657 !important; }

/* ==========================================================
   CLASSES D'INGÉNIERIE ERGONOMIQUE & COMPOSANTS UNIFIÉS
   ========================================================== */

/* Boutons de Création Rapide Liste (Document & Dossier) */
.btn-create-doc {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12) !important;
}
.btn-create-doc:hover {
  background-color: var(--accent-hover) !important;
  transform: translateY(-1px);
}
.btn-create-folder {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-subtle) !important;
}
.btn-create-folder:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--accent-color) !important;
  transform: translateY(-1px);
}

/* Pills de Navigation du Sidebar 1 */
.sidebar-pill-active {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border: 1px solid var(--accent-badge-border) !important;
}
.sidebar-pill-inactive {
  color: var(--text-secondary) !important;
}
.sidebar-pill-inactive:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--text-main) !important;
}

/* Badges de Tags & Pills de Filtrage */
.tag-pill-btn {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary) !important;
}
.tag-pill-btn:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-badge-border) !important;
}
.tag-pill-active {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border-color: var(--accent-color) !important;
}

/* Bouton Footer de la Sidebar 1 (Paramètres & Outils) */
.sidebar-footer-btn {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
}
.sidebar-footer-btn:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--accent-color) !important;
}

/* ==========================================================
   STYLE CLICKUP & ACCORDÉONS RÉTRACTABLES (SIDEBAR 1)
   ========================================================== */
.btn-clickup-gradient {
  background: var(--clickup-gradient, linear-gradient(135deg, #7b2cbf 0%, #ff007f 100%)) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px var(--btn-gradient-shadow, rgba(123, 44, 191, 0.35)) !important;
  border: none !important;
  transition: all 0.2s ease !important;
}
.btn-clickup-gradient:hover {
  filter: brightness(1.1) !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 14px var(--btn-gradient-shadow-hover, rgba(123, 44, 191, 0.45)) !important;
}

/* En-têtes d'Accordéons Sidebar 1 */
/* En-têtes d'Accordéons Sidebar 1 */
.sidebar-accordion-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 6px 8px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  transition: all 0.15s ease;
  user-select: none;
  cursor: pointer;
}
.sidebar-accordion-header:hover {
  color: var(--text-main);
  background-color: var(--bg-card-hover);
}
.sidebar-accordion-chevron {
  transition: transform 0.22s cubic-bezier(0.4, 0, 0.2, 1);
  width: 14px;
  height: 14px;
}
.sidebar-accordion-header[data-collapsed="true"] .sidebar-accordion-chevron {
  transform: rotate(-90deg);
}
.sidebar-accordion-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.22s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.18s ease;
  overflow: hidden;
}
.sidebar-accordion-body.collapsed {
  grid-template-rows: 0fr !important;
  opacity: 0 !important;
  margin-top: 0 !important;
  pointer-events: none;
}
.sidebar-accordion-body > div {
  overflow: hidden;
  min-height: 0;
}

/* ==========================================================
   MOTEUR ARBORESCENT CONTINU & DESIGN SYSTEM CLICKUP
   ========================================================== */
:root {
  --clickup-purple: #7b2cbf;
  --clickup-fuchsia: #ff007f;
  --clickup-cyan: #00c0f3;
  --clickup-emerald: #00e699;
  --clickup-amber: #ffb800;
  --clickup-indigo: #4f46e5;
  --clickup-coral: #ff5722;
  --clickup-slate: #64748b;
  --tree-guide-color: #94a3b8;
}

html.dark,
html[data-theme="dark"],
html[data-theme="clickup-night"] {
  --tree-guide-color: #475569;
}

/* Guides Hiérarchiques Continus Multi-Niveaux */
.tree-item-container,
.tree-branch-container {
  position: relative;
  width: 100%;
}
.tree-row,
.tree-node-row {
  position: relative;
  display: flex;
  align-items: center;
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 28px;
  border-radius: 6px;
  transition: all 0.15s ease;
  user-select: none;
}
.tree-row:hover,
.tree-node-row:hover {
  background-color: var(--bg-card-hover);
}
.tree-node-row {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
}
.tree-node-actions-overlay {
  display: none;
  align-items: center;
  gap: 3px;
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  z-index: 20;
}
.tree-node-row:hover .tree-node-actions-overlay {
  display: flex;
}
.tree-node-actions-overlay .btn-card-action {
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  padding: 0 !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: var(--item-action-bg) !important;
  border: 1px solid var(--item-action-border) !important;
  color: var(--item-action-text) !important;
  box-shadow: none !important;
  transition: all 0.15s ease;
}
.tree-node-actions-overlay .btn-card-action:hover {
  background-color: var(--item-action-hover) !important;
  color: var(--text-main) !important;
  transform: scale(1.08);
}
.tree-row.active,
.tree-node-row.active {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border: 1px solid var(--accent-badge-border) !important;
  font-weight: 600;
}
.tree-node-title,
.tree-node-label {
  color: var(--text-main) !important;
  transition: color 0.15s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0 !important;
  flex: 1 1 auto !important;
  display: block !important;
  width: auto;
}
.tree-node-row:hover:not(.active) .tree-node-label {
  color: var(--text-main) !important;
}
.tree-node-row.active .tree-node-label {
  color: var(--accent-badge-text) !important;
  font-weight: 700 !important;
}

/* Guides Hiérarchiques Verticaux Continus S1 */
.tree-indent-guide {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: var(--border-color, rgba(255, 255, 255, 0.1));
  opacity: 0.75;
  pointer-events: none;
  z-index: 1;
}
.tree-branch-container:hover > .tree-node-row .tree-indent-guide {
  opacity: 1;
  background-color: var(--accent-color, #6366f1);
}

/* Typologie & Hiérarchie Visuelle Affirmée (Dossiers vs Documents) */
.tree-node-folder {
  font-weight: 600;
  letter-spacing: -0.01em;
}
.tree-node-folder .tree-node-label {
  font-weight: 600 !important;
  color: var(--text-main) !important;
}
.tree-node-doc {
  font-weight: 400;
  opacity: 0.94;
}
.tree-node-doc .tree-node-label {
  font-weight: 400 !important;
}
.tree-node-doc.active {
  opacity: 1;
}

.tree-guides-wrapper {
  display: flex;
  align-items: stretch;
  flex-shrink: 0;
  height: 28px;
}
.tree-guide-col {
  position: relative;
  width: 16px;
  flex-shrink: 0;
  height: 100%;
}
.tree-guide-line-vert {
  position: absolute;
  left: 7px;
  top: 0;
  bottom: 0;
  width: 1.5px;
  background-color: var(--tree-guide-color);
  opacity: 1;
}
.tree-guide-connector-t {
  position: absolute;
  left: 7px;
  top: 50%;
  width: 9px;
  height: 1.5px;
  background-color: var(--tree-guide-color);
  opacity: 1;
}
.tree-guide-connector-l {
  position: absolute;
  left: 7px;
  top: 0;
  height: 50%;
  width: 1.5px;
  background-color: var(--tree-guide-color);
  opacity: 1;
}
.tree-guide-connector-l-arm {
  position: absolute;
  left: 7px;
  top: 50%;
  width: 9px;
  height: 1.5px;
  background-color: var(--tree-guide-color);
  opacity: 1;
}

/* Pastilles de Couleurs ClickUp */
.clickup-color-dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
  box-shadow: 0 0 6px currentColor;
}

/* Badges de Statut ClickUp */
.clickup-status-pill {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 4px;
  text-transform: uppercase;
  flex-shrink: 0;
}
.clickup-status-folder {
  background: rgba(255, 184, 0, 0.15) !important;
  color: #d97706 !important;
  border: 1px solid rgba(255, 184, 0, 0.35) !important;
}
html.dark .clickup-status-folder,
html[data-theme="dark"] .clickup-status-folder,
html[data-theme="clickup-night"] .clickup-status-folder {
  color: #ffb800 !important;
}
.clickup-status-category {
  background: color-mix(in srgb, var(--pill-accent, var(--accent-color)) 15%, transparent) !important;
  color: var(--pill-accent, var(--accent-color)) !important;
  border: 1px solid color-mix(in srgb, var(--pill-accent, var(--accent-color)) 30%, transparent) !important;
  max-width: 110px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cartes Documents Riches ClickUp (Sidebar 2) */
.clickup-doc-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  border-radius: 0.75rem;
  padding: 0.625rem 0.75rem;
  margin-bottom: 0.375rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05), 0 1px 2px rgba(0, 0, 0, 0.03);
  transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  cursor: pointer;
  color: var(--text-main);
}
.clickup-doc-card:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--accent-color) !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-1px);
}
.clickup-doc-card.active {
  background-color: var(--bg-card-active) !important;
  border-color: var(--accent-color) !important;
  border-left: 3.5px solid var(--accent-color) !important;
  box-shadow: 0 4px 12px -2px var(--card-active-shadow, rgba(123, 44, 191, 0.15));
}

.clickup-doc-card .prompt-item-title {
  color: var(--text-main) !important;
}
.clickup-doc-card.active .prompt-item-title {
  color: var(--accent-color) !important;
  font-weight: 700 !important;
}
.clickup-doc-card .prompt-item-desc {
  color: var(--text-muted) !important;
}

.clickup-card-footer {
  border-top: 1px solid var(--border-subtle) !important;
  color: var(--text-secondary);
}
.card-meta-tokens {
  color: var(--text-main);
}
.card-meta-date {
  color: var(--text-muted);
}
.card-meta-tag {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border: 1px solid var(--accent-badge-border) !important;
}

/* Thème ClickUp Day : Perfectionnement Lumineux SaaS */
html[data-theme="clickup-day"] .clickup-doc-card {
  background-color: #ffffff !important;
  border-color: #e2e8f0 !important;
  box-shadow: 0 1px 3px rgba(16, 24, 40, 0.05), 0 1px 2px rgba(16, 24, 40, 0.03) !important;
}
html[data-theme="clickup-day"] .clickup-doc-card:hover {
  background-color: #f8fafc !important;
  border-color: #cbd5e1 !important;
}
html[data-theme="clickup-day"] .clickup-doc-card.active {
  background-color: #faf5ff !important;
  border-left-color: #7b2cbf !important;
  border-color: #d8b4fe !important;
}
html[data-theme="clickup-day"] .clickup-doc-card.active .prompt-item-title {
  color: #7b2cbf !important;
}
html[data-theme="clickup-day"] .card-meta-tag {
  background-color: #f3e8ff !important;
  color: #7b2cbf !important;
  border-color: #e9d5ff !important;
}
html[data-theme="clickup-day"] .clickup-card-footer {
  border-color: #f1f5f9 !important;
}

.tree-badge-count {
  font-size: 10px;
  font-family: monospace;
  padding: 1px 5px;
  border-radius: 8px;
  background-color: var(--bg-card);
  border: 1px solid var(--border-subtle);
  color: var(--text-secondary);
}

/* ==========================================================
   SUITE PRESSE-PAPIER : BOUTONS COPIER SUR BLOCS DE CODE
   ========================================================== */
.code-block-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 10px;
  background-color: var(--bg-card, #0f172a);
  border-bottom: 1px solid var(--border-color, #1e293b);
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 11px;
  user-select: none;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
}
.code-copy-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: var(--bg-card-hover, rgba(255, 255, 255, 0.05));
  border: 1px solid var(--border-subtle, rgba(255, 255, 255, 0.1));
  color: var(--text-muted, #94a3b8);
  font-size: 10px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
}
.code-copy-btn:hover {
  background-color: var(--accent-badge-bg);
  color: var(--text-main);
  border-color: var(--accent-badge-border);
}
.code-copy-btn.copied {
  background-color: rgba(16, 185, 129, 0.2) !important;
  border-color: rgba(16, 185, 129, 0.5) !important;
  color: #34d399 !important;
}

/* ==========================================================
   APPLICATION DES DESIGN TOKENS COBALT & FORÊT (NUIT & JOUR)
   Harmonisation intégrale et zonation feutrée sans blanc pur
   ========================================================== */
html[data-theme="cobalt-forest-night"] body,
html[data-theme="cobalt-forest-day"] body {
  background-color: var(--bg-app) !important;
  color: var(--text-main) !important;
}
html[data-theme="cobalt-forest-night"] header,
html[data-theme="cobalt-forest-day"] header {
  background-color: var(--bg-header) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-night"] header .text-slate-100,
html[data-theme="cobalt-forest-day"] header .text-slate-100 {
  color: var(--text-main) !important;
}
html[data-theme="cobalt-forest-night"] header .border-slate-800,
html[data-theme="cobalt-forest-day"] header .border-slate-800 {
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-night"] #sidebarNav,
html[data-theme="cobalt-forest-night"] #sidebarNavCollapsedRail,
html[data-theme="cobalt-forest-day"] #sidebarNav,
html[data-theme="cobalt-forest-day"] #sidebarNavCollapsedRail {
  background-color: var(--bg-sidebar) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-night"] #sidebarNav .border-slate-800,
html[data-theme="cobalt-forest-night"] #sidebarNavCollapsedRail .border-slate-800,
html[data-theme="cobalt-forest-day"] #sidebarNav .border-slate-800,
html[data-theme="cobalt-forest-day"] #sidebarNavCollapsedRail .border-slate-800 {
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-night"] #promptListSection,
html[data-theme="cobalt-forest-night"] #promptListCollapsedRail,
html[data-theme="cobalt-forest-day"] #promptListSection,
html[data-theme="cobalt-forest-day"] #promptListCollapsedRail {
  background-color: var(--bg-list) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-night"] #promptListSection .border-slate-800,
html[data-theme="cobalt-forest-day"] #promptListSection .border-slate-800 {
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-night"] #mainContent,
html[data-theme="cobalt-forest-day"] #mainContent {
  background-color: var(--bg-main) !important;
}
html[data-theme="cobalt-forest-night"] #mainContent .border-slate-800,
html[data-theme="cobalt-forest-day"] #mainContent .border-slate-800,
html[data-theme="cobalt-forest-day"] #mainContent .border-slate-800\/60,
html[data-theme="cobalt-forest-day"] #mainContent .border-slate-800\/40,
html[data-theme="cobalt-forest-day"] #mainContent .border-slate-800\/80 {
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-night"] #searchInput,
html[data-theme="cobalt-forest-night"] #sortSelect,
html[data-theme="cobalt-forest-night"] #editTitle,
html[data-theme="cobalt-forest-night"] #editFilename,
html[data-theme="cobalt-forest-night"] #editCategory,
html[data-theme="cobalt-forest-night"] #editParentId,
html[data-theme="cobalt-forest-night"] #editModel,
html[data-theme="cobalt-forest-night"] #editTags,
html[data-theme="cobalt-forest-night"] #editDescription,
html[data-theme="cobalt-forest-night"] #editContent,
html[data-theme="cobalt-forest-day"] #searchInput,
html[data-theme="cobalt-forest-day"] #sortSelect,
html[data-theme="cobalt-forest-day"] #editTitle,
html[data-theme="cobalt-forest-day"] #editFilename,
html[data-theme="cobalt-forest-day"] #editCategory,
html[data-theme="cobalt-forest-day"] #editParentId,
html[data-theme="cobalt-forest-day"] #editModel,
html[data-theme="cobalt-forest-day"] #editTags,
html[data-theme="cobalt-forest-day"] #editDescription,
html[data-theme="cobalt-forest-day"] #editContent {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--text-main) !important;
}
html[data-theme="cobalt-forest-night"] #previewPane,
html[data-theme="cobalt-forest-day"] #previewPane {
  background-color: var(--bg-app) !important;
}

/* ==========================================================
   HABILLAGE SUR-MESURE DE LA ZONE D'ÉDITION COBALT & FORÊT JOUR
   ========================================================== */
html[data-theme="cobalt-forest-day"] #editorPane {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-day"] #editorSplitContainer {
  background-color: var(--bg-main) !important;
}
html[data-theme="cobalt-forest-day"] .markdown-touch-ribbon {
  background-color: var(--bg-header) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-day"] .markdown-touch-ribbon > div > div {
  background-color: var(--input-bg) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-day"] .markdown-touch-ribbon button {
  color: var(--text-secondary) !important;
}
html[data-theme="cobalt-forest-day"] .markdown-touch-ribbon button:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
}
html[data-theme="cobalt-forest-day"] #editorSplitter {
  background-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-day"] #editorSplitter:hover {
  background-color: var(--accent-color) !important;
}
html[data-theme="cobalt-forest-day"] #editorMetaSection > div {
  background-color: var(--bg-header) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-day"] #editorMetaSection label {
  color: var(--text-muted) !important;
}
html[data-theme="cobalt-forest-day"] #detailHeaderCompactBar {
  background-color: var(--bg-header) !important;
  border-color: var(--border-color) !important;
}
html[data-theme="cobalt-forest-day"] #trashNavCount {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border-color: var(--accent-badge-border) !important;
}
html[data-theme="cobalt-forest-day"] #navTrash:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
}
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-900,
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-900\/90,
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-900\/60,
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-900\/40,
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-900\/30,
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-900\/20 {
  background-color: var(--bg-header) !important;
}
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-950,
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-950\/80 {
  background-color: var(--input-bg) !important;
}
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-800,
html[data-theme="cobalt-forest-day"] #mainContent .bg-slate-800\/80 {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

/* ==========================================================
   NORMALISATION CHROMATIQUE COBALT & FORÊT (JOUR & NUIT)
   Éradication absolue de toute nuance de violet, lavande et indigo
   ========================================================== */
html[data-theme="cobalt-forest-night"],
html[data-theme="cobalt-forest-day"] {
  --btn-gradient-shadow: rgba(37, 99, 235, 0.35);
  --btn-gradient-shadow-hover: rgba(37, 99, 235, 0.50);
  --card-active-shadow: rgba(37, 99, 235, 0.22);
}

/* 1. Surcharges des textes violets et indigo */
html[data-theme="cobalt-forest-night"] .text-indigo-400,
html[data-theme="cobalt-forest-night"] .text-indigo-300,
html[data-theme="cobalt-forest-night"] .text-indigo-200,
html[data-theme="cobalt-forest-night"] .text-purple-400,
html[data-theme="cobalt-forest-night"] .text-purple-300,
html[data-theme="cobalt-forest-night"] .text-purple-200,
html[data-theme="cobalt-forest-night"] .text-fuchsia-400,
html[data-theme="cobalt-forest-night"] .hover\:text-indigo-400:hover,
html[data-theme="cobalt-forest-night"] .hover\:text-indigo-300:hover,
html[data-theme="cobalt-forest-night"] .hover\:text-purple-400:hover,
html[data-theme="cobalt-forest-night"] .group-hover\:text-indigo-400:hover,
html[data-theme="cobalt-forest-day"] .text-indigo-400,
html[data-theme="cobalt-forest-day"] .text-indigo-300,
html[data-theme="cobalt-forest-day"] .text-indigo-200,
html[data-theme="cobalt-forest-day"] .text-purple-400,
html[data-theme="cobalt-forest-day"] .text-purple-300,
html[data-theme="cobalt-forest-day"] .text-purple-200,
html[data-theme="cobalt-forest-day"] .text-fuchsia-400,
html[data-theme="cobalt-forest-day"] .hover\:text-indigo-400:hover,
html[data-theme="cobalt-forest-day"] .hover\:text-indigo-300:hover,
html[data-theme="cobalt-forest-day"] .hover\:text-purple-400:hover,
html[data-theme="cobalt-forest-day"] .group-hover\:text-indigo-400:hover {
  color: var(--accent-badge-text, var(--accent-color)) !important;
}

/* 2. Surcharges des fonds de boutons d'action */
html[data-theme="cobalt-forest-night"] .bg-indigo-600,
html[data-theme="cobalt-forest-night"] .bg-purple-600,
html[data-theme="cobalt-forest-night"] .bg-indigo-500,
html[data-theme="cobalt-forest-night"] .bg-purple-500,
html[data-theme="cobalt-forest-night"] .hover\:bg-indigo-600:hover,
html[data-theme="cobalt-forest-night"] .hover\:bg-indigo-500:hover,
html[data-theme="cobalt-forest-night"] .hover\:bg-purple-600:hover,
html[data-theme="cobalt-forest-day"] .bg-indigo-600,
html[data-theme="cobalt-forest-day"] .bg-purple-600,
html[data-theme="cobalt-forest-day"] .bg-indigo-500,
html[data-theme="cobalt-forest-day"] .bg-purple-500,
html[data-theme="cobalt-forest-day"] .hover\:bg-indigo-600:hover,
html[data-theme="cobalt-forest-day"] .hover\:bg-indigo-500:hover,
html[data-theme="cobalt-forest-day"] .hover\:bg-purple-600:hover {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* 3. Surcharges des badges et conteneurs sombres */
html[data-theme="cobalt-forest-night"] .bg-indigo-950,
html[data-theme="cobalt-forest-night"] .bg-indigo-950\/80,
html[data-theme="cobalt-forest-night"] .bg-indigo-950\/70,
html[data-theme="cobalt-forest-night"] .bg-indigo-950\/60,
html[data-theme="cobalt-forest-night"] .bg-indigo-950\/50,
html[data-theme="cobalt-forest-night"] .bg-indigo-950\/40,
html[data-theme="cobalt-forest-night"] .bg-indigo-950\/20,
html[data-theme="cobalt-forest-night"] .bg-indigo-900\/40,
html[data-theme="cobalt-forest-night"] .bg-indigo-900\/60,
html[data-theme="cobalt-forest-night"] .bg-purple-950,
html[data-theme="cobalt-forest-night"] .bg-purple-950\/80,
html[data-theme="cobalt-forest-night"] .bg-purple-950\/60,
html[data-theme="cobalt-forest-night"] .bg-purple-950\/40,
html[data-theme="cobalt-forest-night"] .bg-purple-900\/50,
html[data-theme="cobalt-forest-day"] .bg-indigo-950,
html[data-theme="cobalt-forest-day"] .bg-indigo-950\/80,
html[data-theme="cobalt-forest-day"] .bg-indigo-950\/70,
html[data-theme="cobalt-forest-day"] .bg-indigo-950\/60,
html[data-theme="cobalt-forest-day"] .bg-indigo-950\/50,
html[data-theme="cobalt-forest-day"] .bg-indigo-950\/40,
html[data-theme="cobalt-forest-day"] .bg-indigo-950\/20,
html[data-theme="cobalt-forest-day"] .bg-indigo-900\/40,
html[data-theme="cobalt-forest-day"] .bg-indigo-900\/60,
html[data-theme="cobalt-forest-day"] .bg-purple-950,
html[data-theme="cobalt-forest-day"] .bg-purple-950\/80,
html[data-theme="cobalt-forest-day"] .bg-purple-950\/60,
html[data-theme="cobalt-forest-day"] .bg-purple-950\/40,
html[data-theme="cobalt-forest-day"] .bg-purple-900\/50 {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
}

/* 4. Surcharges des bordures */
html[data-theme="cobalt-forest-night"] .border-indigo-500,
html[data-theme="cobalt-forest-night"] .border-purple-500,
html[data-theme="cobalt-forest-night"] .border-indigo-600,
html[data-theme="cobalt-forest-night"] .border-purple-600,
html[data-theme="cobalt-forest-night"] .hover\:border-indigo-500\/60:hover,
html[data-theme="cobalt-forest-night"] .hover\:border-purple-500\/60:hover,
html[data-theme="cobalt-forest-day"] .border-indigo-500,
html[data-theme="cobalt-forest-day"] .border-purple-500,
html[data-theme="cobalt-forest-day"] .border-indigo-600,
html[data-theme="cobalt-forest-day"] .border-purple-600,
html[data-theme="cobalt-forest-day"] .hover\:border-indigo-500\/60:hover,
html[data-theme="cobalt-forest-day"] .hover\:border-purple-500\/60:hover {
  border-color: var(--accent-color) !important;
}

html[data-theme="cobalt-forest-night"] .border-indigo-800,
html[data-theme="cobalt-forest-night"] .border-indigo-800\/80,
html[data-theme="cobalt-forest-night"] .border-indigo-800\/60,
html[data-theme="cobalt-forest-night"] .border-indigo-800\/40,
html[data-theme="cobalt-forest-night"] .border-purple-800,
html[data-theme="cobalt-forest-night"] .border-purple-800\/80,
html[data-theme="cobalt-forest-night"] .border-purple-800\/60,
html[data-theme="cobalt-forest-day"] .border-indigo-800,
html[data-theme="cobalt-forest-day"] .border-indigo-800\/80,
html[data-theme="cobalt-forest-day"] .border-indigo-800\/60,
html[data-theme="cobalt-forest-day"] .border-indigo-800\/40,
html[data-theme="cobalt-forest-day"] .border-purple-800,
html[data-theme="cobalt-forest-day"] .border-purple-800\/80,
html[data-theme="cobalt-forest-day"] .border-purple-800\/60 {
  border-color: var(--accent-badge-border) !important;
}

/* 5. Focus des inputs */
html[data-theme="cobalt-forest-night"] input:focus,
html[data-theme="cobalt-forest-night"] select:focus,
html[data-theme="cobalt-forest-night"] textarea:focus,
html[data-theme="cobalt-forest-day"] input:focus,
html[data-theme="cobalt-forest-day"] select:focus,
html[data-theme="cobalt-forest-day"] textarea:focus {
  border-color: var(--accent-color) !important;
  outline: none !important;
}

/* 6. Composants dédiés : Toasts, Dropzone, Sliders, Surlignage */
html[data-theme="cobalt-forest-night"] #toast,
html[data-theme="cobalt-forest-day"] #toast {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
}
html[data-theme="cobalt-forest-night"] #dropZoneRoot,
html[data-theme="cobalt-forest-day"] #dropZoneRoot {
  border-color: var(--accent-color) !important;
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
}
html[data-theme="cobalt-forest-night"] input[type="range"],
html[data-theme="cobalt-forest-day"] input[type="range"] {
  accent-color: var(--accent-color) !important;
}
html[data-theme="cobalt-forest-night"] ::selection,
html[data-theme="cobalt-forest-day"] ::selection {
  background-color: rgba(37, 99, 235, 0.35) !important;
  color: #ffffff !important;
}
html[data-theme="cobalt-forest-night"] #settingsStorageBar,
html[data-theme="cobalt-forest-day"] #settingsStorageBar {
  background-color: var(--accent-color) !important;
}
html[data-theme="cobalt-forest-night"] .clickup-doc-card.active,
html[data-theme="cobalt-forest-day"] .clickup-doc-card.active {
  border-color: var(--accent-color) !important;
  border-left-color: var(--accent-color) !important;
  background-color: var(--bg-card-active) !important;
  box-shadow: 0 4px 12px -2px var(--card-active-shadow) !important;
}
html[data-theme="cobalt-forest-night"] .clickup-doc-card.active .prompt-item-title,
html[data-theme="cobalt-forest-day"] .clickup-doc-card.active .prompt-item-title {
  color: var(--accent-color) !important;
  font-weight: 700 !important;
}
html[data-theme="cobalt-forest-night"] .card-meta-tag,
html[data-theme="cobalt-forest-day"] .card-meta-tag {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border-color: var(--accent-badge-border) !important;
}

/* ==========================================================
   HARMONISATION UNIVERSELLE DES BOUTONS & ÉLÉMENTS D'ACTION
   Raccordement systématique aux Design Tokens de Thème
   (Couvre 100% des thèmes clairs et sombres)
   ========================================================== */

/* 1. Boutons secondaires, utilitaires et barres d'outils */
button.bg-slate-800,
button.bg-slate-800\/80,
button.bg-slate-800\/90,
button.bg-slate-900,
button.bg-slate-900\/80,
button.bg-slate-900\/50,
button.bg-slate-950\/80,
button.bg-slate-950\/60,
.btn-theme-action,
.btn-theme-secondary {
  background-color: var(--item-action-bg) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--item-action-border) !important;
  box-shadow: var(--shadow-subtle) !important;
}

button.bg-slate-800:hover,
button.bg-slate-800\/80:hover,
button.bg-slate-800\/90:hover,
button.bg-slate-900:hover,
button.bg-slate-900\/80:hover,
button.bg-slate-900\/50:hover,
button.bg-slate-950\/80:hover,
button.bg-slate-950\/60:hover,
.btn-theme-action:hover,
.btn-theme-secondary:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

/* 2. Boutons d'icône discrets au survol (p-1, p-1.5, etc.) */
button.hover\:bg-slate-800:hover,
button.hover\:bg-slate-700:hover,
button.hover\:bg-slate-850:hover,
a.hover\:bg-slate-800:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
}

/* 3. Boutons et contrôles de la barre supérieure (Header) */
#themePickerBtn,
#syncBadgeBtn,
#topTocBtn,
#focusModeBtn {
  background-color: var(--item-action-bg) !important;
  border-color: var(--item-action-border) !important;
  color: var(--text-main) !important;
}
#themePickerBtn:hover,
#syncBadgeBtn:hover,
#topTocBtn:hover,
#focusModeBtn:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--accent-color) !important;
  color: var(--accent-color) !important;
}

/* 4. Bouton Presse-Papier Rapide & Badges d'Action Rapide */
.btn-clipboard-quick {
  background-color: var(--accent-badge-bg) !important;
  border: 1px solid var(--accent-badge-border) !important;
  color: var(--accent-badge-text) !important;
  box-shadow: var(--shadow-subtle) !important;
  transition: all 0.15s ease !important;
}
.btn-clipboard-quick:hover {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}

/* 5. Ruban d'outils Markdown Tactile (Éditeur) */
.markdown-touch-ribbon {
  background-color: var(--bg-header) !important;
  border-color: var(--border-color) !important;
}
.markdown-touch-ribbon > div > div {
  background-color: var(--item-action-bg) !important;
  border-color: var(--item-action-border) !important;
}
.markdown-touch-ribbon button {
  color: var(--text-secondary) !important;
  transition: all 0.12s ease !important;
}
.markdown-touch-ribbon button:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
}

/* 6. Modales Contextuelles : Conteneurs, cartes et boutons de fermeture */
#settingsModal > div,
#trashModal > div,
#tagsManagerModal > div,
#categoryModal > div,
#purgeModal > div,
#importExportModal > div,
#variableModal > div,
#insertModal > div,
#entityEditorModal > div,
#confirmModal > div,
#tocDrawer {
  background-color: var(--modal-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

#settingsModal .bg-slate-900,
#trashModal .bg-slate-900,
#tagsManagerModal .bg-slate-900,
#categoryModal .bg-slate-900,
#purgeModal .bg-slate-900,
#importExportModal .bg-slate-900,
#variableModal .bg-slate-900,
#insertModal .bg-slate-900,
#entityEditorModal .bg-slate-900,
#tocDrawer .bg-slate-900 {
  background-color: var(--bg-card) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

#settingsModal .bg-slate-950,
#settingsModal .bg-slate-950\/40,
#settingsModal .bg-slate-950\/60,
#trashModal .bg-slate-950\/40,
#trashModal .bg-slate-950\/60,
#tagsManagerModal .bg-slate-950\/40,
#tocDrawer .bg-slate-950\/40 {
  background-color: var(--bg-app) !important;
  border-color: var(--border-subtle) !important;
}

/* 7. Boutons de filtres dans la Corbeille */
#trashFilterBtn-prompt.bg-slate-800,
#trashFilterBtn-folder.bg-slate-800 {
  background-color: var(--item-action-bg) !important;
  border: 1px solid var(--item-action-border) !important;
  color: var(--text-secondary) !important;
}
#trashFilterBtn-prompt.bg-indigo-600,
#trashFilterBtn-folder.bg-indigo-600 {
  background-color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
  color: #ffffff !important;
}

/* 8. Textes et bordures fines dans les modales et formulaires sous thèmes clairs */
html:not(.dark) .text-slate-200,
html:not(.dark) .text-slate-300 {
  color: var(--text-main) !important;
}
html:not(.dark) .text-slate-400 {
  color: var(--text-secondary) !important;
}
html:not(.dark) .text-slate-500 {
  color: var(--text-muted) !important;
}
html:not(.dark) .border-slate-700,
html:not(.dark) .border-slate-800 {
  border-color: var(--border-color) !important;
}

/* 9. Micro-boutons d'actions globales (Tout replier / Tout déplier) */
.btn-group-sidebar-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 2px;
  border-radius: 6px;
  background-color: var(--item-action-bg) !important;
  border: 1px solid var(--item-action-border) !important;
  box-shadow: var(--shadow-subtle);
  transition: all 0.15s ease;
}

.btn-sidebar-global-action {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--text-secondary) !important;
  background: transparent;
  border: 1px solid transparent;
  transition: all 0.15s ease;
  cursor: pointer;
  padding: 0;
}

.btn-sidebar-global-action:hover {
  color: var(--accent-color) !important;
  background-color: var(--accent-badge-bg) !important;
  border-color: var(--accent-badge-border) !important;
  transform: scale(1.08);
}

/* 10. Bannière Contextuelle Épurée de Dossier (Sidebar 2) */
#currentFilterBanner {
  background-color: var(--bg-card);
  border-bottom: 1px solid var(--border-color);
  color: var(--text-main);
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 11. Médiathèque Universelle (DAM) & Cartes d'Assets */
#accSectionMedia .sidebar-accordion-header {
  color: var(--text-main);
}
#accBodyMedia button {
  color: var(--text-secondary);
}
#accBodyMedia button:hover {
  color: var(--text-main);
  background-color: var(--bg-card-hover);
}
#currentFilterBanner .btn-filter-clear {
  color: var(--text-secondary);
  border: 1px solid var(--border-color);
  background-color: var(--item-action-bg);
  transition: all 0.15s ease;
}
#currentFilterBanner .btn-filter-clear:hover {
  color: var(--text-main);
  border-color: var(--accent-color);
  background-color: var(--item-action-hover);
}

/* 12. Zone de Drop Drag & Drop pour les Assets Médias Libres */
.media-dropzone-active {
  outline: 2px dashed var(--accent-color) !important;
  outline-offset: -4px !important;
  background-color: var(--accent-badge-bg) !important;
}

/* ==========================================================
   13. VISIONNEUSE & GALERIE UNIVERSELLE THERMORÉGULÉE (Phase 46)
   ========================================================== */
.gallery-modal-backdrop {
  background-color: rgba(2, 6, 23, 0.94);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-main);
  transition: background-color 0.25s ease, color 0.25s ease;
}
html:not(.dark) .gallery-modal-backdrop {
  background-color: rgba(248, 250, 252, 0.94);
}
html[data-theme="paper"] .gallery-modal-backdrop {
  background-color: rgba(251, 249, 244, 0.95);
}
html[data-theme="lavender"] .gallery-modal-backdrop {
  background-color: rgba(250, 245, 255, 0.95);
}
html[data-theme="cobalt-forest-night"] .gallery-modal-backdrop {
  background-color: rgba(8, 14, 26, 0.96);
}
html[data-theme="clickup-night"] .gallery-modal-backdrop {
  background-color: rgba(20, 20, 24, 0.96);
}

.gallery-topbar {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-subtle) !important;
}

.gallery-bottombar {
  background-color: var(--bg-header) !important;
  border-top: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-subtle) !important;
}

.gallery-btn-nav {
  background-color: var(--bg-card) !important;
  color: var(--text-main) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-elevation) !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.gallery-btn-nav:hover {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  border-color: var(--accent-color) !important;
  transform: translateY(-50%) scale(1.08) !important;
}

.gallery-btn-close {
  color: var(--text-secondary) !important;
  transition: all 0.15s ease;
}
.gallery-btn-close:hover {
  color: var(--text-main) !important;
  background-color: var(--bg-card-hover) !important;
}

.gallery-doc-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-elevation) !important;
  color: var(--text-main) !important;
}

.gallery-doc-header {
  background-color: var(--bg-header) !important;
  border-bottom: 1px solid var(--border-subtle) !important;
}

.gallery-badge-accent {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border: 1px solid var(--accent-badge-border) !important;
}

.gallery-counter-badge {
  background-color: var(--bg-card-hover) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-color) !important;
}

.gallery-tag-pill {
  background-color: var(--bg-app) !important;
  color: var(--text-secondary) !important;
  border: 1px solid var(--border-subtle) !important;
}

.gallery-attachment-card {
  background-color: var(--item-action-bg, var(--bg-app)) !important;
  border: 1px solid var(--border-subtle) !important;
  color: var(--text-main) !important;
  transition: all 0.15s ease;
}
.gallery-attachment-card:hover {
  border-color: var(--accent-color) !important;
  background-color: var(--bg-card-hover) !important;
}

.gallery-attachment-thumb {
  background-color: var(--bg-sidebar) !important;
  border: 1px solid var(--border-subtle) !important;
}

.gallery-asset-card {
  background-color: var(--bg-card) !important;
  border: 1px solid var(--border-color) !important;
  box-shadow: var(--shadow-elevation) !important;
  color: var(--text-main) !important;
}

.gallery-thumb-item {
  border: 2px solid var(--border-color);
  background-color: var(--bg-card);
  transition: all 0.15s ease;
}
.gallery-thumb-item:hover {
  border-color: var(--accent-hover);
  transform: scale(1.05);
}
.gallery-thumb-item.active {
  border-color: var(--accent-color) !important;
  box-shadow: 0 0 0 2px var(--accent-badge-border) !important;
  background-color: var(--bg-card-hover) !important;
  transform: scale(1.08);
  opacity: 1 !important;
}

/* ==========================================================
   14. THERMORÉGULATION UNIVERSELLE DES MODALES (DESIGN TOKENS)
   ========================================================== */
.modal-backdrop-universal {
  background-color: var(--modal-backdrop, rgba(15, 23, 42, 0.75)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html:not(.dark) {
  --modal-backdrop: rgba(15, 23, 42, 0.45);
}

.modal-card-universal {
  background-color: var(--modal-bg, var(--bg-card)) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-elevation, 0 10px 25px -5px rgba(0, 0, 0, 0.4)) !important;
}

.modal-header-universal {
  border-bottom: 1px solid var(--border-color) !important;
  background-color: var(--bg-header, var(--bg-card)) !important;
}

.modal-footer-universal {
  border-top: 1px solid var(--border-color) !important;
  background-color: var(--bg-header, var(--bg-card)) !important;
}

.modal-subcard-universal {
  background-color: var(--bg-app) !important;
  border: 1px solid var(--border-subtle, var(--border-color)) !important;
  color: var(--text-main) !important;
}

.modal-input-universal {
  background-color: var(--input-bg, var(--bg-app)) !important;
  border: 1px solid var(--input-border, var(--border-color)) !important;
  color: var(--text-main) !important;
}
.modal-input-universal:focus {
  border-color: var(--accent-color) !important;
  outline: none !important;
}

/* Raccordement automatique et protection de contraste sous thèmes clairs */
html:not(.dark) .modal-card-universal {
  color: var(--text-main) !important;
}
html:not(.dark) .modal-card-universal h1,
html:not(.dark) .modal-card-universal h2,
html:not(.dark) .modal-card-universal h3,
html:not(.dark) .modal-card-universal h4,
html:not(.dark) .modal-card-universal h5,
html:not(.dark) .modal-card-universal .text-slate-100,
html:not(.dark) .modal-card-universal .text-slate-200,
html:not(.dark) .modal-card-universal .text-slate-300 {
  color: var(--text-main) !important;
}
html:not(.dark) .modal-card-universal .text-slate-400,
html:not(.dark) .modal-card-universal .text-slate-500 {
  color: var(--text-secondary) !important;
}
html:not(.dark) .modal-card-universal .bg-slate-900,
html:not(.dark) .modal-card-universal .bg-slate-950,
html:not(.dark) .modal-card-universal .bg-slate-950\/60,
html:not(.dark) .modal-card-universal .bg-slate-950\/50,
html:not(.dark) .modal-card-universal .bg-slate-950\/40,
html:not(.dark) .modal-card-universal .bg-slate-950\/20,
html:not(.dark) .modal-card-universal .bg-slate-900\/60,
html:not(.dark) .modal-card-universal .bg-slate-900\/50,
html:not(.dark) .modal-card-universal .bg-slate-900\/40,
html:not(.dark) .modal-card-universal .bg-slate-900\/90 {
  background-color: var(--bg-app) !important;
}
html:not(.dark) .modal-card-universal .border-slate-800,
html:not(.dark) .modal-card-universal .border-slate-800\/80,
html:not(.dark) .modal-card-universal .border-slate-800\/60,
html:not(.dark) .modal-card-universal .border-slate-800\/40,
html:not(.dark) .modal-card-universal .border-slate-700,
html:not(.dark) .modal-card-universal .border-slate-700\/80 {
  border-color: var(--border-color) !important;
}
html:not(.dark) .modal-card-universal input,
html:not(.dark) .modal-card-universal select,
html:not(.dark) .modal-card-universal textarea {
  background-color: var(--input-bg, #ffffff) !important;
  border-color: var(--input-border, var(--border-color)) !important;
  color: var(--text-main) !important;
}
html:not(.dark) .modal-card-universal table thead {
  background-color: var(--bg-app) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-color) !important;
}
html:not(.dark) .modal-card-universal table tr:hover {
  background-color: var(--bg-card-hover) !important;
}

/* ----------------------------------------------------------
   15. SECTION 15 : THERMORÉGULATION UNIVERSELLE DES BOUTONS,
       LABELS, SÉLECTEURS & COMPOSANTS PRINCIPAUX (CONTRASTE WCAG AAA)
   ---------------------------------------------------------- */

/* 1. Boutons d'Action Secondaires du Header */
#topTocBtn,
#syncBadgeBtn,
#focusModeBtn,
#themePickerBtn,
header button[onclick*="openSettingsModal"],
header button[onclick*="openImportModal"] {
  background-color: var(--item-action-bg) !important;
  border-color: var(--item-action-border, var(--border-color)) !important;
  color: var(--text-main) !important;
  transition: all 0.15s ease !important;
}

#topTocBtn:hover,
#syncBadgeBtn:hover,
#focusModeBtn:hover,
#themePickerBtn:hover,
header button[onclick*="openSettingsModal"]:hover,
header button[onclick*="openImportModal"]:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* 2. Boutons d'Action de la Fiche de Détail (Lecture) */
#detailHeaderCompactBar button.bg-slate-800,
#detailHeaderCompactBar button.border-slate-700,
#detailHeaderCompactBar button[onclick*="downloadPromptMd"],
#detailHeaderCompactBar button[onclick*="copyPromptContent"],
#detailHeaderCompactBar button[onclick*="TocView.toggle"],
#detailHeaderCompactBar button[onclick*="duplicatePrompt"],
#detailHeaderCompactBar button[onclick*="toggleFavorite"] {
  background-color: var(--item-action-bg) !important;
  border-color: var(--item-action-border, var(--border-color)) !important;
  color: var(--text-main) !important;
}

#detailHeaderCompactBar button:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

/* 3. Sélecteur de Mode de l'Éditeur (Éditeur / Aperçu / Scindé) & Boutons d'En-tête */
#btnEditorMode,
#btnPreviewMode,
#btnSplitMode {
  transition: all 0.15s ease !important;
}

/* Boutons inactifs du sélecteur */
#btnEditorMode:not(.bg-slate-800),
#btnPreviewMode:not(.bg-slate-800),
#btnSplitMode:not(.bg-slate-800) {
  color: var(--text-secondary) !important;
}

#btnEditorMode:not(.bg-slate-800):hover,
#btnPreviewMode:not(.bg-slate-800):hover,
#btnSplitMode:not(.bg-slate-800):hover {
  color: var(--text-main) !important;
  background-color: var(--bg-card-hover) !important;
}

/* Bouton actif du sélecteur */
#btnEditorMode.bg-slate-800,
#btnPreviewMode.bg-slate-800,
#btnSplitMode.bg-slate-800 {
  background-color: var(--accent-color) !important;
  color: #ffffff !important;
  font-weight: 600 !important;
}

/* Boutons auxiliaires de l'en-tête de l'éditeur */
#btnToggleEditorMeta,
button[onclick*="cancelEditing"],
button[onclick*="pasteIntoEditor"] {
  background-color: var(--item-action-bg) !important;
  border-color: var(--border-color) !important;
  color: var(--text-main) !important;
}

#btnToggleEditorMeta:hover,
button[onclick*="cancelEditing"]:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
}

/* 4. Volet des Métadonnées de l'Éditeur & Labels */
#editorMetaSection > div {
  background-color: var(--bg-app) !important;
  border-color: var(--border-color) !important;
}

#editorMetaSection label,
#editorMetaSection span.shrink-0 {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

#editorMetaSection input,
#editorMetaSection select {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border, var(--border-color)) !important;
  color: var(--text-main) !important;
}

/* 5. Sélecteur de Tri & Champ de Recherche (Sidebar 2) */
#sortSelect {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border, var(--border-color)) !important;
  color: var(--text-main) !important;
}

#btnListSlideshow {
  background-color: var(--item-action-bg) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-secondary) !important;
  transition: all 0.15s ease !important;
}

#btnListSlideshow:hover {
  background-color: var(--bg-card-hover) !important;
  color: var(--accent-color) !important;
  border-color: var(--accent-color) !important;
}

#searchInput {
  background-color: var(--input-bg) !important;
  border-color: var(--input-border, var(--border-color)) !important;
  color: var(--text-main) !important;
}

#searchInput::placeholder {
  color: var(--text-muted) !important;
}

/* 6. Badges d'Informations, Étiquettes & Tags (Éradication des grisâtres) */
.card-meta-tag,
.badge-tag-universal,
#mainContent span.bg-slate-800,
#mainContent span.bg-slate-800\/90,
.modal-card-universal span.bg-slate-800,
.modal-card-universal span.bg-slate-800\/90,
#settingsRemoteStatusBadge,
#tagsModalBadgeCount {
  background-color: var(--accent-badge-bg) !important;
  color: var(--accent-badge-text) !important;
  border: 1px solid var(--accent-badge-border) !important;
  font-weight: 500 !important;
}

/* 7. Thermorégulation Universelle de Tous les Labels de Champs & Formulaires */
label:not(.cursor-pointer):not([class*="bg-"]),
.form-label,
.modal-card-universal label:not(.cursor-pointer):not([class*="bg-"]),
.modal-card-universal .text-slate-400 {
  color: var(--text-secondary) !important;
  font-weight: 600 !important;
}

/* Protection de contraste renforcée sous thèmes clairs (WCAG AAA) */
html:not(.dark) label:not(.cursor-pointer):not([class*="bg-"]),
html:not(.dark) .form-label,
html:not(.dark) #editorMetaSection label,
html:not(.dark) #editorMetaSection span.shrink-0,
html:not(.dark) .modal-card-universal label:not(.cursor-pointer):not([class*="bg-"]) {
  color: var(--text-secondary, #334155) !important;
}

html:not(.dark) label.cursor-pointer {
  color: var(--text-main, #1e1f24) !important;
}

/* Labels agissant comme boutons d'action (ex: upload dans Médiathèque DAM) */
html:not(.dark) label.cursor-pointer[class*="bg-slate-800"] {
  background-color: var(--item-action-bg, #ffffff) !important;
  color: var(--accent-color, #4f46e5) !important;
  border-color: var(--border-color, #e4e7ec) !important;
}

html:not(.dark) label.cursor-pointer[class*="bg-slate-800"]:hover {
  background-color: var(--bg-card-hover, #f3f4f6) !important;
}

/* Labels radio/cases dans modales */
html:not(.dark) .modal-card-universal label.cursor-pointer.bg-slate-950\/80 {
  background-color: var(--bg-card, #ffffff) !important;
  border-color: var(--border-color, #e4e7ec) !important;
}

/* Raccourcis claviers kbd */
html:not(.dark) kbd.bg-slate-800 {
  background-color: var(--bg-card-hover, #f3f4f6) !important;
  color: var(--text-main, #1e1f24) !important;
  border-color: var(--border-color, #d0d7de) !important;
}

/* 8. Blindage Universel Global des Boutons Clairs (html:not(.dark)) */
html:not(.dark) #mainContent button.bg-slate-800,
html:not(.dark) #mainContent button.bg-slate-900,
html:not(.dark) header button.bg-slate-800,
html:not(.dark) #sidebarList button.bg-slate-800,
html:not(.dark) .modal-card-universal button.bg-slate-800,
html:not(.dark) .modal-card-universal button.bg-slate-900 {
  background-color: var(--item-action-bg, #ffffff) !important;
  color: var(--text-main, #1e1f24) !important;
  border-color: var(--border-color, #e4e7ec) !important;
}

html:not(.dark) #mainContent button.bg-slate-800:hover,
html:not(.dark) #mainContent button.bg-slate-900:hover,
html:not(.dark) header button.bg-slate-800:hover,
html:not(.dark) #sidebarList button.bg-slate-800:hover,
html:not(.dark) .modal-card-universal button.bg-slate-800:hover,
html:not(.dark) .modal-card-universal button.bg-slate-900:hover {
  background-color: var(--bg-card-hover, #f3f4f6) !important;
  color: var(--accent-color) !important;
}

/* 9. Thermorégulation de la Bannière Document Parent */
.parent-doc-banner,
#mainContent .bg-indigo-950\/40 {
  background-color: var(--accent-badge-bg) !important;
  border: 1px solid var(--accent-badge-border) !important;
  color: var(--text-main) !important;
}

.parent-doc-banner .parent-doc-label,
#mainContent .bg-indigo-950\/40 span {
  color: var(--accent-color) !important;
  font-weight: 700 !important;
}

.parent-doc-banner .parent-doc-title,
#mainContent .bg-indigo-950\/40 button {
  color: var(--text-main) !important;
  font-weight: 600 !important;
}

.parent-doc-banner .parent-doc-title:hover,
#mainContent .bg-indigo-950\/40 button:hover {
  color: var(--accent-color) !important;
}

/* 10. Menu Contextuel Universel d'Actions ••• (Sous-Phase 48.2) */
.universal-action-dropdown {
  background-color: var(--modal-bg, var(--bg-card)) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-elevation, 0 10px 25px -5px rgba(0, 0, 0, 0.4)) !important;
}

.universal-action-header {
  border-bottom: 1px solid var(--border-color) !important;
  color: var(--text-muted) !important;
}

.universal-action-delete-box {
  border-top: 1px solid var(--border-color) !important;
}

.universal-action-item {
  color: var(--text-main) !important;
}

.universal-action-item:hover {
  background-color: var(--bg-card-hover) !important;
}

html:not(.dark) .universal-action-item:hover {
  background-color: var(--bg-card-hover, #f1f5f9) !important;
}

.universal-action-delete-btn:hover {
  background-color: rgba(244, 63, 94, 0.12) !important;
}

/* 11. Modale de Déplacement & Arborescence Cible (Sous-Phase 48.2) */
.move-dest-item {
  color: var(--text-main) !important;
  border-color: var(--border-color) !important;
}

.move-dest-item:hover {
  background-color: var(--bg-card-hover) !important;
}

.move-dest-active {
  background-color: var(--accent-badge-bg) !important;
  border-color: var(--accent-badge-border) !important;
  color: var(--accent-badge-text) !important;
}

/* 12. Sélecteur d'Icônes & Éléments Interactifs de l'Éditeur d'Entités (Sous-Phase 48.2) */
.entity-editor-icon-btn:hover {
  background-color: var(--bg-card-hover) !important;
  border-color: var(--accent-color) !important;
}

/* ==========================================================
   16. SECTION 16 : BOUCLIER OMBRELLE UNIVERSEL (SOUS-PHASE 49.1)
   IMMUNISATION DÉFINITIVE DE TOUTES LES SURFACES FLOTTANTES, MODALES,
   POPOVERS, MENUS & DIALOGUES SOUS L'ENSEMBLE DES 9 THÈMES (WCAG AAA)
   ========================================================== */

/* 1. Sanctuarisation Absolue des Voiles d'Arrière-Plan (Backdrops Translucides Garantis) */
.modal-backdrop-universal,
.gallery-modal-backdrop,
[id*="Overlay"],
[id*="overlay"],
div[class*="backdrop"] {
  background-color: var(--modal-backdrop, rgba(15, 23, 42, 0.75)) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

html:not(.dark) .modal-backdrop-universal,
html:not(.dark) [id*="Overlay"],
html:not(.dark) [id*="overlay"],
html:not(.dark) div[class*="backdrop"]:not(.modal-card-universal) {
  background-color: rgba(15, 23, 42, 0.45) !important;
}

/* 2. Surfaçage Sémantique Exclusif des Cartes Modales et Popovers (Zéro collision interne) */
.modal-card-universal,
.popover-universal,
.theme-surface-floating,
.universal-action-dropdown {
  background-color: var(--modal-bg, var(--bg-card)) !important;
  border: 1px solid var(--border-color) !important;
  color: var(--text-main) !important;
  box-shadow: var(--shadow-elevation, 0 10px 25px -5px rgba(0, 0, 0, 0.4)) !important;
}

/* 3. Raccordement Universel de la Ribbon d'Édition Markdown & Sélecteurs */
.markdown-touch-ribbon {
  background-color: var(--bg-header, var(--bg-sidebar)) !important;
  border-bottom: 1px solid var(--border-color) !important;
}

.markdown-touch-ribbon select,
.markdown-touch-ribbon button {
  border-color: var(--border-color) !important;
}

html:not(.dark) .markdown-touch-ribbon {
  background-color: var(--bg-header, #f8fafc) !important;
  border-color: var(--border-color, #e2e8f0) !important;
}

html:not(.dark) .markdown-touch-ribbon .bg-slate-950\/80,
html:not(.dark) .markdown-touch-ribbon .bg-slate-950 {
  background-color: var(--item-action-bg, #ffffff) !important;
  border-color: var(--border-color, #e2e8f0) !important;
}

html:not(.dark) .markdown-touch-ribbon button {
  color: var(--text-main, #1e293b) !important;
}

html:not(.dark) .markdown-touch-ribbon button:hover {
  background-color: var(--bg-card-hover, #f1f5f9) !important;
  color: var(--accent-color, #4f46e5) !important;
}

html:not(.dark) .markdown-touch-ribbon select {
  background-color: var(--input-bg, #ffffff) !important;
  color: var(--text-main, #1e293b) !important;
  border-color: var(--border-color, #e2e8f0) !important;
}

/* 4. Confinement Strict de la Thermorégulation sous Thèmes Clairs (html:not(.dark)) */
/* Intercepte et neutralise les palettes sombres UNIQUEMENT À L'INTÉRIEUR des cartes, jamais sur les backdrops */

/* Fonds sombres dans la carte ➔ Surface claire sémantique */
html:not(.dark) .modal-card-universal [class*="bg-slate-9"]:not([class*="fixed"]),
html:not(.dark) .modal-card-universal [class*="bg-slate-8"]:not([class*="fixed"]),
html:not(.dark) .modal-card-universal [class*="bg-indigo-95"],
html:not(.dark) .modal-card-universal [class*="bg-emerald-95"],
html:not(.dark) .modal-card-universal [class*="bg-purple-95"],
html:not(.dark) .popover-universal [class*="bg-slate-9"] {
  background-color: var(--item-action-bg, #ffffff) !important;
  border-color: var(--border-color, #e2e8f0) !important;
}

/* Hover des boutons dans les cartes et popovers */
html:not(.dark) .modal-card-universal button:hover:not([class*="bg-emerald-600"]):not([class*="bg-indigo-600"]):not([class*="bg-rose-600"]):not([class*="bg-indigo-500"]),
html:not(.dark) .popover-universal button:hover {
  background-color: var(--bg-card-hover, #f1f5f9) !important;
  color: var(--accent-color, #4f46e5) !important;
}

/* Bordures sombres à l'intérieur de la carte */
html:not(.dark) .modal-card-universal [class*="border-slate-"],
html:not(.dark) .popover-universal [class*="border-slate-"],
html:not(.dark) .modal-card-universal [class*="border-indigo-8"],
html:not(.dark) .modal-card-universal [class*="border-emerald-8"],
html:not(.dark) .modal-card-universal [class*="border-purple-8"] {
  border-color: var(--border-color, #e2e8f0) !important;
}

/* Textes sombres (slate 100/200/300) ➔ Texte principal lisible */
html:not(.dark) .modal-card-universal [class*="text-slate-1"],
html:not(.dark) .modal-card-universal [class*="text-slate-2"],
html:not(.dark) .modal-card-universal [class*="text-slate-3"],
html:not(.dark) .popover-universal [class*="text-slate-1"],
html:not(.dark) .popover-universal [class*="text-slate-2"],
html:not(.dark) .popover-universal [class*="text-slate-3"] {
  color: var(--text-main, #1e293b) !important;
}

/* Textes secondaires (slate 400/500) ➔ Texte secondaire lisible */
html:not(.dark) .modal-card-universal [class*="text-slate-4"],
html:not(.dark) .modal-card-universal [class*="text-slate-5"],
html:not(.dark) .popover-universal [class*="text-slate-4"],
html:not(.dark) .popover-universal [class*="text-slate-5"] {
  color: var(--text-secondary, #475569) !important;
}

/* Textes d'accentuation néons ➔ Fort contraste WCAG AAA */
html:not(.dark) .modal-card-universal [class*="text-indigo-3"],
html:not(.dark) .modal-card-universal [class*="text-indigo-4"],
html:not(.dark) .popover-universal [class*="text-indigo-3"],
html:not(.dark) .popover-universal [class*="text-indigo-4"] {
  color: var(--accent-color, #4338ca) !important;
}

html:not(.dark) .modal-card-universal [class*="text-emerald-3"],
html:not(.dark) .modal-card-universal [class*="text-emerald-4"] {
  color: #047857 !important;
}

html:not(.dark) .popover-universal [class*="text-amber-3"],
html:not(.dark) .modal-card-universal [class*="text-amber-3"] {
  color: #b45309 !important;
}

html:not(.dark) .modal-card-universal [class*="text-purple-3"],
html:not(.dark) .modal-card-universal [class*="text-purple-4"] {
  color: #6b21a8 !important;
}

/* Champs de saisie input, textarea, select */
html:not(.dark) .modal-card-universal input,
html:not(.dark) .modal-card-universal textarea,
html:not(.dark) .modal-card-universal select,
html:not(.dark) .popover-universal input,
html:not(.dark) .popover-universal select {
  background-color: var(--input-bg, #ffffff) !important;
  border-color: var(--input-border, var(--border-color, #cbd5e1)) !important;
  color: var(--text-main, #1e293b) !important;
}