/* ==================================================================
   Money tooltips for Solo
   Marquer un montant dans un article par l'un de ces moyens :
     1. Outil de lien natif :  #money:≈ 95 CHF
     2. Shortcode :            ((100 €|≈ 95 CHF))
     3. HTML :                 <span data-money="≈ 95 CHF">100 €</span>
   ================================================================== */

/* Le montant — soulignement pointillé doré discret, sans pastille.
   Pour distinguer subtilement du "?" de définition : ici, intuition
   éditoriale d'une note de bas-de-page. */
/* Soulignement pointillé doré, position de lien classique (à la base
   des caractères). Pas de fond, pas de pastille — juste un underline
   discret, dans le ton "note de bas-de-page". */
.kmoney {
    position: relative;
    cursor: help;
    color: inherit;
    text-decoration: underline;
    text-decoration-style: dotted;
    text-decoration-color: rgba(160, 110, 0, 0.7);
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    -webkit-text-decoration-style: dotted;
    -webkit-text-decoration-color: rgba(160, 110, 0, 0.7);
    transition: text-decoration-color 0.18s ease;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.kmoney.tip-open {
    text-decoration-color: rgba(160, 110, 0, 1);
    -webkit-text-decoration-color: rgba(160, 110, 0, 1);
}
@media (hover: hover) {
    .kmoney:hover {
        text-decoration-color: rgba(160, 110, 0, 1);
        -webkit-text-decoration-color: rgba(160, 110, 0, 1);
    }
}

.kmoney:focus-visible {
    outline: 3px solid var(--ghost-accent-color, #232323);
    outline-offset: 4px;
    border-radius: 3px;
}

/* ──────────────────────────────────────────────────────────────────
   La bulle — sombre profond avec verre dépoli, ombre douce
   multi-couche, micro-animation scale pour donner du relief.
   ────────────────────────────────────────────────────────────────── */
.kmoney-pop {
    position: absolute;
    bottom: calc(100% + 12px);
    left: 50%;
    transform: translateX(-50%) translateY(6px) scale(0.94);
    transform-origin: 50% calc(100% + 6px);

    background: rgba(20, 20, 22, 0.94);
    -webkit-backdrop-filter: saturate(140%) blur(10px);
            backdrop-filter: saturate(140%) blur(10px);
    color: rgba(255, 255, 255, 0.95);

    padding: 12px 18px;
    border-radius: 11px;

    font-size: 17px;
    font-weight: 500;
    font-style: normal;
    font-variant-numeric: tabular-nums;
    line-height: 1.35;
    letter-spacing: 0.005em;
    text-align: center;
    white-space: nowrap;
    max-width: 280px;
    z-index: 1000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    /* Ombres en couches : une proche pour la définition du bord,
       une plus large pour la profondeur, un highlight intérieur
       fin pour rappeler le verre. */
    box-shadow:
        0 1px 1px rgba(0, 0, 0, 0.22),
        0 6px 16px rgba(0, 0, 0, 0.18),
        0 18px 42px rgba(0, 0, 0, 0.22),
        inset 0 0 0 1px rgba(255, 255, 255, 0.06);

    transition:
        opacity 0.18s ease,
        visibility 0.18s ease,
        transform 0.24s cubic-bezier(0.22, 1, 0.36, 1);
}

/* La pointe — petit triangle fin sous la bulle, pointant vers le mot.
   On accompagne d'un drop-shadow pour qu'elle hérite naturellement
   de la même profondeur que la bulle. */
.kmoney-pop::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -6px;
    border: 6px solid transparent;
    border-top-color: rgba(20, 20, 22, 0.94);
    width: 0;
    height: 0;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.12));
}

/* Auteur a écrit du texte long → on autorise le retour à la ligne. */
.kmoney-pop.kmoney-pop-wrap {
    white-space: normal;
}

/* Conversion en attente du fetch (placeholder "≈ …") */
.kmoney-pop.kmoney-pending {
    color: rgba(255, 255, 255, 0.55);
    font-style: italic;
}

