/* Sorti de circuit.html le 16/10/2026 (#826) : la CSP refusera bientôt tout <style> non signé, et une page statique n'a pas de nonce. */
  :root { color-scheme: dark; }
  body { margin: 0; background: #14200f; color: #e8f0e0; font-family: system-ui, sans-serif;
         display: flex; flex-direction: column; align-items: center; gap: 0.8rem; padding: 0.8rem;
         user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent; }
  h1 { font-size: 1rem; margin: 0.2rem 0 0; letter-spacing: 0.08em; color: #ffd98c; font-weight: 700; }
  .sous { font-size: 0.78rem; color: #8fae7e; margin: 0; text-align: center; }
  .cab { background: linear-gradient(165deg, #4a6b3e, #2f4728 60%, #1d2f19);
         border: 3px solid #7a9a68; border-radius: 14px; padding: 0.7rem; max-width: 940px; width: 100%; }
  canvas { display: block; width: 100%; height: auto; background: #0b0b0e; border-radius: 8px; }
  .panel { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 0.7rem; gap: 0.5rem; }
  .row { display: flex; gap: 0.5rem; }
  button { width: 62px; height: 62px; border-radius: 50%; border: 2px solid #3d5c32;
           background: radial-gradient(circle at 35% 30%, #86ab72, #3f5f33 75%);
           color: #f2f8ec; font-size: 1.3rem; font-weight: 700; touch-action: none; cursor: pointer; }
  button:active { transform: translateY(2px); }
  .pedale { width: auto; min-width: 94px; height: 64px; border-radius: 14px; font-size: 0.82rem; letter-spacing: 0.08em; }
  .gaz { background: linear-gradient(180deg, #e8a020, #9a6410); border-color: #7a5010; color: #fff6e0; }
  .frein { background: linear-gradient(180deg, #c04a3a, #7a2a20); border-color: #6a2418; color: #ffeae4; }
  .liens { display: flex; gap: 0.7rem; font-size: 0.75rem; }
  .liens a { color: #cfe4c2; }
  .note { max-width: 720px; font-size: 0.8rem; line-height: 1.5; color: #b9cdae; }
  .note b { color: #e8f0e0; }
  /* la rangée de pastilles commune à la salle (plein écran, 📱 manettes, la salle) */
  .ci-under { display: flex; justify-content: center; gap: 0.6rem; margin-top: 0.6rem; flex-wrap: wrap; }
  .ci-under button, .ci-under a { width: auto; height: auto; border-radius: 999px; background: none; border: 1px solid #7a9a68;
    color: #cfe4c2; font-size: 0.72rem; font-weight: 400; padding: 0.25rem 0.8rem; text-decoration: none; }
  .cab:fullscreen, .cab.pe-faux { display: flex; flex-direction: column; justify-content: center; border-radius: 0; border: none; max-width: none; }
  .pe-faux { position: fixed; inset: 0; z-index: 9999; max-width: none; margin: 0; }
  .ci-table { display: flex; justify-content: center; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.5rem; font-size: 0.78rem; color: #cfe4c2; }
  .ci-table[hidden] { display: none; }
  .ci-table button { width: auto; height: auto; border-radius: 999px; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.9rem; }
  .ci-table input { width: 5.2rem; text-transform: uppercase; letter-spacing: 0.25em; text-align: center; font: 700 0.9rem "Courier New", monospace;
    background: #1d2b1a; color: #ffe07a; border: 1px solid #7a9a68; border-radius: 6px; padding: 0.3rem; }
  .ci-etat { flex-basis: 100%; text-align: center; color: #8fae7e; }
  .chantier { margin: 0; font-size: 0.74rem; background: #f0d488; color: #4a3410; border: 1.5px solid #c8a23c; border-radius: 999px; padding: 0.15rem 0.8rem; font-weight: 700; }