/* KKNMLC_PAYLOAD1_V1 */
/* SECTION K — public/assets/css/theme.css
   Apparence commune KKNMLC. Aucune logique. Variables reglables plus tard via Options. */

:root {
    /* MIGRÉ vers KKNMLC_PONT_VARIABLES_V1 — ancienne valeur conservée pour référence */
    /* --couleur-fond: #f5f6f8; */
    /* MIGRÉ vers KKNMLC_PONT_VARIABLES_V1 — ancienne valeur conservée pour référence */
    /* --couleur-texte: #1c1f26; */
    /* MIGRÉ vers KKNMLC_PONT_VARIABLES_V1 — ancienne valeur conservée pour référence */
    /* --couleur-accent: #2d6cdf; */
    --police-base: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --largeur-max-contenu: 900px;
    --hauteur-note: 120px;
    --cible-tactile-min: 44px;
}

/* === KKNMLC_PONT_VARIABLES_V1 === */
/* Pont entre variables.css (palette moderne) et theme.css (ancien système) */
/* Date: 20260629-002827 - Étape 2/25 refonte visuelle */
/* NOTE: noms de var() alignés sur les variables RÉELLES de variables.css
   (--color-bg, --color-text, --color-primary-dark, --color-neutral-*),
   et non sur les alias hypothétiques de la consigne, afin que l'héritage
   fonctionne réellement. Fallbacks hardcodés conservés par sécurité. */
:root {
  /* Aliases : ancien système → nouvelle palette avec fallback */
  --couleur-fond: var(--color-bg, #f5f6f8);
  --couleur-texte: var(--color-text, #1c1f26);
  --couleur-accent: var(--color-primary, #2d6cdf);
  --couleur-bordure: var(--color-border, #e2e8f0);
  --couleur-hover: var(--color-primary-dark, #1e5bbf);
  --couleur-succes: var(--color-success, #10b981);
  --couleur-attention: var(--color-warning, #f59e0b);
  --couleur-danger: var(--color-danger, #e11d48); /* fallback harmonisé sur variables.css (étape 3) */
  --couleur-info: var(--color-info, #2563eb); /* fallback harmonisé : --color-info réutilise la primaire (étape 3) */

  /* Neutres pour cohérence */
  --couleur-gris-50: var(--color-neutral-50, #f8fafc);
  --couleur-gris-100: var(--color-neutral-100, #f1f5f9);
  --couleur-gris-200: var(--color-neutral-200, #e2e8f0);
  --couleur-gris-300: var(--color-neutral-300, #cbd5e1);
  --couleur-gris-400: var(--color-neutral-400, #94a3b8);
  --couleur-gris-500: var(--color-neutral-500, #64748b);
  --couleur-gris-600: var(--color-neutral-600, #475569);
  --couleur-gris-700: var(--color-neutral-700, #334155);
  --couleur-gris-800: var(--color-neutral-800, #1e293b);
  --couleur-gris-900: var(--color-neutral-900, #0f172a);

  /* === KKNMLC_ALIASES_CATEGORIELS_V1 === */
  /* Palettes métier spécifiques - préservent la distinction visuelle (étape 4/25). */
  /* Date: 20260629 - chaque alias pourra recevoir une valeur "dark" au mode sombre. */

  /* Séquences : rotation curatée de 6 couleurs (KKNMLC_SEQ_COULEURS_V1, nth-of-type(6n+x)). */
  /* NOTE: les fonds de summary associés utilisent rgba(<mêmes RGB>,.10) — laissés en l'état (rgba). */
  --seq-couleur-1: #2d6cdf; /* Bleu primaire (= --couleur-accent) */
  --seq-couleur-2: #7c4dff; /* Violet */
  --seq-couleur-3: #d6336c; /* Framboise / rose */
  --seq-couleur-4: #0891b2; /* Cyan */
  --seq-couleur-5: #c026d3; /* Fuchsia */
  --seq-couleur-6: #475569; /* Ardoise (identique au fallback --couleur-gris-600) */
  --seq-alors: #1f8f48;     /* Vert "alors" (branche vraie) */
  --seq-sinon: #c76c1e;     /* Ambre "sinon" (branche fausse) */

  /* Messages cockpit : rotation VISUELLE de 10 couleurs (KKNMLC_COCKPIT_COULEUR_MSG_V1). */
  /* NOTE: ce sont des repères de défilement variés, PAS des niveaux sémantiques (info/erreur). */
  --cockpit-msg-base: #4dabf7;     /* Bleu clair par défaut (KKNMLC_MARQUEURS_V1) */
  --cockpit-msg-couleur-1: #228be6;  /* Bleu */
  --cockpit-msg-couleur-2: #7048e8;  /* Violet */
  --cockpit-msg-couleur-3: #f03e3e;  /* Rouge */
  --cockpit-msg-couleur-4: #e64980;  /* Rose */
  --cockpit-msg-couleur-5: #be4bdb;  /* Mauve */
  --cockpit-msg-couleur-6: #12b886;  /* Vert teal */
  --cockpit-msg-couleur-7: #f59f00;  /* Ambre */
  --cockpit-msg-couleur-8: #15aabf;  /* Cyan */
  --cockpit-msg-couleur-9: #82c91e;  /* Vert lime */
  --cockpit-msg-couleur-10: #fd7e14; /* Orange */

  /* Méta des messages (couleur de l'en-tête meta). */
  --cockpit-meta: #364fc7; /* Bleu indigo (meta par défaut) */

  /* Messages humain (KKNMLC_MSG_HUMAIN_V1) — déclinaison verte. */
  --msg-humain-border: #2f9e44; /* Vert (bordure gauche) */
  --msg-humain-bg: #ebfbee;     /* Vert très clair (fond) */
  --msg-humain-meta: #2b8a3e;   /* Vert foncé (meta) */

  /* Navigation cockpit (boutons nav-msg + nav-globale + message courant). */
  /* Groupe sémantique dédié : valeurs exactes préservées (0 régression) et duplications centralisées. */
  --nav-cockpit-bg: #f1f3f5;      /* Fond clair bouton (~gris-100, Δ1.57%) */
  --nav-cockpit-text: #343a40;    /* Texte sombre (≠ gris-700, Δ8.24% → dédié) */
  --nav-cockpit-hover: #e7eaee;   /* Survol bouton (~gris-200, Δ1.96%) */
  --nav-cockpit-courant: #eef4ff; /* Surbrillance message courant */
  /* === FIN KKNMLC_ALIASES_CATEGORIELS_V1 === */
}
/* === FIN KKNMLC_PONT_VARIABLES_V1 === */

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    background: var(--couleur-fond);
    color: var(--couleur-texte);
    font-family: var(--police-base);
    font-size: 16px; line-height: 1.5;
}

body.mode-ecran-fige { height: 100vh; height: 100dvh; overflow: hidden; }
body.mode-normal { min-height: 100vh; overflow-y: auto; }

.contenu-page {
    display: block; width: 100%;
    max-width: var(--largeur-max-contenu);
    margin: 0 auto; padding: 1rem; padding-top: 3.5rem;
}
body.mode-ecran-fige .contenu-page { height: 100dvh; overflow: hidden; }
.colonne-defilante { overflow-y: auto; -webkit-overflow-scrolling: touch; }

.bouton-menu {
    position: fixed; top: 0.5rem; left: 0.5rem;
    width: var(--cible-tactile-min); height: var(--cible-tactile-min);
    display: flex; flex-direction: column; justify-content: center; gap: 4px;
    background: var(--couleur-gris-50); border: 1px solid var(--couleur-bordure); border-radius: 8px;
    cursor: pointer; z-index: 30; padding: 0 10px;
}
.bouton-menu span { display: block; width: 100%; height: 2px; background: var(--couleur-texte); border-radius: 2px; }

.voile-menu { position: fixed; inset: 0; background: rgba(0,0,0,0.35); z-index: 35; }
.voile-menu[hidden] { display: none; }

.menu-lateral {
    position: fixed; top: 0; left: 0; height: 100vh; height: 100dvh;
    width: 78%; max-width: 320px; background: var(--couleur-gris-50);
    box-shadow: 2px 0 12px rgba(0,0,0,0.15);
    transform: translateX(-100%); transition: transform 0.2s ease;
    z-index: 40; padding-top: 3.5rem;
}
.menu-lateral.ouvert { transform: translateX(0); }
.menu-lateral ul { list-style: none; margin: 0; padding: 0; }
.menu-lateral li { border-bottom: 1px solid var(--couleur-gris-100); }
.menu-lateral a {
    display: block; padding: 0.9rem 1.2rem; min-height: var(--cible-tactile-min);
    color: var(--couleur-texte); text-decoration: none;
}
.menu-lateral a[aria-current="page"] { background: var(--couleur-accent); color: var(--couleur-gris-50); font-weight: 600; }

.zone-note { max-width: var(--largeur-max-contenu); margin: 1rem auto; padding: 0 1rem; }
.note-label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.note-texte {
    width: 100%; height: var(--hauteur-note); resize: vertical;
    padding: 0.6rem; border: 1px solid var(--couleur-bordure); border-radius: 8px;
    font-family: inherit; font-size: 1rem;
}
.note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.note-actions button {
    min-height: var(--cible-tactile-min); padding: 0 1rem;
    border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50);
    cursor: pointer; font-size: 1rem;
}
.note-bouton-enregistrer { border-color: var(--couleur-accent); color: var(--couleur-accent); }
.note-statut { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--couleur-gris-500); min-height: 1.2em; }

button:focus-visible, a:focus-visible, textarea:focus-visible {
    outline: 3px solid var(--couleur-accent); outline-offset: 2px;
}

.message-erreur { color: var(--couleur-danger); font-weight: 600; }
.formulaire-connexion { display: flex; flex-direction: column; gap: 0.6rem; max-width: 360px; }
.formulaire-connexion label { font-weight: 600; }
.formulaire-connexion input {
    min-height: var(--cible-tactile-min); padding: 0 0.6rem;
    border: 1px solid var(--couleur-bordure); border-radius: 8px; font-size: 1rem;
}
.formulaire-connexion button {
    min-height: var(--cible-tactile-min); border: 1px solid var(--couleur-accent);
    background: var(--couleur-accent); color: var(--couleur-gris-50); border-radius: 8px;
    font-size: 1rem; cursor: pointer;
}

/* U6 — page utilisateurs */
.message-statut { color: #0a7d29; font-weight: 600; margin: 0.5rem 0; }
.table-utilisateurs { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table-utilisateurs th, .table-utilisateurs td { border: 1px solid var(--couleur-bordure); padding: 0.5rem 0.7rem; text-align: left; }
.table-utilisateurs th { background: var(--couleur-gris-100); }
.formulaire-utilisateur { display: flex; flex-direction: column; gap: 0.5rem; max-width: 360px; margin: 1rem 0 2rem; }
.formulaire-utilisateur label { font-weight: 600; }
.formulaire-utilisateur input, .formulaire-utilisateur select {
    min-height: var(--cible-tactile-min); padding: 0 0.6rem;
    border: 1px solid var(--couleur-bordure); border-radius: 8px; font-size: 1rem;
}
.formulaire-utilisateur button {
    min-height: var(--cible-tactile-min); border: 1px solid var(--couleur-accent);
    background: var(--couleur-accent); color: var(--couleur-gris-50); border-radius: 8px; font-size: 1rem; cursor: pointer;
}

/* Contexte V1 */
.contexte-onglets { display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; padding-bottom: 0.3rem; }
.contexte-onglet { flex: 0 0 auto; min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); font-size: 1rem; cursor: pointer; white-space: nowrap; }
.contexte-onglet[aria-selected="true"] { background: var(--couleur-accent); color: var(--couleur-gris-50); border-color: var(--couleur-accent); font-weight: 600; }
.contexte-panneau { margin: 1rem 0; }
.contexte-panneau[hidden] { display: none; }
.contexte-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--couleur-gris-100); }
.contexte-note textarea { width: 100%; height: var(--hauteur-note); resize: vertical; padding: 0.6rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; font-family: inherit; font-size: 1rem; }
.contexte-note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.contexte-note-actions button { min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); cursor: pointer; font-size: 1rem; }
.contexte-statut { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--couleur-gris-500); min-height: 1.2em; }

/* Options V1 */
.options-onglets { display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; padding-bottom: 0.3rem; }
.options-onglet { flex: 0 0 auto; min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); font-size: 1rem; cursor: pointer; white-space: nowrap; }
.options-onglet[aria-selected="true"] { background: var(--couleur-accent); color: var(--couleur-gris-50); border-color: var(--couleur-accent); font-weight: 600; }
.options-panneau { margin: 1rem 0; }
.options-panneau[hidden] { display: none; }
.options-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--couleur-gris-100); }
.options-note textarea { width: 100%; height: var(--hauteur-note); resize: vertical; padding: 0.6rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; font-family: inherit; font-size: 1rem; }
.options-note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.options-note-actions button { min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); cursor: pointer; font-size: 1rem; }
.options-statut { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--couleur-gris-500); min-height: 1.2em; }

/* Extensions / Accroches V1 */
.extensions-onglets { display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; padding-bottom: 0.3rem; }
.extensions-onglet { flex: 0 0 auto; min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); font-size: 1rem; cursor: pointer; white-space: nowrap; }
.extensions-onglet[aria-selected="true"] { background: var(--couleur-accent); color: var(--couleur-gris-50); border-color: var(--couleur-accent); font-weight: 600; }
.extensions-panneau { margin: 1rem 0; }
.extensions-panneau[hidden] { display: none; }
.extensions-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--couleur-gris-100); }
.extensions-note textarea { width: 100%; height: var(--hauteur-note); resize: vertical; padding: 0.6rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; font-family: inherit; font-size: 1rem; }
.extensions-note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.extensions-note-actions button { min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); cursor: pointer; font-size: 1rem; }
.extensions-statut { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--couleur-gris-500); min-height: 1.2em; }

/* Sécurité / Filtres V1 */
.securite-onglets { display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; padding-bottom: 0.3rem; }
.securite-onglet { flex: 0 0 auto; min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); font-size: 1rem; cursor: pointer; white-space: nowrap; }
.securite-onglet[aria-selected="true"] { background: var(--couleur-accent); color: var(--couleur-gris-50); border-color: var(--couleur-accent); font-weight: 600; }
.securite-panneau { margin: 1rem 0; }
.securite-panneau[hidden] { display: none; }
.securite-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--couleur-gris-100); }
.securite-note textarea { width: 100%; height: var(--hauteur-note); resize: vertical; padding: 0.6rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; font-family: inherit; font-size: 1rem; }
.securite-note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.securite-note-actions button { min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); cursor: pointer; font-size: 1rem; }
.securite-statut { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--couleur-gris-500); min-height: 1.2em; }

