Devis Express Pro® Votre devis sur mesure en 5 min. chrono

Ne perdez plus jamais un client à cause d'un devis réalisé dans un temps trop long.

"Des devis structurés pour convertir jusqu'à 30% plus de prospects en vous gagnant un temps précieux."

Maintenant, 15 minutes après un rendez-vous, votre prospect peut recevoir un devis professionnel, clair et personnalisé.

Juste un formulaire, le choix de vos services et hop, vous générez un PDF et l'envoyez à votre client ! Moins d'erreurs, des blocs rédigés que vous réutilisez, des parties que vous personnalisez avec les données reccueillies en rendez-vous.

Le problème que rencontrent la majorité des indépendants et dirigeants

Lorsqu'un prospect demande un devis :

❌ On manque de temps
❌ On ne sait pas toujours par quoi commencer
❌ On remet à plus tard (procrastination)
❌ Le devis traîne…
❌ Le prospect avance avec quelqu'un d'autre
❌ On perd le marché
❌ On perd du chiffre d'affaires
❌ On se décrédibilise malgré la qualité réelle de nos services

👉 Résultat : frustration, opportunités perdues et baisse de confiance commerciale.

Ce qu'il faut savoir

Vous êtes artisan, consultant, commerçant ou auto-entrepreneur ? Un devis professionnel est souvent la première impression que vous donnez à vos clients. C'est un document commercial et juridique essentiel qui engage les deux parties et pose les bases d'une relation de confiance.

Pourtant, créer un devis conforme peut sembler complexe : mentions obligatoires, calculs de TVA, numérotation, conditions de paiement... Nombreux sont les professionnels qui perdent du temps à formater leurs devis ou qui commettent des erreurs par méconnaissance de la réglementation.

Pourquoi ce service existe ?

Le devis n'est pas un document administratif.
C'est un outil de conversion commerciale.

Or :

Le temps nécessaire pour réaliser un devis est un souvent un frein majeur, soit il est inefficace, soit trop long à réaliser.

C'est une tâche repoussoir pour beaucoup, souvent reléguée en fin de journée, voire plus tard dans la semaine… parfois jusqu'à l'oubli... !

La réactivité est aujourd'hui un facteur décisif de vente, un véritable avantage concurrentiel

Celui qui répond vite, rassure.
Celui qui rassure, vend !

La solution - Devis Express Pro®

C'est quoi exactement ?

✅ C'est un outil simple et intuitif

✅ Directement intégré à votre site WordPress, une installation et non un abonnement (pour une meilleure autonomie)

✅ Accessible depuis n'importe où (ordinateur, tablette, mobile...)

✅ Conçu pour aller plus vite qu'un commercial expérimenté

⚠️ Cependant, nous recommandons une maintenance régulière 1 à 3 fois par an, pour en garantir une efficacité optimale et sécurisée. Voire une évolution en fonction des besoins spécifiques. (sur demande pour étude)

👉 Vous passez de la demande client… 
👉 au devis envoyé… 
👉 en seulement quelques minutes.

Un processus fluide et logique
en 5 points

1. Vous remplissez un formulaire intelligent

✅ Collecte simple des besoins réels et des attentes

✅ Conçu pour être utilisé suite à un rendez-vous prospect

✅ Vous apprenez à poser les bonnes questions
(conseil inclus dans ce service)

✅ Gardez une trace : les fiches "besoins" sont archivées dans l'historique pour le suivi client.

2. Vous sélectionnez les services, produits et options

✅ Par simple clic et ajout

✅ À partir d'éléments préconfigurés grâce à la gestion des "ajouts de services" et à la section "Chiffrage".
✅ Proposer plusieurs versions pour un même dossier est possible.

3. Vous ajoutez à la volée des besoins complémentaires (si besoin)

✅ Opportunités détectées pendant l'échange

✅ Montée en gamme naturelle (upsell discret, crowsell downsell…)

4. Génération automatique du devis

✅ Génération automatique du dossier client (informations centralisées)

✅ PDF professionnel, conforme et optimisé

✅ Personnalisation

✅ En un clic

5. Envoi immédiat au client

✅ Transmettre facilement le document
✅ Partager à un tiers
✅ Archive automatique

👉 Le prospect reçoit son devis dans le quart d'heure si vous le souhaitez.

Expérience utilisateur /démonstration

Exemple concret :

🕒 5 minutes : formulaire rempli à la sortie du rendez-vous
🕒 3 minutes : sélection et ajustement des besoins
🕒 1 clic : génération du PDF
🕒 1 clic : envoi au client

👉 Moins de 15 minutes entre la fin du rendez-vous et le devis envoyé.
Expérience bluffante : c'est quand votre client, à la suite du rendez-vous, part se faire couler un café et à son retour, il a dans sa boîte email, son devis personnalisé !

Avantages Clés & ce qu'ils permettent

Gain de temps immédiat

→ Plus de prospects traités dans un temps plus cours
→ Plus de devis envoyés
→ Plus d'opportunités transformées

Réactivité commerciale

→ Vous répondez plus vite que la moyenne
→ Vous captez le client avant les autres et ainsi avancez plus vite que les autres sur le cycle d'achat du client.

Image professionnelle renforcée

→ une plus grande perception de votre sérieux
→ accroissement de votre crédibilité et de votre professionnalisme
→ Différenciation face aux concurrents, grâce à votre outil secret !

Confort et sérénité

→ Moins de charge mentale, vous dormez mieux la nuit
→ Moins de procrastination, plus de satisfaction !
→ Plus de plaisir à vendre et de moment à célébrer avec vos nouveaux clients

Ce que comprend le service

Un professionnel vous accompagne dans la structuration des documents pour vous différencier

Une installation rapide, puis un suivi conseil pendant 60 jours

Conseil stratégique

→ Positionnement de l'offre et logique commerciale
→ Adaptation à votre activité
→ Mise en place d'indicateur de résultat / Matrice des résultats

Conseil technique

