/* ═══════════════════════════════════════════════════════════════════════════════
   RAIL ALLYO — LE fichier canonique, UNIQUE pour toutes les surfaces (23/07/2026,
   « j'en ai marre » des copies qui divergent). Servi par www.allyo.group/rail.css :
   le socle, dashboard.allyo.space, la marque blanche (même docroot) et les apps
   Next (app.allyo.pro…) le chargent — PLUS AUCUNE app ne garde sa copie locale.
   Toute évolution du rail se fait ICI et nulle part ailleurs.
   Variables attendues de l'hôte : --accent (couleur société). Tout le reste a un
   défaut intégré — le rail rend pareil quel que soit le thème de l'app hôte.
   ═══════════════════════════════════════════════════════════════════════════════ */

.rail{position:sticky;top:0;flex:0 0 auto;width:64px;height:100vh;background:var(--navy,#0c1c39);display:flex;flex-direction:column;align-items:center;padding:14px 0 16px;gap:6px;z-index:40;font-family:'Plus Jakarta Sans',system-ui,sans-serif}
.rail .brand{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--accent,#0c1c39);color:#fff;margin-bottom:14px;box-shadow:0 8px 20px -8px rgba(0,0,0,.5);text-decoration:none}
.rail .brand svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.rail .brand img{width:34px;height:34px;object-fit:contain;display:block}
.rail .nav,.rail .rnav{display:flex;flex-direction:column;align-items:center;gap:6px;width:100%}
.rail .foot{display:flex;flex-direction:column;align-items:center;gap:5px;width:100%;margin-top:auto}
.r-item{position:relative;width:46px;height:46px;border:0;background:transparent;border-radius:13px;display:grid;place-items:center;color:#8a98b5;cursor:pointer;text-decoration:none;transition:background .15s,color .15s}
.r-item svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:transform .22s cubic-bezier(.34,1.56,.64,1)}
.r-item:hover{color:#fff;background:rgba(255,255,255,.08)}
.r-item.on{color:#fff;background:var(--accent,#0c1c39);box-shadow:0 8px 20px -10px rgba(0,0,0,.6)}
.r-item .tip{position:absolute;left:calc(100% + 11px);top:50%;transform:translateY(-50%) translateX(-5px);background:var(--navy,#0c1c39);color:#fff;font-size:.76rem;font-weight:600;white-space:nowrap;padding:6px 10px;border-radius:8px;opacity:0;pointer-events:none;transition:opacity .14s,transform .14s;box-shadow:0 10px 26px -8px rgba(0,0,0,.55);z-index:50}
.r-item .tip:after{content:"";position:absolute;right:100%;top:50%;transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--navy,#0c1c39)}
.r-item:hover .tip,.r-item:focus-visible .tip{opacity:1;transform:translateY(-50%) translateX(0)}
.r-item:hover svg,.r-item:focus-visible svg{transform:scale(1.18)}
.r-item:active svg{transform:scale(.9);transition-duration:.08s}
@media (prefers-reduced-motion: reduce){
  .r-item svg{transition:none}
  .r-item:hover svg,.r-item:focus-visible svg,.r-item:active svg{transform:none}
}
.r-item .rbadge{position:absolute;top:5px;right:5px;background:#ef4444;color:#fff;font-size:.6rem;font-weight:800;min-width:15px;height:15px;border-radius:999px;display:grid;place-items:center;padding:0 3px}
.rail .sep{width:34px;height:1px;background:rgba(255,255,255,.10);margin:7px 0}
.r-ava{width:34px;height:34px;border-radius:50%;object-fit:cover;display:block;box-shadow:0 0 0 2px var(--accent,#0c1c39)}
.r-ava.ph{display:grid;place-items:center;background:var(--accent,#0c1c39);color:#fff;font-size:.8rem;font-weight:800}
img.r-ava{background:#fff}

/* ── Switcher de modules (sous la marque) ── */
/* Tailles en px (base 16), PAS en rem : le switcher doit rester identique au tenant
   (référence) même dans les apps qui montent la racine html en clamp (Support, Espace
   client, allyo.cloud). Ne pas repasser en rem, sinon le menu regrossit sur ces hôtes. */
.swwrap{position:relative;width:100%;display:flex;justify-content:center;margin-bottom:6px}
.swpop{position:absolute;left:calc(100% + 11px);top:0;width:230px;background:var(--card,#111a2e);border:1px solid var(--line,rgba(255,255,255,.10));border-radius:14px;box-shadow:0 18px 50px -12px rgba(0,0,0,.45);padding:11.2px;opacity:0;visibility:hidden;transform:translateY(-6px);transition:.16s;z-index:60}
.swpop.open{opacity:1;visibility:visible;transform:none}
.swpop-head{font-size:11.2px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--muted,#8ea2c8);padding:3.2px 6.4px 8.8px;border-bottom:1px solid var(--line,rgba(255,255,255,.10));margin-bottom:6.4px}
.swpop-empty{font-size:12.8px;color:var(--muted,#8ea2c8);text-align:center;padding:16px 8px;line-height:1.5}
.swpop-item{display:flex;align-items:center;gap:10.4px;padding:8.8px 8px;border-radius:10px;color:var(--ink,#eaf0fb);text-decoration:none;transition:background .13s}
.swpop-item+.swpop-item{margin-top:2.4px}
.swpop-item:hover{background:var(--surf,#16213a)}
.swpop-item .swi{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:var(--surf,#16213a);color:var(--accent,#4fe3c1)}
.swpop-item .swi svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.swpop-item b{display:block;font-size:13.76px;font-weight:700;line-height:1.2}
.swpop-item em{display:block;font-style:normal;font-size:11.52px;color:var(--muted,#8ea2c8);line-height:1.3;margin-top:1px}
.swpop-item.off{opacity:.55;cursor:default}
/* Tout petit coin « nouvel onglet » : discret, visible au survol de la ligne. */
.swnb{flex:0 0 auto;margin-left:auto;width:20px;height:20px;border-radius:6px;display:grid;place-items:center;color:var(--faint,#5f7099);opacity:0;transition:.13s}
.swpop-item:hover .swnb{opacity:1}
.swnb:hover{color:var(--mint,#4fe3c1);background:var(--surf,#16213a)}
.swnb svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* ── Fiche utilisateur (bas du rail) ── */
.uwrap{position:relative;width:100%;display:flex;justify-content:center}
.upop{position:absolute;left:calc(100% + 11px);bottom:0;width:230px;background:var(--card,#111a2e);border:1px solid var(--line,rgba(255,255,255,.10));border-radius:14px;box-shadow:0 18px 50px -12px rgba(0,0,0,.45);padding:.7rem;opacity:0;visibility:hidden;transform:translateY(6px);transition:.16s;z-index:60}
.upop.open{opacity:1;visibility:visible;transform:none}
.upop .uhead{display:flex;align-items:center;gap:.6rem;padding:.3rem .4rem .6rem;border-bottom:1px solid var(--line,rgba(255,255,255,.10));margin-bottom:.4rem}
.upop .uhead .av{width:38px;height:38px;border-radius:50%;object-fit:cover;flex:0 0 auto;background:var(--accent,#0c1c39);color:#fff;display:grid;place-items:center;font-weight:800;font-size:.85rem}
.upop .uhead b{font-size:.85rem;color:var(--ink,#eaf0fb);display:block;line-height:1.2}
.upop .uhead span{font-size:.72rem;color:var(--muted,#8ea2c8)}
.upop a,.upop button.upop-item{display:flex;align-items:center;gap:.55rem;width:100%;padding:.5rem .55rem;border-radius:9px;font-size:.84rem;font-weight:600;color:var(--ink,#eaf0fb);background:none;border:0;cursor:pointer;text-align:left;font-family:inherit}
.upop a:hover,.upop button.upop-item:hover{background:var(--surf,#16213a)}
.upop a svg,.upop button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.upop .danger{color:#dc2626}
.upop-sep{display:block;height:1px;background:var(--line,rgba(255,255,255,.10));margin:.4rem .3rem}
/* Entrée réservée titulaire/Superadmin (menu OU rail) : icône dans l'accent, pour
   la distinguer d'un coup d'œil des entrées ouvertes à tous (demande Mathieu 27/07). */
.upop .priv,.r-item.priv{color:var(--accent,#0c1c39)}

/* ── Chat (pied du rail) : panneau flottant, jamais de navigation — on reste dans le
   module où l'on est (demande Mathieu 27/07). Même mécanique que .upop (position,
   transition), mais plus large/haut pour accueillir l'iframe du chat. ── */
.chwrap{position:relative;width:100%;display:flex;justify-content:center}
.chpop{position:absolute;left:calc(100% + 11px);bottom:0;width:380px;height:min(600px,80vh);
  display:flex;flex-direction:column;background:var(--card,#111a2e);border:1px solid var(--line,rgba(255,255,255,.10));
  border-radius:14px;box-shadow:0 18px 50px -12px rgba(0,0,0,.45);opacity:0;visibility:hidden;
  transform:translateY(6px);transition:.16s;z-index:60;overflow:hidden}
.chpop.open{opacity:1;visibility:visible;transform:none}
.chpop-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:.5rem;
  padding:.65rem .8rem;border-bottom:1px solid var(--line,rgba(255,255,255,.10));font-size:.85rem;
  font-weight:700;color:var(--ink,#eaf0fb)}
.chpop-nb{display:grid;place-items:center;width:26px;height:26px;border-radius:8px;color:var(--muted,#8ea2c8)}
.chpop-nb:hover{color:var(--mint,#4fe3c1);background:var(--surf,#16213a)}
.chpop-nb svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.chpop-frame{flex:1;width:100%;border:0;background:var(--card,#111a2e)}
.r-item.priv:hover{color:var(--accent,#0c1c39)}

/* ── Un SEUL gabarit de rail, à toutes les largeurs d'écran (demande Mathieu 27/07 :
   le rail doit être identique partout, la règle mobile ≤560px qui le resserrait
   créait un « rail différent » selon la fenêtre — supprimée, ne pas la remettre). ── */