Référence interne

Charte graphique JOA

Toutes les briques visuelles du site, telles qu'elles s'affichent réellement. Cette page n'est pas référencée par Google.

Couleurs

Les couleurs sont définies dans le code (JOA\Core\Palette) et ne sont pas modifiables depuis le tableau de bord : c'est ce qui garantit qu'aucune teinte hors charte n'apparaît sur le site. Le beige est un fond, jamais une couleur de texte sur crème — il n'y serait pas lisible.

Prune (couleur du logo)--joa-prune#8D2B4C
Prune foncé (survol)--joa-prune-fonce#6E1F3A
Prune clair--joa-prune-clair#B87A92
Beige--joa-beige#ECCBB6
Beige foncé (survol)--joa-beige-fonce#DDB79E
Beige clair (sur fond prune)--joa-beige-clair#F3E3D5
Crème clair (fond de page)--joa-creme-clair#FDF6F1
Crème rosé (fond alterné)--joa-creme-rose#F8E9E1
Rose poudré (bordures)--joa-rose-poudre#F4E1DA
Blanc chaud (cartes)--joa-blanc-chaud#FFFDFB
Encre (texte)--joa-encre#392624
Encre douce (texte secondaire)--joa-encre-douce#7A5F58
Blanc pur--joa-blanc#FFFFFF

Typographie

Le style d'un titre est découplé de sa balise : h1 et .h1 sont identiques. Une page peut donc respecter la hiérarchie attendue par Google tout en gardant la composition voulue.

Le meilleur de la nature, choisi avec cœur .h1

Le meilleur de la nature, choisi avec cœur .h2

Le meilleur de la nature, choisi avec cœur .h3

Le meilleur de la nature, choisi avec cœur .h4

Le meilleur de la nature, choisi avec cœur .h5

Le meilleur de la nature, choisi avec cœur .h6

Suptitre en petites capitales

Chapô : la phrase d'introduction d'une section, un peu plus grande que le texte courant et volontairement plus claire.

Signature en police display

Texte courant. Sélection rigoureuse, ingrédients bruts, expédition soignée : les phrases du site restent simples, concrètes et sans promesse de santé.

Balise et apparence combinées

Balise h2, apparence h4

Balise p, apparence h3

Boutons

Principal Secondaire Contour

Petit Désactivé

Contour clair (sur prune)Beige (sur prune)

Badges & étiquettes

BioNouveauté

Les badges sont posés automatiquement : « Promotion » quand un prix barré existe, « Nouveauté » pendant trente jours après la mise en ligne, « Bio » selon la catégorie du produit.

Icônes

feuille
ruche
goutte
camion
cadenas
coeur
bouclier
fleur
cadeau
etoile
france
recyclage
telephone
enveloppe
horloge
panier
compte
recherche
menu
croix
chevron
fleche
check
plus
moins
instagram
facebook
tiktok
pinterest
youtube
whatsapp

Formulaires

Champs

Champ texte

Liste déroulante

Zone de texte

Recherche

Sélecteur de quantité

Composants

Cartes produit

Cartes de rituel

Elixir Royal
- Miel Fortifiant
- Complexe 5 Champignons
- Infusion bienfaisante de l'Apiculteur
- Baume de soins des Pyrénées
dès57,31 €~~74,85 €~~- 23 %
Découvrir le rituel
Livraison offerte en point relais avec 1 pack
Elixir de Vitalité
- Miel de Thym Sauvage
- Gummies Shilajit Nigelle
- Votre infusion : Infusion Teranga ou Infusion Panax
dès51,33 €~~69,85 €~~- 27 %
Découvrir le rituel
Livraison offerte en point relais avec 1 pack
Elixir d'Eclat
- Miel d'Aphrodyte
- Gélule Chaga
- Infusion Peau nette
65,07 €~~82,90 €~~- 22 %
Découvrir le rituel
Livraison offerte en point relais avec 1 pack

Avis clientes

L'huile de nigelle a une odeur forte mais authentique, exactement comme celle que ma grand-mère utilisait. Le flacon en verre et l'envoi soigné font toute la différence.

Amina B. — cliente JOA
Le savon à la nigelle a changé ma routine du visage. Texture agréable, parfum discret, et une odeur de naturel qui ne trompe pas. Je recommande.

Sofia R. — cliente JOA
Commande arrivée en deux jours, emballage soigné avec un petit mot. On sent une vraie attention portée à chaque colis.

Nadia K. — cliente JOA

Accordéon

Bénéfices

Le premier panneau est ouvert par défaut : un accordéon entièrement replié donne l'impression d'une fiche vide.

Composition

Construit sur des balises natives : il fonctionne sans JavaScript et reste accessible au clavier.

Bande de réassurance

Naturel & sélectionné
Des matières premières choisies une à une.
Expédié de France
Sous 48 h ouvrées, emballage soigné.
Paiement sécurisé
Carte bancaire, chiffrement bancaire.
Conseil attentionné
Une question ? On vous répond vraiment.

État vide

Aucun résultat

Ce bloc s'affiche quand une recherche ou une catégorie ne renvoie rien.

Retour à la boutique

Shortcodes

Ce tableau est produit à partir du code : un shortcode ajouté au thème y apparaît automatiquement, un shortcode retiré en disparaît. La même liste est disponible dans le tableau de bord, sous « JOA → Shortcodes ».

Contenus dynamiques

Shortcode	Ce qu'il affiche
`[joa_annee]`	Affiche l'année en cours. Pratique dans une mention de copyright, qui ne se périme alors jamais.
`[joa_coordonnees]`	Affiche le bloc de coordonnées complet : téléphone, e-mail, adresse et horaires, tels qu'ils sont réglés dans « Réglages JOA → Contact ».
`[joa_reseaux]`	Affiche les icônes des réseaux sociaux renseignés.

Mise en page

Shortcode	Ce qu'il affiche
`[joa_avis nombre="3"]`	Affiche les avis de clientes.
`[joa_bouton texte="Découvrir la boutique" url="/boutique" style="primary"]`	Insère un bouton aux couleurs du site.
`[joa_contact_formulaire]`	Insère le formulaire de contact. Les messages arrivent sur l'adresse e-mail réglée dans « Réglages JOA → Contact ».
`[joa_newsletter]`	Insère le bloc d'inscription à l'infolettre.
`[joa_produits source="featured" nombre="4"]`	Affiche une grille de produits.
`[joa_reassurance]`	Affiche la bande d'arguments rassurants réglée dans « Réglages JOA → Réassurance ».
`[joa_rituels nombre="0"]`	Affiche les rituels publiés — les produits de type « pack ».

Réglages du site

Shortcode	Ce qu'il affiche
`[joa_adresse]`	Affiche le réglage « Adresse postale ».
`[joa_baseline]`	Affiche le réglage « Signature ».
`[joa_email]`	Affiche le réglage « Adresse e-mail ».
`[joa_expedition]`	Affiche le réglage « Délai d'expédition ».
`[joa_horaires]`	Affiche le réglage « Horaires / délais de réponse ».
`[joa_livraison_packs]`	Affiche le réglage « Mention de livraison sur les packs ».
`[joa_livraison_unite]`	Affiche le réglage « Mention de livraison sur les produits à l'unité ».
`[joa_marque]`	Affiche le réglage « Nom de la marque ».
`[joa_newsletter_titre]`	Affiche le réglage « Titre ».
`[joa_paiement]`	Affiche le réglage « Moyens de paiement ».
`[joa_retour]`	Affiche le réglage « Politique de retour ».
`[joa_telephone]`	Affiche le réglage « Téléphone ».