/* ═══════════════════════════════════════════════════════════════════
   assets/syn-nav.css — barre, rail, tiroir, écran de chargement
   (refonte, lot 2 — direction D : rail latéral)

   ≥ 1100 px   barre + rail fixe à gauche, contenu décalé
   521–1099    barre + bouton menu, tiroir
   ≤ 520       barre mobile existante + tiroir
   Les onglets .pageTab restent dans le DOM (source de vérité, clics,
   permissions) : ils ne sont plus affichés.
   ═══════════════════════════════════════════════════════════════════ */
:root{ --topbar-h:56px; --rail-w:248px; }

/* ── Barre du haut, à la mesure de .e2bar ── */
.topbar{ height:var(--topbar-h); min-height:var(--topbar-h); padding:0 18px; gap:12px; flex-wrap:nowrap; }
.topLeft{ flex-wrap:nowrap; gap:12px; }
.topLeft .pageTab{ display:none !important; }
.topbar .brand{ padding:4px 6px; border-radius:10px; }
.synSous{ margin-left:2px; padding-left:12px; border-left:1px solid var(--bd); font-family:var(--f); font-size:14px; font-weight:700;
  color:var(--mu); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:34vw; }

/* Icônes de trait dans la barre et le tiroir */
.btnNotifBell svg, .btnMenuToggle svg, .btnIcon svg, .userAvatarIcon svg{ width:18px; height:18px; display:block; }
.btnNotifBell{ display:inline-flex; align-items:center; justify-content:center; position:relative; }
.userAvatarIcon{ display:inline-grid; place-items:center; }
/* Mon profil (lot 12) : la photo du compte remplace l'icône. */
.userAvatarIcon.aPhoto{ background-color:var(--surface); background-size:cover; background-position:center; }
.userAvatarIcon.aPhoto svg{ visibility:hidden; }
.navItemIcon{ display:inline-grid; place-items:center; color:var(--mu); }
.navItemIcon svg{ width:18px; height:18px; }
.navItem.active .navItemIcon{ color:var(--syn); }
.navItem{ font-family:var(--f); font-weight:700; }
.navItem.active{ background:var(--synT); color:var(--syn); font-weight:800; }
.navGroupTitle{ font-family:var(--f); font-weight:800; font-size:9.5px; }
.navDrawerBrand .synMarque svg{ width:26px; height:26px; }

/* ── Rail (le composant .e2rail de Synétiq) ── */
.synRail{ display:none; }
@media (min-width:1100px){
  .synRail{ display:flex; flex-direction:column; gap:2px; position:fixed; z-index:40; left:16px; top:calc(var(--topbar-h) + 16px);
    width:calc(var(--rail-w) - 16px); max-height:calc(100vh - var(--topbar-h) - 32px); overflow-y:auto; overscroll-behavior:contain;
    background:var(--sf); border:1px solid var(--bd); border-radius:var(--r2); box-shadow:var(--sh); padding:11px 9px;
    font-family:var(--f); scrollbar-width:thin; }
  .synRail[hidden]{ display:none; }
  .container{ width:min(1200px, calc(100% - var(--rail-w) - 48px));
    margin-left:calc(var(--rail-w) + 16px + max(0px, (100% - var(--rail-w) - 48px - 1200px) / 2)); }
  .btnMenuToggle{ display:none !important; }
}
.synRT{ font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.11em; color:var(--mu); margin:12px 0 6px 10px; }
.synRT:first-child{ margin-top:2px; }
.synRI{ display:flex; align-items:center; gap:10px; width:100%; min-height:38px; padding:8px 11px; border:0; background:none; border-radius:9px;
  font:700 12.5px var(--f); color:var(--mu); text-align:left; text-decoration:none; cursor:pointer;
  transition:background var(--tC) ease, color var(--tC) ease, transform var(--tC) ease; }
.synRI svg{ width:17px; height:17px; flex:0 0 auto; }
.synRI span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.synRI:hover{ background:var(--sf2); color:var(--tx); }
.synRI:active{ transform:scale(.98); }
.synRI.on{ background:var(--synT); color:var(--syn); }
.synRI:focus-visible{ outline:3px solid color-mix(in srgb,var(--e-focus) 45%,transparent); outline-offset:1px; }
/* Lot 18 bis : l'entrée Admin (coffre SynLock) se distingue : violet, gras. */
.synRI.synCoffre, .navItem.synCoffre{ color:var(--syn); font-weight:800; }
.synRI.synCoffre:hover{ color:var(--synD, var(--syn)); }
.navItem.synCoffre .navItemIcon{ color:var(--syn); }

/* ── Tablette : le tiroir prend le relais des onglets ── */
@media (max-width:1099px){
  .btnMenuToggle{ display:flex; }
}
@media (min-width:521px) and (max-width:1099px){
  .navDrawer:not([hidden]){ display:flex !important; }
  .navScrim:not([hidden]){ display:block !important; }
}
@media (max-width:520px){
  .topbar{ padding:0 12px; gap:8px; }
  .synSous{ display:none; }
}

