/* ============================================================
   ÉLÉGANCE — Main Stylesheet
   ============================================================ */

:root {
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --c-bg: #F8F6F3;
  --c-surface: #FFFFFF;
  --c-black: #111111;
  --c-white: #FFFFFF;
  --c-border: #E5E0D8;
  --c-border-light: #F0EDE9;
  --c-text: #111111;
  --c-text-muted: #888888;
  --c-accent: #C49A6C;
  --c-accent-dark: #A07848;
  --c-accent-light: #F5EBE0;
  --c-success: #22C55E;
  --c-error: #EF4444;
  --c-warning: #F59E0B;
  --c-info: #3B82F6;
  --c-admin: #1E293B;
  --nav-h: 112px;
  --sidebar-w: 260px;
  --radius: 6px;
  --radius-lg: 12px;
  --shadow: 0 2px 8px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 20px rgba(0,0,0,0.1);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.12);
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-body); background: var(--c-bg); color: var(--c-text); font-size: 15px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, select, textarea { font-family: inherit; font-size: inherit; }

/* ---- TYPOGRAPHY ---- */
h1,h2,h3,h4,h5 { font-family: var(--font-heading); line-height: 1.25; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 500; }
h3 { font-size: 1.25rem; font-weight: 500; }
h4 { font-size: 1rem; font-weight: 600; font-family: var(--font-body); letter-spacing: 0.05em; text-transform: uppercase; }
p { color: var(--c-text-muted); }

/* ---- UTILITIES ---- */
.container { max-width: 1280px; margin: 0 auto; padding: 0 1.5rem; }
.hidden { display: none !important; }
.text-center { text-align: center; }
.text-muted { color: var(--c-text-muted); }
.text-accent { color: var(--c-accent); }
.text-success { color: var(--c-success); }
.text-error { color: var(--c-error); }
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-sm { gap: 0.5rem; }
.gap-md { gap: 1rem; }
.gap-lg { gap: 1.5rem; }
.mt-sm { margin-top: 0.5rem; }
.mt-md { margin-top: 1rem; }
.mt-lg { margin-top: 1.5rem; }
.mb-md { margin-bottom: 1rem; }
.mb-lg { margin-bottom: 1.5rem; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.divider { border: none; border-top: 1px solid var(--c-border); margin: 1.5rem 0; }

/* ---- BUTTONS ---- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: var(--radius); font-size: 0.875rem; font-weight: 500; letter-spacing: 0.03em; transition: var(--transition); white-space: nowrap; }
.btn-primary { background: var(--c-black); color: var(--c-white); }
.btn-primary:hover { background: #333; }
.btn-accent { background: var(--c-accent); color: var(--c-white); }
.btn-accent:hover { background: var(--c-accent-dark); }
.btn-outline { background: transparent; color: var(--c-black); border: 1.5px solid var(--c-black); }
.btn-outline:hover { background: var(--c-black); color: var(--c-white); }
.btn-ghost { background: transparent; color: var(--c-text-muted); }
.btn-ghost:hover { color: var(--c-black); background: var(--c-border-light); }
.btn-danger { background: var(--c-error); color: white; }
.btn-danger:hover { background: #dc2626; }
.btn-success { background: var(--c-success); color: white; }
.btn-success:hover { background: #16a34a; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: 0.8rem; }
.btn-lg { padding: 1rem 2rem; font-size: 1rem; }
.btn-full { width: 100%; }
.btn:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-icon { width: 40px; height: 40px; padding: 0; border-radius: 50%; }

/* ---- FORMS ---- */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 0.4rem; }
.form-control { width: 100%; padding: 0.65rem 0.9rem; border: 1.5px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); transition: border-color var(--transition); }
.form-control:focus { outline: none; border-color: var(--c-accent); }
.form-control.error { border-color: var(--c-error); }
.form-control-sm { width: 100%; padding: 0.4rem 0.65rem; border: 1.5px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface); color: var(--c-text); transition: border-color var(--transition); font-size: 0.83rem; }
.form-control-sm:focus { outline: none; border-color: var(--c-accent); }
textarea.form-control-sm { resize: vertical; min-height: 56px; }
.form-error { font-size: 0.8rem; color: var(--c-error); margin-top: 0.25rem; }
.form-hint { font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.25rem; }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

/* ---- CARDS ---- */
.card { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); overflow: hidden; }
.card-body { padding: 1.5rem; }
.card-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; }
.card-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--c-border); background: var(--c-bg); }

