section[class="mosaiques"]>div[class="mercados"]{
    --ecart_mercados:50px;
    --ecarttxt_mercados:15px;
    --radius_mercados:40px;

    --h_init_image_mercados:80px;
    --e_init_image_mercados:20px;
    --t_font_h2_mercados:25px;
    /*
    --h_init_image_mercados:150px;
    --h_end_image_mercados:100px;
    --e_init_image_mercados:100px;
    --e_end_image_mercados:20px;
    --t_font_h2_mercados:35px;
    */
}

/*Vignette Mosaiques *********************/
section[class="mosaiques"]>div[class="mercados"]>div[class="grid"] {margin-bottom: var(--mosaique_padding_left);}

section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div {
    float: left;
    width: 100%;
    display: grid;
    box-sizing: border-box;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(3, auto);
    gap: var(--ecart_mercados);
    padding-top: var(--ecart_mercados);
    padding-left: 0px;
    padding-right: 0px;
    padding-bottom: var(--ecart_mercados);
}

section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div {
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #efefef;
}
/*
section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div>a[class="vignette"] {
    position: absolute;
    width: 100%;
    max-width: 350px;
    aspect-ratio: 2/3;
    overflow: hidden;    
    border-radius: var(--radius_mercados);

    transform: translateY(0);

    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;

    transition-property: box-shadow,-moz-box-shadow,box-shadow,transform;
    transition-duration:calc(var(--anim_time2)/2);
    transition-timing-function:var(--anim_ease);
    transition-delay: var(--anim_delay);
}




section[class="mosaiques"]>div[class="mercados"] div[class="couverture"] {
    float: left;
    width: 100%;
    height: 50%; 
    background-color: var(--color_rosefonce_neomedia);

    display: flex;
    align-items: center;
    justify-content: center;
    
    transition-property: background-color;
    transition-duration:calc(var(--anim_time2)/2);
    transition-timing-function:var(--anim_ease);
    transition-delay: var(--anim_delay);
}
*/

/******************************/
/******************************/
/*
section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div>a[class="vignette"]:hover>div[class="couverture"] {
    background-color: var(--color_jaune_neomedia);
}
section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div>a[class="vignette"]:hover {
    transform: translateY(-50px);
    -webkit-box-shadow: 0px 0px 15px 5px var(--color_jaune_neomedia);
    -moz-box-shadow: 0px 0px 15px 5px var(--color_jaune_neomedia);
    box-shadow: 0px 0px 15px 5px var(--color_jaune_neomedia);
}
*/
/******************************/
/******************************/




/*
section[class="mosaiques"]>div[class="mercados"] div[class="couverture"]>div {width: 80%;}
section[class="mosaiques"]>div[class="mercados"] div[class="couverture"]>div>div[class="icone"] {
    float: left;
    width: 100%;
    height: var(--h_init_image_mercados);
    margin-bottom: var(--e_init_image_mercados); 
    text-align: center; 

    transition-property: margin-bottom,height;
    transition-duration:calc(var(--anim_time2)/2);
    transition-timing-function:var(--anim_ease);
    transition-delay: var(--anim_delay);
}
section[class="mosaiques"]>div[class="mercados"] div[class="couverture"]>div>div[class="icone"]>img {
    display: inline;
    width: auto;
    height: 100%;
}
section[class="mosaiques"]>div[class="mercados"] div[class="couverture"]>div>h2 {
    float: left;
    width: 100%;   
    
    font-family: var(--header_mobile);
    font-size: var(--t_font_h2_mercados);
    line-height: 1.2;
    text-transform: uppercase;
    color: white;
    text-align: center;
}
*/




/*
@media (min-width: 1560px) and (max-width: 1760px) {
    section[class="mosaiques"]>div[class="mercados"]{
        --ecart_mercados:50px;
        --ecarttxt_mercados:15px;
        --radius_mercados:30px;

        --h_init_image_mercados:60px;
        --e_init_image_mercados:20px;
        --t_font_h2_mercados:23px;
    }
}
@media (min-width: 1160px) and (max-width: 1560px) {
    
    section[class="mosaiques"]>div[class="mercados"]{
        --ecart_mercados:50px;
        --ecarttxt_mercados:15px;
        --radius_mercados:24px;

        --h_init_image_mercados:50px;
        --e_init_image_mercados:20px;
        --t_font_h2_mercados:20px;
    }
}
@media (min-width: 860px) and (max-width: 1160px) {
    
    section[class="mosaiques"]>div[class="mercados"]{
        --ecart_mercados:20px;
        --ecarttxt_mercados:10px;
        --radius_mercados:20px;

        --h_init_image_mercados:30px;
        --e_init_image_mercados:10px;
        --t_font_h2_mercados:18px;
    }
}
@media (min-width: 730px) and (max-width: 860px) and (min-height: 1000px)  {

    section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
    }
    section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div>a[class="vignette"] {
        max-width: 200px;
    }
    
    section[class="mosaiques"]>div[class="mercados"]{
        --ecart_mercados:50px;
        --ecarttxt_mercados:15px;
        --radius_mercados:24px;

        --h_init_image_mercados:50px;
        --e_init_image_mercados:20px;
        --t_font_h2_mercados:20px;
    }
}
@media (min-width: 730px) and (max-width: 860px) and (max-height: 1000px)  {

    section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(2, auto);
    }
    section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div>a[class="vignette"] {
        max-width: 150px;
    }
    
    section[class="mosaiques"]>div[class="mercados"]{
        --ecart_mercados:50px;
        --ecarttxt_mercados:15px;
        --radius_mercados:24px;

        --h_init_image_mercados:30px;
        --e_init_image_mercados:10px;
        --t_font_h2_mercados:20px;
    }
}
@media (max-width: 730px) {

    section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, auto);
    }
    section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div>a[class="vignette"] {
        width: auto;
        height: 100%;
    }
    section[class="mosaiques"]>div[class="mercados"]>div[class="grid"]>div>div>a[class="vignette"]:hover {
        transform: translateY(0px);
    }
    section[class="mosaiques"]>div[class="mercados"]{
        --ecart_mercados:15px;
        --ecarttxt_mercados:5px;
        --radius_mercados:14px;

        --h_init_image_mercados:20px;
        --e_init_image_mercados:5px;
        --t_font_h2_mercados:14px;
    }
}
    */