section[class="mosaiques"]>div:first-child{
    position: absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index: 1;
}
section[class="mosaiques"]>div[class="fond"]{
    position: absolute;
    bottom:0px;
    left:0px;
    width:100%;
    height:100%;
    z-index: 0;

    /*

    
    background-color: var(--color_bleufonce_neomedia);
    background-color: #effeff;
    background-color: var(--color_bleufonce_neomedia);
    */
    background-image: url('../../skin/fond_soluciones.webp?456');
    background-position: 0px 0px;
    background-repeat: no-repeat;
    background-size: cover;
    
}






section[class="mosaiques"]>div:first-child>div[class="presentation"],
section[class="mosaiques"]>div:first-child>div[class="grid"],
section[class="mosaiques"]>div:first-child>div[class="go"] {
    float: left;
    width: 100%;
    box-sizing: border-box;
    position: relative;
    padding-right: var(--mosaique_padding_left);
    padding-left: var(--mosaique_padding_left);
    
    --mosaique_padding_left:100px;
    --mosaique_font_title:30px;
    --mosaique_font_resume:calc(var(--mosaique_font_title) - 8px);
}

section[class="mosaiques"]>div:first-child>div[class="presentation"] {
    overflow: hidden;
    padding-top: var(--mosaique_padding_left);
    padding-bottom: calc(var(--mosaique_padding_left)/4);
}
section[class="mosaiques"]>div:first-child>div[class="grid"] {overflow: auto;}
section[class="mosaiques"]>div:first-child>div[class="go"] {
    overflow: hidden;
    padding-top: calc(var(--mosaique_padding_left)/4);
    padding-bottom: var(--mosaique_padding_left);
}
section.mosaiques:not(:has(> div.presentation)):not(:has(> div.go)) > div.grid {padding: 0px;}









/*TITLE *********************/
section[class="mosaiques"]>div:first-child>div[class="presentation"]>h1{
    float: left;
    width: 100%;
    font-family: var(--header_mobile);    
    font-size: var(--mosaique_font_title);
    color: var(--color_rosefonce_neomedia);
}
section[class="mosaiques"]>div:first-child>div[class="presentation"]>h1>span{color: var(--color_bleufonce_neomedia);}


/*TEXTE *********************/
section[class="mosaiques"]>div:first-child>div[class="presentation"]>p{
    float: left;
    width: 100%;
    margin-top: calc(var(--mosaique_padding_left)/2);
    overflow: hidden;
    font-family: var(--header_font);
    font-size: var(--mosaique_font_resume);
    line-height: calc(var(--mosaique_font_resume) + 5px);
    color: black;
    text-align: justify;
}


/*BOUTON *********************/
section[class="mosaiques"]>div:first-child>div[class="go"]>a {
    float: left;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
    border-radius: 7px;
    border: 1px var(--color_bleufonce_neomedia) solid;
    background-color:transparent;
    
    color:var(--color_bleufonce_neomedia);
    text-decoration: none;
    font-size: 20px;

    transition-property: background-color,color;
    transition-duration:var(--anim_time2);
    transition-timing-function:var(--anim_ease);
    transition-delay: var(--anim_delay);
}
section[class="mosaiques"]>div:first-child>div[class="go"]>a:hover {background-color:var(--color_rosefonce_neomedia);color:white;}



/*Vignette Mosaiques *********************/
/*
section[class="mosaiques"]>div:first-child>div[class="grid"]>div {
    float: left;
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 50px;
    padding: 50px;
    box-sizing: border-box;
}

section[class="mosaiques"]>div:first-child>div[class="grid"]>div>div {
    min-height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: white;
    font-family: sans-serif;
}
*/




section[class="mosaiques"]>div:first-child>div[class="grid"]::-webkit-scrollbar {width:0px;}
section[class="mosaiques"]>div:first-child>div[class="grid"]::-webkit-scrollbar-thumb {background: #888;border-radius: 5px;}
section[class="mosaiques"]>div:first-child>div[class="grid"]::-webkit-scrollbar-thumb:hover {background: #555;}






@media (min-width: 1260px) and (max-width: 1460px) {
    section[class="mosaiques"]>div:first-child>div[class="presentation"],
    section[class="mosaiques"]>div:first-child>div[class="grid"],
    section[class="mosaiques"]>div:first-child>div[class="go"] {
        --mosaique_padding_left:80px;
        --mosaique_font_title:28px;
    }
}
@media (min-width: 1060px) and (max-width: 1260px) {
    section[class="mosaiques"]>div:first-child>div[class="presentation"],
    section[class="mosaiques"]>div:first-child>div[class="grid"],
    section[class="mosaiques"]>div:first-child>div[class="go"] {
        --mosaique_padding_left:50px;
        --mosaique_font_title:26px;
    }
}
@media (min-width: 860px) and (max-width: 1060px) {
    section[class="mosaiques"]>div:first-child>div[class="presentation"],
    section[class="mosaiques"]>div:first-child>div[class="grid"],
    section[class="mosaiques"]>div:first-child>div[class="go"] {
        --mosaique_padding_left:50px;
        --mosaique_font_title:24px;
    }
}
@media (min-width: 730px) and (max-width: 860px) {
    section[class="mosaiques"]>div:first-child>div[class="presentation"],
    section[class="mosaiques"]>div:first-child>div[class="grid"],
    section[class="mosaiques"]>div:first-child>div[class="go"] {
        --mosaique_padding_left:50px;
        --mosaique_font_title:22px;
    }
}
@media (min-width: 580px) and (max-width: 730px) {
    section[class="mosaiques"]>div:first-child>div[class="presentation"],
    section[class="mosaiques"]>div:first-child>div[class="grid"],
    section[class="mosaiques"]>div:first-child>div[class="go"] {
        --mosaique_padding_left:50px;
        --mosaique_font_title:20px;
    }
    section[class="mosaiques"]>div:first-child>div[class="go"]>a {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 12px;
    }
}
@media (max-width: 580px) {
    section[class="mosaiques"]>div:first-child>div[class="presentation"],
    section[class="mosaiques"]>div:first-child>div[class="grid"],
    section[class="mosaiques"]>div:first-child>div[class="go"] {
        --mosaique_padding_left:30px;
        --mosaique_font_title:18px;
    }
    section[class="mosaiques"]>div:first-child>div[class="go"]>a {
        padding-left: 10px;
        padding-right: 10px;
        padding-top: 4px;
        padding-bottom: 4px;
        font-size: 12px;
    }
}