/* ═══ Maestro - couche mobile commune ═══════════════════════════════ Chargée par chaque page de l'app via (donc toujours fraîche avec le HTML, aucun cache JS impliqué). Tiroir de navigation + adaptations d'affichage sous 1024 px. */ #mTabBar { display: none; } #mnavBackdrop { display: none; } @media (max-width: 1024px) { /* ── Anti-débordement : plus AUCUN défilement horizontal ── */ html, body { overflow-x: hidden !important; max-width: 100vw; } main.app, main, .content { max-width: 100vw; overflow-x: hidden; } /* ── Barre d'onglets basse (modèle Shopify mobile) : la navigation ne recouvre JAMAIS le contenu - le body réserve la place en bas ── */ body { padding-bottom: calc(62px + env(safe-area-inset-bottom, 0px)); } #mTabBar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-top: 1px solid #e5e7eb; padding-bottom: env(safe-area-inset-bottom, 0px); } #mTabBar a, #mTabBar button { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 4px 7px; font-size: 10.5px; font-weight: 600; color: #6b7280; text-decoration: none; background: none; border: 0; font-family: inherit; cursor: pointer; } #mTabBar a.on { color: #0a0a0a; } #mTabBar svg { width: 21px; height: 21px; } /* ── Sidebar → tiroir coulissant ── */ aside.sidebar { display: flex !important; position: fixed; top: 0; left: 0; bottom: 0; z-index: 1150; width: min(300px, 84vw); transform: translateX(-105%); transition: transform .22s ease; box-shadow: 8px 0 30px rgba(0, 0, 0, 0.18); height: 100dvh !important; } body.mnav-open aside.sidebar { transform: translateX(0); } body.mnav-open #mnavBackdrop { display: block; position: fixed; inset: 0; z-index: 1100; background: rgba(10, 10, 10, 0.45); } /* ── Topbar : titre entier, méta sur une ligne, actions dessous ── */ header.topbar { display: flex; flex-wrap: wrap; gap: 8px 12px; height: auto !important; padding: 14px 16px !important; } header.topbar > div:first-child { width: 100%; } .topbar-title { font-size: 20px !important; line-height: 1.2; white-space: nowrap; } .topbar-meta { display: block !important; width: 100%; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 12px !important; } .topbar-actions { width: 100%; display: flex !important; flex-wrap: wrap; gap: 8px; } .topbar-actions .btn { flex: 1 1 auto; justify-content: center; white-space: nowrap; } /* ── En-têtes de sections : titre au-dessus, contrôles en dessous ── */ .zone-header { flex-direction: column; align-items: stretch !important; gap: 10px; } .zone-controls { flex-wrap: wrap; max-width: 100%; } /* Rangées d'onglets plus larges que l'écran : défilement interne, jamais de coupe */ .graph-tabs, .segmented, .zone-controls > div { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .graph-tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar { display: none; } .filter-bar { flex-wrap: wrap; } /* ── Contenus ── */ main .content, .content { padding: 14px !important; } .kpi-strip, .grid-3, .micro-grid { grid-template-columns: 1fr 1fr !important; } .micro-stats { grid-template-columns: 1fr 1fr 1fr !important; } .graph-readout { grid-template-columns: 1fr 1fr !important; gap: 12px !important; } .forecast-hero { grid-template-columns: 1fr 1fr !important; } .readout-block { text-align: left !important; } .summary-bar { flex-wrap: wrap !important; gap: 12px !important; } .dashboard { grid-template-columns: 1fr !important; } } @media (max-width: 1024px) { /* Grilles INLINE sans classe (style="grid-template-columns: repeat(N…") - présentes sur Prévisions, Signaux, etc. : repli générique */ [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns: repeat(6"] { grid-template-columns: 1fr 1fr !important; } } @media (max-width: 700px) { /* Téléphone : tout s'empile, rien de compressé ni de coupé. Variantes AVEC et SANS espace après les deux-points : les styles inline générés par JS n'ont pas d'espace (repeat(3, …) échappait). */ [style*="grid-template-columns: repeat(3"], [style*="grid-template-columns: repeat(4"], [style*="grid-template-columns: repeat(5"], [style*="grid-template-columns: repeat(6"], [style*="grid-template-columns:repeat(3"], [style*="grid-template-columns:repeat(4"], [style*="grid-template-columns:repeat(5"], [style*="grid-template-columns:repeat(6"], [style*="grid-template-columns:1fr 1fr 1fr"], [style*="grid-template-columns: 1fr 1fr 1fr"] { grid-template-columns: 1fr !important; } /* Indicateurs : DEUX par rangée, pas un seul. Empilés un par ligne, les trois cartes du tableau de bord et les quatre du catalogue occupaient un écran et demi : il fallait faire défiler tout ça avant d'atteindre le contenu réel de la page. La page Stocks, elle, les gardait sur deux colonnes et se lisait d'un coup d'œil. On applique partout le modèle qui marchait. */ .kpi-strip, .grid-3, .micro-grid, .forecast-hero { grid-template-columns: 1fr 1fr !important; gap: 10px !important; } .kpi-card, .kpi-mini { padding: 13px 14px !important; } .kpi-label, .kpi-mini-label { font-size: 10.5px !important; letter-spacing: 0.03em !important; margin-bottom: 4px !important; } .kpi-value, .kpi-mini-value { font-size: 24px !important; line-height: 1.1 !important; } .kpi-mini-num { font-size: 24px !important; } .kpi-unit, .kpi-mini-unit { font-size: 11.5px !important; } /* Le commentaire sous le chiffre passe sur deux lignes plutôt que d'étirer la carte en largeur */ .kpi-delta, .kpi-sub, .kpi-mini-sub { font-size: 11px !important; line-height: 1.35 !important; margin-top: 5px !important; } /* Une carte seule sur sa rangée occupe toute la largeur */ .kpi-strip > :last-child:nth-child(odd), .grid-3 > :last-child:nth-child(odd) { grid-column: 1 / -1 !important; } /* Catalogue en vue cartes : deux par rangée. Le pas minimum de 210 px prévu pour un écran d'ordinateur ne laissait tenir qu'une seule colonne, avec une vignette démesurée. */ .products-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; padding: 12px !important; } .pcard { padding: 9px !important; } .pcard-thumb { height: 78px !important; margin-bottom: 7px !important; } .pcard-name { font-size: 12.5px !important; } .pcard-sku { font-size: 10.5px !important; margin-bottom: 5px !important; } .pcard-foot { flex-direction: column !important; align-items: flex-start !important; gap: 2px !important; } /* Onglets et sélecteurs de période des graphiques : trop larges pour l'écran, le dernier onglet était coupé et donc inatteignable. Ils défilent maintenant horizontalement, sans barre de défilement visible. Le conteneur les laisse déborder au lieu de les comprimer. */ .graph-tabs, .segmented, .zone-controls { max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .graph-tabs::-webkit-scrollbar, .segmented::-webkit-scrollbar, .zone-controls::-webkit-scrollbar { display: none; } .graph-tabs button, .segmented button { flex: 0 0 auto !important; white-space: nowrap !important; } /* Cibles tactiles : Apple recommande 44 px, on ne descend pas sous 34 */ .graph-tabs button, .segmented button { min-height: 34px !important; padding: 7px 12px !important; } .pg-btn { min-width: 34px !important; min-height: 34px !important; } /* Hauteur minimale des contrôles au doigt. Un bouton de 30 px se rate une fois sur trois sur un écran tactile ; Apple recommande 44 px, on retient 38 px pour ne pas faire exploser la hauteur des pages denses. */ .btn, .select, select.select, .modal-close, #tourBtn { min-height: 38px !important; } .modal-close { min-width: 38px !important; } .sb-link { min-height: 38px !important; display: flex !important; align-items: center !important; } .period-pill, .card-btn, .format-card { min-height: 38px !important; } .pr-action-btn { min-width: 36px !important; min-height: 36px !important; } /* ── En-tête : collante sur ordinateur, elle mangeait 40 % de l'écran du téléphone en permanence, et le premier menu du contenu se retrouvait coupé sous elle au défilement. Sur téléphone elle défile avec la page : la navigation reste assurée par la barre d'onglets du bas. ── */ header.topbar { position: static !important; } /* ── Graphiques : le dessin est calculé dans un repère de 1 000 unités de large, écrasé sans ménagement dans 350 px. Six mois de points quotidiens devenaient un trait illisible. Le repère reprend sa largeur réelle et le graphique se fait glisser du doigt, sans rien perdre des données. ── */ #forecastWrap, .graph-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; height: 360px !important; } #forecastWrap::-webkit-scrollbar, .graph-wrap::-webkit-scrollbar { display: none; } #forecastWrap > svg, .graph-wrap > svg { width: 900px !important; max-width: none !important; height: 100% !important; } /* Repère visuel : on voit qu'il reste du graphique à droite */ .graph-wrap { position: relative; } /* Cases à cocher : 15 px au doigt, c'est un pari. La rangée entière devient une zone confortable. */ input[type="checkbox"] { width: 20px !important; height: 20px !important; } .modal-check-row { min-height: 38px !important; display: flex !important; align-items: center !important; gap: 10px !important; } /* Cartes d'événements (Prévisions) : le titre s'étale, les badges suivent */ .ev-row { flex-wrap: wrap !important; row-gap: 8px !important; } .ev-row > div { flex: 1 1 100% !important; order: -1; } #eventsSection [style*="display:flex"], .eventsSection [style*="display:flex"] { flex-wrap: wrap; row-gap: 6px; } main table, .content table { display: block; overflow-x: auto; } /* Paramètres : la colonne de navigation devient des rangées de puces dans le flux normal - JAMAIS collante ni superposée au contenu. minmax(0,1fr) + min-width:0 partout : aucun contenu interne (rangée de boutons des cartes d'intégration...) ne peut forcer le panneau à dépasser l'écran - c'était la cause du panneau rogné à 576 px. */ .settings-layout { grid-template-columns: minmax(0, 1fr) !important; width: 100% !important; max-width: 100% !important; } .settings-layout * { min-width: 0; } .settings-panel, .panel-section, .integ-card { max-width: 100% !important; } .integ-head, .integ-actions, .panel-section-header, .integ-security-banner { flex-wrap: wrap !important; row-gap: 8px; } .settings-nav { position: static !important; top: auto !important; align-self: auto !important; flex-direction: row !important; flex-wrap: wrap !important; gap: 6px !important; max-width: 100%; margin-bottom: 12px; } .settings-nav-link { white-space: nowrap; flex: 0 0 auto; } /* Comptabilité : rangée d'onglets défilante au doigt, jamais coupée */ .tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; max-width: 100%; flex-wrap: nowrap; } .tabs::-webkit-scrollbar { display: none; } .tab { white-space: nowrap; flex: 0 0 auto; } /* Réappro : les paramètres « sur une ligne » (desktop) s'empilent, et les rangées internes passent à la ligne au lieu d'être rognées */ #rpParamsGrid { grid-template-columns: 1fr !important; } #reapproSpace [style*="display:flex"] { flex-wrap: wrap; row-gap: 6px; } #reapproSpace { overflow-x: clip; } #reapproSpace div { min-width: 0; } /* Liste produit par produit : le nom prend sa ligne, les contrôles (importance + stock cible) passent dessous - la colonne « Stock cible » était rognée hors écran et devenait intouchable */ /* Cartes d'étapes du réappro : minmax(360px…) forçait 360 px de large dans 347 px d'écran → carte rognée à droite. Une seule colonne. */ #reapproSpace [style*="repeat(auto-fit"] { grid-template-columns: 1fr !important; } /* L'en-tête de colonnes (Produit / Importance / Stock cible) n'a plus de sens quand les lignes s'empilent - et ses libellés se chevauchaient */ #reapproSpace div:has(> div[style*="width:132px"]) { display: none !important; } #rpProdList > div { flex-wrap: wrap !important; } #rpProdList > div > div:first-child { flex: 1 1 100% !important; } #rpProdList > div > div:first-child > div { white-space: normal !important; } /* Tableau de bord : l'en-tête du graphique (titres + onglets) s'empile */ .zone-head { flex-wrap: wrap; row-gap: 10px; } .zone-controls { flex-wrap: wrap; max-width: 100%; row-gap: 8px; } /* Pied de page de l'accueil */ .footer-bottom { flex-wrap: wrap; row-gap: 8px; } /* ── MODALES : jamais coupées ────────────────────────────────────── Le motif « voile centré » rogne le haut ET le bas des fenêtres plus hautes que l'écran, sans aucun moyen d'atteindre le contenu. Sur téléphone : la fenêtre commence en haut (sous le bandeau démo le cas échéant) et c'est le VOILE qui défile. Couvre les deux motifs du site : la classe .modal-overlay ET les voiles construits en JS avec un style inline « position:fixed;inset:0 » (Produits, Paramètres, Prévisions). !important nécessaire pour battre les styles inline. */ .modal-overlay, [style*="position:fixed;inset:0"], [style*="position: fixed"][style*="inset: 0px"] { align-items: flex-start !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; padding: max(14px, calc(var(--demoBarH, 0px) + 10px)) 10px 28px !important; } .modal-overlay .modal { max-width: 100% !important; } /* La barre d'onglets (z-index 90) passe naturellement SOUS les modales (z-index ≥ 100) - plus aucun élément de navigation au-dessus du contenu */ }