diff --git a/noisettes/sommaire/sommaire_modeactualites.html b/noisettes/sommaire/sommaire_modeactualites.html
index 509f5f534ae2186cf27c9eac2cc5b154520c21c3..d7b87588d98bc3fac7ed49baefc2d39604d7001e 100644
--- a/noisettes/sommaire/sommaire_modeactualites.html
+++ b/noisettes/sommaire/sommaire_modeactualites.html
@@ -2,16 +2,17 @@
 <main id="main">
 	<div id="letexte" class="modeactualites">
 
-		[(#REM) 
+		[(#REM)
 				Afficher au dessus des 2 colonnes sur une seule colonne :
 				- Le dernier article ayant le mot clef ZoomSur (comme le mode portail)
 				- À défaut, Le dernier article ayant le mot clef EDITO
 		]
+		<div id="laune">
 		<BOUCLE_ZoomSur(ARTICLES) {titre_mot=ZoomSur}{!par date}{0,(#CONFIG{soyezcreateurs/nombres_zoomsur,1})}{lang}{doublons}>
 		[(#CONFIG{soyezcreateurs_layout/positioncartouchetitre,contenu}|=={contenu}|oui)
 		<h1 class="#EDIT{titre} zoomsur">[(#TITRE)]</h1>
 		]
-		<div class="zoomsur">
+		<div id="zoomsur" class="zoomsur">
 		<div class="infos">[(#INCLURE{fond=noisettes/liste_auteurs,id_article,virgule=1,nodiv=1})][(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})]</div>
 		<div>[<img class="logo_modenews" src="(#LOGO_ARTICLE|image_reduire{48,48}|extraire_attribut{src}|strval|embarque_fichier)" width="[(#LOGO_ARTICLE|image_reduire{48,48}|largeur)]" height="[(#LOGO_ARTICLE|image_reduire{48,48}|hauteur)]" alt="" />]
 		[<div class="[(#CHAPO*|?{#EDIT{chapo},#EDIT{descriptif}}) ]chapo">(#CHAPO|image_reduire{#CONFIG{soyezcreateurs_layout/maxlargeurimage,720},0}|sinon{#DESCRIPTIF})</div>]
@@ -27,7 +28,7 @@
 		[(#CONFIG{soyezcreateurs_layout/positioncartouchetitre,contenu}|=={contenu}|oui)
 		<h1 class="#EDIT{titre} zoomsur">[(#TITRE)]</h1>
 		]
-		<div class="zoomsur">
+		<div id="zoomsur" class="zoomsur">
 		<div class="infos">[(#INCLURE{fond=noisettes/liste_auteurs,id_article,virgule=1,nodiv=1})][(#INCLURE{fond=noisettes/aff_datepublication,id_article,lang})]</div>
 		<div>[<img class="logo_modenews" src="(#LOGO_ARTICLE|image_reduire{48,48}|extraire_attribut{src}|strval|embarque_fichier)" width="[(#LOGO_ARTICLE|image_reduire{48,48}|largeur)]" height="[(#LOGO_ARTICLE|image_reduire{48,48}|hauteur)]" alt="" />]
 		[<div class="[(#CHAPO*|?{#EDIT{chapo},#EDIT{descriptif}}) ]chapo">(#CHAPO|image_reduire{#CONFIG{soyezcreateurs_layout/maxlargeurimage,720},0}|sinon{#DESCRIPTIF})</div>]
@@ -40,7 +41,7 @@
 		</div>
 		</BOUCLE_ZoomSurEDITO>
 		<//B_ZoomSur>
-	
+
 		[(#REM) Les dernières brèves ]
 		<B_Actualites>
 		<div class="fond actualites">
@@ -52,7 +53,8 @@
 		</ul>
 		</div>
 		</B_Actualites>
-	
+		</div><!-- /laune -->
+
 		<div id="col1">
 			<B_articles_recentsAlaUne>
 			<div class="alaune">
@@ -64,7 +66,7 @@
 			</BOUCLE_articles_recentsAlaUne>
 			</div>
 			</B_articles_recentsAlaUne>
-			
+
 #SET{LargeurContaineur,(#CONFIG{soyezcreateurs_layout/largeurconteneur,960})}
 #SET{LargeurMenuGauche,(#CONFIG{soyezcreateurs_layout/largeurmenugauche,180})}
 #SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
@@ -87,7 +89,7 @@
 		</div><!-- /col1 -->
 		<div id="col2">
 			[(#PLUGIN{AGENDA}|oui)[(#CONFIG{soyezcreateurs/homeagenda,on}|=={on}|oui)#INCLURE{fond=noisettes/agenda/agenda_sommaire_modeactualites}]]
-			
+
 			<BOUCLE_Secteurs_Exclus(RUBRIQUES){titre_mot=SecteurPasDansQuoiDeNeuf}><BOUCLE_Articles_Secteurs_Exclus(ARTICLES){id_secteur}{doublons} /></BOUCLE_Secteurs_Exclus>
 			<BOUCLE_Rubriques_Exclues(RUBRIQUES){titre_mot=PasDansQuoiDeNeuf}><BOUCLE_Articles_Exclus(ARTICLES){id_rubrique}{doublons}{lang} /></BOUCLE_Rubriques_Exclues>
 			<BOUCLE_exclus(ARTICLES){titre_mot=PasDansQuoiDeNeuf}{doublons} />
@@ -103,7 +105,7 @@
 			</div>
 			</B_articles_QuoideNeuf>
 		</div><!-- /col2 -->
-		
+
 		[(#REM) Liens des forums ]
 		<B_forums_liens>
 		<div class="fond">
@@ -119,4 +121,4 @@
 	</div><!-- Fin de LeTexte -->
 </main>
 </div><!-- Fin de .texte -->
-#FILTRE{mini_html}
\ No newline at end of file
+#FILTRE{mini_html}
diff --git a/stylessoyezcreateurs.css.html b/stylessoyezcreateurs.css.html
index 908e0d7d8638596858ab10d17bbdb8efed0706c3..7c45412e22e98df76b9e0567fd1e3f1ece480970 100644
--- a/stylessoyezcreateurs.css.html
+++ b/stylessoyezcreateurs.css.html
@@ -1268,9 +1268,21 @@ ul.alaune li { list-style-image: url([(#CHEMIN{images/star.png}|embarque_fichier
 .alaune dd p { margin-bottom: 0; margin-top: 0; }
 
 /*************** HOME - MODE Actualités */
-.modeactualites #col1 { width:50%; float:left;}
-.modeactualites #col2 { margin-left:5%; width:45%; float:left; }
+@media screen and (min-width: 768px) {
+	#letexte.modeactualites {
+		display: grid;
+		grid-template-areas:
+			"laune laune"
+			"col1 col2";
+		grid-template-columns: 1fr 1fr;
+		grid-gap: 20px;
+	}
+	#letexte.modeactualites #laune { grid-area: laune;}
+	#letexte.modeactualites #col1 { grid-area: col1;}
+	#letexte.modeactualites #col2 { grid-area: col2;}
+}
 #content .modeactualites h2 { margin-left:0; }
+#content .modeactualites .logo_modenews { float: none; padding: 0;}
 
 /*************** HOME - MODE Blog */
 /** Derniers Articles */
@@ -2174,9 +2186,7 @@ div \[lang\], span \[lang\] { font-style: italic; }
 	vertical-align: middle;
  }
  .modeactualites #col1, .modeactualites #col2 {
-	float:none;
-	margin-left:0;
-	width:100%;
+	display: grid;
  }
  #sommaire_mode_mairie .dessousbreves {
 	width: 100%;