.glossary-hero {
    background-color: var(--wp--preset--color--dark-green);
    padding: calc(var(--wp--preset--spacing--80) * 1.5) 0 var(--wp--preset--spacing--60);
    background-image: url(../images/glossary-hero.svg);
    background-position: center right;
    background-repeat: no-repeat;
    position: relative;

    h1 {
        color: #fff;
    }

    .bnp-breadcrumb {
		margin-bottom: var(--wp--preset--spacing--50);
        position: absolute;
        top: var(--wp--preset--spacing--40);

		ul {
			display: flex;
			align-items: center;
            justify-content: center;
			padding: 0;
			margin: 0;
			list-style: none;
			font-weight: 300;
			flex-wrap: wrap;

			li {

				font-weight: 400;
				font-size: calc(var(--wp--preset--font-size--body) - 2px);
                color: var(--wp--preset--color--white);

				&:not(:last-child)::after {
					content: ">";
                    color: var(--wp--preset--color--white);
					margin: 0 var(--wp--preset--spacing--30);
					font-family: var(--wp--preset--font-family--bnpp-sans-condensed);
				}

				a {
					color: var(--wp--preset--color--white);
					opacity: 0.9;
					font-weight: 300;
					text-decoration: none;

					&:hover {
						text-decoration: underline;
					}
				}

			}
		}

        &.bnp-breadcrumb-rebrand {
            border-radius: 2px;
            border: 1px solid rgba(0, 27, 21, 0.05);
            background: rgba(0, 27, 21, 0.05);
            ul {
                padding: 6px 8px;
                li {
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    color: var(--Primary-Colours-Jade-4, #346452);
                    /* Desktop/SB 3 */
                    font-family: "BNPP Sans";
                    font-size: 12px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 14px; /* 116.667% */
                    a {
                        color: var(--Primary-Colours-Black, #1E1E1E);
                        /* Desktop/SB 3 */
                        font-family: "BNPP Sans";
                        font-size: 12px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 14px; /* 116.667% */
                    }

                    &:not(:last-child)::after {
                        color: var(--Primary-Colours-Black, #1E1E1E);
                        font-size: 20px;
                    }
                }
            }
        }
	}

    .bnp-glossary-nav {
    
        ul {
            list-style: none;
            padding: 0;
            margin: 0;
            margin-top: var(--wp--preset--spacing--80);
            display: flex;
            flex-wrap: wrap;
    
            li {

                display: grid;
                width: 40px;
                height: 55px;
                place-content: center;
    
                .glossary-letter {
                    color: var(--wp--preset--color--white);
                    font-family: var(--wp--preset--font-family--bnpp-sans);
                    font-size: var(--wp--preset--font-size--heading-s);
                    font-weight: 300;
                    cursor: pointer;
                    line-height: 1;
                    transform: translateY(3px);
                }

                &.active {
                    border: solid 1px var(--wp--preset--color--bnpp-green);
                    background-color: var(--wp--preset--color--bnpp-green-tint-20);
                }

                &.disabled {
                    opacity: 0.5;

                    .glossary-letter {
                        cursor: not-allowed;
                        pointer-events: none;
                    }
                }
            }
        }
    
    }

    &.glossary-hero-rebrand {
        border-bottom: 1px solid rgba(52, 100, 82, 0.50);
        background: #fff;
        background-image: none;

        h1 {
            color: var(--Primary-Colours-Jade-3, #003F29);
            /* Desktop/H1 */
            font-family: "BNPP Sans Condensed";
            font-size: 100px;
            font-style: normal;
            font-weight: 400;
            line-height: 110px; /* 110% */
        }

        .bnp-glossary-nav {
            ul {
                justify-content: space-between;
                li {
                    position: relative;
                    .glossary-letter {
                        color: var(--Primary-Colours-Black, #1E1E1E);
                        text-align: center;

                        /* Desktop/H4 */
                        font-family: "BNPP Sans Condensed";
                        font-size: 40px;
                        font-style: normal;
                        font-weight: 400;
                        line-height: 48px; /* 120% */
                    }

                    &::before, &::after {
                        position: absolute;
                        content: "";
                        display: inline-block;
                        width: 6px;                 /* largeur nulle → on ne crée que les bordures */
                        height: 100%;            /* hauteur du crochet (≈ de la lettre) */
                        border-top: 2px solid #fff;
                        border-bottom: 2px solid #fff;
                    }

                    /* crochet gauche */
                    &::before {
                        border-bottom-left-radius: 3px;
                        border-top-left-radius: 3px;
                        border-left: 2px solid #fff;
                        margin-right: 0.10em;     /* espace entre le crochet et la lettre */
                    }

                    /* crochet droit */
                    &::after {
                        border-bottom-right-radius: 3px;
                        border-top-right-radius: 3px;
                        right: 0;
                        border-right: 2px solid #fff;
                        margin-left: 0.10em;      /* espace entre la lettre et le crochet */
                    }


                    &.active {
                        position: relative;
                        background-color: #fff;
                        border-color: #fff;

                        &::before, &::after {
                            border-color: #346452;
                        }

                        .glossary-letter {
                            color: var(--Primary-Colours-Jade-4, #346452);
                            text-align: center;

                            /* Desktop/H4 */
                            font-family: "BNPP Sans Condensed";
                            font-size: 40px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 48px; /* 120% */
                            text-decoration-line: underline !important;
                            text-decoration-style: solid !important;
                            text-decoration-skip-ink: auto !important;
                            text-decoration-thickness: 2px !important;
                            text-underline-offset: auto !important;
                            text-decoration-color: var(--Primary-Colours-Jade-4, #346452) !important;
                            text-underline-position: from-font;
                        }
                    }
                }
            }
        }
    }

}

#bnp-glossary-result {
    padding: var(--wp--preset--spacing--60) 0;
    min-height: 500px;

    .bnp-entry {
        display: flex;
        flex-wrap: wrap;
        gap: var(--wp--preset--spacing--60);
        padding: var(--wp--preset--spacing--80);
        background-color: #F3F9F7;

        &:not(:last-child) {
            margin-bottom: var(--wp--preset--spacing--60);
        }

        @media only screen and (max-width: 768px) {
            padding: var(--wp--preset--spacing--60);
            gap: var(--wp--preset--spacing--40);
        }

        &.hidden {
            display: none;
        }

        h3 {
            flex: 0 1 250px;
            margin: 0;
            color: var(--wp--preset--color--bnpp-green);
        }

        .bnp-content {
            flex: 1 1 50%;

            p {

                font-weight: 400;
                &:last-child {
                    margin: 0;
                }
            }
        }

        &.bnp-entry-rebrand {
            border-radius: 4px;
            background: rgba(173, 198, 164, 0.12);

            &:not(:last-child) {
                margin-bottom: 12px;
            }

            h3 {
                color: var(--Primary-Colours-Jade-4, #346452);
                /* Desktop/H4 */
                font-family: "BNPP Sans Condensed";
                font-size: 40px;
                font-style: normal;
                font-weight: 400;
                line-height: 48px; /* 120% */
            }

            .bnp-content {

                p {
                    color: var(--Primary-Colours-Black, #1E1E1E);
                    /* Desktop/B1 */
                    font-family: "BNPP Sans";
                    font-size: 18px;
                    font-style: normal;
                    font-weight: 400;
                    line-height: 26px; /* 144.444% */
                }
            }
        }
    }
}
.underline-text {
text-decoration:underline!important;
text-decoration-color:white!important;
}
a:where(:not(.wp-element-button))
{
text-decoration:none!important;
}


@media only screen and (max-width: 1299px) {
    .glossary-hero {
        &.glossary-hero-rebrand {
            & .bnp-glossary-nav {
                ul {
                    justify-content: flex-start;
                }
            }
        }
    }
}