LD Consulting — Backgrounds

Backgrounds des couches

Les backgrounds de couche s’appliquent sur .app-layer. Ils définissent le contexte visuel pleine largeur avant le contenu, la grille et les modules.

Couches utiles

Ces variantes sont les choix standards pour structurer une page. Chaque aperçu conserve la même structure : couche, conteneur, grille, module, puis contenu.

Début de page

.app-layer.is-page-start

Zone d’ouverture

Fond visuel de début de page, adapté aux premiers blocs.

Fond de page

.app-layer.is-background

Zone standard

Fond principal piloté par --app-page-background.

Surface

.app-layer.is-surface

Zone séparée

Surface franche pour isoler une bande de contenu.

Primaire doux

.app-layer.is-primary-soft

Mise en avant légère

Teinte issue du primaire, utile pour rythmer une page sans effet visuel fort.

Neutre doux

.app-layer.is-simple-soft

Transition neutre

Surface douce neutre, à préférer quand la couleur primaire n’a pas de rôle sémantique.

Backgrounds visuels

Ces variantes utilisent une image et un overlay. Elles sont présentées avec une structure identique pour comparer le comportement réel de la couche.

Visuel avec contenu sur surface

.app-layer.has-visual-background

Contenu lisible sur surface

L’image pose le contexte, le contenu reste porté par une surface claire.

Visuel inversé

.app-layer.has-visual-background.is-dynamic-inverted-background

Contenu clair sur image

Rendu de référence utilisé par la couche Expertises du site racine.

Règles d’usage

Appliquer la variante sur .app-layer, jamais sur .app-page-content.
Conserver .app-page-content comme enfant direct de la couche.
Utiliser is-background pour le fond courant d’une page et is-surface pour créer une rupture visible.
Utiliser la variante inversée uniquement quand le contraste texte/image a été vérifié.