/* ============================================================
   KOPILOT360 — VUES D'ENSEMBLE ET HARMONISATION
   ============================================================

   Cette feuille arrive en dernier. Elle fait deux choses.

   1. Elle decrit le kit de vue d'ensemble (classes « kv- »), celui que tous
      les modules utilisent pour leur premier ecran.

   2. Elle remet d'accord ce que chaque module avait fini par dessiner a sa
      facon. Six equipes, six feuilles de style, six tailles de titre : on
      obtient six produits. Les regles de la seconde moitie du fichier
      reprennent les classes existantes de chaque module et leur imposent la
      meme echelle, les memes cartes, les memes tableaux.

   Une seule police, une seule echelle, un seul rose. Aucun emoji.
   ============================================================ */

:root {
    /* L'echelle typographique. Remontee : l'application se lit sur un ecran
       de bureau, souvent en fin de journee, par des gens qui ne sont pas des
       lecteurs de tableaux de bord. */
    --kv-texte:      17.5px;
    --kv-petit:      15.5px;
    --kv-minuscule:  14px;
    --kv-titre-page: 33px;
    --kv-titre:      22px;
    --kv-sous-titre: 18.5px;
    --kv-chiffre:    36px;
    --kv-chiffre-sm: 28px;

    --kv-ligne:      1.6;
    --kv-gouttiere:  18px;
}

/* ============================================================
   1. L'ECHELLE, PARTOUT
   ============================================================ */

.kp-app-shell,
.kopilot-page-wrapper,
.kopilot-dashboard {
    font-size: var(--kv-texte);
    line-height: var(--kv-ligne);
}

/* La famille, oui. La taille, non : chaque module garde la hierarchie qu'il
   a choisie, et toute l'echelle du produit a ete remontee a la source. */
.kp-app-shell,
.kp-app-shell input,
.kp-app-shell select,
.kp-app-shell textarea,
.kp-app-shell button {
    font-family: var(--kp-font);
}

.kp-app-shell h1 { font-size: var(--kv-titre-page); line-height: 1.22; letter-spacing: -0.02em; }
.kp-app-shell h2 { font-size: calc(var(--kv-titre) + 2px); line-height: 1.3; letter-spacing: -0.01em; }
.kp-app-shell h3 { font-size: var(--kv-titre); line-height: 1.35; }
.kp-app-shell h4 { font-size: var(--kv-sous-titre); line-height: 1.4; }

/* Plancher de lisibilite. En dessous de treize pixels, un texte n'est plus
   lu : il est devine. Rien dans l'application ne descend plus bas. */
.kp-app-shell small,
.kp-app-shell .kp-note {
    font-size: var(--kv-petit);
}

/* ============================================================
   2. LE KIT DE VUE D'ENSEMBLE
   ============================================================ */

.kv {
    display: flex;
    flex-direction: column;
    gap: 26px;
    /*
     * Ce qui suit la vue d'ensemble — une carte, un tableau, un texte de
     * synthese — venait se coller au dernier panneau : les deux blocs se
     * lisaient comme un seul. L'ecart qui les separe doit etre plus grand
     * que celui qui separe deux panneaux entre eux, sinon rien ne dit qu'on
     * a change de sujet.
     */
    margin-bottom: 44px;
}

/* Le graphique d'un panneau ne depasse jamais sa taille de dessin : etire,
   il grossit aussi son texte, et le bloc entier parait crie. */
.kv-panneau .kgraph__svg {
    max-width: 100%;
    margin-inline: auto;
}

/* --- Les blocs d'acces --------------------------------------- */

.kv-acces {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--kv-gouttiere);
}

.kv-acces__bloc {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 82px;
    padding: 16px 20px;
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    text-decoration: none;
    color: var(--kp-text);
    transition: border-color var(--kp-transition), transform var(--kp-transition), box-shadow var(--kp-transition);
}

.kv-acces__bloc:hover,
.kv-acces__bloc:focus-visible {
    border-color: var(--kp-primary);
    transform: translateY(-2px);
    box-shadow: var(--kp-shadow-sm);
    text-decoration: none;
    color: var(--kp-text);
}

.kv-acces__icone {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-primary-light);
    color: var(--kp-primary);
}

.kv-acces__icone svg { width: 21px; height: 21px; stroke-linecap: round; stroke-linejoin: round; }

.kv-acces__texte { display: flex; flex-direction: column; gap: 3px; min-width: 0; }

.kv-acces__titre {
    font-size: var(--kv-texte);
    font-weight: 600;
    color: var(--kp-text);
}

.kv-acces__note {
    font-size: var(--kv-petit);
    color: var(--kp-text-muted);
}

/*
 * « 42 800 € » se repliait sur trois lignes et faisait exploser la hauteur du
 * bloc — et donc celle des trois autres, que la grille aligne dessus. Un
 * montant ne se coupe pas : il tient sur une ligne ou il n'est pas affiche.
 */
.kv-acces__valeur {
    margin-left: auto;
    flex: 0 0 auto;
    white-space: nowrap;
    font-size: var(--kv-titre);
    font-weight: 700;
    color: var(--kp-text);
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

/*
 * Le titre et la note peuvent se replier, mais sur deux lignes au plus.
 *
 * Les couper a la premiere ligne donnait « Ressources hu… » et « Affaires et
 * temps p… » : illisible. Les laisser libres faisait des blocs de hauteurs
 * differentes. Deux lignes, et la hauteur du bloc est bornee sans que le
 * texte devienne un rebus.
 */
.kv-acces__titre,
.kv-acces__note {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}

/* --- Les actions rapides ------------------------------------- */

.kv-rapides { display: flex; flex-wrap: wrap; gap: 12px; }

.kv-bouton {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 22px;
    border-radius: var(--kp-radius-sm);
    background: var(--kp-primary);
    color: var(--kp-white);
    font-size: var(--kv-texte);
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--kp-primary);
    cursor: pointer;
    transition: background var(--kp-transition), border-color var(--kp-transition);
}

.kv-bouton:hover,
.kv-bouton:focus-visible { background: var(--kp-primary-dark); border-color: var(--kp-primary-dark); color: var(--kp-white); text-decoration: none; }

.kv-bouton--discret {
    background: var(--kp-white);
    color: var(--kp-text);
    border-color: var(--kp-border-strong);
}

.kv-bouton--discret:hover,
.kv-bouton--discret:focus-visible {
    background: var(--kp-primary-light);
    border-color: var(--kp-primary);
    color: var(--kp-primary-dark);
}

/* --- Les alertes ---------------------------------------------- */

