/* Lire Debord — l'abécédaire (/glossaire/). Le socle est dans /assets/site.css ;
   ici, la plaque tournante : la tête et sa figure, le rail des lettres, les entrées. */
.gl-tete{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:clamp(24px,4vw,64px);align-items:center;margin-bottom:clamp(28px,4vw,48px)}
.gl-tete .sec-h{max-width:14ch}
.gl-fig{margin:0;max-width:320px;justify-self:end;width:100%}
.gl-fig svg{width:100%;height:auto;display:block;overflow:visible}
.gl-frag{transform-box:fill-box;transform-origin:center;filter:drop-shadow(0 1px 0 rgba(20,19,15,.25)) drop-shadow(0 5px 8px rgba(20,19,15,.10))}
/* la figure s'assemble à l'arrivée : fragments posés, puis flèches tracées — état fini sans script ou sans mouvement */
html:not(.no-anim) .gl-frag{opacity:0;transform:translateY(8px) rotate(-2deg);animation:gl-pose 1s var(--ease) forwards;animation-delay:calc(.1s + var(--i)*.12s)}
@keyframes gl-pose{to{opacity:1;transform:none}}
html:not(.no-anim) .gl-fls path{stroke-dasharray:1;stroke-dashoffset:1;animation:gl-trace .7s cubic-bezier(.4,0,.2,1) forwards;animation-delay:calc(.7s + var(--i)*.18s)}
@keyframes gl-trace{to{stroke-dashoffset:0}}
@media(max-width:820px){.gl-tete{grid-template-columns:1fr}.gl-fig{max-width:220px;justify-self:start;order:-1}}

/* ---------- le rail des lettres + le filtre : collés sous la barre ---------- */
.gl-outils{position:sticky;top:52px;z-index:20;background:rgba(243,240,232,.92);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);margin:0 calc(-1 * var(--gutter)) 8px;padding:10px var(--gutter);border-top:1px solid var(--border);border-bottom:1px solid var(--border);display:flex;flex-wrap:wrap;align-items:center;gap:10px 24px}
.gl-rail{display:flex;flex-wrap:wrap;gap:2px;font-family:var(--f-titre);font-weight:600;font-size:.9rem;letter-spacing:.02em}
.gl-rail a,.gl-rail span{display:inline-flex;align-items:center;justify-content:center;min-width:28px;height:28px;padding:0 4px;border-radius:6px;text-decoration:none}
.gl-rail a{color:var(--encre)}
.gl-rail a:hover{background:var(--encre);color:var(--papier)}
.gl-rail a.est-la{color:var(--fleche-text);box-shadow:inset 0 -2px 0 var(--fleche);border-radius:0}
.gl-rail span{color:rgba(20,19,15,.62)}
.gl-rail a.vide{color:rgba(20,19,15,.62);pointer-events:none}
.gl-filtre{display:flex;align-items:center;gap:12px;margin-left:auto;flex:1 1 260px;max-width:420px}
.gl-filtre input{flex:1;min-width:0;height:36px;padding:0 14px;border:1px solid var(--border-strong);border-radius:999px;background:var(--blanc);font:inherit;font-size:.9rem;color:var(--encre)}
.gl-filtre input::placeholder{color:var(--muted)}
.gl-filtre input:focus{outline:2px solid var(--fleche);outline-offset:2px;border-color:transparent}
.gl-n{margin:0;font-size:.78rem;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
@media(max-width:640px){.gl-outils{top:52px}.gl-filtre{max-width:none}.gl-n{display:none}}

/* ---------- les lettres et les entrées ---------- */
.gl-l{display:grid;grid-template-columns:minmax(64px,.35fr) minmax(0,2.4fr);gap:clamp(12px,3vw,48px);padding:clamp(28px,4vw,48px) 0;border-top:1px solid var(--border);scroll-margin-top:110px}
.gl-l:first-of-type{border-top:0}
.gl-L{margin:0;font-family:var(--f-titre);font-weight:800;font-size:clamp(3rem,7vw,5.6rem);line-height:.9;letter-spacing:-.05em;color:var(--fleche);position:sticky;top:112px;align-self:start}
.gl-L span{display:inline-block;transform:translateY(-.06em)}
.gl-es{display:grid;gap:clamp(22px,3vw,34px)}
.gl-e{scroll-margin-top:118px;max-width:72ch}
.gl-e[hidden]{display:none}
.gl-t{font-family:var(--f-titre);font-weight:800;font-size:1.45rem;letter-spacing:-.025em;line-height:1.1;margin:0 0 8px;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 12px}
.gl-t a{text-decoration:none;color:var(--encre)}
.gl-t a:hover{color:var(--fleche-text)}
.gl-e:target .gl-t a{color:var(--fleche-text)}
.gl-e:target .gl-t a.gl-is1{color:var(--papier)}   /* la pastille garde son fond d'encre, même sur l'entrée ciblée */
/* La pastille est dans le <h3>, et `.gl-t a` (0,1,1) l'emportait sur `.gl-is1`
   (0,1,0) : depuis qu'elle est devenue un LIEN vers la définition servie, elle
   s'affichait en encre sur encre — 1:1, invisible. Constat de la sonde, corrigé
   en montant la spécificité. */
.gl-is1,.gl-t a.gl-is1{font-family:var(--f-ui);font-weight:600;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--papier);background:var(--encre);padding:4px 9px;border-radius:999px;position:relative;top:-3px;text-decoration:none;min-height:24px;display:inline-flex;align-items:center}
.gl-t a.gl-is1:hover{background:var(--fleche);color:var(--blanc)}
.gl-d{font-family:var(--f-lecture);font-size:1.08rem;line-height:1.6;color:var(--encre);margin:0 0 10px}
.gl-ou,.gl-v{font-size:.86rem;line-height:1.7;color:var(--trait);margin:0}
.gl-k{font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--fleche-text);margin-right:6px;display:inline-block;width:2.6em}
.gl-sep{color:var(--muted);margin:0 2px}
.gl-an{color:var(--muted);font-variant-numeric:tabular-nums}
/* renvois en LIGNE dans une phrase : leur hauteur est celle de la ligne — WCAG 2.5.8 exempte ce cas */
.gl-ou a,.gl-v a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-decoration-thickness:1.5px;text-underline-offset:3px}
.gl-ou a:hover,.gl-v a:hover{color:var(--fleche-text)}
.gl-ou span:not(.gl-k):not(.gl-sep):not(.gl-an){color:var(--trait)}
.gl-vide{font-family:var(--f-lecture);font-size:1.1rem;color:var(--trait);padding:48px 0;margin:0}
.gl-vide a{color:var(--fleche-text)}
.gl-droits{margin-top:clamp(40px,6vw,72px)}
/* douze cases de 25 px + onze écarts doivent tenir dans 327 px : l'écart tombe à 2 */
@media(max-width:640px){.gl-cs{gap:2px}.gl-l{grid-template-columns:1fr;gap:10px}.gl-L{position:static;font-size:2.6rem}.gl-L span{transform:none}}