→ Intégration à votre outils WordPress (Installation d'un wordpress = sur demande)
→ Configuration de l'outil

BONUS Stratégique (une valeur cachée)

En apprenant à utiliser cet outil, vous apprenez à vendre mieux le processus d'analyse des besoins :

✅ Améliore vos entretiens prospects

✅ Clarifie votre discours

✅ Augmente mécaniquement votre taux de conversion

Conseil commercial

→ Structuration du devis pour améliorer les conversions
→ Apprentissage : L'art de poser les bonnes questions pour repérer le besoin souvent difficilement identifiable.

Conseil applicatif - on vous forme !

→ Prise en main
→ Méthodes d'utilisation concrètes
→ Cas réels

Version enrichie possible (sur demande) :

👉 Du devis rapide à la machine commerciale complète :

✅ Automatisation complète de la proposition commerciale

✅ Modèles de textes de vente

✅ Conditions générales de vente intégrées

✅ Conseil/ sensibilisation juridique (CGV, mentions légales) 👉 mis en relation avec des avocats selon la demande d'expertise

✅ Suivi et relance automatisés des devis

✅ etc.

Réservation du service, installation et conseil

tarif pionnier (derniers jours)

GO !

import { useState, useEffect, useMemo, useCallback, useRef } from "react"; import { History, FilePlus2, ListChecks, Settings, ShieldCheck, HelpCircle, Search, Plus, Trash2, Pencil, Send, Download, Copy, CheckCircle2, XCircle, ArrowRight, ArrowLeft, BarChart3, Users, Lock, RotateCcw, X, } from "lucide-react"; /* ------------------------------------------------------------------ */ /* Devis Express Pro — prototype interactif autonome */ /* Simule le parcours complet : fiche besoin -> catalogue -> devis -> */ /* envoi -> historique, plus un back-office admin protege par mot de */ /* passe. Les donnees sont sauvegardees via window.storage (demo */ /* locale a cet artifact, pas de vrai paiement ni de vrai email). */ /* ------------------------------------------------------------------ */ const STORAGE_KEY = "devis-express-pro-demo-v1"; const ADMIN_PASSWORD = "admin2026"; const GUIDE_ENTRETIEN = [ { section: "Contexte et origine", aide: "Comprendre pourquoi le prospect vous contacte maintenant.", questions: ["Qu'est-ce qui vous amene a chercher une solution aujourd'hui ?", "Comment avez-vous connu notre activite ?", "Avez-vous deja essaye de resoudre ce probleme autrement ?"] }, { section: "Besoin reel", aide: "Distinguer la demande formulee du besoin sous-jacent.", questions: ["Concretement, qu'attendez-vous comme resultat final ?", "Qu'est-ce qui ne doit surtout pas etre oublie ?", "Si tout se passe bien, a quoi cela ressemble dans 3 mois ?"] }, { section: "Contraintes", aide: "Cadrer ce qui limite les options possibles.", questions: ["Avez-vous une echeance ou une date butoir ?", "Une fourchette budgetaire a laquelle vous pensiez ?", "Des contraintes techniques, materielles ou d'acces ?"] }, { section: "Decision", aide: "Identifier qui decide et selon quels criteres.", questions: ["Qui d'autre est implique dans la decision ?", "Comparez-vous plusieurs prestataires actuellement ?", "Qu'est-ce qui ferait pencher la balance en notre faveur ?"] }, { section: "Opportunites complementaires", aide: "Reperer les besoins annexes exprimes en creux (upsell naturel, jamais force).", questions: ["Avez-vous d'autres projets lies a celui-ci, meme a plus long terme ?", "Y a-t-il un point annexe qui vous preoccupe et qu'on n'a pas aborde ?"] }, { section: "Freins", aide: "Anticiper les objections pour les traiter dans le devis.", questions: ["Qu'est-ce qui pourrait vous faire hesiter a valider ce projet ?", "Avez-vous eu une mauvaise experience par le passe sur ce type de prestation ?"] }, ]; const CHAMPS_FICHE = [ { key: "besoin_exprime", label: "Besoin exprime par le client", type: "textarea", required: true, placeholder: "Ce que le client demande, avec ses mots." }, { key: "objectifs", label: "Objectif recherche", type: "textarea", placeholder: "Ce que le client veut obtenir au final." }, { key: "contraintes", label: "Contraintes (techniques, acces, materiel…)", type: "textarea" }, { key: "budget_indicatif", label: "Budget evoque", type: "text", placeholder: "Ex : 1000 a 2000 EUR" }, { key: "delai_souhaite", label: "Delai souhaite", type: "text", placeholder: "Ex : sous 3 semaines" }, { key: "urgence", label: "Niveau d'urgence", type: "select", options: ["Faible", "Normal", "Eleve", "Immediat"] }, { key: "decideur", label: "Qui decide ?", type: "text" }, { key: "concurrence", label: "Autres devis en cours ?", type: "text" }, { key: "opportunites_detectees", label: "Besoins complementaires reperes", type: "textarea" }, { key: "freins", label: "Freins ou objections exprimes", type: "textarea" }, ]; const CATALOGUE_DEMO = [ { id: uid(), nom: "Diagnostic initial", description: "Analyse complete du besoin sur site", prix_unitaire: 150, unite: "forfait", tva_taux: 20, categorie: "Conseil" }, { id: uid(), nom: "Accompagnement mensuel", description: "Suivi et ajustements reguliers", prix_unitaire: 300, unite: "mois", tva_taux: 20, categorie: "Suivi" }, { id: uid(), nom: "Intervention sur site", description: "Demi-journee sur place", prix_unitaire: 220, unite: "forfait", tva_taux: 20, categorie: "Intervention" }, ]; const PROFIL_DEMO = { company_name: "Votre entreprise", legal_form: "Auto-entrepreneur", siret: "", address: "", phone: "", email: "contact@votre-entreprise.fr", tva_franchise: false, tva_default_rate: 20, numbering_prefix: "DEV", next_numero: 1, }; const LABELS_STATUT = { brouillon: "Brouillon", envoye: "Envoye", accepte: "Accepte", refuse: "Refuse" }; function uid() { return Math.random().toString(36).slice(2) + Date.now().toString(36); } function formatMontant(n) { return new Intl.NumberFormat("fr-FR", { minimumFractionDigits: 2, maximumFractionDigits: 2 }) .format(n || 0).replace(/\u202f|\u00a0/g, " ") + " EUR"; } function calcTotaux(lignes, remiseGlobalePct, tvaFranchise) { let sousTotal = 0; for (const l of lignes) sousTotal += (Number(l.quantite) || 0) * (Number(l.prix_unitaire) || 0) * (1 - (Number(l.remise_pct) || 0) / 100); const apresRemise = sousTotal * (1 - (Number(remiseGlobalePct) || 0) / 100); let tva = 0; if (!tvaFranchise) { const facteur = sousTotal > 0 ? apresRemise / sousTotal : 1; for (const l of lignes) { const net = (Number(l.quantite) || 0) * (Number(l.prix_unitaire) || 0) * (1 - (Number(l.remise_pct) || 0) / 100) * facteur; tva += net * ((Number(l.tva_taux) || 0) / 100); } } return { sousTotalHT: sousTotal, apresRemise, totalTVA: tva, totalTTC: apresRemise + tva }; } function ligneVide(overrides = {}) { return { id: uid(), service_id: null, description: "", quantite: 1, unite: "forfait", prix_unitaire: 0, tva_taux: 20, remise_pct: 0, is_upsell: false, ...overrides }; } const defaultState = () => ({ profil: PROFIL_DEMO, catalogue: CATALOGUE_DEMO, dossiers: [], devis: [] }); /* -------------------------- Persistance -------------------------- */ function usePersistedState() { const [state, setState] = useState(null); const [statut, setStatut] = useState("chargement"); useEffect(() => { (async () => { try { const res = await window.storage.get(STORAGE_KEY, false); setState(res ? JSON.parse(res.value) : defaultState()); } catch { setState(defaultState()); } finally { setStatut("pret"); } })(); }, []); const persist = useCallback(async (next) => { setState(next); try { await window.storage.set(STORAGE_KEY, JSON.stringify(next), false); } catch { /* stockage indisponible : la session reste fonctionnelle en memoire */ } }, []); return [state, persist, statut]; } /* ------------------------------ Style ------------------------------ */ function GlobalStyle() { useEffect(() => { const link = document.createElement("link"); link.rel = "stylesheet"; link.href = "https://fonts.googleapis.com/css2?family=IBM+Plex+Slab:wght@500;600;700&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap"; document.head.appendChild(link); return () => document.head.removeChild(link); }, []); return ( ); } /* ------------------------------ Chrono ------------------------------ */ function Timer({ startedAt }) { const [elapsed, setElapsed] = useState(() => Math.floor((Date.now() - startedAt) / 1000)); useEffect(() => { const id = setInterval(() => setElapsed(Math.floor((Date.now() - startedAt) / 1000)), 1000); return () => clearInterval(id); }, [startedAt]); const m = String(Math.floor(elapsed / 60)).padStart(2, "0"); const s = String(elapsed % 60).padStart(2, "0"); const ratio = elapsed / (15 * 60); let color = "var(--stamp-green)", bg = "var(--stamp-green-bg)"; if (ratio >= 1) { color = "var(--clay)"; bg = "var(--clay-bg)"; } else if (ratio >= 0.75) { color = "var(--amber)"; bg = "var(--amber-bg)"; } return (

{m}:{s} / 15:00

); } /* ------------------------------ Shell ------------------------------ */ const NAV = [ { key: "dossiers", label: "Dossiers", icon: History }, { key: "nouvelle-fiche", label: "Nouvelle fiche", icon: FilePlus2 }, { key: "catalogue", label: "Catalogue", icon: ListChecks }, { key: "parametres", label: "Parametres", icon: Settings }, ]; export default function DevisExpressProDemo() { const [state, persist, statutChargement] = usePersistedState(); const [ecran, setEcran] = useState({ vue: "dossiers" }); const [adminDeverrouille, setAdminDeverrouille] = useState(false); const [modalAdmin, setModalAdmin] = useState(false); if (statutChargement !== "pret" || !state) { return (

Chargement de la demo…

); } const naviguer = (vue, params = {}) => setEcran({ vue, ...params }); const reinitialiser = async () => { if (!confirm("Effacer toutes les donnees de cette demo et repartir de zero ?")) return; await persist(defaultState()); naviguer("dossiers"); }; return (

Devis Express Pro

Demo interactive

{ecran.vue === "dossiers" && } {ecran.vue === "nouvelle-fiche" && } {ecran.vue === "catalogue" && } {ecran.vue === "composer" && } {ecran.vue === "devis" && } {ecran.vue === "parametres" && }

{modalAdmin && !adminDeverrouille && ( setModalAdmin(false)} onSuccess={() => { setAdminDeverrouille(true); setModalAdmin(false); naviguer("admin"); }} /> )} {adminDeverrouille && ecran.vue !== "admin" && ecran.vue !== "dossiers" && ecran.vue !== "nouvelle-fiche" && ecran.vue !== "catalogue" && ecran.vue !== "parametres" && ecran.vue !== "composer" && ecran.vue !== "devis" && null} {ecran.vue === "admin" && adminDeverrouille && ( naviguer("dossiers")} /> )}

); } function ModalMotDePasseAdmin({ onClose, onSuccess }) { const [valeur, setValeur] = useState(""); const [erreur, setErreur] = useState(""); return (

Acces administrateur

Dans l'application reelle, ce back-office est protege par un compte administrateur separe, cote serveur. Pour cette demo : mot de passe {ADMIN_PASSWORD}.

setValeur(e.target.value)} onKeyDown={(e) => e.key === "Enter" && (valeur === ADMIN_PASSWORD ? onSuccess() : setErreur("Mot de passe incorrect."))} placeholder="Mot de passe" />

{erreur &&

{erreur}

}

); } /* ---------------------------- Dossiers ---------------------------- */ function VueDossiers({ state, naviguer }) { const [q, setQ] = useState(""); const [filtreStatut, setFiltreStatut] = useState(""); const dossiersAffiches = useMemo(() => { let list = state.dossiers.map((d) => { const versions = state.devis.filter((v) => v.dossier_id === d.id).sort((a, b) => b.version - a.version); return { ...d, versions, dernier: versions[0] }; }).filter((d) => d.dernier); list.sort((a, b) => new Date(b.dernier.created_at) - new Date(a.dernier.created_at)); if (filtreStatut) list = list.filter((d) => d.dernier.statut === filtreStatut); if (q.trim()) { const needle = q.toLowerCase(); list = list.filter((d) => `${d.client.nom} ${d.client.entreprise || ""} ${d.titre}`.toLowerCase().includes(needle)); } return list; }, [state, q, filtreStatut]); return (

Dossiers clients

Chaque fiche de rendez-vous et ses devis, au meme endroit.

setQ(e.target.value)} placeholder="Rechercher un client…" style={{ width: "100%", padding: "7px 10px 7px 30px", border: "1px solid var(--line)", borderRadius: 6, background: "#fff", fontSize: "0.86rem" }} />

{dossiersAffiches.length === 0 && (

Aucun dossier pour l'instant. Creez votre premiere fiche besoin, comme a la sortie d'un vrai rendez-vous.

)}

{dossiersAffiches.map((d) => ( ))}

); } /* ------------------------- Nouvelle fiche ------------------------- */ function VueNouvelleFiche({ state, persist, naviguer }) { const [startedAt] = useState(() => Date.now()); const [showGuide, setShowGuide] = useState(true); const [client, setClient] = useState({ nom: "", entreprise: "", email: "", telephone: "", adresse: "" }); const [form, setForm] = useState(Object.fromEntries(CHAMPS_FICHE.map((c) => [c.key, ""]))); const [erreur, setErreur] = useState(""); const enregistrer = async (e) => { e.preventDefault(); setErreur(""); if (!client.nom) { setErreur("Le nom du client est requis."); return; } if (!form.besoin_exprime) { setErreur("Le besoin exprime est requis."); return; } const dossierId = uid(); const dossier = { id: dossierId, titre: `Dossier ${new Date().toLocaleDateString("fr-FR")}`, client, fiche: { ...form, date_rdv: new Date().toISOString() }, created_at: new Date().toISOString() }; const next = { ...state, dossiers: [...state.dossiers, dossier] }; await persist(next); naviguer("composer", { dossierId }); }; return (

Fiche besoin

A remplir a la sortie du rendez-vous, pendant que tout est encore frais.

Client

Nom du contact * setClient({ ...client, nom: e.target.value })} />

Entreprise setClient({ ...client, entreprise: e.target.value })} />

