/* OctoFan : barre commune aux 4 outils + hub (même place partout) */
:root { --of-bar: 40px; }
#of-bar { position: sticky; top: 0; z-index: 100000; height: var(--of-bar); box-sizing: border-box; display: flex; align-items: center; gap: 6px;
  padding: 0 14px; white-space: nowrap;
  background: linear-gradient(180deg, #150c03 0%, #0b0c10 100%); border-bottom: 1px solid #c8a951;
  font: 600 12px 'Segoe UI', system-ui, sans-serif; color: #cdc5ae; }
#of-bar a { display: inline-flex; align-items: center; gap: 6px; height: 28px; box-sizing: border-box; padding: 0 10px; border-radius: 7px;
  border: 1px solid transparent; color: inherit; text-decoration: none; font: inherit; letter-spacing: .3px; transition: all .15s; }
#of-bar a:hover { color: #ffe08a; border-color: #c8a95166; background: #c8a95112; }
#of-bar a.of-hub { color: #f0cd6a; font-weight: 800; letter-spacing: 1.2px; border-color: #c8a95155; }
#of-bar a.active { background: #c8a951; border-color: #c8a951; color: #1a1200; }
#of-bar .of-sep { width: 1px; height: 18px; background: #c8a95144; margin: 0 6px; flex-shrink: 0; }
#of-bar .of-spacer { flex: 1; }
#of-bar #of-account { display: inline-flex; align-items: center; gap: 8px; }
/* compte unique : les boutons de connexion propres à chaque outil sont remplacés par celui de la barre */
#auth-btn, #authBtn { display: none !important; }
#of-bar #of-account { position: relative; }
#of-bar .of-login { height: 28px; padding: 0 12px; border-radius: 7px; border: 1px solid #5865f2; background: #5865f2; color: #fff; font: 700 12px 'Segoe UI', system-ui, sans-serif; cursor: pointer; }
#of-bar .of-login:hover { background: #6d78f7; }
#of-bar .of-chip { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px 0 4px; border-radius: 16px; border: 1px solid #c8a95155; background: #ffffff08; color: #e8dfc6; font: 600 12px 'Segoe UI', system-ui, sans-serif; cursor: pointer; }
#of-bar .of-chip:hover { border-color: #c8a951; background: #c8a95114; }
#of-bar .of-chip img { width: 22px; height: 22px; border-radius: 50%; }
#of-bar .of-chip .of-av { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #c8a95133; }
#of-bar .of-chip .of-cls { font-size: 11px; opacity: .9; }
#of-bar .of-chip .of-caret { opacity: .6; }
#of-bar .of-panel { position: absolute; right: 0; top: 36px; width: 320px; max-width: 92vw; background: #12131a; border: 1px solid #c8a951; border-radius: 10px; padding: 12px; box-shadow: 0 10px 30px #000c; z-index: 10001; font: 12px 'Segoe UI', system-ui, sans-serif; color: #d8d0ba; white-space: normal; text-align: left; }
#of-bar .of-panel a { display: inline; height: auto; padding: 0; border: 0; background: none; color: #f0cd6a; }
#of-bar .of-panel a:hover { text-decoration: underline; background: none; border: 0; }
#of-bar .of-p-head { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid #ffffff14; margin-bottom: 8px; }
#of-bar .of-p-head img { width: 34px; height: 34px; border-radius: 50%; }
#of-bar .of-sub { color: #8f8a7a; font-size: 11px; }
#of-bar .of-p-sec { padding: 8px 0; border-bottom: 1px solid #ffffff0e; }
#of-bar .of-p-title { font-size: 10px; letter-spacing: 1.2px; text-transform: uppercase; color: #c8a951; margin-bottom: 5px; }
#of-bar .of-char { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; background: none; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; color: inherit; font: 600 12px 'Segoe UI', system-ui, sans-serif; cursor: pointer; }
#of-bar .of-char:hover { background: #ffffff0a; }
#of-bar .of-char.on { border-color: #c8a95166; background: #c8a9511a; }
#of-bar .of-tog { display: flex; align-items: flex-start; gap: 6px; cursor: pointer; line-height: 1.35; }
#of-bar .of-tog.ro { opacity: .7; cursor: default; }
#of-bar .of-p-foot { padding-top: 8px; text-align: right; }
#of-bar .of-out { background: none; border: 1px solid #ffffff2a; color: #d8d0ba; border-radius: 6px; padding: 4px 10px; font: 600 11px 'Segoe UI', system-ui, sans-serif; cursor: pointer; }
#of-bar .of-out:hover { border-color: #e05050; color: #ff8a8a; }
@media (max-width: 760px) { #of-bar .of-lbl { display: none; } #of-bar a.of-tool { padding: 0 9px; } }