/* ── COULEUR EXPO – Styles partagés ─────────────────────── */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }

:root {
    --cream: #f6f1e9;
    --cream-soft: #faf6ee;
    --brown: #3c2c1e;
    --brown-soft: #5a4634;
    --sage: #9cb49c;
    --sage-deep: #6f8a6f;
    --sage-light: #c0d0c0;
    --line: rgba(60,44,30,0.10);
}

html { scroll-behavior:smooth; }

body {
    font-family:'Lato',sans-serif;
    background:url('backgroundPapierAquarelle.webp') center/cover fixed;
    color:var(--brown);
    min-height:100vh;
}

.layout { display:flex; min-height:100vh; position:relative; z-index:1; }

/* ── SIDEBAR ── */
.sidebar {
    width:175px; flex-shrink:0;
    padding:45px 28px;
    position:sticky; top:0; height:100vh;
}
.site-title {
    font-family:'Cormorant Garamond',serif;
    font-size:26px; font-weight:400; line-height:1.3;
    margin-bottom:6px; color:var(--brown);
}
.site-tagline {
    font-family:'Cormorant Garamond',serif;
    font-size:12px; font-style:italic; font-weight:300;
    color:var(--brown); opacity:.55; letter-spacing:.6px;
    margin-bottom:38px; margin-top:6px;
}
nav { display:flex; flex-direction:column; gap:3px; }
nav a {
    display:block; font-size:15px; font-weight:300;
    color:var(--brown); text-decoration:none;
    padding:7px 11px; border-radius:5px; letter-spacing:.3px;
    transition:background .2s;
}
nav a:hover { background:rgba(143,169,143,.2); }
nav a.active { background:var(--sage); color:#fff; }

/* ── FOOTER ── */
.site-footer {
    margin-top:80px;
    padding:36px 36px 28px;
    border:1px solid rgba(60,44,30,0.18);
    border-radius:10px;
    background:rgba(255,255,255,0.55);
    box-shadow:0 1px 2px rgba(60,44,30,0.04);
    max-width:680px;
    margin-bottom:40px;
}
.footer-grid {
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:32px;
    margin-bottom:32px;
}
.footer-col h4 {
    font-family:'Cormorant Garamond',serif;
    font-size:13px; font-style:italic; font-weight:400;
    color:var(--brown); opacity:.7;
    letter-spacing:.5px; margin-bottom:12px;
    text-transform:uppercase;
}
.footer-col a, .footer-col p {
    display:block;
    font-family:'Lato',sans-serif;
    font-size:12px; font-weight:300; line-height:1.9;
    color:var(--brown);
    text-decoration:none;
    opacity:.75;
    transition:opacity .2s;
}
.footer-col a:hover { opacity:1; }
.footer-col p { line-height:1.7; max-width:200px; }
.footer-brand-name {
    font-family:'Cormorant Garamond',serif;
    font-size:18px; font-style:italic; font-weight:400;
    color:var(--brown); margin-bottom:8px; display:block;
    opacity:.85;
}

.footer-bottom {
    display:flex; justify-content:space-between;
    flex-wrap:wrap; gap:14px;
    padding-top:24px; border-top:1px solid var(--line);
    font-size:11px; font-weight:300; letter-spacing:.5px;
    opacity:.55;
}
.footer-mark {
    font-family:'Cormorant Garamond',serif; font-size:13px;
    font-style:italic; opacity:.85;
}

@media (max-width: 768px) {
    .layout { flex-direction:column; }
    .sidebar { width:100%; height:auto; position:relative; padding:20px 20px 16px; display:flex; align-items:center; gap:20px; flex-wrap:wrap; }
    .site-title { margin-bottom:0; font-size:20px; white-space:nowrap; }
    .site-title br { display:none; }
    .site-tagline { display:none; }
    nav { flex-direction:row; flex-wrap:wrap; gap:4px; width:100%; }
    nav a { font-size:13px; padding:5px 10px; }
    .footer-grid { grid-template-columns:repeat(2,1fr); gap:24px; }
}