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

/* La sidebar est toujours sombre : plus de filtre d'inversion (il noircissait la tuile
   blanche du logo). Le texte blanc vient de la variante oneclickbrand-logo-dark.svg. */

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

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

/* Encart de montée en périodicité (lot 3) : même gabarit que la carte d'essai, en bleu primaire */
.sidebar__promo-upsell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 6px;
    padding: 10px;
    background: rgba(37, 99, 235, 0.08);
    border: 1px solid rgba(37, 99, 235, 0.18);
    border-radius: 6px;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

[data-theme="dark"] .sidebar__promo-upsell {
    background: rgba(37, 99, 235, 0.16);
    border-color: rgba(37, 99, 235, 0.32);
}

.sidebar__promo-upsell-title {
    margin: 0;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--sidebar-text);
}

.sidebar__promo-upsell-saving {
    margin: 0;
    font-size: 11.5px;
    line-height: 1.3;
    color: var(--color-text-muted);
}

.sidebar__promo-upsell-form {
    margin: 0;
}

.sidebar__promo-upsell-cta {
    display: block;
    width: 100%;
    padding: 7px 10px;
    border: none;
    border-radius: 6px;
    background: var(--color-primary);
    color: #ffffff;
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    line-height: 1.3;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.sidebar__promo-upsell-cta:hover {
    background: #1d4ed8;
}

/* Mode support (impersonation) : commande éteinte, mais toujours à sa place */
.sidebar__promo-upsell-cta--off,
.sidebar__promo-upsell-cta--off:hover {
    background: var(--color-primary);
    opacity: 0.5;
    cursor: not-allowed;
}

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

/* Accueil personnalisé (carte #360) : « Heureux de te voir » noir en clair, blanc en sombre ; prénom en bleu */
.hero__title--welcome {
    color: var(--card-text);
    margin-bottom: 0;
    transition: color 0.3s ease;
}

.hero__title-name {
    color: var(--color-primary);
}

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

/* ===================================
         ACCUEIL /home — maquette de Luca (carte #360, 08/10/2026)
         Tout est préfixé .dashboard--home / home-* : .hero, .action-plan et .checklist servent ailleurs.
         =================================== */
.dashboard--home {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    /* Pleine largeur de la zone de contenu, comme les autres pages : les lumières couvrent tout l'écran (pas de bandes grises sur les côtés) */
    width: 100%;
    padding-top: 3.5rem;
    /* Hauteur = son contenu : avec flex 1 1 0% de .dashboard et l'overflow hidden des lumières, le bloc était écrasé
       à la hauteur de .main-content et coupait la page (plus de scroll sur mobile, 08/10/2026) */
    flex: 1 0 auto;
}

/* Lumières bleues floues qui dérivent derrière l'accueil */
.home-lights {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.home-lights span {
    position: absolute;
    width: 70%;
    aspect-ratio: 1;
    border-radius: 50%;
    filter: blur(45px);
    background: radial-gradient(circle, rgba(67, 137, 255, 0.21), transparent 65%);
    animation: home-lights-drift 9s ease-in-out infinite alternate;
}

.home-lights span:first-child {
    top: -22%;
    left: -22%;
}

.home-lights span:nth-child(2) {
    right: -25%;
    top: 5%;
    animation-delay: -4s;
    background: radial-gradient(circle, rgba(52, 100, 250, 0.19), transparent 65%);
}

.home-lights span:nth-child(3) {
    bottom: -45%;
    left: 25%;
    animation-delay: -7s;
}

@keyframes home-lights-drift {
    from {
        transform: translate(-10%, -10%) scale(0.85);
    }
    to {
        transform: translate(30%, 25%) scale(1.25);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-lights span {
        animation: none;
    }
}

.home-welcome {
    text-align: center;
}

.home-welcome__eyebrow {
    color: var(--color-primary);
    font-size: 11px;
    font-weight: 650;
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* « Heureux de te voir » : noir en clair, blanc en sombre (var(--card-text)), prénom en bleu */
.dashboard--home .hero__title--welcome {
    font-size: clamp(34px, 5.6vw, 60px);
    line-height: 1.12;
    letter-spacing: -2.5px;
    font-weight: 750;
    margin: 18px 0 16px;
}

.home-welcome__subtitle {
    color: var(--color-text-light);
    font-size: 15px;
    line-height: 1.6;
}

/* Boîte « Ton assistant OneClickBrand » : la question part dans le chatbot d'aide */
.home-assistant {
    max-width: 740px;
    margin: 30px auto 0;
    padding: 20px;
    text-align: left;
    background-color: var(--card-bg);
    border: 1px solid rgba(82, 133, 255, 0.4);
    border-radius: 20px;
    box-shadow: 0 12px 55px rgba(36, 101, 255, 0.07);
}

.home-assistant__label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--color-primary);
}

.home-assistant__label-icon {
    width: 16px;
    height: 16px;
}

.home-assistant__row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
}

.home-assistant__input {
    width: 100%;
    min-width: 0;
    padding: 10px 0;
    border: 0;
    outline: none;
    background: transparent;
    color: var(--card-text);
    font: inherit;
    font-size: 16px;
}

.home-assistant__input::placeholder {
    color: var(--color-text-muted);
}

.home-assistant__send {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 12px;
    background-color: var(--color-primary);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.2s ease;
}

.home-assistant__send:hover {
    opacity: 0.9;
}

.home-assistant__send-icon {
    width: 18px;
    height: 18px;
}

.home-suggestions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 16px;
}

.home-suggestions__chip {
    padding: 9px 14px;
    border: 1px solid var(--card-border);
    border-radius: 30px;
    background-color: var(--card-bg);
    color: var(--color-text-light);
    font: inherit;
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.home-suggestions__chip:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Plan d'action de l'accueil : lignes séparées par un filet, case numérotée */
.action-plan--home {
    margin-top: 1.5rem;
    border-radius: 22px;
    padding: 28px;
}

.action-plan__title-wrapper--stacked {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.action-plan--home .action-plan__title {
    font-size: 21px;
    letter-spacing: -0.5px;
    color: var(--card-text);
}

.action-plan__lead {
    font-size: 13px;
    color: var(--color-text-light);
}

.action-plan--home .action-plan__progress {
    width: 135px;
}

.action-plan--home .action-plan__progress-text {
    font-size: 12px;
}

.action-plan--home .action-plan__progress-bar {
    width: 100%;
    height: 5px;
    overflow: hidden;
}

.action-plan--home .action-plan__progress-dot {
    display: none;
}

.action-plan--home .checklist {
    gap: 0;
}

.action-plan--home .checklist__item {
    gap: 16px;
    padding: 20px 0;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--card-border);
    border-radius: 0;
}

.action-plan--home .checklist__item:hover {
    box-shadow: none;
}

.action-plan--home .checklist__item--completed .checklist__title {
    color: var(--color-text-light);
}

.action-plan--home .checklist__checkbox-label {
    width: 30px;
    height: 30px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background-color: var(--color-bg-light);
}

.checklist__number {
    font-size: 12px;
    color: var(--color-text-muted);
}

.action-plan--home .checklist__checkbox:checked + .checklist__checkbox-label .checklist__number {
    display: none;
}

.action-plan--home .checklist__checkbox:checked + .checklist__checkbox-label::after {
    left: 11px;
    top: 7px;
}

.action-plan--home .checklist__title {
    font-size: 14px;
    font-weight: 650;
    margin-bottom: 6px;
}

.action-plan--home .checklist__description {
    font-size: 12px;
}

.action-plan--home .checklist__item .btn {
    white-space: nowrap;
    border-radius: 9px;
    font-size: 12px;
}

.checklist__action-arrow {
    width: 14px;
    height: 14px;
}

@media (max-width: 768px) {
    .dashboard--home {
        padding-top: 2.5rem;
    }

    .dashboard--home .hero__title--welcome {
        letter-spacing: -1.5px;
    }

    .action-plan--home {
        padding: 20px;
    }

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

    .action-plan--home .action-plan__progress {
        width: 100%;
    }

    .action-plan--home .checklist__item {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 12px;
    }

    .action-plan--home .checklist__content {
        flex-basis: calc(100% - 46px);
    }

    .action-plan--home .checklist__item .btn {
        margin-left: 42px;
        width: auto;
        white-space: normal;
    }

    .home-suggestions__chip {
        min-height: 44px;
    }
}

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

/* ===================================
         PRODUCTS GRID (Card View)
         =================================== */

.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
         =================================== */


@media (max-width: 1024px) {
    .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;
    }

    .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) {
    .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;
    /* Écart icône / texte (remplace l'ancien style="margin-right" posé dans la vue) */
    gap: 8px;
    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 */
/* Zone Tutoriels (carte #360) : grille de cartes vidéo, lecteur Loom dans la modale tutorialModal */
.tutorial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 24px;
}

.tutorial-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 12px;
    transition: background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.tutorial-card:not(.tutorial-card--soon):hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-2px);
}

.tutorial-card__media {
    position: relative;
    display: block;
    width: 100%;
    padding: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    background: var(--color-bg-secondary);
    aspect-ratio: 16 / 9;
    cursor: pointer;
}

.tutorial-card--soon .tutorial-card__media {
    cursor: default;
}

.tutorial-card__thumbnail {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tutorial-card--soon .tutorial-card__thumbnail {
    filter: grayscale(0.6) brightness(0.6);
}

.tutorial-card__thumbnail--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-text-muted);
}

.tutorial-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: #ffffff;
    transform: translate(-50%, -50%);
    box-shadow: var(--shadow-lg);
    transition: transform 0.2s ease;
}

.tutorial-card__media:hover .tutorial-card__play {
    transform: translate(-50%, -50%) scale(1.1);
}

.tutorial-card__badge {
    position: absolute;
    top: 50%;
    left: 50%;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--color-primary);
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
}

.tutorial-card__title {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.tutorial-player {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000000;
}

.tutorial-player__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.tutorial-modal__body {
    padding: 16px 20px 20px;
}

.tutorial-modal__title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--card-text);
}

.tutorial-copy {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--color-bg-secondary);
}

.tutorial-copy__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.tutorial-copy__label {
    font-weight: 600;
    color: var(--card-text);
}

.tutorial-admin-thumbnail {
    display: block;
    width: 160px;
    margin-bottom: 8px;
    border-radius: 6px;
    aspect-ratio: 16 / 9;
    object-fit: cover;
}

.tutorial-copy__text {
    margin: 0;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--card-text);
}

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

/* Sortie de secours quand la sidebar est masquée (étapes 3 et 4 de la génération
   de boutique). Le lien est rendu par le layout sur toutes les pages mais reste
   invisible tant que la sidebar est là : elle porte déjà « Tableau de bord ».
   Le hamburger n'apparaissant qu'en dessous de 768px, sans ce lien le desktop
   n'avait plus aucun retour possible. */
.header__home-link {
    display: none;
}

body.hide-sidebar .header {
    justify-content: flex-start;
    gap: var(--spacing-lg);
}

body.hide-sidebar .header .header__right {
    margin-left: auto;
}

body.hide-sidebar .header__home-link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    flex-shrink: 0;
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid var(--header-border);
    border-radius: var(--border-radius-md);
    background-color: transparent;
    color: var(--header-text);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    white-space: nowrap;
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        color 0.2s ease;
}

body.hide-sidebar .header__home-link:hover {
    background-color: var(--color-bg-light);
    border-color: var(--color-primary);
    color: var(--color-primary);
}

body.hide-sidebar .header__home-link svg {
    flex-shrink: 0;
}

/* Écrans étroits : on garde l'icône seule pour ne pas pousser le titre de la page. */
@media (max-width: 768px) {
    body.hide-sidebar .header {
        gap: var(--spacing-sm);
    }

    body.hide-sidebar .header__home-link {
        padding: var(--spacing-sm);
    }

    body.hide-sidebar .header__home-link-text {
        display: none;
    }
}

/* 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-shop-creator {
    background-color: #0ea5e9;
}

/* Rôle SAV (carte #359) */
.badge-sav {
    background-color: #f59e0b;
}

/* Rôle Responsable SAV (carte #373) */
.badge-sav-manager {
    background-color: #d97706;
}

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

/* Action indisponible sur cette ligne (fiche admin vue par un Responsable SAV, carte #373) :
   elle garde sa place pour que la colonne reste alignée, grisée, son motif en infobulle. */
.btn-action--off,
.btn-action--off:hover {
    opacity: 0.4;
    cursor: not-allowed;
}

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

/* PDF Download Button (floating) */
.pdf-download-button {
    position: fixed;
    bottom: 24px;
    right: 24px;
    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: 24px;
        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;
    }
}


/* Admin — ancien chatbot (données historiques) */
.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) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

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

    .info-banner .btn {
        width: 100%;
    }
}

.info-banner--warning {
    background: #fffbeb;
    border: 1px solid #fcd34d;
    margin-top: 24px;
    border-radius: 8px;
}

[data-theme="dark"] .info-banner--warning {
    background: rgba(245, 158, 11, 0.15);
    border-color: #f59e0b;
}

.info-banner--info {
    background: #eff6ff;
    border: 1px solid #93c5fd;
    border-radius: 8px;
}

[data-theme="dark"] .info-banner--info {
    background: rgba(37, 99, 235, 0.15);
    border-color: #3b82f6;
}

.info-banner--danger {
    background: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: 8px;
}

[data-theme="dark"] .info-banner--danger {
    background: rgba(239, 68, 68, 0.15);
    border-color: #ef4444;
}

.info-banner--warning .info-banner__icon {
    background: transparent;
    color: #d97706;
}

[data-theme="dark"] .info-banner--warning .info-banner__icon {
    color: #fbbf24;
}

.info-banner--info .info-banner__icon {
    background: transparent;
    color: #2563eb;
}

[data-theme="dark"] .info-banner--info .info-banner__icon {
    color: #60a5fa;
}

.info-banner--danger .info-banner__icon {
    background: transparent;
    color: #dc2626;
}

[data-theme="dark"] .info-banner--danger .info-banner__icon {
    color: #f87171;
}

.info-banner--warning .info-banner__title {
    color: #92400e;
}

[data-theme="dark"] .info-banner--warning .info-banner__title {
    color: #fbbf24;
}

.info-banner--info .info-banner__title {
    color: #1e40af;
}

[data-theme="dark"] .info-banner--info .info-banner__title {
    color: #60a5fa;
}

.info-banner--danger .info-banner__title {
    color: #991b1b;
}

[data-theme="dark"] .info-banner--danger .info-banner__title {
    color: #f87171;
}

.info-banner--warning .info-banner__text {
    color: #78350f;
}

[data-theme="dark"] .info-banner--warning .info-banner__text {
    color: #fbbf24;
}

.info-banner--info .info-banner__text {
    color: #1e3a8a;
}

[data-theme="dark"] .info-banner--info .info-banner__text {
    color: #93c5fd;
}

.info-banner--danger .info-banner__text {
    color: #7f1d1d;
}

[data-theme="dark"] .info-banner--danger .info-banner__text {
    color: #fca5a5;
}

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

/* ===================================
         SCRAPLING ADMIN TAB
         =================================== */
.scrapling-status-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.scrapling-status-card,
.scrapling-panel,
.scrapling-proposal {
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background: var(--color-bg-secondary);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.scrapling-status-card {
    min-width: 0;
    padding: var(--spacing-md);
}

.scrapling-status-card__label,
.scrapling-status-card__meta,
.scrapling-panel__subtitle,
.scrapling-flow-list__item span,
.scrapling-proposal__item span {
    color: var(--color-text-light);
}

.scrapling-status-card__label {
    display: block;
    margin-bottom: var(--spacing-xs);
    font-size: var(--font-size-sm);
}

.scrapling-status-card__value {
    display: block;
    margin-bottom: var(--spacing-xs);
    color: var(--card-text);
    font-size: var(--font-size-xl);
    line-height: 1.2;
}

.scrapling-status-card__meta {
    display: block;
    font-size: var(--font-size-xs);
    overflow-wrap: anywhere;
}

.scrapling-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-xl);
}

.scrapling-panel,
.scrapling-proposal {
    min-width: 0;
    padding: var(--spacing-lg);
}

.scrapling-panel__header,
.scrapling-proposal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-lg);
}

.scrapling-panel__title {
    margin: 0 0 var(--spacing-xs) 0;
    color: var(--card-text);
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
}

.scrapling-panel__subtitle {
    margin: 0;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.scrapling-test-form {
    display: grid;
    gap: var(--spacing-md);
}

.scrapling-test-form__button {
    justify-self: flex-start;
}

.scrapling-flow-list {
    display: grid;
    gap: var(--spacing-md);
    margin: 0;
    padding: 0;
    list-style: none;
}

.scrapling-flow-list__item,
.scrapling-proposal__item {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--spacing-sm);
    align-items: flex-start;
}

.scrapling-flow-list__item svg,
.scrapling-proposal__item svg {
    margin-top: 2px;
    color: var(--color-primary);
    flex-shrink: 0;
}

.scrapling-flow-list__item strong,
.scrapling-proposal__item strong {
    display: block;
    color: var(--card-text);
    font-size: var(--font-size-sm);
}

