#CACHE{0} 
[(#REM) SET ID RUBRIQUE id_rubrique_corianquartz_aesthetics_2018 ] 
#SET{id_rubrique_corianquartz_aesthetics_2018,151}
[(#REM) IF TEMPLATE === RUBRIQUE]
#SET{id_rubrique,#ID_RUBRIQUE}
[(#REM) OR IF TEMPLATE === ARTICLE]
[(#ID_ARTICLE|oui)#SET{id_rubrique,#INFO_ID_PARENT{rubriques,#INFO_ID_RUBRIQUE{articles,#ID_ARTICLE}}}]
[(#REM) RUN CONDITION ]
<BOUCLE_CONDITION_RUBRIQUE(CONDITION){si #GET{id_rubrique}|=={#GET{id_rubrique_corianquartz_aesthetics_2018}}}>
<style>
.colors__list {
    margin: 2rem 0;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.colors__list>div {
    width: calc(100% / 2 - 10px);
    height: 20vw;
    overflow: hidden;
    margin: 5px;
    position: relative;
}
/*IE, EDGE FIX */
.no-backgroundblendmode .colors__list > div {
	height: 330px!important;
}

.colors__list img {
    width: 100%;
    height: auto;
    -webkit-transition-duration: 1500ms !important;
    transition-duration: 1500ms !important
}

.colors__list a,
.colors__list picture {
    width: 100%;
    height: 100%;
    display: block;
}

.colors__list p {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    text-align: center;
    text-transform: uppercase;
    font-size: 1.5rem;
    font-weight: 400;
    padding: 1rem 0;
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    -webkit-transform: translateY(-150%);
    transform: translateY(-150%);
    opacity: 0;
    z-index: 5;
}

.colors__list p span {
    position: relative;
    z-index: 2;
}

.colors__list p:before {
    content: '';
    display: block;
    background-color: rgba(255, 255, 255, .85);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    -webkit-transform: translateY(130px);
    transform: translateY(130px);
    -webkit-transition: all 600ms ease;
    transition: all 600ms ease;
    opacity: 1;
}

.colors__list>div:hover p {
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    opacity: 1;
}

.colors__list>div:hover p:before {
    -webkit-transform: translateY(0);
    transform: translateY(0);
    opacity: 1;
}

.colors__list>div:hover img {
    -webkit-transform: scale(1.15);
    transform: scale(1.15);
}

.grid__layout {
    display: -ms-grid;
    display: grid;
    width: 100%;
    height: auto;
    -ms-grid-columns: (1fr)[2];
    grid-template-columns: repeat(2, 1fr);
    -ms-grid-rows: 2fr 20vw auto;
        grid-template-rows: 2fr 20vw auto;
        grid-template-areas: "left-side right-side-row-1" "left-side right-side-row-2" "left-side right-side-row-3"
}
/*IE, EDGE FIX */
.no-backgroundblendmode .grid__layout {
	-ms-grid-rows: 2fr 350px 1fr!important;
	grid-template-rows: 2fr 350px 1fr!important;
 }

.grid__layout>div {
    overflow: hidden;
}

.grid__layout .left-side {
    -ms-grid-row: 1;
    -ms-grid-row-span: 3;
    -ms-grid-column: 1;
    grid-area: left-side;
}

.grid__layout .left-side img {
    width: 100%;
    height:auto;
}

.grid__layout .right-side-row-1 {
    -ms-grid-row: 1;
    -ms-grid-column: 2;
    grid-area: right-side-row-1;
    text-align: center;
    padding: 1rem 5rem;
    background-color: rgba(0, 0, 0, .035);
    position: relative;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.grid__layout .right-side-row-1 h1 {
    margin: 0;
    font-weight: 200;
    text-transform: uppercase;
}

.grid__layout .right-side-row-1 h1:after {
    content: '';
    display: block;
    width: 50px;
    height: 1px;
    background-color: #ccc;
    margin: 1.5rem auto;
}

.grid__layout .right-side-row-2 {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: right-side-row-2;
    overflow: hidden;
}

.grid__layout .right-side-row-2 img {
    width: 100%;
    height: auto;
}

.grid__layout .right-side-row-3 {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: right-side-row-3;
    background-color: rgba(0, 0, 0, .6);
    padding: .5rem;
}

.grid__layout .right-side-row-3>div.flex {
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.grid__layout .right-side-row-3 a {
    margin: .1rem;
    padding: .65rem;
    background-color: rgba(0, 0, 0, .4);
    display: block;
    text-align: center;
    width: calc(100% / 3 - .4rem);
}

.grid__layout .right-side-row-3 a {
    text-decoration: none !important;
    color: #fff !important;
    text-transform: uppercase;
}

.grid__layout .right-side-row-3 a:hover,
.grid__layout .right-side-row-3 a.on {
    background-color: #fff;
    color: rgba(0, 0, 0, .7) !important;
}
@media screen and (max-width: 1024px) {
    .grid__layout {
            -ms-grid-rows: 2fr 15vw 1fr !important;
                grid-template-rows: 2fr 15vw 1fr !important;
    }
}
@media screen and (max-width: 768px) {
    .grid__layout .right-side-row-1 {
        padding: 2rem;
    }
    .grid__layout .right-side-row-3 a {
        width: 100%;
    }
    .grid__layout .right-side-row-2 img {
        height: 100%;
    }
    .grid__layout {
       -ms-grid-rows: 400px 200px !important;
           grid-template-rows: 400px 200px !important;
           grid-template-areas: "left-side right-side-row-1" "right-side-row-2 right-side-row-3" !important;
    }
    .grid__layout .right-side-row-3>div.flex {
        height: 200px;
        overflow: hidden;
        overflow-y: scroll;
    }
}
@media screen and (max-width: 375px) {
    .colors__list>div {
        height: auto;
    }
    .colors__list p {
        -webkit-transform: none;
        transform: none;
        top: auto;
        bottom: 0;
        opacity: 1;
        font-size: 3vw;
        padding: 1vw;
        font-weight: 700;
    }
    .colors__list p:before {
        opacity: .85;
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }
    .grid__layout {
        -ms-grid-columns: 1fr !important;
            grid-template-columns: 1fr !important;
        -ms-grid-rows: auto 300px 190px auto !important;
            grid-template-rows: auto 300px 190px auto !important;
            grid-template-areas: "right-side-row-1" "left-side" "right-side-row-2" "right-side-row-3" !important;
    }
}
</style>
    [(#REM) IF TEMPLATE === RUBRIQUE]
    <div class="section-template-rub-#ID_RUBRIQUE">
        <BOUCLE_ARTICLE_AESTHETICS(ARTICLES){id_rubrique=#ID_RUBRIQUE}>
            <div class="title">#TITRE</div>
            <div class="subtitle">#SOUSTITRE</div>
            <div class="text">#TEXTE</div>
            <div class="colors__list flex">
                <BOUCLE_RUBRIQUE_PARENT_AESTHETICS(RUBRIQUES){id_parent=#ID_RUBRIQUE}>
                    <BOUCLE_ARTICLE_PARENT_AESTHETICS(ARTICLES){id_rubrique}{par num titre}>
                        <BOUCLE_DOCUMENT_PARENT_AESTHETICS(DOCUMENTS){id_article}{par rang_lien,titre}{0,1}>
                            <div>
                                <a href="#URL_ARTICLE">
                                    <p><span>#TITRE</span></p>
                                    <picture>
                                        <source media="(max-width:400px)" srcset="[(#FICHIER|image_reduire{350}|extraire_attribut{src})]">
                                        <img class="ease" src="[(#FICHIER|image_reduire{600}|extraire_attribut{src})]">
                                    </picture>
                                </a>
                            </div>
                            </BOUCLE_DOCUMENT_PARENT_AESTHETICS>
                            </BOUCLE_ARTICLE_PARENT_AESTHETICS>
                            </BOUCLE_RUBRIQUE_PARENT_AESTHETICS>
            </div>
            </BOUCLE_ARTICLE_AESTHETICS>
    </div>
    [(#REM) IF TEMPLATE === ARTICLE]
    <div class="section-template-art-#ID_ARTICLE">
      <div class="grid__layout">
        <BOUCLE_ARTICLE_COLOR(ARTICLES){id_article=#ID_ARTICLE}>
          <div class="left-side">
            <BOUCLE_DOCUMENT_PICTURE(DOCUMENTS){id_article}{titre=''}{0,1}>
                <picture>
                  <source media="(max-width:400px)" srcset="[(#FICHIER|image_reduire{300}|extraire_attribut{src})]">
                  <img src="[(#FICHIER|image_reduire{600}|extraire_attribut{src})]">
                </picture>
            </BOUCLE_DOCUMENT_PICTURE>
          </div>
          <div class="right-side-row-1 flex">
            <div>
                <h1>#TITRE</h1>
                <p>[(#TEXTE|textebrut)]</p>
                [<p style="margin:2rem 0"><small>(#DESCRIPTIF|textebrut)</small></p>]
            </div>
          </div>
          <div class="right-side-row-2">
            <BOUCLE_DOCUMENT_COLOR(DOCUMENTS){id_article}{par rang_lien,titre}{0,1}>
                  <picture>
                    <source media="(max-width:400px)" srcset="[(#FICHIER|image_reduire{300}|extraire_attribut{src})]">
                    <img src="[(#FICHIER|image_reduire{600}|extraire_attribut{src})]">
                </picture>
            </BOUCLE_DOCUMENT_COLOR>
          </div>
          <div class="right-side-row-3">
            <div class="flex">
                <BOUCLE_ARTICLE_COLOR_ALL(ARTICLES){id_rubrique=#ID_RUBRIQUE}>
                    <a href="#URL_ARTICLE" class="#EXPOSE{on}">#TITRE</a>
                </BOUCLE_ARTICLE_COLOR_ALL>
            </div>
          </div>
        <script>
            window.scroll(0,$('.breadcrumb').offset().top)
        </script>
        </BOUCLE_ARTICLE_COLOR>
      </div>
    </div>
    <script>
    $(function() {
        try {
            /*CHECK ERROR*/
            if (!$('article.section-template') || $('article.section-template').length === 0) throw new Error('Error: article.section-template selector is missing. File: corianquartz-aesthetics-2018.html');
            /*IF NO ERROR*/
            var domObj = ('#ID_RUBRIQUE')?$('.section-template-rub-#ID_RUBRIQUE'):$('.section-template-art-#ID_ARTICLE');
            $('article.section-template')
            .html('')
            .append(domObj)
        } catch (e) {
            console.error('%c' + e, 'font-weight:bold')
        }
    })
    </script>
    </BOUCLE_CONDITION_RUBRIQUE>