/* ==================== Variables ==================== */
:root {
	--bg-primary: #0a0e14;
	--bg-secondary: #0f1419;
	--bg-tertiary: #151b24;
	--bg-card: #13171d;
	--bg-hover: #1a2027;
	--text-primary: #ffffff;
	--text-secondary: #8b92a0;
	--text-muted: #4a5568;
	--accent: #3b82f6;
	--accent-hover: #60a5fa;
	--accent-light: rgba(59, 130, 246, 0.08);
	--accent-dark: #2563eb;
	--accent-rgb: 59, 130, 246;
	--border: rgba(255, 255, 255, 0.06);
	--border-light: rgba(255, 255, 255, 0.08);
	--success: #22c55e;
	--success-hover: #16a34a;
	--success-light: rgba(34, 197, 94, 0.1);
	--success-rgb: 34, 197, 94;
	--warning: #f59e0b;
	--warning-light: rgba(245, 158, 11, 0.1);
	--danger: #ef4444;
	--danger-hover: #dc2626;
	--danger-light: rgba(239, 68, 68, 0.1);
	--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.1);
	--shadow: 0 2px 8px 0 rgba(0, 0, 0, 0.15);
	--shadow-lg: 0 4px 16px 0 rgba(0, 0, 0, 0.2);
	--shadow-xl: 0 8px 32px 0 rgba(0, 0, 0, 0.25);
	--radius-sm: 8px;
	--radius: 12px;
	--radius-lg: 16px;
	--radius-xl: 24px;
	--transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==================== Reset & Base ==================== */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

body {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	background-color: var(--bg-primary);
	color: var(--text-primary);
	line-height: 1.6;
	min-height: 100vh;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.container {
	max-width: 1400px;
	margin: 0 auto;
	padding: 2rem;
}

.container-sm {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem;
}

/* ==================== Typography ==================== */
h1, h2, h3, h4, h5, h6 {
	color: var(--text-primary);
	margin-bottom: 1rem;
	font-weight: 600;
}

h1 { font-size: 2rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }

p {
	margin-bottom: 1rem;
	color: var(--text-secondary);
}

/* ==================== Links ==================== */
a {
	color: var(--accent);
	text-decoration: none;
	transition: color 0.2s ease;
}

a:hover {
	color: var(--accent-hover);
	text-decoration: none;
}

/* ==================== Header ==================== */
header {
	background-color: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
	position: sticky;
	top: 0;
	z-index: 1002;
	backdrop-filter: blur(10px);
	background-color: rgba(26, 31, 46, 0.9);
}

.header-content {
	max-width: 1400px;
	margin: 0 auto;
	padding: 1rem 2rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

header h1 {
	font-size: 1.5rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	margin: 0;
}

.toplinks {
	display: flex;
	gap: 0.75rem;
	align-items: center;
}

.toplinks a {
	font-weight: 500;
	padding: 0.5rem 1.25rem;
	border-radius: var(--radius);
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	background-color: transparent;
	border: 1px solid transparent;
}

.toplinks a:hover {
	background-color: var(--accent-light);
	border-color: var(--accent);
	text-decoration: none;
	transform: translateY(-1px);
}

.toplinks a.btn-primary {
	background-color: var(--accent);
	color: white;
	border-color: var(--accent);
}

.toplinks a.btn-primary:hover {
	background-color: var(--accent-hover);
}

/* Mobile menu button - hidden by default */
.mobile-menu-btn {
	display: none;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	position: relative;
	z-index: 1001;
	transition: var(--transition);
}

.hamburger-line {
	width: 24px;
	height: 2.5px;
	background-color: var(--text-primary);
	border-radius: 2px;
	transition: all 0.3s ease;
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.hamburger-line:nth-child(1) {
	top: 14px;
}

.hamburger-line:nth-child(2) {
	top: 21px;
}

.hamburger-line:nth-child(3) {
	top: 28px;
}

.mobile-menu-btn.active .hamburger-line:nth-child(1) {
	top: 21px;
	transform: translateX(-50%) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-line:nth-child(2) {
	opacity: 0;
}

.mobile-menu-btn.active .hamburger-line:nth-child(3) {
	top: 21px;
	transform: translateX(-50%) rotate(-45deg);
}

/* Cart badge in header */
.cart-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.25rem;
	height: 1.25rem;
	padding: 0 0.375rem;
	margin-left: 0.25rem;
	border-radius: 999px;
	background-color: var(--accent);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	border: 1px solid var(--accent-hover);
}

/* ==================== Products Grid ==================== */
.products {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(380px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}

/* ==================== Cards ==================== */
.card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 0;
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;
}

.card:hover {
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
	border-color: var(--border-light);
}

.card-image {
	position: relative;
	overflow: hidden;
	background: var(--bg-secondary);
	height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 0.3s ease;
}

.card:hover img {
	transform: scale(1.03);
}

.card-content {
	padding: 1.5rem;
	display: flex;
	flex-direction: column;
	flex: 1;
	gap: 1rem;
}

.product-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
}

.card h3 {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.4;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.card-description {
	flex: 1;
	font-size: 0.875rem;
	margin-bottom: 0;
	color: var(--text-secondary);
	line-height: 1.6;
}

.price {
	font-weight: 700;
	font-size: 1.5rem;
	color: var(--accent);
	margin: 0;
	display: flex;
	align-items: baseline;
	gap: 0.125rem;
	letter-spacing: -0.01em;
	line-height: 1;
}

.product-header .price {
	flex-shrink: 0;
}

/* ==================== Forms ==================== */
form.inline {
	display: flex;
	gap: 0.5rem;
	align-items: center;
	margin-top: auto;
	padding-top: 0.25rem;
}

label {
	display: block;
	margin-bottom: 0.5rem;
	color: var(--text-primary);
	font-weight: 500;
}

form.inline label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0;
	font-size: 0.75rem;
	color: var(--text-muted);
	white-space: nowrap;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

input[type="text"],
input[type="number"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="tel"],
textarea,
select {
	width: 100%;
	padding: 0.75rem;
	background-color: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: 6px;
	color: var(--text-primary);
	font-size: 1rem;
	transition: all 0.2s ease;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="tel"]:focus,
textarea:focus,
select:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-light);
}

/* Wrapper pour le champ de quantité avec boutons */
.quantity-wrapper {
	display: flex;
	align-items: stretch;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: visible;
	transition: all 0.2s ease;
	height: 36px;
	gap: 2px;
	padding: 2px;
}

.quantity-wrapper:hover {
	border-color: var(--border-light);
}

.quantity-btn {
	width: 32px;
	background-color: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 1.125rem;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	padding: 0;
	min-width: auto;
	border-radius: 6px;
}

.quantity-btn:hover {
	background-color: var(--bg-hover);
	color: var(--accent);
	transform: none;
	box-shadow: none;
}

.quantity-btn:active {
	background-color: var(--accent-light);
	color: var(--accent);
}

.quantity-btn:disabled {
	opacity: 0.3;
	cursor: not-allowed;
}

form.inline input[type="number"] {
	width: 40px;
	margin-bottom: 0;
	padding: 0;
	text-align: center;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	font-size: 0.9375rem;
	background-color: transparent;
	color: var(--text-primary);
	-moz-appearance: textfield;
}

/* Cache les spinners natifs */
form.inline input[type="number"]::-webkit-inner-spin-button,
form.inline input[type="number"]::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

form.inline input[type="number"]:focus {
	outline: none;
}

textarea {
	resize: vertical;
	min-height: 100px;
	font-family: inherit;
}

/* ==================== Buttons ==================== */
button,
input[type="submit"],
.btn {
	padding: 0.625rem 1.25rem;
	background-color: var(--accent);
	color: white;
	border: none;
	border-radius: var(--radius);
	font-size: 0.875rem;
	font-weight: 600;
	cursor: pointer;
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	text-decoration: none;
	white-space: nowrap;
}

button:hover,
input[type="submit"]:hover,
.btn:hover {
	background-color: var(--accent-hover);
	color: white;
}

form.inline button[type="submit"] {
	flex: 1;
	padding: 0.625rem 1rem;
	font-weight: 600;
	gap: 0.5rem;
	font-size: 0.875rem;
	height: 36px;
}

button:active,
input[type="submit"]:active,
.btn:active {
	transform: translateY(0);
}

button:disabled,
.btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
	transform: none;
}