Email setClient({ ...client, email: e.target.value })} placeholder="Pour l'envoi (simule)" />

Telephone setClient({ ...client, telephone: e.target.value })} />

Adresse setClient({ ...client, adresse: e.target.value })} />

Ce qui s'est dit en rendez-vous

{CHAMPS_FICHE.map((c) => (

{c.label}{c.required && " *"} {c.type === "textarea" &&

setForm({ ...form, [c.key]: e.target.value })} placeholder={c.placeholder} />}
              {c.type === "text" && <input value={form[c.key]} onChange={(e) => setForm({ ...form, [c.key]: e.target.value })} placeholder={c.placeholder} />}
              {c.type === "select" && (
                <select value={form[c.key]} onChange={(e) => setForm({ ...form, [c.key]: e.target.value })}>
                  <option value="">—</option>{c.options.map((o) => <option key={o} value={o}>{o}</option>)}
                </select>
              )}
            </div>
          ))}

{erreur && <p style={{ color: "var(--clay)", fontSize: "0.82rem" }}>{erreur}</p>}
          <button className="btn btn-primary" type="submit">Enregistrer et composer le devis <ArrowRight size={14} /></button>
        </form>

{showGuide && (
          <div className="card" style={{ padding: 18, position: "sticky", top: 22 }}>
            <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 10 }}>
              <div style={{ display: "flex", alignItems: "center", gap: 6, fontWeight: 700, fontSize: "0.86rem" }}><HelpCircle size={15} /> Bonnes questions a poser</div>
              <button onClick={() => setShowGuide(false)} className="btn btn-sm btn-ghost">Masquer</button>
            </div>
            <div style={{ display: "grid", gap: 14 }}>
              {GUIDE_ENTRETIEN.map((s) => (
                <div key={s.section}>
                  <div style={{ fontWeight: 700, fontSize: "0.8rem" }}>{s.section}</div>
                  <div style={{ fontSize: "0.72rem", color: "var(--ink-faint)", marginBottom: 5 }}>{s.aide}</div>
                  <ul style={{ margin: 0, paddingLeft: 15, fontSize: "0.76rem", display: "grid", gap: 4 }}>{s.questions.map((q) => <li key={q}>{q}</li>)}</ul>
                </div>
              ))}
            </div>
          </div>
        )}
      </div>
    </div>
  );
}

