/* Le découpage d'un message (js/decoupe_vue.js, js/gestes.js) : la lumière d'une donnée
   cliquée dans le corps, et le message phrase par phrase sous le corps. Les couleurs sont
   celles de la charte : le violet de la lecture (--ia, et le fond d'un passage allumé repris
   de mark.surl.on dans tri.css), le vert de ce qui est lu dans le message (--lo). */

/* Dans le corps : les seuls caractères qui portent la valeur d'une donnée cliquée à droite,
   même au milieu d'un passage souligné. Le navigateur la pose au-dessus du texte
   (CSS Custom Highlight) : rien n'est ajouté ni coupé dans la page. */
::highlight(sl-on) { background-color:#E2D2FA; color:#1f1235; text-decoration:underline 2px #6A3FB5; }

/* Sous le corps : un bouton discret, puis le message phrase par phrase, chaque morceau dans
   sa case (une case ne se coupe pas en fin de ligne, sinon on croirait voir deux morceaux),
   ce qui est reconnu en vert avec son nom, et souligné de violet ce que la lecture cite. */
.dcp-bloc { margin-top:14px; }
.dcp-voir { font:inherit; font-size:12.5px; color:var(--ia); background:none; border:1px solid var(--ia-l);
  border-radius:6px; padding:3px 10px; cursor:pointer; }
.dcp-voir:hover, .dcp-voir[aria-expanded="true"] { background:var(--ia-w); }
.dcp { margin-top:10px; padding-top:10px; border-top:1px solid var(--line-soft); }
.dcp .dcp-l { display:grid; gap:3px; }
.dcp .dcp-ph { font-size:13px; line-height:1.9; color:var(--ink-soft); }
.dcp .dcp-ph.dcp-par { margin-top:8px; padding-top:6px; border-top:1px solid var(--line-soft); }
.dcp .sl { display:inline-block; max-width:100%; vertical-align:baseline; line-height:1.55; margin:2px 0;
  border:1px solid var(--line); border-radius:5px; padding:0 6px; background:var(--surface); }
.dcp .sl:not([data-type="texte"]) { background:var(--lo-w); border-color:transparent; color:var(--ink); font-weight:600; }
.dcp .sl i { font-style:normal; font-weight:600; font-size:9.5px; text-transform:uppercase; letter-spacing:.05em;
  color:var(--lo); margin-right:5px; }
.dcp u.appui { text-decoration:underline 2px var(--ia); text-underline-offset:3px; }
.dcp .dcp-leg { margin:12px 0 0; font-size:12px; }