diff --git a/noisettes/sommaire/sommaire_modeportailcognac.html b/noisettes/sommaire/sommaire_modeportailcognac.html
index 8c22f74fd19ae1655109ae6c89d6c4fa47216f60..53d9fd117c8f7685e0e5bd07677129f3618d2003 100644
--- a/noisettes/sommaire/sommaire_modeportailcognac.html
+++ b/noisettes/sommaire/sommaire_modeportailcognac.html
@@ -56,6 +56,7 @@
 	</header>
 	<div class="row" id="masonry" role="region" aria-label="Actualités">
 		<div class="grid">
+			<div class="grid-sizer"></div>
 			<BOUCLE_articles_recentsAlaUne(ARTICLES){lang}{!par #CONFIG{soyezcreateurs/ordre_quoideneuf,date_modif}}{0,(#CONFIG{soyezcreateurs/nombres_alanune,4})}{doublons}{titre_mot=AlaUne}>
 			[(#SET{logo,[(#LOGO_ARTICLE_SURVOL|sinon{#LOGO_ARTICLE_NORMAL}|sinon{[(#CHEMIN{images/placeholder.jpg}|image_focus{308,340})]})]})]
 			[(#SET{largeur,[(#GET{logo}|largeur|sinon{1})]})]
@@ -216,8 +217,11 @@
 		[(#REM) cf http://masonry.desandro.com/options.html 
 				Largeur calculée à partir de la largeur de la page, moins 5×20 (les marges), 
 				le tout divisé par  4 (le nombre de petits blocs maximum)
-		]
-		columnWidth: [(#GET{LargeurContaineur}|moins{100}|div{4})]
+		
+		columnWidth: [(#GET{LargeurContaineur}|moins{100}|div{4})],]
+		columnWidth: '.grid-sizer',
+		itemSelector: '.grid-item',
+		percentPosition: true
 	  });
 	});
 </script>
diff --git a/stylesportailcognac.css.html b/stylesportailcognac.css.html
index 14dda4b9743fe4c75de4d88659958d8e01e14056..a5d0f21faec7777893333b1b32947f62ff944b90 100644
--- a/stylesportailcognac.css.html
+++ b/stylesportailcognac.css.html
@@ -17,34 +17,36 @@
 #SET{LargeurMenuDroit,(#CONFIG{soyezcreateurs_layout/largeurmenudroit,180})}
 #SET{LargeurMilieu,(#GET{LargeurContaineur}|moins{#GET{LargeurMenuGauche}}|moins{#GET{LargeurMenuDroit}}|div{2})}
 
+#SET{masonry,308}
+
 div#content { width: 100%; }
 
 
-.portailcognac {
+{
   /* clearfix */
   /* ---- grid ---- */
   /* ---- grid-item ---- */
 }
-.portailcognac iframe {
+iframe {
   width: 100%;
 }
-.portailcognac img {
+img {
   display: inline-block;
   vertical-align: middle;
   max-width: 100%;
   height: auto;
   -ms-interpolation-mode: bicubic;
 }
-.portailcognac :focus {
+:focus {
   outline: none;
 }
-.portailcognac select {
+select {
   cursor: pointer;
 }
-.portailcognac .spip_logo {
+.spip_logo {
   max-width: 100%;
 }
-.portailcognac .ariaformprop {
+.ariaformprop {
   padding: 0;
   margin: 0;
   position: relative;
@@ -52,256 +54,256 @@ div#content { width: 100%; }
   background-color: white;
   font-size: 80%;
 }
-.portailcognac .ajaxbloc {
+.ajaxbloc {
   height: 100%;
 }
-.portailcognac .row {
+.row {
   margin-right: auto;
   margin-left: auto;
 }
-.portailcognac .text-center {
+.text-center {
   text-align: center;
 }
-.portailcognac .text-right {
+.text-right {
   text-align: right;
 }
-.portailcognac .text-left {
+.text-left {
   text-align: left;
 }
-.portailcognac .menu {
+.menu {
   margin: 0;
   list-style-type: none;
 }
-.portailcognac .menu > li {
+.menu > li {
   display: table-cell;
   vertical-align: middle;
 }
-.portailcognac .vertical > li {
+.vertical > li {
   display: block;
   vertical-align: middle;
 }
-.portailcognac .flexbox-flex {
+.flexbox-flex {
   display: flex;
   align-items: baseline;
   margin-bottom: .5em;
 }
-.portailcognac .flexbox-center-center {
+.flexbox-center-center {
   display: flex;
   align-items: center;
   justify-content: center;
   flex-wrap: wrap;
 }
-.portailcognac .flexbox-center-top {
+.flexbox-center-top {
   display: flex;
   align-items: stretch;
   justify-content: center;
   flex-wrap: wrap;
 }
-.portailcognac .flexbox--center {
+.flexbox--center {
   display: flex;
   align-items: center;
 }
-.portailcognac .flexbox-flex-row-reverse {
+.flexbox-flex-row-reverse {
   display: flex;
   flex-direction: row-reverse;
 }
-.portailcognac .flex-nowrap {
+.flex-nowrap {
   flex-wrap: nowrap;
 }
-.portailcognac .flexbox-wrap-space-between {
+.flexbox-wrap-space-between {
   display: flex;
   flex-wrap: wrap;
   align-content: space-between;
 }
-.portailcognac .flexbox-wrap-space-around {
+.flexbox-wrap-space-around {
   display: flex;
   flex-wrap: wrap;
   justify-content: space-around;
 }
-.portailcognac .flexbox-center-space-between {
+.flexbox-center-space-between {
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
-.portailcognac .flexbox-start-space-between {
+.flexbox-start-space-between {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
 }
 @media screen and (max-width: 47.9375em) {
-  .portailcognac .flex-nowrap {
+  .flex-nowrap {
     flex-wrap: wrap;
   }
 }
-.portailcognac .flexbox-stretch {
+.flexbox-stretch {
   display: flex;
   align-items: stretch;
 }
 @media screen and (max-width: 40em) {
-  .portailcognac .flexbox-stretch {
+  .flexbox-stretch {
     display: block;
   }
 }
-.portailcognac .hide {
+.hide {
   display: none;
 }
-.portailcognac .sans-border {
+.sans-border {
   border: 0;
 }
-.portailcognac .avec-border {
+.avec-border {
   border: 1px solid #aaa;
 }
-.portailcognac .avec-border-top {
+.avec-border-top {
   border-top: 1px solid #aaa;
 }
-.portailcognac .avec-border-bottom {
+.avec-border-bottom {
   border-bottom: 1px solid #aaa;
 }
-.portailcognac .avec-border-left {
+.avec-border-left {
   border-left: 1px solid #aaa;
 }
-.portailcognac .sans-margin {
+.sans-margin {
   margin: 0;
 }
-.portailcognac .avec-margin {
+.avec-margin {
   margin: 1.5em;
 }
-.portailcognac .avec-margin-top {
+.avec-margin-top {
   margin-top: 1.5em;
 }
-.portailcognac .avec-margin-right {
+.avec-margin-right {
   margin-right: 1.5em;
 }
-.portailcognac .avec-margin-bottom {
+.avec-margin-bottom {
   margin-bottom: 1.5em;
 }
-.portailcognac .avec-margin-bottom05 {
+.avec-margin-bottom05 {
   margin-bottom: .5em;
 }
-.portailcognac .avec-margin-bottom015 {
+.avec-margin-bottom015 {
   margin-bottom: .15em;
 }
-.portailcognac .avec-margin-left {
+.avec-margin-left {
   margin-left: 1.5em;
 }
 @media screen and (min-width: 40em) {
-  .portailcognac .avec-margin-bottom-for-medium {
+  .avec-margin-bottom-for-medium {
     margin-bottom: 1.5em;
   }
 }
-.portailcognac .sans-padding {
+.sans-padding {
   padding: 0;
 }
 @media screen and (max-width: 40em) {
-  .portailcognac .sans-padding-for-small {
+  .sans-padding-for-small {
     padding: 0;
   }
 }
-.portailcognac .avec-padding {
+.avec-padding {
   padding: 1em;
 }
-.portailcognac .avec-padding05 {
+.avec-padding05 {
   padding: .5em;
 }
-.portailcognac .avec-padding-top {
+.avec-padding-top {
   padding-top: 1em;
 }
-.portailcognac .avec-padding-top05 {
+.avec-padding-top05 {
   padding-top: .5em;
 }
-.portailcognac .avec-padding-top15 {
+.avec-padding-top15 {
   padding-top: 1.5em;
 }
-.portailcognac .avec-padding-right {
+.avec-padding-right {
   padding-right: 1em;
 }
-.portailcognac .avec-padding-right05 {
+.avec-padding-right05 {
   padding-right: .5em;
 }
-.portailcognac .avec-padding-bottom {
+.avec-padding-bottom {
   padding-bottom: 1em;
 }
-.portailcognac .avec-padding-left {
+.avec-padding-left {
   padding-left: 1em;
 }
-.portailcognac .avec-padding-leftright {
+.avec-padding-leftright {
   display: block;
   padding-right: 1em;
   padding-left: 1em;
 }
-.portailcognac .display-block {
+.display-block {
   display: block;
 }
-.portailcognac .text-transform-none {
+.text-transform-none {
   text-transform: none;
 }
-.portailcognac .text-uppercase {
+.text-uppercase {
   text-transform: uppercase;
 }
-.portailcognac .font-style-italic {
+.font-style-italic {
   font-style: italic;
 }
-.portailcognac .position-relative {
+.position-relative {
   position: relative;
 }
-.portailcognac .float-left {
+.float-left {
   float: left ;
 }
-.portailcognac .float-right {
+.float-right {
   float: right ;
 }
-.portailcognac .float-center {
+.float-center {
   display: table;
   margin-right: auto ;
   margin-left: auto ;
 }
-.portailcognac .z-index-999 {
+.z-index-999 {
   z-index: 999;
 }
-.portailcognac .cursor-pointer {
+.cursor-pointer {
   cursor: pointer;
 }
-.portailcognac .slick-slider {
+.slick-slider {
   margin-bottom: 4em;
 }
 
-.portailcognac #liens-diaporama {
+#liens-diaporama {
   position: absolute;
   top: 100px;
   right: 0;
 }
 @media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
-  .portailcognac #liens-diaporama {
+  #liens-diaporama {
     top: 5vw;
   }
 }
 @media only screen and (max-width: 767px) {
-  .portailcognac #liens-diaporama {
+  #liens-diaporama {
     position: relative;
     top: 50px;
   }
 }
-.portailcognac #liens-diaporama ul {
+#liens-diaporama ul {
   width: 220px;
   text-align: right;
 }
 @media only screen and (max-width: 767px) {
-  .portailcognac #liens-diaporama ul {
+  #liens-diaporama ul {
     display: flex;
     width: 100%;
     flex-wrap: wrap;
   }
 }
-.portailcognac #liens-diaporama li {
+#liens-diaporama li {
   background-color: rgba(255, 255, 255, 0.75);
   margin-bottom: .5em;
 }
 @media only screen and (max-width: 767px) {
-  .portailcognac #liens-diaporama li {
+  #liens-diaporama li {
     flex-grow: 1;
   }
 }
-.portailcognac #liens-diaporama li a {
+#liens-diaporama li a {
   display: flex;
   font-size: 1.2em;
   color: #GET{c_menu_a};
@@ -309,15 +311,15 @@ div#content { width: 100%; }
   line-height: 1 ;
   align-items: center;
 }
-.portailcognac #liens-diaporama li a span {
+#liens-diaporama li a span {
   padding: .5em .25em .5em .5em;
 }
 @media only screen and (max-width: 767px) {
-  .portailcognac #liens-diaporama li a span {
+  #liens-diaporama li a span {
     padding: .25em .5em;
   }
 }
-.portailcognac #liens-diaporama li a span.icon {
+#liens-diaporama li a span.icon {
   margin-left: .25em;
   padding-left: .25em;
   font-size: 1.8em;
@@ -325,85 +327,85 @@ div#content { width: 100%; }
   border-left-color: inherit;
 }
 @media only screen and (max-width: 767px) {
-  .portailcognac #liens-diaporama li a {
+  #liens-diaporama li a {
     background-color: #eae9e5;
     margin-left: .5em;
   }
 }
 
-.portailcognac .slick-slide img {
+.slick-slide img {
   margin: 0 auto;
 }
-.portailcognac .slick-slide .row {
+.slick-slide .row {
   max-width: none;
 }
-.portailcognac .slick-dots {
+.slick-dots {
   bottom: -45px;
 }
-.portailcognac .slick-dots li {
+.slick-dots li {
   width: 30px;
   height: 30px;
 }
-.portailcognac .slick-dots li button {
+.slick-dots li button {
   width: 30px;
   height: 30px;
 }
-.portailcognac .slick-dots li button::before {
+.slick-dots li button::before {
   font-size: 20px;
   line-height: 30px;
   width: 30px;
   height: 30px;
 }
-.portailcognac .slick-dots li.slick-active button::before {
+.slick-dots li.slick-active button::before {
   color: black;
 }
-.portailcognac #content img {
+#content img {
   padding: 0;
 }
-.portailcognac .slider-pratique {
+.slider-pratique {
   margin: 0 4rem;
 }
-.portailcognac .slider-pratique .slick-prev,
-.portailcognac .slider-pratique .slick-next {
+.slider-pratique .slick-prev,
+.slider-pratique .slick-next {
   width: 40px;
   height: 40px;
 }
-.portailcognac .slider-pratique .slick-prev {
+.slider-pratique .slick-prev {
   left: -40px;
 }
-.portailcognac .slider-pratique .slick-next {
+.slider-pratique .slick-next {
   right: -40px;
 }
-.portailcognac .slider-pratique .slick-prev:before,
-.portailcognac .slider-pratique .slick-next:before {
+.slider-pratique .slick-prev:before,
+.slider-pratique .slick-next:before {
   font-size: 40px;
   color: #777;
   opacity: 1;
 }
-.portailcognac .slider-pratique .slick-prev:hover:before,
-.portailcognac .slider-pratique .slick-prev:focus:before,
-.portailcognac .slider-pratique .slick-next:hover:before,
-.portailcognac .slider-pratique .slick-next:focus:before {
+.slider-pratique .slick-prev:hover:before,
+.slider-pratique .slick-prev:focus:before,
+.slider-pratique .slick-next:hover:before,
+.slider-pratique .slick-next:focus:before {
   opacity: 1;
   color: #333 ;
 }
-.portailcognac .slider-pratique button:hover,
-.portailcognac .slider-pratique button:focus {
+.slider-pratique button:hover,
+.slider-pratique button:focus {
   background-color: transparent;
 }
-.portailcognac .slider-pratique .content-pratique {
+.slider-pratique .content-pratique {
   background-color: #aaa;
   width: 280px;
   margin: 0 12px;
   -webkit-transition: all .25s ease;
   transition: all .25s ease;
 }
-.portailcognac .slider-pratique .content-pratique:hover,
-.portailcognac .slider-pratique .content-pratique:focus {
+.slider-pratique .content-pratique:hover,
+.slider-pratique .content-pratique:focus {
   -webkit-transition: all .25s ease;
   transition: all .25s ease;
 }
-.portailcognac .slider-pratique .h2 {
+.slider-pratique .h2 {
   display: flex;
   height: 150px;
   color: white;
@@ -414,71 +416,69 @@ div#content { width: 100%; }
     text-align: right;
     margin: 1.5em 0px 0px;
 }
-.portailcognac .slider-pratique .h2 .titre-pratique {
+.slider-pratique .h2 .titre-pratique {
   width: 100%;
   align-self: center;
   text-align: right;
   padding: 10px;
     border-right: 1px solid;
 }
-.portailcognac .slider-pratique .h2 .icon {
+.slider-pratique .h2 .icon {
   align-self: center;
   padding: 7px 15px 7px 7px;
   font-size: 30px;
 }
 @media only screen and (max-width: 400px) {
-  .portailcognac .slider-pratique {
+  .slider-pratique {
     margin: 0 2.8rem;
   }
-  .portailcognac .slider-pratique .content-pratique {
+  .slider-pratique .content-pratique {
     width: 240px;
   }
-  .portailcognac .slider-pratique .h2 {
+  .slider-pratique .h2 {
     height: 130px;
   }
 }
-.portailcognac .clearfix:after,
-.portailcognac .grid:after {
+.clearfix:after,
+.grid:after {
   content: '';
   display: block;
   clear: both;
 }
-.portailcognac #masonry {
+#masonry {
   max-width: #GET{LargeurContaineur}px;
   margin: 0 auto;
   padding-left: 20px;
   text-align: center;
 }
-.portailcognac .grid {
+.grid {
   text-align: center;
 }
-.portailcognac .grid-item {
+.grid-item {
   background-color: #ccc;
-  width: calc(25% - 20px);
-  height: calc(340px + 65px);
 }
-.portailcognac .grid-item:hover,
-.portailcognac .grid-item:focus {
+.grid-item:hover,
+.grid-item:focus {
   background-color: #eee;
 }
-.portailcognac .grid-item .content-actus:nth-child(2) {
+.grid-item .content-actus:nth-child(2) {
   margin-top: 20px;
   border-top: 20px solid white;
 }
-.portailcognac .grid-item header {
+.grid-item header {
   font-size: 1.5em;
   overflow: auto;
 }
-.portailcognac .grid-item header strong {
+.grid-item header strong {
   font-size: inherit;
 }
-.portailcognac .grid-item header time {
+.grid-item header time {
   padding: .75em .5em;
 }
-.portailcognac .grid-item header img {
+.grid-item header img {
   max-width: 65%;
 }
-.portailcognac .grid-item .h2 {
+.grid-item .h2 {
   display: flex;
   flex-direction: row;
   width: 100%;
@@ -489,77 +489,110 @@ div#content { width: 100%; }
   text-align: right;
   border: none;
 }
-.portailcognac .grid-item .h2 .icon {
+.grid-item .h2 .icon {
     align-self: center;
 	padding: 7px 0 7px 7px;
     font-size: 30px;
 }
-.portailcognac .grid-item .h2 .titre-actus {
+.grid-item .h2 .titre-actus {
     width: 100%;
     align-self: center;
     padding: 10px 10px 10px 0;
     border-right: 1px solid;
 }
-.portailcognac .grid-item img {
+.grid-item img {
   max-width: 100%;
 }
-.portailcognac .grid-item-x2 {
-  width: calc(50% - 20px);
-}
-.portailcognac .grid-item-x3 {
-  width: calc(75% - 20px);
-}
-.portailcognac .grid-item {
+.grid-item {
   margin-bottom: 20px;
 }
-@media only screen and (max-width: #GET{LargeurContaineur}px) {
-  .portailcognac .grid-item {
-    height: calc(26vw + 90px);
-  }
-}
-@media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
-  .portailcognac .grid-item {
+/*
+M : [(#GET{masonry}|mult{3}|plus{100})]
+LC: #GET{LargeurContaineur}
+*/
+[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|oui)
+	.grid-sizer, .grid-item {
+	  width: calc(25% - 20px);
+	}
+	.grid-item {
+	  height: calc(340px + 65px);
+	}
+	.grid-item-x2 {
+	  width: calc(50% - 20px);
+	}
+	.grid-item-x3 {
+	  width: calc(75% - 20px);
+	}
+	@media only screen and (max-width: #GET{LargeurContaineur}px) {
+	  .grid-item {
+		height: calc(340px + 90px);
+	  }
+	}
+]
+[(#GET{masonry}|mult{3}|plus{100}|<={#GET{LargeurContaineur}}|non)
+	.grid-sizer, .grid-item {
+	  width: calc(33.333% - 20px);
+	}
+	.grid-item {
+	height: calc(340px + 90px);
+	}
+	.grid-item-x2 {
+	width: calc(66.666% - 20px);
+	}
+	.grid-item-x3 {
+	width: calc(100% - 20px);
+	}
+]
+@media only screen and (max-width:[(#GET{masonry}|mult{3}|plus{100})]px) {
+  .grid-sizer, .grid-item {
     width: calc(33.333% - 20px);
-    height: calc(34.5vw + 90px);
   }
-  .portailcognac .grid-item-x2 {
+  .grid-item {
+    height: calc(340px + 90px);
+  }
+  .grid-item-x2 {
     width: calc(66.666% - 20px);
   }
-  .portailcognac .grid-item-x3 {
+  .grid-item-x3 {
     width: calc(100% - 20px);
   }
 }
-@media only screen and (max-width: 680px) {
-  .portailcognac .grid-item {
+@media only screen and (max-width: [(#GET{masonry}|mult{2}|plus{80})]px) {
+  .grid-sizer, .grid-item {
     width: calc(50% - 20px);
-    height: auto;
   }
-  .portailcognac .grid-item-x2 {
+  .grid-item {
+    height: calc(340px + 90px);
+  }
+  .grid-item-x2 {
     width: calc(100% - 20px);
   }
 }
-@media only screen and (max-width: 540px) {
-  .portailcognac .grid-item {
+@media only screen and (max-width: [(#GET{masonry}|mult{1}|plus{60})]px) {
+  .grid-sizer, .grid-item {
     width: calc(100% - 20px);
   }
+  .grid-item {
+    height: auto;
+  }
 }
-.portailcognac #lesprojets {
+#lesprojets {
   margin-top: 5em;
   margin-bottom: 4em;
 }
-.portailcognac #projets {
+#projets {
   margin: 0;
   padding: 0;
 }
-.portailcognac #projets .projet {
+#projets .projet {
   background-color: #777;
   width: 50%;
   float: left;
 }
-.portailcognac #projets .projet:hover {
+#projets .projet:hover {
   background-color: #aaa;
 }
-.portailcognac #projets a {
+#projets a {
     display: flex;
     flex-direction: row;
     align-content: center;
@@ -570,10 +603,10 @@ div#content { width: 100%; }
     border-color: initial;
     border-image: initial;
 }
-.portailcognac #projets a:hover {
+#projets a:hover {
   color: #333;
 }
-.portailcognac #projets h2 {
+#projets h2 {
   width: 100%;
   height: auto;
   margin: auto;
@@ -582,7 +615,7 @@ div#content { width: 100%; }
   text-align: center;
   border: none;
 }
-.portailcognac #projets h2 {
+#projets h2 {
     font-size: 2vw;
     line-height: 35px;
     width: 100%;
@@ -601,42 +634,42 @@ div#content { width: 100%; }
     height: auto;
     padding: 0px 25px;
 }
-.portailcognac #projets .suite .icon {
+#projets .suite .icon {
   margin: auto;
   align-self: center;
   font-size: 3vw;
 }
 @media only screen and (max-width:[(#GET{LargeurContaineur})]px) {
-  .portailcognac #projets h2 {
+  #projets h2 {
     font-size: 36px;
     line-height: 38px;
   }
 }
 @media only screen and (max-width: 768px) {
-  .portailcognac #projets h2 {
+  #projets h2 {
     font-size: 30px;
     line-height: 34px;
   }
 }
 @media only screen and (max-width: 640px) {
-  .portailcognac #projets article {
+  #projets article {
     width: 100%;
     float: none;
   }
-  .portailcognac #projets article a {
+  #projets article a {
     height: auto;
   }
-  .portailcognac #projets h2 {
+  #projets h2 {
     padding: 1rem;
     font-size: 26px;
     line-height: 30px;
   }
-  .portailcognac #projets .suite .icon {
+  #projets .suite .icon {
     font-size: 25px;
   }
 }
 
-.portailcognac #pratique {
+#pratique {
   margin-bottom: 4em;
 }
 
diff --git a/stylessoyezcreateurs.css.html b/stylessoyezcreateurs.css.html
index f89d68dc86a436b81701ef3aef11c0b7f0320066..806c6e00104e8d2af39261c5e2096d9524ed191e 100644
--- a/stylessoyezcreateurs.css.html
+++ b/stylessoyezcreateurs.css.html
@@ -1557,7 +1557,7 @@ div [lang], span [lang] { font-style: italic; }
 
  /* passer tous les éléments de largeur fixe en largeur automatique */
  body, #container, #shadow, #content {
-   width: auto !important;
+   width: 100% !important;
    margin: auto !important;
    padding: 0 !important;
  }