@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@600;700;800&family=JetBrains+Mono:wght@400;500&family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Manrope:wght@400;500;600;700&family=Archivo+Black&display=swap'); /* impeccable-disable-line overused-font: brief DESIGN.md — Inter pour le body sur mobile Togo (lisibilité + bande passante); Outfit place l'identité monumentale; JetBrains Mono porte le registre "ledger". Fraunces pour le thème Classique (serif éditorial artisanat/food). Manrope pour Glassmorphism/Dark Premium (geometric moderne). Archivo Black pour Vibrant (streetwear brutal). Choix documenté, pas par défaut. */
/* themes.css linké explicitement dans chaque layout EJS — @import peu fiable */

/* =========================================================
   MaBoutique — Platform Design System (Registre Indigo)
   Direction: studio de conseil haut de gamme, registre comptable soigné.
   Palette: indigo profond OKLCH chaud / ivoire chaud / or pale / charbon graphite.
   Typography: Outfit (display) + Inter (body) + JetBrains Mono (labels).
   Aucun dégradé. Lignes fines. Hiérarchie typographique tranchée.
   ========================================================= */

:root {
  /* Platform-level identity — Registre Indigo (OKLCH chaud)
     Fallbacks hex : vieux navigateurs sans support oklch() gardent
     quand même l'indigo (sinon boutons/texte cassés, rendu noir). */
  --color-primary: #1E3A8A;
  --color-primary: oklch(0.32 0.09 264);        /* indigo principal */
  --color-on-primary: #FBF8F3;
  --color-on-primary: oklch(0.97 0.012 85);     /* ivoire chaud sur indigo */
  --color-secondary: #1E2A6A;
  --color-secondary: oklch(0.28 0.10 264);      /* indigo profond (CTA/focus) */
  --color-cta: #4F46E5;
  --color-cta: oklch(0.50 0.15 264);            /* indigo vif pour boutons primaires — évite l'aspect noir */
  --color-cta-hover: #4338CA;
  --color-cta-hover: oklch(0.44 0.14 264);      /* hover des boutons primaires */
  --color-accent: #C9A961;
  --color-accent: oklch(0.80 0.055 85);         /* or pale — détails premium */
  --color-background: #FBF8F3;
  --color-background: oklch(0.97 0.012 85);    /* ivoire chaud */
  --color-foreground: #1A1A1A;
  --color-foreground: oklch(0.18 0.008 264);   /* charbon graphite */
  --surface-muted: #EDE8E0;
  --surface-muted: oklch(0.94 0.008 85);        /* surface muted (ardoise pâle) — PAS du texte */
  --color-border: #E4DDD2;
  --color-border: oklch(0.88 0.008 85);        /* hairline */
  --color-destructive: #B91C1C;
  --color-destructive: oklch(0.52 0.20 25);    /* rouge sobre, pas neon */
  --color-ring: #1E3A8A;
  --color-ring: oklch(0.32 0.09 264);           /* indigo pour focus */

  /* Vendor-overridable tokens (defaults changés: vert → indigo) */
  --primary-color: #1E3A8A;
  --primary-color: oklch(0.32 0.09 264);
  --secondary-color: #1E2A6A;
  --secondary-color: oklch(0.28 0.10 264);
  --text-color: #1A1A1A;
  --text-color: oklch(0.18 0.008 264);

  /* NO hero gradient — Registre Indigo refuses any decorative gradient.
     Les surfaces pleine couleur sont plates. */
  /* --hero-gradient retiré — Registre Indigo refuse les dégradés */

  /* Text */
  --text-main: oklch(0.18 0.008 264);
  --text-muted: oklch(0.48 0.018 264);   /* ≥4.5:1 sur ivoire (6.2:1) */

  /* Spacing scale — 8px grid, generous breathing */
  --space-2xs: 0.125rem;  /* 2px */
  --space-xs: 0.25rem;    /* 4px */
  --space-sm: 0.5rem;     /* 8px */
  --space-md: 1rem;       /* 16px */
  --space-lg: 1.5rem;     /* 24px */
  --space-xl: 2rem;       /* 32px */
  --space-2xl: 3rem;      /* 48px */
  --space-3xl: 4rem;      /* 64px */
  --space-4xl: 6rem;      /* 96px — hero scale */

  /* Shadows — offset + soft blur, jamais skeuomorphique.
     Default = hairline (pas d'ombre). Hover = elevation légère. */
  --shadow-sm: 0 1px 2px rgba(26, 26, 26, 0.04);
  --shadow-md: 0 4px 16px rgba(26, 26, 26, 0.06), 0 1px 3px rgba(26, 26, 26, 0.04);
  --shadow-lg: 0 12px 40px rgba(26, 26, 26, 0.08), 0 2px 6px rgba(26, 26, 26, 0.04);
  --shadow-xl: 0 24px 60px rgba(26, 26, 26, 0.10), 0 4px 10px rgba(26, 26, 26, 0.05);

  /* Radius — sobre, 8-12px pour les cards, 4px pour les inputs */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* Hairline — la ligne fine, signature du registre */
  --hairline: 1px solid var(--color-border);
  --hairline-strong: 1px solid oklch(0.82 0.012 264);

  /* Fonts */
  --font-heading: 'Outfit', system-ui, -apple-system, sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Card defaults — papier plat, hairline (pas d'ombre en default) */
  --card-bg: oklch(0.99 0.006 85);
  --card-border: 1px solid var(--color-border);
  --bg-color: var(--color-background);

  /* Status tokens — avant uniquement dans dark_premium, maintenant
     disponibles pour tous les themes. OKLCH chaud, Registre Indigo. */
  --color-success: oklch(0.55 0.15 145);     /* vert sobre, pas neon */
  --color-warning: oklch(0.68 0.16 65);      /* ambre chaud */
  --color-danger: oklch(0.52 0.20 25);       /* rouge sobre */
  --color-info: oklch(0.45 0.10 264);        /* indigo pour badges info */
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg-color);
  color: var(--text-main);
  line-height: 1.65;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  transition: background 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02', 'cv03', 'cv04', 'cv11';
}

