/* ===================================
   CSS RESET
   =================================== */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* ===================================
   CSS VARIABLES - LIGHT & DARK MODE
   =================================== */
:root {
  /* Mode Light (par défaut) */
  --color-primary: #2563eb;
  --color-secondary: #0a0a0a;
  --color-tertiary: #757783;
  --color-white: #ffffff;
  --color-bg-light: #f8f9fa;
  --color-bg-card: #ffffff;
  --color-bg-secondary: #f3f4f6;
  --color-bg-hover: #f9fafb;
  --color-border: #e5e7eb;
  --color-text-dark: #1f2937;
  --color-text-light: #6b7280;
  --color-text-muted: #9ca3af;
  --color-success: #10b981;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-blue-light: #eff6ff;
  --color-info: #3b82f6;
  
  /* Couleurs spécifiques par composant */
  --sidebar-bg: #ffffff;
  --sidebar-text: #1f2937;
  --sidebar-hover: #f9fafb;
  --sidebar-border: #e5e7eb;
  
  --header-bg: #ffffff;
  --header-text: #1f2937;
  --header-border: #e5e7eb;
  
  --card-bg: #ffffff;
  --card-text: #1f2937;
  --card-border: #e5e7eb;
  
  --input-bg: #ffffff;
  --input-border: #d1d5db;
  --input-text: #1f2937;
  --input-placeholder: #9ca3af;
  
  --table-header-bg: #f9fafb;
  --table-row-hover: #f9fafb;
  --table-border: #e5e7eb;
  
  --modal-bg: #ffffff;
  --modal-overlay: rgba(0, 0, 0, 0.5);
  
  --dropdown-bg: #ffffff;
  --dropdown-hover: #f9fafb;
  --dropdown-border: #e5e7eb;
  
  --badge-bg-info: #dbeafe;
  --badge-text-info: #1e40af;
  --badge-bg-success: #d1fae5;
  --badge-text-success: #065f46;
  --badge-bg-warning: #fef3c7;
  --badge-text-warning: #92400e;
  --badge-bg-danger: #fee2e2;
  --badge-text-danger: #991b1b;

  /* Typography */
  --font-family: "DM Sans", sans-serif;
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */
  --font-size-3xl: 2rem; /* 32px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  /* Spacing */
  --spacing-xs: 0.25rem; /* 4px */
  --spacing-sm: 0.5rem; /* 8px */
  --spacing-md: 1rem; /* 16px */
  --spacing-lg: 1.5rem; /* 24px */
  --spacing-xl: 2rem; /* 32px */
  --spacing-2xl: 3rem; /* 48px */

  /* Borders */
  --border-radius-sm: 0.375rem; /* 6px */
  --border-radius-md: 0.5rem; /* 8px */
  --border-radius-lg: 0.75rem; /* 12px */
  --border-radius-xl: 1rem; /* 16px */

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);

  /* Layout */
  --sidebar-width: 310px;
  --header-height: 80px;
}

/* Mode Dark */
[data-theme="dark"] {
  /* Couleurs principales inversées */
  --color-secondary: #f9fafb;
  --color-tertiary: #9ca3af;
  --color-bg-light: #0f172a;
  --color-bg-card: #1e293b;
  --color-bg-secondary: #334155;
  --color-bg-hover: #334155;
  --color-border: #334155;
  --color-text-dark: #f9fafb;
  --color-text-light: #cbd5e1;
  --color-text-muted: #94a3b8;
  --color-blue-light: #1e3a8a;
  
  /* Composants - Mode Dark */
  --sidebar-bg: #1e293b;
  --sidebar-text: #f9fafb;
  --sidebar-hover: #334155;
  --sidebar-border: #334155;
  
  --header-bg: #1e293b;
  --header-text: #f9fafb;
  --header-border: #334155;
  
  --card-bg: #1e293b;
  --card-text: #f9fafb;
  --card-border: #334155;
  
  --input-bg: #0f172a;
  --input-border: #475569;
  --input-text: #f9fafb;
  --input-placeholder: #64748b;
  
  --table-header-bg: #0f172a;
  --table-row-hover: #334155;
  --table-border: #334155;
  
  --modal-bg: #1e293b;
  --modal-overlay: rgba(0, 0, 0, 0.7);
  
  --dropdown-bg: #1e293b;
  --dropdown-hover: #334155;
  --dropdown-border: #334155;
  
  --badge-bg-info: #1e3a8a;
  --badge-text-info: #bfdbfe;
  --badge-bg-success: #064e3b;
  --badge-text-success: #a7f3d0;
  --badge-bg-warning: #78350f;
  --badge-text-warning: #fde68a;
  --badge-bg-danger: #7f1d1d;
  --badge-text-danger: #fecaca;
  
  /* Shadows plus prononcées en mode dark */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
}

/* ===================================
   BASE STYLES
   =================================== */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-normal);
  line-height: 1.5;
  color: var(--color-text-dark);
  background-color: var(--color-bg-light);
  display: flex;
  min-height: 100vh;
  transition: background-color 0.3s ease, color 0.3s ease;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

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

ul,
ol {
  list-style: none;
}

/* ===================================
   SIDEBAR
   =================================== */
.sidebar {
  width: var(--sidebar-width);
  background-color: var(--sidebar-bg);
  color: var(--sidebar-text);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 100;
  border-right: 1px solid var(--sidebar-border);
  overflow-y: scroll;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.sidebar__logo {
  margin-bottom: var(--spacing-2xl);
  padding: var(--spacing-md) 0;
  display: flex;
  justify-content: center;
}

.sidebar__logo-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
}

.sidebar__logo-img {
  height: 32px;
  /* width: 150px; */
  transition: all 0.3s ease, filter 0.3s ease;
}

/* En mode sombre : inverser les couleurs pour rendre le texte blanc */
[data-theme="dark"] .sidebar__logo-img {
  filter: brightness(1.2) invert(1) hue-rotate(180deg);
}

.sidebar__logo-img--default {
  display: block;
}

.sidebar__logo-img--collapsed {
  display: none;
  /* width: 32px; */
  height: 32px;
}

.sidebar__nav {
  flex: 1;
  display: flex;
  flex-direction: column;
}

.sidebar__section {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
}

.sidebar__section-title {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 0 var(--spacing-md);
}

.sidebar__spacer {
  flex: 1;
}

.sidebar__menu {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.sidebar__item {
  border-radius: var(--border-radius-md);
  transition: background-color 0.2s ease;
}

.sidebar__item--active {
  background-color: var(--color-primary);
}

.sidebar__item--active .sidebar__link {
  color: var(--color-white);
}

.sidebar__item:hover:not(.sidebar__item--active) {
  background-color: var(--sidebar-hover);
}

.sidebar__link {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  color: var(--sidebar-text);
  transition: all 0.2s ease;
}

.sidebar__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--color-text-dark);
}

.sidebar__item--active .sidebar__icon {
  color: var(--color-white);
}

.sidebar__text {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.sidebar__badge {
  margin-left: auto;
  background: #ef4444;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  min-width: 20px;
  text-align: center;
}

/* Section promotionnelle sidebar */
.sidebar__promo {
  padding: var(--spacing-md);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-md);
  background: #e0eeff;
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

[data-theme="dark"] .sidebar__promo {
  background: rgba(37, 99, 235, 0.15);
}

.sidebar__promo-link {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  text-decoration: none;
  transition: all 0.2s ease;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
}

.sidebar__promo-link--shopify {
  color: #10b981;
  background: transparent;
  padding: 0 1px;
  font-size: 1.075em;
}

.sidebar__promo-link--shopify:hover {
  color: #059669;
  background: rgba(16, 185, 129, 0.1);
}

[data-theme="dark"] .sidebar__promo-link--shopify {
  color: #34d399;
}

[data-theme="dark"] .sidebar__promo-link--shopify:hover {
  color: #10b981;
  background: rgba(16, 185, 129, 0.2);
}

.sidebar__promo-link--training {
  background: var(--color-primary);
  color: var(--color-white);
}

.sidebar__promo-link--training:hover {
  background: #1d4ed8;
}

.sidebar__promo-link--plan,
.sidebar__promo-link--upgrade {
  color: var(--color-text-dark);
  background: transparent;
  transition: all 0.2s ease, color 0.3s ease, background-color 0.3s ease;
}

[data-theme="dark"] .sidebar__promo-link--plan,
[data-theme="dark"] .sidebar__promo-link--upgrade {
  color: var(--sidebar-text);
}

.sidebar__promo-link--plan:hover,
.sidebar__promo-link--upgrade:hover {
  background: var(--color-bg-light);
}

[data-theme="dark"] .sidebar__promo-link--plan:hover,
[data-theme="dark"] .sidebar__promo-link--upgrade:hover {
  background: rgba(255, 255, 255, 0.1);
}

.sidebar__promo-icon {
  flex-shrink: 0;
}

.sidebar__promo-text {
  flex: 1;
  white-space: nowrap;
}

.sidebar__promo-subscription {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.sidebar__promo-trial-container {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.sidebar__promo-trial-info {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
}

.sidebar__promo-trial-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--color-bg-light);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  flex-shrink: 0;
  transition: background-color 0.3s ease, color 0.3s ease;
}

[data-theme="dark"] .sidebar__promo-trial-number {
  background: rgba(255, 255, 255, 0.1);
  color: var(--sidebar-text);
}

.sidebar__promo-trial-text {
  font-size: var(--font-size-xs);
  color: var(--color-secondary);
  line-height: 1.4;
  transition: color 0.3s ease;
}

/* ===================================
   MAIN CONTENT
   =================================== */
.main-content {
  margin-left: var(--sidebar-width);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  /* Empêcher le débordement horizontal, autoriser le scroll vertical */
  min-width: 0;
  overflow-x: hidden;
  overflow-y: auto;
}

/* ===================================
   HEADER
   =================================== */
.header {
  min-height: var(--header-height);
  background-color: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--spacing-xl);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.header__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-medium);
  color: var(--header-text);
  transition: color 0.3s ease;
}

.header__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
}

.header__search {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background-color: var(--color-bg-light);
  padding: var(--spacing-sm) var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  max-width: 300px;
}

.header__search-icon {
  width: 18px;
  height: 18px;
  opacity: 0.5;
}

.header__search-input {
  border: none;
  background: none;
  outline: none;
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
  width: 100%;
}

.header__search-input::placeholder {
  color: var(--color-text-light);
}

.header__icon-btn {
  position: relative;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-md);
  transition: background-color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header__icon-btn:hover {
  background-color: var(--color-bg-light);
}

.header__icon-btn img,
.header__icon-btn svg {
  width: 25px;
  height: 25px;
  color: var(--color-text-dark);
}

.header__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  background-color: var(--color-danger);
  border-radius: 50%;
  border: 2px solid var(--color-white);
}

.header__user {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  cursor: pointer;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-md);
  transition: background-color 0.2s ease;
}

.header__user:hover {
  background-color: var(--color-bg-light);
}

.header__avatar {
  width: 40px;
  height: 40px;
  border-radius: 16px;
}

.header__user-info {
  display: flex;
  flex-direction: column;
}

.header__user-name {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

.header__user-role {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
}

.header__arrow {
  width: 16px;
  height: 16px;
  opacity: 0.5;
  color: var(--color-text-dark);
  transition: transform 0.2s ease;
}

.header__user-wrapper {
  position: relative;
}

.header__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: var(--dropdown-bg);
  border-radius: var(--border-radius-lg);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--dropdown-border);
  min-width: 240px;
  padding: var(--spacing-sm);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.2s ease, background-color 0.3s ease;
  z-index: 1000;
}

.header__dropdown--active {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.header__dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-md);
  color: var(--card-text);
  text-decoration: none;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease, color 0.3s ease;
  cursor: pointer;
  width: 100%;
  border: none;
  background: none;
  text-align: left;
  white-space: nowrap;
}

.header__dropdown-item img,
.header__dropdown-item svg {
  width: 16px;
  height: 16px;
  opacity: 0.6;
  color: currentColor;
}

.header__dropdown-item:hover {
  background-color: var(--dropdown-hover);
}

.header__dropdown-item--danger {
  color: var(--color-danger);
}

.header__dropdown-item--danger:hover {
  background-color: #fee2e2;
}

.header__dropdown-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: var(--spacing-sm) 0;
}

/* ===================================
   TRIAL EXPIRED BANNER
   =================================== */
.trial-expired-banner {
  background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%);
  padding: var(--spacing-md) var(--spacing-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.1), 0 2px 4px -1px rgba(220, 38, 38, 0.06);
  animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.trial-expired-banner__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

.trial-expired-banner__icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.trial-expired-banner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.trial-expired-banner__text strong {
  color: var(--color-white);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.01em;
}

.trial-expired-banner__text span {
  color: rgba(255, 255, 255, 0.9);
  font-size: var(--font-size-sm);
}

.trial-expired-banner__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background-color: var(--color-white);
  color: #dc2626;
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  border-radius: var(--border-radius-md);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}

.trial-expired-banner__btn:hover {
  background-color: #fef2f2;
  transform: translateY(-1px);
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

/* Responsive */
@media (max-width: 768px) {
  .trial-expired-banner {
    flex-direction: column;
    padding: var(--spacing-md);
    text-align: center;
  }
  
  .trial-expired-banner__content {
    flex-direction: column;
    text-align: center;
  }
  
  .trial-expired-banner__text {
    align-items: center;
  }
  
  .trial-expired-banner__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ===================================
   DASHBOARD
   =================================== */
.dashboard {
  flex: 1;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* ===================================
   HERO SECTION
   =================================== */
.hero__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin-bottom: var(--spacing-xl);
  text-align: center;
}

/* ===================================
   VIDEO CARD
   =================================== */
.video-card {
  max-width: 700px;
  margin: 0 auto;
  padding: 10px;
  background-color: #2563eb1a;
  border-radius: var(--border-radius-xl);
}

.video-card__player {
  position: relative;
  border-radius: var(--border-radius-xl);
  overflow: hidden;
  background-color: var(--color-secondary);
  aspect-ratio: 16 / 9;
}

.video-card__thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.video-card__overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.1),
    rgba(0, 0, 0, 0.3)
  );
}

.video-card__play {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.video-card__play:hover {
  background-color: rgba(255, 255, 255, 0.6);
  transform: scale(1.1);
}

.video-card__controls {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-md);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
}

.video-card__control {
  color: white;
  padding: var(--spacing-xs);
  transition: opacity 0.2s ease;
}

.video-card__control:hover {
  opacity: 0.8;
}

.video-card__progress {
  flex: 1;
  height: 4px;
  background-color: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
  overflow: hidden;
}

.video-card__progress-bar {
  height: 100%;
  width: 0%;
  background-color: var(--color-primary);
  border-radius: 2px;
  transition: width 0.1s linear;
}

.video-card__time {
  font-size: var(--font-size-xs);
  color: white;
  font-weight: var(--font-weight-medium);
}

.video-card__placeholder {
  cursor: pointer;
  position: relative;
  width: 100%;
  height: 100%;
}

.video-card__placeholder:hover .video-card__play {
  background-color: rgba(255, 255, 255, 0.7);
  transform: scale(1.15);
}

#modalVideoContainer {
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#modalVideoContainer:empty::before {
  content: "Chargement...";
  color: var(--color-text-light);
  font-size: var(--font-size-base);
}

/* ===================================
   ACTION PLAN
   =================================== */
.action-plan {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-xl);
  border: 1px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.action-plan__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-xl);
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.action-plan__title-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.action-plan__icon {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
}

.action-plan__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.action-plan__progress {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.action-plan__progress-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  white-space: nowrap;
  transition: color 0.3s ease;
}

.action-plan__progress-number {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.action-plan__progress-bar {
  width: 200px;
  height: 8px;
  background-color: var(--color-bg-light);
  border-radius: 4px;
  position: relative;
  transition: background-color 0.3s ease;
}

[data-theme="dark"] .action-plan__progress-bar {
  background-color: rgba(255, 255, 255, 0.1);
}

.action-plan__progress-fill {
  height: 100%;
  background-color: var(--color-primary);
  border-radius: 4px;
  transition: width 0.3s ease;
  position: relative;
}

.action-plan__progress-dot {
  position: absolute;
  right: -8px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-color: var(--card-bg);
  border: 4px solid var(--color-primary);
  border-radius: 50%;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

/* ===================================
   CHECKLIST
   =================================== */
.checklist {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.checklist__item {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-left: 4px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  transition: all 0.2s ease;
  position: relative;
}

.checklist__item:hover {
  box-shadow: var(--shadow-sm);
}

.checklist__item--completed {
  border-left-color: var(--color-primary);
  background-color: var(--color-bg-light);
}

/* Hide default checkbox */
.checklist__checkbox {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

/* Custom checkbox label */
.checklist__checkbox-label {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  border: 2px solid var(--color-border);
  background-color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

/* Checkbox checked state */
.checklist__checkbox:checked + .checklist__checkbox-label {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Checkmark icon */
.checklist__checkbox:checked + .checklist__checkbox-label::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 3px;
  width: 6px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.checklist__checkbox-label:hover {
  border-color: var(--color-primary);
}

.checklist__content {
  flex: 1;
}

.checklist__title {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
}

.checklist__description {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

/* ===================================
   BUTTONS
   =================================== */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  white-space: nowrap;
}

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

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

.btn--secondary {
  background-color: #f3f4f6;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.btn--secondary:hover {
  background-color: #e5e7eb;
  border-color: #d1d5db;
}

.btn--success {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
  color: var(--color-white);
}

.btn--success:hover {
  background: linear-gradient(135deg, #16a34a 0%, #15803d 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

.btn--warning {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: var(--color-white);
}

.btn--warning:hover {
  background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

.btn--full-width {
  width: 100%;
}

.btn__icon {
  margin-right: 8px;
}

.btn__icon--spinning {
  animation: spin 1s linear infinite;
}

.reset-quota-form {
  width: 100%;
}

.btn--outline {
  background-color: transparent;
  border: 1px solid var(--color-border);
  color: var(--color-text-dark);
}

.btn--outline:hover {
  background-color: var(--color-bg-light);
  border-color: var(--color-primary);
}

.btn--sm {
  padding: var(--spacing-sm) var(--spacing-md);
  font-size: var(--font-size-xs);
}

.btn img,
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ===================================
   TRIAL BANNER
   =================================== */
.trial-banner {
  background-image: url("../assets/icons/subscribe bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg) var(--spacing-xl);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
}

.trial-banner__icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-primary);
}

.trial-banner__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

.trial-banner__text {
  font-size: var(--font-size-lg);
  color: var(--color-text-dark);
  font-weight: var(--font-weight-bold);
}

.trial-banner .btn {
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.trial-banner .btn:hover {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
}

.unlock-access-btn {
  font-weight: var(--font-weight-bold);
}

.download-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: var(--border-radius-md);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
}

.download-btn--primary {
  background-color: var(--color-primary);
  color: white;
  border: 2px solid var(--color-primary);
}

.download-btn--primary:hover {
  background-color: #2563eb;
  border-color: #2563eb;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
}

.download-btn--secondary {
  background-color: var(--card-bg);
  color: var(--card-text);
  border: 2px solid var(--card-border);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.download-btn--secondary:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--card-border);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .download-btn--secondary:hover {
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.05);
}

/* ===================================
   DEV/PROD SYNC CARDS
   =================================== */

.sync-action-card {
  background: var(--card-bg);
  border: 2px solid var(--card-border);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  transition: all 0.2s, background-color 0.3s ease, border-color 0.3s ease;
}

.sync-action-card:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
}

.sync-action-card__header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  color: var(--color-primary);
}

.sync-action-card__header h4 {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.sync-action-card__description {
  color: var(--color-text-light);
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.sync-action-card__button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ===================================
   RESPONSIVE DESIGN
   =================================== */

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --sidebar-width: 220px;
  }

  .header {
    padding: 0 var(--spacing-lg);
  }

  .dashboard {
    padding: var(--spacing-lg);
  }

  .action-plan__header {
    flex-direction: column;
    align-items: flex-start;
  }

  .action-plan__progress-bar {
    width: 150px;
  }
}

/* Mobile */
/* Responsive adjustments for header subtitle */
@media (max-width: 900px) {
  .header__subtitle {
    display: none;
  }

  .header__left {
    flex: 1;
    min-width: 0;
  }

  .header__title {
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ANCIEN COMPORTEMENT MOBILE DÉSACTIVÉ - REMPLACÉ PAR LE MENU HAMBURGER */
/* @media (max-width: 768px) {
  .sidebar {
    width: 60px;
    padding: var(--spacing-sm);
  }

  .sidebar__logo {
    padding: var(--spacing-sm) 0;
    margin-bottom: var(--spacing-xl);
  }

  .sidebar__logo-img--default {
    display: none;
  }

  .sidebar__logo-img--collapsed {
    display: block;
  }

  .sidebar__logo {
    margin-bottom: var(--spacing-xl);
    padding: var(--spacing-sm) 0;
  }

  .sidebar__text,
  .sidebar__section-title {
    display: none;
  }

  .sidebar__promo {
    display: none;
  }

  .sidebar__link {
    justify-content: center;
    padding: var(--spacing-sm);
  }

  .main-content {
    margin-left: 60px;
  } */

@media (max-width: 768px) {
  /* Uniquement les styles pour le header et le contenu */
  .header {
    height: auto;
    padding-inline: var(--spacing-md);
    padding-block: var(--spacing-sm);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    position: sticky;
  }

  .header__title {
    font-size: var(--font-size-base);
    text-align: left;
    margin: 0;
    flex: 1;
    padding-left: 0;
  }

  .header__right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--spacing-md);
    flex-shrink: 0;
  }

  .header__search {
    /* width: 100%; */
    flex: 1;
    max-width: none;
    margin-top: var(--spacing-sm);
  }

  .header__user-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .header__user {
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
  }

  .header__avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
  }

  .header__user-info {
    display: none;
  }

  .header__arrow {
    display: none;
  }

  .header__icon-btn {
    position: relative;
    padding: var(--spacing-xs);
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .header__badge {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 8px;
    height: 8px;
    background-color: var(--color-danger);
    border-radius: 50%;
    border: 2px solid var(--color-white);
  }

  .dashboard {
    padding: var(--spacing-md);
  }

  .hero__title {
    font-size: var(--font-size-xl);
  }

  .video-card {
    max-width: 100%;
  }

  .action-plan {
    padding: var(--spacing-lg);
  }

  .action-plan__title {
    font-size: var(--font-size-base);
  }

  .action-plan__progress-bar {
    width: 100px;
  }

  .checklist__item {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .btn {
    width: 100%;
  }

  .trial-banner {
    flex-direction: column;
    text-align: center;
    padding: var(--spacing-lg);
  }
}

/* Small Mobile */
@media (max-width: 480px) {
  .header {
    padding: var(--spacing-xs);
  }

  .header__search {
    width: 100%;
  }

  .header__arrow {
    display: none;
  }

  .header__right {
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    flex-shrink: 0;
  }

  .header__user {
    margin: 0;
    justify-content: center;
    padding: var(--spacing-xs);
  }

  .header__notifications {
    position: absolute;
    top: var(--spacing-sm);
    right: var(--spacing-sm);
  }

  .action-plan__header {
    gap: var(--spacing-md);
  }

  .action-plan__progress {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .action-plan__progress-bar {
    width: 100%;
  }

  .checklist__title {
    font-size: var(--font-size-sm);
  }

  .checklist__description {
    font-size: var(--font-size-xs);
  }
  .trial-banner {
    padding: var(--spacing-md);
  }
  .trial-banner__text {
    font-size: var(--font-size-sm);
  }
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.text-center {
  text-align: center;
}

.flex {
  display: flex;
}

.flex-col {
  flex-direction: column;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.gap-sm {
  gap: var(--spacing-sm);
}

.gap-md {
  gap: var(--spacing-md);
}

.gap-lg {
  gap: var(--spacing-lg);
}

.mt-sm {
  margin-top: var(--spacing-sm);
}

.mt-md {
  margin-top: var(--spacing-md);
}

.mt-lg {
  margin-top: var(--spacing-lg);
}

.mb-sm {
  margin-bottom: var(--spacing-sm);
}

.mb-md {
  margin-bottom: var(--spacing-md);
}

.mb-lg {
  margin-bottom: var(--spacing-lg);
}

/* ===================================
   PRODUCTS PAGE - TOP NICHES
   =================================== */

/* Header variations for products page */
.header__left {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.header__subtitle {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: var(--font-weight-normal);
}

/* Products Page Container */
.products-page {
  flex: 1;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
  /* Empêcher le débordement */
  min-width: 0;
  overflow: hidden;
}

/* ===================================
   FILTERS BAR
   =================================== */
.filters-bar {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-lg);
  flex-wrap: wrap;
  border: 1px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.filters-bar__left {
  display: flex;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  flex: 1;
}

.filters-bar__right {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
  min-width: 140px;
}

.filter-group__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.filter-group__label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-xs);
  transition: color 0.3s ease;
}

.filter-group__select,
.filter-group__input {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--input-text);
  background-color: var(--input-bg);
  transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  width: 100%;
}

.filter-group__select {
  cursor: pointer;
}

.filter-group__input {
  cursor: text;
}

.filter-group__select:hover,
.filter-group__input:hover {
  border-color: var(--color-primary);
}

.filter-group__select:focus,
.filter-group__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Convergence Filter - Dual Handle Progress Bar */
.convergence-filter {
  min-width: 250px;
}

.convergence-filter__progress-container {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: var(--spacing-sm);
  margin-bottom: var(--spacing-xs);
  position: relative;
  height: 24px;
}

.convergence-filter__progress {
  flex: 1;
  height: 6px;
  background-color: #e5e7eb;
  border-radius: 3px;
  position: relative;
}

.convergence-filter__progress-track {
  width: 100%;
  height: 100%;
  position: relative;
}

.convergence-filter__progress-fill {
  height: 100%;
  background-color: var(--color-secondary);
  border-radius: 3px;
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  pointer-events: none;
}

.convergence-filter__handle {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: var(--color-white);
  border: 3px solid var(--color-secondary);
  cursor: grab;
  position: absolute;
  z-index: 10;
  top: 50%;
  transform: translate(-50%, -50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
  transition: box-shadow 0.2s ease, transform 0.1s ease;
}

.convergence-filter__handle:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
  transform: translate(-50%, -50%) scale(1.15);
}

.convergence-filter__handle:active {
  cursor: grabbing;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

.convergence-filter__handle--left {
  left: 10%;
}

.convergence-filter__handle--right {
  left: 90%;
}

.convergence-filter__labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--spacing-xs);
  padding: 0 var(--spacing-xs);
}

.convergence-filter__label-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
}

/* Button Icon */
.btn-icon {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  background-color: var(--card-bg);
  color: var(--card-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

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

.btn-icon img,
.btn-icon svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}

/* Niche Toggle Group */
.niche-toggle-group {
  display: flex;
  gap: var(--spacing-xs);
}

.niche-toggle-btn {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  background-color: var(--card-bg);
  color: var(--card-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
}

.niche-toggle-btn:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-primary);
}

.niche-toggle-btn--active {
  border-color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.05);
  color: var(--color-primary);
  font-weight: var(--font-weight-semibold);
}

.niche-toggle-btn img,
.niche-toggle-btn svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}

/* View Toggle */
.view-toggle {
  display: flex;
  gap: var(--spacing-xs);
  background-color: var(--color-bg-secondary);
  padding: var(--spacing-xs);
  border-radius: var(--border-radius-md);
  transition: background-color 0.3s ease;
}

.view-toggle__btn {
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  background: none;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.view-toggle__btn--active {
  background-color: var(--color-primary);
}

.view-toggle__btn:hover:not(.view-toggle__btn--active) {
  background-color: var(--color-bg-hover);
}

.view-toggle__btn img,
.view-toggle__btn svg {
  width: 20px;
  height: 20px;
  color: var(--color-primary);
}

.view-toggle__btn--active img,
.view-toggle__btn--active svg {
  color: var(--color-white);
}

/* ===================================
   PRODUCTS GRID (Card View)
   =================================== */
.products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--spacing-lg);
  max-width: 100%;
}

.product-card {
  background-color: var(--card-bg);
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--card-border);
  transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
  display: flex;
  flex-direction: column;
  padding: 16px;
  min-height: 360px; /* Hauteur minimale réduite pour meilleure lisibilité */
  height: 100%; /* Prend toute la hauteur disponible */
}

.product-card:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
  border-color: #d1d5db;
}

