Les mises en page qui sortent de la grille sage. Trois regles : on ne casse la grille qu'apres l'avoir posee (une asymetrie n'existe que par rapport a une regularite), un seul geste fort par page, et tout revient a une colonne sous 700 px. L'expressivite est un luxe de grand ecran, jamais au prix de la lisibilite sur telephone.
grid-cols-12 avec des col-span differents a chaque ligne
Le remplacement d'une chaudiere fioul par une pompe a chaleur reste l'operation la plus subventionnee du parc residentiel francais.
Maison de 112 m2 a Neuilly-sur-Marne, chantier d'aout 2026
Le montant de MaPrimeRenov depend du revenu fiscal de reference du foyer et de la zone climatique du logement, ce qui explique des ecarts importants d'un dossier a l'autre.
Debordement volontaire
Un element sort de la colonne de texte et va jusqu'au bord de l'ecran. Utilise une fois dans un article, il marque un changement de registre mieux qu'un intertitre.
Voir le codeMasquer le code
<div class="ex-deborde">
<p>Le remplacement d'une chaudiere fioul par une pompe a chaleur reste l'operation la plus subventionnee du parc residentiel francais.</p>
<figure class="ex-plein"><div class="ex-plein__img"></div><figcaption>Maison de 112 m2 a Neuilly-sur-Marne, chantier d'aout 2026</figcaption></figure>
<p>Le montant de MaPrimeRenov depend du revenu fiscal de reference du foyer et de la zone climatique du logement, ce qui explique des ecarts importants d'un dossier a l'autre.</p>
</div>
.ex-deborde { max-width: 62ch; margin: 0 auto; overflow-x: clip; }
.ex-deborde p { margin: 0 0 var(--sp-5); font-size: var(--fs-lg); line-height: 1.7; color: var(--c-text-soft); }
.ex-plein {
margin: 0 0 var(--sp-5);
/* Sort de la colonne de texte sans dependre de la largeur de la fenetre :
100cqw quand un conteneur est declare, sinon un debordement calcule. */
width: calc(100% + var(--sp-12));
margin-left: calc(var(--sp-12) / -2);
}
.ex-plein__img {
aspect-ratio: 21 / 9;
border-radius: var(--r-md);
background: linear-gradient(140deg, #3f5a7a, #8a6a4a 55%, #c9a06a);
}
.ex-plein figcaption { margin-top: var(--sp-2); font-size: var(--fs-xs); color: var(--c-text-muted); text-align: center; }
@media (max-width: 700px) { .ex-plein { width: 100%; margin-left: 0; } }
w-screen relative left-1/2 -translate-x-1/2 sur un enfant de conteneur etroit
1 240 installations
depuis 2009 en Ile-de-France, par nos propres equipes, avec une note moyenne de 4,8 sur 312 avis.
Superposition
Deux blocs qui se chevauchent au lieu de se suivre. Le recouvrement cree une profondeur qu'aucune ombre ne remplace, et economise de la hauteur.
Voir le codeMasquer le code
<div class="ex-superpose">
<div class="ex-superpose__img"></div>
<div class="ex-superpose__carte">
<b>1 240 installations</b>
<p>depuis 2009 en Ile-de-France, par nos propres equipes, avec une note moyenne de 4,8 sur 312 avis.</p>
<button class="btn btn--plein">Voir nos realisations</button>
</div>
</div>
grid-areas superposees, la carte demarre avant la fin de l'image
Pompe a chaleurAir/eau, air/air, de 6 a 16 kW
IsolationCombles, murs
Chauffe-eauThermodynamique
Entretien annuelContrat avec rappel automatique et rapport apres visite
DepannageSous 2 h
Bento
Une grille de tuiles de tailles inegales. Le piege est d'en faire un damier : il faut une tuile nettement dominante, sinon toutes se valent et aucune ne porte le message.
Voir le codeMasquer le code
<div class="ex-bento">
<div class="ex-t ex-t--maitre" style="--t:#1f3350"><b>Pompe a chaleur</b><span>Air/eau, air/air, de 6 a 16 kW</span></div>
<div class="ex-t" style="--t:#2f5a45"><b>Isolation</b><span>Combles, murs</span></div>
<div class="ex-t" style="--t:#6b4a2a"><b>Chauffe-eau</b><span>Thermodynamique</span></div>
<div class="ex-t ex-t--large" style="--t:#4a3560"><b>Entretien annuel</b><span>Contrat avec rappel automatique et rapport apres visite</span></div>
<div class="ex-t" style="--t:#7a3f4a"><b>Depannage</b><span>Sous 2 h</span></div>
</div>
grid-cols-4 grid-rows-2 avec une tuile en col-span-2 row-span-2
Particuliers
Remplacement de chaudiere, pompe a chaleur, isolation. Aides deduites du devis.
Demander un devis
Professionnels
Contrats d'entretien de parc, interventions programmees, facturation mensuelle.
Nous contacter
Ecran partage
Deux moities autonomes, chacune avec son fond. Sert d'ouverture quand deux publics coexistent : le particulier et le professionnel, l'achat et la location.
Voir le codeMasquer le code
<div class="ex-partage">
<div class="ex-partage__c" style="--t:#1f3350">
<b>Particuliers</b>
<p>Remplacement de chaudiere, pompe a chaleur, isolation. Aides deduites du devis.</p>
<span class="btn btn--lg-verre">Demander un devis</span>
</div>
<div class="ex-partage__c" style="--t:#6b4a2a">
<b>Professionnels</b>
<p>Contrats d'entretien de parc, interventions programmees, facturation mensuelle.</p>
<span class="btn btn--lg-verre">Nous contacter</span>
</div>
</div>
clip-path: inset(0 calc(100% - var(--x)) 0 0) pilote par un input range
FacadeComblesLocal techniqueUnite exterieure
Galerie en desordre controle
Des vignettes legerement pivotees et decalees, comme des tirages poses sur une table. Le desordre est regle au degre pres, jamais aleatoire a l'affichage.
Depannage 7 jours sur 7 en Seine-Saint-Denis, Val-de-Marne et est parisien.
Section en diagonale
Une bande inclinee qui traverse la page. Le contenu, lui, reste droit : c'est le fond qui penche, jamais le texte.
Voir le codeMasquer le code
<div class="ex-diag">
<div class="ex-diag__fond" aria-hidden="true"></div>
<div class="ex-diag__contenu">
<b>Intervention sous 2 heures</b>
<p>Depannage 7 jours sur 7 en Seine-Saint-Denis, Val-de-Marne et est parisien.</p>
</div>
</div>
le fond en skew-y-[-3deg] scale-110, le contenu remis droit
Faites defiler
Le bloc suivant garde son fond immobile.
Depuis 2009
1 240 installations en Ile-de-France
Et la page reprend son cours.
Fond fixe au defilement
Le texte glisse par-dessus une image qui reste immobile. Effet ancien mais qui tient, a condition de ne l'employer qu'une fois et de garder le voile suffisant.
Voir le codeMasquer le code
<div class="mv-scene mv-scene--haute" data-mv-scene>
<p class="mv-indice">Faites defiler</p>
<div class="mv-piste">
<p class="mv-note">Le bloc suivant garde son fond immobile.</p>
<div class="ex-fixe">
<div class="ex-fixe__contenu"><b>Depuis 2009</b><p>1 240 installations en Ile-de-France</p></div>
</div>
<p class="mv-note">Et la page reprend son cours.</p>
</div>
</div>