/* LES ÉCRANS DE kv2 — mis en page d'après Kaordia (volet gauche 168 px, bulles « Plume »),
   réécrits : aucun des 1 926 lignes de plume-chat.css n'est recopié. Jetons : charte.css. */
* { box-sizing: border-box; }
/* ⛔ Sans cette ligne, « display: flex » l'emporte sur l'attribut hidden : une vue cachée prend
   quand même la moitié de l'écran (vu au banc d'écran du 27/09). */
[hidden] { display: none !important; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font-body); font-size: var(--text-base); color: var(--text-primary);
       background: var(--bg-primary); line-height: var(--leading-normal); }
button, input, select, textarea { font: inherit; color: inherit; }

.bouton { border: 1px solid var(--border-default); background: var(--bg-secondary); border-radius: var(--radius-md);
          padding: var(--space-2) var(--space-4); cursor: pointer; font-weight: var(--font-medium);
          transition: background var(--duration-fast); }
.bouton:hover:not(:disabled) { background: var(--bg-hover); }
.bouton:disabled { opacity: .45; cursor: not-allowed; }
.bouton-principal { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.bouton-principal:hover:not(:disabled) { background: var(--accent-hover); }
.refus { color: var(--color-error); background: color-mix(in srgb, var(--color-error) 8%, transparent);
         border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-sm); }
.etiquette { font-size: var(--text-xs); color: var(--text-muted); border: 1px solid var(--border-light);
             border-radius: var(--radius-full); padding: 0 var(--space-2); }

/* ── Connexion ─────────────────────────────────────────────────────────── */
.page-connexion { display: grid; place-items: center; }
.carte-connexion { width: min(380px, 92vw); background: var(--bg-secondary); border: 1px solid var(--border-light);
                   border-radius: var(--radius-xl); box-shadow: var(--shadow-lg); padding: var(--space-8); }
.connexion-marque { display: block; width: 220px; margin: 0 auto; }
.connexion-sous-titre { text-align: center; color: var(--text-muted); font-size: var(--text-sm); margin: 0 0 var(--space-6); }
.carte-connexion form { display: grid; gap: var(--space-4); }
.carte-connexion label { display: grid; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-secondary); }
.carte-connexion input { border: 1px solid var(--border-default); border-radius: var(--radius-md);
                         padding: var(--space-2) var(--space-3); background: var(--bg-secondary); }
.carte-connexion input:focus, textarea:focus, select:focus { outline: 2px solid var(--accent-border); outline-offset: 0; }

/* ── La coquille : volet gauche + vue ──────────────────────────────────── */
.coquille { display: flex; height: 100vh; overflow: hidden; }
.volet { width: 168px; min-width: 168px; display: flex; flex-direction: column; background: var(--bg-secondary);
         border-right: 1px solid var(--border-light); padding: var(--space-3) var(--space-2); }
.volet-nav { flex: 1; display: flex; flex-direction: column; gap: var(--space-1); }
.volet-item { text-align: left; border: 0; background: none; border-radius: var(--radius-md);
              padding: var(--space-2) var(--space-3); cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); }
.volet-item:hover { background: var(--bg-hover); }
.volet-item.actif { background: var(--accent-soft); color: var(--text-primary); font-weight: var(--font-medium); }
.volet-marque { display: flex; justify-content: center; padding: var(--space-3) 0; }
.volet-marque img { height: 46px; }
.volet-pied { border-top: 1px solid var(--border-light); padding-top: var(--space-2); display: grid; gap: var(--space-1); }
.volet-pied span { font-size: var(--text-xs); color: var(--text-muted); padding: 0 var(--space-3); }
.vue { flex: 1; display: flex; min-width: 0; }

/* ── Le chat ───────────────────────────────────────────────────────────── */
.liste { width: 240px; border-right: 1px solid var(--border-light); display: flex; flex-direction: column; background: var(--bg-primary); }
.liste-entete { display: flex; gap: var(--space-2); padding: var(--space-3); border-bottom: 1px solid var(--border-light); }
.liste-entete select { flex: 1; min-width: 0; border: 1px solid var(--border-default); border-radius: var(--radius-md);
                       background: var(--bg-secondary); padding: 0 var(--space-2); font-size: var(--text-sm); }
