/* components-catalog v1.4.0-c — composant Vanilla. Namespace .cc-* isolé. Dark mode + mobile responsive. */
.cc-root{font-family:inherit;color:var(--text-1,#1a1a1a);}
.cc-toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px;}
.cc-search{flex:1;min-width:200px;padding:9px 12px;border:1px solid var(--border,#ececec);border-radius:8px;background:var(--surface,#fff);color:var(--text-1,#1a1a1a);font-size:13px;font-family:inherit;}
.cc-search:focus{outline:none;border-color:#16a34a;}
.cc-chips{display:flex;flex-wrap:wrap;gap:6px;}
.cc-chip{padding:7px 12px;border:1px solid var(--border,#ececec);background:var(--surface,#fff);color:var(--text-2,#666);border-radius:999px;font-size:12px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s;}
.cc-chip:hover{background:var(--surface2,#f5f5f0);}
.cc-chip.active{background:#1a2332;color:#fff;border-color:#1a2332;}
.cc-chip.crit.active{background:#dc2626;border-color:#dc2626;}
.cc-counter{font-size:12px;color:var(--text-3,#888);margin-bottom:10px;}
.cc-empty{padding:40px 16px;text-align:center;color:var(--text-3,#888);font-size:13px;}
.cc-loading{padding:40px 16px;text-align:center;color:var(--text-3,#888);font-size:13px;}
.cc-systems{display:flex;flex-direction:column;gap:8px;}
.cc-system{border:1px solid var(--border,#ececec);border-radius:10px;background:var(--surface,#fff);overflow:hidden;}
.cc-sys-head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;cursor:pointer;user-select:none;}
.cc-sys-head:hover{background:var(--surface2,#f5f5f0);}
.cc-sys-title{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14px;color:var(--text-1,#1a1a1a);}
.cc-sys-icon{font-size:18px;}
.cc-sys-count{font-size:11px;color:var(--text-3,#888);font-weight:600;background:var(--surface2,#f5f5f0);padding:2px 8px;border-radius:999px;}
.cc-chevron{font-size:14px;color:var(--text-3,#888);transition:transform .2s;}
.cc-system.open .cc-chevron{transform:rotate(90deg);}
.cc-sys-body{display:none;border-top:1px solid var(--border,#ececec);}
.cc-system.open .cc-sys-body{display:block;}
.cc-comp{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px;border-bottom:1px solid var(--border-soft,#f3f3f3);cursor:pointer;}
.cc-comp:last-child{border-bottom:none;}
.cc-comp:hover{background:var(--surface2,#f5f5f0);}
.cc-comp-info{flex:1;min-width:0;}
.cc-comp-name{font-size:13px;font-weight:600;color:var(--text-1,#1a1a1a);margin:0 0 3px 0;}
.cc-comp-meta{font-size:11px;color:var(--text-3,#888);}
.cc-badges{display:flex;gap:4px;flex-wrap:wrap;align-items:center;}
.cc-badge{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:700;text-transform:uppercase;letter-spacing:.3px;}
.cc-badge.critique{background:#fee2e2;color:#dc2626;}
.cc-badge.majeur{background:#fed7aa;color:#c2410c;}
.cc-badge.mineur{background:#fef3c7;color:#a16207;}
.cc-badge.esthetique{background:#e0e7ff;color:#3730a3;}
.cc-badge.safety{background:#1a2332;color:#fbbf24;}
.cc-badge.ve_only{background:#dcfce7;color:#15803d;}
.cc-badge.thermique{background:#f5f5f0;color:#666;}
.cc-badge.universel{background:#dbeafe;color:#1e40af;}
.cc-status{font-size:10px;padding:2px 7px;border-radius:4px;font-weight:700;}
.cc-status.excellent{background:#dcfce7;color:#15803d;}
.cc-status.bon{background:#dbeafe;color:#1e40af;}
.cc-status.attention{background:#fed7aa;color:#c2410c;}
.cc-status.critique{background:#fee2e2;color:#dc2626;}
.cc-status.inconnu{background:var(--surface2,#f5f5f0);color:var(--text-3,#888);}
.cc-check{width:18px;height:18px;flex-shrink:0;border:2px solid var(--border,#ececec);border-radius:4px;display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;}
.cc-comp.selected .cc-check{background:#16a34a;border-color:#16a34a;}
@media (max-width:768px){
  .cc-toolbar{flex-direction:column;align-items:stretch;}
  .cc-search{width:100%;}
  .cc-chips{justify-content:flex-start;}
  .cc-comp{flex-wrap:wrap;}
  .cc-comp-name{font-size:12px;}
  .cc-sys-title{font-size:13px;}
}