/* ── Variables de thème ─────────────────────────────────────────────────── */

/* Thème clair — Haiku OS */
:root {
    --bg: #dedad4; /* B_PANEL_BACKGROUND_COLOR */
    --bg-alt: #eeeae4; /* zone document, légèrement plus claire */
    --bg-code: #ccc8c2; /* bg légèrement assombri */
    --border: #aca8a2; /* bordure de widget */
    --fg: #000000; /* 14.52:1 sur --bg ✓ */
    --fg-muted: #585450; /*  6.12:1 ✓ */
    --fg-faint: #7a7672; /*  4.61:1 ✓ */
    --link: #6b4800; /* amber foncé — compromis : #ffc43c donne 1.14:1 ✗ sur --bg, ce dérivé donne 5.91:1 ✓ */
    --link-hover: #5c3d00; /*  7.11:1 ✓ */
    --header-bg: #ffc43c; /* jaune doré BeOS/Haiku ✓ */
    --header-fg: #000000; /* 13.21:1 ✓ */
    --tag-bg: #e4e0da;
    --tag-fg: #6b4800; /*  5.91:1 sur tag-bg ✓ */
    --tag-border: #e0a820; /* gold atténué */
    --tag-active-bg: #ffc43c; /* jaune doré BeOS/Haiku */
    --tag-active-fg: #000000; /* 13.21:1 ✓ */
    --code-fg: #1e3060; /* 8.74:1 sur bg-code ✓ */
    --title-fg: #000000;
}

/* Thème sombre — Haiku OS nocturne */
[data-theme="dark"] {
    --bg: #2a2826; /* gris chaud Haiku assombri */
    --bg-alt: #363230; /* bg1 */
    --bg-code: #1e1c1a; /* bg profond */
    --border: #4a4644; /* bordure subtile */
    --fg: #e8e4dc; /* 13.41:1 ✓ */
    --fg-muted: #a09c94; /*  5.61:1 ✓ */
    --fg-faint: #848078; /*  4.42:1 ✓ */
    --link: #ffc43c; /* jaune doré BeOS/Haiku —  9.24:1 sur --bg ✓ */
    --link-hover: #ffd470; /* 10.45:1 ✓ */
    --header-bg: #ffc43c; /* jaune doré BeOS/Haiku */
    --header-fg: #000000; /* 13.21:1 ✓ */
    --tag-bg: #363230;
    --tag-fg: #ffc43c; /*  7.98:1 sur tag-bg ✓ */
    --tag-border: #6a4e10; /* gold assombri */
    --tag-active-bg: #ffc43c; /* jaune doré BeOS/Haiku */
    --tag-active-fg: #000000; /* 13.21:1 ✓ */
    --code-fg: #ffc43c; /* 10.69:1 sur bg-code ✓ */
    --title-fg: #e8e4dc;
}

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

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

html {
    background: var(--bg);
}

body {
    font-family:
        "JetBrains Mono", ui-monospace, "Cascadia Code", "Fira Code", monospace;
    font-size: 0.9rem;
    line-height: 1.6;
    max-width: 740px;
    margin: 0 auto;
    padding: 0 0.75rem 4rem;
    color: var(--fg);
    background: var(--bg);
    transition:
        background 0.2s,
        color 0.2s;
}

/* Liens dans le corps du texte : soulignés et colorés */
a {
    color: var(--link);
    text-decoration: underline;
}
a:hover {
    color: var(--link-hover);
}

/* Navigation, tags, titres de liste : pas de soulignement */
header a,
nav a,
.post-list a,
.post-tags a,
.tag-index a,
.footnote-backref,
.footnote-ref a {
    text-decoration: none;
}

/* ── En-tête — barre orange pleine largeur ───────────────────────────────── */

header {
    background: var(--header-bg);
    margin: 0 -0.75rem 1.25rem;
    padding: 0.35rem 0.75rem;
}

.header-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.35rem;
}

header .site-title {
    font-weight: bold;
    font-size: 0.95rem;
    color: var(--header-fg);
    text-decoration: none;
    white-space: nowrap;
}
header .site-title:hover {
    text-decoration: underline;
    color: var(--header-fg);
}

/* Bouton sélecteur de thème */
#theme-toggle {
    background: rgba(0, 0, 0, 0.15);
    border: none;
    color: var(--header-fg);
    font-size: 0.75rem;
    font-family: inherit;
    padding: 0.1rem 0.4rem;
    cursor: pointer;
    line-height: 1.5;
    white-space: nowrap;
    border-radius: 2px;
}
#theme-toggle:hover {
    background: rgba(0, 0, 0, 0.28);
}

/* ── Navigation tags — dans la barre orange ──────────────────────────────── */

nav[aria-label="Tags"] ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
}