/* ---- BADGES ---- */
.badge { display: inline-flex; align-items: center; padding: 0.2rem 0.6rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.order-type-badge { display: inline-flex; align-items: center; padding: 0.1rem 0.45rem; border-radius: 999px; font-size: 0.64rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.order-type-badge.member { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.order-type-badge.guest  { background: #f5f5f4; color: #78716c; border: 1px solid #e7e5e4; }
.badge-default { background: var(--c-border); color: var(--c-text-muted); }
.badge-success { background: #dcfce7; color: #166534; }
.badge-error { background: #fee2e2; color: #991b1b; }
.badge-warning { background: #fef3c7; color: #92400e; }
.badge-info { background: #dbeafe; color: #1e40af; }
.badge-accent { background: var(--c-accent-light); color: var(--c-accent-dark); }

/* ---- TABLES ---- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text-muted); padding: 0.75rem 1rem; text-align: left; border-bottom: 1.5px solid var(--c-border); background: var(--c-bg); }
td { padding: 0.85rem 1rem; border-bottom: 1px solid var(--c-border-light); vertical-align: middle; }
tr:hover td { background: var(--c-bg); }
tr:last-child td { border-bottom: none; }
.actions-cell { display: flex; gap: 0.4rem; align-items: center; justify-content: flex-end; flex-wrap: nowrap; }
td.actions-cell { display: table-cell; vertical-align: middle; text-align: right; white-space: nowrap; padding-right: 0.5rem; }
td.actions-cell > * { display: inline-flex; }
th.actions-th { text-align: right; padding-right: 0.5rem; }

/* ---- SHIP ICON BUTTONS ---- */
.ship-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0;
  border: 1px solid var(--c-border); border-radius: 5px;
  background: transparent; cursor: pointer; font-size: 0.82rem;
  color: var(--c-text-muted); transition: background 0.15s, color 0.15s, border-color 0.15s;
  position: relative;
}
.ship-icon-btn:hover { background: var(--c-bg-alt); color: var(--c-black); border-color: var(--c-text-muted); }
.ship-icon-btn.primary { border-color: var(--c-accent); color: var(--c-accent); }
.ship-icon-btn.primary:hover { background: var(--c-accent); color: #fff; border-color: var(--c-accent); }
.ship-icon-btn.warn { border-color: #b45309; color: #b45309; }
.ship-icon-btn.warn:hover { background: #b45309; color: #fff; }

/* ---- NAVBAR ---- */
.navbar { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,0.95); backdrop-filter: blur(12px); border-bottom: 1px solid var(--c-border); height: var(--nav-h); display: flex; align-items: center; flex-wrap: wrap; }
.navbar .container { display: flex; align-items: center; justify-content: space-between; width: 100%; }
.brand { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 700; letter-spacing: 0.12em; color: var(--c-black); }
.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-link { padding: 0.6rem 1.1rem; font-size: 0.92rem; font-weight: 500; letter-spacing: 0.05em; color: var(--c-text-muted); border-radius: 0; transition: color 0.2s ease; text-transform: uppercase; background: none; position: relative; }
.nav-link::after { content: ''; position: absolute; bottom: 0; left: 1.1rem; right: 1.1rem; height: 1.5px; background: var(--c-black); transform: scaleX(0); transition: transform 0.22s ease; transform-origin: center; }
.nav-link:hover { color: var(--c-black); background: none; }
.nav-link:hover::after { transform: scaleX(1); }
.nav-link.active { color: var(--c-black); background: none; }
.nav-link.active::after { transform: scaleX(1); }
.nav-actions { display: flex; align-items: center; gap: 0.25rem; }
.nav-action-btn { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.55rem 0.85rem; font-size: 0.88rem; font-weight: 500; letter-spacing: 0.04em; color: var(--c-text-muted); background: none; border: none; cursor: pointer; transition: color 0.2s ease; font-family: inherit; position: relative; text-transform: uppercase; }
.nav-action-btn:hover { color: var(--c-black); }
.nav-action-btn svg { width: 17px; height: 17px; flex-shrink: 0; }
.nav-action-login { display: inline-flex; align-items: center; padding: 0.45rem 1.1rem; font-size: 0.82rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-black); background: none; border: 1.5px solid var(--c-black); border-radius: 2px; transition: background 0.2s ease, color 0.2s ease; text-decoration: none; }
.nav-action-login:hover { background: var(--c-black); color: white; }
.nav-action-lock { display: inline-flex; align-items: center; justify-content: center; padding: 0.55rem 0.6rem; color: var(--c-text-muted); opacity: 0.35; transition: opacity 0.2s ease, color 0.2s ease; text-decoration: none; }
.nav-action-lock:hover { opacity: 1; color: var(--c-accent); }
.nav-action-lock svg { width: 14px; height: 14px; }
.cart-btn { position: relative; }
.cart-count { position: absolute; top: -4px; right: -4px; background: var(--c-accent); color: white; width: 18px; height: 18px; border-radius: 50%; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
/* Hamburger button (mobile) */
.hamburger-btn { display: none; background: none; border: none; cursor: pointer; padding: 0.35rem 0.5rem; border-radius: var(--radius); color: var(--c-text); font-size: 1.35rem; line-height: 1; transition: var(--transition); }
.hamburger-btn:hover { background: var(--c-bg); }
/* Mobile slide-down nav menu */
.mobile-menu { display: none; position: fixed; top: var(--nav-h); left: 0; right: 0; background: var(--c-surface); border-bottom: 2px solid var(--c-border); padding: 0.5rem 1.5rem 1rem; z-index: 95; flex-direction: column; box-shadow: var(--shadow-md); }
.mobile-menu.open { display: flex; animation: slideDown 0.2s ease; }
.mobile-menu .nav-link { padding: 0.8rem 0.25rem; border-bottom: 1px solid var(--c-border-light); font-size: 0.95rem; display: block; color: var(--c-text); }
.mobile-menu .nav-link:last-child { border-bottom: none; }
.mobile-menu-divider { border: none; border-top: 1px solid var(--c-border); margin: 0.5rem 0; }
@keyframes slideDown { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: translateY(0); } }

/* ---- HERO (static fallback) ---- */
.hero { background: var(--c-black); color: var(--c-white); min-height: 85vh; display: flex; align-items: center; position: relative; overflow: hidden; }
.hero-bg { position: absolute; inset: 0; background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 100%); }
.hero-bg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 70% 50%, rgba(196,154,108,0.25) 0%, transparent 60%); }
.hero-content { position: relative; z-index: 1; max-width: 600px; }
.hero-eyebrow { font-size: 0.8rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 1rem; }
.hero h1 { color: white; margin-bottom: 1.25rem; }
.hero p { color: rgba(255,255,255,0.7); font-size: 1.05rem; margin-bottom: 2rem; max-width: 420px; }
.hero-cta { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-hero { background: var(--c-accent); color: white; padding: 0.9rem 2.25rem; font-size: 0.95rem; }
.btn-hero:hover { background: var(--c-accent-dark); }
.btn-hero-outline { background: transparent; color: white; border: 1.5px solid rgba(255,255,255,0.5); padding: 0.9rem 2.25rem; font-size: 0.95rem; }
.btn-hero-outline:hover { background: rgba(255,255,255,0.1); }

/* ---- HERO SLIDER ---- */
.hero-slider { position: relative; min-height: 88vh; overflow: hidden; display: block; }
.hs-track { position: absolute; inset: 0; }

/* Slides — fade (default) */
.hs-slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1.1s cubic-bezier(0.4,0,0.2,1); display: flex; align-items: center; will-change: opacity,transform; }
.hs-slide.hs-active { opacity: 1; z-index: 2; }

/* Ken Burns on background */
.hs-slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1.08); transition: transform 9s ease; }
.hs-slide.hs-active .hs-slide-bg { transform: scale(1); }

/* Subtle diagonal lines decoration (luxury fashion feel) */
.hs-slide-bg::after { content: ''; position: absolute; inset: 0; background-image: repeating-linear-gradient(-48deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 60px); pointer-events: none; }

/* Soft vignette at edges */
.hs-slide-overlay { position: absolute; inset: 0; box-shadow: inset 0 0 180px rgba(0,0,0,0.35); }
.hs-slide-inner { position: relative; z-index: 1; width: 100%; padding: 4rem 0; }

/* Text entrance — stagger per slide */
.hs-slide .hero-eyebrow,
.hs-slide h1,
.hs-slide .hs-p,
.hs-slide .hero-cta { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; }
.hs-slide.hs-active .hero-eyebrow { opacity: 1; transform: none; transition-delay: 0.35s; }
.hs-slide.hs-active h1 { opacity: 1; transform: none; transition-delay: 0.55s; }
.hs-slide.hs-active .hs-p { opacity: 1; transform: none; transition-delay: 0.7s; }
.hs-slide.hs-active .hero-cta { opacity: 1; transform: none; transition-delay: 0.85s; }

/* Effect: slide */
.hero-slider[data-effect="slide"] .hs-slide { opacity: 1; transform: translateX(100%); transition: transform 0.9s cubic-bezier(0.77,0,0.18,1); }
.hero-slider[data-effect="slide"] .hs-slide.hs-active { transform: translateX(0); z-index: 2; }
.hero-slider[data-effect="slide"] .hs-slide.hs-exit { transform: translateX(-100%); z-index: 1; }

/* Effect: zoom */
.hero-slider[data-effect="zoom"] .hs-slide { opacity: 0; transform: scale(1.1); transition: opacity 1.1s ease, transform 1.5s ease; }
.hero-slider[data-effect="zoom"] .hs-slide.hs-active { opacity: 1; transform: scale(1); }

/* Navigation arrows */
.hs-arrow { position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.25); color: white; width: 56px; height: 56px; border-radius: 50%; cursor: pointer; font-size: 1.7rem; display: flex; align-items: center; justify-content: center; transition: background 0.25s, transform 0.25s, border-color 0.25s; backdrop-filter: blur(6px); line-height: 1; padding: 0; }
.hs-arrow:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.5); transform: translateY(-50%) scale(1.1); }
.hs-arrow-prev { left: 1.75rem; }
.hs-arrow-next { right: 1.75rem; }

/* Dots */
.hs-dots { position: absolute; bottom: 2.2rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; gap: 0.5rem; align-items: center; }
.hs-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.35); cursor: pointer; transition: background 0.3s, width 0.35s, border-radius 0.35s; flex-shrink: 0; }
.hs-dot.hs-dot-active { background: var(--c-accent); width: 26px; border-radius: 4px; }

/* Progress bar */
.hs-progress { position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: rgba(255,255,255,0.12); z-index: 10; }
.hs-progress-fill { height: 100%; background: linear-gradient(90deg, var(--c-accent-dark), var(--c-accent)); width: 0; }

/* Slide counter badge */
.hs-counter { position: absolute; top: 1.5rem; right: 1.75rem; z-index: 10; color: rgba(255,255,255,0.5); font-size: 0.75rem; letter-spacing: 0.15em; font-weight: 500; }

