/* ============================================
   CSS PERSONNALISÉ FIDER (FEEDBACK BOARD) - CHARTE GRAPHICQUE INCLUSION
   ============================================ */

/* Variables de couleurs basées sur la charte Inclusion */
:root,
:root[data-theme="light"],
:root.light,
:root.light-mode,
html,
html[data-theme="light"],
html.light,
html.light-mode {
	/* Couleurs de surface */
	--color-darker: #141218 !important;
	--color-dark: #1D1B20 !important;
	--color-dark-grey: #26232C !important;
	--color-dark-light: #4A4458 !important;
	--color-light: #F5F5F5 !important;
	--color-light-grey: #D9D9D9 !important;
	--color-medium-grey: #969696 !important;

	/* Couleurs violettes (accent) */
	--color-light-purple: #D3BCFD !important;
	--color-soft-purple: #352D47 !important;

	/* Couleurs fonctionnelles */
	--color-yellow: #F2C94C !important;
	--color-green: #27AE60 !important;
	--color-blue: #0070D0 !important;
	--color-red: #EB5757 !important;
	--color-orange: #F0820B !important;
	--color-violet: #9B51E0 !important;

	/* Forcer les variables Fider en mode dark */
	--background-color: #141218 !important;
	--background: #141218 !important;
	--bg-color: #141218 !important;
	--surface-color: #1D1B20 !important;
	--surface: #1D1B20 !important;
	--text-color: #F5F5F5 !important;
	--text: #F5F5F5 !important;
	--primary-color: #D3BCFD !important;
	--primary: #D3BCFD !important;
	--border-color: #26232C !important;
	--border: #26232C !important;

	/* Forcer les couleurs Fider white/black en dark */
	--colors-white: #1D1B20 !important;
	--colors-black: #F5F5F5 !important;
	--color-white: #1D1B20 !important;
	--color-black: #F5F5F5 !important;
	--white: #1D1B20 !important;
	--black: #F5F5F5 !important;
}

/* ============================================
   FORCER LE MODE DARK - OVERRIDE DU MODE LIGHT
   ============================================ */

/* Forcer le dark mode sur tous les éléments, même en mode light */
html,
html[data-theme="light"],
html.light,
html.light-mode,
body,
body[data-theme="light"],
body.light,
body.light-mode,
.light,
.light-mode,
[data-theme="light"] {
	background-color: var(--color-darker) !important;
	color: var(--color-light) !important;
}

/* Forcer tous les conteneurs principaux en dark */
#root,
#app,
.app,
.main,
main,
.container,
.wrapper {
	background-color: var(--color-darker) !important;
	color: var(--color-light) !important;
}

/* Cacher le bouton de toggle light/dark mode */
.theme-toggle,
.theme-switcher,
[aria-label*="theme" i],
[aria-label*="mode" i],
button[title*="theme" i],
button[title*="mode" i],
.c-theme-toggle,
.dark-mode-toggle {
	display: none !important;
	visibility: hidden !important;
}

/* Forcer tous les éléments avec fond blanc/clair en dark */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"],
[style*="background-color: rgb(255, 255, 255)"],
[style*="background-color: rgb(255,255,255)"] {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
}

/* Forcer tous les éléments avec texte noir en clair */
[style*="color: black"],
[style*="color: #000"],
[style*="color: #000000"],
[style*="color: rgb(0, 0, 0)"],
[style*="color: rgb(0,0,0)"] {
	color: var(--color-light) !important;
}


/* Spécifique pour les éléments qui pourraient avoir un fond blanc */
.white,
.bg-white,
.background-white,
[class*="white-bg"],
[class*="bg-white"],
[class*="light-bg"] {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
}

/* Éléments de texte qui pourraient être noirs */
.black,
.text-black,
.color-black,
[class*="text-black"],
[class*="color-black"] {
	color: var(--color-light) !important;
}

