/* ==========================================
   KKG STYLE BALISES GLOBALES DU SITE
   Utilise les variables de couleurs définies dans les css thème
   ========================================== */
/* ==========================================
   RESET & STRUCTURE DE BASE
   ========================================== */
body, html {
    height: 100%;
    margin: 0;
    font-family: 'DM Sans', sans-serif;
    background-color: var(--bg-primary);
    color: var(--text-primary);
    overflow: hidden;
}

.kkg-body {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

/* ==========================================
   HEADER & NAVIGATION PRINCIPALE
   ========================================== */
.kkg-header {
    height: var(--header-height);
    background-color: var(--bg-header);
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    padding: 0 20px;
    z-index: 1000;
}

.kkg-logo { font-weight: bold; font-size: 1.1rem; margin-right: 40px; white-space: nowrap; }
.kkg-logo span { color: var(--accent); }

.kkg-nav { height: 100%; }

.kkg-menu-horizontal { 
    list-style: none; 
    display: flex; 
    gap: 2px; 
    margin: 0; 
    padding: 0; 
    height: 100%;
    align-items: center;
}

.kkg-nav-item { 
    position: relative; 
    list-style: none;
    height: 100%;
    display: flex;
    align-items: center;
}

.kkg-nav-link {
    box-sizing: border-box; /* sans cela, le padding s'ajoute au width:100% des liens de
                                .kkg-dropdown (box-model par défaut du navigateur) et le
                                fond au survol déborde de la largeur du menu/sous-menu */
    text-decoration: none;
    color: var(--text-secondary);
    padding: 0 15px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 0.9rem;
    transition: 0.2s;
    white-space: nowrap;
}

.kkg-nav-link:hover { color: var(--text-primary); background: var(--overlay-hover-nav); }

/* ==========================================
   DROPDOWN (SOUS-MENUS)
   ========================================== */
.kkg-dropdown {
    position: absolute;
    top: var(--header-height);
    left: 0;
    background-color: var(--bg-header);
    border: 1px solid var(--border-color);
    min-width: 240px;
    padding: 8px 0;
    box-shadow: var(--shadow-dropdown);
    border-radius: 0 0 6px 6px;
    
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-5px);
    transition: all 0.2s ease-in-out;
    
    z-index: 9999;
}

.kkg-nav-item:hover > .kkg-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

.kkg-dropdown .kkg-nav-link {
    width: 100%;
    height: 40px;
    padding: 0 20px;
    border-radius: 0;
    border-bottom: 1px solid var(--overlay-separator);
}

.kkg-dropdown .kkg-nav-link i {
    width: 20px;
    margin-right: 10px;
    color: var(--accent);
    text-align: center;
}

.kkg-dropdown .kkg-nav-item {
    width: 100%;
    height: auto;
    display: block;
}

.kkg-dropdown .kkg-dropdown {
    top: 0;
    left: 100%;
    border-radius: 0 6px 6px 6px;
}

/* ==========================================
   ZONE CENTRALE & FOOTER
   ========================================== */
.kkg-main {
    flex: 1;
    overflow-y: auto;
    padding: 25px;
    background-color: var(--bg-primary);
}

.kkg-footer {
    height: var(--footer-height);
    background-color: var(--bg-header);
    border-top: 1px solid var(--border-color);
    font-size: 0.75rem;
    z-index: 1000;
}

.kkg-status-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 15px;
}

.status-group { display: flex; gap: 20px; align-items: center; }
.status-item i { color: var(--accent); margin-right: 5px; }

.kkg-logout { color: var(--couleur-danger); text-decoration: none; font-weight: bold; }

/* ==========================================
   PAGE DE LOGIN
   ========================================== */
