/* jeu-procession.css — jeu 3 « La procession » (couche C). Planche 22, blocs A et C.
 * Encre de l'île : var(--partie) (posée par jeu-scene.js). Tournesol réservé aux lanternes et au focus :
 * la clochette est noire. Le texte du livre (.livre) n'est jamais décoré ni animé. Toutes les classes en pr-. */

.pr{position:relative;flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:2px 2px 8px;scroll-padding-top:84px}   /* un rang ramené à l’écran ne passe pas sous le mât */

/* ---- Le poteau du hameau (niveau 1) ---- */
.pr-poteau{display:flex;align-items:flex-start;margin:0 0 6px}
.pr-bois{flex:none;width:4px;height:52px;margin:0 0 0 23px;background:var(--noir)}
.pr-planchette{margin:4px 0 0 -2px;max-width:300px;padding:5px 9px;background:var(--kraft);border:1.5px solid var(--noir);
  border-left:5px solid var(--partie);box-shadow:2px 2px 0 rgba(26,23,21,.18);font-size:.875rem;line-height:1.3;overflow-wrap:anywhere}

/* ---- Le chemin (niveau 1) : une colonne, un pavé par rang ---- */
.pr-chemin{position:relative;list-style:none;margin:0;padding:0}
.pr-chemin::before{content:"";position:absolute;left:14px;top:-10px;bottom:10px;width:22px;background:var(--kraft);opacity:.7}
.pr-lg{position:relative;display:flex;align-items:center;gap:12px;min-height:48px;margin-bottom:4px}
.pr-lg.fige{min-height:58px;align-items:flex-end;padding-bottom:4px}
.pr-pave{position:relative;flex:none;display:block;width:50px;height:48px;padding:5px 2px 6px;border:0;background:none;cursor:pointer}
.pr-pave .pr-pave-svg{display:block;width:46px;height:auto;overflow:visible}
.pr-pave.trou{cursor:default}
.pr-pave.survol .pr-pave-svg{filter:drop-shadow(0 0 0 var(--noir)) drop-shadow(2px 2px 0 var(--partie))}
.pr-sur{position:absolute;left:10px;bottom:24px;pointer-events:none}
.pr-sur svg{display:block;width:30px;height:auto}
.pr-lab{flex:1;min-width:0;font-size:.84375rem;line-height:1.3;overflow-wrap:anywhere}
.pr-lg.fige .pr-lab{padding-bottom:6px}

/* ---- Le mât de la place (niveaux 2 et 3) : sa corde de clochettes, sous celle des lanternes ---- */
.pr-mat{position:sticky;top:-2px;z-index:3;display:flex;align-items:flex-start;gap:0;min-height:76px;margin-bottom:4px;background:var(--papier)}   /* reste visible quand les rangs défilent */
.pr-mat-svg{flex:none;display:block;width:30px;height:76px}
.pr-corde{position:relative;display:flex;gap:10px;align-items:flex-start;min-height:28px;margin-top:40px;padding:0 6px;
  border-top:1px solid var(--noir);min-width:80px}
.pr-groupe{display:flex;gap:3px}
.pr-corde.groupes .pr-groupe + .pr-groupe{padding-left:10px;border-left:1px dashed var(--texte-3)}
.pr-cloch{display:block;width:15px;height:auto;overflow:visible}
.pr-mat-dit{position:absolute;left:44px;top:72px;margin:0;font-size:.75rem;color:var(--texte-2)}

/* ---- Les rangs ---- */
.pr-colonne{list-style:none;margin:0;padding:0}
.pr-rangee{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);align-items:start;min-height:48px;margin-bottom:6px}
.pr-rang{display:block;padding-top:12px;font:700 .75rem/1 var(--f-texte);color:var(--texte-3);text-align:right}
.pr-socle{position:absolute;inset:0;z-index:0;display:block;width:100%;padding:0 0 0 0;border:1.5px dashed var(--ligne);background:none;
  text-align:left;cursor:pointer}
.pr-socle .pr-rang{width:22px}
.pr-socle.survol{border-color:var(--noir);background:rgba(26,23,21,.04)}
.pr-slot{grid-column:2;position:relative;z-index:1;pointer-events:none;min-height:44px;padding:2px 2px 2px 6px}
.pr-slot > *{pointer-events:auto}
.pr-rangee.cloue .pr-ban{grid-column:2;margin-left:6px}

/* ---- La bannière : à déplacer · clouée · portée (titre effacé d'un coup) ---- */
.pr-ban{position:relative;display:block;width:100%;padding:4px 0 0;border:0;background:none;text-align:left;color:inherit;font:inherit;
  touch-action:none;cursor:grab}
.pr-hampe{position:absolute;top:0;left:-3px;right:-3px;height:3px;background:var(--noir)}
.pr-etoffe{position:relative;display:block;min-height:34px;padding:6px 14px 13px 10px;background:var(--partie);
  clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 7px),0 100%);box-shadow:inset 2px 1px 0 rgba(26,23,21,.25)}
.pr-ban.mobile .pr-etoffe::before{content:"";position:absolute;inset:0;background:var(--partie);opacity:.45;transform:translate(1.5px,1px);mix-blend-mode:multiply}
.pr-b-titre{position:relative;display:block;padding:3px 7px;background:var(--feuille);border:1px dashed rgba(26,23,21,.45);
  font-size:.8125rem;line-height:1.28;overflow-wrap:anywhere}
