/* Suivi des modifications (js/track-changes.js) - rendu des marques insertion/deletion/modification dans le contenu de l'éditeur (.tiptap), mode
   "suivi" façon Word/Google Docs (planning/feature-track-changes.md). Boutons de la barre
   (#v2-btn-track-changes/#v2-btn-accept-all/#v2-btn-reject-all) : aucune règle dédiée nécessaire ici, ils héritent des styles génériques déjà
   posés sur tout bouton de #v2-toolbar (icône, survol, .is-active, :disabled - css/editor-v2.css). Les marques « insertion » (vert) et
   « deletion » (rouge, barré) prennent les teintes d'une case de colonne suivie (plus bas) : écrites en dur, les mêmes en clair et en sombre, car
   la page reste blanche en thème sombre (charte, « Contrastes ») - un jeton de thème y posait une pastille foncée sur le papier ; 5,7:1 pour le
   vert et 5,6:1 pour le rouge (--danger sur --danger-soft ne ferait que 3,7:1). La marque
   « modification » réutilise --accent déjà présente dans css/style.css, comme .comment-mark le fait pour son propre état. parseHTML de
   ModificationMark lit `span[data-type="modification"]` sans exiger data-id (attribut optionnel côté schéma) ; ces règles ciblent le sélecteur
   d'attribut seul pour rester valides même sur un span sans data-id. */
.tiptap ins[data-id] {
  text-decoration: none;
  color: #146c48;
  background: #e5f6ee;
  border-bottom: 1px solid #8fd3aa;
}
.tiptap del[data-id] {
  text-decoration: line-through;
  color: #b42318;
  background: #fbe9e9;
}
.tiptap span[data-type="modification"] {
  text-decoration: underline dotted;
  text-decoration-color: var(--accent);
  text-underline-offset: 2px;
}

/* Image suggérée, insérée ou supprimée (js/editor-nodes.js, moveImageNode : un déplacement suivi laisse l'original à sa place en suppression et la
   copie à la nouvelle en insertion ; accepter garde la copie, refuser rend l'original). Le <ins>/<del> qui la porte n'a pas de boîte quand l'image
   est en calque (elle sort du flux) : sa teinte ne se voit pas, le cadre est donc posé sur l'image elle-même - plein vert pour l'insertion, rouge
   en tirets et image estompée pour la suppression. Mêmes verts et rouges que le texte suggéré, 6,4:1 et 6,6:1 sur la page blanche (elle reste
   blanche en sombre). `opacity` en !important : celle d'une image translucide s'écrit en ligne sur l'<img>. */
.tiptap ins[data-id] img.editor-image {
  outline: 2px solid #146c48;
}
.tiptap del[data-id] img.editor-image {
  outline: 2px dashed #b42318;
  opacity: 0.45 !important;
}

/* Colonne ajoutée ou supprimée avec le suivi (« Colonne avant / après », « Supprimer la colonne ») : la marque est posée sur chaque case, que
   ProseMirror dessine en <ins>/<del> (ou <span data-type="modification">, la largeur d'une case fusionnée qui gagne une colonne) autour du <td>,
   donc enfant direct du <tr>. Sans règle, cet élément en ligne sortait la case du tableau (une bande de 11 px). Il ne produit plus de boîte
   (`display: contents`) : la case reste une vraie case du tableau et porte elle-même la teinte. Couleurs écrites en dur, les mêmes dans les deux
   thèmes : la page reste blanche en sombre (charte, « Contrastes »), 5,7:1 pour le vert et 5,6:1 pour le rouge. Fond en `!important` : une case
   déjà colorée (fond posé en ligne) laisserait sinon la suggestion invisible. */
.tiptap tr > ins[data-id],
.tiptap tr > del[data-id],
.tiptap tr > span[data-type="modification"] {
  display: contents;
}
.tiptap tr > ins[data-id] > td,
.tiptap tr > ins[data-id] > th {
  color: #146c48;
  background-color: #e5f6ee !important;
}
.tiptap tr > del[data-id] > td,
.tiptap tr > del[data-id] > th {
  color: #b42318;
  background-color: #fbe9e9 !important;
  text-decoration: line-through;
}

/* Ligne ajoutée ou supprimée avec le suivi (« Ligne avant / après », « Supprimer la ligne ») : même défaut et même remède que les colonnes
   ci-dessus. La marque est posée sur la ligne, que ProseMirror dessine en <ins>/<del> (ou <span data-type="modification">) autour du <tr>, donc
   enfant direct du <tbody> : sans règle, cet élément en ligne sortait la ligne du tableau (une bande de 22 à 49 px de large). Il ne produit plus
   de boîte (`display: contents`) : la ligne reste une vraie ligne du tableau, ses cases portent la teinte (les mêmes que celles d'une colonne
   suivie, fixes dans les deux thèmes). */
