/* LE CARTOGRAPHE DE TERRAIN — poser le bois depuis un telephone.
   Chargee en DERNIER, apres organisateur.css (cf. l'en-tete de base.css).

   Un seul parti pris commande tout l'ecran : la carte prend toute la place, et
   ce qui la commande flotte par-dessus. On pose une balise a l'endroit ou l'on
   se tient — on regarde donc le terrain, pas un formulaire. */

/* La toile occupe l'ecran entier, encoche comprise : les retraits sont poses
   sur ce qui flotte au-dessus, pas sur la carte. Une carte qui s'arrete a
   44 px du haut perd la seule chose qu'on lui demande, de la place. */
.carto-stage { position: absolute; inset: 0; overflow: hidden; }
.carto-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; }

/* ------------------------------------------------------------- l'entete */

/* Une colonne, pas trois blocs a des decalages devines : le bandeau de l'outil
   arme se posait a une hauteur fixe et passait sous les onglets de parcours
   des qu'un parcours existait. Empiles, ils se poussent tout seuls.
   Elle laisse passer les doigts partout ou elle est vide — la carte continue
   dessous, et c'est elle qu'on manipule. */
.carto-head {
  position: absolute; left: 0; right: 0; top: 0;
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 6px;
  pointer-events: none;
}
.carto-head > * { pointer-events: auto; }

.carto-top {
  display: flex; align-items: center; gap: 10px;
  /* L'encoche est ici, et nulle part ailleurs : la toile, elle, occupe la
     dalle entiere — une carte qui s'arrete a 44 px du haut perd la seule chose
     qu'on lui demande. */
  padding: calc(var(--safe-top) + 8px) 12px 4px;
  /* Un degrade, pas un bandeau plein : la carte continue dessous, et un fond
     opaque volerait la bande ou l'on vient justement de poser une balise. */
  background: linear-gradient(180deg, rgba(6, 18, 12, 0.88), rgba(6, 18, 12, 0));
  pointer-events: none;
}
.carto-top > * { pointer-events: auto; }
.carto-top .round-btn { flex: none; }
/* Deux boutons de chaque cote — sortir et regler a gauche, annuler et
   retablir a droite : le titre tient au milieu, et se serre plutot que de
   pousser un bouton hors de l'ecran. */
.carto-title { flex: 1; min-width: 0; text-align: center; }
.carto-title b {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: 0.92rem; color: var(--parchment);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}
.carto-title i {
  display: block; font-style: normal; font-size: 0.58rem;
  color: var(--parch-faint); letter-spacing: 0.04em;
}

/* --------------------------------------------------------- l'outil arme */

/* Entre armer un outil et s'en servir, on marche : sans ce bandeau, on arrive
   devant la souche sans savoir ce que le prochain appui va faire. */
.carto-arm {
  margin: 0 12px;
  display: flex; align-items: center; gap: 9px;
  padding: 9px 12px; border-radius: 13px;
  background: rgba(74, 150, 90, 0.92);
  color: #f2f7ee; box-shadow: var(--shadow-2);
  animation: carto-arm-in 0.24s var(--ease);
}
@keyframes carto-arm-in { from { transform: translateY(-10px); opacity: 0; } }
.carto-arm b { font-size: 0.76rem; font-weight: 800; flex: none; }
.carto-arm span { flex: 1; font-size: 0.62rem; line-height: 1.3; opacity: 0.92; }
.carto-arm-off {
  flex: none; padding: 5px 10px; border-radius: 9px;
  font: inherit; font-size: 0.6rem; font-weight: 700; cursor: pointer;
  color: #f2f7ee; background: rgba(0, 0, 0, 0.26);
  border: 1px solid rgba(255, 255, 255, 0.26);
}

/* Annuler et Retablir, en haut a droite. Eteints quand il n'y a rien a
   defaire, mais TOUJOURS en place : les retirer decalerait la rangee, et le
   pouce viserait la sortie a la place. */
.carto-top .round-btn.off { opacity: 0.32; pointer-events: none; }

/* ------------------------------------------------- onglets des parcours */

