/* =====================================================================
   UN BOUTON ROND « MENU » QUI DÉROULE LA LISTE.

   Dr Nanni, 19/09/2026 :
     « la grande barre latérale gauche de Cabinet Pro prend toute la place.
       Remplace-la par un bouton de sous-menu qui ne prend aucune place et
       qui sera présent sur tous les écrans de la même manière. »
   puis, après un premier essai en tiroir :
     « je ne veux pas un menu en tiroir, j'ai déjà un menu repliable. Je veux
       un menu : un bouton rond qui s'appelle Menu, et quand on appuie dessus
       il y a le menu qui se déroule. »

   Il avait raison : un tiroir pleine hauteur qui glisse depuis la gauche,
   c'est la même barre, simplement cachée — et il avait déjà un repli. Ici,
   le menu n'existe QUE pendant qu'on s'en sert : un bouton rond, une liste
   qui se déroule dessous, et qui disparaît dès qu'on a choisi.

   Sur un dossier patient, la barre mangeait une colonne entière de contenu
   clinique, sur chaque écran, toute la journée.
   ===================================================================== */

/* Le contenu occupe TOUTE la largeur : plus de colonne réservée. */
body.menu-bouton #app {
  grid-template-columns: minmax(0, 1fr);
}

/* ── LE BOUTON ROND ───────────────────────────────────────────────────── */
/* Il vit dans la barre du haut, présente sur tous les écrans : c'est ce qui
   garantit « de la même manière ». Rond, avec le mot « Menu » écrit dessus —
   une icône seule se devine, un mot se lit. */
body.menu-bouton .mobile-menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  width: auto;
  height: 38px;
  padding: 0 16px 0 13px;
  border-radius: 999px;
  border: 1px solid rgba(16, 42, 76, 0.14);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  color: #17314f;
  box-shadow: 0 1px 2px rgba(10, 30, 60, 0.06);
}
body.menu-bouton .mobile-menu-btn::after {
  content: 'Menu';
}
body.menu-bouton .mobile-menu-btn:hover {
  background: #f4f8ff;
  border-color: rgba(16, 42, 76, 0.24);
}
body.menu-bouton #app.sidebar-open .mobile-menu-btn {
  background: #17314f;
  border-color: #17314f;
  color: #fff;
}

/* ── LA LISTE QUI SE DÉROULE ──────────────────────────────────────────── */
/* Ce n'est pas un tiroir pleine hauteur : c'est un panneau compact, accroché
   sous le bouton, qui n'existe que pendant qu'on choisit. */
body.menu-bouton .sidebar {
  position: fixed;
  top: 58px;
  left: 12px;
  width: 272px;
  max-height: min(74vh, 640px);
  overflow-y: auto;
  padding: 12px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 18px 48px rgba(6, 22, 43, 0.32);
  transform-origin: top left;
  transform: scale(0.96) translateY(-6px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.14s ease, transform 0.14s ease;
  z-index: 200;
  -webkit-app-region: no-drag;
}
body.menu-bouton #app.sidebar-open .sidebar {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}

/* Le voile : invisible, mais il capte le clic « à côté ». Un menu déroulant
   qui ne se ferme pas en cliquant ailleurs se fait fermer à la souris, deux
   fois sur trois au mauvais endroit. */
body.menu-bouton .sidebar-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  background: transparent;
  z-index: 150;
  pointer-events: none;
}
body.menu-bouton #app.sidebar-open .sidebar-backdrop {
  pointer-events: auto;
}

/* Dans un panneau compact, la marque prend une place qu'on préfère donner aux
   entrées du menu. La croix, elle, reste : on ferme aussi au clavier ou à côté. */
body.menu-bouton .sidebar .brand-text {
  display: none;
}

/* 🔴 LE PIED DE BARRE RESTE — il porte la vignette « qui est connecté »,
   « Changer de médecin » et la déconnexion.

   Dr Nanni, 14/07/2026 : « la vignette qui dit quel est le médecin qui est
   connecté est super mal située, elle est en haut à droite et elle cache les
   boutons qui sont au même endroit. » Elle avait justement été ancrée ICI pour
   cette raison. Le masquer l'a renvoyée flotter en haut à droite : la version
   5.5.28 a ramené le défaut qu'elle croyait ne pas toucher.

   Elle vit donc en bas du panneau du menu — l'endroit où l'on va naturellement
   chercher « changer de médecin ». */
body.menu-bouton .sidebar-footer {
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border, #334155);
}
body.menu-bouton .sidebar-close-btn {
  display: inline-flex;
  margin-left: auto;
  width: 32px;
  height: 32px;
}

/* « Compact » et « replié » n'ont plus de sens : le menu n'est plus dans le
   flux. On neutralise, sinon le panneau ferait 78 pixels de large. */
body.menu-bouton.sidebar-compact .sidebar,
body.menu-bouton.sidebar-folded .sidebar {
  width: 272px;
}
body.menu-bouton.sidebar-folded #app,
body.menu-bouton.sidebar-compact #app {
  grid-template-columns: minmax(0, 1fr);
}

/* Le téléphone garde SON mécanisme (navigation en bas) : deux dispositifs
   superposés donneraient un panneau fantôme par-dessus la barre du bas. */
body.is-mobile.menu-bouton .sidebar,
body.is-mobile.menu-bouton .sidebar-backdrop,
body.is-mobile.menu-bouton .mobile-menu-btn {
  display: none !important;
}

/* Feux natifs (x=16) : garder le menu cliquable, même au zoom minimal de 80 %. */
body.menu-bouton #app.is-mac .topbar { padding-left: 112px; }
body.menu-bouton #app.is-mac .sidebar { left: 112px; max-width: calc(100vw - 124px); }