/* Brescart — layout.css
 * Container 1200px, prose 680px, rythme ink / ink-elev / cream-inverted (rare).
 */

.br-container {
    max-width: var(--container);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
}

.br-prose {
    max-width: var(--prose);
    margin-left: auto;
    margin-right: auto;
}

.br-section {
    padding-top: var(--space-section);
    padding-bottom: var(--space-section);
    position: relative;
}

/* ALT — légère élévation ink-elev */
.br-section--alt {
    background: var(--c-ink-elev);
    border-top: 1px solid var(--c-ink-line);
    border-bottom: 1px solid var(--c-ink-line);
}

/* Inversion — section crème (remplace l'ancienne br-section--ardoise).
   Maximum 1 par page : l'œil s'y arrête comme sur une page insérée. */
.br-section--ardoise {
    background: var(--c-cream);
    color: var(--c-ink);
    border-top: 1px solid var(--c-bone);
    border-bottom: 1px solid var(--c-bone);
    background-image:
        radial-gradient(ellipse 60% 40% at 20% 0%, rgba(201, 111, 74, 0.06), transparent 60%);
}

.br-section--tight {
    padding-top: 64px;
    padding-bottom: 64px;
}

.br-section__header { margin-bottom: var(--space-block); }

.br-section__head-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: var(--space-block);
}
.br-section__head-row h2 { margin-bottom: 0; }

.br-grid {
    display: grid;
    gap: var(--gutter);
}

.br-grid-2 { grid-template-columns: 1fr 1fr; }
.br-grid-3 { grid-template-columns: repeat(3, 1fr); }
.br-grid-4 { grid-template-columns: repeat(4, 1fr); }

.br-flex {
    display: flex;
    gap: var(--gutter);
    flex-wrap: wrap;
}

.br-stack > * + * { margin-top: var(--space-item); }

/* Texte sur section crème inversée */
.br-section--ardoise h1,
.br-section--ardoise h2,
.br-section--ardoise h3,
.br-section--ardoise h4,
.br-section--ardoise p,
.br-section--ardoise li {
    color: var(--c-ink);
}
.br-section--ardoise h2,
.br-section--ardoise h1 { color: var(--c-ink); }

.br-section--ardoise .br-prose-block > p,
.br-section--ardoise .br-prose-block > h2,
.br-section--ardoise .br-prose-block > h3,
.br-section--ardoise .br-prose-block > ol li,
.br-section--ardoise .br-prose-block > ul li {
    color: var(--c-ink);
}

.br-section--ardoise .br-meta-mono,
.br-section--ardoise .br-byline-inline {
    color: var(--c-mist-2);
}

.br-section--ardoise a:not(.br-link):not(.br-btn-solid):not(.br-btn-ghost) {
    color: var(--c-copper-deep);
    border-bottom: 1px solid rgba(143, 77, 51, 0.4);
}
.br-section--ardoise a:not(.br-link):hover {
    color: var(--c-copper);
    border-bottom-color: var(--c-copper);
}

.br-section--ardoise code {
    background: var(--c-bone);
    color: var(--c-copper-deep);
    border-color: rgba(143, 77, 51, 0.2);
}

.br-section--ardoise hr {
    background: linear-gradient(90deg, transparent, var(--c-bone) 20%, var(--c-bone) 80%, transparent);
}

/* Bloc prose */
.br-prose-block p,
.br-prose-block li { font-size: var(--f-body-l); line-height: 1.65; }
.br-prose-block h2 { margin-top: 1.8em; }
.br-prose-block h3 { margin-top: 1.4em; }