Vitesse du pipeline

# Tableau de bord « Vitesse du pipeline »

Tu es analyste marketing et développeur. Produis un tableau de bord HTML interactif qui répond à la question : **Combien de temps passe-t-on à chaque étape, et où ça bloque ?** 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
**opportunites.csv** : export des opportunités du CRM.
- id_opportunite (texte) : identifiant de l'opportunité
- id_compte (texte) : compte
- id_lead (texte) : lead d'origine, vide si antérieur à la période
- type (texte) : services ou abonnement
- offre (texte) : nom de l'offre
- montant_eur (nombre entier) : montant de l'affaire ; pour un abonnement, 12 mois de revenu récurrent
- date_creation (date AAAA-MM-JJ) : création de l'opportunité
- date_cloture_initiale (date AAAA-MM-JJ) : première date de clôture prévue
- date_cloture_prevue (date AAAA-MM-JJ) : date de clôture prévue actuelle
- date_cloture (date AAAA-MM-JJ) : date de clôture réelle, vide si en cours
- etape (texte) : découverte, proposition, négociation, gagnée, perdue
- resultat (texte) : gagnée, perdue ou en cours
- commercial (texte) : propriétaire de l'affaire (prénom et nom inventés)

**leads.csv** : export des leads du CRM.
- id_lead (texte) : identifiant du lead
- date (date AAAA-MM-JJ) : date de création 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

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)
- Durée par étape : médiane des jours passés dans chaque étape.
- Cycle de vente : médiane des jours entre création de l'opportunité et signature.
- Affaires bloquées : opportunités dans la même étape depuis plus de deux fois la médiane.

## À l'écran
- Vignettes : un indicateur par vignette.
- Graphiques et tableaux : durée médiane par étape ; liste des affaires bloquées ; cycle par type d'offre.
- Filtres : période, commercial, offre.

## Précisions de calcul
- Quatre segments : lead vers MQL (dates du fichier des leads), MQL vers SQL, SQL vers opportunité (date_sql du lead d'origine, puis date_creation), opportunité vers clôture.
- Affaire bloquée : ouverte depuis plus de deux fois le cycle médian à la dernière date du fichier, ou dont la date de clôture prévue a été repoussée (date_cloture_prevue après date_cloture_initiale).

## Contrôles à faire avant d'afficher
- Médianes sur moins de 10 affaires signalées.
- Dates de passage incohérentes.
- Lignes illisibles écartées : leur nombre.

## Ce que le tableau ne dit pas (à afficher en pied de page)
La cause d'un blocage.

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