:root{
  --navy:#1F2D3D; --navy-2:#2C3E52; --orange:#F28D00; --orange-soft:#FDF0DC;
  --ink:#16212C; --muted:#6B7A8A; --line:#DCE3EA; --bg:#F4F6F8; --white:#fff;
  --ok:#1E7B45; --ok-soft:#E3F4EA; --warn:#B26A00; --warn-soft:#FFF1D6; --crit:#C0362C; --crit-soft:#FBE4E2;
  --link:#1d5fa8;
}
*{box-sizing:border-box;}
html,body{overflow-x:hidden;}
body{margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif; font-size:14px; color:var(--ink); background:var(--bg);}
a{color:var(--link);}
h1{font-size:24px; margin:0 0 8px; color:var(--navy);}
h2{font-size:17px; margin:24px 0 10px; color:var(--navy);}
.muted{color:var(--muted);}
.small{font-size:12px;}
.mono{font-family:"SF Mono",Menlo,Consolas,monospace; font-size:12.5px;}

/* ---------- Bandeau ---------- */
.top{position:sticky; top:0; z-index:30; display:flex; align-items:center; justify-content:space-between; gap:16px;
  background:var(--navy); color:#fff; padding:10px 24px; box-shadow:0 2px 10px rgba(0,0,0,.12);}
.top-brand{display:flex; align-items:center; gap:12px; color:#fff; text-decoration:none; font-size:15px;}
.top-brand img{height:40px;}
.top-nav{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.top-nav a,.top-nav button{color:#dfe6ec; text-decoration:none; background:none; border:1px solid transparent; border-radius:6px;
  padding:6px 10px; font:inherit; font-size:13px; cursor:pointer;}
.top-nav a:hover,.top-nav button:hover{background:rgba(255,255,255,.08); color:#fff;}
.top-nav .cta{background:var(--orange); color:#241500; font-weight:700;}
.top-nav .cta:hover{background:#E07F00; color:#241500;}
.top-nav .user{color:#9fb0c0; font-size:12.5px; padding:0 6px;}
.top-nav .count{background:var(--orange); color:#241500; border-radius:10px; padding:0 6px; font-size:11px; font-weight:700; margin-left:4px;}

.view{max-width:1400px; margin:0 auto; padding:28px 24px 60px;}
.lead{color:#3a4a5a; line-height:1.55; max-width:900px;}

/* ---------- Accueil ---------- */
.hero{text-align:center; padding:30px 10px 10px;}
.hero h1{font-size:30px;}
.hero .lead{margin:10px auto 0;}
.espaces{display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr)); gap:20px; margin-top:34px;}
.espace-card{display:flex; flex-direction:column; gap:14px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:22px;
  text-decoration:none; color:var(--ink); box-shadow:0 8px 24px rgba(31,45,61,.06); transition:transform .15s, border-color .15s; min-height:250px;}
a.espace-card:hover{transform:translateY(-3px); border-color:var(--orange);}
.espace-logo{height:96px; display:flex; align-items:center; justify-content:center; background:#fff; border-radius:10px;}
.espace-logo img{max-height:90px; max-width:100%;}
.espace-logo.sans{font-size:40px; color:var(--orange); background:var(--orange-soft);}
.espace-titre{font-size:16px; font-weight:700; color:var(--navy); line-height:1.35;}
.espace-etat{margin-top:auto; font-size:12.5px;}
.espace-card.indispo{opacity:.75;}

/* ---------- Formulaires ---------- */
.card{background:#fff; border:1px solid var(--line); border-radius:10px;}
.form-card{max-width:460px; margin:20px auto; padding:26px;}
.field{display:flex; flex-direction:column; gap:5px; margin:0 0 14px;}
.field > span{font-weight:600; font-size:12.5px;}
.field input,.field select,.field textarea{border:1px solid var(--line); border-radius:7px; padding:9px 10px; font:inherit; background:#fff;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--orange-soft); border-color:var(--orange);}
.field small{color:var(--muted); font-size:11.5px;}
.form-error{background:var(--crit-soft); color:var(--crit); border-radius:7px; padding:9px 11px; margin:6px 0 12px; font-size:13px;}
.form-ok{background:var(--ok-soft); color:var(--ok); border-radius:7px; padding:11px 13px; margin:6px 0 12px;}
.form-links{display:flex; justify-content:space-between; gap:10px; margin-top:14px; font-size:13px;}
.piege{position:absolute; left:-9999px;}
.btn-primary,.btn-light,.btn-danger,.btn-ghost{display:inline-flex; align-items:center; gap:5px; border-radius:7px; padding:7px 13px; font:inherit; font-size:13px;
  cursor:pointer; text-decoration:none; line-height:1.3;}
.btn-primary{background:var(--orange); border:1px solid var(--orange); color:#241500; font-weight:700;}
.btn-primary:hover{background:#E07F00;}
.btn-primary:disabled{opacity:.5; cursor:not-allowed;}
.btn-light{background:#fff; border:1px solid var(--line); color:var(--ink);}
.btn-light:hover{border-color:var(--orange); background:var(--orange-soft);}
.btn-danger{background:var(--crit); border:1px solid var(--crit); color:#fff; font-weight:700;}
.btn-ghost{background:transparent; border:1px solid transparent; color:inherit;}
.btn-ghost.danger{color:var(--crit);}
.btn-ghost:hover{border-color:var(--line);}
.btn-block{width:100%; justify-content:center; padding:10px;}
.actions{display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin:14px 0;}
.droits{display:grid; grid-template-columns:1fr auto; gap:6px 12px; align-items:center; margin:4px 0 14px;}
.droits select{border:1px solid var(--line); border-radius:6px; padding:5px 7px; font:inherit; font-size:12.5px;}

/* ---------- Tableaux ---------- */
table.grid{width:100%; border-collapse:collapse; font-size:13px;}
.grid th{text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.04em; color:#241500; background:var(--orange); font-weight:700;
  padding:9px 10px; border-bottom:1px solid var(--line); position:sticky; top:60px; z-index:2;}
.grid td{padding:8px 10px; border-bottom:1px solid #EEF2F5; vertical-align:top;}
.grid tr:last-child td{border-bottom:0;}
.num{text-align:right; white-space:nowrap;}
.badge{display:inline-block; border-radius:10px; padding:1px 8px; font-size:11px; font-weight:700; white-space:nowrap;}
.badge.ok{background:var(--ok-soft); color:var(--ok);}
.badge.warn{background:var(--warn-soft); color:var(--warn);}
.badge.crit{background:var(--crit-soft); color:var(--crit);}
.badge.grey{background:#EEF1F4; color:var(--muted);}
.alerte{background:var(--warn-soft); color:#7a4a00; border-radius:8px; padding:10px 13px; margin:10px 0; font-size:13px;}

/* ---------- Espace : tableau arborescent ---------- */
.espace-head{display:flex; align-items:center; gap:18px; flex-wrap:wrap;}
.espace-head img{height:72px;}
.toolbar{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin:16px 0 12px;}
.toolbar select,.toolbar input{border:1px solid var(--line); border-radius:7px; padding:7px 9px; font:inherit; font-size:13px; background:#fff;}
.toolbar input[type=search]{min-width:260px; flex:1; max-width:420px;}
.arbre td{padding:5px 10px;}
.arbre tr.ligne{cursor:pointer;}
.arbre tr.ligne:hover td{background:#FAFBFC;}
.arbre tr.selection td{background:var(--orange-soft) !important;}
.arbre tr.niv-0 td{background:#F3F6F9; font-weight:700;}
.cell-elem{display:flex; align-items:flex-start; gap:4px; min-width:260px;}
.toggle{width:18px; flex:0 0 18px; border:0; background:none; color:var(--muted); cursor:pointer; padding:0; font-size:12px; line-height:20px;}
.elem-lib{line-height:20px;}
.arbre .niv-1 .elem-lib{font-weight:600;}
.arbre .detail{color:#3a4a5a; max-width:520px;}
.arbre .ident{font-family:"SF Mono",Menlo,Consolas,monospace; font-size:11px; color:var(--muted); white-space:nowrap;}
.btn-com{border:1px solid var(--line); background:#fff; border-radius:12px; padding:1px 8px; font-size:12px; cursor:pointer; white-space:nowrap; color:var(--muted);}
.btn-com.plein{background:var(--orange); border-color:var(--orange); color:#241500; font-weight:700;}
.btn-com:hover{border-color:var(--orange);}
mark{background:#FFE29A; padding:0 1px; border-radius:2px;}

/* ---------- Panneau des commentaires ---------- */
.drawer{position:fixed; right:0; top:0; bottom:0; z-index:40; width:min(460px, 100vw); background:#fff; border-left:1px solid var(--line);
  box-shadow:-8px 0 24px rgba(0,0,0,.12); display:flex; flex-direction:column;}
.drawer-head{display:flex; justify-content:space-between; gap:10px; padding:16px 18px; border-bottom:1px solid var(--line);}
.drawer-head h2{margin:4px 0 0; font-size:16px; word-break:break-word;}
.drawer-kicker{font-size:11.5px; color:var(--muted);}
.drawer-body{padding:14px 18px; overflow:auto; flex:1;}
.drawer[hidden]{display:none;}
body.drawer-ouvert .view{margin-right:460px; max-width:none;}
.arbre td{word-break:break-word;}
.arbre .ident{white-space:nowrap; word-break:normal;}
.nowrap{white-space:nowrap; word-break:normal !important;}
.icon-btn{border:0; background:none; font-size:18px; cursor:pointer; color:var(--muted);}
.com{border:1px solid var(--line); border-radius:9px; padding:10px 12px; margin:0 0 10px;}
.com-head{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--muted); margin-bottom:6px;}
.com-head strong{color:var(--ink);}
.com-body{white-space:pre-wrap; line-height:1.5;}
.com-actions{display:flex; gap:4px; margin-top:6px;}
.com-actions button{border:0; background:none; color:var(--link); cursor:pointer; font-size:12px; padding:0 4px;}
.com-actions button.danger{color:var(--crit);}
.com-form textarea{width:100%; border:1px solid var(--line); border-radius:8px; padding:9px; font:inherit; min-height:90px; resize:vertical;}
.chemin{font-size:12px; color:var(--muted); margin:0 0 10px;}

/* ---------- Administration ---------- */
.onglets{display:flex; gap:4px; border-bottom:1px solid var(--line); margin:16px 0; flex-wrap:wrap;}
.onglets a{padding:9px 14px; text-decoration:none; color:var(--muted); border-bottom:2px solid transparent; font-weight:600;}
.onglets a.actif{color:var(--navy); border-color:var(--orange);}

/* ---------- Fenêtre ---------- */
.modal{border:0; border-radius:12px; padding:0; width:min(560px, 94vw); box-shadow:0 20px 60px rgba(0,0,0,.25);}
.modal.wide{width:min(860px, 96vw);}
.modal::backdrop{background:rgba(22,33,44,.45);}
.modal form{padding:22px;}
.modal h2{margin:0 0 14px;}
.modal-actions{display:flex; justify-content:flex-end; gap:8px; margin-top:16px;}
.secret{font-family:"SF Mono",Menlo,Consolas,monospace; background:var(--bg); border:1px dashed var(--line); border-radius:8px; padding:10px; word-break:break-all; font-size:12.5px;}

@media (max-width:1100px){ body.drawer-ouvert .view{margin-right:0;} }
@media (max-width:760px){
  .top{padding:10px 14px;} .top-brand span{display:none;}
  .view{padding:18px 16px 50px;}
  .arbre .col-opt{display:none;}
  .grid th{top:56px;}
}

/* ---------- Espace RIO : menu latéral rétractable ---------- */
.espace-layout.avec-menu{display:flex; gap:22px; align-items:flex-start;}
.espace-contenu{flex:1; min-width:0;}
.menu-espace{position:sticky; top:76px; flex:0 0 270px; max-height:calc(100vh - 92px); overflow:auto; background:var(--navy); border-radius:12px;
  color:#dfe6ec; padding:8px 0 12px; transition:flex-basis .15s;}
.menu-espace.replie{flex-basis:42px; overflow:hidden;}
.menu-espace.replie .menu-contenu{display:none;}
.menu-bascule{display:block; margin:0 8px 4px auto; border:0; background:rgba(255,255,255,.1); color:#fff; border-radius:6px; width:28px; height:28px; cursor:pointer;}
.menu-espace.replie .menu-bascule{margin:0 auto;}
.menu-contenu details{margin:4px 0;}
.menu-contenu summary{cursor:pointer; padding:8px 14px; font-weight:700; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#fff;}
.menu-contenu a{display:flex; justify-content:space-between; gap:6px; padding:6px 14px 6px 24px; color:#dfe6ec; text-decoration:none; font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.menu-contenu a.mono{font-size:12px;}
.menu-contenu a:hover{background:rgba(255,255,255,.08); color:#fff;}
.menu-contenu a.actif{background:var(--orange); color:#241500; font-weight:700;}
.menu-contenu a .muted{color:#9fb0c0;}
.menu-contenu a.actif .muted{color:#5a3a00;}
.toolbar .sel{display:flex; flex-direction:column; gap:2px; font-size:11px; color:var(--muted); font-weight:600;}
.toolbar .sel select{max-width:320px;}
.titre-vue{margin:6px 0 4px;}
.arbre tr.t-niveau_2 td{background:#FAFBFC; font-weight:600;}
dl.props{display:grid; grid-template-columns:110px 1fr; gap:4px 10px; margin:0 0 12px; font-size:13px;}
dl.props dt{color:var(--muted);}
dl.props dd{margin:0;}
@media (max-width:900px){ .espace-layout.avec-menu{flex-direction:column;} .menu-espace{position:static; flex-basis:auto; width:100%; max-height:none;} }
.menu-contenu a.nom{justify-content:flex-start; align-items:flex-start; white-space:normal; line-height:1.35; padding-top:7px; padding-bottom:7px;}
.menu-contenu a.nom .ell{white-space:normal;}
.menu-contenu a.nom .lettre{flex:0 0 20px; height:20px; border-radius:5px; background:rgba(255,255,255,.14); color:#fff; font-weight:800; font-size:11px;
  display:inline-flex; align-items:center; justify-content:center;}
.menu-contenu a.nom.actif .lettre{background:#241500; color:var(--orange);}
.menu-contenu a .ell{overflow:hidden; text-overflow:ellipsis;}

/* Graphe NMR : mêmes réglages que le simulateur NMR */
.graph-wrap{width:100%; height:calc(100vh - 300px); min-height:440px; background:#fff; border:1px solid var(--line); border-radius:10px; overflow:hidden;}
.graph-wrap svg{width:100%; height:100%; cursor:grab;}
.graph-node circle{fill:#fff; stroke:var(--orange); stroke-width:2px; cursor:pointer;}
.graph-node.has-children circle{fill:var(--orange-soft);}
.graph-node.leaf circle{stroke:var(--navy-2);}
.graph-node text{font-size:11px; fill:var(--ink); pointer-events:none;}
.graph-link{fill:none; stroke:var(--line); stroke-width:1.5px;}
.graph-hint{font-size:11.5px; color:var(--muted); margin-bottom:8px;}