/* ============================================
   DESIGN SYSTEM — ClickUp-style Navigation
   ============================================ */

:root {
    /* Brand — Émerveil'Créa (charte 2026) */
    --cp-primary: #6351d0;          /* Violet brand */
    --cp-primary-dark: #050e4e;     /* Bleu nuit profond — titres */
    --cp-primary-light: #9181E0;
    --cp-accent: #FFD54F;           /* Jaune étoile */
    --cp-accent-light: #FFE9A0;
    --cp-lavande: #ede9fb;          /* Lavande doux */
    --cp-lavande-soft: #f1eaff;     /* Lavande très clair */
    --cp-rose: #fef6f6;             /* Rose poudré */
    --cp-ivoire: #FFFDF7;           /* Ivoire */
    --cp-gris-tres-clair: #F3F5FB;
    --cp-gris-clair: #E9EDF3;
    --cp-gris-moyen: #C9CDE0;
    --cp-gris-fonce: #6B728E;
    --cp-gris-profond: #0F172A;

    /* Rail + Panel */
    --cp-violet: #9181E0;           /* Violet menu actif */
    --rail-w: 100px;
    --panel-w: 220px;
    --bottom-nav-h: 60px;          /* Barre de navigation mobile (style app) */
    --nav-bg: #0A1B4D;
    --nav-bg-hover: rgba(145,129,224,0.12);
    --nav-bg-active: rgba(145,129,224,0.28);
    --nav-text: rgba(255,255,255,0.60);
    --nav-text-hover: #ffffff;
    --nav-text-active: #ffffff;
    --nav-border: rgba(255,255,255,0.08);
    --panel-text: #374151;
    --panel-text-hover: #0F172A;
    --panel-text-active: #6351d0;
    --panel-bg-hover: rgba(99, 81, 208, 0.08);
    --panel-bg-active: rgba(99, 81, 208, 0.12);
    --panel-border: #E9EDF3;

    /* Legacy compat */
    --sidebar-w: calc(var(--rail-w) + var(--panel-w));
    --sidebar-w-collapsed: var(--rail-w);

    /* Topbar */
    --topbar-h: 52px;

    /* Surface */
    --cp-bg: #FFFDF7;               /* Ivoire (charte) */
    --cp-card-bg: #ffffff;
    --cp-success: #22c55e;
    --cp-warning: #f59e0b;
    --cp-danger: #ef4444;

    /* Encarts d'information (hint boxes) */
    --cp-hint-bg: #f6f2fd;
    --cp-hint-border: #e3dcf7;
    --cp-hint-bg-alt: #f3f0fb;
    --cp-hint-border-alt: #e0d8f3;

    /* Tours — couleurs dynamiques (modifiables par l'admin) */
    --tour-bubble: #1F33A6;
    --tour-bubble-light: #4253C7;
    --tour-highlight: #FFD54F;
}

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: var(--cp-bg);
    color: var(--cp-gris-profond);
    margin: 0;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Titres en Poppins Bold (charte Émerveil'Créa 2026) */
h1, h2, h3, h4, h5, h6,
.page-header-title,
.form-card-title,
.item-card-title {
    font-family: 'Poppins', 'Inter', sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
}

/* Classe brand pour le logo manuscrit */
.brand-script {
    font-family: 'Baloo 2', 'Poppins', cursive;
    font-weight: 700;
    letter-spacing: 0;
}

/* ============================================
   APP SHELL
   ============================================ */
.app-shell {
    display: flex;
    min-height: 100vh;
}

/* ============================================
   RAIL (narrow icon bar)
   ============================================ */
.rail {
    position: fixed;
    inset-block: 0;
    left: 0;
    width: var(--rail-w);
    background: var(--nav-bg);
    display: flex;
    flex-direction: column;
    z-index: 1200;
    border-right: 1px solid var(--nav-border);
}

.rail-top {
    flex-shrink: 0;
    padding: 8px 0;
    display: flex;
    justify-content: center;
}

.rail-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
}

.rail-bottom {
    flex-shrink: 0;
    padding: 8px 0;
    display: flex;
    justify-content: center;
}

.rail-item {
    width: 60px;
    height: 60px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--nav-text);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    transition: all 0.15s;
    position: relative;
}

.rail-item:hover {
    background: var(--nav-bg-hover);
    color: var(--nav-text-hover);
}

.rail-item.active {
    background: var(--cp-violet);
    color: #ffffff;
    border-radius: 14px;
    box-shadow: 0 4px 14px rgba(145,129,224,0.45);
}


.rail-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2px;
    display: block;
    margin-top: 2px;
}

.rail-brand {
    background: transparent !important;
}

.rail-brand-icon {
    width: 88px;
    height: 72px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
    background: transparent;
    padding: 4px;
}
.rail-logo {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.rail-item.rail-brand {
    width: 92px;
    height: 76px;
}

/* ============================================
   PANEL (contextual sidebar)
   ============================================ */
.panel {
    position: fixed;
    inset-block: 0;
    left: var(--rail-w);
    width: 0;
    background: #ffffff;
    color: var(--panel-text);
    display: flex;
    flex-direction: column;
    z-index: 1100;
    overflow: hidden;
    transition: width 0.25s cubic-bezier(.4,0,.2,1);
    border-right: 1px solid var(--panel-border);
}

.panel.open {
    width: var(--panel-w);
    box-shadow: 2px 0 8px rgba(0,0,0,0.08);
    border-right: 1px solid var(--panel-border);
}

.panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 14px;
    height: 52px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--panel-border);
}

.panel-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--panel-text-active);
    white-space: nowrap;
}

.panel-close-btn {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: #9ca3af;
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.panel-close-btn:hover {
    background: var(--panel-bg-hover);
    color: var(--panel-text-active);
}

.panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 8px 0;
    scrollbar-width: thin;
    scrollbar-color: #d1d5db transparent;
}

.panel-body::-webkit-scrollbar { width: 4px; }
.panel-body::-webkit-scrollbar-track { background: transparent; }
.panel-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }

/* Panel links */
.panel-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    margin: 1px 6px;
    color: #374151;
    border-radius: 6px;
    font-size: 13.5px;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
    overflow: hidden;
    border: none;
    background: transparent;
    width: calc(100% - 12px);
    text-align: left;
    cursor: pointer;
}

/* Badge "Premium" sur les liens de sections verrouillées en freemium */
.panel-link-badge {
    margin-left: auto;
    font-size: 9.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #92400e;
    background: var(--cp-accent-light);
    padding: 1px 7px;
    border-radius: 999px;
    flex-shrink: 0;
}

.panel-link:hover {
    background: var(--panel-bg-hover);
    color: var(--panel-text-hover);
    text-decoration: none;
}

.panel-link.active {
    background: var(--panel-bg-active);
    color: var(--panel-text-active);
    font-weight: 600;
}

.panel-link-icon {
    width: 16px;
    font-size: 13px;
    text-align: center;
    flex-shrink: 0;
    opacity: 0.7;
}

.panel-link.active .panel-link-icon {
    opacity: 1;
}

.panel-link-text {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Panel divider & section label */
.panel-divider {
    height: 1px;
    background: var(--nav-border);
    margin: 8px 14px;
}

.panel-section-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #9ca3af;
    padding: 4px 14px 6px;
    white-space: nowrap;
}

/* Panel footer / user */
.panel-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--panel-border);
    padding: 8px 6px;
}

.panel-user {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    overflow: hidden;
}

.panel-user:hover {
    background: var(--nav-bg-hover);
}

.panel-user-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
.panel-logo {
    width: 32px;
    height: 32px;
    object-fit: contain;
    border-radius: 50%;
}

.panel-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.panel-user-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--panel-text);
    white-space: nowrap;
}

.panel-user-role {
    font-size: 11px;
    color: #6b7280;
}

/* ============================================
   MAIN AREA
   ============================================ */
.main-area {
    flex: 1;
    min-width: 0;
    margin-left: var(--rail-w);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    transition: margin-left 0.25s cubic-bezier(.4,0,.2,1);
}

.panel-open .main-area {
    margin-left: calc(var(--rail-w) + var(--panel-w));
}

/* ============================================
   TOP BAR
   ============================================ */
.topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--topbar-h);
    background: white;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 24px;
    flex-shrink: 0;
}

.topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.hamburger-btn {
    display: none;
    width: 36px;
    height: 36px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #374151;
    font-size: 16px;
    cursor: pointer;
    align-items: center;
    justify-content: center;
}

.hamburger-btn:hover {
    background: #f3f4f6;
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    min-width: 0;
}

.bc-link {
    color: #6b7280;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.bc-link:hover {
    color: var(--cp-primary);
}

.bc-sep {
    font-size: 8px;
    color: #d1d5db;
}

.bc-current {
    color: #111827;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.topbar-right {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.topbar-btn {
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}

.topbar-btn:hover {
    background: #f3f4f6;
    color: #111827;
}

/* ============================================
   MAIN CONTENT
   ============================================ */
.main-content {
    flex: 1;
    min-width: 0;
    padding: 24px;
}

/* ============================================
   MOBILE OVERLAY
   ============================================ */
.sidebar-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1050;
    backdrop-filter: blur(2px);
}

/* ============================================
   BARRE DE NAVIGATION MOBILE (style app)
   Masquée sur desktop, affichée ≤768px (cf. media query).
   ============================================ */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: #ffffff;
    border-top: 1px solid #e9edf3;
    box-shadow: 0 -2px 16px rgba(15, 23, 42, 0.08);
    z-index: 1300;
    justify-content: space-around;
    align-items: stretch;
}

.mbn-item {
    flex: 1 1 0;
    border: none;
    background: transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    color: #94a3b8;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    padding: 6px 0 4px;
    position: relative;
    transition: color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    overflow: hidden;
}

.mbn-item i {
    font-size: 18px;
    transition: transform 0.18s ease;
}

.mbn-item span {
    letter-spacing: 0.01em;
    white-space: nowrap;
}

.mbn-item.active {
    color: var(--cp-primary, #6351d0);
}

.mbn-item.active i {
    transform: translateY(-1px);
}

/* Indicateur d'onglet actif (petit trait sous le bord haut de la barre) */
.mbn-item.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 26px;
    height: 3px;
    border-radius: 0 0 3px 3px;
    background: var(--cp-primary, #6351d0);
}

.mbn-item:active i {
    transform: scale(0.86);
}

/* ============================================
   FEUILLE CONTEXTUELLE (bottom sheet) mobile
   Masquée par défaut ; affichée ≤768px via .open.
   Sert de navigation secondaire (sous-pages, Menu).
   ============================================ */
.mobile-sheet {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1400;
    flex-direction: column;
    max-height: 75vh;
    background: #ffffff;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -8px 40px rgba(15, 23, 42, 0.22);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
    transition: transform 0.3s cubic-bezier(0.32, 0.72, 0, 1);
    will-change: transform;
}

.mobile-sheet.open {
    transform: translateY(0);
}

.mobile-sheet-handle {
    width: 40px;
    height: 4px;
    border-radius: 2px;
    background: #d7dce3;
    margin: 10px auto 4px;
    flex-shrink: 0;
}

.mobile-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 18px 12px;
    flex-shrink: 0;
}

.mobile-sheet-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--cp-text, #1f2937);
}

.mobile-sheet-close {
    border: none;
    background: #f1f3f7;
    color: #64748b;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-sheet-close:active {
    background: #e3e7ee;
}

.mobile-sheet-body {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0 12px 16px;
    flex: 1;
}

/* Legacy sidebar link support */
.sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 14px;
    margin: 1px 6px;
    border-radius: 6px;
    font-size: 13.5px;
    color: var(--nav-text);
    text-decoration: none;
    transition: all 0.15s;
}
.sidebar-link:hover { background: var(--nav-bg-hover); color: var(--nav-text-hover); text-decoration: none; }
.sidebar-link.active { background: var(--nav-bg-active); color: var(--nav-text-active); }
.sidebar-link-icon { width: 16px; font-size: 13px; text-align: center; flex-shrink: 0; }
.sidebar-link-text { overflow: hidden; text-overflow: ellipsis; }
.sidebar-link-icon-only { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; margin: 2px auto; border-radius: 8px; color: var(--nav-text); text-decoration: none; font-size: 15px; transition: all 0.15s; }
.sidebar-link-icon-only:hover { background: var(--nav-bg-hover); color: var(--nav-text-hover); text-decoration: none; }
.sidebar-link-icon-only.active { background: var(--nav-bg-active); color: var(--nav-text-active); }

/* ============================================
   TOP BAR (legacy — used by pages)
   ============================================ */
.top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #e5e7eb;
}

.top-bar h1 {
    font-size: 1.35rem;
    font-weight: 700;
    color: #111827;
    margin: 0;
}

/* ============================================
   CARDS
   ============================================ */
.cp-card {
    background: var(--cp-card-bg);
    border-radius: 20px;
    border: none;
    padding: 1.5rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}

.cp-card-header {
    font-size: 0.95rem;
    font-weight: 700;
    color: #050e4e;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   STAT CARDS
   ============================================ */
.stat-card {
    background: var(--cp-card-bg);
    border-radius: 14px;
    border: 1px solid #e5e7eb;
    padding: 1.25rem;
    text-align: center;
}

.stat-card .stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
}

.stat-card .stat-label {
    font-size: 0.8rem;
    color: #6b7280;
    margin-top: 0.25rem;
}

/* ============================================
   BUTTONS
   ============================================ */
/* Bouton principal — Jaune étoile (charte 2026) */
.btn-cp {
    background: var(--cp-accent);
    color: var(--cp-gris-profond);
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.18s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 2px 8px rgba(255,213,79,0.35);
}

.btn-cp:hover {
    background: #FFCA28;
    color: var(--cp-gris-profond);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255,213,79,0.50);
}

.btn-cp:disabled, .btn-cp[disabled] {
    background: var(--cp-gris-clair);
    color: var(--cp-gris-fonce);
    box-shadow: none;
    transform: none;
    cursor: not-allowed;
}

/* Bouton secondaire — Indigo outline */
.btn-cp-outline {
    background: transparent;
    color: var(--cp-primary);
    border: 1.5px solid var(--cp-primary);
    border-radius: 999px;
    padding: 0.5rem 1.25rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.18s cubic-bezier(.4,0,.2,1);
}

.btn-cp-outline:hover {
    background: var(--cp-lavande);
    color: var(--cp-primary-dark);
    border-color: var(--cp-primary-dark);
}

/* Bouton indigo plein — usage navigation / actions secondaires fortes */
.btn-cp-indigo {
    background: var(--cp-primary);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 0.18s cubic-bezier(.4,0,.2,1);
}

.btn-cp-indigo:hover {
    background: var(--cp-primary-dark);
    color: white;
    transform: translateY(-1px);
}

.btn-cp-danger {
    background: var(--cp-danger);
    color: white;
    border: none;
    border-radius: 999px;
    padding: 0.4rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 600;
}

/* ============================================
   TABLES
   ============================================ */
.cp-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}

.cp-table th {
    background: #f8f7fc;
    padding: 0.85rem 1.25rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    border-bottom: 1px solid #eef0f5;
    text-align: left;
}

.cp-table td {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: #050e4e;
    vertical-align: middle;
}

.cp-table tr:hover td {
    background: #fbfaff;
}

/* ============================================
   FORMS
   ============================================ */
.cp-input {
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 0.55rem 0.85rem;
    font-size: 0.875rem;
    color: #050e4e;
    background: white;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.cp-input:focus {
    border-color: #6351d0;
    box-shadow: 0 0 0 3px rgba(99, 81, 208, 0.15);
    outline: none;
}

.form-control:focus, .form-select:focus {
    border-color: #6351d0 !important;
    box-shadow: 0 0 0 3px rgba(99, 81, 208, 0.15) !important;
}

/* ============================================
   PRICING RESULT
   ============================================ */
.pricing-result {
    background: linear-gradient(135deg, #6351d0 0%, #9181E0 100%);
    border-radius: 20px;
    padding: 1.5rem;
    color: white;
    box-shadow: 0 8px 24px rgba(99, 81, 208, 0.25);
}

.pricing-result .price-main {
    font-size: 2.5rem;
    font-weight: 800;
}

.pricing-result .price-label {
    font-size: 0.85rem;
    opacity: 0.8;
}

.pricing-detail {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    font-size: 0.875rem;
}

/* ============================================
   AUTH PAGES
   ============================================ */
/* ============================================
   AUTH PAGES — charte 2026
   ============================================ */
.auth-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFFDF7 0%, #f1eaff 50%, #ede9fb 100%);
}

/* Nuages décoratifs (lavande très clair) */
.auth-deco-cloud {
    position: absolute;
    background: rgba(145, 129, 224, 0.18);
    border-radius: 50%;
    filter: blur(40px);
    pointer-events: none;
}
.auth-deco-cloud-1 {
    width: 360px; height: 360px;
    top: -120px; left: -120px;
}
.auth-deco-cloud-2 {
    width: 420px; height: 420px;
    bottom: -150px; right: -150px;
    background: rgba(255, 213, 79, 0.18);
}

/* Étoiles décoratives */
.auth-deco-star {
    position: absolute;
    color: #9181E0;
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}
.auth-deco-star-1 {
    top: 15%; left: 10%;
    font-size: 1.6rem;
}
.auth-deco-star-2 {
    bottom: 18%; right: 12%;
    font-size: 1.2rem;
    color: #FFD54F;
    opacity: 0.85;
}
.auth-deco-star-3 {
    top: 22%; right: 18%;
    font-size: 1.3rem;
    opacity: 0.85;
}

/* Card */
.auth-card {
    background: white;
    border-radius: 28px;
    padding: 2.5rem 2.5rem 2rem;
    width: 100%;
    max-width: 440px;
    box-shadow: 0 20px 60px rgba(99, 81, 208, 0.18);
    position: relative;
    z-index: 1;
}

.auth-logo-wrap {
    text-align: center;
    margin-bottom: 1.25rem;
}
.auth-logo {
    width: 110px;
    height: auto;
    object-fit: contain;
}

.auth-title {
    text-align: center;
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    color: #050e4e;
    letter-spacing: -0.02em;
}
.auth-title-underline {
    width: 50px;
    height: 4px;
    border-radius: 2px;
    background: #FFD54F;
    margin: 0.4rem auto 0.85rem;
}
.auth-tagline {
    text-align: center;
    font-family: "Kalam", cursive;
    font-weight: 400;
    color: #6351d0;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 auto 1.75rem;
    opacity: 0.9;
}

/* Erreur */
.auth-error {
    background: #fef6f6;
    color: #eb3340;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border: 1px solid rgba(235, 51, 64, 0.15);
}

/* Message d'info (vert) pour la page de vérification d'e-mail */
.auth-info {
    background: var(--cp-lavande-soft);
    color: var(--cp-primary-dark);
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 500;
    margin-bottom: 1.25rem;
    border: 1px solid var(--cp-primary-light);
}

/* Input OTP : champ unique 6 chiffres, espacement large pour la lisibilité */
.auth-otp-input {
    width: 100%;
    text-align: center;
    font-size: 2rem;
    letter-spacing: 0.6em;       /* espacement entre les chiffres */
    padding-left: 0.6em;          /* compense le letter-spacing */
    font-weight: 700;
    font-family: 'SF Mono', 'Menlo', 'Consolas', monospace;
    color: var(--cp-primary-dark);
    background: #ffffff;
    border: 2px solid var(--cp-gris-clair);
    border-radius: 14px;
    padding-top: 0.7rem;
    padding-bottom: 0.7rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.auth-otp-input::placeholder {
    color: var(--cp-gris-moyen);
    letter-spacing: 0.4em;
}
.auth-otp-input:focus {
    outline: none;
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 4px rgba(99, 81, 208, 0.15);
}
.auth-otp-hint {
    margin: 0.35rem 0 0;
    font-size: 0.78rem;
    color: var(--cp-gris-fonce);
    text-align: center;
}

/* Bouton lien (renvoyer le code) */
.auth-link-btn {
    background: transparent;
    border: none;
    padding: 0;
    color: var(--cp-primary);
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.auth-link-btn:hover { color: var(--cp-primary-dark); }
.auth-link-btn:disabled { opacity: 0.55; cursor: not-allowed; }

.auth-resend {
    margin-top: 1rem;
    text-align: center;
    font-size: 0.85rem;
}

/* Mention légale discrète sous les formulaires d'auth */
.auth-legal {
    font-size: 0.75rem;
    color: var(--cp-gris-fonce);
    margin-top: 0.5rem;
}

/* ===== Import CSV (migration WordPress) ===== */
.import-summary {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    margin: 0.5rem 0 0.75rem;
    font-size: 0.85rem;
}
.import-summary-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    font-weight: 600;
}
.import-summary-pill.ok   { background: #DCFCE7; color: #047857; }
.import-summary-pill.warn { background: #FEF3C7; color: #B45309; }
.import-summary-pill.err  { background: #FEE2E2; color: #B91C1C; }
.import-summary-total {
    margin-left: auto;
    color: var(--cp-gris-fonce);
    font-size: 0.8rem;
}
.import-preview-table-wrap {
    max-height: 400px;
    overflow: auto;
    border: 1px solid var(--cp-gris-clair);
    border-radius: 10px;
}
.import-preview-table {
    margin: 0;
    font-size: 0.85rem;
}
.import-preview-table th {
    position: sticky;
    top: 0;
    background: var(--cp-bg);
    z-index: 1;
}
.import-row-valid td     { background: #F0FDF4; }
.import-row-duplicate td { background: #FFFBEB; }
.import-row-error td     { background: #FEF2F2; }

/* ===== Pages légales (CGU, Confidentialité) ===== */
.legal-page {
    min-height: 100vh;
    background: var(--cp-bg);
    padding: 2.5rem 1rem;
}
.legal-container {
    max-width: 760px;
    margin: 0 auto;
    background: #ffffff;
    border-radius: 18px;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(15, 23, 42, 0.05);
}
.legal-back {
    display: inline-flex;
    align-items: center;
    color: var(--cp-primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}
.legal-back:hover { color: var(--cp-primary-dark); }
.legal-container h1 {
    color: var(--cp-primary-dark);
    margin: 0 0 0.25rem;
    font-size: 1.85rem;
}
.legal-container h2 {
    color: var(--cp-primary-dark);
    margin: 1.75rem 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 700;
}
.legal-container p, .legal-container li {
    color: var(--cp-gris-profond);
    line-height: 1.6;
    font-size: 0.95rem;
}
.legal-container ul {
    padding-left: 1.25rem;
    margin: 0.5rem 0;
}
.legal-container a {
    color: var(--cp-primary);
    font-weight: 600;
}
.legal-date {
    color: var(--cp-gris-fonce);
    font-size: 0.85rem;
    margin-bottom: 1.5rem;
}

/* ===== Toggle eye (afficher / masquer mot de passe) ===== */
.auth-input-with-toggle { padding-right: 2.75rem; }
.auth-input-toggle {
    position: absolute;
    right: 0.65rem;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--cp-gris-fonce);
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.15s, background 0.15s;
}
.auth-input-toggle:hover {
    color: var(--cp-primary);
    background: var(--cp-lavande-soft);
}
.auth-input-toggle:focus-visible {
    outline: 2px solid var(--cp-primary);
    outline-offset: 1px;
}

/* ===== Indicateur de force du mot de passe ===== */
.pwd-strength {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.5rem;
}
.pwd-strength-bar {
    flex: 1;
    height: 6px;
    background: var(--cp-gris-clair);
    border-radius: 999px;
    overflow: hidden;
}
.pwd-strength-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.22s, background-color 0.22s;
}
.pwd-strength-fill.pwd-strength-faible { background: #EF4444; }
.pwd-strength-fill.pwd-strength-moyen  { background: #F59E0B; }
.pwd-strength-fill.pwd-strength-bon    { background: #10B981; }
.pwd-strength-fill.pwd-strength-fort   { background: var(--cp-primary); }
.pwd-strength-label {
    font-size: 0.78rem;
    font-weight: 700;
    min-width: 50px;
    text-align: right;
}
.pwd-strength-label.pwd-strength-faible { color: #EF4444; }
.pwd-strength-label.pwd-strength-moyen  { color: #B45309; }
.pwd-strength-label.pwd-strength-bon    { color: #047857; }
.pwd-strength-label.pwd-strength-fort   { color: var(--cp-primary-dark); }

/* Checklist des critères */
.pwd-checklist {
    list-style: none;
    padding: 0;
    margin: 0.6rem 0 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2rem 0.75rem;
    font-size: 0.78rem;
    color: var(--cp-gris-fonce);
}
@media (max-width: 420px) {
    .pwd-checklist { grid-template-columns: 1fr; }
}
.pwd-checklist li {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.4;
}
.pwd-checklist li i {
    font-size: 0.55rem;
    color: var(--cp-gris-moyen);
    width: 12px;
    text-align: center;
}
.pwd-checklist li.ok {
    color: #047857;
}
.pwd-checklist li.ok i {
    color: #10B981;
    font-size: 0.75rem;
}

/* Indicateur de correspondance de la confirmation */
.pwd-match-ok {
    display: block;
    margin-top: 0.35rem;
    color: #047857;
    font-size: 0.78rem;
    font-weight: 500;
}
.pwd-match-ko {
    display: block;
    margin-top: 0.35rem;
    color: #EF4444;
    font-size: 0.78rem;
    font-weight: 500;
}

/* ===== Bouton "Continuer avec Google" ===== */
.google-signin-wrap {
    margin: 1.25rem 0 0;
}
.google-signin-divider {
    display: flex;
    align-items: center;
    color: var(--cp-gris-fonce);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin: 0 0 1rem;
}
.google-signin-divider::before,
.google-signin-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--cp-gris-clair);
}
.google-signin-divider span {
    padding: 0 0.75rem;
}
.google-signin-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    width: 100%;
    padding: 0.75rem 1rem;
    border-radius: 14px;
    border: 1.5px solid var(--cp-gris-clair);
    background: #ffffff;
    color: var(--cp-gris-profond);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    transition: border-color 0.18s, box-shadow 0.18s, transform 0.18s;
}
.google-signin-btn:hover {
    border-color: var(--cp-primary);
    box-shadow: 0 4px 14px rgba(99, 81, 208, 0.15);
    color: var(--cp-primary-dark);
}
.google-signin-btn:active {
    transform: translateY(1px);
}
.google-signin-logo {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Form */
.auth-form { display: flex; flex-direction: column; gap: 1rem; }
.auth-field { display: flex; flex-direction: column; gap: 0.4rem; }
.auth-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}
@media (max-width: 420px) {
    .auth-row { grid-template-columns: 1fr; }
}
.auth-label {
    font-size: 0.78rem;
    font-weight: 700;
    color: #050e4e;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.auth-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.auth-input-icon {
    position: absolute;
    left: 14px;
    color: #9181E0;
    font-size: 0.9rem;
    pointer-events: none;
}
.auth-input {
    width: 100%;
    border: 1.5px solid #eef0f5;
    background: #f8f7fc;
    border-radius: 12px;
    padding: 0.75rem 0.95rem 0.75rem 2.5rem;
    font-size: 0.92rem;
    color: #050e4e;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.auth-input::placeholder { color: #94a3b8; }
.auth-input:focus {
    outline: none;
    border-color: #6351d0;
    background: white;
    box-shadow: 0 0 0 3px rgba(99, 81, 208, 0.15);
}

/* Submit */
.auth-submit {
    margin-top: 0.6rem;
    background: #FFD54F;
    color: #050e4e;
    border: none;
    border-radius: 999px;
    padding: 0.85rem 1.5rem;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(255, 213, 79, 0.45);
    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
.auth-submit:hover:not(:disabled) {
    background: #FFCA28;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 213, 79, 0.55);
}
.auth-submit:disabled {
    background: #f3f4f6;
    color: #94a3b8;
    cursor: not-allowed;
    box-shadow: none;
}

/* Footer */
.auth-footer {
    text-align: center;
    margin: 1.5rem 0 0;
    color: #94a3b8;
    font-size: 0.88rem;
}
.auth-footer a {
    color: #6351d0;
    font-weight: 700;
    text-decoration: none;
    margin-left: 0.25rem;
}
.auth-footer a:hover {
    color: #443cbc;
    text-decoration: underline;
}

@media (max-width: 480px) {
    .auth-card { padding: 1.75rem 1.5rem; border-radius: 22px; }
    .auth-title { font-size: 1.5rem; }
    .auth-deco-star { display: none; }
}

/* ============================================
   CALCULATOR TABS
   ============================================ */
/* === Onglets ré-enchantés (V4) : pills douces avec état ✓ === */
.calc-tabs-pills {
    display: flex;
    list-style: none;
    align-items: center;
    gap: 6px;
    background: #F3EEF7;
    border-radius: 999px;
    padding: 6px;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 1.25rem;
    border: none;
}
.calc-tabs-pills li { display: flex; }

.calc-tabs-pills .nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #B3A9C6;
    font-weight: 600;
    font-size: 0.86rem;
    line-height: 1;
    padding: 10px 20px;
    border: none;
    border-radius: 999px;
    background: transparent;
    white-space: nowrap;
    transition: color 0.15s, background 0.15s, box-shadow 0.15s;
}
.calc-tabs-pills .nav-link .calc-pill-ic { font-size: 0.78rem; }

.calc-tabs-pills .nav-link:hover {
    color: var(--cp-primary, #6351d0);
    background: rgba(255, 255, 255, 0.55);
}

/* Étape complétée : libellé gris doux + pastille verte */
.calc-tabs-pills .nav-link.done { color: #7A718F; }
.calc-tabs-pills .nav-link.done .calc-pill-ic { color: #6FAE93; font-size: 0.9rem; }

/* Onglet actif : pill blanc surélevé, accent violet */
.calc-tabs-pills .nav-link.active {
    color: var(--cp-primary, #6351d0);
    background: #FFFFFF;
    box-shadow: 0 4px 14px rgba(99, 81, 208, 0.16);
}
.calc-tabs-pills .nav-link.active .calc-pill-ic { color: var(--cp-primary, #6351d0); }

.calc-tab-content {
    background: #FAF8FD;
    border: 1px solid #F0EAF8;
    border-radius: 22px;
    padding: 1.25rem;
    margin-bottom: 5rem;
    /* Cartes côte à côte (design V4) : 2 colonnes sur desktop, hauteurs homogènes par rangée */
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
    align-items: stretch;
}
/* Une section peut occuper toute la largeur (formulaires larges, totaux, etc.) */
.calc-section-wide,
.calc-tab-content > *:not(.calc-section) {
    grid-column: 1 / -1;
}
@media (max-width: 991px) {
    .calc-tab-content { grid-template-columns: 1fr; }
}

/* Sections en cartes douces (design V4) */
.calc-section {
    background: #FFFFFF;
    border: 1px solid #F0EAF8;
    border-radius: 16px;
    padding: 1.15rem 1.4rem;
    margin-bottom: 0.9rem;
    box-shadow: 0 4px 14px rgba(99, 81, 208, 0.05);
}

.calc-section:last-child {
    margin-bottom: 0;
}

.calc-section-title {
    font-size: 0.98rem;
    font-weight: 700;
    color: #2B2350;
    letter-spacing: -0.01em;
    margin-bottom: 1rem;
}

/* Choix de méthode (Détaillé / Montant global) — segmented control doux */
.calc-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #F3EEF7;
    border-radius: 999px;
    padding: 4px;
    margin-bottom: 1rem;
}
.calc-mode-btn {
    display: inline-flex;
    align-items: center;
    border: none;
    background: transparent;
    color: #8E86A3;
    font-weight: 600;
    font-size: 0.82rem;
    padding: 7px 16px;
    border-radius: 999px;
    cursor: pointer;
    transition: color .15s, background .15s, box-shadow .15s;
}
.calc-mode-btn:hover { color: #6351d0; }
.calc-mode-btn.on {
    background: #FFFFFF;
    color: #6351d0;
    box-shadow: 0 3px 10px rgba(99, 81, 208, 0.16);
}
/* Info-bulle stylée (au survol / focus) */
.calc-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    color: #B3A9C6;
    cursor: help;
    font-size: 0.95rem;
    outline: none;
}
.calc-help:hover, .calc-help:focus { color: #6351d0; }
.calc-help-bubble {
    position: absolute;
    top: calc(100% + 10px);
    right: -6px;
    width: 280px;
    background: #2B2350;
    color: #FFFFFF;
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 12.5px;
    font-weight: 500;
    line-height: 1.5;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 7px;
    box-shadow: 0 12px 30px rgba(43, 35, 80, 0.28);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity .15s, transform .15s, visibility .15s;
    z-index: 60;
    white-space: normal;
}
.calc-help-bubble strong { font-size: 13px; }
.calc-help-bubble b { color: #FFD54F; font-weight: 700; }
.calc-help-bubble::before {
    content: "";
    position: absolute;
    bottom: 100%;
    right: 12px;
    border: 7px solid transparent;
    border-bottom-color: #2B2350;
}
.calc-help:hover .calc-help-bubble,
.calc-help:focus .calc-help-bubble {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Bloc « Montant global » (coût direct) */
.direct-cost-card {
    background: #FAF8FD;
    border: 1px solid #ECE6F8;
    border-radius: 14px;
    padding: 1rem 1.1rem;
}

/* Marge / Prix HT / Prix TTC : champs alignés même si un label passe sur 2 lignes
   (pastille « Pilote ») — l'input est poussé en bas de colonnes à hauteur égale. */
.calc-pricemode > [class*="col-"] {
    display: flex;
    flex-direction: column;
}
.calc-pricemode > [class*="col-"] .form-control {
    margin-top: auto;
}

/* Calculator bottom bar - Live Pricing */
.calc-bottom-bar {
    position: fixed;
    bottom: 0;
    left: var(--rail-w);
    right: 0;
    background: white;
    border-top: 1px solid #e5e7eb;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    z-index: 100;
    box-shadow: 0 -4px 12px rgba(0,0,0,0.06);
    transition: left 0.25s cubic-bezier(.4,0,.2,1);
}

.panel-open .calc-bottom-bar {
    left: calc(var(--rail-w) + var(--panel-w));
}

.calc-live-pricing {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: 8px;
    transition: background 0.15s;
}

.calc-live-pricing:hover {
    background: #f1f5f9;
}

.calc-live-price-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
}

.calc-live-label {
    font-size: 0.6rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #94a3b8;
    font-weight: 600;
}

.calc-live-ttc {
    font-size: 1.15rem;
    font-weight: 800;
    color: var(--cp-primary);
}

.calc-live-ht {
    font-size: 0.9rem;
    font-weight: 600;
    color: #1e293b;
}

.calc-live-cost {
    font-size: 0.9rem;
    font-weight: 600;
    color: #64748b;
}

.calc-live-profit {
    font-size: 0.9rem;
    font-weight: 700;
}

.profit-positive { color: #16a34a; }
.profit-negative { color: #dc2626; }

.calc-live-expand {
    color: #94a3b8;
    font-size: 0.7rem;
    padding: 0 0.25rem;
}

.calc-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

/* État de sauvegarde du calculateur (badge "Non enregistré" / "Erreur de chargement") */
.calc-save-status {
    display: inline-flex;
    align-items: center;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
}
.calc-save-status-dirty {
    color: #92400e;
    background: #fef3c7;
}
.calc-save-status-dirty i {
    font-size: 0.45rem;
}
.calc-save-status-error {
    color: #b91c1c;
    background: #fee2e2;
}

/* Slide-up breakdown panel */
.calc-breakdown-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.3);
    z-index: 200;
}

.calc-breakdown-panel {
    position: fixed;
    bottom: 0;
    left: var(--rail-w);
    width: min(420px, calc(100vw - var(--rail-w) - 12px));
    max-height: 80vh;
    background: white;
    border-radius: 0 16px 0 0;
    box-shadow: 4px -4px 20px rgba(0,0,0,0.12);
    z-index: 201;
    overflow-y: auto;
    animation: slideUp 0.25s ease-out;
    transition: left 0.25s cubic-bezier(.4,0,.2,1);
}

.panel-open .calc-breakdown-panel {
    left: calc(var(--rail-w) + var(--panel-w));
}


@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.calc-breakdown-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid #e2e8f0;
    position: sticky;
    top: 0;
    background: white;
    border-radius: 16px 16px 0 0;
}

.calc-breakdown-body {
    padding: 1rem 1.5rem 2rem;
}

.calc-breakdown-ttc {
    font-size: 2.2rem;
    font-weight: 800;
    color: var(--cp-primary);
}

.calc-breakdown-ttc-label {
    font-size: 0.8rem;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.calc-breakdown-section {
    margin-bottom: 1rem;
}

.calc-breakdown-section-title {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #94a3b8;
    font-weight: 700;
    margin-bottom: 0.35rem;
    padding-top: 0.5rem;
    border-top: 1px solid #f1f5f9;
}

.pricing-detail-light {
    display: flex;
    justify-content: space-between;
    padding: 0.35rem 0;
    font-size: 0.85rem;
    color: #475569;
}

.pricing-detail-total {
    font-weight: 700;
    font-size: 0.95rem;
    color: #1e293b;
    padding-top: 0.5rem;
    border-top: 1px solid #e2e8f0;
}

.calc-breakdown-net {
    display: flex;
    justify-content: space-between;
    font-size: 1.15rem;
    font-weight: 800;
    padding: 0.75rem 0;
    border-top: 2px solid #e2e8f0;
    margin-top: 0.5rem;
}

/* Image upload */
.image-upload-placeholder {
    width: 100%;
    aspect-ratio: 1;
    border: 2px dashed #d1d5db;
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: #f9fafb;
    cursor: pointer;
    transition: border-color 0.15s;
}

.image-upload-placeholder:hover {
    border-color: var(--cp-primary);
}

.cursor-pointer { cursor: pointer; }

/* Inline create form inside calculator */
.inline-create-form {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 14px;
    padding: 1rem;
}

/* Product thumbnail in list */
.product-thumb {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    object-fit: cover;
    border: 1px solid #e5e7eb;
}

.product-thumb-placeholder {
    width: 44px;
    height: 44px;
    border-radius: 8px;
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #d1d5db;
    font-size: 16px;
}

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

/* Tablette : panel en overlay au lieu de pousser le contenu */
@media (max-width: 1024px) {
    .panel-open .main-area {
        margin-left: var(--rail-w);
    }

    .panel.open {
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }

    .panel-open .calc-bottom-bar,
    .panel-open .calc-breakdown-panel {
        left: var(--rail-w);
    }

    .calc-live-pricing {
        gap: 0.75rem;
    }

    .calc-live-ttc {
        font-size: 1rem;
    }

    .main-content {
        padding: 20px;
    }
}

/* Mobile : tout en overlay */
@media (max-width: 768px) {
    .rail {
        transform: translateX(-100%);
        transition: transform 0.25s;
    }

    .panel {
        /* Décalage de la largeur du panneau ET du rail : translateX(-100%) seul
           ne décale que de la propre largeur du panneau, laissant son bord droit
           (et l'ombre .open) pile à x = rail-w → ligne verticale parasite. */
        transform: translateX(calc(-100% - var(--rail-w)));
        left: var(--rail-w);
        transition: transform 0.25s, width 0.25s;
    }

    .mobile-open .rail {
        transform: translateX(0);
    }

    .mobile-open .panel {
        transform: translateX(0);
    }

    /* Ombre du panneau seulement quand le menu mobile est ouvert : sinon elle
       débordait sur l'écran alors que le panneau est hors-champ. */
    .panel.open {
        box-shadow: none;
    }
    .mobile-open .panel.open {
        box-shadow: 4px 0 24px rgba(0,0,0,0.25);
    }

    .main-area {
        margin-left: 0 !important;
    }

    .hamburger-btn {
        display: flex;
    }

    /* Barre de navigation du bas (style app) */
    .mobile-bottom-nav {
        display: flex;
    }

    /* Feuille contextuelle (bottom sheet) : navigation secondaire */
    .mobile-sheet {
        display: flex;
    }

    /* Laisse respirer le contenu au-dessus de la barre du bas */
    .main-content {
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
    }

    .calc-bottom-bar {
        left: 0 !important;
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    /* Remonte les éléments flottants pour ne pas chevaucher la barre du bas */
    .cgw-fab,
    .cgw-panel:not(.cgw-expanded) {
        bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .onboarding-widget {
        bottom: calc(var(--bottom-nav-h) + 16px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.calc-bottom-bar) .cgw-fab,
    body:has(.calc-bottom-bar) .cgw-panel:not(.cgw-expanded) {
        bottom: calc(var(--bottom-nav-h) + 92px + env(safe-area-inset-bottom, 0px)) !important;
    }

    body:has(.calc-bottom-bar) .onboarding-widget {
        bottom: calc(var(--bottom-nav-h) + 168px + env(safe-area-inset-bottom, 0px)) !important;
    }

    .calc-breakdown-panel {
        left: 0 !important;
        width: 100%;
        border-radius: 16px 16px 0 0;
        bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    }

    .calc-live-pricing {
        gap: 0.5rem;
    }

    .calc-live-price-group:nth-child(3),
    .calc-live-price-group:nth-child(4) {
        display: none;
    }

    .calc-live-ttc {
        font-size: 1rem;
    }

    .calc-tabs .nav-link {
        padding: 0.6rem 0.75rem;
        font-size: 0.8rem;
    }

    .topbar {
        padding: 0 16px;
    }

    .cp-table th, .cp-table td {
        padding: 0.5rem 0.6rem;
        font-size: 0.8rem;
    }
}

@media (max-width: 480px) {
    .main-content {
        padding: 12px;
    }

    .breadcrumbs {
        font-size: 12px;
    }

    .top-bar h1 {
        font-size: 1.1rem;
    }

    .cp-card {
        padding: 1rem;
    }
}

/* ============================================
   MACHINE CARDS
   ============================================ */
.machine-stat {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border-radius: 8px;
}

.machine-stat-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #e0e7ff;
    color: var(--cp-primary);
    border-radius: 6px;
    font-size: 0.85rem;
}

.machine-stat-value {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.machine-stat-label {
    font-size: 0.7rem;
    color: #94a3b8;
}

.machine-amort {
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
}

.machine-amort-label {
    font-size: 0.75rem;
    color: #0369a1;
    font-weight: 600;
    margin-bottom: 0.25rem;
}

.machine-amort-value {
    font-weight: 700;
    font-size: 0.9rem;
    color: #0c4a6e;
}

.machine-amort-unit {
    font-size: 0.7rem;
    color: #64748b;
    margin-left: 2px;
}

/* ============================================
   VENTES DASHBOARD
   ============================================ */
.stat-icon {
    font-size: 1.2rem;
    color: var(--cp-primary);
    margin-bottom: 0.25rem;
}

.truncate-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 200px;
    display: inline-block;
}

.channel-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 14px;
    padding: 1rem;
    transition: box-shadow 0.2s;
}

.channel-card:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.channel-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.channel-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.channel-pct {
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--cp-primary);
}

.channel-bar-bg {
    width: 100%;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.channel-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cp-primary), var(--cp-primary-light));
    border-radius: 3px;
    transition: width 0.4s ease;
}

.channel-stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.8rem;
    color: #64748b;
}

.panel-divider {
    border-top: 1px solid #e5e7eb;
    margin: 0.5rem 0;
}

.panel-section-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    color: #9ca3af;
    padding: 0.25rem 0.75rem;
    letter-spacing: 0.05em;
    font-weight: 600;
}

/* ============================================
   AMORTISSEMENT
   ============================================ */
.amort-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 1.25rem;
    transition: box-shadow 0.2s;
}

.amort-card:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.amort-card-name {
    font-weight: 700;
    font-size: 1.1rem;
    color: #1e293b;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid #f1f5f9;
}

.amort-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
}

.amort-label {
    color: #64748b;
    font-size: 0.9rem;
}

.amort-value {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e293b;
}

.amort-green {
    color: #16a34a !important;
}

.amort-red {
    color: #dc2626 !important;
}

.amort-bar-bg {
    width: 100%;
    height: 24px;
    background: #e2e8f0;
    border-radius: 12px;
    overflow: hidden;
}

.amort-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--cp-primary), var(--cp-primary-light));
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.6s ease;
    min-width: 0;
}

.amort-bar-complete {
    background: linear-gradient(90deg, #16a34a, #4ade80);
}

.amort-bar-text {
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}

/* ============================================
   VALIDATION
   ============================================ */
.valid.modified:not([type=checkbox]) {
    border-color: #26b050;
    outline: none;
    box-shadow: 0 0 0 3px rgba(38, 176, 80, 0.12);
}

.invalid {
    border-color: #eb3340 !important;
    outline: none;
    box-shadow: 0 0 0 3px rgba(235, 51, 64, 0.12);
}

.validation-message {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: #eb3340;
    font-size: 0.8rem;
    font-weight: 500;
    margin-top: 0.35rem;
}

.validation-message::before {
    content: "\f06a"; /* fa-circle-exclamation */
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 0.85em;
    flex-shrink: 0;
}

/* Indicateur de champ obligatoire : <label class="required">…</label> */
.required::after {
    content: " *";
    color: #eb3340;
    font-weight: 700;
}

#blazor-error-ui {
    color-scheme: light only;
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* ============================================
   ONBOARDING WIZARD
   ============================================ */
/* ============================================
   ONBOARDING WIZARD — charte 2026
   ============================================ */
.onboarding-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem 1rem;
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #FFFDF7 0%, #f1eaff 50%, #ede9fb 100%);
}

.onboarding-card {
    background: white;
    border-radius: 28px;
    padding: 2rem 2.25rem 1.75rem;
    width: 100%;
    max-width: 640px;
    box-shadow: 0 20px 60px rgba(99, 81, 208, 0.18);
    position: relative;
    z-index: 1;
}

.onboarding-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.onboarding-logo {
    width: 72px;
    height: auto;
    object-fit: contain;
}

.onboarding-skip-btn {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
}
.onboarding-skip-btn:hover {
    background: #f1eaff;
    color: #6351d0;
}

.onboarding-progress {
    display: flex;
    gap: 6px;
    margin-bottom: 0.5rem;
}
.onboarding-progress-segment {
    flex: 1;
    height: 6px;
    background: #eef0f5;
    border-radius: 3px;
    transition: background 0.3s;
}
.onboarding-progress-segment.active {
    background: #FFD54F;
}

.onboarding-step-label {
    text-align: right;
    font-size: 0.75rem;
    color: #94a3b8;
    font-weight: 500;
    margin-bottom: 1.5rem;
}

.onboarding-step {
    min-height: 320px;
}

.onboarding-step h2 {
    font-weight: 700;
    color: #050e4e;
    margin: 0 0 0.5rem;
    font-size: 1.55rem;
    letter-spacing: -0.02em;
    line-height: 1.2;
}
.onboarding-step > p.text-muted {
    color: #94a3b8 !important;
    font-size: 0.95rem;
    line-height: 1.5;
}

.onboarding-section-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: #6351d0;
    margin: 1.25rem 0 0.5rem;
}

/* Cards de choix (radio) */
.onboarding-choices {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}
.onboarding-choice {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.9rem 1rem;
    border: 1.5px solid #eef0f5;
    background: white;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.15s;
    margin: 0;
}
.onboarding-choice:hover {
    border-color: #c9bff5;
    background: #faf8ff;
}
.onboarding-choice.selected {
    border-color: #6351d0;
    background: #f5f1ff;
    box-shadow: 0 4px 14px rgba(99, 81, 208, 0.12);
}
.onboarding-choice > div {
    flex: 1;
    min-width: 0;
}
.onboarding-choice strong {
    display: block;
    color: #050e4e;
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 0.15rem;
}
.onboarding-choice strong i {
    color: #6351d0;
}
.onboarding-choice small {
    color: #94a3b8 !important;
    font-size: 0.82rem;
    line-height: 1.45;
    white-space: normal;
    word-wrap: break-word;
}
.onboarding-choice input[type="radio"] {
    margin-top: 0.25rem;
    accent-color: #6351d0;
    flex-shrink: 0;
}

/* Checkbox */
.onboarding-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    border: 1.5px solid #eef0f5;
    background: white;
    border-radius: 12px;
    cursor: pointer;
    margin: 0;
    transition: border-color 0.15s, background 0.15s;
}
.onboarding-checkbox:hover {
    border-color: #c9bff5;
    background: #faf8ff;
}
.onboarding-checkbox input[type="checkbox"] {
    margin-top: 0.25rem;
    accent-color: #6351d0;
    flex-shrink: 0;
}
.onboarding-checkbox span {
    color: #050e4e;
    font-size: 0.92rem;
}
.onboarding-checkbox strong {
    color: #050e4e;
    font-weight: 700;
}

/* Recap */
.onboarding-recap {
    background: #f8f7fc;
    border-radius: 16px;
    padding: 1rem 1.25rem;
    border: 1px solid #eef0f5;
}
.onboarding-recap-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0;
    border-bottom: 1px solid #eef0f5;
    gap: 1rem;
}
.onboarding-recap-row:last-child {
    border-bottom: none;
}
.onboarding-recap-label {
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 500;
}
.onboarding-recap-value {
    font-weight: 700;
    color: #050e4e;
    font-size: 0.9rem;
    text-align: right;
}

.onboarding-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 1.75rem;
    padding-top: 1.25rem;
    border-top: 1px solid #eef0f5;
    gap: 0.75rem;
}
.onboarding-actions > span:empty {
    width: 1px;
}

@media (max-width: 600px) {
    .onboarding-card { padding: 1.5rem 1.25rem; border-radius: 22px; }
    .onboarding-step h2 { font-size: 1.3rem; }
}

/* ============================================
   TRIAL BANNER (topbar pill)
   ============================================ */
.trial-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    margin-right: 0.5rem;
    white-space: nowrap;
}
.trial-badge:hover {
    transform: translateY(-1px);
    text-decoration: none;
}
.trial-badge.neutral {
    background: rgba(46,58,124,0.08);
    color: var(--cp-primary);
}
.trial-badge.neutral:hover {
    background: rgba(46,58,124,0.15);
    color: var(--cp-primary);
}
.trial-badge.warning {
    background: rgba(245,158,11,0.15);
    color: #b45309;
}
.trial-badge.warning:hover {
    background: rgba(245,158,11,0.25);
    color: #92400e;
}
.trial-badge.danger {
    background: rgba(239,68,68,0.12);
    color: #b91c1c;
    animation: pulse-danger 2s ease-in-out infinite;
}
.trial-badge.danger:hover {
    background: rgba(239,68,68,0.2);
    color: #991b1b;
}
.trial-badge.expired {
    background: #ef4444;
    color: white;
}
.trial-badge.expired:hover {
    background: #dc2626;
    color: white;
}
@keyframes pulse-danger {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239,68,68,0); }
}

/* ============================================
   SUBSCRIPTION PAGE
   ============================================ */
.subscription-status-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
}
.subscription-status-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.subscription-status-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    letter-spacing: 0.5px;
    font-weight: 600;
}
.subscription-status-value {
    font-size: 1rem;
    color: #111827;
}

