Coût et qualité des leads par campagne

# Tableau de bord « Coût et qualité des leads par campagne »

Tu es analyste marketing et développeur. Produis un tableau de bord HTML interactif qui répond à la question : **Quelles campagnes amènent des leads qui avancent ?** Les fichiers de données sont joints à ce message.

## Vos réglages
- Entreprise : {ENTREPRISE}
- Logo : {LOGO}
- Couleur principale : {COULEUR}
- Couleurs secondaires : {COULEURS2}
- Police : {POLICE}
- Devise : {DEVISE}
- Langue du tableau : {LANGUE}

## Fichiers attendus et colonnes
**campagnes_payantes.csv** : export des campagnes publicitaires (une ligne par jour et par campagne).
- date (date AAAA-MM-JJ) : jour
- regie (texte) : Google Ads ou LinkedIn Ads
- campagne (texte) : nom de la campagne, repris dans les leads
- cout_eur (nombre décimal (point)) : coût facturé par la régie, en euros

**leads.csv** : export des leads du CRM.
- id_lead (texte) : identifiant du lead
- date (date AAAA-MM-JJ) : date de création du lead
- canal (texte) : canal d'arrivée, mêmes valeurs que sessions_site
- campagne (texte) : campagne payante d'origine, vide sinon
- date_mql (date AAAA-MM-JJ) : date de qualification par le marketing (MQL), vide si jamais qualifié
- date_sql (date AAAA-MM-JJ) : date d'acceptation par les ventes (SQL), vide sinon
- id_opportunite (texte) : opportunité créée à partir de ce lead, vide sinon

**opportunites.csv** : export des opportunités du CRM.
- id_opportunite (texte) : identifiant de l'opportunité
- id_compte (texte) : compte
- resultat (texte) : gagnée, perdue ou en cours
- date_cloture (date AAAA-MM-JJ) : date de clôture réelle, vide si en cours
- montant_eur (nombre entier) : montant de l'affaire ; pour un abonnement, 12 mois de revenu récurrent

Seules ces colonnes servent. Une autre colonne présente dans le fichier est signalée à l'étape 1 de ta réponse, mais n'est pas utilisée.

## Indicateurs (définitions à respecter et à afficher)
- Leads : contacts créés dans le CRM avec la campagne d'origine.
- Part qualifiée : leads passés en qualification commerciale divisés par les leads de la campagne.
- Coût par lead qualifié : dépense de la campagne divisée par ses leads qualifiés.
- Coût d'acquisition client payant : dépense publicitaire de la campagne divisée par les nouveaux clients signés issus de ses leads ; ne compte que la publicité, sans les salaires ni les autres dépenses.

## À l'écran
- Vignettes : un indicateur par vignette.
- Graphiques et tableaux : nuage coût par lead et part qualifiée, une bulle par campagne ; tableau des campagnes, jusqu'au coût par client gagné.
- Filtres : période, régie.

## Précisions de calcul
- Un lead est rattaché à sa campagne par la colonne campagne ; il est qualifié quand date_mql est renseignée.
- Client signé : opportunité gagnée créée à partir d'un lead de la campagne (id_opportunite du lead, puis le fichier des opportunités).
- Les leads sans campagne ne figurent pas dans le tableau des campagnes : les compter à part dans les contrôles.

## Contrôles à faire avant d'afficher
- Leads sans campagne d'origine (comptés à part).
- Campagnes du CRM absentes de l'export des régies.
- Clients signés après la fin de la période d'analyse signalés (délai du cycle de vente).
- Coût par client non affiché sous 3 clients.
- Lignes illisibles écartées : leur nombre.

## Ce que le tableau ne dit pas (à afficher en pied de page)
Le coût complet d'un client, salaires compris. Ce tableau n'est pas fait pour : des campagnes de moins de 20 leads sur la période, trop peu pour comparer.