body.login-page {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.login-card {
    box-sizing: border-box; /* 2026-09-09 : sans cela, padding + border s'ajoutent à width:100%
                                (box-model par défaut du navigateur) et la carte déborde de sa
                                colonne une fois contrainte dans .kkg-portail-col-compte (340px) */
    background: var(--bg-card);
    /* Padding horizontal réduit de 2.5rem à 15px (2026-09-17, demande de
       Stefen) : aligné sur .kkg-widget-body (widget "Vos services" du
       portail connecté) — les pages portail (login, demande d'accès, 2FA)
       doivent aussi s'afficher correctement sur mobile, où 2.5rem de
       chaque côté grignotait trop de largeur utile pour le formulaire.
       Vertical inchangé (respiration au-dessus/en-dessous du logo et du
       titre, non concernée par la demande). */
    padding: 2.5rem 15px;
    border-radius: 12px;
    width: 100%;
    max-width: 400px;
    border: 1px solid var(--border-color);
}

.kkg-form-group { margin: 0; padding: 0 10px;}
.kkg-form-group label { 
    display: block; 
    color: var(--text-secondary);
    font-size: 0.75rem;
}
.kkg-form-group input {
    width: 100%;
    padding: 10px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    outline: none;
}
.kkg-form-group input:focus { border-color: var(--accent); }

.btn-login {
    width: 100%;
    padding: 12px;
    background: var(--accent);
    border: none;
    color: var(--text-white);
    font-weight: bold;
    border-radius: 6px;
    cursor: pointer;
}

/* ==========================================
   COMPOSANTS RÉUTILISABLES
   ========================================== */
.kkg-page-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.kkg-page-title { margin: 0; font-size: 1.1rem; }
.kkg-page-title i { color: var(--accent); margin-right: 10px; }

.kkg-table-wrapper {
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.kkg-list-table {
    width: 100%;
    border-collapse: collapse;
}

.kkg-list-table th {
    background: var(--overlay-th-bg);
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
}

.kkg-list-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    font-size: 0.75rem;
}

.kkg-list-table tr:hover { background: var(--overlay-hover-row); }

/* --- Alignement texte --- */
.kkg-align-right {text-align:right;}
.kkg-align-center {text-align: center;}
.kkg-align-left {text-align: left;}


/* ── Badge ───────────────────────────────────── */

.badge {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
}

.badge-petit {
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.6rem;
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

.badge-info { border: 1px solid var(--couleur-neutre); color: var(--couleur-neutre); }
.badge-success { border: 1px solid var(--couleur-success); color: var(--couleur-success); }
.badge-primary { border: 1px solid var(--accent); color: var(--accent); }
.badge-ko { border: 1px solid var(--couleur-danger); color: var(--couleur-danger); }

/* ── Boutons ───────────────────────────────────── */

.kkg-btn {
    padding: 8px 16px;
    border-radius: 6px;
    border: none;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: 0.2s;
}

/* ── Bouton taille réduite ───────────────────────────────────── */
.kkg-btn-sm { padding: 5px 10px; font-size: 0.78rem; }

.kkg-btn-primary { background: var(--accent); color: var(--text-white); }
.kkg-btn-secondary { background: var(--border-color); color: var(--text-primary); }
.kkg-btn:hover { filter: brightness(1.1); }

.kkg-btn-success { background-color: var(--couleur-success); color: var(--text-white); }
.kkg-btn-danger { background-color: var(--couleur-danger); color: var(--text-white); }

/* --- HEADER DE LISTE --- */
.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    background: var(--bg-header);
    padding: 10px 10px;
    border-radius: 8px;
    border: 1px solid var(--border-color);
}

.search-box { display: flex; gap: 10px; }
.search-box input {
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    padding: 8px 15px;
    border-radius: 4px;
    width: 250px;
}

/* --- FOOTER DE LISTE --- */
.list-footer {
    position: sticky;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30px;
    background: var(--bg-list-footer);
    backdrop-filter: blur(5px);
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
    font-size: 0.8rem;
    color: var(--text-secondary);
    z-index: 10;
}

.pagination { display: flex; gap: 5px; }
.pagination-buttons { display: flex; align-items: center; gap: 5px; }
.kkg-input-sm { height: 26px; padding: 2px 5px; font-size: 0.75rem; }

.page-link {
    padding: 2px 8px;
    font-size: 0.8rem;
    min-width: 25px;
    height: 25px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.page-link:hover { background: var(--accent); border-color: var(--accent); color: var(--text-white); }
.page-link.active { background: var(--accent); border-color: var(--accent); color: var(--text-white); }
.page-link:hover:not(.active) { background: var(--overlay-hover-nav); }

/* --- SYSTEME D'ONGLETS --- */
.kkg-tabs-container {
    background: var(--bg-card);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

.kkg-tabs-header {
    display: flex;
    background: var(--bg-tabs-header);
    border-bottom: 1px solid var(--tabs-border);
}

.kkg-tab-link {
    padding: 12px 20px;
    cursor: pointer;
    border: none;
    background: none;
    font-weight: 500;
    color: var(--tab-text-inactive);
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
}

.kkg-tab-link:hover { background: var(--tab-hover-bg); }
.kkg-tab-link.active {
    color: var(--accent);
    border-bottom-color: var(--tab-active-border);
    background: var(--tab-active-bg);
}

.kkg-tab-link i { margin-right: 8px; text-align: center; }
.kkg-tab-content { display: none; padding: 20px; }
.kkg-tab-content.active { display: block; }

/* --- GRILLE DE FORMULAIRE --- */
.kkg-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.kkg-form-section {
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px 15px 5px;
    margin: 10px 0 10px;
    grid-column: 1 / -1;
}

.kkg-form-section legend {
    padding: 0 8px;
    font-weight: 600;
    color: var(--accent); /* Harmonisé avec --accent au lieu d'une variable manquante */
    font-size: 0.95rem;
}

/* --- Nouvelle classe pour mettre 2 sections côte à côte --- */
.kkg-form-section.kkg-section-half {
    grid-column: span 1; /* Prend 1 colonne sur les 2 au lieu de toute la largeur */
    width: 95%;          /* Laisse un espace de sécurité à droite */
    margin: 5px 0;      /* Réduit les marges pour un rendu plus compact */
}

/* --- Modificateur de grille pour passer à 3 colonnes --- */
.kkg-form-grid.kkg-grid-3colonnes {
    grid-template-columns: repeat(3, 1fr);
}

/* --- Nouvelle classe pour mettre 3 sections côte à côte --- */
.kkg-form-section.kkg-section-3colonnes {
    grid-column: span 1; /* Prend 1 colonne sur les 3 au lieu de toute la largeur */
    width: 95%;          /* Laisse un espace de sécurité à droite */
    margin: 5px 0;       /* Réduit les marges pour un rendu plus compact */
}


/* ==========================================
   FORMULAIRES UNIFIÉS
    ========================================== */

/* --- Ligne label + valeur alignée (ex: bloc Totaux) ---
   Le label a une largeur fixe (réglable via --kkg-form-row-label-width)
   et s'aligne à droite : la colonne des champs de saisie démarre
   toujours au même endroit, quelle que soit la longueur du libellé.
   Réutilisable dans tous les formulaires du framework. */
.kkg-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.kkg-form-row label {
    flex: 0 0 var(--kkg-form-row-label-width, 170px);
    text-align: left;
    color: var(--text-secondary);
    font-size: 0.75rem;
}

.kkg-form-row .kkg-form-row-value {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Variante compacte pour les modales/formulaires plus étroits */
.kkg-form-row.kkg-form-row-label-sm label {
    flex-basis: var(--kkg-form-row-label-width, 110px);
}

.kkg-input, 
.kkg-select, 
.kkg-textarea {
    width: 100%;
    padding: 10px 12px;
    background: var(--bg-input);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 6px;
    font-family: inherit;
    font-size: 0.75rem;
    outline: none;
    transition: border-color 0.2s;
}

.kkg-input:focus, 
.kkg-select:focus, 
.kkg-textarea:focus { border-color: var(--accent); }
.kkg-textarea { resize: vertical; min-height: 100px; }

/* ==========================================
   TABLEAUX DE SOUS-LISTES
   ========================================== */
.kkg-sublist-container .kkg-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.kkg-sublist-container .kkg-table th {
    background: var(--overlay-th-bg);
    color: var(--text-secondary);
    padding: 12px 15px;
    text-align: left;
    font-size: 0.75rem;
    text-transform: uppercase;
    border-bottom: 1px solid var(--border-color);
}

.kkg-sublist-container .kkg-table td {
    padding: 12px 15px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
    font-size: 0.75rem;
}

/* ==========================================
   FENETRE MODALE EDITION
   ========================================== */
.kkg-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: var(--bg-modal-overlay);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.kkg-modal-card {
    background-color: var(--bg-secondary);
    border: 1px solid var(--accent);
    border-radius: 12px;
    box-shadow: var(--shadow-modal);
    width: 70%;
    height: 90%;
    min-width: 320px;
    max-width: 1200px;
    margin-left: 20px;
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.kkg-modal-body {
    padding: 20px;
    background-color: var(--bg-secondary);
    flex: 1;
    overflow-y: auto;
}

.kkg-modal-header {
    flex-shrink: 0;
    background: var(--bg-primary);
    padding: 15px 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* ==========================================
   ÉDITEUR RICHTEXT (Quill)
   ========================================== */
.kkg-quill-wrapper {
    margin-bottom: 15px;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.kkg-quill-wrapper .ql-toolbar.ql-snow {
    background: var(--bg-input);
    border: none;
    border-bottom: 1px solid var(--border-color);
}

.kkg-quill-wrapper .ql-container.ql-snow {
    border: none;
}

.kkg-quill-wrapper .ql-editor {
    background: var(--bg-secondary);
    color: var(--text-primary);
    min-height: 200px;
}

.kkg-quill-wrapper .ql-editor.ql-blank::before {
    color: var(--text-secondary);
    font-style: italic;
}

/* ==========================================
   AUTOCOMPLETE
   ========================================== */
.kkg-autocomplete-container {
    position: relative;
    width: 100%;
}

.kkg-autocomplete-suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: 0 0 8px 8px;
    z-index: 1000;
    max-height: 200px;
    overflow-y: auto;
    box-shadow: var(--shadow-autocomplete);
}

.kkg-autocomplete-item {
    padding: 10px;
    cursor: pointer;
    color: var(--text-primary);
    border-bottom: 1px solid var(--overlay-autocomplete-sep);
}

.kkg-autocomplete-item:hover {
    background-color: var(--accent);
    color: var(--text-white);
}

.kkg_texte {
    color: var(--text-secondary);
    font-size: 0.75rem;
}

/* ═══════════════════════════════════════════════════════════════
   Styles — plugins kkg_plug_parametre_*
   Complément à kkg_style.css — uniquement ce qui n'existe pas
   ═══════════════════════════════════════════════════════════════ */

/* ── Alertes (success / danger) ──────────────────────────────── */
.kkg-alert {
    padding: 10px 14px;
    border-radius: 6px;
    font-size: 0.82rem;
    margin-bottom: 14px;
    border: 1px solid;
}
.kkg-alert-success { background: rgba(var(--couleur-success-rgb, 40,167,69), .12); border-color: var(--couleur-success); color: var(--couleur-success); }
.kkg-alert-danger  { background: rgba(var(--couleur-danger-rgb,  220,53,69),  .12); border-color: var(--couleur-danger);  color: var(--couleur-danger);  }

/* ── Champ obligatoire ───────────────────────────────────────── */
.kkg-required { color: var(--couleur-danger); margin-left: 2px; }

/* ── Champs à corriger : récapitulatif en tête du formulaire
      (kkg_js.js : kkgfw_form_afficher_erreurs) ─────────────────── */
.kkg-card > .kkg-form-erreurs { margin: 12px 15px 0; }
.kkg-form-erreurs ul { margin: 6px 0 0 20px; padding: 0; }
.kkg-form-erreurs li { margin: 2px 0; }
.kkg-form-erreurs a { color: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }
.kkg-tab-link.kkg-tab-erreur { color: var(--couleur-danger); }
.kkg-tab-link.kkg-tab-erreur::after { content: ' \25CF'; color: var(--couleur-danger); font-size: 0.7em; vertical-align: super; }

/* ── Checkbox inline ─────────────────────────────────────────── */
.kkg-checkbox-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 0.87rem;
    color: var(--text-primary);
}

/* ── Layout split liste / formulaire ─────────────────────────── */
.kkg-param-body {
    display: flex;
    min-height: 420px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
    margin-top: 10px;
    background: var(--bg-header);
}

/* Panneau liste gauche */
.kkg-param-list-panel {
    width: 40%;
    flex-shrink: 0;
    border-right: 1px solid var(--border-color);
    display: flex;
    flex-direction: column;
}

.kkg-param-list-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Zone de recherche ajoutée par kkg_js.js à droite du bouton « Créer » */
.kkg-param-list-search {
    flex: 1;
    min-width: 0;
    width: auto;
    padding: 5px 10px;
    font-size: 0.82rem;
}

.kkg-param-list {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}

.kkg-param-list-item a {
    display: flex;
    flex-direction: column;
    padding: 9px 14px;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: background 0.12s, border-color 0.12s;
}
.kkg-param-list-item a:hover       { background: var(--overlay-hover-row); }
.kkg-param-list-item-active a      { background: var(--overlay-hover-row); border-left-color: var(--accent); }

.kkg-param-list-main  { font-size: 0.85rem; font-weight: 500; color: var(--text-primary); }
.kkg-param-list-sub   { font-size: 0.75rem; color: var(--text-secondary); margin-top: 1px; }
.kkg-param-list-empty { padding: 16px; font-size: 0.82rem; color: var(--text-secondary); font-style: italic; text-align: center; }

/* Panneau formulaire droite */
.kkg-param-form-panel {
    flex: 1;
    padding: 20px 24px;
    overflow-y: auto;
    min-width: 0;
}

.kkg-param-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 180px;
    height: 100%;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-style: italic;
}
.kkg-param-placeholder a { color: var(--accent); }

.kkg-param-form-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-color);
}

.kkg-param-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--border-color);
}