/* Sous l'entete : on trace un parcours a la fois, et six traces superposes ne
   se distinguent plus. « Tous » les remet ensemble. Le rail defile
   lateralement plutot que de passer a la ligne — une deuxieme rangee
   mangerait la carte, qui est tout ce qu'on regarde. */
.carto-rail {
  display: flex; gap: 6px; align-items: center;
  padding: 0 12px;
  overflow-x: auto; scrollbar-width: none;
  /* Le rail court sur toute la largeur : laisse aux pastilles seules le droit
     de prendre le doigt, sinon la bande vide a leur droite avalerait les
     glissements de carte. */
  pointer-events: none;
}
.carto-rail::-webkit-scrollbar { display: none; }
.carto-chip {
  flex: 0 0 auto; pointer-events: auto;
  display: inline-flex; align-items: center; gap: 5px;
  min-width: 34px; height: 30px; padding: 0 11px;
  justify-content: center;
  border-radius: 15px;
  font: inherit; font-size: 0.66rem; font-weight: 800; cursor: pointer;
  color: var(--parch-dim);
  background: rgba(9, 22, 16, 0.86);
  border: 1px solid rgba(238, 241, 230, 0.14);
  box-shadow: var(--shadow-1);
  transition: color 0.16s, border-color 0.16s, background 0.16s, transform 0.12s var(--ease);
}
.carto-chip:active { transform: scale(0.94); }
/* La couleur du parcours en pastille, pas en fond : un onglet allume doit se
   lire comme les autres, et six fonds vifs cote a cote ne se hierarchisent
   plus. */
.carto-chip u {
  display: block; width: 9px; height: 9px; border-radius: 50%;
  background: var(--rc, var(--moss));
}
.carto-chip.on {
  color: var(--parchment);
  background: rgba(74, 150, 90, 0.9);
  border-color: rgba(168, 224, 160, 0.55);
}

/* ------------------------------------------------------- se situer, seul */

/* Au bord droit, au-dessus des outils : c'est un geste de carte, pas un outil
   a armer. Le mettre dans la rangee du bas aurait fait une septieme porte
   pour quelque chose qui ne change rien au terrain. */
.carto-float {
  position: absolute; right: 12px;
  bottom: calc(96px + var(--safe-bot) + var(--gesture-gap));
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  color: var(--parchment);
  background: rgba(9, 22, 16, 0.88);
  border: 1px solid rgba(238, 241, 230, 0.16);
  box-shadow: var(--shadow-2);
}
.carto-float:active { transform: scale(0.94); }
.carto-float svg { width: 19px; height: 19px; }
/* Relire le terrain, un etage au-dessus de « me situer » : 42 px de bouton et
   8 px d'air, la meme respiration que partout ailleurs. */
.carto-float.up { bottom: calc(146px + var(--safe-bot) + var(--gesture-gap)); }
.carto-float.spin svg { animation: carto-spin 0.7s linear infinite; }
@keyframes carto-spin { to { transform: rotate(360deg); } }

/* -------------------------------------------------- l'element selectionne */

/* Toucher une balise ne l'ouvre pas : elle se choisit, la carte s'en approche,
   et les trois gestes qui la concernent apparaissent ici. Une barre plutot
   qu'une feuille — on garde la carte sous les yeux, parce que deplacer se vise
   dessus. */
