/* LA CHAINE DES ETAPES (2.87, js/carto/87-chaine.js).

   L'ordre d'un parcours en briques de bois, reliees par des fleches
   dessinees. Un panneau pose sur le bas de la carte (la moitie de l'ecran,
   tout l'ecran par la poignee), qui couvre la rangee d'outils au lieu de la
   changer de metier. Le brun vient du theme (`--bois-*`, `--wood-*`) : une
   brique est une planche, et un hiver qui repeint les planches doit la
   repeindre aussi. Maquettes et decisions : /dev/demo_test05. */

.carto-chaine {
  position: absolute; left: 0; right: 0; bottom: 0; top: 47%; z-index: 6;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, var(--bois-2), var(--bois-3));
  border-radius: 24px 24px 0 0;
  border-top: 1px solid rgba(226, 201, 141, 0.35);
  box-shadow: 0 -18px 40px rgba(0, 0, 0, 0.55);
  color: var(--parchment);
  transition: top 0.25s var(--ease);
}
.carto-chaine[hidden] { display: none; }
/* Le nouveau lieu prend la coque : la chaine se range dessous, comme la
   rangee d'outils (carto-neuf.css). */
#screen-carto.neuf .carto-chaine { display: none; }
.carto-chaine.plein { top: calc(var(--safe-top) + 64px); }
/* Petite : la poignee et l'entete, le temps de choisir sur la carte. */
/* Petite : la poignee et l'entete (titre et boutons du parcours), rien
   d'autre, le temps de choisir sur la carte. */
/* Sous l'entete, la marge du bas : l'indicateur d'accueil, plus de quoi ne
   pas frôler le bord ni se faire mordre par l'arrondi de l'ecran. */
.carto-chaine.petit { top: calc(100% - 96px - var(--safe-bot) - 18px); }
.carto-chaine.petit .bq-tete { border-bottom: 0; }
.carto-chaine.petit .bq-zone { visibility: hidden; }

/* Pendant qu'on range, ce qui flotte sur la carte se tait : les boutons de
   situation et la veilleuse passeraient sous le panneau, ou par-dessus. */
#screen-carto.chaine .carto-float,
#screen-carto.chaine .carto-node,
#screen-carto.chaine .carto-tiles { display: none !important; }

.bq-poignee {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 7px 0 3px; border: 0; background: none; cursor: pointer; flex: none;
}
.bq-poignee span { width: 54px; height: 6px; border-radius: 3px; background: rgba(226, 201, 141, 0.5); }
.bq-poignee em {
  font-style: normal; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--parch-faint);
}