/* ----------------------------- Catalogue ----------------------------- */

function VueCatalogue({ state, persist }) {
  const VIDE = { nom: "", description: "", prix_unitaire: "", unite: "forfait", tva_taux: 20, categorie: "" };
  const [form, setForm] = useState(VIDE);
  const [editingId, setEditingId] = useState(null);
  const [erreur, setErreur] = useState("");

const parCategorie = {};
  state.catalogue.forEach((s) => { (parCategorie[s.categorie || "Général"] = parCategorie[s.categorie || "Général"] || []).push(s); });

return (
    <div>
      <h1>Catalogue de services</h1>
      <p style={{ color: "var(--ink-faint)", marginTop: 0 }}>Preconfigurez vos prestations pour les selectionner en un clic au moment du devis.</p>

<div style={{ display: "grid", gridTemplateColumns: "300px 1fr", gap: 22, alignItems: "start", marginTop: 18 }}>
        <form onSubmit={soumettre} className="card" style={{ padding: 18 }}>
          <h3 style={{ fontSize: "0.9rem" }}>{editingId ? "Modifier le service" : "Ajouter un service"}</h3>
          <div className="field"><label>Nom *</label><input value={form.nom} onChange={(e) => setForm({ ...form, nom: e.target.value })} /></div>
          <div className="field"><label>Description</label><textarea value={form.description} onChange={(e) => setForm({ ...form, description: e.target.value })} /></div>
          <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 10px" }}>
            <div className="field"><label>Prix HT *</label><input type="number" step="0.01" min="0" value={form.prix_unitaire} onChange={(e) => setForm({ ...form, prix_unitaire: e.target.value })} /></div>
            <div className="field"><label>Unite</label>
              <select value={form.unite} onChange={(e) => setForm({ ...form, unite: e.target.value })}>
                {["forfait", "heure", "jour", "mois", "m2", "piece"].map((u) => <option key={u} value={u}>{u}</option>)}
              </select>
            </div>
            <div className="field"><label>TVA %</label><input type="number" step="0.1" value={form.tva_taux} onChange={(e) => setForm({ ...form, tva_taux: e.target.value })} /></div>
            <div className="field"><label>Categorie</label><input value={form.categorie} onChange={(e) => setForm({ ...form, categorie: e.target.value })} placeholder="Ex : Conseil" /></div>
          </div>
          {erreur && <p style={{ color: "var(--clay)", fontSize: "0.8rem" }}>{erreur}</p>}
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-primary" type="submit"><Plus size={14} /> {editingId ? "Enregistrer" : "Ajouter"}</button>
            {editingId && <button type="button" className="btn btn-ghost" onClick={() => { setForm(VIDE); setEditingId(null); }}>Annuler</button>}
          </div>
        </form>

<div>
          {Object.keys(parCategorie).length === 0 && <div className="card" style={{ padding: 30, textAlign: "center", color: "var(--ink-faint)" }}>Catalogue vide.</div>}
          {Object.entries(parCategorie).map(([cat, list]) => (
            <div key={cat} style={{ marginBottom: 18 }}>
              <div style={{ fontSize: "0.72rem", fontWeight: 700, textTransform: "uppercase", letterSpacing: "0.04em", color: "var(--ink-faint)", marginBottom: 6 }}>{cat}</div>
              <div className="card">
                {list.map((s, i) => (
                  <div key={s.id} style={{ display: "flex", justifyContent: "space-between", alignItems: "center", padding: "11px 14px", borderTop: i > 0 ? "1px solid var(--line-soft)" : "none" }}>
                    <div><div style={{ fontWeight: 600, fontSize: "0.86rem" }}>{s.nom}</div>{s.description && <div style={{ fontSize: "0.74rem", color: "var(--ink-faint)" }}>{s.description}</div>}</div>
                    <div style={{ display: "flex", alignItems: "center", gap: 12 }}>
                      <span className="mono" style={{ fontSize: "0.8rem" }}>{s.prix_unitaire} EUR / {s.unite}</span>
                      <button className="btn btn-sm btn-ghost" onClick={() => editer(s)}><Pencil size={12} /></button>
                      <button className="btn btn-sm btn-danger" onClick={() => supprimer(s.id)}><Trash2 size={12} /></button>
                    </div>
                  </div>
                ))}
              </div>
            </div>
          ))}
        </div>
      </div>
    </div>
  );
}

/* -------------------------- Composer devis -------------------------- */

