/* ══════════════════════════════════════════════════════════════════════════════
   Coquille de console — volet latéral + barre haute (plan.md §411, lot 4/7).

   Fichier SÉPARÉ de style.css (88 ko) et chargé après lui, volontairement : c'est le plus gros
   changement visuel du projet, il doit rester isolé et retirable en enlevant deux balises de
   stats.html. Aucune règle existante n'est modifiée ici, uniquement complétée.

   Réutilise les jetons de thème du site (--surface, --border, --accent coral, --text-muted) :
   la coquille change la disposition, pas l'identité visuelle.

   Téléphone : tout est neutralisé. Le regroupement des barres en bas d'écran (#bottom-bars,
   layoutNav dans main.js) est déjà pensé pour le pouce et fonctionne — la coquille ne s'y
   substitue pas, elle n'ajoute qu'un tiroir pour le compte et la plateforme.
   ══════════════════════════════════════════════════════════════════════════════ */

:root {
  --shell-w: 236px;
  --shell-owner: #e8a93b;          /* ambre : niveau administrateur global (§408) */
}

/* ── Décalage du contenu : le volet est fixe, le reste vit à sa droite ── */
body.shell:not(.dev-phone) { padding-left: var(--shell-w); }

/* Lien d'évitement (§415) : avec 14 entrées de volet avant le contenu, un utilisateur au clavier
   ou au lecteur d'écran devait les traverser à chaque page. Invisible tant qu'il n'a pas le focus. */
#shell-skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--accent); border-radius: 0 0 8px 0;
  padding: 10px 16px; font-size: 13px; text-decoration: none;
}
#shell-skip:focus { left: 0; }

/* Les barres d'origine restent dans le DOM (le moteur d'onglets de main.js lit et écrit leur
   style/classe) mais deviennent invisibles : le volet les reflète. !important car switchSection()
   pose un `style.display` en ligne sur #main-tabs. */
body.shell:not(.dev-phone) #section-nav,
body.shell:not(.dev-phone) #main-tabs { display: none !important; }

/* ── Volet latéral ── */
#side-nav {
  position: fixed; inset: 0 auto 0 0; width: var(--shell-w);
  background: var(--surface); border-right: 1px solid var(--border);
  display: flex; flex-direction: column; z-index: 40;
  overflow-y: auto; overscroll-behavior: contain;
}
body.dev-phone #side-nav { display: none; }

.side-brand {
  display: flex; align-items: center; gap: 9px;
  padding: 14px 16px 13px; border-bottom: 1px solid var(--border);
  font-size: 15px; font-weight: 700; color: var(--accent);
  text-decoration: none; flex: none;
}
.side-brand:hover { color: var(--accent); }

/* Sélecteur de serveur — en tête du volet : le serveur courant conditionne tout ce qui suit,
   il se lit donc avant le reste (remplace le bouton d'en-tête du §404). */
.side-server {
  display: flex; align-items: center; gap: 9px; margin: 12px 12px 6px;
  padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--bg); color: var(--text); text-decoration: none;
  transition: border-color .15s, background .15s;
}
.side-server:hover { border-color: var(--accent); color: var(--text); }
.side-server .sv-ico { font-size: 15px; flex: none; }
.side-server .sv-name {
  flex: 1; min-width: 0; font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.side-server .sv-chev { color: var(--text-muted); font-size: 10px; flex: none; }
.side-server.no-server .sv-name { color: var(--text-muted); font-weight: 500; }

.side-group {
  font-size: 10px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--text-muted); padding: 16px 16px 6px; font-weight: 600;
}
.side-list { display: flex; flex-direction: column; gap: 1px; padding: 0 8px; }

.side-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border: none; border-radius: 7px;
  background: transparent; color: var(--text-muted);
  font-size: 13px; font-family: inherit; text-align: left;
  cursor: pointer; width: 100%;
  box-shadow: inset 2px 0 0 transparent;
  transition: background .12s, color .12s;
}
.side-item:hover { background: var(--bg); color: var(--text); }
.side-item.active {
  background: var(--bg); color: var(--text); font-weight: 600;
  box-shadow: inset 2px 0 0 var(--accent);
}
.side-item:focus-visible { outline: 2px solid var(--accent2); outline-offset: -2px; }
.side-item .it-ico { width: 17px; text-align: center; flex: none; }
.side-item .it-lbl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
                     white-space: nowrap; }
.side-foot { margin-top: auto; padding: 12px 16px; border-top: 1px solid var(--border);
             font-size: 11px; color: var(--text-muted); flex: none; }