/* Éléments spécifiques Fider avec fond blanc */
#p-home .p-home__welcome-col> :first-child,
#p-home .p-home__posts-col,
.c-dropdown__list,
.p-home__welcome-col,
.p-home__posts-col {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
}

/* Forcer tous les éléments de la page d'accueil */
#p-home,
#p-home *,
[id*="p-home"],
[class*="p-home"] {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
	border-color: var(--color-dark-grey) !important;
}

/* Exception pour les boutons et éléments interactifs */
#p-home button,
#p-home .c-button {
	background-color: initial !important;
}

/* Forcer TOUTES les classes Tailwind CSS de fond clair en dark (50-500) */
body[data-theme="light"] [class*="bg-gray-"],
body[data-theme="light"] [class*="bg-slate-"],
body[data-theme="light"] [class*="bg-zinc-"],
body[data-theme="light"] [class*="bg-neutral-"],
body[data-theme="light"] [class*="bg-stone-"],
body[data-theme="light"] [class*="bg-red-"],
body[data-theme="light"] [class*="bg-orange-"],
body[data-theme="light"] [class*="bg-amber-"],
body[data-theme="light"] [class*="bg-yellow-"],
body[data-theme="light"] [class*="bg-lime-"],
body[data-theme="light"] [class*="bg-green-"],
body[data-theme="light"] [class*="bg-emerald-"],
body[data-theme="light"] [class*="bg-teal-"],
body[data-theme="light"] [class*="bg-cyan-"],
body[data-theme="light"] [class*="bg-sky-"],
body[data-theme="light"] [class*="bg-blue-"],
body[data-theme="light"] [class*="bg-indigo-"],
body[data-theme="light"] [class*="bg-violet-"],
body[data-theme="light"] [class*="bg-purple-"],
body[data-theme="light"] [class*="bg-fuchsia-"],
body[data-theme="light"] [class*="bg-pink-"],
body[data-theme="light"] [class*="bg-rose-"],
[class*="bg-gray-"],
[class*="bg-slate-"],
[class*="bg-zinc-"],
[class*="bg-neutral-"],
[class*="bg-stone-"],
[class*="bg-red-"],
[class*="bg-orange-"],
[class*="bg-amber-"],
[class*="bg-yellow-"],
[class*="bg-lime-"],
[class*="bg-green-"],
[class*="bg-emerald-"],
[class*="bg-teal-"],
[class*="bg-cyan-"],
[class*="bg-sky-"],
[class*="bg-blue-"],
[class*="bg-indigo-"],
[class*="bg-violet-"],
[class*="bg-purple-"],
[class*="bg-fuchsia-"],
[class*="bg-pink-"],
[class*="bg-rose-"] {
	background-color: var(--color-dark) !important;
}

/* Forcer les classes Tailwind bg-white en dark */
body[data-theme="light"] .bg-white,
.bg-white {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
}

/* Forcer les classes Tailwind text-black en light */
body[data-theme="light"] .text-black,
body[data-theme="light"] .text-gray-900,
body[data-theme="light"] .text-slate-900,
.text-black,
.text-gray-900,
.text-slate-900 {
	color: var(--color-light) !important;
}

/* ============================================
   FOND ET STRUCTURE GÉNÉRALE
   ============================================ */

body {
	background-color: var(--color-darker) !important;
	color: var(--color-light) !important;
}

/* Header */
.c-header {
	background-color: var(--color-dark) !important;
	border-bottom: 1px solid var(--color-dark-grey) !important;
}

/* Menu navigation */
.c-menu-item {
	color: var(--color-light-grey) !important;
}

.c-menu-item:hover,
.c-menu-item--active {
	color: var(--color-light-purple) !important;
	background-color: var(--color-soft-purple) !important;
}

/* ============================================
   CARDS ET CONTENEURS
   ============================================ */

.c-idea-item,
.c-comment-list,
.c-page-container,
.c-modal-window,
.c-form-field,
.c-segment {
	background-color: var(--color-dark) !important;
	border-color: var(--color-dark-grey) !important;
	color: var(--color-light) !important;
}

