/* Dark UI — SARL Lardon */
:root{
  --bg:#0c0d0f;            /* fond global */
  --surface:#121317;       /* cartes */
  --surface-2:#181a20;     /* sur-cartes */
  --text:#e6e6ea;          /* texte principal */
  --muted:#9aa0a6;         /* texte secondaire */
  --border:#2a2d33;        /* bordures */
  --accent:#ff6a00;        /* orange highlight */
  --accent-2:#7a001f;      /* bordeaux (touches discrètes) */
  --ok:#1faa72;
  --err:#d54b4b;
  --shadow:0 10px 25px rgba(0,0,0,.35);
  --radius:14px;
  --radius-sm:10px;
  --pad:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font:16px/1.5 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
}

/* Layout */
.app-shell{min-height:100vh; display:flex; flex-direction:column}
.app-header{
  position:sticky; top:0; z-index:10;
  backdrop-filter: blur(6px);
  background:rgba(12,13,15,.75); border-bottom:1px solid var(--border);
}
.nav{
  max-width:1100px; margin:0 auto; padding:10px var(--pad);
  display:flex; align-items:center; gap:14px;
}
.nav .brand{display:flex; align-items:center; gap:10px; margin-right:auto}
.logo{width:34px; height:34px; border-radius:8px; object-fit:cover; border:1px solid var(--border); background:#222}
.brand-name{font-weight:700; letter-spacing:.3px}
.nav a{color:var(--text); text-decoration:none; opacity:.9}
.nav a:hover{opacity:1}
.nav .pill{background:var(--surface-2); border:1px solid var(--border); padding:6px 10px; border-radius:999px}

.app-main{flex:1}
.container{max-width:1000px; margin:22px auto; padding:0 var(--pad);}
.section-title{font-size:1.4rem; font-weight:700; margin:0 0 12px}

/* Cards, surfaces */
.card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:var(--pad); margin-bottom:16px;
}
.card-muted{color:var(--muted)}

/* Inputs & Buttons */
input,textarea,select{
  width:100%; padding:.7rem .85rem;
  color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  outline:none; transition:border .15s ease;
}
input::placeholder,textarea::placeholder{color:#7e858e}
input:focus,textarea:focus,select:focus{border-color:var(--accent)}

.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding:.6rem 1rem; border-radius:999px; border:1px solid var(--border);
  background:#1a1c22; color:var(--text); cursor:pointer;
}
.btn:hover{border-color:var(--accent)}
.btn-primary{background:linear-gradient(135deg,var(--accent),#ff8c3a); border-color:#ff8c3a; color:#141417}
.btn-danger{background:#3a1212; border-color:#5b1b1b; color:#ffb2b2}
.btn-ghost{background:transparent}

.badge{
  display:inline-block; padding:2px 8px; border-radius:999px;
  background:#23252b; border:1px solid var(--border); color:var(--muted);
  font-size:.85rem;
}

/* Links */
a{color:#ff8847; text-decoration:none}
a:hover{text-decoration:underline}

/* Tables */
table{width:100%; border-collapse:collapse}
th,td{padding:10px; border-bottom:1px solid var(--border)}
th{color:var(--muted); font-weight:600; text-align:left}

/* Avatars */
.avatar{width:42px; height:42px; border-radius:999px; object-fit:cover; border:1px solid var(--border); background:#222}
.avatar-fallback{width:42px;height:42px;border-radius:999px;background:#2b2e35;color:#c9cbd1;display:flex;align-items:center;justify-content:center;font-weight:700}

/* Post bits */
.post-head{display:flex; align-items:center; gap:12px; margin-bottom:8px}
.meta{font-size:.9rem; color:var(--muted)}
.img{max-width:100%; border-radius:12px; border:1px solid var(--border)}

/* Reaction buttons */
.rbtn{border:1px solid var(--border); background:var(--surface-2); border-radius:999px; padding:6px 12px; cursor:pointer}
.rbtn .remoji{font-size:1.05rem; margin-right:6px}
.rbtn.active{background:var(--accent); color:#141417; border-color:transparent}
.rbtn.active .rcount{color:#141417}

/* Pills & chips */
.pill{display:inline-block;background:#23252b;border-radius:999px;padding:4px 10px;margin:2px 6px 2px 0;border:1px solid var(--border)}

/* Forms helper */
.form-row{display:flex; gap:12px; flex-wrap:wrap}
.help{color:var(--muted); font-size:.9rem}

/* Footer */
.app-footer{border-top:1px solid var(--border); color:var(--muted)}
.app-footer .inner{max-width:1100px; margin:0 auto; padding:16px var(--pad); font-size:.9rem}