/* La réglette avant / après des photographies aériennes de 1950-1965 (src/photos-anciennes.js), au dessin D2 */
.pa-fond { position: fixed; inset: 0; z-index: 2200; display: grid; place-items: center; padding: 16px; background: var(--voile-tiroir); }
.pa-fenetre { width: min(880px, 100%); max-height: calc(100vh - 32px); display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 12px; background: var(--verre-plein); color: var(--encre); }
.pa-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.pa-tete b { display: block; font-size: var(--t-17); font-weight: 600; letter-spacing: -.01em; }
.pa-tete small { display: block; margin-top: 2px; font-size: var(--t-12); color: var(--attenue); }
.pa-cadre { position: relative; height: min(560px, calc(100vh - 200px)); overflow: hidden; border-radius: var(--r-carte); background: #1d1d1f; }
.pa-carte { position: absolute; inset: 0; }
.pa-trait { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.pa-trait::after { content: ""; position: absolute; top: 50%; left: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%; background: #FFFFFF; box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.pa-etq { position: absolute; top: 10px; padding: 2px 7px; border-radius: var(--r-pastille); background: var(--etiquette-fond); color: var(--etiquette-texte); font-size: var(--t-12); font-weight: 500; line-height: 20px; pointer-events: none; }
.pa-g { left: 10px; } .pa-d { right: 10px; }
/* le curseur couvre tout le cadre : on glisse n'importe où, au doigt comme à la souris ; seule la poignée dessinée se voit */
.pa-curseur { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.pa-cadre:focus-within .pa-trait::after { outline: 2px solid var(--encre); outline-offset: 2px; }
.pa-note { margin: 0; font-size: var(--t-12); line-height: 1.45; color: var(--attenue); }
@media (max-width: 899px) {
  .pa-fond { padding: 0; place-items: stretch; }
  .pa-fenetre { width: 100%; max-height: none; height: 100%; border-radius: 0; padding: calc(env(safe-area-inset-top) + 10px) 12px calc(env(safe-area-inset-bottom) + 10px); }
  .pa-cadre { flex: 1; height: auto; }
}
.pa-contour { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pa-contour path { fill: none; stroke: #FFFFFF; stroke-width: 1.5; stroke-linejoin: round; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .6)); }