.product-card__image {
  width: 100%;
  height: 240px;
  overflow: hidden;
  background-color: var(--color-bg-light);
  border-radius: 10px;
  margin-bottom: 20px;
}

.product-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

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

.product-card__content {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.product-card__title {
  font-size: 15px;
  font-weight: var(--font-weight-medium);
  color: var(--card-text);
  line-height: 1.3;
  height: 2.6em; /* Limite à 2 lignes */
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  transition: color 0.3s ease;
}

.product-card__category {
  font-size: 12px;
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  background-color: rgba(37, 99, 235, 0.1);
  padding: 4px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
}

.product-card__price {
  font-size: 18px;
  font-weight: var(--font-weight-bold);
  color: var(--card-text);
  transition: color 0.3s ease;
}

.product-card__trend {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 4px;
}

.product-card__trend img {
  width: 16px;
  height: 16px;
}

.product-card__trend--up {
  color: var(--color-success);
}

.product-card__trend--down {
  color: var(--color-danger);
}

.product-card__stats {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 6px 0;
  padding: 8px;
  background-color: var(--color-bg-secondary);
  border-radius: 10px;
  transition: background-color 0.3s ease;
}

.product-card__stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.product-card__stat-label {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: -1px;
  transition: color 0.3s ease;
}

.product-card__stat-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--spacing-md);
  width: 100%;
}

.product-card__stat-item {
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
  transition: color 0.3s ease;
}

.product-card__stat-item strong {
  font-size: 14px;
  color: var(--card-text);
  font-weight: var(--font-weight-bold);
  transition: color 0.3s ease;
}

.product-card__competition-wrapper {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  margin-top: 2px;
}

.product-card__score {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  padding: 2px 6px;
  border-radius: 4px;
  color: white;
}

.product-card__score--high {
  background-color: var(--color-danger);
}

.product-card__score--medium {
  background-color: var(--color-warning);
}

.product-card__score--low {
  background-color: var(--color-success);
}

.product-card__competition {
  font-size: 11px;
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
}

.product-card__vendors {
  font-size: 13px;
  color: var(--color-text-dark);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: 6px;
}

.product-card__vendors img {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.product-card__competition-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
}

.product-card__score {
  font-size: 11px;
  font-weight: var(--font-weight-bold);
  padding: 4px 8px;
  border-radius: var(--border-radius-xl);
  color: var(--color-white);
}

.product-card__score--high {
  background-color: #ef4444;
}

.product-card__score--medium {
  background-color: #f59e0b;
}

.product-card__score--low {
  background-color: #10b981;
}

.product-card__competition {
  font-size: 11px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

/* Style uniforme pour tous les boutons block dans les cartes produits */
.product-card .btn.btn--block {
  height: 38px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  margin-top: auto; /* Pousse le bouton vers le bas */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px;
  line-height: 1;
}

.product-card .btn.btn--block svg,
.product-card .btn.btn--block img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.btn--block {
  width: 100%;
}

/* ===================================
   PRODUCTS LIST (Table View)
   =================================== */
.products-list {
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--card-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.products-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 100%;
}

.products-table__head {
  background-color: var(--table-header-bg);
  transition: background-color 0.3s ease;
}

.products-table__th {
  text-align: left;
  padding: var(--spacing-md) var(--spacing-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 1px solid var(--table-border);
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.products-table__td {
  padding: var(--spacing-md) var(--spacing-sm);
  border-bottom: 1px solid var(--table-border);
  vertical-align: middle;
  transition: border-color 0.3s ease;
}

.products-table__row {
  transition: background-color 0.2s ease;
}

.products-table__row:hover {
  background-color: var(--table-row-hover);
}

.products-table__img {
  width: 50px;
  height: 50px;
  border-radius: var(--border-radius-md);
  object-fit: cover;
}

.products-table__product {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.products-table__name {
  font-weight: var(--font-weight-medium);
  color: var(--card-text);
  line-height: 1.4;
  transition: color 0.3s ease;
}

.products-table__category {
  font-size: var(--font-size-xs);
  color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.1);
  padding: 4px 8px;
  border-radius: var(--border-radius-sm);
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  width: fit-content;
}

.table-trend {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  display: flex;
  align-items: center;
  gap: 4px;
}

.table-trend img,
.table-trend svg {
  width: 16px;
  height: 16px;
  color: currentColor;
}

.table-vendors {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-sm);
  color: var(--card-text);
  font-weight: var(--font-weight-medium);
  transition: color 0.3s ease;
}

.table-vendors img {
  width: 16px;
  height: 16px;
  opacity: 0.7;
}

.table-saturation {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: 6px;
  width: 100%;
}

.table-saturation__score {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  padding: 3px 6px;
  border-radius: var(--border-radius-xl);
  color: var(--color-white);
  min-width: 24px;
  text-align: center;
}

.table-saturation__score--high {
  background-color: #ef4444;
}

.table-saturation__score--medium {
  background-color: #f59e0b;
}

.table-saturation__score--low {
  background-color: #10b981;
}

.table-saturation__text {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

.keyword-name {
  display: inline-block;
  min-width: 150px;
}

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

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

.table-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.table-badge--high {
  color: var(--color-danger);
  background-color: rgba(239, 68, 68, 0.1);
}

.table-badge--medium {
  color: var(--color-warning);
  background-color: rgba(245, 158, 11, 0.1);
}

.table-badge--low {
  color: var(--color-success);
  background-color: rgba(16, 185, 129, 0.1);
}

/* ===================================
   PAGINATION
   =================================== */
.pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  background-color: var(--card-bg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--card-border);
  flex-wrap: wrap;
  gap: var(--spacing-md);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pagination__info {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.pagination__controls {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.pagination__btn {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  background-color: var(--card-bg);
  color: var(--card-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pagination__btn:hover:not(:disabled) {
  background-color: var(--color-bg-hover);
  border-color: var(--color-primary);
  color: var(--card-text);
}

.pagination__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination__number {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-md);
  background-color: var(--card-bg);
  color: var(--card-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  cursor: pointer;
  transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pagination__number:hover {
  background-color: var(--color-bg-hover);
  border-color: var(--color-primary);
  color: var(--card-text);
}

.pagination__number--active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* Composant pagination personnalisé */
.pagination-container {
  margin-top: var(--spacing-lg);
}

.pagination__per-page {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.pagination__per-page-select {
  padding: 6px 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-md);
  background-color: var(--input-bg);
  color: var(--input-text);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.pagination__per-page-select:hover {
  border-color: var(--color-primary);
}

.pagination__per-page-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.pagination__buttons {
  display: flex;
  gap: var(--spacing-xs);
  align-items: center;
}

.pagination__dots {
  padding: var(--spacing-sm) var(--spacing-xs);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
  user-select: none;
  transition: color 0.3s ease;
}

.pagination__btn--active {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
  cursor: default;
}

.pagination__btn--active:hover {
  background-color: var(--color-primary);
  color: var(--color-white);
  border-color: var(--color-primary);
}

/* ===================================
   RESPONSIVE - PRODUCTS PAGE
   =================================== */

/* Large screens - limit to 4 columns max */
@media (min-width: 1400px) {
  .products-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  }

  .filters-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .filters-bar__left,
  .filters-bar__right {
    width: 100%;
  }

  .filters-bar__right {
    justify-content: space-between;
  }
}

@media (max-width: 768px) {
  .products-page {
    padding: var(--spacing-md);
  }

  .header__left {
    flex: 1;
  }

  .header__subtitle {
    display: none;
  }

  .products-grid {
    grid-template-columns: 1fr;
  }

  .filters-bar__left {
    flex-direction: column;
  }

  .filter-group {
    width: 100%;
  }

  .convergence-filter {
    width: 100%;
  }

  .pagination {
    flex-direction: column;
    text-align: center;
  }

  /* Table responsive adjustments */
  .products-table {
    font-size: var(--font-size-xs);
  }

  .products-table__th,
  .products-table__td {
    padding: var(--spacing-sm);
  }

  /* Ajuster la largeur de la colonne produit sur mobile */
  .products-table__th:nth-child(2),
  .products-table__td:nth-child(2) {
    min-width: 150px;
    max-width: none;
  }

  .products-table__img {
    width: 40px;
    height: 40px;
  }

  .products-table__name {
    font-size: var(--font-size-xs);
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    max-width: none;
  }

  .products-table__category {
    font-size: 10px;
    padding: 2px 6px;
  }
}

@media (max-width: 500px) {
  .pagination {
    padding: var(--spacing-md);
    gap: var(--spacing-sm);
  }

  /* Ajustements supplémentaires pour très petits écrans */
  .products-table__th:nth-child(2),
  .products-table__td:nth-child(2) {
    min-width: 120px;
    width: 40%;
  }

  .products-table__name {
    font-size: 11px;
    line-height: 1.3;
  }

  .pagination__info {
    font-size: var(--font-size-xs);
    text-align: center;
    margin-bottom: var(--spacing-xs);
  }

  .pagination__controls {
    gap: var(--spacing-xs);
    flex-wrap: wrap;
    justify-content: center;
  }

  .pagination__btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    min-width: auto;
  }

  .pagination__number {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-xs);
  }
}

@media (max-width: 400px) {
  .pagination {
    padding: var(--spacing-sm);
  }

  .pagination__info {
    font-size: 10px;
    line-height: 1.2;
  }

  .pagination__controls {
    gap: 2px;
  }

  .pagination__btn {
    padding: 6px 8px;
    font-size: 10px;
  }

  .pagination__number {
    width: 28px;
    height: 28px;
    font-size: 10px;
  }
}

@media (max-width: 480px) {
  .view-toggle {
    width: 100%;
    justify-content: center;
  }

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

/* ===================================
   ANALYSIS PAGE - MOTS CLÉS
   =================================== */
.analysis-page {
  flex: 1;
  padding: var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

/* Conteneur de la page d'analyse (mode recherche uniquement) */
.analysis-page__container {
  max-width: 800px;
  margin: 0 auto;
  padding: 60px 20px;
}

/* Espacement pour la bannière trial */
.trial-banner--spaced {
  margin-bottom: 40px;
}

/* Analysis Search Bar */
.analysis-search {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  background-color: var(--card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--card-border);
  flex-wrap: wrap;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.analysis-search__input-wrapper {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  background-color: var(--input-bg);
  border: 2px solid var(--input-border);
  padding: var(--spacing-lg) var(--spacing-lg);
  border-radius: var(--border-radius-md);
  min-width: 300px;
  max-width: 100%;
  height: 48px;
  transition: all 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.analysis-search__input-wrapper:focus-within {
  border-color: var(--color-primary);
  background-color: var(--card-bg);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.analysis-search__icon {
  width: 20px;
  height: 20px;
  opacity: 0.5;
  color: var(--color-text-dark);
  transition: color 0.3s ease;
}

.analysis-search__input {
  flex: 1;
  border: none;
  background: none;
  outline: none;
  font-size: var(--font-size-lg);
  color: var(--input-text);
  font-family: var(--font-family);
  height: 32px;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.analysis-search__input::placeholder {
  color: var(--input-placeholder);
  transition: color 0.3s ease;
}

.analysis-search__reanalyze-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.analysis-search__last-analysis {
  text-align: center;
}

.analysis-search__last-analysis-label {
  font-size: 12px;
  color: var(--color-text-light);
  display: block;
  transition: color 0.3s ease;
}

.analysis-search__last-analysis-date {
  font-size: 14px;
  color: var(--card-text);
  display: block;
  transition: color 0.3s ease;
}

.analysis-search__quota-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  flex-wrap: wrap;
  justify-content: center;
}

.analysis-search__quota-actions .reset-quota-form {
  width: auto;
  margin: 0;
}

/* Bloc de confirmation d'analyse (niche pas encore analysée) */
.analysis-confirmation {
  text-align: center;
  padding: 60px 20px;
  background: var(--card-bg);
  border-radius: 12px;
  margin-top: 24px;
  transition: background-color 0.3s ease;
}

.analysis-confirmation__icon {
  font-size: 64px;
  margin-bottom: 20px;
}

.analysis-confirmation__title {
  font-size: 24px;
  font-weight: 600;
  color: var(--card-text);
  margin-bottom: 12px;
  transition: color 0.3s ease;
}

.analysis-confirmation__text {
  font-size: 15px;
  color: var(--color-text-light);
  max-width: 600px;
  margin: 0 auto 24px;
  transition: color 0.3s ease;
}

.analysis-confirmation__form {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.analysis-confirmation__btn {
  min-width: 200px;
}

.analysis-confirmation__admin-form {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
  transition: border-color 0.3s ease;
}

.analysis-confirmation__admin-text {
  font-size: 12px;
  color: var(--color-text-light);
  text-align: center;
  margin: 0;
  transition: color 0.3s ease;
}

.analysis-confirmation__warning {
  margin-top: 24px;
  padding: 16px;
  background: #fef2f2;
  border-radius: 8px;
  color: #dc2626;
}

/* Mode sombre - Warning avec fond plus sombre */
[data-theme="dark"] .analysis-confirmation__warning {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
}

.analysis-confirmation__back-btn {
  margin-top: 16px;
}

/* Bloc "Comment ça marche" */
.analysis-howto {
  margin-top: 48px;
  padding: 24px;
  background: var(--color-bg-secondary);
  border-radius: 12px;
  border: 1px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.analysis-howto__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-text);
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.analysis-howto__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.analysis-howto__item {
  display: flex;
  align-items: start;
  gap: 12px;
}

.analysis-howto__number {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: var(--color-primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
}

.analysis-howto__text {
  color: var(--color-text-light);
  line-height: 1.6;
  transition: color 0.3s ease;
}

/* Encart Analyses récentes de l'utilisateur */
.analysis-user-niches {
  margin-top: 24px;
  padding: 24px;
  background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
  border-radius: 12px;
  border: 1px solid #bae6fd;
  transition: background 0.3s ease, border-color 0.3s ease;
}

/* Version dark mode avec gradient adapté */
[data-theme="dark"] .analysis-user-niches {
  background: linear-gradient(135deg, #1e3a8a 0%, #1e40af 100%);
  border: 1px solid #3b82f6;
}

.analysis-user-niches__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-text);
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

.analysis-user-niches__list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.analysis-user-niches__item {
  display: block;
  padding: 14px 16px;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  transition: all 0.2s ease, background-color 0.3s ease, border-color 0.3s ease;
  text-decoration: none;
  cursor: pointer;
}

.analysis-user-niches__item:hover {
  border-color: var(--color-info);
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1);
  transform: translateY(-1px);
}

.analysis-user-niches__item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.analysis-user-niches__item-name {
  font-size: 15px;
  font-weight: 600;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.analysis-user-niches__item-status {
  font-size: 13px;
  font-weight: 500;
}

.analysis-user-niches__item-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.analysis-user-niches__item-keyword {
  color: var(--color-info);
  font-weight: 500;
}

.analysis-user-niches__item-date {
  font-size: 12px;
}

/* Variantes de statut (bordure gauche) */
.analysis-user-niches__item--analyzed {
  border-left: 3px solid #10b981;
}

.analysis-user-niches__item--preanalyzed {
  border-left: 3px solid #3b82f6;
}

.analysis-user-niches__item--pending {
  border-left: 3px solid #f59e0b;
}

.analysis-user-niches__item--in-progress {
  border-left: 3px solid #3b82f6;
  animation: pulse-border 2s ease-in-out infinite;
}

@keyframes pulse-border {
  0%, 100% {
    border-left-color: #3b82f6;
  }
  50% {
    border-left-color: #60a5fa;
  }
}

/* Variantes de statut (couleur du texte) */
.analysis-user-niches__item-status--analyzed {
  color: #10b981;
}

.analysis-user-niches__item-status--preanalyzed {
  color: #3b82f6;
}

.analysis-user-niches__item-status--pending {
  color: #f59e0b;
}

.analysis-user-niches__item-status--in-progress {
  color: #3b82f6;
  font-weight: 500;
}

/* Footer pour le bouton "Voir plus" */
.analysis-user-niches__footer {
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--card-border);
  transition: border-color 0.3s ease;
}

/* Modale de confirmation */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

.modal-content {
  background: white;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  animation: modal-appear 0.2s ease-out;
}

@keyframes modal-appear {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(-10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  border-bottom: 1px solid #e5e7eb;
}

.modal-title {
  font-size: 18px;
  font-weight: 600;
  color: #111827;
  margin: 0;
}

.modal-close {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  transition: background-color 0.2s;
  color: #6b7280;
}

.modal-close:hover {
  background-color: #f3f4f6;
  color: #111827;
}

.modal-body {
  padding: 24px;
}

.modal-text {
  font-size: 14px;
  color: #6b7280;
  margin: 0 0 12px 0;
  line-height: 1.6;
}

.modal-keyword-preview {
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  text-align: center;
  font-size: 16px;
  color: #2563eb;
}

.modal-warning-box {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fef3c7;
  border: 1px solid #fbbf24;
  border-radius: 8px;
}

.modal-warning-icon {
  flex-shrink: 0;
  color: #d97706;
}

.modal-warning-box strong {
  display: block;
  color: #92400e;
  font-size: 14px;
  margin-bottom: 4px;
}

.modal-warning-text {
  font-size: 13px;
  color: #78350f;
  margin: 0;
  line-height: 1.5;
}

/* ============================
   MODAL QUOTA ERROR
   ============================ */

.modal-quota-error {
  display: none;
  margin-top: 16px;
}

.modal-quota-error--visible {
  display: block;
}

.modal-warning-box--error {
  background-color: #fef2f2;
  border-color: #fecaca;
}

.modal-warning-icon--error {
  color: #ef4444;
}

.modal-warning-title--error {
  color: #dc2626;
}

.modal-warning-text--error {
  color: #991b1b;
}

.modal-warning-box--hidden {
  display: none;
}

.quota-remaining-count {
  color: var(--color-success);
}

/* Bouton désactivé (variante) */
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.modal-footer {
  display: flex;
  gap: 12px;
  padding: 16px 24px;
  border-top: 1px solid #e5e7eb;
  justify-content: flex-end;
}

.btn--lg {
  padding: 0 var(--spacing-2xl);
  font-size: var(--font-size-base);
  height: 48px;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn--lg:hover {
  box-shadow: 0 6px 16px rgba(37, 99, 235, 0.4);
  transform: translateY(-1px);
}

/* Niche Score */
.niche-score {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  background-image: url("../assets/icons/niche-score-bg.svg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding: var(--spacing-md);
  border-radius: var(--border-radius-lg);
  color: var(--color-white);
  position: relative;
  min-width: 200px;
}

.niche-score__circle {
  position: relative;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.niche-score__chart {
  width: 48px !important;
  height: 48px !important;
}

.niche-score__percentage {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  color: #1a1a1a;
}

.niche-score__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.niche-score__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: #1a1a1a;
}

/* Mode sombre - Texte "Score de niche" en blanc */
[data-theme="dark"] .niche-score__label {
  color: #ffffff;
}

.niche-score__value {
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: #00c950;
}

/* Cercle de progression dynamique */
.niche-score__circle-wrapper {
  position: relative;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.niche-score__svg {
  position: absolute;
  top: 0;
  left: 0;
}

.niche-score__circle-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.niche-score__percentage {
  font-size: 28px;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

/* Analysis Grid */
/* Conteneur pour la barre de recherche + score (cohérence visuelle) */
.analysis-results-header {
  margin-bottom: var(--spacing-xl);
}

.analysis-grid {
  display: flex;
  flex-direction: row;
  gap: var(--spacing-xl);
  align-items: stretch;
}

.section-title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-lg);
}

/* Keywords Section */
.keywords-section {
  background-color: var(--card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--card-border);
  flex: 1;
  min-width: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

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

.keywords-table thead th {
  text-align: left;
  padding: var(--spacing-md);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--color-border);
}

.keywords-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s ease;
}

.keywords-table tbody tr:hover {
  background-color: var(--color-bg-light);
}

/* Ligne "Voir plus" dans les tableaux de keywords */
.keyword-show-more-row td {
  text-align: center;
  padding: 20px;
  background-color: var(--color-bg-secondary);
  border-top: 1px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.keywords-table tbody tr.selected {
  background-color: rgba(37, 99, 235, 0.05);
}

.keywords-table tbody td {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-dark);
}

.keywords-table input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

/* Container pour le bouton d'export (au-dessus du tableau) */
.keywords-export-container {
  display: none;
  padding: var(--spacing-md);
  background-color: var(--color-bg-light);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  margin-bottom: var(--spacing-md);
  align-items: center;
  gap: var(--spacing-md);
}

.keywords-export-container.visible {
  display: flex;
}

.keywords-export-container__info {
  flex: 1;
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.keywords-export-container__count {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Checkbox "select all" dans le header */
.keywords-table__checkbox-header {
  width: 50px;
  text-align: center;
}

/* Icône dans les boutons */
.btn__icon {
  margin-right: 6px;
}

/* ============================
   TRI DES COLONNES DES TABLEAUX
   ============================ */

.keywords-table thead th.sortable {
  cursor: pointer;
  user-select: none;
  position: relative;
  transition: background-color 0.2s ease;
}

.keywords-table thead th.sortable:hover {
  background-color: rgba(37, 99, 235, 0.05);
}

.keywords-table thead th.sortable .sort-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 6px;
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

.keywords-table thead th.sortable .sort-icon::before {
  content: "⇅";
  font-size: 14px;
  color: var(--color-text-light);
}

.keywords-table thead th.sortable.sort-asc .sort-icon {
  opacity: 1;
}

.keywords-table thead th.sortable.sort-asc .sort-icon::before {
  content: "↑";
  color: var(--color-primary);
}

.keywords-table thead th.sortable.sort-desc .sort-icon {
  opacity: 1;
}

.keywords-table thead th.sortable.sort-desc .sort-icon::before {
  content: "↓";
  color: var(--color-primary);
}

/* ============================
   OPTIONS D'EXPORT CSV
   ============================ */

.csv-export-options {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.csv-export-option {
  display: flex;
  align-items: center;
  padding: var(--spacing-md);
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.csv-export-option:hover {
  border-color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.05);
}

.csv-export-option:has(input:checked) {
  border-color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.1);
}

.csv-export-option__radio {
  width: 20px;
  height: 20px;
  margin-right: var(--spacing-md);
  cursor: pointer;
  accent-color: var(--color-primary);
  flex-shrink: 0;
}

.csv-export-option__content {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex: 1;
}

.csv-export-option__icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

.csv-export-option__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.csv-export-option__text strong {
  color: var(--color-text-dark);
  font-size: var(--font-size-md);
}

.csv-export-option__desc {
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
}

.badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
}

.badge--high {
  background-color: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.badge--medium {
  background-color: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.badge--low {
  background-color: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

/* Trend Section */
.trend-section {
  background-color: var(--card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--card-border);
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.trend-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.trend-keyword {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  font-size: var(--font-size-base);
}

.trend-controls {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  flex-wrap: wrap;
  min-width: 0;
}

.trend-controls select {
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  font-size: var(--font-size-sm);
  font-family: var(--font-family);
  color: var(--color-text-dark);
  background-color: var(--color-white);
  cursor: pointer;
  min-width: 0;
  flex: 1;
  max-width: 200px;
}

.trend-chart-container {
  position: relative;
  width: 100%;
  height: 250px;
  margin-bottom: var(--spacing-md);
  overflow: hidden;
}

#trendChart {
  height: 100% !important;
  width: 100% !important;
  max-width: 100%;
}

.trend-note {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  text-align: center;
  line-height: 1.6;
}

/* Sourcing Section */
.sourcing-section {
  background-color: var(--card-bg);
  padding: var(--spacing-lg);
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sourcing-tabs {
  display: flex;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-lg);
  flex-wrap: wrap; /* Permet de passer à la ligne si nécessaire */
  overflow-x: auto; /* Scroll horizontal en dernier recours */
}

.tab-btn {
  padding: var(--spacing-md) var(--spacing-lg);
  border: none;
  background-color: var(--color-bg-light);
  color: var(--color-text-dark);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap; /* Empêche le texte de passer à la ligne */
  flex-shrink: 0; /* Empêche les boutons de rétrécir */
}

.tab-btn--active {
  background-color: var(--color-primary);
  color: var(--color-white);
}

.tab-btn:hover:not(.tab-btn--active) {
  background-color: rgba(37, 99, 235, 0.1);
}

/* Onglets verrouillés (paywall) */
.tab-btn--locked {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.1) 0%, rgba(156, 163, 175, 0.1) 100%);
  color: var(--color-text-dark) !important;
}

.tab-btn--locked:hover {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.15) 0%, rgba(156, 163, 175, 0.15) 100%);
  transform: translateY(-1px);
  color: var(--color-text-dark) !important;
}

/* Surcharge pour éviter le texte blanc quand l'onglet devient actif */
.tab-btn--locked.tab-btn--active {
  background: linear-gradient(135deg, rgba(107, 114, 128, 0.2) 0%, rgba(156, 163, 175, 0.2) 100%);
  color: var(--color-text-dark) !important;
}

.tab-btn--locked::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  border: 2px solid rgba(156, 163, 175, 0.3);
  border-radius: inherit;
  pointer-events: none;
}

/* Paywall dans les tableaux */
.table-paywall {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  padding: 40px;
}

.table-paywall__icon {
  color: #9ca3af;
}

.table-paywall__text {
  color: #6b7280;
  font-size: 16px;
  margin: 0;
}

.table-paywall__text--center {
  text-align: center;
  font-size: 16px;
  line-height: 1.6;
}

.table-paywall__text--sub {
  text-align: center;
  color: #6b7280;
  margin-top: 12px;
}

/* Search Volume Chart (Graphique d'évolution) */
.search-volume-chart {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: var(--spacing-lg);
  max-width: 600px;
  width: 100%;
}

.search-volume-chart__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-lg);
}

.search-volume-chart__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.search-volume-chart__update-badge {
  display: flex;
  align-items: center;
  gap: 4px;
  color: var(--color-success);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
}

.search-volume-chart__body {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.search-volume-chart__current {
  text-align: left;
}

.search-volume-chart__current-value {
  font-size: 2rem;
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.search-volume-chart__chart {
  position: relative;
  width: 100%;
}

.search-volume-chart__y-axis {
  position: absolute;
  top: 0;
  left: 0;
  color: #607d8b;
  font-size: var(--font-size-xs);
}

.search-volume-chart__y-label {
  display: block;
}

.search-volume-chart__svg {
  width: 100%;
  height: 95px;
}

.search-volume-chart__bar {
  transition: opacity 0.2s ease;
  cursor: pointer;
}

.search-volume-chart__bar:hover {
  opacity: 0.8;
}

.search-volume-chart__tooltip {
  position: absolute;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
  pointer-events: none;
  z-index: 1000;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transform: translate(-50%, -100%);
  margin-top: -8px;
}

.search-volume-chart__tooltip::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid rgba(0, 0, 0, 0.9);
}

.search-volume-chart__tooltip-date {
  font-size: 11px;
  opacity: 0.8;
  margin-bottom: 2px;
  text-transform: capitalize;
}

.search-volume-chart__tooltip-value {
  font-weight: 600;
  font-size: 14px;
}

.search-volume-chart__x-label {
  fill: #607d8b;
  font-size: 12px;
  font-family: var(--font-family);
}

.search-volume-chart__no-data {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--color-text-light);
  font-size: var(--font-size-sm);
}

.sourcing-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--spacing-lg);
}

.sourcing-card {
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  transition: all 0.3s ease;
}

.sourcing-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--color-primary);
}

.sourcing-card img {
  width: 100%;
  height: 350px;
  object-fit: cover;
  padding: var(--border-radius-md);
  border-radius: var(--border-radius-xl);
}

.sourcing-card h3 {
  padding: var(--spacing-md);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
  line-height: 1.4;
}

.sourcing-card .price {
  padding: 0 var(--spacing-md) var(--spacing-md);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  margin: 0;
}

.sourcing-card .duration {
  padding: 0 var(--spacing-md) var(--spacing-md);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin: 0;
}

.sourcing-card .price-duration {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 var(--spacing-md);
}

/* Responsive - Analysis Page */
@media (max-width: 1024px) {
  .analysis-grid {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .analysis-page {
    padding: var(--spacing-md);
  }

  .analysis-search {
    flex-direction: column;
    align-items: stretch;
  }

  .analysis-search__input-wrapper {
    min-width: 0;
    max-width: 100%;
    padding: var(--spacing-md) var(--spacing-md);
    height: 44px;
  }

  .analysis-search__input {
    font-size: var(--font-size-base);
    height: 28px;
  }

  .btn--lg {
    width: 100%;
  }

  .sourcing-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .keywords-table-container {
    overflow-x: auto;
  }
  .keywords-section {
    margin-bottom: var(--spacing-lg);
  }

  .trend-header {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-md);
  }

  .trend-controls {
    width: 100%;
    justify-content: space-between;
  }

  .trend-controls select {
    flex: 1;
    max-width: none;
    min-width: 120px;
  }
}

@media (max-width: 480px) {
  .analysis-search__input-wrapper {
    padding: 12.4px var(--spacing-sm);
    gap: var(--spacing-sm);
    height: 40px;
  }

  .analysis-search__input {
    font-size: var(--font-size-sm);
    height: 24px;
  }

  .sourcing-grid {
    grid-template-columns: 1fr;
  }

  .keywords-table {
    font-size: var(--font-size-xs);
  }

  .keywords-table thead th,
  .keywords-table tbody td {
    padding: var(--spacing-sm);
  }

  .trend-chart-container {
    height: 200px;
  }

  .trend-controls {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .trend-controls select {
    width: 100%;
    max-width: none;
    min-width: 0;
  }

  .sourcing-tabs {
    flex-wrap: wrap;
    gap: var(--spacing-xs);
  }

  .tab-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    flex: 1 1 auto; /* Permet de s'adapter */
    min-width: fit-content; /* S'adapte au contenu */
  }

  .section-title {
    font-size: var(--font-size-lg);
  }
}

@media (max-width: 600px) {
  .trend-chart-container {
    height: 150px;
  }

  .sourcing-tabs {
    flex-wrap: wrap; /* Garde flex-wrap au lieu de column */
    gap: var(--spacing-xs);
  }

  .tab-btn {
    padding: 8px 12px; /* Padding réduit */
    font-size: 11px; /* Texte plus petit */
    flex: 1 1 calc(50% - 4px); /* 2 boutons par ligne sur très petit écran */
    min-width: fit-content;
    text-align: center;
  }

  .trend-note {
    font-size: 10px;
  }
}

/* ===================================
   MOBILE BOTTOM NAVIGATION
   =================================== */
.mobile-nav {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--sidebar-bg);
  border-top: 1px solid var(--sidebar-border);
  padding: var(--spacing-sm) 0;
  z-index: 1000;
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .mobile-nav {
  box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.4);
}

/* Show mobile nav on mobile screens */
@media (max-width: 768px) {
  .mobile-nav {
    display: flex !important;
  }

  /* Hide sidebar on mobile */
  .sidebar {
    display: none !important;
  }

  /* Adjust main content for mobile nav */
  .main-content {
    margin-left: 0 !important;
    padding-bottom: 80px; /* Space for mobile nav */
  }
}

/* Hide mobile nav on desktop */
@media (min-width: 769px) {
  .mobile-nav {
    display: none !important;
  }
}

.mobile-nav__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  text-decoration: none;
  color: var(--sidebar-text);
  transition: all 0.2s ease, color 0.3s ease;
  flex: 1;
  min-width: 0;
}

.mobile-nav__item:hover {
  color: var(--color-primary);
}

.mobile-nav__item--active {
  color: var(--color-primary);
  background-color: rgba(37, 99, 235, 0.05);
  border-radius: var(--border-radius-md);
  margin: 0 var(--spacing-xs);
}

.mobile-nav__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--sidebar-text);
  transition: color 0.3s ease;
}

.mobile-nav__item--active .mobile-nav__icon {
  color: var(--color-primary);
}

.mobile-nav__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  transition: color 0.3s ease;
}

/* ===================================
   HELP PAGE STYLES
   =================================== */
.help-header {
  margin-bottom: 32px;
  text-align: center;
}

.help-header__icon {
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  color: var(--color-primary);
}

.help-header__title {
  margin: 0 0 8px 0;
  font-size: 28px;
  font-weight: 700;
  color: #111827;
}

.help-header__subtitle {
  margin: 0;
  font-size: 16px;
  color: #6b7280;
}

.faq-accordion {
  max-width: 800px;
  margin: 0 auto;
}

.faq-accordion--grid {
  max-width: 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-lg);
}

.faq-accordion--grid .faq-item {
  margin-bottom: 0;
}

/* Responsive : 1 colonne sur mobile */
@media (max-width: 768px) {
  .faq-accordion--grid {
    grid-template-columns: 1fr;
  }
}

.faq-item {
  margin-bottom: 12px;
  border: 1px solid var(--card-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  background: var(--card-bg);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.faq-question {
  width: 100%;
  padding: 20px 24px;
  text-align: left;
  background: var(--card-bg);
  border: none;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background-color 0.2s ease;
}

.faq-question:hover {
  background-color: var(--color-bg-hover);
}

.faq-question__text {
  font-size: 16px;
  font-weight: 600;
  color: var(--card-text);
  padding-right: 20px;
  transition: color 0.3s ease;
}

.faq-question__icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  transition: transform 0.3s;
  color: var(--color-primary);
}

.faq-question__icon--open {
  transform: rotate(180deg);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease-out;
}

.faq-answer__content {
  padding: 0 24px 20px 24px;
  color: var(--color-text-light);
  font-size: 15px;
  line-height: 1.7;
  transition: color 0.3s ease;
}

.faq-answer__content strong {
  font-weight: var(--font-weight-bold);
  color: var(--card-text);
  transition: color 0.3s ease;
}

.help-contact {
  margin-top: 48px;
  padding: 24px;
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  border-radius: 16px;
  text-align: center;
  color: var(--color-white);
}

.help-contact__title {
  margin: 0 0 8px 0;
  font-size: 20px;
  font-weight: 700;
}

.help-contact__description {
  margin: 0 0 20px 0;
  font-size: 15px;
  opacity: 0.9;
}

.help-contact__button {
  background: var(--color-white);
  color: var(--color-primary);
  border: none;
}

.help-empty {
  text-align: center;
  padding: 60px 20px;
  color: #6b7280;
}

.help-empty__icon {
  width: 64px;
  height: 64px;
  opacity: 0.3;
  margin-bottom: 16px;
  color: var(--color-text-light);
}

.help-empty__text {
  font-size: 16px;
  margin: 0;
}

/* Help Admin Styles */
.help-item {
  background: var(--color-bg-secondary);
  border: 2px solid var(--card-border);
  border-radius: var(--border-radius-lg);
  padding: 20px;
  cursor: move;
  transition: all 0.2s, background-color 0.3s ease, border-color 0.3s ease;
}

.help-item:hover {
  border-color: var(--color-primary);
  background-color: var(--color-blue-light);
}

.help-item--dragging {
  opacity: 0.5;
}

/* ===================================
   MODAL VIDEO STYLES
   =================================== */
.modal-video {
  width: 100%;
  border-radius: var(--border-radius-lg);
}

/* ===================================
   BADGES
   =================================== */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  font-weight: var(--font-weight-medium);
  line-height: 1.4;
}

.badge--success {
  background: #10b981;
  color: #fff;
}

.badge--error, .badge--danger {
  background: #ef4444;
  color: #fff;
}

.badge--warning {
  background: #f59e0b;
  color: #fff;
}

.badge--info {
  background: #1e40af;
  color: #fff;
}

/* ===================================
   MODAL SYSTEM
   =================================== */
.modal {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  padding: 20px;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Quand la modal est ouverte, utiliser flexbox pour le centrage */
.modal[style*="display: block"],
.modal[style*="display: flex"],
.modal--active {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.modal__backdrop {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--modal-overlay);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1;
}

.modal__container {
  position: relative;
  margin: 0;
  width: 90%;
  max-width: 900px;
  z-index: 2;
}

.modal__container--default {
  max-width: 900px;
}

.modal__container--wide {
  max-width: 1200px;
}

.modal__content {
  background: var(--modal-bg);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
  position: relative;
  animation: modalSlideIn 0.3s ease-out;
  max-height: 85vh;
  overflow-y: auto;
  transition: background-color 0.3s ease;
}

.modal__content--sm {
  max-width: 500px;
}

.modal__content--video {
  padding: var(--spacing-lg);
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-50px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--card-border);
  transition: border-color 0.3s ease;
}

.modal__title {
  margin: 0;
  padding-right: 40px;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--card-text);
  transition: color 0.3s ease;
}

