/* ============================================================
   Kelmo — kit de micro-interactions
   CSS pur, aucune dépendance. À charger une fois dans l'app.
   Tokens : durées + courbes partagées par les 5 blocs.
   ============================================================ */

:root {
  --k-fast: 90ms;
  --k-quick: 160ms;
  --k-base: 220ms;
  --k-slow: 320ms;

  --k-out: cubic-bezier(.2, .8, .25, 1);      /* entrées */
  --k-in: cubic-bezier(.4, 0, 1, 1);          /* sorties */
  --k-inout: cubic-bezier(.4, 0, .2, 1);      /* déplacements */
  --k-spring: cubic-bezier(.34, 1.56, .64, 1);/* confirmations */

  --k-green: #0b5c47;
  --k-green-dark: #0a4f3d;
  --k-ink: #17211d;
  --k-paper: #f5f6f4;
}

/* ------------------------------------------------------------
   01 · Feedback au clic / tap
   Poser .k-press sur TOUT élément cliquable.
   ------------------------------------------------------------ */
.k-press {
  transition: transform var(--k-fast) var(--k-inout);
  will-change: transform;
}
.k-press:active { transform: scale(.96); }
.k-press.is-released { animation: k-pop 260ms var(--k-spring); }

@keyframes k-pop {
  0%   { transform: scale(.96); }
  45%  { transform: scale(1.02); }
  100% { transform: scale(1); }
}

/* ------------------------------------------------------------
   02 · Bouton à trois états (repos → en cours → réussi)
   Les 3 libellés partagent la même cellule de grille :
   la largeur du bouton = celle du libellé le plus long, et
   ne change jamais pendant la séquence.
   ------------------------------------------------------------ */
.k-btn3 {
  display: grid;
  place-items: center;
  transition: background var(--k-base) var(--k-inout);
}
.k-btn3 > span {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: opacity 140ms ease, transform 180ms var(--k-out);
}
.k-btn3 > span[aria-hidden="true"] {
  opacity: 0;
  transform: scale(.96);
  pointer-events: none;
}
.k-btn3[data-state="done"] { background: var(--k-green-dark); }

.k-spin { animation: k-spin 700ms linear infinite; }
@keyframes k-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------
   03 · Toast de confirmation
   Un seul <div class="k-toasts"></div> à la fin du <body>.
   ------------------------------------------------------------ */
.k-toasts {
  position: fixed;
  left: 0; right: 0; bottom: 24px;
  z-index: 60;
  display: flex;
  flex-direction: column-reverse;  /* le plus récent en bas */
  align-items: center;
  gap: 8px;
  pointer-events: none;
  padding: 0 16px;
}
.k-toast {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 11px;
  border-radius: 10px;
  background: var(--k-ink);
  color: var(--k-paper);
  font-size: 13.5px;
  box-shadow: 0 6px 20px rgba(23, 33, 29, .18);
  animation: k-toast-in 240ms var(--k-out) both;
}
.k-toast.is-out { animation: k-toast-out 180ms var(--k-in) both; }

.k-toast__dot {
  flex: none;
  width: 15px; height: 15px;
  border-radius: 50%;
  background: #3f9b7c;
  color: #0b2c22;
  font-size: 9px;
  display: flex; align-items: center; justify-content: center;
}
.k-toast__bar {              /* jauge de temps restant (optionnelle) */
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: rgba(245, 246, 244, .28);
  transform-origin: 0 50%;
}

@keyframes k-toast-in  { from { opacity: 0; transform: translateY(16px) scale(.96); } }
@keyframes k-toast-out { to   { opacity: 0; transform: translateY(8px); } }
@keyframes k-progress  { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ------------------------------------------------------------
   04 · Coche qui se dessine
   Longueur exacte du tracé "M9.5 16.5 L14 21 L22.5 11.5" = 20.
   ------------------------------------------------------------ */
.k-check { color: var(--k-green); display: block; }
.k-check circle {
  transform-origin: 50% 50%;
  animation: k-pop-in 220ms var(--k-spring) both;
}
.k-check path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  animation: k-draw 420ms cubic-bezier(.65, 0, .35, 1) 120ms forwards;
}
.k-check--halo {             /* enveloppe optionnelle autour du disque */
  position: relative;
  display: inline-block;
}
.k-check--halo::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: var(--k-green);
  animation: k-halo 660ms var(--k-out) 240ms forwards;
}
@keyframes k-pop-in { from { transform: scale(.4); opacity: 0; } }
@keyframes k-draw   { to   { stroke-dashoffset: 0; } }
@keyframes k-halo   { from { transform: scale(.9); opacity: .4; } to { transform: scale(2.1); opacity: 0; } }

/* ------------------------------------------------------------
   05 · Changement d'onglet
   Un seul indicateur qui glisse et s'étire — jamais un par onglet.
   ------------------------------------------------------------ */
.k-tabs { position: relative; display: flex; gap: 2px; }
.k-tab {
  height: 40px;
  padding: 0 12px;
  border: 0;
  background: transparent;
  color: #8a908a;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: color var(--k-quick) ease;
}
.k-tab[aria-selected="true"] { color: var(--k-green); }
.k-ink {
  position: absolute;
  left: 0; bottom: -1px;
  height: 2px; width: 0;
  border-radius: 2px;
  background: var(--k-green);
  transition: transform 260ms var(--k-out), width 260ms var(--k-out);
}
.k-panel { animation: k-panel-in 180ms var(--k-out) 80ms both; }
@keyframes k-panel-in { from { opacity: 0; transform: translateY(4px); } }
@keyframes k-fade-in  { from { opacity: 0; transform: translateY(4px); } }

/* ------------------------------------------------------------
   Accessibilité — le changement d'état reste, le mouvement part.
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  .k-press,
  .k-btn3, .k-btn3 > span,
  .k-tab, .k-ink {
    transition: none !important;
  }
  .k-press:active { transform: none; filter: brightness(.96); }
  .k-press.is-released,
  .k-spin,
  .k-check circle, .k-check path,
  .k-check--halo::before,
  .k-toast, .k-toast.is-out,
  .k-panel {
    animation: none !important;
  }
  .k-check path { stroke-dashoffset: 0; }
  .k-toast__bar { display: none; }
}