function VueComposerDevis({ state, persist, naviguer, dossierId, devisId, dupliquerDeId }) {
  const dossier = state.dossiers.find((d) => d.id === dossierId);
  // devisExistant : on modifie ce brouillon en place.
  // devisSource : on part de ces lignes (edition, ou pre-remplissage pour une nouvelle version), sans jamais ecraser l'original si dupliquerDeId est utilise.
  const devisExistant = devisId ? state.devis.find((v) => v.id === devisId) : null;
  const devisSource = devisExistant || (dupliquerDeId ? state.devis.find((v) => v.id === dupliquerDeId) : null);
  const [startedAt] = useState(() => Date.now());
  const [lignes, setLignes] = useState(devisSource ? devisSource.lignes.map((l) => ({ ...l, id: uid() })) : []);
  const [remiseGlobale, setRemiseGlobale] = useState(devisSource?.remise_globale_pct ?? 0);
  const [validite, setValidite] = useState(devisSource?.validite_jours ?? 30);
  const [conditions, setConditions] = useState(devisSource?.conditions_paiement ?? "Acompte de 30% a la commande, solde a la livraison.");
  const [delaiExecution, setDelaiExecution] = useState(devisSource?.delai_execution ?? "");
  const [acomptePct, setAcomptePct] = useState(devisSource?.acompte_pct ?? 30);
  const [erreur, setErreur] = useState("");

if (!dossier) return <p style={{ color: "var(--clay)" }}>Dossier introuvable.</p>;

const totaux = useMemo(() => calcTotaux(lignes, remiseGlobale, state.profil.tva_franchise), [lignes, remiseGlobale, state.profil.tva_franchise]);

const enregistrer = async () => {
    setErreur("");
    if (lignes.length === 0) { setErreur("Ajoutez au moins une prestation."); return; }
    if (lignes.some((l) => !l.description)) { setErreur("Chaque ligne doit avoir une description."); return; }

const numero = `${state.profil.numbering_prefix}-${new Date().getFullYear()}-${String(state.profil.next_numero).padStart(4, "0")}`;
    let nextDevisList = [...state.devis];
    let id;

if (devisExistant) {
      id = devisExistant.id;
      nextDevisList = nextDevisList.map((v) => (v.id === id ? { ...v, lignes, remise_globale_pct: Number(remiseGlobale), validite_jours: Number(validite), conditions_paiement: conditions, delai_execution: delaiExecution, acompte_pct: Number(acomptePct), ...totaux } : v));
      await persist({ ...state, devis: nextDevisList });
    } else {
      id = uid();
      const version = state.devis.filter((v) => v.dossier_id === dossierId).length + 1;
      const nouveauDevis = {
        id, dossier_id: dossierId, numero, version, statut: "brouillon", created_at: new Date().toISOString(),
        lignes, remise_globale_pct: Number(remiseGlobale), validite_jours: Number(validite),
        conditions_paiement: conditions, delai_execution: delaiExecution, acompte_pct: Number(acomptePct),
        sous_total_ht: totaux.sousTotalHT, total_tva: totaux.totalTVA, total_ttc: totaux.totalTTC,
      };
      await persist({ ...state, devis: [...nextDevisList, nouveauDevis], profil: { ...state.profil, next_numero: state.profil.next_numero + 1 } });
    }
    naviguer("devis", { devisId: id });
  };

const parCategorie = {};
  state.catalogue.forEach((s) => { (parCategorie[s.categorie || "Général"] = parCategorie[s.categorie || "Général"] || []).push(s); });

return (
    <div>
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginBottom: 18 }}>
        <div>
          <h1>Composer le devis</h1>
          <p style={{ color: "var(--ink-faint)", margin: 0 }}>{dossier.client.entreprise || dossier.client.nom} — cliquez sur une prestation pour l'ajouter.</p>
        </div>
        {!devisExistant && <Timer startedAt={startedAt} />}
      </div>

<div style={{ display: "grid", gridTemplateColumns: "260px 1fr", gap: 22, alignItems: "start" }}>
        <div className="card" style={{ padding: 16, position: "sticky", top: 22 }}>
          <h3 style={{ fontSize: "0.86rem", marginBottom: 10 }}>Catalogue</h3>
          {Object.entries(parCategorie).map(([cat, list]) => (
            <div key={cat} style={{ marginBottom: 12 }}>
              <div style={{ fontSize: "0.68rem", fontWeight: 700, textTransform: "uppercase", color: "var(--ink-faint)", marginBottom: 5 }}>{cat}</div>
              <div style={{ display: "grid", gap: 5 }}>
                {list.map((s) => (
                  <button key={s.id} onClick={() => ajouterDepuisCatalogue(s)} className="btn btn-ghost btn-sm" style={{ justifyContent: "space-between", textAlign: "left" }}>
                    <span>{s.nom}</span><span className="mono" style={{ opacity: 0.7 }}>{s.prix_unitaire} EUR</span>
                  </button>
                ))}
              </div>
            </div>
          ))}
          <button onClick={() => ajouterLigneLibre(true)} className="btn btn-stamp btn-sm" style={{ width: "100%", marginTop: 4, justifyContent: "center" }}>
            <Plus size={13} /> Besoin complementaire repere en RDV
          </button>
        </div>

<div>
          <div className="card" style={{ padding: 0, overflow: "hidden" }}>
            {lignes.length === 0 && <div style={{ padding: 28, textAlign: "center", color: "var(--ink-faint)", fontSize: "0.85rem" }}>Aucune ligne. Ajoutez une prestation depuis le catalogue.</div>}
            {lignes.map((l, i) => (
              <div key={l.id} style={{ padding: "12px 14px", borderTop: i > 0 ? "1px solid var(--line-soft)" : "none", background: l.is_upsell ? "var(--stamp-green-bg)" : "transparent" }}>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 60px 80px 60px 60px 30px", gap: 6, alignItems: "center" }}>
                  <input placeholder="Description" value={l.description} onChange={(e) => majLigne(l.id, { description: e.target.value })} style={{ padding: "5px 7px", border: "1px solid var(--line)", borderRadius: 6, fontSize: "0.82rem" }} />
                  <input type="number" min="0" step="0.5" title="Qte" value={l.quantite} onChange={(e) => majLigne(l.id, { quantite: e.target.value })} style={{ padding: "5px 7px", border: "1px solid var(--line)", borderRadius: 6, width: "100%", fontSize: "0.82rem" }} />
                  <input type="number" min="0" step="0.01" title="Prix HT" value={l.prix_unitaire} onChange={(e) => majLigne(l.id, { prix_unitaire: e.target.value })} style={{ padding: "5px 7px", border: "1px solid var(--line)", borderRadius: 6, width: "100%", fontSize: "0.82rem" }} />
                  <input type="number" min="0" step="0.1" title="TVA %" value={l.tva_taux} onChange={(e) => majLigne(l.id, { tva_taux: e.target.value })} style={{ padding: "5px 7px", border: "1px solid var(--line)", borderRadius: 6, width: "100%", fontSize: "0.82rem" }} />
                  <input type="number" min="0" max="100" title="Remise %" value={l.remise_pct} onChange={(e) => majLigne(l.id, { remise_pct: e.target.value })} style={{ padding: "5px 7px", border: "1px solid var(--line)", borderRadius: 6, width: "100%", fontSize: "0.82rem" }} />
                  <button onClick={() => supprimerLigne(l.id)} className="btn btn-sm btn-danger" style={{ padding: "5px" }}><Trash2 size={12} /></button>
                </div>
                {l.is_upsell && <div style={{ fontSize: "0.68rem", color: "var(--stamp-green)", marginTop: 3, fontWeight: 700 }}>Besoin complementaire</div>}
              </div>
            ))}
            <div style={{ padding: 10, borderTop: lignes.length ? "1px solid var(--line-soft)" : "none" }}>
              <button onClick={() => ajouterLigneLibre(false)} className="btn btn-ghost btn-sm"><Plus size={13} /> Ligne libre</button>
            </div>
          </div>

