/*
 * Couche commune de l'interface Kopilot360.
 *
 * Ce fichier ne dessine aucun module. Il pose les regles que tous les modules
 * partagent : la duree des animations, le respect du reglage systeme
 * « animations reduites », le contour de focus au clavier, les silhouettes de
 * chargement, l'etat vide, la phrase d'explication en haut de page, et la
 * feuille d'impression.
 *
 * Avant ce fichier, chaque module ecrivait ses propres animations avec ses
 * propres durees. C'est ce qui faisait sentir que le produit etait assemble de
 * plusieurs mains.
 *
 * Il se charge APRES kopilot.css et n'utilise « !important » que la ou il
 * doit reprendre la main sur le theme.
 */

:root {
    /* Trois durees, pas une de plus. */
    --kp-duree-courte: 150ms; /* survol, bouton, bascule */
    --kp-duree:        250ms; /* panneau, onglet, apparition */
    --kp-duree-longue: 420ms; /* trace d'une courbe, compteur */

    /* Une seule courbe d'acceleration pour tout le produit. */
    --kp-courbe:       cubic-bezier(.4, 0, .2, 1);
    --kp-courbe-sortie: cubic-bezier(.4, 0, 1, 1);
}

/* ============================================================
   1. ANIMATIONS REDUITES
   ============================================================

   Les systemes d'exploitation proposent tous un reglage « reduire les
   animations ». Certaines personnes en ont besoin : les mouvements amples
   declenchent chez elles des nausees ou des migraines. On neutralise alors
   tout ce qui bouge, sans rien casser : les elements restent visibles, ils
   arrivent simplement d'un coup.
*/

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

    .kp-anime-arrivee,
    .kp-main > * {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================================
   2. NAVIGATION AU CLAVIER
   ============================================================

   « :focus-visible » ne se declenche qu'au clavier : la souris ne dessine
   donc pas de contour. Le rose de la marque sert de repere, double d'un halo
   blanc pour rester lisible sur les fonds sombres.
*/

.kp-app-shell :focus-visible,
.kopilot-auth-page :focus-visible {
    outline: 2px solid var(--kp-primary, #cc2a74);
    outline-offset: 2px;
    border-radius: var(--kp-radius-sm, 8px);
}

/* Le contour ne doit jamais etre rogne par un conteneur qui masque. */
.kp-app-shell a:focus-visible,
.kp-app-shell button:focus-visible {
    position: relative;
    z-index: 2;
}

/* Lien d'evitement : invisible jusqu'a ce qu'on tabule dessus. */
.kp-evitement {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: 10px 18px;
    background: var(--kp-primary, #cc2a74);
    color: #fff;
    font-weight: 600;
    border-radius: 0 0 var(--kp-radius-sm, 8px) 0;
    text-decoration: none;
}

.kp-evitement:focus {
    left: 0;
}

/* ============================================================
   3. ARRIVEE DE LA PAGE
   ============================================================

   Chaque clic recharge toute la page. Sans rien, c'est un blanc puis tout
   qui revient d'un coup : la sensation d'un site web, pas d'une application.
   Un fondu tres court sur la zone de contenu suffit a effacer cette
   impression. La barre laterale ne bouge pas : elle est le point fixe.
*/

.kp-main {
    animation: kp-arrivee var(--kp-duree) var(--kp-courbe) both;
}

@keyframes kp-arrivee {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: none; }
}

/* ============================================================
   4. SILHOUETTES DE CHARGEMENT
   ============================================================

   Une roue qui tourne ne dit rien de ce qui arrive. Une silhouette grise a
   la forme du contenu attendu fait paraitre l'attente deux fois plus courte,
   parce que l'oeil a deja la mise en page.
*/

.kp-squelette {
    position: relative;
    overflow: hidden;
    background: #eef1f6;
    border-radius: var(--kp-radius-sm, 8px);
    color: transparent !important;
    user-select: none;
    pointer-events: none;
}

.kp-squelette::after {
    content: "";
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .72), transparent);
    animation: kp-balayage 1.3s var(--kp-courbe) infinite;
}

@keyframes kp-balayage {
    to { transform: translateX(100%); }
}

.kp-squelette--titre  { height: 22px; width: 42%; margin-bottom: 14px; }
.kp-squelette--ligne  { height: 13px; width: 100%; margin-bottom: 9px; }
.kp-squelette--courte { width: 62%; }
.kp-squelette--carte  { height: 116px; border-radius: var(--kp-radius, 14px); }
.kp-squelette--chiffre{ height: 34px; width: 120px; }

.kp-squelette-groupe {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}

/* ============================================================
   5. ETAT VIDE
   ============================================================

   Un module sans donnees est le premier ecran que voit un nouveau client.
   Un tableau a zero ligne a l'air casse ; une page qui explique ce qu'elle
   va montrer et propose une seule action a l'air d'un produit.
*/

