/* ——— variables ——— */
:root{
  --bg:#ffe9bb;             /* crème */
  --tile:#ffdca3;           /* damier */
  --pink:#ffb6c7;
  --pink2:#ff97b8;
  --brown:#8a6b55;
  --text:#6a5547;
  --dot:#e7b3c8;
  --card:#fff3e3;
  --edge:#f6cdd7;
  --shadow:0 4px 0 #e7b3c8, 0 10px 20px rgba(0,0,0,.05);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); font:16px/1.6 "Trebuchet MS",Verdana,system-ui;
  background:var(--bg) url('img/gingham.png'); /* damier si tu n'as pas la tuile */
}

/* tuilage doux supplémentaire */
.bg-tile{
  position:fixed; inset:0; pointer-events:none; opacity:.35; z-index:-1;
  background:
    linear-gradient(90deg, var(--tile) 25%, transparent 25%) 0 0/40px 40px,
    linear-gradient(var(--tile) 25%, transparent 25%) 0 0/40px 40px;
  mix-blend-mode:multiply;
}

/* bannière */
.banner{position:relative; text-align:center; padding:10px 0 0}
.banner-img{width:100%; max-height:190px; object-fit:cover; border-bottom:4px dotted var(--edge)}
.logo{
  position:absolute; left:50%; top:18px; transform:translateX(-50%);
  font-family: "Comic Sans MS","Chicle", cursive; letter-spacing:2px;
  font-size: clamp(28px,5vw,56px); color:#fff; text-shadow:0 2px 0 #e48fb0, 0 6px 12px rgba(0,0,0,.15);
}
.logo span{display:block; font-size:14px}

/* ticker donuts */
.marquee{overflow:hidden;border-top:4px dotted var(--edge);border-bottom:4px dotted var(--edge);background:#ffe6f0}
.marquee__inner{display:inline-block; white-space:nowrap; animation:roll 18s linear infinite}
.marquee img{height:24px; margin:6px}
@keyframes roll{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* layout 3 colonnes */
.layout{display:grid; grid-template-columns: 230px 1fr 260px; gap:14px; max-width:1100px; margin:12px auto; padding:0 10px}
.sidebar .widget+.widget{margin-top:12px}

.card{
  background:var(--card);
  border:4px double var(--edge);
  border-radius:18px;
  box-shadow:var(--shadow);
  padding:12px;
}

.h3{margin:0 0 8px; font-size:14px; text-transform:uppercase; letter-spacing:1px; color:#b45b73}

.nav .btn{
  display:block; margin:8px 0; padding:10px 14px; text-decoration:none; color:#fff;
  background:linear-gradient(#ffbfd3,#ff9fbf);
  border-radius:16px; border:2px solid #ffc6d9; box-shadow:var(--shadow); text-align:center;
}
.nav .btn:hover{filter:brightness(1.05) saturate(110%)}

/* boutons & petits éléments */
.button-code{
  display:inline-block; background:#fff; border:2px dashed #f0a9be; padding:6px 10px; border-radius:10px; text-decoration:none; color:#b45b73
}
.code{width:100%; height:52px; margin-top:6px; background:#fff; border:2px dashed #f0a9be; border-radius:10px; color:#b45b73}

.stamps-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:6px}
.buttons88 img{width:88px;height:31px;margin:3px}
.tiny{font-size:12px; opacity:.8}

.mini-embed{width:100%; height:130px; border:0; background:#fff; border-radius:12px}

/* contenu centre */
.content .post{margin-bottom:12px}
.post-head{display:flex; align-items:center; gap:8px}
.post .emoji{width:28px}
.note{font-size:12px; color:#b45b73}

.two{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:8px}
.subcard{background:#fffaf2; border:2px dotted #f2c9d6; border-