:root{
  --bg:#000000; --surface:#000000; --surface-2:#000000;
  --fg:#e7ebf0; --muted:#9099a6; --faint:#5c6573; --line:#222a35;
  --accent:#ff3b3b; --accent-dim:rgba(255,59,59,.14);
  --sans:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,"DejaVu Sans Mono",monospace;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--sans);
  font-size:16px;line-height:1.7;-webkit-font-smoothing:antialiased}

/* --- logo ----*/
.logo-hero{
  width:100%;
  max-width:120px;      /* la taille que tu veux, ajuste ce chiffre */
  height:auto;
  display:block;
  margin:24px auto;     /* centré */
  border-radius:0;      /* pas de coins arrondis sur un logo transparent */
}

/* ---- top bar / navbar ---- */
.topbar{position:sticky;top:0;z-index:10;background:#000000;
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.topbar .inner{max-width:900px;margin:0 auto;padding:13px 24px;display:flex;
  align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;white-space:nowrap}
.logo{height:36px;width:auto;margin:0;border-radius:0;display:block}
.brand-text{font-family:var(--mono);font-weight:700;font-size:15px;letter-spacing:-.02em;color:var(--fg)}
.brand .r{color:var(--accent)} .brand .b{color:var(--faint);font-weight:500}
.right{display:flex;align-items:center;gap:22px}
.nav{display:flex;gap:22px;font-size:13.5px}
.nav a{color:var(--muted);text-decoration:none}
.nav a:hover{color:var(--fg)} .nav a.active{color:var(--accent)}
.lang{display:flex;align-items:center}
.lang a{display:inline-flex;align-items:center;line-height:0}
.lang img{height:16px;width:auto;margin:0;border-radius:2px;display:block;opacity:.85;transition:opacity .15s}
.lang a:hover img{opacity:1}

/* ---- layout ---- */
.wrap{max-width:720px;margin:0 auto;padding:0 24px}
main{padding:44px 0 8px}

/* ---- chips de categorie ---- */
.chip{display:inline-block;font-family:var(--mono);font-size:12px;line-height:1;color:var(--accent);
  background:var(--accent-dim);border:1px solid rgba(255,59,59,.30);padding:6px 11px;border-radius:999px;margin-bottom:4px;
  transition:filter .15s,box-shadow .2s,transform .15s}
.chip-purple{color:#c9a4ff;background:rgba(168,85,247,.15);border-color:rgba(168,85,247,.40)}
.chip-blue{color:#8ab4ff;background:rgba(59,130,246,.15);border-color:rgba(59,130,246,.40)}
.chip-orange{color:#ffb570;background:rgba(249,115,22,.15);border-color:rgba(249,115,22,.40)}
.chip-green{color:#6ee7a0;background:rgba(34,197,94,.15);border-color:rgba(34,197,94,.40)}
.chip-pink{color:#ff9ecb;background:rgba(236,72,153,.15);border-color:rgba(236,72,153,.40)}
a.chip{text-decoration:none}
a.chip:hover{filter:brightness(1.35);transform:translateY(-1px);
  box-shadow:0 0 14px rgba(255,59,59,.45)}                         /* rouge par defaut */
a.chip.chip-purple:hover{box-shadow:0 0 14px rgba(168,85,247,.55)} /* violet */
a.chip.chip-blue:hover{box-shadow:0 0 14px rgba(59,130,246,.55)}   /* bleu */
a.chip.chip-orange:hover{box-shadow:0 0 14px rgba(249,115,22,.55)} /* orange */
a.chip.chip-green:hover{box-shadow:0 0 14px rgba(34,197,94,.55)} /* green */
a.chip.chip-pink:hover{box-shadow:0 0 14px rgba(236,72,153,.55)} /* pink */

/* ---- titres + contenu article ---- */
h1{font-size:34px;line-height:1.18;letter-spacing:-.022em;font-weight:700;margin:16px 0 10px}
.deck{font-size:18.5px;color:var(--muted);margin:0 0 16px;line-height:1.5}
article h2{font-size:23px;line-height:1.3;letter-spacing:-.01em;font-weight:700;margin:42px 0 8px}
article h2::after{content:"";display:block;width:38px;height:2px;background:var(--accent);margin-top:11px;border-radius:2px}
article h3{font-size:17.5px;font-weight:600;margin:30px 0 8px;color:var(--fg)}
article p,article li{color:#d6dbe3}
article p, article li {
  text-align: justify;
  hyphens: auto;
  -webkit-hyphens: auto;
}
article strong{color:#fff;font-weight:600}
article p a, article li a, article blockquote a{color:var(--accent);text-decoration:none;border-bottom:1px solid rgba(255,59,59,.35)}
article p a:hover, article li a:hover, article blockquote a:hover{border-bottom-color:var(--accent)}
article ul,article ol{padding-left:20px} article li{margin:7px 0}
article li::marker{color:var(--accent)}
article blockquote{margin:22px 0;padding:2px 18px;border-left:3px solid var(--accent);color:var(--muted);font-style:italic}
article blockquote p{color:var(--muted)}

/* ---- meta (date, lecture, vues, auteur, actions) ---- */
.meta{display:flex;flex-wrap:wrap;align-items:center;gap:16px;row-gap:10px;
  font-family:var(--mono);font-size:12.5px;color:var(--faint);
  padding-bottom:22px;margin-bottom:30px;border-bottom:1px solid var(--line)}
.author{display:inline-flex;align-items:center;gap:7px;color:var(--faint);text-decoration:none;border-bottom:0}
.author:hover{color:var(--fg)}
.avatar{width:29px;height:29px;border-radius:50%;object-fit:cover;margin:0;display:block;border:1px solid var(--line)}

/* ---- barre d'actions (like / partage / imprimer) ---- */
.actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.btn-action{display:inline-flex;align-items:center;justify-content:center;gap:6px;font-family:var(--mono);font-size:12px;
  color:var(--muted);background:var(--surface);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;cursor:pointer;line-height:1;transition:color .15s,border-color .15s}
.btn-action:hover{color:var(--fg);border-color:var(--faint)}
.btn-action.copied{color:#8ab4ff;border-color:rgba(59,130,246,.45)}
.btn-action svg{width:13px;height:13px;margin:0;border-radius:0;display:block}
.btn-action .label:empty{display:none}
.btn-like.liked{ color:var(--accent); border-color:rgba(255,59,59,.45); }
.btn-like.liked svg{ fill:var(--accent); }        /* cœur SVG du haut */
.btn-like.liked .heart{ color:var(--accent); }    /* cœur texte du bas */

.end-like{
  margin:56px 0 8px;
  padding:18px 20px;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--accent);   /* accent qui le distingue du corps */
  border-radius:10px;
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
}
.end-like p{
  margin:0; flex:1; min-width:0;
  color:var(--muted); font-size:14px; line-height:1.5;
}
.end-like .btn-like{
  flex:0 0 auto;              /* le cœur reste à droite, en bout de phrase */
  font-size:13px; padding:8px 16px;
}
.end-like .btn-like .heart{ font-size:15px; }
.btn-like.liked .heart{ color:var(--accent); }

@media print{ .end-like{ display:none !important } }

/* sur mobile : le cœur passe dessous, aligné à gauche */
@media(max-width:600px){
  .end-like{ flex-direction:column; align-items:flex-start; }
}

.btn-like.liked .heart{ color:var(--accent); }

/* ---- code ---- */
code{font-family:var(--mono);font-size:13px;background:var(--surface);border:1px solid var(--line);border-radius:5px;padding:1.5px 6px}
pre{border:1px solid var(--line);border-radius:10px;padding:16px 18px;overflow-x:auto;
  font-size:13px;line-height:1.55;margin:20px 0}
pre code{background:none;border:0;padding:0}

/* ---- figures ---- */
img,svg{max-width:100%;height:auto;display:block;margin:24px auto;border-radius:10px}

/* ---- tables ---- */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:14px;margin:22px 0;
  border:1px solid var(--line);border-radius:10px;overflow:hidden}
th,td{padding:11px 14px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
th{font-family:var(--mono);font-size:12.5px;font-weight:600;background:var(--surface-2);color:var(--fg)}
tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:rgba(255,255,255,.015)}

hr{border:0;border-top:1px solid var(--line);margin:34px 0}

/* ---- liste d'articles (accueil) ---- */
.lead{font-size:18px;color:var(--muted);margin:6px 0 32px}
.posts{list-style:none;padding:0;margin:0}
.posts li{padding:22px 0;border-bottom:1px solid var(--line)}
.posts .pdate{font-family:var(--mono);font-size:12px;color:var(--faint)}
.posts .ptitle{display:block;font-size:19px;font-weight:600;color:var(--fg);text-decoration:none;
  margin:7px 0;letter-spacing:-.01em;line-height:1.35}
.posts li:hover .ptitle{color:var(--accent)}
.terms{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:10px}
.terms li{display:flex;align-items:center;gap:7px}
.tcount{font-family:var(--mono);font-size:12px;color:var(--faint)}
.posts .pexcerpt{font-size:14px;line-height:1.55;color:var(--faint);margin:4px 0 10px}

/* ---- page auteur ---- */
.author-head{display:flex;align-items:center;gap:16px;margin:8px 0 10px}
.author-photo{width:64px;height:64px;border-radius:50%;object-fit:cover;margin:0;display:block;border:1px solid var(--line)}
.author-head h1{margin:0}
.author-head .lead{margin:4px 0 0}

/* ---- categorie title ----*/
.kicker{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--faint);margin:0 0 6px}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);margin-top:50px}
footer .inner{display:block;max-width:720px;margin:0 auto;padding:24px 24px 44px;font-family:var(--mono);font-size:12.5px;color:var(--faint)}
footer .shell{color:var(--muted)} footer .shell b{color:var(--accent);font-weight:700}
footer p{margin:8px 0 0} footer a{color:var(--muted);text-decoration:none} footer a:hover{color:var(--fg)}

.back{display:inline-block;margin:30px 0 0;font-family:var(--mono);font-size:13px;color:var(--muted);text-decoration:none;border-bottom:0}
.back:hover{color:var(--accent)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ---- Table of content ---- */
.toc{border:1px solid var(--line);border-radius:10px;margin:0 0 30px;background:var(--surface)}
.toc summary{font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em;
  color:var(--faint);padding:12px 16px;cursor:pointer;user-select:none;list-style:none;outline:none}
.toc summary::-webkit-details-marker{display:none}          /* retire le triangle natif */
.toc summary::before{content:"▸";display:inline-block;margin-right:8px;color:var(--faint);transition:transform .15s}
.toc[open] summary::before{transform:rotate(90deg)}
.toc ul{list-style:none;margin:0;padding:0 16px 14px}
.toc ul ul{padding:4px 0 0 16px;margin:0}
.toc ul ul ul{ padding-left:16px; }   /* niveau 3 (h4) -> décalage supplémentaire */
.toc li{margin:5px 0}
.toc a{color:var(--muted);text-decoration:none;font-size:14px;border-bottom:0}
.toc a:hover{color:var(--accent)}

/* defilement doux + compense la navbar sticky */
html{scroll-behavior:smooth}
article h2, article h3, article h4{scroll-margin-top:72px}
.toc a{color:var(--accent);text-decoration:none;font-size:14px;border-bottom:0}
.toc a:hover{color:var(--accent);filter:brightness(1.25)}
.toc ul{counter-reset:toc}
.toc li{counter-increment:toc}
.toc a::before{content:counters(toc, ".") ". ";color:var(--faint);font-family:var(--mono);font-size:12px;margin-right:4px}

/* ---- dropdown catégories dans la navbar ---- */
.nav-dd{ position:relative; display:inline-flex; align-items:center }
.nav-dd-toggle{
  display:inline-flex; align-items:center; gap:5px;
  font-size:13.5px; color:var(--muted);
  background:none; border:0; padding:0; cursor:pointer;
}
.nav-dd-toggle .caret{ font-size:10px; transition:transform .15s }
.nav-dd:hover .nav-dd-toggle, .nav-dd:focus-within .nav-dd-toggle{ color:var(--fg) }
.nav-dd:hover .caret, .nav-dd:focus-within .caret{ transform:rotate(180deg) }

.nav-dd-menu{
  position:absolute; top:100%; right:0; margin-top:10px; min-width:200px;
  background:#000; border:1px solid var(--line); border-radius:10px;
  padding:8px; display:flex; flex-direction:column; gap:2px; z-index:20;
  box-shadow:0 10px 30px rgba(0,0,0,.6);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity .15s, transform .15s, visibility .15s;
}
.nav-dd:hover .nav-dd-menu, .nav-dd:focus-within .nav-dd-menu{
  opacity:1; visibility:visible; transform:translateY(0);
}
/* pont invisible : évite de perdre le survol entre le bouton et le menu */
.nav-dd-menu::before{ content:""; position:absolute; top:-10px; left:0; right:0; height:10px }

.nav-dd-menu a{
  font-family:var(--mono); font-size:12.5px; color:var(--muted);
  text-decoration:none; border-bottom:0; white-space:nowrap;
  padding:7px 10px; border-radius:6px;
}
.nav-dd-menu a:hover{ color:var(--fg); background:rgba(255,255,255,.04) }
.nav-dd-menu .cnt{ color:var(--faint) }

/* ---- lightbox (zoom image au clic) ---- */
article img{ cursor:zoom-in }

.lightbox{
  position:fixed; inset:0; z-index:1000;
  display:flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,.9);
  padding:24px; cursor:zoom-out;
  opacity:0; visibility:hidden; transition:opacity .15s;
}
.lightbox.open{ opacity:1; visibility:visible }
.lightbox img{
  max-width:95vw; max-height:95vh;
  width:auto; height:auto; margin:0; border-radius:8px;
  box-shadow:0 10px 40px rgba(0,0,0,.6);
}

/* ---- reading logo and view ----*/
.meta .rt, .meta .views{ display:inline-flex; align-items:center; gap:5px; }
.meta .rt svg, .meta .views svg{ width:13px; height:13px; margin:0; border-radius:0; display:block; opacity:.8; }

/* ---- bouton remonter en haut ---- */
.to-top{
  position:fixed; right:24px; bottom:24px; z-index:900;
  width:44px; height:44px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--accent); color:#fff; border:0; cursor:pointer;
  box-shadow:0 4px 14px rgba(255,59,59,.45);
  opacity:0; visibility:hidden; transform:translateY(8px);
  transition:opacity .2s, transform .2s, visibility .2s, filter .15s;
}
.to-top.show{ opacity:1; visibility:visible; transform:translateY(0) }
.to-top:hover{ filter:brightness(1.1) }
.to-top svg{ width:20px; height:20px; display:block; margin:0; border-radius:0 }

@media print{ .to-top{ display:none!important } }

/* ---- anchor link (chaîne) sur les titres ---- */
article h2, article h3, article h4{ position:relative; }
.anchor-link{
  position:static; margin-left:.4em; top:50%;
  display:inline-flex; align-items:center; justify-content:center;
  width:0.9em; height:0.9em;
  color:var(--faint); opacity:0; cursor:pointer;
  transition:opacity .15s, color .15s;
  border-bottom:0;
}
article h2:hover .anchor-link,
article h3:hover .anchor-link,
article h4:hover .anchor-link,
.anchor-link:focus-visible{ opacity:1; }
.anchor-link:hover{ color:var(--accent); }
.anchor-link.copied{ color:#6ee7a0; opacity:1; }
.anchor-link svg{ width:90%; height:90%; display:block; margin:0; border-radius:0; }

/* sur mobile, pas de marge négative : on la pose à droite du titre */
@media(max-width:600px){
  .anchor-link{ position:static; transform:none; margin-left:.4em; opacity:.6; }
}

/* ---- vignette de partage dans la liste ---- */
.post-item{ display:flex; gap:20px; align-items:stretch }   /* stretch = même hauteur */
.post-body{ flex:1; min-width:0 }

.post-thumb{
  flex:0 0 200px;                 /* largeur fixe, hauteur libre */
  display:block; align-self:stretch;
  border:1px solid var(--line); border-radius:10px; overflow:hidden;
  /* plus d'aspect-ratio ici */
}
.post-thumb img{
  width:100%; height:100%; object-fit:cover;   /* remplit toute la hauteur du bloc */
  margin:0; border-radius:0; display:block;
  transition:transform .25s, opacity .15s; opacity:.9;
}
.post-item:hover .post-thumb img{ transform:scale(1.04); opacity:1 }

@media(max-width:600px){
  .post-item{ flex-direction:column; align-items:stretch; gap:12px }
  .post-thumb{ flex:0 0 auto; height:180px }   /* hauteur fixe raisonnable sur mobile */
}
/* caché sur mobile, comme les autres extras de nav */
/* @media(max-width:600px){ .nav-dd{ display:none } } */

/* ---- responsive ---- */
@media(max-width:600px){
  /* article p, article li { text-align: left; } */
  h1{font-size:27px}
  .nav{gap:14px} .nav .hide-sm{display:none}
  main{padding:30px 0}
  .brand-text{display:none}
  .right{gap:14px}
  /* la barre d'actions passe en pleine largeur, alignee a gauche */
  .actions{width:100%;margin-left:0;justify-content:flex-start}
}

/* ---- impression propre (fond blanc, sans le chrome du site) ---- */
@page{ margin:18mm; }

@media print{
  .topbar,footer,.actions,.back{display:none!important}
  body{background:#fff;color:#111}
  main{padding:0}
  .wrap{max-width:none;width:auto;margin:0;padding:0}
  article p, article li{ text-align:left; -webkit-hyphens:auto; hyphens:auto }  /* <- la vraie correction */
  h1,h2,h3,article strong,.author{color:#000}
  article p,article li,.deck,.meta{color:#222}
  article a{color:#000;border-bottom:0;text-decoration:underline}
  article h2::after{background:#000}
  pre,code,table,th,td{border-color:#aaa}
  th{background:#eee;color:#000}
  .chip{color:#000!important;background:#eee!important;border-color:#aaa!important}
  pre,blockquote,table,figure,img{break-inside:avoid}
  h2,h3{break-after:avoid}
}