.kp-vide {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 56px 28px;
    background: var(--kp-white, #fff);
    border: 1px dashed var(--kp-border-strong, #cbd5e1);
    border-radius: var(--kp-radius-lg, 20px);
}

.kp-vide__illustration {
    width: 54px;
    height: 54px;
    margin-bottom: 20px;
    color: var(--kp-primary, #cc2a74);
    opacity: .5;
}

.kp-vide__illustration svg {
    width: 100%;
    height: 100%;
    display: block;
}

.kp-vide__titre {
    margin: 0 0 8px;
    font-size: var(--kv-titre, 20px);
    font-weight: 700;
    color: var(--kp-text, #0f172a);
    letter-spacing: -.2px;
}

.kp-vide__texte {
    margin: 0;
    max-width: 44ch;
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-vide__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    padding: 11px 20px;
    background: var(--kp-primary, #cc2a74);
    color: #fff;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    text-decoration: none;
    border: none;
    border-radius: var(--kp-radius-sm, 8px);
    cursor: pointer;
    transition: background var(--kp-duree-courte) var(--kp-courbe),
                transform var(--kp-duree-courte) var(--kp-courbe);
}

.kp-vide__action:hover {
    background: var(--kp-primary-dark, #a11f5b);
    transform: translateY(-1px);
    color: #fff;
}

.kp-vide__aide {
    margin-top: 14px;
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-soft, #94a3b8);
}

/* ============================================================
   6. PHRASE D'EXPLICATION
   ============================================================

   Une ligne en haut de chaque module, qui dit a quoi la page sert. Rien de
   plus : ni astuce, ni nouveaute, ni publicite pour un autre ecran.
*/

.kp-intro {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    margin: 0 0 22px;
    padding: 13px 17px;
    background: var(--kp-primary-light, #fdf2f7);
    border: 1px solid var(--kp-primary-soft, #fbd9e8);
    border-radius: var(--kp-radius, 14px);
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.55;
    color: var(--kp-text, #0f172a);
}

.kp-intro__marque {
    flex: 0 0 auto;
    width: 17px;
    height: 17px;
    margin-top: 1px;
    color: var(--kp-primary, #cc2a74);
}

.kp-intro__marque svg { width: 100%; height: 100%; display: block; }

.kp-intro p { margin: 0; }

/* ============================================================
   7. CHIFFRES ET COURBES ANIMES
   ============================================================

   Deux effets seulement, une fois a l'ouverture, jamais au survol.
*/

[data-kp-compteur] {
    font-variant-numeric: tabular-nums;
}

.kp-trace {
    stroke-dasharray: var(--kp-longueur, 1000);
    stroke-dashoffset: var(--kp-longueur, 1000);
    animation: kp-tracer var(--kp-duree-longue) var(--kp-courbe) forwards;
}

@keyframes kp-tracer {
    to { stroke-dashoffset: 0; }
}

/*
 * Apparition douce d'un bloc quand il entre a l'ecran.
 *
 * Le bloc n'est JAMAIS masque par la feuille de style : c'est le JavaScript
 * qui le cache au moment ou il prend la main. Si le fichier ne se charge pas,
 * ou si la personne a reduit les animations, le contenu reste simplement
 * visible — une animation ratee ne doit jamais faire disparaitre du contenu.
 */
.kp-anime-arrivee.kp-visible {
    opacity: 1;
    transform: none;
    transition: opacity var(--kp-duree) var(--kp-courbe),
                transform var(--kp-duree) var(--kp-courbe);
}

/* ============================================================
   8. IMPRESSION
   ============================================================

   Un bilan ou une facture imprimee sortait avec le menu lateral, la barre de
   recherche et les boutons. On ne garde que le contenu.
*/

@media print {
    .kp-sidebar,
    .kp-topbar,
    .krech,
    .kp-intro,
    .kp-vide__action,
    .kpchat,
    .kp-mobile-toggle,
    .kp-sidebar-toggle,
    button,
    .kp-btn,
    .kp-tabs,
    nav {
        display: none !important;
    }

    .kp-app-shell,
    .kp-main {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: none !important;
        background: var(--kp-white, #ffffff) !important;
        animation: none !important;
    }

    .kp-card,
    .kp-panel,
    .kp-section {
        box-shadow: none !important;
        border: 1px solid #d5d9e0 !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }

    a[href]::after {
        content: "";
    }

    body {
        background: var(--kp-white, #ffffff) !important;
        font-size: 11.5pt;
        color: #000;
    }
}

/* ============================================================
   9. ACCÈS EN CONSULTATION (EXPERT-COMPTABLE)
   ============================================================

   Le bandeau doit être vu sans être lu : un comptable qui ouvre cinq
   dossiers dans la journée doit savoir d'un coup d'œil où il est.
*/

.kp-lecture {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 12px 16px;
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-primary-light, #fdf2f7);
    border: 1px solid var(--kp-primary-soft, #fbd9e8);
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text, #0f172a);
}

.kp-lecture p { margin: 0; flex: 1 1 260px; }

.kp-lecture__marque {
    display: inline-flex;
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--kp-primary, #cc2a74);
}

.kp-lecture__marque svg { width: 100%; height: 100%; }

.kp-lecture__choix {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    padding: 6px 10px;
    border-radius: var(--kp-radius-sm, 8px);
    border: 1px solid var(--kp-primary-soft, #fbd9e8);
    background: var(--kp-white, #fff);
    color: var(--kp-text, #0f172a);
    max-width: 240px;
}

/* --- Inviter son comptable ---------------------------------------- */

.kp-comptable__aide {
    margin: 0 0 16px;
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-comptable__liste {
    list-style: none;
    margin: 0 0 18px;
    padding: 0;
}

.kp-comptable__liste li {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 11px 0;
    border-bottom: 1px solid var(--kp-border, #e5e9f0);
}

.kp-comptable__liste li:last-child { border-bottom: 0; }

.kp-comptable__nom   { font-weight: 600; font-size: var(--kv-texte, 16.5px); }
.kp-comptable__email { color: var(--kp-text-muted, #64748b); font-size: var(--kv-texte, 16.5px); flex: 1 1 auto; }

.kp-comptable__retirer {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    padding: 6px 12px;
    border-radius: var(--kp-radius-sm, 8px);
    border: 1px solid var(--kp-border, #e5e9f0);
    background: transparent;
    color: var(--kp-text-muted, #64748b);
    cursor: pointer;
    transition: border-color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease),
                color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-comptable__retirer:hover {
    border-color: var(--kp-error-border, #fecaca);
    color: var(--kp-error, #dc2626);
}

.kp-comptable__forme label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    color: var(--kp-text, #0f172a);
}

.kp-comptable__champs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kp-comptable__champs input {
    flex: 1 1 240px;
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    padding: 10px 12px;
    border-radius: var(--kp-radius-sm, 8px);
    border: 1px solid var(--kp-border, #e5e9f0);
    background: var(--kp-white, #fff);
    color: var(--kp-text, #0f172a);
}

.kp-comptable__champs button {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-primary, #cc2a74);
    color: #fff;
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-comptable__champs button:hover { background: var(--kp-primary-dark, #a11f5b); }

.kp-comptable__message {
    margin: 12px 0 0;
    font-size: var(--kv-texte, 16.5px);
}

.kp-comptable__message--ok     { color: var(--kp-success, #059669); }
.kp-comptable__message--erreur { color: var(--kp-error, #dc2626); }

/* ============================================================
   10. REPRENDRE L'EXISTANT (IMPORT D'UN TABLEUR)
   ============================================================ */

.kp-reprise__aide {
    margin: 0 0 16px;
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-reprise__forme {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    align-items: center;
}

.kp-reprise__fichier {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: var(--kp-radius-sm, 8px);
    border: 1px dashed var(--kp-border-strong, #cbd5e1);
    background: var(--kp-bg, #f7f8fc);
    color: var(--kp-text, #0f172a);
    font-size: var(--kv-texte, 16.5px);
    cursor: pointer;
    transition: border-color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease),
                background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-reprise__fichier:hover {
    border-color: var(--kp-primary, #cc2a74);
    background: var(--kp-primary-light, #fdf2f7);
}

.kp-reprise__forme select {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    padding: 10px 12px;
    border-radius: var(--kp-radius-sm, 8px);
    border: 1px solid var(--kp-border, #e5e9f0);
    background: var(--kp-white, #fff);
    color: var(--kp-text, #0f172a);
}

.kp-reprise__apercu {
    margin-top: 18px;
    padding: 16px 18px;
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-bg, #f7f8fc);
    border: 1px solid var(--kp-border, #e5e9f0);
}

.kp-reprise__resume { margin: 0 0 12px; font-size: var(--kv-texte, 16.5px); line-height: 1.6; }

.kp-reprise__exemples {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text-muted, #64748b);
}

.kp-reprise__exemples li {
    padding: 5px 0;
    border-bottom: 1px solid var(--kp-border, #e5e9f0);
}

.kp-reprise__exemples li:last-child { border-bottom: 0; }

/*
 * Ce que Kopilot360 a deduit faute d'information dans le fichier : une
 * echeance posee au delai legal, un montant repris sans TVA. Ce n'est pas une
 * erreur, et ca ne doit pas en avoir l'air — mais ca doit se voir avant que le
 * dirigeant appuie sur « Importer », pas apres.
 */
.kp-reprise__alerte {
    margin: 0 0 10px;
    padding: 9px 12px;
    border-left: 3px solid var(--kp-primary, #cc2a74);
    border-radius: 0 var(--kp-radius-sm, 8px) var(--kp-radius-sm, 8px) 0;
    background: var(--kp-primary-light, #fdf2f7);
    font-size: var(--kv-petit, 15.5px);
    line-height: 1.55;
    color: var(--kp-text, #0f172a);
}

.kp-reprise__valider {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-primary, #cc2a74);
    color: #fff;
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-reprise__valider:hover:not(:disabled) { background: var(--kp-primary-dark, #a11f5b); }
.kp-reprise__valider:disabled { opacity: .6; cursor: default; }

.kp-reprise__message { margin: 14px 0 0; font-size: var(--kv-texte, 16.5px); }
.kp-reprise__message--ok     { color: var(--kp-success, #059669); }
.kp-reprise__message--erreur { color: var(--kp-error, #dc2626); }
.kp-reprise__message--info   { color: var(--kp-text-muted, #64748b); }

/* ============================================================
   11. PARTIR AVEC SES DONNÉES
   ============================================================ */

.kp-export__aide,
.kp-export__note {
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-export__aide { margin: 0 0 16px; font-size: var(--kv-texte, 16.5px); }
.kp-export__note { margin: 12px 0 0; font-size: var(--kv-petit, 14.5px); }

.kp-export__bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-white, #fff);
    border: 1px solid var(--kp-border-strong, #cbd5e1);
    color: var(--kp-text, #0f172a);
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    text-decoration: none;
    transition: border-color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease),
                color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-export__bouton:hover {
    border-color: var(--kp-primary, #cc2a74);
    color: var(--kp-primary, #cc2a74);
}

/* ============================================================
   12. JOURNAL DES MODIFICATIONS
   ============================================================ */

.kp-journal__aide {
    margin: 0 0 16px;
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-journal__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kp-journal__ligne {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    gap: 14px;
    align-items: baseline;
    padding: 9px 0;
    border-bottom: 1px solid var(--kp-border, #e5e9f0);
    font-size: var(--kv-texte, 16.5px);
}

.kp-journal__ligne:last-child { border-bottom: 0; }

.kp-journal__quand {
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
}

.kp-journal__quoi { color: var(--kp-text, #0f172a); }

.kp-journal__qui {
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .kp-journal__ligne { grid-template-columns: 1fr auto; }
    .kp-journal__quand { grid-column: 1 / -1; order: -1; }
}

/* ============================================================
   13. BOÎTE À FACTURES
   ============================================================ */

.kp-boite__aide,
.kp-boite__note {
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-boite__aide { margin: 0 0 16px; font-size: var(--kv-texte, 16.5px); }
.kp-boite__note { margin: 12px 0 0; font-size: var(--kv-petit, 14.5px); }

.kp-boite__adresse {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.kp-boite__adresse code {
    flex: 1 1 260px;
    padding: 11px 14px;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-bg, #f7f8fc);
    border: 1px solid var(--kp-border, #e5e9f0);
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text, #0f172a);
    overflow-wrap: anywhere;
}

.kp-boite__adresse button {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    padding: 10px 18px;
    border: 0;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-primary, #cc2a74);
    color: #fff;
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-boite__adresse button:hover { background: var(--kp-primary-dark, #a11f5b); }

/* ============================================================
   14. GRAPHIQUES
   ============================================================

   Une seule gamme de couleur, tirée du rose Alegia, du clair au foncé. Les
   couleurs d'état (vert, orange, rouge) n'entrent pas dans cette gamme :
   elles veulent dire quelque chose, et une donnée n'a pas d'état.

   Le mode sombre n'est pas un basculement automatique : les teintes claires
   du rose deviennent illisibles sur fond noir, on remonte donc d'un cran
   dans la gamme plutôt que d'inverser.
*/

:root {
    --kp-graph-trace:   #cc2a74;
    --kp-graph-retrait: #94a3b8;
    --kp-graph-piste:   #fbd9e8;
    --kp-graph-grille:  #e5e9f0;
    --kp-graph-fond:    #ffffff;
}

/* Le mode sombre de Kopilot360 est un choix explicite de l'utilisateur, posé
   sur la balise <html> : c'est ce sélecteur-là qu'il faut suivre, pas le
   réglage du système, sinon on contredirait le bouton. */
:root[data-theme="dark"] {
    --kp-graph-trace:   #e35f97;
    --kp-graph-retrait: #64748b;
    --kp-graph-piste:   #3a2340;
    --kp-graph-grille:  #2a2a45;
    --kp-graph-fond:    #1b1a2b;
}

.kgraph {
    margin: 0;
}

.kgraph__titre {
    margin: 0 0 14px;
    font-size: var(--kv-sous-titre, 17px);
    font-weight: 600;
    color: var(--kp-text, #0f172a);
}

.kgraph__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
}

.kgraph__grille {
    stroke: var(--kp-graph-grille, #e5e9f0);
    stroke-width: 1;
}

/* Le texte ne porte jamais la couleur de la donnée. */
.kgraph__echelle,
.kgraph__date {
    fill: var(--kp-text-muted, #64748b);
    font-size: var(--kv-minuscule, 13px);
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}

.kgraph__echelle { text-anchor: end; }

.kgraph__valeur {
    fill: var(--kp-text, #0f172a);
    font-size: var(--kv-petit, 14.5px);
    font-weight: 600;
    font-family: inherit;
}

/*
 * Les valeurs des autres periodes.
 *
 * Elles sont toutes ecrites — sans elles, un graphique ne se lit pas : on
 * voyait « 67 visites, moitie moins que le mois precedent » sans pouvoir
 * savoir ce qu'avait fait juin. Mais la hierarchie reste : la periode mise
 * en avant garde le noir et le gras, les autres passent en gris et en
 * maigre, pour qu'une douzaine de chiffres n'en fasse pas un mur.
 */
.kgraph__valeur--discrete {
    fill: var(--kp-text-muted, #64748b);
    font-size: var(--kv-minuscule, 13px);
    font-weight: 500;
}

/* Un chiffre pose a l'interieur de sa colonne, faute de place au-dessus. */
.kgraph__valeur--dedans { fill: var(--kp-white, #fff); }

.kgraph__legende {
    margin: 12px 0 0;
    font-size: var(--kv-petit, 14.5px);
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

/* --- Colonnes ------------------------------------------------------ */

/* Quand une colonne est le sujet, les autres reculent : c'est plus lisible
   que douze colonnes qui se disputent l'attention. */
.kgraph__colonne {
    fill: var(--kp-graph-retrait, #94a3b8);
    transition: fill var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kgraph__colonne--avant { fill: var(--kp-graph-trace, #cc2a74); }

.kgraph--colonnes svg:hover .kgraph__colonne:hover { fill: var(--kp-graph-trace, #cc2a74); }

/* --- Barres horizontales ------------------------------------------- */

.kgraph-barres__liste {
    list-style: none;
    margin: 0;
    padding: 0;
}

.kgraph-barres__ligne {
    display: grid;
    grid-template-columns: minmax(132px, 1.3fr) minmax(72px, 1.8fr) auto;
    gap: 14px;
    align-items: center;
    padding: 9px 0;
}

/*
 * Le libelle tient sur deux lignes, et non sur une seule coupee.
 *
 * Il etait tronque a la premiere ligne : « terrassement q... », « Recherche
 * nat... ». Or dans ces classements le libelle EST l'information — une
 * requete Google coupee en deux n'apprend rien, et la place economisee sur
 * la piste ne valait pas ce qu'elle cachait.
 */
.kgraph-barres__nom {
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.3;
    color: var(--kp-text, #0f172a);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.kgraph-barres__piste {
    height: 12px;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-graph-piste, #fbd9e8);
    overflow: hidden;
    display: block;
}

.kgraph-barres__remplissage {
    display: block;
    height: 100%;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-graph-trace, #cc2a74);
    min-width: 6px;
}

/* La ligne de reste recule : elle regroupe vingt clients, elle ne doit pas
   se lire comme le premier du classement. */
.kgraph-barres__ligne--retrait .kgraph-barres__remplissage {
    background: var(--kp-graph-retrait, #94a3b8);
}

.kgraph-barres__ligne--retrait .kgraph-barres__nom,
.kgraph-barres__ligne--retrait .kgraph-barres__valeur {
    color: var(--kp-text-muted, #64748b);
}

.kgraph-barres__valeur {
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    color: var(--kp-text, #0f172a);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* --- Anneau -------------------------------------------------------- */

.kgraph-anneau__corps {
    position: relative;
    max-width: 176px;
    margin: 0 auto;
}

.kgraph-anneau__svg {
    width: 100%;
    height: auto;
    display: block;
}

.kgraph-anneau__trace {
    stroke: var(--kp-graph-trace, #cc2a74);
    transition: stroke-dasharray var(--kp-duree-longue, 420ms) var(--kp-courbe, ease);
}

.kgraph-anneau__trace--attention { stroke: var(--kp-warning, #d97706); }
.kgraph-anneau__trace--alerte    { stroke: var(--kp-error, #dc2626); }

.kgraph-anneau__centre {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-align: center;
    pointer-events: none;
}

.kgraph-anneau__centre strong {
    font-size: var(--kv-chiffre-sm, 26px);
    font-weight: 600;
    color: var(--kp-text, #0f172a);
    line-height: 1.1;
}

.kgraph-anneau__centre span {
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
    max-width: 96px;
    line-height: 1.35;
}

/* --- Tuile de chiffre ---------------------------------------------- */

.kgraph-tuile {
    position: relative;
    background: var(--kp-white, #fff);
    border: 1px solid var(--kp-border, #e5e9f0);
    border-radius: var(--kp-radius, 14px);
    padding: 18px 20px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 132px;
}

.kgraph-tuile__label {
    margin: 0;
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
}

/* Un grand nombre garde les chiffres à leur largeur naturelle : forcés à la
   largeur d'un zéro, « 121 » paraît troué. */
.kgraph-tuile__valeur {
    margin: 0;
    font-size: var(--kv-titre-page, 30px);
    font-weight: 600;
    line-height: 1.15;
    color: var(--kp-text, #0f172a);
}

.kgraph-tuile__ecart,
.kgraph-tuile__detail {
    margin: 2px 0 0;
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
}

.kgraph-tuile__ecart--bon      { color: var(--kp-success, #059669); }
.kgraph-tuile__ecart--mauvais  { color: var(--kp-error, #dc2626); }
.kgraph-tuile__ecart--stable   { color: var(--kp-text-muted, #64748b); }

.kgraph-tuile__repere { color: var(--kp-text-muted, #64748b); }

.kgraph-tuile__courbe {
    margin-top: auto;
    padding-top: 10px;
}

.kgraph-courbette {
    width: 100%;
    height: 32px;
    display: block;
    overflow: visible;
}

.kgraph-courbette__trace {
    fill: none;
    stroke: var(--kp-graph-retrait, #94a3b8);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}

/* Le dernier point est celui qui compte : il porte la couleur, et un anneau
   de la couleur du fond pour ne pas se confondre avec la courbe. */
.kgraph-courbette__point {
    fill: var(--kp-graph-trace, #cc2a74);
    stroke: var(--kp-graph-fond, #fff);
    stroke-width: 2;
}

/* --- Le tableau qui double le graphique ---------------------------- */

.kgraph__tableau {
    margin-top: 14px;
    border-top: 1px solid var(--kp-border, #e5e9f0);
    padding-top: 10px;
}

.kgraph__tableau summary {
    cursor: pointer;
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
    list-style: none;
}

.kgraph__tableau summary::-webkit-details-marker { display: none; }

.kgraph__tableau summary::before {
    content: "▸";
    display: inline-block;
    margin-right: 6px;
}

.kgraph__tableau[open] summary::before { content: "▾"; }

.kgraph__tableau table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: var(--kv-texte, 16.5px);
}

.kgraph__tableau th,
.kgraph__tableau td {
    padding: 6px 8px;
    text-align: left;
    border-bottom: 1px solid var(--kp-border, #e5e9f0);
}

.kgraph__tableau td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.kgraph__tableau thead th {
    font-size: var(--kv-petit, 14.5px);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kp-text-muted, #64748b);
}

.kgraph__tableau tbody th {
    font-weight: 400;
    color: var(--kp-text, #0f172a);
}

@media (max-width: 640px) {
    /* Empilees, les tuiles n'ont plus besoin d'avoir la meme hauteur : la
       hauteur minimale ne ferait plus qu'ajouter du vide sous chacune. */
    .kgraph-tuile { min-height: 0; }

    .kgraph-barres__ligne { grid-template-columns: 1fr auto; }
    .kgraph-barres__piste { grid-column: 1 / -1; order: 3; }
    .kgraph__echelle,
    .kgraph__date { font-size: var(--kv-titre, 20px); }
    .kgraph__valeur { font-size: var(--kv-titre, 20px); }

    /*
     * Sur telephone, le graphique se fait glisser.
     *
     * Douze mois etales sur trois cent quarante points donnent des noms de
     * mois de six pixels : personne ne les lit, et les cacher revient a
     * reprendre l'information qu'on venait d'ajouter. On garde donc le
     * dessin a une largeur lisible et on laisse le doigt le parcourir, comme
     * un tableau large.
     */
    .kgraph__cadre {
        overflow-x: auto;
        /*
         * Un defilement horizontal force le navigateur a cadrer aussi en
         * hauteur. Les graduations, qui debordent legerement du dessin, s'en
         * trouvaient rognees : « 2,0 k » perdait sa moitie haute. Ces huit
         * points leur rendent la place.
         */
        padding: 8px 0;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

    .kgraph__cadre .kgraph__svg { min-width: 640px; }
}

@media print {
    .kgraph__tableau { display: none; }
    .kgraph__colonne { fill: #888 !important; }
    .kgraph__colonne--avant { fill: #333 !important; }
}

/* Le rôle, à côté du nom : sans lui on ne sait pas qui peut modifier quoi. */
.kp-comptable__role {
    font-size: var(--kv-petit, 14.5px);
    font-weight: 600;
    padding: 3px 10px;
    border-radius: var(--kp-radius-sm, 8px);
    white-space: nowrap;
}

.kp-comptable__role--collaborateur {
    background: var(--kp-primary-light, #fdf2f7);
    color: var(--kp-primary-dark, #a11f5b);
}

.kp-comptable__role--comptable {
    background: var(--kp-bg, #f7f8fc);
    color: var(--kp-text-muted, #64748b);
}

.kp-comptable__forme select {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    padding: 10px 12px;
    border-radius: var(--kp-radius-sm, 8px);
    border: 1px solid var(--kp-border, #e5e9f0);
    background: var(--kp-white, #fff);
    color: var(--kp-text, #0f172a);
}

.kp-comptable__quota {
    margin: 10px 0 0;
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
}

/* ============================================================
   15. DOUBLE VÉRIFICATION
   ============================================================ */

.kp-2fa__aide {
    margin: 0 0 16px;
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-2fa__etat {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text, #0f172a);
}

.kp-2fa__pastille {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex: 0 0 auto;
}

.kp-2fa__pastille--active   { background: var(--kp-success, #059669); }
.kp-2fa__pastille--inactive { background: var(--kp-border-strong, #cbd5e1); }

.kp-2fa__appareils {
    margin: 8px 0 0;
    font-size: var(--kv-petit, 14.5px);
    color: var(--kp-text-muted, #64748b);
}

.kp-2fa__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 16px;
}

.kp-2fa__bouton {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-primary, #cc2a74);
    color: #fff;
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-2fa__bouton:hover:not(:disabled) { background: var(--kp-primary-dark, #a11f5b); }
.kp-2fa__bouton:disabled { opacity: .6; cursor: default; }

.kp-2fa__bouton--discret {
    background: transparent;
    border: 1px solid var(--kp-border, #e5e9f0);
    color: var(--kp-text-muted, #64748b);
    font-weight: 400;
}

.kp-2fa__bouton--discret:hover:not(:disabled) {
    background: transparent;
    border-color: var(--kp-border-strong, #cbd5e1);
}

.kp-2fa__message { margin: 12px 0 0; font-size: var(--kv-texte, 16.5px); color: var(--kp-error, #dc2626); }

/* Le champ du code : six chiffres espacés, lisibles d'un coup d'œil. */
.kp-2fa__saisie {
    letter-spacing: 8px;
    text-align: center;
    font-size: var(--kv-chiffre-sm, 26px);
    font-variant-numeric: tabular-nums;
}

/* ============================================================
   16. FERMETURE DU COMPTE
   ============================================================

   Le bloc est discret tant que rien n'est engagé : c'est une action qu'on
   ne doit pas trouver par hasard, mais qu'on doit pouvoir trouver.
*/

.kp-fermeture__aide,
.kp-fermeture__consigne {
    margin: 0 0 14px;
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
    color: var(--kp-text-muted, #64748b);
}

.kp-fermeture__deplier summary {
    cursor: pointer;
    font-size: var(--kv-texte, 16.5px);
    color: var(--kp-text-muted, #64748b);
    padding: 8px 0;
}

.kp-fermeture__champs {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

.kp-fermeture__champs input {
    flex: 1 1 240px;
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    padding: 10px 12px;
    border-radius: var(--kp-radius-sm, 8px);
    border: 1px solid var(--kp-border, #e5e9f0);
    background: var(--kp-white, #fff);
    color: var(--kp-text, #0f172a);
}

.kp-fermeture__bouton {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    padding: 10px 20px;
    border: 1px solid var(--kp-error-border, #fecaca);
    border-radius: var(--kp-radius-sm, 8px);
    background: transparent;
    color: var(--kp-error, #dc2626);
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-fermeture__bouton:hover:not(:disabled) { background: var(--kp-error-bg, #fef2f2); }
.kp-fermeture__bouton:disabled { opacity: .6; cursor: default; }

/* Une fois la fermeture engagée, le bloc ne peut plus passer inaperçu. */
.kp-fermeture--engagee {
    border-color: var(--kp-error-border, #fecaca);
    background: var(--kp-error-bg, #fef2f2);
}

.kp-fermeture__avis {
    margin: 0 0 14px;
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
    color: var(--kp-text, #0f172a);
}

.kp-fermeture__annuler {
    font: inherit;
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    padding: 10px 20px;
    border: 0;
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-primary, #cc2a74);
    color: #fff;
    cursor: pointer;
}

.kp-fermeture__annuler:hover:not(:disabled) { background: var(--kp-primary-dark, #a11f5b); }

.kp-fermeture__message { margin: 12px 0 0; font-size: var(--kv-texte, 16.5px); color: var(--kp-error, #dc2626); }

/* ============================================================
   17. LE TÉLÉPHONE — FILET DE SÉCURITÉ
   ============================================================

   Chaque module a ses propres règles d'affichage sur écran étroit, et elles
   fonctionnent. Ce qui casse ailleurs est toujours la même chose : un
   tableau plus large que l'écran, qui pousse toute la page de côté. Le
   lecteur se retrouve alors à faire défiler horizontalement une page
   entière pour lire une colonne.

   Ces règles ne remplacent aucune mise en page existante : elles ne
   s'appliquent qu'en dessous de 760 pixels, et seulement à l'intérieur de
   l'application.
*/

@media (max-width: 760px) {

    /*
     * Le tableau devient une boîte qui défile toute seule. Le reste de la
     * page ne bouge plus. C'est le seul moyen sans ajouter un conteneur
     * autour de chaque tableau des vingt modules.
     */
    .kp-main table {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Une cellule ne se coupe pas au milieu d'un mot : la ligne défile. */
    .kp-main table th,
    .kp-main table td {
        white-space: nowrap;
    }

    /* Un tableau déjà dans une enveloppe défilante n'a pas besoin des deux. */
    .kp-main .ku-tableau-enveloppe table,
    .kp-main [class*="table-wrap"] table,
    .kp-main [class*="table-wrapper"] table {
        display: table;
        overflow-x: visible;
    }

    /*
     * Une adresse e-mail ou une référence sans espace est la deuxième cause
     * de débordement : elle ne peut pas revenir à la ligne toute seule.
     */
    .kp-main,
    .kp-main p,
    .kp-main li,
    .kp-main dd {
        overflow-wrap: anywhere;
    }

    /* Rien ne dépasse jamais la largeur de l'écran. */
    .kp-main img,
    .kp-main svg,
    .kp-main iframe,
    .kp-main pre {
        max-width: 100%;
        height: auto;
    }

    .kp-main pre { overflow-x: auto; }

    /* Et la page elle-même ne défile pas de côté. */
    .kp-app-shell { overflow-x: hidden; }
}

/* Le tableau qui double un graphique défile lui aussi, à toute largeur :
   il peut porter des montants longs dans une carte étroite. */
.kgraph__tableau table {
    display: block;
    overflow-x: auto;
}

/* Les trois groupes, pas deux : oublier le pied le laissait se reduire a la
   largeur de son contenu, et le total se posait a gauche sous une colonne
   alignee a droite. */
.kgraph__tableau thead,
.kgraph__tableau tbody,
.kgraph__tableau tfoot { display: table; width: 100%; }

.kgraph__tableau tfoot th,
.kgraph__tableau tfoot td {
    border-bottom: 0;
    border-top: 2px solid var(--kp-border, #e5e9f0);
    font-weight: 600;
    color: var(--kp-text, #0f172a);
}

/* ==========================================================
   18. RENVOI VERS UN ECRAN QUI A DEMENAGE
   ==========================================================
   Finance et Commercial gardent leur code, mais quatre de leurs rubriques
   sont desormais traitees ailleurs. Ce bloc le dit une fois, en haut, et
   emmene l'utilisateur au bon endroit — plutot que de le laisser chercher
   un onglet qui n'est plus la.
   ========================================================== */

.kfin-renvoi,
.kcom-renvoi {
    margin: 0 0 22px;
    padding: 16px 20px;
    border: 1px solid var(--kp-border);
    border-left: 3px solid var(--kp-primary);
    border-radius: var(--kp-radius);
    background: var(--kp-primary-light);
}

.kfin-renvoi__titre,
.kcom-renvoi__titre {
    margin: 0 0 6px;
    font-size: var(--kv-sous-titre, 17px);
    font-weight: 600;
    color: var(--kp-text);
}

.kfin-renvoi__texte,
.kcom-renvoi__texte {
    margin: 0 0 12px;
    max-width: 72ch;
    color: var(--kp-text-muted);
    font-size: var(--kv-texte, 16.5px);
    line-height: 1.6;
}

.kfin-renvoi p:last-child,
.kcom-renvoi p:last-child {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.kfin-renvoi__lien,
.kcom-renvoi__lien {
    display: inline-flex;
    align-items: center;
    padding: 8px 15px;
    border: 1px solid var(--kp-primary);
    border-radius: var(--kp-radius-sm);
    background: var(--kp-primary);
    color: var(--kp-white);
    font-size: var(--kv-texte, 16.5px);
    font-weight: 600;
    text-decoration: none;
    transition: background var(--kp-duree-courte) var(--kp-courbe);
}

.kfin-renvoi__lien:hover,
.kcom-renvoi__lien:hover {
    background: var(--kp-primary-dark);
    border-color: var(--kp-primary-dark);
    color: var(--kp-white);
}

.kfin-renvoi__lien--discret,
.kcom-renvoi__lien--discret {
    background: var(--kp-white);
    border-color: var(--kp-border-strong);
    color: var(--kp-text);
}

.kfin-renvoi__lien--discret:hover,
.kcom-renvoi__lien--discret:hover {
    background: var(--kp-bg);
    border-color: var(--kp-primary);
    color: var(--kp-primary);
}

/* ============================================================
   19. LES TABLEAUX LARGES, À TOUTE LARGEUR
   ============================================================

   Un tableau de clients porte un nom, une adresse e-mail, une ville, un
   montant, parfois un téléphone et une date. Mis bout à bout, ça dépasse la
   place disponible dès qu'on réduit la fenêtre — et le module Commercial
   était dans ce cas sur un écran ordinaire.

   Il y avait bien une enveloppe prévue pour défiler, mais le tableau qu'elle
   contient était fixé à 100 % de sa largeur : il ne dépassait donc jamais, il
   se comprimait. Les colonnes s'écrasaient, la dernière passait sous le bord,
   et comme rien ne dépassait, rien ne défilait. Le client voyait une liste
   tronquée sans aucun moyen d'atteindre le reste.

   Deux lignes suffisent : le tableau prend la largeur de son contenu, mais au
   moins celle de l'enveloppe. Il remplit donc l'espace quand il tient, et le
   déborde quand il ne tient pas — auquel cas l'enveloppe défile. */

.kp-main .ku-tableau-enveloppe,
.kp-main .kv-tableau-cadre,
.kp-main [class*="table-wrap"],
.kp-main [class*="table-wrapper"],
.kp-main [class*="tableau-enveloppe"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.kp-main .ku-tableau-enveloppe > table,
.kp-main .kv-tableau-cadre > table,
.kp-main [class*="table-wrap"] > table,
.kp-main [class*="table-wrapper"] > table,
.kp-main [class*="tableau-enveloppe"] > table {
    width: max-content;
    min-width: 100%;
}

/* Les intitulés ne se coupent pas en deux lignes pour gagner trois pixels :
   la liste défile, c'est à ça qu'elle sert. Les cellules, elles, gardent le
   droit de revenir à la ligne — une adresse longue ne doit pas pousser toute
   la table hors de l'écran. */
.kp-main .ku-tableau-enveloppe > table th,
.kp-main .kv-tableau-cadre > table th,
.kp-main [class*="table-wrap"] > table th,
.kp-main [class*="table-wrapper"] > table th,
.kp-main [class*="tableau-enveloppe"] > table th {
    white-space: nowrap;
}

/* La barre de défilement se voit. Sur macOS elle est masquée tant qu'on ne
   fait pas glisser, et c'est précisément ce qui faisait croire qu'il n'y
   avait rien de plus à droite. */
.kp-main [class*="table-wrap"]::-webkit-scrollbar,
.kp-main .ku-tableau-enveloppe::-webkit-scrollbar,
.kp-main .kv-tableau-cadre::-webkit-scrollbar {
    height: 10px;
}

.kp-main [class*="table-wrap"]::-webkit-scrollbar-thumb,
.kp-main .ku-tableau-enveloppe::-webkit-scrollbar-thumb,
.kp-main .kv-tableau-cadre::-webkit-scrollbar-thumb {
    background: var(--kp-border-strong, #cbd5e1);
    border-radius: 99px;
}

.kp-main [class*="table-wrap"]::-webkit-scrollbar-track,
.kp-main .ku-tableau-enveloppe::-webkit-scrollbar-track,
.kp-main .kv-tableau-cadre::-webkit-scrollbar-track {
    background: var(--kp-bg, #f7f8fc);
    border-radius: 99px;
}

/* ============================================================
   20. SÉLECTION MULTIPLE ET ACTIONS GROUPÉES
   ============================================================

   Une case par ligne, une case qui les coche toutes, et une barre qui
   n'apparaît que lorsqu'il y a quelque chose à faire. Rien d'inventé : c'est
   le geste que tout le monde connaît déjà de WordPress, et le reconnaître
   vaut mieux que l'améliorer. */

.kp-sel__th,
.kp-sel__td {
    width: 38px;
    padding-right: 0;
    text-align: center;
    vertical-align: middle;
}

.kp-sel__tout,
.kp-sel__case {
    width: 17px;
    height: 17px;
    accent-color: var(--kp-primary, #cc2a74);
    cursor: pointer;
    margin: 0;
}

/* La ligne prise se voit sans qu'on ait à chercher sa case : sur un tableau
   de vingt lignes et dix colonnes, la case est loin du regard. */
.kp-sel__ligne--prise > td {
    background: var(--kp-primary-light, #fdf2f7);
}

.kp-sel__barre {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 12px;
    padding: 11px 14px;
    border: 1px solid var(--kp-primary, #cc2a74);
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-primary-light, #fdf2f7);
}

.kp-sel__barre[hidden] { display: none; }

.kp-sel__compte {
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
    color: var(--kp-text, #0f172a);
}

.kp-sel__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kp-sel__action {
    font: inherit;
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
    padding: 7px 14px;
    border: 1px solid var(--kp-border-strong, #cbd5e1);
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-white, #fff);
    color: var(--kp-text, #0f172a);
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-sel__action:hover:not(:disabled) { background: var(--kp-bg, #f7f8fc); }
.kp-sel__action:disabled { opacity: .55; cursor: default; }

/* L'action qui détruit porte sa couleur. Un bouton rouge se lit avant d'être
   lu : c'est une demi-seconde d'hésitation gagnée au bon moment. */
.kp-sel__action--danger {
    border-color: var(--kp-error, #dc2626);
    color: var(--kp-error, #dc2626);
}

.kp-sel__action--danger:hover:not(:disabled) { background: #fef2f2; }

.kp-sel__annuler {
    font: inherit;
    font-size: var(--kv-petit, 15.5px);
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    color: var(--kp-text-muted, #64748b);
    text-decoration: underline;
    cursor: pointer;
}

.kp-sel__message {
    flex: 1 0 100%;
    margin: 2px 0 0;
    font-size: var(--kv-petit, 15.5px);
}

.kp-sel__message[data-type="ok"]     { color: var(--kp-success, #059669); }
.kp-sel__message[data-type="erreur"] { color: var(--kp-error, #dc2626); }

@media (max-width: 600px) {
    .kp-sel__annuler { margin-left: 0; }
    .kp-sel__action { min-height: 44px; }
}