/* ── Reset ───────────────────────────────────────────── */

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Variables ───────────────────────────────────────── */

:root {
  --bg:           #ffffff;
  --bg-2:         #f9f8f6;
  --text:         #111111;
  --text-muted:   #737373;
  --border:       #e8e5df;
  --accent:       #8000ff;
  --accent-soft:  #f2e8ff;

  --font-serif: Georgia, 'Times New Roman', serif;
  --font-sans:  -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono:  'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;

  --max-w:  860px;
  --nav-h:  56px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg:           #0e0e0e;
  --bg-2:         #1a1a1a;
  --text:         #e6e6e6;
  --text-muted:   #888888;
  --border:       #2e2e2e;
  --accent:       #a855f7;
  --accent-soft:  #1e0840;

  color-scheme: dark;
}

/* ── Base ────────────────────────────────────────────── */

body {
  background:  var(--bg);
  color:       var(--text);
  font-family: var(--font-serif);
  font-size:   18px;
  line-height: 1.8;
  transition:  background 0.2s, color 0.2s;
}

.container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 1.5rem;
}

/* ── Navigation ──────────────────────────────────────── */

.site-nav {
  background:    var(--bg);
  border-bottom: 1px solid var(--border);
  position:      sticky;
  top:           0;
  z-index:       100;
  height:        var(--nav-h);
  transition:    background 0.2s, border-color 0.2s;
}

@supports (backdrop-filter: blur(8px)) {
  .site-nav { backdrop-filter: blur(8px); }
  :root             { --nav-bg-a: rgba(255,255,255,0.88); }
  [data-theme="dark"] { --nav-bg-a: rgba(14,14,14,0.88); }
  .site-nav { background: var(--nav-bg-a); }
}

.nav-container {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  height:          100%;
  gap:             1rem;
}

/* Logo / nom du site */
.site-logo {
  font-family:     var(--font-sans);
  font-size:       1.05rem;
  font-weight:     800;
  letter-spacing:  -0.02em;
  color:           var(--text);
  text-decoration: none;
  white-space:     nowrap;
  flex-shrink:     0;
}
.site-logo:hover { color: var(--accent); }

/* Liens de navigation */
.nav-links ul {
  list-style: none;
  display:    flex;
  margin:     0;
  padding:    0;
}
.nav-links li { margin: 0; }

.nav-links a {
  display:         block;
  padding:         0 0.75rem;
  line-height:     var(--nav-h);
  font-family:     var(--font-sans);
  font-size:       0.78rem;
  font-weight:     500;
  letter-spacing:  0.06em;
  text-transform:  uppercase;
  color:           var(--text-muted);
  text-decoration: none;
  transition:      color 0.15s;
  white-space:     nowrap;
}
.nav-links a:hover        { color: var(--text); }
.nav-links a.external::after { content: ' \u2197'; font-size: 0.75em; }

/* Bouton thème */
.theme-toggle {
  background:  none;
  border:      1px solid var(--border);
  border-radius: 6px;
  width:       30px;
  height:      30px;
  cursor:      pointer;
  display:     flex;
  align-items: center;
  justify-content: center;
  font-size:   0.9rem;
  color:       var(--text-muted);
  flex-shrink: 0;
  transition:  border-color 0.15s, color 0.15s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }

/* ── Tagline ─────────────────────────────────────────── */

.site-tagline {
  padding: 1.4rem 0 0;
}
.site-tagline p {
  font-family: var(--font-sans);
  font-size:   0.95rem;
  color:       var(--text-muted);
  margin:      0 0 1.3rem;
  line-height: 1.5;
}

.tagline-divider-wrap { }
.tagline-divider {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     0;
}

/* ── Contenu ─────────────────────────────────────────── */

.site-content {
  padding:    2.5rem 0 5rem;
  min-height: calc(100vh - 180px);
}

/* ── Section labels (À la une / Récents) ─────────────── */

