/*
 * HRP inc. — feuille de style production
 * Aucun TailwindCSS requis.
 *
 * Le bloc ci-dessous reproduit uniquement les comportements de base
 * dont cette page dépendait implicitement avec Tailwind Preflight,
 * afin d'éviter les décalages lors du retrait du CDN.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
}

body {
  line-height: inherit;
}

hr {
  height: 0;
  color: inherit;
  border-top-width: 1px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

table {
  text-indent: 0;
  border-color: inherit;
  border-collapse: collapse;
}

button,
input,
textarea,
select {
  font: inherit;
  font-feature-settings: inherit;
  font-variation-settings: inherit;
  letter-spacing: inherit;
  color: inherit;
  margin: 0;
  padding: 0;
}

button,
select {
  text-transform: none;
}

button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button;
  background-color: transparent;
  background-image: none;
}

textarea {
  resize: vertical;
}

img,
video {
  max-width: 100%;
  height: auto;
}

img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
  display: block;
  vertical-align: middle;
}

/* ===== Styles HRP inc. existants ===== */

html { scroll-behavior: smooth; }
    body {
      margin: 0;
      color: #000080;
      font-family: Verdana, Arial, Helvetica, sans-serif;
      background-color: #008080;
      background-image:
        radial-gradient(circle at 8px 8px, rgba(255,255,255,.20) 1px, transparent 1px),
        radial-gradient(circle at 24px 24px, rgba(0,0,0,.16) 1px, transparent 1px);
      background-size: 32px 32px;
    }
    a { color: #0000ee; text-decoration: underline; }
    a:visited { color: #551a8b; }
    .page { width: min(96%, 800px); margin: 10px auto; background: #ffffcc; border: 4px ridge #d4d0c8; }
    .win { border: 3px outset #d4d0c8; background: #d4d0c8; }
    .win-title { color: white; font-weight: bold; font-size: 13px; padding: 3px 6px; background: linear-gradient(90deg,#000080,#1084d0); }
    .inset { border: 3px inset #d4d0c8; background: white; }
    .bevel { border: 3px outset #d4d0c8; background: #d4d0c8; color: #000; font-weight: bold; padding: 5px 10px; text-decoration: none; display: inline-block; }
    .bevel:active { border-style: inset; }
    .rainbow { background: linear-gradient(90deg,#ff0000,#ffff00,#00ff00,#00ffff,#0000ff,#ff00ff,#ff0000); height: 6px; }
    .blink { animation: blink .8s step-end infinite; }
    @keyframes blink { 50% { visibility: hidden; } }
    .spin { display:inline-block; animation: spin 4s linear infinite; }
    @keyframes spin { to { transform: rotate(360deg); } }
    .marquee { overflow: hidden; white-space: nowrap; background: #000080; color: #ffff00; border: 2px inset #d4d0c8; }
    .marquee span { display:inline-block; padding-left:100%; animation: scroll 16s linear infinite; }
    @keyframes scroll { to { transform: translateX(-100%); } }
    .counter { background:#000; color:#00ff00; border:2px inset #d4d0c8; font-family:"Courier New",monospace; letter-spacing:3px; padding:2px 5px; }
    .construction { color:#ff0000; font-weight:bold; text-shadow:1px 1px #ffff00; }
    .guest-entry { border:2px groove #d4d0c8; background:#fff; margin-bottom:8px; }
    .guest-head { background:#000080; color:#fff; padding:3px 6px; font-size:12px; }
    .guest-body { padding:8px; font-size:13px; color:#000; }
    .stars { color:#ffff00; text-shadow:1px 1px #000; letter-spacing:3px; }
    @media (max-width: 600px) {
      .desktop-table, .desktop-table tbody, .desktop-table tr, .desktop-table td { display:block; width:100% !important; }
      .nav-cell { text-align:center; }
      .page { width: 100%; margin:0; border-width:2px; }
    }
	.retro-player {
      width: 100%;
      max-width: 100%;
      min-width: 0;
      margin: 0 auto;
      padding: 2px;
      box-sizing: border-box;
      overflow: hidden;
      background: #c0c0c0;
      border-top: 2px solid #ffffff;
      border-left: 2px solid #ffffff;
      border-right: 2px solid #000000;
      border-bottom: 2px solid #000000;
      color: #000000;
      font-family: "MS Sans Serif", Tahoma, Arial, sans-serif;
      font-size: 10px;
    }
    .retro-player-top {
      display: flex;
      min-width: 0;
      align-items: center;
      justify-content: space-between;
      height: 18px;
      padding: 0 3px;
      margin-bottom: 4px;
      color: #ffffff;
      background: linear-gradient(90deg,#000080,#1084d0);
      font: bold 10px "MS Sans Serif", Tahoma, Arial, sans-serif;
    }
    .retro-player-title-icon {
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 3px;
      vertical-align: -2px;
      background: #ffff00;
      border: 1px solid #000;
      box-shadow: inset -2px -2px #808000;
    }
    .retro-player-top > span:first-child {
      min-width: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .retro-player-window-buttons { display:flex; flex:0 0 auto; gap:2px; }
    .retro-player-window-button {
      width: 14px;
      height: 13px;
      padding: 0;
      line-height: 9px;
      border: 2px outset #d4d0c8;
      background: #c0c0c0;
      color: #000;
      font: bold 9px Arial,sans-serif;
    }
    .retro-player-screen {
      background: #ffffff;
      border: 2px inset #d4d0c8;
      padding: 4px;
      text-align: left;
      color: #000;
    }
    .retro-player-status-row {
      display:flex;
      justify-content:space-between;
      align-items:center;
      margin-bottom:3px;
    }
    .retro-player-time {
      font: bold 17px "Courier New", monospace;
      line-height: 1;
      color: #000080;
    }
    .retro-player-led {
      color:#008000;
      font:bold 9px "MS Sans Serif",Tahoma,Arial,sans-serif;
    }
    .retro-player-title {
      overflow: hidden;
      white-space: nowrap;
      font: 9px "MS Sans Serif", Tahoma, Arial, sans-serif;
      color: #000;
      border-top:1px dotted #808080;
      padding-top:3px;
    }
    .retro-player-title span {
      display: inline-block;
      min-width: 100%;
      animation: playerScroll 9s linear infinite;
    }
    @keyframes playerScroll {
      0%,20% { transform: translateX(0); }
      80%,100% { transform: translateX(-45%); }
    }
    .retro-player-seek {
      width: 100%;
      height: 16px;
      margin: 4px 0 2px;
      accent-color: #000080;
      cursor: pointer;
    }
    .retro-player-controls {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 2px;
    }
    .retro-player-btn {
      min-width: 0;
      height: 23px;
      padding: 0;
      border: 2px outset #d4d0c8;
      background: #c0c0c0;
      color: #000;
      font: bold 10px "MS Sans Serif", Tahoma, Arial, sans-serif;
      cursor: pointer;
      text-shadow: none;
    }
    .retro-player-btn:active,
    .retro-player-btn.active {
      border-style: inset;
      padding-top:2px;
      padding-left:2px;
    }
    .retro-player-volume {
      display: flex;
      align-items: center;
      gap: 4px;
      margin-top: 4px;
      padding:3px;
      color: #000;
      background:#c0c0c0;
      border:2px groove #d4d0c8;
      font: 9px "MS Sans Serif", Tahoma, Arial, sans-serif;
    }
    .retro-player-volume input {
      width: 100%;
      height: 14px;
      accent-color: #000080;
    }