:root {
	--theme-bg: #fbf6ec;
	--theme-bg-soft: #f4ead8;
	--theme-bg-card: #fffdf8;

	--theme-primary: #c9a45c;
	--theme-primary-light: #f2d28e;
	--theme-primary-dark: #c7973f;

	--theme-secondary: #d7b978;
	--theme-secondary-light: #f7ecd1;

	--theme-accent: #9b7a3e;
	--theme-accent-light: #f3e7c8;

	--theme-text: #342b20;
	--theme-text-muted: #7b6c57;
	--theme-text-light: #ffffff;

	--theme-border: rgba(201, 164, 92, 0.22);
	--theme-border-strong: rgba(201, 164, 92, 0.42);

	--theme-shadow: rgba(120, 90, 45, 0.12);
	--theme-white: #ffffff;

	--theme-danger: #d9534f;
	--theme-success: #3ca66b;

	--theme-radius-sm: 12px;
	--theme-radius-md: 18px;
	--theme-radius-lg: 26px;
}

html[data-theme="dark"] {
	--theme-bg: #000000;
	--theme-bg-soft: #303030;
	--theme-bg-card: rgb(28, 28, 28, 0.96);

	--theme-primary: #c9a45c;
	--theme-primary-light: #e6c879;
	--theme-primary-dark: #d8ad55;

	--theme-secondary: #9b7a3e;
	--theme-secondary-light: #342b20;

	--theme-accent: #d7b978;
	--theme-accent-light: #2d251d;

	--theme-text: #342b20;
	--theme-text-muted: #c7b8a4;
	--theme-text-light: #ffffff;

	--theme-border: rgba(201, 164, 92, 0.28);
	--theme-border-strong: rgba(201, 164, 92, 0.48);

	--theme-shadow: rgba(0, 0, 0, 0.34);
	--theme-white: #2b2520;

	--theme-danger: #e96b66;
	--theme-success: #58c783;
}
html[data-theme="dark"] body {
	background:
		radial-gradient(circle at top left, rgba(201, 164, 92, 0.18), transparent 34%),
		radial-gradient(circle at bottom right, rgba(155, 122, 62, 0.14), transparent 36%),
		linear-gradient(180deg, #000000 0%, #303030 100%);
	color: var(--theme-text);
}

html[data-theme="dark"] .quick-card,
html[data-theme="dark"] .menu-card,
html[data-theme="dark"] .stat-box,
html[data-theme="dark"] .info-row,
html[data-theme="dark"] .message-card,
html[data-theme="dark"] .gallery-card,
html[data-theme="dark"] .planning-admin-card {
	background: var(--theme-bg-card);
	color: var(--theme-text);
	border-color: var(--theme-border);
}

html[data-theme="dark"] .section-title,
html[data-theme="dark"] .menu-card h3,
html[data-theme="dark"] .client-text strong,
html[data-theme="dark"] .stat-box strong,
html[data-theme="dark"] .message-author,
html[data-theme="dark"] .planning-admin-title {
	color: var(--theme-text);
}

html[data-theme="dark"] .quick-card p,
html[data-theme="dark"] .menu-card p,
html[data-theme="dark"] .client-text span,
html[data-theme="dark"] .info-row span,
html[data-theme="dark"] .message-content,
html[data-theme="dark"] .message-date,
html[data-theme="dark"] .planning-admin-desc {
	color: var(--theme-text-muted);
}

html[data-theme="dark"] .bottom-nav {
	background: rgb(28, 28, 28, 0.96);
	border-top-color: var(--theme-border);
}

html[data-theme="dark"] .nav-item {
	color: var(--theme-text-muted);
}

html[data-theme="dark"] .nav-item.active,
html[data-theme="dark"] .nav-item:hover {
	color: var(--theme-primary-light);
}

html[data-theme="dark"] .form-group-custom label {
	color: var(--theme-white);
}



/*
|--------------------------------------------------------------------------
| BASE
|--------------------------------------------------------------------------
*/

body {
	background:
		radial-gradient(circle at top left, rgba(240, 220, 163, 0.45), transparent 34%),
		radial-gradient(circle at bottom right, rgba(215, 185, 120, 0.22), transparent 36%),
		linear-gradient(180deg, #fffdf8 0%, #f8f0df 100%);
	color: var(--theme-text);
}

/*
|--------------------------------------------------------------------------
| STRUCTURE GÉNÉRALE
|--------------------------------------------------------------------------
*/

.app-shell {
	background: transparent;
}

.content {
	background: transparent;
}

/*
|--------------------------------------------------------------------------
| BANDEAU HAUT
|--------------------------------------------------------------------------
*/
.top-hero {
	background:
		linear-gradient(
			180deg,
			rgba(0, 0, 0, 0.10) 0%,
			rgba(0, 0, 0, 0.04) 45%,
			rgba(0, 0, 0, 0.20) 100%
		),
		var(--bandeau-bg-image, none),
		linear-gradient(135deg, #f2d28e 0%, #c9a45c 100%);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: var(--theme-text-light);
	border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.brand-badge {
	background: rgba(255, 255, 255, 0.24);
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.38);
}

.brand-badge i {
	color: #ffffff;
}

.hero-kicker {
	color: var(--theme-primary-light);
}

.hero-content h1 {
	color: var(--theme-text-light);
}

.hero-content p {
	color: rgba(255, 255, 255, 0.78);
}

/*
|--------------------------------------------------------------------------
| TOPBAR ACTIONS
|--------------------------------------------------------------------------
*/

.topbar-actions {
	display: flex;
	align-items: center;
	gap: 10px;
}

.topbar-btn {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.40);
	background: rgba(255, 255, 255, 0.20);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}

.topbar-btn:hover {
	background: #ffffff;
	color: var(--theme-primary-dark);
	border-color: #ffffff;
	transform: translateY(-1px);
}
/*
|--------------------------------------------------------------------------
| CARTES
|--------------------------------------------------------------------------
*/

.quick-card {
	background: rgba(255, 250, 242, 0.96);
	color: var(--theme-text);
	border: 1px solid var(--theme-border);
	box-shadow: 0 18px 45px var(--theme-shadow);
	backdrop-filter: blur(8px);
}

.section-title {
	color: var(--theme-primary-dark);
}

.quick-card p,
.client-text span,
.info-row span {
	color: var(--theme-text-muted);
}

.client-text small {
	color: var(--theme-secondary);
}

.client-text strong {
	color: var(--theme-text);
}

.client-avatar {
	background: var(--theme-secondary-light);
	color: var(--theme-primary-dark);
	border: 1px solid var(--theme-border);
}

/*
|--------------------------------------------------------------------------
| EVENT LIVE / QR CODE
|--------------------------------------------------------------------------
*/

.event-qr-box {
	background: #fffdf8;
	border: 1px solid var(--theme-border);
}

.event-qr-image {
	background: var(--theme-white);
	border: 1px solid var(--theme-border-strong);
	box-shadow: 0 10px 24px rgba(95, 70, 35, 0.10);
}

.event-qr-link input {
	background: var(--theme-white);
	color: var(--theme-text);
	border: 1px solid var(--theme-border);
}

.event-qr-date {
	color: var(--theme-text-muted);
}

/*
|--------------------------------------------------------------------------
| BOUTONS
|--------------------------------------------------------------------------
*/

.btn-action {
	background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary), var(--theme-primary-light));
	color: var(--theme-text-light);
	border: 1px solid rgba(143, 107, 47, 0.35);
	box-shadow: 0 10px 24px rgba(201, 164, 92, 0.28);
}