.scrapling-flow-list__item span,
.scrapling-proposal__item span {
    display: block;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

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

@media (max-width: 1100px) {
    .scrapling-status-grid,
    .scrapling-proposal__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .scrapling-layout {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .scrapling-status-grid,
    .scrapling-proposal__grid {
        grid-template-columns: 1fr;
    }

    .scrapling-panel__header,
    .scrapling-proposal__header {
        flex-direction: column;
    }

    .scrapling-test-form__button {
        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 Routes Grid (admin/settings#tests) */
.test-routes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.test-route-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.2s, background-color 0.3s ease, border-color 0.3s ease;
}

.test-route-card:hover {
    border-color: #2563eb;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1);
}

.test-route-card__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

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

.test-route-badge {
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    flex-shrink: 0;
}

.test-route-badge--email {
    background: #dbeafe;
    color: #1e40af;
}

[data-theme="dark"] .test-route-badge--email {
    background: rgba(37, 99, 235, 0.2);
    color: #60a5fa;
}

.test-route-badge--api {
    background: #d1fae5;
    color: #065f46;
}

[data-theme="dark"] .test-route-badge--api {
    background: rgba(16, 185, 129, 0.2);
    color: #34d399;
}

.test-route-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);
    line-height: 1.6;
    margin: 0 0 16px 0;
    transition: color 0.3s ease;
}

.test-route-card__description code {
    background: #fee2e2;
    color: #991b1b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    font-family: 'Courier New', monospace;
}

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

.test-route-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.test-route-card__path {
    font-family: 'Courier New', monospace;
    font-size: 12px;
    color: #6b7280;
    background: #f9fafb;
    border: 1px solid var(--color-border);
    padding: 6px 10px;
    border-radius: 6px;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

[data-theme="dark"] .test-route-card__path {
    background: rgba(255, 255, 255, 0.06);
    color: var(--color-text-light);
}

.test-route-btn {
    padding: 8px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: flex;
    align-items: center;
    transition: all 0.2s;
    white-space: nowrap;
}

.test-route-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.test-route-btn--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;
}

.spinner-inline {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-top-color: white;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

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

    .test-route-card__footer {
        flex-direction: column;
        align-items: stretch;
    }

    .test-route-card__path {
        text-align: center;
    }

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

.credits-info__actions {
    text-align: center;
    margin-top: 1.5rem;
}

.modal-description {
    margin-bottom: 1.5rem;
}

.subscription-canceled-alert {
    margin-top: 2rem;
}

/* Subscription Canceled Banner */
.subscription-canceled-banner {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
    border: 2px solid #f59e0b;
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
    animation: slideIn 0.5s ease-out;
}

/* Subscription Downgrade Banner (variant purple) */
.subscription-canceled-banner--downgrade {
    background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
    border: 2px solid #8b5cf6;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.subscription-canceled-banner--downgrade .subscription-canceled-banner__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);
}

.quota-counter {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.quota-counter__icon {
    flex-shrink: 0;
    color: #f59e0b;
}

.quota-counter__text {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 4px;
    min-width: 0;
}

.quota-counter__label {
    color: var(--color-text-light);
    font-weight: 500;
}

.quota-counter__value {
    color: inherit;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.quota-counter__suffix {
    color: inherit;
}

.quota-counter--card-stat {
    width: 100%;
    justify-content: space-between;
    padding: 16px;
    background: var(--color-bg-secondary);
    border: 1px solid var(--card-border);
    border-radius: 10px;
    color: var(--card-text);
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease,
        color 0.3s ease;
}

.quota-counter--card-stat .quota-counter__text {
    flex: 1 1 auto;
    justify-content: space-between;
}

/* 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__counter {
       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-row {
       display: flex;
       flex-wrap: wrap;
       align-items: center;
       justify-content: center;
       gap: var(--spacing-sm);
       width: 100%;
   }

   .ocs-theme-submit-row .ocs-theme-submit {
       flex: 1 1 16rem;
       min-width: min(100%, 16rem);
   }

   .ocs-theme-submit-quota {
       flex: 0 0 auto;
       min-height: 3rem;
       padding: 0.75rem 1rem;
       background: var(--color-bg-secondary);
       border: 1px solid var(--card-border);
       border-radius: var(--border-radius-lg);
       color: var(--card-text);
       font-size: var(--font-size-sm);
       font-weight: var(--font-weight-medium);
       transition:
           background-color 0.3s ease,
           border-color 0.3s ease,
           color 0.3s ease;
   }

   @media (max-width: 640px) {
       .ocs-theme-submit-row {
           flex-direction: column;
           align-items: stretch;
       }

       .ocs-theme-submit-row .ocs-theme-submit,
       .ocs-theme-submit-row .ocs-theme-submit-quota {
           width: 100%;
       }

       .ocs-theme-submit-row .ocs-theme-submit-quota {
           justify-content: center;
       }
   }

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

/* En-tête sur téléphone (08/10/2026) : la partie droite (crédits, cloche, thème, langue, avatar, menu) faisait 441 px
   pour 375 px d'écran ; le titre passait sous les crédits et le menu sortait de l'écran.
   Titre tronqué, libellé « crédits » masqué (l'icône reste), espacements resserrés. */
@media (max-width: 480px) {
    .header__left {
        min-width: 0;
        overflow: hidden;
    }

    .header__title {
        max-width: 100%;
        min-width: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .header__right {
        gap: 6px;
        min-width: 0;
    }

    .header__right .theme-toggle,
    .header__right .lang-switcher {
        margin-right: 0;
    }

    .header__hamburger {
        margin-left: 4px;
    }

    .header__credits {
        display: flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
    }

    .header__credits-label {
        display: none;
    }
}

/* 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--admin-only {
    border-style: dashed;
    opacity: 0.9;
}

.theme-option__admin-notice {
    font-size: 12px;
    color: #d97706;
    margin: 4px 0 0;
    font-style: italic;
}

.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--price {
    background: rgba(14, 165, 233, 0.12);
    color: #0ea5e9;
}

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

/* ===== Sélecteur de thèmes par familles (Vanguard / Self Made) ===== */
.theme-families { display: flex; flex-direction: column; gap: 12px; }

.theme-family {
    position: relative;
    border: 1px solid var(--color-border, #e5e7eb);
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.theme-family--current { border-color: var(--color-primary, #2563eb); }

.theme-family__header {
    display: flex; align-items: center; gap: 14px;
    width: 100%; padding: 16px; border: 0; background: transparent;
    cursor: pointer; text-align: left; font: inherit; border-radius: 14px;
}
.theme-family--open .theme-family__header { border-radius: 14px 14px 0 0; }
.theme-family__icon {
    position: relative;
    flex: 0 0 48px; width: 48px; height: 48px; border-radius: 12px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff; font-weight: 700; font-size: 22px;
}
.theme-family__icon--vanguard { background: linear-gradient(135deg, #6366f1, #3b82f6); }
.theme-family__icon--selfmade { background: linear-gradient(135deg, #34d399, #10b981); }
.theme-family__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.theme-family__name-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.theme-family__name { font-weight: 700; font-size: 16px; color: var(--color-text, #111827); }
.theme-family__badge {
    position: absolute;
    top: -7px;
    right: -15px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    min-height: 18px;
    padding: 2px 7px;
    border-radius: 999px;
    background: #eef2ff;
    color: #4338ca;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 0 0 3px #fff;
}
.theme-family__desc { font-size: 13px; color: var(--color-text-muted, #6b7280); }
.theme-family__chevron {
    flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--color-text-muted, #6b7280); background: var(--color-bg-muted, #f3f4f6);
    transition: transform .2s ease;
}
.theme-family--current .theme-family__chevron { color: var(--color-primary, #2563eb); }
.theme-family--open .theme-family__chevron { transform: rotate(180deg); }

.theme-family__variants { display: none; padding: 0 12px 12px; flex-direction: column; gap: 8px; background: var(--color-bg-muted, #f8fafc); border-radius: 0 0 14px 14px; }
.theme-family--open .theme-family__variants { display: flex; }

.theme-variant {
    display: flex; align-items: center; gap: 12px;
    padding: 14px; border-radius: 12px; background: #fff;
    border: 1px solid transparent; cursor: pointer;
    transition: border-color .15s ease;
}
.theme-variant:hover { border-color: var(--color-border, #e5e7eb); }
.theme-variant.active { border-color: var(--color-primary, #2563eb); }
.theme-variant input.theme-radio { position: absolute; opacity: 0; pointer-events: none; }
.theme-variant__icon {
    flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center; color: #fff;
}
.theme-variant__icon--muted { background: var(--color-bg-muted, #ececf1) !important; color: var(--color-text-muted, #6b7280); }
.theme-variant__titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.theme-variant__name { font-weight: 600; font-size: 15px; color: var(--color-text, #111827); }
.theme-variant__desc { font-size: 12.5px; color: var(--color-text-muted, #6b7280); }
.theme-variant__admin-notice { font-size: 12px; font-style: italic; color: #ea580c; }
.theme-variant__radio {
    flex: 0 0 20px; width: 20px; height: 20px; border-radius: 50%;
    border: 2px solid var(--color-border, #d1d5db); position: relative;
}
.theme-variant.active .theme-variant__radio { border-color: var(--color-primary, #2563eb); }
.theme-variant.active .theme-variant__radio::after {
    content: ''; position: absolute; inset: 3px; border-radius: 50%;
    background: var(--color-primary, #2563eb);
}
.theme-variant--disabled { opacity: .55; cursor: not-allowed; }
.theme-variant--admin-only { border-style: dashed; border-color: var(--color-border, #d1d5db); }

.theme-families__hint {
    display: flex; align-items: flex-start; gap: 10px;
    margin-top: 14px; padding: 14px; border-radius: 12px;
    background: #eef2ff; color: #3730a3; font-size: 13px; line-height: 1.5;
}
.theme-families__hint svg { flex: 0 0 18px; margin-top: 1px; }

/* ============================================
   TUNNEL DE RÉTENTION — 4 POP-UPS
   (pause → remise → pause + illustration → confirmation)

   NOTE : le bloc « CANCELLATION MODAL » plus haut est présent EN DOUBLE dans ce
   fichier (~l.23842 et ~l.24826, duplication antérieure à cette feature). Ce bloc
   est donc placé en fin de fichier pour passer après les deux copies.
   ============================================ */

/* Bouton « Refuser » / « Supprimer mon compte » : fond noir, volontairement moins
   attractif que le CTA bleu. Classe dédiée pour ne pas ajouter un .btn--dark global. */
.cancellation-btn--dark {
    background: #111827;
    border: 1px solid #111827;
    color: #ffffff;
    transition: all 0.2s ease;
}

.cancellation-btn--dark:hover {
    background: #000000;
    border-color: #000000;
    color: #ffffff;
}

[data-theme="dark"] .cancellation-btn--dark {
    background: #030712;
    border-color: #374151;
}

[data-theme="dark"] .cancellation-btn--dark:hover {
    background: #000000;
    border-color: #4b5563;
}

/* Corps de texte des pop-ups */
.retention-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--card-text);
    margin: 0;
    text-align: center;
    transition: color 0.3s ease;
}

.retention-text--strong {
    font-size: 16px;
}

.retention-text--warning {
    padding: 14px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    text-align: left;
}

.retention-text--danger {
    font-weight: 700;
    color: #dc2626;
}

/* CTA principal (bleu, pleine largeur) */
.retention-cta {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
}

/* Rappel des dates de pause sous le CTA */
.retention-pause-dates {
    padding: 14px 16px;
    background: var(--color-bg-secondary);
    border-radius: 8px;
    text-align: center;
    transition: background-color 0.3s ease;
}

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

.retention-pause-dates strong {
    color: var(--color-primary);
}

/* Accroche « -30 % pour les 3 prochains mois » */
.retention-offer-highlight {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    line-height: 1.2;
    color: var(--color-primary);
    padding: 20px 16px;
    background: rgba(59, 130, 246, 0.08);
    border-radius: 12px;
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

/* Illustration de la pop-up 3 (GIF configurable, sinon repli intégré) */
.retention-media {
    display: flex;
    justify-content: center;
}

.retention-media__gif {
    max-width: 100%;
    max-height: 220px;
    border-radius: 12px;
    display: block;
}

.retention-media__fallback {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 28px 16px;
    background: var(--color-bg-secondary);
    border: 1px dashed var(--card-border);
    border-radius: 12px;
    transition:
        background-color 0.3s ease,
        border-color 0.3s ease;
}

.retention-media__icon {
    font-size: 44px;
    line-height: 1;
}

.retention-media__caption {
    font-size: 14px;
    color: var(--color-text-muted);
    text-align: center;
    transition: color 0.3s ease;
}

/* Bandeau « abonnement en pause » affiché sur /subscribe */
.subscription-paused-banner {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
    margin-bottom: 24px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.35);
    border-radius: 12px;
}

.subscription-paused-banner__icon {
    font-size: 30px;
    line-height: 1;
    flex-shrink: 0;
}

.subscription-paused-banner__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--card-text);
    margin: 0 0 8px 0;
    transition: color 0.3s ease;
}

.subscription-paused-banner__text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--card-text);
    margin: 0 0 16px 0;
    transition: color 0.3s ease;
}

.subscription-paused-banner__note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 10px 0 0 0;
    transition: color 0.3s ease;
}

/* Le tunnel a 4 étapes : les libellés doivent rester lisibles sur petit écran. */
@media (max-width: 640px) {
    .cancellation-progress {
        padding: 20px 16px 12px;
    }

    .cancellation-progress__steps {
        gap: 6px;
    }

    .cancellation-progress__step-label {
        font-size: 11px;
    }

    .cancellation-step {
        padding: 24px 18px;
        min-height: 0;
    }

    .cancellation-step__title {
        font-size: 20px;
    }

    .cancellation-step__footer {
        flex-direction: column-reverse;
    }

    .cancellation-step__footer .btn {
        width: 100%;
    }

    .retention-offer-highlight {
        font-size: 24px;
    }
}

/* La liste de la pop-up 4 enumere ce que l'utilisateur PERD : la coche verte heritee
   du bloc historique (.cancellation-warning-box__list li::before, content "✓") se lisait
   comme une liste d'avantages. On la remplace par une croix. */
.cancellation-step__content .cancellation-warning-box__list li::before {
    content: "✕";
}

/* Bloc d'apercu de l'onglet « Strategie anti-churn » (/admin/subscriptions).
   Classe dediee et NON `.alert` : la feuille globale impose
   `.alert strong { display: block }` (l.7828), ce qui ferait passer chaque valeur
   de la phrase a la ligne. */
.anti-churn-preview {
    margin-top: 20px;
    padding: 14px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
    border-radius: 8px;
    font-size: 15px;
    line-height: 1.6;
    color: var(--card-text);
    transition: color 0.3s ease;
}

.anti-churn-preview strong {
    display: inline;
    font-weight: 700;
}

/* ==========================================================================
   Admin > Settings — paramètres sensibles déportés dans le .env
   ========================================================================== */

.settings-env-legend {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: rgba(59, 130, 246, 0.08);
    border: 1px solid rgba(59, 130, 246, 0.25);
    border-left: 3px solid #3b82f6;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--card-text);
}

.settings-env-legend__icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.4;
}

.settings-env-legend__content code {
    font-family: "Courier New", monospace;
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.16);
    word-break: break-word;
}

.setting-sensitive-badge {
    margin-left: 6px;
    font-size: 12px;
    cursor: help;
    user-select: none;
}

.value-env {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.value-env__label {
    font-weight: 600;
    font-size: 13px;
    color: #2563eb;
}

.value-env--pending .value-env__label {
    color: #a86400;
}

.value-env__var {
    font-family: "Courier New", monospace;
    font-size: 12.5px;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.16);
    color: var(--card-text);
    align-self: flex-start;
    word-break: break-all;
}

.value-env__hint {
    font-size: 12px;
    color: var(--color-text-light);
}

.settings-actions__locked {
    display: inline-block;
    font-size: 12px;
    font-style: italic;
    color: var(--color-text-light);
    white-space: nowrap;
}

/* =============================================================================
   Étape 1 refondue du funnel de génération de thème (« Amélioration gen thème »)
   Interface guidée : 3 modes d'entrée produit (upload / URL AliExpress / URL
   fiche produit e-commerce). Préfixe : ocs-intake-
   ============================================================================= */

.ocs-intake__card {
    text-align: left;
}

.ocs-intake__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.ocs-intake__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    font-size: 1.6rem;
    font-weight: var(--font-weight-bold);
    color: var(--card-text, var(--color-text-dark));
}

.ocs-intake__title-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.ocs-intake__title-accent {
    color: var(--color-primary);
}

.ocs-intake__lead {
    margin: 0;
    max-width: 34rem;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-light);
}

.ocs-intake__ai-note {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    max-width: 20rem;
    padding: 0.85rem 1rem;
    border-radius: 12px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 18%, transparent);
    background: color-mix(in srgb, var(--color-primary) 6%, var(--card-bg, #fff));
    flex-shrink: 0;
}

.ocs-intake__ai-note p {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.ocs-intake__ai-note-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 10px;
    background: var(--color-primary);
    color: var(--color-white);
    flex-shrink: 0;
}

.ocs-intake__question {
    margin: var(--spacing-lg) 0 var(--spacing-md);
    text-align: center;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    color: var(--card-text, var(--color-text-dark));
}

.ocs-intake__modes {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr;
    gap: var(--spacing-md);
    align-items: stretch;
}

.ocs-intake__separator {
    display: flex;
    align-items: center;
    justify-content: center;
}

.ocs-intake__separator span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    border: 1px solid var(--color-border);
    background: var(--card-bg, #fff);
    font-size: 0.72rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-text-muted);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}

.ocs-intake-mode {
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
    padding: 1.35rem 1.25rem;
    border-radius: 14px;
    border: 1.5px solid var(--color-border);
    background: var(--card-bg, #fff);
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.ocs-intake-mode:hover {
    border-color: color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
}

.ocs-intake-mode--active {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 4%, var(--card-bg, #fff));
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-primary) 14%, transparent);
}

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

.ocs-intake-mode__head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.ocs-intake-mode__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    flex-shrink: 0;
}

.ocs-intake-mode__title {
    margin: 0;
    font-size: 0.95rem;
    font-weight: var(--font-weight-bold);
    line-height: 1.3;
    color: var(--card-text, var(--color-text-dark));
}

.ocs-intake-mode__desc {
    margin: 0;
    font-size: 0.8125rem;
    line-height: 1.5;
    color: var(--color-text-light);
}

.ocs-intake-mode__input-wrap {
    margin-top: auto;
}

.ocs-intake-mode__note {
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    margin: 0;
    padding: 0.55rem 0.7rem;
    border-radius: 8px;
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--color-text-light);
}

.ocs-intake-mode__note svg {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--color-primary);
}

/* Dropzone upload */
.ocs-intake-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.2rem;
    margin-top: auto;
    padding: 1.1rem 0.85rem;
    border-radius: 10px;
    border: 1.5px dashed color-mix(in srgb, var(--color-primary) 45%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 3%, transparent);
    text-align: center;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.ocs-intake-dropzone:hover,
.ocs-intake-dropzone--over {
    border-color: var(--color-primary);
    background: color-mix(in srgb, var(--color-primary) 7%, transparent);
}

.ocs-intake-dropzone__icon {
    color: var(--color-primary);
    margin-bottom: 0.25rem;
}

.ocs-intake-dropzone__main {
    font-size: 0.85rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.ocs-intake-dropzone__alt {
    font-size: 0.78rem;
    color: var(--color-primary);
}

.ocs-intake-dropzone__hint {
    margin-top: 0.3rem;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}

.ocs-intake-previews {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ocs-intake-previews[hidden] {
    display: none !important;
}

.ocs-intake-preview {
    position: relative;
    width: 3.4rem;
    height: 3.4rem;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--color-border);
}

.ocs-intake-preview img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ocs-intake-preview__remove {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 1.15rem;
    height: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.65);
    color: #fff;
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
}

.ocs-intake-characteristics-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    width: 100%;
    padding: 0.55rem 0.75rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 30%, var(--color-border));
    background: color-mix(in srgb, var(--color-primary) 5%, transparent);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: var(--font-weight-bold);
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.ocs-intake-characteristics-toggle:hover {
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
}

.ocs-intake-characteristics__input {
    width: 100%;
    resize: vertical;
    font-size: 0.8125rem;
}

.ocs-intake__error {
    margin: var(--spacing-md) 0 0;
    padding: 0.65rem 0.85rem;
    border-radius: 8px;
    border: 1px solid color-mix(in srgb, var(--color-danger) 35%, transparent);
    background: color-mix(in srgb, var(--color-danger) 7%, transparent);
    color: var(--color-danger);
    font-size: 0.8125rem;
}

.ocs-intake__submit-row {
    margin-top: var(--spacing-lg);
    justify-content: flex-end;
}

/* Sélecteur de pays (composant x-country-select) — venu de refonte-data.css le 24/09/2026 :
   le composant est utilisé sur des pages qui ne chargent pas ce fichier (étape 1 de la génération). */
.tn-country-select {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    height: 44px;
    border: 1px solid var(--card-border);
    border-radius: 8px;
    background-color: var(--card-bg);
    color: var(--card-text);
    font-size: 14px;
    font-weight: 500;
    flex-shrink: 0;
    cursor: default;
}

.tn-country-select__chevron {
    color: #9ca3af;
}

/* Sélecteur de pays custom (composant x-country-select) */
.country-select {
    position: relative;
    flex-shrink: 0;
}

.country-select__btn {
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.country-select__btn:hover {
    border-color: #cbd5e1;
}

/* Sélecteur inerte (ex. pendant une recherche tous marchés) : il garde sa place
   et son infobulle dit pourquoi il ne s'ouvre pas. */
.country-select--disabled .country-select__btn {
    opacity: 0.55;
    cursor: not-allowed;
}

.country-select--disabled .country-select__btn:hover {
    border-color: var(--card-border);
}

.country-select__btn:focus-visible,
.country-select--open .country-select__btn {
    outline: none;
    border-color: var(--color-primary, #2982fc);
    box-shadow: 0 0 0 3px rgba(41, 130, 252, 0.15);
}

.country-select__btn .tn-country-select__chevron {
    transition: transform 0.15s ease;
}

.country-select--open .country-select__btn .tn-country-select__chevron {
    transform: rotate(180deg);
}

.country-select__menu {
    position: absolute;
    left: 0;
    top: calc(100% + 6px);
    z-index: 60;
    min-width: 100%;
    margin: 0;
    padding: 6px;
    list-style: none;
    background-color: var(--card-bg, #ffffff);
    border: 1px solid var(--card-border, #e5e7eb);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    animation: country-select-in 0.12s ease-out;
}

@keyframes country-select-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.country-select__item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 10px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    font: inherit;
    font-size: 14px;
    font-weight: 500;
    color: var(--card-text);
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
}

.country-select__item:hover,
.country-select__item:focus-visible {
    outline: none;
    background-color: rgba(148, 163, 184, 0.12);
}

.country-select__item--active {
    color: var(--color-primary, #2982fc);
}

.country-select__flag {
    font-size: 16px;
    line-height: 1;
}

.country-select__name {
    flex: 1;
}

.country-select__check {
    visibility: hidden;
    color: var(--color-primary, #2982fc);
}

.country-select__item--active .country-select__check {
    visibility: visible;
}

/* Marché de la boutique (étape 1) : en tête de la carte, sous l'intitulé (carte #7) —
   libellé à gauche, sélecteur à sa suite, séparé des 3 modes par un filet */
.ocs-intake__market {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-top: var(--spacing-lg);
    padding: var(--spacing-md) 0;
    border-top: 1px solid var(--card-border, var(--color-border));
    border-bottom: 1px solid var(--card-border, var(--color-border));
}

/* Sélecteur calé à droite de la carte : le menu s'ouvre vers la gauche */
.ocs-intake__market .country-select__menu {
    left: auto;
    right: 0;
}

.ocs-intake__market-text {
    flex: 1 1 16rem;
    text-align: left;
}

.ocs-intake__market-label {
    margin: 0;
    font-weight: var(--font-weight-bold);
    color: var(--card-text, var(--color-text-dark));
}

.ocs-intake__market-hint {
    margin: 0.25rem 0 0;
    font-size: 0.8125rem;
    color: var(--card-text-muted, var(--color-text-light));
}

/* Le bouton ne s'étire pas (override du flex: 1 1 16rem générique du wizard) :
   bouton compact aligné à droite, fidèle au mockup. */
.ocs-intake__submit-row .ocs-theme-submit {
    flex: 0 0 auto;
    padding-left: 1.75rem;
    padding-right: 1.75rem;
}

@media (max-width: 700px) {
    .ocs-intake__submit-row .ocs-theme-submit {
        flex: 1 1 auto;
    }
}

/* Modale de progression : état d'erreur */
.ocs-intake-progress-error__text {
    margin: 0 0 1rem;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-danger);
}

.ocs-intake-progress-error__actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Responsive : cartes empilées, séparateurs horizontaux */
@media (max-width: 900px) {
    .ocs-intake__header {
        flex-direction: column;
    }

    .ocs-intake__ai-note {
        max-width: none;
    }

    .ocs-intake__modes {
        grid-template-columns: 1fr;
    }

    .ocs-intake__separator {
        padding: 0.1rem 0;
    }
}

[data-theme="dark"] .ocs-intake__separator span {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Étape 2 allégée : « Donnez un nom à votre boutique » (Amélioration gen thème) */
.ocs-naming__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--spacing-lg);
    margin-bottom: var(--spacing-lg);
}

.ocs-naming__title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin: 0 0 0.5rem;
    font-size: 1.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--card-text, var(--color-text-dark));
}

.ocs-naming__title-icon {
    color: var(--color-primary);
    flex-shrink: 0;
}

.ocs-naming__title-accent {
    color: var(--color-primary);
}

.ocs-naming__lead {
    margin: 0;
    max-width: 32rem;
    font-size: var(--font-size-sm);
    line-height: 1.55;
    color: var(--color-text-light);
}

.ocs-naming__suggested-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    margin: var(--spacing-lg) 0 var(--spacing-md);
}

.ocs-naming__suggested-title {
    display: flex;
    align-items: center;
    gap: 0.45rem;
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
    color: var(--card-text, var(--color-text-dark));
}

.ocs-naming__suggested-title svg {
    color: var(--color-primary);
}

.ocs-naming__quota {
    margin: 0 0 var(--spacing-sm);
    font-size: 0.8125rem;
    color: var(--color-text-light);
}

.ocs-naming__separator {
    margin: var(--spacing-md) 0;
}

.ocs-naming__custom {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 1rem 1.1rem;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--card-bg, #fff);
}

.ocs-naming__custom-label-wrap {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    flex-shrink: 0;
}

.ocs-naming__custom-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 10px;
    background: color-mix(in srgb, var(--color-primary) 10%, transparent);
    color: var(--color-primary);
    flex-shrink: 0;
}

.ocs-naming__custom-label {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    color: var(--card-text, var(--color-text-dark));
}

.ocs-naming__custom-hint {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ocs-naming__custom-input {
    flex: 1 1 auto;
}

@media (max-width: 700px) {
    .ocs-naming__header {
        flex-direction: column;
    }

    .ocs-naming__custom {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Étape 3 : bannière de suivi des visuels IA générés en arrière-plan */
.ocs-images-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    /* Les bannières vivent hors du conteneur .products-page (padding
       --spacing-xl) : on reprend la même gouttière pour ne pas coller
       aux bords de la page. */
    margin: var(--spacing-sm) var(--spacing-xl) var(--spacing-md);
    padding: 0.85rem 1.25rem;
    border-radius: 10px;
    border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    background: color-mix(in srgb, var(--color-primary) 5%, var(--card-bg, #fff));
}

/* L'attribut HTML hidden doit toujours gagner sur le display:flex ci-dessus,
   sinon les deux bannières restent visibles en permanence. */
.ocs-images-progress[hidden] {
    display: none !important;
}

.ocs-images-progress--error {
    border-color: color-mix(in srgb, var(--color-warning) 45%, transparent);
    background: color-mix(in srgb, var(--color-warning) 8%, var(--card-bg, #fff));
    justify-content: space-between;
}

.ocs-images-progress__spinner {
    width: 22px;
    height: 22px;
    border: 2.5px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
    border-top-color: var(--color-primary);
    border-radius: 50%;
    animation: spin 0.9s linear infinite;
    flex-shrink: 0;
}

.ocs-images-progress__body {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
}

.ocs-images-progress__title {
    font-size: 0.85rem;
    color: var(--card-text, var(--color-text-dark));
}

.ocs-images-progress__text {
    font-size: 0.78rem;
    color: var(--color-text-light);
}

.ocs-images-progress__bar {
    flex: 1 1 8rem;
    max-width: 14rem;
    height: 7px;
    margin-left: auto;
    border-radius: 999px;
    background: color-mix(in srgb, var(--color-primary) 12%, transparent);
    overflow: hidden;
}

.ocs-images-progress__bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: var(--color-primary);
    transition: width 0.4s ease;
}

/* ==========================================================================
   TUNNEL DE RÉTENTION — POP-UP 4 : raison de churn obligatoire
   Le bouton « Supprimer mon compte » reste grisé tant que le minimum de mots
   n'est pas atteint (JS : updateChurnReasonState, serveur : confirmCancel).
   ========================================================================== */

.churn-reason {
    margin-top: 18px;
    text-align: left;
}

.churn-reason__label {
    display: block;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    color: var(--card-text);
}

.churn-reason__input {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    border: 1px solid var(--color-border, #d1d5db);
    border-radius: 8px;
    background: var(--color-bg-secondary, #f9fafb);
    color: var(--card-text);
    font-family: inherit;
    font-size: 14.5px;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.churn-reason__input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}

.churn-reason__hint {
    margin: 8px 0 0;
    font-size: 13px;
    line-height: 1.5;
    color: var(--color-text-light, #6b7280);
}

.churn-reason__hint--ready {
    color: #16a34a;
    font-weight: 600;
}

/* Bouton final verrouillé : il reste visible (l'abonné doit comprendre que la sortie
   existe) mais inopérant tant que la raison n'est pas écrite. */
.cancellation-btn--dark:disabled,
.cancellation-btn--dark[disabled] {
    background: #9ca3af;
    border-color: #9ca3af;
    color: #f3f4f6;
    cursor: not-allowed;
    opacity: 1;
}

.cancellation-btn--dark:disabled:hover,
.cancellation-btn--dark[disabled]:hover {
    background: #9ca3af;
    border-color: #9ca3af;
}

/* ==========================================================================
   ADMIN > /admin/subscriptions — onglet « Logs Churns »
   ========================================================================== */

.churn-log-reason {
    display: block;
    max-width: 460px;
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 13.5px;
    line-height: 1.5;
    color: var(--card-text);
}

.churn-log-reason--empty {
    color: var(--color-text-light, #6b7280);
    font-style: italic;
}

.churn-slack-status {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 8px;
    font-size: 13.5px;
    line-height: 1.6;
    color: var(--card-text);
}

.churn-slack-status--ok {
    background: rgba(22, 163, 74, 0.08);
    border-left: 3px solid #16a34a;
}

.churn-slack-status--missing {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid #f59e0b;
}

.churn-slack-status code {
    font-family: "Courier New", monospace;
    font-size: 12.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(127, 127, 127, 0.16);
    word-break: break-word;
}

.churn-slack-status__icon {
    flex: 0 0 auto;
    font-size: 18px;
    line-height: 1.4;
}

.churn-slack-status__actions {
    margin-top: 10px;
}

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

.payment-method__info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    min-width: 0;
}

.payment-method__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--border-radius-md);
    background: var(--color-bg-secondary);
    color: var(--color-primary);
    transition:
        background-color 0.3s ease,
        color 0.3s ease;
}

.payment-method__details {
    min-width: 0;
}

.payment-method__label {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--color-text-muted);
    margin: 0 0 2px 0;
    transition: color 0.3s ease;
}

.payment-method__value {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    color: var(--card-text);
    margin: 0;
    transition: color 0.3s ease;
}

.payment-method__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: 4px 0 0 0;
    transition: color 0.3s ease;
}

.payment-method__form {
    margin: 0;
    flex-shrink: 0;
}

.payment-method__note {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-light);
    margin: var(--spacing-md) 0 0 0;
    transition: color 0.3s ease;
}

.payment-method__note svg {
    flex-shrink: 0;
    margin-top: 2px;
    color: var(--color-success);
}

@media (max-width: 640px) {
    .payment-method {
        align-items: flex-start;
        flex-direction: column;
    }

    .payment-method__form,
    .payment-method__form .btn {
        width: 100%;
    }
}

/* Sous-entrée du menu (ex : Wishlist sous Trend Niche) */
.sidebar__item--sub .sidebar__link {
    padding-left: 28px;
}

.sidebar__item--sub .sidebar__badge {
    background: #e5e7eb;
    color: #374151;
}

/* ==========================================================================
   PAGES D'AUTHENTIFICATION À DEUX COLONNES — /register et /login
   Maquettes du cahier des charges : formulaire à gauche, argumentaire à droite.
   La colonne de droite disparaît sous 900px (demande du doc : sur mobile, on
   n'affiche que la partie formulaire).
   Sélecteurs en .auth-container .auth-card--split : le <style> du layout est
   déclaré APRÈS styles.css, il faut donc une spécificité supérieure pour gagner.
   ========================================================================== */
/* Fond de page CLAIR, comme les maquettes — et non le dégradé violet du layout
   d'authentification classique (.auth-container, déclaré dans le <style> du layout).
   La spécificité de :has() suffit à reprendre la main sans toucher au layout. */
.auth-container:has(.auth-card--split) {
    background: linear-gradient(160deg, #ffffff 0%, #eef3fc 55%, #e2eafa 100%);
    padding: 2rem 1rem;
}

.auth-container .auth-card--split {
    max-width: min(1120px, calc(100vw - 2rem));
    width: 100%;
    padding: 0;
    overflow: hidden;
    display: flex;
    align-items: stretch;
    text-align: left;
    border-radius: 20px;
    /* Ombre douce : celle du layout (0 20px 60px rgba(0,0,0,.3)) écrase une maquette claire. */
    box-shadow: 0 24px 60px rgba(23, 43, 89, 0.10);
}

/* PLEINE LARGEUR sur /register et /login (demande de l'humain, 16/09/2026) : les deux colonnes
   occupent tout l'écran, sans carte centrée ni marge autour — une carte flottante donnait
   l'impression d'une fenêtre modale, ce que les maquettes ne montrent pas.
   ⚠️ `:not(.auth-card--checkout)` : /trial porte les deux classes et garde, lui, sa carte —
   un tunnel de paiement étalé sur 2 500 px serait illisible. */
.auth-container:has(.auth-card--split:not(.auth-card--checkout)) {
    padding: 0;
    min-height: 100vh;
    align-items: stretch;
    background: #ffffff;
}

.auth-container .auth-card--split:not(.auth-card--checkout) {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Répartition mesurée sur les captures 6 et 8 : le formulaire prend un peu moins de la
   moitié de l'écran, l'argumentaire le reste. À 50/50, la colonne de droite est trop étroite
   pour porter la grille de bénéfices ET l'aperçu du tableau de bord.

   ⚠️ LARGEURS FIXES, ET LES DEUX BLOCS SE REJOIGNENT AU CENTRE (demande de l'humain,
   16/09/2026). Le BLOC est pleine largeur, pas le CONTENU : un champ ou un bouton étiré sur
   800 px n'est plus un formulaire. Les deux colonnes gardent donc les largeurs du mode
   << carte >> (470 px / 720 px, mesurées sur les captures), et c'est leur ALIGNEMENT qui
   évite les îlots perdus dans du vide : le formulaire est plaqué à DROITE de sa colonne,
   l'argumentaire à GAUCHE de la sienne — ils se retrouvent de part et d'autre du milieu de
   l'écran, séparés des seules marges intérieures. */
.auth-card--split:not(.auth-card--checkout) {
    --auth-col-form: min(100%, 470px);
    --auth-col-aside: min(100%, 720px);
    --auth-bleed: clamp(3rem, 9vw, 9rem);
}

.auth-card--split:not(.auth-card--checkout) .auth-split__main {
    flex: 0 0 44%;
    /* flex-end : le formulaire se colle au bord intérieur de la colonne, vers le centre. */
    align-items: flex-end;
    padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 4.5vw, 6rem);
    background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
}

.auth-card--split:not(.auth-card--checkout) .auth-split__main > * {
    width: 100%;
    max-width: var(--auth-col-form);
}

.auth-card--split:not(.auth-card--checkout) .auth-split__aside {
    flex: 1 1 56%;
    /* flex-start : l'argumentaire se colle à son bord gauche, face au formulaire. */
    align-items: flex-start;
    padding: clamp(2.5rem, 9vh, 7rem) clamp(1.5rem, 4.5vw, 6rem);
}

.auth-card--split:not(.auth-card--checkout) .auth-split__aside > * {
    width: 100%;
    max-width: var(--auth-col-aside);
}

/* La pastille garde sa largeur de contenu : étirée sur toute la colonne, elle devenait une barre.
   La colonne étant désormais alignée à gauche, plus besoin de la recentrer à la main. */
.auth-card--split:not(.auth-card--checkout) .auth-split__aside > .auth-aside__badge {
    width: auto;
    align-self: flex-start;
    margin-left: 0;
}

/* ÉCHELLE TYPOGRAPHIQUE. À pleine largeur, un titre de 2 rem se perd dans la page : les
   maquettes le posent à ~2,4 vw à gauche et ~2,85 vw à droite. */
.auth-card--split:not(.auth-card--checkout) .auth-title--split {
    /* Plafond à 2,1 rem : au-delà, « Heureux de vous revoir ! » ne tient plus sur une ligne
       dans les 470 px de la colonne. */
    font-size: clamp(1.75rem, 2vw, 2.1rem);
    margin-bottom: 0.75rem;
}

.auth-card--split:not(.auth-card--checkout) .auth-aside__title {
    font-size: clamp(2rem, 2.85vw, 2.9rem);
}

.auth-card--split:not(.auth-card--checkout) .auth-aside__subtitle {
    font-size: 1.0625rem;
    margin-bottom: 2rem;
}

/* ⛔ NE PAS grossir ni étirer les champs, les boutons et les espacements du formulaire :
   ils gardent la taille du mode << carte >> (padding et rayons du <style> du gabarit).
   Une passe précédente les avait élargis à la largeur de la colonne — refusé par
   l'humain le 16/09/2026. */

/* Cartes de bénéfices : à pleine largeur, 16 px de padding donnait des vignettes minuscules. */
.auth-card--split:not(.auth-card--checkout) .auth-features {
    gap: 18px;
}

.auth-card--split:not(.auth-card--checkout) .auth-feature,
.auth-card--split:not(.auth-card--checkout) .auth-review {
    padding: 20px 22px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 2px 10px rgba(23, 43, 89, 0.04);
}

.auth-card--split:not(.auth-card--checkout) .auth-feature__icon {
    width: 46px;
    height: 46px;
    border-radius: 13px;
}

.auth-card--split:not(.auth-card--checkout) .auth-feature__icon svg {
    width: 21px;
    height: 21px;
}

.auth-card--split:not(.auth-card--checkout) .auth-feature__title {
    font-size: 15px;
}

.auth-card--split:not(.auth-card--checkout) .auth-feature__text {
    font-size: 13.5px;
}

.auth-split__main {
    flex: 1 1 50%;
    min-width: 0;
    padding: 2.75rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.auth-split__aside {
    flex: 1 1 50%;
    min-width: 0;
    padding: 2.75rem;
    /* Fond des maquettes : un dégradé DIAGONAL qui part du blanc en haut à gauche et descend
       vers un bleu clair en bas à droite, avec deux halos blancs très doux. Les anciens
       cercles blancs opaques (::before / ::after) dessinaient des bords nets que la maquette
       n'a pas — ils sont remplacés par ces halos, qui n'ont pas d'arête. */
    background:
        radial-gradient(115% 85% at 88% 4%, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 58%),
        radial-gradient(90% 70% at 2% 96%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 62%),
        linear-gradient(140deg, #f7fbff 0%, #eaf2fe 42%, #d3e3fb 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Le contenu passe au-dessus des formes. */
.auth-split__aside > * {
    position: relative;
    z-index: 1;
}

.auth-card--split .auth-logo {
    justify-content: flex-start;
    text-align: left;
    margin-bottom: 1.75rem;
}

.auth-card--split .auth-logo img {
    margin: 0;
}

/* Le <style> du layout centre .auth-title / .auth-subtitle / .auth-logo et il est déclaré APRÈS
   cette feuille : il faut donc préfixer par .auth-card--split pour reprendre la main. */
.auth-card--split .auth-title--split,
.auth-card--split .auth-subtitle--split,
.auth-card--split .auth-logo,
.auth-card--split .auth-footer,
.auth-card--split .form-label {
    text-align: left;
}

.auth-card--split .auth-logo {
    /* Colonne alignée à gauche : le gabarit centre `.auth-logo`, les maquettes le calent
       sur le bord gauche du formulaire. */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.auth-card--split .auth-logo img {
    margin-left: 0;
    margin-right: auto;
}

.auth-card--split .auth-title--split {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 0.75rem;
}

.auth-title__accent {
    color: var(--color-primary, #2563eb);
}

.auth-subtitle--split {
    text-align: left;
    margin-bottom: 1.75rem;
    color: #6b7280;
}

/* Bouton SSO */
.btn-sso {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 13px 16px;
    border: 1px solid #d9dee7;
    border-radius: 12px;
    background: #ffffff;
    color: #111827;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.btn-sso:hover {
    background: #f7f9fc;
    border-color: #c3ccdb;
}

/* Inerte et grisé tant que l'application Google n'est pas configurée : le motif
   est dans l'infobulle, un bouton absent se lirait comme un oubli. */
.btn-sso--off {
    opacity: 0.55;
    cursor: not-allowed;
}

.btn-sso--off:hover {
    background: #ffffff;
    border-color: #d9dee7;
}

.auth-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1.25rem 0;
    color: #9aa3b2;
    font-size: 13px;
}

.auth-separator::before,
.auth-separator::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #e5e9f0;
}

/* Champs avec icône */
.input-icon {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon__glyph {
    width: 18px;
    height: 18px;
    color: #9aa3b2;
}

.input-icon > .input-icon__glyph {
    position: absolute;
    left: 14px;
    pointer-events: none;
}

/* Spécificité renforcée : le <style> du layout définit `.form-input { padding: … }` et il est
   déclaré APRÈS styles.css. Sans le préfixe .input-icon, son padding gagne et l'icône se
   superpose au texte de substitution. */
.input-icon .form-input--icon {
    padding-left: 44px;
}

.input-icon .form-input--password {
    padding-right: 44px;
}

.input-icon__toggle {
    position: absolute;
    right: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border: none;
    background: transparent;
    cursor: pointer;
}

.form-error {
    display: block;
    margin-top: 0.25rem;
    color: #991b1b;
    font-size: 0.875rem;
}

/* Critères de mot de passe : gris par défaut, verts dès qu'ils sont remplis. */
.password-rules {
    list-style: none;
    margin: 0.75rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.password-rules__item {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #9aa3b2;
    font-size: 13px;
    transition: color 0.2s ease;
}

.password-rules__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.password-rules__item--ok {
    color: #059669;
}

.btn-auth--arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.btn-auth__arrow {
    width: 18px;
    height: 18px;
}

.auth-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 1.25rem;
    font-size: 14px;
}

.auth-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: #4b5563;
    cursor: pointer;
}

.auth-legal {
    margin-top: 1rem;
    color: #9aa3b2;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
}

/* Colonne de droite */
.auth-aside__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 7px 14px;
    border-radius: 9999px;
    background: #ffffff;
    color: var(--color-primary, #2563eb);
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.auth-aside__badge-icon {
    width: 15px;
    height: 15px;
}

.auth-aside__title {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: 700;
    color: #0f172a;
    margin: 0 0 0.75rem;
}

.auth-aside__subtitle {
    color: #55627a;
    margin: 0 0 1.75rem;
    line-height: 1.5;
}

.auth-reviews,
.auth-features {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.auth-features {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
}

.auth-review,
.auth-feature {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.85);
}

/* Avatar rond de l'auteur, à gauche de l'avis (maquette lot 4, créateurs reconnus). Photo réelle
   du profil, servie depuis public/assets/ ; les avis de /register en portent chacun un. */
.auth-review__avatar {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 2px 8px rgba(23, 43, 89, 0.14);
}

.auth-review__body {
    min-width: 0;
    flex: 1;
}

/* Guillemet d'ouverture : un petit signe bleu au-dessus du texte, plus la pastille ronde
   d'avant (la maquette lot 4 l'a remplacée par ce simple guillemet). */
.auth-review__quote {
    display: block;
    color: var(--color-primary, #2563eb);
    font-size: 30px;
    font-weight: 700;
    line-height: 0.6;
    height: 15px;
}

.auth-review__text {
    margin: 0 0 8px;
    color: #1f2937;
    font-size: 14px;
    line-height: 1.5;
}

/* Pied de l'avis : auteur à gauche, pastille de plateforme (logo + audience) à droite,
   les deux passant à la ligne ensemble si la carte est étroite. */
.auth-review__foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    margin: 0;
}

.auth-review__author {
    color: #8592a8;
    font-size: 13px;
}

.auth-review__badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.auth-review__logo {
    flex-shrink: 0;
    display: block;
}

.auth-review__audience {
    color: #6b7280;
    font-size: 12.5px;
}

.auth-feature__icon {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: #e0eaff;
    color: var(--color-primary, #2563eb);
}

.auth-feature__icon svg {
    width: 19px;
    height: 19px;
}

.auth-feature__title {
    margin: 0 0 4px;
    color: #0f172a;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.auth-feature__text {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.45;
}

/* Annotation manuscrite des maquettes (capture 6 de /register) : flèche courbe + phrase
   écrite à la main, en bas à droite de la colonne d'argumentaire. Purement décorative,
   elle suit la largeur du bloc d'avis et disparaît avec la colonne sous 900px.
   La police Caveat est chargée par layouts/oneclickbrand-auth.blade.php. */
.auth-note {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    margin: 1.25rem 0 0;
    color: #2f6bff;
}

.auth-note__arrow {
    flex-shrink: 0;
    width: 76px;
    height: 41px;
    transform: translateY(6px);
}

.auth-note__text {
    /* Les trois lignes de la maquette sont posées par des <br /> dans la vue : à cette
       taille, la coupe automatique tombait ailleurs quelle que soit la largeur choisie. */
    white-space: nowrap;
    margin: 0;
    font-family: 'Caveat', 'Segoe Script', 'Bradley Hand', cursive;
    font-size: 25px;
    font-weight: 600;
    line-height: 1.15;
    transform: rotate(-4deg);
}

/* Variante « angle » de l'annotation manuscrite : en HAUT À DROITE de la colonne, comme
   « Plus loin, ensemble. » sur la capture 8. Le texte est au-dessus, la flèche descend
   vers la gauche, vers le contenu. Spécificité préfixée : sinon la règle pleine largeur
   `.auth-split__aside > *` (width: 100%) l'emporte et l'annotation barre la colonne. */
.auth-card--split:not(.auth-card--checkout) .auth-split__aside > .auth-note--corner {
    position: absolute;
    top: clamp(1.25rem, 5vh, 3.25rem);
    right: clamp(1rem, 3vw, 3.25rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: auto;
    max-width: 240px;
    margin: 0;
    pointer-events: none;
}

.auth-note--corner .auth-note__text {
    max-width: none;
    /* Caveat est une écriture étroite : à 25 px, l'annotation se voyait à peine. */
    font-size: 32px;
    text-align: right;
    transform: rotate(-6deg);
}

.auth-note--corner .auth-note__arrow {
    width: 64px;
    height: 84px;
    margin-right: 26px;
    transform: none;
}

/* ==========================================================================
   APERÇU DU TABLEAU DE BORD — colonne droite de /login (capture 8)
   Fac-similé en HTML/CSS : aucune image à héberger, aucun texte réel d'utilisateur.
   Purement décoratif (la vue le marque `aria-hidden`). Il déborde volontairement à
   droite et en bas de la colonne, qui masque le dépassement (overflow: hidden).
   ========================================================================== */
/* Quand la colonne porte l'aperçu, son contenu part du HAUT et l'aperçu est poussé en BAS
   (margin-top: auto) : centré comme le reste, il laissait une large bande bleue vide sous
   lui alors que la capture le fait déborder du bas de l'écran. */
/* ⚠️ Sélecteur PRÉFIXÉ, et pas seulement `.auth-split__aside:has(…)` : la règle qui pose le
   `padding` de la colonne est plus spécifique (3 classes contre 2), donc une version courte
   perdait sur `padding-bottom` — les 88 px de marge basse restaient et mangeaient tout le
   débordement de l'aperçu, qui s'arrêtait pile au bord de l'écran au lieu d'en sortir. */
.auth-card--split:not(.auth-card--checkout) .auth-split__aside:has(.auth-preview) {
    justify-content: flex-start;
    /* Sans marge basse : /register, qui n'a pas d'aperçu, garde la sienne. */
    padding-bottom: 0;
}

.auth-card--split:not(.auth-card--checkout) .auth-split__aside > .auth-preview {
    /* « IL SORT DU SOL » (maquette, capture 8) : l'aperçu commence JUSTE sous la grille de
       bénéfices, prend TOUTE la hauteur qui reste (`flex: 1 1 auto`) et se fait couper par le
       bord de l'écran. ⛔ Ne pas le remplacer par `margin-top: auto` : ça le colle au bas de
       la colonne, mais ça rouvre une bande bleue vide entre les cartes et lui, et la maquette
       n'en a pas. Et une simple marge basse négative ne suffit pas non plus : `.auth-card--split`
       porte `min-height: 100vh`, donc la hauteur ne vient pas du contenu et la marge n'a
       aucun effet.
       Il déborde à gauche (légèrement, comme la capture), à droite et en bas ; la colonne
       masque le dépassement (`overflow: hidden`). */
    /* ⛔ `flex: 1 1 0`, surtout pas `auto` : avec une base `auto`, la hauteur naturelle de
       la carte (730 px) s'ajoutait à celle du reste de la colonne et faisait dépasser la page
       de 34 px — une barre de défilement vertical sur une page de connexion. Base zéro : la
       carte ne prend QUE la place qui reste, jamais plus. */
    flex: 1 1 0;
    min-height: 0;
    position: relative;
    width: calc(100% + var(--auth-bleed) + clamp(0.75rem, 2vw, 2.5rem));
    max-width: none;
    align-self: flex-start;
    margin: 0 calc(-1 * var(--auth-bleed)) 0 calc(-1 * clamp(0.75rem, 2vw, 2.5rem));
}

.auth-preview__shot {
    display: block;
    position: absolute;
    left: 0;
    /* Calé EN BAS et dépassant légèrement : c'est ce qui le fait « sortir du sol ». */
    bottom: calc(-1 * clamp(1.5rem, 3.5vh, 3rem));
    /* Dimensionné par la LARGEUR (la hauteur suit les proportions du visuel, 2,61:1) : il
       déborde alors d'environ 10 % à droite, comme sur la capture.
       ⛔ Ne pas le dimensionner par la HAUTEUR pour remplir la colonne : sur un écran large,
       ça l'agrandit 2× (le fichier ne fait que 954 px de large) et il n'en reste qu'un quart
       de visible — le reste sort de l'écran à droite.
       ⛔ Ne pas lui ajouter `transform: rotate(…)` : l'inclinaison et l'ombre portée sont
       déjà dans l'image. */
    width: calc(100% + var(--auth-bleed) + 6%);
    max-width: none;
    height: auto;
    /* Garde-fou écran court : sans lui, le visuel remonterait par-dessus la grille de
       bénéfices. `object-fit` évite qu'il soit écrasé quand ce plafond s'applique. */
    max-height: calc(100% + clamp(1.5rem, 3.5vh, 3rem));
    object-fit: contain;
    object-position: left bottom;
}

/* Écran bas (portable 1 366×700, écran partagé…) : le formulaire dépassait de 13 px et
   faisait apparaître une barre de défilement pour rien. */
@media (max-height: 760px) {
    .auth-card--split:not(.auth-card--checkout) .auth-split__main {
        padding-top: 1.25rem;
        padding-bottom: 1.25rem;
    }
}

@media (max-width: 900px) {
    /* Demande du cahier des charges : sur mobile, on n'affiche que le formulaire. */
    .auth-split__aside {
        display: none;
    }

    .auth-container .auth-card--split {
        max-width: 480px;
    }

    /* Sur /register et /login, la pleine largeur vaut aussi en mobile : la colonne unique
       occupe l'écran, seul son contenu reste borné. */
    .auth-container .auth-card--split:not(.auth-card--checkout) {
        max-width: none;
    }

    .auth-split__main {
        padding: 2rem 1.5rem;
    }

    .auth-title--split,
    .auth-aside__title {
        font-size: 1.6rem;
    }

    /* Les règles pleine largeur ci-dessus sont plus spécifiques que celles de ce bloc :
       sans ce rappel préfixé, elles gagnent et le mobile garde la taille du bureau. */
    .auth-card--split:not(.auth-card--checkout) .auth-split__main {
        flex: 1 1 100%;
        padding: 2rem 1.5rem;
    }

    .auth-card--split:not(.auth-card--checkout) .auth-title--split {
        font-size: 1.6rem;
    }

    .auth-card--split:not(.auth-card--checkout) .auth-subtitle--split {
        font-size: 0.95rem;
        margin-bottom: 1.5rem;
    }
}

/* ==========================================================================
   TUNNEL D'ESSAI / DE PAIEMENT — page /trial et pop-up de fin d'accès
   Formules en liste à boutons radio (colonne étroite), étapes 1/2, bloc paiement.
   ========================================================================== */
/* ⚠️ La largeur, le fond et la répartition des colonnes de /trial sont posés plus bas,
   dans le bloc « PAGE /trial — LE VISUEL DE LA MAQUETTE » : la page est PLEINE LARGEUR
   depuis le 21/09/2026 (elle tenait avant dans une carte centrée de 1 180 px). */

/* Étapes « 1 Vos informations — 2 Accès » */
.checkout-steps {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 1.5rem;
}

.checkout-step {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #9aa3b2;
    font-size: 14px;
    font-weight: 600;
}

.checkout-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 9999px;
    background: #e9edf4;
    color: #6b7280;
    font-size: 13px;
}

.checkout-step--active {
    color: var(--color-primary, #2563eb);
}

.checkout-step--active .checkout-step__num {
    background: var(--color-primary, #2563eb);
    color: #ffffff;
}

.checkout-step__line {
    flex: 1;
    height: 1px;
    background: #e5e9f0;
    max-width: 90px;
}

/* Liste des formules */
.plan-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 1.5rem;
}

.plan-list .billing-period {
    margin: 0 0 0.75rem;
    width: 100%;
    justify-content: space-between;
}

.plan-list .billing-period__option {
    flex: 1 1 0;
    justify-content: center;
}

.plan-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 1.5px solid #e3e8f0;
    border-radius: 14px;
    background: #ffffff;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

.plan-option:hover {
    border-color: #c3d0e6;
}

.plan-option--checked {
    border-color: var(--color-primary, #2563eb);
    background: #f5f8ff;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.plan-option__radio {
    width: 18px;
    height: 18px;
    accent-color: var(--color-primary, #2563eb);
    flex-shrink: 0;
    margin: 0;
}

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

.plan-option__head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.plan-option__title {
    font-size: 17px;
    font-weight: 700;
    color: #0f172a;
}

.plan-option__badge {
    padding: 2px 9px;
    border-radius: 9999px;
    background: var(--color-primary, #2563eb);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

.plan-option__tagline {
    color: #6b7280;
    font-size: 13px;
    line-height: 1.35;
}

.plan-option__pricing {
    text-align: right;
    flex-shrink: 0;
}

.plan-option__price {
    display: block;
    white-space: nowrap;
}

.plan-option__amount {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.plan-option__period {
    color: #6b7280;
    font-size: 13px;
}

.plan-option__after {
    display: block;
    margin-top: 2px;
    color: #8592a8;
    font-size: 12px;
    white-space: nowrap;
}

/* Bloc paiement.
   PAS d'encadré ici : le Checkout Stripe monté en dessous apporte déjà les siens (récapitulatif,
   « Moyen de paiement », « Carte »). Un cadre de plus les emboîtait trois fois de suite. Le titre
   et la note restent, sur le fond de la carte. */
.checkout-payment {
    padding: 0;
    border: 0;
    background: transparent;
    margin-bottom: 1.25rem;
}

.checkout-payment__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 8px;
    flex-wrap: wrap;
}

.checkout-payment__title {
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
}

.checkout-payment__secure {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #6b7280;
    font-size: 12px;
}

.checkout-payment__lock {
    width: 14px;
    height: 14px;
}

.checkout-payment__note {
    margin: 0;
    color: #6b7280;
    font-size: 13px;
    line-height: 1.5;
}

/* Conteneur du Checkout Stripe intégré (iframe montée par Stripe.js), utilisé en repli. */
.checkout-payment__frame {
    margin-top: 12px;
    min-height: 0;
}

/* Formulaire de carte de la maquette : Prénom / Nom à nous, puis le cadre Stripe Elements.
   UN SEUL encadré, celui-ci — Elements ne rend que les champs, sans cadre supplémentaire. */
.checkout-card {
    margin-top: 12px;
    padding: 14px;
    border: 1px solid #e3e8f0;
    border-radius: 14px;
    background: #ffffff;
}

.checkout-card__row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.checkout-card__field {
    flex: 1 1 0;
    min-width: 0;
}

.checkout-card__field--full {
    margin-bottom: 12px;
}

.checkout-card__row--last {
    margin-bottom: 0;
}

/* Champ monté par Stripe (iframe d'une seule ligne) : on lui donne l'apparence de nos propres
   champs, la hauteur comprise — une iframe ne s'ajuste pas toute seule à son contenu. */
.checkout-card__stripe {
    padding: 11px 12px;
    border: 1px solid #dbe2ec;
    border-radius: 10px;
    background: #ffffff;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.checkout-card__stripe.is-focused {
    border-color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.checkout-card__stripe.is-invalid {
    border-color: #dc2626;
}

.checkout-card__error {
    margin: 10px 0 0;
    color: #dc2626;
    font-size: 13px;
    line-height: 1.4;
}

@media (max-width: 520px) {
    .checkout-card__row {
        flex-direction: column;
        gap: 10px;
    }
}

.checkout-payment__loading {
    margin: 10px 0 0;
    color: #8592a8;
    font-size: 13px;
}

.checkout-guarantees {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
    margin: 1rem 0 0;
    padding: 0;
    color: #4b5563;
    font-size: 13px;
}

.checkout-guarantees li {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.checkout-guarantees__icon {
    width: 15px;
    height: 15px;
    color: var(--color-primary, #2563eb);
}

.auth-features--single {
    grid-template-columns: minmax(0, 1fr);
}

.auth-rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.auth-rating__score {
    font-size: 24px;
    font-weight: 700;
    color: #0f172a;
}

.auth-rating__stars {
    color: #f59e0b;
    font-size: 17px;
    letter-spacing: 1px;
}

.auth-rating__label {
    color: #6b7280;
    font-size: 13px;
}

@media (max-width: 640px) {
    .plan-option {
        flex-wrap: wrap;
    }

    .plan-option__pricing {
        text-align: left;
        width: 100%;
        padding-left: 30px;
    }
}

/* ==========================================================================
   PAGE /trial — LE VISUEL DE LA MAQUETTE (cahier des charges du 19/09/2026,
   « Faire vraiment ce visuel »)
   La page existait déjà en deux colonnes, mais dans une CARTE centrée de 1 180 px,
   avec des bénéfices en vignettes blanches et sans les avis, la note 4,8/5 en grand
   ni la rangée de bénéfices du bas. Tout ce bloc reprend la capture, élément par
   élément. Il est PRÉFIXÉ `.auth-card--checkout` : ces mêmes classes servent aussi à
   la pop-up d'upsell (`components/upsell-modal.blade.php`), qu'on ne touche pas.
   ========================================================================== */

/* PLEINE LARGEUR, comme /register et /login : deux panneaux bord à bord, sans carte
   flottante ni marge autour. C'est le point de départ de la maquette ; l'ancien
   garde-fou « un tunnel de paiement étalé sur 2 500 px serait illisible » est tenu
   par `--auth-col-form`, qui borne le CONTENU, pas le panneau. */
.auth-container:has(.auth-card--checkout) {
    padding: 0;
    min-height: 100vh;
    align-items: stretch;
    background: #ffffff;
}

.auth-container .auth-card--checkout {
    max-width: none;
    width: 100%;
    min-height: 100vh;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
}

/* Sur la capture, les deux panneaux font chacun la moitié de l'écran et leur contenu
   y est centré (et non plaqué vers le milieu comme sur /login). */
.auth-card--checkout {
    --auth-col-form: min(100%, 700px);
    --auth-col-aside: min(100%, 840px);
}

/* ⛔ `justify-content: flex-start` des deux côtés, jamais `center` : la colonne porte
   `overflow: hidden`, donc un contenu plus haut que la carte se ferait rogner EN HAUT
   si on le centrait. */
.auth-card--checkout .auth-split__main {
    flex: 0 0 50%;
    align-items: center;
    justify-content: flex-start;
    padding: clamp(1.75rem, 4vh, 3rem) clamp(1.25rem, 3.5vw, 4rem);
    background: #ffffff;
}

.auth-card--checkout .auth-split__main > * {
    width: 100%;
    max-width: var(--auth-col-form);
}

.auth-card--checkout .auth-split__aside {
    flex: 1 1 50%;
    align-items: flex-start;
    justify-content: flex-start;
    padding: clamp(2rem, 5vh, 3.75rem) clamp(1.5rem, 3.5vw, 4rem);
    /* FOND DE LA COLONNE — les formes de la maquette, mesurées sur la capture du
       19/09/2026 (panneau de 939 x 1230 px dans le fichier) :
         - un halo BLANC dans le coin haut droit ;
         - un GRAND CERCLE légèrement plus bleu qui entre par le bord droit — centre
           à (1195, 468) px soit 127 % de la largeur de la colonne et 38 % de sa
           hauteur, rayon 400 px soit 43 % de sa largeur. La colonne faisant 50vw,
           43 % de 50vw = 21.5vw : le cercle garde donc ses proportions à toutes les
           tailles d'écran ;
         - des coins plus profonds (vignette douce).
       ⚠️ Écart mesuré entre le cercle et le fond : 8 niveaux de gris sur 255, étalés
       sur ~25 px. D'où la coupe à 94 % du rayon et non à 100 % : un bord net y
       dessinerait un trait que la maquette n'a pas.
       C'est fait en dégradés CSS et non en SVG : aucun nœud ni fichier en plus, et
       le projet interdit un nouveau fichier de styles. */
    /* Fond PLAT : sur la capture, tout le centre du panneau est a #e6f2fd. Le relief
       vient des cinq formes de <x-auth-aside-decor />, pas d'un degrade. */
    background: #e6f2fd;
}

/* Les formes de fond : elles couvrent toute la colonne et passent DERRIERE le contenu
   (`.auth-split__aside > *` met le contenu en z-index 1). La colonne porte deja
   `overflow: hidden`, les cercles qui debordent sont donc coupes proprement. */
.auth-card--checkout .auth-split__aside > .auth-aside__decor {
    position: absolute;
    inset: 0;
    z-index: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    pointer-events: none;
}

.auth-card--checkout .auth-split__aside > * {
    width: 100%;
    max-width: var(--auth-col-aside);
}

/* Logo à gauche, rassurance Stripe à droite, sur la même ligne (capture). */
.auth-card--checkout .auth-logo {
    flex-direction: row;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 1.5rem;
}

.auth-card--checkout .auth-logo img {
    height: 40px;
}

.auth-logo__aside {
    display: inline-flex;
    align-items: flex-start;
    gap: 9px;
    color: #64748b;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.25;
    text-align: left;
}

.auth-logo__aside-icon {
    flex-shrink: 0;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: #475569;
}

/* Bloc paiement : UN SEUL encadré qui porte le titre ET les champs (capture). L'encadré
   du dessous (`.checkout-card`) disparaît donc, sinon il y en avait deux emboîtés.
   ⚠️ Règles préfixées : la pop-up d'upsell garde, elle, l'ancienne mise en page. */
.auth-card--checkout .checkout-payment {
    padding: 18px;
    border: 1px solid #e3e8f0;
    border-radius: 16px;
    background: #ffffff;
    margin-bottom: 1.25rem;
}

.auth-card--checkout .checkout-payment__head {
    margin-bottom: 0;
}

.auth-card--checkout .checkout-payment__title {
    font-size: 17px;
}

.auth-card--checkout .checkout-card {
    margin-top: 14px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* Libellé « Numéro de carte » à gauche, pastilles des réseaux à droite. */
.checkout-card__label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0.5rem;
}

.checkout-card__label-row .form-label {
    margin-bottom: 0;
}

.card-brands {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.card-brands__item {
    display: block;
    width: 34px;
    height: 22px;
}

/* « ? » du code de sécurité, posé par-dessus l'iframe Stripe. */
.checkout-card__input-wrap {
    position: relative;
}

.checkout-card__input-wrap .checkout-card__stripe {
    padding-right: 40px;
}

.checkout-card__help {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1.5px solid #cbd5e1;
    border-radius: 9999px;
    color: #94a3b8;
    font-size: 12px;
    font-weight: 700;
    cursor: help;
}

/* Garanties : coche BLANCHE dans une pastille bleue pleine (capture). */
.auth-card--checkout .checkout-guarantees {
    gap: 22px;
    margin-top: 1.1rem;
    color: #334155;
    font-size: 13.5px;
}

.auth-card--checkout .checkout-guarantees__icon {
    width: 19px;
    height: 19px;
    padding: 3px;
    border-radius: 9999px;
    background: var(--color-primary, #2563eb);
    color: #ffffff;
}

/* ---------------------------------------------------------------------------
   Colonne de droite
   --------------------------------------------------------------------------- */
.auth-card--checkout .auth-split__aside > .auth-aside__badge {
    width: auto;
    background: #dbe7ff;
    padding: 9px 16px;
    font-size: 14px;
    margin-bottom: 1.75rem;
}

/* Le titre est sur DEUX lignes dans la maquette, et bien plus gros qu'ailleurs. */
.auth-card--checkout .auth-aside__title {
    /* 3.45vw et non 3vw : la maquette ramenee a sa largeur de conception (1 269 px)
       donne un titre 19 % plus gros que la premiere version. */
    font-size: clamp(2rem, 3.45vw, 3.6rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    margin-bottom: 1rem;
}

.auth-card--checkout .auth-aside__subtitle {
    font-size: clamp(1rem, 1.35vw, 1.2rem);
    max-width: 640px;
    margin-bottom: 2rem;
}

/* Bénéfices SANS vignette blanche : seule l'icône porte un fond (capture). */
.auth-card--checkout .auth-features {
    gap: 22px;
    margin-bottom: 2.25rem;
}

.auth-card--checkout .auth-feature {
    align-items: center;
    gap: 16px;
    padding: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

.auth-card--checkout .auth-feature__icon {
    width: 52px;
    height: 52px;
    border-radius: 15px;
    background: #dbe7ff;
}

.auth-card--checkout .auth-feature__icon svg {
    width: 24px;
    height: 24px;
}

.auth-card--checkout .auth-feature__title {
    font-size: 15.5px;
    margin-bottom: 3px;
}

.auth-card--checkout .auth-feature__text {
    font-size: 14px;
}

/* Annotation manuscrite, à DROITE des bénéfices (et non en bas comme sur /register) :
   le texte est au-dessus, la flèche descend vers eux. Elle est posée en absolu, donc
   elle ne pousse rien ; sous 1 280 px elle recouvrirait les bénéfices, on la retire. */
.auth-card--checkout .auth-split__aside > .auth-note--aside {
    position: absolute;
    top: 34%;
    right: clamp(0.5rem, 2vw, 2.5rem);
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    width: auto;
    max-width: 240px;
    margin: 0;
    pointer-events: none;
}

.auth-note--aside .auth-note__text {
    max-width: none;
    font-size: 27px;
    line-height: 1.12;
    text-align: center;
    white-space: normal;
    transform: rotate(-4deg);
}

.auth-note--aside .auth-note__arrow {
    width: 84px;
    height: 56px;
    margin-right: 34px;
    transform: none;
}

/* Trois avis courts en cartes blanches, cinq étoiles chacun. */
.auth-quotes {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 2rem;
}

.auth-quote {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 0;
    padding: 18px;
    border-radius: 14px;
    background: #ffffff;
    box-shadow: 0 2px 10px rgba(23, 43, 89, 0.05);
}

.auth-quote__text {
    flex: 1;
    margin: 0;
    color: #1f2937;
    font-size: 15px;
    line-height: 1.45;
}

.auth-quote__foot {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.auth-quote__author {
    color: #64748b;
    font-size: 13.5px;
}

.auth-quote__stars {
    color: #f6b01e;
    font-size: 15px;
    letter-spacing: 2px;
}

/* Note globale encadrée de deux branches de laurier (capture). */
.auth-card--checkout .auth-rating {
    justify-content: center;
    gap: 14px;
    margin: 0 0 2rem;
}

.auth-rating__laurel {
    flex-shrink: 0;
    width: 42px;
    height: 58px;
    color: var(--color-primary, #2563eb);
}

.auth-rating__laurel--right {
    transform: scaleX(-1);
}

.auth-rating__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.auth-rating__line {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.auth-card--checkout .auth-rating__score {
    font-size: 34px;
}

.auth-card--checkout .auth-rating__stars {
    color: #f6b01e;
    font-size: 26px;
    letter-spacing: 2px;
}

.auth-card--checkout .auth-rating__label {
    font-size: 14px;
}

/* Rangée du bas : trois bénéfices en pastilles rondes blanches. */
.auth-perks {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 18px;
    margin: 0;
    padding: 0;
}

.auth-perk {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #1f2937;
    font-size: 14.5px;
    font-weight: 500;
}

.auth-perk__icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 9999px;
    background: #ffffff;
    color: var(--color-primary, #2563eb);
    box-shadow: 0 2px 10px rgba(23, 43, 89, 0.08);
}

.auth-perk__icon svg {
    width: 21px;
    height: 21px;
}

@media (max-width: 1280px) {
    /* L'annotation manuscrite passerait par-dessus les bénéfices. */
    .auth-card--checkout .auth-split__aside > .auth-note--aside {
        display: none;
    }

    .auth-card--checkout .auth-quote {
        padding: 14px;
    }

    .auth-card--checkout .auth-quote__text {
        font-size: 13px;
    }
}

/* Sous 900 px, la colonne de droite disparaît (règle du bloc d'authentification) : le
   formulaire doit alors reprendre TOUTE la largeur, sinon il reste sur sa moitié. */
@media (max-width: 900px) {
    .auth-card--checkout .auth-split__main {
        flex: 1 1 100%;
        padding: 1.75rem 1.25rem;
    }
}

@media (max-width: 520px) {
    .auth-card--checkout .auth-logo {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
}

/* ==========================================================================
   SÉLECTEUR DE PÉRIODICITÉ — <x-billing-period-selector />
   Trois segments dans une barre grise, segment actif en bleu plein, pastille
   de remise verte collée au libellé. Remplace l'ancien interrupteur à deux
   positions (.billing-toggle), qui ne savait pas compter jusqu'à trois.
   ========================================================================== */
.billing-period {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin: 0 auto 2rem;
    padding: 5px;
    border-radius: 9999px;
    background-color: var(--color-bg-secondary, #eef0f4);
    transition: background-color 0.3s ease;
}

/* Le sélecteur est centré dans sa colonne, quelle que soit la page hôte. */
.subscription-plans + .billing-period,
.section-card__header + .billing-period {
    display: flex;
    width: fit-content;
}

.billing-period__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: none;
    border-radius: 9999px;
    background: transparent;
    color: var(--color-text-muted, #6b7280);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.billing-period__option:hover {
    color: var(--color-text-dark, #111827);
}

.billing-period__option--active {
    background-color: var(--color-primary, #2563eb);
    color: #ffffff;
}

.billing-period__option--active:hover {
    color: #ffffff;
}

/* Pastille de remise : c'est un LIBELLÉ fixe (-15% / -30%), jamais un calcul. */
.billing-period__badge {
    padding: 2px 8px;
    border-radius: 9999px;
    background-color: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 12px;
    font-weight: 700;
}

.billing-period__option--active .billing-period__badge {
    background-color: rgba(255, 255, 255, 0.22);
    color: #ffffff;
}

[data-theme="dark"] .billing-period {
    background-color: var(--color-bg-hover, #1f2937);
}

[data-theme="dark"] .billing-period__badge {
    background-color: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

/* Phrase d'accroche de la formule, au-dessus du prix (maquettes du cahier des charges). */
.subscription-plan__tagline {
    margin: 0 0 12px;
    color: var(--color-text-secondary, #6b7280);
    font-size: 15px;
    line-height: 1.4;
    transition: color 0.3s ease;
}

/* Mention de facturation, sous le prix : « par mois, facturé par trimestre ». */
.subscription-plan__billed {
    margin-top: 4px;
    color: var(--color-text-muted, #6b7280);
    font-size: 13px;
    transition: color 0.3s ease;
}

/* Rappel de la remise à côté du prix, sur les cartes. */
/* `[hidden]` doit l'emporter : une règle auteur qui pose `display` bat le display:none de la
   feuille par défaut du navigateur. Sans ces trois sélecteurs, la pastille vide laissait un trait
   à côté du prix, et le bouton « Plan actuel » s'affichait EN PLUS de « Choisir ce plan ». */
.subscription-plan__discount[hidden],
.subscription-plan__current[hidden],
.subscription-plan__form[hidden] {
    display: none !important;
}

.subscription-plan__discount {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 9999px;
    background-color: rgba(16, 185, 129, 0.12);
    color: #059669;
    font-size: 12px;
    font-weight: 700;
    vertical-align: middle;
}

[data-theme="dark"] .subscription-plan__discount {
    background-color: rgba(16, 185, 129, 0.18);
    color: #34d399;
}

@media (max-width: 640px) {
    .billing-period {
        width: 100%;
        justify-content: space-between;
        gap: 2px;
    }

    .billing-period__option {
        flex: 1 1 0;
        justify-content: center;
        padding: 10px 8px;
        font-size: 14px;
        gap: 4px;
    }

    .billing-period__badge {
        padding: 2px 6px;
        font-size: 11px;
    }
}

/* ==========================================================================
   POP-UP DE CHANGEMENT DE PÉRIODICITÉ — lot 3, capture 2 du cahier des charges
   Deux colonnes : à gauche ce qu'on quitte et ce qu'on prend, à droite quand et
   combien. Ouverte par le bouton de l'encart `.sidebar__promo-upsell`, elle réutilise
   la coquille `.modal` du projet (openModal / closeModal du layout).
   ========================================================================== */
.period-switch__container {
    width: 100%;
    max-width: 940px;
}

.period-switch__grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    overflow: hidden;
    border-radius: 16px;
    background: var(--card-bg, #ffffff);
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.28);
}

.period-switch__close {
    position: absolute;
    top: 12px;
    right: 14px;
    z-index: 3;
}

/* ------------------------------------------------------------------ gauche */
.period-switch__aside {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 28px 24px;
    background: linear-gradient(170deg, #1d3a75 0%, #14264c 100%);
    color: #eaf0fb;
}

.period-switch__title {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 8px;
    color: #ffffff;
    font-size: 1.25rem;
    font-weight: 700;
    line-height: 1.25;
}

.period-switch__title-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #9dc0ff;
}

.period-switch__lead {
    margin: 0;
    color: #b9c9e6;
    font-size: 0.875rem;
    line-height: 1.5;
}

.period-switch__plans {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.07);
}

.period-switch__plans-label {
    margin: 0;
    color: #92a8cd;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.period-switch__plans-line {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0 0;
    color: #ffffff;
    font-size: 1.0625rem;
    font-weight: 700;
}

.period-switch__plans-line--new {
    color: #9dc0ff;
}

.period-switch__plans-suffix {
    color: #92a8cd;
    font-size: 0.8125rem;
    font-weight: 500;
}

.period-switch__plans-arrow {
    display: block;
    width: 18px;
    height: 18px;
    margin: 10px auto;
    color: #6f8dc0;
}

.period-switch__saving {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 14px 0 0;
    color: #6ee7b7;
    font-size: 0.875rem;
    font-weight: 600;
}

.period-switch__saving-icon {
    width: 17px;
    height: 17px;
}

.period-switch__method {
    margin-top: auto;
}

.period-switch__method-label {
    margin: 0 0 8px;
    color: #92a8cd;
    font-size: 0.6875rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.period-switch__card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border: 1px solid rgba(110, 231, 183, 0.55);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
}

.period-switch__card-icon {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: #9dc0ff;
}

.period-switch__card-name {
    display: block;
    color: #ffffff;
    font-size: 0.875rem;
    font-weight: 600;
}

.period-switch__card-note {
    display: block;
    color: #92a8cd;
    font-size: 0.75rem;
}

.period-switch__method-help {
    margin: 10px 0 0;
    color: #92a8cd;
    font-size: 0.75rem;
}

.period-switch__method-help a {
    color: #9dc0ff;
}

/* ------------------------------------------------------------------ droite */
.period-switch__main {
    padding: 28px 28px 24px;
    background: var(--card-bg, #ffffff);
}

.period-switch__tabs {
    display: flex;
    gap: 6px;
    padding: 5px;
    border-radius: 10px;
    background: var(--bg-secondary, #f1f5f9);
}

.period-switch__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.period-switch__tab--on {
    background: var(--card-bg, #ffffff);
    color: var(--text-primary, #0f172a);
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12);
}

.period-switch__tab-badge {
    padding: 2px 7px;
    border-radius: 999px;
    background: #dcfce7;
    color: #15803d;
    font-size: 0.6875rem;
    font-weight: 700;
}

.period-switch__section {
    margin: 22px 0 10px;
    color: var(--text-primary, #0f172a);
    font-size: 0.9375rem;
    font-weight: 700;
}

.period-switch__choices {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.period-switch__choice {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
    padding: 13px 15px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.period-switch__choice--on {
    border-color: #2563eb;
    background: rgba(37, 99, 235, 0.06);
}

.period-switch__choice input {
    margin-top: 2px;
    accent-color: #2563eb;
}

.period-switch__choice-title {
    display: block;
    color: var(--text-primary, #0f172a);
    font-size: 0.875rem;
    font-weight: 600;
}

.period-switch__choice-text {
    display: block;
    margin-top: 2px;
    color: var(--text-secondary, #64748b);
    font-size: 0.8125rem;
    line-height: 1.4;
}

.period-switch__notice {
    margin: 10px 0 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: rgba(37, 99, 235, 0.07);
    color: var(--text-secondary, #475569);
    font-size: 0.8125rem;
    line-height: 1.45;
}

.period-switch__summary {
    margin: 0;
    padding: 0;
}

.period-switch__summary-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 7px 0;
    color: var(--text-secondary, #64748b);
    font-size: 0.875rem;
}

.period-switch__summary-row dt,
.period-switch__summary-row dd {
    margin: 0;
}

.period-switch__summary-minus {
    color: #15803d;
    font-weight: 600;
}

.period-switch__summary-row--total {
    margin-top: 6px;
    padding-top: 12px;
    border-top: 1px solid var(--border-color, #e2e8f0);
    color: var(--text-primary, #0f172a);
    font-size: 1rem;
    font-weight: 700;
}

.period-switch__then {
    margin: 8px 0 0;
    color: var(--text-secondary, #64748b);
    font-size: 0.8125rem;
}

.period-switch__actions {
    display: flex;
    gap: 12px;
    margin-top: 20px;
}

.period-switch__cancel {
    padding: 12px 20px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary, #64748b);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
}

.period-switch__cancel:hover {
    background: var(--bg-secondary, #f1f5f9);
}

.period-switch__confirm {
    flex: 1 1 auto;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.period-switch__confirm:hover {
    background: #1d4ed8;
}

.period-switch__confirm:disabled {
    opacity: 0.65;
    cursor: progress;
}

.period-switch__legal {
    margin: 12px 0 0;
    color: var(--text-secondary, #94a3b8);
    font-size: 0.75rem;
    text-align: center;
}

.period-switch__legal a {
    color: #2563eb;
}

/* ------------------------------------------------------------------ mobile */
@media (max-width: 768px) {
    .period-switch__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .period-switch__aside {
        padding: 22px 20px;
    }

    .period-switch__method {
        margin-top: 4px;
    }

    .period-switch__main {
        padding: 20px;
    }

    .period-switch__actions {
        flex-direction: column-reverse;
    }

    .period-switch__cancel,
    .period-switch__confirm {
        width: 100%;
    }
}

/* =============================================================================
   POP-UP « DÉBLOQUE L'ACCÈS COMPLET À ONECLICKBRAND »  (lot 2, maquette capture 5)
   -----------------------------------------------------------------------------
   Remplace l'ancienne pop-up d'upsell partout où elle s'ouvre. Deux colonnes :
   la gauche opérationnelle sur fond blanc, la droite marketing sur fond bleu très
   clair. Les blocs internes (formules, sélecteur de période, champs de carte)
   réutilisent les styles de la page d'essai — ils ne sont pas redéfinis ici.

   ⚠️ Le bouton ne s'appuie PAS sur `.btn-auth` : cette classe n'est définie que
   dans le layout d'authentification, alors que la pop-up vit dans le layout du
   SaaS. Elle porte donc ses propres règles.
   ============================================================================= */

/* Les blocs de la pop-up portent des `display` explicites, qui l'emportent sur le
   comportement par défaut de l'attribut [hidden] : sans cette règle, l'étape 2
   « Plein accès » et le formulaire de carte s'affichent dès l'ouverture. */
.unlock-modal [hidden] {
    display: none !important;
}

.unlock-modal {
    position: fixed;
    inset: 0;
    z-index: 1200;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.unlock-modal .modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}

.unlock-modal__shell {
    position: relative;
    z-index: 1;
    width: min(1120px, 100%);
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 24px;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.28);
}

.unlock-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.85);
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.unlock-modal__close:hover {
    background: #eef2f7;
    color: #0f172a;
}

.unlock-modal__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.unlock-modal__pane {
    padding: 32px;
}

.unlock-modal__pane--form {
    display: flex;
    flex-direction: column;
}

/* Colonne marketing : le dégradé bleu de la maquette et ses deux pans plus clairs. */
.unlock-modal__pane--aside {
    position: relative;
    overflow: hidden;
    padding: 36px 36px 30px;
    background: linear-gradient(155deg, #eaf2ff 0%, #e2ecff 55%, #d9e6ff 100%);
    border-radius: 0 24px 24px 0;
}

.unlock-modal__pane--aside::before,
.unlock-modal__pane--aside::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.4);
    transform: rotate(35deg);
}

.unlock-modal__pane--aside::before {
    top: 150px;
    right: -230px;
    width: 280px;
    height: 560px;
}

.unlock-modal__pane--aside::after {
    bottom: -320px;
    left: -140px;
    width: 440px;
    height: 440px;
}

.unlock-modal__pane--aside > * {
    position: relative;
    z-index: 1;
}

.unlock-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 24px;
}

.unlock-modal__logo {
    height: 38px;
    width: auto;
}

.unlock-modal__secure {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #475569;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.unlock-modal__secure-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #0f172a;
}

.unlock-modal__steps {
    margin-bottom: 20px;
}

.unlock-modal__form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.unlock-modal__card {
    margin: 0;
}

.unlock-modal__error {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #fef2f2;
    color: #b91c1c;
    font-size: 14px;
}

.unlock-modal__submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 0.95rem;
    border: none;
    border-radius: 10px;
    background: #2563eb;
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.unlock-modal__submit:hover:not(:disabled) {
    background: #1d4ed8;
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.35);
}

.unlock-modal__submit:disabled {
    opacity: 0.7;
    cursor: progress;
}

/* Bouton éteint (abonnement manuel, impersonation, Shopify Billing) : il reste
   visible et garde sa place, avec son motif en infobulle. */
.unlock-modal__submit--off {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.unlock-modal__locked {
    margin: -8px 0 0;
    color: #64748b;
    font-size: 13px;
    text-align: center;
}

.unlock-modal__guarantees {
    margin-top: 18px;
}

.unlock-modal__legal {
    margin-top: 12px;
}

.unlock-modal__later {
    margin-top: 12px;
    align-self: center;
    border: none;
    background: none;
    color: #64748b;
    font-size: 14px;
    text-decoration: underline;
    cursor: pointer;
}

.unlock-modal__later:hover {
    color: #0f172a;
}

/* Étape 2 « Plein accès » : la confirmation reste dans la pop-up. */
.unlock-modal__done {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 28px 12px;
    text-align: center;
}

.unlock-modal__done-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #dcfce7;
    color: #16a34a;
}

.unlock-modal__done-title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.unlock-modal__done-text {
    margin: 0;
    color: #475569;
    font-size: 15px;
    max-width: 380px;
}

/* --- Colonne de droite : chaque bloc suit la maquette « capture 5 » --- */

.unlock-aside__badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 16px;
    border-radius: 999px;
    background: #d8e6fc;
    color: #1d4ed8;
    font-size: 14px;
    font-weight: 500;
}

/* L'éclair de la maquette est plein et jaune. */
.unlock-aside__badge-icon {
    width: 16px;
    height: 16px;
    color: #f5b301;
    fill: currentColor;
}

.unlock-aside__title {
    margin: 22px 0 10px;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.08;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #0a0a0f;
}

.unlock-aside__accent {
    color: #1668ff;
}

.unlock-aside__text {
    margin: 0 0 18px;
    color: #6b7a99;
    font-size: 15.5px;
    line-height: 1.4;
}

/* Avantages : de simples lignes (pas de cartes), la note manuscrite posée à droite. */
.unlock-aside__benefits {
    position: relative;
    margin-bottom: 18px;
}

.unlock-aside__list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.unlock-aside__benefit {
    display: flex;
    align-items: center;
    gap: 16px;
}

.unlock-aside__tile {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 10px;
    background: linear-gradient(145deg, #dde9fd 0%, #d2e2fb 100%);
    color: #1668ff;
}

.unlock-aside__glyph {
    width: 22px;
    height: 22px;
}

/* Lucide ne dessine qu'au trait : les pictos pleins de la maquette sont remplis ici. */
.unlock-aside__glyph--filled {
    fill: currentColor;
}

.unlock-aside__benefit-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.unlock-aside__benefit-title {
    color: #111827;
    font-size: 14.5px;
    font-weight: 500;
}

.unlock-aside__benefit-text {
    color: #7b8aa5;
    font-size: 13px;
}

.unlock-aside__note {
    position: absolute;
    top: -6px;
    right: -26px;
    pointer-events: none;
    text-align: center;
}

/* Police manuscrite « Caveat », chargée par le layout du SaaS avec Inter. */
.unlock-aside__note-text {
    margin: 0;
    color: #1668ff;
    font-family: 'Caveat', cursive;
    font-size: 23px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    transform: rotate(-12deg);
}

.unlock-aside__note-arrow {
    display: block;
    width: 64px;
    height: 72px;
    margin: 4px 0 0 30px;
    color: #1668ff;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* Avis : cartes blanches à hauteur égale, auteur et étoiles calés en bas. */
.unlock-aside__reviews {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
    margin: 0 -20px 16px;
}

.unlock-aside__review {
    display: flex;
    flex-direction: column;
    margin: 0;
    padding: 14px 14px 12px;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.07);
}

.unlock-aside__review-text {
    margin: 0 0 14px;
    color: #111827;
    font-size: 14px;
    line-height: 1.32;
}

.unlock-aside__review-foot {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
}

/* Photo de profil du créateur, à gauche du pied de l'avis (mêmes fichiers que /register). */
.unlock-aside__review-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9999px;
    object-fit: cover;
    box-shadow: 0 2px 7px rgba(30, 64, 175, 0.16);
}

.unlock-aside__review-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.unlock-aside__review-author {
    color: #6b7a99;
    font-size: 13.5px;
}

/* Pastille de plateforme : logo plein + nombre d'abonnés. */
.unlock-aside__review-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.unlock-aside__review-logo {
    flex-shrink: 0;
    display: block;
}

.unlock-aside__review-audience {
    color: #6b7280;
    font-size: 12.5px;
}

.unlock-aside__stars {
    display: inline-flex;
    gap: 3px;
}

.unlock-aside__star {
    width: 15px;
    height: 15px;
    fill: #fbbf24;
}

.unlock-aside__stars--lg .unlock-aside__star {
    width: 20px;
    height: 20px;
}

/* Note globale encadrée de deux demi-couronnes de laurier. */
.unlock-aside__rating {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-bottom: 18px;
}

.unlock-aside__laurel {
    display: flex;
    color: #1668ff;
}

.unlock-aside__laurel--right {
    transform: scaleX(-1);
}

.unlock-aside__laurel-svg {
    width: 32px;
    height: 64px;
}

.unlock-aside__laurel-stem {
    fill: none;
    stroke: currentColor;
    stroke-width: 2.2;
    stroke-linecap: round;
}

.unlock-aside__laurel-leaves {
    fill: currentColor;
}

.unlock-aside__rating-body {
    text-align: center;
}

.unlock-aside__rating-line {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0;
}

.unlock-aside__rating-score {
    color: #0a0a0f;
    font-size: 32px;
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.unlock-aside__rating-label {
    margin: 2px 0 0;
    color: #6b7a99;
    font-size: 14.5px;
}

/* Trois arguments, chacun avec son picto dans un rond blanc. */
.unlock-aside__pills {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    margin: 0 -16px;
    padding: 0;
    list-style: none;
}

.unlock-aside__pill {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #5b6b88;
    font-size: 14px;
    white-space: nowrap;
}

.unlock-aside__pill-dot {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #1668ff;
    box-shadow: 0 4px 14px rgba(30, 64, 175, 0.1);
}

.unlock-aside__pill-dot .unlock-aside__glyph {
    width: 20px;
    height: 20px;
}

/* Sous 1100 px, la colonne n'a plus la place de la note manuscrite sans recouvrir les avantages. */
@media (max-width: 1100px) {
    .unlock-aside__note {
        display: none;
    }
}

/* La maquette mobile ne montre que la colonne de gauche — même règle que la page
   d'inscription du lot 4. */
@media (max-width: 900px) {
    .unlock-modal {
        padding: 12px;
    }

    .unlock-modal__grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .unlock-modal__pane--aside {
        display: none;
    }

    .unlock-modal__pane {
        padding: 24px 20px;
    }

    /* La croix de fermeture passait au-dessus de « Paiement sécurisé Stripe » : on lui laisse sa
       place, et le logo rétrécit pour que le mot « Paiement » tienne à côté. */
    .unlock-modal__head {
        gap: 12px;
        padding-right: 40px;
    }

    .unlock-modal__logo {
        height: 30px;
    }

    .unlock-modal__secure {
        font-size: 12px;
    }
}

/* ============================================
         SÉLECTEUR DE LANGUE (en-tête, à droite du bouton sombre/clair)
         Composant : resources/views/components/language-switcher.blade.php
         ============================================ */

.lang-switcher {
    position: relative;
    display: inline-block;
    margin-right: var(--spacing-md);
}

.lang-switcher__btn {
    height: 40px;
    min-width: 40px;
    padding: 0 10px;
    border-radius: 20px;
    background-color: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    color: var(--color-text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.lang-switcher__btn:hover {
    background-color: var(--color-bg-hover);
    transform: scale(1.05);
}

.lang-switcher__icon {
    width: 18px;
    height: 18px;
    color: var(--color-text-dark);
}

.lang-switcher__item-code {
    min-width: 22px;
    font-size: 11px;
    font-weight: 700;
    color: var(--color-text-muted);
}

.lang-switcher__menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 160px;
    padding: 4px;
    background-color: var(--dropdown-bg);
    border: 1px solid var(--dropdown-border);
    border-radius: var(--border-radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 1000;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.lang-switcher__menu[hidden] {
    display: none;
}

.lang-switcher__form {
    margin: 0;
}

.lang-switcher__item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border: none;
    border-radius: var(--border-radius-sm, 6px);
    background: transparent;
    color: var(--card-text);
    font-size: 14px;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.lang-switcher__item:hover {
    background-color: var(--dropdown-hover);
}

.lang-switcher__item--active {
    font-weight: 600;
    color: var(--color-primary);
}

/* Pages de connexion / inscription : coin supérieur droit. */
.lang-switcher--auth {
    position: fixed;
    top: var(--spacing-md);
    right: var(--spacing-md);
    margin-right: 0;
    z-index: 1000;
}

@media (max-width: 640px) {
    .lang-switcher__code {
        display: none;
    }
}


/* /top-niches : sélecteur de marché + rappel « le marché n'est pas la langue du site » */
.filters-bar__market {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.filters-bar__market-hint {
    margin: 0;
    max-width: 260px;
    font-size: 11px;
    line-height: 1.35;
    color: var(--color-text-muted);
    transition: color 0.3s ease;
}

/* Page de contenu publique (CGU, mentions légales) servie à un visiteur dans le layout
   d'authentification : la carte de 440 px est trop étroite pour un texte long. */
.auth-container .auth-card.auth-card--page {
    max-width: 860px;
}

/* Sous-titres des vidéos — /admin/content#dashboard (partial video-subtitles). */
.subtitles-admin + .subtitles-admin {
    margin-top: 24px;
    padding-top: 24px;
    border-top: 1px solid var(--color-border, #e5e7eb);
}
.subtitles-admin__video {
    margin: 0 0 12px;
}
.subtitles-admin__tracks {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.subtitles-admin__track {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.subtitles-admin__lang {
    min-width: 90px;
    font-weight: 600;
}
.subtitles-admin__link {
    font-size: 13px;
}

/* ==========================================================================
   Espace Affiliate Manager (carte #300) : /affiliate-manager
   Cartes blanches, bordures légères, bleu OneClickBrand pour ce qui compte.
   ========================================================================== */
.badge--spaced {
    margin-left: 8px;
}

.am {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.am-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

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

.am-toolbar__label {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.am-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.am-kpi {
    background-color: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

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

.am-kpi__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--border-radius-md);
    background-color: var(--color-blue-light);
    color: var(--color-primary);
}

.am-kpi__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
}

.am-kpi__value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    line-height: 1.15;
}

.am-kpi__delta {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

/* La carte « Mes commissions » : les gains personnels du manager, mis en avant. */
.am-kpi--highlight {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 10px 24px -12px rgba(37, 99, 235, 0.55);
}

.am-kpi--highlight .am-kpi__label,
.am-kpi--highlight .am-kpi__delta {
    color: rgba(255, 255, 255, 0.85);
}

.am-kpi--highlight .am-kpi__icon {
    background-color: rgba(255, 255, 255, 0.18);
    color: var(--color-white);
}

.am-kpi--highlight .am-delta {
    color: var(--color-white);
}

.am-delta {
    font-weight: var(--font-weight-bold);
    color: var(--color-success);
}

.am-delta--down {
    color: var(--color-danger);
}

.am-delta--neutral {
    color: var(--color-text-muted);
}

.am-section {
    margin-bottom: 0;
}

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

.am-commissions {
    display: grid;
    grid-template-columns: minmax(280px, 2fr) 3fr;
    gap: var(--spacing-lg);
}

.am-earned {
    background-color: var(--color-blue-light);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    transition: background-color 0.3s ease;
}

.am-earned__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-primary);
}

.am-earned__value {
    font-size: 2.75rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    line-height: 1.1;
    margin: var(--spacing-sm) 0;
}

[data-theme="dark"] .am-earned__label,
[data-theme="dark"] .am-earned__value {
    color: #bfdbfe;
}

.am-earned__delta {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.am-breakdown {
    margin: 0;
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.am-breakdown__row {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-md);
    padding: 0.75rem var(--spacing-md);
    border-bottom: 1px solid var(--card-border);
    font-size: var(--font-size-sm);
}

.am-breakdown__row:last-child {
    border-bottom: none;
}

.am-breakdown__row dt {
    color: var(--color-text-light);
}

.am-breakdown__row dd {
    margin: 0;
    font-weight: var(--font-weight-bold);
    color: var(--card-text);
    white-space: nowrap;
}

.am-breakdown__row--total dd {
    color: var(--color-primary);
}

.am-chart-card {
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    transition: border-color 0.3s ease;
}

.am-chart-card__title {
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-bold);
    margin: 0 0 var(--spacing-md);
}

.am-chart {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: 220px auto;
    column-gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
}

.am-chart__y {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    text-align: right;
    transform: translateY(-0.5em);
    height: calc(100% + 1em);
}

.am-chart__plot {
    position: relative;
    height: 100%;
}

.am-chart__svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

.am-chart__grid {
    stroke: var(--card-border);
    stroke-width: 1;
}

.am-chart__line {
    fill: none;
    stroke: var(--color-primary);
    stroke-width: 2.5;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.am-chart__stop-top {
    stop-color: var(--color-primary);
    stop-opacity: 0.22;
}

.am-chart__stop-bottom {
    stop-color: var(--color-primary);
    stop-opacity: 0;
}

.am-chart__hit {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border-radius: 50%;
    cursor: default;
}

.am-chart__hit:hover {
    background-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--card-bg);
}

.am-chart__empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.am-chart__x {
    grid-column: 2;
    position: relative;
    height: 1.6em;
    margin-top: var(--spacing-xs);
}

.am-chart__x span {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    white-space: nowrap;
}

.am-steps {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.am-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-lg) var(--spacing-md);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-xl);
    text-align: center;
    transition: border-color 0.3s ease;
}

.am-step__num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--color-primary);
    color: var(--color-white);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-bold);
}

.am-step__icon {
    color: var(--color-primary);
    margin: var(--spacing-sm) 0 var(--spacing-xs);
}

.am-step__title {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.am-step__value {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
}

.am-step__hint {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.am-steps__arrow {
    flex-shrink: 0;
    color: var(--color-text-muted);
}

.am-note {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin: var(--spacing-lg) 0 0;
    padding: 0.875rem var(--spacing-md);
    border-radius: var(--border-radius-lg);
    background-color: var(--badge-bg-success);
    color: var(--badge-text-success);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

.am-filters {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    margin-bottom: var(--spacing-md);
}

.am-filters__search {
    position: relative;
    flex: 1;
    max-width: 360px;
}

.am-filters__search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}

.am-filters__input {
    padding-left: 36px;
}

.am-chips {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.am-chip {
    padding: 0.4rem 0.9rem;
    border: 1px solid var(--card-border);
    border-radius: 999px;
    font-size: var(--font-size-sm);
    color: var(--card-text);
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.am-chip:hover {
    border-color: var(--color-primary);
}

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

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

.am-person__avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    flex-shrink: 0;
}

.am-person__name {
    font-weight: var(--font-weight-medium);
}

.am-person__email {
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.am-table__mine {
    color: var(--color-primary);
}

.am-table__actions {
    justify-content: flex-end;
}

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

.am-invite__lead {
    margin: 0 0 var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
}

.am-invite__row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-md);
}

.am-invite__footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.75rem;
    margin-top: var(--spacing-lg);
}

.am-profile {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
    margin-bottom: 0;
}

.am-profile__avatar {
    width: 84px;
    height: 84px;
    border-radius: 50%;
}

.am-profile__info {
    flex: 1;
    min-width: 220px;
}

.am-profile__name {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
}

.am-profile__email,
.am-profile__since {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin-top: var(--spacing-xs);
}

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

.am-duo {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: var(--spacing-lg);
}

.am-split {
    display: flex;
    align-items: center;
    gap: var(--spacing-xl);
    margin-top: var(--spacing-md);
}

.am-donut {
    width: 180px;
    height: 180px;
    flex-shrink: 0;
}

.am-donut__track {
    fill: none;
    stroke: var(--card-border);
    stroke-width: 5;
}

.am-donut__seg {
    fill: none;
    stroke-width: 5;
}

.am-donut__seg--creator {
    stroke: var(--color-primary);
}

.am-donut__seg--manager {
    stroke: var(--color-danger);
}

.am-donut__seg--platform {
    stroke: var(--color-info);
    stroke-opacity: 0.45;
}

.am-donut__value {
    font-size: 5px;
    font-weight: var(--font-weight-bold);
    text-anchor: middle;
    fill: var(--card-text);
}

.am-donut__label {
    font-size: 3px;
    text-anchor: middle;
    fill: var(--color-text-muted);
}

.am-legend {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.am-legend__item {
    position: relative;
    padding-left: 18px;
    font-size: var(--font-size-sm);
}

.am-legend__item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.35em;
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.am-legend__item--creator::before {
    background-color: var(--color-primary);
}

.am-legend__item--manager::before {
    background-color: var(--color-danger);
}

.am-legend__item--platform::before {
    background-color: var(--color-info);
    opacity: 0.45;
}

.am-legend__item dt {
    color: var(--color-text-light);
}

.am-legend__item dd {
    margin: 2px 0 0;
    font-weight: var(--font-weight-bold);
}

@media (max-width: 1100px) {
    .am-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .am-commissions,
    .am-duo {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .am-kpis,
    .am-invite__row {
        grid-template-columns: 1fr;
    }

    .am-steps {
        flex-direction: column;
    }

    .am-steps__arrow {
        transform: rotate(90deg);
    }

    .am-split {
        flex-direction: column;
    }
}

/* ===================================
   ACCÈS D'ÉQUIPE (/admin/users) ET GRANDS ONGLETS DE /admin/affiliation — carte #332
   =================================== */
/* Modale « Envoyer un accès d'équipe » : aide qui suit le rôle choisi, espacement des champs */
.team-access-help {
    margin-bottom: 20px;
}

.team-access-help__text {
    margin: 8px 0 0 0;
}

/* La feuille globale impose `.alert strong { display: block }` : dans la phrase d'aide, le gras reste en ligne. */
.team-access-help__text strong {
    display: inline;
    margin-bottom: 0;
}

/* Classement des Affiliate Managers : « Voir son espace » sur une seule ligne, boutons de même hauteur */
.am-admin-actions {
    flex-wrap: nowrap;
    align-items: stretch;
}

.am-admin-actions .btn-action {
    white-space: nowrap;
}

.team-access-field {
    margin-top: 16px;
}

/* Grands onglets « Affiliés » / « Affiliate Managers » : des liens, pas des boutons JS */
.tabs-nav--main {
    margin-bottom: var(--spacing-lg);
}

.tabs-nav--main .tab-button {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    text-decoration: none;
    font-size: var(--font-size-lg);
}

.tabs-nav--main + .am-toolbar {
    margin-bottom: var(--spacing-lg);
}

/* Onglet admin « Usage Semrush » : ligne d'un utilisateur au-dessus du seuil d'alerte (semrush_usage_alert_units) */
.semrush-usage-row--alert td { background: #fef2f2; }

/* ===================================
   TRACKING RENTABILITÉ USER (/admin/profitability) — carte #333
   =================================== */
.prof {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
}

.prof-segments {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--spacing-md);
}

.prof-segment {
    background-color: var(--card-bg);
    color: var(--card-text);
    border: 1px solid var(--card-border);
    border-radius: var(--border-radius-xl);
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.prof-segment__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
}

.prof-segment__title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.prof-segment__subtitle {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin: var(--spacing-sm) 0 0 0;
}

.prof-lines {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.prof-line {
    display: flex;
    justify-content: space-between;
    gap: var(--spacing-sm);
    font-size: var(--font-size-sm);
}

.prof-line dt {
    color: var(--color-text-light);
}

.prof-line dd {
    margin: 0;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.prof-line--total {
    border-top: 1px solid var(--card-border);
    padding-top: 4px;
    font-size: var(--font-size-base);
}

.prof-positive {
    color: var(--color-success);
}

.prof-negative {
    color: var(--color-danger);
}

.prof-pct {
    font-weight: normal;
    color: var(--color-text-light);
}

.prof-table-total td {
    font-weight: var(--font-weight-bold);
}

.prof-note {
    font-size: var(--font-size-sm);
    color: var(--color-text-light);
    margin: var(--spacing-sm) 0 0 0;
}

.prof-settings {
    display: flex;
    align-items: flex-end;
    gap: var(--spacing-md);
    flex-wrap: wrap;
}

@media (max-width: 1200px) {
    .prof-segments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 640px) {
    .prof-segments {
        grid-template-columns: 1fr;
    }
}


/* ==========================================================================
   ESPACE SAV (carte #359) : Mailing, Live chat, Réglages (préfixe sd-)
   et chatbot d'aide des utilisateurs (préfixe sc-).
   Couleurs des 4 tags : orange = Mailing en attente, vert = Mailing résolu,
   violet = Live chat en cours, bleu = Live chat résolu.
   ========================================================================== */
:root {
    --sd-orange: #f59e0b;
    --sd-green: #10b981;
    --sd-purple: #8b5cf6;
    --sd-blue: #3b82f6;
    --sd-grey: #9ca3af;
    --sd-orange-bg: rgba(245, 158, 11, 0.12);
    --sd-green-bg: rgba(16, 185, 129, 0.12);
    --sd-purple-bg: rgba(139, 92, 246, 0.12);
    --sd-blue-bg: rgba(59, 130, 246, 0.12);
    --sd-grey-bg: rgba(156, 163, 175, 0.15);
    --sd-panel-height: calc(100vh - 210px);
}

[data-theme="dark"] {
    --sd-purple: #a78bfa;
    --sd-orange-bg: rgba(245, 158, 11, 0.2);
    --sd-green-bg: rgba(16, 185, 129, 0.2);
    --sd-purple-bg: rgba(167, 139, 250, 0.2);
    --sd-blue-bg: rgba(59, 130, 246, 0.22);
    --sd-grey-bg: rgba(156, 163, 175, 0.2);
}

/* Texte lu par les lecteurs d'écran seulement */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.sd__notice {
    margin-bottom: 16px;
}

.sd-muted {
    color: var(--color-text-light);
    font-size: 13px;
}

.sd-link {
    color: var(--color-primary);
    text-decoration: none;
}

.sd-link:hover {
    text-decoration: underline;
}

/* Pastilles de couleur et étiquettes de tag */
.sd-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.sd-dot--orange { background: var(--sd-orange); }
.sd-dot--green { background: var(--sd-green); }
.sd-dot--purple { background: var(--sd-purple); }
.sd-dot--blue { background: var(--sd-blue); }
.sd-dot--brand { background: var(--color-primary); }

.sd-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.sd-pill--orange { color: var(--sd-orange); background: var(--sd-orange-bg); }
.sd-pill--green { color: var(--sd-green); background: var(--sd-green-bg); }
.sd-pill--purple { color: var(--sd-purple); background: var(--sd-purple-bg); }
.sd-pill--blue { color: var(--sd-blue); background: var(--sd-blue-bg); }
.sd-pill--grey { color: var(--color-text-light); background: var(--sd-grey-bg); }

.sd-tag-select--orange { border-color: var(--sd-orange); }
.sd-tag-select--green { border-color: var(--sd-green); }
.sd-tag-select--purple { border-color: var(--sd-purple); }
.sd-tag-select--blue { border-color: var(--sd-blue); }

.sd-btn--purple { color: var(--sd-purple); border-color: var(--sd-purple); }
.sd-btn--blue { color: var(--sd-blue); border-color: var(--sd-blue); }

.sd-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-blue-light);
    color: var(--color-primary);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
}

.sd-avatar--lg {
    width: 52px;
    height: 52px;
    font-size: 18px;
}

/* Mise en page Mailing (dossiers | liste | fil) et Live chat (liste | fil | fiche client) */
.sd-mail,
.sd-live {
    display: grid;
    grid-template-columns: 220px minmax(260px, 340px) minmax(0, 1fr);
    height: var(--sd-panel-height);
    min-height: 520px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    overflow: hidden;
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sd-live {
    grid-template-columns: minmax(260px, 320px) minmax(0, 1fr) 280px;
}

.sd-folders {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 10px;
    border-right: 1px solid var(--card-border);
    overflow-y: auto;
}

.sd-folders__title {
    margin: 16px 10px 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.sd-folders__hint {
    margin: 16px 10px 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sd-folder {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    color: var(--card-text);
    font-size: 14px;
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.sd-folder:hover {
    background: var(--color-bg-hover);
}

.sd-folder--active {
    background: var(--color-blue-light);
    color: var(--color-primary);
    font-weight: 600;
}

.sd-folder__label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sd-folder small {
    color: var(--color-text-muted);
}

.sd-list,
.sd-live__list {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--card-border);
    overflow-y: auto;
}

.sd-list__head {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: 12px 16px;
    font-size: 12px;
    color: var(--color-text-muted);
    background: var(--card-bg);
    border-bottom: 1px solid var(--card-border);
}

.sd-list__pager {
    display: flex;
    justify-content: center;
    gap: 8px;
    padding: 12px;
}

.sd-item {
    display: block;
    padding: 12px 16px;
    border-bottom: 1px solid var(--card-border);
    color: var(--card-text);
    text-decoration: none;
    transition: background-color 0.2s ease;
}

.sd-item:hover {
    background: var(--color-bg-hover);
}

.sd-item--selected {
    background: var(--color-blue-light);
    box-shadow: inset 3px 0 0 var(--color-primary);
}

.sd-item__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: 14px;
}

.sd-item__name {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-item--unread .sd-item__name,
.sd-item--unread .sd-item__subject {
    font-weight: 700;
}

.sd-item time {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sd-item__subject {
    margin-top: 2px;
    font-size: 13px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-item__excerpt {
    margin-top: 2px;
    font-size: 13px;
    color: var(--color-text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sd-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
}

.sd-empty {
    padding: 24px 16px;
    font-size: 14px;
    color: var(--color-text-muted);
}

.sd-empty--center {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

/* Fil de discussion */
.sd-thread {
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
}

.sd-thread__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--card-border);
}

.sd-thread__subject {
    margin: 0 0 4px;
    font-size: 17px;
    color: var(--card-text);
}

.sd-thread__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;
}

.sd-thread__messages {
    flex: 1;
    min-height: 0;
    padding: 16px 20px;
    overflow-y: auto;
}

.sd-msg {
    max-width: 760px;
    margin-bottom: 14px;
    padding: 14px 16px;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: var(--color-bg-light);
}

.sd-msg--out {
    margin-left: auto;
    background: var(--color-blue-light);
    border-color: transparent;
}

.sd-msg__head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--card-text);
}

.sd-msg__head time {
    margin-left: auto;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sd-msg__body {
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    color: var(--card-text);
}

.sd-msg__error {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--color-danger);
}

.sd-reply {
    padding: 14px 20px 18px;
    border-top: 1px solid var(--card-border);
}

.sd-reply__label {
    display: block;
    margin-bottom: 6px;
    font-size: 13px;
    color: var(--color-text-light);
}

.sd-reply__input {
    width: 100%;
    resize: vertical;
}

.sd-reply__bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
}

.sd-reply__bar .filter-select,
.sd-thread__actions .filter-select {
    width: auto;
    flex: 0 1 280px;
}

/* Live chat */
.sd-tabs {
    display: flex;
    gap: 4px;
    padding: 12px;
    border-bottom: 1px solid var(--card-border);
}

.sd-tab {
    flex: 1;
    padding: 6px 8px;
    border-radius: 8px;
    font-size: 13px;
    text-align: center;
    color: var(--color-text-light);
    text-decoration: none;
}

.sd-tab--active {
    background: var(--color-blue-light);
    color: var(--color-primary);
    font-weight: 600;
}

.sd-live__waiting {
    margin: 0;
    padding: 8px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--sd-orange);
    background: var(--sd-orange-bg);
}

.sd-summary {
    margin: 14px 20px 0;
    padding: 12px 14px;
    border-radius: 10px;
    background: var(--sd-purple-bg);
    color: var(--card-text);
    font-size: 13px;
}

.sd-summary strong {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--sd-purple);
}

.sd-summary p {
    margin: 6px 0 0;
}

.sd-chat {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 16px 20px;
    overflow-y: auto;
}

.sd-bubble {
    max-width: 75%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 14px;
    line-height: 1.5;
    background: var(--color-bg-secondary);
    color: var(--card-text);
}

.sd-bubble--user {
    align-self: flex-start;
}

/* Côté agent, l'assistant IA parle « pour l'équipe » : à droite comme l'agent, en violet pour l'en distinguer */
.sd-bubble--ai {
    align-self: flex-end;
    background: var(--sd-purple-bg);
    border: 1px solid var(--sd-purple);
    color: var(--card-text);
}

.sd-bubble--agent {
    align-self: flex-end;
    background: var(--color-primary);
    color: var(--color-white);
}

.sd-bubble--system {
    align-self: center;
    max-width: 90%;
    background: transparent;
    font-size: 12px;
    color: var(--color-text-muted);
    text-align: center;
}

.sd-bubble__author {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    opacity: 0.75;
}

.sd-bubble__body {
    white-space: pre-wrap;
    word-break: break-word;
}

.sd-chat__form {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    padding: 14px 20px 18px;
    border-top: 1px solid var(--card-border);
}

.sd-chat__form textarea {
    flex: 1;
    resize: none;
}

.sd-client {
    padding: 20px;
    border-left: 1px solid var(--card-border);
    overflow-y: auto;
}

.sd-client__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    text-align: center;
    color: var(--card-text);
}

.sd-client__facts {
    margin: 18px 0 0;
    font-size: 13px;
}

.sd-client__facts dt {
    margin-top: 12px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--color-text-muted);
}

.sd-client__facts dd {
    margin: 2px 0 0;
    color: var(--card-text);
    word-break: break-word;
}

.sd-client__hint {
    margin-top: 20px;
}

/* Réglages SAV */
/* Marges de page comme .dashboard : sans elles, cartes et bouton « Enregistrer » collaient au menu (08/10/2026) */
.sd-settings {
    padding: var(--spacing-xl);
}

.sd-card {
    margin-bottom: 20px;
    padding: 20px 24px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 14px;
    color: var(--card-text);
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

.sd-settings__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 8px;
    font-size: 17px;
}

.sd-settings__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 20px;
    margin-top: 12px;
}

.sd-settings__pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.sd-settings__knowledge {
    width: 100%;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    font-size: 12px;
}

.sd-settings__actions {
    display: flex;
    justify-content: flex-end;
    margin: -4px 0 24px;
}

.sd-settings__tests {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 18px;
}

.sd-settings__simulate {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 640px;
}

/* Le bouton garde sa largeur (la colonne l'étirait sur 640 px) */
.sd-settings__simulate .btn {
    align-self: flex-start;
}

@media (max-width: 1280px) {
    .sd-live {
        grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
    }

    .sd-client {
        display: none;
    }
}

@media (max-width: 1024px) {
    .sd-mail {
        grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
    }

    .sd-folders {
        display: none;
    }
}

@media (max-width: 768px) {
    .sd-mail,
    .sd-live {
        grid-template-columns: 1fr;
        height: auto;
    }

    .sd-list,
    .sd-live__list {
        max-height: 320px;
        border-right: none;
        border-bottom: 1px solid var(--card-border);
    }

    .sd-settings__grid {
        grid-template-columns: 1fr;
    }

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

/* ---------- Chatbot d'aide des utilisateurs (sc-) ---------- */
.sc {
    position: fixed;
    right: 24px;
    bottom: 24px;
    z-index: 1200;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 12px;
}

.sc[hidden] {
    display: none;
}

.sc-launcher {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
}

.sc-launcher__bubble {
    display: flex;
    flex-direction: column;
    padding: 10px 14px;
    border: 1px solid var(--card-border);
    border-radius: 14px 14px 4px 14px;
    background: var(--card-bg);
    color: var(--card-text);
    font-size: 13px;
    text-align: left;
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.sc-launcher__bubble span {
    color: var(--color-text-light);
}

.sc--open .sc-launcher__bubble {
    opacity: 0;
    transform: translateX(8px);
    pointer-events: none;
}

.sc-launcher__icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 10px 28px rgba(37, 99, 235, 0.35);
    transition: transform 0.2s ease;
}

.sc-launcher:hover .sc-launcher__icon {
    transform: scale(1.05);
}

.sc-launcher__badge {
    position: absolute;
    top: -2px;
    right: -2px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 2px solid var(--card-bg);
    border-radius: 999px;
    background: var(--color-danger);
    color: var(--color-white);
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
}

.sc-launcher__badge[hidden] {
    display: none;
}

.sc-panel {
    order: -1;
    display: flex;
    flex-direction: column;
    width: 380px;
    height: min(620px, calc(100vh - 120px));
    border: 1px solid var(--card-border);
    border-radius: 18px;
    background: var(--card-bg);
    color: var(--card-text);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.22);
    overflow: hidden;
}

.sc-panel[hidden] {
    display: none;
}

.sc-panel__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 16px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #1d4ed8 100%);
    color: var(--color-white);
}

.sc-team {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.sc-team__faces {
    display: flex;
}

.sc-team__face {
    width: 32px;
    height: 32px;
    margin-right: -8px;
    border: 2px solid var(--color-white);
    border-radius: 50%;
    object-fit: cover;
    background: var(--color-blue-light);
}

.sc-panel__title {
    display: block;
    font-size: 16px;
}

.sc-panel__subtitle {
    display: block;
    font-size: 13px;
    opacity: 0.9;
}

.sc-team__status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 12px;
}

.sc-team__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22c55e;
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.3);
}

.sc-team__status--off .sc-team__dot {
    background: var(--sd-grey);
    box-shadow: none;
}

.sc-panel__tools {
    display: flex;
    gap: 2px;
}

.sc-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--color-white);
    cursor: pointer;
}

.sc-icon-btn:hover {
    background: rgba(255, 255, 255, 0.16);
}

.sc-panel__body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    padding: 16px;
    overflow-y: auto;
    background: var(--color-bg-light);
}

.sc-msg {
    align-self: flex-start;
    max-width: 85%;
    padding: 10px 13px;
    border-radius: 14px 14px 14px 4px;
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
}

.sc-msg--user {
    align-self: flex-end;
    border-color: transparent;
    border-radius: 14px 14px 4px 14px;
    background: var(--color-primary);
    color: var(--color-white);
}

.sc-msg--pending {
    opacity: 0.6;
}

.sc-msg--agent {
    border-color: var(--sd-purple);
}

.sc-msg--system {
    align-self: center;
    max-width: 95%;
    border: none;
    background: transparent;
    font-size: 12px;
    color: var(--color-text-light);
    text-align: center;
}

.sc-msg__author {
    display: block;
    margin-bottom: 4px;
    font-size: 11px;
    color: var(--sd-purple);
}

.sc-quick {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sc-chip {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    text-decoration: none;
    white-space: normal;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

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

.sc-chip--link {
    margin-top: 8px;
}

.sc-typing,
.sc-note {
    align-self: center;
    margin: 0;
    font-size: 12px;
    color: var(--color-text-muted);
}

.sc-note--error {
    color: var(--color-danger);
}

.sc-panel__human {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 16px;
    border-top: 1px solid var(--card-border);
}

.sc-panel__human[hidden] {
    display: none;
}

.sc-muted {
    font-size: 12px;
    color: var(--color-text-light);
}

.sc-panel__form {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    padding: 12px 12px 6px;
    border-top: 1px solid var(--card-border);
}

.sc-panel__form textarea {
    flex: 1;
    max-height: 120px;
    padding: 10px 12px;
    border: 1px solid var(--input-border);
    border-radius: 12px;
    background: var(--input-bg);
    color: var(--input-text);
    font: inherit;
    font-size: 14px;
    resize: none;
}

.sc-send {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: 12px;
    background: var(--color-primary);
    color: var(--color-white);
    cursor: pointer;
}

.sc-panel__foot {
    margin: 0;
    padding: 0 12px 10px;
    font-size: 11px;
    color: var(--color-text-muted);
    text-align: center;
}

.sc-history__title {
    margin: 0;
    font-size: 15px;
}

.sc-history__item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 12px;
    border: 1px solid var(--card-border);
    border-radius: 10px;
    background: var(--card-bg);
    color: var(--card-text);
    font-size: 13px;
    text-align: left;
    cursor: pointer;
}

.sc-history__item:hover {
    border-color: var(--color-primary);
}

@media (max-width: 520px) {
    .sc {
        right: 12px;
        bottom: 12px;
    }

    .sc-launcher__bubble {
        display: none;
    }

    .sc-panel {
        width: calc(100vw - 24px);
        height: calc(100vh - 96px);
    }
}

/* ===================================
   NAVIGATION SUR TÉLÉPHONE (carte #366, maquette de Luca, 08/10/2026)
   Barre du bas : Dashboard / Menu / Chatbot. « Menu » ouvre un tiroir (.mobile-sheet) qui remonte du bas.
   Le hamburger et la bulle flottante du chatbot disparaissent sur téléphone : la barre du bas les remplace.
   =================================== */
.mobile-sheet[hidden] {
    display: none;
}

@media (max-width: 768px) {
    .mobile-nav {
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
        background-color: var(--card-bg);
        border-top: 1px solid var(--card-border);
        z-index: 1300;
    }

    .mobile-nav__item {
        justify-content: center;
        gap: 4px;
        margin: 0 4px;
        padding: 8px 4px;
        border: none;
        border-radius: 14px;
        background: transparent;
        font: inherit;
        color: var(--color-text-muted);
        cursor: pointer;
    }

    .mobile-nav__item .mobile-nav__icon {
        width: 24px;
        height: 24px;
        color: inherit;
    }

    .mobile-nav__item--active {
        margin: 0 4px;
        background-color: rgba(37, 99, 235, 0.08);
        color: var(--color-primary);
    }

    .mobile-nav__label {
        font-size: 13px;
    }

    /* Tiroir ou chatbot ouvert : seul son bouton reste surligné (pas celui de la page en cours) */
    body.mobile-sheet-open .mobile-nav__item--active:not(#mobileMenuButton),
    body.mobile-chat-open .mobile-nav__item--active:not(#mobileChatButton) {
        background-color: transparent;
        color: var(--color-text-muted);
    }

    /* En-tête : titre + cloche, thème, langue, avatar (ronds) — sans hamburger ni crédits */
    .header__hamburger,
    .header__credits,
    .lang-switcher__code {
        display: none !important;
    }

    .header__right .header__icon-btn,
    .header__right .lang-switcher__btn {
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--card-border);
        border-radius: 50%;
        justify-content: center;
    }

    .header__right .header__arrow {
        display: none;
    }

    .header__avatar {
        width: 40px;
        height: 40px;
    }

    /* Chatbot : la bulle flottante cède la place au bouton « Chatbot » de la barre ; la fenêtre s'ouvre au-dessus */
    .sc-launcher {
        display: none;
    }

    .sc {
        right: 12px;
        bottom: calc(84px + env(safe-area-inset-bottom));
        z-index: 1250;
    }

    .sc-panel {
        width: calc(100vw - 24px);
        height: calc(100vh - 160px);
    }

    /* Tiroir « Menu » */
    .mobile-sheet {
        position: fixed;
        inset: 0;
        z-index: 1250;
    }

    .mobile-sheet__backdrop {
        position: absolute;
        inset: 0;
        background: rgba(15, 23, 42, 0.35);
        animation: mobileSheetFade 0.2s ease-out;
    }

    .mobile-sheet__panel {
        position: absolute;
        left: 0;
        right: 0;
        bottom: calc(68px + env(safe-area-inset-bottom));
        max-height: calc(100vh - 140px);
        overflow-y: auto;
        padding: 10px 20px 8px;
        border-radius: 24px 24px 0 0;
        background: var(--card-bg);
        color: var(--card-text);
        box-shadow: 0 -12px 40px rgba(15, 23, 42, 0.18);
        animation: mobileSheetUp 0.25s ease-out;
    }

    .mobile-sheet__grip {
        display: block;
        width: 48px;
        height: 5px;
        margin: 0 auto 8px;
        border-radius: 3px;
        background: var(--card-border);
    }

    .mobile-sheet__head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 4px;
    }

    .mobile-sheet__title {
        margin: 0;
        font-size: 26px;
        font-weight: 800;
        color: var(--color-text-dark);
    }

    .mobile-sheet__close {
        display: flex;
        padding: 6px;
        border: none;
        background: transparent;
        color: var(--color-text-dark);
        cursor: pointer;
    }

    .mobile-sheet__list {
        display: flex;
        flex-direction: column;
    }

    .mobile-sheet__item {
        display: flex;
        align-items: center;
        gap: 16px;
        width: 100%;
        padding: 14px 4px;
        border: none;
        border-bottom: 1px solid var(--card-border);
        background: transparent;
        font: inherit;
        text-align: left;
        text-decoration: none;
        color: inherit;
        cursor: pointer;
    }

    .mobile-sheet__item:last-child {
        border-bottom: none;
    }

    .mobile-sheet__icon {
        width: 28px;
        height: 28px;
        flex-shrink: 0;
        color: var(--color-primary);
    }

    .mobile-sheet__body {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
    }

    .mobile-sheet__item-title {
        font-size: 16px;
        font-weight: 600;
        color: var(--color-text-dark);
    }

    .mobile-sheet__item--active .mobile-sheet__item-title {
        color: var(--color-primary);
    }

    .mobile-sheet__item-text {
        font-size: 14px;
        color: var(--color-text-muted);
    }

    .mobile-sheet__chevron {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: var(--color-text-muted);
    }

    body.mobile-sheet-open {
        overflow: hidden;
    }
}

@keyframes mobileSheetUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

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