/* ─── Oni Icon — Styles frontend v1.3.0 ──────────────────────────── */

/* ── Reset anti-thème sur tous les niveaux ───────────────────────────
   Le thème peut animer n'importe quel ancêtre (span, div, img...).
   On coupe à tous les niveaux. Les classes .oni-anim-* reactivent
   uniquement sur .oni-icon-mask.
   ──────────────────────────────────────────────────────────────── */
.oni-icon-wrapper,
.oni-icon-wrap,
.oni-icon-mask {
    animation: none !important;
    -webkit-animation: none !important;
    /* Isole le contexte de transform pour ne pas hériter d'un parent animé */
    will-change: auto;
}

.oni-icon-wrapper {
    display: block;
    line-height: 0;
    padding: 4px 0;
    /* Crée un nouveau contexte de rendu, isolé du thème */
    isolation: isolate;
    transform: translateZ(0);
}

.oni-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    transform: translateZ(0);
}

/* Icône colorisée via CSS mask */
.oni-icon-mask {
    display: inline-block;
    mask-repeat: no-repeat;
    mask-size: contain;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    -webkit-mask-position: center;
    vertical-align: middle;
    flex-shrink: 0;
    transform: translateZ(0);
}

/* ── Animations Oni — surchargent le reset avec une spécificité plus haute ── */
.oni-icon-mask.oni-anim-fly    { animation: oni-fly    1.6s ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-spin   { animation: oni-spin   1.2s linear      infinite !important; }
.oni-icon-mask.oni-anim-swing  { animation: oni-swing  1s   ease-in-out infinite !important; transform-origin: top center; }
.oni-icon-mask.oni-anim-pulse  { animation: oni-pulse  1.4s ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-float  { animation: oni-float  2s   ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-bounce { animation: oni-bounce 1s   ease        infinite !important; }
.oni-icon-mask.oni-anim-blink  { animation: oni-blink  1.2s ease-in-out infinite !important; }
.oni-icon-mask.oni-anim-shake  { animation: oni-shake  0.5s ease-in-out infinite !important; }

/* ── Animations ─────────────────────────────────────────────────── */
@keyframes oni-fly    { 0%,100%{transform:translateX(0)}   50%{transform:translateX(10px)} }
@keyframes oni-spin   { from{transform:rotate(0)} to{transform:rotate(360deg)} }
@keyframes oni-swing  { 0%,100%{transform:rotate(-14deg)} 50%{transform:rotate(14deg)} }
@keyframes oni-pulse  { 0%,100%{transform:scale(1)} 50%{transform:scale(1.22)} }
@keyframes oni-float  { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
@keyframes oni-bounce { 0%,100%{transform:translateY(0)} 40%{transform:translateY(-14px)} 60%{transform:translateY(-7px)} }
@keyframes oni-blink  { 0%,100%{opacity:1} 50%{opacity:0.1} }
@keyframes oni-shake  { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-6px)} 75%{transform:translateX(6px)} }



/* ── Tooltip ────────────────────────────────────────────────────── */
.oni-tooltip {
    position: absolute;
    padding: 6px 12px;
    border-radius: 6px;
    font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 3px 10px rgba(0,0,0,.35);
    z-index: 100;
    line-height: 1.5;
    text-align: center;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    /* Par défaut auto (une ligne) — largeur fixe injectée en inline si définie */
    white-space: nowrap;
}

/* Quand une largeur est définie → retour à la ligne */
.oni-tooltip.has-width {
    white-space: normal;
}

/* Flèche */
.oni-tooltip::after {
    content: '';
    position: absolute;
    border: 6px solid transparent;
}

/* ── Positions + état initial ───────────────────────────────────── */
.oni-tooltip--top {
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
}
.oni-tooltip--top::after {
    top: 100%; left: 50%; transform: translateX(-50%);
    border-top-color: var(--oni-tt-bg, #0D1A26);
}

.oni-tooltip--bottom {
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(-6px);
}
.oni-tooltip--bottom::after {
    bottom: 100%; left: 50%; transform: translateX(-50%);
    border-bottom-color: var(--oni-tt-bg, #0D1A26);
}

.oni-tooltip--left {
    right: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(6px);
}
.oni-tooltip--left::after {
    left: 100%; top: 50%; transform: translateY(-50%);
    border-left-color: var(--oni-tt-bg, #0D1A26);
}

.oni-tooltip--right {
    left: calc(100% + 10px);
    top: 50%;
    transform: translateY(-50%) translateX(-6px);
}
.oni-tooltip--right::after {
    right: 100%; top: 50%; transform: translateY(-50%);
    border-right-color: var(--oni-tt-bg, #0D1A26);
}

/* ── Visible au hover ───────────────────────────────────────────── */
.oni-icon-wrap:hover .oni-tooltip--top    { opacity:1; transform: translateX(-50%) translateY(0); }
.oni-icon-wrap:hover .oni-tooltip--bottom { opacity:1; transform: translateX(-50%) translateY(0); }
.oni-icon-wrap:hover .oni-tooltip--left   { opacity:1; transform: translateY(-50%) translateX(0); }
.oni-icon-wrap:hover .oni-tooltip--right  { opacity:1; transform: translateY(-50%) translateX(0); }