/* animations.css — l'habillage des widgets du site.
 *
 * Un widget remplace une figure statique que le PDF garde ; il n'apporte
 * jamais de contenu que le PDF n'ait pas. Voir templates/filters/mkdocs.lua.
 *
 * Toutes les couleurs viennent des variables de Material : le widget suit le
 * mode clair/sombre sans règle propre. */

.animation--montee {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: .35rem;
  padding: .9rem 1rem 1rem;
  margin: 1.2rem 0;
  background: var(--md-code-bg-color);
}

.animation__titre {
  font-weight: 700;
  font-size: .82rem;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin: 0 0 .7rem;
}

.animation__commandes {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .45rem;
  margin-bottom: .85rem;
}

.animation__etiquette {
  font-size: .78rem;
  color: var(--md-default-fg-color--light);
  margin-right: .1rem;
}

.animation button {
  font: inherit;
  font-size: .78rem;
  padding: .28rem .62rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .25rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  cursor: pointer;
}

.animation button:hover { border-color: var(--md-accent-fg-color); }

.animation button[aria-pressed="true"] {
  background: var(--md-primary-fg-color);
  border-color: var(--md-primary-fg-color);
  color: var(--md-primary-bg-color);
}

.animation button.animation__action {
  border-color: var(--md-accent-fg-color);
  color: var(--md-accent-fg-color);
  font-weight: 600;
}

/* Un plafond de largeur, et non la pleine colonne : c'est ce qui garde la
 * typographie d'un SVG dans une plage lisible des deux côtés. Sans lui, le
 * même dessin rend ses étiquettes à vingt-six pixels sur un écran large et à
 * sept sur un téléphone. */
.animation svg {
  display: block;
  width: 100%;
  max-width: 30rem;
  height: auto;
  margin: 0 auto;
}

.animation__lecture {
  font-size: .8rem;
  color: var(--md-default-fg-color--light);
  margin: .7rem 0 0;
  min-height: 2.4em;
}

.animation__lecture strong { color: var(--md-default-fg-color); }

/* Le repli : la figure statique qui suit le marqueur. Le script la masque une
 * fois le widget monté ; sans JavaScript, elle reste, et c'est le rendu du
 * PDF. */
.animation__repli-masque { display: none; }

/* Les curseurs : une étiquette, la glissière, la valeur lue. La valeur est en
 * chiffres tabulaires, sinon elle danse d'un pixel à chaque cran. */
.animation__curseur {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin-bottom: .5rem;
}

.animation__curseur .animation__etiquette {
  flex: 0 0 7.5rem;
  margin: 0;
}

.animation__curseur input[type="range"] {
  flex: 1 1 auto;
  min-width: 6rem;
  accent-color: var(--md-accent-fg-color);
}

.animation__valeur {
  flex: 0 0 3.4rem;
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: .82rem;
}

@media screen and (max-width: 30rem) {
  .animation__curseur { flex-wrap: wrap; }
  .animation__curseur .animation__etiquette { flex-basis: 100%; }
}

/* Les barres du widget des évolutions. En HTML et non en SVG : un SVG mis à
 * l'échelle emporte sa typographie avec lui, et le graphique devenait
 * illisible sur téléphone. Ici les étiquettes gardent la police du site.
 *
 * La piste n'a aucune marge intérieure, et tout y est placé en absolu. C'est
 * ce qui garantit que le repère de la valeur de départ tombe exactement sur
 * le haut de la première barre : une marge haute sur le conteneur ferait
 * compter les hauteurs de barre sur la boîte de contenu et le repère sur la
 * boîte de marge, et les deux ne coïncideraient pas. La place des étiquettes
 * vient donc de marges extérieures. */
.animation__barres {
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: .5rem;
  height: 9.5rem;
  margin: 1.7rem .4rem 1.5rem;
}

.animation__colonne {
  position: relative;
  flex: 1 1 0;
  max-width: 7rem;
}

.animation__fut {
  position: absolute;
  left: 0;
  right: 0;
  background: var(--md-default-fg-color);
  border-radius: .12rem .12rem 0 0;
  transition: height .12s ease-out;
}