/* Surfaces secondaires */
.c-sidebar,
.c-footer {
	background-color: var(--color-dark-grey) !important;
}

/* ============================================
   BOUTONS
   ============================================ */

/* Bouton principal */
.c-button--primary,
.c-button.c-button--primary,
button[class*="primary"] {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
	border: none !important;
	font-weight: 600 !important;
}

/* Assurer que le texte et les icônes héritent de la couleur */
.c-button--primary *,
.c-button.c-button--primary *,
button[class*="primary"] * {
	color: var(--color-darker) !important;
	fill: var(--color-darker) !important;
}

.c-button--primary svg,
.c-button.c-button--primary svg,
button[class*="primary"] svg {
	fill: var(--color-darker) !important;
	stroke: var(--color-darker) !important;
}

.c-button--primary:hover,
.c-button.c-button--primary:hover,
button[class*="primary"]:hover {
	background-color: var(--color-violet) !important;
	color: var(--color-light) !important;
	transform: translateY(-1px);
	box-shadow: 0 4px 8px rgba(211, 188, 253, 0.3) !important;
}

.c-button--primary:hover *,
.c-button.c-button--primary:hover *,
button[class*="primary"]:hover * {
	color: var(--color-light) !important;
	fill: var(--color-light) !important;
}

.c-button--primary:hover svg,
.c-button.c-button--primary:hover svg,
button[class*="primary"]:hover svg {
	fill: var(--color-light) !important;
	stroke: var(--color-light) !important;
}

/* Bouton secondaire */
.c-button--secondary,
button[class*="secondary"] {
	background-color: var(--color-soft-purple) !important;
	color: var(--color-light-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
}

.c-button--secondary:hover,
button[class*="secondary"]:hover {
	background-color: var(--color-dark-light) !important;
	border-color: var(--color-light-purple) !important;
}

/* Bouton CTA principal - "Ça serait génial si..." */
.c-input,
button.c-input,
.c-button.c-input {
	background-color: var(--color-soft-purple) !important;
	color: var(--color-light) !important;
	border: 2px solid var(--color-light-purple) !important;
	padding: 14px 18px !important;
	font-style: normal !important;
	font-weight: 500 !important;
	text-align: left !important;
	width: 100% !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	border-radius: 8px !important;
	box-shadow: 0 2px 8px rgba(211, 188, 253, 0.2) !important;
}

.c-input:hover,
button.c-input:hover,
.c-button.c-input:hover {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
	border-color: var(--color-light-purple) !important;
	box-shadow: 0 4px 12px rgba(211, 188, 253, 0.4) !important;
	transform: translateY(-1px) !important;
}

.c-input:focus,
button.c-input:focus,
.c-button.c-input:focus {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
	border-color: var(--color-light-purple) !important;
	outline: none !important;
	box-shadow: 0 0 0 3px rgba(211, 188, 253, 0.4), 0 4px 12px rgba(211, 188, 253, 0.3) !important;
}

/* Bouton danger */
.c-button--danger {
	background-color: var(--color-red) !important;
	color: var(--color-light) !important;
}

/* ============================================
   VOTES ET STATUTS
   ============================================ */

/* Bouton de vote */
.c-vote-counter {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light-grey) !important;
}

.c-vote-counter--active {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
	border-color: var(--color-light-purple) !important;
}

.c-vote-counter:hover {
	border-color: var(--color-light-purple) !important;
	background-color: var(--color-soft-purple) !important;
}

/* Tags de statut */
.c-tag {
	background-color: var(--color-dark-grey) !important;
	color: var(--color-light-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
}

.c-tag--completed,
.c-tag--started,
[class*="status-completed"],
[class*="status-started"] {
	background-color: var(--color-green) !important;
	color: var(--color-light) !important;
}

.c-tag--planned,
[class*="status-planned"] {
	background-color: var(--color-blue) !important;
	color: var(--color-light) !important;
}

.c-tag--declined,
[class*="status-declined"] {
	background-color: var(--color-red) !important;
	color: var(--color-light) !important;
}

/* ============================================
   FORMULAIRES
   ============================================ */

input,
textarea,
select,
.c-form-field input,
.c-form-field textarea,
.c-form-field select {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light) !important;
	padding: 10px !important;
	border-radius: 4px !important;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--color-light-purple) !important;
	outline: none !important;
	box-shadow: 0 0 0 2px rgba(211, 188, 253, 0.2) !important;
}

