/* ═══════════════════════════════════════════════
   AGENT VOCAL MÉDICAL — STYLES GLOBAUX
   Design : Glassmorphism · Dark Mode · Animations
   ═══════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Syne:wght@700;800&display=swap');

/* ── TOKENS ── */
:root {
  --primary:       #6366f1;
  --primary-light: #818cf8;
  --primary-dark:  #4f46e5;
  --secondary:     #10b981;
  --danger:        #ef4444;
  --warning:       #f59e0b;
  --bg:            #09090f;
  --bg-2:          #0f0f1a;
  --bg-3:          #14142a;
  --glass:         rgba(255,255,255,0.04);
  --glass-border:  rgba(255,255,255,0.08);
  --glass-hover:   rgba(255,255,255,0.07);
  --text-1:        #f1f5f9;
  --text-2:        #94a3b8;
  --text-3:        #475569;
  --radius-sm:     8px;
  --radius:        14px;
  --radius-lg:     20px;
  --radius-xl:     28px;
  --shadow-glow:   0 0 40px rgba(99,102,241,0.15);
  --shadow-card:   0 4px 32px rgba(0,0,0,0.4);
  --transition:    0.25s cubic-bezier(0.4,0,0.2,1);
  --font:          'Inter', system-ui, sans-serif;
  --font-display:  'Syne', sans-serif;
}

/* ── RESET ── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text-1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ── BACKGROUND GRADIENT ── */
body::before {
  content:'';
  position:fixed; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 80% 50% at 50% -20%, rgba(99,102,241,0.2) 0%, transparent 60%),
    radial-gradient(ellipse 60% 40% at 80% 100%, rgba(16,185,129,0.1) 0%, transparent 50%),
    var(--bg);
}

/* ── TYPOGRAPHY ── */
h1,h2,h3,h4,h5 { font-weight:700; line-height:1.2; }
h1 { font-family:var(--font-display); font-size:clamp(2.2rem,5vw,3.5rem); }
h2 { font-size:clamp(1.4rem,3vw,2rem); }
h3 { font-size:1.15rem; }
p  { line-height:1.7; color:var(--text-2); }
a  { color:var(--primary-light); text-decoration:none; }

