/* ============================================================
   KOPILOT360 — Feuille de style principale
   Design system v2 — modernisation visuelle (typo, couleurs, reliefs)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

/* --- Variables globales --------------------------------------- */
:root {
    --kp-font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Couleurs de marque */
    --kp-primary:       #cc2a74;
    --kp-primary-mid:   #e35f97;
    --kp-primary-dark:  #a11f5b;
    --kp-primary-light: #fdf2f7;
    --kp-primary-soft:  #fbd9e8;

    --kp-success:      #059669;
    --kp-success-bg:   #ecfdf5;
    --kp-success-border: #a7f3d0;
    --kp-error:        #dc2626;
    --kp-error-bg:     #fef2f2;
    --kp-error-border: #fecaca;
    --kp-warning:      #d97706;
    --kp-warning-bg:   #fffbeb;

    /* Neutres */
    --kp-text:         #0f172a;
    --kp-text-muted:   #64748b;
    --kp-text-soft:    #94a3b8;
    --kp-border:       #e5e9f0;
    --kp-border-strong:#cbd5e1;
    --kp-bg:           #f7f8fc;
    --kp-white:        #ffffff;

    /* Formes & reliefs */
    --kp-radius-sm:  8px;
    --kp-radius:     14px;
    --kp-radius-lg:  20px;
    --kp-shadow-xs:  0 1px 2px rgba(15,23,42,0.05);
    --kp-shadow-sm:  0 2px 10px rgba(15,23,42,0.06);
    --kp-shadow:     0 14px 34px -12px rgba(15,23,42,0.16);
    --kp-shadow-lg:  0 26px 64px -14px rgba(15,23,42,0.22);
    --kp-transition: 0.18s cubic-bezier(.4,0,.2,1);
}

/* --- Reset minimal ------------------------------------------ */
.kopilot-form-wrapper *,
.kopilot-dashboard *,
.kopilot-page-wrapper * {
    box-sizing: border-box;
}

.kopilot-form-wrapper,
.kopilot-dashboard,
.kopilot-page-wrapper {
    font-family: var(--kp-font);
}

/* ============================================================
   FORMULAIRES (Connexion / Inscription)
   ============================================================ */

.kopilot-form-wrapper {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 60vh;
    padding: 40px 16px;
    background: var(--kp-bg);
}

.kopilot-form-card {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-lg);
    box-shadow: var(--kp-shadow);
    padding: 40px 36px;
    width: 100%;
    max-width: 440px;
}

/* Logo dans les formulaires */
.kopilot-logo {
    font-family: var(--kp-font);
    font-size: var(--kv-chiffre-sm, 26px);
    font-weight: 800;
    color: var(--kp-text);
    margin-bottom: 8px;
    letter-spacing: -0.5px;
}

.kopilot-logo span {
    background: var(--kp-brand-gradient);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.kopilot-form-card h2 {
    font-family: var(--kp-font);
    font-size: var(--kv-titre, 20px);
    font-weight: 700;
    color: var(--kp-text);
    margin: 0 0 24px 0;
    letter-spacing: -0.3px;
}

/* --- Champs de formulaire ----------------------------------- */
.kopilot-field {
    margin-bottom: 18px;
}

.kopilot-field label {
    display: block;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    color: var(--kp-text);
    margin-bottom: 6px;
}

.kopilot-field label small {
    font-weight: 400;
    color: var(--kp-text-muted);
}

.kopilot-field input,
.kopilot-field textarea,
.kopilot-field select {
    width: 100%;
    padding: 11px 14px;
    border: 1.5px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
    font-family: var(--kp-font);
    font-size: var(--kv-sous-titre, 17px);
    color: var(--kp-text);
    background: var(--kp-white);
    transition: border-color var(--kp-transition), box-shadow var(--kp-transition);
    outline: none;
}

/* Le menu deroulant est le seul champ dont la hauteur depend du theme actif :
   certains imposent une hauteur fixe qui coupe le texte en deux. On la reprend
   explicitement, et on remplace la fleche native pour que le champ ressemble
   aux autres quelle que soit la plate-forme. */
.kopilot-field select {
    height: auto;
    min-height: 46px;
    line-height: 1.45;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    padding-right: 40px;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%2364748b' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 14px 14px;
    cursor: pointer;
}

.kopilot-field input:focus,
.kopilot-field textarea:focus,
.kopilot-field select:focus {
    border-color: var(--kp-primary);
    box-shadow: 0 0 0 4px var(--kp-primary-light);
}

.kopilot-field input:disabled {
    background: var(--kp-bg);
    color: var(--kp-text-muted);
    cursor: not-allowed;
}

.kopilot-field textarea {
    resize: vertical;
    min-height: 80px;
}

/* --- Grille 2 colonnes -------------------------------------- */
.kopilot-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

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

/* ============================================================
   BOUTONS
   ============================================================ */

.kopilot-btn {
    display: inline-block;
    padding: 11px 22px;
    border-radius: var(--kp-radius-sm);
    font-family: var(--kp-font);
    font-size: var(--kv-sous-titre, 17px);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    border: none;
    transition: transform var(--kp-transition), box-shadow var(--kp-transition), background var(--kp-transition), color var(--kp-transition), border-color var(--kp-transition);
    line-height: 1;
}

.kopilot-btn-primary {
    background: var(--kp-primary, #cc2a74);
    color: var(--kp-white);
    width: 100%;
    text-align: center;
    margin-top: 8px;
    padding: 13px 22px;
    box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06));
}

