Système de composition responsive

Problème

Des sections correctes isolément peuvent former une page incohérente lorsque chacune utilise ses propres marges, largeurs, ratios et espacements.

Définir une géométrie commune avant de styliser les composants.

Conteneur fluide avec largeur maximale et marges latérales cohérentes.
Grille de 12 colonnes sur grand écran ; réduction naturelle à 6 puis 4 colonnes selon le contenu.
Gouttières constantes par breakpoint.
Échelle d'espacement basée sur 4 ou 8 px, avec exceptions documentées.
Cinq niveaux typographiques maximum par page.
Largeur de lecture généralement comprise entre 55 et 75 caractères.
Alignement des titres, textes, médias, cartes et CTA sur des axes partagés.

Concevoir depuis la largeur minimale utile, sans débordement horizontal dès 320 px.
Choisir les breakpoints lorsque le contenu casse, pas selon une liste d'appareils.
Ne pas imposer 100vh à chaque section ; la hauteur répond au contenu.
Prévoir mobile, tablette, portable, desktop et zoom navigateur à 200 %.
Conserver l'ordre logique du DOM même si la composition visuelle change.

Un ratio découle du média réel : OG/site autour de 1,91:1 ; icône d'application 1:1.
Une grille uniforme convient à des éléments équivalents ; sinon créer une hiérarchie intentionnelle.
La proximité exprime les groupes ; l'espacement exprime les changements de sujet.
Éviter les cartes comme conteneur par défaut : utiliser aussi espace, séparateurs et arrière-plans de section.

Superposer la grille et vérifier les axes communs.
Examiner la page entière en capture longue, puis chaque viewport séparément.
Vérifier qu'aucun bloc ne semble flotter indépendamment.
Vérifier la densité : ni grandes zones vides accidentelles, ni informations compactées.

Une rupture de grille ou une asymétrie est valide si elle sert clairement la hiérarchie et reste maîtrisée aux autres largeurs.