/* ── LAYOUT ── */
.container { max-width:1200px; margin:0 auto; padding:0 24px; }
.section   { padding:80px 0; }
.grid-2    { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.grid-3    { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.grid-4    { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.flex      { display:flex; }
.flex-col  { display:flex; flex-direction:column; }
.items-center { align-items:center; }
.justify-between { justify-content:space-between; }
.gap-12    { gap:12px; }
.gap-16    { gap:16px; }
.gap-24    { gap:24px; }
.text-center { text-align:center; }

/* ── GLASS CARD ── */
.card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding: 28px;
  transition: var(--transition);
}
.card:hover { background:var(--glass-hover); border-color:rgba(255,255,255,0.13); transform:translateY(-2px); box-shadow:var(--shadow-card); }

/* ── BADGE ── */
.badge {
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 12px; border-radius:100px;
  font-size:0.72rem; font-weight:600; letter-spacing:0.04em; text-transform:uppercase;
}
.badge-primary   { background:rgba(99,102,241,0.15); color:var(--primary-light); border:1px solid rgba(99,102,241,0.3); }
.badge-success   { background:rgba(16,185,129,0.15); color:#34d399; border:1px solid rgba(16,185,129,0.3); }
.badge-danger    { background:rgba(239,68,68,0.15);  color:#f87171; border:1px solid rgba(239,68,68,0.3); }
.badge-warning   { background:rgba(245,158,11,0.15); color:#fbbf24; border:1px solid rgba(245,158,11,0.3); }
.badge-neutral   { background:rgba(148,163,184,0.1); color:var(--text-2); border:1px solid rgba(148,163,184,0.2); }

/* ── BUTTONS ── */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 24px; border-radius:var(--radius);
  font-family:var(--font); font-size:0.9rem; font-weight:600;
  cursor:pointer; border:none; outline:none;
  transition:var(--transition); white-space:nowrap; position:relative;
}
.btn:disabled { opacity:0.4; cursor:not-allowed; }

.btn-primary {
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color:#fff;
  box-shadow:0 4px 20px rgba(99,102,241,0.4);
}
.btn-primary:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 28px rgba(99,102,241,0.5); }
.btn-primary:active:not(:disabled) { transform:translateY(0); }

.btn-secondary {
  background:var(--glass); color:var(--text-1);
  border:1px solid var(--glass-border);
}
.btn-secondary:hover:not(:disabled) { background:var(--glass-hover); border-color:rgba(255,255,255,0.15); }

.btn-danger {
  background:linear-gradient(135deg,#ef4444,#dc2626);
  color:#fff; box-shadow:0 4px 20px rgba(239,68,68,0.35);
}
.btn-danger:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 28px rgba(239,68,68,0.45); }

.btn-success {
  background:linear-gradient(135deg,#10b981,#059669);
  color:#fff; box-shadow:0 4px 20px rgba(16,185,129,0.35);
}
.btn-success:hover:not(:disabled) { transform:translateY(-2px); box-shadow:0 8px 28px rgba(16,185,129,0.45); }

.btn-sm { padding:8px 16px; font-size:0.8rem; }
.btn-lg { padding:16px 32px; font-size:1rem; }
.btn-icon { width:40px; height:40px; padding:0; border-radius:10px; }

/* ── CALL BUTTON HÉRO ── */
.call-btn-wrap {
  display:flex; flex-direction:column; align-items:center; gap:24px;
  position:relative;
}
.call-btn {
  width:120px; height:120px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; border:none; position:relative; z-index:1;
  background:linear-gradient(145deg, var(--primary), #7c3aed);
  box-shadow:0 8px 40px rgba(99,102,241,0.5);
  transition:var(--transition);
  animation: callPulseIdle 3s ease-in-out infinite;
}
.call-btn:hover { transform:scale(1.05); box-shadow:0 12px 50px rgba(99,102,241,0.6); }
.call-btn svg   { width:48px; height:48px; color:#fff; }

.call-btn.connecting { animation:callPulseConnecting 1s ease-in-out infinite; background:linear-gradient(145deg,var(--warning),#d97706); box-shadow:0 8px 40px rgba(245,158,11,0.5); }
.call-btn.active     { animation:callPulseActive 1.5s ease-in-out infinite; background:linear-gradient(145deg,var(--danger),#dc2626); box-shadow:0 8px 40px rgba(239,68,68,0.5); }

/* Rings autour du bouton */
.call-rings { position:absolute; inset:0; pointer-events:none; }
.call-ring {
  position:absolute; border-radius:50%; border:2px solid rgba(99,102,241,0.4);
  animation:ringExpand 3s ease-out infinite;
}
.call-ring:nth-child(1) { inset:-20px; animation-delay:0s; }
.call-ring:nth-child(2) { inset:-40px; animation-delay:0.8s; }
.call-ring:nth-child(3) { inset:-60px; animation-delay:1.6s; }

/* ── WAVEFORM ── */
.waveform {
  display:flex; align-items:center; gap:4px; height:40px;
}
.wave-bar {
  width:4px; border-radius:2px;
  background:linear-gradient(to top, var(--primary), var(--primary-light));
  animation:waveBounce 1.2s ease-in-out infinite;
  min-height:4px;
}
.wave-bar:nth-child(1)  { animation-delay:0.0s; }
.wave-bar:nth-child(2)  { animation-delay:0.1s; }
.wave-bar:nth-child(3)  { animation-delay:0.2s; }
.wave-bar:nth-child(4)  { animation-delay:0.3s; }
.wave-bar:nth-child(5)  { animation-delay:0.4s; }
.wave-bar:nth-child(6)  { animation-delay:0.3s; }
.wave-bar:nth-child(7)  { animation-delay:0.2s; }
.wave-bar:nth-child(8)  { animation-delay:0.1s; }
.wave-bar:nth-child(9)  { animation-delay:0.0s; }
.waveform.paused .wave-bar { animation-play-state:paused; height:4px; }

/* ── TRANSCRIPTION ── */
.transcript-box {
  max-height:200px; overflow-y:auto;
  display:flex; flex-direction:column; gap:10px;
  scrollbar-width:thin; scrollbar-color:var(--glass-border) transparent;
}
.transcript-msg {
  display:flex; gap:10px; animation:fadeSlideUp 0.3s ease;
}
.transcript-msg.agent .msg-bubble { background:rgba(99,102,241,0.15); border:1px solid rgba(99,102,241,0.25); margin-right:auto; }
.transcript-msg.user  .msg-bubble { background:rgba(16,185,129,0.12);  border:1px solid rgba(16,185,129,0.25);  margin-left:auto; }
.msg-bubble { padding:8px 14px; border-radius:12px; font-size:0.875rem; max-width:85%; }
.msg-label  { font-size:0.7rem; color:var(--text-3); margin-bottom:2px; }

/* ── NAV ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(9,9,15,0.8); border-bottom:1px solid var(--glass-border);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  height:70px;
}
.nav-inner {
  max-width:1200px; margin:0 auto; padding:0 24px;
  height:100%; display:flex; align-items:center; justify-content:space-between;
}
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-logo-icon {
  width:38px; height:38px; border-radius:10px;
  background:linear-gradient(135deg,var(--primary),#7c3aed);
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 16px rgba(99,102,241,0.4);
}
.nav-logo-icon svg { width:20px; height:20px; color:#fff; }
.nav-logo-text { font-weight:700; font-size:1rem; }
.nav-logo-sub  { font-size:0.72rem; color:var(--text-2); }
.nav-links { display:flex; align-items:center; gap:8px; }
.nav-link  {
  padding:8px 16px; border-radius:var(--radius-sm);
  color:var(--text-2); font-size:0.875rem; font-weight:500;
  transition:var(--transition);
}
.nav-link:hover   { color:var(--text-1); background:var(--glass); }
.nav-link.active  { color:var(--primary-light); background:rgba(99,102,241,0.12); }

/* ── STAT CARD ── */
.stat-card {
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius-lg); padding:24px;
  display:flex; flex-direction:column; gap:8px;
  transition:var(--transition);
}
.stat-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-card); }
.stat-value { font-size:2rem; font-weight:800; line-height:1; }
.stat-label { font-size:0.8rem; color:var(--text-2); font-weight:500; letter-spacing:0.03em; }
.stat-icon  {
  width:44px; height:44px; border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}

/* ── TABLE ── */
.table-wrap { overflow-x:auto; border-radius:var(--radius-lg); }
table { width:100%; border-collapse:collapse; }
th {
  text-align:left; padding:14px 20px;
  font-size:0.75rem; font-weight:600; letter-spacing:0.06em; text-transform:uppercase;
  color:var(--text-3); border-bottom:1px solid var(--glass-border);
  background:rgba(0,0,0,0.2);
}
td { padding:16px 20px; font-size:0.875rem; border-bottom:1px solid rgba(255,255,255,0.04); }
tr:last-child td { border-bottom:none; }
tr:hover td { background:rgba(255,255,255,0.02); }
tbody tr { transition:var(--transition); }

/* ── MODAL ── */
.modal-overlay {
  position:fixed; inset:0; z-index:200;
  background:rgba(0,0,0,0.7); backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center; padding:24px;
  opacity:0; pointer-events:none; transition:var(--transition);
}
.modal-overlay.open { opacity:1; pointer-events:all; }
.modal {
  background:var(--bg-2); border:1px solid var(--glass-border);
  border-radius:var(--radius-xl); padding:36px; max-width:520px; width:100%;
  transform:scale(0.95) translateY(10px); transition:var(--transition);
  box-shadow:var(--shadow-card);
}
.modal-overlay.open .modal { transform:scale(1) translateY(0); }

/* ── FORM ── */
.form-group { display:flex; flex-direction:column; gap:6px; }
.form-label { font-size:0.82rem; font-weight:600; color:var(--text-2); letter-spacing:0.03em; }
.form-input, .form-select, .form-textarea {
  background:rgba(0,0,0,0.3); border:1px solid var(--glass-border);
  border-radius:var(--radius-sm); padding:12px 16px;
  color:var(--text-1); font-family:var(--font); font-size:0.9rem;
  transition:var(--transition); outline:none; width:100%;
}
.form-input:focus, .form-select:focus, .form-textarea:focus {
  border-color:var(--primary); box-shadow:0 0 0 3px rgba(99,102,241,0.15);
}
.form-select option { background:var(--bg-2); }
.form-textarea { resize:vertical; min-height:80px; }

/* ── TOAST ── */
#toast-container {
  position:fixed; bottom:24px; right:24px; z-index:999;
  display:flex; flex-direction:column; gap:12px;
}
.toast {
  padding:14px 20px; border-radius:var(--radius);
  display:flex; align-items:center; gap:12px;
  background:var(--bg-2); border:1px solid var(--glass-border);
  box-shadow:var(--shadow-card); min-width:300px;
  animation:toastIn 0.35s cubic-bezier(0.4,0,0.2,1);
  font-size:0.875rem; font-weight:500;
}
.toast-success { border-color:rgba(16,185,129,0.4); }
.toast-error   { border-color:rgba(239,68,68,0.4);  }
.toast-info    { border-color:rgba(99,102,241,0.4);  }
.toast-icon    { flex-shrink:0; }
.toast.removing { animation:toastOut 0.25s ease forwards; }

/* ── LOADER ── */
.spinner {
  width:20px; height:20px; border-radius:50%;
  border:2px solid rgba(255,255,255,0.2);
  border-top-color:#fff;
  animation:spin 0.7s linear infinite;
}

/* ── KEYFRAMES ── */
@keyframes callPulseIdle {
  0%,100% { box-shadow:0 8px 40px rgba(99,102,241,0.4); }
  50%      { box-shadow:0 8px 60px rgba(99,102,241,0.6); }
}
@keyframes callPulseConnecting {
  0%,100% { transform:scale(1); }
  50%      { transform:scale(1.04); }
}
@keyframes callPulseActive {
  0%,100% { box-shadow:0 8px 40px rgba(239,68,68,0.4); }
  50%      { box-shadow:0 8px 60px rgba(239,68,68,0.7); }
}
@keyframes ringExpand {
  0%   { transform:scale(0.8); opacity:0.6; }
  100% { transform:scale(1.8); opacity:0;   }
}
@keyframes waveBounce {
  0%,100% { height:8px;  }
  50%      { height:32px; }
}
@keyframes fadeSlideUp {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes toastIn {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes toastOut {
  to { opacity:0; transform:translateX(20px); }
}
@keyframes spin { to { transform:rotate(360deg); } }
@keyframes shimmer { to { background-position:200% 0; } }
@keyframes fadeIn {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── ANIMATIONS D'ENTRÉE ── */
.animate-in {
  animation:fadeIn 0.5s ease forwards;
  opacity:0;
}
.delay-1 { animation-delay:0.1s; }
.delay-2 { animation-delay:0.2s; }
.delay-3 { animation-delay:0.3s; }
.delay-4 { animation-delay:0.4s; }

/* ── SCROLLBAR ── */
::-webkit-scrollbar       { width:6px; height:6px; }
::-webkit-scrollbar-track { background:transparent; }
::-webkit-scrollbar-thumb { background:var(--glass-border); border-radius:3px; }

/* ── RESPONSIVE ── */
@media (max-width:768px) {
  .grid-2,.grid-3,.grid-4 { grid-template-columns:1fr; }
  .nav-links { display:none; }
  .section { padding:48px 0; }
  h1 { font-size:2rem; }
}
@media (max-width:480px) {
  .container { padding:0 16px; }
  .card { padding:20px; }
}