.liste-entete .bouton { padding: var(--space-1) var(--space-3); font-size: var(--text-sm); }
#conversations { list-style: none; margin: 0; padding: var(--space-2); overflow-y: auto; }
#conversations li { padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); cursor: pointer;
                    font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#conversations li small { display: block; color: var(--text-muted); font-size: var(--text-xs); }
#conversations li:hover { background: var(--bg-hover); }
#conversations li.actif { background: var(--accent-soft); }

.chat { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.chat-entete { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6);
               border-bottom: 1px solid var(--border-light); font-weight: var(--font-medium); }
.fil { flex: 1; overflow-y: auto; padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4);
       max-width: 860px; width: 100%; margin: 0 auto; }
.fil-vide { color: var(--text-muted); text-align: center; margin-top: var(--space-10); }
.bulle { max-width: 85%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); line-height: var(--leading-relaxed); }
.bulle-user { align-self: flex-end; background: var(--bulle-personne); white-space: pre-wrap; }
.bulle-assistant { align-self: stretch; max-width: 100%; padding-left: 0; padding-right: 0; }
.bulle-role { display: block; font-size: var(--text-xs); color: var(--text-muted); font-weight: var(--font-medium); margin-bottom: var(--space-1); }
.bulle-texte p { margin: 0 0 var(--space-2); }
.bulle-texte p:last-child { margin-bottom: 0; }
.bulle-texte code { font-family: var(--font-mono); font-size: .9em; background: var(--bg-surface); padding: 0 .25em; border-radius: var(--radius-sm); }
.bulle-texte pre { background: var(--bg-surface); padding: var(--space-3); border-radius: var(--radius-md); overflow-x: auto; }
.bulle-meta { display: block; margin-top: var(--space-2); font-size: var(--text-xs); color: var(--text-muted); }
.bulle-attente { color: var(--text-muted); font-style: italic; }
.saisie { display: flex; gap: var(--space-2); align-items: flex-end; border-top: 1px solid var(--border-light);
          padding: var(--space-3) var(--space-6); max-width: 860px; width: 100%; margin: 0 auto; }
.saisie textarea { flex: 1; resize: none; border: 1px solid var(--border-default); border-radius: var(--radius-lg);
                   padding: var(--space-2) var(--space-3); background: var(--bg-secondary); min-height: 44px; max-height: 200px; }

/* ── Les paramètres ────────────────────────────────────────────────────── */
.parametres { flex: 1; overflow-y: auto; padding: var(--space-6) var(--space-8); max-width: 1000px; }
.parametres h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-1); }
.parametres h2 { font-size: var(--text-lg); margin: var(--space-8) 0 var(--space-3); }
.parametres .sous { color: var(--text-muted); margin: 0 0 var(--space-4); font-size: var(--text-sm); }
.carte { background: var(--bg-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
         box-shadow: var(--shadow-sm); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.carte h3 { margin: 0; font-size: var(--text-base); display: flex; gap: var(--space-2); align-items: center; }
.grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin: var(--space-3) 0; }
.chiffre { background: var(--bg-primary); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); }
.chiffre b { display: block; font-size: var(--text-lg); }
.chiffre span { font-size: var(--text-xs); color: var(--text-muted); }
.carte details summary { cursor: pointer; font-size: var(--text-sm); color: var(--text-secondary); }
.carte pre { white-space: pre-wrap; font-family: var(--font-mono); font-size: var(--text-xs); background: var(--bg-primary);
             padding: var(--space-3); border-radius: var(--radius-md); }
table.travaux { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
table.travaux th, table.travaux td { text-align: left; padding: var(--space-1) var(--space-2); border-bottom: 1px solid var(--border-light); }
table.travaux th { color: var(--text-muted); font-weight: var(--font-medium); font-size: var(--text-xs); }
.statut-refuse { color: var(--color-error); }
.statut-fait { color: var(--color-success); }