.btn-secondary {
	background-color: var(--bg-tertiary);
	color: var(--text-primary);
	border: 1px solid var(--border);
}

.btn-secondary:hover {
	background-color: var(--bg-hover);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
	color: var(--text-primary);
}

.btn-success {
	background-color: var(--success);
}

.btn-success:hover {
	background-color: var(--success-hover);
	box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
	color: white;
}

.btn-danger {
	background-color: var(--danger);
}

.btn-danger:hover {
	background-color: var(--danger-hover);
	box-shadow: 0 6px 16px rgba(239, 68, 68, 0.4);
	color: white;
}

.btn-sm {
	padding: 0.375rem 0.875rem;
	font-size: 0.8125rem;
}

.btn-lg {
	padding: 0.75rem 1.5rem;
	font-size: 0.9375rem;
}

/* ==================== Tables ==================== */
.table-container {
	background-color: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	overflow: hidden;
	margin: 1.5rem 0;
}

table {
	width: 100%;
	border-collapse: collapse;
}

th, td {
	padding: 0.75rem 1rem;
	text-align: left;
	border-bottom: 1px solid var(--border);
}

th {
	background-color: var(--bg-tertiary);
	color: var(--text-secondary);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.7rem;
	letter-spacing: 0.1em;
}

tr:last-child td {
	border-bottom: none;
}

tbody tr {
	transition: var(--transition);
}

tbody tr:hover {
	background-color: var(--bg-hover);
}

tfoot {
	background-color: var(--bg-tertiary);
	font-weight: 600;
}

tfoot td {
	border-top: 2px solid var(--border);
	border-bottom: none;
}

.total {
	text-align: right;
	font-weight: 700;
	color: var(--accent);
	font-size: 1.25rem;
}

table input[type="number"] {
	width: 80px;
	margin-bottom: 0;
	padding: 0.5rem;
}

