.motgl{border-bottom:1px dotted var(--mute);cursor:help;text-decoration:none;color:inherit}
.motgl:hover{border-bottom-color:var(--cherry)}
#glpop{position:absolute;z-index:200;max-width:min(92vw,360px);background:var(--paper);
  border:1px solid var(--ink2);box-shadow:0 10px 30px rgba(0,0,0,.35);padding:13px 15px;
  font-family:var(--text);font-size:.88rem;line-height:1.5;display:none}
#glpop.on{display:block}
#glpop p{margin:0}
#glpop b{display:block;font-family:var(--ui);font-size:.62rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--cherry);margin-bottom:6px}
#glpop a{font-family:var(--ui);font-size:.72rem;color:var(--ink2);display:inline-block;
  margin-top:9px;border-bottom:1px solid var(--rule)}
/* Mesure faite en direct a 1 440 px sur manieres-05 : `.essai` occupe 1 240 px, le
   texte 620, centre. Il reste donc 310 px de gouttiere de chaque cote. Une figure
   flottante ordinaire les ignorerait et viendrait rogner la mesure de moitie, ce qui
   est exactement le contraire de ce qu'on cherche.
   Un flottant a marge negative a ete essaye d'abord, et mesure en direct : au lieu de
   se ranger dans la gouttiere il debordait de 106 px sur la ligne. Les navigateurs ne
   placent pas la boite de marge d'un flottant a marge negative la ou le calcul le dit.
   Le positionnement absolu, lui, est sans ambiguite : la figure sort du flux, donc elle
   ne peut plus rogner la mesure, et sans `top` elle reste exactement a la hauteur ou le
   flux l'aurait posee. La ligne garde ses 620 px, et le lecteur voit une note de marge
   comme dans un livre de botanique. */
@media (min-width:1300px){
  .essai .txt{position:relative}
  /* Scope au conteneur qui porte `position:relative` juste au-dessus. Sans lui,
     la note de marge se calait sur un ancetre lointain : sur un recit a 1 600 px
     elle sortait de 302 px et faisait defiler la page. Un element en position
     absolue ne peut pas savoir qu'il deborde ; c'est au selecteur de le tenir. */
  /* `transform:none` annule le recentrage de plein cadre de da.py, qui s'appliquait
     encore faute d'etre declare ici : la figure partait de la moitie de sa largeur
     vers la gauche, 136 px sur 272, et se posait sur le texte. Une regle qui sort un
     element du flux doit annuler ce qui le deplacait tant qu'il y etait. */
  .essai .txt > figure.pl.gal.cote{position:absolute;right:-302px;width:272px;
    margin:4px 0 0;transform:none}
}
figure.pl.gal{max-width:640px}
figure.pl.gal img{background:var(--carton,#E9E7DD);border-radius:2px}
figure.pl.gal figcaption .src{display:block;margin-top:2px;color:var(--ink-faint)}
/* UN SEUL BLOC DE TRAVAIL, 956 px, centre dans le cadre de 1 240.
   Avant : colonne de texte a 47 % du cadre, et blocs larges centres SUR ELLE, donc
   plus larges qu'elle des deux cotes, donc dans la gouttiere ou logeaient les notes
   de marge. Mesure : bloc large 373..1533, note 1272..1544, croisement de 261 px.
   Une affiche emaillee s'est retrouvee au milieu d'un tableau. */
/* UNE PLANCHE NE MANGE PAS UN ECRAN. Une piece en hauteur mise a la largeur du bloc
   ferait 1 400 px de haut : on ne la voit plus, on la traverse. La largeur reste le
   plafond, la hauteur en devient un second, et l'image se centre entre les deux.
   Celle qui veut le detail a la loupe pour cela. */
.essai .txt > figure.pl img{width:auto;max-width:100%;max-height:74vh;
  margin-left:auto;margin-right:auto;display:block}
@media (min-width:1240px){
  .essai .txt{max-width:956px!important;margin-left:auto!important;
    margin-right:auto!important;position:relative}
  /* La mesure de lecture ne bouge pas : 68 signes, c'est elle qui rend le texte
     lisible. Elle est centree dans le bloc, les planches debordent de part et
     d'autre. Chaque selecteur pese autant que celui de da.py qu'il corrige et passe
     apres lui ; c'est pour cela qu'ils sont enumeres au lieu d'un `> *`. */
  .essai .txt > p,.essai .txt > ul,.essai .txt > ol,.essai .txt > dl,
  .essai .txt > h2,.essai .txt > h3,.essai .txt > h4,.essai .txt > blockquote,
  .essai .txt > details,.essai .txt > .src,.essai .txt > .enc,.essai .txt > .ombre,
  .essai .txt > .itoc,.essai .txt > .toc,.essai .txt > .ph,.essai .txt > .lead,
  .essai .txt > .sect-tete,.essai .txt > .chapno{
    max-width:min(68ch,620px);margin-left:auto;margin-right:auto}
  /* Ce qui est large occupe le bloc entier, et rien de plus. Meme liste que da.py,
     pour qu'on retrouve l'une en cherchant l'autre. */
  .essai .txt > figure,.essai .txt > .tw,.essai .txt > table,
  .essai .txt > .tscroll,.essai .txt > .balade,.essai .txt > .fig,
  .essai .txt > .gg,.essai .txt > .gg2,.essai .txt > ul.frise{
    max-width:none!important;width:100%!important;
    margin-left:0!important;margin-right:0!important;transform:none!important}
  /* La note de marge rentre dans le flux. Hors du flux, elle passait sous les
     tableaux et les planches, qui sont plus larges que la colonne de lecture. */
  .essai .txt > figure.pl.gal.cote{position:static!important;right:auto!important;
    width:100%!important;max-width:none!important;margin:0 0 26px!important;
    transform:none!important}
}
figure img{cursor:zoom-in}
#loupe{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.93);display:none;
  flex-direction:column;align-items:center;justify-content:center;padding:26px 20px 18px}
#loupe.on{display:flex}
#loupe img{max-width:min(100%,1500px);max-height:calc(100vh - 170px);object-fit:contain;
  filter:none;background:#fff}
#loupe .leg{max-width:760px;margin-top:16px;color:#ded7c8;font-family:var(--text);
  font-size:.86rem;line-height:1.5;text-align:center}
#loupe .leg .tag{display:inline-block;font-family:var(--ui);font-size:.6rem;
  letter-spacing:.16em;text-transform:uppercase;color:#9a9182;margin-right:8px}
#loupe .pos{position:absolute;top:18px;left:24px;font-family:var(--mono);font-size:.72rem;
  color:#9a9182}
#loupe .x{position:absolute;top:12px;right:16px;background:transparent;border:0;
  color:#ded7c8;font-size:1.9rem;line-height:1;cursor:pointer;padding:6px 10px}
#loupe .pas{position:absolute;top:50%;transform:translateY(-50%);background:transparent;
  border:0;color:#ded7c8;font-size:2.4rem;line-height:1;cursor:pointer;padding:14px 18px;
  opacity:.55}
#loupe .pas:hover{opacity:1}
#loupe .av{left:4px}#loupe .ap{right:4px}
@media (max-width:620px){#loupe .pas{font-size:1.9rem;padding:10px 8px}
  #loupe .leg{font-size:.78rem}}
:where(img[width]){height:auto}