/* ===================================
   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: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 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: 240px;
    --header-height: 64px;
}

/* 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: #7f1d1d;

    /* 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;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "cv11", "ss01", "ss03";
    letter-spacing: -0.01em;
    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: 12px 10px;
    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: auto;
    overscroll-behavior: contain;
    /* Firefox : scrollbar fin, thumb gris subtil */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        scrollbar-color 0.2s ease;
}

/* Webkit (Chrome / Edge / Safari) : scrollbar fin, invisible au repos */
.sidebar::-webkit-scrollbar {
    width: 6px;
}

.sidebar::-webkit-scrollbar-track {
    background: transparent;
}

.sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.2s ease;
}

/* Au hover de la sidebar, le thumb apparaît subtilement */
.sidebar:hover {
    scrollbar-color: rgba(100, 116, 139, 0.35) transparent;
}

.sidebar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(100, 116, 139, 0.35);
}

.sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(100, 116, 139, 0.55);
}

/* Mode dark : thumb un peu plus clair pour rester visible sur fond sombre */
[data-theme="dark"] .sidebar:hover {
    scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}

[data-theme="dark"] .sidebar:hover::-webkit-scrollbar-thumb {
    background-color: rgba(148, 163, 184, 0.35);
}

[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover {
    background-color: rgba(148, 163, 184, 0.6);
}

.sidebar__logo {
    margin-bottom: var(--spacing-lg);
    padding: 8px 4px;
    display: flex;
    justify-content: center;
}

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

.sidebar__logo-img {
    height: 28px;
    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;
    height: 28px;
}

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

.sidebar__section {
    margin-top: 18px;
    margin-bottom: 4px;
}

.sidebar__section-title {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 10px;
}

.sidebar__spacer {
    flex: 1;
}

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

.sidebar__item {
    border-radius: 6px;
    transition: background-color 0.15s ease;
}

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

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

.sidebar__item--active .sidebar__text {
    font-weight: 600;
}

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

.sidebar__link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    color: var(--sidebar-text);
    transition: color 0.15s ease;
}

.sidebar__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--color-text-light);
    transition: color 0.15s ease;
}

.sidebar__item:hover .sidebar__icon {
    color: var(--sidebar-text);
}

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

/* Dark mode : sur fond actif (bleu marine `#1e3a8a`), le texte et l'icône en
   `--color-primary` (#2563eb) manquaient de contraste. On bascule en blanc pour
   rester cohérent avec le pattern déjà appliqué au badge `.sidebar__soon` actif. */
[data-theme="dark"] .sidebar__item--active .sidebar__link,
[data-theme="dark"] .sidebar__item--active .sidebar__text,
[data-theme="dark"] .sidebar__item--active .sidebar__icon {
    color: #ffffff;
}

.sidebar__text {
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
}

/* Item avec sous-titre (ex. "Soon" sous le label) — l'item s'élargit verticalement */
.sidebar__item--with-subtitle .sidebar__link {
    align-items: flex-start;
    padding-top: 6px;
    padding-bottom: 6px;
}

.sidebar__item--with-subtitle .sidebar__icon {
    margin-top: 1px;
}

.sidebar__text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
}

/* Badge "Soon" : pill bleu subtil sous le label */
.sidebar__soon {
    align-self: flex-start;
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-primary);
    background-color: var(--color-blue-light);
    padding: 1px 6px;
    border-radius: 10px;
    line-height: 1.4;
}

[data-theme="dark"] .sidebar__soon {
    color: #93c5fd;
    background-color: rgba(37, 99, 235, 0.18);
}

/* En état actif, on neutralise le contraste pour éviter le double bleu sur bleu */
.sidebar__item--active .sidebar__soon {
    background-color: rgba(37, 99, 235, 0.18);
    color: var(--color-primary);
}

[data-theme="dark"] .sidebar__item--active .sidebar__soon {
    background-color: rgba(255, 255, 255, 0.12);
    color: #fff;
}

.sidebar__badge {
    margin-left: auto;
    background: #ef4444;
    color: white;
    font-size: 10.5px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 10px;
    min-width: 18px;
    text-align: center;
    line-height: 1.4;
}

/* ===================================
   SIDEBAR — Carte Centre d'aide
   =================================== */
.sidebar__help-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-top: var(--spacing-sm);
    padding: 12px;
    background-color: var(--color-bg-light);
    border: 1px solid var(--sidebar-border);
    border-radius: 8px;
    text-decoration: none;
    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

[data-theme="dark"] .sidebar__help-card {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--sidebar-border);
}

.sidebar__help-card:hover {
    background-color: rgba(37, 99, 235, 0.06);
    border-color: rgba(37, 99, 235, 0.3);
}

[data-theme="dark"] .sidebar__help-card:hover {
    background-color: rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.35);
}

.sidebar__help-card__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: #fff;
    flex-shrink: 0;
}

.sidebar__help-card__icon svg {
    width: 14px;
    height: 14px;
}

.sidebar__help-card__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1;
    padding-right: 14px;
}

.sidebar__help-card__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--sidebar-text);
    letter-spacing: -0.01em;
    line-height: 1.3;
}

.sidebar__help-card__text {
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--color-text-light);
}

.sidebar__help-card__link {
    color: var(--color-primary);
    font-weight: 500;
}

.sidebar__help-card__external {
    position: absolute;
    top: 10px;
    right: 10px;
    color: var(--color-text-light);
    flex-shrink: 0;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.sidebar__help-card:hover .sidebar__help-card__external {
    opacity: 1;
    color: var(--color-primary);
}

/* Section promotionnelle sidebar — footer status façon Linear */
.sidebar__promo {
    margin-top: var(--spacing-sm);
    padding-top: var(--spacing-sm);
    border-top: 1px solid var(--sidebar-border);
    background: transparent;
    display: flex;
    flex-direction: column;
    gap: 2px;
    transition: border-color 0.3s ease;
}

.sidebar__promo-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-radius: 6px;
    text-decoration: none;
    transition: background-color 0.15s ease;
    font-size: 13.5px;
    font-weight: 500;
    letter-spacing: -0.005em;
    color: var(--sidebar-text);
}

.sidebar__promo-link:hover {
    background-color: var(--sidebar-hover);
}

/* Shopify : item neutre + petit dot vert devant le texte */
.sidebar__promo-link--shopify {
    color: var(--sidebar-text);
    background: transparent;
}

.sidebar__promo-link--shopify::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-success);
    flex-shrink: 0;
    margin-left: 6px;
    margin-right: 6px;
}

/* Formation : item normal, icône bleue primaire (plus de plein bleu) */
.sidebar__promo-link--training {
    color: var(--sidebar-text);
    background: transparent;
}

.sidebar__promo-link--training .sidebar__promo-icon {
    color: var(--color-primary);
    width: 16px;
    height: 16px;
}

/* Plan actuel : item compact, icône zap dorée pour signifier "actif" */
.sidebar__promo-link--plan,
.sidebar__promo-link--upgrade {
    color: var(--sidebar-text);
    background: transparent;
    font-weight: 500;
}

.sidebar__promo-link--plan .sidebar__promo-icon {
    color: var(--color-warning);
}

/* Upgrade : accentué bleu primaire (CTA subtil mais visible) */
.sidebar__promo-link--upgrade {
    color: var(--color-primary);
    font-weight: 600;
}

.sidebar__promo-link--upgrade .sidebar__promo-icon {
    color: var(--color-primary);
}

.sidebar__promo-icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

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

.sidebar__promo-subscription {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-top: 2px;
}

.sidebar__promo-trial-container {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 4px;
}

/* Bloc trial : carte minimale orange, plus dans l'esprit "tip" que panneau marketing */
.sidebar__promo-trial-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.18);
    border-radius: 6px;
}

[data-theme="dark"] .sidebar__promo-trial-info {
    background: rgba(245, 158, 11, 0.12);
    border-color: rgba(245, 158, 11, 0.25);
}

.sidebar__promo-trial-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: var(--color-warning);
    border-radius: 5px;
    font-size: 13px;
    font-weight: 700;
    color: #fff;
    flex-shrink: 0;
    transition: background-color 0.3s ease;
}

.sidebar__promo-trial-text {
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

/* ===================================
         MAIN CONTENT
         =================================== */
.main-content {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    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 20px;
    position: sticky;
    top: 0;
    z-index: 50;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.header__title {
    font-size: 16px;
    font-weight: 600;
    color: var(--header-text);
    letter-spacing: -0.01em;
    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: 20px;
    height: 20px;
    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: 34px;
    height: 34px;
    border-radius: 50%;
}

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

.header__user-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--color-text-dark);
    letter-spacing: -0.01em;
}

.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 STATUS BANNER (nouveau système Stripe)
      =================================== */
.trial-banner {
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    animation: slideDown 0.3s ease-out;
}

.trial-banner--active {
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    box-shadow: 0 4px 6px -1px rgba(79, 70, 229, 0.2);
}

[data-theme="dark"] .trial-banner--active {
    background: linear-gradient(135deg, #5b21b6 0%, #3730a3 100%);
}

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

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

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

/* Bandeau essai actif (fond violet) : texte foncé en light, clair en dark — pas de blanc illisible */
.trial-banner--active .trial-banner__text strong {
    color: #0f172a;
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

[data-theme="dark"] .trial-banner--active .trial-banner__text strong {
    color: #f8fafc;
}

/* Sous-titre (frère du <strong>, pas le #trial-countdown à l’intérieur) */
.trial-banner--active .trial-banner__text > span {
    color: rgba(15, 23, 42, 0.82);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

[data-theme="dark"] .trial-banner--active .trial-banner__text > span {
    color: rgba(248, 250, 252, 0.9);
}

.trial-banner--active #trial-countdown {
    color: inherit;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.trial-banner__btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    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;
}

.trial-banner__btn--end {
    background-color: var(--color-white);
    color: #4f46e5;
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.trial-banner__btn--end:hover {
    background-color: #f0f0ff;
    transform: translateY(-1px);
}

/* ===================================
      UPSELL MODAL (quota / trial — gabarit .modal identique à confirmation-modal)
      =================================== */
.ocb-upsell-modal .modal__title.ocb-upsell-modal__title {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex: 1;
    min-width: 0;
}

.ocb-upsell-modal__title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.ocb-upsell-modal__title-text {
    flex: 1;
    min-width: 0;
}

.ocb-upsell-modal .modal__body .modal-text {
    margin: 0;
}

/* Surcharge : .modal-warning-box strong est en display:block ailleurs pour le titre ; ici tout le bloc est un seul paragraphe fluide */
.ocb-upsell-modal__trial-callout .modal-warning-text strong {
    display: inline;
    margin: 0;
    font-size: inherit;
    color: #92400e;
}

#ocb-deep-analysis-quota-upsell,
#ocb-shop-analysis-quota-upsell,
#ocb-trial-quota-upsell-modal {
    align-items: center;
    justify-content: center;
}

/* ===================================
      PREMIUM UPSELL MODAL (2 colonnes — conversion)
      =================================== */
.modal__container--ocb-premium {
    max-width: 1020px;
    width: calc(100% - 1.5rem);
}

.ocb-premium-modal .modal__content--ocb-premium {
    max-width: none;
    width: 100%;
    padding: 1.75rem 1.5rem 1.35rem;
    background: linear-gradient(155deg, #0f172a 0%, #0c1324 42%, #080d18 100%);
    border: 1px solid rgba(148, 163, 184, 0.14);
    box-shadow:
        0 28px 90px rgba(0, 0, 0, 0.55),
        0 0 0 1px rgba(15, 23, 42, 0.6) inset;
    color: #e2e8f0;
}

.ocb-premium-modal__close.modal__close {
    top: 1rem;
    right: 1rem;
    background: rgba(255, 255, 255, 0.08);
    color: #f1f5f9;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.ocb-premium-modal__close.modal__close:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
}

.ocb-premium-modal__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) 1px minmax(0, 0.95fr);
    gap: 1.5rem 1.75rem;
    align-items: start;
    padding-top: 0.35rem;
}

.ocb-premium-modal__divider {
    width: 1px;
    align-self: stretch;
    min-height: 12rem;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(148, 163, 184, 0.22) 12%,
        rgba(148, 163, 184, 0.22) 88%,
        transparent 100%
    );
}

.ocb-premium-modal__headline {
    margin: 0 0 0.85rem;
    font-size: clamp(1.25rem, 2.6vw, 1.65rem);
    font-weight: 800;
    line-height: 1.22;
    letter-spacing: -0.03em;
    color: #f8fafc;
}

.ocb-premium-modal__context-title {
    margin: 0 0 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
}

.ocb-premium-modal__context-msg {
    margin: 0 0 1.1rem;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: #cbd5e1;
}

.ocb-premium-modal__list-intro {
    margin: 0 0 0.65rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
}

.ocb-premium-modal__checklist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ocb-premium-modal__checklist-item {
    display: flex;
    align-items: flex-start;
    gap: 0.55rem;
    font-size: 0.875rem;
    line-height: 1.45;
    color: #e2e8f0;
}

.ocb-premium-modal__check {
    flex-shrink: 0;
    margin-top: 0.1rem;
    display: inline-flex;
    color: #3b82f6;
}

.ocb-premium-modal__trial-callout {
    margin-top: 1.15rem;
    padding: 0.85rem 1rem;
    border-radius: 10px;
    border: 1px solid rgba(251, 191, 36, 0.35);
    background: rgba(251, 191, 36, 0.08);
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
}

.ocb-premium-modal__trial-callout-icon {
    flex-shrink: 0;
    color: #fbbf24;
}

.ocb-premium-modal__trial-callout-text {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #fde68a;
}

.ocb-premium-modal__trial-callout-text strong {
    display: inline;
    font-size: inherit;
    color: #fef3c7;
}

.ocb-premium-modal__billing {
    display: inline-flex;
    align-self: flex-end;
    padding: 3px;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: rgba(15, 23, 42, 0.85);
    border: 1px solid rgba(148, 163, 184, 0.18);
    gap: 2px;
}

.ocb-premium-modal__billing-btn {
    position: relative;
    border: none;
    cursor: pointer;
    padding: 0.45rem 1rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #94a3b8;
    background: transparent;
    border-radius: 999px;
    transition:
        background 0.18s ease,
        color 0.18s ease;
}

.ocb-premium-modal__billing-btn.is-active {
    background: #2563eb;
    color: #f8fafc;
    box-shadow: 0 1px 8px rgba(37, 99, 235, 0.45);
}

.ocb-premium-modal__billing-badge {
    margin-left: 0.35rem;
    padding: 0.1rem 0.4rem;
    font-size: 0.65rem;
    font-weight: 800;
    border-radius: 6px;
    vertical-align: middle;
    background: var(--color-success, #10b981);
    color: #fff;
    letter-spacing: 0.02em;
}

.ocb-premium-modal__col--right {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ocb-premium-modal__plans {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    margin-bottom: 1rem;
}

.ocb-premium-modal__plan {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 0.65rem 0.85rem;
    width: 100%;
    text-align: left;
    padding: 0.75rem 0.85rem;
    border-radius: 12px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(15, 23, 42, 0.45);
    color: inherit;
    cursor: pointer;
    transition:
        border-color 0.18s ease,
        background 0.18s ease,
        box-shadow 0.18s ease;
}

.ocb-premium-modal__plan:hover {
    border-color: rgba(96, 165, 250, 0.45);
    background: rgba(30, 41, 59, 0.55);
}

.ocb-premium-modal__plan.is-selected {
    border-color: #3b82f6;
    border-width: 2px;
    padding: calc(0.75rem - 1px) calc(0.85rem - 1px);
    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.25);
    background: rgba(30, 58, 138, 0.22);
}

.ocb-premium-modal__plan-radio {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(148, 163, 184, 0.55);
    box-sizing: border-box;
    flex-shrink: 0;
}

.ocb-premium-modal__plan.is-selected .ocb-premium-modal__plan-radio {
    border-color: #3b82f6;
    background: radial-gradient(circle, #3b82f6 0%, #3b82f6 42%, transparent 44%);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
}

.ocb-premium-modal__plan-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f1f5f9;
    min-width: 0;
}

.ocb-premium-modal__plan-price-block {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.15rem;
    text-align: right;
    min-width: 5.5rem;
}

.ocb-premium-modal__plan-line-main {
    display: inline-flex;
    align-items: baseline;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.1rem;
    font-size: 0.9375rem;
    font-weight: 700;
    color: #f8fafc;
}

.ocb-premium-modal__plan-amount {
    font-variant-numeric: tabular-nums;
}

.ocb-premium-modal__plan-euro {
    font-weight: 700;
    margin-left: 0.1rem;
}

.ocb-premium-modal__plan-split,
.ocb-premium-modal__plan-unit {
    font-weight: 600;
    font-size: 0.8125rem;
    color: #94a3b8;
}

.ocb-premium-modal__plan-soit {
    font-size: 0.7rem;
    font-weight: 500;
    color: #64748b;
    line-height: 1.2;
}

.ocb-premium-modal__empty-plans {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    color: #94a3b8;
}

.ocb-premium-modal__testimonial {
    margin: 0 0 1rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(148, 163, 184, 0.12);
}

.ocb-premium-modal__testimonial-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.55rem;
}

.ocb-premium-modal__stars {
    display: flex;
    gap: 2px;
}

.ocb-premium-modal__star {
    color: #fbbf24;
    fill: #fbbf24;
    stroke: #f59e0b;
    flex-shrink: 0;
}

.ocb-premium-modal__testimonial-meta {
    font-size: 0.7rem;
    color: #64748b;
    white-space: nowrap;
}

.ocb-premium-modal__quote {
    margin: 0 0 0.45rem;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: #cbd5e1;
    font-style: normal;
}

.ocb-premium-modal__cite {
    font-size: 0.75rem;
    color: #94a3b8;
    font-style: normal;
}

.ocb-premium-modal__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    margin: 0 0 0.85rem;
    padding: 0.85rem 1.25rem;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    text-decoration: none;
    cursor: pointer;
    background: var(--color-success, #10b981);
    color: #fff;
    box-shadow: 0 10px 28px rgba(16, 185, 129, 0.35);
    transition:
        background 0.18s ease,
        transform 0.15s ease,
        box-shadow 0.18s ease;
}

.ocb-premium-modal__cta:hover {
    background: #059669;
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 14px 34px rgba(16, 185, 129, 0.42);
}

.ocb-premium-modal__social {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem;
    margin-bottom: 0.35rem;
}

.ocb-premium-modal__avatars {
    display: flex;
    align-items: center;
}

.ocb-premium-modal__avatar {
    display: block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: 2px solid #0f172a;
    margin-left: -8px;
    flex-shrink: 0;
    object-fit: cover;
    box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12);
}

.ocb-premium-modal__avatar:first-child {
    margin-left: 0;
}

.ocb-premium-modal__social-text {
    margin: 0;
    font-size: 0.75rem;
    color: #94a3b8;
    display: flex;
    align-items: center;
    gap: 0.2rem;
    flex-wrap: wrap;
}

.ocb-premium-modal__social-star {
    color: #fbbf24;
    fill: #fbbf24;
    stroke: #f59e0b;
    flex-shrink: 0;
}

.ocb-premium-modal__later {
    align-self: center;
    margin-top: 0.15rem;
    padding: 0.35rem 0.5rem;
    border: none;
    background: none;
    cursor: pointer;
    font-size: 0.8125rem;
    font-weight: 600;
    color: #64748b;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.ocb-premium-modal__later:hover {
    color: #94a3b8;
}

@media (max-width: 880px) {
    .ocb-premium-modal__grid {
        grid-template-columns: 1fr;
    }

    .ocb-premium-modal__divider {
        display: none;
    }

    .ocb-premium-modal__billing {
        align-self: stretch;
        justify-content: center;
    }
}

/* ===================================
      TRIAL EXPIRED BANNER (legacy)
      =================================== */
.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;
    }
}

/* ===================================
         PAYMENT FAILED BANNER
         =================================== */
