/* =========================================================
   çamefatigue.fr — feuille de style
   Fait main, comme en 2004, mais en 2026.
   ========================================================= */

/* ---------- Bases ---------- */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: #ffffff;
  color: #222222;
  font-family: Verdana, Tahoma, sans-serif;
  font-size: 12px;
}
a { color: #0b3d91; }
a:hover { color: #c0392b; }
.px { font-family: "Press Start 2P", monospace; }
.vt { font-family: "VT323", monospace; }
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.muted { color: #666666; font-weight: normal; }
.wrap { max-width: 1180px; margin: 0 auto; position: relative; transition: filter 3s, transform 3s; }
noscript div { padding: 20px; background: #ffffcc; border: 1px solid #b5b58a; margin: 20px; }

/* ---------- FlemmeBar (fausse barre d'outils) ---------- */
.flemmebar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  padding: 4px 10px;
  background: linear-gradient(#f3f1e7, #dcd8c6);
  border-bottom: 1px solid #a9a58f;
  font-family: Tahoma, Verdana, sans-serif; font-size: 11px; color: #222222;
}
.fb-logo { display: inline-flex; align-items: center; gap: 5px; font-weight: bold; color: #1d3f8f; font-style: italic; font-size: 13px; }
.fb-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; background: #ffb300; color: #1d3f8f;
  border: 1px solid #a26f00; border-radius: 50%; font-size: 8px; font-style: normal;
}
.fb-search { display: flex; gap: 0; }
.fb-search input { width: 170px; font-size: 11px; padding: 3px 5px; border: 1px solid #7f9db9; }
.fb-search button { font-size: 11px; padding: 2px 8px; border: 1px solid #7f9db9; background: #e8e8e8; cursor: pointer; }
.fb-gains b { color: #1e7d22; font-family: "VT323", monospace; font-size: 16px; }
.fb-btn {
  font-size: 11px; padding: 3px 8px; cursor: pointer;
  background: linear-gradient(#ffe07a, #ffb300); border: 1px solid #a26f00; border-radius: 3px; font-weight: bold;
}
.fb-fake { font-size: 10px; color: #8a1f11; background: #fff3c4; border: 1px dashed #c9a13a; padding: 1px 6px; }
.disclaimer { max-width: 640px; font-size: 10px; line-height: 1.5; color: #555555; }
.popup-fake { font-size: 10px; color: #666666; }
.fb-link { background: none; border: 0; padding: 2px; color: #555555; text-decoration: underline; cursor: pointer; font-size: 10px; }

/* ---------- En-tête ---------- */
.site-header { position: relative; padding: 10px 12px 18px 12px; border-bottom: 1px solid #c8c8c8; }
.site-header h1 {
  margin: 0; font-family: Verdana, sans-serif; font-size: 20px; color: #3d3d3d;
  position: relative; display: inline-block; padding-right: 24px;
}
.site-header .hello { font-size: 12px; color: #0000cc; text-decoration: none; }
.fallen {
  position: absolute; left: calc(100% - 22px); bottom: -10px;
  display: inline-block; transform: rotate(96deg); transform-origin: left bottom; transition: transform .4s;
}
.fallen:hover { transform: rotate(80deg); }
.dead-pixel {
  position: absolute; right: 37%; top: 14px;
  width: 4px; height: 4px; padding: 0; border: 0; background: #ff00ff; cursor: default;
}

/* ---------- Bannière eau ---------- */
.banner { position: relative; border-bottom: 3px solid #000000; background: #000000; }
.banner canvas {
  display: block; width: 100%; aspect-ratio: 240 / 72;
  image-rendering: pixelated; image-rendering: crisp-edges; cursor: pointer;
}
.banner .credit { position: absolute; right: 8px; bottom: 4px; color: #b9c7ff; font-size: 16px; pointer-events: none; }

/* ---------- Bandeau fatigué ---------- */
.marquee { position: relative; height: 26px; overflow: hidden; background: #ffffcc; border-bottom: 1px solid #c8c8a0; }
.marquee span {
  position: absolute; top: 4px; white-space: nowrap; font-size: 10px; color: #8a1f11;
  animation: tired 26s infinite;
}
@keyframes tired {
  0%   { left: 100%;  transform: translateX(0); }
  30%  { left: 40%;   transform: translateX(0); }
  42%  { left: 36%;   transform: translateX(0); }
  58%  { left: 35.5%; transform: translateX(0); }
  100% { left: 0;     transform: translateX(-100%); }
}

/* ---------- FLASH INFO ---------- */
.flash { display: flex; align-items: stretch; height: 24px; overflow: hidden; background: #000000; border-bottom: 2px solid #d00000; }
.flash-label { flex: none; display: flex; align-items: center; padding: 0 10px; background: #d00000; color: #ffffff; font-size: 8px; z-index: 1; }
.flash-track { position: relative; flex: 1; overflow: hidden; }
.flash-track span {
  position: absolute; top: 0; white-space: nowrap;
  font-family: "VT323", monospace; font-size: 19px; line-height: 24px; color: #ffd400;
  animation: flash-scroll 16s linear infinite;
}
@keyframes flash-scroll { 0% { left: 100%; transform: translateX(0); } 100% { left: 0; transform: translateX(-100%); } }

/* ---------- Alertes horaires ---------- */
.alert { padding: 8px 12px; font-size: 9px; line-height: 1.6; text-align: center; }
.alert-red { background: #d00000; color: #ffffff; animation: blink 1.2s steps(2) infinite; }
.alert-night { background: #10104a; color: #ffd400; }

/* ---------- Pubs ---------- */
.pub-strip { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 12px; border-bottom: 1px solid #e2e2e2; }
.pub-label { font-size: 9px; color: #888888; text-transform: uppercase; letter-spacing: 1px; }
.ad-468 {
  position: relative; display: flex; align-items: center; gap: 10px;
  width: 100%; max-width: 468px; height: 60px; box-sizing: border-box; overflow: hidden;
  padding: 0 10px; text-decoration: none;
  background: repeating-linear-gradient(45deg, #5b1aa8 0 10px, #6a24c0 10px 20px);
  border: 2px solid #ffd400; animation: adborder .6s steps(2) infinite;
}
@keyframes adborder { 50% { border-color: #ff2fa0; } }
.ad-logo { flex: none; color: #ffd400; font-size: 9px; line-height: 1.4; text-shadow: 2px 2px 0 #000000; }
.ad-frames { position: relative; flex: 1; height: 100%; }
.ad-f {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center;
  color: #ffffff; font-size: 10px; line-height: 1.5; text-shadow: 2px 2px 0 #000000;
  opacity: 0; animation: adframe 4.5s linear infinite;
}
.ad-f.f2 { animation-delay: 1.5s; color: #7dfffb; }
.ad-f.f3 { animation-delay: 3s; color: #ffd400; }
@keyframes adframe { 0% { opacity: 1; } 33% { opacity: 1; } 33.4% { opacity: 0; } 100% { opacity: 0; } }
.ad-gift {
  flex: none; width: 34px; height: 30px; position: relative;
  background: #ff2fa0; border: 2px solid #000000; box-sizing: border-box;
  animation: wob .5s infinite;
}
.ad-gift::before { content: ""; position: absolute; left: 12px; top: -2px; width: 6px; height: 30px; background: #ffd400; }
.ad-gift::after { content: ""; position: absolute; left: -2px; top: 10px; width: 34px; height: 6px; background: #ffd400; }

.ad-sky {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  width: 120px; box-sizing: border-box; padding: 10px 6px; margin: 2px auto 0 auto;
  background: linear-gradient(#003a8c, #0074d9); color: #ffffff; text-decoration: none; text-align: center;
  border: 2px solid #000000;
}
.ad-sky:hover { color: #ffffff; }
.sky-title { font-size: 9px; line-height: 1.5; color: #ffd400; }
.sky-phone { width: 46px; height: 86px; background: #222222; border-radius: 8px; padding: 6px 5px; box-sizing: border-box; display: flex; flex-direction: column; gap: 6px; }
.sky-screen { display: block; height: 30px; background: #9bbc0f; color: #0f380f; font-size: 16px; line-height: 30px; animation: blink 1s steps(2) infinite; }
.sky-keys { flex: 1; background: radial-gradient(circle, #888888 2px, transparent 3px) 0 0 / 12px 10px; }
.sky-text { font-size: 18px; line-height: 1.05; }
.sky-text b { color: #ffd400; }
.sky-small { font-size: 8px; line-height: 1.3; color: #cfe3ff; }

/* ---------- Mise en page ---------- */
.layout { display: flex; flex-wrap: wrap; align-items: stretch; }
.side {
  flex: 1 1 230px; max-width: 100%; box-sizing: border-box;
  background: #ececec; border-right: 1px solid #c8c8c8;
  padding: 14px 12px 24px 12px; position: relative; overflow: hidden;
}
.side-inner { position: relative; }
.side h3 { margin: 18px 0 6px 0; font-size: 13px; color: #333333; }
.side h3:first-child { margin-top: 0; }
.side nav a {
  display: block; padding: 3px 4px; border-bottom: 1px solid #d2d2d2;
  font-family: Verdana, sans-serif; font-size: 12px; font-weight: bold;
  /* Le « rollover » qui met le temps de charger, comme les images de l'époque */
  transition: background-color 0s .45s, color 0s .45s;
}
.side nav a:hover { background-color: #1f5f8b; color: #ffffff; cursor: progress; }
.side nav a.current { color: #c0392b; text-decoration: none; }
.side .downloads { margin: 0; padding-left: 14px; display: flex; flex-direction: column; gap: 10px; }
.side .downloads a { font-size: 13px; font-weight: bold; }
.side .small { font-size: 11px; line-height: 1.6; color: #333333; }

.content {
  flex: 999 1 560px; min-width: 0; box-sizing: border-box;
  padding: 18px 26px 30px 26px; display: flex; flex-direction: column; gap: 28px;
}
.content > section { display: flex; flex-direction: column; gap: 10px; }
.content p { margin: 0; line-height: 1.5; }
.content h2.classic { margin: 0; color: #1f5f8b; font-size: 18px; font-family: Verdana, sans-serif; }
.content h2.pixel {
  margin: 0; color: #1f5f8b; font-family: "Press Start 2P", monospace;
  font-size: 15px; line-height: 1.6; text-shadow: 3px 3px 0 #cfe0ee;
}
.content h2.pixel.small { font-size: 12px; text-shadow: none; }
.center-bold { text-align: center; font-weight: bold; font-size: 13px; }
.hidden-text { color: #ffffff; }
.hidden-text::selection { background: #1f5f8b; color: #ffffff; }

/* ---------- Neige ---------- */
.snow { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.flake {
  position: absolute; top: -4%; color: #ffffff; line-height: 1;
  text-shadow: 0 0 1px #7a7a7a, 1px 1px 0 #9a9a9a; font-family: "VT323", monospace;
  animation-name: fall; animation-timing-function: linear; animation-iteration-count: infinite;
}
@keyframes fall { 0% { top: -4%; transform: translateX(0); } 50% { transform: translateX(14px); } 100% { top: 102%; transform: translateX(-6px); } }

/* ---------- Boutons et champs façon Windows 98 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  font-family: Tahoma, Verdana, sans-serif; font-size: 12px; color: #000000; text-decoration: none;
  background: #c0c0c0; border: 2px outset #f0f0f0; padding: 6px 12px; cursor: pointer; min-height: 32px;
}
.btn:hover { color: #000000; }
.btn:active { border-style: inset; }
.btn-danger {
  font-family: "Press Start 2P", monospace; font-size: 10px; background: #d00000; color: #ffffff;
  border: 3px outset #ff6b6b; padding: 10px 14px; cursor: pointer; min-height: 44px;
}
.btn-danger:active { border-style: inset; }
.btn-big { font-family: "Press Start 2P", monospace; font-size: 11px; padding: 12px 18px; min-height: 44px; }
.field { font-family: Verdana, sans-serif; font-size: 12px; padding: 6px; border: 2px inset #e0e0e0; background: #ffffff; box-sizing: border-box; }
.linkish { background: none; border: 0; padding: 0; color: #0b3d91; text-decoration: underline; cursor: pointer; font: inherit; text-align: left; }
.side .linkish { font-size: 12px; font-weight: bold; min-height: 24px; }

/* ---------- Recherche, lecteur, compteur ---------- */
.search { display: flex; gap: 4px; }
.search .field { flex: 1; min-width: 0; }
.player { display: flex; flex-direction: column; gap: 6px; }
.player-screen { background: #0f380f; color: #9bbc0f; font-size: 16px; line-height: 1.1; padding: 6px 8px; border: 2px inset #999999; }
.player-btns { display: flex; gap: 4px; }
.counter { display: inline-flex; gap: 2px; padding: 3px; background: #333333; border: 2px inset #999999; }
.counter span {
  display: inline-block; width: 16px; text-align: center; background: #000000; color: #39ff14;
  font-family: "VT323", monospace; font-size: 22px; line-height: 24px;
}
.counter.overflow span { color: #ff3b3b; animation: blink .25s steps(2) 6; }
.counter-note { font-size: 10px; color: #555555; margin-top: 4px; }

/* ---------- Mascotte ---------- */
.mascot-zone { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.bubble {
  background: #ffffff; border: 2px solid #000000; padding: 8px;
  font-family: "Press Start 2P", monospace; font-size: 8px; line-height: 1.6; max-width: 180px; text-align: center;
}
.bubble[hidden] { display: none; }
.mascot-wrap { position: relative; }
.mascot { background: transparent; border: 0; padding: 0; cursor: pointer; }
.mascot:hover { animation: wob .3s 2; }
@keyframes wob { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.sprite { display: grid; grid-template-columns: repeat(12, 8px); grid-auto-rows: 8px; }
.sprite span { display: block; width: 8px; height: 8px; }
.mascot-name { font-size: 8px; color: #444444; }
.zz { position: absolute; font-family: "Press Start 2P", monospace; color: #5a5a8a; animation: floatz 3s infinite; opacity: 0; pointer-events: none; }
.zz.z1 { left: 88px; top: 0; font-size: 10px; }
.zz.z2 { left: 96px; top: -6px; font-size: 13px; animation-delay: 1s; }
.zz.z3 { left: 104px; top: -12px; font-size: 16px; animation-delay: 2s; }
.awake .zz { display: none; }
@keyframes floatz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(18px, -40px); opacity: 0; } }

/* ---------- Traînée du curseur ---------- */
.trail {
  position: fixed; z-index: 80; pointer-events: none; font-size: 9px; color: #7d5ba6;
  text-shadow: 1px 1px 0 #ffffff; animation: trail .7s linear forwards;
}
@keyframes trail { 0% { opacity: 1; transform: translate(0, 0); } 100% { opacity: 0; transform: translate(4px, 16px); } }

/* ---------- Liste « Ce qui me fatigue » ---------- */
.fatigues { display: flex; flex-direction: column; border: 1px solid #c8c8c8; margin: 0; padding: 0; list-style: none; counter-reset: fat; }
.fatigues li { display: flex; gap: 14px; align-items: flex-start; padding: 12px 14px; border-bottom: 1px solid #e2e2e2; counter-increment: fat; }
.fatigues li:nth-child(even) { background: #f7f7f7; }
.fatigues li::before {
  content: counter(fat); flex: none; width: 34px; height: 34px;
  display: flex; align-items: center; justify-content: center;
  background: #1f5f8b; color: #ffffff; font-family: "Press Start 2P", monospace; font-size: 11px; box-shadow: 3px 3px 0 #000000;
}
.fatigues .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.fatigues .title { font-weight: bold; font-size: 13px; }
.fatigues .text { color: #444444; line-height: 1.45; }
.fatigues .level { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.fatigues .level .vt { font-size: 16px; color: #555555; }
.meter .blk { display: inline-block; width: 10px; height: 10px; margin-right: 2px; border: 1px solid #333333; background: #ffffff; }
.meter .blk.on { background: #7d5ba6; }

/* ---------- News cassées (exprès) ---------- */
.content > section.row { flex-direction: row; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.news { flex: 1 1 300px; transform: rotate(-1.6deg); border: 2px solid #8a8a8a; background: #fafafa; padding: 14px; position: relative; }
.news h2 { margin-bottom: 10px !important; }
.news .item { display: flex; gap: 12px; align-items: flex-start; }
.broken-img { flex: none; width: 64px; height: 64px; box-sizing: border-box; border: 1px solid #999999; background: #ffffff; position: relative; padding: 3px; }
.broken-img span { position: absolute; left: 3px; bottom: 3px; font-size: 8px; color: #666666; }
.news .overflow { margin: 10px 0 -26px 40px; transform: rotate(3deg); background: #fafafa; border: 1px dashed #b0b0b0; padding: 4px 8px; }

/* ---------- Barre de chargement ---------- */
.loading { flex: 1 1 260px; display: flex; flex-direction: column; gap: 10px; padding-top: 8px; }
.loading .label { font-size: 10px; line-height: 1.6; }
.loadbar { display: block; width: 100%; height: 28px; padding: 3px; border: 2px inset #c0c0c0; background: #ffffff; cursor: pointer; }
.loadbar span { display: block; height: 100%; width: 99%; background: repeating-linear-gradient(90deg, #0a246a 0 12px, #ffffff 12px 14px); transition: width 7s steps(20); }
.loadbar.drop span { transition: width .2s steps(3); }
.load-info { font-size: 18px; color: #333333; }
.construction { margin-top: 8px; padding: 10px; background: repeating-linear-gradient(-45deg, #ffd400 0 14px, #1b1b1b 14px 28px); }
.construction div { background: #ffffff; padding: 8px; font-size: 9px; line-height: 1.7; text-align: center; }

/* ---------- Sondage ---------- */
.poll { flex: 1 1 280px; border: 1px solid #c8c8c8; padding: 14px; background: #f4f8fb; display: flex; flex-direction: column; gap: 10px; }
.poll label { display: flex; gap: 8px; align-items: center; min-height: 28px; cursor: pointer; }
.poll fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.poll legend { font-weight: bold; padding: 0; margin-bottom: 6px; }
.results { display: flex; flex-direction: column; gap: 8px; }
.results[hidden] { display: none; }
.result-line { display: flex; justify-content: space-between; gap: 8px; }
.result-line .vt { font-size: 17px; }
.result-bar { height: 10px; background: #dde6ee; border: 1px solid #9fb3c4; }
.result-bar div { height: 100%; background: #e0565b; }

/* ---------- Mini livre d'or (accueil) ---------- */
.guest-mini { flex: 1 1 300px; display: flex; flex-direction: column; gap: 10px; }
.entries-mini { border: 1px solid #c8c8c8; }
.entries-mini > div { padding: 10px; border-bottom: 1px solid #e2e2e2; }
.entries-mini > div:nth-child(even) { background: #f7f7f7; }
.entries-mini > div:last-child { border-bottom: 0; }
.entries-mini .msg { margin-top: 4px; line-height: 1.45; }

/* ---------- Pied de page ---------- */
.site-footer { border-top: 1px solid #c8c8c8; padding: 18px 12px 28px 12px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.badge {
  display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 31px; box-sizing: border-box;
  border: 1px solid #000000; font-family: "Press Start 2P", monospace; font-size: 6px; line-height: 1.5; text-align: center; padding: 2px;
}
.copyright { font-size: 11px; color: #555555; cursor: default; user-select: none; }
.egg-count { font-size: 9px; color: #1f5f8b; }

/* ---------- Toast 8 bits ---------- */
.toast {
  position: fixed; left: 50%; bottom: 24px; width: 340px; max-width: calc(100% - 32px); box-sizing: border-box;
  transform: translate(-50%, 180%); background: #000000; color: #ffffff; border: 4px solid #ffffff; box-shadow: 0 0 0 4px #000000;
  padding: 12px 14px; z-index: 90; display: flex; flex-direction: column; gap: 8px; transition: transform .25s steps(3);
}
.toast.show { transform: translate(-50%, 0); }
.toast-title { font-size: 9px; line-height: 1.6; color: #ffd400; }
.toast-text { font-size: 19px; line-height: 1.15; }

/* ---------- Popups de pub ---------- */
.popup {
  position: fixed; z-index: 70; left: 50%; top: 18%; transform: translateX(-50%);
  width: 340px; max-width: calc(100% - 24px); box-sizing: border-box;
  background: #ece9d8; border: 2px solid #0a246a; box-shadow: 6px 6px 0 rgba(0, 0, 0, .45);
  font-family: Tahoma, Verdana, sans-serif; animation: popin .3s steps(3);
}
.popup.scan { top: auto; bottom: 90px; left: auto; right: 20px; transform: none; }
@keyframes popin { 0% { opacity: 0; } 100% { opacity: 1; } }
.popup-title {
  position: relative; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  padding: 5px 6px 5px 8px; background: linear-gradient(90deg, #0a246a, #3a6ea5); color: #ffffff; font-size: 8px; min-height: 26px; box-sizing: border-box;
}
.popup-x {
  width: 16px; height: 14px; padding: 0; line-height: 10px; font-size: 10px; font-weight: bold;
  background: #c0c0c0; border: 1px outset #ffffff; cursor: pointer; color: #000000;
}
.popup.million .popup-x { width: 10px; height: 10px; font-size: 8px; line-height: 6px; z-index: 2; }
.popup-body { position: relative; padding: 14px; display: flex; flex-direction: column; gap: 10px; align-items: center; text-align: center; line-height: 1.45; }
.popup-body p { margin: 0; }
.million-big { font-size: 12px; line-height: 1.8; color: #d00000; }
.million-big span { font-size: 18px; color: #1e7d22; animation: blink .8s steps(2) infinite; }
.million-claim { font-weight: bold; background: #ffd400; }
.scan-head { font-size: 9px; line-height: 1.6; color: #d00000; }
.scan-bar { width: 100%; height: 18px; border: 1px solid #7f9db9; background: #ffffff; padding: 2px; box-sizing: border-box; }
.scan-bar span { display: block; height: 100%; width: 0; background: repeating-linear-gradient(90deg, #3cb043 0 8px, #ffffff 8px 10px); }
.scan-count { font-size: 22px; color: #d00000; }
.scan-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }

/* ---------- Écrans plein écran ---------- */
.overlay { position: fixed; inset: 0; z-index: 75; width: 100%; border: 0; display: flex; align-items: center; justify-content: center; padding: 24px; box-sizing: border-box; }
.overlay[hidden] { display: none; }
.bsod { background: #0000aa; color: #ffffff; cursor: default; text-align: left; }
.bsod .vt { display: block; max-width: 640px; font-size: 24px; line-height: 1.25; }
.bsod .tag { display: inline-block; background: #aaaaaa; color: #0000aa; padding: 0 8px; margin-bottom: 18px; }
.sleep { background: #0b0b1e; color: #c9c9ff; cursor: pointer; flex-direction: column; gap: 20px; }
.sleep .big { font-size: 40px; letter-spacing: 8px; color: #8f8fd9; }
.sleep .small { font-size: 12px; line-height: 1.8; text-align: center; }
.saver { background: #000000; padding: 0; display: block; cursor: none; }
.saver-box {
  position: absolute; left: 0; top: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 10px; border: 3px solid #39ff14; color: #39ff14;
}
.saver-zz { font-size: 10px; }
.saver-hint { position: absolute; left: 0; right: 0; bottom: 14px; text-align: center; color: #555555; font-size: 18px; }
.blink { animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Mode Game Boy (code Konami) ---------- */
body.gb .wrap { filter: grayscale(1) sepia(1) hue-rotate(45deg) saturate(2.6) contrast(1.15); }

/* ---------- Le site qui se fatigue ---------- */
body.tired-1 .wrap { filter: saturate(.6); }
body.tired-2 .wrap { filter: saturate(.35) brightness(1.05); transform: rotate(.4deg); }
body.tired-3 .wrap { filter: saturate(.1) brightness(1.1) blur(.3px); transform: rotate(1deg) translateY(6px); }

/* =========================================================
   Livre d'or
   ========================================================= */
.window { border: 2px outset #e8e8e8; background: #f0f0f0; display: flex; flex-direction: column; }
.window-title { background: #0a246a; color: #ffffff; font-size: 9px; padding: 7px 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.window-title .ctrls { display: flex; gap: 3px; }
.window-title .ctrls span { display: inline-block; width: 14px; height: 12px; background: #c0c0c0; border: 1px outset #ffffff; }
.window-body { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; }
.form-col { display: flex; flex-direction: column; gap: 4px; flex: 1 1 220px; }
.form-col.narrow { flex: 0 1 260px; }
.window-body > .form-col { flex: none; }
.lbl { font-weight: bold; font-size: 12px; }
.stars { display: flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.star { width: 30px; height: 30px; padding: 0; border: 0; background: transparent; cursor: pointer; font-family: "Press Start 2P", monospace; font-size: 18px; line-height: 30px; color: #b0b0b0; }
.star.on { color: #e0a800; }
.star-note { margin-left: 8px; color: #555555; font-size: 11px; }
.smileys { display: flex; flex-wrap: wrap; gap: 4px; }
.smiley { font-family: "VT323", monospace; font-size: 17px; background: #ffffcc; border: 1px solid #b5b58a; padding: 2px 8px; cursor: pointer; min-height: 30px; }
.smiley:hover { background: #fff27a; }
textarea.field { resize: vertical; line-height: 1.5; }
.actions { flex: 1 1 260px; display: flex; gap: 8px; align-items: center; min-height: 44px; }
.dodge { transition: transform .18s steps(3); min-width: 110px; min-height: 40px; font-weight: bold; }
.error { display: flex; gap: 10px; align-items: center; background: #ffffff; border: 1px solid #b00000; padding: 8px 10px; color: #8a0000; }
.error[hidden], .thanks[hidden], .paging[hidden], [hidden] { display: none !important; }
.error .x { flex: none; width: 22px; height: 22px; border-radius: 50%; background: #d00000; color: #ffffff; display: flex; align-items: center; justify-content: center; font-size: 10px; }
.thanks { background: #ffffcc; border: 1px solid #b5b58a; padding: 8px 10px; line-height: 1.5; }
.entries { border: 1px solid #c8c8c8; display: flex; flex-direction: column; }
.entry { padding: 14px 16px; border-bottom: 1px solid #e2e2e2; display: flex; flex-direction: column; gap: 6px; background: #ffffff; }
.entry:nth-child(even) { background: #f7f7f7; }
.entry.mine { background: #ffffee; }
.entry.reply { background: #eef4fa; margin-left: 32px; }
.entry.reply .author { color: #1f5f8b; }
.entry-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 14px; align-items: baseline; }
.entry .author { font-size: 13px; font-weight: bold; }
.entry .meta { font-size: 16px; color: #555555; }
.entry .meta .s-on { color: #e0a800; }
.entry .meta .s-off { color: #c8c8c8; }
.entry .msg { line-height: 1.5; white-space: pre-line; }
.entry .via { font-size: 10px; color: #777777; }
.entry pre { margin: 0; font-size: 16px; line-height: 1; color: #555555; }
.entry .deleted { color: #777777; font-style: italic; line-height: 1.5; }
.spam { text-decoration: line-through; color: #777777; line-height: 1.5; }
.pager { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; }
.pager .vt { font-size: 18px; }
.paging { text-align: center; font-size: 18px; color: #555555; }

/* =========================================================
   Générateur d'excuses
   ========================================================= */
.terminal {
  background: #000000; color: #39ff14; border: 3px solid #555555; box-shadow: inset 0 0 0 2px #1b1b1b;
  padding: 18px; min-height: 120px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
}
.terminal .prompt { font-size: 16px; color: #1e9e0f; }
.terminal .excuse { font-size: 26px; line-height: 1.2; }
.terminal .cursor { animation: blink 1s steps(2) infinite; }
.excuse-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.excuse-count { font-size: 17px; color: #555555; }

/* =========================================================
   Top 10
   ========================================================= */
.chart-box { overflow-x: auto; border: 2px solid #1b1b1b; }
.chart { width: 100%; border-collapse: collapse; min-width: 480px; }
.chart th { background: #1b1b1b; color: #ffd400; font-family: "Press Start 2P", monospace; font-size: 8px; padding: 8px; text-align: left; }
.chart td { padding: 10px 8px; border-bottom: 1px solid #e2e2e2; vertical-align: middle; }
.chart tr:nth-child(even) td { background: #f7f7f7; }
.chart .pos { font-family: "Press Start 2P", monospace; font-size: 14px; color: #1f5f8b; width: 44px; }
.chart tr.first .pos { color: #c0392b; font-size: 18px; }
.chart .trend { font-family: "VT323", monospace; font-size: 20px; width: 60px; }
.trend.up { color: #1e7d22; }
.trend.down { color: #c0392b; }
.trend.same { color: #777777; }
.trend.new { color: #ffffff; background: #d00000; font-family: "Press Start 2P", monospace; font-size: 8px; padding: 3px 5px; animation: blink 1s steps(2) infinite; }
.chart .weeks { font-family: "VT323", monospace; font-size: 18px; color: #555555; white-space: nowrap; }
.chart .name b { font-size: 13px; }
.chart .name span { display: block; color: #555555; margin-top: 2px; }

/* =========================================================
   Mes potes
   ========================================================= */
.friends { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.friend { border: 1px solid #c8c8c8; background: #fafafa; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.friend-banner {
  display: flex; align-items: center; justify-content: center; height: 60px; text-decoration: none;
  font-family: "Press Start 2P", monospace; font-size: 10px; line-height: 1.5; text-align: center; padding: 0 8px; border: 2px solid #000000;
}
.friend-banner.b88 { width: 88px; height: 31px; font-size: 6px; padding: 2px; box-sizing: border-box; }
.friend-name { font-weight: bold; font-size: 13px; }
.friend-status { font-size: 10px; }
.friend-status.dead { color: #c0392b; }
.friend-status.alive { color: #1e7d22; }
.friend-error { font-size: 17px; background: #ffffff; border: 1px solid #b00000; color: #8a0000; padding: 6px 8px; }

/* =========================================================
   FAQ
   ========================================================= */
.faq { display: flex; flex-direction: column; border: 1px solid #c8c8c8; }
.faq details { border-bottom: 1px solid #e2e2e2; }
.faq details:last-child { border-bottom: 0; }
.faq summary { cursor: pointer; padding: 12px 14px; font-weight: bold; font-size: 13px; list-style: none; display: flex; gap: 10px; align-items: baseline; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; font-family: "Press Start 2P", monospace; font-size: 10px; color: #1f5f8b; flex: none; }
.faq details[open] summary::before { content: "-"; }
.faq details[open] summary { background: #f4f8fb; }
.faq .answer { padding: 4px 14px 14px 34px; line-height: 1.5; }
.hints { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; line-height: 1.5; }

/* =========================================================
   Fatigue-o-mètre + diplôme
   ========================================================= */
.quiz { display: flex; flex-direction: column; gap: 14px; }
.quiz fieldset { border: 1px solid #c8c8c8; background: #fafafa; padding: 12px 14px; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.quiz legend { font-weight: bold; font-size: 13px; padding: 0 6px; }
.quiz label { display: flex; gap: 8px; align-items: center; min-height: 28px; cursor: pointer; }
.result { border: 3px double #1f5f8b; padding: 16px; background: #f4f8fb; display: flex; flex-direction: column; gap: 10px; }
.result-big { font-size: 18px; color: #c0392b; line-height: 1.6; }
.diploma {
  border: 10px double #7d5ba6; background: #fffdf2; padding: 26px 22px; text-align: center;
  display: flex; flex-direction: column; gap: 12px; align-items: center;
}
.diploma .d-top { font-size: 9px; letter-spacing: 2px; color: #7d5ba6; }
.diploma .d-title { font-size: 16px; line-height: 1.6; color: #1b1b1b; }
.diploma .d-name { font-family: "VT323", monospace; font-size: 40px; color: #1f5f8b; border-bottom: 2px solid #1b1b1b; padding: 0 20px; min-width: 200px; }
.diploma .d-text { max-width: 460px; line-height: 1.6; }
.diploma .d-foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; width: 100%; max-width: 480px; align-items: center; margin-top: 8px; }
.diploma .d-seal {
  width: 76px; height: 76px; border-radius: 50%; background: #c0392b; color: #ffd400;
  display: flex; align-items: center; justify-content: center; font-size: 7px; line-height: 1.5; border: 4px dotted #ffd400;
  transform: rotate(-12deg);
}
.diploma .d-sign { font-family: "VT323", monospace; font-size: 20px; text-align: left; }

/* =========================================================
   Rien à gagner
   ========================================================= */
.prize { text-align: center; display: flex; flex-direction: column; gap: 14px; align-items: center; }
.prize-big { font-size: 20px; line-height: 1.6; color: #d00000; animation: blink 1s steps(2) infinite; }
.prize-table { border-collapse: collapse; min-width: 280px; }
.prize-table td { border: 1px solid #c8c8c8; padding: 8px 12px; text-align: left; }
.prize-table td:last-child { font-family: "VT323", monospace; font-size: 20px; text-align: right; }

/* =========================================================
   Intro « Cliquez pour entrer »
   ========================================================= */
body.intro { background: #000000; color: #ffffff; min-height: 100vh; display: flex; align-items: center; justify-content: center; }
.intro-box { display: flex; flex-direction: column; align-items: center; gap: 26px; padding: 24px; text-align: center; }
.intro-title { font-size: 22px; line-height: 1.6; color: #ffd400; text-shadow: 4px 4px 0 #7d5ba6; }
.intro-sub { font-size: 20px; color: #b9c7ff; }
.intro-loader { width: 300px; max-width: 80vw; display: flex; flex-direction: column; gap: 8px; }
.intro-bar { height: 16px; border: 2px solid #ffffff; padding: 2px; }
.intro-bar span { display: block; height: 100%; width: 0; background: #39ff14; }
.intro-pct { font-size: 18px; color: #39ff14; }
.intro-enter {
  font-family: "Press Start 2P", monospace; font-size: 14px; color: #ffffff; background: transparent;
  border: 3px solid #ffffff; padding: 16px 22px; cursor: pointer; animation: blink 1s steps(2) infinite; text-decoration: none;
}
.intro-enter:hover { color: #ffd400; border-color: #ffd400; }
.intro-skip { background: none; border: 0; color: #888888; text-decoration: underline; cursor: pointer; font-family: Verdana, sans-serif; font-size: 11px; min-height: 30px; }
.intro-eggs { font-size: 8px; color: #555555; }
.intro .sprite { transform: scale(1.5); margin: 18px 0; }

/* ---------- Impression (le diplôme seulement) ---------- */
@media print {
  body.printing .flemmebar, body.printing .site-header, body.printing .banner, body.printing .marquee,
  body.printing .flash, body.printing #alerts, body.printing .pub-strip, body.printing .side,
  body.printing .site-footer, body.printing .toast, body.printing .popup, body.printing .trail,
  body.printing .content > :not(.print-zone) { display: none !important; }
  body.printing .print-zone > :not(.diploma) { display: none !important; }
  body.printing .wrap { filter: none !important; transform: none !important; }
}

/* =========================================================
   Petits écrans
   ========================================================= */
@media (max-width: 640px) {
  .content { padding: 16px; }
  .site-header h1 { font-size: 16px; }
  .side { border-right: 0; border-bottom: 1px solid #c8c8c8; }
  .news { transform: rotate(-1deg); }
  .fb-search input { width: 120px; }
  .popup.scan { right: 12px; left: 12px; bottom: 90px; width: auto; }
  .terminal .excuse { font-size: 21px; }
  .intro-title { font-size: 16px; }
}