input::placeholder,
textarea::placeholder {
	color: var(--color-medium-grey) !important;
}

/* Labels */
label,
.c-form-field label {
	color: var(--color-light-grey) !important;
	font-weight: 500 !important;
}

/* ============================================
   COMMENTAIRES
   ============================================ */

.c-comment {
	background-color: var(--color-dark) !important;
	border: 1px solid var(--color-dark-grey) !important;
	border-radius: 8px !important;
	padding: 16px !important;
	margin-bottom: 12px !important;
}

.c-comment-header {
	color: var(--color-light-grey) !important;
}

.c-comment-content {
	color: var(--color-light) !important;
}

/* ============================================
   LIENS ET TEXTE
   ============================================ */

a {
	color: var(--color-light-purple) !important;
	text-decoration: none !important;
}

a:hover {
	color: var(--color-violet) !important;
	text-decoration: underline !important;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--color-light) !important;
}

p,
span,
div {
	color: var(--color-light-grey) !important;
}

/* Texte secondaire */
.c-text-muted,
.text-muted {
	color: var(--color-medium-grey) !important;
}

/* ============================================
   NOTIFICATIONS ET ALERTES
   ============================================ */

.c-notification--success {
	background-color: var(--color-green) !important;
	color: var(--color-light) !important;
}

.c-notification--error {
	background-color: var(--color-red) !important;
	color: var(--color-light) !important;
}

.c-notification--warning {
	background-color: var(--color-orange) !important;
	color: var(--color-light) !important;
}

.c-notification--info {
	background-color: var(--color-blue) !important;
	color: var(--color-light) !important;
}

/* ============================================
   MODALES
   ============================================ */

.c-modal-overlay {
	background-color: rgba(20, 18, 24, 0.8) !important;
}

.c-modal-content {
	background-color: var(--color-dark) !important;
	border: 1px solid var(--color-dark-grey) !important;
	border-radius: 8px !important;
}

.c-modal-header {
	border-bottom: 1px solid var(--color-dark-grey) !important;
}

/* ============================================
   DROPDOWN ET MENUS
   ============================================ */

/* Bouton dropdown (three-dots menu) */
.c-dropdown__handle,
.c-dropdown button {
	background-color: transparent !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light-grey) !important;
	padding: 8px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
}

.c-dropdown__handle:hover,
.c-dropdown button:hover {
	background-color: var(--color-soft-purple) !important;
	border-color: var(--color-light-purple) !important;
}

.c-dropdown__handle svg,
.c-dropdown button svg {
	fill: var(--color-light-grey) !important;
	stroke: var(--color-light-grey) !important;
	width: 20px !important;
	height: 20px !important;
}

.c-dropdown__handle:hover svg,
.c-dropdown button:hover svg {
	fill: var(--color-light-purple) !important;
	stroke: var(--color-light-purple) !important;
}

.c-dropdown-menu,
.c-dropdown__list {
	background-color: var(--color-dark) !important;
	border: 1px solid var(--color-dark-grey) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

/* Items du dropdown */
.c-dropdown-item,
.c-dropdown__listitem {
	background-color: var(--color-dark) !important;
	color: var(--color-light-grey) !important;
	padding: 8px 12px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
	display: flex !important;
	align-items: center !important;
}

.c-dropdown-item:hover,
.c-dropdown__listitem:hover {
	background-color: var(--color-soft-purple) !important;
	color: var(--color-light-purple) !important;
}

/* SVG dans les items du dropdown */
.c-dropdown-item svg,
.c-dropdown__listitem svg {
	fill: var(--color-light-grey) !important;
	stroke: var(--color-light-grey) !important;
}

.c-dropdown-item:hover svg,
.c-dropdown__listitem:hover svg {
	fill: var(--color-light-purple) !important;
	stroke: var(--color-light-purple) !important;
}

/* ============================================
   PAGINATION
   ============================================ */

.c-pagination-item {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light-grey) !important;
}

