/* ========= Wander Lines — Blog (content-only) ========= */
/* Utilise les variables globales si présentes, sinon fallbacks locaux */
:root{
  --blog-ink: var(--ink, #1a1a1a);
  --blog-paper: var(--paper, #ffffff);
  --blog-muted: var(--muted, #6b6b6b);
  --blog-primary: var(--primary, #9c7bff);
  --blog-primary-ink: var(--primary-ink, #2b205a);
  --blog-accent: var(--accent, #ffb86b);
  --blog-ring: var(--ring, rgba(156,123,255,.35));
  --blog-shadow: var(--shadow, 0 10px 25px rgba(0,0,0,.06));
  --blog-radius: var(--radius, 18px);
  --blog-radius-xl: var(--radius-xl, 28px);
  --blog-maxw: 860px;
}

/* ====== Layout article ====== */
.post-wrap{max-width:var(--blog-maxw);margin:0 auto;padding:clamp(20px,3vw,36px)}
.post-wrap article{
  background:var(--blog-paper);
  border:1px solid color-mix(in oklab,var(--blog-ink) 8%, transparent);
  border-radius:var(--blog-radius-xl);
  box-shadow:var(--blog-shadow);
  padding:clamp(18px,3vw,36px);
}

/* ====== Typographie ====== */
.post-wrap article h1{
  font-size:clamp(28px,5vw,40px); line-height:1.12; margin:10px 0 8px;
  background:linear-gradient(90deg,var(--blog-accent),var(--blog-primary));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.post-wrap article h2{margin:22px 0 8px; font-size:clamp(20px,3.2vw,28px)}
.post-wrap article p,
.post-wrap article li{font-size:18px; line-height:1.6; color:var(--blog-ink)}
.post-wrap .meta-row{display:flex; gap:14px; flex-wrap:wrap; color:var(--blog-muted); font-size:14px}
.post-wrap hr{border:0; border-top:1px solid color-mix(in oklab,var(--blog-ink) 10%, transparent); margin:18px 0}

/* Lead + lettrine sur écrans larges */
.post-wrap article>h1 + p{font-size:clamp(18px,2.2vw,20px); color:var(--blog-muted)}
@media (min-width: 700px){
  .post-wrap article>h1 + p::first-letter{
    float:left; font-size:3.2em; line-height:.9; padding-right:.08em; font-weight:700;
    color:color-mix(in oklab,var(--blog-primary) 80%, black 0%);
  }
}

/* ====== Liens (soulignement animé) ====== */
.post-wrap a{
  text-decoration:none; color:inherit;
  background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 2px; background-position:0 100%; background-repeat:no-repeat;
  transition:background-size .2s ease;
}
.post-wrap a:hover{ background-size:100% 2px }

/* ====== Table des matières ====== */
.toc{
  background:color-mix(in oklab,var(--blog-primary) 12%, transparent);
  border:1px solid color-mix(in oklab,var(--blog-primary) 25%, transparent);
  border-radius:var(--blog-radius);
  padding:12px; margin:16px 0;
}
.toc strong{display:block; margin-bottom:6px}
.toc a{display:inline-block; font-weight:700; padding:6px 8px; border-radius:8px}
.toc a:hover{background:#fff}

/* ====== Notes / Callouts ====== */
.note{
  background:color-mix(in oklab,var(--blog-primary) 12%, transparent);
  border:1px solid color-mix(in oklab,var(--blog-primary) 25%, transparent);
  padding:14px; border-radius:12px;
}

/* ====== Citations ====== */
blockquote{
  margin:16px 0; padding:14px 16px; border-left:4px solid var(--blog-primary);
  background:color-mix(in oklab,var(--blog-primary) 10%, transparent);
  border-radius:12px;
}
.pullquote{
  font-size:clamp(18px,2.4vw,22px); line-height:1.4; padding:12px 16px;
  border:1px solid color-mix(in oklab,var(--blog-ink) 10%, transparent);
  border-radius:14px; box-shadow:var(--blog-shadow); background:var(--blog-paper);
}

/* ====== Images ====== */
.article-hero{margin:12px 0 16px}
.article-hero img, .post-wrap article img{
  width:100%; height:auto; display:block;
  border:1px solid color-mix(in oklab,var(--blog-ink) 8%, transparent);
  border-radius:16px;
}
figure{margin:18px 0}
figcaption{font-size:13px; color:var(--blog-muted); text-align:center; margin-top:6px}

/* ====== Listes ====== */
.post-wrap article ul, .post-wrap article ol{ padding-left:1.2em }
.post-wrap article li::marker{ color:color-mix(in oklab,var(--blog-primary) 70%, black 0%) }

/* ====== Boutons / CTA ====== */
.cta{margin:24px 0; display:flex; gap:10px; flex-wrap:wrap}
.cta a{
  padding:10px 14px; border-radius:12px; font-weight:700;
  background:linear-gradient(180deg,var(--blog-primary),color-mix(in oklab,var(--blog-primary) 80%, black));
  color:var(--blog-primary-ink);
  border:1px solid color-mix(in oklab,var(--blog-primary) 45%, black);
  box-shadow:var(--blog-shadow);
  transition:transform .15s ease, box-shadow .15s ease;
}
.cta a:hover{ transform:translateY(-2px); box-shadow:0 8px 20px var(--blog-ring) }

/* ====== Code / Tables ====== */
code{background:color-mix(in oklab,var(--blog-ink) 6%, transparent); padding:.15em .35em; border-radius:6px}
pre{background:color-mix(in oklab,var(--blog-ink) 6%, transparent); padding:12px; border-radius:10px; overflow:auto}
table{width:100%; border-collapse:collapse; margin:16px 0; font-size:16px}
th, td{padding:10px; border:1px solid color-mix(in oklab,var(--blog-ink) 10%, transparent)}
thead th{background:color-mix(in oklab,var(--blog-primary) 14%, transparent); text-align:left}

/* ====== Barre de progression de lecture ====== */
#read-progress{
  position:fixed; left:0; top:0; height:4px; width:0;
  background:linear-gradient(90deg,var(--blog-accent),var(--blog-primary));
  z-index:1000;
}

/* ====== Accessibilité ====== */
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}
.skip-link:focus{left:8px;top:8px;width:auto;height:auto;background:#fff;padding:8px;border-radius:8px;border:1px solid #ddd}

/* ====== Mode sombre (si data-theme=dark) ====== */
[data-theme="dark"] .toc{ background:color-mix(in oklab,var(--blog-primary) 18%, transparent) }
[data-theme="dark"] blockquote{ background:color-mix(in oklab,var(--blog-primary) 16%, transparent) }
[data-theme="dark"] pre, [data-theme="dark"] code{
  background:color-mix(in oklab,var(--blog-ink) 20%, transparent)
}

.theme-toggle{
  position:fixed; right:16px; bottom:16px; z-index:1000;
  width:50px; height:50px; border-radius:50%;
  background:var(--paper); color:inherit; cursor:pointer;
  border:1px solid color-mix(in oklab, var(--ink) 10%, transparent);
  box-shadow: var(--shadow); font-size:20px; display:grid; place-items:center;
  transition:transform .2s ease, box-shadow .2s ease;
}
.theme-toggle:hover{ transform:scale(1.08); box-shadow:0 8px 20px var(--ring) }
@media (max-width:480px){ .theme-toggle{ width:44px; height:44px; font-size:18px; right:12px; bottom:12px } }

/* Évite la coupe du logo dans tous les headers/footers */
:is(header, footer) .logo{
  white-space: normal;
  overflow: visible !important;
  text-overflow: clip !important;
  overflow-wrap: anywhere;
  line-height: 1.2;
}
/* avant : header .logo, header nav a, .cta a, ...  */
header nav a,
.cta a,
.link,
.btn,
.actions .btn {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow-wrap: normal;
  word-break: normal;
  line-height: 1.15;
}
@font-face{
  font-family:"Railey";
  src:url("/fonts/Railey.woff2") format("woff2"),
      url("/fonts/Railey.woff")  format("woff");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

/* Appliquer la police au logo des headers/footers du blog */
:is(header, footer) .logo,
.site-title {                 /* ajoute ton sélecteur titre si différent */
  font-family:"Railey", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight:400;
  font-synthesis:none;
  letter-spacing:.2px;
}


/* Unstick header & hero inside articles */
.post-wrap article > header,
.post-wrap .article-hero{
  position: static !important;
  top: auto !important;
}