/* Bulles d'aide contextuelle (survol/focus clavier) — cf. wwwroot/Scripts/InfoBulles.js
   et InfoBullesTagHelper (attribut infobulle-id="INFn"). Fond noir, texte blanc, forme
   "bulle de BD" avec une pointe triangulaire orientee vers l'element survole. */
.has-infobulle {
    cursor: pointer;
}

.infobulle-popup {
    display: none;
    position: absolute;
    z-index: 3000;
    max-width: 280px;
    background: #000;
    color: #fff;
    padding: 8px 12px;
    border-radius: 6px;
    font-size: .82rem;
    line-height: 1.35;
    box-shadow: 0 4px 14px rgba(0,0,0,.3);
    pointer-events: none;
}

/* Mode sombre : bord orange, comme la plupart des div (--FactoBoxBorderColor). */
[data-theme="dark"] .infobulle-popup {
    border: 1px solid var(--FactoBoxBorderColor, #d47a04);
}

/* Icone info-circle-fill.svg, blanche en dur (theme clair ET sombre, fond de bulle toujours
   noir) — inline, suivie directement du texte (pas de <span> autour) : integree au meme
   paragraphe pour qu'une ligne qui deborde reprenne a gauche du conteneur, sous l'icone,
   au lieu de flotter/s'indenter a cote d'elle. */
.infobulle-icon {
    width: 14px;
    height: 14px;
    display: inline-block;
    vertical-align: text-bottom;
    margin-right: 6px;
}

/* .infobulle-arrow n'est qu'un point d'ancrage (0x0, positionne par JS en left/transform) ;
   la pointe elle-meme est dessinee par ::after (remplissage noir, toujours visible) et,
   en mode sombre, par ::before (liseret orange 1px plus grand, peint derriere ::after —
   ordre de peinture des pseudo-elements avant/apres — pour simuler un bord assorti a la bulle). */
.infobulle-arrow {
    position: absolute;
    width: 0;
    height: 0;
}

.infobulle-popup.infobulle-above .infobulle-arrow {
    bottom: -6px;
}

.infobulle-popup.infobulle-below .infobulle-arrow {
    top: -6px;
}

.infobulle-arrow::after {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
}

.infobulle-popup.infobulle-above .infobulle-arrow::after {
    bottom: 0;
    border-top: 7px solid #000;
}

.infobulle-popup.infobulle-below .infobulle-arrow::after {
    top: 0;
    border-bottom: 7px solid #000;
}

/* Mode sombre : liseret orange sur la pointe, assorti au bord de la bulle. */
[data-theme="dark"] .infobulle-arrow::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
}

[data-theme="dark"] .infobulle-popup.infobulle-above .infobulle-arrow::before {
    bottom: -1px;
    border-top: 8px solid var(--FactoBoxBorderColor, #d47a04);
}

[data-theme="dark"] .infobulle-popup.infobulle-below .infobulle-arrow::before {
    top: -1px;
    border-bottom: 8px solid var(--FactoBoxBorderColor, #d47a04);
}