.principles-tab { padding: 0; height: 100%; display: flex; flex-direction: column; }

.principles-toolbar {
  display: flex; gap: .65rem; align-items: center;
  padding: .55rem .9rem;
  background: rgba(24, 24, 27, .22);
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  flex-wrap: wrap;
  backdrop-filter: blur(24px) saturate(180%);
}
.principles-toolbar label { font-size: .82rem; color: #d4d4d8; display: flex; align-items: center; gap: .3rem; }
.principles-toolbar input[type="search"], .principles-toolbar select, .principles-toolbar button {
  background: rgba(39, 39, 42, .45); color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px; padding: .25rem .55rem; font-size: .82rem;
}
.principles-toolbar input[type="search"] { min-width: 220px; font-family: inherit; }
.principles-toolbar .principles-stats {
  margin-left: auto;
  font-family: 'Menlo','Consolas',monospace;
  font-size: .8rem; font-weight: 600;
  display: flex; gap: .4rem;
}

/* ===== Layout 2 col ===== */
.principles-layout { display: grid; grid-template-columns: 240px 1fr; flex: 1; min-height: 0; transition: grid-template-columns .2s; }
.principles-layout.sidebar-hidden { grid-template-columns: 0 1fr; }
.principles-layout.sidebar-hidden #pri-sidebar { visibility: hidden; border-right: none; }

#pri-sidebar {
  background: rgba(20, 20, 23, .25);
  border-right: 1px solid rgba(255, 255, 255, .1);
  overflow-y: auto;
  backdrop-filter: blur(24px) saturate(180%);
}
#pri-tree { list-style: none; margin: 0; padding: .35rem 0; }
/* item: chrome hérité de .tree-cat (UI-TREE point 14) ; enfants .pt-* locaux */
#pri-tree .pri-tree-cat.active .pt-label { color: var(--p-base); font-weight: 500; }
#pri-tree .pt-icon { color: var(--p-base); opacity: .75; flex-shrink: 0; display: inline-flex; align-items: center; }
#pri-tree .pri-tree-cat:hover .pt-icon { opacity: .95; }
#pri-tree .pri-tree-cat.active .pt-icon { opacity: 1; }
#pri-tree .pt-label { color: var(--p-light); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pri-tree .pt-badges { display: flex; gap: .2rem; align-items: center; flex-shrink: 0; }
#pri-tree .pt-b {
  font-size: .58rem; font-weight: 700;
  padding: .05rem .32rem; border-radius: 3px; border: 1px solid;
  min-width: 18px; text-align: center; line-height: 1.2;
  font-family: 'Menlo','Consolas',monospace;
}
#pri-tree .pt-b.p0 { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
#pri-tree .pt-b.p1 { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .12); }
#pri-tree .pt-b.disabled { color: #64748b; border-color: #64748b; }
#pri-tree .pt-count { color: #64748b; font-size: .68rem; font-family: 'Menlo','Consolas',monospace; }

#pri-main { display: flex; flex-direction: column; background: transparent; position: relative; overflow: hidden; min-height: 0; }