/* ─── Typography ────────────────────────────────── */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: var(--text-main);
}

h1 {
  font-size: 3rem; /* 44px — monumental */
  letter-spacing: -0.035em;
  font-weight: 800;
}

h2 {
  font-size: 1.75rem; /* 28px */
  font-weight: 700;
  letter-spacing: -0.03em;
}

h3 {
  font-size: 1.25rem; /* 20px */
  font-weight: 600;
  letter-spacing: -0.02em;
}

p {
  max-width: 70ch;
  line-height: 1.7;
}

a {
  color: inherit;
  text-decoration: none;
}

/* Mono labels — signature du registre (numéros de section, tracked uppercase) */
.mono-label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Hairline rule — la ligne fine qui porte la signature */
.rule-hairline {
  border: none;
  border-top: var(--hairline);
  margin: var(--space-lg) 0;
}

.rule-hairline-strong {
  border: none;
  border-top: var(--hairline-strong);
  margin: var(--space-xl) 0;
}

/* ─── SVG Icon System ───────────────────────────── */
.icon {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
}

.icon-sm { width: 16px; height: 16px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }

/* ─── Container ─────────────────────────────────── */
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-lg);
}

/* ─── Navbar ────────────────────────────────────── */
.navbar {
  background: var(--card-bg);
  border-bottom: var(--hairline);
  position: sticky;
  top: 0;
  z-index: 100;
  padding: 1rem 0;
  backdrop-filter: blur(var(--blur, 0px));
}

.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

.brand-logo {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.brand-logo svg {
  color: var(--color-primary);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
}

/* ─── Buttons ───────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.625rem 1.25rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  font-weight: 600;
  font-size: 0.875rem;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all 180ms ease;
  text-decoration: none;
  line-height: 1.4;
  white-space: nowrap;
  min-height: 44px; /* Touch target */
}

.btn:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.btn:active {
  transform: scale(0.98);
}

.btn-primary {
  background: var(--color-cta);
  color: var(--color-on-primary);
  box-shadow: none;
}

.btn-primary:hover {
  background: var(--color-cta-hover);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}

.btn-secondary {
  background: var(--color-secondary);
  color: var(--color-on-primary);
  box-shadow: none;
}

.btn-secondary:hover {
  background: var(--color-primary);
  box-shadow: var(--shadow-md);
}

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--color-cta);
  color: var(--color-cta);
}

.btn-outline:hover {
  background: var(--color-cta);
  color: var(--color-on-primary);
}

.btn-sm {
  padding: 0.4375rem 0.875rem;
  font-size: 0.875rem;
  min-height: 36px;
}

.btn-lg {
  padding: 0.875rem 1.75rem;
  font-size: 1.125rem;
  min-height: 52px;
}

.btn-icon {
  position: relative;
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-md);
  padding: 0.625rem;
  cursor: pointer;
  transition: all 180ms ease;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 44px;
}

.btn-icon:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary-color);
}

.btn-icon:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* ─── Badges ────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3125rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  border-radius: var(--radius-full);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}

.badge-success { background: oklch(0.92 0.04 85); color: oklch(0.38 0.06 85); }
.badge-warning { background: oklch(0.93 0.02 85); color: oklch(0.40 0.02 85); }
.badge-danger  { background: oklch(0.94 0.04 25); color: oklch(0.40 0.14 25); }
.badge-info    { background: oklch(0.93 0.03 264); color: oklch(0.32 0.09 264); }

.badge-count {
  position: absolute;
  top: -6px;
  right: -6px;
  background: var(--color-destructive, #ef4444);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

/* ─── Hero Section ──────────────────────────────────── */
/* Registre Indigo: hero plat, papier chaud, titre monumental, hairline.
   Aucun dégradé. La hiérarchie porte le conviction. */
.hero {
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: var(--hairline);
  box-shadow: none;
  backdrop-filter: blur(var(--blur));
  margin: var(--space-2xl) 0;
}

.hero-title {
  font-family: var(--font-heading);
  font-size: 3rem;
  font-weight: 800;
  margin-bottom: var(--space-md);
  color: var(--text-main);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.hero-subtitle {
  font-size: 1.125rem;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto var(--space-xl) auto;
  line-height: 1.7;
}

/* ─── Product Cards ─────────────────────────────── */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-lg);
  margin: var(--space-xl) 0;
}

.product-card {
  background: var(--card-bg);
  border-radius: var(--radius-lg);
  border: var(--card-border);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(var(--blur));
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 200ms ease, box-shadow 200ms ease;
  cursor: pointer;
}

.product-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.product-card:focus-within {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

.product-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  background: var(--surface-muted);
}

.product-info {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.product-title {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.125rem;
  font-weight: 600;
  margin-bottom: var(--space-xs);
  line-height: 1.3;
}

.product-price {
  font-family: var(--font-heading, 'Outfit', sans-serif);
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--primary-color);
  margin-bottom: var(--space-md);
}

.product-actions {
  margin-top: auto;
  display: flex;
  gap: var(--space-sm);
}

/* ─── Modals ────────────────────────────────────── */
.modal-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 250ms ease;
}