/* Surcharge kkg-form-grid : colonne unique dans les paramètres */
.kkg-param-form-panel .kkg-form-grid {
    grid-template-columns: 1fr;
    max-width: 460px;
}

/* ═══════════════════════════════════════════════════════════════
   Styles — MESSAGE AVERTISSEMENT
   ═══════════════════════════════════════════════════════════════ */

/* Avertissement WARN */
.kkg-msg-warn {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 10px;
    padding: 6px 10px;
    border-left: 3px solid var(--warning, #f0a500);
    background: var(--bg-header);
}

/* ═══════════════════════════════════════════════════════════════
   ARBORESCENCE GÉNÉRIQUE — kkg-arbre-*
   Réutilisée par tout plugin affichant une structure hiérarchique
   (modèle arbo, dossiers GED, catégories GED, menus, etc.)
   À utiliser dans le panneau gauche de .kkg-param-body
   ═══════════════════════════════════════════════════════════════ */

.kkg-arbre-tree {
    list-style: none;
    margin: 0;
    padding: 4px 0;
    overflow-y: auto;
    flex: 1;
}

/* Un nœud de l'arbre */
.kkg-arbre-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px 7px 12px;
    border-left: 3px solid transparent;
    cursor: default;
    transition: background 0.12s, border-color 0.12s;
    font-size: 0.85rem;
}

