/* ==========================================================================
   book-neutral.css
   Mise en page neutre inspirée du thème Hugo "Book"
   3 colonnes : menu latéral / contenu / sommaire, responsive.
   ========================================================================== */

:root {
  --bk-bg: #ffffff;
  --bk-bg-menu: #fafafa;
  --bk-border: #e6e6e6;
  --bk-text: #333333;
  --bk-text-muted: #6f6f6f;
  --bk-accent: #4054b2;
  --bk-accent-hover: #2f3f94;
  --bk-radius: 4px;
/*  --bk-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --bk-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  */
  --bk-font: Inter, SF Pro, Segoe UI, Roboto, Oxygen, Ubuntu, Helvetica Neue, Helvetica, Arial, sans-serif;
  --bk-font-mono: Inconsolata, Hack, SF Mono, Roboto Mono, Source Code Pro, Ubuntu Mono, monospace;
  --bk-menu-width: 260px;
  --bk-toc-width: 220px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bk-bg);
  color: var(--bk-text);
  font-family: var(--bk-font);
  line-height: 1.6;
}

a { color: var(--bk-accent); }
a:hover { color: var(--bk-accent-hover); }

.book-menu-control { display: none; }

/* ---- Structure globale en grille 3 colonnes ---- */

.book-container {
  display: grid;
  grid-template-columns: var(--bk-menu-width) minmax(0, 1fr) var(--bk-toc-width);
  min-height: 100vh;
}

.book-menu-overlay { display: none; }

/* ---- Colonne menu ---- */

.book-menu {
  border-right: 1px solid var(--bk-border);
  background: var(--bk-bg-menu);
}

.book-menu__inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 1.25rem 1rem;
}

.book-brand {
  /* font-weight: 700;
  font-size: 1.05rem; */
  margin-bottom: 1rem;
  font-size: 16px;
  font-weight: 900;
  line-height: 1.5;
  letter-spacing: 2px;
  text-align: center;
}

.book-brand a {
  color: var(--bk-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.book-brand__logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  flex-shrink: 0;
}

.book-brand__title {
  line-height: 1.2;
}

.book-menu__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.book-menu__list .book-menu__list {
  padding-left: 0.9rem;
  margin-top: 0.2rem;
}

.book-menu__item { margin: 0.15rem 0; }

.book-menu__link {
  display: block;
  padding: 0.3rem 0.4rem;
  border-radius: var(--bk-radius);
  color: var(--bk-text);
  text-decoration: none;
  font-size: 0.9rem;
}

.book-menu__link:hover {
  background: var(--bk-border);
}

.book-menu__link--sub {
  font-size: 0.85rem;
  color: var(--bk-text-muted);
}

.book-menu__item.is-current > .book-menu__link {
  color: var(--bk-accent);
  font-weight: 600;
}

/* ---- Colonne contenu ---- */

.book-page-wrapper {
  min-width: 0;
  padding: 2rem 2.5rem 4rem;
}

.book-topbar {
  display: none;
  align-items: center;
  gap: 0.75rem;
  padding-bottom: 1rem;
}

.book-breadcrumb {
  font-size: 0.8rem;
  color: var(--bk-text-muted);
  margin-bottom: 0.5rem;
}

.book-breadcrumb a { color: var(--bk-text-muted); }
.book-breadcrumb__sep { margin: 0 0.35rem; }

.book-title {
  font-size: 1.9rem;
  font-weight: 700;
  margin: 0 0 1rem;
  letter-spacing: -0.01em;
}

.book-intro, .book-content {
  font-size: 0.95rem;
}

.book-content pre {
  background: var(--bk-bg-menu);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius);
  padding: 0.85rem 1rem;
  overflow-x: auto;
  font-family: var(--bk-font-mono);
  font-size: 0.85rem;
}

.book-content code {
  font-family: var(--bk-font-mono);
  font-size: 0.85em;
}

/* Liste des articles */