.c-pagination-item--active {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
}

.c-pagination-item:hover:not(.c-pagination-item--active) {
	background-color: var(--color-soft-purple) !important;
	border-color: var(--color-light-purple) !important;
}

/* ============================================
   DIVIDERS ET SÉPARATEURS
   ============================================ */

hr,
.c-divider {
	border-color: var(--color-dark-grey) !important;
}

/* ============================================
   SCROLLBAR PERSONNALISÉE
   ============================================ */

::-webkit-scrollbar {
	width: 12px;
	height: 12px;
}

::-webkit-scrollbar-track {
	background: var(--color-darker);
}

::-webkit-scrollbar-thumb {
	background: var(--color-dark-light);
	border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
	background: var(--color-light-purple);
}

/* ============================================
   BADGES ET COMPTEURS
   ============================================ */

.c-badge {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
	font-weight: 600 !important;
	border-radius: 12px !important;
}

/* ============================================
   HOVER EFFECTS GÉNÉRAUX
   ============================================ */

.c-idea-item:hover,
.c-list-item:hover {
	background-color: var(--color-dark-grey) !important;
	border-color: var(--color-dark-light) !important;
	transition: all 0.2s ease !important;
}

/* ============================================
   RESPONSIVE - MOBILE
   ============================================ */

@media (max-width: 768px) {
	.c-header {
		padding: 12px !important;
	}

	.c-idea-item {
		padding: 12px !important;
	}
}

/* ============================================
   ANIMATIONS
   ============================================ */

.c-button,
.c-vote-counter,
.c-idea-item {
	transition: all 0.2s ease !important;
}

/* ============================================
   CLASSES UTILITAIRES
   ============================================ */

.bg-surface {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
}

.bg-surface-light {
	background-color: var(--color-dark-grey) !important;
	color: var(--color-light) !important;
}

.bg-primary {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
}

.text-primary {
	color: var(--color-light-purple) !important;
}

.border-primary {
	border-color: var(--color-light-purple) !important;
}

/* ============================================
   FIDER - CLASSES SPÉCIFIQUES
   ============================================ */

/* Boutons Submit/Post */
.button.is-primary,
.is-primary,
button.primary,
input[type="submit"] {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
	border: none !important;
	font-weight: 600 !important;
}

.button.is-primary:hover,
.is-primary:hover,
button.primary:hover,
input[type="submit"]:hover {
	background-color: var(--color-violet) !important;
	color: var(--color-light) !important;
}

/* Header de Fider */
.header,
.page-header {
	background-color: var(--color-dark) !important;
	border-bottom: 1px solid var(--color-dark-grey) !important;
}

/* Liste d'idées/suggestions */
.idea-list-item,
.post-item,
.item {
	background-color: var(--color-dark) !important;
	border: 1px solid var(--color-dark-grey) !important;
	color: var(--color-light) !important;
}

.idea-list-item:hover,
.post-item:hover,
.item:hover {
	background-color: var(--color-dark-grey) !important;
	border-color: var(--color-dark-light) !important;
}

/* Vote badge */
.vote-badge,
.support-counter {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light-grey) !important;
}

.vote-badge.active,
.support-counter.active,
.voted {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
	border-color: var(--color-light-purple) !important;
}

/* Navigation */
nav,
.navbar,
.menu {
	background-color: var(--color-dark) !important;
}

.nav-item,
.menu-item {
	color: var(--color-light-grey) !important;
}