.kv-alertes {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.kv-alerte {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 15px 18px;
    border: 1px solid var(--kp-border);
    border-left-width: 4px;
    border-radius: var(--kp-radius-sm);
    background: var(--kp-white);
    text-decoration: none;
    color: var(--kp-text);
    transition: box-shadow var(--kp-transition), transform var(--kp-transition);
}

a.kv-alerte:hover,
a.kv-alerte:focus-visible { transform: translateY(-1px); box-shadow: var(--kp-shadow-sm); text-decoration: none; color: var(--kp-text); }

.kv-alerte--alerte     { border-left-color: var(--kp-error);   background: var(--kp-error-bg); }
.kv-alerte--attention  { border-left-color: var(--kp-warning); background: var(--kp-warning-bg); }
.kv-alerte--info       { border-left-color: var(--kp-primary); background: var(--kp-primary-light); }

.kv-alerte__valeur {
    flex: 0 0 auto;
    font-size: var(--kv-chiffre-sm);
    font-weight: 700;
    letter-spacing: -0.02em;
}

.kv-alerte--alerte .kv-alerte__valeur    { color: var(--kp-error); }
.kv-alerte--attention .kv-alerte__valeur { color: var(--kp-warning); }
.kv-alerte--info .kv-alerte__valeur      { color: var(--kp-primary); }

.kv-alerte__texte  { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.kv-alerte__titre  { font-size: var(--kv-petit); font-weight: 600; }
.kv-alerte__detail { font-size: var(--kv-petit); color: var(--kp-text-muted); }

/* --- Les tuiles ----------------------------------------------- */

.kv-tuiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: var(--kv-gouttiere);
}

.kv-tuile {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 20px;
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    text-decoration: none;
    color: var(--kp-text);
    transition: border-color var(--kp-transition), box-shadow var(--kp-transition);
}

a.kv-tuile:hover,
a.kv-tuile:focus-visible { border-color: var(--kp-primary); box-shadow: var(--kp-shadow-sm); text-decoration: none; color: var(--kp-text); }

.kv-tuile__titre {
    font-size: var(--kv-petit);
    font-weight: 600;
    color: var(--kp-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

.kv-tuile__valeur {
    font-size: var(--kv-chiffre);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.1;
}

/*
 * La note se pose au bas de la tuile.
 *
 * Trois tuiles sur quatre n'ont pas de courbe : leur texte s'arretait au
 * tiers de la hauteur et laissait cent pixels de blanc dessous, pendant que
 * la quatrieme etait remplie. La note descendue en bas donne aux quatre le
 * meme appui, et le vide se retrouve la ou on ne le lit pas : entre le
 * chiffre et le commentaire.
 */
.kv-tuile__note {
    margin-top: auto;
    padding-top: 8px;
    font-size: var(--kv-petit);
    color: var(--kp-text-muted);
}

/*
 * La courbe minuscule tient dans une hauteur fixe.
 *
 * Elle etirait la tuile qui la portait, et la grille alignait les trois
 * autres dessus : une tuile a deux lignes se retrouvait avec cent pixels de
 * vide sous son chiffre. La hauteur imposee ici rend les quatre tuiles
 * comparables, ce qui est tout l'interet de les mettre cote a cote.
 */
.kv-tuile__courbe {
    margin-top: 8px;
    color: var(--kp-primary);
}

.kv-tuile__courbe svg {
    display: block;
    width: 100%;
    height: 30px;
}

.kv-ecart {
    align-self: flex-start;
    display: inline-block;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: var(--kv-minuscule);
    font-weight: 600;
}

.kv-ecart--bon      { background: var(--kp-success-bg); color: var(--kp-success); }
.kv-ecart--mauvais  { background: var(--kp-error-bg);   color: var(--kp-error); }
.kv-ecart--stable   { background: var(--kp-bg, #f7f8fc);              color: var(--kp-text-muted); }

/* --- Les panneaux --------------------------------------------- */

/*
 * L'intitule d'une section de panneaux.
 *
 * Il separe ce qui vient des reseaux sociaux de ce qui vient du site. Sans
 * lui, douze courbes se suivaient et il fallait lire chaque titre pour
 * savoir de quoi on parlait. Discret, en majuscules espacees, comme les
 * autres intitules de bande de l'application : c'est un reperage, pas un
 * titre de page.
 */
.kv-section {
    margin: 10px 0 0;
    font-size: var(--kv-minuscule);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kp-text-muted);
}

/* Entre deux sections, l'air fait la separation — pas un trait. */
.kv-section + .kv-panneaux { margin-bottom: 6px; }

.kv-panneaux {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: var(--kv-gouttiere);
}

.kv-panneau {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    padding: 22px 24px 24px;
    min-width: 0;
}

.kv-panneau--large { grid-column: 1 / -1; }

.kv-panneau__tete {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 4px;
}

.kv-panneau__titre {
    margin: 0;
    font-size: var(--kv-titre);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kp-text);
}

.kv-panneau__lien {
    flex: 0 0 auto;
    font-size: var(--kv-petit);
    font-weight: 600;
    color: var(--kp-primary);
    text-decoration: none;
}

.kv-panneau__lien:hover { text-decoration: underline; }

.kv-panneau__phrase {
    margin: 0 0 16px;
    font-size: var(--kv-petit);
    color: var(--kp-text-muted);
}

.kv-panneau__corps > *:last-child { margin-bottom: 0; }
.kv-panneau__corps svg { max-width: 100%; height: auto; }

/* --- Les tableaux --------------------------------------------- */

.kv-tableau-cadre { overflow-x: auto; }

.kv-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--kv-petit);
}

.kv-tableau th {
    text-align: left;
    padding: 10px 12px;
    font-weight: 600;
    color: var(--kp-text-muted);
    border-bottom: 1px solid var(--kp-border-strong);
    white-space: nowrap;
}

.kv-tableau td {
    padding: 12px;
    border-bottom: 1px solid var(--kp-border);
    color: var(--kp-text);
}

.kv-tableau tr:last-child td { border-bottom: 0; }
.kv-tableau .kv-droite { text-align: right; font-variant-numeric: tabular-nums; }

/* --- L'etat vide ---------------------------------------------- */

.kv-vide {
    padding: 48px 32px;
    text-align: center;
    background: var(--kp-white);
    border: 1px dashed var(--kp-border-strong);
    border-radius: var(--kp-radius);
}

.kv-vide__titre { margin: 0 0 10px; font-size: var(--kv-titre); font-weight: 700; }
.kv-vide__texte { margin: 0 auto 22px; max-width: 46ch; color: var(--kp-text-muted); }

/* ============================================================
   3. HARMONISATION DES MODULES EXISTANTS
   ============================================================

   Chaque module avait sa carte, son titre de carte, son tableau. On leur
   impose ici la meme forme. Les regles sont volontairement larges : un
   module qui ajoutera demain une carte « kxxx-carte » sera couvert sans
   rien avoir a faire.
   ============================================================ */

/* --- Les cartes ------------------------------------------------ */

.kp-app-shell .ku-carte,
.kp-app-shell .kfac-carte,
.kp-app-shell .kfin-carte,
.kp-app-shell .krh-carte,
.kp-app-shell .kcom-carte,
.kp-app-shell .kjur-carte,
.kp-app-shell .korg-carte,
.kp-app-shell .kcpt-carte,
.kp-app-shell .kvie-carte,
.kp-app-shell .kpil-carte,
.kp-app-shell .kperf-card,
.kp-app-shell .kana-card,
.kp-app-shell .kdoc-carte,
.kp-app-shell .kaide-carte {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: none;
    padding: 22px 24px;
}

.kp-app-shell .ku-carte__titre,
.kp-app-shell .kfac-carte__titre,
.kp-app-shell .kfin-carte__titre,
.kp-app-shell .krh-carte__titre,
.kp-app-shell .kcom-carte__titre,
.kp-app-shell .kjur-carte__titre,
.kp-app-shell .korg-carte__titre,
.kp-app-shell .kcpt-carte__titre,
.kp-app-shell .kvie-carte__titre,
.kp-app-shell .kpil-carte__titre {
    margin: 0 0 14px;
    font-size: var(--kv-titre);
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--kp-text);
    text-transform: none;
}

/* --- Les titres de section ------------------------------------- */

.kp-app-shell .kp-page-title,
.kp-app-shell .kp-titre-page {
    font-size: var(--kv-titre-page);
    font-weight: 800;
    letter-spacing: -0.02em;
}

/* --- Les tableaux ---------------------------------------------- */

.kp-app-shell .kfac-tableau,
.kp-app-shell .kfin-table,
.kp-app-shell .krh-staff-table,
.kp-app-shell .kcom-table,
.kp-app-shell .kcomm-pub-table,
.kp-app-shell .kjur-table,
.kp-app-shell .korg-table,
.kp-app-shell .kcpt-table,
.kp-app-shell .kperf-sale-table,
.kp-app-shell .kopilot-docs-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--kv-petit);
}

.kp-app-shell .kfac-tableau th,
.kp-app-shell .kfin-table th,
.kp-app-shell .krh-staff-table th,
.kp-app-shell .kcom-table th,
.kp-app-shell .kcomm-pub-table th,
.kp-app-shell .kjur-table th,
.kp-app-shell .korg-table th,
.kp-app-shell .kcpt-table th,
.kp-app-shell .kperf-sale-table th,
.kp-app-shell .kopilot-docs-table th {
    text-align: left;
    padding: 11px 13px;
    font-weight: 600;
    color: var(--kp-text-muted);
    border-bottom: 1px solid var(--kp-border-strong);
}

.kp-app-shell .kfac-tableau td,
.kp-app-shell .kfin-table td,
.kp-app-shell .krh-staff-table td,
.kp-app-shell .kcom-table td,
.kp-app-shell .kcomm-pub-table td,
.kp-app-shell .kjur-table td,
.kp-app-shell .korg-table td,
.kp-app-shell .kcpt-table td,
.kp-app-shell .kperf-sale-table td,
.kp-app-shell .kopilot-docs-table td {
    padding: 13px;
    border-bottom: 1px solid var(--kp-border);
}

/* --- Les boutons ------------------------------------------------ */

.kp-app-shell .kfac-bouton,
.kp-app-shell .krh-bouton,
.kp-app-shell .kcom-bouton,
.kp-app-shell .kjur-bouton,
.kp-app-shell .korg-bouton,
.kp-app-shell .kfin-bouton,
.kp-app-shell .kcpt-bouton,
.kp-app-shell .kvie-bouton,
.kp-app-shell .ku-bouton {
    font-size: var(--kv-texte);
    padding: 12px 22px;
    border-radius: var(--kp-radius-sm);
    font-weight: 600;
}

/* --- Les champs de formulaire ------------------------------------ */

.kp-app-shell input[type="text"],
.kp-app-shell input[type="email"],
.kp-app-shell input[type="tel"],
.kp-app-shell input[type="url"],
.kp-app-shell input[type="number"],
.kp-app-shell input[type="date"],
.kp-app-shell input[type="password"],
.kp-app-shell input[type="search"],
.kp-app-shell select,
.kp-app-shell textarea {
    font-size: var(--kv-texte);
    padding: 11px 14px;
    border-radius: var(--kp-radius-sm);
    border: 1px solid var(--kp-border-strong);
    background: var(--kp-white);
    color: var(--kp-text);
}

/*
 * Les listes deroulantes, reprises au theme.
 *
 * Le texte s'y affichait rogne par le bas : les jambages de « Toutes les
 * campagnes » ou de « Nouveau » etaient coupes net. La cause ne venait pas
 * de nous — le theme du site impose une hauteur fixe aux listes, calculee
 * pour sa propre taille de texte, et la notre est plus grande. Le navigateur
 * ne fait alors que rogner.
 *
 * On ne se bat pas regle contre regle : on reprend la liste entierement.
 * Hauteur libre, interligne explicite, fleche dessinee par nous. Le theme
 * n'a plus son mot a dire, et le rendu est le meme sur toutes les pages.
 */
.kp-app-shell select {
    height: auto;
    min-height: 0;
    max-height: none;
    line-height: 1.4;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* De la place a droite pour la fleche, qu'aucun texte ne doit recouvrir. */
    padding-right: 38px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px 8px;
    text-overflow: ellipsis;
}

/* La fleche doit rester visible sur fond sombre. */
:root[data-theme="dark"] .kp-app-shell select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/*
 * La liste ouverte est dessinee par le systeme, pas par la page : ses
 * couleurs ne s'heritent pas. On les pose donc explicitement, sans quoi un
 * client en theme sombre lit du texte sombre sur fond sombre.
 */
.kp-app-shell select option {
    background: var(--kp-white);
    color: var(--kp-text);
}

.kp-app-shell input:focus-visible,
.kp-app-shell select:focus-visible,
.kp-app-shell textarea:focus-visible {
    outline: 2px solid var(--kp-primary);
    outline-offset: 1px;
    border-color: var(--kp-primary);
}

.kp-app-shell label {
    font-size: var(--kv-petit);
    font-weight: 600;
    color: var(--kp-text);
}

/* --- La barre d'onglets des modules ------------------------------ */

.kp-app-shell .kp-sous-nav a,
.kp-app-shell .kins-sous-nav a {
    font-size: var(--kv-petit);
    font-weight: 600;
}

/* ============================================================
   4. ECRANS ETROITS
   ============================================================ */