.carto-node {
  position: absolute; left: 12px; right: 12px;
  /* Au-dessus des deux boutons flottants — « me situer » puis « relire » — qui
     sont eux-memes au-dessus des outils : quatre etages qui ne se marchent pas
     dessus, du plus permanent au plus passager. */
  bottom: calc(198px + var(--safe-bot) + var(--gesture-gap));
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 12px; border-radius: 15px;
  background: rgba(9, 22, 16, 0.94);
  border: 1px solid rgba(238, 241, 230, 0.16);
  box-shadow: var(--shadow-2);
  animation: carto-node-in 0.18s var(--ease);
}
@keyframes carto-node-in { from { transform: translateY(10px); opacity: 0; } }
.carto-node-id {
  flex: none; font-size: 0.62rem; font-weight: 800; color: var(--gold);
}
.carto-node b {
  flex: 1; min-width: 0; font-size: 0.68rem; font-weight: 700;
  color: var(--parchment);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* 38 px : la meme cible que les boutons ronds de l'entete. En dessous, trois
   pictos cote a cote se touchent l'un pour l'autre, et l'un d'eux efface. */
.carto-act {
  flex: none; width: 38px; height: 38px; border-radius: 12px;
  display: grid; place-items: center; cursor: pointer;
  color: var(--parch-dim);
  background: rgba(238, 241, 230, 0.06);
  border: 1px solid rgba(238, 241, 230, 0.12);
  transition: transform 0.12s var(--ease), color 0.16s;
}
.carto-act:active { transform: scale(0.92); }
.carto-act svg { width: 18px; height: 18px; }
/* Effacer se distingue par la couleur, seul geste de la rangee qui ne se
   rattrape que par « Annuler ». */
.carto-act.danger {
  color: var(--rot);
  background: rgba(217, 105, 92, 0.14);
  border-color: rgba(217, 105, 92, 0.34);
}
/* Le cadenas ferme s'allume en or, comme l'anneau qu'il pose sur la carte :
   le meme etat se dit deux fois, du meme signe. */
.carto-act.lock.on {
  color: var(--gold);
  background: rgba(226, 201, 141, 0.16);
  border-color: rgba(226, 201, 141, 0.40);
}
/* Le geste qui FAIT quelque chose de la zone ou du maillage : poser, mailler.
   Vert plein, comme un outil arme — c'est la meme famille de sens, « ceci va
   agir », a cote de rouges qui defont et de gris qui rangent. */
.carto-act.go {
  color: #0d1c14;
  background: var(--moss, #7fb069);
  border-color: rgba(168, 224, 160, 0.7);
}
.carto-act.go svg { stroke-width: 2.2; }

/* Le risque pose s'allume en rouge PLEIN, la ou effacer reste un rouge
   translucide : les deux boutons sont voisins, et l'un dit un etat quand
   l'autre propose un geste. Un remplissage se distingue d'un contour bien
   avant qu'on ait lu le picto. */
.carto-act.risk.on {
  color: #22100d;
  background: var(--rot);
  border-color: var(--rot);
}
/* Le meme rouge que le trace pointille sur la carte : le sentier a risque se
   nomme et se voit du meme signe. */
.carto-risk {
  color: var(--rot); font-style: normal; font-weight: 800;
  font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.04em;
}
/* Grises et non caches : on doit voir POURQUOI on ne peut plus deplacer, sinon
   on croit l'ecran casse et on insiste. */
.carto-act[disabled] { opacity: 0.3; pointer-events: none; }

/* Une case a cocher dont l'explication court sur deux ou trois lignes s'aligne
   EN HAUT. Centree — ce que fait `.check` par defaut, et qui convient a une
   ligne — elle se retrouve au milieu du paragraphe, a cote d'une phrase qu'elle
   ne commande pas, pendant que le mot qu'elle commande flotte au-dessus d'elle. */
.carto-pane .check { align-items: flex-start; }
.carto-pane .check input { margin-top: 2px; flex: none; }

/* -------------------------------------------------------- le pas de pose */

/* Trente, cinquante ou cent metres. Au-dessus de la rangee d'outils, du cote
   de la porte « Point » qui vient de l'armer : c'est le reglage de ce qu'on
   est en train de faire, et on le change en marchant — pas dans une feuille
   qu'il faudrait ouvrir puis refermer a chaque changement de terrain.
   Il s'arrete avant le bouton « me situer », qui flotte au bord droit. */
.carto-step {
  position: absolute; left: 12px; right: 66px;
  bottom: calc(96px + var(--safe-bot) + var(--gesture-gap));
  display: flex; align-items: center; gap: 6px;
  overflow-x: auto; scrollbar-width: none;
}
.carto-step::-webkit-scrollbar { display: none; }
.carto-step b {
  flex: none; font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--parch-faint);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
}

/* ------------------------------------------------------------ les outils */

/* Une rangee au pouce, pas une colonne : le bas de l'ecran est la seule zone
   qu'une main atteint sans lacher le telephone.

   SIX portes, toutes de la meme largeur, et pas une de plus. Elles se
   partagent l'ecran a parts egales : une rangee reguliere se vise sans
   regarder, alors qu'une rangee qui defile oblige a chercher, puis a faire
   glisser, puis a viser. Annuler et Retablir sont montes en haut a droite, et
   les trois listes tiennent derriere une seule porte. */
.carto-tools {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; gap: 6px;
  padding: 10px 10px calc(12px + var(--safe-bot) + var(--gesture-gap));
  background: linear-gradient(0deg, rgba(6, 18, 12, 0.92), rgba(6, 18, 12, 0));
}
.carto-tool {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 8px 2px; border-radius: 14px;
  font: inherit; cursor: pointer; color: var(--parch-dim);
  background: rgba(12, 28, 20, 0.82);
  border: 1px solid rgba(238, 241, 230, 0.12);
  transition: background 0.18s, border-color 0.18s, transform 0.12s var(--ease);
}
.carto-tool:active { transform: scale(0.95); }
.carto-tool svg { width: 20px; height: 20px; }
/* Le nom tient sur une ligne, quitte a se laisser rogner : « Parcours » sur
   deux lignes ferait une porte plus haute que ses voisines. */
.carto-tool i {
  font-style: normal; font-size: 0.53rem; letter-spacing: 0.02em;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carto-tool.on {
  color: #f2f7ee;
  background: rgba(74, 150, 90, 0.9);
  border-color: rgba(168, 224, 160, 0.55);
}
.carto-tool.off { opacity: 0.34; pointer-events: none; }

/* ------------------------------------------------------------- la fiche */

/* Le titre de la feuille et sa sortie. La croix est indispensable : la feuille
   couvre presque tout l'ecran, il ne reste du fond qu'un ruban de quelques
   pixels, et fermer une fiche ouverte par erreur deviendrait un exercice
   d'adresse — a plus forte raison sur un sentier. */
.sheet-head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px;
}
.sheet-head b {
  flex: 1; min-width: 0;
  font-family: var(--display); font-weight: 800; font-size: 0.92rem;
  color: var(--parchment);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.round-btn.sm { width: 34px; height: 34px; }
.round-btn.sm svg { width: 15px; height: 15px; }

/* Six onglets qui defilent : les empiler sur deux lignes ferait sauter la
   feuille en hauteur a chaque changement d'onglet. */
.carto-tabs {
  display: flex; gap: 6px; margin: 0 0 12px;
  overflow-x: auto; scrollbar-width: none;
}
.carto-tabs::-webkit-scrollbar { display: none; }
.carto-tab {
  flex: 0 0 auto; padding: 7px 9px; border-radius: 10px;
  font: inherit; font-size: 0.62rem; font-weight: 700; cursor: pointer;
  color: var(--parch-faint);
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.10);
}
.carto-tab.on {
  color: var(--moss); border-color: rgba(127, 208, 127, 0.5);
  background: rgba(74, 150, 90, 0.16);
}

/* Le corps de la fiche defile, les deux boutons restent amarres : sur un
   telephone, « Enregistrer » se retrouvait sinon sous le pli du sixieme
   onglet. Meme raison que .pane-foot a l'inscription. */
.sheet.sheet-carto { display: flex; flex-direction: column; overflow: hidden; }
.sheet.sheet-carto > #sheet-body {
  display: flex; flex-direction: column; flex: 1; min-height: 0;
}
.carto-pane { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.carto-pane::-webkit-scrollbar { display: none; }
/* Assez haute pour qu'un onglet charge ne fasse pas sauter la feuille en
   hauteur a chaque changement : six onglets de tailles differentes dans une
   boite elastique, et la feuille se mettrait a respirer sous le pouce. */
.sheet.sheet-carto { height: 88vh; height: 88dvh; }
.carto-foot {
  display: flex; gap: 9px; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: var(--line-soft);
}

.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.row2 .field { margin-bottom: 0; }

.carto-note {
  margin: 0 0 10px; font-size: 0.66rem; font-weight: 700;
  color: var(--parch-dim);
}
.carto-note i {
  display: block; font-style: normal; font-weight: 400;
  font-size: 0.6rem; line-height: 1.34; margin-top: 2px;
  color: var(--parch-faint);
}

/* Modes de validation et objets exiges : des pastilles a cocher, parce qu'une
   liste de cases a cocher empilees prendrait deux ecrans pour cinq mots. */
.carto-modes { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; }
.chip-check { position: relative; cursor: pointer; }
.chip-check input { position: absolute; opacity: 0; pointer-events: none; }
.chip-check span {
  display: block; padding: 7px 12px; border-radius: 10px;
  font-size: 0.64rem; font-weight: 700; color: var(--parch-dim);
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.10);
}
.chip-check.on span {
  color: var(--moss); border-color: rgba(127, 208, 127, 0.5);
  background: rgba(74, 150, 90, 0.16);
}