.modal__close {
  position: absolute;
  top: var(--spacing-md);
  right: var(--spacing-md);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-text-light);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  z-index: 10001;
}

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

.modal__close:hover {
  background: var(--color-primary);
  color: var(--color-white);
  transform: scale(1.1);
}

.modal__close--danger:hover {
  background: #dc2626;
}

.modal__button-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.modal__footer {
  display: flex;
  gap: var(--spacing-sm);
  justify-content: flex-end;
  padding: var(--spacing-lg);
  margin-top: 10px;
  border-top: 1px solid var(--color-border);
}

.modal__body {
  padding: var(--spacing-lg);
}

.modal__body--no-padding {
  padding: 0;
}

.modal__body video {
  width: 100%;
  border-radius: var(--border-radius-lg);
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modal {
    padding: 10px;
  }

  .modal__container {
    margin: 0;
    width: 95%;
    max-width: 100%;
  }

  .modal__content {
    max-height: 90vh;
  }

  .modal__content--video {
    padding: var(--spacing-md);
  }

  .modal__title {
    font-size: var(--font-size-xl);
    padding-right: 35px;
  }

  .modal__close {
    width: 32px;
    height: 32px;
    font-size: 18px;
  }
}

/* ===================================
   GENERATE NICHES MODAL STYLES
   =================================== */
.generate-modal__section {
  margin-bottom: 16px;
}

.generate-modal__category-label {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 8px;
  color: #111827;
}

.generate-modal__category-name {
  color: #3b82f6;
}

.generate-modal__description {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
}

.generate-modal__info-box {
  background: #f9fafb;
  padding: 16px;
  border-radius: 8px;
  border-left: 4px solid #3b82f6;
}

.generate-modal__info-box--blue {
  background: #dbeafe;
  border-left-color: #3b82f6;
}

.generate-modal__info-box--neutral {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
}

.generate-modal__info-content {
  display: flex;
  gap: 12px;
}

.generate-modal__info-icon {
  font-size: 24px;
}

.generate-modal__info-icon--large {
  font-size: 32px;
}

.generate-modal__info-icon--xlarge {
  font-size: 28px;
}

.generate-modal__info-body {
  flex: 1;
}

.generate-modal__info-title {
  font-weight: 600;
  color: #111827;
  margin-bottom: 8px;
}

.generate-modal__info-title--blue {
  color: #1e40af;
}

.generate-modal__info-title--small {
  margin-bottom: 4px;
}

.generate-modal__info-list {
  color: #6b7280;
  margin: 0;
  padding-left: 20px;
  line-height: 1.8;
}

.generate-modal__info-list--blue {
  color: #1e40af;
  font-size: 14px;
}

.generate-modal__info-text {
  color: #6b7280;
  margin: 0;
  font-size: 14px;
}

.generate-modal__warning-box {
  background: #fef3c7;
  padding: 12px 16px;
  border-radius: 8px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.generate-modal__warning-box--danger {
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.generate-modal__warning-icon {
  font-size: 20px;
}

.generate-modal__warning-icon--large {
  font-size: 24px;
}

.generate-modal__warning-body {
  flex: 1;
}

.generate-modal__warning-title {
  color: #92400e;
  font-weight: 600;
}

.generate-modal__warning-title--danger {
  color: #991b1b;
  font-size: 15px;
}

.generate-modal__warning-text {
  margin: 4px 0 0 0;
  color: #78350f;
  font-size: 13px;
}

.generate-modal__warning-text--danger {
  color: #991b1b;
  line-height: 1.6;
  margin: 6px 0 0 0;
}

.generate-modal__global-title {
  font-weight: 600;
  font-size: 18px;
  margin-bottom: 12px;
  color: #111827;
  display: flex;
  align-items: center;
  gap: 8px;
}

.generate-modal__global-description {
  color: #6b7280;
  line-height: 1.6;
  font-size: 15px;
  margin: 0;
}

/* ===================================
   CONTACT PAGE STYLES
   =================================== */
.contact-form-wrapper {
  max-width: 800px;
  margin: 32px auto;
}

.contact-form {
  background: var(--color-white);
  padding: 32px;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  margin-bottom: 20px;
}

.form-label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-text-dark);
  font-size: 14px;
  transition: color 0.3s ease;
}

.form-input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--input-border);
  border-radius: var(--border-radius-md);
  font-size: 14px;
  font-family: inherit;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: all 0.2s;
}

.form-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-input--error {
  border-color: var(--color-danger);
}

.form-error {
  display: block;
  margin-top: 4px;
  color: var(--color-danger);
  font-size: 13px;
}

.form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
  transition: border-color 0.3s ease;
}

.form-radio-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.form-radio {
  display: flex;
  align-items: center;
  cursor: pointer;
  padding: 12px;
  border: 2px solid var(--card-border);
  border-radius: var(--border-radius-md);
  transition: all 0.2s ease;
}

.form-radio:hover {
  border-color: var(--color-primary);
  background-color: #f9fafb;
}

.form-radio input[type="radio"] {
  margin: 0 12px 0 0;
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: var(--color-primary);
}

.form-radio input[type="radio"]:checked ~ span {
  font-weight: 600;
  color: var(--color-primary);
}

.form-radio input[type="radio"]:checked {
  border-color: var(--color-primary);
}

/* Icon select wrapper */
.icon-select-wrapper {
  display: flex;
  align-items: center;
  gap: 12px;
}

.icon-select-wrapper select {
  flex: 1;
}

.icon-select-preview {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--color-border);
  border-radius: var(--border-radius-md);
  background: #f9fafb;
  flex-shrink: 0;
}

.icon-select-preview svg {
  color: var(--color-primary);
}

.icon-select-preview-text {
  font-size: 11px;
  color: var(--color-text-light);
  text-align: center;
}

/* Modale avec custom select - éviter le clipping du dropdown */
.modal-form {
  overflow: visible !important;
}

/* Custom Select avec icônes */
.custom-select-wrapper {
  position: relative;
  width: 100%;
  overflow: visible;
}

.custom-select-trigger {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
}

.custom-select-trigger:hover {
  border-color: var(--color-primary);
}

.custom-select-value {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-size: 14px;
}

.custom-select-value svg {
  flex-shrink: 0;
}

.custom-select-dropdown {
  position: fixed;
  background: white;
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-md);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 300px;
  overflow-y: auto;
  z-index: 10001;
  display: none;
}

.custom-select-option {
  display: flex;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.custom-select-option:hover {
  background-color: #f3f4f6;
}

.custom-select-option svg {
  flex-shrink: 0;
  color: var(--color-primary);
}

.custom-select-option span {
  color: #374151;
  font-size: 14px;
}

.form-radio span {
  font-size: 14px;
  color: #374151;
  transition: all 0.2s ease;
}

.btn-icon {
  margin-right: 8px;
}

.contact-info {
  max-width: 800px;
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}

@media (max-width: 768px) {
  .contact-info {
    grid-template-columns: 1fr;
  }
}

.contact-info__item {
  padding: 20px;
  background: #f9fafb;
  border-radius: var(--border-radius-lg);
  border: 1px solid var(--color-border);
}

.contact-info__title {
  margin: 0 0 8px 0;
  font-size: 16px;
  font-weight: 600;
  color: #111827;
}

.contact-info__text {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
  line-height: 1.6;
}

.contact-info__link {
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}

.contact-info__link:hover {
  text-decoration: underline;
}

.alert {
  padding: 16px;
  margin-bottom: 24px;
  border-radius: var(--border-radius-md);
  font-size: 14px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.alert-success {
  background-color: var(--badge-bg-success);
  border: 1px solid var(--color-success);
  color: var(--badge-text-success);
}

.alert-error,
.alert-danger {
  background-color: var(--badge-bg-danger);
  border: 1px solid var(--color-danger);
  color: var(--badge-text-danger);
  margin: 32px;
}
.alert.alert-danger {
  background: #fdeced;
  border: 1px solid red;
}
.alert-danger strong {
  font-weight: 600;
}

.alert-danger ul {
  margin: 8px 0 0 0;
  padding-left: 20px;
}

.alert-info {
  background-color: var(--badge-bg-info);
  border: 1px solid var(--color-info);
  color: var(--badge-text-info);
}

.alert-warning {
  background-color: var(--badge-bg-warning);
  border: 1px solid var(--color-warning);
  color: var(--badge-text-warning);
}

.alert strong {
  display: block;
  font-weight: 600;
  margin-bottom: 4px;
}

.alert p {
  margin: 4px 0 0 0;
  font-size: 13px;
}

/* ===================================
   ADMIN USERS TABLE STYLES
   =================================== */
.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table thead tr {
  background-color: var(--table-header-bg);
  border-bottom: 2px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.users-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-dark);
  font-size: 13px;
  transition: color 0.3s ease;
}

.users-table th:last-child {
  text-align: right;
}

.users-table tbody tr {
  border-bottom: 1px solid var(--card-border);
  transition: background-color 0.2s, border-color 0.3s ease;
}

.users-table tbody tr:hover {
  background-color: var(--table-row-hover);
}

.users-table td {
  padding: 12px 16px;
  font-size: 14px;
}

.users-table td:first-child {
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.users-table td:nth-child(2) {
  color: var(--card-text);
  font-weight: 500;
  transition: color 0.3s ease;
}

.users-table td:nth-child(3),
.users-table td:nth-child(5) {
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.users-table td:last-child {
  text-align: right;
}

.users-table-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-light);
  font-size: 14px;
  transition: color 0.3s ease;
}

.badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  color: white;
}

.badge-admin {
  background-color: var(--color-primary);
}

.badge-user {
  background-color: #6b7280;
}

.badge-success {
  background-color: #10b981;
}

.badge-warning {
  background-color: #f59e0b;
}

.badge-danger {
  background-color: #ef4444;
}

.badge-secondary {
  background-color: #9ca3af;
}

.badge-info {
  background-color: #3b82f6;
}

.table-cell-main {
  font-weight: 500;
  color: #111827;
  line-height: 1.4;
}

.table-cell-sub {
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
  line-height: 1.3;
}

/* Generic table styles */
.table {
  width: 100%;
  border-collapse: collapse;
  background-color: var(--card-bg);
  transition: background-color 0.3s ease;
}

