/* ============================================================================
 * Text-resize controls — boutons flottants A+ / A-
 * Apparence Google 2026 / Material 3 Expressive
 * ========================================================================= */

.text-size-controls {
  position: fixed;
  bottom: 15vh;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: .5rem;
  z-index: 1000;
}

/* Override Bootstrap .btn + ancien CSS. Les deux boutons partagent la même
   forme ; seules les couleurs changent via .btn-primary / .btn-secondary. */
.text-size-controls .btn {
  --ts-size: 48px;
  --ts-radius: 16px;

  width: var(--ts-size);
  height: var(--ts-size);
  min-width: var(--ts-size);
  padding: 0;
  border-radius: var(--ts-radius);
  border: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.01em;
  color: #fff;

  box-shadow:
    0 1px 2px rgba(0, 0, 0, .12),
    0 4px 10px rgba(0, 0, 0, .14);

  cursor: pointer;

  transition:
    box-shadow   .25s cubic-bezier(.2, 0, 0, 1),
    transform    .18s cubic-bezier(.2, 0, 0, 1),
    background-color .25s cubic-bezier(.2, 0, 0, 1),
    filter       .25s cubic-bezier(.2, 0, 0, 1);

  /* Conserve l'emplacement : pas de marge modifiée, pas de translate global */
  will-change: transform, box-shadow;
}

/* Hover : élévation accrue + très léger zoom — n'impacte pas le flux (position:fixed) */
.text-size-controls .btn:hover {
  box-shadow:
    0 2px 4px rgba(0, 0, 0, .14),
    0 10px 24px rgba(0, 0, 0, .20);
  transform: scale(1.06);
  filter: brightness(1.05);
}

/* Active : effet "pressé" (réduction + ombre moindre) */
.text-size-controls .btn:active,
.text-size-controls .btn:focus:active {
  transform: scale(.94);
  box-shadow:
    inset 0 1px 2px rgba(0, 0, 0, .2),
    0 1px 2px rgba(0, 0, 0, .10);
  filter: brightness(.96);
}

/* Focus accessible WCAG 2.2 */
.text-size-controls .btn:focus-visible {
  outline: 0;
  box-shadow:
    0 0 0 3px rgba(217, 139, 36, .45),
    0 4px 10px rgba(0, 0, 0, .14);
}

/* Retire toute bordure blanche héritée de l'ancien CSS */
.text-size-controls .btn,
.text-size-controls .btn:hover,
.text-size-controls .btn:focus,
.text-size-controls .btn:active {
  border: 0;
}

/* État disabled (min/max atteint) : grisé sans impact de position */
.text-size-controls .btn[disabled],
.text-size-controls .btn:disabled {
  opacity: .45;
  cursor: not-allowed;
  filter: grayscale(.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
  transform: none;
}

.text-size-controls .btn[disabled]:hover,
.text-size-controls .btn:disabled:hover {
  transform: none;
  filter: grayscale(.4);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .08);
}

/* Responsive : taille légèrement réduite sur petits écrans */
@media (max-width: 576px) {
  .text-size-controls .btn {
    --ts-size: 42px;
    --ts-radius: 14px;
    font-size: 14px;
  }
}

/* Respect prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .text-size-controls .btn,
  .text-size-controls .btn:hover,
  .text-size-controls .btn:active {
    transition: none;
    transform: none;
  }
}