/* Un palier d'indice : le texte et ce qu'il coute, cote a cote. */
.carto-hint {
  margin-bottom: 10px; padding: 10px 11px;
  border-radius: var(--radius-sm); border: var(--line-soft);
  background: rgba(9, 26, 19, 0.55);
}
.carto-hint b {
  display: block; font-size: 0.66rem; color: var(--gold); margin-bottom: 6px;
}
.carto-hint textarea { margin-bottom: 7px; }
.carto-pen {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.6rem; color: var(--parch-faint);
}
.carto-pen input { width: 72px; padding: 7px 9px; text-align: center; }

/* Les cliches : des tuiles carrees, la croix dans le coin. */
.carto-photos {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  gap: 8px; margin-bottom: 12px;
}
.carto-photo { position: relative; aspect-ratio: 1; }
.carto-photo img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: var(--radius-sm); border: var(--line-soft);
}
.carto-photo-x {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: inherit; font-size: 0.9rem; line-height: 1; cursor: pointer;
  color: #f7ece9; background: var(--rot);
  border: 1.5px solid rgba(12, 22, 16, 0.8);
}
/* UN CLICHE QUI ATTEND LE RESEAU. Il est deja sur le telephone — il ne peut
   plus etre perdu — mais il n'est pas encore chez le serveur, et sous les
   arbres c'est le cas de tous. Le cadre le dit plutot que de laisser croire
   l'image rangee : un pointille, et le mot. Sans cette difference, on ne sait
   pas si la photo est arrivee ou si elle dort dans la file. */