.subscription-plans {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 1.5rem;
}
.subscription-card {
    background: white;
    border-radius: 16px;
    padding: 2rem;
    border: 2px solid #e5e7eb;
    position: relative;
    transition: all 0.2s;
}
.subscription-card.current {
    border-color: var(--cp-primary);
}
.subscription-card.premium {
    border-color: var(--cp-accent);
    box-shadow: 0 8px 30px rgba(232,200,74,0.15);
}
.subscription-card.premium:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 40px rgba(232,200,74,0.25);
}
.subscription-card-badge {
    position: absolute;
    top: -12px;
    right: 1.5rem;
    background: var(--cp-primary);
    color: white;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.subscription-card-badge.premium-badge {
    background: var(--cp-accent);
    color: #0A1B4D;
}
.subscription-card h4 {
    font-weight: 700;
    color: #111827;
    margin-bottom: 0.5rem;
}
.subscription-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--cp-primary);
    margin-bottom: 1.5rem;
}
.subscription-price small {
    font-size: 0.9rem;
    color: #6b7280;
    font-weight: 400;
}
.subscription-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem 0;
}
.subscription-features li {
    padding: 0.4rem 0;
    color: #374151;
    font-size: 0.9rem;
}
.subscription-features li i {
    color: var(--cp-success);
    margin-right: 0.5rem;
    width: 16px;
}
.subscription-features li.muted {
    color: #9ca3af;
}
.subscription-features li.muted i {
    color: #d1d5db;
}

/* ============================================
   MODAL
   ============================================ */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    animation: fadeIn 0.2s ease-out;
}
.modal-cp {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 2rem;
    width: 90%;
    max-width: 500px;
    max-height: 90vh;
    overflow-y: auto;
    z-index: 2001;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    animation: scaleIn 0.2s ease-out;
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes scaleIn {
    from { transform: translate(-50%, -50%) scale(0.95); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

/* ============================================
   ADMIN SECTION
   ============================================ */
.rail-item-admin i {
    color: var(--cp-accent);
}

.announcement-banner {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1.5rem;
    font-size: 0.9rem;
    font-weight: 500;
    border-bottom: 1px solid transparent;
}
.announcement-banner.info {
    background: #dbeafe;
    color: #1e40af;
    border-color: #93c5fd;
}
.announcement-banner.warning {
    background: #fef3c7;
    color: #92400e;
    border-color: #fcd34d;
}
.announcement-banner.danger {
    background: #fee2e2;
    color: #991b1b;
    border-color: #fca5a5;
}

.admin-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.admin-stat-card {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: white;
    border-radius: 12px;
    padding: 1.25rem;
    border-left: 4px solid var(--cp-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.admin-stat-card.primary { border-left-color: var(--cp-primary); }
.admin-stat-card.success { border-left-color: #22c55e; }
.admin-stat-card.warning { border-left-color: #f59e0b; }
.admin-stat-card.danger { border-left-color: #ef4444; }

.admin-stat-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(46,58,124,0.1);
    color: var(--cp-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.admin-stat-card.success .admin-stat-icon { background: rgba(34,197,94,0.1); color: #16a34a; }
.admin-stat-card.warning .admin-stat-icon { background: rgba(245,158,11,0.1); color: #d97706; }
.admin-stat-card.danger .admin-stat-icon { background: rgba(239,68,68,0.1); color: #dc2626; }

.admin-stat-content {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.admin-stat-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    color: #9ca3af;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.admin-stat-value {
    font-size: 1.75rem;
    font-weight: 700;
    color: #111827;
    line-height: 1.2;
}
.admin-stat-meta {
    font-size: 0.75rem;
    color: #6b7280;
}

.admin-big-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--cp-primary);
    margin-bottom: 0.25rem;
}

.admin-quick-link {
    display: block;
    text-decoration: none;
    color: #111827;
    transition: all 0.15s;
}
.admin-quick-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--cp-primary);
    text-decoration: none;
}
.admin-quick-link i {
    color: var(--cp-primary);
}

.row-suspended {
    opacity: 0.55;
    background: #f9fafb;
}

/* ============================================
   AI ASSISTANTS — Picker + Chat
   ============================================ */
.ai-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1.25rem;
}
.ai-picker-card {
    background: white;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 1.5rem;
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.04);
}
.ai-picker-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.ai-picker-emoji {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin: 0 auto 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: white;
}
.ai-picker-card h4 {
    margin-bottom: 0.25rem;
    font-weight: 700;
}
.ai-picker-role {
    color: #6b7280;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.ai-picker-provider {
    color: #9ca3af;
    font-size: 0.75rem;
}

.ai-chat-wrapper {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 180px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.ai-chat-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
    border-bottom: 2px solid;
}
.ai-chat-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}
.ai-chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.ai-message {
    display: flex;
    flex-direction: column;
    max-width: 80%;
}
.ai-message-user {
    align-self: flex-end;
    align-items: flex-end;
}
.ai-message-assistant {
    align-self: flex-start;
    align-items: flex-start;
}
.ai-bubble {
    padding: 0.75rem 1rem;
    border-radius: 16px;
    line-height: 1.5;
    font-size: 0.95rem;
}
.ai-message-user .ai-bubble {
    border-bottom-right-radius: 4px;
}
.ai-message-assistant .ai-bubble {
    border-bottom-left-radius: 4px;
}
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble pre {
    background: rgba(0,0,0,0.05);
    border-radius: 8px;
    padding: 0.5rem 0.75rem;
    overflow-x: auto;
    font-size: 0.85rem;
}
.ai-bubble code {
    background: rgba(0,0,0,0.05);
    border-radius: 4px;
    padding: 0.1rem 0.3rem;
}
.ai-bubble pre code { background: none; padding: 0; }
.ai-bubble ul, .ai-bubble ol { padding-left: 1.5rem; margin: 0.5rem 0; }
.ai-bubble table { border-collapse: collapse; margin: 0.5rem 0; }
.ai-bubble th, .ai-bubble td { border: 1px solid rgba(0,0,0,0.1); padding: 0.4rem 0.6rem; }
.ai-bubble th { background: rgba(0,0,0,0.05); font-weight: 700; }
.ai-bubble-image {
    max-width: 240px;
    max-height: 240px;
    border-radius: 8px;
    margin-bottom: 0.5rem;
    display: block;
}
.ai-message-time {
    font-size: 0.7rem;
    color: #9ca3af;
    margin-top: 0.25rem;
}

.ai-starters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.ai-starter-chip {
    background: white;
    border: 2px solid;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
}
.ai-starter-chip:hover:not(:disabled) {
    transform: translateY(-1px);
    filter: brightness(0.95);
}

.ai-typing {
    display: inline-flex;
    gap: 4px;
    padding: 0.25rem 0;
}
.ai-typing span {
    width: 8px;
    height: 8px;
    background: rgba(0,0,0,0.3);
    border-radius: 50%;
    animation: typing 1.2s infinite;
}
.ai-typing span:nth-child(2) { animation-delay: 0.15s; }
.ai-typing span:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30% { transform: translateY(-6px); opacity: 1; }
}

.ai-chat-input {
    display: flex;
    gap: 0.5rem;
    padding: 0.75rem;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
}
.ai-chat-input textarea {
    resize: none;
    flex: 1;
}

.ai-admin-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 1rem;
}
.ai-admin-card {
    border: 2px solid;
    border-radius: 20px;
    padding: 1.25rem;
}

.ai-avatar-preview {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid white;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    flex-shrink: 0;
}
.ai-picker-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 1rem;
    display: block;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}
.ai-chat-avatar-img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* === NEW : Page Assistants design type ChatGPT/WP plugin === */
.ai-page {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    height: calc(100vh - 90px);
}

/* En-tête : carrousel d'assistants (compact) */
.ai-header {
    background: white;
    border-radius: 20px;
    padding: 0.5rem 1rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    gap: 1rem;
    overflow: visible; /* permet au zoom hover de déborder */
}
.ai-header-title {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    color: #94a3b8;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 1px;
    flex-shrink: 0;
}
.ai-header-row {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    overflow-y: visible;
    flex: 1;
    padding: 8px 4px; /* laisse de la place pour le zoom au hover */
}
.ai-header-item {
    background: transparent;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.25rem 0.6rem 0.25rem 0.25rem;
    border-radius: 30px;
    transition: all 0.15s;
    flex-shrink: 0;
    position: relative; /* pour le tooltip */
}

/* Tooltip au survol — position:fixed pour échapper à tout overflow clipping (carousel scrollable) */
.ai-header-tooltip {
    position: fixed; /* échappe au clipping de .ai-header-row (overflow-x:auto force overflow-y:auto) */
    top: 0; left: 0;
    transform: translate(var(--tt-x, 0), var(--tt-y, 0)) translate(-50%, 8px) translateY(-4px);
    width: 280px;
    background: white;
    border: 1px solid #e5e7eb;
    border-top: 3px solid var(--cp-primary);
    border-radius: 12px;
    padding: 0.75rem 1rem;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
    font-size: 0.85rem;
    color: #475569;
    text-align: left;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s;
    white-space: normal;
    line-height: 1.4;
}
.ai-header-tooltip::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid white;
    filter: drop-shadow(0 -2px 1px rgba(0,0,0,0.05));
}
.ai-header-item:hover .ai-header-tooltip {
    opacity: 1;
    transform: translate(var(--tt-x, 0), var(--tt-y, 0)) translate(-50%, 8px);
    transition-delay: 0.2s; /* léger délai pour éviter le flash */
}
.ai-header-tooltip-title {
    font-weight: 700;
    margin-bottom: 0.35rem;
    font-size: 0.9rem;
}
.ai-header-tooltip-role {
    font-weight: 500;
    color: #94a3b8;
    font-size: 0.8rem;
}
.ai-header-tooltip-desc {
    color: #475569;
}
.ai-header-item:hover { background: #f1f5f9; }
.ai-header-item.selected { background: rgba(46,58,124,0.08); }
.ai-header-item.selected strong { color: var(--cp-primary); }
.ai-header-avatar-wrap {
    position: relative;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), box-shadow 0.25s, margin-right 0.25s cubic-bezier(.34,1.56,.64,1);
    flex-shrink: 0;
    transform-origin: center;
}
.ai-header-item:hover .ai-header-avatar-wrap {
    transform: scale(1.6);
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    z-index: 5;
    margin-right: 12px; /* compense l'expansion horizontale du scale pour ne pas couvrir le nom */
}
.ai-header-item.selected:hover .ai-header-avatar-wrap {
    transform: scale(1.6);
    margin-right: 12px;
}
.ai-header-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    display: block;
    transition: filter 0.2s;
}
.ai-header-item:not(.selected) .ai-header-avatar {
    filter: grayscale(0.3);
}
.ai-header-item:hover .ai-header-avatar {
    filter: none;
}
.ai-header-item:not(.selected) .ai-header-avatar {
    filter: grayscale(0.4) brightness(0.95);
}
.ai-header-item:hover:not(.selected) .ai-header-avatar {
    filter: none;
}
.ai-header-item strong {
    font-size: 0.85rem;
    color: #1f2937;
    line-height: 1.1;
    white-space: nowrap;
    display: inline-block;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1), color 0.15s;
    transform-origin: left center;
}
.ai-header-item:hover strong {
    transform: scale(1.15);
    color: var(--cp-primary);
    font-weight: 700;
}
.ai-header-item small {
    display: none; /* on cache le rôle pour gagner de la place */
}
.ai-header-new {
    position: absolute;
    top: -3px;
    right: -3px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: white;
    font-size: 0.55rem;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 5px;
    letter-spacing: 0.5px;
}

.ai-empty {
    background: white;
    border-radius: 16px;
    padding: 4rem 2rem;
    text-align: center;
    color: #6b7280;
    flex: 1;
}

/* Layout principal : sidebar conv + chat */
.ai-main {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 1.25rem;
    flex: 1;
    min-height: 0;
    position: relative;
    transition: grid-template-columns 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Mode plein écran : sidebar masquée, chat en pleine largeur */
.ai-main.ai-sidebar-collapsed {
    grid-template-columns: 0 1fr;
    gap: 0;
}
.ai-main.ai-sidebar-collapsed .ai-conv-sidebar {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
}

/* Sidebar des conversations */
.ai-conv-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    min-height: 0;
    position: relative;
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.2s;
}

/* Bouton "rabattre" centré verticalement sur le bord droit de la sidebar */
.ai-sidebar-collapse {
    position: absolute;
    top: 50%;
    right: -14px;
    transform: translateY(-50%);
    width: 28px;
    height: 60px;
    border-radius: 12px 0 0 12px; /* arrondi côté gauche, droit collé */
    background: white;
    border: 1px solid #E5E7EB;
    border-right: none;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: -2px 2px 8px rgba(15, 23, 42, 0.06);
    z-index: 10;
    transition: all 0.15s;
}
.ai-sidebar-collapse:hover {
    background: var(--cp-primary);
    color: white;
    border-color: var(--cp-primary);
    width: 36px;
}

/* Bouton "déplier" qui flotte sur le bord gauche du chat quand sidebar masquée */
.ai-sidebar-expand {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: 28px;
    height: 60px;
    background: white;
    border: 1px solid #E5E7EB;
    border-left: none;
    border-radius: 0 12px 12px 0;
    color: #64748B;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    box-shadow: 2px 2px 8px rgba(15, 23, 42, 0.06);
    z-index: 20;
    transition: all 0.15s;
}
.ai-sidebar-expand:hover {
    background: var(--cp-primary);
    color: white;
    border-color: var(--cp-primary);
    width: 36px;
}
.ai-new-conv-btn {
    background: var(--cp-primary);
    color: white;
    border: none;
    border-radius: 30px;
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(46,58,124,0.25);
    transition: all 0.15s;
}
.ai-new-conv-btn:hover {
    background: var(--cp-primary-dark);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(46,58,124,0.35);
}

