Document de référence

Charte graphique Miss Bons Plans

Tout le design du site tient dans un seul fichier : /assets/css/mbp.css. Cette page en montre le contenu.

1. Territoire de marque

Positionnement : le bon plan malin, pas le bon plan racoleur. Le ton est celui d'une copine bien informée : chaleureux, direct, jamais culpabilisant, jamais condescendant. On explique le mécanisme avant de donner l'astuce.

Ce que la marque est

Féminine et joyeuse, sans être infantilisante
Précise, chiffrée, vérifiable
Honnête sur les limites d'une astuce

Ce que la marque n'est pas

Un catalogue de promotions clignotantes
Un discours d'injonction (« il faut », « vous devez »)
Un site qui promet de l'argent facile

2. Palette

Rose comme couleur principale, lilas et pêche en soutien, neutres teintés pour le texte. Trois couleurs sémantiques pour les encadrés.

--rose
#e83e8c
Principale : titres, liens, boutons

--rose-fonce
#c22a70
Survol et contrastes forts

--rose-clair
#ff9ec9
Accents décoratifs

--rose-poudre
#ffe4f2
Fonds de blocs doux

--lilas
#b06ae8
Secondaire : dégradés, badges

--lilas-clair
#f3e8ff
Fonds secondaires

--peche
#ffb3a7
Tertiaire : chaleur, promotions

--peche-clair
#fff0ec
Fonds tertiaires

--encre
#1e1420
Texte principal

--gris-fonce
#4a4550
Texte secondaire

--gris
#7a7480
Métadonnées

--brume
#faf6fb
Fond de page

--succes
#17a67c
Validation, astuces

--alerte
#e0483d
Avertissements

--info
#3b7dd8
Informations neutres

Règle de contraste

Le rose --rose sur blanc est réservé aux titres, liens et gros textes. Pour du texte courant, on utilise --encre ou --gris-fonce : la lisibilité prime toujours sur la couleur.

3. Typographie

Poppins 800 — titres

Poppins 700 — sous-titres et composants

Inter 400 — texte courant, interligne 1,72 pour un confort de lecture long format.

Inter 400 petit — métadonnées, légendes, mentions.

Échelle : --t-xs .78 · --t-sm .9 · --t-base 1.05 · --t-lg 1.2 · --t-xl 1.45 · --t-2xl 1.9 · --t-3xl et --t-4xl fluides.

4. Espacements et rayons

Échelle de 4 px : --e-1 (4 px) à --e-9 (96 px). Rayons : --r-sm 8 px, --r-md 14 px, --r-lg 22 px, --r-pilule pour les boutons et badges.

5. Composants

Boutons

Bouton principal Bouton secondaire Petit bouton

Badges

🏷️ Mode & shopping 💄 Beauté 🛒 Courses ✓ Vérifié

Cartes

💸

Encadrés éditoriaux

Encadré neutre

Pour une définition, un rappel de méthode, un calcul.

Encadré astuce

Vert. Pour le conseil actionnable, celui que la lectrice retient.

Encadré attention

Rouge. Pour un piège, une arnaque, un risque juridique ou financier.

Encadré information

Bleu. Pour un rappel de droit ou une donnée officielle.

Listes

Ce qu'il faut faire
Ce qui fonctionne

Ce qu'il faut éviter
Ce qui ne marche pas

Tableau

Colonne	Valeur	Commentaire
Ligne 1	10 %	Alternance de fond automatique
Ligne 2	25 %	Survol rose poudré
Ligne 3	40 %	Défilement horizontal sur mobile

FAQ dépliable

Une question fréquente

La réponse, courte, qui alimente aussi les données structurées FAQPage.

Une autre question

Deux à quatre questions par article, pas plus.

6. Règles d'écriture

Titres : un bénéfice concret, jamais de titre mystère. « Coiffeur pas cher : payer 2 à 3 fois moins » plutôt que « Le secret des coiffeurs ».
Vouvoiement systématique, ton chaleureux.
Chiffres : espace insécable avant %, € et les deux-points.
Un H2 tous les 250 à 350 mots, pour la lecture et pour le référencement.
Chaque article se termine par un encadré astuce ou attention, et une FAQ.
Trois liens internes minimum par article, en plus du bloc « à lire aussi » automatique.

7. Mesure d'audience

Les deux traceurs du site sont centralisés et n'ont plus besoin d'être copiés à la main :

Traceur	Identifiant	Emplacement
Google Analytics 4	`G-0HYLQH8SLW`	`/includes/head.php`, appelé par toutes les pages
Mouchard maison	`s=missbonsplans`	`/footer.php`, inclus par toutes les pages

Le mouchard envoie un pixel vers https://oceanideservices.com/collecte.php avec le chemin de la page et le référent. Les identifiants se modifient dans /includes/config.php, une seule fois.