/* Le pointeur — surcouche de la page hôte, au-dessus de toutes les vues. */
.bt-racine{position:fixed;inset:0;z-index:4000;pointer-events:none;
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:#0b1220}

/* ---- les boutons ------------------------------------------------------- */
/* Colonne sur le bord droit, centrée en hauteur, dépliage vers le HAUT.
   right:10px et non 0 : collée au bord, la poignée serait happée par le geste
   « retour » du navigateur sur iOS et Android. */
.bt-barre{position:fixed;right:10px;top:calc(50% + 23px);transform:translateY(-100%);
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:.4rem;
  pointer-events:auto}
.bt-racine [hidden]{display:none!important}

/* La poignée : discrète au repos, franche au contact. */
.bt-poignee-barre{display:flex;flex-direction:column;gap:3px;align-items:center;
  justify-content:center;width:26px;height:46px;padding:0;cursor:pointer;
  border:0;border-radius:13px;background:rgba(11,18,32,.38);
  backdrop-filter:blur(2px);transition:background .15s}
.bt-barre.ouvert .bt-poignee-barre,.bt-poignee-barre:hover,
.bt-poignee-barre:focus-visible{background:#0b1220}
.bt-poignee-barre:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bt-grain{width:4px;height:4px;border-radius:50%;background:#fff;opacity:.85}

/* Les boutons : repliés, ils ne prennent aucune place et ne captent aucun clic. */
.bt-bouton{pointer-events:auto;padding:.5rem .95rem;border:0;border-radius:999px;
  font:inherit;font-weight:600;cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.28);
  white-space:nowrap;max-height:3rem;transform-origin:bottom right;
  transition:opacity .16s,transform .16s,max-height .16s,width .16s,padding .16s,margin .16s}
.bt-barre:not(.ouvert) .bt-bouton{opacity:0;transform:scale(.85) translateX(12px);
  max-height:0;width:0;padding:0;border:0;overflow:hidden;margin-bottom:-.4rem;
  pointer-events:none;box-shadow:none}
.bt-bouton:focus-visible{outline:2px solid #fff;outline-offset:2px}
.bt-bouton-ticket{background:#b3261e;color:#fff}
.bt-bouton-ticket::before{content:"bêta · ";font-weight:400;opacity:.8}
.bt-bouton-aide{background:#eceff3;color:#0b1220}
.bt-bouton-atelier{background:#1f4d8f;color:#fff}
.bt-bouton.actif{background:#0b1220;color:#fff}

/* Écrans courts : on garde la colonne lisible même si la fenêtre est basse. */
@media (max-height:420px){.bt-barre{top:auto;bottom:10px;transform:none}}
.bt-barre .bt-bouton{transform-origin:bottom right}

/* ---- surbrillance et pastilles ----------------------------------------- */
html[data-ticket-mode] .bt-cadre:not([hidden]){display:block}
.bt-cadre{position:fixed;pointer-events:none;border:2px solid #b3261e;border-radius:4px;
  background:rgba(179,38,30,.10);box-shadow:0 0 0 1px rgba(255,255,255,.7)}
.bt-pastilles{position:fixed;inset:0;pointer-events:none}
.bt-pastille{position:fixed;width:12px;height:12px;border-radius:999px;
  background:#1f4d8f;border:2px solid #fff;box-shadow:0 1px 4px rgba(0,0,0,.4)}
.bt-pastille.vue{background:#6b7a90}
.bt-pastille.brouillon{background:#b8860b}
.bt-pastille.revoir{background:#b3261e}

/* ---- la bulle ----------------------------------------------------------- */
.bt-bulle{position:fixed;pointer-events:auto;box-sizing:border-box;
  width:min(23rem,calc(100vw - 32px));max-height:calc(100vh - 104px);overflow:auto;
  background:#fff;border:1px solid #c9ced6;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);padding:0 .9rem .9rem}
.bt-poignee{position:sticky;top:0;margin:0 -.9rem .6rem;padding:.5rem .9rem;cursor:move;
  user-select:none;background:#0b1220;color:#fff;border-radius:11px 11px 0 0;
  font-weight:600;font-size:.92rem}
.bt-cible{margin:0 0 .5rem;font-size:.84rem;color:#4a5568;word-break:break-word}
.bt-alerte{margin:0 0 .5rem;padding:.35rem .55rem;border-radius:6px;font-size:.84rem;
  background:#fdeceb;color:#8c1d18}
.bt-texte{width:100%;box-sizing:border-box;padding:.5rem .6rem;border:1px solid #c9ced6;
  border-radius:8px;font:inherit;resize:vertical;color:inherit;background:#fff}
.bt-voisins{margin:0 0 .5rem;padding:.35rem .55rem;border-radius:6px;font-size:.84rem;
  background:#f1f3f6;color:#4a5568}
.bt-voisins.connu{background:#fdf3e3;color:#7a4e00;font-weight:600}
.bt-gravites{display:flex;flex-wrap:wrap;gap:.35rem;margin:.6rem 0}
.bt-gravite{padding:.25rem .6rem;border:1px solid #c9ced6;border-radius:999px;
  background:#f6f7f9;font:inherit;font-size:.84rem;cursor:pointer;color:inherit}
.bt-gravite.actif{background:#0b1220;border-color:#0b1220;color:#fff}
.bt-actions{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:flex-end}
.bt-secondaire,.bt-principal{padding:.45rem .9rem;border-radius:8px;font:inherit;
  font-weight:600;cursor:pointer}
.bt-secondaire{border:1px solid #c9ced6;background:#fff;color:#0b1220}
.bt-principal{border:0;background:#b3261e;color:#fff}
.bt-principal[disabled]{opacity:.6;cursor:default}
.bt-etat{margin:.5rem 0 0;font-size:.84rem;color:#4a5568;min-height:1.2em}

/* ---- panneau « Comprendre » --------------------------------------------- */
.bt-aide-titre{margin:.2rem 0 .4rem;font-size:1rem}
.bt-aide-texte{margin:0 0 .6rem;white-space:pre-line}
.bt-aide-manuel{margin:0 0 .5rem;font-size:.86rem;color:#4a5568}
.bt-aide-liens{margin:0 0 .6rem;padding-left:1.1rem;font-size:.9rem}
.bt-aide-passer{display:inline-block}
.bt-repli{margin:0 0 .6rem;padding:.4rem .6rem;border:1px solid #c9ced6;border-radius:8px;
  background:#f6f7f9}
.bt-repli summary{cursor:pointer;font-size:.88rem;font-weight:600}

/* ---- panneau « Atelier » ------------------------------------------------- */
.bt-champ{display:block;margin:.5rem 0;font-size:.84rem;font-weight:600;color:#4a5568}
.bt-champ input,.bt-champ textarea{display:block;width:100%;box-sizing:border-box;
  margin-top:.2rem;padding:.4rem .5rem;border:1px solid #c9ced6;border-radius:8px;
  font:inherit;font-weight:400;color:#0b1220;background:#fff;resize:vertical}

/* ---- bandeau de première visite et avis ---------------------------------- */
.bt-bandeau{position:fixed;left:50%;top:12px;transform:translateX(-50%);pointer-events:auto;
  display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;max-width:calc(100vw - 24px);
  padding:.5rem .8rem;border-radius:999px;background:#fff;color:#0b1220;
  box-shadow:0 4px 18px rgba(0,0,0,.22);font-size:.9rem}
.bt-bandeau[hidden]{display:none}
.bt-bandeau .bt-principal{background:#1f4d8f}
.bt-avis{position:fixed;right:52px;bottom:14px;max-width:calc(100vw - 28px);
  margin:0;padding:.5rem .75rem;border-radius:8px;background:#fff;color:#0b1220;
  box-shadow:0 2px 10px rgba(0,0,0,.27);font-size:.86rem}

@media (prefers-color-scheme:dark){
  .bt-racine{color:#e7ebf2}
  .bt-bulle,.bt-bandeau,.bt-avis{background:#161b22;border-color:#2d333b;color:#e7ebf2}
  .bt-cible,.bt-etat,.bt-aide-manuel,.bt-champ{color:#9aa4b2}
  .bt-alerte{background:#3b1513;color:#f3bbb6}
  .bt-voisins{background:#21262d;color:#9aa4b2}
  .bt-voisins.connu{background:#3a2f12;color:#f0d9a0}
  .bt-texte,.bt-champ input,.bt-champ textarea{background:#0d1117;border-color:#2d333b;color:#e7ebf2}
  .bt-gravite,.bt-repli{background:#21262d;border-color:#2d333b;color:#e7ebf2}
  .bt-gravite.actif{background:#e7ebf2;border-color:#e7ebf2;color:#0b1220}
  .bt-secondaire{background:#21262d;border-color:#2d333b;color:#e7ebf2}
  .bt-bouton-aide{background:#21262d;color:#e7ebf2}
  .bt-bouton.actif{background:#e7ebf2;color:#0b1220}
  .bt-pastille{border-color:#161b22}
}