/*
 * CALM : bouton « retour en haut »
 * Apparait apres defilement, palette officielle SCBC.
 * #1180DB bleu vif, #3D436B bleu-gris, #A6ADD1 lavande
 */

.calm-haut {
  position: fixed !important;
  right: 1.6rem !important;
  bottom: 1.6rem !important;
  z-index: 900 !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  width: 52px !important;
  height: 52px !important;
  padding: 0 !important;
  margin: 0 !important;

  background: #1180DB !important;
  color: #fff !important;
  border: 2px solid rgba(255, 255, 255, .28) !important;
  border-radius: 50% !important;
  cursor: pointer !important;

  box-shadow: 0 8px 24px rgba(9, 11, 22, .28), 0 0 0 0 rgba(17, 128, 219, .5) !important;

  opacity: 0;
  visibility: hidden;
  transform: translateY(14px);
  transition: opacity .25s ease, transform .25s ease, background .2s ease, box-shadow .2s ease, visibility .25s !important;
}

.calm-haut.calm-haut-visible {
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateY(0) !important;
}

.calm-haut:hover,
.calm-haut:focus {
  background: #3D436B !important;
  border-color: #A6ADD1 !important;
  box-shadow: 0 10px 28px rgba(61, 67, 107, .42) !important;
  outline: none !important;
}

.calm-haut:focus-visible {
  box-shadow: 0 0 0 3px rgba(166, 173, 209, .75), 0 10px 28px rgba(61, 67, 107, .42) !important;
}

.calm-haut:active {
  transform: translateY(1px) !important;
}

.calm-haut svg {
  display: block !important;
  width: 22px !important;
  height: 22px !important;
  fill: none !important;
  stroke: #fff !important;
  stroke-width: 2.4 !important;
  stroke-linecap: round !important;
  stroke-linejoin: round !important;
  pointer-events: none;
}

/* Anneau de progression du defilement */
.calm-haut-anneau {
  position: absolute !important;
  inset: -2px !important;
  width: calc(100% + 4px) !important;
  height: calc(100% + 4px) !important;
  transform: rotate(-90deg) !important;
  pointer-events: none !important;
}

.calm-haut-anneau circle {
  fill: none !important;
  stroke: #A6ADD1 !important;
  stroke-width: 2.5 !important;
  stroke-linecap: round !important;
  transition: stroke-dashoffset .1s linear !important;
}

@media (max-width: 820px) {
  .calm-haut {
    width: 46px !important;
    height: 46px !important;
    right: 1rem !important;
    bottom: 1rem !important;
  }
  .calm-haut svg { width: 19px !important; height: 19px !important; }
}

@media print {
  .calm-haut { display: none !important; }
}