* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #1d1d1f;
  background: #f4f2ee;
}

body { display: flex; flex-direction: column; }

header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  padding: 10px 16px;
  background: #1f3a2e;
  color: #fff;
}

h1 { margin: 0; font-size: 18px; }

#statut { font-size: 12px; opacity: .8; }
#statut.erreur { color: #ffb4a8; opacity: 1; }

.actions { margin-left: auto; display: flex; gap: 8px; }

button {
  font: inherit;
  padding: 5px 10px;
  border: 1px solid #c9c4b8;
  border-radius: 6px;
  background: #fff;
  color: #1d1d1f;
  cursor: pointer;
}
button:disabled { opacity: .4; cursor: default; }

main {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 380px;
}

#carte { min-height: 300px; }

aside {
  overflow-y: auto;
  padding: 12px 16px;
  border-left: 1px solid #ddd8cc;
}

h2 { margin: 0 0 8px; font-size: 16px; }
h2 small { font-weight: normal; color: #6b6b6b; }

#classement { list-style: none; margin: 0; padding: 0; }
#classement li { border-bottom: 1px solid #e3ded3; }

summary {
  display: grid;
  grid-template-columns: 24px 12px 1fr auto;
  grid-template-areas: "rang pastille nom signal" "rang . etape etape";
  column-gap: 8px;
  align-items: center;
  padding: 8px 0;
  cursor: pointer;
  list-style: none;
}
summary::-webkit-details-marker { display: none; }

.rang { grid-area: rang; font-weight: 700; font-size: 16px; text-align: center; }
.pastille { grid-area: pastille; width: 12px; height: 12px; border-radius: 50%; }
.nom { grid-area: nom; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.etape { grid-area: etape; color: #555; font-size: 12px; }
.signal { grid-area: signal; font-size: 12px; color: #2e7d4f; white-space: nowrap; }
.signal.perdu { color: #a0522d; }

details table { margin: 0 0 8px 32px; width: calc(100% - 32px); border-collapse: collapse; font-size: 12px; }
details td { padding: 2px 0; border-bottom: 1px dotted #ddd8cc; }
details td:last-child { text-align: right; font-variant-numeric: tabular-nums; }

.boutons { display: flex; gap: 8px; margin: 0 0 10px 32px; }

.etiquette {
  padding: 1px 5px;
  font-size: 11px;
  font-weight: 600;
  background: rgba(255, 255, 255, .9);
  border: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .3);
}
.etiquette::before { display: none; }

@media (max-width: 760px) {
  main { grid-template-columns: 1fr; grid-template-rows: 60vh auto; }
  aside { border-left: none; border-top: 1px solid #ddd8cc; overflow: visible; }
  .actions { margin-left: 0; }
}