# 10. Personnalisation du design, nouveaux blocs, pages légales et site de recettes
## 10.1 Polices et typographie (onglet Paramètres → Identité visuelle)
- **27 polices** au choix : 4 polices système (aucun téléchargement) et 23 polices web (Inter, Poppins, Montserrat, Lato, Open Sans, Nunito, Raleway, Work Sans, Outfit, Space Grotesk, DM Sans, Rubik, Playfair Display, Merriweather, Lora, DM Serif Display, Fraunces, Source Serif 4, Caveat, Pacifico, Cairo, Tajawal, Noto Sans Arabic).
- Choix séparés pour la **police du texte** et la **police des titres** (vide = celle du thème), plus la **taille du texte** du site (compacte, normale, grande). Un aperçu en direct montre le rendu.
- Les polices web sont servies par **Bunny Fonts** (copie européenne de Google Fonts, sans cookie et sans transmission de l'adresse IP des visiteurs à Google). Elles ne sont chargées que si le site ou un bloc les utilise : une seule feuille de style par page, avec `font-display: swap`.
- Code : `app/Support/Fonts.php` (catalogue), `themes/default/layout.blade.php` (chargement).
## 10.2 Design de chaque bloc (Pages → bloc → « Apparence »)
L'apparence de chaque bloc est organisée en 5 onglets. Le bouton « Réinitialiser » remet les valeurs par défaut.
| Onglet | Options |
|---|---|
| Fond | aucun, teinte, couleur principale ou secondaire, sombre, couleur libre ; image de fond avec voile (sombre, clair, couleur principale ou aucun), intensité et cadrage |
| Texte | police du texte et des titres, taille du texte et des titres, couleur du texte et des titres (vide = automatique selon le fond), alignement |
| Espacements | marge intérieure (préréglage ou haut et bas séparés, de « aucune » à « très grande »), marges extérieures haut et bas |
| Disposition | largeur du contenu (étroite à pleine largeur), hauteur minimale (40 % à plein écran), bloc encadré à coins arrondis, ombre, masquer sur mobile ou sur ordinateur |
| Avancé | ancre (#lien), animation d'apparition |
Le contraste du texte suit automatiquement le fond et le voile de l'image. Code : `Blocks::STYLE`, `blocks/render.blade.php` et la section « Per-block design options » de `site.css`.
## 10.3 Nouveaux blocs (33 au total)
Colonnes (2 à 4, répartition 2/3–1/3), étapes ou frise chronologique, citation, tableau (lignes séparées par `|`, défilement sur mobile), liste à puces illustrée, encadré (information, conseil, succès, attention), accordéon, onglets (accessibles au clavier, lisibles sans JavaScript), équipe, logos, carte OpenStreetMap (chargée seulement au clic du visiteur), compte à rebours (calculé dans le navigateur, compatible avec le cache des pages), recettes (module recettes).
Les emplacements publicitaires ne sont jamais placés à côté d'un compte à rebours, d'onglets ou d'une carte, comme pour les bandeaux, boutons, tarifs et formulaires.
## 10.4 Page d'accueil (onglet « Accueil & légal »)
Choisissez la page affichée à l'adresse `/` parmi toutes les pages du site, ou gardez l'accueil automatique du thème. Une page non publiée n'est pas utilisée tant qu'elle n'est pas en ligne. L'ancienne adresse de la page choisie redirige vers l'accueil (301). La case « Utiliser comme page d'accueil » de l'éditeur de page reste disponible.
## 10.5 Mentions légales et plan du site (tous les sites)
Le pied de page de **tous les sites et de tous les thèmes** contient les liens « Mentions légales » et « Plan du site » (adresses traduites : `/mentions-legales`, `/en/legal-notice`, `/de/impressum`… et `/plan-du-site`, `/en/sitemap`…). Ces deux pages n'affichent pas de publicité et figurent dans sitemap.xml.
- **Mentions légales** : générées à partir des informations saisies (éditeur, forme juridique, capital, adresse, immatriculation, TVA, directeur de la publication, contact, hébergeur) et d'un texte complémentaire libre (éditeur visuel). Seules les informations remplies sont affichées, et les mentions requises encore vides sont signalées dans le back-office. Vous pouvez aussi choisir une page du site rédigée librement : elle est alors servie à l'adresse des mentions légales. Pour les sites existants qui ont déjà publié la page « mentions-legales », celle-ci est reprise automatiquement.
- **Plan du site** : liste automatique des rubriques et des contenus publiés (pages, catégories, articles, outils, jeux, quiz, recettes, boutique, films, informations), limitée à 150 éléments par rubrique avec un lien « Voir tout ». Vous pouvez modifier le texte d'introduction, masquer des rubriques et afficher ou non le lien vers sitemap.xml.
## 10.6 Site de recettes (module « recipes », thème « kitchen ») : Mijoté
- **Recettes** : catégorie, accroche, introduction (éditeur visuel), photo principale et galerie, temps de préparation, de cuisson et de repos (le total est calculé), portions et unité, difficulté, budget, régimes (végétarien, végan, sans gluten, sans lactose), cuisine d'origine, ingrédients (groupes, quantité, unité, précision), étapes (durée et photo facultatives), astuces, mots-clés, statut et programmation, mise à la une, référencement, désactivation des annonces.
- **Back-office** (onglet Recettes) : liste avec recherche et filtres, éditeur d'ingrédients et d'étapes (ajout, réordonnancement, saisie rapide par collage d'une liste « 250 g farine, tamisée »), catégories, duplication.
- **Site public** :
- accueil avec recherche, catégories, recettes à la une, nouveautés, recherche par ingrédient et recettes prêtes en 30 minutes ;
- liste filtrable par mots-clés, ingrédients (plusieurs, séparés par des virgules), catégorie, temps total (15, 30 ou 60 min), difficulté, régime, avec tri (récentes, rapides, consultées) ;
- les pages filtrées ne sont pas indexées, les catégories le sont ;
- page recette avec repères de temps, liste d'ingrédients à cocher, **portions ajustables** (quantités recalculées, fractions ½ ¼ ¾), étapes numérotées avec ancres, astuces, galerie, impression propre, recettes de la même catégorie.
- **Données structurées** `Recipe` : temps, portions, ingrédients, étapes, catégorie, cuisine, régimes. Aucune note ni valeur nutritionnelle n'est inventée.
- **Annonces** : une après l'introduction, une en fin de recette et une dans la liste après la 6ᵉ recette. Jamais à côté des boutons de portions ou des filtres.
- Traductions : interface en 5 langues ; les recettes se traduisent comme les autres contenus (noms d'ingrédients, précisions et étapes, sans toucher aux quantités).
- **Contenu de démonstration** : 14 recettes classiques rédigées pour le site (`database/seeders/data/recipes.php`) dans 6 catégories. Les images sont des **illustrations générées** : remplacez-les par vos propres photos avant la mise en ligne. Relisez aussi les mentions de régime.
## 10.7 Code personnalisé par site (onglet Paramètres → « Code personnalisé »)
Quatre zones, réservées aux gestionnaires de sites (droit « sites.manage ») :
- **CSS personnalisé**, ajouté après la feuille de style du thème. Il peut utiliser les variables `--brand`, `--accent`, `--surface`, `--ink`, `--font`, `--font-heading`, `--radius-card` et `--radius-btn`.
- **Code dans l'en-tête**, en fin de `` : scripts, balises ``, ``.
- **Code au début du ``**, par exemple la balise `