/* ==========================================================================
   Carnet — thème typographique pour un blog de littérature
   Feuille unique, servie telle quelle (pas d'étape de compilation).
   La CSS des cartes Koenig est fournie par Ghost (card_assets: true).
   ========================================================================== */

/* 1. Polices — Lora, auto-hébergée (OFL)
   ========================================================================== */
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('../fonts/lora-italic.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lora-700.woff2') format('woff2');
}
@font-face {
    font-family: 'Lora';
    font-style: italic;
    font-weight: 700;
    font-display: swap;
    src: url('../fonts/lora-700italic.woff2') format('woff2');
}

/* 2. Variables
   ========================================================================== */
:root {
    --serif: 'Lora', Iowan Old Style, Palatino, 'Palatino Linotype', Georgia, serif;
    --sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

    --accent: #8C2F39;
    --accent-lien: #8C2F39;

    --bg: #FBFAF7;
    --bg-doux: #F4F1EA;
    --texte: #1C1A17;
    --texte-doux: #4A453D;
    --muet: #6B655C;
    --filet: #E2DDD3;
    --selection: #F2DCDA;

    --largeur-lecture: 34rem;
    --largeur-page: 46rem;
    --largeur-large: 62rem;
    --gouttiere: 1.5rem;

    --rythme: 1.7;
    color-scheme: light;
}

/* Mode sombre : automatique selon le système… */
@media (prefers-color-scheme: dark) {
    html[data-apparence="auto"] {
        --bg: #16150F;
        --bg-doux: #201E17;
        --texte: #E9E4D9;
        --texte-doux: #C9C2B4;
        --muet: #98917F;
        --filet: #33302A;
        --selection: #4A2A2C;
        --accent-lien: #E0959B;
        --accent-lien: color-mix(in srgb, var(--accent) 45%, #FFDCD6);
        color-scheme: dark;
    }
}
/* …ou forcé par le lecteur / le réglage du thème */
html[data-apparence="sombre"] {
    --bg: #16150F;
    --bg-doux: #201E17;
    --texte: #E9E4D9;
    --texte-doux: #C9C2B4;
    --muet: #98917F;
    --filet: #33302A;
    --selection: #4A2A2C;
    --accent-lien: #E0959B;
    --accent-lien: color-mix(in srgb, var(--accent) 45%, #FFDCD6);
    color-scheme: dark;
}

/* 3. Base
   ========================================================================== */
*, *::before, *::after { box-sizing: border-box; }

html {
    font-size: 17px;
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    scroll-padding-top: 2rem;
}
@media (min-width: 48em) { html { font-size: 18px; } }

body {
    margin: 0;
    background: var(--bg);
    color: var(--texte);
    font-family: var(--gh-font-body, var(--serif));
    font-size: 1rem;
    line-height: var(--rythme);
    font-kerning: normal;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
}

::selection { background: var(--selection); }

img { max-width: 100%; height: auto; }

a { color: inherit; text-decoration-color: var(--filet); text-underline-offset: .18em; }
a:hover { color: var(--accent-lien); text-decoration-color: currentColor; }

:focus-visible {
    outline: 2px solid var(--accent-lien);
    outline-offset: 3px;
    border-radius: 2px;
}

h1, h2, h3, h4 {
    font-family: var(--gh-font-heading, var(--serif));
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 .5em;
    text-wrap: balance;
}

blockquote { margin: 0; }

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

/* 4. Gabarit
   ========================================================================== */
.wrap {
    width: 100%;
    max-width: calc(var(--largeur-page) + 2 * var(--gouttiere));
    margin: 0 auto;
    padding: 0 var(--gouttiere);
}
.wrap--large { max-width: calc(var(--largeur-large) + 2 * var(--gouttiere)); }

.site-main { display: block; padding: 2.5rem 0 4rem; }

.kicker {
    font-family: var(--sans);
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--muet);
    margin: 0 0 .6rem;
}

.section-heading {
    font-size: 1.15rem;
    letter-spacing: .01em;
    margin: 3rem 0 1rem;
    padding-bottom: .5rem;
    border-bottom: 1px solid var(--filet);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
}
.section-heading-note {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 500;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muet);
}

/* 5. En-tête du site
   ========================================================================== */
.site-header {
    border-bottom: 1px solid var(--filet);
    background: var(--bg);
}
.site-header-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: .5rem 1rem;
    padding-top: 1.6rem;
    padding-bottom: 1rem;
}

.masthead { grid-column: 1; }
.masthead-title {
    margin: 0;
    font-family: var(--gh-font-heading, var(--serif));
    font-size: clamp(1.25rem, 1rem + 1.4vw, 1.75rem);
    font-weight: 400;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1.2;
}
.masthead-title a { text-decoration: none; }
.masthead-title a:hover { color: var(--accent-lien); }
.masthead-tagline {
    margin: .5rem 0 0;
    max-width: 42ch;
    font-size: .85rem;
    line-height: 1.5;
    font-style: italic;
    color: var(--muet);
}

