/* ═════════════════════════════════════════════════════════════════ ERA CORNELIS — Design System v1 Source unique brand : couleurs Pantone, typo Gotham, composants Créé 2026-05-28 · doctrine [[doctrine-design-facilite-vs-eraforce]] ═════════════════════════════════════════════════════════════════ USAGE : à placer dans APRÈS /fonts/gotham.css ───────────────────────────────────────────────────────────────── */ :root { /* ─── COULEURS BRAND OFFICIELLES (charte ERA 2022) ────────────── */ --era-rouge: #D70A28; /* Pantone 186C · actif, A VENDRE, A LOUER, alertes */ --era-rouge-fonce: #960E34; /* dégradé logo · états hover rouge */ --era-rouge-clair: #FFF5F6; /* fond ultra-clair pour cards rouge */ --era-bleu: #250E62; /* Pantone 2755C · VENDU, LOUÉ, JMO, titres */ --era-bleu-fonce: #1B3A5C; /* texte corps premium */ --era-bleu-clair: #F5F0FF; /* fond ultra-clair pour cards bleu */ --era-blanc: #FFFFFF; /* obligatoire entre rouge et bleu */ /* ─── NEUTRES ─────────────────────────────────────────────────── */ --era-gris-texte: #333333; --era-gris: #64748B; --era-gris-clair: #E2E8F0; --era-gris-ultra: #F1F5F9; --era-bg: #F8FAFC; /* ─── STATUTS SÉMANTIQUES ─────────────────────────────────────── */ --era-success: #15803D; /* vert succès */ --era-success-bg: #F0F8F0; --era-warning: #F57F17; /* orange alerte */ --era-warning-bg: #FFF8E1; --era-danger: #D32F2F; /* rouge urgent */ --era-danger-bg: #FFEBEE; --era-info: #0078D4; --era-info-bg: #E3F2FD; /* ─── TYPOGRAPHIE GOTHAM ──────────────────────────────────────── */ --era-font: 'Gotham', system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --era-w-light: 300; --era-w-book: 400; /* texte corps · paragraphes */ --era-w-medium: 500; --era-w-bold: 700; /* sous-titres */ --era-w-black: 900; /* titres MAJUSCULES · accroches */ /* ─── ESPACEMENTS (échelle 4px stricte) ───────────────────────── */ --era-gap-xs: 4px; --era-gap-s: 8px; --era-gap-m: 16px; --era-gap-l: 24px; --era-gap-xl: 40px; --era-gap-xxl: 64px; /* ─── RAYONS ──────────────────────────────────────────────────── */ --era-radius-s: 6px; --era-radius-m: 10px; --era-radius-l: 16px; --era-radius-pill: 999px; /* ─── OMBRES ──────────────────────────────────────────────────── */ --era-shadow-card: 0 1px 3px rgba(37,14,98,.08), 0 4px 12px rgba(37,14,98,.04); --era-shadow-hover: 0 4px 16px rgba(37,14,98,.12); --era-shadow-modal: 0 20px 60px rgba(37,14,98,.20); /* ─── TRANSITIONS ─────────────────────────────────────────────── */ --era-t-fast: 120ms ease; --era-t-base: 200ms ease; --era-t-slow: 400ms ease; /* ─── Z-INDEX (échelle réservée) ──────────────────────────────── */ --era-z-sticky: 50; --era-z-overlay: 100; --era-z-modal: 200; --era-z-toast: 300; --era-z-petit-raphael: 400; /* ─── ALIAS LEGACY (compat avec code existant) ────────────────── */ --radius: var(--era-radius-m); } /* ═══════════════ COMPOSANTS UTILITAIRES (préfixe era-) ═══════════ */ /* Classes opt-in : aucun effet si non utilisées. Zéro régression. */ /* CARDS */ .era-card { background: var(--era-blanc); border-radius: var(--era-radius-l); border: 1px solid var(--era-gris-clair); padding: var(--era-gap-l); box-shadow: var(--era-shadow-card); transition: transform var(--era-t-fast), box-shadow var(--era-t-fast); } .era-card--hoverable:hover { transform: translateY(-2px); box-shadow: var(--era-shadow-hover); } .era-card--rouge { border-left: 4px solid var(--era-rouge); } .era-card--bleu { border-left: 4px solid var(--era-bleu); } /* BOUTONS */ .era-btn-primary { background: var(--era-rouge); color: var(--era-blanc); font-family: var(--era-font); font-weight: var(--era-w-bold); text-transform: uppercase; letter-spacing: .5px; font-size: 13px; padding: 10px 18px; border-radius: var(--era-radius-s); border: none; cursor: pointer; transition: background var(--era-t-fast), transform var(--era-t-fast); } .era-btn-primary:hover { background: var(--era-rouge-fonce); transform: translateY(-1px); } .era-btn-primary:active { transform: translateY(0); } .era-btn-secondary { background: var(--era-blanc); color: var(--era-bleu); font-family: var(--era-font); font-weight: var(--era-w-bold); font-size: 13px; padding: 10px 18px; border-radius: var(--era-radius-s); border: 1.5px solid var(--era-bleu); cursor: pointer; transition: background var(--era-t-fast); } .era-btn-secondary:hover { background: var(--era-bleu-clair); } .era-btn-ghost { background: transparent; color: var(--era-gris); font-family: var(--era-font); font-size: 13px; padding: 8px 14px; border-radius: var(--era-radius-s); border: none; cursor: pointer; transition: color var(--era-t-fast), background var(--era-t-fast); } .era-btn-ghost:hover { color: var(--era-bleu); background: var(--era-gris-ultra); } /* PILLS STATUT (cf. brand : rouge=actif, bleu=clôturé, gris=inactif) */ .era-pill { display: inline-flex; align-items: center; gap: 4px; font-family: var(--era-font); font-size: 11px; font-weight: var(--era-w-bold); text-transform: uppercase; letter-spacing: .4px; padding: 4px 10px; border-radius: var(--era-radius-pill); white-space: nowrap; } .era-pill--rouge { background: var(--era-rouge); color: var(--era-blanc); } .era-pill--bleu { background: var(--era-bleu); color: var(--era-blanc); } .era-pill--gris { background: var(--era-gris-ultra); color: var(--era-gris); } .era-pill--vert { background: var(--era-success-bg); color: var(--era-success); } .era-pill--orange { background: var(--era-warning-bg); color: var(--era-warning); } /* TAGS BIEN (adresse rouge + commune gris) */ .era-tag-bien { font-family: var(--era-font); font-size: 13px; } .era-tag-bien .era-tag-bien__adresse { color: var(--era-rouge); font-weight: var(--era-w-bold); } .era-tag-bien .era-tag-bien__commune { color: var(--era-gris); font-weight: var(--era-w-book); margin-left: 4px; } /* SKELETONS (loading state) */ .era-skeleton { background: linear-gradient(90deg, var(--era-gris-ultra) 0%, #E9EEF5 50%, var(--era-gris-ultra) 100%); background-size: 200% 100%; animation: era-skeleton-shimmer 1.4s ease-in-out infinite; border-radius: var(--era-radius-s); height: 14px; } @keyframes era-skeleton-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } /* EMPTY STATES */ .era-empty { padding: var(--era-gap-xl) var(--era-gap-l); text-align: center; color: var(--era-gris); font-family: var(--era-font); } .era-empty__title { font-size: 16px; font-weight: var(--era-w-bold); color: var(--era-bleu); margin: var(--era-gap-m) 0 var(--era-gap-s); } .era-empty__msg { font-size: 13px; margin-bottom: var(--era-gap-l); } /* AVATARS (initiales colorées par agent) */ .era-avatar { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--era-bleu); color: var(--era-blanc); font-family: var(--era-font); font-weight: var(--era-w-bold); font-size: 12px; text-transform: uppercase; letter-spacing: .5px; overflow: hidden; } .era-avatar img { width: 100%; height: 100%; object-fit: cover; } /* INDICATEUR SUIVI (gradient rouge→vert + curseur) — task #34 */ .era-indicator { display: inline-flex; align-items: center; gap: var(--era-gap-s); font-family: var(--era-font); font-size: 11px; color: var(--era-gris); } .era-indicator__bar { position: relative; width: 80px; height: 8px; border-radius: 4px; background: linear-gradient(to right, #15803D 0%, #22C55E 25%, #FBBF24 50%, #F97316 75%, #DC2626 100%); } .era-indicator__cursor { position: absolute; top: -3px; width: 4px; height: 14px; background: var(--era-bleu); border-radius: 2px; transform: translateX(-2px); } .era-indicator__days { font-weight: var(--era-w-bold); color: var(--era-bleu); } /* SLOGAN ERA FOOTER (à utiliser en pied de page) */ .era-slogan { font-family: var(--era-font); font-weight: var(--era-w-black); font-size: 15px; color: var(--era-rouge); text-align: center; letter-spacing: 1.5px; padding: var(--era-gap-l) var(--era-gap-m); } /* TABLES */ .era-table { width: 100%; border-collapse: collapse; font-family: var(--era-font); font-size: 13px; } .era-table thead th { background: var(--era-bleu-clair); color: var(--era-bleu); font-weight: var(--era-w-bold); font-size: 11px; text-transform: uppercase; letter-spacing: .5px; padding: var(--era-gap-s) var(--era-gap-m); text-align: left; border-bottom: 2px solid var(--era-gris-clair); } .era-table tbody tr { transition: background var(--era-t-fast); } .era-table tbody tr:nth-child(even) { background: var(--era-gris-ultra); } .era-table tbody tr:hover { background: var(--era-bleu-clair); } .era-table tbody td { padding: var(--era-gap-m); color: var(--era-gris-texte); border-bottom: 1px solid var(--era-gris-clair); } /* HELPERS UTILITAIRES */ .era-text-rouge { color: var(--era-rouge) !important; } .era-text-bleu { color: var(--era-bleu) !important; } .era-text-gris { color: var(--era-gris) !important; } .era-bg-rouge { background: var(--era-rouge) !important; } .era-bg-bleu { background: var(--era-bleu) !important; } .era-text-bold { font-weight: var(--era-w-bold) !important; } .era-text-black { font-weight: var(--era-w-black) !important; } .era-uppercase { text-transform: uppercase; letter-spacing: .5px; } /* RÈGLE D'OR BRAND : jamais rouge + bleu sans blanc entre les deux */ /* (à respecter en composition, pas de classe technique) */ /* ═══════════════ FIN ═══════════════ */