@media (max-width: 860px) {
    :root {
        --kv-texte:      16.5px;
        --kv-petit:      15px;
        --kv-titre-page: 27px;
        --kv-titre:      20px;
        --kv-chiffre:    30px;
        --kv-chiffre-sm: 24px;
        --kv-gouttiere:  14px;
    }

    .kv-panneaux   { grid-template-columns: 1fr; }
    .kv-panneau    { padding: 18px 16px 20px; }
    .kv-acces__bloc { padding: 15px 16px; }
}

/* ============================================================
   5. MODE SOMBRE
   ============================================================

   Il se declenche par le choix explicite de l'utilisateur, jamais par le
   reglage du systeme : un dirigeant dont le telephone passe en sombre le
   soir ne demande pas pour autant que sa comptabilite change d'apparence.
   ============================================================ */

:root[data-theme="dark"] {
    --kp-white:         #131722;
    --kp-bg:            #0d1017;
    --kp-text:          #e8ecf4;
    --kp-text-muted:    #9aa5b8;
    --kp-text-soft:     #6b7688;
    --kp-border:        #242b3a;
    --kp-border-strong: #333d51;
    --kp-primary-light: #2a1622;
}

:root[data-theme="dark"] .kv-ecart--stable { background: #1c2230; }

/* ============================================================
   5. UNE SEULE CHARTE — LES CLASSES REELLES DES MODULES
   ============================================================

   La section precedente visait des noms de classe qui n'existaient pas
   (« krh-carte », « kcom-carte »). Elle ne corrigeait donc rien. Celle-ci
   vise ce que les modules ecrivent vraiment.

   Le desaccord venait surtout d'une habitude : chaque module s'etait donne
   une palette decorative — cartes bleues, vertes, violettes, sarcelle,
   ardoise, indigo. Dix couleurs sans signification, qui donnaient a chaque
   ecran l'air d'appartenir a un autre produit.

   La regle est simple et tient en une phrase : la couleur porte un sens ou
   elle n'est pas la. Le rose de la marque signale ce qui est actif. Le vert,
   l'orange et le rouge disent un etat. Tout le reste est neutre.
   ============================================================ */

/* --- Les cartes : une seule forme ------------------------------- */

.kp-app-shell .kcom-card,
.kp-app-shell .kfin-card,
.kp-app-shell .kjur-card,
.kp-app-shell .korg-card,
.kp-app-shell .krh-link-card,
.kp-app-shell .krh-kpi-card,
.kp-app-shell .krh-employee-card,
.kp-app-shell .kcomm-brand-card,
.kp-app-shell .kcomm-campaign-card,
.kp-app-shell .korg-archi-card,
.kp-app-shell .kjur-ech-card,
.kp-app-shell .kana-card,
.kp-app-shell .kperf-card,
.kp-app-shell .kfac-carte,
.kp-app-shell .kvie-carte,
.kp-app-shell .kcpt-carte,
.kp-app-shell .kdoc-carte,
.kp-app-shell .kaide-carte,
.kp-app-shell .ku-carte {
    background: var(--kp-white);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    box-shadow: none;
    padding: 22px 24px;
    color: var(--kp-text);
}

/* Les variantes decoratives perdent leur couleur, pas leur relief au
   survol : c'est le survol qui dit « ceci se clique », pas la teinte. */
.kp-app-shell .kcom-card--blue,
.kp-app-shell .kcom-card--indigo,
.kp-app-shell .kcom-card--slate,
.kp-app-shell .kcom-card--teal,
.kp-app-shell .kfin-card--blue,
.kp-app-shell .kfin-card--green,
.kp-app-shell .kfin-card--indigo,
.kp-app-shell .kfin-card--orange,
.kp-app-shell .kfin-card--purple,
.kp-app-shell .kfin-card--slate,
.kp-app-shell .kfin-card--teal,
.kp-app-shell .kjur-card--blue,
.kp-app-shell .kjur-card--indigo,
.kp-app-shell .kjur-card--orange,
.kp-app-shell .kjur-card--purple,
.kp-app-shell .kjur-card--slate,
.kp-app-shell .kjur-card--teal,
.kp-app-shell .korg-card--blue,
.kp-app-shell .korg-card--purple,
.kp-app-shell .korg-card--slate,
.kp-app-shell .krh-link-card--blue,
.kp-app-shell .krh-link-card--green,
.kp-app-shell .krh-link-card--orange,
.kp-app-shell .krh-link-card--purple,
.kp-app-shell .krh-link-card--slate,
.kp-app-shell .krh-link-card--teal {
    background: var(--kp-white);
    border-color: var(--kp-border);
    color: var(--kp-text);
}

.kp-app-shell .kcom-card:hover,
.kp-app-shell .kfin-card:hover,
.kp-app-shell .kjur-card:hover,
.kp-app-shell .korg-card:hover,
.kp-app-shell .krh-link-card:hover,
.kp-app-shell .kfac-carte--lien:hover {
    border-color: var(--kp-primary);
    background: var(--kp-primary-light);
}

/* Une carte desactivee se lit encore, mais ne se propose plus. */
.kp-app-shell .kcom-card--disabled,
.kp-app-shell .kjur-card--disabled,
.kp-app-shell .korg-card--disabled,
.kp-app-shell .kfin-card--disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* --- Les pastilles d'icone : la teinte de la marque, en retrait --- */

.kp-app-shell .kfin-icon,
.kp-app-shell .kfin-icon--blue,
.kp-app-shell .kfin-icon--green,
.kp-app-shell .kfin-icon--indigo,
.kp-app-shell .kfin-icon--orange,
.kp-app-shell .kfin-icon--purple,
.kp-app-shell .kfin-icon--slate,
.kp-app-shell .kfin-icon--teal,
.kp-app-shell .kjur-icon,
.kp-app-shell .kjur-icon--blue,
.kp-app-shell .kjur-icon--indigo,
.kp-app-shell .kjur-icon--orange,
.kp-app-shell .kjur-icon--purple,
.kp-app-shell .kjur-icon--slate,
.kp-app-shell .kjur-icon--teal,
.kp-app-shell .kp-card-icon-wrap,
.kp-app-shell .kp-card-icon-wrap--blue,
.kp-app-shell .kp-card-icon-wrap--indigo,
.kp-app-shell .kp-card-icon-wrap--slate {
    background: var(--kp-primary-light);
    color: var(--kp-primary);
    border: none;
}

/* --- Les chiffres cles : une seule taille, une seule couleur ----- */

.kp-app-shell .kcom-kpi,
.kp-app-shell .kjur-kpi,
.kp-app-shell .korg-kpi,
.kp-app-shell .kfin-kpi-value,
.kp-app-shell .krh-kpi-card .krh-kpi-value {
    font-size: var(--kv-chiffre-sm);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--kp-text);
    line-height: 1.1;
}

.kp-app-shell .kcom-kpi--blue,
.kp-app-shell .kcom-kpi--green,
.kp-app-shell .kcom-kpi--pink,
.kp-app-shell .kcom-kpi--purple,
.kp-app-shell .kjur-kpi--blue,
.kp-app-shell .kjur-kpi--purple,
.kp-app-shell .kjur-kpi--teal,
.kp-app-shell .korg-kpi--blue,
.kp-app-shell .korg-kpi--purple,
.kp-app-shell .kfin-kpi-value--blue,
.kp-app-shell .kfin-kpi-value--teal {
    color: var(--kp-text);
}

/* Seuls ceux-la gardent une couleur : elle dit quelque chose. */
.kp-app-shell .kjur-kpi--red,
.kp-app-shell .kfin-kpi-value--red      { color: var(--kp-error); }
.kp-app-shell .kjur-kpi--green,
.kp-app-shell .korg-kpi--green,
.kp-app-shell .kfin-kpi-value--green    { color: var(--kp-success); }
.kp-app-shell .kjur-kpi--orange,
.kp-app-shell .korg-kpi--orange         { color: var(--kp-warning); }

/* --- Les pastilles d'etat : trois tons, pas dix ------------------ */

.kp-app-shell .kcom-badge,
.kp-app-shell .kfin-badge,
.kp-app-shell .kjur-badge,
.kp-app-shell .korg-badge,
.kp-app-shell .krh-tab-badge,
.kp-app-shell .kjur-tab-badge,
.kp-app-shell .kfin-tab-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: var(--kv-minuscule);
    font-weight: 600;
    line-height: 1.6;
    border: 1px solid transparent;
    background: var(--kp-bg);
    color: var(--kp-text-muted);
}

.kp-app-shell .kcom-badge--green,
.kp-app-shell .kfin-badge--green,
.kp-app-shell .kjur-badge--green {
    background: var(--kp-success-bg);
    color: var(--kp-success);
    border-color: var(--kp-success-border);
}

.kp-app-shell .kfin-badge--red,
.kp-app-shell .kjur-badge--red,
.kp-app-shell .kfin-tab-badge--red {
    background: var(--kp-error-bg);
    color: var(--kp-error);
    border-color: var(--kp-error-border);
}

.kp-app-shell .kfin-badge--orange,
.kp-app-shell .kjur-badge--orange,
.kp-app-shell .korg-badge--orange,
.kp-app-shell .krh-tab-badge--orange,
.kp-app-shell .kjur-tab-badge--orange,
.kp-app-shell .kfin-tab-badge--orange {
    background: var(--kp-warning-bg);
    color: var(--kp-warning);
    border-color: var(--kp-warning);
}

/* Bleu, violet, sarcelle, indigo, gris : tous neutres. */
.kp-app-shell .kcom-badge--blue,
.kp-app-shell .kcom-badge--gray,
.kp-app-shell .kcom-badge--purple,
.kp-app-shell .kfin-badge--blue,
.kp-app-shell .kfin-badge--gray,
.kp-app-shell .kfin-badge--purple,
.kp-app-shell .kfin-badge--teal,
.kp-app-shell .kjur-badge--blue,
.kp-app-shell .kjur-badge--gray,
.kp-app-shell .kjur-badge--indigo,
.kp-app-shell .kjur-badge--purple,
.kp-app-shell .kjur-badge--teal,
.kp-app-shell .korg-badge--gray {
    background: var(--kp-bg);
    color: var(--kp-text-muted);
    border-color: var(--kp-border);
}