.site-tools {
    grid-column: 2;
    display: flex;
    gap: .25rem;
    align-items: center;
}
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 999px;
    background: none;
    color: var(--muet);
    cursor: pointer;
    transition: color .15s ease, border-color .15s ease;
}
.btn-icon:hover { color: var(--accent-lien); border-color: var(--filet); }
.js-nav-toggle { display: inline-flex; }
@media (min-width: 44em) { .js-nav-toggle { display: none; } }

/* Bascule clair / sombre : le bouton montre l'icône du mode vers lequel on bascule.
   En clair on voit la lune, en sombre on voit le soleil. */
.icon-soleil { display: none; }
.icon-lune { display: block; }
html[data-apparence="sombre"] .icon-soleil { display: block; }
html[data-apparence="sombre"] .icon-lune { display: none; }
html[data-apparence="clair"] .icon-soleil { display: none; }
html[data-apparence="clair"] .icon-lune { display: block; }
@media (prefers-color-scheme: dark) {
    html[data-apparence="auto"] .icon-soleil { display: block; }
    html[data-apparence="auto"] .icon-lune { display: none; }
}

/* 6. Navigation
   ========================================================================== */
.nav { grid-column: 1 / -1; }
.nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: .1rem 1.35rem;
    list-style: none;
    margin: .9rem 0 0;
    padding: 0;
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.nav-item a {
    display: inline-block;
    padding: .25rem 0;
    color: var(--texte-doux);
    text-decoration: none;
    border-bottom: 1px solid transparent;
}
.nav-item a:hover { color: var(--accent-lien); border-bottom-color: var(--accent-lien); }
.nav-item.is-current a { color: var(--texte); border-bottom-color: var(--accent); }

@media (max-width: 43.99em) {
    .nav { display: none; }
    .nav.is-open { display: block; }
    .nav-list { flex-direction: column; gap: 0; }
    .nav-item { border-top: 1px solid var(--filet); }
    .nav-item a { padding: .7rem 0; }
}

/* 7. Liste des billets
   ========================================================================== */
.page-intro {
    padding: 1.5rem 0 .5rem;
    margin-bottom: 1rem;
}
.page-intro-text {
    margin: 0;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--texte-doux);
}

.entry-list { display: block; }

.entry {
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem 1.75rem;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--filet);
}
.entry:first-child { border-top: 1px solid var(--filet); }

@media (min-width: 40em) {
    .entry { grid-template-columns: 6.5rem 1fr; }
}

.entry-date {
    font-family: var(--sans);
    font-size: .72rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muet);
    padding-top: .45rem;
    white-space: nowrap;
}
.entry-day { display: inline; }
.entry-year { display: inline; }
.entry-year::before { content: ' '; }
@media (min-width: 40em) {
    .entry-date { text-align: right; }
    .entry-day, .entry-year { display: block; }
    .entry-year::before { content: none; }
}

.entry-body { min-width: 0; }

.entry-cover {
    float: right;
    width: 4.5rem;
    margin: .3rem 0 .75rem 1.25rem;
    line-height: 0;
}
.entry-cover img {
    width: 100%;
    border: 1px solid var(--filet);
    box-shadow: 0 1px 3px rgb(0 0 0 / .12);
}
@media (min-width: 40em) { .entry-cover { width: 5.5rem; } }

.entry-title {
    margin: 0 0 .35rem;
    font-size: clamp(1.2rem, 1.05rem + .55vw, 1.45rem);
    font-weight: 700;
    line-height: 1.3;
}
.entry-title a { text-decoration: none; }
.entry-title a:hover { color: var(--accent-lien); }

.entry-excerpt {
    margin: 0 0 .6rem;
    color: var(--texte-doux);
    font-size: .95rem;
    line-height: 1.62;
}

/* 8. Étiquettes
   ========================================================================== */
.tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: .2rem .9rem;
    list-style: none;
    margin: .6rem 0 0;
    padding: 0;
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .11em;
    text-transform: uppercase;
    color: var(--muet);
    clear: both;
}
.tag-list a { color: var(--muet); text-decoration: none; }
.tag-list a:hover { color: var(--accent-lien); }
.tag-list li + li::before {
    content: '·';
    margin-right: .9rem;
    color: var(--filet);
}

/* 9. Article
   ========================================================================== */
.post { padding-top: 1rem; }

.post-header {
    max-width: var(--largeur-lecture);
    margin: 0 auto 2rem;
    text-align: center;
}
.post-meta {
    font-family: var(--sans);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muet);
    margin: 0 0 .9rem;
}
.post-meta .sep { margin: 0 .45rem; color: var(--filet); }