#pri-list { flex: 1; overflow-y: auto; padding: .8rem .9rem; display: flex; flex-direction: column; gap: .4rem; }
.principles-empty { color: #64748b; font-style: italic; padding: 1rem; text-align: center; }

/* ===== Card principe — chrome .card-pri (ref design Vincent 2026-04-29)
   Couleur par PRIORITÉ : P0 rouge, P1 orange, P2 --p-base, P3 turquoise. ===== */
/* UI-CARDPRI: chrome herite de .card-pri, on ne garde que le layout local */
.pri-card {
  overflow: hidden;
  flex-shrink: 0;
  padding: 0;
}
.pri-card.p0 { --card-rgb: var(--c-state-alarm-rgb); }
.pri-card.p1 { --card-rgb: var(--c-state-alert-rgb); }
.pri-card.p2 { --card-rgb: var(--p-base-rgb);        }
.pri-card.p3 { --card-rgb: var(--v3-rgb);            }
.pri-card.disabled  { opacity: .5; border-left-style: dashed; }
.pri-card.inviolable { box-shadow: 0 0 12px rgba(var(--card-rgb), .25); } /* halo si inviolable, couleur de la prio */

.pri-card { display: block; }
.pri-card .pc-head {
  display: flex !important;
  align-items: center !important;
  gap: .45rem;
  padding: .5rem .7rem;
  cursor: pointer;
  list-style: none;
  user-select: none;
  /* min-height retire : la hauteur repliee vient desormais du socle
     (--row-collapsed-h). Laissee ici, cette valeur locale l'emportait. */
  font-size: .85rem;
  color: #e4e4e7;
}

.pri-card .pc-head > * { flex-shrink: 0; }
.pri-card .pc-head > .pc-title {
  flex: 1 1 auto !important;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #e4e4e7 !important;
  font-size: .88rem !important;
  font-weight: 500;
}

.pri-card .pc-prio {
  font-size: .58rem; padding: .08rem .35rem; border-radius: 3px; border: 1px solid;
  font-family: 'Menlo','Consolas',monospace; font-weight: 700; letter-spacing: .04em;
}
.pri-card.p0 .pc-prio { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .12); }
.pri-card.p1 .pc-prio { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .12); }
.pri-card.p2 .pc-prio { color: var(--p-base); border-color: var(--p-base); background: rgba(var(--p-base-rgb), .12); }
.pri-card.p3 .pc-prio { color: var(--v3); border-color: var(--v3); background: rgba(var(--v3-rgb), .12); }

