/*
 * Mots mis en valeur (Phrase enrichie, `Text_Marks`) : couleur et décors d'un `<span class="atgf-mark">`.
 * Front et admin (champ classique, fenêtre Placement). Maquette : .claude/etude-idees-10-05/maquette-phrase.html.
 *
 *   .atgf-mark--c                    couleur du texte (--atgf-mark-c, posée au rendu)
 *   .atgf-deco--<sorte>-<forme>      décor ; couleur --atgf-deco-c (posée au rendu), sinon la couleur de marque
 *   .atgf-deco--draw                 se trace à l'entrée dans l'écran (is-drawn, posé par atgf-fx.js)
 */

.atgf-mark--c {
    color: var(--atgf-mark-c);
}

.atgf-deco {
    position: relative;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* --- Surligneur ----------------------------------------------------------- */
.atgf-deco--marker-plein,
.atgf-deco--marker-demi,
.atgf-deco--marker-feutre {
    --atgf-deco-k: var(--atgf-deco-c, color-mix(in srgb, var(--atb-primary, #0099dd) 30%, transparent));
    background-image: linear-gradient(var(--atgf-deco-k), var(--atgf-deco-k));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 100%;
    padding: 0 .12em;
    margin: 0 -.12em;
}

.atgf-deco--marker-demi {
    background-size: 100% 40%;
    background-position: 0 88%;
}

.atgf-deco--marker-feutre {
    background-size: 100% 70%;
    background-position: 0 70%;
    border-radius: .55em .2em .7em .25em;
}

/* --- Soulignement --------------------------------------------------------- */
.atgf-deco--under-droit,
.atgf-deco--under-onde {
    text-decoration-line: underline;
    text-decoration-color: var(--atgf-deco-c, var(--atb-primary, #0099dd));
    text-decoration-thickness: .1em;
    text-underline-offset: .14em;
}

.atgf-deco--under-onde {
    text-decoration-style: wavy;
    text-decoration-thickness: .06em;
    text-underline-offset: .2em;
}

.atgf-deco--under-main::after,
.atgf-deco--outline-cercle::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: var(--atgf-deco-c, var(--atb-primary, #0099dd));
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

.atgf-deco--under-main::after {
    left: -2%;
    right: -2%;
    bottom: -.2em;
    height: .3em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 45 3, 95 4, 140 6 S 185 9, 197 4' stroke='black' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9 C 45 3, 95 4, 140 6 S 185 9, 197 4' stroke='black' stroke-width='3.4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Fond ----------------------------------------------------------------- */
.atgf-deco--bg-doux,
.atgf-deco--bg-plein {
    padding: .02em .28em;
    margin: 0 -.06em;
    border-radius: .22em;
}

.atgf-deco--bg-doux {
    background-color: color-mix(in srgb, var(--atgf-deco-c, var(--atb-primary, #0099dd)) 20%, transparent);
}

.atgf-deco--bg-plein {
    background-color: var(--atgf-deco-c, var(--atb-primary, #0099dd));
    color: #fff;
}

/* --- Contour -------------------------------------------------------------- */
.atgf-deco--outline-cadre {
    box-shadow: inset 0 0 0 .07em var(--atgf-deco-c, var(--atb-primary, #0099dd));
    padding: 0 .22em;
    border-radius: .18em;
}

.atgf-deco--outline-cercle::after {
    left: -.35em;
    right: -.35em;
    top: -.22em;
    bottom: -.28em;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M58 6 C 120 0, 194 8, 197 30 C 200 52, 120 58, 70 56 C 20 54, 2 44, 4 30 C 6 14, 40 7, 92 5' stroke='black' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 60' preserveAspectRatio='none'%3E%3Cpath d='M58 6 C 120 0, 194 8, 197 30 C 200 52, 120 58, 70 56 C 20 54, 2 44, 4 30 C 6 14, 40 7, 92 5' stroke='black' stroke-width='2.6' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* --- Tracé à l'apparition ---------------------------------------------------
   Seulement si le moteur est là (html.atgf-js) : sans JS, le décor est montré tout de suite. */
.atgf-deco--draw {
    transition: background-size .9s cubic-bezier(.2, .8, .2, 1), background-color .6s ease, box-shadow .7s ease, text-decoration-color .8s ease;
}

.atgf-deco--draw::after {
    transition: clip-path .8s cubic-bezier(.2, .8, .2, 1);
}

html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--marker-plein {
    background-size: 0% 100%;
}

html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--marker-demi {
    background-size: 0% 40%;
}

html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--marker-feutre {
    background-size: 0% 70%;
}

html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--under-droit,
html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--under-onde {
    text-decoration-color: transparent;
}

html.atgf-js .atgf-deco--draw:not(.is-drawn)::after {
    clip-path: inset(0 100% 0 0);
}

html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--bg-doux,
html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--bg-plein {
    background-color: transparent;
}

html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--bg-plein {
    color: inherit;
}

html.atgf-js .atgf-deco--draw:not(.is-drawn).atgf-deco--outline-cadre {
    box-shadow: inset 0 0 0 .07em transparent;
}

@media (prefers-reduced-motion: reduce) {
    .atgf-deco--draw,
    .atgf-deco--draw::after {
        transition: none;
    }
}