/* « Modifier la carte » (contribuer.js, ADR 0033 et 0035) : bouton de l'en-tête, barre d'outils du mode et feuilles
   (tronçon, chemin ajouté, mes modifications). Rôles Topo de jetons.css (ADR 0029 : papier, encre, l'action à l'encre) ;
   les feuilles reprennent la fenêtre de « Mes objectifs » (.saison, collection.css) et les boutons des pages
   (sections.css). Aucune couleur codée ici : le surlignage et les couches viennent de packages/map-style. */

/* Sans le jeton de l'équipe (jeton-equipe.js), le bouton est masqué : `.bouton-tracer` règle son affichage, il faut le dire ici */
.bouton-modifier[hidden] {
  display: none;
}
/* Bouton de l'en-tête, à côté de « Tracer » : appuyé, à l'encre comme « Tracer » ouvert */
.bouton-modifier[aria-pressed="true"],
.traceur-actif .bouton-modifier[aria-pressed="true"] {
  background: var(--action);
  border-color: var(--action);
  color: var(--sur-action);
}
.traceur-actif .bouton-modifier[aria-pressed="false"] {
  background: var(--papier);
  border-color: var(--trait-2);
  color: var(--action-fonce);
}
.bouton-modifier svg {
  stroke-linejoin: round;
}
/* Trois boutons dans la rangée de l'en-tête sur ordinateur : chacun sur une ligne, « Modifier » en libellé court (le
   titre et l'étiquette disent « Modifier la carte »). */
.actions-entete .bouton-tracer {
  flex: 1 1 auto;
  padding: 0 8px;
  font-size: 13px;
  white-space: nowrap;
}
.actions-entete .bouton-modifier .libelle-long {
  display: none;
}
/* Sur téléphone, à côté de la recherche : l'icône seule (l'étiquette dit « Modifier la carte »). */
.recherche-ligne .bouton-modifier .libelle {
  display: none;
}
.recherche-ligne .bouton-modifier {
  padding: 0 10px;
}