.ai-conv-list {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-right: 0.25rem;
}
.ai-conv-card {
    background: white;
    border: 2px solid transparent;
    border-radius: 20px;
    padding: 0.75rem;
    cursor: pointer;
    text-align: left;
    transition: all 0.15s;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.ai-conv-card:hover { border-color: #cbd5e1; transform: translateY(-1px); }
.ai-conv-card.active {
    border-color: var(--cp-primary);
    background: rgba(46,58,124,0.04);
}
.ai-conv-card-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.5rem;
}
.ai-conv-card-avatar {
    width: 36px;
    height: 36px;
    border-radius: 14px;
    object-fit: cover;
    flex-shrink: 0;
}
.ai-conv-card-title {
    font-size: 0.9rem;
    color: #1f2937;
    display: block;
    line-height: 1.1;
}
.ai-conv-card-time {
    font-size: 0.7rem;
    color: #94a3b8;
}
.ai-conv-card-delete {
    background: transparent;
    border: none;
    color: #cbd5e1;
    cursor: pointer;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.15s;
}
.ai-conv-card-delete:hover { background: #fee2e2; color: #dc2626; }
.ai-conv-card-badge { margin-bottom: 0.4rem; }
.ai-conv-badge-product, .ai-conv-badge-general {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.ai-conv-badge-product { background: #dbeafe; color: #1e40af; }
.ai-conv-badge-general { background: #f1f5f9; color: #64748b; }
.ai-conv-card-preview {
    font-size: 0.85rem;
    color: #6b7280;
    line-height: 1.3;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* Chat principal */
.ai-main .ai-chat-wrapper {
    height: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.ai-chat-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #e5e7eb;
    background: white;
}
.ai-product-picker {
    min-width: 240px;
}
.ai-product-picker select {
    background: #f1f5f9;
    border: none;
    border-radius: 14px;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    font-weight: 500;
}
.ai-icon-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #f1f5f9;
    border: none;
    color: #64748b;
    cursor: pointer;
    transition: all 0.15s;
}
.ai-icon-btn:hover:not(:disabled) { background: var(--cp-primary); color: white; }
.ai-icon-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.ai-badge-premium {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    color: white;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(251,191,36,0.3);
}
.ai-badge-quota {
    background: #f1f5f9;
    color: #64748b;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
}
.ai-badge-quota.danger { background: #fee2e2; color: #b91c1c; }

.ai-product-context {
    background: #fef3c7;
    color: #92400e;
    padding: 0.5rem 1.25rem;
    font-size: 0.85rem;
    border-bottom: 1px solid #fcd34d;
}

/* Messages : ajout des avatars à côté des bulles */
.ai-message {
    flex-direction: row !important;
    align-items: flex-end !important;
    max-width: 85% !important;
    gap: 0.5rem;
}
.ai-message-user {
    flex-direction: row-reverse !important;
}
.ai-msg-avatar {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}
.ai-msg-avatar img, .ai-msg-avatar span {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

/* Responsive */
@media (max-width: 1024px) {
    .ai-main {
        grid-template-columns: 280px 1fr;
    }
}
@media (max-width: 768px) {
    .ai-main {
        grid-template-columns: 1fr;
    }
    .ai-conv-sidebar {
        display: none;
    }
    .ai-header-title { display: none; }
    .ai-header-avatar, .ai-header-avatar-wrap { width: 32px; height: 32px; }
    .ai-header-item strong { font-size: 0.75rem; }
}

/* ============================================
   Mon compte — avatar utilisateur
   ============================================ */
.account-avatar-wrap {
    width: 140px;
    height: 140px;
    position: relative;
}
.account-avatar {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    border: 4px solid var(--cp-primary);
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    display: block;
}
.account-avatar-placeholder {
    background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3rem;
    font-weight: 700;
    letter-spacing: 2px;
}

/* Avatar mini dans le topbar (cliquable, lien vers /mon-compte) */
/* Bouton conteneur de l'avatar : focusable au clavier, sans style de bouton visible. */
.topbar-avatar-btn {
    padding: 0;
    border: none;
    background: none;
    line-height: 0;
    border-radius: 50%;
    cursor: pointer;
}
.topbar-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e5e7eb;
    cursor: pointer;
    transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
    background: white;
}
.topbar-avatar-placeholder.topbar-avatar { display: inline-flex; }
.topbar-avatar:hover {
    transform: scale(1.08);
    border-color: var(--cp-primary);
    box-shadow: 0 4px 12px rgba(38,55,128,0.15);
}
.topbar-avatar-placeholder {
    background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-light));
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    font-weight: 700;
}

/* ============================================
   Tour Builder — panneau flottant + modale
   ============================================ */
.tour-builder-panel {
    position: fixed;
    top: 80px;
    right: 20px;
    width: 340px;
    max-height: calc(100vh - 100px);
    background: white;
    border: 2px solid var(--cp-primary);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.18);
    /* AU-DESSUS de l'overlay (99996) pour rester cliquable + curseur normal */
    z-index: 99999;
    cursor: default;
    display: flex;
    flex-direction: column;
    font-size: 0.9rem;
}
.tour-builder-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: var(--cp-primary);
    color: white;
    border-radius: 10px 10px 0 0;
    flex-shrink: 0;
}
.tour-builder-close {
    background: transparent;
    border: none;
    color: white;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s;
}
.tour-builder-close:hover { background: rgba(255,255,255,0.2); }
.tour-builder-panel-body {
    padding: 0.9rem;
    overflow-y: auto;
    flex: 1;
}

.tour-builder-steps {
    margin-top: 0.5rem;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.75rem;
}
.tour-step-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.5rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    margin-bottom: 0.4rem;
    background: #fafbff;
}
.tour-step-num {
    background: var(--cp-primary);
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    flex-shrink: 0;
}
.tour-step-info { flex: 1; min-width: 0; }
.tour-step-title { font-weight: 600; font-size: 0.85rem; color: #1f2937; }
.tour-step-selector {
    display: block;
    font-size: 0.7rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.tour-step-actions {
    display: flex;
    gap: 0.25rem;
    flex-shrink: 0;
}
.tour-step-actions .btn { color: #6b7280; }
.tour-step-actions .btn:hover { color: var(--cp-primary); }

/* ============================================
   Tour Builder — Highlight box (inspecteur)
   ============================================ */
.tour-builder-highlight {
    position: fixed;
    pointer-events: none;
    z-index: 99997;
    border: 2px solid var(--tour-highlight);
    background: var(--tour-highlight-bg, rgba(79, 70, 229, 0.10));
    border-radius: 4px;
    box-shadow: 0 0 0 4px var(--tour-highlight-halo, rgba(79, 70, 229, 0.12));
    transition: top 0.2s ease-out, left 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out;
    display: none;
}

/* ============================================
   Tour Builder — Floating Edit Sidebar
   ============================================ */
.tour-builder-edit-sidebar {
    position: fixed;
    top: 80px;
    right: 380px; /* à gauche du panneau principal (panel = 340px + margin) */
    width: 380px;
    max-width: calc(100vw - 40px);
    max-height: calc(100vh - 100px);
    overflow-y: auto;
    background: #ffffff;
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.10);
    /* AU-DESSUS de l'overlay (99996) — clics natifs + curseur normal */
    z-index: 99999;
    cursor: default;
    animation: tbSlideIn 0.22s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}
@keyframes tbSlideIn {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

.tb-edit-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.tb-edit-step-badge {
    display: inline-block;
    background: #DDE1FF;
    color: #1F33A6;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.6px;
    padding: 3px 10px;
    border-radius: 999px;
    margin-bottom: 0.4rem;
    text-transform: uppercase;
}
.tb-edit-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.01em;
    margin: 0;
}
.tb-edit-close {
    background: transparent;
    border: none;
    color: #94A3B8;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}
.tb-edit-close:hover { background: #F1F5F9; color: #1F2937; }

/* Bloc cible capturée */
.captured-target {
    background: #F9FAFB;
    border: 1px solid #F1F5F9;
    border-radius: 8px;
    padding: 0.7rem 0.85rem;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}
.captured-target code {
    color: #1F33A6;
    font-weight: 600;
    word-break: break-all;
    font-size: 0.78rem;
    font-family: ui-monospace, 'SF Mono', monospace;
}
.captured-tag {
    display: inline-block;
    margin-left: 0.5rem;
    background: #E0E7FF;
    color: #3730A3;
    padding: 1px 7px;
    border-radius: 4px;
    font-family: ui-monospace, 'SF Mono', monospace;
    font-size: 0.72rem;
    font-weight: 600;
}
.captured-preview {
    margin-top: 0.45rem;
    color: #64748B;
    font-style: italic;
    font-size: 0.78rem;
    line-height: 1.4;
}

/* Inputs minimalistes : fond gris très clair, pas de bordure visible, focus indigo */
.tb-field { margin-bottom: 0.95rem; }
.tb-field-label {
    display: block;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 0.35rem;
    letter-spacing: 0.02em;
}
.tb-field-input,
.tb-field-textarea,
.tb-field-select {
    width: 100%;
    padding: 0.6rem 0.8rem;
    background: #F8FAFC;
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #1F2937;
    font-family: inherit;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.tb-field-input:hover,
.tb-field-textarea:hover,
.tb-field-select:hover { background: #F1F5F9; }
.tb-field-input:focus,
.tb-field-textarea:focus,
.tb-field-select:focus {
    outline: none;
    background: #ffffff;
    border-color: #1F33A6;
    box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.15);
}
.tb-field-textarea { resize: vertical; min-height: 70px; line-height: 1.5; }

.tb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }

/* Boutons d'action */
.tb-actions {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid #F1F5F9;
}
.tb-btn {
    padding: 0.55rem 1.1rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.88rem;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    font-family: inherit;
}
.tb-btn-primary {
    background: #1F33A6;
    color: white;
}
.tb-btn-primary:hover:not(:disabled) {
    background: #4338CA;
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.25);
}
.tb-btn-primary:disabled {
    background: #C9CDE0;
    cursor: not-allowed;
}
.tb-btn-ghost {
    background: transparent;
    color: #64748B;
}
.tb-btn-ghost:hover { background: #F1F5F9; color: #1F2937; }

@media (max-width: 1100px) {
    .tour-builder-edit-sidebar {
        right: 20px;
        top: 160px; /* en dessous du panneau principal sur petits écrans */
    }
}

/* ============================================
   Tour list — switch toggle
   ============================================ */
.tour-toggle {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24px;
    cursor: pointer;
}
.tour-toggle input { opacity: 0; width: 0; height: 0; }
.tour-toggle-slider {
    position: absolute;
    inset: 0;
    background: #cbd5e1;
    border-radius: 24px;
    transition: background 0.2s;
}
.tour-toggle-slider::before {
    content: '';
    position: absolute;
    height: 18px; width: 18px;
    left: 3px; top: 3px;
    background: white;
    border-radius: 50%;
    transition: transform 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.tour-toggle input:checked + .tour-toggle-slider { background: var(--cp-success); }
.tour-toggle input:checked + .tour-toggle-slider::before { transform: translateX(22px); }

/* ============================================
   Onboarding Checklist — widget bottom-right
   ============================================ */
.onboarding-widget {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 9985;
}

/* État réduit — bouton circulaire avec progress ring */
.onboarding-fab {
    background: white;
    border: none;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(0,0,0,0.15);
    width: 70px;
    height: 70px;
    cursor: pointer;
    padding: 0;
    transition: transform 0.2s, box-shadow 0.2s;
}
.onboarding-fab:hover {
    transform: scale(1.06);
    box-shadow: 0 12px 32px rgba(46,58,124,0.25);
}
.onboarding-fab-circle {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.onboarding-ring { width: 70px; height: 70px; transform: rotate(-90deg); }
.onboarding-ring-bg, .onboarding-ring-fg {
    fill: none;
    stroke-width: 3;
}
.onboarding-ring-bg { stroke: #e5e7eb; }
.onboarding-ring-fg {
    stroke: var(--cp-primary);
    stroke-linecap: round;
    transition: stroke-dasharray 0.4s ease-out;
}
.onboarding-fab-percent {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--cp-primary);
    font-size: 1rem;
}
.onboarding-fab-percent small { font-size: 0.7rem; opacity: 0.7; margin-left: 1px; }

/* État ouvert — carte (scoped au widget pour éviter les conflits avec la page /onboarding) */
.onboarding-widget .onboarding-card {
    width: 360px;
    max-width: calc(100vw - 40px);
    max-height: 70vh;
    background: white;
    border-radius: 20px;
    box-shadow: 0 16px 48px rgba(99, 81, 208, 0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: onboardingSlideUp 0.2s ease-out;
    padding: 0;
}
@keyframes onboardingSlideUp {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}
.onboarding-widget .onboarding-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem;
    background: linear-gradient(135deg, #6351d0, #9181E0);
    color: white;
}
.onboarding-card-header strong { color: white; }
.onboarding-card-header .text-muted { color: rgba(255,255,255,0.85) !important; }
.onboarding-close {
    background: rgba(255,255,255,0.15);
    border: none;
    color: white;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.onboarding-close:hover { background: rgba(255,255,255,0.30); }

.onboarding-widget .onboarding-progress {
    position: relative;
    background: #f1f5f9;
    height: 22px;
    margin: 0.75rem 1rem 0.25rem;
    border-radius: 11px;
    overflow: hidden;
    display: block;
    gap: 0;
}
.onboarding-widget .onboarding-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #6351d0, #9181E0);
    transition: width 0.45s ease-out;
}
.onboarding-widget .onboarding-progress-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.75rem;
    font-weight: 700;
    color: #050e4e;
    text-shadow: 0 0 4px rgba(255,255,255,0.8);
}

.onboarding-task-list {
    list-style: none;
    padding: 0.5rem 1rem;
    margin: 0;
    overflow-y: auto;
    flex: 1;
}
.onboarding-task {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid #f1f5f9;
}
.onboarding-task:last-child { border-bottom: none; }
.onboarding-task-check {
    color: #cbd5e1;
    font-size: 1.2rem;
    margin-top: 1px;
    transition: color 0.2s;
}
.onboarding-task.done .onboarding-task-check { color: var(--cp-success); }
.onboarding-task-body { flex: 1; min-width: 0; }
.onboarding-task-title {
    font-weight: 600;
    color: #1f2937;
    font-size: 0.88rem;
    line-height: 1.3;
}
.onboarding-task.done .onboarding-task-title {
    text-decoration: line-through;
    color: #94a3b8;
}
.onboarding-task-desc {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 2px;
    line-height: 1.35;
}

.onboarding-reward {
    margin: 0.5rem 1rem 1rem;
    padding: 1rem;
    background: linear-gradient(135deg, #fef3c7, #fde68a);
    border-radius: 14px;
    text-align: center;
}
.onboarding-reward-emoji { font-size: 2rem; margin-bottom: 0.3rem; }
.onboarding-reward p { font-size: 0.85rem; color: #78350f; margin-top: 0.3rem; }

@media (max-width: 480px) {
    .onboarding-widget { bottom: 12px; right: 12px; }
    .onboarding-card { width: calc(100vw - 24px); }
}

/* Tâches d'onboarding cliquables (liées à un tour) */
.onboarding-task.clickable {
    cursor: pointer;
    border-radius: 8px;
    padding-left: 6px;
    padding-right: 6px;
    margin-left: -6px;
    margin-right: -6px;
    transition: background 0.15s;
}
.onboarding-task.clickable:hover {
    background: rgba(46,58,124,0.06);
}
.onboarding-task.clickable .onboarding-task-title { color: var(--cp-primary); }

/* ============================================
   Tour Player — Tooltip persona (style Tablio)
   Bleu indigo plein, avatar auteur, flèche dynamique
   ============================================ */
.tour-player-tooltip {
    position: fixed;
    z-index: 99985;
    background: linear-gradient(135deg, var(--tour-bubble-light) 0%, var(--tour-bubble) 100%);
    color: white;
    border-radius: 16px;
    padding: 1.1rem 1.25rem 0.9rem;
    box-shadow: 0 16px 40px var(--tour-bubble-shadow, rgba(79, 70, 229, 0.30)), 0 4px 12px rgba(15, 23, 42, 0.10);
    max-width: 380px;
    min-width: 280px;
    font-family: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Flèche : triangle SVG-like en pseudo-element, position selon classe pos-* */
.tp-arrow {
    position: absolute;
    width: 0; height: 0;
    border: 10px solid transparent;
}
.tour-player-tooltip.pos-bottom .tp-arrow {
    top: -16px; left: 28px;
    border-bottom-color: var(--tour-bubble-light);
    border-top: 0;
}
.tour-player-tooltip.pos-top .tp-arrow {
    bottom: -16px; left: 28px;
    border-top-color: var(--tour-bubble);
    border-bottom: 0;
}
.tour-player-tooltip.pos-right .tp-arrow {
    left: -16px; top: 24px;
    border-right-color: var(--tour-bubble-light);
    border-left: 0;
}
.tour-player-tooltip.pos-left .tp-arrow {
    right: -16px; top: 24px;
    border-left-color: var(--tour-bubble);
    border-right: 0;
}

/* Persona : avatar + nom */
.tp-persona {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0.65rem;
}
.tp-avatar {
    width: 32px; height: 32px;
    border-radius: 50%;
    overflow: hidden;
    background: rgba(255,255,255,0.20);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid rgba(255,255,255,0.30);
}
.tp-avatar-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tp-avatar-fallback {
    color: white;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 0.5px;
}
.tp-persona-text { line-height: 1.2; }
.tp-persona-name {
    color: rgba(255,255,255,0.92);
    font-size: 0.82rem;
    font-weight: 500;
}

/* Corps */
.tp-body { margin-bottom: 0.85rem; }
.tp-title {
    margin: 0 0 0.4rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: white;
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.tp-desc {
    margin: 0;
    color: rgba(255,255,255,0.92);
    font-size: 0.92rem;
    line-height: 1.5;
}

/* Footer : compteur + actions */
.tp-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding-top: 0.65rem;
    border-top: 1px solid rgba(255,255,255,0.18);
}
.tp-counter {
    color: rgba(255,255,255,0.70);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
.tp-footer-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.tp-link {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.70);
    font-size: 0.8rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: color 0.15s, background 0.15s;
    font-family: inherit;
}
.tp-link:hover { color: white; background: rgba(255,255,255,0.10); }

.tp-btn {
    padding: 0.45rem 0.9rem;
    border-radius: 8px;
    font-weight: 600;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s;
    border: none;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.tp-btn-primary {
    background: white;
    color: var(--tour-bubble);
}
.tp-btn-primary:hover {
    background: rgba(255,255,255,0.92);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.tp-btn-ghost {
    background: transparent;
    color: white;
    border: 1px solid rgba(255,255,255,0.30);
    width: 32px; height: 32px;
    padding: 0;
    justify-content: center;
}
.tp-btn-ghost:hover:not(:disabled) {
    background: rgba(255,255,255,0.12);
    border-color: rgba(255,255,255,0.50);
}
.tp-btn-ghost:disabled { opacity: 0.4; cursor: not-allowed; }

/* Aperçu des couleurs dans /admin/tours */
.tour-color-preview {
    color: white;
    border-radius: 14px;
    padding: 0.6rem 0.85rem;
    font-size: 0.85rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
}
.tour-color-preview-dot {
    width: 14px; height: 14px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.50);
    flex-shrink: 0;
}

/* ============================================
   Tour Player — Auto-advance hint
   ============================================ */
.tp-hint {
    margin-top: 0.85rem;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.15);
    border-left: 3px solid rgba(255, 255, 255, 0.55);
    border-radius: 6px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 0.82rem;
    line-height: 1.4;
    display: flex;
    align-items: center;
    gap: 0.55rem;
}
.tp-hint-pulse {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: white;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 rgba(255,255,255,0.7);
    animation: tpPulse 1.6s infinite;
}
@keyframes tpPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,255,255,0.7); }
    70%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
}

/* Bouton "Suivant" en mode discret quand auto-advance est actif
   (l'action attendue est chez l'utilisateur, pas ici) */
.tp-btn-ghost-light {
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.85);
    border: 1px solid rgba(255,255,255,0.25);
}
.tp-btn-ghost-light:hover {
    background: rgba(255,255,255,0.18);
    color: white;
    border-color: rgba(255,255,255,0.40);
}

/* Indicateur drag du panneau Tour Builder */
.tour-builder-grip {
    opacity: 0.55;
    font-size: 0.85rem;
    cursor: grab;
}
.tour-builder-panel-header:hover .tour-builder-grip { opacity: 1; }
.tour-builder-panel-header:active { cursor: grabbing; }

/* ============================================
   Page Assistants — Galerie de cartes
   (vue par défaut quand aucun assistant n'est sélectionné)
   ============================================ */
.ai-gallery {
    padding: 1.5rem 0.5rem;
    max-width: 1200px;
    margin: 0 auto;
}
.ai-gallery-intro {
    text-align: center;
    margin-bottom: 2rem;
}
.ai-gallery-intro h2 {
    font-weight: 700;
    color: #1F2937;
    margin-bottom: 0.4rem;
    letter-spacing: -0.02em;
}

.ai-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 cartes par ligne fixe */
    gap: 1.25rem;
}
@media (max-width: 992px) {
    .ai-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .ai-gallery-grid { grid-template-columns: 1fr; }
}

.ai-gallery-card {
    background: white;
    border: 1px solid #f1f5f9;
    border-radius: 20px;
    padding: 1.25rem 1.25rem 1rem;
    text-align: left;
    cursor: pointer;
    transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.2s, border-color 0.2s;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
    display: flex;
    flex-direction: column;
    min-height: 260px;
}
.ai-gallery-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 32px rgba(15, 23, 42, 0.10);
}

.ai-gallery-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 0.85rem;
}
.ai-gallery-card-avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ai-gallery-card-avatar img {
    width: 100%; height: 100%;
    object-fit: cover;
}
.ai-gallery-new-badge {
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 999px;
    margin-top: 4px;
}

.ai-gallery-card-name {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 0.15rem;
    letter-spacing: -0.01em;
}
.ai-gallery-card-role {
    color: #94A3B8;
    font-size: 0.78rem;
    font-weight: 500;
    margin-bottom: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.ai-gallery-card-desc {
    color: #475569;
    font-size: 0.88rem;
    line-height: 1.5;
    margin-bottom: 1rem;
    flex: 1;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ai-gallery-card-cta {
    margin-top: auto;
    font-weight: 600;
    font-size: 0.88rem;
    display: flex;
    align-items: center;
    gap: 0.25rem;
    transition: gap 0.2s;
}
.ai-gallery-card:hover .ai-gallery-card-cta {
    gap: 0.5rem;
}

/* ============================================
   Product Picker — Combobox recherche/récents
   ============================================ */
.product-picker {
    position: relative;
    width: 320px;
    max-width: 100%;
}
.product-picker-trigger {
    width: 100%;
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 0.5rem 0.7rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: inherit;
    text-align: left;
}
.product-picker-trigger:hover {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(46,55,128,0.08);
}
.product-picker.open .product-picker-trigger {
    border-color: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(46,55,128,0.12);
}
.product-picker-trigger-thumb {
    width: 32px; height: 32px;
    border-radius: 6px;
    overflow: hidden;
    background: #F1F5F9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
    font-size: 0.85rem;
}
.product-picker-trigger-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-picker-trigger-thumb.empty { background: rgba(46,55,128,0.08); color: var(--cp-primary); }
.product-picker-trigger-text {
    flex: 1;
    min-width: 0;
    font-size: 0.88rem;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-picker-trigger-text strong { display: block; color: #1F2937; }
.product-picker-chevron {
    color: #94A3B8;
    font-size: 0.75rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}
.product-picker.open .product-picker-chevron { transform: rotate(180deg); }

/* Backdrop transparent pour fermer au clic extérieur */
.product-picker-backdrop {
    position: fixed;
    inset: 0;
    z-index: 990;
}

.product-picker-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: 100%;
    min-width: 320px;
    max-height: 480px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.12), 0 2px 6px rgba(15, 23, 42, 0.04);
    z-index: 991;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: ppFadeIn 0.15s ease-out;
}
@keyframes ppFadeIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

.product-picker-search {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.7rem 0.85rem;
    border-bottom: 1px solid #F1F5F9;
    color: #94A3B8;
}
.product-picker-search input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.9rem;
    color: #1F2937;
    font-family: inherit;
}
.product-picker-search input::placeholder { color: #94A3B8; }
.product-picker-clear {
    background: transparent;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    font-size: 0.75rem;
}
.product-picker-clear:hover { background: #F1F5F9; color: #1F2937; }

.product-picker-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.4rem 0;
}
.product-picker-section-label {
    color: #94A3B8;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.7px;
    padding: 0.5rem 0.85rem 0.3rem;
    text-transform: uppercase;
}
.product-picker-item {
    width: 100%;
    background: transparent;
    border: none;
    padding: 0.5rem 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-family: inherit;
    text-align: left;
    transition: background 0.1s;
    border-radius: 6px;
}
.product-picker-item:hover { background: #F8FAFC; }
.product-picker-item.active { background: rgba(46,55,128,0.08); }
.product-picker-item.active strong { color: var(--cp-primary); }
.product-picker-item-thumb {
    width: 36px; height: 36px;
    border-radius: 6px;
    overflow: hidden;
    background: #F1F5F9;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #94A3B8;
}
.product-picker-item-thumb img { width: 100%; height: 100%; object-fit: cover; }
.product-picker-item-text {
    flex: 1;
    min-width: 0;
    line-height: 1.3;
}
.product-picker-item-text strong {
    display: block;
    font-size: 0.88rem;
    color: #1F2937;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.product-picker-item-text small {
    color: #94A3B8;
    font-size: 0.75rem;
    font-family: ui-monospace, 'SF Mono', monospace;
    margin-left: 0.4rem;
}
.product-picker-check {
    color: var(--cp-primary);
    font-size: 0.85rem;
    flex-shrink: 0;
}

.product-picker-none .product-picker-item-thumb {
    background: rgba(46,55,128,0.10);
    color: var(--cp-primary);
}
.product-picker-none small {
    margin-left: 0;
    display: block;
    font-family: inherit;
    font-style: italic;
}

.product-picker-empty {
    padding: 1.5rem 1rem;
    text-align: center;
}

/* Miniature produit dans les cartes de conversation */
.ai-conv-badge-thumb {
    width: 18px;
    height: 18px;
    border-radius: 4px;
    object-fit: cover;
    margin-right: 0.35rem;
    vertical-align: middle;
}
.ai-conv-badge-icon {
    margin-right: 0.35rem;
    opacity: 0.6;
}
.ai-conv-badge-product {
    display: inline-flex;
    align-items: center;
    max-width: 100%;
    overflow: hidden;
}
.ai-conv-badge-product .text-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 130px;
}

/* ============================================
   Topbar — Badge cloche pour insights non lus
   ============================================ */
.topbar-btn-bell { position: relative; }
.topbar-bell-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: linear-gradient(135deg, #f43f5e, #e11d48);
    color: white;
    font-size: 0.65rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(244, 63, 94, 0.40);
    animation: bellPulse 2s ease-in-out infinite;
}
@keyframes bellPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.10); }
}

/* ============================================
   Page /insights — Cartes
   ============================================ */
.insights-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}
@media (max-width: 992px) {
    .insights-grid { grid-template-columns: 1fr; }
}

.insight-card {
    background: white;
    border-radius: 20px;
    padding: 1.1rem 1.25rem 0.85rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    border-left: 4px solid #cbd5e1;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}
.insight-card:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.10);
    transform: translateY(-2px);
}
.insight-card.unread {
    background: linear-gradient(135deg, #ffffff 0%, var(--cp-lavande-soft) 100%);
    box-shadow: 0 4px 14px rgba(145, 129, 224, 0.14);
}
.insight-card.unread::before {
    content: '';
    position: absolute;
    top: 14px;
    right: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--cp-primary);
    box-shadow: 0 0 0 3px rgba(99, 81, 208, 0.22);
    animation: insightUnreadDot 2s ease-in-out infinite;
}
@keyframes insightUnreadDot {
    0%, 100% { transform: scale(1); opacity: 1; }
    50%      { transform: scale(1.3); opacity: 0.7; }
}
.insight-info    { border-left-color: var(--cp-primary-light); }
.insight-success { border-left-color: #10b981; }
.insight-warning { border-left-color: var(--cp-accent); }
.insight-tip     { border-left-color: var(--cp-primary); }

.insight-card-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}
.insight-icon { font-size: 1.2rem; }
.insight-category {
    color: #64748B;
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    flex: 1;
}
.insight-dismiss {
    background: transparent;
    border: none;
    color: #94A3B8;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.insight-dismiss:hover { background: #F1F5F9; color: #1F2937; }

.insight-title {
    margin: 0 0 0.55rem;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--cp-primary-dark);
    letter-spacing: -0.01em;
    line-height: 1.3;
}
.insight-body {
    color: #475569;
    font-size: 0.9rem;
    line-height: 1.55;
    margin-bottom: 0.85rem;
}
.insight-body p:last-child { margin-bottom: 0; }
.insight-body strong { color: var(--cp-primary-dark); }

.insight-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 0.6rem;
    border-top: 1px solid #F1F5F9;
}

/* Boutons feedback 👍/👎 sur les cartes insights */
.insight-rating {
    display: inline-flex;
    gap: 4px;
    background: #F8FAFC;
    border-radius: 999px;
    padding: 2px;
}
.insight-rate-btn {
    background: transparent;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    color: #94A3B8;
    cursor: pointer;
    font-size: 0.78rem;
    transition: all 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.insight-rate-btn:hover {
    background: white;
    color: #1F2937;
    transform: scale(1.1);
}
.insight-rate-btn.active.up {
    background: #DCFCE7;
    color: #16A34A;
}
.insight-rate-btn.active.down {
    background: #FEE2E2;
    color: #DC2626;
}
.insight-rate-btn.active { transform: scale(1.05); }

/* ============================================
   Insights — Hero card premium (no jaune)
   ============================================ */
.insights-hero {
    position: relative;
    background: linear-gradient(135deg, var(--cp-primary-dark) 0%, #2a1f86 55%, var(--cp-primary) 100%);
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    color: white;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(99, 81, 208, 0.28);
}

/* Halo doux qui pulse en arrière-plan pour évoquer l'IA en activité */
.insights-hero-glow {
    position: absolute;
    top: -60%;
    right: -10%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(255, 213, 79, 0.32) 0%, transparent 60%);
    border-radius: 50%;
    pointer-events: none;
    animation: heroGlow 6s ease-in-out infinite;
}
@keyframes heroGlow {
    0%, 100% { transform: scale(1) translate(0, 0); opacity: 0.7; }
    50%      { transform: scale(1.15) translate(-10px, 10px); opacity: 1; }
}

.insights-hero-content {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.1rem;
    z-index: 2;
}

.insights-hero-icon {
    width: 54px; height: 54px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--cp-primary-dark);
    font-size: 1.5rem;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(255, 213, 79, 0.42);
}

