:root{
--bg-1: #f3f7f2; /* très clair */
--bg-2: #e6f0e8;
--green-1: #7fb77e; /* doux */
--green-2: #5ea062;
--accent: #d94a28; /* rouge coccinelle */
--muted: #6b7a6b;
--card: rgba(255,255,255,0.9);
--glass: rgba(255,255,255,0.6);
--shadow: 0 6px 20px rgba(30,40,30,0.08);
--radius: 14px;
--gap: 18px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
background: radial-gradient(circle at 10% 10%, var(--bg-2), var(--bg-1));
color: #274033;
-webkit-font-smoothing:antialiased;
-moz-osx-font-smoothing:grayscale;
padding:32px;
}
header{
display:flex;
align-items:center;
gap:18px;
margin-bottom:22px;
}
.logo{
display:flex;align-items:center;gap:12px;
background: linear-gradient(180deg, var(--glass), rgba(255,255,255,0.55));
padding:10px 14px;border-radius:12px;box-shadow:var(--shadow);
}
.brand-title{font-family:'Playfair Display', serif;font-size:20px;color:var(--green-2);margin:0}
.brand-sub{font-size:12px;color:var(--muted);margin:0}
.controls{margin-left:auto;display:flex;gap:12px;align-items:center}
.search{background:transparent;border:1px solid rgba(80,100,80,0.08);padding:8px 10px;border-radius:12px;min-width:200px}
.button{background:var(--green-1);color:white;padding:8px 12px;border-radius:10px;border:none;cursor:pointer;font-weight:600}
/* Pinterest-like masonry */
.masonry{
column-count:3;
column-gap:var(--gap);
max-width:1200px;margin:0 auto;
}
@media (max-width:1000px){.masonry{column-count:2}}
@media (max-width:600px){.masonry{column-count:1}}
.pin{
display:inline-block;width:100%;margin:0 0 var(--gap);background:var(--card);bor