.modal-backdrop.active {
  opacity: 1;
  pointer-events: auto;
}

.modal-content {
  background: var(--card-bg);
  border-radius: var(--radius-xl);
  border: var(--card-border);
  box-shadow: var(--shadow-xl);
  width: 90%;
  max-width: 600px;
  max-height: 90vh;
  overflow-y: auto;
  padding: var(--space-2xl);
  position: relative;
}

.modal-close {
  position: absolute;
  top: var(--space-lg);
  right: var(--space-lg);
  background: transparent;
  border: none;
  font-size: 1.25rem;
  cursor: pointer;
  color: var(--text-muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 200ms ease;
}

.modal-close:hover {
  background: rgba(0,0,0,0.06);
}

.modal-close:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* ─── Cart Drawer ───────────────────────────────── */
.cart-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  max-width: 400px;
  height: 100vh;
  background: var(--card-bg);
  box-shadow: -5px 0 25px rgba(0,0,0,0.15);
  z-index: 1050;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

.cart-drawer.active {
  transform: translateX(0);
}

.cart-header {
  padding: var(--space-xl) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cart-body {
  padding: var(--space-lg);
  flex-grow: 1;
  overflow-y: auto;
}

.cart-footer {
  padding: var(--space-lg);
  border-top: 1px solid var(--color-border);
  background: var(--bg-color);
}

.cart-item {
  display: flex;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--surface-muted);
}

/* Bouton remove (×) — touch target 40×40 minimum (WCAG 2.5.5). L'icône reste
   16px mais le pad augmente la zone cliquable pour mobile low-end. */
.cart-remove-btn {
  min-width: 40px;
  min-height: 40px;
  padding: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-destructive, #ef4444);
  border-radius: var(--radius-sm, 6px);
  transition: background 150ms ease;
}

.cart-remove-btn:hover {
  background: oklch(0.94 0.04 25);
}

.cart-remove-btn:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

/* ─── Dashboard Layout ──────────────────────────── */
.dashboard-wrapper {
  display: flex;
  min-height: calc(100vh - 60px);
}

.sidebar {
  width: 270px;
  background: var(--card-bg);
  border-right: var(--card-border);
  padding: var(--space-xl) var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  flex-shrink: 0;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-radius: var(--radius-md);
  font-weight: 500;
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: all 180ms ease;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px;
}

.sidebar-link:hover, .sidebar-link.active {
  background: oklch(0.94 0.012 264);
  color: var(--color-primary);
}

.sidebar-link.active {
  font-weight: 600;
}

.sidebar-link:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: -2px;
}

.dashboard-main {
  flex-grow: 1;
  padding: var(--space-2xl) var(--space-xl);
  overflow-y: auto;
  min-width: 0;
}

/* ─── Forms ─────────────────────────────────────── */
.form-group {
  margin-bottom: var(--space-lg);
}

.form-label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 0.375rem;
  color: var(--text-main);
  letter-spacing: -0.01em;
}

.form-control {
  width: 100%;
  padding: 0.6875rem 0.875rem;
  border-radius: var(--radius-md);
  border: 1.5px solid var(--color-border);
  background: var(--card-bg);
  font-size: 0.875rem;
  font-family: var(--font-body, 'Inter', sans-serif);
  transition: border-color 180ms ease, box-shadow 180ms ease;
  color: var(--text-main);
  min-height: 44px;
  line-height: 1.5;
}

.form-control::placeholder {
  color: var(--text-muted); opacity: 0.7;
}

.form-control:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px oklch(0.94 0.012 264);
}

.form-control:focus-visible {
  outline: none;
}

textarea.form-control {
  resize: vertical;
  min-height: 88px;
}

select.form-control {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2.5rem;
}

/* ─── Utility Classes ───────────────────────────── */
.text-muted {
  color: var(--text-muted);
}

/* ─── Selectable Card Labels (Category / Animation Checkboxes) ─── */
.selectable-card {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem 1rem;
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 180ms ease;
  background: var(--card-bg);
  min-height: 48px;
}

.selectable-card:hover {
  border-color: var(--color-primary);
  background: oklch(0.94 0.012 264);
}

