Tableau du directeur marketing

# Tableau de bord « Tableau du directeur marketing »

Tu es analyste marketing et développeur. Produis un tableau de bord HTML interactif qui répond à la question : **Où en est-on sur dix indicateurs, avec l'écart à l'objectif ?** 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
- cout_eur (nombre décimal (point)) : coût facturé par la régie, en euros

**leads.csv** : export des leads du CRM.
- date (date AAAA-MM-JJ) : date de création du lead
- date_sql (date AAAA-MM-JJ) : date d'acceptation par les ventes (SQL), vide sinon

**opportunites.csv** : export des opportunités du CRM.
- id_compte (texte) : compte
- type (texte) : services ou abonnement
- 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 (date AAAA-MM-JJ) : date de clôture réelle, vide si en cours
- resultat (texte) : gagnée, perdue ou en cours

**revenu_recurrent.csv** : revenu récurrent mensuel par client abonné.
- mois (mois AAAA-MM) : mois
- id_compte (texte) : client abonné
- cohorte (texte) : trimestre de début, pour les cohortes
- mrr_eur (nombre entier) : revenu mensuel récurrent à la fin du mois

**chiffre_affaires_services.csv** : chiffre d'affaires des services par mois et par mission.
- mois (mois AAAA-MM) : mois
- montant_eur (nombre entier) : chiffre d'affaires reconnu dans le mois

**budget_marketing.csv** : budget marketing prévu et réel, par mois et par poste.
- mois (mois AAAA-MM) : mois
- reel_eur (nombre entier) : dépense réelle

**couts_equipe.csv** : coûts mensuels de l'équipe (salaires chargés, part acquisition, primes).
- mois (mois AAAA-MM) : mois
- cout_mensuel_charge_eur (nombre entier) : salaire brut et charges patronales du mois, hors prime
- part_acquisition_pct (nombre entier) : part du temps consacrée à l'acquisition de clients
- prime_signatures_chargee_eur (nombre entier) : primes chargées (× 1,425)

**missions.csv** : liste des missions.
- id_compte (texte) : client
- date_debut (date AAAA-MM-JJ) : début

**visibilite_ia.csv** : relevés des réponses des assistants IA à votre panel de questions.
- date_releve (date AAAA-MM-JJ) : date du relevé mensuel
- cite (texte) : oui si MarkestrIA est cité dans la réponse

**objectifs.csv** : objectifs trimestriels.
- trimestre (texte) : trimestre
- indicateur (texte) : indicateur visé
- objectif (nombre) : valeur visée ; une part s'écrit entre 0 et 1

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)
- Dépense publicitaire : somme des coûts facturés par les régies sur la période.
- Leads : contacts entrés sur la période, à leur date de création.
- Leads acceptés par les ventes : leads passés au stade accepté par les ventes pendant la période.
- Opportunités créées : opportunités dont la date de création tombe dans la période.
- Signatures : affaires gagnées dont la date de clôture tombe dans la période.
- Montant signé : somme des montants de ces affaires gagnées.
- Revenu mensuel récurrent, fin de période : revenu mensuel des abonnements actifs le dernier mois de la période.
- Revenu des services : chiffre d'affaires des missions de services sur la période.
- Coût d'acquisition client, salaires inclus : dépenses réelles du budget marketing et coûts chargés des équipes (part acquisition et primes) divisés par les nouveaux clients de la période ; rien sous 3 nouveaux clients.
- Taux de citation par les IA : réponses des assistants IA qui citent la marque, divisées par les questions posées.
- Écart à l'objectif : valeur moins objectif, en couleur (vert favorable, rouge défavorable) dès que l'écart dépasse 3 %, seuil modifiable.

## À l'écran
- Vignettes : un indicateur par vignette.
- Graphiques et tableaux : une page, dix vignettes avec tendance ; définitions des dix indicateurs en petit, en pied de page.
- Filtres : période.

## Précisions de calcul
- Dix vignettes, chacune avec sa tendance mensuelle : dépense publicitaire, leads, leads acceptés par les ventes, opportunités créées, signatures, montant signé, revenu mensuel récurrent de fin de période, revenu des services, coût d'acquisition client salaires inclus, taux de citation par les IA.
- Objectifs : fichier des objectifs (indicateurs depense_publicitaire_eur, leads, SQL, opportunites_creees, signatures, montant_signe_eur, mrr_fin_trimestre_eur, revenu_services_eur, cac_complet_eur, taux_citation_ia ; colonne sens « au moins » ou « au plus »). Sur plusieurs trimestres : somme des objectifs, sauf le revenu récurrent (dernier trimestre), le coût d'acquisition et le taux de citation (moyenne). Pas d'objectif si la période ne couvre pas des trimestres entiers.
- Couleur : vert si l'écart à l'objectif est favorable, rouge s'il est défavorable, dès que l'écart dépasse 3 % (seuil modifiable), avec ▲ ou ▼ et le mot « favorable » ou « défavorable ».
- Coût d'acquisition client : (dépenses réelles du budget, tous postes + coût chargé × part acquisition + primes chargées du fichier des coûts de l'équipe) divisé par les nouveaux clients de la période ; nouveau client : compte dont la première affaire gagnée tombe dans la période et qui n'était pas déjà client (abonné d'une vague antérieure au début des données, ou mission commencée avant) ; rien sous 3 nouveaux clients.
- Un fichier non chargé n'empêche pas l'affichage : ses vignettes indiquent « fichier non chargé ».

## Contrôles à faire avant d'afficher
- Indicateur sans objectif affiché sans couleur.
- Période identique pour les dix.
- Lignes illisibles écartées : leur nombre.

## Ce que le tableau ne dit pas (à afficher en pied de page)
Le pourquoi d'un écart : il se cherche dans le détail des données de l'indicateur.

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