Quoty — Proposal & Invoice Portal — Référence de design web et prompt

> SELF-CONTAINED, PIXEL-FAITHFUL REPRODUCTION OF THE CRUIP "QUOTY" HTML DEMO TEMPLATE, BUILT AS PLAIN HTML/CSS/JS WITH NO BUILD STEP.
REFERENCE: `https://cruip.com/demos/quoty/`

## SUMMARY

QUOTY IS A FREELANCER QUOTE/PROPOSAL WEB APP TEMPLATE FROM CRUIP: A SPLIT-SCREEN LAYOUT WHERE THE LEFT PANEL SHOWS A STICKY "QUOTE FOR [CLIENT]" SUMMARY AND THE RIGHT PANEL SWAPS BETWEEN A QUOTE BREAKDOWN (LINE-ITEM TABLE + ACCORDION TERMS), A LINE-ITEM DETAILS PAGE, A CONTACT FORM, AND A PAYMENT FORM (CARD/PAYPAL TOGGLE). BUILT ORIGINALLY WITH TAILWIND CSS (COMPILED/OBFUSCATED CLASSES) AND ALPINE.JS FOR THE ACCORDION AND PAYMENT-METHOD TOGGLE INTERACTIVITY. SUPPORTS LIGHT AND DARK MODE VIA A HEADER TOGGLE SWITCH PERSISTED TO `localStorage`.

## STYLE

- PALETTE (LIGHT MODE DEFAULT / DARK MODE VIA `.dark` CLASS ON `<html>`): PAGE BACKGROUND `#ffffff` LIGHT / `#0f172a`-ISH NEAR-BLACK NAVY DARK, LEFT-PANEL PANEL BACKGROUND SUBTLE OFF-WHITE/`#f8fafc` LIGHT AND DARK NAVY DARK, BORDERS `#e5e7eb` LIGHT / `#1f2937`-`#374151` DARK, BODY TEXT `#374151`/`#111827` LIGHT AND `#e5e7eb`/`#f9fafb` DARK, MUTED/LABEL TEXT `#6b7280`/`#9ca3af`, PRIMARY ACCENT (BUTTONS, LINKS, ACTIVE STATES) NEAR-BLACK `#171717`/`#111827` ON LIGHT AND WHITE ON DARK (MONOCHROME BUTTON STYLE), SECONDARY GHOST/OUTLINE BUTTON WITH BORDER ONLY.
- FONTS: "INTER" (GOOGLE FONTS, WEIGHTS 400/500/600) FOR BODY/UI TEXT; CUSTOM DISPLAY WEB FONT "ORBITER" (BOLD, WOFF/WOFF2) FOR THE LARGE CLIENT-NAME H1; "CAVEAT" (GOOGLE FONTS, HANDWRITTEN SCRIPT) LOADED FOR ACCENT USE.
- TYPE SCALE: LEFT-PANEL CLIENT NAME H1 ~40-56PX BOLD DISPLAY FONT, SECTION H2 (BRIEF/DETAILS/COSTS BREAKDOWN/PROJECT TERMS/CONTACT ME/CONFIRM & PAY) ~20-24PX SEMIBOLD, BODY COPY ~14-15PX, "QUOTE FOR" EYEBROW LABEL AND DATE ~13PX UPPERCASE/MUTED.