/* ==========================================================================
   back-to-top.css — Bouton « retour en haut » global
   --------------------------------------------------------------------------
   Carré arrondi (radius DS, esprit app-icon ICyam), Bleu Marine + flèche
   blanche (icône Lucide arrow-up). Fixe en bas à droite, masqué tant qu'on
   n'a pas défilé (classe .is-visible pilotée par main.js). Aligné DS v1.2.
   Aucun style inline (CSP style-src 'self').
   ========================================================================== */

.back-to-top {
  position: fixed;
  right: var(--space-md);
  bottom: var(--space-md);
  z-index: var(--z-fixed);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;

  border: none;
  border-radius: var(--radius-lg); /* coins arrondis, esprit pictogramme ICyam */
  background: var(--color-blue);
  color: var(--color-white);
  box-shadow: var(--shadow-lg);
  cursor: pointer;

  /* Masqué par défaut : révélé par .is-visible après défilement. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--transition), transform var(--transition),
              background var(--transition), visibility var(--transition);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.back-to-top:hover { background: var(--color-blue-light); }

.back-to-top svg {
  width: 24px;
  height: 24px;
}

/* Sur petits écrans : un cran plus proche du bord, cible tactile conservée. */
@media (max-width: 600px) {
  .back-to-top {
    right: var(--space-sm);
    bottom: var(--space-sm);
    width: 44px;
    height: 44px;
  }
}