/* =============================================================================
   Calculateur TJM — résidu de CSS custom.

   Le balisage (layouts/partials/tjm-calc/partial.html) utilise directement les
   classes Bootstrap 5 du thème "block" (cards, boutons, grille row/col,
   formulaires) déjà chargées sur les pages type: block, avec les couleurs de
   marque Gryzzly appliquées aux variables --bs-*. Il ne reste donc à couvrir
   ici que ce que Bootstrap ne stylise pas nativement :
   - la bulle de tooltip flottante (positionnement absolu)
   - le cadre du <dialog> natif (Bootstrap ne stylise que son propre
     composant .modal, pas l'élément <dialog> du navigateur)
   - le contraste des boutons secondaires du thème (voir ci-dessous)
   ============================================================================= */

/* .btn-outline-secondary du thème a --bs-btn-color: #e2e8f0 (gris clair, la
   couleur de bordure) au repos : illisible sur fond blanc. Les boutons
   secondaires (tout sauf le bouton principal violet) doivent utiliser la
   couleur de texte du corps de page pour leur contenu (texte + icônes). */
.tjm-calc .btn-outline-secondary,
.tjm-calc .btn-link {
  --bs-btn-color: var(--bs-body-color);
}

.tjm-calc__tooltip-bubble {
  position: absolute;
  z-index: 10;
  top: 100%;
  left: 0;
  margin-top: 0.25rem;
  max-width: 22rem;
}

.tjm-calc__dialog {
  width: min(32rem, calc(100vw - 2rem));
  max-height: min(85vh, 48rem);
  padding: 0;
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius-lg);
  box-shadow: var(--bs-box-shadow, 0 0.5rem 1rem rgba(0, 0, 0, 0.15));
}

.tjm-calc__dialog::backdrop {
  background: rgba(0, 0, 0, 0.45);
}