.tiptap tbody > ins[data-id],
.tiptap tbody > del[data-id],
.tiptap tbody > span[data-type="modification"] {
  display: contents;
}
.tiptap tbody > ins[data-id] > tr > td,
.tiptap tbody > ins[data-id] > tr > th {
  color: #146c48;
  background-color: #e5f6ee !important;
}
.tiptap tbody > del[data-id] > tr > td,
.tiptap tbody > del[data-id] > tr > th {
  color: #b42318;
  background-color: #fbe9e9 !important;
  text-decoration: line-through;
}

/* Barre « Accepter / Refuser » d'une modification suivie (js/floating-toolbars.js:wireSuggestionFloatingToolbar) : deux boutons à libellé, de la
   largeur de leur texte (comme ceux de la barre nombre/date d'une bulle, css/toolbar-v2.css), aux couleurs de la barre flottante : monochrome, le
   vert et le rouge restent ceux du texte suivi. Le chrome (fond, bordure, ombre, niveau) vient de .v2-floating-toolbar. */
.v2-suggest-toolbar button {
  width: auto;
  padding: 0 10px;
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
/* Qui a proposé la modification (« Proposé par Marie Curie »), après les boutons : elle arrive un instant après l'ouverture de la barre (l'identité se lit une fois), devant eux elle les
   décalerait sous la souris. Discrète : texte courant de la barre, couleur de texte atténué des jetons (≥ 4,5:1, clair et sombre), un filet la sépare des boutons ; une longue adresse
   se coupe en points de suspension, l'info-bulle la donne en entier. Le chrome vient de .v2-floating-toolbar. */
.v2-suggest-toolbar .v2-suggest-author {
  align-self: center;
  box-sizing: border-box;
  max-width: 220px;
  margin-left: 2px;
  padding: 0 8px 0 10px;
  border-left: 1px solid var(--border);
  font-family: var(--font-ui);
  font-size: 12px;
  line-height: 18px;
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  user-select: none;
}
.v2-suggest-toolbar .v2-suggest-author[hidden] { display: none; }

/* Lecture (js/reader-mode.js:renderRecord et resolveHeaderFooterZone, TrackChanges.acceptedView) : le document comme si toutes les suggestions
   étaient acceptées, avec une légère teinte là où quelque chose a changé - texte inséré ou remplacé, paragraphe ou titre dont la mise en forme a
   changé, case, colonne ou ligne ajoutée. Le texte garde sa couleur, seul le fond change : le vert pâle du texte inséré dans l'éditeur (plus haut),
   écrit en dur et le même en clair et en sombre puisque la page reste blanche en sombre (charte, « Contrastes » ; 14:1 avec le texte de la page).
   `!important` sur une case, comme pour les colonnes suivies plus haut : un fond posé en ligne sur la case laisserait sinon la teinte invisible. Une
   image n'a pas de fond visible : elle prend un cadre. Les en-têtes et les pieds de page de la Lecture (l'espaceur du bord et les bandes de couture)
   ne sont pas dans `.reader-content` : ils ont la même teinte. Le PDF, le Word et l'Excel n'en ont aucune (ReaderMode.preview,
   TrackChanges.acceptedView sans teinte). */
:is(.reader-content, .v2-page-edge-spacer, .v2-page-band-header, .v2-page-band-footer) .pp-tc-changed {
  background-color: #e5f6ee;
}
:is(.reader-content, .v2-page-edge-spacer, .v2-page-band-header, .v2-page-band-footer) td.pp-tc-changed,
:is(.reader-content, .v2-page-edge-spacer, .v2-page-band-header, .v2-page-band-footer) th.pp-tc-changed,
:is(.reader-content, .v2-page-edge-spacer, .v2-page-band-header, .v2-page-band-footer) tr.pp-tc-changed > td,
:is(.reader-content, .v2-page-edge-spacer, .v2-page-band-header, .v2-page-band-footer) tr.pp-tc-changed > th {
  background-color: #e5f6ee !important;
}
:is(.reader-content, .v2-page-edge-spacer, .v2-page-band-header, .v2-page-band-footer) img.pp-tc-changed,
:is(.reader-content, .v2-page-edge-spacer, .v2-page-band-header, .v2-page-band-footer) .pp-tc-changed > img {
  outline: 2px solid #8fd3aa;
}