/* ═══ GenForge — Menu gauche, proposition C « Rail d'icônes » (09/10/2026) ═══
   Rail plus fin (224 px) avec grandes icônes + libellés, sections en séparateurs, favoris/plus utilisés épinglés en haut (patch-C.js).
   Entre 769 et 1180 px : rail icônes seules (76 px) avec info-bulles. ≤ 768 px : menu mobile ☰ Outils inchangé (gfNavSetOpen). */
:root{ --gf-rail:224px; }
@media (min-width:769px){
  .tabs{ width:var(--gf-rail) !important; }
  body > .container{ margin-left:var(--gf-rail) !important; }
  .app-header{ width:min(calc(100vw - var(--gf-rail)),1040px) !important; }
}
.tabs{
  background:radial-gradient(140% 30% at 50% 0%, rgba(249,115,22,.12), transparent 70%), linear-gradient(180deg,#121010,#0a0909 60%) !important;
  border-right:1px solid rgba(249,115,22,.22) !important; box-shadow:10px 0 40px -26px rgba(249,115,22,.5);
  padding:14px 10px 24px !important; gap:1px !important; scrollbar-width:thin; scrollbar-color:rgba(249,115,22,.35) transparent;
}
.tabs .side-brand{ border-bottom:none !important; padding:0 0 10px !important; margin:0 0 4px !important; }
.tabs .side-brand img{ height:128px !important; border-radius:14px !important; border:1px solid rgba(249,115,22,.35); box-shadow:0 10px 30px -14px rgba(249,115,22,.6); object-position:center 40% !important; }
/* Favoris */
.gf-pins{ margin:0 0 10px; }
.gf-pins-h{ display:flex; align-items:center; gap:6px; margin:2px 4px 6px; color:#fdba74; font:800 10px/1 system-ui; letter-spacing:.16em; text-transform:uppercase; }
.gf-pins-h small{ font:600 9.5px/1 system-ui; letter-spacing:.02em; text-transform:none; color:#8f8882; }
.gf-pins-grid{ display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.gf-pin{ all:unset; box-sizing:border-box; cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-height:62px; padding:8px 4px;
  border-radius:12px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.08); color:#d6d3d1; font:600 11px/1.15 system-ui; text-align:center; }
.gf-pin .gf-pin-ico{ font-size:22px; line-height:1; }
.gf-pin:hover{ border-color:rgba(249,115,22,.45); background:rgba(249,115,22,.08); color:#fff; }
.gf-pin:focus-visible{ outline:2px solid #fdba74; outline-offset:1px; }
.gf-pin.is-active{ border-color:rgba(249,115,22,.7); background:linear-gradient(180deg,rgba(249,115,22,.28),rgba(249,115,22,.08)); color:#fff; box-shadow:0 0 18px -6px rgba(249,115,22,.9); }
/* Sections = séparateurs */
.tabs .nav-group{ border:none !important; background:none !important; padding:0 !important; margin:0 0 4px !important; border-radius:0 !important; }
.tabs .nav-group .nav-section-label{ display:flex; align-items:center; gap:8px; padding:12px 6px 6px !important; color:#a8a29e !important; opacity:1 !important; font-size:9.5px !important; font-weight:800 !important; letter-spacing:.18em !important; }
.tabs .nav-group .nav-section-label::after{ content:""; flex:1; height:1px; background:linear-gradient(90deg,rgba(249,115,22,.4),rgba(255,255,255,.04)); }
/* Items : grande icône en tuile + libellé */
.tabs .tab-btn{ gap:11px !important; padding:5px 8px 5px 5px !important; border-radius:12px !important; border:1px solid transparent !important; color:#c9c3bd !important; font-size:13px !important; font-weight:550 !important; line-height:1.2 !important; background:transparent; min-height:42px; }
.tabs .tab-btn .gf-ico{ flex:none; width:32px; height:32px; display:inline-flex; align-items:center; justify-content:center; font-size:17px; line-height:1; border-radius:10px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.06); }
.tabs .tab-btn:hover{ background:rgba(255,255,255,.04) !important; color:#fff !important; }
.tabs .tab-btn:hover .gf-ico{ border-color:rgba(249,115,22,.45); }
.tabs .tab-btn:focus-visible{ outline:2px solid #fdba74 !important; outline-offset:1px; }
.tabs .tab-btn.active{ color:#fff !important; font-weight:700 !important; background:linear-gradient(90deg,rgba(249,115,22,.16),transparent) !important; box-shadow:none !important; border-color:rgba(249,115,22,.25) !important; }
.tabs .tab-btn.active .gf-ico{ background:linear-gradient(180deg,#ff9a3c,#e2580c); border-color:#ffb36b; box-shadow:0 0 16px -2px rgba(255,138,43,.85); }
/* Rail icônes seules : 769–1180 px (remplace aussi la barre horizontale existante 769–920 px) */
@media (min-width:769px) and (max-width:1180px){
  :root{ --gf-rail:76px; }
  .tabs{ position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important; height:auto !important; flex-direction:column !important; flex-wrap:nowrap !important;
    overflow-y:auto !important; overflow-x:hidden !important; padding:10px 8px 20px !important; border-bottom:none !important; z-index:50 !important; align-items:stretch !important; }
  .tabs .side-brand{ display:flex !important; justify-content:center !important; padding:0 0 8px !important; }
  .tabs .side-brand img{ width:56px !important; height:56px !important; object-position:50% 16% !important; border-radius:14px !important; }
  body > .container{ margin:0 !important; margin-left:var(--gf-rail) !important; max-width:none !important; padding:1.5rem 1.5rem 3rem !important; }
  .app-header{ margin-left:-1.5rem !important; margin-top:-1.5rem !important; }
  .tabs .tab-btn{ width:auto !important; justify-content:center !important; padding:4px !important; min-height:44px; }
  .tabs .tab-btn .gf-lbl{ position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .tabs .tab-btn .gf-ico{ width:38px; height:38px; font-size:19px; }
  .tabs .nav-group .nav-section-label{ font-size:0 !important; padding:8px 4px 4px !important; }
  .gf-pins-h{ display:none; } .gf-pins-grid{ grid-template-columns:1fr; } .gf-pin{ min-height:46px; } .gf-pin .gf-pin-lbl{ display:none; }
}
@media (max-width:768px){
  .tabs{ background:linear-gradient(180deg,#131110,#0a0909) !important; padding:64px 12px 24px !important; }
  .gf-pins-grid{ grid-template-columns:repeat(4,1fr); } .gf-pin{ min-height:64px; font-size:10.5px; }
  .tabs .tab-btn{ min-height:46px; font-size:14px !important; }
}
/* En-tête étroit (769–1000 px) : les boutons passent sur la mosaïque claire de la bannière → voile sombre derrière eux */
@media (min-width:769px) and (max-width:1000px){
  .app-header-badges{ background:rgba(8,6,5,.62) !important; border-radius:12px; padding:6px !important; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); }
}