.nav-item:hover,
.menu-item:hover,
.nav-item.active,
.menu-item.active {
	color: var(--color-light-purple) !important;
	background-color: var(--color-soft-purple) !important;
}

/* Sidebar */
.sidebar,
.side-menu {
	background-color: var(--color-dark-grey) !important;
}

/* Input fields spécifiques Fider */
.input,
.textarea,
.select select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"] {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light) !important;
}

.input:focus,
.textarea:focus,
.select select:focus,
input:focus {
	border-color: var(--color-light-purple) !important;
	box-shadow: 0 0 0 2px rgba(211, 188, 253, 0.2) !important;
}

/* Tags/Labels */
.tag,
.label,
.status-label {
	background-color: var(--color-dark-grey) !important;
	color: var(--color-light-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
}

/* Status tags colorés */
.tag.is-success,
.label.is-success,
.status-completed,
.status-started {
	background-color: var(--color-green) !important;
	color: var(--color-light) !important;
	border: none !important;
}

.tag.is-info,
.label.is-info,
.status-planned {
	background-color: var(--color-blue) !important;
	color: var(--color-light) !important;
	border: none !important;
}

.tag.is-danger,
.label.is-danger,
.status-declined {
	background-color: var(--color-red) !important;
	color: var(--color-light) !important;
	border: none !important;
}

/* Cartes */
.card,
.box,
.panel {
	background-color: var(--color-dark) !important;
	border: 1px solid var(--color-dark-grey) !important;
	color: var(--color-light) !important;
}

.card-header,
.panel-heading {
	background-color: var(--color-dark-grey) !important;
	border-bottom: 1px solid var(--color-dark-light) !important;
	color: var(--color-light) !important;
}

/* Tabs */
.tabs li,
.tab {
	border-bottom: 2px solid transparent !important;
}

.tabs li.is-active,
.tabs li:hover,
.tab.active,
.tab:hover {
	border-bottom-color: var(--color-light-purple) !important;
	color: var(--color-light-purple) !important;
}

/* Footer */
footer,
.footer {
	background-color: var(--color-dark-grey) !important;
	color: var(--color-light-grey) !important;
}

/* Messages/Notifications */
.message,
.notification {
	border-radius: 4px !important;
}

.message.is-success,
.notification.is-success {
	background-color: rgba(39, 174, 96, 0.2) !important;
	border: 1px solid var(--color-green) !important;
	color: var(--color-green) !important;
}

.message.is-danger,
.notification.is-danger {
	background-color: rgba(235, 87, 87, 0.2) !important;
	border: 1px solid var(--color-red) !important;
	color: var(--color-red) !important;
}

.message.is-warning,
.notification.is-warning {
	background-color: rgba(240, 130, 11, 0.2) !important;
	border: 1px solid var(--color-orange) !important;
	color: var(--color-orange) !important;
}

.message.is-info,
.notification.is-info {
	background-color: rgba(0, 112, 208, 0.2) !important;
	border: 1px solid var(--color-blue) !important;
	color: var(--color-blue) !important;
}

/* Dropdown */
.dropdown-content,
.dropdown-menu {
	background-color: var(--color-dark) !important;
	border: 1px solid var(--color-dark-grey) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
}

.dropdown-item,
.dropdown-menu .item {
	color: var(--color-light-grey) !important;
}

.dropdown-item:hover,
.dropdown-menu .item:hover {
	background-color: var(--color-soft-purple) !important;
	color: var(--color-light-purple) !important;
}

/* Avatar/User info */
.avatar,
.user-info {
	border: 2px solid var(--color-dark-light) !important;
}

/* Markdown content */
.markdown,
.content {
	color: var(--color-light) !important;
}

.markdown code,
.content code,
code {
	background-color: var(--color-dark-grey) !important;
	color: var(--color-light-purple) !important;
	padding: 2px 6px !important;
	border-radius: 3px !important;
}

.markdown pre,
.content pre,
pre {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light) !important;
}

/* Loader/Spinner */
.loader,
.spinner {
	border-top-color: var(--color-light-purple) !important;
	border-right-color: var(--color-light-purple) !important;
}

