/*
 * Animations communes au site public et à l'administration.
 * Toutes les animations de mouvement sont désactivées si l'utilisateur
 * a demandé à réduire les animations dans son système (voir en bas du fichier).
 */

:root {
  --anim-rapide: 180ms;
  --anim-normale: 350ms;
  --anim-lente: 600ms;
  --anim-courbe: cubic-bezier(0.22, 1, 0.36, 1);
  --notif-duree: 6s;
}

/* ---------- Apparition de la page ---------- */

@keyframes apparition-haut {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes fondu {
  from { opacity: 0; }
  to { opacity: 1; }
}

#affiche {
  animation: fondu var(--anim-lente) ease-out both;
}

.main-container .columns {
  animation: apparition-haut var(--anim-lente) var(--anim-courbe) 150ms both;
}

.footer {
  animation: fondu var(--anim-lente) ease-out 300ms both;
}

.container > .section {
  animation: apparition-haut var(--anim-normale) var(--anim-courbe) both;
}

/* ---------- Notifications (toasts) ---------- */

@keyframes notif-entree {
  from {
    opacity: 0;
    transform: translateY(-120%) scale(0.96);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes notif-sortie {
  from {
    opacity: 1;
    transform: none;
  }
  to {
    opacity: 0;
    transform: translateY(-40%) scale(0.96);
  }
}

@keyframes notif-progression {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

.notification {
  position: fixed;
  top: 1rem;
  left: 50%;
  z-index: 100;
  width: min(32rem, calc(100% - 2rem));
  margin: 0 !important;
  translate: -50% 0;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  animation: notif-entree var(--anim-normale) var(--anim-courbe) both;
}

/* Barre qui se vide pendant l'affichage ; survoler la notification la met en pause */
.notification-progression {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: currentColor;
  opacity: 0.45;
  transform-origin: left;
  animation: notif-progression var(--notif-duree) linear forwards;
}

.notification:hover .notification-progression {
  animation-play-state: paused;
}

.notification.is-leaving {
  animation: notif-sortie var(--anim-rapide) ease-in forwards;
  pointer-events: none;
}

/* ---------- Bloc repliable (formulaire accompagnant) ---------- */

.repliable {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transform: translateY(-6px);
  transition:
    grid-template-rows var(--anim-normale) var(--anim-courbe),
    opacity var(--anim-normale) ease,
    transform var(--anim-normale) var(--anim-courbe);
}

.repliable > .repliable-contenu {
  min-height: 0;
  overflow: hidden;
}

.repliable.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  transform: none;
}

/* ---------- Boutons et champs ---------- */

.button {
  transition:
    transform var(--anim-rapide) ease,
    box-shadow var(--anim-rapide) ease,
    background-color var(--anim-rapide) ease,
    border-color var(--anim-rapide) ease;
}

.button:not([disabled]):not(.is-loading):hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}

.button:not([disabled]):not(.is-loading):active {
  transform: translateY(0);
  box-shadow: none;
}

.input,
.select select {
  transition:
    border-color var(--anim-rapide) ease,
    box-shadow var(--anim-rapide) ease;
}

/* ---------- Réduction des animations ---------- */

@media (prefers-reduced-motion: reduce) {
  #affiche,
  .main-container .columns,
  .footer,
  .container > .section,
  .notification,
  .notification.is-leaving {
    animation: none;
  }

  .repliable,
  .button,
  .input,
  .select select {
    transition: none;
  }

  .repliable,
  .button:not([disabled]):not(.is-loading):hover {
    transform: none;
  }
}