.selectable-card:has(input:checked) {
  border-color: var(--color-primary);
  background: oklch(0.94 0.012 264);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.selectable-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

/* ─── Info Alert Box ────────────────────────────── */
.alert-info {
  background: oklch(0.95 0.012 264);
  border: 1px solid oklch(0.85 0.025 264);
  color: oklch(0.30 0.08 264);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  font-size: 0.875rem;
  line-height: 1.6;
}

.alert-success {
  background: oklch(0.95 0.025 85);
  border: 1px solid oklch(0.85 0.04 85);
  color: oklch(0.38 0.06 85);
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  font-size: 0.875rem;
}

.alert-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
  padding: 1rem 1.25rem;
  border-radius: var(--radius-md);
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  font-size: 0.875rem;
}

/* ─── Card (Generic) ────────────────────────────── */
.card {
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-xl);
}

/* ─── Onboarding Wizard Step Card ───────────────── */
.onboarding-card {
  background: var(--card-bg);
  padding: var(--space-3xl) var(--space-2xl);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
  border: var(--hairline);
}

.onboarding-card h1 {
  font-size: 1.75rem;
  margin-bottom: var(--space-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.onboarding-card > p {
  color: var(--text-muted);
  margin-bottom: var(--space-xl);
  font-size: 0.875rem;
}

/* ─── Step Dots ─────────────────────────────────── */
.step-dots {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  transition: background 200ms ease, transform 200ms ease;
}

.step-dot.active {
  background: var(--color-primary);
  transform: scale(1.2);
}

.step-dot.inactive {
  background: var(--color-border);
}

/* ─── Focus & Accessibility ─────────────────────── */
:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
}

:focus:not(:focus-visible) {
  outline: none;
}

/* ─── Motion Preferences ────────────────────────── */
/* On préserve les transitions d'état (panier, modals, focus, boutons) en
   raccourcissant leur durée plutôt qu'en la tuant. Seul le scroll-smooth et
   les animations decoratives (apparition, hover-lift) sont réellement tués. */
@media (prefers-reduced-motion: reduce) {
  /* Raccourcir les animations decoratives a 100ms (pas un kill 0.01ms qui detruit
     le feedback d'etat). Les transitions utilitaires (hover, focus, cart drawer)
     restent visibles a 100ms — suffisamment courtes pour respecter la preference
     sans perdre le feedback. */
  .anim-hover-lift,
  .anim-fade-in-up,
  .anim-carousel-mobile,
  .anim-card-flip,
  .anim-shimmer,
  .anim-parallax,
  .anim-magnetic {
    animation-duration: 100ms !important;
    animation-iteration-count: 1 !important;
  }
  /* Transitions d'état conservées mais raccourcies (100ms = perceptible,
     non-intrusif). Pas de !important pour ne pas écraser les composants
     spécifiques qui se réduisent eux-mêmes). */
  .cart-drawer,
  .modal-backdrop,
  .btn,
  .btn-icon,
  .product-card,
  .sidebar-link,
  .selectable-card,
  .form-control,
  .step-dot {
    transition-duration: 100ms !important;
  }
}

/* ─── Responsive: Tablet ────────────────────────── */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--space-md);
  }

  .dashboard-wrapper {
    flex-direction: column;
  }

  .sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--color-border);
    flex-direction: row;
    overflow-x: auto;
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-xs);
  }

  .sidebar-link {
    white-space: nowrap;
    padding: 0.5rem 0.875rem;
    font-size: 0.875rem;
    min-height: 38px;
  }

  .dashboard-main {
    padding: var(--space-xl) var(--space-md);
  }

  .navbar-inner {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }

  .brand-logo {
    font-size: 1.125rem;
  }

  .hero-title {
    font-size: 2.25rem;
  }

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

  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: var(--space-md);
  }

  .product-image {
    height: 160px;
  }

  .product-info {
    padding: var(--space-md);
  }

  .modal-content {
    padding: var(--space-xl);
  }
}

/* ─── Responsive: Mobile ────────────────────────── */
@media (max-width: 480px) {
  .container {
    padding: 0 var(--space-sm);
  }

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

  .hero {
    padding: var(--space-xl) var(--space-md);
  }

  .hero-title {
    font-size: 1.75rem;
  }

  .btn {
    font-size: 0.875rem;
    padding: 0.5rem 1rem;
  }

  .btn-lg {
    font-size: 1rem;
    padding: 0.75rem 1.25rem;
  }

  .onboarding-card {
    padding: var(--space-xl) var(--space-md);
  }
}

/* =========================================================
   Animations Visuelles
   ========================================================= */

