#home__hero{
    --color: var(--color-green);
    --color-medium: var(--color-green-medium);
    --color-light: var(--color-green-light);
}


#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{
    border: 1px solid var(--color-txt-light);
    border-radius: var(--radius-small);
    background-color: var(--white);

    padding: var(--padding-inner);
    padding-bottom: calc(var(--padding-inner)*0.5);

    min-height: calc(var(--unit)*5);
    max-width: 440px;

    display: flex;
    flex-direction: column;

    .title{
        font-family: var(--font-title);
        font-size: 1.4rem;
            line-height: 1.1;
            padding-right: 1ch;

        font-weight: normal;
        
    }

    button{
        width: var(--unit);
        align-self: end;
    }

    .description{
        margin-top: 0.5em;
        flex-grow: 2;
        padding-right: 2ch;
    }

    
}

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


.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%;
         /* max-width: 440px; */
        /* text-align: center; */
        display: flex;
        justify-content: space-between;
        gap: var(--unit);
        /* flex-direction: column; */
        /* justify-content: center;
        align-items: center; */

    
      


        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; */

            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;
        }
        .details{
              margin-bottom: calc(var(--unit)*0.75);
              font-size: 0.8rem;
        }

}



.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{
        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;
    gap: 20px;

}
.container-logos .logo{
    width: 200px;
    height: 60px;
    background-color: #999;

}





     /* .btn--outline{
                    font-weight: 500;
                    font-size: 1.2rem;

        border: 1px solid var(--color);
        color: var(--color);

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