/* Grand Prix — l'étape, le budget, les points de passage */
:root { --accent: #e05a3c; --accent-fonce: #b03f26; }

.etape {
  background: var(--asphalte-2); border: 1px dashed var(--accent); border-radius: 14px;
  padding: 15px 18px; text-align: center;
}
.etape .semaine {
  font-family: "IBM Plex Mono", monospace; font-size: 13px;
  color: var(--craie-douce); letter-spacing: 1px;
}
.etape .villes {
  font-family: "Saira Condensed", sans-serif; font-weight: 800;
  font-size: clamp(22px, 2.4vw, 30px); line-height: 1.1; letter-spacing: .5px;
  text-transform: uppercase; color: var(--accent); margin-top: 3px;
}
.etape .budget { font-size: 15.5px; color: var(--craie-douce); margin-top: 5px; }
.etape .budget strong { color: var(--craie); font-family: "IBM Plex Mono", monospace; }

/* jauge de budget kilométrique */
.jauge { display: flex; flex-direction: column; gap: 6px; }
.jauge-bar {
  height: 12px; background: var(--asphalte-2); border: 1px solid var(--ligne);
  border-radius: 999px; overflow: hidden;
}
.jauge-fill {
  height: 100%; width: 0; background: var(--vert);
  transition: width .35s ease, background .35s ease;
}
.jauge-fill.chaud { background: var(--sodium); }
.jauge-fill.hors { background: var(--coeur); }
.jauge-txt {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: "IBM Plex Mono", monospace; font-size: 14.5px; color: var(--craie-douce);
}
.jauge-txt .count {
  font-family: "Saira Condensed", sans-serif; font-weight: 800; font-size: 22px;
  color: var(--sodium); letter-spacing: .5px;
}

/* étapes ajoutées par le joueur */
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.steps li {
  background: var(--asphalte-2); border: 1px solid var(--ligne); border-radius: 999px;
  padding: 5px 8px 5px 12px; font-size: 14px; color: var(--craie-douce);
  display: inline-flex; align-items: center; gap: 8px;
}
.steps button {
  background: none; border: none; color: var(--coeur); cursor: pointer;
  font-size: 15px; line-height: 1; padding: 0 2px;
}
.steps li .num { font-family: "IBM Plex Mono", monospace; color: var(--accent); }

.form-row { display: flex; gap: 10px; }
.form-row .btn { flex: 1; padding: 10px 14px; font-size: 14px; }
.finish { display: flex; flex-direction: column; gap: 10px; }
.form-msg { font-size: 14.5px; color: var(--craie-douce); }
.block { display: flex; flex-direction: column; gap: 8px; }
.calcul { opacity: .55; }

/* l'étape close de la semaine précédente */
.archive summary {
  cursor: pointer; font-family: "Saira Condensed", sans-serif; font-weight: 600;
  font-size: 19px; color: var(--accent); letter-spacing: .5px; text-transform: uppercase;
}
.archive[open] summary { margin-bottom: 10px; }
.archive .villes { font-size: 20px; color: var(--craie); }
.archive .budget { font-size: 15px; color: var(--craie-douce); margin-bottom: 10px; }
.archive .hint { margin-top: 8px; }
.archive .btn { margin-top: 10px; }