/* StelarWork — styles blog / article / admin (réutilise le système visuel du site) */
:root{
  --bg:#ECEFF3; --bg-2:#F6F8FA; --ink:#0C1B2A; --ink-2:#51606E; --ink-3:#8A97A3;
  --line:rgba(12,27,42,0.12); --accent:#4B45B8; --accent-2:#6E68E6;
  --serif:'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --sans:'Hanken Grotesk', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, 'SFMono-Regular', monospace;
  --shell:1100px;
}
*{ box-sizing:border-box; }
[hidden]{ display:none !important; } /* prioritaire sur .btn/.panel qui définissent display */
html{ -webkit-text-size-adjust:100%; }
body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--sans);
  font-size:17px; line-height:1.62; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
::selection{ background:var(--accent); color:#fff; }
a{ color:var(--accent); }
img,svg{ display:block; max-width:100%; }
h1,h2,h3{ margin:0; font-family:var(--serif); font-weight:600; letter-spacing:-0.02em; }

.shell{ width:100%; max-width:var(--shell); margin:0 auto; padding:0 30px; }
.eyebrow{ font-family:var(--mono); font-size:0.71rem; font-weight:500; letter-spacing:0.2em;
  text-transform:uppercase; color:var(--accent); }

.btn{ display:inline-flex; align-items:center; gap:9px; font-family:var(--sans); font-weight:600;
  font-size:0.95rem; line-height:1; padding:12px 20px; border-radius:9px; text-decoration:none;
  border:1px solid transparent; cursor:pointer; transition:background .2s, transform .2s, border-color .2s, color .2s; }
.btn-primary{ background:var(--ink); color:#fff; }
.btn-primary:hover{ background:var(--accent); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--ink); }
.btn-sm{ padding:8px 13px; font-size:0.85rem; border-radius:8px; }
.btn[disabled]{ opacity:.55; cursor:default; }

/* ---------- Header ---------- */
.app-header{ border-bottom:1px solid var(--line); background:rgba(236,239,243,0.85);
  backdrop-filter:saturate(160%) blur(12px); position:sticky; top:0; z-index:30; }
.app-header .shell{ display:flex; align-items:center; justify-content:space-between; height:72px; }
.brand{ display:flex; align-items:center; gap:11px; text-decoration:none; color:var(--ink);
  font-family:var(--serif); font-weight:600; font-size:1.18rem; }
.brand img{ width:26px; height:26px; flex:0 0 auto; }
.app-header nav{ display:flex; gap:26px; align-items:center; }
.app-header nav a{ color:var(--ink-2); text-decoration:none; font-weight:500; font-size:0.95rem; }
.app-header nav a:hover{ color:var(--ink); }

/* ---------- Blog list ---------- */
.blog-hero{ padding:64px 0 18px; }
.blog-hero h1{ font-size:clamp(2.2rem,5vw,3.4rem); line-height:1.05; margin-top:14px; }
.blog-hero p{ margin:16px 0 0; color:var(--ink-2); max-width:46rem; font-size:1.08rem; }
.post-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:26px; padding:40px 0 90px; }
.post-card{ display:flex; flex-direction:column; background:var(--bg-2); border:1px solid var(--line);
  border-radius:16px; overflow:hidden; text-decoration:none; color:var(--ink);
  transition:transform .2s ease, border-color .2s ease; }