.payment-failed-banner {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    padding: var(--spacing-md) var(--spacing-xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    border-radius: var(--border-radius-md);
    margin-bottom: var(--spacing-md);
    box-shadow:
        0 4px 6px -1px rgba(245, 158, 11, 0.1),
        0 2px 4px -1px rgba(245, 158, 11, 0.06);
    animation: slideDown 0.3s ease-out;
}

[data-theme="dark"] .payment-failed-banner {
    background: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.payment-failed-banner__icon {
    font-size: 24px;
    line-height: 1;
    flex-shrink: 0;
    color: var(--color-white);
}

.payment-failed-banner__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.payment-failed-banner__title {
    color: var(--color-white);
    font-size: var(--font-size-md);
    font-weight: var(--font-weight-bold);
    letter-spacing: -0.01em;
}

.payment-failed-banner__message {
    color: rgba(255, 255, 255, 0.95);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    margin: 0;
}

.payment-failed-banner__warning {
    font-weight: var(--font-weight-semibold);
    color: var(--color-white);
}

.payment-failed-banner__action {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .payment-failed-banner {
        flex-direction: column;
        padding: var(--spacing-md);
        text-align: center;
    }

    .payment-failed-banner__icon {
        margin: 0 auto;
    }

    .payment-failed-banner__content {
        text-align: center;
    }

    .payment-failed-banner__action {
        width: 100%;
    }

    .payment-failed-banner__action .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(--card-bg);
    border: 1px solid var(--card-border);
    border-left: 4px solid var(--card-border);
    border-radius: var(--border-radius-sm);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 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-hover);
}

/* 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(--input-border);
    background-color: var(--input-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    cursor: pointer;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 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(--card-text);
    margin-bottom: var(--spacing-xs);
    transition: color 0.3s ease;
}

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

/* ===================================
         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--primary:disabled,
.btn--primary.btn--disabled {
    background-color: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn--primary:disabled:hover,
.btn--primary.btn--disabled:hover {
    background-color: #9ca3af;
    transform: none;
    box-shadow: none;
}

.btn--primary:disabled,
.btn--primary.btn--disabled {
    background-color: #9ca3af;
    color: #ffffff;
    cursor: not-allowed;
    opacity: 0.6;
}

.btn--primary:disabled:hover,
.btn--primary.btn--disabled:hover {
    background-color: #9ca3af;
    transform: none;
    box-shadow: none;
}

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

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

.btn--secondary:disabled,
.btn--secondary.btn--disabled {
    background-color: var(--color-bg-secondary);
    color: var(--color-text-muted);
    border-color: var(--card-border);
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
    transform: none;
    box-shadow: none;
    transition:
        opacity 0.2s ease,
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.btn--secondary:disabled:hover,
.btn--secondary.btn--disabled:hover {
    background-color: var(--color-bg-secondary);
    border-color: var(--card-border);
    transform: none;
    box-shadow: none;
}

.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,
.btn--full {
    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;
}

/* ===================================
         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__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.product-card__price-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.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;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-primary);
}

.analysis-confirmation__icon svg {
    flex-shrink: 0;
}

/* Animation de rotation pour le loader */
.analysis-confirmation__icon svg[class*="lucide-loader"] {
    animation: spin 1s linear infinite;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.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;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 500;
}

.analysis-confirmation__warning svg {
    flex-shrink: 0;
}

/* 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;
    cursor: pointer;
}

.analysis-user-niches__item--analyzed:hover {
    border-color: #10b981;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
    transform: translateY(-2px);
}

.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: var(--modal-bg);
    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;
    transition: background-color 0.3s ease;
}

@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;
}

/* Variante pour les cards (sans background) */
.niche-score--card {
    background-image: none;
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-sm);
    min-width: auto;
    transition: background-color 0.3s ease;
}

/* Variante pour les cards (sans background) */
.niche-score--card {
    background-image: none;
    background-color: var(--color-bg-secondary);
    padding: var(--spacing-sm);
    min-width: auto;
    transition: background-color 0.3s ease;
}

.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;
}

/* Couleur dynamique via data attribute */
.niche-score__value--colored[data-score-color="#10b981"] {
    color: #10b981;
}

.niche-score__value--colored[data-score-color="#3b82f6"] {
    color: #3b82f6;
}

.niche-score__value--colored[data-score-color="#f59e0b"] {
    color: #f59e0b;
}

.niche-score__value--colored[data-score-color="#ef4444"] {
    color: #ef4444;
}

/* Couleur dynamique via data attribute */
.niche-score__value--colored[data-score-color="#10b981"] {
    color: #10b981;
}

.niche-score__value--colored[data-score-color="#3b82f6"] {
    color: #3b82f6;
}

.niche-score__value--colored[data-score-color="#f59e0b"] {
    color: #f59e0b;
}

.niche-score__value--colored[data-score-color="#ef4444"] {
    color: #ef4444;
}

/* 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);
}

.niche-score__progress-circle {
    transition: stroke-dashoffset 1s ease-in-out;
}

.niche-score__progress-circle {
    transition: stroke-dashoffset 1s ease-in-out;
}

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

/* Keyword analysis : recherche (50 %) + encart génération boutique (50 %) */
.analysis-results-top-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    gap: var(--spacing-lg);
}

.analysis-results-top-row__col {
    flex: 1 1 50%;
    min-width: 0;
}

.analysis-results-top-row__col--search .analysis-search {
    height: 100%;
    box-sizing: border-box;
}

.keyword-analysis-shop-cta {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    padding: var(--spacing-lg);
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.keyword-analysis-shop-cta__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-dark);
    margin: 0;
    transition: color 0.3s ease;
}

.keyword-analysis-shop-cta__desc {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    line-height: 1.5;
    margin: 0;
    flex: 1;
    transition: color 0.3s ease;
}

.keyword-analysis-shop-cta__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: auto;
}

.keyword-analysis-generate-shop-form {
    display: none;
}

.shop-generation-confirm-modal__niche {
    margin-top: var(--spacing-sm);
}

.shop-generation-confirm-modal__niche-prefix {
    margin-right: var(--spacing-xs);
}

.shop-generation-confirm-modal__admin-skip {
    margin-top: var(--spacing-md);
    padding: var(--spacing-md);
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.shop-generation-confirm-modal__admin-skip-label {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    cursor: pointer;
    color: var(--color-text-dark);
    font-size: var(--font-size-sm);
    line-height: 1.45;
}

.shop-generation-confirm-modal__admin-skip-label input {
    margin-top: 3px;
    flex-shrink: 0;
}

.shop-generation-confirm-modal__admin-skip-hint {
    margin: var(--spacing-sm) 0 0;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    line-height: 1.4;
}

.shop-generation-confirm-modal__code {
    font-family: ui-monospace, monospace;
    font-size: 0.95em;
    color: var(--color-text-dark);
}

[data-theme="dark"] .shop-generation-confirm-modal__admin-skip {
    background-color: var(--color-bg-hover);
}

@media (max-width: 1024px) {
    .analysis-results-top-row {
        flex-direction: column;
    }

    .analysis-results-top-row__col {
        flex: 1 1 auto;
    }
}

.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: var(--card-text);
    transition: color 0.3s ease;
}

.help-header__subtitle {
    margin: 0;
    font-size: 16px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.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;
}

/* Tutorial Video Styles */
.tutorial-video {
    margin-bottom: 20px;
    border-radius: 8px;
    overflow: hidden;
}

.tutorial-video__player {
    width: 100%;
    height: auto;
    max-height: 500px;
    background: #000000;
    border-radius: 8px;
    object-fit: contain;
}

.tutorial-description {
    margin-top: 16px;
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    color: var(--card-text);
    font-size: 14px;
    line-height: 1.6;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.tutorial-description p {
    margin-bottom: 8px;
}

.tutorial-description p:last-child {
    margin-bottom: 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;
}

/* Génération boutique : au-dessus du contenu (main-content scroll) et de la modale de progression */
#shop-generation-confirm.modal--active {
    z-index: 10050;
}

#generation-progress-modal.modal--active {
    z-index: 10040;
}

#ocs-keyword-search-loading-modal.modal--active {
    z-index: 10045;
}

/* Top niches : actions empilées (Analyser + génération boutique), même largeur */
.top-niches-actions {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    align-items: stretch;
    width: 100%;
    min-width: 9.5rem;
}

.top-niches-actions__analyze {
    width: 100%;
}

.top-niches-actions__analyze > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    box-sizing: border-box;
}

.top-niches-actions--card {
    width: 100%;
    min-width: 0;
}

.top-niches-shop-cta {
    width: 100%;
}

.top-niches-shop-cta form {
    width: 100%;
    margin: 0;
}

.products-table__td--stacked-actions {
    vertical-align: top;
}

.top-niches-shop-cta .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    width: 100%;
    box-sizing: border-box;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.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;
    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;
    padding: var(--spacing-xl);
}

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

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

/* Modales formulaire / chargement : pas du gabarit « vidéo » plein écran */
.modal--panel .modal__backdrop {
    background-color: rgba(15, 23, 42, 0.45);
}

.modal__content--panel {
    padding: var(--spacing-lg) var(--spacing-xl) var(--spacing-xl);
    max-width: 100%;
}

.modal__body--panel-slot {
    padding: 0;
}

.modal__body--panel-slot > *:first-child {
    margin-top: 0;
}

.modal__body--panel-slot > *:last-child {
    margin-bottom: 0;
}

/* Chargement import catalogue Shopify (modale panel) */
#catalogShopifyImportLoadingModal.modal--panel .modal__title {
    text-align: center;
    padding-right: 0;
    font-size: 1.25rem;
    letter-spacing: -0.02em;
}

.catalog-shopify-import-loading {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    text-align: center;
}

.catalog-shopify-import-loading__visual {
    position: relative;
    width: 4.5rem;
    height: 4.5rem;
    margin: 0.25rem auto 0;
}

.catalog-shopify-import-loading__ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--color-primary, #6366f1) 22%, transparent);
    border-top-color: var(--color-primary, #6366f1);
    animation: catalogShopifyImportSpin 0.95s linear infinite;
}

.catalog-shopify-import-loading__icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary, #6366f1);
    animation: catalogShopifyImportPulse 2s ease-in-out infinite;
}

.catalog-shopify-import-loading__lead {
    margin: 0 auto;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-light, #64748b);
    max-width: 26rem;
}

.catalog-shopify-import-loading__bar {
    height: 6px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--card-border, #e2e8f0) 80%, transparent);
    overflow: hidden;
    margin-top: 0.15rem;
}

.catalog-shopify-import-loading__bar-fill {
    display: block;
    height: 100%;
    width: 40%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--color-primary, #6366f1),
        color-mix(in srgb, var(--color-primary, #6366f1) 65%, #a855f7),
        var(--color-primary, #6366f1)
    );
    background-size: 200% 100%;
    animation:
        catalogShopifyImportBarSlide 1.35s ease-in-out infinite,
        catalogShopifyImportBarShimmer 2.2s linear infinite;
}

.catalog-shopify-import-loading__rotator {
    position: relative;
    min-height: 2.65rem;
    margin-top: 0.2rem;
}

.catalog-shopify-import-loading__rotator-line {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--card-text, #334155);
    font-weight: 500;
    opacity: 0;
    animation: catalogShopifyImportRot 7.8s ease-in-out infinite;
}

.catalog-shopify-import-loading__rotator-line:nth-child(1) {
    animation-delay: 0s;
}

.catalog-shopify-import-loading__rotator-line:nth-child(2) {
    animation-delay: 2.6s;
}

.catalog-shopify-import-loading__rotator-line:nth-child(3) {
    animation-delay: 5.2s;
}

.catalog-shopify-import-loading__steps {
    list-style: none;
    margin: 0.35rem 0 0;
    padding: 0.85rem 1rem 0.75rem;
    text-align: left;
    border-radius: var(--border-radius-lg, 12px);
    border: 1px solid var(--card-border, #e2e8f0);
    background: color-mix(in srgb, var(--color-bg-light, #f8fafc) 88%, transparent);
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.catalog-shopify-import-loading__step {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.8125rem;
    line-height: 1.35;
    color: var(--color-text-light, #64748b);
}

.catalog-shopify-import-loading__dot {
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--card-border, #cbd5e1);
    transition:
        background 0.25s ease,
        box-shadow 0.25s ease;
}

.catalog-shopify-import-loading__step.is-done {
    color: var(--color-text, #475569);
}

.catalog-shopify-import-loading__step.is-done .catalog-shopify-import-loading__dot {
    background: var(--color-success, #22c55e);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success, #22c55e) 25%, transparent);
}

.catalog-shopify-import-loading__step.is-busy {
    color: var(--card-text, #0f172a);
    font-weight: 600;
}

.catalog-shopify-import-loading__step.is-busy .catalog-shopify-import-loading__dot {
    background: var(--color-primary, #6366f1);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary, #6366f1) 28%, transparent);
    animation: catalogShopifyImportDotPulse 1.4s ease-in-out infinite;
}

@keyframes catalogShopifyImportSpin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes catalogShopifyImportPulse {
    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.06);
        opacity: 0.88;
    }
}

@keyframes catalogShopifyImportBarSlide {
    0% {
        transform: translateX(-100%);
    }

    100% {
        transform: translateX(220%);
    }
}

@keyframes catalogShopifyImportBarShimmer {
    0% {
        background-position: 0% 50%;
    }

    100% {
        background-position: 200% 50%;
    }
}

@keyframes catalogShopifyImportRot {
    0%,
    3% {
        opacity: 0;
        transform: translateY(6px);
    }

    10%,
    30% {
        opacity: 1;
        transform: translateY(0);
    }

    38%,
    100% {
        opacity: 0;
        transform: translateY(-5px);
    }
}

@keyframes catalogShopifyImportDotPulse {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.15);
    }
}

[data-theme="dark"] .catalog-shopify-import-loading__steps {
    background: color-mix(in srgb, var(--color-bg-light, #1e293b) 75%, transparent);
    border-color: var(--card-border, #334155);
}

[data-theme="dark"] .catalog-shopify-import-loading__lead {
    color: var(--color-text-light, #94a3b8);
}

[data-theme="dark"] .catalog-shopify-import-loading__rotator-line {
    color: var(--card-text, #e2e8f0);
}

@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);
}

/* Centrage des modales Shopify */
#publish-confirm-modal,
#generate-logo-modal,
#generate-logo-progress-modal,
#connect-shopify-modal,
#success-modal,
#error-modal,
#shopify-connected-modal,
#delete-all-shops-modal {
    align-items: center;
    justify-content: center;
}

/* Centrage des actions dans les modales Shopify */
#publish-confirm-modal .modal__actions,
#generate-logo-modal .modal__actions,
#generate-logo-progress-modal .modal__actions,
#connect-shopify-modal .modal__actions,
#success-modal .modal__actions,
#error-modal .modal__actions,
#shopify-connected-modal .modal__actions,
#delete-all-shops-modal .modal__actions {
    justify-content: center;
}

/* Masquer la sidebar sur la page de customization */
body.hide-sidebar .sidebar {
    display: none;
}

body.hide-sidebar .main-content {
    margin-left: 0;
}

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

/* Centrage des actions dans les modales Shopify */
#publish-confirm-modal .modal__actions,
#generate-logo-modal .modal__actions,
#generate-logo-progress-modal .modal__actions,
#connect-shopify-modal .modal__actions,
#success-modal .modal__actions,
#error-modal .modal__actions,
#shopify-connected-modal .modal__actions,
#delete-all-shops-modal .modal__actions {
    justify-content: center;
}

/* Page customize : quota + preview logo */
.customize-logo-quota {
    margin-top: var(--spacing-lg);
    margin-bottom: var(--spacing-sm);
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    transition: color 0.3s ease;
}

.customize-logo-quota--exhausted {
    color: var(--color-warning);
    font-weight: 500;
}

:root[data-theme="dark"] .customize-logo-quota--exhausted {
    color: var(--color-warning);
}

.customize-logo-quota-admin-reset {
    margin: 0 0 var(--spacing-sm) 0;
    padding: 0;
}

.customize-logo-quota-admin-reset--hidden {
    display: none;
}

.customize-logo-quota-admin-reset__btn {
    background: none;
    border: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    font-family: inherit;
    color: var(--color-info);
    text-decoration: underline;
    cursor: pointer;
    transition: color 0.3s ease;
}

.customize-logo-quota-admin-reset__btn:hover {
    color: var(--color-primary);
}

[data-theme="dark"] .customize-logo-quota-admin-reset__btn:hover {
    color: var(--color-primary);
}

.customize-logo-generate-btn {
    margin-top: var(--spacing-sm);
}

.customize-logo-generate-btn__loading {
    display: flex;
    align-items: center;
    gap: 8px;
}

.customize-logo-preview {
    margin-top: var(--spacing-md);
}

.customize-logo-preview--hidden {
    display: none;
}

.customize-logo-preview__label {
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    color: var(--card-text);
}

.customize-logo-preview__img {
    max-width: 200px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--card-border);
}

/* Modal génération logo */
.generate-logo-modal__intro {
    margin-top: var(--spacing-sm);
    margin-bottom: var(--spacing-md);
    color: var(--color-text-muted);
}

.generate-logo-modal__quota {
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius-md);
    background-color: var(--color-bg-secondary);
    color: var(--card-text);
    font-size: 0.875rem;
    font-weight: 500;
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

:root[data-theme="dark"] .generate-logo-modal__quota {
    background-color: var(--color-bg-secondary);
}

.generate-logo-modal__field {
    margin-bottom: var(--spacing-md);
}

.generate-logo-modal__color-hint {
    margin-bottom: var(--spacing-sm);
    font-size: 0.8125rem;
    line-height: 1.45;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.generate-logo-modal__color-picker {
    margin-top: var(--spacing-xs);
}

/*
    * Modale logo : les .form-input globaux imposent width:100% plus loin dans la CSS.
    * On fige le layout comme la sidebar (pastille + hex), avec priorité sur la largeur.
    */
#generate-logo-modal .generate-logo-modal__color-picker.color-picker-wrapper {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    gap: 12px;
    width: 100%;
}

#generate-logo-modal .generate-logo-modal__color-picker .color-input {
    width: 60px !important;
    min-width: 60px !important;
    max-width: 60px !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 4px !important;
    box-sizing: border-box;
    flex-shrink: 0;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    background-color: var(--input-bg);
    cursor: pointer;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease;
}

#generate-logo-modal .generate-logo-modal__color-picker .color-input:hover {
    border-color: var(--color-primary);
}

#generate-logo-modal .generate-logo-modal__color-picker .color-text {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100%;
    font-family: "Courier New", Courier, monospace;
    font-size: 14px;
    background-color: var(--input-bg);
    color: var(--input-text);
    border-color: var(--input-border);
}

.generate-logo-modal__textarea {
    min-height: 100px;
    resize: vertical;
}

/* Modal chargement génération logo */
.generate-logo-progress-modal__content {
    text-align: center;
}

.generate-logo-progress-modal__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-md);
    padding-bottom: var(--spacing-xs);
}

.generate-logo-progress-modal__spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--color-bg-secondary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

.generate-logo-progress-modal__text {
    font-size: 1rem;
    font-weight: 500;
    color: var(--card-text);
    margin: 0;
    transition: color 0.3s ease;
}

.generate-logo-progress-modal__hint {
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 28rem;
    transition: color 0.3s ease;
}

/* ===================================
      WELCOME MODAL STYLES (génération de boutique)
      =================================== */
.welcome-choices {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 2rem;
}

.welcome-choice {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2rem 1.5rem;
    background: rgba(255, 255, 255, 0.5);
    border: 2px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* Dark mode */
:root[data-theme="dark"] .welcome-choice {
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.welcome-choice:hover {
    transform: translateY(-4px);
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.15);
    background: rgba(59, 130, 246, 0.08);
}

/* Dark mode hover */
:root[data-theme="dark"] .welcome-choice:hover {
    background: rgba(59, 130, 246, 0.15);
}

.welcome-choice:active {
    transform: translateY(-2px);
}

.welcome-choice__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    height: 80px;
    margin-bottom: 1rem;
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-secondary)
    );
    border-radius: 50%;
    color: white;
}

.welcome-choice__title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

/* Dark mode - texte clair */
:root[data-theme="dark"] .welcome-choice__title {
    color: var(--color-text-light);
}

.welcome-choice__desc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Dark mode - texte clair */
:root[data-theme="dark"] .welcome-choice__desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Form styles pour modal input */
.form-group {
    margin-bottom: 1.5rem;
}

.form-label {
    display: block;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
}

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

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

.form-hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.modal__actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-choices {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .welcome-choice {
        padding: 1.5rem 1rem;
    }

    .welcome-choice__icon {
        width: 64px;
        height: 64px;
    }

    .modal__actions {
        flex-direction: column;
    }

    .modal__actions .btn {
        width: 100%;
    }
}

/* ===================================
      INTRO SECTION (génération de boutique)
      =================================== */
.intro-section {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.05) 0%,
        rgba(99, 102, 241, 0.05) 100%
    );
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(99, 102, 241, 0.08) 100%
    );
}

.intro-section__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.intro-section__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section__title {
    color: var(--color-text-light);
}

.intro-section__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.intro-section__description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem auto;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section__description {
    color: rgba(255, 255, 255, 0.8);
}

.intro-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.intro-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: all 0.3s ease;
}

.intro-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
    border-color: var(--color-primary);
}

.intro-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-secondary)
    );
    border-radius: 50%;
    color: white;
}

.intro-step__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-step__title {
    color: var(--color-text-light);
}

.intro-step__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-step__desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 968px) {
    .intro-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .intro-section {
        padding: 1.5rem;
    }

    .intro-section__title {
        font-size: 1.5rem;
    }

    .intro-section__subtitle {
        font-size: 1rem;
    }

    .intro-section__description {
        font-size: 0.9375rem;
    }
}

/* ===================================
      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;
}

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

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

.form-hint {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.modal__actions {
    display: flex;
    gap: 1rem;
    justify-content: flex-end;
    margin-top: 2rem;
}

/* Responsive */
@media (max-width: 768px) {
    .welcome-choices {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .welcome-choice {
        padding: 1.5rem 1rem;
    }

    .welcome-choice__icon {
        width: 64px;
        height: 64px;
    }

    .modal__actions {
        flex-direction: column;
    }

    .modal__actions .btn {
        width: 100%;
    }
}

/* ===================================
         INTRO SECTION (génération de boutique)
         =================================== */
.intro-section {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.05) 0%,
        rgba(99, 102, 241, 0.05) 100%
    );
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-xl);
    padding: 2rem;
    margin-bottom: 2rem;
    transition: all 0.3s ease;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section {
    background: linear-gradient(
        135deg,
        rgba(59, 130, 246, 0.08) 0%,
        rgba(99, 102, 241, 0.08) 100%
    );
}

.intro-section__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.intro-section__title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section__title {
    color: var(--color-text-light);
}

.intro-section__subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section__subtitle {
    color: rgba(255, 255, 255, 0.7);
}

.intro-section__description {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text-secondary);
    text-align: center;
    max-width: 900px;
    margin: 0 auto 2rem auto;
}