.section-label {
  font-family:    var(--font-sans);
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--text-muted);
  border-bottom:  1px solid var(--border);
  padding-bottom: 0.65rem;
  margin-bottom:  1.5rem;
}

/* ── Featured card ───────────────────────────────────── */

.home-featured { margin-bottom: 3.5rem; }

.featured-card {
  border:        1px solid var(--border);
  border-radius: 10px;
  overflow:      hidden;
  transition:    border-color 0.15s;
}
.featured-card:hover { border-color: var(--accent); }

.featured-card .card-image img {
  width:        100%;
  height:       300px;
  object-fit:   cover;
  display:      block;
  margin:       0;
  border-radius: 0;
}

.featured-card .card-body { padding: 1.6rem 1.8rem 1.8rem; }

.featured-title {
  font-family:    var(--font-sans);
  font-size:      1.85rem;
  font-weight:    800;
  letter-spacing: -0.025em;
  line-height:    1.18;
  margin:         0.5rem 0 0.8rem;
}
.featured-title a { color: var(--text); text-decoration: none; }
.featured-title a:hover { color: var(--accent); }

/* ── Articles grid (récents) ─────────────────────────── */

.home-recent { margin-bottom: 2rem; }

.articles-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   1.25rem;
}

.article-card {
  border:        1px solid var(--border);
  border-radius: 8px;
  overflow:      hidden;
  transition:    border-color 0.15s;
}
.article-card:hover { border-color: var(--accent); }

.article-card .card-image img {
  width:        100%;
  height:       160px;
  object-fit:   cover;
  display:      block;
  margin:       0;
  border-radius: 0;
}

.article-card .card-body { padding: 1rem 1.1rem 1.2rem; }

.card-title {
  font-family:    var(--font-sans);
  font-size:      1rem;
  font-weight:    700;
  letter-spacing: -0.01em;
  line-height:    1.3;
  margin:         0.4rem 0 0.5rem;
}
.card-title a { color: var(--text); text-decoration: none; }
.card-title a:hover { color: var(--accent); }

/* ── Card meta (partagé) ─────────────────────────────── */

.card-meta {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0.3rem;
  font-family: var(--font-sans);
  font-size:   0.76rem;
  color:       var(--text-muted);
  margin-bottom: 0.1rem;
}
.card-sep    { color: var(--border); }
.card-author { font-weight: 600; color: var(--text); }
.card-date   { font-variant-numeric: tabular-nums; }

