/**
 * Ajout rapide au panier — cartes produit (grille boutique + accueil)
 * Tokeiwabi
 *
 * Chargé conditionnellement (is_shop / taxonomies produit / front-page / recherche)
 * via functions.php — voir patches/functions.php.patch.
 *
 * Variables : introduites ici, pas encore de système --tk-* site-wide dans le
 * thème réel (les gabarits utilisent des couleurs Tailwind arbitraires en dur,
 * ex. bg-[#2c363f]). Les valeurs reprennent exactement les couleurs déjà
 * utilisées ailleurs dans le thème (anthracite / bronze) pour rester cohérent,
 * + le vert sauge --tk-success validé par jp sur le prototype. Voir
 * NOTES-frontend.md pour la recommandation de consolidation à terme.
 */
:root {
  --tk-qa-anthracite: #2c363f;
  --tk-qa-bronze: #a67c52;
  --tk-qa-bronze-hover: #8f6a44;
  --tk-qa-success: #5c8266; /* validé par jp — même teinte que le prototype */
  --tk-qa-cream: #faf8f5;
  --tk-qa-danger: #b3261e;
}

/* ---------------------------------------------------------------------
 * Bouton d'ajout rapide
 * ------------------------------------------------------------------- */
.tk-qa-btn {
  position: absolute;
  z-index: 20; /* au-dessus du lien de navigation (z-[1]) et des badges (z-10) */
  right: 0.6rem;
  bottom: 0.6rem;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-weight: 600;
  font-family: inherit;
  white-space: nowrap;
  overflow: hidden;
  padding: 0 14px;
  color: #fff;
  background: var(--tk-qa-anthracite);
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  transition:
    opacity .18s ease,
    transform .18s ease,
    width .24s cubic-bezier(.3,.8,.3,1),
    border-radius .24s cubic-bezier(.3,.8,.3,1),
    left .24s ease,
    right .24s ease,
    background-color .15s ease;
}
.tk-qa-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px var(--tk-qa-anthracite);
}
.tk-qa-btn:hover {
  background: var(--tk-qa-bronze);
}
.tk-qa-btn .tk-qa-icon {
  flex: 0 0 auto;
  display: inline-flex;
}
.tk-qa-btn .tk-qa-icon svg {
  display: block;
}
.tk-qa-btn .tk-qa-label {
  font-size: 12.5px;
}
.tk-qa-btn[disabled] {
  cursor: default;
}

/* -- Icône panier / coche / spinner (l'icône interne change selon l'état) -- */
.tk-qa-spinner {
  width: 15px;
  height: 15px;
  border-radius: 50%;
  border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff;
  animation: tk-qa-spin .7s linear infinite;
  flex: 0 0 auto;
}
@keyframes tk-qa-spin {
  to { transform: rotate(360deg); }
}

/* ---------------------------------------------------------------------
 * Mode "survol" — écrans avec souris/trackpad (desktop)
 * Le bouton est masqué par défaut, révélé en pilule au survol de la carte
 * ou au focus clavier (focus-within couvre la navigation au clavier).
 * ------------------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .tk-qa-btn {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.75rem;
    height: 38px;
    border-radius: 999px;
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none; /* réactivé dès que la carte est survolée/focus, ci-dessous */
  }
  .tk-product-card:hover .tk-qa-btn,
  .tk-product-card:focus-within .tk-qa-btn,
  .tk-qa-btn[data-state="loading"],
  .tk-qa-btn[data-state="success"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }
}

/* ---------------------------------------------------------------------
 * Mode "tactile" (par défaut, mobile-first) — pastille ronde toujours
 * visible ; un 1er tap l'arme (elle s'étire en pilule avec le libellé),
 * un 2e tap confirme l'ajout. Évite les ajouts accidentels au scroll.
 * ------------------------------------------------------------------- */
.tk-qa-btn {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  padding: 0;
  box-shadow: 0 3px 10px rgba(44,54,63,.28);
}
.tk-qa-btn .tk-qa-label {
  display: none;
}
.tk-qa-btn[data-state="armed"] {
  left: 0.6rem;
  width: auto;
  border-radius: 999px;
  background: var(--tk-qa-bronze);
}
.tk-qa-btn[data-state="armed"] .tk-qa-label {
  display: inline;
}

@media (hover: hover) and (pointer: fine) {
  /* En mode souris le bouton n'est jamais "armé" (clic = ajout direct) */
  .tk-qa-btn[data-state="armed"] {
    left: 0.75rem;
  }
}

/* ---------------------------------------------------------------------
 * États chargement / succès (communs aux deux modes)
 * ------------------------------------------------------------------- */
.tk-qa-btn[data-state="loading"] {
  width: 38px;
  left: auto;
  border-radius: 50%;
  background: var(--tk-qa-anthracite);
}
.tk-qa-btn[data-state="loading"] .tk-qa-label {
  display: none;
}

.tk-qa-btn[data-state="success"] {
  left: 0.6rem;
  width: auto;
  border-radius: 999px;
  background: var(--tk-qa-success);
}
.tk-qa-btn[data-state="success"] .tk-qa-label {
  display: inline;
}
@media (hover: hover) and (pointer: fine) {
  .tk-qa-btn[data-state="success"] {
    left: 0.75rem;
  }
}

/* ---------------------------------------------------------------------
 * État "vient d'être vendu" (course concurrentielle sur une pièce unique) :
 * le bouton se transforme en indication non interactive le temps que la
 * page se resynchronise avec le serveur (cf. tk-quick-add.js).
 * ------------------------------------------------------------------- */
.tk-qa-btn[data-state="unavailable"] {
  left: 0.6rem;
  width: auto;
  border-radius: 999px;
  background: var(--tk-qa-danger);
  cursor: default;
}
.tk-qa-btn[data-state="unavailable"] .tk-qa-label {
  display: inline;
}
@media (hover: hover) and (pointer: fine) {
  .tk-qa-btn[data-state="unavailable"] {
    left: 0.75rem;
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------------------------------------------------------------------
 * Compteur panier du header (#tk-cart-count) : micro-animation garantie à
 * chaque ajout réussi (pulseCartCount() dans tk-quick-add.js), QUE le
 * tiroir latéral s'ouvre ou non — c'est le seul retour visuel dont on est
 * sûr côté header tant que header-tokei.php n'a pas été vérifié (voir
 * NOTES-frontend.md). Nécessaire notamment si un client enchaîne plusieurs
 * ajouts rapides sans que le tiroir ne se rouvre à chaque fois.
 * ------------------------------------------------------------------- */
.tk-qa-pulse {
  animation: tk-qa-count-pulse .5s ease;
}
@keyframes tk-qa-count-pulse {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---------------------------------------------------------------------
 * Lecteurs d'écran : zone d'annonce visuellement masquée, injectée par le
 * JS (un seul élément partagé pour toute la page).
 * ------------------------------------------------------------------- */
.tk-qa-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
 * prefers-reduced-motion : pas de translation/rotation, transitions coupées.
 * ------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .tk-qa-btn {
    transition: none !important;
    transform: none !important;
  }
  .tk-qa-spinner {
    animation: none !important;
    border-top-color: rgba(255,255,255,.4); /* évite un cercle "figé" trompeur */
    opacity: .85;
  }
  .tk-qa-pulse {
    /* Le texte du compteur change quand même (fragment mis à jour) : ça
       reste un signal, juste sans le scale/pulse animé. */
    animation: none !important;
    transform: none !important;
  }
}