feat: amélioration UI onglet Audio admin (Phase 2.5)

- Styles CSS professionnels pour configuration audio
- Sections visuelles avec bordures et hover effects
- Indicateurs de sélection pour devices
- Tableau devices amélioré avec styles cohérents
- Layout responsive et centré
- Suppression emojis (respect guidelines)

TODO.md

@@ -279,6 +279,8 @@ test: description      # Tests
 
 **IMPORTANT** : Commiter après chaque tâche complétée, pas à la fin de la journée !
 
+**IMPORTANT** : Interdiction d'utiliser des icônes et émojis.
+
 ---
 
 ## Notes et décisions

client/src/Admin.css

@@ -570,6 +570,212 @@
   margin-top: var(--spacing-xs);
 }
 
+/* Audio Configuration (Phase 2.5) */
+.tab-audio {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+.audio-config-container {
+  display: grid;
+  gap: var(--spacing-xl);
+}
+
+.audio-section {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: var(--spacing-xl);
+  transition: border-color 0.2s;
+}
+
+.audio-section:hover {
+  border-color: var(--color-primary);
+}
+
+.audio-section h3 {
+  margin: 0 0 var(--spacing-md) 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.audio-section h3::before {
+  content: '';
+  display: inline-block;
+  width: 4px;
+  height: 20px;
+  background: var(--color-primary);
+  border-radius: 2px;
+}
+
+.device-select {
+  width: 100%;
+  padding: var(--spacing-md);
+  background: var(--color-bg);
+  border: 2px solid var(--color-border);
+  border-radius: 8px;
+  color: var(--color-text);
+  font-size: 0.95rem;
+  font-family: inherit;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.device-select:hover {
+  border-color: var(--color-primary);
+  background: var(--color-surface-hover);
+}
+
+.device-select:focus {
+  outline: none;
+  border-color: var(--color-primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
+}
+
+.device-select option {
+  background: var(--color-surface);
+  color: var(--color-text);
+  padding: var(--spacing-sm);
+}
+
+.audio-actions {
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-lg) 0;
+}
+
+.audio-actions .btn-primary {
+  padding: var(--spacing-md) var(--spacing-xl);
+  font-size: 1rem;
+  font-weight: 600;
+  min-width: 250px;
+  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.audio-actions .btn-primary:hover {
+  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.15);
+  transform: translateY(-1px);
+}
+
+.current-config {
+  background: linear-gradient(135deg, var(--color-surface) 0%, var(--color-surface-hover) 100%);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: var(--spacing-xl);
+}
+
+.current-config h3 {
+  margin: 0 0 var(--spacing-lg) 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+  color: var(--color-primary);
+}
+
+.config-info {
+  display: grid;
+  gap: var(--spacing-md);
+}
+
+.config-info p {
+  margin: 0;
+  padding: var(--spacing-sm) 0;
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.95rem;
+  display: flex;
+  justify-content: space-between;
+}
+
+.config-info p:last-child {
+  border-bottom: none;
+}
+
+.config-info strong {
+  color: var(--color-text-secondary);
+  font-weight: 500;
+  min-width: 150px;
+}
+
+.audio-devices-list {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 12px;
+  padding: var(--spacing-xl);
+  margin-top: var(--spacing-lg);
+}
+
+.audio-devices-list h3 {
+  margin: 0 0 var(--spacing-lg) 0;
+  font-size: 1.1rem;
+  font-weight: 600;
+}
+
+.devices-table {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--color-bg);
+  border-radius: 8px;
+  overflow: hidden;
+}
+
+.devices-table th {
+  background: var(--color-surface-hover);
+  padding: var(--spacing-md);
+  text-align: left;
+  font-weight: 600;
+  font-size: 0.85rem;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-bottom: 2px solid var(--color-border);
+}
+
+.devices-table td {
+  padding: var(--spacing-md);
+  border-bottom: 1px solid var(--color-border);
+  font-size: 0.9rem;
+}
+
+.devices-table tr:last-child td {
+  border-bottom: none;
+}
+
+.devices-table tr:hover {
+  background: var(--color-surface-hover);
+}
+
+.devices-table tr:hover td {
+  color: var(--color-text);
+}
+
+/* Badge pour les devices */
+.device-type-badge {
+  display: inline-block;
+  padding: 0.25rem var(--spacing-sm);
+  border-radius: 4px;
+  font-size: 0.75rem;
+  font-weight: 600;
+  text-transform: uppercase;
+}
+
+.device-type-input {
+  background: rgba(34, 197, 94, 0.1);
+  color: var(--color-success);
+}
+
+.device-type-output {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--color-primary);
+}
+
+.device-type-both {
+  background: rgba(168, 85, 247, 0.1);
+  color: #a855f7;
+}
+
 /* Responsive */
 @media (max-width: 768px) {
   .admin-content {

client/src/Admin.jsx

@@ -476,10 +476,15 @@ function Admin() {
                     .filter(d => d.maxInputChannels > 0)
                     .map(device => (
                       <option key={device.id} value={device.id}>
-                        {device.name} ({device.maxInputChannels} canaux, {device.defaultSampleRate}Hz)
+                        {device.name} - {device.maxInputChannels} canaux - {device.defaultSampleRate}Hz
                       </option>
                     ))}
                 </select>
+                {selectedInputDevice !== null && (
+                  <p style={{marginTop: 'var(--spacing-sm)', color: 'var(--color-text-secondary)', fontSize: '0.85rem'}}>
+                    Device ID {selectedInputDevice} sélectionné
+                  </p>
+                )}
               </div>
 
               <div className="audio-section">
@@ -494,10 +499,15 @@ function Admin() {
                     .filter(d => d.maxOutputChannels > 0)
                     .map(device => (
                       <option key={device.id} value={device.id}>
-                        {device.name} ({device.maxOutputChannels} canaux, {device.defaultSampleRate}Hz)
+                        {device.name} - {device.maxOutputChannels} canaux - {device.defaultSampleRate}Hz
                       </option>
                     ))}
                 </select>
+                {selectedOutputDevice !== null && (
+                  <p style={{marginTop: 'var(--spacing-sm)', color: 'var(--color-text-secondary)', fontSize: '0.85rem'}}>
+                    Device ID {selectedOutputDevice} sélectionné
+                  </p>
+                )}
               </div>
 
               <div className="audio-section">