/* MENU DE NAVIGATION WEB — voir menu.js.
   Jetons de couleur définis localement : ce fichier est chargé par quatre pages (chat, tableau,
   équipe, profil) qui n'ont PAS le même jeu de variables. style.css et tableau.html nomment leurs
   couleurs différemment (--border vs --bord, --panel vs --carte). Emprunter les leurs marcherait
   sur une page et sortirait sans style sur les trois autres — c'est exactement le bug qui a fait
   sortir le formulaire de fiche tout nu la semaine dernière. */
#topla-menu {
  --tm-fond: #ffffff; --tm-fond2: #eef0f2; --tm-txt: #111b21; --tm-doux: #667781;
  --tm-bord: #e1e4e7; --tm-accent: #8b1e3f;
}
@media (prefers-color-scheme: dark) {
  #topla-menu {
    --tm-fond: #161618; --tm-fond2: #242427; --tm-txt: #e9edef; --tm-doux: #9a9aa2;
    /* Pas le #a5324f du mode sombre des autres pages : ici l'accent sert de COULEUR DE TEXTE sur le
       fond #242427 de l'entrée active, et #a5324f y passe sous le seuil de contraste lisible. */
    --tm-bord: #2c2c31; --tm-accent: #e8809b;
  }
}

/* ☰ — flottant, au-dessus de tout. Il reste visible tiroir ouvert ou fermé : c'est aussi le bouton
   qui REFERME, et un bouton qui disparaît quand on en a besoin est un bouton raté. */
.tm-burger {
  position: fixed; top: 10px; left: 10px; z-index: 1002;
  width: 42px; height: 42px; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--tm-bord); background: var(--tm-fond); color: var(--tm-txt);
  font-size: 19px; line-height: 1; padding: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
}
.tm-burger:hover { background: var(--tm-fond2); }

.tm-tiroir {
  position: fixed; top: 0; left: 0; bottom: 0; width: 268px; z-index: 1001;
  background: var(--tm-fond); border-right: 1px solid var(--tm-bord);
  display: flex; flex-direction: column;
  padding: 62px 10px 10px;           /* 62px : on laisse la place au ☰ */
  transform: translateX(-100%); transition: transform .18s ease;
  overflow-y: auto;
}
body.tm-ouvert .tm-tiroir { transform: none; }

.tm-voile {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
body.tm-ouvert .tm-voile { opacity: 1; pointer-events: auto; }

.tm-tete { display: flex; align-items: center; gap: 9px; padding: 0 8px 12px; }
.tm-tete img { width: 30px; height: 30px; border-radius: 8px; }
.tm-tete b { font-size: 15px; color: var(--tm-txt); }

.tm-liste { display: flex; flex-direction: column; gap: 2px; }
.tm-item {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 10px; border-radius: 10px;
  color: var(--tm-txt); text-decoration: none; font-size: 14.5px; font-weight: 500;
  background: transparent; border: 0; width: 100%; text-align: left; cursor: pointer;
  font-family: inherit;
}
.tm-item:hover { background: var(--tm-fond2); }
/* L'onglet actif est marqué par la COULEUR **et** par le gras : sur un écran mal calibré ou en
   plein soleil, un simple fond légèrement teinté ne se distingue pas. */
.tm-item.on { background: var(--tm-fond2); color: var(--tm-accent); font-weight: 700; }
.tm-ic { font-size: 16px; width: 20px; text-align: center; flex: 0 0 auto; }

.tm-bas { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--tm-bord); }
.tm-qui { color: var(--tm-doux); font-size: 12px; padding: 0 10px 6px; }
.tm-sortir { color: var(--tm-doux); }

/* GRAND ÉCRAN — le tiroir devient une colonne fixe et POUSSE la page au lieu de la recouvrir :
   sur un ordinateur il y a la place, et un menu toujours visible se parcourt des yeux au lieu de se
   chercher. C'est la demande d'origine : « sur l'ordi, le menu onglet comme sur l'app ».
   Sous 1000px on garde le tiroir qui recouvre — pousser le contenu écraserait le chat. */
@media (min-width: 1000px) {
  body.tm-ouvert { padding-left: 268px; }
  body.tm-ouvert .tm-voile { opacity: 0; pointer-events: none; }
}