:root {
	--primary-color: #6781f3;
	--secondary-color: #6864b9;
	--accent-color: #4895ef;
	--light-color: #f8f9fa;
	--dark-color: #212529;
	--success-color: #4cc9f0;
	--warning-color: #f72585;
	--border-radius: 12px;
	--box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
	--transition: all 0.3s ease;
	--primary-light: #8e44ad;
	--danger-color: #e74c3c;
	--text-color: #333;
	--border-color: #ddd;
	--box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
    
    body {
		font-family: 'Segoe UI', 'Roboto', Arial, sans-serif;
		/* background: linear-gradient(135deg, #ffffff73 0%, #ffffff52 100%); */
		background-color: white;
		margin: 0;
		padding: 0;
		min-height: 100vh;
		position: relative;
		overflow-x: hidden;
	}
	/* Animated background circles */
	body::before, body::after {
		content: '';
		position: fixed;
		border-radius: 50%;
		opacity: 0.18;
		z-index: 0;
		pointer-events: none;
	}
	body::before {
		width: 420px; height: 420px;
		background: radial-gradient(circle, #a777e3 0%, #e9e6fa 80%);
		top: -120px; left: -120px;
		animation: float1 12s ease-in-out infinite alternate;
	}
	body::after {
		width: 320px; height: 320px;
		background: radial-gradient(circle, #7e9efb 0%, #f6f7fb 80%);
		bottom: -100px; right: -100px;
		animation: float2 14s ease-in-out infinite alternate;
	}
	@keyframes float1 { to { top: -80px; left: -80px; } }
	@keyframes float2 { to { bottom: -60px; right: -60px; } }


.btn-icon {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 36px;
	height: 36px;
	background: linear-gradient(135deg, #f1f3ff 0%, #e0e5ff 100%);
	border-radius: 10px;
	margin-right: 1rem;
	color: var(--primary-color);
	transition: var(--transition);
	font-size: 1rem;
}
.menu-btn:hover .btn-icon {
	background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
	color: white;
	transform: rotate(5deg);
}
.btn-text {
	flex: 1;
	font-weight: 500;
	color: var(--dark-color);
	transition: var(--transition);
	font-size: 0.95rem;
}
body { 
	font-family: 'Poppins', 'Montserrat', Arial, sans-serif;
	min-height: 100vh;
	margin: 0;
}
.desktop-hide {
	display: none !important;
}
/* Fermer toutes les barres de défilement */
html, body, aside, section, article, .modal, .modal-dialog, .modal-content, .section-panel, .article-panel {
	scrollbar-width: none !important; /* Firefox */
}
/* Pour Chrome, Edge, Safari */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
aside::-webkit-scrollbar,
section::-webkit-scrollbar,
article::-webkit-scrollbar,
.modal::-webkit-scrollbar,
.modal-dialog::-webkit-scrollbar,
.modal-content::-webkit-scrollbar,
.section-panel::-webkit-scrollbar,
.article-panel::-webkit-scrollbar {
	display: none !important;
	width: 0 !important;
	background: transparent !important;
}
@media (min-width: 792px) {
	/* Styles spécifiques pour desktop */
	.mobile-hide {
		display: block !important;
	}
	.desktop-only {
		display: block !important;
	}
	.menue-panel, .section-panel, .article-panel {
		border-radius: 24px;
		position: relative;
		overflow: hidden;
		z-index: 1;
		        box-shadow: 0 8px 32px 0 rgba(88, 95, 199, 0.062);
		margin: 16px;
		background: rgba(255,255,255,0.95);
		transition: box-shadow 0.2s;
	}
}
@media (max-width: 791.98px) {
	/* Masquer certains éléments sur mobile */
	.mobile-hide {
		display: none !important;
	}
	.desktop-only {
		display: none !important;
	}
}

/* Transaction Card Styles */
	.transaction-card-body{
		width: 100%;
	}

	.transaction-card {
		background: rgba(255,255,255,0.98);
		border-radius: 28px;
		box-shadow: 0 12px 48px rgba(120, 100, 200, 0.15), 0 1.5px 8px #ececff;
		padding: 44px 44px 32px 44px;
		border: none;
		max-width: 620px;
		margin: auto;
		transition: box-shadow 0.3s, transform 0.3s;
		position: relative;
		z-index: 1;
	}
	.transaction-card:hover {
		transform: translateY(-10px) scale(1.025);
		box-shadow: 0 24px 64px rgba(120, 100, 200, 0.22), 0 2px 12px #ececff;
	}

	.transaction-header {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 26px;
		margin-bottom: 26px;
		border-bottom: 2px solid #f2f0fa;
	}

	.currency-pair {
		display: flex;
		align-items: center;
		gap: 54px;
	}

	.vs-separator {
		color: #a777e3;
		font-weight: bold;
		font-size: 36px;
		background: linear-gradient(135deg, #f3f0fa 60%, #e9e6fa 100%);
		border-radius: 50%;
		padding: 12px 22px;
		box-shadow: 0 2px 16px #ececff;
		margin: 0 12px;
		transition: background 0.3s;
	}

	.currency-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		min-width: 110px;
	}

	.currency-icon {
		width: 48px;
		height: 48px;
		margin-bottom: 12px;
		border-radius: 50%;
		background: linear-gradient(135deg, #f7f7fc 60%, #e9e6fa 100%);
		box-shadow: 0 2px 16px #ececff;
		object-fit: contain;
		border: 2.5px solid #e3e0fa;
		transition: box-shadow 0.2s;
	}
	.currency-icon:hover {
		box-shadow: 0 4px 24px #a777e3aa;
	}

	.currency-name {
		font-size: 22px;
		font-weight: 700;
		color: #5a4a8d;
		letter-spacing: 1.2px;
		margin-bottom: 4px;
		text-shadow: 0 1px 0 #ececff;
	}

	.currency-amount {
		font-size: 17px;
		color: #7e9efb;
		font-weight: 600;
		background: #f3f7ff;
		border-radius: 12px;
		padding: 4px 16px;
		margin-top: 4px;
		box-shadow: 0 1px 4px #ececff;
	}

	.transaction-details {
		margin-top: 18px;
	}

	.detail-row {
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		padding: 15px 0;
		border-bottom: 1px solid #f5f5fa;
	}

	.detail-label {
		font-weight: 600;
		color: #8a7ab8;
		min-width: 150px;
		font-size: 16px;
		letter-spacing: 0.3px;
	}

	.detail-value {
		color: #2c3e50;
		text-align: right;
		word-break: break-all;
		flex-grow: 1;
		padding-left: 18px;
		font-size: 16px;
	}

	.status-badge {
		display: inline-block;
		padding: 8px 24px;
		border-radius: 20px;
		font-size: 15px;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 1.2px;
		box-shadow: 0 1px 8px #ececff;
		transition: background 0.2s, color 0.2s, box-shadow 0.2s;
		cursor: pointer;
	}
	.status-badge:hover {
		box-shadow: 0 2px 16px #ececff, 0 0 0 2px #a777e3;
	}

	.status-pending {
		background-color: #fff7e0;
		color: #b48a00;
		border: 1.5px solid #ffe9a7;
	}
	.status-pending:hover {
		background: #ffe9a7;
		color: #b48a00;
	}

	.status-completed {
		background-color: #e6f9e9;
		color: #1e7e34;
		border: 1.5px solid #b6eac7;
	}
	.status-completed:hover {
		background: #b6eac7;
		color: #1e7e34;
	}

	.status-failed {
		background-color: #ffeaea;
		color: #d32f2f;
		border: 1.5px solid #ffbdbd;
	}
	.status-failed:hover {
		background: #ffbdbd;
		color: #d32f2f;
	}

	@media (max-width: 576px) {
		.transaction-card {
			padding: 18px 3vw 14px 3vw;
					margin: 2% auto;
		border: none;
		max-width: 520px;
			max-width: 99vw;
		}
		.currency-pair {
			/* gap: 12px; */
		}
		.vs-separator {
			font-size: 20px;
			padding: 5px 10px;
		}
		.currency-item {
			min-width: 60px;
		}
		.currency-icon {
			width: 28px;
			height: 28px;
		}
		.detail-row {
			flex-direction: column;
			align-items: flex-start;
			padding: 8px 0;
		}
		.detail-label {
			margin-bottom: 2px;
		}
		.detail-value {
			text-align: left;
			padding-left: 0;
		}
	}