.eco-tab-system__tab-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    padding: 0 var(--wp--preset--spacing--50);
    justify-content: space-between;
    margin-block-start: 0!important;
    margin-top: 0;
    margin-bottom: var(--wp--preset--spacing--30);
    margin-left: auto;
	background-color: var(--wp--preset--color--fond);
	box-shadow: var(--wp--preset--shadow--light);
    transition: all 0.3s ease-in-out;
    z-index: 3;
}

.eco-tab-system__section--hidden { display: none }

.eco-tab-system__tab-container--sticky {
    position: fixed;
    top: 148px;
    width: 100%;
}

.eco-tab-system__tab-container--hidden {
    top: 0 !important;
}

.eco-tab-system__content-container {
    max-width: none!important;
/*     padding-top: var(--wp--preset--spacing--60); */
    display: flex;
    flex-direction: column;
    gap: var(--wp--preset--spacing--40);
    margin-top: 0 !important;
}

.eco-tab-system__content-container--scrolled {
    margin-top: 57px !important;
}

.eco-tab-system__tab-container--loading {
	height: 50vh;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg' role='img' aria-label='icon-37' width='24' height='24' stroke='%232A2C2B' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' name='loader' class='standard standard-loader-2'%3E%3Ctitle%3Eicon-37%3C/title%3E%3Cpath d='M21 12a9 9 0 1 1-6.219-8.56'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 12 12' to='360 12 12' dur='0.6s' repeatCount='indefinite'%3E%3C/animateTransform%3E%3C/path%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
}

.eco-tab-system__tab-items {
    width: var(--wp--style--global--content-size);
    margin: auto;
}

.eco-tab-sysyem__tab-items-wrapper {
    display: flex;
	gap: 24px;
    width: fit-content;
    padding: 0;
    border-bottom: 1px solid var(--wp--preset--color--neutral-light);
}

.eco-tab-system__tab-item {
    position: relative;
    padding: 1rem .5rem;
	font-size: var(--wp--preset--font-size--m);
    text-align: center;
    color: var(--wp--preset--color--text-secondary) !important;
}

.eco-tab-system__tab-item:hover {
	color: var(--wp--preset--color--primary) !important;
}

.eco-tab-system__tab-item::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -1px;
    display: none;
    width: 100%;
    height: 4px;
    background-color: var(--wp--preset--color--secondary);
}

.eco-is-pro .eco-tab-system__tab-item::after,
.page-template-page-professionnels .eco-tab-system__tab-item::after,
.page-template-page-territoires-et-partenaires .eco-tab-system__tab-item::after {
    background-color: var(--wp--preset--color--secondary-pro);
}

.eco-tab-system__tab-item--active {
    font-weight: 700;
	color: var(--wp--preset--color--primary) !important;
}

.eco-tab-system__tab-item--active::after {
    display: block;
}

.eco-tab-system__tab-scroll {
    display: none;
    position: absolute;
    top: 0;
    right: var(--wp--preset--spacing--50);
    padding: var(--wp--preset--spacing--30);
    z-index: 1;
}

.eco-tab-system__tab-scroll__button {
    display: block;
    height: 1.5rem;
    width: 1.5rem;
    aspect-ratio: 1;
    background-color: var(--wp--preset--color--base);
    border-radius: 50%;
    box-shadow: 0px 8px 24px #2A2C2B33;
}

.eco-tab-system__tab-scroll__button::before {
    content: '';
    display: block;
    height: 100%;
    width: 100%;
    aspect-ratio: 1;

    background-color: var(--wp--preset--color--primary);

    mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4=');
    mask-size: 75%;
    mask-position: center;
    mask-repeat: no-repeat;

    -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLWFycm93LXJpZ2h0Ij48cGF0aCBkPSJNNSAxMmgxNCIvPjxwYXRoIGQ9Im0xMiA1IDcgNy03IDciLz48L3N2Zz4=');
    -webkit-mask-size: 75%;
    -webkit-mask-position: center;
    -webkit-mask-repeat: no-repeat;
}

.eco-tab-system__tab-scroll:hover {
    cursor: pointer;
}

.eco-tab-system__tab-scroll:hover .eco-tab-system__tab-scroll__button {
    background-color: var(--wp--preset--color--primary);
}

.eco-tab-system__tab-scroll:hover .eco-tab-system__tab-scroll__button::before {
    background-color: var(--wp--preset--color--base);
}

@media screen and (max-width: 1024px) {

    .eco-tab-system__tab-container--sticky {
        top: 120px;
    }
}

@media screen and (max-width: 768px) {

    .eco-tab-system__tab-container {
        width: 100%;
        padding: 0 var(--wp--preset--spacing--30);
    }

	.eco-tab-system__tab-items {
		overflow-x: scroll;
	}

    .eco-tab-system__tab-item { 
		max-width: fit-content;
		white-space: nowrap;
	}

    .eco-tab-system__tab-scroll {
        display: block;
    }
}