.card-category {
  background:     var(--accent-soft);
  color:          var(--accent);
  padding:        0.15em 0.6em;
  border-radius:  4px;
  font-size:      0.7rem;
  font-weight:    700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.card-excerpt {
  font-family:        var(--font-sans);
  font-size:          0.86rem;
  color:              var(--text-muted);
  line-height:        1.5;
  margin:             0.4rem 0 1rem;
  display:            -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow:           hidden;
}

.card-readmore {
  display:         inline-block;
  font-family:     var(--font-sans);
  font-size:       0.84rem;
  font-weight:     600;
  color:           var(--accent);
  text-decoration: none;
}
.card-readmore:hover { text-decoration: underline; }

.home-intro { margin-bottom: 2.5rem; }
.no-articles { font-family: var(--font-sans); color: var(--text-muted); }

/* ── Métadonnées article ─────────────────────────────── */

.article-meta {
  margin-bottom:  2.5rem;
  padding-bottom: 1.5rem;
  border-bottom:  1px solid var(--border);
}

.article-title {
  font-family:    var(--font-sans);
  font-size:      2.5rem;
  font-weight:    800;
  letter-spacing: -0.035em;
  line-height:    1.12;
  margin:         0 0 0.7rem;
}

.article-info {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         0.4rem;
  font-family: var(--font-sans);
  font-size:   0.83rem;
  color:       var(--text-muted);
}
.article-sep        { color: var(--border); }
.article-author     { font-weight: 600; color: var(--text); }
.article-categories {
  background:     var(--accent-soft);
  color:          var(--accent);
  padding:        0.2em 0.75em;
  border-radius:  20px;
  font-size:      0.74rem;
  font-weight:    700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ── Ancres de titre ─────────────────────────────────── */

.heading-anchor {
  display:         inline-block;
  margin-left:     0.35em;
  font-size:       0.7em;
  font-weight:     400;
  color:           var(--accent);
  text-decoration: none;
  opacity:         0;
  transition:      opacity 0.15s;
  vertical-align:  middle;
  user-select:     none;
}

h1:hover .heading-anchor,
h2:hover .heading-anchor,
h3:hover .heading-anchor,
h4:hover .heading-anchor { opacity: 0.6; }

.heading-anchor:hover { opacity: 1 !important; }

/* ── Typographie ─────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1.25;
  color:       var(--text);
  margin:      2em 0 0.55em;
}
h1 { font-size: 2.2rem;  margin-top: 0; letter-spacing: -0.03em; }
h2 { font-size: 1.45rem; letter-spacing: -0.02em; border-bottom: 1px solid var(--border); padding-bottom: 0.4em; }
h3 { font-size: 1.2rem; }
h4 { font-size: 1rem; }

p { margin: 0 0 1.2em; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

ul, ol { padding-left: 1.6em; margin: 0 0 1.2em; }
li     { margin: 0.35em 0; }
li input[type="checkbox"] { margin-right: 0.4em; }

blockquote {
  border-left:   3px solid var(--accent);
  padding:       0.8em 1.3em;
  margin:        1.5em 0;
  background:    var(--accent-soft);
  border-radius: 0 6px 6px 0;
}
blockquote p { margin: 0; }

hr {
  border:     none;
  border-top: 1px solid var(--border);
  margin:     2.5em 0;
}

/* ── Code ────────────────────────────────────────────── */

code {
  font-family:   var(--font-mono);
  font-size:     0.85em;
  background:    var(--bg-2);
  padding:       0.15em 0.45em;
  border-radius: 4px;
  border:        1px solid var(--border);
}

pre {
  background:    var(--bg-2);
  border:        1px solid var(--border);
  border-radius: 8px;
  padding:       1.2em 1.5em;
  overflow-x:    auto;
  margin:        1.5em 0;
  line-height:   1.55;
}
pre code { background: none; border: none; padding: 0; font-size: 0.875rem; }

[data-theme="dark"] .hljs { background: var(--bg-2); }

/* ── Images ──────────────────────────────────────────── */

img {
  max-width:     100%;
  height:        auto;
  border-radius: 6px;
  display:       block;
  margin:        1.5em auto;
}
figure { margin: 1.5em 0; text-align: center; }
figcaption { font-family: var(--font-sans); font-size: 0.82rem; color: var(--text-muted); margin-top: 0.4em; }

/* ── Tableaux ────────────────────────────────────────── */

table { width: 100%; border-collapse: collapse; margin: 1.5em 0; font-family: var(--font-sans); font-size: 0.9rem; }
th, td { border: 1px solid var(--border); padding: 0.65em 1em; text-align: left; }
th { background: var(--bg-2); font-weight: 600; }
tr:nth-child(even) td { background: var(--bg-2); }

/* ── Pied de page ────────────────────────────────────── */

.site-footer {
  background:  var(--bg-2);
  border-top:  1px solid var(--border);
  padding:     2rem 0;
  font-family: var(--font-sans);
  font-size:   0.85rem;
  color:       var(--text-muted);
}
.site-footer p   { margin: 0; }
.site-footer a   { color: var(--text-muted); text-decoration: underline; }
.site-footer a:hover { color: var(--accent); }

/* ── Responsive ──────────────────────────────────────── */

@media (max-width: 640px) {
  body            { font-size: 16px; }
  h1              { font-size: 1.7rem; }
  .article-title  { font-size: 1.9rem; }
  .featured-title { font-size: 1.5rem; }
  .container      { padding: 0 1rem; }
  .articles-grid  { grid-template-columns: 1fr; }
  .nav-links a    { padding: 0 0.5rem; font-size: 0.72rem; }
}