body { 
    font-family: "ClashGrotesk-Regular";
    font-size: 16px;
}
    
main {
    padding-top: 2.8rem;

    span.subheading {
        font-family: 'ClashGrotesk-Medium';
        text-transform: uppercase;
        display: inline-block;
        margin-bottom: 10px;
    }
    div.subheading {
        font-family: 'ClashGrotesk-Medium';
        margin-bottom: 10px;
        text-transform: uppercase;
    }

    .subheading+h1,
    .subheading+h2,
    .subheading+h3,
    .subheading+h4 {
        margin-top: 0px;
    }

    p,
    ul,
    ol,
    h1, h2, h3, h4, h5 {
        margin-bottom: 20px;
        margin-top: 20px;
    }
    ol {
        list-style: none;
        counter-reset: custom-counter;
        padding-left: 0;
    }

    ol li {
    counter-increment: custom-counter;
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    font-family: 'ClashGrotesk-Medium';
    }

    ol li::before {
    content: counter(custom-counter);
    width: 35px;
    height: 35px;
    background-color: #8C9364;
    color: #fff; /* modifiable si besoin */
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    flex-shrink: 0;
    font-family: 'ClashGrotesk-Medium';
    }

    section {
        margin-top: 40px;
        margin-bottom: 40px;
    }

    section {
        
    } 

    h1, h2, h3 {
        font-family: 'ClashGrotesk-Medium';
        text-transform: uppercase;
    }
    h4, h5 {
        font-family: 'ClashGrotesk-Regular';
    }

    h1 {
        font-size: 2.05rem;
    }
    h2 {
        font-size: 1.9rem;
    }
    h3 {
        text-transform: uppercase;
        font-size: 1.6rem;
    }

    a {
        color: var(--bs-link-color-rgb);
    }

    strong {
        font-family: 'ClashGrotesk-Bold';
    }

    figure {
        legend {
            margin-top: 8px;
            color: var(--bs-noir-carbone);
            font-family: 'ClashGrotesk-Regular';
            font-size: 14px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            padding-left: 40px;
            padding-right: 40px;
        }

        div.legend {
            background-color: var(--bs-gris-vert);
            padding: 30px 30px 30px 30px;
            color: var(--bs-noir-carbone);
            font-size: 14px;
            line-height: normal;

            div {

            }
        }
        blockquote {
            font-family: "ClashGrotesk-Regular";
            font-size: 30px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            color: var(--bs-vert-mousse);
            padding-left: 58px;
            padding-right: 58px;
        }
        figcaption {
            color: var(--bs-vert-mousse);
            font-family: "ClashGrotesk-Regular";
            font-size: 20px;
            font-style: normal;
            font-weight: 400;
            line-height: normal;
            padding-left: 58px;
            padding-right: 58px;
        }
    }

    p.text-large {
        font-size: 1.2rem;
        margin-top: 32px;
        margin-bottom: 32px;
    }
    .text-medium {
        font-family: 'ClashGrotesk-Medium';
    }

    ul.inline {
        display: flex;
        list-style: none;
        flex-direction: column;
        padding: 0;
        font-family: 'ClashGrotesk-Medium';
        text-transform: uppercase;

        li {
            border-bottom: 1px solid var(--bs-gris-vert);
            padding-bottom: 5px;
            margin-bottom: 20px;
        }

        @media (min-width: 576px) { 
            flex-direction: row;
            justify-content: space-between;
        }
    }

    select, select:active, select:focus {
        background-color: transparent !important;
        border-color: transparent !important;
        color: var(--bs-noir-carbone);
        font-family: "Roboto", sans-serif;
        font-size: 14px;
        font-weight: 400;
        line-height: 150%;
        letter-spacing: -0.002px;
        text-transform: uppercase;
        leading-trim: both;
        text-edge: cap;
        box-shadow: none !important;
        border-bottom: 1px solid var(--bs-noir-carbone) !important;
        border-radius: 0 !important;
        padding-left: 0 !important; 
        padding-right: 0 !important;

        option {
            background-color: var(--bs-gris-vert);
            padding: 10px !important;
            border: none;
        }
    }
}