.insights-hero-title {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: white;
}
.insights-hero-subtitle {
    margin: 0;
    color: rgba(255,255,255,0.85);
    font-size: 0.88rem;
    line-height: 1.55;
    max-width: 720px;
}
.insights-hero-subtitle strong { color: #FFE9A0; font-weight: 600; }

/* ============================================
   Insight Of The Day — Widget Dashboard
   Card premium cohérente avec le hero /insights
   ============================================ */
/* ============================================
   INSIGHT DU JOUR — design charte 2026 (#f6f2fd)
   ============================================ */
.iod-card {
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    margin-bottom: 1.5rem;
    background: #f6f2fd;
    color: #0F172A;
    box-shadow: 0 4px 24px rgba(145, 129, 224, 0.12);
    animation: iodSlideIn 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes iodSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sparkles décoratifs */
.iod-card::before {
    content: '✦';
    position: absolute;
    top: 18px;
    left: 44%;
    font-size: 1.1rem;
    color: #9181E0;
    opacity: 0.5;
    pointer-events: none;
}
.iod-card::after {
    content: '✦';
    position: absolute;
    top: 55%;
    right: 10%;
    font-size: 0.7rem;
    color: #FFD54F;
    opacity: 0.7;
    pointer-events: none;
}

/* Suppression du glow sombre */
.iod-glow { display: none; }

.iod-content {
    position: relative;
    z-index: 2;
    padding: 1.4rem 1.6rem 1.2rem;
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto 1fr auto;
    gap: 0;
    align-items: start;
}

.iod-header {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.iod-eyebrow {
    background: rgba(145, 129, 224, 0.18);
    color: #443cbc;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1px;
    padding: 5px 12px;
    border-radius: 999px;
    text-transform: uppercase;
}
.iod-link {
    color: #443cbc;
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    transition: opacity 0.15s;
}
.iod-link:hover { opacity: 0.75; color: #443cbc; }

.iod-title {
    grid-column: 1;
    margin: 0 0 0.5rem;
    font-size: 1.2rem;
    font-weight: 700;
    color: #0F172A;
    letter-spacing: -0.01em;
    line-height: 1.35;
}
.iod-body {
    grid-column: 1;
    color: #374151;
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.1rem;
    max-width: 560px;
}
.iod-body p:last-child { margin-bottom: 0; }
.iod-body strong { color: #443cbc; font-weight: 600; }

/* Zone illustration + tagline (côté droit) */
.iod-illustration {
    grid-column: 2;
    grid-row: 2 / 5;
    align-self: center;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0 0.5rem 0 1.5rem;
}
.iod-image {
    width: 200px;
    max-height: 180px;
    height: auto;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.iod-tagline-hand {
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 0.95rem;
    line-height: 1.5;
    color: #6351d0;
    opacity: 0.9;
    white-space: nowrap;
}
@media (max-width: 900px) {
    .iod-tagline-hand { display: none; }
}
.iod-tagline {
    font-family: 'Baloo 2', 'Poppins', cursive;
    font-size: 1rem;
    font-weight: 600;
    color: #443cbc;
    text-align: center;
    line-height: 1.4;
    opacity: 0.85;
}
.iod-deco-star {
    font-size: 2.5rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(255,213,79,0.5));
}

.iod-footer {
    grid-column: 1;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.iod-rating {
    display: inline-flex;
    gap: 4px;
    background: rgba(145, 129, 224, 0.10);
    border-radius: 999px;
    padding: 3px;
}
.iod-rate {
    background: white;
    border: 1px solid rgba(145,129,224,0.2);
    width: 34px;
    height: 34px;
    border-radius: 50%;
    color: #6B728E;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
}
.iod-rate:hover { background: #f0edfd; color: #443cbc; transform: scale(1.1); border-color: #9181E0; }
.iod-rate.active.up   { background: #DCFCE7; color: #16A34A; border-color: #86EFAC; }
.iod-rate.active.down { background: #FEE2E2; color: #DC2626; border-color: #FCA5A5; }

/* Bouton CTA — couleur #443cbc */
.iod-cta {
    background: #443cbc;
    color: white;
    padding: 0.6rem 1.4rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.88rem;
    text-decoration: none;
    transition: all 0.18s;
    box-shadow: 0 4px 14px rgba(68,60,188,0.30);
    white-space: nowrap;
}
.iod-cta:hover {
    background: #3630a0;
    color: white;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(68,60,188,0.40);
}

/* CTA état vide */
.iod-cta-bright {
    background: #443cbc;
    color: white;
    border: none;
    padding: 0.65rem 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s;
    box-shadow: 0 4px 14px rgba(68,60,188,0.30);
}
.iod-cta-bright:hover:not(:disabled) {
    background: #3630a0;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(68,60,188,0.40);
}
.iod-cta-bright:disabled { opacity: 0.7; cursor: wait; }

/* Variants severity */
.iod-severity-warning { }
.iod-severity-success { }
.iod-severity-warning::after, .iod-severity-success::after { display: none; }

/* État vide / first run — charte light 2026 */
/* Carte de bienvenue (nouvel utilisateur sans produit) */
.iod-welcome {
    background: #f6f2fd;
    border: 1px solid rgba(99, 81, 208, 0.10);
}
.iod-welcome .iod-title { color: #050e4e; }
.iod-welcome .iod-body  { color: #374151; }

.iod-empty {
    background: #f6f2fd;
    border: 1px solid rgba(99, 81, 208, 0.10);
}
.iod-empty .iod-content {
    padding: 2.25rem 1.75rem;
    display: block;
    color: #050e4e;
}
.iod-empty .iod-title,
.iod-empty .iod-title.text-white { color: #050e4e !important; }
.iod-empty .iod-body,
.iod-empty .text-white-75 { color: #6b7280 !important; }
.iod-empty .iod-body { max-width: 560px; margin-left: auto; margin-right: auto; }
.iod-empty-icon { font-size: 3rem; margin-bottom: 0.6rem; }
.text-white-75 { color: rgba(255,255,255,0.85) !important; }

/* Skeleton */
.iod-card-skeleton {
    height: 180px;
    position: relative;
    background: #f6f2fd;
}
.iod-shimmer {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(145,129,224,0.10) 50%, transparent 100%);
    animation: iodShimmer 1.4s infinite;
}
@keyframes iodShimmer {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

/* ============================================
   Product Insight Card — affichée sur /calculateur/{id}
   Réutilise les vars/anims de l'IOD dashboard pour cohérence
   ============================================ */
/* ============================================
   Avis IA produit — état VIDE : ligne compacte
   ============================================ */
.pic-mini {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.85rem 0.6rem 0.6rem;
    background: linear-gradient(90deg, #f6f4ff 0%, #fffbeb 100%);
    border: 1px solid #E5E3F5;
    border-radius: 14px;
    margin: 0.5rem 0 1rem;
    transition: box-shadow .15s, border-color .15s;
}
.pic-mini:hover {
    border-color: #C7C0F0;
    box-shadow: 0 4px 14px rgba(99, 81, 208, 0.10);
}
.pic-mini-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: white;
    color: #6351d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex-shrink: 0;
    box-shadow: 0 1px 3px rgba(99, 81, 208, 0.15);
}
.pic-mini-text {
    flex: 1;
    min-width: 0;
}
.pic-mini-title {
    font-size: 0.92rem;
    font-weight: 700;
    color: #050e4e;
    line-height: 1.2;
    margin-bottom: 2px;
}
.pic-mini-subtitle {
    font-size: 0.78rem;
    color: #6B7280;
    line-height: 1.3;
}
.pic-mini-cta {
    background: #FFD54F;
    color: #050e4e;
    border: none;
    border-radius: 999px;
    padding: 0.5rem 1rem;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    transition: transform .12s, box-shadow .12s, background .12s;
    flex-shrink: 0;
    white-space: nowrap;
}
.pic-mini-cta:hover:not(:disabled) {
    background: #FFC233;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(255, 213, 79, 0.45);
}
.pic-mini-cta:disabled { opacity: 0.6; cursor: wait; }
.pic-mini-cta-cost {
    background: rgba(5, 14, 78, 0.12);
    color: #050e4e;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    margin-left: 0.35rem;
}
.pic-mini-skeleton .pic-mini-text { display: flex; flex-direction: column; gap: 4px; }

/* ============================================
   Avis IA produit — état REMPLI : carte expandable
   ============================================ */
.pic-filled {
    background: linear-gradient(135deg, #ede9fb 0%, #ffffff 60%, #fffbeb 100%);
    border: 1px solid #D6CCEF;
    border-radius: 16px;
    margin: 0.5rem 0 1rem;
    overflow: hidden;
    animation: picSlideIn .25s ease;
}
@keyframes picSlideIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}
.pic-filled-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 1rem;
    cursor: pointer;
    user-select: none;
}
.pic-sev-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}
.pic-filled-meta {
    flex: 1;
    min-width: 0;
}
.pic-eyebrow-soft {
    display: inline-flex;
    align-items: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: #6351d0;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.pic-filled-title {
    margin: 2px 0 0;
    font-size: 1rem;
    color: #050e4e;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.pic-icon-btn {
    background: white;
    border: 1px solid #E5E3F5;
    color: #6351d0;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .12s, border-color .12s, color .12s;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.pic-icon-btn:hover:not(:disabled) {
    background: #ede9fb;
    border-color: #C7C0F0;
    color: #4338CA;
}
.pic-icon-btn:disabled { opacity: 0.6; cursor: wait; }
.pic-refresh-btn:hover:not(:disabled) i { transform: rotate(90deg); transition: transform .25s; }

.pic-filled-body {
    padding: 0.25rem 1rem 0.85rem;
    color: #1F2937;
    font-size: 0.88rem;
    line-height: 1.55;
    border-top: 1px solid rgba(214, 204, 239, 0.5);
}
.pic-filled-body p { margin-bottom: 0.5rem; }
.pic-filled-body p:last-child { margin-bottom: 0; }
.pic-filled-body strong { color: #050e4e; font-weight: 700; }
.pic-filled-body ul, .pic-filled-body ol { margin: 0.4rem 0 0.6rem; padding-left: 1.25rem; }
.pic-filled-body li { margin-bottom: 0.2rem; }

.pic-filled-foot {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    padding: 0 1rem 0.65rem;
}
.pic-rating { display: inline-flex; gap: 4px; }
.pic-rate {
    background: white;
    border: 1px solid #E5E3F5;
    color: #94A3B8;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.78rem;
    transition: all .12s;
}
.pic-rate:hover { border-color: #C7C0F0; color: #6351d0; }
.pic-rate.active.up { background: #D1FAE5; border-color: #6EE7B7; color: #047857; }
.pic-rate.active.down { background: #FEE2E2; border-color: #FCA5A5; color: #B91C1C; }

/* Liseré de severity à gauche (state filled uniquement) */
.pic-sev-warning { border-left: 4px solid #F59E0B; }
.pic-sev-success { border-left: 4px solid #10B981; }
.pic-sev-tip     { border-left: 4px solid #8B5CF6; }
.pic-sev-info    { border-left: 4px solid #1F33A6; }

@media (max-width: 640px) {
    .pic-mini { flex-wrap: wrap; }
    .pic-mini-cta { width: 100%; justify-content: center; margin-top: 0.5rem; }
    .pic-mini-subtitle { display: none; }
}

/* ============================================
   Concierge Widget — bulle flottante + chat
   ============================================ */
.cgw-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 60px; height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1F33A6 0%, #1F33A6 60%, #4338CA 100%);
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.40), 0 0 0 4px rgba(79,70,229,0.10);
    z-index: 9970;
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}
.cgw-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 14px 36px rgba(79, 70, 229, 0.50), 0 0 0 5px rgba(79,70,229,0.15);
}
.cgw-fab.cgw-pulse {
    animation: cgwPulse 2s ease-in-out infinite;
}
@keyframes cgwPulse {
    0%, 100% { box-shadow: 0 10px 28px rgba(79,70,229,0.40), 0 0 0 0 rgba(244,63,94,0.60); }
    50%      { box-shadow: 0 10px 28px rgba(79,70,229,0.40), 0 0 0 16px rgba(244,63,94,0); }
}
.cgw-fab-dot {
    position: absolute;
    top: 6px; right: 6px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #F43F5E;
    border: 2px solid white;
}

/* Mobile : on masque la bulle flottante permanente (elle gêne la navigation).
   L'assistant IA s'ouvre alors via le bouton « ? » de la topbar. */
@media (max-width: 768px) {
    .cgw-fab {
        display: none;
    }
}

/* Panneau chat */
.cgw-panel {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 48px);
    background: white;
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(15,23,42,0.25), 0 8px 16px rgba(15,23,42,0.08);
    z-index: 9970;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: cgwSlideUp 0.25s cubic-bezier(0.22, 1, 0.36, 1);
    font-family: 'Inter', sans-serif;
}
@keyframes cgwSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.cgw-header {
    background: linear-gradient(135deg, #1E1B4B 0%, #1F33A6 100%);
    color: white;
    padding: 0.85rem 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}
.cgw-header-left { display: flex; align-items: center; gap: 0.65rem; }
.cgw-avatar {
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD54F, #FFE9A0);
    color: #1E1B4B;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.cgw-header strong { font-size: 0.95rem; }
.cgw-online {
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem;
    display: flex; align-items: center; gap: 4px;
}
.cgw-online-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #34D399;
    box-shadow: 0 0 0 0 rgba(52,211,153,0.7);
    animation: cgwOnline 2s ease-in-out infinite;
}
@keyframes cgwOnline {
    0%, 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0.7); }
    50%      { box-shadow: 0 0 0 6px rgba(52,211,153,0); }
}
.cgw-header-actions { display: flex; gap: 4px; }
.cgw-icon-btn {
    background: rgba(255,255,255,0.10);
    border: none;
    color: rgba(255,255,255,0.85);
    width: 30px; height: 30px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    font-size: 0.78rem;
}
.cgw-icon-btn:hover { background: rgba(255,255,255,0.20); color: white; }

/* Body / messages */
.cgw-body {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    background: #FAFBFF;
}
.cgw-body::-webkit-scrollbar { width: 6px; }
.cgw-body::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; }

/* Welcome state */
.cgw-welcome {
    text-align: center;
    padding: 1.5rem 0 0.5rem;
}
.cgw-welcome-emoji { font-size: 2.5rem; margin-bottom: 0.4rem; }
.cgw-welcome h4 {
    margin: 0 0 0.3rem;
    font-size: 1.1rem;
    font-weight: 700;
    color: #1F2937;
}
.cgw-welcome p {
    color: #64748B;
    font-size: 0.88rem;
    margin: 0;
    line-height: 1.45;
}

/* Suggestions */
.cgw-suggestions {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-top: 0.5rem;
}
.cgw-suggestion {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 0.55rem 0.85rem;
    text-align: left;
    color: #1F33A6;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.cgw-suggestion:hover:not(:disabled) {
    background: #DDE1FF;
    border-color: #1F33A6;
    transform: translateX(2px);
}
.cgw-suggestion:disabled { opacity: 0.5; cursor: not-allowed; }
.cgw-suggestion i { color: #1F33A6; }

/* Messages */
.cgw-msg {
    display: flex;
    gap: 0.5rem;
    max-width: 100%;
}
.cgw-msg-user {
    justify-content: flex-end;
}
.cgw-msg-user .cgw-msg-bubble {
    background: linear-gradient(135deg, #1F33A6, #1F33A6);
    color: white;
    border-radius: 14px 14px 4px 14px;
}
.cgw-msg-assistant .cgw-msg-bubble {
    background: white;
    color: #1F2937;
    border: 1px solid #E5E7EB;
    border-radius: 14px 14px 14px 4px;
}
.cgw-msg-avatar {
    width: 26px; height: 26px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FFD54F, #FFE9A0);
    color: #1E1B4B;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
    margin-top: 4px;
}
.cgw-msg-bubble {
    padding: 0.6rem 0.85rem;
    font-size: 0.88rem;
    line-height: 1.5;
    max-width: 78%;
    box-shadow: 0 1px 2px rgba(0,0,0,0.04);
    overflow-wrap: anywhere;
}
.cgw-msg-bubble p:last-child { margin-bottom: 0; }
.cgw-msg-bubble p { margin: 0 0 0.4rem; }
.cgw-msg-bubble ul, .cgw-msg-bubble ol { margin: 0.3rem 0; padding-left: 1.2rem; }
.cgw-msg-bubble strong { font-weight: 700; }
.cgw-msg-user .cgw-msg-bubble strong { color: #FDE68A; }

/* Typing indicator */
.cgw-typing {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0.7rem 0.9rem;
}
.cgw-typing span {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #94A3B8;
    animation: cgwTyping 1.4s infinite;
}
.cgw-typing span:nth-child(2) { animation-delay: 0.2s; }
.cgw-typing span:nth-child(3) { animation-delay: 0.4s; }
@keyframes cgwTyping {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}

/* Footer */
.cgw-footer {
    display: flex;
    align-items: flex-end;
    gap: 0.5rem;
    padding: 0.75rem 0.85rem;
    background: white;
    border-top: 1px solid #F1F5F9;
    flex-shrink: 0;
}
.cgw-input {
    flex: 1;
    background: #F8FAFC;
    border: 1px solid transparent;
    border-radius: 12px;
    padding: 0.6rem 0.85rem;
    font-size: 0.9rem;
    color: #1F2937;
    resize: none;
    max-height: 100px;
    font-family: inherit;
    line-height: 1.4;
    transition: border-color 0.15s, background 0.15s;
}
.cgw-input:focus {
    outline: none;
    background: white;
    border-color: #1F33A6;
}
.cgw-send {
    width: 38px; height: 38px;
    border-radius: 14px;
    background: linear-gradient(135deg, #1F33A6, #1F33A6);
    color: white;
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: all 0.15s;
}
.cgw-send:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,0.30); }
.cgw-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* Décale le widget onboarding pour qu'il ne chevauche pas (s'il existe) */
@media (min-width: 480px) {
    .onboarding-widget { bottom: 100px; }
}

/* ============================================
   Concierge Phase 3 — Actions + System messages
   ============================================ */
.cgw-msg-content {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-width: 78%;
}
.cgw-msg-assistant .cgw-msg-content .cgw-msg-bubble { max-width: 100%; }

/* Boutons d'action proposés par l'IA */
.cgw-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-top: 0.1rem;
}
.cgw-action {
    background: white;
    border: 1.5px solid #1F33A6;
    color: #1F33A6;
    padding: 0.45rem 0.85rem;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
    display: inline-flex;
    align-items: center;
}
.cgw-action:hover:not(:disabled) {
    background: #1F33A6;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(79,70,229,0.25);
}
.cgw-action.executed {
    background: #DCFCE7;
    border-color: #16A34A;
    color: #15803D;
    cursor: default;
}
.cgw-action.executed:hover { transform: none; box-shadow: none; }
.cgw-action:disabled { cursor: not-allowed; }

/* Messages système (résultat d'action) */
.cgw-system {
    align-self: center;
    background: #F0FDF4;
    color: #166534;
    border: 1px solid #BBF7D0;
    border-radius: 14px;
    padding: 0.5rem 0.85rem;
    font-size: 0.82rem;
    max-width: 90%;
    text-align: center;
    line-height: 1.4;
}
.cgw-system p { margin: 0; }
.cgw-system strong { color: #14532D; }

/* Bouton "Ouvrir" sous un message système avec navigation */
.cgw-system-link {
    margin-top: 0.4rem;
    background: white;
    border: 1.5px solid #16A34A;
    color: #15803D;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.cgw-system-link:hover {
    background: #16A34A;
    color: white;
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(22,163,74,0.30);
}

/* Ligne "coût direct" dans le calculateur — charte lavande (au lieu de jaune/orange) */
.direct-cost-row {
    background: linear-gradient(135deg, #f6f4ff 0%, #ffffff 100%);
    border-left: 3px solid #6351d0;
    border-radius: 10px;
    padding: 0.85rem 1rem;
    margin-left: 0;
    margin-right: 0;
}
.direct-cost-row .form-label {
    color: #6351d0;
}
.direct-cost-row .input-group-text {
    background: #ede9fb;
    color: #6351d0;
    border-color: #D6CCEF;
    font-weight: 600;
}
.direct-cost-row .cp-input {
    border-color: #D6CCEF;
}
.direct-cost-row .cp-input:focus {
    border-color: #6351d0;
    box-shadow: 0 0 0 0.2rem rgba(99, 81, 208, 0.15);
}

/* Bouton "soft" : action secondaire (ex: créer un nouveau matériau) */
.btn-cp-soft {
    background: #ede9fb;
    color: #6351d0;
    border: 1px solid transparent;
    border-radius: 999px;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
}
.btn-cp-soft:hover {
    background: #ddd5f5;
    color: #4338CA;
}
.btn-cp-soft.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.8rem; }

/* Concierge — Mode agrandi */
.cgw-panel.cgw-expanded {
    width: min(720px, calc(100vw - 48px));
    height: min(85vh, 900px);
    transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1), height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
.cgw-panel {
    transition: width 0.25s cubic-bezier(0.22, 1, 0.36, 1), height 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}
/* En mode expanded, on élargit aussi les bulles pour profiter de l'espace */
.cgw-expanded .cgw-msg-content { max-width: 85%; }
.cgw-expanded .cgw-msg-bubble { font-size: 0.94rem; line-height: 1.55; }
.cgw-expanded .cgw-input { font-size: 0.95rem; padding: 0.75rem 1rem; }
.cgw-expanded .cgw-body { padding: 1.25rem 1.5rem; gap: 0.9rem; }

/* Concierge — avatar custom (FAB + header + messages) */
.cgw-fab-avatar {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.cgw-avatar img,
.cgw-msg-avatar img {
    width: 100%; height: 100%;
    border-radius: 50%;
    object-fit: cover;
    display: block;
}
.cgw-avatar { overflow: hidden; }
.cgw-msg-avatar { overflow: hidden; }

/* Admin : aperçu avatar concierge */
.concierge-avatar-preview {
    width: 120px; height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: #F1F5F9;
    border: 3px solid #1F33A6;
    box-shadow: 0 6px 20px rgba(79,70,229,0.20);
}
.concierge-avatar-preview img {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
.concierge-avatar-fallback {
    width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, #1F33A6, #1F33A6);
    color: white; font-size: 2.5rem;
}

/* Concierge & Onboarding : remontent quand le calculateur affiche sa barre sticky du bas */
body:has(.calc-bottom-bar) .cgw-fab,
body:has(.calc-bottom-bar) .cgw-panel:not(.cgw-expanded) {
    bottom: 92px;
}
body:has(.calc-bottom-bar) .onboarding-widget {
    bottom: 168px;
}

/* Tableau Produits : pas de wrap sur les cellules numériques et la colonne actions */
.cp-table th.nowrap,
.cp-table td.nowrap { white-space: nowrap; }

.cp-table .row-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    justify-content: flex-end;
    white-space: nowrap;
}
.cp-table .row-actions .btn { flex-shrink: 0; }

/* Scroll horizontal propre sur petits écrans pour éviter les wraps moches */
.cp-card .cp-table-products {
    min-width: 980px;
}
.cp-card:has(.cp-table-products) {
    overflow-x: auto;
}

/* ============================================
   Dashboard — Refonte premium 10/10
   ============================================ */

/* En-tête personnalisé */
.dash-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.25rem;
    flex-wrap: wrap;
}
.dash-greeting {
    margin: 0;
    font-size: 1.65rem;
    font-weight: 700;
    color: #050e4e;
    letter-spacing: -0.02em;
}
.dash-firstname {
    color: #6351d0;
}
.dash-date {
    color: #94A3B8;
    font-size: 0.88rem;
    margin-top: 2px;
    text-transform: capitalize;
}
.dash-trial-banner {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, #1E1B4B, #1F33A6);
    color: white;
    padding: 0.65rem 1.1rem;
    border-radius: 12px;
    text-decoration: none;
    font-size: 0.88rem;
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.30);
    transition: transform 0.2s, box-shadow 0.2s;
}
.dash-trial-banner:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(79, 70, 229, 0.40);
    color: white;
}
.dash-trial-banner.urgent {
    background: linear-gradient(135deg, #DC2626, #F43F5E);
    animation: dashTrialPulse 2s ease-in-out infinite;
    box-shadow: 0 6px 20px rgba(244, 63, 94, 0.40);
}
@keyframes dashTrialPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* === KPI Grid === */
.dash-kpis {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1rem;
    margin: 1.25rem 0;
}
@media (max-width: 1300px) { .dash-kpis { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 1100px) { .dash-kpis { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .dash-kpis { grid-template-columns: 1fr; } }

.dash-kpi {
    position: relative;
    background: white;
    border-radius: 20px;
    padding: 1.1rem 1.2rem 0.9rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    overflow: hidden;
    min-height: 130px;
    display: flex;
    flex-direction: column;
}
.dash-kpi:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
}
.dash-kpi-secondary {
    background: #fef6f6;
    border: 1px solid rgba(235, 51, 64, 0.18);
}
.dash-kpi-secondary .dash-kpi-value { color: #050e4e; }
.dash-kpi-secondary .dash-kpi-label { color: #050e4e; }
.dash-kpi-header {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
}
.dash-kpi-icon {
    width: 32px; height: 32px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}
.dash-kpi-label {
    font-size: 0.72rem;
    color: #050e4e;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1.2;
}
.dash-kpi-value {
    font-size: 1.7rem;
    font-weight: 700;
    color: #050e4e;
    line-height: 1.1;
    margin-bottom: 0.25rem;
    letter-spacing: -0.02em;
}
.dash-kpi-footer {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: auto;
}
.dash-kpi-sublabel {
    font-size: 0.72rem;
    color: #94A3B8;
}
.dash-kpi-delta {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
}
.dash-kpi-delta.up   { background: #DCFCE7; color: #16A34A; }
.dash-kpi-delta.down { background: #FEE2E2; color: #DC2626; }
.dash-kpi-spark {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 32px;
    opacity: 0.7;
    pointer-events: none;
    z-index: 0;
}
/* La sparkline est un fond décoratif : le contenu textuel reste toujours au-dessus. */
.dash-kpi-header, .dash-kpi-value, .dash-kpi-footer { position: relative; z-index: 1; }

/* Carte KPI cliquable (ex. URSSAF → /urssaf) */
a.dash-kpi-link { text-decoration: none; cursor: pointer; }
a.dash-kpi-link:hover { text-decoration: none; }

/* Pastille d'échéance dans le pied d'une carte KPI */
.dash-kpi-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: #EEF2FF;
    color: #6351d0;
    white-space: nowrap;
}
.dash-kpi-badge.urgent  { background: #FEF3C7; color: #B45309; }
.dash-kpi-badge.overdue { background: #FEE2E2; color: #DC2626; }
.dash-kpi-badge.ok      { background: #DCFCE7; color: #16A34A; }

/* Renforcement visuel de la carte URSSAF selon l'urgence de l'échéance */
.dash-kpi.urssaf-urgent  { border-color: rgba(180, 83, 9, 0.35); background: #fffbeb; }
.dash-kpi.urssaf-overdue { border-color: rgba(220, 38, 38, 0.4);  background: #fef2f2; }

/* État d'erreur du tableau de bord (échec de chargement) */
.dash-error {
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    padding: 2.5rem 1.5rem;
    margin: 1.25rem 0;
    text-align: center;
}
.dash-error-icon { font-size: 2rem; color: #eb3340; margin-bottom: 0.75rem; }
.dash-error-title { font-weight: 700; color: #050e4e; margin-bottom: 0.25rem; }
.dash-error-text { color: #94A3B8; font-size: 0.9rem; margin-bottom: 1rem; }

/* === Bloc « À faire » : priorités urgentes (URSSAF, commandes, devis) === */
.dash-priorities {
    background: white;
    border-radius: 20px;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    border: 1px solid rgba(99, 81, 208, 0.12);
    padding: 1.1rem 1.2rem;
    margin: 1.25rem 0;
}
.dash-priorities-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 0.75rem;
}
.dash-priorities-head h3 { font-size: 1rem; font-weight: 700; color: #050e4e; margin: 0; }
.dash-priorities-count {
    background: #eb3340; color: white; font-size: 0.72rem; font-weight: 700;
    border-radius: 999px; padding: 2px 9px; min-width: 22px; text-align: center;
}
.dash-priorities-list { display: flex; flex-direction: column; gap: 0.35rem; }
.dash-priority-row {
    display: flex; align-items: center; gap: 0.75rem;
    padding: 0.6rem 0.7rem; border-radius: 12px;
    text-decoration: none; transition: background 0.15s;
}
.dash-priority-row:hover { background: #F8FAFC; }
.dash-priority-row.sev-3 { background: #fff5f5; }
.dash-priority-row.sev-3:hover { background: #fdecec; }
.dash-priority-icon {
    width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.dash-priority-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dash-priority-text strong { color: #050e4e; font-size: 0.9rem; font-weight: 600; }
.dash-priority-text small { color: #94A3B8; font-size: 0.78rem; }
.dash-priority-arrow { color: #CBD5E1; font-size: 0.8rem; flex-shrink: 0; }

/* === Bandeau pipeline (devis en attente / commandes en cours) === */
.pipeline-strip { display: flex; gap: 1rem; flex-wrap: wrap; }
.pipeline-chip {
    display: flex; align-items: center; gap: 0.7rem;
    background: white; border-radius: 16px; padding: 0.7rem 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    text-decoration: none; flex: 1; min-width: 220px;
    transition: transform 0.15s, box-shadow 0.15s;
}
.pipeline-chip:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08); }
.pipeline-chip-icon {
    width: 38px; height: 38px; border-radius: 10px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center; font-size: 1rem;
}
.pipeline-chip-value { font-weight: 700; color: #050e4e; font-size: 0.95rem; }
.pipeline-chip-sub { color: #94A3B8; font-size: 0.8rem; }

/* === Objectif de CA mensuel (jauge) === */
.objective-head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 0.75rem; margin-bottom: 0.75rem;
}
.objective-title { font-weight: 700; color: #050e4e; }
.objective-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; }
.objective-edit-actions { display: flex; align-items: center; gap: 0.5rem; }
.objective-numbers { display: flex; align-items: baseline; gap: 0.4rem; margin-bottom: 0.5rem; }
.objective-current { font-size: 1.6rem; font-weight: 700; color: #050e4e; letter-spacing: -0.02em; }
.objective-target { color: #94A3B8; font-size: 0.95rem; }
.objective-pct { margin-left: auto; font-weight: 700; color: #6351d0; font-size: 1.05rem; }
.objective-pct.reached { color: #16A34A; }
.objective-bar-bg {
    height: 12px; border-radius: 999px; background: #EEF2FF; overflow: hidden;
}
.objective-bar-fill {
    height: 100%; border-radius: 999px;
    background: linear-gradient(90deg, #6351d0, #8b7ff0);
    transition: width 0.4s ease;
}
.objective-bar-fill.reached { background: linear-gradient(90deg, #16A34A, #4ade80); }
.objective-msg { margin-top: 0.6rem; font-size: 0.9rem; color: #050e4e; }

/* === Charts rows === */
.dash-row {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
.dash-row-3 {
    grid-template-columns: 1fr 1fr 1fr;
}
@media (max-width: 1100px) {
    .dash-row, .dash-row-3 { grid-template-columns: 1fr; }
}

.dash-card {
    background: white;
    border-radius: 20px;
    padding: 1rem 1.2rem 1.2rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    display: flex;
    flex-direction: column;
}
.dash-card-large { /* grand chart prend toute la hauteur */ }
.dash-card-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.85rem;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid #F1F5F9;
}
.dash-card-header h3 {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 700;
    color: #050e4e;
    letter-spacing: -0.01em;
}
.dash-card-subtitle {
    font-size: 0.72rem;
    color: #94A3B8;
}
.dash-chart-container {
    position: relative;
    flex: 1;
}
.dash-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #94A3B8;
}
.dash-empty-img {
    width: 110px;
    max-width: 60%;
    height: auto;
    margin-bottom: 0.75rem;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}

/* === À surveiller === */
.dash-watch, .dash-activity {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    overflow-y: auto;
    max-height: 270px;
}
.dash-watch::-webkit-scrollbar,
.dash-activity::-webkit-scrollbar { width: 4px; }
.dash-watch::-webkit-scrollbar-thumb,
.dash-activity::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 2px; }

.dash-watch-row {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.55rem 0.6rem;
    border-radius: 8px;
    background: #F8FAFC;
    text-decoration: none;
    transition: background 0.15s, transform 0.15s;
}
.dash-watch-row:hover {
    background: #DDE1FF;
    transform: translateX(2px);
}
.dash-watch-icon {
    width: 32px; height: 32px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.dash-watch-text { flex: 1; min-width: 0; line-height: 1.3; }
.dash-watch-text strong {
    display: block;
    font-size: 0.86rem;
    color: #1F2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-watch-text small { font-size: 0.74rem; color: #64748B; }

/* === Activité récente === */
.dash-activity-row {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.55rem 0;
    border-bottom: 1px dashed #F1F5F9;
}
.dash-activity-row:last-child { border-bottom: none; }
.dash-activity-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: #ede9fb;
    color: #6351d0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.72rem;
    flex-shrink: 0;
    margin-top: 1px;
}
.dash-activity-text { flex: 1; min-width: 0; line-height: 1.35; }
.dash-activity-text strong {
    display: block;
    font-size: 0.84rem;
    color: #1F2937;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dash-activity-detail {
    display: block;
    font-size: 0.74rem;
    color: #475569;
}
.dash-activity-time {
    font-size: 0.7rem;
    color: #94A3B8;
}

/* ============================================
   Toast Service — Notifications globales
   ============================================ */
.toast-stack {
    position: fixed;
    top: 70px;       /* sous le topbar (52px + 18 marge) */
    right: 20px;
    z-index: 99995;  /* au-dessus de tout sauf concierge ouvert */
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
    width: 380px;
    max-width: calc(100vw - 32px);
}

.toast-msg {
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.85rem 0.95rem;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.14), 0 2px 6px rgba(15, 23, 42, 0.06);
    border-left: 4px solid #94A3B8;
    font-size: 0.9rem;
    line-height: 1.4;
    color: #1F2937;
    animation: toastSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateX(20px) scale(0.96); }
    to   { opacity: 1; transform: translateX(0) scale(1); }
}

.toast-icon {
    width: 28px; height: 28px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
    margin-top: 1px;
}
.toast-text { flex: 1; min-width: 0; word-wrap: break-word; padding-top: 4px; }
.toast-close {
    background: transparent;
    border: none;
    color: #94A3B8;
    width: 26px; height: 26px;
    border-radius: 6px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.15s, color 0.15s;
    font-size: 0.78rem;
    margin-top: 1px;
}
.toast-close:hover { background: #F1F5F9; color: #1F2937; }

/* Variants par type */
.toast-success {
    border-left-color: #10B981;
}
.toast-success .toast-icon { background: #DCFCE7; color: #059669; }

.toast-error {
    border-left-color: #EF4444;
}
.toast-error .toast-icon { background: #FEE2E2; color: #DC2626; }

.toast-warning {
    border-left-color: #F59E0B;
}
.toast-warning .toast-icon { background: #FEF3C7; color: #D97706; }

.toast-info {
    border-left-color: #1F33A6;
}
.toast-info .toast-icon { background: #DDE1FF; color: #1F33A6; }

@media (max-width: 480px) {
    .toast-stack { top: 64px; right: 12px; left: 12px; width: auto; }
}

/* ============================================
   Pages métier — Composants premium réutilisables
   ============================================ */

/* PageHeader : remplace le simple top-bar des pages métier */
.page-header {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.page-header-main {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex: 1 1 100%;
    min-width: 0;
}
.page-header-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.page-header-text { line-height: 1.2; position: relative; min-width: 0; flex-shrink: 1; }
.page-header-title {
    margin: 0;
    font-size: 1.85rem;
    font-weight: 700;
    color: #050e4e;
    letter-spacing: -0.02em;
    /* Évite le wrap en mots de 2-3 lettres : on garde sur 1-2 lignes max */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.page-header-text::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: #FFD54F;
    margin-top: 0.3rem;
}
.page-header-subtitle {
    color: #94a3b8;
    font-size: 0.88rem;
    margin-top: 0.5rem;
}

/* Tagline manuscrite à côté du titre (style page Produits) */
.page-header-tagline {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-left: 1.5rem;
    font-family: "Kalam", cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 0.92rem;
    color: #6351d0;
    line-height: 1.4;
    opacity: 0.9;
    max-width: 360px;
}
.page-header-tagline span { display: inline-block; }
.page-header-arrow {
    flex-shrink: 0;
}

@media (max-width: 1100px) {
    .page-header-tagline { display: none; }
}

/* Stats inline dans le header (chips avec icône + valeur + label) */
.page-header-stats {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    margin-right: auto;
}
.stat-chip {
    background: white;
    border: 1px solid #eef0f5;
    border-radius: 14px;
    padding: 0.55rem 0.85rem;
    display: flex;
    align-items: center;
    gap: 0.55rem;
    box-shadow: 0 2px 6px rgba(15, 23, 42, 0.04);
}
.stat-chip-icon {
    font-size: 1rem;
    width: 32px; height: 32px;
    border-radius: 10px;
    background: #ede9fb;
    color: #6351d0;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.stat-chip-text strong {
    display: block;
    font-size: 0.95rem;
    font-weight: 700;
    color: #050e4e;
    line-height: 1.1;
}
.stat-chip-text small {
    color: #94a3b8;
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.page-header-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

@media (max-width: 720px) {
    .page-header { flex-direction: column; align-items: stretch; }
    .page-header-actions { justify-content: flex-end; }
}

/* === Empty State premium === */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 3.5rem 1.5rem;
    background: white;
    border-radius: 24px;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
}
.empty-state-icon {
    width: 88px; height: 88px;
    border-radius: 50%;
    background: #ede9fb;
    color: #6351d0;
    display: flex; align-items: center; justify-content: center;
    font-size: 2.2rem;
    margin-bottom: 1.25rem;
}
.empty-state-image {
    width: 200px;
    max-width: 60%;
    height: auto;
    margin-bottom: 1rem;
    object-fit: contain;
    user-select: none;
    -webkit-user-drag: none;
}
.empty-state-title {
    margin: 0 0 0.5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: #050e4e;
    letter-spacing: -0.01em;
}
.empty-state-message {
    color: #94a3b8;
    font-size: 0.92rem;
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto 1.5rem;
}
.empty-state-actions {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* === Form card premium pour les formulaires inline === */
.form-card {
    background: white;
    border-radius: 24px;
    padding: 1.5rem 1.75rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
    margin-bottom: 1.25rem;
    animation: formCardSlide 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Encart d'information lavande — remplace les styles inline répétés dans les pages.
   S'utilise avec les utilitaires d'espacement : <div class="mt-3 p-3 rounded hint-box"> */
.hint-box {
    background: var(--cp-hint-bg);
    border: 1px solid var(--cp-hint-border);
}
.hint-box-alt {
    background: var(--cp-hint-bg-alt);
    border: 1px solid var(--cp-hint-border-alt);
}
.hint-box-value {
    color: var(--cp-primary);
    font-size: 1.1rem;
}
@keyframes formCardSlide {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.form-card-title {
    margin: 0 0 1rem;
    font-size: 1.05rem;
    font-weight: 700;
    color: #050e4e;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.form-card-title-icon {
    width: 32px; height: 32px;
    border-radius: 10px;
    background: #ede9fb;
    color: #6351d0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
}
.form-card-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    padding-top: 0.85rem;
    border-top: 1px solid #f3f4f6;
}

/* === Liste de cards items pour CRUD (pattern utilisé par Machines, Materiaux…) === */
.item-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
}
.item-card {
    background: white;
    border-radius: 20px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    border-top: 3px solid transparent;
}
.item-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(99, 81, 208, 0.12);
}
.item-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 0.5rem;
}
.item-card-title-block { flex: 1; min-width: 0; }
.item-card-title {
    font-weight: 700;
    color: #050e4e;
    font-size: 1rem;
    margin: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.item-card-subtitle {
    color: #94a3b8;
    font-size: 0.82rem;
    margin-top: 2px;
}
.item-card-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.item-card-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    background: #f8f7fc;
    border-radius: 10px;
    font-size: 0.85rem;
}
.item-card-row-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    background: #ede9fb;
    color: #6351d0;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.item-card-row-label {
    color: #94a3b8;
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1;
}
.item-card-row-value {
    color: #050e4e;
    font-weight: 700;
    font-size: 0.95rem;
    margin-top: 2px;
}

/* === Loading skeleton === */
.skel {
    background: linear-gradient(90deg, #F1F5F9 0%, #E2E8F0 50%, #F1F5F9 100%);
    background-size: 200% 100%;
    border-radius: 8px;
    animation: skelShimmer 1.4s infinite;
}
@keyframes skelShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.skel-title { height: 18px; width: 60%; margin-bottom: 8px; }
.skel-line { height: 14px; width: 100%; margin-bottom: 6px; }
.skel-line.short { width: 70%; }
.skel-card {
    background: white;
    border-radius: 20px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    height: 180px;
}

/* Grille de cartes skeleton (catalogues, produits) */
.skel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.skel-grid-stats {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.skel-stat {
    background: white;
    border-radius: 16px;
    padding: 1.1rem 1.2rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.skel-stat-icon {
    width: 40px; height: 40px;
    border-radius: 12px;
    margin-bottom: 0.9rem;
}
.skel-stat .skel-title { height: 24px; margin-top: 4px; }

/* Liste skeleton (lignes avec avatar) */
.skel-list { display: flex; flex-direction: column; gap: 0.6rem; }
.skel-list-row {
    display: flex; align-items: center; gap: 0.85rem;
    background: white;
    border-radius: 14px;
    padding: 0.85rem 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
}
.skel-avatar { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; }
.skel-list-row-body { flex: 1; min-width: 0; }
.skel-list-row-body .skel-line { margin-bottom: 6px; }
.skel-list-row-body .skel-line:last-child { margin-bottom: 0; }

/* Tableau skeleton */
.skel-table {
    background: white;
    border-radius: 16px;
    padding: 0.5rem 1rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.05);
    overflow: hidden;
}
.skel-table-row {
    display: grid;
    grid-template-columns: 2fr 1.4fr 1fr;
    gap: 1.2rem;
    align-items: center;
    padding: 0.9rem 0.2rem;
    border-bottom: 1px solid #f1f5f9;
}
.skel-table-row:last-child { border-bottom: none; }
.skel-table-row .skel-line { margin-bottom: 0; }
.skel-table-head .skel-line { opacity: 0.6; }

/* ============================================
   PICKER MODAL (matériau / machine)
   ============================================ */
.picker-overlay {
    /* z-index doit dépasser .mobile-bottom-nav (1300) et .mobile-sheet (1400),
       sinon la barre de navigation mobile se peint PAR-DESSUS la feuille et
       masque les derniers éléments de la liste. */
    position: fixed; inset: 0; z-index: 1500;
    background: rgba(30, 23, 60, 0.45);
    backdrop-filter: blur(2px);
    display: flex; align-items: flex-end; justify-content: center;
    padding: 0;
    animation: pickerFade 0.18s ease;
}
@media (min-width: 768px) {
    .picker-overlay { align-items: center; padding: 1.5rem; }
}
@keyframes pickerFade { from { opacity: 0; } to { opacity: 1; } }

.picker-dialog {
    background: #fff;
    width: 100%; max-width: 720px;
    max-height: 92vh;
    border-radius: 20px 20px 0 0;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
    animation: pickerSlide 0.22s cubic-bezier(.2,.8,.2,1);
}
@media (min-width: 768px) {
    .picker-dialog { border-radius: 20px; max-height: 85vh; box-shadow: 0 20px 60px rgba(0,0,0,0.25); }
}
@keyframes pickerSlide { from { transform: translateY(24px); opacity: .6; } to { transform: translateY(0); opacity: 1; } }

.picker-header {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.25rem 0.9rem;
    border-bottom: 1px solid #f0ecf9;
}
.picker-title { margin: 0; font-size: 1.1rem; font-weight: 700; color: #2d2456; }
.picker-close {
    border: none; background: #f4f1fb; color: #6351d0;
    width: 36px; height: 36px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background .15s;
}
.picker-close:hover { background: #e7e1f8; }

.picker-search {
    position: relative; padding: 0.9rem 1.25rem 0.4rem;
}
.picker-search i {
    position: absolute; left: 1.9rem; top: 50%; transform: translateY(-25%);
    color: #a99fd0; pointer-events: none;
}
.picker-search .form-control { padding-left: 2.4rem; }

.picker-body {
    overflow-y: auto;
    /* padding-bottom inclut la safe-area iOS pour que le dernier élément ne soit
       pas masqué par l'indicateur home / le bord de l'écran. */
    padding: 0.6rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom, 0px));
    -webkit-overflow-scrolling: touch;
}

.picker-group-title {
    font-size: 0.78rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: #8b80b8;
    margin: 1rem 0 0.55rem; display: flex; align-items: center; gap: .5rem;
}
.picker-group-title:first-child { margin-top: 0.3rem; }
.picker-group-count {
    background: #f0ecf9; color: #6351d0; border-radius: 10px;
    padding: 1px 8px; font-size: 0.72rem;
}

.picker-grid {
    display: grid; grid-template-columns: 1fr; gap: 0.6rem;
}
@media (min-width: 560px) {
    .picker-grid { grid-template-columns: 1fr 1fr; }
}

.picker-card {
    display: flex; align-items: center; gap: 0.8rem;
    text-align: left; width: 100%;
    background: #fff; border: 1.5px solid #ece8f6; border-radius: 14px;
    padding: 0.7rem 0.8rem; cursor: pointer;
    transition: border-color .15s, box-shadow .15s, transform .1s;
}
.picker-card:hover {
    border-color: #6351d0;
    box-shadow: 0 6px 18px rgba(99,81,208,0.15);
    transform: translateY(-1px);
}
.picker-card.is-default { border-color: #f1c40f; background: #fffdf3; }

.picker-card-thumb {
    width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 11px; overflow: hidden;
    background: #f4f1fb; color: #b6abdf;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.15rem;
}
.picker-card-thumb img { width: 100%; height: 100%; object-fit: cover; }

.picker-card-info { min-width: 0; flex: 1; }
.picker-card-name {
    font-weight: 600; color: #2d2456; font-size: 0.92rem;
    line-height: 1.2; margin-bottom: 2px;
    display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2;
    -webkit-box-orient: vertical; overflow: hidden;
}
.picker-card-meta { font-size: 0.78rem; color: #8b80b8; }
.picker-card-price { font-size: 0.8rem; font-weight: 600; color: #6351d0; margin-top: 2px; }

.picker-empty { text-align: center; padding: 2.5rem 1rem; color: #a99fd0; }
.picker-empty i { font-size: 2.2rem; margin-bottom: 0.6rem; }
.picker-empty p { margin: 0; }

/* Bouton déclencheur du picker (remplace les <select> sur le calculateur) */
.picker-trigger {
    display: flex; align-items: center; gap: 0.6rem;
    width: 100%; text-align: left;
    background: #fff; border: 1px solid #d9d3ee; border-radius: 10px;
    padding: 0.4rem 0.6rem; min-height: 44px;
    cursor: pointer; transition: border-color .15s, box-shadow .15s;
}
.picker-trigger:hover { border-color: #6351d0; }
.picker-trigger:focus-visible { outline: none; border-color: #6351d0; box-shadow: 0 0 0 3px rgba(99,81,208,0.18); }
.picker-trigger-thumb {
    width: 32px; height: 32px; flex-shrink: 0;
    border-radius: 8px; overflow: hidden;
    background: #f4f1fb; color: #b6abdf;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.85rem;
}
.picker-trigger-thumb img { width: 100%; height: 100%; object-fit: cover; }
.picker-trigger-label { flex: 1; min-width: 0; font-size: 0.9rem; color: #2d2456; line-height: 1.2; }
.picker-trigger-label small { font-size: 0.72rem; }
.picker-trigger-caret { color: #a99fd0; font-size: 0.75rem; flex-shrink: 0; }

/* ============================================
   PRODUITS PAGE — Refonte maquette 2026
   ============================================ */
.prod-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 0 0.25rem;
    flex-wrap: wrap;
}
.prod-header-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: nowrap;
}
.prod-header-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    background: #ede9fb;
    color: #6351d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.prod-header-title {
    font-size: 2rem;
    font-weight: 700;
    color: #050e4e;
    margin: 0;
    letter-spacing: -0.02em;
}
.prod-header-underline {
    width: 70px;
    height: 4px;
    background: #FFD54F;
    border-radius: 2px;
    margin-top: 0.15rem;
}
.prod-header-tagline {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 1.5rem;
    font-family: "Kalam", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 0.8rem;
    color: #6351d0;
    line-height: 1.6;
    opacity: 0.9;
}
.prod-header-arrow {
    flex-shrink: 0;
}
.prod-header-actions {
    display: flex;
    gap: 0.6rem;
    align-items: center;
}

/* Card container */
/* Toolbar (recherche) */
.prod-toolbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.prod-search {
    position: relative;
    flex: 1 1 320px;
    max-width: 460px;
}
.prod-search-icon {
    position: absolute;
    left: 0.95rem;
    top: 50%;
    transform: translateY(-50%);
    color: #b3aee0;
    font-size: 0.85rem;
    pointer-events: none;
}
.prod-search-input {
    width: 100%;
    border: 1px solid #eef0f5;
    border-radius: 12px;
    padding: 0.6rem 2.4rem 0.6rem 2.5rem;
    font-size: 0.9rem;
    color: #050e4e;
    background: white;
    box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.prod-search-input:focus {
    outline: none;
    border-color: #6351d0;
    box-shadow: 0 0 0 3px rgba(99, 81, 208, 0.12);
}
.prod-search-clear {
    position: absolute;
    right: 0.6rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: #f3f4f6;
    color: #94a3b8;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}
.prod-search-clear:hover { background: #e5e7eb; color: #050e4e; }
.prod-search-count {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 600;
}
.prod-no-results {
    text-align: center;
    padding: 3rem 1.5rem;
    color: #94a3b8;
}
.prod-no-results i {
    font-size: 2rem;
    color: #d6d2f0;
    margin-bottom: 0.75rem;
    display: block;
}
.prod-no-results p {
    margin: 0 0 1.25rem;
    font-size: 0.95rem;
    color: #050e4e;
}

.prod-card {
    background: white;
    border-radius: 24px;
    padding: 0;
    box-shadow: 0 4px 24px rgba(15, 23, 42, 0.05);
    overflow-x: auto;
}

/* Table */
.prod-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
}
.prod-table thead th {
    background: #f8f7fc;
    padding: 1rem 0.7rem;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #94a3b8;
    border-bottom: 1px solid #eef0f5;
    text-align: left;
}
.prod-table tbody td {
    padding: 0.85rem 0.7rem;
    border-bottom: 1px solid #f3f4f6;
    font-size: 0.9rem;
    color: #050e4e;
    vertical-align: middle;
}
.prod-table tbody tr:last-child td {
    border-bottom: none;
}
.prod-table tbody tr:hover td {
    background: #fbfaff;
}
.prod-table .nowrap { white-space: nowrap; }

.prod-name {
    font-weight: 600;
    color: #050e4e;
    text-decoration: none;
}
.prod-name:hover {
    color: #6351d0;
    text-decoration: none;
}
.prod-muted {
    color: #94a3b8;
}

/* Thumbnail */
.prod-thumb {
    width: 56px;
    height: 56px;
    border-radius: 12px;
    object-fit: cover;
    border: 1px solid #eef0f5;
    background: #ede9fb;
    display: block;
}
.prod-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #9181E0;
    font-size: 1.1rem;
}

/* Pills (Type, Série) */
.prod-type-pill {
    display: inline-block;
    background: #ede9fb;
    color: #6351d0;
    padding: 0.32rem 0.85rem;
    border-radius: 999px;
    font-size: 0.78rem;
    font-weight: 600;
}
.prod-series-pill {
    display: inline-block;
    background: #6351d0;
    color: white;
    padding: 0.28rem 0.7rem;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 700;
}

/* Action buttons */
.prod-actions {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    justify-content: flex-end;
}
.prod-action-btn {
    width: 34px;
    height: 34px;
    flex: 0 0 auto;
    border-radius: 10px;
    background: #f1eaff;
    color: #6351d0;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    text-decoration: none;
}
.prod-action-btn:hover {
    background: #ddd2fa;
    color: #443cbc;
    transform: translateY(-1px);
}
.prod-action-danger {
    background: #fde7eb;
    color: #eb3340;
}
.prod-action-danger:hover {
    background: #fbd1d8;
    color: #c81e2a;
}

/* Footer */
.prod-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.5rem 1.25rem;
    border-top: 1px solid #f3f4f6;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.prod-footer-count {
    font-size: 0.85rem;
    color: #94a3b8;
    font-weight: 500;
}
.prod-pagination {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}
.prod-page-arrow,
.prod-page-num {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: #94a3b8;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}
.prod-page-arrow:hover:not(:disabled),
.prod-page-num:hover {
    background: #f1eaff;
    color: #6351d0;
}
.prod-page-num.active {
    background: #6351d0;
    color: white;
}
.prod-page-arrow:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}
.prod-footer-size {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: #94a3b8;
}
.prod-page-size {
    border: 1px solid #eef0f5;
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    font-size: 0.85rem;
    background: white;
    color: #050e4e;
    cursor: pointer;
}

/* Bottom decorative tagline */
.prod-bottom-tagline {
    text-align: center;
    margin: 1.75rem auto 1rem;
    font-family: "Kalam", cursive;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
    font-size: 0.85rem;
    color: #6351d0;
    opacity: 0.85;
    line-height: 1.6;
}

/* Note : la transformation table → cards mobile est gérée dans la section
   RESPONSIVE OVERHAUL en bas du fichier. */
@media (max-width: 900px) {
    .prod-header-tagline { display: none; }
}

/* ============================================
   GLOBAL BUTTONS — Style brand-aligned (charte 2026)
   Réutilisables sur toutes les pages CRUD
   ============================================ */

/* Boutons "icône" (modifier, dupliquer, etc.) — version soft pour les actions de ligne */
.btn-icon-soft {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: #f1eaff;
    color: #6351d0;
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    text-decoration: none;
    padding: 0;
}
.btn-icon-soft:hover {
    background: #ddd2fa;
    color: #443cbc;
    transform: translateY(-1px);
}
.btn-icon-soft.danger {
    background: #fde7eb;
    color: #eb3340;
}
.btn-icon-soft.danger:hover {
    background: #fbd1d8;
    color: #c81e2a;
}

/* Override : harmoniser les btn-sm btn-cp-outline / btn-cp-danger dans les tables */
.item-card-actions .btn,
.row-actions .btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}
.item-card-actions .btn-cp-outline,
.row-actions .btn-cp-outline {
    background: #f1eaff;
    color: #6351d0;
    border: none;
}
.item-card-actions .btn-cp-outline:hover,
.row-actions .btn-cp-outline:hover {
    background: #ddd2fa;
    color: #443cbc;
}
.item-card-actions .btn-cp-danger,
.row-actions .btn-cp-danger {
    background: #fde7eb;
    color: #eb3340;
    border: none;
}
.item-card-actions .btn-cp-danger:hover,
.row-actions .btn-cp-danger:hover {
    background: #fbd1d8;
    color: #c81e2a;
}

/* Surcharger le bg violet ancien — les badges utilisés un peu partout */
.badge.bg-primary {
    background: #6351d0 !important;
    color: white !important;
    border-radius: 8px;
    font-weight: 700;
    padding: 0.32rem 0.7rem;
}

/* Labels génériques harmonisés */
.form-label {
    color: #050e4e;
    font-weight: 600;
    font-size: 0.85rem;
}

/* Bootstrap form-control / form-select : arrondi + couleur texte */
.form-control, .form-select {
    border-radius: 10px;
    color: #050e4e;
    border-color: #e5e7eb;
}
.form-control::placeholder { color: #94a3b8; }

/* ╔════════════════════════════════════════════════════════════════════╗
   ║   RESPONSIVE OVERHAUL — Mobile / Tablette (2026)                  ║
   ║   Charge en dernier pour override propre.                         ║
   ║   Breakpoints : 1200 / 1024 / 768 / 480 / 360                     ║
   ╚════════════════════════════════════════════════════════════════════╝ */

/* ─────────────────────────────────────────────────────────────────── */
/* TABLETTE LANDSCAPE (1024px) : panel devient overlay, contenu fluide */
/* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .panel.open {
        position: fixed;
        z-index: 1060;
        box-shadow: 4px 0 24px rgba(0,0,0,0.18);
    }
    .panel-open .main-area { margin-left: var(--rail-w); }
    .dash-row { grid-template-columns: 1fr; gap: 1rem; }
    .dash-row-3 { grid-template-columns: repeat(2, 1fr); }
    .main-content { padding: 18px; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* TABLETTE PORTRAIT (768px) : rail caché, hamburger visible            */
/* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Coquille desktop (rail + panneau) entièrement masquée sur mobile : la navigation
       passe par la barre du bas + les feuilles contextuelles. Évite la ligne verticale
       parasite et tout chevauchement résiduel. */
    .rail,
    .panel {
        display: none !important;
    }

    .sidebar-overlay { z-index: 1350; }

    .main-area {
        margin-left: 0 !important;
        min-width: 0;
    }

    /* Hamburger button visible et plus gros (touch friendly) */
    .hamburger-btn {
        display: inline-flex !important;
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    /* Topbar compacte */
    .topbar {
        padding: 0 12px;
        height: var(--topbar-h);
        gap: 8px;
    }
    .topbar-left { gap: 8px; flex: 1; min-width: 0; }
    .topbar-right { gap: 2px; }
    .topbar-btn {
        width: 38px;
        height: 38px;
        font-size: 15px;
    }

    /* Breadcrumbs : on cache les liens intermédiaires, garder uniquement la page courante */
    .breadcrumbs { font-size: 13px; }
    .bc-link, .bc-sep { display: none; }
    .bc-current {
        font-size: 14px;
        max-width: 100%;
    }

    /* Trial badge : icône seulement sur mobile */
    .trial-badge {
        padding: 6px 10px;
        font-size: 11px;
        gap: 4px;
    }
    .trial-badge span { display: none; }
    .trial-badge i { font-size: 14px; margin: 0 !important; }

    /* Main content : padding réduit */
    .main-content { padding: 14px 12px; }

    /* ─── DASHBOARD ─── */
    .dash-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.25rem;
    }
    .dash-greeting { font-size: 1.4rem; }
    .dash-date { font-size: 0.85rem; }
    .dash-trial-banner { width: 100%; justify-content: center; font-size: 0.85rem; }

    .dash-kpis {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem;
    }
    .dash-kpi-value { font-size: 1.4rem; }
    .dash-kpi-label { font-size: 0.75rem; }

    .dash-row,
    .dash-row-3 {
        grid-template-columns: 1fr !important;
        gap: 1rem;
    }
    .dash-card { padding: 1.1rem; }
    .dash-chart-container { height: 220px !important; }

    /* ─── PAGE HEADER ─── */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        padding: 1rem;
    }
    .page-header-tagline,
    .page-header-arrow { display: none !important; }
    .page-header-title {
        font-size: 1.35rem;
        /* Sur mobile, on autorise le retour à la ligne plutôt que l'ellipsis :
           un titre long (nom de produit) ne doit jamais déborder horizontalement.
           On le limite à 3 lignes via line-clamp. */
        white-space: normal;
        text-overflow: clip;
        overflow-wrap: anywhere;
        word-break: break-word;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .page-header-icon {
        width: 44px;
        height: 44px;
        font-size: 1.1rem;
    }
    .page-header-actions { width: 100%; }
    .page-header-actions .btn { width: 100%; justify-content: center; }

    /* ─── INSIGHT OF THE DAY ─── */
    .iod-content {
        grid-template-columns: 1fr !important;
        padding: 1.1rem !important;
    }
    .iod-illustration { display: none !important; }
    .iod-title { font-size: 1.05rem; }
    .iod-body { font-size: 0.88rem; }
    .iod-footer { flex-wrap: wrap; gap: 0.5rem; }
    .iod-cta, .iod-cta-bright {
        width: 100%;
        justify-content: center;
        text-align: center;
    }

    /* ─── FORMULAIRES ─── */
    .form-control, .form-select, .cp-input {
        font-size: 16px !important; /* iOS : empêche le zoom auto */
    }
    .form-card { padding: 1.25rem; }
    .row > [class*="col-"] { margin-bottom: 0.75rem; }

    /* ─── TABLEAUX : transformation en cards (mobile only) ─── */
    .cp-table, .prod-table {
        font-size: 0.85rem;
        min-width: 0 !important;
        width: 100%;
    }
    .prod-card { overflow-x: visible !important; }
    .cp-table thead, .prod-table thead { display: none; }
    .cp-table tbody, .prod-table tbody { display: block; }
    .cp-table tr, .prod-table tr {
        display: block;
        margin-bottom: 0.85rem;
        background: white;
        border-radius: 14px;
        padding: 0.85rem 1rem;
        box-shadow: 0 2px 10px rgba(99,81,208,0.07);
        border: 1px solid rgba(99,81,208,0.08);
    }
    .cp-table td, .prod-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0.45rem 0 !important;
        border: none !important;
        text-align: right;
        gap: 1rem;
        min-height: 32px;
    }
    .cp-table td::before, .prod-table td::before {
        content: attr(data-label);
        font-weight: 600;
        color: #6b7280;
        font-size: 0.8rem;
        text-align: left;
        flex-shrink: 0;
    }
    .cp-table td:empty, .prod-table td:empty { display: none; }

    /* Cas spécifiques prod-table : thumbnail en haut, actions en bas */
    .prod-table .prod-td-thumb {
        justify-content: center;
        padding: 0.25rem 0 0.6rem !important;
        border-bottom: 1px solid rgba(99,81,208,0.08) !important;
        margin-bottom: 0.4rem;
    }
    .prod-table .prod-td-thumb::before { display: none; }
    .prod-table .prod-thumb {
        width: 64px;
        height: 64px;
    }
    .prod-table .prod-td-actions {
        justify-content: flex-end;
        padding-top: 0.75rem !important;
        border-top: 1px solid rgba(99,81,208,0.08) !important;
        margin-top: 0.5rem;
    }
    .prod-table .prod-td-actions::before { display: none; }

    /* Pagination produit : compact */
    .prod-footer {
        flex-direction: column;
        gap: 1rem;
        align-items: stretch;
    }
    .prod-pagination { justify-content: center; }
    .prod-footer-size { justify-content: center; }

    /* Si pas de data-label, fallback : on garde le scroll horizontal */
    .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

    /* ─── CALCULATEUR : tabs scroll horizontal ─── */
    .calc-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .calc-tabs::-webkit-scrollbar { display: none; }
    .calc-tabs .nav-link {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 0.5rem 0.85rem !important;
        font-size: 0.8rem !important;
    }
    .calc-bottom-bar {
        flex-wrap: wrap;
        gap: 0.5rem;
        padding: 0.75rem 1rem !important;
    }

    /* ─── AUTH PAGES ─── */
    .auth-container { padding: 1rem; }
    .auth-card {
        max-width: 100%;
        padding: 2rem 1.5rem;
        border-radius: 20px;
    }
    .auth-title { font-size: 1.75rem; }
    .auth-row { flex-direction: column; gap: 0; }
    .auth-deco-cloud,
    .auth-deco-star { display: none; }

    /* ─── ONBOARDING ─── */
    .onboarding-container { padding: 1rem; }
    .onboarding-card {
        max-width: 100%;
        padding: 1.75rem 1.25rem;
        border-radius: 20px;
    }
    .onboarding-step h2 { font-size: 1.4rem; }
    .onboarding-actions {
        flex-direction: column-reverse;
        gap: 0.75rem;
    }
    .onboarding-actions .btn,
    .onboarding-actions > div {
        width: 100%;
    }
    .onboarding-actions .d-flex {
        flex-direction: column;
        width: 100%;
    }
    .onboarding-actions .d-flex .btn { width: 100%; }

    /* ─── KPI & STAT CHIPS ─── */
    .stat-chips {
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }

    /* ─── ITEM CARDS (machines, matériaux, etc.) ─── */
    .item-card {
        flex-direction: column;
        align-items: stretch;
    }
    .item-card-actions {
        margin-top: 0.5rem;
        justify-content: flex-end;
    }

    /* ─── MODALES ─── */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }
    .modal-body { padding: 1rem; }

    /* ─── ANNOUNCEMENT BANNER ─── */
    .announcement-banner {
        font-size: 0.85rem;
        padding: 0.5rem 1rem;
    }
}

/* ─────────────────────────────────────────────────────────────────── */
/* MOBILE (480px) : KPIs en 1 colonne, font-size réduit                 */
/* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 480px) {
    .main-content { padding: 12px 10px; }

    .dash-kpis { grid-template-columns: 1fr !important; }
    .dash-kpi-value { font-size: 1.55rem; }
    .dash-greeting { font-size: 1.25rem; }

    .stat-chips { grid-template-columns: 1fr; }

    .page-header { padding: 0.9rem; }
    .page-header-title { font-size: 1.2rem; }
    .page-header-subtitle { font-size: 0.85rem; }

    .auth-card { padding: 1.5rem 1rem; }
    .auth-title { font-size: 1.5rem; }
    .auth-input { font-size: 16px; }

    .onboarding-card { padding: 1.5rem 1rem; }
    .onboarding-step h2 { font-size: 1.25rem; }

    .cp-card { padding: 1rem; border-radius: 14px; }
    .form-card { padding: 1rem; }

    /* Buttons : full-width par défaut sur mobile */
    .btn-cp, .btn-cp-outline, .btn-cp-danger {
        width: 100%;
        justify-content: center;
    }
    /* Sauf dans les groupes inline (table actions, etc.) */
    .row-actions .btn,
    .item-card-actions .btn,
    .input-group .btn,
    .btn-group .btn,
    .topbar .btn,
    .modal-footer .btn { width: auto; }

    .calc-tabs .nav-link {
        padding: 0.5rem 0.7rem !important;
        font-size: 0.75rem !important;
    }

    /* Trial badge : tout petit */
    .trial-badge {
        padding: 5px 8px;
        min-width: 32px;
        min-height: 32px;
    }

    /* Topbar : encore plus compact */
    .topbar { padding: 0 8px; gap: 4px; }
    .topbar-btn { width: 34px; height: 34px; }
    .hamburger-btn { width: 38px; height: 38px; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* TRÈS PETITS MOBILES (360px) : iPhone SE, vieux Android                */
/* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 360px) {
    .main-content { padding: 10px 8px; }
    .dash-greeting { font-size: 1.1rem; }
    .dash-kpi-value { font-size: 1.4rem; }
    .page-header { padding: 0.8rem; }
    .page-header-title { font-size: 1.1rem; }
    .cp-card { padding: 0.85rem; border-radius: 12px; }
    .auth-card, .onboarding-card { padding: 1.25rem 0.85rem; border-radius: 16px; }
}

/* ─────────────────────────────────────────────────────────────────── */
/* RÉSERVE BARRE DU BAS (placé en dernier → non écrasé par les blocs     */
/* 768/480/360 qui redéfinissent le raccourci `padding` de .main-content) */
/* ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    .main-content {
        padding-bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 16px);
    }
}

/* ─────────────────────────────────────────────────────────────────── */
/* TOUCH-FRIENDLY : cible minimum 44px sur tous les écrans tactiles     */
/* ─────────────────────────────────────────────────────────────────── */
@media (hover: none) and (pointer: coarse) {
    button, a.btn, .rail-item, .panel-item {
        min-height: 44px;
    }
    .topbar-btn, .hamburger-btn,
    .panel-close-btn, .mobile-sheet-close {
        min-width: 44px;
        min-height: 44px;
    }
    /* Désactive les transitions hover qui peuvent rester collées */
    .btn-cp:hover, .btn-cp-outline:hover {
        transform: none;
    }
}

/* ─────────────────────────────────────────────────────────────────── */
/* LANDSCAPE PHONE : éviter que le contenu déborde verticalement        */
/* ─────────────────────────────────────────────────────────────────── */
@media (max-height: 480px) and (orientation: landscape) {
    .auth-container,
    .onboarding-container {
        align-items: flex-start;
        padding-top: 1rem;
    }
    .auth-card, .onboarding-card {
        margin: 0 auto;
    }
}

/* ============================================ */
/* CRÉDITS IA — Badge topbar                    */
/* ============================================ */
.credits-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.15s;
    margin-right: 0.5rem;
    white-space: nowrap;
}
.credits-badge:hover { transform: translateY(-1px); text-decoration: none; }
.credits-badge .credits-badge-amount { font-weight: 700; }
.credits-badge .credits-badge-label { font-weight: 500; opacity: 0.85; }

.credits-badge.credits-badge-healthy {
    background: rgba(99, 81, 208, 0.10);
    color: var(--cp-primary);
}
.credits-badge.credits-badge-healthy:hover { background: rgba(99, 81, 208, 0.18); }

.credits-badge.credits-badge-low {
    background: rgba(245, 158, 11, 0.15);
    color: #b45309;
}
.credits-badge.credits-badge-low:hover { background: rgba(245, 158, 11, 0.25); }

.credits-badge.credits-badge-critical {
    background: rgba(239, 68, 68, 0.12);
    color: #b91c1c;
    animation: pulse-danger 2s ease-in-out infinite;
}

.credits-badge.credits-badge-empty {
    background: #ef4444;
    color: white;
}
.credits-badge.credits-badge-empty:hover { background: #dc2626; color: white; }

/* ============================================ */
/* CRÉDITS IA — Page /credits : hero            */
/* ============================================ */
.credits-hero {
    background: linear-gradient(135deg, var(--cp-primary) 0%, var(--cp-primary-light) 100%);
    color: white;
    border-radius: 16px;
    padding: 2rem 2.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    box-shadow: 0 8px 24px rgba(99, 81, 208, 0.18);
}
.credits-hero-amount { display: flex; align-items: baseline; gap: 0.5rem; }
.credits-hero-number { font-size: 3rem; font-weight: 800; line-height: 1; }
.credits-hero-unit { font-size: 1rem; opacity: 0.9; font-weight: 500; }
.credits-hero-meta { margin-top: 0.5rem; font-size: 0.95rem; opacity: 0.92; }
.credits-hero-cta {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
}
.credits-hero-cta .btn-cp {
    background: var(--cp-accent);
    color: var(--cp-primary-dark);
    border: none;
    font-weight: 700;
}
.credits-hero-cta .btn-cp:hover { background: var(--cp-accent-light); }
/* Bouton secondaire lisible sur le dégradé violet du hero */
.credits-hero-cta .btn-cp-outline {
    color: white;
    border-color: rgba(255, 255, 255, 0.55);
    background: transparent;
}
.credits-hero-cta .btn-cp-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: white;
    color: white;
}

/* ============================================ */
/* CRÉDITS IA — Page /credits : buckets         */
/* ============================================ */
.credits-buckets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.credits-bucket-card {
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-gris-clair);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}
.credits-bucket-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.credits-bucket-icon.credits-bucket-recurring {
    background: rgba(99, 81, 208, 0.12); color: var(--cp-primary);
}
.credits-bucket-icon.credits-bucket-purchased {
    background: rgba(34, 197, 94, 0.12); color: #16a34a;
}
.credits-bucket-body { flex: 1; }
.credits-bucket-label { font-size: 0.85rem; color: var(--cp-gris-fonce); font-weight: 500; }
.credits-bucket-amount { font-size: 1.8rem; font-weight: 700; color: var(--cp-primary-dark); margin: 0.1rem 0; }
.credits-bucket-desc { font-size: 0.85rem; color: var(--cp-gris-fonce); }
.credits-bucket-meta { font-size: 0.75rem; color: var(--cp-gris-moyen); margin-top: 0.4rem; }

.credits-info-list { list-style: none; padding: 0; margin: 0; }
.credits-info-list li { padding: 0.5rem 0; border-bottom: 1px solid var(--cp-gris-clair); }
.credits-info-list li:last-child { border-bottom: none; }

/* Historique transactions */
.credits-tx-table { overflow-x: auto; }
.credits-tx-bucket {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.credits-tx-bucket-recurring { background: rgba(99, 81, 208, 0.12); color: var(--cp-primary); }
.credits-tx-bucket-purchased { background: rgba(34, 197, 94, 0.12); color: #16a34a; }

/* ============================================ */
/* PACKS DE CRÉDITS (page /abonnement)          */
/* ============================================ */
.credit-packs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1rem;
    margin-bottom: 1rem;
}
.credit-pack-card {
    background: var(--cp-card-bg);
    border: 1px solid var(--cp-gris-clair);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    position: relative;
    transition: all 0.2s;
}
.credit-pack-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.06); }
.credit-pack-popular {
    border-color: var(--cp-accent);
    box-shadow: 0 4px 16px rgba(255, 213, 79, 0.25);
}
.credit-pack-badge {
    position: absolute;
    top: -10px; left: 50%;
    transform: translateX(-50%);
    background: var(--cp-accent);
    color: var(--cp-primary-dark);
    padding: 3px 12px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.credit-pack-icon {
    width: 56px; height: 56px;
    margin: 0 auto 0.75rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-primary) 0%, var(--cp-primary-light) 100%);
    color: white;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
}
.credit-pack-name { font-size: 1.1rem; font-weight: 700; color: var(--cp-primary-dark); }
.credit-pack-credits { font-size: 1.5rem; color: var(--cp-primary); margin: 0.25rem 0; }
.credit-pack-meta { font-size: 0.8rem; color: var(--cp-gris-fonce); margin-bottom: 0.75rem; }
.credit-pack-price { font-size: 2rem; font-weight: 800; color: var(--cp-primary-dark); margin-bottom: 0.5rem; }
.credit-pack-savings { font-size: 0.8rem; color: #16a34a; margin-bottom: 0.75rem; }

/* ============================================ */
/* MODAL PAYWALL (crédits insuffisants)         */
/* ============================================ */
.credits-paywall { max-width: 460px; }
.credits-paywall-icon {
    width: 64px; height: 64px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.12);
    color: #b45309;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
}
.credits-paywall h3 { text-align: center; margin-bottom: 0.75rem; }
.credits-paywall p { text-align: center; }

/* Responsive */
@media (max-width: 640px) {
    .credits-hero { padding: 1.5rem; }
    .credits-hero-number { font-size: 2.2rem; }
    .credits-hero-cta { width: 100%; }
    .credits-hero-cta .btn-cp { width: 100%; }
    .credits-badge .credits-badge-label { display: none; } /* compact en mobile */
}

/* ============================================================
   Freemium tier — bandeaux et paywalls (toggle 14j trial)
   ============================================================ */

/* Bandeau de limite freemium en haut de page (Produits, Machines) */
.freemium-limit-banner {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 1.25rem;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    border: 1px solid;
}
.freemium-limit-banner-info {
    background: #F0F9FF;
    border-color: #BAE6FD;
    color: #075985;
}
.freemium-limit-banner-blocked {
    background: linear-gradient(135deg, #FEF3C7, #FEE2E2);
    border-color: #FCA5A5;
    color: #991B1B;
}
.freemium-limit-banner-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.1rem;
}
.freemium-limit-banner-info .freemium-limit-banner-icon {
    background: #BAE6FD;
    color: #075985;
}
.freemium-limit-banner-blocked .freemium-limit-banner-icon {
    background: #FCA5A5;
    color: #7F1D1D;
}
.freemium-limit-banner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
}
.freemium-limit-banner-body span {
    font-size: 0.85rem;
    opacity: 0.9;
}
.freemium-limit-banner-link {
    color: inherit;
    font-weight: 600;
    text-decoration: none;
    font-size: 0.9rem;
    white-space: nowrap;
}
.freemium-limit-banner-link:hover {
    text-decoration: underline;
}

@media (max-width: 768px) {
    .freemium-limit-banner {
        flex-wrap: wrap;
        gap: 0.6rem 0.75rem;
        padding: 0.875rem 1rem;
    }
    .freemium-limit-banner-body {
        flex: 1 1 calc(100% - 52px);
        min-width: 0;
    }
    .freemium-limit-banner-link {
        flex: 1 1 100%;
        margin-left: 52px;
        text-align: center;
        padding: 0.55rem 0.75rem;
        border-radius: 0.6rem;
        background: rgba(0, 0, 0, 0.06);
        white-space: normal;
    }
    .freemium-limit-banner-blocked .freemium-limit-banner-link {
        background: rgba(127, 29, 29, 0.1);
    }
}

/* Overlay paywall sur les pages Ventes / Stats */
.freemium-sales-paywall {
    position: fixed;
    inset: 0;
    /* Au-dessus de la tab bar mobile (1300) et des bottom sheets (1400). */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}
.freemium-sales-paywall-card {
    background: white;
    max-width: 480px;
    width: 100%;
    padding: 2.5rem 2rem;
    border-radius: 1.25rem;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.25);
    text-align: center;
}
.freemium-sales-paywall-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6366F1, #A855F7);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    margin: 0 auto 1.25rem;
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.35);
}
.freemium-sales-paywall-title {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 700;
    color: #0F172A;
}
.freemium-sales-paywall-tier-badge {
    display: inline-block;
    background: linear-gradient(135deg, #FCD34D, #F59E0B);
    color: #78350F;
    padding: 0.25rem 0.75rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 700;
    margin: 0 0 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.freemium-sales-paywall-text {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0 0 1.25rem;
}
.freemium-sales-paywall-features {
    text-align: left;
    background: #F8FAFC;
    border-radius: 0.75rem;
    padding: 1rem 1.25rem;
    margin: 0 0 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.freemium-sales-paywall-features div {
    color: #334155;
    font-size: 0.9rem;
}
.freemium-sales-paywall-features i {
    color: #10B981;
    margin-right: 0.5rem;
}

/* Effet flou sur la page derrière le paywall */
.freemium-blurred {
    filter: blur(3px);
    pointer-events: none;
    user-select: none;
    opacity: 0.6;
}

/* =====================================================
   Intégration WooCommerce — shop cards, switch, modal
   ===================================================== */
.shop-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 1rem;
    box-shadow: 0 1px 3px rgba(15,23,42,.05);
}
.shop-card-header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.shop-card-title {
    font-weight: 700;
    color: #050e4e;
    font-size: 0.95rem;
    line-height: 1.2;
}
.shop-card-url {
    font-size: 0.8rem;
    color: #6B7280;
    text-decoration: none;
}
.shop-card-url:hover { color: #1F33A6; }
.shop-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 0.75rem;
    font-size: 0.9rem;
    color: #374151;
}
.shop-card-sync {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: #6B7280;
}
.shop-card-actions {
    margin-top: 0.75rem;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Switch toggle */
.switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
}
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #D1D5DB;
    transition: 0.25s;
    border-radius: 24px;
}
.switch .slider::before {
    position: absolute;
    content: "";
    height: 18px; width: 18px;
    left: 3px; bottom: 3px;
    background-color: white;
    transition: 0.25s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}
.switch input:checked + .slider {
    background-color: #1F33A6;
}
.switch input:checked + .slider::before {
    transform: translateX(20px);
}

/* Modal léger pour connecter une boutique */
.modal-backdrop-cp {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    /* Doit passer AU-DESSUS de la tab bar mobile (1300) et des bottom sheets (1400),
       sinon la barre d'onglets recouvre la modale et reste cliquable derrière. */
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}
.modal-cp {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    padding: 1.75rem;
    max-width: 480px;
    width: 100%;
    animation: modalSlideUp 0.25s ease;
}
.modal-cp-title {
    margin: 0 0 1rem;
    font-size: 1.15rem;
    color: #050e4e;
    font-weight: 700;
}
.modal-cp-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}
@keyframes modalSlideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

/* Mini empty state inline (à l'intérieur d'une cp-card) */
.empty-state-mini {
    text-align: center;
    padding: 1.5rem 1rem;
}

/* === Tags input (fiche produit IA) === */
.tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.5rem;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    background: #ffffff;
    min-height: 44px;
    align-items: center;
}
.tags-input input {
    border: none;
    outline: none;
    flex: 1;
    min-width: 120px;
    font-size: 0.9rem;
}
.tag-chip {
    background: #DDE1FF;
    color: #1F33A6;
    padding: 4px 10px;
    border-radius: 14px;
    font-size: 0.82rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.tag-chip-remove {
    cursor: pointer;
    opacity: .6;
    transition: opacity .15s;
}
.tag-chip-remove:hover { opacity: 1; }

/* === Section Fiche IA dans le Calculateur === */
.ai-sheet-section {
    background: linear-gradient(135deg, #ede9fb 0%, #fef3c7 100%);
    border: 1px solid #C9CDE0;
    border-radius: 14px;
    padding: 1.25rem;
    margin-top: 1rem;
}
.ai-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.ai-sheet-title {
    font-weight: 700;
    color: #050e4e;
    font-size: 1.05rem;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* === Section Publication WC === */
.publish-wc-section {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 14px;
    padding: 1.25rem;
    margin-top: 1rem;
}

/* =====================================================
   Notifications bell + panel
   ===================================================== */
.notif-bell-wrap {
    position: relative;
    display: inline-block;
}
.notif-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: transparent;
}
.notif-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 380px;
    max-width: 95vw;
    max-height: 70vh;
    background: white;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.18);
    z-index: 1050;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: notifSlideDown 0.18s ease;
}
@keyframes notifSlideDown {
    from { transform: translateY(-8px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}
.notif-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #F1F5F9;
}
.notif-panel-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #050e4e;
}
.btn-link-cp {
    background: transparent;
    border: none;
    color: #1F33A6;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
}
.btn-link-cp:hover { background: #F1F5F9; }

.notif-list {
    overflow-y: auto;
    flex: 1;
}
.notif-row {
    display: flex;
    gap: 0.65rem;
    align-items: flex-start;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #F8FAFC;
    cursor: pointer;
    transition: background 0.12s;
    text-decoration: none;
    color: inherit;
}
.notif-row:hover {
    background: #F8FAFC;
}
.notif-unread {
    background: #FAFBFF;
    border-left: 3px solid #1F33A6;
    padding-left: calc(1rem - 3px);
}
.notif-unread .notif-title {
    font-weight: 700;
}
.notif-row-insight {
    background: linear-gradient(90deg, #ede9fb 0%, #fff 100%);
}

.notif-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.notif-body {
    flex: 1;
    min-width: 0;
}
.notif-title {
    font-size: 0.88rem;
    color: #050e4e;
    line-height: 1.3;
    margin-bottom: 2px;
}
.notif-text {
    font-size: 0.8rem;
    color: #4B5563;
    line-height: 1.35;
    margin-bottom: 4px;
    overflow-wrap: break-word;
}
.notif-meta {
    font-size: 0.72rem;
    color: #9CA3AF;
}
.notif-chev {
    color: #9CA3AF;
    align-self: center;
    font-size: 0.75rem;
}
.notif-dismiss {
    background: transparent;
    border: none;
    color: #CBD5E1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    font-size: 0.75rem;
    flex-shrink: 0;
    align-self: flex-start;
}
.notif-dismiss:hover {
    background: #FEE2E2;
    color: #DC2626;
}
.notif-empty {
    text-align: center;
    padding: 2rem 1rem;
    color: #9CA3AF;
}

/* Mobile : ancrer le panneau au viewport pour éviter qu'il déborde
   hors de l'écran à gauche (la cloche n'est pas tout à fait au bord droit) */
@media (max-width: 600px) {
    .notif-panel {
        position: fixed;
        top: calc(var(--topbar-h) + 6px);
        right: 8px;
        left: 8px;
        width: auto;
        max-width: none;
        max-height: calc(100vh - var(--topbar-h) - 16px);
    }
}

/* =====================================================
   Admin broadcast notifications
   ===================================================== */
.broadcast-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* =====================================================
   Calculateur — shortcut vers la fiche produit
   ===================================================== */
.fiche-shortcut {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.25rem;
    background: linear-gradient(135deg, #ede9fb 0%, #fef3c7 100%);
    border: 1px solid #C9CDE0;
    border-radius: 14px;
    margin-top: 1rem;
    margin-bottom: 6rem;   /* évite le chevauchement avec calc-bottom-bar (fixed bottom) */
    text-decoration: none;
    color: inherit;
    transition: transform .15s, box-shadow .15s;
}
.fiche-shortcut:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(99, 81, 208, 0.15);
    color: inherit;
}
.fiche-shortcut-icon {
    width: 48px; height: 48px;
    border-radius: 12px;
    background: white;
    color: #6351d0;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.fiche-shortcut-body { flex: 1; min-width: 0; }
.fiche-shortcut-title {
    font-weight: 700;
    font-size: 1.05rem;
    color: #050e4e;
    margin-bottom: 2px;
}
.fiche-shortcut-subtitle {
    font-size: 0.85rem;
    color: #4B5563;
}
.fiche-shortcut-arrow {
    color: #6351d0;
    font-size: 1.1rem;
}

/* =====================================================
   Fiche produit — tabs multi-plateformes
   ===================================================== */
.sheet-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 2px solid #E5E7EB;
    margin: 1.25rem 0 1rem;
    overflow-x: auto;
    flex-wrap: nowrap;
}
.sheet-tab {
    background: transparent;
    border: none;
    padding: 0.75rem 1.1rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: #6B7280;
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
    position: relative;
}
.sheet-tab:hover:not(.disabled) {
    color: #1F33A6;
    background: #F8FAFC;
}
.sheet-tab.active {
    color: #1F33A6;
    border-bottom-color: #1F33A6;
}
.sheet-tab.disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.sheet-tab-dot {
    display: inline-block;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #F59E0B;
    margin-left: 6px;
}
.sheet-tab-customized {
    margin-left: 6px;
    color: #9333EA;
    font-size: 0.85rem;
}
.sheet-tab-published {
    margin-left: 6px;
    color: #10B981;
    font-size: 0.75rem;
}

.sheet-content {
    margin-top: 0.5rem;
}
.sheet-section {
    background: white;
    border-radius: 14px;
    padding: 1.5rem;
    border: 1px solid #E5E7EB;
    box-shadow: 0 1px 3px rgba(15,23,42,.04);
}
.sheet-section-header {
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #F1F5F9;
}
.sheet-section-header h3 {
    margin: 0;
    font-size: 1.1rem;
    color: #050e4e;
    font-weight: 700;
}

.cp-input-mono {
    font-family: ui-monospace, "SF Mono", Menlo, monospace;
    font-size: 0.85rem;
    line-height: 1.5;
}

.content-editor { padding: 0; }

/* === Publish zone === */
.publish-zone {
    background: #F8FAFC;
    border: 1px dashed #CBD5E1;
    border-radius: 12px;
    padding: 1.25rem;
}
.publish-zone-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.publish-zone-header h4 {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: #050e4e;
}
.publish-zone-meta {
    margin-top: 0.75rem;
    font-size: 0.82rem;
    color: #6B7280;
}

/* =====================================================
   Panel — produits récents avec accès rapide à la fiche
   ===================================================== */
.panel-product-row {
    display: flex;
    align-items: center;
    gap: 4px;
}
.panel-product-row .panel-link {
    flex: 1;
    min-width: 0;
}
.panel-product-fiche-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: transparent;
    color: #6351d0;
    text-decoration: none;
    transition: background .15s, color .15s;
    flex-shrink: 0;
    font-size: 0.85rem;
}
.panel-product-fiche-btn:hover {
    background: #ede9fb;
    color: #4338CA;
}

/* === Tableau Produits — bouton fiche IA === */
.prod-action-fiche {
    color: #9333EA !important;
}
.prod-action-fiche:hover {
    background: #ede9fb !important;
    color: #6D28D9 !important;
}

/* =====================================================
   Éditeur Markdown — toolbar + preview
   ===================================================== */
.md-mode-switch {
    display: inline-flex;
    background: #F1F5F9;
    border-radius: 8px;
    padding: 2px;
    gap: 2px;
}
.md-mode-switch button {
    background: transparent;
    border: none;
    padding: 4px 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #64748B;
    border-radius: 6px;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.md-mode-switch button:hover { color: #1F33A6; }
.md-mode-switch button.active {
    background: white;
    color: #1F33A6;
    box-shadow: 0 1px 3px rgba(15,23,42,.08);
}

.md-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    background: #F8FAFC;
    border: 1px solid #D1D5DB;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    flex-wrap: wrap;
}
.md-btn {
    background: transparent;
    border: none;
    width: 32px;
    height: 32px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #475569;
    cursor: pointer;
    transition: background .12s, color .12s;
    font-size: 0.85rem;
}
.md-btn:hover {
    background: #DDE1FF;
    color: #1F33A6;
}
.md-btn:active {
    transform: scale(0.95);
}
.md-btn-emoji {
    font-size: 1rem;
    width: 30px;
    height: 30px;
}
.md-divider {
    width: 1px;
    height: 22px;
    background: #CBD5E1;
    margin: 0 4px;
}
.md-emoji-group {
    display: inline-flex;
    gap: 1px;
    flex-wrap: wrap;
}
.md-textarea {
    border-radius: 0 0 10px 10px !important;
    border-top: none !important;
}

.md-preview {
    background: white;
    border: 1px solid #D1D5DB;
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    min-height: 280px;
    line-height: 1.6;
    color: #1F2937;
}
.md-preview h1, .md-preview h2, .md-preview h3 {
    color: #050e4e;
    margin-top: 1.25rem;
    margin-bottom: 0.5rem;
    font-weight: 700;
}
.md-preview h1 { font-size: 1.5rem; }
.md-preview h2 { font-size: 1.25rem; }
.md-preview h3 { font-size: 1.1rem; }
.md-preview h1:first-child, .md-preview h2:first-child, .md-preview h3:first-child {
    margin-top: 0;
}
.md-preview p { margin-bottom: 0.75rem; }
.md-preview ul, .md-preview ol { margin-bottom: 0.75rem; padding-left: 1.5rem; }
.md-preview li { margin-bottom: 0.25rem; }
.md-preview strong { color: #050e4e; }
.md-preview blockquote {
    border-left: 3px solid #6351d0;
    padding-left: 1rem;
    color: #64748B;
    font-style: italic;
    margin: 0.75rem 0;
}
.md-preview a { color: #1F33A6; text-decoration: underline; }
.md-preview code {
    background: #F1F5F9;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 0.9em;
}

/* =====================================================
   Historique fiche produit — drawer latéral
   ===================================================== */
.history-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(2px);
    z-index: 1060;
    animation: fadeIn .2s ease;
}
.history-drawer {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 540px;
    max-width: 95vw;
    background: white;
    box-shadow: -20px 0 60px rgba(15, 23, 42, 0.2);
    z-index: 1070;
    display: flex;
    flex-direction: column;
    animation: slideInRight .25s ease;
}
@keyframes slideInRight {
    from { transform: translateX(100%); }
    to { transform: translateX(0); }
}
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.history-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.1rem 1.25rem;
    border-bottom: 1px solid #E5E7EB;
}
.history-drawer-header h3 {
    font-size: 1.05rem;
    color: #050e4e;
    font-weight: 700;
}
.btn-icon-close {
    background: transparent;
    border: none;
    width: 36px; height: 36px;
    border-radius: 8px;
    color: #6B7280;
    cursor: pointer;
    transition: background .12s;
}
.btn-icon-close:hover { background: #F1F5F9; color: #1F33A6; }

.history-tabs {
    display: flex;
    gap: 4px;
    padding: 0.75rem 1.25rem;
    border-bottom: 1px solid #F1F5F9;
    overflow-x: auto;
}
.history-tabs button {
    background: #F1F5F9;
    border: none;
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    transition: background .12s, color .12s;
}
.history-tabs button:hover { background: #DDE1FF; color: #1F33A6; }
.history-tabs button.active { background: #1F33A6; color: white; }

.history-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.5rem 1rem;
}

.history-item {
    background: white;
    border: 1px solid #E5E7EB;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    transition: box-shadow .15s;
}
.history-item:hover { box-shadow: 0 2px 8px rgba(15,23,42,.05); }
.history-item.expanded { border-color: #1F33A6; box-shadow: 0 4px 16px rgba(31,51,166,.1); }

.history-item-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 0.85rem;
    cursor: pointer;
}

.history-source-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 9px;
    border-radius: 12px;
    font-size: 0.72rem;
    font-weight: 600;
    white-space: nowrap;
}
.source-ia { background: #ede9fb; color: #6D28D9; }
.source-manual { background: #DDE1FF; color: #1F33A6; }
.source-restore { background: #FEF3C7; color: #A16207; }

.history-platform-chip {
    padding: 3px 8px;
    border-radius: 10px;
    background: #F1F5F9;
    font-size: 0.72rem;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}

.history-item-time {
    flex: 1;
    font-size: 0.82rem;
    color: #1F2937;
    font-weight: 600;
}
.history-chevron {
    color: #9CA3AF;
    font-size: 0.75rem;
}

.history-item-note {
    padding: 0 0.85rem 0.5rem;
    color: #6B7280;
    font-size: 0.78rem;
    font-style: italic;
}
.history-item-body {
    border-top: 1px solid #F1F5F9;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.history-field label {
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    color: #6B7280;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 4px;
}
.history-field > div {
    color: #1F2937;
    font-size: 0.88rem;
    line-height: 1.4;
}
.history-actions {
    display: flex;
    gap: 0.5rem;
    border-top: 1px dashed #E5E7EB;
    padding-top: 0.75rem;
}

@media (max-width: 640px) {
    .history-drawer { width: 100%; }
}

/* =====================================================
   Calculateur — résumé des prélèvements (charte lavande)
   ===================================================== */
.tax-summary {
    background: linear-gradient(135deg, #ede9fb 0%, #ffffff 70%, #fffbeb 100%);
    border: 1px solid #D6CCEF;
    border-radius: 14px;
    overflow: hidden;
}
.tax-summary-header {
    background: rgba(99, 81, 208, 0.08);
    color: #6351d0;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.55rem 1rem;
    border-bottom: 1px solid rgba(99, 81, 208, 0.12);
}
.tax-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px;
    background: rgba(99, 81, 208, 0.12);
}
.tax-summary-cell {
    background: rgba(255, 255, 255, 0.7);
    padding: 0.85rem 1rem;
}
.tax-summary-label {
    font-size: 0.78rem;
    color: #6B7280;
    font-weight: 500;
    margin-bottom: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
}
.tax-summary-rate {
    display: inline-block;
    background: #ede9fb;
    color: #6351d0;
    font-size: 0.68rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 999px;
}
.tax-summary-value {
    font-size: 1.05rem;
    font-weight: 700;
    color: #050e4e;
    letter-spacing: -0.01em;
}
.tax-summary-value span {
    font-size: 0.78rem;
    font-weight: 600;
    color: #6B7280;
    margin-left: 2px;
}
.tax-summary-disabled {
    color: #94A3B8 !important;
    font-style: italic;
    font-size: 0.88rem !important;
    font-weight: 500 !important;
}

@media (max-width: 720px) {
    .tax-summary-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   Carte verrouillée (paywall mini pour cards du dashboard)
   Cohérent avec la charte : violet --cp-primary + badge jaune
   ============================================================ */
.dash-locked {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 1.5rem 1.25rem;
    min-height: 220px;
    gap: 0.55rem;
    background: linear-gradient(180deg, var(--cp-ivoire) 0%, var(--cp-lavande-soft) 100%);
    border-radius: 0.75rem;
    border: 1px dashed var(--cp-primary-light);
}
.dash-locked-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--cp-primary), var(--cp-primary-light));
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 0.25rem;
    box-shadow: 0 8px 20px rgba(99, 81, 208, 0.30);
}
.dash-locked-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--cp-accent), #F59E0B);
    color: #78350F;
    padding: 0.2rem 0.7rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.dash-locked-title {
    margin: 0;
    font-weight: 700;
    color: var(--cp-primary-dark);
    font-size: 1rem;
    line-height: 1.2;
}
.dash-locked-text {
    margin: 0 0 0.5rem;
    color: var(--cp-gris-fonce);
    font-size: 0.85rem;
    line-height: 1.45;
    max-width: 280px;
}

/* ============================================================
   Bannière d'impersonation (admin connecté en tant qu'un user)
   ============================================================ */
.impersonation-banner {
    position: relative;
    z-index: 101;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1.25rem;
    background: linear-gradient(135deg, var(--cp-accent), var(--cp-accent-light));
    color: var(--cp-gris-profond);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.10);
    border-bottom: 2px solid var(--cp-primary);
    flex-shrink: 0;
}
.impersonation-banner-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--cp-primary);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
    box-shadow: 0 2px 6px rgba(99, 81, 208, 0.30);
}
.impersonation-banner-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    line-height: 1.3;
}
.impersonation-banner-body strong {
    font-size: 0.95rem;
    color: var(--cp-primary-dark);
}
.impersonation-banner-body span {
    font-size: 0.85rem;
    color: var(--cp-gris-profond);
}
.impersonation-banner-action {
    background: #ffffff;
    color: var(--cp-primary-dark);
    border: 1px solid var(--cp-primary);
    font-weight: 600;
    white-space: nowrap;
}
.impersonation-banner-action:hover {
    background: var(--cp-lavande);
    color: var(--cp-primary-dark);
}
@media (max-width: 640px) {
    .impersonation-banner {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .impersonation-banner-body {
        flex: 1 1 100%;
        order: 2;
    }
    .impersonation-banner-action {
        order: 3;
        width: 100%;
    }
}

/* ==========================================================================
   Accessibilité — prefers-reduced-motion (WCAG 2.3.3)
   Neutralise animations et transitions pour les utilisateurs qui demandent
   moins de mouvement (troubles vestibulaires, migraines).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* === Vente rapide (mode marché) — gros boutons tappables, panier collant === */
.vr-pending {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #FFF7E6;
    border: 1px solid #F5C76E;
    color: #8a5a00;
    border-radius: 14px;
    padding: 0.65rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.92rem;
}

.vr-toolbar {
    display: grid;
    grid-template-columns: 1fr 1fr 1.4fr;
    gap: 0.75rem;
    margin-bottom: 1rem;
}
@media (max-width: 600px) {
    .vr-toolbar { grid-template-columns: 1fr 1fr; }
    .vr-toolbar-search { grid-column: 1 / -1; }
}

.vr-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.75rem;
    /* laisse la place au panier collant */
    padding-bottom: 40vh;
}

.vr-product {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    background: white;
    border: 2px solid transparent;
    border-radius: 16px;
    padding: 0.85rem 0.6rem;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
    cursor: pointer;
    transition: transform 0.12s, border-color 0.12s;
    -webkit-tap-highlight-color: transparent;
}
.vr-product:active { transform: scale(0.96); }
.vr-product.in-cart { border-color: #6351d0; }

.vr-product img,
.vr-product-placeholder {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    object-fit: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F1EFFB;
    color: #6351d0;
    font-size: 1.5rem;
}

.vr-product-name {
    font-weight: 600;
    font-size: 0.85rem;
    color: #1E2749;
    text-align: center;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.vr-product-price { font-size: 0.85rem; color: #6B728E; }

.vr-product-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    min-width: 26px;
    height: 26px;
    border-radius: 13px;
    background: #6351d0;
    color: white;
    font-weight: 700;
    font-size: 0.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 7px;
    box-shadow: 0 2px 6px rgba(99, 81, 208, 0.45);
}

/* === Sélecteur de produits du devis (modale rapide façon Vente rapide) === */
.quote-picker-modal {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.25);
    width: 100%;
    max-width: 780px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.25s ease;
}
.quote-picker-head {
    padding: 1.25rem 1.5rem 0.85rem;
    border-bottom: 1px solid #eef0f6;
}
.quote-picker-body {
    padding: 1rem 1.5rem;
    overflow-y: auto;
    flex: 1;
}
.quote-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 0.75rem;
}
.quote-picker-foot {
    padding: 0.85rem 1.5rem;
    border-top: 1px solid #eef0f6;
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    align-items: center;
}

/* Sélecteur de client : bouton déclencheur (façon champ) + liste dans la modale */
.client-picker-trigger {
    width: 100%;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    cursor: pointer;
}
.client-picker-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.client-picker-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    text-align: left;
    background: #ffffff;
    border: 1.5px solid #eef0f6;
    border-radius: 12px;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    transition: border-color 0.12s, background 0.12s;
}
.client-picker-row:hover { border-color: #c9cde0; background: #faf9fd; }
.client-picker-row.selected { border-color: #6351d0; background: #f6f2fd; }
.client-picker-avatar {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1effb;
    color: #6351d0;
    font-size: 1rem;
}
.client-picker-avatar.pro { background: #ede9fb; }
.client-picker-info { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.client-picker-name { font-weight: 600; color: #1e2749; }
.client-picker-sub {
    font-size: 0.82rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-picker-check { color: #6351d0; margin-left: auto; }

/* === Panneau de filtres des devis (recherche + période + statuts) === */
.qfilter {
    background: #ffffff;
    border: 1px solid #eef0f6;
    border-radius: 16px;
    padding: 0.9rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    box-shadow: 0 1px 3px rgba(15, 23, 42, 0.04);
}
.qfilter-head {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.qfilter-search {
    position: relative;
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 180px;
}
.qfilter-period { position: relative; flex: 0 0 auto; }
.qfilter-period-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border: 1.5px solid #eef0f6;
    background: #ffffff;
    border-radius: 999px;
    padding: 0.5rem 0.9rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    white-space: nowrap;
    max-width: 240px;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.qfilter-period-btn:hover { border-color: #c9cde0; background: #faf9fd; }
.qfilter-period-btn.active { border-color: #6351d0; background: #f6f2fd; color: #6351d0; }
.qfilter-period-btn > i:first-child { font-size: 0.9rem; }
.qfilter-period-value { overflow: hidden; text-overflow: ellipsis; }
.qfilter-period-caret { font-size: 0.7rem; color: #9ca3af; }
.qfilter-period-btn.active .qfilter-period-caret { color: #6351d0; }
.qfilter-period-menu { min-width: 220px; }
.qfilter-period-menu .row-menu-item i { color: #6351d0; }
.qfilter-period-menu .row-menu-item i.invisible { visibility: hidden; }
.qfilter-search > i {
    position: absolute;
    left: 0.85rem;
    top: 50%;
    transform: translateY(-50%);
    color: #9ca3af;
    pointer-events: none;
    font-size: 0.9rem;
}
.qfilter-search input {
    width: 100%;
    border: 1.5px solid #eef0f6;
    border-radius: 999px;
    background: #f9fafc;
    padding: 0.5rem 2.2rem;
    font-size: 0.9rem;
    color: #1e2749;
    transition: border-color 0.12s, background 0.12s;
}
.qfilter-search input:focus {
    outline: none;
    border-color: #6351d0;
    background: #ffffff;
    box-shadow: 0 0 0 3px rgba(99, 81, 208, 0.1);
}
.qfilter-clear {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    background: transparent;
    color: #9ca3af;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qfilter-clear:hover { background: #f1f2f6; color: #6b7280; }
.qfilter-reset {
    margin-left: auto;
    flex: 0 0 auto;
    border: 1.5px solid #eef0f6;
    background: #ffffff;
    color: #6351d0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.qfilter-reset:hover { background: #f6f2fd; border-color: #c9cde0; }
.qfilter-pills {
    display: flex;
    gap: 0.4rem;
    overflow-x: auto;
    padding: 2px;
    margin: -2px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    min-width: 0;
}
.qfilter-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    white-space: nowrap;
    border: 1.5px solid #eef0f6;
    background: #ffffff;
    border-radius: 999px;
    padding: 0.35rem 0.8rem;
    cursor: pointer;
    font-size: 0.83rem;
    font-weight: 600;
    color: #4b5563;
    transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.qfilter-pill:hover { border-color: #c9cde0; background: #faf9fd; }
.qfilter-pill.active {
    border-color: #6351d0;
    background: #6351d0;
    color: #ffffff;
}
.qfilter-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.qfilter-count {
    background: #f1f2f6;
    border-radius: 999px;
    padding: 0.02rem 0.45rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #6b7280;
}
.qfilter-pill.active .qfilter-count { background: rgba(255, 255, 255, 0.25); color: #ffffff; }
@media (max-width: 620px) {
    .qfilter-head { flex-wrap: nowrap; }
    .qfilter-search { max-width: none; flex: 1 1 auto; min-width: 0; }
    .qfilter-period-btn { max-width: 170px; }
    .qfilter-period-menu { right: 0; }
}

/* === Menu d'actions secondaires d'une ligne (kebab « ⋯ ») === */
/* Le menu « ⋯ » déborde vers le bas ; sur desktop on laisse le conteneur
   déborder pour qu'il reste accessible même avec une seule ligne (sinon
   overflow-x:auto de .table-responsive rognait le popup). Le scroll horizontal
   mobile reste géré par la media-query .table-responsive existante. */
@media (min-width: 992px) {
    .devis-table-wrap { overflow: visible; }
}
.row-menu { position: relative; display: inline-flex; }
.row-menu-pop {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1080;
    min-width: 200px;
    background: #ffffff;
    border: 1px solid #eef0f6;
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.16);
    padding: 0.35rem;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.15s ease;
}
.row-menu-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    border: none;
    background: transparent;
    text-align: left;
    width: 100%;
    padding: 0.5rem 0.65rem;
    border-radius: 8px;
    font-size: 0.87rem;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    white-space: nowrap;
}
.row-menu-item:hover { background: #f6f2fd; color: #6351d0; }
.row-menu-item.danger { color: #b91c1c; }
.row-menu-item.danger:hover { background: #fee2e2; color: #b91c1c; }
.row-menu-item i { width: 16px; text-align: center; }
.row-menu-sep { height: 1px; background: #f1f2f6; margin: 0.25rem 0.4rem; }
.row-menu-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1070;
    background: transparent;
}

/* === Sélecteur de plage de dates (calendrier, façon réservation) === */
.drp-modal {
    background: #ffffff;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
    width: 100%;
    max-width: 380px;
    animation: modalSlideUp 0.25s ease;
    overflow: hidden;
}
.drp-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.9rem 1.25rem;
    border-bottom: 1px solid #eef0f6;
}
.drp-summary {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.9rem 1.25rem;
    background: #faf9fd;
}
.drp-summary-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    border: 1.5px solid transparent;
    border-radius: 10px;
    padding: 0.35rem 0.6rem;
    background: #ffffff;
}
.drp-summary-item.picking { border-color: #6351d0; background: #f6f2fd; }
.drp-summary-label { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.04em; color: #9ca3af; font-weight: 700; }
.drp-summary-value { font-size: 0.85rem; font-weight: 600; color: #1e2749; text-transform: capitalize; }
.drp-cal { padding: 1rem 1.25rem; }
.drp-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}
.drp-month { font-weight: 700; color: #1e2749; text-transform: capitalize; }
.drp-nav {
    border: 1.5px solid #eef0f6;
    background: #ffffff;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    color: #6351d0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.drp-nav:hover { background: #f6f2fd; }
.drp-weekdays,
.drp-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.drp-weekdays span {
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    color: #9ca3af;
    padding-bottom: 0.35rem;
}
.drp-day {
    aspect-ratio: 1;
    border: none;
    background: transparent;
    border-radius: 9px;
    font-size: 0.85rem;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}
.drp-day:hover:not(.empty) { background: #f1effb; }
.drp-day.empty { cursor: default; }
.drp-day.today { box-shadow: inset 0 0 0 1.5px #c9cde0; }
.drp-day.in-range { background: #ede9fb; border-radius: 0; color: #6351d0; }
.drp-day.endpoint { background: #6351d0; color: #ffffff; box-shadow: none; }
.drp-day.endpoint.start { border-radius: 9px 0 0 9px; }
.drp-day.endpoint.end { border-radius: 0 9px 9px 0; }
.drp-day.endpoint.start.end { border-radius: 9px; }
.drp-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1.25rem;
    border-top: 1px solid #eef0f6;
}

/* === Répertoire clients : liste scannable (remplace les cartes) === */
.client-directory {
    display: flex;
    flex-direction: column;
    background: #ffffff;
    border: 1px solid #eef0f6;
    border-radius: 14px;
    overflow: hidden;
}
.client-directory-row {
    display: flex;
    align-items: center;
    gap: 0.9rem;
    padding: 0.8rem 1rem;
    border-bottom: 1px solid #f1f2f6;
    cursor: pointer;
    transition: background 0.12s;
}
.client-directory-row:last-child { border-bottom: none; }
.client-directory-row:hover { background: #faf9fd; }
.client-directory-avatar {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1effb;
    color: #6351d0;
    font-size: 1.05rem;
}
.client-directory-avatar.pro { background: #ede9fb; }
.client-directory-main { flex: 1; min-width: 0; }
.client-directory-name { font-weight: 600; color: #1e2749; display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.client-directory-sub {
    font-size: 0.83rem;
    color: #6b7280;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.client-directory-meta {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.client-directory-count {
    font-size: 0.8rem;
    color: #6b7280;
    background: #f3f4f8;
    border-radius: 999px;
    padding: 0.2rem 0.7rem;
    white-space: nowrap;
}
.client-directory-actions { display: flex; gap: 0.35rem; }
@media (max-width: 560px) {
    .client-directory-count { display: none; }
}

/* === Aperçu du devis (miroir du PDF, avant téléchargement) === */
.quote-preview-modal {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(15, 23, 42, 0.28);
    width: 100%;
    max-width: 820px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    animation: modalSlideUp 0.25s ease;
    overflow: hidden;
}
.quote-preview-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid #eef0f6;
    background: #faf9fd;
}
.quote-preview-scroll {
    overflow-y: auto;
    padding: 1.5rem;
    background: #f1f2f6;
}
.quote-sheet {
    background: #ffffff;
    border: 1px solid #e9edf3;
    border-radius: 8px;
    padding: 2rem;
    max-width: 680px;
    margin: 0 auto;
    color: #374151;
    font-size: 0.9rem;
}
.quote-sheet-head {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.quote-sheet-issuer-name { font-size: 1.25rem; font-weight: 700; color: #6351d0; margin-bottom: 0.25rem; }
.quote-sheet-issuer div { color: #6b7280; }
.quote-sheet-cartouche {
    background: #f6f2fd;
    border-radius: 10px;
    padding: 0.9rem 1.1rem;
    min-width: 200px;
}
.quote-sheet-cartouche-title { font-size: 1.1rem; font-weight: 700; color: #6351d0; margin-bottom: 0.35rem; }
.quote-sheet-cartouche div { color: #374151; }
.quote-sheet-recipient { margin: 1.5rem 0; text-align: right; }
.quote-sheet-label { font-size: 0.75rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.03em; }
.quote-sheet-table { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.quote-sheet-table th {
    background: #6351d0;
    color: #ffffff;
    font-weight: 600;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
}
.quote-sheet-table th:first-child { border-radius: 6px 0 0 6px; }
.quote-sheet-table th:last-child { border-radius: 0 6px 6px 0; }
.quote-sheet-table td { padding: 0.5rem 0.7rem; border-bottom: 1px solid #eef0f6; }
.quote-sheet-totals { max-width: 300px; margin-left: auto; }
.quote-sheet-total-row { display: flex; justify-content: space-between; padding: 0.2rem 0; }
.quote-sheet-total-row span:first-child { color: #6b7280; }
.quote-sheet-mention { font-size: 0.78rem; font-style: italic; color: #9ca3af; padding: 0.2rem 0; }
.quote-sheet-total-grand {
    background: #f6f2fd;
    border-radius: 8px;
    padding: 0.5rem 0.7rem;
    margin-top: 0.35rem;
    font-weight: 700;
    font-size: 1.05rem;
}
.quote-sheet-total-grand span:first-child { color: #050e4e; }
.quote-sheet-total-grand span:last-child { color: #6351d0; }
.quote-sheet-notes { background: #fafafa; border-radius: 8px; padding: 0.75rem 1rem; margin-top: 1.25rem; }
.quote-sheet-sign {
    margin-top: 1.5rem;
    margin-left: auto;
    width: 230px;
    border: 1px solid #c9cde0;
    border-radius: 8px;
    padding: 0.75rem;
    min-height: 90px;
}

.vr-cart {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)); /* au-dessus de la nav mobile (hauteur réelle) */
    background: white;
    border-top: 1px solid #E7E3F9;
    box-shadow: 0 -6px 24px rgba(15, 23, 42, 0.12);
    border-radius: 20px 20px 0 0;
    padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom, 0px));
    z-index: 40;
    max-height: 45vh;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}
@media (min-width: 992px) {
    .vr-cart { bottom: 0; left: auto; width: 420px; right: 1.5rem; border-radius: 20px 20px 0 0; }
}

.vr-cart-lines { overflow-y: auto; display: flex; flex-direction: column; gap: 0.45rem; }

.vr-cart-line {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.92rem;
}
.vr-cart-line-name {
    flex: 1;
    font-weight: 600;
    color: #1E2749;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vr-cart-line-total { font-weight: 600; min-width: 70px; text-align: right; }

.vr-cart-line-stepper { display: flex; align-items: center; gap: 0.4rem; }
.vr-step {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border: 1px solid #D9D4F2;
    background: #F6F5FC;
    color: #6351d0;
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
}
.vr-step:active { background: #E7E3F9; }
.vr-step-qty { min-width: 22px; text-align: center; font-weight: 700; }

.vr-cart-discount {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.vr-cart-discount label { font-size: 0.85rem; font-weight: 600; color: #6B728E; white-space: nowrap; }
.vr-cart-discount input { max-width: 120px; }

.vr-cart-sub {
    display: flex;
    justify-content: space-between;
    font-size: 0.88rem;
    color: #6B728E;
}

.vr-checkout {
    width: 100%;
    padding: 0.85rem;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 14px;
}

/* Étape de choix du mode d'encaissement (façon TPE) */
.vr-payment { display: flex; flex-direction: column; gap: 0.6rem; }
.vr-payment-head {
    display: flex; align-items: center; gap: 0.6rem;
    font-weight: 600; color: #2B2350; font-size: 0.95rem;
}
.vr-payment-back {
    border: none; background: #F6F3FD; color: #6351d0;
    width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0; cursor: pointer;
}
.vr-payment-back:hover { background: #EDE9FB; }
.vr-payment-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem;
}
.vr-payment-btn {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
    padding: 0.7rem 0.4rem; border-radius: 12px; cursor: pointer;
    border: 1.5px solid #E7E3F3; background: #FFFFFF; color: #4A4458;
    font-size: 0.82rem; font-weight: 600; min-height: 66px; transition: all 0.12s ease;
}
.vr-payment-btn i { font-size: 1.15rem; color: #6351d0; }
.vr-payment-btn:hover { border-color: #6351d0; background: #F6F3FD; }
.vr-payment-btn.selected { border-color: #6351d0; background: #6351d0; color: #fff; }
.vr-payment-btn.selected i { color: #fff; }
.vr-payment-btn:disabled { opacity: 0.6; cursor: default; }
.vr-payment-total { text-align: center; color: #6B728E; font-size: 0.9rem; }
.vr-payment-total strong { color: #2B2350; }

/* ============================================================
   CARNET DE COMMANDES — board kanban
   ============================================================ */
.orders-board {
    display: grid; grid-template-columns: repeat(5, minmax(210px, 1fr)); gap: 0.9rem;
    overflow-x: auto; padding-bottom: 0.5rem;
}
@media (max-width: 1100px) { .orders-board { grid-auto-flow: column; grid-template-columns: none; } .orders-col { min-width: 240px; } }
.orders-col { background: #F6F4FB; border-radius: 14px; padding: 0.6rem; display: flex; flex-direction: column; }
.orders-col-head {
    display: flex; align-items: center; gap: 0.45rem; font-weight: 700; color: #2B2350;
    font-size: 0.9rem; padding: 0.25rem 0.35rem 0.6rem;
}
.orders-col-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.orders-col-count { margin-left: auto; background: #fff; color: #6B728E; border-radius: 20px; padding: 0 0.5rem; font-size: 0.78rem; }
.orders-col-body { display: flex; flex-direction: column; gap: 0.55rem; min-height: 40px; }
.orders-col-empty { text-align: center; color: #C7C2D8; padding: 0.6rem 0; }

.order-card { background: #fff; border-radius: 12px; padding: 0.7rem; box-shadow: 0 4px 12px rgba(99,81,208,0.06); }
.order-card-title { font-weight: 600; color: #2B2350; font-size: 0.92rem; line-height: 1.25; }
.order-card-client { font-size: 0.82rem; color: #6B728E; margin-top: 0.15rem; }
.order-card-date { font-size: 0.8rem; color: #6B728E; margin-top: 0.25rem; }
.order-card-date.due-soon { color: #C77A17; font-weight: 600; }
.order-card-date.due-late { color: #D14343; font-weight: 700; }
.order-card-money { margin-top: 0.5rem; }
.order-card-bar { height: 6px; background: #EDEAF7; border-radius: 6px; overflow: hidden; }
.order-card-fill { height: 100%; background: #6351d0; border-radius: 6px; }
.order-card-amounts { display: flex; justify-content: space-between; font-size: 0.76rem; margin-top: 0.25rem; }
.order-card-meta { font-size: 0.75rem; color: #9181E0; margin-top: 0.3rem; }
.order-card-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; margin-top: 0.55rem; }
.order-status-select { font-size: 0.78rem; padding: 0.2rem 0.4rem; height: auto; flex: 1 1 100%; margin-bottom: 0.15rem; }

/* ============================================================
   PARCOURS GUIDÉ + STUDIO — système visuel « doux & féminin »
   (porté des maquettes refonte.css, scopé sous .rf-root)
   ============================================================ */
.rf-root {
    --rf-bg: #FBF6F1; --rf-card: #FFFFFF; --rf-night: #2B2350; --rf-ink: #4A4458;
    --rf-muted: #8E86A3; --rf-violet: #6351d0; --rf-violet-soft: #EDE9FB; --rf-violet-ghost: #F6F3FD;
    --rf-rose: #D98FB0; --rf-rose-soft: #F9EDF3; --rf-sauge: #6FAE93; --rf-sauge-soft: #EAF4EF;
    --rf-jaune: #FFD54F; --rf-jaune-soft: #FFF4D1;
    --rf-shadow-soft: 0 8px 24px rgba(99, 81, 208, 0.07);
    font-family: 'Poppins', sans-serif;
    background: var(--rf-bg);
    color: var(--rf-ink);
    position: relative;
    overflow: hidden;
    border-radius: 24px;
    padding: 28px 30px 36px;
    margin: -8px 0;
    min-height: 70vh;
}
.rf-root, .rf-root *, .rf-root *::before, .rf-root *::after { box-sizing: border-box; }
/* Variant pour pages riches (tableaux, dashboards, menus déroulants) : pas de clipping. */
.rf-root.rf-flow { overflow: visible; }
.rf-root h1, .rf-root h2, .rf-root h3 { font-family: 'Poppins', sans-serif; font-weight: 700; color: var(--rf-night); letter-spacing: -0.015em; margin: 0; }
.rf-hand { font-family: 'Kalam', cursive; color: var(--rf-violet); }
.rf-muted { color: var(--rf-muted); }

.rf-card { background: var(--rf-card); border-radius: 26px; box-shadow: var(--rf-shadow-soft); padding: 26px 28px; }
.rf-card-flat { background: var(--rf-card); border-radius: 18px; border: 1.5px solid #F0EAE3; padding: 14px 16px; }

.rf-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 14.5px; border: none; cursor: pointer; border-radius: 999px; padding: 13px 24px; background: var(--rf-violet); color: white; box-shadow: 0 10px 24px rgba(99, 81, 208, 0.28); transition: transform .12s; }
.rf-btn:active { transform: scale(0.97); }
.rf-btn:disabled { opacity: .6; cursor: default; }
.rf-btn-ghost { background: transparent; color: var(--rf-muted); box-shadow: none; border: 1.5px solid #E8E1F5; }
.rf-btn-jaune { background: var(--rf-jaune); color: #5C4A00; box-shadow: 0 10px 24px rgba(255, 213, 79, 0.35); }

.rf-chip { display: inline-flex; align-items: center; gap: 7px; border-radius: 999px; padding: 7px 14px; font-size: 13px; font-weight: 600; background: var(--rf-violet-soft); color: var(--rf-violet); }
.rf-chip.rose { background: var(--rf-rose-soft); color: #B05C84; }
.rf-chip.sauge { background: var(--rf-sauge-soft); color: #3F8266; }
.rf-chip.jaune { background: var(--rf-jaune-soft); color: #8A6D00; }

.rf-icon-dot { width: 38px; height: 38px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.rf-label { display: block; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--rf-muted); letter-spacing: 0.02em; margin: 0 0 7px 4px; }

.rf-stack-bar { display: flex; width: 100%; height: 16px; border-radius: 999px; overflow: hidden; background: #F1ECF9; }
.rf-stack-bar > div { height: 100%; }
.rf-legend { display: flex; flex-direction: column; gap: 9px; }
.rf-legend-row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--rf-ink); }
.rf-legend-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.rf-legend-row strong { margin-left: auto; color: var(--rf-night); font-weight: 600; }

.rf-blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.5; pointer-events: none; z-index: 0; }

/* ---- Steps (colonne gauche) ---- */
.rf-step { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 16px; font-size: 14px; font-weight: 600; color: var(--rf-muted); background: transparent; border: none; cursor: pointer; text-align: left; width: 100%; }
.rf-step .rf-step-dot { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; background: #F1ECF9; color: var(--rf-muted); flex-shrink: 0; }
.rf-step.done { color: var(--rf-sauge); }
.rf-step.done .rf-step-dot { background: var(--rf-sauge-soft); color: var(--rf-sauge); }
.rf-step.current { background: white; color: var(--rf-night); box-shadow: var(--rf-shadow-soft); }
.rf-step.current .rf-step-dot { background: var(--rf-violet); color: white; }

/* ---- Inputs (Stepper / DimInput / texte) ---- */
.rf-input { display: flex; align-items: center; gap: 8px; background: #FAF8FD; border: 1.5px solid #ECE6F8; border-radius: 16px; padding: 9px 14px; font-size: 14.5px; font-weight: 500; color: var(--rf-night); }
.rf-input-compact { padding: 6px 10px; border-radius: 13px; }
.rf-input .rf-input-suffix { margin-left: 2px; color: var(--rf-muted); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.rf-step-btn { border: none; background: #EFE9FA; color: #6351d0; width: 28px; height: 28px; border-radius: 9px; font-weight: 700; font-size: 16px; line-height: 1; cursor: pointer; flex-shrink: 0; }
.rf-input-compact .rf-step-btn { width: 24px; height: 24px; }
.rf-step-input { flex: 1; min-width: 0; text-align: center; font-weight: 700; font-size: 16px; border: none; background: transparent; color: var(--rf-night); -moz-appearance: textfield; }
.rf-step-input::-webkit-outer-spin-button, .rf-step-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.rf-input-text { width: 100%; background: #FAF8FD; border: 1.5px solid #ECE6F8; border-radius: 16px; padding: 13px 16px; font-size: 15px; font-weight: 500; color: var(--rf-night); font-family: 'Poppins', sans-serif; }
.rf-input-text:focus, .rf-step-input:focus { outline: none; }
.rf-select { width: 100%; background: #FAF8FD; border: 1.5px solid #ECE6F8; border-radius: 16px; padding: 12px 14px; font-size: 14px; font-weight: 500; color: var(--rf-night); font-family: 'Poppins', sans-serif; cursor: pointer; }

/* ============ Écran de choix ============ */
.rf-choix-head { position: relative; z-index: 1; text-align: center; max-width: 640px; margin: 14px auto 30px; }
.rf-choix-head h1 { font-size: 28px; margin: 18px 0 6px; }
.rf-choix-head .rf-chip { margin-bottom: 6px; }
.rf-choix-head .rf-hand { font-size: 18px; }
.rf-choix-cards { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 860px; margin: 0 auto; }
.rf-choix-card { position: relative; text-align: left; border: 2px solid transparent; cursor: pointer; display: flex; flex-direction: column; gap: 12px; padding: 30px 30px 26px; transition: transform .14s, border-color .14s, box-shadow .14s; }
.rf-choix-card:hover { transform: translateY(-4px); border-color: var(--rf-violet-soft); box-shadow: 0 20px 44px rgba(99,81,208,.12); }
.rf-choix-card h2 { font-size: 21px; }
.rf-choix-card > p { font-size: 14px; color: var(--rf-ink); line-height: 1.55; margin: 0; }
.rf-choix-badge { position: absolute; top: 18px; right: 18px; font-size: 11.5px; padding: 5px 11px; }
.rf-choix-list { list-style: none; padding: 0; margin: 4px 0 8px; display: flex; flex-direction: column; gap: 8px; }
.rf-choix-list li { font-size: 13.5px; color: var(--rf-ink); display: flex; align-items: center; gap: 9px; }
.rf-choix-list li i { color: var(--rf-sauge); font-size: 12px; }
.rf-choix-cta { margin-top: auto; width: 100%; }

/* ============ Wizard guidé ============ */
.rf-guide-head { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; }
.rf-guide-head h1 { font-size: 23px; }
.rf-guide-stepcount { margin-left: auto; }
.rf-guide-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 230px minmax(0, 1fr) 350px; gap: 22px; align-items: start; }
.rf-guide-steps { display: flex; flex-direction: column; gap: 4px; }
.rf-guide-hint { font-size: 14px; line-height: 1.5; padding: 16px 10px 0 16px; }
.rf-guide-form { padding: 30px 32px; }
.rf-guide-form h2 { font-size: 20px; margin-bottom: 6px; }
.rf-guide-sub { font-size: 14px; color: var(--rf-muted); margin: 0 0 22px; }
.rf-guide-h3 { font-size: 15px; margin: 26px 0 12px; }

.rf-field { flex: 1; margin-bottom: 16px; min-width: 0; }
.rf-field-row { display: flex; gap: 14px; flex-wrap: wrap; }
.rf-field-row > .rf-field { flex: 1 1 140px; }
.rf-field-help { display: block; font-size: 12px; color: var(--rf-muted); margin: 6px 0 0 4px; }

.rf-toggle-row { display: flex; gap: 8px; }
.rf-pill-toggle { flex: 1; border: 1.5px solid #ECE6F8; background: #FAF8FD; color: var(--rf-muted); border-radius: 14px; padding: 11px 8px; font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: 'Poppins', sans-serif; }
.rf-pill-toggle.on { background: var(--rf-violet-soft); border-color: var(--rf-violet); color: var(--rf-violet); }

.rf-note { display: flex; gap: 12px; align-items: center; border-radius: 18px; padding: 14px 18px; font-size: 13.5px; margin-top: 20px; }
.rf-note.rose { background: var(--rf-rose-soft); color: #8A5670; }
.rf-note.sauge { background: var(--rf-sauge-soft); color: #2E6B51; }

.rf-line { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.rf-line-body { min-width: 0; }
.rf-line-body strong { display: block; font-size: 13.5px; color: var(--rf-night); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rf-line-sub { font-size: 12px; color: var(--rf-muted); }
.rf-mini-stepper { margin-left: auto; width: 150px; flex-shrink: 0; }
.rf-icon-btn { border: none; background: transparent; color: #C9BFE0; cursor: pointer; font-size: 14px; padding: 6px; flex-shrink: 0; }
.rf-icon-btn:hover { color: #B05C84; }
.rf-add { border-style: dashed; width: 100%; margin-top: 4px; }

.rf-margin-value { font-size: 30px; font-weight: 800; color: var(--rf-night); letter-spacing: -0.02em; margin-bottom: 14px; }
.rf-margin-value span { font-size: 14px; font-weight: 600; color: var(--rf-muted); margin-left: 8px; }
.rf-range { width: 100%; -webkit-appearance: none; appearance: none; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--rf-violet), var(--rf-rose)); outline: none; }
.rf-range::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; border-radius: 50%; background: white; border: 3px solid var(--rf-violet); box-shadow: 0 4px 12px rgba(99,81,208,.3); cursor: pointer; }
.rf-range::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: white; border: 3px solid var(--rf-violet); cursor: pointer; }
.rf-range-legend { display: flex; justify-content: space-between; font-size: 11px; color: #B9AFCE; margin-top: 8px; }
.rf-check { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--rf-ink); margin-top: 14px; cursor: pointer; }
.rf-check input { width: 18px; height: 18px; accent-color: var(--rf-violet); }

.rf-guide-nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 30px; }

/* ---- Panneau prix vivant ---- */
.rf-price-live { background: linear-gradient(165deg, #FFFFFF 60%, #F6F3FD); position: sticky; top: 14px; }
.rf-price-big { font-size: 42px; font-weight: 800; color: var(--rf-night); letter-spacing: -0.03em; line-height: 1; }
.rf-price-big span { font-size: 14px; font-weight: 600; color: var(--rf-muted); margin-left: 8px; }
.rf-price-sub { font-size: 13px; color: var(--rf-muted); margin: 6px 0 18px; }
.rf-price-divider { border-top: 1.5px solid #F0EAF8; margin: 16px 0 14px; }
.rf-price-foot { display: flex; align-items: center; gap: 10px; }
.rf-price-foot .rf-hand { font-size: 14px; }
.rf-channel-row { display: flex; align-items: center; font-size: 13.5px; padding: 7px 2px; border-bottom: 1px solid #F5F1FA; }
.rf-channel-row strong { margin-left: auto; color: var(--rf-night); }

/* ---- Responsive ---- */
@media (max-width: 1080px) {
    .rf-guide-grid { grid-template-columns: 1fr; }
    .rf-guide-steps { flex-direction: row; overflow-x: auto; gap: 6px; padding-bottom: 4px; order: 1; }
    .rf-guide-steps .rf-step { width: auto; white-space: nowrap; }
    .rf-guide-hint { display: none; }
    .rf-guide-form { order: 3; }
    .rf-price-live { order: 2; position: static; }
}
@media (max-width: 640px) {
    .rf-root { padding: 18px 16px 28px; border-radius: 18px; }
    .rf-choix-cards { grid-template-columns: 1fr; }
    .rf-guide-form { padding: 22px 18px; }
    .rf-price-big { font-size: 36px; }
    .rf-mini-stepper { width: 130px; }
    .rf-guide-head h1 { font-size: 20px; width: 100%; order: 3; }
}

/* ---- Zone photo (parcours guidé) ---- */
.rf-photo-drop { display: flex; align-items: center; gap: 14px; background: #FAF8FD; border: 1.5px dashed #DDD2EC; border-radius: 18px; padding: 16px 18px; cursor: pointer; transition: border-color .14s, background .14s; }
.rf-photo-drop:hover { border-color: var(--rf-violet); background: var(--rf-violet-ghost); }
.rf-photo-drop strong { color: var(--rf-night); font-size: 14px; }
.rf-photo-preview { position: relative; display: inline-block; border-radius: 18px; overflow: hidden; box-shadow: var(--rf-shadow-soft); }
.rf-photo-preview img { display: block; max-width: 240px; max-height: 180px; object-fit: cover; }
.rf-photo-remove { position: absolute; top: 8px; right: 8px; width: 30px; height: 30px; border-radius: 50%; border: none; background: rgba(43,35,80,.6); color: white; cursor: pointer; font-size: 13px; display: flex; align-items: center; justify-content: center; }
.rf-photo-remove:hover { background: #B05C84; }

/* ============================================================
   MACHINES — « Ton parc, en douceur » (maquette V1)
   ============================================================ */
.rf-img-ph {
    background: repeating-linear-gradient(45deg, #F4EEF7 0 10px, #FAF6FB 10px 20px);
    border: 1.5px dashed #DDD2EC;
    border-radius: 16px;
    display: flex; align-items: center; justify-content: center;
    color: #A99CC4; font-family: ui-monospace, monospace; font-size: 11px;
    width: 100%; height: 100%;
}

.rf-mach-head {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}
.rf-mach-icon {
    width: 56px; height: 56px;
    border-radius: 14px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
    background: #ede9fb;
    color: #6351d0;
}
.rf-mach-titlewrap { position: relative; line-height: 1.2; }
.rf-mach-head h1 { font-size: 26px; }
.rf-mach-titlewrap::after {
    content: '';
    display: block;
    width: 60px;
    height: 4px;
    border-radius: 2px;
    background: #FFD54F;
    margin-top: 0.3rem;
}
.rf-mach-hand { font-size: 16px; }
.rf-mach-add { margin-left: auto; }
.rf-head-action { margin-left: auto; display: inline-flex; gap: 8px; flex-wrap: wrap; }

.rf-mach-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 26px;
}

.rf-mach-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
    align-items: start;
}
@media (max-width: 1100px) { .rf-mach-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .rf-mach-grid { grid-template-columns: 1fr; } }

.rf-mach-card {
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rf-mach-photo {
    position: relative;
    height: 130px;
    border-radius: 16px;
    overflow: hidden;
}
.rf-mach-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rf-mach-default {
    position: absolute;
    top: 10px; right: 10px;
    display: inline-flex; align-items: center; gap: 5px;
    background: #FFFFFF;
    color: #8A6D00;
    font-size: 11px; font-weight: 600;
    padding: 4px 10px;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.10);
}
.rf-mach-default .fa-star { color: #FFD54F; }

.rf-mach-name {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 6px;
}
.rf-mach-name > strong {
    font-size: 15.5px;
    color: var(--rf-night);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rf-mach-actions {
    margin-left: auto;
    display: inline-flex;
    gap: 2px;
    flex-shrink: 0;
}
.rf-mach-actions button {
    border: none; background: transparent;
    color: #C9BFE0;
    width: 28px; height: 28px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    transition: color .12s, background .12s;
}
.rf-mach-actions button:hover { color: var(--rf-violet); background: var(--rf-violet-soft); }
.rf-mach-actions button .fa-star.fas { color: #FFD54F; }
.rf-mach-actions button:hover .fa-trash-can { color: #B05C84; }

.rf-mach-sub {
    font-size: 12.5px;
    color: var(--rf-muted);
    padding: 0 6px;
    margin-top: -8px;
}

.rf-mach-tags {
    display: flex;
    gap: 8px;
    padding: 0 6px;
    flex-wrap: wrap;
}
.rf-mach-tags .rf-chip { font-size: 11.5px; padding: 6px 11px; }

.rf-mach-refund {
    background: #FAF7FD;
    border-radius: 16px;
    padding: 13px 16px;
}
.rf-mach-refund-top {
    display: flex;
    font-size: 12px;
    margin-bottom: 7px;
}
.rf-mach-refund-top span { color: var(--rf-muted); font-weight: 600; letter-spacing: 0.02em; }
.rf-mach-refund-top strong { margin-left: auto; color: var(--rf-night); white-space: nowrap; }
.rf-mach-bar {
    height: 9px;
    border-radius: 999px;
    background: #EFE8F8;
    overflow: hidden;
}
.rf-mach-bar > div { height: 100%; border-radius: 999px; transition: width .3s; }
.rf-mach-refund-rest {
    margin-top: 8px;
    font-size: 11.5px;
    color: var(--rf-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}
.rf-mach-refund-rest .fa-hourglass-half { color: #C9BFE0; font-size: 10.5px; }

/* ===== Business Plan : édition des hypothèses (BP-1) ===== */
.bp-var-group-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--cp-accent, #6351d0);
    margin: 10px 0 4px;
}
.bp-var-group-label:first-of-type { margin-top: 0; }
.bp-var-label {
    display: block;
    font-size: 11.5px;
    color: #6b6b78;
    margin-bottom: 2px;
}

/* ===== Business Plan : interview guidée, plan en direct (BP-2) ===== */
.bp-live-list { display: flex; flex-direction: column; }
.bp-live-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: 13px;
}
.bp-live-row:last-child { border-bottom: none; }
.bp-live-value { font-weight: 600; color: #2f2f38; white-space: nowrap; }
.bp-live-pending { color: #9a94a8; }
.bp-live-pending .bp-live-value { color: #b7b1c2; font-weight: 500; font-style: italic; }

/* ===== Business Plan : prévisionnel & scénarios (BP-3) ===== */
.bp-scn-card {
    background: #faf9fd;
    border: 1px solid rgba(0,0,0,.06);
    border-radius: 10px;
    padding: 10px 12px;
    height: 100%;
}
.bp-scn-title { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.bp-scn-kpi { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; padding: 2px 0; }
.bp-scn-kpi span { color: #6b6b78; }
.bp-scn-kpi strong { color: #2f2f38; white-space: nowrap; }
.bp-chart-wrap { border: 1px solid rgba(0,0,0,.06); border-radius: 10px; padding: 8px 8px 6px; }
.bp-chart { width: 100%; height: 200px; display: block; }
.bp-chart-legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: #55555f; padding: 4px 2px 0; }
.bp-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.bp-proj-table { font-size: 12px; }
.bp-proj-table th { font-weight: 600; color: #6b6b78; }

/* ===== Interview guidée : parcours UX (BP-2 / audit 5.3) ===== */
.bp-iv-tabs { display: flex; gap: 8px; }
.bp-iv-tab {
    flex: 1;
    border: 1px solid rgba(99,81,208,.25);
    background: #faf9fd;
    color: #6351d0;
    border-radius: 10px;
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
}
.bp-iv-tab.active { background: #6351d0; color: #fff; border-color: #6351d0; }
.bp-iv-ok { color: #16a34a; }
.bp-iv-wait { color: #c9b8f0; }
.bp-live-editable { cursor: pointer; border-radius: 6px; padding: 1px 6px; transition: background .12s; }
.bp-live-editable:hover { background: #f0ecfb; }
.bp-iv-pen { font-size: 9px; color: #b7b1c2; margin-left: 4px; }
.bp-live-editable:hover .bp-iv-pen { color: #6351d0; }
.bp-iv-edit { max-width: 120px; text-align: right; display: inline-block; }

/* ===== Business Plan : alertes de plafonds (BP-3 / audit 5.5) ===== */
.bp-threshold-alert {
    background: #fff7ed;
    border: 1px solid #fed7aa;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    padding: 10px 12px;
    color: #7c2d12;
}

/* ===== Business Plan : références métier (BP-5 / audit 5.7) ===== */
.bp-ref-list { display: flex; flex-direction: column; gap: 2px; }
.bp-ref-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 8px;
    align-items: center;
    padding: 4px 0;
    border-bottom: 1px solid rgba(0,0,0,.05);
    font-size: 12.5px;
}
.bp-ref-row:last-child { border-bottom: none; }
.bp-ref-val { font-weight: 600; color: #2f2f38; white-space: nowrap; }
.btn-xs { padding: 1px 8px; font-size: 11px; line-height: 1.5; border-radius: 6px; }

/* ===== Business Plan : widget Plan vs Réel (BP-6 / audit 5.8) ===== */
.lpw-row { display: grid; grid-template-columns: 100px 1fr auto; gap: 10px; align-items: center; padding: 4px 0; font-size: 12.5px; }
.lpw-label { color: #6b6b78; }
.lpw-bar-wrap { background: #eee7f9; border-radius: 6px; height: 10px; overflow: hidden; }
.lpw-bar { height: 100%; border-radius: 6px; transition: width .3s; }
.lpw-val { white-space: nowrap; font-weight: 600; color: #2f2f38; }
.lpw-val .text-muted { font-weight: 400; }

/* ===== Business Plan : hub / CTA (BP-7 / audit 5.9) ===== */
.bph-cta { display: block; text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.bph-cta:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(99,81,208,.12); color: inherit; }
.bph-cta h5 { margin-bottom: 4px; }

/* ===== Calculateur : encart ACRE (info, sans changer le prix) ===== */
.acre-note {
    background: #ecfdf5;
    border: 1px solid #a7f3d0;
    border-left: 4px solid #16a34a;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 12.5px;
    color: #065f46;
}
/* Variante « période dépassée » : neutre/ambre, pas d'incitation verte. */
.acre-note-off {
    background: #fff7ed;
    border-color: #fed7aa;
    border-left-color: #f59e0b;
    color: #7c2d12;
}

/* ============================================================
   COPILOTE URSSAF — « La tirelire » (maquette V1)
   ============================================================ */
.rf-urssaf-intro { font-size: 14px; color: var(--rf-muted); line-height: 1.55; max-width: 720px; margin: -6px 0 22px; }
.rf-urssaf-intro strong { color: var(--rf-ink); }

/* ---- Hero « tirelire » ---- */
.rf-tirelire {
    background: linear-gradient(120deg, #FFF4D1 0%, #F9EDF3 90%);
    border-radius: 30px;
    padding: 30px 34px;
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 30px;
    align-items: center;
    margin-bottom: 22px;
}
.rf-tirelire-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rf-tirelire-head .rf-label { margin: 0; color: #8A6D00; }
.rf-tirelire-due { font-size: 12.5px; color: #8A6D00; display: block; }
.rf-tirelire-amount { font-size: 44px; font-weight: 800; color: #5C4A00; letter-spacing: -0.02em; line-height: 1; margin-bottom: 8px; }
.rf-tirelire-detail { font-size: 13px; color: #8A6D00; }
.rf-tirelire-actions { display: flex; gap: 12px; margin-top: 20px; flex-wrap: wrap; }
.rf-tirelire-actions .rf-btn-ghost { background: rgba(255, 255, 255, 0.7); border-color: rgba(138, 109, 0, 0.18); color: #8A6D00; text-decoration: none; }
.rf-declare-card { padding: 22px 26px; }
.rf-declare-card .rf-label { margin: 0 0 4px 0; }
.rf-declare-value { font-size: 30px; font-weight: 800; color: var(--rf-night); letter-spacing: -0.02em; }
.rf-declare-note { font-size: 12.5px; color: var(--rf-muted); line-height: 1.55; margin: 10px 0 0; }
.rf-declare-note strong { color: var(--rf-ink); }

/* Hero « tout est à jour » (rien à déclarer) */
.rf-tirelire.is-clear { background: linear-gradient(120deg, #EAF4EF 0%, #F6F3FD 90%); grid-template-columns: 1fr; }
.rf-tirelire.is-clear .rf-tirelire-amount { color: #2E6B51; font-size: 26px; }

/* ---- Grille seuils + trimestres ---- */
.rf-urssaf-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 16px; }
.rf-urssaf-grid h3 { font-size: 15px; margin-bottom: 16px; }
.rf-urssaf-grid h3 span { font-weight: 500; color: var(--rf-muted); font-size: 12.5px; }

/* ---- Jauge de seuil « respirante » ---- */
.rf-seuil { margin-bottom: 18px; }
.rf-seuil:last-child { margin-bottom: 0; }
.rf-seuil-top { display: flex; align-items: baseline; font-size: 13px; margin-bottom: 7px; }
.rf-seuil-top strong { color: var(--rf-night); }
.rf-seuil-top span { margin-left: auto; color: var(--rf-muted); font-size: 12.5px; }
.rf-seuil-bar { height: 12px; border-radius: 999px; background: #F1ECF9; overflow: hidden; }
.rf-seuil-bar > div { min-width: 14px; height: 100%; border-radius: 999px; transition: width .3s; }
.rf-seuil-note { font-size: 12px; color: var(--rf-muted); display: block; margin-top: 6px; }
.rf-seuil-note.warn { color: #B4530E; }
.rf-seuil-note.danger { color: #C81E4E; }

/* ---- Ligne de trimestre ---- */
.rf-period-row { display: flex; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid #F5F1FA; font-size: 13.5px; }
.rf-period-row:last-child { border-bottom: none; }
.rf-period-label { color: var(--rf-night); width: 76px; flex-shrink: 0; }
.rf-period-ca { color: var(--rf-muted); font-size: 12.5px; }
.rf-period-total { margin-left: auto; color: var(--rf-night); font-weight: 700; white-space: nowrap; }
.rf-period-row .rf-chip.acre { font-size: 10.5px; padding: 4px 10px; }
/* Chip cliquable (statut) */
.rf-period-chip { border: none; cursor: pointer; font-family: 'Poppins', sans-serif; font-size: 11.5px; }
.rf-period-chip:disabled { opacity: .55; cursor: default; }
.rf-period-chip.is-current { background: #F4F0FB; color: var(--rf-muted); cursor: default; }

@media (max-width: 880px) {
    .rf-tirelire { grid-template-columns: 1fr; }
    .rf-urssaf-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   TABLEAU DE BORD DES VENTES — refonte « Le journal de bord » (V1)
   Scopé sous .vd-root (hérite des tokens .rf-root)
   ============================================================ */
.vd-root { padding: 4px 2px 40px; }
.vd-root .rf-mach-head { margin-bottom: 20px; }

/* Ligne pipeline + filtres */
.vd-pipe-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.vd-pipe { display: flex; align-items: center; gap: 12px; padding: 12px 16px; text-decoration: none; transition: transform .14s, box-shadow .14s; }
.vd-pipe:hover { transform: translateY(-2px); box-shadow: var(--rf-shadow-soft); }
.vd-pipe-ico { width: 36px; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.vd-pipe-txt { line-height: 1.3; }
.vd-pipe-txt strong { display: block; color: var(--rf-night); font-size: 13.5px; }
.vd-pipe-txt span { font-size: 12px; color: var(--rf-muted); }
.vd-pipe-arrow { color: #D9D0EA; font-size: 11px; margin-left: 4px; }
.vd-filters { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.vd-select { width: auto; min-width: 130px; padding: 9px 34px 9px 14px; font-size: 13px; border-radius: 999px; background-color: #F4F0FB; border-color: transparent; color: var(--rf-night); }
.vd-daterange { display: flex; margin: -6px 0 16px 2px; }
.vd-daterange-btn {
    display: inline-flex; align-items: center; gap: 10px;
    background: #F4F0FB; border: 1.5px solid transparent; border-radius: 999px;
    padding: 9px 18px; font-size: 13px; font-family: 'Poppins', sans-serif;
    color: var(--rf-night); cursor: pointer; transition: border-color .12s, background .12s;
}
.vd-daterange-btn:hover { border-color: var(--rf-violet); background: var(--rf-violet-ghost); }
.vd-daterange-btn > i:first-child { color: var(--rf-violet); font-size: 13px; }
.vd-daterange-btn strong { color: var(--rf-night); font-weight: 700; text-transform: capitalize; }
.vd-daterange-edit { color: var(--rf-muted); font-size: 11px; margin-left: 2px; }

/* Héro dégradé : objectif + ventes + étoiles */
.vd-hero {
    background: linear-gradient(120deg, #EDE9FB 0%, #F9EDF3 82%);
    border-radius: 28px;
    padding: 26px 32px;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1.2fr;
    gap: 30px;
    align-items: center;
    margin-bottom: 18px;
}
.vd-hero-skel { margin-bottom: 18px; }
.vd-label0 { margin: 0 0 6px 0 !important; }
.vd-hero-objhead { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.vd-hero-edit { margin-left: auto; border: none; background: rgba(255,255,255,0.6); color: var(--rf-violet); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12px; border-radius: 999px; padding: 6px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; }
.vd-hero-edit:hover { background: white; }
.vd-obj-nums { display: flex; align-items: baseline; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.vd-obj-ca { font-size: 34px; font-weight: 800; color: var(--rf-night); letter-spacing: -0.02em; line-height: 1; }
.vd-obj-target { font-size: 15px; color: var(--rf-muted); }
.vd-obj-chip { font-size: 11.5px; margin-left: 4px; padding: 4px 11px; }
.vd-obj-progress { background: rgba(255,255,255,0.6); }
.vd-obj-msg { font-size: 12.5px; color: var(--rf-muted); display: block; margin-top: 8px; }
.vd-obj-msg strong { color: var(--rf-night); }
.vd-obj-inline-cta { border: none; background: none; padding: 0; color: var(--rf-violet); font-weight: 700; font-family: 'Poppins', sans-serif; font-size: inherit; cursor: pointer; text-decoration: underline; }
.vd-obj-edit { display: flex; flex-direction: column; gap: 10px; }
.vd-obj-input { background: white; max-width: 260px; }
.vd-obj-inputfield { flex: 1; min-width: 0; border: none; background: transparent; font-family: 'Poppins', sans-serif; font-weight: 700; font-size: 16px; color: var(--rf-night); -moz-appearance: textfield; }
.vd-obj-inputfield::-webkit-outer-spin-button, .vd-obj-inputfield::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vd-obj-inputfield:focus { outline: none; }
.vd-obj-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.vd-btn-sm { padding: 9px 16px; font-size: 13px; box-shadow: none; }
.vd-obj-remove { border: none; background: none; color: #B05C84; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12.5px; cursor: pointer; }
.vd-hero-stat .vd-hero-big { font-size: 26px; font-weight: 800; color: var(--rf-night); letter-spacing: -0.02em; }
.vd-hero-sub { font-size: 12.5px; color: var(--rf-muted); }
.vd-star { font-size: 14px; font-weight: 700; color: var(--rf-night); margin-top: 6px; }
.vd-star:first-of-type { margin-top: 0; }
.vd-star span { font-weight: 500; color: var(--rf-muted); }
.vd-star i { margin-right: 7px; }

/* Grille graphe + canaux */
.vd-grid-2 { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.vd-cardhead { display: flex; align-items: baseline; gap: 10px; margin-bottom: 16px; }
.vd-cardhead h3 { font-size: 15px; }
.vd-cardhead > span { margin-left: auto; font-size: 12.5px; color: var(--rf-muted); }
.vd-empty { font-size: 13px; color: var(--rf-muted); padding: 24px 0; text-align: center; }

/* Barres CA 12 mois */
.vd-bars { display: flex; align-items: flex-end; gap: 8px; height: 148px; }
.vd-bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; height: 100%; justify-content: flex-end; }
.vd-bar { width: 100%; max-width: 30px; border-radius: 8px 8px 4px 4px; background: #EDE9FB; min-height: 3px; transition: height .4s ease; }
.vd-bar.current { background: linear-gradient(180deg, #6351d0, #9181E0); }
.vd-bar-col span { font-size: 10.5px; color: #B9AFCE; font-weight: 500; }
.vd-bar-col span.current { color: var(--rf-violet); font-weight: 700; }

/* Canaux */
.vd-chan { margin-bottom: 16px; }
.vd-chan:last-child { margin-bottom: 0; }
.vd-chan-head { display: flex; align-items: baseline; font-size: 13.5px; margin-bottom: 6px; }
.vd-chan-head strong { color: var(--rf-night); }
.vd-chan-head span { margin-left: auto; font-weight: 700; color: var(--rf-night); }
.vd-chan-bar { height: 10px; border-radius: 999px; background: #F1ECF9; overflow: hidden; margin-bottom: 5px; }
.vd-chan-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6351d0, #9181E0); }
.vd-chan-sub { display: flex; font-size: 12px; color: var(--rf-muted); gap: 10px; flex-wrap: wrap; }
.vd-chan-sub > span:last-child { margin-left: auto; }
.vd-chan-sub strong { color: var(--rf-ink); }

/* Alerte douce ventes à perte */
.vd-loss { display: flex; align-items: center; gap: 14px; background: var(--rf-rose-soft); margin-bottom: 16px; padding: 16px 22px; }
.vd-loss-ico { width: 38px; height: 38px; border-radius: 13px; background: white; color: #B05C84; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.vd-loss-txt { font-size: 13.5px; color: #8C4A69; line-height: 1.5; }
.vd-loss-txt strong { color: #7A3E5B; }
.vd-loss-cta { margin-left: auto; cursor: pointer; text-decoration: none; white-space: nowrap; flex-shrink: 0; }

/* Cartes principales (produits / paiements / dernières ventes) */
.vd-root .rf-card { margin-bottom: 16px; }
.vd-root .rf-card:last-child { margin-bottom: 0; }

/* Grille basse : produits stars (large) + colonne latérale paiements / dernières ventes */
.vd-grid-main { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-bottom: 16px; align-items: start; }
.vd-grid-main .rf-card, .vd-grid-2 .rf-card { margin-bottom: 0; }
.vd-col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Classement produits (podium adouci) */
.vd-prod-total { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.vd-prod-total .rf-chip { font-size: 11.5px; padding: 5px 12px; }
.vd-prod { display: flex; align-items: flex-start; gap: 12px; padding: 11px 0; border-bottom: 1px solid #F5F1FA; }
.vd-prod:last-of-type { border-bottom: none; }
.vd-prod-rank { width: 26px; height: 26px; border-radius: 9px; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; background: #F4F0FB; color: var(--rf-muted); }
.vd-prod-rank.r1 { background: var(--rf-jaune-soft); color: #8A6D00; }
.vd-prod-rank.r2 { background: var(--rf-violet-soft); color: var(--rf-violet); }
.vd-prod-rank.r3 { background: var(--rf-rose-soft); color: #B05C84; }
.vd-prod-body { flex: 1; min-width: 0; }
.vd-prod-top { display: flex; align-items: baseline; gap: 10px; font-size: 13.5px; margin-bottom: 6px; }
.vd-prod-top strong { color: var(--rf-night); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vd-prod-ca { margin-left: auto; font-weight: 700; color: var(--rf-night); white-space: nowrap; }
.vd-prod-bar { height: 8px; border-radius: 999px; background: #F1ECF9; overflow: hidden; margin-bottom: 6px; }
.vd-prod-bar > div { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #6351d0, #9181E0); min-width: 3px; }
.vd-prod-sub { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--rf-muted); }
.vd-prod-sub .rf-chip { margin-left: auto; font-size: 10.5px; padding: 3px 10px; flex-shrink: 0; }
.vd-more { display: block; width: 100%; margin-top: 12px; border: none; background: var(--rf-violet-ghost); color: var(--rf-violet); font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 12.5px; border-radius: 12px; padding: 9px; cursor: pointer; transition: background .12s; }
.vd-more:hover { background: var(--rf-violet-soft); }
.vd-more i { margin-left: 6px; font-size: 10px; }
.vd-note { font-size: 12px; color: var(--rf-muted); margin: 12px 4px 0; line-height: 1.5; }
.vd-note i { margin-right: 6px; }

/* Modes d'encaissement */
.vd-pay { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 1px solid #F5F1FA; font-size: 13.5px; }
.vd-pay:last-child { border-bottom: none; }
.vd-pay-ico { width: 32px; height: 32px; border-radius: 11px; background: var(--rf-violet-ghost); color: var(--rf-violet); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.vd-pay-name { color: var(--rf-ink); }
.vd-pay-ca { margin-left: auto; color: var(--rf-muted); font-size: 12.5px; }
.vd-pay-pct { color: var(--rf-night); width: 46px; text-align: right; }

/* Dernières ventes */
.vd-seeall { margin-left: auto; font-size: 12.5px; color: var(--rf-violet); font-weight: 600; text-decoration: none; }
.vd-sale { display: flex; align-items: center; gap: 11px; padding: 10px 2px; border-bottom: 1px solid #F5F1FA; font-size: 13px; }
.vd-sale:last-child { border-bottom: none; }
.vd-sale-ico { width: 30px; height: 30px; border-radius: 10px; background: var(--rf-violet-ghost); color: var(--rf-violet); display: flex; align-items: center; justify-content: center; font-size: 11px; flex-shrink: 0; }
.vd-sale-txt { line-height: 1.3; min-width: 0; }
.vd-sale-txt strong { color: var(--rf-night); display: block; font-size: 13px; }
.vd-sale-txt span { font-size: 11.5px; color: var(--rf-muted); }
.vd-sale-qty { margin-left: auto; font-size: 12.5px; color: var(--rf-muted); }
.vd-sale-total { color: var(--rf-night); min-width: 74px; text-align: right; }

/* Responsive */
@media (max-width: 900px) {
    .vd-hero { grid-template-columns: 1fr; gap: 20px; }
    .vd-grid-2 { grid-template-columns: 1fr; }
    .vd-grid-main { grid-template-columns: 1fr; }
    .vd-filters { margin-left: 0; width: 100%; }
    .vd-select { flex: 1; min-width: 0; }
}
@media (max-width: 560px) {
    .vd-loss { flex-wrap: wrap; }
    .vd-loss-cta { margin-left: 0; }
}

/* ============================================================
   AUTOCOMPLÉTION ENTREPRISE (SIREN/SIRET) — composant SirenAutocomplete
   ============================================================ */
.siren-ac { position: relative; }
.siren-ac-field { position: relative; display: flex; align-items: center; }
.siren-ac-ico { position: absolute; left: 14px; color: #9ca3af; font-size: 0.85rem; pointer-events: none; }
.siren-ac-input { padding-left: 2.4rem !important; }
.siren-ac-spin { position: absolute; right: 14px; color: #6351d0; width: 1rem; height: 1rem; }
.siren-ac-pop {
    position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 40;
    background: #fff; border: 1.5px solid #ECE6F8; border-radius: 14px;
    box-shadow: 0 12px 32px rgba(99, 81, 208, 0.14);
    overflow: hidden; max-height: 340px; overflow-y: auto;
}
.siren-ac-msg { padding: 14px 16px; font-size: 13px; color: #8E86A3; line-height: 1.5; }
.siren-ac-item {
    display: flex; flex-direction: column; gap: 2px; width: 100%; text-align: left;
    border: none; background: transparent; cursor: pointer;
    padding: 10px 16px; border-bottom: 1px solid #F5F1FA; font-family: 'Poppins', sans-serif;
}
.siren-ac-item:last-of-type { border-bottom: none; }
.siren-ac-item:hover { background: #F6F3FD; }
.siren-ac-item-name { font-size: 13.5px; font-weight: 600; color: #2B2350; }
.siren-ac-item-meta { font-size: 11.5px; color: #8E86A3; }
.siren-ac-closed { font-size: 10.5px; font-weight: 600; color: #B05C84; background: #F9EDF3; border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.siren-ac-credit { padding: 7px 16px; font-size: 10.5px; color: #B9AFCE; background: #FAF8FD; text-align: right; }

/* ===== Mon entreprise : aperçu du logo ===== */
.entreprise-logo-preview {
    width: 120px; height: 120px; border-radius: 16px; overflow: hidden;
    border: 1.5px solid #ECE6F8; background: #FAF8FD;
    display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.entreprise-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.entreprise-logo-empty { color: #C9BFE0; font-size: 2rem; }

/* ===== Devis : logo émetteur ===== */
.quote-sheet-logo { max-height: 64px; max-width: 200px; object-fit: contain; display: block; margin-bottom: 8px; }

/* ═══════════════════════════════════════════════════════════════════════════
   ███  REFONTE MOBILE (maquette « Refonte mobile intuitive »)  ███
   Reskin de la version téléphone conforme aux maquettes.
   TOUT est encapsulé sous @media (max-width: 768px) → desktop inchangé.
   Palette déjà dans :root (--cp-primary #6351d0, --cp-accent #FFD54F…).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Sous-titre manuscrit (police Kalam) — masqué par défaut, visible en mobile. */
.m-hand { display: none; }

@media (max-width: 768px) {

  /* ---- Tokens mobile ---- */
  :root {
    /* Hauteur RÉELLE de la barre d'onglets (bar + label). Tout ce qui est ancré
       en bas s'appuie dessus → plus aucun chevauchement avec la tab bar. */
    --bottom-nav-h: 86px;
    --m-screen-bg: #FBF6F1;              /* fond écran crème */
    --m-card-shadow: 0 8px 24px rgba(99, 81, 208, .07);
    --m-card-radius: 18px;
  }

  /* Fond crème global sur la zone de contenu (desktop garde son fond). */
  .main-area,
  .main-content { background: var(--m-screen-bg); }

  /* Filet de sécurité : aucun débordement horizontal de page en mobile.
     (clip = coupe sans créer de conteneur de scroll ni forcer overflow-y.) */
  .main-content { overflow-x: clip; }

  /* Sous-titre manuscrit rose sous les grands titres d'écran. */
  .m-hand {
    display: block;
    font-family: 'Kalam', cursive;
    color: #B05C84;
    font-size: 13px;
    line-height: 1.3;
    margin: 2px 0 14px;
  }

  /* ═══════════ BARRE D'ONGLETS NATIVE + BOUTON CENTRAL « CALCULER » ═══════════ */
  .mobile-bottom-nav {
    height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px));
    padding: 8px 6px 0;
    background: rgba(251, 246, 241, .94);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-top: 1px solid #EFE6DC;
    box-shadow: 0 -4px 20px rgba(43, 35, 80, .06);
    align-items: flex-start;
  }

  .mbn-item {
    color: #B7B0C7;
    gap: 4px;
    padding-top: 5px;
  }
  .mbn-item i { font-size: 18px; }
  .mbn-item span { font-size: 9.5px; font-weight: 600; }
  .mbn-item.active { color: var(--cp-primary); }
  /* La maquette n'a pas d'indicateur en trait : on masque l'ancien. */
  .mbn-item.active::before { display: none; }

  /* Bouton central en relief (FAB). */
  .mbn-fab {
    flex: 1 1 0;
    border: none;
    background: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    margin-top: -22px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }
  .mbn-fab-circle {
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #6351d0, #4a3a9e);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    box-shadow: 0 10px 24px rgba(99, 81, 208, .45);
    border: 4px solid var(--m-screen-bg);
    transition: transform .15s ease;
  }
  .mbn-fab-label { font-size: 9.5px; font-weight: 700; color: var(--cp-primary); }
  .mbn-fab:active .mbn-fab-circle { transform: scale(.93); }

  /* ═══════════ BULLE ASSISTANTE « LÉA » (ConciergeWidget) ═══════════ */
  .cgw-fab {
    width: 54px !important;
    height: 54px !important;
    background: linear-gradient(135deg, #6351d0, #9181E0) !important;
    box-shadow: 0 8px 22px rgba(99, 81, 208, .4) !important;
  }
  /* Pastille de notification jaune façon maquette. */
  .cgw-fab-dot {
    background: #FFD54F !important;
    border: 2.5px solid var(--m-screen-bg) !important;
  }
  /* Panneau de chat en bottom-sheet arrondi. */
  .cgw-panel:not(.cgw-expanded) {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    border-radius: 26px 26px 0 0 !important;
  }

  /* ═══════════ POLISH GÉNÉRIQUE DES CARTES (rapproche du mockup) ═══════════ */
  .cp-card,
  .rf-card,
  .rf-card-flat,
  .prod-card,
  .stat-card {
    border-radius: var(--m-card-radius);
    box-shadow: var(--m-card-shadow);
  }
}

/* ═══════════ REFONTE MOBILE · ACCUEIL (dashboard, reskin uniquement) ═══════════ */
@media (max-width: 768px) {
  /* Titre en Baloo 2 façon maquette. */
  .dash-greeting {
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-size: 1.55rem;
    color: #2B2350;
    letter-spacing: 0;
  }
  .dash-date { color: #8E86A3; }

  /* KPIs en carrousel horizontal (scroll-snap) — look natif. */
  .dash-kpis {
    display: flex;
    grid-template-columns: none;
    gap: 10px;
    overflow-x: auto;
    margin: 14px 0;
    padding: 4px 2px 10px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
  .dash-kpis::-webkit-scrollbar { display: none; }
  .dash-kpis { scrollbar-width: none; }
  .dash-kpis > * {
    flex: 0 0 auto;
    width: 156px;
    scroll-snap-align: start;
  }
  .dash-kpi { border-radius: 16px; }

  /* Cartes du dashboard : coins doux + ombre maquette. */
  .dash-card {
    border-radius: var(--m-card-radius);
    box-shadow: var(--m-card-shadow);
  }
}

/* ═══════════ REFONTE MOBILE · CALCULATEUR GUIDÉ ═══════════
   Le design system --rf-* correspond déjà à la maquette (fond crème, chips,
   notes rose/sauge, carte prix vivant). On raffine seulement l'ordre mobile :
   étapes → formulaire → PRIX VIVANT en barre compacte fixée en bas, toujours visible. */
@media (max-width: 768px) {
  .rf-guide-steps { order: 1; }
  .rf-guide-form  { order: 2; padding-bottom: 20px; }
  /* Réserve la place de la barre prix fixe + barre d'onglets sous le contenu. */
  .rf-root.rf-guide { padding-bottom: calc(220px + env(safe-area-inset-bottom, 0px)); }
  /* PRIX VIVANT : barre compacte réellement collée en bas (fixed, au-dessus des onglets). */
  .rf-price-live {
    order: 3;
    position: fixed;
    top: auto;               /* annule le top:14px hérité de la règle desktop (sinon barre étirée) */
    left: 8px;
    right: 8px;
    bottom: calc(var(--bottom-nav-h) + 8px + env(safe-area-inset-bottom, 0px));
    z-index: 25;
    padding: 11px 16px;
    border-radius: 16px;
    box-shadow: 0 -4px 16px rgba(43, 35, 80, .16), var(--rf-shadow-soft);
  }
  /* Compact : on garde le prix + sous-titre, on masque le détail (barre, légende, canaux). */
  .rf-price-live > .rf-label,
  .rf-price-live .rf-stack-bar,
  .rf-price-live .rf-legend,
  .rf-price-live .rf-price-foot,
  .rf-price-live .rf-price-divider,
  .rf-price-live .rf-channel-row { display: none; }
  .rf-price-live .rf-price-big { font-size: 25px; }
  .rf-price-live .rf-price-sub { margin-top: 2px; }
  /* Chips d'étapes : bien lisibles en scroll horizontal. */
  .rf-guide-steps .rf-step { padding: 9px 13px; font-size: 13px; }
  .rf-guide-steps .rf-step .rf-step-dot { width: 22px; height: 22px; font-size: 11px; }
}

/* ═══════════ REFONTE MOBILE · PRODUITS ═══════════
   Les lignes du tableau deviennent déjà des cartes empilées (data-label).
   On les rapproche du mockup : coins doux, vignette arrondie, prix mis en avant.
   (On conserve les actions inline edit/fiche/dupliquer/supprimer.) */
@media (max-width: 768px) {
  .prod-table tr {
    border-radius: var(--m-card-radius);
    box-shadow: var(--m-card-shadow);
    border: 1px solid rgba(99, 81, 208, .08);
    padding: 14px 16px;
  }
  .prod-table .prod-thumb,
  .prod-table .prod-thumb-empty { width: 72px; height: 72px; border-radius: 16px; }
  .prod-name { font-weight: 600; color: #2B2350; }
  .prod-table td[data-label="Prix TTC"] {
    font-family: 'Baloo 2', 'Poppins', sans-serif;
    font-weight: 700;
    color: #2B2350;
    font-size: 1.05rem;
  }
  .prod-toolbar { flex-direction: column; align-items: stretch; gap: 10px; }
}

/* ═══════════ REFONTE MOBILE · FICHE PRODUIT ═══════════ */
@media (max-width: 768px) {
  .sheet-tabs {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
    -webkit-overflow-scrolling: touch;
  }
  .sheet-tabs::-webkit-scrollbar { display: none; }
  .sheet-tabs { scrollbar-width: none; }
  .sheet-tab { flex: 0 0 auto; white-space: nowrap; border-radius: 999px; }
  .sheet-section {
    background: #fff;
    border-radius: var(--m-card-radius);
    box-shadow: var(--m-card-shadow);
    padding: 16px;
  }
}

/* ═══════════ REFONTE MOBILE · VENTES (reskin, pages séparées conservées) ═══════════ */
@media (max-width: 768px) {
  /* Encaisser (VenteRapide) : grille 3 colonnes façon caisse, comme la maquette. */
  .vr-grid { grid-template-columns: repeat(3, 1fr); gap: 9px; }
  .vr-product { border-radius: 15px; box-shadow: var(--m-card-shadow); }
  .vr-product img,
  .vr-product-placeholder { width: 46px; height: 46px; }
  .vr-product-name { font-size: 0.72rem; }

  /* Historique (Ventes) : cartes stats douces + tableau en cartes (data-label). */
  .stat-card { border-radius: 15px; box-shadow: var(--m-card-shadow); }

  /* Tableau de bord Ventes : sections empilées, cartes arrondies. */
  .vd-hero,
  .vd-grid-2,
  .vd-grid-main { grid-template-columns: 1fr; }
  .vd-filters { margin-left: 0; width: 100%; }
}

/* ═══════════ REFONTE MOBILE · ONBOARDING (plein écran façon maquette) ═══════════ */
@media (max-width: 768px) {
  .onboarding-container {
    padding: 0;
    align-items: stretch;
    background: linear-gradient(180deg, #F6F3FD 0%, #FBF6F1 55%);
  }
  .onboarding-card {
    max-width: none;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
    min-height: 100vh;
    padding: max(2.5rem, env(safe-area-inset-top)) 1.25rem 1.75rem;
  }
}

/* ═══════════ REFONTE MOBILE · CORRECTIFS CHEVAUCHEMENT & CHARGEMENT ═══════════ */
@media (max-width: 768px) {
  /* Barre d'action du calculateur complet : petit espace au-dessus des onglets. */
  .calc-bottom-bar { bottom: calc(var(--bottom-nav-h) + 6px + env(safe-area-inset-bottom, 0px)) !important; }

  /* Squelettes de chargement : bien visibles (sinon la page paraît vide sur le fond crème). */
  .skel, .skel-line { background: linear-gradient(90deg, #ECE6F5 25%, #F5F1FB 50%, #ECE6F5 75%); background-size: 200% 100%; }
  .skel-table { background: #fff; border-radius: var(--m-card-radius); box-shadow: var(--m-card-shadow); padding: 6px 12px; }
  .skel-table-row { padding: 12px 0; }
}

/* ═══════════ REFONTE MOBILE · ACTIONS RAPIDES ACCUEIL (Calculer / Encaisser) ═══════════ */
.dash-quick-actions { display: none; }
@media (max-width: 768px) {
  .dash-quick-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin: 14px 0 4px;
  }
  .dash-qa {
    display: flex;
    flex-direction: column;
    gap: 2px;
    border-radius: 16px;
    padding: 15px 14px;
    text-decoration: none;
    border: none;
  }
  .dash-qa i { font-size: 17px; margin-bottom: 6px; }
  .dash-qa-title { font-weight: 700; font-size: 13.5px; }
  .dash-qa-sub { font-size: 11px; opacity: .8; }
  .dash-qa-primary { background: #6351d0; color: #fff; box-shadow: 0 8px 20px rgba(99, 81, 208, .3); }
  .dash-qa-primary:hover { color: #fff; }
  .dash-qa-accent { background: #FFD54F; color: #2B2350; box-shadow: 0 8px 20px rgba(255, 213, 79, .4); }
  .dash-qa-accent:hover { color: #2B2350; }
  .dash-qa:active { transform: scale(.98); }
}

/* ═══════════ REFONTE MOBILE · DENSITÉ & FLUIDITÉ (toutes pages) ═══════════
   Réduit les marges/paddings volumineux hérités du desktop → moins de scroll,
   rendu plus « app native ». Défilement fluide iOS. */
@media (max-width: 768px) {
  html { scroll-behavior: smooth; }
  .main-content { -webkit-overflow-scrolling: touch; }

  /* Cartes du design system rf-* : padding compact. */
  .rf-card { padding: 18px 16px; border-radius: 20px; }
  .rf-card-flat { padding: 12px 14px; }

  /* En-têtes de page : titres + marges resserrés. */
  .rf-mach-head { margin-bottom: 14px; }
  .rf-mach-head h1 { font-size: 22px; }
  .rf-guide-head { margin-bottom: 14px; }
  .rf-guide-form { padding: 18px 16px; }
  .rf-guide-form h2 { font-size: 18px; }

  /* Cartes dashboard : padding compact + rangées resserrées. */
  .dash-card { padding: 14px; }
  .dash-row, .dash-row-3 { gap: 10px; margin-bottom: 10px; }

  /* Cartes génériques Bootstrap/cp. */
  .cp-card { padding: 14px; }

  /* Champs de formulaire : hauteur tactile confortable, pleine largeur. */
  .cp-input, .form-control, .form-select { font-size: 16px; }  /* 16px = pas de zoom auto iOS */
  .row > [class*="col-"] { margin-bottom: 10px; }
}

/* ═══════════ REFONTE MOBILE · FILET GLOBAL ANTI-DÉBORDEMENT (toutes pages) ═══════════
   Garantit qu'aucune page ne déborde horizontalement et qu'aucun contenu n'est perdu :
   médias jamais plus larges que l'écran, et tout tableau non-transformé devient
   défilable horizontalement (au lieu d'être coupé par overflow-x:clip). */
@media (max-width: 768px) {
  .main-content img,
  .main-content canvas,
  .main-content video,
  .main-content iframe { max-width: 100%; }

  .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }

  /* Tableaux Bootstrap non convertis en cartes → scroll horizontal interne. */
  .main-content table:not(.cp-table):not(.prod-table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    max-width: 100%;
  }

  .main-content pre { overflow-x: auto; max-width: 100%; }
}

/* ═══════════ REFONTE MOBILE · DEVIS (liste en cartes) ═══════════ */
@media (max-width: 768px) {
  /* La cellule d'actions : pas de label, boutons en bas de carte, pleine largeur. */
  .cp-table .devis-actions-cell::before { display: none; }
  .cp-table .devis-actions-cell {
    padding-top: 10px !important;
    margin-top: 4px;
    border-top: 1px solid #F0EAFB !important;
  }
  .cp-table .devis-actions-cell > div {
    justify-content: flex-start !important;
    flex-wrap: wrap;
    width: 100%;
    gap: 8px !important;
  }
  .cp-table .devis-actions-cell .btn { flex: 1 1 auto; }
  .cp-table .devis-actions-cell .row-menu { flex: 0 0 auto; }
  /* Numéro = titre de carte plus visible. */
  .cp-table td[data-label="Numéro"] { font-size: 1rem; color: #2B2350; }
  /* Le wrapper ne doit pas ajouter de scroll horizontal (cartes = pas de table large). */
  .devis-table-wrap { overflow-x: visible; }
}

/* ═══════════ REFONTE MOBILE · EN-TÊTE DE PAGE (action pleine largeur) ═══════════
   Le bouton d'action principal (« Nouveau devis », « Nouveau produit »…) passe en
   pleine largeur et centré sur mobile → plus lisible, plus « app », plus équilibré. */
@media (max-width: 768px) {
  .rf-head-action { width: 100%; margin-left: 0; margin-top: 4px; }
  .rf-head-action > .btn,
  .rf-head-action > a.btn { flex: 1 1 auto; justify-content: center; }

  /* Pastilles de stats Devis : masquées sur mobile (allègement, comme la maquette). */
  .devis-stats { display: none; }
}

/* =========================================================================
   ACCESSIBILITÉ : focus clavier visible partout (correctif audit UX P1)
   Placé en fin de fichier pour l'emporter sur les anciens `outline: none`.
   `:focus-visible` ne s'active qu'au clavier : la souris ne déclenche pas
   de halo, l'esthétique au clic reste inchangée.
   ========================================================================= */
*:focus-visible {
  outline: 2px solid var(--cp-primary, #6351d0);
  outline-offset: 2px;
}

/* Champs/sélecteurs qui neutralisaient leur outline sans compensation :
   on redonne un halo net au clavier (parcours guidé, pickers, tags, objectifs). */
.rf-input-text:focus-visible,
.rf-step-input:focus-visible,
.rf-select:focus-visible,
.vd-obj-inputfield:focus-visible,
.tags-input input:focus-visible,
.picker-search:focus-visible,
.calc-help:focus-visible {
  outline: 2px solid var(--cp-primary, #6351d0);
  outline-offset: 1px;
  box-shadow: 0 0 0 3px rgba(99, 81, 208, 0.18);
}

/* =========================================================================
   MOBILE : le chat des assistants ne doit plus passer sous la tab bar.
   100dvh suit la hauteur visible réelle (barre d'adresse iOS comprise) ;
   fallback 100vh pour les navigateurs sans dvh.
   ========================================================================= */
@media (max-width: 768px) {
  .ai-page {
    height: calc(100vh - var(--topbar-h, 52px) - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--topbar-h, 52px) - var(--bottom-nav-h) - env(safe-area-inset-bottom, 0px));
  }
  .ai-chat-wrapper {
    height: calc(100vh - var(--topbar-h, 52px) - var(--bottom-nav-h) - 110px - env(safe-area-inset-bottom, 0px));
    height: calc(100dvh - var(--topbar-h, 52px) - var(--bottom-nav-h) - 110px - env(safe-area-inset-bottom, 0px));
  }
}