.carto-photo.waiting img { opacity: 0.82; border-style: dashed; }
.carto-photo-wait {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 3px 0; text-align: center;
  font-style: normal; font-size: 0.54rem; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--parch-faint);
  background: rgba(9, 26, 19, 0.78);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}
.carto-photo-add {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; aspect-ratio: 1; font: inherit; cursor: pointer;
  color: var(--parch-faint);
  border-radius: var(--radius-sm);
  border: 1px dashed rgba(238, 241, 230, 0.24);
  background: rgba(9, 26, 19, 0.5);
}
.carto-photo-add svg { width: 22px; height: 22px; }
.carto-photo-add i { font-style: normal; font-size: 0.56rem; }

/* Le butin : l'objet, sa quantite, la croix. */
.carto-rewards { display: grid; gap: 7px; margin-bottom: 12px; }
.carto-reward {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--radius-sm);
  border: var(--line-soft); background: rgba(9, 26, 19, 0.55);
}
.carto-reward img { width: 30px; height: 30px; object-fit: contain; flex: none; }
.carto-reward b { flex: 1; font-size: 0.7rem; font-weight: 700; }
.carto-reward input { width: 62px; padding: 7px 8px; text-align: center; }

/* -------------------------------------------------- la fiche d'une balise

   On regarde avant de modifier : une image, ce qu'elle est, ses liaisons. Sur
   un sentier on ouvre dix balises pour en corriger une. */

