/* ========================================
   LAYOUT
   ======================================== */
.site-content {
    min-height: calc(100vh - 200px);
}

/* Cibles d'ancre : petit décalage au scroll pour ne pas coller au bord haut */
section[id] {
    scroll-margin-top: var(--space-xl);
}

.site-main {
    width: 100%;
    margin: 0;
    padding: 0;
}

/*
 * Conteneur de contenu : centré à 80% (marges sur les côtés).
 * Les SECTIONS restent pleine largeur (fonds/photos bord à bord) ;
 * seul leur contenu est contraint via .content-container.
 */
.content-container {
    width: var(--site-width);
    margin: 0 auto;
}

/* Sur mobile, on élargit la colonne pour ne pas étrangler le contenu */
@media (max-width: 768px) {
    :root {
        --site-width: 92%;
    }
}

.home-content {
    max-width: var(--container-xl);
    margin: 0 auto;
    padding: var(--space-4xl) var(--container-padding);
}

.content-wrapper {
    max-width: var(--container-md);
    margin: 0 auto;
}

/* ========================================
   GRILLES & CONTAINERS
   ======================================== */
.posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
    gap: var(--space-xl);
    margin: var(--space-2xl) 0;
}

.posts-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
}