/* --- Les etats du bilan gardent leur sens ------------------------ */

.kp-app-shell .kperf-bilan__etat--green  { color: var(--kp-success); }
.kp-app-shell .kperf-bilan__etat--orange { color: var(--kp-warning); }
.kp-app-shell .kperf-bilan__etat--red    { color: var(--kp-error); }

/* --- Les barres d'onglets des modules ---------------------------- */

.kp-app-shell .krh-tab-btn,
.kp-app-shell .kcomm-tab-btn,
.kp-app-shell .kjur-tab-btn,
.kp-app-shell .korg-tab-btn,
.kp-app-shell .kfin-tab-btn {
    font-family: var(--kp-font);
    font-size: var(--kv-petit);
    font-weight: 600;
    color: var(--kp-text-muted);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 12px 16px;
    cursor: pointer;
    transition: color var(--kp-transition), border-color var(--kp-transition);
}

.kp-app-shell .krh-tab-btn:hover,
.kp-app-shell .kcomm-tab-btn:hover,
.kp-app-shell .kjur-tab-btn:hover,
.kp-app-shell .korg-tab-btn:hover,
.kp-app-shell .kfin-tab-btn:hover {
    color: var(--kp-text);
}

.kp-app-shell .krh-tab-active,
.kp-app-shell .kcomm-tab-active,
.kp-app-shell .kjur-tab-active,
.kp-app-shell .korg-tab-active,
.kp-app-shell .kfin-tab-active {
    color: var(--kp-primary);
    border-bottom-color: var(--kp-primary);
    background: transparent;
}

/* ============================================================
   6. LA BARRE LATERALE
   ============================================================ */

/*
 * Une entree de menu tient sur une ligne, toujours.
 *
 * « Ressources Humaines » passait a la ligne : au milieu de six entrees sur
 * une seule ligne, la septieme sur deux se remarque immediatement et donne
 * l'impression que la mise en page a lache. Les libelles ont ete raccourcis,
 * mais un module ajoute demain pourrait refaire la meme chose — d'ou cette
 * regle, qui coupe proprement plutot que de replier.
 */
.kp-app-shell .kp-nav-label {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}

.kp-app-shell .kp-nav-item {
    align-items: center;
    gap: 12px;
}

.kp-app-shell .kp-nav-item svg {
    flex: 0 0 auto;
}

/* ============================================================
   7. L'EN-TETE DE PAGE
   ============================================================ */

/*
 * Sept classes differentes pour la meme chose : le titre en haut de l'ecran.
 * Sept tailles, sept espacements, sept poids. On passe d'un module a l'autre
 * et le titre bouge — c'est le premier chose que l'oeil remarque, et c'est ce
 * qui donnait l'impression de changer de produit a chaque clic.
 *
 * Une seule forme, ici. Les modules gardent leurs classes : c'est plus sur
 * que de les renommer dans quinze fichiers, et le resultat est le meme.
 */
.kp-app-shell .kp-page-header,
.kp-app-shell .kopilot-page-header,
.kp-app-shell .kana-header,
.kp-app-shell .kcomm-header,
.kp-app-shell .kfac-entete,
.kp-app-shell .ku-entete,
.kp-app-shell .kins-entete,
.kp-app-shell .kfin-hero {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin: 0 0 26px;
    padding: 0;
    background: none;
    border: none;
}

.kp-app-shell .kp-page-header h1,
.kp-app-shell .kopilot-page-header h1,
.kp-app-shell .kana-header h1,
.kp-app-shell .kcomm-header h1,
.kp-app-shell .kfac-titre,
.kp-app-shell .ku-entete__titre,
.kp-app-shell .kins-titre,
.kp-app-shell .kfin-hero-title {
    margin: 0 0 6px;
    font-size: var(--kv-titre-page);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: var(--kp-text);
}

.kp-app-shell .kp-subtitle,
.kp-app-shell .kana-header p,
.kp-app-shell .kcomm-header p,
.kp-app-shell .kfac-sous-titre,
.kp-app-shell .ku-entete__phrase,
.kp-app-shell .kins-sous-titre,
.kp-app-shell .kfin-hero-subtitle {
    margin: 0;
    font-size: var(--kv-texte);
    font-weight: 400;
    color: var(--kp-text-muted);
    line-height: 1.55;
}

/*
 * Le bonjour du tableau de bord : plus petit que le titre, jamais l'inverse.
 */
.kp-app-shell .kp-greeting {
    margin: 0 0 4px;
    font-size: var(--kv-petit);
    font-weight: 600;
    color: var(--kp-text-muted);
    text-transform: none;
    letter-spacing: 0;
}

/* --- L'espacement entre les grands blocs d'un ecran -------------- */

/*
 * Un module respirait a 16 pixels, un autre a 40. Mis bout a bout, les
 * ecrans n'avaient pas le meme rythme. Une seule valeur, la meme partout.
 */
/*
 * On ne vise que le panneau VISIBLE.
 *
 * Un onglet cache l'est par « display: none » sur sa propre classe. Une regle
 * qui poserait ici « display: flex » sur le panneau tout court l'emporterait
 * par sa specificite, et les dix onglets d'un module s'afficheraient les uns
 * sous les autres. C'est le genre de correction d'apparence qui casse une
 * page entiere.
 */
.kp-app-shell .krh-tab-panel.krh-tab-visible,
.kp-app-shell .kcomm-tab-panel.kcomm-tab-visible,
.kp-app-shell .kjur-tab-content.kjur-tab-visible,
.kp-app-shell .korg-tab-content.korg-tab-visible,
.kp-app-shell .kfin-tab-panel.kfin-tab-visible,
.kp-app-shell .kfin-tab-content.kfin-tab-visible,
.kp-app-shell .kcom-tab-content.kcom-tab-visible {
    display: flex;
    flex-direction: column;
    gap: 26px;
}

/* ============================================================
   8. LES BOUTONS
   ============================================================ */

/*
 * Quinze modules, soixante-neuf classes de bouton. Chacune avec son rayon,
 * son espacement interieur, son poids de texte. Le bouton est l'element qu'on
 * regarde le plus : s'il change de forme d'un ecran a l'autre, tout le reste
 * a beau etre aligne, l'application parait bricolee.
 *
 * Trois formes, pas plus, et elles disent quelque chose :
 *
 *   - le bouton plein porte le geste principal de l'ecran ; il n'y en a
 *     qu'un ;
 *   - le bouton a bordure porte les gestes secondaires ;
 *   - le bouton discret porte ce qu'on fait rarement.
 *
 * Les classes des modules sont conservees et redirigees vers ces trois
 * formes. Les renommer dans quinze fichiers aurait ete plus propre et
 * beaucoup plus risque.
 */

/* --- Le socle commun a tous ------------------------------------- */

.kp-app-shell .kopilot-btn,
.kp-app-shell .kcom-btn,
.kp-app-shell .kcomm-btn-add,
.kp-app-shell .kfin-btn,
.kp-app-shell .kins-btn,
.kp-app-shell .kjur-btn,
.kp-app-shell .korg-btn,
.kp-app-shell .kperf-btn,
.kp-app-shell .krh-btn-add,
.kp-app-shell .ku-btn,
.kp-app-shell .kv-bouton,
.kp-app-shell .kfac-bouton,
.kp-app-shell .kvie-btn,
.kp-app-shell .kdocs-btn-new-folder,
.kp-app-shell .kdocs-btn-confirm,
.kp-app-shell .kdocs-btn-cancel,
.kp-app-shell .kopilot-btn-upload,
.kp-app-shell .kins-btn-relances,
.kp-app-shell .kpil-btn-facturer,
.kp-app-shell .kana-btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--kp-font);
    font-size: var(--kv-texte);
    font-weight: 600;
    line-height: 1.2;
    padding: 12px 22px;
    border-radius: var(--kp-radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    box-shadow: none;
    transition: background var(--kp-transition), border-color var(--kp-transition), color var(--kp-transition);
}

/* --- Le geste principal : plein, rose ---------------------------- */

.kp-app-shell .kopilot-btn-primary,
.kp-app-shell .kcom-btn-primary,
.kp-app-shell .kcomm-btn-primary,
.kp-app-shell .kfin-btn-primary,
.kp-app-shell .kjur-btn-primary,
.kp-app-shell .korg-btn-primary,
.kp-app-shell .krh-btn-primary,
.kp-app-shell .kperf-btn--primary,
.kp-app-shell .kperf-btn--primaire,
.kp-app-shell .kins-btn--primaire,
.kp-app-shell .ku-btn--primaire,
.kp-app-shell .kv-bouton,
.kp-app-shell .kfac-bouton,
.kp-app-shell .kcomm-btn-add,
.kp-app-shell .krh-btn-add,
.kp-app-shell .kdocs-btn-new-folder,
.kp-app-shell .kdocs-btn-confirm,
.kp-app-shell .kpil-btn-facturer,
.kp-app-shell .kins-btn-relances {
    background: var(--kp-primary);
    border-color: var(--kp-primary);
    color: #ffffff;
}

.kp-app-shell .kopilot-btn-primary:hover,
.kp-app-shell .kcom-btn-primary:hover,
.kp-app-shell .kcomm-btn-primary:hover,
.kp-app-shell .kfin-btn-primary:hover,
.kp-app-shell .kjur-btn-primary:hover,
.kp-app-shell .korg-btn-primary:hover,
.kp-app-shell .krh-btn-primary:hover,
.kp-app-shell .kv-bouton:hover,
.kp-app-shell .kfac-bouton:hover {
    background: var(--kp-primary-dark);
    border-color: var(--kp-primary-dark);
    color: #ffffff;
}

/* --- Les gestes secondaires : bordure, fond blanc ---------------- */

.kp-app-shell .kopilot-btn-outline,
.kp-app-shell .kopilot-btn-secondary,
.kp-app-shell .kfin-btn-outline,
.kp-app-shell .korg-btn-outline,
.kp-app-shell .korg-btn-outline--sm,
.kp-app-shell .kperf-btn--outline,
.kp-app-shell .kopilot-btn-upload,
.kp-app-shell .kdocs-btn-cancel,
.kp-app-shell .kins-btn-relances--off,
.kp-app-shell .kvie-btn {
    background: var(--kp-white);
    border-color: var(--kp-border-strong);
    color: var(--kp-text);
}