<div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 14, marginTop: 18 }}>
            <div className="card" style={{ padding: 16 }}>
              <h3 style={{ fontSize: "0.86rem", marginBottom: 10 }}>Conditions</h3>
              <div className="field"><label>Validite (jours)</label><input type="number" min="1" value={validite} onChange={(e) => setValidite(e.target.value)} /></div>
              <div className="field"><label>Delai d'execution</label><input value={delaiExecution} onChange={(e) => setDelaiExecution(e.target.value)} placeholder="Ex : 2 a 3 semaines" /></div>
              <div className="field"><label>Acompte (%)</label><input type="number" min="0" max="100" value={acomptePct} onChange={(e) => setAcomptePct(e.target.value)} /></div>
              <div className="field"><label>Conditions de paiement</label><textarea value={conditions} onChange={(e) => setConditions(e.target.value)} /></div>
              <div className="field" style={{ marginBottom: 0 }}><label>Remise globale (%)</label><input type="number" min="0" max="100" value={remiseGlobale} onChange={(e) => setRemiseGlobale(e.target.value)} /></div>
            </div>

<div className="card" style={{ padding: 16, display: "flex", flexDirection: "column" }}>
              <h3 style={{ fontSize: "0.86rem", marginBottom: 10 }}>Recapitulatif</h3>
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.84rem", marginBottom: 5 }}><span style={{ color: "var(--ink-faint)" }}>Sous-total HT</span><span className="mono">{formatMontant(totaux.sousTotalHT)}</span></div>
              {Number(remiseGlobale) > 0 && <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.84rem", marginBottom: 5 }}><span style={{ color: "var(--ink-faint)" }}>Remise ({remiseGlobale}%)</span><span className="mono">- {formatMontant(totaux.sousTotalHT - totaux.apresRemise)}</span></div>}
              <div style={{ display: "flex", justifyContent: "space-between", fontSize: "1.05rem", fontWeight: 700, marginTop: "auto", paddingTop: 12, borderTop: "1px solid var(--line-soft)" }}><span>Total TTC</span><span className="mono">{formatMontant(totaux.totalTTC)}</span></div>
              {state.profil.tva_franchise && <div style={{ fontSize: "0.68rem", color: "var(--ink-faint)", marginTop: 4 }}>TVA non applicable, art. 293 B du CGI</div>}
              {erreur && <p style={{ color: "var(--clay)", fontSize: "0.8rem", marginTop: 8 }}>{erreur}</p>}
              <button className="btn btn-primary" onClick={enregistrer} style={{ marginTop: 12, justifyContent: "center" }}>Generer le devis <ArrowRight size={14} /></button>
            </div>
          </div>
        </div>
      </div>
    </div>
  );
}

/* ------------------------------ Devis ------------------------------ */

function VueDevis({ state, persist, naviguer, devisId }) {
  const devis = state.devis.find((v) => v.id === devisId);
  const dossier = devis && state.dossiers.find((d) => d.id === devis.dossier_id);
  const [envoiOuvert, setEnvoiOuvert] = useState(false);
  const [message, setMessage] = useState("");
  const [notice, setNotice] = useState("");
  const versions = devis ? state.devis.filter((v) => v.dossier_id === devis.dossier_id).sort((a, b) => a.version - b.version) : [];

if (!devis || !dossier) return <p style={{ color: "var(--clay)" }}>Devis introuvable.</p>;

const changerStatut = async (statut) => { await persist({ ...state, devis: state.devis.map((v) => (v.id === devis.id ? { ...v, statut } : v)) }); };

const envoyer = async () => { await changerStatut("envoye"); setNotice("Devis marque comme envoye (simulation — aucun email reel n'est expedie dans cette demo)."); setEnvoiOuvert(false); };

const dupliquer = async () => { naviguer("composer", { dossierId: dossier.id }); };

return (
    <div>
      <div className="no-print" style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", marginBottom: 18 }}>
        <div>
          <button onClick={() => naviguer("dossiers")} className="btn btn-ghost btn-sm" style={{ marginBottom: 8 }}><ArrowLeft size={13} /> Dossiers</button>
          <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
            <h1 style={{ margin: 0 }}>{devis.numero}</h1>
            <span className={`stamp stamp-${devis.statut}`}>{LABELS_STATUT[devis.statut]}</span>
          </div>
          <p style={{ color: "var(--ink-faint)", margin: 0 }}>{dossier.client.entreprise ? `${dossier.client.entreprise} — ${dossier.client.nom}` : dossier.client.nom}{devis.version > 1 && ` · version ${devis.version}`}</p>
        </div>
        <div style={{ display: "flex", gap: 6 }}>
          {devis.statut === "brouillon" && <button className="btn btn-ghost btn-sm" onClick={() => naviguer("composer", { dossierId: dossier.id, devisId: devis.id })}><Pencil size={13} /> Modifier</button>}
          <button className="btn btn-ghost btn-sm" onClick={dupliquer}><Copy size={13} /> Nouvelle version</button>
          <button className="btn btn-ghost btn-sm" onClick={() => window.print()}><Download size={13} /> Imprimer / PDF</button>
          {devis.statut === "brouillon" && <button className="btn btn-primary btn-sm" onClick={() => setEnvoiOuvert(true)}><Send size={13} /> Envoyer au client</button>}
        </div>
      </div>

{notice && <div className="no-print card" style={{ padding: "10px 14px", marginBottom: 16, color: "var(--stamp-green)", background: "var(--stamp-green-bg)", border: "none" }}>{notice}</div>}

{envoiOuvert && (
        <div className="no-print card" style={{ padding: 16, marginBottom: 18 }}>
          <h3 style={{ fontSize: "0.86rem" }}>Envoyer a {dossier.client.email || "aucune adresse enregistree"} (simulation)</h3>
          <div className="field"><label>Message (optionnel)</label><textarea value={message} onChange={(e) => setMessage(e.target.value)} /></div>
          <div style={{ display: "flex", gap: 8 }}>
            <button className="btn btn-primary" onClick={envoyer}>Confirmer l'envoi</button>
            <button className="btn btn-ghost" onClick={() => setEnvoiOuvert(false)}>Annuler</button>
          </div>
        </div>
      )}

<div className="no-print" style={{ display: "grid", gap: 14 }}>
          <div className="card" style={{ padding: 14 }}>
            <div style={{ fontSize: "0.74rem", color: "var(--ink-faint)", marginBottom: 3 }}>Total TTC</div>
            <div className="mono" style={{ fontSize: "1.2rem", fontWeight: 700 }}>{formatMontant(devis.total_ttc)}</div>
          </div>
          {devis.statut === "envoye" && (
            <div className="card" style={{ padding: 14 }}>
              <div style={{ fontSize: "0.78rem", fontWeight: 700, marginBottom: 8 }}>Reponse du client</div>
              <div style={{ display: "flex", gap: 6 }}>
                <button className="btn btn-stamp btn-sm" onClick={() => changerStatut("accepte")}><CheckCircle2 size={13} /> Accepte</button>
                <button className="btn btn-danger btn-sm" onClick={() => changerStatut("refuse")}><XCircle size={13} /> Refuse</button>
              </div>
            </div>
          )}
          {versions.length > 1 && (
            <div className="card" style={{ padding: 14 }}>
              <div style={{ fontSize: "0.78rem", fontWeight: 700, marginBottom: 8 }}>Versions de ce dossier</div>
              <div style={{ display: "grid", gap: 5 }}>
                {versions.map((v) => (
                  <button key={v.id} onClick={() => naviguer("devis", { devisId: v.id })} style={{ display: "flex", justifyContent: "space-between", padding: "5px 7px", borderRadius: 6, background: v.id === devisId ? "var(--paper-alt)" : "transparent", border: "none", cursor: "pointer", fontSize: "0.78rem", textAlign: "left" }}>
                    <span>v{v.version}</span><span className="mono">{formatMontant(v.total_ttc)}</span>
                  </button>
                ))}
              </div>
            </div>
          )}
        </div>
      </div>
    </div>
  );
}