/* Message d'erreur visible quand la conversion échoue (API KO,
   devise non couverte, parsing impossible) — pour qu'au survol
   l'auteur sache que quelque chose cloche, plutôt que rien. */
.kmoney-pop.kmoney-error {
    background: rgba(140, 30, 30, 0.94);
    color: rgba(255, 235, 235, 0.96);
}
.kmoney-pop.kmoney-error::after {
    border-top-color: rgba(140, 30, 30, 0.94);
}
.kmoney-pop.kmoney-error.kmoney-pop-below::after {
    border-top-color: transparent;
    border-bottom-color: rgba(140, 30, 30, 0.94);
}

/* États ouverts. */
.kmoney.tip-open .kmoney-pop {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0) scale(1);
    pointer-events: auto;
}
@media (hover: hover) {
    .kmoney:hover .kmoney-pop,
    .kmoney:focus-within .kmoney-pop {
        opacity: 1;
        visibility: visible;
        transform: translateX(-50%) translateY(0) scale(1);
        pointer-events: auto;
    }

    /* Pendant qu'on scroll, on désactive les pointer-events sur .kmoney
       → le navigateur retire l'état :hover des éléments, la bulle se
       referme proprement. Quand la classe est retirée, pointer-events
       redevient `auto` et le hover est ré-évalué dès qu'on bouge la
       souris (transition à l'opacité normale, pas de !important qui
       perturberait le cycle). Scopé à @media(hover:hover) → aucun
       impact sur les clics tactiles. */
    body.kmoney-scrolling .kmoney {
        pointer-events: none;
    }
}

/* Variantes de positionnement (JS pose la classe quand la bulle
   risquerait de déborder de l'écran). */
.kmoney-pop.kmoney-pop-left {
    left: 0;
    transform: translateX(0) translateY(6px) scale(0.94);
    transform-origin: 18px calc(100% + 6px);
}
.kmoney.tip-open .kmoney-pop.kmoney-pop-left,
.kmoney:hover .kmoney-pop.kmoney-pop-left,
.kmoney:focus-within .kmoney-pop.kmoney-pop-left {
    transform: translateX(0) translateY(0) scale(1);
}
.kmoney-pop.kmoney-pop-left::after {
    left: 18px;
    margin-left: 0;
}

.kmoney-pop.kmoney-pop-right {
    left: auto;
    right: 0;
    transform: translateX(0) translateY(6px) scale(0.94);
    transform-origin: calc(100% - 18px) calc(100% + 6px);
}
.kmoney.tip-open .kmoney-pop.kmoney-pop-right,
.kmoney:hover .kmoney-pop.kmoney-pop-right,
.kmoney:focus-within .kmoney-pop.kmoney-pop-right {
    transform: translateX(0) translateY(0) scale(1);
}
.kmoney-pop.kmoney-pop-right::after {
    left: auto;
    right: 18px;
    margin-left: 0;
}

.kmoney-pop.kmoney-pop-below {
    bottom: auto;
    top: calc(100% + 12px);
    transform-origin: 50% -6px;
}
.kmoney-pop.kmoney-pop-below.kmoney-pop-left { transform-origin: 18px -6px; }
.kmoney-pop.kmoney-pop-below.kmoney-pop-right { transform-origin: calc(100% - 18px) -6px; }
.kmoney-pop.kmoney-pop-below::after {
    top: auto;
    bottom: 100%;
    border-top-color: transparent;
    border-bottom-color: rgba(20, 20, 22, 0.94);
}

@media (prefers-reduced-motion: reduce) {
    .kmoney-pop {
        transition: opacity 0.12s ease, visibility 0.12s ease;
        transform: translateX(-50%) translateY(0) scale(1) !important;
    }
    .kmoney-pop.kmoney-pop-left,
    .kmoney-pop.kmoney-pop-right {
        transform: translateX(0) translateY(0) scale(1) !important;
    }
}