/* =================================================================
   Feuille de style du site — modifiable dans Administration > Style
   ================================================================= */

:root {
    --encre:      #17181c;
    --papier:     #fbfaf7;
    --sourdine:   #6f6b63;
    --trait:      #e4e0d6;
    --voile:      #f1ede4;
    --accent:     #1d4e6b;
    --accent-vif: #12384f;

    --serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
    --sans:  ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    --mesure: 68ch;
    --large:  1180px;
    --rythme: clamp(2rem, 5vw, 3.5rem);
}

@media (prefers-color-scheme: dark) {
    :root {
        --encre:      #e9e6df;
        --papier:     #16171a;
        --sourdine:   #9b968c;
        --trait:      #2e3035;
        --voile:      #212328;
        --accent:     #78bcdf;
        --accent-vif: #a3d5f0;
    }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--papier);
    color: var(--encre);
    font-family: var(--serif);
    font-size: 1.0625rem;
    line-height: 1.72;
    text-rendering: optimizeLegibility;
}

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

a { color: var(--accent); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--accent-vif); }

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

.wrap { width: min(100% - 2.5rem, var(--mesure)); margin-inline: auto; }

h1, h2, h3, h4 {
    font-family: var(--sans);
    font-weight: 700;
    letter-spacing: -0.021em;
    line-height: 1.15;
    margin: 2.2em 0 0.6em;
}

/* ---------- En-tête ---------- */

.site-header { border-bottom: 1px solid var(--trait); }
.site-header__inner {
    width: min(100% - 2.5rem, var(--large));
    margin-inline: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.6rem 1.6rem;
    padding: 1.15rem 0;
}
.brand { text-decoration: none; color: inherit; }
.brand__title { font-family: var(--sans); font-weight: 700; font-size: 1.25rem; letter-spacing: -0.03em; }
.brand__logo { max-height: 46px; width: auto; display: block; }

.site-nav { margin-left: auto; display: flex; gap: 1.3rem; font-family: var(--sans); font-size: 0.92rem; }
.site-nav a { color: var(--encre); text-decoration: none; padding-bottom: 2px; border-bottom: 1px solid transparent; }
.site-nav a:hover { border-bottom-color: var(--accent); }
.site-nav__rss { color: var(--sourdine) !important; }

/* ---------- Accueil ---------- */

.hero { margin: 0 0 var(--rythme); }
.hero__image {
    display: block;
    width: 100%;
    max-height: 46vh;
    object-fit: cover;
}

.intro {
    font-size: 1.18rem;
    line-height: 1.62;
    margin: var(--rythme) 0;
    padding-bottom: var(--rythme);
    border-bottom: 1px solid var(--trait);
}
.intro p:first-child { margin-top: 0; }

/* ---------- Listes de billets ---------- */

.post-list { display: flex; flex-direction: column; }

.post-card {
    position: relative;
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 0 1.4rem;
    padding: 1.9rem 0;
    border-bottom: 1px solid var(--trait);
}
.post-card:has(> .post-card__body:only-child) { grid-template-columns: 1fr; }
.post-card--pinned { background:
    linear-gradient(90deg, var(--voile), transparent 62%);
    padding-inline: 1rem;
    margin-inline: -1rem;
}

.post-card__thumb img {
    width: 96px; height: 96px;
    object-fit: cover;
    display: block;
}
.post-card__body { min-width: 0; }
.post-card__meta {
    font-family: var(--sans);
    font-size: 0.82rem;
    color: var(--sourdine);
    margin: 0 0 0.35rem;
    display: flex; gap: 0.7rem; align-items: center;
}
.pin {
    font-size: 0.72rem;
    padding: 0.1rem 0.45rem;
    border: 1px solid var(--trait);
    color: var(--accent);
}
.post-card__title { margin: 0 0 0.4rem; font-size: 1.42rem; }
.post-card__title a { color: inherit; text-decoration: none; }
.post-card__title a:hover { color: var(--accent); text-decoration: underline; }
.post-card__excerpt { margin: 0 0 0.6rem; color: color-mix(in srgb, var(--encre) 82%, var(--papier)); }

