/* Lire Debord — le relevé : la dérive dessinée sur le plan du corpus.
   Bichromie du Naked City : le papier, les fragments en blanc de carte, les
   flèches rouges. Rien de décoratif n'est ajouté au dessin : chaque marque y
   est un texte, chaque flèche un passage. */
.rl{margin-top:3rem}
.cn-s{margin-top:4rem}
.rl-note{margin:1rem 0 0;max-width:62ch;font-size:.88rem;color:var(--muted);border-left:2px solid var(--border);padding-left:.9rem}
.rl-quand{color:var(--trait);margin:.2rem 0 1rem;font-size:.95rem}
.rl-choix{margin:0 0 1rem;font-size:.9rem;color:var(--trait)}
.rl-choix select{font:inherit;font-size:.95rem;padding:.45rem .5rem;min-height:36px;border:1px solid var(--border);border-radius:6px;background:var(--blanc);color:var(--encre)}

.rl-fig{margin:0 0 1.6rem;padding:0}
.rl-svg{display:block;width:100%;height:auto;background:var(--blanc);border:1px solid var(--border);border-radius:10px}
/* LE TERRAIN. Chaque point est un texte que cette dérive n'a pas traversé. Le
   contraste est faible A DESSEIN — s'il montait à 3:1 la trame couvrirait les
   flèches, qui sont le sujet —, et c'est admis parce que le fait est ÉCRIT
   dessous, en toutes lettres : « N n'ont pas été traversés ». Le groupe est donc
   aria-hidden, comme le grand numéro en filigrane des cartes de la revue. */
.rl-fond circle{fill:var(--encre);opacity:.28}
.rl-f{fill:none;stroke:var(--fleche);stroke-width:3.4;stroke-linecap:round}
#rl-pointe path{fill:var(--fleche)}
.rl-fr polygon{fill:var(--papier);stroke:var(--encre);stroke-width:1.4}
.rl-fr:hover polygon,.rl-fr:focus-visible polygon{fill:var(--blanc);stroke-width:2.2}
.rl-am{stroke:var(--encre);stroke-width:1;opacity:.35}
.rl-num{fill:var(--fleche)}
.rl-numt{fill:#fff;font:600 11px/1 Inter,system-ui,sans-serif;text-anchor:middle}
.rl-et{fill:var(--encre);font:500 14px/1 Inter,system-ui,sans-serif}
.rl-fr:hover .rl-et,.rl-fr:focus-visible .rl-et{fill:var(--fleche-text)}
.rl-fr:focus{outline:none}
.rl-fr:focus-visible polygon{stroke:var(--fleche)}
.rl-cap{margin:.6rem 0 0;font-size:.85rem;color:var(--muted)}

.rl-l{list-style:none;margin:0 0 1.2rem;padding:0;border-top:1px solid var(--border)}
.rl-e{display:grid;grid-template-columns:2rem 1fr auto;gap:.2rem .7rem;align-items:baseline;padding:.6rem 0;border-bottom:1px solid var(--border)}
.rl-r{grid-row:span 2;font:700 .95rem/1.6 var(--titre,Inter),sans-serif;color:var(--fleche-text)}
.rl-t{font-weight:600;color:var(--encre)}
.rl-m{grid-column:2;font-size:.82rem;color:var(--muted)}
.rl-h{grid-column:3;grid-row:1;font-size:.82rem;color:var(--muted);font-variant-numeric:tabular-nums}
.rl-vide{color:var(--trait);max-width:60ch}
.rl-vide-b{margin:1rem 0 0}
.rl-oubli{margin:.4rem 0 0}
.rl-b{font:inherit;font-size:.85rem;min-height:36px;padding:.4rem .7rem;background:none;border:1px solid var(--border);border-radius:6px;color:var(--trait);cursor:pointer}
.rl-b:hover{color:var(--fleche-text);border-color:var(--fleche)}

@media(max-width:640px){
  /* Sous cette largeur le dessin ne fait plus que 330 px : une étiquette de plan
     n'y est plus lisible, et les marques fines disparaissent. Le dessin devient
     donc une esquisse — fragments, flèches, numéros —, et la liste dessous porte
     les titres, qui sont de vrais liens. Les rayons se règlent au CSS (la
     propriété r des cercles SVG), les positions ne bougent pas. */
  .rl-et,.rl-am{display:none}
  .rl-num{r:19px}
  .rl-numt{font-size:21px}
  .rl-fond circle{r:4.6px}
  .rl-f{stroke-width:6.5}
  .rl-fr polygon{stroke-width:2.8}
  .rl-e{grid-template-columns:1.6rem 1fr;gap:.15rem .5rem}
  .rl-h{grid-column:2;grid-row:auto}
}