/* Styles personnalisés — complète Tailwind (voir js/tailwind-theme.js) */

.grain {
  background-image: radial-gradient(rgba(29, 36, 32, .035) 1px, transparent 1px);
  background-size: 22px 22px;
}

.reveal {
  opacity: 0;
  animation: rise .55s cubic-bezier(.2, .7, .2, 1) both;
}

@keyframes rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Une fois l'entrée terminée, on coupe l'animation pour libérer le `transform`
   et laisser les effets :hover (scale / translate) s'appliquer. */
.reveal.done {
  animation: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  .reveal { animation: none; opacity: 1; transform: none; }
}

.view { display: none; }
.view.active { display: block; }

.card-shadow {
  box-shadow: 0 1px 0 rgba(29, 36, 32, .04), 0 18px 40px -28px rgba(29, 36, 32, .35);
}

/* Icône calculatrice en masque CSS — colorable via background-color (suit le thème).
   currentColor reprend la couleur de texte de l'élément (moss au repos, primary au hover). */
.calc-mask {
  background-color: currentColor;
  -webkit-mask: url("../svg/calculator.svg") center / contain no-repeat;
          mask: url("../svg/calculator.svg") center / contain no-repeat;
}

.arrow-mask {
  background-color: currentColor;
  -webkit-mask: url("../svg/arrow.svg") center / contain no-repeat;
          mask: url("../svg/arrow.svg") center / contain no-repeat;
}

.arrow-right-mask {
  background-color: currentColor;
  -webkit-mask: url("../svg/arrow_right.svg") center / contain no-repeat;
          mask: url("../svg/arrow_right.svg") center / contain no-repeat;
}

.arrow-left-mask {
  background-color: currentColor;
  -webkit-mask: url("../svg/arrow_left.svg") center / contain no-repeat;
          mask: url("../svg/arrow_left.svg") center / contain no-repeat;
}