.kopilot-btn-primary:hover {
    color: var(--kp-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06));
}

.kopilot-btn-secondary {
    background: var(--kp-primary-light);
    color: var(--kp-primary);
}

.kopilot-btn-secondary:hover {
    background: var(--kp-primary);
    color: var(--kp-white);
    text-decoration: none;
}

.kopilot-btn-outline {
    background: transparent;
    color: var(--kp-text-muted);
    border: 1.5px solid var(--kp-border);
}

.kopilot-btn-outline:hover {
    border-color: var(--kp-primary);
    color: var(--kp-primary);
    text-decoration: none;
}

/* Actions en bas de formulaire */
.kopilot-form-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 24px;
    flex-wrap: wrap;
}

/* Lien en bas de formulaire */
.kopilot-form-footer {
    text-align: center;
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text-muted);
    margin-top: 20px;
}

.kopilot-form-footer a {
    color: var(--kp-primary);
    text-decoration: none;
    font-weight: 600;
}

.kopilot-form-footer a:hover {
    text-decoration: underline;
}

/* ============================================================
   ALERTES
   ============================================================ */

.kopilot-alert {
    padding: 13px 16px;
    border-radius: var(--kp-radius-sm);
    font-size: var(--kv-texte, 16.5px);
    margin-bottom: 20px;
    font-weight: 500;
    border-left: 3px solid transparent;
}

.kopilot-alert-success {
    background: var(--kp-success-bg);
    color: var(--kp-success);
    border: 1px solid var(--kp-success-border);
    border-left: 3px solid var(--kp-success);
}

.kopilot-alert-error {
    background: var(--kp-error-bg);
    color: var(--kp-error);
    border: 1px solid var(--kp-error-border);
    border-left: 3px solid var(--kp-error);
}

/* ============================================================
   TABLEAU DE BORD (ancienne version)
   ============================================================ */

.kopilot-dashboard {
    max-width: 960px;
    margin: 0 auto;
    padding: 32px 16px;
}

.kopilot-dashboard-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 16px;
    flex-wrap: wrap;
}

.kopilot-greeting {
    font-size: var(--kv-sous-titre, 17px);
    color: var(--kp-text-muted);
    margin: 0 0 6px 0;
}

.kopilot-company-title {
    font-size: var(--kv-titre-page, 30px);
    font-weight: 800;
    color: var(--kp-text);
    margin: 0 0 8px 0;
    letter-spacing: -0.5px;
}

.kopilot-welcome-message {
    font-size: var(--kv-sous-titre, 17px);
    color: var(--kp-primary);
    font-weight: 600;
    margin: 0;
}

/* --- Grille de cartes --------------------------------------- */
.kopilot-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

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

.kopilot-card {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 24px;
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition), transform var(--kp-transition);
}

.kopilot-card:hover {
    box-shadow: var(--kp-shadow);
    border-color: var(--kp-primary-soft);
    transform: translateY(-2px);
}

.kopilot-card-icon {
    font-size: var(--kv-titre-page, 30px);
    margin-bottom: 12px;
}

.kopilot-card h3 {
    font-size: var(--kv-sous-titre, 17px);
    font-weight: 700;
    color: var(--kp-text);
    margin: 0 0 8px 0;
}

.kopilot-card p {
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text-muted);
    margin: 0 0 20px 0;
    line-height: 1.5;
}

/* ============================================================
   PAGES INTERNES (Entreprise / Compte)
   ============================================================ */

.kopilot-page-wrapper {
    max-width: 760px;
    margin: 0 auto;
    padding: 32px 16px;
}

.kopilot-page-header {
    margin-bottom: 28px;
}

.kopilot-page-header h2 {
    font-size: var(--kv-chiffre-sm, 26px);
    font-weight: 800;
    color: var(--kp-text);
    margin: 0 0 6px 0;
    letter-spacing: -0.4px;
}

.kopilot-page-header p {
    color: var(--kp-text-muted);
    margin: 0;
}

.kopilot-form-panel {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow-sm);
    padding: 28px;
}

/* ============================================================
   PLACEHOLDER DOCUMENTS
   ============================================================ */

.kopilot-placeholder-block {
    background: var(--kp-white);
    border: 2px dashed var(--kp-border-strong);
    border-radius: var(--kp-radius);
    padding: 48px 32px;
    text-align: center;
}

.kopilot-placeholder-icon {
    font-size: var(--kv-titre-page, 30px);
    margin-bottom: 16px;
    color: var(--kp-primary);
    opacity: 0.8;
}

.kopilot-placeholder-block h3 {
    font-size: var(--kv-titre, 20px);
    font-weight: 700;
    color: var(--kp-text);
    margin: 0 0 8px 0;
}