.animation__barres--negatif .animation__fut {
  border-radius: 0 0 .12rem .12rem;
}

.animation__fut--pale { opacity: .28; }
.animation__fut--demi { opacity: .55; }

/* Le prix se pose juste au-dessus de sa barre — au-dessous quand elle pend. */
.animation__prix {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  font-size: .82rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-bottom: .2rem;
  white-space: nowrap;
}

.animation__barres--negatif .animation__prix {
  margin-bottom: 0;
  margin-top: .2rem;
}

.animation__legende {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1.3rem;
  text-align: center;
  font-size: .76rem;
  color: var(--md-default-fg-color--light);
  white-space: nowrap;
}

.animation__barres--negatif .animation__legende {
  bottom: auto;
  top: -1.3rem;
}

/* Le repère de la valeur de départ : c'est lui qu'on cherche à retrouver, et
 * c'est lui qu'on ne retrouve pas avec deux taux opposés. */
.animation__depart {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed var(--md-default-fg-color--light);
  opacity: .75;
  pointer-events: none;
}

.animation__depart span {
  position: absolute;
  right: 0;
  top: -1.1rem;
  font-size: .72rem;
  color: var(--md-default-fg-color--light);
}

.animation__barres--negatif .animation__depart span {
  top: auto;
  bottom: -1.1rem;
}

/* Le champ de la valeur de départ, dans la barre de commandes. */
.animation__champ {
  font: inherit;
  font-size: .78rem;
  width: 5rem;
  padding: .22rem .35rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: .25rem;
  background: var(--md-default-bg-color);
  color: var(--md-default-fg-color);
  font-variant-numeric: tabular-nums;
}

.animation__champ:focus { outline-color: var(--md-accent-fg-color); }

/* Les poignées des constructions géométriques : visibles au repos, nettes au
 * survol, et cerclées au focus pour qui navigue au clavier. `touch-action:
 * none` empêche le navigateur d'interpréter le glissement comme un
 * défilement de la page — sans quoi le point ne suit pas le doigt. */
/* La cible est transparente et large : c'est elle qui reçoit le doigt. Elle
   précède le cercle visible dans le DOM, de sorte que le survol et le focus
   se marquent par `+ circle` — CSS ne sait pas désigner un frère précédent. */
.animation__poignee {
  cursor: grab;
  touch-action: none;
  /* `all` et non `visiblePainted` : un disque transparent doit tout de même
     attraper le doigt. Son rayon est réglé par `ajusterCibles`. */
  pointer-events: all;
}

.animation__poignee:active { cursor: grabbing; }

.animation__poignee:hover + circle,
.animation__poignee:focus-visible + circle { fill-opacity: .38; }

/* Le focus ne s'appuie pas sur `outline` : le contour d'un disque
   transparent de 26 unités, dont ajusterCibles fait varier le rayon, ne dit
   rien de la poignée qu'on voit. On marque le cercle visible.

   Un trait qui passe de 2 à 3,5 était le seul signe, et il fallait savoir où
   regarder. Le cercle grossit donc aussi — `r` est une propriété CSS depuis
   SVG2 — ce qui rend le repère lisible du coin de l'œil. Les deux effets se
   cumulent : là où `r` n'est pas animable, le trait épaissi reste. */
.animation__poignee:focus-visible {
  outline: none;
}

.animation__poignee:focus-visible + circle {
  stroke-width: 4;
  r: 15;
}

/* Sur le reste du dessin, le doigt garde le défilement vertical de la page :
   un graphique qui occupe la moitié de l'écran ne doit pas devenir une zone
   morte. Seules les poignées confisquent le geste. */
.animation svg { touch-action: pan-y; }

/* Le cercle visible et l'étiquette recouvrent la cible : sans cela ils lui
   voleraient le doigt, et la poignée aurait un trou là où ils se posent. */
.animation__pastilleVue,
.animation__etiquettePoint { pointer-events: none; }

/* La pastille d'une réponse, dans les graphiques : un fond opaque, pour
 * qu'elle couvre la graduation sur laquelle elle se pose au lieu de s'y
 * mêler. La couleur est celle du cadre du widget. */
.animation__pastille { fill: var(--md-code-bg-color); }