/* ================= palettes =================
   Sombre par defaut : c'est le mode d'une salle d'echographie, ou la
   lumiere ambiante est baissee et ou l'ecran ne doit pas eblouir.
   Le mode clair suit le reglage du systeme, et un bouton permet de
   forcer l'un ou l'autre ; le choix est conserve sur le poste.

   Ce qui NE change jamais : le fond noir des videos, et la feuille
   blanche du compte rendu. L'un parce qu'une image d'echographie se lit
   sur du noir, l'autre parce qu'elle est imprimee. */
:root{
  color-scheme: dark;
  --bg:#0d1218; --panel:#161e29; --panel2:#1c2634; --line:#283445;
  --ink:#dfe6ef; --dim:#7d8c9e;
  /* --live sert de FOND de bouton, --liveTexte de couleur de TEXTE.
     En clair, une seule valeur ne peut pas faire les deux : assez
     claire pour porter du texte sombre, elle devient illisible en
     texte sur blanc. En sombre, les deux se confondent. */
  --live:#f2a03d; --liveTexte:#f2a03d; --ok:#4bbf8a; --bad:#e2574f;
  --ligneFaible:rgba(40,52,69,.5); --ombre:rgba(0,0,0,.45);
  --mono: ui-monospace,"SF Mono",Consolas,"Liberation Mono",monospace;
  --ui: system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* clair : suit le systeme, sauf si le poste a choisi sombre */
@media (prefers-color-scheme: light){
  :root:not([data-theme="sombre"]){
  color-scheme: light;
  --bg:#f4f7fa; --panel:#ffffff; --panel2:#eef2f7; --line:#d3dae4;
  --ink:#16202c; --dim:#5a6878;
  --live:#c97d10; --liveTexte:#8f5607; --ok:#156b47; --bad:#b8352c;
  --ligneFaible:rgba(120,135,155,.28); --ombre:rgba(20,35,55,.14);
  }
}
/* choix explicite du poste, qui l'emporte sur le systeme */
:root[data-theme="clair"]{
  color-scheme: light;
  --bg:#f4f7fa; --panel:#ffffff; --panel2:#eef2f7; --line:#d3dae4;
  --ink:#16202c; --dim:#5a6878;
  --live:#c97d10; --liveTexte:#8f5607; --ok:#156b47; --bad:#b8352c;
  --ligneFaible:rgba(120,135,155,.28); --ombre:rgba(20,35,55,.14);
}
:root[data-theme="sombre"]{ color-scheme: dark; }

/* bouton de bascule */
.theme{background:transparent;border:1px solid var(--line);border-radius:5px;
  padding:5px 10px;color:var(--dim);font-size:13px;line-height:1;white-space:nowrap}
.theme:hover{color:var(--ink)}
.themeFixe{position:fixed;top:12px;right:14px;z-index:60;background:var(--panel)}
@media print{ .theme{display:none} }
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--ink);font-family:var(--ui);font-size:15px;
     display:flex;flex-direction:column;overflow:hidden;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer}
select,input{font:inherit;color:var(--ink);background:var(--panel);
             border:1px solid var(--line);border-radius:6px;padding:9px 11px;width:100%}
:focus-visible{outline:2px solid var(--live);outline-offset:2px}
a{color:var(--liveTexte)}

