/* bp1322 — POINTS D'AIDE « i » : APPARENCE ET ZONE TACTILE.
 *
 * CONSTAT MV : « la zone cliquable est tres limitee ».
 * Le point mesurait 1,1rem, soit 18 px. La taille recommandee pour une cible tactile est de
 * 44 px : elle etait 150 % trop petite, et un doigt n'a pas la precision d'un pointeur.
 *
 * LA ZONE EST ETENDUE SANS GROSSIR LE POINT : un pseudo-element invisible et centre porte la
 * cible a 44 px. Il est en `position:absolute`, donc IL NE PREND AUCUNE PLACE dans la mise en
 * page — le point reste discret a cote de son bouton, mais devient facile a atteindre.
 * C'est la raison d'etre de ce fichier : la meme chose en style « inline » etait impossible,
 * un pseudo-element ne s'ecrit pas dans un attribut `style`.
 */

.help-i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;              /* ancre du pseudo-element ci-dessous */
    width: 1.15rem;
    height: 1.15rem;
    min-width: 1.15rem;
    margin-left: .3rem;
    padding: 0;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    font-size: .7rem;
    font-style: italic;
    font-weight: 600;
    line-height: 1;
    opacity: .6;
    vertical-align: middle;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* LA ZONE TACTILE : 44 px, invisible, SANS EFFET SUR LA MISE EN PAGE.
   Sans elle, il fallait viser 18 px au doigt — d'ou les appuis repetes signales par MV. */
.help-i::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2.75rem;
    height: 2.75rem;
}

.help-i:hover,
.help-i:focus-visible {
    opacity: 1;
    outline: none;
}

/* Le point doit rester lisible sur un fond colore (chips, boutons pleins). */
.btn-secondary .help-i,
.btn-primary .help-i,
.btn-danger .help-i { color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════════
   bp1324 (proposition MV) — SOURIS PRESENTE ? ALORS LE SURVOL SUFFIT.
   « Peux-tu determiner s'il y a une souris ou non, et ainsi passer du mode passage
   souris au mode point i ? »

   OUI — ET C'EST DEJA CE QUE FAISAIT bp1318, QUI N'A JAMAIS RIEN AFFICHE.
   La detection n'etait pas fausse : c'est LE SENS DU DEFAUT qui l'etait.
      bp1318 : par defaut AUCUN point ; on en ajoutait SI la detection disait « tactile ».
               Detection en echec = AUCUNE information sur telephone.
      bp1324 : par defaut LE POINT EST LA ; on le RETIRE si une souris est detectee.
               Detection en echec = un petit « i » de trop sur ordinateur.
   Le premier cas prive le client de l'information, le second ajoute une redondance
   discrete. C'EST TOUTE LA DIFFERENCE, et elle tient dans le sens de la regle.

   `(hover: hover) and (pointer: fine)` = un pointeur PRECIS capable de survoler, donc une
   souris ou un pavé tactile. Sur ces appareils, le `title` natif s'affiche au survol : le
   point ferait doublon.
   AUCUN JS N'EST NECESSAIRE ICI : si le navigateur ne connait pas ces media queries, la
   regle ne s'applique pas et le point reste — le repli est le mode sur.
   ══════════════════════════════════════════════════════════════════════════════ */
@media (hover: hover) and (pointer: fine) {
    .help-i { display: none; }
}

/* UN APPAREIL HYBRIDE (ordinateur portable tactile) annonce une souris mais peut etre
   utilise au doigt. Des que le JS constate un vrai appui, il pose cette classe et les points
   reviennent — l'ecran s'adapte a l'usage REEL, pas a ce que l'appareil declare. */
html.elsanor-touch-used .help-i { display: inline-flex; }