.table thead tr {
  background-color: var(--table-header-bg);
  border-bottom: 2px solid var(--table-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  transition: color 0.3s ease;
}

.table tbody tr {
  border-bottom: 1px solid var(--table-border);
  transition: background-color 0.2s, border-color 0.3s ease;
}

.table tbody tr:hover {
  background-color: var(--table-row-hover);
}

.table td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Search Bar */
.search-bar-container {
  margin-bottom: 24px;
}

.search-bar-form {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.search-bar-input-wrapper {
  position: relative;
  flex: 1;
  max-width: 600px;
}

.search-bar-icon {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  pointer-events: none;
}

.search-bar-input {
  width: 100%;
  padding: 10px 40px 10px 44px;
  border: 2px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.search-bar-input::placeholder {
  color: var(--input-placeholder);
}

.search-bar-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.search-bar-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #9ca3af;
  cursor: pointer;
  transition: color 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 4px;
}

.search-bar-clear:hover {
  color: #ef4444;
  background-color: #fef2f2;
}

.search-results-info {
  font-size: 14px;
  color: #6b7280;
  padding: 8px 12px;
  background-color: #f9fafb;
  border-radius: 6px;
  border-left: 3px solid var(--color-primary);
}

.search-results-info strong {
  color: var(--color-primary);
}

/* Filters Group */
.filters-group {
  display: flex;
  gap: 12px;
  align-items: center;
}

.filter-select {
  min-width: 180px;
  padding: 10px 36px 10px 12px;
  border: 2px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--input-bg);
  color: var(--input-text);
  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='%239ca3af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  cursor: pointer;
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.filter-select:hover {
  border-color: var(--color-primary);
}

.filter-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Responsive filters */
@media (max-width: 768px) {
  .search-bar-form {
    flex-direction: column;
    align-items: stretch;
  }

  .search-bar-input-wrapper {
    max-width: 100%;
  }

  .filters-group {
    width: 100%;
    flex-direction: column;
  }

  .filter-select {
    width: 100%;
  }
}

/* DEV Environment Topbar */
.dev-topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(135deg, #374151 0%, #1f2937 100%);
  border-bottom: 3px solid #f59e0b;
  z-index: 10000;
  display: flex;
  align-items: center;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.dev-topbar__content {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.dev-topbar__info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.dev-topbar__badge {
  background: #f59e0b;
  color: #ffffff;
  font-size: 12px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.dev-topbar__text {
  color: #d1d5db;
  font-size: 14px;
  font-weight: 500;
}

.dev-topbar__button {
  background: #10b981;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.dev-topbar__button:hover {
  background: #059669;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}

.dev-topbar__close {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #ffffff;
  font-size: 18px;
  font-weight: 600;
  padding: 6px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  width: 32px;
  height: 32px;
}

.dev-topbar__close svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.dev-topbar__close:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  transform: translateY(-1px);
}

/* Adjust sidebar and main content when dev topbar is present */
body:has(.dev-topbar) .sidebar {
  top: 50px;
  height: calc(100vh - 50px);
}

body:has(.dev-topbar) .main-content {
  margin-top: 50px;
}


/* Responsive dev topbar */
@media (max-width: 768px) {
  .dev-topbar {
    height: auto;
    padding: 8px 0;
  }

  .dev-topbar__content {
    flex-direction: column;
    gap: 8px;
    padding: 8px 16px;
  }

  .dev-topbar__info {
    flex-direction: column;
    gap: 4px;
    text-align: center;
  }

  body:has(.dev-topbar) .sidebar {
    top: 80px;
    height: calc(100vh - 80px);
  }

  body:has(.dev-topbar) .main-content {
    margin-top: 80px;
  }

  body:has(.dev-topbar--auth) .auth-container {
    margin-top: 80px;
  }
}

/* Revenue Stats Cards */
.revenue-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.revenue-stat-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: var(--card-bg);
  border-radius: 12px;
  border: 2px solid var(--card-border);
  transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.revenue-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.revenue-stat-card--mrr {
  border-color: #3b82f6;
}

[data-theme="dark"] .revenue-stat-card--mrr {
  background: rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.revenue-stat-card--arr {
  border-color: #10b981;
}

[data-theme="dark"] .revenue-stat-card--arr {
  background: rgba(16, 185, 129, 0.1);
  border-color: #10b981;
}

.revenue-stat-card--active {
  border-color: #f59e0b;
}

[data-theme="dark"] .revenue-stat-card--active {
  background: rgba(245, 158, 11, 0.1);
  border-color: #f59e0b;
}

.revenue-stat-card__icon {
  font-size: 36px;
  line-height: 1;
  flex-shrink: 0;
}

.revenue-stat-card__content {
  flex: 1;
}

.revenue-stat-card__label {
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.revenue-stat-card__value {
  font-size: 32px;
  font-weight: 700;
  color: var(--card-text);
  line-height: 1.2;
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.revenue-stat-card--mrr .revenue-stat-card__value {
  color: #3b82f6;
}

.revenue-stat-card--arr .revenue-stat-card__value {
  color: #10b981;
}

.revenue-stat-card--active .revenue-stat-card__value {
  color: #f59e0b;
}

.revenue-stat-card__sublabel {
  font-size: 12px;
  color: var(--color-text-light);
  line-height: 1.4;
  transition: color 0.3s ease;
}

@media (max-width: 768px) {
  .revenue-stats {
    grid-template-columns: 1fr;
  }
}

.table-wrapper {
  overflow-x: auto;
}

.table-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.table-actions form {
  display: inline-block;
}

.btn-action {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  transition: opacity 0.2s;
  cursor: pointer;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
}

.btn-action:hover {
  opacity: 0.9;
}

.btn-edit {
  background-color: var(--color-primary);
  color: white;
  text-decoration: none;
}

.btn-delete {
  background-color: var(--color-danger);
  color: white;
  border: none;
}

.btn-preanalyze {
  background-color: #f59e0b;
  color: white;
  border: none;
}

.btn-preanalyze:hover {
  background-color: #d97706;
}

.btn-preanalyze img,
.btn-edit img,
.btn-delete img,
.btn-view img {
  width: 16px;
  height: 16px;
  display: inline-block;
  vertical-align: middle;
  filter: brightness(0) invert(1); /* Rendre l'icône blanche */
}

.section-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: background-color 0.3s ease;
}

.section-card__header {
  margin-bottom: 24px;
}

.section-card__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-text);
  margin: 0 0 4px 0;
  transition: color 0.3s ease;
}

.section-card__description {
  font-size: 14px;
  color: var(--color-text-light);
  margin: 0;
  transition: color 0.3s ease;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.alert-success,
.alert-error,
.alert-danger {
  animation: slideIn 0.3s ease-out;
  margin-bottom: 24px;
}

.pagination-wrapper {
  margin-top: 24px;
  display: flex;
  justify-content: center;
}

/* Pagination personnalisée */
.pagination-custom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.pagination-custom__info {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.pagination-custom__info span {
  font-weight: 600;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.pagination-custom__controls {
  display: flex;
  gap: 8px;
  align-items: center;
}

.pagination-custom__btn,
.pagination-custom__number {
  min-width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 12px;
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  color: var(--card-text);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  cursor: pointer;
}

.pagination-custom__btn {
  padding: 0;
}

.pagination-custom__icon {
  width: 20px;
  height: 20px;
}

.pagination-custom__number:hover,
.pagination-custom__btn:hover {
  background: var(--color-bg-hover);
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.pagination-custom__number--active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-white);
}

.pagination-custom__btn--disabled {
  opacity: 0.4;
  cursor: not-allowed;
  background: var(--color-bg-secondary);
  color: var(--color-text-light);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease;
}

.pagination-custom__dots {
  padding: 0 8px;
  color: var(--color-text-light);
  font-size: 14px;
  transition: color 0.3s ease;
}

@media (max-width: 640px) {
  .pagination-custom__info {
    font-size: 12px;
  }
  
  .pagination-custom__btn,
  .pagination-custom__number {
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-size: 13px;
  }
  
  .pagination-custom__controls {
    gap: 4px;
  }
}

/* ===================================
   PAGES TABLE & CONTENT ADMIN
   =================================== */
.pages-table {
  width: 100%;
  border-collapse: collapse;
}

.pages-table thead tr {
  background-color: var(--table-header-bg);
  border-bottom: 2px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.pages-table th {
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: var(--color-text-dark);
  font-size: 13px;
  transition: color 0.3s ease;
}

.pages-table th:last-child {
  text-align: right;
}

.pages-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background-color 0.2s;
}

.pages-table tbody tr:hover {
  background-color: var(--table-row-hover);
  transition: background-color 0.2s ease;
}

.pages-table td {
  padding: 12px 16px;
  font-size: 14px;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.pages-table td:first-child {
  color: var(--card-text);
  font-weight: 500;
}

.pages-table td:nth-child(2) {
  color: var(--color-text-light);
  font-family: 'Courier New', monospace;
}

.pages-table td:nth-child(3),
.pages-table td:nth-child(5) {
  color: var(--color-text-light);
}

.pages-table td:last-child {
  text-align: right;
}

.pages-table-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-light);
  font-size: 14px;
  transition: color 0.3s ease;
}

.pages-table-empty a {
  color: var(--color-primary);
}

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

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

.btn-view {
  background-color: #6b7280;
  color: white;
  text-decoration: none;
  display: inline-block;
}

.admin-buttons {
  margin-bottom: 24px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-button {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  font-weight: 500;
  text-decoration: none;
  transition: opacity 0.2s;
}

.admin-button:hover {
  opacity: 0.9;
}

.admin-button--create {
  background-color: var(--color-success);
  color: white;
}

.admin-button--edit {
  background-color: var(--color-primary);
  color: white;
}

.breadcrumb {
  margin-bottom: 24px;
}

.breadcrumb a {
  color: var(--color-primary);
  text-decoration: none;
  font-size: 14px;
}

.breadcrumb a:hover {
  text-decoration: underline;
}

.video-preview {
  margin-bottom: 20px;
  padding: 16px;
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
  transition: background-color 0.3s ease;
}

.video-preview p {
  margin: 0;
  color: var(--card-text);
  font-size: 14px;
  transition: color 0.3s ease;
}

.video-preview video {
  max-width: 100%;
  margin-top: 12px;
  border-radius: 8px;
}

.form-actions-grid {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.form-field {
  flex: 2;
  min-width: 200px;
}

.form-field--large {
  flex: 3;
  min-width: 300px;
}

.form-field input,
.form-field textarea,
.form-field select {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 14px;
}

.form-field textarea {
  resize: vertical;
}

.form-help-text {
  margin: 4px 0 0 0;
  font-size: 13px;
  color: #6b7280;
}

.form-help-text a {
  color: var(--color-primary);
}

.form-section {
  margin-bottom: 16px;
  padding: 16px;
  background-color: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.form-section-title {
  margin: 0 0 12px 0;
  font-size: 14px;
  font-weight: 600;
  color: var(--card-text);
  transition: color 0.3s ease;
}

/* Admin Form Styles - Design System */
.form-row--auto {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 20px;
}

.form-info-box {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #eff6ff;
  color: #1e40af;
  border-radius: 8px;
  border-left: 4px solid #2563eb;
}

.form-info-box strong {
  font-weight: 600;
}

.form-price-display {
  margin-bottom: 24px;
  padding: 16px;
  background-color: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  color: #374151;
}

.form-price-display strong {
  color: #2563eb;
}

.form-checkbox-group {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.form-checkbox-wrapper {
  padding: 12px;
  background-color: #f9fafb;
  border-radius: 8px;
}

.form-checkbox-label {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
}

.form-checkbox-label input[type="checkbox"] {
  margin-right: 8px;
  width: 18px;
  height: 18px;
  cursor: pointer;
}

.form-checkbox-label span {
  font-weight: 500;
}

.form-checkbox-help {
  display: block;
  margin-top: 6px;
  margin-left: 26px;
  font-size: 13px;
  color: #6b7280;
}

.form-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  resize: vertical;
  font-family: inherit;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.form-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.danger-zone {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 2px solid var(--color-danger);
  margin-top: 24px;
  transition: background-color 0.3s ease;
}

.danger-zone__header {
  margin-bottom: 16px;
}

.danger-zone__title {
  font-size: 18px;
  font-weight: 600;
  color: #ef4444;
  margin: 0 0 8px 0;
}

.danger-zone__description {
  margin: 0;
  font-size: 14px;
  color: #6b7280;
}

.alert-error--validation {
  margin-bottom: 24px;
  padding: 16px;
  background-color: var(--badge-bg-danger);
  color: var(--badge-text-danger);
  border: 1px solid var(--color-danger);
  border-radius: 8px;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.alert-error--validation strong {
  font-weight: 600;
}

.alert-error--validation ul {
  margin: 8px 0 0 0;
  padding-left: 1.5rem;
}

.sortable-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sortable-item-form {
  margin-bottom: 12px;
}

.sortable-item-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.drag-handle {
  flex: 0;
  align-self: center;
}

.drag-icon {
  width: 24px;
  height: 24px;
  color: #9ca3af;
}

.inline-form-field {
  flex: 1;
  min-width: 250px;
}

.inline-form-field--large {
  flex: 2;
  min-width: 300px;
}

.inline-form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.inline-form-field input,
.inline-form-field textarea,
.inline-form-field select,
.inline-form-field--large input,
.inline-form-field--large textarea,
.inline-form-field--large select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: border-color 0.2s, box-shadow 0.2s, background-color 0.3s ease, color 0.3s ease;
}

.inline-form-field input::placeholder,
.inline-form-field textarea::placeholder,
.inline-form-field--large input::placeholder,
.inline-form-field--large textarea::placeholder {
  color: var(--input-placeholder);
}

.inline-form-field input:focus,
.inline-form-field textarea:focus,
.inline-form-field select:focus,
.inline-form-field--large input:focus,
.inline-form-field--large textarea:focus,
.inline-form-field--large select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.inline-form-field textarea,
.inline-form-field--large textarea {
  resize: vertical;
  min-height: 80px;
  line-height: 1.5;
  padding: 10px 12px;
}

.inline-checkbox {
  flex: 0;
  align-self: center;
}

.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox-label input {
  width: 18px;
  height: 18px;
  margin-right: 6px;
  cursor: pointer;
}

.checkbox-label span {
  font-size: 13px;
  color: #374151;
}

.form-button-group {
  margin-top: 12px;
  display: flex;
  gap: 8px;
}

.btn-update {
  padding: 8px 16px;
  background-color: var(--color-primary);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: opacity 0.2s;
}

.btn-update:hover {
  opacity: 0.9;
}

.btn-submit {
  padding: 12px 24px;
  background-color: var(--color-success);
  color: white;
  border: none;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.2s;
}

.btn-submit:hover {
  opacity: 0.9;
}

.section-card--spaced {
  margin-bottom: 32px;
}

.help-instructions {
  margin: 4px 0 0 0;
  font-size: 14px;
  color: #6b7280;
}

/* ===================================
   CHATBOT STYLES
   =================================== */

/* Chatbot Button */
.chatbot-button {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4);
  cursor: pointer;
  transition: all 0.3s ease;
  z-index: 1000;
  border: none;
}

.chatbot-button:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(37, 99, 235, 0.5);
}

.chatbot-button--hidden {
  opacity: 0;
  pointer-events: none;
}

/* Chatbot Window */
.chatbot-window {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 400px;
  height: 600px;
  background: var(--color-white);
  border-radius: var(--border-radius-xl);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
  display: flex;
  flex-direction: column;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  pointer-events: none;
  transition: all 0.3s ease;
  z-index: 1001;
}

.chatbot-window--open {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

/* Chatbot Header */
.chatbot-window__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%);
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
  color: var(--color-white);
}

.chatbot-window__header-left {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
}

.chatbot-window__logo {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-window__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  margin: 0;
}

.chatbot-window__status {
  font-size: var(--font-size-sm);
  opacity: 0.9;
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 0 0;
}

.chatbot-window__status-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

.chatbot-window__header-actions {
  display: flex;
  gap: var(--spacing-sm);
  align-items: center;
}

.chatbot-window__close,
.chatbot-window__reset {
  width: 32px;
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s;
  border: none;
}

.chatbot-window__close:hover,
.chatbot-window__reset:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* Messages Container */
.chatbot-window__messages {
  flex: 1;
  overflow-y: auto;
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

/* Chatbot Message */
.chatbot-message {
  display: flex;
  gap: var(--spacing-sm);
  animation: messageSlideIn 0.3s ease;
}

@keyframes messageSlideIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chatbot-message--user {
  flex-direction: row-reverse;
}

.chatbot-message__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chatbot-message--assistant .chatbot-message__avatar {
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%);
}

.chatbot-message--user .chatbot-message__avatar {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.chatbot-message__bubble {
  max-width: 75%;
  padding: var(--spacing-sm) var(--spacing-md);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  line-height: 1.5;
}

.chatbot-message--assistant .chatbot-message__bubble {
  background: var(--color-bg-light);
  color: var(--color-text-dark);
}

.chatbot-message--user .chatbot-message__bubble {
  background: var(--color-primary);
  color: var(--color-white);
}

.chatbot-message__bubble p {
  margin: 0;
}

.chatbot-message__bubble strong {
  font-weight: var(--font-weight-bold);
  color: inherit;
}

/* Typing Indicator */
.chatbot-typing {
  display: flex;
  gap: var(--spacing-sm);
  animation: messageSlideIn 0.3s ease;
}

.chatbot-typing__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary) 0%, #1e40af 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.chatbot-typing__bubble {
  padding: var(--spacing-sm) var(--spacing-md);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  gap: 4px;
}

.chatbot-typing__dots {
  display: flex;
  gap: 4px;
}

.chatbot-typing__dots span {
  width: 8px;
  height: 8px;
  background: var(--color-primary);
  border-radius: 50%;
  animation: typingBounce 1.4s infinite ease-in-out;
}

.chatbot-typing__dots span:nth-child(1) {
  animation-delay: -0.32s;
}

.chatbot-typing__dots span:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes typingBounce {
  0%, 80%, 100% {
    transform: scale(0.8);
    opacity: 0.5;
  }
  40% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Chat Form */
.chatbot-window__form {
  display: flex;
  gap: var(--spacing-sm);
  padding: var(--spacing-lg);
  border-top: 1px solid var(--color-border);
}

.chatbot-window__input {
  flex: 1;
  padding: var(--spacing-sm) var(--spacing-md);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  font-size: var(--font-size-sm);
  font-family: inherit;
  transition: border-color 0.2s;
}

.chatbot-window__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.chatbot-window__send {
  width: 40px;
  height: 40px;
  background: var(--color-primary);
  border-radius: var(--border-radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  cursor: pointer;
  transition: background 0.2s;
  border: none;
}

.chatbot-window__send:hover {
  background: #1e40af;
}

/* Error Message */
.chatbot-window__error {
  position: absolute;
  top: 80px;
  left: var(--spacing-lg);
  right: var(--spacing-lg);
  padding: var(--spacing-md);
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: var(--border-radius-md);
  color: var(--color-danger);
  font-size: var(--font-size-sm);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
  animation: errorSlideIn 0.3s ease;
  z-index: 10;
}

@keyframes errorSlideIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.chatbot-window__error p {
  margin: 0;
  flex: 1;
}

.chatbot-window__error-close {
  width: 24px;
  height: 24px;
  background: none;
  border: none;
  color: var(--color-danger);
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.chatbot-window__error-close:hover {
  opacity: 0.7;
}

/* Admin Conversation Styles */
.chatbot-conversation {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
}

.chatbot-message__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-sm);
  font-size: var(--font-size-sm);
}

.chatbot-message__role {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
}

.chatbot-message__time {
  color: var(--color-text-light);
  font-size: var(--font-size-xs);
}

.chatbot-message__content {
  padding: var(--spacing-md);
  background: var(--color-white);
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border);
  line-height: 1.6;
}

.chatbot-message__meta {
  margin-top: var(--spacing-sm);
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  display: flex;
  gap: var(--spacing-sm);
}

.conversation-info {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

.conversation-info__item {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.conversation-info__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
}

.conversation-info__value {
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
  font-weight: var(--font-weight-medium);
}

/* Stats Grid */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--spacing-lg);
  margin-bottom: var(--spacing-xl);
}

.stat-card {
  background: var(--card-bg);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  box-shadow: var(--shadow-sm);
  transition: transform 0.2s, box-shadow 0.2s, background-color 0.3s ease;
}

.stat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}

.stat-card__icon {
  width: 48px;
  height: 48px;
  border-radius: var(--border-radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.stat-card__content {
  flex: 1;
}

.stat-card__label {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  margin: 0 0 4px 0;
  transition: color 0.3s ease;
}

.stat-card__value {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--card-text);
  margin: 0;
  transition: color 0.3s ease;
}

.btn-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--color-bg-light);
  border-radius: 50%;
  color: var(--color-text-dark);
  transition: background 0.2s;
  text-decoration: none;
}

.btn-back:hover {
  background: var(--color-border);
}

/* Info Banner */
.section-card--info {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border: 1px solid #93c5fd;
}

.info-banner {
  display: flex;
  align-items: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-lg);
}

.info-banner__icon {
  width: 48px;
  height: 48px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  flex-shrink: 0;
}

.info-banner__content {
  flex: 1;
}

.info-banner__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin: 0 0 var(--spacing-sm) 0;
}

.info-banner__text {
  font-size: var(--font-size-base);
  color: var(--color-text-dark);
  line-height: 1.6;
  margin: 0;
}

.info-banner__text strong {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.info-banner .btn {
  white-space: nowrap;
  flex-shrink: 0;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .chatbot-button {
    bottom: 80px;
    right: 16px;
    width: 56px;
    height: 56px;
  }

  .chatbot-window {
    bottom: 0;
    right: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    border-radius: 0;
    max-height: none;
  }

  .chatbot-window__header {
    border-radius: 0;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .info-banner {
    flex-direction: column;
    text-align: center;
  }

  .info-banner .btn {
    width: 100%;
  }
}

/* ===================================
   TABS SYSTEM
   =================================== */
.tabs-container {
  width: 100%;
}

.tabs-nav {
  display: flex;
  gap: var(--spacing-sm);
  padding: 0;
  margin-bottom: var(--spacing-xl);
  border-bottom: 2px solid var(--color-border);
}

.tab-button {
  padding: var(--spacing-md) var(--spacing-lg);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  bottom: -2px;
}

.tab-button:hover {
  color: var(--color-primary);
  background: var(--color-bg-light);
}

.tab-button--active {
  color: var(--color-primary);
  border-bottom-color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

.tab-content {
  display: none;
  animation: fadeIn 0.3s ease-in;
}

.tab-content--active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Section Card Header avec bouton */
.section-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.section-card__header > div {
  flex: 1;
}

/* Mobile Responsive for Tabs */
@media (max-width: 768px) {
  .tabs-nav {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tab-button {
    white-space: nowrap;
    font-size: var(--font-size-sm);
    padding: var(--spacing-sm) var(--spacing-md);
  }

  .section-card__header {
    flex-direction: column;
  }

  .section-card__header .btn {
    width: 100%;
  }
}

/* ===================================
   NICHES MANAGEMENT (ADMIN)
   =================================== */
.niches-manage {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.niches-manage__header {
  margin-bottom: var(--spacing-md);
}

.niches-generate__actions {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.niches-generated__actions {
  display: flex;
  gap: var(--spacing-md);
  justify-content: center;
  margin-top: var(--spacing-xl);
  padding-top: var(--spacing-xl);
  border-top: 2px solid var(--color-border);
}

.niches-existing__filters {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-xl);
  flex-wrap: wrap;
  align-items: flex-end;
}

/* Niche Cards Grid Container */
#existing-niches-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

/* Niche Item */
.niche-item {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 12px;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

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

.niche-item__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border);
  flex-shrink: 0;
}

.niche-item__number {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: 11px;
}

.niche-item__actions {
  display: flex;
  gap: 4px;
}

.niche-item .btn-remove,
.niche-item .btn-edit,
.niche-item .btn-delete {
  font-size: 14px;
  padding: 4px 6px;
  border-radius: var(--border-radius-sm);
  transition: transform 0.2s ease;
  background: transparent;
  border: none;
  cursor: pointer;
}

.niche-item .btn-remove:hover,
.niche-item .btn-edit:hover,
.niche-item .btn-delete:hover {
  transform: scale(1.2);
}

.niche-item__fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--spacing-md);
}

.niche-item__content {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
}

.niche-item__field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.niche-item__label {
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.niche-item__value {
  color: var(--color-text-dark);
  font-size: 12px;
  word-break: break-word;
}

.niche-item__value strong {
  font-size: 13px;
  color: var(--color-primary);
}

/* Badge dans les cartes de niches */
.niche-item .badge {
  font-size: 10px;
  padding: 3px 8px;
  white-space: nowrap;
}

/* Responsive */
@media (max-width: 1600px) {
  #existing-niches-cards {
    grid-template-columns: repeat(5, 1fr);
  }
}

@media (max-width: 1400px) {
  #existing-niches-cards {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 1024px) {
  #existing-niches-cards {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  #existing-niches-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  #existing-niches-cards {
    grid-template-columns: 1fr;
  }
}

/* Empty State */
.empty-state {
  padding: 48px;
  text-align: center;
  color: var(--color-text-muted);
  transition: color 0.3s ease;
}

.empty-state__icon {
  font-size: 48px;
  margin-bottom: 16px;
  color: var(--color-text-muted);
  transition: color 0.3s ease;
}

.empty-state__title {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-text);
  margin-bottom: 8px;
  transition: color 0.3s ease;
}

.empty-state__text {
  font-size: 14px;
  color: var(--color-text-muted);
  margin-bottom: 16px;
  transition: color 0.3s ease;
}

/* Table Empty State */
#existing-niches-table .empty-state__icon {
  font-size: 36px;
  margin-bottom: 12px;
}

/* Existing Niches Table Styles */
#existing-niches-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

#existing-niches-table tr[data-niche-id] td {
  padding: 12px 8px;
  border-bottom: 1px solid #e5e7eb;
}

#existing-niches-table tr[data-niche-id] td:first-child {
  font-weight: 600;
  color: #111827;
}

#existing-niches-table tr[data-niche-id] td:nth-child(2),
#existing-niches-table tr[data-niche-id] td:nth-child(3) {
  color: #6b7280;
  font-size: 12px;
}

#existing-niches-table tr[data-niche-id] td:nth-child(4) {
  color: #374151;
  font-size: 12px;
}

#existing-niches-table tr[data-niche-id] td:nth-child(5),
#existing-niches-table tr[data-niche-id] td:nth-child(6),
#existing-niches-table tr[data-niche-id] td:nth-child(7),
#existing-niches-table tr[data-niche-id] td:nth-child(8) {
  text-align: center;
  color: #374151;
}

#existing-niches-table tr[data-niche-id] td:nth-child(9),
#existing-niches-table tr[data-niche-id] td:nth-child(10) {
  text-align: center;
}

#existing-niches-table .btn-edit,
#existing-niches-table .btn-delete {
  /* background: none; */
  border: none;
  cursor: pointer;
  font-size: 16px;
  padding: 4px;
  transition: transform 0.2s;
}

#existing-niches-table .btn-edit:hover,
#existing-niches-table .btn-delete:hover {
  transform: scale(1.2);
}

#existing-niches-table .btn-edit {
  margin-right: 8px;
}

/* ===================================
   TOP NICHES (USER PAGE)
   =================================== */
.top-niches {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.top-niches__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-lg);
}

.credits-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-sm) var(--spacing-lg);
  background: var(--color-blue-light);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.credits-badge__icon {
  font-size: var(--font-size-xl);
}

/* Filters Bar */
.filters-bar {
  display: flex;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-bg-card);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  flex-wrap: wrap;
}

.filters-bar__search {
  flex: 1;
  min-width: 250px;
}

.filters-bar__select {
  min-width: 200px;
}

.form-input--search {
  width: 100%;
}

/* Niche Cards Grid */
.top-niches__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--spacing-lg);
}

.niche-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: var(--spacing-lg);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.niche-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
  border-color: var(--color-primary);
}

.niche-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.niche-card__category {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.niche-card__subcategory {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.niche-card__body {
  flex: 1;
}

.niche-card__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-sm);
}

.niche-card__keyword {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-sm);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
}

.niche-card__keyword-label {
  font-size: var(--font-size-lg);
}

.niche-card__keyword-text {
  color: var(--color-text-light);
  font-style: italic;
}

/* Metrics */
.niche-card__metrics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  padding: var(--spacing-md) 0;
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.metric {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.metric__label {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.metric__value {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.metric__value--volume {
  color: var(--color-primary);
}

.metric__value--cpc {
  color: var(--color-success);
}

.metric__value--empty {
  color: var(--color-text-light);
  opacity: 0.5;
}

.difficulty-badge {
  display: inline-block;
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.difficulty-badge--easy {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.difficulty-badge--medium {
  background: rgba(245, 158, 11, 0.1);
  color: var(--color-warning);
}

.difficulty-badge--hard {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

.trend-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

.trend-badge--up {
  background: rgba(16, 185, 129, 0.1);
  color: var(--color-success);
}

.trend-badge--stable {
  background: rgba(107, 114, 128, 0.1);
  color: var(--color-text-light);
}

.trend-badge--down {
  background: rgba(239, 68, 68, 0.1);
  color: var(--color-danger);
}

/* ===================================
   KEYWORD ANALYSIS
   =================================== */
.keyword-analysis {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xl);
}

.breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  font-size: var(--font-size-sm);
  margin-bottom: var(--spacing-md);
}

.breadcrumb__link {
  color: var(--color-primary);
  text-decoration: none;
  transition: opacity 0.2s ease;
}

.breadcrumb__link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.breadcrumb__separator {
  color: var(--color-text-light);
}

.breadcrumb__current {
  color: var(--color-text-light);
  font-weight: var(--font-weight-medium);
}

.niche-meta {
  display: flex;
  gap: var(--spacing-xl);
  margin-top: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
}

.niche-meta__item {
  display: flex;
  gap: var(--spacing-sm);
}

.niche-meta__label {
  font-weight: var(--font-weight-bold);
  color: var(--color-text-light);
}

.niche-meta__value {
  color: var(--color-text-dark);
}

/* Analysis Prompt */
.analysis-prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--spacing-lg);
  padding: var(--spacing-2xl);
}

.analysis-prompt__icon {
  font-size: 4rem;
}

.analysis-prompt__title {
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.analysis-prompt__description {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  max-width: 600px;
  line-height: 1.6;
}

.analysis-prompt__cost {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  align-items: center;
}

.cost-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-lg);
  background: var(--color-blue-light);
  border: 2px solid var(--color-primary);
  border-radius: var(--border-radius-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  font-size: var(--font-size-lg);
}

/* Analysis Grid */
.keyword-analysis__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--spacing-xl);
}

.keyword-analysis__left,
.keyword-analysis__right {
  min-width: 0;
}

.markdown-content {
  line-height: 1.8;
}

.markdown-content h2 {
  margin-top: var(--spacing-xl);
  margin-bottom: var(--spacing-md);
  color: var(--color-text-dark);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--spacing-sm);
}

.markdown-content h2:first-child {
  margin-top: 0;
}

.markdown-content ul {
  list-style: none;
  padding: 0;
}

.markdown-content li {
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border);
}

.markdown-content li:last-child {
  border-bottom: none;
}

.markdown-content strong {
  color: var(--color-primary);
  font-weight: var(--font-weight-bold);
}

/* Google Trends */
.google-trends {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.google-trends__info {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
  line-height: 1.6;
}

.google-trends__placeholder {
  padding: var(--spacing-xl);
  background: var(--color-bg-light);
  border-radius: var(--border-radius-md);
  text-align: center;
  color: var(--color-text-light);
}

/* Products Section */
.products-section {
  margin-bottom: var(--spacing-xl);
}

.products-section__title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-md);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

.products-section__logo {
  height: 24px;
  width: auto;
}

/* Styles spécifiques pour la liste des produits (pas la grille) */
.products-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: var(--spacing-lg);
}

.products-list .product-card {
  background: var(--color-bg-card);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

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

.product-card__image {
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  background: var(--color-bg-light);
}

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

.product-card__body {
  padding: var(--spacing-md);
  flex: 1;
}

.product-card__title {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-dark);
  margin-bottom: var(--spacing-sm);
  line-height: 1.4;
}

.product-card__meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-sm);
}

.product-card__price {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
}

.product-card__rating {
  font-size: var(--font-size-sm);
  color: var(--color-text-light);
}

.product-card__footer {
  padding: var(--spacing-md);
  border-top: 1px solid var(--color-border);
}

/* ===================================
   LOADING & EMPTY STATES
   =================================== */
.loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl);
  text-align: center;
}

.loading-spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-2xl);
  text-align: center;
}

.empty-state--full {
  grid-column: 1 / -1;
  min-height: 300px;
}

.empty-state__icon {
  font-size: 4rem;
  opacity: 0.5;
}

.empty-state__title {
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-dark);
}

.empty-state__text {
  font-size: var(--font-size-base);
  color: var(--color-text-light);
  max-width: 400px;
}

/* ===================================
   RESPONSIVE
   =================================== */
@media (max-width: 1024px) {
  .keyword-analysis__grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .top-niches__header {
    flex-direction: column;
  }

  .filters-bar {
    flex-direction: column;
  }

  .filters-bar__search,
  .filters-bar__select {
    width: 100%;
  }

  .top-niches__grid {
    grid-template-columns: 1fr;
  }

  .niche-meta {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .products-list {
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  }

  .niches-generate__actions {
    flex-direction: column;
  }

  .niches-generate__actions .btn {
    width: 100%;
  }

  .niches-existing__filters {
    flex-direction: column;
  }

  .niches-existing__filters .form-group,
  .niches-existing__filters .btn {
    width: 100%;
  }
}

/* Danger Button Variant */
.btn--danger {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
  color: white;
  border: none;
}

.btn--danger:hover {
  background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
  transform: translateY(-2px);
}

/* Disabled Button Variant */
.btn--disabled {
  background-color: #e5e7eb;
  color: #9ca3af;
  border: 1px solid #d1d5db;
  cursor: not-allowed;
  opacity: 0.6;
}

.btn--disabled:hover {
  background-color: #e5e7eb;
  transform: none;
  box-shadow: none;
}

/* Fix pour le tableau dans la section Trouver une niche ET Liste des niches */
#find-niche-section,
#view-niches-section {
  width: 100% !important;
  max-width: 100% !important;
}

#find-niche-section .products-list,
#view-niches-section .products-list,
#listView.products-list,
#generated-niches-table-container.products-list {
  display: block !important;
  grid-template-columns: unset !important;
  gap: unset !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto;
  box-sizing: border-box;
}

#find-niche-section .products-table,
#view-niches-section .products-table,
#listView .products-table,
#generated-niches-table-container .products-table {
  width: 100% !important;
  border-collapse: collapse;
  table-layout: auto;
  min-width: 100%;
  box-sizing: border-box;
}

#find-niche-section .products-table__th,
#find-niche-section .products-table__td,
#view-niches-section .products-table__th,
#view-niches-section .products-table__td {
  text-align: left;
  padding: 12px 16px;
}

#find-niche-section .products-table__th,
#view-niches-section .products-table__th {
  background-color: var(--table-header-bg);
  font-weight: 600;
  color: var(--color-text-dark);
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-bottom: 2px solid var(--table-border);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

#find-niche-section .products-table__td,
#view-niches-section .products-table__td {
  border-bottom: 1px solid var(--table-border);
  font-size: 14px;
  color: var(--card-text);
  transition: border-color 0.3s ease, color 0.3s ease;
}

#find-niche-section .products-table__row:hover,
#view-niches-section .products-table__row:hover {
  background-color: var(--table-row-hover);
}

#find-niche-section .products-table__name,
#view-niches-section .products-table__name {
  font-weight: 600;
  color: var(--card-text);
  font-size: 15px;
  transition: color 0.3s ease;
}

/* =====================================================
   NICHE SEARCH CARD
   ===================================================== */
.niche-search-card {
  background: var(--card-bg);
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  transition: background-color 0.3s ease;
}

.niche-search-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.niche-search-card__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--card-text);
  margin: 0 0 4px 0;
  transition: color 0.3s ease;
}

.niche-search-card__subtitle {
  font-size: 14px;
  color: var(--color-text-light);
  margin: 0;
  transition: color 0.3s ease;
}

.niche-search-card__credits {
  text-align: right;
}

.niche-search-card__credits-label {
  font-size: 12px;
  color: var(--color-text-light);
  margin-bottom: 4px;
  transition: color 0.3s ease;
}

.niche-search-card__credits-value {
  font-size: 24px;
  font-weight: 700;
}

.niche-search-card__credits-value--positive {
  color: var(--color-success);
}

