/*
 * Mise en page de l'espace connecté (base.html).
 * Un seul état pilote la barre latérale : <body data-sidebar="ouverte|rail"> (static/js/ui/layout.js).
 *   - ouverte : 16rem, libellés visibles ;
 *   - rail    : 4.5rem, icônes seules ; la barre s'élargit en surimpression au survol ou au clavier,
 *               groupes toujours dépliés.
 * Sous 1024 px, la barre est un tiroir (data-ui-drawer, behaviors.js) et --sidebar-w vaut 0.
 */
:root {
  --sidebar-ouverte: 16rem;
  --sidebar-rail: 4.5rem;
  --sidebar-w: 0px;
}

@media (min-width: 1024px) {
  body[data-sidebar="ouverte"] { --sidebar-w: var(--sidebar-ouverte); }
  body[data-sidebar="rail"] { --sidebar-w: var(--sidebar-rail); }
}

.decale-sidebar {
  transition: margin-left 250ms ease, left 250ms ease;
}
@media (min-width: 1024px) {
  .decale-sidebar.marge { margin-left: var(--sidebar-w); }
  .decale-sidebar.gauche { left: var(--sidebar-w); }
}

#sidebar-multi-level-sidebar {
  width: var(--sidebar-ouverte);
  transition: transform 250ms ease, width 200ms ease;
}

@media (min-width: 1024px) {
  #sidebar-multi-level-sidebar { width: var(--sidebar-w); }

  /* Rail survolé ou parcouru au clavier : élargi par-dessus le contenu (après un court délai) */
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar:hover,
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar:focus-within {
    width: var(--sidebar-ouverte);
    transition-delay: 0ms, 150ms;
    box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5);
  }

  /* Rail replié : libellés masqués (restent lisibles par les lecteurs d'écran), groupes dépliés */
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar:not(:hover):not(:focus-within) .rail-masque {
    opacity: 0;
    pointer-events: none;
  }
  /* Groupes toujours dépliés en rail, survol compris : les liens ne bougent pas sous la souris */
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar .nav-groupe-liens {
    display: block !important;
  }
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar .nav-groupe-chevron {
    display: none;
  }
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar:not(:hover):not(:focus-within) .rail-seul {
    opacity: 1;
  }
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar:not(:hover):not(:focus-within) .nav-defilement {
    scrollbar-width: none;
  }
  /* Rail replié : logo réduit à la largeur du rail, sigle retiré pour ne pas réserver sa hauteur */
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar:not(:hover):not(:focus-within) .sidebar-logo {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0.125rem;
  }
  body[data-sidebar="rail"] #sidebar-multi-level-sidebar:not(:hover):not(:focus-within) .sidebar-sigle {
    display: none;
  }
}

.rail-masque { transition: opacity 150ms ease; }
.rail-seul { opacity: 0; transition: opacity 150ms ease; }

/* Défilement discret de la navigation */
.nav-defilement {
  scrollbar-width: thin;
  scrollbar-color: rgb(51 65 85) transparent;
}

/* Barre haute : suit la largeur de la barre latérale et se masque au défilement vers le bas */
#navbar { transition: left 250ms ease, transform 300ms ease; }
#footer { transition: margin-left 250ms ease; }

/* Bouton flottant du menu (petit écran) : au-dessus de la zone gestuelle du téléphone, et des barres fixes
   du bas de page (encaissement de la facture, enregistrement de la saisie : [data-barre-basse]). */
#menu-flottant { bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px)); }
body:has([data-barre-basse]) #menu-flottant { bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px)); }