.kkg-arbre-node:hover {
    background: var(--overlay-hover-row);
}

.kkg-arbre-node-active {
    background: var(--overlay-hover-row);
    border-left-color: var(--accent);
}

/* Surbrillance d'un nœud correspondant à un filtre actif */
.kkg-arbre-node-match .kkg-arbre-node-label {
    color: var(--accent);
    font-weight: 600;
}

/* Icônes dossier / feuille */
.kkg-arbre-icon-folder,
.kkg-arbre-icon-leaf {
    color: var(--accent);
    width: 16px;
    text-align: center;
    flex-shrink: 0;
    font-size: 0.9rem;
}
.kkg-arbre-icon-leaf {
    color: var(--text-secondary);
}

/* Libellé cliquable du nœud */
.kkg-arbre-node-label {
    flex: 1;
    min-width: 0;
    color: var(--text-primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kkg-arbre-node-label:hover {
    color: var(--accent);
}

/* Actions à droite du nœud (édition / suppression) — masquées sauf au survol */
.kkg-arbre-node-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.12s;
}
.kkg-arbre-node:hover .kkg-arbre-node-actions {
    opacity: 1;
}

/* Barre de filtres au-dessus de l'arbre */
.kkg-arbre-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    padding: 10px 12px;
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    margin-bottom: 10px;
}

.kkg-arbre-filter-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 160px;
}
.kkg-arbre-filter-item label {
    font-size: 0.72rem;
    color: var(--text-secondary);
}

.kkg-arbre-filter-actions {
    display: flex;
    gap: 8px;
}

/* Panneau gauche contenant l'arbre — flex column pour que la liste scrolle */
.kkg-arbre-panel {
    display: flex;
    flex-direction: column;
}

/* Badge générique affiché dans un nœud (ex: organisation, type, statut) */
.kkg-arbre-node-badge {
    font-size: 0.68rem;
    padding: 1px 6px;
    border-radius: 10px;
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    color: var(--text-secondary);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   LISTE GÉNÉRIQUE — kkg-liste-*
   Réutilisée par tout plugin affichant une liste d'éléments dans le
   panneau droit (documents GED, sous-listes, etc.)
   ═══════════════════════════════════════════════════════════════ */

/* En-tête de la zone droite */
.kkg-liste-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-color);
    background: var(--bg-header);
    border-radius: 6px 6px 0 0;
    gap: 10px;
    flex-wrap: wrap;
}
.kkg-liste-header-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 7px;
}
.kkg-liste-header-desc {
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 6px 16px 10px;
    border-bottom: 1px solid var(--border-color);
}
.kkg-liste-count {
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Conteneur scrollable de la liste */
.kkg-liste-items {
    flex: 1;
    overflow-y: auto;
}

/* Ligne d'élément */
.kkg-liste-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s;
}
.kkg-liste-item:last-child { border-bottom: none; }
.kkg-liste-item:hover { background: var(--overlay-hover-row); }
.kkg-liste-item.unavailable .kkg-liste-item-titre {
    color: var(--text-secondary);
    font-style: italic;
}

.kkg-liste-item-icon {
    color: var(--accent);
    font-size: 1.1rem;
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}
.kkg-liste-item-icon.unavailable { color: var(--text-secondary); }

.kkg-liste-item-info { flex: 1; min-width: 0; }
.kkg-liste-item-titre {
    font-size: 0.88rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.kkg-liste-item-sub {
    font-size: 0.74rem;
    color: var(--text-secondary);
    margin-top: 2px;
}

.kkg-liste-item-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════
   PAGINATION GÉNÉRIQUE — kkg-pagination-*
   Compatible kkgfw_frm_get_paginated_data() / kkgfw_frm_paginate_array()
   ($_GET['p'] = page courante)
   ═══════════════════════════════════════════════════════════════ */

.kkg-pagination-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
    flex-wrap: wrap;
}

.kkg-pagination-info {
    font-size: 0.74rem;
    color: var(--text-secondary);
    white-space: nowrap;
}

.kkg-pagination-links {
    display: flex;
    align-items: center;
    gap: 4px;
}

.kkg-pagination-links a,
.kkg-pagination-links span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    background: var(--bg-input);
}

.kkg-pagination-links a:hover {
    border-color: var(--accent);
    color: var(--accent);
}

.kkg-pagination-links .kkg-pagination-active {
    background: var(--accent);
    color: var(--text-white);
    border-color: var(--accent);
    font-weight: 600;
}

.kkg-pagination-links .kkg-pagination-disabled {
    opacity: 0.4;
    pointer-events: none;
}

