/* Technomaniac — thème "Console" (sombre, terminal, monospace) */

:root {
  --bg:#0A0E14;
  --grid:#0e1420;
  --panel:#0d1420;
  --panel-2:#0f1620;
  --border:#1a2534;
  --border-2:#1E2A38;
  --text:#C6D2E2;
  --text-dim:#8aa0b8;
  --muted:#5d7186;
  --faint:#4a5a6e;
  --cyan:#4FD6DE;
  --amber:#FFB454;
  --ink:#0A0E14;

  --font-mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --font-sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  --maxw:960px;
}

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%}

body{
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column;
  font-family:var(--font-sans);
  font-size:16px;
  line-height:1.7;
  color:var(--text);
  background-color:var(--bg);
  background-image:
    linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:32px 32px;
  -webkit-font-smoothing:antialiased;
}

::selection{background:var(--cyan);color:var(--ink)}

a{color:var(--cyan);text-decoration:none}
a:hover{color:var(--amber)}

.container{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 clamp(1rem,4vw,2rem)}

/* ---------- Header ---------- */
.site-header{border-bottom:1px solid var(--border);background:rgba(10,14,20,.85);backdrop-filter:blur(6px)}
.site-header__in{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;padding:16px 0}
.brand{font-family:var(--font-mono);font-weight:600;font-size:18px;letter-spacing:-.02em;color:#EAF2FB}
.brand:hover{color:#EAF2FB}
.brand span{color:var(--cyan)}
.cursor{display:inline-block;width:8px;height:15px;background:var(--amber);vertical-align:-2px;margin-left:3px;animation:blink 1.1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}

.site-nav{display:flex;gap:16px;align-items:center;font-family:var(--font-mono);font-size:13px;flex-wrap:wrap}
.site-nav a{color:var(--text-dim)}
.site-nav a:hover{color:var(--amber)}
.site-nav a.is-active{color:var(--cyan)}
.site-nav__rss{color:var(--faint);border:1px solid var(--border-2);border-radius:4px;padding:1px 7px}
.site-nav__rss:hover{border-color:var(--amber)}

/* ---------- Main ---------- */
.main{flex:1 0 auto;width:100%;max-width:var(--maxw);margin:0 auto;padding:clamp(1.75rem,4vw,3rem) clamp(1rem,4vw,2rem)}

.rule{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--faint);margin:0 0 16px;text-transform:lowercase}

.back{display:inline-block;font-family:var(--font-mono);font-size:13px;color:var(--muted);margin-bottom:20px}
.back:hover{color:var(--cyan)}

.empty{font-family:var(--font-mono);color:var(--muted)}

/* ---------- Featured ---------- */
.featured{display:block;border:1px solid var(--border-2);background:rgba(15,22,32,.6);border-radius:12px;
  padding:clamp(20px,3vw,32px);margin-bottom:28px;transition:border-color .15s,transform .15s}
.featured:hover{border-color:var(--cyan);transform:translateY(-2px)}
.featured__cat{display:inline-block;font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--ink);
  background:var(--cyan);padding:2px 9px;border-radius:4px}
.featured__title{font-family:var(--font-mono);font-weight:600;color:#EAF2FB;line-height:1.15;letter-spacing:-.015em;
  font-size:clamp(1.4rem,3.5vw,2.1rem);margin:16px 0 12px;text-wrap:balance}
.featured__excerpt{color:var(--text-dim);margin:0 0 16px;max-width:60ch}
.featured__meta{font-family:var(--font-mono);font-size:12.5px;color:var(--muted)}

/* ---------- Article grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.card{border:1px solid var(--border);background:var(--panel);border-radius:10px;transition:border-color .15s,transform .15s}
.card:hover{border-color:var(--cyan);transform:translateY(-2px)}
.card__link{display:block;padding:16px 18px;color:inherit;height:100%}
.card__link:hover{color:inherit}
.card__cat{font-family:var(--font-mono);font-size:11px;color:var(--amber)}
.card__title{font-family:var(--font-mono);font-weight:500;font-size:15px;color:#dbe6f4;line-height:1.3;margin:8px 0 8px;letter-spacing:-.01em}
.card__excerpt{font-size:13.5px;color:var(--muted);margin:0 0 14px;line-height:1.55}
.card__meta{font-family:var(--font-mono);font-size:11px;color:var(--faint)}

/* ---------- Category header ---------- */
.cat-title{font-family:var(--font-mono);font-weight:600;font-size:clamp(1.5rem,4vw,2rem);color:#EAF2FB;
  letter-spacing:-.02em;margin:0 0 24px}
.cat-title b{color:var(--cyan);font-weight:600}

/* ---------- Single article ---------- */
.post{max-width:70ch;margin:0 auto}
.post__cat{display:inline-block;font-family:var(--font-mono);font-size:12px;color:var(--amber)}
.post__title{font-family:var(--font-mono);font-weight:600;color:#EAF2FB;line-height:1.15;letter-spacing:-.015em;
  font-size:clamp(1.7rem,4.5vw,2.6rem);margin:12px 0 14px;text-wrap:balance}
.post__meta{font-family:var(--font-mono);font-size:13px;color:var(--muted);
  padding-bottom:20px;border-bottom:1px solid var(--border);margin-bottom:24px}
.post__excerpt{font-size:1.15rem;color:var(--text-dim);line-height:1.6;margin:0 0 24px}
.post__body{color:var(--text);font-size:1.06rem;line-height:1.8}
.post__body a{text-decoration:underline}