.post-title {
    font-size: clamp(1.8rem, 1.25rem + 2.4vw, 2.9rem);
    letter-spacing: -.012em;
    margin: 0;
}
.post-chapeau {
    margin: 1rem 0 0;
    font-size: 1.08rem;
    font-style: italic;
    color: var(--texte-doux);
}
.post-header .tag-list { justify-content: center; margin-top: 1.1rem; }

.post-cover {
    margin: 0 auto 2.5rem;
    text-align: center;
    line-height: 0;
}
.post-cover img {
    max-width: 20rem;
    border: 1px solid var(--filet);
    box-shadow: 0 2px 10px rgb(0 0 0 / .14);
}
.post-cover figcaption {
    margin-top: .7rem;
    font-family: var(--sans);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--muet);
}

/* Quand la couverture est remontée en en-tête, on masque la figure
   d'origine restée en tête du corps de l'article. */
.post.a-couverture.couverture-en-tete .gh-content > figure.kg-image-card:first-child { display: none; }

/* 10. Corps de texte (grille Ghost : main / wide / full)
   ========================================================================== */
.gh-content {
    display: grid;
    grid-template-columns:
        [full-start] minmax(0, 1fr)
        [wide-start] minmax(0, 3rem)
        [main-start] min(var(--largeur-lecture), 100%) [main-end]
        minmax(0, 3rem) [wide-end]
        minmax(0, 1fr) [full-end];
}
.gh-content > * {
    grid-column: main-start / main-end;
    margin: 0 0 1.45em;
}
.gh-content > .kg-width-wide { grid-column: wide-start / wide-end; }
.gh-content > .kg-width-full { grid-column: full-start / full-end; }
.gh-content > :last-child { margin-bottom: 0; }

.gh-content p { hyphens: auto; }
.gh-content a { color: var(--accent-lien); text-decoration-color: color-mix(in srgb, var(--accent-lien) 40%, transparent); }
.gh-content a:hover { text-decoration-color: currentColor; }

.gh-content h2 { font-size: 1.55rem; margin-top: 2.2em; }
.gh-content h3 { font-size: 1.25rem; margin-top: 1.9em; }
.gh-content h4 { font-size: 1.05rem; margin-top: 1.6em; }

.gh-content ul, .gh-content ol { padding-left: 1.4em; }
.gh-content li { margin-bottom: .35em; }

.gh-content blockquote {
    padding-left: 1.4rem;
    border-left: 2px solid var(--accent);
    font-style: italic;
    color: var(--texte-doux);
}
.gh-content blockquote p { margin-bottom: .8em; }
.gh-content blockquote p:last-child { margin-bottom: 0; }
@media (min-width: 60em) {
    .gh-content blockquote { margin-left: -1.9rem; }
}

.gh-content figure { text-align: center; }
.gh-content figure img { display: inline-block; }
.gh-content figure.kg-image-card img { border: 1px solid var(--filet); }
.gh-content figcaption {
    margin-top: .7rem;
    font-family: var(--sans);
    font-size: .78rem;
    line-height: 1.5;
    color: var(--muet);
}

.gh-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: .92rem;
}
.gh-content th, .gh-content td {
    text-align: left;
    padding: .5rem .7rem;
    border-bottom: 1px solid var(--filet);
}

.gh-content pre {
    overflow-x: auto;
    padding: 1rem;
    background: var(--bg-doux);
    border: 1px solid var(--filet);
    font-size: .85rem;
}
.gh-content code { font-size: .88em; }

.gh-content iframe { max-width: 100%; }

/* Index alphabétiques : listes en colonnes sur grand écran */
.gh-content--colonnes { --largeur-lecture: 100%; }
.gh-content--colonnes > ul {
    list-style: none;
    padding-left: 0;
}
.gh-content--colonnes > ul > li {
    break-inside: avoid;
    padding: .18rem 0;
    font-size: .95rem;
    line-height: 1.45;
}
@media (min-width: 40em) { .gh-content--colonnes > ul { columns: 2; column-gap: 2.5rem; } }
@media (min-width: 64em) { .gh-content--colonnes > ul { columns: 3; } }

/* 11. Pied d'article, billets liés, navigation
   ========================================================================== */
.post-footer {
    max-width: var(--largeur-lecture);
    margin: 3rem auto 0;
    padding-top: 1.25rem;
    border-top: 1px solid var(--filet);
}
.post-footer .tag-list { margin-top: 0; }
.post-signature {
    margin: .9rem 0 0;
    font-size: .88rem;
    color: var(--muet);
}
.post-signature a { color: var(--texte-doux); }

