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);
    }
}



.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: 1.5px 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;
                &:hover{
                    background-color: var(--color-light);

                }
    
        }

        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);
    }

}