/* Hotel Ombrelaine - le site du veilleur (2006) */
html { background: #2a0f0f; }
body { margin: 0; padding: 12px 12px 30px; font: 14px/1.55 "Times New Roman", Times, serif; color: #2b1d14;
  background: #2a0f0f repeating-linear-gradient(45deg, #2a0f0f 0 6px, #2f1212 6px 12px); }
a { color: #0033cc; }
a:visited { color: #663399; }
img { max-width: 100%; height: auto; }
.page { max-width: 900px; margin: 0 auto; background: #fbf5e6; border: 3px ridge #c9a45c; }
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding: 14px 16px;
  background: #5b1414; background: linear-gradient(#7a1d1d, #4a0e0e); border-bottom: 3px double #c9a45c; }
.logo { font: normal 30px/1 Georgia, serif; letter-spacing: 0.14em; color: #f0d58f; text-shadow: 2px 2px 0 #2a0808; }
.logo small { display: block; margin-top: 6px; font: italic 13px Georgia, serif; letter-spacing: 0.04em; color: #e8cf94; text-shadow: none; }
.clock { font: 12px Arial, sans-serif; color: #f6e7c3; background: #2a0808; border: 2px inset #8a5a2a; padding: 6px 10px; text-align: center; min-width: 170px; }
.clock b { display: block; font: bold 20px "Courier New", monospace; color: #7CFC00; letter-spacing: 0.08em; }
.clock .st { font-size: 11px; }
.clock .st.on { color: #7CFC00; } .clock .st.off { color: #ff6b5b; }
.marq { overflow: hidden; white-space: nowrap; background: #000; color: #ffd24a; font: bold 12px Arial, sans-serif; padding: 3px 0; border-bottom: 1px solid #c9a45c; }
.marq span { display: inline-block; padding-left: 100%; animation: marq 26s linear infinite; }
@keyframes marq { to { transform: translateX(-100%); } }
.cols { display: flex; align-items: flex-start; }
.side { flex: 0 0 170px; padding: 12px 10px; background: #efe2c4; border-right: 2px groove #c9a45c; min-height: 480px; }
.side a.bt { display: block; margin: 0 0 5px; padding: 5px 8px; font: bold 12px Arial, sans-serif; color: #fff4d8; text-decoration: none;
  background: #6e1b1b; border: 2px outset #a04040; }
.side a.bt:hover { background: #8c2424; }
.side a.bt:active { border-style: inset; }
.side a.bt.on { background: #2a0808; border-style: inset; }
.live { color: #ff3b30; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.badge { display: block; margin: 10px 0 0; padding: 3px; font: 10px Verdana, Arial, sans-serif; text-align: center; color: #333; background: #ddd; border: 1px solid #888; }
.badge.b2 { background: #003399; color: #fff; }
.count { margin: 12px 0 0; text-align: center; font: 11px Arial, sans-serif; }
.count span { display: inline-block; margin-top: 3px; font: bold 13px "Courier New", monospace; background: #000; color: #7CFC00; padding: 1px 5px; letter-spacing: 0.25em; }
.main { flex: 1 1 auto; min-width: 0; padding: 16px 22px 26px; }
.main h1 { margin: 0 0 12px; font: bold 24px Georgia, serif; color: #6e1b1b; }
.main h2 { margin: 22px 0 8px; padding: 3px 8px; font: bold 15px Arial, sans-serif; color: #fff4d8; background: #6e1b1b; }
.main h3 { margin: 16px 0 4px; font: bold 14px Arial, sans-serif; color: #6e1b1b; }
hr { border: 0; border-top: 2px groove #c9a45c; margin: 18px 0; }
.new { font: bold 10px Arial, sans-serif; color: #fff; background: #e00; padding: 0 3px; animation: blink 1s steps(2) infinite; }
.box { margin: 0 0 16px; padding: 10px 12px; background: #fff9d9; border: 1px dashed #b8902f; font-size: 13px; }
.box.red { background: #ffe7e2; border-color: #c0392b; }
.small { font-size: 12px; color: #6d5a48; }
.foot { max-width: 900px; margin: 8px auto 0; text-align: center; font: 11px Arial, sans-serif; color: #c9b089; }
.foot a { color: #f0d58f; }
.foot .staff { color: #7a5a4a; }
table.t { width: 100%; border-collapse: collapse; font: 12.5px Arial, sans-serif; }
table.t th, table.t td { text-align: left; padding: 4px 6px; border: 1px solid #cdb994; vertical-align: top; }
table.t th { background: #e6d3a8; }
table.t tr:nth-child(even) td { background: #f6ecd4; }
.scroll { overflow-x: auto; }
.pic { display: block; border: 4px solid #fff; outline: 1px solid #a88; box-shadow: 3px 3px 0 #c9b28a; }
.cap { font: italic 12px Arial, sans-serif; color: #6d5a48; margin: 4px 0 14px; }

/* le journal */
.jr { display: flex; gap: 18px; align-items: flex-start; }
.jr .years { flex: 0 0 120px; font: 12px Arial, sans-serif; }
.jr .years a { display: block; }
.jr .posts { flex: 1 1 auto; min-width: 0; }
.post { margin: 0 0 16px; }
.post .d { font: bold 12px Arial, sans-serif; color: #6e1b1b; border-bottom: 1px dotted #b59a72; margin-bottom: 3px; }
.post p { margin: 0 0 6px; }
.post img { width: 240px; }
.gap { color: #fbf5e6; font-size: 12px; }
.gap::selection { background: #6e1b1b; color: #fff; }

/* photos */
.gal { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.gal a { display: block; font: 11px Arial, sans-serif; color: #2b1d14; text-decoration: none; }
.gal img { display: block; width: 100%; border: 3px solid #fff; outline: 1px solid #a88; }
.gal span { display: block; margin-top: 3px; }
.viewer { text-align: center; }
.viewer .pic { margin: 0 auto; }
.viewer .navp { font: 13px Arial, sans-serif; margin: 10px 0; }

/* le lecteur vidéo */
.vid { margin: 0 0 22px; }
.player { max-width: 480px; background: #1a1a1a; border: 2px outset #777; padding: 6px; }
.player canvas, .player video { display: block; width: 100%; height: auto; background: #000; }
.player .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 6px; font: 11px "Courier New", monospace; color: #9f9; }
.player button { font: bold 11px Arial, sans-serif; padding: 2px 7px; background: #ccc; border: 2px outset #eee; cursor: pointer; }
.player button:active { border-style: inset; }
.player input[type=range] { flex: 1 1 120px; min-width: 80px; }
.player .fr { margin-left: auto; }

/* webcams */
.cams { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 8px; }
.cams button { font: bold 12px Arial, sans-serif; padding: 4px 10px; background: #ddd; border: 2px outset #eee; cursor: pointer; }
.cams button.on { background: #333; color: #7CFC00; border-style: inset; }
.cam { max-width: 640px; background: #000; border: 3px inset #555; }
.cam canvas { display: block; width: 100%; height: auto; }
.motion { font: 12px "Courier New", monospace; }

/* livre d'or */
.gb { margin: 0 0 12px; padding: 8px 10px; background: #fff; border: 1px solid #d8c7a4; }
.gb .who { font: 11px Arial, sans-serif; color: #7d6d5d; margin-top: 4px; }
.gb .mod { font: italic 11px Arial, sans-serif; color: #b0301f; }
.gb .rep { margin: 6px 0 0 14px; padding: 4px 8px; border-left: 3px solid #6e1b1b; font-size: 13px; color: #4a2a1a; background: #fbf1dc; }
.gb.wait { opacity: 0.7; }
form.f { display: grid; gap: 6px; max-width: 420px; margin: 0 0 18px; font: 12px Arial, sans-serif; }
form.f input, form.f textarea, form.f select { font: 13px Arial, sans-serif; padding: 3px; border: 2px inset #ccc; }
form.f textarea { height: 70px; }
form.f button { justify-self: start; font: bold 12px Arial, sans-serif; padding: 3px 12px; background: #ddd; border: 2px outset #eee; cursor: pointer; }
.res { font: 13px Arial, sans-serif; }

/* le bureau (réservé au personnel) */
.desk { background: #1d2530; }
.desk .page { background: #eef0f2; border: 2px solid #56657a; }
.desk .top { background: #2e3a4a; border-bottom: 2px solid #8899aa; }
.desk .logo { font: bold 18px Verdana, Arial, sans-serif; letter-spacing: 0.08em; color: #dfe7f0; text-shadow: none; }
.desk .logo small { color: #aab8c8; font: 11px Verdana, Arial, sans-serif; }
.desk .main { font: 13px Verdana, Arial, sans-serif; }
.desk .main h1 { font: bold 17px Verdana, Arial, sans-serif; color: #2e3a4a; }
.desk .main h2 { background: #2e3a4a; color: #fff; }
.desk ul.dl li { margin: 5px 0; }
.desk .dead { color: #999; text-decoration: line-through; }
.keypad { display: grid; grid-template-columns: repeat(3, 56px); gap: 6px; margin: 10px 0; }
.keypad button { height: 42px; font: bold 18px Arial, sans-serif; background: #dfe3e8; border: 2px outset #fff; cursor: pointer; }
.code { font: bold 24px "Courier New", monospace; letter-spacing: 0.4em; background: #000; color: #7CFC00; padding: 6px 10px; width: 190px; min-height: 30px; }
.term { background: #0c0f0d; color: #a7c7a2; font: 13px/1.6 "Courier New", monospace; padding: 12px; white-space: pre-wrap; border: 1px solid #2b3a2c; min-height: 90px; }
.tapef select, .tapef input, .tapef button { font: 13px "Courier New", monospace; background: #111612; color: #c7e7c2; border: 1px solid #3c5a3e; padding: 5px 8px; }
.tapef { background: #0c0f0d; padding: 10px; display: flex; flex-wrap: wrap; gap: 6px; }
.still { filter: grayscale(1) contrast(1.3) brightness(0.9); }
.keys { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; }
.keys div { padding: 6px; text-align: center; font: 11px Verdana, Arial, sans-serif; background: #c8a86b; border: 2px solid #7a5a2a; border-radius: 3px; }
.keys div b { display: block; font-size: 15px; }
.keys div.empty { background: #e4e0d8; color: #888; border-style: dashed; }

/* la sauvegarde : un index d'Apache */
.idx { background: #fff; color: #000; font: 16px "Times New Roman", serif; padding: 8px 14px; }
.idx h1 { font: bold 32px "Times New Roman", serif; margin: 12px 0; }
.idx pre { font: 14px/1.4 "Courier New", monospace; overflow-x: auto; }
.idx address { font-style: italic; }

@media (max-width: 640px) {
  body { padding: 6px 6px 20px; }
  .cols { display: block; }
  .side { min-height: 0; border-right: 0; border-bottom: 2px groove #c9a45c; display: flex; flex-wrap: wrap; gap: 4px; }
  .side a.bt { margin: 0; flex: 1 1 42%; }
  .side .badge, .side .count { flex: 1 1 100%; }
  .main { padding: 14px 14px 22px; }
  .jr { display: block; }
  .jr .years { margin-bottom: 14px; }
  .jr .years a { display: inline-block; margin-right: 8px; }
  .logo { font-size: 22px; }
  .post img { width: 100%; }
}
.sndbt { font: bold 12px Arial, sans-serif; padding: 4px 10px; background: #ddd; border: 2px outset #eee; cursor: pointer; }