/* ================================================================ NEXCIENT OMEGA — ULTIMATE CSS LAYER v2.0 — 100% ROBUSTESSE Design Perform+ & Conseils © Patrick ================================================================ INJECTION : Dans APRÈS vos CSS existants. ================================================================ */ /* ────────────────────────────────────────────────────────────── 0. VARIABLES RACINES & FALLBACKS UNIVERSELS ────────────────────────────────────────────────────────────── */ :root { /* Polices — system-first pour vitesse max */ --nx-font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji"; --nx-font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, "Courier New", monospace; /* Palette de sécurité — override si besoin */ --nx-focus-ring: #0066cc; --nx-error: #d32f2f; --nx-warn: #e65100; --nx-ok: #2e7d32; --nx-info: #0277bd; /* Espacement fluide */ --nx-sp-xs: clamp(0.25rem, 0.5vw, 0.5rem); --nx-sp-sm: clamp(0.5rem, 1vw, 1rem); --nx-sp-md: clamp(0.75rem, 1.5vw, 1.5rem); --nx-sp-lg: clamp(1rem, 2.5vw, 2.5rem); --nx-sp-xl: clamp(1.5rem, 4vw, 4rem); /* Typographie fluide (10→16px) */ --nx-base-size: clamp(10px, 0.9vw + 8px, 16px); /* Z-index échelle */ --nx-z-modal: 1000; --nx-z-overlay: 900; --nx-z-dropdown: 800; --nx-z-sticky: 700; --nx-z-toast: 9999; --nx-z-skip: 99999; } /* ────────────────────────────────────────────────────────────── 1. RESET CHIRURGICAL — sans casser les styles existants ────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { font-size: var(--nx-base-size); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -moz-text-size-adjust: 100%; scroll-behavior: smooth; /* Fix iOS Safari rubber-band scroll */ overscroll-behavior-y: none; /* Prevent horizontal overflow */ overflow-x: hidden; } body { /* iOS Safari 100vh fix */ min-height: 100vh; min-height: 100dvh; min-height: -webkit-fill-available; /* NE PAS mettre overflow-x:hidden sur body — casse position:fixed (modals, overlays) */ overscroll-behavior: contain; /* Anti-aliasing universel */ -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; /* Empêcher la sélection involontaire au toucher */ -webkit-tap-highlight-color: transparent; /* Supprimer callout iOS sur long-press */ -webkit-touch-callout: none; } /* Fix iOS Safari height */ @supports (-webkit-touch-callout: none) { body { min-height: -webkit-fill-available; } } /* ────────────────────────────────────────────────────────────── 2. MÉDIAS ROBUSTES ────────────────────────────────────────────────────────────── */ img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } /* Éviter FOUC sur images */ img { font-style: italic; /* Alt text stylé si image cassée */ background-repeat: no-repeat; background-size: cover; shape-margin: 0.75rem; } /* Fix Firefox SVG */ svg { overflow: hidden; } /* Iframes responsives */ iframe { max-width: 100%; border: 0; } /* ────────────────────────────────────────────────────────────── 3. TYPOGRAPHIE FLUIDE & ACCESSIBILITÉ DU TEXTE ────────────────────────────────────────────────────────────── */ /* Titres fluides */ h1 { font-size: clamp(1.4rem, 3.5vw + 0.4rem, 2.4rem); line-height: 1.15; } h2 { font-size: clamp(1.2rem, 2.5vw + 0.3rem, 1.9rem); line-height: 1.2; } h3 { font-size: clamp(1.05rem, 1.8vw + 0.3rem, 1.5rem); line-height: 1.3; } h4 { font-size: clamp(0.95rem, 1.3vw + 0.3rem, 1.2rem); line-height: 1.35;} h5, h6 { font-size: clamp(0.875rem, 1vw + 0.3rem, 1.05rem); } /* Corps de texte */ p, li, td, th, label, blockquote { font-size: clamp(0.8rem, 1.2vw + 0.35rem, 1rem); line-height: 1.65; } /* Petits textes */ small, figcaption, .caption, .meta, .label-text { font-size: clamp(0.7rem, 0.8vw + 0.3rem, 0.85rem); line-height: 1.5; } /* Longueur de ligne optimale */ p, li, blockquote { max-width: 72ch; } /* Empêcher mots débordants */ p, h1, h2, h3, h4, h5, h6, li, td, th, span, label, button { overflow-wrap: break-word; word-break: break-word; hyphens: auto; } /* ────────────────────────────────────────────────────────────── 4. SYSTÈME DE BREAKPOINTS EXHAUSTIF (XS→4K + Orientation) ────────────────────────────────────────────────────────────── */ /* ── XS : téléphones portrait < 480px ── */ @media screen and (max-width: 479px) { :root { --nx-base-size: clamp(12px, 3.5vw, 14px); } /* Grilles → colonne unique */ [class*="grid"], [class*="war-room"], [class*="cards"], [class*="row"]:not(.nx-no-stack) { display: flex !important; flex-direction: column !important; gap: var(--nx-sp-sm); width: 100%; } /* Cartes pleine largeur */ [class*="card"], [class*="metric"], [class*="score-card"], [class*="panel"] { width: 100% !important; min-width: unset !important; max-width: unset !important; margin-left: 0 !important; margin-right: 0 !important; } /* Boutons pleine largeur + tactile */ button, .btn, [class*="btn-"], [class*="button"], input[type="submit"], input[type="button"], input[type="reset"] { width: 100% !important; min-height: 48px !important; font-size: clamp(0.9rem, 4vw, 1rem) !important; padding: 12px 20px !important; } /* Tableaux scrollables */ table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; } /* Modales mobile-safe */ [class*="modal"] > *, [class*="modal-content"], [class*="popup-content"], [class*="dialog"] { width: 94vw !important; max-width: 94vw !important; max-height: 88dvh !important; max-height: 88vh !important; overflow-y: auto !important; margin: auto !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%) !important; position: fixed !important; } /* Supprimer sidebars sur mobile */ [class*="sidebar"] { display: none !important; } /* Safe area iPhone notch/home bar */ .nx-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 16px); } } /* ── SM : 480–767px (téléphone paysage, petites tablettes) ── */ @media screen and (min-width: 480px) and (max-width: 767px) { [class*="war-room"], [class*="cards-grid"], [class*="metrics-grid"] { grid-template-columns: repeat(2, 1fr) !important; gap: var(--nx-sp-sm); } button, .btn { min-height: 44px; } } /* ── MD : 768–1023px (tablettes portrait) ── */ @media screen and (min-width: 768px) and (max-width: 1023px) { [class*="war-room"], [class*="cards-grid"] { grid-template-columns: repeat(2, 1fr) !important; } [class*="sidebar"], [class*="side-panel"] { width: 100% !important; position: static !important; float: none !important; } } /* ── LG : 1024–1439px (desktop standard) ── */ @media screen and (min-width: 1024px) and (max-width: 1439px) { .nx-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--nx-sp-md); } } /* ── XL : 1440–2559px (grands écrans) ── */ @media screen and (min-width: 1440px) { :root { --nx-base-size: 16px; } .nx-container { max-width: 1400px; margin: 0 auto; } } /* ── 2K/4K : ≥ 2560px ── */ @media screen and (min-width: 2560px) { :root { --nx-base-size: 18px; } .nx-container { max-width: 1800px; } } /* ── Orientation paysage sur mobile ── */ @media screen and (max-height: 500px) and (orientation: landscape) { [class*="modal"], [class*="popup"] { overflow-y: auto; max-height: 95dvh !important; } /* Compresser les headers */ h1 { font-size: 1.2rem; } h2 { font-size: 1.05rem; } } /* ── TV / affichages > 3840px ── */ @media screen and (min-width: 3840px) { :root { --nx-base-size: 22px; } } /* ────────────────────────────────────────────────────────────── 5. ACCESSIBILITÉ COMPLÈTE (WCAG 2.1 AAA) ────────────────────────────────────────────────────────────── */ /* Skip link */ .nx-skip-link { position: absolute; top: -100px; left: 1rem; z-index: var(--nx-z-skip); background: var(--nx-focus-ring); color: #fff; padding: 0.6rem 1.2rem; border-radius: 0 0 6px 6px; font-weight: 700; font-size: 0.9rem; text-decoration: none; transition: top 0.15s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.3); } .nx-skip-link:focus { top: 0; } /* Focus universel visible */ :focus-visible { outline: 3px solid var(--nx-focus-ring) !important; outline-offset: 3px !important; border-radius: 3px; } /* Supprimer focus invisible (non-clavier) */ :focus:not(:focus-visible) { outline: none; } /* Contraste garantis (WCAG AA minimum) */ /* Texte sur fond clair */ .nx-text-muted, [class*="text-gray"], [class*="text-light"], .secondary { color: #5a5a5a !important; /* ratio 6.5:1 sur blanc */ } /* Contraste des placeholders */ ::placeholder { color: #6b7280; opacity: 1; } :-ms-input-placeholder { color: #6b7280; } /* Mode contraste élevé Windows */ @media (forced-colors: active) { *:focus-visible { outline: 3px solid Highlight !important; } [class*="badge"], [class*="tag"], [class*="status"] { border: 1px solid ButtonText; forced-color-adjust: none; } [class*="gauge"], [class*="progress"], [class*="bar"] { forced-color-adjust: none; } } /* Réduction de mouvement (prefers-reduced-motion) */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [class*="pulse"], [class*="spin"], [class*="float"], [class*="bounce"], [class*="rotate"], [class*="slide"], [class*="particle"], canvas[class*="bg"] { animation: none !important; transform: none !important; } } /* Mode sombre système */ @media (prefers-color-scheme: dark) { :root { --nx-dark-bg: #0f1117; --nx-dark-surface: #1a1d2e; --nx-dark-border: #2a2d3e; --nx-dark-text: #e4e6f0; } } /* ── Texte uniquement lecteur d'écran ── */ .nx-sr-only, .sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; } /* ────────────────────────────────────────────────────────────── 6. PERFORMANCE — CRITICAL RENDERING PATH ────────────────────────────────────────────────────────────── */ /* Éviter CLS sur blocs inconnus */ [class*="chart"], [class*="gauge"], [class*="graph"], [class*="map"], canvas { contain: layout style; content-visibility: auto; } /* Sections hors viewport */ [class*="section"]:not(:first-of-type), [class*="tab-pane"]:not(.active), [class*="accordion-body"]:not(.show) { content-visibility: auto; contain-intrinsic-size: 0 350px; } /* GPU pour éléments animés */ [class*="animate"], [class*="transition"], [class*="card"]:hover, [class*="gauge"], [class*="slider"], [class*="carousel"] { will-change: transform, opacity; transform: translate3d(0,0,0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Fonts — swap pour éviter FOIT */ @font-face { font-display: swap; /* Force swap si polices personnalisées déclarées */ } /* ────────────────────────────────────────────────────────────── 7. FORMULAIRES — UX + SÉCURITÉ + ACCESSIBILITÉ ────────────────────────────────────────────────────────────── */ input, textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; min-height: 44px; max-width: 100%; font-family: inherit; font-size: 1rem; border-radius: 6px; } /* Fix select flèche Safari */ select:not([multiple]) { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%23666'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; } /* Zoom-fix iOS : min 16px pour éviter le zoom automatique */ @media screen and (max-width: 767px) { input, textarea, select { font-size: max(16px, 1rem) !important; /* Évite zoom iOS */ } } /* États invalides */ [aria-invalid="true"], input:invalid:not(:placeholder-shown) { border-color: var(--nx-error) !important; box-shadow: 0 0 0 3px rgba(211,47,47,0.12) !important; } /* États désactivés */ [disabled], [aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; pointer-events: none; } /* ────────────────────────────────────────────────────────────── 8. IMPRESSION & EXPORT PDF (complet) ────────────────────────────────────────────────────────────── */ @media print { *, *::before, *::after { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; color-adjust: exact !important; } @page { margin: 1.5cm; size: A4 portrait; } @page :first { margin-top: 2cm; } body { font-size: 10pt !important; line-height: 1.5 !important; color: #000 !important; background: #fff !important; font-family: Georgia, "Times New Roman", serif !important; } /* Masquer éléments non imprimables */ nav, header, footer, [class*="nav"], [class*="sidebar"], [class*="header"]:not([class*="report-header"]), button, .btn, [class*="btn"], [class*="modal"]:not(.printing), [class*="audio"], [class*="sound"], [class*="video"], [class*="toast"], [class*="notification"], [class*="cookie"], [class*="popup"]:not(.printing), [class*="overlay"]:not(.printing), [class*="skip"], script, style, .nx-skip-link, [aria-hidden="true"] { display: none !important; } /* Contenu visible */ * { visibility: visible !important; } [class*="card"], [class*="report"], [class*="section"], [class*="metric"] { break-inside: avoid; page-break-inside: avoid; border: 1px solid #ddd !important; box-shadow: none !important; } h1, h2, h3 { break-after: avoid; page-break-after: avoid; color: #000 !important; } a { color: #000 !important; text-decoration: underline; } a[href^="http"]::after, a[href^="https"]::after { content: " [" attr(href) "]"; font-size: 7pt; color: #555; word-break: break-all; } a[href^="#"]::after, a[href^="javascript"]::after { content: ""; } table { width: 100% !important; border-collapse: collapse !important; display: table !important; font-size: 9pt; } th, td { border: 1px solid #ccc !important; padding: 5pt 7pt !important; text-align: left; } th { background: #f0f0f0 !important; font-weight: bold; } img { max-height: 400px; object-fit: contain; } /* Scores et jauges — garder les couleurs */ [class*="score"], [class*="badge"], [class*="gauge"], [class*="bar"], [class*="indicator"] { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } } /* ────────────────────────────────────────────────────────────── 9. SÉCURITÉ VISUELLE — Protection UX ────────────────────────────────────────────────────────────── */ /* Empêcher sélection sur éléments interactifs (pas les champs) */ button, [role="button"], [class*="btn"], label { user-select: none; -webkit-user-select: none; } /* Drag inopportun */ img, [class*="card"], [class*="badge"] { -webkit-user-drag: none; user-drag: none; } /* Prevent text overflow in cells */ td, th { word-break: break-word; max-width: 400px; } /* ────────────────────────────────────────────────────────────── 10. SCROLLBARS UNIVERSELLES ────────────────────────────────────────────────────────────── */ /* Webkit (Chrome, Safari, Edge) */ ::-webkit-scrollbar { width: 7px; height: 7px; } ::-webkit-scrollbar-track { background: rgba(255,255,255,0.05); } ::-webkit-scrollbar-thumb { background: rgba(108,99,255,0.4); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgba(108,99,255,0.7); } ::-webkit-scrollbar-corner { background: transparent; } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: rgba(108,99,255,0.4) transparent; } /* ────────────────────────────────────────────────────────────── 11. COMPOSANTS NEXCIENT SPÉCIFIQUES — Patches responsives ────────────────────────────────────────────────────────────── */ /* War Room — protection maximale */ @media (max-width: 479px) { .war-room-grid, #warRoomContainer, [id*="warRoom"], [class*="war-room"] { grid-template-columns: 1fr !important; display: flex !important; flex-direction: column !important; } } @media (min-width: 480px) and (max-width: 1023px) { .war-room-grid, #warRoomContainer, [id*="warRoom"], [class*="war-room"] { grid-template-columns: repeat(2, 1fr) !important; display: grid !important; } } /* Cartes de métriques */ [class*="metric-card"], [class*="score-card"], [class*="kpi-card"] { min-width: 0; /* Fix grid overflow */ overflow: hidden; } /* Jauges SVG responsive */ [class*="gauge"] svg, [class*="circle-progress"] svg { width: 100% !important; height: auto !important; max-width: 200px; display: block; margin: 0 auto; } /* Progress bars */ [class*="progress-bar"], [class*="progress-fill"] { min-width: 2px; /* Visible même à 0% */ transition: width 0.6s ease, background-color 0.3s ease; } /* Textes dans cartes — pas de débordement */ [class*="card"] h2, [class*="card"] h3, [class*="card"] .value, [class*="card"] .label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } /* Exception pour textes longs explicitement wrappés */ [class*="card"] [class*="description"], [class*="card"] p { white-space: normal; text-overflow: clip; } /* Modal War Room — centrage garanti */ .modal-overlay, [class*="modal-overlay"] { position: fixed !important; inset: 0 !important; /* NE PAS forcer display:flex — chaque page gère display:none/flex elle-même */ /* display: flex !important; ← RETIRÉ — causait overlay invisible capturant tous les clics */ align-items: center !important; justify-content: center !important; padding: var(--nx-sp-sm); /* z-index géré par le CSS de chaque page (ex: 11000 dans index.html) */ } /* Modal ACTIVE seulement — n'écraser display que si .active est présent */ .modal-overlay.active, [class*="modal-overlay"].active { display: flex !important; pointer-events: auto; } /* Modal masquée — jamais de pointer-events pour éviter capture de clics */ /* Seul #data-modal.modal-overlay (dans index.html) est masqué par défaut → pointer-events:none ciblé sur la classe EXACTE .modal-overlay sans .active NE PAS utiliser [class*="modal-overlay"] — cela bloquerait les modals des modules externes */ .modal-overlay:not(.active) { pointer-events: none !important; } /* ────────────────────────────────────────────────────────────── 12. CORRECTIONS NAVIGATEURS SPÉCIFIQUES ────────────────────────────────────────────────────────────── */ /* Safari iOS — bouton padding */ @supports (-webkit-touch-callout: none) { button, input[type="submit"] { -webkit-appearance: none; border-radius: 6px; } /* Fix position sticky Safari */ [class*="sticky"], [style*="position: sticky"] { position: -webkit-sticky; position: sticky; } } /* Firefox — supprimer ::moz-focus-inner */ button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; } /* Samsung Internet — fix flexbox */ @supports not (display: grid) { [class*="grid"], [class*="war-room"] { display: -webkit-flex !important; display: flex !important; flex-wrap: wrap !important; } [class*="card"], [class*="metric"] { flex: 1 1 240px; min-width: 240px; } } /* Opera Mini — suppression animations */ @media all and (-webkit-min-device-pixel-ratio: 0) and (min-resolution: .001dpcm) { .nx-opera-safe { -webkit-transform: none; transform: none; } } /* Edge Legacy */ @supports (-ms-ime-align: auto) { [class*="grid"] { display: -ms-grid; } } /* ────────────────────────────────────────────────────────────── 13. TOUCH & MOBILE INTERACTIONS ────────────────────────────────────────────────────────────── */ /* Touch targets minimum 44x44px (Apple HIG) / 48x48px (Material) */ a, button, [role="button"], [role="tab"], [role="menuitem"], input[type="checkbox"], input[type="radio"], select { min-height: 44px; min-width: 44px; } /* Touch action optimisé */ [class*="scroll"], [class*="slider"], [class*="carousel"] { touch-action: pan-x; -webkit-overflow-scrolling: touch; } body, [class*="modal"] { touch-action: pan-y; } /* Éviter le double-tap zoom iOS sur boutons */ button, [role="button"], a, select, input { touch-action: manipulation; } /* ────────────────────────────────────────────────────────────── 14. INDICATEURS DE CHARGEMENT & ÉTATS ────────────────────────────────────────────────────────────── */ /* Loading skeleton */ .nx-skeleton { background: linear-gradient(90deg, rgba(255,255,255,0.05) 25%, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 75% ); background-size: 200% 100%; animation: nx-shimmer 1.5s infinite; border-radius: 4px; } @keyframes nx-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* Spinner universel */ .nx-spinner { display: inline-block; width: 40px; height: 40px; border: 3px solid rgba(108,99,255,0.2); border-top-color: #6c63ff; border-radius: 50%; animation: nx-spin 0.75s linear infinite; } @keyframes nx-spin { to { transform: rotate(360deg); } } /* ────────────────────────────────────────────────────────────── 15. SAFE AREAS — iPhone X et notch ────────────────────────────────────────────────────────────── */ .nx-safe-top { padding-top: env(safe-area-inset-top, 0px); } .nx-safe-right { padding-right: env(safe-area-inset-right, 0px); } .nx-safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0px); } .nx-safe-left { padding-left: env(safe-area-inset-left, 0px); } /* Barre de navigation fixe avec safe area */ .nx-fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; padding-bottom: env(safe-area-inset-bottom, 0px); z-index: var(--nx-z-sticky); } /* ────────────────────────────────────────────────────────────── 16. UTILITIES CLASSES FINALES ────────────────────────────────────────────────────────────── */ .nx-truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nx-break-word { overflow-wrap: break-word; word-break: break-word; } .nx-no-scroll { overflow: hidden !important; } .nx-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* Auto-grid responsive sans breakpoints */ .nx-auto-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: var(--nx-sp-md); } /* Overlay loader */ .nx-overlay-loader { position: fixed; inset: 0; background: rgba(10,12,20,0.8); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; z-index: var(--nx-z-modal); } /* Toast container */ .nx-toast-container { position: fixed; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); right: 1rem; z-index: var(--nx-z-toast); display: flex; flex-direction: column-reverse; gap: 0.5rem; max-width: min(380px, calc(100vw - 2rem)); pointer-events: none; } .nx-toast-container > * { pointer-events: auto; } /* ── FIN NEXCIENT ULTIMATE CSS LAYER v2.0 ── */