## Règles de présentation
- Tous les textes affichés sont dans la langue du tableau. Les libellés cités entre guillemets dans ce message sont donnés en français : les traduire si la langue est une autre.
- En-tête : le logo des réglages, s'il y en a un (fichier joint, intégré au HTML en image data URI, 28 px de haut), à gauche du nom de l'entreprise ; si le logo contient déjà ce nom, ne pas le répéter à côté ; sans logo, le nom seul. Logo entouré d'un liseré fin (1 px, couleur des bords des cartes) ; s'il est blanc ou très clair, le poser sur la couleur principale pour qu'il reste visible.
- Police des réglages déclarée en font-family, avec repli sur la police système (system-ui) ; aucun fichier de police téléchargé.
- Fond de page très clair (#f9f9f7), graphiques et vignettes sur des cartes #fcfcfb à bord fin et coins arrondis ; en mode sombre, #0d0d0d et #1a1a19.
- Couleurs des séries, toujours dans cet ordre : couleur principale (ou #2a78d6), puis les couleurs secondaires des réglages s'il y en a, puis #eb6834, #1baf7a, #eda100, #e87ba4, #008300, #6250d6, #e34948. Une même entité garde sa couleur partout, même quand un filtre en retire d'autres. Au-delà de 8 catégories, garder les 7 plus grandes et regrouper le reste en « Autres ».
- Vert #0ca30c et rouge #d03b3b réservés au favorable et au défavorable, toujours accompagnés de ▲ ou ▼ et d'un mot.
- Jamais deux échelles verticales sur un même graphique : deux mesures d'unités différentes, deux graphiques.
- Étapes ordonnées (entonnoir, paliers) : une seule teinte, de la plus foncée à la plus claire ; catégories sans ordre : les couleurs de séries ci-dessus.
- Graphiques par semaine : seulement les semaines entièrement comprises dans la période, sinon la première et la dernière barre paraissent en chute.
- Étiquettes d'axe jamais superposées ni coupées : sur un axe chargé ou un écran étroit, n'en afficher qu'une sur deux ou sur quatre, au format court (« 5 janv. »).
- Chaque couleur de légende est exactement celle des barres ou des courbes qu'elle désigne.
- Étiquettes de l'axe vertical entières, jamais coupées : prévoir la marge à gauche. Un taux s'affiche en % sur l'axe (« 30 % », pas « 0,3 »).
- Une courbe est un trait sans remplissage (fill none) ; une légende montre une pastille de la couleur de la série puis son libellé, les entrées séparées.
- Légende dès deux séries ; traits de 2 px ; barres de 24 px au plus, coin arrondi côté valeur ; grille fine et discrète ; pas de valeur écrite sur chaque point.
- Vignettes en haut : valeur, puis écart à la période précédente de même durée quand elle existe dans les données (« ▲ +12 % (mieux) vs T1 »). Écrire « mieux » ou « moins bien » seulement quand le sens est évident (plus de demandes, un coût unitaire plus bas) ; pour une dépense ou un volume sans objectif, l'écart reste neutre. Si les données ne couvrent pas entièrement la période précédente, ni flèche, ni zéro, ni pourcentage : écrire « pas de période précédente ». L'écart d'un taux s'écrit en points (« −6,1 points »).
- Au survol (et au clavier) d'une barre ou d'un point, une vraie bulle (pas seulement l'attribut title) donne la valeur exacte et sa date ou sa catégorie ; une aide « ? » de définition ne la remplace pas ; bouton « Voir les données » qui remplace le graphique par son tableau ; tableaux triables par clic sur l'en-tête, sur la valeur et non sur le texte affiché (« 1,8 % » se classe comme 0,018), un second clic inversant l'ordre.
- Pas de tiret long dans les textes affichés. Le nom de l'entreprise s'écrit exactement comme dans les réglages, casse comprise, y compris dans les surtitres.
- Un graphique en barres sans axe gradué écrit la valeur au bout de chaque barre ; graduations d'axe en nombres ronds (0, 50, 100, 150, pas 66 ou 133).
- Nombres et dates au format de la langue du tableau (en français : espace pour les milliers, virgule décimale, symbole de la devise et « % » après le nombre). Les colonnes de montant (suffixe _eur) sont lues comme des montants dans la devise des réglages, sans conversion ; la devise s'affiche partout où un montant apparaît.
- Lisible sur téléphone (390 px de large) sans défilement horizontal de la page : tout tableau large est placé dans un conteneur qui défile seul (overflow-x: auto), les étiquettes et pastilles passent à la ligne ; les cartes d'une grille ont min-width: 0 et les graphiques SVG prennent la largeur de leur carte (viewBox, width 100 %), jamais une largeur fixe en pixels ; mode sombre selon le réglage du système.
- Le tableau est autonome : aucun lien ni renvoi vers un autre tableau ou un autre modèle ; toutes les définitions utiles sont dans la page.
- En pied de page : les définitions des indicateurs, en petit (13 px, sur deux colonnes sur grand écran) et reprises dans l'aide « ? » de chaque vignette ; le résultat de chaque contrôle (conforme, à vérifier, information) ; ce que le tableau ne dit pas.
- En haut à droite, un bouton « Exporter en PDF » qui ouvre l'impression du navigateur (window.print(), l'utilisateur choisit « Enregistrer au format PDF »). Avant l'impression : titre du document « Entreprise · titre du tableau · période » (il devient le nom du fichier) et encadré « Critères retenus » sous le titre, avec la période, chaque filtre et chaque option et leur valeur choisie. À l'impression : thème clair et fond blanc, A4 paysage, boutons de chargement, filtres et boutons masqués, cartes jamais coupées entre deux pages (break-inside: avoid), tableaux de données sur toute la largeur et sans défilement, pour qu'aucune colonne ne soit tronquée ; vérifier l'aperçu avant impression sur chaque tableau.

## Contraintes techniques
- Un seul fichier HTML : CSS et JavaScript dans le fichier, aucune bibliothèque, aucune police ni image externes, aucun appel réseau.
- Les données ne sont pas copiées dans le fichier : en haut de la page, un bouton de chargement par fichier attendu ; la lecture se fait dans le navigateur, rien n'est envoyé. Boutons dans la langue du tableau (« Charger » suivi du nom du fichier), le champ de fichier natif masqué. Écrire sous les boutons : « Vos fichiers restent dans votre navigateur. »
- Lecture CSV robuste : séparateur virgule ou point-virgule détecté, guillemets, décimales avec point ou virgule, encodage UTF-8, lignes vides ignorées ; dates au format AAAA-MM-JJ ou JJ/MM/AAAA. Les lignes illisibles sont écartées et comptées dans les contrôles.
- Tout en haut du script, un objet COLONNES qui fait correspondre les noms attendus aux noms réels du fichier joint, facile à modifier.
- Filtres en une seule ligne au-dessus des graphiques ; ils s'appliquent à tout ce qui est affiché. La période se choisit par trimestre ou par mois de début et de fin, sur les mois présents dans les données de la période étudiée (une date d'historique antérieure, comme une opportunité ouverte l'année d'avant, ne crée pas de trimestre de plus) ; à l'ouverture, elle couvre tous les mois des données.
- Dates manipulées comme des chaînes AAAA-MM-JJ ou en UTC : jamais toISOString() sur une date locale, qui décale d'un jour selon le fuseau horaire et fait apparaître un mois qui n'existe pas dans les données.
- Insérer les textes venus des fichiers avec textContent, jamais en HTML.
- Toute erreur pendant la lecture ou le calcul s'affiche en clair dans la page (encadré rouge avec le message et l'étape), jamais seulement dans la console : un tableau ne reste jamais vide sans explication.