/* ---------- LE RELIEF D'UN MOT ----------
   Douze cases, une par numéro, remplies par le bas selon la densité du mot —
   un histogramme qui garde la grille du plan. L'échelle est relative AU MOT :
   « spectacle » (258 occurrences) écraserait « potlatch » (12), et l'on ne
   lirait plus la forme du relief, seulement sa hauteur. */
.gl-rel{margin:12px 0 0;display:grid;gap:6px}
.gl-rel-k{width:auto;margin:0}
.gl-cs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:3px;align-items:flex-end;max-width:420px}
.gl-c{flex:0 0 auto;width:25px}   /* 25 et non 24 : la répartition flex arrondissait certaines cases à 23 px, sous la cible de WCAG 2.5.8. Largeur fixe, et retour à la ligne si l'écran est plus étroit — deux lignes de six se lisent encore. */
.gl-c a,.gl-c{display:block}
.gl-c a,.gl-c.vide{position:relative;height:36px;border:1px solid var(--border);border-radius:3px;background:var(--blanc);overflow:hidden;text-decoration:none;display:block}
.gl-c a:hover{border-color:var(--fleche)}
.gl-c i{position:absolute;left:0;right:0;bottom:0;background:var(--fleche);opacity:.82;display:block}
.gl-c.vide i{background:none}
.gl-c em{position:absolute;left:0;right:0;bottom:3px;text-align:center;font-family:var(--f-titre);font-weight:600;font-style:normal;font-size:.7rem;color:var(--encre);mix-blend-mode:luminosity}   /* 11,2 px : la règle de la maison ne descend pas sous 11 */
.gl-c.vide em{color:var(--muted)}
.gl-c a:focus-visible{outline:2px solid var(--fleche);outline-offset:2px}
.gl-rel-p{margin:0;font-size:.8rem;color:var(--muted);line-height:1.45}
.gl-rel-p a{color:var(--encre);text-decoration:underline;text-decoration-color:var(--fleche);text-underline-offset:3px}
.gl-rel-p a:hover{color:var(--fleche-text)}
.gl-rel-vide{margin:10px 0 0;font-size:.8rem;color:var(--muted);font-style:italic}