/* ============================================================ 6 design themes — each overrides tokens + a few flourishes Activated via ============================================================ */ /* ════════════════════════════════════════════════════ MARAIS · classic Parisian bistro serif italics · cream + dark wood · editorial ══════════════════════════════════════════════════ */ [data-theme="marais"] { --c-bg: #FBF6EB; --c-bg-warm: #F1E9D8; --c-bg-dark: #1A1410; --c-ink: #1A1410; --c-ink-soft: #463B33; --c-muted: #8E8273; --c-line: #E5DAC4; --c-line-soft: #EFE6D2; --c-brand: #6B2B1B; --c-accent: #B5894C; } [data-theme="marais"] em { color: var(--c-brand); } [data-theme="marais"] h1, [data-theme="marais"] h2, [data-theme="marais"] h3 { font-family: "Fraunces", serif; } /* ════════════════════════════════════════════════════ RIVIERA · Mediterranean modern light + airy · navy + sand · photo-forward ══════════════════════════════════════════════════ */ /* RIVIERA — Méditerranée moderne · jeune cheffe · table contemporaine Direction : Mirazur · Côté Sud. Soleil midi, sable, cobalt, terracotta. Typo : DM Serif Display + Inter (chargés en page demo). */ [data-theme="riviera"] { --c-bg: #F4ECDA; /* sable pâle */ --c-bg-warm: #E5DDC8; /* sable chaud */ --c-bg-dark: #122438; /* bleu nuit Méditerranée */ --c-ink: #1F3650; /* bleu profond textes */ --c-ink-soft: #4A6480; --c-muted: #8294AA; --c-line: #DAD0BB; --c-line-soft: #E8DFC8; --c-brand: #2B5980; /* cobalt principal */ --c-accent: #D4754A; /* terracotta Provence */ } [data-theme="riviera"] h1, [data-theme="riviera"] h2 { font-weight: 300; letter-spacing: -0.015em; } [data-theme="riviera"] em { color: var(--c-brand); font-weight: 400; } /* ════════════════════════════════════════════════════ ATELIER · contemporary bold (dark mode option) monospace + serif · high contrast · downtown cool ══════════════════════════════════════════════════ */ /* ATELIER — sushi omakase haut de gamme · 板前 Direction : Sushi Yoshitake Tokyo, L'Abysse Paris. Washi paper crème + sumi ink + rouge laque + matcha. Noto Serif JP + Inter Tight. Spotlights minimal, ma 間 negative space. */ [data-theme="atelier"] { --c-bg: #F5EFE2; /* washi paper crème */ --c-bg-warm: #E8DCC4; /* hinoki blonde */ --c-bg-dark: #0F0F10; /* sumi ink presque noir */ --c-ink: #0F0F10; --c-ink-soft: #4A4641; --c-muted: #8B847C; --c-line: #DCD0B8; --c-line-soft: #E8DCC4; --c-brand: #9C2A20; /* rouge laque shu-iro · accent principal */ --c-accent: #3D5039; /* matcha vert profond · secondaire */ } [data-theme="atelier"] body, [data-theme="atelier"] .topnav { background: var(--c-bg); } [data-theme="atelier"] .menu-tab.active { background: var(--c-brand); color: var(--c-bg-dark); } [data-theme="atelier"] .room-card, [data-theme="atelier"] .avis-card, [data-theme="atelier"] .info-block, [data-theme="atelier"] .book-widget { background: var(--c-bg-warm); color: var(--c-ink); } [data-theme="atelier"] .book-widget { color: var(--c-ink); } [data-theme="atelier"] .book-widget label { color: var(--c-muted); } [data-theme="atelier"] .book-widget input, [data-theme="atelier"] .book-widget select { color: var(--c-ink); border-bottom-color: var(--c-line); } [data-theme="atelier"] .room-card__feats span, [data-theme="atelier"] .menu-tag, [data-theme="atelier"] .google-badge { background: var(--c-line); color: var(--c-ink-soft); border-color: var(--c-line); } [data-theme="atelier"] .google-badge { background: var(--c-bg-warm); } /* em : vraie italique Fraunces, ton or saké, sans surcharge */ [data-theme="atelier"] em { color: var(--c-brand); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 80, "opsz" 144; } [data-theme="atelier"] .eyebrow { color: var(--c-brand); } [data-theme="atelier"] .btn--primary { background: var(--c-brand); color: var(--c-bg-dark); border: 1px solid var(--c-brand); } [data-theme="atelier"] .btn--primary:hover { background: transparent; color: var(--c-brand); } [data-theme="atelier"] .btn--ghost { border-color: var(--c-ink); color: var(--c-ink); background: transparent; } [data-theme="atelier"] .btn--ghost:hover { background: var(--c-ink); color: var(--c-bg); } [data-theme="atelier"] h1, [data-theme="atelier"] h2 { font-family: "Fraunces", serif; font-weight: 300; letter-spacing: -0.015em; } [data-theme="atelier"] h3, [data-theme="atelier"] h4 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.92rem; color: var(--c-ink); } [data-theme="atelier"] .menu-item__name { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.92rem; letter-spacing: 0.06em; } [data-theme="atelier"] .annot-marker { background: var(--c-brand); color: var(--c-bg-dark); } [data-theme="atelier"] .annot-marker.is-active { background: var(--c-accent); color: var(--c-ink); } /* Override de l'horrible border-bottom 4px jaune de hero--mono em */ [data-theme="atelier"] .hero--mono em { color: var(--c-brand); font-style: italic; font-weight: 300; border-bottom: 1px solid var(--c-brand); padding-bottom: 6px; } /* CTA band : adouci, plus de fond orange criard */ [data-theme="atelier"] .cta-band { background: var(--c-bg-warm); color: var(--c-ink); border-top: 1px solid var(--c-line); border-bottom: 1px solid var(--c-line); } [data-theme="atelier"] .cta-band h2, [data-theme="atelier"] .cta-band p { color: var(--c-ink); } [data-theme="atelier"] .cta-band em { color: var(--c-brand); } [data-theme="atelier"] .cta-band .eyebrow { color: var(--c-brand); opacity: 1; } [data-theme="atelier"] .cta-band .btn--accent { background: var(--c-brand); color: var(--c-bg-dark); border: 1px solid var(--c-brand); } [data-theme="atelier"] .cta-band .btn--accent:hover { background: transparent; color: var(--c-brand); } /* ════════════════════════════════════════════════════ BRICK · fast-casual diner / pizzeria / burger bold red + ink · rounded geometric sans · graphic ══════════════════════════════════════════════════ */ [data-theme="brick"] { --c-bg: #FFF8F0; --c-bg-warm: #FFEFD5; --c-bg-dark: #1A0E08; --c-ink: #1A0E08; --c-ink-soft: #4A2A1C; --c-muted: #8C6B5A; --c-line: #F0D8B8; --c-line-soft: #F8E5C8; --c-brand: #D63A2E; /* tomato red */ --c-accent: #FFC93C; /* mustard yellow */ --font-serif: "Plus Jakarta Sans", "Inter", system-ui, sans-serif; /* serif slot reused for sans heading */ } [data-theme="brick"] h1, [data-theme="brick"] h2, [data-theme="brick"] h3 { font-weight: 800; letter-spacing: -0.025em; text-transform: uppercase; line-height: 1.05; } [data-theme="brick"] h4 { font-weight: 700; letter-spacing: -0.01em; text-transform: uppercase; } [data-theme="brick"] em { font-style: normal; font-weight: 800; color: var(--c-brand); background: var(--c-accent); padding: 0 8px; border-radius: 4px; display: inline-block; transform: rotate(-1deg); } [data-theme="brick"] .menu-item__name { font-weight: 700; } [data-theme="brick"] .menu-item__price { font-weight: 700; color: var(--c-brand); font-size: 1.05rem; } [data-theme="brick"] .menu-tab.active { background: var(--c-brand); color: #fff; font-weight: 700; } [data-theme="brick"] .btn--primary { background: var(--c-brand); color: #fff; border-radius: 4px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } [data-theme="brick"] .btn--primary:hover { background: var(--c-bg-dark); } [data-theme="brick"] .btn--accent { background: var(--c-accent); color: var(--c-bg-dark); font-weight: 800; border-radius: 4px; } [data-theme="brick"] .btn--ghost { border: 2px solid var(--c-ink); color: var(--c-ink); border-radius: 4px; font-weight: 700; } [data-theme="brick"] .btn--ghost:hover { background: var(--c-ink); color: #fff; } [data-theme="brick"] .annot-marker { background: var(--c-brand); color: #fff; font-weight: 700; } [data-theme="brick"] .annot-marker.is-active { background: var(--c-accent); color: var(--c-bg-dark); } [data-theme="brick"] .room-card__feats span, [data-theme="brick"] .menu-tag { background: var(--c-accent); color: var(--c-bg-dark); font-weight: 700; border-radius: 4px; } [data-theme="brick"] .info-block, [data-theme="brick"] .room-card { border-radius: 6px; border: 2px solid var(--c-ink); background: #fff; } [data-theme="brick"] .demo-banner { background: var(--c-bg-dark); } [data-theme="brick"] .cta-band { background: var(--c-bg-dark); color: #fff; } [data-theme="brick"] .cta-band .eyebrow { color: var(--c-accent); } /* ════════════════════════════════════════════════════ GARDEN · café-jardin · brunch + événements + privatisation crème + sage green + dusty rose · Lora italic + Lato ══════════════════════════════════════════════════ */ [data-theme="garden"] { --c-bg: #F8F5EC; /* crème très chaude */ --c-bg-warm: #EDE6D2; /* sable doré pâle */ --c-bg-dark: #2A3D2F; /* vert forêt profond */ --c-ink: #2D3528; /* vert sombre quasi noir */ --c-ink-soft: #5A6155; --c-muted: #8E927F; --c-line: #DDD3BD; --c-line-soft: #EDE6D2; --c-brand: #6E8B5C; /* vert sauge · accent principal */ --c-accent: #D89893; /* rose poudré · secondaire */ } /* ════════════════════════════════════════════════════ SAISON · 100% végétal · cheffe-jardinière · farm-to-table linen + sage green + honey + earth · Cormorant Garamond italic ══════════════════════════════════════════════════ */ [data-theme="saison"] { --c-bg: #F5F0E1; /* lin */ --c-bg-warm: #E5DBB8; /* kraft chaud */ --c-bg-dark: #1F2818; /* vert sapin profond */ --c-ink: #1F2818; --c-ink-soft: #4A5340; --c-muted: #8E927F; --c-line: #DAD0AE; --c-line-soft: #E5DBB8; --c-brand: #5C7038; /* vert mousse */ --c-accent: #C8753C; /* terre cuite */ } /* ════════════════════════════════════════════════════ BELMONDE · classic 4-star luxury serif italic · brass accents · bourgeois elegance ══════════════════════════════════════════════════ */ [data-theme="belmonde"] { --c-bg: #FAF6EE; --c-bg-warm: #EFE6D4; --c-bg-dark: #14110C; --c-ink: #14110C; --c-ink-soft: #4A4034; --c-muted: #8F8270; --c-line: #E1D6BE; --c-line-soft: #ECE2CB; --c-brand: #2D4A38; --c-accent: #B68B47; } [data-theme="belmonde"] em { color: var(--c-accent); font-variation-settings: "SOFT" 80, "opsz" 96; } [data-theme="belmonde"] .h-hero__star { color: var(--c-accent); letter-spacing: 0.4em; font-size: 0.86rem; margin: 16px 0; } /* ════════════════════════════════════════════════════ DOMAINE · countryside / château organic textures · earthy palette · slow luxury ══════════════════════════════════════════════════ */ [data-theme="domaine"] { --c-bg: #F4EFE3; --c-bg-warm: #E5DBC5; --c-bg-dark: #1F1A12; --c-ink: #1F1A12; --c-ink-soft: #4F4434; --c-muted: #8B7E63; --c-line: #D9CCB0; --c-line-soft: #E5DAC2; --c-brand: #4D6438; --c-accent: #A6753E; --font-serif: "Cormorant Garamond", "Fraunces", serif; } [data-theme="domaine"] h1, [data-theme="domaine"] h2 { font-weight: 400; letter-spacing: -0.02em; } [data-theme="domaine"] em { color: var(--c-brand); } [data-theme="domaine"] .room-card { border-radius: 0; box-shadow: none; border: 1px solid var(--c-line); } [data-theme="domaine"] .room-card__media img { height: 280px; } [data-theme="domaine"] .info-block { border-radius: 0; border: 1px solid var(--c-line); background: transparent; } /* ════════════════════════════════════════════════════ SKYLINE · urban boutique editorial grid · bold typography · neutral palette · gallery feel ══════════════════════════════════════════════════ */ [data-theme="skyline"] { --c-bg: #F2F0EC; --c-bg-warm: #E5E1D8; --c-bg-dark: #181818; --c-ink: #181818; --c-ink-soft: #4A4A48; --c-muted: #8C8B86; --c-line: #DDD9CF; --c-line-soft: #E8E5DC; --c-brand: #181818; --c-accent: #C8553D; } [data-theme="skyline"] h1, [data-theme="skyline"] h2 { font-weight: 500; letter-spacing: -0.025em; } [data-theme="skyline"] em { font-style: normal; font-weight: 700; color: var(--c-accent); } [data-theme="skyline"] .room-card { background: transparent; box-shadow: none; border-radius: 0; border-bottom: 1px solid var(--c-line); } [data-theme="skyline"] .room-card__media img { height: 320px; border-radius: 0; } [data-theme="skyline"] .rooms { grid-template-columns: 1fr 1fr; gap: 40px; } @media (max-width: 880px) { [data-theme="skyline"] .rooms { grid-template-columns: 1fr; } } [data-theme="skyline"] .info-block { background: var(--c-bg-warm); border-radius: 0; } [data-theme="skyline"] h3, [data-theme="skyline"] h4 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.01em; } /* ════════════════════════════════════════════════════════════════════ ▼ ARTISANS ▼ 6 themes for tradespeople: bold, trust-led, certifications-forward ══════════════════════════════════════════════════════════════════ */ /* ──────────────── VOLT — Électricien · domotique · IRVE ──────────────── */ [data-theme="volt"] { --c-bg: #0F1A2E; --c-bg-warm: #1A2B47; --c-bg-dark: #07101F; --c-ink: #FFFFFF; --c-ink-soft: #B5C5DC; --c-muted: #6E7E96; --c-line: #243957; --c-line-soft: #1B2C44; --c-brand: #FFD200; /* jaune sécurité */ --c-accent: #00B4D8; /* cyan tech */ } [data-theme="volt"] body, [data-theme="volt"] .topnav { background: var(--c-bg); } [data-theme="volt"] h1, [data-theme="volt"] h2 { font-family: var(--font-sans); font-weight: 800; letter-spacing: -0.02em; text-transform: uppercase; } [data-theme="volt"] em { color: var(--c-brand); font-style: normal; font-weight: 800; } [data-theme="volt"] .eyebrow { color: var(--c-brand); } [data-theme="volt"] h3, [data-theme="volt"] h4 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink); } [data-theme="volt"] .btn--primary { background: var(--c-brand); color: var(--c-bg-dark); border: 0; font-weight: 700; } [data-theme="volt"] .btn--primary:hover { background: var(--c-accent); color: var(--c-bg-dark); } [data-theme="volt"] .btn--ghost { border-color: var(--c-ink); color: var(--c-ink); } [data-theme="volt"] .info-block, [data-theme="volt"] .room-card { background: var(--c-bg-warm); color: var(--c-ink); border: 1px solid var(--c-line); } [data-theme="volt"] .annot-marker { background: var(--c-brand); color: var(--c-bg-dark); } /* ──────────────── CUIVRE — Plombier-chauffagiste ──────────────── */ [data-theme="cuivre"] { --c-bg: #FAF6EE; --c-bg-warm: #F0E6D0; --c-bg-dark: #2A1F18; --c-ink: #2A1F18; --c-ink-soft: #5C4A3D; --c-muted: #8E7E6E; --c-line: #E5D7B8; --c-line-soft: #EFE4CA; --c-brand: #B87333; /* cuivre */ --c-accent: #1E5F8A; /* bleu eau */ } [data-theme="cuivre"] h1, [data-theme="cuivre"] h2 { font-family: "Fraunces", serif; font-weight: 500; } [data-theme="cuivre"] em { color: var(--c-brand); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 80; } [data-theme="cuivre"] .eyebrow { color: var(--c-brand); } [data-theme="cuivre"] h3, [data-theme="cuivre"] h4 { font-family: "Fraunces", serif; font-weight: 500; } [data-theme="cuivre"] .btn--primary { background: var(--c-brand); color: #fff; border: 0; } [data-theme="cuivre"] .btn--primary:hover { background: var(--c-accent); } [data-theme="cuivre"] .annot-marker { background: var(--c-brand); color: #fff; } /* ──────────────── PINCEAU — Peintre · décorateur ──────────────── */ [data-theme="pinceau"] { --c-bg: #FBFAF7; --c-bg-warm: #F2EEE6; --c-bg-dark: #2C2825; --c-ink: #2C2825; --c-ink-soft: #6B6358; --c-muted: #9B9388; --c-line: #E8E2D5; --c-line-soft: #F0EBE0; --c-brand: #E63946; /* rouge peinture vif */ --c-accent: #457B9D; /* bleu palette */ } [data-theme="pinceau"] h1, [data-theme="pinceau"] h2 { font-family: "Fraunces", serif; font-weight: 400; } [data-theme="pinceau"] em { color: var(--c-brand); font-style: italic; font-variation-settings: "SOFT" 80; } [data-theme="pinceau"] .eyebrow { color: var(--c-brand); font-family: var(--font-mono); } [data-theme="pinceau"] h3, [data-theme="pinceau"] h4 { font-family: var(--font-sans); font-weight: 700; } [data-theme="pinceau"] .btn--primary { background: var(--c-ink); color: var(--c-bg); border: 0; } [data-theme="pinceau"] .btn--primary:hover { background: var(--c-brand); } [data-theme="pinceau"] .annot-marker { background: var(--c-brand); color: #fff; } /* ──────────────── COPEAU — Menuisier-ébéniste ──────────────── */ [data-theme="copeau"] { --c-bg: #F4ECDD; --c-bg-warm: #E5D6BC; --c-bg-dark: #2D1F12; --c-ink: #2D1F12; --c-ink-soft: #5A4534; --c-muted: #8B7560; --c-line: #D4C2A0; --c-line-soft: #E0CFA8; --c-brand: #8B4513; /* acajou */ --c-accent: #C8A36B; /* chêne clair */ } [data-theme="copeau"] h1, [data-theme="copeau"] h2 { font-family: "Fraunces", serif; font-weight: 400; font-variation-settings: "SOFT" 80, "opsz" 144; } [data-theme="copeau"] em { color: var(--c-brand); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 80; } [data-theme="copeau"] .eyebrow { color: var(--c-brand); } [data-theme="copeau"] h3, [data-theme="copeau"] h4 { font-family: "Fraunces", serif; font-weight: 500; font-style: italic; } [data-theme="copeau"] .btn--primary { background: var(--c-brand); color: var(--c-bg); border: 0; } [data-theme="copeau"] .btn--primary:hover { background: var(--c-bg-dark); } [data-theme="copeau"] .annot-marker { background: var(--c-brand); color: #fff; } /* ──────────────── CHANTIER — Maçon · gros œuvre ──────────────── */ [data-theme="chantier"] { --c-bg: #ECEAE5; --c-bg-warm: #DCDAD4; --c-bg-dark: #1F1F1F; --c-ink: #1F1F1F; --c-ink-soft: #4D4D4D; --c-muted: #7A7A7A; --c-line: #C7C5C0; --c-line-soft: #D8D6D1; --c-brand: #FF6B35; /* orange chantier vif */ --c-accent: #2C2C2C; /* anthracite */ } [data-theme="chantier"] h1, [data-theme="chantier"] h2 { font-family: var(--font-sans); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; } [data-theme="chantier"] em { color: var(--c-brand); font-style: normal; font-weight: 800; } [data-theme="chantier"] .eyebrow { color: var(--c-brand); font-family: var(--font-mono); font-weight: 600; } [data-theme="chantier"] h3, [data-theme="chantier"] h4 { font-family: var(--font-mono); text-transform: uppercase; font-weight: 700; letter-spacing: 0.04em; } [data-theme="chantier"] .btn--primary { background: var(--c-brand); color: #fff; border: 0; font-weight: 700; } [data-theme="chantier"] .btn--primary:hover { background: var(--c-ink); } [data-theme="chantier"] .annot-marker { background: var(--c-brand); color: #fff; } /* ──────────────── ARDOISE — Couvreur-zingueur ──────────────── */ [data-theme="ardoise"] { --c-bg: #F4F6F8; --c-bg-warm: #E0E5EB; --c-bg-dark: #1A2530; --c-ink: #1A2530; --c-ink-soft: #4F5D6B; --c-muted: #8794A2; --c-line: #CCD3DB; --c-line-soft: #DCE2E8; --c-brand: #2C3E50; /* zinc dark */ --c-accent: #708090; /* slate gray */ } [data-theme="ardoise"] h1, [data-theme="ardoise"] h2 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; } [data-theme="ardoise"] em { color: var(--c-brand); font-style: normal; font-weight: 700; } [data-theme="ardoise"] .eyebrow { color: var(--c-brand); } [data-theme="ardoise"] h3, [data-theme="ardoise"] h4 { font-family: var(--font-sans); font-weight: 600; } [data-theme="ardoise"] .btn--primary { background: var(--c-brand); color: var(--c-bg); border: 0; } [data-theme="ardoise"] .btn--primary:hover { background: var(--c-accent); } [data-theme="ardoise"] .annot-marker { background: var(--c-brand); color: var(--c-bg); } /* ════════════════════════════════════════════════════════════════════ ▼ AVOCATS ▼ 6 themes for lawyers — sober, deontology-compliant (no prices on demos, anonymized testimonials, mention barreau) ══════════════════════════════════════════════════════════════════ */ /* ──────────────── FAMILLE — Droit de la famille ──────────────── */ [data-theme="famille"] { --c-bg: #FAF7F2; --c-bg-warm: #F0EBE0; --c-bg-dark: #2A2520; --c-ink: #2A2520; --c-ink-soft: #5C5448; --c-muted: #8A8273; --c-line: #E5DDC8; --c-line-soft: #EFE7D5; --c-brand: #8B6F47; /* caramel chaud */ --c-accent: #6B4A30; /* cognac */ } [data-theme="famille"] h1, [data-theme="famille"] h2 { font-family: "Fraunces", serif; font-weight: 400; font-variation-settings: "SOFT" 80, "opsz" 144; } [data-theme="famille"] em { color: var(--c-brand); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 80; } [data-theme="famille"] .eyebrow { color: var(--c-brand); } [data-theme="famille"] h3, [data-theme="famille"] h4 { font-family: "Fraunces", serif; font-weight: 500; } [data-theme="famille"] .btn--primary { background: var(--c-brand); color: var(--c-bg); border: 0; } [data-theme="famille"] .btn--primary:hover { background: var(--c-accent); } [data-theme="famille"] .info-block { background: var(--c-bg-warm); border: 1px solid var(--c-line); } [data-theme="famille"] .annot-marker { background: var(--c-brand); color: #fff; } /* ──────────────── FISCAL — Fiscalité entreprise ──────────────── */ [data-theme="fiscal"] { --c-bg: #F8F9FB; --c-bg-warm: #EDF1F6; --c-bg-dark: #0A1628; --c-ink: #0A1628; --c-ink-soft: #3D4F66; --c-muted: #7A879A; --c-line: #D5DCE5; --c-line-soft: #E5EAF1; --c-brand: #1B3A5F; /* bleu marine */ --c-accent: #C9A961; /* or */ } [data-theme="fiscal"] h1, [data-theme="fiscal"] h2 { font-family: "Fraunces", serif; font-weight: 400; letter-spacing: -0.015em; } [data-theme="fiscal"] em { color: var(--c-accent); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 80; } [data-theme="fiscal"] .eyebrow { color: var(--c-brand); } [data-theme="fiscal"] h3, [data-theme="fiscal"] h4 { font-family: var(--font-sans); font-weight: 600; } [data-theme="fiscal"] .btn--primary { background: var(--c-brand); color: #fff; border: 0; } [data-theme="fiscal"] .btn--primary:hover { background: var(--c-bg-dark); } [data-theme="fiscal"] .info-block { background: var(--c-bg-warm); border: 1px solid var(--c-line); } [data-theme="fiscal"] .annot-marker { background: var(--c-brand); color: var(--c-accent); } /* ──────────────── PRÉJUDICE — Victimes · dommage corporel ──────────────── */ [data-theme="prejudice"] { --c-bg: #F4F6F2; --c-bg-warm: #E8EDE2; --c-bg-dark: #1A2A1F; --c-ink: #1A2A1F; --c-ink-soft: #4D5C4A; --c-muted: #7E8B7B; --c-line: #CDD5C7; --c-line-soft: #DDE3D6; --c-brand: #2D5A3C; /* vert sapin */ --c-accent: #8B7355; /* taupe */ } [data-theme="prejudice"] h1, [data-theme="prejudice"] h2 { font-family: "Fraunces", serif; font-weight: 400; } [data-theme="prejudice"] em { color: var(--c-brand); font-style: italic; font-weight: 400; font-variation-settings: "SOFT" 80; } [data-theme="prejudice"] .eyebrow { color: var(--c-brand); } [data-theme="prejudice"] h3, [data-theme="prejudice"] h4 { font-family: var(--font-sans); font-weight: 600; } [data-theme="prejudice"] .btn--primary { background: var(--c-brand); color: var(--c-bg); border: 0; } [data-theme="prejudice"] .btn--primary:hover { background: var(--c-bg-dark); } [data-theme="prejudice"] .info-block { background: var(--c-bg-warm); border: 1px solid var(--c-line); } [data-theme="prejudice"] .annot-marker { background: var(--c-brand); color: #fff; } /* ──────────────── AFFAIRES — Droit des affaires · M&A ──────────────── */ [data-theme="affaires"] { --c-bg: #0E0D0B; --c-bg-warm: #1A1815; --c-bg-dark: #050403; --c-ink: #F5F0E5; --c-ink-soft: #B8AE9C; --c-muted: #6B6358; --c-line: #2A2620; --c-line-soft: #1F1D1A; --c-brand: #C9A961; /* or */ --c-accent: #8B6F30; /* or sombre */ } [data-theme="affaires"] body, [data-theme="affaires"] .topnav { background: var(--c-bg); } [data-theme="affaires"] h1, [data-theme="affaires"] h2 { font-family: "Fraunces", serif; font-weight: 300; letter-spacing: -0.015em; } [data-theme="affaires"] em { color: var(--c-brand); font-style: italic; font-weight: 300; font-variation-settings: "SOFT" 80; } [data-theme="affaires"] .eyebrow { color: var(--c-brand); } [data-theme="affaires"] h3, [data-theme="affaires"] h4 { font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--c-ink); font-weight: 500; } [data-theme="affaires"] .btn--primary { background: var(--c-brand); color: var(--c-bg-dark); border: 0; } [data-theme="affaires"] .btn--primary:hover { background: transparent; color: var(--c-brand); border: 1px solid var(--c-brand); } [data-theme="affaires"] .btn--ghost { border-color: var(--c-ink); color: var(--c-ink); } [data-theme="affaires"] .info-block { background: var(--c-bg-warm); border: 1px solid var(--c-line); } [data-theme="affaires"] .annot-marker { background: var(--c-brand); color: var(--c-bg-dark); } /* ──────────────── PÉNAL — Défense pénale · garde à vue ──────────────── */ [data-theme="penal"] { --c-bg: #1F1010; --c-bg-warm: #2C1818; --c-bg-dark: #14080A; --c-ink: #F2EBE0; --c-ink-soft: #B8A89A; --c-muted: #7E6E60; --c-line: #3A2424; --c-line-soft: #2A1A1A; --c-brand: #9E2B3E; /* bordeaux */ --c-accent: #C9A961; /* or sobre */ } [data-theme="penal"] body, [data-theme="penal"] .topnav { background: var(--c-bg); } [data-theme="penal"] h1, [data-theme="penal"] h2 { font-family: "Fraunces", serif; font-weight: 500; letter-spacing: -0.01em; } [data-theme="penal"] em { color: var(--c-brand); font-style: italic; font-weight: 500; font-variation-settings: "SOFT" 80; } [data-theme="penal"] .eyebrow { color: var(--c-accent); } [data-theme="penal"] h3, [data-theme="penal"] h4 { font-family: var(--font-sans); font-weight: 700; color: var(--c-ink); } [data-theme="penal"] .btn--primary { background: var(--c-brand); color: #fff; border: 0; font-weight: 700; } [data-theme="penal"] .btn--primary:hover { background: var(--c-bg-warm); color: var(--c-brand); border: 1px solid var(--c-brand); } [data-theme="penal"] .btn--ghost { border-color: var(--c-ink); color: var(--c-ink); } [data-theme="penal"] .info-block { background: var(--c-bg-warm); border: 1px solid var(--c-line); } [data-theme="penal"] .annot-marker { background: var(--c-brand); color: #fff; } /* ──────────────── TRAVAIL — Droit du travail · prud'hommes ──────────────── */ [data-theme="travail"] { --c-bg: #F5F8FB; --c-bg-warm: #E5ECF3; --c-bg-dark: #1A2738; --c-ink: #1A2738; --c-ink-soft: #4A5668; --c-muted: #7B8696; --c-line: #D0D9E4; --c-line-soft: #E0E6ED; --c-brand: #2A6BAC; /* bleu travail */ --c-accent: #5D7B9D; /* bleu doux */ } [data-theme="travail"] h1, [data-theme="travail"] h2 { font-family: var(--font-sans); font-weight: 600; letter-spacing: -0.02em; } [data-theme="travail"] em { color: var(--c-brand); font-style: normal; font-weight: 700; } [data-theme="travail"] .eyebrow { color: var(--c-brand); } [data-theme="travail"] h3, [data-theme="travail"] h4 { font-family: var(--font-sans); font-weight: 600; } [data-theme="travail"] .btn--primary { background: var(--c-brand); color: #fff; border: 0; } [data-theme="travail"] .btn--primary:hover { background: var(--c-bg-dark); } [data-theme="travail"] .info-block { background: var(--c-bg-warm); border: 1px solid var(--c-line); } [data-theme="travail"] .annot-marker { background: var(--c-brand); color: #fff; }