/* ===== Reset minimal ===== */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }

/* ===== Variables ===== */
:root {
  --bg: #fefefe;
  --text: #1a1a1a;
  --sidebar-bg: #f7f7f7;
  --sidebar-border: #e5e5e5;
  --link: #0f5fa6;
  --muted: #6b6b6b;
  --tap-flash: rgba(15, 95, 166, 0.15);
}

html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Charter', 'Iowan Old Style', Georgia, serif;
  font-size: 17px;
  line-height: 1.65;
  -webkit-tap-highlight-color: var(--tap-flash);
}

a { color: var(--link); text-decoration: underline; text-underline-offset: 2px; }
a:hover, a:focus-visible { text-decoration-thickness: 2px; }

/* ===== Desktop layout (≥ 768px) ===== */
.nav-toggle { display: none; }

.sidebar {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  width: 280px;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-border);
  overflow-y: auto;
  padding: 24px 20px;
  font-family: -apple-system, system-ui, sans-serif;
  font-size: 14px;
}

.sidebar-header { margin-bottom: 24px; }
.site-title { font-size: 18px; margin: 0 0 4px; font-weight: 600; }
.site-subtitle { margin: 0; color: var(--muted); font-size: 13px; }

.section-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 24px 0 8px; font-weight: 600; }

.filter-list, .brief-list { list-style: none; padding: 0; margin: 0; }

.filter-list li label {
  display: flex; align-items: center; gap: 8px;
  min-height: 28px; padding: 2px 4px;
  cursor: pointer;
}
.filter-checkbox { width: 16px; height: 16px; cursor: pointer; }

.brief-item a {
  display: block;
  min-height: 44px; padding: 10px 8px;
  color: var(--text); text-decoration: none;
  border-radius: 4px;
  word-break: break-word;
}
.brief-item a:hover, .brief-item a:focus-visible { background: rgba(0,0,0,0.04); }
.brief-item a[aria-current="page"] { background: rgba(15,95,166,0.08); font-weight: 600; }

.brief-date { display: block; font-size: 13px; color: var(--muted); }
.brief-angle { font-size: 14px; }
.brief-no-angle { float: right; opacity: 0.5; }

.brief-item.hidden { display: none; }

.content {
  margin-left: 280px;
  padding: 48px 32px;
  max-width: 720px;
}

.brief-header { margin-bottom: 32px; padding-bottom: 16px; border-bottom: 1px solid var(--sidebar-border); }
.brief-date-display { color: var(--muted); margin: 0 0 4px; font-size: 14px; font-family: -apple-system, system-ui, sans-serif; }
.brief-angle-display { margin: 0; font-size: 28px; font-weight: 600; }
.brief-body h1 { font-size: 24px; margin-top: 32px; }
.brief-body h2 { font-size: 20px; margin-top: 28px; }
.brief-body h3 { font-size: 18px; margin-top: 24px; }
.brief-body p { margin: 16px 0; }
.brief-body code { background: var(--sidebar-bg); padding: 2px 4px; border-radius: 3px; font-size: 0.9em; }
.brief-body pre { background: var(--sidebar-bg); padding: 12px; border-radius: 4px; overflow-x: auto; }
.brief-body blockquote { border-left: 3px solid var(--sidebar-border); margin: 16px 0; padding-left: 16px; color: var(--muted); }
.brief-body table { border-collapse: collapse; margin: 16px 0; }
.brief-body th, .brief-body td { border: 1px solid var(--sidebar-border); padding: 6px 12px; }

/* ===== Mobile (< 768px) ===== */
@media (max-width: 767px) {
  body { font-size: 16px; line-height: 1.6; }

  .nav-toggle {
    display: block;
    position: sticky; top: 0; z-index: 10;
    width: 100%;
    padding: 14px max(16px, env(safe-area-inset-left)) 14px max(16px, env(safe-area-inset-left));
    background: var(--bg);
    border-bottom: 1px solid var(--sidebar-border);
    text-align: left;
    font-family: -apple-system, system-ui, sans-serif;
    font-size: 16px; font-weight: 600;
    border: 0;
    border-bottom: 1px solid var(--sidebar-border);
    cursor: pointer;
    min-height: 48px;
  }

  .sidebar {
    position: static;
    width: 100%;
    border-right: 0;
    border-bottom: 1px solid var(--sidebar-border);
    font-size: 15px;
    display: none;
  }
  .sidebar.is-open { display: block; }

  .content {
    margin-left: 0;
    padding: 24px 16px;
    max-width: 100%;
  }

  .brief-angle-display { font-size: 24px; }

  /* Restore tap-friendly filters on mobile (44px touch target) */
  .filter-list li label { min-height: 44px; padding: 8px 4px; }
}

/* ===== Très petits écrans (< 380px) ===== */
@media (max-width: 379px) {
  .content { padding: 24px 12px; }
  .filter-list li label { font-size: 13px; }
}