/* ============================================================
   LISABUZZ — Feuille de style partagée
   Modifiée ici, appliquée à toutes les pages automatiquement.
   ============================================================ */

/* === RESET === */
* { margin: 0; padding: 0; box-sizing: border-box; }
h1, h2, h3, h4, h5, h6 { font-weight: inherit; font-size: inherit; }

/* === BASE === */
body {
    background: #1a1a1a;
    color: #000000;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}

/* === FOND POCHETTE FLOUTÉE === */
.bg-cover {
    position: fixed;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    background-size: 100% auto;
    background-position: center top;
    background-repeat: no-repeat;
    filter: blur(30px);
    -webkit-filter: blur(30px);
    z-index: -1;
}
.bg-cover::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0,0,0,0.25);
}

/* === CONTENEUR PRINCIPAL === */
.page {
    width: 86%;
    max-width: 920px;
    margin: 0 auto;
    padding: 38px 32px 80px;
    background: #ffffff;
    position: relative;
    min-height: 100vh;
}

/* === LOGO === */
.logo { margin-bottom: 28px; }
.logo a { display: inline-block; }
.logo img { width: 232px; display: block; }

/* === FIL D'ARIANE / MÉTA === */
.page-meta {
    font-size: 13px;
    font-weight: 400;
    color: #999;
    margin-bottom: 28px;
    letter-spacing: 0.03em;
}
.page-meta a {
    color: #999;
    text-decoration: none;
    border-bottom: 1px solid #ddd;
}
.page-meta a:hover { color: #000; border-bottom-color: #000; }
.page-meta .sep { margin: 0 8px; color: #ccc; }

/* === H1 principal (discret, pour les robots) === */
.article-h1 {
    font-size: 1.1rem;
    font-weight: 400;
    color: #aaa;
    line-height: 1.4;
    margin-bottom: 6px;
}

/* === TITRE D'ARTICLE éditorial (accrocheur, pour les lecteurs) === */
.article-title {
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 24px;
}

/* === TITRE DE RUBRIQUE (niveau 1) === */
.rubrique-title {
    font-size: 36px;
    font-weight: 300;
    line-height: 1.2;
    margin-bottom: 1em;
}

/* === POCHETTE D'ALBUM === */
.cover-block { margin-bottom: 32px; }
.cover-block img { width: 100%; display: block; }
.cover-caption {
    margin-top: 8px;
    font-size: 12px;
    font-weight: 400;
    color: #999;
    font-style: italic;
    line-height: 1.3;
}

/* === IMAGE HERO (homepage) === */
.photo { margin-bottom: 44px; }
.photo img { width: 100%; display: block; }

/* === CORPS DE TEXTE === */
.text p {
    font-size: 18px;
    font-weight: 300;
    line-height: 1.4;
    margin-bottom: 1em;
}
.text a { color: #000000; text-decoration: underline; }

/* H1 dans le corps homepage */
.text h1 {
    font-size: 40px;
    font-weight: 300;
    margin-bottom: 1em;
}

/* H2 dans le corps d'article */
.text h2 {
    font-size: 22px;
    font-weight: 400;
    line-height: 1.3;
    margin-top: 1.8em;
    margin-bottom: 0.6em;
}

/* === SIGNATURE === */
.signature { margin-top: 1.5em; font-style: italic; font-weight: 300; }

/* === VIDÉO EMBARQUÉE === */
.video { margin-bottom: 1em; }
.video iframe { display: block; }

/* === LIENS EXTERNES === */
.external-links {
    margin-top: 40px;
    padding-top: 24px;
    border-top: 1px solid #eee;
    font-size: 13px;
    color: #999;
}
.external-links p { margin-bottom: 6px; }
.external-links a {
    color: #000;
    text-decoration: underline;
    font-size: 13px;
    font-weight: 400;
}

/* === SUR LE MÊME SUJET (pages sœurs) === */
.sisters {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #ddd;
}
.sisters h2 {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 16px;
}
.sisters ul { list-style: none; padding: 0; }
.sisters ul li { margin-bottom: 10px; }
.sisters ul li a {
    font-size: 16px;
    font-weight: 300;
    color: #000;
    text-decoration: underline;
}

/* === NAVIGATION RUBRIQUES (homepage) === */
.rubriques-nav {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #ddd;
}
.rubriques-nav h2 {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 16px;
}
.rubriques-nav ul { list-style: none; padding: 0; }
.rubriques-nav ul li {
    margin-bottom: 12px;
    font-size: 15px;
    font-weight: 300;
    color: #555;
}
.rubriques-nav ul li a {
    color: #000;
    text-decoration: underline;
    font-weight: 400;
}

/* === COMMENTAIRES === */
.comments {
    margin-top: 60px;
    padding-top: 40px;
    border-top: 1px solid #ddd;
    font-family: Verdana, Geneva, sans-serif;
    font-size: 13px;
    line-height: 1.5;
    color: #333;
}
.comments h3 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 30px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.comment { margin-bottom: 24px; padding-bottom: 20px; border-bottom: 1px solid #eee; }
.comment:last-child { border-bottom: none; }
.comment-meta { margin-bottom: 6px; }
.comment-author { font-weight: bold; color: #222; }
.comment-date { color: #999; font-size: 11px; margin-left: 8px; }
.comment-body { color: #444; }

/* === LISTE D'ARTICLES (page rubrique) === */
.articles-heading {
    margin-top: 48px;
    margin-bottom: 24px;
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
}
.article-list { list-style: none; padding: 0; }
.article-item {
    display: grid;
    grid-template-columns: 96px 1fr;
    gap: 20px;
    align-items: start;
    padding: 20px 0;
    border-bottom: 1px solid #eee;
}
.article-item:last-child { border-bottom: none; }
.article-item .thumb { width: 96px; height: 96px; overflow: hidden; }
.article-item .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.article-item .info { display: flex; flex-direction: column; gap: 6px; }
.article-item .info .date { font-size: 12px; color: #999; }
.article-item .info h2 { font-size: 18px; font-weight: 300; line-height: 1.3; }
.article-item .info h2 a { color: #000; text-decoration: underline; }
.article-item .info .excerpt { font-size: 14px; font-weight: 300; color: #666; line-height: 1.4; }
.article-item .info .artiste-album { font-size: 12px; color: #999; font-style: italic; }

/* === MINIATURES SŒURS === */
.sisters ul li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
}
.sister-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}

/* === RELATED POSTS (sous chaque article) === */
.related-posts {
    margin-top: 50px;
    padding-top: 30px;
    border-top: 1px solid #ddd;
}
.related-posts h2 {
    font-size: 13px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 14px;
}
.related-list { list-style: none; padding: 0; }
.related-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.related-thumb {
    width: 48px;
    height: 48px;
    object-fit: cover;
    display: block;
    flex-shrink: 0;
}
.related-list li a {
    font-size: 14px;
    font-weight: 300;
    color: #000;
    text-decoration: underline;
}

/* === LAYOUT AVEC SIDEBAR (homepage + catégories) === */
.home-layout {
    display: grid;
    grid-template-columns: 1fr 200px;
    gap: 40px;
    align-items: start;
}
.home-sidebar {
    order: 2;
}
.home-main { order: 1; }
.home-sidebar h2 {
    font-size: 11px;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #999;
    margin-bottom: 14px;
}
.home-sidebar-list { list-style: none; padding: 0; }
.home-sidebar-list li { margin-bottom: 18px; }
.home-sidebar-list li a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-decoration: none;
}
.home-sidebar-list li a img {
    width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    display: block;
}
.home-sidebar-list li .sidebar-title {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: #000;
    line-height: 1.3;
    text-decoration: underline;
    margin-top: 2px;
}
.home-sidebar-list li .sidebar-rubrique,
.home-sidebar-list li .sidebar-meta {
    display: block;
    font-size: 10px;
    color: #999;
    letter-spacing: 0.03em;
    margin-top: 1px;
}

/* === RESPONSIVE === */
@media (max-width: 600px) {
    .page { padding: 24px 18px 60px; }
    .article-title, .rubrique-title { font-size: 28px; }
    .text h1 { font-size: 30px; }
    .text p { font-size: 16px; }
    .article-item { grid-template-columns: 72px 1fr; gap: 14px; }
    .article-item .thumb { width: 72px; height: 72px; }
    .article-item .info h2 { font-size: 16px; }
    .home-layout { grid-template-columns: 1fr; }
    .home-sidebar { position: static; order: -1; }
    .home-sidebar-list { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
    .sister-thumb { width: 40px; height: 40px; }
    .related-thumb { width: 40px; height: 40px; }
}