/* Grand Prix — l'étape, le budget, les points de passage */
:root { --accent: var(--color-accent-2); --accent-fonce: var(--color-accent-2-600); }

.etape {
  background: var(--asphalte-2); border: 1px dashed var(--accent); border-radius: 14px;
  padding: 15px 18px; text-align: center;
}
.etape .semaine {
  font-family: var(--font-body); font-size: 13px;
  color: var(--craie-douce); letter-spacing: 1px;
}
.etape .villes {
  font-family: var(--font-heading); 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: var(--font-body); }

/* LES DEUX BUDGETS, CHACUN SA BARRE. Une seule jauge disait les kilomètres, et
   les étapes se comptaient trois lignes plus bas, en petit : deux plafonds de
   même nature, montrés de deux façons. Ils se lisent maintenant l'un sous
   l'autre, chacun avec sa valeur et son maximum à droite de sa barre.
   La moisson passe dessous, au centre, avec son rendement au kilomètre entre
   parenthèses : c'est le score, il n'a pas à se lire dans un coin. */
.jauge { display: flex; flex-direction: column; gap: 8px; }
.jauge-ligne { display: flex; align-items: center; gap: 12px; }
.jauge-ligne .jauge-bar { flex: 1 1 auto; }
.jauge-val {
  flex: 0 0 auto; font-family: var(--font-body); font-size: 13.5px;
  color: var(--craie-douce); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.jauge .count {
  margin: 2px 0 0; text-align: center;
  font-family: var(--font-heading); font-weight: 800; font-size: 22px;
  color: var(--sodium); letter-spacing: .5px;
}
/* Le budget dépassé se lit sur le chiffre autant que sur la barre. */
.km-fait.depasse { color: var(--coeur); font-weight: 700; }
.jauge .count .par-km {
  font-family: var(--font-body); font-weight: 400; font-size: 15px;
  color: var(--craie-douce); letter-spacing: 0;
}
.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); }

/* étapes ajoutées par le joueur */
.steps { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
/* Une pastille par étape : son numéro, et la croix qui la retire. Elle portait
   ses coordonnées, qui la faisaient trois fois plus large pour dire ce que
   l'épingle du même numéro dit déjà sur la carte. */
.steps li {
  background: var(--asphalte-2); border: 1px solid var(--ligne); border-radius: 999px;
  padding: 4px 6px 4px 10px; font-size: 14px; color: var(--craie-douce);
  display: inline-flex; align-items: center; gap: 4px;
}
.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: var(--font-body); color: var(--accent); }

.form-row .btn { flex: 1; padding: 10px 14px; font-size: 14px; }
.finish { display: flex; flex-direction: column; gap: 10px; }
.calcul { opacity: .55; }

/* l'étape close de la semaine précédente */
.archive summary {
  cursor: pointer; font-family: var(--font-heading); 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; }

/* Combien d'étapes posées, et combien il en reste. La typographie vient de
   « .jauge-val », qu'il partage avec les kilomètres : ne reste ici que ce qui
   lui est propre — net quand il n'y a plus de place. */
.gp-etapes.plein { color: var(--accent); font-weight: 700; }
/* LE SURSAUT DU « NON ». Un geste refusé ne fait rien, et ne rien faire ressemble
   à une panne : le chiffre en cause sursaute sur place, et l'on voit tout de
   suite lequel des deux budgets barre la route. Un seul mouvement pour les
   deux — le clic de trop quand les étapes sont pleines, et la validation
   refusée quand les kilomètres débordent. */
@keyframes gp-sursaut {
  0%, 100% { transform: none; }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.gp-etapes.plein-flash,
.km-fait.sursaut { animation: gp-sursaut .28s ease; }
/* Une transformation ne s'applique pas à une boîte en ligne : la distance est
   un « span », il lui faut un bloc pour bouger. */
.km-fait { display: inline-block; }
/* Qui préfère que rien ne bouge garde le rouge et la barre pleine, qui disent
   déjà tout — le sursaut n'était que le doigt qui les montre. */
@media (prefers-reduced-motion: reduce) {
  .gp-etapes.plein-flash, .km-fait.sursaut { animation: none; }
}