/* ── Hauteur de la barre (lot 9) : Admin › Apparence › Logo et nom.
   html[data-barre-bureau] au-delà de 520 px, html[data-barre-tel] en deçà ;
   le symbole et le nom suivent. Standard = la barre d'origine (56 px). ── */
html[data-barre-bureau="compacte"]{ --topbar-h:48px; --mkB:24px; --nomB:15px; }
html[data-barre-bureau="grande"]{ --topbar-h:64px; --mkB:36px; --nomB:19px; }
html[data-barre-bureau="xl"]{ --topbar-h:72px; --mkB:42px; --nomB:21px; }
html:is([data-barre-bureau="compacte"], [data-barre-bureau="grande"], [data-barre-bureau="xl"]) .topbar .synMarque svg{ width:var(--mkB); height:var(--mkB); }
html:is([data-barre-bureau="compacte"], [data-barre-bureau="grande"], [data-barre-bureau="xl"]) .topbar .synMarque img{ height:calc(var(--mkB) + 2px); max-width:calc(var(--mkB) * 5.5); }
html:is([data-barre-bureau="compacte"], [data-barre-bureau="grande"], [data-barre-bureau="xl"]) .topbar .synNom{ font-size:var(--nomB); }
@media (max-width:520px){
  html[data-barre-tel]{ --topbar-h:56px; }
  html[data-barre-tel="compacte"]{ --topbar-h:48px; --mkT:22px; --nomT:14px; }
  html[data-barre-tel="grande"]{ --topbar-h:64px; --mkT:32px; --nomT:18px; }
  html[data-barre-tel="xl"]{ --topbar-h:72px; --mkT:38px; --nomT:20px; }
  html:is([data-barre-tel="compacte"], [data-barre-tel="grande"], [data-barre-tel="xl"]) .topbar .synMarque svg{ width:var(--mkT); height:var(--mkT); }
  html:is([data-barre-tel="compacte"], [data-barre-tel="grande"], [data-barre-tel="xl"]) .topbar .synMarque img{ height:calc(var(--mkT) + 2px); max-width:calc(var(--mkT) * 5); }
  html:is([data-barre-tel="compacte"], [data-barre-tel="grande"], [data-barre-tel="xl"]) .topbar .synNom{ font-size:var(--nomT); }
  html[data-barre-tel="standard"] .topbar .synMarque svg{ width:26px; height:26px; }
  html[data-barre-tel="standard"] .topbar .synNom{ font-size:15px; }
  html[data-barre-tel="standard"] .topbar .synMarque img{ height:28px; max-width:140px; }
}

/* ── Écran de chargement : celui de Synétiq, au logo Syndr ── */
#synLoader{ background:var(--bg); font-family:var(--f); transition:opacity var(--tL) ease, visibility var(--tL); }
#synLoader .sl-logo{ display:flex; flex-direction:column; align-items:center; gap:14px; margin-bottom:6px; font-family:var(--f); letter-spacing:0; color:var(--tx); }
#synLoader .sl-logo .synMarque{ flex-direction:column; gap:14px; }
#synLoader .sl-logo svg{ width:60px; height:60px; }
#synLoader .sl-logo .synNom{ font-size:22px; }
/* index.css colorait tout <span> du logo (.sl-logo span) : le nom reste à l'encre, seule sa fin est colorée. */
#synLoader .sl-logo span{ color:var(--tx); }
#synLoader .sl-logo .synNom em{ color:var(--syn); }
#synLoader .sl-sub{ font-size:9.5px; font-weight:800; letter-spacing:.12em; color:var(--mu); margin-bottom:22px; }
#synLoader .sl-track{ width:180px; height:4px; background:var(--sf2); border:1px solid var(--bd); }
#synLoader .sl-bar{ background:var(--tx); }
#synLoader .sl-step{ font-size:11.5px; font-weight:700; color:var(--mu); }
/* Le symbole tourne en boucle, comme celui de Synétiq. */
#synLoader .synMarque .q{ animation:synQB 2.6s cubic-bezier(.3,1.4,.5,1) infinite; }
#synLoader .synMarque .h{ animation:synHB 2.6s ease-in-out infinite; transform-origin:center; transform-box:fill-box; }
@keyframes synQB{ 0%,100%{ transform:translate(var(--x,0),var(--y,0)); opacity:.35 } 30%,75%{ transform:none; opacity:1 } }
@keyframes synHB{ 0%,100%{ transform:scale(.8) } 30%,75%{ transform:none } }
:root.anims-off #synLoader *, :root.anims-off .synRI{ animation:none !important; transition:none !important; }
@media (prefers-reduced-motion:reduce){ #synLoader *, .synRI{ animation:none !important; transition:none !important; } }