/* LE CADRE D'UNE DÉMO.
 *
 * Presque rien, et c'est voulu. Ce que la page montre, c'est la FIGURE, rendue
 * par le moteur du livre avec la feuille du livre : sa couleur de papier, sa
 * typographie, ses mesures. Repeindre ça aux couleurs du site donnerait une
 * belle vitrine d'un produit qui n'existe pas. Le site fait le cadre — l'écran,
 * le rail, la légende, en Bricolage sur son papier à lui ; ici on ne pose que
 * ce que le livre n'a pas : de quoi tenir la page dans un cadre, et un curseur.
 * Ce que le visiteur fait à la figure se dit dans le pied de page du site, pas
 * ici : une pastille posée en bas de CE cadre tombait en travers de la figure.
 *
 * Les deux seules couleurs qui viennent du site sont celles de l'accent
 * (#e4402a et son encre #c2331c, avec son lavis #fce8e2) — le curseur doit se
 * lire sur n'importe quelle figure, et il doit appartenir au site qui le
 * montre, pas au livre qu'il touche. Elles sont écrites ici en clair : cette
 * page est servie hors du site et n'hérite d'aucun de ses jetons. Si la
 * palette bouge dans web/index.html, elle bouge ici aussi — voir
 * DESIGN-CHART.html, § Colour.
 */

html, body { margin: 0; background: var(--paper); }

/* `--content-width` est la mesure d'une colonne de lecture dans un chapitre.
   Une figure seule dans un cadre n'a pas de chapitre autour d'elle : elle prend
   la largeur qu'on lui donne. */
:root { --content-width: 100%; }
.dm-page .book-chapter { padding: 20px 24px 26px; }
.dm-page .book-chapter > *:first-child { margin-top: 0; }
.dm-page .book-chapter > *:last-child { margin-bottom: 0; }

/* Pendant que le curseur joue, une bande de sélection bleue en travers d'un
   tableau est la seule chose qui fasse ressembler tout ça à l'enregistrement
   d'écran de quelqu'un qui s'emmêle. Dès que le visiteur a la main, on lui rend
   aussi le droit de sélectionner. */
body.dm-auto { -webkit-user-select: none; user-select: none; }

/* ── le curseur ───────────────────────────────────────────────────────────
   Il est POSÉ DANS la page de la figure, pas au-dessus d'elle depuis le site :
   il vise des boutons que seule cette page peut mesurer, et une mesure prise à
   travers un cadre se trompe dès qu'il y a eu un défilement. */
/* UNE VRAIE FLÈCHE, pas une pastille. L'anneau rouge se lisait comme un
   repère posé sur la figure — quelque chose que la page signale — alors que
   tout le propos de ce curseur est « vous pourriez être en train de faire
   ça ». Il doit donc ressembler à ce que le lecteur a sous la main : blanc,
   cerné de noir, légèrement ombré, lisible sur un ciel étoilé comme sur une
   feuille crème. La POINTE est l'origine du dessin, d'où la marge de deux
   pixels : c'est elle qui doit tomber sur le bouton, pas le centre. */
.dm-curseur {
  position: fixed; left: 0; top: 0; z-index: 40;
  inline-size: 14px; block-size: 21px; margin: -2px 0 0 -2px;
  pointer-events: none; opacity: 0; transform: translate(-120px, -120px);
  transition: transform .72s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
}
.dm-curseur.on { opacity: 1; }
.dm-curseur.vite { transition-duration: .07s, .3s; }   /* il suit la poignée */
.dm-curseur svg {
  display: block; overflow: visible;
  filter: drop-shadow(0 1.5px 2px rgba(0, 0, 0, .4));
  transition: transform .18s ease;
}
.dm-curseur .dm-fleche {
  fill: #fff; stroke: #17140f; stroke-width: 1.5;
  stroke-linejoin: round; stroke-linecap: round;
}
.dm-curseur.press svg { transform: scale(.86); }
/* L'onde part de la POINTE, pas du milieu du dessin. */
.dm-curseur::after {
  content: ""; position: absolute; left: 0; top: 0;
  inline-size: 26px; block-size: 26px; margin: -13px 0 0 -13px;
  border-radius: 50%; border: 1.5px solid #e4402a; opacity: 0; transform: scale(.55);
}
.dm-curseur.press::after { animation: dm-onde .52s ease-out; }
@keyframes dm-onde {
  from { opacity: .65; transform: scale(.55); }
  to   { opacity: 0;   transform: scale(1.55); }
}

@media (prefers-reduced-motion: reduce) {
  .dm-curseur { display: none; }
}