fix: refonte mode PTT continu avec activation par drag vertical

CORRECTIONS :
- Fix son qui ne restait pas actif en mode lock (utilisation de ref au lieu de state)
- Les event handlers utilisent isLockModeRef.current pour accès immédiat

NOUVELLE ACTIVATION :
- Remplacement appui long 3s par drag vertical (glisser vers le haut)
- Drag de 80px vers le haut active le mode lock
- Indicateur visuel avec flèche + texte "Glissez pour verrouiller"
- Bouton suit le doigt pendant le drag (transform translateY)
- Feedback haptique à l'activation (triple vibration)

DÉSACTIVATION :
- Tap/clic sur le bouton en mode lock désactive le mode
- Feedback haptique simple à la désactivation

UX AMÉLIORÉE :
- Plus intuitif qu'un appui long
- Retour visuel immédiat du drag
- Compatible touch (mobile) et mouse (desktop)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>

client/src/components/PTTButton.css

@@ -8,6 +8,7 @@
   justify-content: center;
   padding: var(--spacing-xl);
   gap: var(--spacing-lg);
+  position: relative;
 }
 
 .ptt-button {
@@ -22,7 +23,7 @@
   justify-content: center;
   gap: var(--spacing-md);
   cursor: pointer;
-  transition: all 0.2s ease;
+  transition: transform 0.1s ease, box-shadow 0.2s ease, background 0.2s ease;
   box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
   position: relative;
   overflow: hidden;
@@ -121,17 +122,36 @@
   line-height: 1.4;
 }
 
-/* Indicateur de progression pour mode lock */
-.lock-progress {
+/* Indicateur de drag vers le haut */
+.drag-indicator {
   position: absolute;
-  bottom: 0;
-  left: 0;
-  height: 6px;
-  background: linear-gradient(90deg, #fbbf24, #f59e0b);
-  border-radius: 0 0 0 120px;
-  transition: width 0.05s linear;
-  box-shadow: 0 0 20px rgba(251, 191, 36, 0.6);
-  z-index: 1;
+  top: -60px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.5rem;
+  color: #fbbf24;
+  font-size: 0.875rem;
+  font-weight: 600;
+  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
+  pointer-events: none;
+  z-index: 10;
+  animation: drag-pulse 0.6s ease-in-out infinite;
+}
+
+.drag-indicator svg {
+  filter: drop-shadow(0 2px 8px rgba(251, 191, 36, 0.6));
+}
+
+@keyframes drag-pulse {
+  0%, 100% {
+    transform: translateX(-50%) translateY(0);
+  }
+  50% {
+    transform: translateX(-50%) translateY(-5px);
+  }
 }
 
 /* Badge mode lock */