/* Admin slide card */
.hs-admin-slide { border: 1px solid var(--c-border,#e5e7eb); border-radius: var(--radius-lg); padding: 1rem; background: var(--c-surface); margin-bottom: 0.75rem; }
.hs-admin-slide-header { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; font-weight: 600; font-size: 0.88rem; }
.hs-admin-slide-preview { width: 100%; height: 60px; border-radius: var(--radius); margin-bottom: 0.75rem; background-size: cover; background-position: center; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }

@media (max-width: 768px) {
  .hero-slider { min-height: 62vh; }
  .hs-arrow { width: 40px; height: 40px; font-size: 1.2rem; }
  .hs-arrow-prev { left: 0.75rem; }
  .hs-arrow-next { right: 0.75rem; }
  .hs-slide-inner { padding: 2rem 0; }
}

/* ---- SECTIONS ---- */
.section { padding: 5rem 0; }
.section-header { text-align: center; margin-bottom: 3rem; }
.section-header h2 { margin-bottom: 0.5rem; }
.section-eyebrow { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--c-accent); margin-bottom: 0.5rem; display: block; }

/* ---- CATEGORIES ---- */
.categories-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
.category-card { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 3/4; position: relative; cursor: pointer; transition: transform var(--transition); }
.category-card:hover { transform: translateY(-4px); }
.category-card:hover .category-img { transform: scale(1.05); }
.category-img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.category-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 3rem; transition: transform 0.4s ease; }
.cat-robes { background: linear-gradient(145deg, #E8B4B8, #D4879C); }
.cat-hauts { background: linear-gradient(145deg, #A8D8EA, #87CEEB); }
.cat-pantalons { background: linear-gradient(145deg, #95A5A6, #7F8C8D); }
.cat-jupes { background: linear-gradient(145deg, #F0C27F, #E8A45A); }
.cat-manteaux { background: linear-gradient(145deg, #A9A9A9, #808080); }
.cat-accessoires { background: linear-gradient(145deg, #C8A96E, #B8864E); }
.category-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem 1rem 1rem; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent); color: white; }
.category-name { font-family: var(--font-heading); font-size: 1.05rem; font-weight: 500; }
.category-count { font-size: 0.78rem; opacity: 0.8; margin-top: 0.15rem; }

/* ---- PRODUCT CARDS ---- */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 1.5rem; }
.product-card { background: var(--c-surface); border-radius: var(--radius-lg); overflow: hidden; transition: box-shadow var(--transition), transform var(--transition); cursor: pointer; }
.product-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.product-image { aspect-ratio: 3/4; position: relative; overflow: hidden; }
.product-img-placeholder { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 4rem; }
.product-badge { position: absolute; top: 0.75rem; left: 0.75rem; }
.product-actions-hover { position: absolute; bottom: 0.75rem; right: 0.75rem; opacity: 0; transform: translateY(4px); transition: var(--transition); }
.product-card:hover .product-actions-hover { opacity: 1; transform: translateY(0); }
.product-info { padding: 1rem; }
.product-category { font-size: 0.72rem; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 0.25rem; }
.product-name { font-family: var(--font-heading); font-size: 1rem; font-weight: 500; color: var(--c-text); margin-bottom: 0.5rem; }
.product-prices { display: flex; align-items: center; gap: 0.5rem; }
.product-price { font-size: 1rem; font-weight: 600; color: var(--c-text); }
.product-price-original { font-size: 0.875rem; color: var(--c-text-muted); text-decoration: line-through; }
.product-price-sale { color: var(--c-error); }

/* ---- PRODUCT DETAIL ---- */
.product-detail { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: start; }
.product-gallery { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
.product-main-image { aspect-ratio: 3/4; border-radius: var(--radius-lg); overflow: hidden; margin-bottom: 1rem; background: var(--c-bg); }
.product-detail-info { padding: 0.5rem 0; }
.product-detail-name { font-size: 2rem; font-weight: 600; margin-bottom: 0.5rem; }
.product-detail-price { font-size: 1.6rem; font-weight: 500; color: var(--c-accent-dark); margin-bottom: 1.25rem; }
.size-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.size-btn { width: 44px; height: 44px; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 0.85rem; font-weight: 500; transition: var(--transition); }
.size-btn:hover { border-color: var(--c-black); }
.size-btn.selected { background: var(--c-black); color: white; border-color: var(--c-black); }
.size-btn:disabled, .size-btn.out { opacity: 0.45; cursor: not-allowed; text-decoration: line-through; position: relative; }
.size-btn.out::after { content: ''; position: absolute; top: 50%; left: 8%; width: 84%; height: 1.5px; background: currentColor; transform: rotate(-45deg); pointer-events: none; }
.color-grid { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.color-btn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: var(--transition); position: relative; }
.color-btn.selected::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--c-black); pointer-events: none; }
.color-btn.out { opacity: 0.45; cursor: not-allowed; }
.color-btn.out::after { content: ''; position: absolute; top: 50%; left: 8%; width: 84%; height: 2px; background: rgba(160,30,30,0.8); transform: rotate(-45deg); }
.qty-control { display: flex; align-items: center; border: 1.5px solid var(--c-border); border-radius: var(--radius); overflow: hidden; width: fit-content; }
.qty-btn { width: 40px; height: 40px; font-size: 1.1rem; color: var(--c-text-muted); transition: var(--transition); }
.qty-btn:hover { background: var(--c-bg); color: var(--c-text); }
.qty-input { width: 48px; text-align: center; border: none; border-left: 1.5px solid var(--c-border); border-right: 1.5px solid var(--c-border); height: 40px; font-size: 0.95rem; font-weight: 500; }
.qty-input:focus { outline: none; }

/* ---- FILTERS (SHOP) ---- */
.shop-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; }
.filters-panel { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; }
.filter-section { margin-bottom: 1.5rem; }
.filter-title { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 0.75rem; }
.filter-options { display: flex; flex-direction: column; gap: 0.5rem; }
.filter-option { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; }
.filter-option input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--c-accent); }
.price-range { display: flex; gap: 0.5rem; align-items: center; }
.price-input { width: 80px; padding: 0.4rem 0.6rem; border: 1.5px solid var(--c-border); border-radius: var(--radius); font-size: 0.85rem; }
.sort-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; }
.results-count { font-size: 0.85rem; color: var(--c-text-muted); }

/* ---- CART ---- */
.cart-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
.cart-item { display: grid; grid-template-columns: 90px 1fr auto; gap: 1rem; align-items: center; padding: 1.25rem 0; border-bottom: 1px solid var(--c-border); }
.cart-item-img { aspect-ratio: 3/4; border-radius: var(--radius); overflow: hidden; }
.cart-item-img-placeholder { width: 90px; height: 110px; border-radius: var(--radius); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; }
.cart-item-name { font-family: var(--font-heading); font-size: 0.95rem; font-weight: 500; margin-bottom: 0.25rem; }
.cart-item-details { font-size: 0.8rem; color: var(--c-text-muted); }
.cart-item-price { font-weight: 600; }
.order-summary { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); padding: 1.5rem; position: sticky; top: calc(var(--nav-h) + 1rem); }
.order-summary h3 { margin-bottom: 1.25rem; }
.summary-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; font-size: 0.9rem; }
.summary-row.total { font-size: 1.05rem; font-weight: 700; border-top: 1.5px solid var(--c-border); padding-top: 1rem; margin-top: 0.5rem; }
.empty-cart { text-align: center; padding: 5rem 2rem; }
.empty-icon { font-size: 4rem; margin-bottom: 1.5rem; }

/* ---- CHECKOUT ---- */
.checkout-layout { display: grid; grid-template-columns: 1fr 380px; gap: 2rem; align-items: start; }
.checkout-steps { display: flex; align-items: center; gap: 1rem; margin-bottom: 2.5rem; }
.checkout-step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; color: var(--c-text-muted); }
.checkout-step.active { color: var(--c-black); font-weight: 500; }
.checkout-step-num { width: 24px; height: 24px; border-radius: 50%; border: 2px solid var(--c-border); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 600; }
.checkout-step.active .checkout-step-num { background: var(--c-black); border-color: var(--c-black); color: white; }
.checkout-step-sep { width: 24px; height: 2px; background: var(--c-border); }

/* ---- USER ACCOUNT ---- */
.account-layout { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; }
.account-nav { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; }
.account-nav-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 1rem; border-radius: var(--radius); font-size: 0.875rem; color: var(--c-text-muted); transition: var(--transition); cursor: pointer; }
.account-nav-item:hover, .account-nav-item.active { background: var(--c-accent-light); color: var(--c-accent-dark); font-weight: 500; }
.account-nav-item svg { width: 18px; height: 18px; }

