/* Lire Debord — la chronologie (/chronologie/). Une flèche de dérive verticale,
   les dates posées dessus comme des fragments ; le rail des décennies et les
   filtres reprennent .gl-outils / .gl-rail de l'abécédaire (redéfinis ici). */
.ch-tete{margin-bottom:clamp(20px,3vw,32px)}
.ch-tete .sec-h{max-width:18ch}
.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}
.gl-rail a{display:inline-flex;align-items:center;justify-content:center;min-width:44px;height:28px;padding:0 6px;border-radius:6px;text-decoration:none;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}
.ch-filtres{display:flex;flex-wrap:wrap;gap:4px 14px;margin-left:auto}
.ch-f{font-size:.82rem;color:var(--trait);display:inline-flex;align-items:center;gap:6px;min-height:28px;cursor:pointer}
.ch-f input{accent-color:var(--fleche);width:18px;height:18px;margin:0}

/* ---------- la flèche et les dates ---------- */
.ch-dec{position:relative;padding:clamp(20px,3vw,32px) 0 clamp(8px,2vw,16px);scroll-margin-top:110px}
.ch-dec-h{margin:0 0 18px;font-family:var(--f-titre);font-weight:800;font-size:clamp(2.4rem,6vw,4.6rem);line-height:.9;letter-spacing:-.05em;color:var(--fleche)}
.ch-dec-h span{display:inline-block;background:var(--papier);padding-right:14px;position:relative;z-index:1}
.ch-l{list-style:none;margin:0;padding:0 0 0 0;position:relative}
/* le trait rouge : une flèche qui descend, tracée au défilement par chronologie.js (--trace de 0 à 1) */
.ch-l::before{content:"";position:absolute;left:calc(var(--col,148px) - 5px);top:0;bottom:0;width:4px;background:linear-gradient(var(--fleche),var(--fleche)) no-repeat 0 0/100% calc(var(--trace,1) * 100%),rgba(20,19,15,.12);border-radius:2px}
/* DENSITÉ. Cinquante-sept dates à 207 px l'une faisaient 13 798 px — seize
   écrans pour 31 mots par date. L'espace entre deux dates est ramené de 22 à
   10 px et la carte resserrée : une frise se PARCOURT, et deux dates qui se
   suivent doivent tenir sous le même regard. */
.ch-e{display:grid;grid-template-columns:var(--col,148px) minmax(0,1fr);gap:0 18px;padding:0 0 10px;position:relative}
.ch-e:last-child{padding-bottom:8px}
.ch-e[hidden]{display:none}
.ch-d{font-family:var(--f-titre);font-weight:600;font-size:.92rem;color:var(--encre);padding-right:18px;text-align:right;padding-top:4px;font-variant-numeric:tabular-nums;position:relative}
.ch-d::after{content:"";position:absolute;right:-7px;top:9px;width:10px;height:10px;border-radius:50%;background:var(--papier);border:2.5px solid var(--fleche);box-sizing:border-box;transform:translateX(50%)}
.ch-c{background:var(--blanc);border:1px solid var(--border);border-radius:12px;padding:10px 15px;
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;max-width:66ch;min-width:0}
.ch-e:target .ch-c{border-color:var(--fleche)}
/* La rubrique était une ligne à elle seule, répétée 57 fois : elle passe en
   marque, sur la ligne du titre. Le mot reste entier, il ne mange plus 18 px. */
.ch-k{margin:0;font-size:.72rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--fleche-text);
  grid-row:1;grid-column:1;align-self:baseline;white-space:nowrap}
.ch-t{grid-row:1;grid-column:2}
.ch-x,.ch-s{grid-column:1/-1}
.ch-t{margin:0;font-family:var(--f-titre);font-weight:800;font-size:1.1rem;letter-spacing:-.02em;line-height:1.15}
.ch-x{margin:2px 0 0;font-family:var(--f-lecture);font-size:1rem;line-height:1.5;color:var(--trait)}
.ch-note{margin:4px 0 0;font-size:.84rem;line-height:1.5;color:var(--trait)}
.ch-note b{color:var(--encre);font-weight:600}
.ch-s{margin:6px 0 0;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:.78rem}
/* LA PROVENANCE. Elle est sous chacune des 57 dates — c'est la méthode du site,
   elle reste visible. Mais le mot « Source : » y était écrit 57 fois : il ne
   disait rien que la place et la forme ne disent, et il est passé au lecteur
   d'écran seul. Le crochet et le retrait rendent le renvoi sans le nommer. */
.ch-src{position:relative;padding-left:13px}
.ch-src::before{content:"";position:absolute;left:0;top:.38em;width:6px;height:6px;
  border-left:1px solid var(--muted);border-bottom:1px solid var(--muted)}
.ch-s a{overflow-wrap:anywhere;color:var(--trait);text-decoration:underline;text-decoration-color:var(--border-strong);text-underline-offset:3px;padding:4px 0;display:inline-block}
.ch-s a:hover{color:var(--fleche-text);text-decoration-color:var(--fleche)}
.ch-oeuvre{color:var(--encre)!important;text-decoration-color:var(--fleche)!important;font-weight:500}
/* les types, par une teinte du point */
.ch-vie .ch-d::after{background:var(--fleche)}
.ch-revue .ch-d::after{border-radius:2px}
.ch-film .ch-d::after{border-radius:0;transform:translateX(50%) rotate(45deg)}
@media(max-width:640px){
  .ch-e{grid-template-columns:1fr;gap:4px}
  .ch-l::before{left:6px}
  .ch-d{text-align:left;padding:0 0 0 22px}
  .ch-d::after{left:0;right:auto;top:6px;transform:none}
  .ch-film .ch-d::after{transform:rotate(45deg)}
  .ch-c{margin-left:22px}
  .ch-filtres{margin-left:0}
}


/* ⚠️ SOUS 640 px LA RUBRIQUE REVIENT SUR SA LIGNE. Mise à gauche du titre elle
   est en `nowrap` : sa largeur MINIMALE s'ajoute à celle du titre, et la page
   débordait de 86 px à 375. C'est le même piège que la bande d'orientation —
   un `nowrap` dans une grille impose une largeur minimale, et l'ellipse n'y
   change rien. À cette largeur, la ligne gagnée ne valait pas le débordement. */
@media(max-width:640px){
  .ch-c{grid-template-columns:minmax(0,1fr)}
  .ch-k{grid-row:auto;grid-column:1;white-space:normal}
  .ch-t{grid-row:auto;grid-column:1}
}