/* lawandeconomics.ch — landing v2 */ const { useState, useEffect, useRef, useMemo } = React; const TWEAK_DEFAULTS = /*EDITMODE-BEGIN*/{ "paper": "#ffffff", "gutter": "#ffffff", "plusDensity": 8, "plusOpacity": 0.08, "ink": "#1a1a1f", "accent": "#4a4fb5", "titleFont": "Fraunces", "labelFont": "Inter", "lineColor": "#e8e8eb", "categoryStrip": "#fafafa", "palette": ["#e85d5d","#d4a23a","#6fa97c","#6a8fd9","#a07a55","#8b6fb8"], "titleAccentWord": "facilement", "showCardArt": true, "cardGap": 18, "outerPadding": 24 }/*EDITMODE-END*/; const DARK_OVERRIDES = { paper: "#0e0e12", gutter: "#09090c", ink: "#dddde8", accent: "#8287e2", lineColor: "#242430", categoryStrip: "#13131a", }; /* Banknote palettes */ const PALETTES = { pastel: ["#ec8a8a","#e0bd6c","#9bc7a6","#9cb8e0","#bd9c7e","#b7a3d3"], banknote:["#e85d5d","#d4a23a","#6fa97c","#6a8fd9","#a07a55","#8b6fb8"], vivid: ["#d83838","#d18a18","#3a8f55","#3963c4","#8a5a2b","#6a48a8"], mono: ["#444","#666","#555","#3a3a3a","#5a5a5a","#4a4a4a"], }; const CAT_KEYS = ["Fiscalité","International","Économie","Politiques","Droit","Arbitrage"]; /* ============ Plus pattern ============ */ function PlusPattern({ density, opacity, color }) { const id = `plus-${density}-${opacity}`; return ( ); } /* ============ Engraving art for cards ============ */ function EngravingArt({ variant, color }) { const c = color; const uid = `${variant}${color.replace("#", "")}`; if (variant === 0) { return ( {Array.from({length:36}, (_,i) => )} {Array.from({length:36}, (_,i) => )} ); } if (variant === 1) { return ( {Array.from({length:8}, (_,i) => ( ))} {Array.from({length:14}, (_,i) => { const a = (i/14)*Math.PI*2; return ; })} ); } if (variant === 2) { return ( {Array.from({length:16}, (_,i) => [ , ])} ); } if (variant === 3) { return ( {Array.from({length:10}, (_,i) => )} {Array.from({length:10}, (_,i) => )} ); } if (variant === 4) { return ( {Array.from({length:6}, (_,i) => ( ))} ); } if (variant === 5) { return ( {[-70,-35,0,35,70].map((shift, i) => { const ry2 = Math.sqrt(Math.max(1, 78*78 - shift*shift)); return ; })} {[0,1,2,3,4].map(i => ( ))} ); } if (variant === 6) { return ( {Array.from({length:32}, (_,i) => )} {Array.from({length:32}, (_,i) => )} ); } if (variant === 7) { return ( {Array.from({length:20}, (_,i) => ( ))} ); } if (variant === 8) { return ( {Array.from({length:5}, (_,i) => ( ))} {Array.from({length:18}, (_,i) => ( ))} ); } if (variant === 9) { return ( {Array.from({length:15}, (_,i) => ( ))} {Array.from({length:15}, (_,i) => { const col = i % 5, row = Math.floor(i / 5); return ; })} ); } if (variant === 10) { return ( {Array.from({length:3}, (_,i) => [ , ])} ); } return ( ); } /* ============ Featured carousel art ============ */ function CarouselArt({ slide, color, ink }) { if (slide === 0) { return ( Pays A Imposition Pays B Imposition ); } if (slide === 1) { return ( ! Obligation Exonération ); } if (slide === 2) { return ( {[60, 130, 200, 260].map((x, i) => ( {i + 1} {i < 3 && } ))} ); } if (slide === 3) { return ( Société A Société B ); } return null; } /* ============ Theme toggler ============ */ function ThemeToggler({ isDark, onToggle, t }) { return ( ); } /* ============ Header ============ */ function Header({ t, isDark, onToggle }) { return (
lawandeconomics.ch
); } const iconBtn = (t) => ({ background: "transparent", border: 0, borderLeft: `1px solid ${t.lineColor}`, cursor: "pointer", color: t.ink, display: "flex", alignItems: "center", justifyContent: "center", }); /* ============ Hero ============ */ const HERO_CAT_NAMES = ["Fiscalité", "International", "Économie", "Politiques", "Droit", "Arbitrage"]; const SCROLL_COLS = [ { duration: 22, delay: "0s", cards: [ { catIdx: 0, title: "Prix de transfert", desc: "Fixation des prix entre sociétés d'un même groupe.", art: 2 }, { catIdx: 4, title: "Force majeure", desc: "Un événement imprévisible qui exonère une partie.", art: 1 }, { catIdx: 2, title: "Coût d'opportunité", desc: "La valeur de la meilleure alternative à laquelle on renonce.", art: 3 }, ], }, { duration: 17, delay: "-7s", cards: [ { catIdx: 5, title: "Lex mercatoria", desc: "Corpus de règles commerciales internationales.", art: 4 }, { catIdx: 1, title: "BEPS — Action 14", desc: "Mécanismes de résolution des différends fiscaux.", art: 5 }, { catIdx: 3, title: "Subsidiarité", desc: "Ne déléguer que ce qu'un niveau supérieur fait mieux.", art: 7 }, ], }, ]; function HeroScrollCard({ f, t }) { const color = t.palette[f.catIdx]; const cat = HERO_CAT_NAMES[f.catIdx]; return (
{cat}
{f.title}
{f.desc}
); } function HeroScrollColumns({ t }) { return (
{SCROLL_COLS.map((col, ci) => (
{[0, 1].map(rep => ( {col.cards.map((f, i) => ( ))} ))}
))}
); } function Hero({ t }) { return (
{/* Left */}
Law and Economics

Idée complexe,
expliquer{" "} facilement.

Des notions clés de droit, d'économie et de fiscalité expliquées en carrousels visuels et interactifs.

Explorer les concepts
{/* Right: scrolling card columns */}
); } function FeaturedCard({ slide, setSlide, cur, total, t }) { return (
{cur.kind} {String(slide + 1).padStart(2, "0")}

{cur.title}

{cur.desc}

{String(slide + 1).padStart(2, "0")} / {String(total).padStart(2, "0")}
{Array.from({ length: total }).map((_, i) => (
); } const navBtn = (t) => ({ width: 40, height: 32, background: "transparent", border: 0, cursor: "pointer", display: "flex", alignItems: "center", justifyContent: "center", color: t.ink, transition: "background 160ms", }); function StackArt({ color }) { const lines = []; for (let i = 0; i < 22; i++) { const x = i * 1.2; lines.push(); } return ( {lines} ); } /* ============ Categories ============ */ function CategoryIcon({ kind, ink }) { const sw = 1; if (kind === "fiscalite") { const dots = []; for (let y = 0; y < 4; y++) for (let x = 0; x < 6; x++) dots.push(); return {dots}; } if (kind === "economie") return ( ); if (kind === "droit") return ( ); if (kind === "international") return ( ); if (kind === "politiques") { const dots = []; for (let y = 0; y < 4; y++) for (let x = 0; x < 4; x++) dots.push(); return {dots}; } if (kind === "arbitrage") return ( ); return null; } function Categories({ t }) { const items = [ { key: "fiscalite", label: "Fiscalité", count: 24, color: t.palette[0] }, { key: "international", label: "International", count: 15, color: t.palette[1] }, { key: "economie", label: "Économie", count: 18, color: t.palette[2] }, { key: "politiques", label: "Politiques publiques", count: 12, color: t.palette[3] }, { key: "droit", label: "Droit", count: 22, color: t.palette[4] }, { key: "arbitrage", label: "Arbitrage", count: 9, color: t.palette[5] }, ]; return (
{items.map((c, i) => (
{c.label}
{c.count} concepts
))}
); } /* ============ Publications ============ */ function buildPublications(palette) { const C = { Fiscalité: palette[0], International: palette[1], Économie: palette[2], Politiques: palette[3], Droit: palette[4], Arbitrage: palette[5], }; return [ { cat: "Droit", color: C.Droit, title: "Force majeure", desc: "Un événement imprévisible qui exonère une partie de ses obligations.", art: 0 }, { cat: "Économie", color: C.Économie, title: "Coût d'opportunité", desc: "La valeur de la meilleure alternative à laquelle on renonce.", art: 1 }, { cat: "Fiscalité", color: C.Fiscalité, title: "Prix de transfert", desc: "Fixation des prix dans les transactions entre sociétés d'un même groupe.", art: 2 }, { cat: "Arbitrage", color: C.Arbitrage, title: "Clause de la nation\nla plus favorisée", desc: "Accorder à un partenaire le même avantage qu'à tout autre.", art: 3 }, { cat: "Droit", color: C.Droit, title: "Personnalité juridique", desc: "Aptitude à être titulaire de droits et d'obligations.", art: 4 }, { cat: "International", color: C.International, title: "BEPS — Action 14", desc: "Améliorer le règlement des différends entre États.", art: 5 }, { cat: "Fiscalité", color: C.Fiscalité, title: "Convention de\ndouble imposition", desc: "Accord bilatéral pour éviter qu'un revenu soit imposé deux fois.", art: 6 }, { cat: "Politiques publiques", color: C.Politiques, title: "Principe de subsidiarité", desc: "Ne déléguer à un niveau supérieur que ce qu'il fait mieux.", art: 7 }, { cat: "International", color: C.International, title: "Procédure amiable", desc: "Mécanisme de résolution conventionnel entre administrations fiscales.", art: 8 }, { cat: "Fiscalité", color: C.Fiscalité, title: "Établissement stable", desc: "Présence économique permanente déclenchant l'imposition locale.", art: 9 }, { cat: "Économie", color: C.Économie, title: "Théorème de Coase", desc: "Allocation efficace des droits via la négociation, sans coût de transaction.", art: 10 }, { cat: "Arbitrage", color: C.Arbitrage, title: "Lex mercatoria", desc: "Corpus de règles d'usage commercial international entre opérateurs privés.", art: 0 }, ]; } function Publications({ t }) { const pubs = useMemo(() => buildPublications(t.palette), [t.palette]); return (

Dernières publications.

Voir tout
{pubs.map((p, i) => (
{p.cat}

{p.title}

{p.desc}

{t.showCardArt && (
)}
))}
); } /* ============ Manifeste ============ */ const MANIFESTE_POINTS = [ { num: "01", title: "Densité visuelle", body: "Une diapositive condense ce qu'un long article dilue. La cognition spatiale fait le reste — une image vaut mille mots de doctrine.", }, { num: "02", title: "Mémorisation accrue", body: "Le format séquentiel mobilise la mémoire de travail bien mieux qu'un texte continu. Une notion par slide, ancrée par le visuel.", }, { num: "03", title: "Référence rapide", body: "Chaque fiche est une unité atomique citable, partageable, archivable. Pas de scroll fatigue, pas de contenu dilué.", }, { num: "04", title: "Rigueur académique", body: "Sources primaires citées, doctrine référencée, jurisprudence indexée. Le fond sans le format blog.", }, ]; function Manifeste({ t }) { return (
{/* Left — texte principal */}

Pourquoi le format
carrousel ?

Les longs articles ne sont plus lus. Les fiches visuelles, oui. Le format carrousel impose la rigueur : une idée par slide, une source par citation, une notion par fiche.

« La densité visuelle est l'arme moderne de la doctrine. »
{/* Right — 4 points en grille */}
{MANIFESTE_POINTS.map((pt, i) => (
{pt.num} —

{pt.title}

{pt.body}

))}
); } /* ============ Footer ============ */ const FOOTER_COLS = [ { label: "Thématiques", links: [ "Fiscalité internationale", "Arbitrage & MAP", "Analyse économique du droit", "Droit international", "Politiques publiques", "Droit suisse", ], }, { label: "Ressources", links: [ "Index des concepts", "Bibliographie", "Citations & DOI", "Publications LinkedIn", "Glossaire", ], }, { label: "À propos", links: [ "Le projet", "Recherche doctorale", "Méthodologie", "Contact", "Mentions légales", "Licence CC BY-NC 4.0", ], }, ]; function Footer({ t }) { const linkStyle = { display: "block", textDecoration: "none", color: t.ink, fontSize: 13, lineHeight: 1, paddingBottom: 12, opacity: 0.6, transition: "opacity 180ms", }; const headStyle = { fontSize: 9.5, letterSpacing: "0.18em", textTransform: "uppercase", fontWeight: 600, color: t.ink, opacity: 0.35, fontFamily: "JetBrains Mono, monospace", marginBottom: 20, }; return (
{/* Main footer grid */}
{/* Brand column */}
lawandeconomics.ch

Plateforme de vulgarisation juridique et économique. Des notions clés du droit et de l'économie expliquées en carrousels visuels, en appui à la recherche doctorale.

{/* Link columns */} {FOOTER_COLS.map((col, ci) => (
{col.label}
))}
{/* Bottom bar */}
© 2026 LAWANDECONOMICS.CH — GENÈVE, SUISSE LICENCE CC BY-NC 4.0
); } function SocialIcon({ kind, ink }) { if (kind === "linkedin") return ( ); if (kind === "instagram") return ( ); if (kind === "x") return ( ); if (kind === "mail") return ( ); return null; } /* ============ App ============ */ function App() { const [isDark, setIsDark] = useState(false); const t = isDark ? { ...TWEAK_DEFAULTS, ...DARK_OVERRIDES } : TWEAK_DEFAULTS; const accent = t.accent, ink = t.ink, line = t.lineColor; const css = ` @keyframes fadeUp { from { opacity:0; transform: translateY(8px) } to { opacity:1; transform: translateY(0) } } @keyframes scrollHero { from { transform: translateY(0); } to { transform: translateY(-50%); } } .featured-fade { animation: fadeUp 380ms ease both; } section, header, footer, nav, div, a, p, h1, h2, h3, span, button { transition: background-color 400ms, border-color 400ms, color 400ms; } .nav-link::after { content:""; position:absolute; left:0; bottom:0; height:1px; width:0; background:${accent}; transition: width 240ms ease; } .nav-link:hover { color:${accent}; } .nav-link:hover::after { width:100%; } .cta-link .cta-arrow { transition: transform 240ms ease; } .cta-link:hover .cta-arrow { transform: translateX(6px); } .cta-link:hover { letter-spacing: 0.24em; } .see-all .cta-arrow { transition: transform 240ms ease; } .see-all:hover .cta-arrow { transform: translateX(5px); } .icon-btn { transition: background 180ms; } .icon-btn:hover { background: ${line}; } .nav-btn:hover { background:${line}; } .next-card:hover { border-color:${ink}; } .pub-card:hover { border-color:${ink}; } .pub-card:hover .pub-arrow { transform: translateX(5px); } .cat-tile:hover .cat-bar { width: 100%; } .btn-primary:hover .cta-arrow { transform: translateX(5px); } .btn-secondary:hover { background:${line}; } .btn-secondary:hover .cta-arrow { transform: translateX(5px); } .soc:hover { opacity: 0.6; } .footer-link:hover { opacity: 1 !important; } `; return (
{/* Side gutters with plus pattern */}
setIsDark(d => !d)} />
); } ReactDOM.createRoot(document.getElementById("root")).render();