/* ======================================================================== Infobulle d'aide — composant partagé oPaddock Préfixe : opd-tip- ------------------------------------------------------------------------ POURQUOI UN COMPOSANT, ET PAS UN `title=""`. L'attribut natif ne s'affiche QUE sur un survol à la souris : au doigt, il n'existe pas. Or la première question d'un cavalier qui réserve depuis son téléphone est justement « ça veut dire quoi, sur acceptation du gérant ? ». Une explication invisible sur mobile n'explique rien. Il ne restait rien à réutiliser : `eqm-callout` est un BANDEAU (il occupe la largeur, il ne se déclenche pas), et l'infobulle de facture d'Equimondo (§19octies) est réservée aux listes de factures, PC uniquement, et son propre commentaire l'exclut d'oPaddock. D'où ce composant (CLAUDE.md §00a puis §17 : un pattern neuf du design system se crée en composant partagé). PORTAIL VERS . La bulle est déplacée hors de son parent et posée en `position: fixed`. Sans cela, elle serait rognée par le premier ancêtre qui défile ou qui coupe — et son premier lieu d'usage est précisément l'intérieur d'un modal. C'est déjà la solution retenue par le sélecteur de pays téléphonique de la même page. ======================================================================== */ /* ── Le déclencheur ─────────────────────────────────────────────────────── */ .opd-tip-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; padding: 0; border: none; border-radius: 999px; background: rgba(var(--primary-rgb), .12); color: var(--primary-dark); font-size: 12px; line-height: 1; cursor: pointer; flex-shrink: 0; vertical-align: middle; transition: background .18s ease, transform .18s ease, box-shadow .18s ease; } /* La CIBLE TACTILE fait 44 px (§17), sans que la pastille en fasse autant : un rond de 44 px à côté d'une ligne de 12 px écraserait la mise en page. */ .opd-tip-btn::before { content: ''; position: absolute; top: 50%; left: 50%; width: 44px; height: 44px; transform: translate(-50%, -50%); } .opd-tip-btn:hover, .opd-tip-btn.est-ouvert { background: rgba(var(--primary-rgb), .22); transform: scale(1.08); } .opd-tip-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(var(--primary-rgb), .28); } /* ── La bulle ───────────────────────────────────────────────────────────── */ .opd-tip-bulle { position: fixed; z-index: 4000; /* au-dessus des modals oPaddock */ max-width: 300px; padding: 13px 15px; border-radius: 16px; background: #fff; border: 1.5px solid rgba(var(--primary-rgb), .18); box-shadow: 0 14px 38px rgba(15, 23, 42, .16), 0 2px 6px rgba(15, 23, 42, .06); font-size: 13px; line-height: 1.55; color: var(--slate-700, #334155); opacity: 0; visibility: hidden; transform: translateY(6px) scale(.97); transition: opacity .17s ease, transform .17s ease, visibility .17s; pointer-events: none; } .opd-tip-bulle.est-ouvert { opacity: 1; visibility: visible; transform: translateY(0) scale(1); pointer-events: auto; } .opd-tip-bulle-titre { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; font-size: 13.5px; font-weight: 700; color: var(--slate-900, #0f172a); } .opd-tip-bulle-titre i { color: var(--primary); font-size: 15px; } /* La flèche : un carré pivoté, dont seules les deux faces visibles portent la bordure. Sa position horizontale est posée par le JS (--fleche), pour qu'elle vise le déclencheur même quand la bulle a été recalée contre un bord. */ .opd-tip-bulle::after { content: ''; position: absolute; left: var(--fleche, 50%); width: 11px; height: 11px; margin-left: -5.5px; background: #fff; transform: rotate(45deg); } .opd-tip-bulle.est-dessus::after { bottom: -6.5px; border-right: 1.5px solid rgba(var(--primary-rgb), .18); border-bottom: 1.5px solid rgba(var(--primary-rgb), .18); } .opd-tip-bulle.est-dessous::after { top: -6.5px; border-left: 1.5px solid rgba(var(--primary-rgb), .18); border-top: 1.5px solid rgba(var(--primary-rgb), .18); } @media (prefers-reduced-motion: reduce) { .opd-tip-btn, .opd-tip-bulle { transition: none; } .opd-tip-btn:hover, .opd-tip-btn.est-ouvert { transform: none; } .opd-tip-bulle.est-ouvert { transform: none; } }