.kp-app-shell .kopilot-btn-outline:hover,
.kp-app-shell .kopilot-btn-secondary:hover,
.kp-app-shell .kfin-btn-outline:hover,
.kp-app-shell .korg-btn-outline:hover,
.kp-app-shell .kperf-btn--outline:hover,
.kp-app-shell .kvie-btn:hover {
    border-color: var(--kp-primary);
    color: var(--kp-primary);
}

/* --- Ce qu'on fait rarement : discret ---------------------------- */

.kp-app-shell .kcom-btn-ghost,
.kp-app-shell .kcomm-btn-ghost,
.kp-app-shell .kfin-btn-ghost,
.kp-app-shell .kjur-btn-ghost,
.kp-app-shell .korg-btn-ghost,
.kp-app-shell .krh-btn-ghost,
.kp-app-shell .kv-bouton--discret,
.kp-app-shell .kfac-bouton--discret,
.kp-app-shell .ku-btn--discret,
.kp-app-shell .kins-btn {
    background: transparent;
    border-color: var(--kp-border);
    color: var(--kp-text-muted);
}

.kp-app-shell .kcom-btn-ghost:hover,
.kp-app-shell .kcomm-btn-ghost:hover,
.kp-app-shell .kfin-btn-ghost:hover,
.kp-app-shell .kjur-btn-ghost:hover,
.kp-app-shell .korg-btn-ghost:hover,
.kp-app-shell .krh-btn-ghost:hover,
.kp-app-shell .kv-bouton--discret:hover,
.kp-app-shell .kfac-bouton--discret:hover,
.kp-app-shell .ku-btn--discret:hover {
    background: var(--kp-primary-light);
    border-color: var(--kp-primary);
    color: var(--kp-primary);
}

/* --- Ce qui detruit : rouge, et seulement la ---------------------- */

.kp-app-shell .kopilot-btn-danger,
.kp-app-shell .krh-btn-danger,
.kp-app-shell .kcom-btn-icon--danger,
.kp-app-shell .kfin-btn-icon--danger,
.kp-app-shell .kjur-btn-icon--danger,
.kp-app-shell .korg-btn-icon--danger,
.kp-app-shell .kcomm-btn-danger-text,
.kp-app-shell .kdocs-btn-empty-trash {
    background: var(--kp-white);
    border-color: var(--kp-error-border);
    color: var(--kp-error);
}

.kp-app-shell .kopilot-btn-danger:hover,
.kp-app-shell .krh-btn-danger:hover,
.kp-app-shell .kdocs-btn-empty-trash:hover {
    background: var(--kp-error);
    border-color: var(--kp-error);
    color: #ffffff;
}

/* --- Les tailles ------------------------------------------------- */

.kp-app-shell .kopilot-btn-sm,
.kp-app-shell .kfin-btn-sm,
.kp-app-shell .kjur-btn-sm,
.kp-app-shell .korg-btn-xs,
.kp-app-shell .korg-btn-outline--sm,
.kp-app-shell .kana-btn-sm {
    padding: 8px 14px;
    font-size: var(--kv-petit);
}

.kp-app-shell .kfin-btn-lg,
.kp-app-shell .kjur-btn-lg {
    padding: 15px 28px;
    font-size: var(--kv-sous-titre);
}

/* --- Les boutons qui ne portent qu'une icone --------------------- */

.kp-app-shell .kcom-btn-icon,
.kp-app-shell .kfin-btn-icon,
.kp-app-shell .kjur-btn-icon,
.kp-app-shell .korg-btn-icon,
.kp-app-shell .korg-btn-icon--sm,
.kp-app-shell .kdocs-btn-icon,
.kp-app-shell .kvie-btn-icon {
    padding: 9px;
    border-radius: var(--kp-radius-sm);
    background: transparent;
    border-color: transparent;
    color: var(--kp-text-muted);
}

.kp-app-shell .kcom-btn-icon:hover,
.kp-app-shell .kfin-btn-icon:hover,
.kp-app-shell .kjur-btn-icon:hover,
.kp-app-shell .korg-btn-icon:hover,
.kp-app-shell .kdocs-btn-icon:hover,
.kp-app-shell .kvie-btn-icon:hover {
    background: var(--kp-primary-light);
    color: var(--kp-primary);
}

/* --- Le meme anneau de focus pour tous --------------------------- */

.kp-app-shell .kopilot-btn:focus-visible,
.kp-app-shell .kcom-btn:focus-visible,
.kp-app-shell .kfin-btn:focus-visible,
.kp-app-shell .kjur-btn:focus-visible,
.kp-app-shell .korg-btn:focus-visible,
.kp-app-shell .krh-btn-primary:focus-visible,
.kp-app-shell .kv-bouton:focus-visible,
.kp-app-shell .kfac-bouton:focus-visible,
.kp-app-shell .ku-btn:focus-visible {
    outline: 2px solid var(--kp-primary);
    outline-offset: 2px;
}

/* ============================================================
   9. LE BANDEAU DE PAGE
   ============================================================

   Un seul bandeau, dessine par le socle, identique sur toutes les pages :
   l'icone dans sa pastille rose, le titre, la phrase, et a droite les trois
   memes actions dans le meme ordre — notifications, corbeille, aide.

   Les anciennes classes des modules (.kp-page-header, .kana-header…) sont
   conservees plus haut dans ce fichier : une installation qui n'a pas encore
   recu la mise a jour d'un module continue d'afficher proprement.
   ============================================================ */

.kp-app-shell .kp-bandeau {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin: 0 0 28px;
    padding: 0 0 20px;
    border-bottom: 1px solid var(--kp-border);
}

.kp-app-shell .kp-bandeau__identite {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    min-width: 0;
    flex: 1 1 340px;
}

/* La pastille de l'icone : toujours la meme taille, toujours la meme
   couleur. C'est elle qui remplace les huit traitements differents — dont
   une icone blanche sur fond blanc, invisible. */
.kp-app-shell .kp-bandeau__icone {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: var(--kp-radius-sm);
    background: var(--kp-primary-light);
    color: var(--kp-primary);
}

.kp-app-shell .kp-bandeau__icone svg {
    width: 24px;
    height: 24px;
}

.kp-app-shell .kp-bandeau__texte { min-width: 0; }

.kp-app-shell .kp-bandeau__titre {
    margin: 0 0 4px;
    font-size: var(--kv-titre-page);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.18;
    color: var(--kp-text);
}

.kp-app-shell .kp-bandeau__phrase {
    margin: 0;
    max-width: 68ch;
    font-size: var(--kv-petit);
    line-height: 1.55;
    color: var(--kp-text-muted);
}

.kp-app-shell .kp-bonjour {
    margin: 0 0 18px;
    font-size: var(--kv-texte);
    color: var(--kp-text-muted);
}

/* --- Les trois actions ------------------------------------------ */

.kp-app-shell .kp-bandeau__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    padding-top: 4px;
}

.kp-app-shell .kp-bandeau__boite { position: relative; }

.kp-app-shell .kp-bandeau__action {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    padding: 0;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius-sm);
    background: var(--kp-white);
    color: var(--kp-text-muted);
    cursor: pointer;
    text-decoration: none;
    transition: border-color var(--kp-transition), color var(--kp-transition), background var(--kp-transition);
}

.kp-app-shell .kp-bandeau__action svg { width: 19px; height: 19px; }

.kp-app-shell .kp-bandeau__action:hover {
    border-color: var(--kp-primary);
    background: var(--kp-primary-light);
    color: var(--kp-primary);
}

.kp-app-shell .kp-bandeau__action:focus-visible {
    outline: 2px solid var(--kp-primary);
    outline-offset: 2px;
}

/*
 * Une action sans contenu reste affichee, en retrait. La faire disparaitre
 * decalerait les deux autres d'un ecran a l'autre — exactement ce qu'on
 * cherche a supprimer.
 */
.kp-app-shell .kp-bandeau__action--vide { color: var(--kp-text-soft); }

.kp-app-shell .kp-bandeau__pastille {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    background: var(--kp-primary);
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
    line-height: 19px;
    text-align: center;
}

/* --- Les panneaux ------------------------------------------------ */

.kp-app-shell .kp-bandeau__panneau {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 40;
    width: min(380px, calc(100vw - 32px));
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px;
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
    background: var(--kp-white);
    box-shadow: var(--kp-shadow);
}

.kp-app-shell .kp-bandeau__panneau[hidden] { display: none; }

/* --- La rubrique qui ouvre un panneau plutot qu'une page ---------- */

/*
 * « Liens utiles » est un bouton, pas un lien : il ouvre un panneau au lieu
 * de mener ailleurs. Mais un <button> sans habillage prend celui du theme —
 * fond bleu, bord, coins carres — et se retrouve bleu sur bleu au milieu de
 * quatre liens roses. On lui redonne donc exactement la forme d'un lien de
 * cette barre, et on annule ce que le navigateur et le theme y mettent.
 */
.kp-app-shell .kp-ressources__boite {
    position: relative;   /* le panneau s'ancre ici, et non sur la page */
    display: inline-flex;
}

.kp-app-shell .kp-ressources__lien--bouton,
.kp-app-shell button.kp-ressources__lien {
    margin: 0;
    border: 0;
    background: none;
    box-shadow: none;
    color: var(--kp-text-muted);
    font: inherit;
    font-size: var(--kv-texte);
    font-weight: 500;
    line-height: inherit;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
}

.kp-app-shell .kp-ressources__lien--bouton:hover,
.kp-app-shell .kp-ressources__lien--bouton:focus-visible,
.kp-app-shell button.kp-ressources__lien:hover,
.kp-app-shell button.kp-ressources__lien:focus-visible {
    background: var(--kp-bg);
    color: var(--kp-text);
}

