/* Lire Debord — /plan/ : LE RELIEF DU CORPUS.
   Une carte d'état-major en bichromie : le papier, l'encre des courbes et des
   chemins, le rouge des dérives. Tout est dessiné à la génération, en SVG —
   la règle de la maison tient, et ce qui se voit se lit aussi dans l'index. */

/* LA SCÈNE. ⚠️ La carte est un CARRÉ : à pleine largeur elle faisait 1 152 px
   de haut sur un écran de 860, donc on ne la voyait jamais en entier et les
   outils sortaient de l'écran dès qu'on regardait le bas. Elle est maintenant
   bornée en HAUTEUR (elle tient dans l'écran, outils compris), et la place
   gagnée sur les côtés porte la légende — qui était un pavé de 1 890 px
   posé dessous. */
.pl-scene{display:grid;grid-template-columns:minmax(0,1fr) minmax(240px,300px);
  gap:clamp(18px,2.5vw,32px);align-items:start;margin:22px 0 0}
.pl-carte{position:relative;min-width:0}
.pl-svg{display:block;width:100%;height:min(70vh,640px);background:var(--blanc);
  border:1px solid var(--border);border-radius:12px;touch-action:pan-y}

/* ---- le relief : des isohypses. Suivre une courbe, c'est rester à la même
   densité de texte. La plus basse fait le rivage du blanc de la carte. ---- */
/* les étages : des voiles d'encre empilés, la teinte hypsométrique d'une carte
   gravée — on lit les massifs sans sortir de la bichromie */
.niv-p path{fill:var(--encre);opacity:.04;stroke:none}
.ct{fill:none;stroke:var(--encre);stroke-width:.7;opacity:.3;vector-effect:non-scaling-stroke}
.ct-maitre{opacity:.34;stroke-width:1.1}
.ct-rive{opacity:.5;stroke-width:1.4}

/* ---- les chemins : les arêtes du voisinage de vocabulaire ---- */
/* les rues d'un quartier : sa trame interne. Les grandes voies : les quatorze
   passages les plus empruntés d'un quartier à l'autre. */
.pl-rues path{fill:none;stroke:var(--encre);stroke-width:.8;opacity:.3;vector-effect:non-scaling-stroke}
.pl-voies path{fill:none;stroke:var(--encre);stroke-width:1.9;opacity:.5;vector-effect:non-scaling-stroke;stroke-linecap:round}

/* ---- les lieux : un texte, un point. Les points fixes sont ceux où le plus
   de chemins aboutissent — le mot est de Debord, n° 2. ---- */
.pl-lieux circle{fill:var(--trait);opacity:.62;transition:fill .15s,opacity .15s}
.li-fixe circle{fill:var(--encre);opacity:1}
.pl-lieux a:hover circle,.pl-lieux a:focus-visible circle{fill:var(--fleche);opacity:1}
.pl-lieux a:focus{outline:none}
.li-n{fill:var(--encre);font:600 11.5px/1 Inter,system-ui,sans-serif;text-anchor:middle;
  stroke:var(--blanc);stroke-width:3.4;paint-order:stroke fill}

/* ---- les quartiers : leur nom posé sur leur massif ---- */
.qt-n{fill:var(--encre);font:800 22px/1 var(--f-titre),Inter,system-ui,sans-serif;text-anchor:middle;
  letter-spacing:-.02em;stroke:var(--blanc);stroke-width:5.5;paint-order:stroke fill;dominant-baseline:middle}
.qt-c{fill:var(--muted);font:600 11.5px/1 Inter,system-ui,sans-serif;text-anchor:middle;
  stroke:var(--blanc);stroke-width:4;paint-order:stroke fill}
.qt:hover .qt-n,.qt:focus-visible .qt-n{fill:var(--fleche-text)}
.qt:focus{outline:none}

