/* ==========================================================
   Bus de RevolutionRP — styles du site (public + employés)
   ========================================================== */

:root {
  color-scheme: light;
  --fond: #f2ede0;
  --panneau: #fbf8ef;
  --encre: #1c1a17;
  --encre-douce: #4a453c;
  --encre-pale: #7d766a;
  --rebord: #d9cfb4;
  --or: #a98a4b;
  --vert: #2f5a3a;
  --rouge: #8c2f2f;
  --sombre: #1b1815;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--fond);
  color: var(--encre);
  font-family: Georgia, "Times New Roman", serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

button, input, select { font-family: inherit; }

/* ---------- Bandeau ---------- */

.bandeau {
  background: linear-gradient(180deg, #1b1815 0%, #26221d 100%);
  color: #e8dfcb;
  border-bottom: 1px solid #4a3f2f;
}

.bandeau .in {
  max-width: 1100px;
  margin: 0 auto;
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.marque { font-size: 19px; letter-spacing: 2px; text-transform: uppercase; font-weight: 700; }
.marque em { font-style: normal; color: var(--or); }
.marque .sous { font-size: 12px; letter-spacing: 1.5px; color: #9a9080; font-weight: 400; }

.bandeau .spacer { flex: 1; }

.puce {
  font-size: 12px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #b8ad97;
  border: 1px solid #4a4033;
  border-radius: 999px;
  padding: 4px 12px;
}

.puce b { color: var(--or); }

.puce.fraicheur { text-transform: none; letter-spacing: 0; font-size: 12px; }

.bandeau a.lien {
  color: #d8cfba;
  text-decoration: none;
  font-size: 13.5px;
  padding: 6px 10px;
  border-radius: 4px;
}

.bandeau a.lien:hover { background: rgba(255,255,255,.07); color: #fff; }

.qui { font-size: 14px; color: #e8dfcb; }

/* ---------- Contenu ---------- */

.contenu {
  max-width: 1100px;
  width: 100%;
  margin: 0 auto;
  padding: 22px 20px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  flex: 1;
}

.contenu.employes {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: start;
}

@media (max-width: 800px) {
  .contenu.employes { grid-template-columns: 1fr; }
}

.panneau {
  background: var(--panneau);
  border: 1px solid var(--rebord);
  border-radius: 4px;
  padding: 18px 20px;
  box-shadow: 0 2px 10px rgba(60,50,35,.08);
}

.panneau h2 {
  font-size: 19px;
  letter-spacing: 2px;
  text-transform: uppercase;
  border-bottom: 3px double var(--encre);
  padding-bottom: 8px;
  margin-bottom: 12px;
}

.panneau h3 {
  font-size: 14px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--encre-douce);
  margin: 14px 0 8px;
}

.aide { font-size: 13px; color: var(--encre-pale); font-style: italic; margin-bottom: 10px; }

.etat { font-size: 13.5px; color: var(--encre-pale); margin-bottom: 8px; }

/* ---------- Table live ---------- */

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { text-align: left; padding: 8px 10px; border-bottom: 1px dotted rgba(60,50,35,.3); }
.table th { font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--encre-pale); }
.table td.coords { font-family: "Courier New", monospace; white-space: nowrap; }

/* ---------- Lignes / arrêts ---------- */

.ligne-select, .ligne-form { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; flex-wrap: wrap; }
.ligne-select label { font-size: 12px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--encre-pale); }

input[type="text"], select {
  padding: 8px 10px;
  font-size: 14px;
  background: #fff;
  border: 1px solid var(--rebord);
  border-radius: 3px;
  color: var(--encre);
}

input[type="text"]:focus, select:focus { outline: none; border-color: var(--or); }

.arrets { list-style: none; counter-reset: arret; }
.arrets li {
  counter-increment: arret;
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px dotted rgba(60,50,35,.3);
  font-size: 15px;
}

.arrets li::before {
  content: counter(arret) ".";
  font-weight: 700;
  color: var(--or);
  min-width: 26px;
}

.arrets .coords { margin-left: auto; font-family: "Courier New", monospace; font-size: 12.5px; color: var(--encre-pale); }
.arrets .mini { display: flex; gap: 4px; }

.lignes { list-style: none; }
.lignes li {
  padding: 9px 10px;
  border: 1px solid transparent;
  border-radius: 3px;
  cursor: pointer;
  font-size: 15px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.lignes li:hover { background: rgba(169,138,75,.1); }
.lignes li.actif { border-color: var(--or); background: rgba(169,138,75,.14); font-weight: 700; }
.lignes .n { color: var(--encre-pale); font-size: 12.5px; }

/* ---------- Boutons ---------- */

.btn {
  background: var(--encre);
  color: #f4efe2;
  border: none;
  border-radius: 3px;
  padding: 8px 14px;
  font-size: 13px;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
}

.btn:hover:not(:disabled) { background: #322d26; }
.btn:disabled { opacity: .5; cursor: wait; }
.btn.vert { background: var(--vert); }
.btn.rouge { background: var(--rouge); }
.btn.petit { padding: 6px 10px; font-size: 12px; }

.btn.mini { padding: 3px 8px; font-size: 12px; }

/* ---------- Connexion ---------- */

.garde {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(18,15,12,.85);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.garde.ouvert { display: flex; }

.boite {
  width: min(430px, 100%);
  background: var(--panneau);
  border-radius: 4px;
  padding: 28px 30px;
}

.boite h1 { font-size: 21px; letter-spacing: 2.5px; text-transform: uppercase; text-align: center; margin-bottom: 4px; }
.boite .expl { text-align: center; font-size: 13.5px; color: var(--encre-douce); margin-bottom: 18px; line-height: 1.55; }
.boite label { display: block; font-size: 11.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--encre-pale); margin: 10px 0 4px; }
.boite input { width: 100%; }
.boite .valider {
  width: 100%;
  margin-top: 14px;
  padding: 11px;
  background: var(--encre);
  color: var(--panneau);
  border: none;
  border-radius: 3px;
  font-size: 14px;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
}

.boite .retour { margin-top: 14px; text-align: center; font-size: 12.5px; }

.msg { margin-top: 12px; padding: 10px 12px; border-radius: 3px; font-size: 13.5px; display: none; }
.msg.visible { display: block; }
.msg.attente { background: #efe6cd; border: 1px solid #d8c69a; }
.msg.erreur { background: #f4dede; border: 1px solid #d0a0a0; }
.msg.ok { background: #dfeedd; border: 1px solid #a8c4a4; }
.msg .ref { font-family: "Courier New", monospace; font-weight: 700; }

.note {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--sombre);
  color: #e8dfcb;
  padding: 10px 18px;
  border-radius: 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s;
  z-index: 70;
}

.note.visible { opacity: 1; }
.note.erreur { background: var(--rouge); }

/* ---------- Mini-carte (tiles 3x4 + bus) ---------- */

.carte {
  position: relative;
  width: 100%;
  /* 4 colonnes x 4 lignes de tiles carrées -> carte carrée. */
  aspect-ratio: 4 / 4;
  /* Quand max-height bride la hauteur, max-width bride la largeur d'autant
     pour garder des tiles carrées (sinon écrasées). */
  max-width: 853px;
  max-height: 853px;
  margin: 0 auto;
  overflow: hidden;
  border: 1px solid var(--rebord);
  border-radius: 3px;
  background: #14110d;
  cursor: grab;
  touch-action: none;
}

.carte.grabbing { cursor: grabbing; }

/* Monde = tout ce qui suit le zoom/déplacement (tiles + tracés + bus). */
.monde {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
  /* Pas de will-change ici : promu en calque GPU, le navigateur rasterise
     le monde puis l'agrandit en filtrage bilinéaire, ce qui floute les
     tiles au zoom en ignorant le image-rendering des <img>. Sans ce
     calque, le image-rendering: pixelated ci-dessous + sur les <img>
     reste respecté et le zoom reste net (pixels francs). */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.tuiles {
  position: absolute;
  inset: 0;
  display: grid;
  min-height: 0;
  gap: 0;
  grid-gap: 0;
  padding: 0;
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.tuiles img {
  width: calc(100% + var(--recouv, 1px));
  height: calc(100% + var(--recouv, 1px));
  /* Indispensable avec des pistes en 1fr : sans ça, chaque image impose
     sa taille naturelle à sa cellule, la grille dépasse du conteneur et
     le overflow:hidden de .carte ne laisse voir que le haut-gauche. */
  min-width: 0;
  min-height: 0;
  /* fill = étirement exact à la cellule (tiles et cellules carrées).
     cover peut rogner/arrondir d'un demi-pixel et laisser un liseré. */
  object-fit: fill;
  display: block;
  user-select: none;
  pointer-events: none;
  /* Zoom net : le monde est agrandi via transform: scale() ; sans ça le
     navigateur lisse (floute) les tiles. En "pixelated" les pixels restent
     francs au zoom (image volontairement pixelisée, pas floue). Les tracés
     SVG et les pastilles ne sont pas concernés (vectoriel). */
  image-rendering: crisp-edges;
  image-rendering: pixelated;
}

.couche-lignes {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

.couche-arrets {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.arret-puce {
  position: absolute;
  width: 11px;
  height: 11px;
  margin: -5.5px 0 0 -5.5px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #111;
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  pointer-events: auto;
  cursor: default;
}

.couche-bus {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.bus-point {
  position: absolute;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border-radius: 50%;
  border: 2px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,.5);
  pointer-events: auto;
}

.bus-point.a-pied { opacity: .55; border-style: dashed; }

.bus-point span {
  position: absolute;
  left: 16px;
  top: -4px;
  white-space: nowrap;
  font-size: 11.5px;
  background: rgba(20,17,13,.85);
  color: #f4efe2;
  padding: 2px 7px;
  border-radius: 3px;
  font-family: inherit;
}

.source-trace {
  margin-top: 8px;
  min-height: 17px;
  font-size: 12.5px;
}

.source-trace.ok { color: var(--encre-douce); }

.source-trace.secours { color: #e11d48; }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 10px;
  font-size: 13px;
  color: var(--encre-douce);
}

.legende-item { display: inline-flex; align-items: center; gap: 6px; }

.pastille {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
  border: 1px solid rgba(0,0,0,.3);
}

/* ---------- Pied ---------- */

.pied-site {
  background: #1b1815;
  color: #8d8474;
  font-size: 12.5px;
  padding: 14px 20px;
  text-align: center;
}