/* ==================== Badges ==================== */
.badge {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: var(--radius-sm);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.badge-new {
	background-color: var(--accent-light);
	color: var(--accent);
}

.badge-processing {
	background-color: var(--warning-light);
	color: var(--warning);
}

.badge-shipped,
.badge-completed {
	background-color: var(--success-light);
	color: var(--success);
}

.badge-cancelled {
	background-color: var(--danger-light);
	color: var(--danger);
}

/* Payment Status Badges */
.badge-payment-unpaid {
	background-color: var(--danger-light);
	color: var(--danger);
}

.badge-payment-pending {
	background-color: rgba(59, 130, 246, 0.1);
	color: var(--accent);
}

.badge-payment-partial {
	background-color: var(--warning-light);
	color: var(--warning);
}

.badge-payment-paid {
	background-color: var(--success-light);
	color: var(--success);
}

.badge-payment-refunded {
	background-color: rgba(147, 51, 234, 0.1);
	color: #9333ea;
}

/* ==================== Utilities ==================== */
.error,
ul.error {
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid var(--danger);
	color: var(--danger);
	padding: 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
}

.error ul,
ul.error {
	list-style-position: inside;
}

p.error {
	background-color: rgba(239, 68, 68, 0.1);
	border: 1px solid var(--danger);
	color: var(--danger);
	padding: 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
}

.success,
p.success {
	background-color: rgba(16, 185, 129, 0.1);
	border: 1px solid var(--success);
	color: var(--success);
	padding: 1rem;
	border-radius: 6px;
	margin-bottom: 1rem;
	font-weight: 500;
}

/* ==================== Login/Admin Specific ==================== */
.login-container {
	max-width: 420px;
	margin: 4rem auto;
	padding: 2.5rem;
	background-color: var(--bg-card);
	border-radius: var(--radius-lg);
	border: 1px solid var(--border);
	box-shadow: var(--shadow-lg);
}

.login-container h1 {
	text-align: center;
	margin-bottom: 1.5rem;
}

.form {
	max-width: 400px;
	padding: 2rem;
	background-color: var(--bg-secondary);
	border-radius: 12px;
	border: 1px solid var(--border);
}

nav {
	margin: 2rem 0;
	padding: 1rem 0;
	border-bottom: 1px solid var(--border);
}

nav a {
	margin-right: 1.5rem;
	font-weight: 500;
	padding: 0.5rem 1rem;
	border-radius: 6px;
	transition: all 0.2s ease;
	display: inline-block;
}

nav a:hover {
	background-color: var(--accent-light);
	text-decoration: none;
}

/* ==================== Page Sections ==================== */
.page-header {
	margin-bottom: 2rem;
}

.page-title {
	font-size: 2.25rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	background: linear-gradient(135deg, var(--text-primary), var(--text-secondary));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.page-subtitle {
	font-size: 1.125rem;
	color: var(--text-secondary);
}

.section {
	margin: 1.5rem 0;
}

.section-title {
	font-size: 1.125rem;
	font-weight: 600;
	margin-bottom: 1rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
	color: var(--text-primary);
}

.empty-state {
	text-align: center;
	padding: 4rem 2rem;
	background-color: var(--bg-secondary);
	border: 2px dashed var(--border);
	border-radius: var(--radius-lg);
	margin: 2rem 0;
}

.empty-state-icon {
	font-size: 3rem;
	margin-bottom: 1rem;
	opacity: 0.5;
}

.empty-state-text {
	font-size: 1.125rem;
	color: var(--text-secondary);
	margin-bottom: 1.5rem;
}

.actions {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	flex-wrap: wrap;
}

.breadcrumb {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 1rem;
	font-size: 0.8125rem;
	color: var(--text-secondary);
}

.breadcrumb a {
	color: var(--accent);
	transition: var(--transition);
}

.breadcrumb a:hover {
	color: var(--accent-hover);
}

.card-header {
	background-color: var(--bg-tertiary);
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--border);
	font-weight: 600;
}

.card-footer {
	background-color: var(--bg-tertiary);
	padding: 1rem 1.25rem;
	border-top: 1px solid var(--border);
}

/* ==================== Admin Sidebar Layout ==================== */
.admin-layout {
	display: flex;
	min-height: 100vh;
	background: var(--bg-primary);
}

.admin-sidebar {
	width: 240px;
	background-color: var(--bg-secondary);
	border-right: 1px solid var(--border);
	position: fixed;
	top: 0;
	left: 0;
	height: 100vh;
	overflow-y: auto;
	z-index: 1000;
	display: flex;
	flex-direction: column;
}

.admin-sidebar-header {
	padding: 1.25rem 1.25rem;
	border-bottom: 1px solid var(--border);
}

.admin-sidebar-logo {
	font-size: 1.125rem;
	font-weight: 600;
	color: var(--text-primary);
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.admin-sidebar-logo .icon {
	width: 32px;
	height: 32px;
	background: linear-gradient(135deg, var(--accent), var(--accent-hover));
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 700;
	font-size: 1rem;
}

.admin-nav {
	flex: 1;
	padding: 1rem 0 0 0;
	border-bottom: none;
}

.admin-nav-section {
	margin-bottom: 1.5rem;
}

.admin-nav-section:last-of-type {
	margin-bottom: 0;
}

.admin-nav-title {
	padding: 0 1.25rem;
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.admin-nav-item {
	display: flex;
	align-items: center;
	padding: 0.625rem 1.25rem;
	color: var(--text-secondary);
	text-decoration: none;
	transition: var(--transition);
	position: relative;
	gap: 0.75rem;
	font-size: 0.9rem;
}

.admin-nav-item::before {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 3px;
	background-color: var(--accent);
	opacity: 0;
	transition: opacity 0.2s ease;
}

.admin-nav-item:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.admin-nav-item.active {
	background-color: var(--accent-light);
	color: var(--accent);
	font-weight: 600;
}

.admin-nav-item.active::before {
	opacity: 1;
}

.admin-nav-icon {
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	font-size: 1.1rem;
}

.admin-sidebar-footer {
	padding: 0.75rem 0;
	border-top: 1px solid var(--border);
	margin-top: auto;
}

.admin-sidebar-footer .admin-nav-item {
	justify-content: center;
}

.admin-sidebar-footer .admin-nav-item::before {
	display: none;
}

.admin-content {
	margin-left: 240px;
	flex: 1;
	min-width: 0;
	background: var(--bg-primary);
}

.admin-header {
	background-color: var(--bg-primary);
	border-bottom: 1px solid var(--border);
	padding: 1rem 1.5rem;
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(10px);
	background-color: rgba(10, 14, 20, 0.95);
}

.admin-main {
	padding: 1.5rem;
	max-width: 1600px;
}

/* ==================== Modern KPI Cards ==================== */
.kpi-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.kpi-card {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	position: relative;
	overflow: hidden;
	transition: var(--transition);
}

.kpi-card:hover {
	border-color: var(--border-light);
}

.kpi-card-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.kpi-icon {
	width: 48px;
	height: 48px;
	border-radius: var(--radius);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.5rem;
	flex-shrink: 0;
}

.kpi-icon.blue {
	background: var(--accent-light);
	color: var(--accent);
}

.kpi-icon.green {
	background: var(--success-light);
	color: var(--success);
}

.kpi-icon.orange {
	background: var(--warning-light);
	color: var(--warning);
}

.kpi-icon.red {
	background: var(--danger-light);
	color: var(--danger);
}

.kpi-label {
	font-size: 0.75rem;
	color: var(--text-secondary);
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.5rem;
}

.kpi-value {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--text-primary);
	line-height: 1.2;
}

.kpi-trend {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	font-weight: 600;
}

.kpi-trend.up {
	color: var(--success);
}

.kpi-trend.down {
	color: var(--danger);
}

.kpi-trend.neutral {
	color: var(--text-muted);
}

/* ==================== Chart Containers ==================== */
.chart-container {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.chart-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.25rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--border);
}

.chart-title {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	font-size: 1rem;
	font-weight: 600;
	color: var(--text-primary);
}

.chart-tabs {
	display: flex;
	gap: 0.375rem;
	background: var(--bg-tertiary);
	padding: 0.25rem;
	border-radius: var(--radius);
}

.chart-tab {
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius-sm);
	font-size: 0.8125rem;
	font-weight: 500;
	color: var(--text-secondary);
	background: transparent;
	border: none;
	cursor: pointer;
	transition: var(--transition);
}

.chart-tab.active {
	background: var(--accent);
	color: white;
}

.chart-body {
	min-height: 300px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ==================== Minimal Top Bar ==================== */
.top-bar {
	background: var(--bg-secondary);
	border-bottom: 1px solid var(--border);
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1rem;
}

.top-bar-right {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.top-bar-icon-btn {
	width: 36px;
	height: 36px;
	border-radius: var(--radius);
	background: transparent;
	border: none;
	color: var(--text-secondary);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: var(--transition);
	position: relative;
	text-decoration: none;
}

.top-bar-icon-btn i {
	width: 18px;
	height: 18px;
}

.top-bar-icon-btn:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

.top-bar-icon-btn[href*="logout"]:hover {
	background: var(--danger-light);
	color: var(--danger);
}

.top-bar-icon-btn .badge-dot {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 8px;
	height: 8px;
	background: var(--danger);
	border-radius: 50%;
	border: 2px solid var(--bg-secondary);
}

.top-bar-user {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 0.375rem 0.75rem;
	border-radius: var(--radius);
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	cursor: pointer;
	transition: var(--transition);
}

.top-bar-user:hover {
	background: var(--bg-hover);
	border-color: var(--border-light);
}

.top-bar-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: linear-gradient(135deg, var(--accent), var(--accent-dark));
	display: flex;
	align-items: center;
	justify-content: center;
	color: white;
	font-weight: 600;
	font-size: 0.75rem;
}

.top-bar-user-info {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}

.top-bar-username {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--text-primary);
	line-height: 1.2;
}

