@media screen {

  /* ======================================================
     MARGIN ASCII — phrase ASCII posée dans la gouttière
     du chapitre.
     ====================================================== */

  main.chapitre {
    position: relative;
  }

  .margin-ascii {
    position: absolute;
    z-index: 5;
    width: max-content;
    max-width: calc((100vw - 756px) / 2 - 2rem);
    overflow: hidden;
    font-family: var(--fontTitle), monospace;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: #FFF;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transition: opacity 0.45s ease-out;
  }

  .margin-ascii.is-visible {
    opacity: 1;
  }

  .margin-ascii--left {
    right: 100%;
    margin-right: 1.4rem;
    text-align: right;
  }

  .margin-ascii--right {
    left: 100%;
    margin-left: 1.4rem;
    text-align: left;
  }

  .margin-ascii__text {
    margin: 0;
    font: inherit;
    letter-spacing: inherit;
    white-space: pre;
  }

  /* curseur bloc clignotant, retiré en fin de frappe par le JS */
  .margin-ascii__cursor {
    display: inline-block;
    width: 1ch;
    height: 1em;
    margin-left: 1px;
    background: currentColor;
    vertical-align: -0.12em;
    animation: margin-ascii-blink 1s steps(1) infinite;
  }

  @keyframes margin-ascii-blink {
    50% { opacity: 0; }
  }

  /* Pas de gouttière exploitable en dessous de ~75em : on masque. */
  @media (max-width: 74.9em) {
    .margin-ascii { display: none; }
  }

  @media (prefers-reduced-motion: reduce) {
    .margin-ascii { transition: none; }
    .margin-ascii__cursor { animation: none; }
  }

}