.wrap{flex:1;overflow-y:auto;padding:36px 20px 56px}
.inner{max-width:720px;margin:0 auto}
h1{font-size:23px;font-weight:600;margin:0 0 6px}
.lede{color:var(--dim);margin:0 0 26px;max-width:58ch}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:15px}
.field label{font-size:13px;color:var(--dim)}
.hint{font-size:13px;color:var(--dim);margin-top:4px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.check{display:flex;align-items:center;gap:9px;margin:4px 0 15px;color:var(--dim)}
.check input{width:auto}
.go{margin-top:18px;background:var(--live);color:#1a1205;border:0;border-radius:7px;
    padding:13px 22px;font-weight:600;width:auto}
.go:disabled{opacity:.4;cursor:not-allowed}
.box{background:var(--panel);border:1px solid var(--line);border-left:3px solid var(--live);
     border-radius:6px;padding:13px 15px;margin-bottom:22px;font-size:14px}
.box.mauvais{border-left-color:var(--bad)}
.box code{font-family:var(--mono);font-size:13px}

.hdr{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:9px 16px;
     border-bottom:1px solid var(--line);background:var(--panel);flex:none}
.hdr .id{font-family:var(--mono)}
.sp{flex:1}
.clk{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--dim)}
.tbtn{background:transparent;border:1px solid var(--line);border-radius:5px;
      padding:5px 11px;color:var(--dim);font-size:13px;width:auto}
.tbtn:hover{color:var(--ink);border-color:var(--dim)}
.tbtn.on{background:var(--panel2);color:var(--ink);border-color:var(--dim)}

.dot{width:9px;height:9px;border-radius:50%;background:var(--dim);flex:none;display:inline-block}
.dot.ok{background:var(--ok)} .dot.bad{background:var(--bad)} .dot.live{background:var(--live)}
@media (prefers-reduced-motion:no-preference){ .dot.rec{background:var(--bad);animation:bl 1.6s infinite} }
@keyframes bl{0%,100%{opacity:1}50%{opacity:.25}}
.sig{display:flex;align-items:center;gap:7px}
.lb{color:var(--dim)}
.meter{height:6px;background:var(--panel2);border-radius:3px;overflow:hidden;width:90px;display:inline-block}
.meter i{display:block;height:100%;width:0;background:var(--ok);transition:width .07s linear}

.ctrl{display:flex;gap:9px;padding:10px 16px;border-top:1px solid var(--line);
      background:var(--panel);flex:none;flex-wrap:wrap}
.cbtn{flex:1;min-width:120px;background:var(--panel2);border:1px solid var(--line);
      border-radius:7px;padding:12px;display:flex;flex-direction:column;align-items:center;gap:3px}