.bq-tete {
  display: flex; align-items: center; gap: 9px; padding: 2px 12px 10px 14px; flex: none;
  border-bottom: 1px solid rgba(226, 201, 141, 0.14);
}
.bq-dot { width: 14px; height: 14px; border-radius: 50%; flex: none; box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.35); }
.bq-titre {
  flex: 1; min-width: 0; text-align: left; border: 0; background: none; padding: 0;
  color: inherit; font: inherit; cursor: pointer; line-height: 1.2;
}
.bq-titre b, .bq-titre i {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bq-titre b { color: var(--gold); font-size: 0.95rem; }
.bq-titre i { font-style: normal; font-size: 0.74rem; color: var(--parch-dim); }
.bq-titre em { font-style: normal; color: var(--ember); }
.bq-tete > button:not(.bq-titre) {
  flex: none; border: 0; border-radius: 12px; padding: 9px 12px; cursor: pointer;
  font: 800 0.8rem var(--sans); color: #fff;
  display: inline-flex; align-items: center; gap: 6px;
}
.bq-ok { background: linear-gradient(180deg, #3f9a55, var(--moss-deep)); }
.bq-ok.off { opacity: 0.45; pointer-events: none; }
.bq-brou { background: linear-gradient(180deg, var(--ember), #a8622a); }
.bq-brou u { text-decoration: none; background: rgba(0, 0, 0, 0.28); border-radius: 999px; padding: 0 7px; font-size: 0.75rem; }
.bq-tete > .bq-annul { background: rgba(217, 105, 92, 0.2); color: #f0a497; border: 1px solid rgba(217, 105, 92, 0.6); }
.bq-tete > .bq-ferme {
  width: 47px; height: 47px; padding: 0; justify-content: center; border-radius: 50%;
  background: rgba(0, 0, 0, 0.3); color: var(--parch-dim);
}
.bq-tete [data-icon] svg { width: 16px; height: 16px; }
.bq-tete > .bq-ferme [data-icon] svg { width: 21px; height: 21px; }

/* Le plan : une trame de points, comme un papier de releve. */
.bq-zone {
  flex: 1; overflow-y: auto; overflow-x: hidden; position: relative;
  -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background-image: radial-gradient(rgba(226, 201, 141, 0.07) 1px, transparent 1.2px);
  background-size: 18px 18px;
}
.bq-plan { position: relative; min-height: 100%; --bq-glisse: cubic-bezier(0.22, 0.9, 0.3, 1); }
.bq-svg { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.bq-fl path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bq-fl .o { stroke: rgba(0, 0, 0, 0.55); stroke-width: 8; transform: translate(1.5px, 3px); }
.bq-fl .t { stroke-width: 4.2; }
.bq-fl .r { stroke: rgba(255, 255, 255, 0.3); stroke-width: 1.2; transform: translate(-1px, -1px); }
.bq-fl.pale { opacity: 0.35; }

.bq-lbl {
  position: absolute; transform: translate(-50%, -50%); white-space: nowrap; pointer-events: none;
  font-size: 0.68rem; font-weight: 800; color: var(--gold);
  background: rgba(26, 19, 12, 0.92); padding: 2px 8px; border-radius: 999px;
  border: 1px solid rgba(226, 201, 141, 0.25);
}
.bq-lbl.rouge { color: #f0a497; border-color: rgba(217, 105, 92, 0.5); }
.bq-lbl.pale { opacity: 0.4; }

/* LA BRIQUE. Une planche en relief (l'ombre franche dessous), veinee. */
.bq-brique {
  position: absolute; height: 62px; border-radius: 16px; display: flex; align-items: stretch;
  background: linear-gradient(165deg,
    color-mix(in srgb, var(--bois-1) 62%, var(--wood-2)) 0%,
    color-mix(in srgb, var(--bois-1) 80%, var(--wood-2)) 50%, var(--bois-1) 100%);
  border: 1px solid rgba(226, 201, 141, 0.32);
  box-shadow: 0 6px 0 var(--bois-3), 0 10px 18px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.12);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease), opacity 0.15s,
              translate 0.34s var(--bq-glisse);
}
.bq-brique::after {
  content: ''; position: absolute; inset: 5px; border-radius: 12px; pointer-events: none;
  background: repeating-linear-gradient(178deg, rgba(0, 0, 0, 0.05) 0 3px, transparent 3px 9px);
}
.bq-corps {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 0 4px 0 16px;
  border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer;
  position: relative; z-index: 1;
}
.bq-n {
  position: absolute; left: -9px; top: -9px; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 900; color: #2a1a08;
  background: #e0a33a; box-shadow: 0 0 0 2px var(--bois-3), 0 3px 6px rgba(0, 0, 0, 0.5);
}
.bq-brique img { width: 40px; height: 40px; border-radius: 50%; flex: none; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.6)); }
.bq-tx { flex: 1; min-width: 0; line-height: 1.2; }
.bq-tx i, .bq-tx em { display: block; font-style: normal; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bq-tx i { font-size: 0.88rem; font-weight: 700; color: #f6ecd4; }
.bq-tx em { font-size: 0.72rem; color: #cdb991; }
.bq-tx .bq-bout {
  text-decoration: none; font-size: 0.66rem; font-weight: 800; padding: 1px 7px; border-radius: 999px; margin-right: 4px;
}
.bq-tx .bq-bout.dep { background: rgba(127, 208, 127, 0.2); color: var(--moss-soft); }
.bq-tx .bq-bout.arr { background: rgba(240, 197, 90, 0.2); color: #f0c55a; }
.bq-grip {
  width: 30px; flex: none; position: relative; z-index: 1; cursor: grab; touch-action: none;
  background: radial-gradient(circle, rgba(226, 201, 141, 0.7) 1.6px, transparent 2px) center / 7px 7px;
  background-repeat: repeat; background-clip: content-box; padding: 18px 8px;
  opacity: 0.6;
}
.bq-brique.petit .bq-corps { gap: 7px; padding-left: 12px; }
.bq-brique.petit img { width: 32px; height: 32px; }
.bq-brique.petit .bq-tx i { font-size: 0.8rem; }
.bq-brique.petit .bq-grip { width: 22px; padding: 18px 5px; }
.bq-brique.sel {
  border: 2px solid #f0c55a; transform: scale(1.03);
  box-shadow: 0 6px 0 var(--bois-3), 0 0 0 6px rgba(240, 197, 90, 0.16), 0 14px 26px rgba(0, 0, 0, 0.55);
}
.bq-brique.sel .bq-n { background: #f0c55a; }
.bq-brique.pale, .bq-cell.pale { opacity: 0.42; filter: saturate(0.3); }
.bq-brique.partie { opacity: 0.25; }
.bq-brique.partie.sel { transform: none; box-shadow: none; border-style: dashed; }
.bq-brique.cible { box-shadow: 0 0 0 3px var(--moss), 0 10px 18px rgba(0, 0, 0, 0.45); }
/* La brique qu'on glisse : detachee, penchee, sous le doigt. */
.bq-brique.leve {
  z-index: 200; pointer-events: none; transform: rotate(-3deg) scale(1.06);
  box-shadow: 0 22px 34px rgba(0, 0, 0, 0.65), 0 0 0 2px #f0c55a;
}
/* Lachee dans une fente : elle file a sa place en accelerant, redressee. */
.bq-brique.leve.aspire {
  transform: none;
  transition: left 0.3s cubic-bezier(0.55, 0, 0.25, 1), top 0.3s cubic-bezier(0.55, 0, 0.25, 1),
              width 0.3s cubic-bezier(0.55, 0, 0.25, 1), transform 0.3s var(--ease), box-shadow 0.3s;
  box-shadow: 0 6px 0 var(--bois-3), 0 0 0 2px #f0c55a;
}
/* Sa place l'attend, vide, puis elle s'y pose d'un rebond. */
.bq-brique.attend, .bq-cell.attend { opacity: 0; transition: none; }
.bq-brique.pose, .bq-cell.pose { animation: bq-pose 0.42s var(--ease); }
@keyframes bq-pose {
  0% { scale: 1.08; filter: brightness(1.45); }
  45% { scale: 0.97; }
  100% { scale: 1; filter: none; }
}
/* Une etape qui entre dans la chaine s'y ouvre. */
.bq-brique.entre, .bq-cell.entre { animation: bq-entre 0.36s var(--ease) both; }
@keyframes bq-entre {
  from { scale: 0.8; opacity: 0; }
  to { scale: 1; opacity: 1; }
}
/* Les fleches ne suivent pas les briques qui glissent : elles s'effacent le
   temps du mouvement et reviennent sur le plan pose. */
.bq-plan.flip .bq-svg, .bq-plan.flip .bq-lbl, .bq-plan.flip .bq-grp {
  animation: bq-fondu 0.3s ease 0.26s both;
}
@keyframes bq-fondu { from { opacity: 0; } to { opacity: 1; } }
/* L'ecart ouvert sous le doigt : les briques s'eloignent de la fente. */
.bq-cell, .bq-grp, .bq-lbl { transition: translate 0.24s var(--bq-glisse); }
.bq-fl { transition: transform 0.24s var(--bq-glisse), opacity 0.18s; }
.bq-fl.coupe, .bq-lbl.coupe { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .bq-brique, .bq-cell, .bq-grp, .bq-lbl, .bq-fl, .bq-brique.leve.aspire { transition: none; }
}

/* LA BALISE PRISE SUR LA CARTE (l'appui long) : elle suit le doigt, un fil
   vert pointille la relie a sa place, jusqu'a la fente ou on la lache. */
.bq-vol { position: fixed; inset: 0; z-index: 300; pointer-events: none; }
.bq-vol-fil { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.bq-vol-fil path {
  fill: none; stroke: var(--moss); stroke-width: 4; stroke-dasharray: 2 10; stroke-linecap: round;
  filter: drop-shadow(1px 3px 2px rgba(0, 0, 0, 0.5));
}
.bq-vol-pic {
  position: absolute; width: 58px; height: 58px; border-radius: 50%;
  transform: translate(-50%, -115%) rotate(-6deg) scale(1.1);
  display: grid; place-items: center;
  background: radial-gradient(circle, rgba(127, 208, 127, 0.35), rgba(127, 208, 127, 0.08));
  border: 2.5px solid var(--moss); box-shadow: 0 18px 26px rgba(0, 0, 0, 0.6);
}
.bq-vol-pic img { width: 40px; height: 40px; }
.bq-vol.aspire .bq-vol-pic {
  transform: translate(-50%, -50%) scale(0.7);
  transition: left 0.3s cubic-bezier(0.55, 0, 0.25, 1), top 0.3s cubic-bezier(0.55, 0, 0.25, 1), transform 0.3s var(--ease);
}
.bq-vol.aspire .bq-vol-pic b, .bq-vol.aspire .bq-vol-fil { opacity: 0; transition: opacity 0.15s; }
.bq-vol.lache { opacity: 0; transition: opacity 0.2s; }
.bq-vol-pic b {
  position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%) rotate(6deg); white-space: nowrap;
  font-size: 0.68rem; font-weight: 800; color: #10321b; background: var(--moss); padding: 1px 8px; border-radius: 999px;
}

/* PLUS TOT, POIGNEE, PLUS TARD : debout sur le bord droit de la brique
   choisie, et plus haute qu'elle — deux fleches de trente pixels se visent,
   deux de vingt dans soixante-deux pixels ne se viseraient pas. */
.bq-brique.bord .bq-corps { padding-right: 40px; }
.bq-col {
  position: absolute; right: -10px; top: -14px; bottom: -14px; width: 40px; z-index: 3;
  display: flex; flex-direction: column; align-items: stretch;
  border-radius: 14px; border: 2px solid #f0c55a;
  background: linear-gradient(180deg, var(--bois-2), var(--bois-3));
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.55);
  animation: bq-entre 0.22s var(--ease) both;
}
.bq-col button {
  flex: 1; border: 0; background: none; color: #f0c55a; cursor: pointer; padding: 0;
  display: grid; place-items: center;
}
.bq-col button[disabled] { opacity: 0.25; }
.bq-col [data-icon] svg { width: 18px; height: 18px; }
.bq-col .haut svg { transform: rotate(-90deg); }
.bq-col .bas svg { transform: rotate(90deg); }
.bq-col .bq-grip {
  width: auto; flex: none; height: 20px; padding: 3px 11px; opacity: 0.8;
  border-top: 1px solid rgba(240, 197, 90, 0.25); border-bottom: 1px solid rgba(240, 197, 90, 0.25);
}
.bq-brique.leve .bq-col { display: none; }

/* Les marques du brouillon : ce qu'il change par rapport au parcours ecrit. */
.bq-mq {
  position: absolute; right: 34px; top: -9px; z-index: 2; font-size: 0.66rem; font-weight: 800;
  padding: 1px 8px; border-radius: 999px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
}
.bq-brique.bord .bq-mq { right: 44px; }
.bq-mq.a { background: var(--moss); color: #10321b; }
.bq-mq.d { background: #f0c55a; color: #2a1a08; }

/* Trois balises ou plus au meme numero : des cellules, le code debout. */
.bq-cell {
  position: absolute; height: 62px; border-radius: 14px; padding: 6px 0 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  background: linear-gradient(165deg, color-mix(in srgb, var(--bois-1) 62%, var(--wood-2)), var(--bois-1));
  border: 1px solid rgba(226, 201, 141, 0.32); color: #f6ecd4;
  box-shadow: 0 5px 0 var(--bois-3), 0 8px 14px rgba(0, 0, 0, 0.45);
}
.bq-cell img { width: 24px; height: 24px; }
.bq-cell b { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 0.72rem; font-weight: 900; letter-spacing: 0.04em; }

/* L'etape « au choix » : un cadre dore autour de ses briques. */
.bq-grp {
  position: absolute; left: 10px; right: 10px; border-radius: 20px; pointer-events: none;
  border: 1.5px solid rgba(240, 197, 90, 0.55); background: rgba(240, 197, 90, 0.06);
}
.bq-grp span {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%); white-space: nowrap;
  background: var(--bois-2); padding: 1px 10px; border-radius: 999px; font-size: 0.68rem; font-weight: 800;
  color: #f0c55a; border: 1px solid rgba(240, 197, 90, 0.55);
}

/* Les emplacements : inserer avant, apres, en meme temps. */
.bq-ghost {
  position: absolute; left: 60px; right: 60px; height: 46px; border-radius: 16px; cursor: pointer;
  border: 2px dashed rgba(127, 208, 127, 0.75); background: rgba(127, 208, 127, 0.08);
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--moss-soft); font: 800 0.8rem var(--sans);
}
.bq-ghost .pl {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(180deg, #4fb266, var(--moss-deep)); color: #fff; font-size: 1.15rem; font-weight: 900;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45);
}
.bq-ghost .q { font-size: 1.2rem; }
.bq-ghost.actif {
  border-style: solid; border-color: var(--moss); background: rgba(127, 208, 127, 0.16);
  box-shadow: 0 0 0 6px rgba(127, 208, 127, 0.12);
}
.bq-ghost.cote {
  left: auto; right: auto; flex-direction: column; gap: 3px; font-size: 0.64rem; line-height: 1.1; text-align: center;
}

.bq-acts { position: absolute; display: flex; gap: 6px; z-index: 2; animation: bq-fondu 0.2s ease both; }
.bq-acts button {
  border-radius: 11px; padding: 6px 10px; cursor: pointer; font: 800 0.74rem var(--sans);
  border: 1px solid rgba(226, 201, 141, 0.4); background: rgba(0, 0, 0, 0.35); color: var(--parchment);
  display: inline-flex; align-items: center; gap: 4px;
}
.bq-acts button[disabled] { opacity: 0.3; }
.bq-acts button.rouge { color: #f0a497; border-color: rgba(217, 105, 92, 0.55); }
.bq-acts [data-icon] svg { width: 15px; height: 15px; }
.bq-acts .bq-plus-b {
  width: 34px; padding: 0; justify-content: center; border-radius: 50%;
  background: linear-gradient(180deg, #4fb266, var(--moss-deep)); border-color: transparent; color: #fff;
}
.bq-plus-b span { font-size: 1.2rem; font-weight: 900; line-height: 1; transition: transform 0.2s var(--ease); }
.bq-plus-b.ouvert span { transform: rotate(45deg); }

/* Ce que le « + » deplie : ou inserer une balise. */
.bq-plus {
  position: absolute; left: 12px; right: 12px; display: flex; gap: 6px; z-index: 2;
  animation: bq-deplie 0.22s var(--ease) both;
}
@keyframes bq-deplie { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
.bq-ins {
  flex: 1; min-width: 0; height: 34px; border-radius: 12px; cursor: pointer;
  border: 2px dashed rgba(127, 208, 127, 0.75); background: rgba(127, 208, 127, 0.1);
  display: flex; align-items: center; justify-content: center; gap: 5px;
  color: var(--moss-soft); font: 800 0.72rem var(--sans); white-space: nowrap; padding: 0 6px;
}
.bq-ins .pl {
  width: 18px; height: 18px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(180deg, #4fb266, var(--moss-deep)); color: #fff; font-size: 0.9rem; font-weight: 900;
}

.bq-fente {
  position: absolute; left: 40px; right: 40px; height: 6px; border-radius: 3px;
  background: var(--moss); box-shadow: 0 0 14px var(--moss); pointer-events: none;
  transition: top 0.2s var(--bq-glisse);
  animation: bq-fente 0.26s var(--ease) both;
}
@keyframes bq-fente { from { transform: scaleX(0.2); opacity: 0; } to { transform: scaleX(1); opacity: 1; } }
.bq-fente[hidden] { display: none; }

/* La bande des plus proches, sous l'emplacement arme. */
.bq-bande-t {
  position: absolute; left: 14px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--parch-faint);
}
.bq-bande {
  position: absolute; left: 0; right: 0; display: flex; gap: 8px; padding: 0 14px;
  overflow-x: auto; scrollbar-width: none;
}
.bq-bande::-webkit-scrollbar { display: none; }
.bq-libre {
  flex: none; width: 150px; border-radius: 14px; padding: 8px 10px; cursor: pointer; text-align: left;
  display: flex; gap: 8px; align-items: center; color: var(--parchment); font: inherit;
  background: rgba(0, 0, 0, 0.28); border: 1px solid rgba(127, 208, 127, 0.45);
}
.bq-libre img { width: 30px; height: 30px; flex: none; }
.bq-libre b { display: block; font-size: 0.78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 92px; }
.bq-libre i { font-style: normal; font-size: 0.7rem; color: var(--moss-soft); }

/* La feuille du brouillon. */
.bq-chgs { list-style: none; margin: 4px 0 14px; padding: 0; }
.bq-chg {
  display: flex; gap: 10px; align-items: center; padding: 8px 10px; margin-bottom: 6px;
  border-radius: 12px; background: rgba(0, 0, 0, 0.22); font-size: 0.85rem;
}
.bq-chg i {
  font-style: normal; width: 22px; height: 22px; border-radius: 7px; flex: none;
  display: grid; place-items: center; font-weight: 900;
}
.bq-chg.a i { background: rgba(127, 208, 127, 0.2); color: var(--moss-soft); }
.bq-chg.d i { background: rgba(240, 197, 90, 0.2); color: #f0c55a; }
.bq-chg.r i { background: rgba(217, 105, 92, 0.2); color: #f0a497; }
#bq-fusion, #bq-detruire { flex-direction: column; }
#bq-fusion small, #bq-detruire small { display: block; font-weight: 600; font-size: 0.72rem; opacity: 0.8; margin-top: 2px; }
#bq-detruire, #bq-garder { margin-top: 8px; }

/* SUR UN ECRAN LARGE, la chaine prend la colonne de droite (le dock), comme
   les feuilles : on range en regardant tout le terrain. */
@media (min-width: 960px) {
  #screen-carto .carto-chaine,
  #screen-carto .carto-chaine.plein {
    top: 0; left: auto; right: calc(0px - var(--carto-dock)); width: var(--carto-dock);
    border-radius: 0; border-top: 0; border-left: var(--line); box-shadow: none;
  }
  #screen-carto .carto-chaine .bq-poignee { display: none; }
}

/* LE FILET D'UNE COLLECTE (2.93, js/carto/88-filet.js). Une planche basse,
   pas une moitie d'ecran : c'est la carte qu'on regarde, on y touche des
   points. La jauge dit ce que la partie jouera. */
.carto-filet {
  position: absolute; left: 10px; right: 10px;
  bottom: calc(var(--safe-bot) + 12px); z-index: 6;
  padding: 12px 14px 12px;
  background: linear-gradient(180deg, var(--bois-2), var(--bois-3));
  border: 1px solid rgba(226, 201, 141, 0.35);
  border-radius: 18px;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.5);
  color: var(--parchment);
}
.carto-filet[hidden] { display: none; }
#screen-carto.neuf .carto-filet { display: none; }
.carto-filet .filet-tete b { display: block; color: var(--gold); font-size: 1.02rem; }
.carto-filet .filet-tete i { font-style: normal; font-size: 0.85rem; opacity: 0.85; }
.carto-filet .filet-aide { margin: 6px 0 8px; font-size: 0.82rem; opacity: 0.8; }
.carto-filet .filet-aide em { color: var(--gold); font-style: normal; }
.filet-acts { display: flex; gap: 8px; margin-top: 8px; }
.filet-acts .btn { flex: 1; }
.filet-acts .btn.grow { flex: 2; }
/* Le filet ouvert, la rangee d'outils se range : un seul bas d'ecran. */
#screen-carto.filet .carto-tools,
#screen-carto.filet .carto-node,
#screen-carto.filet .carto-tiles { visibility: hidden; }

/* LE FILTRE DES OBJETS (2.93.3), a cote de la croix et 30 % plus gros qu'elle :
   c'est un reglage qu'on cherche du pouce, la croix un geste de sortie. */
.bq-tete > .bq-filtre {
  width: 47px; height: 47px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid rgba(226, 201, 141, 0.28);
  background: rgba(0, 0, 0, 0.3); color: var(--parch-dim); flex: none;
}
.bq-tete > .bq-filtre [data-icon] svg { width: 21px; height: 21px; }
.bq-tete > .bq-filtre.on { background: rgba(240, 197, 90, 0.2); border-color: #f0c55a; color: #f0c55a; }

/* CE QUE L'ETAPE DONNE, en haut a droite, juste avant la poignee, a cheval
   sur le bord haut de la brique. */
.bq-objets {
  position: absolute; top: -13px; right: 34px; z-index: 2;
  display: flex; gap: 3px; pointer-events: none;
}
.bq-brique.petit .bq-objets { right: 24px; }
.bq-brique.bord .bq-objets { right: 44px; }
.bq-obj {
  position: relative; width: 24px; height: 24px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--bois-3); border: 1px solid rgba(226, 201, 141, 0.5);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.45);
}
.bq-obj img { width: 18px; height: 18px; object-fit: contain; }
.bq-obj u {
  position: absolute; right: -4px; bottom: -4px; min-width: 13px; height: 13px; padding: 0 2px;
  border-radius: 7px; background: #1d140b; color: var(--parchment);
  font: 800 9px/13px system-ui, sans-serif; text-decoration: none; text-align: center;
}
.bq-obj.plus { font: 800 10px system-ui, sans-serif; color: var(--parch-dim); }
/* L'eclat du mot du Coeur : un anneau d'or qui luit, et sa lettre. Ce n'est
   pas un objet qu'on emporte, c'est une piece de l'epreuve ultime. */
.bq-obj.frag {
  border: 1.5px solid #f0c55a;
  background: radial-gradient(circle, rgba(240, 197, 90, 0.35), var(--bois-3) 70%);
  box-shadow: 0 0 0 2px rgba(240, 197, 90, 0.18), 0 0 8px rgba(240, 197, 90, 0.55), 0 2px 5px rgba(0, 0, 0, 0.45);
}
.bq-obj.frag u { background: #f0c55a; color: #2a1a06; }