/* Dark mode */
:root[data-theme="dark"] .intro-section__description {
    color: rgba(255, 255, 255, 0.8);
}

.intro-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2rem;
}

.intro-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    background: var(--card-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-lg);
    transition: all 0.3s ease;
}

.intro-step:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
    border-color: var(--color-primary);
}

.intro-step__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 1rem;
    background: linear-gradient(
        135deg,
        var(--color-primary),
        var(--color-secondary)
    );
    border-radius: 50%;
    color: white;
}

.intro-step__title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 0.5rem 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-step__title {
    color: var(--color-text-light);
}

.intro-step__desc {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Dark mode */
:root[data-theme="dark"] .intro-step__desc {
    color: rgba(255, 255, 255, 0.7);
}

/* Responsive */
@media (max-width: 968px) {
    .intro-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .intro-section {
        padding: 1.5rem;
    }

    .intro-section__title {
        font-size: 1.5rem;
    }

    .intro-section__subtitle {
        font-size: 1rem;
    }

    .intro-section__description {
        font-size: 0.9375rem;
    }
}

/* ===================================
         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(--card-bg);
    padding: 32px;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.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: var(--color-bg-secondary);
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.contact-info__title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.contact-info__text {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-muted);
    line-height: 1.6;
    transition: color 0.3s ease;
}

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

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

.alert {
    padding: 16px;
    margin: 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;
    color: var(--card-text);
    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-collaborator {
    background-color: #7c3aed;
}

.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);
}

.btn-warning {
    background-color: #f59e0b;
    color: white;
    border: none;
    text-decoration: none;
}

.btn-warning: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 */
}

.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;
}

/* ===================================
         DATA TABLE - DARK MODE COMPATIBLE
         =================================== */
.data-table {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--card-bg);
    color: var(--card-text);
    border-radius: var(--border-radius-md);
    overflow: hidden;
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

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

.data-table thead th {
    padding: 12px 16px;
    text-align: left;
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--card-text);
    border-bottom: 2px solid var(--table-border);
    transition:
        color 0.3s ease,
        border-color 0.3s ease;
}

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

.data-table tbody tr:last-child {
    border-bottom: none;
}

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

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

.data-table tbody td strong {
    font-weight: var(--font-weight-medium);
    color: var(--card-text);
    transition: color 0.3s ease;
}

.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-warning {
    background-color: #f59e0b;
    color: white;
    border: none;
    text-decoration: none;
}

.btn-warning: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);
}

/* PDF Download Button (floating) */
.pdf-download-button {
    position: fixed;
    bottom: 24px;
    right: 100px; /* À gauche du chatbot */
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: white;
    padding: 16px 24px;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 999;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}

.pdf-download-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.5);
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.pdf-download-button svg {
    flex-shrink: 0;
}

.pdf-download-button__text {
    white-space: nowrap;
}

@media (max-width: 768px) {
    .pdf-download-button {
        right: 16px;
        bottom: 100px; /* Au-dessus du chatbot sur mobile */
        padding: 12px 16px;
        font-size: 13px;
    }

    .pdf-download-button__text {
        display: none; /* Cacher le texte sur mobile */
    }

    .pdf-download-button {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        padding: 0;
        justify-content: center;
    }
}

.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-ocs-modal .modal__content {
    max-width: 520px;
}

.top-niches-ocs-modal__lead {
    margin-bottom: 1rem;
    text-align: left;
}

.top-niches-ocs-modal__body {
    text-align: left;
    margin-bottom: 0.5rem;
}

.top-niches-ocs-modal__body p {
    margin: 0 0 1rem 0;
    font-size: 0.9375rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.top-niches-ocs-modal__body p:last-child {
    margin-bottom: 0;
}

.top-niches-ocs-modal__actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem;
}

.top-niches-ocs-modal__actions .btn {
    justify-content: center;
}

@media (min-width: 480px) {
    .top-niches-ocs-modal__actions {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .top-niches-ocs-modal__actions .btn {
        flex: 1 1 auto;
        min-width: 200px;
    }
}

.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);
}

/* Branding Section */
.branding-identity {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.branding-logo-container {
    background: #ffffff;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 16px;
    width: 100%;
    display: flex;
    justify-content: center;
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

[data-theme="dark"] .branding-logo-container {
    background: #1f2937;
}

.branding-logo {
    max-height: 80px;
    max-width: 100%;
    object-fit: contain;
}

/* Styles pour SVG inline dans le logo */
.branding-logo-container svg {
    max-height: 80px;
    max-width: 200px;
    width: auto;
    height: auto;
    fill: currentColor;
    color: var(--card-text);
    transition: color 0.3s ease;
}

[data-theme="dark"] .branding-logo-container svg {
    color: #ffffff;
}

.branding-brand-name {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.branding-vibe-badge {
    font-size: 14px;
    padding: 6px 12px;
    background: linear-gradient(135deg, #667eea 0%, #4c51bf 100%);
    color: white;
    border-radius: 6px;
    font-weight: 500;
    transition: transform 0.2s ease;
}

[data-theme="dark"] .branding-vibe-badge {
    background: linear-gradient(135deg, #818cf8 0%, #6366f1 100%);
}

.branding-vibe-badge:hover {
    transform: scale(1.05);
}

.branding-colors-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: center;
}

.branding-color-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80px;
}

.branding-color-swatch {
    width: 70px;
    height: 70px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    margin-bottom: 8px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease;
    cursor: pointer;
}

[data-theme="dark"] .branding-color-swatch {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
}

.branding-color-swatch:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

.branding-color-label {
    font-size: 12px;
    color: var(--color-text-muted);
    font-family: monospace;
    background: var(--color-bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.branding-fonts-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.branding-font-item {
    display: flex;
    align-items: center;
    padding: 12px;
    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;
}

.branding-font-icon {
    font-size: 28px;
    font-weight: 700;
    margin-right: 16px;
    width: 50px;
    text-align: center;
    color: var(--card-text);
    line-height: 1;
    transition: color 0.3s ease;
}

.branding-font-details {
    flex: 1;
}

.branding-font-name {
    font-weight: 700;
    font-size: 16px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.branding-font-type {
    font-size: 13px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.branding-raw-data-summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-text-muted);
    padding: 12px;
    font-size: 13px;
    transition: color 0.3s ease;
}

.branding-raw-data-pre {
    background: var(--color-bg-secondary);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
    font-size: 12px;
    max-height: 300px;
    overflow-y: auto;
    color: var(--card-text);
    margin-top: 12px;
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease;
}

.branding-section-title {
    margin-bottom: 16px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.branding-admin-details {
    margin-top: 20px;
}

.branding-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--spacing-md);
}

.branding-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
}

/* 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);
    }
}

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

.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;
}

/* =====================================================
         EMPTY SEARCH STATE (No Results)
         ===================================================== */
.empty-search-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.empty-search-state > svg {
    display: block;
    margin: 0 auto 16px;
}

.empty-search-state p {
    color: var(--card-text);
    transition: color 0.3s ease;
}

.empty-search-state .btn {
    margin-top: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.empty-search-state .btn svg {
    flex-shrink: 0;
    display: block;
}

/* =====================================================
         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;
}

.test-route-badge--warning {
    background: #fef3c7;
    color: #92400e;
}

[data-theme="dark"] .test-route-badge--warning {
    background: rgba(245, 158, 11, 0.2);
    color: #fbbf24;
}

.test-route-badge--danger {
    background: #fee2e2;
    color: #991b1b;
}

[data-theme="dark"] .test-route-badge--danger {
    background: rgba(239, 68, 68, 0.2);
    color: #f87171;
}

.test-route-card__description {
    font-size: 14px;
    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);
}

.test-route-btn--danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.test-route-btn--danger:hover {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.4);
}

.test-route-btn svg {
    margin-left: 4px;
}

.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);
}

.quota-info-card--compact {
    padding: 16px;
    margin-bottom: 0;
    min-width: 280px;
}

.quota-info-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.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;
}

.quota-stat__value--large {
    font-size: 32px;
}

/* Grille Quota + Shopify */
.quota-shopify-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
    margin-bottom: 24px;
}

.quota-shopify-grid--quota-only {
    grid-template-columns: 1fr;
    max-width: 480px;
}

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

/* Mes boutiques (/my-shops) — thème clair / sombre */
.my-shops-page {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
}

.my-shops-top-bar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.my-shops-shopify-wrap {
    width: 100%;
    margin: 0 auto;
    padding-bottom: 24px;
}

.my-shops-shopify-card {
    grid-column: 1;
    width: 100%;
    min-width: 0;
    margin-bottom: 0;
}

.my-shops-shopify-panel {
    width: 100%;
    border: 1px solid var(--card-border);
    border-radius: 20px;
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.my-shops-shopify-panel__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 24px 24px 18px;
    border-bottom: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.my-shops-shopify-panel__title-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.my-shops-shopify-panel__title {
    margin: 0;
    font-size: 22px;
    font-weight: 800;
    color: var(--card-text);
    line-height: 1.2;
    transition: color 0.3s ease;
}

.my-shops-shopify-panel__subtitle {
    margin: 0;
    max-width: 820px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.my-shops-shopify-panel__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.my-shops-shopify-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
}

.my-shops-shopify-stat {
    padding: 18px;
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background: var(--color-bg-secondary);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.my-shops-shopify-stat__label {
    display: block;
    margin-bottom: 10px;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.my-shops-shopify-stat__value {
    display: block;
    font-size: 26px;
    font-weight: 800;
    line-height: 1;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.my-shops-shopify-stat__hint {
    display: block;
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.my-shops-shopify-connections {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
}

.my-shops-shopify-connection-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 16px;
    background: var(--color-bg-secondary);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.my-shops-shopify-connection-card__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.my-shops-shopify-connection-card__domain-wrap {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.my-shops-shopify-connection-card__label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.my-shops-shopify-connection-card__domain {
    font-size: 18px;
    font-weight: 800;
    color: var(--card-text);
    line-height: 1.2;
    word-break: break-word;
    transition: color 0.3s ease;
}

.my-shops-shopify-connection-card__meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.my-shops-shopify-connection-card__chip {
    display: inline-flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--dropdown-hover);
    color: var(--card-text);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.my-shops-shopify-connection-card__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.my-shops-shopify-main-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.my-shops-shopify-disconnect-form {
    margin-top: 1rem;
}

.my-shops-shopify-hint {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    transition: color 0.3s ease;
}

.my-shops-shopify-connect-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.75rem;
    align-items: stretch;
}

.my-shops-shopify-help-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    transition:
        color 0.2s ease,
        text-decoration 0.2s ease;
}

.my-shops-shopify-help-link:hover {
    text-decoration: underline;
    color: var(--color-primary);
}

.my-shops-table-wrap {
    border: 1px solid var(--card-border);
    border-radius: 20px;
    background: var(--card-bg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease;
}

.my-shops-table-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    padding: 22px 24px 12px;
    border-bottom: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.my-shops-section-title {
    margin: 0;
    font-size: 28px;
    font-weight: 800;
    color: var(--card-text);
    line-height: 1.1;
    transition: color 0.3s ease;
}

.my-shops-section-subtitle {
    margin: 8px 0 0 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.my-shops-link-cell {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-width: 200px;
}

.my-shops-link-cell__status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.my-shops-link-cell__dot {
    width: 10px;
    height: 10px;
    border-radius: 999px;
    flex: 0 0 auto;
}

.my-shops-link-cell__dot--success {
    background: var(--color-success);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-success) 22%, transparent);
}

.my-shops-link-cell__dot--muted {
    background: var(--color-border);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-border) 35%, transparent);
}

.my-shops-link-cell__title {
    font-size: 14px;
    font-weight: 800;
    color: var(--card-text);
    line-height: 1.2;
    transition: color 0.3s ease;
}

.my-shops-link-cell__hint {
    font-size: 12px;
    line-height: 1.5;
    color: var(--color-text-light);
    transition: color 0.3s ease;
}

.my-shops-link-cell__badges {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.my-shops-link-cell__legacy {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--badge-bg-warning);
    color: var(--badge-text-warning);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.my-shops-link-cell__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.my-shops-modal-shop-name {
    color: var(--color-primary);
    font-weight: 700;
}

.my-shops-modal-select {
    width: 100%;
    min-height: 46px;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    padding: 0 14px;
    font-size: 14px;
    color: var(--input-text);
    background: var(--input-bg);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.my-shops-modal-select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 22%, transparent);
}

.my-shops-empty-cta {
    margin-top: 16px;
}

@media (max-width: 992px) {
    .my-shops-shopify-stats {
        grid-template-columns: 1fr;
    }

    .my-shops-shopify-panel__header {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (max-width: 768px) {
    .my-shops-top-bar {
        justify-content: stretch;
    }

    .my-shops-top-bar .btn {
        width: 100%;
        justify-content: center;
    }

    .my-shops-shopify-panel__header,
    .my-shops-shopify-panel__body,
    .my-shops-table-head {
        padding-left: 16px;
        padding-right: 16px;
    }

    .my-shops-shopify-main-actions,
    .my-shops-shopify-connection-card__actions {
        flex-direction: column;
    }

    .my-shops-shopify-main-actions .btn,
    .my-shops-shopify-connection-card__actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.shopify-connect-modal__footer {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.shopify-connect-modal__affiliate-link {
    color: var(--color-primary);
    text-decoration: none;
    transition:
        color 0.2s ease,
        text-decoration 0.2s ease;
}

.shopify-connect-modal__affiliate-link:hover {
    text-decoration: underline;
}

/* Génération de boutique : section choix niche / exploration (remplace l’ancienne modal) */
.one-click-shop-start {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-xl);
    padding: 1.75rem;
    margin-bottom: 1.5rem;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.one-click-shop-start__header {
    text-align: center;
    margin-bottom: 1.5rem;
}

.one-click-shop-start__title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--card-text);
    margin: 0 0 0.5rem 0;
}

.one-click-shop-start__subtitle {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.one-click-shop-start__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    align-items: stretch;
}

.one-click-shop-start__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: var(--border-radius-lg);
    border: 1px solid var(--card-border);
    background: var(--color-bg-secondary);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.one-click-shop-start__panel--hint {
    justify-content: flex-start;
}

.one-click-shop-start__panel-head {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.one-click-shop-start__panel-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%
    );
    color: #fff;
}

.one-click-shop-start__panel-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--card-text);
    margin: 0 0 0.25rem 0;
}

.one-click-shop-start__panel-desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.one-click-shop-start .one-click-shop-start__alert.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    text-align: left;
}

.one-click-shop-start__alert-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.one-click-shop-start__alert-text {
    margin: 0.25rem 0 0 0;
    font-size: 0.875rem;
    line-height: 1.45;
}

.one-click-shop-start__form {
    margin: 0;
}

.one-click-shop-start__form-group {
    margin-bottom: 0;
}

.one-click-shop-start__form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
}

.one-click-shop-start__hint-text {
    margin: 0;
    font-size: 0.9375rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    flex: 1;
}

.one-click-shop-start__scroll-link {
    align-self: flex-start;
    margin-top: auto;
}

.one-click-shop-start__choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.25rem;
    margin-top: 0.5rem;
}

.one-click-shop-start__choice-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.75rem 1.25rem;
    text-decoration: none;
    color: inherit;
    background: var(--color-bg-secondary);
    border: 2px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.2s ease;
}

.one-click-shop-start__choice-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 8px 24px rgba(59, 130, 246, 0.12);
    transform: translateY(-2px);
}

.one-click-shop-start__choice-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: 1rem;
    border-radius: 50%;
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%
    );
    color: #fff;
}

.one-click-shop-start__choice-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--card-text);
    margin: 0 0 0.5rem 0;
}

.one-click-shop-start__choice-desc {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.one-click-shop-start__catalog-hint {
    margin: 1.25rem 0 0 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-text-muted);
}

.one-click-shop-start__catalog-hint-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.one-click-shop-start__catalog-hint-link:hover {
    text-decoration: none;
}

.one-click-shop-start__keyword-flow {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 520px;
    margin: 0 auto;
}

.one-click-shop-start__back {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
    align-self: flex-start;
}

.one-click-shop-start__back:hover {
    text-decoration: underline;
}

.one-click-shop-start__pending {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    max-width: 640px;
    margin: 0 auto;
}

.one-click-shop-start .one-click-shop-start__pending-alert.alert {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin: 0;
    text-align: left;
}

.one-click-shop-start__pending-text {
    margin: 0.35rem 0 0 0;
    font-size: 0.875rem;
    line-height: 1.5;
}

.one-click-shop-start__pending-actions {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    align-items: stretch;
}

.one-click-shop-start__pending-form {
    margin: 0;
}

.one-click-shop-start__modify-keyword {
    align-self: center;
}

.one-click-shop-browse-nav {
    margin-bottom: 1rem;
}

.one-click-shop-browse-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    text-decoration: none;
}