.kopilot-placeholder-block p {
    color: var(--kp-text-muted);
    margin: 0 0 24px 0;
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================================
   RESPONSIVE GÉNÉRAL
   ============================================================ */

@media (max-width: 480px) {
    .kopilot-form-card {
        padding: 28px 20px;
    }

    .kopilot-dashboard-header {
        flex-direction: column;
    }

    .kopilot-form-actions {
        flex-direction: column;
    }

    .kopilot-form-actions .kopilot-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   MODULE DOCUMENTS — Étape 2
   ============================================================ */

/* En-tête de la page documents */
.kopilot-docs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

/* --- Zone d'upload ------------------------------------------ */
.kopilot-upload-zone {
    background: var(--kp-primary-light);
    border: 2px dashed var(--kp-primary-soft);
    border-radius: var(--kp-radius);
    padding: 24px 28px;
    margin-bottom: 28px;
}

.kopilot-upload-zone h3 {
    font-size: var(--kv-sous-titre, 17px);
    font-weight: 700;
    color: var(--kp-text);
    margin: 0 0 16px 0;
}

.kopilot-upload-row {
    display: flex;
    gap: 16px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.kopilot-file-input-wrapper {
    flex: 1;
    min-width: 220px;
}

.kopilot-file-input-wrapper input[type="file"] {
    display: block;
    width: 100%;
    padding: 9px 12px;
    border: 1.5px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
    font-size: var(--kv-texte, 16.5px);
    background: var(--kp-white);
    cursor: pointer;
}

.kopilot-file-input-wrapper input[type="file"]:focus {
    border-color: var(--kp-primary);
    outline: none;
}

.kopilot-upload-hint {
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted);
    margin: 6px 0 0 0;
}

.kopilot-btn-upload {
    white-space: nowrap;
    width: auto !important;
    margin-top: 0 !important;
    padding: 10px 20px;
}

/* --- Tableau des documents ---------------------------------- */
.kopilot-docs-list {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: var(--kp-shadow-sm);
    overflow: visible;
}

.kopilot-docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--kv-texte, 16.5px);
}

.kopilot-docs-table thead tr {
    background: var(--kp-bg);
    border-bottom: 2px solid var(--kp-border);
}

.kopilot-docs-table th {
    padding: 12px 16px;
    text-align: left;
    font-weight: 700;
    color: var(--kp-text-muted);
    font-size: var(--kv-petit, 14.5px);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.kopilot-docs-table td {
    padding: 14px 16px;
    border-bottom: 1px solid var(--kp-border);
    vertical-align: middle;
}

.kopilot-docs-table tbody tr:last-child td {
    border-bottom: none;
}

.kopilot-docs-table tbody tr:hover {
    background: var(--kp-bg);
}

/* Nom du fichier */
.kopilot-doc-name {
    font-weight: 600;
    color: var(--kp-text);
    display: flex;
    align-items: center;
    gap: 10px;
}

.kopilot-doc-meta {
    color: var(--kp-text-muted);
    font-size: var(--kv-texte, 16.5px);
}

/* Badge extension */
.kopilot-doc-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: var(--kp-radius-sm);
    font-size: var(--kv-minuscule, 13px);
    font-weight: 700;
    letter-spacing: 0.04em;
    flex-shrink: 0;
    background: #eef1f6;
    color: #475569;
}

