/*
 * Modulo Blocks — Surlignage inline (bouton « Surlignage » de la barre
 * d'outils du texte, disponible dans les paragraphes, titres, listes…).
 *
 * Fichier séparé (1.36.3) : ces règles vivaient dans la feuille du bloc
 * Texte stylisé, chargée UNIQUEMENT sur les pages contenant ce bloc. Dans un
 * simple paragraphe, le <mark> gardait alors le fond jaune par défaut du
 * navigateur. Ce fichier est chargé dès qu'une page contient un surlignage
 * (inc/blocks.php), et dans l'éditeur.
 */
/* ── Surlignage inline (format RichText) ─────────────────────────────────────
   <mark class="modulo-inline-highlight modulo-hl--{variante}"> appliqué sur une
   portion sélectionnée via le bouton de la barre d'outils (à côté du gras).
   La couleur choisie arrive en variables CSS inline sur le <mark> :
     --mst-hl-color : couleur pleine (hex)
     --mst-hl-bg    : même couleur en rgba 30 % (fond marqueur translucide)
   Ces variables passent wp_kses_post (propriétés custom autorisées). Le rendu
   de chaque variante est porté ici, pas en inline — pour que dégradé et
   border-image ne soient pas filtrés à l'affichage.                           */
.modulo-inline-highlight {
    color: inherit;
    background: transparent;                 /* neutralise le jaune par défaut de <mark> */
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Marqueur — fond translucide léger */
.modulo-inline-highlight.modulo-hl--marker {
    background: var(--mst-hl-bg, color-mix(in srgb, var(--mb-c-accent) 30%, transparent));
    padding: 0.05em 0.2em;
    border-radius: 3px;
}

/* Fond plein — fond opaque, texte blanc */
.modulo-inline-highlight.modulo-hl--bg {
    background: var(--mst-hl-color, var(--mb-c-accent));
    color: var(--mb-c-on-accent);
    padding: 0.1em 0.4em;
    border-radius: 4px;
}

/* Soulignement épais */
.modulo-inline-highlight.modulo-hl--underline {
    background: transparent;
    border-bottom: 4px solid var(--mst-hl-color, var(--mb-c-accent));
    padding-bottom: 1px;
}

/* Soulignement dégradé */
.modulo-inline-highlight.modulo-hl--gradient {
    background: transparent;
    border-bottom: 3px solid transparent;
    border-image: linear-gradient( 90deg, var(--mst-hl-color, var(--mb-c-accent)), transparent ) 1;
    padding-bottom: 1px;
}

/* Couleur de texte seule */
.modulo-inline-highlight.modulo-hl--text {
    background: transparent;
    color: var(--mst-hl-color, var(--mb-c-accent));
}