.one-click-shop-browse-nav__link:hover {
    text-decoration: underline;
}

   /* Génération de thème : wizard + cartes (page /one-click-shop) — occupe toute la zone utile */
   .products-page.products-page--one-click-theme {
       flex: 1 1 auto;
       width: 100%;
       max-width: none;
       min-width: 0;
       margin-bottom: 0;
       padding: var(--spacing-xl);
       min-height: min(100%, calc(100dvh - var(--header-height) - 3rem));
       background-color: var(--color-bg-secondary);
       border-radius: var(--border-radius-lg);
       display: flex;
       flex-direction: column;
       gap: var(--spacing-lg);
       transition: background-color 0.3s ease;
   }

   [data-theme="dark"] .products-page.products-page--one-click-theme {
       background-color: var(--color-bg-light);
   }

   .ocs-theme-quota {
       margin-bottom: 0;
       width: 100%;
   }

   /* Quota page /one-click-shop : une ligne, pas de retour intempestif titre / période */
   .ocs-quota-strip {
       width: 100%;
   }

   .ocs-quota-strip__inner {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       justify-content: space-between;
       gap: var(--spacing-lg);
       width: 100%;
       box-sizing: border-box;
       padding: var(--spacing-md) var(--spacing-lg);
       background-color: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--border-radius-lg);
       box-shadow: var(--shadow-sm);
       transition:
           background-color 0.3s ease,
           border-color 0.3s ease,
           box-shadow 0.3s ease;
   }

   .ocs-quota-strip__left {
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       min-width: 0;
       flex: 1 1 auto;
   }

   .ocs-quota-strip__icon-wrap {
       flex-shrink: 0;
       width: 2.75rem;
       height: 2.75rem;
       border-radius: var(--border-radius-md);
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: var(--color-blue-light);
       color: var(--color-primary);
       transition: background-color 0.3s ease, color 0.3s ease;
   }

   [data-theme="dark"] .ocs-quota-strip__icon-wrap {
       background-color: rgba(37, 99, 235, 0.22);
   }

   .ocs-quota-strip__icon {
       flex-shrink: 0;
   }

   .ocs-quota-strip__heading {
       display: flex;
       flex-wrap: nowrap;
       align-items: baseline;
       gap: 0.35rem;
       min-width: 0;
   }

   .ocs-quota-strip__title {
       margin: 0;
       font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
       white-space: nowrap;
       transition: color 0.3s ease;
   }

   .ocs-quota-strip__sep {
       color: var(--color-text-muted);
       font-weight: var(--font-weight-bold);
       flex-shrink: 0;
       transition: color 0.3s ease;
   }

   .ocs-quota-strip__period {
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
       color: var(--color-text-light);
       white-space: nowrap;
       flex-shrink: 0;
       transition: color 0.3s ease;
   }

   .ocs-quota-strip__right {
       display: flex;
       flex-wrap: nowrap;
       align-items: center;
       gap: var(--spacing-md);
       flex-shrink: 0;
   }

   .ocs-quota-strip__plan {
       font-size: var(--font-size-xs);
       font-weight: var(--font-weight-bold);
       text-transform: uppercase;
       letter-spacing: 0.04em;
       color: var(--color-text-muted);
       padding: 0.2rem 0.55rem;
       border-radius: var(--border-radius-sm);
       background-color: var(--color-bg-secondary);
       border: 1px solid var(--card-border);
       white-space: nowrap;
       max-width: 12rem;
       overflow: hidden;
       text-overflow: ellipsis;
       transition:
           background-color 0.3s ease,
           border-color 0.3s ease,
           color 0.3s ease;
   }

   .ocs-quota-strip__value {
       font-size: var(--font-size-lg);
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
       font-variant-numeric: tabular-nums;
       white-space: nowrap;
       transition: color 0.3s ease;
   }

   .ocs-quota-strip__slash {
       margin: 0 0.1em;
       font-weight: var(--font-weight-medium);
       color: var(--color-text-muted);
   }

   .ocs-quota-strip__infinity {
       color: var(--color-success);
       font-weight: var(--font-weight-bold);
   }

   @media (max-width: 640px) {
       .ocs-quota-strip__inner {
           flex-wrap: wrap;
           align-items: flex-start;
       }

       .ocs-quota-strip__right {
           width: 100%;
           justify-content: flex-start;
           padding-left: calc(2.75rem + var(--spacing-md));
       }

       .ocs-quota-strip__heading {
           flex-wrap: wrap;
       }

       .ocs-quota-strip__title {
           white-space: normal;
       }
   }

   .ocs-theme-wizard-page {
       flex: 1 1 auto;
       width: 100%;
       min-width: 0;
       min-height: 0;
       margin: 0;
       padding: 0;
       display: flex;
       flex-direction: column;
   }

   /* Modale « dry » : recherche niche au submit / Entrée sur /one-click-shop */
   .ocs-keyword-search-loading-modal .modal__backdrop {
       background: rgba(15, 23, 42, 0.35);
       backdrop-filter: blur(4px);
   }

   .ocs-keyword-search-loading-modal__box {
       text-align: center;
       padding: 1.75rem 1.5rem 1.6rem;
       border-radius: 14px;
       border: 1px solid rgba(148, 163, 184, 0.22);
       box-shadow: 0 12px 40px rgba(15, 23, 42, 0.08);
       max-width: 22rem;
   }

   .ocs-keyword-search-loading-modal__spinner-wrap {
       display: flex;
       justify-content: center;
       margin-bottom: 1rem;
   }

   .ocs-keyword-search-loading-modal__spinner {
       width: 28px;
       height: 28px;
       border-width: 2.5px;
   }

   .ocs-keyword-search-loading-modal__title {
       margin: 0 0 0.65rem;
       font-size: 1.05rem;
       font-weight: 600;
       letter-spacing: 0.01em;
       color: var(--color-text, #0f172a);
       line-height: 1.35;
   }

   .ocs-keyword-search-loading-modal__lead {
       margin: 0;
       font-size: 0.875rem;
       line-height: 1.55;
       color: var(--color-text-light, #64748b);
   }

   .ocs-keyword-search-loading-modal__kw {
       margin: 0.85rem 0 0;
       font-size: 0.8125rem;
       font-weight: 500;
       color: var(--color-text-muted, #475569);
       font-style: italic;
   }

   [data-theme="dark"] .ocs-keyword-search-loading-modal__box {
       border-color: rgba(148, 163, 184, 0.18);
       box-shadow: 0 12px 40px rgba(0, 0, 0, 0.35);
   }

   [data-theme="dark"] .ocs-keyword-search-loading-modal .modal__backdrop {
       background: rgba(2, 6, 23, 0.55);
   }

   /* One-click-shop : notice essai / freemium */
   .ocs-theme-trial-notice {
       display: flex;
       align-items: flex-start;
       gap: 0.65rem;
       margin-bottom: var(--spacing-md, 1rem);
       padding: 0.65rem 0.85rem;
       border-radius: var(--border-radius-md, 10px);
       border: 1px solid color-mix(in srgb, #ea580c 35%, transparent);
       background: color-mix(in srgb, #fff7ed 92%, transparent);
       color: #9a3412;
   }

   [data-theme="dark"] .ocs-theme-trial-notice {
       border-color: color-mix(in srgb, #fb923c 40%, transparent);
       background: color-mix(in srgb, #431407 55%, #0f172a);
       color: #fdba74;
   }

   .ocs-theme-trial-notice__icon {
       flex-shrink: 0;
       margin-top: 0.1rem;
       color: #ea580c;
   }

   [data-theme="dark"] .ocs-theme-trial-notice__icon {
       color: #fb923c;
   }

   .ocs-theme-trial-notice__text {
       margin: 0;
       font-size: 0.875rem;
       line-height: 1.45;
   }

   .ocs-theme-trial-notice__text strong {
       font-weight: 600;
   }

   /* Stepper seul au-dessus de la page personnalisation (split preview) */
   .ocs-customize-stepper-wrap.products-page.products-page--one-click-theme {
       flex: 0 0 auto;
       min-height: 0;
       gap: 0;
       padding-bottom: var(--spacing-md);
       margin-bottom: 0;
   }

   .ocs-visually-hidden {
       position: absolute;
       width: 1px;
       height: 1px;
       padding: 0;
       margin: -1px;
       overflow: hidden;
       clip: rect(0, 0, 0, 0);
       white-space: nowrap;
       border: 0;
   }

   .ocs-theme-stepper {
       margin-bottom: var(--spacing-xl);
       width: 100%;
   }

   .ocs-theme-stepper__list {
       list-style: none;
       display: flex;
       flex-wrap: nowrap;
       align-items: flex-start;
       justify-content: space-between;
       gap: var(--spacing-sm);
       width: 100%;
   }

   .ocs-theme-stepper__step {
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       min-width: 0;
       flex: 0 1 auto;
   }

   .ocs-theme-stepper__step-link {
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       min-width: 0;
       flex: 1 1 auto;
       color: inherit;
       text-decoration: none;
       border-radius: var(--border-radius-md);
       outline-offset: 2px;
   }

   .ocs-theme-stepper__step-link:hover .ocs-theme-stepper__circle {
       border-color: var(--color-primary);
       color: var(--color-primary);
   }

   .ocs-theme-stepper__step-link:hover .ocs-theme-stepper__label {
       color: var(--color-primary);
   }

   .ocs-theme-stepper__step-link:hover .ocs-theme-stepper__hint {
       color: var(--color-text-light);
   }

   .ocs-theme-stepper__step-link:focus-visible {
       outline: 2px solid var(--color-primary);
   }

   .ocs-theme-stepper__circle {
       position: relative;
       flex-shrink: 0;
       width: 2.25rem;
       height: 2.25rem;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-bold);
       border: 2px solid var(--color-border);
       color: var(--color-text-muted);
       background-color: var(--card-bg);
       transition:
           background-color 0.3s ease,
           border-color 0.3s ease,
           color 0.3s ease;
   }

   .ocs-theme-stepper__step--active .ocs-theme-stepper__circle {
       background-color: var(--color-primary);
       border-color: var(--color-primary);
       color: var(--color-white);
   }

   .ocs-theme-stepper__step-static {
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       min-width: 0;
       flex: 1 1 auto;
   }

   .ocs-theme-stepper__circle-num {
       line-height: 1;
   }

   .ocs-theme-stepper__step--completed .ocs-theme-stepper__circle {
       background-color: var(--color-success, #10b981);
       border-color: var(--color-success, #10b981);
       color: var(--color-white);
   }

   .ocs-theme-stepper__step--completed .ocs-theme-stepper__circle-check {
       display: block;
   }

   .ocs-theme-stepper__step--completed .ocs-theme-stepper__step-link:hover .ocs-theme-stepper__circle {
       background-color: var(--color-success, #10b981);
       border-color: var(--color-success, #10b981);
       color: var(--color-white);
   }

   .ocs-theme-stepper__connector--completed {
       border-top-color: rgba(16, 185, 129, 0.45);
   }

   /* Page « Terminez la configuration » (après publication Shopify) */
   .ocs-publish-setup-page {
       max-width: 52rem;
       margin: 0 auto;
       padding-bottom: var(--spacing-xl);
   }

   .ocs-publish-setup-page .ocs-theme-stepper {
       margin-bottom: var(--spacing-lg);
   }

   .ocs-publish-setup__card {
       background: var(--card-bg, #fff);
       border: 1px solid var(--card-border, #e5e7eb);
       border-radius: 16px;
       padding: var(--spacing-xl);
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
   }

   .ocs-publish-setup__hero {
       display: flex;
       flex-direction: column;
       align-items: center;
       text-align: center;
       margin-bottom: var(--spacing-lg);
   }

   .ocs-publish-setup__hero-icon {
       width: 3rem;
       height: 3rem;
       border-radius: 50%;
       background: var(--color-primary);
       color: var(--color-white);
       display: flex;
       align-items: center;
       justify-content: center;
       margin-bottom: var(--spacing-md);
   }

   .ocs-publish-setup__title {
       margin: 0;
       font-size: 1.375rem;
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
   }

   .ocs-publish-setup__subtitle {
       margin: 0.5rem 0 0;
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
       max-width: 28rem;
   }

   .ocs-publish-setup__panel {
       border: 1px solid var(--color-border);
       border-radius: 12px;
       padding: var(--spacing-lg);
       background: var(--color-bg-secondary, #f9fafb);
   }

   .ocs-publish-setup__panel-head {
       display: flex;
       align-items: center;
       gap: 0.5rem;
       margin: 0 0 var(--spacing-md);
       font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
   }

   .ocs-publish-setup__panel-head svg {
       color: var(--color-primary);
       flex-shrink: 0;
   }

   /* Variante avec une pastille check ronde (page Oui/Non du publish-setup) :
      l'icône SVG est encapsulée dans une span ronde pleine couleur primaire,
      cohérente visuellement avec `.ocs-publish-setup__hero-icon` mais en plus
      petit format inline pour le titre du panneau. */
   .ocs-publish-setup__panel-head-icon {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       width: 1.5rem;
       height: 1.5rem;
       border-radius: 50%;
       background: var(--color-primary);
       color: var(--color-white);
       flex-shrink: 0;
   }

   /* Quand on utilise la pastille, on ne veut PAS l'override `color: var(--color-primary)`
      du selector générique `.ocs-publish-setup__panel-head svg` sur le SVG interne
      (qui rendrait le check bleu sur fond bleu = invisible). */
   .ocs-publish-setup__panel-head-icon svg {
       color: inherit;
   }

   .ocs-publish-setup__choices {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: var(--spacing-md);
   }

   @media (max-width: 640px) {
       .ocs-publish-setup__choices {
           grid-template-columns: 1fr;
       }
   }

   .ocs-publish-setup__choice {
       display: block;
       text-align: center;
       padding: var(--spacing-lg);
       border-radius: 12px;
       border: 2px solid var(--color-border);
       background: var(--card-bg);
       text-decoration: none;
       color: inherit;
       transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease;
       cursor: pointer;
   }

   .ocs-publish-setup__choice:hover {
       border-color: var(--color-primary);
       box-shadow: 0 4px 14px rgba(0, 82, 255, 0.12);
   }

   .ocs-publish-setup__choice:focus-visible {
       outline: 2px solid var(--color-primary);
       outline-offset: 2px;
   }

   .ocs-publish-setup__choice-icon {
       width: 3rem;
       height: 3rem;
       margin: 0 auto var(--spacing-sm);
       border-radius: 50%;
       background: rgba(0, 82, 255, 0.08);
       color: var(--color-primary);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .ocs-publish-setup__choice-title {
       display: block;
       font-weight: var(--font-weight-bold);
       font-size: 1.125rem;
       margin-bottom: 0.35rem;
   }

   .ocs-publish-setup__choice-desc {
       margin: 0;
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
       line-height: 1.4;
   }

   .ocs-publish-setup__footer {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: var(--spacing-md);
       margin-top: var(--spacing-xl);
       flex-wrap: wrap;
   }

   .ocs-publish-setup__dots {
       display: flex;
       gap: 0.5rem;
       align-items: center;
   }

   .ocs-publish-setup__dot {
       width: 8px;
       height: 8px;
       border-radius: 50%;
       background: var(--color-border);
   }

   .ocs-publish-setup__dot--active {
       background: var(--color-primary);
       transform: scale(1.15);
   }

   .ocs-publish-setup__back-link {
       display: inline-flex;
       align-items: center;
       gap: 0.35rem;
       margin-bottom: var(--spacing-md);
       font-size: var(--font-size-sm);
       color: var(--color-primary);
       text-decoration: none;
       font-weight: var(--font-weight-medium);
   }

   .ocs-publish-setup__back-link:hover {
       text-decoration: underline;
   }

   .ocs-publish-setup__flash {
       margin-bottom: var(--spacing-md);
   }

   .ocs-publish-setup__hero--select {
       margin-bottom: var(--spacing-xl);
   }

   .ocs-publish-setup__subtitle--wide {
       max-width: 36rem;
   }

   .ocs-publish-setup__after-non-hint {
       margin: var(--spacing-lg) 0 0;
       padding: var(--spacing-md);
       font-size: var(--font-size-xs);
       line-height: 1.5;
       color: var(--color-text-muted);
       background: var(--card-bg);
       border-radius: 10px;
       border: 1px dashed var(--color-border);
   }

   .ocs-publish-setup__layout-cols {
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: var(--spacing-xl);
       align-items: flex-start;
   }

   @media (max-width: 900px) {
       .ocs-publish-setup__layout-cols {
           grid-template-columns: 1fr;
       }
   }

   .ocs-publish-setup__col-title {
       margin: 0 0 var(--spacing-md);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
   }

   .ocs-publish-setup__empty {
       margin: 0 0 var(--spacing-md);
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
       line-height: 1.45;
   }

   .ocs-publish-setup__store-list {
       list-style: none;
       margin: 0 0 var(--spacing-md);
       padding: 0;
       display: flex;
       flex-direction: column;
       gap: var(--spacing-sm);
   }

   .ocs-publish-setup__store-form {
       margin: 0;
   }

   .ocs-publish-setup__store-card {
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       width: 100%;
       text-align: left;
       padding: var(--spacing-md) var(--spacing-lg);
       border-radius: 12px;
       border: 1px solid var(--color-border);
       background: var(--card-bg);
       cursor: pointer;
       transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease;
       font: inherit;
       color: inherit;
   }

   .ocs-publish-setup__store-card:hover {
       border-color: var(--color-primary);
       box-shadow: 0 4px 12px rgba(0, 82, 255, 0.08);
   }

   .ocs-publish-setup__store-card-icon {
       flex-shrink: 0;
       width: 2.75rem;
       height: 2.75rem;
       border-radius: 10px;
       background: rgba(0, 82, 255, 0.08);
       color: var(--color-primary);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .ocs-publish-setup__store-card-body {
       flex: 1 1 auto;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 0.2rem;
   }

   .ocs-publish-setup__store-card-name {
       font-weight: var(--font-weight-bold);
       font-size: var(--font-size-sm);
       color: var(--card-text);
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 0.35rem;
   }

   .ocs-publish-setup__store-card-host {
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
   }

   .ocs-publish-setup__store-card-chevron {
       flex-shrink: 0;
       color: var(--color-text-muted);
   }

   .ocs-publish-setup__badge-primary {
       display: inline-block;
       padding: 0.15rem 0.5rem;
       border-radius: 6px;
       font-size: 0.65rem;
       font-weight: var(--font-weight-bold);
       text-transform: uppercase;
       letter-spacing: 0.02em;
       background: rgba(0, 82, 255, 0.1);
       color: var(--color-primary);
   }

   /* Boutiques Shopify connectées — composant partagé (import + publish-setup) */
   .catalog-connected-shops-card {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-md);
   }

   .catalog-connected-shops-card__header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: var(--spacing-sm);
       font-size: var(--font-size-sm);
       color: var(--card-text);
   }

   .catalog-connected-shops-card__count {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       min-width: 1.5rem;
       height: 1.5rem;
       padding: 0 0.4rem;
       border-radius: 999px;
       font-size: var(--font-size-xs);
       font-weight: var(--font-weight-bold);
       background: rgba(0, 82, 255, 0.1);
       color: var(--color-primary);
   }

   .catalog-connected-shops-card__empty {
       margin: 0;
   }

   .catalog-connected-shops-list {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-sm);
   }

   .ocs-publish-setup__col .ocs-publish-setup__store-form {
       margin: 0;
       width: 100%;
   }

   .catalog-connected-shop-item {
       display: flex;
       align-items: center;
       gap: var(--spacing-md);
       width: 100%;
       text-align: left;
       padding: var(--spacing-md) var(--spacing-lg);
       border-radius: 12px;
       border: 1px solid var(--color-border);
       background: var(--card-bg);
       cursor: pointer;
       transition:
           border-color 0.2s ease,
           box-shadow 0.2s ease;
       font: inherit;
       color: inherit;
   }

   .catalog-connected-shop-item:hover {
       border-color: var(--color-primary);
       box-shadow: 0 4px 12px rgba(0, 82, 255, 0.08);
   }

   .catalog-connected-shop-item__brand {
       flex-shrink: 0;
       width: 2.75rem;
       height: 2.75rem;
       border-radius: 10px;
       background: #f6f8f7;
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .catalog-connected-shop-item__brand img {
       display: block;
   }

   .catalog-connected-shop-item__content {
       flex: 1 1 auto;
       min-width: 0;
       display: flex;
       flex-direction: column;
       gap: 0.2rem;
   }

   .catalog-connected-shop-item__row {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: 0.35rem;
       font-weight: var(--font-weight-bold);
       font-size: var(--font-size-sm);
       color: var(--card-text);
   }

   .catalog-connected-shop-item__content > span:last-child {
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
   }

   .catalog-connected-shop-item__badge {
       display: inline-block;
       padding: 0.15rem 0.5rem;
       border-radius: 6px;
       font-size: 0.65rem;
       font-weight: var(--font-weight-bold);
       text-transform: uppercase;
       letter-spacing: 0.02em;
       background: rgba(0, 82, 255, 0.1);
       color: var(--color-primary);
   }

   .catalog-connected-shop-item__arrow {
       flex-shrink: 0;
       color: var(--color-text-muted);
   }

   .catalog-connected-shops-card__connect-more {
       width: 100%;
       justify-content: center;
   }

   .ocs-publish-setup__manage-link {
       display: inline-flex;
       align-items: center;
       gap: 0.4rem;
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
       color: var(--color-primary);
       text-decoration: none;
   }

   .ocs-publish-setup__manage-link:hover {
       text-decoration: underline;
   }

   .ocs-publish-setup__col--new .ocs-publish-setup__col-title {
       margin-bottom: var(--spacing-sm);
   }

   .ocs-publish-setup__new-panel {
       margin-top: var(--spacing-sm);
       padding: var(--spacing-xl);
       border-radius: 14px;
       border: 1px solid rgba(16, 185, 129, 0.35);
       background: linear-gradient(180deg, rgba(16, 185, 129, 0.08) 0%, rgba(16, 185, 129, 0.02) 100%);
       text-align: center;
   }

   .ocs-publish-setup__new-panel-icon {
       position: relative;
       width: 4rem;
       height: 4rem;
       margin: 0 auto var(--spacing-md);
       border-radius: 50%;
       background: rgba(16, 185, 129, 0.15);
       color: var(--color-success, #059669);
       display: flex;
       align-items: center;
       justify-content: center;
   }

   .ocs-publish-setup__new-panel-plus {
       position: absolute;
       right: -2px;
       bottom: -2px;
       width: 1.35rem;
       height: 1.35rem;
       border-radius: 50%;
       background: var(--color-success, #10b981);
       color: var(--color-white);
       font-size: 1rem;
       font-weight: bold;
       line-height: 1.35rem;
       text-align: center;
       border: 2px solid var(--card-bg);
   }

   .ocs-publish-setup__new-panel-text {
       margin: 0 0 var(--spacing-lg);
       font-size: var(--font-size-sm);
       color: var(--color-text-muted);
       line-height: 1.45;
   }

   .ocs-publish-setup__new-connect-btn {
       justify-content: center;
   }

   .ocs-publish-setup__trust {
       display: flex;
       align-items: center;
       justify-content: center;
       gap: 0.4rem;
       margin: var(--spacing-md) 0 0;
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
   }

   .ocs-publish-setup__trust--manual {
       align-items: flex-start;
       justify-content: flex-start;
       text-align: left;
       line-height: 1.45;
       transition: color 0.3s ease;
   }

   .ocs-theme-stepper__text {
       display: flex;
       flex-direction: column;
       gap: 0.125rem;
       min-width: 0;
   }

   .ocs-theme-stepper__label {
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
       line-height: 1.2;
       transition: color 0.3s ease;
   }

   .ocs-theme-stepper__hint {
       font-size: var(--font-size-xs);
       color: var(--color-text-muted);
       line-height: 1.3;
       transition: color 0.3s ease;
   }

   .ocs-theme-stepper__step--active .ocs-theme-stepper__hint {
       color: var(--color-primary);
       font-weight: var(--font-weight-medium);
   }

   .ocs-theme-stepper__connector {
       flex: 1 1 2rem;
       min-width: 1rem;
       max-width: none;
       height: 0;
       margin-top: 1.125rem;
       border-top: 2px dashed var(--color-border);
       align-self: flex-start;
       transition: border-color 0.3s ease;
   }

   .ocs-theme-panel {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-lg);
       flex: 1 1 auto;
       width: 100%;
       min-height: 0;
   }

   .ocs-theme-panel__inner {
       width: 100%;
   }

   .ocs-theme-panel__inner--narrow {
       max-width: none;
       width: 100%;
       margin: 0;
   }

   .ocs-theme-panel__alert {
       text-align: left;
       align-items: flex-start;
   }

   .ocs-theme-panel__alert-icon {
       flex-shrink: 0;
       margin-top: 2px;
   }

   .ocs-theme-panel__alert-title {
       font-size: var(--font-size-lg);
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
       margin: 0 0 var(--spacing-sm);
   }

   .ocs-theme-panel__alert-text {
       margin: 0;
       font-size: var(--font-size-sm);
       line-height: 1.55;
       color: var(--color-text-light);
   }

   .ocs-theme-panel__actions {
       display: flex;
       flex-direction: column;
       gap: var(--spacing-md);
   }

   .ocs-theme-panel__form {
       margin: 0;
   }

   .ocs-theme-card {
       width: 100%;
       box-sizing: border-box;
       background-color: var(--card-bg);
       border: 1px solid var(--card-border);
       border-radius: var(--border-radius-xl);
       padding: clamp(var(--spacing-lg), 4vw, var(--spacing-2xl));
       box-shadow: var(--shadow-md);
       text-align: center;
       transition:
           background-color 0.3s ease,
           border-color 0.3s ease,
           box-shadow 0.3s ease;
   }

   .ocs-theme-card--secondary {
       text-align: left;
       padding: clamp(var(--spacing-lg), 3vw, var(--spacing-xl));
   }

   .ocs-theme-card__icon-wrap {
       width: 3.5rem;
       height: 3.5rem;
       margin: 0 auto var(--spacing-md);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: var(--color-blue-light);
       color: var(--color-primary);
       transition: background-color 0.3s ease, color 0.3s ease;
   }

   [data-theme="dark"] .ocs-theme-card__icon-wrap {
       background-color: rgba(37, 99, 235, 0.2);
   }

   .ocs-theme-card__icon {
       flex-shrink: 0;
   }

   .ocs-theme-card__title {
       font-size: clamp(var(--font-size-xl), 2.2vw, var(--font-size-2xl));
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
       margin: 0 0 var(--spacing-md);
       line-height: 1.3;
       transition: color 0.3s ease;
   }

   .ocs-theme-card__lead {
       font-size: clamp(var(--font-size-sm), 1.2vw, var(--font-size-base));
       color: var(--color-text-light);
       line-height: 1.6;
       margin: 0 0 var(--spacing-lg);
       max-width: none;
       width: 100%;
       transition: color 0.3s ease;
   }

   .ocs-theme-card__example {
       display: inline-flex;
       align-items: center;
       gap: var(--spacing-sm);
       margin: 0 auto var(--spacing-lg);
       padding: var(--spacing-xs) var(--spacing-md);
       border-radius: var(--border-radius-lg);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
       color: var(--badge-text-info);
       background-color: var(--badge-bg-info);
       transition: background-color 0.3s ease, color 0.3s ease;
   }

   .ocs-theme-card__example-icon {
       flex-shrink: 0;
   }

   .ocs-theme-back {
       display: inline-flex;
       align-items: center;
       gap: var(--spacing-sm);
       margin: 0 auto var(--spacing-md);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
       color: var(--color-primary);
       text-decoration: none;
       transition: color 0.2s ease;
   }

   .ocs-theme-back:hover {
       text-decoration: underline;
   }

   .ocs-theme-card__form {
       margin: 0;
       display: flex;
       flex-direction: column;
       gap: var(--spacing-md);
       text-align: left;
   }

   /* Champ + bouton étape niche : largeur contenu sur desktop, pleine largeur sur mobile */
   .ocs-theme-card__form.one-click-shop-keyword-check-form {
       max-width: min(28rem, 100%);
       width: 100%;
       margin-left: auto;
       margin-right: auto;
   }

   .ocs-theme-input-wrap {
       position: relative;
       display: flex;
       align-items: center;
   }

   .ocs-theme-input-wrap__icon {
       position: absolute;
       left: var(--spacing-md);
       color: var(--color-text-muted);
       pointer-events: none;
       transition: color 0.3s ease;
   }

   .ocs-theme-input.form-input {
       width: 100%;
       padding-left: 2.75rem;
       min-height: 3rem;
       border-radius: var(--border-radius-lg);
       font-size: var(--font-size-sm);
   }

   .ocs-theme-submit {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-md);
       min-height: 3rem;
       font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
       border-radius: var(--border-radius-lg);
   }

   .ocs-theme-submit__arrow {
       flex-shrink: 0;
   }

   .ocs-theme-card__row {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       gap: var(--spacing-lg);
       width: 100%;
   }

   .ocs-theme-card__trend-wrap {
       flex-shrink: 0;
       width: 3.25rem;
       height: 3.25rem;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       background-color: var(--color-blue-light);
       color: var(--color-primary);
       transition: background-color 0.3s ease, color 0.3s ease;
   }

   [data-theme="dark"] .ocs-theme-card__trend-wrap {
       background-color: rgba(37, 99, 235, 0.2);
   }

   .ocs-theme-card__trend-icon {
       flex-shrink: 0;
   }

   .ocs-theme-card__row-body {
       flex: 1 1 12rem;
       min-width: 0;
   }

   .ocs-theme-card__subtitle {
       font-size: var(--font-size-base);
       font-weight: var(--font-weight-bold);
       color: var(--card-text);
       margin: 0 0 var(--spacing-xs);
       transition: color 0.3s ease;
   }

   .ocs-theme-card__muted {
       margin: 0;
       font-size: var(--font-size-sm);
       color: var(--color-text-light);
       line-height: 1.5;
       transition: color 0.3s ease;
   }

   .ocs-theme-card__cta {
       flex-shrink: 0;
       display: inline-flex;
       align-items: center;
       gap: var(--spacing-sm);
       margin-left: auto;
   }

   .ocs-theme-catalog-link {
       margin: 0;
       text-align: center;
       font-size: var(--font-size-sm);
   }

   .ocs-theme-catalog-link__a {
       color: var(--color-primary);
       font-weight: var(--font-weight-medium);
       text-decoration: underline;
       text-underline-offset: 2px;
       transition: color 0.2s ease;
   }

   .ocs-theme-catalog-link__a:hover {
       text-decoration: none;
   }

   .ocs-theme-link {
       display: inline-flex;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
       color: var(--color-primary);
       text-decoration: none;
   }

   .ocs-theme-link:hover {
       text-decoration: underline;
   }

   .ocs-theme-link--center {
       align-self: center;
   }

   @media (max-width: 720px) {
       .products-page.products-page--one-click-theme {
           padding: var(--spacing-lg);
           min-height: 0;
       }

       .ocs-theme-card__form.one-click-shop-keyword-check-form {
           max-width: none;
           width: 100%;
       }

       .ocs-theme-stepper__connector {
           display: none;
       }

       .ocs-theme-stepper__list {
           flex-direction: column;
           flex-wrap: wrap;
           align-items: stretch;
       }

       .ocs-theme-stepper__step {
           width: 100%;
       }

       .ocs-theme-card__row {
           flex-direction: column;
           align-items: flex-start;
       }

       .ocs-theme-card__cta {
           margin-left: 0;
           width: 100%;
           justify-content: center;
       }
   }

#niches-grid {
    scroll-margin-top: 100px;
}

@media (max-width: 900px) {
    .one-click-shop-start__grid {
        grid-template-columns: 1fr;
    }

    .one-click-shop-start__choice-grid {
        grid-template-columns: 1fr;
    }

    .my-shops-top-bar .btn {
        width: 100%;
    }

    .my-shops-shopify-wrap {
        grid-template-columns: 1fr;
    }
}

/* Styles Shopify Connection */
.shopify-connection-info {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.shopify-connection-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.shopify-connection-label {
    font-size: 13px;
    color: var(--color-text-light);
    font-weight: 500;
    transition: color 0.3s ease;
}

.shopify-connection-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

/* Styles Modal Shopify Info */
.shopify-info-steps {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.shopify-info-step {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.shopify-info-step__number {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    background: linear-gradient(
        135deg,
        var(--color-primary) 0%,
        var(--color-secondary) 100%
    );
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 14px;
}

.shopify-info-step__content {
    flex: 1;
}

/* ===================================
      NICHE SEARCH WRAPPER
      =================================== */
.niche-search-wrapper {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.niche-search-bar {
    flex: 1;
    min-width: 300px;
}

/* Message "Niche non trouvée" */
.niche-not-found {
    background: var(--card-bg);
    border: 2px dashed var(--card-border);
    border-radius: 12px;
    padding: 48px 24px;
    text-align: center;
    margin-bottom: 24px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.niche-not-found__content {
    max-width: 500px;
    margin: 0 auto;
}

.niche-not-found__icon {
    color: var(--color-text-muted);
    margin-bottom: 16px;
}

.niche-not-found__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--card-text);
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}

.niche-not-found__text {
    font-size: 16px;
    color: var(--color-text-muted);
    margin: 0 0 24px 0;
    transition: color 0.3s ease;
}

.niche-not-found__actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Modal pour analyse */
.modal--analyze {
    max-width: 500px;
}

/* ===================================
      GÉNÉRATION DE BOUTIQUE — PAGE
      =================================== */
.admin-warning {
    margin-bottom: 24px;
}

.admin-warning__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-warning__content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-warning__text {
    margin: 4px 0 0 0;
}

.search-bar {
    margin-bottom: 32px;
}

.search-bar__input {
    max-width: 600px;
}

.niche-card__actions {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Effet 3D pour les images de niches */
.niche-card__image-wrapper {
    position: relative;
    display: block;
    transform-style: preserve-3d;
}

.card-3d-image {
    transition: 0.3s ease-out;
    will-change: transform;
    transform-style: preserve-3d;
}

.card-3d-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transform-style: preserve-3d;
    background: radial-gradient(
        circle at 50% 50%,
        rgba(255, 255, 255, 0.2) 0%,
        rgba(255, 255, 255, 0.1) 20%,
        rgba(255, 255, 255, 0.05) 40%,
        rgba(255, 255, 255, 0) 60%
    );
    transition: 0.3s ease-out;
}

/* Scroll infini - Loader et fin */
.scroll-loader,
.scroll-end {
    display: none;
    text-align: center;
    padding: 40px 20px;
}

.scroll-loader__spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 4px solid var(--card-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.scroll-loader__text,
.scroll-end__text {
    color: var(--color-text-muted);
    font-size: 16px;
    margin: 0;
    transition: color 0.3s ease;
}

/* ===================================
      UPGRADE CARD
      =================================== */
.upgrade-card {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    padding: 48px 40px;
    margin-bottom: 32px;
    text-align: center;
    box-shadow: 0 10px 40px rgba(102, 126, 234, 0.3);
    position: relative;
    overflow: hidden;
}

.upgrade-card::before {
    content: "";
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.1) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.upgrade-card__icon {
    color: #fff;
    margin-bottom: 24px;
    display: inline-block;
    animation: bounce 2s infinite;
}

@keyframes bounce {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.upgrade-card__content {
    position: relative;
    z-index: 1;
}

.upgrade-card__title {
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin: 0 0 16px 0;
}

.upgrade-card__text {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 32px 0;
    line-height: 1.6;
}

.upgrade-card__text strong {
    color: #fff;
    font-weight: 600;
}

.upgrade-card__features {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

.upgrade-card__feature {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    font-size: 16px;
    justify-content: center;
}

.upgrade-card__feature svg {
    flex-shrink: 0;
    color: #10b981;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    padding: 4px;
}

.upgrade-card__feature strong {
    font-weight: 600;
}

.upgrade-card__btn {
    background: #fff;
    color: #667eea;
    border: none;
    font-weight: 600;
    font-size: 18px;
    padding: 16px 32px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.upgrade-card__btn:hover {
    background: #f0f0f0;
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(0, 0, 0, 0.3);
}

@media (max-width: 768px) {
    .upgrade-card {
        padding: 32px 24px;
    }

    .upgrade-card__title {
        font-size: 24px;
    }

    .upgrade-card__text {
        font-size: 14px;
    }

    .upgrade-card__btn {
        font-size: 16px;
        padding: 14px 24px;
    }
}

/* ===================================
      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;
    justify-content: center;
    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: 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;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

[data-theme="dark"] .progress-info {
    background-color: #1e3a8a;
    border: 1px solid #3b82f6;
    color: #bfdbfe;
}

.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__hint {
    font-size: 12px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
    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;
}

.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: 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;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

[data-theme="dark"] .progress-info {
    background-color: #1e3a8a;
    border: 1px solid #3b82f6;
    color: #bfdbfe;
}

.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__hint {
    font-size: 12px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
    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);
}

.badge--secondary {
    background: #f3f4f6;
    color: #4b5563;
    border: 1px solid #d1d5db;
}

[data-theme="dark"] .badge--secondary {
    background: rgba(148, 163, 184, 0.15);
    color: #94a3b8;
    border: 1px solid #475569;
}

.badge--danger {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #ef4444;
}

[data-theme="dark"] .badge--danger {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid #ef4444;
}

.badge--warning {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
}

[data-theme="dark"] .badge--warning {
    background: rgba(245, 158, 11, 0.15);
    color: #fbbf24;
    border: 1px solid #f59e0b;
}

/* Tooltip pour les badges de tendance */
[data-tooltip] {
    position: relative;
}

[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: rgba(0, 0, 0, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: 12px;
    white-space: pre-line;
    z-index: 1000;
    min-width: 180px;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

[data-tooltip]:hover::before {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(0px);
    border: 6px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
    z-index: 1000;
}

[data-theme="dark"] [data-tooltip]:hover::after {
    background-color: rgba(255, 255, 255, 0.95);
    color: #1f2937;
}

[data-theme="dark"] [data-tooltip]:hover::before {
    border-top-color: rgba(255, 255, 255, 0.95);
}

@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);
}

/* =====================================================
         SETTINGS TOGGLE SECTION
         ===================================================== */
.settings-toggle-section {
    background: var(--card-bg);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: background-color 0.3s ease;
}

.settings-toggle-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    gap: 20px;
    border-bottom: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.settings-toggle-item:last-child {
    border-bottom: none;
}

.settings-toggle-info {
    flex: 1;
}

.settings-toggle-title {
    margin: 0 0 8px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.settings-toggle-description {
    margin: 0;
    font-size: 14px;
    color: var(--color-text-light);
    line-height: 1.5;
    transition: color 0.3s ease;
}

.settings-toggle-control {
    flex-shrink: 0;
}

/* Responsive */
@media (max-width: 768px) {
    .settings-toggle-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .settings-toggle-control {
        width: 100%;
        display: flex;
        justify-content: flex-end;
    }
}

/* ============================================
         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: var(--card-text);
    margin: 0 0 4px 0;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.notification-dropdown__item-message {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 6px 0;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.3s ease;
}

.notification-dropdown__item-time {
    display: inline-block;
    font-size: 12px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.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;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

[data-theme="dark"] .modal-info-box {
    background: #374151;
    color: #9ca3af;
}

.modal-info-icon {
    flex-shrink: 0;
    color: #3b82f6;
    transition: color 0.3s ease;
}

[data-theme="dark"] .modal-info-icon {
    color: #60a5fa;
}

/* Modal text variants */
.modal-text--secondary {
    margin-top: 10px;
    color: #6b7280;
    font-size: 14px;
}

.modal-text--highlight {
    color: #1f2937;
}

[data-theme="dark"] .modal-text--highlight {
    color: #f3f4f6;
}

.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;
}

.subscription-plans {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin-top: 48px;
    max-width: 1200px;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    align-items: stretch;
}

@media (min-width: 640px) {
    .subscription-plans {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 24px 20px;
    }
}

@media (min-width: 1100px) {
    .subscription-plans {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 24px 32px;
    }
}

.niches-quick-links__separator {
    color: #cbd5e1;
}

/* Barre d'actions bulk */
.bulk-actions-bar {
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    gap: 24px;
    /* Toutes les cards de la même ligne ont la même hauteur (CSS grid stretch) */
    align-self: stretch;
}

.subscription-plan__top {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    width: 100%;
}

.subscription-plan__description {
    flex: 1;
    margin-top: 12px;
}

.subscription-plan__bottom {
    margin-top: auto;
}

.subscription-plan__price-row {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.subscription-plan__price-after-trial {
    display: block;
    width: 100%;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-muted);
    margin-top: 0;
    margin-bottom: 0;
}

/* Bandeau d'offre d'essai gratuit */
.trial-offer-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
    border: 1px solid #6ee7b7;
    border-radius: 14px;
    padding: 18px 24px;
    margin-bottom: 24px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

[data-theme="dark"] .trial-offer-banner {
    background: linear-gradient(
        135deg,
        rgba(6, 78, 59, 0.4) 0%,
        rgba(4, 120, 87, 0.3) 100%
    );
    border-color: rgba(110, 231, 183, 0.3);
}

.trial-offer-banner__left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.trial-offer-banner__icon {
    font-size: 28px;
    flex-shrink: 0;
}

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

.trial-offer-banner__text strong {
    font-size: 15px;
    font-weight: 700;
    color: #065f46;
}

[data-theme="dark"] .trial-offer-banner__text strong {
    color: #6ee7b7;
}

.trial-offer-banner__text span {
    font-size: 13px;
    color: #047857;
    line-height: 1.5;
}

[data-theme="dark"] .trial-offer-banner__text span {
    color: #a7f3d0;
}

.trial-offer-banner__badges {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.trial-offer-banner__badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 99px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid #6ee7b7;
    color: #065f46;
    white-space: nowrap;
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .trial-offer-banner__badge {
    background: rgba(6, 78, 59, 0.5);
    border-color: rgba(110, 231, 183, 0.4);
    color: #a7f3d0;
}

.trial-offer-banner__badge--highlight {
    background: linear-gradient(135deg, #10b981, #059669);
    border-color: transparent;
    color: #fff;
}

[data-theme="dark"] .trial-offer-banner__badge--highlight {
    background: linear-gradient(135deg, #059669, #047857);
}

[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;
    flex-wrap: wrap;
    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-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;
}

.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;
    transition: color 0.3s ease;
}

[data-theme="dark"] .progress-info {
    color: #9ca3af;
}

.progress-percentage {
    font-weight: 600;
    color: #4f46e5;
    font-size: 16px;
    transition: color 0.3s ease;
}

[data-theme="dark"] .progress-percentage {
    color: #818cf8;
}

.progress-message {
    font-style: italic;
    color: #6b7280;
    transition: color 0.3s ease;
}

[data-theme="dark"] .progress-message {
    color: #9ca3af;
}

.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;
}

[data-theme="dark"] .progress-step {
    background-color: #374151;
}

.progress-step.active {
    background-color: rgba(79, 70, 229, 0.1);
    border-left: 3px solid #4f46e5;
}

[data-theme="dark"] .progress-step.active {
    background-color: rgba(129, 140, 248, 0.15);
    border-left: 3px solid #818cf8;
}

.progress-step.completed {
    background-color: rgba(16, 185, 129, 0.1);
    border-left: 3px solid #10b981;
}

[data-theme="dark"] .progress-step.completed {
    background-color: rgba(16, 185, 129, 0.15);
    border-left: 3px solid #34d399;
}

.progress-step.failed {
    background-color: rgba(239, 68, 68, 0.1);
    border-left: 3px solid #ef4444;
}

[data-theme="dark"] .progress-step.failed {
    background-color: rgba(239, 68, 68, 0.15);
    border-left: 3px solid #f87171;
}

.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;
    transition: color 0.3s ease;
}

[data-theme="dark"] .step-label {
    color: #e5e7eb;
}

.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;
}

/* Contest Result Carousel */
.contest-result__carousel {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.contest-result__carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.contest-result__carousel-track {
    position: relative;
    width: 100%;
}

.contest-result__slide {
    display: none;
    width: 100%;
}

.contest-result__slide--active {
    display: block;
    animation: fadeInSlide 0.5s ease-in-out;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.contest-result__slide-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--card-text);
    margin-bottom: 24px;
    transition: color 0.3s ease;
}

.contest-result__carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--card-text);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.contest-result__carousel-btn:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.contest-result__carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.contest-result__carousel-btn--prev {
    left: -60px;
}

.contest-result__carousel-btn--next {
    right: -60px;
}

.contest-result__carousel-icon {
    width: 20px;
    height: 20px;
}

/* Responsive pour le carousel */
@media (max-width: 1200px) {
    .contest-result__carousel-btn--prev {
        left: 10px;
    }

    .contest-result__carousel-btn--next {
        right: 10px;
    }
}

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

    .contest-result__carousel-btn--prev {
        left: 5px;
    }

    .contest-result__carousel-btn--next {
        right: 5px;
    }

    .contest-result__slide-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .contest-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .contest-content {
        gap: 32px;
    }

    .contest-result {
        padding: 40px 24px;
    }

    .contest-result__title {
        font-size: 28px;
    }
}

.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;
    white-space: normal;
    line-height: 1.35;
}

/* 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 : règles principales définies plus haut (mobile-first) */

.autre_plan {
    background-color: #0f1729;
}

.subscription-plan {
    position: relative;
    min-width: 0;
    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;
    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;
    border-radius: inherit;
    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: -14px;
    left: 50%;
    transform: translateX(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--color-primary);
    color: var(--color-white);
    padding: 6px 18px;
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.2px;
    box-shadow: 0 10px 25px rgba(37, 99, 235, 0.35);
    border: 2px solid var(--card-bg);
    transition: all 0.3s ease;
    z-index: 5;
    text-align: center;
    white-space: nowrap;
}
.subscription-plan__badge:hover {
    background: rgba(37, 99, 235, 0.9);
}

.subscription-plan > div:not(.subscription-plan__badge) {
    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;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
}

.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%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 24px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 48px;
    border-bottom: 4px solid var(--color-primary);
}

.subscription-plan__top > a.btn-block {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.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: 1099px) {
    .subscription-plan--popular {
        transform: none;
    }

    .subscription-plan--popular:hover {
        transform: translateY(-8px);
    }
}

@media (max-width: 768px) {
    .billing-toggle,
    .billing-toggle ul {
        flex-direction: column;
        width: 100%;
        align-items: center;
    }

    .billing-toggle ul {
        gap: 12px;
    }

    .billing-toggle__badge {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        text-align: center;
        max-width: 100%;
    }

    .billing-toggle__option {
        text-align: center;
    }

    .subscription-plans {
        margin-top: 32px;
        gap: 20px;
    }

    .subscription-plan {
        padding: 20px 16px;
    }

    .subscription-plan__title {
        font-size: 20px;
    }

    .subscription-plan__amount {
        font-size: 36px;
    }

    .subscription-plan .btn-block,
    .subscription-plan__top > a.btn-block {
        width: 100%;
        max-width: 100%;
        height: auto;
        min-height: 44px;
        font-size: 15px;
        line-height: 1.25;
        white-space: normal;
        text-align: center;
    }

    .subscription-plan__form {
        width: 100%;
        align-self: stretch;
    }

    .subscription-plan > .subscription-plan__top {
        padding-top: 8px;
        padding-left: 0;
        padding-right: 0;
    }

    .subscription-plan > .subscription-plan__bottom {
        padding-left: 0;
        padding-right: 0;
        padding-bottom: 0;
    }
}

/* =====================================================
         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-subtitle {
    font-size: 17px;
    color: var(--color-text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
    text-align: center;
    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);
}

/* Contest Result Section */
.contest-result {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 20px;
    padding: 48px 32px;
    margin-bottom: 32px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.contest-result__header {
    text-align: center;
    margin-bottom: 48px;
}

.contest-result__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
    padding: 10px 20px;
    border-radius: 50px;
    margin-bottom: 20px;
    transition: background-color 0.3s ease;
}

[data-theme="dark"] .contest-result__badge {
    background-color: rgba(59, 130, 246, 0.15);
}

.contest-result__badge-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.contest-result__badge-text {
    font-size: 14px;
    font-weight: 500;
}

.contest-result__title {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.contest-result__title-primary {
    color: var(--card-text);
    transition: color 0.3s ease;
}

.contest-result__title-secondary {
    color: var(--color-primary);
}

.contest-result__video {
    max-width: 1000px;
    margin: 0 auto;
}

.contest-result__video-wrapper {
    background-color: var(--color-bg-secondary);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.contest-result__video-wrapper:hover {
    transform: translateY(-4px);
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
}

[data-theme="dark"] .contest-result__video-wrapper {
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .contest-result__video-wrapper:hover {
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5);
}

/* Contest Result Carousel */
.contest-result__carousel {
    max-width: 1000px;
    margin: 0 auto;
    position: relative;
}

.contest-result__carousel-wrapper {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
}

.contest-result__carousel-track {
    position: relative;
    width: 100%;
}

.contest-result__slide {
    display: none;
    width: 100%;
}

.contest-result__slide--active {
    display: block;
    animation: fadeInSlide 0.5s ease-in-out;
}

@keyframes fadeInSlide {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.contest-result__slide-title {
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: var(--card-text);
    margin-bottom: 24px;
    transition: color 0.3s ease;
}

.contest-result__carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    color: var(--card-text);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 10;
}

.contest-result__carousel-btn:hover:not(:disabled) {
    background-color: var(--color-primary);
    color: white;
    transform: translateY(-50%) scale(1.1);
}

.contest-result__carousel-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.contest-result__carousel-btn--prev {
    left: -60px;
}

.contest-result__carousel-btn--next {
    right: -60px;
}

.contest-result__carousel-icon {
    width: 20px;
    height: 20px;
}

/* Responsive pour le carousel */
@media (max-width: 1200px) {
    .contest-result__carousel-btn--prev {
        left: 10px;
    }

    .contest-result__carousel-btn--next {
        right: 10px;
    }
}

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

    .contest-result__carousel-btn--prev {
        left: 5px;
    }

    .contest-result__carousel-btn--next {
        right: 5px;
    }

    .contest-result__slide-title {
        font-size: 18px;
        margin-bottom: 16px;
    }
}

/* Responsive */
@media (max-width: 1024px) {
    .contest-features {
        grid-template-columns: repeat(2, 1fr);
    }

    .contest-content {
        gap: 32px;
    }

    .contest-result {
        padding: 40px 24px;
    }

    .contest-result__title {
        font-size: 28px;
    }
}

@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;
    }

    .contest-result {
        padding: 32px 20px;
    }

    .contest-result__title {
        font-size: 22px;
    }

    .contest-result__header {
        margin-bottom: 32px;
    }
}

/* ========================================
         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: 260px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        padding: 12px 10px !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: 200px;
    }

    .main-content {
        margin-left: 200px;
    }

    /* 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;
}

/* ============================================
         CANCELLATION MODAL (Tunnel de rétention)
         ============================================ */

/* Modale principale */
.cancellation-modal {
    max-width: 650px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 0;
}

/* Progress bar container */
.cancellation-progress {
    padding: 24px 32px 16px;
    border-bottom: 1px solid var(--card-border);
    background: var(--color-bg-secondary);
    border-radius: 16px 16px 0 0;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.cancellation-progress__bar {
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-primary) var(--progress-width, 33.33%),
        var(--card-border) var(--progress-width, 33.33%),
        var(--card-border) 100%
    );
    border-radius: 2px;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.cancellation-progress__steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.cancellation-progress__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.cancellation-progress__step.active {
    opacity: 1;
}

.cancellation-progress__step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--card-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.cancellation-progress__step.active .cancellation-progress__step-number {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.cancellation-progress__step-label {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
    text-align: center;
    transition: color 0.3s ease;
}

.cancellation-progress__step.active .cancellation-progress__step-label {
    color: var(--color-primary);
}

/* Steps container */
.cancellation-step {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 400px;
    animation: fadeIn 0.3s ease;
    background: var(--modal-bg);
    color: var(--card-text);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.cancellation-step.hidden {
    display: none;
}

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

/* Step header */
.cancellation-step__header {
    text-align: center;
}

.cancellation-step__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--card-text);
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}

.cancellation-step__subtitle {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0;
    transition: color 0.3s ease;
}

/* Step content */
.cancellation-step__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Reasons list (Step 1) */
.cancellation-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cancellation-reason-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card-bg);
}

.cancellation-reason-item:hover {
    border-color: var(--color-primary);
    background: var(--dropdown-hover);
}

.cancellation-reason-item.selected {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .cancellation-reason-item.selected {
    background: rgba(59, 130, 246, 0.1);
}

.cancellation-reason-item__checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cancellation-reason-item.selected .cancellation-reason-item__checkbox {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.cancellation-reason-item.selected .cancellation-reason-item__checkbox::after {
    content: "✓";
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.cancellation-reason-item__icon {
    font-size: 22px;
    flex-shrink: 0;
}

.cancellation-reason-item__label {
    flex: 1;
    font-size: 15px;
    color: var(--card-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Other reason textarea */
.cancellation-other {
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

/* Retention messages (Step 2) */
.cancellation-retention-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.cancellation-retention-message {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    animation: fadeIn 0.3s ease;
    transition: background-color 0.3s ease;
}

.cancellation-retention-message__icon {
    font-size: 24px;
    flex-shrink: 0;
}

.cancellation-retention-message__text {
    font-size: 15px;
    color: var(--card-text);
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s ease;
}

/* Help buttons (Step 2) */
.cancellation-help-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn--large {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Warning box (Step 3) */
.cancellation-warning-box {
    padding: 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

[data-theme="dark"] .cancellation-warning-box {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border-color: #f59e0b;
}

.cancellation-warning-box__icon {
    color: #f59e0b;
    flex-shrink: 0;
}

.cancellation-warning-box__content {
    flex: 1;
}

.cancellation-warning-box__intro {
    font-size: 16px;
    font-weight: 600;
    color: #78350f;
    margin: 0 0 12px 0;
}

[data-theme="dark"] .cancellation-warning-box__intro {
    color: #fbbf24;
}

.cancellation-warning-box__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cancellation-warning-box__list li {
    font-size: 15px;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

[data-theme="dark"] .cancellation-warning-box__list li {
    color: #fde68a;
}

.cancellation-warning-box__list li::before {
    content: "✓";
    color: #f59e0b;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Info box (Step 3) */
.cancellation-info-box {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.3s ease;
}

.cancellation-info-box svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.cancellation-info-box p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
    transition: color 0.3s ease;
}

/* Subscription info (Step 3) */
.cancellation-subscription-info {
    text-align: center;
    font-size: 15px;
    color: var(--card-text);
    padding: 16px;
    background: var(--color-bg-light);
    border-radius: 8px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.cancellation-subscription-info strong {
    color: var(--color-primary);
}

/* Step footer */
.cancellation-step__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.cancellation-step__footer--final {
    flex-direction: column;
    gap: 12px;
}

.cancellation-step__footer--final .btn--large {
    width: 100%;
}

.cancellation-step__footer--final .btn--danger {
    width: 100%;
}

.btn--link {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.btn--link:hover {
    color: var(--color-primary);
}

.btn--tertiary {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--card-text);
    transition: all 0.2s ease;
}

.btn--tertiary:hover {
    background: var(--dropdown-hover);
    border-color: var(--color-primary);
}

/* Loading overlay */
.cancellation-loading {
    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: 16px;
    border-radius: 16px;
    z-index: 10;
}

[data-theme="dark"] .cancellation-loading {
    background: rgba(17, 24, 39, 0.95);
}

.cancellation-loading p {
    font-size: 15px;
    color: var(--card-text);
    margin: 0;
}

/* Close button */
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 11;
}

.modal-close:hover {
    background: var(--dropdown-hover);
    color: var(--color-danger);
}

/* Responsive */
@media (max-width: 640px) {
    .cancellation-modal {
        width: 95%;
        padding: 0;
    }

    .cancellation-step {
        padding: 24px 20px;
        min-height: 350px;
    }

    .cancellation-progress {
        padding: 20px 20px 12px;
    }

    .cancellation-progress__step-label {
        font-size: 11px;
    }

    .cancellation-step__title {
        font-size: 20px;
    }

    .cancellation-help-buttons {
        gap: 10px;
    }

    .btn--large {
        padding: 14px 20px;
        font-size: 15px;
    }

    .cancellation-warning-box {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .cancellation-step__footer {
        flex-direction: column;
        gap: 10px;
    }

    .cancellation-step__footer .btn {
        width: 100%;
    }
}

/* ============================================
         ADMIN CANCELLATION SETTINGS (Dark mode compatible)
         ============================================ */

.cancellation-settings-other-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    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;
}

.cancellation-settings-hint {
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 400;
    margin-left: 8px;
    transition: color 0.3s ease;
}

.cancellation-settings-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cancellation-settings-checkboxes .checkbox-label span {
    color: var(--card-text);
    transition: color 0.3s ease;
}

.cancellation-settings-form-grid {
    display: grid;
    gap: 16px;
}

/* ============================================
         SHOP ANALYSIS REGIONS (Admin Settings)
         ============================================ */

.shop-analysis-regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.stat-item {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.stat-item__value {
    font-size: 32px;
    font-weight: 700;
    color: #667eea;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-item__label {
    font-size: 14px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* ============================================
         SHOP ANALYSIS - Extensions pour la page
         ============================================ */

/* Options de recherche (région + crédits) */
.analysis-search__options {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.analysis-search__select {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--input-border);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 15px;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.analysis-search__select:focus {
    outline: none;
    border-color: #667eea;
}

.analysis-search__info {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    font-size: 14px;
    font-weight: 500;
    color: var(--card-text);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.analysis-search__credits {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    font-size: 14px;
    font-weight: 500;
    color: var(--card-text);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* Progress dans les analyses */
.analysis-user-niches__item-progress {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
    padding: 8px;
    background: var(--color-bg-secondary);
    border-radius: 6px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Actions dans les items */
.analysis-user-niches__item-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

/* Highlight d'une analyse (compatible dark mode) */
.highlighted-analysis {
    background-color: #fef3c7 !important;
    animation: highlight-fade-analysis 3s ease-out;
}

[data-theme="dark"] .highlighted-analysis {
    background-color: #78350f !important;
}

@keyframes highlight-fade-analysis {
    0% {
        background-color: #fef3c7;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes highlight-fade-analysis-dark {
    0% {
        background-color: #78350f;
    }
    100% {
        background-color: transparent;
    }
}

[data-theme="dark"] .highlighted-analysis {
    animation: highlight-fade-analysis-dark 3s ease-out;
}

/* Lien vers le domaine (compatible dark mode) */
.analysis-domain-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.analysis-domain-link:hover {
    color: #667eea;
}

.analysis-domain-link__icon {
    margin-left: 4px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.analysis-domain-link:hover .analysis-domain-link__icon {
    opacity: 1;
}

/* Row pour les boutons submit + reset */
.analysis-search__submit-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.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;
}

/* ============================================
      CANCELLATION MODAL (Tunnel de rétention)
      ============================================ */

/* Modale principale */
.cancellation-modal {
    max-width: 650px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    padding: 0;
}

/* Progress bar container */
.cancellation-progress {
    padding: 24px 32px 16px;
    border-bottom: 1px solid var(--card-border);
    background: var(--color-bg-secondary);
    border-radius: 16px 16px 0 0;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.cancellation-progress__bar {
    height: 4px;
    background: linear-gradient(
        90deg,
        var(--color-primary) 0%,
        var(--color-primary) var(--progress-width, 33.33%),
        var(--card-border) var(--progress-width, 33.33%),
        var(--card-border) 100%
    );
    border-radius: 2px;
    margin-bottom: 20px;
    transition: all 0.4s ease;
}

.cancellation-progress__steps {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.cancellation-progress__step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    opacity: 0.4;
    transition: opacity 0.3s ease;
}

.cancellation-progress__step.active {
    opacity: 1;
}

.cancellation-progress__step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--card-border);
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 14px;
    transition: all 0.3s ease;
}

.cancellation-progress__step.active .cancellation-progress__step-number {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.1);
}

.cancellation-progress__step-label {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
    text-align: center;
    transition: color 0.3s ease;
}

.cancellation-progress__step.active .cancellation-progress__step-label {
    color: var(--color-primary);
}

/* Steps container */
.cancellation-step {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 400px;
    animation: fadeIn 0.3s ease;
    background: var(--modal-bg);
    color: var(--card-text);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.cancellation-step.hidden {
    display: none;
}

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

/* Step header */
.cancellation-step__header {
    text-align: center;
}

.cancellation-step__title {
    font-size: 24px;
    font-weight: 700;
    color: var(--card-text);
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}

.cancellation-step__subtitle {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0;
    transition: color 0.3s ease;
}

/* Step content */
.cancellation-step__content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Reasons list (Step 1) */
.cancellation-reasons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.cancellation-reason-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid var(--card-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    background: var(--card-bg);
}

.cancellation-reason-item:hover {
    border-color: var(--color-primary);
    background: var(--dropdown-hover);
}

.cancellation-reason-item.selected {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.05);
}

[data-theme="dark"] .cancellation-reason-item.selected {
    background: rgba(59, 130, 246, 0.1);
}

.cancellation-reason-item__checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--input-border);
    border-radius: 4px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.cancellation-reason-item.selected .cancellation-reason-item__checkbox {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.cancellation-reason-item.selected .cancellation-reason-item__checkbox::after {
    content: "✓";
    color: white;
    font-size: 14px;
    font-weight: 700;
}

.cancellation-reason-item__icon {
    font-size: 22px;
    flex-shrink: 0;
}

.cancellation-reason-item__label {
    flex: 1;
    font-size: 15px;
    color: var(--card-text);
    font-weight: 500;
    transition: color 0.3s ease;
}

/* Other reason textarea */
.cancellation-other {
    margin-top: 8px;
    animation: fadeIn 0.3s ease;
}

/* Retention messages (Step 2) */
.cancellation-retention-messages {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.cancellation-retention-message {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-left: 4px solid var(--color-primary);
    border-radius: 8px;
    display: flex;
    gap: 12px;
    animation: fadeIn 0.3s ease;
    transition: background-color 0.3s ease;
}

.cancellation-retention-message__icon {
    font-size: 24px;
    flex-shrink: 0;
}

.cancellation-retention-message__text {
    font-size: 15px;
    color: var(--card-text);
    line-height: 1.6;
    margin: 0;
    transition: color 0.3s ease;
}

/* Help buttons (Step 2) */
.cancellation-help-buttons {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn--large {
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Warning box (Step 3) */
.cancellation-warning-box {
    padding: 24px;
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

[data-theme="dark"] .cancellation-warning-box {
    background: linear-gradient(135deg, #78350f 0%, #92400e 100%);
    border-color: #f59e0b;
}

.cancellation-warning-box__icon {
    color: #f59e0b;
    flex-shrink: 0;
}

.cancellation-warning-box__content {
    flex: 1;
}

.cancellation-warning-box__intro {
    font-size: 16px;
    font-weight: 600;
    color: #78350f;
    margin: 0 0 12px 0;
}

[data-theme="dark"] .cancellation-warning-box__intro {
    color: #fbbf24;
}

.cancellation-warning-box__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cancellation-warning-box__list li {
    font-size: 15px;
    color: #92400e;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.5;
}

[data-theme="dark"] .cancellation-warning-box__list li {
    color: #fde68a;
}

.cancellation-warning-box__list li::before {
    content: "✓";
    color: #f59e0b;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 2px;
}

/* Info box (Step 3) */
.cancellation-info-box {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 12px;
    transition: background-color 0.3s ease;
}

.cancellation-info-box svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.cancellation-info-box p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
    transition: color 0.3s ease;
}

/* Subscription info (Step 3) */
.cancellation-subscription-info {
    text-align: center;
    font-size: 15px;
    color: var(--card-text);
    padding: 16px;
    background: var(--color-bg-light);
    border-radius: 8px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.cancellation-subscription-info strong {
    color: var(--color-primary);
}

/* Step footer */
.cancellation-step__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding-top: 20px;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.cancellation-step__footer--final {
    flex-direction: column;
    gap: 12px;
}

.cancellation-step__footer--final .btn--large {
    width: 100%;
}

.cancellation-step__footer--final .btn--danger {
    width: 100%;
}

.btn--link {
    background: none;
    border: none;
    color: var(--color-text-muted);
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s ease;
}

.btn--link:hover {
    color: var(--color-primary);
}

.btn--tertiary {
    background: transparent;
    border: 1px solid var(--card-border);
    color: var(--card-text);
    transition: all 0.2s ease;
}

.btn--tertiary:hover {
    background: var(--dropdown-hover);
    border-color: var(--color-primary);
}

/* Loading overlay */
.cancellation-loading {
    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: 16px;
    border-radius: 16px;
    z-index: 10;
}

[data-theme="dark"] .cancellation-loading {
    background: rgba(17, 24, 39, 0.95);
}

.cancellation-loading p {
    font-size: 15px;
    color: var(--card-text);
    margin: 0;
}

/* Close button */
.modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    transition: all 0.2s ease;
    z-index: 11;
}

.modal-close:hover {
    background: var(--dropdown-hover);
    color: var(--color-danger);
}

/* Responsive */
@media (max-width: 640px) {
    .cancellation-modal {
        width: 95%;
        padding: 0;
    }

    .cancellation-step {
        padding: 24px 20px;
        min-height: 350px;
    }

    .cancellation-progress {
        padding: 20px 20px 12px;
    }

    .cancellation-progress__step-label {
        font-size: 11px;
    }

    .cancellation-step__title {
        font-size: 20px;
    }

    .cancellation-help-buttons {
        gap: 10px;
    }

    .btn--large {
        padding: 14px 20px;
        font-size: 15px;
    }

    .cancellation-warning-box {
        flex-direction: column;
        gap: 16px;
        padding: 20px;
    }

    .cancellation-step__footer {
        flex-direction: column;
        gap: 10px;
    }

    .cancellation-step__footer .btn {
        width: 100%;
    }
}

/* ============================================
      ADMIN CANCELLATION SETTINGS (Dark mode compatible)
      ============================================ */

.cancellation-settings-other-box {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    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;
}

.cancellation-settings-hint {
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 400;
    margin-left: 8px;
    transition: color 0.3s ease;
}

.cancellation-settings-checkboxes {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cancellation-settings-checkboxes .checkbox-label span {
    color: var(--card-text);
    transition: color 0.3s ease;
}

.cancellation-settings-form-grid {
    display: grid;
    gap: 16px;
}

/* ============================================
      SHOP ANALYSIS REGIONS (Admin Settings)
      ============================================ */

.shop-analysis-regions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.stat-item {
    padding: 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    text-align: center;
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.stat-item__value {
    font-size: 32px;
    font-weight: 700;
    color: #667eea;
    line-height: 1;
    margin-bottom: 8px;
}

.stat-item__label {
    font-size: 14px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* ============================================
      SHOP ANALYSIS - Extensions pour la page
      ============================================ */

/* Options de recherche (région + crédits) */
.analysis-search__options {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
}

.analysis-search__select {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid var(--input-border);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--input-text);
    font-size: 15px;
    transition:
        border-color 0.3s ease,
        background-color 0.3s ease,
        color 0.3s ease;
}

.analysis-search__select:focus {
    outline: none;
    border-color: #667eea;
}

.analysis-search__info {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    font-size: 14px;
    font-weight: 500;
    color: var(--card-text);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.analysis-search__credits {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    background: var(--color-bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--card-border);
    font-size: 14px;
    font-weight: 500;
    color: var(--card-text);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

/* Progress dans les analyses */
.analysis-user-niches__item-progress {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 8px;
    padding: 8px;
    background: var(--color-bg-secondary);
    border-radius: 6px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Actions dans les items */
.analysis-user-niches__item-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

/* Highlight d'une analyse (compatible dark mode) */
.highlighted-analysis {
    background-color: #fef3c7 !important;
    animation: highlight-fade-analysis 3s ease-out;
}

[data-theme="dark"] .highlighted-analysis {
    background-color: #78350f !important;
}

@keyframes highlight-fade-analysis {
    0% {
        background-color: #fef3c7;
    }
    100% {
        background-color: transparent;
    }
}

@keyframes highlight-fade-analysis-dark {
    0% {
        background-color: #78350f;
    }
    100% {
        background-color: transparent;
    }
}

[data-theme="dark"] .highlighted-analysis {
    animation: highlight-fade-analysis-dark 3s ease-out;
}

/* Lien vers le domaine (compatible dark mode) */
.analysis-domain-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.analysis-domain-link:hover {
    color: #667eea;
}

.analysis-domain-link__icon {
    margin-left: 4px;
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.analysis-domain-link:hover .analysis-domain-link__icon {
    opacity: 1;
}

/* Row pour les boutons submit + reset */
.analysis-search__submit-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.analysis-search__reset-quota {
    margin-top: 12px;
    text-align: center;
}

/* Progress Modal */
.progress-tracker {
    margin-bottom: 20px;
}

.progress-tracker__bar {
    width: 100%;
    height: 20px;
    background: var(--color-bg-secondary);
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--card-border);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.progress-tracker__fill {
    height: 100%;
    background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    transition: width 0.5s ease;
}

.progress-tracker__percentage {
    text-align: center;
    margin-top: 8px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.progress-steps {
    margin-top: 20px;
}

.progress-step {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    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;
}

.progress-step__spinner {
    animation: spin 1s linear infinite;
    color: #667eea;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

/* Shop Analysis Show Page */
.shop-analysis-show {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.health-score-display {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.health-score-circle {
    text-align: center;
}

.health-score-value {
    font-size: 72px;
    font-weight: 700;
    color: #667eea;
    line-height: 1;
}

.health-score-value span {
    font-size: 36px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.health-score-label {
    margin-top: 12px;
}

.metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.metric-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .metric-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.metric-card__icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.metric-card__content {
    flex: 1;
}

.metric-card__title {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.metric-card__value {
    font-size: 28px;
    font-weight: 700;
    color: var(--card-text);
    line-height: 1;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

.metric-card__label {
    font-size: 12px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.metrics-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
}

.metric-item {
    padding: 16px;
    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;
}

.metric-item__label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
    transition: color 0.3s ease;
}

.metric-item__value {
    font-size: 24px;
    font-weight: 700;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.metric-item__value--success {
    color: var(--color-success) !important;
}

.metric-item__value--muted {
    color: var(--color-text-muted) !important;
}

/* ===== HEADER ACTIONS (pour les pages de détails) ===== */
.header__actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.header__buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

/* ===== SHOP ANALYSIS SHOW (vue détaillée) ===== */

/* Info de l'analyse (header) */
.shop-analysis-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.shop-analysis-info__item {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-analysis-info__label {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.shop-analysis-info__value {
    font-size: 16px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.shop-analysis-info__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--color-primary);
    text-decoration: none;
    transition:
        color 0.3s ease,
        opacity 0.2s ease;
}

.shop-analysis-info__link:hover {
    opacity: 0.8;
}

.shop-analysis-info__cms {
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-analysis-info__cms-logo {
    max-width: 300px;
    max-height: 57px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Métriques grid */
.shop-metrics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

/* Grille forcée à 4 colonnes (Competitive Research) */
.shop-metrics-grid--4cols {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 1400px) {
    .shop-metrics-grid--4cols {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .shop-metrics-grid--4cols {
        grid-template-columns: 1fr;
    }
}

.shop-metric-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.shop-metric-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

[data-theme="dark"] .shop-metric-card:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}

.shop-metric-card__icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    color: white;
    flex-shrink: 0;
}

.shop-metric-card__icon--purple {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.shop-metric-card__icon--blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.shop-metric-card__icon--green {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.shop-metric-card__icon--orange {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.shop-metric-card__icon--success {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.shop-metric-card__icon--danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.shop-metric-card__content {
    flex: 1;
}

.shop-metric-card__label {
    font-size: 13px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.shop-metric-card__value {
    font-size: 32px;
    font-weight: 700;
    color: var(--card-text);
    line-height: 1;
    margin-bottom: 6px;
    transition: color 0.3s ease;
}

.shop-metric-card__sublabel {
    font-size: 12px;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* Backlinks grid */
.shop-backlinks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 16px;
}

.shop-backlink-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    transition:
        transform 0.2s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.shop-backlink-item:hover {
    transform: translateY(-2px);
}

.shop-backlink-item__icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--card-text);
    flex-shrink: 0;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.shop-backlink-item--success .shop-backlink-item__icon {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: var(--color-success);
}

[data-theme="dark"] .shop-backlink-item--success .shop-backlink-item__icon {
    background: rgba(16, 185, 129, 0.15);
}

.shop-backlink-item--muted .shop-backlink-item__icon {
    background: rgba(107, 114, 128, 0.1);
    border-color: rgba(107, 114, 128, 0.3);
    color: var(--color-text-muted);
}

.shop-backlink-item--primary .shop-backlink-item__icon {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
    color: var(--color-primary);
}

[data-theme="dark"] .shop-backlink-item--primary .shop-backlink-item__icon {
    background: rgba(59, 130, 246, 0.15);
}

.shop-backlink-item__content {
    flex: 1;
}

.shop-backlink-item__label {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-bottom: 6px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.shop-backlink-item__value {
    font-size: 26px;
    font-weight: 700;
    color: var(--card-text);
    line-height: 1;
    transition: color 0.3s ease;
}

/* =================================================================
      IMPERSONATION BANNER
      ================================================================= */

.impersonation-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
    color: #ffffff;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    animation: slideDown 0.3s ease;
}

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

.impersonation-banner__content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.impersonation-banner__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
}

.impersonation-banner__icon svg {
    color: #ffffff;
}

.impersonation-banner__text {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.impersonation-banner__text strong {
    font-weight: 600;
}

.impersonation-banner__button {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.9);
    color: #d97706;
    border: none;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.impersonation-banner__button:hover {
    background: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.impersonation-banner__button svg {
    flex-shrink: 0;
}

/* Ajuster le layout quand le banner est présent */
body:has(.impersonation-banner) {
    padding-top: 56px;
}

body:has(.impersonation-banner) .sidebar {
    top: 56px;
    height: calc(100vh - 56px);
}

body:has(.impersonation-banner) .topbar {
    top: 56px;
}

/* ================================================
      🛍️ BEST-SELLERS SECTION (Advanced Shop Analysis)
      ================================================ */

.best-sellers-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 20px;
}

@media (max-width: 1024px) {
    .best-sellers-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .best-sellers-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }
}

@media (max-width: 480px) {
    .best-sellers-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Card du produit */
.best-seller-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
}

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

[data-theme="dark"] .best-seller-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* Image */
.best-seller-card__image-container {
    position: relative;
    width: 100%;
    padding-top: 100%; /* Ratio 1:1 */
    background: var(--color-bg-secondary);
    overflow: hidden;
}

.best-seller-card__image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.best-seller-card:hover .best-seller-card__image {
    transform: scale(1.05);
}

/* Placeholder si pas d'image */
.best-seller-card__image-placeholder {
    width: 100%;
    padding-top: 100%;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
    position: relative;
}

.best-seller-card__image-placeholder svg {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Contenu */
.best-seller-card__content {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
}

.best-seller-card__title {
    font-size: 14px;
    font-weight: 600;
    color: var(--card-text);
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 38px; /* 2 lignes minimum */
    transition: color 0.3s ease;
}

.best-seller-card__price {
    font-size: 16px;
    font-weight: 700;
    color: var(--color-primary);
    margin-top: 4px;
}

.best-seller-card__link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-primary);
    text-decoration: none;
    margin-top: auto;
    padding-top: 8px;
    transition: all 0.2s ease;
}

.best-seller-card__link:hover {
    color: var(--color-primary-dark);
    gap: 8px;
}

.best-seller-card__link svg {
    flex-shrink: 0;
}

/* ==========================================
      SYNC DEV/PROD SYSTEM
      ========================================== */

/* PROD Warning Message */
.sync-prod-warning {
    margin: 0;
}

.sync-prod-warning__container {
    display: flex;
    align-items: center;
    gap: 16px;
}

.sync-prod-warning__icon {
    flex-shrink: 0;
    color: var(--color-danger);
}

.sync-prod-warning__content {
    flex: 1;
}

.sync-prod-warning__title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--color-danger);
}

.sync-prod-warning__text {
    margin: 0 0 16px 0;
    color: var(--badge-text-danger);
    line-height: 1.6;
}

/* Token Configuration Box */
.sync-token-box {
    margin-bottom: 32px;
    padding: 20px;
    background: var(--badge-bg-info);
    border: 2px solid var(--color-info);
    border-radius: 8px;
    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}

.sync-token-box__title {
    margin: 0 0 12px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--badge-text-info);
    transition: color 0.3s ease;
}

.sync-token-box__description {
    margin: 0 0 12px 0;
    color: var(--badge-text-info);
    font-size: 14px;
    transition: color 0.3s ease;
}

.sync-token-box__description code {
    background: var(--card-bg);
    padding: 2px 6px;
    border-radius: 4px;
    color: var(--card-text);
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

.sync-token-box__status {
    display: flex;
    align-items: center;
    gap: 12px;
}

.sync-token-box__status-label {
    font-weight: 600;
}

.sync-token-box__status-label--success {
    color: var(--color-success);
}

.sync-token-box__status-label--error {
    color: var(--color-danger);
}

.sync-token-box__status-value {
    background: var(--card-bg);
    padding: 6px 12px;
    border-radius: 4px;
    font-size: 13px;
    color: var(--color-text-light);
    font-family: monospace;
    transition:
        background 0.3s ease,
        color 0.3s ease;
}

/* Sync Compare Grid */
.sync-compare-grid {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 16px;
    align-items: center;
}

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

.sync-compare-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.sync-compare-card--loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    grid-column: 1 / -1;
}

.sync-compare-card__loader {
    color: var(--color-primary);
}

.sync-compare-card__loading-text {
    margin-top: 8px;
    color: var(--color-text-muted);
    font-size: 14px;
}

.sync-compare-card--error {
    background: var(--color-danger-bg, #fee2e2);
    border-color: var(--color-danger);
    grid-column: 1 / -1;
    text-align: center;
}

.sync-compare-card--dev {
    border-left: 4px solid var(--color-info);
}

.sync-compare-card--prod {
    border-left: 4px solid var(--color-success);
}

.sync-compare-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--card-border);
}

.sync-compare-card__badge {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.sync-compare-card__badge--dev {
    background: var(--color-info-bg, #dbeafe);
    color: var(--color-info);
}

.sync-compare-card__badge--prod {
    background: var(--color-success-bg, #d1fae5);
    color: var(--color-success);
}

.sync-compare-card__total {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 500;
}

.sync-compare-card__content {
    min-height: 60px;
}

.sync-compare-card__name {
    font-size: 16px;
    font-weight: 600;
    color: var(--card-text);
    margin-bottom: 4px;
}

.sync-compare-card__email {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 8px;
}

.sync-compare-card__date {
    font-size: 12px;
    color: var(--color-text-light);
}

.sync-compare-card__empty {
    color: var(--color-text-muted);
    font-style: italic;
}

.sync-compare-card__error {
    color: var(--color-danger);
    font-size: 13px;
}

.sync-compare-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.sync-compare-separator__icon {
    font-size: 32px;
}

.sync-compare-separator__icon--synced {
    color: var(--color-success);
}

.sync-compare-separator__icon--not-synced {
    color: var(--color-warning);
}

.sync-compare-separator__text {
    font-size: 12px;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.spin {
    animation: spin 1s linear infinite;
}

/* Sync Button Area */
.sync-button-area {
    text-align: center;
    padding: 32px;
    background: var(--color-bg-hover);
    border: 2px dashed var(--color-border);
    border-radius: 12px;
    transition:
        background 0.3s ease,
        border-color 0.3s ease;
}

.sync-button-area__icon-wrapper {
    margin-bottom: 24px;
}

.sync-button-area__icon {
    color: var(--color-info);
    margin: 0 auto;
    transition: color 0.3s ease;
}

.sync-button-area__title {
    margin: 0 0 8px 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.sync-button-area__description {
    margin: 0 0 24px 0;
    color: var(--color-text-light);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: color 0.3s ease;
}

.sync-button-area__button {
    font-size: 16px;
    padding: 14px 32px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.sync-button-area__info {
    margin: 16px 0 0 0;
    color: var(--color-text-muted);
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: color 0.3s ease;
}

/* Sync History Table */
.sync-history {
    margin-top: 32px;
    padding-top: 32px;
    border-top: 2px solid var(--table-border);
    transition: border-color 0.3s ease;
}

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

.sync-history__table-wrapper {
    overflow-x: auto;
}

.sync-history__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

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

.sync-history__table th {
    padding: 12px;
    text-align: left;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

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

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

.sync-history__table td {
    padding: 12px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.sync-history__table-empty {
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* ==========================================
      BACKLINKS SECTION - SHOP ANALYSIS
      ========================================== */

/* Styles pour les URLs de backlinks */
.backlink-url {
    color: var(--color-primary);
    text-decoration: none;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.backlink-url:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.backlink-title {
    font-size: 12px;
    color: var(--color-text-muted);
    margin-top: 4px;
    font-style: italic;
    transition: color 0.3s ease;
}

.backlink-anchor {
    color: var(--card-text);
    font-weight: 500;
    font-size: 13px;
    transition: color 0.3s ease;
}

/* Styles pour les domaines référents */
.refdomain-url {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: color 0.2s ease;
}

.refdomain-url:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

/* Classes pour cacher les lignes au-delà de 10 */
.backlink-row-hidden,
.refdomain-row-hidden {
    display: none;
}

/* ==========================================
      SPINNER DE CHARGEMENT
      ========================================== */

.spinner {
    width: 40px;
    height: 40px;
    margin: 0 auto;
    border: 4px solid var(--color-bg-secondary);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.badge-custom-new {
    min-width: 50px;
}
/* ===================================
      GÉNÉRATION DE BOUTIQUE — STYLES
      =================================== */

/* Quota card */
.quota-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px 24px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

/* Grid des niches */
.niches-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 24px;
}

/* Carte de niche */
.niche-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.niche-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

/* Image de la niche (carré) */
.niche-card__image {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    margin-bottom: 16px;
}

.niche-card__image--placeholder {
    background-color: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.niche-card__image--placeholder::before {
    content: "📷";
    font-size: 48px;
    opacity: 0.3;
}

.niche-card__header {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 8px;
}

.niche-card__title {
    font-size: 18px;
    font-weight: 600;
    color: var(--card-text);
    margin: 0;
    flex: 1;
}

.niche-card__score {
    background: var(--color-bg-secondary);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 16px;
    font-weight: 700;
    min-width: 50px;
    text-align: center;
}

.niche-card__metrics {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}

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

.metric__label {
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.metric__value {
    font-size: 14px;
    font-weight: 600;
    color: var(--card-text);
}

/* Empty state (aucune boutique) */
.empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-state__icon {
    margin-bottom: 24px;
    opacity: 0.5;
}

.empty-state__title {
    font-size: 24px;
    font-weight: 600;
    color: var(--card-text);
    margin-bottom: 12px;
}

.empty-state__description {
    font-size: 16px;
    color: var(--color-text-muted);
    max-width: 500px;
    margin: 0 auto;
}

/* ==================================================
      GÉNÉRATION DE BOUTIQUE — BRANDING PAGE
      ================================================== */

.branding-page {
    max-width: 1400px;
    margin: 0 auto;
    padding-bottom: 100px;
}

.products-page.products-page--branding-flow .branding-page {
    flex: 1 1 auto;
    min-height: 0;
    max-width: none;
    width: 100%;
    margin: 0;
}

/* Branding : le wizard ne doit pas prendre toute la hauteur flex (sinon le stepper paraît écrasé par le contenu suivant) */
.products-page.products-page--branding-flow .ocs-theme-wizard-page {
    flex: 0 0 auto;
    flex-shrink: 0;
    width: 100%;
}

/* Niche Info */
.branding-niche-info {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 24px;
    margin-bottom: 32px;
    flex-wrap: wrap;
}

.niche-badge,
.product-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    font-size: 14px;
    color: var(--card-text);
    transition: all 0.3s ease;
}

.niche-badge strong,
.product-badge strong {
    color: var(--color-primary);
}

.product-name-clickable {
    cursor: pointer;
    transition: all 0.2s ease;
}

.product-name-clickable:hover {
    text-decoration: underline;
    opacity: 0.8;
}

/* ==================================================
      BRANDING — PRODUIT DE RÉFÉRENCE
      Carte "produit de référence" affichée en tête de la page de branding.
      Structure : titre + lead, puis une ligne avec
        [vignette image]  [titre produit + meta niche]  [badge vert "Produit de référence"]
      Le wrapper extérieur réutilise .branding-section pour le fond carte + bordure ;
      ce bloc fournit la mise en page interne et le badge succès.
      ================================================== */
.branding-reference-product__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 6px;
    font-size: 18px;
    font-weight: 600;
    color: var(--card-text);
    line-height: 1.3;
    transition: color 0.3s ease;
}

.branding-reference-product__lead {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

.branding-reference-product__row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.branding-reference-product__media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    padding: 0;
    margin: 0;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.branding-reference-product__media--open-modal {
    cursor: pointer;
}

.branding-reference-product__media--open-modal:hover,
.branding-reference-product__media--open-modal:focus-visible {
    border-color: var(--color-primary);
    outline: none;
}

.branding-reference-product__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.branding-reference-product__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    color: var(--color-text-muted);
}

.branding-reference-product__body {
    flex: 1 1 auto;
    min-width: 0;
}

.branding-reference-product__name {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 600;
    color: var(--card-text);
    line-height: 1.35;
    word-break: break-word;
    transition: color 0.3s ease;
}

.branding-reference-product__meta {
    margin: 0;
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.45;
    transition: color 0.3s ease;
}

.branding-reference-product__niche-link {
    color: var(--color-primary);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed currentColor;
    transition: opacity 0.2s ease;
}

.branding-reference-product__niche-link:hover {
    opacity: 0.85;
}

.branding-reference-product__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--badge-bg-success);
    color: var(--badge-text-success);
    border: 1px solid color-mix(in srgb, var(--badge-text-success) 25%, transparent);
    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Branding Section */
.branding-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 32px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.branding-section__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}

.branding-regen-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
}

.branding-regen-quota {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
    max-width: 320px;
    text-align: right;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.branding-regen-quota--admin {
    font-size: 12px;
    color: var(--color-text-muted);
}

.branding-regen-quota__code {
    font-size: 11px;
    color: var(--card-text);
    background: var(--color-bg-secondary);
    padding: 2px 6px;
    border-radius: 4px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.branding-section__title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 600;
    color: var(--card-text);
    margin: 0;
    transition: color 0.3s ease;
}

/* Brand Names Grid */
.brand-names-grid {
    display: grid;
    /* 5 cartes par ligne (palier desktop par défaut). Les régénérations IA renvoient en
       général 10–12 noms : 5/ligne donne une grille équilibrée (2 lignes pleines à 10
       noms, 2 lignes + 2 cartes à 12). Cf. responsive plus bas pour les écrans plus étroits. */
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 24px;
}

.brand-name-card {
    position: relative;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.brand-name-card:hover {
    transform: translateY(-2px);
}

.brand-name-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.brand-name-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 8px;
    transition: all 0.3s ease;
}

.brand-name-radio:checked + .brand-name-content {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
}

.brand-name-text {
    font-size: 16px;
    font-weight: 500;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.brand-name-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--card-border);
    background: var(--card-bg);
    color: transparent;
    transition: all 0.3s ease;
}

.brand-name-radio:checked + .brand-name-content .brand-name-check {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: white;
}

/* Custom Brand Name Input */
.brand-name-custom {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--card-border);
}

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

/* Generated Images Grid */
.generated-images-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 600px;
    margin: 0 auto;
}

.generated-image-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.generated-image-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.generated-image {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: auto;
    object-fit: cover;
    display: block;
}

.generated-image-label {
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--card-text);
    margin: 0;
    text-align: center;
    transition: color 0.3s ease;
}

.branding-generated-images-disclaimer {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 0 0;
    padding: 12px 14px;
    font-size: 13px;
    line-height: 1.45;
    color: var(--color-text-muted);
    background: var(--color-bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.branding-generated-images-disclaimer__icon {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-info);
    transition: color 0.3s ease;
}

/* Branding Actions */
.branding-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 32px;
    /* Espace explicite sous les CTA "Retour" / "Continuer vers le thème" : sans ça les boutons
       paraissent collés au bord du conteneur flex parent (le `padding-bottom: 100px` de
       `.branding-page` peut être consommé par le layout flex `.products-page--branding-flow`
       et n'est pas une garantie suffisante). Cette marge bottom prime sur tout le reste. */
    margin-bottom: 48px;
    flex-wrap: wrap;
}

.branding-actions .btn {
    display: flex;
    align-items: center;
    gap: 8px;
}

.branding-actions__regen-admin {
    margin-left: auto;
    margin-right: 8px;
}

/* Responsive */
@media (max-width: 1280px) {
    .brand-names-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 1024px) {
    .brand-names-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .branding-reference-product__row {
        flex-wrap: wrap;
    }

    .branding-reference-product__badge {
        margin-left: auto;
    }
}

@media (max-width: 768px) {
    .branding-section {
        padding: 20px;
    }

    .brand-names-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .generated-images-grid {
        grid-template-columns: 1fr;
    }

    .branding-actions {
        flex-direction: column;
    }

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

    .branding-reference-product__row {
        gap: 12px;
    }

    .branding-reference-product__body {
        flex: 1 1 100%;
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .brand-names-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================================
      GÉNÉRATION DE BOUTIQUE — CUSTOMIZE PAGE (PHASE 3)
      ================================================== */

.customize-page {
    width: 100%;
    height: calc(100vh - 180px);
    overflow: hidden;
}

.customize-layout {
    display: flex;
    height: 100%;
    gap: 0;
}

/* ===== SECTION GAUCHE : SIDEBAR ===== */
.customize-sidebar {
    width: 400px;
    flex-shrink: 0;
    background: var(--card-bg);
    border-right: 1px solid var(--card-border);
    overflow-y: auto;
    padding: 24px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

/* Accordéons */
.customize-section {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.customize-section__toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px;
    background: var(--card-bg);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.customize-section__toggle:hover {
    background: var(--color-bg-hover);
}

.customize-section__toggle-left {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 16px;
    font-weight: 600;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.customize-section__toggle-icon {
    color: var(--color-text-muted);
    transition: transform 0.3s ease;
}

.customize-section.active .customize-section__toggle-icon {
    transform: rotate(180deg);
}

.customize-section__content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.customize-section.active .customize-section__content {
    max-height: 1000px;
    padding: 16px;
    border-top: 1px solid var(--card-border);
}

/* Form Groups */
.customize-section .form-group {
    margin-bottom: 16px;
}

.customize-section .form-group:last-child {
    margin-bottom: 0;
}

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

/* Theme Selector */
.theme-selector {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.theme-option {
    position: relative;
    cursor: pointer;
    border: 2px solid var(--card-border);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.3s ease;
    background: var(--card-bg);
}

.theme-option:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.theme-option.active {
    border-color: var(--color-primary);
    background: rgba(59, 130, 246, 0.05);
}

.theme-radio {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.theme-option__content {
    display: flex;
    align-items: center;
    gap: 12px;
}

.theme-option__preview {
    width: 48px;
    height: 48px;
    border-radius: 6px;
    background: var(--color-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.theme-option__preview-image {
    font-size: 24px;
}

.theme-option__info {
    flex: 1;
}

.theme-option__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--card-text);
    margin-bottom: 4px;
}

.theme-option__desc {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0;
}

.theme-option__check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s ease;
}

.theme-option.active .theme-option__check {
    opacity: 1;
    transform: scale(1);
}

.theme-option--disabled {
    opacity: 0.5;
    cursor: not-allowed !important;
}

.theme-option--disabled:hover {
    transform: none !important;
    border-color: var(--card-border) !important;
    box-shadow: none !important;
}

.theme-option__preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
}

/* Color Picker */
.color-picker-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
}

.color-input {
    width: 60px;
    height: 40px;
    padding: 4px;
    border: 1px solid var(--input-border);
    border-radius: 6px;
    cursor: pointer;
    transition: border-color 0.3s ease;
}

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

.color-text {
    flex: 1;
    font-family: "Courier New", monospace;
    font-size: 14px;
}

/* Customize Actions */
.customize-actions {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--card-border);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.customize-actions .btn {
    width: 100%;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ===== SECTION DROITE : PREVIEW IFRAME ===== */
.customize-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: #f3f4f6;
    transition: background-color 0.3s ease;
    position: relative;
}

[data-theme="dark"] .customize-preview {
    background: #1f2937;
}

.customize-preview__header {
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
    padding: 12px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    transition: all 0.3s ease;
}

/* Page switcher (Accueil / Produit) */
.preview-page-switcher {
    display: flex;
    gap: 4px;
    background: var(--color-bg-secondary);
    padding: 4px;
    border-radius: 8px;
}

.preview-page-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preview-page-btn:hover {
    background: var(--color-bg-hover);
    color: var(--card-text);
}

.preview-page-btn.active {
    background: var(--card-bg);
    color: var(--card-text);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

/* Reload button */
.preview-reload-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: transparent;
    border: 1px solid var(--card-border);
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.preview-reload-btn:hover {
    background: var(--color-bg-hover);
    color: var(--card-text);
}

/* Loading overlay */
.preview-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--color-bg-secondary);
    gap: 12px;
    font-size: 14px;
    color: var(--color-text-muted);
    z-index: 10;
    pointer-events: none;
}

.preview-loading__spinner {
    width: 32px;
    height: 32px;
    border: 3px solid var(--card-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: preview-spin 0.8s linear infinite;
}

@keyframes preview-spin {
    to {
        transform: rotate(360deg);
    }
}

/* Device Switcher */
.device-switcher {
    display: flex;
    gap: 8px;
    background: var(--color-bg-secondary);
    padding: 4px;
    border-radius: 8px;
    transition: background-color 0.3s ease;
}

.device-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: all 0.3s ease;
}

.device-btn:hover {
    background: var(--color-bg-hover);
    color: var(--card-text);
}

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

/* Preview Content */
.customize-preview__content {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 32px;
    overflow: auto;
    transition: all 0.3s ease;
}

.customize-preview__content iframe {
    background: white;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

/* Device Sizes */
.preview-desktop iframe {
    width: 100%;
    height: 100%;
    min-height: 800px;
}

.preview-tablet iframe {
    width: 768px;
    height: 1024px;
}

.preview-mobile iframe {
    width: 375px;
    height: 667px;
}

/* Responsive Customize Page */
@media (max-width: 1200px) {
    .customize-sidebar {
        width: 350px;
    }
}

@media (max-width: 992px) {
    .customize-layout {
        flex-direction: column;
    }

    .customize-sidebar {
        width: 100%;
        height: auto;
        max-height: 400px;
        overflow-y: auto;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
    }

    .customize-preview {
        flex: 1;
        min-height: 600px;
    }

    .preview-tablet iframe,
    .preview-mobile iframe {
        width: 100%;
        max-width: 500px;
    }
}

/* ==================================================
      GÉNÉRATION DE BOUTIQUE — SPINNER (GLOBAL)
      ================================================== */
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.spinner--dark {
    border-color: rgba(0, 0, 0, 0.2);
    border-top-color: var(--color-primary);
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ==================================================
      GÉNÉRATION DE BOUTIQUE — SHOPIFY CONNECT PAGE
      ================================================== */
.shopify-connect-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 200px);
    padding: 40px 24px;
}

.shopify-connect-card {
    max-width: 600px;
    width: 100%;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 16px;
    padding: 48px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
}

.shopify-connect-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.shopify-connect-title {
    font-size: 28px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 16px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.shopify-connect-description {
    font-size: 16px;
    text-align: center;
    color: var(--color-text-muted);
    margin-bottom: 32px;
    line-height: 1.6;
    transition: color 0.3s ease;
}

.shopify-connect-form {
    margin-bottom: 32px;
}

.shopify-store-input-wrapper {
    display: flex;
    align-items: center;
    gap: 0;
}

.shopify-store-input {
    flex: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border-right: none;
}

.shopify-store-suffix {
    display: flex;
    align-items: center;
    padding: 0 16px;
    height: 46px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--input-border);
    border-left: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    font-size: 14px;
    color: var(--color-text-muted);
    white-space: nowrap;
    transition: all 0.3s ease;
}

.shopify-permissions-info {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 32px;
}

[data-theme="dark"] .shopify-permissions-info {
    background: rgba(59, 130, 246, 0.1);
    border-color: rgba(59, 130, 246, 0.3);
}

.shopify-permissions-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 12px;
    color: #0369a1;
}

[data-theme="dark"] .shopify-permissions-title {
    color: #60a5fa;
}

.shopify-permissions-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.shopify-permissions-list li {
    font-size: 14px;
    color: #0c4a6e;
    margin-bottom: 8px;
    padding-left: 8px;
}

[data-theme="dark"] .shopify-permissions-list li {
    color: #93c5fd;
}

.shopify-permissions-list li:last-child {
    margin-bottom: 0;
}

.shopify-connect-actions {
    display: flex;
    gap: 12px;
}

.shopify-connect-actions .btn {
    flex: 1;
    justify-content: center;
    display: flex;
    align-items: center;
    gap: 8px;
}

.shopify-help-note {
    text-align: center;
    padding-top: 24px;
    border-top: 1px solid var(--card-border);
    transition: border-color 0.3s ease;
}

.shopify-help-note strong {
    display: block;
    font-size: 15px;
    margin-bottom: 8px;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.shopify-help-note p {
    font-size: 14px;
    margin: 0;
}

.shopify-help-note a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.shopify-help-note a:hover {
    text-decoration: underline;
}

/* Responsive Shopify Connect */
@media (max-width: 768px) {
    .shopify-connect-card {
        padding: 32px 24px;
    }

    .shopify-connect-title {
        font-size: 24px;
    }

    .shopify-connect-actions {
        flex-direction: column;
    }

    .shopify-store-input-wrapper {
        flex-direction: column;
        align-items: stretch;
    }

    .shopify-store-input {
        border-radius: 8px;
        border-right: 1px solid var(--input-border);
    }

    .shopify-store-suffix {
        border-radius: 8px;
        border-left: 1px solid var(--input-border);
        height: auto;
        padding: 12px 16px;
        justify-content: center;
    }
}

/* ===================================
      ADMIN SWITCH MODAL
      =================================== */

.admin-switch-section {
    margin-bottom: 20px;
}

.admin-switch-section:last-child {
    margin-bottom: 0;
}

.admin-switch-section__title {
    font-size: 13px;
    font-weight: 600;
    color: var(--color-text-dark);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.admin-switch-plans {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-switch-plan-option {
    display: flex;
    align-items: center;
    padding: 12px;
    background: var(--card-bg);
    border: 2px solid var(--card-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.admin-switch-plan-option:hover {
    border-color: var(--color-primary);
    background: var(--color-bg-hover);
}

.admin-switch-plan-option input[type="radio"] {
    margin-right: 12px;
    cursor: pointer;
}

.admin-switch-plan-option input[type="radio"]:checked {
    accent-color: var(--color-primary);
}

.admin-switch-plan-option
    input[type="radio"]:checked
    ~ .admin-switch-plan-info {
    color: var(--color-primary);
}

.admin-switch-plan-option:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background: rgba(37, 99, 235, 0.05);
}

.admin-switch-plan-info {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.admin-switch-plan-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--card-text);
}

.admin-switch-plan-price {
    font-size: 13px;
    font-weight: 500;
    color: var(--color-text-light);
}

/* Dark Mode */
[data-theme="dark"] .admin-switch-plan-option {
    background: var(--card-bg);
    border-color: var(--card-border);
}

[data-theme="dark"] .admin-switch-plan-option:hover {
    border-color: var(--color-primary);
    background: var(--dropdown-hover);
}

[data-theme="dark"] .admin-switch-plan-option:has(input[type="radio"]:checked) {
    border-color: var(--color-primary);
    background: rgba(37, 99, 235, 0.15);
}

.admin-switch-current-plan {
    font-size: 13px;
    color: var(--color-text-light);
    margin-bottom: 14px;
    padding: 8px 12px;
    background: var(--color-bg-hover);
    border-radius: 6px;
    border-left: 3px solid var(--color-primary);
}

.admin-switch-current-plan strong {
    color: var(--color-text-dark);
}

.admin-switch-plan-option--active {
    border-color: var(--color-primary) !important;
    background: rgba(37, 99, 235, 0.05) !important;
}

[data-theme="dark"] .admin-switch-plan-option--active {
    background: rgba(37, 99, 235, 0.15) !important;
}

/* ===================================
      MODAL DE PROGRESSION GÉNÉRATION
      =================================== */
.generation-steps {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.generation-step {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    transition: all 0.3s ease;
    opacity: 0.4;
}

.generation-step__icon {
    position: relative;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.generation-step__spinner {
    width: 24px;
    height: 24px;
    border: 3px solid var(--color-border);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.generation-step__check {
    color: var(--color-success);
}

.generation-step__content {
    flex: 1;
}

.generation-step__title {
    font-size: 15px;
    font-weight: 600;
    color: var(--card-text);
    margin-bottom: 0.25rem;
}

.generation-step__desc {
    font-size: 13px;
    color: var(--color-text-light);
    margin: 0;
}

.generation-progress-bar {
    width: 100%;
    height: 8px;
    background: var(--color-bg-secondary);
    border-radius: 4px;
    overflow: hidden;
}

.generation-progress-bar__fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-info));
    border-radius: 4px;
    width: 0%;
    transition: width 0.5s ease;
}

.generation-progress-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-light);
}

/* Dark Mode */
[data-theme="dark"] .generation-step {
    background: var(--card-bg);
    border-color: var(--card-border);
}

[data-theme="dark"] .generation-step__spinner {
    border-color: var(--card-border);
    border-top-color: var(--color-primary);
}

[data-theme="dark"] .generation-progress-bar {
    background: var(--color-bg-secondary);
}

/* Meta Pixel (noscript fallback) */
.meta-pixel-noscript-img {
    display: none;
}

/* ============================================
   BUY CREDITS PAGE (/buy-credits)
   Refonte propre — Mai 2026
   ============================================ */

/* --- Récap des crédits actuels --- */
.credits-breakdown {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    align-items: center;
    gap: 24px;
    padding: 24px 16px;
    background: var(--color-bg-light);
    border: 1px solid var(--card-border);
    border-radius: 14px;
}

[data-theme="dark"] .credits-breakdown {
    background: rgba(15, 23, 42, 0.4);
}

.credits-breakdown__item {
    text-align: center;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.credits-breakdown__value {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.1;
    color: var(--color-text);
    letter-spacing: -0.5px;
}

.credits-breakdown__value--negative {
    color: var(--color-danger);
}

.credits-breakdown__label {
    font-size: 14px;
    font-weight: 600;
    color: var(--card-text);
}

.credits-breakdown__description {
    font-size: 12px;
    color: var(--color-text-light);
}

.credits-breakdown__divider {
    font-size: 26px;
    font-weight: 300;
    color: var(--color-text-muted);
    line-height: 1;
    user-select: none;
}

.credits-breakdown__item--total .credits-breakdown__value {
    font-size: 44px;
    color: var(--color-primary);
    font-weight: 800;
}

.credits-breakdown__item--total .credits-breakdown__label {
    font-size: 15px;
    color: var(--color-primary);
}

@media (max-width: 768px) {
    .credits-breakdown {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 20px 12px;
    }

    .credits-breakdown__divider {
        font-size: 20px;
    }

    .credits-breakdown__value {
        font-size: 30px;
    }

    .credits-breakdown__item--total .credits-breakdown__value {
        font-size: 36px;
    }
}

/* --- Section "Acheter des crédits supplémentaires" --- */
/* Ne pas centrer verticalement les cards : la section ne doit pas étirer artificiellement */
.section-card--credits-packs {
    max-width: 1100px;
    margin-left: auto;
    margin-right: auto;
}

.section-card--credits-packs .subscription-plans {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
    margin-top: 32px;
    margin-bottom: 4px;
    max-width: none;
    align-items: stretch;
    /* Marge en haut pour laisser respirer le badge "Le plus populaire" qui dépasse */
    padding-top: 14px;
}

@media (max-width: 1024px) {
    .section-card--credits-packs .subscription-plans {
        grid-template-columns: 1fr;
        gap: 24px;
    }
}

.section-card--credits-packs .subscription-plan {
    padding: 28px 26px;
    gap: 18px;
}

/* Sur la page crédits, on n'agrandit PAS la carte populaire pour garder l'alignement propre */
.section-card--credits-packs .subscription-plan--popular {
    transform: none;
}

@media (min-width: 768px) {
    .section-card--credits-packs .subscription-plan--popular {
        transform: none;
    }

    .section-card--credits-packs .subscription-plan--popular:hover {
        transform: translateY(-8px);
    }
}

/* Ligne titre + badge -X% */
.subscription-plan__title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.subscription-plan__title-row--credit-pack .subscription-plan__title {
    margin-bottom: 0;
    font-size: 22px;
}

.credit-pack__discount-badge {
    display: inline-flex;
    align-items: center;
    background: rgba(16, 185, 129, 0.12);
    color: var(--color-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
    padding: 4px 10px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

[data-theme="dark"] .credit-pack__discount-badge {
    background: rgba(16, 185, 129, 0.18);
    color: #34d399;
    border-color: rgba(52, 211, 153, 0.4);
}

/* Bloc prix : prix principal + ligne secondaire (X crédits / Y € par crédit) */
.subscription-plan__price--credit-pack {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    align-items: flex-start;
}

.credit-pack__price-secondary {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 13px;
    color: var(--color-text-light);
    line-height: 1.4;
}

.credit-pack__credits-line {
    font-weight: 600;
    color: var(--card-text);
    font-size: 14px;
}

.credit-pack__per-credit-line {
    font-size: 12px;
    color: var(--color-text-muted);
}

/* Form wrapper pour le bouton CTA */
.subscription-plan__form {
    margin: 0;
    width: 100%;
    align-self: stretch;
}

/* Description optionnelle sous le bouton */
.section-card--credits-packs .subscription-plan__description {
    margin-top: 14px;
    margin-bottom: 0;
    font-size: 13px;
    color: var(--color-text-light);
}

/* --- Section "Pourquoi acheter des crédits supplémentaires ?" --- */
.section-card--credits-why .info-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
}

@media (max-width: 900px) {
    .section-card--credits-why .info-grid {
        grid-template-columns: 1fr;
    }
}

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

.info-item {
    background: var(--color-bg-light);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        transform 0.2s ease;
}

[data-theme="dark"] .info-item {
    background: rgba(15, 23, 42, 0.4);
}

.info-item:hover {
    border-color: rgba(37, 99, 235, 0.3);
    transform: translateY(-2px);
}

.info-item h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--card-text);
    margin: 0 0 8px 0;
    line-height: 1.4;
}

.info-item p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-text-light);
    margin: 0;
}

/* ===================================
   Section "Combien coûte chaque action ?"
   =================================== */
.section-card--credits-cost .credits-cost-card__rate {
    display: inline-block;
    margin-top: 8px;
    font-size: 13px;
    color: var(--color-text-light);
}

.credits-cost-card__table-wrapper {
    overflow-x: auto;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--color-bg-light);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

[data-theme="dark"] .credits-cost-card__table-wrapper {
    background: rgba(15, 23, 42, 0.4);
}

.credits-cost-card__table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.credits-cost-card__table thead tr {
    background: rgba(37, 99, 235, 0.06);
    border-bottom: 1px solid var(--card-border);
}

[data-theme="dark"] .credits-cost-card__table thead tr {
    background: rgba(37, 99, 235, 0.12);
}

.credits-cost-card__table th {
    padding: 14px 18px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-light);
}

.credits-cost-card__table th.credits-cost-card__col-credits,
.credits-cost-card__table th.credits-cost-card__col-euros {
    text-align: right;
    white-space: nowrap;
}

.credits-cost-card__table tbody tr {
    border-bottom: 1px solid var(--card-border);
    transition: background-color 0.2s ease;
}

.credits-cost-card__table tbody tr:last-child {
    border-bottom: none;
}

.credits-cost-card__table tbody tr:hover {
    background: rgba(37, 99, 235, 0.04);
}

[data-theme="dark"] .credits-cost-card__table tbody tr:hover {
    background: rgba(37, 99, 235, 0.08);
}

.credits-cost-card__table td {
    padding: 14px 18px;
    color: var(--card-text);
    vertical-align: middle;
}

.credits-cost-card__table td.credits-cost-card__col-credits,
.credits-cost-card__table td.credits-cost-card__col-euros {
    text-align: right;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.credits-cost-card__table td.credits-cost-card__col-credits strong {
    font-size: 16px;
    color: var(--color-primary);
}

.credits-cost-card__table td.credits-cost-card__col-euros {
    color: var(--color-text-light);
    font-size: 13px;
}

.credits-cost-card__action {
    display: flex;
    align-items: center;
    gap: 12px;
}

.credits-cost-card__icon {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--color-primary);
}

.credits-cost-card__icon svg {
    width: 18px;
    height: 18px;
}

.credits-cost-card__icon--title {
    background: rgba(59, 130, 246, 0.12);
    color: #3b82f6;
}

.credits-cost-card__icon--description {
    background: rgba(139, 92, 246, 0.12);
    color: #8b5cf6;
}

.credits-cost-card__icon--image {
    background: rgba(16, 185, 129, 0.12);
    color: #10b981;
}

.credits-cost-card__icon--images {
    background: rgba(245, 158, 11, 0.12);
    color: #f59e0b;
}

.credits-cost-card__icon--full {
    background: rgba(37, 99, 235, 0.15);
    color: var(--color-primary);
}

.credits-cost-card__action-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.credits-cost-card__action-name {
    font-weight: 600;
    color: var(--card-text);
    font-size: 14px;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.credits-cost-card__action-desc {
    font-size: 12px;
    color: var(--color-text-light);
}

.credits-cost-card__badge {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 999px;
    line-height: 1.4;
}

.credits-cost-card__row--highlight {
    background: rgba(37, 99, 235, 0.04);
}

[data-theme="dark"] .credits-cost-card__row--highlight {
    background: rgba(37, 99, 235, 0.1);
}

.credits-cost-card__row--highlight:hover {
    background: rgba(37, 99, 235, 0.08) !important;
}

[data-theme="dark"] .credits-cost-card__row--highlight:hover {
    background: rgba(37, 99, 235, 0.16) !important;
}

.credits-cost-card__examples {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
}

.credits-cost-card__example {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 14px 16px;
    background: var(--color-bg-light);
    border: 1px dashed var(--card-border);
    border-radius: 10px;
    font-size: 13px;
    flex-wrap: wrap;
}

[data-theme="dark"] .credits-cost-card__example {
    background: rgba(15, 23, 42, 0.4);
}

.credits-cost-card__example-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.credits-cost-card__example-label {
    color: var(--color-text-light);
    font-weight: 500;
}

.credits-cost-card__example-result {
    color: var(--card-text);
    font-weight: 600;
}

@media (max-width: 720px) {
    .credits-cost-card__table th,
    .credits-cost-card__table td {
        padding: 12px 12px;
    }

    .credits-cost-card__col-euros {
        display: none;
    }

    .credits-cost-card__icon {
        width: 32px;
        height: 32px;
    }

    .credits-cost-card__icon svg {
        width: 16px;
        height: 16px;
    }

    .credits-cost-card__action-name {
        font-size: 13px;
    }

    .credits-cost-card__action-desc {
        font-size: 11px;
    }

    .credits-cost-card__examples {
        grid-template-columns: 1fr;
    }
}