.kopilot-ext-pdf  { background: #fee2e2; color: var(--kp-error, #dc2626); }
.kopilot-ext-doc,
.kopilot-ext-docx { background: #dbeafe; color: #1d4ed8; }
.kopilot-ext-xls,
.kopilot-ext-xlsx { background: #dcfce7; color: var(--kp-success, #16a34a); }
.kopilot-ext-png,
.kopilot-ext-jpg,
.kopilot-ext-jpeg { background: #ffe8f2; color: #ce226a; }

/* Actions */
.kopilot-doc-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.kopilot-btn-sm {
    padding: 6px 12px;
    font-size: var(--kv-texte, 16.5px);
}

.kopilot-btn-danger {
    background: var(--kp-error-bg);
    color: var(--kp-error);
    border: 1.5px solid var(--kp-error-border);
}

.kopilot-btn-danger:hover {
    background: var(--kp-error);
    color: var(--kp-white);
    border-color: var(--kp-error);
    text-decoration: none;
}

/* État vide */
.kopilot-docs-empty {
    padding: 48px 32px;
    text-align: center;
    color: var(--kp-text-muted);
}

.kopilot-docs-empty .kopilot-placeholder-icon {
    font-size: var(--kv-titre-page, 30px);
    margin-bottom: 12px;
}

/* Compteur en bas */
.kopilot-docs-count {
    padding: 12px 16px;
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text-muted);
    border-top: 1px solid var(--kp-border);
    margin: 0;
    background: var(--kp-bg);
}

/* Responsive tableau */
@media (max-width: 640px) {
    .kopilot-docs-table thead {
        display: none;
    }
    .kopilot-docs-table tr {
        display: block;
        border-bottom: 2px solid var(--kp-border);
        padding: 12px 0;
    }
    .kopilot-docs-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px 16px;
        border-bottom: none;
    }
    .kopilot-docs-table td::before {
        content: attr(data-label);
        font-weight: 700;
        color: var(--kp-text-muted);
        font-size: var(--kv-petit, 14.5px);
        text-transform: uppercase;
        margin-right: 12px;
        flex-shrink: 0;
    }
    .kopilot-doc-actions {
        flex-direction: column;
        width: 100%;
    }
    .kopilot-doc-actions .kopilot-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================================
   ÉTAPE 3b — LAYOUT SaaS — VERSION MODERNISÉE
   ============================================================ */

/* ------------------------------------------------------------------
   Neutraliser Astra sur les pages app
   ------------------------------------------------------------------ */
body.kopilot-app-page {
    background: var(--kp-bg) !important;
    margin: 0 !important;
    padding: 0 !important;
}
body.kopilot-app-page .site-header,
body.kopilot-app-page #masthead,
body.kopilot-app-page .ast-above-header,
body.kopilot-app-page .site-footer,
body.kopilot-app-page #colophon,
body.kopilot-app-page .ast-breadcrumbs-wrapper,
body.kopilot-app-page .ast-page-title-bar,
body.kopilot-app-page .entry-header,
body.kopilot-app-page .post-navigation,
/* Menus de navigation du thème (barre horizontale) */
body.kopilot-app-page .main-navigation,
body.kopilot-app-page .site-navigation,
body.kopilot-app-page #site-navigation,
body.kopilot-app-page nav.navigation,
body.kopilot-app-page .nav-bar,
body.kopilot-app-page .navbar,
body.kopilot-app-page .wp-block-navigation,
/* Astra spécifique */
body.kopilot-app-page .ast-main-header-wrap,
body.kopilot-app-page .ast-primary-header-bar,
body.kopilot-app-page #ast-desktop-header,
body.kopilot-app-page .ast-mobile-header-wrap,
body.kopilot-app-page #ast-mobile-header,
body.kopilot-app-page .ast-desktop-header,
body.kopilot-app-page header.site-header,
/* Autres thèmes courants */
body.kopilot-app-page #header,
body.kopilot-app-page .header-wrap,
body.kopilot-app-page .top-bar,
body.kopilot-app-page #top-bar,
body.kopilot-app-page .wp-custom-header { display: none !important; }

body.kopilot-app-page #page,
body.kopilot-app-page #content,
body.kopilot-app-page #primary,
body.kopilot-app-page .site-content,
body.kopilot-app-page .ast-container,
body.kopilot-app-page .ast-article-post,
body.kopilot-app-page article.ast-article-post,
body.kopilot-app-page .ast-grid-right-section,
body.kopilot-app-page .entry-content,
body.kopilot-app-page .wp-block-group {
    padding: 0 !important;
    margin: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    float: none !important;
}

/* ------------------------------------------------------------------
   Variables du shell applicatif
   ------------------------------------------------------------------ */
:root {
    --kp-sidebar-w:         264px;
    --kp-sidebar-bg:        #ffffff;
    --kp-sidebar-border:    #fbe9f2;
    --kp-nav-text:          #64748b;
    --kp-nav-text-hover:    #1e1b4b;
    --kp-nav-active-bg:     var(--kp-primary, #cc2a74);
    --kp-nav-active-text:   #ffffff;
    --kp-nav-hover-bg:      #fdf2f7;
    --kp-accent:            #cc2a74;
    --kp-accent-light:      #fbd9e8;
    --kp-app-bg:            #fbf5f8;
    --kp-content-max:       900px;

    /* Dégradé de marque — utilisé pour les bannières et éléments forts */
    --kp-brand-gradient: linear-gradient(120deg, #7b1e63 0%, #cc2a74 52%, #f2708f 100%);
}

/* ------------------------------------------------------------------
   MODE SOMBRE — surcharge des variables (appliqué via data-theme="dark"
   sur <html>, posé par le script inline dans kopilot_render_app_layout()
   avant le premier rendu pour éviter le flash clair → sombre)
   ------------------------------------------------------------------ */
:root[data-theme="dark"] {
    /* Neutres */
    --kp-text:          #f1f5f9;
    --kp-text-muted:    #94a3b8;
    --kp-text-soft:     #64748b;
    --kp-border:        #2a2a45;
    --kp-border-strong: #3a3a5c;
    --kp-bg:            #121120;
    --kp-white:         #1b1a2b;

    /* Teintes marque, adaptées à un fond sombre */
    --kp-primary-light: #241f42;
    --kp-primary-soft:  #322a5c;

    /* États */
    --kp-success-bg:     rgba(16,185,129,0.12);
    --kp-success-border: rgba(16,185,129,0.32);
    --kp-error-bg:       rgba(239,68,68,0.12);
    --kp-error-border:   rgba(239,68,68,0.32);
    --kp-warning-bg:     rgba(217,119,6,0.14);

    --kp-shadow-xs: 0 1px 2px rgba(0,0,0,0.35);
    --kp-shadow-sm: 0 2px 10px rgba(0,0,0,0.35);
    --kp-shadow:    0 14px 34px -12px rgba(0,0,0,0.55);
    --kp-shadow-lg: 0 26px 64px -14px rgba(0,0,0,0.6);

    /* Shell applicatif */
    --kp-sidebar-bg:      #15141f;
    --kp-sidebar-border:  #2a2a45;
    --kp-nav-text:        #94a3b8;
    --kp-nav-text-hover:  #f1f5f9;
    --kp-nav-hover-bg:    #241f42;
    --kp-accent-light:    #322a5c;
    --kp-app-bg:          #0e0d17;
}

/* Petites surcharges ponctuelles : ces éléments utilisent des couleurs
   codées en dur (hors variables) et ont besoin d'un équivalent sombre. */
:root[data-theme="dark"] .kp-card:hover        { border-color: #8f3d67; }
:root[data-theme="dark"] .kp-user-company      { color: var(--kp-text); }
:root[data-theme="dark"] .kp-user-email        { color: var(--kp-text-muted); }
:root[data-theme="dark"] .kp-logout-btn        { color: var(--kp-text-muted); }
:root[data-theme="dark"] .kp-logout-btn:hover  { background: rgba(239,68,68,0.14); color: #f87171; border-color: rgba(239,68,68,0.35); }
:root[data-theme="dark"] .kp-menu-toggle       { color: #fa8bc2; }
:root[data-theme="dark"] .kp-menu-toggle:hover { background: var(--kp-accent-light); }

:root[data-theme="dark"] .kopilot-doc-badge    { background: #262640; color: #cbd5e1; }
:root[data-theme="dark"] .kopilot-ext-pdf                        { background: rgba(220,38,38,0.18); color: #fca5a5; }
:root[data-theme="dark"] .kopilot-ext-doc,
:root[data-theme="dark"] .kopilot-ext-docx                       { background: rgba(37,99,235,0.18); color: #93c5fd; }
:root[data-theme="dark"] .kopilot-ext-xls,
:root[data-theme="dark"] .kopilot-ext-xlsx                       { background: rgba(21,128,61,0.2); color: #86efac; }
:root[data-theme="dark"] .kopilot-ext-png,
:root[data-theme="dark"] .kopilot-ext-jpg,
:root[data-theme="dark"] .kopilot-ext-jpeg                       { background: rgba(126,34,206,0.2); color: #feb4d4; }

/* ------------------------------------------------------------------
   Shell
   ------------------------------------------------------------------ */
/* Le cadre de l'application.
   ----------------------------------------------------------------
   height: 100vh vaut, sur telephone, la hauteur de l'ecran SANS la barre
   d'adresse du navigateur. Comme ce cadre est fixe et coupe ce qui depasse,
   la bande du bas — celle qui porte les boutons — se retrouvait sous la
   barre, hors d'atteinte : on ne pouvait pas faire defiler jusqu'a elle.

   100dvh suit la hauteur reellement visible. La declaration en 100vh reste
   au-dessus pour les navigateurs qui ne connaissent pas dvh. */
.kp-app-shell {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    display: flex;
    z-index: 9999;
    font-family: var(--kp-font);
    background: var(--kp-app-bg);
    overflow: hidden;
}

/* ------------------------------------------------------------------
   SIDEBAR
   ------------------------------------------------------------------ */
.kp-sidebar {
    width: var(--kp-sidebar-w);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--kp-sidebar-bg);
    border-right: 1px solid var(--kp-sidebar-border);
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0; left: 0;
    z-index: 1000;
    transition: transform 0.28s cubic-bezier(.4,0,.2,1);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Logo */
.kp-sidebar-logo {
    padding: 24px 22px 20px;
    border-bottom: 1px solid var(--kp-sidebar-border);
    display: flex;
    align-items: center;
    min-height: 72px;
}

/* Carte blanche fixe derrière le logo : garantit sa visibilité quel que
   soit le fond (clair ou sombre) et quelle que soit l'image fournie
   (fond blanc, transparent, etc.), sans dépendre de deux fichiers logo. */
.kp-logo-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--kp-white, #ffffff);
    border-radius: var(--kp-radius-sm, 8px);
    padding: 8px 14px;
    box-shadow: 0 1px 3px rgba(15,23,42,0.1);
    max-width: 100%;
    box-sizing: border-box;
}

.kp-logo-img {
    /* Jamais width: 100% : dans un conteneur sans largeur de reference, le
       logo prend toute la place disponible et recouvre ses voisins. */
    width: auto;
    max-width: 170px;
    height: auto;
    display: block;
    object-fit: contain;
    filter: none;
}

/*
 * Deux logos, un seul visible.
 *
 * Le mode sombre de Kopilot360 est un reglage du client, pose en attribut sur
 * la page — ce n'est pas le mode sombre du systeme. Les deux images sont donc
 * rendues ensemble et c'est ici qu'on choisit : le bon logo est en place des
 * le premier affichage, et il ne clignote pas quand on bascule le reglage.
 */
.kp-logo-img--sombre,
.kp-topbar-logo-img--sombre { display: none; }

:root[data-theme="dark"] .kp-logo-img--clair,
:root[data-theme="dark"] .kp-topbar-logo-img--clair { display: none; }

:root[data-theme="dark"] .kp-logo-img--sombre { display: block; }
:root[data-theme="dark"] .kp-topbar-logo-img--sombre { display: inline-block; }

:root[data-theme="dark"] .kp-logo-badge {
    box-shadow: 0 1px 4px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Navigation */
.kp-sidebar-nav {
    flex: 1;
    padding: 18px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    overflow-y: auto;
}

.kp-sidebar-nav::-webkit-scrollbar { width: 5px; }
.kp-sidebar-nav::-webkit-scrollbar-track { background: transparent; }
.kp-sidebar-nav::-webkit-scrollbar-thumb { background: #e2e0f5; border-radius: 999px; }

.kp-nav-item {
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 10px 14px;
    border-radius: var(--kp-radius-sm, 8px);
    color: var(--kp-nav-text);
    text-decoration: none;
    font-family: var(--kp-font);
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    transition: background var(--kp-transition), color var(--kp-transition), transform var(--kp-transition);
    position: relative;
}

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

.kp-nav-item.kp-nav-active {
    background: var(--kp-nav-active-bg);
    color: var(--kp-nav-active-text);
    font-weight: 700;
    box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06));
    transform: translateY(-1px);
}

.kp-nav-icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.8;
}

.kp-nav-item.kp-nav-active .kp-nav-icon {
    opacity: 1;
}

.kp-nav-icon svg {
    width: 17px;
    height: 17px;
    stroke: currentColor;
}

/* Séparateur avant le footer */
.kp-sidebar-footer {
    padding: 16px 12px 20px;
    border-top: 1px solid var(--kp-sidebar-border);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Switch mode sombre */
.kp-theme-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 10px;
    border-radius: var(--kp-radius-sm, 8px);
    cursor: pointer;
    user-select: none;
    transition: background var(--kp-transition);
}

.kp-theme-toggle:hover {
    background: var(--kp-nav-hover-bg);
}

.kp-theme-toggle-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--kp-nav-text);
}

.kp-theme-toggle-icon svg { width: 16px; height: 16px; }

.kp-theme-toggle-label {
    flex: 1;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    color: var(--kp-nav-text);
}

.kp-theme-toggle-switch {
    position: relative;
    flex-shrink: 0;
    width: 36px;
    height: 20px;
}

.kp-theme-toggle-switch input {
    position: absolute;
    inset: 0;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 1;
}

.kp-theme-toggle-track {
    position: absolute;
    inset: 0;
    background: var(--kp-border-strong);
    border-radius: 999px;
    transition: background var(--kp-transition);
}

.kp-theme-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--kp-white);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform var(--kp-transition);
}

.kp-theme-toggle-switch input:checked ~ .kp-theme-toggle-track {
    background: var(--kp-brand-gradient);
}

.kp-theme-toggle-switch input:checked ~ .kp-theme-toggle-track .kp-theme-toggle-thumb {
    transform: translateX(16px);
}

.kp-user-block {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-accent-light);
}

.kp-user-avatar {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--kp-brand-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 700;
    flex-shrink: 0;
    box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06));
}

.kp-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    gap: 1px;
}

.kp-user-company {
    font-size: var(--kv-petit, 14.5px);
    font-weight: 700;
    color: #1e1b4b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.kp-user-email {
    font-size: var(--kv-petit, 14.5px);
    color: #7c7a9c;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.kp-logout-btn {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 14px;
    border-radius: var(--kp-radius-sm, 8px);
    color: var(--kp-text-muted, #64748b);
    text-decoration: none;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    border: 1px solid var(--kp-sidebar-border);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.kp-logout-btn:hover {
    background: #fef2f2;
    color: var(--kp-error, #dc2626);
    border-color: #fecaca;
    text-decoration: none;
}

.kp-logout-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* ------------------------------------------------------------------
   ZONE PRINCIPALE
   ------------------------------------------------------------------ */
.kp-main {
    flex: 1;
    margin-left: var(--kp-sidebar-w);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    /* Le defilement reste fluide sur iOS, et le bas du contenu ne passe pas
       sous la barre de gestes des telephones sans bouton. */
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom);
    display: flex;
    flex-direction: column;
    background: var(--kp-app-bg);
}

/* La barre du haut : le bouton de menu a gauche sur telephone, le compte a
   droite sur tous les ecrans. */
.kp-topbar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 0 16px;
    height: 56px;
    background: var(--kp-sidebar-bg);
    border-bottom: 1px solid var(--kp-sidebar-border);
    position: sticky;
    top: 0;
    z-index: 500;
}

/* Sur grand ecran, le logo est deja dans la barre laterale et le bouton de
   menu n'a pas lieu d'etre : la barre ne porte que le compte. */
.kp-menu-toggle,
.kp-logo-badge--topbar {
    display: none;
}

/* Les ressources : consultables, pas actionnables. Traitement plus discret
   que le compte, et separees de lui par un filet. */
.kp-ressources {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-left: auto;
    padding-right: 10px;
    border-right: 1px solid var(--kp-sidebar-border);
}

.kp-ressources__lien {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 11px;
    border-radius: var(--kp-radius-sm, 8px);
    color: var(--kp-text-muted);
    font-size: var(--kv-texte, 16.5px);
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    transition: background var(--kp-duree-courte, 140ms) var(--kp-courbe, ease),
                color var(--kp-duree-courte, 140ms) var(--kp-courbe, ease);
}

.kp-ressources__lien:hover {
    background: var(--kp-bg);
    color: var(--kp-text);
}

.kp-ressources__lien--actif {
    background: var(--kp-primary-light);
    color: var(--kp-primary-dark);
    font-weight: 600;
}

.kp-ressources__lien svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Sous 1100 px, les libelles s'effacent : quatre icones tiennent la ou
   quatre mots ne tiennent plus. */
@media (max-width: 1100px) {
    .kp-ressources__lien span { display: none; }
    .kp-ressources__lien { padding: 8px; }
}

.kp-compte {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
}

.kp-compte__lien {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 6px 12px 6px 6px;
    border-radius: 999px;
    color: var(--kp-text);
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    text-decoration: none;
    max-width: 260px;
    transition: background var(--kp-duree-courte, 140ms) var(--kp-courbe, ease);
}

.kp-compte__lien:hover,
.kp-compte__lien--actif {
    background: var(--kp-primary-light);
    color: var(--kp-primary-dark);
}

.kp-compte__pastille {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--kp-primary);
    color: #fff;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 700;
    flex-shrink: 0;
}

.kp-compte__nom {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kp-compte__sortie {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 12px;
    border-radius: var(--kp-radius-sm, 8px);
    color: var(--kp-text-muted);
    font-size: var(--kv-texte, 16.5px);
    text-decoration: none;
    transition: color var(--kp-duree-courte, 140ms) var(--kp-courbe, ease),
                background var(--kp-duree-courte, 140ms) var(--kp-courbe, ease);
}

.kp-compte__sortie:hover {
    background: var(--kp-bg);
    color: var(--kp-error);
}

.kp-compte__sortie svg { width: 17px; height: 17px; flex-shrink: 0; }

/* Le mot « Deconnexion » disparait sous 640 px : l'icone suffit, et le nom
   de l'entreprise merite la place. */
@media (max-width: 640px) {
    /* Sur telephone il n'y a de place que pour des icones. Le nom de
       l'entreprise s'efface — on sait chez qui on est — et la pastille
       suffit a designer le compte. */
    .kp-compte__sortie span,
    .kp-compte__nom { display: none; }

    .kp-ressources { padding-right: 6px; gap: 0; }
    .kp-ressources__lien { padding: 7px 6px; }
    .kp-compte { margin-left: 6px; }
    .kp-compte__lien { padding: 4px; }
    .kp-topbar { gap: 8px; padding: 0 10px; }
}

.kp-logo-badge--topbar {
    padding: 5px 10px;
}

.kp-topbar-logo-img {
    height: 30px;
    width: auto;
    object-fit: contain;
    filter: none;
}

.kp-menu-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    color: #4338ca;
    /* L'affichage est decide plus haut et dans la requete media : ce bouton
       n'existe que sur les ecrans etroits, ou la barre laterale est repliee. */
    align-items: center;
    border-radius: var(--kp-radius-sm, 8px);
    transition: background 0.15s;
}

.kp-menu-toggle:hover { background: var(--kp-accent-light); }

.kp-menu-toggle svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
}

/* Zone de contenu */
.kp-content {
    padding: 40px 48px;
    max-width: calc(var(--kp-content-max) + 96px);
    width: 100%;
    flex: 1;
    position: relative;
}

/* ------------------------------------------------------------------
   EN-TÊTE DE PAGE
   ------------------------------------------------------------------ */
.kp-page-header {
    position: relative;
    margin-bottom: 28px;
    padding: 34px 38px;
    border-radius: var(--kp-radius-lg);
    background: var(--kp-brand-gradient);
    overflow: hidden;
    box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06));
    isolation: isolate;
}