/* Barre d'outils du mode : en haut au centre de la carte */
.editeur-barre {
  position: absolute;
  z-index: 3;
  top: var(--e-m);
  left: 50%;
  transform: translateX(-50%);
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  gap: var(--e-s) var(--e-m);
  box-sizing: border-box;
  width: max-content;
  max-width: calc(100% - 32px);
  padding: var(--e-s);
  border: 1px solid var(--trait);
  border-radius: var(--r-l);
  background: var(--surface);
  box-shadow: var(--ombre-flottant);
  color: var(--encre);
  font-size: 13.5px;
}
.editeur-barre[hidden],
body.traceur-actif .editeur-barre {
  display: none;
}
.edb-outils {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.edb-outil {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font: 600 13px/1 var(--police);
  cursor: pointer;
}
.edb-outil svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.edb-outil:hover {
  background: var(--creux);
}
.edb-outil[aria-pressed="true"] {
  border-color: var(--action);
  background: var(--action-doux);
  color: var(--action-fonce);
}
.edb-consigne {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
  padding: 0 4px 2px;
  color: var(--encre-2);
  font-size: 12.5px;
}
.ctb-terminer {
  flex: none;
  min-height: 32px;
  padding: 0 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font: 600 13px/1 var(--police);
  cursor: pointer;
}
.ctb-terminer:hover {
  background: var(--creux);
}
@media (max-width: 760px) {
  .editeur-barre {
    grid-template-columns: 1fr auto;
    width: calc(100% - 32px);
  }
  .edb-outil span {
    display: none;
  }
}

/* Feuilles « Coter ce chemin », « Signaler ce chemin », « Ajouter ce chemin », « Mes modifications » */
.saison.contribuer {
  width: min(460px, calc(100vw - 32px));
  /* Une feuille modale est étirée entre le haut et le bas de l'écran : elle prend la hauteur de son contenu. */
  height: fit-content;
  max-height: calc(100dvh - 48px);
}
.saison.contribuer.ctb-mes {
  width: min(560px, calc(100vw - 32px));
}
.ctb-corps {
  display: grid;
  align-content: start;
  gap: var(--e-m);
  padding-top: var(--e-m);
}
.ctb-champ {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  color: var(--encre-2);
  font-size: 13px;
  font-weight: 600;
}
.ctb-champ legend {
  margin-bottom: 6px;
  padding: 0;
}
.ctb-champ label {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  color: var(--encre);
  font-weight: 400;
  font-size: 14px;
}
.ctb-champ small {
  color: var(--encre-2);
  font-weight: 400;
  font-size: 12px;
}
.ctb-champ select,
.ctb-champ input[type="date"],
.ctb-champ input[type="text"] {
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--encre);
  font: 400 14px var(--police);
}
.ctb-actions-troncon {
  display: inline-flex;
  justify-self: start;
  padding: 2px;
  border: 1px solid var(--trait-2);
  border-radius: var(--r-s);
}
.ctb-action {
  height: 32px;
  min-height: 0;
  padding: 0 14px;
  border: 0;
  border-radius: calc(var(--r-s) - 2px);
  background: transparent;
  color: var(--encre);
  font: 600 13px/1 var(--police);
  cursor: pointer;
}
.ctb-action[aria-pressed="true"] {
  background: var(--action);
  color: var(--sur-action);
}
.ctb-sur-chemin {
  padding: var(--e-s) var(--e-m);
  border-radius: var(--r-s);
  background: var(--creux);
}
.ctb-sur-chemin h3 {
  margin: 0 0 4px;
  color: var(--encre-2);
  font-size: 12px;
  font-weight: 600;
}
.ctb-sur-chemin ul,
.ctb-liste,
.ctb-erreurs,
.ctb-avertissements {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ctb-sur-chemin li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-s);
  font-size: 13px;
}
.ctb-retirer,
.ctb-voir {
  flex: none;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r-s);
  background: var(--papier);
  color: var(--encre);
  font: 600 12.5px/1 var(--police);
  cursor: pointer;
}
.ctb-retirer:hover,
.ctb-voir:hover {
  background: var(--creux);
}
.ctb-erreurs li,
.ctb-avertissements li {
  padding: 6px 0 6px 10px;
  border-left: 3px solid var(--erreur);
  color: var(--encre);
  font-size: 13px;
}
.ctb-avertissements li {
  border-left-color: var(--filet-fort);
  color: var(--encre-2);
}
.ctb-message {
  margin: 0;
  color: var(--encre-2);
  font-size: 12.5px;
}
.ctb-message:empty {
  display: none;
}
.ctb-message[data-erreur="true"] {
  color: var(--erreur);
  font-weight: 600;
}
.ctb-actions {
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* « Mes modifications » : une ligne par modification, son statut en clair */
.ctb-liste li {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-m);
  padding: var(--e-s) 0;
  border-bottom: 1px solid var(--trait);
}
.ctb-ligne-texte {
  display: grid;
  gap: 2px;
  min-width: 0;
  font-size: 13px;
}
.ctb-ligne-texte span {
  color: var(--encre-2);
  overflow-wrap: anywhere;
}
.ctb-ligne-actions {
  display: flex;
  flex: none;
  gap: 6px;
}
.ctb-statut {
  justify-self: start;
  font-weight: 600;
}
.ctb-statut[data-statut="Appliquee"] {
  color: var(--action-fonce);
}
.ctb-statut[data-statut="NonAppliquee"] {
  color: var(--erreur);
}
.ctb-vide,
.ctb-note {
  margin: 0;
  color: var(--encre-2);
  font-size: 12.5px;
}

/* Ligne de la bulle d'un tronçon modifié par l'équipe, en attente de la construction suivante ou signalé */
.bulle-equipe {
  color: var(--encre-2);
  font-style: italic;
}