/* Typographie de #direction seulement. La source HTML reste lisible sans JS. */
#direction .direction__stage{display:contents}
#direction.direction-motion{height:190svh;min-height:0;padding:0;display:block}
#direction.direction-motion .direction__stage{position:sticky;top:0;display:flex;flex-direction:column;justify-content:space-between;gap:10vh;height:100svh;padding:20vh 8vw 13vh 13vw;overflow:hidden}
#direction #direction-title{position:relative}
#direction.direction-trace-ready #direction-title,
#direction.direction-trace-ready #direction-title em{color:transparent!important;-webkit-text-fill-color:transparent!important}
#direction #direction-title > .direction-trace{position:absolute;inset:0;z-index:1;display:block;width:100%;height:100%;overflow:visible;pointer-events:none}
#direction .direction-trace__base{fill:none;stroke-width:1.8;vector-effect:non-scaling-stroke;opacity:.3}
#direction .direction-trace__live{stroke-width:2.1;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
#direction .direction-trace__cursor{fill:var(--pink);stroke:var(--ivory);stroke-width:2.1;vector-effect:non-scaling-stroke}
#direction.direction-words-ready .direction-word{display:inline-block;overflow:hidden;vertical-align:bottom;white-space:nowrap;padding-bottom:.12em;margin-bottom:-.12em}
#direction.direction-words-ready .direction-word__inner{display:inline-block;opacity:var(--word-opacity,1);transform:translate3d(0,var(--word-y,0em),0)}

@media(max-width:700px){
  #direction.direction-motion{height:175svh}
  #direction.direction-motion .direction__stage{padding:17vh 6vw 12vh;gap:10vh}
}
@media(max-width:700px) and (max-height:650px){
  #direction.direction-motion{height:175svh}
  #direction.direction-motion .direction__stage{padding:70px 6vw 36px;gap:18px}
}
@media(prefers-reduced-motion:reduce){
  #direction.direction-motion{height:auto;min-height:100svh;padding:20vh 8vw 13vh 13vw;display:flex}
  #direction.direction-motion .direction__stage{display:contents}
  #direction.direction-trace-ready #direction-title{color:var(--navy)!important;-webkit-text-fill-color:currentColor!important}
  #direction.direction-trace-ready #direction-title em{color:var(--pink)!important;-webkit-text-fill-color:currentColor!important}
  #direction .direction-trace{display:none!important}
  #direction .direction-word__inner{opacity:1!important;transform:none!important}
}