/* ---------- Pagination ---------- */
.pager{display:flex;align-items:center;gap:14px;justify-content:center;margin-top:32px;font-family:var(--font-mono);font-size:13px}
.pager__btn{color:var(--cyan);border:1px solid var(--border-2);border-radius:6px;padding:5px 14px}
.pager__btn:hover{border-color:var(--cyan);color:var(--amber)}
.pager__btn.is-disabled{color:var(--faint);border-color:var(--border);pointer-events:none}
.pager__status{color:var(--muted)}

/* ---------- Footer ---------- */
.site-footer{border-top:1px solid var(--border);margin-top:auto}
.site-footer__in{display:flex;align-items:center;justify-content:space-between;padding:20px 0;
  font-family:var(--font-mono);font-size:12px;color:var(--faint)}
.site-footer__in a{color:var(--muted)}
.site-footer__in a:hover{color:var(--cyan)}

/* ---------- Article body (rendu Markdown) ---------- */
.post__body > *:first-child{margin-top:0}
.post__body p{margin:0 0 1.15rem}
.post__body h2{font-family:var(--font-mono);font-size:1.4rem;color:#EAF2FB;letter-spacing:-.01em;margin:2rem 0 .9rem}
.post__body h3{font-family:var(--font-mono);font-size:1.15rem;color:var(--cyan);margin:1.6rem 0 .7rem}
.post__body ul,.post__body ol{margin:0 0 1.15rem;padding-left:1.4rem}
.post__body li{margin:.35rem 0}
.post__body li::marker{color:var(--cyan)}
.post__body blockquote{margin:1.4rem 0;padding:.4rem 0 .4rem 1.1rem;border-left:2px solid var(--cyan);
  color:var(--text-dim);font-style:italic}
.post__body img{max-width:100%;height:auto;border-radius:8px;border:1px solid var(--border)}
.post__body hr{border:0;border-top:1px solid var(--border);margin:2rem 0}
.post__body :not(pre) > code{font-family:var(--font-mono);font-size:.88em;color:var(--cyan);
  background:#0f1620;border:1px solid var(--border);border-radius:4px;padding:1px 6px}

/* ---------- Blocs de code + coloration (highlight.js) ---------- */
:root{
  --code-green:#8DDB8C;--code-pink:#FF7B9C;--code-purple:#B39DFF;--code-blue:#79b8ff;
}
.post__body pre{margin:0 0 1.4rem;background:#0b1119;border:1px solid var(--border-2);border-radius:10px;
  overflow-x:auto;position:relative}
.post__body pre code{display:block;font-family:var(--font-mono);font-size:13.5px;line-height:1.65;
  color:var(--text);padding:16px 18px;background:none;border:0}
.hljs-comment,.hljs-quote{color:var(--muted);font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-tag,.hljs-name,.hljs-built_in{color:var(--cyan)}
.hljs-string,.hljs-regexp,.hljs-attr,.hljs-attribute,.hljs-symbol{color:var(--amber)}
.hljs-number,.hljs-literal,.hljs-boolean{color:var(--code-green)}
.hljs-title,.hljs-title.function_,.hljs-section,.hljs-selector-id,.hljs-selector-class{color:var(--code-purple)}
.hljs-type,.hljs-class .hljs-title,.hljs-meta{color:var(--code-pink)}
.hljs-variable,.hljs-params,.hljs-property{color:var(--text-dim)}
.hljs-deletion{color:#f0999b}.hljs-addition{color:var(--code-green)}
.hljs-emphasis{font-style:italic}.hljs-strong{font-weight:500}

/* ---------- Effet machine à écrire (une) ---------- */
.featured__title.is-typing::after,.featured__title.is-typed.keep-cursor::after{
  content:"";display:inline-block;width:.55em;height:1.02em;background:var(--amber);
  vertical-align:-2px;margin-left:3px;animation:blink 1.1s steps(2) infinite}

/* ---------- Page 404 terminal ---------- */
.error-page{align-items:center;justify-content:center;padding:clamp(1rem,5vw,3rem)}
.error-term{width:100%;max-width:640px;border:1px solid var(--border-2);border-radius:12px;
  background:#0b1119;overflow:hidden;box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.error-term__bar{display:flex;align-items:center;gap:12px;padding:11px 15px;
  background:#0c1119;border-bottom:1px solid var(--border);font-family:var(--font-mono);font-size:12px;color:var(--muted)}
.error-term__bar .dots{display:flex;gap:6px}
.error-term__bar .dots i{width:11px;height:11px;border-radius:50%;background:#2a3543;display:block}
.error-term__body{padding:22px 20px;font-family:var(--font-mono);font-size:14px;line-height:1.9}
.error-term__body .prompt{color:var(--cyan)}
.error-term__body .path{color:var(--amber)}
.error-term__err{color:#f0999b;margin:0}
.error-term__code{color:var(--text-dim);margin:14px 0 20px}
.error-term__code b{color:#EAF2FB;font-weight:500}
.error-term__link{display:inline-block;color:var(--cyan)}
.error-term__link span{color:var(--muted)}
.error-term__link:hover span{color:var(--amber)}

/* ---------- A11y ---------- */
a:focus-visible,.card:focus-within{outline:2px solid var(--cyan);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){
  .cursor,.featured__title.is-typing::after,.featured__title.keep-cursor::after{animation:none}
  .featured,.card{transition:none}
}