/* ═══════════════════════════════════════════════════════════ MJED CLUSTER DESIGN TOKENS — SSR standalone Source : BRIEF_FRONT_AGENT.md 2026-04-23 Usage : dans des pages SSR Scope : pure :root, zero dependency Tailwind/PostCSS. Additif, prefix --cluster-*. ═══════════════════════════════════════════════════════════ */ :root { /* Surfaces */ --cluster-bg: #FFFFFF; --cluster-bg-cream: #F5F2ED; --cluster-bg-hero: #1A2540; --cluster-bg-hero-alt: #0F1B33; --cluster-bg-card: #FFFFFF; --cluster-bg-muted: #F8FAFC; /* Accents */ --cluster-accent: #4A7A5A; --cluster-accent-hover: #3D6649; --cluster-accent-soft: rgba(74, 122, 90, 0.08); --cluster-accent-border: rgba(74, 122, 90, 0.25); --cluster-gold: #C4A265; --cluster-gold-soft: rgba(196, 162, 101, 0.12); --cluster-gold-border: rgba(196, 162, 101, 0.35); /* Text */ --cluster-text: #0F172A; --cluster-text-muted: #64748B; --cluster-text-subtle: #94A3B8; --cluster-text-inverse: #F5F2ED; --cluster-text-inverse-muted: rgba(245, 242, 237, 0.72); /* Borders */ --cluster-border: #E5E7EB; --cluster-border-strong: #CBD5E1; --cluster-border-inverse: rgba(245, 242, 237, 0.18); /* States */ --cluster-success: #4A7A5A; --cluster-warning: #D97706; --cluster-danger: #DC2626; /* Typography — fluid */ --fs-cluster-hero: clamp(1.85rem, 3.5vw + 0.5rem, 2.6rem); --fs-cluster-h1: clamp(1.6rem, 2.8vw + 0.4rem, 2.15rem); --fs-cluster-h2: clamp(1.3rem, 1.5vw + 0.7rem, 1.55rem); --fs-cluster-h3: 1.1rem; --fs-cluster-body: 1rem; --fs-cluster-small: 0.875rem; --fs-cluster-xs: 0.78rem; --font-cluster-heading: "Playfair Display", Georgia, "Times New Roman", serif; --font-cluster-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --lh-cluster-heading: 1.22; --lh-cluster-body: 1.65; /* Spacing — 8pt grid */ --space-cluster-1: 0.25rem; --space-cluster-2: 0.5rem; --space-cluster-3: 0.75rem; --space-cluster-4: 1rem; --space-cluster-5: 1.25rem; --space-cluster-6: 1.5rem; --space-cluster-8: 2rem; --space-cluster-10: 2.5rem; --space-cluster-12: 3rem; --space-cluster-16: 4rem; --space-cluster-20: 5rem; --space-cluster-24: 6rem; /* Radii */ --radius-cluster-sm: 6px; --radius-cluster-md: 10px; --radius-cluster-lg: 14px; --radius-cluster-xl: 20px; --radius-cluster-pill: 9999px; /* Shadows */ --shadow-cluster-sm: 0 1px 2px rgba(15, 23, 42, 0.05); --shadow-cluster-md: 0 4px 12px rgba(15, 23, 42, 0.08); --shadow-cluster-lg: 0 10px 32px rgba(15, 23, 42, 0.12); --shadow-cluster-hero: 0 40px 80px -20px rgba(15, 23, 42, 0.35); /* Transitions */ --ease-cluster: cubic-bezier(0.22, 0.61, 0.36, 1); --dur-cluster-fast: 150ms; --dur-cluster-normal: 250ms; --dur-cluster-slow: 400ms; /* Layout */ --max-cluster-content: 72rem; --max-cluster-prose: 44rem; --cluster-nav-height: 3.25rem; } /* Base utilities — scoped to .cluster-page container to avoid site-wide collision */ .cluster-page { color: var(--cluster-text); font-family: var(--font-cluster-body); line-height: var(--lh-cluster-body); } .cluster-page .cluster-container { max-width: var(--max-cluster-content); margin-inline: auto; padding-inline: var(--space-cluster-4); } .cluster-page .cluster-section { padding-block: var(--space-cluster-16); } .cluster-page .cluster-prose { max-width: var(--max-cluster-prose); line-height: var(--lh-cluster-body); color: var(--cluster-text); } .cluster-page .cluster-heading { font-family: var(--font-cluster-heading); font-weight: 600; letter-spacing: -0.02em; color: var(--cluster-text); line-height: var(--lh-cluster-heading); } .cluster-page a:focus-visible, .cluster-page button:focus-visible { outline: 2px solid var(--cluster-accent); outline-offset: 3px; border-radius: 2px; } /* ── Hero ───────────────────────────────────────────── */ .cluster-hero { background: linear-gradient(180deg, var(--cluster-bg-hero) 0%, var(--cluster-bg-hero-alt) 100%); color: var(--cluster-text-inverse); position: relative; isolation: isolate; padding-block: clamp(2.5rem, 5vw, 4rem); } .cluster-hero::after { content: ""; position: absolute; inset: auto 0 0 0; height: 3px; background: linear-gradient(90deg, transparent 0%, var(--cluster-gold) 50%, transparent 100%); opacity: 0.6; } .cluster-hero__breadcrumb { font-size: var(--fs-cluster-xs); color: var(--cluster-text-inverse-muted); margin-bottom: var(--space-cluster-4); display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; } .cluster-hero__breadcrumb a { color: var(--cluster-text-inverse-muted); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color var(--dur-cluster-fast) var(--ease-cluster); } .cluster-hero__breadcrumb a:hover { border-bottom-color: var(--cluster-gold); } .cluster-hero__breadcrumb [aria-current="page"] { color: var(--cluster-text-inverse); font-weight: 500; } .cluster-hero__breadcrumb span[aria-hidden="true"] { opacity: 0.5; } .cluster-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--fs-cluster-xs); text-transform: uppercase; letter-spacing: 0.18em; color: var(--cluster-gold); font-weight: 600; margin-bottom: var(--space-cluster-3); } .cluster-hero__eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--cluster-gold); } .cluster-hero__title { font-family: var(--font-cluster-heading); font-size: var(--fs-cluster-hero); color: var(--cluster-text-inverse); margin: 0 0 var(--space-cluster-4); max-width: 38ch; line-height: var(--lh-cluster-heading); font-weight: 600; letter-spacing: -0.02em; } .cluster-hero__subtitle { font-size: clamp(1rem, 1.1vw + 0.5rem, 1.15rem); line-height: var(--lh-cluster-body); color: var(--cluster-text-inverse-muted); max-width: 58ch; margin: 0 0 var(--space-cluster-8); } .cluster-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); gap: var(--space-cluster-4); margin: 0 0 var(--space-cluster-8); max-width: 56rem; } .cluster-hero__stat { padding: var(--space-cluster-4) var(--space-cluster-5); border-left: 2px solid var(--cluster-border-inverse); } .cluster-hero__stat--accent { border-left-color: var(--cluster-gold); background: var(--cluster-gold-soft); } .cluster-hero__stat dt { font-size: var(--fs-cluster-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cluster-text-inverse-muted); margin-bottom: var(--space-cluster-1); order: 2; } .cluster-hero__stat dd { font-family: var(--font-cluster-heading); font-size: clamp(1.4rem, 2vw + 0.3rem, 1.8rem); color: var(--cluster-text-inverse); font-weight: 600; margin: 0 0 var(--space-cluster-1); order: 1; } .cluster-hero__stat--accent dd { color: var(--cluster-gold); } .cluster-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-cluster-3); } .cluster-hero__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.25rem; border-radius: var(--radius-cluster-md); font-size: var(--fs-cluster-body); font-weight: 600; text-decoration: none; cursor: pointer; transition: all var(--dur-cluster-fast) var(--ease-cluster); min-height: 44px; border: 1px solid transparent; } .cluster-hero__cta--primary { background: var(--cluster-gold); color: #0F172A; } .cluster-hero__cta--primary:hover { filter: brightness(1.08); } .cluster-hero__cta--secondary { background: transparent; color: var(--cluster-text-inverse); border-color: var(--cluster-border-inverse); } .cluster-hero__cta--secondary:hover { background: rgba(245, 242, 237, 0.08); } /* ── Sticky Nav ─────────────────────────────────────── */ .cluster-nav { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.92); backdrop-filter: saturate(180%) blur(12px); -webkit-backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--cluster-border); height: var(--cluster-nav-height); } .cluster-nav__inner { display: flex; align-items: center; height: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; -webkit-overflow-scrolling: touch; } .cluster-nav__inner::-webkit-scrollbar { display: none; } .cluster-nav__list { display: flex; gap: var(--space-cluster-1); list-style: none; padding: 0; margin: 0; white-space: nowrap; } .cluster-nav__link { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.85rem; border-radius: var(--radius-cluster-sm); font-size: var(--fs-cluster-small); font-weight: 500; color: var(--cluster-text-muted); background: transparent; text-decoration: none; transition: all var(--dur-cluster-fast) var(--ease-cluster); border-bottom: 2px solid transparent; } .cluster-nav__link:hover { color: var(--cluster-accent); } .cluster-nav__link[aria-current="true"] { color: var(--cluster-accent); background: var(--cluster-accent-soft); border-bottom-color: var(--cluster-accent); } /* ── Stats Grid ─────────────────────────────────────── */ .cluster-stats { background: var(--cluster-bg); } .cluster-stats__title { font-family: var(--font-cluster-heading); font-size: var(--fs-cluster-h2); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--space-cluster-6); color: var(--cluster-text); line-height: var(--lh-cluster-heading); } .cluster-stats__subtitle { font-size: var(--fs-cluster-body); color: var(--cluster-text-muted); margin: -1rem 0 var(--space-cluster-6); line-height: var(--lh-cluster-body); max-width: 58ch; } .cluster-stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: var(--space-cluster-4); margin: 0; } .cluster-stat { padding: var(--space-cluster-5); background: var(--cluster-bg-card); border: 1px solid var(--cluster-border); border-radius: var(--radius-cluster-lg); box-shadow: var(--shadow-cluster-sm); } .cluster-stat--minimal { padding: var(--space-cluster-4) 0; background: transparent; border: none; border-top: 1px solid var(--cluster-border); border-radius: 0; box-shadow: none; } .cluster-stat__label { font-size: var(--fs-cluster-xs); text-transform: uppercase; letter-spacing: 0.1em; color: var(--cluster-text-muted); margin: 0 0 var(--space-cluster-2); font-weight: 500; } .cluster-stat__value { font-family: var(--font-cluster-heading); font-size: clamp(1.5rem, 2vw + 0.3rem, 1.85rem); color: var(--cluster-text); font-weight: 600; margin: 0; letter-spacing: -0.02em; line-height: var(--lh-cluster-heading); } .cluster-stat__trend { font-size: 0.7em; margin-left: 0.4rem; } .cluster-stat__trend--up { color: var(--cluster-success); } .cluster-stat__trend--down { color: var(--cluster-danger); } .cluster-stat__trend--flat { color: var(--cluster-text-muted); } .cluster-stat__note { font-size: var(--fs-cluster-xs); color: var(--cluster-text-subtle); margin-top: var(--space-cluster-1); } /* ── FAQ Accordion ──────────────────────────────────── */ .cluster-faq { background: var(--cluster-bg-cream); } .cluster-faq__list { display: flex; flex-direction: column; gap: var(--space-cluster-3); max-width: 52rem; } .cluster-faq__item { border: 1px solid var(--cluster-border); border-radius: var(--radius-cluster-lg); overflow: hidden; background: var(--cluster-bg-card); } .cluster-faq__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 1rem; text-align: left; background: var(--cluster-bg-muted); border: 0; cursor: pointer; min-height: 44px; font-family: inherit; font-weight: 600; font-size: var(--fs-cluster-body); color: var(--cluster-text); transition: background var(--dur-cluster-fast) var(--ease-cluster); } .cluster-faq__trigger:hover { background: var(--cluster-bg-card); } .cluster-faq__trigger-chevron { flex-shrink: 0; transition: transform var(--dur-cluster-fast) var(--ease-cluster); color: var(--cluster-text-muted); } .cluster-faq__trigger[aria-expanded="true"] .cluster-faq__trigger-chevron { transform: rotate(180deg); } .cluster-faq__panel { padding: var(--space-cluster-5); border-top: 1px solid var(--cluster-border); background: var(--cluster-bg-card); color: var(--cluster-text); line-height: var(--lh-cluster-body); } .cluster-faq__panel[hidden] { display: none; } .cluster-faq__panel p:first-child { margin-top: 0; } .cluster-faq__panel p:last-child { margin-bottom: 0; } /* ── Sources Block ──────────────────────────────────── */ .cluster-sources { background: var(--cluster-bg); } .cluster-sources__inner { border-left: 3px solid var(--cluster-accent); padding-left: var(--space-cluster-5); } .cluster-sources__title { font-family: var(--font-cluster-heading); font-size: var(--fs-cluster-h2); font-weight: 600; letter-spacing: -0.02em; margin: 0 0 var(--space-cluster-3); color: var(--cluster-text); line-height: var(--lh-cluster-heading); } .cluster-sources__note { font-size: var(--fs-cluster-small); color: var(--cluster-text-muted); margin-bottom: var(--space-cluster-5); line-height: var(--lh-cluster-body); max-width: 52rem; } .cluster-sources__list { list-style: decimal; padding-left: 1.5rem; margin: 0; display: flex; flex-direction: column; gap: var(--space-cluster-3); font-size: var(--fs-cluster-small); color: var(--cluster-text); } .cluster-sources__item { line-height: 1.55; } .cluster-sources__publisher { color: var(--cluster-text-muted); font-weight: 500; } .cluster-sources__link { color: var(--cluster-accent); text-decoration: underline; text-decoration-color: var(--cluster-accent-border); text-underline-offset: 3px; } .cluster-sources__date { color: var(--cluster-text-subtle); font-size: var(--fs-cluster-xs); margin-left: 0.5rem; } .cluster-sources__badge { display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.45rem; font-size: var(--fs-cluster-xs); background: var(--cluster-accent-soft); color: var(--cluster-accent); border-radius: var(--radius-cluster-pill); font-weight: 500; } /* ── Editorial content block ───────────────────────── */ .cluster-editorial { background: var(--cluster-bg-cream); } .cluster-editorial__tag { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; background: var(--cluster-gold-soft); color: #8B6914; font-size: var(--fs-cluster-xs); text-transform: uppercase; letter-spacing: 0.12em; font-weight: 600; border-radius: var(--radius-cluster-pill); margin-bottom: var(--space-cluster-4); } /* ── Reduced motion ────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .cluster-page * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .cluster-nav { scroll-behavior: auto; } }