/* ---- ADMIN ---- */
/* Thèmes admin — variables par défaut (marine) */
.admin-sidebar {
  --adm-bg: #0e1825;
  --adm-bg2: #172032;
  --adm-active-c: #C49A6C;
  --adm-active-bg: rgba(196,154,108,0.13);
  --adm-active-glow: rgba(196,154,108,0.08);
  --adm-border: rgba(255,255,255,0.07);
}
/* Thème Océan */
.admin-sidebar[data-adm-theme="ocean"] { --adm-bg:#04334d;--adm-bg2:#064a6e;--adm-active-c:#38BDF8;--adm-active-bg:rgba(56,189,248,0.13);--adm-active-glow:rgba(56,189,248,0.06); }
/* Thème Violet */
.admin-sidebar[data-adm-theme="violet"] { --adm-bg:#1a1537;--adm-bg2:#251e50;--adm-active-c:#A78BFA;--adm-active-bg:rgba(167,139,250,0.14);--adm-active-glow:rgba(167,139,250,0.07); }
/* Thème Ardoise */
.admin-sidebar[data-adm-theme="ardoise"] { --adm-bg:#1a2332;--adm-bg2:#243044;--adm-active-c:#7DD3FC;--adm-active-bg:rgba(125,211,252,0.12);--adm-active-glow:rgba(125,211,252,0.06); }
/* Thème Graphite */
.admin-sidebar[data-adm-theme="graphite"] { --adm-bg:#141414;--adm-bg2:#1f1f1f;--adm-active-c:#FBBF24;--adm-active-bg:rgba(251,191,36,0.13);--adm-active-glow:rgba(251,191,36,0.06); }
/* Thème Emeraude */
.admin-sidebar[data-adm-theme="emeraude"] { --adm-bg:#0a1f1a;--adm-bg2:#112d26;--adm-active-c:#34D399;--adm-active-bg:rgba(52,211,153,0.13);--adm-active-glow:rgba(52,211,153,0.06); }

/* Thèmes boutique — surcharges de variables CSS */
html[data-store-theme="ocean"] { --c-bg:#F0F8FC;--c-surface:#FFFFFF;--c-accent:#0891B2;--c-accent-dark:#0E7490;--c-accent-light:#E0F2FE; }
html[data-store-theme="forest"] { --c-bg:#F2F7F3;--c-surface:#FFFFFF;--c-accent:#16A34A;--c-accent-dark:#15803D;--c-accent-light:#DCFCE7; }
html[data-store-theme="moderne"] { --c-bg:#FAFAFA;--c-surface:#FFFFFF;--c-accent:#171717;--c-accent-dark:#404040;--c-accent-light:#F0F0F0; }
html[data-store-theme="rose"] { --c-bg:#FFF5F7;--c-surface:#FFFFFF;--c-accent:#E11D48;--c-accent-dark:#BE123C;--c-accent-light:#FFE4E6; }
html[data-store-theme="or"] { --c-bg:#FDFAF5;--c-surface:#FFFFFF;--c-accent:#B45309;--c-accent-dark:#92400E;--c-accent-light:#FEF3C7; }

/* Layout */
.admin-layout { display: flex; height: calc(100vh - var(--nav-h)); overflow: hidden; }
.admin-sidebar { width: var(--sidebar-w); background: var(--adm-bg); color: white; position: fixed; top: var(--nav-h); bottom: 0; left: 0; overflow: hidden; z-index: 50; display: flex; flex-direction: column; transition: transform 0.25s ease, width 0.25s ease; }
.admin-sidebar-brand { height: 64px; padding: 0 0.6rem 0 1rem; border-bottom: 1px solid var(--adm-border); display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; }
.admin-brand-logo { width: 36px; height: 36px; border-radius: 10px; background: linear-gradient(135deg,var(--adm-active-c),color-mix(in srgb,var(--adm-active-c) 60%,white)); color: white; font-family: var(--font-heading); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow:0 2px 8px rgba(0,0,0,0.35); }
.admin-brand-text { flex: 1; min-width: 0; overflow: hidden; }
.admin-brand-name { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: white; line-height: 1.2; }
.admin-brand-sub { font-size: 0.63rem; color: rgba(255,255,255,0.3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 2px; }
.admin-collapse-btn { background: none; border: none; color: rgba(255,255,255,0.3); cursor: pointer; padding: 0; border-radius: 6px; transition: var(--transition), transform 0.25s ease; display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 28px; height: 28px; }
.admin-collapse-btn:hover { color: white; background: rgba(255,255,255,0.1); }
.admin-collapse-btn svg { width: 16px; height: 16px; }
.admin-nav { padding: 0.75rem 0; flex: 1; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.05) transparent; }
.admin-nav-group-items { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.28s ease; overflow: hidden; }
.admin-nav-group-inner { min-height: 0; }
.admin-nav-group.ng-collapsed .admin-nav-group-items { grid-template-rows: 0fr; }
.admin-nav-divider { padding: 0.9rem 1rem 0.25rem; }
.admin-nav-section-header { width: 100%; background: none; border: none; color: inherit; font-family: inherit; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.admin-nav-group-chevron { display: flex; align-items: center; opacity: 0.28; transition: transform 0.25s ease, opacity 0.15s; flex-shrink: 0; margin-right: 0.2rem; }
.admin-nav-group-chevron svg { width: 11px; height: 11px; }
.admin-nav-section-header:hover .admin-nav-section { color: rgba(255,255,255,0.5); }
.admin-nav-section-header:hover .admin-nav-group-chevron { opacity: 0.55; }
.admin-nav-group.ng-collapsed .admin-nav-group-chevron { transform: rotate(-90deg); }
.admin-nav-section { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.28); white-space: nowrap; }
.admin-nav-item { display: flex; align-items: center; gap: 0.7rem; padding: 0.525rem 0.8rem; margin: 1px 0.5rem; border-radius: 8px; font-size: 0.845rem; font-weight: 400; color: rgba(255,255,255,0.58); transition: background 0.15s, color 0.15s; cursor: pointer; white-space: nowrap; border: none; background: none; font-family: inherit; width: calc(100% - 1rem); text-align: left; }
.admin-nav-item:hover { color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.07); }
.admin-nav-item.active { color: var(--adm-active-c); background: var(--adm-active-bg); font-weight: 500; box-shadow: inset 3px 0 0 var(--adm-active-c); }
.admin-nav-item.active .admin-nav-icon { opacity: 1; filter: drop-shadow(0 0 4px var(--adm-active-glow)); }
.admin-nav-item:hover .admin-nav-icon { opacity: 1; }
.admin-nav-icon { display: flex; align-items: center; justify-content: center; width: 18px; height: 18px; flex-shrink: 0; opacity: 0.65; transition: opacity 0.15s, filter 0.15s; }
.admin-nav-icon svg { width: 18px; height: 18px; }
.admin-nav-label { overflow: hidden; flex:1; }
.admin-nav-badge { font-size:0.6rem;font-weight:700;background:var(--adm-active-c);color:#111;padding:1px 5px;border-radius:99px;margin-left:auto; }
.admin-sidebar-footer { padding: 0.6rem; border-top: 1px solid var(--adm-border); display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.admin-footer-btn { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: none; border: none; color: rgba(255,255,255,0.42); font-size: 0.82rem; font-family: inherit; cursor: pointer; transition: var(--transition); white-space: nowrap; width: 100%; text-align: left; }
.admin-footer-btn:hover { color: rgba(255,255,255,0.85); background: rgba(255,255,255,0.07); }
.admin-footer-logout:hover { color: #ff8585; background: rgba(255,80,80,0.1); }
.admin-footer-btn .admin-nav-icon { width: 16px; height: 16px; }
.admin-footer-btn .admin-nav-icon svg { width: 16px; height: 16px; }
.admin-sidebar-user { padding:0.5rem 1rem 0.3rem;overflow:hidden;border-bottom:1px solid var(--adm-border);margin-bottom:0.25rem; }
.admin-sidebar-user-name { font-size:0.74rem;font-weight:600;color:rgba(255,255,255,0.85);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.admin-sidebar-user-role { font-size:0.64rem;color:var(--adm-active-c);opacity:0.85;margin-top:2px; }
.admin-main { margin-left: var(--sidebar-w); flex: 1; padding: 2rem; transition: margin-left 0.25s ease; min-width: 0; overflow-y: auto; }
/* Admin sidebar footer — menu utilisateur discret en bas à droite */
.admin-sidebar-footer { padding: 0.5rem 0.6rem; border-top: 1px solid var(--adm-border); display: flex; justify-content: flex-end; flex-shrink: 0; position: relative; z-index: 55; overflow: visible; }
.admin-user-menu { position: relative; }
.admin-user-trigger { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: none; border: 1px solid transparent; cursor: pointer; color: rgba(255,255,255,0.35); transition: var(--transition); }
.admin-user-trigger:hover, .admin-user-menu.open .admin-user-trigger { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.15); color: rgba(255,255,255,0.8); }
.admin-user-trigger svg { width: 15px; height: 15px; }
/* Dropdown s'ouvre vers le haut, dark-themed */
.admin-user-dropdown { position: absolute; right: 0; left: 0; bottom: calc(100% + 4px); top: auto; background: var(--adm-bg2, #172032); border: 1px solid var(--adm-border); border-radius: var(--radius-lg); box-shadow: 0 -6px 24px rgba(0,0,0,0.45); padding: 0.35rem 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity 0.15s, transform 0.15s, visibility 0s 0.15s; z-index: 60; pointer-events: none; }
.admin-user-menu:hover .admin-user-dropdown, .admin-user-menu.open .admin-user-dropdown { opacity: 1; visibility: visible; transform: translateY(0); transition: opacity 0.15s, transform 0.15s; pointer-events: auto; }
.admin-user-dd-header { padding: 0.55rem 0.9rem 0.5rem; border-bottom: 1px solid var(--adm-border); margin-bottom: 0.2rem; }
.admin-user-dd-name { display: block; font-size: 0.79rem; font-weight: 600; color: rgba(255,255,255,0.9); }
.admin-user-dd-role { display: block; font-size: 0.67rem; color: var(--adm-active-c); opacity: 0.85; margin-top: 1px; }
.admin-user-dd-btn { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.42rem 0.9rem; border: none; background: none; font-size: 0.79rem; font-family: inherit; color: rgba(255,255,255,0.6); cursor: pointer; text-align: left; transition: background 0.1s, color 0.1s; white-space: nowrap; }
.admin-user-dd-btn:hover { background: rgba(255,255,255,0.07); color: rgba(255,255,255,0.9); }
.admin-user-dd-btn svg { width: 13px; height: 13px; flex-shrink: 0; opacity: 0.55; }
.admin-user-dd-btn:hover svg { opacity: 0.9; }
.admin-user-dd-logout { color: rgba(255,110,110,0.8); }
.admin-user-dd-logout:hover { background: rgba(255,80,80,0.1); color: #ff8585; }
.admin-user-dd-logout svg { opacity: 0.75; }
/* Sidebar collapsed state (desktop) */
.admin-sidebar.collapsed { width: 64px; overflow-x: hidden; }
.admin-sidebar.collapsed .admin-brand-text,.admin-sidebar.collapsed .admin-nav-badge { display: none; }
.admin-sidebar.collapsed .admin-sidebar-user { display:none; }
.admin-sidebar.collapsed .admin-sidebar-brand { padding: 0; justify-content: center; }
.admin-sidebar.collapsed .admin-collapse-btn { transform: rotate(180deg); }
.admin-sidebar.collapsed .admin-nav-divider { padding: 0.6rem 0; display: flex; justify-content: center; }
.admin-sidebar.collapsed .admin-nav-section { display: none; }
.admin-sidebar.collapsed .admin-nav-divider::after { content: ''; display: block; width: 20px; height: 1px; background: rgba(255,255,255,0.1); }
.admin-sidebar.collapsed .admin-nav-item { padding: 0.6rem; margin: 1px 6px; justify-content: center; gap: 0; width: calc(100% - 12px); }
.admin-sidebar.collapsed .admin-nav-label { display: none; }
.admin-sidebar.collapsed .admin-nav-icon { width: 20px; height: 20px; }
.admin-sidebar.collapsed .admin-nav-icon svg { width: 20px; height: 20px; }
.admin-sidebar.collapsed .admin-sidebar-footer { padding: 0.5rem 0; justify-content: center; }
.admin-sidebar.collapsed .admin-nav-group-chevron { display: none; }
.admin-sidebar.collapsed .admin-nav-group-items { grid-template-rows: 1fr !important; }
.admin-main.sidebar-collapsed { margin-left: 64px; }
/* Admin overlay backdrop (mobile/tablet) */
.admin-backdrop { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 45; }
.admin-backdrop.visible { display: block; animation: fadeIn 0.2s ease; }
/* Floating sidebar open button (mobile/tablet) */
.admin-menu-btn { display: none; position: fixed; top: calc(var(--nav-h) + 0.65rem); left: 0.65rem; z-index: 60; width: 38px; height: 38px; border-radius: var(--radius); background: var(--adm-bg,#0e1825); color: white; border: none; cursor: pointer; box-shadow: var(--shadow-md); align-items: center; justify-content: center; transition: var(--transition); }
.admin-menu-btn:hover { background: var(--adm-bg2,#1a2d42); }
.admin-menu-btn svg { width: 20px; height: 20px; }
/* Sélecteur de thème (panneau Apparence) */
.theme-swatches { display:flex;flex-wrap:wrap;gap:0.75rem;margin:0.5rem 0 1.25rem; }
.theme-swatch { width:52px;height:52px;border-radius:12px;cursor:pointer;border:3px solid transparent;transition:border-color 0.15s,transform 0.15s;position:relative;overflow:hidden; }
.theme-swatch:hover { transform:scale(1.08); }
.theme-swatch.active { border-color:var(--c-text);box-shadow:0 0 0 2px rgba(0,0,0,0.12); }
.theme-swatch-label { font-size:0.7rem;text-align:center;color:var(--c-text-muted);margin-top:0.3rem;white-space:nowrap; }
/* Méga-menu boutique (sous-menus) */
.nav-has-sub { position:relative; }
.nav-submenu {
  position:absolute; top:calc(100% + 10px); left:0;
  min-width:230px;
  background:rgba(255,255,255,0.97);
  backdrop-filter:blur(20px) saturate(160%);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(196,154,108,0.2);
  border-radius:16px;
  box-shadow:0 4px 6px rgba(0,0,0,0.04),0 20px 56px rgba(0,0,0,0.13),0 2px 14px rgba(0,0,0,0.06);
  padding:0.45rem;
  z-index:200;
  opacity:0; pointer-events:none;
  transform:translateY(-10px) scale(0.96);
  transform-origin:top left;
  transition:opacity 0.22s cubic-bezier(0.16,1,0.3,1),transform 0.26s cubic-bezier(0.16,1,0.3,1);
}
.nav-submenu::before {
  content:''; position:absolute; top:-5px; left:22px;
  width:10px; height:10px;
  background:rgba(255,255,255,0.97);
  border-top:1px solid rgba(196,154,108,0.2);
  border-left:1px solid rgba(196,154,108,0.2);
  transform:rotate(45deg); border-radius:2px 0 0 0;
}
.nav-has-sub:hover .nav-submenu,.nav-has-sub:focus-within .nav-submenu { opacity:1;pointer-events:auto;transform:translateY(0) scale(1); }
.nav-has-sub:hover>.nav-link,.nav-has-sub:focus-within>.nav-link { color:var(--c-black);background:var(--c-border-light); }
.nav-submenu a {
  display:flex; align-items:center; gap:0.5rem;
  padding:0.6rem 1rem; font-size:0.84rem;
  color:var(--c-text); border-radius:10px; white-space:nowrap;
  opacity:0; transform:translateY(6px);
  transition:background 0.12s,color 0.12s,transform 0.12s,opacity 0.12s;
}
.nav-has-sub:hover .nav-submenu a,.nav-has-sub:focus-within .nav-submenu a {
  opacity:1; transform:translateY(0);
  transition:background 0.14s,color 0.14s,transform 0.26s cubic-bezier(0.16,1,0.3,1),opacity 0.26s cubic-bezier(0.16,1,0.3,1);
}
.nav-has-sub:hover .nav-submenu a:nth-child(1),.nav-has-sub:focus-within .nav-submenu a:nth-child(1){transition-delay:0.04s}
.nav-has-sub:hover .nav-submenu a:nth-child(2),.nav-has-sub:focus-within .nav-submenu a:nth-child(2){transition-delay:0.07s}
.nav-has-sub:hover .nav-submenu a:nth-child(3),.nav-has-sub:focus-within .nav-submenu a:nth-child(3){transition-delay:0.10s}
.nav-has-sub:hover .nav-submenu a:nth-child(4),.nav-has-sub:focus-within .nav-submenu a:nth-child(4){transition-delay:0.13s}
.nav-has-sub:hover .nav-submenu a:nth-child(5),.nav-has-sub:focus-within .nav-submenu a:nth-child(5){transition-delay:0.16s}
.nav-submenu a:hover { background:linear-gradient(135deg,var(--c-accent-light),rgba(196,154,108,0.1));color:var(--c-accent-dark);transform:translateX(4px)!important;transition-delay:0s!important; }
.nav-submenu-arrow { font-size:0.6rem;margin-left:3px;opacity:0.5;display:inline-block;transition:transform 0.24s cubic-bezier(0.16,1,0.3,1),opacity 0.2s; }
.nav-has-sub:hover .nav-submenu-arrow,.nav-has-sub:focus-within .nav-submenu-arrow { transform:rotate(180deg);opacity:1; }
/* Bloc homepage builder */
.hb-block { display:flex;align-items:center;gap:0.75rem;padding:0.75rem 1rem;background:var(--c-surface);border:1px solid var(--c-border);border-radius:var(--radius);margin-bottom:0.5rem;transition:box-shadow 0.15s,border-color 0.15s;cursor:default; }
.hb-block:hover { box-shadow:var(--shadow); }
.hb-block.hb-dragging { opacity:0.4;border:2px dashed var(--c-accent);box-shadow:none; }
.hb-block.hb-drag-over { border-top:3px solid var(--c-accent); }
.hb-block-handle { cursor:grab;color:var(--c-text-muted);font-size:1.1rem;flex-shrink:0;user-select:none; }
.hb-block-handle:active { cursor:grabbing; }
.hb-block-label { flex:1;font-size:0.88rem;font-weight:500; }
.hb-block-desc { font-size:0.73rem;color:var(--c-text-muted); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.admin-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.75rem; flex-wrap: wrap; gap: 0.75rem; }
.admin-page-title { font-size: 1.5rem; font-weight: 600; color: var(--c-text); }
.admin-page-title span { font-size: 0.875rem; font-weight: 400; color: var(--c-text-muted); margin-left: 0.5rem; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.stat-card { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); padding: 1.25rem 1.5rem; }
.stat-card-label { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 0.5rem; }
.stat-card-value { font-size: 1.8rem; font-weight: 700; font-family: var(--font-heading); color: var(--c-text); }
.stat-card-sub { font-size: 0.8rem; color: var(--c-text-muted); margin-top: 0.25rem; }
.stat-card-icon { font-size: 2rem; margin-bottom: 0.5rem; }

/* ---- MODAL ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 200; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.modal-box { background: var(--c-surface); border-radius: var(--radius-lg); width: 100%; max-width: 520px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-box.modal-lg { max-width: 780px; }
.modal-box.modal-xl { max-width: min(96vw, 1260px); max-height: 94vh; }
.modal-header { padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--c-border); display: flex; align-items: center; justify-content: space-between; }
.modal-header h3 { margin: 0; font-size: 1.1rem; }
.modal-body { padding: 1.5rem; }
.modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--c-border); display: flex; justify-content: flex-end; gap: 0.75rem; }
.modal-close { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--c-text-muted); transition: var(--transition); }
.modal-close:hover { background: var(--c-bg); color: var(--c-text); }

/* ---- TOAST ---- */
.toast-container { position: fixed; bottom: 1.5rem; right: 1.5rem; z-index: 999; display: flex; flex-direction: column; gap: 0.5rem; }
.toast { display: flex; align-items: center; gap: 0.75rem; background: var(--c-black); color: white; padding: 0.85rem 1.25rem; border-radius: var(--radius); font-size: 0.875rem; box-shadow: var(--shadow-md); animation: slideIn 0.3s ease; min-width: 280px; max-width: 380px; }
.toast.success { background: #166534; }
.toast.error { background: #991b1b; }
.toast.warning { background: #92400e; }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; }
.toast-close { margin-left: auto; opacity: 0.6; cursor: pointer; }
.toast-close:hover { opacity: 1; }
@keyframes slideIn { from { opacity:0; transform: translateX(20px); } to { opacity:1; transform: translateX(0); } }

/* ---- LOGIN ---- */
.auth-page { min-height: calc(100vh - var(--nav-h)); display: flex; align-items: center; justify-content: center; padding: 3rem 1.5rem; }
.auth-card { background: var(--c-surface); border-radius: var(--radius-lg); border: 1px solid var(--c-border); width: 100%; max-width: 440px; overflow: hidden; }
.auth-header { padding: 1.25rem 2rem 1.75rem; text-align: center; background: linear-gradient(135deg, var(--c-black), #333); color: white; }
.auth-header .brand { color: white; font-size: 1.75rem; margin-bottom: 0.5rem; }
.auth-header p { margin: 0.75rem 0 0; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; font-family: var(--font-body); display: flex; align-items: center; justify-content: center; gap: 0.75rem; }
.auth-header p::before, .auth-header p::after { content: ''; flex: 1; max-width: 48px; height: 1px; background: currentColor; opacity: 0.35; }
.auth-tabs { display: flex; border-bottom: 1px solid var(--c-border); }
.auth-tab { flex: 1; padding: 0.85rem; text-align: center; font-size: 0.875rem; font-weight: 500; color: var(--c-text-muted); border-bottom: 2px solid transparent; transition: var(--transition); cursor: pointer; }
.auth-tab.active { color: var(--c-accent); border-bottom-color: var(--c-accent); }
.auth-body { padding: 1.75rem; }

/* ---- INVOICE / BILLING ---- */
.invoice-doc { background: white; max-width: 800px; margin: 0 auto; padding: 3rem; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.invoice-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 2px solid var(--c-black); }
.invoice-logo { font-family: var(--font-heading); font-size: 1.8rem; font-weight: 700; letter-spacing: 0.12em; }
.invoice-meta { text-align: right; }
.invoice-num { font-size: 1.2rem; font-weight: 700; color: var(--c-accent); margin-bottom: 0.25rem; }
.invoice-addresses { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
.invoice-addr-label { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-text-muted); margin-bottom: 0.5rem; }
.invoice-addr-name { font-weight: 600; margin-bottom: 0.25rem; }
.invoice-table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.invoice-table th { background: var(--c-black); color: white; padding: 0.75rem 1rem; font-size: 0.75rem; letter-spacing: 0.05em; text-align: left; }
.invoice-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--c-border); font-size: 0.875rem; }
.invoice-totals { margin-left: auto; width: 260px; }
.invoice-total-row { display: flex; justify-content: space-between; padding: 0.4rem 0; font-size: 0.875rem; }
.invoice-total-row.grand { font-size: 1.1rem; font-weight: 700; border-top: 2px solid var(--c-black); padding-top: 0.75rem; margin-top: 0.25rem; }
.invoice-status-banner { text-align: center; padding: 0.75rem; border-radius: var(--radius); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 2rem; }
.invoice-status-banner.paid { background: #dcfce7; color: #166534; }
.invoice-status-banner.unpaid { background: #fef3c7; color: #92400e; }
.invoice-status-banner.overdue { background: #fee2e2; color: #991b1b; }
.invoice-status-banner.demo { background: #ede9fe; color: #5b21b6; }
.invoice-notes { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--c-border); font-size: 0.8rem; color: var(--c-text-muted); }
.statement-doc { background: white; max-width: 900px; margin: 0 auto; padding: 3rem; border: 1px solid var(--c-border); border-radius: var(--radius-lg); }
.statement-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.5rem 0; }
.statement-sum-box { background: var(--c-bg); padding: 1rem; border-radius: var(--radius); }
.statement-sum-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text-muted); margin-bottom: 0.25rem; }
.statement-sum-value { font-size: 1.25rem; font-weight: 700; }

/* ---- FOOTER ---- */
.footer { background: var(--c-black); color: rgba(255,255,255,0.7); padding: 4rem 0 0; margin-top: 5rem; }
.footer-brand { font-family: var(--font-heading); font-size: 2.2rem; letter-spacing: 0.12em; color: white; margin-bottom: 0.75rem; display: block; }
.footer-tagline { font-size: 0.85rem; color: rgba(255,255,255,0.45); }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 2rem; }
.footer-heading { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.15em; text-transform: uppercase; color: white; margin-bottom: 1rem; font-family: var(--font-body); }
.footer-links { display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a { font-size: 0.85rem; color: rgba(255,255,255,0.5); transition: var(--transition); }
.footer-links a:hover { color: white; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.1); margin-top: 3rem; padding: 1.5rem 0; font-size: 0.78rem; color: rgba(255,255,255,0.3); }

/* ---- BREADCRUMB ---- */
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; padding: 1rem 0; font-size: 0.8rem; color: var(--c-text-muted); }
.breadcrumb a:hover { color: var(--c-text); text-decoration: underline; }
.breadcrumb-sep { color: var(--c-border); }

/* ---- LOADING ---- */
.loading { display: flex; align-items: center; justify-content: center; padding: 4rem; }
.spinner { width: 32px; height: 32px; border: 3px solid var(--c-border); border-top-color: var(--c-accent); border-radius: 50%; animation: spin 0.7s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- PAGINATION ---- */
.pagination { display: flex; gap: 0.4rem; justify-content: center; margin-top: 2.5rem; }
.page-btn { width: 36px; height: 36px; border-radius: var(--radius); border: 1.5px solid var(--c-border); font-size: 0.875rem; font-weight: 500; display: flex; align-items: center; justify-content: center; transition: var(--transition); }
.page-btn:hover, .page-btn.active { background: var(--c-black); color: white; border-color: var(--c-black); }

/* ---- SEARCH BAR ---- */
.search-wrap { position: relative; }
.search-input { padding-left: 2.5rem; }
.search-icon { position: absolute; left: 0.75rem; top: 50%; transform: translateY(-50%); color: var(--c-text-muted); pointer-events: none; }

/* ---- IMAGE TOOLS ---- */
/* Upload dropzone */
.img-upload-zone { border: 2px dashed var(--c-border); border-radius: var(--radius-lg); width: 150px; aspect-ratio: 3/4; position: relative; cursor: pointer; overflow: hidden; transition: border-color var(--transition), background var(--transition); background: var(--c-bg); flex-shrink: 0; }
.img-upload-zone:hover, .img-upload-zone.dragover { border-color: var(--c-accent); background: var(--c-accent-light); }
.img-upload-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem; padding: 1rem; text-align: center; pointer-events: none; }
.img-upload-placeholder span { font-size: 2rem; }
.img-upload-placeholder p { font-size: 0.78rem; font-weight: 500; color: var(--c-text-muted); margin: 0; line-height: 1.3; }
.img-upload-placeholder small { font-size: 0.68rem; color: var(--c-border); line-height: 1.4; }
.img-upload-zone img { width: 100%; height: 100%; object-fit: cover; display: block; }
.img-upload-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.img-upload-zone:hover .img-upload-overlay { opacity: 1; }
.img-upload-overlay span { color: white; font-size: 0.8rem; font-weight: 600; }
/* Filter strip */
.img-filter-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.25rem 0 0.5rem; }
.img-filter-strip::-webkit-scrollbar { height: 4px; }
.img-filter-strip::-webkit-scrollbar-thumb { background: var(--c-border); border-radius: 2px; }
.img-filter-thumb { flex-shrink: 0; display: flex; flex-direction: column; align-items: center; gap: 0.3rem; cursor: pointer; }
.img-filter-thumb span { font-size: 0.62rem; color: var(--c-text-muted); white-space: nowrap; transition: color var(--transition); }
.img-filter-thumb.active span { color: var(--c-accent); font-weight: 600; }
.img-filter-preview { width: 58px; height: 77px; border-radius: var(--radius); object-fit: cover; border: 2px solid transparent; transition: border-color var(--transition); display: block; }
.img-filter-thumb.active .img-filter-preview { border-color: var(--c-accent); }
.img-filter-thumb:hover .img-filter-preview { border-color: var(--c-text-muted); }
/* Tilt glare overlay */
.tilt-glare { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3; transition: background 0.08s; }
/* Product card real image */
.product-img-real { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
/* Gallery thumbnails */
.gallery-thumb { cursor: pointer; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; border: 2px solid var(--c-border); transition: border-color var(--transition); position: relative; background: var(--c-bg); }
.gallery-thumb.active, .gallery-thumb:hover { border-color: var(--c-black); }
.gallery-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: auto; }
/* Interpolation haute qualité PDP + lightbox */
#pdp-main-img, #lb-main { image-rendering: auto; }
.gallery-thumb-label { position: absolute; bottom: 0; left: 0; right: 0; background: rgba(0,0,0,0.52); color: white; font-size: 0.52rem; text-align: center; padding: 2px 3px; letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; line-height: 1.6; pointer-events: none; }
.look-saved-badge { position: absolute; top: 0.4rem; left: 0.4rem; background: var(--c-accent); color: white; font-size: 0.6rem; padding: 2px 8px; border-radius: 20px; letter-spacing: 0.05em; font-weight: 600; z-index: 2; pointer-events: none; }
.look-combine-btn { background: var(--c-accent); color: white; border: 1px solid var(--c-accent); }
.look-combine-btn:hover { background: var(--c-accent-dark, #a8815a); border-color: var(--c-accent-dark, #a8815a); }
/* ---- OUTFIT COMPOSER ---- */
.modal-box.modal-xl { padding: 1rem 1.25rem; }
.oc-header { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; gap: 1rem; }
.oc-layout { display: grid; grid-template-columns: 238px 1fr; gap: 1rem; height: min(76vh, 680px); min-height: 0; }
.oc-left { display: flex; flex-direction: column; min-height: 0; }
.oc-right { display: flex; flex-direction: column; min-height: 0; }
.oc-selections { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.5rem; flex-shrink: 0; }
.oc-sel-card { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; background: var(--c-bg); border: 1px solid var(--c-border); border-radius: var(--radius); }
.oc-sel-empty { border-style: dashed; }
.oc-sel-badge { font-size: 0.6rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-muted); width: 44px; flex-shrink: 0; }
.oc-prod-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.3rem; overflow-y: auto; flex: 1; padding-right: 2px; min-height: 0; }
.oc-prod-card { cursor: pointer; border-radius: var(--radius); overflow: hidden; border: 2px solid transparent; transition: var(--transition); }
.oc-prod-card:hover { border-color: var(--c-accent); }
.oc-prod-card.selected { border-color: var(--c-accent); background: var(--c-accent-light); }
.oc-prod-thumb { aspect-ratio: 3/4; overflow: hidden; background: var(--c-bg); }
.oc-prod-name { font-size: 0.62rem; padding: 2px 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--c-text-muted); }
.oc-view-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.6rem; flex-shrink: 0; }
.oc-view-tab { flex: 1; padding: 0.4rem 0.3rem; border: 1px solid var(--c-border); border-radius: var(--radius); background: none; font-family: inherit; font-size: 0.75rem; cursor: pointer; transition: var(--transition); color: var(--c-text-muted); }
.oc-view-tab:hover { border-color: var(--c-accent); color: var(--c-accent); }
.oc-view-tab.active { background: var(--c-accent); border-color: var(--c-accent); color: white; font-weight: 500; }
.oc-canvas-wrap { flex: 1; background: #ffffff; border-radius: var(--radius-lg); overflow: hidden; display: flex; align-items: center; justify-content: center; min-height: 0; position: relative; box-shadow: inset 0 0 0 1px var(--c-border); }
@keyframes oc-spin { to { transform: rotate(360deg); } }
.oc-spinner { display: inline-block; animation: oc-spin 0.9s linear infinite; }
@keyframes pc-shimmer { 0%{background-position:200% 0} 100%{background-position:-200% 0} }
/* Plein écran */
.modal-overlay.oc-full-ov { padding: 0 !important; }
.modal-box.oc-full { max-width: 100vw !important; max-height: 100vh !important; width: 100vw; height: 100vh; border-radius: 0 !important; box-sizing: border-box; overflow: hidden; display: flex; flex-direction: column; padding: 1rem 1.5rem; }
.modal-box.oc-full .oc-layout { height: 0; flex: 1; min-height: 0; }

/* ---- PAGE HERO ---- */
.page-hero { background: var(--c-black); color: white; padding: 3.5rem 0; text-align: center; }
.page-hero h1 { color: white; font-size: 2.5rem; }
.page-hero p { color: rgba(255,255,255,0.6); margin-top: 0.5rem; }

/* ---- STOCK INDICATOR ---- */
.stock-indicator { display: flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; }
.stock-dot { width: 8px; height: 8px; border-radius: 50%; }
.stock-ok .stock-dot { background: var(--c-success); }
.stock-low .stock-dot { background: var(--c-warning); }
.stock-out .stock-dot { background: var(--c-error); }

/* ---- PROMO BAR ---- */
.promo-bar { position:relative; z-index:200; text-align:center; font-size:0.82rem; font-weight:500; }
.promo-bar-inner { display:flex; align-items:center; justify-content:center; gap:0.75rem; padding:0.55rem 3rem; flex-wrap:wrap; min-height:36px; }
.promo-bar-msg { line-height:1.4; }
.promo-bar-cta { color:inherit; text-decoration:underline; white-space:nowrap; font-weight:600; opacity:0.9; }
.promo-bar-cta:hover { opacity:1; }
.promo-bar-close { position:absolute; right:0.75rem; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:inherit; opacity:0.6; font-size:0.9rem; line-height:1; padding:0.25rem; }
.promo-bar-close:hover { opacity:1; }

/* ---- GIFT CARD SHOP ---- */
.gc-purchase-layout { display:grid; grid-template-columns:1fr 340px; gap:2rem; align-items:start; }
@media (max-width:860px) { .gc-purchase-layout { grid-template-columns:1fr; } }
.gc-amounts { display:flex; flex-wrap:wrap; gap:0.5rem; }
.gc-amount-btn { padding:0.6rem 1.2rem; border:2px solid var(--c-border); border-radius:var(--radius); background:var(--c-surface); font-weight:600; font-size:0.95rem; cursor:pointer; transition:var(--transition); color:var(--c-text); }
.gc-amount-btn:hover { border-color:var(--c-accent); color:var(--c-accent); }
.gc-amount-btn.active { border-color:var(--c-accent); background:var(--c-accent); color:#fff; }

/* ---- COUPON SECTION AT CHECKOUT ---- */
.coupon-section { margin-top:1rem; display:flex; flex-direction:column; gap:0.75rem; }
.coupon-row { background:var(--c-bg); border-radius:var(--radius); padding:0.75rem; }
.coupon-label { font-size:0.8rem; font-weight:600; color:var(--c-text-muted); text-transform:uppercase; letter-spacing:0.05em; }

/* ---- NEWSLETTER ---- */
.nl-tabs { display:flex; gap:0.25rem; flex-wrap:wrap; margin-bottom:1.5rem; border-bottom:2px solid var(--c-border); }
.nl-tab { padding:0.6rem 1rem; font-size:0.85rem; font-weight:500; color:var(--c-text-muted); border:none; border-bottom:2px solid transparent; margin-bottom:-2px; background:transparent; cursor:pointer; transition:var(--transition); }
.nl-tab:hover { color:var(--c-text); }
.nl-tab.active { color:var(--c-accent); border-bottom-color:var(--c-accent); }
.nl-setup-banner { text-align:center; padding:4rem 2rem; background:var(--c-surface); border-radius:var(--radius-lg); border:2px dashed var(--c-border); }
.nl-setup-banner h2 { margin-bottom:0.5rem; }
.nl-msg { min-height:1em; font-size:0.78rem; }

/* ---- CAMPAIGN EDITOR ---- */
.camp-editor { display:grid; grid-template-columns:46% 54%; gap:0.75rem; height:600px; }
.camp-editor.code-only { grid-template-columns:1fr; }
.camp-code-panel { display:flex; flex-direction:column; min-height:0; overflow:hidden; }
.camp-code-panel .ved-root { border:none; border-radius:0; }
.camp-panel-header { display:flex; justify-content:space-between; align-items:center; padding:0.35rem 0.6rem; background:var(--c-bg); border:1px solid var(--c-border); border-bottom:none; border-radius:var(--radius) var(--radius) 0 0; }
.camp-textarea { flex:1; resize:none; font-family:monospace; font-size:0.76rem; line-height:1.55; border-radius:0 0 var(--radius) var(--radius) !important; min-height:0; }
.camp-preview-panel { display:flex; flex-direction:column; min-height:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--c-border); }
.camp-browser-chrome { display:flex; align-items:center; gap:0.4rem; padding:0.45rem 0.75rem; background:#e8e8e8; border-bottom:1px solid #d5d5d5; flex-shrink:0; }
.camp-dot { width:11px; height:11px; border-radius:50%; display:inline-block; flex-shrink:0; }
.camp-dot-r { background:#ff5f57; }
.camp-dot-y { background:#febc2e; }
.camp-dot-g { background:#28c840; }
.camp-url-bar { flex:1; background:#fff; border:1px solid #d5d5d5; border-radius:4px; padding:0.18rem 0.6rem; font-size:0.7rem; color:#888; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; margin:0 0.25rem; }
.camp-preview-outer { flex:1; overflow-y:auto; overflow-x:hidden; background:#f0f0f0; position:relative; }
.camp-iframe { display:block; border:none; width:620px; height:2200px; }

/* ---- VISUAL EMAIL EDITOR (VED) ---- */
.ved-root { display:flex; flex-direction:column; min-height:0; height:100%; border:1px solid var(--c-border); border-radius:var(--radius); overflow:hidden; background:var(--c-surface); }
.ved-tabs { display:flex; align-items:center; gap:0.25rem; padding:0.35rem 0.5rem; background:var(--c-bg); border-bottom:1px solid var(--c-border); flex-wrap:wrap; flex-shrink:0; }
.ved-tab { background:none; border:1px solid transparent; border-radius:var(--radius); padding:0.28rem 0.65rem; font-size:0.78rem; font-weight:500; cursor:pointer; color:var(--c-text-muted); transition:background 0.15s,color 0.15s; }
.ved-tab:hover { background:var(--c-surface); color:var(--c-text); }
.ved-tab.active { background:var(--c-surface); border-color:var(--c-border); color:var(--c-text); font-weight:600; }
.ved-body { flex:1; overflow-y:auto; padding:0.6rem; display:flex; flex-direction:column; gap:0.4rem; min-height:0; }
.ved-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:2rem 1rem; color:var(--c-text-muted); font-size:0.875rem; flex:1; }
.ved-block { border:1px solid var(--c-border); border-radius:var(--radius); background:var(--c-surface); overflow:hidden; }
.ved-block-hd { display:flex; align-items:center; justify-content:space-between; padding:0.4rem 0.65rem; background:var(--c-bg); border-bottom:1px solid var(--c-border); }
.ved-block-lbl { font-size:0.78rem; font-weight:600; color:var(--c-text); }
.ved-block-acts { display:flex; gap:0.2rem; }
.ved-block-bd { padding:0.65rem; display:flex; flex-direction:column; gap:0.35rem; }
.ved-row { display:flex; align-items:center; gap:0.4rem; flex-wrap:wrap; }
.ved-row .form-control { min-width:0; }
.ved-html-warn { background:#fff3cd; border:1px solid #ffc107; border-radius:4px; padding:0.4rem 0.6rem; font-size:0.75rem; color:#856404; }
.ved-step-shell { border:none; border-radius:var(--radius); min-height:220px; max-height:360px; }
.ved-step-shell .ved-body { max-height:280px; }
.btn-xs { padding:0.2rem 0.45rem; font-size:0.72rem; line-height:1.2; }
.ved-fs-btn { border:1px solid var(--c-border) !important; margin-left:auto; }

/* ---- PRODUCT EDITOR (inline full-page) ---- */
.pf-layout { display:flex; flex-direction:column; height:calc(100vh - 0px); overflow:hidden; background:var(--c-bg); }
.pf-layout.pf-fullscreen { position:fixed; inset:0; z-index:9000; }
.pf-header { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 1.25rem; background:var(--c-surface); border-bottom:1px solid var(--c-border); flex-shrink:0; gap:1rem; }
.pf-title { margin:0; font-size:1rem; font-weight:600; }
.pf-body { display:grid; grid-template-columns:1fr 420px; flex:1; min-height:0; overflow:hidden; }
.pf-form-col { overflow-y:auto; padding:1.25rem; display:flex; flex-direction:column; gap:1rem; }
.pf-section { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius-lg); padding:1.1rem 1.25rem; }
.pf-section-title { font-size:0.72rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--c-text-muted); margin-bottom:0.8rem; padding-bottom:0.5rem; border-bottom:1px solid var(--c-border); }
/* Size chips */
.pf-chip-group { display:flex; gap:0.35rem; flex-wrap:wrap; }
.pf-chip { padding:0.35rem 0.7rem; border:1.5px solid var(--c-border); border-radius:var(--radius); font-size:0.8rem; font-weight:600; cursor:pointer; background:var(--c-bg); color:var(--c-text); transition:all 0.15s; }
.pf-chip:hover { border-color:var(--c-accent); color:var(--c-accent); }
.pf-chip.active { background:var(--c-accent); border-color:var(--c-accent); color:#fff; }
/* Color tags */
.pf-tag-wrap { display:flex; gap:0.4rem; flex-wrap:wrap; min-height:1.75rem; }
.pf-tag { display:inline-flex; align-items:center; gap:0.3rem; background:var(--c-bg); border:1px solid var(--c-border); border-radius:99px; padding:0.2rem 0.6rem 0.2rem 0.75rem; font-size:0.8rem; }
.pf-tag button { background:none; border:none; cursor:pointer; color:var(--c-text-muted); font-size:0.9rem; line-height:1; padding:0; display:flex; align-items:center; }
.pf-tag button:hover { color:var(--c-error); }
/* Color autocomplete dropdown */
.pf-color-sug { display:flex; align-items:center; gap:0.6rem; padding:0.45rem 0.75rem; cursor:pointer; font-size:0.85rem; color:var(--c-text); transition:background 0.12s; }
.pf-color-sug:hover, .pf-color-sug:focus { background:var(--c-bg); outline:none; }
.pf-color-sug--added { opacity:0.5; cursor:default; }
/* Emoji quick pick */
.pf-emoji-grid { display:flex; gap:0.3rem; flex-wrap:wrap; }
.pf-emoji-btn { width:36px; height:36px; border:1.5px solid var(--c-border); border-radius:var(--radius); font-size:1.15rem; cursor:pointer; background:var(--c-bg); display:flex; align-items:center; justify-content:center; transition:border-color 0.15s,transform 0.12s; }
.pf-emoji-btn:hover { border-color:var(--c-accent); transform:scale(1.15); }
/* Preview column */
.pf-preview-col { border-left:1px solid var(--c-border); overflow:hidden; display:flex; flex-direction:column; }
.pf-preview-sticky { display:flex; flex-direction:column; height:100%; }
.pf-preview-hd { display:flex; align-items:center; justify-content:space-between; padding:0.7rem 1rem; background:var(--c-surface); border-bottom:1px solid var(--c-border); flex-shrink:0; }
.pf-prev-tab { padding:0.28rem 0.75rem; border:1px solid var(--c-border); border-radius:var(--radius); font-size:0.78rem; font-weight:500; cursor:pointer; background:transparent; color:var(--c-text-muted); transition:all 0.15s; }
.pf-prev-tab.active { background:var(--c-accent); border-color:var(--c-accent); color:#fff; font-weight:600; }
.pf-preview-area { flex:1; overflow-y:auto; }
/* Preview card bg */
.pf-prev-card-bg { background:#f5f4f2; min-height:100%; padding:1.25rem; }
.pf-prev-detail-bg { background:#f5f4f2; min-height:100%; padding:1.25rem; }
.pf-prev-card-label { font-size:0.68rem; text-transform:uppercase; letter-spacing:1.5px; color:#aaa; margin-bottom:0.75rem; }
.pf-prev-card-wrap { max-width:260px; }
.pf-prev-stats { display:grid; grid-template-columns:1fr 1fr; gap:0.5rem; margin-top:1rem; }
.pf-stat { background:var(--c-surface); border:1px solid var(--c-border); border-radius:var(--radius); padding:0.6rem 0.75rem; display:flex; flex-direction:column; gap:0.1rem; }
.pf-stat span { font-size:0.95rem; font-weight:700; }
.pf-stat small { font-size:0.7rem; color:var(--c-text-muted); }
/* Detail preview helpers */
.pf-detail-label { font-size:0.7rem; font-weight:700; text-transform:uppercase; letter-spacing:1px; color:var(--c-text-muted); margin-bottom:0.3rem; }
.pf-size-pill { border:1px solid var(--c-border); padding:3px 10px; border-radius:3px; font-size:0.78rem; }
.pf-color-pill { background:var(--c-bg); border:1px solid var(--c-border); padding:3px 10px; border-radius:3px; font-size:0.78rem; }

/* Fullscreen overlay */
.ved-fs-overlay { position:fixed; inset:0; z-index:9998; display:flex; flex-direction:column; background:var(--c-bg); }
.ved-fs-header { display:flex; align-items:center; justify-content:space-between; padding:0.6rem 1.25rem; background:#1a1a1a; color:#fff; flex-shrink:0; gap:1rem; }
.ved-fs-body { flex:1; display:grid; grid-template-columns:50% 50%; min-height:0; overflow:hidden; }
.ved-fs-left { display:flex; flex-direction:column; overflow:hidden; border-right:1px solid var(--c-border); }
.ved-fs-left .ved-root { height:100%; border:none; border-radius:0; }
.ved-fs-right { display:flex; flex-direction:column; overflow:hidden; background:#f0f0f0; }
.ved-fs-preview-wrap { flex:1; overflow-y:auto; overflow-x:hidden; }

/* ---- PRINT STYLES ---- */
@media print {
  .navbar, .footer, #toast-container, .no-print, .btn, .admin-sidebar { display: none !important; }
  body { background: white; font-size: 12pt; }
  .admin-main { margin-left: 0 !important; }
  .invoice-doc, .statement-doc { border: none; padding: 0; }
  a { text-decoration: none; }
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1024px) {
  .shop-layout, .product-detail, .checkout-layout, .cart-layout { grid-template-columns: 1fr; }
  .product-gallery { position: static; }
  .admin-sidebar { transform: translateX(-100%); }
  .admin-sidebar.open { transform: translateX(0); }
  .admin-sidebar.collapsed { transform: translateX(-100%); }
  .admin-main { margin-left: 0 !important; padding: 1.25rem; }
  .admin-menu-btn { display: flex; }
  .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
  .invoice-doc, .statement-doc { padding: 1.5rem; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .hero { min-height: 60vh; }
  .hero-cta { flex-direction: column; }
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .categories-grid { grid-template-columns: repeat(2, 1fr); }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .cart-item { grid-template-columns: 70px 1fr; }
  .cart-item-price { grid-column: 1 / -1; }
  .account-layout { grid-template-columns: 1fr; }
  .account-nav { position: static; display: flex; gap: 0.5rem; flex-wrap: wrap; }
  .account-nav-item { padding: 0.5rem 0.75rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .invoice-addresses { grid-template-columns: 1fr; }
  .statement-summary { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .hamburger-btn { display: block; }
  .admin-page-header { flex-direction: column; align-items: flex-start; }
  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .oc-layout { grid-template-columns: 1fr; height: auto; }
  .oc-left { max-height: 280px; }
  .oc-canvas-wrap { min-height: 280px; }
  .modal-box.oc-full .oc-layout { height: auto; flex: unset; }
}

@media (max-width: 480px) {
  .products-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .section { padding: 3rem 0; }
  .admin-main { padding: 0.75rem; }
  .stat-grid { grid-template-columns: 1fr; }
  .modal-overlay { padding: 0.75rem; align-items: flex-end; }
  .modal-box { border-radius: var(--radius-lg) var(--radius-lg) 0 0; max-height: 85vh; }
}

/* ── Impression (rapports fiscaux admin) ─────────────────────────── */
@media print {
  .admin-sidebar, .admin-menu-btn, .admin-backdrop,
  .nl-tabs, .admin-page-header .btn,
  .admin-page-header select, #toast-container { display: none !important; }
  .admin-layout { display: block !important; height: auto !important; overflow: visible !important; }
  .admin-main { margin: 0 !important; padding: 0.5rem 1rem !important;
                box-shadow: none !important; }
  .admin-page-header { border-bottom: 2px solid #000 !important;
                       margin-bottom: 1rem; padding-bottom: 0.5rem; }
  .admin-page-title { font-size: 1.1rem !important; }
  .card { box-shadow: none !important; border: 1px solid #ccc !important;
          break-inside: avoid; }
  .stat-card { box-shadow: none !important; border: 1px solid #ccc !important; }
  .table-wrap { overflow: visible !important; }
  .badge, .stat-card { print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  .btn { display: none !important; }
}