/* Le panneau ouvert se signale, comme une rubrique active. */
.kp-app-shell .kp-ressources__lien--bouton[aria-expanded="true"] {
    background: var(--kp-primary-light);
    color: var(--kp-primary-dark);
    font-weight: 600;
}

.kp-app-shell .kp-ressources__panneau {
    text-align: left;
}

.kp-app-shell .kp-bandeau__panneau-tete {
    margin: 4px 8px 10px;
    font-size: var(--kv-minuscule);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--kp-text-soft);
}

.kp-app-shell .kp-bandeau__panneau-vide {
    margin: 0;
    padding: 10px 8px 14px;
    font-size: var(--kv-petit);
    line-height: 1.5;
    color: var(--kp-text-muted);
}

.kp-app-shell .kp-bandeau__note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 8px;
    border-radius: var(--kp-radius-sm);
    color: var(--kp-text);
    text-decoration: none;
}

.kp-app-shell a.kp-bandeau__note:hover { background: var(--kp-primary-light); }

.kp-app-shell .kp-bandeau__note-texte {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    flex: 1 1 auto;
    font-size: var(--kv-petit);
}

.kp-app-shell .kp-bandeau__note-texte span { color: var(--kp-text-muted); }

.kp-app-shell .kp-bandeau__point {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    margin-top: 7px;
    border-radius: 999px;
    background: var(--kp-text-soft);
}

.kp-app-shell .kp-bandeau__point--alerte    { background: var(--kp-error); }
.kp-app-shell .kp-bandeau__point--attention { background: var(--kp-warning); }
.kp-app-shell .kp-bandeau__point--info      { background: var(--kp-primary); }

.kp-app-shell .kp-bandeau__restaurer {
    flex: 0 0 auto;
    align-self: center;
    font-size: var(--kv-minuscule);
    font-weight: 600;
    color: var(--kp-primary);
    text-decoration: none;
    white-space: nowrap;
}

.kp-app-shell .kp-bandeau__restaurer:hover { text-decoration: underline; }

/* --- Le message qui suit une action ------------------------------ */

.kp-app-shell .kp-bandeau__message {
    margin: -12px 0 22px;
    padding: 12px 16px;
    border-radius: var(--kp-radius-sm);
    font-size: var(--kv-petit);
    border: 1px solid transparent;
}

.kp-app-shell .kp-bandeau__message--succes {
    background: var(--kp-success-bg);
    border-color: var(--kp-success-border);
    color: var(--kp-success);
}

.kp-app-shell .kp-bandeau__message--erreur {
    background: var(--kp-error-bg);
    border-color: var(--kp-error-border);
    color: var(--kp-error);
}

@media (max-width: 720px) {
    .kp-app-shell .kp-bandeau {
        gap: 14px;
        margin-bottom: 22px;
    }

    .kp-app-shell .kp-bandeau__actions {
        width: 100%;
        justify-content: flex-start;
        padding-top: 0;
    }

    .kp-app-shell .kp-bandeau__panneau { right: auto; left: 0; }
}

/* ============================================================
   CE QUE LE CLIENT CHOISIT DE VOIR
   ============================================================

   Le depliant au bas des premiers ecrans. Il a commence dans le module
   Communication ; il sert desormais les sept premiers ecrans, et son style
   vit donc ici, avec le reste du kit commun.

   Sa place est sous la bande des gestes rapides : c'est la qu'on regarde
   quand on veut agir sur l'ecran plutot que le lire. Pose tout en haut, il
   passait avant les chiffres ; pose en bas, il fallait faire defiler les
   douze courbes qu'il sert justement a reduire.

   Et il se voit. Ferme, c'est un bouton de la meme famille que les gestes
   rapides juste au-dessus — meme hauteur, meme coin arrondi, meme bordure —
   mais en retrait : on doit le trouver sans qu'il reclame l'attention avant
   les chiffres. */

.kv-reglage {
    margin: 0;
}

.kv-reglage__titre {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border: 1px solid var(--kp-border-strong);
    border-radius: var(--kp-radius-sm);
    background: var(--kp-white);
    cursor: pointer;
    list-style: none;
    font-size: var(--kv-petit);
    font-weight: 600;
    color: var(--kp-text);
}

.kv-reglage__titre::-webkit-details-marker { display: none; }

.kv-reglage__titre::before {
    content: "\25B8";
    display: inline-block;
    width: 10px;
    color: var(--kp-primary);
}

.kv-reglage[open] .kv-reglage__titre::before { content: "\25BE"; }

.kv-reglage__titre:hover,
.kv-reglage__titre:focus-visible {
    background: var(--kp-primary-light);
    border-color: var(--kp-primary);
    color: var(--kp-primary-dark);
}

.kv-reglage__corps {
    margin: 12px 0 0;
    padding: 18px 20px;
    background: var(--kp-bg);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
}

.kv-reglage__phrase {
    margin: 0 0 14px;
    font-size: var(--kv-petit);
    line-height: 1.6;
    color: var(--kp-text-soft);
}

.kv-reglage__liste {
    margin: 0 0 16px;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 4px 24px;
}

.kv-reglage__famille {
    grid-column: 1 / -1;
    margin: 12px 0 2px;
    font-size: var(--kv-minuscule);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--kp-text-muted);
}

.kv-reglage__famille:first-child { margin-top: 0; }

.kv-reglage__choix label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
    font-size: var(--kv-petit);
    color: var(--kp-text);
    cursor: pointer;
}

.kv-reglage__choix input {
    width: 17px;
    height: 17px;
    accent-color: var(--kp-primary);
    flex: 0 0 auto;
}

.kv-reglage__bouton {
    padding: 9px 18px;
    border: 0;
    border-radius: var(--kp-radius-sm);
    background: var(--kp-primary);
    color: var(--kp-white);
    font-family: inherit;
    font-size: var(--kv-petit);
    font-weight: 600;
    cursor: pointer;
}

.kv-reglage__bouton:hover { background: var(--kp-primary-dark); }

/* ============================================================
   LA BARRE D'ONGLETS D'UN MODULE
   ============================================================

   Elle etait dessinee par chaque module, et deux metaphores se disputaient
   l'ecran : trois modules soulignaient l'onglet actif d'un trait, cinq le
   posaient sur une pastille blanche. Un dirigeant qui passait de
   Communication a RH voyait la barre changer de forme pour faire exactement
   la meme chose.

   La pastille l'emporte, et ce n'est pas arbitraire : c'est deja la forme de
   la barre de groupe que le socle pose sur toutes les pages. Deux formes a
   l'ecran dont une qui se veut « identique d'une rubrique a l'autre », il
   fallait trancher dans ce sens.

   Les modules gardent leurs anciennes classes a cote de celles-ci — leur
   JavaScript les cherche pour ouvrir le bon panneau — mais ne les habillent
   plus : tout se decide ici. */

.kp-app-shell .kopi-onglets {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 24px;
    padding: 5px;
    background: var(--kp-bg);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
}

.kp-app-shell .kopi-onglet {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--kp-radius-sm);
    background: transparent;
    color: var(--kp-text-muted);
    font-family: inherit;
    font-size: var(--kv-petit);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    box-shadow: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.kp-app-shell .kopi-onglet svg { flex: 0 0 auto; }

.kp-app-shell .kopi-onglet:hover,
.kp-app-shell .kopi-onglet:focus-visible {
    background: var(--kp-white);
    color: var(--kp-text);
    text-decoration: none;
}

/* L'onglet ouvert porte le rose de la marque, comme la barre de groupe :
   c'est le meme geste, il se lit pareil partout. */
.kp-app-shell .kopi-onglet--actif,
.kp-app-shell .kopi-onglet--actif:hover,
.kp-app-shell .kopi-onglet--actif:focus-visible {
    background: var(--kp-primary);
    color: var(--kp-white);
    border: 0;
}

@media (max-width: 720px) {
    .kp-app-shell .kopi-onglets {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kp-app-shell .kopi-onglet { white-space: nowrap; }
}

:root[data-theme="dark"] .kp-app-shell .kopi-onglets {
    background: #111827;
    border-color: #1f2937;
}

:root[data-theme="dark"] .kp-app-shell .kopi-onglet:hover,
:root[data-theme="dark"] .kp-app-shell .kopi-onglet:focus-visible { background: #1f2937; }

/* Les modules qui n'ont pas encore migre vers kopilot_onglets().
   -------------------------------------------------------------

   Leur balisage porte encore ses classes d'origine, parce que leurs boutons
   contiennent des compteurs — les conges a valider, les echeances proches —
   que le composant partage ne sait pas encore dessiner. Les convertir a la
   hate aurait mis ces compteurs en jeu pour gagner un nom de classe.

   En attendant, ils prennent l'apparence commune ici. Pour le client, la
   barre est deja la meme partout ; pour nous, il reste une migration a
   faire, et ce bloc est ce qui la rappelle. */

.kp-app-shell .krh-tabs,
.kp-app-shell .korg-tabs,
.kp-app-shell .kjur-tabs,
.kp-app-shell .kcom-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 0 0 24px;
    padding: 5px;
    background: var(--kp-bg);
    border: 1px solid var(--kp-border);
    border-radius: var(--kp-radius);
}

.kp-app-shell .krh-tab-btn,
.kp-app-shell .korg-tab-btn,
.kp-app-shell .kjur-tab-btn,
.kp-app-shell .kcom-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 0;
    border-radius: var(--kp-radius-sm);
    background: transparent;
    color: var(--kp-text-muted);
    font-family: inherit;
    font-size: var(--kv-petit);
    font-weight: 600;
    line-height: 1.3;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}

.kp-app-shell .krh-tab-btn:hover,
.kp-app-shell .korg-tab-btn:hover,
.kp-app-shell .kjur-tab-btn:hover,
.kp-app-shell .kcom-tab-btn:hover,
.kp-app-shell .krh-tab-btn:focus-visible,
.kp-app-shell .korg-tab-btn:focus-visible,
.kp-app-shell .kjur-tab-btn:focus-visible,
.kp-app-shell .kcom-tab-btn:focus-visible {
    background: var(--kp-white);
    color: var(--kp-text);
}