/* Empty state */
.empty-state,
.no-content {
	color: var(--color-medium-grey) !important;
}

/* Dividers */
.divider,
hr {
	background-color: var(--color-dark-grey) !important;
	border-color: var(--color-dark-grey) !important;
}

/* Focus visible pour accessibilité */
*:focus-visible {
	outline: 2px solid var(--color-light-purple) !important;
	outline-offset: 2px !important;
}

/* ============================================
   ÉDITEUR DE TEXTE (TIPTAP/PROSEMIRROR)
   ============================================ */

/* Conteneur de l'éditeur */
.fider-tiptap-editor,
.c-form {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
}

/* Barre d'outils de l'éditeur */
.c-editor-toolbar {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	border-bottom: none !important;
	padding: 8px !important;
	border-radius: 4px 4px 0 0 !important;
}

.c-editor-button-group {
	display: flex !important;
	gap: 4px !important;
	flex-wrap: wrap !important;
}

/* Boutons de l'éditeur */
.c-editor-button {
	background-color: transparent !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light-grey) !important;
	padding: 6px !important;
	border-radius: 4px !important;
	cursor: pointer !important;
	transition: all 0.2s ease !important;
}

.c-editor-button:hover {
	background-color: var(--color-soft-purple) !important;
	border-color: var(--color-light-purple) !important;
}

.c-editor-button.is-active {
	background-color: var(--color-light-purple) !important;
	border-color: var(--color-light-purple) !important;
}

.c-editor-button svg {
	fill: var(--color-light-grey) !important;
	stroke: var(--color-light-grey) !important;
	width: 18px !important;
	height: 18px !important;
}

.c-editor-button:hover svg {
	fill: var(--color-light-purple) !important;
	stroke: var(--color-light-purple) !important;
}

.c-editor-button.is-active svg {
	fill: var(--color-darker) !important;
	stroke: var(--color-darker) !important;
}

/* Texte des boutons */
.c-editor-button-text {
	color: var(--color-light-grey) !important;
	font-size: 12px !important;
}

/* Bouton toggle markdown */
.c-markdown-toggle {
	margin-left: auto !important;
	background-color: transparent !important;
	border: 1px solid var(--color-dark-light) !important;
	padding: 6px 12px !important;
	border-radius: 4px !important;
}

.c-markdown-toggle:hover {
	background-color: var(--color-soft-purple) !important;
	border-color: var(--color-light-purple) !important;
}

/* Zone d'édition */
.tiptap,
.ProseMirror {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
	border: 1px solid var(--color-dark-light) !important;
	border-top: none !important;
	padding: 16px !important;
	min-height: 200px !important;
	border-radius: 0 0 4px 4px !important;
}

.tiptap:focus,
.ProseMirror:focus {
	outline: none !important;
	border-color: var(--color-light-purple) !important;
}

/* Éléments dans l'éditeur */
.tiptap h1,
.tiptap h2,
.tiptap h3,
.tiptap h4,
.tiptap h5,
.tiptap h6,
.ProseMirror h1,
.ProseMirror h2,
.ProseMirror h3,
.ProseMirror h4,
.ProseMirror h5,
.ProseMirror h6 {
	color: var(--color-light) !important;
	margin-top: 16px !important;
	margin-bottom: 8px !important;
}

.tiptap h2,
.ProseMirror h2 {
	font-size: 1.5em !important;
	font-weight: 600 !important;
}

.tiptap h3,
.ProseMirror h3 {
	font-size: 1.25em !important;
	font-weight: 600 !important;
}

.tiptap p,
.ProseMirror p {
	color: var(--color-light) !important;
	margin-bottom: 8px !important;
}

.tiptap ul,
.tiptap ol,
.ProseMirror ul,
.ProseMirror ol {
	color: var(--color-light) !important;
	padding-left: 24px !important;
	margin-bottom: 8px !important;
}

