/* Blog — devispeintresgironde.fr */
:root{--bg:#F7F6F1;--surface:#FFFFFF;--line:#E3E1D8;--ink:#171B2E;--muted:#5B6070;--soft:#454A5E;--accent:#D6E24B;--accent-shadow:#A9B32C;--olive:#5F6416}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:'IBM Plex Sans',system-ui,sans-serif;line-height:1.55}
a{color:inherit;text-decoration:none}
h1,h2,h3{font-family:'Space Grotesk',sans-serif;letter-spacing:-.02em;line-height:1.12;margin:0}
em{font-style:normal;color:var(--olive)}
.brand em{display:inline}
.brand span.txt{display:flex;flex-direction:column;gap:2px;line-height:1}
.brand small{font-family:'IBM Plex Sans',sans-serif;font-size:10px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--muted)}
@media(max-width:640px){.brand small{font-size:8px;letter-spacing:.02em;white-space:nowrap}}

.bh{height:72px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--bg);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:center;gap:10px;white-space:nowrap;font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:18px}
.logo{width:36px;height:36px;border-radius:9px;background:var(--ink);display:inline-flex;align-items:center;justify-content:center}
.bh nav{display:flex;align-items:center;gap:22px;font-size:14px;font-weight:500}
.bh nav a.on{color:var(--olive)}
.btn{height:44px;padding:0 18px;display:inline-flex;align-items:center;border-radius:10px;background:var(--ink);color:#fff;font-weight:600;font-size:14px}
.btn .short{display:none}
.btn.big{height:54px;padding:0 26px;background:var(--accent);color:var(--ink);font-family:'Space Grotesk',sans-serif;font-weight:700;font-size:16px;box-shadow:0 4px 0 var(--accent-shadow)}
@media(max-width:640px){.bh nav a:not(.btn){display:none}.bh{padding:0 16px;height:64px}.brand{font-size:15px}.btn{height:40px;padding:0 14px;font-size:13px;white-space:nowrap}.bh .btn .full{display:none}.bh .btn .short{display:inline}}

.wrap{max-width:1160px;margin:0 auto;padding:40px 24px 80px}
.hero{max-width:720px;display:flex;flex-direction:column;gap:14px;margin-bottom:40px}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--olive)}
.hero h1{font-size:clamp(32px,4.5vw,52px)}
.hero p{margin:0;font-size:17px;color:var(--soft)}
.empty{color:var(--muted)}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
.grid.small{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.grid,.grid.small{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.grid,.grid.small{grid-template-columns:1fr}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s}
.card:hover{transform:translateY(-2px);box-shadow:0 16px 32px -20px rgba(23,27,46,.35)}
.card.big{grid-column:span 2}
.card.big .thumb{aspect-ratio:16/6}
@media(max-width:900px){.card.big{grid-column:span 2}
.card.big .thumb{aspect-ratio:16/6}}
@media(max-width:560px){.card.big{grid-column:span 1}}
.thumb{aspect-ratio:16/8;background:linear-gradient(135deg,color-mix(in srgb,var(--c) 85%,#fff) 0%,var(--c) 60%,color-mix(in srgb,var(--c) 70%,#000) 100%);position:relative}
.thumb span{position:absolute;left:14px;top:14px;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(255,255,255,.9);color:var(--ink);padding:5px 9px;border-radius:999px}
.card .body{padding:18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card .meta,.article .meta{font-size:12px;color:var(--muted)}
.card h2{font-size:20px}
.card.big h2{font-size:26px}
.card h3{font-size:16px}
.card p{margin:0;font-size:14px;color:var(--soft);flex:1}
.more{font-size:13px;font-weight:600;color:var(--olive)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:32px}
.pager a{width:40px;height:40px;border-radius:10px;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;font-size:14px;font-weight:600;background:var(--surface)}
.pager a.on{background:var(--ink);color:#fff;border-color:var(--ink)}

.cta{margin-top:56px;background:var(--ink);color:#fff;border-radius:20px;padding:40px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:14px}
.cta h2{font-size:28px}
.cta p{margin:0;color:#C9CDD9;max-width:52ch}
.cta.inline{margin:40px 0}

.article{max-width:820px}
.crumbs{font-size:13px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}
.hero-thumb{border-radius:18px;aspect-ratio:16/6;margin-bottom:18px}
.article h1{font-size:clamp(28px,4vw,44px);margin:8px 0 14px}
.article .lead{font-size:18px;color:var(--soft);margin:0 0 26px;border-left:4px solid var(--accent);padding-left:16px}
.content{font-size:17px;max-width:70ch}
.content h2{font-size:26px;margin:36px 0 12px}
.content h3{font-size:20px;margin:26px 0 8px}
.content p{margin:0 0 16px}
.content ul,.content ol{padding-left:22px;margin:0 0 16px}
.content li{margin-bottom:6px}
.content table{width:100%;border-collapse:collapse;margin:8px 0 20px;font-size:15px}
.content th,.content td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
.content th{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.content .encart{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:12px;padding:16px 18px;margin:20px 0;font-size:15px}
.content a{color:var(--olive);text-decoration:underline}
.related{margin-top:48px}
.related h2{font-size:24px;margin-bottom:16px}

.bf{border-top:1px solid var(--line);padding:32px 24px;display:flex;flex-direction:column;gap:12px;font-size:13px;color:var(--muted);max-width:1160px;margin:0 auto}
.bf b{color:var(--ink);font-family:'Space Grotesk',sans-serif;font-size:15px}

/* bascule particulier / peintre */
.aud{background:#171B2E;color:#fff;font-size:13px}
.aud .aw{max-width:1200px;margin:0 auto;height:40px;padding:0 24px;display:flex;align-items:center;gap:12px}
.aud span{color:#C9CCD6}
.aud .sw{display:flex;background:rgba(255,255,255,.08);border-radius:999px;padding:3px}
.aud .sw a{height:28px;padding:0 12px;border-radius:999px;display:inline-flex;align-items:center;font-weight:600;color:#C9CCD6;text-decoration:none}
body[data-aud=particulier] .aud .sw a[data-aud=particulier],body[data-aud=peintre] .aud .sw a[data-aud=peintre]{background:#D6E24B;color:#171B2E}
body[data-aud=peintre] .only-part{display:none!important}
body[data-aud=particulier] .only-pro{display:none!important}
@media(max-width:640px){.aud .aw{padding:0 16px}}
@media(max-width:640px){.bh{gap:10px}.bh .brand{font-size:14px;white-space:nowrap}.bh .brand .logo{flex:none}.bh .brand small{display:none}.bh nav{flex:none}.bh .btn{padding:0 12px}}
/* (11/10) illustrations des articles */
.thumb.has-img{display:flex;align-items:center;justify-content:center;overflow:hidden}
.thumb.has-img img{height:100%;width:auto;max-width:100%;object-fit:contain;display:block}
.thumb.has-img span{position:absolute;z-index:1}
/* (11/10) boutons de partage */
.partage{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:28px 0 8px;padding:16px 0;border-top:1px solid var(--line,#E4E1D8);border-bottom:1px solid var(--line,#E4E1D8)}
.partage b{margin-right:6px;font-size:15px}
.partage a,.partage button{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;border-radius:999px;border:1px solid var(--line,#E4E1D8);background:#fff;color:var(--ink,#14171F);text-decoration:none;cursor:pointer}
.partage a:hover,.partage button:hover{border-color:var(--ink,#14171F)}