/* jeu-enseignes.css — jeu 2 « Les enseignes » (planche 17, blocs C et D). Le commun est dans jeux.css.
 * Rue en colonne : maison 58 × 62 à gauche, enseigne à droite sur toute la largeur. La trame de nuit couvre
 * le décor et les maisons, jamais les enseignes, le panneau ni les corps. Jetons : css/app-core.css. */

.enseignes{position:relative;flex:1;min-height:0;display:flex;flex-direction:column}

/* ---------- La rue et la nuit ---------- */
.rue-w{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--papier)}
/* Trame riso : points noirs en quinconce, plus dense en haut. Au-dessus des maisons, sous les enseignes. */
.trame{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  background-image:radial-gradient(circle,var(--noir) 0 1.05px,transparent 1.35px),radial-gradient(circle,var(--noir) 0 .8px,transparent 1.1px);
  background-size:6px 6px,6px 6px;background-position:0 0,3px 3px;
  -webkit-mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.45) 100%);
  mask-image:linear-gradient(180deg,#000 0%,rgba(0,0,0,.72) 55%,rgba(0,0,0,.45) 100%)}
.trame.nuit-1{opacity:.33}.trame.nuit-2{opacity:.66}.trame.nuit-3{opacity:1}

.rue{position:relative;min-height:100%;padding:12px 2px 4px 0}
.groupe + .groupe{margin-top:6px;padding-top:8px;border-top:2px dashed var(--noir)}   /* le chemin entre deux hameaux */
.chap{position:relative;z-index:4;display:inline-block;margin:0 0 6px 68px;padding:1px 5px;background:var(--papier);
  font-size:.78125rem;line-height:1.3;color:var(--texte-2);overflow-wrap:anywhere}

/* Une ligne : la maison (destination) et son enseigne. Toute la ligne reçoit le dépôt. */
.ligne-m{display:grid;grid-template-columns:58px minmax(0,1fr);gap:10px;align-items:end;width:100%;min-height:56px;margin:0 0 9px;
  padding:0;border:0;background:none;color:inherit;text-align:left;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ligne-m:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
.maison{position:relative;z-index:1;display:block;width:58px;height:62px}
.ligne-m.allumee .maison{z-index:3}                                    /* éclairée, elle sort de la nuit */
.maison > svg{display:block;width:58px;height:62px}
.porte{transform-box:fill-box}
.porte-cible{opacity:0}
.ligne-m.survol .porte-cible{opacity:1}                                /* au-dessus d'une ligne : la porte, en pointillé tournesol */
/* L'enseigne : plaque de papier droite, opaque, pendue à une potence noire de 2 px. Elle ne bouge jamais. */
.ens{position:relative;z-index:4;display:block;margin:0;padding:5px 8px;background:var(--feuille);border:1px solid var(--ligne);
  font-size:.875rem;line-height:1.28;overflow-wrap:anywhere}
.ens::before{content:"";position:absolute;left:-12px;top:9px;width:12px;height:2px;background:var(--noir)}
.ens::after{content:"";position:absolute;left:-12px;top:9px;width:2px;height:12px;background:var(--noir)}
.assis{position:absolute;left:2px;bottom:2px;z-index:4;width:22px;height:26px;pointer-events:none}
.assis svg{display:block;width:100%;height:auto}
.eclat{position:absolute;left:21px;top:-12px;z-index:4;width:16px;height:16px;opacity:0;pointer-events:none;
  transition:opacity var(--t-eclat) var(--c-encre)}                    /* ligne 9 : éclat --t-eclat, Encre */
.reduit .eclat{transition:opacity 300ms linear}                         /* réduit : éclat fixe, puis fondu */
.eclat.on{opacity:1}
.eclat svg{display:block}

/* Resserré (panneau ouvert et place insuffisante ; toujours au niveau 3) : le dessin à 32 px, les plaques inchangées. */
.resserre .ligne-m{grid-template-columns:32px minmax(0,1fr);min-height:34px;margin-bottom:6px}
.resserre .maison,.resserre .maison > svg{width:32px;height:34px}
.resserre .chap{margin-left:42px}
.resserre .assis{left:1px;bottom:1px;width:13px;height:15px}
.resserre .eclat{left:10px;top:-10px;width:12px;height:12px}
.resserre .eclat svg{width:12px;height:12px}

/* ---------- Consigne, refus et aide : une seule ligne, au-dessus de la file, jamais sur une enseigne ---------- */
.enseignes .guide-jeu{flex:none;min-height:32px;margin:4px 0 0;display:flex;align-items:center;justify-content:center}
.enseignes .guide-jeu.alerte{opacity:1}                                 /* visible même pendant un choix */
/* Panneau ouvert (mesure du 14/11) : la ligne sort du flux et se pose sur le haut de la file. La rue gagne sa hauteur ;
 * « Pas cette porte. » ne passe ni sur une enseigne ni sur le panneau. */
body.panneau-libre .enseignes .guide-jeu{position:absolute;left:0;right:0;bottom:34px;z-index:8;margin:0;pointer-events:none}
body.panneau-libre .enseignes .guide-jeu:not(.alerte){visibility:hidden}   /* relire : pas de consigne sur les silhouettes */
.ens-alerte{display:inline-block;max-width:100%;padding:6px 12px 5px;background:var(--noir);color:var(--papier);transform:rotate(-1.5deg)}

/* ---------- La file des silhouettes, entre la rue et le panneau ---------- */
.ens-file-w{flex:none;position:relative;z-index:5;height:64px;padding-bottom:6px}
.ens-file{list-style:none;margin:0;padding:0;height:100%;display:flex;gap:16px;justify-content:center;align-items:flex-end}
.ens-place{display:flex}
.sil{position:relative;display:flex;align-items:flex-end;justify-content:center;width:48px;height:56px;padding:0;border:0;background:none;
  cursor:grab;touch-action:none;-webkit-tap-highlight-color:transparent}
.sil svg{display:block;pointer-events:none}
.sil .anneau{position:absolute;bottom:0;left:2px;width:44px;height:10px;border:2.5px solid var(--tournesol);border-radius:50%;opacity:0}
.sil.choisi .anneau{opacity:1}
.sil.choisi svg{transform:translateY(var(--pas,-4px))}                  /* ligne 4 : un pas en avant, 2 crans (−2 puis −4 px) */
.reduit .sil.choisi svg{transform:none}                                 /* réduit : l'anneau seul */
.sil.porte{z-index:9;cursor:grabbing}
.sil.porte .anneau{opacity:0}
.sil:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}

/* ---------- Page de fin : la vignette d'un bloc ---------- */
.pf-vignette .pf-maison{display:block;width:44px;height:auto}

/* ---------- Mouvements (planche 17, tableau E) ---------- */
/* Ligne 13 : relire. Complet : l'habitant·e du seuil fait un pas (2 crans). Réduit : l'anneau. */
.assis.pas-1{translate:0 -2px}
.assis.pas-2{translate:0 -4px}
.reduit .assis.relu::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-3px;height:6px;border:2px solid var(--tournesol);border-radius:50%}
/* Ligne 12 : une paupière qui cligne, un cran. */
svg.cligne circle{transform:scaleY(.12);transform-box:fill-box;transform-origin:center}
/* Ligne 7 : resserrement en 2 crans (58 → 45 → 32 px) ; les plaques en fondu croisé (--t-court), sans glisser. */
.serre-1 .ligne-m{grid-template-columns:45px minmax(0,1fr);min-height:45px;margin-bottom:7px}
.serre-1 .maison,.serre-1 .maison > svg{width:45px;height:48px}
.serre-1 .chap{margin-left:55px}
.serre-1 .assis{width:17px;height:20px}
.ens,.chap{transition:opacity var(--t-court) var(--c-encre)}
.plaques-off .ens,.plaques-off .chap{opacity:0;transition:none}
.rue-copie-w{position:absolute;z-index:6;display:block;overflow:hidden;pointer-events:none;background:none}
.rue-copie-w .rue{position:absolute;left:0;right:0;min-height:0;background:none}
.rue-copie-w .maison{visibility:hidden}
.rue-copie-w.s-efface{opacity:0;transition:opacity var(--t-court) var(--c-sortie)}
/* Ligne 10 : le refus s'affiche d'un coup (il s'efface en fondu). */
.enseignes .guide-jeu.alerte{transition:none}