/* 1. Apparition au Scroll (Fade In Up) */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.anim-fade-in-up {
  opacity: 0;
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays for grid items */
.products-grid .anim-fade-in-up:nth-child(1) { animation-delay: 0.05s; }
.products-grid .anim-fade-in-up:nth-child(2) { animation-delay: 0.1s; }
.products-grid .anim-fade-in-up:nth-child(3) { animation-delay: 0.15s; }
.products-grid .anim-fade-in-up:nth-child(4) { animation-delay: 0.2s; }
.products-grid .anim-fade-in-up:nth-child(5) { animation-delay: 0.25s; }
.products-grid .anim-fade-in-up:nth-child(6) { animation-delay: 0.3s; }
.products-grid .anim-fade-in-up:nth-child(7) { animation-delay: 0.35s; }
.products-grid .anim-fade-in-up:nth-child(8) { animation-delay: 0.4s; }

/* 2. Effet au Survol (Hover Lift) */
.anim-hover-lift {
  transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.anim-hover-lift:hover {
  transform: translateY(-6px) scale(1.01) !important;
  box-shadow: var(--shadow-xl) !important;
  z-index: 10;
}

/* 3. Carrousel Tactile (Mobile Horizontal Scroll) */
@media (max-width: 768px) {
  .anim-carousel-mobile {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory;
    scroll-padding: var(--space-md);
    padding-bottom: var(--space-md);
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);
    padding-left: var(--space-md);
    padding-right: var(--space-md);
    scrollbar-width: none;
    margin-left: calc(-1 * var(--space-md));
    margin-right: calc(-1 * var(--space-md));
    width: calc(100% + var(--space-md) * 2);
  }
  
  .anim-carousel-mobile::-webkit-scrollbar {
    display: none;
  }

  .anim-carousel-mobile > .product-card {
    min-width: 75vw;
    scroll-snap-align: center;
    flex: 0 0 auto;
  }
}

/* 4. Card-Flip (Premium reveal 180° au survol)
   La product-card contient un .card-front + .card-back. Au survol,
   l'ensemble pivote en rotateY pour révéler un dos avec image zoomée
   ou short description. Respecte prefers-reduced-motion. */
.anim-card-flip {
  perspective: 1000px;
}
.anim-card-flip > .product-card,
.anim-card-flip.product-card {
  transform-style: preserve-3d;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.anim-card-flip:hover > .product-card,
.anim-card-flip.product-card:hover {
  transform: rotateY(180deg) !important;
}
.anim-card-flip .card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  transform: rotateY(180deg);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-md);
  background: var(--card-bg);
  border: var(--card-border);
  border-radius: var(--radius);
}
.anim-card-flip .card-front,
.anim-card-flip .card-front,
.anim-card-flip > .product-card > :not(.card-back) {
  backface-visibility: hidden;
}

/* 5. Shimmer (squelette lumineux pendant le load image)
   Pose un placeholder translucide sur les <img> non chargées.
   Quand l'image finit de charger, l'attribut [data-loaded] est posé
   par JS (storefront runtime) et le shimmer disparaît. */
.anim-shimmer .product-image,
.anim-shimmer img[data-loaded="false"],
.anim-shimmer .image-placeholder {
  background: linear-gradient(
    100deg,
    oklch(0.88 0.008 85 / 0.4) 30%,
    oklch(0.94 0.01 85 / 0.85) 50%,
    oklch(0.88 0.008 85 / 0.4) 70%
  );
  background-size: 200% 100%;
  animation: shimmerSweep 1.4s ease-in-out infinite;
}
@keyframes shimmerSweep {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}
.anim-shimmer img[data-loaded="true"] {
  background: none !important;
  animation: none !important;
}

/* 6. Parallax (profondeur image vs titre au scroll)
   Le JS runtime pose un transform: translateY(Npx) sur l'img
   en fonction du scrollY du viewport. Le CSS fournit juste la
   transition fluide + le overflow:hidden sur le conteneur image. */
.anim-parallax .product-image,
.anim-parallax .image-wrap {
  overflow: hidden;
  position: relative;
}
.anim-parallax .product-image img,
.anim-parallax .image-wrap img {
  transition: transform 0.05s linear;  /* quasi-instant: le JS calcule le ratio */
  will-change: transform;
}

/* 7. Magnetic Hover (la carte se déplace vers le curseur — tactique)
   ANIMATION STOREFRONT réelle: runtime JS pose data-magnet-x/y attrs,
   le CSS les reflète via translate. Pour la PREVIEW dans la page Apparence,
   on simule le mouvement via une animation @keyframes qui reproduit le drift. */
.anim-magnetic.product-card,
.anim-magnetic > .product-card {
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;
  will-change: transform;
}
.anim-magnetic:hover.product-card,
.anim-magnetic:hover > .product-card {
  /* Le runtime JS overrride ce transform au mousemove — celui-ci
     sert de fallback statique (léger tilt) si JS désactivé */
  transform: translate(3px, -3px) !important;
}

/* =========================================================
   Appearance page — Animations grid (mini previews animées)
   =========================================================
   Grid de 7 cartes (1 par animation). Chaque carte est un
   <label><input type="checkbox" name="animations" value="X"></label>
   La mini-preview (.anim-mini) tourne en boucle 3-5s pour montrer
   l'effet réel sans avoir besoin de scroll/cursor sur la page.
   ========================================================= */

/* =========================================================
   Appearance page — Theme toggles grid (cards cliquables)
   =========================================================
   Grid responsive de 6 cartes. Chaque carte est un
   <button> accessible (role="radio") contenant un
   "swatch" — une mini-boutique de démonstration qui
   reflète le thème via data-theme (defini dans themes.css).
   La sélection bascule la classe .selected + met à jour
   #themeIdHolder (voir theme-preview.js).
   ========================================================= */

.theme-toggles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.theme-toggle-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--card-bg);
  border: 2px solid oklch(0.88 0.008 264);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  overflow: hidden;
}

.theme-toggle-card:hover {
  border-color: var(--primary-color, oklch(0.45 0.15 264));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px oklch(0.15 0.008 264 / 0.10);
}

.theme-toggle-card:focus-visible {
  outline: 3px solid var(--primary-color, oklch(0.45 0.15 264));
  outline-offset: 2px;
}