.niche-search-card__credits-value--zero {
  color: var(--color-danger);
}

.niche-search-card__form {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

@media (max-width: 768px) {
  .niche-search-card__form {
    flex-direction: column;
    gap: 12px;
  }

  .niche-search-card__input {
    width: 100%;
  }

  .niche-search-card__form .btn {
    width: 100%;
    justify-content: center;
  }
}

.niche-search-card__form--trial-locked {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 32px;
  background: linear-gradient(135deg, var(--color-bg-secondary) 0%, var(--color-bg-light) 100%);
  border-radius: 12px;
  border: 2px dashed var(--card-border);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.niche-search-card__lock-icon {
  font-size: 48px;
  flex-shrink: 0;
}

.niche-search-card__lock-content {
  flex: 1;
}

.niche-search-card__lock-title {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-text);
  margin: 0 0 6px 0;
  transition: color 0.3s ease;
}

.niche-search-card__lock-desc {
  color: var(--color-text-light);
  margin: 0;
  font-size: 14px;
  transition: color 0.3s ease;
}

.niche-search-card__lock-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  white-space: nowrap;
}

.niche-search-card__subtitle--error {
  color: var(--color-danger);
  font-weight: 500;
}

.filters-bar__trial-message {
  color: var(--color-text-light);
  font-size: 14px;
  margin: 0;
  transition: color 0.3s ease;
}

.niche-search-card__input {
  flex: 1;
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: border-color 0.2s, background-color 0.3s ease, color 0.3s ease;
}

.niche-search-card__input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.niche-search-card__results {
  display: none;
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--card-border);
  transition: border-color 0.3s ease;
}

.niche-search-card__results-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--card-text);
  margin: 0 0 16px 0;
  transition: color 0.3s ease;
}

.niche-search-card__results-footer {
  margin-top: 16px;
  text-align: center;
}

/* =====================================================
   TOP NICHES - CHOICE SECTION RESPONSIVE
   ===================================================== */
@media (max-width: 768px) {
    #choice-section .section-card {
        padding: 24px !important;
    }
    
    #choice-section [style*="grid-template-columns"] {
        grid-template-columns: 1fr !important;
    }
    
    #choice-section button[id^="btn-"] {
        padding: 32px 24px !important;
    }
    
    #choice-section button[id^="btn-"] div[style*="font-size: 64px"] {
        font-size: 48px !important;
    }
    
    #choice-section button[id^="btn-"] div[style*="font-size: 22px"] {
        font-size: 18px !important;
    }
}

/* =========================================
   NOTIFICATION SYSTEM
   ========================================= */

.notification-container {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 500px;
    width: 100%;
    pointer-events: none;
}

.notification {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    pointer-events: all;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.notification--entering {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
}

.notification--leaving {
    opacity: 0;
    transform: scale(0.8) translateY(-20px);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(-20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.notification__icon {
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
}

.notification__content {
    flex: 1;
    font-size: 15px;
    line-height: 1.6;
    color: white;
    font-weight: 600;
}

.notification__close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    font-size: 24px;
    line-height: 1;
    color: white;
    cursor: pointer;
    padding: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    transition: all 0.2s;
    flex-shrink: 0;
}

.notification__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.notification--success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
}

.notification--error {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.notification--warning {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: white;
}

.notification--info {
    background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
    color: white;
}

@media (max-width: 640px) {
    .notification-container {
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: calc(100% - 32px);
        padding: 0 16px;
    }
    
    .notification {
        padding: 16px 18px;
    }
    
    .notification__icon {
        font-size: 22px;
    }
    
    .notification__content {
        font-size: 14px;
    }
}

/* ==========================================
   NICHE HIGHLIGHT (nouvelles niches)
   ========================================== */
.niche-highlight {
    position: relative;
    animation: nicheHighlightPulse 2s ease-in-out 3;
    background: linear-gradient(90deg, 
        rgba(34, 197, 94, 0.05) 0%, 
        rgba(34, 197, 94, 0.1) 50%, 
        rgba(34, 197, 94, 0.05) 100%
    ) !important;
    border-left: 4px solid var(--color-success, #22c55e) !important;
}

.niche-highlight::before {
    content: "✨ NOUVEAU";
    position: absolute;
    top: 10px;
    right: 10px;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    z-index: 10;
    animation: badgePulse 2s ease-in-out infinite;
}

@keyframes nicheHighlightPulse {
    0%, 100% {
        background: linear-gradient(90deg, 
            rgba(34, 197, 94, 0.05) 0%, 
            rgba(34, 197, 94, 0.1) 50%, 
            rgba(34, 197, 94, 0.05) 100%
        );
    }
    50% {
        background: linear-gradient(90deg, 
            rgba(34, 197, 94, 0.1) 0%, 
            rgba(34, 197, 94, 0.15) 50%, 
            rgba(34, 197, 94, 0.1) 100%
        );
    }
}

@keyframes badgePulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 2px 8px rgba(34, 197, 94, 0.3);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 4px 12px rgba(34, 197, 94, 0.5);
    }
}

/* Adaptation pour la vue grille (product-card) */
.product-card.niche-highlight {
    border: 2px solid var(--color-success, #22c55e);
    box-shadow: 0 4px 16px rgba(34, 197, 94, 0.2);
}

.product-card.niche-highlight::before {
    top: 15px;
    right: 15px;
}

/* Adaptation pour mobile */
@media (max-width: 768px) {
    .niche-highlight::before {
        font-size: 10px;
        padding: 3px 8px;
        top: 5px;
        right: 5px;
    }
}

/* ============================================
   ICÔNES SVG DANS LES BOUTONS
   ============================================ */

/* Icônes SVG dans les boutons d'action */
.btn-action img,
.btn-edit img,
.btn-delete img,
.btn-view img {
    width: 16px;
    height: 16px;
    filter: brightness(0) invert(1);
    vertical-align: middle;
}

/* ============================================
   GRILLE ET CARTES NICHES ADMIN
   ============================================ */

/* Grille des cartes niches */
.niches-existing__grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 24px;
    max-width: 100%;
}

/* Carte niche */
.niche-card {
    background-color: var(--color-white);
    border-radius: 12px;
    border: 1px solid var(--color-border);
    padding: 20px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.niche-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: #d1d5db;
}

/* En-tête de la carte */
.niche-card__header {
    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 12px;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-border);
}

.niche-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-text-dark);
    line-height: 1.4;
    margin: 0;
    flex: 1;
}

.niche-card__status {
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.niche-card__status--pending {
    background-color: #fef3c7;
    color: #92400e;
}

.niche-card__status--analyzed {
    background-color: #d1fae5;
    color: #065f46;
}

.niche-card__status--hidden {
    background-color: #e5e7eb;
    color: #374151;
}

.niche-card__status--error {
    background-color: #fee2e2;
    color: #991b1b;
}

/* Corps de la carte */
.niche-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 14px;
    color: var(--color-text-medium);
}

.niche-card__category,
.niche-card__subcategory,
.niche-card__keyword {
    margin: 0;
    line-height: 1.5;
}

.niche-card__metric {
    margin: 0;
}

/* Footer de la carte */
.niche-card__footer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding-top: 16px;
    border-top: 1px solid var(--color-border);
    margin-top: 16px;
}

/* Responsive */
@media (max-width: 1024px) {
    .niches-existing__grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }
}

@media (max-width: 768px) {
    .niches-existing__grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .niche-card__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ===================================
   CLASSES UTILITAIRES POUR FORMULAIRES & PAGES
   =================================== */

/* Alert Info (messages d'information) */
.alert-info {
    background-color: var(--badge-bg-info);
    border: 1px solid var(--color-info);
    color: var(--badge-text-info);
    padding: 16px;
    border-radius: 8px;
    margin-bottom: 24px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Breadcrumb Link */
.breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 24px;
    display: inline-block;
}

.breadcrumb-link:hover {
    text-decoration: underline;
}

/* Section Card avec marges */
.section-card--mb {
    margin-bottom: 24px;
}

/* Form helpers */
.form-helper-text {
    margin: 4px 0 0 0;
    font-size: 13px;
    color: #6b7280;
}

.form-helper-text--indented {
    margin-left: 26px;
}

/* Checkbox avec label */
.checkbox-wrapper {
    display: flex;
    align-items: center;
    cursor: pointer;
}

.checkbox-wrapper input[type="checkbox"] {
    width: 18px;
    height: 18px;
    margin-right: 8px;
    cursor: pointer;
}

.checkbox-wrapper__label {
    font-weight: 500;
    color: #374151;
}

/* Input avec prefix/suffix */
.input-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.input-wrapper__prefix {
    color: #6b7280;
    font-size: 14px;
}

.input-wrapper input {
    flex: 1;
}

/* Form actions avec justification */
.form-actions--end {
    justify-content: flex-end;
    padding-top: 24px;
    border-top: 1px solid #e5e7eb;
}

/* Gradient card pour crédits */
.credits-balance-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 24px;
    border-radius: 12px;
    margin-bottom: 24px;
}

.credits-balance-card__label {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    margin-bottom: 8px;
}

.credits-balance-card__value {
    color: white;
    font-size: 42px;
    font-weight: 700;
}

.credits-balance-card__sublabel {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-top: 4px;
}

/* Transaction history */
.transaction-history {
    max-height: 400px;
    overflow-y: auto;
}

.transaction-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
    margin-bottom: 8px;
}

.transaction-item__info {
    flex: 1;
}

.transaction-item__type {
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    margin-bottom: 4px;
}

.transaction-item__description {
    font-size: 13px;
    color: #6b7280;
}

.transaction-item__date {
    font-size: 12px;
    color: #9ca3af;
    margin-top: 4px;
}

.transaction-item__amount {
    text-align: right;
}

.transaction-item__value {
    font-size: 18px;
    font-weight: 700;
}

.transaction-item__value--positive {
    color: var(--color-success);
}

.transaction-item__value--negative {
    color: var(--color-danger);
}

.transaction-item__balance {
    font-size: 12px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* Empty state */
.empty-state {
    text-align: center;
    padding: 32px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.empty-state__icon {
    font-size: 48px;
    margin-bottom: 12px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* Divider avec titre */
.form-divider {
    border-top: 1px solid #e5e7eb;
    margin: 24px 0;
    padding-top: 24px;
}

.form-divider__title {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin-bottom: 8px;
}

.form-divider__description {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 16px;
}

/* Classes utilitaires pour tableaux admin */
.th-drag {
    width: 40px;
}

.th-actions {
    width: 200px;
}

.th-actions-sm {
    width: 120px;
}

.td-draggable {
    cursor: move;
}

.text-primary-color {
    color: var(--color-primary);
}

.text-gray-500 {
    color: var(--color-gray-500);
}

.text-red {
    color: var(--color-danger);
}

.form-inline {
    display: inline;
}

.badge-button {
    cursor: pointer;
    border: none;
}

.padding-2 {
    padding: 2rem;
}

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

/* Classes pour la page de gestion d'abonnement */
.credits-info {
    text-align: center;
    padding: 2rem 0;
}

.credits-info__value {
    font-size: 4rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.credits-info__label {
    font-size: 1.125rem;
    color: var(--color-text-light);
    font-weight: 500;
}

.credits-info__actions {
    text-align: center;
    margin-top: 1.5rem;
}

.modal-description {
    margin-bottom: 1.5rem;
}

.subscription-canceled-alert {
    margin-top: 2rem;
}

/* Subscription Canceled Banner */
.subscription-canceled-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    animation: slideIn 0.5s ease-out;
}

/* Subscription Downgrade Banner (variant purple) */
.subscription-canceled-banner--downgrade {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 2px solid #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.subscription-canceled-banner--downgrade .subscription-canceled-banner__title {
    color: #5b21b6;
}

.subscription-canceled-banner--downgrade .subscription-canceled-banner__text {
    color: #6b21a8;
}

.subscription-canceled-banner--downgrade .subscription-canceled-banner__text strong {
    color: #5b21b6;
}

.subscription-canceled-banner--downgrade .subscription-canceled-banner__note {
    color: #6b21a8;
}

.subscription-canceled-banner__icon {
    font-size: 3rem;
    flex-shrink: 0;
    line-height: 1;
}

.subscription-canceled-banner__content {
    flex: 1;
}

.subscription-canceled-banner__title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #92400e;
    margin-bottom: 0.5rem;
}

.subscription-canceled-banner__text {
    font-size: 1rem;
    color: #78350f;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.subscription-canceled-banner__text strong {
    font-weight: 700;
    color: #92400e;
}

.subscription-canceled-banner__actions {
    margin-top: 1rem;
}

.subscription-canceled-banner__note {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: #78350f;
    font-style: italic;
}

@media (max-width: 768px) {
    .subscription-canceled-banner {
        flex-direction: column;
        text-align: center;
    }
    
    .subscription-canceled-banner__icon {
        font-size: 2.5rem;
    }
}

/* Subscription Details */
.subscription-details {
    background: var(--color-bg-card);
    border-radius: 12px;
    padding: 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.subscription-details__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    padding: 1rem 0;
    border-bottom: 1px solid var(--color-border);
}

.subscription-details__row:last-child {
    border-bottom: none;
}

.subscription-details__row--highlight {
    background: #fef2f2;
    padding: 1rem;
    margin: 0 -1rem;
    padding-left: 1rem;
    padding-right: 1rem;
    border-radius: 8px;
}

.subscription-details__label {
    font-weight: 500;
    color: var(--color-text-light);
}

.subscription-details__value {
    font-weight: 500;
    color: var(--color-text-dark);
    text-align: left;
}

.subscription-details__value small {
    font-size: 0.875rem;
    font-weight: 400;
    display: block;
    margin-top: 0.5rem;
}

.subscription-actions {
    margin-top: 2rem;
    text-align: center;
}

.subscription-actions__cancel-button {
    background: none;
    border: none;
    color: var(--color-text-light);
    text-decoration: underline;
    font-size: 0.875rem;
    cursor: pointer;
    padding: 0.5rem 1rem;
    transition: color 0.2s;
}

.subscription-actions__cancel-button:hover {
    color: var(--color-danger);
}

.subscription-actions__note {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-top: 1rem;
}

@media (max-width: 768px) {
    .subscription-details__row {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
    
    .subscription-details__label {
        font-weight: 600;
        color: var(--color-text-dark);
    }
}

/* ===================================
   ADMIN SETTINGS PAGE
   =================================== */

/* Settings Table */
.settings-table {
    width: 100%;
    border-collapse: collapse;
}

.settings-table thead tr {
    background-color: var(--table-header-bg);
    border-bottom: 2px solid var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.settings-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-dark);
    font-size: 13px;
    transition: color 0.3s ease;
}

.settings-table__th-right {
    text-align: right;
    width: 200px;
}

.settings-table__th-key {
    width: 20%;
}

.settings-table__th-value {
    width: 25%;
}

.settings-table tbody tr {
    border-bottom: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.settings-table tbody tr:hover {
    background-color: var(--table-row-hover);
    transition: background-color 0.2s ease;
}

.settings-table td {
    padding: 12px 16px;
    font-size: 14px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.settings-table__key {
    color: var(--card-text);
    font-weight: 500;
    font-family: 'Courier New', monospace;
}

.settings-table__value {
    color: var(--color-text-light);
}

.settings-table__description {
    color: var(--color-text-light);
}

.settings-table__actions {
    text-align: right;
}

.settings-table__empty {
    padding: 24px;
    text-align: center;
    color: var(--color-text-light);
    font-size: 14px;
    transition: color 0.3s ease;
}

/* Settings Value Display/Edit */
.value-display,
.desc-display {
    word-break: break-word;
}

.value-edit {
    display: none;
}

.value-edit__inputs {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.value-edit__actions {
    display: flex;
    gap: 8px;
}

/* Settings Add Form */
.settings-add-grid {
    display: grid;
    grid-template-columns: 1fr 2fr 2fr auto;
    gap: 12px;
    align-items: flex-end;
}

/* Settings Action Buttons */
.settings-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.settings-actions__delete {
    display: inline-block;
}

/* Settings Edit Input */
.settings-edit-input {
    padding: 8px 12px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    font-size: 14px;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.settings-edit-input::placeholder {
    color: var(--input-placeholder);
}

/* Info Banner */
.info-banner {
    display: flex;
    gap: 16px;
    padding: 16px;
    border-radius: 8px;
}

.info-banner--warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    margin-top: 24px;
}

[data-theme="dark"] .info-banner--warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
}

.info-banner--info {
    background: #eff6ff;
    border: 1px solid #93c5fd;
}

[data-theme="dark"] .info-banner--info {
    background: rgba(37, 99, 235, 0.15);
    border-color: #3b82f6;
}

.info-banner--danger {
    background: #fef2f2;
    border: 1px solid #fca5a5;
}

[data-theme="dark"] .info-banner--danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

.info-banner__icon {
    flex-shrink: 0;
}

.info-banner--warning .info-banner__icon {
    color: #d97706;
}

[data-theme="dark"] .info-banner--warning .info-banner__icon {
    color: #fbbf24;
}

.info-banner--info .info-banner__icon {
    color: #2563eb;
}

[data-theme="dark"] .info-banner--info .info-banner__icon {
    color: #60a5fa;
}

.info-banner--danger .info-banner__icon {
    color: #dc2626;
}

[data-theme="dark"] .info-banner--danger .info-banner__icon {
    color: #f87171;
}

.info-banner__content {
    flex: 1;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.info-banner__title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.info-banner--warning .info-banner__title {
    color: #92400e;
}

[data-theme="dark"] .info-banner--warning .info-banner__title {
    color: #fbbf24;
}

.info-banner--info .info-banner__title {
    color: #1e40af;
}

[data-theme="dark"] .info-banner--info .info-banner__title {
    color: #60a5fa;
}

.info-banner--danger .info-banner__title {
    color: #991b1b;
}

[data-theme="dark"] .info-banner--danger .info-banner__title {
    color: #f87171;
}

.info-banner__text {
    font-size: 14px;
    line-height: 1.6;
    margin: 0;
}

.info-banner--warning .info-banner__text {
    color: #78350f;
}

[data-theme="dark"] .info-banner--warning .info-banner__text {
    color: #fbbf24;
}

.info-banner--info .info-banner__text {
    color: #1e3a8a;
}

[data-theme="dark"] .info-banner--info .info-banner__text {
    color: #93c5fd;
}

.info-banner--danger .info-banner__text {
    color: #7f1d1d;
}

[data-theme="dark"] .info-banner--danger .info-banner__text {
    color: #fca5a5;
}

/* Test Routes Grid */
.test-routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
}

.test-route-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s, background-color 0.3s ease, border-color 0.3s ease;
}

.test-route-card:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.test-route-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.test-route-card__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--card-text);
    margin: 0;
    transition: color 0.3s ease;
}

.test-route-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.test-route-badge--email {
    background: #dbeafe;
    color: #1e40af;
}

[data-theme="dark"] .test-route-badge--email {
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
}

.test-route-badge--api {
    background: #d1fae5;
    color: #065f46;
}

[data-theme="dark"] .test-route-badge--api {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.test-route-card__description {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin: 0 0 16px 0;
    transition: color 0.3s ease;
}

.test-route-card__description code {
    background: #fee2e2;
    color: #991b1b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}

.test-route-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.test-route-card__path {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #6b7280;
    background: white;
    padding: 6px 10px;
    border-radius: 6px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.test-route-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    white-space: nowrap;
}

.test-route-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.test-route-btn svg {
    margin-left: 4px;
}

/* Loading Spinner Inline (for test button) */
.spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

/* Responsive - Test Routes */
@media (max-width: 768px) {
    .test-routes-grid {
        grid-template-columns: 1fr;
    }

    .test-route-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .test-route-card__path {
        text-align: center;
    }

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

/* ===================================
   CREDITS BREAKDOWN (/buy-credits)
   =================================== */

.credits-breakdown {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 2rem;
    flex-wrap: wrap;
}

.credits-breakdown__item {
    text-align: center;
    min-width: 150px;
}

.credits-breakdown__value {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.credits-breakdown__label {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 0.25rem;
}

.credits-breakdown__description {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.credits-breakdown__divider {
    font-size: 2rem;
    font-weight: 300;
    color: var(--color-gray-400);
}

.credits-breakdown__item--total .credits-breakdown__value {
    font-size: 4rem;
    color: var(--color-success);
}

.credits-breakdown__item--total .credits-breakdown__label {
    font-size: 1.125rem;
}

@media (max-width: 768px) {
    .credits-breakdown {
        flex-direction: column;
        gap: 1.5rem;
    }

    .credits-breakdown__divider {
        transform: rotate(90deg);
    }

    .credits-breakdown__value {
        font-size: 2.5rem;
    }

    .credits-breakdown__item--total .credits-breakdown__value {
        font-size: 3.5rem;
    }
}

/* ===================================
   CREDIT PLANS (/buy-credits)
   =================================== */

.credit-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.credit-plan {
    position: relative;
    background: white;
    border: 2px solid var(--color-gray-200);
    border-radius: 16px;
    padding: 2rem;
    text-align: center;
    transition: all 0.3s ease;
}

.credit-plan:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}

.credit-plan--popular {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(0, 122, 255, 0.15);
}

.credit-plan__badge {
    position: absolute;
    top: -12px;
    right: 20px;
    background: var(--color-primary);
    color: white;
    padding: 0.5rem 1rem;
    border-radius: 20px;
    font-size: 0.875rem;
    font-weight: 600;
}

.credit-plan__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
    margin-bottom: 1.5rem;
}

.credit-plan__credits {
    margin-bottom: 1rem;
}

.credit-plan__credits-number {
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
}

.credit-plan__credits-label {
    font-size: 1rem;
    color: var(--color-gray-600);
    display: block;
    margin-top: 0.25rem;
}

.credit-plan__price {
    margin: 1.5rem 0;
}

.credit-plan__amount {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-gray-900);
}

.credit-plan__price-per-credit {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: 1rem;
}

.credit-plan__description {
    color: var(--color-gray-600);
    margin: 1rem 0;
    line-height: 1.6;
    font-size: 0.875rem;
}

.btn-block {
    width: 100%;
    margin-top: 1.5rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 1.5rem;
}

.info-item h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-gray-900);
    margin-bottom: 0.5rem;
}

.info-item p {
    color: var(--color-gray-600);
    line-height: 1.6;
}

/* ===================================
   ADMIN ACTIONS & DRAG & DROP
   =================================== */

.admin-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.dragging {
    opacity: 0.5;
    background: var(--color-gray-100);
}

/* Text utility classes */
.text-success {
    color: #10b981;
}

.text-muted {
    color: #6b7280;
}


/* ===================================
   TRIAL BANNER & QUOTA DISPLAY
   =================================== */

.quota-info-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.quota-info-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.quota-info-card__header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--card-text);
    margin: 0;
    transition: color 0.3s ease;
}

.quota-info-card__period {
    font-size: 14px;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.quota-info-card__stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.quota-stat {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
    transition: background-color 0.3s ease;
}

.quota-stat__label {
    display: block;
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 6px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.quota-stat__value {
    display: block;
    font-size: 24px;
    font-weight: 700;
    color: var(--card-text);
    transition: color 0.3s ease;
}


/* ===================================
   LOCKED NICHES
   =================================== */

.locked-niches-section {
    grid-column: 1 / -1;
    text-align: center;
    padding: 40px 20px 20px;
    background: linear-gradient(to bottom, transparent, var(--color-bg-secondary));
    transition: background 0.3s ease;
}

.locked-niches-section__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.locked-niches-section__subtitle {
    font-size: 16px;
    color: var(--color-text-light);
    margin: 0 0 var(--spacing-lg) 0;
    transition: color 0.3s ease;
}

.locked-niches-section .btn {
    margin-top: var(--spacing-md);
    display: inline-flex;
}

.product-card--locked {
    position: relative;
    overflow: hidden;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.product-card--locked:hover {
    transform: scale(1.02);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    opacity: 1;
}

.product-card__overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    z-index: 10;
    backdrop-filter: blur(4px);
}

.product-card__lock-icon {
    width: 40px;
    height: 40px;
    color: var(--color-primary);
    margin-bottom: 8px;
}

.product-card__lock-text {
    font-size: 16px;
    font-weight: 600;
    color: #374151;
    margin: 0 0 16px 0;
}

.product-card__content--blurred {
    filter: blur(6px);
    pointer-events: none;
}


/* Table locked styles */
.locked-niches-row {
    background: linear-gradient(to bottom, transparent, #f9fafb);
}

.locked-niches-header {
    padding: 40px 20px 20px !important;
    text-align: center;
    background: transparent;
}

.products-table__row--locked {
    opacity: 0.7;
    position: relative;
}

.products-table__row--locked:hover {
    opacity: 0.9;
    background-color: #f9fafb;
}

.products-table__product--blurred,
.products-table__td--blurred {
    filter: blur(4px);
    pointer-events: none;
}

.locked-cell {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-start;
}

.locked-cell svg {
    color: var(--color-primary);
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Icône qui tourne (pour statut "analyzing") */
.spinning-icon {
    display: inline-block;
    animation: spin 1s linear infinite;
}


/* ===================================
   ADMIN NICHES - CLEAN CSS (NO INLINE STYLES)
   =================================== */

/* Alerts */
.alert {
    margin-bottom: 24px;
    padding: 16px;
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.alert-success {
    background-color: var(--badge-bg-success);
    border: 1px solid var(--color-success);
    color: var(--badge-text-success);
}

.alert-error {
    background-color: var(--badge-bg-danger);
    border: 1px solid var(--color-danger);
    color: var(--badge-text-danger);
}

/* Section Headers */
.section-card__header {
    margin-bottom: 24px;
}

.section-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.section-card__description {
    font-size: 14px;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.section-card__actions {
    display: flex;
    gap: 12px;
}

.section-card__actions--centered {
    align-items: center;
}

/* Categories Tree */
.categories-tree-container {
    min-height: 400px;
}

/* Loading States */
.loading-container {
    padding: 48px;
    text-align: center;
    color: #6b7280;
}

.loading-spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 12px;
}

.loading-spinner--sm {
    width: 20px;
    height: 20px;
    border-width: 3px;
    margin: 0 auto 8px;
}

.loading-text {
    font-size: 14px;
}

/* Search & Filters Container */
.filters-container {
    margin-bottom: 24px;
}

.filters-row {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
}

.filter-label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #374151;
}

/* Search Input */
.search-input {
    width: 100%;
    padding: 10px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    transition: border-color 0.2s;
    margin-bottom: 16px;
}

.search-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Filter Select */
.filter-select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
}

.filter-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Tables */
.niches-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.niches-table thead tr {
    background-color: var(--table-header-bg);
    border-bottom: 2px solid var(--card-border);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.niches-table th {
    padding: 12px 8px;
    text-align: left;
    font-weight: 600;
    color: var(--color-text-dark);
    transition: color 0.3s ease;
}

.niches-table th--center {
    text-align: center;
}

.niches-table th--checkbox {
    width: 40px;
    text-align: center;
}

.niches-table th--trial {
    width: 60px;
}

.niches-table th--analysis {
    width: 80px;
}

.niches-table th--actions {
    width: 100px;
}

.niches-table__checkbox {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.niches-table td {
    padding: 12px 8px;
    text-align: left;
    color: var(--card-text);
    border-bottom: 1px solid var(--card-border);
    vertical-align: middle;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.niches-table td.td--center {
    text-align: center;
}

.niches-table td.td--checkbox {
    width: 40px;
    text-align: center;
    padding: 8px;
}

/* Hover effect sur les lignes */
.niches-table tbody tr:hover {
    background-color: var(--table-row-hover);
    transition: background-color 0.2s ease;
}

/* Classes pour les cellules générées en JavaScript */
.table-cell {
    padding: 12px 8px;
    text-align: left;
    vertical-align: middle;
}

.table-cell--center {
    text-align: center;
}

.table-cell--name {
    font-weight: 500;
    color: #111827;
}

.table-cell--small {
    font-size: 12px;
    color: #6b7280;
}

/* Table Container */
.table-container {
    display: block;
    overflow-x: auto;
}

.table-container--hidden {
    display: none !important;
}

/* ===================================================================
   PAGINATION
   =================================================================== */

.pagination-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--spacing-lg) 0;
    margin-top: var(--spacing-md);
}

.pagination {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    width: 100%;
    max-width: 1000px;
}

.pagination__per-page {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--card-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

.pagination__per-page label {
    margin: 0;
    white-space: nowrap;
}

.pagination__per-page-select {
    padding: 6px 32px 6px 12px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    font-size: 14px;
    color: var(--input-text);
    cursor: pointer;
    transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 80px;
}

[data-theme="dark"] .pagination__per-page-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23e5e7eb' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
}

.pagination__per-page-select:hover {
    border-color: #2563eb;
}

.pagination__per-page-select:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.pagination__info {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-light);
    font-weight: 500;
    transition: color 0.3s ease;
}

.pagination__buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination__btn {
    min-width: 40px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid var(--card-border);
    background-color: var(--card-bg);
    color: var(--card-text);
    font-size: 14px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.pagination__btn:hover:not(:disabled) {
    background-color: var(--color-bg-hover);
    border-color: var(--card-border);
    color: var(--card-text);
}

.pagination__btn:active:not(:disabled) {
    transform: translateY(1px);
}

.pagination__btn--active {
    background-color: var(--color-primary);
    color: white;
    border-color: var(--color-primary);
    cursor: default;
}

.pagination__btn--active:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.pagination__btn:disabled {
    cursor: not-allowed;
    opacity: 0.6;
}

.pagination__dots {
    padding: 8px 4px;
    color: var(--color-text-light);
    font-weight: 600;
    user-select: none;
    transition: color 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .pagination__per-page {
        font-size: 12px;
        width: 100%;
        justify-content: center;
    }

    .pagination__per-page-select {
        font-size: 12px;
        padding: 5px 28px 5px 10px;
        min-width: 70px;
    }

    .pagination__info {
        font-size: 12px;
    }

    .pagination__btn {
        min-width: 36px;
        height: 36px;
        padding: 6px 10px;
        font-size: 13px;
    }

    .pagination__buttons {
        gap: 4px;
    }
}

/* ===================================================================
   PROGRESS MODAL (Génération de niches)
   =================================================================== */

.progress-modal {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

/* Barre de progression */
.progress-bar {
    position: relative;
    width: 100%;
    height: 40px;
    background-color: #f3f4f6;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-bar__fill {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), #60a5fa);
    transition: width 0.3s ease;
    border-radius: 8px;
}

.progress-bar__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 600;
    color: #111827;
    z-index: 1;
}

/* Statut */
.progress-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: #f9fafb;
    border-radius: 8px;
    border-left: 4px solid var(--color-primary);
}

.progress-status__icon {
    font-size: 24px;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.1);
    }
}

.progress-status__text {
    font-size: 15px;
    font-weight: 500;
    color: #374151;
    flex: 1;
}

/* Compteurs */
.progress-counters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.progress-counter {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--spacing-md);
    background-color: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.progress-counter__value {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--spacing-xs);
}