function DevisPapier({ devis, client, profil }) {
  return (
    <div className="card print-area" style={{ padding: 36, background: "#fff" }}>
      <div style={{ display: "flex", justifyContent: "space-between", marginBottom: 22 }}>
        <div>
          <div style={{ fontFamily: "var(--font-display)", fontWeight: 700, fontSize: "1.3rem" }}>{profil.company_name}</div>
          <div style={{ fontSize: "0.78rem", color: "var(--ink-faint)", marginTop: 4, lineHeight: 1.6 }}>
            {profil.legal_form}<br />{profil.address}<br />{profil.siret && `SIRET : ${profil.siret}`}<br />{profil.phone}
          </div>
        </div>
        <div style={{ textAlign: "right" }}>
          <div style={{ fontSize: "0.72rem", fontWeight: 700, color: "var(--ink-faint)", marginBottom: 4 }}>DESTINATAIRE</div>
          <div style={{ fontSize: "0.82rem", lineHeight: 1.6 }}>{client.entreprise || client.nom}<br />{client.entreprise && client.nom}<br />{client.email}</div>
        </div>
      </div>

<div style={{ borderTop: "1px solid var(--line)", paddingTop: 16, display: "flex", justifyContent: "space-between", marginBottom: 18 }}>
        <h2 style={{ fontSize: "1.15rem" }}>DEVIS N° {devis.numero}</h2>
        <div style={{ textAlign: "right", fontSize: "0.76rem", color: "var(--ink-faint)" }}>
          Date d'emission : {new Date(devis.created_at).toLocaleDateString("fr-FR", { day: "2-digit", month: "long", year: "numeric" })}<br />
          Validite : {devis.validite_jours} jours{devis.delai_execution && <><br />Delai d'execution : {devis.delai_execution}</>}
        </div>
      </div>

<table style={{ width: "100%", borderCollapse: "collapse", fontSize: "0.82rem" }}>
        <thead>
          <tr style={{ background: "var(--ink)", color: "#fff" }}>
            <th style={{ textAlign: "left", padding: "8px 10px", fontWeight: 600 }}>Designation</th>
            <th style={{ textAlign: "right", padding: "8px 10px", fontWeight: 600 }}>Qte</th>
            <th style={{ textAlign: "right", padding: "8px 10px", fontWeight: 600 }}>P.U. HT</th>
            <th style={{ textAlign: "right", padding: "8px 10px", fontWeight: 600 }}>TVA</th>
            <th style={{ textAlign: "right", padding: "8px 10px", fontWeight: 600 }}>Total HT</th>
          </tr>
        </thead>
        <tbody>
          {devis.lignes.map((l, i) => (
            <tr key={l.id} style={{ background: i % 2 === 1 ? "var(--paper)" : "transparent" }}>
              <td style={{ padding: "8px 10px" }}>{l.description}{l.remise_pct > 0 && ` (remise ${l.remise_pct}%)`}</td>
              <td style={{ padding: "8px 10px", textAlign: "right" }}>{l.quantite} {l.unite}</td>
              <td style={{ padding: "8px 10px", textAlign: "right" }} className="mono">{formatMontant(l.prix_unitaire)}</td>
              <td style={{ padding: "8px 10px", textAlign: "right" }}>{profil.tva_franchise ? "N/A" : `${l.tva_taux}%`}</td>
              <td style={{ padding: "8px 10px", textAlign: "right" }} className="mono">{formatMontant(l.quantite * l.prix_unitaire * (1 - (l.remise_pct || 0) / 100))}</td>
            </tr>
          ))}
        </tbody>
      </table>

<div style={{ display: "flex", justifyContent: "flex-end", marginTop: 16 }}>
        <div style={{ width: 240 }}>
          <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.82rem", padding: "4px 0" }}><span>Total HT</span><span className="mono">{formatMontant(devis.sous_total_ht)}</span></div>
          {profil.tva_franchise ? (
            <div style={{ fontSize: "0.68rem", color: "var(--ink-faint)", padding: "4px 0" }}>TVA non applicable, art. 293 B du CGI</div>
          ) : (
            <div style={{ display: "flex", justifyContent: "space-between", fontSize: "0.82rem", padding: "4px 0" }}><span>Total TVA</span><span className="mono">{formatMontant(devis.total_tva)}</span></div>
          )}
          <div style={{ display: "flex", justifyContent: "space-between", fontWeight: 700, background: "var(--ink)", color: "#fff", padding: "8px 10px", borderRadius: 4, marginTop: 6 }}>
            <span>TOTAL TTC</span><span className="mono">{formatMontant(devis.total_ttc)}</span>
          </div>
        </div>
      </div>

<div style={{ marginTop: 22, fontSize: "0.78rem" }}>
        <div style={{ fontWeight: 700, marginBottom: 4 }}>Conditions</div>
        <p style={{ color: "var(--ink-faint)", margin: "0 0 6px 0" }}>{devis.conditions_paiement}</p>
        {devis.acompte_pct > 0 && <p style={{ color: "var(--ink-faint)", margin: 0 }}>Un acompte de {devis.acompte_pct}% est demande a la signature du present devis.</p>}
      </div>

<div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", marginTop: 26 }}>
        <div style={{ border: "1px solid var(--line)", borderRadius: 6, padding: "10px 14px", width: 230, height: 60, fontSize: "0.72rem", color: "var(--ink-faint)" }}>
          Bon pour accord, date et signature :
        </div>
        <div className={`stamp stamp-${devis.statut}`} style={{ fontSize: "0.85rem", padding: "8px 16px" }}>{LABELS_STATUT[devis.statut]}</div>
      </div>
    </div>
  );
}

/* --------------------------- Parametres --------------------------- */

function VueParametres({ state, persist }) {
  const [form, setForm] = useState(state.profil);
  const [notice, setNotice] = useState("");

const enregistrer = async (e) => {
    e.preventDefault();
    await persist({ ...state, profil: form });
    setNotice("Enregistre.");
    setTimeout(() => setNotice(""), 2000);
  };

return (
    <div>
      <h1>Parametres</h1>
      <p style={{ color: "var(--ink-faint)", marginTop: 0 }}>Ces informations apparaissent sur vos devis.</p>
      <form onSubmit={enregistrer} className="card" style={{ padding: 22, maxWidth: 560, marginTop: 16 }}>
        <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "0 14px" }}>
          <div className="field"><label>Nom de l'entreprise</label><input value={form.company_name} onChange={(e) => setForm({ ...form, company_name: e.target.value })} /></div>
          <div className="field"><label>Forme juridique</label><input value={form.legal_form} onChange={(e) => setForm({ ...form, legal_form: e.target.value })} /></div>
          <div className="field"><label>SIRET</label><input value={form.siret} onChange={(e) => setForm({ ...form, siret: e.target.value })} /></div>
          <div className="field"><label>Telephone</label><input value={form.phone} onChange={(e) => setForm({ ...form, phone: e.target.value })} /></div>
          <div className="field" style={{ gridColumn: "1 / -1" }}><label>Adresse</label><input value={form.address} onChange={(e) => setForm({ ...form, address: e.target.value })} /></div>
          <div className="field"><label>Prefixe de numerotation</label><input value={form.numbering_prefix} onChange={(e) => setForm({ ...form, numbering_prefix: e.target.value })} /></div>
          <div className="field"><label>TVA par defaut (%)</label><input type="number" step="0.1" value={form.tva_default_rate} disabled={form.tva_franchise} onChange={(e) => setForm({ ...form, tva_default_rate: e.target.value })} /></div>
        </div>
        <label style={{ display: "flex", alignItems: "center", gap: 8, fontSize: "0.82rem", margin: "2px 0 16px 0" }}>
          <input type="checkbox" checked={form.tva_franchise} onChange={(e) => setForm({ ...form, tva_franchise: e.target.checked })} />
          Franchise en base de TVA (art. 293 B du CGI)
        </label>
        {notice && <p style={{ color: "var(--stamp-green)", fontSize: "0.8rem" }}>{notice}</p>}
        <button className="btn btn-primary" type="submit">Enregistrer</button>
      </form>

<div className="card" style={{ padding: 18, maxWidth: 560, marginTop: 18, background: "var(--amber-bg)", border: "none" }}>
        <div style={{ fontSize: "0.82rem", fontWeight: 700, color: "var(--amber)", marginBottom: 4 }}>Abonnement (simulation)</div>
        <p style={{ fontSize: "0.78rem", color: "var(--ink-soft)", margin: 0 }}>
          Dans l'application reelle, cet espace est facture 50 EUR / mois via Stripe, avec gestion de moyen de
          paiement et resiliation en libre-service.
        </p>
      </div>
    </div>
  );
}

