/* AXPRO ERP - Custom styles (v5 light theme) */ :root { --axpro-primary: #4f46e5; --axpro-primary-hover: #4338ca; --axpro-primary-soft: #eef2ff; --axpro-accent: #0ea5e9; --axpro-accent-soft: #e0f2fe; --axpro-sidebar: #f8fafc; --axpro-sidebar-border: #e2e8f0; --axpro-text-main: #0f172a; --axpro-text-sub: #475569; --axpro-text-muted: #64748b; } * { box-sizing: border-box; } body { font-family: 'Inter', system-ui, -apple-system, sans-serif; } /* ============================================================ GLOBAL SVG SAFETY NET (v9) — PREVENT MEGA ICONS Cause: Tailwind CDN sometimes unreachable, or classes like w-4/w-5 not emitted → SVG fallback to 300x150px = giant icons. Solution: FORCE explicit pixel sizes on every icon slot, with !important so Tailwind utility overrides never actually break. ============================================================ */ svg { max-width: 100%; height: auto; display: inline-block; vertical-align: middle; flex-shrink: 0; /* default fallback size when no class at all */ width: 20px; height: 20px; } svg * { box-sizing: content-box; } /* --- Buttons: absolute max icon size 16px regardless of SVG class --- */ .btn svg, button svg, a[class*="btn"] svg, input[type="submit"] + svg, .form-actions svg, .dash-hero-btn svg, .btn-primary svg, .btn-secondary svg, .btn-success svg, .btn-danger svg, .btn-warning svg, .btn-info svg, .btn-outline-primary svg, .btn-outline-danger svg, .btn-ghost svg { width: 16px !important; height: 16px !important; flex-shrink: 0 !important; display: inline-flex !important; } .btn-sm svg, table button svg, table a[class*="btn"] svg { width: 14px !important; height: 14px !important; } .btn-lg svg { width: 18px !important; height: 18px !important; } /* --- Sidebar links icons --- */ .sidebar-link-icon svg, .sidebar-group-icon svg { width: 20px !important; height: 20px !important; } /* --- Page header actions (icon_svg() output) --- */ .flex.flex-wrap.gap-2 a[href] svg, #header svg, header svg, ._page_header svg, .page-actions svg { width: 20px !important; height: 20px !important; flex-shrink: 0; } /* --- Form card title icons --- */ .form-card-title-icon svg { width: 20px !important; height: 20px !important; } /* --- KPI cards icons --- */ .kpi-card-enhanced-icon svg { width: 20px !important; height: 20px !important; } .kpi-modern-icon svg { width: 18px !important; height: 18px !important; } /* --- Misc slots we already sized --- */ .link-see svg { width: 12px !important; height: 12px !important; } .welcome-nonadmin-icon-wrap svg { width: 36px !important; height: 36px !important; color: #4f46e5; } .axpro-toast-icon svg { width: 18px !important; height: 18px !important; } .dash-hero-chip svg { width: 14px !important; height: 14px !important; } .dash-table-empty svg { margin-bottom: 0.25rem !important; width: 40px !important; height: 40px !important; max-height: 40px !important; } /* ============ SIDEBAR LIGHT MODERN ============ */ #sidebar { transition: transform .3s cubic-bezier(.2,.8,.2,1), width .25s ease; width: 264px; } /* SÉCURITÉ anti-flou en mobile + anti-shadow-lourde + clics opaques */ @media (max-width: 1023px) { #sidebar, #sidebar *, #sidebarOverlay { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } #sidebar { background: #ffffff !important; box-shadow: 4px 0 14px rgba(15,23,42,.10) !important; will-change: auto !important; pointer-events: auto !important; -webkit-tap-highlight-color: transparent; touch-action: pan-y; } #sidebar * { pointer-events: auto !important; -webkit-tap-highlight-color: transparent; } #sidebar > div, #sidebar > nav { background-color: #ffffff !important; } /* Désactive :hover translate mobile => 1 tap = 1 clic navigation */ #sidebar .sidebar-link:hover { transform: none !important; box-shadow: none !important; } #sidebar .sidebar-link:active { background: var(--axpro-primary-soft); } } #sidebar > .w-66 { width: 100%; max-width: 100%; } #sidebar.sidebar-open { transform: translateX(0); box-shadow: 12px 0 40px rgba(15,23,42,.12); } @media (max-width: 1023px) { #sidebar.sidebar-open { box-shadow: 4px 0 14px rgba(15,23,42,.10) !important; } } /* Effets :hover réservés UNIQUEMENT au desktop (souris) pour éviter 2 taps mobile */ @media (min-width: 1024px) { .sidebar-link:hover { background: white; color: var(--axpro-primary); box-shadow: 0 1px 4px rgba(79,70,229,.06); transform: translateX(2px); } .sidebar-link:hover .sidebar-link-icon, .sidebar-group-header:hover .sidebar-group-icon { background: var(--axpro-primary-soft); color: var(--axpro-primary); box-shadow: inset 0 0 0 1px rgba(79,70,229,.08); } .sidebar-group-header:hover { letter-spacing: .04em; } } /* Règles de BASE (non-hover) toujours actives */ .sidebar-link { position: relative; transition: background-color .2s cubic-bezier(.2,.8,.2,1), color .2s ease; border-left: 0; color: var(--axpro-text-sub); } .sidebar-link-icon, .sidebar-group-icon { display: inline-flex; align-items: center; justify-content: center; color: var(--axpro-text-muted); transition: background-color .2s ease, color .2s ease; } /* Etat actif (.sidebar-link.active) : voir plus bas section "Sidebar link active state" et section 19 (CORRECTION FONDS PANNEAUX) pour la definition unique et coherente — ne pas redefinir ici, ca causait un conflit de specificite (texte/icone blancs sur fond blanc, illisibles) avec les regles plus recentes. */ .sidebar-group-header { cursor: pointer; user-select: none; transition: background-color .2s ease, color .2s ease; } .sidebar-group-items { overflow: hidden; max-height: 2000px; transition: max-height .35s cubic-bezier(.2,.8,.2,1); } .sidebar-group-items.collapsed { max-height: 0; margin-top: 0; } .sidebar-chevron.rotated { transform: rotate(-90deg); } #sidebarOverlay { transition: opacity .25s ease; -webkit-tap-highlight-color: transparent; } /* ============ COMPONENTS ============ */ .card { background: white; border-radius: 14px; box-shadow: 0 1px 3px rgba(15,23,42,.05), 0 1px 2px rgba(15,23,42,.03); padding: 20px; border: 1px solid #f1f5f9; transition: box-shadow .2s, transform .2s; } .card:hover { box-shadow: 0 8px 24px -8px rgba(15,23,42,.12); } .btn-primary { background: linear-gradient(135deg,#4f46e5 0%,#6366f1 50%,#0ea5e9 100%); transition: all .2s cubic-bezier(.2,.8,.2,1); box-shadow: 0 2px 10px rgba(79,70,229,.25); } .btn-primary:hover { filter: brightness(1.04); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(79,70,229,.35); } input, select, textarea { transition: all .15s; } input:focus, select:focus, textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,.15); border-color: #6366f1 !important; } input.input-error, select.input-error, textarea.input-error { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; } input:required:not(:placeholder-shown):invalid, select:required:not([data-pristine]):invalid { border-color: #dc2626 !important; } table.data-table tbody tr { transition: background-color .15s; } table.data-table tbody tr:hover { background-color: #f8fafc; } .kpi-card { background: white; border-radius: 14px; padding: 20px; border-left: 4px solid var(--axpro-primary); border: 1px solid #f1f5f9; } .scrollbar-thin::-webkit-scrollbar { width: 6px; height: 6px; } .scrollbar-thin::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 3px; } .scrollbar-thin::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .scrollbar-thin::-webkit-scrollbar-track { background: transparent; } .badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; letter-spacing: .01em; } .flash-success { background: linear-gradient(90deg, #dcfce7, #f0fdf4); border-left: 4px solid #16a34a; color: #14532d; border-radius: 4px; box-shadow: 0 1px 6px rgba(22,163,74,.08); } .flash-error { background: linear-gradient(90deg, #fee2e2, #fef2f2); border-left: 4px solid #dc2626; color: #7f1d1d; border-radius: 4px; box-shadow: 0 1px 6px rgba(220,38,38,.08); } .flash-msg { animation: flashSlideIn .3s cubic-bezier(.2,.8,.2,1); margin: 0 !important; } .form-label { display: block; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 5px; letter-spacing: .005em; } .form-label .req { color: #dc2626; margin-left: 3px; font-weight: 700; } .form-input { width: 100%; padding: 8.5px 13px; border: 1.5px solid #e2e8f0; border-radius: 10px; font-size: 14px; background: white; color: #0f172a; transition: all .2s cubic-bezier(.2,.8,.2,1); } .form-input:hover { border-color: #cbd5e1; } .form-input:disabled, .form-input[readonly] { background: #f8fafc; color: #64748b; cursor: default; } .form-input-sm { padding: 5px 9px; font-size: 12.5px; border-radius: 8px; border: 1.5px solid #e2e8f0; background: white; width: 100%; color: #0f172a; transition: all .15s; } .form-input-sm:hover { border-color: #cbd5e1; } .form-input-sm:focus { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,.15); border-color: #6366f1; } .table-header { background: linear-gradient(180deg, #f8fafc, #f1f5f9); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: #64748b; font-weight: 700; border-bottom: 1.5px solid #e2e8f0; } .kpi-card-enhanced { background: white; border-radius: 18px; padding: 22px; border: 1.5px solid #f1f5f9; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03); transition: all .25s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .kpi-card-enhanced::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, var(--kpi-color, #4f46e5), color-mix(in srgb, var(--kpi-color, #4f46e5) 60%, #0ea5e9)); border-radius: 0 4px 4px 0; } .kpi-card-enhanced:hover { box-shadow: 0 10px 30px -12px rgba(15,23,42,.18), 0 4px 8px -2px rgba(15,23,42,.05); transform: translateY(-2px); border-color: color-mix(in srgb, var(--kpi-color, #4f46e5) 15%, #e2e8f0); } .kpi-card-enhanced-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; background: color-mix(in srgb, var(--kpi-color, #4f46e5) 10%, transparent); color: var(--kpi-color, #4f46e5); } .kpi-card-enhanced-icon svg { width: 20px; height: 20px; } .kpi-card-enhanced-value { font-size: 1.5rem; font-weight: 800; color: #0f172a; line-height: 1.15; letter-spacing: -0.01em; } .kpi-card-enhanced-label { font-size: .72rem; color: #64748b; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; } .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } @media (min-width: 768px) { .dashboard-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .dashboard-grid { grid-template-columns: repeat(6, 1fr); } } .badge-brouillon { background: #f1f5f9; color: #475569; } .badge-en_cours, .badge-en-attente { background: #eef2ff; color: #4f46e5; } .badge-cree, .badge-planifie { background: #e0f2fe; color: #0369a1; } .badge-valide, .badge-accepte, .badge-paye, .badge-livre, .badge-conforme, .badge-actif, .badge-termine { background: #dcfce7; color: #15803d; } .badge-annule, .badge-refuse, .badge-rejete, .badge-non_conforme, .badge-impaye { background: #fee2e2; color: #dc2626; } .badge-partiel { background: #ffedd5; color: #ea580c; } .btn, button, a[class*="btn"] { transition: all .2s cubic-bezier(.2,.8,.2,1); } .btn:hover, button:hover { filter: brightness(1.05); transform: translateY(0); } .btn:active { transform: translateY(0); } @keyframes flashSlideIn { from { transform: translateX(100%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes modalFadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes modalSlideUp { from { opacity: 0; transform: translateY(24px) scale(.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .pagination { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; padding: 8px 4px; } .pagination a, .pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 12px; border-radius: 10px; font-size: 13.5px; font-weight: 600; color: #64748b; background: white; border: 1.5px solid #e2e8f0; text-decoration: none; transition: all .18s cubic-bezier(.2,.8,.2,1); } .pagination a:hover { background: #eef2ff; border-color: #c7d2fe; color: #4f46e5; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(79,70,229,.15); } .pagination .active { background: linear-gradient(135deg,#4f46e5,#6366f1); color: white; border-color: transparent; box-shadow: 0 4px 12px rgba(79,70,229,.35); } .pagination .disabled { opacity: .4; pointer-events: none; background: #f8fafc; } ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: #f1f5f9; } ::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; border: 1px solid #e2e8f0; } ::-webkit-scrollbar-thumb:hover { background: #94a3b8; } .modal-overlay { position: fixed; inset: 0; z-index: 100; background: rgba(15,23,42,.45); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 2rem 1rem; overflow-y: auto; animation: modalFadeIn .2s ease-out; } .modal-overlay.hidden { display: none; } .modal-container { background: white; border-radius: 18px; box-shadow: 0 30px 80px -20px rgba(15,23,42,.35), 0 10px 20px -10px rgba(15,23,42,.15); width: 100%; max-width: 720px; max-height: 90vh; display: flex; flex-direction: column; animation: modalSlideUp .3s cubic-bezier(.2,.8,.2,1); margin-top: 2vh; border: 1px solid #f1f5f9; overflow: hidden; } .modal-container.modal-lg { max-width: 960px; } .modal-container.modal-xl { max-width: 1180px; } .modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; border-bottom: 1.5px solid #f1f5f9; flex-shrink: 0; background: linear-gradient(180deg, #ffffff, #fafafa); } .modal-header h3 { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; letter-spacing: -0.01em; } .modal-close { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #64748b; border: none; background: transparent; cursor: pointer; font-size: 1.25rem; transition: all .15s; } .modal-close:hover { background: #f1f5f9; color: #1e293b; } .modal-body { padding: 1.5rem; overflow-y: auto; flex: 1; } .modal-footer { display: flex; justify-content: flex-end; gap: .5rem; padding: 1rem 1.5rem; border-top: 1px solid #e2e8f0; flex-shrink: 0; } .modal-loading { display: flex; align-items: center; justify-content: center; padding: 3rem; color: #64748b; } @media (max-width: 767px) { .modal-overlay { padding: 0; } .modal-container { max-width: 100%; max-height: 100vh; margin: 0; border-radius: 0; min-height: 100vh; min-height: 100dvh; } #sidebar { top: 0; left: 0; height: 100vh; height: 100dvh; z-index: 40; -webkit-overflow-scrolling: touch; } #sidebar.sidebar-open { box-shadow: 4px 0 24px rgba(0,0,0,.3); } } @media print { #sidebar, header, .flash-msg, .no-print, .modal-overlay, button, a[href*="create"], a[href*="delete"] { display: none !important; } body { background: white; font-size: 11pt; } main { padding: 0 !important; overflow: visible !important; } .kpi-card-enhanced, .card { box-shadow: none; border: 1px solid #e2e8f0; break-inside: avoid; } table.data-table { font-size: 10pt; } } /* ============================================================ UNIFIED FORM & BUTTON DESIGN (v9) Palette: Indigo + Sky Blue / Effets: glass, shimmer, shake ============================================================ */ /* --- Form Card (conteneur unifié pour tous les formulaires) --- */ .form-card { background: white; border-radius: 20px; border: 1.5px solid #f1f5f9; box-shadow: 0 4px 20px -8px rgba(15,23,42,.1), 0 1px 3px rgba(15,23,42,.04); padding: 1.5rem; position: relative; overflow: hidden; } .form-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #4f46e5, #6366f1, #0ea5e9); } @media (min-width: 768px) { .form-card { padding: 2rem; border-radius: 22px; } } .form-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; padding-bottom: 1.25rem; border-bottom: 1.5px solid #f1f5f9; } .form-card-title { display: flex; align-items: center; gap: .75rem; } .form-card-title-icon { width: 44px; height: 44px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #eef2ff, #e0f2fe); color: #4f46e5; box-shadow: inset 0 0 0 1.5px rgba(79,70,229,.15); flex-shrink: 0; } .form-card-title-icon svg { width: 20px; height: 20px; } .form-card-title h2 { margin: 0; font-size: 1.15rem; font-weight: 800; color: #0f172a; letter-spacing: -0.01em; line-height: 1.2; } .form-card-title p { margin: .25rem 0 0; font-size: .8rem; color: #64748b; } .form-section { margin-bottom: 1.5rem; } .form-section-title { display: flex; align-items: center; gap: .5rem; font-size: .82rem; font-weight: 700; color: #475569; text-transform: uppercase; letter-spacing: .06em; margin: 0 0 .85rem; } .form-section-title::before { content: ''; width: 3px; height: 16px; border-radius: 2px; background: linear-gradient(180deg, #4f46e5, #0ea5e9); } /* --- Form Labels & Inputs améliorés --- */ .form-label { display: block; font-size: .78rem; font-weight: 700; color: #334155; margin-bottom: .45rem; letter-spacing: .01em; text-transform: none; } .form-label .req { color: #dc2626; margin-left: 3px; font-weight: 800; } .form-input, .form-select, .form-textarea { width: 100%; padding: .6rem .85rem; border: 1.5px solid #e2e8f0; border-radius: 12px; font-size: .88rem; background: #ffffff; color: #0f172a; transition: all .2s cubic-bezier(.2,.8,.2,1); font-family: inherit; line-height: 1.4; } .form-input:hover, .form-select:hover, .form-textarea:hover { border-color: #cbd5e1; background: #fcfcfd; } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; box-shadow: 0 0 0 3px rgba(79,70,229,.12); border-color: #6366f1 !important; background: #ffffff; } .form-input:disabled, .form-input[readonly], .form-select:disabled, .form-textarea:disabled { background: #f8fafc; color: #64748b; cursor: not-allowed; border-color: #e2e8f0; } .form-input[readonly].auto-filled { background: #fffbeb; border-color: #fde68a; color: #92400e; font-weight: 600; } .form-textarea { resize: vertical; min-height: 88px; } .form-input-sm { padding: .4rem .65rem; font-size: .8rem; border-radius: 10px; } .form-group { position: relative; } .form-group-hint { display: block; margin-top: .3rem; font-size: .7rem; color: #94a3b8; font-weight: 500; } .form-group-error { display: block; margin-top: .3rem; font-size: .7rem; color: #dc2626; font-weight: 600; animation: formShake .4s ease; } @keyframes formShake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } } .form-input.input-error, .form-select.input-error, .form-textarea.input-error { border-color: #dc2626 !important; background: #fef2f2; animation: formShake .45s ease; } .form-input.input-error:focus, .form-select.input-error:focus, .form-textarea.input-error:focus { box-shadow: 0 0 0 3px rgba(220,38,38,.12) !important; } /* --- Unified Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .6rem 1.1rem; border-radius: 12px; font-size: .82rem; font-weight: 700; letter-spacing: .01em; border: none; cursor: pointer; text-decoration: none; transition: all .2s cubic-bezier(.2,.8,.2,1); line-height: 1.2; font-family: inherit; white-space: nowrap; user-select: none; position: relative; overflow: hidden; } .btn-sm { padding: .4rem .75rem; font-size: .72rem; border-radius: 10px; gap: .3rem; } .btn-lg { padding: .75rem 1.4rem; font-size: .9rem; border-radius: 14px; } .btn-primary { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #0ea5e9 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(79,70,229,.3), inset 0 1px 0 rgba(255,255,255,.15); } .btn-primary::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent); transform: skewX(-20deg); transition: left .55s ease; } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 20px rgba(79,70,229,.42), inset 0 1px 0 rgba(255,255,255,.18); } .btn-primary:hover::after { left: 140%; } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: #ffffff; color: #475569; border: 1.5px solid #e2e8f0; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .btn-secondary:hover { background: #f8fafc; border-color: #cbd5e1; color: #0f172a; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(15,23,42,.08); } .btn-success { background: linear-gradient(135deg, #16a34a 0%, #22c55e 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(22,163,74,.3), inset 0 1px 0 rgba(255,255,255,.15); } .btn-success:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 20px rgba(22,163,74,.4); } .btn-danger { background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(220,38,38,.28), inset 0 1px 0 rgba(255,255,255,.15); } .btn-danger:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 20px rgba(220,38,38,.38); } .btn-warning { background: linear-gradient(135deg, #d97706 0%, #f59e0b 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(245,158,11,.3), inset 0 1px 0 rgba(255,255,255,.15); } .btn-warning:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 20px rgba(245,158,11,.4); } .btn-info { background: linear-gradient(135deg, #0284c7 0%, #0ea5e9 100%); color: #ffffff; box-shadow: 0 3px 12px rgba(14,165,233,.3), inset 0 1px 0 rgba(255,255,255,.15); } .btn-info:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 6px 20px rgba(14,165,233,.4); } .btn-outline-primary { background: transparent; color: #4f46e5; border: 1.5px solid #c7d2fe; } .btn-outline-primary:hover { background: #eef2ff; border-color: #a5b4fc; transform: translateY(-1px); } .btn-outline-danger { background: transparent; color: #dc2626; border: 1.5px solid #fecaca; } .btn-outline-danger:hover { background: #fef2f2; border-color: #fca5a5; transform: translateY(-1px); } .btn-ghost { background: transparent; color: #64748b; padding: .45rem .75rem; border-radius: 10px; } .btn-ghost:hover { background: #f1f5f9; color: #0f172a; } .btn:disabled, .btn[disabled], .btn.is-loading { opacity: .55; cursor: not-allowed; transform: none !important; filter: none !important; box-shadow: none !important; } .btn.is-loading::before { content: ''; width: 14px; height: 14px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btnSpin .7s linear infinite; } @keyframes btnSpin { to { transform: rotate(360deg); } } /* Form Actions (footer des formulaires) */ .form-actions { display: flex; justify-content: flex-end; align-items: center; gap: .6rem; flex-wrap: wrap; padding-top: 1.25rem; margin-top: 1rem; border-top: 1.5px solid #f1f5f9; } .form-actions .btn { min-width: 120px; } /* --- Unified Data Tables (tableaux des dashboards & index) --- */ .data-table-unified { width: 100%; font-size: .82rem; border-collapse: separate; border-spacing: 0; } .data-table-unified thead th { background: linear-gradient(180deg, #f8fafc, #f1f5f9); font-size: .68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; padding: .7rem .8rem; text-align: left; border-bottom: 1.5px solid #e2e8f0; white-space: nowrap; } .data-table-unified thead th:first-child { border-top-left-radius: 12px; } .data-table-unified thead th:last-child { border-top-right-radius: 12px; } .data-table-unified tbody td { padding: .65rem .8rem; color: #334155; border-top: 1px solid #f1f5f9; vertical-align: middle; } .data-table-unified tbody tr:first-child td { border-top: 0; } .data-table-unified tbody tr:hover td { background: #f8fafc; } .data-table-unified .col-right { text-align: right; } .data-table-unified-empty { padding: 2rem 1rem !important; text-align: center; color: #94a3b8; font-size: .82rem; } /* Cascade entry animation (for cards, forms) */ .animate-cascade { opacity: 0; transform: translateY(12px); } .animate-cascade.is-visible { opacity: 1; transform: translateY(0); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.8,.2,1); } /* ============================================================ UNIFIED ROLE DASHBOARDS STYLES (v9) Design identique au dashboard principal Admin Hero + KPIs modernes + Cartes + Tables unifiées ============================================================ */ /* --- Hero Section (bannière gradient salutation) --- */ .dash-hero { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 45%, #0ea5e9 100%); border-radius: 20px; padding: 1.75rem 1.75rem; color: white; position: relative; overflow: hidden; margin-bottom: 1.75rem; box-shadow: 0 10px 30px -10px rgba(79,70,229,.45), 0 4px 10px rgba(15,23,42,.05); } .dash-hero::before { content: ''; position: absolute; top: -60%; right: -10%; width: 420px; height: 420px; background: radial-gradient(circle, rgba(255,255,255,.18) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; pointer-events: none; } .dash-hero::after { content: ''; position: absolute; bottom: -40%; left: -5%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 70%); border-radius: 50%; pointer-events: none; } .dash-hero-content { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; } .dash-hero h1 { font-size: 1.5rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; line-height: 1.15; } .dash-hero p { font-size: .875rem; opacity: .9; margin-top: .35rem; } .dash-hero-meta { display: flex; gap: .75rem; flex-wrap: wrap; margin-top: .75rem; } .dash-hero-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .7rem; border-radius: 999px; background: rgba(255,255,255,.18); backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,.25); font-size: .72rem; font-weight: 600; } .dash-hero-actions { position: relative; z-index: 1; display: flex; gap: .5rem; flex-wrap: wrap; } .dash-hero-btn { display: inline-flex; align-items: center; gap: .4rem; padding: .55rem .9rem; border-radius: 12px; background: rgba(255,255,255,.18); color: white; text-decoration: none; font-size: .8rem; font-weight: 600; border: 1px solid rgba(255,255,255,.28); transition: all .2s ease; } .dash-hero-btn:hover { background: rgba(255,255,255,.3); transform: translateY(-1px); } .dash-hero-btn-white { background: white; color: #4f46e5; border-color: transparent; box-shadow: 0 4px 12px rgba(15,23,42,.12); } .dash-hero-btn-white:hover { background: #f8fafc; color: #4338ca; } /* --- Section Title --- */ .dash-section-title { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } .dash-section-title h3 { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0; letter-spacing: -0.005em; display: flex; align-items: center; gap: .5rem; } .dash-section-title h3::before { content: ''; width: 3px; height: 18px; border-radius: 2px; background: linear-gradient(180deg, #4f46e5, #0ea5e9); } /* --- Dash Card (conteneur principal) --- */ .dash-card { background: white; border-radius: 18px; padding: 1.35rem; border: 1.5px solid #f1f5f9; box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.02); transition: all .25s cubic-bezier(.2,.8,.2,1); } .dash-card:hover { box-shadow: 0 10px 30px -12px rgba(15,23,42,.15), 0 4px 8px -2px rgba(15,23,42,.04); border-color: #e2e8f0; transform: translateY(-1px); } /* --- KPI Grid --- */ .kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 1.75rem; } @media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(5, 1fr); gap: 1.1rem; } } /* --- KPI Modern Card --- */ .kpi-modern { background: white; border-radius: 18px; padding: 1.15rem; border: 1.5px solid #f1f5f9; position: relative; overflow: hidden; transition: all .25s cubic-bezier(.2,.8,.2,1); display: flex; flex-direction: column; gap: .35rem; } .kpi-modern::before { content: ''; position: absolute; top: 0; left: 0; width: 4px; bottom: 0; background: linear-gradient(180deg, var(--kpi-color, #4f46e5), color-mix(in srgb, var(--kpi-color, #4f46e5) 60%, #0ea5e9)); border-radius: 4px 0 0 4px; } .kpi-modern::after { content: ''; position: absolute; top: -30%; right: -20%; width: 140px; height: 140px; background: radial-gradient(circle, color-mix(in srgb, var(--kpi-color, #4f46e5) 10%, transparent) 0%, transparent 70%); border-radius: 50%; pointer-events: none; transition: transform .4s ease; } .kpi-modern:hover { transform: translateY(-2px); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--kpi-color, #4f46e5) 40%, rgba(15,23,42,.15)), 0 4px 8px -2px rgba(15,23,42,.05); border-color: color-mix(in srgb, var(--kpi-color, #4f46e5) 18%, #e2e8f0); } .kpi-modern:hover::after { transform: scale(1.1) translate(4px, -4px); } .kpi-modern-top { display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; position: relative; z-index: 1; } .kpi-modern-icon { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--kpi-color, #4f46e5) 12%, transparent); color: var(--kpi-color, #4f46e5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kpi-color, #4f46e5) 12%, transparent); flex-shrink: 0; } .kpi-modern-icon svg { width: 18px; height: 18px; stroke-width: 2px; } .kpi-modern-trend { display: inline-flex; align-items: center; gap: .2rem; padding: .15rem .4rem; border-radius: 999px; font-size: .65rem; font-weight: 700; background: rgba(22,163,74,.1); color: #15803d; } .kpi-modern-trend.down { background: rgba(220,38,38,.1); color: #dc2626; } .kpi-modern-value { position: relative; z-index: 1; font-size: 1.55rem; font-weight: 800; color: #0f172a; letter-spacing: -0.02em; line-height: 1.15; margin-top: .25rem; } .kpi-modern-label { position: relative; z-index: 1; font-size: .7rem; color: #64748b; text-transform: uppercase; font-weight: 700; letter-spacing: .04em; } .kpi-modern-sub { position: relative; z-index: 1; font-size: .72rem; color: #94a3b8; font-weight: 500; display: flex; align-items: center; gap: .3rem; } /* --- Grilles principales --- */ .main-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; } @media (min-width: 1024px) { .main-grid { grid-template-columns: 2fr 1fr; } } .bottom-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; margin-bottom: 1.5rem; } @media (min-width: 1024px) { .bottom-grid { grid-template-columns: 1fr 1fr; } } /* --- Chart Header & Range --- */ .chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; gap: .5rem; flex-wrap: wrap; } .chart-legend { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; } .chart-legend-chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .7rem; font-weight: 600; color: #64748b; } .chart-legend-dot { width: 10px; height: 10px; border-radius: 3px; } .chart-range { display: flex; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 3px; gap: 2px; } .chart-range button { background: transparent; border: none; padding: .3rem .65rem; font-size: .7rem; font-weight: 600; color: #64748b; border-radius: 7px; cursor: pointer; transition: all .15s; } .chart-range button.active { background: white; color: #4f46e5; box-shadow: 0 1px 3px rgba(15,23,42,.08); } /* --- Dash Table (tableaux) --- */ .dash-table { width: 100%; font-size: .82rem; border-collapse: separate; border-spacing: 0; } .dash-table thead th { background: linear-gradient(180deg, #f8fafc, #f1f5f9); font-size: .68rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: .05em; padding: .65rem .75rem; text-align: left; border-bottom: 1.5px solid #e2e8f0; } .dash-table thead th:first-child { border-top-left-radius: 10px; } .dash-table thead th:last-child { border-top-right-radius: 10px; } .dash-table tbody td { padding: .6rem .75rem; color: #334155; border-top: 1px solid #f1f5f9; vertical-align: middle; } .dash-table tbody tr:first-child td { border-top: 0; } .dash-table tbody tr:hover td { background: #f8fafc; } .dash-table a.link-ref { color: #4f46e5; font-weight: 600; text-decoration: none; } .dash-table a.link-ref:hover { color: #4338ca; text-decoration: underline; } .dash-table .text-right { text-align: right; } .dash-table .val-red { color: #dc2626; font-weight: 700; } .dash-table .val-green { color: #15803d; font-weight: 600; } .dash-table-empty { padding: 2.25rem 1rem !important; text-align: center; color: #94a3b8; font-size: .82rem; } /* --- Progress Bar --- */ .prog-bar { height: 6px; border-radius: 999px; background: #f1f5f9; overflow: hidden; margin-top: .25rem; } .prog-bar-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #4f46e5, #0ea5e9); transition: width .6s ease; } /* --- Activity Table --- */ .activity-time { font-variant-numeric: tabular-nums; font-size: .75rem; color: #64748b; } .activity-user { font-weight: 600; color: #0f172a; font-size: .8rem; } .activity-action { display: inline-flex; padding: .15rem .5rem; border-radius: 8px; font-size: .68rem; font-weight: 700; } .activity-module { color: #475569; font-size: .75rem; font-weight: 500; } .activity-desc { color: #64748b; font-size: .78rem; } /* --- Links & Badges --- */ .link-see { color: #0ea5e9; font-size: .75rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; gap: .25rem; transition: color .15s; } .link-see:hover { color: #4f46e5; text-decoration: underline; } .link-see svg { width: 12px; height: 12px; } .nb-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; padding: .05rem .45rem; height: 20px; border-radius: 999px; font-size: .65rem; font-weight: 700; } .nb-badge-red { background: #fee2e2; color: #dc2626; } .nb-badge-blue { background: #eef2ff; color: #4f46e5; } .nb-badge-amber { background: #fef3c7; color: #b45309; } .nb-badge-green { background: #dcfce7; color: #15803d; } /* --- Welcome Non-Admin --- */ .welcome-nonadmin { background: white; border-radius: 20px; border: 1.5px solid #f1f5f9; padding: 3rem 1.5rem; text-align: center; position: relative; overflow: hidden; } .welcome-nonadmin::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 320px; height: 320px; background: radial-gradient(circle, rgba(79,70,229,.08) 0%, transparent 70%); border-radius: 50%; } .welcome-nonadmin-icon-wrap { width: 80px; height: 80px; border-radius: 24px; margin: 0 auto 1.25rem; background: linear-gradient(135deg, #eef2ff, #e0f2fe); display: flex; align-items: center; justify-content: center; position: relative; z-index: 1; box-shadow: inset 0 0 0 1.5px rgba(79,70,229,.15); } .welcome-nonadmin-icon-wrap svg { width: 36px; height: 36px; color: #4f46e5; } .welcome-nonadmin h3 { position: relative; z-index: 1; font-size: 1.2rem; font-weight: 700; color: #0f172a; margin: 0 0 .4rem; } .welcome-nonadmin p { position: relative; z-index: 1; color: #64748b; font-size: .85rem; margin: 0; } /* ============================================================ AXPRO Toast / Popup system (v8) Ergonomic closable messages for STOCK & PRODUCTION forms ============================================================ */ .axpro-toast-container { position: fixed; top: 1rem; right: 1rem; z-index: 9999; display: flex; flex-direction: column; gap: .6rem; max-width: 380px; width: calc(100vw - 2rem); pointer-events: none; } @media (max-width: 640px) { .axpro-toast-container { top: .5rem; right: .5rem; left: .5rem; max-width: none; width: auto; } } .axpro-toast { pointer-events: auto; display: flex; align-items: flex-start; gap: .75rem; padding: .85rem 1rem; border-radius: 10px; background: white; box-shadow: 0 10px 30px rgba(15,23,42,.15), 0 2px 6px rgba(15,23,42,.06); border-left: 4px solid #0ea5e9; animation: axproToastIn .28s cubic-bezier(.2,.8,.2,1); word-break: break-word; position: relative; overflow: hidden; } .axpro-toast:hover { box-shadow: 0 14px 40px rgba(15,23,42,.22), 0 4px 10px rgba(15,23,42,.08); } .axpro-toast.is-leaving { animation: axproToastOut .25s ease-in forwards; } .axpro-toast-success { border-left-color: #16a34a; } .axpro-toast-success .axpro-toast-icon { color: #16a34a; background: rgba(22,163,106,.12); } .axpro-toast-error { border-left-color: #dc2626; } .axpro-toast-error .axpro-toast-icon { color: #dc2626; background: rgba(220,38,38,.12); } .axpro-toast-warning { border-left-color: #f59e0b; } .axpro-toast-warning .axpro-toast-icon { color: #f59e0b; background: rgba(245,158,11,.14); } .axpro-toast-info { border-left-color: #0ea5e9; } .axpro-toast-info .axpro-toast-icon { color: #0ea5e9; background: rgba(14,165,233,.12); } .axpro-toast-icon { flex-shrink: 0; width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; } .axpro-toast-icon svg { width: 18px; height: 18px; } .axpro-toast-body { flex: 1; font-size: 13px; line-height: 1.45; color: #1e293b; padding-top: 4px; min-width: 0; } .axpro-toast-title { font-weight: 600; font-size: 13px; margin-bottom: 2px; color: #0f172a; } .axpro-toast-message { color: #475569; font-size: 12.5px; } .axpro-toast-close { flex-shrink: 0; width: 26px; height: 26px; border-radius: 6px; border: none; background: transparent; color: #64748b; cursor: pointer; font-size: 18px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background .15s, color .15s; } .axpro-toast-close:hover { background: #f1f5f9; color: #1e293b; } .axpro-toast-progress { position: absolute; left: 0; bottom: 0; height: 3px; background: rgba(15,23,42,.18); animation: axproToastProgress 5s linear forwards; } .axpro-toast-success .axpro-toast-progress { background: rgba(22,163,106,.4); } .axpro-toast-error .axpro-toast-progress { background: rgba(220,38,38,.4); } .axpro-toast-warning .axpro-toast-progress { background: rgba(245,158,11,.4); } .axpro-toast-info .axpro-toast-progress { background: rgba(14,165,233,.4); } .axpro-toast:hover .axpro-toast-progress { animation-play-state: paused; } @keyframes axproToastIn { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes axproToastOut { from { transform: translateX(0); opacity: 1; max-height: 200px; margin-top: 0; } to { transform: translateX(120%); opacity: 0; max-height: 0; margin-top: -.6rem; padding-top: 0; padding-bottom: 0; } } @keyframes axproToastProgress { from { width: 100%; } to { width: 0%; } } /* ============================================================ CORRECTIONS D'AFFICHAGE v6 — Évite l'étirement des dashboards ============================================================ */ /* Reset: aucune hauteur forcée sur html/body qui causerait un étirement */ html, body { height: auto; min-height: 100vh; } /* Empêche les éléments flex de s'étirer verticalement sans raison */ body > div.flex { align-items: flex-start; } /* Cartes et KPI: s'adaptent au contenu, pas de hauteur 100% forcée */ .card, .dash-card, .kpi-card, .kpi-modern, .kpi-card-enhanced, .op-card, .op-stat { height: auto !important; align-self: stretch; } /* Grilles: les items ne s'étirent pas pour remplir les lignes vides */ .kpi-grid, .dashboard-grid, .grid.grid-cols-1, .grid.grid-cols-2, .grid.grid-cols-3, .grid.grid-cols-4, .grid.grid-cols-5, .grid.grid-cols-6, .main-grid, .bottom-grid, .op-stats { align-items: start; } /* main ne doit pas forcer de hauteur minimale excessive via padding ou min-height */ main { height: auto !important; min-height: 0 !important; } /* États vides: padding réduit pour ne pas créer de "blancs monumentaux" */ .dash-table-empty, .op-empty { padding: 1.25rem 0.75rem !important; } .dash-table-empty svg { margin-bottom: 0.25rem !important; } .dash-table-empty { line-height: 1.3; } /* Conteneur de graphique: hauteur raisonnable, pas expansible à l'infini */ canvas[id$="Chart"], canvas[id*="Chart"] { max-height: 360px; } /* Fix: évite les marges inutiles en bas de page sur les dashboards */ main > :last-child, main > form > :last-child { margin-bottom: 0 !important; } /* Mobile: fixe un bon comportement du scroll natif */ @media (max-width: 767px) { html, body { overflow-x: hidden; } body > div.flex { overflow: visible; } main { overflow: visible; } } /* ============================================================ CORRECTIONS D'AFFICHAGE v10 — Dashboard stable (août 2026) But: layout du Dashboard principal + role dashboards - main (le contenu principal) ne s'étire PAS trop, contenu centré - héros + grilles + KPIs restent proportionnels - contenu jamais > 1440px lisible ============================================================ */ main, #app-main, main[role="main"] { width: 100%; max-width: 1600px; margin: 0 auto; padding: 1.5rem 1.5rem 2rem; } @media (min-width: 1024px) { main, #app-main, main[role="main"] { padding: 1.5rem 2rem 2.5rem; } } @media (min-width: 1536px) { main, #app-main, main[role="main"] { padding: 1.75rem 2.5rem 2.75rem; } } /* Hero: ne jamais déborder sur les côtés et garde proportions */ .dash-hero { width: 100% !important; max-width: 100%; overflow: hidden; box-sizing: border-box; } .dash-hero-content { flex-wrap: wrap; gap: 1rem; } @media (max-width: 640px) { .dash-hero { padding: 1.25rem 1.25rem !important; } .dash-hero h1 { font-size: 1.15rem !important; } } /* Grilles KPIs: contenu compact et uniforme */ .kpi-grid { align-items: stretch; grid-auto-flow: row; } .kpi-modern { max-height: 100%; } .kpi-modern::after { display: none; } /* remove decorative orb if conflicts; or reduce size to prevent oddness */ /* main-grid + bottom-grid: pas de gap monstre, items start + colonnes ok */ .main-grid, .bottom-grid { width: 100%; align-items: stretch; } .main-grid > *, .bottom-grid > * { min-width: 0; } .dash-card { max-width: 100%; overflow: hidden; } /* tables inside cards: scroll horizontal sous 768px si trop large */ .dash-card > div[style*="overflow"], .dash-card > .overflow-x-auto, .dash-card table { width: 100%; max-width: 100%; } @media (max-width: 768px) { .dash-card:has(table.dash-table), .card:has(table.dash-table-unified) { overflow-x: auto; } } /* Sidebar + layout flex principal: hauteur correcte anti-étirement vertical */ body > div.flex { align-items: flex-start; min-height: 100vh; align-content: flex-start; } body > div.flex > aside, body > div.flex > aside + div, body > div.flex > main { height: auto; min-height: 100vh; align-self: stretch; } /* Empêche les SVG décoratifs (hors icônes) de casser l'affichage */ .dash-hero svg, .dash-hero-chip svg { max-height: 1.25em; } /* ============================================================ NAVIGATION DYNAMIQUE v12 — Sidebar ↔ Header Horizontal (août 2026) Piloté par le setting 'ui_nav_mode' en base (Paramètres → Apparence). Classes ajoutées sur : - axpro-nav-sidebar (par défaut, sidebar verticale classique) - axpro-nav-header (sidebar complètement masquée, modules en dropdowns dans le header, menu accordéon mobile sur < XL) Corrections v12: - Chevauchement header: isolation + overflow visible sur TOUS les ancêtres du dropdown (JAMAIS overflow-hidden sur header/parents) - Dropdowns non-cliquables: override TAILWIND utilities avec sélecteurs ultra-spécifiques ET !important sur display + visibility - Stacking context correct avec z-index + transform isolation - Sidebar fluidité: accordéon max-height animé + scrollbar custom ============================================================ */ /* ---------- (A) Body + Layout mode styles ---------- */ body.axpro-nav-sidebar > div.flex > aside { display: block; } /* Mode header horizontal: la sidebar verticale reste utilisee sur mobile/tablette (< lg) comme seul moyen de navigation ; elle n'est masquee qu'a partir du desktop/grand ecran (>= lg), ou le header horizontal prend le relais. */ @media (min-width: 1024px) { body.axpro-nav-header > div.flex > aside { display: none !important; } } body.axpro-nav-header > div.flex { padding-left: 0; } /* CRITICAL v12: Empêche le chevauchement. Force un stacking context isolé et tous les ancêtres des dropdowns en overflow:visible */ body.axpro-nav-header, body.axpro-nav-sidebar { isolation: isolate; } body.axpro-nav-header > div.flex, body.axpro-nav-header > div.flex > div.flex-1, body.axpro-nav-header header, body.axpro-nav-header header > div:first-of-type, body.axpro-nav-header header > div:first-of-type > div:last-child, body.axpro-nav-header [class*="header-tab"], body.axpro-nav-header .header-tab-group, body.axpro-nav-sidebar > div.flex, body.axpro-nav-sidebar > div.flex > div.flex-1, body.axpro-nav-sidebar header, body.axpro-nav-sidebar header > div:first-of-type { overflow: visible !important; } body.axpro-nav-header header { position: sticky; top: 0; z-index: 60; -webkit-backdrop-filter: saturate(180%) blur(14px); backdrop-filter: saturate(180%) blur(14px); background: rgba(255,255,255,0.82); isolation: isolate; box-shadow: 0 1px 0 rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03); } body.axpro-nav-sidebar header { position: sticky; top: 0; z-index: 40; -webkit-backdrop-filter: saturate(180%) blur(12px); backdrop-filter: saturate(180%) blur(12px); background: rgba(255,255,255,0.85); isolation: isolate; } body.axpro-nav-header main, body.axpro-nav-header #app-main, body.axpro-nav-header main[role="main"], body.axpro-nav-sidebar main, body.axpro-nav-sidebar #app-main, body.axpro-nav-sidebar main[role="main"] { max-width: 1680px; width: 100%; margin: 0 auto; } @media (min-width: 1280px) { body.axpro-nav-header main, body.axpro-nav-header #app-main, body.axpro-nav-header main[role="main"] { padding: 1.5rem 2.25rem 2.5rem; } } /* ---------- (B) Sidebar modernisée — transitions fluides accordéon ---------- */ #sidebar { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease; will-change: transform; width: 264px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } #sidebar.sidebar-open { transform: translateX(0) !important; box-shadow: 20px 0 60px rgba(15,23,42,.18); } /* Scrollbar custom thème indigo/sky pour sidebar + mobile panel */ #sidebar::-webkit-scrollbar, .header-mobile-panel::-webkit-scrollbar { width: 6px; } #sidebar::-webkit-scrollbar-track, .header-mobile-panel::-webkit-scrollbar-track { background: transparent; } #sidebar::-webkit-scrollbar-thumb, .header-mobile-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #c7d2fe, #bae6fd); border-radius: 999px; } #sidebar::-webkit-scrollbar-thumb:hover, .header-mobile-panel::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #a5b4fc, #7dd3fc); } /* Accordéon sidebar groupe: transition fluide */ .sidebar-group-items { overflow: hidden; max-height: 0; transition: max-height .35s cubic-bezier(.2,.8,.2,1), opacity .2s ease; opacity: 0; } .sidebar-group-items.is-open { opacity: 1; } .sidebar-group-header + .sidebar-group-items.is-open, body:not(.js-sidebar-ready) .sidebar-group-items { max-height: 1200px; } .sidebar-chevron.is-open, .sidebar-group-header.is-open .sidebar-chevron { transform: rotate(180deg); } /* Sidebar link active state: barre gauche + halo subtil */ .sidebar-link.active { background: linear-gradient(90deg, var(--axpro-primary-soft), rgba(224,242,254,.6)); color: var(--axpro-primary); box-shadow: inset 0 0 0 1px rgba(99,102,241,.18), 0 2px 6px rgba(79,70,229,.08); } .sidebar-link.active::before { content: ''; position: absolute; left: 0; top: 18%; height: 64%; width: 3px; border-radius: 0 999px 999px 0; background: linear-gradient(180deg, var(--axpro-primary), var(--axpro-accent)); box-shadow: 0 0 8px rgba(79,70,229,.5); } .sidebar-link.active .sidebar-link-icon { color: var(--axpro-primary); background: white; box-shadow: 0 1px 2px rgba(15,23,42,.05); } /* ---------- (C) Header desktop tabs (dropdowns mega-menu) ---------- */ /* Wrapper des tabs (xl:flex parent): overflow:visible FORCÉ */ body.axpro-nav-header header > div:first-of-type > div:last-child > div.hidden.xl\:flex { overflow: visible !important; position: relative; z-index: 1; width: 100%; max-width: 100%; } /* ====== RÈGLE D'OR: aucun ancêtre ne doit couper le panel ====== */ body.axpro-nav-header header, body.axpro-nav-header header > div, body.axpro-nav-header header > div > div, .axpro-nav-header, body.axpro-nav-header { overflow-x: visible !important; overflow-y: visible !important; } .axpro-nav-header { isolation: isolate; } .header-tab-btn { white-space: nowrap; outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } .header-tab-btn:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; border-radius: 12px; } .header-tab-group { overflow: visible !important; position: relative; } .header-tab-group.is-open > [data-header-tab-btn] { color: var(--axpro-primary) !important; background: var(--axpro-primary-soft) !important; box-shadow: 0 1px 3px rgba(79,70,229,.08); } .header-tab-group.is-open > [data-header-tab-btn] .header-tab-chevron { transform: rotate(180deg); transition: transform .25s cubic-bezier(.2,.8,.2,1); } .header-tab-chevron { transition: transform .25s cubic-bezier(.2,.8,.2,1); } /* === CRITICAL v12: OVERRIDE TAILWIND utilities AVEC !important === Sans ça, les classes `invisible opacity-0 pointer-events-none translate-y-1` de Tailwind écrasent le sélecteur de classe simple .is-open */ .header-tab-group > [data-header-tab-panel].is-open { display: grid !important; opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: translateY(0) scale(1) !important; clip-path: none !important; } /* État fermé: réduction subtil scale 98% -> 100% à l'ouverture */ .header-tab-group > [data-header-tab-panel] { display: grid !important; /* déjà display grid, garder visible mais invisible */ transform-origin: top right; transition: opacity .22s ease, transform .22s cubic-bezier(.2,.8,.2,1), visibility .22s ease; transform: translateY(4px) scale(.98); will-change: transform, opacity; } .header-tab-link { position: relative; text-decoration: none; cursor: pointer; } .header-tab-link:hover { transform: translateX(1px); } .header-tab-panel::before { content: ''; position: absolute; top: -7px; right: 34px; width: 14px; height: 14px; background: #ffffff; border-left: 1px solid var(--axpro-sidebar-border); border-top: 1px solid var(--axpro-sidebar-border); transform: rotate(45deg); border-radius: 2px; pointer-events: none; box-shadow: -1px -1px 0 rgba(255,255,255,1); } @media (max-width: 1279px) { .header-tab-panel::before { display: none; } } /* =========================================== RÈGLES DE FLIP (uniquement via classes JS) Les sélecteurs nth-last-child étaient fragiles (dépendent du nb de groupes visibles selon perms). Maintenant TOUS les groupes sont évalués par JS selon getBoundingClientRect (position exacte). =========================================== */ @media (min-width: 1280px) { .header-tab-panel.is-edge-right, [data-header-tab-panel].is-edge-right { right: 0 !important; left: auto !important; transform-origin: top right !important; } .header-tab-panel.is-edge-right::before, [data-header-tab-panel].is-edge-right::before { right: 34px !important; left: auto !important; } .header-tab-panel.is-edge-left, [data-header-tab-panel].is-edge-left { left: 0 !important; right: auto !important; transform-origin: top left !important; } .header-tab-panel.is-edge-left::before, [data-header-tab-panel].is-edge-left::before { left: 34px !important; right: auto !important; } } /* ---------- (D) Header mobile panel (XL breakpoint, accordéon) ---------- Overlay flottant (position: fixed) au lieu d'un bloc en flux normal : sinon ce panneau pousse le contenu de la page vers le bas a chaque ouverture (au lieu de flotter par-dessus), ce qui augmente la hauteur de page et oblige a scroller pour retrouver le contenu — exactement le comportement "menu empile sous la page" a eviter sur mobile. Le `top` exact (sous le header sticky) est pose en JS a l'ouverture (hauteur du header variable selon le contenu). */ .header-mobile-panel { position: fixed; left: 0; right: 0; z-index: 45; max-height: min(75vh, calc(100dvh - 4rem)); overflow-y: auto; /* Fond 100% opaque, sans flou de fond : sur un overlay plein ecran, le fond semi-transparent + backdrop-blur d'origine laissait deviner/brouiller le contenu de la page derriere, rendant le texte des modules dur a lire. */ background: #ffffff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; } .header-mobile-panel.hidden { display: none !important; } .header-mobile-panel:not(.hidden) { animation: slideDownV12 .26s cubic-bezier(.2,.8,.2,1) both; box-shadow: 0 20px 50px -12px rgba(15,23,42,.28); } @keyframes slideDownV12 { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Fond assombri derriere le panneau mobile ouvert (memes conventions que #sidebarOverlay) */ body:has([data-header-mobile-panel]:not(.hidden))::after { content: ''; position: fixed; inset: 0; z-index: 44; background: rgba(15, 23, 42, .45); animation: modalFadeIn .2s ease-out; } [data-header-mobile-group-btn] { outline: none; cursor: pointer; -webkit-tap-highlight-color: transparent; } [data-header-mobile-group-btn]:focus-visible { outline: 2px solid #818cf8; outline-offset: 2px; border-radius: 16px; } [data-header-mobile-group-panel].hidden { display: none !important; } [data-header-mobile-group-panel]:not(.hidden) { animation: fadeInV12 .22s ease both; } @keyframes fadeInV12 { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: translateY(0); } } .header-mobile-chevron { transition: transform .28s cubic-bezier(.2,.8,.2,1); } .header-mobile-chevron.is-open { transform: rotate(180deg); } /* ---------- (E) Paramètres: cartes preview mode navigation ---------- */ .nav-mode-card { cursor: pointer; user-select: none; border-color: rgb(226 232 240); background: white; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .nav-mode-card:hover { transform: translateY(-1px); border-color: rgb(199 210 254); box-shadow: 0 8px 22px -12px rgba(79,70,229,.22); } .nav-mode-card::after { content: ''; position: absolute; inset: -2px; border-radius: 1.15rem; pointer-events: none; background: linear-gradient(135deg, rgba(99,102,241,.25), rgba(14,165,233,.18)); opacity: 0; transition: opacity .25s ease; z-index: -1; filter: blur(6px); } .nav-mode-card:hover::after { opacity: .55; } .nav-mode-card.is-loading { cursor: progress !important; filter: saturate(.9); transform: none !important; opacity: .9; } /* ---------- (F) Responsive tweaks final ---------- */ @media (max-width: 1279px) { .axpro-nav-header header > div:first-of-type { padding-left: 1rem; padding-right: 1rem; } } @media (max-width: 639px) { .axpro-nav-header [data-header-mobile-panel] { max-height: 72vh; } } /* ---------- (G) Max-width contrainte global (tous écrans) ---------- */ .header-tab-panel { max-width: min(1180px, calc(100vw - 2rem)); box-sizing: border-box; } @media (min-width: 1280px) { body.axpro-nav-header .header-tab-group[data-header-tab-group] { position: relative; } } /* ============================================================ RESPONSIVE v13 — ERGONOMIE MOBILE 100% (sidebar + tables + cartes + forms + opérateur) Breakpoints cibles: - xs : < 480px (téléphone petit) - sm : < 640px (téléphone standard) - md : < 768px (phablet / petite tablette) - lg : < 1024px (tablette) ============================================================ */ /* ---------- 1. BASE RESPONSIVE (tous layouts) ---------- */ html, body { width: 100%; overflow-x: hidden; -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; } body > div.flex, body > div.flex > div, body > main, main, section, .card, .dash-card, .form-card, .container, .container-fluid, [class*="max-w-"] { max-width: 100% !important; box-sizing: border-box; } img, picture, video, canvas, svg, iframe { max-width: 100%; height: auto; display: block; } input, button, textarea, select { font: inherit; max-width: 100%; } button, a, input[type="submit"], input[type="button"] { min-height: 44px; /* Touch target WCAG 2.2 3.2.2 */ min-width: 44px; } label, .form-label, .label { font-size: 13.5px; margin-bottom: .35rem; } input, textarea, select, [class*="form-control"], [class*="input-"] { min-height: 44px; padding: .6rem .85rem; font-size: 15px; /* Évite le zoom iOS auto-focus (>= 16px recommandé) */ border-radius: 10px; } textarea { min-height: 110px; } form .grid, .form-card .grid, .card .grid { grid-template-columns: 1fr !important; } @media (min-width: 640px) { form .grid.grid-cols-2, .form-card .grid.grid-cols-2, .card .grid.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 1024px) { form .grid.grid-cols-3, .form-card .grid.grid-cols-3, .card .grid.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } form .grid.grid-cols-4, .form-card .grid.grid-cols-4, .card .grid.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } form .grid.grid-cols-6, .card .grid.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } /* Flex row form -> wrap mobile */ .flex[class*="gap-"][class*="items-center"][class*="justify-"] { flex-wrap: wrap; } .flex.justify-between[class*="gap-"] { flex-wrap: wrap; gap: .75rem; } /* ---------- 2. SIDEBAR VERTICALE MOBILE ---------- */ /* Largeur sidebar mobile: 85vw max, jamais 100% pour laisser voir le contexte */ @media (max-width: 1023px) { #sidebar { width: 86vw !important; max-width: 340px !important; min-width: 0; top: 0; left: 0; height: 100vh; height: 100dvh; /* Respect safe-area iOS */ position: fixed; z-index: 70; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; touch-action: pan-y; } #sidebarOverlay { position: fixed; inset: 0; z-index: 65; width: 100%; height: 100vh; height: 100dvh; background: rgba(15, 23, 42, 0.55); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); } #sidebar .sidebar-link, #sidebar .sidebar-group-header { min-height: 44px; /* Touch target */ padding-top: .75rem; padding-bottom: .75rem; } #sidebar .sidebar-link-icon, #sidebar .sidebar-group-icon { width: 36px !important; height: 36px !important; } #sidebar nav { padding-left: .5rem; padding-right: .5rem; } #sidebar .sidebar-group-items a { min-height: 42px; } /* Bouton hamburger header — taille augmentée pour mobile */ #sidebarToggle { width: 46px !important; height: 46px !important; } header > div:first-of-type { padding-left: .75rem !important; padding-right: .75rem !important; } } @media (max-width: 479px) { #sidebar { width: 88vw !important; max-width: 300px !important; } } /* Empêche le scroll horizontal dans les sous-éléments de la sidebar si overflow */ #sidebar > * { max-width: 100%; } #sidebar nav a { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } #sidebar nav a > span:not(.sidebar-link-icon) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* ---------- 3. TABLEAUX RESPONSIVE (scroll horizontal isole au tableau, jamais a la page) ---------- */ /* IMPORTANT: overflow-x et min-width ne doivent JAMAIS etre sur le meme element. Le PARENT direct du tableau devient le conteneur de scroll (via :has, aucun changement de markup requis dans les 100+ vues existantes) ; le TABLEAU garde sa largeur naturelle (min-width) et deborde DANS ce parent, jamais dans la page (html/body ont overflow-x:hidden). */ *:has(> table.data-table), *:has(> table.dash-table), *:has(> table.data-table-unified), *:has(> table[class*="data-table"]), .table-container, .responsive-table { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } table.data-table, table.dash-table, table.data-table-unified, table[class*="data-table"] { border-spacing: 0; border-collapse: separate; width: 100%; } @media (max-width: 767px) { table.data-table, table.dash-table, table.data-table-unified, table[class*="data-table"] { min-width: 720px; width: max-content; } } .table-container > table, .responsive-table > table { width: 100%; min-width: 720px; } /* Wrapper global qui active mode "stacked cards" sous 768px si classe table-stacked-cards ajoutée */ @media (max-width: 767px) { table.table-stacked-cards thead, table.table-stacked-cards th { display: none !important; } table.table-stacked-cards, table.table-stacked-cards tbody, table.table-stacked-cards tr, table.table-stacked-cards td { display: block !important; width: 100% !important; box-sizing: border-box; } table.table-stacked-cards tbody tr { border: 1px solid #e2e8f0; border-radius: 14px; margin-bottom: .85rem; padding: 0; background: white; box-shadow: 0 2px 6px rgba(15, 23, 42, .05); overflow: hidden; } table.table-stacked-cards tbody td { border: none !important; border-bottom: 1px dashed #f1f5f9 !important; padding: .6rem .85rem !important; text-align: left !important; display: flex !important; justify-content: space-between !important; align-items: flex-start !important; gap: .75rem; font-size: 14px; vertical-align: top; } table.table-stacked-cards tbody td:last-child { border-bottom: none !important; } table.table-stacked-cards tbody td::before { content: attr(data-label); display: inline-block; flex: 0 0 38%; max-width: 38%; font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.05em; color: #64748b; padding-top: 2px; word-break: break-word; white-space: normal; } table.table-stacked-cards tbody td > * { display: inline-block; max-width: 58%; word-break: break-word; } table.table-stacked-cards tbody td > .inline-flex, table.table-stacked-cards tbody td > .flex { max-width: 58%; flex-wrap: wrap; } } /* Typographie mobile des tableaux standard (le scroll horizontal lui-meme est gere par la regle universelle *:has(> table...) plus haut ; on ne remet pas overflow-x:auto ici pour eviter d'empiler un 2e conteneur de scroll sur un ancetre .dash-card/.card quand le tableau a deja son propre wrapper .overflow-x-auto — c'etait la cause du "double scrollbar" inutile). */ @media (max-width: 767px) { table.data-table thead th, table.dash-table thead th, table.data-table-unified thead th { font-size: 12px; padding: .65rem .6rem; white-space: nowrap; } table.data-table tbody td, table.dash-table tbody td, table.data-table-unified tbody td { padding: .6rem .6rem; font-size: 13.5px; white-space: nowrap; } } /* ---------- 4. CARTES DASHBOARD + KPI responsive ---------- */ .kpi-grid, .dashboard-grid, .op-stats { grid-template-columns: 1fr !important; gap: 1rem !important; } @media (min-width: 480px) { .kpi-grid, .dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (min-width: 768px) { .kpi-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .dashboard-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } .main-grid { grid-template-columns: 1fr !important; } .bottom-grid { grid-template-columns: 1fr !important; } } @media (min-width: 1024px) { .kpi-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .dashboard-grid { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; } .main-grid { grid-template-columns: 2fr 1fr !important; } .bottom-grid { grid-template-columns: 1fr 1fr !important; } } @media (min-width: 1280px) { .kpi-grid { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 1.1rem !important; } .dashboard-grid { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } } /* Padding cartes compact mobile */ @media (max-width: 639px) { .card, .dash-card, .kpi-card, .kpi-card-enhanced, .kpi-modern, .op-card, .form-card { padding: 1rem !important; border-radius: 14px !important; } .card-header, .dash-card-header, .form-card-header { padding-bottom: .85rem !important; margin-bottom: .85rem !important; } main, #app-main, main[role="main"] { padding: 1rem .85rem 1.25rem !important; } h1 { font-size: 1.25rem !important; line-height: 1.2; } h2 { font-size: 1.1rem !important; } .text-sm, .text-xs { font-size: 13.5px !important; } } /* ---------- 5. LAYOUT HEADER HORIZONTAL responsive ---------- */ @media (max-width: 1023px) { body.axpro-nav-header header > div:first-of-type h2 { font-size: 13.5px; } .header-tab-panel { position: fixed !important; top: auto !important; left: 1rem !important; right: 1rem !important; bottom: 1rem !important; min-width: 0 !important; width: auto !important; max-height: 78vh !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch; } } /* ---------- 6. SAFE AREA IPHONE (notch + home indicator) ---------- */ @supports (padding: max(0px)) { @media (max-width: 1023px) { header, .op-header { padding-left: max(.75rem, env(safe-area-inset-left)); padding-right: max(.75rem, env(safe-area-inset-right)); padding-top: max(0rem, env(safe-area-inset-top)); } #sidebar { padding-bottom: max(0.5rem, env(safe-area-inset-bottom)); } main, main.op-main { padding-left: max(.85rem, env(safe-area-inset-left)); padding-right: max(.85rem, env(safe-area-inset-right)); padding-bottom: max(1.25rem, calc(env(safe-area-inset-bottom) + 0.75rem)); } } } /* ---------- 7. TEXTE RESPONSIVE & LISEMBILITÉ ---------- */ @media (max-width: 639px) { body { line-height: 1.5; } p, li, td, th, label, .text-[13.5px] { font-size: 14.5px !important; } .truncate { white-space: normal !important; overflow: visible !important; text-overflow: clip !important; } .whitespace-nowrap { white-space: normal !important; } .badge, [class*="badge-"], .chip, .tag, .pill { font-size: 12px !important; padding: .2rem .5rem !important; } } /* ---------- 8. INPUTS MULTI-BOUTONS ACTIONS MOBILE ---------- */ .flex.justify-end[class*="gap-"] { flex-wrap: wrap; justify-content: flex-start !important; gap: .5rem !important; } @media (max-width: 639px) { .flex.justify-end[class*="gap-"] > button, .flex.justify-end[class*="gap-"] > a, .flex.items-center.justify-between > * { flex: 1 1 auto; width: 100%; } .flex.justify-end, .flex.items-end { justify-content: stretch; } .btn, button.btn, a.btn { display: inline-flex; justify-content: center; align-items: center; width: 100%; } } /* ---------- 9. MODALE MOBILE (corrige overflow + hauteur full) ---------- */ @media (max-width: 639px) { .modal-overlay { padding: 0 !important; } .modal-container { width: 100% !important; max-width: 100% !important; margin: 0 !important; border-radius: 18px 18px 0 0 !important; min-height: 86vh !important; min-height: calc(86dvh) !important; display: flex; flex-direction: column; bottom: 0 !important; top: auto !important; position: fixed !important; left: 0 !important; right: 0 !important; transform: none !important; animation: axproSlideUp .28s cubic-bezier(.2,.8,.2,1) !important; overflow: hidden; } .modal-header, .modal-footer { flex-shrink: 0; position: sticky; z-index: 2; background: white; } .modal-header { top: 0; border-bottom: 1px solid #f1f5f9; } .modal-footer { bottom: 0; border-top: 1px solid #f1f5f9; } .modal-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 1rem .9rem !important; } } @keyframes axproSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ---------- 10. PAGE IMPRESSION (PDF) déjà @media print existant, on renforce responsive si impression mobile ---------- */ @page { margin: 8mm 6mm; } /* ============================================================= */ /* 11. FIX LISIBILITÉ NOTIFICATIONS (PANEL DROPDOWN + PAGE /notifications) */ /* Applicable UNIVERSELLEMENT (mobile + desktop) - aucune restriction @media */ /* ============================================================= */ /* -- Annulation des règles RESPONSIVE v13 (.flex.items-center.justify-between > * width:100!) trop agressives, */ /* pour TOUTE taille d'écran, dans tous les blocs de notifications (panel dropdown + page externe) */ [data-notif-panel] .flex.items-center.justify-between > *, [data-notif-wrap] .flex.items-center.justify-between > *, [data-notif-panel] .flex.justify-end > *, body.page-notifications .flex.items-center.justify-between > *, body.page-notifications .flex.justify-end[class*="gap-"] > button, body.page-notifications .flex.justify-end[class*="gap-"] > a, body.page-notifications .flex.items-center.justify-between.gap-2 > * { flex: initial !important; width: auto !important; } /* -- FALLBACK WIDTH panel notifications (Tailwind CDN parfois rate w-[…] arbitraire avec comma/paren) -- */ [data-notif-panel] { width: 94vw !important; max-width: 420px !important; } @media (min-width: 640px) { [data-notif-panel] { width: 420px !important; max-width: 420px !important; } } /* -- HEADER + FOOTER PANEL NOTIF (header = first div, footer = last div) -- */ [data-notif-panel] > div:first-child, [data-notif-panel] > div:last-child { padding-left: 14px !important; padding-right: 14px !important; gap: .6rem !important; } [data-notif-panel] > div:first-child > .flex.items-center.gap-2 { min-width: 0; } [data-notif-panel] > div:first-child > .flex.items-center.gap-2 .leading-tight { min-width: 0; max-width: 260px; } [data-notif-panel] > div:first-child > .flex.items-center.gap-2 .leading-tight > div:first-child { font-size: 14px !important; line-height: 1.2; white-space: normal; overflow: visible; text-overflow: clip; } [data-notif-panel] > div:first-child > .flex.items-center.gap-2 .leading-tight > div:last-child { font-size: 11px !important; line-height: 1.3; white-space: normal; color: #64748b !important; } [data-notif-panel] [data-notif-markall-form] button { width: auto !important; min-height: 34px; padding: 6px 10px !important; font-size: 11.5px !important; line-height: 1.1; display: inline-flex !important; justify-content: center; align-items: center; flex: 0 0 auto !important; white-space: nowrap; } /* -- LISTE NOTIFICATIONS