/* ══════════════════════════════════════════════════════════════ J.DAILY — LAYOUT DESKTOP Activé via classe .desktop-mode sur Stocké en localStorage : jdaily_layout = 'desktop' | 'mobile' ══════════════════════════════════════════════════════════════ */ html.desktop-mode body { height:100%; overflow:hidden; } html.desktop-mode .app { display:block; height:100vh; overflow:hidden; } html.desktop-mode .bottom-nav { display:none !important; } html.desktop-mode .top-bar { display:none !important; } html.desktop-mode .screen { margin-left:240px !important; margin-top:56px !important; padding:24px 32px 40px !important; height:calc(100vh - 56px) !important; overflow-y:auto !important; max-width:none !important; width:auto !important; } /* SIDEBAR */ html.desktop-mode .desktop-sidebar { position:fixed; top:0; left:0; bottom:0; width:240px; background:#1A1033; display:flex; flex-direction:column; overflow-y:auto; border-right:1px solid rgba(255,255,255,0.06); z-index:500; } html.desktop-mode .desktop-sidebar-logo { padding:20px 20px 14px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; } html.desktop-mode .desktop-sidebar-logo img { width:110px; height:auto; filter:brightness(0) invert(1); display:block; } html.desktop-mode .desktop-sidebar-user { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid rgba(255,255,255,0.06); flex-shrink:0; } html.desktop-mode .desktop-sidebar-av { width:34px; height:34px; border-radius:50%; background:#582583; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700; color:white; flex-shrink:0; } html.desktop-mode .desktop-sidebar-name { font-size:13px; font-weight:600; color:white; line-height:1.3; } html.desktop-mode .desktop-sidebar-role { font-size:11px; color:rgba(255,255,255,0.4); } html.desktop-mode .desktop-nav { flex:1; padding:6px 0; overflow-y:auto; } html.desktop-mode .desktop-nav-section { font-size:10px; font-weight:700; letter-spacing:1px; color:rgba(255,255,255,0.3); text-transform:uppercase; padding:10px 16px 4px; } html.desktop-mode .desktop-nav-link { display:flex; align-items:center; gap:10px; padding:9px 16px; font-size:13px; color:rgba(255,255,255,0.6); cursor:pointer; transition:all 0.15s; text-decoration:none; border-left:3px solid transparent; user-select:none; } html.desktop-mode .desktop-nav-link:hover { background:rgba(255,255,255,0.05); color:white; } html.desktop-mode .desktop-nav-link.active { background:rgba(123,63,196,0.2); color:white; border-left-color:#7B3FC4; } html.desktop-mode .desktop-nav-icon { font-size:16px; width:20px; text-align:center; flex-shrink:0; line-height:1; } html.desktop-mode .desktop-sidebar-footer { padding:12px 16px; border-top:1px solid rgba(255,255,255,0.06); flex-shrink:0; } html.desktop-mode .desktop-logout { display:flex; align-items:center; gap:8px; font-size:12px; color:rgba(255,255,255,0.4); cursor:pointer; padding:6px 0; transition:color 0.15s; } html.desktop-mode .desktop-logout:hover { color:#EF4444; } /* TOPBAR */ html.desktop-mode .desktop-topbar { position:fixed; top:0; left:240px; right:0; height:56px; background:var(--bg-card,white); border-bottom:1px solid var(--border,#E8E2F2); display:flex; align-items:center; justify-content:space-between; padding:0 28px; z-index:400; box-shadow:0 1px 4px rgba(88,37,131,0.06); } [data-theme="dark"] html.desktop-mode .desktop-topbar { background:#16102A; border-color:rgba(255,255,255,0.08); } html.desktop-mode .desktop-topbar-title { font-size:16px; font-weight:700; } html.desktop-mode .desktop-topbar-right { display:flex; align-items:center; gap:14px; } /* SCROLLBARS */ html.desktop-mode .desktop-sidebar::-webkit-scrollbar { width:3px; } html.desktop-mode .desktop-sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,0.1); border-radius:2px; } html.desktop-mode .screen::-webkit-scrollbar { width:5px; } html.desktop-mode .screen::-webkit-scrollbar-thumb { background:rgba(88,37,131,0.15); border-radius:3px; } /* LAYOUT DESKTOP */ html.desktop-mode .stats-grid { grid-template-columns:repeat(4,1fr) !important; } html.desktop-mode .card { padding:20px !important; } html.desktop-mode .modal-overlay { padding:40px; align-items:center; } html.desktop-mode .modal { max-width:540px; margin:0 auto; border-radius:20px; } html.desktop-mode .prospect-detail { position:fixed !important; right:0 !important; top:56px !important; bottom:0 !important; width:420px !important; border-radius:0 !important; border-left:1px solid #E8E2F2 !important; box-shadow:-4px 0 24px rgba(88,37,131,0.1) !important; } html.desktop-mode .event-fiche { position:fixed !important; right:0 !important; top:56px !important; bottom:0 !important; width:400px !important; border-radius:0 !important; border-left:1px solid #E8E2F2 !important; } html.desktop-mode .jerry-float { bottom:24px !important; right:24px !important; } .layout-toggle-btn:hover { transform:scale(1.1); } html.desktop-mode /* ── PAGE JERRY — corriger les éléments fixed qui ignorent la sidebar ── */ html.desktop-mode .chat-input-wrap { left:240px !important; } html.desktop-mode .chat-disclaimer { left:240px !important; } html.desktop-mode .chat-messages { padding-bottom:140px !important; } /* ── PAGE JERRY — layout flex column spécifique ──────────────── */ html.desktop-mode body.page-jerry .app { margin-left:240px; margin-top:56px; height:calc(100vh - 56px); width:calc(100% - 240px); overflow:hidden; } html.desktop-mode body.page-jerry .screen { margin-left:0 !important; margin-top:0 !important; width:100% !important; height:100% !important; padding:0 !important; } html.desktop-mode body.page-jerry .chat-input-wrap { left:240px !important; } html.desktop-mode body.page-jerry .chat-disclaimer { left:240px !important; } /* ════════════════════════════════════════════════════════════ CORRECTIONS DESKTOP — éléments fixed qui ignorent la sidebar Toutes les overlays plein écran et fixed doivent partir de left:240px (sidebar) et top:56px (topbar) ════════════════════════════════════════════════════════════ */ /* CRM — fiche prospect */ html.desktop-mode .detail-overlay { left:240px !important; top:56px !important; } /* Agenda — fiche événement */ html.desktop-mode .event-fiche { left:240px !important; top:56px !important; width:calc(100% - 240px) !important; border-radius:0 !important; } /* Clients — fiche client */ html.desktop-mode .detail-overlay { left:240px !important; top:56px !important; } /* Coaching — overlays */ html.desktop-mode .clients-list-modal, html.desktop-mode .faceaface-overlay { left:240px !important; top:56px !important; } /* Défis — overlay */ html.desktop-mode .defi-overlay { left:240px !important; top:56px !important; } /* Formation — leçon overlay */ html.desktop-mode .lecon-overlay { left:240px !important; top:56px !important; } /* Médiathèque — viewer */ html.desktop-mode .viewer-overlay { left:240px !important; top:56px !important; } /* Rapport — jerry text floating */ html.desktop-mode .jerry-text { left:240px !important; } /* Jerry — déjà corrigé mais on renforce */ html.desktop-mode body.page-jerry .chat-input-wrap, html.desktop-mode body.page-jerry .chat-disclaimer { left:240px !important; } /* Modals génériques — centrer dans la zone contenu */ html.desktop-mode .modal-overlay { left:240px !important; top:56px !important; } /* ── PAGE INVITER — limiter la largeur sur desktop ── */ html.desktop-mode .marraine-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; max-width: 700px; } html.desktop-mode .code-result { max-width: 500px; margin-left: auto; margin-right: auto; }