.chips { margin: 0; display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
    font-family: var(--sans);
    font-size: 0.78rem;
    text-decoration: none;
    color: var(--sourdine);
    background: var(--voile);
    padding: 0.15rem 0.55rem;
}
.chip:hover { color: var(--accent-vif); }

.post-card__rating {
    position: absolute; top: 1.9rem; right: 0;
    font-family: var(--sans); font-weight: 700; font-size: 1.1rem;
    color: var(--accent); margin: 0;
}
.post-card__rating span { font-weight: 400; font-size: 0.78rem; color: var(--sourdine); }

.more {
    display: flex; align-items: center; gap: 1.5rem;
    margin: var(--rythme) 0;
}

.button {
    font-family: var(--sans); font-size: 0.9rem; font-weight: 600;
    text-decoration: none;
    display: inline-block;
    padding: 0.6rem 1.1rem;
    color: var(--papier); background: var(--accent);
}
.button:hover { background: var(--accent-vif); color: var(--papier); }
.link-rss { font-family: var(--sans); font-size: 0.9rem; }

.page-head { margin: var(--rythme) 0 1rem; }
.page-head h1 { margin: 0; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.page-head__count { font-family: var(--sans); font-size: 0.85rem; color: var(--sourdine); margin: 0.4rem 0 0; }

.filters {
    display: flex; flex-wrap: wrap; align-items: end; gap: 0.8rem;
    font-family: var(--sans); font-size: 0.88rem;
    padding: 1rem 0 1.6rem;
    border-bottom: 1px solid var(--trait);
}
.filters__field { display: flex; flex-direction: column; gap: 0.25rem; }
.filters__field span { color: var(--sourdine); font-size: 0.8rem; }
.filters input, .filters select {
    font: inherit; padding: 0.45rem 0.6rem;
    border: 1px solid var(--trait); background: var(--papier); color: var(--encre);
}
.filters .button { padding: 0.45rem 0.9rem; border: 0; cursor: pointer; }
.filters__reset { color: var(--sourdine); }

.pagination {
    display: flex; flex-wrap: wrap; gap: 0.4rem;
    font-family: var(--sans); font-size: 0.9rem;
    margin: 2.5rem 0 var(--rythme);
}
.pagination a, .pagination__current {
    padding: 0.35rem 0.7rem;
    border: 1px solid var(--trait);
    text-decoration: none;
}
.pagination__current { background: var(--accent); color: var(--papier); border-color: var(--accent); }

.empty { color: var(--sourdine); padding: 2rem 0; }

/* ---------- Billet ---------- */

.post { padding-bottom: var(--rythme); }
.post__head { margin: var(--rythme) 0 1.8rem; }
.post__meta {
    font-family: var(--sans); font-size: 0.85rem; color: var(--sourdine);
    display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0 0 0.7rem;
}
.post__title { margin: 0; font-size: clamp(1.9rem, 5vw, 2.8rem); }

.post__body { overflow: hidden; }
.post__body > :first-child { margin-top: 0; }
.post__body h2 { font-size: 1.5rem; }
.post__body h3 { font-size: 1.2rem; }
.post__body blockquote {
    margin: 1.6em 0; padding-left: 1.2rem;
    border-left: 3px solid var(--accent);
    color: var(--sourdine); font-style: italic;
}
.post__body pre {
    font-size: 0.9rem; overflow-x: auto;
    background: var(--voile); padding: 1rem;
}
.post__body hr { border: 0; border-top: 1px solid var(--trait); margin: 2.5rem 0; }
.post__body table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.post__body th, .post__body td { border: 1px solid var(--trait); padding: 0.45rem 0.6rem; text-align: left; }

/* Images insérées dans le texte */
.figure { margin: 1.8rem 0; }
.figure img { display: block; }
.figure figcaption {
    font-family: var(--sans); font-size: 0.82rem; color: var(--sourdine);
    margin-top: 0.45rem; line-height: 1.45;
}
/* --taille est posée par le code [image N taille=xx] ; sans elle, les valeurs
   par défaut ci-dessous s'appliquent (image à sa taille naturelle, 46 % pour
   une image flottante). */
.figure.inline img { width: var(--taille-img, auto); }

.figure.inline.align-centre {
    text-align: center;
    width: var(--taille, auto);
    max-width: 100%;
    margin-inline: auto;
}
.figure.inline.align-centre img { margin-inline: auto; }

.figure.inline.align-gauche {
    float: left;
    width: var(--taille, auto);
    max-width: var(--taille, 46%);
    margin: 0.4rem 1.6rem 1.2rem 0;
}
.figure.inline.align-droite {
    float: right;
    width: var(--taille, auto);
    max-width: var(--taille, 46%);
    margin: 0.4rem 0 1.2rem 1.6rem;
}
@media (max-width: 640px) {
    .figure.inline.align-gauche,
    .figure.inline.align-droite {
        float: none;
        width: 100%;
        max-width: 100%;
        margin: 1.6rem 0;
    }
}

/* Note sur 10 */
.rating {
    float: right; clear: both;
    margin: 1.6rem 0 0.4rem 1.6rem;
    padding: 0.55rem 0.9rem;
    border: 1px solid var(--accent);
    font-family: var(--sans); line-height: 1;
    color: var(--accent);
}
.rating__value { font-size: 1.5rem; font-weight: 700; }
.rating__max { font-size: 0.85rem; color: var(--sourdine); }

.post__media { margin: 2.2rem 0; clear: both; }
.video { position: relative; padding-top: 56.25%; background: var(--voile); }
.video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.audio { width: 100%; }

/* ---------- Galerie ---------- */

.gallery {
    clear: both;
    margin: 2.4rem 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.9rem;
}
.gallery__item { margin: 0; }
.gallery__item a { display: block; }
.gallery__item img {
    display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
    transition: opacity 0.15s ease;
}
.gallery__item a:hover img { opacity: 0.82; }
.gallery__item figcaption {
    font-family: var(--sans); font-size: 0.78rem; color: var(--sourdine);
    margin-top: 0.35rem; line-height: 1.4;
}

/* ---------- Navigation entre billets ---------- */

.post-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1.2rem;
    align-items: start;
    margin-top: var(--rythme);
    padding-top: 1.6rem;
    border-top: 1px solid var(--trait);
    font-family: var(--sans);
}
.post-nav a { text-decoration: none; }
.post-nav span { display: block; font-size: 0.78rem; color: var(--sourdine); margin-bottom: 0.2rem; }
.post-nav strong { font-size: 0.95rem; font-weight: 600; line-height: 1.3; }
.post-nav__next { text-align: right; }
.post-nav__all { align-self: center; font-size: 0.88rem; color: var(--sourdine); }
@media (max-width: 640px) {
    .post-nav { grid-template-columns: 1fr; }
    .post-nav__next { text-align: left; }
}