.pr-ban.cloue{cursor:default}
.pr-ban.cloue .pr-etoffe{background-color:var(--kraft);background-image:radial-gradient(circle,rgba(26,23,21,.28) 1px,transparent 1.2px);background-size:4.5px 4.5px}
.pr-ban.cloue .pr-etoffe::after{content:"";position:absolute;top:4px;left:5px;right:5px;height:4px;
  background:radial-gradient(circle,#1A1715 2px,transparent 2.3px) left/8px 4px no-repeat,radial-gradient(circle,#1A1715 2px,transparent 2.3px) right/8px 4px no-repeat}
.pr-ban.cloue .pr-b-titre{background:transparent;border:0;color:var(--texte-2);padding:3px 4px}
/* Prise : le titre s'efface d'un coup (0 ms), l'étoffe seule suit le doigt ; il revient posé et immobile. */
.pr-ban.porte .pr-b-titre,.pr-ban.pose-en-cours .pr-b-titre{visibility:hidden}
.pr-ban.porte,.pr-ban:active{z-index:9;scale:1.06;filter:drop-shadow(3px 3px 0 var(--noir))}
.pr-ban.porte{cursor:grabbing}
.pr-ban.choisi .pr-etoffe{outline:2.5px solid var(--tournesol);outline-offset:2px}
.reduit .pr-ban:active,.reduit .pr-ban.porte{scale:none;filter:drop-shadow(1.5px 0 0 var(--noir)) drop-shadow(-1.5px 0 0 var(--noir)) drop-shadow(0 1.5px 0 var(--noir)) drop-shadow(0 -1.5px 0 var(--noir))}
.pr-ban:focus-visible{outline:3px solid var(--tournesol);outline-offset:2px}
.pr-b-cloche{position:absolute;left:-19px;top:20px;z-index:2;pointer-events:none}
.pr-b-cloche .pr-cloch{width:16px}

/* ---- Le tronçon (niveau 3) : pavés de 30 px, cible 30 × 44 ; il suit sa bannière ---- */
.pr-troncon{display:flex;gap:4px;flex-wrap:nowrap;margin:16px 0 4px 0}
.pr-tpw{position:relative;display:block;flex:none}
.pr-tp{display:block;width:30px;height:44px;padding:10px 0 11px;border:0;background:none;cursor:pointer}
.pr-tp .pr-pave-svg{display:block;width:30px;height:auto;overflow:visible}
.pr-tp.trou{cursor:default}
.pr-tp.survol .pr-pave-svg{filter:drop-shadow(2px 2px 0 var(--partie))}
.pr-tp-h{position:absolute;left:0;bottom:30px;z-index:2}
.pr-tp-h .pr-hab{width:30px;height:30px;padding:2px 4px}

/* ---- La file ---- */
.pr-file-w{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;min-height:58px;padding-top:6px}
.pr-file-w.vide{min-height:0;padding:0}
.pr-file-w.pr-file-dest.survol{outline:1.5px dashed var(--noir);outline-offset:2px}
.pr-file{margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap;justify-content:center;gap:6px}
.pr-place{min-width:48px;height:52px;display:flex;align-items:flex-end;justify-content:center}
.pr-place.large{width:calc(50% - 6px);height:auto;flex:0 0 calc(50% - 6px)}
.pr-file:has(.large){width:100%}
.pr-hab{position:relative;width:52px;height:52px;padding:4px;border:0;background:none;cursor:grab;touch-action:none}
.pr-hab svg{display:block;width:100%;height:100%;transition:translate calc(2s / 12) steps(2,jump-start),scale var(--t-eclat) var(--c-encre),filter var(--t-eclat) var(--c-encre)}
.pr-hab.choisi svg{translate:0 -10px}
.pr-hab:active svg{transition:translate calc(2s / 12) steps(2,jump-start),scale 0s,filter 0s;scale:1.06;filter:drop-shadow(3px 3px 0 var(--noir))}
.pr-hab.porte{z-index:9;cursor:grabbing}
.pr-hab.porte svg{translate:none;transition:none}
.reduit .pr-hab svg{translate:none;transition:filter var(--t-eclat) var(--c-encre)}
.reduit .pr-hab:active svg{transition:none;scale:none;
  filter:drop-shadow(1.5px 0 0 var(--noir)) drop-shadow(-1.5px 0 0 var(--noir)) drop-shadow(0 1.5px 0 var(--noir)) drop-shadow(0 -1.5px 0 var(--noir))}
.pr-hab.choisi::after{content:"";position:absolute;left:4px;right:4px;bottom:-2px;height:9px;border-radius:50%;border:2.5px solid var(--tournesol)}
.pr-hab:focus-visible{outline:3px solid var(--tournesol);outline-offset:1px;border-radius:50%}
.pr-ruelle{margin:0;max-width:5.5em;font-size:.75rem;line-height:1.2;color:var(--texte-2)}

/* ---- Page finale : la vignette ---- */
.pr-vignette .pr-pave-svg{display:block;width:44px;height:auto}