/* Présentation simple : grands textes, grands boutons, couleurs sobres */
:root { --bg:#f6f7f9; --card:#fff; --ink:#1f2937; --muted:#6b7280; --line:#e5e7eb; --blue:#2563eb; --blue-d:#1d4ed8; --red:#b91c1c; --green:#166534; }
* { box-sizing: border-box; }
body { margin:0; font:18px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; background:var(--bg); color:var(--ink); }
a { color:var(--blue); }
.topbar { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:.5rem 1rem; padding:.8rem 1.2rem; background:var(--card); border-bottom:1px solid var(--line); }
.brand { font-size:1.3rem; font-weight:700; color:var(--ink); text-decoration:none; }
.topbar nav { display:flex; align-items:center; flex-wrap:wrap; gap:.3rem 1.2rem; }
.hello { color:var(--muted); }
.link { text-decoration:none; font-weight:600; padding:.4rem 0; }
.page { max-width:900px; margin:0 auto; padding:1.2rem; }
.notice { padding:.9rem 1.1rem; border-radius:10px; margin-bottom:1rem; font-weight:600; }
.notice.ok { background:#dcfce7; color:var(--green); } .notice.bad { background:#fee2e2; color:var(--red); }
.where { display:flex; align-items:center; flex-wrap:wrap; gap:.8rem 1rem; }
h1 { font-size:1.7rem; margin:.3rem 0; } h2 { font-size:1.2rem; margin:1.8rem 0 .7rem; color:var(--muted); }
.path { margin:.2rem 0 0; color:var(--muted); font-size:.95rem; } .path a { text-decoration:none; }
.btn, .tiny { display:inline-flex; align-items:center; justify-content:center; gap:.4rem; min-height:48px; padding:.5rem 1.1rem; font:inherit; font-weight:600; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:12px; cursor:pointer; text-decoration:none; }
.btn:hover, .tiny:hover { border-color:var(--blue); }
.btn.primary { background:var(--blue); border-color:var(--blue); color:#fff; } .btn.primary:hover { background:var(--blue-d); }
.btn.danger, .tiny.danger { color:var(--red); } .btn.danger:hover, .tiny.danger:hover { border-color:var(--red); }
.btn.back { background:transparent; }
.actions { display:flex; flex-wrap:wrap; gap:.8rem; margin:1.2rem 0 .4rem; } .actions form { margin:0; }
.hint { background:#eff6ff; color:#1e40af; padding:.8rem 1rem; border-radius:10px; }
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:1rem; }
.folder { background:var(--card); border:2px solid var(--line); border-radius:14px; overflow:hidden; }
.folder:hover { border-color:var(--blue); }
.folder .open { display:flex; flex-direction:column; align-items:center; gap:.2rem; padding:1.2rem .8rem .8rem; text-decoration:none; color:var(--ink); text-align:center; }
.folder .ico { font-size:2.8rem; line-height:1; } .folder .name { font-weight:700; word-break:break-word; }
.meta { color:var(--muted); font-size:.9rem; }
.mini { display:flex; gap:.4rem; justify-content:center; flex-wrap:wrap; padding:0 .6rem .8rem; } .mini form { margin:0; }
.tiny { min-height:40px; padding:.3rem .8rem; font-size:.9rem; }
.files { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.7rem; }
.files li { display:flex; align-items:center; flex-wrap:wrap; gap:.6rem 1rem; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:.8rem 1rem; }
.files .ico { font-size:2rem; } .files .info { flex:1 1 220px; display:flex; flex-direction:column; min-width:0; }
.files .name { font-weight:700; word-break:break-word; } .btns { display:flex; flex-wrap:wrap; gap:.5rem; }
.empty { background:var(--card); border:2px dashed var(--line); border-radius:14px; padding:1.5rem; text-align:center; color:var(--muted); }
/* Page de connexion */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; padding:1rem; }
.login-box { background:var(--card); width:100%; max-width:420px; padding:2rem; border-radius:18px; box-shadow:0 8px 30px rgba(0,0,0,.08); }
.login-box h1 { text-align:center; margin:0 0 .3rem; } .login-box .subtitle { text-align:center; color:var(--muted); margin:0 0 1.4rem; }
.login-box label { display:block; font-weight:600; margin:.8rem 0 .3rem; }
.login-box input { width:100%; min-height:50px; padding:.6rem .9rem; font:inherit; border:2px solid var(--line); border-radius:12px; }
.login-box input:focus { outline:none; border-color:var(--blue); }
.login-box button { width:100%; margin-top:1.2rem; min-height:52px; font:inherit; font-weight:700; color:#fff; background:var(--blue); border:0; border-radius:12px; cursor:pointer; }
.login-box button:hover { background:var(--blue-d); }
@media (max-width:560px) { body { font-size:17px; } .btns .btn, .actions .btn { flex:1 1 100%; } }

/* Administration */
.tabs { display:flex; flex-wrap:wrap; gap:.5rem; margin:.4rem 0 1rem; }
.tab { flex:1 1 180px; min-height:52px; font:inherit; font-weight:700; color:var(--ink); background:var(--card); border:2px solid var(--line); border-radius:12px; cursor:pointer; }
.tab.on { background:var(--blue); border-color:var(--blue); color:#fff; }
.panel[hidden] { display:none; }
.formbox { display:flex; flex-wrap:wrap; align-items:flex-end; gap:.8rem 1rem; background:var(--card); border:2px solid var(--line); border-radius:14px; padding:1rem; }
.formbox label { display:flex; flex-direction:column; gap:.3rem; font-weight:600; flex:1 1 220px; }
.formbox input, .formbox select, select.select { min-height:48px; padding:.4rem .8rem; font:inherit; font-weight:400; color:var(--ink); background:#fff; border:2px solid var(--line); border-radius:12px; max-width:100%; }
.formbox > select { flex:1 1 320px; }
.btns form { margin:0; }
select.select { font-weight:600; }
.scroll { overflow-x:auto; margin-bottom:.8rem; }
.perm-matrix { width:100%; border-collapse:separate; border-spacing:0; background:var(--card); border:2px solid var(--line); border-radius:14px; overflow:hidden; }
.perm-matrix th, .perm-matrix td { padding:.7rem .6rem; text-align:center; border-bottom:1px solid var(--line); }
.perm-matrix tr:last-child td { border-bottom:0; }
.perm-matrix th { background:#f1f5f9; font-size:.9rem; }
.perm-matrix th[data-level] { cursor:pointer; } .perm-matrix th[data-level]:hover { color:var(--blue); text-decoration:underline; }
.perm-matrix .who { text-align:left; font-weight:700; }
.perm-matrix input[type=radio] { width:24px; height:24px; accent-color:var(--blue); cursor:pointer; }
.perm-matrix .perm-origin { color:var(--muted); font-size:.85rem; text-align:left; }
.legend { color:var(--muted); font-size:.92rem; padding-left:1.2rem; margin:.6rem 0 1rem; }
code { background:#f1f5f9; padding:.1rem .3rem; border-radius:4px; }
.files a.name { color:var(--ink); text-decoration:none; } .files a.name:hover { color:var(--blue); }

/* Arborescence des dossiers (admin) */
.tree ul { list-style:none; margin:0 0 0 1.1rem; padding:0 0 0 1rem; border-left:2px solid var(--line); }
.tree > ul { margin-left:1.1rem; }
.tnode { display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .8rem; background:var(--card); border:2px solid var(--line); border-radius:12px; padding:.5rem .8rem; margin:.4rem 0; }
.tnode.root { background:#eff6ff; border-color:#bfdbfe; }
.tnode .ico { font-size:1.4rem; } .tname { font-weight:700; color:var(--ink); text-decoration:none; } .tname:hover { color:var(--blue); }
.tbtns { margin-left:auto; display:flex; flex-wrap:wrap; gap:.4rem; } .tbtns form { margin:0; }
.tbtns a.tiny { text-decoration:none; }