/* ------------------------------ Admin ------------------------------ */

function AdminOverlay({ state, onClose }) {
  const totalDevis = state.devis.length;
  const envoyes = state.devis.filter((d) => d.statut !== "brouillon").length;
  const acceptes = state.devis.filter((d) => d.statut === "accepte").length;
  const montantAccepte = state.devis.filter((d) => d.statut === "accepte").reduce((s, d) => s + d.total_ttc, 0);
  const tauxConversion = envoyes > 0 ? Math.round((acceptes / envoyes) * 1000) / 10 : 0;

return (
    <div className="depro no-print" style={{ position: "fixed", inset: 0, background: "var(--paper)", zIndex: 40, overflow: "auto" }}>
      <div style={{ maxWidth: 900, margin: "0 auto", padding: "32px 28px" }}>
        <button onClick={onClose} className="btn btn-ghost btn-sm" style={{ marginBottom: 18 }}><ArrowLeft size={13} /> Retour a l'application</button>
        <div style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 4 }}>
          <ShieldCheck size={18} color="var(--amber)" />
          <h1 style={{ margin: 0 }}>Back-office admin</h1>
        </div>
        <p style={{ color: "var(--ink-faint)", marginTop: 4 }}>
          Vue simplifiee de demo. En production, cette page agrege tous les abonnes et n'est accessible qu'aux
          comptes marques <code className="mono">admin</code> cote serveur (verification a chaque requete API).
        </p>

<h2 style={{ fontSize: "1rem", marginTop: 28 }}>Tous les devis</h2>
        <div className="card" style={{ padding: 0, marginTop: 10, overflow: "hidden" }}>
          {state.devis.length === 0 && <div style={{ padding: 18, color: "var(--ink-faint)", fontSize: "0.85rem" }}>Aucun devis genere pour l'instant dans cette demo.</div>}
          {state.devis.slice().sort((a, b) => new Date(b.created_at) - new Date(a.created_at)).map((d, i) => {
            const dossier = state.dossiers.find((x) => x.id === d.dossier_id);
            return (
              <div key={d.id} style={{ display: "flex", justifyContent: "space-between", padding: "10px 16px", borderTop: i > 0 ? "1px solid var(--line-soft)" : "none", fontSize: "0.84rem" }}>
                <span>{d.numero} · {dossier?.client?.nom}</span>
                <span style={{ display: "flex", gap: 12, alignItems: "center" }}>
                  <span className={`stamp stamp-${d.statut}`} style={{ fontSize: "0.62rem" }}>{LABELS_STATUT[d.statut]}</span>
                  <span className="mono">{formatMontant(d.total_ttc)}</span>
                </span>
              </div>
            );
          })}
        </div>
      </div>
    </div>
  );
}

function Chiffre({ label, valeur, accent }) {
  return (
    <div className="card" style={{ padding: 16 }}>
      <div style={{ fontSize: "0.72rem", color: "var(--ink-faint)", marginBottom: 5 }}>{label}</div>
      <div className="mono" style={{ fontSize: "1.35rem", fontWeight: 700, color: accent || "var(--ink)" }}>{valeur}</div>
    </div>
  );
}