.tiptap li,
.ProseMirror li {
	color: var(--color-light) !important;
	margin-bottom: 4px !important;
}

.tiptap code,
.ProseMirror code {
	background-color: var(--color-dark-grey) !important;
	color: var(--color-light-purple) !important;
	padding: 2px 6px !important;
	border-radius: 3px !important;
	font-family: 'Courier New', monospace !important;
}

.tiptap pre,
.ProseMirror pre {
	background-color: var(--color-dark-grey) !important;
	color: var(--color-light) !important;
	padding: 12px !important;
	border-radius: 4px !important;
	overflow-x: auto !important;
}

.tiptap a,
.ProseMirror a {
	color: var(--color-light-purple) !important;
	text-decoration: underline !important;
}

/* Placeholder */
.tiptap .is-editor-empty::before,
.ProseMirror .is-editor-empty::before {
	color: var(--color-medium-grey) !important;
}

/* Sélection de texte */
.tiptap ::selection,
.ProseMirror ::selection {
	background-color: var(--color-light-purple) !important;
	color: var(--color-darker) !important;
}

/* ============================================
   MODAL DE PARTAGE D'IDÉE (LIGHTBOX)
   ============================================ */

/* Conteneur principal de la modal */
.c-share-feedback__content,
.c-share-feedback,
[class*="share-feedback"] {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
	border-radius: 8px !important;
}

/* Titre de la modal */
.c-share-feedback__content h1,
.c-share-feedback__content .text-large,
.c-share-feedback h1 {
	color: var(--color-light) !important;
	font-weight: 600 !important;
}

/* Formulaire de partage */
.c-share-feedback-form,
.c-share-feedback-form .c-form {
	background-color: var(--color-dark) !important;
	color: var(--color-light) !important;
}

/* Section des messages similaires */
.similar-posts-container {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	border-radius: 4px !important;
	padding: 12px !important;
}

.similar-posts-container .text-gray-700,
.similar-posts-container [class*="text-gray"] {
	color: var(--color-light-grey) !important;
}

/* Champ de saisie du titre */
.c-share-feedback__content .c-input,
.c-share-feedback__content input[type="text"],
#input-title {
	background-color: var(--color-dark-grey) !important;
	border: 1px solid var(--color-dark-light) !important;
	color: var(--color-light) !important;
	padding: 12px !important;
	border-radius: 4px !important;
}

.c-share-feedback__content .c-input:focus,
.c-share-feedback__content input[type="text"]:focus,
#input-title:focus {
	border-color: var(--color-light-purple) !important;
	box-shadow: 0 0 0 2px rgba(211, 188, 253, 0.2) !important;
}

.c-share-feedback__content .c-input::placeholder,
.c-share-feedback__content input::placeholder,
#input-title::placeholder {
	color: var(--color-medium-grey) !important;
}

/* Labels du formulaire */
.c-share-feedback__content label,
.c-share-feedback__content .c-form-field label {
	color: var(--color-light-grey) !important;
	font-weight: 500 !important;
	margin-bottom: 8px !important;
	display: block !important;
}

/* Overlay de la modal */
.c-modal__overlay,
[class*="modal-overlay"],
[class*="lightbox-overlay"] {
	background-color: rgba(20, 18, 24, 0.9) !important;
}

/* Container de la modal */
.c-modal__container,
.c-modal,
[class*="modal-container"] {
	background-color: var(--color-dark) !important;
	border: 1px solid var(--color-dark-grey) !important;
	border-radius: 12px !important;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5) !important;
}

/* Bouton de fermeture de la modal */
.c-modal__close,
[class*="modal-close"] {
	color: var(--color-light-grey) !important;
}

.c-modal__close:hover,
[class*="modal-close"]:hover {
	color: var(--color-light-purple) !important;
}

/* Placeholder de l'éditeur dans la modal */
.c-share-feedback__content .tiptap-is-empty::before,
.c-share-feedback__content [data-placeholder]::before {
	color: var(--color-medium-grey) !important;
}