.kp-app-shell .krh-tab-btn.krh-tab-active,
.kp-app-shell .korg-tab-btn.korg-tab-active,
.kp-app-shell .kjur-tab-btn.kjur-tab-active,
.kp-app-shell .kcom-tab-btn.kcom-tab-active,
.kp-app-shell .krh-tab-btn.krh-tab-active:hover,
.kp-app-shell .korg-tab-btn.korg-tab-active:hover,
.kp-app-shell .kjur-tab-btn.kjur-tab-active:hover,
.kp-app-shell .kcom-tab-btn.kcom-tab-active:hover {
    background: var(--kp-primary);
    color: var(--kp-white);
}

@media (max-width: 720px) {
    .kp-app-shell .krh-tabs,
    .kp-app-shell .korg-tabs,
    .kp-app-shell .kjur-tabs,
    .kp-app-shell .kcom-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .kp-app-shell .krh-tab-btn,
    .kp-app-shell .korg-tab-btn,
    .kp-app-shell .kjur-tab-btn,
    .kp-app-shell .kcom-tab-btn { white-space: nowrap; }
}

/* ============================================================
   LE CHOIX DE LA PÉRIODE
   ============================================================

   Un seul réglage, en haut de l'écran, qui vaut pour tout ce qui suit. Un
   réglage par carte aurait donné dix réglages à tenir d'accord, et deux
   cartes côte à côte parlant de deux mois différents. */