.progress-counter__label {
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    text-align: center;
}

/* Message d'info */
.progress-info {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background-color: #eff6ff;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    color: #1e40af;
}

.progress-info svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.progress-info p {
    margin: 0;
    font-size: 13px;
    line-height: 1.5;
}

/* Actions */
.progress-actions {
    display: flex;
    justify-content: center;
    padding-top: var(--spacing-md);
    border-top: 1px solid #e5e7eb;
}

/* Responsive */
@media (max-width: 768px) {
    .progress-counters {
        grid-template-columns: 1fr;
        gap: var(--spacing-sm);
    }
    
    .progress-counter__value {
        font-size: 24px;
    }
}

/* Hidden Elements */
.hidden {
    display: none;
}

/* Constructor Documentation Box */
.constructor-doc-box {
    margin-bottom: 24px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.constructor-doc-content {
    display: flex;
    align-items: start;
    gap: 16px;
}

.constructor-doc-icon {
    font-size: 32px;
    line-height: 1;
}

.constructor-doc-text {
    flex: 1;
}

.constructor-doc-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 700;
}

.constructor-doc-description {
    font-size: 13px;
    line-height: 1.6;
    opacity: 0.95;
}

.constructor-doc-description p {
    margin: 0 0 12px 0;
}

.constructor-doc-description ul {
    margin: 0 0 12px 0;
    padding-left: 20px;
}

.constructor-doc-description ul:last-child {
    margin-bottom: 0;
}

/* Format Help Box */
.format-help-box {
    margin-bottom: 16px;
}

.format-help-content {
    padding: 12px;
    background-color: #fffbeb;
    border: 1px solid #fcd34d;
    border-radius: 8px;
    font-size: 14px;
    color: #92400e;
}

/* Constructor Textarea */
.constructor-textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    font-family: 'Courier New', monospace;
    resize: vertical;
    min-height: 600px;
    overflow-y: hidden;
    box-sizing: border-box;
}

.constructor-textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Constructor Loading */
.constructor-loading {
    display: none;
    margin-top: 16px;
    text-align: center;
    color: #6b7280;
}

.constructor-loading--visible {
    display: block;
}

/* Constructor Actions */
.constructor-actions {
    margin-top: 16px;
    text-align: right;
}

/* Form Elements */
.form-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.form-group {
    display: block;
}

.form-label {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.form-label__hint {
    font-size: 12px;
    color: #6b7280;
    font-weight: 400;
}

.form-label__required {
    color: #ef4444;
}

.form-input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    font-size: 14px;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: border-color 0.2s, background-color 0.3s ease, color 0.3s ease;
}

.form-input::placeholder {
    color: var(--input-placeholder);
}

.form-input:focus {
    outline: none;
    border-color: #2563eb;
}

.form-input--monospace {
    font-family: monospace;
}

.form-textarea {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    font-size: 14px;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: border-color 0.2s, background-color 0.3s ease, color 0.3s ease;
    resize: vertical;
}

.form-textarea::placeholder {
    color: var(--input-placeholder);
}

.form-textarea:focus {
    outline: none;
    border-color: #2563eb;
}

.form-select {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid var(--input-border);
    border-radius: 8px;
    font-size: 14px;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.form-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Checkbox Group */
.checkbox-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.checkbox-group__input {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.checkbox-group__label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    user-select: none;
}

.checkbox-group--highlight {
    padding: 14px;
    background-color: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
}

.checkbox-group--highlight .checkbox-group__label {
    color: #166534;
}

/* Form Actions */
.form-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    margin-top: 8px;
}

/* Delete Button (initially hidden) */
.btn--delete-selected {
    display: none;
}

.btn--delete-selected--visible {
    display: inline-flex;
}

/* ===================================
   NICHES MANAGEMENT PAGE STYLES
   =================================== */

.section-card {
    background: var(--card-bg);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease;
}

#tab-existing button:hover,
#tab-constructor button:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    transition: all 0.2s;
}

#tab-existing button:active,
#tab-constructor button:active {
    transform: translateY(0);
}

#tab-existing select:focus,
#tab-existing input:focus,
#tab-constructor textarea:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.view-toggle-btn {
    transition: all 0.2s;
}

.view-toggle-btn:hover {
    background-color: #e5e7eb;
}

.view-toggle-btn--active {
    background-color: white !important;
    color: #2563eb !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#existing-niches-table tbody tr {
    border-bottom: 1px solid #f3f4f6;
    transition: background-color 0.15s;
}

#existing-niches-table tbody tr:hover {
    background-color: #f9fafb;
}

/* Section de génération d'arborescence (Étape 2) */
.generate-tree-section {
    margin-top: 24px;
    padding: 24px;
    background: #eff6ff;
    border: 2px solid #3b82f6;
    border-radius: 12px;
}

.generate-tree-section .step-number {
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.generate-tree-section .btn {
    font-size: 16px;
    padding: 14px 32px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.4);
    transition: all 0.3s ease;
}

.generate-tree-section .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.6);
}

/* Accordéon du constructeur */
.constructor-accordion {
    margin-top: 20px;
}

.constructor-accordion__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 500;
    color: #334155;
    transition: all 0.2s ease;
}

.constructor-accordion__toggle:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.constructor-accordion__icon {
    display: inline-block;
    transition: transform 0.2s ease;
    font-size: 14px;
}

.constructor-accordion__toggle.is-open .constructor-accordion__icon {
    transform: rotate(90deg);
}

.constructor-accordion__text {
    flex: 1;
    text-align: left;
}

.constructor-accordion__content {
    display: none;
    margin-top: 20px;
}

.constructor-accordion__content.is-open {
    display: block;
}

/* Textarea avec scroll */
.constructor-textarea {
    width: 100%;
    min-height: 400px;
    max-height: 600px;
    padding: 16px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: vertical;
    overflow-y: auto;
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.constructor-textarea::placeholder {
    color: var(--input-placeholder);
}

/* Résultat de génération d'arborescence */
.tree-generation-result {
    margin-top: 24px;
    padding: 24px;
    background: #f8fafc;
    border: 2px solid #3b82f6;
    border-radius: 12px;
}

.tree-generation-result__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.tree-generation-result__title {
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
    margin: 0;
}

.tree-generation-result__stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
}

.stat-badge {
    display: flex;
    flex-direction: column;
    padding: 12px 20px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    min-width: 150px;
}

.stat-badge__label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.stat-badge__value {
    font-size: 24px;
    font-weight: 700;
    color: #3b82f6;
}

.tree-generation-result__preview {
    max-height: 500px;
    overflow-y: auto;
    background: white;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 20px;
}

.tree-generation-result__actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
}

/* Section de comparaison */
.tree-comparison {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
}

.tree-comparison__title {
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 16px 0;
}

.tree-comparison__stats {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.comparison-badge {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border-radius: 8px;
    border: 2px solid;
}

.comparison-badge--new {
    background: #ecfdf5;
    border-color: #10b981;
}

.comparison-badge--existing {
    background: #eff6ff;
    border-color: #3b82f6;
}

.comparison-badge__icon {
    font-size: 24px;
    line-height: 1;
}

.comparison-badge--new .comparison-badge__icon {
    color: #10b981;
}

.comparison-badge--existing .comparison-badge__icon {
    color: #3b82f6;
}

.comparison-badge__content {
    display: flex;
    flex-direction: column;
}

.comparison-badge__label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.comparison-badge__value {
    font-size: 28px;
    font-weight: 700;
    line-height: 1.2;
}

.comparison-badge--new .comparison-badge__value {
    color: #10b981;
}

.comparison-badge--existing .comparison-badge__value {
    color: #3b82f6;
}

.tree-comparison__note {
    margin: 0;
    padding: 12px;
    background: #fef3c7;
    border-left: 4px solid #f59e0b;
    border-radius: 4px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.5;
}

.tree-item {
    padding: 8px 12px;
    margin: 4px 0;
    border-left: 3px solid #3b82f6;
    background: #f8fafc;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
}

.tree-item--depth-0 {
    border-left-color: #ef4444;
    font-weight: 700;
    font-size: 14px;
}

.tree-item--depth-1 {
    margin-left: 20px;
    border-left-color: #f59e0b;
    font-weight: 600;
}

.tree-item--depth-2 {
    margin-left: 40px;
    border-left-color: #10b981;
}

.tree-item--depth-3 {
    margin-left: 60px;
    border-left-color: #3b82f6;
}

.tree-item--depth-4 {
    margin-left: 80px;
    border-left-color: #8b5cf6;
}

.tree-item--depth-5 {
    margin-left: 100px;
    border-left-color: #ec4899;
}

.tree-item--existing {
    background: #eff6ff;
    border-left-color: #3b82f6 !important;
    opacity: 0.7;
}

.tree-item--existing::after {
    content: " ✓";
    color: #3b82f6;
    font-weight: bold;
    margin-left: 8px;
}

.tree-item--new {
    background: #ecfdf5;
    border-left-color: #10b981 !important;
    font-weight: 600;
}

.tree-item--new::after {
    content: " ➕";
    color: #10b981;
    font-weight: bold;
    margin-left: 8px;
}

#generate-tree-loading {
    display: none;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    background: #eff6ff;
    border: 1px solid #3b82f6;
    border-radius: 8px;
    margin-top: 16px;
    color: #1e40af;
    font-weight: 500;
}

#generate-tree-loading .loading-spinner {
    width: 20px;
    height: 20px;
    border: 3px solid #bfdbfe;
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Constructor Warning Box */
.constructor-warning-box {
    margin-top: 20px;
    padding: 20px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
}

/* Step Header (commun pour étapes 1 et 2) */
.step-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 12px;
}

.step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-weight: 700;
    font-size: 18px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(59, 130, 246, 0.4);
}

.step-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #1e293b;
}

.step-description {
    margin: 0 0 16px 0;
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

/* Section de découpage du fichier */
.split-file-section {
    margin-top: 24px;
    padding: 24px;
    background: #fef3c7;
    border: 2px solid #f59e0b;
    border-radius: 12px;
}

.split-file-section .step-number {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}

.split-controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.split-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.split-label {
    font-size: 13px;
    font-weight: 500;
    color: #78350f;
}

.split-input {
    width: 150px;
    padding: 10px 14px;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: white;
    color: #78350f;
}

.split-input:focus {
    outline: none;
    border-color: #f59e0b;
    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

/* Résultat du découpage */
.split-result {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border: 2px solid #fbbf24;
    border-radius: 8px;
}

.split-result-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.split-result-header {
    padding-bottom: 16px;
    border-bottom: 2px solid #fef3c7;
}

.split-result-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #78350f;
}

.split-result-info {
    margin: 0;
    font-size: 14px;
    color: #92400e;
    line-height: 1.8;
}

.split-result-parts {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.split-part-card {
    padding: 16px;
    background: #fef3c7;
    border: 2px solid #fbbf24;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.split-part-header {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.split-part-number {
    font-size: 14px;
    font-weight: 700;
    color: #78350f;
}

.split-part-lines {
    font-size: 12px;
    color: #92400e;
}

.split-result-instructions {
    padding: 16px;
    background: #eff6ff;
    border: 2px solid #bfdbfe;
    border-radius: 8px;
}

.split-result-instructions h5 {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e40af;
}

.split-result-instructions ol {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: #1e40af;
    line-height: 1.8;
}

.split-result-instructions ul {
    margin: 6px 0;
    padding-left: 20px;
    list-style-type: circle;
}

.split-result-instructions li {
    margin: 4px 0;
}

/* Barre de progression */
.split-progress {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border: 2px solid #3b82f6;
    border-radius: 8px;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.progress-title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    color: #1e293b;
}

.progress-status {
    font-size: 14px;
    color: #3b82f6;
    font-weight: 500;
}

.progress-bar {
    width: 100%;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 16px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6, #2563eb);
    transition: width 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    font-weight: 600;
}

.progress-details {
    font-size: 14px;
    color: #64748b;
    line-height: 1.6;
}

.progress-detail-text {
    margin: 8px 0;
    padding: 12px;
    background: #eff6ff;
    border-left: 4px solid #3b82f6;
    border-radius: 4px;
}

/* Résultats des parties */
.parts-results {
    margin-top: 16px;
}

.parts-results-title {
    margin: 0 0 12px 0;
    font-size: 14px;
    font-weight: 600;
    color: #1e293b;
}

.parts-results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.part-result-card {
    padding: 12px;
    border-radius: 6px;
    border: 2px solid;
}

.part-result-card--success {
    background: #ecfdf5;
    border-color: #10b981;
}

.part-result-card--error {
    background: #fef2f2;
    border-color: #ef4444;
}

.part-result-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.part-result-number {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}

.part-result-icon {
    font-size: 16px;
}

.part-result-stats {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 12px;
    color: #64748b;
}

.part-result-error {
    font-size: 12px;
    color: #dc2626;
}

/* Section d'édition d'arborescence */
.edit-tree-section {
    margin-top: 24px;
    padding: 24px;
    background: #f8fafc;
    border: 2px solid #10b981;
    border-radius: 12px;
}

.edit-tree-section .step-number {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4);
}

.tree-editor {
    margin-bottom: 20px;
}

.tree-editor-stats {
    display: flex;
    gap: 16px;
    margin-bottom: 20px;
    padding: 16px;
    background: white;
    border-radius: 8px;
    border: 2px solid #e2e8f0;
}

.editor-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.editor-stat-label {
    font-size: 12px;
    color: #64748b;
    font-weight: 500;
    text-transform: uppercase;
}

.editor-stat-value {
    font-size: 28px;
    font-weight: 700;
}

.editor-stat-value--new {
    color: #10b981;
}

.editor-stat-value--existing {
    color: #3b82f6;
}

.tree-editor-content {
    background: white;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    max-height: 600px;
    overflow-y: auto;
}

.editable-tree-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.editable-tree-item {
    margin: 6px 0;
}

.editable-tree-item-content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    transition: all 0.2s;
}

.editable-tree-item-content:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.editable-tree-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
}

.editable-tree-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.editable-tree-actions {
    display: flex;
    gap: 4px;
}

.tree-btn {
    padding: 6px 10px;
    border: none;
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s;
    border: 1px solid #e2e8f0;
}

.tree-btn:hover {
    transform: scale(1.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.tree-btn--add:hover {
    background: #ecfdf5;
    border-color: #10b981;
}

.tree-btn--delete:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

.editable-tree-item > .editable-tree-list {
    margin-left: 32px;
    margin-top: 6px;
    padding-left: 16px;
    border-left: 2px solid #e2e8f0;
}

.tree-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    align-items: center;
}

.constructor-warning-content {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.constructor-warning-icon {
    font-size: 28px;
    line-height: 1;
    flex-shrink: 0;
}

.constructor-warning-text {
    flex: 1;
}

.constructor-warning-title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: #92400e;
}

.constructor-warning-text p {
    margin: 8px 0;
    font-size: 14px;
    color: #78350f;
    line-height: 1.6;
}

.constructor-warning-text code {
    background: #fde68a;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #78350f;
}

.constructor-warning-text ul {
    margin: 8px 0;
    padding-left: 24px;
    list-style-type: disc;
}

.constructor-warning-text li {
    margin: 6px 0;
    font-size: 14px;
    color: #78350f;
    line-height: 1.6;
}

/* ===============================================
   ONBOARDING TOP-NICHES
   =============================================== */

.onboarding-container {
    max-width: 900px;
    margin: 0 auto;
    padding: var(--spacing-xl) 0;
}

.onboarding-card {
    background: white;
    border-radius: 16px;
    padding: var(--spacing-2xl);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.onboarding-card__icon {
    font-size: 48px;
    text-align: center;
    margin-bottom: var(--spacing-md);
}

.onboarding-card__title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    color: #111827;
    margin: 0 0 var(--spacing-md) 0;
}

.onboarding-card__subtitle {
    font-size: 16px;
    color: #6b7280;
    text-align: center;
    line-height: 1.6;
    margin-bottom: var(--spacing-xl);
}

/* Boutons principaux */
.onboarding-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-2xl);
}

.onboarding-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-2xl);
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.onboarding-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}

.onboarding-btn--search {
    border-color: var(--color-primary);
    background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
}

.onboarding-btn--search:hover {
    border-color: var(--color-primary-dark);
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.onboarding-btn--browse {
    border-color: #10b981;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.onboarding-btn--browse:hover {
    border-color: #059669;
    background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.onboarding-btn__icon {
    color: var(--color-primary);
}

.onboarding-btn--browse .onboarding-btn__icon {
    color: #10b981;
}

.onboarding-btn__text {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
}

.onboarding-btn__hint {
    font-size: 13px;
    color: #6b7280;
}

/* Recherche */
.onboarding-search {
    margin-bottom: var(--spacing-xl);
}

.onboarding-search__input {
    width: 100%;
    padding: var(--spacing-md);
    font-size: 16px;
    border: 2px solid #e5e7eb;
    border-radius: 8px;
    transition: border-color 0.2s;
}

.onboarding-search__input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.onboarding-search__results {
    margin-top: var(--spacing-md);
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
}

.onboarding-search__result {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: background-color 0.2s;
}

.onboarding-search__result:hover {
    background-color: #f9fafb;
}

.onboarding-search__result:last-child {
    border-bottom: none;
}

.onboarding-search__result--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.onboarding-search__result-checkbox {
    width: 20px;
    height: 20px;
    cursor: pointer;
}

.onboarding-search__result-content {
    flex: 1;
}

.onboarding-search__result-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.onboarding-search__result-path {
    font-size: 13px;
    color: #9ca3af;
    margin-top: 2px;
}

.onboarding-search__no-results {
    padding: var(--spacing-xl);
    text-align: center;
    color: #9ca3af;
}

/* Navigation des catégories */
.onboarding-browse {
    margin-bottom: var(--spacing-xl);
}

.onboarding-browse__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
}

.onboarding-browse__title {
    font-size: 18px;
    font-weight: 600;
    color: #111827;
    margin: 0;
}

.onboarding-categories-tree {
    max-height: 500px;
    overflow-y: auto;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: white;
    padding: var(--spacing-md);
}

.onboarding-categories-tree__loading {
    padding: var(--spacing-2xl);
    text-align: center;
    color: #9ca3af;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
}

.onboarding-error {
    padding: var(--spacing-xl);
    text-align: center;
    color: #ef4444;
}

/* Nœud de catégorie */
.category-tree-node {
    margin-bottom: 4px;
}

.category-tree-node__content {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.category-tree-node__content:hover {
    background-color: #f9fafb;
}

.category-tree-node__toggle {
    cursor: pointer;
    width: 20px;
    text-align: center;
    font-size: 12px;
    user-select: none;
}

.category-tree-node__spacer {
    width: 20px;
    display: inline-block;
}

.category-tree-node__label {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.category-tree-node__label--disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.category-tree-node__checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.category-tree-node__icon {
    font-size: 16px;
}

.category-tree-node__name {
    font-size: 14px;
    color: #111827;
    font-weight: 500;
}

.category-tree-node__badge {
    font-size: 11px;
    padding: 2px 8px;
    background: #e0f2fe;
    color: var(--color-primary);
    border-radius: 12px;
    font-weight: 600;
}

.category-tree-node__children {
    margin-top: 4px;
}

.category-tree-node__loading {
    padding: var(--spacing-md);
    font-size: 13px;
    color: #9ca3af;
    font-style: italic;
}

/* Catégories sélectionnées */
.onboarding-selected {
    background: #f0fdf4;
    border: 2px solid #10b981;
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.onboarding-selected__title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: 16px;
    font-weight: 600;
    color: #059669;
    margin: 0 0 var(--spacing-md) 0;
}

.onboarding-selected__list {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.onboarding-selected__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    background: white;
    padding: var(--spacing-md);
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.onboarding-selected__item-icon {
    font-size: 20px;
}

.onboarding-selected__item-content {
    flex: 1;
}

.onboarding-selected__item-name {
    font-size: 15px;
    font-weight: 600;
    color: #111827;
}

.onboarding-selected__item-path {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.onboarding-selected__item-remove {
    background: #fee2e2;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.onboarding-selected__item-remove:hover {
    background: #fecaca;
    transform: scale(1.1);
}

.onboarding-selected__item-remove svg {
    color: #ef4444;
}

/* Actions */
.onboarding-actions {
    text-align: center;
}

.onboarding-actions__hint {
    margin-top: var(--spacing-md);
    font-size: 13px;
    color: #9ca3af;
}

/* Responsive */
@media (max-width: 768px) {
    .onboarding-card {
        padding: var(--spacing-lg);
    }

    .onboarding-buttons {
        grid-template-columns: 1fr;
    }

    .onboarding-card__title {
        font-size: 22px;
    }

    .onboarding-card__subtitle {
        font-size: 14px;
    }

    .onboarding-btn {
        padding: var(--spacing-lg);
    }

    .onboarding-btn__text {
        font-size: 16px;
    }

    .category-tree-node__content {
        padding: 6px;
    }

    .category-tree-node__name {
        font-size: 13px;
    }
}

/* ===============================================
   ADMIN RESET BANNER (TOP-NICHES)
   =============================================== */

.admin-reset-banner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.15);
}

.admin-reset-banner__content {
    display: flex;
    gap: var(--spacing-md);
    align-items: flex-start;
    flex: 1;
}

.admin-reset-banner__icon {
    color: #f59e0b;
    flex-shrink: 0;
}

.admin-reset-banner__content strong {
    display: block;
    font-size: 16px;
    color: #92400e;
    margin-bottom: 4px;
}

.admin-reset-banner__content p {
    font-size: 14px;
    color: #78350f;
    margin: 0;
    line-height: 1.5;
}

.admin-reset-banner form {
    margin-left: var(--spacing-md);
}

@media (max-width: 768px) {
    .admin-reset-banner {
        flex-direction: column;
        gap: var(--spacing-md);
    }

    .admin-reset-banner form {
        margin-left: 0;
        width: 100%;
    }

    .admin-reset-banner form .btn {
        width: 100%;
    }
}

/* ===============================================
   GESTIONNAIRE DE FICHIERS TXT (CONSTRUCTEUR)
   =============================================== */

.file-manager-section {
    margin-bottom: 24px;
    padding: 20px;
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
}

.file-manager-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.file-selector-group {
    flex: 1;
    min-width: 250px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.file-selector-label {
    font-size: 14px;
    font-weight: 600;
    color: #334155;
}

.file-selector {
    padding: 10px 14px;
    border: 2px solid #cbd5e1;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    background: white;
    color: #1e293b;
    cursor: pointer;
    transition: border-color 0.2s;
}

.file-selector:hover {
    border-color: #94a3b8;
}

.file-selector:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.file-actions {
    display: flex;
    gap: 8px;
}

.file-info {
    display: flex;
    gap: 20px;
    padding: 12px 16px;
    background: white;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.file-info-item {
    font-size: 13px;
    color: #64748b;
}

.file-info-item strong {
    color: #1e293b;
    font-weight: 600;
}

.input-field--select {
    width: 200px;
    cursor: pointer;
}

@media (max-width: 768px) {
    .file-manager-header {
        flex-direction: column;
        align-items: stretch;
    }
    
    .file-selector-group {
        min-width: 100%;
    }
    
    .file-actions {
        width: 100%;
    }
    
    .file-actions button {
        flex: 1;
    }
    
    .file-info {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===============================================
   GÉNÉRATEUR DE NICHES (CONSTRUCTEUR)
   =============================================== */

.generate-niches-section {
    margin-top: 24px;
    padding: 24px;
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border: 2px solid #10b981;
    border-radius: 12px;
}

.generate-niches-header {
    margin-bottom: 20px;
}

.generate-niches-title {
    font-size: 20px;
    font-weight: 600;
    color: #065f46;
    margin: 0 0 8px 0;
}

.generate-niches-desc {
    font-size: 14px;
    color: #047857;
    margin: 0;
}

.generate-niches-controls {
    display: flex;
    align-items: flex-end;
    gap: 16px;
    flex-wrap: wrap;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.input-label {
    font-size: 13px;
    font-weight: 500;
    color: #065f46;
}

.input-field {
    width: 180px;
    padding: 10px 14px;
    border: 2px solid #10b981;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    background: white;
    color: #065f46;
}

.input-field:focus {
    outline: none;
    border-color: #059669;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.loading-container {
    margin-top: 20px;
    padding: 20px;
    background: white;
    border: 2px solid #10b981;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 4px solid #d1fae5;
    border-top-color: #10b981;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.loading-text {
    font-size: 14px;
    color: #065f46;
    font-weight: 500;
    margin: 0;
}

#niches-validation-form {
    margin-top: 20px;
    padding: 24px;
    background: white;
    border: 2px solid #10b981;
    border-radius: 12px;
}

.validation-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 2px solid #f3f4f6;
    flex-wrap: wrap;
    gap: 12px;
}

.validation-title {
    font-size: 18px;
    font-weight: 600;
    color: #065f46;
    margin: 0;
}

.validation-stats {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.stat {
    font-size: 14px;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    background: #f9fafb;
}

.stat--new {
    background: #ecfdf5;
    color: #065f46;
}

.stat--existing {
    background: #eff6ff;
    color: #1e40af;
}

.stat--total {
    background: #f3f4f6;
    color: #374151;
}

.validation-actions-top,
.validation-actions-bottom {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}

.validation-actions-top {
    flex-direction: column;
    gap: 16px;
}

.validation-actions-group {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.validation-actions-label {
    font-weight: 600;
    font-size: 14px;
    color: #374151;
    min-width: 100px;
}

.validation-actions-bottom {
    margin-bottom: 0;
    margin-top: 24px;
    justify-content: flex-end;
}

.validation-options {
    margin: 20px 0;
    padding: 16px;
    background: #f0fdf4;
    border: 1px solid #10b981;
    border-radius: 8px;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.checkbox-input {
    width: 20px;
    height: 20px;
    cursor: pointer;
    accent-color: #10b981;
}

.checkbox-text {
    font-size: 14px;
    font-weight: 500;
    color: #065f46;
}

.niches-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-height: 600px;
    overflow-y: auto;
    padding: 16px;
    background: #f9fafb;
    border-radius: 8px;
}

.niche-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    transition: all 0.2s;
    margin-bottom: 8px;
    cursor: pointer;
}

.niche-item:last-child {
    margin-bottom: 0;
}

.niche-item:hover:not(.niche-item--disabled) {
    border-color: #10b981;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
    background: #f0fdf4;
}

.niche-item--disabled {
    opacity: 0.6;
    background: #f3f4f6;
    cursor: default !important;
}

.niche-item--disabled:hover {
    border-color: #e5e7eb;
    box-shadow: none;
    background: #f3f4f6;
}

.niche-item__checkbox {
    flex-shrink: 0;
    padding-top: 2px;
}

.niche-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    margin-top: 10px;
}

.niche-checkbox:disabled {
    cursor: not-allowed;
}

.niche-item__content {
    flex: 1;
}

.niche-input {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #111827;
    background: white;
}

.niche-input:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}

.niche-input:disabled {
    background: #f9fafb;
    cursor: not-allowed;
    color: #6b7280;
}

.niche-item__preanalyze {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    margin-left: 12px;
}

.niche-preanalyze-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background-color 0.2s;
}

.niche-preanalyze-label:hover {
    background-color: #f0fdf4;
}

.niche-preanalyze-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #10b981;
}

.niche-preanalyze-text {
    font-size: 18px;
    user-select: none;
}

.niche-item__status {
    flex-shrink: 0;
    margin-top: 10px;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
}

.badge--success {
    background: #ecfdf5;
    color: #065f46;
    border: 1px solid #10b981;
}

/* Mode sombre - Badge success en bleu primaire OnClickBrand */
[data-theme="dark"] .badge--success {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    border: 1px solid #2563eb;
}

[data-theme="dark"] a.badge--success:hover,
[data-theme="dark"] span.badge--success:hover {
    background: rgba(37, 99, 235, 0.25);
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

.badge--info {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #3b82f6;
}

/* Badge cliquable */
a.badge--info {
    transition: all 0.2s ease;
}

a.badge--info:hover {
    background: #dbeafe;
    border-color: #2563eb;
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.2);
}

/* Mode sombre - Badge info en bleu primaire OnClickBrand */
[data-theme="dark"] .badge--info {
    background: rgba(37, 99, 235, 0.15);
    color: #60a5fa;
    border: 1px solid #2563eb;
}

[data-theme="dark"] a.badge--info:hover {
    background: rgba(37, 99, 235, 0.25);
    border-color: #3b82f6;
    box-shadow: 0 2px 4px rgba(37, 99, 235, 0.3);
}

@media (max-width: 768px) {
    .generate-niches-controls {
        flex-direction: column;
        align-items: stretch;
    }
    
    .input-field {
        width: 100%;
    }
    
    .validation-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .validation-actions-top,
    .validation-actions-bottom {
        flex-direction: column;
    }
    
    .validation-actions-bottom {
        align-items: stretch;
    }
    
    .niche-item {
        flex-wrap: wrap;
    }
    
    .niche-item__preanalyze {
        order: 3;
        margin-left: 0;
        margin-top: 8px;
    }
    
    .niche-item__status {
        width: 100%;
        margin-top: 8px;
        order: 4;
    }
}

/* ================================================
   GESTION DES PROMPTS IA
   ================================================ */

.prompt-manager-section {
    margin-top: 40px;
    padding: 24px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.prompt-manager-header {
    margin-bottom: 24px;
}

.prompt-manager-title {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 8px;
}

.prompt-manager-desc {
    font-size: 14px;
    color: #6b7280;
    line-height: 1.6;
}

.prompt-manager-desc code {
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    color: #ef4444;
}

.prompt-editor-wrapper {
    margin-top: 24px;
}

.prompt-editor-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.prompt-editor-label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

.prompt-textarea {
    width: 100%;
    padding: 16px;
    border: 1px solid var(--input-border);
    border-radius: 8px;
    font-family: 'Courier New', monospace;
    font-size: 13px;
    line-height: 1.6;
    color: var(--input-text);
    background: var(--input-bg);
    resize: vertical;
    transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.prompt-textarea::placeholder {
    color: var(--input-placeholder);
}

.prompt-textarea:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
    background: var(--card-bg);
}

.prompt-editor-footer {
    margin-top: 12px;
    padding: 12px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 6px;
}

.prompt-editor-help {
    font-size: 13px;
    color: #92400e;
}

.prompt-editor-help code {
    background: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #dc2626;
}

.prompt-selector-for-generation {
    margin-top: 24px;
    padding: 16px;
    background: #f0fdf4;
    border: 1px solid #10b981;
    border-radius: 8px;
}

.prompt-selector-for-generation label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: #065f46;
}

/* =====================================================
   TOGGLE SWITCH (pour visibilité des niches)
   ===================================================== */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    cursor: pointer;
}

.toggle-switch input[type="checkbox"] {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #e5e7eb;
    border-radius: 24px;
    transition: all 0.3s ease;
}

.toggle-slider:before {
    content: "";
    position: absolute;
    height: 18px;
    width: 18px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: all 0.3s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider {
    background-color: #10b981;
}

.toggle-switch input[type="checkbox"]:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.toggle-switch:hover .toggle-slider {
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.1);
}

/* ============================================
   THEME TOGGLE
   ============================================ */

.theme-toggle {
  position: relative;
  display: inline-block;
  margin-right: var(--spacing-md);
}

.theme-toggle__btn {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.theme-toggle__btn:hover {
  background-color: var(--color-bg-hover);
  transform: scale(1.05);
}

.theme-toggle__icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: opacity 0.3s ease, transform 0.3s ease;
  color: var(--color-text-dark);
}

.theme-toggle__icon--sun {
  opacity: 1;
}

.theme-toggle__icon--moon {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(-90deg);
}

[data-theme="dark"] .theme-toggle__icon--sun {
  opacity: 0;
  transform: translate(-50%, -50%) rotate(90deg);
}

[data-theme="dark"] .theme-toggle__icon--moon {
  opacity: 1;
  transform: translate(-50%, -50%) rotate(0deg);
}

/* ============================================
   NOTIFICATION DROPDOWN
   ============================================ */

.notification-dropdown {
  position: relative;
  display: inline-block;
}

.notification-dropdown__trigger {
  position: relative;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
}

.notification-dropdown__trigger:hover {
  background: rgba(37, 99, 235, 0.1);
}

.notification-dropdown__badge {
  position: absolute;
  top: 6px;
  right: 6px;
  min-width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ef4444;
  color: white;
  border-radius: 9px;
  font-size: 11px;
  font-weight: 600;
  padding: 0 5px;
  animation: pulse-badge 2s infinite;
}

@keyframes pulse-badge {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
}

.notification-dropdown__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 500px;
  background: var(--dropdown-bg);
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.08);
  z-index: 1000;
  animation: slideDown 0.2s ease;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: background-color 0.3s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.notification-dropdown__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--dropdown-border);
  background: var(--table-header-bg);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.notification-dropdown__title {
  font-size: 16px;
  font-weight: 600;
  color: var(--card-text);
  margin: 0;
  transition: color 0.3s ease;
}

