section[class="mosaiques"]>div[class="soluciones"]{
    --ecart_soluciones:50px;
    --ecarttxt_soluciones:15px;
    --radius_soluciones:40px;

    --h_init_image_soluciones:80px;
    --e_init_image_soluciones:20px;
    --t_font_h2_soluciones:25px;
    /*
    --h_init_image_soluciones:150px;
    --h_end_image_soluciones:100px;
    --e_init_image_soluciones:100px;
    --e_end_image_soluciones:20px;
    --t_font_h2_soluciones:35px;
    */
}


/*BOUTON *********************/
section[class="mosaiques"]>div[class="soluciones"]>div[class="go"]>a {border: 1px white solid;color:white;}



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

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

section[class="mosaiques"]>div[class="soluciones"]>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="soluciones"]>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_soluciones);

    /* position de base */
    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="soluciones"] 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="soluciones"]>div[class="grid"]>div>div>a[class="vignette"]:hover>div[class="couverture"] {
    background-color: var(--color_jaune_neomedia);
}
section[class="mosaiques"]>div[class="soluciones"]>div[class="grid"]>div>div>a[class="vignette"]:hover {
    transform: translateY(-50px); /* monte de 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="soluciones"] div[class="couverture"]>div {width: 80%;}
section[class="mosaiques"]>div[class="soluciones"] div[class="couverture"]>div>div[class="icone"] {
    float: left;
    width: 100%;
    height: var(--h_init_image_soluciones);
    margin-bottom: var(--e_init_image_soluciones); 
    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="soluciones"] div[class="couverture"]>div>div[class="icone"]>img {
    display: inline;
    width: auto;
    height: 100%;
}
section[class="mosaiques"]>div[class="soluciones"] div[class="couverture"]>div>h2 {
    float: left;
    width: 100%;   
    
    font-family: var(--header_mobile);
    font-size: var(--t_font_h2_soluciones);
    line-height: 1.2;
    text-transform: uppercase;
    color: white;
    text-align: center;
}




section[class="mosaiques"]>div[class="soluciones"] div[class="info"] {
    float: left;
    width: 100%;
    height: 50%; 
    background-color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 0;
}
section[class="mosaiques"]>div[class="soluciones"] div[class="info"]>p {
    width: calc(100% - 2*var(--ecarttxt_soluciones));    
    
    font-family: var(--header_mobile);
    font-size: calc(var(--t_font_h2_soluciones) - 5px);
    line-height: 1.2;
    color: var(--color_bleufonce_neomedia);
    text-align: center;  
}






@media (min-width: 1560px) and (max-width: 1760px) {
    section[class="mosaiques"]>div[class="soluciones"]{
        --ecart_soluciones:50px;
        --ecarttxt_soluciones:15px;
        --radius_soluciones:30px;

        --h_init_image_soluciones:60px;
        --e_init_image_soluciones:20px;
        --t_font_h2_soluciones:23px;
    }
}
@media (min-width: 1160px) and (max-width: 1560px) {
    
    section[class="mosaiques"]>div[class="soluciones"]{
        --ecart_soluciones:50px;
        --ecarttxt_soluciones:15px;
        --radius_soluciones:24px;

        --h_init_image_soluciones:50px;
        --e_init_image_soluciones:20px;
        --t_font_h2_soluciones:20px;
    }
}
@media (min-width: 860px) and (max-width: 1160px) {
    
    section[class="mosaiques"]>div[class="soluciones"]{
        --ecart_soluciones:20px;
        --ecarttxt_soluciones:10px;
        --radius_soluciones:20px;

        --h_init_image_soluciones:30px;
        --e_init_image_soluciones:10px;
        --t_font_h2_soluciones:18px;
    }
}
@media (min-width: 730px) and (max-width: 860px) and (min-height: 1000px)  {

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

        --h_init_image_soluciones:50px;
        --e_init_image_soluciones:20px;
        --t_font_h2_soluciones:20px;
    }
}
@media (min-width: 730px) and (max-width: 860px) and (max-height: 1000px)  {

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

        --h_init_image_soluciones:30px;
        --e_init_image_soluciones:10px;
        --t_font_h2_soluciones:20px;
    }
}
@media (max-width: 730px) {

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

        --h_init_image_soluciones:20px;
        --e_init_image_soluciones:5px;
        --t_font_h2_soluciones:14px;
    }
}