/* ===== little-pan : pages de blog façon Skyblog ===== */
body.blog {
  --b-fond: #ffd6ee;
  --b-motif: none;
  --b-boite: #fff;
  --b-bord: #ff63b8;
  --b-titre-fond: linear-gradient(180deg, #ff8fcf, #ff4aa5);
  --b-titre-txt: #fff;
  --b-texte: #3b2433;
  --b-lien: #e01784;
  --b-banniere: #ff2c9a;
  --b-ombre-titre: #fff;
  --b-btn: #ff4aa5;
  background: var(--b-motif), var(--b-fond);
  background-attachment: fixed;
  color: var(--b-texte);
}
body.blog .topbar { background: rgba(255,255,255,.85); }

.sky { max-width: 980px; width: 100%; margin: 0 auto; padding: 18px 12px 40px; flex: 1; }
.sky a { color: var(--b-lien); }

.sky-banniere { text-align: center; padding: 34px 12px 22px; }
.sky-banniere a:hover { text-decoration: none; }
.sky-titre {
  font-family: 'Comic Neue', 'Comic Sans MS', cursive; font-weight: 700;
  font-size: clamp(30px, 6vw, 58px); margin: 0; line-height: 1.05;
  color: var(--b-banniere); word-break: break-word;
  text-shadow: 3px 3px 0 var(--b-ombre-titre), 5px 5px 0 rgba(0,0,0,.12);
}
.sky-url { margin-top: 8px; font-size: 14px; opacity: .8; }

.sky-corps { display: grid; grid-template-columns: 240px 1fr; gap: 16px; align-items: start; }

.sky-boite, .sky-article {
  background: var(--b-boite); border: 2px solid var(--b-bord); border-radius: 10px;
  margin-bottom: 16px; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.08);
}
.sky-boite-titre, .sky-article-titre {
  display: block; background: var(--b-titre-fond); color: var(--b-titre-txt) !important;
  font-family: 'Comic Neue', 'Comic Sans MS', cursive; font-weight: 700;
  padding: 8px 14px; font-size: 16px; text-shadow: 1px 1px 0 rgba(0,0,0,.2);
}
.sky-article-titre { font-size: 21px; padding: 10px 16px; }
a.sky-article-titre:hover { text-decoration: none; filter: brightness(1.06); }

