/* * responsive_v1.css — Sprint C.5 Platform Readiness (mobile-first overrides) * * À injecter dans APRÈS les CSS de l'app : * * * Cible : tablette (≤900px) + smartphone (≤600px) + small phone (≤400px) * Approche : overrides progressifs, ne casse rien sur desktop */ /* === Viewport + base typography fix === */ @viewport { width: device-width; zoom: 1.0; } html { -webkit-text-size-adjust: 100%; } /* === Tables responsives : scroll horizontal === */ @media (max-width: 900px) { table { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; } table.data-table, table.help-content { white-space: normal; } } /* === Navigation (header) === */ @media (max-width: 900px) { .saas-header, .nav-header, header { flex-wrap: wrap; padding: 8px 12px; } .saas-header h1, .nav-header h1, header h1 { font-size: 16px; } .saas-header a, .nav-header a { margin-left: 8px; font-size: 12px; } } /* === Cards & containers === */ @media (max-width: 900px) { .saas-container, .container, main { padding: 0 12px; margin-top: 12px; } .saas-card, .card, .card-block { padding: 16px; margin-bottom: 12px; } } /* === Forms === */ @media (max-width: 600px) { .form-row { flex-direction: column !important; gap: 0 !important; } .form-group input, .form-group select, .form-group textarea { font-size: 16px; /* iOS auto-zoom prevention */ } .btn, .btn-primary, .btn-ghost, .btn-submit, button { font-size: 14px; padding: 10px 14px; min-height: 44px; /* Touch-friendly target */ } .btn-submit { width: 100%; } } /* === Pricing grid === */ @media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr !important; gap: 16px !important; } .pricing-card { padding: 20px !important; } .pricing-card .price { font-size: 28px !important; } } /* === Help page sidebar === */ @media (max-width: 800px) { .help-container { grid-template-columns: 1fr !important; } .help-sidebar { position: static !important; max-height: 300px !important; } } /* === Modals / panels === */ @media (max-width: 500px) { .modal, .dialog, .panel { width: 95vw !important; max-width: 95vw !important; margin: 10px auto !important; } .help-fab { right: 12px !important; bottom: 12px !important; } } /* === Data tables (force scroll) === */ @media (max-width: 700px) { .table-wrapper, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; } } /* === Sub-task / plan cards (cockpit) === */ @media (max-width: 900px) { .task-card, .plan-card, .brief-card { flex-direction: column !important; } .task-meta, .plan-meta { font-size: 12px; } } /* === Sticky elements on mobile (avoid covering content) === */ @media (max-width: 600px) { .sticky-bar { position: relative !important; top: auto !important; } } /* === Long text overflow (truncate URLs, titles) === */ @media (max-width: 600px) { .truncate-mobile { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } /* === Hide non-essential elements on small screens === */ @media (max-width: 500px) { .hide-mobile { display: none !important; } } @media (min-width: 501px) { .show-mobile-only { display: none !important; } } /* === Smartphone touch improvements === */ @media (max-width: 600px) { a, button, input[type=checkbox], input[type=radio] { min-height: 32px; min-width: 32px; } input[type=checkbox], input[type=radio] { transform: scale(1.2); margin-right: 8px; } } /* === Very small screens (≤400px) === */ @media (max-width: 400px) { body { font-size: 14px; } h1 { font-size: 20px !important; } h2 { font-size: 17px !important; } h3 { font-size: 15px !important; } }