/* Style commun : page Référentiel et page Contrôle */
:root {
  --bg:#f3f5fb; --fg:#1a2233; --muted:#667085; --card:#fff; --line:#e4e8f0; --line2:#cdd5e3;
  --accent:#3b5bdb; --accent2:#2f49b5; --accentbg:#edf1ff;
  --ok:#0f7a55; --okbg:#e5f6ee; --err:#c22d2d; --errbg:#fdecec; --warn:#9a5a00; --warnbg:#fff3dc;
  --shadow:0 1px 2px rgba(16,24,40,.05), 0 8px 24px rgba(16,24,40,.06); --radius:14px;
}
@media (prefers-color-scheme: dark) {
  :root { --bg:#10131a; --fg:#e8ebf2; --muted:#9aa4b5; --card:#1a1f29; --line:#2b3240; --line2:#3a4354;
    --accent:#7c9cff; --accent2:#a4b8ff; --accentbg:#1d2640; --ok:#5fd6a2; --okbg:#143026; --err:#ff8f8f; --errbg:#3a1d1d;
    --warn:#f3b95f; --warnbg:#3a2d14; --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); }
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--bg); color:var(--fg); font:15px/1.55 system-ui, -apple-system, "Segoe UI", sans-serif; }
a { color:var(--accent); text-decoration:none; } a:hover { text-decoration:underline; }
h1 { font-size:24px; margin:0 0 4px; letter-spacing:-.01em; } h2 { font-size:17px; margin:0; } h3 { font-size:14px; margin:0 0 6px; }
p { margin:0 0 8px; } .muted { color:var(--muted); font-size:13px; } .hidden { display:none !important; }

/* Barre de navigation */
.nav { position:sticky; top:0; z-index:20; background:var(--card); border-bottom:1px solid var(--line); box-shadow:0 1px 0 rgba(16,24,40,.03); }
.nav-in { max-width:1000px; margin:0 auto; padding:0 20px; height:56px; display:flex; align-items:center; gap:24px; }
.brand { font-weight:700; font-size:16px; color:var(--fg); display:flex; align-items:center; gap:8px; } .brand:hover { text-decoration:none; }
.brand .logo { width:28px; height:28px; border-radius:8px; background:linear-gradient(135deg,var(--accent),#6d8bff); color:#fff; display:grid; place-items:center; font-size:15px; }
.tabs { display:flex; gap:4px; margin-left:auto; }
.tabs a { padding:8px 14px; border-radius:10px; color:var(--muted); font-weight:600; }
.tabs a:hover { background:var(--accentbg); color:var(--accent); text-decoration:none; }
.tabs a.on { background:var(--accentbg); color:var(--accent); }

/* Mise en page */
main { max-width:1000px; margin:0 auto; padding:28px 20px 80px; }
.page-head { margin-bottom:22px; } .page-head p { color:var(--muted); }
.card { background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:20px; margin-bottom:18px; box-shadow:var(--shadow); }
.card.locked { opacity:.55; pointer-events:none; }
.card-head { display:flex; align-items:flex-start; gap:12px; margin-bottom:14px; }
.card-head .sub { color:var(--muted); font-size:13.5px; margin-top:2px; }
.num { flex:none; width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:grid; place-items:center; font-weight:700; font-size:14px; }
.grid { display:grid; gap:16px; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); }
.field { display:flex; flex-direction:column; gap:5px; } .field > span.lbl { font-weight:600; font-size:13px; }
.actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:14px; } .spacer { flex:1; }

/* Champs et boutons */
input[type=text], input[type=password], select {
  width:100%; font:inherit; color:var(--fg); background:var(--card); padding:10px 12px; border:1px solid var(--line2); border-radius:10px;
  transition:border-color .15s, box-shadow .15s; }
input:focus, select:focus { outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accentbg); }
input::placeholder { color:var(--muted); opacity:.8; }
.btn { font:inherit; font-weight:600; padding:10px 18px; border-radius:10px; border:1px solid transparent; cursor:pointer; background:var(--accent); color:#fff;
  display:inline-flex; align-items:center; gap:8px; transition:background .15s, transform .05s, box-shadow .15s; }
.btn:hover { background:var(--accent2); } .btn:active { transform:translateY(1px); }
.btn.sec { background:var(--card); color:var(--fg); border-color:var(--line2); } .btn.sec:hover { background:var(--accentbg); border-color:var(--accent); }
.btn.ghost { background:transparent; color:var(--muted); border-color:transparent; padding:8px 10px; } .btn.ghost:hover { background:var(--accentbg); color:var(--accent); }
.btn.danger { background:var(--card); color:var(--err); border-color:var(--line2); } .btn.danger:hover { background:var(--errbg); border-color:var(--err); }
.btn.sm { padding:6px 10px; font-size:13px; border-radius:8px; } .btn.big { padding:13px 26px; font-size:16px; }
.btn:disabled { opacity:.45; cursor:not-allowed; transform:none; }
.btn:focus-visible { outline:3px solid var(--accentbg); outline-offset:1px; }