.notification-dropdown__mark-all {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--color-text-light);
  border-radius: 6px;
  transition: all 0.2s ease, color 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.notification-dropdown__mark-all:hover {
  background: var(--dropdown-hover);
  color: var(--color-primary);
}

.notification-dropdown__list {
  overflow-y: auto;
  max-height: 400px;
  flex: 1;
}

.notification-dropdown__list::-webkit-scrollbar {
  width: 6px;
}

.notification-dropdown__list::-webkit-scrollbar-track {
  background: #f3f4f6;
}

.notification-dropdown__list::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 3px;
}

.notification-dropdown__list::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.notification-dropdown__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 40px 20px;
  color: #6b7280;
  font-size: 14px;
}

.notification-dropdown__error {
  padding: 20px;
  text-align: center;
  color: #ef4444;
  font-size: 14px;
}

.notification-dropdown__empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: #9ca3af;
  text-align: center;
}

.notification-dropdown__empty svg {
  margin-bottom: 12px;
  opacity: 0.5;
}

.notification-dropdown__empty p {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
}

.notification-dropdown__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid #f3f4f6;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.notification-dropdown__item:hover {
  background: #f9fafb;
}

.notification-dropdown__item:last-child {
  border-bottom: none;
}

.notification-dropdown__item.notification--unread {
  background: #eff6ff;
}

.notification-dropdown__item.notification--unread::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #2563eb;
}

.notification-dropdown__item-icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: currentColor;
  opacity: 0.1;
}

.notification-dropdown__item-icon svg {
  position: relative;
  z-index: 1;
  opacity: 1;
}

.notification-dropdown__item.notification--info .notification-dropdown__item-icon {
  color: #3b82f6;
}

.notification-dropdown__item.notification--success .notification-dropdown__item-icon {
  color: #10b981;
}

.notification-dropdown__item.notification--warning .notification-dropdown__item-icon {
  color: #f59e0b;
}

.notification-dropdown__item.notification--error .notification-dropdown__item-icon {
  color: #ef4444;
}

.notification-dropdown__item-content {
  flex: 1;
  min-width: 0;
}

.notification-dropdown__item-title {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 4px 0;
  line-height: 1.4;
}

.notification-dropdown__item-message {
  font-size: 13px;
  color: #6b7280;
  margin: 0 0 6px 0;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.notification-dropdown__item-time {
  display: inline-block;
  font-size: 12px;
  color: #9ca3af;
}

.notification-dropdown__item-action {
  display: inline-block;
  font-size: 13px;
  color: #2563eb;
  font-weight: 500;
  margin-top: 6px;
  text-decoration: none;
  transition: color 0.2s ease;
}

.notification-dropdown__item-action:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.notification-dropdown__item-delete {
  flex-shrink: 0;
  background: transparent;
  border: none;
  padding: 4px;
  cursor: pointer;
  color: #9ca3af;
  border-radius: 4px;
  transition: all 0.2s ease;
  opacity: 0;
}

.notification-dropdown__item-delete svg {
  stroke: currentColor;
}

.notification-dropdown__item:hover .notification-dropdown__item-delete {
  opacity: 1;
}

.notification-dropdown__item-delete:hover {
  background: #fee2e2;
  color: #ef4444;
}

/* Spinner pour le chargement */
.spinner {
  width: 20px;
  height: 20px;
  border: 2px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Responsive */
@media (max-width: 768px) {
  .notification-dropdown__menu {
    width: 320px;
    max-height: 400px;
  }
  
  .notification-dropdown__list {
    max-height: 300px;
  }
}

/* ============================================
   MODAL ANALYSE EN COURS
   ============================================ */

.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 20px;
}

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

/* Subscription Success Modal */
.subscription-success-modal__emoji {
    font-size: 64px;
    margin-bottom: 1rem;
}

.subscription-success-modal__title {
    color: #10b981;
    margin-bottom: 1rem;
    font-size: 24px;
}

.subscription-success-modal__message {
    font-size: 16px;
    color: #374151;
    margin-bottom: 1.5rem;
}

.subscription-success-modal__note {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 2rem;
}

.subscription-success-modal__content {
    text-align: center;
    padding: 2rem;
}



.analysis-modal {
  width: 90%;
  max-width: 500px;
  text-align: center;
  background: white;
  border-radius: 12px;
  padding: 0;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  animation: modalFadeIn 0.3s ease;
  position: relative;
  z-index: 10000;
  display: block;
}

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

.modal__header {
  padding: 30px 30px 0;
}

.modal__body {
  padding: 20px 30px;
}

.modal__footer {
  padding: 30px;
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.analysis-modal__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}

.spinner-large {
  width: 32px;
  height: 32px;
  border: 3px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  flex-shrink: 0;
}

.analysis-modal__title {
  font-size: 24px;
  font-weight: 700;
  color: #1f2937;
  margin: 0 0 16px 0;
}

.analysis-modal__text {
  font-size: 15px;
  color: #6b7280;
  line-height: 1.6;
  margin: 0 0 20px 0;
}

.analysis-modal__text strong {
  color: #2563eb;
  font-weight: 600;
}

.analysis-modal__info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #eff6ff;
  border-radius: 8px;
  border-left: 3px solid #2563eb;
  font-size: 14px;
  color: #1e40af;
  text-align: left;
  margin-top: 20px;
}

.analysis-modal__info svg {
  flex-shrink: 0;
  color: #2563eb;
}

/* Modal spinner container */
.modal-spinner-container {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.modal-spinner-text {
  font-size: 16px;
  font-weight: 600;
  color: #1f2937;
}

/* Modal info box (utilisé dans les modales d'information) */
.modal-info-box {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 16px;
  padding: 12px;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 14px;
  color: #6b7280;
}

.modal-info-icon {
  flex-shrink: 0;
  color: #3b82f6;
}

/* Modal text variants */
.modal-text--secondary {
  margin-top: 10px;
  color: #6b7280;
  font-size: 14px;
}

.modal-text--highlight {
  color: #1f2937;
}

.modal-text--warning {
  color: #f59e0b;
}

.modal-text--info {
  color: #3b82f6;
}

.modal-text--quota {
  margin-top: 12px;
}

/* Modal Form */
.modal-form {
  padding: 20px;
}

/* Modal Actions */
.modal-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: 24px;
}

/* Alert Modifiers */
.alert--hidden {
  display: none;
}

.alert--spaced {
  margin-top: 16px;
}

/* ==========================================
   PAGE ADMIN - GESTION DES NICHES
   ========================================== */

/* Filtres */
.niches-filters {
  margin-bottom: 30px;
}

.niches-filters__search {
  margin-bottom: 20px;
}

.niches-filters__input {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--input-border);
  border-radius: 8px;
  font-size: 14px;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.niches-filters__input::placeholder {
  color: var(--input-placeholder);
}

.niches-filters__row {
  display: flex;
  gap: 15px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.niches-filters__group {
  flex: 1;
  min-width: 150px;
}

.niches-filters__label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  color: var(--color-text-light);
  transition: color 0.3s ease;
}

.niches-filters__select {
  width: 100%;
  padding: 8px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.niches-filters__actions {
  display: flex;
  gap: 10px;
}

/* Informations résultats */
.niches-results-info {
  margin: 20px 0;
  padding: 15px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  color: var(--card-text);
  border-left: 4px solid #3b82f6;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.niches-results-info__header {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.niches-results-info__text {
  margin: 0;
  font-size: 14px;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.niches-quick-links {
  display: flex;
  gap: 12px;
  font-size: 13px;
  align-items: center;
}

.niches-quick-link {
  text-decoration: none;
  font-weight: 500;
  transition: opacity 0.2s ease;
}

.niches-quick-link:hover {
  opacity: 0.7;
  text-decoration: underline;
}

.niches-quick-link--danger {
  color: #ef4444;
}

.niches-quick-link--primary {
  color: #3b82f6;
}

.niches-quick-links__separator {
  color: #cbd5e1;
}

/* Barre d'actions bulk */
.bulk-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
  padding: 12px 16px;
  background: #fff3cd;
  border: 1px solid #ffc107;
  border-radius: 6px;
  animation: slideDown 0.3s ease;
}

[data-theme="dark"] .bulk-actions-bar {
  background: rgba(255, 193, 7, 0.2);
  border-color: #ffc107;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.bulk-actions-bar__info {
  font-size: 14px;
  font-weight: 600;
  color: #856404;
}

[data-theme="dark"] .bulk-actions-bar__info {
  color: #fbbf24;
}

.bulk-actions-bar__info span {
  color: #d97706;
  font-size: 16px;
}

[data-theme="dark"] .bulk-actions-bar__info span {
  color: #fbbf24;
}

.bulk-actions-bar__buttons {
  display: flex;
  gap: 8px;
}

/* Tableau */
.niches-table-wrapper {
  overflow-x: auto;
  margin-top: 20px;
}

.niches-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--card-bg);
  border-radius: 8px;
  overflow: hidden;
  transition: background-color 0.3s ease;
}

