/* ============================================================
   GCS Sara — Téléconsultation (V4, ergonomie type Teams)
   ============================================================ */
:root {
  --forest-900:#081c15; --forest-800:#0d2a20; --forest-700:#1b4332;
  --forest-600:#2d6a4f; --forest-500:#40916c; --forest-400:#52b788; --forest-300:#74c69d;
  --paper:#fbfdfb; --sage-50:#f2f7f3; --sage-100:#e7f0ea; --line:#dbe6df;
  --ink:#12211c; --ink-soft:#51655b;
  --rose:#c0453b; --rose-dark:#9f362e;
  --stage:#0c1a15;
  --radius:16px; --radius-sm:11px;
  --shadow-sm:0 1px 2px rgba(8,28,21,.06), 0 2px 10px rgba(8,28,21,.05);
  --shadow-md:0 14px 34px -14px rgba(8,28,21,.30);
  --shadow-lg:0 34px 70px -24px rgba(8,28,21,.5);
  --font-body:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-display:"Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --panel-w:clamp(300px, 26vw, 360px);
}
* { box-sizing:border-box; margin:0; padding:0; }
[hidden] { display:none !important; }
html, body { height:100%; }
body { font-family:var(--font-body); color:var(--ink); background:var(--paper); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
.ic { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.only-narrow { display:none; }

/* ---------- Boutons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; font:600 .95rem/1 var(--font-body); padding:.7rem 1.05rem; border:0; border-radius:var(--radius-sm); cursor:pointer; transition:background .16s, transform .08s, box-shadow .16s; }
.btn:active { transform:translateY(1px); }
.btn:disabled { opacity:.55; cursor:default; }
.btn--block { width:100%; }
.btn--sm { padding:.4rem .7rem; font-size:.82rem; gap:.35rem; }
.btn--sm .ic { width:16px; height:16px; }
.btn--primary { background:var(--forest-600); color:#fff; box-shadow:0 10px 24px -12px var(--forest-600); }
.btn--primary:hover:not(:disabled) { background:var(--forest-700); }
.btn--primary .ic { transition:transform .18s; }
.btn--primary:hover:not(:disabled) .ic { transform:translateX(3px); }
.btn--ghost { background:var(--sage-50); color:var(--forest-700); border:1px solid var(--line); }
.btn--ghost:hover { background:var(--sage-100); }
.iconbtn { width:40px; height:40px; border-radius:10px; border:1px solid var(--line); background:var(--sage-50); color:var(--forest-700); display:grid; place-items:center; cursor:pointer; transition:background .15s, color .15s; position:relative; }
.iconbtn:hover { background:var(--sage-100); }
.iconbtn.active { background:var(--forest-600); color:#fff; border-color:var(--forest-600); }

/* ---------- Logotype ---------- */
.wordmark { font-family:var(--font-display); font-weight:800; font-size:1.45rem; letter-spacing:-.03em; display:inline-flex; gap:.3rem; align-items:baseline; line-height:1; }
.wordmark__accent { color:var(--forest-400); }
.wordmark--sm { font-size:1.15rem; }
.wordmark__product { display:block; margin-top:.35rem; font-family:var(--font-body); font-size:.72rem; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--forest-300); }

/* ---------- Avatar ---------- */
.avatar { flex:none; border-radius:14px; display:grid; place-items:center; font-weight:700; color:#fff; letter-spacing:-.01em; background:linear-gradient(150deg, var(--forest-500), var(--forest-700)); }
.avatar--sm { width:38px; height:38px; font-size:.95rem; border-radius:11px; }

/* ============================================================ ACCUEIL */
.lobby { min-height:100vh; min-height:100dvh; display:grid; grid-template-columns:1.05fr .95fr; }
.brandside { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:column; justify-content:space-between; gap:2rem; padding:clamp(2rem,5vw,4rem); color:#eaf3ee; background:radial-gradient(120% 90% at 100% 0%, #14392b 0%, transparent 55%), linear-gradient(155deg, var(--forest-700) 0%, var(--forest-900) 100%); }
.blob { position:absolute; border-radius:50%; filter:blur(50px); opacity:.5; z-index:-1; }
.blob--1 { width:26rem; height:26rem; right:-8rem; bottom:-9rem; background:radial-gradient(circle, var(--forest-500), transparent 70%); }
.blob--2 { width:18rem; height:18rem; left:-6rem; top:20%; background:radial-gradient(circle, var(--forest-600), transparent 70%); opacity:.35; }
.brandside__pitch h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4.4vw,3.25rem); line-height:1.08; letter-spacing:-.035em; margin-bottom:1.1rem; }
.brandside__pitch h1 em { font-style:normal; color:var(--forest-300); }
.brandside__pitch p { max-width:42ch; color:#c7dbd0; font-size:1.05rem; line-height:1.55; }
.pitch__points { list-style:none; margin-top:2rem; display:flex; flex-direction:column; gap:.9rem; }
.pitch__points li { display:flex; align-items:center; gap:.7rem; color:#dcebe3; font-size:.95rem; }
.pitch__points .ic { width:18px; height:18px; color:var(--forest-300); }
.brandside__foot { font-size:.8rem; color:#9db8ac; }
.panel { display:flex; align-items:center; justify-content:flex-start; padding:clamp(1.5rem,5vw,4rem); background:var(--paper); }
.join { width:100%; max-width:26rem; animation:rise .5s cubic-bezier(.2,.8,.2,1) both; }
.join h2 { font-family:var(--font-display); font-weight:700; font-size:1.85rem; letter-spacing:-.03em; }
.join__hint { color:var(--ink-soft); margin:.4rem 0 2rem; font-size:.95rem; }
.field { display:block; margin-bottom:1.1rem; }
.field__label { display:block; font-size:.82rem; font-weight:600; color:var(--forest-700); margin-bottom:.4rem; }
.field input { width:100%; font:400 1rem var(--font-body); color:var(--ink); padding:.8rem .95rem; background:var(--sage-50); border:1.5px solid var(--line); border-radius:var(--radius-sm); transition:border-color .15s, background .15s, box-shadow .15s; }
.field input::placeholder { color:#9bb0a5; }
.field input:focus { outline:none; background:#fff; border-color:var(--forest-500); box-shadow:0 0 0 4px color-mix(in srgb, var(--forest-500) 18%, transparent); }
.join .btn--primary { margin-top:.5rem; }
.error { margin-top:1rem; color:var(--rose-dark); font-size:.88rem; font-weight:500; }

/* ============================================================ CONSOLE */
.console { height:100vh; height:100dvh; display:flex; flex-direction:column; background:var(--stage); }

/* --- Top bar --- */
.topbar { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:.55rem clamp(.9rem,2vw,1.4rem); background:var(--paper); border-bottom:1px solid var(--line); flex:none; }
.topbar__brand { justify-self:start; }
.topbar__brand .wordmark { color:var(--forest-700); }
.patientbar { justify-self:center; display:flex; align-items:center; gap:.6rem; min-width:0; max-width:46vw; }
.patientbar__info { display:flex; flex-direction:column; min-width:0; }
.patientbar__name { font-weight:700; font-size:.98rem; letter-spacing:-.01em; line-height:1.15; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.patientbar__meta { font-size:.8rem; color:var(--ink-soft); white-space:nowrap; }
.dotsep { margin:0 .35rem; color:var(--line); }
.topbar__actions { justify-self:end; display:flex; align-items:center; gap:.5rem; }
.timer { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem .75rem; border-radius:99px; background:var(--sage-50); border:1px solid var(--line); color:var(--forest-700); font-weight:600; font-variant-numeric:tabular-nums; font-size:.9rem; }
.timer .ic { width:16px; height:16px; color:var(--forest-500); }

/* --- Zone de travail --- */
.workarea { flex:1; display:flex; min-height:0; }
.stage { flex:1; position:relative; min-width:0; overflow:hidden; background:radial-gradient(90% 70% at 50% 0%, #123023 0%, transparent 60%), var(--stage); }

/* conteneur de disposition */
.stagegrid { position:absolute; inset:0; padding:clamp(.6rem,1.5vw,1.1rem); padding-bottom:6rem; display:flex; gap:.7rem; }
.gallery { flex:1; display:grid; gap:.7rem; grid-template-columns:repeat(var(--cols,1),1fr); grid-template-rows:repeat(var(--rows,1),1fr); }
.spotlight { flex:1; min-width:0; display:flex; }
.spotlight .tile { width:100%; height:100%; }
.filmstrip { flex:none; width:clamp(120px,14vw,190px); display:flex; flex-direction:column; gap:.6rem; overflow:auto; }
.filmstrip .tile { flex:none; aspect-ratio:16/9; }
.filmstrip .tile video { object-fit:cover; }
.view-gallery .spotlight, .view-gallery .filmstrip { display:none; }
.view-speaker .gallery { display:none; }

/* --- Tuile --- */
.tile { position:relative; min-width:0; min-height:0; background:#05100c; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,.05); box-shadow:var(--shadow-md); animation:rise .35s cubic-bezier(.2,.8,.2,1) both; }
.tile video { width:100%; height:100%; object-fit:contain; background:#05100c; display:block; }
.tile.pinned { outline:2px solid var(--forest-400); outline-offset:-2px; }
.tile__name { position:absolute; left:.6rem; bottom:.6rem; display:inline-flex; align-items:center; gap:.4rem; max-width:calc(100% - 1.2rem); padding:.28rem .6rem; border-radius:99px; background:color-mix(in srgb, var(--forest-900) 68%, transparent); color:#eaf3ee; font-size:.8rem; font-weight:500; backdrop-filter:blur(6px); }
.tile__name span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.tile__micoff { width:15px; height:15px; color:#ff9a90; display:none; }
.tile.muted .tile__micoff { display:block; }
.tile--local .tile__name { background:color-mix(in srgb, var(--forest-600) 82%, transparent); }
/* placeholder caméra coupée */
.tile__ph { position:absolute; inset:0; display:none; flex-direction:column; align-items:center; justify-content:center; gap:.7rem; background:radial-gradient(circle at 50% 38%, #143026, #06130e); color:#cfe6da; }
.tile.camoff .tile__ph { display:flex; }
.tile.camoff video { visibility:hidden; }
.tile__ph .avatar { width:clamp(56px,9vw,84px); height:clamp(56px,9vw,84px); border-radius:22px; font-size:clamp(1.2rem,2.6vw,1.8rem); }
.tile__phlabel { font-size:.85rem; color:#9db8ac; }
/* bouton épingler */
.tile__pin { position:absolute; top:.55rem; right:.55rem; width:34px; height:34px; border-radius:9px; border:0; cursor:pointer; display:grid; place-items:center; color:#eaf3ee; background:color-mix(in srgb, var(--forest-900) 52%, transparent); backdrop-filter:blur(4px); opacity:0; transition:opacity .15s, background .15s; }
.tile:hover .tile__pin { opacity:1; }
.tile.pinned .tile__pin { opacity:1; background:var(--forest-500); }
.tile__pin .ic { width:17px; height:17px; }

/* --- Dock --- */
.dock { position:absolute; left:50%; bottom:clamp(1rem,3vh,1.7rem); transform:translateX(-50%); display:flex; align-items:center; gap:.5rem; padding:.5rem; background:color-mix(in srgb, var(--forest-900) 74%, transparent); backdrop-filter:blur(12px); border:1px solid rgba(255,255,255,.09); border-radius:99px; box-shadow:var(--shadow-lg); z-index:20; max-width:calc(100vw - 1.5rem); }
.ctlwrap { display:flex; align-items:center; gap:2px; }
.ctl { position:relative; width:52px; height:52px; border-radius:50%; border:0; cursor:pointer; display:grid; place-items:center; color:#eaf3ee; background:rgba(255,255,255,.1); transition:background .15s, transform .1s, color .15s; }
.ctl:hover { background:rgba(255,255,255,.2); }
.ctl:active { transform:scale(.93); }
.ctl.off { background:#f2ddda; color:var(--rose-dark); }
.ctl.active { background:var(--forest-500); color:#fff; }
.ctl--leave { background:var(--rose); color:#fff; }
.ctl--leave:hover { background:var(--rose-dark); }
.ctl .ic { width:22px; height:22px; }
.ctl .ic-off { display:none; }
.ctl.off .ic-on { display:none; }
.ctl.off .ic-off { display:block; }
.caret { width:22px; height:52px; border-radius:99px; border:0; cursor:pointer; background:rgba(255,255,255,.1); color:#eaf3ee; display:grid; place-items:center; transition:background .15s; }
.caret:hover { background:rgba(255,255,255,.2); }
.caret .ic { width:15px; height:15px; }
.dock__divider { width:1px; height:28px; background:rgba(255,255,255,.14); margin:0 .1rem; }
/* infobulles dock */
.ctl::after { content:attr(data-tip); position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); padding:.3rem .55rem; border-radius:7px; background:var(--forest-900); color:#eaf3ee; font-size:.74rem; font-weight:500; white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s, transform .15s; }
.ctl:hover::after { opacity:1; transform:translateX(-50%) translateY(0); }

/* menu périphériques */
.devmenu { position:absolute; left:50%; transform:translateX(-50%); bottom:calc(clamp(1rem,3vh,1.7rem) + 70px); min-width:230px; max-width:min(92vw,330px); background:var(--paper); color:var(--ink); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow-lg); padding:.35rem; z-index:30; animation:rise .16s ease both; }
.devmenu__title { font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--forest-600); padding:.45rem .6rem .25rem; }
.devitem { display:flex; align-items:center; gap:.5rem; width:100%; text-align:left; padding:.55rem .6rem; border:0; background:none; border-radius:8px; cursor:pointer; font:500 .9rem var(--font-body); color:var(--ink); }
.devitem:hover { background:var(--sage-50); }
.devitem.active { color:var(--forest-700); font-weight:600; }
.devitem .ic { width:16px; height:16px; color:var(--forest-600); opacity:0; }
.devitem.active .ic { opacity:1; }
.devitem span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* --- Panneau notes (repliable) --- */
.notespanel { flex:none; width:var(--panel-w); background:var(--paper); border-left:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; transition:width .28s cubic-bezier(.2,.8,.2,1); }
.console:not(.panel-open) .notespanel { width:0; border-left-color:transparent; }
.notes__head { display:flex; align-items:center; justify-content:space-between; gap:.5rem; padding:1.2rem 1.3rem .6rem; }
.notes__head h3 { font-size:1rem; font-weight:700; color:var(--forest-800); white-space:nowrap; }
.notes__actions { display:flex; align-items:center; gap:.4rem; }
.notespanel textarea { flex:1; min-height:8rem; margin:0 1.3rem; width:auto; resize:none; font:400 .95rem/1.55 var(--font-body); color:var(--ink); padding:.85rem .95rem; background:var(--sage-50); border:1.5px solid var(--line); border-radius:var(--radius-sm); transition:border-color .15s, background .15s, box-shadow .15s; }
.notespanel textarea:focus { outline:none; background:#fff; border-color:var(--forest-500); box-shadow:0 0 0 4px color-mix(in srgb, var(--forest-500) 16%, transparent); }
.notes__save { padding:.6rem 1.3rem 1.2rem; font-size:.78rem; color:var(--ink-soft); }

.scrim { position:fixed; inset:0; background:rgba(8,28,21,.5); z-index:40; animation:fade .2s ease; }
.toast { position:fixed; left:50%; bottom:2rem; transform:translateX(-50%) translateY(10px); padding:.7rem 1.1rem; border-radius:99px; background:var(--forest-800); color:#eaf3ee; font-size:.9rem; font-weight:500; box-shadow:var(--shadow-lg); z-index:100; opacity:0; transition:opacity .2s, transform .2s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

@keyframes rise { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
@keyframes fade { from { opacity:0; } to { opacity:1; } }

/* ============================================================ RESPONSIVE */
@media (max-width:900px) {
  .lobby { grid-template-columns:1fr; }
  .brandside { justify-content:flex-start; gap:1.5rem; padding:2rem 1.5rem 2.5rem; }
  .brandside__foot { display:none; }
  .panel { padding:1.75rem 1.5rem 2.5rem; }

  .topbar { grid-template-columns:auto 1fr auto; gap:.6rem; }
  .topbar__brand .wordmark { font-size:1rem; }
  .patientbar { max-width:none; }
  .timer { display:none; }

  /* panneau notes en volet */
  .notespanel { position:fixed; top:0; right:0; height:100dvh; width:min(90vw,360px) !important; transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.2,1); z-index:50; box-shadow:var(--shadow-lg); border-left:1px solid var(--line); }
  .console.panel-open .notespanel { transform:none; }

  /* vue orateur : filmstrip en bas */
  .stagegrid { flex-direction:column; padding-bottom:5.5rem; }
  .filmstrip { flex-direction:row; width:auto; height:clamp(74px,14vh,110px); }
  .filmstrip .tile { height:100%; aspect-ratio:16/9; }
}
@media (max-width:520px) {
  .ctl { width:48px; height:48px; }
  .caret { height:48px; width:20px; }
  .dock { gap:.35rem; padding:.4rem; }
  .btn--ghost .lbl, .patientbar__meta { display:none; }
}
@media (prefers-reduced-motion:reduce) { * { animation:none !important; transition:none !important; } }