.book-article-list {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  border-top: 1px solid var(--bk-border);
}

.book-article-card {
  border-bottom: 1px solid var(--bk-border);
  padding: 0.9rem 0;
}

.book-article-card__link {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  text-decoration: none;
  font-family: var(--bk-font-mono);
  font-weight: 500;
}

.book-article-card__link:hover .book-article-card__title {
  text-decoration: underline;
}

.book-article-card__icon { opacity: 0.7; font-size: 0.9rem; }

.book-article-card__desc {
  margin: 0.35rem 0 0;
  color: var(--bk-text-muted);
  font-size: 0.875rem;
  font-family: var(--bk-font);
}

.book-article-card__meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--bk-text-muted);
}

.book-tag {
  background: var(--bk-bg-menu);
  border: 1px solid var(--bk-border);
  border-radius: var(--bk-radius);
  padding: 0 0.4rem;
}

.book-article-list__empty {
  color: var(--bk-text-muted);
  font-style: italic;
}

.book-article-date {
  color: var(--bk-text-muted);
  font-size: 0.8rem;
  margin: -0.5rem 0 1.5rem;
}

/* Pagination précédent/suivant */

.book-pager {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 2.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bk-border);
  font-size: 0.85rem;
}

.book-pager a { text-decoration: none; }
.book-pager a:hover { text-decoration: underline; }

/* Pied de page */

.book-footer {
  margin-top: 3rem;
  padding-top: 1rem;
  border-top: 1px solid var(--bk-border);
  font-size: 0.75rem;
  color: var(--bk-text-muted);
}

/* ---- Colonne sommaire (table des matières) ---- */

.book-toc {
  border-left: 1px solid var(--bk-border);
}

.book-toc__inner {
  position: sticky;
  top: 0;
  max-height: 100vh;
  overflow-y: auto;
  padding: 1.5rem 1rem;
  font-size: 0.8rem;
}

.book-toc__title {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--bk-text-muted);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.book-toc__inner nav ul {
  list-style: none;
  margin: 0;
  padding-left: 0.7rem;
}

.book-toc__inner nav > ul { padding-left: 0; }

.book-toc__inner a {
  color: var(--bk-text-muted);
  text-decoration: none;
  display: block;
  padding: 0.15rem 0;
}

.book-toc__inner a:hover { color: var(--bk-accent); }

/* ---- Responsive ---- */

@media (max-width: 1100px) {
  .book-container {
    grid-template-columns: var(--bk-menu-width) minmax(0, 1fr);
  }
  .book-toc { display: none; }
}

@media (max-width: 800px) {
  .book-container {
    grid-template-columns: minmax(0, 1fr);
  }

  .book-menu {
    position: fixed;
    inset: 0 25% 0 0;
    z-index: 20;
    transform: translateX(-100%);
    transition: transform 0.2s ease;
  }

  .book-topbar { display: flex; }

  .book-menu-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 15;
  }

  .book-menu-control:checked ~ .book-container .book-menu {
    transform: translateX(0);
  }

  .book-menu-control:checked ~ .book-container .book-menu-overlay {
    display: block;
  }

  .book-topbar__toggle {
    display: inline-flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    padding: 0.25rem;
  }

  .book-topbar__toggle span {
    width: 20px;
    height: 2px;
    background: var(--bk-text);
    display: block;
  }

  .book-topbar__title {
    font-weight: 600;
    font-size: 0.95rem;
  }

  .book-page-wrapper {
    padding: 1rem 1.25rem 3rem;
  }
}

/* Mode sombre neutre, suit la préférence système */
@media (prefers-color-scheme: dark) {
  :root {
    --bk-bg: #1e1e1e;
    --bk-bg-menu: #242424;
    --bk-border: #363636;
    --bk-text: #e0e0e0;
    --bk-text-muted: #9a9a9a;
    --bk-accent: #8c9eff;
    --bk-accent-hover: #aab8ff;
  }
}