.niches-table thead tr {
  background: var(--table-header-bg);
  border-bottom: 2px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.niches-table__th {
  padding: 12px;
  text-align: left;
  font-weight: 600;
  font-size: 13px;
  color: var(--color-text-dark);
  transition: color 0.3s ease;
}

.niches-table__th--center {
  text-align: center;
}

.niches-table__row {
  border-bottom: 1px solid var(--card-border);
  transition: border-color 0.3s ease;
}

.niches-table__td {
  padding: 12px;
  font-size: 14px;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.niches-table__td--center {
  text-align: center;
}

.niches-table__td--icon {
  font-size: 20px;
}

.niches-table__td--muted {
  color: var(--color-text-light);
}

.niches-table__user {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  background: #eff6ff;
  border-radius: 4px;
  color: #1e40af;
  font-size: 13px;
  font-weight: 500;
  cursor: help;
}

[data-theme="dark"] .niches-table__user {
  background: rgba(37, 99, 235, 0.2);
  color: #60a5fa;
}

.niches-table__empty {
  padding: 40px;
  text-align: center;
  color: var(--color-text-light);
  font-size: 14px;
  transition: color 0.3s ease;
}

/* Pagination */
.niches-pagination {
  margin-top: 30px;
  display: flex;
  justify-content: center;
}

/* Responsive */
@media (max-width: 768px) {
  .niches-filters__row {
    flex-direction: column;
  }
  
  .niches-filters__group {
    min-width: 100% !important;
  }
}

/* Constructeur de niches */
.constructor-container {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Accordéons */
.accordion-item {
  border: 1px solid var(--card-border);
  border-radius: 8px;
  background: var(--card-bg);
  overflow: hidden;
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.accordion-header {
  width: 100%;
  padding: 16px 20px;
  background: var(--color-bg-secondary);
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.2s ease;
  font-size: 16px;
  font-weight: 600;
  color: var(--card-text);
}

.accordion-header:hover {
  background: var(--color-bg-hover);
}

.accordion-title {
  display: flex;
  align-items: center;
  gap: 8px;
}

.accordion-icon {
  font-size: 12px;
  transition: transform 0.3s ease, color 0.3s ease;
  color: var(--color-text-light);
}

.accordion-header[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  padding: 0 20px;
}

.accordion-content.accordion-content--open {
  max-height: 2000px;
  padding: 20px;
  transition: max-height 0.5s ease, padding 0.3s ease;
}

.constructor-file-selector {
  display: flex;
  gap: 10px;
  align-items: flex-end;
}

.constructor-file-selector .form-select {
  flex: 1;
}

.constructor-editor {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.constructor-editor .btn {
  align-self: flex-start;
}

.form-label {
  display: block;
  margin-bottom: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.form-select,
.form-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.form-select::placeholder,
.form-input::placeholder {
  color: var(--input-placeholder);
}

.form-textarea {
  width: 100%;
  padding: 12px;
  border: 1px solid var(--input-border);
  border-radius: 6px;
  font-size: 14px;
  background-color: var(--input-bg);
  color: var(--input-text);
  transition: all 0.2s, background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
  resize: vertical;
}

.form-textarea::placeholder {
  color: var(--input-placeholder);
}
  font-family: 'Courier New', monospace;
  resize: vertical;
}

.form-group {
  margin-bottom: 15px;
}

.section-subtitle {
  font-size: 18px;
  font-weight: 600;
  color: var(--card-text);
  margin-bottom: 15px;
  transition: color 0.3s ease;
}

.constructor-prompts,
.constructor-generate {
  padding: 20px;
  background: var(--color-bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--card-border);
  transition: background-color 0.3s ease, border-color 0.3s ease;
}

.generation-results {
  padding: 20px;
  background: #f0fdf4;
  border-radius: 8px;
  border: 1px solid #86efac;
}

[data-theme="dark"] .generation-results {
  background: rgba(16, 185, 129, 0.15);
  border-color: #10b981;
}

.generation-stats {
  display: flex;
  gap: 20px;
  margin-bottom: 20px;
  padding: 15px;
  background: var(--card-bg);
  border-radius: 6px;
  transition: background-color 0.3s ease;
}

.generation-stats p {
  margin: 0;
  font-size: 14px;
  color: var(--card-text);
  transition: color 0.3s ease;
}

.niches-list {
  max-height: 400px;
  overflow-y: auto;
  margin-bottom: 20px;
}

/* ========================================
   KEYWORD UPGRADE CTA (plan d'abonnement)
   ======================================== */
.keyword-upgrade-cta {
    background: linear-gradient(135deg, #f6f8fa 0%, #e9ecef 100%);
    border-top: 2px solid var(--color-primary);
}

.keyword-upgrade-cta__cell {
    padding: 32px 24px !important;
}

.keyword-upgrade-cta__content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 100%;
}

.keyword-upgrade-cta__icon {
    font-size: 48px;
    flex-shrink: 0;
}

.keyword-upgrade-cta__text {
    flex: 1;
    text-align: left;
}

.keyword-upgrade-cta__text strong {
    display: block;
    font-size: 18px;
    color: var(--color-text);
    margin-bottom: 8px;
}

.keyword-upgrade-cta__text p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 14px;
}

.keyword-upgrade-cta .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

/* Responsive */
@media (max-width: 768px) {
    .keyword-upgrade-cta__content {
        flex-direction: column;
        text-align: center;
    }
    
    .keyword-upgrade-cta__text {
        text-align: center;
    }
}

/* ==================================
   PROGRESS BAR & STEPS (Modale analyse)
   ================================== */
.progress-container {
    margin: 20px 0;
}

.progress-bar {
    width: 100%;
    height: 24px;
    background-color: #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    margin-bottom: 12px;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #4f46e5, #6366f1);
    border-radius: 12px;
    transition: width 0.5s ease-in-out;
    width: 0%;
    box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
}

.progress-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    color: #6b7280;
}

.progress-percentage {
    font-weight: 600;
    color: #4f46e5;
    font-size: 16px;
}

.progress-message {
    font-style: italic;
    color: #6b7280;
}

.progress-steps {
    margin: 24px 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    background-color: #f3f4f6;
    border-radius: 8px;
    transition: all 0.3s ease;
    border-left: 3px solid transparent;
}

.progress-step.active {
    background-color: rgba(79, 70, 229, 0.1);
    border-left: 3px solid #4f46e5;
}

.progress-step.completed {
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
}

.progress-step.failed {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

.step-icon {
    font-size: 20px;
    line-height: 1;
    min-width: 24px;
    text-align: center;
}

.step-label {
    flex: 1;
    font-size: 14px;
    color: #1f2937;
    font-weight: 500;
}

.step-status {
    font-size: 18px;
    line-height: 1;
    min-width: 24px;
    text-align: center;
}

/* ==================================
   COMING SOON PAGES
   ================================== */

/* Page container */
.coming-soon-page {
    max-width: 1200px;
    margin: 0 auto;
    padding: 40px 20px;
}

/* Badge "Coming Soon" */
.coming-soon-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.coming-soon-badge svg {
    color: white;
}

/* Hero Section */
.coming-soon-hero {
    text-align: center;
    margin-bottom: 60px;
    padding: 40px 20px;
    background: var(--color-bg-secondary);
    border-radius: 16px;
    transition: background-color 0.3s ease;
}

.coming-soon-hero__icon {
    display: inline-block;
    padding: 20px;
    background: var(--card-bg);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    margin-bottom: 24px;
    transition: background-color 0.3s ease;
}

.coming-soon-hero__icon svg {
    color: var(--color-primary);
    display: block;
}

.coming-soon-hero__title {
    font-size: 36px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 16px;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.coming-soon-hero__description {
    font-size: 18px;
    color: var(--color-text-light);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* Section Title */
.coming-soon-section-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 32px;
    text-align: center;
    transition: color 0.3s ease;
}

/* Problem Section */
.coming-soon-problem {
    margin-bottom: 60px;
}

.problem-box {
    background: linear-gradient(135deg, #fff5e6 0%, #ffe4cc 100%);
    border: 2px solid #f59e0b;
    border-radius: 16px;
    padding: 40px;
    text-align: center;
}

[data-theme="dark"] .problem-box {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.15) 0%, rgba(245, 158, 11, 0.1) 100%);
    border-color: #f59e0b;
}

.problem-box__icon {
    display: inline-block;
    padding: 16px;
    background: var(--card-bg);
    border-radius: 50%;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

.problem-box__icon svg {
    color: #f59e0b;
    display: block;
}

.problem-box__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.problem-box__description {
    font-size: 16px;
    color: var(--color-text-light);
    margin-bottom: 24px;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.problem-box__list {
    list-style: none;
    text-align: left;
    max-width: 600px;
    margin: 0 auto;
}

.problem-box__list li {
    padding: 12px 16px;
    background: var(--card-bg);
    border-radius: 8px;
    margin-bottom: 8px;
    color: var(--color-text-light);
    font-size: 15px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    transition: background-color 0.3s ease, color 0.3s ease;
}

.problem-box__list li:before {
    content: "❌";
    margin-right: 8px;
}

/* Features Grid */
.coming-soon-features {
    margin-bottom: 60px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 24px;
}

.feature-card {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    padding: 32px;
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
    transform: translateY(-4px);
}

.feature-card__icon {
    display: inline-block;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    margin-bottom: 16px;
    transition: background-color 0.3s ease;
}

.feature-card__icon svg {
    color: var(--color-primary);
    display: block;
}

.feature-card__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 12px;
    transition: color 0.3s ease;
}

.feature-card__description {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* Process Steps */
.coming-soon-process {
    margin-bottom: 60px;
}

.process-steps {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 800px;
    margin: 0 auto;
}

.process-step {
    display: flex;
    gap: 24px;
    align-items: flex-start;
    padding: 32px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.process-step:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(37, 99, 235, 0.15);
}

.process-step__number {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), #4f46e5);
    color: white;
    font-size: 24px;
    font-weight: 700;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.process-step__content {
    flex: 1;
}

.process-step__title {
    font-size: 20px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.process-step__description {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* Benefits */
.coming-soon-benefits {
    margin-bottom: 60px;
}

.benefits-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.benefit-item {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 24px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 12px;
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.benefit-item:hover {
    border-color: var(--color-success);
    box-shadow: 0 8px 24px rgba(16, 185, 129, 0.15);
}

.benefit-item__icon {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(16, 185, 129, 0.1);
    border-radius: 12px;
}

.benefit-item__icon svg {
    color: var(--color-success);
}

.benefit-item__content {
    flex: 1;
}

.benefit-item__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.benefit-item__description {
    font-size: 15px;
    color: var(--color-text-light);
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* CTA Section */
.coming-soon-cta {
    text-align: center;
    padding: 60px 40px;
    background: var(--color-bg-secondary);
    border-radius: 16px;
    border: 2px dashed var(--color-primary);
    transition: background-color 0.3s ease;
}

.coming-soon-cta__icon {
    display: inline-block;
    padding: 16px;
    background: var(--color-primary);
    border-radius: 50%;
    margin-bottom: 24px;
}

.coming-soon-cta__icon svg {
    color: white;
    display: block;
}

.coming-soon-cta__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.coming-soon-cta__description {
    font-size: 16px;
    color: var(--color-text-light);
    max-width: 600px;
    margin: 0 auto 24px;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.coming-soon-cta__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--card-bg);
    color: var(--card-text);
    border: 2px solid var(--card-border);
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: default;
    user-select: none;
    transition: all 0.3s ease;
}

.coming-soon-cta__badge svg {
    color: #f59e0b;
}

/* Checklist (for Merchant Center) */
.coming-soon-checklist {
    margin-bottom: 60px;
}

.checklist-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.checklist-category {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.checklist-category__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 18px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--card-border);
    transition: color 0.3s ease, border-color 0.3s ease;
}

.checklist-category__title svg {
    color: var(--color-primary);
}

.checklist-category__items {
    list-style: none;
}

.checklist-category__items li {
    padding: 8px 0;
    color: var(--color-text-light);
    font-size: 14px;
    line-height: 1.5;
    transition: color 0.3s ease;
}

.checklist-category__items li:before {
    content: "✅";
    margin-right: 8px;
}

/* Analysis Preview (for Advanced Shop Analysis) */
.coming-soon-analysis-preview {
    margin-bottom: 60px;
}

.analysis-preview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
}

.analysis-preview-item {
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 12px;
    padding: 24px;
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.analysis-preview-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
}

.analysis-preview-item__header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.analysis-preview-item__header svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.analysis-preview-item__header h4 {
    font-size: 16px;
    font-weight: 700;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.analysis-preview-item__description {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* Use Cases */
.coming-soon-use-cases {
    margin-bottom: 60px;
}

.use-cases-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
}

.use-case-item {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    padding: 24px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 12px;
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
}

.use-case-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(37, 99, 235, 0.15);
}

.use-case-item__icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

.use-case-item__icon svg {
    color: var(--color-primary);
}

.use-case-item__content {
    flex: 1;
}

.use-case-item__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.use-case-item__description {
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.6;
    transition: color 0.3s ease;
}

/* Responsive */
@media (max-width: 768px) {
    .coming-soon-hero__title {
        font-size: 28px;
    }
    
    .coming-soon-hero__description {
        font-size: 16px;
    }
    
    .feature-grid,
    .checklist-grid,
    .analysis-preview-grid,
    .use-cases-list {
        grid-template-columns: 1fr;
    }
    
    .process-step,
    .benefit-item,
    .use-case-item {
        flex-direction: column;
        text-align: center;
    }
    
    .process-step__number,
    .benefit-item__icon,
    .use-case-item__icon {
        margin: 0 auto 16px;
    }
}

/* ==========================================================================
   SUBSCRIPTION PLANS - Design inspiré de la landing page
   ========================================================================== */

.billing-toggle,
.div-block-20 {
    display: flex;
    justify-content: center;
    margin: 40px auto;
}

.billing-toggle ul,
.div-block-20 .list {
    display: flex;
    align-items: center;
    gap: 20px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.billing-toggle ul li,
.div-block-20 .list li {
    display: flex;
    align-items: center;
}

.billing-toggle a,
.div-block-20 .link {
    color: var(--card-text);
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.billing-toggle a:hover,
.div-block-20 .link:hover {
    color: #2563eb;
}

.billing-toggle__option {
    display: none;
}

.billing-toggle__option input[type="radio"] {
    display: none;
}

.billing-toggle__badge {
    font-size: 12px;
    background-color: #d1fae5;
    color: #065f46;
    padding: 4px 8px;
    border-radius: 4px;
    margin-left: 8px;
    font-weight: 600;
}

/* Toggle Switch Style (comme dans la landing page) */
.f-toggle-wrap-2 {
    display: inline-block;
}

.f-toggle-regular-2 {
    position: relative;
    width: 50px;
    height: 26px;
    background-color: #e5e7eb;
    border-radius: 100px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .f-toggle-regular-2 {
    background-color: rgba(255, 255, 255, 0.2);
}

.f-toggle-regular-2:hover {
    background-color: #d1d5db;
}

[data-theme="dark"] .f-toggle-regular-2:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.f-toggle-regular-2.active {
    background-color: #2563eb;
}

[data-theme="dark"] .f-toggle-regular-2.active {
    background-color: var(--color-primary);
}

.f-toggle-thumb-2 {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    background-color: #ffffff;
    border-radius: 50%;
    transition: transform 0.3s ease, background-color 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .f-toggle-thumb-2 {
    background-color: #ffffff;
}

.f-toggle-regular-2.active .f-toggle-thumb-2 {
    transform: translateX(24px);
}

.pricing-sec-container,
.subscription-plans-container {
    width: 100%;
    max-width: 1231px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 20px;
    padding-right: 20px;
}

/* Limiter la largeur pour les sections avec subscription plans */
.section-card:has(.subscription-plans) {
    max-width: 1231px;
    margin-left: auto;
    margin-right: auto;
}

.subscription-plans {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px 32px;
    margin-top: 48px;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.autre_plan {
  background-color: #0f1729;
}

.subscription-plan {
    position: relative;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 24px 32px;
    transition: all 0.5s ease, background-color 0.3s ease, border-color 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    gap: 24px;
}

.subscription-plan::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.05) 0%, transparent 50%, rgba(59, 130, 246, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.subscription-plan:hover {
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transform: translateY(-8px);
    border-color: rgba(37, 99, 235, 0.3);
}

.subscription-plan:hover::before {
    opacity: 1;
}

.subscription-plan--popular {
    background: rgba(37, 99, 235, 0.05);
    border: 2px solid var(--color-primary);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    z-index: 10;
}

@media (min-width: 768px) {
    .subscription-plan--popular {
        transform: scale(1.05) translateY(-16px);
    }
    
    .subscription-plan--popular:hover {
        transform: scale(1.05) translateY(-24px);
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    }
}

subscription-plan__badge {
  position: absolute;
  top: -12px;
  right: -86px;
  background: var(--color-primary);
  color: var(--color-white);
  padding: 3px 15px;
  border-radius: 9999px;
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
  border: 2px solid transparent;
  transition: all 0.3s ease;
  z-index: 1;
  text-align: center;
  width: fit-content;
}
.subscription-plan__badge:hover {
    background: rgba(37, 99, 235, 0.9);
}

.subscription-plan > div {
    position: relative;
    z-index: 1;
}

.subscription-plan__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.subscription-plan__price {
    margin-bottom: 24px;
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.subscription-plan__amount {
    font-size: 44px;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1;
}

.bouton-normal-plan {
  background: #0f1729!important;
  color: #fff!important;
}

@media (min-width: 1024px) {
    .subscription-plan__amount {
        font-size: 44px;
    }
}

.subscription-plan__period {
    font-size: 16px;
    color: var(--color-text-light);
    font-weight: 400;
    transition: color 0.3s ease;
}

.subscription-plan .btn-block {
    width: 100%;
    margin-bottom: 24px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-bottom: 4px solid var(--color-primary);
}

.subscription-plan--popular .btn-block {
    background: var(--color-primary);
    color: var(--color-white);
    border-bottom-color: var(--color-text);
}

.subscription-plan--popular .btn-block:hover {
    background: rgba(37, 99, 235, 0.9);
}

.subscription-plan:not(.subscription-plan--popular) .btn-block {
    background: var(--color-text);
    color: var(--color-bg);
    border-bottom-color: var(--color-primary);
}

.subscription-plan:not(.subscription-plan--popular) .btn-block:hover {
    background: rgba(0, 0, 0, 0.9);
}

.subscription-plan__description {
    color: var(--color-text-secondary);
    margin-bottom: 16px;
    line-height: 1.5;
    font-size: 14px;
    font-weight: 500;
}

.subscription-plan__features {
    list-style: none;
    padding: 0;
    margin: 0;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.subscription-plan__feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 14px;
    line-height: 1.5;
}

.subscription-plan__feature--highlighted {
    background: rgba(37, 99, 235, 0.05);
    margin: 0 -8px;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(37, 99, 235, 0.2);
}

.subscription-plan__feature--highlighted .subscription-plan__feature-text {
    font-weight: 600;
    color: var(--color-text);
}

.subscription-plan__feature-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-success);
}

.subscription-plan__feature--highlighted .subscription-plan__feature-icon {
    color: var(--color-primary);
}

.subscription-plan__feature-text {
    flex: 1;
}

.subscription-plan__badge-unlimited {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid rgba(16, 185, 129, 0.2);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: rgba(16, 185, 129, 0.1);
    color: rgb(5, 150, 105);
}

.subscription-plan__badge-unlimited:hover {
    background: rgba(16, 185, 129, 0.2);
}

.subscription-plan__badge-soon {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    border: 1px solid rgba(249, 115, 22, 0.2);
    padding: 2px 10px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s ease;
    background: rgba(249, 115, 22, 0.1);
    color: rgb(234, 88, 12);
}

.subscription-plan__badge-soon:hover {
    background: rgba(249, 115, 22, 0.2);
}

@media (max-width: 1024px) {
    .subscription-plans {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .subscription-plan--popular {
        transform: none;
    }
    
    .subscription-plan--popular:hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    .billing-toggle {
        flex-direction: column;
        width: 100%;
    }
    
    .billing-toggle__option {
        text-align: center;
    }
    
    .subscription-plan {
        padding: 24px;
    }
    
    .subscription-plan__title {
        font-size: 20px;
    }
    
    .subscription-plan__amount {
        font-size: 36px;
    }
    
    .subscription-plan .btn-block {
        height: 44px;
        font-size: 15px;
    }
    
    .subscription-plan > div:first-child {
        padding: 32px 24px 0;
    }
    
    .subscription-plan > div:last-child {
        padding: 0 24px 24px;
    }
}

/* =====================================================
   PRODUCT MODAL (AliExpress, Temu, etc.)
   ===================================================== */
.product-modal {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 600px;
    margin: 0 auto;
}

.product-modal__title {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-text-dark);
    text-align: center;
}

.product-modal__image-wrapper {
    text-align: center;
}

.product-modal__image {
    max-width: 100%;
    max-height: 350px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    margin: 0 auto;
}

.product-modal__product-title {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-dark);
    line-height: 1.5;
    text-align: center;
}

.product-modal__info-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
}

.product-modal__info-item {
    display: flex;
    flex-direction: column;
}

.product-modal__info-item--right {
    text-align: right;
}

.product-modal__info-label {
    display: block;
    font-size: 12px;
    color: var(--color-text-light);
    margin-bottom: 4px;
}

.product-modal__price {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary);
}

.product-modal__delivery {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.product-modal__url-box {
    padding: 12px;
    background: var(--color-bg-tertiary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.product-modal__url-text {
    flex: 1;
    font-size: 13px;
    color: var(--color-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.product-modal__cta {
    width: 100%;
    font-size: 16px;
    padding: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-modal__cta svg {
    margin-right: 8px;
}

/* =====================================================
   PROGRESS MODAL (Bulk Preanalyze)
   ===================================================== */
.progress-modal {
    padding: 24px;
    min-width: 500px;
}

.progress-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.progress-modal__counter {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.progress-modal__current {
    color: var(--color-primary);
}

.progress-modal__percentage {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-primary);
}

.progress-bar--large {
    height: 32px;
    margin-bottom: 20px;
}

.progress-modal__status {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-secondary);
    margin-bottom: 24px;
    min-height: 20px;
}

.progress-modal__results {
    display: flex;
    gap: 32px;
    justify-content: center;
    padding: 20px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    margin-bottom: 24px;
}

.progress-modal__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.progress-modal__stat-label {
    font-size: 13px;
    color: var(--color-text-light);
    font-weight: 500;
}

.progress-modal__stat-value {
    font-size: 28px;
    font-weight: 700;
    color: var(--color-text-dark);
}

.progress-modal__logs {
    margin-top: 24px;
}

.progress-modal__logs-header {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--color-border);
}

.progress-modal__logs-content {
    max-height: 300px;
    overflow-y: auto;
    background: var(--color-bg-light);
    border-radius: 8px;
    padding: 12px;
}

.progress-modal__log-entry {
    background: var(--color-white);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 8px;
    border-left: 4px solid var(--color-border);
}

.progress-modal__log-entry--success {
    border-left-color: var(--color-success);
    background: #f0fdf4;
}

.progress-modal__log-entry--warning {
    border-left-color: var(--color-warning);
    background: #fffbeb;
}

.progress-modal__log-entry--error {
    border-left-color: var(--color-danger);
    background: #fef2f2;
}

.progress-modal__log-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.progress-modal__log-icon {
    font-size: 16px;
}

.progress-modal__log-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--color-text-dark);
    flex: 1;
}

.progress-modal__log-time {
    font-size: 11px;
    color: var(--color-text-light);
}

.progress-modal__log-message {
    font-size: 12px;
    color: var(--color-text-secondary);
    padding-left: 24px;
    line-height: 1.5;
}

/* ===========================
   SECTION JEUX CONCOURS
   =========================== */
.contest-card {
    background-color: var(--card-bg);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--card-border);
    margin-bottom: var(--spacing-xl);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.contest-header {
    text-align: center;
    margin-bottom: 48px;
}

.contest-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
    padding: 8px 16px;
    border-radius: 9999px;
    margin-bottom: 16px;
}

.contest-badge__icon {
    width: 20px;
    height: 20px;
}

.contest-badge__text {
    font-size: 14px;
    font-weight: 500;
}

.contest-title {
    font-size: 30px;
    font-weight: 700;
    margin-bottom: 32px;
    line-height: 1.3;
}

.contest-title--primary {
    color: var(--color-primary);
}

.contest-title--secondary {
    color: var(--card-text);
    transition: color 0.3s ease;
}

.contest-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    max-width: 60%;
    margin: 0 auto;
}

.contest-feature {
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.2);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    cursor: pointer;
}

.contest-feature:hover {
    transform: scale(1.05);
}

.contest-feature__text {
    color: var(--card-text);
    font-weight: 500;
    text-align: center;
    margin: 0;
    transition: color 0.3s ease;
}

.contest-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 48px;
    align-items: center;
    max-width: 1100px;
    margin: 0 auto 48px;
}

.contest-image-wrapper {
    position: relative;
}

.contest-image {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contest-image__img {
    width: 100%;
    height: auto;
    display: block;
}

.contest-image__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(37, 99, 235, 0.2), transparent);
}

.contest-new-badge {
    position: absolute;
    top: -16px;
    right: -16px;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 12px 24px;
    border-radius: 9999px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.4);
    font-weight: 700;
    font-size: 18px;
}

.contest-conditions-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 32px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .contest-conditions-card {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.contest-conditions__title {
    font-size: 24px;
    font-weight: 700;
    margin-bottom: 24px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.contest-conditions__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.contest-conditions__item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 16px;
}

.contest-conditions__item:last-child {
    margin-bottom: 0;
}

.contest-conditions__icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.contest-conditions__text {
    color: var(--card-text);
    line-height: 1.6;
    transition: color 0.3s ease;
}

.contest-cta {
    text-align: center;
}

.contest-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-weight: 600;
    padding: 16px 32px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.3);
    transition: all 0.3s ease;
}

.contest-cta .btn:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 35px rgba(37, 99, 235, 0.4);
}

/* Responsive */
@media (max-width: 1024px) {
    .contest-features {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .contest-content {
        gap: 32px;
    }
}

@media (max-width: 768px) {
    .contest-card {
        padding: var(--spacing-lg);
    }
    
    .contest-title {
        font-size: 24px;
    }
    
    .contest-features {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .contest-content {
        grid-template-columns: 1fr;
        gap: 32px;
    }
    
    .contest-new-badge {
        top: -12px;
        right: -12px;
        padding: 8px 16px;
        font-size: 14px;
    }
    
    .contest-conditions-card {
        padding: 24px;
    }
    
    .contest-conditions__title {
        font-size: 20px;
    }
}

/* ========================================
   MARKMAP MODAL (Génération arborescence)
   ======================================== */

.markmap-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    display: none;
}

.markmap-modal.modal--active {
    display: flex;
    align-items: center;
    justify-content: center;
}

.markmap-modal__content {
    position: relative;
    width: 95%;
    height: 95%;
    max-width: 1600px;
    max-height: 900px;
    background: var(--color-white);
    border-radius: 16px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 10001;
}

.markmap-modal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    border-bottom: 1px solid var(--color-border);
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px 16px 0 0;
}

.markmap-modal__header .modal__title {
    color: var(--color-white);
    font-size: 24px;
    font-weight: 600;
    margin: 0;
}

.markmap-modal__header .modal__close {
    background: rgba(255, 255, 255, 0.2);
    border: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    color: var(--color-white);
}

.markmap-modal__header .modal__close:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Stats Container */
.mindmap-stats-container {
    padding: 16px 32px;
    background: #f8fafc;
    border-bottom: 1px solid var(--color-border);
}

.mindmap-stats {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.stat-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text);
}

/* Toolbar */
.markmap-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
    border-bottom: 1px solid var(--color-border);
    background: var(--color-white);
}

.markmap-toolbar__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.markmap-toolbar__info {
    font-size: 14px;
    color: var(--color-text-muted);
    font-style: italic;
}

.markmap-toolbar__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.markmap-toolbar .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Container SVG */
.markmap-container {
    flex: 1;
    position: relative;
    overflow: hidden;
    background: #fafbfc;
    border-radius: 0 0 16px 16px;
}

#mindmap-svg-render {
    width: 100%;
    height: 100%;
}

/* Styles pour les nœuds Markmap - Laisser les styles par défaut faire leur travail */
.markmap-container svg {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Améliorer légèrement la visibilité des cercles */
.markmap-container svg circle {
    cursor: pointer;
    transition: all 0.2s ease;
}

.markmap-container svg circle:hover {
    filter: brightness(1.2);
    stroke-width: 3 !important;
}

/* Loader (pendant génération) */
.mindmap-loader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10002;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mindmap-loader__content {
    background: var(--color-white);
    padding: 48px 64px;
    border-radius: 16px;
    text-align: center;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

.loader-spinner {
    width: 60px;
    height: 60px;
    border: 4px solid rgba(103, 126, 234, 0.2);
    border-top-color: #667eea;
    border-radius: 50%;
    animation: spin 1s linear infinite;
    margin: 0 auto 24px;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.mindmap-loader__text {
    font-size: 18px;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 8px;
}

.mindmap-loader__subtext {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
}

/* Keyword row selected */
.keyword-row--selected {
    background-color: rgba(103, 126, 234, 0.08) !important;
}

.keyword-row--selected:hover {
    background-color: rgba(103, 126, 234, 0.12) !important;
}

/* Container actions avec boutons */
.keywords-export-container__actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.btn--disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.btn--disabled:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* Responsive */
@media (max-width: 768px) {
    .markmap-modal__content {
        width: 100%;
        height: 100%;
        max-width: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .markmap-modal__header {
        border-radius: 0;
        padding: 16px 20px;
    }

    .markmap-modal__header .modal__title {
        font-size: 18px;
    }

    .mindmap-stats-container,
    .markmap-toolbar {
        padding: 12px 20px;
    }

    .markmap-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .markmap-toolbar__left,
    .markmap-toolbar__right {
        width: 100%;
        justify-content: center;
    }

    .stat-badge {
        font-size: 12px;
        padding: 4px 8px;
    }

    .keywords-export-container__actions {
        flex-direction: column;
        width: 100%;
    }

    .keywords-export-container__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   NICHE IMAGES (Google Shopping)
   ======================================== */

/* Thumbnail dans la vue liste (table) */
.niche-thumbnail {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.niche-thumbnail--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #f3f4f6;
}

/* Thumbnail dans le tableau admin (plus petit) */
.niches-table .niche-thumbnail {
    width: 50px;
    height: 50px;
    border-radius: 6px;
}

.niches-table .niche-thumbnail--placeholder {
    width: 50px;
    height: 50px;
    border-radius: 6px;
}

/* Image dans la vue grille (card) */
.product-card__image-wrapper {
    width: 100%;
    height: 180px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
    background-color: var(--color-bg-secondary);
    transition: background-color 0.3s ease;
}

.product-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Ajustement du card quand il y a une image */
.product-card {
    padding: 0 !important;
}

.product-card__content {
    padding: 20px;
}

/* Responsive */
@media (max-width: 768px) {
    .niche-thumbnail {
        width: 50px;
        height: 50px;
    }
    
    .product-card__image-wrapper {
        height: 150px;
    }
}

/* ===================================
   MARKETING PAGE (Admin)
   =================================== */
.marketing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 30px;
    padding: 20px 0;
}

.marketing-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    background: var(--card-bg);
    border-radius: 16px;
    padding: 60px 40px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
    text-decoration: none;
    border: 2px solid var(--card-border);
    overflow: hidden;
}

.marketing-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
    border-color: #2563eb;
}

.marketing-card__icon {
    font-size: 72px;
    margin-bottom: 24px;
    transition: transform 0.3s ease;
}

.marketing-card:hover .marketing-card__icon {
    transform: scale(1.1);
}

.marketing-card__title {
    font-size: 28px;
    font-weight: 700;
    color: var(--card-text);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

.marketing-card__description {
    font-size: 16px;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: 24px;
    transition: color 0.3s ease;
}

.marketing-card__arrow {
    font-size: 32px;
    color: #2563eb;
    font-weight: bold;
    transition: transform 0.3s ease;
}

.marketing-card:hover .marketing-card__arrow {
    transform: translateX(8px);
}

@media (max-width: 768px) {
    .marketing-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================
   HAMBURGER MENU & RESPONSIVE SIDEBAR
   =================================== */

/* Overlay pour fermer le menu mobile */
.sidebar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.sidebar-overlay--active {
    opacity: 1;
    visibility: visible;
}

/* Bouton hamburger */
.header__hamburger {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 28px;
    height: 22px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: var(--spacing-md);
    z-index: 10000;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    position: relative;
}

.header__hamburger-line {
    width: 100%;
    height: 3px;
    background-color: var(--color-text-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
    transform-origin: center;
}

/* Animation du hamburger en X quand actif */
.header__hamburger--active .header__hamburger-line:nth-child(1) {
    transform: translateY(9.5px) rotate(45deg);
}

.header__hamburger--active .header__hamburger-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-20px);
}

.header__hamburger--active .header__hamburger-line:nth-child(3) {
    transform: translateY(-9.5px) rotate(-45deg);
}

/* Styles responsive pour la sidebar */
@media (max-width: 768px) {
    /* Afficher le bouton hamburger sur mobile */
    .header__hamburger {
        display: flex;
    }

    /* Cacher la sidebar par défaut sur mobile */
    .sidebar {
        position: fixed !important;
        left: 0 !important;
        top: 0 !important;
        width: 280px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        padding: var(--spacing-lg) !important;
        background-color: var(--sidebar-bg) !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s ease, background-color 0.3s ease !important;
        z-index: 9999 !important;
        box-shadow: none !important;
        overflow-y: auto !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Afficher la sidebar quand elle est ouverte */
    .sidebar--mobile-open {
        transform: translateX(0) !important;
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.15) !important;
    }

    /* Shadow plus prononcée en mode dark pour sidebar mobile */
    [data-theme="dark"] .sidebar--mobile-open {
        box-shadow: 4px 0 12px rgba(0, 0, 0, 0.4) !important;
    }

    /* Ajuster le main-content pour ne pas être décalé */
    .main-content {
        margin-left: 0;
        width: 100%;
    }

    /* S'assurer que le contenu de la sidebar est visible */
    .sidebar__logo-img--default {
        display: block;
    }

    .sidebar__logo-img--collapsed {
        display: none;
    }

    .sidebar__text {
        display: block;
    }

    .sidebar__section-title {
        display: block;
    }

    /* Ajuster le header */
    .header__left {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
        flex: 1;
    }

    .header__right {
        display: flex;
        align-items: center;
        gap: var(--spacing-md);
    }
}

/* Tablette - comportement intermédiaire */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Garder la sidebar visible mais plus étroite */
    .sidebar {
        width: 220px;
    }

    .main-content {
        margin-left: 220px;
    }

    /* Cacher le bouton hamburger sur tablette */
    .header__hamburger {
        display: none;
    }
}

/* Desktop - comportement par défaut */
@media (min-width: 1025px) {
    /* Cacher le bouton hamburger sur desktop */
    .header__hamburger {
        display: none;
    }

    /* Cacher l'overlay sur desktop */
    .sidebar-overlay {
        display: none;
    }
}

/* ===================================
   ADMIN NICHE ID (keyword-analysis)
   =================================== */
.admin-niche-id {
    padding: 8px 12px;
    margin-bottom: 12px;
    background-color: var(--color-bg-secondary);
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    transition: background-color 0.3s ease;
}

.admin-niche-id__label {
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.admin-niche-id__value {
    color: var(--card-text);
    font-weight: 600;
    transition: color 0.3s ease;
}

/* ===================================
   PERSONA SECTION (keyword-analysis)
   =================================== */
.persona-section {
    margin-top: 24px;
    padding: 20px;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.persona-section__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.persona-section__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.persona-section__actions {
    display: flex;
    gap: 8px;
}

.persona-section__actions .btn--success {
    background-color: #10b981;
    color: white;
    border-color: #10b981;
}

.persona-section__content {
    font-size: 14px;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.persona-section__empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.persona-section__hidden {
    display: none;
}

.persona-section__show-more {
    margin-top: 12px;
    text-align: center;
}

.persona-modal-content {
    font-size: 14px;
    line-height: 1;
    color: var(--color-text-light);
    white-space: pre-wrap;
    max-height: 70vh;
    overflow-y: auto;
    padding: 20px;
    transition: color 0.3s ease;
}

.persona-modal-content h2,
.persona-modal-content h3,
.persona-modal-content h4 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.persona-modal-content ul,
.persona-modal-content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.persona-modal-content li {
    margin: 6px 0;
}

.persona-modal-content strong {
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.persona-modal-content em {
    font-style: italic;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.persona-section__content h2,
.persona-section__content h3,
.persona-section__content h4 {
    margin-top: 20px;
    margin-bottom: 12px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

/* Tailles spécifiques pour les titres convertis depuis Markdown */
.persona-section__content .persona-h1 {
    font-size: 20px;
    margin-top: 16px;
    margin-bottom: 10px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.persona-section__content .persona-h2 {
    font-size: 18px;
    margin-top: 14px;
    margin-bottom: 8px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.persona-section__content .persona-h3 {
    font-size: 16px;
    margin-top: 12px;
    margin-bottom: 8px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

/* Appliquer les mêmes styles pour la modale */
.persona-modal-content .persona-h1 {
    font-size: 20px;
    font-weight: 600;
    color: var(--card-text);
    margin-top: 16px;
    margin-bottom: 10px;
    transition: color 0.3s ease;
}

.persona-modal-content .persona-h2 {
    font-size: 18px;
    font-weight: 600;
    color: var(--card-text);
    margin-top: 14px;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.persona-modal-content .persona-h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--card-text);
    margin-top: 12px;
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.persona-section__content ul,
.persona-section__content ol {
    margin: 12px 0;
    padding-left: 24px;
}

.persona-section__content li {
    margin: 6px 0;
}

.persona-section__content strong {
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.persona-section__content em {
    font-style: italic;
    color: #6b7280;
}

/* ===================================
   AFFILIATION PAGE
   =================================== */

/* Wrapper pour le lien d'affiliation avec bouton copier */
.affiliation-link-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    max-width: 100%;
}

.affiliation-link-input {
    flex: 1;
    min-width: 0;
}

.affiliation-link-input--large {
    font-size: 16px;
    font-weight: 600;
    color: var(--color-primary);
}

/* Code inline (comme dans les tableaux) */
.code-inline {
    display: inline-block;
    padding: 4px 8px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 4px;
    font-family: 'Courier New', Consolas, Monaco, monospace;
    font-size: 13px;
    color: var(--card-text);
    transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

/* Section card subtitle (sous-titre dans une section) */
.section-card__subtitle {
    font-size: 18px;
    font-weight: 600;
    color: var(--card-text);
    margin-bottom: 16px;
    transition: color 0.3s ease;
}

/* Section card content (zone de contenu) */
.section-card__content {
    padding: 0;
}

/* Classe text-muted pour les textes secondaires */
.text-muted {
    color: var(--color-text-muted);
    font-size: 14px;
}