botascopia-webiste-static/assets/css/_home.scss

#home__livrets{
    --color: var(--color-violet);
    --color-medium: var(--color-violet-medium);
    --color-light: var(--color-violet-light);
    background-color: var(--color-medium);
}


#home__base-connaissance{
    --color: var(--color-yellow);
    --color-medium: var(--color-yellow-medium);
    --color-light: var(--color-yellow-light);
    background-color: var(--color-medium);
}

#home__ateliers{
    --color: var(--color-orange);
    --color-medium: var(--color-orange-medium);
    --color-light: var(--color-orange-light);
    background-color: var(--color);
}



#main_home{
    section{
        padding: calc(var(--unit)*3) var(--padding-body);
        .section--inner{
            max-width: 1100px;
            margin: 0 auto;
         }
    }
    
   
}






.item-nav__group{
    display: flex;
    flex-direction: column;
    gap: var(--unit);
}

.section--title{
    font-size: 2.8rem;
    font-family: var(--font-title);
    margin-bottom: calc(var(--unit)*3);
}


.slideshow{
    width: 100%;
    height: calc(var(--unit)*13);

    figure{
        height: calc(var(--unit)*11);
    }
}

.highlight-block{

 
        background-color: var(--color);
        border: 1px solid var(--color-txt-light);
        border-radius: var(--radius-small);
        padding: calc(var(--padding-inner)*1.5) var(--padding-inner); 
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: space-between;
        gap: var(--unit);

        figure{
            width: 100%;
            max-width: 160px;
            aspect-ratio: 4/5;
            border: 1px solid var(--color-medium);
            border-radius: var(--radius-small);
            overflow: hidden;

            img{
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .label{
            font-weight: 600;
            margin-bottom: calc(var(--unit)*0.5);
            /* text-decoration: 1px underline;
            text-underline-offset: 3px; */
            color: var(--color);

            display: inline-flex;
            align-items: center;
            background-color: var(--color-light);
            height: var(--unit);
            padding: 0px 1ch;
            border-radius: var(--radius-btn);
        }

        .title{
            font-family: var(--font-title);
            font-size: 1.4rem;
            font-weight: normal;
            margin-top: 0.5em;
             margin-bottom: 0.25em;
             color: var(--color-light);

        }
        .details{
              margin-bottom: calc(var(--unit)*0.75);
            //   font-size: 0.8rem;
              color: var(--color-light);
              font-weight: 500;

        }

        .content{
            position: relative;
        }

        .see-more{
            position: absolute;
            bottom: 0;
            font-size: var(--fs-small);
            --hover-bg: var(--color);
        }
        

}



.home--section-tool .section--inner{


     display: grid;
     grid-template-columns: 4fr 5fr;
     column-gap: calc(var(--unit)*3);

    .section--title{
        grid-column: 1/end;
        width: 100%;
    }

    .item-nav{
        grid-column: 1;
    }

    .highlight-block, .slideshow{
        grid-column: 2;
        grid-row: 2;
    }
}


#home__hero{
    margin-bottom: 0;
    padding-bottom: calc(var(--unit)*1.5)!important; 
    
    .section--inner{ 
        display: block;
        text-align: center;
        width: 100%;
        max-width: 100%;

    
    }
    .section--title{
        font-size: 3.6em;

        margin-bottom: calc(var(--unit)*1.5);
        color: var(--color);


    }

    /* button{ display: none;} */
    .description{
        font-size: 1.6rem;
        max-width: 48ch;
        margin: 0 auto;
        margin-bottom: calc(var(--unit)*1.5);
    }

    .search--container{ display: none;}

    .nav-hero{
        list-style: none;
        display: flex;
        justify-content: center;
        gap: var(--unit);
        margin-top: calc(var(--unit)*1);
        margin-bottom: calc(var(--unit)*3);
      

        li{

            font-weight: 500;
            font-size: 1rem;
            min-width: 12ch;
            text-align: center;

    
            border: 1px solid var(--color);
            color: var(--color);
    
             display: inline-flex;
                align-items: center;
                justify-content: center;
                height: calc(var(--unit)*1.5);
                padding: 0px 1.5ch;
                border-radius: var(--radius-btn);
                cursor: pointer;
    
        }

        a{
            text-decoration: none;
            color: var(--color);
            font-weight: bold;
            /* &::after{
                content: " ↓"
            } */
        }
    }

    .see-more{
        display: block;
            // color: var(--color-txt);
            // font-weight: bold;
            padding-top: calc(var(--unit)*1.5);
    }

   
}


#home__a-propos{
    p, li{
        font-size: 1.6rem;
        margin-bottom: 1em;
        position: relative;

        strong{
            color: var(--color-green)
        }
    }

    ol li::marker{
        display: none;
        content: "";
    
    }

    ol{
        padding-left: 5ch;
        counter-reset: ol;
        li{ 
            counter-increment: ol 1;
            position: relative;
        }
    }

    ol li::before{
        font-size: 1.2rem;
        font-weight: bold;
        content: counter(ol);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 2ch;
        height: 2ch;
        border-radius: 50%;
        border: 2px solid var(--color-green);
        color: var(--color-green);
        background-color: var(--color-green-light);
        position: absolute;
        left: -4ch;
        top: 4px;
        
    }

    .btn--solid{
        margin-top: calc(var(--unit)*2);
    }

}

.container-logos{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px 60px;
}

.container-logos .logo{
    width: 200px;
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.container-logos .logo > * {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

.container-logos .logo img,
.container-logos .logo svg {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}

#logo-inria{
    width: 150px;
}
#logo-cnrs{
    width: 90px;
    height: 80px;
}
#logo-sorbonne{
    height: 65px;
    width: 160px;
}
#logo-saclay{
    width: 160px;
    transform: translateY(-10px);
}
#logo-rennes{
    width: 81px;
    height: 90px;
}
#logo-plantagroeco{
    width: 220px;
}
#logo-SBF{
    width: 146px;
    height: 120px;
}
#logo-upec{
    width: 161px;
    height: 70px;
}
#logo-paris{
    width: 80px;
    height: 70px;
}