Budget marketing et coût d'acquisition client

# Tableau de bord « Budget marketing et coût d'acquisition client »

Tu es analyste marketing et développeur. Produis un tableau de bord HTML interactif qui répond à la question : **Où en est la dépense par poste, et combien coûte un nouveau client ?** 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
**budget_marketing.csv** : budget marketing prévu et réel, par mois et par poste.
- mois (mois AAAA-MM) : mois
- poste (texte) : poste de dépense, hors salaires
- prevu_eur (nombre entier) : budget prévu
- 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
- equipe (texte) : marketing, ventes, avant-vente
- role (texte) : rôle
- 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)

**opportunites.csv** : export des opportunités du CRM.
- id_opportunite (texte) : identifiant de l'opportunité
- 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
- mrr_eur (nombre entier) : revenu mensuel récurrent d'un abonnement, 0 pour les services
- 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

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

**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)
- Prévu, réel, écart : budget prévu et dépense engagée par mois et par poste ; écart en montant et en pourcentage.
- Coût d'acquisition client (CAC) : dépenses marketing et commerciales de la période (publicité, outils, contenus, événements, prestataires, et salaires des équipes marketing et ventes si vous les incluez) divisées par les nouveaux clients signés sur la période ; périmètre des coûts affiché à côté du chiffre.
- CAC par type de client : le même calcul séparé pour les clients de services et les abonnés, et par segment.
- Délai de récupération (abonnés) : CAC divisé par la marge brute mensuelle d'un nouvel abonné, c'est-à-dire son revenu mensuel moyen multiplié par le taux de marge brute que vous déclarez ; en mois.

## À l'écran
- Vignettes : un indicateur par vignette.
- Graphiques et tableaux : prévu et réel par poste ; cumul depuis janvier ; CAC par trimestre, avec et sans salaires ; délai de récupération par vague d'abonnés.
- Filtres : période, poste, type de client, segment.

## Précisions de calcul
- 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 fichier, ou mission commencée avant le début des données).
- Coût d'acquisition client : (dépenses réelles du budget + coût chargé × part acquisition + primes chargées, si les salaires sont inclus) divisé par les nouveaux clients ; rien sous 3 nouveaux clients. Salaires inclus : toutes les lignes de couts_equipe, avant-vente comprise (elle fait partie de l'effort commercial), chacune au prorata de sa part_acquisition_pct.
- Options sur la page : salaires inclus ou exclus (inclus par défaut) ; part des coûts attribuée à l'abonnement (50 % par défaut) pour le coût par type de client ; marge brute des abonnés (60 % par défaut) pour le délai de récupération = coût d'acquisition des abonnés divisé par (revenu mensuel moyen d'un nouvel abonné × marge).

## Contrôles à faire avant d'afficher
- Postes réels absents du prévu.
- Mois sans saisie.
- Seuls les nouveaux clients comptent (renouvellements et extensions exclus).
- Coûts et clients sur la même période, ou décalés du cycle de vente médian (jours entre création et signature des affaires gagnées), au choix et affiché.
- CAC non affiché sous 3 nouveaux clients.
- Marge brute non déclarée : délai de récupération non calculé.
- Lignes illisibles écartées : leur nombre.

## Ce que le tableau ne dit pas (à afficher en pied de page)
Ce qu'un client rapporte dans la durée.

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