/* Détails visuels — halos décoratifs dans la bannière, façon "aurora" */
.kp-page-header::before,
.kp-page-header::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
}

.kp-page-header::before {
    width: 340px;
    height: 340px;
    top: -180px;
    right: -60px;
    background: radial-gradient(circle, rgba(255,255,255,0.28), transparent 70%);
}

.kp-page-header::after {
    width: 260px;
    height: 260px;
    bottom: -160px;
    left: 10%;
    background: radial-gradient(circle, rgba(236,72,153,0.35), transparent 70%);
    filter: blur(2px);
}

.kp-page-header h1 {
    font-family: var(--kp-font);
    font-size: var(--kv-titre-page, 30px);
    font-weight: 800;
    color: #ffffff;
    margin: 6px 0 4px;
    letter-spacing: -0.4px;
    line-height: 1.2;
}

.kp-greeting {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--kv-petit, 14.5px);
    font-weight: 700;
    color: #ffffff;
    background: rgba(255,255,255,0.16);
    border: 1px solid rgba(255,255,255,0.22);
    padding: 4px 12px;
    border-radius: 999px;
    margin: 0;
}

.kp-greeting strong {
    color: #ffffff;
}

.kp-subtitle {
    font-size: var(--kv-texte, 16.5px);
    color: rgba(255,255,255,0.82);
    margin: 0;
}

