/* La barre de l'instrument : fixe en bas, la page défile normalement derrière.
   Elle ne s'imprime pas, et n'existe pas tant que le script ne l'a pas remplie. */
.instrument {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 10;
  background: var(--fond-zone);
  border-top: 1px solid var(--trait);
  padding: 0.6rem 1.25rem 0.7rem;
}

/* La page se réserve la hauteur de la barre, sinon le dernier article passe
   dessous et devient illisible. */
body.a-instrument { padding-bottom: 6.5rem; }

/* Résidu 2 : l'état du marquage (« Révision du … » / « Texte inchangé
   depuis le … ») n'est plus dans le <h1> ni dans la citation — le serveur ne
   l'y met jamais. C'est une ligne d'info à part, insérée juste après le
   <h1> par instrument.js (mettreAJourEtatMarquage), au même titre discret
   que la mention d'abrogation d'un article. */
.instrument-etat { color: var(--sourdine); font-size: 0.95rem; margin: -0.5rem 0 1.5rem; }

/* La ligne du temps et le curseur partagent une colonne (.instrument-axe),
   entre les deux flèches : même largeur, même échelle (les jours), et chaque
   jalon au-dessus de la position de la poignée pour sa version.
   L'axe commence et finit à 9 px des bords, là où va le centre de la poignée. */
.instrument-axe { flex: 1 1 auto; min-width: 0; }
.instrument-axe input[type="range"] { display: block; width: 100%; margin: 0; }
.instrument-ruban { position: relative; height: 22px; margin: 0 0 0.15rem; }
.instrument-ruban .axe { position: absolute; left: 9px; right: 9px; top: 10px; height: 1px; background: var(--trait); }
/* Pas de jeton « trait renforcé » dans style.css : le seul trait disponible
   sert donc aussi aux jalons, distingués de l'axe par la taille plutôt que
   par une couleur qui n'existe pas encore. */
.instrument-ruban i { position: absolute; top: 5px; width: 1px; height: 8px; background: var(--trait); }
.instrument-ruban i.change { top: 2px; height: 14px; width: 2px; background: var(--patine); }
.instrument-ruban i.change.coordonnee { background: var(--bronze); }
/* La version lue : un repère franc, plus haut et plus épais que tous les
   jalons, coiffé d'une pastille — il doit se trouver d'un coup d'œil parmi
   soixante traits. Centré sur sa date (margin-left : moitié de sa largeur). */
/* Les trois sélecteurs : sans eux, `i.change.coordonnee` (plus spécifique)
   repeignait le repère de la couleur du jalon qu'il recouvre. */
.instrument-ruban i.ici,
.instrument-ruban i.change.ici,
.instrument-ruban i.change.coordonnee.ici {
  top: -2px; height: 24px; width: 4px; margin-left: -2px;
  background: var(--encre); z-index: 1;
}
.instrument-ruban i.ici::after {
  content: ""; position: absolute;
  left: 50%; top: -6px; width: 11px; height: 11px; margin-left: -5.5px;
  border-radius: 50%; background: inherit;
}

.instrument-piste { display: flex; align-items: flex-end; gap: 0.8rem; max-width: 60rem; margin: 0 auto; }
.instrument-piste input[type="range"] { flex: 1 1 auto; }
.instrument-piste button {
  font-family: var(--police-lecture); font-size: 0.9rem;
  color: var(--sourdine); background: var(--fond-champ);
  border: 1px solid var(--trait); border-radius: 0;
  width: 2.2rem; height: 2.2rem; cursor: pointer;
}
.instrument-piste button:disabled { opacity: .35; cursor: default; }

/* Le marquage des modifications est masqué tant que le lecteur ne l'a pas
   demandé (bouton « Afficher les modifications ») : les mots supprimés
   disparaissent, les ajouts redeviennent du texte ordinaire — le texte lu, et
   copié, est exactement le texte en vigueur. La page de comparaison n'est pas
   équipée (pas de .a-instrument) : elle continue de tout marquer. */
body.a-instrument:not(.voir-modifications) main del { display: none; }
body.a-instrument:not(.voir-modifications) main ins {
  text-decoration: none; background: none; border: 0; color: inherit;
}

.instrument-piste button.instrument-modifs { width: auto; padding: 0 0.8rem; white-space: nowrap; }

/* Sans min-width: 0, le curseur refuse de descendre sous sa largeur propre et
   pousse le bouton hors de l'écran d'un téléphone (mesuré à 375 px : 63 px
   coupés). Sur écran étroit, le bouton passe sur sa propre ligne, et la page
   se réserve la hauteur de plus. */
.instrument-piste input[type="range"] { min-width: 0; }
@media (max-width: 40rem) {
  .instrument-piste { flex-wrap: wrap; row-gap: 0.4rem; }
  .instrument-piste button.instrument-modifs { flex: 1 0 100%; height: 2rem; }
  body.a-instrument:has(.instrument-modifs) { padding-bottom: 9rem; }
}
.instrument-piste button.instrument-modifs[aria-pressed="true"] {
  background: var(--patine); border-color: var(--patine); color: var(--papier);
}

@media print {
  .instrument { display: none; }
  body.a-instrument { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .instrument * { transition: none !important; animation: none !important; }
}