/* Une balise qu'on vient de poser le dit : sinon, rien ne distingue une fiche
   neuve d'une fiche qu'on relit, et on repart en croyant l'avoir decrite. */
.carto-neuve {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 12px; padding: 9px 12px;
  border-radius: var(--radius-sm);
  background: rgba(178, 140, 62, 0.16);
  border: 1px solid rgba(226, 201, 141, 0.34);
}
.carto-neuve img { width: 26px; height: 26px; display: block; }
.carto-neuve b { font-size: 0.74rem; color: var(--gold); }
.carto-neuve i {
  display: block; font-style: normal; font-size: 0.6rem; color: var(--parch-faint);
}

/* La photo du lieu, et la pastille posee dans son coin : c'est le couple qu'on
   reconnait sur le terrain — le decor de loin, le role d'un coup d'oeil. */
.carto-vue {
  position: relative; margin-bottom: 12px;
  border-radius: var(--radius-sm); overflow: hidden;
  background: rgba(9, 26, 19, 0.6);
  min-height: 60px;
}
.carto-vue-img { display: block; width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.carto-vue-badge {
  position: absolute; right: 10px; bottom: 10px;
  width: 46px; height: 46px;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
}
.carto-vue-badge img { width: 100%; height: 100%; display: block; }

/* Sans cliche, le cadre garde sa place et ne montre rien : un fond raye, et les
   deux portes au milieu. Le vide se voit, donc il se comble. */
.carto-vue.vide {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(238, 241, 230, 0.22);
  background:
    repeating-linear-gradient(45deg,
      rgba(238, 241, 230, 0.035) 0 8px, rgba(238, 241, 230, 0) 8px 16px),
    rgba(9, 26, 19, 0.6);
}
.carto-vue-shoot {
  display: flex; flex-wrap: wrap; gap: 8px;
  justify-content: center; padding: 0 10px;
  /* La pastille du role occupe le coin bas-droit : les boutons ne passent pas
     dessous. */
  margin-right: 40px;
}
.carto-vue-shoot svg { width: 17px; height: 17px; }

/* Les faits, en grille : un organisateur balaie la fiche du regard, il ne la
   lit pas en phrases. */
.carto-facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
  gap: 7px; margin-bottom: 12px;
}
.carto-fact {
  padding: 7px 10px; border-radius: var(--radius-sm);
  border: var(--line-soft); background: rgba(9, 26, 19, 0.55);
}
.carto-fact i {
  display: block; font-style: normal; font-size: 0.54rem;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--parch-faint);
}
.carto-fact b { display: block; font-size: 0.76rem; color: var(--parchment); }
.carto-brief {
  margin: 0 0 12px; font-size: 0.72rem; line-height: 1.5; color: var(--parch-dim);
}

/* Le choix d'une pastille ou d'un objet se fait sur images : un dessin se
   reconnait, un nom se relit. La grille defile sur sa propre hauteur plutot
   que d'allonger la feuille de cent vignettes. */
.carto-badges {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(48px, 1fr));
  gap: 6px; max-height: 168px; overflow-y: auto;
  margin-bottom: 12px; padding: 4px;
  border-radius: var(--radius-sm); border: var(--line-soft);
  background: rgba(9, 26, 19, 0.45);
}
.carto-badge {
  padding: 3px; border-radius: 10px; cursor: pointer;
  background: none; border: 1.5px solid transparent;
}
.carto-badge img { width: 100%; height: auto; display: block; }
.carto-badge.on { border-color: var(--moss); background: rgba(74, 150, 90, 0.2); }