/* ---- votre dérive, tracée par-dessus tout le reste ---- */
.pl-derive path{fill:none;stroke:var(--fleche);stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round}
.pl-derive circle{fill:var(--fleche)}
.pl-derive text{fill:#fff;font:700 10px/1 Inter,system-ui,sans-serif;text-anchor:middle}

.pl-note{margin:16px 0 0;max-width:72ch;font-size:.9rem;color:var(--trait);
  border-left:2px solid var(--border);padding-left:1rem}
.pl-note b{color:var(--encre)}

/* ---- l'index : un quartier par volet, fermé ---- */
.pl-s{border-top:1px solid var(--border)}
.pl-s:last-of-type{border-bottom:1px solid var(--border)}
.pl-s-t{cursor:pointer;list-style:none;display:flex;align-items:center;gap:14px;
  padding:15px 2px;min-height:44px}
.pl-s-t::-webkit-details-marker{display:none}
.pl-s-t::after{content:"";margin-left:auto;width:9px;height:9px;flex:none;
  border-right:2px solid var(--trait);border-bottom:2px solid var(--trait);
  transform:rotate(45deg) translateY(-3px);transition:transform .2s}
.pl-s[open] .pl-s-t::after{transform:rotate(-135deg) translateY(-1px)}
.pl-s-t:hover .pl-s-h{color:var(--fleche-text)}
.pl-s-h{font-family:var(--f-titre);font-weight:800;font-size:1.12rem;letter-spacing:-.02em}
.pl-s-n{font-family:var(--f-ui);font-size:.8rem;color:var(--muted);
  border:1px solid var(--border);border-radius:999px;padding:2px 9px;flex:none}
.pl-s-m{margin:0 0 .9rem;font-size:.86rem;color:var(--muted)}
.pl-s[open]{padding-bottom:18px}
.pl-l{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.pl-l li{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;padding:7px 0;border-top:1px solid var(--border)}
.pl-l li:first-child{border-top:0}
.pl-l a{color:var(--encre);font-weight:600;font-size:.95rem;
  text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;transition:text-decoration-color .2s}
.pl-l a:hover{text-decoration-color:var(--fleche)}
.pl-l span{font-size:.8rem;color:var(--muted)}

@media(max-width:760px){
  /* le dessin tombe à 330 px : les noms des points fixes n'y tiennent plus, et
     les traits fins disparaîtraient. La carte devient une esquisse — massifs,
     grandes voies, quartiers — et l'index dessous porte tout ce qui se lit. */
  .li-n{display:none}
  .qt-n{font-size:34px;stroke-width:8}
  .qt-c{display:none}
  .pl-rues path{stroke-width:1.4}
  .pl-lieux circle{r:5px}
  .li-fixe circle{r:8px}
  .ct{stroke-width:1.1}
  .pl-voies path{stroke-width:2}
}

/* ---------- les outils de la carte (n'apparaissent que si le script tourne) ---------- */
.pl-outils{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;margin:0 0 10px}
.pl-outils[hidden]{display:none}
.pl-grp{display:flex;gap:6px;flex-wrap:wrap}
.pl-b{font:inherit;font-size:.82rem;font-weight:500;min-height:34px;padding:.35rem .75rem;
  background:var(--blanc);border:1px solid var(--border-strong);border-radius:999px;color:var(--trait);cursor:pointer;
  transition:background .18s,color .18s,border-color .18s}
.pl-b:hover{color:var(--encre);border-color:var(--encre)}
.pl-b[aria-pressed="true"]{background:var(--encre);border-color:var(--encre);color:var(--papier)}
.pl-b[hidden]{display:none}
.pl-ic{min-width:34px;padding:.35rem .5rem;font-size:1rem;line-height:1}
.pl-trouve{position:relative;flex:1 1 220px;min-width:180px}
.pl-trouve input{width:100%;font:inherit;font-size:.86rem;min-height:34px;padding:.35rem .8rem;
  background:var(--blanc);border:1px solid var(--border-strong);border-radius:999px;color:var(--encre)}
.pl-trouve input:focus-visible{outline:2px solid var(--fleche);outline-offset:1px}
.pl-sug{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 6px);list-style:none;margin:0;padding:6px;
  background:var(--blanc);border:1px solid var(--border-strong);border-radius:12px;box-shadow:0 12px 30px rgba(20,19,15,.16);
  max-height:46vh;overflow:auto}
.pl-sug[hidden]{display:none}
.pl-sug button{display:block;width:100%;text-align:left;font:inherit;font-size:.84rem;padding:8px 10px;min-height:34px;
  background:none;border:0;border-radius:8px;color:var(--encre);cursor:pointer}
.pl-sug button:hover{background:var(--papier);color:var(--fleche-text)}
.pl-etat{margin:.5rem 0 0;font-size:.82rem;color:var(--muted);min-height:1.2em}
.pl-svg.tire{cursor:grabbing}
.pl-svg{cursor:grab}

/* on n'approche pas pour rien : de près, les textes prennent leur nom */
.pl-svg .li-n{display:none}
.pl-svg.pres .li-n{display:block}
@media(min-width:761px){.pl-svg .li-n{display:block}}
.vise circle{fill:var(--fleche)!important;opacity:1!important;r:7}

/* ---------- la vue en relief ----------
   Rien n'est recalculé : chaque étage est simplement soulevé au-dessus du
   précédent, et le monde basculé. C'est une maquette de courbes découpées,
   comme on en faisait avant les images de synthèse — et cela reste du SVG. */
.pl-svg.relief3d .monde{transform:translate(0px,96px) scale(1,.54);transform-origin:500px 500px}
.pl-svg.relief3d .niv{transform:translateY(calc(var(--n) * -34px));filter:drop-shadow(0 3px 2px rgba(20,19,15,.13))}
html:not(.no-motion) .qt{transition:transform .5s var(--ease,cubic-bezier(.2,.7,.2,1))}
.pl-svg.relief3d .niv-p path{fill:var(--blanc);opacity:1;stroke:var(--encre);stroke-width:1;stroke-opacity:.5}
.pl-svg.relief3d .ct{opacity:0}
.pl-svg.relief3d .pl-rues,.pl-svg.relief3d .pl-voies,.pl-svg.relief3d .pl-lieux,.pl-svg.relief3d .pl-noms{opacity:0;pointer-events:none}
.pl-svg.relief3d .qt{transform:translateY(calc(var(--alt) * -34px))}
.pl-svg.relief3d .qt-n{font-size:18px}
.pl-svg.relief3d .qt-c{display:none}
html:not(.no-motion) .monde,html:not(.no-motion) .niv{transition:transform .5s var(--ease,cubic-bezier(.2,.7,.2,1))}

.pl-svg.sans-chemins .pl-rues,.pl-svg.sans-chemins .pl-voies{opacity:0;pointer-events:none}

/* ---------- votre dérive ---------- */
.pl-derive{opacity:0;pointer-events:none}
.pl-svg.montre-derive .pl-derive{opacity:1;pointer-events:auto}
.dr-route{fill:none;stroke:var(--fleche);stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.dr-saut{fill:none;stroke:var(--fleche);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:7 7;opacity:.8}
.dr-a circle{fill:var(--fleche)}
.dr-a text{fill:#fff;font:700 10.5px/1 Inter,system-ui,sans-serif;text-anchor:middle}

/* ---------- la légende ---------- */
.pl-leg{margin:0;padding:15px 17px;background:var(--blanc);border:1px solid var(--border);border-radius:12px;position:sticky;top:64px}
.pl-leg figcaption{font-family:var(--f-titre);font-weight:800;font-size:1rem;letter-spacing:-.015em;margin-bottom:10px}
.pl-leg ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.pl-leg li{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;font-size:.87rem;color:var(--trait);line-height:1.45}
.pl-leg b{color:var(--encre)}
.pl-leg i{display:block;height:1.1em;position:relative}
.lg-ct::before,.lg-rue::before,.lg-voie::before,.lg-der::before{content:"";position:absolute;left:0;right:0;top:.5em;height:0;border-top:1px solid var(--encre)}
.lg-ct::before{opacity:.42;border-top-style:solid;border-radius:50%;height:.55em;border:1px solid var(--encre);opacity:.42;top:.2em}
.lg-rue::before{opacity:.35}
.lg-voie::before{border-top-width:2.4px;opacity:.55}
.lg-der::before{border-top-width:3px;border-color:var(--fleche)}
.lg-pt::before{content:"";position:absolute;left:11px;top:.34em;width:9px;height:9px;border-radius:50%;background:var(--encre)}


/* Sous 1 000 px la légende ne tient plus à côté : elle repasse dessous, et
   devient un volet — on la lit une fois, on n'a pas besoin de la reprendre. */
@media(max-width:1000px){
  .pl-scene{grid-template-columns:1fr}
  .pl-leg{position:static}
}
@media(max-width:760px){
  .pl-svg{height:min(58vh,420px)}
}