.related-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.related-list li {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1.5rem;
    padding: .55rem 0;
    border-bottom: 1px solid var(--filet);
}
.related-list a { text-decoration: none; }
.related-list a:hover { color: var(--accent-lien); }
.related-date {
    flex: none;
    font-family: var(--sans);
    font-size: .7rem;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--muet);
}

.post-nav {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 3rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--filet);
}
@media (min-width: 40em) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav-side--droite { text-align: right; }
.post-nav a { text-decoration: none; display: block; }
.post-nav-label {
    display: block;
    font-family: var(--sans);
    font-size: .7rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muet);
    margin-bottom: .3rem;
}
.post-nav-title { display: block; line-height: 1.35; }
.post-nav a:hover .post-nav-title { color: var(--accent-lien); }

/* 12. En-tête de tag / auteur
   ========================================================================== */
.term-header {
    padding: 1rem 0 2rem;
    margin-bottom: .5rem;
    border-bottom: 1px solid var(--filet);
}
.term-title {
    font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.4rem);
    margin: 0;
}
.term-description {
    margin: .8rem 0 0;
    max-width: 44ch;
    font-style: italic;
    color: var(--texte-doux);
}
.term-count {
    margin: .8rem 0 0;
    font-family: var(--sans);
    font-size: .74rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--muet);
}

/* 13. Pagination
   ========================================================================== */
.pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    font-family: var(--sans);
    font-size: .78rem;
    letter-spacing: .06em;
}
.pagination-side { flex: 1 1 0; min-width: 0; }
.pagination-side--droite { text-align: right; }
.pagination-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    text-decoration: none;
    color: var(--texte-doux);
}
.pagination-link:hover { color: var(--accent-lien); }
.pagination-status { flex: none; color: var(--muet); }

/* 14. Archives
   ========================================================================== */
.archive-annees ul {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem .9rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    font-family: var(--sans);
    font-size: .8rem;
}
.archive-annees a { text-decoration: none; color: var(--texte-doux); }
.archive-annees a:hover { color: var(--accent-lien); }

.archive-section { margin-bottom: 2rem; }
.archive-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
@media (min-width: 46em) { .archive-list { columns: 2; column-gap: 2.5rem; } }
.archive-list li {
    break-inside: avoid;
    padding: .2rem 0;
    font-size: .95rem;
    line-height: 1.45;
}
.archive-list a { text-decoration: none; }
.archive-list a:hover { color: var(--accent-lien); }
.archive-date {
    font-family: var(--sans);
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--muet);
    white-space: nowrap;
}

/* 15. Pied de page
   ========================================================================== */
.site-footer {
    border-top: 1px solid var(--filet);
    background: var(--bg-doux);
    padding: 2.5rem 0 3rem;
    margin-top: 3rem;
}
.footer-heading {
    font-family: var(--sans);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muet);
    margin: 0 0 1rem;
}
.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    list-style: none;
    margin: 0 0 2rem;
    padding: 0;
}
.tag-cloud a {
    display: inline-flex;
    align-items: baseline;
    gap: .4rem;
    padding: .25rem .7rem;
    border: 1px solid var(--filet);
    border-radius: 999px;
    background: var(--bg);
    font-size: .82rem;
    text-decoration: none;
}
.tag-cloud a:hover { border-color: var(--accent-lien); color: var(--accent-lien); }
.tag-count {
    font-family: var(--sans);
    font-size: .68rem;
    color: var(--muet);
}
.tag-cloud--large { margin-bottom: 1rem; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem 1.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--filet);
    font-family: var(--sans);
    font-size: .78rem;
    color: var(--muet);
}
.footer-nav ul {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem 1.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.footer-nav a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    text-decoration: none;
    color: var(--texte-doux);
}
.footer-nav a:hover { color: var(--accent-lien); }
.footer-copyright { margin: 0; }

/* 16. Erreurs
   ========================================================================== */
.error {
    max-width: var(--largeur-lecture);
    margin: 2rem auto 3rem;
    text-align: center;
}
.error-code {
    font-family: var(--sans);
    font-size: .8rem;
    letter-spacing: .2em;
    color: var(--muet);
    margin: 0 0 .5rem;
}
.error-title { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.3rem); }
.error-help { color: var(--texte-doux); }
.error-details { list-style: none; padding: 0; font-size: .9rem; color: var(--muet); }

.lien-bouton {
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: var(--accent-lien);
    text-decoration: underline;
    text-underline-offset: .18em;
    cursor: pointer;
}

/* 17. Utilitaires
   ========================================================================== */
.u-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 100;
    padding: .75rem 1rem;
    background: var(--bg);
    border: 1px solid var(--filet);
}
.u-skip-link:focus { left: .5rem; top: .5rem; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

@media print {
    .site-header, .site-footer, .pagination, .post-nav, .related, .site-tools { display: none; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .gh-content a { text-decoration: none; }
}