.btn-action:hover {
	background: linear-gradient(135deg, #f0d996, var(--theme-primary-light));
	color: var(--theme-text-light);
}

/*
|--------------------------------------------------------------------------
| MENUS / ACCÈS RAPIDES
|--------------------------------------------------------------------------
*/

.menu-card {
	background: #fffaf2;
	border: 1px solid var(--theme-border);
	color: var(--theme-text);
	box-shadow: 0 10px 24px rgba(95, 70, 35, 0.07);
}

.menu-card:hover {
	border-color: var(--theme-border-strong);
	background: #fff6e8;
	transform: translateY(-2px);
}

.menu-icon {
	background: var(--theme-secondary-light);
	color: var(--theme-primary-dark);
}

.menu-card h3 {
	color: var(--theme-text);
}

.menu-card p {
	color: var(--theme-text-muted);
}

/*
|--------------------------------------------------------------------------
| INFOS
|--------------------------------------------------------------------------
*/

.info-row {
	background: #fffdf8;
	border: 1px solid rgba(201, 164, 92, 0.18);
}

.info-row i {
	color: var(--theme-primary-dark);
}

/*
|--------------------------------------------------------------------------
| ALERTES
|--------------------------------------------------------------------------
*/

.alert-box-success {
	background: rgba(60, 166, 107, 0.12);
	color: #287b4d;
	border: 1px solid rgba(60, 166, 107, 0.28);
}

.alert-box-danger {
	background: rgba(217, 83, 79, 0.12);
	color: #a63c38;
	border: 1px solid rgba(217, 83, 79, 0.28);
}

/*
|--------------------------------------------------------------------------
| NAVIGATION BASSE
|--------------------------------------------------------------------------
*/

.bottom-nav {
	background: rgba(255, 250, 242, 0.96);
	border-top: 1px solid var(--theme-border);
	box-shadow: 0 -10px 30px rgba(95, 70, 35, 0.10);
	backdrop-filter: blur(10px);
}

.nav-item {
	color: var(--theme-text-muted);
}

.nav-item i {
	color: inherit;
}

.nav-item.active,
.nav-item:hover {
	color: var(--theme-primary-dark);
}

/*
|--------------------------------------------------------------------------
| FORMULAIRES
|--------------------------------------------------------------------------
*/

.form-group-custom label {
	color: var(--theme-primary-dark);
}

.form-group-custom input[type="text"],
.form-group-custom input[type="file"] {
	background: #ffffff;
	border: 1px solid var(--theme-border);
}

.form-group-custom input[type="text"]::placeholder {
	color: rgba(47, 38, 27, 0.42);
}

/*
|--------------------------------------------------------------------------
| DESIGNER QR CODE
|--------------------------------------------------------------------------
*/

.qr-template-card {
	box-shadow: 0 18px 45px rgba(95, 70, 35, 0.18);
}

.qr-shape-btn,
.qr-template-btn,
.qr-icon-btn {
	background: #ffffff;
	color: var(--theme-text);
	border-color: var(--theme-border);
}

.qr-shape-btn.active,
.qr-template-btn.active,
.qr-icon-btn.active {
	background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary));
	color: var(--theme-text);
	border-color: var(--theme-primary-dark);
}

