/* ==========================================================================
   interactions.css — Micro-interactions tactiles (liste de courses)
   Chargé dynamiquement depuis utils.js. Respecte prefers-reduced-motion.
   Tokens design-system : --primary #047857, --accent #d97706, --success #16a34a
   ========================================================================== */

/* ---------- Press scale générique ---------- */
.tappable:active { transform: scale(.96); }

/* ---------- Ripple (Material) ---------- */
.ripple-host { position: relative; overflow: hidden; }
.ripple-ink {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255, 255, 255, .45);
    pointer-events: none;
    animation: ripple-spread .6s var(--ease-out, ease-out);
}
@keyframes ripple-spread {
    to { transform: scale(2.4); opacity: 0; }
}

/* ---------- Check dessiné quand l'item est coché ---------- */
.course-item .check-svg {
    width: 1.5rem;
    height: 1.5rem;
    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0;
    transform: scale(.4);
    transition: opacity .2s ease, transform .2s var(--ease-out, ease-out);
}
.course-item .check-path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}
.course-item.checked .check-box {
    background: var(--success, #16a34a);
    border-color: var(--success, #16a34a);
}
.course-item.checked .check-svg {
    opacity: 1;
    transform: scale(1);
}
.course-item.checked .check-path {
    animation: check-draw .45s var(--ease-out, ease-out) forwards;
}
@keyframes check-draw {
    to { stroke-dashoffset: 0; }
}

/* ---------- Strike-through du libellé ---------- */
.course-item .item-label { transition: color .3s ease; }
.course-item.checked .item-label {
    text-decoration: line-through;
    color: var(--text-muted, #9ca3af);
}

/* ---------- Swipe-to-delete ---------- */
.swipe-item {
    position: relative;
    overflow: hidden;
    touch-action: pan-y;           /* laisse le scroll vertical au navigateur */
}
.swipe-content {
    position: relative;
    z-index: 1;
    will-change: transform;
    transition: transform .3s var(--ease-out, ease-out);  /* spring-back */
}
.swipe-content.swiping { transition: none; }               /* pas de transition pendant le drag */
.swipe-del {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .45rem;
    padding: 0 1.25rem;
    background: linear-gradient(90deg, #ef4444, #dc2626);
    color: #ffffff;
    font-weight: 600;
    opacity: 0;
    transition: opacity .15s ease;
}
.swipe-item.swipe-armed .swipe-del { opacity: 1; }

/* ---------- Count-up : éviter le jitter de largeur ---------- */
.countup-value { font-variant-numeric: tabular-nums; }

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
    .tappable:active { transform: none; }
    .ripple-ink { animation: none !important; opacity: 0; }
    .course-item .check-svg { transition: none; }
    .course-item.checked .check-path { animation: none !important; stroke-dashoffset: 0; }
    .swipe-content { transition: none; }
    .swipe-del { transition: none; }
}