/* jeu-arches.css — jeu 1 « Les arches du livre » (couche C). Planche 13, blocs C et D.
 * --aw : largeur du dessin d'une arche, calculée par arches-scene.js (relayout) pour que tout tienne. */

.arches{flex:1 0 auto;display:grid;grid-template-columns:1fr 1fr;column-gap:12px;row-gap:8px;
  align-content:space-evenly;justify-items:center;--aw:120px}
.arches-k3 .arche:nth-child(3){grid-column:1 / span 2}           /* niveau 2 : 2 + 1 */
.arche{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%;min-width:0}

/* Le dessin : même forme et même encre pour toutes les arches de l'île. */
.arche-pied{position:relative;width:var(--aw);height:calc(var(--aw) * 136 / 120);flex:none}
.arche-porte{position:absolute;inset:0;padding:0;border:0;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.arche-dessin,.arche-svg{display:block;width:100%;height:100%}
.arche-porte:focus-visible{outline:3px solid var(--tournesol);outline-offset:3px;border-radius:4px}
.en-choix .arche-porte{outline:2px dashed transparent}
.arche-porte.survol{outline:2.5px dashed var(--tournesol);outline-offset:3px;border-radius:4px}
.arche-ombre{position:absolute;left:-12%;width:124%;bottom:-9px;height:16px;border-radius:50%;
  background-image:radial-gradient(circle,var(--partie) 1.1px,transparent 1.3px);background-size:4.5px 4.5px;opacity:.45}

/* L'ouverture : sol tramé, assis·es sur deux rangs (5 au plus). Le toucher passe à l'arche entre eux. */
.arche-assis{position:absolute;left:calc(var(--aw) * 25 / 120);width:calc(var(--aw) * 70 / 120);bottom:calc(var(--aw) * 2 / 120);
  margin:0;padding:0;list-style:none;display:flex;flex-wrap:wrap-reverse;justify-content:center;align-content:flex-start;
  pointer-events:none}
.arche-assis::before{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--aw) * 18 / 120);z-index:-1;
  background-image:radial-gradient(circle,var(--partie) 1px,transparent 1.2px);background-size:4.5px 4.5px;opacity:.35}
.arche-assis li{pointer-events:auto;display:flex}
.assis-hab{width:max(24px, calc(var(--aw) * .22));height:max(24px, calc(var(--aw) * .22));padding:0;border:0;background:none;cursor:pointer;
  margin:0 -2px}
.assis-hab svg{width:100%;height:100%}
.assis-hab:disabled{cursor:default}
.assis-hab:focus-visible{outline:3px solid var(--tournesol);outline-offset:1px;border-radius:50%}

/* La plaque : papier droit, devant le pied. Titre du chapitre en Literata italique, sans scotch ni tampon. */
.plaque{margin:0;width:100%;max-width:172px;background:var(--feuille);border:1px solid var(--ligne);padding:5px 7px;
  font-size:.84375rem;line-height:1.28;text-align:center;color:var(--noir);box-shadow:1px 1.5px 0 rgba(26,23,21,.12);overflow-wrap:break-word}

/* La file : 4 places au plus, puis « + n dans la ruelle ». */
.file-w{flex:none;display:flex;align-items:center;justify-content:center;gap:8px;padding-top:6px;
  border-top:1px dashed var(--ligne)}
.file{margin:0;padding:0;list-style:none;display:flex;justify-content:center;gap:6px}
.file-place{width:52px;height:52px;display:flex;align-items:flex-end;justify-content:center}
.hab{position:relative;width:52px;height:52px;padding:4px;border:0;background:none;cursor:grab;touch-action:none;
  -webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.hab svg{display:block;width:100%;height:100%}
/* Planche 13 E, ligne 3 : un pas en avant en 2 crans (2 images à 12 i/s), porté par le DESSIN :
 * le bouton garde sa place (le geste « porter » déplace le bouton). L'anneau reste au sol. */
.hab svg{transition:translate calc(2s / 12) steps(2,jump-start),scale var(--t-eclat) var(--c-encre),filter var(--t-eclat) var(--c-encre)}
.hab.choisi svg{translate:0 -10px}
/* Toucher (geste 4, autocollant qu'on décolle) : le dessin se décolle (ombre noire 3 px, échelle 1,06) tout de suite ; au relâché, 180 ms.
   Le pas en avant garde ses 2 crans. Placé avant .hab.porte : porté·e au doigt, la transition reste coupée. */
.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))}
.hab.porte svg{translate:none;transition:none}                     /* porté·e au doigt : continu, sans pas */
.reduit .hab svg{translate:none;transition:filter var(--t-eclat) var(--c-encre)}                   /* version réduite : l'anneau seul */
.reduit .hab:active svg{transition:none;scale:none;   /* contour épaissi : la silhouette grossit de 1,5 px tout autour, rien ne bouge */
  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))}
.hab.choisi::after{content:"";position:absolute;left:4px;right:4px;bottom:-2px;height:9px;border-radius:50%;border:2.5px solid var(--tournesol)}
.hab.porte{z-index:9;cursor:grabbing}
.hab:focus-visible{outline:3px solid var(--tournesol);outline-offset:1px;border-radius:50%}
.ruelle{margin:0;max-width:5.5em;font-size:.75rem;line-height:1.2;color:var(--texte-2)}   /* à côté de la file : la place gagnée va aux arches */

/* Planche 13 E, ligne 8 : l'éclat tournesol au-dessus de l'arche quand quelqu'un passe (--t-eclat, Encre), puis il s'éteint.
 * Version réduite : éclat fixe, puis fondu. (Lot B du mouvement, 13/11.) */
.arche-eclat{opacity:0;transform-box:fill-box;transform-origin:50% 100%;scale:.5;
  transition:opacity var(--t-court) var(--c-sortie),scale 0s linear var(--t-court)}
.eclate .arche-eclat{opacity:1;scale:1;transition:opacity var(--t-eclat) var(--c-encre),scale var(--t-eclat) var(--c-encre)}
.reduit .arche-eclat{scale:1;transition:opacity var(--t-court) var(--c-sortie)}
.reduit .eclate .arche-eclat{transition:none}
/* Pendant un choix, les assis·es laissent passer le toucher jusqu'à l'arche (13/11) : au dessin resserré (65 %),
 * ils et elles couvrent l'ouverture et ouvraient leur carte au lieu d'envoyer le ou la choisi·e. Hors choix : on les relit. */
.en-choix .arche-assis,.en-choix .arche-assis *{pointer-events:none}