/* Outil · Markdown, id markdown : seulement ce qui lui est propre (le reste vient de app/kit.css).
   Préfixe des classes : mk-
   À gauche : le résultat (le rendu propre, ou le Markdown obtenu) dans une zone fixe qui défile, les mots et caractères,
   et les boutons du sens choisi. À droite : le sens, puis l'entrée (Markdown à taper, ou texte à coller) et Vider. */
.mk .outil-fixe { align-items: stretch; }
.mk-titre { padding: 0; }
.mk-sortie { height: 440px; border-radius: 16px; box-shadow: inset 0 0 0 1px var(--filet-doux); overflow: hidden; }
.mk-rendu, .mk-md-sortie { width: 100%; height: 100%; overflow-y: auto; overscroll-behavior: contain; padding: 18px 22px; }
.mk-md-sortie { border: 0; outline: none; resize: none; background: none; color: var(--papier); font: 400 13.5px/1.6 var(--mono); }
.mk[data-sens="texte"] .mk-md-sortie, .mk[data-sens="md"] .mk-rendu { display: none; }
.mk[data-sens="texte"] [data-a="md"], .mk[data-sens="texte"] [data-a="fichier"], .mk[data-sens="md"] [data-a="texte"], .mk[data-sens="md"] [data-a="riche"] { display: none; }
/* Le rendu : sobre, lisible, comme un document */
.mk-rendu { font: 400 15px/1.6 var(--corps); color: var(--papier); }
.mk-rendu > :first-child { margin-top: 0; }
.mk-rendu h1, .mk-rendu h2, .mk-rendu h3, .mk-rendu h4 { font-family: var(--display); letter-spacing: -.02em; line-height: 1.2; margin: 1.2em 0 .5em; }
.mk-rendu h1 { font-size: 24px; } .mk-rendu h2 { font-size: 19px; } .mk-rendu h3 { font-size: 16px; }
.mk-rendu p, .mk-rendu ul, .mk-rendu ol, .mk-rendu blockquote, .mk-rendu pre { margin: 0 0 .9em; }
.mk-rendu ul, .mk-rendu ol { padding-left: 1.4em; }
.mk-rendu a { color: var(--peche); }
.mk-rendu blockquote { padding-left: 14px; box-shadow: inset 2px 0 0 var(--orange); color: var(--texte2); }
.mk-rendu code { font: 500 .9em var(--mono); padding: 1px 5px; border-radius: 5px; background: rgba(242, 240, 235, .08); }
.mk-rendu pre { padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, .3); overflow-x: auto; }
.mk-rendu pre code { padding: 0; background: none; }
.mk-rendu hr { border: 0; height: 1px; background: var(--filet); margin: 1.2em 0; }
.mk-info { flex: none; height: 1lh; margin: 0; overflow: hidden; }
.mk-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.mk-actions .pastille { cursor: pointer; }
.mk-actions .pastille:hover { translate: none; }
.mk-actions .pastille:disabled { opacity: .3; cursor: default; }

.mk-entree { display: flex; flex-direction: column; gap: var(--libelle); }
.mk-entree .groupe { padding: 0; }
.mk-saisie { width: 100%; height: 380px; padding: 14px 16px; border: 0; outline: none; border-radius: 16px; resize: none; overflow-y: auto; overscroll-behavior: contain;
  background: var(--encre); box-shadow: inset 0 0 0 1px var(--filet); color: var(--papier); font: 400 14px/1.6 var(--mono); }
.mk-saisie:focus { box-shadow: inset 0 0 0 1.5px var(--papier); }
.mk-colle { font: 400 14.5px/1.6 var(--corps); }
.mk-colle:empty::before { content: attr(data-vide); color: var(--texte2); }
.mk[data-sens="texte"] .mk-colle, .mk[data-sens="md"] textarea.mk-saisie { display: none; }
.mk-vider { align-self: flex-start; cursor: pointer; }
.mk-vider:hover { translate: none; }
@media (max-width: 959px) { .mk-premier { order: -1; } .mk-sortie { height: 320px; } .mk-saisie { height: 260px; } }