/* ============================================================================ rayz-responsive.css — Garde-fou responsive COMMUN à toutes les pages du monitoring (réf : pattern éprouvé de calendar.html). Objectif dur : ZÉRO scroll horizontal à 375 px de large, sub-header lisible. Feuille unique et partagée → les pages ne divergent plus (demande Damien 12/07). Chargée en DERNIER dans pour primer sur le CSS de chaque page. ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } /* Garantie anti-débordement au niveau page (comme body{overflow-x:hidden} de calendar) */ html, body { max-width: 100%; overflow-x: hidden; } /* Médias jamais plus larges que l'écran */ img, svg, video, canvas, iframe { max-width: 100%; height: auto; } /* Identifiants/chaînes longs (CVE-2026-XXXXX, digests sha256, chemins /etc/ssh/…, noms d'images, URLs) : ils COUPENT (wrap) au lieu de pousser la largeur de page. */ code, kbd, samp, pre, td, th, .mono, .drift-detail, .posture-sub, .finding-title, .finding-desc, .finding-action, .finding-meta, .layer-desc, .layer-meta, .kpi-label, .kpi-value, .kpi-sub, .archive-sub { overflow-wrap: anywhere; word-break: break-word; min-width: 0; } pre { white-space: pre-wrap; } /* Tables larges : deviennent un bloc scrollable INTERNE (≤ largeur écran) au lieu de pousser la page. Le scroll horizontal est CONTENU dans la table, la page ne bouge pas. */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } .cve-scroll, .table-scroll, .scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } @media (max-width: 480px) { /* Sub-headers / barres méta en flex : passer à la ligne au lieu de déborder */ .subhead, .sub-header, .page-sub, .header-meta, .posture-head, .layer-row, .card-header, .header-row, header .meta { flex-wrap: wrap; max-width: 100%; } /* Titres/labels longs ne forcent pas une largeur minimale */ h1, h2, h3, .card-title { min-width: 0; overflow-wrap: anywhere; } } /* ============================================================================ HEADER + SUB-HEADER (nav) responsive — CENTRAL (15/07). Prime sur le CSS inline dupliqué de chaque page. Cible le markup commun (.header 3 colonnes + #shared-nav) sans le modifier. Objectifs Damien : titre jamais sur 3 lignes, sub-header jamais la demi-page, largeur iPhone respectée, header qui réapparaît au scroll up. ============================================================================ */ /* Le bloc titre central (header partagé classé .header-center) doit pouvoir rétrécir. */ .header-center { min-width: 0; } @media (max-width: 680px) { /* Header compact : logo réduit, séparateur masqué, colonnes resserrées. */ .header { padding-left: 14px !important; padding-right: 14px !important; gap: 8px !important; } .logo-rayz { height: 26px !important; } .logo-partner { height: 20px !important; } .header-sep { display: none !important; } .partner-label { font-size: 10px !important; letter-spacing: 0.3px !important; } /* Date de dernière maj (header-right) sur sa PROPRE ligne sous le logo, en iPhone : ne compresse plus le titre central (comportement d'avant sur Slack/Notion/Claap). */ .header { flex-wrap: wrap !important; } .header-right { font-size: 10px !important; gap: 6px !important; order: 3 !important; flex-basis: 100% !important; width: 100% !important; justify-content: flex-start !important; margin-top: 3px !important; } /* Titre 1 ligne + ellipsis. Sous-titre AFFICHÉ (la date est passée sur sa propre ligne → il y a la place), 1 ligne + ellipsis pour rester compact. */ .header-title { font-size: 13px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header-sub { font-size: 11px !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Sub-header (nav) : UNE seule ligne scrollable horizontalement (swipe), jamais empilée. */ .nav { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 0 10px !important; scrollbar-width: none; /* Firefox */ } .nav::-webkit-scrollbar { display: none; } /* WebKit : masque la scrollbar */ .nav a { white-space: nowrap; padding: 9px 11px !important; font-size: 12px !important; margin: 4px 1px !important; } .nav .nav-sep { padding: 4px 3px !important; } }