.sky-profil { text-align: center; padding-bottom: 14px; }
.sky-avatar { width: 150px; height: 150px; object-fit: cover; border: 3px solid var(--b-bord); border-radius: 8px; margin: 14px auto 8px; display: block; }
.sky-avatar-vide { display: grid; place-items: center; font: 700 64px 'Comic Neue', cursive; background: var(--b-titre-fond); color: #fff; }
.sky-humeur { font-size: 14px; padding: 0 12px 8px; }
.sky-desc { font-size: 14px; padding: 4px 14px 10px; line-height: 1.5; text-align: left; overflow-wrap: anywhere; }
.sky-note { font-size: 13px; opacity: .75; padding: 4px 12px; margin: 0; }
.sky-btn {
  font: 700 14px 'Comic Neue', cursive; background: var(--b-btn); color: #fff; border: 2px solid rgba(0,0,0,.12);
  border-radius: 999px; padding: 7px 16px; cursor: pointer; display: inline-block;
}
.sky-btn:hover { filter: brightness(1.08); text-decoration: none; color: #fff; }
.sky-lien-btn { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; font: inherit; font-size: 12px; padding: 2px 4px; }
.sky-lien-btn:hover { opacity: 1; text-decoration: underline; }

/* Compteur de visites style années 2000 */
.sky-compteur { display: flex; justify-content: center; gap: 3px; padding: 14px 10px 8px; }
.sky-compteur span { background: #111; color: #39ff14; font: 700 20px 'Courier New', monospace; padding: 4px 6px; border-radius: 3px; box-shadow: inset 0 -8px 0 rgba(255,255,255,.07); }
.sky-stats { list-style: none; padding: 0 14px 12px; margin: 0; font-size: 14px; line-height: 1.8; }

.sky-amis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.sky-amis a { text-align: center; font-size: 11px; overflow: hidden; }
.sky-amis img, .sky-amis span { width: 56px; height: 56px; border-radius: 6px; object-fit: cover; border: 2px solid var(--b-bord); display: grid; place-items: center; margin: 0 auto 2px; background: var(--b-titre-fond); color: #fff; font-weight: 700; }
.sky-amis small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sky-signaler { text-align: center; }
.sky-evts { list-style: none; margin: 0; padding: 8px 12px; }
.sky-evts li { padding: 5px 0; border-bottom: 1px dashed var(--b-bord); }
.sky-evts li:last-child { border-bottom: 0; }
.sky-evts a { display: flex; flex-direction: column; font-size: 14px; line-height: 1.3; }
.sky-evts small { color: var(--b-texte); opacity: .7; font-size: 12px; }

.sky-image { display: block; max-width: calc(100% - 32px); max-height: 600px; margin: 16px auto 0; border: 3px solid var(--b-bord); border-radius: 6px; }
.sky-article-texte { padding: 16px; line-height: 1.6; font-size: 16px; overflow-wrap: anywhere; }
.sky-article-pied { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 16px; border-top: 2px dashed var(--b-bord); font-size: 13px; }
.sky-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.sky-kiff {
  font: 700 14px 'Comic Neue', cursive; background: #fff; color: #e0186f !important; border: 2px solid #ff6fa8;
  border-radius: 999px; padding: 5px 14px; cursor: pointer;
}
.sky-kiff.on { background: #ff3f8e; color: #fff !important; border-color: #ff3f8e; }
.sky-kiff:hover { transform: scale(1.05); text-decoration: none; }
.sky-com { font-weight: 700; }

.sky-com-item { padding: 10px 0; border-bottom: 1px dashed var(--b-bord); }
.sky-com-item:last-of-type { border-bottom: 0; }
.sky-com-tete { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.sky-com-tete small { opacity: .6; }
.sky-mini-av { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }
.sky-form { margin: 0 0 14px; }
.sky-form textarea { width: 100%; font: inherit; padding: 10px; border: 2px solid var(--b-bord); border-radius: 8px; margin-bottom: 8px; background: #fff; color: #222; resize: vertical; }

.sky-pages, .sky-prevnext { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.sky-prevnext { justify-content: space-between; font-weight: 700; }
.sky-pages a { background: var(--b-boite); border: 2px solid var(--b-bord); border-radius: 6px; padding: 4px 11px; font-weight: 700; }
.sky-pages a.on { background: var(--b-btn); color: #fff; }

/* ---------- Image de fond personnalisée ---------- */
body.blog.fond-perso.fond-mosaique { background: var(--b-image) repeat, var(--b-fond); background-attachment: fixed; }
body.blog.fond-perso.fond-couvrir { background: var(--b-image) center / cover no-repeat fixed, var(--b-fond); }
/* Le titre reste lisible sur n'importe quelle image */
body.blog.fond-perso .sky-banniere { background: rgba(0, 0, 0, .18); border-radius: 16px; margin-top: 10px; backdrop-filter: blur(2px); }
body.blog.fond-perso .sky-url { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); opacity: 1; }

/* ---------- Thèmes ---------- */
body.theme-rose {
  --b-motif: radial-gradient(circle at 20% 20%, rgba(255,255,255,.9) 1.5px, transparent 2.5px) 0 0 / 34px 34px,
             radial-gradient(circle at 70% 60%, rgba(255,255,255,.7) 1px, transparent 2px) 0 0 / 22px 22px;
}
body.theme-nuit {
  --b-fond: radial-gradient(ellipse at top, #24347d, #0a0f2e 70%);
  --b-motif: radial-gradient(circle, #fff 1px, transparent 1.6px) 0 0 / 60px 60px,
             radial-gradient(circle, rgba(255,255,255,.6) 1px, transparent 1.5px) 30px 20px / 90px 90px;
  --b-boite: #141c48; --b-bord: #6f86ff; --b-titre-fond: linear-gradient(180deg, #4e63e8, #2a3aa8);
  --b-texte: #e5e9ff; --b-lien: #9fd0ff; --b-banniere: #ffe066; --b-ombre-titre: #2a3aa8; --b-btn: #4e63e8;
}
body.theme-fluo {
  --b-fond: #c6ff3d;
  --b-motif: repeating-linear-gradient(45deg, rgba(0,0,0,.04) 0 12px, transparent 12px 24px);
  --b-bord: #00c46a; --b-titre-fond: linear-gradient(180deg, #19e07a, #00a85a);
  --b-texte: #12301d; --b-lien: #00873f; --b-banniere: #ff2fa0; --b-ombre-titre: #fff700; --b-btn: #00b35e;
}
body.theme-emo {
  --b-fond: #0d0d0d;
  --b-motif: repeating-linear-gradient(90deg, #111 0 20px, #1a1a1a 20px 40px);
  --b-boite: #161616; --b-bord: #ff2e93; --b-titre-fond: linear-gradient(180deg, #2a2a2a, #000);
  --b-titre-txt: #ff4fae; --b-texte: #e8e8e8; --b-lien: #ff63b8; --b-banniere: #ff2e93; --b-ombre-titre: #000; --b-btn: #ff2e93;
}
body.theme-emo .sky-titre { text-shadow: 0 0 12px #ff2e93; }
body.theme-soleil {
  --b-fond: linear-gradient(180deg, #ffe873, #ff9e48);
  --b-bord: #ff7a1a; --b-titre-fond: linear-gradient(180deg, #ffb13d, #ff6a00);
  --b-texte: #4a2600; --b-lien: #d14e00; --b-banniere: #e03a00; --b-ombre-titre: #fff36b; --b-btn: #ff7a1a;
}
body.theme-ocean {
  --b-fond: linear-gradient(180deg, #a6f3ff, #2a86d0);
  --b-motif: radial-gradient(circle at 50% 50%, rgba(255,255,255,.35) 3px, transparent 4px) 0 0 / 70px 90px;
  --b-bord: #1b7fd1; --b-titre-fond: linear-gradient(180deg, #3eb2ff, #1468b8);
  --b-texte: #0d2c46; --b-lien: #0b62b0; --b-banniere: #fff; --b-ombre-titre: #1468b8; --b-btn: #1b7fd1;
}
body.theme-violet {
  --b-fond: radial-gradient(ellipse at 30% 0%, #8f4dff, #23085c 70%);
  --b-motif: radial-gradient(circle, rgba(255,255,255,.8) 1px, transparent 1.6px) 0 0 / 46px 46px;
  --b-boite: #2c1270; --b-bord: #c49bff; --b-titre-fond: linear-gradient(180deg, #a466ff, #6c2ce0);
  --b-texte: #f1e8ff; --b-lien: #ffb3f0; --b-banniere: #ffd5ff; --b-ombre-titre: #6c2ce0; --b-btn: #a466ff;
}
body.theme-classic {
  --b-fond: #f4f4f4; --b-bord: #c9c9c9; --b-titre-fond: linear-gradient(180deg, #5a7fb5, #3b5f94);
  --b-texte: #222; --b-lien: #2d5aa0; --b-banniere: #2d4a7a; --b-ombre-titre: #dfe6f1; --b-btn: #3b5f94;
}
body.theme-nuit .sky-form textarea, body.theme-emo .sky-form textarea, body.theme-violet .sky-form textarea { background: #0e0e1a; color: #eee; }

@media (max-width: 760px) {
  .sky-corps { grid-template-columns: 1fr; }
  .sky-gauche { order: 2; }
}