.carto-pickitems {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(74px, 1fr));
  gap: 7px; max-height: 210px; overflow-y: auto;
  padding: 4px; margin-bottom: 12px;
}
.carto-pickitem {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 7px 4px; border-radius: var(--radius-sm); cursor: pointer;
  font: inherit; color: var(--parch-dim);
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.10);
}
.carto-pickitem img { width: 34px; height: 34px; object-fit: contain; }
.carto-pickitem i {
  font-style: normal; font-size: 0.54rem; line-height: 1.2; text-align: center;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.carto-pickitem.on {
  color: var(--moss); border-color: rgba(127, 208, 127, 0.5);
  background: rgba(74, 150, 90, 0.16);
}

/* La pastille d'un parcours, dans sa liste : la meme lettre que sur la carte. */
/* `span.` : sinon `.carto-row span { flex: 1 }`, plus specifique, l'etirait en
   ellipse sur la moitie de la rangee. */
.carto-pastille,
.carto-row span.carto-pastille {
  flex: none; width: 28px; height: 28px;
  display: grid; place-items: center; border-radius: 50%;
  font-size: 0.7rem; font-weight: 800; color: #0d1c14;
  background: var(--rc, var(--moss));
}

/* Les sentiers qui partent d'un point. */
.carto-links { display: grid; gap: 7px; }
.carto-link {
  position: relative;
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; border-radius: var(--radius-sm);
  border: var(--line-soft); background: rgba(9, 26, 19, 0.55);
}
.carto-link.danger { border-color: rgba(217, 105, 92, 0.42); }
.carto-link b { flex: none; font-size: 0.68rem; font-weight: 700; color: var(--gold); }
.carto-link i { flex: 1; min-width: 0; font-style: normal; font-size: 0.6rem; color: var(--parch-dim);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* La distance ET le temps de marche : c'est la question qu'on se pose en
   posant une balise, et des metres ne se convertissent pas de tete. */
.carto-link em {
  flex: none; font-style: normal; font-size: 0.58rem;
  color: var(--parch-faint); white-space: nowrap;
}

/* La liste des balises et celle des parcours partagent la meme rangee. */
.carto-list { display: grid; gap: 7px; }
.carto-row {
  display: flex; align-items: center; gap: 11px; width: 100%;
  padding: 10px 12px; border-radius: var(--radius-sm);
  font: inherit; text-align: left; cursor: pointer;
  color: var(--parch-dim);
  background: rgba(238, 241, 230, 0.05);
  border: 1px solid rgba(238, 241, 230, 0.11);
}
.carto-row:active { transform: scale(0.985); }
/* `span.` compris : la regle `.carto-row span` qui suit est plus specifique
   qu'une classe seule, et sans le nom de balise la pastille d'un menu
   s'etirait sur la moitie de la rangee. */
.carto-row-ic,
.carto-row span.carto-row-ic { flex: none; width: 30px; height: 30px; object-fit: contain; }
/* Le menu des listes prend un pictogramme trace la ou les balises portent leur
   pastille : il ouvre un ecran, il ne montre pas une chose du terrain. */
.carto-row-ic svg { width: 22px; height: 22px; display: block; margin: 4px; }
.carto-row > b { flex: none; font-size: 0.74rem; color: var(--gold); }
.carto-row span { flex: 1; min-width: 0; }
.carto-row i {
  display: block; font-style: normal; font-size: 0.74rem;
  font-weight: 700; color: var(--parchment);
}
.carto-row em {
  display: block; font-style: normal; font-size: 0.58rem; color: var(--parch-faint);
}
.carto-row u {
  flex: none; text-decoration: none; font-size: 0.55rem;
  padding: 3px 7px; border-radius: 7px;
  color: var(--rot); background: rgba(217, 105, 92, 0.14);
}

/* ------------------------------------------------------------ les calques */

/* Une rangee allumee porte la couleur des outils armes : c'est le meme etat —
   quelque chose est en marche, et la carte n'est plus nue. */
.carto-row.on {
  color: var(--parchment);
  border-color: rgba(168, 224, 160, 0.5);
  background: rgba(74, 150, 90, 0.18);
}
/* Le compte de ce que le calque a a montrer : allumer « Photos » sur un
   terrain qui n'en porte aucune ne dirait rien, et on le chercherait sur la
   carte. Le chiffre repond avant le geste. */
/* `u.` et `span.` : les rangees ont deja leurs regles pour `u` et `span`, plus
   specifiques qu'une classe seule — sans le nom de balise, la pastille
   reprenait le rouge de « inactive » et l'oeil s'etirait comme un libelle. */
.carto-row u.carto-row-n {
  flex: none; text-decoration: none;
  font-size: 0.6rem; font-weight: 800;
  padding: 3px 8px; border-radius: 8px;
  color: var(--gold); background: rgba(226, 201, 141, 0.14);
}
.carto-row span.carto-switch {
  flex: none; display: grid; place-items: center; color: var(--parch-faint);
}
.carto-row span.carto-switch svg { width: 19px; height: 19px; display: block; }
.carto-row.on span.carto-switch { color: var(--moss); }

/* Une bulle d'information : ce que l'ecran ne PEUT pas faire, et ou cela se
   fait. Elle ne se distingue pas d'une note par la couleur seule — un
   pictogramme la nomme, sinon elle se lit comme le mode d'emploi qui la
   precede. */
.carto-info {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 0 0 12px; padding: 10px 12px;
  border-radius: var(--radius-sm);
  color: var(--parch-dim);
  background: rgba(93, 148, 214, 0.12);
  border: 1px solid rgba(140, 186, 240, 0.34);
}
.carto-info > span:first-child { flex: none; color: #8cbaf0; }
.carto-info svg { width: 18px; height: 18px; display: block; }
.carto-info b { display: block; font-size: 0.68rem; color: var(--parchment); }
.carto-info i {
  display: block; font-style: normal; font-size: 0.62rem; line-height: 1.4;
  margin-top: 3px; color: var(--parch-faint);
}

/* « Suivre le role » : la premiere case du choix de pastille, marquee, pour
   qu'on puisse revenir au defaut apres avoir impose un dessin. Sans elle, un
   choix etait definitif — il n'y avait plus de case a decocher. */
.carto-badge.auto { position: relative; }
.carto-badge.auto u {
  position: absolute; left: 0; right: 0; bottom: 1px;
  text-decoration: none; text-align: center;
  font-size: 0.44rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--gold);
  background: rgba(9, 20, 14, 0.78);
}


/* ====================== SE RENDRE SUR PLACE ======================

   Le point, l'adresse quand le reseau la donne, et la main passee a
   l'application de cartes du telephone. Poser un terrain, c'est y aller — et
   recopier douze chiffres a la main au moment du depart etait le seul geste de
   l'editeur qui se faisait hors de l'ecran. */
.carto-guide {
  padding: 11px 13px; border-radius: 12px;
  background: rgba(238, 241, 230, 0.05); border: var(--line);
}
.carto-guide b {
  display: block; font-size: 0.86rem; font-weight: 800;
  letter-spacing: 0.02em; color: var(--parchment);
}
.carto-guide i {
  display: block; margin: 4px 0 10px; font-style: normal;
  font-size: 0.64rem; line-height: 1.35; color: var(--parch-faint);
}
/* Le lien d'itineraire est un <a> et non un bouton : il doit ouvrir une autre
   application, ce qu'un gestionnaire de clic ne fait pas de facon fiable sur
   iOS. Il porte donc l'allure d'un bouton, a la main. */
.carto-guide a.btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }


/* Le travail en cours : ecrire une version lit chaque photo sur le disque, ce
   qui prend des dizaines de secondes. La barre porte SON POURCENTAGE, ecrit
   dedans : un trait qui avance sans chiffre ne dit pas si l'on en a pour dix
   secondes ou cinq minutes, et c'est la qu'on ferme l'application au milieu. */
.carto-job { padding: 12px 13px; border-radius: 12px; background: rgba(238, 241, 230, 0.05); border: var(--line); }
.carto-job b { display: block; font-size: 0.78rem; font-weight: 800; color: var(--parchment); }
.carto-job i { display: block; margin-top: 6px; font-style: normal; font-size: 0.62rem; color: var(--parch-faint); }
.carto-job-track {
  margin-top: 9px; height: 10px; border-radius: 999px; overflow: hidden;
  background: rgba(4, 14, 9, 0.6); border: var(--line);
}
.carto-job-fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--gold-deep), var(--gold));
  transition: width 0.3s linear;
}