/* style.css — thème terminal / dev pour la façade */
:root{
  --bg: #17130f;
  --bg-panel: #1f1a14;
  --ink: #ece4d6;
  --dim: #9a8f7a;
  --amber: #d4a24c;
  --amber-soft: #7a6337;
  --teal: #5f8f8a;
  --line: #332c22;
  --red: #b4593f;
  --mono: "IBM Plex Mono", "JetBrains Mono", "Fira Code", ui-monospace, Consolas, monospace;
}
*{box-sizing:border-box;}
body{ margin:0; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 15px; line-height:1.7; }
a{ color: var(--amber); text-decoration:none; }
a:hover{ text-decoration: underline; }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding: 16px 28px; border-bottom: 1px solid var(--line); background: var(--bg-panel); }
.topbar .brand{ display:flex; align-items:center; gap:10px; color: var(--ink); font-size: 14px; letter-spacing: 0.02em; }
.topbar .dots{ display:flex; gap:6px; }
.topbar .dots span{ width:9px; height:9px; border-radius:50%; display:inline-block; background: var(--line); }
.topbar .dots span:nth-child(1){ background:#7a4a3f; }
.topbar .dots span:nth-child(2){ background:#7a6337; }
.topbar .dots span:nth-child(3){ background:#3f5940; }
.login-link{ border: 1px solid var(--amber-soft); padding: 6px 14px; border-radius: 3px; color: var(--amber); font-size: 13px; transition: background 0.15s ease, color 0.15s ease; }
.login-link:hover{ background: var(--amber); color: var(--bg); text-decoration:none; }
main{ max-width: 700px; margin: 0 auto; padding: 48px 24px 80px; }
.page-title{ font-size: 13px; color: var(--dim); text-transform: lowercase; margin-bottom: 6px; }
.page-title::before{ content: "~/"; color: var(--teal); }
h1{ font-size: 22px; font-weight: 500; color: var(--ink); margin: 0 0 34px; }
.entry{ border-left: 2px solid var(--line); padding-left: 20px; margin-bottom: 38px; position: relative; }
.entry::before{ content: ""; position: absolute; left: -5px; top: 6px; width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
.entry .meta{ font-size: 12px; color: var(--dim); margin-bottom: 8px; }
.entry .meta .hash{ color: var(--amber); }
.entry h2{ font-size: 16px; font-weight: 500; margin: 0 0 10px; color: var(--ink); }
.entry p{ color: #c9beac; margin: 0 0 12px; font-size: 14px; }
.entry pre{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: 4px; padding: 12px 14px; overflow-x: auto; font-size: 13px; color: #b8d4c8; margin: 0; }
.entry pre .plus{ color: var(--teal); }
.entry pre .minus{ color: var(--red); }
footer{ max-width: 700px; margin: 0 auto; padding: 20px 24px 60px; color: var(--dim); font-size: 12px; }
.login-wrap{ max-width: 380px; margin: 90px auto; padding: 0 24px; }
.login-box{ background: var(--bg-panel); border: 1px solid var(--line); border-radius: 6px; padding: 30px 26px; }
.login-box .prompt-label{ font-size: 12px; color: var(--dim); margin-bottom: 4px; }
.login-box .prompt-label .cursor{ display:inline-block; width:7px; height:14px; background: var(--amber); vertical-align: -2px; margin-left: 4px; animation: blink 1.1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }
.login-box h1{ font-size: 15px; margin: 4px 0 22px; color: var(--ink); font-weight: 500; }
.field{ display:flex; align-items:center; background: var(--bg); border: 1px solid var(--line); border-radius: 4px; padding: 0 10px; margin-bottom: 16px; }
.field .prefix{ color: var(--teal); padding-right: 6px; }
.field input{ flex:1; background: transparent; border: none; color: var(--ink); font-family: var(--mono); font-size: 14px; padding: 10px 4px; outline: none; }
button.submit{ width:100%; background: var(--amber); color: var(--bg); border:none; border-radius: 4px; padding: 11px; font-family: var(--mono); font-size: 14px; font-weight: 600; cursor:pointer; transition: opacity 0.15s ease; }
button.submit:hover{ opacity: 0.85; }
.error-line{ color: var(--red); font-size: 13px; margin: -6px 0 16px; }
.error-line::before{ content: "! "; }
.back-link{ display:inline-block; margin-top: 18px; font-size: 12px; color: var(--dim); }