/* ------------------------------------------------------------------
   CARTES DE NAVIGATION (Dashboard)
   ------------------------------------------------------------------ */
.kp-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* Conteneur des blocs pleine largeur injectés par les extensions
   (ex: Performances de l'entreprise) — affiché APRES la grille 3 colonnes,
   jamais a l'interieur. */
.kp-cards-fullwidth {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
}

.kp-card {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 0;
    transition: box-shadow var(--kp-transition), border-color var(--kp-transition), transform var(--kp-transition);
    cursor: default;
}

.kp-card:hover {
    box-shadow: var(--kp-shadow);
    border-color: #fed6ea;
    transform: translateY(-3px);
}

.kp-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.kp-card-icon-wrap {
    width: 44px;
    height: 44px;
    border-radius: var(--kp-radius, 14px);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #ffffff;
}

.kp-card-icon-wrap svg { width: 21px; height: 21px; }

.kp-card-icon-wrap--blue   { background: var(--kp-primary-light, #fdf2f7); box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06)); }
.kp-card-icon-wrap--indigo { background: var(--kp-primary-light, #fdf2f7); box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06)); }
.kp-card-icon-wrap--slate  { background: var(--kp-primary-light, #fdf2f7); box-shadow: 0 8px 16px -6px rgba(15,23,42,0.45); }

.kp-card-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--kv-petit, 14.5px);
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 999px;
    white-space: nowrap;
}

.kp-card-badge--neutral {
    background: var(--kp-accent-light);
    color: var(--kp-accent);
}

.kp-card-badge--neutral::before {
    content: '';
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    opacity: 0.7;
}

.kp-card h3 {
    font-family: var(--kp-font);
    font-size: var(--kv-sous-titre, 17px);
    font-weight: 700;
    color: var(--kp-text);
    margin: 0 0 8px;
}

.kp-card p {
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text-muted);
    margin: 0;
    line-height: 1.55;
    flex: 1;
}

.kp-card-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 18px;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 700;
    color: var(--kp-accent);
    text-decoration: none;
    transition: gap 0.15s;
}

.kp-card-link:hover {
    text-decoration: none;
    gap: 8px;
    color: var(--kp-primary-dark);
}

/* ------------------------------------------------------------------
   UTILITAIRES PARTAGÉS
   ------------------------------------------------------------------ */
.kp-divider {
    margin: 24px 0;
    border: none;
    border-top: 1px solid var(--kp-border);
}

.kp-hint {
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text-soft);
    margin: 0 0 16px;
}

.kp-docs-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 16px;
}

/* ------------------------------------------------------------------
   OVERLAY MOBILE
   ------------------------------------------------------------------ */
.kp-sidebar-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(8,10,20,0.6);
    backdrop-filter: blur(2px);
    z-index: 999;
}

