/* Mode Skyblog — charte MODE-SKYBLOG.md · partagé index + devblog
   Univers de skin propre au demo (rétro Y2K, valeurs en dur volontaires) —
   distinct du design system articles (public/viewer/ + /shared/tokens.css).
   Voir docs/DESIGN-SYSTEM.md. */
* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Comic Sans MS", "Chalkboard SE", "Trebuchet MS", sans-serif;
  font-size: 13px;
  color: #222;
  background: #ffb6e6 url("data:image/svg+xml,%3Csvg width='20' height='20' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='3' cy='3' r='1' fill='%23ff88cc'/%3E%3Ccircle cx='13' cy='11' r='1' fill='%23cc88ff'/%3E%3C/svg%3E") repeat;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='24'%3E%3Ctext y='16' font-size='14'%3E✨%3C/text%3E%3C/svg%3E"), auto;
}

a { color: #0000ff; font-weight: bold; }
a:hover { color: #ff00ff; background: #ffff00; }

.wrap { max-width: 1000px; margin: 0 auto; padding: 6px; }

.uc {
  text-align: center;
  background: #ffff00;
  border: 3px dashed #ff0000;
  padding: 4px;
  font-size: 11px;
  animation: uc-blink 0.8s step-end infinite;
}
@keyframes uc-blink { 50% { background: #ffcccc; } }

.banner {
  text-align: center;
  background: linear-gradient(90deg, #ff0066, #ffcc00, #00ff00, #00ccff, #ff0066);
  background-size: 200% 100%;
  animation: rainbow-bg 4s linear infinite;
  border: 5px double #fff;
  padding: 10px;
  box-shadow: 4px 4px 0 #660066;
}
@keyframes rainbow-bg { to { background-position: 200% 0; } }

.banner h1 {
  margin: 0;
  font-size: 22px;
  font-family: "Impact", "Arial Black", sans-serif;
  color: #fff;
  text-shadow: 2px 2px 0 #000, -1px -1px 0 #ff00ff;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.banner .sub {
  font-size: 11px;
  color: #fff;
  text-shadow: 1px 1px 0 #000;
  margin-top: 4px;
}

.rainbow { animation: rainbow-txt 2s linear infinite; font-weight: bold; }
@keyframes rainbow-txt {
  0% { color: #ff0000; } 16% { color: #ff8800; } 33% { color: #ffff00; }
  50% { color: #00ff00; } 66% { color: #0088ff; } 83% { color: #ff00ff; }
}

.blink { animation: blink 0.7s step-end infinite; }
@keyframes blink { 50% { visibility: hidden; } }

.marquee-wrap {
  background: #000;
  color: #00ff00;
  font-family: "Courier New", monospace;
  font-size: 11px;
  padding: 3px;
  border: 3px ridge #888;
  overflow: hidden;
  white-space: nowrap;
}
.marquee-wrap span { display: inline-block; animation: scroll 30s linear infinite; }
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

.msn-bar {
  background: linear-gradient(#4a7ebb, #2d5a9e);
  color: #fff;
  font-size: 11px;
  padding: 4px 8px;
  border: 2px outset #6b9fd4;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 6px;
  align-items: center;
}
.msn-dot { color: #7fff7f; }

.skin-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-left: auto;
}
.skin-btn {
  font-family: inherit;
  font-size: 10px;
  padding: 2px 8px;
  border: 2px outset #ccc;
  background: #eee;
  cursor: pointer;
  font-weight: bold;
}
.skin-btn:hover { background: #ffff99; }
.skin-btn[aria-pressed="true"] { border-style: inset; background: #cfc; }
.skin-btn:disabled { opacity: 0.55; cursor: default; }

.layout { display: grid; grid-template-columns: 195px 1fr 175px; gap: 8px; margin-top: 8px; }
@media (max-width: 760px) { .layout { grid-template-columns: 1fr; } }

.panel {
  background: #fff;
  border: 4px groove #ff99dd;
  padding: 8px;
  box-shadow: inset 2px 2px 6px #ffe0f0;
}
.panel h2 {
  margin: 0 0 6px;
  font-size: 12px;
  color: #cc0066;
  background: #ffe6f5;
  border: 1px solid #ff99cc;
  padding: 3px 6px;
  text-align: center;
}

.avatar {
  width: 90px; height: 90px;
  border: 4px solid #ff00aa;
  background: linear-gradient(135deg, #220033, #6600aa);
  display: flex; align-items: center; justify-content: center;
  font-size: 42px; margin: 0 auto 6px;
  box-shadow: 3px 3px 0 #000;
}

.titles {
  font-size: 10px;
  line-height: 1.45;
  text-align: center;
  color: #550066;
  margin: 0 0 8px;
  padding: 6px;
  background: #fffacd;
  border: 1px dotted #cc9900;
}
.titles .final {
  display: block;
  margin-top: 4px;
  font-size: 12px;
  font-weight: bold;
  color: #990000;
  text-shadow: 1px 1px 0 #ffcc00;
}

.sidebar ul, .friends ul, .links-dumb ul { list-style: "★ "; padding-left: 18px; margin: 0; }
.sidebar li, .friends li, .links-dumb li { margin: 5px 0; }
.audit-primary a { color: #cc0066; text-decoration: underline wavy; }
.audit-primary a::before { content: "★ "; }

.counter {
  text-align: center;
  background: #111;
  color: #0f0;
  font-family: "Courier New", monospace;
  padding: 8px;
  border: 4px inset #444;
  font-size: 22px;
  letter-spacing: 4px;
  text-shadow: 0 0 6px #0f0;
}

.winamp {
  background: #333;
  border: 2px outset #666;
  padding: 4px;
  font-size: 10px;
  color: #0f0;
  font-family: monospace;
  margin-top: 8px;
}
.winamp .bar {
  height: 8px;
  background: linear-gradient(90deg, #0a0, #ff0, #f00);
  margin-top: 3px;
  animation: eq 0.5s ease-in-out infinite alternate;
}
@keyframes eq { from { width: 40%; } to { width: 95%; } }

.post {
  margin-bottom: 12px;
  padding: 8px;
  border: 2px solid #ffccdd;
  background: #fffafa;
}
.post.post-future { opacity: 0.88; border-style: dashed; background: #fafafa; }
.post.is-hidden { display: none; }

.post h3 { margin: 0 0 3px; font-size: 14px; }
.post h3 a { text-decoration: none; }
.post h3 a:hover { text-decoration: underline wavy; }

.meta { font-size: 10px; color: #999; margin-bottom: 4px; font-style: italic; }
.post-links { font-size: 10px; margin: 6px 0 0; }

.badge {
  display: inline-block;
  font-size: 10px;
  padding: 1px 5px;
  margin-right: 3px;
  border: 1px solid #aaa;
}
.b-ok { background: #cfc; }
.b-warn { background: #ffc; }
.b-block { background: #fcc; }
.b-future { background: #eee; }
.b-draft { background: #fdd; border-color: #c99; }

.cat-heading {
  font-size: 12px;
  color: #990066;
  background: #ffe6f5;
  border: 1px solid #ff99cc;
  padding: 4px 8px;
  margin: 14px 0 8px;
  text-align: center;
}
.cat-heading.is-hidden { display: none; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  justify-content: center;
  margin-bottom: 10px;
  padding: 6px;
  background: #f0f0ff;
  border: 2px dotted #9999ff;
}
.filter-bar button {
  font-family: inherit;
  font-size: 10px;
  padding: 3px 10px;
  border: 2px outset #ccc;
  background: #fff;
  cursor: pointer;
  font-weight: bold;
}
.filter-bar button.active { border-style: inset; background: #ffccff; color: #660066; }

.intro-box {
  background: #ffff99;
  border: 3px double #ff6600;
  padding: 8px;
  margin-bottom: 10px;
  font-size: 12px;
}

.mood {
  text-align: center;
  font-size: 11px;
  padding: 6px;
  background: #e8f4ff;
  border: 2px dashed #6699cc;
  margin-bottom: 10px;
}

.guestbook { background: #f5f5ff; border: 2px inset #999; padding: 6px; margin-top: 10px; }
.guestbook .entry {
  font-size: 11px;
  border-bottom: 1px dotted #ccc;
  padding: 4px 0;
}
.guestbook textarea {
  width: 100%;
  height: 40px;
  font-family: inherit;
  font-size: 11px;
  border: 2px inset #ccc;
}

.webring {
  text-align: center;
  font-size: 10px;
  margin-top: 10px;
  padding: 6px;
  background: #000;
  color: #0ff;
}

.footer {
  text-align: center;
  font-size: 10px;
  color: #666;
  margin: 12px 0 6px;
  border-top: 2px dotted #ff99cc;
  padding-top: 8px;
}

.legend { font-size: 10px; line-height: 1.5; }
.stat-key {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  margin: 0 6px 4px 0;
  vertical-align: top;
}
.stat-key .emo { font-size: 30px; line-height: 1; }
.stat-key .cod { font-size: 9px; font-weight: 700; letter-spacing: .06em; }
.sparkle::before { content: "✧ "; }
.sparkle::after { content: " ✧"; }

table.hit-parade { width: 100%; font-size: 10px; border-collapse: collapse; }
table.hit-parade td { border: 1px solid #ffccdd; padding: 2px 4px; }
table.index-resume { width: 100%; font-size: 9px; border-collapse: collapse; margin-top: 4px; }
table.index-resume th, table.index-resume td { border: 1px solid #ffccdd; padding: 2px 3px; vertical-align: top; }
table.index-resume th { background: #ffe6f5; color: #990066; font-size: 8px; }
table.index-resume td.health { text-align: center; white-space: nowrap; }
.center { text-align: center; }

/* ── Lisibilité pratique (MODE-SKYBLOG : sérieux sous le délire) ── */
.synthèse-pratique {
  background: #f8fff8;
  border: 3px solid #339933;
  padding: 10px;
  margin-bottom: 12px;
  font-size: 12px;
}
.synthèse-pratique h2 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #006600;
  text-align: center;
}
.synthèse-pratique .hint {
  font-size: 10px;
  color: #666;
  text-align: center;
  margin: 0 0 8px;
}
table.synthèse-scan { width: 100%; border-collapse: collapse; font-size: 11px; }
table.synthèse-scan th, table.synthèse-scan td {
  border: 1px solid #9c9;
  padding: 4px 6px;
  vertical-align: top;
}
table.synthèse-scan th { background: #e8ffe8; color: #060; font-size: 10px; }
table.synthèse-scan tr:hover { background: #fffff0; }
table.synthèse-scan .santé { text-align: center; white-space: nowrap; }

.post-facts {
  margin: 6px 0 8px;
  padding: 6px 8px;
  background: #f0f8ff;
  border-left: 4px solid #0066cc;
  font-size: 11px;
  line-height: 1.45;
}
.post-facts dt {
  float: left;
  clear: left;
  width: 4.2em;
  font-weight: bold;
  color: #004488;
}
.post-facts dd {
  margin: 0 0 4px 4.5em;
}
.post-story {
  font-size: 12px;
  line-height: 1.5;
  color: #333;
}
.brief-list { font-size: 10px; padding-left: 16px; margin: 0; line-height: 1.5; }
.brief-list li { margin-bottom: 4px; }

/* Mode lecture : calme, scannable, pas de FOMO */
body.mode-lecture {
  font-size: 15px;
  line-height: 1.55;
  background: #f5f5f0;
}
body.mode-lecture .blink,
body.mode-lecture .uc,
body.mode-lecture .rainbow { animation: none !important; }
body.mode-lecture .marquee-wrap,
body.mode-lecture .winamp,
body.mode-lecture .titles,
body.mode-lecture .decor-only { display: none !important; }
body.mode-lecture .banner { animation: none; background: #444; }
body.mode-lecture .post { background: #fff; border-color: #ccc; }
body.mode-lecture .post-facts { font-size: 12px; background: #eef6ff; }
body.mode-lecture .post-story { font-size: 14px; }
body.mode-lecture .synthèse-pratique { font-size: 13px; }
body.mode-lecture .guestbook .entry:not(.entry-useful) { display: none; }

.skin-btn.mode-lecture-on { background: #cfc; border-color: #393; }