.kkg-pagination-links .kkg-pagination-ellipsis {
    border: none;
    background: transparent;
    color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════════════════════
   DASHBOARD & WIDGETS
   À ajouter dans kkg_style.css
   Utilise exclusivement les variables définies dans kkg_theme_*.css
   ═══════════════════════════════════════════════════════════════ */

/* --- Conteneur principal dashboard --- */
.kkg-dashboard-container {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* --- Grille 3 colonnes, unique pour tout le dashboard ---
   row dense : une carte courte remonte combler le trou laissé à côté
   d'une carte longue, au lieu d'une ligne qui s'étire sur le plus long widget. */
.kkg-dashboard-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-auto-flow: row dense;
    gap: 16px;
    align-items: start;
}

/* Disposition « maçonnerie » posée par kkgfw_dashboard_maconnerie() (kkg_js.js) :
   lignes de 2px, chaque carte couvre autant de lignes que sa hauteur + l'écart.
   L'écart vertical est donc porté par le calcul, plus par row-gap. */
.kkg-dashboard-grid--maconnerie { grid-auto-rows: 2px; row-gap: 0; }

/* --- Wrapper widget dans la grille --- */
.kkg-dashboard-widget { width: 100%; min-width: 0; }
.kkg-dashboard-widget--span2 { grid-column: span 2; }
.kkg-dashboard-widget--span3 { grid-column: span 3; }

/* --- Carte widget : réutilise le style kkg-table-wrapper --- */
.kkg-widget {
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

/* En-tête widget : même traitement que les th du framework */
.kkg-widget-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 15px;
    background: var(--overlay-th-bg);
    border-bottom: 1px solid var(--border-color);
}

.kkg-widget-titre {
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-transform: uppercase;
}

.kkg-widget-body {
    padding: 10px 15px;
}

.kkg-widget-vide {
    font-size: 0.75rem;
    color: var(--text-secondary);
    text-align: center;
    padding: 20px 0;
    font-style: italic;
}

/* --- Tableau interne au widget : réutilise kkg-list-table --- */
.kkg-widget-tableau {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.75rem;
}

.kkg-widget-tableau th {
    background: var(--overlay-th-bg);
    color: var(--text-secondary);
    font-size: 0.75rem;
    text-transform: uppercase;
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    font-weight: 500;
    text-align: left;
}

.kkg-widget-tableau td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border-color);
    color: var(--text-primary);
}

.kkg-widget-tableau tr:last-child td { border-bottom: none; }
.kkg-widget-tableau tr:hover { background: var(--overlay-hover-row); }

/* Ligne en alerte (échéance dépassée) */
.kkg-widget-ligne--alerte td { color: var(--couleur-danger); }

/* --- En-tête du dashboard --- */
.kkg-dashboard-salutation {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
}
.kkg-dashboard-date {
    margin: 2px 0 0;
    font-size: 0.75rem;
    color: var(--text-secondary);
}

/* --- Tuiles KPI (get_kpis() type 'tuile') --- */
.kkg-dashboard-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}
.kkg-kpi {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding: 12px 15px 10px;
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: var(--shadow-card);
    color: inherit;
    text-decoration: none;
}
a.kkg-kpi:hover { border-color: var(--accent); }
.kkg-kpi-libelle {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.kkg-kpi-valeur {
    font-size: 1.35rem;
    font-weight: 600;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}
.kkg-kpi-valeur small { font-size: 0.75rem; font-weight: 500; color: var(--text-secondary); }
.kkg-kpi--ok .kkg-kpi-valeur      { color: var(--couleur-success); }
.kkg-kpi--danger .kkg-kpi-valeur  { color: var(--couleur-danger); }
.kkg-kpi--warning .kkg-kpi-valeur { color: var(--couleur-warning); }
.kkg-kpi-pied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 24px;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.kkg-kpi-evolution { white-space: nowrap; }
.kkg-kpi-delta--bon     { font-weight: 600; color: var(--couleur-success); }
.kkg-kpi-delta--mauvais { font-weight: 600; color: var(--couleur-danger); }
.kkg-sparkline { flex: none; width: 80px; height: 24px; }

/* --- Pastilles « À traiter » (get_kpis() type 'pastille') --- */
.kkg-dashboard-atraiter {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}
.kkg-dashboard-atraiter-titre {
    margin-right: 4px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-secondary);
}
.kkg-pastille {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 12px 4px 4px;
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text-primary);
    text-decoration: none;
}
.kkg-pastille:hover { border-color: var(--accent); }
.kkg-pastille-nb {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--text-white);
    font-size: 0.7rem;
    font-weight: 600;
}
.kkg-pastille--danger .kkg-pastille-nb { background: var(--couleur-danger); }
.kkg-pastille--zero { color: var(--text-secondary); }
.kkg-pastille--zero .kkg-pastille-nb { background: var(--bg-input); color: var(--text-secondary); }

/* --- Carte widget dans le dashboard : hauteur bornée ---
   Limité au dashboard : .kkg-widget sert aussi au portail client. */
.kkg-dashboard-widget .kkg-widget { box-shadow: var(--shadow-card); }
.kkg-dashboard-widget .kkg-widget-body { max-height: 320px; overflow-y: auto; }
.kkg-dashboard-widget .kkg-widget-body--graphique { max-height: none; }
.kkg-dashboard-widget .kkg-widget-vide { padding: 8px 0; }
.kkg-widget-body--liste { padding: 4px 0; }