.kp-overlay-visible { display: block; }

/* ------------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------------ */
@media (max-width: 1024px) {
    .kp-content { padding: 32px 32px; }
}

@media (max-width: 768px) {
    .kp-sidebar { transform: translateX(-100%); }
    .kp-sidebar.kp-sidebar-open { transform: translateX(0); }
    .kp-main { margin-left: 0; }
    .kp-menu-toggle { display: inline-flex; }

    /*
     * Le logo ne revient pas dans la barre du haut sur telephone.
     *
     * Il y etait rallume ici, et il debordait : la pastille blanche heritait
     * de width: 100% sans largeur de reference, prenait la moitie de l'ecran
     * et recouvrait le champ de recherche. Au-dela du defaut d'affichage, il
     * n'avait rien a y faire — la barre laterale le porte deja, et sur 390
     * points de large chaque element doit gagner sa place. Celui-ci ne la
     * gagnait pas : il disait le nom de l'application a quelqu'un qui vient
     * de l'ouvrir.
     */
    .kp-logo-badge--topbar { display: none; }
    .kp-content { padding: 20px 16px; }
    .kp-cards-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .kp-content { padding: 16px 12px; }
    .kp-page-header h1 { font-size: var(--kv-chiffre-sm, 26px); }
}

/* ============================================================
   Bloc entreprise de la barre laterale — devenu un lien
   ------------------------------------------------------------
   « Mon entreprise » ne figure plus dans le menu une fois la
   fiche remplie. C'est ici qu'on y revient, discretement.
   ============================================================ */