.pri-card .pc-section {
  font-size: .58rem; padding: .08rem .35rem; border-radius: 3px;
  color: var(--p-light); border: 1px solid rgba(var(--p-light-rgb), .35);
  font-family: 'Menlo','Consolas',monospace; text-transform: uppercase; letter-spacing: .04em;
}
.pri-card .pc-scope {
  font-size: .58rem; padding: .08rem .35rem; border-radius: 3px;
  color: #94a3b8; border: 1px solid rgba(255, 255, 255, .08);
  font-family: 'Menlo','Consolas',monospace;
}
.pri-card .pc-source {
  font-size: .56rem; padding: .05rem .3rem; border-radius: 3px;
  color: #64748b; font-family: 'Menlo','Consolas',monospace;
}
.pri-card .pc-source.learned_from_incident { color: #fb923c; }
.pri-card .pc-source.claude_proposed { color: var(--p-base); }
.pri-card .pc-title {
  color: #e4e4e7; font-size: .88rem; font-weight: 500;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  min-width: 0;
}
.pri-card .pc-lock { color: var(--v2); font-size: .9rem; opacity: .6; }
.pri-card .pc-actions { display: flex; gap: .2rem; align-items: center; }
/* up/down/toggle/edit → standard global .icon-action-btn (boutons icône carte) */
.pri-card .pc-actions .icon-action-btn { width: 24px; height: 24px; }

.pri-card .pc-body {
  padding: .55rem .85rem .75rem 1.7rem;
  border-top: 1px dashed rgba(255, 255, 255, .07);
  color: #d4d4d8;
  font-size: .84rem;
  line-height: 1.55;
  white-space: pre-wrap;
}
.pri-card .pc-meta {
  margin-top: .55rem;
  font-size: .72rem;
  color: #94a3b8;
  font-family: 'Menlo','Consolas',monospace;
  display: flex; gap: 1rem; flex-wrap: wrap;
}
.pri-card .pc-examples {
  margin-top: .55rem;
  display: grid; grid-template-columns: 1fr 1fr; gap: .5rem;
}
.pri-card .pc-ex-block {
  padding: .4rem .55rem;
  border-radius: 4px;
  font-size: .76rem;
}
.pri-card .pc-ex-block.good { background: rgba(var(--v4-rgb), .06); border-left: 2px solid var(--v4); color: #d1fae5; }
.pri-card .pc-ex-block.bad  { background: rgba(var(--v2-rgb), .06); border-left: 2px solid var(--v2); color: #fecaca; }
.pri-card .pc-ex-h { font-size: .65rem; text-transform: uppercase; letter-spacing: .05em; opacity: .8; margin-bottom: .25rem; }
.pri-card .pc-ex-block ul { margin: 0; padding-left: 1.1rem; }

/* Modal "Analyser" : résultat structuré */
#pri-analyze-content h3 { margin: .8rem 0 .35rem; color: var(--p-light); font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; }
#pri-analyze-content ul { margin: .15rem 0; padding-left: 1.4rem; }
#pri-analyze-content li { margin: .15rem 0; }
#pri-analyze-content .ana-score {
  display: inline-block; padding: .35rem .8rem; border-radius: 5px; font-weight: 700;
  font-size: 1.4rem; border: 2px solid; font-family: 'Menlo','Consolas',monospace;
}
#pri-analyze-content .ana-score.s-good   { color: var(--v4); border-color: var(--v4); background: rgba(var(--v4-rgb), .1); }
#pri-analyze-content .ana-score.s-medium { color: #fb923c; border-color: #fb923c; background: rgba(251, 146, 60, .1); }
#pri-analyze-content .ana-score.s-bad    { color: var(--v2); border-color: var(--v2); background: rgba(var(--v2-rgb), .1); }
#pri-analyze-content .ana-summary { color: #d4d4d8; font-size: .9rem; line-height: 1.55; padding: .55rem .75rem; background: rgba(0, 0, 0, .15); border-left: 3px solid var(--p-base); border-radius: 0 4px 4px 0; margin-top: .5rem; }

/* ============================================================================
   STANDARD TOOLBAR — uniforme reference Biometrie sante (Vincent 2026-05-10)
   Principle DB #102 — zone figee + controls coherents inter-tabs et inter-VMs.
   ============================================================================ */
.principles-toolbar {
  min-height: 3.15rem !important;
  box-sizing: border-box !important;
}
.principles-toolbar input[type="search"],
.principles-toolbar input[type="text"],
.principles-toolbar input[type="date"],
.principles-toolbar input[type="number"],
.principles-toolbar select,
.principles-toolbar button.t-btn {
  background: rgba(39, 39, 42, .45);
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, .08);
  border-radius: 6px;
  padding: .22rem .55rem;
  font-size: .82rem;
  font-family: 'Menlo','Consolas',monospace;
  height: 28px;
  box-sizing: border-box;
  line-height: 1.2;
}
.principles-toolbar button.t-btn:hover:not(:disabled) {
  background: rgba(var(--p-base-rgb), .18);
  color: var(--p-base);
  border-color: rgba(var(--p-base-rgb), .35);
}
.principles-toolbar label {
  font-size: .82rem;
  color: #d4d4d8;
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  line-height: 1.2;
}

/* ---------------------------------------------------------------------------
   E48 — passe mobile. Ce fichier n'en avait aucune.
   `.pc-head` aligne huit elements sur une ligne, tous en flex-shrink:0 sauf le titre :
   celui-ci absorbait donc seul toute la reduction de largeur et disparaissait derriere
   l'ellipse. Sous 768 px il passe en derniere position et occupe une ligne entiere,
   ou il peut s'enrouler. Pendant mobile d'E47 : le `title` au survol ne sert a rien
   sur un ecran tactile.
   --------------------------------------------------------------------------- */
@media (max-width: 768px) {
  .pri-card .pc-head {
    flex-wrap: wrap;
    row-gap: .25rem;
    padding: .45rem .55rem;
  }
  /* `order` eleve : le titre est rejete apres les actions, donc sur la ligne suivante.
     `flex-basis: 100%` lui donne cette ligne pour lui seul. */
  .pri-card .pc-head > .pc-title {
    order: 9;
    flex: 1 1 100% !important;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.25;
  }
  .pri-card .pc-actions { margin-left: auto; }
  .pri-card .pc-section,
  .pri-card .pc-scope,
  .pri-card .pc-source { font-size: .68rem; }
}