/* *** TABLETTE *** */
/* *** MD 768px *** */
@media (min-width: 768px) { 
    main {
        h1 {
            font-size: 3.43rem;
            margin-bottom: 30px;
            margin-top: 30px;
        }
        h2 {
            font-size: 2.45rem;  
        }
        h3 {
            font-size: 1.95rem;
        }

        h2, h3, h4, h5 {
            margin-bottom: 15px;
            margin-top: 15px;
        }

        section {
            margin-top: 60px;
            margin-bottom: 60px;
        }

        .presentation-right {
            >.row>div:last-of-type {
                padding-left: 70px;
            }
            
            figure {
                margin-bottom: 0;
                overflow: hidden;
                
                &.fullheight {
                    height: 100%;

                    img {
                        height: 100%;
                    }
                }
            }
        }

        .presentation-left {
            >.row>div:first-of-type {
                padding-right: 70px;
            }

            figure {
                margin-bottom: 0;
                overflow: hidden;

                &.fullheight {
                    height: 100%;

                    img {
                        height: 100%;
                    }
                }
            }
        }

        .row.presentation-text {
            >.col:nth-of-type(2n+1) {
                margin-right: 1.4375rem;
            }
            >.col:nth-of-type(2n) {
                margin-left: 1.4375rem;
            }
        }

        figure {
            blockquote {
                padding-left: 90px;
                padding-right: 90px;
            }
            figcaption {
                padding-left: 90px;
                padding-right: 90px;
            }
        }
    }
}

/* *** DESKTOP *** */
/* *** LG 992 *** */
@media (min-width: 992px) { 
    main {
        h1 {
            font-size: 4.375rem;
            margin-bottom: 40px;
            margin-top: 40px;
        }
        h2 {
            font-size: 3.125rem;  
        }
        h3 {
            font-size: 2.5rem;
        }

        h2, h3, h4, h5 {
            margin-bottom: 25px;
            margin-top: 25px;
        }

        section {
            margin-top: 80px;
            margin-bottom: 80px;
        }

        .presentation-right {
            >.row>div:last-of-type {
                padding-left: 100px;
            }
            
            figure {
                margin-bottom: 0;
                overflow: hidden;
            }
        }

        .presentation-left {
            >.row>div:first-of-type {
                padding-right: 100px;
            }

            figure {
                margin-bottom: 0;
                overflow: hidden;
            }
        }

        .row.presentation-text {
            >.col:nth-of-type(2n+1) {
                margin-right: 1.4375rem;
            }
            >.col:nth-of-type(2n) {
                margin-left: 1.4375rem;
            }
        }

        figure {
            blockquote {
                padding-left: 116px;
                padding-right: 116px;
            }
            figcaption {
                padding-left: 116px;
                padding-right: 116px;
            }
        }
    }
}

.masonry {
    column-count: 1;
    column-gap: 1rem;
}

@media (min-width: 768px) {
    .masonry {
        column-count: 3;
    }
}

/* Image wrapper */
.masonry-item {
    display: block;
    margin-bottom: 1rem;
    break-inside: avoid;
    overflow: hidden;
    background: #e9ecef;

    &:hover {
        legend {
            color: var(--bs-vert-mousse);
        }
    }

    figure {
        margin: 0;
    }
    legend {
        font-size: 14px;
        line-height: 24px;
        padding: 8px 22px;
        background-color: var(--bs-gris-vert);
        margin: 0;
        color: var(--bs-noir-carbone);
    }
}

/* Image animation */
.masonry-item img {
    width: 100%;
    display: block;
    filter: blur(20px); 
    transform: scale(1.05);
    opacity: 0;
    transition:
    filter 0.6s ease,
    transform 0.6s ease,
    opacity 0.6s ease;
}

.masonry-item img.loaded {
    filter: blur(0);
    transform: scale(1);
    opacity: 1;
}

.hero {
    position: absolute;
    top: 0;
    left: 0;  
    height: 100vh; 
    width: 100%;
    z-index: -1;

    .hero-image {
        position: absolute;
        top: 0; 
        left: 0;
        display: block;
        width: 100%;
        height: 100%;
        background-image: url("../../images/header-home-_qMEVPJ.jpg");
        background-size: cover; 
        background-position: center center;
        background-repeat: no-repeat;
        z-index: -1;
    }
}