.theme-toggle-card.selected {
  border-color: var(--primary-color, oklch(0.45 0.15 264));
  box-shadow: 0 0 0 4px oklch(0.45 0.15 264 / 0.18), 0 8px 20px oklch(0.15 0.008 264 / 0.14);
}

/* Checkmark overlay */
.theme-toggle-card.selected::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color, oklch(0.45 0.15 264));
  color: var(--color-on-primary);
  font-weight: 800;
  font-size: 0.875rem;
  z-index: 2;
}

/* --- Swatch (mini-boutique preview) --- */
.theme-swatch {
  height: 132px;
  padding: 0;
  border-bottom: 1px solid oklch(0.88 0.008 264);
  overflow: hidden;
}

.theme-swatch-preview {
  height: 100%;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  /* hérite du [data-theme] posé sur cet élément (themes.css):
     --bg-color, --bg-pattern, --text-main, --text-muted, --primary-color,
     --card-bg, --card-border, --radius, --font-heading, --font-body. */
  background-color: var(--bg-color, transparent);
  background-image: var(--bg-pattern, none);
  background-repeat: no-repeat;
  border-radius: 0;
}

/* Le swatch simule une mini-boutique : un "header" + une "card" + un "bouton".
   On transpose les tokens theme-level dans les .ts-* en utilisant les memes
   variables que la vraie boutique (donc le vendeur previsualise reellement
   le rendu final — pas une fausse mockup stylée à part). */

.theme-swatch-preview .ts-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--primary-color, #1E3A8A);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.theme-swatch-preview .ts-price {
  font-family: var(--font-body);
  font-size: 0.875rem;
  color: var(--text-muted, #6b7280);
}

.theme-swatch-preview .ts-btn {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius);
  background: var(--primary-color, #1E3A8A);
  color: var(--color-on-primary);
  font-size: 0.75rem;
  font-weight: 600;
  align-self: flex-start;
  font-family: var(--font-body);
  border: var(--card-border, none);
}

/* Variations per-theme sur le swatch lui-meme.
   On ne reinvente pas les variables — on retaille le layout du swatch
   pour que chaque thème exprime sa personnalité visuelle (radius, ombre,
   edge, blur) au lieu d'avoir 6 fois le meme layout plat.
   NOTE: data-theme est posé sur .theme-swatch-preview lui-meme
   (cf views/dashboard/appearance.ejs), pas sur un parent. Les sélecteurs
   ci-dessous ciblent donc .theme-swatch-preview[data-theme="X"].ts-btn
   — plus direct + plus spécifique. */

[data-theme="glassmorphism"].theme-swatch-preview {
  /* Effet glass : on ajoute une "card" flottante translucide par dessus le bg aurora */
  backdrop-filter: blur(8px) saturate(180%);
  -webkit-backdrop-filter: blur(8px) saturate(180%);
}
[data-theme="glassmorphism"].theme-swatch-preview .ts-btn {
  background: oklch(0.99 0.005 290 / 0.80) !important;
  color: oklch(0.22 0.04 290) !important;
  backdrop-filter: blur(4px);
  border: 1px solid oklch(1 0 0 / 0.6) !important;
}

[data-theme="neumorphism"].theme-swatch-preview .ts-btn {
  /* relief soft : pas de border, ombre extrudée douce */
  box-shadow: 4px 4px 8px oklch(0.85 0.01 230), -4px -4px 8px oklch(0.97 0.012 230) !important;
  background: oklch(0.92 0.010 230) !important;
  color: oklch(0.30 0.02 230) !important;
  border: none !important;
}

[data-theme="vibrant"].theme-swatch-preview .ts-title {
  /* streetwear : tout en CAPS, tracking serré, brutal */
  font-weight: 900 !important;
  text-transform: uppercase;
  letter-spacing: -0.02em !important;
}
[data-theme="vibrant"].theme-swatch-preview .ts-btn {
  background: oklch(0.99 0.012 85) !important;  /* jaune, contraste fort avec le halo noir */
  color: oklch(0.15 0.01 264) !important;
  border: 3px solid oklch(0.20 0.01 264) !important;
  border-radius: 0 !important;
  box-shadow: 4px 4px 0 oklch(0.20 0.01 264) !important;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0;
}

[data-theme="classique"].theme-swatch-preview .ts-title {
  font-family: var(--font-heading);  /* Fraunces */
  font-weight: 600;
  letter-spacing: -0.01em;
}
[data-theme="classique"].theme-swatch-preview .ts-btn {
  background: oklch(0.30 0.04 50) !important;   /* brun chaud, pas bleu SaaS */
  color: oklch(0.96 0.012 70) !important;
  border: none !important;
}

[data-theme="dark_premium"].theme-swatch-preview .ts-btn {
  /* dark premium : CTA devient or (cf DESIGN.md mode sombre) */
  background: var(--color-accent, oklch(0.80 0.055 85)) !important;
  color: oklch(0.14 0.015 264) !important;
  border: 1px solid oklch(0.30 0.02 264) !important;
}

/* --- Meta (name + tag) sous chaque swatch --- */
.theme-toggle-meta {
  padding: 10px 14px 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.theme-toggle-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--text-main);
  font-family: var(--font-heading);
}