/* En-tête : compteur et total à droite du titre */
.kkg-widget-header-infos {
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}
.kkg-widget-compteur {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--bg-input);
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-secondary);
}
.kkg-widget-total {
    font-size: 0.75rem;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Résumé sous l'en-tête (« En retard 9 450 € · Sous 7 j 6 120 € ») */
.kkg-widget-resume {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    padding: 8px 15px 0;
    font-size: 0.7rem;
    color: var(--text-secondary);
}
.kkg-widget-resume strong { font-weight: 600; color: var(--text-primary); }
.kkg-widget-resume--danger strong { color: var(--couleur-danger); }

/* Ligne de liste sur deux niveaux : nom / complément à gauche, montant / échéance à droite */
.kkg-widget-ligne {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 1px 12px;
    padding: 7px 15px;
    color: inherit;
    text-decoration: none;
}
.kkg-widget-ligne + .kkg-widget-ligne { border-top: 1px solid var(--border-color); }
a.kkg-widget-ligne:hover { background: var(--overlay-hover-row); }
.kkg-widget-ligne-nom,
.kkg-widget-ligne-sub {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.kkg-widget-ligne-nom { font-size: 0.78rem; font-weight: 500; color: var(--text-primary); }
.kkg-widget-ligne-sub { font-size: 0.7rem; color: var(--text-secondary); }
.kkg-widget-ligne-nom--multiligne { white-space: normal; }
.kkg-widget-ligne-droite {
    text-align: right;
    white-space: nowrap;
    font-size: 0.78rem;
    font-variant-numeric: tabular-nums;
    color: var(--text-primary);
}

/* Étiquette d'échéance (kkg_lib_dashboard::etiquette_echeance()) */
.kkg-ech {
    display: inline-block;
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--bg-input);
    font-size: 0.65rem;
    font-weight: 600;
    white-space: nowrap;
    color: var(--text-secondary);
}
.kkg-ech--retard { color: var(--couleur-danger);  background: color-mix(in srgb, var(--couleur-danger) 12%, transparent); }
.kkg-ech--proche { color: var(--couleur-warning); background: color-mix(in srgb, var(--couleur-warning) 14%, transparent); }
.kkg-ech--ok     { color: var(--couleur-success); background: color-mix(in srgb, var(--couleur-success) 12%, transparent); }

/* Pied de carte : « 8 sur 27 · Voir tout → » */
.kkg-widget-pied {
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 15px;
    border-top: 1px solid var(--border-color);
    font-size: 0.72rem;
    color: var(--text-secondary);
}
.kkg-widget-pied a { margin-left: auto; color: var(--accent); text-decoration: none; }
.kkg-widget-pied a:hover { text-decoration: underline; }

/* --- Responsive --- */
@media (max-width: 1100px) {
    .kkg-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .kkg-dashboard-widget--span3 { grid-column: span 2; }
}
@media (max-width: 700px) {
    .kkg-dashboard-grid { grid-template-columns: minmax(0, 1fr); }
    /* Tuiles KPI : 2 par ligne pour ne pas occuper tout le premier écran */
    .kkg-dashboard-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kkg-kpi { padding: 10px 12px 8px; }
    .kkg-kpi-valeur { font-size: 1.1rem; }
    .kkg-sparkline { display: none; }
    .kkg-dashboard-widget--span2,
    .kkg-dashboard-widget--span3 { grid-column: span 1; }
}

/* ═══════════════════════════════════════════════════════════════
   PROFIL / WIDGETS (plugin par_profil_widget)
   Classes partagées avec par_profil_menu
   ═══════════════════════════════════════════════════════════════ */

/* Barre de sélection du profil */
.kkg-profil-select-bar {
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 10px 16px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
}

.kkg-profil-count {
    font-size: 0.75rem;
    color: var(--text-secondary);
    font-style: italic;
    white-space: nowrap;
}

/* Corps de la liste associations */
.kkg-profils-menus-body {
    background: var(--bg-header);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

/* Barre d'outils (tout cocher / décocher / enregistrer) */
.kkg-profils-menus-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
    background: var(--overlay-th-bg);
}

/* ═══════════════════════════════════════════════════════════════
   ACCUEIL PORTAIL CLIENT — mise en page 2 colonnes (brique 15)
   Framework-level : réutilisé par templates/kkg_tpl_login_portail.php
   (framework) et par toute surcharge dossier client
   (espace-client/login_portail.php) — colonne compte (login, puis
   infos client une fois connecté, puis alertes) à gauche, grille des
   plugins portail publics (kkg_lib_portail::get_widgets_publics()) à
   droite. Réutilise .kkg-widget / .login-card / .kkg-btn existants
   pour le chrome des cartes plutôt que d'en recréer.
   ═══════════════════════════════════════════════════════════════ */

.kkg-portail-accueil { max-width: 1180px; margin: 0 auto; }

/* Écran seul (2FA, ou toute étape sans grille de plugins à côté) :
   simple centrage horizontal de la carte, layout 2 colonnes non utilisé. */
.kkg-portail-accueil--seul { max-width: 460px; }

.kkg-portail-layout {
    display: flex;
    align-items: flex-start;
    gap: 28px;
}

.kkg-portail-col-compte { width: 340px; flex: 0 0 340px; }
.kkg-portail-col-compte .login-card { max-width: none; }

/* Logo du dossier (brique 22) : au-dessus de la raison sociale dans la
   carte compte de l'accueil connecté (plugins/portail/templates/
   kkg_plug_tpl_portail.php). Rendu via kkg_lib_file_image::
   kkgfw_image_to_base64(), qui renvoie une balise <img> déjà stylée en
   inline (voir kkg_plug_portail.php) — pas de classe CSS dédiée, cette
   fonction framework ne prend qu'un paramètre style, pas class. */

.kkg-portail-col-plugins { flex: 1 1 auto; min-width: 0; }

.kkg-portail-plugins-titre {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-secondary);
    margin: 0 0 12px;
}

/* 2026-09-12 (demande de Stefen) : passage de CSS Grid à un layout
   multi-colonnes (column-width). Avec Grid (repeat(auto-fill, ...)), le
   placement se fait ligne par ligne : la hauteur de la ligne 1 est celle
   du plugin le plus haut, donc un plugin court laisse un grand vide sous
   lui avant que la ligne 2 démarre, même si visuellement il partage sa
   "colonne" avec un plugin plus court. column-width fait l'inverse :
   chaque colonne se remplit de haut en bas indépendamment (comme du
   Pinterest), donc les plugins s'enchaînent directement les uns sous les
   autres sans espace, quelle que soit leur hauteur respective. Le nombre
   de colonnes reste automatique (responsive) comme avec l'ancien
   minmax(340px, 1fr). break-inside: avoid sur .kkg-portail-plugin-widget
   (ci-dessous) empêche un plugin d'être coupé entre deux colonnes. */