/* ── Barre haute : le <header> existant devient le fil d'Ariane + compte ── */
body.shell header { position: sticky; top: 0; z-index: 30; }
body.shell:not(.dev-phone) header .back-link { display: none; }
body.shell header h1 { font-size: 15px; font-weight: 600; color: var(--text); }
body.shell header h1 .h1-long { color: var(--text-muted); font-weight: 500; }

#shell-burger {
  display: none; background: transparent; border: none; color: var(--text);
  font-size: 19px; cursor: pointer; padding: 2px 6px; line-height: 1;
}
body.dev-phone #shell-burger { display: block; }

/* #auth-nav ne garde que les deux boutons d'action (cf. main.js::applyAdminUI) : la coquille les
   déclenche depuis son menu par .click(), ils n'ont donc plus à être visibles. Ils restent dans
   le DOM — la page fonctionne encore si shell.js ne charge pas. */
body.shell #auth-nav { display: none; }

/* ── Menu de compte (barre haute) ── */
#shell-account { position: relative; margin-left: auto; flex: none; }
.acct-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 11px 4px 6px; border: 1px solid var(--border); border-radius: 20px;
  background: var(--bg); color: var(--text); cursor: pointer;
  font-family: inherit; font-size: 12px;
}
.acct-btn:hover { border-color: var(--accent); }
.acct-btn:focus-visible { outline: 2px solid var(--accent2); outline-offset: 1px; }
.acct-av {
  width: 23px; height: 23px; border-radius: 50%; flex: none;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: var(--border); color: var(--text);
}
.acct-btn.is-owner .acct-av { background: var(--shell-owner); color: #1a1206; }
.acct-name { font-weight: 600; max-width: 130px; overflow: hidden;
             text-overflow: ellipsis; white-space: nowrap; }
body.dev-phone .acct-name { display: none; }
.acct-lvl {
  font-size: 9px; letter-spacing: .09em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 11px; white-space: nowrap;
  background: rgba(232, 169, 59, .14); color: var(--shell-owner);
  border: 1px solid rgba(232, 169, 59, .45);
}
.acct-chev { color: var(--text-muted); font-size: 9px; }

.acct-drop {
  position: absolute; top: calc(100% + 8px); right: 0; width: 232px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 6px; z-index: 50; box-shadow: 0 18px 40px -14px rgba(0, 0, 0, .8);
}
.acct-drop[hidden] { display: none; }
.acct-head { padding: 9px 10px 10px; border-bottom: 1px solid var(--border); margin-bottom: 5px; }
.acct-head b { display: block; font-size: 13px; color: var(--text); }
.acct-head span { font-size: 11px; color: var(--text-muted); }
.acct-grp { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase;
            color: var(--text-muted); padding: 9px 10px 4px; font-weight: 600; }
.acct-drop a, .acct-drop button {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 10px; border: none; border-radius: 7px;
  background: transparent; color: var(--text-muted);
  font-size: 12.5px; font-family: inherit; text-align: left;
  text-decoration: none; cursor: pointer;
}
.acct-drop a:hover, .acct-drop button:hover { background: var(--bg); color: var(--text); }
.acct-drop a:focus-visible, .acct-drop button:focus-visible {
  outline: 2px solid var(--accent2); outline-offset: -2px;
}
.acct-drop .is-platform { color: var(--shell-owner); }
.acct-drop .is-danger { color: var(--danger); }
.acct-drop hr { border: none; border-top: 1px solid var(--border); margin: 5px 0; }

/* ── Tiroir mobile : compte + plateforme uniquement (la navigation entre onglets
      reste dans #bottom-bars, déjà à portée de pouce) ── */
#shell-drawer {
  position: fixed; inset: 0; z-index: 60; display: flex;
  background: rgba(0, 0, 0, .55);
}
#shell-drawer[hidden] { display: none; }
.drawer-panel {
  width: min(86vw, 320px); background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  overflow-y: auto; padding-bottom: 18px;
}
.drawer-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 16px; border-bottom: 1px solid var(--border);
}
.drawer-head b { flex: 1; font-size: 14px; color: var(--text); }
.drawer-close { background: transparent; border: none; color: var(--text-muted);
                font-size: 20px; cursor: pointer; line-height: 1; padding: 0 4px; }
.drawer-panel .side-server { margin: 12px 12px 4px; }
.drawer-panel .acct-grp { padding: 12px 16px 4px; }
.drawer-panel .side-item { padding: 10px 12px; font-size: 14px; }
.drawer-panel .side-list { padding: 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .side-item, .acct-btn, .side-server { transition: none; }
}