/* Scrollbar */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted2); }

    .container{ max-width:1400px; }
    h1{ font-size:2.2em; font-weight:900; letter-spacing:.2px; }

    .controls{
      background:var(--panel);
      border-radius:var(--radius2);
      padding:16px;
      display:flex;
      flex-direction:column;
      gap:12px;
      box-shadow:var(--shadow);
      margin-bottom:18px;
    }
    .controls-top{
      display:flex;
      flex-wrap:wrap;
      gap:12px;
      align-items:flex-end;
      justify-content:space-between;
    }
    .controls-left{ display:flex; gap:12px; flex-wrap:wrap; align-items:flex-end; flex:1 1 auto; min-width:260px; }
    .form-group{ display:flex; flex-direction:column; gap:6px; min-width:260px; }
    label{ font-weight:700; color:var(--muted); font-size:12px; }
    select, input[type="text"]{
      width:100%;
      padding:10px;
      border:2px solid var(--line);
      border-radius:5px;
      background:var(--panel2);
      color:var(--text);
      font-size:13px;
      outline:none;
    }
    select:focus, input[type="text"]:focus{ border-color:var(--accent); }

    .searchRow{
      display:flex;
      gap:10px;
      align-items:flex-end;
      flex:1 1 auto;
      min-width:260px;
      flex-wrap:wrap;
    }
    .mode-list .searchRow{
      display:none;
    }
    .searchRow .form-group{ min-width:0; flex:1 1 20px; }

    .toggleBox{
      display:flex;
      gap:10px;
      align-items:center;
      padding:10px 10px;
      border:2px solid var(--line);
      border-radius:8px;
      background:rgba(0,0,0,0.12);
      height:40px;
      user-select:none;
      white-space:nowrap;
    }
    .toggleBox input{ transform: translateY(1px); }
    .toggleBox span{ font-size:12px; color:var(--muted); font-weight:900; letter-spacing:.4px; text-transform:uppercase; }

    .stats-pills{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; justify-content:flex-end; flex:0 0 auto; }
    .pill{
      padding:6px 10px;
      background:rgba(196,30,58,0.15);
      border:1px solid var(--accent);
      border-radius:20px;
      font-size:11px;
      color:var(--accent);
      letter-spacing:.6px;
      text-transform:uppercase;
      user-select:none;
    }
    .pill b{ color:var(--text); }

    .layout{ display:grid; grid-template-columns:460px 1fr; gap:18px; align-items:start; }
    .layout.compact{ grid-template-columns:60px 1fr; }
    .layout.compact .panel--list .panel-bd,
    .layout.compact .panel--list .panel-hd h2,
    .layout.compact .panel--list .panel-hd .hint{
      display:none;
    }
    .layout.compact .panel--list{
      overflow:visible;
    }
    .layout.compact .panel--list .panel-hd{
      justify-content:center;
    }
    .layout.compact .panel--list .collapseBtn{
      transform:rotate(180deg);
    }
    .panel{ background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); overflow:hidden; }
    .panel-hd{
      padding:14px 16px;
      border-bottom:1px solid var(--line);
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .panel-hd h2{
      font-size:12px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:1px;
      margin:0;
      font-weight:900;
    }
    .panel-hd .hint{
      font-size:11px;
      color:var(--muted2);
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:70%;
      text-align:right;
    }
    .collapseBtn{
      border:1px solid var(--line);
      background:rgba(0,0,0,0.12);
      color:var(--muted);
      padding:6px 8px;
      border-radius:8px;
      font-size:12px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.6px;
      cursor:pointer;
    }
    .collapseBtn:hover{ border-color:var(--accent); color:var(--accent); }
    .panel-bd{ padding:14px 16px 16px 16px; }

    .acc{
      max-height:calc(100vh - 410px);
      overflow:auto;
      padding-right:6px;
      display:flex;
      flex-direction:column;
      gap:12px;
    }

    details.roleGroup{
      border:2px solid var(--line);
      background:rgba(255,255,255,0.02);
      border-radius:12px;
      overflow:hidden;
    }
    details.roleGroup summary{
      list-style:none;
      cursor:pointer;
      padding:10px 12px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      user-select:none;
      background:rgba(0,0,0,0.12);
      border-bottom:1px solid var(--line);
    }
    details.roleGroup summary::-webkit-details-marker{ display:none; }
    .mode-list details.roleGroup summary{
      pointer-events:none;
      cursor:default;
    }
    .roleLeft{ display:flex; gap:10px; align-items:center; min-width:0; }
    .chev{
      width:24px; height:24px;
      border-radius:6px;
      border:1px solid var(--line);
      display:flex; align-items:center; justify-content:center;
      color:var(--muted2);
      font-family:var(--mono);
      font-size:12px;
      flex:0 0 auto;
      transition:.15s ease;
      transform:rotate(0deg);
    }
    details[open] .chev{ border-color:var(--accent); color:var(--accent); transform:rotate(90deg); }
    .roleName{ font-weight:900; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .roleCount{ color:var(--muted2); font-size:12px; }

    .dslist{ padding:10px 10px 12px 10px; display:flex; flex-direction:column; gap:10px; }
    details.roleGroup[open] .dslist{ max-height:45vh; overflow:auto; padding-right:6px; }

    .roleGroup--static{
      border:2px solid var(--line);
      border-radius:12px;
      background:rgba(0,0,0,0.12);
      margin-bottom:12px;
    }

    .roleGroup--static .roleGroupHeader{
      padding:10px 12px;
      border-bottom:1px solid var(--line);
      background:rgba(0,0,0,0.12);
    }

    .roleGroup--static .dslist{
      max-height:none;
      overflow:visible;
      padding-right:10px;
    }

    .dsrow{
      border:2px solid var(--line);
      background:rgba(0,0,0,0.10);
      border-radius:10px;
      padding:10px;
      cursor:pointer;
      transition:.15s ease;
      display:flex;
      flex-direction:column;
      gap:6px;
    }
    .dsrow:hover{ border-color:var(--accent); box-shadow:0 10px 30px rgba(196,30,58,0.18); transform:translateY(-1px); }
    .dsrow.active{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(196,30,58,0.18) inset; }
    .dsrow .t{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
    .dsrow .name{ font-weight:900; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .dsrow .role{ font-size:12px; color:var(--muted2); }
    .compareCheck{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:6px 8px;
      border:1px solid var(--line);
      border-radius:8px;
      background:rgba(0,0,0,0.18);
      font-size:11px;
      color:var(--muted);
      width:max-content;
    }
    .compareCheck input{ transform: translateY(1px); }
    .compareCheck span{ font-weight:800; text-transform:uppercase; letter-spacing:.4px; }
    .mode-list .compareCheck{ display:none; }

    .empty{
      color:var(--muted2);
      padding:14px;
      border:2px dashed var(--line);
      border-radius:10px;
      background:rgba(0,0,0,0.08);
      font-size:13px;
    }

    .cardTitle{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap; }
    .cardTitle h3{ margin:0; font-size:22px; font-weight:900; letter-spacing:.2px; }
    .sub{ margin-top:8px; display:flex; gap:8px; flex-wrap:wrap; align-items:center; color:var(--muted2); font-size:12px; }

    .tag{
      padding:4px 10px;
      border-radius:20px;
      background:rgba(255,255,255,0.05);
      border:1px solid var(--line);
      color:var(--muted);
      font-size:11px;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .tag.fk{
      border-color: rgba(46,139,87,0.55);
      color: rgba(46,139,87,0.95);
      background: rgba(46,139,87,0.10);
    }
    .tag.link{
      border-color:rgba(196,30,58,0.65);
      color:rgba(196,30,58,0.95);
      background:rgba(196,30,58,0.10);
      cursor:pointer;
      text-decoration:none;
    }
    .tag.link:hover{ border-color:var(--accent); }

    .wg-desc{
      display:inline-block;
      padding:3px 10px;
      border-radius:10px;
      background:rgba(255,255,255,0.08);
      color:var(--muted);
      font-size:11px;
      font-style:italic;
      white-space:normal;
      line-height:1.4;
    }

    .toolbar{ display:flex; gap:10px; margin-top:12px; flex-wrap:wrap; }
    .btn{
      padding:10px 12px;
      background:var(--accent);
      color:#fff;
      border:none;
      border-radius:5px;
      font-size:12px;
      cursor:pointer;
      transition:background .2s;
      text-transform:uppercase;
      letter-spacing:.8px;
      font-weight:900;
    }
    .btn:hover{ background:var(--accent2); }
    .btn.secondary{ background:var(--panel2); }
    .btn.secondary:hover{ background:var(--line); }

    .tabs{ margin-top:14px; padding-top:12px; border-top:1px solid var(--line); display:flex; gap:10px; flex-wrap:wrap; }
    .tab{
      cursor:pointer;
      padding:7px 12px;
      border-radius:20px;
      border:1px solid var(--line);
      background:rgba(255,255,255,0.03);
      color:var(--muted);
      font-size:11px;
      text-transform:uppercase;
      letter-spacing:.8px;
      font-weight:900;
      user-select:none;
      transition:.15s ease;
    }
    .tab:hover{ border-color:var(--accent); color:var(--accent); }
    .tab.active{ border-color:var(--accent); background:rgba(196,30,58,0.15); color:var(--accent); }

    .section{ margin-top:16px; padding-top:16px; border-top:1px solid var(--line); }
    .section h4{
      margin:0 0 10px 0;
      font-size:11px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:1px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
    }
    .section .hint{ color:var(--muted2); font-size:11px; text-transform:none; letter-spacing:0; font-weight:normal; }

    .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
    .kv{
      border:2px solid var(--line);
      background:rgba(0,0,0,0.10);
      border-radius:10px;
      padding:10px;
      min-width:0;
    }
    .kv .k{ font-size:11px; color:var(--muted); text-transform:uppercase; letter-spacing:1px; font-weight:900; margin-bottom:6px; }
    .kv .v{ font-size:13px; color:var(--text); white-space:pre-wrap; overflow-wrap:anywhere; line-height:1.45; }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      border-radius:10px;
      overflow:hidden;
      border:2px solid var(--line);
      background:rgba(0,0,0,0.08);
    }
    th, td{ padding:9px 10px; border-bottom:1px solid var(--line); font-size:13px; vertical-align:top; }
    th{
      text-align:left;
      font-size:11px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:1px;
      background:rgba(0,0,0,0.12);
      position:sticky;
      top:0;
      z-index:1;
    }
    tr:last-child td{ border-bottom:none; }

    .compareFeedback{
      width:100%;
      margin-top:10px;
      padding:8px 10px;
      border-radius:8px;
      border:1px solid rgba(196,30,58,0.5);
      background:rgba(196,30,58,0.12);
      color:var(--accent);
      font-size:12px;
      font-weight:800;
      display:none;
    }
    .compareViewTitle{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:12px;
      margin-bottom:12px;
    }
    .compareViewTitle h3{
      font-size:18px;
      margin:0;
      font-weight:900;
    }
    .compareBadge{
      padding:4px 10px;
      border-radius:20px;
      background:rgba(196,30,58,0.15);
      border:1px solid var(--accent);
      color:var(--accent);
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.6px;
    }

    .rich{ line-height:1.5; }
    .rich p{ margin:6px 0; }
    .rich strong, .rich b{ color:var(--text); font-weight:900; }
    .rich em, .rich i{ color:var(--muted); }
    .rich ul, .rich ol{ margin:8px 0 8px 18px; padding:0; display:flex; flex-direction:column; gap:6px; }
    .rich li{ margin:0; }
    .rich a{ color:var(--accent); text-decoration:none; border-bottom:1px dashed rgba(196,30,58,0.6); }
    .rich a:hover{ border-bottom-style:solid; }
    .abilityName{ font-weight:900; color:var(--text); white-space:nowrap; }

    .sourcesBox{ padding:10px 10px 12px 10px; display:flex; flex-direction:column; gap:10px; }
    .sourcesActions{ display:flex; gap:8px; flex-wrap:wrap; }
    .miniBtn{
      padding:7px 10px;
      border-radius:8px;
      border:1px solid var(--line);
      background:rgba(255,255,255,0.04);
      color:var(--muted);
      cursor:pointer;
      font-size:11px;
      font-weight:900;
      text-transform:uppercase;
      letter-spacing:.6px;
    }
    .miniBtn:hover{ border-color:var(--accent); color:var(--accent); }

    .sourcesList{ display:flex; flex-wrap:wrap; gap:10px; }
    .sourceItem{
      display:flex;
      align-items:center;
      gap:8px;
      padding:8px 10px;
      border:2px solid var(--line);
      border-radius:10px;
      background:rgba(0,0,0,0.10);
      user-select:none;
      max-width:100%;
    }
    .sourceItem input{ transform: translateY(1px); }
    .sourceItem span{
      font-size:12px;
      color:var(--text);
      font-weight:800;
      max-width:100%;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }

    .presetBox{
      border:2px solid var(--line);
      border-radius:12px;
      padding:5px;
      background:rgba(0,0,0,0.10);
      display:flex;
      flex-wrap:nowrap;
      align-items:center;
      gap:12px;
    }
    .presetTitle{
      font-size:11px;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:1px;
      font-weight:900;
      padding:6px 10px;
      border-radius:20px;
      border:1px solid var(--line);
      background:rgba(0,0,0,0.2);
    }
    .presetHint{
      font-size:11px;
      color:var(--muted2);
      margin-left:auto;
      text-align:right;
      white-space:nowrap;
    }
    .presetActions{ display:flex; gap:8px; flex-wrap:wrap; }

    /* Mode Liste / Presets toggle */
    .presetModeToggle{
      display:flex;
      gap:4px;
      flex-shrink:0;
    }
    .presetModeToggle .miniBtn.active{
      border-color:var(--accent);
      color:var(--accent);
      background:rgba(196,30,58,0.15);
    }
    .presetModeToggle .miniBtn:disabled{
      cursor:default;
      opacity:0.7;
    }
    .listeActions{
      display:flex;
      gap:8px;
      flex-wrap:wrap;
      align-items:center;
    }
    .listeHint{
      font-size:11px;
      color:var(--muted2);
      margin-left:auto;
      text-align:right;
      white-space:nowrap;
      overflow:hidden;
      text-overflow:ellipsis;
      max-width:50%;
    }
    .listeHint.is-clickable{
      cursor:pointer;
      text-decoration:underline;
      text-decoration-style:dotted;
    }
    .listeHint.is-clickable:hover{
      color:var(--muted);
    }

    @media (max-width:1100px){
      .layout{ grid-template-columns:1fr; }
      .acc{ max-height:42vh; }
      .grid2{ grid-template-columns:1fr; }
      details.roleGroup[open] .dslist{ max-height:35vh; }
      .searchRow{ flex-direction:column; align-items:stretch; }
      .toggleBox{ height:auto; }
      .sourceItem span{ max-width: 100%; white-space:normal; }
    }
  

        /* Wrapper pour pousser le footer en bas */
        .page{ padding: 20px; }

body.pairing-dv .presetBox,
body.pairing-dv .searchRow,
body.pairing-dv #btnImportRos,
body.pairing-dv #btnListeSave,
body.pairing-dv #btnListeLoad,
body.pairing-dv #btnListeClear {
  display: none !important;
}

body.pairing-dv details.roleGroup[open] .dslist {
  max-height: none !important;
  overflow: visible !important;
  padding-right: 0 !important;
}

body.pairing-dv .acc {
  max-height: none !important;
  overflow: visible !important;
}