.kkg-portail-plugin-grid {
    column-width: 340px;
    column-gap: 20px;
}

/* Espace intérieur gauche/droite réduit le 2026-09-11 (demande de Stefen :
   "réduire l'espace gauche et droit entre les contenus et le bord des
   plugin à l'intérieure") — vertical inchangé (18px), horizontal réduit à
   10px. */
.kkg-portail-plugin-widget {
    break-inside: avoid;
    margin-bottom: 20px;
}

.kkg-portail-plugin-widget .kkg-widget-body { padding: 18px 10px; }

.kkg-portail-plugin-desc {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0 0 14px;
}

.kkg-portail-plugin-widget .kkg-widget-header a {
    font-size: 0.7rem;
    color: var(--text-secondary);
    text-decoration: none;
    white-space: nowrap;
}
.kkg-portail-plugin-widget .kkg-widget-header a:hover { color: var(--accent); }

.kkg-portail-plugin-widget--vide { text-align: center; }

@media (max-width: 900px) {
    .kkg-portail-layout { flex-direction: column; }
    .kkg-portail-col-compte { width: 100%; flex-basis: auto; }
    .kkg-portail-col-compte .login-card { max-width: 460px; margin: 0 auto; }
}

/* ===== Signature électronique (espace client) ===== */
.kkg-signature-lecture {
    max-height: 60vh;
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 10px;
    background: var(--text-white);
    margin-bottom: 16px;
}

.kkg-signature-lecture--pdf {
    padding: 0;
}

.kkg-signature-iframe-pdf {
    width: 100%;
    height: 60vh;
    border: none;
    display: block;
}

/* Rendu PDF.js (remplace l'iframe quand disponible — cf. kkg_js_pdf_viewer.js) :
   pages empilées, le scroll se fait sur .kkg-signature-lecture elle-même (pour
   que la détection "a atteint le bas" fonctionne, contrairement à l'iframe dont
   le contenu interne n'est pas observable depuis la page parente). */
.kkg-signature-pdf-pages {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 8px;
}

.kkg-signature-pdf-page {
    max-width: 100%;
    box-shadow: 0 1px 4px var(--overlay-hover-row, rgba(0, 0, 0, 0.15));
}

.kkg-signature-gate {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}

.kkg-signature-gate-hint {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin-left: 4px;
}

.kkg-signature-canvas-wrap {
    border: 1px dashed var(--border-color);
    border-radius: 6px;
    background: var(--text-white);
    display: inline-block;
    margin-bottom: 10px;
    touch-action: none;
}

.kkg-signature-canvas {
    display: block;
    width: 100%;
    max-width: 420px;
    height: 180px;
    cursor: crosshair;
}

.kkg-signature-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.kkg-signature-statut {
    font-size: 0.82rem;
    margin-top: 10px;
}
.kkg-signature-statut--erreur { color: var(--couleur-danger); }
.kkg-signature-statut--ok { color: var(--couleur-success); }
/* ═══════════════════════════════════════════════════════════════
   PETITS ÉCRANS (mobile et tablette) — back-office ET espace client
   Un seul jeu de templates : cette section réorganise l'affichage,
   aucun rendu spécifique côté serveur.
     1. Navigation en tiroir : sous 900 px de large OU écran tactile
        (les sous-menus au survol ne s'ouvrent pas au doigt, même sur
        une tablette large).
     2. Contenu (formulaires, tableaux, modale) : sous 900 px seulement.
   Classes à poser dans un template pour profiter du mode mobile :
     .kkg-table-cartes  sur un .kkg-list-table : chaque ligne devient
                        une carte ; data-label="..." sur un <td>
                        affiche son intitulé (sans data-label : valeur seule).
     .kkg-actions-mobile sur le conteneur des boutons d'une fiche :
                        barre d'actions fixe en bas de l'écran.
   ═══════════════════════════════════════════════════════════════ */

/* Bouton du menu et voile : invisibles sur grand écran */
.kkg-menu-bouton { display: none; }
.kkg-menu-voile  { display: none; }

@media (max-width: 900px), (pointer: coarse) {

    .kkg-header { padding: 0 12px; }
    .kkg-logo   { margin-right: 0; }

    .kkg-menu-bouton {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-right: 10px;
        background: none;
        border: none;
        color: var(--text-primary);
        font-size: 1.2rem;
        cursor: pointer;
    }

    /* Le menu horizontal devient un tiroir latéral */
    .kkg-nav {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        width: 80%;
        max-width: 320px;
        height: auto;
        background: var(--bg-header);
        border-right: 1px solid var(--border-color);
        box-shadow: var(--shadow-dropdown);
        overflow-y: auto;
        transform: translateX(-100%);
        transition: transform 0.2s ease-in-out;
        z-index: 9998;
    }
    .kkg-menu-ouvert .kkg-nav { transform: translateX(0); }

    /* .kkg-header (z-index 1000) forme un contexte d'empilement : le tiroir, qui est
       dedans, ne peut passer au-dessus du voile (hors de l'en-tête) que si l'en-tête
       lui-même est remonté au-dessus du voile. */
    .kkg-menu-ouvert .kkg-header { z-index: 9998; }

    .kkg-menu-ouvert .kkg-menu-voile {
        display: block;
        position: fixed;
        inset: 0;
        background: var(--bg-modal-overlay);
        z-index: 9997;
    }

    .kkg-menu-horizontal {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        height: auto;
        padding: 10px 0;
    }
    .kkg-nav-item { display: block; height: auto; }
    .kkg-nav-link { height: 46px; padding: 0 18px; white-space: normal; }
    .kkg-nav-link .fa-caret-down { display: none; }

    /* Sous-menus toujours dépliés, en retrait (plus de survol) */
    .kkg-dropdown,
    .kkg-dropdown .kkg-dropdown {
        position: static;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: none;
        min-width: 0;
        padding: 0 0 0 14px;
        border: none;
        box-shadow: none;
        border-radius: 0;
    }
    .kkg-dropdown .kkg-nav-link { height: 42px; padding: 0 18px; border-bottom: none; }

    /* Entrées de menu non cochées « Visible sur Mobile ». Sélecteur renforcé : la règle
       de base « .kkg-dropdown .kkg-nav-item { display: block } » (2 classes) l'emportait
       sur une classe seule et réaffichait les entrées des sous-menus. */
    .kkg-nav .kkg-nav-item.kkg-nav-nomobile { display: none; }

    /* Champs : 16px minimum, sinon iOS zoome à la prise de focus */
    .kkg-input, .kkg-select, .kkg-textarea,
    .kkg-form-group input, .search-box input { font-size: 16px; }
}