/*
|--------------------------------------------------------------------------
| TITRE + COULEUR
|--------------------------------------------------------------------------
*/

.qr-title-control-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.qr-title-control-head label {
	margin: 0;
}

.qr-title-control-head input[type="color"] {
	width: 54px;
	height: 38px;
	border: none;
	background: transparent;
	cursor: pointer;
	padding: 0;
}

/*
|--------------------------------------------------------------------------
| RESPONSIVE
|--------------------------------------------------------------------------
*/

@media (max-width: 768px) {
	.topbar-btn {
		width: 40px;
		height: 40px;
	}

	.topbar-actions {
		gap: 8px;
	}
}

/*
|--------------------------------------------------------------------------
| MODAL PARAMETRE
|--------------------------------------------------------------------------
*/
.theme-modal {
	position: fixed;
	inset: 0;
	z-index: 10080;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.theme-modal.is-open {
	display: flex;
}

.theme-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(31, 26, 23, 0.45);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.theme-modal-box {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: 340px;
	padding: 20px;
	border-radius: 24px;
	background: var(--theme-bg-card);
	border: 1px solid var(--theme-border);
	box-shadow: 0 24px 60px rgba(31, 26, 23, 0.28);
	color: var(--theme-text);
}

.theme-modal-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 10px;
}

.theme-modal-head h3 {
	margin: 0;
	font-size: 18px;
	color: var(--theme-text);
}

.theme-modal-close {
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 999px;
	background: var(--theme-secondary-light);
	color: var(--theme-primary-dark);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.theme-modal-text {
	margin: 0 0 16px;
	font-size: 13px;
	line-height: 1.5;
	color: var(--theme-text-muted);
}

.theme-choice-list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
}

.theme-choice-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 92px;
	border-radius: 18px;
	border: 1px solid var(--theme-border);
	background: var(--theme-white);
	color: var(--theme-text);
	cursor: pointer;
	font-weight: 800;
}

.theme-choice-btn i {
	font-size: 24px;
	color: var(--theme-primary-dark);
}

.theme-choice-btn.active {
	background: linear-gradient(135deg, var(--theme-primary-light), var(--theme-primary));
	color: var(--theme-text-light);
	border-color: var(--theme-border-strong);
}

.theme-choice-btn.active i {
	color: var(--theme-text-light);
}

.theme-modal-open {
	overflow: hidden;
}