/* ── 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:185px; flex-shrink:0;
    padding:36px 18px;
    position:sticky; top:0;
    align-self:flex-start;
}
.site-title {
    font-family:'Cormorant Garamond',serif;
    font-size:30px; font-weight:400; line-height:1.15;
    margin-bottom:0; color:var(--brown);
    padding:0 4px;
}
.site-tagline {
    font-family:'Cormorant Garamond',serif;
    font-size:22px; font-style:italic; font-weight:300;
    color:var(--brown); opacity:.62; letter-spacing:0;
    margin:14px 0;
    padding:0;
    text-align:justify;
    text-align-last:justify;
}
nav {
    display:flex; flex-direction:column; gap:4px;
    padding:10px 8px;
    background:rgba(255,255,255,0.32);
    border:1px solid rgba(60,44,30,0.13);
    border-radius:12px;
    box-shadow:0 1px 3px rgba(60,44,30,0.04);
}
nav a {
    display:block; font-size:15px; font-weight:300;
    color:var(--brown); text-decoration:none;
    padding:8px 12px; border-radius:6px; letter-spacing:.3px;
    transition:background .2s;
}
nav a:hover { background:rgba(143,169,143,.22); }
nav a.active { background:var(--sage); color:#fff; }

/* Titre cliquable → accueil (sans style de lien, même après visite) */
.site-title a,
.site-title a:visited { color:inherit; text-decoration:none; display:block; }

/* Copyright sidebar */
.site-copyright {
    font-family:'Lato',sans-serif;
    font-size:10.5px; font-weight:400;
    color:#111;
    letter-spacing:.2px;
    margin-top:14px;
    padding:10px 4px 0;
    line-height:1.6;
    border-top:1px solid rgba(60,44,30,0.15);
}

/* Bandeau prix */
.price-banner {
    display:inline-block;
    background:#111;
    color:#fff;
    font-family:'Lato',sans-serif;
    font-size:13px;
    font-weight:300;
    letter-spacing:.4px;
    padding:8px 18px;
    border-radius:6px;
    margin-bottom:28px;
}
.price-banner strong { font-weight:600; }

/* ── 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:760px;
    margin-bottom:40px;
}
.footer-grid {
    display:grid;
    grid-template-columns:repeat(3, 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; }
    body { overflow-x:hidden; }

    .sidebar {
        width:100%;
        margin:0;
        padding:10px 12px;
        position:sticky; top:0; z-index:100;
        background:rgba(246,241,233,0.97);
        backdrop-filter:blur(8px);
        -webkit-backdrop-filter:blur(8px);
        border-bottom:1px solid rgba(60,44,30,0.10);
        display:flex; flex-direction:column;
        align-items:flex-start; gap:8px;
    }
    .site-title { margin-bottom:0; font-size:22px; white-space:nowrap; padding:0; }
    .site-title br { display:none; }
    .site-tagline { display:none; }

    /* Nav encadrée avec liseret sur chaque item */
    nav {
        flex-direction:row; flex-wrap:wrap; gap:5px;
        width:100%;
        background:rgba(255,255,255,0.32);
        border:1px solid rgba(60,44,30,0.13);
        border-radius:10px;
        padding:6px 7px;
        box-shadow:0 1px 3px rgba(60,44,30,0.04);
    }
    nav a {
        font-size:0;              /* cache le texte HTML complet */
        padding:5px 9px;
        white-space:nowrap;
        border:1px solid rgba(60,44,30,0.18);
        border-radius:5px;
    }
    nav a::after {
        font-size:12px;
        font-weight:300;
        letter-spacing:.2px;
        color:var(--brown);
    }
    nav a.active { border-color:transparent; }

    /* Labels courts sur mobile via href */
    nav a[href="accueil.html"]::after          { content:"Accueil"; }
    nav a[href="sacs.html"]::after             { content:"Actualités"; }
    nav a[href="index.html"]::after            { content:"Tableaux-Estampe"; }
    nav a[href="originaux.html"]::after        { content:"Originaux"; }
    nav a[href="sacs-cabas.html"]::after       { content:"Sacs-Cabas"; }
    nav a[href="artiste-du-mois.html"]::after  { content:"Artiste du Mois"; }
    nav a[href="contact.html"]::after          { content:"Contact"; }

    /* Footer mobile : Contact sous Boutique, Informations à droite (spanning) */
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:18px 20px;
    }
    .footer-grid > .footer-col:nth-child(1) { grid-column:1; grid-row:1; }
    .footer-grid > .footer-col:nth-child(2) { grid-column:2; grid-row:1 / span 2; }
    .footer-grid > .footer-col:nth-child(3) { grid-column:1; grid-row:2; }
    /* Force chaque lien sur une seule ligne (évite "Paiement &" / "livraison" coupé) */
    .footer-col a, .footer-col p { white-space:nowrap; font-size:11.5px; }
    .footer-col h4 { font-size:12px; }
}