/* jeu-bateau.css — jeu 4 « Le bateau égaré » (js/jeux/bateau/bateau-scene.js). Planche 23.
 * Le cadre logique 370 × 560 est mis à l'échelle par le JS (.bt-monde) ; les tailles ci-dessous sont en px logiques.
 * Pas de mot seul sur sa ligne (14/11/2026) : balance pour les textes courts, pretty pour les autres. */
.bt{position:relative;flex:1;min-height:0;display:flex;flex-direction:column;-webkit-user-select:none;user-select:none}
.bt-cadre{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:none}
.bt-monde{position:absolute;left:0;top:0;width:370px;height:560px;transform-origin:0 0}
.bt-vue{position:absolute;inset:0;transform-origin:50% 50%}
.bt-fond{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Consigne du début (socle §0) — locale en attendant la brique commune */
.bt-consigne{position:relative;z-index:3;margin:0 0 var(--e2, 8px);padding:9px 14px;background:var(--feuille);border:1.5px solid var(--noir);border-radius:4px;
  font:700 .9375rem/1.3 var(--f-texte);text-wrap:balance;transition:opacity var(--t-court) var(--c-houle),max-height var(--t-court) var(--c-houle),padding var(--t-court),margin var(--t-court);max-height:6em;overflow:hidden}
.bt-consigne.repli{opacity:0;max-height:0;padding-top:0;padding-bottom:0;margin:0;border-width:0}
.reduit .bt-consigne{transition:none}

/* La file : passager·es en ciré, la personne en cours devant */
.bt-file{display:flex;gap:4px;list-style:none;margin:0 0 4px;padding:0;min-height:28px;align-items:flex-end}
.bt-file li{opacity:.55;line-height:0}
.bt-file li.courant{opacity:1}
.bt-file li.fait{opacity:.35}

/* Le cap, la houle, l'adresse : une ligne sous la carte */
.bt-cap{min-height:2.6em;margin:4px 0 0;font:700 .9375rem/1.3 var(--f-texte);text-wrap:balance}
.bt-adresse{font-family:var(--f-livre);font-style:italic;font-weight:400;text-wrap:pretty}
.bt-adresse .sep{font-style:normal;color:var(--texte-3)}

/* Lieux touchables : invisibles, posés sur le dessin */
.bt-lieu{position:absolute;z-index:2;padding:0;margin:0;border:0;background:transparent;border-radius:12px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bt-lieu.rond{border-radius:50%}
.bt-lieu:focus-visible{outline:2.5px solid var(--noir);outline-offset:2px}
.bt-lieu.survol{box-shadow:0 0 0 2px var(--noir) inset}

/* Noms de lieux (Literata italique, trait papier dessous, comme la planche 21) */
.bt-nom{position:absolute;z-index:1;margin:0;transform:translateX(-50%);width:max-content;max-width:var(--n, 24ch);pointer-events:none;
  font:italic 400 10.5px/1.18 var(--f-livre);text-align:center;color:var(--noir);text-wrap:balance;
  text-shadow:0 0 2px var(--papier),0 0 2px var(--papier),1px 0 2px var(--papier),-1px 0 2px var(--papier)}
.bt-nom.gauche{transform:none;text-align:left}
.bt-nom.num{font:700 10.5px/1 var(--f-texte);font-style:normal}
.bt-nom.loin{transform:translate(-50%,-100%)}
.bt-nom.loin.gauche{transform:translateY(-100%)}
.bt-nom.quartier{font-size:11px;max-width:16ch}
.bt-nom.hameau-titre{font-size:14px;max-width:30ch}
.bt-num{position:absolute;z-index:1;display:none;min-width:16px;padding:1px 3px;border:1.2px solid var(--noir);border-radius:8px;background:var(--feuille);
  font:700 10px/1.2 var(--f-texte);text-align:center;pointer-events:none}
.aide-on .bt-num{display:block}
.bt-route-forte{opacity:0;transition:opacity var(--t-court)}
.aide-on .bt-route-forte{opacity:.85}

/* Ce qu'on porte */
.bt-mobile{position:absolute;z-index:4;padding:0;margin:0;border:0;background:transparent;cursor:grab;touch-action:none;line-height:0;-webkit-tap-highlight-color:transparent}
.bt-mobile:focus-visible{outline:2.5px solid var(--noir);outline-offset:3px;border-radius:8px}
.bt-mobile.porte{cursor:grabbing;z-index:6}
.bt-mobile.choisi{outline:2.5px dashed var(--noir);outline-offset:3px;border-radius:10px}
.bt-barque{display:block;overflow:visible}
.bt-hab{position:relative;display:inline-block;width:40px;height:46px}
.bt-hab > span{position:absolute;inset:0}
.bt-encre{clip-path:inset(0 0 100% 0)}
.bt-main{position:absolute;z-index:7;pointer-events:none}
.bt-eclat{position:absolute;z-index:8;pointer-events:none}

/* Plaque d'une maison (un titre à la fois) et bulle d'Europe */
.bt-plaque,.bt-bulle{position:absolute;z-index:9;margin:0;max-width:300px;padding:6px 9px;background:var(--feuille);border:1.5px solid var(--noir);border-radius:6px;
  font:italic 400 13px/1.3 var(--f-livre);text-wrap:balance;pointer-events:none}
.bt-bulle{font:700 13px/1.3 var(--f-texte);font-style:normal;transition:opacity 300ms var(--c-sortie)}
.bt-bulle.part{opacity:0}

/* Le carnet de bord : une étiquette de bagage par passager·e, dans l'ordre du livre */
.bt-etiquettes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--e3, 12px)}
.bt-bagage{display:flex;gap:10px;align-items:flex-start;padding:10px 12px 10px 10px;border:1.5px solid var(--noir);border-left:6px solid var(--c);border-radius:4px 12px 12px 4px;background:var(--papier);
  opacity:0;transform:translateY(6px) rotate(-.6deg)}