.theme-toggle-tag {
  font-size: 0.875rem;
  color: var(--text-muted);
  font-family: var(--font-body);
}

/* Responsive: 2 colonnes sur tablette, 1 sur mobile étroit */
@media (max-width: 640px) {
  .theme-toggles-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .theme-swatch { height: 108px; }
  .theme-toggle-meta { padding: 8px 10px 10px; }
  .theme-toggle-name { font-size: 0.875rem; }
  .theme-toggle-tag { font-size: 0.75rem; }
}

/* =========================================================
   Animations grid (page Apparence) — mini-cards animées
   =========================================================
   Grid de 7 mini-cartes (1 par animation). Chaque carte
   est un <label> contenant un <input type="checkbox"> et
   un .anim-mini — une mini product-card stylisée qui joue
   en boucle (3-5s) l'effet réel pour simuler l'apparence
   finale sur le storefront. Pas besoin de JS pour les previews:
   les @keyframes tournent en boucle éternelle.
   ========================================================= */

.animations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}

.animation-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--card-bg);
  border: 2px solid oklch(0.88 0.008 264);
  border-radius: 12px;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-body);
  color: inherit;
  transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease;
  overflow: hidden;
}
.animation-card:hover {
  border-color: var(--primary-color, oklch(0.45 0.15 264));
  transform: translateY(-2px);
  box-shadow: 0 6px 16px oklch(0.15 0.008 264 / 0.10);
}
.animation-card:focus-within {
  outline: 3px solid var(--primary-color, oklch(0.45 0.15 264));
  outline-offset: 2px;
}
.animation-card.checked {
  border-color: var(--primary-color, oklch(0.45 0.15 264));
  box-shadow: 0 0 0 4px oklch(0.45 0.15 264 / 0.18), 0 8px 20px oklch(0.15 0.008 264 / 0.14);
}
.animation-card.checked::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--primary-color, oklch(0.45 0.15 264));
  color: var(--color-on-primary);
  font-weight: 800;
  font-size: 0.875rem;
  z-index: 2;
}
/* Masque l'input checkbox (présent pour soumission du form) */
.animation-card input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
  pointer-events: none;
}

/* Mini product-card simulée qui joue l'effet en boucle */
.anim-mini {
  height: 100px;
  padding: 10px;
  border-bottom: 1px solid oklch(0.88 0.008 264);
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 6px;
  background: oklch(0.96 0.008 85);
}
.anim-mini-frame {
  /* mini-visuel image placeholder */
  flex: 1 1 auto;
  height: 48px;
  border-radius: 4px;
  background: oklch(0.85 0.015 264);
  position: relative;
  overflow: hidden;
}
.anim-mini-title {
  height: 8px;
  width: 70%;
  border-radius: 2px;
  background: oklch(0.55 0.015 264 / 0.6);
}
.anim-mini-price {
  height: 8px;
  width: 35%;
  border-radius: 2px;
  background: oklch(0.55 0.015 264 / 0.4);
}

/* --- Keyframes de preview par animation --- */

/* 1. Scroll (fade-in-up en boucle) */
.anim-mini-scroll .anim-mini-frame,
.anim-mini-scroll .anim-mini-title,
.anim-mini-scroll .anim-mini-price {
  opacity: 0;
  animation: animPreviewFadeInUp 3s ease-in-out infinite;
}
.anim-mini-scroll .anim-mini-title  { animation-delay: 0.3s; }
.anim-mini-scroll .anim-mini-price  { animation-delay: 0.5s; }
@keyframes animPreviewFadeInUp {
  0%   { opacity: 0; transform: translateY(20px); }
  25%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}

/* 2. Hover (lift en boucle) */
.anim-mini-hover .anim-mini-frame {
  animation: animPreviewLift 2.5s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
.anim-mini-hover::after {
  /* petit curseur simulé en haut à gauche */
  content: "";
  position: absolute;
  top: 6px;
  right: 14px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary-color, #1E3A8A);
  opacity: 0.55;
  animation: animPreviewCursorFade 2.5s ease-in-out infinite;
}
@keyframes animPreviewLift {
  0%, 40%   { transform: translateY(0); box-shadow: none; }
  60%       { transform: translateY(-8px); box-shadow: 0 8px 24px oklch(0.15 0.008 264 / 0.18); }
  100%      { transform: translateY(0); box-shadow: none; }
}
@keyframes animPreviewCursorFade {
  0%, 50%   { opacity: 0; }
  70%, 90%  { opacity: 0.6; }
  100%      { opacity: 0; }
}

/* 3. Carousel (slider horizontal en boucle) */
.anim-mini-carousel {
  flex-direction: row;
  padding: 8px;
  gap: 4px;
}
.anim-mini-carousel .anim-mini-frame {
  min-width: 38px;
  width: 38px;
  height: 56px;
  flex: 0 0 auto;
  animation: animPreviewCarousel 2.4s ease-in-out infinite;
}
.anim-mini-carousel .anim-mini-frame:nth-child(1) { animation-delay: 0s; }
.anim-mini-carousel .anim-mini-frame:nth-child(2) { animation-delay: 0.1s; }
.anim-mini-carousel .anim-mini-frame:nth-child(3) { animation-delay: 0.2s; }
.anim-mini-carousel .anim-mini-carousel-meta {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
}
.anim-mini-carousel .anim-mini-price { width: 60%; }
@keyframes animPreviewCarousel {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-6px) scale(1.08); }
  100% { transform: translateX(0); }
}