.ksrc-periode {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;
    margin: 0 0 20px;
    padding: 13px 16px;
    border: 1px solid var(--kp-border, #e5e9f0);
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-white, #fff);
}

.ksrc-periode__intitule {
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
    color: var(--kp-text-muted, #64748b);
}

.ksrc-periode__choix {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 3px;
    border-radius: 99px;
    background: var(--kp-bg, #f7f8fc);
}

.ksrc-periode__bouton {
    font: inherit;
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
    padding: 7px 15px;
    border: 0;
    border-radius: 99px;
    background: none;
    color: var(--kp-text-muted, #64748b);
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease),
                color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

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

.ksrc-periode__bouton--actif {
    background: var(--kp-primary, #cc2a74);
    color: #fff;
}

.ksrc-periode__bouton--actif:hover { color: #fff; }

.ksrc-periode__dates {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* Repliées tant que « Dates au choix » n'a pas été demandé : deux champs que
   personne ne remplit au-dessus de chaque écran, c'est deux champs de trop. */
.ksrc-periode__dates--repliees { display: none; }

.ksrc-periode__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--kv-petit, 15.5px);
    color: var(--kp-text-muted, #64748b);
}

.ksrc-periode__date input {
    font: inherit;
    font-size: var(--kv-petit, 15.5px);
    padding: 6px 9px;
    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);
}

.ksrc-periode__valider {
    font: inherit;
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
    padding: 7px 14px;
    border: 1px solid var(--kp-primary, #cc2a74);
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-white, #fff);
    color: var(--kp-primary, #cc2a74);
    cursor: pointer;
}

.ksrc-periode__rappel {
    flex: 1 0 100%;
    margin: 0;
    font-size: var(--kv-minuscule, 14px);
    color: var(--kp-text-soft, #94a3b8);
}

/* ============================================================
   LES CHIFFRES ET LEUR VARIATION
   ============================================================ */

.ksrc-chiffres {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
    gap: 14px;
}

.ksrc-chiffre {
    padding: 14px 16px;
    border: 1px solid var(--kp-border, #e5e9f0);
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-bg, #f7f8fc);
}

.ksrc-chiffre__titre {
    margin: 0 0 4px;
    font-size: var(--kv-minuscule, 14px);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kp-text-muted, #64748b);
}

.ksrc-chiffre__valeur {
    margin: 0;
    font-size: var(--kv-chiffre-sm, 26px);
    font-weight: 700;
    line-height: 1.15;
    color: var(--kp-text, #0f172a);
    font-variant-numeric: tabular-nums;
}

/* La flèche n'est jamais seule : le pourcentage est écrit à côté, et la
   couleur n'est pas le seul signal. Une pastille verte ne dit rien à qui ne
   distingue pas le vert du rouge. */
.ksrc-chiffre__variation {
    margin: 5px 0 0;
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
}

.ksrc-chiffre__variation[data-ton="bon"]     { color: var(--kp-success, #059669); }
.ksrc-chiffre__variation[data-ton="mauvais"] { color: var(--kp-error, #dc2626); }
.ksrc-chiffre__variation[data-ton="neutre"]  { color: var(--kp-text-soft, #94a3b8); }

.ksrc-chiffre__note {
    margin: 6px 0 0;
    font-size: var(--kv-minuscule, 14px);
    line-height: 1.45;
    color: var(--kp-text-muted, #64748b);
}

/* Un lien qui sort de l'application le dit, pour qu'on ne s'étonne pas de
   changer d'onglet. */
.kv-panneau__lien--externe { white-space: nowrap; }

.kv-externe { font-size: .85em; }

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

@media (max-width: 600px) {
    .ksrc-periode { gap: 8px 10px; padding: 12px; }
    .ksrc-periode__bouton { min-height: 40px; }
    .ksrc-periode__choix { width: 100%; justify-content: space-between; }
}

/* ============================================================
   LES CONTACTS E-MAIL
   ============================================================ */

.ksrc-contacts-wrap { overflow-x: auto; }

.ksrc-contacts {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: var(--kv-petit, 15.5px);
}

.ksrc-contacts th {
    padding: 9px 12px;
    text-align: left;
    white-space: nowrap;
    font-size: var(--kv-minuscule, 14px);
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--kp-text-muted, #64748b);
    border-bottom: 1px solid var(--kp-border, #e5e9f0);
}

.ksrc-contacts td {
    padding: 10px 12px;
    border-bottom: 1px solid var(--kp-border, #e5e9f0);
}

.ksrc-contacts tbody tr:last-child td { border-bottom: 0; }

/* Un désinscrit reste dans la liste, barré et nommé : le cacher donnerait
   l'impression d'une liste plus grande qu'elle n'est, l'afficher comme les
   autres pousserait à lui écrire alors qu'il a dit non. */
.ksrc-contact--parti td { color: var(--kp-text-soft, #94a3b8); }

.ksrc-contact__marque {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 7px;
    border-radius: 99px;
    background: var(--kp-bg, #f7f8fc);
    font-size: var(--kv-minuscule, 14px);
    color: var(--kp-text-muted, #64748b);
}

.ksrc-ajout {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--kp-border, #e5e9f0);
}

.ksrc-ajout__titre {
    margin: 0 0 4px;
    font-size: var(--kv-texte, 17.5px);
    font-weight: 700;
}

.ksrc-ajout__aide {
    margin: 0 0 14px;
    font-size: var(--kv-petit, 15.5px);
    color: var(--kp-text-muted, #64748b);
}

.ksrc-ajout__champs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}

/* ============================================================
   DEUX SOURCES QUI NE DISENT PAS LA MÊME CHOSE
   ============================================================

   Le bandeau n'apparaît que lorsqu'il y a vraiment un écart, et disparaît dès
   que le choix est fait. Un bandeau permanent finit par ne plus être lu, et
   c'est exactement ce qu'il ne faut pas pour celui-là. */

.kv-arbitrage {
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--kp-primary, #cc2a74);
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-primary-light, #fdf2f7);
}

.kv-arbitrage__titre {
    margin: 0 0 6px;
    font-size: var(--kv-texte, 17.5px);
    font-weight: 700;
    color: var(--kp-text, #0f172a);
}

.kv-arbitrage__phrase {
    margin: 0 0 14px;
    font-size: var(--kv-petit, 15.5px);
    line-height: 1.55;
    color: var(--kp-text-muted, #64748b);
}

.kv-arbitrage__choix {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
}

/* Chaque bouton porte son chiffre : choisir « Dolibarr » sans voir ce que
   Dolibarr annonce, c'est choisir à l'aveugle. */
.kv-arbitrage__bouton {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font: inherit;
    text-align: left;
    padding: 13px 16px;
    border: 1px solid var(--kp-border-strong, #cbd5e1);
    border-radius: var(--kp-radius-sm, 8px);
    background: var(--kp-white, #fff);
    cursor: pointer;
    transition: border-color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

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

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

.kv-arbitrage__valeur {
    font-size: var(--kv-chiffre-sm, 26px);
    font-weight: 700;
    color: var(--kp-text, #0f172a);
    font-variant-numeric: tabular-nums;
}

@media (max-width: 600px) {
    .kv-arbitrage__bouton { min-height: 56px; }
}

/* ============================================================
   UN BOUTON, TOUTES LES SOURCES
   ============================================================

   Les factures d'une entreprise ne sont plus à un seul endroit, et elles le
   seront encore moins demain. Un bouton par service aurait donné quatre
   boutons qui ne font pas tout à fait la même chose, et un cinquième le jour
   où la plateforme agréée arrive. */

.kv-rapatrier {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin: 0 0 20px;
    padding: 16px 18px;
    border: 1px solid var(--kp-border, #e5e9f0);
    border-radius: var(--kp-radius, 14px);
    background: var(--kp-white, #fff);
}

.kv-rapatrier__mots { flex: 1 1 320px; }

.kv-rapatrier__titre {
    margin: 0 0 4px;
    font-size: var(--kv-texte, 17.5px);
    font-weight: 700;
    color: var(--kp-text, #0f172a);
}

.kv-rapatrier__phrase {
    margin: 0;
    font-size: var(--kv-petit, 15.5px);
    line-height: 1.55;
    color: var(--kp-text-muted, #64748b);
}

.kv-rapatrier form { margin: 0; }

.kv-rapatrier__bouton {
    font: inherit;
    font-size: var(--kv-petit, 15.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;
    white-space: nowrap;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

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

/* Aucune source branchée : le bouton reste visible mais inactif. Le cacher
   ferait croire que la fonction n'existe pas, alors qu'il ne manque qu'une
   connexion — et la phrase à côté dit laquelle. */
.kv-rapatrier__bouton:disabled {
    background: var(--kp-border-strong, #cbd5e1);
    cursor: default;
}

.kv-rapatrier__retour {
    flex: 1 0 100%;
    margin: 0;
    padding-top: 12px;
    border-top: 1px solid var(--kp-border, #e5e9f0);
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
    color: var(--kp-success, #059669);
}

@media (max-width: 600px) {
    .kv-rapatrier__bouton { width: 100%; min-height: 48px; }
    .kv-rapatrier form { flex: 1 0 100%; }
}

/* ==========================================================
   LE DEPOT D'UNE FACTURE RECUE, DANS FINANCE
   ==========================================================
   Il existait deja, mais dans « Affaires et temps passé » : personne ne l'y
   cherchait, et rien dans ce nom ne parle de factures. Il est desormais a
   cote des deux autres entrees — le bouton d'actualisation et l'import en
   tableur — parce qu'une seule entree veut dire un seul ecran.
   ========================================================== */

/* Il garde l'aspect d'une carte, comme ses deux voisines : trois blocs qui se
   ressemblent se lisent comme trois portes vers la meme piece. */
.kp-app-shell .kd-depot {
    transition: border-color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease),
                background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

/* Le fichier survole la zone : la bordure le dit, sinon on ne sait pas si on
   peut lacher. La specificite suit celle de .ku-carte, qui pose la bordure. */
.kp-app-shell .kd-depot--survol {
    border-color: var(--kp-primary, #cc2a74);
    background: var(--kp-primary-light, #fdf2f7);
}

.kd-depot__aide {
    margin: 0 0 14px;
    font-size: var(--kv-petit, 15.5px);
    line-height: 1.55;
    color: var(--kp-text-muted, #64748b);
}

.kd-depot__bouton {
    display: inline-block;
    font-size: var(--kv-petit, 15.5px);
    font-weight: 600;
    padding: 10px 20px;
    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);
}

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

.kd-depot__message {
    margin: 14px 0 0;
    font-size: var(--kv-petit, 15.5px);
    line-height: 1.55;
    color: var(--kp-text-muted, #64748b);
}

.kd-depot__message--succes     { color: var(--kp-success, #15803d); font-weight: 600; }
.kd-depot__message--erreur     { color: var(--kp-error, #b91c1c); font-weight: 600; }
.kd-depot__message--attention  { color: var(--kp-warning, #d97706); font-weight: 600; }

/* ==========================================================
   LES FENETRES MODALES, UNE SEULE FORME
   ==========================================================
   Dix modules ouvrent des fenetres modales, et chacun avait ecrit les
   siennes : trois couleurs de fond different, trois rayons d'angle, une
   ombre en dur, deux tailles de titre, quatre valeurs de marge. La meme
   question posee dans deux modules n'avait pas la meme tete.

   Ce bloc les ramene a une forme commune, celle du module Insights, qui est
   la plus recente et la seule a passer par les jetons.

   CE QUI N'EST JAMAIS TOUCHE ICI : display, position, inset, z-index,
   align-items, justify-content, visibility, opacity. Ce sont eux qui
   ouvrent et ferment la fenetre, et ils different d'un module a l'autre —
   .kcom-modal-open, .kcomm-open, .krh-open, l'attribut hidden. Les
   redefinir ici ouvrirait des fenetres fermees, ou l'inverse.

   Ce bloc ne change donc que l'apparence : le fond, les angles, l'ombre,
   le titre, les filets, le bouton de fermeture.
   ========================================================== */

/* --- Le fond sombre ------------------------------------------------
   Une seule teinte, celle de la famille slate, avec le meme voile partout.
   Noir pur contre bleu ardoise, c'est la difference qu'on remarque en
   passant d'un module a l'autre sans savoir ce qui a change. */
.kp-app-shell .kcom-modal-overlay,
.kp-app-shell .kfin-modal-overlay,
.kp-app-shell .kjur-modal-overlay,
.kp-app-shell .korg-modal-overlay,
.kp-app-shell .kcomm-modal-overlay,
.kp-app-shell .krh-modal-overlay,
.kp-app-shell .kdocs-modal-overlay,
.kp-app-shell .kdocs-preview-overlay,
.kp-app-shell .kperf-modal-overlay,
.kp-app-shell .ku-modal-fond {
    background: rgba(15, 23, 42, 0.5);
}

/* --- Le panneau ----------------------------------------------------
   Angles et ombre seulement. Ni la largeur ni les marges interieures :
   elles portent la mise en page propre a chaque fenetre, et certaines
   n'ont ni en-tete ni pied pour les reprendre. */
.kp-app-shell .kcom-modal-box,
.kp-app-shell .kfin-modal-box,
.kp-app-shell .kjur-modal-box,
.kp-app-shell .korg-modal-box,
.kp-app-shell .kcomm-modal,
.kp-app-shell .krh-modal,
.kp-app-shell .kdocs-modal,
.kp-app-shell .ku-modal {
    border-radius: var(--kp-radius-lg, 20px);
    box-shadow: var(--kp-shadow-lg);
}

/* --- Le titre ------------------------------------------------------
   Un titre de fenetre n'est pas un titre de page : il reste a la taille
   du sous-titre, qui est celle que six modules sur sept employaient
   deja. */
.kp-app-shell .kcom-modal-header h3,
.kp-app-shell .kfin-modal-header h3,
.kp-app-shell .kjur-modal-header h3,
.kp-app-shell .korg-modal-header h3,
.kp-app-shell .kcomm-modal-header h3,
.kp-app-shell .krh-modal-header h3,
.kp-app-shell .kdocs-modal h3,
.kp-app-shell .ku-modal__titre {
    font-size: var(--kv-sous-titre);
    font-weight: 700;
    color: var(--kp-text);
}

/* Le titre pose dans un en-tete n'a pas de marge : c'est l'en-tete qui
   donne la respiration. */
.kp-app-shell .kcom-modal-header h3,
.kp-app-shell .kfin-modal-header h3,
.kp-app-shell .kjur-modal-header h3,
.kp-app-shell .korg-modal-header h3,
.kp-app-shell .kcomm-modal-header h3,
.kp-app-shell .krh-modal-header h3,
.kp-app-shell .ku-modal__titre {
    margin: 0;
}

/* Celui d'une fenetre sans en-tete la porte lui-meme, sinon il colle au
   texte qui le suit. */
.kp-app-shell .kdocs-modal h3 {
    margin: 0 0 10px;
}

/* --- Le filet sous l'en-tete --------------------------------------- */
.kp-app-shell .kcom-modal-header,
.kp-app-shell .kfin-modal-header,
.kp-app-shell .kjur-modal-header,
.kp-app-shell .korg-modal-header,
.kp-app-shell .ku-modal__entete {
    border-bottom: 1px solid var(--kp-border);
}

/* --- Le pied -------------------------------------------------------
   Legerement grise, pour detacher les boutons du contenu. Quatre modules
   le laissaient blanc : on ne voyait plus ou finissait la lecture et ou
   commencaient les actions. */
.kp-app-shell .kcom-modal-footer,
.kp-app-shell .kfin-modal-footer,
.kp-app-shell .kjur-modal-footer,
.kp-app-shell .korg-modal-footer,
.kp-app-shell .ku-modal__pied {
    border-top: 1px solid var(--kp-border);
    background: var(--kp-bg);
}

/* --- Le bouton de fermeture ---------------------------------------- */
.kp-app-shell .kcom-modal-close,
.kp-app-shell .kfin-modal-close,
.kp-app-shell .kjur-modal-close,
.kp-app-shell .korg-modal-close,
.kp-app-shell .kcomm-modal-close,
.kp-app-shell .krh-modal-close {
    border: 0;
    padding: 4px 8px;
    border-radius: var(--kp-radius-sm, 8px);
    font-size: var(--kv-titre);
    line-height: 1;
    color: var(--kp-text-soft);
    cursor: pointer;
    transition: background var(--kp-duree-courte, 150ms) var(--kp-courbe, ease),
                color var(--kp-duree-courte, 150ms) var(--kp-courbe, ease);
}

.kp-app-shell .kcom-modal-close:hover,
.kp-app-shell .kfin-modal-close:hover,
.kp-app-shell .kjur-modal-close:hover,
.kp-app-shell .korg-modal-close:hover,
.kp-app-shell .kcomm-modal-close:hover,
.kp-app-shell .krh-modal-close:hover {
    background: var(--kp-bg);
    color: var(--kp-text);
}

/* --- Le corps ------------------------------------------------------
   La meme respiration que l'en-tete et le pied, pour que les trois
   bandes s'alignent. Les fenetres sans en-tete gardent la leur : leur
   marge est posee sur le panneau, pas ici. */
.kp-app-shell .kcom-modal-body,
.kp-app-shell .kfin-modal-body,
.kp-app-shell .kjur-modal-body,
.kp-app-shell .korg-modal-body,
.kp-app-shell .ku-modal__corps {
    padding: 20px 24px;
}

/* --- La fenetre de confirmation ------------------------------------
   Plus etroite que les autres : elle ne porte qu'une question et deux
   boutons. Elle garde sa largeur, et prend la forme commune. */
.kp-app-shell .krh-confirm-modal {
    border-radius: var(--kp-radius-lg, 20px);
    box-shadow: var(--kp-shadow-lg);
}

/* --- Les boutons d'une fenetre de confirmation ----------------------
   Le module les dispose deja en ligne ; on ne reprend que l'ecart et la
   respiration, pour qu'ils soient les memes que dans les pieds de fenetre
   des autres modules. Pas de display ici : la regle du bloc est de ne
   jamais poser une propriete qui gouverne l'affichage. */
.kp-app-shell .kdocs-modal-btns {
    gap: 10px;
    margin-top: 20px;
}

/* --- La phrase d'explication sous la question ----------------------- */
.kp-app-shell .kdocs-modal-subtext {
    margin: 0 0 16px;
    font-size: var(--kv-petit);
    line-height: 1.55;
    color: var(--kp-text-muted);
}