/* =============================================================================
   FORMENERGIE — Menu en barre latérale (rail) pour le CRM
   -----------------------------------------------------------------------------
   À CHARGER APRÈS skin-formenergie.css, dans <head> de public/index.html :

       <link rel="stylesheet" href="skin-formenergie-rail.css">
       <script defer src="skin-rail.js"></script>

   Le <script> ne sert qu'au bouton de repli. Sans lui, le rail fonctionne
   quand même, il reste simplement toujours déployé.

   Pour tout annuler : supprime ces deux lignes.

   SÉCURITÉ MOBILE : absolument TOUT ce fichier est enfermé dans
   @media (min-width: 769px). En dessous, aucune règle ne s'applique — ta nav
   basse, ton panneau coulissant « Plus » et tes cartes empilées sont
   structurellement hors d'atteinte.
   ============================================================================= */

@media (min-width: 769px) {

  :root {
    --fe-rail-w: 252px;      /* largeur déployée */
    --fe-rail-mini: 76px;    /* largeur repliée */
    --fe-head-h: 61px;       /* hauteur du header : 12px + 36px + 12px + bordure */
  }

  /* --- Le header reste en haut, sur toute la largeur ---------------------- */
  header {
    position: sticky;
    top: 0;
    z-index: 40;
  }

  /* --- La nav devient une colonne fixe à gauche -------------------------- */
  nav#mainNav {
    position: fixed;
    top: var(--fe-head-h);
    left: 0;
    bottom: 0;
    width: var(--fe-rail-w);
    flex-direction: column;
    align-items: stretch;
    gap: 3px;
    padding: 10px 10px 16px;
    background: var(--fe-rail);
    border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, .07);
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    z-index: 30;
    transition: width 220ms cubic-bezier(.22, 1, .36, 1);
  }
  nav#mainNav::-webkit-scrollbar { width: 8px; }
  nav#mainNav::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .16);
    border-radius: 8px;
  }

  nav#mainNav button {
    flex: 0 0 auto;            /* sinon les 16 entrées se compressent en hauteur */
    width: 100%;
    text-align: left;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
    border-bottom: none;
    border-radius: 11px;
    padding: 11px 12px;
    font-size: 13.5px;
    line-height: 1.5;
    font-weight: 600;
    color: var(--fe-rail-ink, #AED5C7);
    background: transparent;
    transition: background 140ms cubic-bezier(.22, 1, .36, 1),
                color 140ms cubic-bezier(.22, 1, .36, 1);
  }
  nav#mainNav button:hover {
    background: rgba(255, 255, 255, .07);
    color: #fff;
  }
  nav#mainNav button.active {
    background: #11493B;
    color: #fff;
    font-weight: 800;
    border-bottom-color: transparent;
  }

  /* Les séparateurs deviennent des respirations entre groupes */
  nav#mainNav .nav-sep {
    display: block;
    height: 1px;
    margin: 9px 8px;
    background: rgba(255, 255, 255, .09);
    flex: 0 0 auto;
  }

  /* --- Le contenu se décale --------------------------------------------- */
  main {
    margin-left: var(--fe-rail-w);
    margin-right: 0;
    max-width: none;
    transition: margin-left 220ms cubic-bezier(.22, 1, .36, 1);
  }
  /* On garde une colonne de lecture confortable à l'intérieur */
  main > * {
    max-width: 1400px;
  }

  /* --- Le bouton de repli, injecté par skin-rail.js ---------------------- */
  #railToggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    flex: none;
    margin-right: 4px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 10px;
    background: transparent;
    color: rgba(255, 255, 255, .8);
    cursor: pointer;
    padding: 0;
    transition: background 140ms cubic-bezier(.22, 1, .36, 1);
  }
  #railToggle:hover { background: rgba(255, 255, 255, .09); color: #fff; }
  #railToggle svg { width: 17px; height: 17px; display: block; }

  /* --- État replié ------------------------------------------------------- */
  body.rail-mini nav#mainNav { width: var(--fe-rail-mini); }
  body.rail-mini main { margin-left: var(--fe-rail-mini); }
  body.rail-mini nav#mainNav button {
    text-align: center;
    padding: 11px 0;
    font-size: 0;               /* masque le libellé */
    line-height: 1.6;
  }
  /* L'icône est remise par skin-rail.js, qui la copie dans data-icon */
  body.rail-mini nav#mainNav button::before {
    content: attr(data-icon);
    font-size: 19px;
    line-height: 1.2;
  }
  body.rail-mini nav#mainNav .nav-sep { margin: 9px 14px; }

  /* --- Le bouton de repli n'a pas de sens sans le rail ------------------- */
  #loginScreen ~ #railToggle { display: none; }
}

/* En dessous de 769 px : le bouton de repli disparaît, la nav basse reprend. */
@media (max-width: 768px) {
  #railToggle { display: none !important; }
}
