/* ==========================================================================
   Menu de gauche en rail d'icônes (27/10/2026 22h41, Thomas : « quand tu passes sur la gauche, avec les petits logos, ça se ferme et ça s'ouvre.
   T'as pas besoin d'avoir tout le temps la colonne de gauche ouverte, c'est remplacé par des petits logos qui permettent d'optimiser la place »).
   Ordinateur (≥ 761 px) : rail de 48 px, icônes seules et pastilles de compteur visibles ; au survol (ou au clavier), il s'ouvre PAR-DESSUS
   la page avec les libellés, et se referme quand la souris sort. Au doigt (tablette) : 1er appui = ouverture (rail_gauche.js). La zone de travail ne bouge jamais. Téléphone : barre d'onglets en bas, inchangée.
   Fichiers concernés : celui-ci et rail_gauche.js ; les retirer (et leurs lignes dans index.html) rend l'aspect d'avant. Aucune donnée, aucun calcul.
   ========================================================================== */
@media (min-width:761px){
  html body .app{grid-template-columns:48px minmax(0,1fr)}
  html body .app>.main{grid-column:2}   /* le rail est en position fixe : sans cela la page prendrait la 1re colonne */
  html body .side{position:fixed;top:0;left:0;bottom:0;width:48px;z-index:29;padding:10px 4px;gap:10px;overflow-x:hidden;overflow-y:auto;scrollbar-width:none;
    transition:width .14s ease,box-shadow .14s ease}
  html body .side::-webkit-scrollbar{display:none}
  html body .side:hover,html body .side:focus-within{width:232px;box-shadow:6px 0 24px rgb(10 20 45 / .22);transition-delay:.1s}
  /* logo */
  html body .side .logo{justify-content:flex-start;gap:10px;padding:0 4px 4px;min-height:32px}
  html body .side .logo b{width:32px;height:32px;font-size:16px;flex:none}
  html body .side .logo div{display:block;white-space:nowrap;font-family:var(--display);font-weight:600;font-size:14px;line-height:1.2;color:var(--side-fg);opacity:0;transition:opacity .1s}
  html body .side .logo small{color:var(--side-muted)}
  /* titres d'espace (Direction / Commercial) : un trait quand le rail est fermé, le mot quand il est ouvert */
  html body .side .nav{gap:8px}
  html body .side .nav-g+.nav-g{padding-top:8px}
  html body .side .nav-t{text-align:left;font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:0 10px 2px;white-space:nowrap;overflow:hidden;height:14px;color:transparent;transition:color .1s}
  /* entrées : icône seule (40 px de large), libellé à droite qui apparaît à l'ouverture */
  html body .side .nav button{flex-direction:row;justify-content:flex-start;align-items:center;gap:12px;padding:0 11px;min-height:38px;height:38px;font-size:14px;text-align:left;white-space:nowrap;border-radius:9px;overflow:visible}
  html body .side .nav button svg.i{width:18px;height:18px}
  html body .side .nav button .lbl{flex:1;opacity:0;transition:opacity .1s;overflow:hidden;text-overflow:ellipsis}
  /* pastilles de compteur (Mails, Leads, À relancer…) : toujours visibles, sur le coin de l'icône quand le rail est fermé */
  html body .side .nav .n{position:absolute;top:2px;left:22px;right:auto;min-width:16px;height:16px;line-height:16px;padding:0 4px;font-size:9.5px;font-weight:700;border-radius:999px;box-shadow:0 0 0 2px var(--side)}
  /* ouvert */
  html body .side:hover .logo div,html body .side:focus-within .logo div,
  html body .side:hover .nav button .lbl,html body .side:focus-within .nav button .lbl{opacity:1}
  html body .side:hover .nav-t,html body .side:focus-within .nav-t{color:var(--side-muted)}
  html body .side:hover .nav .n,html body .side:focus-within .nav .n{position:static;margin-left:auto;font-size:11px;height:18px;line-height:18px;min-width:20px;box-shadow:none}
  html body .side .nav .deco{margin-top:6px}
  /* au doigt (rail_gauche.js) : « ouvert » = 1er appui sur le rail ; « ferme » = refermé après un choix ou un appui ailleurs (le survol collant du tactile ne le garde pas ouvert) */
  html body .side.ouvert{width:232px;box-shadow:6px 0 24px rgb(10 20 45 / .22)}
  html body .side.ouvert .logo div,html body .side.ouvert .nav button .lbl{opacity:1}
  html body .side.ouvert .nav-t{color:var(--side-muted)}
  html body .side.ouvert .nav .n{position:static;margin-left:auto;font-size:11px;height:18px;line-height:18px;min-width:20px;box-shadow:none}
  html body .side.ferme{width:48px;box-shadow:none}
  html body .side.ferme .logo div,html body .side.ferme .nav button .lbl{opacity:0}
  html body .side.ferme .nav-t{color:transparent}
  html body .side.ferme .nav .n{position:absolute;top:2px;left:22px;margin-left:0;font-size:9.5px;height:16px;line-height:16px;min-width:16px;box-shadow:0 0 0 2px var(--side)}
}
@media (min-width:761px) and (prefers-reduced-motion:reduce){html body .side,html body .side *{transition:none!important}}