.tabs {
    display: flex;
    flex-direction: column;
    background-color: var(--bs-gris-vert);
    
    ul.nav-tabs {
        width: 100%;
        display: flex;
        flex-direction: column;
        border: none;
        border-radius: 0;

        li.nav-item {
            flex-grow: 1;
            border: none;
            border-radius: 0;

            a.nav-link {
                position: relative;
                border: none;
                border-radius: 0;
                color: var(--bs-noir-carbone);
                font-family: 'ClashGrotesk-Medium';
                font-size: 1rem;
                line-height: normal;
                border-bottom: 1px solid #000;
                padding-top: 30px;
                padding-bottom: 30px;
                padding-right: 30px;
                padding-left: 0;
                cursor: pointer;
                transition: color 0.25s ease;

                span { 
                    display: block;
                    font-family: 'ClashGrotesk-Regular';
                }
                
                &:hover {
                    color: var(--bs-vert-mousse);
                }

                /* TRAIT */
                &::before {
                    content: "";
                    position: absolute;
                    right: 0px;
                    top: 50%;

                    width: 13px;
                    height: 2px;
                    background: currentColor;

                    transform: translateY(-50%);
                    transition: width 0.25s ease;
                }
                /* POINTE */
                &::after {
                    content: "";
                    position: absolute;
                    right: 0px;
                    top: 50%;

                    width: 11px;
                    height: 11px;
                    border-top: 2px solid currentColor;
                    border-right: 2px solid currentColor;

                    transform: translateY(-50%) rotate(45deg);
                }
                /* HOVER */
                &:hover::before {
                    width: 20px; /* seul le trait s'allonge */
                }
            }

            &:last-of-type a.nav-link {
                border-bottom: 0;
            }
        }
    }

    &.active {
        @media (min-width: 768px) {
            div.slides {
                background-image: none;
            }
        }
    }

    div.slides {
        display: none;
        width: 100%;
        
        @media (min-width: 768px) {
            background-image: url("../../images/signifiant-vW0Grj0.svg");
            background-size: 196px 196px;
            background-position: center 30%;
            background-repeat: no-repeat;
        }

        div.slide {
            display: none;
            flex-direction: row;
            justify-content: center;
            padding-left: 2rem;

            &.active {
                display: flex;
            }
        }
    }

    @media (min-width: 768px) {
        flex-direction: row;

        div.slides { 
            display: block;
        }

        ul.nav-tabs {
            width: 45%;
            
        }
        div.slides {
            width: 55%;
        }
    }
}

ul.inline-list {
    padding: 0;
    list-style: none;
    text-transform: uppercase;

    li {
        padding-bottom: 10px;
        margin-bottom: 30px;
        border-bottom: 1px solid var(--bs-noir-carbone);
        transition: border 0.25s ease;

        &:hover {
            border-bottom-color: var(--bs-vert-mousse);
        }

        a {
            display: block;
            width: 100%;
            position: relative;
            color: var(--bs-noir-carbone);
            text-decoration: none;
            transition: color 0.25s ease;

            &:hover {
                color: var(--bs-vert-mousse);
            }

            &::after {
                position: absolute;
                right: 0;
                display: inline;
                content: '\f061';
                font-family: "Font Awesome 7 Free";
                font-size: 0.75rem;
                margin-left: 1rem;
            }
        }
    }
    
    @media (min-width: 768px) {
        li {
            margin-right: 60px;
            margin-bottom: 40px;

            a {
                display: inline;
                width: auto;

                &::after {
                    position: relative;
                    right: unset;
                    display: inline;
                    content: '\f061';
                    font-family: "Font Awesome 7 Free";
                    font-size: 0.75rem;
                    margin-left: 1rem;
                }
            }
        }
    }
}

input.form-control {
    background-color: transparent;
    border: none;
    border-bottom: 1px solid var(--bs-noir-carbone);
    border-radius: 0;
    padding: 5px 10px 10px 0px;
    box-shadow: none;

    &:focus, &:active {
        box-shadow: none;
        border: 0;
    }
}

textarea.form-control {
    background-color: transparent;
    border: 1px dotted var(--bs-noir-carbone);
    border-radius: 0;
    padding: 1rem;
    box-shadow: none;

    &:focus, &:active {
        box-shadow: none;
        border: 0;
    }
}

.position-lg-absolute {
    @media (min-width: 992px) {
        position: absolute !important;
    }
}