.top-bar-role {
	font-size: 0.6875rem;
	color: var(--text-muted);
	line-height: 1.2;
}

/* Icons using CSS */
.icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1em;
	height: 1em;
	line-height: 0;
}

/* Fix icon alignment in buttons */
button .icon,
.btn .icon,
a.btn .icon {
	vertical-align: middle;
	line-height: 0;
}

.icon::before {
	display: inline-block;
	line-height: 1;
}

.icon-dashboard::before { content: '▦'; }
.icon-box::before { content: '□'; }
.icon-list::before { content: '≡'; }
.icon-settings::before { content: '⚙'; }
.icon-user::before { content: '⚉'; }
.icon-logout::before { content: '⎋'; }
.icon-home::before { content: '⌂'; }
.icon-cart::before { content: '⊞'; }
.icon-edit::before { content: '✎'; }
.icon-trash::before { content: '×'; font-weight: 700; font-size: 1.3em; }
.icon-plus::before { content: '+'; font-weight: 700; font-size: 1.2em; }
.icon-check::before { content: '✓'; }
.icon-arrow-left::before { content: '←'; }
.icon-arrow-right::before { content: '→'; }
.icon-search::before { content: '○'; }
.icon-filter::before { content: '⊼'; }
.icon-eye::before { content: '◉'; }
.icon-store::before { content: '⌘'; }
.icon-trending-up::before { content: '↗'; }
.icon-trending-down::before { content: '↘'; }
.icon-dollar::before { content: '$'; font-weight: 700; }
.icon-chart::before { content: '◐'; }
.icon-bell::before { content: '🔔'; font-size: 0.9em; }
.icon-shopping::before { content: '⊞'; }
.icon-revenue::before { content: '$'; }
.icon-expense::before { content: '⊟'; }
.icon-profit::before { content: '≋'; }
.icon-users::before { content: '⚉'; }
.icon-image::before { content: '🖼'; font-size: 0.9em; }
.icon-upload::before { content: '⬆'; }

/* ==================== Toast Notifications ==================== */
.toast-container {
	position: fixed;
	top: 1.5rem;
	right: 1.5rem;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	pointer-events: none;
}

.toast {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 1rem 1.25rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-xl);
	min-width: 320px;
	max-width: 400px;
	opacity: 0;
	transform: translateX(400px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	pointer-events: auto;
}

.toast-show {
	opacity: 1;
	transform: translateX(0);
}

.toast-icon {
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 0.875rem;
	flex-shrink: 0;
}

.toast-message {
	flex: 1;
	font-size: 0.875rem;
	color: var(--text-primary);
	line-height: 1.5;
}

.toast-close {
	width: 24px;
	height: 24px;
	border-radius: var(--radius);
	background: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	font-size: 1.25rem;
	line-height: 1;
	flex-shrink: 0;
}

.toast-close:hover {
	background: var(--bg-hover);
	color: var(--text-primary);
}

/* Toast types */
.toast-success {
	border-left: 4px solid var(--success);
}

.toast-success .toast-icon {
	background: var(--success-light);
	color: var(--success);
}

.toast-error {
	border-left: 4px solid var(--danger);
}

.toast-error .toast-icon {
	background: var(--danger-light);
	color: var(--danger);
}

.toast-warning {
	border-left: 4px solid var(--warning);
}

.toast-warning .toast-icon {
	background: var(--warning-light);
	color: var(--warning);
}

.toast-info {
	border-left: 4px solid var(--accent);
}

.toast-info .toast-icon {
	background: var(--accent-light);
	color: var(--accent);
}

/* ==================== Modal ==================== */
.modal-overlay {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(4px);
	z-index: 2000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	animation: fadeIn 0.2s ease;
}

.modal-overlay.active {
	display: flex;
}

