Gemini m'a donné une clé, j'explique rapidement :
<div class="bloc_haut">
<h1>Titre</h1>
<div><img class="picture" /></div>
</div>
div.bloc_haut {grid-template-columns: auto minmax(0, 32rem)}
div:has(> img.picture) {grid-column: 1; grid-row: 1}
h1 {grid-column: 2; grid-row: 1; margin-top: -0.4em}
Gemini explique :
Le coupable est le conteneur anonyme généré par votre cellule d'image : <div><img class="picture" ... /></div>.
En faisant cela, la structure de votre grille (calculée par le navigateur) devient :
• Colonne 1 (auto) : Contient uniquement le div de l'image.
• Colonne 2 (minmax(0, 1fr)) : Contient le h1, le <p> et la <table>.
Voici le piège : Le div qui entoure l'image n'a aucune règle de largeur explicite. Firefox calcule la largeur de la première colonne (auto) en se basant sur la taille physique de l'image (ici width="280").
Dans les versions précédentes (et Chrome), le reste de l'espace écran restant était équitablement attribué à la colonne 2 (1fr). Mais suite à un correctif rigide de conformité spécss dans Firefox, lorsque des conteneurs Grid imbriqués ou des éléments frères comme une <table> (qui possède ses propres règles de calcul de cellules) se trouvent dans une piste flexible sous l'influence d'un conteneur anonyme, Firefox considère que le contenu de la colonne 2 peut s'effondrer intégralement à 0. Au lieu de distribuer l'espace, il réduit la colonne 2 au minimum absolu, forçant le h1 à s'écraser (parfois sur un seul mot par ligne).
La Solution définitive
Pour corriger ce comportement sans casser votre mise en page, il faut définir explicitement la largeur de la première colonne au lieu de la laisser sur auto. Comme votre image fait 280px de large, remplacez simplement auto par 280px (ou 17.5rem).
Pourquoi cela résout immédiatement le problème ?
En écrivant 280px au lieu de auto, vous court-circuitez l'algorithme d'estimation dynamique de Firefox. Le navigateur sait instantanément que la colonne 1 prend exactement 280 pixels, et il attribue sans aucune hésitation 100% du reste de l'espace disponible à la colonne 2. Votre h1 va immédiatement se détendre et occuper toute la largeur disponible de l'écran, s'alignant sur le comportement de Chrome.