/* Étiquettes et bandeaux */
.chip { display:inline-flex; align-items:center; gap:6px; padding:3px 10px; border-radius:999px; font-size:12.5px; font-weight:600; background:var(--accentbg); color:var(--accent); border:1px solid transparent; }
.chip.ok { background:var(--okbg); color:var(--ok); } .chip.ko { background:var(--errbg); color:var(--err); } .chip.warn { background:var(--warnbg); color:var(--warn); }
.chip.neutre { background:transparent; color:var(--muted); border-color:var(--line2); }
button.chip { cursor:pointer; font:inherit; font-size:13px; font-weight:600; } button.chip.on { background:var(--accent); color:#fff; }
.banner { display:flex; gap:10px; padding:12px 14px; border-radius:12px; background:var(--accentbg); color:var(--fg); font-size:14px; margin-bottom:14px; }
.banner.warn { background:var(--warnbg); } .banner.ok { background:var(--okbg); } .banner.ko { background:var(--errbg); }
.dot { width:8px; height:8px; border-radius:50%; background:var(--warn); display:inline-block; }

/* Tableaux */
.table-wrap { overflow-x:auto; border:1px solid var(--line); border-radius:12px; }
table { width:100%; border-collapse:collapse; font-size:14px; }
th { text-align:left; padding:10px 12px; background:color-mix(in srgb, var(--accentbg) 55%, var(--card)); color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.04em; }
td { padding:8px 12px; border-top:1px solid var(--line); vertical-align:middle; } tbody tr:hover td { background:color-mix(in srgb, var(--accentbg) 35%, transparent); }
td input, td select { padding:7px 10px; } td.fit { width:1%; white-space:nowrap; }
.empty { padding:26px; text-align:center; color:var(--muted); }

/* Zone de dépôt */
.drop { border:2px dashed var(--line2); border-radius:14px; padding:26px 18px; text-align:center; background:color-mix(in srgb, var(--accentbg) 35%, var(--card)); cursor:pointer; transition:all .15s; }
.drop:hover, .drop.over { border-color:var(--accent); background:var(--accentbg); }
.drop .big-ico { font-size:30px; line-height:1; } .drop b { display:block; margin-top:6px; } .drop small { color:var(--muted); }

/* Arbre de hiérarchie */
.tree, .tree ul { list-style:none; margin:0; padding-left:0; } .tree ul { margin-left:11px; padding-left:14px; border-left:1px dashed var(--line2); }
.node { display:flex; align-items:center; gap:8px; padding:4px 8px; border-radius:8px; }
.node:hover { background:var(--accentbg); }
.caret { width:22px; height:22px; flex:none; border:0; background:transparent; border-radius:6px; cursor:pointer; color:var(--muted); font-size:12px; transition:transform .12s; }
.caret:hover { background:var(--line); } .caret.open { transform:rotate(90deg); } .caret.vide { visibility:hidden; }
.node .nom { font-weight:600; } .node .alias { color:var(--muted); font-size:13px; } .node .feuille { color:var(--ok); font-size:12px; }
.arbre-zone { max-height:460px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:12px; }
mark { background:var(--warnbg); color:inherit; border-radius:3px; }

/* Compteurs et résultats */
.counters { display:grid; grid-template-columns:repeat(3, 1fr); gap:12px; margin:16px 0; }
.counter { text-align:center; padding:14px 8px; border:1px solid var(--line); border-radius:12px; background:var(--card); }
.counter b { display:block; font-size:28px; line-height:1.1; } .counter span { color:var(--muted); font-size:13px; }
.verdict { display:flex; align-items:center; gap:12px; padding:16px 18px; border-radius:14px; font-weight:700; font-size:17px; }
.verdict.ok { background:var(--okbg); color:var(--ok); } .verdict.bloque { background:var(--errbg); color:var(--err); }
.fichiers-choisis { display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }

/* Notifications */
.toasts { position:fixed; right:18px; bottom:18px; display:flex; flex-direction:column; gap:10px; z-index:50; max-width:min(420px, calc(100vw - 36px)); }
.toast { display:flex; gap:10px; padding:12px 14px; border-radius:12px; background:var(--card); border:1px solid var(--line); box-shadow:var(--shadow); font-size:14px;
  animation:entrer .2s ease-out; border-left:4px solid var(--accent); white-space:pre-wrap; }
.toast.ok { border-left-color:var(--ok); } .toast.ko { border-left-color:var(--err); } .toast.warn { border-left-color:var(--warn); }
@keyframes entrer { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }

@media (max-width:640px) { .nav-in { gap:12px; } .brand span.t { display:none; } .counters { grid-template-columns:1fr; } }