@keyframes fadeIn {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes slideUp {
	from {
		opacity: 0;
		transform: translateY(20px) scale(0.95);
	}
	to {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

.modal {
	background-color: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: var(--radius-lg);
	max-width: 600px;
	width: 100%;
	max-height: 90vh;
	overflow-y: auto;
	animation: slideUp 0.3s ease;
	box-shadow: var(--shadow-xl);
}

.modal-header {
	padding: 1.5rem;
	border-bottom: 1px solid var(--border);
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: var(--bg-tertiary);
}

.modal-title {
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
	color: var(--text-primary);
}

.modal-close {
	width: 32px;
	height: 32px;
	border-radius: var(--radius);
	background: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: var(--transition);
	font-size: 1.5rem;
	line-height: 1;
}

.modal-close:hover {
	background-color: var(--bg-hover);
	color: var(--text-primary);
}

.modal-body {
	padding: 1.5rem;
}

.modal-footer {
	padding: 1.5rem;
	border-top: 1px solid var(--border);
	display: flex;
	gap: 0.75rem;
	justify-content: flex-end;
	background-color: var(--bg-tertiary);
}

/* ==================== Account Info Section ==================== */
.account-info-card {
	max-width: 800px;
	margin: 0 auto;
	padding: 2rem;
}

.account-section-header {
	margin: 0 0 2rem 0;
	padding-bottom: 1rem;
	border-bottom: 2px solid var(--border);
}

.account-section-title {
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--accent);
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin: 0;
}

.account-section-title i {
	width: 20px;
	height: 20px;
}

.account-info-grid {
	display: grid;
	gap: 1.5rem;
	margin-bottom: 2rem;
}

.account-info-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.account-info-field {
	display: flex;
	flex-direction: column;
	gap: 0.625rem;
}

.account-info-label {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--text-secondary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.account-info-label i {
	width: 14px;
	height: 14px;
	color: var(--accent);
}

.account-info-value {
	padding: 0.875rem 1.125rem;
	background: var(--bg-tertiary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	font-weight: 500;
	color: var(--text-primary);
	font-size: 0.9375rem;
	transition: var(--transition);
	display: flex;
	align-items: center;
	min-height: 46px;
}

.account-info-value:hover {
	border-color: var(--border-light);
	background: var(--bg-hover);
}

.account-help-section {
	margin-top: 2rem;
	padding: 1.25rem 1.5rem;
	background: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: var(--radius);
	border-left: 4px solid var(--accent);
}

.account-help-title {
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
}

.account-help-text {
	color: var(--text-secondary);
	font-size: 0.875rem;
	line-height: 1.6;
	margin: 0;
}

@media (max-width: 768px) {
	.account-info-row {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.account-info-card {
		padding: 1.5rem;
	}
}

/* ==================== Responsive ==================== */

/* Tablet et petit desktop */
@media (max-width: 1024px) {
	.admin-sidebar {
		transform: translateX(-100%);
		transition: transform 0.3s ease;
	}

	.admin-sidebar.open {
		transform: translateX(0);
	}

	.admin-content {
		margin-left: 0;
	}

	/* Ajustements pour tablettes */
	.products {
		grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
		gap: 1.5rem;
	}

	.container {
		padding: 1.5rem;
	}

	.header-content {
		padding: 1rem 1.5rem;
	}
}

/* Tablette en portrait et mobile large */
@media (max-width: 768px) {
	/* Header responsive */
	.header-content {
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		gap: 1rem;
		padding: 1rem;
	}

	/* Show mobile menu button */
	.mobile-menu-btn {
		display: flex;
	}

	/* Mobile menu slide-in */
	.toplinks {
		position: fixed;
		top: 0;
		right: -100%;
		width: 280px;
		height: 100vh;
		background-color: var(--bg-secondary);
		border-left: 1px solid var(--border);
		display: flex;
		flex-direction: column;
		gap: 0;
		padding: 80px 0 1rem 0;
		transition: right 0.3s ease;
		z-index: 1000;
		overflow-y: auto;
		box-shadow: -4px 0 24px rgba(0, 0, 0, 0.3);
	}

	.toplinks.active {
		right: 0;
	}

	/* Animation des items du menu */
	.toplinks a,
	.toplinks .user-menu {
		opacity: 0;
		transform: translateX(20px);
		transition: opacity 0.3s ease, transform 0.3s ease;
	}

	.toplinks.active a,
	.toplinks.active .user-menu {
		opacity: 1;
		transform: translateX(0);
	}

	.toplinks.active a:nth-child(1) { transition-delay: 0.05s; }
	.toplinks.active a:nth-child(2) { transition-delay: 0.1s; }
	.toplinks.active a:nth-child(3) { transition-delay: 0.15s; }
	.toplinks.active a:nth-child(4) { transition-delay: 0.2s; }
	.toplinks.active .user-menu { transition-delay: 0.25s; }

	.toplinks a {
		width: 100%;
		justify-content: flex-start;
		padding: 1rem 1.5rem;
		font-size: 0.9375rem;
		border-radius: 0;
		border-bottom: 1px solid var(--border);
		gap: 1rem;
	}

	.toplinks a:hover {
		background-color: var(--bg-hover);
		border-color: var(--border);
		transform: none;
	}

	.toplinks a i {
		width: 20px;
		height: 20px;
	}

	/* Cart badge dans le menu mobile */
	.toplinks .cart-badge {
		position: static;
		margin-left: auto;
	}

	.toplinks .user-menu {
		margin-top: 0.75rem;
		border-top: none;
		padding-top: 0;
	}

	.user-menu-trigger {
		width: 100%;
		justify-content: flex-start;
		border-radius: 0;
		border: none;
		border-bottom: 1px solid var(--border);
		padding: 1.25rem 1.5rem;
		background: var(--bg-tertiary);
		border-top: 1px solid var(--border);
	}

	.user-menu-trigger:hover {
		background: var(--bg-hover);
		border-color: var(--border);
	}

	/* Avatar plus grand dans le menu mobile */
	.toplinks .user-avatar {
		width: 40px;
		height: 40px;
		font-size: 1rem;
	}

	.toplinks .user-name {
		font-size: 0.9375rem;
	}

	.toplinks .user-group {
		font-size: 0.75rem;
	}

	/* Chevron indicator dans le menu mobile */
	.user-menu-trigger i[data-lucide="chevron-down"] {
		transition: transform 0.3s ease;
	}

	.user-menu.active .user-menu-trigger i[data-lucide="chevron-down"] {
		transform: rotate(180deg);
	}

	.user-menu-dropdown {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		box-shadow: none;
		border: none;
		padding: 0;
		background: var(--bg-primary);
		display: none;
	}

	.user-menu-dropdown.active {
		display: block;
	}

	.user-menu-item {
		padding: 1rem 1.5rem 1rem 3rem;
		border-bottom: 1px solid var(--border);
		font-size: 0.875rem;
		background: var(--bg-primary);
	}

	.user-menu-item:hover {
		background: var(--bg-secondary);
		transform: none;
	}

	.user-menu-item i {
		width: 18px;
		height: 18px;
	}

	.user-menu-divider {
		margin: 0;
		background: var(--border);
	}

	/* Overlay when menu is open */
	body.menu-open::before {
		content: '';
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.6);
		backdrop-filter: blur(3px);
		z-index: 100;
		animation: fadeIn 0.3s ease;
	}

	body.menu-open {
		overflow: hidden;
	}

	/* Grille de produits */
	.products {
		grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
		gap: 1.25rem;
	}

	/* Cards */
	.card-image {
		height: 240px;
	}

	/* Typography */
	.page-title {
		font-size: 1.75rem;
	}

	.page-subtitle {
		font-size: 1rem;
	}

	/* Tables */
	table {
		font-size: 0.875rem;
	}

	th, td {
		padding: 0.625rem 0.75rem;
	}

	/* Admin */
	.admin-main {
		padding: 1rem;
	}

	.kpi-grid {
		grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
		gap: 1rem;
	}

	/* Container */
	.container {
		padding: 1.25rem;
	}

	.container-sm {
		padding: 1.25rem;
	}

	/* Buttons plus gros pour tactile */
	.btn, button, input[type="submit"] {
		min-height: 44px;
		padding: 0.75rem 1.25rem;
	}

	/* Formulaires inline adaptés */
	form.inline {
		flex-wrap: wrap;
	}

	form.inline button[type="submit"] {
		min-width: 120px;
	}
}

/* Mobile */
@media (max-width: 480px) {
	/* Container et spacing */
	.container,
	.container-sm {
		padding: 1rem;
	}

	/* Header mobile */
	.header-content > div:first-child img {
		height: 40px;
	}

	.header-content > div:first-child h1 {
		font-size: 1.25rem;
	}

	.header-content > div:first-child span {
		font-size: 0.75rem;
	}

	/* Mobile menu adjustments */
	.toplinks {
		width: 85%;
		max-width: 320px;
	}

	.mobile-menu-btn {
		width: 40px;
		height: 40px;
	}

	.hamburger-line {
		width: 22px;
	}

	/* Grille de produits - 1 colonne sur très petit écran */
	.products {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	/* Cards optimisées mobile */
	.card-image {
		height: 220px;
	}

	.card-content {
		padding: 1.25rem;
	}

	/* Typography mobile */
	.page-title {
		font-size: 1.5rem;
		line-height: 1.3;
	}

	.page-subtitle {
		font-size: 0.9375rem;
	}

	h1 { font-size: 1.5rem; }
	h2 { font-size: 1.25rem; }
	h3 { font-size: 1.125rem; }

	/* Hero section mobile */
	.page-header[style*="text-align: center"] h2 {
		font-size: 1.75rem !important;
	}

	.page-header[style*="text-align: center"] p {
		font-size: 1rem !important;
	}

	/* Formulaires inline - stack sur mobile */
	form.inline {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	form.inline label {
		width: 100%;
		justify-content: space-between;
	}

	form.inline .quantity-wrapper {
		width: auto;
	}

	form.inline button[type="submit"] {
		width: 100%;
		min-height: 48px;
	}

	/* Quantity controls plus gros pour tactile */
	.quantity-wrapper {
		height: 44px;
	}

	.quantity-btn {
		width: 40px;
		font-size: 1.25rem;
	}

	form.inline input[type="number"] {
		width: 50px;
		font-size: 1rem;
	}

	/* Boutons tactiles */
	.btn, button, input[type="submit"] {
		min-height: 48px;
		font-size: 0.9375rem;
	}

	/* Tables responsive */
	.table-container {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	table {
		font-size: 0.8125rem;
		min-width: 500px;
	}

	th, td {
		padding: 0.5rem;
	}

	/* KPI Cards mobile */
	.kpi-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.kpi-card {
		padding: 1rem;
	}

	/* Prix et product header */
	.product-header {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.5rem;
	}

	.price {
		font-size: 1.25rem;
	}

	/* Progress bar mobile */
	.progress-info {
		font-size: 0.875rem;
	}

	.progress-text {
		font-size: 0.6875rem;
	}

	.progress-badge {
		font-size: 0.625rem;
		padding: 0.125rem 0.375rem;
	}

	/* User menu mobile */
	.user-menu-trigger {
		padding: 0.75rem 1rem;
	}

	.user-avatar {
		width: 36px;
		height: 36px;
	}

	.user-name {
		font-size: 0.875rem;
	}

	.user-group {
		font-size: 0.6875rem;
	}

	/* Modal responsive */
	.modal {
		margin: 0;
		max-height: 100vh;
		border-radius: 0;
	}

	.modal-header,
	.modal-body,
	.modal-footer {
		padding: 1rem;
	}

	/* Section spacing */
	.section {
		margin: 1rem 0;
	}

	/* Actions buttons */
	.actions {
		flex-direction: column;
		width: 100%;
	}

	.actions .btn {
		width: 100%;
		justify-content: center;
	}

	/* Empty state */
	.empty-state {
		padding: 2rem 1rem;
	}

	.empty-state-icon {
		font-size: 2rem;
	}

	.empty-state-text {
		font-size: 1rem;
	}

	/* Cart badge plus visible */
	.cart-badge {
		min-width: 1.5rem;
		height: 1.5rem;
		font-size: 0.8125rem;
	}

	/* Login container mobile */
	.login-container {
		margin: 2rem auto;
		padding: 1.5rem;
	}

	/* Breadcrumb mobile */
	.breadcrumb {
		font-size: 0.75rem;
		flex-wrap: wrap;
	}
}

/* ==================== Order Progress (Public Page) ==================== */
.order-progress {
	margin-top: 1rem;
	padding-top: 1rem;
	border-top: 1px solid var(--border);
}

.progress-info {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.5rem;
	gap: 0.5rem;
	flex-wrap: wrap;
}

.progress-text {
	font-size: 0.75rem;
	color: var(--text-secondary);
}

.progress-text strong {
	color: var(--text-primary);
	font-weight: 600;
}

.progress-badge {
	font-size: 0.7rem;
	font-weight: 600;
	padding: 0.125rem 0.5rem;
	border-radius: var(--radius-sm);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.progress-badge.complete {
	background: var(--success-light);
	color: var(--success);
}

.progress-badge.incomplete {
	background: var(--warning-light);
	color: var(--warning);
}

.progress-bar-wrapper {
	width: 100%;
	height: 8px;
	background: var(--bg-secondary);
	border-radius: 4px;
	overflow: hidden;
	margin-bottom: 0.5rem;
	border: 1px solid var(--border);
}

.progress-bar {
	height: 100%;
	background: linear-gradient(90deg, #fb923c, #f97316);
	border-radius: 4px;
	transition: width 0.3s ease, background 0.3s ease;
}

.progress-bar.complete {
	background: linear-gradient(90deg, #22c55e, #16a34a);
}

.progress-detail {
	font-size: 0.75rem;
	color: var(--text-muted);
	text-align: right;
}

/* ==================== Product Modal ==================== */
.product-modal {
	max-width: 900px;
}

.product-modal-content {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 2rem;
}

.product-modal-image {
	position: relative;
	background: var(--bg-secondary);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: 1;
}

.product-modal-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.product-modal-details {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

.product-modal-price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent);
}

.variant-section {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.variant-label {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--text-primary);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.variant-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

/* Color variants avec images */
.variant-color {
	position: relative;
	width: 60px;
	height: 60px;
	border-radius: var(--radius);
	border: 2px solid var(--border);
	cursor: pointer;
	transition: var(--transition);
	overflow: hidden;
	background: var(--bg-secondary);
}

.variant-color img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.variant-color:hover {
	border-color: var(--accent);
	transform: scale(1.05);
}

.variant-color.selected {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-light);
}

/* Taille/texte variants */
.variant-text {
	padding: 0.5rem 1rem;
	background: var(--bg-secondary);
	border: 2px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-primary);
	font-weight: 500;
	font-size: 0.875rem;
	cursor: pointer;
	transition: var(--transition);
	white-space: nowrap;
}

.variant-text:hover {
	border-color: var(--accent);
	background: var(--accent-light);
}

.variant-text.selected {
	border-color: var(--accent);
	background: var(--accent);
	color: white;
}

.variant-required {
	color: var(--danger);
	font-size: 0.75rem;
	margin-top: -0.5rem;
}

.variant-custom-input {
	width: 100%;
	padding: 0.75rem;
	background-color: var(--bg-tertiary);
	border: 2px solid var(--border);
	border-radius: var(--radius);
	color: var(--text-primary);
	font-size: 0.875rem;
	transition: all 0.2s ease;
	margin-bottom: 0;
}

.variant-custom-input:focus {
	outline: none;
	border-color: var(--accent);
	box-shadow: 0 0 0 3px var(--accent-light);
}

.variant-custom-input::placeholder {
	color: var(--text-muted);
}

/* Variant Price Styling */
.variant-price-extra {
	display: inline-block;
	margin-left: 0.5rem;
	padding: 0.125rem 0.5rem;
	background: var(--success-light);
	color: var(--success);
	font-size: 0.75rem;
	font-weight: 600;
	border-radius: 4px;
}

.variant-text .variant-price-extra {
	background: rgba(34, 197, 94, 0.15);
}

.variant-text.selected .variant-price-extra {
	background: rgba(255, 255, 255, 0.2);
	color: white;
}

.variant-price-badge {
	position: absolute;
	bottom: 4px;
	right: 4px;
	padding: 0.125rem 0.375rem;
	background: rgba(0, 0, 0, 0.85);
	color: var(--success);
	font-size: 0.625rem;
	font-weight: 700;
	border-radius: 4px;
	backdrop-filter: blur(4px);
}

.variant-text-label {
	display: inline;
}

/* Modal Price Display */
.product-modal-price {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	align-items: flex-start;
}

.price-breakdown {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.875rem;
	color: var(--text-secondary);
}

.base-price {
	color: var(--text-secondary);
	text-decoration: line-through;
	opacity: 0.7;
}

.price-modifier {
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.625rem;
	border-radius: 6px;
	font-weight: 600;
	font-size: 0.875rem;
}

.price-modifier.positive {
	background: var(--success-light);
	color: var(--success);
}

.price-modifier.negative {
	background: var(--danger-light);
	color: var(--danger);
}

.total-price {
	font-size: 2rem;
	font-weight: 700;
	color: var(--accent);
}

.modal-quantity-section {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.modal-quantity-wrapper {
	display: flex;
	align-items: stretch;
	background-color: var(--bg-secondary);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: visible;
	transition: all 0.2s ease;
	height: 44px;
	gap: 2px;
	padding: 2px;
}

.modal-quantity-wrapper:hover {
	border-color: var(--border-light);
}

.modal-quantity-btn {
	width: 40px;
	background-color: transparent;
	border: none;
	color: var(--text-secondary);
	cursor: pointer;
	font-size: 1.25rem;
	font-weight: 400;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.15s ease;
	padding: 0;
	min-width: auto;
	border-radius: 6px;
}

.modal-quantity-btn:hover {
	background-color: var(--bg-hover);
	color: var(--accent);
}

.modal-quantity-btn:active {
	background-color: var(--accent-light);
	color: var(--accent);
}

.modal-quantity-input {
	width: 60px;
	margin-bottom: 0;
	padding: 0;
	text-align: center;
	font-weight: 600;
	border: none;
	border-radius: 6px;
	font-size: 1rem;
	background-color: transparent;
	color: var(--text-primary);
	-moz-appearance: textfield;
	line-height: 44px;
}

.modal-quantity-input::-webkit-inner-spin-button,
.modal-quantity-input::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.modal-quantity-input:focus {
	outline: none;
	box-shadow: none;
}

.modal-add-to-cart {
	width: 100%;
	padding: 0.875rem 1.5rem;
	font-size: 1rem;
	margin-top: auto;
}

/* Responsive pour mobile et tablette - Product Modal */
@media (max-width: 1024px) {
	.product-modal {
		max-width: 95%;
	}

	.product-modal-content {
		gap: 1.5rem;
	}
}

@media (max-width: 768px) {
	.product-modal {
		max-width: 100%;
		margin: 0;
		max-height: 95vh;
	}

	.modal-overlay.active {
		padding: 0.5rem;
		align-items: center;
	}

	.product-modal-content {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.product-modal-image {
		aspect-ratio: 4/3;
		max-height: 300px;
	}

	.product-modal-price {
		font-size: 1.75rem;
	}

	.variant-section {
		gap: 0.625rem;
	}

	.variant-label {
		font-size: 0.8125rem;
	}

	/* Variant options mieux adaptés */
	.variant-options {
		gap: 0.625rem;
	}

	.variant-color {
		width: 56px;
		height: 56px;
	}

	.variant-text {
		padding: 0.625rem 1rem;
		font-size: 0.8125rem;
	}

	/* Modal add to cart button */
	.modal-add-to-cart {
		padding: 1rem 1.5rem;
		font-size: 1rem;
		min-height: 52px;
	}

	/* Modal quantity controls */
	.modal-quantity-wrapper {
		height: 48px;
	}

	.modal-quantity-btn {
		width: 44px;
		font-size: 1.375rem;
	}

	.modal-quantity-input {
		width: 70px;
		font-size: 1.125rem;
		line-height: 48px;
	}
}

@media (max-width: 480px) {
	.product-modal {
		border-radius: var(--radius);
		max-height: 92vh;
	}

	.modal-overlay.active {
		padding: 0.25rem;
	}

	.product-modal-content {
		gap: 1rem;
	}

	.product-modal-image {
		max-height: 240px;
		aspect-ratio: 1;
	}

	.product-modal-details {
		gap: 1.25rem;
	}

	.product-modal-price {
		font-size: 1.5rem;
	}

	/* Variants en grille sur mobile pour économiser l'espace */
	.variant-color {
		width: 52px;
		height: 52px;
	}

	.variant-text {
		padding: 0.5rem 0.875rem;
		font-size: 0.75rem;
	}

	/* Custom input plus grand */
	.variant-custom-input {
		padding: 0.875rem;
		font-size: 0.9375rem;
		min-height: 48px;
	}

	/* Modal footer fullwidth */
	.modal-footer {
		flex-direction: column;
	}

	.modal-footer .btn {
		width: 100%;
	}

	/* Modal quantity section stack */
	.modal-quantity-section {
		flex-direction: column;
		align-items: stretch;
		gap: 0.75rem;
	}

	.modal-quantity-wrapper {
		width: 100%;
		justify-content: center;
	}

	/* Cart page mobile optimizations */
	.cart-item {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		padding: 1rem !important;
	}

	.cart-item-image {
		width: 100% !important;
		height: 200px !important;
		margin: 0 auto;
	}

	.cart-item-details {
		gap: 0.625rem !important;
	}

	.cart-item-name {
		font-size: 1rem !important;
	}

	.cart-item-variant {
		font-size: 0.8125rem !important;
	}

	.cart-item-actions {
		grid-column: 1 !important;
		flex-direction: column !important;
		align-items: stretch !important;
		gap: 0.75rem !important;
	}

	.cart-item-quantity {
		justify-content: center;
	}

	.quantity-control {
		height: 48px !important;
	}

	.quantity-control button {
		width: 48px !important;
		font-size: 1.375rem !important;
	}

	.quantity-control input {
		width: 80px !important;
		font-size: 1.125rem !important;
	}

	.cart-item-total {
		text-align: center;
		font-size: 1.375rem !important;
	}

	.cart-summary {
		padding: 1.25rem !important;
	}

	.cart-summary-total-value {
		font-size: 1.5rem !important;
	}

	.delete-modal {
		max-width: 95% !important;
		margin: 0.5rem;
	}

	.delete-modal-footer {
		flex-direction: column-reverse !important;
	}

	.delete-modal-footer .btn {
		width: 100% !important;
	}

	/* Hero section optimizations */
	.page-header {
		padding: 2rem 0 !important;
	}

	.page-header div[style*="margin-top: 2rem"] {
		margin-top: 1.5rem !important;
	}

	.page-header div[style*="display: flex"] {
		flex-direction: column !important;
	}

	.page-header div[style*="display: flex"] a {
		width: 100% !important;
		justify-content: center !important;
	}

	/* Section cards responsive */
	.section .card {
		padding: 1.25rem !important;
	}

	.section .card h2 {
		font-size: 1.25rem !important;
	}

	/* Better spacing for stacked sections */
	.section[style*="margin-top: 4rem"] {
		margin-top: 2.5rem !important;
		margin-bottom: 2.5rem !important;
	}
}

/* Additional tablet improvements */
@media (max-width: 768px) and (min-width: 481px) {
	/* Improve products grid on tablet */
	.products {
		grid-template-columns: repeat(2, 1fr);
	}

	/* Tablet menu wider */
	.toplinks {
		width: 340px;
		max-width: 340px;
	}

	.toplinks a {
		padding: 1.125rem 1.75rem;
		font-size: 1rem;
	}

	.user-menu-trigger {
		padding: 1.25rem 1.75rem;
	}

	.user-menu-item {
		padding: 1.125rem 1.75rem 1.125rem 3.5rem;
	}

	/* Avatar tablette */
	.toplinks .user-avatar {
		width: 44px;
		height: 44px;
		font-size: 1.125rem;
	}

	.toplinks .user-name {
		font-size: 1rem;
	}

	.toplinks .user-group {
		font-size: 0.8125rem;
	}
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
	/* Désactiver les hover animations qui peuvent causer des problèmes sur tactile */
	.card:hover {
		transform: none;
	}

	/* Meilleurs touch targets */
	a, button, .btn, input[type="submit"] {
		min-height: 44px;
	}

	/* Améliorer le feedback tactile */
	.btn:active,
	button:active,
	a.btn:active {
		transform: scale(0.98);
		opacity: 0.9;
	}

	/* Smooth scrolling pour mobile */
	* {
		-webkit-overflow-scrolling: touch;
	}

	/* Meilleure zone de tap pour les liens du header */
	.toplinks a {
		min-height: 48px;
	}

	/* Désactiver les transformations hover qui peuvent être problématiques */
	.toplinks a:hover,
	.user-menu-trigger:hover {
		transform: none;
	}

	/* Éviter le zoom automatique sur iOS lors du focus des inputs */
	input[type="text"],
	input[type="number"],
	input[type="email"],
	input[type="password"],
	input[type="url"],
	input[type="tel"],
	textarea,
	select {
		font-size: 16px;
	}
}

/* Landscape mobile optimizations */
@media (max-width: 896px) and (orientation: landscape) {
	/* Réduire les hauteurs en mode paysage */
	.card-image {
		height: 180px;
	}

	.page-header {
		padding: 1.5rem 0 !important;
	}

	/* Header plus compact en paysage */
	.header-content {
		padding: 0.75rem 1rem;
	}

	/* Modal adapté au mode paysage */
	.modal,
	.product-modal {
		max-height: 85vh;
	}

	.product-modal-image {
		max-height: 200px;
	}
}

/* ==================== Image Lightbox ==================== */
.image-lightbox {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	width: 100vw;
	height: 100vh;
	background-color: rgba(0, 0, 0, 0.95);
	z-index: 10000;
	cursor: pointer;
	animation: lightboxFadeIn 0.2s ease;
	-webkit-tap-highlight-color: transparent;
	touch-action: none;
}

.image-lightbox.active {
	display: flex !important;
	align-items: center;
	justify-content: center;
}

.image-lightbox img {
	max-width: 95%;
	max-height: 95%;
	width: auto;
	height: auto;
	object-fit: contain;
	box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
	animation: lightboxZoomIn 0.2s ease;
	pointer-events: none;
}

.image-lightbox-close {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 40px;
	height: 40px;
	background: rgba(255, 255, 255, 0.1);
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: 50%;
	color: white;
	font-size: 24px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	backdrop-filter: blur(10px);
	z-index: 10001;
	-webkit-tap-highlight-color: transparent;
}

.image-lightbox-close:hover {
	background: rgba(255, 255, 255, 0.2);
	transform: scale(1.1);
}

@keyframes lightboxFadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

@keyframes lightboxZoomIn {
	from {
		transform: scale(0.9);
		opacity: 0;
	}
	to {
		transform: scale(1);
		opacity: 1;
	}
}

/* Mobile responsive pour la lightbox */
@media (max-width: 768px) {
	.image-lightbox {
		padding: 10px;
	}

	.image-lightbox img {
		max-width: 95vw;
		max-height: 95vh;
		width: auto !important;
		height: auto !important;
	}

	.image-lightbox-close {
		top: 15px;
		right: 15px;
		width: 44px;
		height: 44px;
		font-size: 24px;
		background: rgba(255, 255, 255, 0.2);
		-webkit-tap-highlight-color: transparent;
		touch-action: manipulation;
	}
}

@media (max-width: 480px) {
	.image-lightbox img {
		max-width: 98vw;
		max-height: 98vh;
	}

	.image-lightbox-close {
		top: 10px;
		right: 10px;
		width: 40px;
		height: 40px;
		font-size: 22px;
	}
}