.bt-bagage:nth-child(even){transform:translateY(6px) rotate(.5deg)}
.colle .bt-bagage{opacity:1;transform:rotate(-.6deg);transition:opacity var(--t-eclat) var(--c-encre) var(--d),transform var(--t-eclat) var(--c-encre) var(--d)}
.colle .bt-bagage:nth-child(even){transform:rotate(.5deg)}
.reduit .bt-bagage,.reduit .colle .bt-bagage{opacity:1;transition:none}
.bt-bagage p{margin:0}
.bt-bagage .l1{font-size:.8125rem;color:var(--texte-2);text-wrap:balance}
.bt-bagage .l2{font-size:.875rem;text-wrap:balance}
.bt-bagage .l3{display:inline-block;margin-top:2px;font-size:.9375rem;color:var(--noir);text-wrap:pretty}
.bt-bagage-hab{flex:none;line-height:0}

/* Étape 5 (14/11/2026, choix 2) : le panneau reste ouvert, la carte garde une échelle lisible et se fait glisser.
 * Pour lui laisser la place, la consigne et le cap passent SUR la carte (hors du flux). */
.bt-consigne{position:absolute;left:0;right:0;top:34px;margin:0;box-shadow:0 2px 0 rgba(26,23,21,.12)}
.bt-cap{position:absolute;left:0;right:0;bottom:0;z-index:3;min-height:0;margin:0;padding:6px 10px;background:rgba(255,253,248,.94);border-top:1.5px solid var(--noir)}
.bt-cap:empty{display:none}
.bt-recadre .bt-cadre{cursor:grab;box-shadow:inset 0 0 0 1.5px rgba(26,23,21,.25)}
.bt-relire{display:inline-flex;align-items:flex-end;justify-content:center;min-width:48px;min-height:40px;margin:-6px 0 -4px -10px;padding:0;border:0;background:transparent;cursor:pointer}
.bt-relire:focus-visible{outline:2.5px solid var(--noir);outline-offset:-2px;border-radius:8px}