Entonnoir du lead à la signature

# Tableau de bord « Entonnoir du lead à la signature »

Tu es analyste marketing et développeur. Produis un tableau de bord HTML interactif qui répond à la question : **Où perd-on les leads entre la qualification et la signature ?** 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
**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
- id_compte (texte) : compte du lead
- 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_lead (texte) : lead d'origine, vide si antérieur à la période
- resultat (texte) : gagnée, perdue ou en cours
- montant_eur (nombre entier) : montant de l'affaire ; pour un abonnement, 12 mois de revenu récurrent

**comptes.csv** : export des comptes du CRM.
- id_compte (texte) : identifiant du compte, clé de jointure
- taille (texte) : PME, ETI ou SMB (entreprise de taille moyenne hors de France)

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)
- Volumes par étape : leads, leads qualifiés marketing, leads qualifiés commerciaux, opportunités, affaires gagnées.
- Taux de passage : volume d'une étape divisé par celui de l'étape précédente, pour la même cohorte de leads.
- Valeur signée : montant des affaires gagnées.

## À l'écran
- Vignettes : un indicateur par vignette.
- Graphiques et tableaux : entonnoir par étape ; taux de passage par source ; évolution mensuelle.
- Filtres : période de création du lead, source, segment (PME, ETI, entreprises de taille moyenne hors de France).

## Précisions de calcul
- Cohorte : les leads créés sur la période ; chaque étape compte les leads de cette cohorte qui l'ont atteinte, quelle que soit la date de passage.
- Passage MQL vers SQL par mois : par mois de qualification marketing.
- Source : la colonne canal de leads (sept valeurs : organique, payant, direct, social, email, référent, assistants IA).

## Contrôles à faire avant d'afficher
- Leads qui sautent une étape.
- Opportunités sans lead d'origine.
- Définition de chaque étape affichée.
- Lignes illisibles écartées : leur nombre.

## Ce que le tableau ne dit pas (à afficher en pied de page)
Pourquoi les leads décrochent. Ce tableau n'est pas fait pour : un CRM où les étapes ne sont pas datées.

## 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.