/* ---------- Pied de page ---------- */

.site-footer { border-top: 1px solid var(--trait); margin-top: var(--rythme); }
.site-footer__inner {
    width: min(100% - 2.5rem, var(--large));
    margin-inline: auto;
    display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem;
    padding: 1.6rem 0;
    font-family: var(--sans); font-size: 0.85rem; color: var(--sourdine);
}
.site-footer p { margin: 0; }

/* ---------- Visionneuse ---------- */

.lightbox {
    position: fixed; inset: 0; z-index: 50;
    background: rgba(10, 11, 13, 0.94);
    display: flex; align-items: center; justify-content: center;
    padding: clamp(1rem, 4vw, 3rem);
}
.lightbox[hidden] { display: none; }
.lightbox__figure { margin: 0; max-width: 100%; max-height: 100%; text-align: center; }
.lightbox__figure img {
    max-width: 100%; max-height: 82vh; width: auto; object-fit: contain;
}
.lightbox__figure figcaption {
    color: #e9e6df; font-family: var(--sans); font-size: 0.85rem; margin-top: 0.8rem;
}
.lightbox button {
    position: absolute;
    background: none; border: 0; cursor: pointer;
    color: #fff; font-size: 2.4rem; line-height: 1;
    padding: 0.4rem 0.9rem;
    opacity: 0.7;
}
.lightbox button:hover { opacity: 1; }
.lightbox__close { top: 0.5rem; right: 0.8rem; font-size: 2.8rem; }
.lightbox__prev { left: 0.2rem; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 0.2rem; top: 50%; transform: translateY(-50%); }

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}