@media (max-width: 900px) {

    .kkg-body { height: 100dvh; }
    .kkg-main { padding: 12px; }

    /* Pied de page : uniquement l'utilisateur et la déconnexion */
    .kkg-status-secondaire { display: none; }
    .kkg-status-bar { padding: 0 12px; }

    /* En-têtes de liste et de fiche */
    .list-header { flex-wrap: wrap; gap: 10px; }
    .search-box  { flex-wrap: wrap; width: 100%; }
    .search-box form { flex: 1 1 100%; flex-wrap: wrap; }
    .search-box input { flex: 1; width: auto; min-width: 0; }
    .list-footer { height: auto; flex-wrap: wrap; gap: 6px; padding: 6px 12px; }

    /* Formulaires sur une colonne */
    .kkg-form-grid,
    .kkg-form-grid.kkg-grid-3colonnes { grid-template-columns: 1fr; }
    .kkg-form-row { flex-wrap: wrap; gap: 4px; }
    .kkg-form-row label { flex-basis: 100%; }
    .kkg-form-row .kkg-form-row-value { flex: 1 1 100%; }
    .kkg-tab-content { padding: 12px; }
    /* Onglets : passage à la ligne (un défilement horizontal ne se voit pas sur mobile) */
    .kkg-tabs-header { flex-wrap: wrap; }
    .kkg-tab-link { flex: 1 1 auto; padding: 10px 12px; text-align: left; }

    /* En-tête d'une fiche (titre + boutons) : sur plusieurs lignes */
    .kkg-card-header { flex-wrap: wrap; gap: 10px; padding: 10px 12px !important; }
    .kkg-card-header h2 { white-space: normal !important; font-size: 1.05rem; }
    .kkg-card-body { padding: 10px 0 !important; }

    /* Écrans de paramètres : liste au-dessus du formulaire */
    .kkg-param-body { flex-direction: column; }
    .kkg-param-list-panel { width: 100%; border-right: none; border-bottom: 1px solid var(--border-color); }
    .kkg-param-form-panel { padding: 14px; }

    /* Modale plein écran */
    .kkg-modal-card {
        width: 100%;
        height: 100%;
        min-width: 0;
        max-width: none;
        margin: 0;
        border: none;
        border-radius: 0;
    }
    /* 100dvh : hauteur réellement visible (100vh passe sous la barre du navigateur mobile,
       ce qui cachait les boutons en bas de la modale). min-height: 0 : le corps peut
       rétrécir et défiler à l'intérieur de la carte. */
    .kkg-modal-overlay { height: 100dvh; }
    .kkg-modal-body { padding: 14px; min-height: 0; }

    /* Tableaux : défilement horizontal par défaut... */
    .kkg-table-wrapper,
    .kkg-sublist-container { overflow-x: auto; }

    /* ...ou une carte par ligne (.kkg-table-cartes) */
    .kkg-table-wrapper:has(> .kkg-table-cartes) { background: none; border: none; overflow: visible; }
    .kkg-table-cartes thead { display: none; }
    .kkg-table-cartes,
    .kkg-table-cartes tbody { display: block; }
    .kkg-table-cartes tr {
        display: block;
        background: var(--bg-card);
        border: 1px solid var(--border-color);
        border-radius: 10px;
        box-shadow: var(--shadow-card);
        padding: 8px 12px;
        margin-bottom: 8px;
    }
    .kkg-table-cartes td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 12px;
        width: auto !important;
        padding: 4px 0;
        border-bottom: none;
        font-size: 0.85rem;
        text-align: right !important;
    }
    .kkg-table-cartes td:empty { display: none; }
    .kkg-table-cartes td[data-label]::before {
        content: attr(data-label);
        color: var(--text-secondary);
        font-size: 0.75rem;
        text-align: left;
        flex-shrink: 0;
    }
    .kkg-table-cartes td.kkg-carte-titre { font-weight: 600; font-size: 0.92rem; text-align: left !important; justify-content: flex-start; }

    /* Barre d'actions d'une fiche, fixe au-dessus du pied de page */
    .kkg-actions-mobile {
        position: fixed;
        left: 0;
        right: 0;
        bottom: var(--footer-height);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding: 8px 12px;
        background: var(--bg-header);
        border-top: 1px solid var(--border-color);
        z-index: 900;
    }
    .kkg-actions-mobile .kkg-header-commands { display: flex !important; flex: 1; flex-wrap: wrap; gap: 8px !important; }
    .kkg-actions-mobile .kkg-btn { flex: 1; justify-content: center; min-height: 42px; }
    /* Menu « Plus d'actions » : s'ouvre vers le haut depuis la barre du bas */
    .kkg-actions-mobile .kkg-btn-dropdown { flex: 1; display: flex !important; }
    .kkg-actions-mobile .kkg-btn-dropdown-menu { top: auto !important; bottom: 100%; margin-bottom: 5px; }
    .kkg-main:has(.kkg-actions-mobile) { padding-bottom: 76px; }

    /* Grille large (planning...) : première colonne figée pendant le défilement horizontal */
    .kkg-table-colonne-fixe th:first-child,
    .kkg-table-colonne-fixe td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        width: 110px !important;
        min-width: 110px;
        background: var(--bg-header);
        border-right: 1px solid var(--border-color);
    }
}