.kp-user-block--lien {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
    transition: background-color .15s ease;
}

.kp-user-block--lien:hover {
    background: var(--kp-primary-light, #fdf2f7);
}

/* La fleche reste visible : un lien qui ne se signale qu'au survol
   n'est pas un lien, c'est une devinette. */
.kp-user-block__fleche {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--kp-text-muted, #94a3b8);
    opacity: .7;
    transition: opacity .15s ease, transform .15s ease;
}

.kp-user-block--lien:hover .kp-user-block__fleche {
    opacity: 1;
    transform: translateX(2px);
}

/* A la place de l'adresse de courriel, qui n'apprenait rien : ce que fait
   le bloc quand on clique dessus. */
.kp-user-block__action {
    color: var(--kp-primary, #cc2a74) !important;
    font-weight: 600;
}

/* --- Renvoi vers une autre rubrique ------------------------------- */

.kopilot-renvoi {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 26px;
    padding: 16px 18px;
    border: 1px solid var(--kp-border, #e2e8f0);
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-white, #fff);
    color: inherit;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.kopilot-renvoi:hover {
    border-color: var(--kp-primary, #cc2a74);
    box-shadow: var(--kp-shadow-sm, 0 2px 10px rgba(15,23,42,0.06));
    transform: translateY(-1px);
}

.kopilot-renvoi__icone {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-primary-light, #fdf2f7);
    color: var(--kp-primary, #cc2a74);
}

.kopilot-renvoi__texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.kopilot-renvoi__texte strong {
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    color: var(--kp-text, #0f172a);
}

.kopilot-renvoi__texte span {
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.5;
    color: var(--kp-text-muted, #64748b);
}

.kopilot-renvoi__fleche {
    margin-left: auto;
    flex-shrink: 0;
    color: var(--kp-text-muted, #94a3b8);
}

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