/* Cartographie V1 */
.cartographie-onglets { display: flex; gap: 0.4rem; overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 1rem 0; padding-bottom: 0.3rem; }
.cartographie-onglet { flex: 0 0 auto; min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); font-size: 1rem; cursor: pointer; white-space: nowrap; }
.cartographie-onglet[aria-selected="true"] { background: var(--couleur-accent); color: var(--couleur-gris-50); border-color: var(--couleur-accent); font-weight: 600; }
.cartographie-panneau { margin: 1rem 0; }
.cartographie-panneau[hidden] { display: none; }
.cartographie-note { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--couleur-gris-100); }
.cartographie-note textarea { width: 100%; height: var(--hauteur-note); resize: vertical; padding: 0.6rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; font-family: inherit; font-size: 1rem; }
.cartographie-note-actions { display: flex; gap: 0.5rem; margin-top: 0.5rem; }
.cartographie-note-actions button { min-height: var(--cible-tactile-min); padding: 0 1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); cursor: pointer; font-size: 1rem; }
.cartographie-statut { margin: 0.4rem 0 0; font-size: 0.9rem; color: var(--couleur-gris-500); min-height: 1.2em; }

/* Cockpit V1 */
body[data-page="cockpit"].mode-ecran-fige .contenu-page {
    max-width: none;
    width: 100%;
    box-sizing: border-box; /* KKNMLC_HAUTEUR_V1 */
    height: 100dvh;
    padding: 3.5rem 0 calc(0.6rem + env(safe-area-inset-bottom, 0px)); /* KKNMLC_HAUTEUR_V1 : marge bas ~5mm + zone sure */
    overflow: hidden;
}
.cockpit-page {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}
.cockpit-bandeau {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    background: var(--couleur-gris-100);
    border-bottom: 1px solid var(--couleur-bordure);
    font-size: 0.85rem;
}
.cockpit-statut { color: var(--couleur-gris-500); }
.cockpit-grille {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    gap: 0.5rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
}
.cockpit-colonne {
    flex: 0 0 85%;
    max-width: 85%;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border: 1px solid var(--couleur-bordure);
    border-radius: 8px;
    background: var(--couleur-gris-50);
}
.cockpit-colonne-entete {
    flex: 0 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-bottom: 1px solid var(--couleur-gris-100);
}
/* KKNMLC_ENTETE_COMPACTE_V1 : le titre prend la place restante, donc le
   bouton copier tient sur SA ligne, a droite, au lieu d en occuper une a
   lui seul. Une ligne de gagnee sur chaque colonne. */
.cockpit-colonne-entete h2 { font-size: 1rem; margin: 0; flex: 1 1 auto;
  order: 1; min-width: 0; }
.cockpit-colonne-entete .kk-col-copier { order: 2; margin-left: auto; }
/* KKNMLC_ENTETE_COMPACTE_V1 : coupure forcee apres le titre et le bouton
   copier. Sans elle le temoin de cache remontait sur la premiere ligne :
   remettre le copier a sa place l avait entraine avec lui. Un flex item
   vide a 100% de large casse la ligne sans rien afficher. */
.cockpit-colonne-entete::after { content: ""; flex-basis: 100%;
  width: 100%; height: 0; order: 3; }
.cockpit-colonne-entete .cockpit-cache-temoin { order: 4; }
.cockpit-colonne-entete .cockpit-etat { order: 5; }
.cockpit-colonne-entete .cockpit-nav-msg { order: 6; }
.cockpit-colonne-entete { padding: 0.35rem 0.5rem; gap: 0.3rem; }
.cockpit-ia-label { font-size: 0.8rem; color: var(--couleur-gris-500); }
.cockpit-ia-select { min-height: var(--cible-tactile-min); border: 1px solid var(--couleur-bordure); border-radius: 6px; font-size: 0.9rem; }
.cockpit-etat { font-size: 0.8rem; color: var(--couleur-gris-500); margin-left: auto; }
/* KKNMLC_CACHE_TEMOIN_V1 : gros rond dans l en-tete de colonne. Vert = cache
   memoire touche sur le dernier message ; rouge = pas de cache. */