.cbtn:hover{border-color:var(--dim)}
.cbtn .k{font-family:var(--mono);font-size:11px;color:var(--dim)}
.cbtn.on{background:var(--live);color:#1a1205;border-color:var(--live);font-weight:600}
.cbtn.on .k{color:#4a3510}
.cbtn.accent{background:var(--live);color:#1a1205;border-color:var(--live);font-weight:600}
.cbtn.accent .k{color:#4a3510}
.flash{animation:fl .45s ease-out}
@keyframes fl{from{background:var(--live);color:#1a1205}to{}}

/* ---------- ecran radiologue ---------- */
.body{flex:1;display:grid;min-height:0;position:relative}
.body.a{grid-template-columns:1fr 300px;grid-template-rows:1fr auto}
.body.a .us{grid-column:1;grid-row:1}
.body.a .cam{grid-column:2;grid-row:1;border-left:1px solid var(--line)}
.body.a .side{display:none}
.body.a .status{grid-column:1/-1;grid-row:2}
.body.b{grid-template-columns:1fr 280px}
.body.b .us{grid-column:1;grid-row:1}
.body.b .cam{position:absolute;right:296px;bottom:16px;width:190px;height:142px;
             border:1px solid var(--line);border-radius:6px;overflow:hidden;z-index:3}
.body.b .side{grid-column:2;grid-row:1;border-left:1px solid var(--line);
              display:flex;flex-direction:column;min-height:0;overflow-y:auto}
.body.b .status{display:none}

.us{position:relative;background:#000;min-width:0;min-height:0;overflow:hidden}
.us video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:#000}
.us.freeze{outline:2px solid var(--live);outline-offset:-2px}
.cam{position:relative;background:#0a0e13;min-width:0;min-height:0;overflow:hidden}
.cam video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.badge{position:absolute;left:10px;top:9px;z-index:2;font-family:var(--mono);font-size:11px;
       color:#8fa0b4;background:rgba(0,0,0,.45);padding:2px 7px;border-radius:4px}
.frz{position:absolute;left:50%;top:9px;transform:translateX(-50%);z-index:4;display:none;
     font-family:var(--mono);font-size:12px;color:var(--live);background:rgba(0,0,0,.6);
     padding:4px 12px;border-radius:4px}
.us.freeze .frz{display:block}
.alerte{position:absolute;left:0;right:0;bottom:0;z-index:5;display:none;
        background:rgba(226,87,79,.92);color:#2a0705;padding:8px 12px;
        font-size:14px;font-weight:600;text-align:center}
.us.degrade .alerte{display:block}
/* voile plein ecran du lecteur radiologue.
   NE PAS nommer cette classe "attente" : la ligne d'etat de la salle
   porte deja .etat.attente et heriterait du voile. */
.voile{position:absolute;inset:0;display:grid;place-items:center;z-index:6;
       background:#000;color:var(--dim);text-align:center;padding:20px}
.us.recoit .voile{display:none}

.status{display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:9px 16px;
        border-top:1px solid var(--line);background:var(--panel)}
.sect{padding:12px 14px;border-bottom:1px solid var(--line)}
.sect h3{margin:0 0 9px;font-size:12.5px;color:var(--dim);font-weight:400}
.srow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:3px 0}
.evlist{font-family:var(--mono);font-size:12px;padding:0 14px 14px}
.ev{display:flex;gap:9px;padding:4px 0;border-bottom:1px solid var(--ligneFaible)}
.ev .t{color:var(--dim);font-variant-numeric:tabular-nums;flex:none}
.ev .d{flex:1;word-break:break-word}
.ev.mk .d{color:var(--live)}

/* ---------- salle d'examen : gros et lisible de loin ---------- */
.salle{flex:1;display:flex;flex-direction:column;align-items:center;
       justify-content:flex-start;gap:20px;padding:28px 24px 40px;
       text-align:center;overflow-y:auto;min-height:0}
.etat{font-size:clamp(20px,3.2vw,30px);font-weight:600}
.etat.attente{color:var(--dim)}
.etat.pret{color:var(--ok)}
.etat.probleme{color:var(--bad)}

/* le code doit se lire a l'autre bout de la piece et se dicter au telephone */
.codeBloc{border:1px solid var(--live);border-radius:12px;padding:16px 34px;background:var(--panel)}
.codeBloc .t{color:var(--dim);font-size:13px;margin-bottom:6px}
.codeBloc .v{font-family:var(--mono);font-size:clamp(38px,7vw,62px);
             letter-spacing:.16em;line-height:1.05;color:var(--live)}
.codeBloc.vide{border-color:var(--line)}
.codeBloc.vide .v{color:var(--line)}
.codeBloc.rate{border-color:var(--bad)}
.codeBloc.rate .v{color:var(--bad);font-size:22px;letter-spacing:0}
.gros{display:flex;gap:26px;flex-wrap:wrap;justify-content:center}
.tuile{background:var(--panel);border:1px solid var(--line);border-radius:10px;
       padding:18px 24px;min-width:190px}
.tuile .t{color:var(--dim);font-size:13px;margin-bottom:8px}
.tuile .v{font-size:19px}
.apercu{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.apercu video{width:220px;height:150px;object-fit:cover;background:#000;
              border:1px solid var(--line);border-radius:8px}

@media (max-width:1000px){
  .body.a,.body.b{grid-template-columns:1fr;grid-template-rows:1fr auto auto}
  .body.b .cam{position:relative;right:auto;bottom:auto;width:auto;height:180px}
  .body.b .side{grid-column:1}
  .us{min-height:46vh}
  .two{grid-template-columns:1fr}
}

/* ---------- barre des organes, cote radiologue ---------- */
.proto{padding:9px 16px;border-top:1px solid var(--line);background:var(--panel);flex:none}
.protoTitre{color:var(--dim);font-size:12.5px;margin-bottom:7px}
.chips{display:flex;gap:7px;flex-wrap:wrap}
.chip{display:flex;align-items:center;gap:7px;background:var(--panel2);
      border:1px solid var(--line);border-radius:20px;padding:6px 13px;color:var(--dim);
      font-size:13.5px;width:auto}
.chip:hover{border-color:var(--dim);color:var(--ink)}
.chip .t{font-family:var(--mono);font-size:11px;opacity:.8}
.chip.faite{color:var(--ink);border-color:rgba(75,191,138,.45)}
.chip.faite::before{content:"\2713";color:var(--ok);font-size:12px}
.chip.active{background:var(--live);color:#1a1205;border-color:var(--live);font-weight:600}
.chip.active .t{color:#4a3510}

/* ---------- entree radiologue : le code, rien d'autre ---------- */
.entreeInner{max-width:520px}
.codeIn{font-family:var(--mono);font-size:42px;letter-spacing:.22em;text-align:center;
        text-transform:uppercase;padding:18px 10px;width:100%}
.codeIn::placeholder{letter-spacing:.22em;opacity:.22}
.pied{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:30px;
      padding-top:16px;border-top:1px solid var(--line);font-size:13px;color:var(--dim)}
.pied a{color:var(--dim);text-decoration:underline;margin-left:auto}
.pied a:hover{color:var(--ink)}

/* ---------- barre de protocole : on avance, on ne cherche pas ---------- */
.protoHaut{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.protoEx{color:var(--dim);font-size:12.5px}
.protoProg{font-family:var(--mono);font-size:12px;color:var(--dim)}
.protoAct{display:flex;align-items:stretch;gap:10px;flex-wrap:wrap}
.encours{flex:1;min-width:190px;display:flex;flex-direction:column;justify-content:center;
         gap:2px;background:var(--panel2);border:1px solid var(--line);
         border-radius:7px;padding:8px 14px}
.encours .lb{font-size:11px;color:var(--dim);text-transform:uppercase;letter-spacing:.06em}
.encours .nom{font-size:19px;font-weight:600}
.encours .dur{font-family:var(--mono);font-size:12px;color:var(--dim)}
.suiv{flex:2;min-width:260px;background:var(--live);color:#1a1205;border:0;border-radius:7px;
      padding:12px 18px;font-weight:600;font-size:16px;
      display:flex;flex-direction:column;align-items:center;gap:3px}
.suiv .k{font-family:var(--mono);font-size:11px;color:#4a3510;font-weight:400}
.suiv:disabled{background:var(--panel2);color:var(--dim);cursor:not-allowed}
.suiv:disabled .k{color:var(--dim)}
.protoAct .cbtn{flex:0 0 auto;min-width:150px}
.chips.masque{display:none}
.chips{margin-top:10px}

/* ---------- charge radiologue, en en-tete ---------- */
.charge{font-family:var(--mono);font-size:12.5px;color:var(--dim);
        border:1px solid var(--line);border-radius:5px;padding:3px 9px}
.charge.parle{color:#1a1205;background:var(--live);border-color:var(--live)}
.lb.mode{border:1px solid var(--line);border-radius:5px;padding:3px 9px;font-size:12px}
.lb.mode.obs{color:var(--ok);border-color:rgba(75,191,138,.45)}

/* ================= compte rendu ================= */
.crInner{max-width:840px}
.crBloc{border:1px solid var(--line);border-radius:7px;margin-bottom:10px;overflow:hidden}
.crBloc.vide{border-left:3px solid var(--line)}
.crBloc.rempli{border-left:3px solid var(--ok)}
.crBloc.suspect{border-left:3px solid var(--bad)}
.crOrg{background:var(--panel2);padding:7px 13px;font-size:13.5px;font-weight:600;
       display:flex;align-items:center;gap:10px}
.crOrg .meta{font-weight:400;color:var(--dim);font-size:12px}
.crOrg .repris{color:var(--bad);font-size:12px;font-weight:400}
.crSaisie{display:flex;gap:8px;padding:9px 11px;align-items:flex-start}
.crSaisie textarea{flex:1;resize:vertical;min-height:52px;font-family:inherit;font-size:14px}
.crSaisie .tbtn{flex:0 0 auto}
.tbtn.ecoute{background:var(--bad);color:#fff;border-color:var(--bad)}
.crActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px}
.crActions .go{margin-top:0}
.crAlerte{background:rgba(214,92,84,.12);border:1px solid var(--bad);border-radius:6px;
          padding:10px 13px;margin:12px 0;font-size:13.5px}

/* la feuille de rapport : fond blanc, pensee pour l'impression */
.feuille{background:#fff;color:#111;padding:38px 42px;border-radius:4px;
         font-family:Georgia,"Times New Roman",serif;font-size:14px;line-height:1.55}
.feuille h2{font-size:17px;letter-spacing:.06em;text-align:center;margin:0 0 4px;
            text-transform:uppercase}
.feuille .sous{text-align:center;color:#555;font-size:12.5px;margin-bottom:22px}
.feuille .ident{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;
                border-top:1px solid #bbb;border-bottom:1px solid #bbb;
                padding:10px 0;margin-bottom:20px;font-size:13px}
.feuille h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;
            border-bottom:1px solid #ddd;padding-bottom:3px;margin:20px 0 10px}
.feuille .org{margin-bottom:9px}
.feuille .org b{display:inline-block;min-width:190px;vertical-align:top}
.feuille .rien{color:#999;font-style:italic}
.feuille .sign{margin-top:34px;text-align:right;font-size:13px;color:#333}
@media print{
  body *{visibility:hidden}
  .feuille, .feuille *{visibility:visible}
  .feuille{position:absolute;left:0;top:0;width:100%;padding:0;border-radius:0}
}

/* ---------- compte rendu : images et dictee libre ---------- */
.crDeux{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media (max-width:820px){.crDeux{grid-template-columns:1fr}}
.crEtiq{display:block;font-size:12px;color:var(--dim);text-transform:uppercase;
        letter-spacing:.06em;margin-bottom:8px}
.galerie{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.vign{margin:0;cursor:pointer;border:2px solid transparent;border-radius:6px;
      overflow:hidden;background:var(--panel2);opacity:.42;transition:opacity .12s}
.vign.prise{border-color:var(--ok);opacity:1}
.vign img{width:100%;display:block}
.vign figcaption{font-size:10.5px;color:var(--dim);padding:4px 6px}
.crDroite textarea{width:100%;resize:vertical;font-family:inherit;font-size:15px;
                   line-height:1.5;padding:12px 14px}
.tbtn.ecoute{background:var(--bad);color:#fff;border-color:var(--bad)}
.crActions{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:12px}
.crActions .go{margin-top:0}
.crAlerte{background:rgba(214,92,84,.12);border:1px solid var(--bad);border-radius:6px;
          padding:11px 14px;margin-bottom:14px;font-size:13.5px;line-height:1.5}

/* images dans la feuille imprimee */
.feuille .imgs{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.feuille .imgs figure{margin:0}
.feuille .imgs img{width:100%;border:1px solid #ccc}
.feuille .imgs figcaption{font-size:11.5px;color:#555;margin-top:3px}
@media print{.feuille .imgs{break-inside:avoid}}

/* ---------- feuille au format du radiologue ---------- */
.feuille{font-family:Georgia,"Times New Roman",serif}
.feuille .tete{display:flex;justify-content:space-between;font-size:12px;
               color:#333;margin-bottom:16px}
.feuille .tete .gauche{font-weight:600}
.feuille h2{font-size:16px;text-align:center;font-style:italic;font-weight:700;
            text-decoration:underline;margin:0 0 6px;letter-spacing:.02em}
.feuille .dossier{text-align:center;font-size:11.5px;color:#666;margin-bottom:18px}
.feuille .etage{margin-bottom:16px}
.feuille .etTitre{font-weight:700;font-style:italic;text-decoration:underline;
                  font-size:13.5px;margin-bottom:6px}
.feuille .cst{font-style:italic;margin:0 0 3px 14px;line-height:1.45}
.feuille .cst.elargi{background:#fff4d6}
.feuille .rien{color:#999;font-style:italic;margin-left:14px}
.feuille .sign{margin-top:30px;text-align:right;font-style:italic;font-size:13px}

/* mention portee par un compte rendu non mis en forme */
.feuille .nonTraite{background:#ffe2e0;border:2px solid #c0392b;color:#7b1c14;
  padding:10px 14px;margin-bottom:18px;font-family:Arial,sans-serif;
  font-size:12.5px;font-weight:700;line-height:1.45;text-align:center}

/* ================= radiologue sur telephone =================
   Memes commandes que sur ordinateur, disposees pour une main :
   l'echographie occupe tout l'espace, la camera de la sonde passe en
   vignette dans son coin (elle ne vole plus la place des boutons), le
   protocole et les commandes restent toujours visibles en bas.
   Les rappels de touches clavier sont masques : il n'y a pas de clavier. */
@media (max-width:760px){
  #app{height:100dvh;overflow:hidden}

  #app .hdr{padding:6px 10px;gap:8px;flex-wrap:nowrap;font-size:12px}
  #app .hdr .id{font-size:13px}
  #app #hMode, #app #hRep, #app #btnA, #app #btnB{display:none}
  #app .charge{padding:2px 7px;font-size:11.5px}
  #app .clk{font-size:12px}

  /* echographie plein cadre, camera en vignette */
  #app .body, #app .body.a, #app .body.b{
    display:flex;flex-direction:column;flex:1;min-height:0;position:relative}
  #app .body .us{flex:1;min-height:0;grid-column:auto;grid-row:auto}
  #app .body .cam{position:absolute;top:8px;right:8px;width:31vw;max-width:150px;
    aspect-ratio:4/3;height:auto;z-index:4;border:1px solid var(--line);
    border-radius:6px;box-shadow:0 2px 10px var(--ombre);
    grid-column:auto;grid-row:auto;border-left:1px solid var(--line)}
  #app .body .cam .badge{display:none}
  #app .body .side{display:none}

  /* etat de la liaison : une ligne fine */
  #app .body .status{display:flex;flex:none;gap:12px;padding:5px 10px;
    font-size:11.5px;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
  #app .status .meter{width:44px}
  #app #mes{overflow:hidden;text-overflow:ellipsis}

  /* protocole : organe en cours et bouton suivant sur une ligne,
     reprise et autre organe en dessous */
  #app .proto{padding:7px 10px}
  #app .protoHaut{margin-bottom:6px}
  #app .protoEx{font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #app .protoAct{display:grid;grid-template-columns:1fr 1.6fr;gap:7px}
  #app .encours{min-width:0;padding:6px 10px}
  #app .encours .nom{font-size:15px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  #app .suiv{min-width:0;padding:10px 8px;font-size:14px}
  #app .protoAct .cbtn{min-width:0;padding:9px 6px;font-size:13px}
  #app .chips{max-height:92px;overflow-y:auto}

  /* commandes : deux par ligne, larges, pour le pouce */
  #app .ctrl{display:grid;grid-template-columns:1fr 1fr;gap:7px;
    padding:7px 10px calc(7px + env(safe-area-inset-bottom))}
  #app .ctrl .cbtn{min-width:0;padding:12px 6px;font-size:14px}
  #app .k{display:none}
  /* le libelle du bouton suivant se centre une fois la touche masquee */
  #app .suiv{justify-content:center}
  #app .encours .lb{font-size:10px;white-space:nowrap}
  /* la latence compte plus que le vumetre de voix sur petit ecran */
  #app .status .sig:nth-child(2){display:none}
}

/* ================= le radiologue, vu par le patient =================
   Grand, lisible depuis la table d'examen. Le visage passe avant les
   tuiles d'etat, qui s'adressent a l'operateur. */
/* Le cadre est dimensionne par sa HAUTEUR et ne doit jamais retrecir :
   dans la colonne de l'ecran salle, le navigateur ecrasait sa hauteur
   quand la place manquait, et la video recadree devenait une bande. */
.medecin{position:relative;flex:none;height:min(64vh,70vw);aspect-ratio:4/3;
  max-width:94vw;background:#000;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:0 6px 30px var(--ombre)}
.medecin video{width:100%;height:100%;object-fit:cover;display:block}
.medecin .legende{position:absolute;left:14px;bottom:12px;background:rgba(0,0,0,.6);
  color:#fff;padding:7px 14px;border-radius:8px;font-size:clamp(15px,1.8vw,20px)}

/* quand le medecin est a l'ecran, c'est le patient qu'on sert : les
   informations destinees a l'operateur se font petites et passent dessous */
.salle.avecMedecin{gap:12px;padding-top:14px}
.salle.avecMedecin .etat{font-size:clamp(16px,2vw,20px)}
.salle.avecMedecin .gros{gap:10px}
.salle.avecMedecin .tuile{padding:8px 14px;min-width:0}
.salle.avecMedecin .tuile .t{font-size:11px;margin-bottom:3px}
.salle.avecMedecin .tuile .v{font-size:14px}
.salle.avecMedecin .apercu video{width:130px;height:86px}
.salle.avecMedecin .hint{display:none}

/* le medecin se voit lui-meme, discretement : il sait ce que voit le patient */
#vSoi{position:fixed;left:10px;bottom:84px;width:120px;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--line);border-radius:6px;z-index:20;transform:scaleX(-1);
  background:#000;box-shadow:0 2px 10px var(--ombre);display:none}
#vSoi.coupe{opacity:.25}
@media (max-width:760px){
  #vSoi{width:78px;bottom:auto;top:52px;left:8px}
  /* cinq commandes sur deux colonnes : Terminer prend toute la largeur */
  #app .ctrl #btnFin{grid-column:1 / -1}
}

/* ---------- envoi vers l'archive ---------- */
.envoi{padding:10px 16px;border-top:1px solid var(--line);background:var(--panel);flex:none}
.envoi .barre{height:7px;background:var(--panel2);border-radius:4px;overflow:hidden}
.envoi .barre i{display:block;height:100%;width:0;background:var(--ok);transition:width .3s}
.envoi .txt{margin-top:6px;font-size:12.5px;color:var(--dim)}

/* ================= archive : consultation ================= */
.arch{flex:1;display:flex;flex-direction:column;min-height:0}
.arch .hdr a.tbtn{text-decoration:none}
.archCorps{flex:1;display:grid;grid-template-columns:300px 1fr;min-height:0}
.colonne{display:flex;flex-direction:column;min-height:0;border-right:1px solid var(--line)}
.colonne.large{border-right:0}
.colTitre{padding:11px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--dim);border-bottom:1px solid var(--line)}
.filtre{margin:10px 12px;width:calc(100% - 24px)}
.liste{flex:1;overflow-y:auto;padding:8px 12px 24px}
.vide{color:var(--dim);font-size:13px;padding:10px 4px}
.item{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:transparent;border:1px solid transparent;border-radius:7px;padding:9px 11px}
.item:hover{background:var(--panel2)}
.item.actif{background:var(--panel2);border-color:var(--dim)}
.item .nom{font-size:15px;font-family:var(--mono)}
.item .meta{font-size:11.5px;color:var(--dim)}
#place.alerte{color:var(--bad)}

.seance{border:1px solid var(--line);border-radius:10px;padding:14px 16px;margin-bottom:14px;
  background:var(--panel)}
.sTete{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.sDate{font-family:var(--mono);font-size:14px}
.sEx{font-weight:600}
.sTaille{font-family:var(--mono);font-size:12px;color:var(--dim)}
.sInd{font-size:12.5px;color:var(--dim);margin-top:3px}
.videos{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:12px;margin-top:12px}
.videos figure{margin:0}
.videos video{width:100%;background:#000;border:1px solid var(--line);border-radius:7px}
.videos figcaption{font-size:11.5px;color:var(--dim);margin-top:4px}
.vignettes{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.vg img{height:92px;border:1px solid var(--line);border-radius:6px;display:block}
.vg:hover img{border-color:var(--live)}
.liens{display:flex;gap:9px;flex-wrap:wrap;margin-top:12px;align-items:center}
.liens .tbtn{text-decoration:none}
@media (max-width:820px){
  .archCorps{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .colonne{border-right:0;border-bottom:1px solid var(--line)}
  #colPatients .liste{max-height:30vh}
}

/* ================= page d'accueil publique =================
   Une page qui defile, contrairement aux ecrans de seance qui tiennent
   dans la fenetre : d'ou .page, qui rend le defilement au document. */
.page{flex:1;overflow-y:auto;display:flex;flex-direction:column}
.lan-tete{display:flex;align-items:center;gap:14px;padding:14px 26px;
  border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:5}
.lan-marque{font-weight:700;letter-spacing:.02em;font-size:17px}
.lan-tete .tbtn{text-decoration:none}
.lan{flex:1;max-width:900px;width:100%;margin:0 auto;padding:0 26px 60px}

.lan-un{padding:64px 0 46px;border-bottom:1px solid var(--line)}
.lan-etat{display:inline-block;margin:0 0 18px;padding:4px 11px;border-radius:999px;
  border:1px solid var(--line);color:var(--dim);font-size:12.5px}
.lan-un h1{font-size:clamp(30px,5vw,46px);line-height:1.15;margin:0 0 20px;font-weight:650}
.lan-sous{color:var(--dim);font-size:17px;line-height:1.6;max-width:60ch;margin:0 0 30px}
.lan-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.lan-actions .go{margin-top:0;text-decoration:none;display:inline-block}
.lan-actions .tbtn{text-decoration:none;padding:13px 20px}

.lan-bloc{padding:44px 0;border-bottom:1px solid var(--line)}
.lan-bloc:last-child{border-bottom:0}
.lan-bloc h2{font-size:13px;text-transform:uppercase;letter-spacing:.09em;
  color:var(--dim);font-weight:600;margin:0 0 22px}
.lan-trois{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px}
.lan-trois h3{font-size:17px;margin:0 0 8px}
.lan-trois p{color:var(--dim);line-height:1.6;margin:0;font-size:14.5px}

.lan-etapes{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:16px}
.lan-etapes li{display:flex;gap:16px;align-items:flex-start}
.lan-etapes span{flex:none;width:28px;height:28px;border-radius:50%;background:var(--panel2);
  border:1px solid var(--line);display:grid;place-items:center;font-family:var(--mono);
  font-size:13px;color:var(--liveTexte)}
.lan-etapes div{line-height:1.6;color:var(--dim);font-size:14.5px}
.lan-etapes b{color:var(--ink);font-weight:600}

.lan-texte{color:var(--dim);line-height:1.65;max-width:68ch;margin:0 0 20px;font-size:14.5px}
.lan-avert{border:1px solid var(--line);border-left:3px solid var(--bad);border-radius:6px;
  padding:14px 16px;color:var(--dim);line-height:1.6;font-size:13.5px;max-width:68ch;margin:0}

.lan-pied{display:flex;align-items:center;gap:18px;padding:18px 26px;
  border-top:1px solid var(--line);color:var(--dim);font-size:13px}
.lan-pied a{color:var(--dim)}
.lan-pied a:hover{color:var(--ink)}
@media (max-width:640px){
  .lan, .lan-tete, .lan-pied{padding-left:18px;padding-right:18px}
  .lan-un{padding-top:44px}
}