/* 4. Card-flip (pivot 180° en boucle) */
.anim-mini-card-flip .anim-mini-frame {
  transform-style: preserve-3d;
  animation: animPreviewFlip 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  background: linear-gradient(135deg, oklch(0.55 0.15 264), oklch(0.45 0.15 264));
}
.anim-mini-card-flip .anim-mini-frame::after {
  content: "Détails";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: var(--color-on-primary);
  font-family: var(--font-body);
  background: oklch(0.28 0.10 264);
  backface-visibility: hidden;
  transform: rotateY(180deg);
  border-radius: 4px;
}
@keyframes animPreviewFlip {
  0%, 30% { transform: rotateY(0); }
  50%     { transform: rotateY(180deg); }
  70%, 100% { transform: rotateY(0); }
}

/* 5. Shimmer (dégradé qui balaie en boucle) */
.anim-mini-shimmer .anim-mini-frame {
  background: linear-gradient(
    100deg,
    oklch(0.85 0.015 264) 30%,
    oklch(0.97 0.01 85) 50%,
    oklch(0.85 0.015 264) 70%
  );
  background-size: 200% 100%;
  animation: animPreviewShimmer 1.4s ease-in-out infinite;
}
@keyframes animPreviewShimmer {
  0%   { background-position: -150% 0; }
  100% { background-position: 150% 0; }
}

/* 6. Parallax (image qui drift en boucle) */
.anim-mini-parallax .anim-mini-frame {
  background-size: 100% 130%;
  background-position: 50% 0;
  animation: animPreviewParallax 3s ease-in-out infinite;
}
@keyframes animPreviewParallax {
  0%, 100% { background-position: 50% 0%; }
  50%      { background-position: 50% 100%; }
}

/* 7. Magnetic (décalage vers un point fixe en boucle) */
.anim-mini-magnetic .anim-mini-frame {
  animation: animPreviewMagnetic 2.8s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}
@keyframes animPreviewMagnetic {
  0%, 70%   { transform: translate(0, 0); }
  85%       { transform: translate(4px, -4px) rotate(2deg); }
  100%      { transform: translate(0, 0); }
}

/* Meta (name + tag) sous chaque mini-preview */
.animation-card-meta {
  padding: 8px 10px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.animation-card-name {
  font-weight: 700;
  font-size: 0.875rem;
  color: var(--text-main);
  font-family: var(--font-heading);
}
.animation-card-tag {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: var(--font-body);
}

/* Respect prefers-reduced-motion (accessibility) */
@media (prefers-reduced-motion: reduce) {
  .anim-mini-scroll  .anim-mini-frame,
  .anim-mini-scroll  .anim-mini-title,
  .anim-mini-scroll  .anim-mini-price,
  .anim-mini-hover   .anim-mini-frame,
  .anim-mini-carousel .anim-mini-frame,
  .anim-mini-card-flip .anim-mini-frame,
  .anim-mini-shimmer .anim-mini-frame,
  .anim-mini-parallax .anim-mini-frame,
  .anim-mini-magnetic .anim-mini-frame {
    animation: none !important;
  }
}

/* Responsive */
@media (max-width: 640px) {
  .animations-grid {
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
  }
  .anim-mini { height: 88px; }
  .animation-card-meta { padding: 6px 8px 8px; }
  .animation-card-name { font-size: 0.875rem; }
  .animation-card-tag { font-size: 0.75rem; }
}




/* ─── P2-7: Auto dark mode detection ──────────────────────
   Si l'utilisateur OS a demandé dark ET qu'aucun thème vendor
   n'est posé (body sans data-theme — page plateforme, login,
   register, admin), on applique les tokens dark_premium. Les
   pages storefront (qui ont data-theme) ne sont pas affectées.
   ───────────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
  body:not([data-theme]) {
    --bg-color: oklch(0.14 0.015 264);
    --card-bg: oklch(0.19 0.015 264);
    --card-border: 1px solid oklch(0.30 0.02 264);
    --text-main: oklch(0.95 0.012 85);
    --text-muted: oklch(0.65 0.020 264);
    --color-background: oklch(0.14 0.015 264);
    --color-foreground: oklch(0.97 0.012 85);
    --color-border: oklch(0.30 0.02 264);
    --surface-muted: oklch(0.25 0.015 264);
    --color-on-primary: oklch(0.14 0.015 264);
  }
  body:not([data-theme]) .navbar,
  body:not([data-theme]) .product-card,
  body:not([data-theme]) .form-control {
    background: var(--card-bg);
    border-color: var(--color-border);
    color: var(--text-main);
  }
  body:not([data-theme]) .btn-primary {
    background: var(--color-accent);
    color: oklch(0.14 0.015 264);
  }
  body:not([data-theme]) .btn-outline {
    background: oklch(0.19 0.015 264);
    border-color: oklch(0.30 0.02 264);
    color: var(--text-main);
  }
  body:not([data-theme]) a,
  body:not([data-theme]) .brand-logo {
    color: var(--text-main);
  }
}