.cockpit-cache-temoin { display: inline-block; width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; border: 1px solid rgba(0,0,0,0.15); }
.cockpit-cache-hit { background: var(--couleur-succes, #10b981); }
.cockpit-cache-miss { background: var(--couleur-danger, #e11d48); }
.cockpit-cache-inconnu { background: var(--couleur-gris-100, #d1d5db); }
/* KKNMLC_CACHE_CHIFFRE_V1 : nb de tokens lus du cache, a cote du voyant. */
.cockpit-cache-chiffre {
  display: inline-block; margin-left: 0.2rem; font-size: 0.68rem;
  font-variant-numeric: tabular-nums; color: #6b7280; vertical-align: middle;
  min-width: 1.2rem;
}
/* KKNMLC_GROK_AFFINITE_V1 : grok renvoie 128 quand l'affinite de session xAI
   echoue (serveur froid). On l'affiche en rouge pour ne pas croire a un cache. */
.cockpit-cache-affinite-ratee {
  color: var(--couleur-danger, #e11d48); font-weight: 600;
  min-width: auto; white-space: nowrap;
}
/* KKNMLC_COCKPIT_ARBRE_V1 : modale arbre des branches (overlay autonome) */
.kk-arbre-modale { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: flex-start; justify-content: center; padding: 24px 12px; }
/* KKNMLC_CHANTIER_RATTACHER_V1 : popup de rattachement chantier -> branche */
.kk-rat-modale { position: fixed; inset: 0; z-index: 99999; display: flex;
  align-items: flex-start; justify-content: center; padding: 24px 12px;
  background: rgba(15, 23, 42, 0.45); }
.kk-rat-modale[hidden] { display: none; }
.kk-rat-boite { background: #fff; border-radius: 8px; max-width: 480px;
  width: 100%; max-height: 80vh; overflow-y: auto; padding: 14px 16px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25); }
.kk-rat-tete { display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 8px; }
.kk-rat-x { border: none; background: none; font-size: 1.4rem; cursor: pointer;
  color: #64748b; line-height: 1; }
.kk-rat-aide { font-size: 0.8rem; color: #475569; margin: 0 0 8px; }
.kk-rat-liste { display: flex; flex-direction: column; gap: 2px; }
.kk-rat-branche { text-align: left; border: 1px solid #e2e8f0; background: #f8fafc;
  border-radius: 4px; padding: 0.4rem 0.5rem; cursor: pointer; font-size: 0.82rem;
  display: flex; justify-content: space-between; gap: 8px; }
.kk-rat-branche:hover { background: #eef2ff; border-color: #c7d2fe; }
.kk-rat-nb { color: #94a3b8; font-size: 0.72rem; white-space: nowrap; }
.kk-rat-vide { color: #94a3b8; font-size: 0.82rem; }
.kk-rat-info { font-size: 0.8rem; color: #2d6cdf; margin: 8px 0 0; min-height: 1rem; }
/* KKNMLC_CORBEILLE_V2 : fenetre de corbeille partagee */
.kk-corb-groupe { font-weight: 600; font-size: .82rem; color: #1c1f26;
  margin: 10px 0 2px; padding-bottom: 2px; border-bottom: 1px solid #e2e8f0; }
.kk-corb-ligne { display: flex; align-items: center; gap: 6px; padding: 3px 0;
  border-bottom: 1px solid #f3f5f9; }
.kk-corb-lab { flex: 1; min-width: 0; font-size: .84rem; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.kk-corb-date { flex: 0 0 auto; font-size: .72rem; color: #94a3b8; }
.kk-corb-ic { flex: 0 0 auto; border: 1px solid #e2e8f0; background: #fff;
  border-radius: 5px; cursor: pointer; font-size: 13px; line-height: 1;
  padding: 3px 7px; }
.kk-corb-ic:hover { border-color: #2d6cdf; color: #2d6cdf; }
.kk-corb-ic-danger:hover { border-color: #e11d48; color: #e11d48; }
.kk-corb-pied { display: flex; justify-content: flex-end; margin-top: 10px; }
.kk-arbre-modale[hidden] { display: none; }
.kk-arbre-modale-fond { position: fixed; inset: 0; background: rgba(12,16,28,.55); }
.kk-arbre-modale-panneau { position: relative; z-index: 1; width: 100%; max-width: 560px; background: #eef1f6; border-radius: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
.kk-arbre-modale-tete { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: linear-gradient(160deg,#1b2233,#2b3752); color: #fff; padding: 14px 18px; }
.kk-arbre-modale-tete b { font-size: 17px; }
.kk-arbre-modale-fermer { flex: 0 0 auto; background: rgba(255,255,255,.12); color: #fff; border: 0; border-radius: 9px; width: 34px; height: 34px; font-size: 20px; cursor: pointer; }
.kk-arbre-modale-fermer:hover { background: rgba(255,255,255,.22); }
.kk-arbre-modale-corps-wrap { padding: 14px 18px 18px; max-height: 74vh; overflow: auto; }
.kk-arbre-aide { margin: 0 0 10px; font-size: 13px; color: #5b6472; }
.kk-arbre-vide { color: #8a93a3; font-size: 14px; }
.kk-arbre-branche { margin: 6px 0; }
/* KKNMLC_ARBRE_V2 : arbre vertical, une ligne par branche et par jeu */
.kk-arbre-ligne { display: flex; align-items: center; gap: 5px; padding: 2px 0;
  border-bottom: 1px solid #f3f5f9; }
.kk-arbre-ligne .kk-arbre-lib { flex: 1; min-width: 0; text-align: left;
  background: none; border: none; cursor: pointer; font-size: .84rem;
  padding: 3px 4px; border-radius: 5px; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; color: inherit; }
.kk-arbre-ligne .kk-arbre-lib:hover { background: #eef2ff; }
.kk-arbre-ligne-jeu .kk-arbre-lib { font-size: .8rem; color: #475569; }
.kk-arbre-ligne.kk-arbre-jeu-actif .kk-arbre-lib { font-weight: 600;
  color: #1c1f26; }
.kk-arbre-encours { font-size: .68rem; color: #2d6cdf; }
.kk-arbre-ico-jeu { opacity: .55; font-size: .78rem; }
.kk-arbre-ic { flex: 0 0 auto; border: 1px solid #e2e8f0; background: #fff;
  border-radius: 5px; cursor: pointer; font-size: 12px; line-height: 1;
  padding: 3px 6px; }
.kk-arbre-ic-crayon:hover { border-color: #2d6cdf; color: #2d6cdf; }
.kk-arbre-ic-suppr:hover { border-color: #e11d48; color: #e11d48; }
.kk-arbre-case { flex: 0 0 auto; width: 15px; height: 15px; cursor: pointer; }
.kk-arbre-vide { color: #8a93a3; font-size: 13px; }
/* KKNMLC_MEMOIRE_V3 : selection globale et fenetre de creation */
.kk-arbre-toutcocher { display: inline-flex; align-items: center; gap: 4px;
  font-size: .82rem; color: #475569; }
.kk-creer-choix { display: flex; align-items: center; gap: 6px; padding: 3px 0;
  font-size: .84rem; cursor: pointer; border-bottom: 1px solid #f3f5f9; }
.kk-creer-choix input { flex: 0 0 auto; }
/* KKNMLC_CREER_V1 : barre de creation au-dessus d un arbre */
.kk-arbre-barre { display: flex; gap: .35rem; margin-bottom: 6px; }
.kk-arbre-btn-branche { display: block; width: 100%; text-align: left; background: #fff; border: 1px solid #dfe4ee; border-radius: 10px; padding: 9px 11px; font-size: 14px; color: #111827; cursor: pointer; }
.kk-arbre-btn-branche:hover { border-color: var(--couleur-accent, #2d6cdf); }
.kk-arbre-ico { font-size: 13px; }
.kk-arbre-meta { color: #8a93a3; font-size: 12px; font-weight: normal; }
.kk-arbre-jeux { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 2px 18px; }
.kk-arbre-btn-jeu { background: #f1f4f9; border: 1px solid #d7deea; border-radius: 8px; padding: 5px 10px; font-size: 13px; color: #2b3346; cursor: pointer; }
.kk-arbre-btn-jeu:hover { border-color: var(--couleur-accent, #2d6cdf); background: #fff; }
.kk-arbre-jeu-actif { background: var(--couleur-accent, #2d6cdf); color: #fff; border-color: var(--couleur-accent, #2d6cdf); }
.cockpit-colonne-corps {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 0.5rem;
}
.cockpit-message-placeholder { color: #888; font-size: 0.9rem; }



.cockpit-saisie-statut { margin: 0; font-size: 0.8rem; color: var(--couleur-gris-500); min-height: 1em; }
@media (min-width: 900px) {
    .cockpit-colonne { flex: 1 1 0; max-width: none; }
    .cockpit-grille { overflow-x: auto; } /* KKNMLC_COCKPIT_HORIZ_1 : scroll horizontal si >4 colonnes sur grand ecran */
}

/* Cockpit V1 — messages mémoire */
.cockpit-saisie-unique { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.5rem 0.6rem; }
.cockpit-saisie-unique-texte { flex: 1 1 16rem; min-width: 0; min-height: 2.4rem; max-height: 6rem; resize: vertical; padding: 0.5rem; border: 1px solid var(--couleur-bordure); border-radius: 6px; font: inherit; }
.cockpit-saisie-unique-select { min-height: var(--cible-tactile-min); border: 1px solid var(--couleur-bordure); border-radius: 6px; font-size: 0.9rem; }
.cockpit-saisie-unique-envoyer { min-height: var(--cible-tactile-min); border: 1px solid var(--couleur-accent); background: var(--couleur-accent); color: var(--couleur-gris-50); border-radius: 6px; font-size: 0.9rem; cursor: pointer; }
.cockpit-ia-choisir { min-height: var(--cible-tactile-min); border: 1px solid var(--couleur-bordure); background: var(--couleur-gris-50); border-radius: 6px; font-size: 0.85rem; cursor: pointer; }
.cockpit-message { margin-bottom: 0.6rem; padding-bottom: 0.5rem; border-bottom: 1px solid #f0f2f5; }
.cockpit-message-meta { font-size: 0.75rem; color: #888; margin-bottom: 0.2rem; }
.cockpit-message-contenu { font-size: 0.95rem; white-space: pre-wrap; word-break: break-word; }

/* KK_STYLE_NOTES_V1 : harmonisation boutons de note (composant commun theme/note.php) */
.note-bouton-enregistrer {
    background-color: #1d4ed8;
    color: var(--couleur-gris-50);
    border: 1px solid #1d4ed8;
}
.note-bouton-enregistrer:hover {
    background-color: #1e40af;
    border-color: #1e40af;
}
.note-bouton-restaurer {
    background-color: #111827;
    color: var(--couleur-gris-50);
    border: 1px solid #111827;
}
.note-bouton-restaurer:hover {
    background-color: #000000;
    border-color: #000000;
}

/* KK_STYLE_NOTES_V2_SPECIFICITE : surclasse .note-actions button au repos (sans !important). */
.note-actions button.note-bouton-enregistrer { background-color: #1d4ed8; color: var(--couleur-gris-50); border: 1px solid #1d4ed8; }
.note-actions button.note-bouton-enregistrer:hover { background-color: #1e40af; border-color: #1e40af; }
.note-actions button.note-bouton-restaurer { background-color: #111827; color: var(--couleur-gris-50); border: 1px solid #111827; }
.note-actions button.note-bouton-restaurer:hover { background-color: #000000; border-color: #000000; }

/* KK_C1_DIRECTIVE_CSS : zone directive Cockpit, compacte, ne gonfle pas la hauteur de l ecran fige. */
.cockpit-directive { display: flex; gap: 0.5rem; align-items: center; padding: 0.4rem 0.6rem; flex: 0 0 auto; }
.cockpit-directive-texte { flex: 1 1 auto; min-height: 2.2rem; max-height: 3.5rem; resize: none; padding: 0.4rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; font: inherit; }
.cockpit-directive-envoyer { flex: 0 0 auto; min-height: 2.2rem; padding: 0 0.9rem; border: 1px solid #1d4ed8; background: #1d4ed8; color: var(--couleur-gris-50); border-radius: 8px; cursor: pointer; }
.cockpit-directive-statut { flex: 0 0 auto; font-size: 0.85rem; color: var(--couleur-gris-500); }

/* KK_C1_DIRECTIVE_CSS_FIX : le statut passe SOUS la ligne champ+bouton (ne comprime plus la zone). */
.cockpit-directive { flex-wrap: wrap; }
.cockpit-directive-texte { flex: 1 1 60%; min-width: 0; }
.cockpit-directive-statut { flex: 1 1 100%; width: 100%; margin: 0.2rem 0 0; order: 9; }

/* KK_C1_UI_COMPACT : directive sur une ligne (champ + bouton + statut a droite), statut a ellipse. Surclasse KK_C1_DIRECTIVE_CSS(_FIX). */
.cockpit-directive { display: grid; grid-template-columns: 1fr auto minmax(0, 14rem); align-items: center; gap: 0.5rem; flex-wrap: nowrap; }
.cockpit-directive-texte { flex: none; min-width: 0; min-height: 2.2rem; max-height: 2.6rem; }
.cockpit-directive-envoyer { flex: none; white-space: nowrap; }
.cockpit-directive-statut { flex: none; width: auto; margin: 0; order: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 14rem; }
.cockpit-bandeau .cockpit-projet { white-space: nowrap; }
@media (max-width: 560px) {
  .cockpit-directive { grid-template-columns: 1fr auto; }
  .cockpit-directive-statut { grid-column: 1 / -1; max-width: 100%; }
}

/* KK_C0C_4_COLONNES : Cockpit a 4 colonnes (Codeur/Technicien/Chef/Superviseur). Bloc autonome : pose display:grid. Defilement horizontal sobre, scroll interne par colonne, ecran fige preserve. */
/* KKNMLC_COCKPIT_HORIZ_1 : flux horizontal dynamique (N colonnes), remplace la grille figee a 4 colonnes. */
/* retire KKNMLC_SIMPLIF_V1 : doublons grille/colonne */
@media (max-width: 900px) {
  /* KKNMLC_COCKPIT_HORIZ_1 mobile : flux horizontal, largeur colonne 80vw conservee via .cockpit-colonne. */
  /* neutralise KKNMLC_UNIF_V2 : layout mobile fusionne dans LAYOUT_V2 */
}

   pas de 3e ligne permanente. Ne casse pas KK_C0C_4_COLONNES. */
.cockpit-directive { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; }
.cockpit-directive-texte { flex: 1 1 16rem; min-width: 0; }
.cockpit-directive-envoyer { flex: 0 0 auto; }
.cockpit-directive-statut { flex: 1 1 12rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 560px) {
  .cockpit-directive-texte { flex: 1 1 100%; }
}

/* KKNMLC_COMP_CSS_V1 */
.compo-type-panneau[hidden]{display:none}
.arbre-enfants[hidden]{display:none}
.arbre-groupes,.compo-cases{list-style:none;padding-left:0}
.arbre-enfants{list-style:none;padding-left:1.2rem}
.arbre-noeud{margin:.2rem 0}
.arbre-toggle{width:1.8rem;cursor:pointer}
.compo-type-choix{margin:.4rem 0}
.compo-info-vide{opacity:.75;font-style:italic}

/* KKNMLC_COMP_JOUER_CSS_V1 */
.compo-resultat{margin:.6rem 0;padding:.6rem;border:1px solid rgba(0,0,0,.15);border-radius:6px}
.compo-resultat-texte{white-space:pre-wrap;word-break:break-word;font-family:inherit;margin:0}
.compo-jouer-form{margin:.4rem 0}
.compo-jouer-form textarea{width:100%;box-sizing:border-box}

/* KKNMLC_COMP_JOUER_SCROLL_V1 : zone resultat scrollable (surcharge) */
textarea.compo-resultat-texte{
    display:block;
    width:100%;
    min-height:56rem;/* KKNMLC_JOUER_ZONE_X2_V1 : rendu JOUER double pour lecture */
    max-height:90vh;
    overflow:auto;
    box-sizing:border-box;
    white-space:pre-wrap;
    word-break:break-word;
    font-family:inherit;
    padding:.6rem;
    border:1px solid rgba(0,0,0,.2);
    border-radius:6px;
    resize:vertical;
}
.compo-resultat-meta{opacity:.75;font-size:.9em;margin:.3rem 0 0}

/* KKNMLC_INJ_COMPO_CSS_V1 : bloc injection cockpit */
.cockpit-injection{margin:.6rem 0;padding:.6rem;border:1px solid rgba(0,0,0,.15);border-radius:6px}
.cockpit-injection-modes{display:flex;gap:.4rem;flex-wrap:wrap;margin-bottom:.5rem}
.cockpit-inj-form{display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.cockpit-inj-select{min-width:14rem}
.cockpit-inj-indispo{opacity:.7;font-style:italic;margin:.2rem 0}
.cockpit-inj-info{margin:.4rem 0 0;font-size:.95em;opacity:.85}
.cockpit-inj-mode[disabled]{opacity:.5;cursor:not-allowed}

/* KKNMLC_MEM_BRUT_CSS_V1 : onglet memoires lecture brute */
.memoire-filtres{display:flex;gap:.5rem;flex-wrap:wrap;align-items:end;margin:.6rem 0}
.memoire-brut{width:100%;min-height:34rem;max-height:75vh;overflow:auto;box-sizing:border-box;font-family:monospace;white-space:pre}
.memoire-info{font-size:.9rem;opacity:.8}

/* KKNMLC_MEM_COPY_V1 : bouton copier memoire brute */
.memoire-actions{display:flex;gap:.5rem;align-items:center;margin:.4rem 0}
.memoire-copier{cursor:pointer}
.memoire-copie-etat{font-size:.9rem;opacity:.8}

/* KKNMLC_MASQUE_SELECTEUR_V1 : selecteur + masque unique par onglet conception */
.conception-selecteur-masque{margin-top:1rem}
.conception-selecteur-ligne{margin-bottom:1rem}
.conception-selecteur{width:100%;max-width:34rem}
.conception-masque-panneau,.conception-masque-vide{border-top:1px solid rgba(0,0,0,.18);margin-top:1rem;padding-top:1rem}
.conception-masque-actions{display:flex;gap:.5rem;flex-wrap:wrap}
/* KKNMLC_FORMS_LAYOUT_V1 : mise en page des formulaires de conception */
.brq-form-creer,.brq-form-inline,.cond-form-creer,.cond-form-inline,.compo-form-creer,.compo-form-inline,.compo-form-element{display:flex;flex-direction:column;gap:.35rem;max-width:34rem}
.brq-form-creer label,.brq-form-inline label,.cond-form-creer label,.cond-form-inline label,.compo-form-creer label,.compo-form-inline label,.compo-form-element label{font-weight:600;margin-top:.5rem}
.brq-form-creer input[type=text],.brq-form-creer input[type=number],.brq-form-creer select,.brq-form-creer textarea,.brq-form-inline input[type=text],.brq-form-inline input[type=number],.brq-form-inline select,.brq-form-inline textarea,.cond-form-creer input[type=text],.cond-form-creer input[type=number],.cond-form-creer select,.cond-form-creer textarea,.cond-form-inline input[type=text],.cond-form-inline input[type=number],.cond-form-inline select,.cond-form-inline textarea,.compo-form-creer input[type=text],.compo-form-creer input[type=number],.compo-form-creer select,.compo-form-creer textarea,.compo-form-inline input[type=text],.compo-form-inline input[type=number],.compo-form-inline select,.compo-form-inline textarea,.compo-form-element input[type=text],.compo-form-element input[type=number],.compo-form-element select,.compo-form-element textarea{width:100%;box-sizing:border-box}
.brq-form-creer button,.brq-form-inline button,.cond-form-creer button,.cond-form-inline button,.compo-form-creer button,.compo-form-inline button,.compo-form-element button{align-self:flex-start;margin-top:.75rem}
.gc-cases{display:flex;flex-direction:column;gap:.4rem;border:1px solid rgba(0,0,0,.18);border-radius:.4rem;padding:.6rem .8rem;margin-top:.5rem}
.gc-cases legend{font-weight:600;padding:0 .3rem}
.gc-cases label{display:flex;align-items:center;gap:.5rem;font-weight:400;margin:0}
.gc-cases input[type=checkbox]{flex:0 0 auto;margin:0}
/* KKNMLC_FORMS_LAYOUT_V2 : complement compo-form-lot + formulaires Gestion IA */
.compo-form-lot,.gia-form-ajout,.gia-form-inline,.grp-form-creer,.grp-form-inline,.rc-form-inline{display:flex;flex-direction:column;gap:.35rem;max-width:34rem}
.compo-form-lot label,.gia-form-ajout label,.gia-form-inline label,.grp-form-creer label,.grp-form-inline label,.rc-form-inline label{font-weight:600;margin-top:.5rem}
.compo-form-lot input[type=text],.compo-form-lot input[type=number],.compo-form-lot select,.compo-form-lot textarea,.gia-form-ajout input[type=text],.gia-form-ajout input[type=number],.gia-form-ajout select,.gia-form-ajout textarea,.gia-form-inline input[type=text],.gia-form-inline input[type=number],.gia-form-inline select,.gia-form-inline textarea,.grp-form-creer input[type=text],.grp-form-creer input[type=number],.grp-form-creer select,.grp-form-creer textarea,.grp-form-inline input[type=text],.grp-form-inline input[type=number],.grp-form-inline select,.grp-form-inline textarea,.rc-form-inline input[type=text],.rc-form-inline input[type=number],.rc-form-inline select,.rc-form-inline textarea{width:100%;box-sizing:border-box}
.compo-form-lot button,.gia-form-ajout button,.gia-form-inline button,.grp-form-creer button,.grp-form-inline button,.rc-form-inline button{align-self:flex-start;margin-top:.75rem}

/* KKNMLC_SEQ_FORMS_LAYOUT_V1 : mise en page formulaires Sequences alignee sur les autres onglets */
.seq-form-creer,.seq-form-inline{display:flex;flex-direction:column;gap:.35rem;max-width:34rem}
.seq-form-creer label,.seq-form-inline label,.seq-test label{font-weight:600;margin-top:.5rem}
.seq-form-creer input[type=text],.seq-form-creer input[type=number],.seq-form-creer select,.seq-form-creer textarea,.seq-form-inline input[type=text],.seq-form-inline input[type=number],.seq-form-inline select,.seq-form-inline textarea,.seq-test input[type=text],.seq-test select,.seq-test textarea{width:100%;box-sizing:border-box}
.seq-form-creer button,.seq-form-inline button{align-self:flex-start;margin-top:.75rem}
.seq-test{display:flex;flex-direction:column;gap:.35rem;border:1px solid rgba(0,0,0,.18);border-radius:.4rem;padding:.6rem .8rem;margin-top:.75rem}
.seq-test legend{font-weight:700;padding:0 .3rem}
.seq-alors,.seq-sinon{margin-top:.75rem;padding:.6rem .8rem;border:1px dashed rgba(0,0,0,.18);border-radius:.4rem}

/* KKNMLC_CONCERGO1B : uniformisation masques Conception */
.conception-masque-panneau textarea,
.seq-ui textarea { width: 100%; min-height: 7rem; box-sizing: border-box; }
.conception-texte-long,
.conception-masque-panneau p,
.seq-etape p { white-space: pre-wrap; }
.conception-masque-actions,
.seq-actions,
.seq-etape-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-top: .75rem; }
.seq-etape { border-top: 1px solid rgba(0,0,0,.15); padding-top: 1rem; margin-top: 1rem; }
.conception-aide { display: block; color: var(--couleur-gris-500); font-size: .85rem; margin-top: .25rem; }

/* KKNMLC_ERGO1B : harmonisation legere Gestion IA + Options (classes specifiques, zero selecteur generique) */
/* cadres de contenu coherents */
.gestion-ia-bloc, .options-bloc { padding: 1rem 1.1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); margin-bottom: 1rem; }
/* formulaires inline d Options alignes sur Gestion IA */
.oc-form-inline { display: flex; flex-direction: column; gap: .35rem; max-width: 34rem; }
.oc-form-inline label { font-weight: 600; margin-top: .5rem; }
.oc-form-inline input[type=text], .oc-form-inline input[type=number], .oc-form-inline select, .oc-form-inline textarea { width: 100%; box-sizing: border-box; }
.oc-form-inline button { align-self: flex-start; margin-top: .75rem; }
/* tables Gestion IA lisibles comme table-utilisateurs */
.table-gestion-ia, .table-roles-colonnes { width: 100%; border-collapse: collapse; margin: 1rem 0; }
.table-gestion-ia th, .table-gestion-ia td, .table-roles-colonnes th, .table-roles-colonnes td { border: 1px solid var(--couleur-bordure); padding: 0.5rem 0.7rem; text-align: left; }
.table-gestion-ia th, .table-roles-colonnes th { background: var(--couleur-gris-100); }
/* aides discretes coherentes */
.cles-api-aide, .rc-del-info { display: block; color: var(--couleur-gris-500); font-size: .85rem; margin-top: .25rem; }
/* textarea pleine largeur dans les blocs de ces deux pages */
.gestion-ia-bloc textarea, .options-bloc textarea { width: 100%; box-sizing: border-box; }

/* KKNMLC_ERGO1C : harmonisation legere Cockpit + Outils (classes specifiques, zero selecteur generique) */
/* Cockpit : completer les 2 classes de saisie unique non stylees */
.cockpit-saisie-unique-form { display: flex; flex-direction: column; gap: .35rem; }
.cockpit-saisie-unique-label { font-weight: 600; margin-top: .5rem; }
/* Outils : page sans style propre -> cadres, zones, en-tetes, aides, erreurs */
.outils-bloc, .outils-sauvegarde-haut, .outils-tache { padding: 1rem 1.1rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: var(--couleur-gris-50); margin-bottom: 1rem; }
.outils-zones { display: flex; flex-direction: column; gap: 1rem; }
.outils-zone { padding: .8rem .9rem; border: 1px solid #e2e5ec; border-radius: 6px; background: #fafbfc; }
.outils-zone-tete { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; justify-content: space-between; margin-bottom: .4rem; }
.outils-label { font-weight: 600; }
.outils-zone textarea, .outils-form-sauvegarder textarea { width: 100%; box-sizing: border-box; min-height: 7rem; }
.outils-copier { align-self: flex-start; }
.outils-aide { display: block; color: var(--couleur-gris-500); font-size: .85rem; margin-top: .35rem; }
.outils-erreur { color: #a3261d; font-size: .9rem; margin: .4rem 0; }
.outils-form-sauvegarder { display: flex; flex-direction: column; gap: .35rem; max-width: 34rem; }
.outils-form-sauvegarder button { align-self: flex-start; margin-top: .5rem; }

/* KKNMLC_COCKPIT_UI_V1 : barre compacte + colonnes hautes */
.cockpit-saisie-unique-label { display: none !important; }
.cockpit-saisie-unique { padding: 0.25rem 0.5rem; gap: 0.35rem; } /* KKNMLC_ESPACES_SERRES_V1 */
.cockpit-saisie-unique-form { gap: 0.35rem; }
.cockpit-saisie-unique-select { min-height: 2.4rem; padding: 0.25rem 0.4rem; }
.cockpit-saisie-unique-texte { min-height: 2.4rem; max-height: 5rem; }
.cockpit-saisie-unique-envoyer { min-height: 2.6rem; width: 2.6rem; padding: 0; font-size: 1.2rem; line-height: 1; align-self: flex-end; }
.cockpit-compo-wrap { width: 100%; }
/* retire KKNMLC_SIMPLIF_V1 : min-height 62vh creait l ascenseur */
/* retire KKNMLC_SIMPLIF_V1 : min-height 50vh */

/* KKNMLC_COCKPIT_UI_V2 : destinataire en barre haute + bouton a droite */
/* retire KKNMLC_AUDIT_V1 : bandeau horizontal obsolete */
.cockpit-bandeau .cockpit-saisie-unique-select { flex:1 1 auto; min-height:2.4rem; }
.cockpit-projet { flex:0 0 auto; }
/* retire KKNMLC_AUDIT_V1 : saisie-ligne flex-end obsolete */
/* retire KKNMLC_AUDIT_V1 : doublon saisie-ligne texte */

/* KKNMLC_MARQUEURS_V1 : reperes visuels vifs pour defiler dans une colonne */
.cockpit-message { border-left: 3px solid var(--cockpit-msg-base); padding-left: 0.55rem; }
/* KKNMLC_COCKPIT_COULEUR_MSG_V1 : barre vive et variee par message (compositions exclues) */
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+1){border-left-color:var(--cockpit-msg-couleur-1)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+2){border-left-color:var(--cockpit-msg-couleur-2)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+3){border-left-color:var(--cockpit-msg-couleur-3)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+4){border-left-color:var(--cockpit-msg-couleur-4)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+5){border-left-color:var(--cockpit-msg-couleur-5)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+6){border-left-color:var(--cockpit-msg-couleur-6)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+7){border-left-color:var(--cockpit-msg-couleur-7)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+8){border-left-color:var(--cockpit-msg-couleur-8)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+9){border-left-color:var(--cockpit-msg-couleur-9)}
.cockpit-colonne-corps > .cockpit-message:not(.cockpit-message-enveloppe):nth-of-type(10n+10){border-left-color:var(--cockpit-msg-couleur-10)}
/* KKNMLC_COCKPIT_NAV_MSG_V1 : boutons navigation message par message */
.cockpit-nav-msg{display:inline-flex;gap:0.25rem;align-items:center}
.cockpit-nav-msg button{min-width:1.9rem;min-height:1.6rem;line-height:1;font-size:1rem;font-weight:700;cursor:pointer;border:1px solid var(--couleur-bordure);border-radius:6px;background:var(--nav-cockpit-bg);color:var(--nav-cockpit-text)}
.cockpit-nav-msg button:hover{background:var(--nav-cockpit-hover)}
.cockpit-message-meta { font-weight: 600; color: var(--cockpit-meta); }

/* KKNMLC_MSG_HUMAIN_V1 */
.cockpit-message-humain { border-left: 5px solid var(--msg-humain-border); background: var(--msg-humain-bg); padding-left: 0.55rem; }
.cockpit-message-humain .cockpit-message-meta { color: var(--msg-humain-meta); font-weight: 700; }
/* KKNMLC_ENTETE_RUN_V1 : bandeau de métadonnées run/étape/passe/état sous la ligne méta */
.cockpit-entete-run { font-size: 0.7rem; color: #666; margin: 0.05rem 0 0.35rem 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem 0.35rem; }
.cockpit-entete-run span { display: inline-block; }
.cockpit-entete-sep { color: #bbb; user-select: none; }
.cockpit-message-humain .cockpit-entete-run { color: #5a7a5a; }
@media (max-width: 560px) {
  .cockpit-entete-run { font-size: 0.65rem; gap: 0.1rem 0.25rem; }
}
.cockpit-prenom-form { display: inline-flex; gap: 0.25rem; align-items: center; }
.cockpit-prenom-champ { width: 7rem; font-size: 0.85rem; padding: 0.15rem 0.3rem; }

/* KKNMLC_BARRE_ACTIONS_V1 : barre d actions de page, a droite du bouton-menu, tout en haut */
.barre-actions-page {
    position: fixed; top: 0.5rem; left: calc(0.5rem + var(--cible-tactile-min) + 0.5rem); right: 0.5rem;
    height: var(--cible-tactile-min);
    display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem;
    z-index: 29; pointer-events: none;
}
.barre-actions-page > * { pointer-events: auto; }
.barre-actions-page form { margin: 0; }
.barre-actions-page button { padding: 0.35rem 0.7rem; font-size: 0.85rem; white-space: nowrap; }

/* KKNMLC_BANDEAU_LIGNE_V1 : destinataire + composition sur une meme ligne */
.cockpit-ligne-cibles { display: flex; gap: 0.5rem; align-items: center; width: 100%; }
.cockpit-ligne-cibles > #cockpit-saisie-destinataire { flex: 1 1 0; min-width: 0; width: auto; }
.cockpit-ligne-cibles > #cockpit-compo-wrap { flex: 1 1 0; min-width: 0; }
.cockpit-ligne-cibles #cockpit-compo-jointe { width: 100%; }

/* KKNMLC_SEQ_COULEURS_V1 : reperage visuel du deroule des sequences (etapes cyclees ; alors=vert ; sinon=ambre ; condition=neutre) */
.seq-etapes > details.seq-etape{
    border:1px solid rgba(0,0,0,.10);
    border-left:5px solid var(--couleur-accent);
    border-radius:.5rem;
    background:var(--couleur-gris-50);
    padding:.2rem .9rem .7rem;
    margin:1rem 0;
    box-shadow:0 1px 2px rgba(0,0,0,.05);
}
.seq-etapes > details.seq-etape > summary.seq-etape-sum{
    margin:0 -.9rem;
    padding:.6rem .9rem;
    border-radius:.4rem .4rem 0 0;
    border-bottom:1px solid rgba(0,0,0,.06);
}
.seq-etapes > details.seq-etape:nth-of-type(6n+1){border-left-color:var(--seq-couleur-1)}
.seq-etapes > details.seq-etape:nth-of-type(6n+1) > summary.seq-etape-sum{background:rgba(45,108,223,.10)}
.seq-etapes > details.seq-etape:nth-of-type(6n+2){border-left-color:var(--seq-couleur-2)}
.seq-etapes > details.seq-etape:nth-of-type(6n+2) > summary.seq-etape-sum{background:rgba(124,77,255,.10)}
.seq-etapes > details.seq-etape:nth-of-type(6n+3){border-left-color:var(--seq-couleur-3)}
.seq-etapes > details.seq-etape:nth-of-type(6n+3) > summary.seq-etape-sum{background:rgba(214,51,108,.10)}
.seq-etapes > details.seq-etape:nth-of-type(6n+4){border-left-color:var(--seq-couleur-4)}
.seq-etapes > details.seq-etape:nth-of-type(6n+4) > summary.seq-etape-sum{background:rgba(8,145,178,.10)}
.seq-etapes > details.seq-etape:nth-of-type(6n+5){border-left-color:var(--seq-couleur-5)}
.seq-etapes > details.seq-etape:nth-of-type(6n+5) > summary.seq-etape-sum{background:rgba(192,38,211,.10)}
.seq-etapes > details.seq-etape:nth-of-type(6n+6){border-left-color:var(--seq-couleur-6)}
.seq-etapes > details.seq-etape:nth-of-type(6n+6) > summary.seq-etape-sum{background:rgba(71,85,105,.10)}
.seq-alors{
    border:1px solid rgba(31,143,72,.30);
    border-left:4px solid var(--seq-alors);
    background:rgba(31,143,72,.07);
    border-radius:.4rem;
}
.seq-sinon{
    border:1px solid rgba(199,108,30,.30);
    border-left:4px solid var(--seq-sinon);
    background:rgba(199,108,30,.07);
    border-radius:.4rem;
}
fieldset.seq-test{
    border:1px solid rgba(0,0,0,.12);
    border-left:4px solid rgba(0,0,0,.30);
    background:rgba(0,0,0,.025);
    border-radius:.4rem;
}
/* KKNMLC_RESPONSIVE_MOBILE_V1 : evite le debordement horizontal sur mobile (tableaux larges, longs mots, blocs pre) */
.contenu-page, .zone-note { max-width: 100%; }
table { max-width: 100%; }
.table-utilisateurs { display: block; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-utilisateurs th, .table-utilisateurs td { overflow-wrap: anywhere; word-break: break-word; }
pre, code { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
input[type="text"], input[type="number"], input[type="password"], textarea, select { max-width: 100%; box-sizing: border-box; }
@media (max-width: 640px) { .table-utilisateurs th, .table-utilisateurs td { padding: 0.4rem 0.5rem; font-size: 0.92rem; } }
/* KKNMLC_RESPONSIVE_MOBILE_V2 : mobile sans blocage ; tableaux a ascenseur interne */
@media (max-width: 820px) {
  *, *::before, *::after { box-sizing: border-box; }
  .contenu-page, .zone-note { max-width: 100%; }
  img, svg, canvas, video, iframe { max-width: 100%; height: auto; }
  table {
    display: block; width: 100%; max-width: 100%;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    border: 1px solid rgba(0,0,0,.12); border-radius: .4rem;
  }
  table::-webkit-scrollbar { height: 8px; }
  table::-webkit-scrollbar-thumb { background: rgba(0,0,0,.35); border-radius: 4px; }
  th, td { white-space: nowrap; }
  pre, code { white-space: pre-wrap; overflow-wrap: anywhere; max-width: 100%; }
  input, select, textarea, button { max-width: 100%; box-sizing: border-box; }
  textarea { width: 100%; }
}
@media (max-width: 560px) {
  th, td { padding: .4rem .55rem; font-size: .92rem; }
}

/* KKNMLC_REPRISE_CSS_V1 : partage 50/50 reprise + destinataire jamais ecrase */
.cockpit-ligne-cibles > #cockpit-reprise-wrap { flex: 1 1 0; min-width: 0; }
.cockpit-ligne-cibles #cockpit-reprise-action,
.cockpit-ligne-cibles #cockpit-reprise-etape { width: 100%; }
.cockpit-ligne-cibles > #cockpit-saisie-destinataire { min-width: 5rem; }

/* KKNMLC_LANCER_CSS_V1 : ligne lancer-sur-etape (3 menus) pleine largeur */
.cockpit-lancer-ligne { display:flex; gap:.5rem; flex-wrap:wrap; width:100%; margin-top:.35rem; }
.cockpit-lancer-ligne select { flex:1 1 7rem; min-width:0; }

/* KKNMLC_COMPO_DETAIL_AFF_V1 : enveloppe composition injectee */
.cockpit-message-enveloppe {
  background: #fcfaff; border: 1px dashed #d0bfff;
  border-radius: 6px; padding: 0.2rem 0.3rem; margin: 0.2rem 0;
}
.kk-pli-bouton {
  display: block; width: 100%; text-align: left;
  font-size: 0.78rem; cursor: pointer; color: #5f3dc4;
  border: 1px solid #d0bfff; background: #f8f4ff;
  border-radius: 4px; padding: 0.15rem 0.4rem; margin: 0.15rem 0;
}
.kk-pli-racine { font-weight: 600; }
.kk-pli-corps {
  margin: 0.2rem 0 0.3rem 0.6rem; padding-left: 0.5rem;
  border-left: 2px solid #e9dcff; font-size: 0.8rem;
}
.kk-pli-element { margin: 0.15rem 0; }
/* KKNMLC_COMPO_DETAIL_PARTIE_V1 : separateur d'ordre reel par partie dans le
   temoin de composition injectee du cockpit. */
.kk-pli-separateur-partie {
  margin: 0.4rem 0 0.15rem; padding: 0.1rem 0.4rem;
  font-size: 0.68rem; font-weight: 600; color: #5f3dc4;
  background: #f8f4ff; border-left: 3px solid #5f3dc4;
  border-radius: 2px; letter-spacing: 0.02em;
}
.kk-pli-separateur-partie:first-child { margin-top: 0; }

/* KKNMLC_OPTIONS_MOBILE_V1 : mise en page mobile de la page Options.
   .options-ligne n'avait aucune regle -> debordement a droite. */
.options-bloc, .options-bloc form { box-sizing: border-box; max-width: 100%; }
.options-ligne {
  display: block;
  margin: 0.7rem 0;
  font-size: 0.95rem;
  line-height: 1.45;
}
.options-ligne input[type="text"],
.options-ligne input[type="number"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 0.35rem;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--couleur-bordure);
  border-radius: 8px;
  font-size: 1rem;
  min-height: var(--cible-tactile-min);
}
.options-ligne input[type="checkbox"] {
  width: auto;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.options-metaphore {
  display: block;
  margin: 0.2rem 0 0.2rem;
  font-size: 0.85rem;
  color: #6b7280;
  font-style: italic;
  line-height: 1.4;
}

/* KKNMLC_FORMS_LAYOUT_V3 : formulaires de creation homogenes (connecteur codeur, colonne) + actions Outils */
.rc-creer-form{display:flex;flex-direction:column;gap:.35rem;max-width:34rem;margin:.5rem 0}
.rc-creer-form label{font-weight:600;margin-top:.5rem}
.rc-creer-form input[type=text],.rc-creer-form input[type=number],.rc-creer-form select,.rc-creer-form textarea{width:100%;box-sizing:border-box}
.rc-creer-form label input[type=checkbox]{width:auto;margin-right:.4rem}
.rc-creer-form button{align-self:flex-start;margin-top:.75rem}
.outils-form-action{margin:.6rem 0}
.outils-form-action label{display:inline-flex;align-items:center;gap:.4rem}

/* KKNMLC_NAV_GLOBALE_V1 : fleches chronologiques globales empilees a droite d'Envoyer */
.cockpit-nav-globale{display:flex;flex-direction:column;gap:0.2rem;align-self:stretch;flex:0 0 auto}
.cockpit-nav-globale button{flex:1 1 0;width:2.6rem;line-height:1;font-size:1.1rem;font-weight:700;cursor:pointer;border:1px solid var(--couleur-bordure);border-radius:6px;background:var(--nav-cockpit-bg);color:var(--nav-cockpit-text)}
.cockpit-nav-globale button:hover{background:var(--nav-cockpit-hover)}
.cockpit-message-courant{box-shadow:inset 3px 0 0 var(--couleur-accent);background:var(--nav-cockpit-courant)}

/* KKNMLC_EXTENSION_PONT_V1 - 20260629-003838 - Remplacement hex → var() - 91 occurrences (1 #2d6cdf préservé : palette curatée seq) */
/* KKNMLC_ALIASES_CATEGORIELS_V1 - 20260629-004552 - Étape 4/25 : 27 aliases métier créés, 30 hex centralisés (séquences, messages cockpit, msg humain, nav cockpit) */

/* === BOUTON COPIER COLONNE CHEF === */
.cockpit-copier-colonne {
    margin-left: 0.5rem;
    padding: 0.25rem 0.5rem;
    font-size: 1rem;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cockpit-copier-colonne:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

.cockpit-copier-colonne:active {
    transform: scale(0.95);
}

.cockpit-copie-retour {
    margin-left: 0.5rem;
    font-size: 0.85rem;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.cockpit-copie-retour.succes {
    color: #4ade80;
    opacity: 1;
}

.cockpit-copie-retour.erreur {
    color: #ef4444;
    opacity: 1;
}

/* Mobile : bouton plus petit */
@media (max-width: 768px) {
    .cockpit-copier-colonne {
        padding: 0.2rem 0.4rem;
        font-size: 0.9rem;
    }
    .cockpit-copie-retour {
        font-size: 0.75rem;
    }
}


/* KKNMLC_COCKPIT_BANDEAU_SCROLL_V1 : barre destinataire sur une seule
   ligne, glissable horizontalement (mobile). */
/* retire KKNMLC_AUDIT_V1 : bandeau nowrap/overflow-x obsolete */
.cockpit-bandeau .cockpit-saisie-unique-select {
    flex: 0 0 auto; min-width: 12rem;
}

/* KKNMLC_SAUVE_REORG_V1 : zone sauvegarde - 4 boutons en ligne + options */
.outils-boutons-sauvegarde { display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 10px; }
.outils-boutons-sauvegarde form { margin: 0; }
.outils-options-epuree { display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; margin: 4px 0 12px; }

/* KKNMLC_NETTOYAGE_V1 : zone nettoyage - boutons en ligne */
.outils-nettoyage-titre { margin: 14px 0 8px; font-size: 15px; }
.outils-boutons-nettoyage { display: flex; flex-wrap: wrap; gap: 10px;
  align-items: flex-end; margin-bottom: 12px; }
.outils-boutons-nettoyage form { margin: 0; }

/* ===== KKNMLC_CHANTIERS_STYLE_V1 : page Chantiers ===== */
.kkch-page { max-width: var(--largeur-max-contenu, 900px); margin: 0 auto;
  padding: .6rem .7rem 2rem; }
.kkch-entete { display: flex; align-items: center; justify-content: space-between;
  gap: .6rem; margin: .2rem 0 .8rem; }
.kkch-entete h1 { font-size: 1.5rem; margin: 0; font-weight: 700; }
.kkch-retour { display: inline-flex; align-items: center; gap: .35rem;
  min-height: 40px; padding: .3rem .8rem; border-radius: 10px;
  background: var(--nav-cockpit-bg, #f1f3f5); color: var(--nav-cockpit-text, #343a40);
  border: 1px solid var(--couleur-bordure, #e2e8f0); font-size: .9rem;
  text-decoration: none; cursor: pointer; white-space: nowrap; }
.kkch-retour:hover { background: var(--nav-cockpit-hover, #e7eaee); }
.kkch-barre { position: sticky; top: 0; z-index: 5;
  background: var(--couleur-fond, #f5f6f8);
  padding: .5rem 0; margin-bottom: .4rem;
  border-bottom: 1px solid var(--couleur-bordure, #e2e8f0); }
.kkch-groupe { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center;
  margin-bottom: .45rem; }
.kkch-groupe:last-child { margin-bottom: 0; }
.kkch-lbl { font-size: .8rem; opacity: .65; margin-right: .1rem; }
.kkch-btn { min-height: 40px; padding: .35rem .8rem; border-radius: 10px;
  border: 1px solid var(--couleur-bordure, #e2e8f0);
  background: #fff; color: var(--couleur-texte, #1c1f26);
  font-size: .88rem; cursor: pointer; transition: background .15s, border-color .15s; }
.kkch-btn:hover { background: var(--nav-cockpit-hover, #e7eaee); }
.kkch-btn:active { transform: translateY(1px); }
.kkch-btn-accent { background: var(--couleur-accent, #2d6cdf); color: #fff;
  border-color: var(--couleur-accent, #2d6cdf); }
.kkch-btn-accent:hover { background: var(--couleur-hover, #1e5bbf); }
.kkch-btn-danger { color: var(--couleur-danger, #e11d48);
  border-color: color-mix(in srgb, var(--couleur-danger, #e11d48) 40%, #fff); }
.kkch-btn-danger:hover { background: color-mix(in srgb, var(--couleur-danger, #e11d48) 12%, #fff); }
.kkch-btn-attention { color: var(--couleur-attention, #f59e0b);
  border-color: color-mix(in srgb, var(--couleur-attention, #f59e0b) 45%, #fff); }
.kkch-btn.actif { background: var(--couleur-accent, #2d6cdf); color: #fff;
  border-color: var(--couleur-accent, #2d6cdf); }
.kkch-tri { display: inline-flex; gap: .3rem; flex-wrap: wrap; }
.kkch-tri .kkch-btn { padding: .3rem .7rem; font-size: .82rem; min-height: 36px; }
.kkch-couleurs { display: inline-flex; gap: .1rem; align-items: center; flex-wrap: wrap; }
.kkch-coul { display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 10px; cursor: pointer;
  border: 2px solid transparent; position: relative; }
.kkch-coul input { position: absolute; opacity: 0; width: 0; height: 0; }
.kkch-pastille { width: 18px; height: 18px; border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.08); transition: transform .12s; }
.kkch-coul input:not(:checked) + .kkch-pastille { opacity: .28; transform: scale(.7); }
.kkch-coul input:checked + .kkch-pastille { transform: scale(1); }
.kkch-compte { font-size: .82rem; opacity: .7; min-width: 1rem; }
.kkch-liste { list-style: none; padding: 0; margin: .5rem 0 0; }
.kkch-carte { display: flex; align-items: flex-start; gap: .1rem;
  padding: .55rem .4rem; margin-bottom: .4rem; border-radius: 12px;
  background: #fff; border: 1px solid var(--couleur-bordure, #e2e8f0);
  box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.kkch-carte.masque { display: none; }
/* retire KKNMLC_CHANTIERS_V2 : en-file */ .kkch-noop-1 { }
.kkch-case-zone { flex: 0 0 auto; width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.kkch-case-zone input { width: 20px; height: 20px; cursor: pointer;
  accent-color: var(--couleur-accent, #2d6cdf); }
.kkch-poignee { flex: 0 0 auto; width: 40px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: grab; opacity: .4; font-size: 1.1rem; touch-action: none; user-select: none; }
.kkch-poignee:active { cursor: grabbing; }
.kkch-pos { flex: 0 0 auto; align-self: center; min-height: 36px;
  border-radius: 8px; border: 1px solid var(--couleur-bordure, #e2e8f0);
  font-size: .8rem; padding: .1rem .2rem; margin-right: .2rem; cursor: pointer; }
.kkch-corps { flex: 1 1 auto; min-width: 0; padding-top: .15rem; }
.kkch-titre-ligne { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; }
.kkch-voyant { flex: 0 0 auto; width: 14px; height: 14px; border-radius: 50%;
  box-shadow: 0 0 0 2px #fff, 0 0 0 3px rgba(0,0,0,.06); }
.kkch-id { font-weight: 700; color: var(--couleur-accent, #2d6cdf); }
.kkch-statut { font-size: .72rem; text-transform: uppercase; letter-spacing: .02em;
  padding: .1rem .4rem; border-radius: 6px; background: #eef2f7; opacity: .85; }
.kkch-nom { font-weight: 600; }
.kkch-note { display: block; margin-top: .25rem; font-size: .82rem;
  opacity: .7; font-style: italic; }
.kkch-vide { text-align: center; opacity: .55; padding: 2rem 0; }

/* ===== KKNMLC_CHANTIERS_STYLE_V2 : cartes compactes ===== */
.kkch-carte { display: flex; align-items: center; gap: .2rem;
  padding: .3rem .4rem; margin-bottom: .28rem; border-radius: 9px; }
.kkch-case-zone { width: 38px; height: 38px; }
.kkch-poignee { width: 32px; height: 38px; font-size: 1rem; }
.kkch-corps { padding-top: 0; }
.kkch-titre-ligne { flex-wrap: nowrap; gap: .35rem; overflow: hidden; }
.kkch-nom { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  flex: 1 1 auto; min-width: 0; }
.kkch-pos { min-height: 32px; }
.kkch-voyant { width: 13px; height: 13px; }
.kkch-statut { font-size: .68rem; padding: .05rem .35rem; flex: 0 0 auto; }
.kkch-id { flex: 0 0 auto; }
.kkch-barre .kkch-btn { min-height: 38px; padding: .3rem .7rem; font-size: .85rem; }
.kkch-groupe { gap: .35rem; margin-bottom: .35rem; }

/* ===== KKNMLC_RETOUR_COCKPIT_V1 : bouton cockpit en haut a droite ===== */
.barre-actions-page { left: auto; right: 0.5rem; justify-content: flex-end; }
.kkbtn-cockpit { display: inline-flex; align-items: center; gap: .3rem;
  min-height: var(--cible-tactile-min, 44px); padding: .35rem .85rem;
  border-radius: 10px; background: var(--nav-cockpit-bg, #f1f3f5);
  color: var(--nav-cockpit-text, #343a40);
  border: 1px solid var(--couleur-bordure, #e2e8f0);
  font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap; }
.kkbtn-cockpit:hover { background: var(--nav-cockpit-hover, #e7eaee); }

/* ===== KKNMLC_RETOUR_COCKPIT_V2 : bouton cockpit visible garanti ===== */
.barre-actions-page { position: fixed; top: .5rem; right: .5rem; left: auto;
  height: var(--cible-tactile-min, 44px); display: flex; align-items: center;
  justify-content: flex-end; gap: .4rem; z-index: 40; pointer-events: none; }
.barre-actions-page > * { pointer-events: auto; }
.kkbtn-cockpit { display: inline-flex; align-items: center; gap: .3rem;
  min-height: 40px; padding: .35rem .85rem; border-radius: 10px;
  background: var(--couleur-accent, #2d6cdf); color: #fff;
  border: 1px solid var(--couleur-accent, #2d6cdf);
  font-size: .9rem; font-weight: 600; text-decoration: none; white-space: nowrap;
  box-shadow: 0 1px 3px rgba(0,0,0,.15); }
.kkbtn-cockpit:hover { background: var(--couleur-hover, #1e5bbf); }

/* ===== KKNMLC_CHANTIERS_STYLE_V4 : corrections rangement ===== */
.kkch-entete { flex-wrap: nowrap; }
.kkch-groupe { flex-wrap: nowrap; overflow-x: auto; }
.kkch-barre .kkch-btn { min-height: 36px; padding: .28rem .55rem; font-size: .84rem;
  white-space: nowrap; flex: 0 0 auto; }
.kkch-tri, .kkch-couleurs { flex: 0 0 auto; }
.kkch-lbl { flex: 0 0 auto; }
.kkch-titre-file { flex-wrap: nowrap; }
.kkch-titre-h { white-space: nowrap; }
.kkch-carte { display: grid; grid-template-columns: auto auto 1fr;
  align-items: center; gap: .15rem .3rem; padding: .4rem .5rem; }
/* KKNMLC_DEPLIER_GAUCHE_V7 : l'indicateur +/- occupe une colonne dediee a
   gauche du contenu, sur la hauteur des deux lignes (grid-row 1/3). Grille
   carte = case | indicateur | contenu. Les deux lignes restent en colonne 3. */
.kkch-carte .kk-ch-deplier { grid-row: 1 / 3; grid-column: 2; align-self: stretch;
  width: 32px; min-height: 100%; display: flex; align-items: center;
  justify-content: center; font-size: 1.5rem; font-weight: 700;
  color: var(--couleur-accent, #2d6cdf); background: #f1f5ff;
  border: 1px solid #c7d2fe; border-radius: 5px; cursor: pointer;
  user-select: none; line-height: 1; padding: 0; }
.kkch-carte .kk-ch-deplier:hover { background: #e0e7ff; }
.kkch-carte .kkch-ligne1 { grid-column: 3; }
.kkch-carte .kkch-ligne2 { grid-column: 3; }
.kkch-carte .kkch-case-zone { width: 34px; height: 34px; align-self: start; grid-row: 1; grid-column: 1; }
.kkch-carte .kkch-corps { display: contents; }
.kkch-ligne1 { grid-row: 1; grid-column: 2; display: flex; align-items: center;
  gap: .4rem; flex-wrap: nowrap; min-width: 0; overflow: hidden; }
/* KKNMLC_CHANTIERS_UI_V6 : icones aerees sur 2 lignes + boussole lisible +
   indicateur deplier/replier (+/-). Les meta (voyant, id, statut, temoins)
   restent en haut ; les actions passent a la ligne et peuvent wrapper. */
.kkch-ligne1 { flex-wrap: wrap; overflow: visible; row-gap: .3rem; }
.kkch-ligne1 .kkch-actions { flex: 1 1 100%; display: flex; gap: .35rem;
  flex-wrap: wrap; justify-content: flex-end; margin-top: .15rem; }
.kkch-ligne1 .kkch-ic { width: 34px; height: 34px; font-size: 1.15rem;
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1; }
.kkch-deplier-ind { flex: 0 0 auto; width: 18px; height: 18px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem; color: var(--couleur-accent, #2d6cdf);
  border: 1px solid #c7d2fe; border-radius: 3px; margin-right: .3rem;
  cursor: pointer; user-select: none; line-height: 1; }
.kkch-ligne2 { grid-row: 2; grid-column: 1 / -1; min-width: 0; }
.kkch-ligne2 .kkch-nom { white-space: normal; overflow-wrap: anywhere;
  font-size: .9rem; line-height: 1.3;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; }
.kkch-ligne1 .kkch-poignee { width: 28px; height: 28px; font-size: .95rem; opacity: .4; flex: 0 0 auto; }
.kkch-ligne1 .kkch-pos { min-height: 28px; margin: 0; flex: 0 0 auto; }
.kkch-ligne1 .kkch-voyant { width: 13px; height: 13px; flex: 0 0 auto; }
.kkch-ligne1 .kkch-id { flex: 0 0 auto; }
.kkch-ligne1 .kkch-statut { flex: 0 0 auto; }

/* ===== KKNMLC_CHANTIERS_STYLE_V5 : titre haut + boutons serres + marges ===== */
.kktitre-page { position: fixed; top: .5rem;
  left: calc(.5rem + var(--cible-tactile-min, 44px) + .5rem);
  height: var(--cible-tactile-min, 44px); display: flex; align-items: center;
  font-size: 1.15rem; font-weight: 700; z-index: 31;
  color: var(--couleur-texte, #1c1f26); pointer-events: none; }
.kkch-page { padding: .4rem .35rem 2rem; max-width: 100%; }
.kkch-entete { display: none; }
body[data-page="chantiers"] .contenu-page { padding-top: calc(var(--cible-tactile-min, 44px) + .6rem); }
.kkch-groupe { flex-wrap: nowrap; overflow: visible; gap: .25rem; }
.kkch-barre .kkch-btn { min-height: 34px; padding: .25rem .4rem; font-size: .8rem;
  white-space: nowrap; text-align: center; }
.kkch-barre .kkch-groupe:nth-of-type(3) { gap: .3rem; }
.kkch-barre .kkch-groupe:nth-of-type(3) .kkch-btn { flex: 1 1 0; min-width: 0;
  padding: .25rem .2rem; }
.kkch-compte#kk-file-etat { display: none; }
.kkch-lbl { flex: 0 0 auto; font-size: .75rem; }
.kkch-titre-file { flex-wrap: nowrap; gap: .4rem; align-items: center; }
.kkch-titre-file .kkch-case-zone { width: 38px; height: 38px; flex: 0 0 auto; }
.kkch-titre-h { white-space: nowrap; margin: 0; }
.kkch-coul { width: 36px; height: 36px; }

/* ===== KKNMLC_CHANTIERS_STYLE_V6 : boutons ajustes au texte + ligne titre ===== */
.kkch-titre-file { display: flex !important; flex-direction: row !important;
  align-items: center; flex-wrap: nowrap; gap: .5rem; margin: .5rem 0 .4rem; }
.kkch-titre-file .kkch-case-zone { width: 40px; height: 40px; flex: 0 0 40px;
  align-self: center; margin: 0; }
.kkch-titre-h { margin: 0 !important; font-size: 1.25rem; font-weight: 700;
  white-space: nowrap; flex: 1 1 auto; }
.kkch-barre .kkch-groupe:nth-of-type(3) { gap: .28rem; justify-content: space-between; }
.kkch-barre .kkch-groupe:nth-of-type(3) .kkch-btn { flex: 0 0 auto;
  width: auto; min-width: 0; white-space: nowrap; overflow: visible;
  text-overflow: clip; padding: .3rem .5rem; font-size: .81rem; }

/* ===== KKNMLC_COCKPIT_BANDEAU_V2 : bandeau compact 3 lignes, jamais de debordement ===== */
.cockpit-bandeau { flex: 0 0 auto; display: flex; flex-direction: column;
  gap: .2rem; padding: .2rem .5rem .15rem .5rem; /* KKNMLC_ESPACES_SERRES_V1 */ background: var(--couleur-gris-100);
  border-bottom: 1px solid var(--couleur-bordure); font-size: .82rem;
  justify-content: flex-start; align-items: stretch; }
.ckb-ligne[hidden], .cockpit-bandeau [hidden] { display: none !important; }
/* KKNMLC_CKB_HIDDEN_V1 : l attribut hidden ne fait que display:none dans la
   feuille du navigateur ; la regle flex ci-dessous le battait au poids. Le
   menu destinataire restait donc affiche EN MEME TEMPS que le bandeau qui
   annonce son remplacement, et le texte de ce bandeau, coince dans la
   largeur restante, se repliait sur cinq lignes. */
.ckb-ligne { display: flex; align-items: center; gap: .35rem;
  overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ckb-ligne::-webkit-scrollbar { height: 0; }
.ckb-btn { flex: 0 0 auto; display: inline-flex; align-items: center;
  min-height: 32px; padding: .25rem .6rem; border-radius: 8px;
  border: 1px solid var(--couleur-bordure); background: #fff;
  color: var(--couleur-texte, #1c1f26); font-size: .82rem; font-weight: 600;
  text-decoration: none; white-space: nowrap; cursor: pointer; }
.ckb-btn:hover { background: var(--nav-cockpit-hover, #e7eaee); }
.ckb-btn-danger { color: var(--couleur-danger, #e11d48);
  border-color: color-mix(in srgb, var(--couleur-danger, #e11d48) 40%, #fff); }
.ckb-vider-form, .ckb-arreter-form { margin: 0; flex: 0 0 auto; }
.ckb-branche { display: flex; align-items: center; gap: .35rem;
  min-height: 26px; padding: .15rem .5rem; border-radius: 6px;
  background: color-mix(in srgb, var(--couleur-accent, #2d6cdf) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--couleur-accent, #2d6cdf) 25%, #fff);
  font-size: .8rem; overflow: hidden; }
.ckb-branche-ico { flex: 0 0 auto; }
.ckb-branche-nom { flex: 1 1 auto; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-weight: 600;
  color: color-mix(in srgb, var(--couleur-accent, #2d6cdf) 85%, #000); }
/* KKNMLC_ENVOI_DEUX_LIGNES_V1 : .ckb-ligne est un flex EN LIGNE. La paire
   role + composition, posee comme voisine de la paire du haut, se rangeait
   donc a cote d elle : quatre menus sur une seule ligne, tous ecrases. En
   colonne, chaque paire tient sa ligne et se partage la largeur a deux. */
.ckb-envoi { gap: .4rem; flex-direction: column; align-items: stretch; }
.ckb-envoi > .cockpit-ligne-cibles,
.ckb-envoi > #ckb-lancer-detail { width: 100%; }
#ckb-lancer-detail > select { flex: 1 1 0; min-width: 0; width: auto; }
.ckb-envoi .cockpit-saisie-unique-select { flex: 1 1 auto; min-width: 0;
  min-height: 34px; padding: .2rem .4rem; font-size: .82rem; }
.ckb-envoi .cockpit-ecriture-run { flex: 0 0 auto; }
.ckb-envoi .cockpit-pause-form { margin: 0; flex: 0 0 auto; }
.ckb-envoi .cockpit-pause-bouton { min-height: 32px; padding: .25rem .6rem;
  border-radius: 8px; border: 1px solid var(--couleur-bordure); background: #fff;
  font-size: .82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }

/* ===== KKNMLC_COCKPIT_BANDEAU_V3 : marges reduites, branche un peu plus haute ===== */
.ckb-btn { padding: .25rem .45rem; }
.ckb-envoi .cockpit-pause-bouton, .ckb-nav .cockpit-pause-bouton { padding: .25rem .45rem; }
.ckb-nav .cockpit-pause-form { margin: 0; flex: 0 0 auto; }
.ckb-branche { min-height: 32px; padding: .3rem .6rem; font-size: .85rem; }
.ckb-branche-nom { font-size: .85rem; }
.ckb-nav .cockpit-ecriture-run { flex: 0 0 auto; white-space: nowrap;
  font-size: .8rem; display: inline-flex; align-items: center; gap: .25rem; }

/* ===== KKNMLC_COCKPIT_ECRITURE_BTN_V1 : ecriture API en bouton colore ===== */
.ckb-ecriture-btn { min-height: 32px; padding: .25rem .5rem; border-radius: 8px;
  border: 1px solid var(--couleur-bordure); background: #fff; cursor: pointer;
  gap: .3rem; font-weight: 600; transition: background .15s, border-color .15s, color .15s; }
.ckb-ecriture-btn:has(input:checked) { background: var(--couleur-accent, #2d6cdf);
  color: #fff; border-color: var(--couleur-accent, #2d6cdf); }
.ckb-ecriture-btn input { accent-color: #fff; }

/* ============================================================
   KKNMLC_COCKPIT_LAYOUT_V2 : layout cockpit UNIFIE (remplace
   LAYOUT_V1 + SWIPE_V1 + SWIPE_V2). Une seule source de verite.
   ============================================================ */
body[data-page="cockpit"].mode-ecran-fige .contenu-page {
  height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; }
.cockpit-page { flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; }
.cockpit-bandeau { flex: 0 0 auto; }
.cockpit-saisie-unique { flex: 0 0 auto; }
.cockpit-saisie-unique-form { width: 100%; flex: 1 1 auto; }
.cockpit-grille { flex: 1 1 auto; min-height: 0;
  display: flex; flex-wrap: nowrap; align-items: stretch;
  gap: .4rem; padding: .15rem .4rem .4rem .4rem; /* KKNMLC_ESPACES_SERRES_V1 */
  overflow-x: auto; overflow-y: hidden;
  touch-action: pan-x; -webkit-overflow-scrolling: touch; }
.cockpit-colonne { flex: 0 0 85%; max-width: 85%; align-self: stretch;
  min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid var(--couleur-bordure); border-radius: 8px;
  background: var(--couleur-gris-50); }
.cockpit-colonne-entete { flex: 0 0 auto; }
.cockpit-colonne-corps { flex: 1 1 auto; min-height: 0;
  overflow-y: auto; overflow-x: hidden;
  overscroll-behavior-y: contain; touch-action: pan-y;
  -webkit-overflow-scrolling: touch; padding: .5rem; }
.cockpit-saisie-ligne { display: flex; gap: .4rem; align-items: stretch; width: 100%; }
.cockpit-saisie-ligne .cockpit-saisie-unique-texte { flex: 1 1 auto; min-width: 0;
  min-height: 3.6rem; max-height: 7rem; resize: none; }
.cockpit-envoi-cote { flex: 0 0 auto; display: flex; flex-direction: column;
  gap: .3rem; width: 2.8rem; }
.cockpit-envoi-cote .cockpit-saisie-unique-envoyer { width: 100%; height: 2rem;
  min-height: 0; padding: 0; display: flex; align-items: center;
  justify-content: center; font-size: 1.1rem; }
.cockpit-envoi-cote .cockpit-nav-globale { display: flex; flex-direction: column;
  gap: .3rem; width: 100%; }
.cockpit-envoi-cote .cockpit-nav-globale button { width: 100%; min-height: 1.6rem;
  padding: 0; }

/* ===== KKNMLC_CHANTIERS_BARRE_V3 : 2 colonnes + roue reglages + panneau ===== */
.kkch-barre-v3 { position: relative; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; column-gap: .6rem; row-gap: .5rem;
  align-items: start; } /* KKNMLC_BARRE_V4 : boutons a gauche, filtres a droite */
.kkch-barre-v3 .kkch-barre-haut { display: contents; }
/* KKNMLC_BARRE_V5 : plus de colonne de tri, les 6 boutons tiennent la gauche */
.kkch-barre-v3 .kkch-barre-actions { grid-row: 1 / span 2; }
.kkch-titre-file { display: flex; align-items: center; gap: .5rem; }
.kkch-tri-select { margin-left: auto; font-size: .82rem; padding: .25rem .4rem;
  border: 1px solid #d7deea; border-radius: 6px; background: #fff; }
.kkch-barre-v3 .kkch-col-filtres { grid-column: 2; grid-row: 1 / span 2;
  display: flex; flex-direction: column; gap: .45rem; align-items: flex-end; }
.kkch-barre-v3 .kkch-col-filtres .kkch-col-coul { margin-left: 0; }
.kkch-barre-v3 .kkch-col-statut { padding-top: .35rem;
  border-top: 1px solid #e2e8f0; width: 100%; }
.kkch-barre-v3 .kkch-barre-actions { grid-column: 1; grid-row: 2;
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem; align-items: start; }
.kkch-barre-v3 .kkch-barre-actions .kkch-compte { grid-column: 1 / -1; }
/* KKNMLC_BARRE_V4 : le + ne couvre que les deux lignes de texte */
.kkch-carte .kk-ch-deplier { grid-row: 2; align-self: stretch; }
.kkch-carte .kkch-ligne1 { grid-column: 2 / -1; }
.kkch-carte .kkch-ligne2 { grid-column: 3; }
.kkch-roue { position: absolute; top: 0; right: 0; width: 34px; height: 34px; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: #fff; cursor: pointer; font-size: 1.1rem; line-height: 1; }
.kkch-barre-haut { display: flex; gap: 1rem; align-items: flex-start; padding-right: 40px; }
.kkch-col-tri { display: flex; flex-direction: column; gap: .3rem; flex: 0 0 auto; }
.kkch-col-tri .kkch-lbl { font-size: .8rem; opacity: .65; }
.kkch-col-coul { display: flex; flex-direction: column; gap: .2rem; margin-left: auto; align-items: flex-start; }
.kkch-coul-ligne { display: inline-flex; align-items: center; gap: .4rem; cursor: pointer; }
.kkch-coul-ligne input { /* KKNMLC_CHANTIER_CASE_VISIBLE_V1 : case visible, placee a droite du rond via order flex */ order: 3; width: 13px; height: 13px; margin: 0 0 0 .15rem; cursor: pointer; flex: 0 0 auto; opacity: .75; position: static; }
.kkch-coul-ligne .kkch-pastille { width: 16px; height: 16px; border-radius: 50%; flex: 0 0 auto; }
.kkch-coul-ligne input:not(:checked) + .kkch-pastille { opacity: .28; transform: scale(.85); }
.kkch-coul-lbl { font-size: .78rem; color: var(--couleur-gris-500, #6b7280); order: 1; }
.kkch-coul-ligne .kkch-pastille { order: 2; }
.kkch-barre-actions { display: flex; gap: .35rem; align-items: center; }
.kkch-barre-actions .kkch-btn { background: #fff; color: var(--couleur-texte, #1c1f26); border: 1px solid var(--couleur-bordure); }
.kkch-barre-actions .kkch-btn:disabled { opacity: .45; cursor: not-allowed; }
.kkch-reglages-voile { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 40; }
.kkch-reglages-panneau { position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 41; width: min(92vw, 340px); background: #fff; border-radius: 12px; padding: 1rem; box-shadow: 0 8px 30px rgba(0,0,0,.25); display: flex; flex-direction: column; gap: .7rem; }
.kkch-reglages-titre { margin: 0; font-size: 1.05rem; }
.kkch-reglages-champ { display: flex; flex-direction: column; gap: .25rem; font-size: .85rem; font-weight: 600; }
.kkch-reglages-champ select { min-height: 38px; border: 1px solid var(--couleur-bordure); border-radius: 8px; padding: .3rem .5rem; font-size: .9rem; }
.kkch-reglages-pied { display: flex; justify-content: flex-end; }
/* KKNMLC_REGLAGES_HIDDEN_FIX : hidden doit gagner sur display:flex */
.kkch-reglages-panneau[hidden], .kkch-reglages-voile[hidden] { display: none !important; }
/* KKNMLC_BARRE_V3_AJUST : roue dans colonne tri + couleurs alignees a droite */
.kkch-roue-opt { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .6rem; border: 1px solid var(--couleur-bordure); border-radius: 8px; background: #fff; cursor: pointer; font-size: .85rem; }
.kkch-roue-ic { font-size: 1rem; }
.kkch-barre-haut { padding-right: 0; }
.kkch-col-coul { align-items: flex-end; }
.kkch-coul-ligne { justify-content: flex-end; }

/* KKNMLC_ETAT_SEQ_V1 : bandeau sequence en cours a la place du menu */
.kk-seq-badge { display: inline-block; font-size: .72rem; font-weight: 600;
  color: #fff; background: #2d6cdf; border-radius: 5px; padding: 2px 7px;
  margin-right: 6px; }
.kk-seq-txt { font-size: .78rem; color: #64748b; }

/* KKNMLC_DIAG_ERREURS_V1 : page de diagnostic */
.kk-diag-liste { list-style: none; margin: 12px 0 0; padding: 0; }
.kk-diag-ligne { border: 1px solid #e2e8f0; border-radius: 7px; padding: .5rem .6rem;
  margin-bottom: .5rem; background: #fff; }
.kk-diag-tete { display: flex; align-items: center; gap: 8px; }
.kk-diag-uid { font-weight: 600; font-size: .82rem; flex: 1; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kk-diag-quand { font-size: .72rem; color: #94a3b8; }
.kk-diag-copier { border: 1px solid #c7d2fe; background: #f1f5ff; color: #2d6cdf;
  border-radius: 5px; cursor: pointer; font-size: .74rem; padding: .2rem .45rem; }
.kk-diag-cascade { display: flex; flex-wrap: wrap; gap: 6px; margin: .35rem 0; }
.kk-diag-cascade span { font-size: .74rem; background: #f1f5f9; color: #475569;
  border-radius: 4px; padding: 2px 6px; }
.kk-diag-msg { font-size: .8rem; color: #b91c1c; margin: .25rem 0 0;
  overflow-wrap: anywhere; }

/* KKNMLC_DIAG_ERREURS_V2 : entete de la page de diagnostic */
.kk-diag-tete-page { display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap; }
.kk-diag-tete-page h2 { margin: 0; }
.kk-diag-compte { font-size: .78rem; font-weight: 600; color: #fff;
  background: #b91c1c; border-radius: 10px; padding: 1px 8px; }
.kk-diag-tete-page .kkch-btn { margin-left: auto; }

/* KKNMLC_LANCER_ETAPE_V3 : deux menus en haut, deux en dessous, a parts
   egales. */
.cockpit-ligne-cibles > #cockpit-etapes-wrap { flex: 1 1 0; min-width: 0; }
.cockpit-ligne-cibles #ckb-lancer-etape-sel { width: 100%; }
#ckb-lancer-detail { display: flex; gap: .5rem; width: 100%; }
#ckb-lancer-detail[hidden] { display: none !important; }
#ckb-lancer-detail > select { flex: 1 1 0; min-width: 0; }

/* KKNMLC_COCKPIT_PLAT_V1 : Pause et Vider a droite de la branche, a la
   largeur de leur texte, pas un pixel de plus. */
.ckb-branche { gap: .3rem; }
/* KKNMLC_ARBRE_PLIAGE_V1 : chevron d ouverture, aligne a gauche de chaque
   ligne. Les branches sans descendance gardent la place, sans le bouton. */
/* KKNMLC_ARBRE_PLIAGE_V1 : un plus et un moins dans un carre, comme dans
   un explorateur de fichiers. Le chevron etait trop discret pour un geste
   qu on fait souvent. Taille alignee sur le texte courant. */
.kk-arbre-plier { flex: 0 0 auto; width: 1.15rem; height: 1.15rem;
  padding: 0; margin-right: .15rem; cursor: pointer;
  border: 1px solid var(--couleur-bordure); border-radius: 3px;
  background: #fff; color: var(--couleur-gris-700, #374151);
  font-size: .95rem; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.kk-arbre-plier:hover { background: var(--couleur-gris-100); }
.kk-arbre-plier-vide { cursor: default; visibility: hidden; }
.kk-arbre-ligne[hidden] { display: none !important; }
/* KKNMLC_BRANCHE_JEU_V1 : le nom part de la gauche, le jeu de la droite.
   Le jeu ne depasse jamais la moitie : quand il est court le nom avance
   jusqu a lui, quand il est long ils se verrouillent au milieu. */
.ckb-branche-jeu { flex: 0 1 auto; min-width: 0; max-width: 50%;
  margin-left: auto; text-align: right; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  font-size: .78rem; color: var(--couleur-gris-500); }
/* KKNMLC_LIGNE_CMD_V1 : les trois commandes, groupees a gauche. */
.ckb-cmd { display: flex; align-items: center; gap: .35rem;
  flex-wrap: wrap; }
.ckb-cmd:empty { display: none; }
.ckb-cmd .ckb-mini, .ckb-cmd button.ckb-mini,
.ckb-cmd .ckb-mini > button { flex: 0 0 auto; width: auto;
  min-height: 28px; padding: .15rem .6rem; font-size: .8rem;
  line-height: 1.2; white-space: nowrap; }
.ckb-cmd .cockpit-pause-form.ckb-mini { display: inline-flex; margin: 0; }
.ckb-branche .ckb-mini, .ckb-branche .ckb-mini > button,
.ckb-branche button.ckb-mini { flex: 0 0 auto; width: auto;
  min-height: 26px; padding: .1rem .5rem; font-size: .78rem;
  line-height: 1.2; white-space: nowrap; }
.ckb-branche .cockpit-pause-form.ckb-mini { display: inline-flex; margin: 0; }
.ckb-branche-nom { flex: 1 1 auto; min-width: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }

/* KKNMLC_LANCER_ETAPE_V3 : deux menus par ligne, a parts egales. */
.cockpit-ligne-cibles > #cockpit-etapes-wrap { flex: 1 1 0; min-width: 0; }
.cockpit-ligne-cibles #ckb-lancer-etape-sel { width: 100%; }
#ckb-lancer-detail { display: flex; gap: .4rem; width: 100%; }
#ckb-lancer-detail[hidden] { display: none !important; }
#ckb-lancer-detail > select { flex: 1 1 0; min-width: 0; width: auto; }

/* KKNMLC_CACHE_COMPO_V1 : reglage du cache d une composition. Les durees
   n apparaissent que si le cache est actif : un menu qui ne commande rien
   est un menu qui ment. */
.compo-cache-box { margin: .6rem 0; padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--couleur-bordure); }
.compo-cache-box legend { font-weight: 600; font-size: .9em; padding: 0 .3rem; }
.compo-cache-durees { display: flex; flex-direction: column; gap: .35rem; }
.compo-cache-durees[hidden] { display: none !important; }
.compo-cache-durees label { display: block; }
.compo-cache-durees select { width: 100%; max-width: 22rem; }

/* KKNMLC_ONGLET_COUTS_V1 : tableau des couts. Deux colonnes de montants,
   la periode et le compteur remis a zero. */
.kc-barre { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem;
  margin: .4rem 0 .6rem; }
.kc-filtres { display: flex; gap: .6rem; align-items: flex-end; margin: 0; }
.kc-note { font-size: .85em; opacity: .8; margin: .2rem 0 .6rem; line-height: 1.4; }
.kc-table { border-collapse: collapse; width: 100%; font-size: .9em; }
.kc-table th, .kc-table td { padding: .3rem .5rem; text-align: right;
  border-bottom: 1px solid var(--couleur-gris-100); }
.kc-table th:first-child, .kc-table td:first-child { text-align: left; }
.kc-table tfoot th { border-top: 2px solid var(--couleur-bordure); font-weight: 700; }
.kc-usd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.kc-slug { font-size: .8em; opacity: .55; }
.kc-alerte { font-size: .78em; color: #b91c1c; }
.kc-sep td { background: var(--couleur-gris-100); font-weight: 600; text-align: left !important; }
.kc-fs { margin: .5rem 0; padding: .5rem .7rem; border-radius: 8px;
  border: 1px solid var(--couleur-bordure); }
.kc-fs legend { font-weight: 600; font-size: .9em; padding: 0 .3rem; }
.kc-fs label { display: flex; justify-content: space-between; align-items: center;
  gap: .6rem; margin: .25rem 0; font-size: .88em; }
.kc-fs input { max-width: 11rem; }
.kc-maj { font-size: .78em; opacity: .65; margin: .3rem 0 0; }

/* KKNMLC_COUTS_RENDU_V1 : la premiere colonne reste visible au defilement
   horizontal. Sans elle, glisser pour voir les montants faisait disparaitre
   le nom de l IA ou du role. */
.kc-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.kc-table th:first-child, .kc-table td:first-child {
  position: sticky; left: 0; z-index: 2; background: #fff;
  box-shadow: 1px 0 0 var(--couleur-gris-100); }
.kc-table thead th:first-child { z-index: 3; }
.kc-table .kc-sep td:first-child { background: var(--couleur-gris-100); }

/* KKNMLC_COUTS_COLONNE_V1 : libelle et slug sur deux lignes dans la colonne
   figee, pour qu elle reste etroite sans rogner les montants. */
.kc-table td:first-child { line-height: 1.25; padding-top: .35rem;
  padding-bottom: .35rem; }
.kc-nom { display: block; white-space: nowrap; }
.kc-slug { display: block; font-size: .78em; opacity: .55; white-space: nowrap; }
.kc-alerte { display: block; font-size: .74em; color: #b91c1c; white-space: nowrap; }
.kc-table th:first-child, .kc-table td:first-child { max-width: 11rem; }

/* KKNMLC_COUTS_COLONNE_V1 : le separateur occupe les 7 colonnes, donc le
   figer ne servait a rien : c est son TEXTE qui doit rester a gauche. On
   rend le span collant plutot que la cellule. */
.kc-sep td { position: static !important; background: var(--couleur-gris-100); }
.kc-sep-txt { position: sticky; left: .5rem; display: inline-block;
  font-weight: 600; }


/* KKNMLC_DRAPEAU_FONCTION_V1 : la note qui explique la fonction d un
   drapeau reconnu par le logiciel. */
.drapeau-fn-note { margin: .3rem 0 .2rem; padding: .35rem .5rem;
  border-radius: 6px; background: var(--couleur-gris-100);
  font-size: .8em; line-height: 1.4; font-weight: 400; }

/* KKNMLC_CACHE_COMPO_V1 : le cadre Anthropic entoure les DEUX durees, la ou
   la mention est vraie : ce sont les seuls marqueurs de cache poses dans le
   message. Ailleurs le cache est automatique et sans reglage. */
.compo-cache-anthropic { margin: .2rem 0 0; padding: .4rem .6rem .5rem;
  border: 1px solid var(--couleur-bordure); border-radius: 6px;
  background: var(--couleur-gris-100); }
.compo-cache-anthropic legend { font-size: .78em; font-weight: 600;
  padding: 0 .35rem; opacity: .8; }
.compo-cache-anthropic label { display: block; margin: .25rem 0;
  font-weight: 600; }
.compo-cache-anthropic select { width: 100%; max-width: 22rem; }

/* KKNMLC_CHANTIER_ARBRE_V1 : indentation par variable CSS, chevron pour les
   parents, place vide pour les autres afin d aligner les titres. Le
   masquage passe par la classe "masque" deja utilisee par les filtres. */
.kk-chantier-li { padding-left: calc(var(--kkch-prof, 0) * 1.25rem); }
.kkch-plier-zone { flex: 0 0 auto; display: inline-flex; align-items: center; }
.kkch-plier { width: 1.15rem; height: 1.15rem; padding: 0; margin-right: .2rem;
  cursor: pointer; border: 1px solid var(--couleur-bordure); border-radius: 3px;
  background: #fff; color: var(--couleur-gris-700, #374151);
  font-size: .95rem; font-weight: 600; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; }
.kkch-plier:hover { background: var(--couleur-gris-100); }
.kkch-plier-vide { cursor: default; visibility: hidden; border: 0; }
.kkch-avancement { flex: 0 0 auto; margin-left: .4rem; padding: .05rem .4rem;
  border-radius: 10px; background: var(--couleur-gris-100);
  font-size: .74rem; white-space: nowrap; color: var(--couleur-gris-500); }
.kkch-avancement-plein { background: #dcfce7; color: #15803d; font-weight: 600; }

/* KKNMLC_DIALOGUE_V1 : boite a trois reponses. « Annuler » renonce a
   l action, « Ignorer » la poursuit sans l option proposee : confirm() ne
   sait pas dire la difference. */
.kk-dlg-panneau { max-width: 26rem; }
.kk-dlg-msg { margin: .2rem 0 .8rem; line-height: 1.45; font-size: .92em; }
.kk-dlg-boutons { display: flex; flex-wrap: wrap; gap: .4rem;
  justify-content: flex-end; }
.kk-dlg-ok { font-weight: 600; }
.kk-dlg-annuler { opacity: .8; }

/* KKNMLC_ARBRE_NATURE_V1 : une ligne se distingue par sa nature. Une branche
   est un repertoire de rangement, en gras ; un jeu est un lieu de travail,
   en graisse normale, avec un filet a gauche. */
.kk-arbre-ligne-jeu { border-left: 2px solid var(--couleur-bordure);
  margin-left: .15rem; }
.kk-arbre-ligne-jeu .kk-arbre-lib { font-weight: 400; }
.kk-arbre-ligne:not(.kk-arbre-ligne-jeu) .kk-arbre-lib { font-weight: 600; }
.kk-arbre-jeu-actif { background: transparent !important; color: inherit !important; }
.kk-arbre-encours { display: none; }