/* ============================================================ ASSOCIATION MANAGEMENT — DESIGN SYSTEM (UX REFRESH) ------------------------------------------------------------ Couche d'unification chargée APRES portal.css + portal_modern.css. Objectifs : - Palette unique alignée avec l'app mobile Flutter - Composants utilitaires manquants (toast, skeleton, breadcrumb, empty state, focus-visible, sr-only, responsive helpers) - Corrections d'accessibilité (contraste, focus, touch targets) - Corrections responsive (sticky paiement, tables, navigation) - Animations cohérentes (fade, slide, pulse) ============================================================ */ /* ============================================================ 1. TOKENS GLOBAUX (custom properties au :root pour usage en dehors du namespace .am-portal-wrapper, ex. ) ============================================================ */ :root { /* Brand */ --ams-primary-900: #152a45; --ams-primary-800: #1e3a5f; --ams-primary-700: #2d5a8a; --ams-primary-600: #3b7bb5; --ams-primary-500: #4a8fc7; --ams-accent-500: #0ea5e9; --ams-accent-400: #38bdf8; /* Sémantique */ --ams-success-700: #047857; --ams-success-600: #059669; --ams-success-50: #d1fae5; --ams-warning-700: #b45309; --ams-warning-600: #d97706; --ams-warning-50: #fef3c7; --ams-danger-700: #b91c1c; --ams-danger-600: #dc2626; --ams-danger-50: #fee2e2; --ams-info-700: #0369a1; --ams-info-600: #0284c7; --ams-info-50: #e0f2fe; /* Neutres (alignés portail.css gray-*) */ --ams-gray-0: #ffffff; --ams-gray-50: #f8fafc; --ams-gray-100: #f1f5f9; --ams-gray-200: #e2e8f0; --ams-gray-300: #cbd5e1; --ams-gray-400: #94a3b8; --ams-gray-500: #64748b; --ams-gray-600: #475569; --ams-gray-700: #334155; --ams-gray-800: #1e293b; --ams-gray-900: #0f172a; /* Surfaces */ --ams-bg: #f8fafc; --ams-surface: #ffffff; --ams-surface-2: #f1f5f9; --ams-border: #e2e8f0; /* Texte (contrastes WCAG AA renforcés) */ --ams-text: #0f172a; --ams-text-muted: #475569; /* AAA sur blanc */ --ams-text-subtle: #64748b; /* AA */ /* Espacements (scale 4) */ --ams-space-1: 0.25rem; --ams-space-2: 0.5rem; --ams-space-3: 0.75rem; --ams-space-4: 1rem; --ams-space-5: 1.25rem; --ams-space-6: 1.5rem; --ams-space-8: 2rem; --ams-space-10: 2.5rem; --ams-space-12: 3rem; --ams-space-16: 4rem; /* Rayons */ --ams-radius-xs: 0.25rem; --ams-radius-sm: 0.375rem; --ams-radius: 0.5rem; --ams-radius-md: 0.625rem; --ams-radius-lg: 0.75rem; --ams-radius-xl: 1rem; --ams-radius-2xl: 1.25rem; --ams-radius-full: 9999px; /* Élévations */ --ams-shadow-sm: 0 1px 2px 0 rgb(15 23 42 / 0.05); --ams-shadow: 0 1px 3px 0 rgb(15 23 42 / 0.08), 0 1px 2px -1px rgb(15 23 42 / 0.06); --ams-shadow-md: 0 4px 6px -1px rgb(15 23 42 / 0.10), 0 2px 4px -2px rgb(15 23 42 / 0.08); --ams-shadow-lg: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 4px 6px -4px rgb(15 23 42 / 0.08); --ams-shadow-xl: 0 20px 25px -5px rgb(15 23 42 / 0.12); --ams-ring: 0 0 0 3px rgb(14 165 233 / 0.30); /* Transitions */ --ams-t-fast: 120ms ease; --ams-t: 180ms ease; --ams-t-slow: 280ms cubic-bezier(.2,.8,.2,1); /* Layout */ --ams-header-h: 64px; --ams-content-max: 1200px; } /* Re-mapping des variables historiques (.am-portal-wrapper) sur les tokens communs. Permet de modifier l'identité depuis :root sans toucher portal.css */ .am-portal-wrapper { --am-primary: var(--ams-primary-800); --am-primary-light: var(--ams-primary-700); --am-primary-dark: var(--ams-primary-900); --am-secondary: var(--ams-gray-500); --am-accent: var(--ams-accent-500); --am-accent-light: var(--ams-accent-400); --am-success: var(--ams-success-600); --am-success-light: var(--ams-success-50); --am-warning: var(--ams-warning-600); --am-warning-light: var(--ams-warning-50); --am-danger: var(--ams-danger-600); --am-danger-light: var(--ams-danger-50); --am-info: var(--ams-info-600); --am-info-light: var(--ams-info-50); } /* ============================================================ 2. ACCESSIBILITÉ TRANSVERSALE ============================================================ */ /* Skip link — premier élément focusable des layouts */ .ams-skip-link { position: absolute; top: -100px; left: 0; background: var(--ams-primary-800); color: var(--ams-gray-0); padding: 0.625rem 1rem; border-radius: 0 0 var(--ams-radius) 0; z-index: 10000; text-decoration: none; font-weight: 600; transition: top var(--ams-t); } .ams-skip-link:focus { top: 0; outline: none; box-shadow: var(--ams-ring); } /* Screen-reader only */ .ams-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; } /* Focus visible cohérent : visible uniquement au clavier (pas au clic souris) Les composants Bootstrap perdent le focus visible — on le restaure. */ .am-portal-wrapper :focus-visible, .ams-portal :focus-visible, .ams-focusable:focus-visible { outline: none; box-shadow: var(--ams-ring); border-radius: var(--ams-radius-sm); } .am-portal-wrapper button:focus:not(:focus-visible), .am-portal-wrapper a:focus:not(:focus-visible) { outline: none; box-shadow: none; } /* Touch targets minimaux 44px (WCAG 2.5.5) */ .am-portal-wrapper .am-btn, .am-portal-wrapper .btn, .am-portal-wrapper a.am-nav-link, .am-portal-wrapper input[type="checkbox"] + label, .am-portal-wrapper .am-tab { min-height: 44px; } /* Préfère réduire les animations si l'OS le demande */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } /* ============================================================ 3. SPINNER (correction : forcer l'animation au cas où) ============================================================ */ @keyframes ams-spin { to { transform: rotate(360deg); } } .ams-spinner, .am-portal-wrapper .am-spinner { display: inline-block; width: 1.125rem; height: 1.125rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ams-spin 0.7s linear infinite; vertical-align: -0.2em; } .ams-spinner.ams-spinner-sm { width: 0.875rem; height: 0.875rem; border-width: 1.5px; } .ams-spinner.ams-spinner-lg { width: 1.75rem; height: 1.75rem; border-width: 3px; } /* Bouton avec état "loading" : le spinner remplace l'icône, le texte reste */ .ams-btn-loading { position: relative; pointer-events: none; opacity: 0.85; } .ams-btn-loading::after { content: ""; display: inline-block; width: 1rem; height: 1rem; margin-left: 0.5rem; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: ams-spin 0.7s linear infinite; vertical-align: -0.2em; } /* ============================================================ 4. SKELETON LOADERS ============================================================ */ @keyframes ams-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } .ams-skeleton { display: block; background: linear-gradient(90deg, var(--ams-gray-100) 0%, var(--ams-gray-200) 50%, var(--ams-gray-100) 100%); background-size: 200% 100%; animation: ams-shimmer 1.4s ease-in-out infinite; border-radius: var(--ams-radius-sm); color: transparent; user-select: none; } @keyframes ams-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } .ams-skeleton-line { height: 0.875rem; margin-block: 0.5rem; } .ams-skeleton-title { height: 1.5rem; width: 60%; margin-block: 0.75rem; } .ams-skeleton-avatar{ width: 48px; height: 48px; border-radius: 50%; } .ams-skeleton-card { height: 120px; border-radius: var(--ams-radius-lg); } /* ============================================================ 5. BREADCRUMB ============================================================ */ .ams-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ams-space-2); padding: var(--ams-space-3) 0; margin-bottom: var(--ams-space-4); font-size: 0.875rem; color: var(--ams-text-subtle); } .ams-breadcrumb a { color: var(--ams-primary-700); text-decoration: none; transition: color var(--ams-t); } .ams-breadcrumb a:hover { color: var(--ams-primary-800); text-decoration: underline; } .ams-breadcrumb li, .ams-breadcrumb-item { display: flex; align-items: center; gap: var(--ams-space-2); list-style: none; } .ams-breadcrumb li + li::before, .ams-breadcrumb-item + .ams-breadcrumb-item::before { content: "›"; color: var(--ams-gray-400); font-weight: 600; } .ams-breadcrumb [aria-current="page"] { color: var(--ams-text); font-weight: 600; } /* ============================================================ 6. EMPTY STATE UNIFIÉ ============================================================ */ .ams-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--ams-space-12) var(--ams-space-6); text-align: center; color: var(--ams-text-muted); background: var(--ams-surface); border: 1px dashed var(--ams-border); border-radius: var(--ams-radius-xl); min-height: 240px; } .ams-empty-icon { width: 72px; height: 72px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--ams-info-50); color: var(--ams-info-600); font-size: 2rem; margin-bottom: var(--ams-space-4); } .ams-empty-title { font-size: 1.125rem; font-weight: 600; color: var(--ams-text); margin: 0 0 var(--ams-space-2); } .ams-empty-text { font-size: 0.95rem; max-width: 420px; margin: 0 auto var(--ams-space-4); line-height: 1.5; } .ams-empty-actions { display: flex; gap: var(--ams-space-3); justify-content: center; flex-wrap: wrap; } /* ============================================================ 7. TOAST / SNACKBAR ============================================================ */ .ams-toast-region { position: fixed; bottom: 1.25rem; right: 1.25rem; display: flex; flex-direction: column; gap: 0.625rem; z-index: 9999; pointer-events: none; max-width: min(420px, calc(100vw - 2rem)); } .ams-toast { pointer-events: auto; display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; background: var(--ams-surface); border-left: 4px solid var(--ams-info-600); border-radius: var(--ams-radius-md); box-shadow: var(--ams-shadow-lg); animation: ams-toast-in 220ms ease-out; color: var(--ams-text); } @keyframes ams-toast-in { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .ams-toast.ams-toast-success { border-left-color: var(--ams-success-600); } .ams-toast.ams-toast-warning { border-left-color: var(--ams-warning-600); } .ams-toast.ams-toast-danger, .ams-toast.ams-toast-error { border-left-color: var(--ams-danger-600); } .ams-toast-icon { flex-shrink: 0; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: var(--ams-info-600); font-size: 1.125rem; } .ams-toast.ams-toast-success .ams-toast-icon { color: var(--ams-success-600); } .ams-toast.ams-toast-warning .ams-toast-icon { color: var(--ams-warning-600); } .ams-toast.ams-toast-danger .ams-toast-icon, .ams-toast.ams-toast-error .ams-toast-icon { color: var(--ams-danger-600); } .ams-toast-content { flex: 1; min-width: 0; } .ams-toast-title { font-weight: 600; font-size: 0.95rem; margin-bottom: 0.125rem; } .ams-toast-text { font-size: 0.875rem; color: var(--ams-text-muted); } .ams-toast-close { background: transparent; border: none; color: var(--ams-gray-400); font-size: 1.125rem; cursor: pointer; padding: 0 0.25rem; line-height: 1; } .ams-toast-close:hover { color: var(--ams-gray-700); } /* ============================================================ 8. CORRECTIFS RESPONSIVE ============================================================ */ /* La sticky-col du flow paiement bloque le contenu sur mobile. */ @media (max-width: 991.98px) { .am-portal-wrapper .am-sticky-top, .am-portal-wrapper .am-payment-summary, .am-portal-wrapper .am-summary-sticky { position: static !important; top: auto !important; } } /* Tables scrollables horizontalement sur petits écrans */ .ams-table-responsive, .am-portal-wrapper .table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--ams-radius-lg); border: 1px solid var(--ams-border); } .ams-table-responsive table, .am-portal-wrapper .table-responsive table { margin: 0; } /* Listes de cards : grille fluide */ .ams-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--ams-space-5); } .ams-grid-sm { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--ams-space-4); } /* Stack utility (gap vertical) */ .ams-stack > * + * { margin-top: var(--ams-space-4); } .ams-stack-sm > * + * { margin-top: var(--ams-space-2); } .ams-stack-lg > * + * { margin-top: var(--ams-space-6); } /* ============================================================ 9. CARDS COMPLÉMENTAIRES ============================================================ */ .ams-card { background: var(--ams-surface); border: 1px solid var(--ams-border); border-radius: var(--ams-radius-xl); box-shadow: var(--ams-shadow-sm); overflow: hidden; transition: box-shadow var(--ams-t), transform var(--ams-t); } .ams-card-interactive { cursor: pointer; } .ams-card-interactive:hover, .ams-card-interactive:focus-within { box-shadow: var(--ams-shadow-lg); transform: translateY(-2px); } .ams-card-body { padding: var(--ams-space-5) var(--ams-space-6); } .ams-card-header { padding: var(--ams-space-4) var(--ams-space-6); border-bottom: 1px solid var(--ams-border); background: var(--ams-surface-2); font-weight: 600; } .ams-card-footer { padding: var(--ams-space-3) var(--ams-space-6); border-top: 1px solid var(--ams-border); background: var(--ams-surface-2); font-size: 0.875rem; color: var(--ams-text-muted); } /* ============================================================ 10. BADGES (extension cohérente) ============================================================ */ .ams-badge { display: inline-flex; align-items: center; gap: 0.375rem; padding: 0.25rem 0.625rem; border-radius: var(--ams-radius-full); font-size: 0.75rem; font-weight: 600; line-height: 1; background: var(--ams-gray-100); color: var(--ams-gray-700); white-space: nowrap; } .ams-badge-success { background: var(--ams-success-50); color: var(--ams-success-700); } .ams-badge-warning { background: var(--ams-warning-50); color: var(--ams-warning-700); } .ams-badge-danger { background: var(--ams-danger-50); color: var(--ams-danger-700); } .ams-badge-info { background: var(--ams-info-50); color: var(--ams-info-700); } .ams-badge-primary { background: rgba(30,58,95,0.10); color: var(--ams-primary-800); } .ams-badge-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ============================================================ 11. PROGRESS (barre de progression accessible) ============================================================ */ .ams-progress { position: relative; width: 100%; height: 8px; background: var(--ams-gray-200); border-radius: var(--ams-radius-full); overflow: hidden; } .ams-progress-bar { height: 100%; background: linear-gradient(90deg, var(--ams-primary-700), var(--ams-accent-500)); border-radius: inherit; transition: width var(--ams-t-slow); } .ams-progress-bar.ams-progress-success { background: var(--ams-success-600); } .ams-progress-bar.ams-progress-warning { background: var(--ams-warning-600); } .ams-progress-bar.ams-progress-danger { background: var(--ams-danger-600); } .ams-progress-label { display: flex; justify-content: space-between; font-size: 0.8125rem; color: var(--ams-text-muted); margin-bottom: 0.375rem; } /* ============================================================ 12. FORMULAIRES — AMÉLIORATIONS ============================================================ */ /* Validation visuelle */ .ams-field { display: flex; flex-direction: column; gap: 0.375rem; margin-bottom: var(--ams-space-4); } .ams-field-label { font-size: 0.875rem; font-weight: 600; color: var(--ams-text); } .ams-field-required::after { content: " *"; color: var(--ams-danger-600); font-weight: 700; } .ams-field-help { font-size: 0.8125rem; color: var(--ams-text-muted); } .ams-field-error { font-size: 0.8125rem; color: var(--ams-danger-700); display: flex; align-items: center; gap: 0.375rem; } .ams-field-error::before { content: "\f06a"; /* fa-exclamation-circle */ font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome; font-weight: 900; } /* Input invalide */ .am-portal-wrapper .form-control.is-invalid, .am-portal-wrapper input.ams-invalid, .am-portal-wrapper textarea.ams-invalid, .am-portal-wrapper select.ams-invalid { border-color: var(--ams-danger-600) !important; box-shadow: 0 0 0 3px rgb(220 38 38 / 0.15) !important; } /* ============================================================ 13. NAVIGATION — AMÉLIORATIONS DE LISIBILITÉ ============================================================ */ /* Lien actif visible et lisible */ .am-portal-wrapper .am-nav-link.active, .am-portal-wrapper .am-nav-link[aria-current="page"] { background: rgba(255,255,255,0.18); color: var(--ams-gray-0); font-weight: 700; } /* ============================================================ 14. PUBLIC PORTAL (portal_layout / portal_home) ============================================================ */ .ams-public-hero { background: linear-gradient(135deg, var(--ams-primary-800) 0%, var(--ams-primary-700) 100%); color: var(--ams-gray-0); padding: var(--ams-space-16) var(--ams-space-6); border-radius: 0 0 var(--ams-radius-2xl) var(--ams-radius-2xl); text-align: center; } .ams-public-hero h1 { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 800; margin-bottom: var(--ams-space-3); } .ams-public-hero p { opacity: 0.9; max-width: 640px; margin: 0 auto var(--ams-space-6); } .ams-stat-tile { background: var(--ams-surface); border-radius: var(--ams-radius-xl); padding: var(--ams-space-5); box-shadow: var(--ams-shadow); text-align: center; border-top: 3px solid var(--ams-accent-500); } .ams-stat-value { font-size: 1.75rem; font-weight: 800; color: var(--ams-primary-800); } .ams-stat-label { font-size: 0.875rem; color: var(--ams-text-muted); margin-top: 0.25rem; } /* ============================================================ 15. UTILITAIRES ============================================================ */ .ams-text-muted { color: var(--ams-text-muted) !important; } .ams-text-subtle { color: var(--ams-text-subtle) !important; } .ams-text-primary { color: var(--ams-primary-800) !important; } .ams-text-success { color: var(--ams-success-700) !important; } .ams-text-danger { color: var(--ams-danger-700) !important; } .ams-text-warning { color: var(--ams-warning-700) !important; } .ams-bg-soft-primary { background: rgba(30,58,95,0.06); } .ams-bg-soft-success { background: var(--ams-success-50); } .ams-bg-soft-warning { background: var(--ams-warning-50); } .ams-bg-soft-danger { background: var(--ams-danger-50); } .ams-rounded { border-radius: var(--ams-radius-lg) !important; } .ams-rounded-xl{ border-radius: var(--ams-radius-xl) !important; } .ams-shadow { box-shadow: var(--ams-shadow) !important; } .ams-shadow-lg { box-shadow: var(--ams-shadow-lg) !important; } .ams-flex { display: flex; } .ams-flex-col { display: flex; flex-direction: column; } .ams-items-center { align-items: center; } .ams-justify-between { justify-content: space-between; } .ams-gap-2 { gap: var(--ams-space-2); } .ams-gap-3 { gap: var(--ams-space-3); } .ams-gap-4 { gap: var(--ams-space-4); } /* ============================================================ 16. ANIMATIONS UTILITAIRES (réutilisables) ============================================================ */ @keyframes ams-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } } .ams-fade-in { animation: ams-fade-in 220ms ease-out both; } @keyframes ams-slide-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .ams-slide-up { animation: ams-slide-up 280ms ease-out both; } /* ============================================================ 17. FIXES CIBLÉS — TEMPLATES EXISTANTS ============================================================ */ /* Activités publiques utilisant Bootstrap : harmoniser les cartes */ .am-portal-wrapper .activity-card, .am-portal-wrapper .am-activity-card { border-radius: var(--ams-radius-xl); border: 1px solid var(--ams-border); box-shadow: var(--ams-shadow-sm); transition: box-shadow var(--ams-t), transform var(--ams-t); overflow: hidden; } .am-portal-wrapper .activity-card:hover, .am-portal-wrapper .am-activity-card:hover { box-shadow: var(--ams-shadow-lg); transform: translateY(-3px); } /* Boutons Bootstrap non-namespacés (formulaires de don, etc.) */ .am-portal-wrapper .btn-primary { background: linear-gradient(135deg, var(--ams-primary-800), var(--ams-primary-700)) !important; border-color: var(--ams-primary-800) !important; border-radius: var(--ams-radius-md); font-weight: 600; } .am-portal-wrapper .btn-primary:hover, .am-portal-wrapper .btn-primary:focus { background: linear-gradient(135deg, var(--ams-primary-900), var(--ams-primary-800)) !important; border-color: var(--ams-primary-900) !important; } .am-portal-wrapper .btn-outline-primary { color: var(--ams-primary-800); border-color: var(--ams-primary-800); border-radius: var(--ams-radius-md); font-weight: 600; } .am-portal-wrapper .btn-outline-primary:hover { background: var(--ams-primary-800); color: var(--ams-gray-0); } /* Liens accessibilité : couleur focus contraste */ .am-portal-wrapper a { transition: color var(--ams-t); } /* Hiérarchie typographique stable */ .am-portal-wrapper h1 { font-weight: 800; letter-spacing: -0.02em; } .am-portal-wrapper h2 { font-weight: 700; letter-spacing: -0.01em; } .am-portal-wrapper h3 { font-weight: 700; } /* Améliore la lisibilité des montants (tabulaire) */ .ams-tabular, .am-portal-wrapper .am-amount, .am-portal-wrapper .am-fee-amount { font-variant-numeric: tabular-nums; } /* ============================================================ FIN DU DESIGN SYSTEM ============================================================ */