## Ta réponse, dans cet ordre
1. La correspondance des colonnes : pour chaque colonne attendue, la colonne trouvée dans mon fichier, ou « absente ». S'il manque une colonne indispensable, arrête-toi là et pose-moi la question.
2. Les contrôles listés ci-dessus, exécutés sur mon fichier, avec leurs chiffres. Si tu ne peux pas exécuter de code, dis-le et passe à l'étape 3.
3. Le fichier HTML complet : en fichier à télécharger si tu le peux, sinon dans un seul bloc de code, sans coupure ni partie à compléter. Avant de le livrer, exécute-le réellement sur mes fichiers, pas seulement une vérification de syntaxe : chargement, vignettes et graphiques s'affichent sans erreur dans la console, chaque élément prévu (bulle d'aide, tri, bouton) est relié à son événement et fonctionne. Si tu ne peux pas l'exécuter, dis-le clairement.
4. Trois constats lus dans mes données, chacun avec le chiffre qui le soutient. N'invente aucune cause : si une explication est une hypothèse, écris-le.
5. Les valeurs que je dois lire dans les vignettes à l'ouverture, pour vérifier moi-même que le tableau fonctionne.
Si mon fichier est un classeur Excel, convertis d'abord la première feuille en CSV et donne-le-moi avec le tableau.