/* ============================================ EDITORIAL PRIMITIVES — Phase 1 design refonte Styles complets des composants signatures de la charte éditoriale luxe. Toutes les valeurs viennent de CSS variables → suivent le thème actif. ============================================ */ /* ─── Eyebrow ─────────────────────────────────────────── */ .ed-eyebrow { font-family: var(--sans); font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); line-height: 1.4; } /* ─── GoldRule ────────────────────────────────────────── */ .ed-goldrule { height: 1px; background: var(--accent); margin: 12px 0; flex-shrink: 0; } /* ─── SerifNum ────────────────────────────────────────── */ .ed-serif-num { font-family: var(--serif); font-weight: 400; line-height: 1; color: var(--ink); font-feature-settings: "lnum", "onum"; letter-spacing: -0.01em; display: inline-block; } /* ─── Chip (pilule joy palette) ───────────────────────── */ .ed-chip { display: inline-flex; align-items: center; gap: 4px; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; white-space: nowrap; line-height: 1.4; background: var(--joy-tint, var(--accent-soft)); color: var(--joy-ink, var(--accent)); border: 1px solid color-mix(in srgb, var(--joy-ink, var(--accent)) 30%, transparent); } .ed-chip-rose { --joy-ink: var(--joy-rose-ink); --joy-tint: var(--joy-rose-tint); } .ed-chip-sage { --joy-ink: var(--joy-sage-ink); --joy-tint: var(--joy-sage-tint); } .ed-chip-sky { --joy-ink: var(--joy-sky-ink); --joy-tint: var(--joy-sky-tint); } .ed-chip-apricot { --joy-ink: var(--joy-apricot-ink); --joy-tint: var(--joy-apricot-tint); } .ed-chip-plum { --joy-ink: var(--joy-plum-ink); --joy-tint: var(--joy-plum-tint); } .ed-chip-gold { --joy-ink: var(--joy-gold-ink); --joy-tint: var(--joy-gold-tint); } /* Solid variant — used for critical priorities */ .ed-chip-solid { background: var(--joy-ink); color: var(--surface); border-color: var(--joy-ink); } /* ─── Hairline ────────────────────────────────────────── */ .ed-hairline-h { height: 1px; width: 100%; background: var(--line); } .ed-hairline-v { width: 1px; align-self: stretch; background: var(--line); margin-right: 10px; } /* ─── Split title — "Tableau de bord" ───────── */ .ed-split-title { font-family: var(--serif); font-weight: 400; font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--ink); margin: 0; } .ed-split-title em { font-style: italic; color: var(--accent); font-weight: 400; } /* ─── Section header bundle ───────────────────────────── */ .ed-section-header { margin-bottom: var(--space-4); display: flex; flex-direction: column; gap: 8px; } .ed-section-header .ed-goldrule { margin: 4px 0 0; } /* ─── Editorial card style (override-able per user via Admin) ── */ .ed-card { background: var(--card-bg, var(--surface)); border: var(--card-border, 1px solid var(--line)); box-shadow: var(--card-shadow, none); border-radius: 4px; padding: var(--space-5) var(--space-6); transition: border-color var(--transition-base), box-shadow var(--transition-base); } /* Card style modifiers — applied by */ :root[data-card-style="flat"] { --card-bg: var(--surface); --card-border: none; --card-shadow: none; } :root[data-card-style="bordered"] { --card-bg: var(--surface); --card-border: 1px solid var(--line); --card-shadow: none; } :root[data-card-style="shadowed"] { --card-bg: var(--surface); --card-border: 1px solid var(--line-soft); /* --card-shadow is themed (set in theme.css per data-theme) */ } /* ─── Editorial button (paired with split titles) ─────── */ .ed-btn { font-family: var(--sans); font-size: 11px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; padding: 12px 22px; border-radius: 2px; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .ed-btn-primary { background: var(--primary); color: #fff; border: 1px solid var(--primary); } .ed-btn-primary:hover { background: var(--primary-dark); border-color: var(--primary-dark); } .ed-btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid var(--line); } .ed-btn-ghost:hover { border-color: var(--ink-soft); color: var(--ink); }