nav[aria-label="Tags"] li a {
    display: inline-block;
    padding: 0.05rem 0.4rem;
    font-size: 0.8rem;
    font-family: inherit;
    color: var(--header-fg);
    text-decoration: none;
    opacity: 0.85;
    border-radius: 2px;
}
nav[aria-label="Tags"] li a:hover {
    opacity: 1;
    background: rgba(0, 0, 0, 0.15);
    text-decoration: none;
    color: var(--header-fg);
}
nav[aria-label="Tags"] li a[aria-current="page"] {
    background: rgba(0, 0, 0, 0.25);
    opacity: 1;
    font-weight: bold;
    color: var(--header-fg);
}

/* ── Titres ──────────────────────────────────────────────────────────────── */

h1,
h2,
h3,
h4 {
    line-height: 1.3;
    margin-top: 1.75rem;
    color: var(--fg);
    font-weight: bold;
}
h1 {
    font-size: 1.2rem;
    margin-top: 0;
}
h2 {
    font-size: 1.05rem;
}
h3 {
    font-size: 0.95rem;
}

article header {
    background: none;
    margin: 0;
    padding: 0;
    margin-bottom: 0.5rem;
}
article header h1 {
    margin-bottom: 0.1rem;
    font-size: 1.3rem;
}

/* ── Adresse de courriel ────────────────────────────────────────────────── */

span.email > span:nth-child(2) {
    display: none;
}

/* ── Méta et tags de post ────────────────────────────────────────────────── */

.post-meta {
    color: var(--fg-muted);
    font-size: 0.8rem;
}

.post-tags {
    margin-top: 0.2rem;
}
.post-tags a {
    display: inline-block;
    padding: 0 0.35rem;
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    font-size: 0.75rem;
    font-family: inherit;
    color: var(--tag-fg);
    text-decoration: none;
    margin-right: 0.2rem;
    border-radius: 2px;
}
.post-tags a:hover {
    color: var(--link-hover);
    border-color: var(--link-hover);
    text-decoration: none;
}

/* ── Liste de posts ──────────────────────────────────────────────────────── */

.post-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.post-list li {
    padding: 0.3rem 0;
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
    border-bottom: 1px solid var(--border);
}
.post-list .post-date {
    color: var(--fg-muted);
    font-size: 0.8rem;
    white-space: nowrap;
    flex-shrink: 0;
}
.post-list a {
    font-size: 0.9rem;
}
.post-list a:visited {
    color: var(--fg-muted);
}

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

code {
    font-size: 0.85rem;
    background: var(--bg-code);
    padding: 0.05rem 0.25rem;
    color: var(--code-fg);
    border-radius: 2px;
}

pre {
    overflow-x: auto;
    padding: 0.75rem;
    font-size: 0.85rem;
    background: var(--bg-code) !important;
    border-left: 3px solid var(--header-bg);
    border-radius: 0;
}
pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* ── Blockquote ──────────────────────────────────────────────────────────── */

blockquote {
    border-left: 3px solid var(--fg-faint);
    margin: 1rem 0;
    padding: 0.1rem 0.75rem;
    color: var(--fg-muted);
}

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

table {
    border-collapse: collapse;
    width: 100%;
    font-size: 0.875rem;
}
th,
td {
    border: 1px solid var(--border);
    padding: 0.3rem 0.6rem;
    text-align: left;
}
th {
    background: var(--bg-alt);
    font-weight: bold;
}
tr:nth-child(even) {
    background: var(--bg-alt);
}

/* ── Séparateur ──────────────────────────────────────────────────────────── */

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

/* ── Notes de bas de page ────────────────────────────────────────────────── */

.footnote {
    margin-top: 2rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    font-size: 0.8rem;
    color: var(--fg-muted);
}
.footnote > hr {
    display: none;
}
.footnote ol {
    padding-left: 1.1rem;
    margin: 0;
}
.footnote li {
    margin-bottom: 0.2rem;
}

.footnote-ref a {
    text-decoration: none;
    font-size: 0.7rem;
    vertical-align: super;
    line-height: 0;
    padding: 0 0.1rem;
    color: var(--fg-muted);
}
.footnote-ref a:hover {
    color: var(--link-hover);
}

.footnote-backref {
    text-decoration: none;
    margin-left: 0.3rem;
    color: var(--fg-faint);
    font-size: 0.75rem;
}
.footnote-backref:hover {
    color: var(--link-hover);
}

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

footer {
    border-top: 1px solid var(--border);
    margin-top: 2.5rem;
    padding-top: 0.5rem;
    font-size: 0.78rem;
    color: var(--fg-muted);
    text-align: center;
}

/* ── Index des tags ──────────────────────────────────────────────────────── */

.tag-index {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}
.tag-index li a {
    display: inline-block;
    padding: 0.1rem 0.5rem;
    background: var(--tag-bg);
    border: 1px solid var(--tag-border);
    border-radius: 2px;
    font-family: inherit;
    font-size: 0.85rem;
    color: var(--tag-fg);
    text-decoration: none;
}
.tag-index li a:hover {
    color: var(--link-hover);
    border-color: var(--link-hover);
    text-decoration: none;
}
.tag-index .count {
    color: var(--fg-muted);
    font-size: 0.75rem;
    margin-left: 0.2rem;
}