/* Règle de défilement T3CH — graduations + sections sur le bord droit */
.ruler{position:fixed;top:84px;right:0;bottom:36px;width:200px;z-index:60;pointer-events:none;font-family:var(--mono,'JetBrains Mono',monospace);opacity:0;transition:opacity .4s}
.ruler.ready{opacity:1}
.ruler .r-line{position:absolute;right:0;top:0;bottom:0;width:1px;background:var(--line-bright,#2a3d40)}
.ruler .t{position:absolute;right:0;height:1px;width:6px;background:var(--line-bright,#2a3d40);will-change:width}
.ruler .t.major{background:#4b6a6e}
.ruler .n{position:absolute;right:26px;--p:0;display:flex;align-items:baseline;gap:7px;font-size:calc(10px + 5px*var(--p));line-height:1;color:var(--text-dim,#7d918e);transform:translateY(-50%) translateX(calc(var(--p)*-6px));letter-spacing:.04em;transition:color .2s;pointer-events:auto;text-decoration:none;white-space:nowrap}
.ruler .n .nm{font-weight:400;opacity:calc(var(--p)*1.1);transition:opacity .2s}
.ruler.hover .n .nm{opacity:.75}
.ruler .n:hover .nm,.ruler .n.on .nm{opacity:1}
.ruler .n:hover,.ruler .n.on{color:var(--green,#39ff9d)}
.ruler .ind{position:absolute;right:0;height:0;width:100%;will-change:transform}
.ruler .ind::before{content:"";position:absolute;right:0;top:-1px;width:34px;height:2px;background:var(--green,#39ff9d);box-shadow:0 0 12px rgba(57,255,157,.6)}
@media (max-width:1100px){.ruler{width:34px}.ruler .n{display:none}}
.ruler{pointer-events:none}.ruler .n{pointer-events:auto}
@media (max-width:640px){.ruler{display:none}}
@media (prefers-reduced-motion:reduce){.ruler{transition:none}}