.post-card:hover{ transform:translateY(-3px); border-color:var(--accent); }
.post-card .cover{ aspect-ratio:16/9; background:linear-gradient(135deg,#E3E8EE,#D6DEE7); object-fit:cover; width:100%; }
.post-card .body{ padding:22px 24px 26px; display:flex; flex-direction:column; gap:10px; flex:1; }
.post-card .meta{ font-family:var(--mono); font-size:0.7rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); }
.post-card h2{ font-size:1.3rem; line-height:1.18; }
.post-card .excerpt{ color:var(--ink-2); font-size:0.97rem; }
.empty, .loading{ padding:60px 0 110px; color:var(--ink-2); }

/* ---------- Article ---------- */
.article{ padding:54px 0 90px; }
.article .back{ text-decoration:none; color:var(--ink-2); font-weight:500; font-size:0.92rem; }
.article .back:hover{ color:var(--ink); }
.article header{ max-width:760px; margin:0 auto; }
.article .meta{ font-family:var(--mono); font-size:0.72rem; letter-spacing:0.08em; text-transform:uppercase; color:var(--accent); margin-top:26px; }
.article h1{ font-size:clamp(2rem,4.5vw,3rem); line-height:1.06; margin-top:14px; }
.article .lead{ color:var(--ink-2); font-size:1.12rem; margin-top:16px; }
.article .cover{ width:100%; border-radius:16px; margin:34px 0 0; }
.article .content{ max-width:720px; margin:36px auto 0; font-size:1.08rem; line-height:1.7; }
.article .content h2{ font-size:1.6rem; margin:42px 0 0; }
.article .content h3{ font-size:1.25rem; margin:32px 0 0; }
.article .content p{ margin:18px 0 0; color:#1d2c3b; }
.article .content ul,.article .content ol{ margin:18px 0 0; padding-left:1.3em; color:#1d2c3b; }
.article .content li{ margin:6px 0; }
.article .content a{ color:var(--accent); }
.article .content img{ border-radius:12px; margin:24px 0; }
.article .content pre{ background:#0C1B2A; color:#ECEFF3; padding:18px; border-radius:12px; overflow:auto; font-family:var(--mono); font-size:0.9rem; }
.article .content code{ font-family:var(--mono); font-size:0.92em; }
.article .content blockquote{ margin:24px 0; padding:6px 20px; border-left:3px solid var(--accent); color:var(--ink-2); }

/* ---------- Footer ---------- */
.app-footer{ border-top:1px solid var(--line); padding:32px 0; color:var(--ink-3); font-size:0.86rem; }
.app-footer .shell{ display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap; }
.app-footer a{ color:var(--ink-3); text-decoration:none; }
.app-footer a:hover{ color:var(--ink); }

/* ---------- Admin ---------- */
.admin-wrap{ min-height:100vh; }
.login-card{ max-width:400px; margin:8vh auto; background:var(--bg-2); border:1px solid var(--line);
  border-radius:16px; padding:36px 34px; }
.login-card h1{ font-size:1.5rem; }
.login-card p{ color:var(--ink-2); font-size:0.95rem; margin:10px 0 0; }
.field{ display:flex; flex-direction:column; gap:7px; margin-top:18px; }
.field label{ font-size:0.82rem; font-weight:600; color:var(--ink-2); }
.field input, .field textarea, .field select{ font-family:var(--sans); font-size:1rem; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%; }
.field textarea{ min-height:120px; resize:vertical; }
.field textarea.code{ font-family:var(--mono); font-size:0.92rem; min-height:340px; }
.field input:focus,.field textarea:focus,.field select:focus{ outline:none; border-color:var(--accent); }
.msg{ font-size:0.9rem; margin-top:14px; min-height:1.2em; }
.msg.ok{ color:#1f7a4d; } .msg.err{ color:#b3261e; }

.admin-bar{ display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:16px 0; border-bottom:1px solid var(--line); flex-wrap:wrap; }
.admin-bar .who{ font-size:0.9rem; color:var(--ink-2); }
.tabs{ display:flex; gap:8px; margin:22px 0; }
.tabs button{ font-family:var(--sans); font-weight:600; font-size:0.9rem; padding:8px 16px; border-radius:9px;
  border:1px solid var(--line); background:transparent; color:var(--ink-2); cursor:pointer; }
.tabs button.active{ background:var(--ink); color:#fff; border-color:var(--ink); }
.panel{ padding-bottom:90px; }

.table{ width:100%; border-collapse:collapse; font-size:0.95rem; }
.table th{ text-align:left; font-family:var(--mono); font-size:0.68rem; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-3); padding:12px 14px; border-bottom:1px solid var(--line); }
.table td{ padding:13px 14px; border-bottom:1px solid var(--line); vertical-align:top; }
.table tr:hover td{ background:var(--bg-2); }
.badge{ display:inline-block; font-family:var(--mono); font-size:0.66rem; letter-spacing:0.08em; text-transform:uppercase;
  padding:3px 9px; border-radius:20px; }
.badge.published{ background:rgba(31,122,77,0.12); color:#1f7a4d; }
.badge.draft{ background:rgba(138,151,163,0.18); color:var(--ink-2); }
.row-actions{ display:flex; gap:8px; flex-wrap:wrap; }
.editor-grid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.editor-grid .full{ grid-column:1 / -1; }
.editor-actions{ display:flex; gap:12px; align-items:center; margin-top:22px; flex-wrap:wrap; }
.muted{ color:var(--ink-3); font-size:0.85rem; }

@media (max-width:760px){
  .post-grid{ grid-template-columns:1fr; }
  .editor-grid{ grid-template-columns:1fr; }
  .app-header nav{ gap:16px; }
}
:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; }