@use "../abstracts/mixins.scss" as *;


.home--section-tool{
    background-color: var(--data-color);
     color: var(--data-color-light);
    &[data-type="base-connaissance"],
    &[data-type="livrets"]{
        color: var(--data-color-light);
    }
}


#main_home {
    --max-w-home: 1100px;
    section {
        padding: calc(var(--unit)*3) var(--padding-body);
        position: relative;

        .section--inner {
            max-width: var(--max-w-home);
            margin: 0 auto;

        }
    }

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

    .section--header {
        margin-bottom: calc(var(--spacing) * 4);
        display: grid;
        grid-template-columns: 1fr 440px;
        gap: calc(var(--spacing)*1);
    }

    .section--title {
        font-size: 2.8rem;
        font-family: var(--font-title);
        grid-column: span 2;
        text-align: center;
        margin-bottom: calc(var(--spacing)*2);

        border: 2px solid currentColor;
        border-radius: var(--radius-btn);
        padding: 1ch calc(var(--spacing)*0.5);
    }

    .baseline {
        font-size: var(--fs-medium);
        max-width: 42ch;
        margin-top: calc(var(--spacing)*0.5);


    }

    .species-list{
        margin-bottom: calc(var(--spacing)*3);
        .taxon:hover{
            outline: 3px solid var(--color-txt);
        }
    }

    .species-list .title{
        grid-column: 1/end;
        font-size: var(--fs-medium);
        color: var(--data-color-light);
    }

    .section--content{
        width: 100%;
    }


}








#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;
        border: none;

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


    }

    /* button{ display: none;} */
    .description {
        font-size: var(--fs-medium);

        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(--data-color);
            color: var(--data-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(--data-color-light);

            }

        }

        a {
            text-decoration: none;
            color: var(--data-color);
            font-weight: bold;

        }
    }



}


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

}





.screenshot-booklet{

    display: flex;
    --gap: var(--padding-inner);
    gap: var(--gap);
      width: 100%;

    .cover, .page{     
        img{
               border: 0.5px solid var(--color-txt-light);
            width: 100%;
        }
    }

    .double{
        display: flex;
       
    }

    .page + .page img{
        border-left-color: transparent!important;
        
    }

}


.slider-flex{
    display: flex;
    min-height: 500px;
    background-color: #efefef;
   
    .item{
        display: none;
    }
}